webcake-ui-kit 1.0.0 → 1.0.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 (74) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +358 -8
  3. package/package.json +68 -5
  4. package/src/components/accordion/Accordion.vue +70 -0
  5. package/src/components/accordion/accordion.css +5 -0
  6. package/src/components/accordion-item/AccordionItem.vue +98 -0
  7. package/src/components/accordion-item/accordion-item.css +143 -0
  8. package/src/components/alert-dialog/AlertDialog.vue +82 -0
  9. package/src/components/alert-dialog/alert-dialog.css +33 -0
  10. package/src/components/badge/Badge.vue +2 -2
  11. package/src/components/badge/badge.css +1 -4
  12. package/src/components/breadcrumb/Breadcrumb.vue +85 -0
  13. package/src/components/breadcrumb/breadcrumb.css +90 -0
  14. package/src/components/button/Button.vue +77 -10
  15. package/src/components/button/button.css +258 -24
  16. package/src/components/button-group/ButtonGroup.vue +25 -0
  17. package/src/components/button-group/button-group.css +30 -0
  18. package/src/components/checkbox/Checkbox.vue +55 -0
  19. package/src/components/checkbox/checkbox.css +86 -0
  20. package/src/components/checkbox-group/CheckboxGroup.vue +50 -0
  21. package/src/components/checkbox-group/checkbox-group.css +35 -0
  22. package/src/components/dialog/Dialog.vue +355 -0
  23. package/src/components/dialog/dialog.css +255 -0
  24. package/src/components/divider/Divider.vue +35 -0
  25. package/src/components/divider/divider.css +38 -0
  26. package/src/components/input/Input.vue +99 -0
  27. package/src/components/input/input.css +123 -0
  28. package/src/components/pagination/Pagination.vue +211 -0
  29. package/src/components/pagination/pagination.css +13 -0
  30. package/src/components/radio/Radio.vue +74 -0
  31. package/src/components/radio/radio.css +89 -0
  32. package/src/components/radio-group/RadioGroup.vue +70 -0
  33. package/src/components/radio-group/radio_group.css +11 -0
  34. package/src/components/rich-checkbox-group/RichCheckboxGroup.vue +59 -0
  35. package/src/components/rich-checkbox-group/rich-checkbox-group.css +54 -0
  36. package/src/components/rich-switch-group/RichSwitchGroup.vue +49 -0
  37. package/src/components/rich-switch-group/rich_switch_group.css +45 -0
  38. package/src/components/select/Select.vue +262 -0
  39. package/src/components/select/select.css +207 -0
  40. package/src/components/select-option/SelectOption.vue +82 -0
  41. package/src/components/select-option/select_option.css +60 -0
  42. package/src/components/sidebar-group-label/SidebarGroupLabel.vue +68 -0
  43. package/src/components/sidebar-group-label/sidebar_group_label.css +61 -0
  44. package/src/components/sidebar-item/SidebarItem.vue +110 -0
  45. package/src/components/sidebar-item/sidebar_item.css +142 -0
  46. package/src/components/slider/Slider.vue +255 -0
  47. package/src/components/slider/slider.css +89 -0
  48. package/src/components/spinner/Spinner.vue +47 -0
  49. package/src/components/spinner/spinner.css +48 -0
  50. package/src/components/switch/Switch.vue +32 -0
  51. package/src/components/switch/switch.css +46 -0
  52. package/src/components/switch-group/SwitchGroup.vue +32 -0
  53. package/src/components/switch-group/switch_group.css +28 -0
  54. package/src/components/tabs/Tabs.vue +57 -0
  55. package/src/components/tabs/tabs.css +118 -0
  56. package/src/components/tag/Tag.vue +47 -0
  57. package/src/components/tag/tag.css +115 -0
  58. package/src/components/toggle/Toggle.vue +112 -0
  59. package/src/components/toggle/toggle.css +174 -0
  60. package/src/components/toggle-group/ToggleGroup.vue +57 -0
  61. package/src/components/toggle-group/toggle-group.css +68 -0
  62. package/src/icons/LoaderIcon.vue +22 -0
  63. package/src/index.js +29 -2
  64. package/src/styles/.omc/state/agent-replay-645326b7-372b-463d-ab45-0adaafe31a51.jsonl +2 -0
  65. package/src/styles/.omc/state/subagent-tracking.json +7 -0
  66. package/src/styles/alpha_colors.css +35 -37
  67. package/src/styles/border_radius.css +21 -23
  68. package/src/styles/brand_colors.css +37 -39
  69. package/src/styles/chart_colors.css +27 -29
  70. package/src/styles/color_general.css +206 -201
  71. package/src/styles/raw_colors.css +267 -269
  72. package/src/styles/shadow.css +10 -12
  73. package/src/styles/spacing.css +31 -33
  74. package/src/styles/typography.css +76 -78
