diff options
Diffstat (limited to 'src/_config.scss')
-rw-r--r-- | src/_config.scss | 214 |
1 files changed, 120 insertions, 94 deletions
diff --git a/src/_config.scss b/src/_config.scss index 08374fb..be01a69 100644 --- a/src/_config.scss +++ b/src/_config.scss | |||
@@ -26,115 +26,141 @@ res.$named-viewports: media.$breakpoints; | |||
26 | $palette-precision: 5 !default; | 26 | $palette-precision: 5 !default; |
27 | 27 | ||
28 | $theme-light: ( | 28 | $theme-light: ( |
29 | --base: hsl(0, 0%, 97%), | 29 | --contrasts: ( |
30 | --blue: blend.lch(48% 50 279), | 30 | --grays: ( |
31 | --purple: blend.lch(48% 50 308), | 31 | --50: 1.1, |
32 | --red: blend.lch(48% 50 23), | 32 | --75: 1.04, |
33 | --green: blend.lch(63% 50 147), | 33 | --100: 1, |
34 | --yellow: blend.lch(68% 50 70), | 34 | |
35 | 35 | --200: -1.15, | |
36 | --grays: ( | 36 | --300: -1.35, |
37 | --50: 1.1, | 37 | --400: -1.7, |
38 | --75: 1.04, | 38 | |
39 | --100: 1, | 39 | --500: -2.4, |
40 | 40 | --600: -3.3, | |
41 | --200: -1.15, | 41 | --700: -6, |
42 | --300: -1.35, | 42 | --800: -13, |
43 | --400: -1.7, | 43 | --900: -20, |
44 | 44 | ), | |
45 | --500: -2.4, | 45 | |
46 | --600: -3.3, | 46 | --colors: ( |
47 | --700: -6, | 47 | --100: -1.08, |
48 | --800: -13, | 48 | --200: -1.20, |
49 | --900: -20, | 49 | --300: -1.33, |
50 | --400: -1.58, | ||
51 | --500: -1.92, | ||
52 | --600: -2.39, | ||
53 | --700: -3.01, | ||
54 | --800: -3.87, | ||
55 | --900: -5.07, | ||
56 | --1000: -6.72, | ||
57 | --1100: -8.84, | ||
58 | --1200: -11.31, | ||
59 | --1300: -13.94, | ||
60 | ), | ||
50 | ), | 61 | ), |
51 | --colors: ( | 62 | |
52 | --100: -1.08, | 63 | --ranges: ( |
53 | --200: -1.20, | 64 | --full: 1, |
54 | --300: -1.33, | 65 | --muted: 0.8, |
55 | --400: -1.58, | 66 | ), |
56 | --500: -1.92, | 67 | |
57 | --600: -2.39, | 68 | --palettes: ( |
58 | --700: -3.01, | 69 | --base: hsl(0, 0%, 97%) --grays --full, |
59 | --800: -3.87, | 70 | --blue: blend.lch(48% 50 279) --colors --muted, |
60 | --900: -5.07, | 71 | --purple: blend.lch(48% 50 308) --colors --muted, |
61 | --1000: -6.72, | 72 | --red: blend.lch(48% 50 23) --colors --muted, |
62 | --1100: -8.84, | 73 | --green: blend.lch(63% 50 147) --colors --muted, |
63 | --1200: -11.31, | 74 | --yellow: blend.lch(68% 50 80) --colors --muted, |
64 | --1300: -13.94, | ||
65 | ), | 75 | ), |
66 | 76 | ||
67 | --accent: --blue, | 77 | --semantic-colors: ( |
78 | --accent: --blue, | ||
79 | --focus: --yellow-static, | ||
68 | 80 | ||
69 | --bg-l2: --50, | 81 | --bg-l2: --base --50, |
70 | --bg-l1: --100, | 82 | --bg-l1: --base --100, |
71 | --bg-base: --200, | 83 | --bg-base: --base --200, |
72 | 84 | ||
73 | --border-mute: --200, | 85 | --border-mute: --base --200, |
74 | --border: --300, | 86 | --border: --base --300, |
75 | --border-strong: --400, | 87 | --border-strong: --base --400, |
76 | 88 | ||
77 | --text-disabled: --500, | 89 | --text-disabled: --base --500, |
78 | --text-mute-more: --600, | 90 | --text-mute-more: --base --600, |
79 | --text-mute: --700, | 91 | --text-mute: --base --700, |
80 | --text: --800, | 92 | --text: --base --800, |
81 | --heading: --900, | 93 | --heading: --base --900, |
94 | ), | ||
82 | ) !default; | 95 | ) !default; |
83 | 96 | ||
84 | $theme-dark: ( | 97 | $theme-dark: ( |
85 | --base: hsl(0, 0%, 19%), | 98 | --contrasts: ( |
86 | --blue: blend.lch(48% 50 279), | 99 | --grays: ( |
87 | --purple: blend.lch(48% 50 308), | 100 | --50: -1.31, |
88 | --red: blend.lch(48% 50 23), | 101 | --75: -1.18, |
89 | --green: blend.lch(63% 50 147), | 102 | --100: 1, |
90 | --yellow: blend.lch(68% 50 70), | 103 | |
91 | 104 | --200: 1.15, | |
92 | --grays: ( | 105 | --300: 1.35, |
93 | --50: -1.31, | 106 | --400: 1.7, |
94 | --75: -1.18, | 107 | |
95 | --100: 1, | 108 | --500: 2.4, |
96 | 109 | --600: 3.3, | |
97 | --200: 1.15, | 110 | --700: 6, |
98 | --300: 1.35, | 111 | --800: 13, |
99 | --400: 1.7, | 112 | --900: 20, |
100 | 113 | ), | |
101 | --500: 2.4, | 114 | |
102 | --600: 3.3, | 115 | --colors: ( |
103 | --700: 6, | 116 | --100: 1.12, |
104 | --800: 13, | 117 | --200: 1.30, |
105 | --900: 20, | 118 | --300: 1.58, |
119 | --400: 1.96, | ||
120 | --500: 2.45, | ||
121 | --600: 3.09, | ||
122 | --700: 3.90, | ||
123 | --800: 4.85, | ||
124 | --900: 6.02, | ||
125 | --1000: 7.34, | ||
126 | --1100: 8.77, | ||
127 | --1200: 10.18, | ||
128 | --1300: 11.64, | ||
129 | ), | ||
106 | ), | 130 | ), |
107 | --colors: ( | 131 | |
108 | --100: 1.12, | 132 | --ranges: ( |
109 | --200: 1.30, | 133 | --full: 1, |
110 | --300: 1.58, | 134 | --muted: 0.8, |
111 | --400: 1.96, | 135 | ), |
112 | --500: 2.45, | 136 | |
113 | --600: 3.09, | 137 | --palettes: ( |
114 | --700: 3.90, | 138 | --base: hsl(0, 0%, 19%) --grays --full, |
115 | --800: 4.85, | 139 | --blue: blend.lch(48% 50 279) --colors --muted, |
116 | --900: 6.02, | 140 | --purple: blend.lch(48% 50 308) --colors --muted, |
117 | --1000: 7.34, | 141 | --red: blend.lch(48% 50 23) --colors --muted, |
118 | --1100: 8.77, | 142 | --green: blend.lch(63% 50 147) --colors --muted, |
119 | --1200: 10.18, | 143 | --yellow: blend.lch(68% 50 80) --colors --muted, |
120 | --1300: 11.64, | ||
121 | ), | 144 | ), |
122 | 145 | ||
123 | --accent: --blue, | 146 | --semantic-colors: ( |
147 | --accent: --blue, | ||
148 | --focus: --yellow-static, | ||
124 | 149 | ||
125 | --bg-base: --50, | 150 | --bg-base: --base --50, |
126 | --bg-l1: --75, | 151 | --bg-l1: --base --75, |
127 | --bg-l2: --100, | 152 | --bg-l2: --base --100, |
128 | 153 | ||
129 | --border-mute: --200, | 154 | --border-mute: --base --200, |
130 | --border: --300, | 155 | --border: --base --300, |
131 | --border-strong: --400, | 156 | --border-strong: --base --400, |
132 | 157 | ||
133 | --text-disabled: --500, | 158 | --text-disabled: --base --500, |
134 | --text-mute-more: --600, | 159 | --text-mute-more: --base --600, |
135 | --text-mute: --700, | 160 | --text-mute: --base --700, |
136 | --text: --800, | 161 | --text: --base --800, |
137 | --heading: --900, | 162 | --heading: --base --900, |
163 | ), | ||
138 | ) !default; | 164 | ) !default; |
139 | 165 | ||
140 | $themes: ( | 166 | $themes: ( |