Context
In escrow-v2#130, we're migrating to Tailwind CSS and ui-components-library v3. As part of this migration, we need to access theme colors programmatically in JavaScript to dynamically style timeline components.
Current Approach
We're currently using getComputedStyle(document.documentElement).getPropertyValue() to read CSS custom properties at runtime:
function getThemeColor(variant: Variant): string {
return getComputedStyle(document.documentElement).getPropertyValue(variantToCssVar[variant]).trim();
}Problem
While this approach works and keeps the colors in sync with CSS, it has performance implications:
- DOM queries are required every time a color is needed
- Slight delay when switching themes due to these queries
- Not optimal for components that need frequent color access
Proposed Solution
Export theme colors from ui-components-library in a JavaScript/JSON consumable format (e.g., as a JavaScript object or JSON file) alongside the CSS variables. This would allow consuming applications to:
- Access colors directly without DOM queries
- Improve performance when theme colors are needed in JavaScript logic
- Maintain type safety with TypeScript definitions
Example Usage
import { lightTheme, darkTheme } from '@kleros/ui-components-library/theme';
const color = isLightTheme ? lightTheme.primaryBlue : darkTheme.primaryBlue;Related
Context
In escrow-v2#130, we're migrating to Tailwind CSS and ui-components-library v3. As part of this migration, we need to access theme colors programmatically in JavaScript to dynamically style timeline components.
Current Approach
We're currently using
getComputedStyle(document.documentElement).getPropertyValue()to read CSS custom properties at runtime:Problem
While this approach works and keeps the colors in sync with CSS, it has performance implications:
Proposed Solution
Export theme colors from ui-components-library in a JavaScript/JSON consumable format (e.g., as a JavaScript object or JSON file) alongside the CSS variables. This would allow consuming applications to:
Example Usage
Related