summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-21 23:07:50 +0200
committerVolpeon <git@volpeon.ink>2024-06-21 23:07:50 +0200
commit48cb00040763459fc46d4aa108bf72c12f48f422 (patch)
tree9609470d56bb31d55697ef0c42f1c908804dd3f1 /src
parentUpdate (diff)
downloadiro-design-48cb00040763459fc46d4aa108bf72c12f48f422.tar.gz
iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.tar.bz2
iro-design-48cb00040763459fc46d4aa108bf72c12f48f422.zip
WIP: Refactoring
Diffstat (limited to 'src')
-rw-r--r--src/.old/objects/_action-button.scss (renamed from src/objects/_action-button.scss)0
-rw-r--r--src/.old/objects/_action-menu.scss (renamed from src/objects/_action-menu.scss)0
-rw-r--r--src/.old/objects/_alert.scss (renamed from src/objects/_alert.scss)0
-rw-r--r--src/.old/objects/_avatar.scss (renamed from src/objects/_avatar.scss)0
-rw-r--r--src/.old/objects/_backdrop.scss (renamed from src/objects/_backdrop.scss)0
-rw-r--r--src/.old/objects/_badge.scss (renamed from src/objects/_badge.scss)0
-rw-r--r--src/.old/objects/_button.scss (renamed from src/objects/_button.scss)0
-rw-r--r--src/.old/objects/_checkbox.scss (renamed from src/objects/_checkbox.scss)0
-rw-r--r--src/.old/objects/_dialog.scss (renamed from src/objects/_dialog.scss)0
-rw-r--r--src/.old/objects/_emoji.scss (renamed from src/objects/_emoji.scss)0
-rw-r--r--src/.old/objects/_field-label.scss (renamed from src/objects/_field-label.scss)0
-rw-r--r--src/.old/objects/_icon-nav.scss (renamed from src/objects/_icon-nav.scss)0
-rw-r--r--src/.old/objects/_icon.scss (renamed from src/objects/_icon.scss)0
-rw-r--r--src/.old/objects/_lightbox.scss (renamed from src/objects/_lightbox.scss)0
-rw-r--r--src/.old/objects/_list-group.scss (renamed from src/objects/_list-group.scss)0
-rw-r--r--src/.old/objects/_menu.scss (renamed from src/objects/_menu.scss)0
-rw-r--r--src/.old/objects/_message.scss (renamed from src/objects/_message.scss)0
-rw-r--r--src/.old/objects/_overflow-button.scss (renamed from src/objects/_overflow-button.scss)0
-rw-r--r--src/.old/objects/_radio.scss (renamed from src/objects/_radio.scss)0
-rw-r--r--src/.old/objects/_status-indicator.scss (renamed from src/objects/_status-indicator.scss)0
-rw-r--r--src/.old/objects/_switch.scss (renamed from src/objects/_switch.scss)0
-rw-r--r--src/.old/objects/_table.scss (renamed from src/objects/_table.scss)0
-rw-r--r--src/.old/objects/_text-field.scss (renamed from src/objects/_text-field.scss)0
-rw-r--r--src/.old/scopes/_blockquotes.scss (renamed from src/scopes/_blockquotes.scss)0
-rw-r--r--src/.old/scopes/_code.scss (renamed from src/scopes/_code.scss)0
-rw-r--r--src/.old/scopes/_lists.scss (renamed from src/scopes/_lists.scss)0
-rw-r--r--src/.old/scopes/_tables.scss (renamed from src/scopes/_tables.scss)0
-rw-r--r--src/_apply-vars.scss73
-rw-r--r--src/_base.scss38
-rw-r--r--src/_config.scss134
-rw-r--r--src/_declare-vars.scss225
-rw-r--r--src/_functions.scss120
-rw-r--r--src/_mixins.scss7
-rw-r--r--src/_objects.scss47
-rw-r--r--src/_scopes.scss8
-rw-r--r--src/_themes.scss14
-rw-r--r--src/_utils.scss47
-rw-r--r--src/index.scss1
-rw-r--r--src/layouts/_button-group.scss2
-rw-r--r--src/layouts/_container.scss2
-rw-r--r--src/layouts/_form.scss4
-rw-r--r--src/layouts/_media.scss2
-rw-r--r--src/layouts/_message-group.scss8
-rw-r--r--src/layouts/_overflow.scss2
-rw-r--r--src/objects/_divider.scss51
-rw-r--r--src/objects/_heading.scss29
-rw-r--r--src/objects/_palette.scss38
-rw-r--r--src/scopes/_links.scss75
48 files changed, 437 insertions, 490 deletions
diff --git a/src/objects/_action-button.scss b/src/.old/objects/_action-button.scss
index 48ac2a6..48ac2a6 100644
--- a/src/objects/_action-button.scss
+++ b/src/.old/objects/_action-button.scss
diff --git a/src/objects/_action-menu.scss b/src/.old/objects/_action-menu.scss
index 12e3b5f..12e3b5f 100644
--- a/src/objects/_action-menu.scss
+++ b/src/.old/objects/_action-menu.scss
diff --git a/src/objects/_alert.scss b/src/.old/objects/_alert.scss
index 289ef10..289ef10 100644
--- a/src/objects/_alert.scss
+++ b/src/.old/objects/_alert.scss
diff --git a/src/objects/_avatar.scss b/src/.old/objects/_avatar.scss
index 4be780e..4be780e 100644
--- a/src/objects/_avatar.scss
+++ b/src/.old/objects/_avatar.scss
diff --git a/src/objects/_backdrop.scss b/src/.old/objects/_backdrop.scss
index ac23d63..ac23d63 100644
--- a/src/objects/_backdrop.scss
+++ b/src/.old/objects/_backdrop.scss
diff --git a/src/objects/_badge.scss b/src/.old/objects/_badge.scss
index 0f73382..0f73382 100644
--- a/src/objects/_badge.scss
+++ b/src/.old/objects/_badge.scss
diff --git a/src/objects/_button.scss b/src/.old/objects/_button.scss
index 7cc24fa..7cc24fa 100644
--- a/src/objects/_button.scss
+++ b/src/.old/objects/_button.scss
diff --git a/src/objects/_checkbox.scss b/src/.old/objects/_checkbox.scss
index b3bb34d..b3bb34d 100644
--- a/src/objects/_checkbox.scss
+++ b/src/.old/objects/_checkbox.scss
diff --git a/src/objects/_dialog.scss b/src/.old/objects/_dialog.scss
index 9333ce6..9333ce6 100644
--- a/src/objects/_dialog.scss
+++ b/src/.old/objects/_dialog.scss
diff --git a/src/objects/_emoji.scss b/src/.old/objects/_emoji.scss
index 8d17212..8d17212 100644
--- a/src/objects/_emoji.scss
+++ b/src/.old/objects/_emoji.scss
diff --git a/src/objects/_field-label.scss b/src/.old/objects/_field-label.scss
index 2127a09..2127a09 100644
--- a/src/objects/_field-label.scss
+++ b/src/.old/objects/_field-label.scss
diff --git a/src/objects/_icon-nav.scss b/src/.old/objects/_icon-nav.scss
index d1c6539..d1c6539 100644
--- a/src/objects/_icon-nav.scss
+++ b/src/.old/objects/_icon-nav.scss
diff --git a/src/objects/_icon.scss b/src/.old/objects/_icon.scss
index 5c4bfab..5c4bfab 100644
--- a/src/objects/_icon.scss
+++ b/src/.old/objects/_icon.scss
diff --git a/src/objects/_lightbox.scss b/src/.old/objects/_lightbox.scss
index 31d3398..31d3398 100644
--- a/src/objects/_lightbox.scss
+++ b/src/.old/objects/_lightbox.scss
diff --git a/src/objects/_list-group.scss b/src/.old/objects/_list-group.scss
index d46722e..d46722e 100644
--- a/src/objects/_list-group.scss
+++ b/src/.old/objects/_list-group.scss
diff --git a/src/objects/_menu.scss b/src/.old/objects/_menu.scss
index 7db4896..7db4896 100644
--- a/src/objects/_menu.scss
+++ b/src/.old/objects/_menu.scss
diff --git a/src/objects/_message.scss b/src/.old/objects/_message.scss
index 283ce26..283ce26 100644
--- a/src/objects/_message.scss
+++ b/src/.old/objects/_message.scss
diff --git a/src/objects/_overflow-button.scss b/src/.old/objects/_overflow-button.scss
index b15ea1f..b15ea1f 100644
--- a/src/objects/_overflow-button.scss
+++ b/src/.old/objects/_overflow-button.scss
diff --git a/src/objects/_radio.scss b/src/.old/objects/_radio.scss
index 5af7a12..5af7a12 100644
--- a/src/objects/_radio.scss
+++ b/src/.old/objects/_radio.scss
diff --git a/src/objects/_status-indicator.scss b/src/.old/objects/_status-indicator.scss
index d8ea9ef..d8ea9ef 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/.old/objects/_status-indicator.scss
diff --git a/src/objects/_switch.scss b/src/.old/objects/_switch.scss
index cbbb9b7..cbbb9b7 100644
--- a/src/objects/_switch.scss
+++ b/src/.old/objects/_switch.scss
diff --git a/src/objects/_table.scss b/src/.old/objects/_table.scss
index 34512cb..34512cb 100644
--- a/src/objects/_table.scss
+++ b/src/.old/objects/_table.scss
diff --git a/src/objects/_text-field.scss b/src/.old/objects/_text-field.scss
index 88c4535..88c4535 100644
--- a/src/objects/_text-field.scss
+++ b/src/.old/objects/_text-field.scss
diff --git a/src/scopes/_blockquotes.scss b/src/.old/scopes/_blockquotes.scss
index 5383bd7..5383bd7 100644
--- a/src/scopes/_blockquotes.scss
+++ b/src/.old/scopes/_blockquotes.scss
diff --git a/src/scopes/_code.scss b/src/.old/scopes/_code.scss
index 4eb9458..4eb9458 100644
--- a/src/scopes/_code.scss
+++ b/src/.old/scopes/_code.scss
diff --git a/src/scopes/_lists.scss b/src/.old/scopes/_lists.scss
index 1322f2d..1322f2d 100644
--- a/src/scopes/_lists.scss
+++ b/src/.old/scopes/_lists.scss
diff --git a/src/scopes/_tables.scss b/src/.old/scopes/_tables.scss
index f78e81b..f78e81b 100644
--- a/src/scopes/_tables.scss
+++ b/src/.old/scopes/_tables.scss
diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss
index bee2ff3..a2ee404 100644
--- a/src/_apply-vars.scss
+++ b/src/_apply-vars.scss
@@ -1,82 +1,17 @@
1@use 'sass:map';
1@use 'iro-sass/src/index' as iro; 2@use 'iro-sass/src/index' as iro;
2@use 'include-media/dist/include-media' as media; 3@use 'include-media/dist/include-media' as media;
3 4
4:root { 5:root {
5 @include iro.props-assign('dims'); 6 @include iro.props-assign;
6 7
7 @each $breakpoint in map-keys(media.$breakpoints) { 8 @each $breakpoint in map.keys(media.$breakpoints) {
8 @include media.media('<=#{$breakpoint}') { 9 @include media.media('<=#{$breakpoint}') {
9 @include iro.props-assign($breakpoint); 10 @include iro.props-assign($breakpoint);
10 } 11 }
11 } 12 }
12 13
13 @include iro.props-assign('colors');
14 @include iro.props-assign('palette-light');
15
16 @media (prefers-color-scheme: dark) {
17 @include iro.props-assign('colors-dark');
18 @include iro.props-assign('palette-dark');
19 }
20}
21
22@include iro.bem-theme('media') {
23 @include iro.props-assign('colors');
24 @include iro.props-assign('colors-media');
25 @include iro.props-assign('palette-media-dark');
26}
27
28@include iro.bem-theme('media-light') {
29 @include iro.props-assign('colors');
30 @include iro.props-assign('colors-media-light');
31 @include iro.props-assign('palette-media-light');
32}
33
34@include iro.bem-theme('def') {
35 @include iro.props-assign('colors');
36 @include iro.props-assign('palette-light');
37
38 @media (prefers-color-scheme: dark) {
39 @include iro.props-assign('colors-dark');
40 @include iro.props-assign('palette-dark');
41 }
42}
43
44@include iro.bem-theme('hi') {
45 @include iro.props-assign('colors');
46 @include iro.props-assign('palette-light-hi');
47
48 @media (prefers-color-scheme: dark) {
49 @include iro.props-assign('colors-dark');
50 @include iro.props-assign('palette-dark-hi');
51 }
52}
53
54@include iro.bem-theme('lo') {
55 @include iro.props-assign('colors');
56 @include iro.props-assign('palette-light-lo');
57
58 @media (prefers-color-scheme: dark) {
59 @include iro.props-assign('colors-dark');
60 @include iro.props-assign('palette-dark-lo');
61 }
62}
63
64@include iro.bem-theme('up') {
65 @include iro.props-assign('colors');
66 @include iro.props-assign('palette-light-hi');
67
68 @media (prefers-color-scheme: dark) {
69 @include iro.props-assign('colors-dark');
70 @include iro.props-assign('palette-dark-lo');
71 }
72}
73
74@include iro.bem-theme('down') {
75 @include iro.props-assign('colors');
76 @include iro.props-assign('palette-light-lo');
77
78 @media (prefers-color-scheme: dark) { 14 @media (prefers-color-scheme: dark) {
79 @include iro.props-assign('colors-dark'); 15 @include iro.props-assign('dark');
80 @include iro.props-assign('palette-dark-hi');
81 } 16 }
82} 17}
diff --git a/src/_base.scss b/src/_base.scss
index 740fe3f..b4ce1ae 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -5,7 +5,7 @@
5@use 'config'; 5@use 'config';
6 6
7html { 7html {
8 scrollbar-color: fn.color(--fg-hi3) fn.color(--bg); 8 scrollbar-color: fn.color(--text-disabled) transparent;
9} 9}
10 10
11html, 11html,
@@ -18,8 +18,8 @@ body {
18 18
19 margin: 0; 19 margin: 0;
20 padding: 0; 20 padding: 0;
21 background-color: fn.color(--bg); 21 background-color: fn.color(--bg-base);
22 color: fn.color(--fg); 22 color: fn.color(--text);
23} 23}
24 24
25pre, 25pre,
@@ -48,21 +48,20 @@ h3,
48h4, 48h4,
49h5, 49h5,
50h6 { 50h6 {
51 margin: fn.dim(--heading --margin-top) 0 0; 51 margin-block: fn.dim(--heading --margin-bs) 0;
52 color: fn.color(--fg-lo); 52 color: fn.color(--heading);
53 font-size: fn.dim(--font-size --75); 53 font-size: fn.dim(--font-size --75);
54 font-weight: bold; 54 font-weight: bold;
55 letter-spacing: 1px; 55 letter-spacing: 1px;
56 text-transform: uppercase; 56 text-transform: uppercase;
57 57
58 & + & { 58 & + & {
59 margin-top: fn.dim(--heading --margin-top-sibling); 59 margin-block-start: fn.dim(--heading --margin-bs-sibling);
60 } 60 }
61} 61}
62 62
63p { 63p {
64 margin-top: fn.dim(--paragraph --margin-top); 64 margin-block: fn.dim(--paragraph --margin-bs) 0;
65 margin-bottom: 0;
66 65
67 &:empty { 66 &:empty {
68 display: none; 67 display: none;
@@ -70,12 +69,12 @@ p {
70} 69}
71 70
72strong { 71strong {
73 color: fn.color(--fg-lo); 72 color: fn.color(--heading);
74 font-weight: bold; 73 font-weight: bold;
75} 74}
76 75
77small { 76small {
78 color: fn.color(--fg-hi); 77 color: fn.color(--text-mute);
79 font-size: fn.dim(--font-size --75); 78 font-size: fn.dim(--font-size --75);
80} 79}
81 80
@@ -129,11 +128,11 @@ input,
129textarea { 128textarea {
130 &::placeholder { 129 &::placeholder {
131 opacity: 1; 130 opacity: 1;
132 color: fn.color(--obj); 131 color: fn.color(--text-mute);
133 } 132 }
134 133
135 &:disabled { 134 &:disabled {
136 color: fn.color(--fg-hi); 135 color: fn.color(--text-disabled);
137 } 136 }
138} 137}
139 138
@@ -141,20 +140,9 @@ textarea {
141 height: calc(1em * fn.dim(--font --standard --line-height)); 140 height: calc(1em * fn.dim(--font --standard --line-height));
142} 141}
143 142
144::selection {
145 background: fn.color(--selection --bg);
146 color: fn.color(--selection --fg);
147}
148
149img {
150 &::selection {
151 background: fn.color(--selection --bg-img);
152 }
153}
154
155hr { 143hr {
156 height: fn.dim(--border --thin); 144 height: fn.dim(--border --thin);
157 margin: calc(.5 * (fn.dim(--heading --margin-top) + fn.dim(--paragraph --margin-top))) 0; 145 margin-block: calc(.5 * (fn.dim(--heading --margin-bs) + fn.dim(--paragraph --margin-bs))) 0;
158 border: 0; 146 border: 0;
159 background-color: fn.color(--obj); 147 background-color: fn.color(--border);
160} 148}
diff --git a/src/_config.scss b/src/_config.scss
index c42ad97..08374fb 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -1,6 +1,9 @@
1@use 'sass:list';
2@use 'sass:map';
1@use 'iro-sass/src/index' as iro; 3@use 'iro-sass/src/index' as iro;
2@use 'iro-sass/src/responsive' as res; 4@use 'iro-sass/src/responsive' as res;
3@use 'include-media/dist/include-media' as media; 5@use 'include-media/dist/include-media' as media;
6@use '@oddbird/blend';
4 7
5iro.$vars-root-size: 16px; 8iro.$vars-root-size: 16px;
6 9
@@ -20,18 +23,123 @@ media.$unit-intervals: (
20 23
21res.$named-viewports: media.$breakpoints; 24res.$named-viewports: media.$breakpoints;
22 25
23$wanted-grays: ( 26$palette-precision: 5 !default;
24 --1: -1.3,
25 --2: -1.15,
26 --3: 1,
27 27
28 --4: 1.15, 28$theme-light: (
29 --5: 1.35, 29 --base: hsl(0, 0%, 97%),
30 --6: 1.7, 30 --blue: blend.lch(48% 50 279),
31 --purple: blend.lch(48% 50 308),
32 --red: blend.lch(48% 50 23),
33 --green: blend.lch(63% 50 147),
34 --yellow: blend.lch(68% 50 70),
31 35
32 --7: 2.4, 36 --grays: (
33 --8: 3.3, 37 --50: 1.1,
34 --9: 6, 38 --75: 1.04,
35 --10: 13, 39 --100: 1,
36 --11: 20, 40
37); 41 --200: -1.15,
42 --300: -1.35,
43 --400: -1.7,
44
45 --500: -2.4,
46 --600: -3.3,
47 --700: -6,
48 --800: -13,
49 --900: -20,
50 ),
51 --colors: (
52 --100: -1.08,
53 --200: -1.20,
54 --300: -1.33,
55 --400: -1.58,
56 --500: -1.92,
57 --600: -2.39,
58 --700: -3.01,
59 --800: -3.87,
60 --900: -5.07,
61 --1000: -6.72,
62 --1100: -8.84,
63 --1200: -11.31,
64 --1300: -13.94,
65 ),
66
67 --accent: --blue,
68
69 --bg-l2: --50,
70 --bg-l1: --100,
71 --bg-base: --200,
72
73 --border-mute: --200,
74 --border: --300,
75 --border-strong: --400,
76
77 --text-disabled: --500,
78 --text-mute-more: --600,
79 --text-mute: --700,
80 --text: --800,
81 --heading: --900,
82) !default;
83
84$theme-dark: (
85 --base: hsl(0, 0%, 19%),
86 --blue: blend.lch(48% 50 279),
87 --purple: blend.lch(48% 50 308),
88 --red: blend.lch(48% 50 23),
89 --green: blend.lch(63% 50 147),
90 --yellow: blend.lch(68% 50 70),
91
92 --grays: (
93 --50: -1.31,
94 --75: -1.18,
95 --100: 1,
96
97 --200: 1.15,
98 --300: 1.35,
99 --400: 1.7,
100
101 --500: 2.4,
102 --600: 3.3,
103 --700: 6,
104 --800: 13,
105 --900: 20,
106 ),
107 --colors: (
108 --100: 1.12,
109 --200: 1.30,
110 --300: 1.58,
111 --400: 1.96,
112 --500: 2.45,
113 --600: 3.09,
114 --700: 3.90,
115 --800: 4.85,
116 --900: 6.02,
117 --1000: 7.34,
118 --1100: 8.77,
119 --1200: 10.18,
120 --1300: 11.64,
121 ),
122
123 --accent: --blue,
124
125 --bg-base: --50,
126 --bg-l1: --75,
127 --bg-l2: --100,
128
129 --border-mute: --200,
130 --border: --300,
131 --border-strong: --400,
132
133 --text-disabled: --500,
134 --text-mute-more: --600,
135 --text-mute: --700,
136 --text: --800,
137 --heading: --900,
138) !default;
139
140$themes: (
141 light: $theme-light,
142 dark: $theme-dark,
143) !default;
144
145$theme-default: list.nth(map.keys($themes), 1) !default;
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index bf7e955..37d9cae 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -1,7 +1,9 @@
1@use 'sass:map';
1@use 'iro-sass/src/index' as iro; 2@use 'iro-sass/src/index' as iro;
2@use 'include-media/dist/include-media' as media; 3@use 'include-media/dist/include-media' as media;
3@use '@oddbird/blend'; 4@use '@oddbird/blend';
4@use 'functions' as fn; 5@use 'functions' as fn;
6@use 'config';
5 7
6@include iro.props-store(( 8@include iro.props-store((
7 --dims: ( 9 --dims: (
@@ -102,12 +104,12 @@
102 ), 104 ),
103 105
104 --paragraph: ( 106 --paragraph: (
105 --margin-top: fn.dim(--size --300, null), 107 --margin-bs: fn.dim(--size --300, null),
106 ), 108 ),
107 109
108 --heading: ( 110 --heading: (
109 --margin-top: fn.dim(--size --700, null), 111 --margin-bs: fn.dim(--size --700, null),
110 --margin-top-sibling: fn.dim(--size --325, null), 112 --margin-bs-sibling: fn.dim(--size --325, null),
111 113
112 --lg: fn.dim(--font-size --400, null), 114 --lg: fn.dim(--font-size --400, null),
113 --md: fn.dim(--font-size --75, null), 115 --md: fn.dim(--font-size --75, null),
@@ -137,12 +139,18 @@
137 --compact-indent: fn.dim(--size --250, null), 139 --compact-indent: fn.dim(--size --250, null),
138 ), 140 ),
139 ), 141 ),
140), 'dims'); 142));
143
144@each $breakpoint in map.keys(media.$breakpoints) {
145 @include media.media('<=#{$breakpoint}') {
146 @include iro.props-store((), $breakpoint);
147 }
148}
141 149
142@include iro.props-store(( 150@include iro.props-store((
143 --dims: ( 151 --dims: (
144 --heading: ( 152 --heading: (
145 --margin-top: fn.dim(--size --600, null), 153 --margin-bs: fn.dim(--size --600, null),
146 ), 154 ),
147 155
148 --list: ( 156 --list: (
@@ -154,7 +162,7 @@
154@include iro.props-store(( 162@include iro.props-store((
155 --dims: ( 163 --dims: (
156 --heading: ( 164 --heading: (
157 --margin-top: fn.dim(--size --500, null), 165 --margin-bs: fn.dim(--size --500, null),
158 ), 166 ),
159 167
160 --list: ( 168 --list: (
@@ -167,185 +175,56 @@
167 175
168@include iro.props-store(( 176@include iro.props-store((
169 --colors: ( 177 --colors: (
170 --gray: fn.gray-palette(100%), 178 --base: fn.palette(
171 ), 179 map.get(config.$theme-light, --base),
172), 'palette-light-hi'); 180 map.get(config.$theme-light, --grays),
173
174@include iro.props-store((
175 --colors: (
176 --gray: fn.gray-palette(97%),
177 ),
178), 'palette-light');
179
180@include iro.props-store((
181 --colors: (
182 --gray: fn.gray-palette(93%),
183 ),
184), 'palette-light-lo');
185
186// @include iro.props-store((
187// --colors: (
188// --gray: fn.gray-palette(88%),
189// ),
190// ), 'palette-light-lo2');
191
192@include iro.props-store((
193 --colors: (
194 --bg-hi2: fn.color(--gray --1, null), // Lightest background
195 --bg-hi: fn.color(--gray --2, null), // Lighter background
196 --bg: fn.color(--gray --3, null), // Background
197
198 --obj-hi: fn.color(--gray --4, null),
199 --obj: fn.color(--gray --5, null),
200 --obj-lo: fn.color(--gray --6, null),
201
202 --fg-hi3: fn.color(--gray --7, null), // Disabled text
203 --fg-hi2: fn.color(--gray --8, null), // Placeholder text
204 --fg-hi: fn.color(--gray --9, null), // Faint text
205 --fg: fn.color(--gray --10, null), // Text
206 --fg-lo: fn.color(--gray --11, null), // Strong text
207
208 --border: (
209 --regular: fn.color(--obj, null),
210 --stable: iro.props-get-static(--colors --gray --5, 'palette-light'),
211 --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-light'),
212 ),
213
214 --blue: fn.color-palette(blend.lch(48% 50 279)),
215 --purple: fn.color-palette(blend.lch(48% 50 308)),
216 --red: fn.color-palette(blend.lch(48% 50 23)),
217 --green: fn.color-palette(blend.lch(63% 50 147)),
218 --yellow: fn.color-palette(blend.lch(68% 50 70)),
219
220 --accent: (
221 --primary: iro.props-ref('colors', --colors --blue),
222 --error: iro.props-ref('colors', --colors --red),
223 --success: iro.props-ref('colors', --colors --green),
224 --warning: iro.props-ref('colors', --colors --yellow),
225 --link-idle: iro.props-ref('colors', --colors --blue),
226 --link-visited: iro.props-ref('colors', --colors --purple),
227 ),
228
229 --selection: (
230 --bg: fn.color(--accent --primary --selection, null),
231 --bg-img: fn.color(--accent --primary --quiet --obj-lo, null),
232 --fg: fn.color(--accent --primary --solid --fg, null),
233 ), 181 ),
234
235 --focus: (
236 --shadow: 0 0 0 fn.dim(--focus --outline-width, null) fn.color(--accent --primary --quiet --obj-lo, null),
237 --fill: fn.color(--accent --primary --solid --bg, null),
238 --text: fn.color(--accent --primary --solid --obj, null),
239 --fill-text: fn.color(--accent --primary --solid --fg, null),
240 ),
241 ),
242), 'colors');
243
244//
245
246// @include iro.props-store((
247// --colors: (
248// --gray: fn.gray-palette(1%),
249// ),
250// ), 'palette-dark-hi2');
251
252@include iro.props-store((
253 --colors: (
254 --gray: fn.gray-palette(7%),
255 ),
256), 'palette-dark-hi');
257
258@include iro.props-store((
259 --colors: (
260 --gray: fn.gray-palette(12%),
261 ), 182 ),
262), 'palette-dark'); 183));
263 184
264@include iro.props-store(( 185@include iro.props-store((
265 --colors: ( 186 --colors: (
266 --gray: fn.gray-palette(17%), 187 --base: fn.palette(
267 ), 188 map.get(config.$theme-dark, --base),
268), 'palette-dark-lo'); 189 map.get(config.$theme-dark, --grays),
269
270@include iro.props-store((
271 --colors: (
272 --border: (
273 --stable: iro.props-get-static(--colors --gray --5, 'palette-dark-lo'),
274 --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-dark-lo'),
275 ), 190 ),
276
277 --blue: fn.color-palette(blend.lch(63% 50 279), -1),
278 --purple: fn.color-palette(blend.lch(63% 50 308), -1),
279 --red: fn.color-palette(blend.lch(63% 50 23), -1),
280 --green: fn.color-palette(blend.lch(78% 50 147), -1),
281 --yellow: fn.color-palette(blend.lch(88% 50 70), -1),
282
283 --accent: (
284 --primary: iro.props-ref('colors-dark', --colors --blue),
285 --error: iro.props-ref('colors-dark', --colors --red),
286 --success: iro.props-ref('colors-dark', --colors --green),
287 --warning: iro.props-ref('colors-dark', --colors --yellow),
288 --link-idle: iro.props-ref('colors-dark', --colors --blue),
289 --link-visited: iro.props-ref('colors-dark', --colors --purple),
290 ),
291 )
292), 'colors-dark');
293
294//
295
296@include iro.props-store((
297 --colors: (
298 --gray: fn.gray-palette(97%, true),
299 ), 191 ),
300), 'palette-media-light'); 192), 'dark');
301
302@include iro.props-store((
303 --colors: (
304 --border: (
305 --stable: iro.props-get-static(--colors --gray --5, 'palette-media-light'),
306 --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-media-light'),
307 ),
308 )
309), 'colors-media-light');
310 193
311// 194@each $name, $theme in config.$themes {
195 $props-name: if($name == config.$theme-default, iro.$props-default-tree, $name);
312 196
313@include iro.props-store(( 197 @each $color in 'blue' 'purple' 'red' 'green' 'yellow' {
314 --colors: ( 198 @include iro.props-store((
315 --gray: fn.gray-palette(12%, true), 199 --colors: (
316 ), 200 --#{$color}: fn.palette(
317), 'palette-media-dark'); 201 map.get($theme, --#{$color}),
202 map.get($theme, --colors),
203 map.get($theme, --base),
204 ),
205 ),
206 ), $props-name);
207 }
318 208
319@include iro.props-store(( 209 @include iro.props-store((
320 --colors: ( 210 --colors: (
321 --border: ( 211 --accent: iro.props-get-static(--colors map.get($theme, --accent), $props-name),
322 --stable: iro.props-get-static(--colors --gray --5, 'palette-media-dark'),
323 --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-media-dark'),
324 ), 212 ),
213 ), $props-name);
325 214
326 --blue: iro.props-get-static(--colors --blue, 'colors-dark'), 215 @each $color in 'bg-l2' 'bg-l1' 'bg-base' 'border-mute' 'border' 'border-strong' 'text-disabled' 'text-mute-more' 'text-mute' 'text' 'heading' {
327 --purple: iro.props-get-static(--colors --purple, 'colors-dark'), 216 @include iro.props-store((
328 --red: iro.props-get-static(--colors --red, 'colors-dark'), 217 --colors: (
329 --green: iro.props-get-static(--colors --green, 'colors-dark'), 218 --#{$color}: fn.color(--base map.get($theme, --#{$color})),
330 --yellow: iro.props-get-static(--colors --yellow, 'colors-dark'), 219 ),
220 ), $props-name);
221 }
222}
331 223
332 --accent: ( 224@each $color in 'blue' 'purple' 'red' 'green' 'yellow' {
333 --primary: iro.props-ref('colors-media', --colors --blue), 225 @include iro.props-store((
334 --error: iro.props-ref('colors-media', --colors --red), 226 --colors: (
335 --success: iro.props-ref('colors-media', --colors --green), 227 --#{$color}-static: iro.props-get-static(--colors --#{$color}),
336 --warning: iro.props-ref('colors-media', --colors --yellow),
337 --link-idle: iro.props-ref('colors-media', --colors --blue),
338 --link-visited: iro.props-ref('colors-media', --colors --purple),
339 ), 228 ),
340 ) 229 ));
341), 'colors-media');
342
343//
344
345@each $breakpoint in map-keys(media.$breakpoints) {
346 @include media.media('<=#{$breakpoint}') {
347 @include iro.props-store((
348 --colors: ()
349 ), $breakpoint);
350 }
351} 230}
diff --git a/src/_functions.scss b/src/_functions.scss
index 148a28c..aaa8ac9 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -1,46 +1,47 @@
1@use 'sass:color'; 1@use 'sass:color';
2@use 'sass:math'; 2@use 'sass:math';
3@use 'sass:map'; 3@use 'sass:map';
4@use 'sass:list';
4@use 'iro-sass/src/index' as iro; 5@use 'iro-sass/src/index' as iro;
5@use 'config'; 6@use 'config';
6@use '@oddbird/blend'; 7@use '@oddbird/blend';
7@use '@oddbird/blend/sass/convert' as blend-convert; 8@use '@oddbird/blend/sass/convert' as blend-convert;
8 9
9@function color($key, $tree: 'colors', $default: null, $global: false) { 10@function color($key, $tree: iro.$props-default-tree, $default: null, $global: false) {
10 @return iro.props-get(join(--colors, $key), $tree, $default, $global); 11 @return iro.props-get(list.join(--colors, $key), $tree, $default, $global);
11} 12}
12 13
13@function global-color($key, $tree: 'colors', $default: null, $global: true) { 14@function global-color($key, $tree: iro.$props-default-tree, $default: null, $global: true) {
14 @return color($key, $tree, $default, $global); 15 @return color($key, $tree, $default, $global);
15} 16}
16 17
17@function foreign-color($foreign-key, $key, $tree: 'colors', $default: null, $global: true) { 18@function foreign-color($foreign-key, $key, $tree: iro.$props-default-tree, $default: null, $global: true) {
18 @return iro.props-get(join($foreign-key --colors, $key), $tree, $default, $global); 19 @return iro.props-get(list.join($foreign-key --colors, $key), $tree, $default, $global);
19} 20}
20 21
21@function dim($key, $tree: 'dims', $default: null, $global: false) { 22@function dim($key, $tree: iro.$props-default-tree, $default: null, $global: false) {
22 @return iro.props-get(join(--dims, $key), $tree, $default, $global); 23 @return iro.props-get(list.join(--dims, $key), $tree, $default, $global);
23} 24}
24 25
25@function global-dim($key, $tree: 'dims', $default: null, $global: true) { 26@function global-dim($key, $tree: iro.$props-default-tree, $default: null, $global: true) {
26 @return dim($key, $tree, $default, $global); 27 @return dim($key, $tree, $default, $global);
27} 28}
28 29
29@function foreign-dim($foreign-key, $key, $tree: 'dims', $default: null, $global: true) { 30@function foreign-dim($foreign-key, $key, $tree: iro.$props-default-tree, $default: null, $global: true) {
30 @return iro.props-get(join($foreign-key --dims, $key), $tree, $default, $global); 31 @return iro.props-get(list.join($foreign-key --dims, $key), $tree, $default, $global);
31} 32}
32 33
33@function font-prop($data, $overrides, $key, $prop) { 34@function font-prop($data, $overrides, $key, $prop) {
34 @if (map-has-key($overrides, $prop)) { 35 @if (map.has-key($overrides, $prop)) {
35 @return map-get($overrides, $prop); 36 @return map.get($overrides, $prop);
36 } @else if (map-has-key($data, $prop)) { 37 } @else if (map.has-key($data, $prop)) {
37 @return global-dim(--font $key $prop); 38 @return global-dim(--font $key $prop);
38 } 39 }
39 @return null; 40 @return null;
40} 41}
41 42
42@function set-font($key, $overrides: ()) { 43@function set-font($key, $overrides: ()) {
43 $font: iro.props-get-static(join(--dims --font, $key), 'dims', $global: true); 44 $font: iro.props-get-static(list.join(--dims --font, $key), $global: true);
44 45
45 $map: ( 46 $map: (
46 font-family: font-prop($font, $overrides, $key, --family), 47 font-family: font-prop($font, $overrides, $key, --family),
@@ -57,47 +58,48 @@
57 @return $map; 58 @return $map;
58} 59}
59 60
60@function multi-contrast($base-color, $colors, $wanted-contrasts) { 61@function lum($color) {
61 $dir: if(lightness($base-color) >= 50%, -1, 1); 62 @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05;
62 $base-lum: nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($base-color))), 2) + .05; 63}
64
65@function multi-contrast($base-color, $colors, $wanted-contrasts, $reference-color: $base-color) {
66 $ref-lum: lum($reference-color);
63 67
64 $result: (); 68 $result: ();
65 $colors-len: length($colors); 69 $colors-len: list.length($colors);
66 $colors-idx: if($dir == -1, $colors-len, 1); 70 $colors-idx: 1;
67 $wanted-len: length($wanted-contrasts); 71 $wanted-len: list.length($wanted-contrasts);
68 $wanted-idx: 1; 72 $wanted-idx: 1;
69 73
70 @while $colors-idx >= 1 and $colors-idx <= $colors-len and $wanted-idx <= $wanted-len { 74 @while $colors-idx <= $colors-len and $wanted-idx <= $wanted-len {
71 $color: nth($colors, $colors-idx); 75 $color: list.nth($colors, $colors-idx);
72 $lum: nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05; 76 $lum: lum($color);
73 $contrast: math.div(math.max($base-lum, $lum), math.min($lum, $base-lum)); 77 $contrast: math.div(math.max($ref-lum, $lum), math.min($lum, $ref-lum));
74 78
75 @if $contrast != 1 { 79 @if $contrast != 1 {
76 $contrast: $dir * $contrast; 80 @if $lum <= $ref-lum {
77
78 @if $lum <= $base-lum {
79 $contrast: -1 * $contrast; 81 $contrast: -1 * $contrast;
80 } 82 }
81 } 83 }
82 84
83 $wanted: nth($wanted-contrasts, $wanted-idx); 85 $wanted: list.nth($wanted-contrasts, $wanted-idx);
84 $wanted-key: nth($wanted, 1); 86 $wanted-key: list.nth($wanted, 1);
85 $wanted-contrast: nth($wanted, 2); 87 $wanted-contrast: list.nth($wanted, 2);
86 88
87 @if $contrast >= $wanted-contrast { 89 @if $contrast >= $wanted-contrast {
88 $result: map.set($result, $wanted-key, $color); 90 $result: map.set($result, $wanted-key, $color);
89 $wanted-idx: $wanted-idx + 1; 91 $wanted-idx: $wanted-idx + 1;
90 } @else { 92 } @else {
91 $colors-idx: $colors-idx + $dir * 1; 93 $colors-idx: $colors-idx + 1;
92 } 94 }
93 } 95 }
94 96
95 $last-color: nth($colors, if($dir == -1, 1, $colors-len)); 97 $last-color: list.nth($colors, $colors-len);
96 98
97 @if $wanted-idx <= $wanted-len { 99 @if $wanted-idx <= $wanted-len {
98 @for $i from $wanted-idx through $wanted-len { 100 @for $i from $wanted-idx through $wanted-len {
99 $wanted: nth($wanted-contrasts, $i); 101 $wanted: list.nth($wanted-contrasts, $i);
100 $wanted-key: nth($wanted, 1); 102 $wanted-key: list.nth($wanted, 1);
101 $result: map.set($result, $wanted-key, $last-color); 103 $result: map.set($result, $wanted-key, $last-color);
102 } 104 }
103 } 105 }
@@ -105,53 +107,21 @@
105 @return $result; 107 @return $result;
106} 108}
107 109
108@function gray-to-alpha($lightness, $color) { 110@function palette($base-color, $contrasts, $reference-color: $base-color) {
109 @if $lightness >= 50% { 111 $palette: ();
110 @return rgba(#000, color.blackness($color));
111 } @else {
112 @return rgba(#fff, color.whiteness($color));
113 }
114}
115 112
116@function color-palette($base, $dir: 1) { 113 @if list.nth(list.nth($contrasts, 1), 2) > list.nth(list.nth($contrasts, list.length($contrasts)), 2) {
117 @return ( 114 $contrasts: iro.fn-list-reverse($contrasts);
118 --solid: (
119 --bg-hi: blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 7.5%),
120 --bg: $base,
121 --obj: blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -7.5%),
122 --obj-lo: blend.scale($base, $lightness: $dir * -30%, $chroma: $dir * -15%),
123 --fg: blend.contrast($base),
124 ),
125 --quiet: (
126 --bg: rgba($base, .1),
127 --obj: rgba($base, .2),
128 --obj-lo: rgba($base, .4),
129 --fg-hi: rgba($base, .7),
130 --fg: blend.scale($base, $lightness: $dir * -30%, $chroma: $dir * -15%),
131 --fg-lo: blend.scale($base, $lightness: $dir * -45%, $chroma: $dir * -22.5%),
132 ),
133 --selection: rgba($base, .99),
134 );
135}
136
137@function gray-palette($lightness, $alpha: false) {
138 $grays: ();
139
140 @for $i from 0 through 100 {
141 $grays: append($grays, blend.lch($i * 1% 0 0));
142 } 115 }
143 116
144 $colors: multi-contrast(blend.lch($lightness * 1% 0 0), $grays, config.$wanted-grays); 117 $i: -100%;
145 118
146 @each $key, $color in $colors { 119 @while $i <= 100% {
147 @if $alpha { 120 $palette: list.append($palette, blend.scale($base-color, $l: $i));
148 $colors: map.set($colors, $key, gray-to-alpha($lightness, $color)); 121 $i: $i + config.$palette-precision;
149 } @else {
150 $colors: map.set($colors, $key, $color);
151 }
152 } 122 }
153 123
154 @return $colors; 124 @return multi-contrast($base-color, $palette, $contrasts, $reference-color);
155} 125}
156 126
157@function px-to-em($size, $base: iro.$vars-root-size) { 127@function px-to-em($size, $base: iro.$vars-root-size) {
diff --git a/src/_mixins.scss b/src/_mixins.scss
index 4eeb1ad..dc62870 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -1,3 +1,4 @@
1@use 'sass:list';
1@use 'functions' as fn; 2@use 'functions' as fn;
2 3
3@mixin set-font($basis, $values: ()) { 4@mixin set-font($basis, $values: ()) {
@@ -12,13 +13,13 @@
12 13
13@mixin heading-strong($size) { 14@mixin heading-strong($size) {
14 color: fn.foreign-color(--heading, --strong); 15 color: fn.foreign-color(--heading, --strong);
15 font-size: fn.global-dim(join(--heading, $size)); 16 font-size: fn.global-dim(list.join(--heading, $size));
16} 17}
17 18
18@mixin heading-medium($size) { 19@mixin heading-medium($size) {
19 @include set-font(--standard, ( 20 @include set-font(--standard, (
20 --line-height: null, 21 --line-height: null,
21 --size: fn.global-dim(join(--heading, $size)), 22 --size: fn.global-dim(list.join(--heading, $size)),
22 --weight: bold, 23 --weight: bold,
23 --transform: uppercase, 24 --transform: uppercase,
24 --spacing: 1px 25 --spacing: 1px
@@ -31,7 +32,7 @@
31@mixin heading-faint($size) { 32@mixin heading-faint($size) {
32 @include set-font(--standard, ( 33 @include set-font(--standard, (
33 --line-height: null, 34 --line-height: null,
34 --size: fn.global-dim(join(--heading, $size)), 35 --size: fn.global-dim(list.join(--heading, $size)),
35 --weight: 500, 36 --weight: 500,
36 --transform: uppercase, 37 --transform: uppercase,
37 --spacing: 1px 38 --spacing: 1px
diff --git a/src/_objects.scss b/src/_objects.scss
index 578de0c..aaace92 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -1,25 +1,26 @@
1@use 'objects/icon'; 1// @use 'objects/icon';
2@use 'objects/emoji'; 2// @use 'objects/emoji';
3@use 'objects/heading'; 3@use 'objects/heading';
4@use 'objects/divider'; 4@use 'objects/divider';
5@use 'objects/badge'; 5// @use 'objects/badge';
6@use 'objects/button'; 6// @use 'objects/button';
7@use 'objects/text-field'; 7// @use 'objects/text-field';
8@use 'objects/field-label'; 8// @use 'objects/field-label';
9@use 'objects/radio'; 9// @use 'objects/radio';
10@use 'objects/checkbox'; 10// @use 'objects/checkbox';
11@use 'objects/switch'; 11// @use 'objects/switch';
12@use 'objects/action-button'; 12// @use 'objects/action-button';
13@use 'objects/overflow-button'; 13// @use 'objects/overflow-button';
14@use 'objects/status-indicator'; 14// @use 'objects/status-indicator';
15@use 'objects/avatar'; 15// @use 'objects/avatar';
16@use 'objects/message'; 16// @use 'objects/message';
17@use 'objects/action-menu'; 17// @use 'objects/action-menu';
18@use 'objects/menu'; 18// @use 'objects/menu';
19@use 'objects/icon-nav'; 19// @use 'objects/icon-nav';
20@use 'objects/backdrop'; 20// @use 'objects/backdrop';
21@use 'objects/dialog'; 21// @use 'objects/dialog';
22@use 'objects/lightbox'; 22// @use 'objects/lightbox';
23@use 'objects/list-group'; 23// @use 'objects/list-group';
24@use 'objects/table'; 24// @use 'objects/table';
25@use 'objects/alert'; 25// @use 'objects/alert';
26@use 'objects/palette';
diff --git a/src/_scopes.scss b/src/_scopes.scss
index a3aeb6c..eb28177 100644
--- a/src/_scopes.scss
+++ b/src/_scopes.scss
@@ -1,6 +1,6 @@
1@use 'scopes/links'; 1@use 'scopes/links';
2@use 'scopes/code'; 2// @use 'scopes/code';
3@use 'scopes/blockquotes'; 3// @use 'scopes/blockquotes';
4@use 'scopes/lists'; 4// @use 'scopes/lists';
5@use 'scopes/headings'; 5@use 'scopes/headings';
6@use 'scopes/tables'; 6// @use 'scopes/tables';
diff --git a/src/_themes.scss b/src/_themes.scss
new file mode 100644
index 0000000..72562c0
--- /dev/null
+++ b/src/_themes.scss
@@ -0,0 +1,14 @@
1@use 'iro-sass/src/index' as iro;
2@use 'functions' as fn;
3
4@include iro.bem-theme('base') {
5 background-color: fn.global-color(--bg-base);
6}
7
8@include iro.bem-theme('l1') {
9 background-color: fn.global-color(--bg-l1);
10}
11
12@include iro.bem-theme('l2') {
13 background-color: fn.global-color(--bg-l2);
14}
diff --git a/src/_utils.scss b/src/_utils.scss
index d11a42c..e551136 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -1,13 +1,16 @@
1@use 'sass:map';
1@use 'iro-sass/src/index' as iro; 2@use 'iro-sass/src/index' as iro;
2@use 'functions' as fn; 3@use 'functions' as fn;
3@use 'include-media/dist/include-media' as media; 4@use 'include-media/dist/include-media' as media;
4 5
5$dirs: ( 6$dirs: (
6 '': '', 7 '': '',
7 't': '-top', 8 'bs': '-block-start',
8 'r': '-right', 9 'be': '-block-end',
9 'b': '-bottom', 10 'b': '-block',
10 'l': '-left', 11 'is': '-inline-start',
12 'ie': '-inline-end',
13 'i': '-inline',
11); 14);
12 15
13@include iro.bem-utility('d-block') { 16@include iro.bem-utility('d-block') {
@@ -29,7 +32,7 @@ $dirs: (
29@include iro.bem-utility('d-none') { 32@include iro.bem-utility('d-none') {
30 display: none; 33 display: none;
31 34
32 @each $breakpoint in map-keys(media.$breakpoints) { 35 @each $breakpoint in map.keys(media.$breakpoints) {
33 @include media.media('<=#{$breakpoint}') { 36 @include media.media('<=#{$breakpoint}') {
34 @include iro.bem-suffix('#{$breakpoint}-lo') { 37 @include iro.bem-suffix('#{$breakpoint}-lo') {
35 display: none; 38 display: none;
@@ -62,12 +65,12 @@ $dirs: (
62 } 65 }
63} 66}
64 67
65@include iro.bem-utility('ta-left') { 68@include iro.bem-utility('ta-start') {
66 text-align: left; 69 text-align: start;
67} 70}
68 71
69@include iro.bem-utility('ta-right') { 72@include iro.bem-utility('ta-end') {
70 text-align: right; 73 text-align: end;
71} 74}
72 75
73@include iro.bem-utility('ta-center') { 76@include iro.bem-utility('ta-center') {
@@ -102,28 +105,23 @@ $dirs: (
102 justify-content: flex-end; 105 justify-content: flex-end;
103} 106}
104 107
105@include iro.bem-utility('c-strong') { 108@include iro.bem-utility('c-heading') {
106 color: fn.color(--fg-lo); 109 color: fn.color(--heading);
107} 110}
108 111
109@include iro.bem-utility('c-fg') { 112@include iro.bem-utility('c-text') {
110 color: fn.color(--fg); 113 color: fn.color(--text);
111} 114}
112 115
113@include iro.bem-utility('c-muted') { 116@include iro.bem-utility('c-mute') {
114 color: fn.color(--fg-hi); 117 color: fn.color(--text-mute);
115}
116
117@include iro.bem-utility('c-muted-hi') {
118 color: fn.color(--fg-hi2);
119} 118}
120 119
121@include iro.bem-utility('mt-neutralize') { 120@include iro.bem-utility('mt-neutralize') {
122 &::before { 121 &::before {
123 content: ''; 122 content: '';
124 display: block; 123 display: block;
125 margin-top: -100em; 124 margin-block: -100em 100em;
126 margin-bottom: 100em;
127 } 125 }
128} 126}
129 127
@@ -170,11 +168,6 @@ $dirs: (
170 top: 0; 168 top: 0;
171} 169}
172 170
173@include iro.bem-utility('themed') {
174 background-color: fn.global-color(--bg);
175 color: fn.global-color(--fg);
176}
177
178@each $dir, $suffix in $dirs { 171@each $dir, $suffix in $dirs {
179 @include iro.bem-utility('m#{$dir}-auto') { 172 @include iro.bem-utility('m#{$dir}-auto') {
180 margin#{$suffix}: auto; 173 margin#{$suffix}: auto;
@@ -199,6 +192,6 @@ $dirs: (
199 } 192 }
200 193
201 @include iro.bem-utility('b#{$dir}-1') { 194 @include iro.bem-utility('b#{$dir}-1') {
202 border#{$suffix}: 1px solid fn.global-color(--border --stable); 195 border#{$suffix}: 1px solid fn.global-color(--border);
203 } 196 }
204} 197}
diff --git a/src/index.scss b/src/index.scss
index 9e6c838..50927e2 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -4,6 +4,7 @@
4@use 'layouts'; 4@use 'layouts';
5@use 'objects'; 5@use 'objects';
6@use 'scopes'; 6@use 'scopes';
7@use 'themes';
7@use 'utils'; 8@use 'utils';
8 9
9@use 'apply-vars'; 10@use 'apply-vars';
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss
index 5f2cbe7..a70d27a 100644
--- a/src/layouts/_button-group.scss
+++ b/src/layouts/_button-group.scss
@@ -6,7 +6,7 @@
6 --dims: ( 6 --dims: (
7 --spacing: fn.global-dim(--size --150), 7 --spacing: fn.global-dim(--size --150),
8 ), 8 ),
9 ), 'dims'); 9 ));
10 10
11 @include iro.bem-layout(iro.props-namespace()) { 11 @include iro.bem-layout(iro.props-namespace()) {
12 display: flex; 12 display: flex;
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index b567119..b28eea2 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -10,7 +10,7 @@
10 --pad-x: fn.global-dim(--size --400), 10 --pad-x: fn.global-dim(--size --400),
11 --pad-y: fn.global-dim(--size --800), 11 --pad-y: fn.global-dim(--size --800),
12 ) 12 )
13 ), 'dims'); 13 ));
14 14
15 @include iro.props-store(( 15 @include iro.props-store((
16 --dims: ( 16 --dims: (
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index 901f613..9c741ec 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -1,7 +1,7 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 2@use '../functions' as fn;
3 3
4@use '../objects/field-label'; 4// @use '../objects/field-label';
5 5
6@include iro.props-namespace('form') { 6@include iro.props-namespace('form') {
7 @include iro.props-store(( 7 @include iro.props-store((
@@ -10,7 +10,7 @@
10 --label-spacing-x: fn.global-dim(--size --325), 10 --label-spacing-x: fn.global-dim(--size --325),
11 --hint-font-size: fn.global-dim(--font-size --75), 11 --hint-font-size: fn.global-dim(--font-size --75),
12 ), 12 ),
13 ), 'dims'); 13 ));
14 14
15 @include iro.bem-layout(iro.props-namespace()) { 15 @include iro.bem-layout(iro.props-namespace()) {
16 display: flex; 16 display: flex;
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss
index d276d33..fa90975 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.scss
@@ -22,7 +22,7 @@
22 --pad-y: fn.global-dim(--size --225), 22 --pad-y: fn.global-dim(--size --225),
23 ) 23 )
24 ) 24 )
25 ), 'dims'); 25 ));
26 26
27 @include iro.bem-layout(iro.props-namespace()) { 27 @include iro.bem-layout(iro.props-namespace()) {
28 display: flex; 28 display: flex;
diff --git a/src/layouts/_message-group.scss b/src/layouts/_message-group.scss
index 125c215..f977b61 100644
--- a/src/layouts/_message-group.scss
+++ b/src/layouts/_message-group.scss
@@ -1,7 +1,7 @@
1@use 'iro-sass/src/index' as iro; 1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 2@use '../functions' as fn;
3 3
4@use '../objects/message'; 4// @use '../objects/message';
5 5
6@include iro.props-namespace('message-group') { 6@include iro.props-namespace('message-group') {
7 @include iro.props-store(( 7 @include iro.props-store((
@@ -15,7 +15,7 @@
15 --spacing-y: fn.global-dim(--size --50), 15 --spacing-y: fn.global-dim(--size --50),
16 ) 16 )
17 ) 17 )
18 ), 'dims'); 18 ));
19 19
20 @include iro.bem-layout(iro.props-namespace()) { 20 @include iro.bem-layout(iro.props-namespace()) {
21 display: grid; 21 display: grid;
@@ -43,7 +43,7 @@
43 position: absolute; 43 position: absolute;
44 top: 0; 44 top: 0;
45 left: calc(-1 * fn.dim(--arrow-size)); 45 left: calc(-1 * fn.dim(--arrow-size));
46 border: fn.dim(--arrow-size) solid fn.global-color(--bg); 46 border: fn.dim(--arrow-size) solid fn.global-color(--bg-l2);
47 border-bottom-color: transparent; 47 border-bottom-color: transparent;
48 border-left-color: transparent; 48 border-left-color: transparent;
49 } 49 }
@@ -59,7 +59,7 @@
59 right: calc(-1 * fn.dim(--arrow-size)); 59 right: calc(-1 * fn.dim(--arrow-size));
60 left: auto; 60 left: auto;
61 border-right-color: transparent; 61 border-right-color: transparent;
62 border-left-color: fn.global-color(--bg); 62 border-left-color: fn.global-color(--bg-l2);
63 } 63 }
64 } 64 }
65 } 65 }
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss
index d3af570..8643bbf 100644
--- a/src/layouts/_overflow.scss
+++ b/src/layouts/_overflow.scss
@@ -4,6 +4,6 @@
4@include iro.props-namespace('overflow') { 4@include iro.props-namespace('overflow') {
5 @include iro.bem-layout(iro.props-namespace()) { 5 @include iro.bem-layout(iro.props-namespace()) {
6 overflow: auto; 6 overflow: auto;
7 scrollbar-color: fn.global-color(--obj-lo) transparent; 7 scrollbar-color: fn.global-color(--text-disabled) transparent;
8 } 8 }
9} 9}
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 655080f..465bbcf 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -4,7 +4,7 @@
4@include iro.props-namespace('divider') { 4@include iro.props-namespace('divider') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --margin-y: fn.global-dim(--size --85), 7 --margin-b: fn.global-dim(--size --85),
8 8
9 --strong: ( 9 --strong: (
10 --border: fn.global-dim(--border --thick), 10 --border: fn.global-dim(--border --thick),
@@ -19,52 +19,48 @@
19 --label-font-size: fn.global-dim(--font-size --50), 19 --label-font-size: fn.global-dim(--font-size --50),
20 ), 20 ),
21 ), 21 ),
22 ), 'dims');
23
24 @include iro.props-store((
25 --colors: ( 22 --colors: (
26 --strong: ( 23 --strong: (
27 --bg: fn.global-color(--fg), 24 --bg: fn.global-color(--text),
28 --label: fn.global-color(--fg), 25 --label: fn.global-color(--text),
29 ), 26 ),
30 --medium: ( 27 --medium: (
31 --bg: fn.global-color(--obj), 28 --bg: fn.global-color(--border),
32 --label: fn.global-color(--fg-hi), 29 --label: fn.global-color(--text-mute),
33 ), 30 ),
34 --faint: ( 31 --faint: (
35 --bg: fn.global-color(--obj), 32 --bg: fn.global-color(--border),
36 --label: fn.global-color(--fg-hi2), 33 --label: fn.global-color(--text-mute-more),
37 ), 34 ),
38 --blue: ( 35 --blue: (
39 --bg: fn.global-color(--blue --solid --bg), 36 --bg: fn.global-color(--blue --700),
40 --label: fn.global-color(--blue --solid --obj), 37 --label: fn.global-color(--blue --1000),
41 ), 38 ),
42 --purple: ( 39 --purple: (
43 --bg: fn.global-color(--purple --solid --bg), 40 --bg: fn.global-color(--purple --700),
44 --label: fn.global-color(--purple --solid --obj), 41 --label: fn.global-color(--purple --1000),
45 ), 42 ),
46 --red: ( 43 --red: (
47 --bg: fn.global-color(--red --solid --bg), 44 --bg: fn.global-color(--red --700),
48 --label: fn.global-color(--red --solid --obj), 45 --label: fn.global-color(--red --1000),
49 ), 46 ),
50 --green: ( 47 --green: (
51 --bg: fn.global-color(--green --solid --bg), 48 --bg: fn.global-color(--green --700),
52 --label: fn.global-color(--green --solid --obj), 49 --label: fn.global-color(--green --1000),
53 ), 50 ),
54 --yellow: ( 51 --yellow: (
55 --bg: fn.global-color(--yellow --solid --bg), 52 --bg: fn.global-color(--yellow --700),
56 --label: fn.global-color(--yellow --solid --obj), 53 --label: fn.global-color(--yellow --1000),
57 ), 54 ),
58 ), 55 ),
59 ), 'colors'); 56 ));
60 57
61 @include iro.bem-object(iro.props-namespace()) { 58 @include iro.bem-object(iro.props-namespace()) {
62 display: flex; 59 display: flex;
63 flex-direction: row; 60 flex-direction: row;
64 align-items: center; 61 align-items: center;
65 height: 1em; 62 height: 1em;
66 margin-top: fn.dim(--margin-y); 63 margin-block: fn.dim(--margin-b);
67 margin-bottom: fn.dim(--margin-y);
68 color: fn.color(--strong --label); 64 color: fn.color(--strong --label);
69 font-size: fn.dim(--strong --label-font-size); 65 font-size: fn.dim(--strong --label-font-size);
70 font-weight: 700; 66 font-weight: 700;
@@ -93,8 +89,7 @@
93 align-self: stretch; 89 align-self: stretch;
94 width: 1px; 90 width: 1px;
95 height: auto; 91 height: auto;
96 margin-top: 0; 92 margin-block: 0;
97 margin-bottom: 0;
98 background-color: fn.color(--faint --bg); 93 background-color: fn.color(--faint --bg);
99 94
100 &::before, 95 &::before,
@@ -129,12 +124,12 @@
129 124
130 @include iro.bem-modifier('labelled') { 125 @include iro.bem-modifier('labelled') {
131 &::before { 126 &::before {
132 margin-right: 1em; 127 margin-inline-end: 1em;
133 } 128 }
134 129
135 &::after { 130 &::after {
136 display: block; 131 display: block;
137 margin-left: 1em; 132 margin-inline-start: 1em;
138 } 133 }
139 } 134 }
140 135
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 5d84e61..6dcf7e9 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -8,37 +8,34 @@
8 @include iro.props-store(( 8 @include iro.props-store((
9 --dims: ( 9 --dims: (
10 --offset: -.02em, 10 --offset: -.02em,
11 ) 11 ),
12 ), 'dims');
13
14 @include iro.props-store((
15 --colors: ( 12 --colors: (
16 --light: fn.global-color(--fg-hi), 13 --light: fn.global-color(--text-mute),
17 --strong: fn.global-color(--fg-lo), 14 --strong: fn.global-color(--heading),
18 --bg: fn.global-color(--bg-hi2), 15 --bg: fn.global-color(--bg-l2),
19 ), 16 ),
20 ), 'colors'); 17 ));
21 18
22 @include iro.bem-object(iro.props-namespace()) { 19 @include iro.bem-object(iro.props-namespace()) {
23 @include mx.set-font(--headline); 20 @include mx.set-font(--headline);
24 21
25 display: block; 22 display: block;
26 margin-top: fn.global-dim(--heading --margin-top); 23 margin-block-start: fn.global-dim(--heading --margin-bs);
27 transform: translateX(fn.dim(--offset)); 24 transform: translateX(fn.dim(--offset));
28 letter-spacing: normal; 25 letter-spacing: normal;
29 text-transform: none; 26 text-transform: none;
30 27
31 & + & { 28 & + & {
32 margin-top: fn.global-dim(--heading --margin-top-sibling); 29 margin-block-start: fn.global-dim(--heading --margin-bs-sibling);
33 } 30 }
34 31
35 @include iro.bem-elem('highlight') { 32 @include iro.bem-elem('highlight') {
36 background-image: linear-gradient( 33 background-image: linear-gradient(
37 to top, 34 to top,
38 transparent .05em, 35 transparent .05em,
39 fn.color(--bg) .05em, 36 fn.color(--bg) .05em,
40 fn.color(--bg) .5em, 37 fn.color(--bg) .5em,
41 transparent .5em 38 transparent .5em
42 ); 39 );
43 } 40 }
44 41
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
new file mode 100644
index 0000000..a86c026
--- /dev/null
+++ b/src/objects/_palette.scss
@@ -0,0 +1,38 @@
1@use 'sass:map';
2@use 'sass:list';
3@use 'iro-sass/src/index' as iro;
4@use '../functions' as fn;
5@use '../config';
6
7@include iro.props-namespace('palette') {
8 @include iro.bem-object(iro.props-namespace()) {
9 display: flex;
10 height: 3em;
11
12 @include iro.bem-elem('item') {
13 flex: 1 1 auto;
14
15 @for $i from 1 through list.length(map.get(config.$theme-light, --grays)) {
16 $key: list.nth(map.keys(map.get(config.$theme-light, --grays)), $i);
17
18 &:nth-child(#{$i}) {
19 background-color: fn.global-color(--base $key);
20 }
21 }
22 }
23
24 @each $palette in 'blue' 'purple' 'red' 'green' 'yellow' {
25 @include iro.bem-modifier($palette) {
26 @include iro.bem-elem('item') {
27 @for $i from 1 through list.length(map.get(config.$theme-light, --colors)) {
28 $key: list.nth(map.keys(map.get(config.$theme-light, --colors)), $i);
29
30 &:nth-child(#{$i}) {
31 background-color: fn.global-color(--#{$palette} $key);
32 }
33 }
34 }
35 }
36 }
37 }
38}
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 2e68952..115b199 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -3,42 +3,61 @@
3 3
4@include iro.props-namespace('links') { 4@include iro.props-namespace('links') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: (
7 --underline: fn.global-dim(--border --thin),
8
9 --hover: (
10 --underline: fn.global-dim(--border --medium),
11 )
12 ),
6 --colors: ( 13 --colors: (
7 --underline: fn.global-color(--fg-hi2), 14 --underline: fn.global-color(--text-mute-more),
8 15
9 --idle: fn.global-color(--accent --link-idle --quiet --fg), 16 --idle: (
10 --visited: fn.global-color(--accent --link-visited --quiet --fg), 17 --text: fn.global-color(--accent --1000),
11 --idle-underline: fn.global-color(--accent --link-idle --quiet --fg-hi), 18 --underline: fn.global-color(--accent --700),
12 --visited-underline: fn.global-color(--accent --link-visited --quiet --fg-hi),
13 19
14 --key-focus: ( 20 --hover: (
15 --border: fn.global-color(--focus --fill), 21 --text: fn.global-color(--accent --1200),
16 --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --quiet --obj-lo), 22 ),
17 ), 23 ),
18 )
19 ), 'colors');
20 24
21 @include iro.props-store(( 25 --visited: (
22 --colors: ( 26 --text: fn.global-color(--purple --1000),
23 --underline: fn.global-color(--fg-hi), 27 --underline: fn.global-color(--purple --700),
28
29 --hover: (
30 --text: fn.global-color(--purple --1200),
31 ),
32 ),
33
34 --focus: (
35 --bg: fn.global-color(--yellow-static --400),
36 --text: #000,
37 )
24 ) 38 )
25 ), 'colors-dark'); 39 ));
26 40
27 @include iro.bem-scope(iro.props-namespace()) { 41 @include iro.bem-scope(iro.props-namespace()) {
28 :link, 42 :link,
29 :visited { 43 :visited {
30 border-radius: .5px; 44 border-radius: .5px;
31 color: currentColor; 45 color: currentColor;
32 text-decoration: underline; 46 text-decoration: underline;
33 text-decoration-color: fn.color(--underline); 47 text-decoration-color: fn.color(--underline);
48 text-decoration-thickness: fn.dim(--underline);
34 49
35 &:hover { 50 &:hover {
36 text-decoration: underline; 51 text-decoration: underline;
52 text-decoration-thickness: fn.dim(--hover --underline);
37 } 53 }
38 54
39 @include iro.bem-at-theme('keyboard') { 55 @include iro.bem-at-theme('keyboard') {
40 &:focus { 56 &:focus {
41 box-shadow: 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow); 57 background-color: fn.color(--focus --bg);
58 color: fn.color(--focus --text);
59 text-decoration: none;
60 border-block-end: fn.dim(--hover --underline) solid currentColor;
42 } 61 }
43 } 62 }
44 } 63 }
@@ -52,13 +71,21 @@
52 71
53 @include iro.bem-modifier('colored') { 72 @include iro.bem-modifier('colored') {
54 :link { 73 :link {
55 color: fn.color(--idle); 74 color: fn.color(--idle --text);
56 text-decoration-color: fn.color(--idle-underline); 75 text-decoration-color: fn.color(--idle --underline);
76
77 &:hover {
78 color: fn.color(--idle --hover --text);
79 }
57 } 80 }
58 81
59 :visited { 82 :visited {
60 color: fn.color(--visited); 83 color: fn.color(--visited --text);
61 text-decoration-color: fn.color(--visited-underline); 84 text-decoration-color: fn.color(--visited --underline);
85
86 &:hover {
87 color: fn.color(--visited --hover --text);
88 }
62 } 89 }
63 } 90 }
64 } 91 }
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 04:40:17 +0000