@mekari/pixel3-theme 0.4.4 → 0.5.0-dev.1

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 (29) hide show
  1. package/dist/conditions.d.mts +2 -0
  2. package/dist/conditions.d.ts +2 -0
  3. package/dist/index.js +576 -179
  4. package/dist/index.mjs +576 -179
  5. package/dist/semanticTokens/colors.d.mts +321 -12
  6. package/dist/semanticTokens/colors.d.ts +321 -12
  7. package/dist/semanticTokens/index.d.mts +321 -12
  8. package/dist/semanticTokens/index.d.ts +321 -12
  9. package/dist/tokens/colors.d.mts +3 -0
  10. package/dist/tokens/colors.d.ts +3 -0
  11. package/dist/tokens/index.d.mts +7 -0
  12. package/dist/tokens/index.d.ts +7 -0
  13. package/dist/tokens/spacing.d.mts +4 -0
  14. package/dist/tokens/spacing.d.ts +4 -0
  15. package/dist/tokens-next/colors.d.mts +118 -0
  16. package/dist/tokens-next/colors.d.ts +118 -0
  17. package/dist/tokens-next/index.d.mts +118 -0
  18. package/dist/tokens-next/index.d.ts +118 -0
  19. package/package.json +1 -1
  20. package/src/conditions.ts +3 -1
  21. package/src/recipes/avatar.ts +6 -2
  22. package/src/recipes/badge.ts +3 -3
  23. package/src/recipes/banner.ts +1 -1
  24. package/src/recipes/button.ts +29 -12
  25. package/src/recipes/modal.ts +16 -1
  26. package/src/semanticTokens/colors.ts +457 -142
  27. package/src/tokens/colors.ts +1 -0
  28. package/src/tokens/spacing.ts +1 -0
  29. package/src/tokens-next/colors.ts +45 -3
package/src/recipes/badge.ts CHANGED
@@ -109,7 +109,7 @@ const badgeRecipe = defineRecipe<RecipeVariantRecord>({
109
109
  backgroundColor: 'sky.400',
110
110
  color: 'white',
111
111
  _nextTheme: {
112
- backgroundColor: 'background.brand.bold',
112
+ backgroundColor: 'background.information.bold',
113
113
  color: 'text.inverse'
114
114
  }
115
115
  }
@@ -171,7 +171,7 @@ const badgeRecipe = defineRecipe<RecipeVariantRecord>({
171
171
  backgroundColor: 'blue.50',
172
172
  color: 'blue.700',
173
173
  _nextTheme: {
174
- backgroundColor: 'background.brand',
174
+ backgroundColor: 'background.information',
175
175
  color: 'text.information'
176
176
  }
177
177
  }
@@ -232,7 +232,7 @@ const badgeRecipe = defineRecipe<RecipeVariantRecord>({
232
232
  css: {
233
233
  backgroundColor: 'sky.400',
234
234
  _nextTheme: {
235
- backgroundColor: 'icon.brand',
235
+ backgroundColor: 'icon.information',
236
236
  color: 'text.inverse'
237
237
  }
238
238
  }
package/src/recipes/banner.ts CHANGED
@@ -26,7 +26,7 @@ const bannerSlotRecipe = defineSlotRecipe({
26
26
  root: {
27
27
  backgroundColor: 'blue.50',
28
28
  _nextTheme: {
29
- backgroundColor: 'background.brand'
29
+ backgroundColor: 'background.information'
30
30
  }
31
31
  }
32
32
  },
package/src/recipes/button.ts CHANGED
@@ -23,6 +23,9 @@ const buttonRecipe = defineRecipe({
23
23
  _isFullWidth: {
24
24
  width: 'full'
25
25
  },
26
+ _isRounded: {
27
+ borderRadius: 'full'
28
+ },
26
29
  _loading: {
27
30
  cursor: 'wait',
28
31
  position: 'absolute',
@@ -271,8 +274,14 @@ const buttonRecipe = defineRecipe({
271
274
  borderRadius: 'sm',
272
275
  textStyle: 'label.md',
273
276
  fontWeight: 'regular',
277
+ _isRounded: {
278
+ borderRadius: 'full'
279
+ },
274
280
  _loading: {
275
- borderRadius: 'sm'
281
+ borderRadius: 'sm',
282
+ _isRounded: {
283
+ borderRadius: 'full'
284
+ }
276
285
  },
277
286
  _hasIcon: {
278
287
  paddingX: '1',
@@ -316,8 +325,14 @@ const buttonRecipe = defineRecipe({
316
325
  borderRadius: 'md',
317
326
  textStyle: 'label.md',
318
327
  fontWeight: 'semiBold',
328
+ _isRounded: {
329
+ borderRadius: 'full'
330
+ },
319
331
  _loading: {
320
- borderRadius: 'md'
332
+ borderRadius: 'md',
333
+ _isRounded: {
334
+ borderRadius: 'full'
335
+ }
321
336
  },
322
337
  _hasIcon: {
323
338
  paddingX: '2',
@@ -459,16 +474,18 @@ const buttonGroupRecipe = defineRecipe({
459
474
  gap: 'var(--mp-button-group-spacing)',
460
475
  '&[data-split-button=true]': {
461
476
  gap: '0',
462
- '& > [data-pixel-component=MpButton]': {
463
- _first: {
464
- borderTopRightRadius: 'none !important',
465
- borderBottomRightRadius: 'none !important',
466
- borderRight: '0 !important'
467
- },
468
- _last: {
469
- borderTopLeftRadius: 'none !important',
470
- borderBottomLeftRadius: 'none !important'
471
- }
477
+ '& > button:first-of-type': {
478
+ borderTopRightRadius: 'none !important',
479
+ borderBottomRightRadius: 'none !important',
480
+ borderRight: '0 !important'
481
+ },
482
+ '& > button:not(:first-of-type):not(:last-of-type)': {
483
+ borderRadius: 'none !important',
484
+ borderRight: '0 !important'
485
+ },
486
+ '& > button:last-of-type': {
487
+ borderTopLeftRadius: 'none !important',
488
+ borderBottomLeftRadius: 'none !important'
472
489
  }
473
490
  }
474
491
  }
package/src/recipes/modal.ts CHANGED
@@ -29,7 +29,17 @@ export const modalSlotRecipe = defineSlotRecipe({
29
29
  },
30
30
  body: {
31
31
  p: 4,
32
- flex: 1
32
+ flex: 1,
33
+ '&[data-drawer-variant="floating"]': {
34
+ rounded: 'lg',
35
+ background: 'background.stage',
36
+ px: '0',
37
+ pt: '0',
38
+ pb: '4',
39
+ _focus: {
40
+ outline: 'none'
41
+ }
42
+ }
33
43
  },
34
44
  contentRoot: {
35
45
  pos: 'fixed',
@@ -57,6 +67,11 @@ export const modalSlotRecipe = defineSlotRecipe({
57
67
  '&[data-modal-type="drawer"]': {
58
68
  borderColor: 'border.default'
59
69
  }
70
+ },
71
+ '&[data-modal-type="drawer"][data-drawer-variant="floating"]': {
72
+ background: 'transparent',
73
+ borderWidth: '0px !important',
74
+ p: '3'
60
75
  }
61
76
  },
62
77
  header: {