summaryrefslogtreecommitdiffstats
path: root/src/_themes.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/_themes.scss')
-rw-r--r--src/_themes.scss283
1 files changed, 71 insertions, 212 deletions
diff --git a/src/_themes.scss b/src/_themes.scss
index ced2aa5..b460baf 100644
--- a/src/_themes.scss
+++ b/src/_themes.scss
@@ -1,214 +1,73 @@
1@use 'sass:list';
2@use 'sass:map'; 1@use 'sass:map';
3@use 'sass:math'; 2@use 'iro-sass/src/iro-sass' as iro;
4@use 'iro-sass/src/easing' as easing;
5@use 'include-media/dist/include-media' as media; 3@use 'include-media/dist/include-media' as media;
6 4@use 'props';
7$palette-chroma-easing: 'ease' !default; 5
8 6@use 'core.vars' as vars;
9$static-colors-override: () !default; 7@forward 'core.vars';
10$static-colors: map.deep-merge(( 8
11 --base: hsl(0, 0%, 98%), 9@mixin styles {
12 10 @include iro.bem-theme('base') {
13 --contrasts: ( 11 background-color: props.get(vars.$theme, --bg-base);
14 --100: math.div(0, 12) * 110 - 10, 12
15 --200: math.div(1, 12) * 110 - 10, 13 @include iro.bem-suffix('light') {
16 --300: math.div(2, 12) * 110 - 10, 14 @media (prefers-color-scheme: light) {
17 --400: math.div(3, 12) * 110 - 10, 15 background-color: props.get(vars.$theme, --bg-base);
18 --500: math.div(4, 12) * 110 - 10, 16 }
19 --600: math.div(5, 12) * 110 - 10, 17 }
20 --700: math.div(6, 12) * 110 - 10, 18
21 --800: math.div(7, 12) * 110 - 10, 19 @include iro.bem-suffix('dark') {
22 --900: math.div(8, 12) * 110 - 10, 20 @media (prefers-color-scheme: dark) {
23 --1000: math.div(9, 12) * 110 - 10, 21 background-color: props.get(vars.$theme, --bg-base);
24 --1100: math.div(10, 12) * 110 - 10, 22 }
25 --1200: math.div(11, 12) * 110 - 10, 23 }
26 --1300: math.div(12, 12) * 110 - 10, 24 }
27 ), 25
28 26 @include iro.bem-theme('l1') {
29 --palettes: ( 27 background-color: props.get(vars.$theme, --bg-l1);
30 --blue: oklch(56% .14 275.25), 28
31 --purple: oklch(56% .14 305.58), 29 @include iro.bem-suffix('light') {
32 --red: oklch(56% .14 14.69), 30 @media (prefers-color-scheme: light) {
33 --green: oklch(56% .14 150.48), 31 background-color: props.get(vars.$theme, --bg-l1);
34 --yellow: oklch(56% .14 84.08), 32 }
35 ), 33 }
36 34
37 --transparents: ( 35 @include iro.bem-suffix('dark') {
38 --100: 0, 36 @media (prefers-color-scheme: dark) {
39 --200: .1, 37 background-color: props.get(vars.$theme, --bg-l1);
40 --300: .25, 38 }
41 --400: .4, 39 }
42 --500: .55, 40 }
43 --600: .7, 41
44 --700: .8, 42 @include iro.bem-theme('l2') {
45 --800: .9, 43 background-color: props.get(vars.$theme, --bg-l2);
46 --900: 1, 44
47 ), 45 @include iro.bem-suffix('light') {
48), $static-colors-override) !default; 46 @media (prefers-color-scheme: light) {
49 47 background-color: props.get(vars.$theme, --bg-l2);
50$semantic-colors-common-override: () !default; 48 }
51$semantic-colors-common: map.deep-merge(( 49 }
52 --accent: --theme --blue, 50
53 --accent-static: --static --blue, 51 @include iro.bem-suffix('dark') {
54 --positive: --theme --green, 52 @media (prefers-color-scheme: dark) {
55 --positive-static: --static --green, 53 background-color: props.get(vars.$theme, --bg-l2);
56 --negative: --theme --red, 54 }
57 --negative-static: --static --red, 55 }
58 --warning: --theme --yellow, 56 }
59 --warning-static: --static --yellow, 57
60 58 @include iro.bem-theme('50') {
61 --focus-raw: --theme --accent, 59 background-color: props.get(vars.$theme, --base --50);
62 --focus-static: --theme --accent-static, 60
63 61 @include iro.bem-suffix('light') {
64 --border-mute: --theme --base --200, 62 @media (prefers-color-scheme: light) {
65 --border: --theme --base --300, 63 background-color: props.get(vars.$theme, --base --50);
66 --border-strong: --theme --base --400, 64 }
67 65 }
68 --text-disabled: --theme --base --500, 66
69 --text-mute-more: --theme --base --600, 67 @include iro.bem-suffix('dark') {
70 --text-mute: --theme --base --700, 68 @media (prefers-color-scheme: dark) {
71 --text: --theme --base --800, 69 background-color: props.get(vars.$theme, --base --50);
72 --heading: --theme --base --900, 70 }
73 71 }
74 --focus: ( 72 }
75 --outline: --theme --focus-raw --400, 73}
76 --border-mute: --theme --focus-raw --900,
77 --border: --theme --focus-raw --1000,
78 --border-text: --theme --focus-raw --1000-text,
79 --border-strong: --theme --focus-raw --1100,
80 --text: --theme --focus-raw --1100,
81 ),
82), $semantic-colors-common-override) !default;
83
84$theme-light-override: () !default;
85$theme-light: map.deep-merge((
86 --contrasts: (
87 --grays: (
88 --50: -8,
89 --75: -4,
90 --100: 0,
91
92 --200: easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98,
93 --300: easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98,
94 --400: easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98,
95
96 --500: easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98,
97 --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98,
98 --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98,
99 --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98,
100 --900: 106,
101 ),
102
103 --colors: (
104 --100: math.div(0, 12) * 96 + 5,
105 --200: math.div(1, 12) * 96 + 5,
106 --300: math.div(2, 12) * 96 + 5,
107 --400: math.div(3, 12) * 96 + 5,
108 --500: math.div(4, 12) * 96 + 5,
109 --600: math.div(5, 12) * 96 + 5,
110 --700: math.div(6, 12) * 96 + 5,
111 --800: math.div(7, 12) * 96 + 5,
112 --900: math.div(8, 12) * 96 + 5,
113 --1000: math.div(9, 12) * 96 + 5,
114 --1100: math.div(10, 12) * 96 + 5,
115 --1200: math.div(11, 12) * 96 + 5,
116 --1300: math.div(12, 12) * 96 + 5,
117 ),
118 ),
119
120 --ranges: (
121 --full: .3,
122 --muted: .1,
123 ),
124
125 --palettes: (
126 --base: hsl(260, 90%, 98%) --grays --full,
127 --blue: oklch(56% .16 275.25) --colors --muted,
128 --purple: oklch(56% .16 305.58) --colors --muted,
129 --red: oklch(56% .16 14.69) --colors --muted,
130 --green: oklch(56% .16 150.48) --colors --muted,
131 --yellow: oklch(56% .16 84.08) --colors --muted,
132 ),
133
134 --semantic: map.merge($semantic-colors-common, (
135 --bg-l2: --theme --base --50,
136 --bg-l1: --theme --base --100,
137 --bg-base: --theme --base --200,
138 )),
139
140 --constants: (
141 --shadow: rgba(#000, .15),
142 ),
143), $theme-light-override) !default;
144
145$theme-dark-override: () !default;
146$theme-dark: map.deep-merge((
147 --contrasts: (
148 --grays: (
149 --50: 4.4,
150 --75: 2.2,
151 --100: 0,
152
153 --200: easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108,
154 --300: easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108,
155 --400: easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108,
156
157 --500: easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108,
158 --600: easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108,
159 --700: easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108,
160 --800: easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108,
161 --900: easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108,
162 ),
163
164 --colors: (
165 --100: math.div(0, 12) * -100 - 5,
166 --200: math.div(1, 12) * -100 - 5,
167 --300: math.div(2, 12) * -100 - 5,
168 --400: math.div(3, 12) * -100 - 5,
169 --500: math.div(4, 12) * -100 - 5,
170 --600: math.div(5, 12) * -100 - 5,
171 --700: math.div(6, 12) * -100 - 5,
172 --800: math.div(7, 12) * -100 - 5,
173 --900: math.div(8, 12) * -100 - 5,
174 --1000: math.div(9, 12) * -100 - 5,
175 --1100: math.div(10, 12) * -100 - 5,
176 --1200: math.div(11, 12) * -100 - 5,
177 --1300: math.div(12, 12) * -100 - 5,
178 ),
179 ),
180
181 --ranges: (
182 --full: 1,
183 --muted: .3,
184 ),
185
186 --palettes: (
187 --base: hsl(257, 7%, 19%) --grays --full,
188 --blue: oklch(56% .16 275.25) --colors --muted,
189 --purple: oklch(56% .16 305.58) --colors --muted,
190 --red: oklch(56% .16 14.69) --colors --muted,
191 --green: oklch(56% .16 150.48) --colors --muted,
192 --yellow: oklch(56% .16 84.08) --colors --muted,
193 ),
194
195 --semantic: map.merge($semantic-colors-common, (
196 --bg-base: --theme --base --50,
197 --bg-l1: --theme --base --75,
198 --bg-l2: --theme --base --100,
199 )),
200
201 --constants: (
202 --shadow: rgba(#000, .5),
203 ),
204), $theme-dark-override) !default;
205
206$themes-override: () !default;
207$themes: map.deep-merge((
208 --main: (
209 light: $theme-light,
210 dark: $theme-dark,
211 )
212), $themes-override) !default;
213
214$theme-default: list.nth(map.keys($themes), 1) !default;
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-06 08:49:59 +0000