diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/.old/scopes/_code.scss | 68 | ||||
-rw-r--r-- | src/_config.scss | 214 | ||||
-rw-r--r-- | src/_declare-vars.scss | 68 | ||||
-rw-r--r-- | src/_functions.scss | 4 | ||||
-rw-r--r-- | src/_scopes.scss | 2 | ||||
-rw-r--r-- | src/objects/_divider.scss | 35 | ||||
-rw-r--r-- | src/objects/_palette.scss | 20 | ||||
-rw-r--r-- | src/scopes/_code.scss | 59 | ||||
-rw-r--r-- | src/scopes/_links.scss | 5 |
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') { |