DangerousThings/dt-design-system
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix hardcoded colors in classic tokens and form components

Browse Source 
Replace hardcoded hex/opacity values with CSS custom properties for
proper theming support across brands.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
michael
2026-03-04 10:34:31 -08:00
parent ca55f5a497
commit 852a3af854
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/tokens/src/brands/classic.ts
View File

@@ -40,7 +40,7 @@ export const classic: BrandTokens = {
primary: "#0891b2", primary: "#0891b2",
primaryDim: "#0e7490", primaryDim: "#0e7490",
secondary: "#c026d3", secondary: "#c026d3",
accent: "#00ff88", accent: "#059669",
other: "#c026d3", other: "#c026d3",
success: "#16a34a", success: "#16a34a",

8
packages/web/src/components/forms-dt.css
View File

@@ -124,7 +124,7 @@
left: 3px; left: 3px;
width: 20px; width: 20px;
height: 20px; height: 20px;
background: #ffffff; background: var(--color-text-primary);
transition: left var(--transition-fast); transition: left var(--transition-fast);
} }
@@ -192,7 +192,7 @@
.dt-progress { .dt-progress {
width: 100%; width: 100%;
height: 4px; height: 4px;
background: rgba(255, 255, 255, 0.1); background: rgba(var(--color-primary-rgb), 0.1);
border-radius: 0; border-radius: 0;
overflow: hidden; overflow: hidden;
} }
@@ -253,7 +253,7 @@
} }
.dt-accordion-header:hover { .dt-accordion-header:hover {
opacity: 0.7; background: var(--color-surface-hover);
} }
.dt-accordion-header[aria-expanded="true"] { .dt-accordion-header[aria-expanded="true"] {
@@ -312,7 +312,7 @@
} }
.dt-stepper-btn:hover { .dt-stepper-btn:hover {
opacity: 0.7; background: rgba(var(--color-primary-rgb), 0.1);
} }
.dt-stepper-btn:disabled { .dt-stepper-btn:disabled {