@blibliki/ui 0.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/README.md +91 -0
  2. package/dist/index.d.ts +542 -0
  3. package/dist/index.js +2 -0
  4. package/dist/index.js.map +1 -0
  5. package/eslint/index.js +18 -0
  6. package/eslint/ui-governance-plugin.js +252 -0
  7. package/package.json +59 -0
  8. package/scripts/check-css-palette.mjs +92 -0
  9. package/src/UIProvider.tsx +38 -0
  10. package/src/components/badge.tsx +57 -0
  11. package/src/components/button.tsx +65 -0
  12. package/src/components/card.tsx +44 -0
  13. package/src/components/context-menu.tsx +239 -0
  14. package/src/components/dialog.tsx +127 -0
  15. package/src/components/divider.tsx +45 -0
  16. package/src/components/dropdown-menu.tsx +243 -0
  17. package/src/components/encoder.tsx +323 -0
  18. package/src/components/fader.tsx +230 -0
  19. package/src/components/icon-button.tsx +51 -0
  20. package/src/components/input.tsx +38 -0
  21. package/src/components/label.tsx +14 -0
  22. package/src/components/select.tsx +342 -0
  23. package/src/components/stack.tsx +90 -0
  24. package/src/components/surface.tsx +88 -0
  25. package/src/components/switch.tsx +72 -0
  26. package/src/components/text.tsx +59 -0
  27. package/src/components/textarea.tsx +43 -0
  28. package/src/index.ts +120 -0
  29. package/src/lib/cn.ts +6 -0
  30. package/src/semantic.ts +72 -0
  31. package/src/theme.ts +161 -0
  32. package/styles.css +2041 -0
  33. package/tokens.css +90 -0
