Skip to content

Commit 45e3ae4

Browse files
imswarnilimswarnil
authored
as
1 parent ade0ed7 commit 45e3ae4

File tree

1 file changed

+138
-94
lines changed

1 file changed

+138
-94
lines changed

‎_sass/_vars.scss‎

Lines changed: 138 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// =============================================================================
2-
// VARIABLES
3-
// Centralized design tokens for the theme.
2+
// VARIABLES (SALESFORCE BLUE THEME)
3+
// Centralized design tokens re-themed to match the Salesforce/Tableau brand.
44
// =============================================================================
55

66

@@ -10,138 +10,182 @@
1010

1111
:root {
1212

13+
// --- SALESFORCE BLUE PALETTE ---
14+
// Primary (Bright Blue for CTAs, links)
15+
--brand-primary: hsl(197, 88%, 45%); // #0D9DDA
16+
// Secondary (Slightly Lighter Blue for accents)
17+
--brand-secondary: hsl(200, 89%, 55%); // #28B6F2
18+
// Darkest Blue (For headings and strong text)
19+
--brand-darkest: hsl(197, 89%, 15%); // #04354A
20+
// Dark Blue (For body text)
21+
--brand-dark: hsl(197, 88%, 25%); // #07587A
22+
// Medium Blue (For hover states)
23+
--brand-medium: hsl(197, 88%, 29%); // #0A7AAA
24+
// Light Blue (For backgrounds, borders)
25+
--brand-light: hsl(200, 60%, 95%); // A very light, cool gray
26+
1327
// Base Colors (Light Mode)
1428
--spruce-base-color-background: hsl(0, 0%, 100%);
15-
--spruce-base-color-border: hsla(0, 0%, 0%, 0.05);
16-
--spruce-base-color-heading: hsl(232, 68%, 11%);
17-
--spruce-base-color-text: hsl(208, 21%, 39%);
18-
--spruce-base-color-primary: hsl(203, 96%, 79%); /* light blue */
19-
--spruce-base-color-secondary: hsl(203, 96%, 79%); /* medium blue */
20-
--spruce-base-color-link: hsl(203, 96%, 79%);
21-
--spruce-base-color-link-hover: hsl(208, 80%, 36%); /* dark blue */
22-
--spruce-base-color-strong: hsl(245, 31%, 21%);
29+
--spruce-base-color-border: var(--brand-light);
30+
--spruce-base-color-heading: var(--brand-darkest);
31+
--spruce-base-color-text: var(--brand-dark);
32+
--spruce-base-color-primary: var(--brand-primary);
33+
--spruce-base-color-secondary: var(--brand-secondary);
34+
--spruce-base-color-link: var(--brand-primary);
35+
--spruce-base-color-link-hover: var(--brand-medium);
36+
--spruce-base-color-strong: var(--brand-darkest);
2337

2438
// Element-specific Colors
25-
--spruce-base-color-blockquote-border: hsl(203, 96%, 79%);
26-
--spruce-base-color-marker: hsl(203, 96%, 79%);
27-
--spruce-base-color-code-background: hsl(224, 94%, 97%);
28-
--spruce-base-color-code-foreground: hsl(245, 31%, 21%);
29-
--spruce-base-color-mark-background: hsl(50, 100%, 80%);
30-
--spruce-base-color-mark-foreground: hsl(245, 31%, 21%);
31-
32-
// Component Colors: Alerts
39+
--spruce-base-color-blockquote-border: var(--brand-primary);
40+
--spruce-base-color-marker: var(--brand-primary);
41+
--spruce-base-color-code-background: var(--brand-light);
42+
--spruce-base-color-code-foreground: var(--brand-dark);
43+
--spruce-base-color-mark-background: hsl(48, 100%, 85%);
44+
--spruce-base-color-mark-foreground: var(--brand-darkest);
45+
46+
// Component Colors: Alerts (Standard)
3347
--spruce-alert-color-danger: hsl(0, 71%, 51%);
34-
--spruce-alert-color-info: hsl(195, 100%, 42%);
48+
--spruce-alert-color-info: var(--brand-primary);
3549
--spruce-alert-color-success: hsl(150, 100%, 33%);
3650
--spruce-alert-color-warning: hsl(48, 89%, 55%);
3751

3852
// Component Colors: Buttons
39-
--spruce-btn-color-primary-background: hsl(203, 96%, 79%);
40-
--spruce-btn-color-primary-background-hover: hsl(208, 80%, 36%);
53+
--spruce-btn-color-primary-background: var(--brand-primary);
54+
--spruce-btn-color-primary-background-hover: var(--brand-medium);
4155
--spruce-btn-color-primary-foreground: hsl(0, 0%, 100%);
42-
--spruce-btn-color-primary-shadow: hsl(203, 96%, 79%);
43-
--spruce-btn-color-secondary-background: hsl(203, 96%, 79%);
44-
--spruce-btn-color-secondary-background-hover: hsl(208, 80%, 36%);
45-
--spruce-btn-color-secondary-foreground: #002e33;
46-
--spruce-btn-color-secondary-shadow: #99f5ff;
56+
--spruce-btn-color-primary-shadow: hsla(197, 88%, 45%, 0.4);
57+
--spruce-btn-color-secondary-background: var(--brand-secondary);
58+
--spruce-btn-color-secondary-background-hover: var(--brand-primary);
59+
--spruce-btn-color-secondary-foreground: hsl(0, 0%, 100%);
60+
--spruce-btn-color-secondary-shadow: hsla(200, 89%, 55%, 0.4);
4761

4862
// Component Colors: Forms
4963
--spruce-form-color-background: hsl(0, 0%, 100%);
50-
--spruce-form-color-background-disabled: hsl(0, 0%, 95%);
51-
--spruce-form-color-border: hsl(260, 4%, 70%);
52-
--spruce-form-color-border-disabled: hsl(215, 63%, 93%);
53-
--spruce-form-color-border-focus: hsl(203, 96%, 79%);
54-
--spruce-form-color-check-background: hsl(203, 96%, 79%);
55-
--spruce-form-color-check-focus-ring: hsl(203, 96%, 79%);
64+
--spruce-form-color-background-disabled: var(--brand-light);
65+
--spruce-form-color-border: hsl(210, 20%, 85%);
66+
--spruce-form-color-border-disabled: var(--brand-light);
67+
--spruce-form-color-border-focus: var(--brand-primary);
68+
--spruce-form-color-check-background: var(--brand-primary);
69+
--spruce-form-color-check-focus-ring: var(--brand-primary);
5670
--spruce-form-color-check-foreground: hsl(0, 0%, 100%);
57-
--spruce-form-color-group-label-background: hsl(210, 60%, 98%);
58-
--spruce-form-color-group-label-foreground: hsl(208, 9%, 42%);
59-
--spruce-form-color-invalid: hsl(0, 71%, 51%);
60-
--spruce-form-color-invalid-focus-ring: rgba(219, 41, 41, 0.25);
61-
--spruce-form-color-label: hsl(245, 31%, 21%);
62-
--spruce-form-color-legend: hsl(245, 31%, 21%);
63-
--spruce-form-color-placeholder: hsl(208, 7%, 40%);
64-
--spruce-form-color-range-thumb-background: hsl(203, 96%, 79%);
65-
--spruce-form-color-range-thumb-focus-ring: hsl(203, 96%, 79%);
66-
--spruce-form-color-range-track-background: hsl(215, 63%, 93%);
67-
--spruce-form-color-ring-focus: rgba(0, 9, 255, 0.25);
68-
--spruce-form-color-select-foreground: hsl(245, 31%, 21%);
69-
--spruce-form-color-text: hsl(208, 9%, 42%);
70-
--spruce-form-color-valid: hsl(150, 100%, 33%);
71-
--spruce-form-color-valid-focus-ring: rgba(0, 168, 84, 0.25);
72-
73-
// Component Colors: Tables
74-
--spruce-table-color-border: hsl(215, 63%, 93%);
75-
--spruce-table-color-caption: hsl(208, 9%, 42%);
76-
--spruce-table-color-heading: hsl(245, 31%, 21%);
77-
--spruce-table-color-hover: hsla(0, 0%, 0%, 0.05);
78-
--spruce-table-color-stripe: hsla(0, 0%, 0%, 0.025);
79-
--spruce-table-color-text: hsl(208, 9%, 42%);
71+
--spruce-form-color-group-label-background: var(--brand-light);
72+
--spruce-form-color-group-label-foreground: var(--brand-dark);
73+
--spruce-form-color-label: var(--brand-darkest);
74+
--spruce-form-color-legend: var(--brand-darkest);
75+
--spruce-form-color-placeholder: hsl(208, 10%, 60%);
76+
--spruce-form-color-ring-focus: hsla(197, 88%, 45%, 0.25);
77+
--spruce-form-color-select-foreground: var(--brand-darkest);
78+
--spruce-form-color-text: var(--brand-dark);
8079

8180
// Component Colors: Other
82-
--spruce-breadcrumb-color-separator: hsl(0, 0%, 80%);
8381
--spruce-card-color-background: hsl(0, 0%, 100%);
84-
--spruce-footer-color-background: hsl(224, 94%, 98%);
85-
--spruce-navigation-color-arrow: hsla(0, 0%, 0%, 0.15);
86-
--spruce-navigation-color-icon-background: hsl(224, 94%, 98%);
87-
--spruce-navigation-color-icon-background-hover: hsl(203, 96%, 79%);
88-
--spruce-navigation-color-icon-foreground: hsl(203, 96%, 79%);
82+
--spruce-footer-color-background: var(--brand-light);
83+
--spruce-navigation-color-icon-background: var(--brand-light);
84+
--spruce-navigation-color-icon-background-hover: var(--brand-primary);
85+
--spruce-navigation-color-icon-foreground: var(--brand-primary);
8986
--spruce-navigation-color-icon-foreground-hover: hsl(0, 0%, 100%);
90-
--spruce-search-color-icon: hsla(229, 26%, 48%, 0.25);
91-
--spruce-selection-color-background: hsl(208, 80%, 36%);
87+
--spruce-selection-color-background: var(--brand-primary);
9288
--spruce-selection-color-foreground: hsl(0, 0%, 100%);
93-
--spruce-scrollbar-color-thumb-background: hsla(229, 26%, 48%, 0.15);
94-
--spruce-scrollbar-color-thumb-background-hover: hsla(0, 0%, 0%, 0.25);
95-
--spruce-scrollbar-color-track-background: hsla(226, 100%, 87%, 0.15);
96-
97-
// Component Colors: Prism (Code Highlighting)
98-
--spruce-prism-color-background: hsl(224, 94%, 99%);
99-
--spruce-prism-color-color: hsl(243, 14%, 29%);
100-
--spruce-prism-color-comment: hsl(225, 14%, 46%);
101-
--spruce-prism-color-punctuation: hsl(279, 50%, 53%);
102-
--spruce-prism-color-namespace: hsl(173, 100%, 24%);
103-
--spruce-prism-color-deleted: hsla(1, 83%, 63%, 0.56);
104-
--spruce-prism-color-boolean: hsl(0, 44%, 53%);
105-
--spruce-prism-color-number: hsl(315, 90%, 35%);
106-
--spruce-prism-color-constant: hsl(221, 57%, 52%);
107-
--spruce-prism-color-class-name: hsl(0, 0%, 7%);
108-
--spruce-prism-color-regex: hsl(1, 48%, 59%);
109-
110-
// Font Families
89+
90+
// Unchanged Variables (Typography, Layout, etc.)
11191
--spruce-font-family-base: "Open Sans", sans-serif;
11292
--spruce-font-family-heading: "Manrope", sans-serif;
11393
--spruce-font-family-cursive: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;
114-
115-
// Font Sizing & Weights
11694
--spruce-font-size-base: 1rem;
11795
--spruce-font-size-sm: 0.875rem;
11896
--spruce-font-size-lg: 1.125rem;
11997
--spruce-font-size-lead: clamp(1.1rem, 2vw, 1.25rem);
12098
--spruce-font-size-ratio: 1.25;
12199
--spruce-font-weight-heading: 700;
122-
123-
// Line Heights
124100
--spruce-line-height-base: 1.8;
125101
--spruce-line-height-sm: 1.2;
126102
--spruce-line-height-md: 1.5;
127103
--spruce-line-height-lg: 1.8;
128104
--spruce-line-height-heading: calc(2px + 2ex + 2px);
129-
130-
// Layout Sizing
131105
--spruce-border-radius: 0.425rem;
132106
--spruce-border-radius-sm: 0.425rem;
133107
--spruce-border-radius-lg: 0.925rem;
134-
--spruce-box-shadow: 0 0.75rem 1.25rem hsla(0, 0%, 0%, 0.05);
135-
108+
--spruce-box-shadow: 0 0.75rem 1.25rem hsla(200, 30%, 20%, 0.07);
136109
--spruce-container-inline-size: 84rem;
137110
--spruce-max-content-inline-size: 70rem;
138111
--spruce-container-gap: clamp(1.5rem, 5vw, 3rem);
139112
--spruce-section-gap: clamp(5rem, 7vw, 7rem);
113+
}
140114

