diff options
-rw-r--r-- | package.json | 2 | ||||
-rw-r--r-- | pnpm-lock.yaml | 10 | ||||
-rw-r--r-- | src/_config.scss | 153 | ||||
-rw-r--r-- | src/_functions.scss | 64 | ||||
-rw-r--r-- | src/functions/colors/_apca.scss (renamed from src/functions/_colors.scss) | 53 | ||||
-rw-r--r-- | src/functions/colors/_index.scss | 2 | ||||
-rw-r--r-- | src/functions/colors/_oklch.scss | 88 | ||||
-rw-r--r-- | src/objects/_checkbox.scss | 8 | ||||
-rw-r--r-- | src/objects/_text-field.scss | 6 | ||||
-rw-r--r-- | src/scopes/_code.scss | 2 |
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 | ||
11 | iro.$vars-root-size: 16px; | 10 | iro.$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: ( |