@mekari/pixel3-theme 0.5.0-dev.0 → 0.5.0-dev.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 (20) hide show
  1. package/dist/conditions.d.mts +1 -0
  2. package/dist/conditions.d.ts +1 -0
  3. package/dist/index.js +160 -72
  4. package/dist/index.mjs +160 -72
  5. package/dist/semanticTokens/colors.d.mts +59 -24
  6. package/dist/semanticTokens/colors.d.ts +59 -24
  7. package/dist/semanticTokens/index.d.mts +59 -24
  8. package/dist/semanticTokens/index.d.ts +59 -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/recipes/progress.ts +1 -1
  19. package/src/semanticTokens/colors.ts +97 -56
  20. 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: {
@@ -591,6 +621,7 @@ declare const colors: {
591
621
  };
592
622
  nav: {
593
623
  parent: {
624
+ deprecated: string;
594
625
  value: {
595
626
  base: string;
596
627
  _light: string;
@@ -600,6 +631,7 @@ declare const colors: {
600
631
  };
601
632
  stack: {
602
633
  DEFAULT: {
634
+ deprecated: string;
603
635
  value: {
604
636
  base: string;
605
637
  _light: string;
@@ -608,6 +640,7 @@ declare const colors: {
608
640
  };
609
641
  };
610
642
  hovered: {
643
+ deprecated: string;
611
644
  value: {
612
645
  base: string;
613
646
  _light: string;
@@ -895,19 +928,21 @@ declare const colors: {
895
928
  };
896
929
  border: {
897
930
  default: {
898
- value: {
899
- base: string;
900
- _light: string;
901
- _dark: string;
902
- _enterprise: string;
931
+ DEFAULT: {
932
+ value: {
933
+ base: string;
934
+ _light: string;
935
+ _dark: string;
936
+ _enterprise: string;
937
+ };
903
938
  };
904
- };
905
- subtle: {
906
- value: {
907
- base: string;
908
- _light: string;
909
- _dark: string;
910
- _enterprise: string;
939
+ subtle: {
940
+ value: {
941
+ base: string;
942
+ _light: string;
943
+ _dark: string;
944
+ _enterprise: string;
945
+ };
911
946
  };
912
947
  };
913
948
  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: {
@@ -592,6 +622,7 @@ declare const semanticTokens: {
592
622
  };
593
623
  nav: {
594
624
  parent: {
625
+ deprecated: string;
595
626
  value: {
596
627
  base: string;
597
628
  _light: string;
@@ -601,6 +632,7 @@ declare const semanticTokens: {
601
632
  };
602
633
  stack: {
603
634
  DEFAULT: {
635
+ deprecated: string;
604
636
  value: {
605
637
  base: string;
606
638
  _light: string;
@@ -609,6 +641,7 @@ declare const semanticTokens: {
609
641
  };
610
642
  };
611
643
  hovered: {
644
+ deprecated: string;
612
645
  value: {
613
646
  base: string;
614
647
  _light: string;
@@ -896,19 +929,21 @@ declare const semanticTokens: {
896
929
  };
897
930
  border: {
898
931
  default: {
899
- value: {
900
- base: string;
901
- _light: string;
902
- _dark: string;
903
- _enterprise: string;
932
+ DEFAULT: {
933
+ value: {
934
+ base: string;
935
+ _light: string;
936
+ _dark: string;
937
+ _enterprise: string;
938
+ };
904
939
  };
905
- };
906
- subtle: {
907
- value: {
908
- base: string;
909
- _light: string;
910
- _dark: string;
911
- _enterprise: string;
940
+ subtle: {
941
+ value: {
942
+ base: string;
943
+ _light: string;
944
+ _dark: string;
945
+ _enterprise: string;
946
+ };
912
947
  };
913
948
  };
914
949
  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: {
@@ -592,6 +622,7 @@ declare const semanticTokens: {
592
622
  };
593
623
  nav: {
594
624
  parent: {
625
+ deprecated: string;
595
626
  value: {
596
627
  base: string;
597
628
  _light: string;
@@ -601,6 +632,7 @@ declare const semanticTokens: {
601
632
  };
602
633
  stack: {
603
634
  DEFAULT: {
635
+ deprecated: string;
604
636
  value: {
605
637
  base: string;
606
638
  _light: string;
@@ -609,6 +641,7 @@ declare const semanticTokens: {
609
641
  };
610
642
  };
611
643
  hovered: {
644
+ deprecated: string;
612
645
  value: {
613
646
  base: string;
614
647
  _light: string;
@@ -896,19 +929,21 @@ declare const semanticTokens: {
896
929
  };
897
930
  border: {
898
931
  default: {
899
- value: {
900
- base: string;
901
- _light: string;
902
- _dark: string;
903
- _enterprise: string;
932
+ DEFAULT: {
933
+ value: {
934
+ base: string;
935
+ _light: string;
936
+ _dark: string;
937
+ _enterprise: string;
938
+ };
904
939
  };
905
- };
906
- subtle: {
907
- value: {
908
- base: string;
909
- _light: string;
910
- _dark: string;
911
- _enterprise: string;
940
+ subtle: {
941
+ value: {
942
+ base: string;
943
+ _light: string;
944
+ _dark: string;
945
+ _enterprise: string;
946
+ };
912
947
  };
913
948
  };
914
949
  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.2",
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: {
package/src/recipes/progress.ts CHANGED
@@ -12,7 +12,7 @@ const progressSlotRecipe = defineSlotRecipe({
12
12
  background: 'gray.100',
13
13
  transition: 'all 250ms linear',
14
14
  _nextTheme: {
15
- background: 'background.subtle'
15
+ background: 'background.neutral.subtle'
16
16
  }
17
17
  },
18
18
  linear: {