@mekari/pixel3-theme 0.2.1 → 0.2.2-dev.0

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 (84) hide show
  1. package/dist/conditions.d.mts +4 -1
  2. package/dist/conditions.d.ts +4 -1
  3. package/dist/index.js +2889 -409
  4. package/dist/index.mjs +2888 -408
  5. package/dist/semanticTokens/colors.d.mts +892 -0
  6. package/dist/semanticTokens/colors.d.ts +892 -0
  7. package/dist/semanticTokens/index.d.mts +951 -0
  8. package/dist/semanticTokens/index.d.ts +951 -0
  9. package/dist/semanticTokens/spacing.d.mts +59 -0
  10. package/dist/semanticTokens/spacing.d.ts +59 -0
  11. package/dist/tokens/borders.d.mts +2 -2
  12. package/dist/tokens/borders.d.ts +2 -2
  13. package/dist/tokens/colors.d.mts +37 -34
  14. package/dist/tokens/colors.d.ts +37 -34
  15. package/dist/tokens/index.d.mts +59 -35
  16. package/dist/tokens/index.d.ts +59 -35
  17. package/dist/tokens/radii.d.mts +5 -0
  18. package/dist/tokens/radii.d.ts +5 -0
  19. package/dist/tokens/spacing.d.mts +16 -0
  20. package/dist/tokens/spacing.d.ts +16 -0
  21. package/dist/tokens-next/borders.d.mts +22 -0
  22. package/dist/tokens-next/borders.d.ts +22 -0
  23. package/dist/tokens-next/colors.d.mts +441 -0
  24. package/dist/tokens-next/colors.d.ts +441 -0
  25. package/dist/tokens-next/index.d.mts +772 -0
  26. package/dist/tokens-next/index.d.ts +772 -0
  27. package/dist/tokens-next/radii.d.mts +26 -0
  28. package/dist/tokens-next/radii.d.ts +26 -0
  29. package/dist/tokens-next/shadows.d.mts +28 -0
  30. package/dist/tokens-next/shadows.d.ts +28 -0
  31. package/dist/tokens-next/spacing.d.mts +51 -0
  32. package/dist/tokens-next/spacing.d.ts +51 -0
  33. package/package.json +1 -1
  34. package/src/conditions.ts +6 -4
  35. package/src/global-css.ts +4 -0
  36. package/src/index.ts +15 -2
  37. package/src/recipes/accordion.ts +12 -2
  38. package/src/recipes/autocomplete.ts +6 -1
  39. package/src/recipes/avatar.ts +68 -11
  40. package/src/recipes/badge.ts +174 -50
  41. package/src/recipes/banner.ts +36 -11
  42. package/src/recipes/broadcast.ts +78 -12
  43. package/src/recipes/button.ts +132 -9
  44. package/src/recipes/carousel.ts +5 -0
  45. package/src/recipes/chart.ts +10 -5
  46. package/src/recipes/checkbox.ts +68 -13
  47. package/src/recipes/color-picker.ts +74 -23
  48. package/src/recipes/date-picker.ts +165 -31
  49. package/src/recipes/divider.ts +5 -1
  50. package/src/recipes/dropzone.ts +80 -8
  51. package/src/recipes/form-control.ts +12 -3
  52. package/src/recipes/input-tag.ts +48 -8
  53. package/src/recipes/input.ts +75 -8
  54. package/src/recipes/modal.ts +30 -9
  55. package/src/recipes/popover.ts +28 -9
  56. package/src/recipes/progress.ts +9 -2
  57. package/src/recipes/radio.ts +52 -21
  58. package/src/recipes/rich-text-editor.ts +32 -6
  59. package/src/recipes/segmented-control.ts +47 -7
  60. package/src/recipes/select.ts +42 -0
  61. package/src/recipes/slider.ts +46 -6
  62. package/src/recipes/table.ts +26 -11
  63. package/src/recipes/tabs.ts +35 -3
  64. package/src/recipes/tag.ts +43 -13
  65. package/src/recipes/textarea.ts +0 -46
  66. package/src/recipes/timeline.ts +36 -8
  67. package/src/recipes/toast.ts +21 -4
  68. package/src/recipes/toggle.ts +59 -11
  69. package/src/recipes/tooltip.ts +5 -1
  70. package/src/recipes/upload.ts +51 -16
  71. package/src/semanticTokens/colors.ts +893 -0
  72. package/src/semanticTokens/index.ts +8 -0
  73. package/src/semanticTokens/spacing.ts +59 -0
  74. package/src/tokens/borders.ts +1 -1
  75. package/src/tokens/colors.ts +18 -23
  76. package/src/tokens/index.ts +2 -2
  77. package/src/tokens/radii.ts +5 -5
  78. package/src/tokens/spacing.ts +17 -17
  79. package/src/tokens-next/borders.ts +10 -0
  80. package/src/tokens-next/colors.ts +171 -0
  81. package/src/tokens-next/index.ts +32 -0
  82. package/src/tokens-next/radii.ts +10 -0
  83. package/src/tokens-next/shadows.ts +28 -0
  84. package/src/tokens-next/spacing.ts +16 -0
