webcake-ui-kit 1.0.28 → 1.0.29

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 (27) hide show
  1. package/package.json +3 -1
  2. package/src/components/avatar/avatar.css +1 -1
  3. package/src/components/avatar-stack/AvatarStack.vue +15 -9
  4. package/src/components/avatar-stack/avatar-stack.css +27 -25
  5. package/src/components/badge/badge.css +7 -2
  6. package/src/components/dialog/Dialog.vue +11 -6
  7. package/src/components/dropdown/Dropdown.vue +135 -0
  8. package/src/components/dropdown/DropdownMenuItems.vue +128 -0
  9. package/src/components/dropdown/dropdown-menu-items.css +116 -0
  10. package/src/components/dropdown/dropdown.css +3 -0
  11. package/src/components/menu/Menu.vue +218 -0
  12. package/src/components/menu/menu.css +64 -0
  13. package/src/components/select/Select.vue +62 -131
  14. package/src/components/select/select.css +9 -51
  15. package/src/components/select-option/SelectOption.vue +15 -19
  16. package/src/components/sidebar-item/sidebar_item.css +4 -3
  17. package/src/components/tooltip/Tooltip.vue +12 -3
  18. package/src/floating/click-outside-mixin.js +47 -0
  19. package/src/floating/compute-position.js +64 -0
  20. package/src/floating/focus-mixin.js +35 -0
  21. package/src/floating/keyboard-mixin.js +92 -0
  22. package/src/floating/layer-manager.js +22 -0
  23. package/src/floating/portal-mixin.js +45 -0
  24. package/src/floating/portal-root.js +44 -0
  25. package/src/floating/position-mixin.js +74 -0
  26. package/src/index.js +2 -0
  27. package/src/styles/color_general.css +90 -86
package/src/styles/color_general.css CHANGED
@@ -6,49 +6,49 @@
6
6
  :root {
7
7
  /* General */
8
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);
9
+ --secondary-bg: var(--color-brand-neutrals-100);
10
+ --tertiary-bg: var(--color-brand-neutrals-200);
11
+ --accent-bg: var(--color-brand-neutrals-50);
12
+ --muted-bg: var(--color-brand-neutrals-100);
13
+ --primary-fg: var(--color-brand-neutrals-950);
14
+ --secondary-fg: var(--color-brand-neutrals-700);
15
+ --accent-fg: var(--color-brand-neutrals-900);
16
+ --muted-fg: var(--color-brand-neutrals-500);
17
17
  --primary-brand-bg: var(--color-brand-shades-600);
18
18
  --primary-brand-fg: var(--color-brand-shades-600);
19
19
  --inverse-fg: var(--color-white-alpha-100);
20
20
  --destructive: var(--color-red-600);
21
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);
22
+ --border-primary: var(--color-brand-neutrals-200);
23
+ --border-secondary: var(--color-brand-neutrals-100);
24
+ --border-focus: var(--color-brand-neutrals-300);
25
25
  --border-brand: var(--color-brand-shades-600);
26
26
 
27
27
  /* Start: Unofficial */
28
- --primary-hover: var(--color-neutral-50);
29
- --secondary-hover: var(--color-neutral-50);
28
+ --primary-hover: var(--color-brand-neutrals-50);
29
+ --secondary-hover: var(--color-brand-neutrals-50);
30
30
  --primary-brand-hover: var(--color-brand-shades-500);
31
31
  --destructive-hover: var(--color-red-500);
32
32
  --destructive-subtle: var(--color-red-50);
33
33
  --destructive-border: var(--color-red-500);
34
34
  --destructive-text: var(--color-red-600);
35
35
  --ghost: var(--color-white-alpha-001);
36
- --ghost-foreground: var(--color-neutral-700);
36
+ --ghost-foreground: var(--color-brand-neutrals-700);
37
37
  --ghost-hover: var(--color-black-alpha-5);
