@greese/ui 1.0.0 → 1.2.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 (210) hide show
  1. package/README.md +19 -14
  2. package/dist/_maps.scss +1 -1
  3. package/dist/_tokens-base.scss +30 -6
  4. package/dist/_tokens.scss +31 -2
  5. package/dist/_utilities-table.scss +1615 -0
  6. package/dist/clipboard.d.ts +18 -0
  7. package/dist/clipboard.js +62 -0
  8. package/dist/css/Button.css +2 -2
  9. package/dist/css/Carousel.css +145 -47
  10. package/dist/css/Checkbox.css +2 -2
  11. package/dist/css/Chip.css +38 -8
  12. package/dist/css/ChoiceGroup.css +42 -1
  13. package/dist/css/Collapsible.css +1 -0
  14. package/dist/css/ColorPicker.css +84 -0
  15. package/dist/css/Combobox.css +2 -2
  16. package/dist/css/Dialog.css +24 -22
  17. package/dist/css/EditableField.css +219 -0
  18. package/dist/css/Input.css +11 -2
  19. package/dist/css/Menu.css +9 -0
  20. package/dist/css/NumberField.css +53 -8
  21. package/dist/css/NumberStepper.css +9 -0
  22. package/dist/css/OtpField.css +1 -1
  23. package/dist/css/PageTransition.css +12 -0
  24. package/dist/css/Radio.css +2 -2
  25. package/dist/css/ScrollCarousel.css +225 -0
  26. package/dist/css/SegmentedControl.css +2 -2
  27. package/dist/css/Select.css +3 -2
  28. package/dist/css/Slider.css +45 -5
  29. package/dist/css/Switch.css +6 -6
  30. package/dist/css/Text.css +14 -14
  31. package/dist/css/Textarea.css +1 -1
  32. package/dist/css/core.css +36 -6
  33. package/dist/css/resets.css +162 -0
  34. package/dist/css.d.ts +2 -0
  35. package/dist/css.js +2 -0
  36. package/dist/greese.css +990 -138
  37. package/dist/index.d.ts +2 -1
  38. package/dist/index.js +2 -1
  39. package/dist/scss/components/_Accordion.scss +2 -0
  40. package/dist/scss/components/_ActionSelect.scss +2 -0
  41. package/dist/scss/components/_Alert.scss +2 -0
  42. package/dist/scss/components/_AppBar.scss +2 -0
  43. package/dist/scss/components/_AspectRatio.scss +2 -0
  44. package/dist/scss/components/_AutoLayout.scss +2 -0
  45. package/dist/scss/components/_Avatar.scss +2 -0
  46. package/dist/scss/components/_Badge.scss +2 -0
  47. package/dist/scss/components/_Box.scss +2 -0
  48. package/dist/scss/components/_Breadcrumbs.scss +2 -0
  49. package/dist/scss/components/_Button.scss +2 -0
  50. package/dist/scss/components/_ButtonGroup.scss +2 -0
  51. package/dist/scss/components/_Card.scss +2 -0
  52. package/dist/scss/components/_Carousel.scss +2 -0
  53. package/dist/scss/components/_Center.scss +2 -0
  54. package/dist/scss/components/_ChatBubble.scss +2 -0
  55. package/dist/scss/components/_Checkbox.scss +2 -0
  56. package/dist/scss/components/_Chip.scss +2 -0
  57. package/dist/scss/components/_ChoiceGroup.scss +2 -0
  58. package/dist/scss/components/_Code.scss +2 -0
  59. package/dist/scss/components/_Collapsible.scss +2 -0
  60. package/dist/scss/components/_ColorPicker.scss +2 -0
  61. package/dist/scss/components/_Combobox.scss +2 -0
  62. package/dist/scss/components/_Container.scss +2 -0
  63. package/dist/scss/components/_Countdown.scss +2 -0
  64. package/dist/scss/components/_DateField.scss +2 -0
  65. package/dist/scss/components/_Dialog.scss +2 -0
  66. package/dist/scss/components/_Diff.scss +2 -0
  67. package/dist/scss/components/_Divider.scss +2 -0
  68. package/dist/scss/components/_Dock.scss +2 -0
  69. package/dist/scss/components/_EditableField.scss +2 -0
  70. package/dist/scss/components/_Field.scss +2 -0
  71. package/dist/scss/components/_Fieldset.scss +2 -0
  72. package/dist/scss/components/_FileInput.scss +2 -0
  73. package/dist/scss/components/_Footer.scss +2 -0
  74. package/dist/scss/components/_Grid.scss +2 -0
  75. package/dist/scss/components/_Header.scss +2 -0
  76. package/dist/scss/components/_Heading.scss +2 -0
  77. package/dist/scss/components/_Icon.scss +2 -0
  78. package/dist/scss/components/_IconButton.scss +2 -0
  79. package/dist/scss/components/_Image.scss +2 -0
  80. package/dist/scss/components/_Indicator.scss +2 -0
  81. package/dist/scss/components/_Input.scss +2 -0
  82. package/dist/scss/components/_Key.scss +2 -0
  83. package/dist/scss/components/_Link.scss +2 -0
  84. package/dist/scss/components/_List.scss +2 -0
  85. package/dist/scss/components/_Media.scss +2 -0
  86. package/dist/scss/components/_Menu.scss +2 -0
  87. package/dist/scss/components/_Motion.scss +2 -0
  88. package/dist/scss/components/_NumberField.scss +2 -0
  89. package/dist/scss/components/_NumberStepper.scss +2 -0
  90. package/dist/scss/components/_OtpField.scss +2 -0
  91. package/dist/scss/components/_PageTransition.scss +2 -0
  92. package/dist/scss/components/_Pagination.scss +2 -0
  93. package/dist/scss/components/_Popover.scss +2 -0
  94. package/dist/scss/components/_Progress.scss +2 -0
  95. package/dist/scss/components/_RadialProgress.scss +2 -0
  96. package/dist/scss/components/_Radio.scss +2 -0
  97. package/dist/scss/components/_Rating.scss +2 -0
  98. package/dist/scss/components/_ScrollCarousel.scss +2 -0
  99. package/dist/scss/components/_ScrollSpy.scss +2 -0
  100. package/dist/scss/components/_SegmentedControl.scss +2 -0
  101. package/dist/scss/components/_Select.scss +2 -0
  102. package/dist/scss/components/_Sidebar.scss +2 -0
  103. package/dist/scss/components/_Skeleton.scss +2 -0
  104. package/dist/scss/components/_Slider.scss +2 -0
  105. package/dist/scss/components/_Spacer.scss +2 -0
  106. package/dist/scss/components/_SpeedDial.scss +2 -0
  107. package/dist/scss/components/_Spinner.scss +2 -0
  108. package/dist/scss/components/_Stack.scss +2 -0
  109. package/dist/scss/components/_Stat.scss +2 -0
  110. package/dist/scss/components/_Status.scss +2 -0
  111. package/dist/scss/components/_Steps.scss +2 -0
  112. package/dist/scss/components/_Swap.scss +2 -0
  113. package/dist/scss/components/_Switch.scss +2 -0
  114. package/dist/scss/components/_Table.scss +2 -0
  115. package/dist/scss/components/_Tabs.scss +2 -0
  116. package/dist/scss/components/_Text.scss +2 -0
  117. package/dist/scss/components/_TextRotate.scss +2 -0
  118. package/dist/scss/components/_Textarea.scss +2 -0
  119. package/dist/scss/components/_ThemeProvider.scss +2 -0
  120. package/dist/scss/components/_Tile.scss +2 -0
  121. package/dist/scss/components/_Toast.scss +2 -0
  122. package/dist/scss/components/_ToggleButton.scss +2 -0
  123. package/dist/scss/components/_Tooltip.scss +2 -0
  124. package/dist/scss/components/_Type.scss +2 -0
  125. package/dist/scss/components/_Visibility.scss +2 -0
  126. package/dist/scss/components/_VisuallyHidden.scss +2 -0
  127. package/dist/shapes.d.ts +12 -1
  128. package/dist/shapes.js +11 -10
  129. package/dist/style-manifest.json +18837 -132
  130. package/dist/theme.js +6 -1
  131. package/dist/themeFiles/index.d.ts +9 -0
  132. package/dist/themeFiles/index.js +9 -0
  133. package/dist/themeFiles/scssModule.d.ts +100 -0
  134. package/dist/themeFiles/scssModule.js +384 -0
  135. package/dist/themeFiles/spec.d.ts +198 -0
  136. package/dist/themeFiles/spec.js +877 -0
  137. package/dist/tokens.css +30 -1
  138. package/dist/typography.js +1 -1
  139. package/dist/utilities.css +435 -0
  140. package/dist/utilities.d.ts +8 -0
  141. package/dist/utilities.js +75 -0
  142. package/package.json +20 -1
  143. package/src/components/AutoLayout/AutoLayout.scss +2 -26
  144. package/src/components/Carousel/Carousel.scss +122 -126
  145. package/src/components/Checkbox/Checkbox.scss +2 -2
  146. package/src/components/Chip/Chip.scss +63 -8
  147. package/src/components/ChoiceGroup/ChoiceGroup.scss +19 -1
  148. package/src/components/Collapsible/Collapsible.scss +3 -0
  149. package/src/components/ColorPicker/ColorPicker.scss +95 -0
  150. package/src/components/Combobox/Combobox.scss +4 -2
  151. package/src/components/Dialog/Dialog.scss +24 -7
  152. package/src/components/EditableField/EditableField.scss +275 -0
  153. package/src/components/Grid/Grid.scss +2 -70
  154. package/src/components/Input/Input.scss +29 -0
  155. package/src/components/Menu/Menu.scss +18 -0
  156. package/src/components/NumberField/NumberField.scss +56 -9
  157. package/src/components/NumberStepper/NumberStepper.scss +13 -0
  158. package/src/components/PageTransition/PageTransition.scss +29 -0
  159. package/src/components/Radio/Radio.scss +2 -2
  160. package/src/components/ScrollCarousel/ScrollCarousel.scss +142 -0
  161. package/src/components/Select/Select.scss +4 -0
  162. package/src/components/Slider/Slider.scss +51 -6
  163. package/src/components/Stack/Stack.scss +2 -48
  164. package/src/components/Switch/Switch.scss +9 -6
  165. package/src/components/Text/Text.scss +5 -2
  166. package/src/styles/_breakpoint-vars.scss +17 -11
  167. package/src/styles/_controls.scss +2 -2
  168. package/src/styles/_core.scss +1 -0
  169. package/src/styles/_kit.scss +483 -56
  170. package/src/styles/_layout-props.scss +197 -0
  171. package/src/styles/_manifest.scss +55 -25
  172. package/src/styles/_mixins.scss +53 -15
  173. package/src/styles/_slides.scss +112 -0
  174. package/src/styles/_utilities.scss +104 -0
  175. package/src/styles/breakpoints.test.ts +21 -1
  176. package/src/styles/entryPoints.test.ts +25 -2
  177. package/src/styles/index.scss +3 -1
  178. package/src/styles/kit.test.ts +171 -1
  179. package/src/styles/public/_breakpoints.scss +43 -0
  180. package/src/styles/public/_slides.scss +3 -0
  181. package/src/styles/public/_utilities.scss +3 -0
  182. package/src/styles/resets.scss +7 -0
  183. package/src/styles/utilities.test.ts +39 -0
  184. package/themes/bevel.css +187 -187
  185. package/themes/bevel.scss +960 -958
  186. package/themes/candy.css +87 -0
  187. package/themes/candy.scss +32 -0
  188. package/themes/extrude.css +42 -42
  189. package/themes/folio.css +200 -200
  190. package/themes/folio.scss +880 -878
  191. package/themes/forest.css +87 -0
  192. package/themes/forest.scss +32 -0
  193. package/themes/grape.css +87 -0
  194. package/themes/grape.scss +32 -0
  195. package/themes/greese.css +36 -0
  196. package/themes/greese.scss +21 -0
  197. package/themes/mono.css +87 -0
  198. package/themes/mono.scss +32 -0
  199. package/themes/ocean.css +87 -0
  200. package/themes/ocean.scss +32 -0
  201. package/themes/outline.css +18 -18
  202. package/themes/pebble.css +8 -8
  203. package/themes/ridge.css +188 -188
  204. package/themes/ridge.scss +820 -818
  205. package/themes/soft.css +11 -11
  206. package/themes/sunset.css +87 -0
  207. package/themes/sunset.scss +32 -0
  208. package/themes/ticket.css +180 -180
  209. package/themes/ticket.scss +881 -879
  210. package/themes/tilt.css +25 -25
