summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-24 17:07:19 +0200
committerVolpeon <git@volpeon.ink>2024-06-24 17:07:19 +0200
commitf1c517da618ba92e537e8e4856203fe988df8636 (patch)
treeafb774c56d7b6340c902dd02e886075bd5a749e3
parentUpdate (diff)
downloadiro-design-f1c517da618ba92e537e8e4856203fe988df8636.tar.gz
iro-design-f1c517da618ba92e537e8e4856203fe988df8636.tar.bz2
iro-design-f1c517da618ba92e537e8e4856203fe988df8636.zip
Update
Diffstat
-rw-r--r--package.json2
-rw-r--r--pnpm-lock.yaml10
-rw-r--r--src/_config.scss153
-rw-r--r--src/_functions.scss64
-rw-r--r--src/functions/colors/_apca.scss (renamed from src/functions/_colors.scss)53
-rw-r--r--src/functions/colors/_index.scss2
-rw-r--r--src/functions/colors/_oklch.scss88
-rw-r--r--src/objects/_checkbox.scss8
-rw-r--r--src/objects/_text-field.scss6
-rw-r--r--src/scopes/_code.scss2
10 files changed, 190 insertions, 198 deletions
diff --git a/package.json b/package.json
index a6f7882..9855892 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
20 "dependencies": { 20 "dependencies": {
21 "@oddbird/blend": "^0.2.4", 21 "@oddbird/blend": "^0.2.4",
22 "include-media": "^2.0.0", 22 "include-media": "^2.0.0",
23 "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git#9e2321a1730506c1973226fc254fa96df4f0dac9" 23 "iro-sass": "git+https://git.vulpes.one/git/iro-sass.git#04f8e9dbdc57a53f004e6238dfacc917bafdbbff"
24 }, 24 },
25 "devDependencies": { 25 "devDependencies": {
26 "iro-icons": "git+https://git.vulpes.one/git/iro-icons.git#b854aa0bfdc5a1bd233606af8ffff6312017845e", 26 "iro-icons": "git+https://git.vulpes.one/git/iro-icons.git#b854aa0bfdc5a1bd233606af8ffff6312017845e",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 21a852b..5a211e0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,8 +15,8 @@ importers:
15 specifier: ^2.0.0 15 specifier: ^2.0.0
16 version: 2.0.0 16 version: 2.0.0
17 iro-sass: 17 iro-sass:
18 specifier: git+https://git.vulpes.one/git/iro-sass.git#9e2321a1730506c1973226fc254fa96df4f0dac9 18 specifier: git+https://git.vulpes.one/git/iro-sass.git#04f8e9dbdc57a53f004e6238dfacc917bafdbbff
19 version: git+https://git.vulpes.one/git/iro-sass.git#9e2321a1730506c1973226fc254fa96df4f0dac9 19 version: git+https://git.vulpes.one/git/iro-sass.git#04f8e9dbdc57a53f004e6238dfacc917bafdbbff
20 devDependencies: 20 devDependencies:
21 iro-icons: 21 iro-icons:
22 specifier: git+https://git.vulpes.one/git/iro-icons.git#b854aa0bfdc5a1bd233606af8ffff6312017845e 22 specifier: git+https://git.vulpes.one/git/iro-icons.git#b854aa0bfdc5a1bd233606af8ffff6312017845e
@@ -691,8 +691,8 @@ packages:
691 peerDependencies: 691 peerDependencies:
692 svg-sprite: ^2.0.2 692 svg-sprite: ^2.0.2
693 693
694 iro-sass@git+https://git.vulpes.one/git/iro-sass.git#9e2321a1730506c1973226fc254fa96df4f0dac9: 694 iro-sass@git+https://git.vulpes.one/git/iro-sass.git#04f8e9dbdc57a53f004e6238dfacc917bafdbbff:
695 resolution: {commit: 9e2321a1730506c1973226fc254fa96df4f0dac9, repo: https://git.vulpes.one/git/iro-sass.git, type: git} 695 resolution: {commit: 04f8e9dbdc57a53f004e6238dfacc917bafdbbff, repo: https://git.vulpes.one/git/iro-sass.git, type: git}
696 version: 1.0.2 696 version: 1.0.2
697 697
698 is-arrayish@0.2.1: 698 is-arrayish@0.2.1:
@@ -1923,7 +1923,7 @@ snapshots:
1923 dependencies: 1923 dependencies:
1924 svg-sprite: 2.0.4 1924 svg-sprite: 2.0.4
1925 1925
1926 iro-sass@git+https://git.vulpes.one/git/iro-sass.git#9e2321a1730506c1973226fc254fa96df4f0dac9: {} 1926 iro-sass@git+https://git.vulpes.one/git/iro-sass.git#04f8e9dbdc57a53f004e6238dfacc917bafdbbff: {}
1927 1927
1928 is-arrayish@0.2.1: {} 1928 is-arrayish@0.2.1: {}
1929 1929
diff --git a/src/_config.scss b/src/_config.scss
index be118b2..eb52b5a 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -6,7 +6,6 @@
6@use 'iro-sass/src/easing' as easing; 6@use 'iro-sass/src/easing' as easing;
7@use 'include-media/dist/include-media' as media; 7@use 'include-media/dist/include-media' as media;
8@use '@oddbird/blend'; 8@use '@oddbird/blend';
9@use 'functions/colors' as iro-colors;
10 9
11iro.$vars-root-size: 16px; 10iro.$vars-root-size: 16px;
12 11
@@ -31,65 +30,65 @@ $palette-precision: 0.01 !default;
31$palette-chroma-easing: 'ease' !default; 30$palette-chroma-easing: 'ease' !default;
32 31
33$static-colors: ( 32$static-colors: (
34 --base: hsl(0, 0%, 97%), 33 --base: hsl(0, 0%, 98%),
35 34
36 --contrasts: ( 35 --contrasts: (
37 --100: math.div( 1, 13) * 106 - 10, 36 --100: math.div( 0, 12) * 110 - 10,
38 --200: math.div( 2, 13) * 106 - 10, 37 --200: math.div( 1, 12) * 110 - 10,
39 --300: math.div( 3, 13) * 106 - 10, 38 --300: math.div( 2, 12) * 110 - 10,
40 --400: math.div( 4, 13) * 106 - 10, 39 --400: math.div( 3, 12) * 110 - 10,
41 --500: math.div( 5, 13) * 106 - 10, 40 --500: math.div( 4, 12) * 110 - 10,
42 --600: math.div( 6, 13) * 106 - 10, 41 --600: math.div( 5, 12) * 110 - 10,
43 --700: math.div( 7, 13) * 106 - 10, 42 --700: math.div( 6, 12) * 110 - 10,
44 --800: math.div( 8, 13) * 106 - 10, 43 --800: math.div( 7, 12) * 110 - 10,
45 --900: math.div( 9, 13) * 106 - 10, 44 --900: math.div( 8, 12) * 110 - 10,
46 --1000: math.div(10, 13) * 106 - 10, 45 --1000: math.div( 9, 12) * 110 - 10,
47 --1100: math.div(11, 13) * 106 - 10, 46 --1100: math.div(10, 12) * 110 - 10,
48 --1200: math.div(12, 13) * 106 - 10, 47 --1200: math.div(11, 12) * 110 - 10,
49 --1300: math.div(13, 13) * 106 - 10, 48 --1300: math.div(12, 12) * 110 - 10,
50 ), 49 ),
51 50
52 --palettes: ( 51 --palettes: (
53 --blue: iro-colors.oklch(56% 0.14 265.25), 52 --blue: oklch(56% 0.14 265.25),
54 --purple: iro-colors.oklch(56% 0.14 305.58), 53 --purple: oklch(56% 0.14 305.58),
55 --red: iro-colors.oklch(56% 0.14 18.69), 54 --red: oklch(56% 0.14 18.69),
56 --green: iro-colors.oklch(56% 0.14 150.48), 55 --green: oklch(56% 0.14 150.48),
57 --yellow: iro-colors.oklch(56% 0.14 84.08), 56 --yellow: oklch(56% 0.14 84.08),
58 ), 57 ),
59) !default; 58) !default;
60 59
61$theme-light: ( 60$theme-light: (
62 --contrasts: ( 61 --contrasts: (
63 --grays: ( 62 --grays: (
64 --50: -10, 63 --50: -8,
65 --75: -5, 64 --75: -4,
66 --100: 0, 65 --100: 0,
67 66
68 --200: easing.cubic-bezier(.3, .1, .7, .9, math.div(1, 8)) * 106, 67 --200: easing.cubic-bezier(.2, .1, .7, .95, math.div(1, 8)) * 106,
69 --300: easing.cubic-bezier(.3, .1, .7, .9, math.div(2, 8)) * 106, 68 --300: easing.cubic-bezier(.2, .1, .7, .95, math.div(2, 8)) * 106,
70 --400: easing.cubic-bezier(.3, .1, .7, .9, math.div(3, 8)) * 106, 69 --400: easing.cubic-bezier(.2, .1, .7, .95, math.div(3, 8)) * 106,
71 70
72 --500: easing.cubic-bezier(.3, .1, .7, .9, math.div(4, 8)) * 106, 71 --500: easing.cubic-bezier(.2, .1, .7, .95, math.div(4, 8)) * 106,
73 --600: easing.cubic-bezier(.3, .1, .7, .9, math.div(5, 8)) * 106, 72 --600: easing.cubic-bezier(.2, .1, .7, .95, math.div(5, 8)) * 106,
74 --700: easing.cubic-bezier(.3, .1, .7, .9, math.div(6, 8)) * 106, 73 --700: easing.cubic-bezier(.2, .1, .7, .95, math.div(6, 8)) * 106,
75 --800: easing.cubic-bezier(.3, .1, .7, .9, math.div(7, 8)) * 106, 74 --800: easing.cubic-bezier(.2, .1, .7, .95, math.div(7, 8)) * 106,
76 --900: easing.cubic-bezier(.3, .1, .7, .9, math.div(8, 8)) * 106, 75 --900: easing.cubic-bezier(.2, .1, .7, .95, math.div(8, 8)) * 106,
77 ), 76 ),
78 77
79 --colors: ( 78 --colors: (
80 --100: math.div( 0, 13) * 100 + 5, 79 --100: math.div( 0, 12) * 95 + 5,
81 --200: math.div( 1, 13) * 100 + 5, 80 --200: math.div( 1, 12) * 95 + 5,
82 --300: math.div( 2, 13) * 100 + 5, 81 --300: math.div( 2, 12) * 95 + 5,
83 --400: math.div( 3, 13) * 100 + 5, 82 --400: math.div( 3, 12) * 95 + 5,
84 --500: math.div( 4, 13) * 100 + 5, 83 --500: math.div( 4, 12) * 95 + 5,
85 --600: math.div( 5, 13) * 100 + 5, 84 --600: math.div( 5, 12) * 95 + 5,
86 --700: math.div( 6, 13) * 100 + 5, 85 --700: math.div( 6, 12) * 95 + 5,
87 --800: math.div( 7, 13) * 100 + 5, 86 --800: math.div( 7, 12) * 95 + 5,
88 --900: math.div( 8, 13) * 100 + 5, 87 --900: math.div( 8, 12) * 95 + 5,
89 --1000: math.div( 9, 13) * 100 + 5, 88 --1000: math.div( 9, 12) * 95 + 5,
90 --1100: math.div(10, 13) * 100 + 5, 89 --1100: math.div(10, 12) * 95 + 5,
91 --1200: math.div(11, 13) * 100 + 5, 90 --1200: math.div(11, 12) * 95 + 5,
92 --1300: math.div(12, 13) * 100 + 5, 91 --1300: math.div(12, 12) * 95 + 5,
93 ), 92 ),
94 ), 93 ),
95 94
@@ -99,12 +98,12 @@ $theme-light: (
99 ), 98 ),
100 99
101 --palettes: ( 100 --palettes: (
102 --base: hsl(0, 0%, 97%) --grays --full, 101 --base: hsl(0, 0%, 98%) --grays --full,
103 --blue: iro-colors.oklch(56% 0.14 265.25) --colors --muted, 102 --blue: oklch(56% 0.16 265.25) --colors --muted,
104 --purple: iro-colors.oklch(56% 0.14 305.58) --colors --muted, 103 --purple: oklch(56% 0.16 305.58) --colors --muted,
105 --red: iro-colors.oklch(56% 0.14 18.69) --colors --muted, 104 --red: oklch(56% 0.16 18.69) --colors --muted,
106 --green: iro-colors.oklch(56% 0.14 150.48) --colors --muted, 105 --green: oklch(56% 0.16 150.48) --colors --muted,
107 --yellow: iro-colors.oklch(56% 0.14 84.08) --colors --muted, 106 --yellow: oklch(56% 0.16 84.08) --colors --muted,
108 ), 107 ),
109 108
110 --semantic: ( 109 --semantic: (
@@ -143,46 +142,46 @@ $theme-dark: (
143 --75: 1.5, 142 --75: 1.5,
144 --100: 0, 143 --100: 0,
145 144
146 --200: easing.cubic-bezier(.5, .1, .7, .8, math.div(1, 8)) * -108, 145 --200: easing.cubic-bezier(.3, .1, .7, .8, math.div(1, 8)) * -108,
147 --300: easing.cubic-bezier(.5, .1, .7, .8, math.div(2, 8)) * -108, 146 --300: easing.cubic-bezier(.3, .1, .7, .8, math.div(2, 8)) * -108,
148 --400: easing.cubic-bezier(.5, .1, .7, .8, math.div(3, 8)) * -108, 147 --400: easing.cubic-bezier(.3, .1, .7, .8, math.div(3, 8)) * -108,
149 148
150 --500: easing.cubic-bezier(.5, .1, .7, .8, math.div(4, 8)) * -108, 149 --500: easing.cubic-bezier(.3, .1, .7, .8, math.div(4, 8)) * -108,
151 --600: easing.cubic-bezier(.5, .1, .7, .8, math.div(5, 8)) * -108, 150 --600: easing.cubic-bezier(.3, .1, .7, .8, math.div(5, 8)) * -108,
152 --700: easing.cubic-bezier(.5, .1, .7, .8, math.div(6, 8)) * -108, 151 --700: easing.cubic-bezier(.3, .1, .7, .8, math.div(6, 8)) * -108,
153 --800: easing.cubic-bezier(.5, .1, .7, .8, math.div(7, 8)) * -108, 152 --800: easing.cubic-bezier(.3, .1, .7, .8, math.div(7, 8)) * -108,
154 --900: easing.cubic-bezier(.5, .1, .7, .8, math.div(8, 8)) * -108, 153 --900: easing.cubic-bezier(.3, .1, .7, .8, math.div(8, 8)) * -108,
155 ), 154 ),
156 155
157 --colors: ( 156 --colors: (
158 --100: math.div( 0, 13) * -110 - 5, 157 --100: math.div( 0, 12) * -100 - 5,
159 --200: math.div( 1, 13) * -110 - 5, 158 --200: math.div( 1, 12) * -100 - 5,
160 --300: math.div( 2, 13) * -110 - 5, 159 --300: math.div( 2, 12) * -100 - 5,
161 --400: math.div( 3, 13) * -110 - 5, 160 --400: math.div( 3, 12) * -100 - 5,
162 --500: math.div( 4, 13) * -110 - 5, 161 --500: math.div( 4, 12) * -100 - 5,
163 --600: math.div( 5, 13) * -110 - 5, 162 --600: math.div( 5, 12) * -100 - 5,
164 --700: math.div( 6, 13) * -110 - 5, 163 --700: math.div( 6, 12) * -100 - 5,
165 --800: math.div( 7, 13) * -110 - 5, 164 --800: math.div( 7, 12) * -100 - 5,
166 --900: math.div( 8, 13) * -110 - 5, 165 --900: math.div( 8, 12) * -100 - 5,
167 --1000: math.div( 9, 13) * -110 - 5, 166 --1000: math.div( 9, 12) * -100 - 5,
168 --1100: math.div(10, 13) * -110 - 5, 167 --1100: math.div(10, 12) * -100 - 5,
169 --1200: math.div(11, 13) * -110 - 5, 168 --1200: math.div(11, 12) * -100 - 5,
170 --1300: math.div(12, 13) * -110 - 5, 169 --1300: math.div(12, 12) * -100 - 5,
171 ), 170 ),
172 ), 171 ),
173 172
174 --ranges: ( 173 --ranges: (
175 --full: 1, 174 --full: 1,
176 --muted: .4, 175 --muted: .3,
177 ), 176 ),
178 177
179 --palettes: ( 178 --palettes: (
180 --base: hsl(0, 0%, 19%) --grays --full, 179 --base: hsl(0, 0%, 20%) --grays --full,
181 --blue: iro-colors.oklch(56% 0.14 265.25) --colors --muted, 180 --blue: oklch(56% 0.16 265.25) --colors --muted,
182 --purple: iro-colors.oklch(56% 0.14 305.58) --colors --muted, 181 --purple: oklch(56% 0.16 305.58) --colors --muted,
183 --red: iro-colors.oklch(56% 0.14 18.69) --colors --muted, 182 --red: oklch(56% 0.16 18.69) --colors --muted,
184 --green: iro-colors.oklch(56% 0.14 150.48) --colors --muted, 183 --green: oklch(56% 0.16 150.48) --colors --muted,
185 --yellow: iro-colors.oklch(56% 0.14 84.08) --colors --muted, 184 --yellow: oklch(56% 0.16 84.08) --colors --muted,
186 ), 185 ),
187 186
188 --semantic: ( 187 --semantic: (
diff --git a/src/_functions.scss b/src/_functions.scss
index 9c29285..0c04f1d 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -67,63 +67,11 @@
67 @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05; 67 @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05;
68} 68}
69 69
70@function palette-old($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) {
71 $chroma-range: 1 - $chroma-range;
72
73 $palette: ();
74
75 @if list.nth(list.nth($contrasts, 1), 2) > list.nth(list.nth($contrasts, list.length($contrasts)), 2) {
76 $contrasts: iro.fn-list-reverse($contrasts);
77 }
78
79 $reference-lightness: blend.lightness($reference-color);
80 $i: 0;
81
82 @while $i <= 1 {
83 $l: $i * 200% - 100%;
84 $c: 0%;
85
86 @if $chroma-range != 0 {
87 $c: $i * 2 - 1;
88 $c: if(
89 $reference-lightness >= 50%,
90 math.clamp(0, $c, 1),
91 math.clamp(0, -1 * $c, 1)
92 );
93 $c: $chroma-range * $c * -100%;
94 }
95
96 $palette: list.append($palette, blend.scale($base-color, $l: $l, $c: $c));
97
98 $i: $i + config.$palette-precision;
99 }
100
101 $palette: multi-contrast($base-color, $palette, $contrasts, $reference-color);
102
103 @each $key, $color in $palette {
104 $palette: map.set($palette, #{$key}-text, blend.contrast($color))
105 }
106
107 @return $palette;
108}
109
110@function palette($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) { 70@function palette($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) {
111 $base-lch: blend-convert.Lab_to_LCH( 71 $base-lch: iro-colors.parse-oklch($base-color);
112 iro-colors.lin_sRGB_to_Oklab( 72 $ref-lch: iro-colors.parse-oklch($reference-color);
113 blend-convert.lin_sRGB( 73 $ref-l: list.nth($ref-lch, 1);
114 blend-convert.sassToRgb($base-color) 74 $ref-y: iro-colors.apca_sRGB_to_Y($reference-color);
115 )
116 )
117 );
118 $ref-lch: blend-convert.Lab_to_LCH(
119 iro-colors.lin_sRGB_to_Oklab(
120 blend-convert.lin_sRGB(
121 blend-convert.sassToRgb($reference-color)
122 )
123 )
124 );
125 $ref-l: list.nth($ref-lch, 1);
126 $ref-y: iro-colors.apca_sRGB_to_Y($reference-color);
127 75
128 $cmax: math.max(map.values($contrasts)...); 76 $cmax: math.max(map.values($contrasts)...);
129 $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...))); 77 $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...)));
@@ -131,10 +79,10 @@
131 $black-y: iro-colors.apca_sRGB_to_Y(#000); 79 $black-y: iro-colors.apca_sRGB_to_Y(#000);
132 $white-y: iro-colors.apca_sRGB_to_Y(#fff); 80 $white-y: iro-colors.apca_sRGB_to_Y(#fff);
133 81
134 $palette: ();
135
136 $chroma-easing: meta.get-function(config.$palette-chroma-easing, $module: easing); 82 $chroma-easing: meta.get-function(config.$palette-chroma-easing, $module: easing);
137 83
84 $palette: ();
85
138 @each $key, $contrast in $contrasts { 86 @each $key, $contrast in $contrasts {
139 //$i: math.div(list.length($palette), 2 * (list.length($contrasts) - 1)); 87 //$i: math.div(list.length($palette), 2 * (list.length($contrasts) - 1));
140 $y: iro-colors.apcaReverse($contrast, $ref-y); 88 $y: iro-colors.apcaReverse($contrast, $ref-y);
diff --git a/src/functions/_colors.scss b/src/functions/colors/_apca.scss
index d3c0035..d9236b2 100644
--- a/src/functions/_colors.scss
+++ b/src/functions/colors/_apca.scss
@@ -5,9 +5,6 @@
5@use 'sass:list'; 5@use 'sass:list';
6@use 'sass:map'; 6@use 'sass:map';
7@use 'sass:math'; 7@use 'sass:math';
8@use 'sass:meta';
9@use '@oddbird/blend/sass/convert' as blend-convert;
10@use '@oddbird/blend/sass/utils/pow';
11 8
12$SA98G: ( 9$SA98G: (
13 mainTRC: 2.4, 10 mainTRC: 2.4,
@@ -36,56 +33,6 @@ $SA98G: (
36 mOffsetOut: 0.3128657958707580, 33 mOffsetOut: 0.3128657958707580,
37); 34);
38 35
39@function lin_sRGB_to_Oklab($color) {
40 $r_: list.nth($color, 1);
41 $g_: list.nth($color, 2);
42 $b_: list.nth($color, 3);
43
44 $l: pow.cbrt(0.4122214708 * $r_ + 0.5363325363 * $g_ + 0.0514459929 * $b_);
45 $m: pow.cbrt(0.2119034982 * $r_ + 0.6806995451 * $g_ + 0.1073969566 * $b_);
46 $s: pow.cbrt(0.0883024619 * $r_ + 0.2817188376 * $g_ + 0.6299787005 * $b_);
47
48 @return (
49 0.2104542553 * $l + 0.7936177850 * $m - 0.0040720468 * $s,
50 1.9779984951 * $l - 2.4285922050 * $m + 0.4505937099 * $s,
51 0.0259040371 * $l + 0.7827717662 * $m - 0.8086757660 * $s,
52 );
53}
54
55@function Oklab_to_lin_sRGB($color) {
56 $l_: list.nth($color, 1);
57 $a_: list.nth($color, 2);
58 $b_: list.nth($color, 3);
59
60 $l: $l_ + 0.3963377774 * $a_ + 0.2158037573 * $b_;
61 $m: $l_ - 0.1055613458 * $a_ - 0.0638541728 * $b_;
62 $s: $l_ - 0.0894841775 * $a_ - 1.2914855480 * $b_;
63
64 $l: $l * $l * $l;
65 $m: $m * $m * $m;
66 $s: $s * $s * $s;
67
68 @return (
69 4.0767416621 * $l - 3.3077115913 * $m + 0.2309699292 * $s,
70 -1.2684380046 * $l + 2.6097574011 * $m - 0.3413193965 * $s,
71 -0.0041960863 * $l - 0.7034186147 * $m + 1.7076147010 * $s,
72 );
73}
74
75@function oklch($arg) {
76 $l: math.div(list.nth($arg, 1), 100%);
77 $c: list.nth($arg, 2);
78 $h: list.nth($arg, 3);
79
80 @return blend-convert.rgbToSass(
81 blend-convert.gam_sRGB(
82 Oklab_to_lin_sRGB(
83 blend-convert.LCH_to_Lab($l $c $h)
84 )
85 )
86 );
87}
88
89@function apca_sRGB_to_Y($color) { 36@function apca_sRGB_to_Y($color) {
90 @return map.get($SA98G, sRco) * math.pow(math.div(color.red($color), 255), map.get($SA98G, mainTRC)) + 37 @return map.get($SA98G, sRco) * math.pow(math.div(color.red($color), 255), map.get($SA98G, mainTRC)) +
91 map.get($SA98G, sGco) * math.pow(math.div(color.green($color), 255), map.get($SA98G, mainTRC)) + 38 map.get($SA98G, sGco) * math.pow(math.div(color.green($color), 255), map.get($SA98G, mainTRC)) +
diff --git a/src/functions/colors/_index.scss b/src/functions/colors/_index.scss
new file mode 100644
index 0000000..26c3027
--- /dev/null
+++ b/src/functions/colors/_index.scss
@@ -0,0 +1,2 @@
1@forward 'apca';
2@forward 'oklch';
diff --git a/src/functions/colors/_oklch.scss b/src/functions/colors/_oklch.scss
new file mode 100644
index 0000000..e3df041
--- /dev/null
+++ b/src/functions/colors/_oklch.scss
@@ -0,0 +1,88 @@
1/* stylelint-disable scss/dollar-variable-pattern */
2/* stylelint-disable scss/at-function-pattern */
3
4@use 'sass:list';
5@use 'sass:math';
6@use 'sass:meta';
7@use 'sass:string';
8@use '@oddbird/blend/sass/convert' as blend-convert;
9@use '@oddbird/blend/sass/utils/pow';
10@use 'iro-sass/src/index' as iro;
11
12@function lin_sRGB_to_Oklab($color) {
13 $r_: list.nth($color, 1);
14 $g_: list.nth($color, 2);
15 $b_: list.nth($color, 3);
16
17 $l: pow.cbrt(0.4122214708 * $r_ + 0.5363325363 * $g_ + 0.0514459929 * $b_);
18 $m: pow.cbrt(0.2119034982 * $r_ + 0.6806995451 * $g_ + 0.1073969566 * $b_);
19 $s: pow.cbrt(0.0883024619 * $r_ + 0.2817188376 * $g_ + 0.6299787005 * $b_);
20
21 @return (
22 0.2104542553 * $l + 0.7936177850 * $m - 0.0040720468 * $s,
23 1.9779984951 * $l - 2.4285922050 * $m + 0.4505937099 * $s,
24 0.0259040371 * $l + 0.7827717662 * $m - 0.8086757660 * $s,
25 );
26}
27
28@function Oklab_to_lin_sRGB($color) {
29 $l_: list.nth($color, 1);
30 $a_: list.nth($color, 2);
31 $b_: list.nth($color, 3);
32
33 $l: $l_ + 0.3963377774 * $a_ + 0.2158037573 * $b_;
34 $m: $l_ - 0.1055613458 * $a_ - 0.0638541728 * $b_;
35 $s: $l_ - 0.0894841775 * $a_ - 1.2914855480 * $b_;
36
37 $l: $l * $l * $l;
38 $m: $m * $m * $m;
39 $s: $s * $s * $s;
40
41 @return (
42 4.0767416621 * $l - 3.3077115913 * $m + 0.2309699292 * $s,
43 -1.2684380046 * $l + 2.6097574011 * $m - 0.3413193965 * $s,
44 -0.0041960863 * $l - 0.7034186147 * $m + 1.7076147010 * $s,
45 );
46}
47
48@function oklch($arg) {
49 $l: math.div(list.nth($arg, 1), 100%);
50 $c: list.nth($arg, 2);
51 $h: list.nth($arg, 3);
52
53 @return blend-convert.rgbToSass(
54 blend-convert.gam_sRGB(
55 Oklab_to_lin_sRGB(
56 blend-convert.LCH_to_Lab($l $c $h)
57 )
58 )
59 );
60}
61
62@function parse-oklch($color) {
63 @if meta.type-of($color) == 'color' {
64 @return blend-convert.Lab_to_LCH(
65 lin_sRGB_to_Oklab(
66 blend-convert.lin_sRGB(
67 blend-convert.sassToRgb($color)
68 )
69 )
70 );
71 }
72
73 @if meta.type-of($color) != 'string' {
74 @return null;
75 }
76
77 @if string.slice($color, 1, 6) == 'oklch(' {
78 $args: string.split(string.slice($color, 7, -2), ' ');
79
80 $l: math.div(iro.fn-to-number(list.nth($args, 1)), 100%);
81 $c: iro.fn-to-number(list.nth($args, 2));
82 $h: iro.fn-to-number(list.nth($args, 3));
83
84 @return $l $c $h;
85 }
86
87 @return null;
88}
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 8e9e64c..e56b10e 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -202,6 +202,14 @@
202 &::before { 202 &::before {
203 background-color: fn.color(--key-focus --box-bg); 203 background-color: fn.color(--key-focus --box-bg);
204 } 204 }
205
206 &::after {
207 border-color: fn.color(--key-focus --box-bg);
208 }
209
210 @include iro.bem-elem('check-icon') {
211 color: fn.color(--key-focus --box-bg);
212 }
205 } 213 }
206 } 214 }
207 } 215 }
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 04c809e..37108ab 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -69,13 +69,13 @@
69 --outline: fn.global-color(--focus-static --400), 69 --outline: fn.global-color(--focus-static --400),
70 ), 70 ),
71 --error: ( 71 --error: (
72 --border: fn.global-color(--negative --900), 72 --border: fn.global-color(--negative --700),
73 73
74 --hover: ( 74 --hover: (
75 --border: fn.global-color(--negative --800), 75 --border: fn.global-color(--negative --900),
76 ), 76 ),
77 --focus: ( 77 --focus: (
78 --border: fn.global-color(--negative --800), 78 --border: fn.global-color(--negative --900),
79 ), 79 ),
80 ), 80 ),
81 --disabled: ( 81 --disabled: (
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
index 0ff3a2c..4df711b 100644
--- a/src/scopes/_code.scss
+++ b/src/scopes/_code.scss
@@ -18,7 +18,7 @@
18 ), 18 ),
19 --colors: ( 19 --colors: (
20 --inline: ( 20 --inline: (
21 --fg: fn.global-color(--red --1100), 21 --fg: fn.global-color(--red --1200),
22 --bg: fn.global-color(--red --200), 22 --bg: fn.global-color(--red --200),
23 ), 23 ),
24 --block: ( 24 --block: (
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 07:44:08 +0000