summaryrefslogtreecommitdiffstats
path: root/src/_config.scss
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 /src/_config.scss
parentUpdate (diff)
downloadiro-design-f1c517da618ba92e537e8e4856203fe988df8636.tar.gz
iro-design-f1c517da618ba92e537e8e4856203fe988df8636.tar.bz2
iro-design-f1c517da618ba92e537e8e4856203fe988df8636.zip
Update
Diffstat (limited to 'src/_config.scss')
-rw-r--r--src/_config.scss153
1 files changed, 76 insertions, 77 deletions
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: (
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-09-21 09:24:43 +0000