Skip to content

Commit cf682e7

Browse files
TerranceKhumalo-absaTerranceKhumalo-absa
committed
fix: update fallback theme to light mode and refine color variables for dark theme
1 parent fa8152f commit cf682e7

4 files changed

Lines changed: 25 additions & 286 deletions

File tree

‎projects/cps-ui-kit/src/lib/services/cps-theme/cps-theme.service.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -228,8 +228,8 @@ export class CpsThemeService {
228228
return stored;
229229
}
230230

231-
// Fall back to system preference
232-
return this.getSystemTheme();
231+
// Fall back to light mode
232+
return 'light';
233233
}
234234

235235
private getInitialColorTheme(): CpsColorTheme {

‎projects/cps-ui-kit/src/lib/utils/colors-utils.ts‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -50,16 +50,20 @@ export const getCpsColors = (_document: Document): [string, string][] =>
5050
.reduce(
5151
(finalArr, sheet) =>
5252
finalArr.concat(
53-
[...sheet.cssRules].filter(isStyleRule).reduce((propValArr, rule) => {
54-
const props = [...rule.style]
55-
.map((propName) => [
56-
propName.trim(),
57-
rule.style.getPropertyValue(propName).trim()
58-
])
59-
.filter(([propName]) => propName.indexOf('--cps-color') === 0);
53+
[...sheet.cssRules]
54+
.filter(
55+
(rule: any) => isStyleRule(rule) && rule.selectorText === ':root'
56+
)
57+
.reduce((propValArr, rule) => {
58+
const props = [...rule.style]
59+
.map((propName) => [
60+
propName.trim(),
61+
rule.style.getPropertyValue(propName).trim()
62+
])
63+
.filter(([propName]) => propName.indexOf('--cps-color') === 0);
6064

61-
return [...propValArr, ...props];
62-
}, [])
65+
return [...propValArr, ...props];
66+
}, [])
6367
),
6468
[]
6569
);

‎projects/cps-ui-kit/styles/_colors-dark.scss‎

Lines changed: 9 additions & 273 deletions
Original file line numberDiff line numberDiff line change
@@ -1,249 +1,11 @@
11
// Dark theme color palette
2-
// Using color theory: warm reds with cool teal/cyan complements
3-
// Cool blue-gray backgrounds provide temperature balance with warm red accents
2+
// Only overrides variables that differ from the light theme (:root).
3+
// All brand palette, darks, and state variant colors are inherited from :root.
44

55
[data-theme='dark'] {
6-
// Main brand colors - slightly desaturated and lighter for dark backgrounds
6+
// Brand color overrides (base values only — variants inherited from :root)
77
--cps-color-energy: #f47721;
8-
--cps-color-energy-highlighten: #faece5;
9-
--cps-color-energy-lighten5: #ffff9f;
10-
--cps-color-energy-lighten4: #ffe883;
11-
--cps-color-energy-lighten3: #ffcb68;
12-
--cps-color-energy-lighten2: #ffaf4d;
13-
--cps-color-energy-lighten1: #ff9331;
14-
--cps-color-energy-darken1: #de5d00;
15-
--cps-color-energy-darken2: #be4300;
16-
--cps-color-energy-darken3: #9f2800;
17-
--cps-color-energy-darken4: #820100;
18-
19-
--cps-color-prepared: #fa551e;
20-
--cps-color-prepared-highlighten: #f9e9e5;
21-
--cps-color-prepared-lighten5: #ffe4a1;
22-
--cps-color-prepared-lighten4: #ffc786;
23-
--cps-color-prepared-lighten3: #ffaa6c;
24-
--cps-color-prepared-lighten2: #ff8e52;
25-
--cps-color-prepared-lighten1: #ff7138;
26-
--cps-color-prepared-darken1: #d93700;
27-
--cps-color-prepared-darken2: #b91000;
28-
--cps-color-prepared-darken3: #990000;
29-
--cps-color-prepared-darken4: #7c0000;
30-
31-
--cps-color-agile: #f52d28;
32-
--cps-color-agile-highlighten: #f9e6e6;
33-
--cps-color-agile-lighten5: #ffc8a6;
34-
--cps-color-agile-lighten4: #ffaa8b;
35-
--cps-color-agile-lighten3: #ff8d71;
36-
--cps-color-agile-lighten2: #ff6f58;
37-
--cps-color-agile-lighten1: #ff5040;
38-
--cps-color-agile-darken1: #d40010;
39-
--cps-color-agile-darken2: #b30000;
40-
--cps-color-agile-darken3: #930000;
41-
--cps-color-agile-darken4: #760000;
42-
43-
--cps-color-passion: #dc0032;
44-
--cps-color-passion-highlighten: #f7e3e7;
45-
--cps-color-passion-lighten5: #ffb3ae;
46-
--cps-color-passion-lighten4: #ff9693;
47-
--cps-color-passion-lighten3: #ff7879;
48-
--cps-color-passion-lighten2: #ff5a61;
49-
--cps-color-passion-lighten1: #fd3849;
50-
--cps-color-passion-darken1: #bc001d;
51-
--cps-color-passion-darken2: #9b0007;
52-
--cps-color-passion-darken3: #7d0000;
53-
--cps-color-passion-darken4: #600000;
54-
55-
--cps-color-warmth: #be0028;
56-
--cps-color-warmth-highlighten: #f3e3e6;
57-
--cps-color-warmth-lighten5: #ffa9a2;
58-
--cps-color-warmth-lighten4: #ff8d87;
59-
--cps-color-warmth-lighten3: #ff706e;
60-
--cps-color-warmth-lighten2: #fe5255;
61-
--cps-color-warmth-lighten1: #de333e;
62-
--cps-color-warmth-darken1: #9e0013;
63-
--cps-color-warmth-darken2: #800000;
64-
--cps-color-warmth-darken3: #630000;
65-
--cps-color-warmth-darken4: #4b0000;
66-
67-
--cps-color-human: #aa052d;
68-
--cps-color-human-highlighten: #f1e3e6;
69-
--cps-color-human-lighten5: #ffa4a7;
70-
--cps-color-human-lighten4: #ff888d;
71-
--cps-color-human-lighten3: #ff6c73;
72-
--cps-color-human-lighten2: #e84f5a;
73-
--cps-color-human-lighten1: #c93143;
74-
--cps-color-human-darken1: #8b0019;
75-
--cps-color-human-darken2: #6d0000;
76-
--cps-color-human-darken3: #520000;
77-
--cps-color-human-darken4: #400000;
78-
79-
--cps-color-grounded: #960528;
80-
--cps-color-grounded-highlighten: #f0e3e6;
81-
--cps-color-grounded-lighten5: #ff9ea1;
82-
--cps-color-grounded-lighten4: #ff8286;
83-
--cps-color-grounded-lighten3: #f2666d;
84-
--cps-color-grounded-lighten2: #d34b55;
85-
--cps-color-grounded-lighten1: #b42e3e;
86-
--cps-color-grounded-darken1: #780014;
87-
--cps-color-grounded-darken2: #5c0000;
88-
--cps-color-grounded-darken3: #440000;
89-
--cps-color-grounded-darken4: #390000;
90-
918
--cps-color-care: #f05a78;
92-
--cps-color-care-highlighten: #f8e9ed;
93-
--cps-color-care-lighten5: #ffe9ff;
94-
--cps-color-care-lighten4: #ffcce9;
95-
--cps-color-care-lighten3: #ffafcd;
96-
--cps-color-care-lighten2: #ff93b1;
97-
--cps-color-care-lighten1: #ff7697;
98-
--cps-color-care-darken1: #d13d64;
99-
--cps-color-care-darken2: #b31a4c;
100-
--cps-color-care-darken3: #950036;
101-
--cps-color-care-darken4: #770021;
102-
103-
--cps-color-smile: #f0325a;
104-
--cps-color-smile-highlighten: #f8e7e9;
105-
--cps-color-smile-lighten5: #ffcbdd;
106-
--cps-color-smile-lighten4: #ffadc1;
107-
--cps-color-smile-lighten3: #ff90a6;
108-
--cps-color-smile-lighten2: #ff728c;
109-
--cps-color-smile-lighten1: #ff5472;
110-
--cps-color-smile-darken1: #d00043;
111-
--cps-color-smile-darken2: #b0002d;
112-
--cps-color-smile-darken3: #910019;
113-
--cps-color-smile-darken4: #720000;
114-
115-
--cps-color-surprise: #af144b;
116-
--cps-color-surprise-highlighten: #f2e4e9;
117-
--cps-color-surprise-lighten5: #ffaccb;
118-
--cps-color-surprise-lighten4: #ff8fb0;
119-
--cps-color-surprise-lighten3: #ff7395;
120-
--cps-color-surprise-lighten2: #ec577b;
121-
--cps-color-surprise-lighten1: #cd3963;
122-
--cps-color-surprise-darken1: #910035;
123-
--cps-color-surprise-darken2: #730020;
124-
--cps-color-surprise-darken3: #560008;
125-
--cps-color-surprise-darken4: #400000;
126-
127-
--cps-color-calm: #870a3c;
128-
--cps-color-calm-highlighten: #efe4e7;
129-
--cps-color-calm-lighten5: #ff9bb9;
130-
--cps-color-calm-lighten4: #fd809e;
131-
--cps-color-calm-lighten3: #df6584;
132-
--cps-color-calm-lighten2: #c14a6b;
133-
--cps-color-calm-lighten1: #a42e53;
134-
--cps-color-calm-darken1: #6b0027;
135-
--cps-color-calm-darken2: #4f0012;
136-
--cps-color-calm-darken3: #390000;
137-
--cps-color-calm-darken4: #300000;
138-
139-
--cps-color-luxury: #640032;
140-
--cps-color-luxury-highlighten: #ebe3e6;
141-
--cps-color-luxury-lighten5: #f28bad;
142-
--cps-color-luxury-lighten4: #d57192;
143-
--cps-color-luxury-lighten3: #b85779;
144-
--cps-color-luxury-lighten2: #9b3d60;
145-
--cps-color-luxury-lighten1: #7f2248;
146-
--cps-color-luxury-darken1: #49001d;
147-
--cps-color-luxury-darken2: #340002;
148-
--cps-color-luxury-darken3: #290000;
149-
--cps-color-luxury-darken4: #1c0000;
150-
151-
--cps-color-depth: #500a28;
152-
--cps-color-depth-highlighten: #e9e3e6;
153-
--cps-color-depth-lighten5: #d989a0;
154-
--cps-color-depth-lighten4: #bc6f86;
155-
--cps-color-depth-lighten3: #a0566d;
156-
--cps-color-depth-lighten2: #853d55;
157-
--cps-color-depth-lighten1: #6a253e;
158-
--cps-color-depth-darken1: #370013;
159-
--cps-color-depth-darken2: #290000;
160-
--cps-color-depth-darken3: #1b0000;
161-
--cps-color-depth-darken4: #000000;
162-
163-
//Darks
164-
--cps-color-silver: #736464;
165-
--cps-color-silver-highlighten: #edeaea;
166-
--cps-color-silver-lighten5: #fbe9e9;
167-
--cps-color-silver-lighten4: #decdcd;
168-
--cps-color-silver-lighten3: #c2b2b1;
169-
--cps-color-silver-lighten2: #a79797;
170-
--cps-color-silver-lighten1: #8d7d7d;
171-
--cps-color-silver-darken1: #5a4c4c;
172-
--cps-color-silver-darken2: #433535;
173-
--cps-color-silver-darken3: #2c2020;
174-
--cps-color-silver-darken4: #190909;
175-
176-
--cps-color-platinum: #5a4b4b;
177-
--cps-color-platinum-highlighten: #eae8e8;
178-
--cps-color-platinum-lighten5: #decccc;
179-
--cps-color-platinum-lighten4: #c2b0b0;
180-
--cps-color-platinum-lighten3: #a79695;
181-
--cps-color-platinum-lighten2: #8c7c7c;
182-
--cps-color-platinum-lighten1: #736363;
183-
--cps-color-platinum-darken1: #423434;
184-
--cps-color-platinum-darken2: #2c1f1f;
185-
--cps-color-platinum-darken3: #190707;
186-
--cps-color-platinum-darken4: #000000;
187-
188-
--cps-color-graphite: #2d2323;
189-
--cps-color-graphite-highlighten: #e7e5e5;
190-
--cps-color-graphite-lighten5: #a79a9a;
191-
--cps-color-graphite-lighten4: #8d8080;
192-
--cps-color-graphite-lighten3: #736767;
193-
--cps-color-graphite-lighten2: #5b4f4f;
194-
--cps-color-graphite-lighten1: #433838;
195-
--cps-color-graphite-darken1: #190d0d;
196-
--cps-color-graphite-darken2: #000000;
197-
--cps-color-graphite-darken3: #000000;
198-
--cps-color-graphite-darken4: #000000;
199-
200-
//States
201-
--cps-color-info: #099ef3;
202-
--cps-color-info-highlighten: #e5eff8;
203-
--cps-color-info-lighten5: #d0ffff;
204-
--cps-color-info-lighten4: #b0ffff;
205-
--cps-color-info-lighten3: #90f1ff;
206-
--cps-color-info-lighten2: #6fd4ff;
207-
--cps-color-info-lighten1: #49b9ff;
208-
--cps-color-info-darken1: #0084d6;
209-
--cps-color-info-darken2: #006bba;
210-
--cps-color-info-darken3: #00539f;
211-
--cps-color-info-darken4: #003d84;
212-
213-
--cps-color-success: #3bb719;
214-
--cps-color-success-highlighten: #e8f2e6;
215-
--cps-color-success-lighten5: #d5ffaa;
216-
--cps-color-success-lighten4: #b7ff8e;
217-
--cps-color-success-lighten3: #99ff72;
218-
--cps-color-success-lighten2: #7bf057;
219-
--cps-color-success-lighten1: #5dd33a;
220-
--cps-color-success-darken1: #059b00;
221-
--cps-color-success-darken2: #008100;
222-
--cps-color-success-darken3: #006600;
223-
--cps-color-success-darken4: #004d00;
224-
225-
--cps-color-warn: #ff9f00;
226-
--cps-color-warn-highlighten: #faefe5;
227-
--cps-color-warn-lighten5: #ffffa3;
228-
--cps-color-warn-lighten4: #ffff87;
229-
--cps-color-warn-lighten3: #fff26b;
230-
--cps-color-warn-lighten2: #ffd64e;
231-
--cps-color-warn-lighten1: #ffba30;
232-
--cps-color-warn-darken1: #df8500;
233-
--cps-color-warn-darken2: #c06b00;
234-
--cps-color-warn-darken3: #a15300;
235-
--cps-color-warn-darken4: #843b00;
236-
237-
--cps-color-error-highlighten: #f9e4e5;
238-
--cps-color-error-lighten5: #f5d9d9;
239-
--cps-color-error-lighten4: #f2cece;
240-
--cps-color-error-lighten3: #e9a7a7;
241-
--cps-color-error-lighten2: #df8080;
242-
--cps-color-error-lighten1: #d55959;
243-
--cps-color-error-darken1: #a32828;
244-
--cps-color-error-darken2: #7a1e1e;
245-
--cps-color-error-darken3: #511414;
246-
--cps-color-error-darken4: #300c0c;
2479

24810
// States backgrounds
24911
--cps-color-info-bg: rgba(73, 185, 255, 0.16);
@@ -257,31 +19,30 @@
25719
--cps-color-highlight-selected: rgba(244, 119, 33, 0.16);
25820
--cps-color-highlight-selected-dark: rgba(244, 119, 33, 0.24);
25921

260-
//Backgrounds
22+
// Backgrounds
26123
--cps-color-bg-lightest: #2a2a31;
26224
--cps-color-bg-light: #1f1f24;
26325
--cps-color-bg-mid: #1b1b1e;
26426
--cps-color-bg-dark: #151419;
26527

266-
//Lines
28+
// Lines
26729
--cps-color-line-light: #3f3f46;
26830
--cps-color-line-mid: #50505a;
26931
--cps-color-line-dark: #666670;
27032
--cps-color-line-darkest: #7a7a86;
27133

272-
//Text
34+
// Text
27335
--cps-color-text-lightest: #fbfbfb;
27436
--cps-color-text-light: #d0d0d2;
27537
--cps-color-text-mild: #a8a8ad;
27638
--cps-color-text-dark: #878787;
27739
--cps-color-text-darkest: #151419;
27840

279-
// Semantic design tokens (use these inside components)
41+
// Semantic design tokens
28042
--cps-accent-primary: var(--cps-color-energy);
28143
--cps-accent-primary-contrast: #151419;
28244
--cps-accent-secondary: #fbfbfb;
28345
--cps-accent-secondary-contrast: #151419;
284-
--cps-color-error: #b91c1c;
28546
--cps-error-background: rgba(255, 90, 103, 0.16);
28647

28748
// Lines and borders
@@ -293,12 +54,7 @@
29354
--cps-surface-control: #262626;
29455
--cps-surface-overlay: rgba(21, 20, 25, 0.85);
29556
--cps-background-color: #151419;
296-
--cps-background-disabled: rgba(
297-
255,
298-
255,
299-
255,
300-
0.05
301-
); // oklch(55.096% 0.02679 264.351 / 0.452);
57+
--cps-background-disabled: rgba(255, 255, 255, 0.05);
30258

30359
// Tab component
30460
--cps-tab-subtabs-background: var(--cps-surface-highlight);
@@ -348,31 +104,11 @@
348104
--cps-ring-color: var(--cps-border-focus);
349105
--cps-ring-offset-color: var(--cps-surface-body);
350106

351-
// Radius scale
352-
--cps-radius-xs: 2px;
353-
--cps-radius-sm: 4px;
354-
--cps-radius-md: 8px;
355-
--cps-radius-lg: 12px;
356-
--cps-radius-xl: 16px;
357-
--cps-radius-full: 9999px;
358-
359-
// Backward compatible radius aliases
360-
--cps-border-radius-small: var(--cps-radius-sm);
361-
--cps-border-radius-medium: var(--cps-radius-md);
362-
--cps-border-radius-large: var(--cps-radius-lg);
363-
--cps-border-radius-round: var(--cps-radius-full);
364-
365-
// Elevation shadows
107+
// Elevation shadows (darker than light theme)
366108
--cps-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
367109
--cps-shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.34);
368110
--cps-shadow-md: 0 12px 24px rgba(0, 0, 0, 0.4);
369111
--cps-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.5);
370-
371-
// Motion tokens
372-
--cps-motion-fast: 120ms;
373-
--cps-motion-base: 180ms;
374-
--cps-motion-slow: 260ms;
375-
--cps-motion-easing: cubic-bezier(0.2, 0, 0, 1);
376112
}
377113

378114
[data-theme='dark'][data-color-theme='neutral'] {

‎projects/cps-ui-kit/styles/_colors.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,7 @@
230230
--cps-color-warn-darken3: #a15300;
231231
--cps-color-warn-darken4: #843b00;
232232

233-
--cps-color-error: #cc3333;
233+
--cps-color-error: #b91c1c;
234234
--cps-color-error-highlighten: #f9e4e5;
235235
--cps-color-error-lighten5: #f5d9d9;
236236
--cps-color-error-lighten4: #f2cece;
@@ -278,7 +278,6 @@
278278
--cps-accent-primary-contrast: #ffffff;
279279
--cps-accent-secondary: var(--cps-color-energy);
280280
--cps-accent-secondary-contrast: #2d2323;
281-
--cps-color-error: #b91c1c;
282281
--cps-error-background: #fef3f2;
283282

284283
// Lines and borders

0 commit comments

Comments
 (0)