141-
--spruce-inline-padding: 0.1em 0.3em;
142-
--spruce-page-margin: 2cm;
143-
--spruce-hidden-elements: header, footer, aside, nav, form, iframe, [class^="aspect-ratio"];
144115

145-
--spruce-duration: 0.15s;
146-
--spruce-timing-function: ease-in-out;
116+
// -----------------------------------------------------------------------------
117+
// Dark Theme (Salesforce Blue Themed)
118+
// -----------------------------------------------------------------------------
119+
120+
:root[data-theme-mode="dark"] {
121+
color-scheme: dark;
122+
123+
// --- SALESFORCE BLUE PALETTE (DARK MODE) ---
124+
// Background is the darkest blue
125+
--brand-dark-bg: hsl(197, 89%, 15%); // #04354A
126+
// Primary accent is the brightest blue
127+
--brand-dark-primary: hsl(200, 89%, 55%); // #28B6F2
128+
// Hover state is the very lightest blue
129+
--brand-dark-hover: hsl(203, 89%, 78%); // #88D7F8
130+
// Text is an off-white for readability
131+
--brand-dark-text: hsl(210, 25%, 90%);
132+
--brand-dark-heading: hsl(0, 0%, 100%);
133+
134+
// Base Colors (Dark Mode)
135+
--spruce-base-color-background: var(--brand-dark-bg);
136+
--spruce-base-color-border: hsla(0, 0%, 100%, 0.1);
137+
--spruce-base-color-heading: var(--brand-dark-heading);
138+
--spruce-base-color-text: var(--brand-dark-text);
139+
--spruce-base-color-primary: var(--brand-dark-primary);
140+
--spruce-base-color-secondary: var(--brand-dark-hover);
141+
--spruce-base-color-link: var(--brand-dark-primary);
142+
--spruce-base-color-link-hover: var(--brand-dark-hover);
143+
144+
// Element-specific Colors (Dark Mode)
145+
--spruce-base-color-blockquote-border: var(--brand-dark-primary);
146+
--spruce-base-color-marker: var(--brand-dark-primary);
147+
--spruce-base-color-code-background: hsla(197, 88%, 25%, 0.5);
148+
--spruce-base-color-code-foreground: var(--brand-dark-text);
149+
150+
// Component Colors: Buttons (Dark Mode)
151+
--spruce-btn-color-primary-background: var(--brand-dark-primary);
152+
--spruce-btn-color-primary-background-hover: var(--brand-dark-hover);
153+
--spruce-btn-color-primary-foreground: var(--brand-darkest); /* Dark text on bright button */
154+
--spruce-btn-color-primary-shadow: hsla(200, 89%, 55%, 0.3);
155+
--spruce-btn-color-secondary-background: var(--brand-dark-hover);
156+
--spruce-btn-color-secondary-background-hover: var(--brand-dark-primary);
157+
--spruce-btn-color-secondary-foreground: var(--brand-darkest);
158+
--spruce-btn-color-secondary-shadow: hsla(203, 89%, 78%, 0.3);
159+
160+
// Component Colors: Forms (Dark Mode)
161+
--spruce-form-color-background: hsl(197, 89%, 18%);
162+
--spruce-form-color-border: hsla(0, 0%, 100%, 0.15);
163+
--spruce-form-color-border-focus: var(--brand-dark-primary);
164+
--spruce-form-color-check-background: var(--brand-dark-primary);
165+
--spruce-form-color-check-foreground: var(--brand-darkest);
166+
--spruce-form-color-ring-focus: hsla(200, 89%, 55%, 0.25);
167+
--spruce-form-color-label: var(--brand-dark-heading);
168+
--spruce-form-color-legend: var(--brand-dark-heading);
169+
--spruce-form-color-text: var(--brand-dark-text);
170+
171+
// Component Colors: Other (Dark Mode)
172+
--spruce-card-color-background: hsl(197, 89%, 18%);
173+
--spruce-footer-color-background: var(--brand-darkest);
174+
--spruce-navigation-color-icon-background: hsla(0, 0%, 100%, 0.05);
175+
--spruce-navigation-color-icon-background-hover: var(--brand-dark-primary);
176+
--spruce-navigation-color-icon-foreground: var(--brand-dark-primary);
177+
--spruce-navigation-color-icon-foreground-hover: var(--brand-darkest);
178+
--spruce-selection-color-background: var(--brand-dark-primary);
179+
--spruce-selection-color-foreground: var(--brand-darkest);
147180
}
181+
182+
//
183+
// --- ANIMATION (Unchanged) ---
184+
//
185+
186+
@media (prefers-reduced-motion: no-preference) {
187+
:root {
188+
--spruce-duration: 0.15s;
189+
--spruce-timing-function: ease-in-out;
190+
}
191+
}

0 commit comments

Comments
 (0)