package/src/recipes/tooltip.ts CHANGED
@@ -17,7 +17,11 @@ const tooltipRecipe = defineRecipe({
17
17
  bg: 'overlay',
18
18
  color: 'white',
19
19
  whiteSpace: 'normal',
20
- overflowWrap: 'break-word'
20
+ overflowWrap: 'break-word',
21
+ _nextTheme: {
22
+ background: 'background.overlay',
23
+ color: 'text.inverse.static'
24
+ }
21
25
  }
22
26
  })
23
27
 
package/src/recipes/upload.ts CHANGED
@@ -17,30 +17,65 @@ const uploadSlotRecipe = defineSlotRecipe({
17
17
  borderWidth: '1px',
18
18
  borderColor: 'gray.100',
19
19
  borderRadius: 'md',
20
- backgroundColor: 'white',
20
+ background: 'white',
21
21
  outline: 'none',
22
22
  transition: 'all 250ms',
23
+ _nextTheme: {
24
+ borderRadius: 'md',
25
+ borderColor: 'border.default',
26
+ background: 'background.neutral'
27
+ },
28
+
23
29
  _hover: {
24
30
  borderColor: 'gray.400',
25
31
  '& .mp-upload__resetButton': {
26
32
  display: 'block'
33
+ },
34
+
35
+ _nextTheme: {
36
+ borderColor: 'border.form',
37
+ background: 'background.neutral.hovered'
27
38
  }
28
39
  },
29
- _focusVisible: {
40
+ _focus: {
30
41
  boxShadow: 'focus',
31
42
  borderColor: 'blue.400',
43
+ _nextTheme: {
44
+ boxShadow: 'focus',
45
+ borderColor: 'border.focused'
46
+ },
32
47
  _hover: {
33
- borderColor: 'blue.400'
48
+ borderColor: 'blue.400',
49
+ _nextTheme: {
50
+ borderColor: 'border.focused'
51
+ }
34
52
  }
35
53
  },
36
54
  _disabled: {
37
55
  cursor: 'not-allowed',
38
- background: 'gray.50'
56
+ background: 'gray.50',
57
+ _nextTheme: {
58
+ background: 'background.disabled',
59
+ borderColor: 'border.disabled'
60
+ },
61
+
62
+ _hover: {
63
+ _nextTheme: {
64
+ background: 'background.disabled',
65
+ borderColor: 'border.disabled'
66
+ }
67
+ }
39
68
  },
40
69
  _invalid: {
41
70
  borderColor: 'red.400',
71
+ _nextTheme: {
72
+ borderColor: 'border.danger'
73
+ },
42
74
  _hover: {
43
- borderColor: 'red.400'
75
+ borderColor: 'red.400',
76
+ _nextTheme: {
77
+ borderColor: 'border.danger'
78
+ }
44
79
  }
45
80
  }
46
81
  },
@@ -69,29 +104,29 @@ const uploadListSlotRecipe = defineSlotRecipe({
69
104
  py: '2',
70
105
  px: '1',
71
106
  borderRadius: 'md',
72
- backgroundColor: 'white',
107
+ background: 'white',
73
108
  transition: 'all 250ms',
109
+ _nextTheme: {
110
+ borderRadius: 'md',
111
+ background: 'background.neutral'
112
+ },
74
113
  _hover: {
75
- backgroundColor: 'background'
114
+ background: 'background',
115
+ _nextTheme: {
116
+ background: 'background.neutral.hovered'
117
+ }
76
118
  }
77
119
  },
78
120
  titleWrapper: {
79
121
  display: 'flex',
80
122
  flexDirection: 'column',
81
- minWidth: '1px',
123
+ minWidth: '1px'
82
124
  },
83
125
  actionWrapper: {
84
126
  display: 'flex',
85
127
  flexDirection: 'row',
86
128
  gap: '0.5',
87
- ml: 'auto',
88
- '& > button': {
89
- // Remove hover style for Button Icon
90
- _hover: {
91
- background: 'transparent!important',
92
- borderColor: 'transparent!important'
93
- }
94
- }
129
+ ml: 'auto'
95
130
  }
96
131
  }
97
132
  })