All files / packages/ui/src/themes utils.ts

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
 
 
 
 
 
24x
1296x
1248x
1248x
1248x
1248x
 
 
24x
48x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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({
    "--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-text-primary": hexToRgbVars(colorSet.text.primary),
    "--color-text-secondary": hexToRgbVars(colorSet.text.secondary),
    "--color-text-tertiary": hexToRgbVars(colorSet.text.tertiary),
    "--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-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-disabled": hexToRgbVars(colorSet.border.disabled),
 
    "--color-icon-primary": hexToRgbVars(colorSet.icon.primary),
    "--color-icon-active": hexToRgbVars(colorSet.icon.active),
    "--color-icon-inactive": hexToRgbVars(colorSet.icon.inactive),
    "--color-icon-success": hexToRgbVars(colorSet.icon.success),
    "--color-icon-error": hexToRgbVars(colorSet.icon.error),
  });
};