summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-10-25 19:04:07 +0200
committerVolpeon <git@volpeon.ink>2024-10-25 19:04:07 +0200
commit4c88538c4d267de7cd21cc29c07e7c8360145441 (patch)
treed2443b1bf715634511e7dc69a79d99da6734601e
parentAdd gapless modifier to split view (diff)
downloadiro-design-4c88538c4d267de7cd21cc29c07e7c8360145441.tar.gz
iro-design-4c88538c4d267de7cd21cc29c07e7c8360145441.tar.bz2
iro-design-4c88538c4d267de7cd21cc29c07e7c8360145441.zip
New palette generation
-rw-r--r--src/_config.defaults.scss138
-rw-r--r--src/_config.scss2
-rw-r--r--src/_core.vars.scss7
-rw-r--r--src/_functions.scss44
-rw-r--r--src/objects/_palette.scss20
5 files changed, 94 insertions, 117 deletions
diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss
index 60f0c34..f2dd420 100644
--- a/src/_config.defaults.scss
+++ b/src/_config.defaults.scss
@@ -3,12 +3,10 @@
3@use 'sass:math'; 3@use 'sass:math';
4@use 'iro-sass/src/easing' as easing; 4@use 'iro-sass/src/easing' as easing;
5 5
6$palette-chroma-easing: 'ease';
7
8$static-colors: ( 6$static-colors: (
9 --base: hsl(0, 0%, 98%), 7 --base: hsl(0, 0%, 98%),
10 8
11 --contrasts: ( 9 --levels: (
12 --100: math.div(0, 12) * 110 - 10, 10 --100: math.div(0, 12) * 110 - 10,
13 --200: math.div(1, 12) * 110 - 10, 11 --200: math.div(1, 12) * 110 - 10,
14 --300: math.div(2, 12) * 110 - 10, 12 --300: math.div(2, 12) * 110 - 10,
@@ -79,52 +77,47 @@ $semantic-colors-common: (
79); 77);
80 78
81$theme-light: ( 79$theme-light: (
82 --contrasts: ( 80 --levels: (
83 --grays: ( 81 --grays: (
84 --50: -8, 82 --50: (-8) (.2 + .8 * easing.ease(math.div(0, 12))),
85 --75: -4, 83 --75: (-4) (.2 + .8 * easing.ease(math.div(1, 12))),
86 --100: 0, 84 --100: (0) (.2 + .8 * easing.ease(math.div(2, 12))),
87 85
88 --200: easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98, 86 --200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))),
89 --300: easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98, 87 --300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))),
90 --400: easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98, 88 --400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))),
91 89
92 --500: easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98, 90 --500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))),
93 --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98, 91 --600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))),
94 --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98, 92 --700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))),
95 --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98, 93 --800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))),
96 --900: 106, 94 --900: (106) (.2 + .8 * easing.ease(math.div(10, 12))),
97 ), 95 ),
98 96
99 --colors: ( 97 --colors: (
100 --100: math.div(0, 12) * 96 + 5, 98 --100: (math.div(0, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(0, 12))),
101 --200: math.div(1, 12) * 96 + 5, 99 --200: (math.div(1, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(1, 12))),
102 --300: math.div(2, 12) * 96 + 5, 100 --300: (math.div(2, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(2, 12))),
103 --400: math.div(3, 12) * 96 + 5, 101 --400: (math.div(3, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(3, 12))),
104 --500: math.div(4, 12) * 96 + 5, 102 --500: (math.div(4, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(4, 12))),
105 --600: math.div(5, 12) * 96 + 5, 103 --600: (math.div(5, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(5, 12))),
106 --700: math.div(6, 12) * 96 + 5, 104 --700: (math.div(6, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(6, 12))),
107 --800: math.div(7, 12) * 96 + 5, 105 --800: (math.div(7, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(7, 12))),
108 --900: math.div(8, 12) * 96 + 5, 106 --900: (math.div(8, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(8, 12))),
109 --1000: math.div(9, 12) * 96 + 5, 107 --1000: (math.div(9, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(9, 12))),
110 --1100: math.div(10, 12) * 96 + 5, 108 --1100: (math.div(10, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(10, 12))),
111 --1200: math.div(11, 12) * 96 + 5, 109 --1200: (math.div(11, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(11, 12))),
112 --1300: math.div(12, 12) * 96 + 5, 110 --1300: (math.div(12, 12) * 96 + 5) (.2 + .8 * easing.ease(math.div(12, 12))),
113 ), 111 ),
114 ), 112 ),
115
116 --ranges: (
117 --full: .3,
118 --muted: .1,
119 ),
120 113
121 --palettes: ( 114 --palettes: (
122 --base: hsl(260, 90%, 98%) --grays --full, 115 --base: hsl(260, 70%, 98%) --grays,
123 --blue: oklch(56% .16 275.25) --colors --muted, 116 --blue: oklch(56% .16 275.25) --colors,
124 --purple: oklch(56% .16 305.58) --colors --muted, 117 --purple: oklch(56% .16 305.58) --colors,
125 --red: oklch(56% .16 14.69) --colors --muted, 118 --red: oklch(56% .16 14.69) --colors,
126 --green: oklch(56% .16 150.48) --colors --muted, 119 --green: oklch(56% .16 150.48) --colors,
127 --yellow: oklch(56% .16 84.08) --colors --muted, 120 --yellow: oklch(56% .16 84.08) --colors,
128 ), 121 ),
129 122
130 --semantic: map.merge($semantic-colors-common, ( 123 --semantic: map.merge($semantic-colors-common, (
@@ -139,52 +132,47 @@ $theme-light: (
139); 132);
140 133
141$theme-dark: ( 134$theme-dark: (
142 --contrasts: ( 135 --levels: (
143 --grays: ( 136 --grays: (
144 --50: 4.4, 137 --50: (4.4) (.3 + .7 * easing.ease(math.div(10, 12))),
145 --75: 2.2, 138 --75: (2.2) (.3 + .7 * easing.ease(math.div(9, 12))),
146 --100: 0, 139 --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))),
147 140
148 --200: easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108, 141 --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))),
149 --300: easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108, 142 --300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))),
150 --400: easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108, 143 --400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))),
151 144
152 --500: easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108, 145 --500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))),
153 --600: easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108, 146 --600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))),
154 --700: easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108, 147 --700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))),
155 --800: easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108, 148 --800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))),
156 --900: easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108, 149 --900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))),
157 ), 150 ),
158 151
159 --colors: ( 152 --colors: (
160 --100: math.div(0, 12) * -100 - 5, 153 --100: (math.div(0, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(0, 12))),
161 --200: math.div(1, 12) * -100 - 5, 154 --200: (math.div(1, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(1, 12))),
162 --300: math.div(2, 12) * -100 - 5, 155 --300: (math.div(2, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(2, 12))),
163 --400: math.div(3, 12) * -100 - 5, 156 --400: (math.div(3, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(3, 12))),
164 --500: math.div(4, 12) * -100 - 5, 157 --500: (math.div(4, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(4, 12))),
165 --600: math.div(5, 12) * -100 - 5, 158 --600: (math.div(5, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(5, 12))),
166 --700: math.div(6, 12) * -100 - 5, 159 --700: (math.div(6, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(6, 12))),
167 --800: math.div(7, 12) * -100 - 5, 160 --800: (math.div(7, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(7, 12))),
168 --900: math.div(8, 12) * -100 - 5, 161 --900: (math.div(8, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(8, 12))),
169 --1000: math.div(9, 12) * -100 - 5, 162 --1000: (math.div(9, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(9, 12))),
170 --1100: math.div(10, 12) * -100 - 5, 163 --1100: (math.div(10, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(10, 12))),
171 --1200: math.div(11, 12) * -100 - 5, 164 --1200: (math.div(11, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(11, 12))),
172 --1300: math.div(12, 12) * -100 - 5, 165 --1300: (math.div(12, 12) * -100 - 5) (.3 + .7 * easing.ease(math.div(12, 12))),
173 ), 166 ),
174 ), 167 ),
175
176 --ranges: (
177 --full: 1,
178 --muted: .3,
179 ),
180 168
181 --palettes: ( 169 --palettes: (
182 --base: hsl(257, 7%, 19%) --grays --full, 170 --base: hsl(257, 7%, 19%) --grays,
183 --blue: oklch(56% .16 275.25) --colors --muted, 171 --blue: oklch(56% .16 275.25) --colors,
184 --purple: oklch(56% .16 305.58) --colors --muted, 172 --purple: oklch(56% .16 305.58) --colors,
185 --red: oklch(56% .16 14.69) --colors --muted, 173 --red: oklch(56% .16 14.69) --colors,
186 --green: oklch(56% .16 150.48) --colors --muted, 174 --green: oklch(56% .16 150.48) --colors,
187 --yellow: oklch(56% .16 84.08) --colors --muted, 175 --yellow: oklch(56% .16 84.08) --colors,
188 ), 176 ),
189 177
190 --semantic: map.merge($semantic-colors-common, ( 178 --semantic: map.merge($semantic-colors-common, (
diff --git a/src/_config.scss b/src/_config.scss
index e0ae933..284d6e7 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -4,8 +4,6 @@
4@use 'iro-sass/src/easing' as easing; 4@use 'iro-sass/src/easing' as easing;
5@use 'config.defaults' as def; 5@use 'config.defaults' as def;
6 6
7$palette-chroma-easing: def.$palette-chroma-easing !default;
8
9$static-colors-override: () !default; 7$static-colors-override: () !default;
10$static-colors: map.deep-merge(def.$static-colors, $static-colors-override) !default; 8$static-colors: map.deep-merge(def.$static-colors, $static-colors-override) !default;
11 9
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index a11cf42..60565c7 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -107,7 +107,7 @@ $list--compact-indent: props.def(--list--compact-indent, props.get($size--250))
107$-static-colors: (); 107$-static-colors: ();
108 108
109@each $palette-name, $palette in map.get(config.$static-colors, --palettes) { 109@each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
110 $palette: fn.palette($palette, map.get(config.$static-colors, --contrasts), 1, map.get(config.$static-colors, --base), config.$palette-chroma-easing); 110 $palette: fn.palette($palette, map.get(config.$static-colors, --levels), map.get(config.$static-colors, --base));
111 $-static-colors: map.merge($-static-colors, ( $palette-name: $palette )); 111 $-static-colors: map.merge($-static-colors, ( $palette-name: $palette ));
112} 112}
113 113
@@ -138,10 +138,9 @@ $themes: ();
138 138
139 @each $palette-name, $palette in map.get($variant, --palettes) { 139 @each $palette-name, $palette in map.get($variant, --palettes) {
140 $base-color: list.nth($palette, 1); 140 $base-color: list.nth($palette, 1);
141 $contrasts: list.nth($palette, 2); 141 $levels: list.nth($palette, 2);
142 $ranges: list.nth($palette, 3);
143 142
144 $palette: fn.palette($base-color, map.get($variant, --contrasts, $contrasts), map.get($variant, --ranges, $ranges), list.nth(map.get($variant, --palettes, --base), 1), config.$palette-chroma-easing); 143 $palette: fn.palette($base-color, map.get($variant, --levels, $levels), list.nth(map.get($variant, --palettes, --base), 1));
145 $compiled: props.merge($compiled, ( $palette-name: $palette )); 144 $compiled: props.merge($compiled, ( $palette-name: $palette ));
146 } 145 }
147 146
diff --git a/src/_functions.scss b/src/_functions.scss
index 27b850c..62caf8c 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -7,49 +7,41 @@
7@use 'iro-sass/src/easing'; 7@use 'iro-sass/src/easing';
8@use 'apca'; 8@use 'apca';
9 9
10@function palette($base-color, $contrasts, $chroma-range: 1, $ref-color: $base-color, $chroma-easing: 'ease') { 10@function palette($base-color, $levels, $ref-color: $base-color) {
11 $base-lch: color.to-space($base-color, oklch); 11 $base-lch: color.to-space($base-color, oklch);
12 $ref-lch: color.to-space($ref-color, oklch); 12 $ref-lch: color.to-space($ref-color, oklch);
13 13
14 $ref-l: color.channel($ref-lch, 'lightness'); 14 $ref-l: color.channel($ref-lch, 'lightness');
15 $ref-y: apca.sRGB_to_Y($ref-lch); 15 $ref-y: apca.sRGB_to_Y($ref-lch);
16 16
17 $cmax: math.max(map.values($contrasts)...);
18 $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...)));
19
20 $black-y: apca.sRGB_to_Y(#000); 17 $black-y: apca.sRGB_to_Y(#000);
21 $white-y: apca.sRGB_to_Y(#fff); 18 $white-y: apca.sRGB_to_Y(#fff);
22 19
23 $chroma-inv: false;
24 @if $chroma-range < 0 {
25 $chroma-inv: true;
26 $chroma-range: -1 * $chroma-range;
27 }
28 $chroma-easing: meta.get-function($chroma-easing, $module: easing);
29
30 $palette: (); 20 $palette: ();
31 21
32 @each $key, $contrast in $contrasts { 22 @each $key, $level in $levels {
33 $y: apca.reverse($contrast, $ref-y); 23 $color: list.nth($level, 1);
34 $l: color.channel($base-lch, 'lightness'); 24 $y: 0;
35 $c: 1; 25 $c: 1;
36 26
37 @if $y != false { 27 @if list.length($level) > 1 {
38 $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch); 28 $c: list.nth($level, 2);
39 } @else {
40 $y: $ref-y;
41 } 29 }
42 30
43 @if $chroma-range != 1 { 31 @if meta.type-of($color) != 'color' {
44 $c: if($ref-l > 50%, math.clamp(0, math.div($contrast, $cmax), 1), -1 * math.clamp(-1, math.div($contrast, $cmax), 0)); 32 $y: apca.reverse($color, $ref-y);
45 @if $chroma-inv { 33 $l: color.channel($base-lch, 'lightness');
46 $c: 1 - $c; 34
35 @if $y != false {
36 $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch);
37 } @else {
38 $y: $ref-y;
47 } 39 }
48 $c: meta.call($chroma-easing, $c);
49 $c: $chroma-range + (1 - $chroma-range) * $c;
50 }
51 40
52 $color: oklch($l ($c * color.channel($base-lch, 'chroma')) color.channel($base-lch, 'hue')); 41 $color: oklch($l ($c * color.channel($base-lch, 'chroma')) color.channel($base-lch, 'hue'));
42 } @else {
43 $y: apca.sRGB_to_Y($color);
44 }
53 45
54 $contrast-black: apca.contrast($black-y, $y); 46 $contrast-black: apca.contrast($black-y, $y);
55 $contrast-white: apca.contrast($white-y, $y); 47 $contrast-white: apca.contrast($white-y, $y);
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index 6fbe153..8a6cdb2 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -14,11 +14,11 @@
14 @include bem.elem('item') { 14 @include bem.elem('item') {
15 flex: 1 1 auto; 15 flex: 1 1 auto;
16 16
17 $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base); 17 $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base);
18 $contrasts: map.get(config.$themes, config.$theme-default, light, --contrasts, list.nth($palette, 2)); 18 $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2));
19 19
20 @for $i from 1 through list.length($contrasts) { 20 @for $i from 1 through list.length($levels) {
21 $key: list.nth(map.keys($contrasts), $i); 21 $key: list.nth(map.keys($levels), $i);
22 22
23 &:nth-child(#{$i}) { 23 &:nth-child(#{$i}) {
24 background-color: props.get(core.$theme, --base, $key); 24 background-color: props.get(core.$theme, --base, $key);
@@ -27,12 +27,12 @@
27 } 27 }
28 28
29 @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) { 29 @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) {
30 $contrasts: map.get(config.$themes, config.$theme-default, light, --contrasts, list.nth($palette, 2)); 30 $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2));
31 31
32 @include bem.modifier(string.slice($palette-name, 3)) { 32 @include bem.modifier(string.slice($palette-name, 3)) {
33 @include bem.elem('item') { 33 @include bem.elem('item') {
34 @for $i from 1 through list.length($contrasts) { 34 @for $i from 1 through list.length($levels) {
35 $key: list.nth(map.keys($contrasts), $i); 35 $key: list.nth(map.keys($levels), $i);
36 36
37 &:nth-child(#{$i}) { 37 &:nth-child(#{$i}) {
38 background-color: props.get(core.$theme, $palette-name, $key); 38 background-color: props.get(core.$theme, $palette-name, $key);
@@ -44,12 +44,12 @@
44 44
45 @include bem.modifier('static') { 45 @include bem.modifier('static') {
46 @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { 46 @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
47 $contrasts: map.get(config.$static-colors, --contrasts); 47 $levels: map.get(config.$static-colors, --levels);
48 48
49 @include bem.modifier(string.slice($palette-name, 3)) { 49 @include bem.modifier(string.slice($palette-name, 3)) {
50 @include bem.elem('item') { 50 @include bem.elem('item') {
51 @for $i from 1 through list.length($contrasts) { 51 @for $i from 1 through list.length($levels) {
52 $key: list.nth(map.keys($contrasts), $i); 52 $key: list.nth(map.keys($levels), $i);
53 53
54 &:nth-child(#{$i}) { 54 &:nth-child(#{$i}) {
55 background-color: props.get(core.$theme, #{$palette-name}-static, $key); 55 background-color: props.get(core.$theme, #{$palette-name}-static, $key);