summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-22 19:30:00 +0200
committerVolpeon <git@volpeon.ink>2024-06-22 19:30:00 +0200
commit6b0fcac695aa7a5517f6f53cec50da493acc4582 (patch)
tree05b1ec4bfd484c75f1ee82f06f674aba69ad1408
parentWIP: Refactoring (diff)
downloadiro-design-6b0fcac695aa7a5517f6f53cec50da493acc4582.tar.gz
iro-design-6b0fcac695aa7a5517f6f53cec50da493acc4582.tar.bz2
iro-design-6b0fcac695aa7a5517f6f53cec50da493acc4582.zip
Update
Diffstat
-rw-r--r--.stylelintrc.json2
-rw-r--r--src/.old/objects/_badge.scss173
-rw-r--r--src/.old/objects/_button.scss179
-rw-r--r--src/.old/scopes/_blockquotes.scss35
-rw-r--r--src/_base.scss9
-rw-r--r--src/_config.scss110
-rw-r--r--src/_declare-vars.scss29
-rw-r--r--src/_functions.scss16
-rw-r--r--src/_objects.scss8
-rw-r--r--src/_scopes.scss4
-rw-r--r--src/_utils.scss24
-rw-r--r--src/layouts/_container.scss6
-rw-r--r--src/layouts/_media.scss6
-rw-r--r--src/layouts/_message-group.scss14
-rw-r--r--src/objects/_badge.scss194
-rw-r--r--src/objects/_button.scss173
-rw-r--r--src/objects/_divider.scss16
-rw-r--r--src/objects/_emoji.scss (renamed from src/.old/objects/_emoji.scss)21
-rw-r--r--src/objects/_icon.scss (renamed from src/.old/objects/_icon.scss)6
-rw-r--r--src/objects/_palette.scss22
-rw-r--r--src/scopes/_blockquotes.scss34
-rw-r--r--src/scopes/_code.scss2
-rw-r--r--src/scopes/_links.scss27
-rw-r--r--src/scopes/_lists.scss (renamed from src/.old/scopes/_lists.scss)33
-rw-r--r--src_demo/components/_sidebar.scss6
-rwxr-xr-xstatic/drgn.pngbin22312 -> 17913 bytes
-rw-r--r--static/script.js31
-rw-r--r--tpl/objects/badge.pug1
-rw-r--r--tpl/objects/palette.pug3
-rw-r--r--tpl/views/badge.pug88
-rw-r--r--tpl/views/button.pug55
-rw-r--r--tpl/views/palette.pug3
32 files changed, 710 insertions, 620 deletions
diff --git a/.stylelintrc.json b/.stylelintrc.json
index 0ed9389..622a3c3 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -4,7 +4,7 @@
4 "stylelint-order" 4 "stylelint-order"
5 ], 5 ],
6 "rules": { 6 "rules": {
7 "max-nesting-depth": 4, 7 "max-nesting-depth": 7,
8 "selector-class-pattern": [ 8 "selector-class-pattern": [
9 "^[closut](-[a-z0-9]+)+(__[a-z0-9]+(-[a-z0-9]+)*)*(--[a-z0-9]+(-[a-z0-9]+)*)*(\\@[a-z0-9]+(-[a-z0-9]+)*)?$", 9 "^[closut](-[a-z0-9]+)+(__[a-z0-9]+(-[a-z0-9]+)*)*(--[a-z0-9]+(-[a-z0-9]+)*)*(\\@[a-z0-9]+(-[a-z0-9]+)*)?$",
10 { 10 {
diff --git a/src/.old/objects/_badge.scss b/src/.old/objects/_badge.scss
deleted file mode 100644
index 0f73382..0000000
--- a/src/.old/objects/_badge.scss
+++ /dev/null
@@ -1,173 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('badge') {
5 @include iro.props-store((
6 --dims: (
7 --pad-x: fn.px-to-em(4px),
8 --pad-y: 0,
9 --rounding: 3px,
10 --fixed-100: 1em,
11 --fixed-200: 1.5em,
12
13 --200: (
14 --pad-x: fn.px-to-em(6px),
15 --pad-y: fn.px-to-em(2px),
16 ),
17 --300: (
18 --pad-x: fn.px-to-em(10px),
19 --pad-y: fn.px-to-em(6px),
20 ),
21
22 --pill: (
23 --pad-x: fn.px-to-em(9px),
24
25 --200: (
26 --pad-x: fn.px-to-em(10px),
27 ),
28 --300: (
29 --pad-x: fn.px-to-em(16px),
30 ),
31 ),
32 ),
33 ), 'dims');
34
35 @include iro.props-store((
36 --colors: (
37 --bg: fn.global-color(--obj-hi),
38 --label: fn.global-color(--fg-lo),
39 --hover: (
40 --bg: fn.global-color(--obj),
41 ),
42 --active: (
43 --bg: fn.global-color(--obj-lo),
44 ),
45 --key-focus: (
46 --border: fn.global-color(--focus --fill),
47 --shadow: fn.global-color(--focus --shadow),
48 ),
49
50 --primary: (
51 --bg: fn.global-color(--fg-lo),
52 --label: fn.global-color(--bg),
53 --hover: (
54 --bg: fn.global-color(--fg),
55 ),
56 --active: (
57 --bg: fn.global-color(--fg),
58 ),
59 ),
60
61 --accent: (
62 --bg: fn.global-color(--accent --primary --solid --bg),
63 --label: fn.global-color(--accent --primary --solid --fg),
64 --hover: (
65 --bg: fn.global-color(--accent --primary --solid --obj),
66 ),
67 --active: (
68 --bg: fn.global-color(--accent --primary --solid --obj-lo),
69 ),
70 ),
71
72 --accent-quiet: (
73 --bg: fn.global-color(--accent --primary --quiet --bg),
74 --label: fn.global-color(--accent --primary --quiet --fg),
75 --hover: (
76 --bg: fn.global-color(--accent --primary --quiet --obj),
77 ),
78 --active: (
79 --bg: fn.global-color(--accent --primary --quiet --obj-lo),
80 ),
81 )
82 ),
83 ), 'colors');
84
85 @include iro.bem-object(iro.props-namespace()) {
86 display: inline-block;
87 margin-top: -.5em;
88 margin-bottom: -.5em;
89 padding: fn.dim(--pad-y) fn.dim(--pad-x);
90 border-radius: fn.dim(--rounding);
91 background-color: fn.color(--bg);
92 color: fn.color(--label);
93 line-height: fn.global-dim(--font --standard --line-height);
94 text-align: center;
95 text-decoration: none;
96
97 &:link,
98 &:visited,
99 &:enabled {
100 &:hover {
101 background-color: fn.color(--hover --bg);
102 }
103
104 &:active {
105 background-color: fn.color(--active --bg);
106 }
107 }
108
109 @each $variant in 'primary' 'accent' 'accent-quiet' {
110 @include iro.bem-modifier($variant) {
111 background-color: fn.color(--#{$variant} --bg);
112 color: fn.color(--#{$variant} --label);
113
114 &:link,
115 &:visited,
116 &:enabled {
117 &:hover {
118 background-color: fn.color(--#{$variant} --hover --bg);
119 }
120
121 &:active {
122 background-color: fn.color(--#{$variant} --active --bg);
123 }
124 }
125 }
126 }
127
128 &:link,
129 &:visited,
130 &:enabled {
131 @include iro.bem-at-theme('keyboard') {
132 &:focus {
133 background-color: transparent;
134 box-shadow: inset 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
135 color: currentColor;
136 }
137 }
138 }
139
140 @include iro.bem-modifier('pill') {
141 padding-right: fn.dim(--pill --pad-x);
142 padding-left: fn.dim(--pill --pad-x);
143 border-radius: 10em;
144 }
145
146 @each $size in '200' '300' {
147 @include iro.bem-modifier($size) {
148 padding: fn.dim(--#{$size} --pad-y) fn.dim(--#{$size} --pad-x);
149
150 @include iro.bem-modifier('pill') {
151 padding-right: fn.dim(--pill --#{$size} --pad-x);
152 padding-left: fn.dim(--pill --#{$size} --pad-x);
153 }
154 }
155 }
156
157 @include iro.bem-modifier('fixed-100') {
158 width: fn.dim(--fixed-100);
159 }
160
161 @include iro.bem-modifier('fixed-200') {
162 width: fn.dim(--fixed-200);
163 }
164
165 @include iro.bem-modifier('sm') {
166 font-size: fn.global-dim(--font-size --75);
167 }
168
169 @include iro.bem-modifier('xs') {
170 font-size: fn.global-dim(--font-size --50);
171 }
172 }
173}
diff --git a/src/.old/objects/_button.scss b/src/.old/objects/_button.scss
deleted file mode 100644
index 7cc24fa..0000000
--- a/src/.old/objects/_button.scss
+++ /dev/null
@@ -1,179 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@mixin button-variant($variant) {
5 &:link,
6 &:visited,
7 &:enabled {
8 border-color: fn.color(--#{$variant} --bg);
9 background-color: fn.color(--#{$variant} --bg);
10 box-shadow: fn.color(--#{$variant} --shadow);
11 color: fn.color(--#{$variant} --label);
12 }
13
14 @include iro.bem-modifier('outline') {
15 &:link,
16 &:visited,
17 &:enabled {
18 background-color: transparent;
19 box-shadow: none;
20 color: fn.color(--#{$variant} --outline-label);
21 }
22 }
23
24 &:link,
25 &:visited,
26 &:enabled {
27 &:hover {
28 border-color: fn.color(--#{$variant} --hover --bg);
29 background-color: fn.color(--#{$variant} --hover --bg);
30 box-shadow: fn.color(--#{$variant} --hover --shadow);
31 color: fn.color(--#{$variant} --hover --label);
32 }
33
34 &:active {
35 border-color: fn.color(--#{$variant} --active --bg);
36 background-color: fn.color(--#{$variant} --active --bg);
37 box-shadow: fn.color(--#{$variant} --active --shadow);
38 color: fn.color(--#{$variant} --active --label);
39 }
40 }
41}
42
43@include iro.props-namespace('button') {
44 @include iro.props-store((
45 --dims: (
46 --line-height: 1.4,
47 --pad-x: fn.global-dim(--size --225),
48 --pad-y: fn.global-dim(--size --65),
49 --rounding: 10em,
50
51 --lg: (
52 --pad-x: fn.global-dim(--size --300),
53 --pad-y: fn.global-dim(--size --100),
54 ),
55 ),
56 ), 'dims');
57
58 @include iro.props-store((
59 --colors: (
60 --any: (
61 --disabled: (
62 --bg: fn.global-color(--obj-hi),
63 --label: fn.global-color(--fg-hi3),
64 --shadow: 0 0 0 0 transparent,
65 ),
66 --key-focus: (
67 --bg: transparent,
68 --label: fn.global-color(--focus --text),
69 --border: fn.global-color(--focus --fill),
70 --shadow: fn.global-color(--focus --shadow),
71 ),
72 ),
73 --accent: (
74 --bg: fn.global-color(--accent --primary --solid --bg),
75 --label: fn.global-color(--accent --primary --solid --fg),
76 --outline-label: fn.global-color(--accent --primary --solid --obj),
77 --shadow: 0 0 0 0 transparent,
78
79 --hover: (
80 --bg: fn.global-color(--accent --primary --solid --obj),
81 --label: fn.global-color(--accent --primary --solid --fg),
82 --shadow: 0 0 0 0 transparent,
83 ),
84 --active: (
85 --bg: fn.global-color(--accent --primary --solid --obj-lo),
86 --label: fn.global-color(--accent --primary --solid --fg),
87 --shadow: 0 0 0 0 transparent,
88 ),
89 ),
90 --primary: (
91 --bg: fn.global-color(--fg),
92 --label: fn.global-color(--bg-hi2),
93 --outline-label: fn.global-color(--fg),
94 --shadow: 0 0 0 0 transparent,
95
96 --hover: (
97 --bg: fn.global-color(--fg-lo),
98 --label: fn.global-color(--bg-hi2),
99 --shadow: 0 0 0 0 transparent,
100 ),
101 --active: (
102 --bg: fn.global-color(--fg-lo),
103 --label: fn.global-color(--bg-hi2),
104 --shadow: 0 0 0 0 transparent,
105 ),
106 ),
107 --secondary: (
108 --bg: fn.global-color(--obj-hi),
109 --label: fn.global-color(--fg),
110 --outline-label: fn.global-color(--fg),
111 --shadow: 0 0 0 0 transparent,
112
113 --hover: (
114 --bg: fn.global-color(--obj),
115 --label: fn.global-color(--fg-lo),
116 --shadow: 0 0 0 0 transparent,
117 ),
118 --active: (
119 --bg: fn.global-color(--obj-lo),
120 --label: fn.global-color(--fg-lo),
121 --shadow: 0 0 0 0 transparent,
122 ),
123 ),
124 ),
125 ), 'colors');
126
127 @include iro.bem-object(iro.props-namespace()) {
128 display: inline-block;
129 padding: fn.dim(--pad-y) fn.dim(--pad-x);
130 border: 2px solid transparent;
131 border-radius: fn.dim(--rounding);
132 border-color: fn.color(--any --disabled --bg);
133 background-color: fn.color(--any --disabled --bg);
134 box-shadow: fn.color(--any --disabled --shadow);
135 color: fn.color(--any --disabled --label);
136 font-weight: 500;
137 line-height: fn.dim(--line-height);
138 text-align: center;
139 text-decoration: none;
140 vertical-align: top;
141
142 @include iro.bem-modifier('block') {
143 display: block;
144 }
145
146 @include iro.bem-modifier('outline') {
147 background-color: transparent;
148 box-shadow: none;
149 }
150
151 @include iro.bem-modifier('lg') {
152 padding: fn.dim(--lg --pad-y) fn.dim(--lg --pad-x);
153 }
154
155 @include button-variant('secondary');
156
157 @each $mod in 'accent' 'primary' {
158 @include iro.bem-modifier($mod) {
159 @include button-variant($mod);
160 }
161 }
162
163 @include iro.bem-at-theme('keyboard') {
164 &:focus {
165 border-color: fn.color(--any --key-focus --border);
166 background-color: fn.color(--any --key-focus --bg);
167 box-shadow: fn.color(--any --key-focus --shadow);
168 color: fn.color(--any --key-focus --label);
169 }
170 }
171
172 @include iro.bem-modifier('round') {
173 width: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-y));
174 padding-right: 0;
175 padding-left: 0;
176 border-radius: 100em;
177 }
178 }
179}
diff --git a/src/.old/scopes/_blockquotes.scss b/src/.old/scopes/_blockquotes.scss
deleted file mode 100644
index 5383bd7..0000000
--- a/src/.old/scopes/_blockquotes.scss
+++ /dev/null
@@ -1,35 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('blockquotes') {
5 @include iro.props-store((
6 --dims: (
7 --indent: fn.global-dim(--list --indent),
8 --margin-top: fn.global-dim(--paragraph --margin-top),
9
10 --compact: (
11 --indent: fn.global-dim(--list --compact-indent),
12 ),
13 )
14 ), 'dims');
15
16 @include iro.props-store((
17 --colors: (
18 --border: fn.global-color(--obj),
19 )
20 ), 'colors');
21
22 @include iro.bem-scope(iro.props-namespace()) {
23 blockquote {
24 margin: fn.dim(--margin-top) 0 0 1px;
25 padding-left: calc(fn.dim(--indent) - 3px);
26 border-left: 3px solid fn.color(--border);
27 }
28
29 @include iro.bem-modifier('compact') {
30 blockquote {
31 padding-left: calc(fn.dim(--compact --indent) - 3px);
32 }
33 }
34 }
35}
diff --git a/src/_base.scss b/src/_base.scss
index b4ce1ae..f55e94b 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -10,7 +10,7 @@ html {
10 10
11html, 11html,
12body { 12body {
13 height: 100%; 13 block-size: 100%;
14} 14}
15 15
16body { 16body {
@@ -90,7 +90,8 @@ li {
90 padding: 0; 90 padding: 0;
91} 91}
92 92
93:focus { 93:focus,
94:focus-visible {
94 outline: 0; 95 outline: 0;
95} 96}
96 97
@@ -137,11 +138,11 @@ textarea {
137} 138}
138 139
139textarea { 140textarea {
140 height: calc(1em * fn.dim(--font --standard --line-height)); 141 block-size: calc(1em * fn.dim(--font --standard --line-height));
141} 142}
142 143
143hr { 144hr {
144 height: fn.dim(--border --thin); 145 block-size: fn.dim(--border --thin);
145 margin-block: calc(.5 * (fn.dim(--heading --margin-bs) + fn.dim(--paragraph --margin-bs))) 0; 146 margin-block: calc(.5 * (fn.dim(--heading --margin-bs) + fn.dim(--paragraph --margin-bs))) 0;
146 border: 0; 147 border: 0;
147 background-color: fn.color(--border); 148 background-color: fn.color(--border);
diff --git a/src/_config.scss b/src/_config.scss
index be01a69..3cffbfd 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -25,6 +25,34 @@ res.$named-viewports: media.$breakpoints;
25 25
26$palette-precision: 5 !default; 26$palette-precision: 5 !default;
27 27
28$static-colors: (
29 --base: hsl(0, 0%, 97%),
30
31 --contrasts: (
32 --100: -1.08,
33 --200: -1.20,
34 --300: -1.33,
35 --400: -1.58,
36 --500: -1.92,
37 --600: -2.39,
38 --700: -3.01,
39 --800: -3.87,
40 --900: -5.07,
41 --1000: -6.72,
42 --1100: -8.84,
43 --1200: -11.31,
44 --1300: -13.94,
45 ),
46
47 --palettes: (
48 --blue: blend.lch(48% 50 279),
49 --purple: blend.lch(48% 50 308),
50 --red: blend.lch(48% 50 23),
51 --green: blend.lch(63% 50 147),
52 --yellow: blend.lch(68% 50 80),
53 ),
54) !default;
55
28$theme-light: ( 56$theme-light: (
29 --contrasts: ( 57 --contrasts: (
30 --grays: ( 58 --grays: (
@@ -74,23 +102,30 @@ $theme-light: (
74 --yellow: blend.lch(68% 50 80) --colors --muted, 102 --yellow: blend.lch(68% 50 80) --colors --muted,
75 ), 103 ),
76 104
77 --semantic-colors: ( 105 --semantic: (
78 --accent: --blue, 106 --accent: --blue,
79 --focus: --yellow-static, 107 --positive: --green,
80 108 --negative: --red,
81 --bg-l2: --base --50, 109 --warning: --yellow,
82 --bg-l1: --base --100, 110
83 --bg-base: --base --200, 111 --accent-static: --blue-static,
84 112 --positive-static: --green-static,
85 --border-mute: --base --200, 113 --negative-static: --red-static,
86 --border: --base --300, 114 --warning-static: --yellow-static,
87 --border-strong: --base --400, 115
88 116 --bg-l2: --base --50,
89 --text-disabled: --base --500, 117 --bg-l1: --base --100,
90 --text-mute-more: --base --600, 118 --bg-base: --base --200,
91 --text-mute: --base --700, 119
92 --text: --base --800, 120 --border-mute: --base --200,
93 --heading: --base --900, 121 --border: --base --300,
122 --border-strong: --base --400,
123
124 --text-disabled: --base --500,
125 --text-mute-more: --base --600,
126 --text-mute: --base --700,
127 --text: --base --800,
128 --heading: --base --900,
94 ), 129 ),
95) !default; 130) !default;
96 131
@@ -143,23 +178,30 @@ $theme-dark: (
143 --yellow: blend.lch(68% 50 80) --colors --muted, 178 --yellow: blend.lch(68% 50 80) --colors --muted,
144 ), 179 ),
145 180
146 --semantic-colors: ( 181 --semantic: (
147 --accent: --blue, 182 --accent: --blue,
148 --focus: --yellow-static, 183 --positive: --green,
149 184 --negative: --red,
150 --bg-base: --base --50, 185 --warning: --yellow,
151 --bg-l1: --base --75, 186
152 --bg-l2: --base --100, 187 --accent-static: --blue-static,
153 188 --positive-static: --green-static,
154 --border-mute: --base --200, 189 --negative-static: --red-static,
155 --border: --base --300, 190 --warning-static: --yellow-static,
156 --border-strong: --base --400, 191
157 192 --bg-base: --base --50,
158 --text-disabled: --base --500, 193 --bg-l1: --base --75,
159 --text-mute-more: --base --600, 194 --bg-l2: --base --100,
160 --text-mute: --base --700, 195
161 --text: --base --800, 196 --border-mute: --base --200,
162 --heading: --base --900, 197 --border: --base --300,
198 --border-strong: --base --400,
199
200 --text-disabled: --base --500,
201 --text-mute-more: --base --600,
202 --text-mute: --base --700,
203 --text: --base --800,
204 --heading: --base --900,
163 ), 205 ),
164) !default; 206) !default;
165 207
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 2084905..4574333 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -100,7 +100,7 @@
100 --thin: 1px, 100 --thin: 1px,
101 ), 101 ),
102 102
103 --rounding: 3px, 103 --rounding: 4px,
104 104
105 --focus: ( 105 --focus: (
106 --outline-width: 3px, 106 --outline-width: 3px,
@@ -176,6 +176,20 @@
176 176
177// 177//
178 178
179@each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
180 @include iro.props-store((
181 --colors: (
182 #{$palette-name}-static: fn.palette(
183 $palette,
184 map.get(config.$static-colors, --contrasts),
185 1,
186 false,
187 map.get(config.$static-colors, --base),
188 ),
189 ),
190 ));
191}
192
179@each $theme-name, $theme in config.$themes { 193@each $theme-name, $theme in config.$themes {
180 $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name); 194 $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name);
181 195
@@ -190,21 +204,14 @@
190 $base-color, 204 $base-color,
191 map.get($theme, --contrasts, $contrasts), 205 map.get($theme, --contrasts, $contrasts),
192 map.get($theme, --ranges, $ranges), 206 map.get($theme, --ranges, $ranges),
193 nth(map.get($theme, --palettes, --base), 1), 207 true,
208 list.nth(map.get($theme, --palettes, --base), 1),
194 ), 209 ),
195 ), 210 ),
196 ), $tree); 211 ), $tree);
197
198 @if $theme-name == config.$theme-default {
199 @include iro.props-store((
200 --colors: (
201 #{$palette-name}-static: iro.props-get-static(--colors $palette-name, $tree),
202 ),
203 ), $tree);
204 }
205 } 212 }
206 213
207 @each $color, $ref in map.get($theme, --semantic-colors) { 214 @each $color, $ref in map.get($theme, --semantic) {
208 @include iro.props-store(( 215 @include iro.props-store((
209 --colors: ( 216 --colors: (
210 $color: fn.color($ref), 217 $color: fn.color($ref),
diff --git a/src/_functions.scss b/src/_functions.scss
index 7c0ded3..8553833 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -107,21 +107,29 @@
107 @return $result; 107 @return $result;
108} 108}
109 109
110@function palette($base-color, $contrasts, $range: 1, $reference-color: $base-color) { 110@function palette($base-color, $contrasts, $range: 1, $desaturate: true, $reference-color: $base-color) {
111 $palette: (); 111 $palette: ();
112 112
113 @if list.nth(list.nth($contrasts, 1), 2) > list.nth(list.nth($contrasts, list.length($contrasts)), 2) { 113 @if list.nth(list.nth($contrasts, 1), 2) > list.nth(list.nth($contrasts, list.length($contrasts)), 2) {
114 $contrasts: iro.fn-list-reverse($contrasts); 114 $contrasts: iro.fn-list-reverse($contrasts);
115 } 115 }
116 116
117 $reference-lightness: blend.lightness($reference-color);
117 $i: -100%; 118 $i: -100%;
118 119
119 @while $i <= 100% { 120 @while $i <= 100% {
120 $palette: list.append($palette, blend.scale($base-color, $l: $range * $i, $c: -.8 * math.abs($i))); 121 $c: if($desaturate, .8 * if($reference-lightness >= 50%, -1 * math.clamp(0%, $i, 100%), math.clamp(-100%, $i, 0%)), 0%);
121 $i: $i + config.$palette-precision; 122 $palette: list.append($palette, blend.scale($base-color, $l: $range * $i, $c: $c));
123 $i: $i + config.$palette-precision;
122 } 124 }
123 125
124 @return multi-contrast($base-color, $palette, $contrasts, $reference-color); 126 $palette: multi-contrast($base-color, $palette, $contrasts, $reference-color);
127
128 @each $key, $color in $palette {
129 $palette: map.set($palette, #{$key}-text, blend.contrast($color))
130 }
131
132 @return $palette;
125} 133}
126 134
127@function px-to-em($size, $base: iro.$vars-root-size) { 135@function px-to-em($size, $base: iro.$vars-root-size) {
diff --git a/src/_objects.scss b/src/_objects.scss
index aaace92..68bf3a7 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -1,9 +1,9 @@
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';
diff --git a/src/_scopes.scss b/src/_scopes.scss
index fc1f89d..6df12e1 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/_utils.scss b/src/_utils.scss
index e551136..8ba2581 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -125,28 +125,28 @@ $dirs: (
125 } 125 }
126} 126}
127 127
128@include iro.bem-utility('w-100') { 128@include iro.bem-utility('is-100') {
129 width: 100%; 129 inline-size: 100%;
130} 130}
131 131
132@include iro.bem-utility('w-75') { 132@include iro.bem-utility('is-75') {
133 width: 75%; 133 inline-size: 75%;
134} 134}
135 135
136@include iro.bem-utility('w-50') { 136@include iro.bem-utility('is-50') {
137 width: 50%; 137 inline-size: 50%;
138} 138}
139 139
140@include iro.bem-utility('w-25') { 140@include iro.bem-utility('is-25') {
141 width: 25%; 141 inline-size: 25%;
142} 142}
143 143
144@include iro.bem-utility('w-1px') { 144@include iro.bem-utility('is-1px') {
145 width: 1px; 145 inline-size: 1px;
146} 146}
147 147
148@include iro.bem-utility('w-0') { 148@include iro.bem-utility('is-0') {
149 width: 0; 149 inline-size: 0;
150} 150}
151 151
152@include iro.bem-utility('elp') { 152@include iro.bem-utility('elp') {
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index b28eea2..fcc4837 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -29,9 +29,9 @@
29 @include iro.bem-layout(iro.props-namespace()) { 29 @include iro.bem-layout(iro.props-namespace()) {
30 @each $size in 'narrow-125' 'narrow' 'narrow-75' { 30 @each $size in 'narrow-125' 'narrow' 'narrow-75' {
31 @include iro.bem-modifier($size) { 31 @include iro.bem-modifier($size) {
32 max-width: fn.dim(--#{$size}); 32 max-inline-size: fn.dim(--#{$size});
33 margin-right: auto; 33 margin-right: auto;
34 margin-left: auto; 34 margin-left: auto;
35 } 35 }
36 } 36 }
37 37
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss
index fa90975..953c8c0 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.scss
@@ -62,9 +62,9 @@
62 flex: 0 0 auto; 62 flex: 0 0 auto;
63 63
64 @include iro.bem-modifier('main') { 64 @include iro.bem-modifier('main') {
65 flex-shrink: 1; 65 flex-shrink: 1;
66 width: 100%; 66 inline-size: 100%;
67 min-width: 0; 67 min-inline-size: 0;
68 } 68 }
69 } 69 }
70 } 70 }
diff --git a/src/layouts/_message-group.scss b/src/layouts/_message-group.scss
index f977b61..235e242 100644
--- a/src/layouts/_message-group.scss
+++ b/src/layouts/_message-group.scss
@@ -26,16 +26,16 @@
26 gap: 0 fn.dim(--spacing-x); 26 gap: 0 fn.dim(--spacing-x);
27 27
28 @include iro.bem-elem('avatar') { 28 @include iro.bem-elem('avatar') {
29 grid-area: avatar; 29 grid-area: avatar;
30 height: 0; 30 block-size: 0;
31 } 31 }
32 32
33 @include iro.bem-elem('message') { 33 @include iro.bem-elem('message') {
34 grid-column: message; 34 grid-column: message;
35 position: relative; 35 position: relative;
36 box-sizing: border-box; 36 box-sizing: border-box;
37 min-width: 0; 37 min-inline-size: 0;
38 max-width: 100%; 38 max-inline-size: 100%;
39 39
40 &::before { 40 &::before {
41 content: ''; 41 content: '';
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
new file mode 100644
index 0000000..0d95751
--- /dev/null
+++ b/src/objects/_badge.scss
@@ -0,0 +1,194 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4$themes: accent positive negative warning;
5
6@include iro.props-namespace('badge') {
7 @include iro.props-store((
8 --dims: (
9 --pad-b: fn.global-dim(--size --100),
10 --pad-i: fn.global-dim(--size --150),
11 --pad-i-pill: fn.global-dim(--size --200),
12 --rounding: fn.global-dim(--rounding),
13 --font-size: fn.global-dim(--font-size --100),
14
15 --50: (
16 --pad-b: fn.global-dim(--size --50),
17 --pad-i: fn.global-dim(--size --115),
18 --pad-i-pill: fn.global-dim(--size --150),
19 --font-size: fn.global-dim(--font-size --75),
20 ),
21 --200: (
22 --pad-b: fn.global-dim(--size --125),
23 --pad-i: fn.global-dim(--size --175),
24 --pad-i-pill: fn.global-dim(--size --225),
25 --font-size: fn.global-dim(--font-size --150),
26 ),
27 --300: (
28 --pad-b: fn.global-dim(--size --160),
29 --pad-i: fn.global-dim(--size --225),
30 --pad-i-pill: fn.global-dim(--size --300),
31 --font-size: fn.global-dim(--font-size --200),
32 ),
33 ),
34 --colors: (
35 --bg: fn.global-color(--heading),
36 --label: fn.global-color(--bg-l2),
37 --hover: (
38 --bg: fn.global-color(--text),
39 ),
40 --active: (
41 --bg: fn.global-color(--text),
42 ),
43 --key-focus: (
44 --bg: fn.global-color(--base --50),
45 --label: fn.global-color(--heading),
46 --border: fn.global-color(--yellow-static --400),
47 ),
48
49 --quiet: (
50 --bg: fn.global-color(--border-mute),
51 --label: fn.global-color(--heading),
52 --hover: (
53 --bg: fn.global-color(--border),
54 ),
55 --active: (
56 --bg: fn.global-color(--border-strong),
57 ),
58 ),
59 ),
60 ));
61
62 @each $theme in $themes {
63 @include iro.props-store((
64 --colors: (
65 --#{$theme}: (
66 --bg: fn.global-color(--#{$theme} --800),
67 --label: fn.global-color(--#{$theme} --800-text),
68 --hover: (
69 --bg: fn.global-color(--#{$theme} --900),
70 ),
71 --active: (
72 --bg: fn.global-color(--#{$theme} --900),
73 ),
74 ),
75
76 --#{$theme}-quiet: (
77 --bg: fn.global-color(--#{$theme} --200),
78 --label: fn.global-color(--#{$theme} --1100),
79 --hover: (
80 --bg: fn.global-color(--#{$theme} --300),
81 ),
82 --active: (
83 --bg: fn.global-color(--#{$theme} --300),
84 ),
85 )
86 ),
87 ));
88 }
89
90 @include iro.bem-object(iro.props-namespace()) {
91 display: inline-block;
92 padding-block: fn.dim(--pad-b);
93 padding-inline: fn.dim(--pad-i);
94 border-radius: fn.dim(--rounding);
95 background-color: fn.color(--bg);
96 color: fn.color(--label);
97 font-size: fn.dim(--font-size);
98 line-height: fn.global-dim(--font --standard --line-height);
99 text-align: center;
100 text-decoration: none;
101
102 &:link,
103 &:visited,
104 &:enabled {
105 &:hover {
106 background-color: fn.color(--hover --bg);
107 }
108
109 &:active {
110 background-color: fn.color(--active --bg);
111 }
112 }
113
114 @include iro.bem-modifier('quiet') {
115 background-color: fn.color(--quiet --bg);
116 color: fn.color(--quiet --label);
117
118 &:link,
119 &:visited,
120 &:enabled {
121 &:hover {
122 background-color: fn.color(--quiet --hover --bg);
123 }
124
125 &:active {
126 background-color: fn.color(--quiet --active --bg);
127 }
128 }
129 }
130
131 @each $theme in $themes {
132 @include iro.bem-modifier($theme) {
133 background-color: fn.color(--#{$theme} --bg);
134 color: fn.color(--#{$theme} --label);
135
136 &:link,
137 &:visited,
138 &:enabled {
139 &:hover {
140 background-color: fn.color(--#{$theme} --hover --bg);
141 }
142
143 &:active {
144 background-color: fn.color(--#{$theme} --active --bg);
145 }
146 }
147
148 @include iro.bem-modifier('quiet') {
149 background-color: fn.color(--#{$theme}-quiet --bg);
150 color: fn.color(--#{$theme}-quiet --label);
151
152 &:link,
153 &:visited,
154 &:enabled {
155 &:hover {
156 background-color: fn.color(--#{$theme}-quiet --hover --bg);
157 }
158
159 &:active {
160 background-color: fn.color(--#{$theme}-quiet --active --bg);
161 }
162 }
163 }
164 }
165 }
166
167 &:link,
168 &:visited,
169 &:enabled {
170 &:focus-visible {
171 background-color: fn.color(--key-focus --bg);
172 box-shadow: 0 0 0 fn.global-dim(--border --thick) fn.color(--key-focus --border);
173 color: fn.color(--key-focus --label);
174 }
175 }
176
177 @include iro.bem-modifier('pill') {
178 padding-inline: fn.dim(--pad-i-pill);
179 border-radius: 10em;
180 }
181
182 @each $size in '50' '200' '300' {
183 @include iro.bem-modifier($size) {
184 padding-block: fn.dim(--#{$size} --pad-b);
185 padding-inline: fn.dim(--#{$size} --pad-i);
186 font-size: fn.dim(--#{$size} --font-size);
187
188 @include iro.bem-modifier('pill') {
189 padding-inline: fn.dim(--#{$size} --pad-i-pill);
190 }
191 }
192 }
193 }
194}
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
new file mode 100644
index 0000000..d3588f6
--- /dev/null
+++ b/src/objects/_button.scss
@@ -0,0 +1,173 @@
1@use 'sass:list';
2@use 'iro-sass/src/index' as iro;
3@use '../functions' as fn;
4
5$themes: primary accent positive negative warning;
6
7@mixin button-variant($theme: null) {
8 $key: if($theme == null, (), --#{$theme});
9
10 &:link,
11 &:visited,
12 &:enabled {
13 border-color: fn.color(list.join($key, --bg));
14 background-color: fn.color(list.join($key, --bg));
15 color: fn.color(list.join($key, --label));
16 }
17
18 @include iro.bem-modifier('outline') {
19 &:link,
20 &:visited,
21 &:enabled {
22 background-color: transparent;
23 color: fn.color(list.join($key, --outline-label));
24 }
25 }
26
27 &:link,
28 &:visited,
29 &:enabled {
30 &:hover {
31 border-color: fn.color(list.join($key, --hover --bg));
32 background-color: fn.color(list.join($key, --hover --bg));
33 color: fn.color(list.join($key, --hover --label));
34 }
35
36 &:active {
37 border-color: fn.color(list.join($key, --active --bg));
38 background-color: fn.color(list.join($key, --active --bg));
39 color: fn.color(list.join($key, --active --label));
40 }
41 }
42}
43
44@include iro.props-namespace('button') {
45 @include iro.props-store((
46 --dims: (
47 --line-height: 1.4,
48 --pad-i: fn.global-dim(--size --225),
49 --pad-b: fn.global-dim(--size --65),
50 --rounding: 10em,
51
52 --lg: (
53 --pad-i: fn.global-dim(--size --300),
54 --pad-b: fn.global-dim(--size --100),
55 ),
56 ),
57 --colors: (
58 --bg: fn.global-color(--border-mute),
59 --label: fn.global-color(--text),
60 --outline-label: fn.global-color(--text),
61
62 --hover: (
63 --bg: fn.global-color(--border),
64 --label: fn.global-color(--heading),
65 ),
66 --active: (
67 --bg: fn.global-color(--border-strong),
68 --label: fn.global-color(--heading),
69 ),
70 --disabled: (
71 --bg: fn.global-color(--border-mute),
72 --label: fn.global-color(--text-disabled),
73 ),
74 --key-focus: (
75 --bg: fn.global-color(--base --50),
76 --label: fn.global-color(--heading),
77 --border: fn.global-color(--yellow-static --400),
78 ),
79
80 --primary: (
81 --bg: fn.global-color(--base --800),
82 --label: fn.global-color(--base --800-text),
83 --outline-label: fn.global-color(--text),
84
85 --hover: (
86 --bg: fn.global-color(--base --900),
87 --label: fn.global-color(--base --900-text),
88 ),
89 --active: (
90 --bg: fn.global-color(--base --900),
91 --label: fn.global-color(--base --900-text),
92 ),
93 ),
94 ),
95 ));
96
97 @each $theme in $themes {
98 @if $theme != primary {
99 @include iro.props-store((
100 --colors: (
101 --#{$theme}: (
102 --bg: fn.global-color(--#{$theme} --900),
103 --label: fn.global-color(--#{$theme} --900-text),
104 --outline-label: fn.global-color(--#{$theme} --1000),
105
106 --hover: (
107 --bg: fn.global-color(--#{$theme} --1000),
108 --label: fn.global-color(--#{$theme} --1000-text),
109 ),
110 --active: (
111 --bg: fn.global-color(--#{$theme} --1100),
112 --label: fn.global-color(--#{$theme} --1100-text),
113 ),
114 ),
115 ),
116 ));
117 }
118 }
119
120 @include iro.bem-object(iro.props-namespace()) {
121 display: inline-block;
122 padding-block: fn.dim(--pad-b);
123 padding-inline: fn.dim(--pad-i);
124 border: 2px solid transparent;
125 border-radius: fn.dim(--rounding);
126 border-color: fn.color(--disabled --bg);
127 background-color: fn.color(--disabled --bg);
128 color: fn.color(--disabled --label);
129 font-weight: 500;
130 line-height: fn.dim(--line-height);
131 text-align: center;
132 text-decoration: none;
133 vertical-align: top;
134
135 @include iro.bem-modifier('block') {
136 display: block;
137 }
138
139 @include iro.bem-modifier('outline') {
140 background-color: transparent;
141 box-shadow: none;
142 }
143
144 @include iro.bem-modifier('lg') {
145 padding-block: fn.dim(--lg --pad-b);
146 padding-inline: fn.dim(--lg --pad-i);
147 }
148
149 @include button-variant();
150
151 @each $theme in $themes {
152 @include iro.bem-modifier($theme) {
153 @include button-variant($theme);
154 }
155 }
156
157 &:link,
158 &:visited,
159 &:enabled {
160 &:focus-visible {
161 border-color: fn.color(--key-focus --border);
162 background-color: fn.color(--key-focus --bg);
163 color: fn.color(--key-focus --label);
164 }
165 }
166
167 @include iro.bem-modifier('round') {
168 inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
169 padding-inline: 0;
170 border-radius: 100em;
171 }
172 }
173}
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 3332331..5e80de4 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -42,7 +42,7 @@
42 @include iro.props-store(( 42 @include iro.props-store((
43 --colors: ( 43 --colors: (
44 $color: ( 44 $color: (
45 --bg: fn.global-color($color --700), 45 --bg: fn.global-color($color --800),
46 --label: fn.global-color($color --1000), 46 --label: fn.global-color($color --1000),
47 ) 47 )
48 ), 48 ),
@@ -54,7 +54,7 @@
54 display: flex; 54 display: flex;
55 flex-direction: row; 55 flex-direction: row;
56 align-items: center; 56 align-items: center;
57 height: 1em; 57 block-size: 1em;
58 margin-block: fn.dim(--margin-b); 58 margin-block: fn.dim(--margin-b);
59 color: fn.color(--strong --label); 59 color: fn.color(--strong --label);
60 font-size: fn.dim(--strong --label-font-size); 60 font-size: fn.dim(--strong --label-font-size);
@@ -67,8 +67,8 @@
67 &::after { 67 &::after {
68 content: ''; 68 content: '';
69 flex: 1 1 auto; 69 flex: 1 1 auto;
70 width: 100%; 70 inline-size: 100%;
71 height: fn.dim(--strong --border); 71 block-size: fn.dim(--strong --border);
72 background-color: fn.color(--strong --bg); 72 background-color: fn.color(--strong --bg);
73 } 73 }
74 74
@@ -82,8 +82,8 @@
82 82
83 @include iro.bem-modifier('vertical') { 83 @include iro.bem-modifier('vertical') {
84 align-self: stretch; 84 align-self: stretch;
85 width: 1px; 85 inline-size: 1px;
86 height: auto; 86 block-size: auto;
87 margin-block: 0; 87 margin-block: 0;
88 background-color: fn.color(--faint --bg); 88 background-color: fn.color(--faint --bg);
89 89
@@ -100,7 +100,7 @@
100 100
101 &::before, 101 &::before,
102 &::after { 102 &::after {
103 height: fn.dim(--medium --border); 103 block-size: fn.dim(--medium --border);
104 background-color: fn.color(--medium --bg); 104 background-color: fn.color(--medium --bg);
105 } 105 }
106 } 106 }
@@ -112,7 +112,7 @@
112 112
113 &::before, 113 &::before,
114 &::after { 114 &::after {
115 height: fn.dim(--faint --border); 115 block-size: fn.dim(--faint --border);
116 background-color: fn.color(--faint --bg); 116 background-color: fn.color(--faint --bg);
117 } 117 }
118 } 118 }
diff --git a/src/.old/objects/_emoji.scss b/src/objects/_emoji.scss
index 8d17212..d8d1289 100644
--- a/src/.old/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -2,12 +2,14 @@
2@use '../functions' as fn; 2@use '../functions' as fn;
3@use 'sass:math'; 3@use 'sass:math';
4 4
5@use 'icon';
6
5@include iro.props-namespace('emoji') { 7@include iro.props-namespace('emoji') {
6 @include iro.props-store(( 8 @include iro.props-store((
7 --dims: ( 9 --dims: (
8 --size: calc(1 / 14 * 18em), 10 --size: calc(1 / 14 * 18em),
9 --pad: .3em, 11 --pad: .3em,
10 --rounding: 3px, 12 --rounding: fn.global-dim(--rounding),
11 --zoom: 3, 13 --zoom: 3,
12 --valign: -.25em, 14 --valign: -.25em,
13 15
@@ -25,20 +27,17 @@
25 --size: calc(1 / 14 * 38em), 27 --size: calc(1 / 14 * 38em),
26 --valign: -1em, 28 --valign: -1em,
27 ) 29 )
28 ) 30 ),
29 ), 'dims');
30
31 @include iro.props-store((
32 --colors: ( 31 --colors: (
33 --bg: fn.global-color(--obj-hi), 32 --bg: fn.global-color(--border-mute),
34 ) 33 )
35 ), 'colors'); 34 ));
36 35
37 @include iro.bem-object(iro.props-namespace()) { 36 @include iro.bem-object(iro.props-namespace()) {
38 display: inline-block; 37 display: inline-block;
39 position: relative; 38 position: relative;
40 width: calc(fn.dim(--size)); 39 inline-size: calc(fn.dim(--size));
41 height: calc(fn.dim(--size)); 40 block-size: calc(fn.dim(--size));
42 margin: calc(-1 * fn.dim(--pad)); 41 margin: calc(-1 * fn.dim(--pad));
43 padding: calc(fn.dim(--pad)); 42 padding: calc(fn.dim(--pad));
44 vertical-align: fn.dim(--valign); 43 vertical-align: fn.dim(--valign);
@@ -51,8 +50,8 @@
51 50
52 @each $size in '125' '150' '200' { 51 @each $size in '125' '150' '200' {
53 @include iro.bem-modifier($size) { 52 @include iro.bem-modifier($size) {
54 width: fn.dim(--#{$size} --size); 53 inline-size: fn.dim(--#{$size} --size);
55 height: fn.dim(--#{$size} --size); 54 block-size: fn.dim(--#{$size} --size);
56 vertical-align: fn.dim(--#{$size} --valign); 55 vertical-align: fn.dim(--#{$size} --valign);
57 56
58 @include iro.bem-modifier('icon') { 57 @include iro.bem-modifier('icon') {
diff --git a/src/.old/objects/_icon.scss b/src/objects/_icon.scss
index 5c4bfab..1491dd9 100644
--- a/src/.old/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -8,12 +8,12 @@
8 --size: calc(1 / 14 * 16em), 8 --size: calc(1 / 14 * 16em),
9 --valign: -.2em, 9 --valign: -.2em,
10 ) 10 )
11 ), 'dims'); 11 ));
12 12
13 @include iro.bem-object(iro.props-namespace()) { 13 @include iro.bem-object(iro.props-namespace()) {
14 display: inline; 14 display: inline;
15 width: fn.dim(--size); 15 inline-size: fn.dim(--size);
16 height: fn.dim(--size); 16 block-size: fn.dim(--size);
17 stroke-width: fn.dim(--stroke); 17 stroke-width: fn.dim(--stroke);
18 stroke-linecap: round; 18 stroke-linecap: round;
19 stroke-linejoin: round; 19 stroke-linejoin: round;
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index 9ecdfac..19f282f 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -7,8 +7,8 @@
7 7
8@include iro.props-namespace('palette') { 8@include iro.props-namespace('palette') {
9 @include iro.bem-object(iro.props-namespace()) { 9 @include iro.bem-object(iro.props-namespace()) {
10 display: flex; 10 display: flex;
11 height: 3em; 11 block-size: 3em;
12 12
13 @include iro.bem-elem('item') { 13 @include iro.bem-elem('item') {
14 flex: 1 1 auto; 14 flex: 1 1 auto;
@@ -40,5 +40,23 @@
40 } 40 }
41 } 41 }
42 } 42 }
43
44 @include iro.bem-modifier('static') {
45 @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
46 $contrasts: map.get(config.$static-colors, --contrasts);
47
48 @include iro.bem-modifier(string.slice($palette-name, 3)) {
49 @include iro.bem-elem('item') {
50 @for $i from 1 through list.length($contrasts) {
51 $key: list.nth(map.keys($contrasts), $i);
52
53 &:nth-child(#{$i}) {
54 background-color: fn.global-color(#{$palette-name}-static $key);
55 }
56 }
57 }
58 }
59 }
60 }
43 } 61 }
44} 62}
diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss
new file mode 100644
index 0000000..f6a13fe
--- /dev/null
+++ b/src/scopes/_blockquotes.scss
@@ -0,0 +1,34 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('blockquotes') {
5 @include iro.props-store((
6 --dims: (
7 --indent: fn.global-dim(--list --indent),
8 --margin-bs: fn.global-dim(--paragraph --margin-bs),
9 --border: fn.global-dim(--border --thick),
10
11 --compact: (
12 --indent: fn.global-dim(--list --compact-indent),
13 ),
14 ),
15 --colors: (
16 --border: fn.global-color(--border),
17 )
18 ));
19
20 @include iro.bem-scope(iro.props-namespace()) {
21 blockquote {
22 margin-block: fn.dim(--margin-bs);
23 margin-inline: 1px 0;
24 padding-inline-start: calc(fn.dim(--indent) - fn.dim(--border));
25 border-inline-start: fn.dim(--border) solid fn.color(--border);
26 }
27
28 @include iro.bem-modifier('compact') {
29 blockquote {
30 padding-inline-start: calc(fn.dim(--compact --indent) - fn.dim(--border));
31 }
32 }
33 }
34}
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
index a6905a3..0ff3a2c 100644
--- a/src/scopes/_code.scss
+++ b/src/scopes/_code.scss
@@ -23,7 +23,7 @@
23 ), 23 ),
24 --block: ( 24 --block: (
25 --fg: fn.global-color(--text), 25 --fg: fn.global-color(--text),
26 --bg: fn.global-color(--bg-l2), 26 --bg: fn.global-color(--base --50),
27 ) 27 )
28 ) 28 )
29 )); 29 ));
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index d0c47ef..a9de8b5 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -4,10 +4,11 @@
4@include iro.props-namespace('links') { 4@include iro.props-namespace('links') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --rounding: fn.global-dim(--rounding),
7 --underline: fn.global-dim(--border --thin), 8 --underline: fn.global-dim(--border --thin),
8 9
9 --hover: ( 10 --hover: (
10 --underline: fn.global-dim(--border --medium), 11 --underline: fn.global-dim(--border --medium),
11 ) 12 )
12 ), 13 ),
13 --colors: ( 14 --colors: (
@@ -15,7 +16,7 @@
15 16
16 --idle: ( 17 --idle: (
17 --text: fn.global-color(--accent --1000), 18 --text: fn.global-color(--accent --1000),
18 --underline: fn.global-color(--accent --1000), 19 --underline: fn.global-color(--accent --600),
19 20
20 --hover: ( 21 --hover: (
21 --text: fn.global-color(--accent --1200), 22 --text: fn.global-color(--accent --1200),
@@ -24,16 +25,16 @@
24 25
25 --visited: ( 26 --visited: (
26 --text: fn.global-color(--purple --1000), 27 --text: fn.global-color(--purple --1000),
27 --underline: fn.global-color(--purple --1000), 28 --underline: fn.global-color(--purple --600),
28 29
29 --hover: ( 30 --hover: (
30 --text: fn.global-color(--purple --1200), 31 --text: fn.global-color(--purple --1200),
31 ), 32 ),
32 ), 33 ),
33 34
34 --focus: ( 35 --key-focus: (
35 --bg: fn.global-color(--yellow-static --400), 36 --bg: fn.global-color(--yellow-static --400),
36 --text: #000, 37 --text: fn.global-color(--yellow-static --400-text),
37 ) 38 )
38 ) 39 )
39 )); 40 ));
@@ -41,7 +42,7 @@
41 @include iro.bem-scope(iro.props-namespace()) { 42 @include iro.bem-scope(iro.props-namespace()) {
42 :link, 43 :link,
43 :visited { 44 :visited {
44 border-radius: .5px; 45 border-radius: fn.dim(--rounding);
45 color: currentColor; 46 color: currentColor;
46 text-decoration: underline; 47 text-decoration: underline;
47 text-decoration-color: fn.color(--underline); 48 text-decoration-color: fn.color(--underline);
@@ -53,13 +54,13 @@
53 text-decoration-skip-ink: none; 54 text-decoration-skip-ink: none;
54 } 55 }
55 56
56 @include iro.bem-at-theme('keyboard') { 57 &:focus-visible {
57 &:focus { 58 background-color: fn.color(--key-focus --bg);
58 background-color: fn.color(--focus --bg); 59 box-shadow: 0 0 0 fn.global-dim(--border --thick) fn.color(--key-focus --bg);
59 color: fn.color(--focus --text); 60 color: fn.color(--key-focus --text);
60 text-decoration: none; 61 text-decoration: underline;
61 border-block-end: fn.dim(--hover --underline) solid currentColor; 62 text-decoration-thickness: fn.dim(--hover --underline);
62 } 63 text-decoration-skip-ink: none;
63 } 64 }
64 } 65 }
65 66
diff --git a/src/.old/scopes/_lists.scss b/src/scopes/_lists.scss
index 1322f2d..bad9731 100644
--- a/src/.old/scopes/_lists.scss
+++ b/src/scopes/_lists.scss
@@ -4,30 +4,27 @@
4@include iro.props-namespace('lists') { 4@include iro.props-namespace('lists') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --indent: calc(fn.global-dim(--list --indent) + 1em), 7 --indent: calc(fn.global-dim(--list --indent) + 1em),
8 --margin-top: fn.global-dim(--paragraph --margin-top), 8 --margin-bs: fn.global-dim(--paragraph --margin-bs),
9 9
10 --compact: ( 10 --compact: (
11 --indent: fn.global-dim(--list --compact-indent), 11 --indent: fn.global-dim(--list --compact-indent),
12 ), 12 ),
13 ) 13 ),
14 ), 'dims');
15
16 @include iro.props-store((
17 --colors: ( 14 --colors: (
18 --border: fn.global-color(--obj-hi), 15 --border: fn.global-color(--border-mute),
19 ) 16 )
20 ), 'colors'); 17 ));
21 18
22 @include iro.bem-scope(iro.props-namespace()) { 19 @include iro.bem-scope(iro.props-namespace()) {
23 ul, 20 ul,
24 ol { 21 ol {
25 margin-top: fn.dim(--margin-top); 22 margin-block-start: fn.dim(--margin-bs);
26 padding-left: fn.dim(--indent); 23 padding-inline-start: fn.dim(--indent);
27 24
28 ul, 25 ul,
29 ol { 26 ol {
30 margin-top: 0; 27 margin-block-start: 0;
31 } 28 }
32 } 29 }
33 30
@@ -40,27 +37,29 @@
40 } 37 }
41 38
42 dl { 39 dl {
43 margin: fn.dim(--margin-top) 0 0; 40 margin-block: fn.dim(--margin-bs) 0;
44 padding: 0; 41 margin-inline: 0;
42 padding: 0;
45 } 43 }
46 44
47 dt { 45 dt {
48 color: fn.global-color(--fg-lo); 46 color: fn.global-color(--heading);
49 font-weight: bold; 47 font-weight: bold;
50 } 48 }
51 49
52 dd { 50 dd {
53 margin: 0 0 0 fn.dim(--indent); 51 margin-block: 0;
52 margin-inline: fn.dim(--indent) 0;
54 } 53 }
55 54
56 @include iro.bem-modifier('compact') { 55 @include iro.bem-modifier('compact') {
57 ul, 56 ul,
58 ol { 57 ol {
59 padding-left: calc(fn.dim(--compact --indent) - 3px); 58 padding-inline-start: calc(fn.dim(--compact --indent) - 3px);
60 } 59 }
61 60
62 dd { 61 dd {
63 margin-left: calc(fn.dim(--compact --indent) - 3px); 62 margin-inline-start: calc(fn.dim(--compact --indent) - 3px);
64 } 63 }
65 } 64 }
66 } 65 }
diff --git a/src_demo/components/_sidebar.scss b/src_demo/components/_sidebar.scss
index 6b7eaf0..7dca65a 100644
--- a/src_demo/components/_sidebar.scss
+++ b/src_demo/components/_sidebar.scss
@@ -3,8 +3,8 @@
3 3
4@include iro.props-namespace('sidebar') { 4@include iro.props-namespace('sidebar') {
5 @include iro.bem-component(iro.props-namespace()) { 5 @include iro.bem-component(iro.props-namespace()) {
6 grid-area: sidebar; 6 grid-area: sidebar;
7 min-width: 15em; 7 min-inline-size: 15em;
8 min-height: 0; 8 min-block-size: 0;
9 } 9 }
10} 10}
diff --git a/static/drgn.png b/static/drgn.png
index b8cde00..6836383 100755
--- a/static/drgn.png
+++ b/static/drgn.png
Binary files differ
diff --git a/static/script.js b/static/script.js
index 00962e5..846c842 100644
--- a/static/script.js
+++ b/static/script.js
@@ -1,28 +1,9 @@
1'use strict'; 1"use strict";
2 2
3// 3//
4 4
5document.addEventListener('DOMContentLoaded', () => { 5document.addEventListener("DOMContentLoaded", () => {
6 document.querySelectorAll('.is-indeterminate').forEach(el => el.indeterminate = true); 6 document
7}) 7 .querySelectorAll(".is-indeterminate")
8 8 .forEach((el) => (el.indeterminate = true));
9// 9});
10
11const enableFocusIndicator = e => {
12 if (e.key !== 'Tab') {
13 return;
14 }
15
16 document.body.classList.add('t-keyboard');
17 document.removeEventListener('keydown', enableFocusIndicator);
18 document.addEventListener('mousedown', disableFocusIndicator);
19}
20
21const disableFocusIndicator = () => {
22 document.body.classList.remove('t-keyboard');
23
24 document.removeEventListener('mousedown', disableFocusIndicator);
25 document.addEventListener('keydown', enableFocusIndicator);
26}
27
28document.addEventListener('keydown', enableFocusIndicator);
diff --git a/tpl/objects/badge.pug b/tpl/objects/badge.pug
index 04fd8eb..500f062 100644
--- a/tpl/objects/badge.pug
+++ b/tpl/objects/badge.pug
@@ -3,6 +3,7 @@ mixin badge(variant)
3 let classes = { 3 let classes = {
4 'o-badge': true, 4 'o-badge': true,
5 'o-badge--pill': !!attributes.pill, 5 'o-badge--pill': !!attributes.pill,
6 'o-badge--quiet': !!attributes.quiet,
6 'o-menu__badge': !!attributes.menu, 7 'o-menu__badge': !!attributes.menu,
7 } 8 }
8 if (attributes.size) { 9 if (attributes.size) {
diff --git a/tpl/objects/palette.pug b/tpl/objects/palette.pug
index 77e6e9e..303265d 100644
--- a/tpl/objects/palette.pug
+++ b/tpl/objects/palette.pug
@@ -1,7 +1,8 @@
1mixin palette(palette) 1mixin palette(palette)
2 - 2 -
3 let classes = { 3 let classes = {
4 'o-palette': true, 4 'o-palette': true,
5 'o-palette--static': !!attributes.static,
5 } 6 }
6 classes['o-palette--' + palette] = true 7 classes['o-palette--' + palette] = true
7 8
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug
index a3c4eed..1e1b88f 100644
--- a/tpl/views/badge.pug
+++ b/tpl/views/badge.pug
@@ -1,51 +1,75 @@
1mixin view-badge 1mixin view-badge
2 +view('badge', 'Badge') 2 +view('badge', 'Badge')
3 .c-box 3 .c-box
4 +badge= '100' 4 +badge(size=50 href='#')= '50'
5 = ' '
6 +badge('primary')= 'new'
7 = ' '
8 +badge('accent')= 'new'
9 = ' ' 5 = ' '
10 +badge('accent-quiet')= 'new' 6 +badge= '100'
11 = ' ' 7 = ' '
12 +badge(size=200 href='#')= '200' 8 +badge(size=200 href='#')= '200'
13 = ' ' 9 = ' '
14 +badge('primary')(size=200 href='#')= 'new'
15 = ' '
16 +badge('accent')(size=200 href='#')= 'new'
17 = ' '
18 +badge('accent-quiet')(size=200 href='#')= 'new'
19 = ' '
20 +badge(size=300 href='#')= '300' 10 +badge(size=300 href='#')= '300'
21 = ' '
22 +badge('primary')(size=300 href='#')= 'new'
23 = ' '
24 +badge('accent')(size=300 href='#')= 'new'
25 = ' '
26 +badge('accent-quiet')(size=300 href='#')= 'new'
27 11
28 .c-box 12 .c-box
29 +badge(pill=true)= '100' 13 +badge(size=50 href='#' quiet=true)= '50'
30 = ' ' 14 = ' '
31 +badge('primary')(pill=true)= 'new' 15 +badge(quiet=true)= '100'
32 = ' ' 16 = ' '
33 +badge('accent')(pill=true)= 'new' 17 +badge(size=200 href='#' quiet=true)= '200'
34 = ' ' 18 = ' '
35 +badge('accent-quiet')(pill=true)= 'new' 19 +badge(size=300 href='#' quiet=true)= '300'
36 = ' ' 20
37 +badge(size=200, pill=true)= '200' 21 each theme in ['accent', 'positive', 'negative', 'warning']
38 = ' ' 22 .c-box
39 +badge('primary')(size=200, pill=true)= 'new' 23 +badge(theme)(size=50 href='#')= 'new'
24 = ' '
25 +badge(theme)= 'new'
26 = ' '
27 +badge(theme)(size=200 href='#')= 'new'
28 = ' '
29 +badge(theme)(size=300 href='#')= 'new'
30
31 .c-box
32 +badge(theme)(size=50 href='#' quiet=true)= 'new'
33 = ' '
34 +badge(theme)(quiet=true)= 'new'
35 = ' '
36 +badge(theme)(size=200 href='#' quiet=true)= 'new'
37 = ' '
38 +badge(theme)(size=300 href='#' quiet=true)= 'new'
39
40 .c-box
41 +badge(size=50, pill=true)= '50'
40 = ' ' 42 = ' '
41 +badge('accent')(size=200, pill=true)= 'new' 43 +badge(pill=true)= '100'
42 = ' ' 44 = ' '
43 +badge('accent-quiet')(size=200, pill=true)= 'new' 45 +badge(size=200 pill=true)= '200'
44 = ' ' 46 = ' '
45 +badge(size=300, pill=true)= '300' 47 +badge(size=300 pill=true)= '300'
48
49 .c-box
50 +badge(size=50 pill=true quiet=true)= 'new'
46 = ' ' 51 = ' '
47 +badge('primary')(size=300, pill=true)= 'new' 52 +badge(pill=true quiet=true)= 'new'
48 = ' ' 53 = ' '
49 +badge('accent')(size=300, pill=true)= 'new' 54 +badge(size=200 pill=true quiet=true)= 'new'
50 = ' ' 55 = ' '
51 +badge('accent-quiet')(size=300, pill=true)= 'new' 56 +badge(size=300 pill=true quiet=true)= 'new'
57
58 each theme in ['accent', 'positive', 'negative', 'warning']
59 .c-box
60 +badge(theme)(size=50 pill=true href='#')= 'new'
61 = ' '
62 +badge(theme)(pill=true)= 'new'
63 = ' '
64 +badge(theme)(size=200 pill=true href='#')= 'new'
65 = ' '
66 +badge(theme)(size=300 pill=true href='#')= 'new'
67
68 .c-box
69 +badge(theme)(size=50 pill=true href='#' quiet=true)= 'new'
70 = ' '
71 +badge(theme)(pill=true quiet=true)= 'new'
72 = ' '
73 +badge(theme)(size=200 pill=true href='#' quiet=true)= 'new'
74 = ' '
75 +badge(theme)(size=300 pill=true href='#' quiet=true)= 'new'
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index 2a1bd57..7c96419 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -2,37 +2,28 @@ mixin view-button
2 +view('button', 'Button') 2 +view('button', 'Button')
3 .c-box 3 .c-box
4 .l-button-group 4 .l-button-group
5 +a-button(variant='accent')= 'Button' 5 +a-button= 'Button'
6 +a-button(variant='accent' disabled=true)= 'Button' 6 +a-button(disabled=true)= 'Button'
7 +a-button(variant='accent' outline=true)= 'Button' 7 +a-button(outline=true)= 'Button'
8 +a-button(variant='accent' outline=true disabled=true)= 'Button' 8 +a-button(outline=true disabled=true)= 'Button'
9 br 9 br
10 .l-button-group 10 .l-button-group
11 +a-button(variant='accent' icon='trash') 11 +a-button(icon='trash')
12 +a-button(variant='accent' disabled=true icon='trash') 12 +a-button(disabled=true icon='trash')
13 +a-button(variant='accent' outline=true icon='trash') 13 +a-button(outline=true icon='trash')
14 +a-button(variant='accent' outline=true disabled=true icon='trash') 14 +a-button(outline=true disabled=true icon='trash')
15 br 15
16 .l-button-group 16 each theme in ['primary', 'accent', 'positive', 'negative', 'warning']
17 +a-button(variant='primary')= 'Button' 17 .c-box
18 +a-button(variant='primary' disabled=true)= 'Button' 18 .l-button-group
19 +a-button(variant='primary' outline=true)= 'Button' 19 +a-button(variant=theme)= 'Button'
20 +a-button(variant='primary' outline=true disabled=true)= 'Button' 20 +a-button(variant=theme disabled=true)= 'Button'
21 br 21 +a-button(variant=theme outline=true)= 'Button'
22 .l-button-group 22 +a-button(variant=theme outline=true disabled=true)= 'Button'
23 +a-button(variant='primary' icon='trash') 23 br
24 +a-button(variant='primary' disabled=true icon='trash') 24 .l-button-group
25 +a-button(variant='primary' outline=true icon='trash') 25 +a-button(variant=theme icon='trash')
26 +a-button(variant='primary' outline=true disabled=true icon='trash') 26 +a-button(variant=theme disabled=true icon='trash')
27 br 27 +a-button(variant=theme outline=true icon='trash')
28 .l-button-group 28 +a-button(variant=theme outline=true disabled=true icon='trash')
29 +a-button(variant='secondary')= 'Button' 29
30 +a-button(variant='secondary' disabled=true)= 'Button'
31 +a-button(variant='secondary' outline=true)= 'Button'
32 +a-button(variant='secondary' outline=true disabled=true)= 'Button'
33 br
34 .l-button-group
35 +a-button(variant='secondary' icon='trash')
36 +a-button(variant='secondary' disabled=true icon='trash')
37 +a-button(variant='secondary' outline=true icon='trash')
38 +a-button(variant='secondary' outline=true disabled=true icon='trash')
diff --git a/tpl/views/palette.pug b/tpl/views/palette.pug
index 384fe03..c63dea8 100644
--- a/tpl/views/palette.pug
+++ b/tpl/views/palette.pug
@@ -3,3 +3,6 @@ mixin view-palette
3 each palette in ['base', 'blue', 'purple', 'red', 'green', 'yellow'] 3 each palette in ['base', 'blue', 'purple', 'red', 'green', 'yellow']
4 .c-box 4 .c-box
5 +palette(palette) 5 +palette(palette)
6 each palette in ['blue', 'purple', 'red', 'green', 'yellow']
7 .c-box
8 +palette(palette)(static=true)
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-09-21 07:55:41 +0000