Skip to content

Commit 5efaafe

Browse files
FirowMDFirowMD
committed
style(theme): update color palette from oklch to hex and adjust mappings
1 parent 6d7e3f6 commit 5efaafe

1 file changed

Lines changed: 135 additions & 135 deletions

File tree

‎src/firowtheme.css‎

Lines changed: 135 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -34,172 +34,172 @@
3434
--default-ring-width: 1px;
3535
--body-background-color: var(--color-surface-50);
3636
--body-background-color-dark: var(--color-surface-950);
37-
--color-primary-50: oklch(93.41% 0.04 2.54deg);
38-
--color-primary-100: oklch(85.63% 0.08 5.53deg);
39-
--color-primary-200: oklch(78.32% 0.13 6.9deg);
40-
--color-primary-300: oklch(72.11% 0.18 10.07deg);
41-
--color-primary-400: oklch(67.22% 0.22 13.54deg);
42-
--color-primary-500: oklch(64.22% 0.25 18.73deg);
43-
--color-primary-600: oklch(60.02% 0.23 18.64deg);
44-
--color-primary-700: oklch(55.8% 0.21 18.62deg);
45-
--color-primary-800: oklch(51.28% 0.19 18.02deg);
46-
--color-primary-900: oklch(46.89% 0.18 17.94deg);
47-
--color-primary-950: oklch(42.34% 0.16 17.7deg);
48-
--color-primary-contrast-dark: var(--color-primary-950);
49-
--color-primary-contrast-light: var(--color-primary-50);
37+
--color-primary-50: #fff9e8;
38+
--color-primary-100: #fff1cc;
39+
--color-primary-200: #ffe8ad;
40+
--color-primary-300: #ffdf8f;
41+
--color-primary-400: #ffd874;
42+
--color-primary-500: #ffd369;
43+
--color-primary-600: #e6be5f;
44+
--color-primary-700: #cca851;
45+
--color-primary-800: #aa8b42;
46+
--color-primary-900: #857036;
47+
--color-primary-950: #66572a;
48+
--color-primary-contrast-dark: #222831;
49+
--color-primary-contrast-light: #eeeeee;
5050
--color-primary-contrast-50: var(--color-primary-contrast-dark);
5151
--color-primary-contrast-100: var(--color-primary-contrast-dark);
5252
--color-primary-contrast-200: var(--color-primary-contrast-dark);
5353
--color-primary-contrast-300: var(--color-primary-contrast-dark);
5454
--color-primary-contrast-400: var(--color-primary-contrast-dark);
55-
--color-primary-contrast-500: var(--color-primary-contrast-light);
56-
--color-primary-contrast-600: var(--color-primary-contrast-light);
57-
--color-primary-contrast-700: var(--color-primary-contrast-light);
55+
--color-primary-contrast-500: var(--color-primary-contrast-dark);
56+
--color-primary-contrast-600: var(--color-primary-contrast-dark);
57+
--color-primary-contrast-700: var(--color-primary-contrast-dark);
5858
--color-primary-contrast-800: var(--color-primary-contrast-light);
5959
--color-primary-contrast-900: var(--color-primary-contrast-light);
6060
--color-primary-contrast-950: var(--color-primary-contrast-light);
61-
--color-secondary-50: oklch(91.53% 0.05 357.63deg);
62-
--color-secondary-100: oklch(81.66% 0.07 358.81deg);
63-
--color-secondary-200: oklch(71.81% 0.1 0.28deg);
64-
--color-secondary-300: oklch(62.48% 0.13 2.97deg);
65-
--color-secondary-400: oklch(53.49% 0.16 6.15deg);
66-
--color-secondary-500: oklch(45.92% 0.17 11.84deg);
67-
--color-secondary-600: oklch(42.41% 0.16 11.27deg);
68-
--color-secondary-700: oklch(39% 0.14 11.42deg);
69-
--color-secondary-800: oklch(35.29% 0.13 10.45deg);
70-
--color-secondary-900: oklch(31.72% 0.11 10.55deg);
71-
--color-secondary-950: oklch(27.89% 0.1 9.37deg);
72-
--color-secondary-contrast-dark: var(--color-secondary-950);
73-
--color-secondary-contrast-light: var(--color-secondary-50);
61+
--color-secondary-50: #f1f2f3;
62+
--color-secondary-100: #e3e5e7;
63+
--color-secondary-200: #cfd2d6;
64+
--color-secondary-300: #b7bcc2;
65+
--color-secondary-400: #9aa1a9;
66+
--color-secondary-500: #393e46;
67+
--color-secondary-600: #333840;
68+
--color-secondary-700: #2d3239;
69+
--color-secondary-800: #282c33;
70+
--color-secondary-900: #252a31;
71+
--color-secondary-950: #222831;
72+
--color-secondary-contrast-dark: #222831;
73+
--color-secondary-contrast-light: #eeeeee;
7474
--color-secondary-contrast-50: var(--color-secondary-contrast-dark);
7575
--color-secondary-contrast-100: var(--color-secondary-contrast-dark);
7676
--color-secondary-contrast-200: var(--color-secondary-contrast-dark);
7777
--color-secondary-contrast-300: var(--color-secondary-contrast-dark);
78-
--color-secondary-contrast-400: var(--color-secondary-contrast-light);
78+
--color-secondary-contrast-400: var(--color-secondary-contrast-dark);
7979
--color-secondary-contrast-500: var(--color-secondary-contrast-light);
8080
--color-secondary-contrast-600: var(--color-secondary-contrast-light);
8181
--color-secondary-contrast-700: var(--color-secondary-contrast-light);
8282
--color-secondary-contrast-800: var(--color-secondary-contrast-light);
8383
--color-secondary-contrast-900: var(--color-secondary-contrast-light);
8484
--color-secondary-contrast-950: var(--color-secondary-contrast-light);
85-
--color-tertiary-50: oklch(91.92% 0.05 339.62deg);
86-
--color-tertiary-100: oklch(80.53% 0.07 340.22deg);
87-
--color-tertiary-200: oklch(68.84% 0.08 340.98deg);
88-
--color-tertiary-300: oklch(56.57% 0.1 341.31deg);
89-
--color-tertiary-400: oklch(44.43% 0.11 343.11deg);
90-
--color-tertiary-500: oklch(32.78% 0.12 346.68deg);
91-
--color-tertiary-600: oklch(30.89% 0.11 346.88deg);
92-
--color-tertiary-700: oklch(29.02% 0.11 346.22deg);
93-
--color-tertiary-800: oklch(26.99% 0.1 346.28deg);
94-
--color-tertiary-900: oklch(25.06% 0.09 345.41deg);
95-
--color-tertiary-950: oklch(23.05% 0.08 345.57deg);
96-
--color-tertiary-contrast-dark: var(--color-tertiary-950);
97-
--color-tertiary-contrast-light: var(--color-tertiary-50);
85+
--color-tertiary-50: #faf8f0;
86+
--color-tertiary-100: #f4edd8;
87+
--color-tertiary-200: #e8dcb0;
88+
--color-tertiary-300: #dccb8a;
89+
--color-tertiary-400: #ccb76a;
90+
--color-tertiary-500: #b6a157;
91+
--color-tertiary-600: #9d8b4c;
92+
--color-tertiary-700: #837342;
93+
--color-tertiary-800: #695d38;
94+
--color-tertiary-900: #4f462e;
95+
--color-tertiary-950: #3b3527;
96+
--color-tertiary-contrast-dark: #222831;
97+
--color-tertiary-contrast-light: #eeeeee;
9898
--color-tertiary-contrast-50: var(--color-tertiary-contrast-dark);
9999
--color-tertiary-contrast-100: var(--color-tertiary-contrast-dark);
100100
--color-tertiary-contrast-200: var(--color-tertiary-contrast-dark);
101-
--color-tertiary-contrast-300: var(--color-tertiary-contrast-light);
102-
--color-tertiary-contrast-400: var(--color-tertiary-contrast-light);
103-
--color-tertiary-contrast-500: var(--color-tertiary-contrast-light);
104-
--color-tertiary-contrast-600: var(--color-tertiary-contrast-light);
101+
--color-tertiary-contrast-300: var(--color-tertiary-contrast-dark);
102+
--color-tertiary-contrast-400: var(--color-tertiary-contrast-dark);
103+
--color-tertiary-contrast-500: var(--color-tertiary-contrast-dark);
104+
--color-tertiary-contrast-600: var(--color-tertiary-contrast-dark);
105105
--color-tertiary-contrast-700: var(--color-tertiary-contrast-light);
106106
--color-tertiary-contrast-800: var(--color-tertiary-contrast-light);
107107
--color-tertiary-contrast-900: var(--color-tertiary-contrast-light);
108108
--color-tertiary-contrast-950: var(--color-tertiary-contrast-light);
109-
--color-success-50: oklch(93.62% 0.1 153.32deg);
110-
--color-success-100: oklch(87.74% 0.12 152.63deg);
111-
--color-success-200: oklch(81.83% 0.13 152.05deg);
112-
--color-success-300: oklch(75.75% 0.15 150.85deg);
113-
--color-success-400: oklch(69.98% 0.16 149.79deg);
114-
--color-success-500: oklch(64.39% 0.17 148.26deg);
115-
--color-success-600: oklch(58.66% 0.15 148.27deg);
116-
--color-success-700: oklch(53.11% 0.14 148.34deg);
117-
--color-success-800: oklch(47.09% 0.12 148.36deg);
118-
--color-success-900: oklch(41.2% 0.11 148.48deg);
119-
--color-success-950: oklch(34.74% 0.09 148.54deg);
120-
--color-success-contrast-dark: var(--color-success-950);
121-
--color-success-contrast-light: var(--color-success-50);
122-
--color-success-contrast-50: var(--color-success-contrast-dark);
123-
--color-success-contrast-100: var(--color-success-contrast-dark);
124-
--color-success-contrast-200: var(--color-success-contrast-dark);
125-
--color-success-contrast-300: var(--color-success-contrast-dark);
126-
--color-success-contrast-400: var(--color-success-contrast-dark);
127-
--color-success-contrast-500: var(--color-success-contrast-dark);
128-
--color-success-contrast-600: var(--color-success-contrast-light);
129-
--color-success-contrast-700: var(--color-success-contrast-light);
130-
--color-success-contrast-800: var(--color-success-contrast-light);
131-
--color-success-contrast-900: var(--color-success-contrast-light);
132-
--color-success-contrast-950: var(--color-success-contrast-light);
133-
--color-warning-50: oklch(96.43% 0.05 92.15deg);
134-
--color-warning-100: oklch(92.05% 0.07 91.8deg);
135-
--color-warning-200: oklch(87.49% 0.09 90.82deg);
136-
--color-warning-300: oklch(83.28% 0.11 89.86deg);
137-
--color-warning-400: oklch(78.83% 0.13 88.52deg);
138-
--color-warning-500: oklch(74.67% 0.14 86.9deg);
139-
--color-warning-600: oklch(69.31% 0.13 86.99deg);
140-
--color-warning-700: oklch(63.95% 0.12 86.51deg);
141-
--color-warning-800: oklch(58.58% 0.11 87.29deg);
142-
--color-warning-900: oklch(52.98% 0.1 86.72deg);
143-
--color-warning-950: oklch(47.1% 0.09 86.81deg);
144-
--color-warning-contrast-dark: var(--color-warning-950);
145-
--color-warning-contrast-light: var(--color-warning-50);
146-
--color-warning-contrast-50: var(--color-warning-contrast-dark);
147-
--color-warning-contrast-100: var(--color-warning-contrast-dark);
148-
--color-warning-contrast-200: var(--color-warning-contrast-dark);
149-
--color-warning-contrast-300: var(--color-warning-contrast-dark);
150-
--color-warning-contrast-400: var(--color-warning-contrast-dark);
151-
--color-warning-contrast-500: var(--color-warning-contrast-dark);
152-
--color-warning-contrast-600: var(--color-warning-contrast-light);
153-
--color-warning-contrast-700: var(--color-warning-contrast-light);
154-
--color-warning-contrast-800: var(--color-warning-contrast-light);
155-
--color-warning-contrast-900: var(--color-warning-contrast-light);
156-
--color-warning-contrast-950: var(--color-warning-contrast-light);
157-
--color-error-50: oklch(80.85% 0.11 16.26deg);
158-
--color-error-100: oklch(75.33% 0.13 20.08deg);
159-
--color-error-200: oklch(70.22% 0.15 22.78deg);
160-
--color-error-300: oklch(65.33% 0.18 25.62deg);
161-
--color-error-400: oklch(61.12% 0.2 27.76deg);
162-
--color-error-500: oklch(57.43% 0.21 29.52deg);
163-
--color-error-600: oklch(52.79% 0.19 29.39deg);
164-
--color-error-700: oklch(48.12% 0.18 29.42deg);
165-
--color-error-800: oklch(43.06% 0.16 29.24deg);
166-
--color-error-900: oklch(38.12% 0.14 29.26deg);
167-
--color-error-950: oklch(32.94% 0.12 28.95deg);
168-
--color-error-contrast-dark: var(--color-error-950);
169-
--color-error-contrast-light: var(--color-error-50);
170-
--color-error-contrast-50: var(--color-error-contrast-dark);
171-
--color-error-contrast-100: var(--color-error-contrast-dark);
172-
--color-error-contrast-200: var(--color-error-contrast-dark);
173-
--color-error-contrast-300: var(--color-error-contrast-dark);
174-
--color-error-contrast-400: var(--color-error-contrast-dark);
175-
--color-error-contrast-500: var(--color-error-contrast-dark);
176-
--color-error-contrast-600: var(--color-error-contrast-light);
177-
--color-error-contrast-700: var(--color-error-contrast-light);
178-
--color-error-contrast-800: var(--color-error-contrast-light);
179-
--color-error-contrast-900: var(--color-error-contrast-light);
180-
--color-error-contrast-950: var(--color-error-contrast-light);
181-
--color-surface-50: oklch(57.87% 0.23 259.64deg);
182-
--color-surface-100: oklch(51.91% 0.2 259.33deg);
183-
--color-surface-200: oklch(45.86% 0.18 259.01deg);
184-
--color-surface-300: oklch(39.3% 0.15 258.69deg);
185-
--color-surface-400: oklch(32.78% 0.12 257.94deg);
186-
--color-surface-500: oklch(25.84% 0.09 256.12deg);
187-
--color-surface-600: oklch(24.42% 0.08 255.59deg);
188-
--color-surface-700: oklch(22.99% 0.08 254.93deg);
189-
--color-surface-800: oklch(21.16% 0.07 254.57deg);
190-
--color-surface-900: oklch(19.67% 0.06 253.57deg);
191-
--color-surface-950: oklch(18.15% 0.05 252.22deg);
192-
--color-surface-contrast-dark: var(--color-surface-950);
193-
--color-surface-contrast-light: var(--color-surface-50);
109+
--color-success-50: var(--color-primary-50);
110+
--color-success-100: var(--color-primary-100);
111+
--color-success-200: var(--color-primary-200);
112+
--color-success-300: var(--color-primary-300);
113+
--color-success-400: var(--color-primary-400);
114+
--color-success-500: var(--color-primary-500);
115+
--color-success-600: var(--color-primary-600);
116+
--color-success-700: var(--color-primary-700);
117+
--color-success-800: var(--color-primary-800);
118+
--color-success-900: var(--color-primary-900);
119+
--color-success-950: var(--color-primary-950);
120+
--color-success-contrast-dark: var(--color-primary-contrast-dark);
121+
--color-success-contrast-light: var(--color-primary-contrast-light);
122+
--color-success-contrast-50: var(--color-primary-contrast-50);
123+
--color-success-contrast-100: var(--color-primary-contrast-100);
124+
--color-success-contrast-200: var(--color-primary-contrast-200);
125+
--color-success-contrast-300: var(--color-primary-contrast-300);
126+
--color-success-contrast-400: var(--color-primary-contrast-400);
127+
--color-success-contrast-500: var(--color-primary-contrast-500);
128+
--color-success-contrast-600: var(--color-primary-contrast-600);
129+
--color-success-contrast-700: var(--color-primary-contrast-700);
130+
--color-success-contrast-800: var(--color-primary-contrast-800);
131+
--color-success-contrast-900: var(--color-primary-contrast-900);
132+
--color-success-contrast-950: var(--color-primary-contrast-950);
133+
--color-warning-50: var(--color-primary-50);
134+
--color-warning-100: var(--color-primary-100);
135+
--color-warning-200: var(--color-primary-200);
136+
--color-warning-300: var(--color-primary-300);
137+
--color-warning-400: var(--color-primary-400);
138+
--color-warning-500: var(--color-primary-500);
139+
--color-warning-600: var(--color-primary-600);
140+
--color-warning-700: var(--color-primary-700);
141+
--color-warning-800: var(--color-primary-800);
142+
--color-warning-900: var(--color-primary-900);
143+
--color-warning-950: var(--color-primary-950);
144+
--color-warning-contrast-dark: var(--color-primary-contrast-dark);
145+
--color-warning-contrast-light: var(--color-primary-contrast-light);
146+
--color-warning-contrast-50: var(--color-primary-contrast-50);
147+
--color-warning-contrast-100: var(--color-primary-contrast-100);
148+
--color-warning-contrast-200: var(--color-primary-contrast-200);
149+
--color-warning-contrast-300: var(--color-primary-contrast-300);
150+
--color-warning-contrast-400: var(--color-primary-contrast-400);
151+
--color-warning-contrast-500: var(--color-primary-contrast-500);
152+
--color-warning-contrast-600: var(--color-primary-contrast-600);
153+
--color-warning-contrast-700: var(--color-primary-contrast-700);
154+
--color-warning-contrast-800: var(--color-primary-contrast-800);
155+
--color-warning-contrast-900: var(--color-primary-contrast-900);
156+
--color-warning-contrast-950: var(--color-primary-contrast-950);
157+
--color-error-50: var(--color-tertiary-50);
158+
--color-error-100: var(--color-tertiary-100);
159+
--color-error-200: var(--color-tertiary-200);
160+
--color-error-300: var(--color-tertiary-300);
161+
--color-error-400: var(--color-tertiary-400);
162+
--color-error-500: var(--color-tertiary-500);
163+
--color-error-600: var(--color-tertiary-600);
164+
--color-error-700: var(--color-tertiary-700);
165+
--color-error-800: var(--color-tertiary-800);
166+
--color-error-900: var(--color-tertiary-900);
167+
--color-error-950: var(--color-tertiary-950);
168+
--color-error-contrast-dark: var(--color-tertiary-contrast-dark);
169+
--color-error-contrast-light: var(--color-tertiary-contrast-light);
170+
--color-error-contrast-50: var(--color-tertiary-contrast-50);
171+
--color-error-contrast-100: var(--color-tertiary-contrast-100);
172+
--color-error-contrast-200: var(--color-tertiary-contrast-200);
173+
--color-error-contrast-300: var(--color-tertiary-contrast-300);
174+
--color-error-contrast-400: var(--color-tertiary-contrast-400);
175+
--color-error-contrast-500: var(--color-tertiary-contrast-500);
176+
--color-error-contrast-600: var(--color-tertiary-contrast-600);
177+
--color-error-contrast-700: var(--color-tertiary-contrast-700);
178+
--color-error-contrast-800: var(--color-tertiary-contrast-800);
179+
--color-error-contrast-900: var(--color-tertiary-contrast-900);
180+
--color-error-contrast-950: var(--color-tertiary-contrast-950);
181+
--color-surface-50: #eeeeee;
182+
--color-surface-100: #dcdde0;
183+
--color-surface-200: #c7c9cd;
184+
--color-surface-300: #b0b3b8;
185+
--color-surface-400: #969aa0;
186+
--color-surface-500: #7b8087;
187+
--color-surface-600: #61666e;
188+
--color-surface-700: #4b5058;
189+
--color-surface-800: #393e46;
190+
--color-surface-900: #2d323a;
191+
--color-surface-950: #222831;
192+
--color-surface-contrast-dark: #222831;
193+
--color-surface-contrast-light: #eeeeee;
194194
--color-surface-contrast-50: var(--color-surface-contrast-dark);
195195
--color-surface-contrast-100: var(--color-surface-contrast-dark);
196196
--color-surface-contrast-200: var(--color-surface-contrast-dark);
197-
--color-surface-contrast-300: var(--color-surface-contrast-light);
198-
--color-surface-contrast-400: var(--color-surface-contrast-light);
197+
--color-surface-contrast-300: var(--color-surface-contrast-dark);
198+
--color-surface-contrast-400: var(--color-surface-contrast-dark);
199199
--color-surface-contrast-500: var(--color-surface-contrast-light);
200200
--color-surface-contrast-600: var(--color-surface-contrast-light);
201201
--color-surface-contrast-700: var(--color-surface-contrast-light);
202202
--color-surface-contrast-800: var(--color-surface-contrast-light);
203203
--color-surface-contrast-900: var(--color-surface-contrast-light);
204204
--color-surface-contrast-950: var(--color-surface-contrast-light);
205-
}
205+
}

0 commit comments

Comments
 (0)