@mekari/pixel3-theme 0.5.0-dev.0 → 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 (19) hide show
  1. package/dist/conditions.d.mts +1 -0
  2. package/dist/conditions.d.ts +1 -0
  3. package/dist/index.js +156 -71
  4. package/dist/index.mjs +156 -71
  5. package/dist/semanticTokens/colors.d.mts +56 -24
  6. package/dist/semanticTokens/colors.d.ts +56 -24
  7. package/dist/semanticTokens/index.d.mts +56 -24
  8. package/dist/semanticTokens/index.d.ts +56 -24
  9. package/dist/tokens/index.d.mts +4 -0
  10. package/dist/tokens/index.d.ts +4 -0
  11. package/dist/tokens/spacing.d.mts +4 -0
  12. package/dist/tokens/spacing.d.ts +4 -0
  13. package/package.json +1 -1
  14. package/src/conditions.ts +1 -0
  15. package/src/recipes/avatar.ts +6 -2
  16. package/src/recipes/button.ts +29 -12
  17. package/src/recipes/modal.ts +16 -1
  18. package/src/semanticTokens/colors.ts +94 -56
  19. package/src/tokens/spacing.ts +1 -0
package/dist/semanticTokens/colors.d.ts CHANGED
@@ -237,19 +237,21 @@ declare const colors: {
237
237
  };
238
238
  };
239
239
  selected: {
240
- value: {
241
- base: string;
242
- _light: string;
243
- _dark: string;
244
- _enterprise: string;
240
+ DEFAULT: {
241
+ value: {
242
+ base: string;
243
+ _light: string;
244
+ _dark: string;
245
+ _enterprise: string;
246
+ };
245
247
  };
246
- };
247
- selectedDisabled: {
248
- value: {
249
- base: string;
250
- _light: string;
251
- _dark: string;
252
- _enterprise: string;
248
+ disabled: {
249
+ value: {
250
+ base: string;
251
+ _light: string;
252
+ _dark: string;
253
+ _enterprise: string;
254
+ };
253
255
  };
254
256
  };
255
257
  };
@@ -552,6 +554,34 @@ declare const colors: {
552
554
  };
553
555
  };
554
556
  };
