@mekari/pixel3-styled-system 0.1.1 → 0.1.2-dev.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 (22) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/css/conditions.mjs +1 -1
  3. package/jsx/is-valid-prop.mjs +1 -1
  4. package/package.json +1 -1
  5. package/recipes/avatar-slot-recipe.mjs +4 -1
  6. package/recipes/badge-recipe.d.ts +4 -4
  7. package/recipes/badge-recipe.mjs +250 -42
  8. package/recipes/button-recipe.mjs +21 -4
  9. package/recipes/selected-border-recipe.mjs +80 -76
  10. package/recipes/tab-recipe.mjs +6 -0
  11. package/recipes/tab-selected-border-recipe.mjs +7 -1
  12. package/recipes/tag-slot-recipe.mjs +18 -2
  13. package/recipes/toast-slot-recipe.mjs +8 -2
  14. package/themes/index.d.ts +21 -0
  15. package/themes/index.mjs +24 -0
  16. package/themes/new.json +5 -0
  17. package/themes/next.json +5 -0
  18. package/tokens/index.mjs +1191 -211
  19. package/tokens/tokens.d.ts +6 -6
  20. package/types/conditions.d.ts +5 -1
  21. package/types/prop-type.d.ts +14 -13
  22. package/types/style-props.d.ts +35 -35
package/recipes/selected-border-recipe.mjs CHANGED
@@ -1,90 +1,94 @@
1
- import { memo, splitProps } from '../helpers.mjs';
2
- import { createRecipe, mergeRecipes } from './create-recipe.mjs';
1
+ import { memo, splitProps } from '../helpers.mjs'
2
+ import { createRecipe, mergeRecipes } from './create-recipe.mjs'
3
3
 
