summaryrefslogtreecommitdiffstats
path: root/src/_config.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-22 10:39:48 +0200
committerVolpeon <git@volpeon.ink>2024-06-22 10:39:48 +0200
commit1e902449652213eb1feae5e61740cb9ce3b9d6e3 (patch)
tree1db6b07696d8f2acd138e7eed845718c1fb5237f /src/_config.scss
parentWIP: Refactoring (diff)
downloadiro-design-1e902449652213eb1feae5e61740cb9ce3b9d6e3.tar.gz
iro-design-1e902449652213eb1feae5e61740cb9ce3b9d6e3.tar.bz2
iro-design-1e902449652213eb1feae5e61740cb9ce3b9d6e3.zip
WIP: Refactoring
Diffstat (limited to 'src/_config.scss')
-rw-r--r--src/_config.scss214
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: (