38
38
  --outline: var(--color-white-alpha-10);
39
39
  --outline-hover: var(--color-black-alpha-333);
40
40
  --outline-active: var(--color-black-alpha-5);
41
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);
42
+ --accent-1: var(--color-brand-neutrals-100);
43
+ --accent-2: var(--color-brand-neutrals-200);
44
+ --border-0: var(--color-brand-neutrals-50);
45
+ --border-1: var(--color-brand-neutrals-100);
46
+ --border-2: var(--color-brand-neutrals-200);
47
+ --border-3: var(--color-brand-neutrals-300);
48
+ --border-5: var(--color-brand-neutrals-500);
49
+ --mid-alt: var(--color-brand-neutrals-600);
50
+ --foreground-alt: var(--color-brand-neutrals-700);
50
51
  --backdrop: var(--color-black-alpha-60);
51
- --foreground-alt: var(--color-neutral-700);
52
52
  --body-background: var(--color-white-alpha-100);
53
53
  --neutral-50: var(--color-neutral-50);
54
54
  --neutral-100: var(--color-neutral-100);
@@ -59,10 +59,11 @@
59
59
  --neutral-600: var(--color-neutral-600);
60
60
  --neutral-700: var(--color-neutral-700);
61
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);
62
+
63
+ --green-500: var(--color-green-500);
64
+ --blue-500: var(--color-blue-500);
65
+ --yellow-500: var(--color-yellow-500);
66
+
66
67
  /* Brand */
67
68
  --brand-50: var(--color-brand-shades-50);
68
69
  --brand-100: var(--color-brand-shades-100);
@@ -76,29 +77,32 @@
76
77
  /* End: Unofficial */
77
78
 
78
79
  /* 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
- --tooltip: var(--color-black-alpha-100);
83
- --tooltip-foreground: var(--color-white-alpha-100);
84
80
  --card: var(--color-white-alpha-100);
85
- --card-foreground: var(--color-neutral-950);
81
+ --card-foreground: var(--color-brand-neutrals-950);
86
82
 
87
83
  --popover: var(--color-white-alpha-100);
88
84
  --popover-foreground: var(--color-black-alpha-100);
89
85
 
90
- --sidebar: var(--color-neutral-50);
91
- --sidebar-muted: var(--color-neutral-500);
92
- --sidebar-accent: var(--color-neutral-200);
93
- --sidebar-foreground: var(--color-neutral-700);
94
- --sidebar-accent-foreground: var(--color-neutral-900);
95
- --sidebar-primary: var(--color-neutral-900);
96
- --sidebar-primary-foreground: var(--color-neutral-50);
97
- --sidebar-border: var(--color-neutral-200);
98
- --sidebar-ring: var(--color-neutral-300);
86
+ --tooltip: var(--color-black-alpha-100);
87
+ --tooltip-foreground: var(--color-white-alpha-100);
88
+
89
+ --sidebar: var(--color-brand-neutrals-50);
90
+ --sidebar-hover: var(--color-brand-neutrals-100);
91
+ --sidebar-muted: var(--color-brand-neutrals-500);
92
+ --sidebar-accent: var(--color-brand-neutrals-200);
93
+ --sidebar-foreground: var(--color-brand-neutrals-700);
94
+ --sidebar-accent-foreground: var(--color-brand-neutrals-900);
95
+ --sidebar-primary: var(--color-brand-neutrals-900);
96
+ --sidebar-primary-foreground: var(--color-brand-neutrals-50);
97
+ --sidebar-border: var(--color-brand-neutrals-200);
98
+ --sidebar-ring: var(--color-brand-neutrals-300);
99
99
 
100
100
  --input: var(--color-white-alpha-100);
101
101
 
102
+ --button-black: var(--color-neutral-950);
103
+ --button-black-fg: var(--color-white-alpha-95);
104
+ --button-black-hover: var(--color-neutral-700);
105
+
102
106
  /* Effect */
