style

1import { mergeDeep } from '@unocss/core';
2import { colord, generateColorPalette } from '@skyroc/color';
3import themes from './theme.json';
4import type {
5  ColorOptions,
6  FeedbackColorOfThemeCssVarKey,
7  FeedbackColorOfThemeCssVars,
8  FeedbackColorOfThemeCssVarsVariant,
9  SidebarColorOfThemeCssVarKey,
10  SidebarColorOfThemeCssVarsVariant,
11  ThemeCSSVarKey,
12  ThemeCSSVars,
13  ThemeCSSVarsVariant,
14  ThemeConfig,
15  ThemeOptions
16} from './types';
17 
18const builtinThemes = themes as ThemeConfig[];
19 
20type CSSVarKey = ThemeCSSVarKey | FeedbackColorOfThemeCssVarKey | SidebarColorOfThemeCssVarKey;
21 
22const themeCSSVarKeys: CSSVarKey[] = [
23  'background',
24  'foreground',
25  'card',
26  'card-foreground',
27  'popover',
28  'popover-foreground',
29  'primary',
30  'primary-foreground',
31  'destructive',
32  'destructive-foreground',
33  'success',
34  'success-foreground',
35  'warning',
36  'warning-foreground',
37  'info',
38  'info-foreground',
39  'secondary',
40  'secondary-foreground',
41  'carbon',
42  'carbon-foreground',
43  'muted',
44  'muted-foreground',
45  'accent',
46  'accent-foreground',
47  'border',
48  'input',
49  'ring',
50  'sidebar-background',
51  'sidebar-foreground',
52  'sidebar-border',
53  'sidebar-ring',
54  'sidebar-primary',
55  'sidebar-primary-foreground',
56  'sidebar-accent',
57  'sidebar-accent-foreground'
58];
59 
60const themeColorKeys: CSSVarKey[] = ['primary', 'destructive', 'success', 'warning', 'info', 'carbon'];
61 
62function getRadiusCSSVars(radius: number) {
63  return `--radius: ${radius}rem;`;
64}
65 
66function getRadiusCSSVarsStyles(radius: number) {
67  const radiusCSS = getRadiusCSSVars(radius);
68 
69  return radiusCSS;
70}
71 
72export function generateGlobalStyles() {
73  return {
74    '*': {
75      borderColor: 'hsl(var(--border))'
76    },
77    '.lucide': {
78      height: '1.25em',
79      width: '1.25em'
80    },
81    'body': {
82      background: 'hsl(var(--background))',
83      color: 'hsl(var(--foreground))'
84    }
85  };
86}
87 
88function getBuiltInTheme(name: string): ThemeCSSVarsVariant {
89  const theme = builtinThemes.find(t => t.name === name);
90 
91  if (!theme) {
92    throw new Error(`Unknown color: ${name}`);
93  }
94 
95  return {
96    name,
97    ...theme.cssVars
98  };
99}
100 
101function getColorTheme(color: ColorOptions): ThemeCSSVarsVariant {
102  let light: ThemeCSSVars;
103  let dark: ThemeCSSVars;
104  let name: string;
105 
106  if (typeof color === 'string') {
107    name = color;
108    ({ dark, light } = getBuiltInTheme(color));
109  }
110  else if ('base' in color) {
111    name = color.base;
112    ({ dark, light } = mergeDeep(getBuiltInTheme(color.base), color));
113  }
114// … truncated