@mekari/pixel3-theme 0.2.2-dev.2 → 0.2.2-dev.4

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 (18) hide show
  1. package/dist/index.js +62 -50
  2. package/dist/index.mjs +117 -105
  3. package/dist/recipes/divider.d.mts +2 -2
  4. package/dist/recipes/divider.d.ts +2 -2
  5. package/dist/recipes/index.d.mts +1 -1
  6. package/dist/recipes/index.d.ts +1 -1
  7. package/dist/semanticTokens/colors.d.mts +6 -6
  8. package/dist/semanticTokens/colors.d.ts +6 -6
  9. package/dist/semanticTokens/index.d.mts +6 -6
  10. package/dist/semanticTokens/index.d.ts +6 -6
  11. package/package.json +1 -1
  12. package/src/recipes/date-picker.ts +13 -4
  13. package/src/recipes/divider.ts +37 -31
  14. package/src/recipes/index.ts +2 -2
  15. package/src/recipes/modal.ts +4 -1
  16. package/src/recipes/select.ts +4 -4
  17. package/src/recipes/tag.ts +8 -14
  18. package/src/semanticTokens/colors.ts +18 -18
package/dist/semanticTokens/colors.d.mts CHANGED
@@ -158,14 +158,14 @@ declare const colors: {
158
158
  pressed: {
159
159
  value: {
160
160
  base: string;
161
- _liht: string;
161
+ _light: string;
162
162
  _dark: string;
163
163
  };
164
164
  };
165
165
  selected: {
166
166
  value: {
167
167
  base: string;
168
- _liht: string;
168
+ _light: string;
169
169
  _dark: string;
170
170
  };
171
171
  };
@@ -234,7 +234,7 @@ declare const colors: {
234
234
  pressed: {
235
235
  value: {
236
236
  base: string;
237
- _liht: string;
237
+ _light: string;
238
238
  _dark: string;
239
239
  };
240
240
  };
@@ -280,7 +280,7 @@ declare const colors: {
280
280
  pressed: {
281
281
  value: {
282
282
  base: string;
283
- _liht: string;
283
+ _light: string;
284
284
  _dark: string;
285
285
  };
286
286
  };
@@ -326,7 +326,7 @@ declare const colors: {
326
326
  pressed: {
327
327
  value: {
328
328
  base: string;
329
- _liht: string;
329
+ _light: string;
330
330
  _dark: string;
331
331
  };
332
332
  };
@@ -372,7 +372,7 @@ declare const colors: {
372
372
  pressed: {
373
373
  value: {
374
374
  base: string;
375
- _liht: string;
375
+ _light: string;
376
376
  _dark: string;
377
377
  };
378
378
  };
package/dist/semanticTokens/colors.d.ts CHANGED
@@ -158,14 +158,14 @@ declare const colors: {
158
158
  pressed: {
159
159
  value: {
160
160
  base: string;
161
- _liht: string;
161
+ _light: string;
162
162
  _dark: string;
163
163
  };
164
164
  };
165
165
  selected: {
166
166
  value: {
167
167
  base: string;
168
- _liht: string;
168
+ _light: string;
169
169
  _dark: string;
170
170
  };
171
171
  };
@@ -234,7 +234,7 @@ declare const colors: {
234
234
  pressed: {
235
235
  value: {
236
236
  base: string;
237
- _liht: string;
237
+ _light: string;
238
238
  _dark: string;
239
239
  };
240
240
  };
@@ -280,7 +280,7 @@ declare const colors: {
280
280
  pressed: {
281
281
  value: {
282
282
  base: string;
283
- _liht: string;
283
+ _light: string;
284
284
  _dark: string;
285
285
  };
286
286
  };
@@ -326,7 +326,7 @@ declare const colors: {
326
326
  pressed: {
327
327
  value: {
328
328
  base: string;
329
- _liht: string;
329
+ _light: string;
330
330
  _dark: string;
331
331
  };
332
332
  };
@@ -372,7 +372,7 @@ declare const colors: {
372
372
  pressed: {
373
373
  value: {
374
374
  base: string;
375
- _liht: string;
375
+ _light: string;
376
376
  _dark: string;
377
377
  };
378
378
  };
package/dist/semanticTokens/index.d.mts CHANGED
@@ -159,14 +159,14 @@ declare const semanticTokens: {
159
159
  pressed: {
160
160
  value: {
161
161
  base: string;
162
- _liht: string;
162
+ _light: string;
163
163
  _dark: string;
164
164
  };
165
165
  };
166
166
  selected: {
167
167
  value: {
168
168
  base: string;
169
- _liht: string;
169
+ _light: string;
170
170
  _dark: string;
171
171
  };
172
172
  };
@@ -235,7 +235,7 @@ declare const semanticTokens: {
235
235
  pressed: {
236
236
  value: {
237
237
  base: string;
238
- _liht: string;
238
+ _light: string;
239
239
  _dark: string;
240
240
  };
241
241
  };
@@ -281,7 +281,7 @@ declare const semanticTokens: {
281
281
  pressed: {
282
282
  value: {
283
283
  base: string;
284
- _liht: string;
284
+ _light: string;
285
285
  _dark: string;
286
286
  };
287
287
  };
@@ -327,7 +327,7 @@ declare const semanticTokens: {
327
327
  pressed: {
328
328
  value: {
329
329
  base: string;
330
- _liht: string;
330
+ _light: string;
331
331
  _dark: string;
332
332
  };
333
333
  };
@@ -373,7 +373,7 @@ declare const semanticTokens: {
373
373
  pressed: {
374
374
  value: {
375
375
  base: string;
376
- _liht: string;
376
+ _light: string;
377
377
  _dark: string;
378
378
  };
379
379
  };
package/dist/semanticTokens/index.d.ts CHANGED
@@ -159,14 +159,14 @@ declare const semanticTokens: {
159
159
  pressed: {
160
160
  value: {
161
161
  base: string;
162
- _liht: string;
162
+ _light: string;
163
163
  _dark: string;
164
164
  };
165
165
  };
166
166
  selected: {
167
167
  value: {
168
168
  base: string;
169
- _liht: string;
169
+ _light: string;
170
170
  _dark: string;
171
171
  };
172
172
  };
@@ -235,7 +235,7 @@ declare const semanticTokens: {
235
235
  pressed: {
236
236
  value: {
237
237
  base: string;
238
- _liht: string;
238
+ _light: string;
239
239
  _dark: string;
240
240
  };
241
241
  };
@@ -281,7 +281,7 @@ declare const semanticTokens: {
281
281
  pressed: {
282
282
  value: {
283
283
  base: string;
284
- _liht: string;
284
+ _light: string;
285
285
  _dark: string;
286
286
  };
287
287
  };
@@ -327,7 +327,7 @@ declare const semanticTokens: {
327
327
  pressed: {
328
328
  value: {
329
329
  base: string;
330
- _liht: string;
330
+ _light: string;
331
331
  _dark: string;
332
332
  };
333
333
  };
@@ -373,7 +373,7 @@ declare const semanticTokens: {
373
373
  pressed: {
374
374
  value: {
375
375
  base: string;
376
- _liht: string;
376
+ _light: string;
377
377
  _dark: string;
378
378
  };
379
379
  };
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.2.2-dev.2",
4
+ "version": "0.2.2-dev.4",
5
5
  "main": "dist/index.js",
6
6
  "license": "MIT",
7
7
  "files": [
package/src/recipes/date-picker.ts CHANGED
@@ -343,10 +343,13 @@ const monthItemRecipe = defineRecipe({
343
343
  color: 'gray.400',
344
344
  cursor: 'not-allowed',
345
345
  borderColor: 'transparent',
346
- backgroundColor: 'transparent'
346
+ backgroundColor: 'transparent',
347
+ _nextTheme: {
348
+ color: 'text.disabled'
349
+ }
347
350
  },
348
351
  _nextTheme: {
349
- color: 'text.default'
352
+ color: 'text.default',
350
353
  }
351
354
  },
352
355
  variants: {
@@ -423,7 +426,10 @@ const yearItemRecipe = defineRecipe({
423
426
  color: 'gray.400',
424
427
  cursor: 'not-allowed',
425
428
  borderColor: 'transparent',
426
- backgroundColor: 'transparent'
429
+ backgroundColor: 'transparent',
430
+ _nextTheme: {
431
+ color: 'text.disabled'
432
+ }
427
433
  },
428
434
  _nextTheme: {
429
435
  color: 'text.default'
@@ -503,7 +509,10 @@ const timeItemRecipe = defineRecipe({
503
509
  color: 'gray.400',
504
510
  cursor: 'not-allowed',
505
511
  borderColor: 'transparent',
506
- backgroundColor: 'transparent'
512
+ backgroundColor: 'transparent',
513
+ _nextTheme: {
514
+ color: 'text.disabled'
515
+ }
507
516
  },
508
517
  _nextTheme: {
509
518
  color: 'text.default'
package/src/recipes/divider.ts CHANGED
@@ -1,43 +1,49 @@
1
- import { defineRecipe } from '@pandacss/dev'
1
+ import { defineSlotRecipe } from '@pandacss/dev'
2
2
 
3
- const dividerRecipe = defineRecipe({
3
+ const dividerSlotRecipe = defineSlotRecipe({
4
4
  className: 'divider',
5
5
  jsx: ['MpDivider', 'mp-divider'],
6
+ slots: ['root', 'label'],
6
7
  base: {
7
- border: 0,
8
- opacity: 0.6,
9
- color: 'rgb(208, 214, 221)',
10
- _nextTheme: {
11
- color: 'border.default',
12
- opacity: 1,
13
- }
14
- },
15
- variants: {
16
- variant: {
17
- solid: {
18
- borderStyle: 'solid',
19
- },
20
- dashed: {
21
- borderStyle: 'dashed'
8
+ root: {
9
+ position: 'relative',
10
+ borderColor: 'gray.100',
11
+ color: 'gray.100',
12
+ _nextTheme: {
13
+ color: 'text.secondary',
14
+ borderColor: 'border.default'
22
15
  }
23
16
  },
24
- orientation: {
25
- horizontal: {
26
- borderBottom: '0.0625rem solid',
27
- height: 'auto',
28
- marginY: 2
17
+ label: {
18
+ display: 'flex',
19
+ alignItems: 'center',
20
+ borderColor: 'gray.100',
21
+ color: 'gray.600',
22
+ _nextTheme: {
23
+ color: 'text.secondary',
24
+ },
25
+ _before: {
26
+ content: '""',
27
+ flex: 1,
28
+ borderTopWidth: '0.0625rem',
29
+ marginRight: '2',
30
+ borderColor: 'gray.100',
31
+ _nextTheme: {
32
+ borderColor: 'border.default'
33
+ },
29
34
  },
30
- vertical: {
31
- borderLeft: '0.0625rem solid',
32
- height: 'auto',
33
- marginX: 2
35
+ _after: {
36
+ content: '""',
37
+ flex: 1,
38
+ borderTopWidth: '0.0625rem',
39
+ marginLeft: '2',
40
+ borderColor: 'gray.100',
41
+ _nextTheme: {
42
+ borderColor: 'border.default'
43
+ },
34
44
  }
35
45
  }
36
- },
37
- compoundVariants: [],
38
- defaultVariants: {
39
- orientation: 'horizontal'
40
46
  }
41
47
  })
42
48
 
43
- export { dividerRecipe }
49
+ export { dividerSlotRecipe }
package/src/recipes/index.ts CHANGED
@@ -21,7 +21,7 @@ import { tableRecipe, tableContainerRecipe } from './table'
21
21
  import { progressSlotRecipe } from './progress'
22
22
  import { formControlSlotRecipe } from './form-control'
23
23
  import { inputTagSlotRecipe } from './input-tag'
24
- import { dividerRecipe } from './divider'
24
+ import { dividerSlotRecipe } from './divider'
25
25
  import { modalSlotRecipe } from './modal'
26
26
  import { uploadSlotRecipe, uploadListSlotRecipe } from './upload'
27
27
  import { dropzoneSlotRecipe } from './dropzone'
@@ -81,7 +81,6 @@ export const recipes = {
81
81
  tabSelectedBorderRecipe,
82
82
  tableRecipe,
83
83
  tableContainerRecipe,
84
- dividerRecipe,
85
84
  bannerTitleRecipe,
86
85
  bannerDescriptionRecipe,
87
86
  bannerLinkRecipe,
@@ -98,6 +97,7 @@ export const recipes = {
98
97
  export const slotRecipes = {
99
98
  accordionSlotRecipe,
100
99
  checkboxSlotRecipe,
100
+ dividerSlotRecipe,
101
101
  radioSlotRecipe,
102
102
  sharedSlotRecipe,
103
103
  progressSlotRecipe,
package/src/recipes/modal.ts CHANGED
@@ -102,7 +102,10 @@ export const modalSlotRecipe = defineSlotRecipe({
102
102
  top: '0',
103
103
  w: '100vw',
104
104
  h: '100vh',
105
- zIndex: 'overlay'
105
+ zIndex: 'overlay',
106
+ _nextTheme: {
107
+ background: 'background.overlay'
108
+ }
106
109
  }
107
110
  },
108
111
  variants: {
package/src/recipes/select.ts CHANGED
@@ -69,15 +69,15 @@ const selectSlotRecipe = defineSlotRecipe({
69
69
  }
70
70
  },
71
71
  _focus: {
72
- borderColor: 'transparent',
72
+ borderColor: 'border.focused',
73
73
  boxShadow: 'focus',
74
74
  _hover: {
75
- borderColor: 'transparent',
75
+ borderColor: 'border.focused',
76
76
  },
77
77
  _invalid: {
78
- borderColor: 'transparent',
78
+ borderColor: 'border.focused',
79
79
  _hover: {
80
- borderColor: 'transparent',
80
+ borderColor: 'border.focused',
81
81
  },
82
82
  }
83
83
  },
package/src/recipes/tag.ts CHANGED
@@ -47,20 +47,20 @@ const tagSlotRecipe = defineSlotRecipe({
47
47
  size: {
48
48
  sm: {
49
49
  root: {
50
- height: '5',
50
+ height: '5'
51
51
  },
52
52
  close: {
53
53
  width: '5',
54
- height: '5',
54
+ height: '5'
55
55
  }
56
56
  },
57
57
  md: {
58
58
  root: {
59
- height: '7',
59
+ height: '7'
60
60
  },
61
61
  close: {
62
62
  width: '7',
63
- height: '7',
63
+ height: '7'
64
64
  }
65
65
  }
66
66
  },
@@ -71,7 +71,7 @@ const tagSlotRecipe = defineSlotRecipe({
71
71
  background: 'gray.50',
72
72
  _nextTheme: {
73
73
  color: 'text.secondary',
74
- background: 'background.neutral.subtle',
74
+ background: 'background.neutral.subtle'
75
75
  }
76
76
  }
77
77
  },
@@ -81,7 +81,7 @@ const tagSlotRecipe = defineSlotRecipe({
81
81
  backgroundColor: 'red.50',
82
82
  _nextTheme: {
83
83
  color: 'text.danger',
84
- background: 'background.danger',
84
+ background: 'background.danger'
85
85
  }
86
86
  }
87
87
  }
@@ -99,7 +99,7 @@ const tagSlotRecipe = defineSlotRecipe({
99
99
  _nextTheme: {
100
100
  background: 'background.neutral.subtle',
101
101
  boxShadow: '-7px 0px 15px -3px #0000001A',
102
- color: 'icon.default',
102
+ color: 'icon.default'
103
103
  }
104
104
  }
105
105
  }
@@ -115,16 +115,10 @@ const tagSlotRecipe = defineSlotRecipe({
115
115
  _nextTheme: {
116
116
  background: 'background.danger',
117
117
  boxShadow: '-7px 0px 15px -3px #0000001A',
118
- color: 'icon.danger',
118
+ color: 'icon.danger'
119
119
  }
120
120
  }
121
121
  }
122
- },
123
- {
124
- size: 'sm',
125
- css: {
126
- close: { paddingTop: '0' }
127
- }
128
122
  }
129
123
  ],
130
124
  defaultVariants: {
package/src/semanticTokens/colors.ts CHANGED
@@ -111,7 +111,7 @@ export const colors = defineSemanticTokens.colors({
111
111
  _dark: '{colors.dark.1000}'
112
112
  }
113
113
  }
114
- },
114
+ }
115
115
  },
116
116
  brand: {
117
117
  DEFAULT: {
@@ -160,14 +160,14 @@ export const colors = defineSemanticTokens.colors({
160
160
  pressed: {
161
161
  value: {
162
162
  base: '{colors.indigo.900}',
163
- _liht: '{colors.indigo.900}',
163
+ _light: '{colors.indigo.900}',
164
164
  _dark: '{colors.indigo.200}'
165
165
  }
166
166
  },
167
167
  selected: {
168
168
  value: {
169
169
  base: '{colors.indigo.700}',
170
- _liht: '{colors.indigo.700}',
170
+ _light: '{colors.indigo.700}',
171
171
  _dark: '{colors.indigo.400}'
172
172
  }
173
173
  }
@@ -236,10 +236,10 @@ export const colors = defineSemanticTokens.colors({
236
236
  pressed: {
237
237
  value: {
238
238
  base: '{colors.red.900}',
239
- _liht: '{colors.red.900}',
239
+ _light: '{colors.red.900}',
240
240
  _dark: '{colors.red.200}'
241
241
  }
242
- },
242
+ }
243
243
  }
244
244
  },
245
245
  warning: {
@@ -282,10 +282,10 @@ export const colors = defineSemanticTokens.colors({
282
282
  pressed: {
283
283
  value: {
284
284
  base: '{colors.yellow.500}',
285
- _liht: '{colors.yellow.500}',
285
+ _light: '{colors.yellow.500}',
286
286
  _dark: '{colors.yellow.500}'
287
287
  }
288
- },
288
+ }
289
289
  }
290
290
  },
291
291
  success: {
@@ -328,10 +328,10 @@ export const colors = defineSemanticTokens.colors({
328
328
  pressed: {
329
329
  value: {
330
330
  base: '{colors.green.900}',
331
- _liht: '{colors.green.900}',
331
+ _light: '{colors.green.900}',
332
332
  _dark: '{colors.green.200}'
333
333
  }
334
- },
334
+ }
335
335
  }
336
336
  },
337
337
  highlight: {
@@ -374,12 +374,12 @@ export const colors = defineSemanticTokens.colors({
374
374
  pressed: {
375
375
  value: {
376
376
  base: '{colors.violet.900}',
377
- _liht: '{colors.violet.900}',
377
+ _light: '{colors.violet.900}',
378
378
  _dark: '{colors.violet.200}'
379
379
  }
380
- },
380
+ }
381
381
  }
382
- },
382
+ }
383
383
  },
384
384
  nav: {
385
385
  parent: {
@@ -404,7 +404,7 @@ export const colors = defineSemanticTokens.colors({
404
404
  _dark: '{colors.dark.100}'
405
405
  }
406
406
  }
407
- },
407
+ }
408
408
  },
409
409
  text: {
410
410
  default: {
@@ -437,7 +437,7 @@ export const colors = defineSemanticTokens.colors({
437
437
  _light: '{colors.neutral.800}',
438
438
  _dark: '{colors.dark.800}'
439
439
  }
440
- },
440
+ }
441
441
  },
442
442
  placeholder: {
443
443
  value: {
@@ -500,7 +500,7 @@ export const colors = defineSemanticTokens.colors({
500
500
  _dark: '{colors.yellow.300}'
501
501
  }
502
502
  },
503
-
503
+
504
504
  inverse: {
505
505
  value: {
506
506
  base: '{colors.neutral.1000}',
@@ -649,7 +649,7 @@ export const colors = defineSemanticTokens.colors({
649
649
  _light: '{colors.neutral.1000}',
650
650
  _dark: '{colors.neutral.100}'
651
651
  }
652
- },
652
+ }
653
653
  },
654
654
  border: {
655
655
  default: {
@@ -758,7 +758,7 @@ export const colors = defineSemanticTokens.colors({
758
758
  _light: '{colors.indigo.700}',
759
759
  _dark: '{colors.indigo.400}'
760
760
  }
761
- },
761
+ }
762
762
  },
763
763
  chart: {
764
764
  cat01: {
@@ -888,6 +888,6 @@ export const colors = defineSemanticTokens.colors({
888
888
  _dark: '{colors.fuchsia.500}'
889
889
  }
890
890
  }
891
- },
891
+ }
892
892
  }
893
893
  })