103
107
  --focus-ring: var(--color-neutral-200);
104
108
  --focus-ring-error: var(--color-red-300);
@@ -107,50 +111,50 @@
107
111
  .dark {
108
112
  /* General */
109
113
  --primary-bg: var(--color-black-alpha-100);
110
- --secondary-bg: var(--color-neutral-800);
111
- --tertiary-bg: var(--color-neutral-700);
112
- --accent-bg: var(--color-neutral-900);
113
- --muted-bg: var(--color-neutral-900);
114
- --primary-fg: var(--color-neutral-50);
115
- --secondary-fg: var(--color-neutral-300);
116
- --accent-fg: var(--color-brand-shades-100);
117
- --muted-fg: var(--color-neutral-400);
114
+ --secondary-bg: var(--color-brand-neutrals-800);
115
+ --tertiary-bg: var(--color-brand-neutrals-700);
116
+ --accent-bg: var(--color-brand-neutrals-900);
117
+ --muted-bg: var(--color-brand-neutrals-900);
118
+ --primary-fg: var(--color-brand-neutrals-50);
119
+ --secondary-fg: var(--color-brand-neutrals-300);
120
+ --accent-fg: var(--color-brand-neutrals-100);
121
+ --muted-fg: var(--color-brand-neutrals-400);
118
122
  --primary-brand-bg: var(--color-brand-shades-500);
119
123
  --primary-brand-fg: var(--color-brand-shades-500);
120
124
  --inverse-fg: var(--color-white-alpha-100);
121
125
  --destructive: #9e4042;
122
126
  --destructive-inverse-fg: var(--color-white-alpha-100);
123
- --border-primary: var(--color-neutral-700);
124
- --border-secondary: var(--color-neutral-800);
125
- --border-focus: var(--color-neutral-600);
127
+ --border-primary: var(--color-brand-neutrals-700);
128
+ --border-secondary: var(--color-brand-neutrals-800);
129
+ --border-focus: var(--color-brand-neutrals-600);
126
130
  --border-brand: var(--color-brand-shades-400);
127
131
 
128
132
  /* Start: Unofficial */
129
- --primary-hover: var(--color-neutral-950);
130
- --secondary-hover: var(--color-neutral-900);
133
+ --primary-hover: var(--color-brand-neutrals-950);
134
+ --secondary-hover: var(--color-brand-neutrals-900);
131
135
  --primary-brand-hover: var(--color-brand-shades-500);
132
136
  --destructive-hover: var(--color-red-500);
133
137
  --destructive-subtle: var(--color-red-950);
134
138
  --destructive-border: var(--color-red-500);
135
139
  --destructive-text: var(--color-red-400);
136
140
  --ghost: var(--color-white-alpha-001);
137
- --ghost-foreground: var(--color-neutral-200);
141
+ --ghost-foreground: var(--color-brand-neutrals-200);
138
142
  --ghost-hover: var(--color-black-alpha-10);
139
143
  --outline: var(--color-white-alpha-5);
140
144
  --outline-hover: var(--color-black-alpha-10);
141
145
  --outline-active: var(--color-white-alpha-15);
142
146
  --accent-0: rgba(38, 38, 38, 0.5);
143
- --accent-1: var(--color-neutral-800);
144
- --accent-2: var(--color-neutral-800);
145
- --border-0: var(--color-neutral-950);
146
- --border-1: var(--color-neutral-900);
147
- --border-2: var(--color-neutral-700);
148
- --border-3: var(--color-neutral-600);
149
- --border-5: var(--color-neutral-500);
150
- --mid-alt: var(--color-neutral-400);
151
- --foreground-alt: var(--color-neutral-300);
147
+ --accent-1: var(--color-brand-neutrals-800);
148
+ --accent-2: var(--color-brand-neutrals-800);
149
+ --border-0: var(--color-brand-neutrals-950);
150
+ --border-1: var(--color-brand-neutrals-900);
151
+ --border-2: var(--color-brand-neutrals-700);
152
+ --border-3: var(--color-brand-neutrals-600);
153
+ --border-5: var(--color-brand-neutrals-500);
154
+ --mid-alt: var(--color-brand-neutrals-400);
155
+ --foreground-alt: var(--color-brand-neutrals-300);
152
156
  --backdrop: var(--color-black-alpha-60);
153
- --body-background: var(--color-neutral-950);
157
+ --body-background: var(--color-brand-neutrals-950);
154
158
 
155
159
  --neutral-50: var(--color-neutral-950);
156
160
  --neutral-100: var(--color-neutral-900);
@@ -166,10 +170,6 @@
166
170
  --blue-500: var(--color-blue-500);
167
171
  --yellow-500: var(--color-yellow-500);
168
172
 
169
- --positive-500: var(--color-green-500);
170
- --info-500: var(--color-blue-500);
171
- --warning-500: var(--color-yellow-500);
172
-
173
173
  /* Brand */
174
174
  --brand-50: var(--color-brand-shades-950);
175
175
  --brand-100: var(--color-brand-shades-900);
@@ -183,29 +183,33 @@
183
183
  /* End: Unofficial */
184
184
 
185
185
  /* Components */
186
- --button-black: var(--color-neutral-50);
187
- --button-black-fg: var(--color-black-alpha-95);
188
- --button-black-hover: var(--color-neutral-200);
189
- --tooltip: var(--color-white-alpha-100);
190
- --tooltip-foreground: var(--color-black-alpha-100);
191
- --card: var(--color-neutral-900);
186
+ --card: var(--color-brand-neutrals-900);
192
187
  --card-foreground: var(--color-white-alpha-100);
193
188
 
194
189
  --popover: var(--color-black-alpha-100);
195
190
  --popover-foreground: var(--color-white-alpha-100);
196
191
 
197
- --sidebar: var(--color-neutral-950);
198
- --sidebar-muted: var(--color-neutral-500);
199
- --sidebar-accent: var(--color-neutral-800);
200
- --sidebar-foreground: var(--color-neutral-300);
201
- --sidebar-accent-foreground: var(--color-neutral-100);
202
- --sidebar-primary: var(--color-neutral-50);
203
- --sidebar-primary-foreground: var(--color-neutral-900);
204
- --sidebar-border: var(--color-neutral-800);
205
- --sidebar-ring: var(--color-neutral-700);
192
+ --tooltip: var(--color-white-alpha-100);
193
+ --tooltip-foreground: var(--color-black-alpha-100);
194
+
195
+ --sidebar: var(--color-brand-neutrals-950);
196
+ --sidebar-hover: var(--color-brand-neutrals-900);
197
+ --sidebar-muted: var(--color-brand-neutrals-500);
198
+ --sidebar-accent: var(--color-brand-neutrals-800);
199
+ --sidebar-foreground: var(--color-brand-neutrals-300);
200
+ --sidebar-accent-foreground: var(--color-brand-neutrals-100);
201
+ --sidebar-primary: var(--color-brand-neutrals-50);
202
+ --sidebar-primary-foreground: var(--color-brand-neutrals-900);
203
+ --sidebar-border: var(--color-brand-neutrals-800);
204
+ --sidebar-ring: var(--color-brand-neutrals-700);
205
+
206
206
  --input: var(--color-white-alpha-5);
207
207
 
208
+ --button-black: var(--color-brand-neutrals-50);
209
+ --button-black-fg: var(--color-black-alpha-95);
210
+ --button-black-hover: var(--color-brand-neutrals-200);
211
+
208
212
  /* Effect */
209
- --focus-ring: var(--color-neutral-700);
213
+ --focus-ring: var(--color-brand-neutrals-700);
210
214
  --focus-ring-error: #6d2e2f;
211
215
  }