package/themes/outline.css CHANGED
@@ -13,54 +13,54 @@
13
13
  */
14
14
  @layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;
15
15
  @layer greese.overrides {
16
- .greese-Alert.greese-Alert--soft {
16
+ .greese-Alert:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-Alert--soft {
17
17
  background-color: var(--greese-color-canvas);
18
18
  border-color: var(--greese-alert-tone);
19
19
  }
20
- .greese-Alert.greese-Alert--outline {
20
+ .greese-Alert:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-Alert--outline {
21
21
  background-color: color-mix(in oklab, var(--greese-alert-tone) 14%, transparent);
22
22
  border-color: transparent;
23
23
  }
24
24
  }
25
25
  @layer greese.overrides {
26
- .greese-Avatar {
26
+ .greese-Avatar:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
27
27
  background-color: transparent;
28
28
  outline: 1.5px solid color-mix(in oklab, currentcolor 70%, transparent);
29
29
  outline-offset: -1.5px;
30
30
  }
31
31
  }
32
32
  @layer greese.overrides {
33
- .greese-Badge.greese-Badge--solid {
33
+ .greese-Badge:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-Badge--solid {
34
34
  color: var(--greese-badge-tone);
35
35
  background-color: color-mix(in oklab, var(--greese-badge-tone) 8%, var(--greese-badge-surface));
36
36
  border-color: var(--greese-badge-tone);
37
37
  }
38
- .greese-Badge.greese-Badge--soft {
38
+ .greese-Badge:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-Badge--soft {
39
39
  background-color: var(--greese-badge-surface);
40
40
  border-color: color-mix(in oklab, var(--greese-badge-tone) 55%, var(--greese-badge-surface));
41
41
  }
42
- .greese-Badge.greese-Badge--outline {
42
+ .greese-Badge:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-Badge--outline {
43
43
  color: var(--greese-badge-tone-on);
44
44
  background-color: var(--greese-badge-tone);
45
45
  border-color: var(--greese-badge-tone);
46
46
  }
47
47
  }
48
48
  @layer greese.overrides {
49
- .greese-Button.greese-Button--solid {
49
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-Button--solid {
50
50
  --greese-button-fg: var(--greese-button-tone);
51
51
  --greese-button-bg: color-mix(in oklab, var(--greese-button-tone) 6%, transparent);
52
52
  --greese-button-border: var(--greese-button-tone);
53
53
  --greese-button-bg-hover: color-mix(in oklab, var(--greese-button-tone) 14%, transparent);
54
54
  --greese-button-bg-active: color-mix(in oklab, var(--greese-button-tone) 22%, transparent);
55
55
  }
56
- .greese-Button.greese-Button--soft {
56
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-Button--soft {
57
57
  --greese-button-fg: var(--greese-button-tone);
58
58
  --greese-button-bg: transparent;
59
59
  --greese-button-border: color-mix(in oklab, var(--greese-button-tone) 45%, transparent);
60
60
  --greese-button-bg-hover: color-mix(in oklab, var(--greese-button-tone) 14%, transparent);
61
61
  --greese-button-bg-active: color-mix(in oklab, var(--greese-button-tone) 22%, transparent);
62
62
  }
63
- .greese-Button.greese-Button--outline {
63
+ .greese-Button:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-Button--outline {
64
64
  --greese-button-fg: var(--greese-button-on-tone);
65
65
  --greese-button-bg: var(--greese-button-tone);
66
66
  --greese-button-border: transparent;
@@ -69,56 +69,56 @@
69
69
  }
70
70
  }
71
71
  @layer greese.overrides {
72
- .greese-Card.greese-Card--filled {
72
+ .greese-Card:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-Card--filled {
73
73
  background-color: transparent;
74
74
  border: 1px solid var(--greese-color-border-strong);
75
75
  --greese-shape-ring: var(--greese-color-border-strong);
76
76
  }
77
- .greese-Card.greese-Card--elevated {
77
+ .greese-Card:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-Card--elevated {
78
78
  background-color: var(--greese-color-canvas);
79
79
  border: 1px solid var(--greese-color-border-strong);
80
80
  box-shadow: none;
81
81
  --greese-shape-ring: var(--greese-color-border-strong);
82
82
  }
83
- .greese-Card.greese-Card--outline {
83
+ .greese-Card:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-Card--outline {
84
84
  background-color: color-mix(in oklab, var(--greese-color-border) 65%, var(--greese-color-surface));
85
85
  border-color: transparent;
86
86
  --greese-shape-ring: transparent;
87
87
  }
88
88
  }
89
89
  @layer greese.overrides {
90
- .greese-Segment {
90
+ .greese-Segment:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
91
91
  --greese-segment-current-bg: transparent;
92
92
  --greese-segment-current-edge: inset 0 0 0 1.5px var(--greese-color-primary);
93
93
  --greese-segment-current-ring: var(--greese-color-primary);
94
94
  }
95
95
  }
96
96
  @layer greese.overrides {
97
- .greese-Tab {
97
+ .greese-Tab:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
98
98
  --greese-tab-current-bg: transparent;
99
99
  --greese-tab-current-edge: inset 0 0 0 1.5px var(--greese-color-primary);
100
100
  --greese-tab-current-ring: var(--greese-color-primary);
101
101
  }
102
102
  }
103
103
  @layer greese.overrides {
104
- .greese-Tile {
104
+ .greese-Tile:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
105
105
  background-color: color-mix(in oklab, var(--greese-color-border) 65%, var(--greese-color-surface));
106
106
  border-color: transparent;
107
107
  }
108
- .greese-Tile.greese-Tile--filled {
108
+ .greese-Tile:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)).greese-Tile--filled {
109
109
  background-color: transparent;
110
110
  border-color: var(--greese-color-border-strong);
111
111
  }
112
112
  }
113
113
  @layer greese.overrides {
114
- .greese-Toast {
114
+ .greese-Toast:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
115
115
  background-color: var(--greese-color-canvas);
116
116
  border: 1px solid var(--greese-toast-tone);
117
117
  border-inline-start-width: 3px;
118
118
  }
119
119
  }
120
120
  @layer greese.overrides {
121
- .greese-Tooltip {
121
+ .greese-Tooltip:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
122
122
  color: var(--greese-color-fg);
123
123
  background-color: var(--greese-color-surface-overlay);
124
124
  border: 1px solid var(--greese-color-fg);
package/themes/pebble.css CHANGED
@@ -23,43 +23,43 @@
23
23
  }
24
24
  }
25
25
  @layer greese.overrides {
26
- .greese-Accordion {
26
+ .greese-Accordion:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
27
27
  display: grid;
28
28
  gap: var(--greese-space-2);
29
29
  border-block-start: 0;
30
30
  }
31
31
  }
32
32
  @layer greese.overrides {
33
- .greese-AccordionItem {
33
+ .greese-AccordionItem:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
34
34
  border-block-end: 0;
35
35
  }
36
- .greese-AccordionItem > .greese-Collapsible-content {
36
+ .greese-AccordionItem:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) > .greese-Collapsible-content {
37
37
  padding-block-start: var(--greese-space-3);
38
38
  border: 1px solid var(--greese-color-border);
39
39
  border-radius: var(--greese-corner-surface);
40
40
  }
41
41
  }
42
42
  @layer greese.overrides {
43
- .greese-Collapsible > .greese-Collapsible-trigger {
43
+ .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) > .greese-Collapsible-trigger {
44
44
  padding-inline: var(--greese-space-4);
45
45
  background-color: var(--greese-color-surface);
46
46
  border: 1px solid var(--greese-collapsible-border, var(--greese-color-border));
47
47
  border-radius: var(--greese-corner-control);
48
48
  }
49
49
  @media (hover: hover) {
50
- .greese-Collapsible > .greese-Collapsible-trigger:hover {
50
+ .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) > .greese-Collapsible-trigger:hover {
51
51
  background-color: color-mix(in oklab, var(--greese-color-fg) 5%, var(--greese-color-surface));
52
52
  }
53
53
  }
54
- .greese-Collapsible[open] > .greese-Collapsible-trigger {
54
+ .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *))[open] > .greese-Collapsible-trigger {
55
55
  margin-block-end: var(--greese-space-2);
56
56
  }
57
- .greese-Collapsible > .greese-Collapsible-content {
57
+ .greese-Collapsible:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) > .greese-Collapsible-content {
58
58
  padding-inline: var(--greese-space-4);
59
59
  }
60
60
  }
61
61
  @layer greese.overrides {
62
- .greese-Textarea {
62
+ .greese-Textarea:where(:not(.greese-reset-shape, .greese-reset-shape *, .greese-reset, .greese-reset *)) {
63
63
  border-radius: var(--greese-radius-xl);
64
64
  }
65
65
  }