summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-22 10:39:48 +0200
committerVolpeon <git@volpeon.ink>2024-06-22 10:39:48 +0200
commit1e902449652213eb1feae5e61740cb9ce3b9d6e3 (patch)
tree1db6b07696d8f2acd138e7eed845718c1fb5237f /src
parentWIP: Refactoring (diff)
downloadiro-design-1e902449652213eb1feae5e61740cb9ce3b9d6e3.tar.gz
iro-design-1e902449652213eb1feae5e61740cb9ce3b9d6e3.tar.bz2
iro-design-1e902449652213eb1feae5e61740cb9ce3b9d6e3.zip
WIP: Refactoring
Diffstat (limited to 'src')
-rw-r--r--src/.old/scopes/_code.scss68
-rw-r--r--src/_config.scss214
-rw-r--r--src/_declare-vars.scss68
-rw-r--r--src/_functions.scss4
-rw-r--r--src/_scopes.scss2
-rw-r--r--src/objects/_divider.scss35
-rw-r--r--src/objects/_palette.scss20
-rw-r--r--src/scopes/_code.scss59
-rw-r--r--src/scopes/_links.scss5
9 files changed, 244 insertions, 231 deletions
diff --git a/src/.old/scopes/_code.scss b/src/.old/scopes/_code.scss
deleted file mode 100644
index 4eb9458..0000000
--- a/src/.old/scopes/_code.scss
+++ /dev/null
@@ -1,68 +0,0 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('code') {
5 @include iro.props-store((
6 --dims: (
7 --inline: (
8 --pad-x: fn.global-dim(--size --50),
9 --pad-y: fn.global-dim(--size --10),
10 --rounding: 3px,
11 ),
12 --block: (
13 --pad-x: fn.global-dim(--size --150),
14 --pad-y: fn.global-dim(--size --85),
15 --margin-top: fn.global-dim(--paragraph --margin-top),
16 --rounding: 3px,
17 )
18 )
19 ), 'dims');
20
21 @include iro.props-store((
22 --colors: (
23 --inline: (
24 --fg: fn.global-color(--red --quiet --fg),
25 --bg: fn.global-color(--red --quiet --bg),
26 ),
27 --block: (
28 --fg: fn.global-color(--fg),
29 --bg: fn.global-color(--bg-hi2),
30 )
31 )
32 ), 'colors');
33
34 @include iro.props-store((
35 --colors: (
36 --block: (
37 --fg: fn.global-color(--fg-lo),
38 --bg: fn.global-color(--obj-hi),
39 )
40 )
41 ), 'palette-light-hi');
42
43 @include iro.bem-scope(iro.props-namespace()) {
44 code {
45 padding: fn.dim(--inline --pad-y) fn.dim(--inline --pad-x);
46 border-radius: fn.dim(--inline --rounding);
47 background-color: fn.color(--inline --bg);
48 color: fn.color(--inline --fg);
49 }
50
51 pre {
52 margin: fn.dim(--block --margin-top) 0 0 0;
53 padding: fn.dim(--block --pad-y) fn.dim(--block --pad-x);
54 border-radius: fn.dim(--block --rounding);
55 background-color: fn.color(--block --bg);
56 color: fn.color(--block --fg);
57
58 code {
59 display: inline-block;
60 margin-right: fn.dim(--block --pad-x);
61 padding: 0;
62 border-radius: 0;
63 background-color: transparent;
64 color: currentColor;
65 }
66 }
67 }
68}
diff --git a/src/_config.scss b/src/_config.scss
index 08374fb..be01a69 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -26,115 +26,141 @@ res.$named-viewports: media.$breakpoints;
26$palette-precision: 5 !default; 26$palette-precision: 5 !default;
27 27
28$theme-light: ( 28$theme-light: (
29 --base: hsl(0, 0%, 97%), 29 --contrasts: (
30 --blue: blend.lch(48% 50 279), 30 --grays: (
31 --purple: blend.lch(48% 50 308), 31 --50: 1.1,
32 --red: blend.lch(48% 50 23), 32 --75: 1.04,
33 --green: blend.lch(63% 50 147), 33 --100: 1,
34 --yellow: blend.lch(68% 50 70), 34
35 35 --200: -1.15,
36 --grays: ( 36 --300: -1.35,
37 --50: 1.1, 37 --400: -1.7,
38 --75: 1.04, 38
39 --100: 1, 39 --500: -2.4,
40 40 --600: -3.3,
41 --200: -1.15, 41 --700: -6,
42 --300: -1.35, 42 --800: -13,
43 --400: -1.7, 43 --900: -20,
44 44 ),
45 --500: -2.4, 45
46 --600: -3.3, 46 --colors: (
47 --700: -6, 47 --100: -1.08,
48 --800: -13, 48 --200: -1.20,
49 --900: -20, 49 --300: -1.33,
50 --400: -1.58,
51 --500: -1.92,
52 --600: -2.39,
53 --700: -3.01,
54 --800: -3.87,
55 --900: -5.07,
56 --1000: -6.72,
57 --1100: -8.84,
58 --1200: -11.31,
59 --1300: -13.94,
60 ),
50 ), 61 ),
51 --colors: ( 62
52 --100: -1.08, 63 --ranges: (
53 --200: -1.20, 64 --full: 1,
54 --300: -1.33, 65 --muted: 0.8,
55 --400: -1.58, 66 ),
56 --500: -1.92, 67
57 --600: -2.39, 68 --palettes: (
58 --700: -3.01, 69 --base: hsl(0, 0%, 97%) --grays --full,
59 --800: -3.87, 70 --blue: blend.lch(48% 50 279) --colors --muted,
60 --900: -5.07, 71 --purple: blend.lch(48% 50 308) --colors --muted,
61 --1000: -6.72, 72 --red: blend.lch(48% 50 23) --colors --muted,
62 --1100: -8.84, 73 --green: blend.lch(63% 50 147) --colors --muted,
63 --1200: -11.31, 74 --yellow: blend.lch(68% 50 80) --colors --muted,
64 --1300: -13.94,
65 ), 75 ),
66 76
67 --accent: --blue, 77 --semantic-colors: (
78 --accent: --blue,
79 --focus: --yellow-static,
68 80
69 --bg-l2: --50, 81 --bg-l2: --base --50,
70 --bg-l1: --100, 82 --bg-l1: --base --100,
71 --bg-base: --200, 83 --bg-base: --base --200,
72 84
73 --border-mute: --200, 85 --border-mute: --base --200,
74 --border: --300, 86 --border: --base --300,
75 --border-strong: --400, 87 --border-strong: --base --400,
76 88
77 --text-disabled: --500, 89 --text-disabled: --base --500,
78 --text-mute-more: --600, 90 --text-mute-more: --base --600,
79 --text-mute: --700, 91 --text-mute: --base --700,
80 --text: --800, 92 --text: --base --800,
81 --heading: --900, 93 --heading: --base --900,
94 ),
82) !default; 95) !default;
83 96
84$theme-dark: ( 97$theme-dark: (
85 --base: hsl(0, 0%, 19%), 98 --contrasts: (
86 --blue: blend.lch(48% 50 279), 99 --grays: (
87 --purple: blend.lch(48% 50 308), 100 --50: -1.31,
88 --red: blend.lch(48% 50 23), 101 --75: -1.18,
89 --green: blend.lch(63% 50 147), 102 --100: 1,
90 --yellow: blend.lch(68% 50 70), 103
91 104 --200: 1.15,
92 --grays: ( 105 --300: 1.35,
93 --50: -1.31, 106 --400: 1.7,
94 --75: -1.18, 107
95 --100: 1, 108 --500: 2.4,
96 109 --600: 3.3,
97 --200: 1.15, 110 --700: 6,
98 --300: 1.35, 111 --800: 13,
99 --400: 1.7, 112 --900: 20,
100 113 ),
101 --500: 2.4, 114
102 --600: 3.3, 115 --colors: (
103 --700: 6, 116 --100: 1.12,
104 --800: 13, 117 --200: 1.30,
105 --900: 20, 118 --300: 1.58,
119 --400: 1.96,
120 --500: 2.45,
121 --600: 3.09,
122 --700: 3.90,
123 --800: 4.85,
124 --900: 6.02,
125 --1000: 7.34,
126 --1100: 8.77,
127 --1200: 10.18,
128 --1300: 11.64,
129 ),
106 ), 130 ),
107 --colors: ( 131
108 --100: 1.12, 132 --ranges: (
109 --200: 1.30, 133 --full: 1,
110 --300: 1.58, 134 --muted: 0.8,
111 --400: 1.96, 135 ),
112 --500: 2.45, 136
113 --600: 3.09, 137 --palettes: (
114 --700: 3.90, 138 --base: hsl(0, 0%, 19%) --grays --full,
115 --800: 4.85, 139 --blue: blend.lch(48% 50 279) --colors --muted,
116 --900: 6.02, 140 --purple: blend.lch(48% 50 308) --colors --muted,
117 --1000: 7.34, 141 --red: blend.lch(48% 50 23) --colors --muted,
118 --1100: 8.77, 142 --green: blend.lch(63% 50 147) --colors --muted,
119 --1200: 10.18, 143 --yellow: blend.lch(68% 50 80) --colors --muted,
120 --1300: 11.64,
121 ), 144 ),
122 145
123 --accent: --blue, 146 --semantic-colors: (
147 --accent: --blue,
148 --focus: --yellow-static,
124 149
125 --bg-base: --50, 150 --bg-base: --base --50,
126 --bg-l1: --75, 151 --bg-l1: --base --75,
127 --bg-l2: --100, 152 --bg-l2: --base --100,
128 153
129 --border-mute: --200, 154 --border-mute: --base --200,
130 --border: --300, 155 --border: --base --300,
131 --border-strong: --400, 156 --border-strong: --base --400,
132 157
133 --text-disabled: --500, 158 --text-disabled: --base --500,
134 --text-mute-more: --600, 159 --text-mute-more: --base --600,
135 --text-mute: --700, 160 --text-mute: --base --700,
136 --text: --800, 161 --text: --base --800,
137 --heading: --900, 162 --heading: --base --900,
163 ),
138) !default; 164) !default;
139 165
140$themes: ( 166$themes: (
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 37d9cae..2084905 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -1,4 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:list';
2@use 'iro-sass/src/index' as iro; 3@use 'iro-sass/src/index' as iro;
3@use 'include-media/dist/include-media' as media; 4@use 'include-media/dist/include-media' as media;
4@use '@oddbird/blend'; 5@use '@oddbird/blend';
@@ -99,6 +100,8 @@
99 --thin: 1px, 100 --thin: 1px,
100 ), 101 ),
101 102
103 --rounding: 3px,
104
102 --focus: ( 105 --focus: (
103 --outline-width: 3px, 106 --outline-width: 3px,
104 ), 107 ),
@@ -173,58 +176,49 @@
173 176
174// 177//
175 178
176@include iro.props-store(( 179@each $theme-name, $theme in config.$themes {
177 --colors: ( 180 $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name);
178 --base: fn.palette(
179 map.get(config.$theme-light, --base),
180 map.get(config.$theme-light, --grays),
181 ),
182 ),
183));
184
185@include iro.props-store((
186 --colors: (
187 --base: fn.palette(
188 map.get(config.$theme-dark, --base),
189 map.get(config.$theme-dark, --grays),
190 ),
191 ),
192), 'dark');
193 181
194@each $name, $theme in config.$themes { 182 @each $palette-name, $palette in map.get($theme, --palettes) {
195 $props-name: if($name == config.$theme-default, iro.$props-default-tree, $name); 183 $base-color: list.nth($palette, 1);
184 $contrasts: list.nth($palette, 2);
185 $ranges: list.nth($palette, 3);
196 186
197 @each $color in 'blue' 'purple' 'red' 'green' 'yellow' {
198 @include iro.props-store(( 187 @include iro.props-store((
199 --colors: ( 188 --colors: (
200 --#{$color}: fn.palette( 189 $palette-name: fn.palette(
201 map.get($theme, --#{$color}), 190 $base-color,
202 map.get($theme, --colors), 191 map.get($theme, --contrasts, $contrasts),
203 map.get($theme, --base), 192 map.get($theme, --ranges, $ranges),
193 nth(map.get($theme, --palettes, --base), 1),
204 ), 194 ),
205 ), 195 ),
206 ), $props-name); 196 ), $tree);
207 }
208 197
209 @include iro.props-store(( 198 @if $theme-name == config.$theme-default {
210 --colors: ( 199 @include iro.props-store((
211 --accent: iro.props-get-static(--colors map.get($theme, --accent), $props-name), 200 --colors: (
212 ), 201 #{$palette-name}-static: iro.props-get-static(--colors $palette-name, $tree),
213 ), $props-name); 202 ),
203 ), $tree);
204 }
205 }
214 206
215 @each $color in 'bg-l2' 'bg-l1' 'bg-base' 'border-mute' 'border' 'border-strong' 'text-disabled' 'text-mute-more' 'text-mute' 'text' 'heading' { 207 @each $color, $ref in map.get($theme, --semantic-colors) {
216 @include iro.props-store(( 208 @include iro.props-store((
217 --colors: ( 209 --colors: (
218 --#{$color}: fn.color(--base map.get($theme, --#{$color})), 210 $color: fn.color($ref),
219 ), 211 ),
220 ), $props-name); 212 ), $tree);
221 } 213 }
222} 214}
223 215
224@each $color in 'blue' 'purple' 'red' 'green' 'yellow' { 216@each $theme-name, $theme in config.$themes {
217 $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name);
218
225 @include iro.props-store(( 219 @include iro.props-store((
226 --colors: ( 220 --colors: (
227 --#{$color}-static: iro.props-get-static(--colors --#{$color}), 221
228 ), 222 ),
229 )); 223 ), $tree);
230} 224}
diff --git a/src/_functions.scss b/src/_functions.scss
index aaa8ac9..7c0ded3 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -107,7 +107,7 @@
107 @return $result; 107 @return $result;
108} 108}
109 109
110@function palette($base-color, $contrasts, $reference-color: $base-color) { 110@function palette($base-color, $contrasts, $range: 1, $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) {
@@ -117,7 +117,7 @@
117 $i: -100%; 117 $i: -100%;
118 118
119 @while $i <= 100% { 119 @while $i <= 100% {
120 $palette: list.append($palette, blend.scale($base-color, $l: $i)); 120 $palette: list.append($palette, blend.scale($base-color, $l: $range * $i, $c: -.8 * math.abs($i)));
121 $i: $i + config.$palette-precision; 121 $i: $i + config.$palette-precision;
122 } 122 }
123 123
diff --git a/src/_scopes.scss b/src/_scopes.scss
index eb28177..fc1f89d 100644
--- a/src/_scopes.scss
+++ b/src/_scopes.scss
@@ -1,5 +1,5 @@
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';
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 465bbcf..3332331 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -1,5 +1,7 @@
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;
4@use '../config';
3 5
4@include iro.props-namespace('divider') { 6@include iro.props-namespace('divider') {
5 @include iro.props-store(( 7 @include iro.props-store((
@@ -32,29 +34,22 @@
32 --bg: fn.global-color(--border), 34 --bg: fn.global-color(--border),
33 --label: fn.global-color(--text-mute-more), 35 --label: fn.global-color(--text-mute-more),
34 ), 36 ),
35 --blue: (
36 --bg: fn.global-color(--blue --700),
37 --label: fn.global-color(--blue --1000),
38 ),
39 --purple: (
40 --bg: fn.global-color(--purple --700),
41 --label: fn.global-color(--purple --1000),
42 ),
43 --red: (
44 --bg: fn.global-color(--red --700),
45 --label: fn.global-color(--red --1000),
46 ),
47 --green: (
48 --bg: fn.global-color(--green --700),
49 --label: fn.global-color(--green --1000),
50 ),
51 --yellow: (
52 --bg: fn.global-color(--yellow --700),
53 --label: fn.global-color(--yellow --1000),
54 ),
55 ), 37 ),
56 )); 38 ));
57 39
40 @each $color in map.keys(map.get(config.$themes, config.$theme-default, --palettes)) {
41 @if $color != '--base' {
42 @include iro.props-store((
43 --colors: (
44 $color: (
45 --bg: fn.global-color($color --700),
46 --label: fn.global-color($color --1000),
47 )
48 ),
49 ));
50 }
51 }
52
58 @include iro.bem-object(iro.props-namespace()) { 53 @include iro.bem-object(iro.props-namespace()) {
59 display: flex; 54 display: flex;
60 flex-direction: row; 55 flex-direction: row;
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index a86c026..9ecdfac 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -1,5 +1,6 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:list'; 2@use 'sass:list';
3@use 'sass:string';
3@use 'iro-sass/src/index' as iro; 4@use 'iro-sass/src/index' as iro;
4@use '../functions' as fn; 5@use '../functions' as fn;
5@use '../config'; 6@use '../config';
@@ -12,8 +13,11 @@
12 @include iro.bem-elem('item') { 13 @include iro.bem-elem('item') {
13 flex: 1 1 auto; 14 flex: 1 1 auto;
14 15
15 @for $i from 1 through list.length(map.get(config.$theme-light, --grays)) { 16 $palette: map.get(config.$themes, config.$theme-default, --palettes, --base);
16 $key: list.nth(map.keys(map.get(config.$theme-light, --grays)), $i); 17 $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2));
18
19 @for $i from 1 through list.length($contrasts) {
20 $key: list.nth(map.keys($contrasts), $i);
17 21
18 &:nth-child(#{$i}) { 22 &:nth-child(#{$i}) {
19 background-color: fn.global-color(--base $key); 23 background-color: fn.global-color(--base $key);
@@ -21,14 +25,16 @@
21 } 25 }
22 } 26 }
23 27
24 @each $palette in 'blue' 'purple' 'red' 'green' 'yellow' { 28 @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, --palettes) {
25 @include iro.bem-modifier($palette) { 29 $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2));
30
31 @include iro.bem-modifier(string.slice($palette-name, 3)) {
26 @include iro.bem-elem('item') { 32 @include iro.bem-elem('item') {
27 @for $i from 1 through list.length(map.get(config.$theme-light, --colors)) { 33 @for $i from 1 through list.length($contrasts) {
28 $key: list.nth(map.keys(map.get(config.$theme-light, --colors)), $i); 34 $key: list.nth(map.keys($contrasts), $i);
29 35
30 &:nth-child(#{$i}) { 36 &:nth-child(#{$i}) {
31 background-color: fn.global-color(--#{$palette} $key); 37 background-color: fn.global-color($palette-name $key);
32 } 38 }
33 } 39 }
34 } 40 }
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
new file mode 100644
index 0000000..a6905a3
--- /dev/null
+++ b/src/scopes/_code.scss
@@ -0,0 +1,59 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('code') {
5 @include iro.props-store((
6 --dims: (
7 --inline: (
8 --pad-i: fn.global-dim(--size --50),
9 --pad-b: fn.global-dim(--size --10),
10 --rounding: fn.global-dim(--rounding),
11 ),
12 --block: (
13 --pad-i: fn.global-dim(--size --150),
14 --pad-b: fn.global-dim(--size --85),
15 --margin-bs: fn.global-dim(--paragraph --margin-bs),
16 --rounding: fn.global-dim(--rounding),
17 )
18 ),
19 --colors: (
20 --inline: (
21 --fg: fn.global-color(--red --1100),
22 --bg: fn.global-color(--red --200),
23 ),
24 --block: (
25 --fg: fn.global-color(--text),
26 --bg: fn.global-color(--bg-l2),
27 )
28 )
29 ));
30
31 @include iro.bem-scope(iro.props-namespace()) {
32 code {
33 padding-block: fn.dim(--inline --pad-b);
34 padding-inline: fn.dim(--inline --pad-i);
35 border-radius: fn.dim(--inline --rounding);
36 background-color: fn.color(--inline --bg);
37 color: fn.color(--inline --fg);
38 }
39
40 pre {
41 margin-block: fn.dim(--block --margin-bs) 0;
42 margin-inline: 0;
43 padding-block: fn.dim(--block --pad-b);
44 padding-inline: fn.dim(--block --pad-i);
45 border-radius: fn.dim(--block --rounding);
46 background-color: fn.color(--block --bg);
47 color: fn.color(--block --fg);
48
49 code {
50 display: inline-block;
51 margin-inline-end: fn.dim(--block --pad-i);
52 padding: 0;
53 border-radius: 0;
54 background-color: transparent;
55 color: currentColor;
56 }
57 }
58 }
59}
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 115b199..d0c47ef 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -15,7 +15,7 @@
15 15
16 --idle: ( 16 --idle: (
17 --text: fn.global-color(--accent --1000), 17 --text: fn.global-color(--accent --1000),
18 --underline: fn.global-color(--accent --700), 18 --underline: fn.global-color(--accent --1000),
19 19
20 --hover: ( 20 --hover: (
21 --text: fn.global-color(--accent --1200), 21 --text: fn.global-color(--accent --1200),
@@ -24,7 +24,7 @@
24 24
25 --visited: ( 25 --visited: (
26 --text: fn.global-color(--purple --1000), 26 --text: fn.global-color(--purple --1000),
27 --underline: fn.global-color(--purple --700), 27 --underline: fn.global-color(--purple --1000),
28 28
29 --hover: ( 29 --hover: (
30 --text: fn.global-color(--purple --1200), 30 --text: fn.global-color(--purple --1200),
@@ -50,6 +50,7 @@
50 &:hover { 50 &:hover {
51 text-decoration: underline; 51 text-decoration: underline;
52 text-decoration-thickness: fn.dim(--hover --underline); 52 text-decoration-thickness: fn.dim(--hover --underline);
53 text-decoration-skip-ink: none;
53 } 54 }
54 55
55 @include iro.bem-at-theme('keyboard') { 56 @include iro.bem-at-theme('keyboard') {
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 04:32:58 +0000