webcake-ui-kit 1.0.1 → 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 (15) hide show
  1. package/package.json +1 -1
  2. package/src/components/rich-switch-group/RichSwitchGroup.vue +4 -4
  3. package/src/components/switch-group/SwitchGroup.vue +3 -3
  4. package/src/index.js +7 -7
  5. package/src/styles/.omc/state/agent-replay-645326b7-372b-463d-ab45-0adaafe31a51.jsonl +2 -0
  6. package/src/styles/.omc/state/subagent-tracking.json +7 -0
  7. package/src/styles/alpha_colors.css +35 -37
  8. package/src/styles/border_radius.css +21 -23
  9. package/src/styles/brand_colors.css +37 -39
  10. package/src/styles/chart_colors.css +27 -29
  11. package/src/styles/color_general.css +206 -208
  12. package/src/styles/raw_colors.css +267 -269
  13. package/src/styles/shadow.css +10 -12
  14. package/src/styles/spacing.css +31 -33
  15. package/src/styles/typography.css +76 -78
package/src/styles/color_general.css CHANGED
@@ -1,209 +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-500);
32
- --destructive-hover: var(--color-red-500);
33
- --destructive-subtle: var(--color-red-50);
34
- --destructive-border: var(--color-red-500);
35
- --destructive-text: var(--color-red-600);
36
- --ghost: var(--color-white-alpha-001);
37
- --ghost-foreground: var(--color-neutral-700);
38
- --ghost-hover: var(--color-black-alpha-5);
39
- --outline: var(--color-white-alpha-10);
40
- --outline-hover: var(--color-black-alpha-333);
41
- --outline-active: var(--color-black-alpha-5);
42
- --accent-0: rgba(245, 245, 245, 0.5);
43
- --accent-1: var(--color-neutral-100);
44
- --accent-2: var(--color-neutral-200);
45
- --border-0: var(--color-neutral-50);
46
- --border-1: var(--color-neutral-100);
47
- --border-2: var(--color-neutral-200);
48
- --border-3: var(--color-neutral-300);
49
- --border-5: var(--color-neutral-500);
50
- --mid-alt: var(--color-neutral-600);
51
- --backdrop: var(--color-black-alpha-60);
52
- --foreground-alt: var(--color-neutral-700);
53
- --body-background: var(--color-white-alpha-100);
54
- --neutral-50: var(--color-neutral-50);
55
- --neutral-100: var(--color-neutral-100);
56
- --neutral-200: var(--color-neutral-200);
57
- --neutral-300: var(--color-neutral-300);
58
- --neutral-400: var(--color-neutral-400);
59
- --neutral-500: var(--color-neutral-500);
60
- --neutral-600: var(--color-neutral-600);
61
- --neutral-700: var(--color-neutral-700);
62
- --neutral-800: var(--color-neutral-800);
63
- /* Notification */
64
- --positive-500: var(--color-green-500);
65
- --info-500: var(--color-blue-500);
66
- --warning-500: var(--color-yellow-500);
67
- /* Brand */
68
- --brand-50: var(--color-brand-shades-50);
69
- --brand-100: var(--color-brand-shades-100);
70
- --brand-200: var(--color-brand-shades-200);
71
- --brand-300: var(--color-brand-shades-300);
72
- --brand-400: var(--color-brand-shades-400);
73
- --brand-500: var(--color-brand-shades-500);
74
- --brand-600: var(--color-brand-shades-600);
75
- --brand-700: var(--color-brand-shades-700);
76
- --brand-800: var(--color-brand-shades-800);
77
- /* End: Unofficial */
78
-
79
- /* Components */
80
- --button-black: var(--color-neutral-950);
81
- --button-black-fg: var(--color-white-alpha-95);
82
- --button-black-hover: var(--color-neutral-700);
83
- --card: var(--color-white-alpha-100);
84
- --card-foreground: var(--color-neutral-950);
85
-
86
- --popover: var(--color-white-alpha-100);
87
- --popover-foreground: var(--color-black-alpha-100);
88
-
89
- --sidebar: var(--color-neutral-50);
90
- --sidebar-muted: var(--color-neutral-500);
91
- --sidebar-accent: var(--color-neutral-200);
92
- --sidebar-foreground: var(--color-neutral-700);
93
- --sidebar-accent-foreground: var(--color-neutral-900);
94
- --sidebar-primary: var(--color-neutral-900);
95
- --sidebar-primary-foreground: var(--color-neutral-50);
96
- --sidebar-border: var(--color-neutral-200);
97
- --sidebar-ring: var(--color-neutral-300);
98
-
99
- --input: var(--color-white-alpha-100);
100
-
101
- /* Effect */
102
- --focus-ring: var(--color-neutral-200);
103
- --focus-ring-error: var(--color-red-300);
104
- }
105
-
106
- .dark {
107
- /* General */
108
- --primary-bg: var(--color-black-alpha-100);
109
- --secondary-bg: var(--color-neutral-800);
110
- --tertiary-bg: var(--color-neutral-700);
111
- --accent-bg: var(--color-neutral-900);
112
- --muted-bg: var(--color-neutral-900);
113
- --primary-fg: var(--color-neutral-50);
114
- --secondary-fg: var(--color-neutral-300);
115
- --accent-fg: var(--color-brand-shades-100);
116
- --muted-fg: var(--color-neutral-400);
117
- --primary-brand-bg: var(--color-brand-shades-500);
118
- --primary-brand-fg: var(--color-brand-shades-500);
119
- --inverse-fg: var(--color-white-alpha-100);
120
- --destructive: #9e4042;
121
- --destructive-inverse-fg: var(--color-white-alpha-100);
122
- --border-primary: var(--color-neutral-700);
123
- --border-secondary: var(--color-neutral-800);
124
- --border-focus: var(--color-neutral-600);
125
- --border-brand: var(--color-brand-shades-400);
126
-
127
- /* Start: Unofficial */
128
- --primary-hover: var(--color-neutral-950);
129
- --secondary-hover: var(--color-neutral-900);
130
- --primary-brand-hover: var(--color-brand-shades-500);
131
- --destructive-hover: var(--color-red-500);
132
- --destructive-subtle: var(--color-red-950);
133
- --destructive-border: var(--color-red-500);
134
- --destructive-text: var(--color-red-400);
135
- --ghost: var(--color-white-alpha-001);
136
- --ghost-foreground: var(--color-neutral-200);
137
- --ghost-hover: var(--color-black-alpha-10);
138
- --outline: var(--color-white-alpha-5);
139
- --outline-hover: var(--color-black-alpha-10);
140
- --outline-active: var(--color-white-alpha-15);
141
- --accent-0: rgba(38, 38, 38, 0.5);
142
- --accent-1: var(--color-neutral-800);
143
- --accent-2: var(--color-neutral-800);
144
- --border-0: var(--color-neutral-950);
145
- --border-1: var(--color-neutral-900);
146
- --border-2: var(--color-neutral-700);
147
- --border-3: var(--color-neutral-600);
148
- --border-5: var(--color-neutral-500);
149
- --mid-alt: var(--color-neutral-400);
150
- --foreground-alt: var(--color-neutral-300);
151
- --backdrop: var(--color-black-alpha-60);
152
- --body-background: var(--color-neutral-950);
153
-
154
- --neutral-50: var(--color-neutral-950);
155
- --neutral-100: var(--color-neutral-900);
156
- --neutral-200: var(--color-neutral-800);
157
- --neutral-300: var(--color-neutral-700);
158
- --neutral-400: var(--color-neutral-600);
159
- --neutral-500: var(--color-neutral-500);
160
- --neutral-600: var(--color-neutral-400);
161
- --neutral-700: var(--color-neutral-300);
162
- --neutral-800: var(--color-neutral-200);
163
-
164
- --green-500: var(--color-green-500);
165
- --blue-500: var(--color-blue-500);
166
- --yellow-500: var(--color-yellow-500);
167
-
168
- --positive-500: var(--color-green-500);
169
- --info-500: var(--color-blue-500);
170
- --warning-500: var(--color-yellow-500);
171
-
172
- /* Brand */
173
- --brand-50: var(--color-brand-shades-950);
174
- --brand-100: var(--color-brand-shades-900);
175
- --brand-200: var(--color-brand-shades-800);
176
- --brand-300: var(--color-brand-shades-700);
177
- --brand-400: var(--color-brand-shades-600);
178
- --brand-500: var(--color-brand-shades-500);
179
- --brand-600: var(--color-brand-shades-400);
180
- --brand-700: var(--color-brand-shades-300);
181
- --brand-800: var(--color-brand-shades-200);
182
- /* End: Unofficial */
183
-
184
- /* Components */
185
- --button-black: var(--color-neutral-50);
186
- --button-black-fg: var(--color-black-alpha-95);
187
- --button-black-hover: var(--color-neutral-200);
188
- --card: var(--color-neutral-900);
189
- --card-foreground: var(--color-white-alpha-100);
190
-
191
- --popover: var(--color-black-alpha-100);
192
- --popover-foreground: var(--color-white-alpha-100);
193
-
194
- --sidebar: var(--color-neutral-950);
195
- --sidebar-muted: var(--color-neutral-500);
196
- --sidebar-accent: var(--color-neutral-800);
197
- --sidebar-foreground: var(--color-neutral-300);
198
- --sidebar-accent-foreground: var(--color-neutral-100);
199
- --sidebar-primary: var(--color-neutral-50);
200
- --sidebar-primary-foreground: var(--color-neutral-900);
201
- --sidebar-border: var(--color-neutral-800);
202
- --sidebar-ring: var(--color-neutral-700);
203
- --input: var(--color-white-alpha-5);
204
-
205
- /* Effect */
206
- --focus-ring: var(--color-neutral-700);
207
- --focus-ring-error: #6d2e2f;
208
- }
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;
209
207
  }