4
- const selectedBorderRecipeFn = /* @__PURE__ */ createRecipe('selected-border', {
5
- "variantColor": "blue",
6
- "isSelected": false
7
- }, [
4
+ const selectedBorderRecipeFn = /* @__PURE__ */ createRecipe(
5
+ 'selected-border',
8
6
  {
9
- "variantColor": "blue",
10
- "isSelected": true,
11
- "css": {
12
- "background": "blue.400",
13
- "_groupHover": {
14
- "background": "blue.500"
15
- }
16
- }
7
+ variantColor: 'blue',
8
+ isSelected: false
17
9
  },
18
- {
19
- "variantColor": "green",
20
- "isSelected": true,
21
- "css": {
22
- "background": "green.400",
23
- "_groupHover": {
24
- "background": "green.500"
10
+ [
11
+ {
12
+ variantColor: 'blue',
13
+ isSelected: true,
14
+ css: {
15
+ background: 'blue.400',
16
+ _groupHover: {
17
+ background: 'blue.500',
18
+ _nextTheme: {
19
+ background: 'border.selected'
20
+ }
21
+ },
22
+ _nextTheme: {
23
+ background: 'border.selected'
24
+ }
25
25
  }
26
- }
27
- },
28
- {
29
- "variantColor": "orange",
30
- "isSelected": true,
31
- "css": {
32
- "background": "orange.400",
33
- "_groupHover": {
34
- "background": "orange.500"
26
+ },
27
+ {
28
+ variantColor: 'green',
29
+ isSelected: true,
30
+ css: {
31
+ background: 'green.400',
32
+ _groupHover: {
33
+ background: 'green.500'
34
+ }
35
35
  }
36
- }
37
- },
38
- {
39
- "variantColor": "red",
40
- "isSelected": true,
41
- "css": {
42
- "background": "red.400",
43
- "_groupHover": {
44
- "background": "red.500"
36
+ },
37
+ {
38
+ variantColor: 'orange',
39
+ isSelected: true,
40
+ css: {
41
+ background: 'orange.400',
42
+ _groupHover: {
43
+ background: 'orange.500'
44
+ }
45
45
  }
46
- }
47
- },
48
- {
49
- "variantColor": "gray",
50
- "isSelected": true,
51
- "css": {
52
- "background": "gray.400",
53
- "_groupHover": {
54
- "background": "gray.500"
46
+ },
47
+ {
48
+ variantColor: 'red',
49
+ isSelected: true,
50
+ css: {
51
+ background: 'red.400',
52
+ _groupHover: {
53
+ background: 'red.500'
54
+ }
55
+ }
56
+ },
57
+ {
58
+ variantColor: 'gray',
59
+ isSelected: true,
60
+ css: {
61
+ background: 'gray.400',
62
+ _groupHover: {
63
+ background: 'gray.500'
64
+ }
55
65
  }
56
66
  }
57
- }
58
- ])
67
+ ]
68
+ )
59
69
 
60
70
  const selectedBorderRecipeVariantMap = {
61
- "variantColor": [
62
- "blue",
63
- "green",
64
- "orange",
65
- "red",
66
- "gray"
67
- ],
68
- "isSelected": [
69
- "false",
70
- "true"
71
- ]
71
+ variantColor: ['blue', 'green', 'orange', 'red', 'gray'],
72
+ isSelected: ['false', 'true']
72
73
  }
73
74
 
74
75
  const selectedBorderRecipeVariantKeys = Object.keys(selectedBorderRecipeVariantMap)
75
76
 
76
- export const selectedBorderRecipe = /* @__PURE__ */ Object.assign(memo(selectedBorderRecipeFn.recipeFn), {
77
- __recipe__: true,
78
- __name__: 'selectedBorderRecipe',
79
- __getCompoundVariantCss__: selectedBorderRecipeFn.__getCompoundVariantCss__,
80
- raw: (props) => props,
81
- variantKeys: selectedBorderRecipeVariantKeys,
82
- variantMap: selectedBorderRecipeVariantMap,
83
- merge(recipe) {
84
- return mergeRecipes(this, recipe)
85
- },
86
- splitVariantProps(props) {
87
- return splitProps(props, selectedBorderRecipeVariantKeys)
88
- },
89
- getVariantProps: selectedBorderRecipeFn.getVariantProps,
90
- })
77
+ export const selectedBorderRecipe = /* @__PURE__ */ Object.assign(
78
+ memo(selectedBorderRecipeFn.recipeFn),
79
+ {
80
+ __recipe__: true,
81
+ __name__: 'selectedBorderRecipe',
82
+ __getCompoundVariantCss__: selectedBorderRecipeFn.__getCompoundVariantCss__,
83
+ raw: (props) => props,
84
+ variantKeys: selectedBorderRecipeVariantKeys,
85
+ variantMap: selectedBorderRecipeVariantMap,
86
+ merge(recipe) {
87
+ return mergeRecipes(this, recipe)
88
+ },
89
+ splitVariantProps(props) {
90
+ return splitProps(props, selectedBorderRecipeVariantKeys)
91
+ },
92
+ getVariantProps: selectedBorderRecipeFn.getVariantProps
93
+ }
94
+ )
package/recipes/tab-recipe.mjs CHANGED
@@ -12,6 +12,12 @@ const tabRecipeFn = /* @__PURE__ */ createRecipe('tab', {
12
12
  "color": "blue.400",
13
13
  "_hover": {
14
14
  "color": "blue.500"
15
+ },
16
+ "_nextTheme": {
17
+ "color": "text.selected",
18
+ "_hover": {
19
+ "color": "text.selected"
20
+ }
15
21
  }
16
22
  }
17
23
  },
package/recipes/tab-selected-border-recipe.mjs CHANGED
@@ -11,7 +11,13 @@ const tabSelectedBorderRecipeFn = /* @__PURE__ */ createRecipe('tab-selected-bor
11
11
  "css": {
12
12
  "background": "blue.400",
13
13
  "_groupHover": {
14
- "background": "blue.500"
14
+ "background": "border.selected"
15
+ },
16
+ "_nextTheme": {
17
+ "background": "border.selected",
18
+ "_groupHover": {
19
+ "background": "border.selected"
20
+ }
15
21
  }
16
22
  }
17
23
  },
package/recipes/tag-slot-recipe.mjs CHANGED
@@ -10,7 +10,15 @@ const tagSlotRecipeCompoundVariants = [
10
10
  "variant": "gray",
11
11
  "css": {
12
12
  "close": {
13
- "background": "linear-gradient(270deg, #EDF0F2 75%, rgba(237, 240, 242, 0) 111.54%)"
13
+ "background": "linear-gradient(270deg, #EDF0F2 75%, rgba(237, 240, 242, 0) 111.54%)",
14
+ "borderTopLeftRadius": "0",
15
+ "borderBottomLeftRadius": "0",
16
+ "color": "gray.600",
17
+ "_nextTheme": {
18
+ "background": "background.danger",
19
+ "boxShadow": "-7px 0px 15px -3px #0000001A",
20
+ "color": "icon.danger"
21
+ }
14
22
  }
15
23
  }
16
24
  },
@@ -18,7 +26,15 @@ const tagSlotRecipeCompoundVariants = [
18
26
  "variant": "red",
19
27
  "css": {
20
28
  "close": {
21
- "background": "linear-gradient(270deg, #FDECEE 75%, rgba(237, 240, 242, 0) 111.54%)"
29
+ "background": "linear-gradient(270deg, #FDECEE 75%, rgba(237, 240, 242, 0) 111.54%)",
30
+ "borderTopLeftRadius": "0",
31
+ "borderBottomLeftRadius": "0",
32
+ "color": "red.400",
33
+ "_nextTheme": {
34
+ "background": "background.danger",
35
+ "boxShadow": "-7px 0px 15px -3px #0000001A",
36
+ "color": "icon.danger"
37
+ }
22
38
  }
23
39
  }
24
40
  },
package/recipes/toast-slot-recipe.mjs CHANGED
@@ -9,7 +9,10 @@ const toastSlotRecipeCompoundVariants = [
9
9
  "variant": "success",
10
10
  "css": {
11
11
  "root": {
12
- "borderColor": "green.700"
12
+ "borderColor": "green.700",
13
+ "_nextTheme": {
14
+ "borderColor": "border.success"
15
+ }
13
16
  }
14
17
  }
15
18
  },
@@ -17,7 +20,10 @@ const toastSlotRecipeCompoundVariants = [
17
20
  "variant": "error",
18
21
  "css": {
19
22
  "root": {
20
- "borderColor": "red.700"
23
+ "borderColor": "red.700",
24
+ "_nextTheme": {
25
+ "borderColor": "border.danger"
26
+ }
21
27
  }
22
28
  }
23
29
  }
package/themes/index.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ /* eslint-disable */
2
+ export type ThemeName = 'next'
3
+ export type ThemeByName = {
4
+ 'next': {
5
+ id: string,
6
+ name: 'next',
7
+ css: string
8
+ }
9
+ }
10
+
11
+ export type Theme<T extends ThemeName> = ThemeByName[T]
12
+
13
+ /**
14
+ * Dynamically import a theme by name
15
+ */
16
+ export declare function getTheme<T extends ThemeName>(themeName: T): Promise<ThemeByName[T]>
17
+
18
+ /**
19
+ * Inject a theme stylesheet into the document
20
+ */
21
+ export declare function injectTheme(el: HTMLElement, theme: Theme<any>): HTMLStyleElement
package/themes/index.mjs ADDED
@@ -0,0 +1,24 @@
1
+ export const getTheme = (themeName) => import('./' + themeName + '.json').then((m) => m.default)
2
+
3
+ export function injectTheme(el, theme) {
4
+ const doc = el.ownerDocument || document
5
+ let sheet = doc.getElementById(theme.id)
6
+
7
+ if (!sheet) {
8
+ sheet = doc.createElement('style')
9
+ sheet.setAttribute('type', 'text/css')
10
+ sheet.setAttribute('id', theme.id)
11
+ }
12
+
13
+ const head = doc.head || doc.getElementsByTagName('head')[0]
14
+ if (!head) {
15
+ throw new Error('No head found in doc')
16
+ }
17
+
18
+ el.dataset.pandaTheme = theme.name
19
+
20
+ head.appendChild(sheet)
21
+ sheet.innerHTML = theme.css
22
+
23
+ return sheet
24
+ }
package/themes/new.json ADDED
@@ -0,0 +1,5 @@
1
+ {
2
+ "name": "new",
3
+ "id": "panda-theme-new",
4
+ "css": " [data-panda-theme=new] {\n --mp-borders-none: none;\n --mp-borders-sm: 1px;\n --mp-borders-md: 1.5px;\n --mp-borders-lg: 2px;\n --mp-borders-xl: 3px;\n --mp-borders-2xl: 4px;\n --mp-colors-test: red;\n --mp-colors-currentcolor: currentcolor;\n --mp-colors-background: #F1F5F9;\n --mp-colors-white: #FFFFFF;\n --mp-colors-dark-100: #1D2125;\n --mp-colors-dark-200: #22272B;\n --mp-colors-dark-250: #282E33;\n --mp-colors-dark-300: #2C333A;\n --mp-colors-dark-350: #38414A;\n --mp-colors-dark-400: #454F59;\n --mp-colors-dark-500: #596773;\n --mp-colors-dark-600: #738496;\n --mp-colors-dark-700: #8C9BAB;\n --mp-colors-dark-800: #9FADBC;\n --mp-colors-dark-900: #B6C2CF;\n --mp-colors-dark-1000: #C7D1DB;\n --mp-colors-dark--100: #101214;\n --mp-colors-dark: #161A1D;\n --mp-colors-neutral-100: #F7F8F9;\n --mp-colors-neutral-200: #F0F1F3;\n --mp-colors-neutral-300: #DCDFE4;\n --mp-colors-neutral-400: #B2B9C4;\n --mp-colors-neutral-500: #8690A2;\n --mp-colors-neutral-600: #758195;\n --mp-colors-neutral-700: #656F80;\n --mp-colors-neutral-800: #4C5460;\n --mp-colors-neutral-900: #383E48;\n --mp-colors-neutral-1000: #272B32;\n --mp-colors-blue-100: #ECF3FE;\n --mp-colors-blue-200: #CEE0FD;\n --mp-colors-blue-300: #8EB7FA;\n --mp-colors-blue-400: #649CF8;\n --mp-colors-blue-500: #488BF7;\n --mp-colors-blue-600: #387CEB;\n --mp-colors-blue-700: #306AC8;\n --mp-colors-blue-800: #295AAA;\n --mp-colors-blue-900: #173361;\n --mp-colors-blue-1000: #132A4F;\n --mp-colors-indigo-100: #EEF0FC;\n --mp-colors-indigo-200: #D6DBF7;\n --mp-colors-indigo-300: #A8B2EF;\n --mp-colors-indigo-400: #8997E9;\n --mp-colors-indigo-500: #7586E5;\n --mp-colors-indigo-600: #6577E2;\n --mp-colors-indigo-700: #4B61DC;\n --mp-colors-indigo-800: #4053BC;\n --mp-colors-indigo-900: #242F6A;\n --mp-colors-indigo-1000: #1D2656;\n --mp-colors-violet-100: #F3F1FC;\n --mp-colors-violet-200: #DEDAF6;\n --mp-colors-violet-300: #B8AEEB;\n --mp-colors-violet-400: #9F91E3;\n --mp-colors-violet-500: #8F7FDF;\n --mp-colors-violet-600: #8270DB;\n --mp-colors-violet-700: #6F5FBA;\n --mp-colors-violet-800: #5F519F;\n --mp-colors-violet-900: #352E5A;\n --mp-colors-violet-1000: #2B2549;\n --mp-colors-fuchsia-100: #FBEEFE;\n --mp-colors-fuchsia-200: #F6D1FB;\n --mp-colors-fuchsia-300: #EA98F6;\n --mp-colors-fuchsia-400: #E16CF2;\n --mp-colors-fuchsia-500: #DA4DF0;\n --mp-colors-fuchsia-600: #C841DC;\n --mp-colors-fuchsia-700: #AC37BD;\n --mp-colors-fuchsia-800: #932FA2;\n --mp-colors-fuchsia-900: #531B5C;\n --mp-colors-fuchsia-1000: #45164C;\n --mp-colors-red-100: #FCEEED;\n --mp-colors-red-200: #F9D7D5;\n --mp-colors-red-300: #F09E99;\n --mp-colors-red-400: #EA7A72;\n --mp-colors-red-500: #E6645B;\n --mp-colors-red-600: #E2483D;\n --mp-colors-red-700: #C33E35;\n --mp-colors-red-800: #A8352D;\n --mp-colors-red-900: #5E1E19;\n --mp-colors-red-1000: #4E1915;\n --mp-colors-orange-100: #FDF3EC;\n --mp-colors-orange-200: #F9DECB;\n --mp-colors-orange-300: #F5C39F;\n --mp-colors-orange-400: #F0A875;\n --mp-colors-orange-500: #EB8E4B;\n --mp-colors-orange-600: #E46910;\n --mp-colors-orange-700: #BC560D;\n --mp-colors-orange-800: #A14A0B;\n --mp-colors-orange-900: #6B3108;\n --mp-colors-orange-1000: #492105;\n --mp-colors-yellow-100: #FDF6DD;\n --mp-colors-yellow-200: #F9E399;\n --mp-colors-yellow-300: #F5CD47;\n --mp-colors-yellow-400: #D8B53F;\n --mp-colors-yellow-500: #C2A338;\n --mp-colors-yellow-600: #A68A30;\n --mp-colors-yellow-700: #897228;\n --mp-colors-yellow-800: #766222;\n --mp-colors-yellow-900: #4D4016;\n --mp-colors-yellow-1000: #362D10;\n --mp-colors-lime-100: #F4FAEA;\n --mp-colors-lime-200: #D8EFB5;\n --mp-colors-lime-300: #B1DF6B;\n --mp-colors-lime-400: #83CA16;\n --mp-colors-lime-500: #77B814;\n --mp-colors-lime-600: #649B11;\n --mp-colors-lime-700: #53800E;\n --mp-colors-lime-800: #466C0C;\n --mp-colors-lime-900: #304A08;\n --mp-colors-lime-1000: #213306;\n --mp-colors-green-100: #F2F9F6;\n --mp-colors-green-200: #D2EBE1;\n --mp-colors-green-300: #A7D9C4;\n --mp-colors-green-400: #7DC7A8;\n --mp-colors-green-500: #56B78E;\n --mp-colors-green-600: #23A06B;\n --mp-colors-green-700: #1C8459;\n --mp-colors-green-800: #186F4A;\n --mp-colors-green-900: #104B32;\n --mp-colors-green-1000: #0B3524;\n --mp-colors-teal-100: #F2F9F6;\n --mp-colors-teal-200: #C4EDE9;\n --mp-colors-teal-300: #92DED6;\n --mp-colors-teal-400: #4FCABC;\n --mp-colors-teal-500: #19B9A8;\n --mp-colors-teal-600: #119E8F;\n --mp-colors-teal-700: #0E8275;\n --mp-colors-teal-800: #0C6E63;\n --mp-colors-teal-900: #084841;\n --mp-colors-teal-1000: #06342F;\n --mp-colors-brand-capital: #2F5573;\n --mp-colors-brand-esign: #00C853;\n --mp-colors-brand-expense: #183883;\n --mp-colors-brand-flex: #7C4DFF;\n --mp-colors-brand-jurnal: #40C3FF;\n --mp-colors-brand-klikpajak: #FF9100;\n --mp-colors-brand-mekari: #651FFF;\n --mp-colors-brand-qontak: #2979FF;\n --mp-colors-brand-talenta: #F22929;\n --mp-colors-brand-university: #448AFF;\n --mp-durations-slow: 100ms;\n --mp-durations-normal: 250ms;\n --mp-durations-fast: 300ms;\n --mp-fonts-body: \"Inter\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n --mp-fonts-mono: SFMono-Regular, Menlo, Monaco,Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --mp-font-sizes-xs: 0.625rem;\n --mp-font-sizes-sm: 0.75rem;\n --mp-font-sizes-md: 0.875rem;\n --mp-font-sizes-lg: 1rem;\n --mp-font-sizes-xl: 1.25rem;\n --mp-font-sizes-2xl: 1.5rem;\n --mp-font-weights-regular: 400;\n --mp-font-weights-semi-bold: 600;\n --mp-font-weights-bold: 800;\n --mp-line-heights-xs: 1.2;\n --mp-line-heights-sm: 1.34;\n --mp-line-heights-md: 1.4;\n --mp-line-heights-lg: 1.429;\n --mp-line-heights-xl: 1.5;\n --mp-line-heights-2xl: 1.67;\n --mp-line-heights-3xl: 1.71;\n --mp-letter-spacings-tighter: -0.05em;\n --mp-letter-spacings-tight: -0.025em;\n --mp-letter-spacings-normal: 0;\n --mp-letter-spacings-wide: 0.025em;\n --mp-letter-spacings-wider: 0.05em;\n --mp-letter-spacings-widest: 0.1em;\n --mp-opacity-0: 0;\n --mp-opacity-40: 0.4;\n --mp-opacity-60: 0.6;\n --mp-opacity-100: 1;\n --mp-radii-none: 0;\n --mp-radii-sm: 0.25rem;\n --mp-radii-md: 0.375rem;\n --mp-radii-lg: 0.5rem;\n --mp-radii-xl: 0.75rem;\n --mp-radii-full: 999px;\n --mp-shadows-xs: 0px 2px 4px 0px var(--mp-colors-background-shadow), 0px 0px 2px 0px var(--mp-colors-background-shadow);\n --mp-shadows-sm: 0px 10px 15px -3px var(--mp-colors-background-shadow), 0px 4px 6px -2px var(--mp-colors-background-shadow);\n --mp-shadows-md: 0px 20px 25px -5px var(--mp-colors-background-shadow), 0px 10px 10px -5px var(--mp-colors-background-shadow);\n --mp-shadows-lg: 0px 25px 30px -10px var(--mp-colors-background-shadow), 0px 15px 15px -10px var(--mp-colors-background-shadow);\n --mp-shadows-focus: 0 0 0 2px var(--mp-colors-border-focused);\n --mp-shadows-outline: 0 0 0 3px #E0EEFF;\n --mp-shadows-outer: 0 0 0 3px rgba(224, 238, 255, 1);\n --mp-shadows-none: none;\n --mp-sizes-0: 0;\n --mp-sizes-1: 0.25rem;\n --mp-sizes-2: 0.5rem;\n --mp-sizes-3: 0.75rem;\n --mp-sizes-4: 1rem;\n --mp-sizes-5: 1.25rem;\n --mp-sizes-6: 1.5rem;\n --mp-sizes-7: 1.75rem;\n --mp-sizes-8: 2rem;\n --mp-sizes-9: 2.25rem;\n --mp-sizes-10: 2.5rem;\n --mp-sizes-11: 2.75rem;\n --mp-sizes-12: 3rem;\n --mp-sizes-16: 4rem;\n --mp-sizes-20: 5rem;\n --mp-sizes-22: 5.5rem;\n --mp-sizes-56: 14rem;\n --mp-sizes-65: 17.5rem;\n --mp-sizes-0\\.25: 0.0625rem;\n --mp-sizes-0\\.5: 0.125rem;\n --mp-sizes-2\\.5: 0.625rem;\n --mp-sizes-7\\.5: 1.875rem;\n --mp-sizes-9\\.5: 2.375rem;\n --mp-sizes-full: 100%;\n --mp-sizes-sm: 24rem;\n --mp-spacing-0: 0;\n --mp-spacing-1: 0.25rem;\n --mp-spacing-2: 0.5rem;\n --mp-spacing-3: 0.75rem;\n --mp-spacing-4: 1rem;\n --mp-spacing-5: 1.3rem;\n --mp-spacing-6: 1.5rem;\n --mp-spacing-8: 2rem;\n --mp-spacing-10: 2.5rem;\n --mp-spacing-20: 5rem;\n --mp-spacing-0\\.5: 0.125rem;\n --mp-spacing-1\\.5: 0.375rem;\n --mp-z-index-hide: -1;\n --mp-z-index-base: 0;\n --mp-z-index-docked: 10;\n --mp-z-index-sticky: 1100;\n --mp-z-index-overlay: 1300;\n --mp-z-index-modal: 1400;\n --mp-z-index-popover: 1500;\n --mp-z-index-tooltip: 1800;\n --mp-colors-background-surface: var(--mp-colors-background);\n --mp-colors-background-stage: var(--mp-colors-white);\n --mp-colors-background-disabled: rgba(35, 41, 51, 0.80);\n --mp-colors-background-brand-bold: var(--mp-colors-indigo-700);\n --mp-colors-background-brand-bold-hovered: var(--mp-colors-indigo-800);\n --mp-colors-background-brand-bold-pressed: var(--mp-colors-indigo-900);\n --mp-colors-border-focused: var(--mp-colors-indigo-500);\n --mp-colors-text-disabled: #1D1F2452;\n --mp-colors-text-inverse: var(--mp-colors-white)\n}\n\n[data-panda-theme=new].light {\n --mp-colors-background-surface: var(--mp-colors-background);\n --mp-colors-background-stage: var(--mp-colors-white)\n }\n\n[data-panda-theme=new].dark {\n --mp-colors-background-surface: var(--mp-colors-dark);\n --mp-colors-background-stage: var(--mp-colors-dark-100);\n --mp-colors-background-disabled: rgba(101, 127, 153, 0.80);\n --mp-colors-background-brand-bold: var(--mp-colors-indigo-400);\n --mp-colors-background-brand-bold-hovered: var(--mp-colors-indigo-300);\n --mp-colors-background-brand-bold-pressed: var(--mp-colors-indigo-200);\n --mp-colors-border-focused: var(--mp-colors-indigo-300);\n --mp-colors-text-disabled: #BFDBF847;\n --mp-colors-text-inverse: var(--mp-colors-dark-100)\n }"
5
+ }
package/themes/next.json ADDED
@@ -0,0 +1,5 @@
1
+ {
2
+ "name": "next",
3
+ "id": "panda-theme-next",
4
+ "css": " [data-panda-theme=next] {\n --mp-border-widths-none: none;\n --mp-border-widths-sm: 1px;\n --mp-border-widths-md: 1.5px;\n --mp-border-widths-lg: 2px;\n --mp-border-widths-xl: 3px;\n --mp-border-widths-2xl: 4px;\n --mp-colors-debug: red;\n --mp-colors-currentcolor: currentcolor;\n --mp-colors-white: #FFFFFF;\n --mp-colors-dark-100: #1D2125;\n --mp-colors-dark-200: #22272B;\n --mp-colors-dark-250: #282E33;\n --mp-colors-dark-300: #2C333A;\n --mp-colors-dark-350: #38414A;\n --mp-colors-dark-400: #454F59;\n --mp-colors-dark-500: #596773;\n --mp-colors-dark-600: #738496;\n --mp-colors-dark-700: #8C9BAB;\n --mp-colors-dark-800: #9FADBC;\n --mp-colors-dark-900: #B6C2CF;\n --mp-colors-dark-1000: #C7D1DB;\n --mp-colors-dark--100: #101214;\n --mp-colors-dark: #161A1D;\n --mp-colors-neutral-100: #F7F8F9;\n --mp-colors-neutral-200: #F0F1F3;\n --mp-colors-neutral-300: #DCDFE4;\n --mp-colors-neutral-400: #B2B9C4;\n --mp-colors-neutral-500: #8690A2;\n --mp-colors-neutral-600: #758195;\n --mp-colors-neutral-700: #656F80;\n --mp-colors-neutral-800: #4C5460;\n --mp-colors-neutral-900: #383E48;\n --mp-colors-neutral-1000: #272B32;\n --mp-colors-blue-100: #ECF3FE;\n --mp-colors-blue-200: #CEE0FD;\n --mp-colors-blue-300: #8EB7FA;\n --mp-colors-blue-400: #649CF8;\n --mp-colors-blue-500: #488BF7;\n --mp-colors-blue-600: #387CEB;\n --mp-colors-blue-700: #306AC8;\n --mp-colors-blue-800: #295AAA;\n --mp-colors-blue-900: #173361;\n --mp-colors-blue-1000: #132A4F;\n --mp-colors-indigo-100: #EEF0FC;\n --mp-colors-indigo-200: #D6DBF7;\n --mp-colors-indigo-300: #A8B2EF;\n --mp-colors-indigo-400: #8997E9;\n --mp-colors-indigo-500: #7586E5;\n --mp-colors-indigo-600: #6577E2;\n --mp-colors-indigo-700: #4B61DC;\n --mp-colors-indigo-800: #4053BC;\n --mp-colors-indigo-900: #242F6A;\n --mp-colors-indigo-1000: #1D2656;\n --mp-colors-violet-100: #F3F1FC;\n --mp-colors-violet-200: #DEDAF6;\n --mp-colors-violet-300: #B8AEEB;\n --mp-colors-violet-400: #9F91E3;\n --mp-colors-violet-500: #8F7FDF;\n --mp-colors-violet-600: #8270DB;\n --mp-colors-violet-700: #6F5FBA;\n --mp-colors-violet-800: #5F519F;\n --mp-colors-violet-900: #352E5A;\n --mp-colors-violet-1000: #2B2549;\n --mp-colors-fuchsia-100: #FBEEFE;\n --mp-colors-fuchsia-200: #F6D1FB;\n --mp-colors-fuchsia-300: #EA98F6;\n --mp-colors-fuchsia-400: #E16CF2;\n --mp-colors-fuchsia-500: #DA4DF0;\n --mp-colors-fuchsia-600: #C841DC;\n --mp-colors-fuchsia-700: #AC37BD;\n --mp-colors-fuchsia-800: #932FA2;\n --mp-colors-fuchsia-900: #531B5C;\n --mp-colors-fuchsia-1000: #45164C;\n --mp-colors-red-100: #FCEEED;\n --mp-colors-red-200: #F9D7D5;\n --mp-colors-red-300: #F09E99;\n --mp-colors-red-400: #EA7A72;\n --mp-colors-red-500: #E6645B;\n --mp-colors-red-600: #E2483D;\n --mp-colors-red-700: #C33E35;\n --mp-colors-red-800: #A8352D;\n --mp-colors-red-900: #5E1E19;\n --mp-colors-red-1000: #4E1915;\n --mp-colors-orange-100: #FDF3EC;\n --mp-colors-orange-200: #F9DECB;\n --mp-colors-orange-300: #F5C39F;\n --mp-colors-orange-400: #F0A875;\n --mp-colors-orange-500: #EB8E4B;\n --mp-colors-orange-600: #E46910;\n --mp-colors-orange-700: #BC560D;\n --mp-colors-orange-800: #A14A0B;\n --mp-colors-orange-900: #6B3108;\n --mp-colors-orange-1000: #492105;\n --mp-colors-yellow-100: #FDF6DD;\n --mp-colors-yellow-200: #F9E399;\n --mp-colors-yellow-300: #F5CD47;\n --mp-colors-yellow-400: #D8B53F;\n --mp-colors-yellow-500: #C2A338;\n --mp-colors-yellow-600: #A68A30;\n --mp-colors-yellow-700: #897228;\n --mp-colors-yellow-800: #766222;\n --mp-colors-yellow-900: #4D4016;\n --mp-colors-yellow-1000: #362D10;\n --mp-colors-lime-100: #F4FAEA;\n --mp-colors-lime-200: #D8EFB5;\n --mp-colors-lime-300: #B1DF6B;\n --mp-colors-lime-400: #83CA16;\n --mp-colors-lime-500: #77B814;\n --mp-colors-lime-600: #649B11;\n --mp-colors-lime-700: #53800E;\n --mp-colors-lime-800: #466C0C;\n --mp-colors-lime-900: #304A08;\n --mp-colors-lime-1000: #213306;\n --mp-colors-green-100: #F2F9F6;\n --mp-colors-green-200: #D2EBE1;\n --mp-colors-green-300: #A7D9C4;\n --mp-colors-green-400: #7DC7A8;\n --mp-colors-green-500: #56B78E;\n --mp-colors-green-600: #23A06B;\n --mp-colors-green-700: #1C8459;\n --mp-colors-green-800: #186F4A;\n --mp-colors-green-900: #104B32;\n --mp-colors-green-1000: #0B3524;\n --mp-colors-teal-100: #F2F9F6;\n --mp-colors-teal-200: #C4EDE9;\n --mp-colors-teal-300: #92DED6;\n --mp-colors-teal-400: #4FCABC;\n --mp-colors-teal-500: #19B9A8;\n --mp-colors-teal-600: #119E8F;\n --mp-colors-teal-700: #0E8275;\n --mp-colors-teal-800: #0C6E63;\n --mp-colors-teal-900: #084841;\n --mp-colors-teal-1000: #06342F;\n --mp-colors-brand-capital: #2F5573;\n --mp-colors-brand-esign: #00C853;\n --mp-colors-brand-expense: #183883;\n --mp-colors-brand-flex: #7C4DFF;\n --mp-colors-brand-jurnal: #40C3FF;\n --mp-colors-brand-klikpajak: #FF9100;\n --mp-colors-brand-mekari: #651FFF;\n --mp-colors-brand-qontak: #2979FF;\n --mp-colors-brand-talenta: #F22929;\n --mp-colors-brand-university: #448AFF;\n --mp-durations-slow: 100ms;\n --mp-durations-normal: 250ms;\n --mp-durations-fast: 300ms;\n --mp-fonts-body: \"Inter\", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, Segoe UI, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n --mp-fonts-mono: SFMono-Regular, Menlo, Monaco,Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n --mp-font-sizes-xs: 0.625rem;\n --mp-font-sizes-sm: 0.75rem;\n --mp-font-sizes-md: 0.875rem;\n --mp-font-sizes-lg: 1rem;\n --mp-font-sizes-xl: 1.25rem;\n --mp-font-sizes-2xl: 1.5rem;\n --mp-font-weights-regular: 400;\n --mp-font-weights-semi-bold: 600;\n --mp-font-weights-bold: 800;\n --mp-line-heights-xs: 1.2;\n --mp-line-heights-sm: 1.34;\n --mp-line-heights-md: 1.4;\n --mp-line-heights-lg: 1.429;\n --mp-line-heights-xl: 1.5;\n --mp-line-heights-2xl: 1.67;\n --mp-line-heights-3xl: 1.71;\n --mp-letter-spacings-tighter: -0.05em;\n --mp-letter-spacings-tight: -0.025em;\n --mp-letter-spacings-normal: 0;\n --mp-letter-spacings-wide: 0.025em;\n --mp-letter-spacings-wider: 0.05em;\n --mp-letter-spacings-widest: 0.1em;\n --mp-opacity-0: 0;\n --mp-opacity-40: 0.4;\n --mp-opacity-60: 0.6;\n --mp-opacity-100: 1;\n --mp-radii-none: 0;\n --mp-radii-sm: 0.25rem;\n --mp-radii-md: 0.375rem;\n --mp-radii-lg: 0.5rem;\n --mp-radii-xl: 0.75rem;\n --mp-radii-full: 999px;\n --mp-shadows-xs: 0px 2px 4px 0px var(--mp-colors-background-shadow), 0px 0px 2px 0px var(--mp-colors-background-shadow);\n --mp-shadows-sm: 0px 10px 15px -3px var(--mp-colors-background-shadow), 0px 4px 6px -2px var(--mp-colors-background-shadow);\n --mp-shadows-md: 0px 20px 25px -5px var(--mp-colors-background-shadow), 0px 10px 10px -5px var(--mp-colors-background-shadow);\n --mp-shadows-lg: 0px 25px 30px -10px var(--mp-colors-background-shadow), 0px 15px 15px -10px var(--mp-colors-background-shadow);\n --mp-shadows-focus: 0 0 0 1px var(--mp-colors-border-focused);\n --mp-shadows-outline: 0 0 0 3px #E0EEFF;\n --mp-shadows-outer: 0 0 0 3px rgba(224, 238, 255, 1);\n --mp-shadows-none: none;\n --mp-sizes-0: 0;\n --mp-sizes-1: 0.25rem;\n --mp-sizes-2: 0.5rem;\n --mp-sizes-3: 0.75rem;\n --mp-sizes-4: 1rem;\n --mp-sizes-5: 1.25rem;\n --mp-sizes-6: 1.5rem;\n --mp-sizes-7: 1.75rem;\n --mp-sizes-8: 2rem;\n --mp-sizes-9: 2.25rem;\n --mp-sizes-10: 2.5rem;\n --mp-sizes-11: 2.75rem;\n --mp-sizes-12: 3rem;\n --mp-sizes-16: 4rem;\n --mp-sizes-20: 5rem;\n --mp-sizes-22: 5.5rem;\n --mp-sizes-56: 14rem;\n --mp-sizes-65: 17.5rem;\n --mp-sizes-0\\.25: 0.0625rem;\n --mp-sizes-0\\.5: 0.125rem;\n --mp-sizes-2\\.5: 0.625rem;\n --mp-sizes-7\\.5: 1.875rem;\n --mp-sizes-9\\.5: 2.375rem;\n --mp-sizes-full: 100%;\n --mp-sizes-sm: 24rem;\n --mp-spacing-0: 0;\n --mp-spacing-1: 0.25rem;\n --mp-spacing-2: 0.5rem;\n --mp-spacing-3: 0.75rem;\n --mp-spacing-4: 1rem;\n --mp-spacing-5: 1.3rem;\n --mp-spacing-6: 1.5rem;\n --mp-spacing-8: 2rem;\n --mp-spacing-10: 2.5rem;\n --mp-spacing-20: 5rem;\n --mp-spacing-0\\.5: 0.125rem;\n --mp-spacing-1\\.5: 0.375rem;\n --mp-z-index-hide: -1;\n --mp-z-index-base: 0;\n --mp-z-index-docked: 10;\n --mp-z-index-sticky: 1100;\n --mp-z-index-overlay: 1300;\n --mp-z-index-modal: 1400;\n --mp-z-index-popover: 1500;\n --mp-z-index-tooltip: 1800;\n --mp-colors-background-surface: #F1F5F9;\n --mp-colors-background-stage: var(--mp-colors-white);\n --mp-colors-background-overlay: rgba(35, 41, 51, 0.80);\n --mp-colors-background-disabled: rgba(29, 31, 36, 0.04);\n --mp-colors-background-inverse: var(--mp-colors-dark-100);\n --mp-colors-background-shadow: rgba(29, 31, 36, 0.16);\n --mp-colors-background-neutral: var(--mp-colors-white);\n --mp-colors-background-neutral-hovered: var(--mp-colors-neutral-100);\n --mp-colors-background-neutral-pressed: var(--mp-colors-neutral-200);\n --mp-colors-background-neutral-subtle: var(--mp-colors-neutral-200);\n --mp-colors-background-neutral-subtle-hovered: var(--mp-colors-neutral-300);\n --mp-colors-background-neutral-subtle-pressed: var(--mp-colors-neutral-400);\n --mp-colors-background-neutral-bold: var(--mp-colors-neutral-800);\n --mp-colors-background-neutral-bold-hovered: var(--mp-colors-neutral-900);\n --mp-colors-background-neutral-bold-pressed: var(--mp-colors-neutral-1000);\n --mp-colors-background-brand: var(--mp-colors-indigo-100);\n --mp-colors-background-brand-hovered: var(--mp-colors-indigo-200);\n --mp-colors-background-brand-pressed: var(--mp-colors-indigo-300);\n --mp-colors-background-brand-selected: var(--mp-colors-indigo-200);\n --mp-colors-background-brand-bold: var(--mp-colors-indigo-700);\n --mp-colors-background-brand-bold-hovered: var(--mp-colors-indigo-800);\n --mp-colors-background-brand-bold-pressed: var(--mp-colors-indigo-900);\n --mp-colors-background-brand-bold-selected: var(--mp-colors-indigo-700);\n --mp-colors-background-tertiary: var(--mp-colors-dark-200);\n --mp-colors-background-tertiary-hovered: var(--mp-colors-dark-300);\n --mp-colors-background-tertiary-pressed: var(--mp-colors-dark-400);\n --mp-colors-background-danger: var(--mp-colors-red-100);\n --mp-colors-background-danger-hovered: var(--mp-colors-red-200);\n --mp-colors-background-danger-pressed: var(--mp-colors-red-300);\n --mp-colors-background-danger-bold: var(--mp-colors-red-700);\n --mp-colors-background-danger-bold-hovered: var(--mp-colors-red-800);\n --mp-colors-background-danger-bold-pressed: var(--mp-colors-red-900);\n --mp-colors-background-warning: var(--mp-colors-yellow-100);\n --mp-colors-background-warning-hovered: var(--mp-colors-yellow-200);\n --mp-colors-background-warning-pressed: var(--mp-colors-yellow-300);\n --mp-colors-background-warning-bold: var(--mp-colors-yellow-300);\n --mp-colors-background-warning-bold-hovered: var(--mp-colors-yellow-400);\n --mp-colors-background-warning-bold-pressed: var(--mp-colors-yellow-500);\n --mp-colors-background-success: var(--mp-colors-green-100);\n --mp-colors-background-success-hovered: var(--mp-colors-green-200);\n --mp-colors-background-success-pressed: var(--mp-colors-green-300);\n --mp-colors-background-success-bold: var(--mp-colors-green-700);\n --mp-colors-background-success-bold-hovered: var(--mp-colors-green-800);\n --mp-colors-background-success-bold-pressed: var(--mp-colors-green-900);\n --mp-colors-background-highlight: var(--mp-colors-violet-100);\n --mp-colors-background-highlight-hovered: var(--mp-colors-violet-200);\n --mp-colors-background-highlight-pressed: var(--mp-colors-violet-300);\n --mp-colors-background-highlight-bold: var(--mp-colors-violet-700);\n --mp-colors-background-highlight-bold-hovered: var(--mp-colors-violet-800);\n --mp-colors-background-highlight-bold-pressed: var(--mp-colors-violet-900);\n --mp-colors-nav-parent: #E7EDF5;\n --mp-colors-nav-stack: var(--mp-colors-neutral-100);\n --mp-colors-nav-stack-hovered: #E7EDF5;\n --mp-colors-text-default: var(--mp-colors-neutral-1000);\n --mp-colors-text-default-static: var(--mp-colors-neutral-1000);\n --mp-colors-text-secondary: var(--mp-colors-neutral-700);\n --mp-colors-text-secondary-pressed: var(--mp-colors-neutral-800);\n --mp-colors-text-placeholder: var(--mp-colors-neutral-600);\n --mp-colors-text-disabled: rgba(29, 31, 36, 0.32);\n --mp-colors-text-inverse: var(--mp-colors-white);\n --mp-colors-text-inverse-static: var(--mp-colors-white);\n --mp-colors-text-selected: var(--mp-colors-indigo-700);\n --mp-colors-text-danger: var(--mp-colors-red-800);\n --mp-colors-text-danger-pressed: var(--mp-colors-red-900);\n --mp-colors-text-warning: var(--mp-colors-orange-800);\n --mp-colors-text-warning-inverse: var(--mp-colors-neutral-1000);\n --mp-colors-text-success: var(--mp-colors-green-800);\n --mp-colors-text-highlight: var(--mp-colors-violet-800);\n --mp-colors-text-information: var(--mp-colors-indigo-800);\n --mp-colors-text-link: var(--mp-colors-indigo-700);\n --mp-colors-text-link-pressed: var(--mp-colors-indigo-800);\n --mp-colors-icon-default: var(--mp-colors-neutral-600);\n --mp-colors-icon-disabled: var(--mp-colors-neutral-400);\n --mp-colors-icon-inverse: var(--mp-colors-white);\n --mp-colors-icon-inverse-static: var(--mp-colors-white);\n --mp-colors-icon-selected: var(--mp-colors-indigo-700);\n --mp-colors-icon-brand: var(--mp-colors-indigo-700);\n --mp-colors-icon-danger: var(--mp-colors-red-700);\n --mp-colors-icon-warning: var(--mp-colors-orange-700);\n --mp-colors-icon-warning-inverse: var(--mp-colors-neutral-1000);\n --mp-colors-icon-success: var(--mp-colors-green-700);\n --mp-colors-icon-highlight: var(--mp-colors-violet-700);\n --mp-colors-icon-information: var(--mp-colors-indigo-700);\n --mp-colors-icon-subtle: var(--mp-colors-neutral-300);\n --mp-colors-icon-logo: var(--mp-colors-neutral-1000);\n --mp-colors-border-default: var(--mp-colors-neutral-300);\n --mp-colors-border-bold: var(--mp-colors-neutral-600);\n --mp-colors-border-disabled: rgba(29, 31, 36, 0.08);\n --mp-colors-border-form: rgba(29, 31, 36, 0.16);\n --mp-colors-border-focused: var(--mp-colors-indigo-500);\n --mp-colors-border-inverse: var(--mp-colors-white);\n --mp-colors-border-selected: var(--mp-colors-indigo-700);\n --mp-colors-border-selected-hovered: var(--mp-colors-indigo-800);\n --mp-colors-border-selected-disabled: var(--mp-colors-indigo-200);\n --mp-colors-border-brand: var(--mp-colors-indigo-700);\n --mp-colors-border-danger: var(--mp-colors-red-700);\n --mp-colors-border-warning: var(--mp-colors-yellow-300);\n --mp-colors-border-success: var(--mp-colors-green-700);\n --mp-colors-border-highlight: var(--mp-colors-violet-700);\n --mp-colors-border-information: var(--mp-colors-indigo-700);\n --mp-colors-chart-cat01: var(--mp-colors-blue-400);\n --mp-colors-chart-cat01-bold: var(--mp-colors-blue-600);\n --mp-colors-chart-cat02: var(--mp-colors-teal-400);\n --mp-colors-chart-cat02-bold: var(--mp-colors-teal-600);\n --mp-colors-chart-cat03: var(--mp-colors-violet-400);\n --mp-colors-chart-cat03-bold: var(--mp-colors-violet-600);\n --mp-colors-chart-cat04: var(--mp-colors-orange-400);\n --mp-colors-chart-cat04-bold: var(--mp-colors-orange-600);\n --mp-colors-chart-cat05: var(--mp-colors-neutral-400);\n --mp-colors-chart-cat05-bold: var(--mp-colors-neutral-600);\n --mp-colors-chart-cat06: var(--mp-colors-red-400);\n --mp-colors-chart-cat06-bold: var(--mp-colors-red-600);\n --mp-colors-chart-cat07: var(--mp-colors-lime-400);\n --mp-colors-chart-cat07-bold: var(--mp-colors-lime-600);\n --mp-colors-chart-cat08: var(--mp-colors-fuchsia-400);\n --mp-colors-chart-cat08-bold: var(--mp-colors-fuchsia-600);\n --mp-spacing-4xs: 0.125rem;\n --mp-spacing-3xs: var(--mp-spacing-1);\n --mp-spacing-2xs: 0.375rem;\n --mp-spacing-xs: var(--mp-spacing-2);\n --mp-spacing-sm: var(--mp-spacing-3);\n --mp-spacing-md: var(--mp-spacing-4);\n --mp-spacing-lg: var(--mp-spacing-5);\n --mp-spacing-xl: var(--mp-spacing-6);\n --mp-spacing-2xl: var(--mp-spacing-8);\n --mp-spacing-3xl: var(--mp-spacing-10);\n --mp-spacing-4xl: var(--mp-spacing-20)\n}\n\n[data-panda-theme=next].light {\n --mp-colors-background-surface: #F1F5F9;\n --mp-colors-background-stage: var(--mp-colors-white);\n --mp-colors-background-overlay: rgba(35, 41, 51, 0.80);\n --mp-colors-background-disabled: rgba(29, 31, 36, 0.04);\n --mp-colors-background-inverse: var(--mp-colors-dark-100);\n --mp-colors-background-shadow: rgba(29, 31, 36, 0.16);\n --mp-colors-background-neutral: var(--mp-colors-white);\n --mp-colors-background-neutral-hovered: var(--mp-colors-neutral-100);\n --mp-colors-background-neutral-pressed: var(--mp-colors-neutral-200);\n --mp-colors-background-neutral-subtle: var(--mp-colors-neutral-200);\n --mp-colors-background-neutral-subtle-hovered: var(--mp-colors-neutral-300);\n --mp-colors-background-neutral-subtle-pressed: var(--mp-colors-neutral-400);\n --mp-colors-background-neutral-bold: var(--mp-colors-neutral-800);\n --mp-colors-background-neutral-bold-hovered: var(--mp-colors-neutral-900);\n --mp-colors-background-neutral-bold-pressed: var(--mp-colors-neutral-1000);\n --mp-colors-background-brand: var(--mp-colors-indigo-100);\n --mp-colors-background-brand-hovered: var(--mp-colors-indigo-200);\n --mp-colors-background-brand-pressed: var(--mp-colors-indigo-300);\n --mp-colors-background-brand-selected: var(--mp-colors-indigo-200);\n --mp-colors-background-brand-bold: var(--mp-colors-indigo-700);\n --mp-colors-background-brand-bold-hovered: var(--mp-colors-indigo-800);\n --mp-colors-background-tertiary: var(--mp-colors-dark-200);\n --mp-colors-background-tertiary-hovered: var(--mp-colors-dark-300);\n --mp-colors-background-tertiary-pressed: var(--mp-colors-dark-400);\n --mp-colors-background-danger: var(--mp-colors-red-100);\n --mp-colors-background-danger-hovered: var(--mp-colors-red-200);\n --mp-colors-background-danger-pressed: var(--mp-colors-red-300);\n --mp-colors-background-danger-bold: var(--mp-colors-red-700);\n --mp-colors-background-danger-bold-hovered: var(--mp-colors-red-800);\n --mp-colors-background-warning: var(--mp-colors-yellow-100);\n --mp-colors-background-warning-hovered: var(--mp-colors-yellow-200);\n --mp-colors-background-warning-pressed: var(--mp-colors-yellow-300);\n --mp-colors-background-warning-bold: var(--mp-colors-yellow-300);\n --mp-colors-background-warning-bold-hovered: var(--mp-colors-yellow-400);\n --mp-colors-background-success: var(--mp-colors-green-100);\n --mp-colors-background-success-hovered: var(--mp-colors-green-200);\n --mp-colors-background-success-pressed: var(--mp-colors-green-300);\n --mp-colors-background-success-bold: var(--mp-colors-green-700);\n --mp-colors-background-success-bold-hovered: var(--mp-colors-green-800);\n --mp-colors-background-highlight: var(--mp-colors-violet-100);\n --mp-colors-background-highlight-hovered: var(--mp-colors-violet-200);\n --mp-colors-background-highlight-pressed: var(--mp-colors-violet-300);\n --mp-colors-background-highlight-bold: var(--mp-colors-violet-700);\n --mp-colors-background-highlight-bold-hovered: var(--mp-colors-violet-800);\n --mp-colors-nav-parent: #E7EDF5;\n --mp-colors-nav-stack: var(--mp-colors-neutral-100);\n --mp-colors-nav-stack-hovered: #E7EDF5;\n --mp-colors-text-default: var(--mp-colors-neutral-1000);\n --mp-colors-text-default-static: var(--mp-colors-neutral-1000);\n --mp-colors-text-secondary: var(--mp-colors-neutral-700);\n --mp-colors-text-secondary-pressed: var(--mp-colors-neutral-800);\n --mp-colors-text-placeholder: var(--mp-colors-neutral-600);\n --mp-colors-text-disabled: rgba(29, 31, 36, 0.32);\n --mp-colors-text-inverse: var(--mp-colors-white);\n --mp-colors-text-inverse-static: var(--mp-colors-white);\n --mp-colors-text-selected: var(--mp-colors-indigo-700);\n --mp-colors-text-danger: var(--mp-colors-red-800);\n --mp-colors-text-danger-pressed: var(--mp-colors-red-900);\n --mp-colors-text-warning: var(--mp-colors-orange-800);\n --mp-colors-text-warning-inverse: var(--mp-colors-neutral-1000);\n --mp-colors-text-success: var(--mp-colors-green-800);\n --mp-colors-text-highlight: var(--mp-colors-violet-800);\n --mp-colors-text-information: var(--mp-colors-indigo-800);\n --mp-colors-text-link: var(--mp-colors-indigo-700);\n --mp-colors-text-link-pressed: var(--mp-colors-indigo-800);\n --mp-colors-icon-default: var(--mp-colors-neutral-600);\n --mp-colors-icon-disabled: var(--mp-colors-neutral-400);\n --mp-colors-icon-inverse: var(--mp-colors-white);\n --mp-colors-icon-inverse-static: var(--mp-colors-white);\n --mp-colors-icon-selected: var(--mp-colors-indigo-700);\n --mp-colors-icon-brand: var(--mp-colors-indigo-700);\n --mp-colors-icon-danger: var(--mp-colors-red-700);\n --mp-colors-icon-warning: var(--mp-colors-orange-700);\n --mp-colors-icon-warning-inverse: var(--mp-colors-neutral-1000);\n --mp-colors-icon-success: var(--mp-colors-green-700);\n --mp-colors-icon-highlight: var(--mp-colors-violet-700);\n --mp-colors-icon-information: var(--mp-colors-indigo-700);\n --mp-colors-icon-subtle: var(--mp-colors-neutral-300);\n --mp-colors-icon-logo: var(--mp-colors-neutral-1000);\n --mp-colors-border-default: var(--mp-colors-neutral-300);\n --mp-colors-border-bold: var(--mp-colors-neutral-600);\n --mp-colors-border-disabled: rgba(29, 31, 36, 0.08);\n --mp-colors-border-form: rgba(29, 31, 36, 0.16);\n --mp-colors-border-focused: var(--mp-colors-indigo-500);\n --mp-colors-border-inverse: var(--mp-colors-white);\n --mp-colors-border-selected: var(--mp-colors-indigo-700);\n --mp-colors-border-selected-hovered: var(--mp-colors-indigo-800);\n --mp-colors-border-selected-disabled: var(--mp-colors-indigo-200);\n --mp-colors-border-brand: var(--mp-colors-indigo-700);\n --mp-colors-border-danger: var(--mp-colors-red-700);\n --mp-colors-border-warning: var(--mp-colors-yellow-300);\n --mp-colors-border-success: var(--mp-colors-green-700);\n --mp-colors-border-highlight: var(--mp-colors-violet-700);\n --mp-colors-border-information: var(--mp-colors-indigo-700);\n --mp-colors-chart-cat01: var(--mp-colors-blue-400);\n --mp-colors-chart-cat01-bold: var(--mp-colors-blue-600);\n --mp-colors-chart-cat02: var(--mp-colors-teal-400);\n --mp-colors-chart-cat02-bold: var(--mp-colors-teal-600);\n --mp-colors-chart-cat03: var(--mp-colors-violet-400);\n --mp-colors-chart-cat03-bold: var(--mp-colors-violet-600);\n --mp-colors-chart-cat04: var(--mp-colors-orange-400);\n --mp-colors-chart-cat04-bold: var(--mp-colors-orange-600);\n --mp-colors-chart-cat05: var(--mp-colors-neutral-400);\n --mp-colors-chart-cat05-bold: var(--mp-colors-neutral-600);\n --mp-colors-chart-cat06: var(--mp-colors-red-400);\n --mp-colors-chart-cat06-bold: var(--mp-colors-red-600);\n --mp-colors-chart-cat07: var(--mp-colors-lime-400);\n --mp-colors-chart-cat07-bold: var(--mp-colors-lime-600);\n --mp-colors-chart-cat08: var(--mp-colors-fuchsia-400);\n --mp-colors-chart-cat08-bold: var(--mp-colors-fuchsia-600)\n }\n\n[data-panda-theme=next].dark {\n --mp-colors-background-surface: var(--mp-colors-dark);\n --mp-colors-background-stage: var(--mp-colors-dark-100);\n --mp-colors-background-overlay: rgba(101, 127, 153, 0.8);\n --mp-colors-background-disabled: rgba(188, 214, 240, 0.04);\n --mp-colors-background-inverse: var(--mp-colors-white);\n --mp-colors-background-shadow: rgba(22, 26, 29, 1);\n --mp-colors-background-neutral: var(--mp-colors-dark-200);\n --mp-colors-background-neutral-hovered: var(--mp-colors-dark-250);\n --mp-colors-background-neutral-pressed: var(--mp-colors-dark-300);\n --mp-colors-background-neutral-subtle: var(--mp-colors-dark-300);\n --mp-colors-background-neutral-subtle-hovered: var(--mp-colors-dark-350);\n --mp-colors-background-neutral-subtle-pressed: var(--mp-colors-dark-400);\n --mp-colors-background-neutral-bold: var(--mp-colors-dark-800);\n --mp-colors-background-neutral-bold-hovered: var(--mp-colors-dark-900);\n --mp-colors-background-neutral-bold-pressed: var(--mp-colors-dark-1000);\n --mp-colors-background-brand: var(--mp-colors-indigo-1000);\n --mp-colors-background-brand-hovered: var(--mp-colors-indigo-900);\n --mp-colors-background-brand-pressed: var(--mp-colors-indigo-800);\n --mp-colors-background-brand-selected: var(--mp-colors-indigo-900);\n --mp-colors-background-brand-bold: var(--mp-colors-indigo-400);\n --mp-colors-background-brand-bold-hovered: var(--mp-colors-indigo-300);\n --mp-colors-background-brand-bold-pressed: var(--mp-colors-indigo-200);\n --mp-colors-background-brand-bold-selected: var(--mp-colors-indigo-400);\n --mp-colors-background-tertiary: var(--mp-colors-dark-200);\n --mp-colors-background-tertiary-hovered: var(--mp-colors-dark-300);\n --mp-colors-background-tertiary-pressed: var(--mp-colors-dark-400);\n --mp-colors-background-danger: var(--mp-colors-red-1000);\n --mp-colors-background-danger-hovered: var(--mp-colors-red-900);\n --mp-colors-background-danger-pressed: var(--mp-colors-red-800);\n --mp-colors-background-danger-bold: var(--mp-colors-red-400);\n --mp-colors-background-danger-bold-hovered: var(--mp-colors-red-300);\n --mp-colors-background-danger-bold-pressed: var(--mp-colors-red-200);\n --mp-colors-background-warning: var(--mp-colors-yellow-1000);\n --mp-colors-background-warning-hovered: var(--mp-colors-yellow-900);\n --mp-colors-background-warning-pressed: var(--mp-colors-yellow-800);\n --mp-colors-background-warning-bold: var(--mp-colors-yellow-300);\n --mp-colors-background-warning-bold-hovered: var(--mp-colors-yellow-400);\n --mp-colors-background-warning-bold-pressed: var(--mp-colors-yellow-500);\n --mp-colors-background-success: var(--mp-colors-green-1000);\n --mp-colors-background-success-hovered: var(--mp-colors-green-900);\n --mp-colors-background-success-pressed: var(--mp-colors-green-800);\n --mp-colors-background-success-bold: var(--mp-colors-green-400);\n --mp-colors-background-success-bold-hovered: var(--mp-colors-green-300);\n --mp-colors-background-success-bold-pressed: var(--mp-colors-green-200);\n --mp-colors-background-highlight: var(--mp-colors-violet-1000);\n --mp-colors-background-highlight-hovered: var(--mp-colors-violet-900);\n --mp-colors-background-highlight-pressed: var(--mp-colors-violet-800);\n --mp-colors-background-highlight-bold: var(--mp-colors-violet-400);\n --mp-colors-background-highlight-bold-hovered: var(--mp-colors-violet-300);\n --mp-colors-background-highlight-bold-pressed: var(--mp-colors-violet-200);\n --mp-colors-nav-parent: var(--mp-colors-dark-100);\n --mp-colors-nav-stack: var(--mp-colors-dark);\n --mp-colors-nav-stack-hovered: var(--mp-colors-dark-100);\n --mp-colors-text-default: var(--mp-colors-dark-900);\n --mp-colors-text-default-static: var(--mp-colors-neutral-1000);\n --mp-colors-text-secondary: var(--mp-colors-dark-700);\n --mp-colors-text-secondary-pressed: var(--mp-colors-dark-800);\n --mp-colors-text-placeholder: var(--mp-colors-dark-600);\n --mp-colors-text-disabled: rgba(191, 219, 248, 0.28);\n --mp-colors-text-inverse: var(--mp-colors-dark-100);\n --mp-colors-text-inverse-static: var(--mp-colors-white);\n --mp-colors-text-selected: var(--mp-colors-indigo-400);\n --mp-colors-text-danger: var(--mp-colors-red-300);\n --mp-colors-text-danger-pressed: var(--mp-colors-red-200);\n --mp-colors-text-warning: var(--mp-colors-yellow-300);\n --mp-colors-text-warning-inverse: var(--mp-colors-neutral-1000);\n --mp-colors-text-success: var(--mp-colors-green-300);\n --mp-colors-text-highlight: var(--mp-colors-violet-300);\n --mp-colors-text-information: var(--mp-colors-indigo-300);\n --mp-colors-text-link: var(--mp-colors-indigo-400);\n --mp-colors-text-link-pressed: var(--mp-colors-indigo-300);\n --mp-colors-icon-default: var(--mp-colors-dark-600);\n --mp-colors-icon-disabled: var(--mp-colors-dark-400);\n --mp-colors-icon-inverse: var(--mp-colors-dark-100);\n --mp-colors-icon-inverse-static: var(--mp-colors-white);\n --mp-colors-icon-selected: var(--mp-colors-indigo-400);\n --mp-colors-icon-brand: var(--mp-colors-indigo-400);\n --mp-colors-icon-danger: var(--mp-colors-red-400);\n --mp-colors-icon-warning: var(--mp-colors-yellow-300);\n --mp-colors-icon-warning-inverse: var(--mp-colors-dark-100);\n --mp-colors-icon-success: var(--mp-colors-green-400);\n --mp-colors-icon-highlight: var(--mp-colors-violet-400);\n --mp-colors-icon-information: var(--mp-colors-indigo-400);\n --mp-colors-icon-subtle: var(--mp-colors-dark-300);\n --mp-colors-icon-logo: var(--mp-colors-neutral-100);\n --mp-colors-border-default: var(--mp-colors-dark-300);\n --mp-colors-border-bold: var(--mp-colors-dark-600);\n --mp-colors-border-disabled: rgba(161, 189, 217, 0.08);\n --mp-colors-border-form: rgba(166, 197, 226, 0.16);\n --mp-colors-border-focused: var(--mp-colors-indigo-300);\n --mp-colors-border-inverse: var(--mp-colors-dark-100);\n --mp-colors-border-selected: var(--mp-colors-indigo-400);\n --mp-colors-border-selected-hovered: var(--mp-colors-indigo-300);\n --mp-colors-border-selected-disabled: var(--mp-colors-indigo-900);\n --mp-colors-border-brand: var(--mp-colors-indigo-400);\n --mp-colors-border-danger: var(--mp-colors-red-400);\n --mp-colors-border-warning: var(--mp-colors-yellow-300);\n --mp-colors-border-success: var(--mp-colors-green-400);\n --mp-colors-border-highlight: var(--mp-colors-violet-400);\n --mp-colors-border-information: var(--mp-colors-indigo-400);\n --mp-colors-chart-cat01: var(--mp-colors-blue-300);\n --mp-colors-chart-cat01-bold: var(--mp-colors-blue-500);\n --mp-colors-chart-cat02: var(--mp-colors-teal-300);\n --mp-colors-chart-cat02-bold: var(--mp-colors-teal-500);\n --mp-colors-chart-cat03: var(--mp-colors-violet-300);\n --mp-colors-chart-cat03-bold: var(--mp-colors-violet-500);\n --mp-colors-chart-cat04: var(--mp-colors-orange-300);\n --mp-colors-chart-cat04-bold: var(--mp-colors-orange-500);\n --mp-colors-chart-cat05: var(--mp-colors-neutral-300);\n --mp-colors-chart-cat05-bold: var(--mp-colors-neutral-500);\n --mp-colors-chart-cat06: var(--mp-colors-red-300);\n --mp-colors-chart-cat06-bold: var(--mp-colors-red-500);\n --mp-colors-chart-cat07: var(--mp-colors-lime-300);\n --mp-colors-chart-cat07-bold: var(--mp-colors-lime-500);\n --mp-colors-chart-cat08: var(--mp-colors-fuchsia-300);\n --mp-colors-chart-cat08-bold: var(--mp-colors-fuchsia-500)\n }"
5
+ }