@@ -1,202 +1,207 @@
1
- @layer base {
2
- .theme {
3
- --font-heading: var(--font-sans);
4
- --color-destructive: var(--color-red-600);
5
- }
6
-
7
- :root {
8
- /* General */
9
- --primary-bg: var(--color-white-alpha-100);
10
- --secondary-bg: var(--color-neutral-100);
11
- --tertiary-bg: var(--color-neutral-200);
12
- --accent-bg: var(--color-neutral-50);
13
- --muted-bg: var(--color-neutral-100);
14
- --primary-fg: var(--color-neutral-950);
15
- --secondary-fg: var(--color-neutral-700);
16
- --accent-fg: var(--color-brand-shades-900);
17
- --muted-fg: var(--color-neutral-500);
18
- --primary-brand-bg: var(--color-brand-shades-600);
19
- --primary-brand-fg: var(--color-brand-shades-600);
20
- --inverse-fg: var(--color-white-alpha-100);
21
- --destructive: var(--color-red-600);
22
- --destructive-inverse-fg: var(--color-white-alpha-100);
23
- --border-primary: var(--color-neutral-200);
24
- --border-secondary: var(--color-neutral-100);
25
- --border-focus: var(--color-neutral-300);
26
- --border-brand: var(--color-brand-shades-600);
27
-
28
- /* Start: Unofficial */
29
- --primary-hover: var(--color-neutral-50);
30
- --secondary-hover: var(--color-neutral-50);
31
- --primary-brand-hover: var(--color-brand-shades-800);
32
- --negative-subtle: var(--color-red-50);
33
- --destructive-border: var(--color-red-500);
34
- --destructive-text: var(--color-red-600);
35
- --ghost: var(--color-white-alpha-001);
36
- --ghost-foreground: var(--color-neutral-700);
37
- --ghost-hover: var(--color-black-alpha-5);
38
- --outline: var(--color-white-alpha-10);
39
- --outline-hover: var(--color-black-alpha-333);
40
- --outline-active: var(--color-white-alpha-5);
41
- --accent-0: var(--color-neutral-50);
42
- --accent-1: var(--color-neutral-100);
43
- --accent-2: var(--color-neutral-200);
44
- --border-0: var(--color-neutral-50);
45
- --border-1: var(--color-neutral-100);
46
- --border-2: var(--color-neutral-200);
47
- --border-3: var(--color-neutral-300);
48
- --border-5: var(--color-neutral-500);
49
- --mid-alt: var(--color-neutral-600);
50
- --backdrop: var(--color-black-alpha-60);
51
- --foreground-alt: var(--color-neutral-700);
52
- --body-background: var(--color-white-alpha-100);
53
- --neutral-50: var(--color-neutral-50);
54
- --neutral-100: var(--color-neutral-100);
55
- --neutral-200: var(--color-neutral-200);
56
- --neutral-300: var(--color-neutral-300);
57
- --neutral-400: var(--color-neutral-400);
58
- --neutral-500: var(--color-neutral-500);
59
- --neutral-600: var(--color-neutral-600);
60
- --neutral-700: var(--color-neutral-700);
61
- --neutral-800: var(--color-neutral-800);
62
- /* Notification */
63
- --positive-500: var(--color-green-500);
64
- --info-500: var(--color-blue-500);
65
- --warning-500: var(--color-yellow-500);
66
- /* Brand */
67
- --brand-50: var(--color-brand-shades-50);
68
- --brand-100: var(--color-brand-shades-100);
69
- --brand-200: var(--color-brand-shades-200);
70
- --brand-300: var(--color-brand-shades-300);
71
- --brand-400: var(--color-brand-shades-400);
72
- --brand-500: var(--color-brand-shades-500);
73
- --brand-600: var(--color-brand-shades-600);
74
- --brand-700: var(--color-brand-shades-700);
75
- --brand-800: var(--color-brand-shades-800);
76
- /* End: Unofficial */
77
-
78
- /* Components */
79
- --card: var(--color-white-alpha-100);
80
- --card-foreground: var(--color-neutral-950);
81
-
82
- --popover: var(--color-white-alpha-100);
83
- --popover-foreground: var(--color-black-alpha-100);
84
-
85
- --sidebar: var(--color-neutral-50);
86
- --sidebar-muted: var(--color-neutral-500);
87
- --sidebar-acccent: var(--color-neutral-200);
88
- --sidebar-foreground: var(--color-neutral-700);
89
- --sidebar-accent-foreground: var(--color-neutral-900);
90
- --sidebar-primary: var(--color-neutral-900);
91
- --sidebar-primary-foreground: var(--color-neutral-50);
92
- --sidebar-border: var(--color-neutral-200);
93
- --sidebar-ring: var(--color-neutral-300);
94
-
95
- --input: var(--color-white-alpha-100);
96
-
97
- /* Effect */
98
- --ring: var(--color-neutral-200);
99
- --ring-error: var(--color-red-300);
100
- }
101
-
102
- .dark {
103
- /* General */
104
- --primary-bg: var(--color-black-alpha-100);
105
- --secondary-bg: var(--color-neutral-800);
106
- --tertiary-bg: var(--color-neutral-700);
107
- --accent-bg: var(--color-neutral-900);
108
- --muted-bg: var(--color-neutral-900);
109
- --primary-fg: var(--color-neutral-50);
110
- --secondary-fg: var(--color-neutral-300);
111
- --accent-fg: var(--color-brand-shades-100);
112
- --muted-fg: var(--color-neutral-400);
113
- --primary-brand-bg: var(--color-brand-shades-500);
114
- --primary-brand-fg: var(--color-brand-shades-500);
115
- --inverse-fg: var(--color-white-alpha-100);
116
- --destructive: #9e4042;
117
- --destructive-inverse-fg: var(--color-white-alpha-100);
118
- --border-primary: var(--color-neutral-700);
119
- --border-secondary: var(--color-neutral-800);
120
- --border-focus: var(--color-neutral-600);
121
- --border-brand: var(--color-brand-shades-400);
122
-
123
- /* Start: Unofficial */
124
- --primary-hover: var(--color-neutral-950);
125
- --secondary-hover: var(--color-neutral-900);
126
- --primary-brand-hover: var(--color-brand-shades-300);
127
- --negative-subtle: var(--color-red-950);
128
- --destructive-border: var(--color-red-500);
129
- --destructive-text: var(--color-red-400);
130
- --ghost: var(--color-white-alpha-001);
131
- --ghost-foreground: var(--color-neutral-200);
132
- --ghost-hover: var(--color-black-alpha-10);
133
- --outline: var(--color-white-alpha-5);
134
- --outline-hover: var(--color-black-alpha-10);
135
- --outline-active: var(--color-white-alpha-15);
136
- --accent-0: var(--color-neutral-950);
137
- --accent-1: var(--color-neutral-800);
138
- --accent-2: var(--color-neutral-800);
139
- --border-0: var(--color-neutral-950);
140
- --border-1: var(--color-neutral-900);
141
- --border-2: var(--color-neutral-700);
142
- --border-3: var(--color-neutral-600);
143
- --border-5: var(--color-neutral-500);
144
- --mid-alt: var(--color-neutral-400);
145
- --foreground-alt: var(--color-neutral-300);
146
- --backdrop: var(--color-black-alpha-60);
147
- --body-background: var(--color-neutral-950);
148
-
149
- --neutral-50: var(--color-neutral-950);
150
- --neutral-100: var(--color-neutral-900);
151
- --neutral-200: var(--color-neutral-800);
152
- --neutral-300: var(--color-neutral-700);
153
- --neutral-400: var(--color-neutral-600);
154
- --neutral-500: var(--color-neutral-500);
155
- --neutral-600: var(--color-neutral-400);
156
- --neutral-700: var(--color-neutral-300);
157
- --neutral-800: var(--color-neutral-200);
158
-
159
- --green-500: var(--color-green-500);
160
- --blue-500: var(--color-blue-500);
161
- --yellow-500: var(--color-yellow-500);
162
-
163
- --positive-500: var(--color-green-500);
164
- --info-500: var(--color-blue-500);
165
- --warning-500: var(--color-yellow-500);
166
-
167
- /* Brand */
168
- --brand-50: var(--color-brand-shades-950);
169
- --brand-100: var(--color-brand-shades-900);
170
- --brand-200: var(--color-brand-shades-800);
171
- --brand-300: var(--color-brand-shades-700);
172
- --brand-400: var(--color-brand-shades-600);
173
- --brand-500: var(--color-brand-shades-500);
174
- --brand-600: var(--color-brand-shades-400);
175
- --brand-700: var(--color-brand-shades-300);
176
- --brand-800: var(--color-brand-shades-200);
177
- /* End: Unofficial */
178
-
179
- /* Components */
180
- /* card */
181
- --card: var(--color-neutral-900);
182
- --card-foreground: var(--color-white-alpha-100);
183
-
184
- --popover: var(--color-black-alpha-100);
185
- --popover-foreground: var(--color-white-alpha-100);
186
-
187
- --sidebar: var(--color-neutral-950);
188
- --sidebar-muted: var(--color-neutral-500);
189
- --sidebar-acccent: var(--color-neutral-800);
190
- --sidebar-foreground: var(--color-neutral-300);
191
- --sidebar-accent-foreground: var(--color-neutral-100);
192
- --sidebar-primary: var(--color-neutral-50);
193
- --sidebar-primary-foreground: var(--color-neutral-900);
194
- --sidebar-border: var(--color-neutral-800);
195
- --sidebar-ring: var(--color-neutral-700);
196
- --input: var(--color-white-alpha-5);
197
-
198
- /* Effect */
199
- --ring: var(--color-neutral-700);
200
- --ring-error: #6d2e2f;
201
- }
1
+ .theme {
2
+ --font-heading: var(--font-sans);
3
+ --color-destructive: var(--color-red-600);
4
+ }
5
+
6
+ :root {
7
+ /* General */
8
+ --primary-bg: var(--color-white-alpha-100);
9
+ --secondary-bg: var(--color-neutral-100);
10
+ --tertiary-bg: var(--color-neutral-200);
11
+ --accent-bg: var(--color-neutral-50);
12
+ --muted-bg: var(--color-neutral-100);
13
+ --primary-fg: var(--color-neutral-950);
14
+ --secondary-fg: var(--color-neutral-700);
15
+ --accent-fg: var(--color-brand-shades-900);
16
+ --muted-fg: var(--color-neutral-500);
17
+ --primary-brand-bg: var(--color-brand-shades-600);
18
+ --primary-brand-fg: var(--color-brand-shades-600);
19
+ --inverse-fg: var(--color-white-alpha-100);
20
+ --destructive: var(--color-red-600);
21
+ --destructive-inverse-fg: var(--color-white-alpha-100);
22
+ --border-primary: var(--color-neutral-200);
23
+ --border-secondary: var(--color-neutral-100);
24
+ --border-focus: var(--color-neutral-300);
25
+ --border-brand: var(--color-brand-shades-600);
26
+
27
+ /* Start: Unofficial */
28
+ --primary-hover: var(--color-neutral-50);
29
+ --secondary-hover: var(--color-neutral-50);
30
+ --primary-brand-hover: var(--color-brand-shades-500);
31
+ --destructive-hover: var(--color-red-500);
32
+ --destructive-subtle: var(--color-red-50);
33
+ --destructive-border: var(--color-red-500);
34
+ --destructive-text: var(--color-red-600);
35
+ --ghost: var(--color-white-alpha-001);
36
+ --ghost-foreground: var(--color-neutral-700);
37
+ --ghost-hover: var(--color-black-alpha-5);
38
+ --outline: var(--color-white-alpha-10);
39
+ --outline-hover: var(--color-black-alpha-333);
40
+ --outline-active: var(--color-black-alpha-5);
41
+ --accent-0: rgba(245, 245, 245, 0.5);
42
+ --accent-1: var(--color-neutral-100);
43
+ --accent-2: var(--color-neutral-200);
44
+ --border-0: var(--color-neutral-50);
45
+ --border-1: var(--color-neutral-100);
46
+ --border-2: var(--color-neutral-200);
47
+ --border-3: var(--color-neutral-300);
48
+ --border-5: var(--color-neutral-500);
49
+ --mid-alt: var(--color-neutral-600);
50
+ --backdrop: var(--color-black-alpha-60);
51
+ --foreground-alt: var(--color-neutral-700);
52
+ --body-background: var(--color-white-alpha-100);
53
+ --neutral-50: var(--color-neutral-50);
54
+ --neutral-100: var(--color-neutral-100);
55
+ --neutral-200: var(--color-neutral-200);
56
+ --neutral-300: var(--color-neutral-300);
57
+ --neutral-400: var(--color-neutral-400);
58
+ --neutral-500: var(--color-neutral-500);
59
+ --neutral-600: var(--color-neutral-600);
60
+ --neutral-700: var(--color-neutral-700);
61
+ --neutral-800: var(--color-neutral-800);
62
+ /* Notification */
63
+ --positive-500: var(--color-green-500);
64
+ --info-500: var(--color-blue-500);
65
+ --warning-500: var(--color-yellow-500);
66
+ /* Brand */
67
+ --brand-50: var(--color-brand-shades-50);
68
+ --brand-100: var(--color-brand-shades-100);
69
+ --brand-200: var(--color-brand-shades-200);
70
+ --brand-300: var(--color-brand-shades-300);
71
+ --brand-400: var(--color-brand-shades-400);
72
+ --brand-500: var(--color-brand-shades-500);
73
+ --brand-600: var(--color-brand-shades-600);
74
+ --brand-700: var(--color-brand-shades-700);
75
+ --brand-800: var(--color-brand-shades-800);
76
+ /* End: Unofficial */
77
+
78
+ /* Components */
79
+ --button-black: var(--color-neutral-950);
80
+ --button-black-fg: var(--color-white-alpha-95);
81
+ --button-black-hover: var(--color-neutral-700);
82
+ --card: var(--color-white-alpha-100);
83
+ --card-foreground: var(--color-neutral-950);
84
+
85
+ --popover: var(--color-white-alpha-100);
86
+ --popover-foreground: var(--color-black-alpha-100);
87
+
88
+ --sidebar: var(--color-neutral-50);
89
+ --sidebar-muted: var(--color-neutral-500);
90
+ --sidebar-accent: var(--color-neutral-200);
91
+ --sidebar-foreground: var(--color-neutral-700);
92
+ --sidebar-accent-foreground: var(--color-neutral-900);
93
+ --sidebar-primary: var(--color-neutral-900);
94
+ --sidebar-primary-foreground: var(--color-neutral-50);
95
+ --sidebar-border: var(--color-neutral-200);
96
+ --sidebar-ring: var(--color-neutral-300);
97
+
98
+ --input: var(--color-white-alpha-100);
99
+
100
+ /* Effect */
101
+ --focus-ring: var(--color-neutral-200);
102
+ --focus-ring-error: var(--color-red-300);
103
+ }
104
+
105
+ .dark {
106
+ /* General */
107
+ --primary-bg: var(--color-black-alpha-100);
108
+ --secondary-bg: var(--color-neutral-800);
109
+ --tertiary-bg: var(--color-neutral-700);
110
+ --accent-bg: var(--color-neutral-900);
111
+ --muted-bg: var(--color-neutral-900);
112
+ --primary-fg: var(--color-neutral-50);
113
+ --secondary-fg: var(--color-neutral-300);
114
+ --accent-fg: var(--color-brand-shades-100);
115
+ --muted-fg: var(--color-neutral-400);
116
+ --primary-brand-bg: var(--color-brand-shades-500);
117
+ --primary-brand-fg: var(--color-brand-shades-500);
118
+ --inverse-fg: var(--color-white-alpha-100);
119
+ --destructive: #9e4042;
120
+ --destructive-inverse-fg: var(--color-white-alpha-100);
121
+ --border-primary: var(--color-neutral-700);
122
+ --border-secondary: var(--color-neutral-800);
123
+ --border-focus: var(--color-neutral-600);
124
+ --border-brand: var(--color-brand-shades-400);
125
+
126
+ /* Start: Unofficial */
127
+ --primary-hover: var(--color-neutral-950);
128
+ --secondary-hover: var(--color-neutral-900);
129
+ --primary-brand-hover: var(--color-brand-shades-500);
130
+ --destructive-hover: var(--color-red-500);
131
+ --destructive-subtle: var(--color-red-950);
132
+ --destructive-border: var(--color-red-500);
133
+ --destructive-text: var(--color-red-400);
134
+ --ghost: var(--color-white-alpha-001);
135
+ --ghost-foreground: var(--color-neutral-200);
136
+ --ghost-hover: var(--color-black-alpha-10);
137
+ --outline: var(--color-white-alpha-5);
138
+ --outline-hover: var(--color-black-alpha-10);
139
+ --outline-active: var(--color-white-alpha-15);
140
+ --accent-0: rgba(38, 38, 38, 0.5);
141
+ --accent-1: var(--color-neutral-800);
142
+ --accent-2: var(--color-neutral-800);
143
+ --border-0: var(--color-neutral-950);
144
+ --border-1: var(--color-neutral-900);
145
+ --border-2: var(--color-neutral-700);
146
+ --border-3: var(--color-neutral-600);
147
+ --border-5: var(--color-neutral-500);
148
+ --mid-alt: var(--color-neutral-400);
149
+ --foreground-alt: var(--color-neutral-300);
150
+ --backdrop: var(--color-black-alpha-60);
151
+ --body-background: var(--color-neutral-950);
152
+
153
+ --neutral-50: var(--color-neutral-950);
154
+ --neutral-100: var(--color-neutral-900);
155
+ --neutral-200: var(--color-neutral-800);
156
+ --neutral-300: var(--color-neutral-700);
157
+ --neutral-400: var(--color-neutral-600);
158
+ --neutral-500: var(--color-neutral-500);
159
+ --neutral-600: var(--color-neutral-400);
160
+ --neutral-700: var(--color-neutral-300);
161
+ --neutral-800: var(--color-neutral-200);
162
+
163
+ --green-500: var(--color-green-500);
164
+ --blue-500: var(--color-blue-500);
165
+ --yellow-500: var(--color-yellow-500);
166
+
167
+ --positive-500: var(--color-green-500);
168
+ --info-500: var(--color-blue-500);
169
+ --warning-500: var(--color-yellow-500);
170
+
171
+ /* Brand */
172
+ --brand-50: var(--color-brand-shades-950);
173
+ --brand-100: var(--color-brand-shades-900);
174
+ --brand-200: var(--color-brand-shades-800);
175
+ --brand-300: var(--color-brand-shades-700);
176
+ --brand-400: var(--color-brand-shades-600);
177
+ --brand-500: var(--color-brand-shades-500);
178
+ --brand-600: var(--color-brand-shades-400);
179
+ --brand-700: var(--color-brand-shades-300);
180
+ --brand-800: var(--color-brand-shades-200);
181
+ /* End: Unofficial */
182
+
183
+ /* Components */
184
+ --button-black: var(--color-neutral-50);
185
+ --button-black-fg: var(--color-black-alpha-95);
186
+ --button-black-hover: var(--color-neutral-200);
187
+ --card: var(--color-neutral-900);
188
+ --card-foreground: var(--color-white-alpha-100);
189
+
190
+ --popover: var(--color-black-alpha-100);
191
+ --popover-foreground: var(--color-white-alpha-100);
192
+
193
+ --sidebar: var(--color-neutral-950);
194
+ --sidebar-muted: var(--color-neutral-500);
195
+ --sidebar-accent: var(--color-neutral-800);
196
+ --sidebar-foreground: var(--color-neutral-300);
197
+ --sidebar-accent-foreground: var(--color-neutral-100);
198
+ --sidebar-primary: var(--color-neutral-50);
199
+ --sidebar-primary-foreground: var(--color-neutral-900);
200
+ --sidebar-border: var(--color-neutral-800);
201
+ --sidebar-ring: var(--color-neutral-700);
202
+ --input: var(--color-white-alpha-5);
203
+
204
+ /* Effect */
205
+ --focus-ring: var(--color-neutral-700);
206
+ --focus-ring-error: #6d2e2f;
202
207
  }