Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | 30x 5640x 5520x 5520x 5520x 5520x 30x 120x | import { vars } from "nativewind";
import { lightColors } from "./colors";
// Helper to convert hex to space-separated RGB (for Tailwind opacity support)
export const hexToRgbVars = (hex?: string): string => {
if (!hex || typeof hex !== "string" || !hex.startsWith("#")) return "0 0 0";
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return `${r} ${g} ${b}`;
};
export const createThemeVars = (colorSet: typeof lightColors) => {
return vars({
// Background
"--color-bg-primary": hexToRgbVars(colorSet.background.primary),
"--color-bg-page": hexToRgbVars(colorSet.background.page),
"--color-bg-page-muted": hexToRgbVars(colorSet.background.pageMuted),
"--color-bg-secondary": hexToRgbVars(colorSet.background.secondary),
"--color-bg-tertiary": hexToRgbVars(colorSet.background.tertiary),
"--color-bg-dark": hexToRgbVars(colorSet.background.dark),
"--color-bg-modal": hexToRgbVars(colorSet.background.modal),
"--color-bg-overlay": hexToRgbVars(colorSet.background.overlay),
"--color-bg-disabled": hexToRgbVars(colorSet.background.disabled),
"--color-bg-card": hexToRgbVars(colorSet.background.card),
"--color-bg-selected": hexToRgbVars(colorSet.background.selected),
"--color-bg-selected-strong": hexToRgbVars(colorSet.background.selectedStrong),
// Text
"--color-text-primary": hexToRgbVars(colorSet.text.primary),
"--color-text-secondary": hexToRgbVars(colorSet.text.secondary),
"--color-text-tertiary": hexToRgbVars(colorSet.text.tertiary),
"--color-text-heading": hexToRgbVars(colorSet.text.heading),
"--color-text-muted": hexToRgbVars(colorSet.text.muted),
"--color-text-placeholder": hexToRgbVars(colorSet.text.placeholder),
"--color-text-disabled-soft": hexToRgbVars(colorSet.text.disabledSoft),
"--color-text-disabled": hexToRgbVars(colorSet.text.disabled),
"--color-text-emphasis": hexToRgbVars(colorSet.text.emphasis),
"--color-text-white": hexToRgbVars(colorSet.text.white),
"--color-text-dark": hexToRgbVars(colorSet.text.dark),
"--color-text-success": hexToRgbVars(colorSet.text.success),
"--color-text-error": hexToRgbVars(colorSet.text.error),
"--color-text-warning": hexToRgbVars(colorSet.text.warning),
"--color-text-info": hexToRgbVars(colorSet.text.info),
// Border
"--color-border-default": hexToRgbVars(colorSet.border.default),
"--color-border-primary": hexToRgbVars(colorSet.border.primary),
"--color-border-secondary": hexToRgbVars(colorSet.border.secondary),
"--color-border-tertiary": hexToRgbVars(colorSet.border.tertiary),
"--color-border-subtle": hexToRgbVars(colorSet.border.subtle),
"--color-border-strong": hexToRgbVars(colorSet.border.strong),
"--color-border-divider": hexToRgbVars(colorSet.border.divider),
"--color-border-slot": hexToRgbVars(colorSet.border.slot),
"--color-border-disabled": hexToRgbVars(colorSet.border.disabled),
// Icon
"--color-icon-default": hexToRgbVars(colorSet.icon.default),
"--color-icon-primary": hexToRgbVars(colorSet.icon.primary),
"--color-icon-active": hexToRgbVars(colorSet.icon.active),
"--color-icon-inactive": hexToRgbVars(colorSet.icon.inactive),
"--color-icon-subtle": hexToRgbVars(colorSet.icon.subtle),
"--color-icon-strong": hexToRgbVars(colorSet.icon.strong),
"--color-icon-emphasis": hexToRgbVars(colorSet.icon.emphasis),
"--color-icon-success": hexToRgbVars(colorSet.icon.success),
"--color-icon-error": hexToRgbVars(colorSet.icon.error),
// Skeleton
"--color-skeleton-default": hexToRgbVars(colorSet.skeleton.default),
"--color-skeleton-active": hexToRgbVars(colorSet.skeleton.active),
});
};
|