package/src/theme.ts ADDED
@@ -0,0 +1,161 @@
1
+ export type UIMode = "light" | "dark";
2
+
3
+ export interface UIColorTokens {
4
+ surface0: string;
5
+ surfaceRaised: string;
6
+ surfaceRaisedHover: string;
7
+ surface1: string;
8
+ surface2: string;
9
+ borderSubtle: string;
10
+ textPrimary: string;
11
+ textSecondary: string;
12
+ textMuted: string;
13
+ primary500: string;
14
+ primary600: string;
15
+ primaryContrast: string;
16
+ secondary500: string;
17
+ secondary600: string;
18
+ secondaryContrast: string;
19
+ error500: string;
20
+ error600: string;
21
+ errorContrast: string;
22
+ warning500: string;
23
+ warning600: string;
24
+ warningContrast: string;
25
+ info500: string;
26
+ info600: string;
27
+ infoContrast: string;
28
+ success500: string;
29
+ success600: string;
30
+ successContrast: string;
31
+ }
32
+
33
+ export interface UIRadiusTokens {
34
+ sm: string;
35
+ md: string;
36
+ lg: string;
37
+ }
38
+
39
+ export interface UITheme {
40
+ light?: Partial<UIColorTokens>;
41
+ dark?: Partial<UIColorTokens>;
42
+ radius?: Partial<UIRadiusTokens>;
43
+ }
44
+
45
+ export interface UIResolvedTheme {
46
+ light: UIColorTokens;
47
+ dark: UIColorTokens;
48
+ radius: UIRadiusTokens;
49
+ }
50
+
51
+ const defaultLight: UIColorTokens = {
52
+ surface0: "oklch(0.985 0.004 260)",
53
+ surfaceRaised: "oklch(0.996 0.002 260)",
54
+ surfaceRaisedHover: "oklch(1 0 0)",
55
+ surface1: "oklch(0.96 0.006 260)",
56
+ surface2: "oklch(0.92 0.008 260)",
57
+ borderSubtle: "oklch(0.84 0.01 260)",
58
+ textPrimary: "oklch(0.18 0.01 260)",
59
+ textSecondary: "oklch(0.33 0.01 260)",
60
+ textMuted: "oklch(0.48 0.01 260)",
61
+ primary500: "oklch(0.62 0.19 255)",
62
+ primary600: "oklch(0.55 0.2 255)",
63
+ primaryContrast: "oklch(0.98 0 0)",
64
+ secondary500: "oklch(0.62 0.2 300)",
65
+ secondary600: "oklch(0.55 0.21 300)",
66
+ secondaryContrast: "oklch(0.98 0 0)",
67
+ error500: "oklch(0.63 0.24 28)",
68
+ error600: "oklch(0.57 0.24 28)",
69
+ errorContrast: "oklch(0.98 0 0)",
70
+ warning500: "oklch(0.78 0.17 78)",
71
+ warning600: "oklch(0.72 0.17 78)",
72
+ warningContrast: "oklch(0.2 0.01 260)",
73
+ info500: "oklch(0.66 0.14 220)",
74
+ info600: "oklch(0.59 0.15 220)",
75
+ infoContrast: "oklch(0.98 0 0)",
76
+ success500: "oklch(0.66 0.17 150)",
77
+ success600: "oklch(0.59 0.18 150)",
78
+ successContrast: "oklch(0.98 0 0)",
79
+ };
80
+
81
+ const defaultDark: UIColorTokens = {
82
+ surface0: "oklch(0.12 0.01 260)",
83
+ surfaceRaised: "oklch(0.2 0.01 260)",
84
+ surfaceRaisedHover: "oklch(0.24 0.01 260)",
85
+ surface1: "oklch(0.16 0.01 260)",
86
+ surface2: "oklch(0.21 0.01 260)",
87
+ borderSubtle: "oklch(0.34 0.01 260)",
88
+ textPrimary: "oklch(0.96 0.01 260)",
89
+ textSecondary: "oklch(0.76 0.01 260)",
90
+ textMuted: "oklch(0.62 0.01 260)",
91
+ primary500: "oklch(0.67 0.19 255)",
92
+ primary600: "oklch(0.6 0.2 255)",
93
+ primaryContrast: "oklch(0.98 0 0)",
94
+ secondary500: "oklch(0.67 0.2 300)",
95
+ secondary600: "oklch(0.6 0.21 300)",
96
+ secondaryContrast: "oklch(0.98 0 0)",
97
+ error500: "oklch(0.67 0.22 28)",
98
+ error600: "oklch(0.6 0.23 28)",
99
+ errorContrast: "oklch(0.98 0 0)",
100
+ warning500: "oklch(0.79 0.15 78)",
101
+ warning600: "oklch(0.73 0.16 78)",
102
+ warningContrast: "oklch(0.2 0.01 260)",
103
+ info500: "oklch(0.69 0.13 220)",
104
+ info600: "oklch(0.62 0.14 220)",
105
+ infoContrast: "oklch(0.98 0 0)",
106
+ success500: "oklch(0.69 0.16 150)",
107
+ success600: "oklch(0.62 0.17 150)",
108
+ successContrast: "oklch(0.98 0 0)",
109
+ };
110
+
111
+ const defaultRadius: UIRadiusTokens = {
112
+ sm: "4px",
113
+ md: "8px",
114
+ lg: "12px",
115
+ };
116
+
117
+ export const createTheme = (theme: UITheme = {}): UIResolvedTheme => ({
118
+ light: { ...defaultLight, ...theme.light },
119
+ dark: { ...defaultDark, ...theme.dark },
120
+ radius: { ...defaultRadius, ...theme.radius },
121
+ });
122
+
123
+ export function themeToCssVariables(
124
+ theme: UIResolvedTheme,
125
+ mode: UIMode,
126
+ ): Record<string, string> {
127
+ const colors = mode === "dark" ? theme.dark : theme.light;
128
+
129
+ return {
130
+ "--ui-color-surface-0": colors.surface0,
131
+ "--ui-color-surface-raised": colors.surfaceRaised,
132
+ "--ui-color-surface-raised-hover": colors.surfaceRaisedHover,
133
+ "--ui-color-surface-1": colors.surface1,
134
+ "--ui-color-surface-2": colors.surface2,
135
+ "--ui-color-border-subtle": colors.borderSubtle,
136
+ "--ui-color-text-primary": colors.textPrimary,
137
+ "--ui-color-text-secondary": colors.textSecondary,
138
+ "--ui-color-text-muted": colors.textMuted,
139
+ "--ui-color-primary-500": colors.primary500,
140
+ "--ui-color-primary-600": colors.primary600,
141
+ "--ui-color-primary-contrast": colors.primaryContrast,
142
+ "--ui-color-secondary-500": colors.secondary500,
143
+ "--ui-color-secondary-600": colors.secondary600,
144
+ "--ui-color-secondary-contrast": colors.secondaryContrast,
145
+ "--ui-color-error-500": colors.error500,
146
+ "--ui-color-error-600": colors.error600,
147
+ "--ui-color-error-contrast": colors.errorContrast,
148
+ "--ui-color-warning-500": colors.warning500,
149
+ "--ui-color-warning-600": colors.warning600,
150
+ "--ui-color-warning-contrast": colors.warningContrast,
151
+ "--ui-color-info-500": colors.info500,
152
+ "--ui-color-info-600": colors.info600,
153
+ "--ui-color-info-contrast": colors.infoContrast,
154
+ "--ui-color-success-500": colors.success500,
155
+ "--ui-color-success-600": colors.success600,
156
+ "--ui-color-success-contrast": colors.successContrast,
157
+ "--ui-radius-sm": theme.radius.sm,
158
+ "--ui-radius-md": theme.radius.md,
159
+ "--ui-radius-lg": theme.radius.lg,
160
+ };
161
+ }