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
package/src/styles/typography.css CHANGED
@@ -1,91 +1,89 @@
1
- @layer base {
2
- :root {
3
- /* font definations */
4
- --font-family-sans: 'Inter';
5
- --font-family-serif: 'Inter';
6
- --font-family-heading: var(--font-family-sans);
7
- --font-family-body: var(--font-family-sans);
8
- --font-family-monospace: 'Geist Mono';
1
+ :root {
2
+ /* font definations */
3
+ --font-family-sans: 'Inter';
4
+ --font-family-serif: 'Inter';
5
+ --font-family-heading: var(--font-family-sans);
6
+ --font-family-body: var(--font-family-sans);
7
+ --font-family-monospace: 'Geist Mono';
9
8
 
10
- /* Heading 1 */
11
- --heading-1-font-family: var(--font-family-heading);
12
- --heading-1-font-size: 48px;
13
- --heading-1-line-height: 48px;
14
- --heading-1-font-weight: 600;
15
- --heading-1-letter-spacing: -1.5px;
9
+ /* Heading 1 */
10
+ --heading-1-font-family: var(--font-family-heading);
11
+ --heading-1-font-size: 48px;
12
+ --heading-1-line-height: 48px;
13
+ --heading-1-font-weight: 600;
14
+ --heading-1-letter-spacing: -1.5px;
16
15
 
17
- /* ========================= Heading 2 ========================= */
18
- --heading-2-font-family: var(--font-family-heading);
19
- --heading-2-font-size: 30px;
20
- --heading-2-line-height: 30px;
21
- --heading-2-font-weight: 600;
22
- --heading-2-letter-spacing: -1px;
16
+ /* ========================= Heading 2 ========================= */
17
+ --heading-2-font-family: var(--font-family-heading);
18
+ --heading-2-font-size: 30px;
19
+ --heading-2-line-height: 30px;
20
+ --heading-2-font-weight: 600;
21
+ --heading-2-letter-spacing: -1px;
23
22
 
24
- /* ========================= Heading 3 ========================= */
25
- --heading-3-font-family: var(--font-family-heading);
26
- --heading-3-font-size: 24px;
27
- --heading-3-line-height: 28.8px;
28
- --heading-3-font-weight: 600;
29
- --heading-3-letter-spacing: -1px;
23
+ /* ========================= Heading 3 ========================= */
24
+ --heading-3-font-family: var(--font-family-heading);
25
+ --heading-3-font-size: 24px;
26
+ --heading-3-line-height: 28.8px;
27
+ --heading-3-font-weight: 600;
28
+ --heading-3-letter-spacing: -1px;
30
29
 
31
- /* ========================= Heading 4 ========================= */
32
- --heading-4-font-family: var(--font-family-heading);
33
- --heading-4-font-size: 20px;
34
- --heading-4-line-height: 24px;
35
- --heading-4-font-weight: 600;
36
- --heading-4-letter-spacing: 0px;
30
+ /* ========================= Heading 4 ========================= */
31
+ --heading-4-font-family: var(--font-family-heading);
32
+ --heading-4-font-size: 20px;
33
+ --heading-4-line-height: 24px;
34
+ --heading-4-font-weight: 600;
35
+ --heading-4-letter-spacing: 0px;
37
36
 
38
- /* ========================= Monospaced ========================= */
39
- --monospaced-font-family: var(--font-family-mono);
40
- --monospaced-font-size: 16px;
41
- --monospaced-line-height: 24px;
42
- --monospaced-font-weight: 400;
43
- --monospaced-letter-spacing: 0px;
37
+ /* ========================= Monospaced ========================= */
38
+ --monospaced-font-family: var(--font-family-mono);
39
+ --monospaced-font-size: 16px;
40
+ --monospaced-line-height: 24px;
41
+ --monospaced-font-weight: 400;
42
+ --monospaced-letter-spacing: 0px;
44
43
 
45
- /* ========================= Caption ========================= */
46
- --caption-font-family: var(--font-family-body);
47
- --caption-font-size: 14px;
48
- --caption-line-height: 21px;
49
- --caption-font-weight: 400;
50
- --caption-letter-spacing: 1.5px;
44
+ /* ========================= Caption ========================= */
45
+ --caption-font-family: var(--font-family-body);
46
+ --caption-font-size: 14px;
47
+ --caption-line-height: 21px;
48
+ --caption-font-weight: 400;
49
+ --caption-letter-spacing: 1.5px;
51
50
 
52
- /* ========================= Caption Mini ========================= */
53
- --caption-mini-font-family: var(--font-family-body);
54
- --caption-mini-font-size: 10px;
55
- --caption-mini-line-height: 16px;
56
- --caption-mini-font-weight: 400;
57
- --caption-mini-letter-spacing: 0px;
51
+ /* ========================= Caption Mini ========================= */
52
+ --caption-mini-font-family: var(--font-family-body);
53
+ --caption-mini-font-size: 10px;
54
+ --caption-mini-line-height: 16px;
55
+ --caption-mini-font-weight: 400;
56
+ --caption-mini-letter-spacing: 0px;
58
57
 
59
- /* ========================= Paragraph Weights ========================= */
60
- --paragraph-font-weight: 400;
61
- --paragraph-medium-font-weight: 500;
62
- --paragraph-bold-font-weight: 600;
58
+ /* ========================= Paragraph Weights ========================= */
59
+ --paragraph-font-weight: 400;
60
+ --paragraph-medium-font-weight: 500;
61
+ --paragraph-bold-font-weight: 600;
63
62
 
64
- /* ========================= Paragraph Large ========================= */
65
- --paragraph-large-font-family: var(--font-family-body);
66
- --paragraph-large-font-size: 18px;
67
- --paragraph-large-line-height: 27px;
68
- --paragraph-large-letter-spacing: 0px;
63
+ /* ========================= Paragraph Large ========================= */
64
+ --paragraph-large-font-family: var(--font-family-body);
65
+ --paragraph-large-font-size: 18px;
66
+ --paragraph-large-line-height: 27px;
67
+ --paragraph-large-letter-spacing: 0px;
69
68
 
70
- /* ========================= Paragraph Regular ========================= */
71
- --paragraph-regular-font-family: var(--font-family-body);
72
- --paragraph-regular-font-size: 16px;
73
- --paragraph-regular-line-height: 24px;
74
- --paragraph-regular-letter-spacing: 0px;
75
- --paragraph-regular-spacing: 16px;
69
+ /* ========================= Paragraph Regular ========================= */
70
+ --paragraph-regular-font-family: var(--font-family-body);
71
+ --paragraph-regular-font-size: 16px;
72
+ --paragraph-regular-line-height: 24px;
73
+ --paragraph-regular-letter-spacing: 0px;
74
+ --paragraph-regular-spacing: 16px;
76
75
 
77
- /* ========================= Paragraph Small ========================= */
78
- --paragraph-small-font-family: var(--font-family-body);
79
- --paragraph-small-font-size: 14px;
80
- --paragraph-small-line-height: 20px;
81
- --paragraph-small-letter-spacing: 0px;
82
- --paragraph-small-spacing: 14px;
76
+ /* ========================= Paragraph Small ========================= */
77
+ --paragraph-small-font-family: var(--font-family-body);
78
+ --paragraph-small-font-size: 14px;
79
+ --paragraph-small-line-height: 20px;
80
+ --paragraph-small-letter-spacing: 0px;
81
+ --paragraph-small-spacing: 14px;
83
82
 
84
- /* ========================= Paragraph Mini ========================= */
85
- --paragraph-mini-font-family: var(--font-family-body);
86
- --paragraph-mini-font-size: 12px;
87
- --paragraph-mini-line-height: 16px;
88
- --paragraph-mini-letter-spacing: 0px;
89
- --paragraph-mini-spacing: 12px;
90
- }
83
+ /* ========================= Paragraph Mini ========================= */
84
+ --paragraph-mini-font-family: var(--font-family-body);
85
+ --paragraph-mini-font-size: 12px;
86
+ --paragraph-mini-line-height: 16px;
87
+ --paragraph-mini-letter-spacing: 0px;
88
+ --paragraph-mini-spacing: 12px;
91
89
  }