@mekari/pixel3-styled-system 0.1.2-dev.1 → 0.1.2-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.
package/CHANGELOG.md
CHANGED
package/package.json
CHANGED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { ConditionalValue } from '../types/index';
|
|
3
|
+
import type { DistributiveOmit, Pretty } from '../types/system-types';
|
|
4
|
+
|
|
5
|
+
interface DividerSlotRecipeVariant {
|
|
6
|
+
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
type DividerSlotRecipeVariantMap = {
|
|
10
|
+
[key in keyof DividerSlotRecipeVariant]: Array<DividerSlotRecipeVariant[key]>
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export type DividerSlotRecipeVariantProps = {
|
|
14
|
+
[key in keyof DividerSlotRecipeVariant]?: ConditionalValue<DividerSlotRecipeVariant[key]> | undefined
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export interface DividerSlotRecipeRecipe {
|
|
18
|
+
__type: DividerSlotRecipeVariantProps
|
|
19
|
+
(props?: DividerSlotRecipeVariantProps): Pretty<Record<"root" | "label", string>>
|
|
20
|
+
raw: (props?: DividerSlotRecipeVariantProps) => DividerSlotRecipeVariantProps
|
|
21
|
+
variantMap: DividerSlotRecipeVariantMap
|
|
22
|
+
variantKeys: Array<keyof DividerSlotRecipeVariant>
|
|
23
|
+
splitVariantProps<Props extends DividerSlotRecipeVariantProps>(props: Props): [DividerSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof DividerSlotRecipeVariantProps>>]
|
|
24
|
+
getVariantProps: (props?: DividerSlotRecipeVariantProps) => DividerSlotRecipeVariantProps
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
export declare const dividerSlotRecipe: DividerSlotRecipeRecipe
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
|
|
2
|
+
import { createRecipe } from './create-recipe.mjs';
|
|
3
|
+
|
|
4
|
+
const dividerSlotRecipeDefaultVariants = {}
|
|
5
|
+
const dividerSlotRecipeCompoundVariants = []
|
|
6
|
+
|
|
7
|
+
const dividerSlotRecipeSlotNames = [
|
|
8
|
+
[
|
|
9
|
+
"root",
|
|
10
|
+
"divider__root"
|
|
11
|
+
],
|
|
12
|
+
[
|
|
13
|
+
"label",
|
|
14
|
+
"divider__label"
|
|
15
|
+
]
|
|
16
|
+
]
|
|
17
|
+
const dividerSlotRecipeSlotFns = /* @__PURE__ */ dividerSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dividerSlotRecipeDefaultVariants, getSlotCompoundVariant(dividerSlotRecipeCompoundVariants, slotName))])
|
|
18
|
+
|
|
19
|
+
const dividerSlotRecipeFn = memo((props = {}) => {
|
|
20
|
+
return Object.fromEntries(dividerSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
|
|
21
|
+
})
|
|
22
|
+
|
|
23
|
+
const dividerSlotRecipeVariantKeys = []
|
|
24
|
+
const getVariantProps = (variants) => ({ ...dividerSlotRecipeDefaultVariants, ...compact(variants) })
|
|
25
|
+
|
|
26
|
+
export const dividerSlotRecipe = /* @__PURE__ */ Object.assign(dividerSlotRecipeFn, {
|
|
27
|
+
__recipe__: false,
|
|
28
|
+
__name__: 'dividerSlotRecipe',
|
|
29
|
+
raw: (props) => props,
|
|
30
|
+
variantKeys: dividerSlotRecipeVariantKeys,
|
|
31
|
+
variantMap: {},
|
|
32
|
+
splitVariantProps(props) {
|
|
33
|
+
return splitProps(props, dividerSlotRecipeVariantKeys)
|
|
34
|
+
},
|
|
35
|
+
getVariantProps
|
|
36
|
+
})
|
package/recipes/index.d.ts
CHANGED
|
@@ -14,7 +14,6 @@ export * from './tab-recipe';
|
|
|
14
14
|
export * from './tab-selected-border-recipe';
|
|
15
15
|
export * from './table-recipe';
|
|
16
16
|
export * from './table-container-recipe';
|
|
17
|
-
export * from './divider-recipe';
|
|
18
17
|
export * from './banner-title-recipe';
|
|
19
18
|
export * from './banner-description-recipe';
|
|
20
19
|
export * from './banner-link-recipe';
|
|
@@ -28,6 +27,7 @@ export * from './year-item-recipe';
|
|
|
28
27
|
export * from './time-item-recipe';
|
|
29
28
|
export * from './accordion-slot-recipe';
|
|
30
29
|
export * from './checkbox-slot-recipe';
|
|
30
|
+
export * from './divider-slot-recipe';
|
|
31
31
|
export * from './radio-slot-recipe';
|
|
32
32
|
export * from './shared-slot-recipe';
|
|
33
33
|
export * from './progress-slot-recipe';
|
package/recipes/index.mjs
CHANGED
|
@@ -13,7 +13,6 @@ export * from './tab-recipe.mjs';
|
|
|
13
13
|
export * from './tab-selected-border-recipe.mjs';
|
|
14
14
|
export * from './table-recipe.mjs';
|
|
15
15
|
export * from './table-container-recipe.mjs';
|
|
16
|
-
export * from './divider-recipe.mjs';
|
|
17
16
|
export * from './banner-title-recipe.mjs';
|
|
18
17
|
export * from './banner-description-recipe.mjs';
|
|
19
18
|
export * from './banner-link-recipe.mjs';
|
|
@@ -27,6 +26,7 @@ export * from './year-item-recipe.mjs';
|
|
|
27
26
|
export * from './time-item-recipe.mjs';
|
|
28
27
|
export * from './accordion-slot-recipe.mjs';
|
|
29
28
|
export * from './checkbox-slot-recipe.mjs';
|
|
29
|
+
export * from './divider-slot-recipe.mjs';
|
|
30
30
|
export * from './radio-slot-recipe.mjs';
|
|
31
31
|
export * from './shared-slot-recipe.mjs';
|
|
32
32
|
export * from './progress-slot-recipe.mjs';
|
package/themes/next.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "next",
|
|
3
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-vibrant-purple: linear-gradient(98deg, #F8F9FB 0%, #B5A2EC 50.01%, #4B61DD 100%);\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 }"
|
|
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-vibrant-purple: linear-gradient(98deg, #F8F9FB 0%, #B5A2EC 50.01%, #4B61DD 100%);\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-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 }\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
5
|
}
|