557
+ nav: {
558
+ parent: {
559
+ value: {
560
+ base: string;
561
+ _light: string;
562
+ _dark: string;
563
+ _enterprise: string;
564
+ };
565
+ };
566
+ stack: {
567
+ DEFAULT: {
568
+ value: {
569
+ base: string;
570
+ _light: string;
571
+ _dark: string;
572
+ _enterprise: string;
573
+ };
574
+ };
575
+ hovered: {
576
+ value: {
577
+ base: string;
578
+ _light: string;
579
+ _dark: string;
580
+ _enterprise: string;
581
+ };
582
+ };
583
+ };
584
+ };
555
585
  header: {
556
586
  DEFAULT: {
557
587
  value: {
@@ -895,19 +925,21 @@ declare const colors: {
895
925
  };
896
926
  border: {
897
927
  default: {
898
- value: {
899
- base: string;
900
- _light: string;
901
- _dark: string;
902
- _enterprise: string;
928
+ DEFAULT: {
929
+ value: {
930
+ base: string;
931
+ _light: string;
932
+ _dark: string;
933
+ _enterprise: string;
934
+ };
903
935
  };
904
- };
905
- subtle: {
906
- value: {
907
- base: string;
908
- _light: string;
909
- _dark: string;
910
- _enterprise: string;
936
+ subtle: {
937
+ value: {
938
+ base: string;
939
+ _light: string;
940
+ _dark: string;
941
+ _enterprise: string;
942
+ };
911
943
  };
912
944
  };
913
945
  bold: {
package/dist/semanticTokens/index.d.mts CHANGED
@@ -238,19 +238,21 @@ declare const semanticTokens: {
238
238
  };
239
239
  };
240
240
  selected: {
241
- value: {
242
- base: string;
243
- _light: string;
244
- _dark: string;
245
- _enterprise: string;
241
+ DEFAULT: {
242
+ value: {
243
+ base: string;
244
+ _light: string;
245
+ _dark: string;
246
+ _enterprise: string;
247
+ };
246
248
  };
247
- };
248
- selectedDisabled: {
249
- value: {
250
- base: string;
251
- _light: string;
252
- _dark: string;
253
- _enterprise: string;
249
+ disabled: {
250
+ value: {
251
+ base: string;
252
+ _light: string;
253
+ _dark: string;
254
+ _enterprise: string;
255
+ };
254
256
  };
255
257
  };
256
258
  };
@@ -553,6 +555,34 @@ declare const semanticTokens: {
553
555
  };
554
556
  };
555
557
  };
558
+ nav: {
559
+ parent: {
560
+ value: {
561
+ base: string;
562
+ _light: string;
563
+ _dark: string;
564
+ _enterprise: string;
565
+ };
566
+ };
567
+ stack: {
568
+ DEFAULT: {
569
+ value: {
570
+ base: string;
571
+ _light: string;
572
+ _dark: string;
573
+ _enterprise: string;
574
+ };
575
+ };
576
+ hovered: {
577
+ value: {
578
+ base: string;
579
+ _light: string;
580
+ _dark: string;
581
+ _enterprise: string;
582
+ };
583
+ };
584
+ };
585
+ };
556
586
  header: {
557
587
  DEFAULT: {
558
588
  value: {
@@ -896,19 +926,21 @@ declare const semanticTokens: {
896
926
  };
897
927
  border: {
898
928
  default: {
899
- value: {
900
- base: string;
901
- _light: string;
902
- _dark: string;
903
- _enterprise: string;
929
+ DEFAULT: {
930
+ value: {
931
+ base: string;
932
+ _light: string;
933
+ _dark: string;
934
+ _enterprise: string;
935
+ };
904
936
  };
905
- };
906
- subtle: {
907
- value: {
908
- base: string;
909
- _light: string;
910
- _dark: string;
911
- _enterprise: string;
937
+ subtle: {
938
+ value: {
939
+ base: string;
940
+ _light: string;
941
+ _dark: string;
942
+ _enterprise: string;
943
+ };
912
944
  };
913
945
  };
914
946
  bold: {
package/dist/semanticTokens/index.d.ts CHANGED
@@ -238,19 +238,21 @@ declare const semanticTokens: {
238
238
  };
239
239
  };
240
240
  selected: {
241
- value: {
242
- base: string;
243
- _light: string;
244
- _dark: string;
245
- _enterprise: string;
241
+ DEFAULT: {
242
+ value: {
243
+ base: string;
244
+ _light: string;
245
+ _dark: string;
246
+ _enterprise: string;
247
+ };
246
248
  };
247
- };
248
- selectedDisabled: {
249
- value: {
250
- base: string;
251
- _light: string;
252
- _dark: string;
253
- _enterprise: string;
249
+ disabled: {
250
+ value: {
251
+ base: string;
252
+ _light: string;
253
+ _dark: string;
254
+ _enterprise: string;
255
+ };
254
256
  };
255
257
  };
256
258
  };
@@ -553,6 +555,34 @@ declare const semanticTokens: {
553
555
  };
554
556
  };
555
557
  };
558
+ nav: {
559
+ parent: {
560
+ value: {
561
+ base: string;
562
+ _light: string;
563
+ _dark: string;
564
+ _enterprise: string;
565
+ };
566
+ };
567
+ stack: {
568
+ DEFAULT: {
569
+ value: {
570
+ base: string;
571
+ _light: string;
572
+ _dark: string;
573
+ _enterprise: string;
574
+ };
575
+ };
576
+ hovered: {
577
+ value: {
578
+ base: string;
579
+ _light: string;
580
+ _dark: string;
581
+ _enterprise: string;
582
+ };
583
+ };
584
+ };
585
+ };
556
586
  header: {
557
587
  DEFAULT: {
558
588
  value: {
@@ -896,19 +926,21 @@ declare const semanticTokens: {
896
926
  };
897
927
  border: {
898
928
  default: {
899
- value: {
900
- base: string;
901
- _light: string;
902
- _dark: string;
903
- _enterprise: string;
929
+ DEFAULT: {
930
+ value: {
931
+ base: string;
932
+ _light: string;
933
+ _dark: string;
934
+ _enterprise: string;
935
+ };
904
936
  };
905
- };
906
- subtle: {
907
- value: {
908
- base: string;
909
- _light: string;
910
- _dark: string;
911
- _enterprise: string;
937
+ subtle: {
938
+ value: {
939
+ base: string;
940
+ _light: string;
941
+ _dark: string;
942
+ _enterprise: string;
943
+ };
912
944
  };
913
945
  };
914
946
  bold: {
package/dist/tokens/index.d.mts CHANGED
@@ -593,6 +593,10 @@ declare const tokens: {
593
593
  value: string;
594
594
  description: string;
595
595
  };
596
+ 2.5: {
597
+ value: string;
598
+ description: string;
599
+ };
596
600
  3: {
597
601
  value: string;
598
602
  description: string;
package/dist/tokens/index.d.ts CHANGED
@@ -593,6 +593,10 @@ declare const tokens: {
593
593
  value: string;
594
594
  description: string;
595
595
  };
596
+ 2.5: {
597
+ value: string;
598
+ description: string;
599
+ };
596
600
  3: {
597
601
  value: string;
598
602
  description: string;
package/dist/tokens/spacing.d.mts CHANGED
@@ -18,6 +18,10 @@ declare const spacing: {
18
18
  value: string;
19
19
  description: string;
20
20
  };
21
+ 2.5: {
22
+ value: string;
23
+ description: string;
24
+ };
21
25
  3: {
22
26
  value: string;
23
27
  description: string;
package/dist/tokens/spacing.d.ts CHANGED
@@ -18,6 +18,10 @@ declare const spacing: {
18
18
  value: string;
19
19
  description: string;
20
20
  };
21
+ 2.5: {
22
+ value: string;
23
+ description: string;
24
+ };
21
25
  3: {
22
26
  value: string;
23
27
  description: string;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mekari/pixel3-theme",
3
3
  "description": "Theme for mekari pixel 3",
4
- "version": "0.5.0-dev.0",
4
+ "version": "0.5.0-dev.1",
5
5
  "main": "dist/index.js",
6
6
  "license": "MIT",
7
7
  "files": [
package/src/conditions.ts CHANGED
@@ -17,6 +17,7 @@ export const conditions = {
17
17
  hasBorder: '&[data-has-border=true]',
18
18
  hasBackground: '&[data-has-background=true]',
19
19
  isFullWidth: '&[data-is-full-width=true]',
20
+ isRounded: '&[data-is-rounded=true]',
20
21
  placementLeft: '&[data-placement=left]',
21
22
  placementRight: '&[data-placement=right]',
22
23
  nextTheme: '[data-panda-theme=next] &',
package/src/recipes/avatar.ts CHANGED
@@ -186,7 +186,9 @@ const avatarSlotRecipe = defineSlotRecipe({
186
186
  defaultVariants: {
187
187
  size: 'md',
188
188
  variant: 'circle'
189
- }
189
+ },
190
+ // TODO: Check why this recipe need to generate statically
191
+ staticCss: ['*']
190
192
  })
191
193
 
192
194
  const avatarGroupSlotRecipe = defineSlotRecipe({
@@ -261,7 +263,9 @@ const avatarGroupSlotRecipe = defineSlotRecipe({
261
263
  }
262
264
  },
263
265
  compoundVariants: [],
264
- defaultVariants: {}
266
+ defaultVariants: {},
267
+ // TODO: Check why this recipe need to generate statically
268
+ staticCss: ['*']
265
269
  })
266
270
 
267
271
  export { avatarSlotRecipe, avatarGroupSlotRecipe }
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: {