diff --git a/CLAUDE.md b/CLAUDE.md deleted file mode 100644 index 43042a87..00000000 --- a/CLAUDE.md +++ /dev/null @@ -1,3 +0,0 @@ -# Project Rules - -Основные правила и запреты — в `.claude/skills/generate-component/references/red-lines.md`. diff --git a/scripts/tokens/baseline.json b/scripts/tokens/baseline.json deleted file mode 100644 index 869e9334..00000000 --- a/scripts/tokens/baseline.json +++ /dev/null @@ -1,5072 +0,0 @@ -{ - "primitive": { - "colors": { - "alpha": { - "white": { - "100": "rgba(255, 255, 255, 0.1000)", - "200": "rgba(255, 255, 255, 0.2000)", - "300": "rgba(255, 255, 255, 0.3000)", - "400": "rgba(255, 255, 255, 0.4000)", - "500": "rgba(255, 255, 255, 0.5000)", - "600": "rgba(255, 255, 255, 0.6000)", - "700": "rgba(255, 255, 255, 0.7000)", - "800": "rgba(255, 255, 255, 0.8000)", - "900": "rgba(255, 255, 255, 0.9000)", - "1000": "#ffffff" - }, - "black": { - "100": "rgba(0, 0, 0, 0.1000)", - "200": "rgba(0, 0, 0, 0.2000)", - "300": "rgba(0, 0, 0, 0.3000)", - "400": "rgba(0, 0, 0, 0.4000)", - "500": "rgba(0, 0, 0, 0.5000)", - "600": "rgba(0, 0, 0, 0.6000)", - "700": "rgba(0, 0, 0, 0.7000)", - "800": "rgba(0, 0, 0, 0.8000)", - "900": "rgba(0, 0, 0, 0.9000)", - "1000": "#000000" - } - }, - "solid": { - "purple": { - "50": "#faf5ff", - "100": "#f3e8ff", - "200": "#e9d5ff", - "300": "#d8b4fe", - "400": "#c084fc", - "500": "#a855f7", - "600": "#9333ea", - "700": "#7e22ce", - "800": "#6b21a8", - "900": "#581c87", - "950": "#3b0764" - }, - "fuchsia": { - "50": "#fdf4ff", - "100": "#fae8ff", - "200": "#f5d0fe", - "300": "#f0abfc", - "400": "#e879f9", - "500": "#d946ef", - "600": "#c026d3", - "700": "#a21caf", - "800": "#86198f", - "900": "#701a75", - "950": "#4a044e" - }, - "pink": { - "50": "#fdf2f8", - "100": "#fce7f3", - "200": "#fbcfe8", - "300": "#f9a8d4", - "400": "#f472b6", - "500": "#ec4899", - "600": "#db2777", - "700": "#be185d", - "800": "#9d174d", - "900": "#831843", - "950": "#500724" - }, - "rose": { - "50": "#fff1f2", - "100": "#ffe4e6", - "200": "#fecdd3", - "300": "#fda4af", - "400": "#fb7185", - "500": "#f43f5e", - "600": "#e11d48", - "700": "#be123c", - "800": "#9f1239", - "900": "#881337", - "950": "#4c0519" - }, - "teal": { - "50": "#f0fdfa", - "100": "#ccfbf1", - "200": "#99f6e4", - "300": "#5eead4", - "400": "#2dd4bf", - "500": "#14b8a6", - "600": "#0d9488", - "700": "#0f766e", - "800": "#115e59", - "900": "#134e4a", - "950": "#042f2e" - }, - "cyan": { - "50": "#ecfeff", - "100": "#cffafe", - "200": "#a5f3fc", - "300": "#67e8f9", - "400": "#22d3ee", - "500": "#06b6d4", - "600": "#0891b2", - "700": "#0e7490", - "800": "#155e75", - "900": "#164e63", - "950": "#013138" - }, - "sky": { - "50": "#f0f9ff", - "100": "#e0f2fe", - "200": "#bae6fd", - "300": "#7dd3fc", - "400": "#38bdf8", - "500": "#0ea5e9", - "600": "#0284c7", - "700": "#0369a1", - "800": "#075985", - "900": "#0c4a6e", - "950": "#082f49" - }, - "blue": { - "50": "#fafdff", - "100": "#f0f9ff", - "200": "#d4ecfe", - "300": "#aad7fb", - "400": "#77baf4", - "500": "#4496e8", - "600": "#1e76cd", - "700": "#18538d", - "800": "#123a61", - "900": "#0e2a45", - "950": "#0c243b" - }, - "indigo": { - "50": "#eef2ff", - "100": "#e0e7ff", - "200": "#c7d2fe", - "300": "#a5b4fc", - "400": "#818cf8", - "500": "#6366f1", - "600": "#4f46e5", - "700": "#4338ca", - "800": "#3730a3", - "900": "#312e81", - "950": "#1e1b4b" - }, - "violet": { - "50": "#fcfaff", - "100": "#f6f0ff", - "200": "#e5d4fe", - "300": "#cbaafb", - "400": "#b284f5", - "500": "#a265ec", - "600": "#9457ea", - "700": "#48188d", - "800": "#321261", - "900": "#240e45", - "950": "#1f0c3b" - }, - "emerald": { - "50": "#ecfdf5", - "100": "#d1fae5", - "200": "#a7f3d0", - "300": "#6ee7b7", - "400": "#34d399", - "500": "#10b981", - "600": "#059669", - "700": "#047857", - "800": "#065f46", - "900": "#064e3b", - "950": "#022c22" - }, - "green": { - "50": "#fafffb", - "100": "#f0fff3", - "200": "#d4fedc", - "300": "#aafbb7", - "400": "#77f48a", - "500": "#44e858", - "600": "#1dc831", - "700": "#168322", - "800": "#12611b", - "900": "#0e4514", - "950": "#0c3b11" - }, - "lime": { - "50": "#f7fee7", - "100": "#ecfccb", - "200": "#d9f99d", - "300": "#bef264", - "400": "#a3e635", - "500": "#84cc16", - "600": "#65a30d", - "700": "#4d7c0f", - "800": "#3f6212", - "900": "#365314", - "950": "#1a2e05" - }, - "red": { - "50": "#fffafa", - "100": "#fff0f0", - "200": "#fed4d4", - "300": "#fbacaa", - "400": "#f47f77", - "500": "#e85244", - "600": "#db3424", - "700": "#8d2218", - "800": "#611912", - "900": "#45120e", - "950": "#3b100c" - }, - "orange": { - "50": "#fffbfa", - "100": "#fff3f0", - "200": "#ffddd5", - "300": "#ffbca9", - "400": "#ff9273", - "500": "#fe6434", - "600": "#d53f0b", - "700": "#a83107", - "800": "#752506", - "900": "#561c05", - "950": "#4b1905" - }, - "amber": { - "50": "#fffbeb", - "100": "#fef3c7", - "200": "#fde68a", - "300": "#fcd34d", - "400": "#fbbf24", - "500": "#f59e0b", - "600": "#d97706", - "700": "#b45309", - "800": "#92400e", - "900": "#78350f", - "950": "#451a03" - }, - "yellow": { - "50": "#fffdfa", - "100": "#fff9f0", - "200": "#ffeed4", - "300": "#fddeaa", - "400": "#facb75", - "500": "#f5b83d", - "600": "#dc9710", - "700": "#9d6d0e", - "800": "#6d4c0b", - "900": "#4f3709", - "950": "#453008" - }, - "slate": { - "50": "#f8fafc", - "100": "#f1f5f9", - "200": "#e2e8f0", - "300": "#cbd5e1", - "400": "#94a3b8", - "500": "#64748b", - "600": "#475569", - "700": "#334155", - "800": "#1e293b", - "900": "#0f172a", - "950": "#020617" - }, - "gray": { - "50": "#f9fafb", - "100": "#f3f4f6", - "200": "#e5e7eb", - "300": "#d1d5db", - "400": "#9ca3af", - "500": "#6b7280", - "600": "#4b5563", - "700": "#374151", - "800": "#1f2937", - "900": "#111827", - "950": "#030712" - }, - "zinc": { - "50": "#fafafa", - "100": "#f0f0f1", - "200": "#e2e2e4", - "300": "#cecfd2", - "400": "#a2a5a9", - "500": "#85888e", - "600": "#6d7076", - "700": "#56595f", - "800": "#404348", - "900": "#2b2e33", - "950": "#181a1f" - }, - "neutral": { - "50": "#fafafa", - "100": "#f5f5f5", - "200": "#e5e5e5", - "300": "#d4d4d4", - "400": "#a3a3a3", - "500": "#737373", - "600": "#525252", - "700": "#404040", - "800": "#262626", - "900": "#171717", - "950": "#0a0a0a" - }, - "stone": { - "50": "#fafaf9", - "100": "#f5f5f4", - "200": "#e7e5e4", - "300": "#d6d3d1", - "400": "#a8a29e", - "500": "#78716c", - "600": "#57534e", - "700": "#44403c", - "800": "#292524", - "900": "#1c1917", - "950": "#0c0a09" - } - } - }, - "borderRadius": { - "100": "0.25rem", - "200": "0.5rem", - "300": "0.75rem", - "400": "1rem", - "500": "1.5rem", - "none": "0rem", - "max": "71.3571rem" - }, - "borderWidth": { - "100": "0.0714rem", - "200": "0.1429rem", - "300": "0.25rem", - "none": "0rem" - }, - "fonts": { - "fontFamily": { - "heading": "TT Fellows", - "base": "PT Sans" - }, - "fontWeight": { - "regular": "400", - "medium": "500", - "demibold": "600", - "bold": "700" - }, - "fontSize": { - "100": "0.75rem", - "200": "0.875rem", - "300": "1rem", - "400": "1.125rem", - "500": "1.25rem", - "600": "1.5rem", - "650": "1.875rem", - "700": "2.25rem", - "750": "3rem", - "800": "3.75rem", - "900": "4.5rem", - "1000": "6rem" - }, - "lineHeight": { - "100": "0.7857rem", - "150": "0.8571rem", - "200": "0.9286rem", - "250": "1rem", - "300": "1.0714rem", - "350": "1.1429rem", - "400": "1.2857rem", - "450": "1.4286rem", - "500": "1.5rem", - "550": "1.5714rem", - "600": "1.7143rem", - "700": "1.8571rem", - "800": "2.2857rem", - "850": "2.3571rem", - "900": "2.7857rem", - "1000": "3.3571rem", - "auto": "auto" - } - }, - "spacing": { - "none": "0rem", - "1x": "0.25rem", - "2x": "0.5rem", - "3x": "0.75rem", - "4x": "1rem", - "5x": "1.25rem", - "6x": "1.5rem", - "7x": "1.75rem", - "8x": "2rem", - "9x": "2.25rem", - "10x": "2.5rem", - "11x": "2.75rem", - "12x": "3rem", - "14x": "3.5rem", - "16x": "4rem", - "20x": "5rem", - "24x": "6rem", - "28x": "7rem", - "32x": "8rem", - "36x": "9rem", - "40x": "10rem" - }, - "sizing": { - "none": "0rem", - "min": "0.0714rem", - "1x": "0.25rem", - "2x": "0.5rem", - "3x": "0.75rem", - "4x": "1rem", - "5x": "1.25rem", - "6x": "1.5rem", - "7x": "1.75rem", - "8x": "2rem", - "9x": "2.25rem", - "10x": "2.5rem", - "11x": "2.75rem", - "12x": "3rem", - "14x": "3.5rem", - "16x": "4rem", - "20x": "5rem", - "24x": "6rem", - "28x": "7rem", - "32x": "8rem", - "36x": "9rem", - "40x": "10rem", - "44x": "11rem", - "48x": "12rem", - "52x": "13rem", - "56x": "14rem", - "60x": "15rem", - "64x": "16rem", - "68x": "17rem", - "72x": "18rem", - "76x": "19rem", - "80x": "20rem", - "84x": "21rem", - "88x": "22rem", - "92x": "23rem", - "96x": "24rem", - "100x": "25rem", - "104x": "26rem", - "108x": "27rem", - "112x": "28rem", - "116x": "29rem", - "120x": "30rem", - "124x": "34rem", - "128x": "45rem", - "132x": "50rem", - "136x": "54rem", - "140x": "58rem", - "144x": "60rem", - "max": "100%" - }, - "shadows": { - "100": "0 0 0.1rem {colors.alpha.black.200}", - "200": "0 0 0.25rem {colors.alpha.black.200}", - "300": "0 0.1rem 0.25rem {colors.alpha.black.200}", - "400": "0 0.25rem 0.5rem {colors.alpha.black.200}", - "500": "0 0.5rem 1rem 0 {colors.alpha.black.200}", - "none": "none" - }, - "transition": { - "easing": { - "linear": "linear", - "in": "cubic-bezier(0.55, 0.06, 0.7, 0.2)", - "out": "cubic-bezier(0.2, 0.6, 0.4, 1)", - "inOut": "cubic-bezier(0.65, 0.05, 0.35, 1)" - }, - "duration": { - "100": "140ms", - "200": "180ms", - "300": "240ms", - "400": "320ms", - "500": "400ms" - } - }, - "opacity": { - "250": "0.25", - "500": "0.5", - "1000": "1" - } - }, - "semantic": { - "list": { - "padding": "{spacing.1x}", - "gap": { - "100": "{spacing.1x}", - "200": "{spacing.2x}" - }, - "header": { - "padding": "{spacing.4x} {spacing.4x} 0 {spacing.4x}" - }, - "option": { - "padding": "{spacing.2x} {spacing.3x}", - "borderRadius": "{borderRadius.200}" - }, - "optionGroup": { - "padding": "{spacing.2x} {spacing.3x}", - "fontWeight": "{fonts.fontWeight.demibold}" - } - }, - "focusRing": { - "width": "{borderWidth.300}", - "style": "none", - "color": "{focusRing.extend.success}", - "offset": "0rem" - }, - "form": { - "padding": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.3x}", - "400": "{spacing.4x}", - "500": "{spacing.5x}", - "600": "{spacing.6x}", - "700": "{spacing.7x}" - }, - "borderRadius": { - "100": "{borderRadius.200}", - "200": "{borderRadius.300}", - "300": "{borderRadius.max}" - }, - "borderWidth": "{borderWidth.100}", - "icon": { - "100": "{sizing.2x}", - "200": "{sizing.3x}", - "300": "{sizing.4x}", - "400": "{sizing.5x}", - "500": "{sizing.6x}" - }, - "transitionDuration": "{transition.duration.200}", - "size": { - "100": "{sizing.min}", - "150": "{sizing.1x}", - "200": "{sizing.2x}", - "250": "{sizing.3x}", - "300": "{sizing.4x}", - "350": "{sizing.5x}", - "400": "{sizing.6x}", - "500": "{sizing.8x}", - "600": "{sizing.10x}", - "700": "{sizing.12x}", - "800": "{sizing.16x}", - "900": "{sizing.20x}" - }, - "width": { - "100": "{sizing.6x}", - "200": "{sizing.8x}", - "300": "{sizing.10x}", - "350": "{sizing.11x}", - "400": "{sizing.12x}", - "500": "{sizing.60x}", - "full": "{sizing.max}" - }, - "gap": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.3x}", - "400": "{spacing.4x}" - }, - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}" - }, - "sm": { - "width": "{sizing.60x}", - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{spacing.3x}", - "paddingY": "{spacing.3x}" - }, - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{spacing.4x}", - "paddingY": "{spacing.4x}", - "lg": { - "width": "{sizing.76x}", - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{spacing.5x}", - "paddingY": "{spacing.5x}" - }, - "xlg": { - "width": "{sizing.84x}", - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{spacing.6x}", - "paddingY": "{spacing.6x}" - } - }, - "content": { - "borderRadius": "{borderRadius.300}", - "padding": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.4x}", - "400": "{spacing.6x}", - "500": "{spacing.7x}" - }, - "borderWidth": "{sizing.min}", - "gap": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.3x}", - "400": "{spacing.4x}" - } - }, - "navigation": { - "width": { - "100": "{borderWidth.100}", - "200": "{borderWidth.300}" - }, - "borderRadius": "{borderRadius.100}", - "padding": { - "100": "{spacing.1x}", - "200": "{spacing.3x}", - "300": "{spacing.4x}", - "400": "{spacing.6x}" - }, - "size": { - "100": "{sizing.1x}", - "200": "{sizing.2x}", - "300": "{sizing.5x}", - "400": "{sizing.8x}", - "500": "{sizing.16x}" - }, - "submenu": { - "padding": "{spacing.5x}" - }, - "list": { - "padding": { - "100": "{spacing.1x}", - "200": "{spacing.2x}" - }, - "gap": "{spacing.1x}" - }, - "item": { - "padding": "{spacing.2x} {spacing.3x}", - "borderRadius": "{borderRadius.200}", - "gap": "{spacing.2x}" - }, - "submenuLabel": { - "padding": "{spacing.2x} {spacing.3x}", - "fontWeight": "{fonts.fontWeight.regular}" - }, - "submenuIcon": { - "size": "{fonts.fontSize.500}" - } - }, - "overlay": { - "mask": { - "transitionDuration": "{transition.duration.200}" - }, - "select": { - "borderRadius": "{borderRadius.300}", - "padding": "{spacing.1x}" - }, - "borderWidth": "{borderWidth.100}", - "icon": { - "size": { - "100": "{sizing.4x}", - "200": "{sizing.6x}", - "300": "{sizing.7x}", - "400": "{sizing.8x}", - "500": "{sizing.9x}" - } - }, - "popover": { - "borderRadius": "{borderRadius.200}", - "width": { - "100": "{sizing.2x}", - "200": "{sizing.3x}" - }, - "padding": { - "100": "{spacing.3x}", - "200": "{spacing.5x}" - } - }, - "modal": { - "borderRadius": "{borderRadius.500}", - "padding": { - "100": "{spacing.4x}", - "200": "{spacing.5x}", - "300": "{spacing.6x}" - } - }, - "gap": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.3x}", - "400": "{spacing.4x}" - }, - "width": "{sizing.100x}", - "drawer": { - "padding": "{spacing.2x}" - }, - "sm": { - "width": "{sizing.80x}" - }, - "lg": { - "width": "{sizing.120x}" - }, - "xlg": { - "width": "{sizing.128x}" - } - }, - "feedback": { - "transitionDuration": "{transition.duration.200}", - "width": { - "100": "{sizing.min}", - "200": "{sizing.1x}", - "300": "{sizing.2x}", - "400": "{sizing.3x}", - "500": "{sizing.4x}", - "550": "{sizing.5x}", - "600": "{sizing.6x}", - "650": "{sizing.7x}", - "700": "{sizing.8x}", - "800": "{sizing.12x}", - "900": "{sizing.16x}" - }, - "icon": { - "size": { - "100": "{sizing.2x}", - "200": "{sizing.4x}", - "300": "{sizing.6x}", - "350": "{sizing.7x}", - "400": "{sizing.8x}", - "500": "{sizing.9x}" - } - }, - "padding": { - "100": "{spacing.2x}", - "200": "{spacing.4x}" - }, - "height": { - "100": "{sizing.2x}", - "200": "{sizing.3x}", - "300": "{sizing.4x}", - "400": "{sizing.5x}", - "500": "{sizing.6x}", - "600": "{sizing.7x}", - "650": "{sizing.8x}", - "700": "{sizing.9x}", - "750": "{sizing.10x}", - "800": "{sizing.11x}", - "850": "{sizing.12x}", - "900": "{sizing.16x}" - }, - "gap": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.3x}", - "400": "{spacing.4x}" - } - }, - "data": { - "padding": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.3x}", - "400": "{spacing.4x}", - "500": "{spacing.5x}" - }, - "icon": { - "size": { - "100": "{sizing.4x}", - "200": "{sizing.5x}", - "300": "{sizing.6x}", - "400": "{sizing.7x}", - "500": "{sizing.8x}", - "600": "{sizing.9x}", - "700": "{sizing.10x}" - } - }, - "transitionDuration": "{transition.duration.200}", - "borderWidth": "{borderWidth.none}", - "borderRadius": "{borderRadius.100}", - "gap": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.3x}" - }, - "width": { - "100": "{sizing.min}", - "200": "{sizing.1x}", - "300": "{sizing.2x}", - "400": "{sizing.20x}" - } - }, - "media": { - "size": { - "100": "{sizing.1x}", - "200": "{sizing.2x}", - "300": "{sizing.8x}", - "400": "{sizing.10x}", - "500": "{sizing.14x}", - "600": "{sizing.16x}" - }, - "borderRadius": { - "100": "{borderRadius.200}", - "200": "{borderRadius.300}", - "300": "{borderRadius.400}", - "400": "{borderRadius.500}", - "max": "{borderRadius.max}" - }, - "icon": { - "size": { - "100": "{sizing.4x}", - "200": "{sizing.6x}", - "300": "{sizing.8x}" - } - }, - "transitionDuration": "{transition.duration.200}", - "padding": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.3x}", - "400": "{spacing.4x}", - "500": "{spacing.5x}", - "600": "{spacing.6x}" - }, - "gap": { - "100": "{spacing.1x}", - "200": "{spacing.2x}" - } - }, - "controls": { - "iconOnly": { - "100": "{sizing.2x}", - "200": "{sizing.4x}", - "300": "{sizing.5x}", - "400": "{sizing.6x}", - "500": "{sizing.7x}", - "600": "{sizing.8x}", - "700": "{sizing.10x}", - "800": "{sizing.11x}", - "850": "{sizing.14x}", - "900": "{sizing.16x}" - }, - "borderRadius": { - "100": "{borderRadius.300}", - "200": "{borderRadius.400}", - "max": "{borderRadius.max}" - }, - "transitionDuration": "{transition.duration.200}", - "padding": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.3x}", - "400": "{spacing.4x}", - "500": "{spacing.5x}", - "600": "{spacing.6x}" - }, - "gap": { - "100": "{spacing.2x}", - "200": "{spacing.3x}", - "300": "{spacing.4x}" - }, - "width": { - "100": "{sizing.min}" - } - }, - "colorScheme": { - "light": { - "success": { - "50": "{colors.solid.green.50}", - "100": "{colors.solid.green.100}", - "200": "{colors.solid.green.200}", - "300": "{colors.solid.green.300}", - "400": "{colors.solid.green.400}", - "500": "{colors.solid.green.500}", - "600": "{colors.solid.green.600}", - "700": "{colors.solid.green.700}", - "800": "{colors.solid.green.800}", - "900": "{colors.solid.green.900}", - "950": "{colors.solid.green.950}" - }, - "info": { - "50": "{colors.solid.blue.50}", - "100": "{colors.solid.blue.100}", - "200": "{colors.solid.blue.200}", - "300": "{colors.solid.blue.300}", - "400": "{colors.solid.blue.400}", - "500": "{colors.solid.blue.500}", - "600": "{colors.solid.blue.600}", - "700": "{colors.solid.blue.700}", - "800": "{colors.solid.blue.800}", - "900": "{colors.solid.blue.900}", - "950": "{colors.solid.blue.950}" - }, - "warn": { - "50": "{colors.solid.yellow.50}", - "100": "{colors.solid.yellow.100}", - "200": "{colors.solid.yellow.200}", - "300": "{colors.solid.yellow.300}", - "400": "{colors.solid.yellow.400}", - "500": "{colors.solid.yellow.500}", - "600": "{colors.solid.yellow.600}", - "700": "{colors.solid.yellow.700}", - "800": "{colors.solid.yellow.800}", - "900": "{colors.solid.yellow.900}", - "950": "{colors.solid.yellow.950}" - }, - "transparent": "rgba(255, 255, 255, 0.0001)", - "help": { - "50": "{colors.solid.purple.50}", - "100": "{colors.solid.purple.100}", - "200": "{colors.solid.purple.200}", - "300": "{colors.solid.purple.300}", - "400": "{colors.solid.purple.400}", - "500": "{colors.solid.purple.500}", - "600": "{colors.solid.purple.600}", - "700": "{colors.solid.purple.700}", - "800": "{colors.solid.purple.800}", - "900": "{colors.solid.purple.900}", - "950": "{colors.solid.purple.950}" - }, - "error": { - "50": "{colors.solid.red.50}", - "100": "{colors.solid.red.100}", - "200": "{colors.solid.red.200}", - "300": "{colors.solid.red.300}", - "400": "{colors.solid.red.400}", - "500": "{colors.solid.red.500}", - "600": "{colors.solid.red.600}", - "700": "{colors.solid.red.700}", - "800": "{colors.solid.red.800}", - "900": "{colors.solid.red.900}", - "950": "{colors.solid.red.950}" - }, - "surface": { - "0": "{colors.alpha.white.1000}", - "50": "{colors.solid.zinc.50}", - "100": "{colors.solid.zinc.100}", - "200": "{colors.solid.zinc.200}", - "300": "{colors.solid.zinc.300}", - "400": "{colors.solid.zinc.400}", - "500": "{colors.solid.zinc.500}", - "600": "{colors.solid.zinc.600}", - "700": "{colors.solid.zinc.700}", - "800": "{colors.solid.zinc.800}", - "900": "{colors.solid.zinc.900}", - "950": "{colors.solid.zinc.950}" - }, - "primary": { - "color": "{colors.solid.green.500}", - "contrastColor": "{colors.alpha.white.1000}", - "hoverColor": "{colors.solid.green.600}", - "activeColor": "{colors.solid.green.700}", - "hoverBackground": "{colors.solid.green.50}", - "activeBackground": "{colors.solid.green.100}", - "borderColor": "{colors.solid.green.200}", - "selectedBackground": "{colors.solid.green.500}", - "selectedHoverBackground": "{colors.solid.green.600}" - }, - "highlight": { - "background": "{colors.solid.zinc.900}", - "focusBackground": "{colors.solid.zinc.800}", - "color": "{colors.alpha.white.1000}", - "focusColor": "{colors.alpha.white.1000}" - }, - "focusRing": { - "shadow": "{shadows.200}", - "extend": { - "invalid": "{colors.solid.red.200}", - "success": "{colors.solid.green.200}", - "warning": "{colors.solid.yellow.200}", - "info": "{colors.solid.blue.200}" - } - }, - "mask": { - "background": "{colors.alpha.black.400}", - "color": "{surface.200}" - }, - "form": { - "background": "{colors.alpha.white.1000}", - "disabledBackground": "{colors.solid.zinc.200}", - "readonlyBackground": "{colors.solid.zinc.100}", - "filledBackground": "{colors.alpha.white.1000}", - "filledHoverBackground": "{colors.alpha.white.1000}", - "filledFocusBackground": "{colors.alpha.white.1000}", - "borderColor": "{colors.solid.zinc.300}", - "hoverBorderPrimaryColor": "{colors.solid.zinc.900}", - "focusBorderPrimaryColor": "{colors.solid.zinc.900}", - "hoverBorderSecondaryColor": "{colors.solid.green.600}", - "focusBorderSecondaryColor": "{colors.solid.green.600}", - "invalidBorderColor": "{colors.solid.red.400}", - "color": "{colors.solid.zinc.950}", - "disabledColor": "{colors.solid.zinc.500}", - "placeholderColor": "{colors.solid.zinc.500}", - "invalidPlaceholderColor": "{colors.solid.red.600}", - "floatLabelColor": "{colors.solid.zinc.500}", - "floatLabelFocusColor": "{colors.solid.zinc.500}", - "floatLabelActiveColor": "{colors.solid.zinc.500}", - "floatLabelInvalidColor": "{form.invalidPlaceholderColor}", - "iconColor": "{colors.solid.zinc.950}", - "backgroundHandler": "{colors.alpha.white.1000}", - "shadow": "{shadows.200}" - }, - "text": { - "color": "{colors.solid.zinc.900}", - "extend": { - "colorPrimaryStatic": "{colors.solid.zinc.900}", - "colorSecondaryStatic": "{colors.alpha.white.1000}", - "colorInverted": "{colors.alpha.white.1000}" - }, - "hoverColor": "{colors.solid.zinc.700}", - "primaryColor": "{colors.solid.green.600}", - "hoverPrimaryColor": "{colors.solid.green.700}", - "secondaryColor": "{colors.solid.zinc.600}", - "hoverSecondaryColor": "{colors.solid.zinc.400}", - "mutedColor": "{colors.solid.zinc.500}", - "hoverMutedColor": "{colors.solid.zinc.300}", - "disabledColor": "{colors.solid.zinc.300}", - "infoColor": "{colors.solid.blue.600}", - "successColor": "{colors.solid.green.700}", - "dangerColor": "{colors.solid.red.600}", - "warningColor": "{colors.solid.yellow.600}", - "helpColor": "{colors.solid.purple.600}" - }, - "content": { - "background": "{colors.alpha.white.1000}", - "hoverBackground": "{colors.solid.zinc.100}", - "borderColor": "{colors.solid.zinc.200}", - "activeBorderColor": "{colors.solid.zinc.800}", - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "shadow": "{shadows.400}" - }, - "list": { - "option": { - "background": "{colors.alpha.white.1000}", - "focusBackground": "{colors.solid.zinc.100}", - "selectedBackground": "{colors.solid.zinc.900}", - "selectedFocusBackground": "{colors.solid.zinc.700}", - "color": "{text.color}", - "focusColor": "{text.color}", - "selectedColor": "{text.extend.colorInverted}", - "selectedFocusColor": "{text.extend.colorInverted}", - "icon": { - "color": "{text.color}", - "focusColor": "{text.color}" - } - }, - "optionGroup": { - "background": "{colors.alpha.white.1000}", - "color": "{text.mutedColor}" - } - }, - "overlay": { - "select": { - "background": "{colors.alpha.white.1000}", - "borderColor": "{colors.solid.zinc.200}", - "color": "{text.color}", - "shadow": "0 0.25rem 0.5rem {colors.alpha.black.200}" - }, - "popover": { - "background": "{colors.alpha.white.1000}", - "borderColor": "{form.borderColor}", - "color": "{text.color}", - "shadow": "{shadows.400}" - }, - "modal": { - "background": "{colors.alpha.white.1000}", - "backdrop": "{colors.alpha.black.300}", - "borderColor": "{colors.solid.zinc.200}", - "color": "{text.color}", - "shadow": "{shadows.200}" - } - }, - "navigation": { - "submenuLabel": { - "background": "rgba(255, 255, 255, 0.0000)", - "color": "{text.mutedColor}" - }, - "submenuIcon": { - "color": "{colors.solid.zinc.900}", - "focusColor": "{colors.solid.zinc.900}", - "activeColor": "{colors.alpha.white.1000}" - }, - "item": { - "focusBackground": "{colors.solid.zinc.100}", - "activeBackground": "{colors.solid.zinc.900}", - "color": "{colors.solid.zinc.900}", - "focusColor": "{colors.solid.zinc.900}", - "icon": { - "color": "{colors.solid.zinc.900}", - "focusColor": "{colors.solid.zinc.900}", - "activeColor": "{colors.alpha.white.1000}" - }, - "activeColor": "{colors.alpha.white.1000}" - }, - "shadow": "{shadows.400}" - } - }, - "dark": { - "success": { - "50": "{colors.solid.green.950}", - "100": "{colors.solid.green.900}", - "200": "{colors.solid.green.800}", - "300": "{colors.solid.green.700}", - "400": "{colors.solid.green.600}", - "500": "{colors.solid.green.500}", - "600": "{colors.solid.green.400}", - "700": "{colors.solid.green.300}", - "800": "{colors.solid.green.200}", - "900": "{colors.solid.green.100}", - "950": "{colors.solid.green.50}" - }, - "info": { - "50": "{colors.solid.blue.950}", - "100": "{colors.solid.blue.900}", - "200": "{colors.solid.blue.800}", - "300": "{colors.solid.blue.700}", - "400": "{colors.solid.blue.600}", - "500": "{colors.solid.blue.500}", - "600": "{colors.solid.blue.400}", - "700": "{colors.solid.blue.300}", - "800": "{colors.solid.blue.200}", - "900": "{colors.solid.blue.100}", - "950": "{colors.solid.blue.50}" - }, - "warn": { - "50": "{colors.solid.yellow.950}", - "100": "{colors.solid.yellow.900}", - "200": "{colors.solid.yellow.800}", - "300": "{colors.solid.yellow.700}", - "400": "{colors.solid.yellow.600}", - "500": "{colors.solid.yellow.500}", - "600": "{colors.solid.yellow.400}", - "700": "{colors.solid.yellow.300}", - "800": "{colors.solid.yellow.200}", - "900": "{colors.solid.yellow.100}", - "950": "{colors.solid.yellow.50}" - }, - "transparent": "rgba(0, 0, 0, 0.0001)", - "help": { - "50": "{colors.solid.purple.950}", - "100": "{colors.solid.purple.900}", - "200": "{colors.solid.purple.800}", - "300": "{colors.solid.purple.700}", - "400": "{colors.solid.purple.600}", - "500": "{colors.solid.purple.500}", - "600": "{colors.solid.purple.400}", - "700": "{colors.solid.purple.300}", - "800": "{colors.solid.purple.200}", - "900": "{colors.solid.purple.100}", - "950": "{colors.solid.purple.50}" - }, - "error": { - "50": "{colors.solid.red.950}", - "100": "{colors.solid.red.900}", - "200": "{colors.solid.red.800}", - "300": "{colors.solid.red.700}", - "400": "{colors.solid.red.600}", - "500": "{colors.solid.red.500}", - "600": "{colors.solid.red.400}", - "700": "{colors.solid.red.300}", - "800": "{colors.solid.red.200}", - "900": "{colors.solid.red.100}", - "950": "{colors.solid.red.50}" - }, - "surface": { - "0": "{colors.alpha.black.1000}", - "50": "{colors.solid.zinc.950}", - "100": "{colors.solid.zinc.900}", - "200": "{colors.solid.zinc.800}", - "300": "{colors.solid.zinc.700}", - "400": "{colors.solid.zinc.600}", - "500": "{colors.solid.zinc.500}", - "600": "{colors.solid.zinc.400}", - "700": "{colors.solid.zinc.300}", - "800": "{colors.solid.zinc.200}", - "900": "{colors.solid.zinc.100}", - "950": "{colors.solid.zinc.50}" - }, - "primary": { - "color": "{colors.solid.green.500}", - "contrastColor": "{colors.solid.zinc.900}", - "hoverColor": "{colors.solid.green.400}", - "activeColor": "{colors.solid.green.300}", - "hoverBackground": "{colors.solid.green.950}", - "activeBackground": "{colors.solid.green.900}", - "borderColor": "{colors.solid.green.800}", - "selectedBackground": "{colors.solid.green.500}", - "selectedHoverBackground": "{colors.solid.green.600}" - }, - "highlight": { - "background": "{colors.solid.zinc.100}", - "focusBackground": "{colors.solid.zinc.200}", - "color": "{colors.solid.zinc.900}", - "focusColor": "{colors.solid.zinc.900}" - }, - "focusRing": { - "shadow": "{shadows.200}", - "extend": { - "invalid": "{colors.solid.red.800}", - "success": "{colors.solid.green.800}", - "warning": "{colors.solid.yellow.800}", - "info": "{colors.solid.blue.800}" - } - }, - "mask": { - "background": "{colors.alpha.black.600}", - "color": "{surface.800}" - }, - "form": { - "background": "{colors.solid.zinc.950}", - "disabledBackground": "{colors.solid.zinc.800}", - "readonlyBackground": "{colors.solid.zinc.900}", - "filledBackground": "{colors.solid.zinc.950}", - "filledHoverBackground": "{colors.solid.zinc.950}", - "filledFocusBackground": "{colors.solid.zinc.950}", - "borderColor": "{colors.solid.zinc.700}", - "hoverBorderPrimaryColor": "{colors.solid.zinc.100}", - "focusBorderPrimaryColor": "{colors.solid.zinc.100}", - "hoverBorderSecondaryColor": "{colors.solid.green.400}", - "focusBorderSecondaryColor": "{colors.solid.green.400}", - "invalidBorderColor": "{colors.solid.red.600}", - "color": "{colors.alpha.white.1000}", - "disabledColor": "{colors.solid.zinc.500}", - "placeholderColor": "{colors.solid.zinc.500}", - "invalidPlaceholderColor": "{colors.solid.red.400}", - "floatLabelColor": "{colors.solid.zinc.500}", - "floatLabelFocusColor": "{colors.solid.zinc.500}", - "floatLabelActiveColor": "{colors.solid.zinc.500}", - "floatLabelInvalidColor": "{form.invalidPlaceholderColor}", - "iconColor": "{colors.alpha.white.1000}", - "backgroundHandler": "{colors.alpha.white.1000}", - "shadow": "{shadows.200}" - }, - "text": { - "color": "{colors.alpha.white.1000}", - "extend": { - "colorPrimaryStatic": "{colors.solid.zinc.900}", - "colorSecondaryStatic": "{colors.alpha.white.1000}", - "colorInverted": "{colors.solid.zinc.900}" - }, - "hoverColor": "{colors.solid.zinc.300}", - "primaryColor": "{colors.solid.green.400}", - "hoverPrimaryColor": "{colors.solid.green.300}", - "secondaryColor": "{colors.solid.zinc.400}", - "hoverSecondaryColor": "{colors.solid.zinc.600}", - "mutedColor": "{colors.solid.zinc.500}", - "hoverMutedColor": "{colors.solid.zinc.700}", - "disabledColor": "{colors.solid.zinc.700}", - "infoColor": "{colors.solid.blue.400}", - "successColor": "{colors.solid.green.400}", - "dangerColor": "{colors.solid.red.400}", - "warningColor": "{colors.solid.yellow.400}", - "helpColor": "{colors.solid.purple.400}" - }, - "content": { - "background": "{colors.solid.zinc.900}", - "hoverBackground": "{colors.solid.zinc.800}", - "borderColor": "{colors.solid.zinc.800}", - "activeBorderColor": "{colors.solid.zinc.200}", - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "shadow": "{shadows.400}" - }, - "list": { - "option": { - "background": "{colors.solid.zinc.900}", - "focusBackground": "{colors.solid.zinc.800}", - "selectedBackground": "{colors.solid.zinc.100}", - "selectedFocusBackground": "{colors.solid.zinc.300}", - "color": "{text.color}", - "focusColor": "{text.color}", - "selectedColor": "{text.extend.colorInverted}", - "selectedFocusColor": "{text.extend.colorInverted}", - "icon": { - "color": "{text.color}", - "focusColor": "{text.color}" - } - }, - "optionGroup": { - "background": "{colors.solid.zinc.900}", - "color": "{text.mutedColor}" - } - }, - "overlay": { - "select": { - "background": "{colors.solid.zinc.900}", - "borderColor": "{colors.solid.zinc.800}", - "color": "{text.color}", - "shadow": "{shadows.400}" - }, - "popover": { - "background": "{colors.solid.zinc.900}", - "borderColor": "{form.borderColor}", - "color": "{text.color}", - "shadow": "{shadows.400}" - }, - "modal": { - "background": "{colors.solid.zinc.900}", - "backdrop": "{colors.alpha.black.300}", - "borderColor": "{colors.solid.zinc.800}", - "color": "{text.color}", - "shadow": "{shadows.200}" - } - }, - "navigation": { - "submenuLabel": { - "background": "rgba(255, 255, 255, 0.0000)", - "color": "{text.mutedColor}" - }, - "submenuIcon": { - "color": "{colors.solid.zinc.100}", - "focusColor": "{colors.solid.zinc.100}", - "activeColor": "{colors.solid.zinc.900}" - }, - "item": { - "focusBackground": "{colors.solid.zinc.900}", - "activeBackground": "{colors.solid.zinc.100}", - "color": "{colors.alpha.white.1000}", - "focusColor": "{colors.alpha.white.1000}", - "icon": { - "color": "{colors.alpha.white.1000}", - "focusColor": "{colors.alpha.white.1000}", - "activeColor": "{colors.solid.zinc.900}" - }, - "activeColor": "{colors.solid.zinc.900}" - }, - "shadow": "{shadows.400}" - } - } - } - }, - "components": { - "accordion": { - "extend": { - "extHeader": { - "iconSize": "{controls.iconOnly.300}", - "gap": "{controls.gap.100}" - } - }, - "colorScheme": { - "light": { - "header": { - "background": "{transparent}", - "hoverBackground": "{transparent}", - "activeBackground": "{transparent}", - "activeHoverBackground": "{transparent}" - } - } - }, - "header": { - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "activeColor": "{text.color}", - "activeHoverColor": "{text.hoverColor}", - "borderColor": "{transparent}", - "padding": "{navigation.padding.300} 0 {navigation.padding.300} 0", - "fontWeight": "{fonts.fontWeight.bold}", - "borderRadius": "{borderRadius.none}", - "borderWidth": "{borderWidth.none}", - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "inset {focus.ring.shadow}" - }, - "toggleIcon": { - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "activeColor": "{text.color}", - "activeHoverColor": "{text.hoverColor}" - }, - "last": { - "bottomBorderRadius": "{borderRadius.none}", - "activeBottomBorderRadius": "{borderRadius.none}" - }, - "first": { - "borderWidth": "{borderWidth.none}", - "topBorderRadius": "{borderRadius.none}" - } - }, - "root": { - "transitionDuration": "{controls.transitionDuration}" - }, - "panel": { - "borderWidth": "{borderWidth.none} {borderWidth.none} {navigation.width.100} {borderWidth.none}", - "borderColor": "{form.borderColor}" - }, - "content": { - "borderWidth": "{content.borderWidth} {borderWidth.none} {borderWidth.none} {borderWidth.none}", - "borderColor": "{transparent}", - "background": "{transparent}", - "color": "{text.color}", - "padding": "0 {content.padding.400} {content.padding.300} {content.padding.400}" - } - }, - "autocomplete": { - "extend": { - "extOption": { - "gap": "{form.gap.200}" - }, - "extOptionGroup": { - "gap": "{form.gap.200}" - } - }, - "colorScheme": { - "light": { - "chip": { - "focusBackground": "{chip.colorScheme.light.root.background}", - "focusColor": "{chip.colorScheme.light.root.color}" - }, - "dropdown": { - "background": "{form.background}", - "hoverBackground": "{form.background}", - "activeBackground": "{form.background}", - "color": "{form.color}", - "hoverColor": "{form.color}", - "activeColor": "{form.color}" - } - } - }, - "root": { - "background": "{form.background}", - "disabledBackground": "{form.disabledBackground}", - "filledBackground": "{form.filledBackground}", - "filledHoverBackground": "{form.filledHoverBackground}", - "filledFocusBackground": "{form.filledFocusBackground}", - "borderColor": "{form.borderColor}", - "hoverBorderColor": "{form.hoverBorderSecondaryColor}", - "focusBorderColor": "{form.focusBorderSecondaryColor}", - "invalidBorderColor": "{form.invalidBorderColor}", - "color": "{form.color}", - "disabledColor": "{form.disabledColor}", - "placeholderColor": "{form.placeholderColor}", - "invalidPlaceholderColor": "{form.invalidPlaceholderColor}", - "shadow": "0", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.300}", - "borderRadius": "{form.borderRadius.200}", - "transitionDuration": "{form.transitionDuration}", - "focusRing": { - "width": "{focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "0" - } - }, - "overlay": { - "background": "{overlay.select.background}", - "borderColor": "{overlay.select.borderColor}", - "borderRadius": "{overlay.select.borderRadius}", - "color": "{overlay.select.color}", - "shadow": "{form.shadow}" - }, - "list": { - "padding": "{list.padding}", - "gap": "{list.gap.100}" - }, - "option": { - "focusBackground": "{list.option.focusBackground}", - "selectedBackground": "{list.option.selectedBackground}", - "selectedFocusBackground": "{list.option.selectedFocusBackground}", - "color": "{list.option.color}", - "focusColor": "{list.option.focusColor}", - "selectedColor": "{list.option.selectedColor}", - "selectedFocusColor": "{list.option.selectedFocusColor}", - "padding": "{list.option.padding}", - "borderRadius": "{list.option.borderRadius}" - }, - "optionGroup": { - "background": "{list.optionGroup.background}", - "color": "{list.optionGroup.color}", - "fontWeight": "{fonts.fontWeight.demibold}", - "padding": "{list.optionGroup.padding}" - }, - "dropdown": { - "width": "{form.width.300}", - "borderColor": "{form.borderColor}", - "hoverBorderColor": "{form.hoverBorderSecondaryColor}", - "activeBorderColor": "{form.focusBorderSecondaryColor}", - "borderRadius": "{form.borderRadius.200}", - "focusRing": { - "width": "{focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "0" - }, - "sm": { - "width": "{form.width.200}" - }, - "lg": { - "width": "{form.width.400}" - } - }, - "chip": { - "borderRadius": "{chip.root.borderRadius}" - }, - "emptyMessage": { - "padding": "{list.option.padding}" - } - }, - "avatar": { - "extend": { - "borderColor": "{form.borderColor}", - "circle": { - "borderRadius": "{media.borderRadius.max}" - } - }, - "root": { - "width": "{media.size.300}", - "height": "{media.size.300}", - "fontSize": "{fonts.fontSize.200}", - "color": "{text.extend.colorPrimaryStatic}", - "background": "{primary.color}", - "borderRadius": "{media.borderRadius.200}" - }, - "icon": { - "size": "{media.icon.size.100}" - }, - "group": { - "borderColor": "{content.background}", - "offset": "-{media.padding.300}" - }, - "lg": { - "width": "{media.size.400}", - "height": "{media.size.400}", - "fontSize": "{fonts.fontSize.300}", - "icon": { - "size": "{media.icon.size.100}" - }, - "group": { - "offset": "-{media.padding.300}" - } - }, - "xl": { - "width": "{media.size.500}", - "height": "{media.size.500}", - "icon": { - "size": "{media.icon.size.200}" - }, - "group": { - "offset": "-{media.padding.600}" - }, - "fontSize": "{fonts.fontSize.500}" - } - }, - "badge": { - "extend": { - "extDot": { - "success": { - "background": "{colors.solid.green.400}" - }, - "info": { - "background": "{info.400}" - }, - "warn": { - "background": "{warn.400}" - }, - "danger": { - "background": "{error.400}" - }, - "lg": { - "size": "{feedback.width.400}" - }, - "xlg": { - "size": "{feedback.width.500}" - } - }, - "ext": { - "padding": "0rem" - } - }, - "colorScheme": { - "light": { - "primary": { - "color": "{text.extend.colorPrimaryStatic}", - "background": "{primary.color}" - }, - "secondary": { - "color": "{text.extend.colorInverted}", - "background": "{surface.900}" - }, - "success": { - "color": "{success.900}", - "background": "{success.300}" - }, - "info": { - "color": "{info.900}", - "background": "{info.300}" - }, - "warn": { - "color": "{warn.900}", - "background": "{warn.300}" - }, - "danger": { - "color": "{error.900}", - "background": "{error.300}" - } - } - }, - "root": { - "borderRadius": "{feedback.width.300}", - "padding": "{feedback.padding.100}", - "fontSize": "{fonts.fontSize.100}", - "fontWeight": "{fonts.fontWeight.regular}", - "minWidth": "{feedback.width.600}", - "height": "{feedback.height.500}" - }, - "dot": { - "size": "{feedback.width.300}" - }, - "sm": { - "fontSize": "{fonts.fontSize.100}", - "minWidth": "0rem", - "height": "0rem" - }, - "lg": { - "fontSize": "{fonts.fontSize.100}", - "minWidth": "{feedback.width.650}", - "height": "{feedback.height.600}" - }, - "xl": { - "fontSize": "{fonts.fontSize.100}", - "minWidth": "{feedback.width.700}", - "height": "{feedback.height.650}" - } - }, - "breadcrumb": { - "extend": { - "hoverBackground": "{surface.100}", - "iconSize": "{navigation.size.300}", - "extItem": { - "padding": "{navigation.padding.100}" - } - }, - "root": { - "padding": "0rem", - "background": "{transparent}", - "gap": "0rem", - "transitionDuration": "{form.transitionDuration}" - }, - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" - }, - "item": { - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "borderRadius": "{navigation.borderRadius}", - "gap": "{navigation.item.gap}", - "icon": { - "color": "{text.color}", - "hoverColor": "{text.hoverColor}" - } - }, - "separator": { - "color": "{text.color}" - } - }, - "button": { - "extend": { - "disabledBackground": "{form.disabledBackground}", - "extOutlined": { - "danger": { - "focusBackground": "{transparent}" - }, - "warn": { - "focusBackground": "{transparent}" - }, - "info": { - "focusBackground": "{transparent}" - }, - "help": { - "focusBackground": "{transparent}" - }, - "success": { - "focusBackground": "{transparent}" - } - }, - "disabledColor": "{form.disabledColor}", - "extText": { - "danger": { - "focusBackground": "{transparent}" - }, - "warn": { - "focusBackground": "{transparent}" - }, - "info": { - "focusBackground": "{transparent}" - }, - "help": { - "focusBackground": "{transparent}" - }, - "success": { - "focusBackground": "{transparent}" - } - }, - "extLink": { - "background": "{transparent}", - "colorHover": "{text.hoverColor}", - "paddingX": "0rem", - "paddingY": "{controls.padding.100}", - "sm": { - "iconOnlyWidth": "{controls.iconOnly.200}" - }, - "base": { - "iconOnlyWidth": "{controls.iconOnly.400}" - }, - "lg": { - "iconOnlyWidth": "{controls.iconOnly.500}" - }, - "xlg": { - "iconOnlyWidth": "{controls.iconOnly.600}" - } - }, - "extSm": { - "borderRadius": "{controls.borderRadius.100}", - "gap": "{controls.gap.100}" - }, - "extLg": { - "borderRadius": "{controls.borderRadius.200}", - "gap": "{controls.gap.200}", - "height": "{controls.iconOnly.850}" - }, - "extXlg": { - "borderRadius": "{controls.borderRadius.200}", - "gap": "{controls.gap.200}", - "iconOnlyWidth": "{controls.iconOnly.900}", - "paddingX": "{controls.padding.600}", - "paddingY": "{controls.padding.500}", - "height": "{controls.iconOnly.900}" - }, - "borderWidth": "{controls.width.100}", - "iconSize": { - "sm": "{controls.iconOnly.200}", - "md": "{controls.iconOnly.300}", - "lg": "{controls.iconOnly.400}" - } - }, - "colorScheme": { - "light": { - "root": { - "primary": { - "background": "{primary.color}", - "hoverBackground": "{primary.hoverColor}", - "activeBackground": "{primary.activeColor}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{text.extend.colorPrimaryStatic}", - "hoverColor": "{text.extend.colorPrimaryStatic}", - "activeColor": "{text.extend.colorPrimaryStatic}", - "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" - } - }, - "secondary": { - "background": "{surface.900}", - "hoverBackground": "{surface.800}", - "activeBackground": "{surface.700}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{text.extend.colorInverted}", - "hoverColor": "{text.extend.colorInverted}", - "activeColor": "{text.extend.colorInverted}", - "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" - } - }, - "contrast": { - "background": "{surface.200}", - "hoverBackground": "{surface.300}", - "activeBackground": "{surface.400}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{text.color}", - "hoverColor": "{text.color}", - "activeColor": "{text.color}", - "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" - } - }, - "info": { - "background": "{info.300}", - "hoverBackground": "{info.400}", - "activeBackground": "{info.500}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{info.900}", - "hoverColor": "{info.950}", - "activeColor": "{info.900}" - }, - "success": { - "background": "{success.300}", - "hoverBackground": "{success.400}", - "activeBackground": "{success.500}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{success.900}", - "hoverColor": "{success.950}", - "activeColor": "{success.900}" - }, - "warn": { - "background": "{warn.300}", - "hoverBackground": "{warn.400}", - "activeBackground": "{warn.500}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{warn.900}", - "hoverColor": "{warn.950}", - "activeColor": "{warn.900}" - }, - "help": { - "background": "{help.300}", - "hoverBackground": "{help.400}", - "activeBackground": "{help.500}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{help.900}", - "hoverColor": "{help.950}", - "activeColor": "{help.900}" - }, - "danger": { - "background": "{error.300}", - "hoverBackground": "{error.400}", - "activeBackground": "{error.500}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{error.900}", - "hoverColor": "{error.950}", - "activeColor": "{error.900}" - } - }, - "outlined": { - "primary": { - "hoverBackground": "{primary.hoverBackground}", - "activeBackground": "{primary.activeBackground}", - "borderColor": "{primary.borderColor}", - "color": "{primary.color}" - }, - "success": { - "hoverBackground": "{success.100}", - "activeBackground": "{success.200}", - "borderColor": "{success.600}", - "color": "{success.600}" - }, - "info": { - "hoverBackground": "{info.100}", - "activeBackground": "{info.200}", - "borderColor": "{info.600}", - "color": "{info.600}" - }, - "warn": { - "hoverBackground": "{warn.100}", - "activeBackground": "{warn.200}", - "borderColor": "{warn.600}", - "color": "{warn.600}" - }, - "help": { - "hoverBackground": "{help.100}", - "activeBackground": "{help.200}", - "borderColor": "{help.600}", - "color": "{help.600}" - }, - "danger": { - "hoverBackground": "{error.100}", - "activeBackground": "{error.200}", - "borderColor": "{error.600}", - "color": "{error.600}" - } - }, - "text": { - "primary": { - "hoverBackground": "{surface.100}", - "activeBackground": "{surface.200}", - "color": "{text.color}" - }, - "success": { - "hoverBackground": "{success.100}", - "activeBackground": "{success.200}", - "color": "{success.600}" - }, - "info": { - "hoverBackground": "{info.100}", - "activeBackground": "{info.200}", - "color": "{info.600}" - }, - "warn": { - "hoverBackground": "{warn.100}", - "activeBackground": "{warn.200}", - "color": "{warn.600}" - }, - "help": { - "hoverBackground": "{help.100}", - "activeBackground": "{help.200}", - "color": "{help.600}" - }, - "danger": { - "hoverBackground": "{error.100}", - "activeBackground": "{error.200}", - "color": "{error.600}" - } - }, - "link": { - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "activeColor": "{text.mutedColor}" - } - }, - "dark": { - "root": { - "primary": { - "background": "{primary.color}", - "hoverBackground": "{primary.hoverColor}", - "activeBackground": "{primary.activeColor}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{text.extend.colorPrimaryStatic}", - "hoverColor": "{text.extend.colorPrimaryStatic}", - "activeColor": "{text.extend.colorPrimaryStatic}", - "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" - } - }, - "secondary": { - "background": "{surface.200}", - "hoverBackground": "{surface.300}", - "activeBackground": "{surface.400}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{surface.950}", - "hoverColor": "{surface.950}", - "activeColor": "{surface.950}", - "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" - } - }, - "contrast": { - "background": "{surface.950}", - "hoverBackground": "{surface.900}", - "activeBackground": "{surface.800}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{surface.0}", - "hoverColor": "{surface.0}", - "activeColor": "{surface.0}", - "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" - } - }, - "info": { - "background": "{info.500}", - "hoverBackground": "{info.400}", - "activeBackground": "{info.300}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{text.extend.colorPrimaryStatic}", - "hoverColor": "{text.extend.colorPrimaryStatic}", - "activeColor": "{text.extend.colorPrimaryStatic}" - }, - "success": { - "background": "{success.500}", - "hoverBackground": "{success.400}", - "activeBackground": "{success.300}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{text.extend.colorPrimaryStatic}", - "hoverColor": "{text.extend.colorPrimaryStatic}", - "activeColor": "{text.extend.colorPrimaryStatic}" - }, - "warn": { - "background": "{warn.500}", - "hoverBackground": "{warn.400}", - "activeBackground": "{warn.300}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{text.extend.colorPrimaryStatic}", - "hoverColor": "{text.extend.colorPrimaryStatic}", - "activeColor": "{text.extend.colorPrimaryStatic}" - }, - "help": { - "background": "{help.500}", - "hoverBackground": "{help.400}", - "activeBackground": "{help.300}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{text.extend.colorPrimaryStatic}", - "hoverColor": "{text.extend.colorPrimaryStatic}", - "activeColor": "{text.extend.colorPrimaryStatic}" - }, - "danger": { - "background": "{error.500}", - "hoverBackground": "{error.400}", - "activeBackground": "{error.300}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{text.extend.colorPrimaryStatic}", - "hoverColor": "{text.extend.colorPrimaryStatic}", - "activeColor": "{text.extend.colorPrimaryStatic}" - } - }, - "outlined": { - "primary": { - "hoverBackground": "{primary.hoverBackground}", - "activeBackground": "{primary.activeBackground}", - "borderColor": "{primary.borderColor}", - "color": "{primary.color}" - }, - "success": { - "hoverBackground": "{success.950}", - "activeBackground": "{success.900}", - "borderColor": "{success.500}", - "color": "{success.500}" - }, - "info": { - "hoverBackground": "{info.950}", - "activeBackground": "{info.900}", - "borderColor": "{info.500}", - "color": "{info.500}" - }, - "warn": { - "hoverBackground": "{warn.950}", - "activeBackground": "{warn.900}", - "borderColor": "{warn.500}", - "color": "{warn.500}" - }, - "help": { - "hoverBackground": "{help.950}", - "activeBackground": "{help.900}", - "borderColor": "{help.500}", - "color": "{help.500}" - }, - "danger": { - "hoverBackground": "{error.950}", - "activeBackground": "{error.900}", - "borderColor": "{error.500}", - "color": "{error.500}" - } - }, - "text": { - "primary": { - "hoverBackground": "{surface.800}", - "activeBackground": "{surface.700}", - "color": "{text.color}" - }, - "success": { - "hoverBackground": "{success.950}", - "activeBackground": "{success.900}", - "color": "{success.500}" - }, - "info": { - "hoverBackground": "{info.950}", - "activeBackground": "{info.900}", - "color": "{info.500}" - }, - "warn": { - "hoverBackground": "{warn.950}", - "activeBackground": "{warn.900}", - "color": "{warn.500}" - }, - "help": { - "hoverBackground": "{help.950}", - "activeBackground": "{help.900}", - "color": "{help.500}" - }, - "danger": { - "hoverBackground": "{error.950}", - "activeBackground": "{error.900}", - "color": "{error.500}" - } - }, - "link": { - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "activeColor": "{text.mutedColor}" - } - } - }, - "root": { - "borderRadius": "{controls.borderRadius.100}", - "roundedBorderRadius": "{controls.borderRadius.max}", - "gap": "{controls.gap.100}", - "fontSize": "{fonts.fontSize.200}", - "paddingX": "{controls.padding.400}", - "paddingY": "{controls.padding.200}", - "iconOnlyWidth": "{controls.iconOnly.700}", - "raisedShadow": "none", - "badgeSize": "{feedback.width.500}", - "transitionDuration": "{controls.transitionDuration}", - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "offset": "{focusRing.offset}" - }, - "sm": { - "fontSize": "{fonts.fontSize.200}", - "iconOnlyWidth": "{controls.iconOnly.600}", - "paddingX": "{controls.padding.300}", - "paddingY": "{controls.padding.200}" - }, - "lg": { - "fontSize": "{fonts.fontSize.500}", - "iconOnlyWidth": "{controls.iconOnly.850}", - "paddingX": "{controls.padding.600}", - "paddingY": "{controls.padding.400}" - }, - "label": { - "fontWeight": "{fonts.fontWeight.demibold}" - } - } - }, - "card": { - "extend": { - "borderColor": "{content.borderColor}", - "borderWidth": "{content.borderWidth}" - }, - "root": { - "background": "{content.background}", - "borderRadius": "{content.gap.400}", - "color": "{content.color}" - }, - "body": { - "padding": "{content.padding.300}", - "gap": "{content.gap.400}" - }, - "caption": { - "gap": "{content.gap.100}" - }, - "title": { - "fontSize": "{fonts.fontSize.400}", - "fontWeight": "{fonts.fontWeight.demibold}" - }, - "subtitle": { - "color": "{text.mutedColor}" - } - }, - "carousel": { - "colorScheme": { - "light": { - "indicator": { - "background": "{surface.300}", - "hoverBackground": "{surface.400}", - "activeBackground": "{surface.900}" - } - } - }, - "root": { - "transitionDuration": "{media.transitionDuration}" - }, - "content": { - "gap": "{media.gap.200}" - }, - "indicatorList": { - "padding": "{media.padding.400}", - "gap": "{media.gap.200}" - }, - "indicator": { - "width": "{controls.iconOnly.100}", - "height": "{controls.iconOnly.100}", - "borderRadius": "{media.borderRadius.400}", - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" - } - } - }, - "checkbox": { - "root": { - "borderRadius": "{form.borderRadius.100}", - "extend": { - "borderWidth": "{form.borderWidth}" - }, - "width": "{form.size.400}", - "height": "{form.size.400}", - "background": "{form.background}", - "checkedBackground": "{surface.900}", - "checkedHoverBackground": "{surface.800}", - "disabledBackground": "{form.disabledBackground}", - "filledBackground": "{form.filledBackground}", - "borderColor": "{form.borderColor}", - "hoverBorderColor": "{form.hoverBorderPrimaryColor}", - "focusBorderColor": "{form.focusBorderPrimaryColor}", - "checkedBorderColor": "{surface.900}", - "checkedHoverBorderColor": "{surface.800}", - "checkedFocusBorderColor": "{primary.color}", - "checkedDisabledBorderColor": "{form.borderColor}", - "invalidBorderColor": "{form.invalidBorderColor}", - "shadow": "0", - "focusRing": { - "focusRing": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" - }, - "sm": { - "width": "{form.size.200}", - "height": "{form.size.200}" - }, - "lg": { - "width": "{form.size.350}", - "height": "{form.size.350}" - }, - "transitionDuration": "{form.transitionDuration}" - }, - "icon": { - "size": "{form.icon.300}", - "color": "{form.color}", - "checkedColor": "{primary.contrastColor}", - "checkedHoverColor": "{primary.contrastColor}", - "disabledColor": "{form.disabledColor}", - "sm": { - "size": "{form.icon.200}" - }, - "lg": { - "size": "{form.icon.400}" - } - } - }, - "chip": { - "extend": { - "borderColor": "{transparent}", - "borderWidth": "{controls.width.100}" - }, - "root": { - "borderRadius": "{media.borderRadius.100}", - "paddingX": "{media.padding.200}", - "paddingY": "{media.padding.100}", - "gap": "{media.gap.200}", - "transitionDuration": "{media.transitionDuration}" - }, - "colorScheme": { - "light": { - "root": { - "background": "{surface.200}", - "color": "{text.color}" - }, - "icon": { - "color": "{text.color}" - }, - "removeIcon": { - "color": "{text.color}" - } - } - }, - "image": { - "width": "0rem", - "height": "0rem" - }, - "icon": { - "size": "{media.icon.size.100}" - }, - "removeIcon": { - "size": "{media.icon.size.100}", - "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "{focusRing.shadow}" - } - } - }, - "confirmdialog": { - "extend": { - "extIcon": { - "success": "{success.500}", - "info": "{info.500}", - "help": "{help.500}", - "warn": "{warn.500}", - "danger": "{error.500}" - } - }, - "icon": { - "size": "{overlay.icon.size.200}", - "color": "{overlay.modal.color}" - }, - "content": { - "gap": "0rem" - } - }, - "confirmpopup": { - "root": { - "background": "{overlay.popover.background}", - "color": "{overlay.popover.color}", - "shadow": "{overlay.popover.shadow}", - "gutter": "{overlay.gap.300}", - "arrowOffset": "{overlay.modal.padding.200}" - }, - "content": { - "padding": "{overlay.popover.padding.100}", - "gap": "{overlay.gap.400}" - }, - "icon": { - "size": "{overlay.icon.size.200}", - "color": "{overlay.popover.color}" - }, - "footer": { - "gap": "{overlay.gap.200}", - "padding": "0 {overlay.popover.padding} {overlay.popover.padding} {overlay.popover.padding}" - } - }, - "contextmenu": { - "root": { - "background": "{content.background}", - "color": "{content.color}", - "shadow": "{navigation.shadow}" - }, - "list": { - "padding": "{navigation.list.padding.md} 0", - "gap": "{navigation.list.gap}" - }, - "item": { - "padding": "{navigation.item.padding}", - "gap": "{navigation.item.gap}" - }, - "submenu": { - "mobileIndent": "{navigation.submenu.padding}" - } - }, - "datatable": { - "colorScheme": { - "light": { - "root": { - "color": "{text.color}", - "borderColor": "{content.borderColor}" - }, - "header": { - "background": "{surface.50}", - "color": "{text.color}" - }, - "headerCell": { - "background": "{surface.50}", - "hoverBackground": "{surface.100}", - "color": "{text.color}" - }, - "footer": { - "background": "{surface.100}", - "color": "{text.color}" - }, - "footerCell": { - "background": "{content.hoverBackground}", - "color": "{text.color}" - }, - "row": { - "stripedBackground": "{content.hoverBackground}" - }, - "bodyCell": { - "selectedBorderColor": "{content.borderColor}" - } - } - }, - "extended": { - "extHeaderCell": { - "selectedHoverBackground": "{surface.800}" - }, - "extRow": { - "selectedHoverBackground": "{surface.800}", - "stripedHoverBackground": "{surface.100}" - } - }, - "root": { - "transitionDuration": "{data.transitionDuration}" - }, - "header": { - "borderColor": "{content.borderColor}", - "borderWidth": "{data.width.100} 0 {data.width.100} 0", - "padding": "{data.padding.400}", - "sm": { - "padding": "{data.padding.200}" - }, - "lg": { - "padding": "{data.padding.500}" - } - }, - "headerCell": { - "selectedBackground": "{highlight.background}", - "borderColor": "{content.borderColor}", - "hoverColor": "{text.extend.colorInverted}", - "selectedColor": "{highlight.color}", - "gap": "{data.gap.200}", - "padding": "{data.padding.400}", - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "inset {focus.ring.shadow}" - }, - "sm": { - "padding": "{data.padding.200}" - }, - "lg": { - "padding": "{data.padding.500}" - } - }, - "columnTitle": { - "fontWeight": "{fonts.fontWeight.bold}" - }, - "row": { - "background": "{content.background}", - "hoverBackground": "{content.hoverBackground}", - "selectedBackground": "{highlight.background}", - "color": "{content.color}", - "hoverColor": "{content.hoverColor}", - "selectedColor": "{highlight.color}", - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "inset {focus.ring.shadow}" - } - }, - "bodyCell": { - "borderColor": "{content.borderColor}", - "padding": "{data.padding.400}", - "sm": { - "padding": "{data.padding.200}" - }, - "lg": { - "padding": "{data.padding.500}" - } - }, - "footerCell": { - "borderColor": "{content.borderColor}", - "padding": "{data.padding.400}", - "sm": { - "padding": "{data.padding.200}" - }, - "lg": { - "padding": "{data.padding.500}" - } - }, - "columnFooter": { - "fontWeight": "{fonts.fontWeight.bold}" - }, - "dropPoint": { - "color": "{highlight.background}" - }, - "footer": { - "borderColor": "{content.borderColor}", - "borderWidth": "0 0 {data.width.100} 0", - "padding": "{data.padding.400}", - "sm": { - "padding": "{data.padding.200}" - }, - "lg": { - "padding": "{data.padding.500}" - } - }, - "columnResizer": { - "width": "{data.width.300}" - }, - "resizeIndicator": { - "width": "{data.width.100}", - "color": "{highlight.background}" - }, - "sortIcon": { - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "size": "{data.icon.size.100}" - }, - "loadingIcon": { - "size": "{data.icon.size.500}" - }, - "rowToggleButton": { - "hoverBackground": "{content.hoverBackground}", - "selectedHoverBackground": "{content.hoverBackground}", - "color": "{text.color}", - "hoverColor": "{text.color}", - "selectedHoverColor": "{text.color}", - "size": "{data.icon.size.500}", - "borderRadius": "{content.borderRadius}", - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" - } - }, - "filter": { - "inlineGap": "{data.gap.200}", - "rule": { - "borderColor": "{content.borderColor}" - }, - "constraintList": { - "padding": "{list.padding}", - "gap": "{list.gap.100}" - }, - "constraint": { - "focusBackground": "{list.option.focusBackground}", - "selectedBackground": "{list.option.selectedBackground}", - "selectedFocusBackground": "{list.option.selectedFocusBackground}", - "color": "{list.option.color}", - "focusColor": "{list.option.focusColor}", - "selectedColor": "{list.option.selectedColor}", - "selectedFocusColor": "{list.option.selectedFocusColor}", - "padding": "{list.option.padding}", - "borderRadius": "{list.option.borderRadius}", - "separator": { - "borderColor": "{content.borderColor}" - } - }, - "overlaySelect": { - "background": "{overlay.select.background}", - "color": "{overlay.select.color}", - "borderColor": "{overlay.select.borderColor}", - "borderRadius": "{overlay.select.borderRadius}", - "shadow": "{overlay.select.shadow}" - }, - "overlayPopover": { - "background": "{overlay.popover.background}", - "color": "{overlay.popover.color}", - "borderColor": "{overlay.select.borderColor}", - "borderRadius": "{overlay.select.borderRadius}", - "shadow": "{overlay.popover.shadow}", - "padding": "{overlay.popover.padding.100}", - "gap": "{list.gap.100}" - } - }, - "paginatorTop": { - "borderColor": "{form.borderColor}", - "borderWidth": "0 0 {data.width.100} 0" - }, - "paginatorBottom": { - "borderWidth": "0 0 {data.width.100} 0", - "borderColor": "{content.borderColor}" - } - }, - "dataview": { - "root": { - "borderWidth": "{data.width.100}", - "borderRadius": "{data.borderRadius}", - "padding": "0rem", - "borderColor": "{content.borderColor}" - }, - "header": { - "borderWidth": "0 0 {data.width.100} 0", - "padding": "{data.padding.200} {data.padding.300}", - "borderRadius": "0 0 0 0", - "color": "{text.color}" - }, - "content": { - "background": "{content.background}", - "color": "{content.color}", - "borderColor": "{content.borderColor}", - "borderWidth": "0rem", - "padding": "0rem", - "borderRadius": "0" - }, - "footer": { - "background": "{surface.100}", - "color": "{text.color}", - "borderWidth": "{data.width.100} 0 0 0", - "padding": "{data.padding.200} {data.padding.300}", - "borderRadius": "0 0 0 0" - }, - "paginatorTop": { - "borderWidth": "0 0 {data.width.100} 0" - }, - "paginatorBottom": { - "borderWidth": "{data.width.100} 0 0 0" - } - }, - "datepicker": { - "extend": { - "extDate": { - "selectedHoverBackground": "{surface.800}" - }, - "extToday": { - "hoverBackground": "{content.hoverBackground}", - "borderColor": "{content.activeBorderColor}" - }, - "extTitle": { - "width": "{form.width.500}" - }, - "extTimePicker": { - "minWidth": "{form.width.400}", - "color": "{content.color}" - } - }, - "colorScheme": { - "light": { - "dropdown": { - "background": "{content.background}", - "hoverBackground": "{navigation.item.focusBackground}", - "activeBackground": "{navigation.item.activeBackground}", - "color": "{navigation.item.color}", - "hoverColor": "{navigation.item.focusColor}", - "activeColor": "{navigation.item.activeColor}" - }, - "today": { - "background": "{transparent}", - "color": "{text.extend.colorPrimaryStatic}" - } - } - }, - "panel": { - "background": "{content.background}", - "borderColor": "{content.borderColor}", - "color": "{content.color}", - "borderRadius": "{content.borderRadius}", - "shadow": "{overlay.popover.shadow}", - "padding": "0rem" - }, - "header": { - "background": "{content.background}", - "borderColor": "{content.borderColor}", - "color": "{content.color}", - "padding": "{overlay.popover.padding.100}" - }, - "title": { - "gap": "{form.gap.200}", - "fontWeight": "{fonts.fontWeight.bold}" - }, - "selectMonth": { - "hoverBackground": "{content.hoverBackground}", - "color": "{content.color}", - "hoverColor": "{content.hoverColor}", - "borderRadius": "{content.borderRadius}", - "padding": "{form.padding.200}" - }, - "inputIcon": { - "color": "{form.floatLabelColor}" - }, - "dropdown": { - "width": "{form.width.300}", - "borderColor": "{form.borderColor}", - "hoverBorderColor": "{form.borderColor}", - "activeBorderColor": "{form.borderColor}", - "borderRadius": "{form.borderRadius.200}", - "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "{focusRing.shadow}" - }, - "sm": { - "width": "0rem" - }, - "lg": { - "width": "0rem" - } - }, - "group": { - "borderColor": "{content.borderColor}", - "gap": "{overlay.popover.padding.100}" - }, - "selectYear": { - "hoverBackground": "{content.hoverBackground}", - "color": "{content.color}", - "hoverColor": "{content.hoverColor}", - "borderRadius": "{content.borderRadius}", - "padding": "{overlay.select.padding}" - }, - "dayView": { - "margin": "{overlay.popover.padding.100}" - }, - "weekDay": { - "padding": "{form.padding.100}", - "fontWeight": "{fonts.fontWeight.bold}", - "color": "{content.color}" - }, - "date": { - "hoverBackground": "{content.hoverBackground}", - "selectedBackground": "{highlight.background}", - "rangeSelectedBackground": "{list.option.focusBackground}", - "color": "{content.color}", - "hoverColor": "{content.color}", - "selectedColor": "{text.extend.colorInverted}", - "rangeSelectedColor": "{text.color}", - "width": "{form.size.500}", - "height": "{form.size.500}", - "borderRadius": "{form.borderRadius.100}", - "padding": "{form.padding.100}", - "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "{focusRing.shadow}" - } - }, - "monthView": { - "margin": "0 0 0 0" - }, - "month": { - "padding": "0", - "borderRadius": "0rem" - }, - "yearView": { - "margin": "0 0 0 0" - }, - "year": { - "padding": "0", - "borderRadius": "0rem" - }, - "buttonbar": { - "padding": "{overlay.popover.padding.100}", - "borderColor": "{content.borderColor}" - }, - "timePicker": { - "padding": "{form.padding.300}", - "borderColor": "{content.borderColor}", - "gap": "{form.gap.200}", - "buttonGap": "{form.gap.100}" - }, - "root": { - "transitionDuration": "{form.transitionDuration}" - } - }, - "dialog": { - "extend": { - "borderWidth": "{overlay.borderWidth}", - "backdrop": "{overlay.modal.backdrop}" - }, - "root": { - "background": "{overlay.modal.background}", - "borderColor": "{overlay.modal.borderColor}", - "color": "{overlay.modal.color}", - "borderRadius": "{overlay.modal.borderRadius}", - "shadow": "{overlay.popover.shadow}" - }, - "header": { - "padding": "{overlay.modal.padding.300} {overlay.modal.padding.300} 1rem {overlay.modal.padding.300}", - "gap": "{overlay.gap.200}" - }, - "title": { - "fontSize": "{fonts.fontSize.500}", - "fontWeight": "{fonts.fontWeight.demibold}" - }, - "content": { - "padding": "{content.padding.400}" - }, - "footer": { - "padding": "0 {overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.300}", - "gap": "{content.gap.200}" - } - }, - "divider": { - "colorScheme": { - "light": { - "content": { - "background": "{content.background}", - "color": "{text.mutedColor}" - }, - "borderColor": "{content.borderColor}" - } - }, - "extend": { - "content": { - "gap": "{content.gap.200}" - }, - "iconSize": "{media.icon.size.100}" - }, - "horizontal": { - "margin": "{content.padding.300} 0", - "padding": "0 {content.padding.300}", - "content": { - "padding": "0 {content.padding.200}" - } - }, - "vertical": { - "margin": "0 {content.padding.300}", - "padding": "{content.padding.300} 0", - "content": { - "padding": "{content.padding.200} 0" - } - } - }, - "drawer": { - "extend": { - "borderRadius": "{overlay.popover.borderRadius}", - "borderWidth": "{overlay.borderWidth}", - "width": "{overlay.width}", - "extHeader": { - "gap": "{overlay.gap.200}", - "borderColor": "{drawer.root.borderColor}" - }, - "padding": "{overlay.drawer.padding}", - "scale": "0.125rem", - "backdrop": "{overlay.modal.backdrop}" - }, - "root": { - "background": "{overlay.modal.background}", - "borderColor": "{overlay.modal.borderColor}", - "color": "{overlay.modal.color}", - "shadow": "{overlay.modal.shadow}", - "width": "{overlay.width}" - }, - "sm": { - "width": "{overlay.sm.width}" - }, - "lg": { - "width": "{overlay.lg.width}" - }, - "xlg": { - "width": "{overlay.xlg.width}" - }, - "header": { - "padding": "{overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.200} {overlay.modal.padding.300} " - }, - "title": { - "fontSize": "{fonts.fontSize.500}", - "fontWeight": "{fonts.fontWeight.demibold}" - }, - "content": { - "padding": "{overlay.modal.padding.300}" - }, - "footer": { - "padding": "0 {overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.300} " - } - }, - "fileupload": { - "extend": { - "extDragNdrop": { - "background": "{surface.0}", - "borderRadius": "{form.borderRadius.200}", - "iconSize": "{form.size.500}", - "padding": "{form.padding.400}", - "info": { - "gap": "{form.gap.100}" - } - }, - "extFile": { - "iconSize": "{form.size.350}" - }, - "extContent": { - "borderRadius": "{content.borderRadius}", - "highlightBorderDefault": "{form.borderColor}" - } - }, - "colorScheme": { - "light": { - "header": { - "background": "{surface.0}", - "color": "{text.color}" - } - } - }, - "root": { - "background": "{content.background}", - "borderColor": "{content.borderColor}", - "color": "{content.color}", - "borderRadius": "{content.borderRadius}", - "transitionDuration": "{form.transitionDuration}" - }, - "header": { - "borderColor": "{content.borderColor}", - "borderWidth": "0rem", - "padding": "0rem", - "borderRadius": "0rem", - "gap": "{content.gap.200}" - }, - "content": { - "highlightBorderColor": "{surface.900}", - "padding": "0rem", - "gap": "{content.gap.200}" - }, - "file": { - "padding": "{content.padding.200}", - "gap": "{content.gap.200}", - "borderColor": "{form.borderColor}", - "info": { - "gap": "{content.gap.100}" - } - }, - "fileList": { - "gap": "{content.gap.200}" - }, - "progressbar": { - "height": "{feedback.height.100}" - }, - "basic": { - "gap": "{content.gap.200}" - } - }, - "floatlabel": { - "extend": { - "height": "{form.size.800}", - "iconSize": "{form.icon.400}" - }, - "root": { - "color": "{form.floatLabelColor}", - "focusColor": "{form.floatLabelFocusColor}", - "activeColor": "{form.floatLabelActiveColor}", - "invalidColor": "{form.floatLabelInvalidColor}", - "transitionDuration": "{form.transitionDuration}", - "positionX": "{form.padding.300}", - "positionY": "{form.padding.300}", - "fontWeight": "{fonts.fontWeight.regular}", - "active": { - "fontSize": "{fonts.fontSize.100}", - "fontWeight": "{fonts.fontWeight.regular}" - } - }, - "over": { - "active": { - "top": "{form.padding.400}" - } - }, - "in": { - "input": { - "paddingTop": "{form.padding.700}", - "paddingBottom": "{form.padding.300}" - }, - "active": { - "top": "{form.padding.300}" - } - }, - "on": { - "borderRadius": "0rem", - "active": { - "padding": "0 {form.padding.100}", - "background": "{form.background}" - } - } - }, - "galleria": { - "extend": { - "backdrop": "{overlay.modal.backdrop}" - }, - "colorScheme": { - "light": { - "thumbnailContent": { - "background": "{surface.100}" - }, - "thumbnailNavButton": { - "hoverBackground": "{colors.alpha.white.200}", - "color": "{text.color}", - "hoverColor": "{text.hoverColor}" - }, - "indicatorButton": { - "background": "{surface.300}", - "hoverBackground": "{surface.400}" - } - } - }, - "root": { - "borderWidth": "{content.borderWidth}", - "borderColor": "{content.borderColor}", - "borderRadius": "{content.borderRadius}", - "transitionDuration": "{media.transitionDuration}" - }, - "navButton": { - "background": "{transparent}", - "hoverBackground": "{colors.alpha.white.200}", - "color": "{text.extend.colorInverted}", - "hoverColor": "{text.extend.colorInverted}", - "size": "{media.size.600}", - "gutter": "{media.gap.200}", - "prev": { - "borderRadius": "{navigation.item.borderRadius}" - }, - "next": { - "borderRadius": "{navigation.item.borderRadius}" - }, - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" - } - }, - "navIcon": { - "size": "{media.icon.size.300}" - }, - "thumbnailsContent": { - "padding": "{media.padding.100}" - }, - "thumbnailNavButton": { - "size": "{media.size.300}", - "borderRadius": "{content.borderRadius}", - "gutter": "{media.gap.200}", - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" - } - }, - "thumbnailNavButtonIcon": { - "size": "{media.icon.size.100}" - }, - "caption": { - "background": "{colors.alpha.white.500}", - "color": "{text.color}", - "padding": "{media.gap.200}" - }, - "indicatorList": { - "gap": "{media.gap.200}", - "padding": "{media.padding.400}" - }, - "indicatorButton": { - "width": "{media.size.200}", - "height": "{media.size.200}", - "activeBackground": "{surface.900}", - "borderRadius": "{content.borderRadius}", - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" - } - }, - "insetIndicatorList": { - "background": "{colors.alpha.black.500}" - }, - "insetIndicatorButton": { - "background": "{colors.alpha.white.100}", - "hoverBackground": "{colors.alpha.white.200}", - "activeBackground": "{colors.alpha.white.500}" - }, - "closeButton": { - "size": "{media.size.600}", - "gutter": "{media.gap.200}", - "background": "{colors.alpha.white.100}", - "hoverBackground": "{colors.alpha.white.200}", - "color": "{text.extend.colorInverted}", - "hoverColor": "{text.extend.colorInverted}", - "borderRadius": "{controls.borderRadius.200}", - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" - } - }, - "closeButtonIcon": { - "size": "{media.icon.size.300}" - } - }, - "inputgroup": { - "extend": { - "borderWidth": "{form.borderWidth}", - "iconSize": "{form.icon.300}" - }, - "colorScheme": { - "light": { - "addon": { - "background": "{form.background}", - "borderColor": "{form.borderColor}", - "color": "{text.mutedColor}" - } - } - }, - "addon": { - "borderRadius": "{form.borderRadius.200}", - "padding": "{form.padding.300}", - "minWidth": "{form.width.300}" - } - }, - "inputnumber": { - "extend": { - "borderWidth": "{form.borderWidth}", - "extButton": { - "height": "{form.size.600}", - "iconSize": "{form.icon.300}" - } - }, - "colorScheme": { - "light": { - "button": { - "background": "{content.background}", - "hoverBackground": "{content.hoverBackground}", - "activeBackground": "{transparent}", - "borderColor": "{form.borderColor}", - "hoverBorderColor": "{form.borderColor}", - "activeBorderColor": "{form.borderColor}", - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "activeColor": "{text.color}" - } - } - }, - "transitionDuration": { - "transitionDuration": "{form.transitionDuration}" - }, - "button": { - "width": "{form.size.600}", - "borderRadius": "{form.borderRadius.200}", - "verticalPadding": "{form.padding.300}" - } - }, - "inputotp": { - "extend": { - "height": "{form.size.600}", - "borderWidth": "{form.borderWidth}" - }, - "root": { - "gap": "{form.gap.200}" - }, - "input": { - "width": "{form.width.400}" - }, - "sm": { - "width": "0rem" - }, - "lg": { - "width": "0rem" - } - }, - "inputtext": { - "extend": { - "readonlyBackground": "{form.readonlyBackground}", - "iconSize": "{form.icon.300}", - "borderWidth": "{form.borderWidth}", - "extXlg": { - "fontSize": "{form.xlg.fontSize}", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.600}" - } - }, - "root": { - "background": "{form.background}", - "disabledBackground": "{form.disabledBackground}", - "filledBackground": "{form.filledBackground}", - "filledHoverBackground": "{form.filledHoverBackground}", - "filledFocusBackground": "{form.filledFocusBackground}", - "borderColor": "{form.borderColor}", - "hoverBorderColor": "{form.hoverBorderSecondaryColor}", - "focusBorderColor": "{form.focusBorderSecondaryColor}", - "invalidBorderColor": "{form.invalidBorderColor}", - "color": "{text.color}", - "disabledColor": "{form.disabledColor}", - "placeholderColor": "{form.placeholderColor}", - "invalidPlaceholderColor": "{form.invalidPlaceholderColor}", - "shadow": "0", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.300}", - "borderRadius": "{form.borderRadius.200}", - "transitionDuration": "{form.transitionDuration}", - "sm": { - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.200}" - }, - "lg": { - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.400}" - }, - "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "0" - } - } - }, - "listbox": { - "extend": { - "extOption": { - "label": { - "gap": "{list.gap.100}" - }, - "caption": { - "color": "{text.mutedColor}", - "stripedColor": "{text.mutedColor}" - }, - "gap": "{list.gap.200}" - } - }, - "colorScheme": { - "light": { - "option": { - "stripedBackground": "{surface.50}" - } - } - }, - "root": { - "background": "{form.background}", - "disabledBackground": "{form.disabledBackground}", - "borderColor": "{form.borderColor}", - "invalidBorderColor": "{form.invalidBorderColor}", - "color": "{form.color}", - "disabledColor": "{form.disabledColor}", - "shadow": "0", - "borderRadius": "{form.borderRadius.200}", - "transitionDuration": "{form.transitionDuration}" - }, - "list": { - "padding": "{list.padding}", - "gap": "{list.gap.100}", - "header": { - "padding": "{list.header.padding}" - } - }, - "option": { - "focusBackground": "{list.option.focusBackground}", - "selectedBackground": "{list.option.selectedBackground}", - "selectedFocusBackground": "{list.option.selectedFocusBackground}", - "color": "{list.option.color}", - "focusColor": "{list.option.focusColor}", - "selectedColor": "{list.option.selectedColor}", - "selectedFocusColor": "{list.option.selectedFocusColor}", - "padding": "{list.option.padding}", - "borderRadius": "{list.option.borderRadius}" - }, - "optionGroup": { - "background": "{list.optionGroup.background}", - "color": "{list.optionGroup.color}", - "fontWeight": "{fonts.fontWeight.regular}", - "padding": "{list.option.padding}" - }, - "checkmark": { - "color": "{list.option.color}", - "gutterStart": "-{list.gap.200}", - "gutterEnd": "{list.gap.200}" - }, - "emptyMessage": { - "padding": "{list.option.padding}" - } - }, - "megamenu": { - "extend": { - "extItem": { - "caption": { - "color": "{text.mutedColor}", - "gap": "{content.gap.100}" - } - }, - "iconSize": "{navigation.submenuIcon.size}" - }, - "colorScheme": { - "light": { - "root": { - "background": "{transparent}" - } - } - }, - "root": { - "borderColor": "{transparent}", - "borderRadius": "{content.borderRadius}", - "color": "{content.color}", - "gap": "{content.gap.100}", - "transitionDuration": "{form.transitionDuration}", - "verticalOrientation": { - "padding": "{navigation.list.padding.100}", - "gap": "{navigation.list.gap}" - }, - "horizontalOrientation": { - "padding": "{navigation.list.padding.100}", - "gap": "{navigation.list.gap}" - } - }, - "baseItem": { - "borderRadius": "{content.borderRadius}", - "padding": "{navigation.item.padding}" - }, - "item": { - "focusBackground": "{navigation.item.focusBackground}", - "activeBackground": "{navigation.item.activeBackground}", - "color": "{navigation.item.color}", - "focusColor": "{navigation.item.focusColor}", - "activeColor": "{navigation.item.activeColor}", - "padding": "{navigation.item.padding}", - "borderRadius": "{navigation.item.borderRadius}", - "gap": "{navigation.item.gap}", - "icon": { - "color": "{navigation.item.icon.color}", - "focusColor": "{navigation.item.icon.focusColor}", - "activeColor": "{navigation.item.icon.activeColor}" - } - }, - "overlay": { - "padding": "{content.padding.100}", - "background": "{content.background}", - "borderColor": "{content.borderColor}", - "borderRadius": "{content.borderRadius}", - "color": "{content.color}", - "shadow": "{navigation.shadow}", - "gap": "0rem" - }, - "submenu": { - "padding": "{navigation.list.padding.100}", - "gap": "{navigation.list.gap}" - }, - "submenuLabel": { - "fontWeight": "{navigation.submenuLabel.fontWeight}", - "padding": "{navigation.submenuLabel.padding}", - "background": "{navigation.submenuLabel.background}", - "color": "{navigation.submenuLabel.color}" - }, - "submenuIcon": { - "size": "{navigation.submenuIcon.size}", - "color": "{navigation.submenuIcon.color}", - "focusColor": "{navigation.submenuIcon.focusColor}", - "activeColor": "{navigation.submenuIcon.activeColor}" - }, - "separator": { - "borderColor": "{content.borderColor}" - }, - "mobileButton": { - "borderRadius": "{navigation.item.borderRadius}", - "size": "{controls.iconOnly.600}", - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "hoverBackground": "{content.hoverBackground}", - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" - } - } - }, - "menu": { - "extend": { - "paddingX": "0.25rem", - "iconSize": "{navigation.submenuIcon.size}", - "paddingY": "0.25rem", - "extItem": { - "caption": { - "gap": "{content.gap.100}" - }, - "activeBackground": "{navigation.item.activeBackground}", - "activeColor": "{navigation.item.activeColor}" - } - }, - "colorScheme": { - "light": { - "extend": { - "extItem": { - "caption": { - "color": "{text.mutedColor}" - }, - "icon": { - "activeColor": "{navigation.item.icon.activeColor}" - } - } - }, - "root": { - "background": "{content.background}", - "borderColor": "{content.borderColor}", - "color": "{content.color}" - }, - "item": { - "focusBackground": "{navigation.item.focusBackground}", - "color": "{navigation.item.color}", - "focusColor": "{navigation.item.focusColor}", - "icon": { - "color": "{navigation.item.icon.color}", - "focusColor": "{navigation.item.icon.focusColor}" - } - } - } - }, - "root": { - "borderRadius": "{content.borderRadius}", - "shadow": "{navigation.shadow}", - "transitionDuration": "{form.transitionDuration}" - }, - "list": { - "padding": "{navigation.list.padding.100}", - "gap": "{navigation.list.gap}" - }, - "submenuLabel": { - "padding": "{navigation.submenuLabel.padding}", - "fontWeight": "{fonts.fontWeight.regular}", - "background": "{navigation.submenuLabel.background}", - "color": "{navigation.submenuLabel.color}" - }, - "separator": { - "borderColor": "{content.borderColor}" - }, - "item": { - "padding": "{navigation.item.padding}", - "borderRadius": "{navigation.item.borderRadius}", - "gap": "{navigation.item.gap}" - } - }, - "menubar": { - "extend": { - "iconSize": "{navigation.submenuIcon.size}", - "extItem": { - "caption": { - "color": "{text.mutedColor}", - "gap": "{content.padding.100}" - } - }, - "extSubmenuLabel": { - "padding": "{navigation.submenuLabel.padding}", - "fontWeight": "{fonts.fontWeight.demibold}", - "background": "{navigation.submenuLabel.background}", - "color": "{navigation.submenuLabel.color}" - } - }, - "colorScheme": { - "light": { - "root": { - "background": "{transparent}" - } - } - }, - "root": { - "borderColor": "{transparent}", - "borderRadius": "{navigation.item.borderRadius}", - "color": "{content.color}", - "gap": "{content.padding.100}", - "padding": "{navigation.list.padding.100}", - "transitionDuration": "{form.transitionDuration}" - }, - "baseItem": { - "borderRadius": "{navigation.item.borderRadius}", - "padding": "{navigation.item.padding}" - }, - "item": { - "focusBackground": "{navigation.item.focusBackground}", - "activeBackground": "{navigation.item.activeBackground}", - "color": "{navigation.item.color}", - "focusColor": "{navigation.item.focusColor}", - "activeColor": "{navigation.item.activeColor}", - "padding": "{navigation.item.padding}", - "borderRadius": "{navigation.item.borderRadius}", - "gap": "{navigation.item.gap}", - "icon": { - "color": "{navigation.item.icon.color}", - "focusColor": "{navigation.item.icon.focusColor}", - "activeColor": "{navigation.item.icon.activeColor}" - } - }, - "submenu": { - "padding": "{navigation.list.padding.100}", - "gap": "{navigation.list.gap}", - "background": "{content.background}", - "borderColor": "{content.borderColor}", - "borderRadius": "{content.borderRadius}", - "shadow": "{navigation.shadow}", - "mobileIndent": "{navigation.padding.200}", - "icon": { - "size": "{navigation.submenuIcon.size}", - "color": "{navigation.submenuIcon.color}", - "focusColor": "{navigation.submenuIcon.focusColor}", - "activeColor": "{navigation.submenuIcon.activeColor}" - } - }, - "separator": { - "borderColor": "{content.borderColor}" - }, - "mobileButton": { - "borderRadius": "{navigation.item.borderRadius}", - "size": "{controls.iconOnly.600}", - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "hoverBackground": "{content.hoverBackground}", - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" - } - } - }, - "message": { - "extend": { - "width": "{messages.width}", - "extText": { - "gap": "{feedback.gap.100}" - }, - "extInfo": { - "color": "{info.500}", - "closeButton": { - "color": "{info.500}", - "borderColor": "{info.500}" - }, - "caption": { - "color": "{text.color}" - } - }, - "extAccentLine": { - "width": "{feedback.width.200}" - }, - "extCloseButton": { - "width": "{feedback.width.100}" - }, - "extSuccess": { - "color": "{success.500}", - "closeButton": { - "color": "{success.500}", - "borderColor": "{success.500}" - }, - "caption": { - "color": "{text.color}" - } - }, - "extWarn": { - "color": "{warn.500}", - "closeButton": { - "color": "{warn.500}", - "borderColor": "{warn.500}" - }, - "caption": { - "color": "{text.color}" - } - }, - "extError": { - "color": "{error.500}", - "closeButton": { - "color": "{error.500}", - "borderColor": "{error.500}" - }, - "caption": { - "color": "{text.color}" - } - } - }, - "colorScheme": { - "light": { - "success": { - "background": "{success.50}", - "borderColor": "{success.500}", - "color": "{text.color}", - "shadow": "none", - "outlined": { - "color": "{text.color}", - "borderColor": "{success.500}" - }, - "closeButton": { - "hoverBackground": "{success.200}", - "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" - } - }, - "simple": { - "color": "{text.color}" - } - }, - "outlined": { - "root": { - "borderWidth": "0rem" - }, - "closeButton": { - "hoverBackground": "{transparent}", - "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" - } - }, - "outlined": { - "color": "{transparent}", - "borderColor": "{transparent}" - }, - "simple": { - "color": "{transparent}" - } - }, - "simple": { - "content": { - "padding": "0rem" - } - }, - "warn": { - "background": "{warn.50}", - "borderColor": "{warn.500}", - "color": "{text.color}", - "shadow": "none", - "outlined": { - "color": "{text.color}", - "borderColor": "{warn.500}" - }, - "closeButton": { - "hoverBackground": "{warn.200}", - "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" - } - }, - "simple": { - "color": "{text.color}" - } - }, - "error": { - "background": "{error.50}", - "borderColor": "{error.500}", - "color": "{text.color}", - "shadow": "none", - "outlined": { - "color": "{text.color}", - "borderColor": "{error.500}" - }, - "closeButton": { - "hoverBackground": "{error.200}", - "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" - } - }, - "simple": { - "color": "{text.color}" - } - }, - "secondary": { - "borderColor": "{transparent}", - "shadow": "none", - "closeButton": { - "hoverBackground": "{transparent}", - "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" - } - }, - "simple": { - "color": "{transparent}" - }, - "outlined": { - "color": "{transparent}", - "borderColor": "{transparent}" - } - }, - "contrast": { - "borderColor": "{transparent}", - "shadow": "none", - "closeButton": { - "hoverBackground": "{transparent}", - "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" - } - }, - "simple": { - "color": "{transparent}" - }, - "outlined": { - "color": "{transparent}", - "borderColor": "{transparent}" - } - }, - "info": { - "background": "{info.50}", - "borderColor": "{info.500}", - "color": "{text.color}", - "shadow": "none", - "closeButton": { - "hoverBackground": "{info.200}", - "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" - } - }, - "outlined": { - "color": "{text.color}", - "borderColor": "{info.500}" - }, - "simple": { - "color": "{text.color}" - } - } - } - }, - "root": { - "borderRadius": "{content.borderRadius}", - "borderWidth": "{feedback.width.100}", - "transitionDuration": "{feedback.transitionDuration}" - }, - "content": { - "padding": "{feedback.padding.200}", - "gap": "{feedback.gap.400}", - "sm": { - "padding": "{feedback.padding.200}" - }, - "lg": { - "padding": "{feedback.padding.200}" - } - }, - "text": { - "fontSize": "{fonts.fontSize.300}", - "fontWeight": "{fonts.fontWeight.bold}", - "sm": { - "fontSize": "{fonts.fontSize.300}" - }, - "lg": { - "fontSize": "{fonts.fontSize.300}" - } - }, - "icon": { - "size": "{feedback.icon.size.500}", - "sm": { - "size": "{feedback.icon.size.500}" - }, - "lg": { - "size": "{feedback.icon.size.500}" - } - }, - "closeButton": { - "width": "{controls.iconOnly.600}", - "height": "{controls.iconOnly.600}", - "borderRadius": "{controls.borderRadius.100}", - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "offset": "{focusRing.offset}" - } - }, - "closeIcon": { - "size": "{feedback.icon.size.200}", - "sm": { - "size": "{feedback.icon.size.200}" - }, - "lg": { - "size": "{feedback.icon.size.200}" - } - } - }, - "metergroup": { - "extend": { - "extLabel": { - "color": "{text.mutedColor}" - } - }, - "root": { - "borderRadius": "{content.borderRadius}", - "gap": "{feedback.gap.300}" - }, - "meters": { - "size": "{feedback.height.100}", - "background": "{content.borderColor}" - }, - "label": { - "gap": "{feedback.gap.100}" - }, - "labelMarker": { - "size": "{feedback.icon.size.100}" - }, - "labelIcon": { - "size": "{feedback.icon.size.200}" - }, - "labelList": { - "verticalGap": "{feedback.gap.200}", - "horizontalGap": "{feedback.gap.300}" - } - }, - "multiselect": { - "colorScheme": { - "overlay": { - "background": "{overlay.select.background}", - "borderColor": "{overlay.select.borderColor}", - "color": "{overlay.select.color}" - }, - "option": { - "focusBackground": "{list.option.focusBackground}", - "selectedBackground": "{list.option.selectedBackground}", - "selectedFocusBackground": "{list.option.selectedFocusBackground}", - "color": "{list.option.color}", - "focusColor": "{list.option.focusColor}", - "selectedColor": "{list.option.selectedColor}", - "selectedFocusColor": "{list.option.selectedFocusColor}" - }, - "root": { - "background": "{form.background}", - "disabledBackground": "{form.disabledBackground}", - "filledBackground": "{form.filledBackground}", - "filledHoverBackground": "{form.filledHoverBackground}", - "filledFocusBackground": "{form.filledFocusBackground}", - "borderColor": "{form.borderColor}", - "hoverBorderColor": "{form.hoverBorderSecondaryColor}", - "focusBorderColor": "{form.focusBorderSecondaryColor}", - "invalidBorderColor": "{form.invalidBorderColor}", - "color": "{form.color}", - "disabledColor": "{form.disabledColor}", - "placeholderColor": "{form.placeholderColor}", - "invalidPlaceholderColor": "{form.invalidPlaceholderColor}", - "focusRing": { - "color": "{form.focusRing.color}" - } - }, - "dropdown": { - "color": "{form.floatLabelColor}" - }, - "optionGroup": { - "background": "{list.optionGroup.background}", - "color": "{list.optionGroup.color}" - }, - "clearIcon": { - "color": "{form.floatLabelColor}" - } - }, - "extend": { - "paddingX": "0.3571rem", - "paddingY": "0.3571rem", - "borderWidth": "{form.borderWidth}", - "iconSize": "{form.icon.300}", - "width": "{form.width}", - "readonlyBackground": "{form.readonlyBackground}" - }, - "root": { - "shadow": "0", - "paddingX": "{form.paddingX}", - "paddingY": "{form.paddingY}", - "borderRadius": "{form.borderRadius.200}", - "transitionDuration": "{form.transitionDuration}", - "sm": { - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{form.padding.200}", - "paddingY": "{form.padding.200}" - }, - "lg": { - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{form.padding.400}", - "paddingY": "{form.padding.400}" - }, - "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "offset": "{form.focusRing.offset}", - "shadow": "0" - } - }, - "dropdown": { - "width": "{form.width.300}" - }, - "overlay": { - "borderRadius": "{overlay.select.borderRadius}", - "shadow": "{overlay.select.shadow}" - }, - "list": { - "padding": "{list.padding}", - "header": { - "padding": "{list.header.padding}" - }, - "gap": "{list.gap.100}" - }, - "chip": { - "borderRadius": "{form.borderRadius.100}" - }, - "option": { - "padding": "{list.option.padding}", - "borderRadius": "{list.option.borderRadius}", - "gap": "{list.gap.200}" - }, - "optionGroup": { - "fontWeight": "{fonts.fontWeight.demibold}", - "padding": "{list.optionGroup.padding}" - }, - "emptyMessage": { - "padding": "{list.option.padding}" - } - }, - "paginator": { - "root": { - "padding": "0 {data.padding.200}", - "gap": "{data.gap.200}", - "borderRadius": "{content.borderRadius}", - "background": "{transparent}", - "color": "{content.color}", - "transitionDuration": "{data.transitionDuration}" - }, - "currentPageReport": { - "color": "{text.mutedColor}" - }, - "navButton": { - "background": "{transparent}", - "hoverBackground": "{content.hoverBackground}", - "selectedBackground": "{highlight.background}", - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "selectedColor": "{text.extend.colorInverted}", - "width": "{data.icon.size.700}", - "height": "{data.icon.size.700}", - "borderRadius": "{content.borderRadius}", - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "focus": "{focusRing.shadow}" - } - }, - "jumpToPageInput": { - "maxWidth": "{data.width.400}" - } - }, - "panelmenu": { - "extend": { - "extPanel": { - "gap": "{content.gap.100}" - }, - "iconSize": "{navigation.submenuIcon.size}", - "extItem": { - "activeBackground": "{navigation.item.activeBackground}", - "activeColor": "{navigation.item.activeColor}", - "caption": { - "color": "{text.mutedColor}", - "gap": "{content.gap.100}" - } - } - }, - "root": { - "gap": "{content.gap.100}", - "transitionDuration": "{form.transitionDuration}" - }, - "panel": { - "background": "{transparent}", - "borderColor": "{transparent}", - "borderWidth": "{navigation.width.100}", - "color": "{content.color}", - "padding": "{content.padding.100}", - "borderRadius": "{content.borderRadius}", - "first": { - "borderWidth": "{navigation.width.100} {navigation.width.100} 0 {navigation.width.100}", - "topBorderRadius": "{content.borderRadius}" - }, - "last": { - "borderWidth": "0 {navigation.width.100} {navigation.width.100} {navigation.width.100}", - "topBorderRadius": "{content.borderRadius}" - } - }, - "item": { - "focusBackground": "{navigation.item.focusBackground}", - "color": "{navigation.item.color}", - "focusColor": "{navigation.item.focusColor}", - "gap": "{navigation.item.gap}", - "padding": "{navigation.item.padding}", - "borderRadius": "{navigation.item.borderRadius}", - "icon": { - "color": "{navigation.item.icon.color}", - "focusColor": "{navigation.item.icon.focusColor}" - } - }, - "submenu": { - "indent": "{navigation.padding.400}" - }, - "separator": { - "borderColor": "{content.borderColor}" - }, - "submenuIcon": { - "color": "{navigation.submenuIcon.color}", - "focusColor": "{navigation.submenuIcon.focusColor}" - } - }, - "password": { - "extend": { - "borderWidth": "{form.borderWidth}" - }, - "colorScheme": { - "light": { - "strength": { - "weakBackground": "{error.500}", - "mediumBackground": "{warn.500}", - "strongBackground": "{success.600}" - }, - "icon": { - "color": "{form.placeholderColor}" - } - }, - "dark": { - "strength": { - "weakBackground": "{error.500}", - "mediumBackground": "{warn.500}", - "strongBackground": "{success.600}" - }, - "icon": { - "color": "{form.placeholderColor}" - } - } - }, - "meter": { - "background": "{content.borderColor}", - "borderRadius": "{content.borderRadius}", - "height": "{feedback.height.100}" - }, - "overlay": { - "background": "{overlay.popover.background}", - "borderColor": "{overlay.popover.borderColor}", - "borderRadius": "{overlay.popover.borderRadius}", - "color": "{overlay.popover.color}", - "padding": "{overlay.popover.padding.100}", - "shadow": "{overlay.popover.shadow}" - }, - "content": { - "gap": "{content.gap.200}" - } - }, - "popover": { - "extend": { - "borderWidth": "{overlay.borderWidth}", - "arrow": { - "width": "{overlay.popover.width.200}", - "height": "{overlay.popover.width.100}" - } - }, - "root": { - "background": "{overlay.popover.background}", - "borderColor": "{overlay.popover.borderColor}", - "color": "{overlay.popover.color}", - "borderRadius": "{overlay.popover.borderRadius}", - "shadow": "{overlay.popover.shadow}", - "gutter": "{overlay.gap.300}", - "arrowOffset": "{overlay.popover.padding.200}", - "arrowLeft": "0px" - }, - "content": { - "padding": "{overlay.popover.padding.100}" - } - }, - "progressbar": { - "label": { - "color": "{text.extend.colorPrimaryStatic}", - "fontSize": "{fonts.fontSize.100}", - "fontWeight": "{fonts.fontWeight.regular}" - }, - "root": { - "background": "{content.borderColor}", - "borderRadius": "{content.borderRadius}", - "height": "{feedback.height.300}" - }, - "value": { - "background": "{primary.color}" - } - }, - "progressspinner": { - "extend": { - "small": "{feedback.width.500}", - "medium": "{feedback.width.700}", - "large": "{feedback.width.800}", - "xlarge": "{feedback.width.900}" - }, - "colorScheme": { - "light": { - "root": { - "colorOne": "{success.500}", - "colorTwo": "{info.500}", - "colorThree": "{error.500}", - "colorFour": "{warn.500}" - } - } - }, - "root": { - "borderWidth": "{feedback.width.200}" - } - }, - "radiobutton": { - "root": { - "width": "{form.size.400}", - "height": "{form.size.400}", - "background": "{form.background}", - "checkedBackground": "{surface.900}", - "checkedHoverBackground": "{surface.800}", - "disabledBackground": "{form.disabledBackground}", - "filledBackground": "{form.filledBackground}", - "borderColor": "{form.borderColor}", - "hoverBorderColor": "{form.hoverBorderPrimaryColor}", - "focusBorderColor": "{form.borderColor}", - "checkedBorderColor": "{surface.900}", - "checkedHoverBorderColor": "{form.hoverBorderPrimaryColor}", - "checkedFocusBorderColor": "{form.focusBorderPrimaryColor}", - "checkedDisabledBorderColor": "{form.borderColor}", - "invalidBorderColor": "{form.invalidBorderColor}", - "shadow": "0", - "transitionDuration": "{form.transitionDuration}" - }, - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" - }, - "sm": { - "width": "{form.size.300}", - "height": "{form.size.300}" - }, - "lg": { - "width": "{form.size.350}", - "height": "{form.size.350}" - }, - "icon": { - "size": "0.7rem", - "checkedColor": "{text.extend.colorInverted}", - "checkedHoverColor": "{text.extend.colorInverted}", - "disabledColor": "{text.mutedColor}", - "sm": { - "size": "{form.icon.100}" - }, - "lg": { - "size": "{form.icon.300}" - } - } - }, - "rating": { - "root": { - "gap": "{form.gap.200}", - "transitionDuration": "{form.transitionDuration}" - }, - "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "{focusRing.shadow}" - }, - "icon": { - "size": "{form.icon.500}", - "color": "{surface.500}", - "hoverColor": "{warn.500}", - "activeColor": "{warn.500}" - } - }, - "ripple": { - "colorScheme": { - "light": { - "root": { - "background": "rgba(255, 255, 255, 0.0100)" - } - } - } - }, - "scrollpanel": { - "colorScheme": { - "light": { - "bar": { - "background": "{surface.300}" - } - } - }, - "root": { - "transitionDuration": "{media.transitionDuration}" - }, - "bar": { - "size": "{media.size.200}", - "borderRadius": "{media.borderRadius.100}", - "focusRing": { - "width": "0rem", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" - } - } - }, - "select": { - "extend": { - "extOption": { - "background": "{list.option.background}", - "gap": "{list.gap.200}" - }, - "extOptionGroup": { - "gap": "{list.gap.200}" - }, - "readonlyBackground": "{form.readonlyBackground}", - "borderWidth": "{form.borderWidth}", - "iconSize": "{form.icon.300}" - }, - "root": { - "background": "{form.background}", - "disabledBackground": "{form.disabledBackground}", - "filledBackground": "{form.filledBackground}", - "filledHoverBackground": "{form.filledHoverBackground}", - "filledFocusBackground": "{form.filledFocusBackground}", - "borderColor": "{form.borderColor}", - "hoverBorderColor": "{form.hoverBorderSecondaryColor}", - "focusBorderColor": "{form.focusBorderSecondaryColor}", - "invalidBorderColor": "{form.invalidBorderColor}", - "color": "{text.color}", - "disabledColor": "{form.disabledColor}", - "placeholderColor": "{form.placeholderColor}", - "invalidPlaceholderColor": "{form.invalidPlaceholderColor}", - "shadow": "0", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.300}", - "borderRadius": "{form.borderRadius.200}", - "transitionDuration": "{form.transitionDuration}", - "sm": { - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.200}" - }, - "lg": { - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.400}" - }, - "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "0" - } - }, - "dropdown": { - "width": "{form.width.300}", - "color": "{form.iconColor}" - }, - "overlay": { - "background": "{overlay.select.background}", - "borderColor": "{overlay.select.borderColor}", - "borderRadius": "{overlay.select.borderRadius}", - "color": "{overlay.select.color}", - "shadow": "{overlay.select.shadow}" - }, - "list": { - "padding": "{list.padding}", - "gap": "{list.gap.100}", - "header": { - "padding": "{list.header.padding}" - } - }, - "option": { - "focusBackground": "{list.option.focusBackground}", - "selectedBackground": "{list.option.selectedBackground}", - "selectedFocusBackground": "{list.option.selectedFocusBackground}", - "color": "{list.option.color}", - "focusColor": "{list.option.focusColor}", - "selectedColor": "{list.option.selectedColor}", - "selectedFocusColor": "{list.option.selectedFocusColor}", - "padding": "{list.option.padding}", - "borderRadius": "{list.option.borderRadius}" - }, - "optionGroup": { - "background": "{list.optionGroup.background}", - "color": "{list.optionGroup.color}", - "fontWeight": "{fonts.fontWeight.regular}", - "padding": "{list.option.padding}" - }, - "clearIcon": { - "color": "{form.iconColor}" - }, - "checkmark": { - "color": "{list.option.color}", - "gutterStart": "-{form.padding.200}", - "gutterEnd": "{form.padding.200}" - }, - "emptyMessage": { - "padding": "{list.option.padding}" - } - }, - "selectbutton": { - "extend": { - "gap": "{form.gap.100}", - "paddingX": "{controls.padding.100}", - "paddingY": "{controls.padding.100}", - "checkedBackground": "{form.background}", - "iconSize": { - "sm": "{controls.iconOnly.200}", - "md": "{controls.iconOnly.300}", - "lg": "{controls.iconOnly.400}", - "xlg": "{controls.iconOnly.500}" - }, - "checkedBorderColor": "{form.background}", - "checkedColor": "{form.color}", - "ext": { - "borderRadius": "{borderRadius.200}" - } - }, - "colorScheme": { - "light": { - "root": { - "invalidBorderColor": "{form.invalidBorderColor}" - }, - "extend": { - "background": "{surface.200}" - } - } - }, - "root": { - "borderRadius": "{form.borderRadius.200}" - } - }, - "skeleton": { - "extend": { - "minWidth": "{feedback.width.700}", - "height": "{feedback.height.650}" - }, - "colorScheme": { - "light": { - "root": { - "background": "{surface.200}", - "animationBackground": "{surface.100}" - } - } - }, - "root": { - "borderRadius": "{content.borderRadius}" - } - }, - "slider": { - "colorScheme": { - "handle": { - "content": { - "background": "{surface.0}" - } - } - }, - "root": { - "transitionDuration": "{form.transitionDuration}" - }, - "track": { - "background": "{content.borderColor}", - "borderRadius": "{content.borderRadius}", - "size": "{form.size.150}" - }, - "range": { - "background": "{surface.900}" - }, - "handle": { - "width": "{form.size.350}", - "height": "{form.size.350}", - "borderRadius": "{form.borderRadius.300}", - "background": "{surface.900}", - "hoverBackground": "{surface.900}", - "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "{focusRing.shadow}" - }, - "content": { - "borderRadius": "{form.borderRadius.300}", - "hoverBackground": "{surface.900}", - "width": "{form.size.250}", - "height": "{form.size.250}", - "shadow": "none" - } - } - }, - "splitter": { - "colorScheme": { - "light": { - "handle": { - "background": "{surface.900}" - } - } - }, - "gutter": { - "background": "{surface.100}" - }, - "root": { - "background": "{content.background}", - "borderColor": "{content.borderColor}", - "color": "{content.color}", - "transitionDuration": "{controls.transitionDuration}" - }, - "handle": { - "size": "{form.size.150}", - "borderRadius": "{content.borderRadius}", - "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "{focusRing.shadow}" - } - } - }, - "stepper": { - "extend": { - "extCaption": { - "gap": "{feedback.gap.100}" - }, - "extStepNumber": { - "invalidBackground": "{error.400}", - "invalidColor": "{error.900}", - "invalidBorderColor": "{error.400}", - "borderWidth": "{feedback.width.100}", - "iconSize": "{feedback.icon.size.300}" - } - }, - "root": { - "transitionDuration": "{feedback.transitionDuration}" - }, - "separator": { - "background": "{content.borderColor}", - "activeBackground": "{form.focusBorderPrimaryColor}", - "margin": "0 0 0 1.625rem", - "size": "{form.size.100}" - }, - "step": { - "padding": "{feedback.padding.100}", - "gap": "{feedback.gap.200}" - }, - "stepHeader": { - "padding": "0rem", - "borderRadius": "0rem", - "gap": "{feedback.gap.200}", - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" - } - }, - "stepTitle": { - "color": "{text.color}", - "activeColor": "{text.color}", - "fontWeight": "{fonts.fontWeight.regular}" - }, - "stepNumber": { - "background": "{content.background}", - "activeBackground": "{primary.color}", - "borderColor": "{content.borderColor}", - "activeBorderColor": "{primary.color}", - "color": "{text.color}", - "activeColor": "{text.extend.colorPrimaryStatic}", - "size": "{form.size.400}", - "fontSize": "{fonts.fontSize.300}", - "fontWeight": "{fonts.fontWeight.bold}", - "borderRadius": "{form.borderRadius.300}", - "shadow": "none" - }, - "steppanels": { - "padding": "{feedback.padding.200}" - }, - "steppanel": { - "background": "{content.background}", - "color": "{content.color}", - "padding": "0rem", - "indent": "0rem" - } - }, - "steps": { - "itemLink": { - "gap": "{form.gap.200}" - }, - "itemLabel": { - "fontWeight": "{fonts.fontWeight.regular}" - }, - "itemNumber": { - "background": "{content.background}", - "size": "{form.size.500}", - "fontSize": "{fonts.fontSize.300}", - "fontWeight": "{fonts.fontWeight.bold}", - "borderRadius": "{form.borderRadius.300}", - "shadow": "none" - } - }, - "tabs": { - "colorScheme": { - "light": { - "navButton": { - "shadow": "none" - }, - "tab": { - "background": "{transparent}", - "hoverBackground": "{transparent}", - "activeBackground": "{transparent}" - } - } - }, - "root": { - "transitionDuration": "{data.transitionDuration}" - }, - "tablist": { - "borderWidth": "0 0 {data.width.100} 0", - "background": "{transparent}", - "borderColor": "{content.borderColor}" - }, - "tab": { - "borderWidth": "0", - "borderColor": "{content.borderColor}", - "hoverBorderColor": "{content.borderColor}", - "activeBorderColor": "{content.activeBorderColor}", - "color": "{text.mutedColor}", - "hoverColor": "{text.color}", - "activeColor": "{text.color}", - "padding": "{content.padding.300}", - "fontWeight": "{fonts.fontWeight.demibold}", - "margin": "0", - "gap": "{content.gap.200}", - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" - } - }, - "tabpanel": { - "background": "{transparent}", - "color": "{text.color}", - "padding": "{spacing.4x}", - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" - } - }, - "navButton": { - "background": "{content.background}", - "color": "{content.color}", - "hoverColor": "{content.hoverColor}", - "width": "{controls.iconOnly.400}", - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" - } - }, - "activeBar": { - "height": "0.18rem", - "bottom": "-0.18rem", - "background": "{content.color}" - } - }, - "toast": { - "extend": { - "extInfo": { - "color": "{info.500}", - "closeButton": { - "color": "{info.500}", - "borderColor": "{info.500}" - }, - "caption": { - "color": "{text.color}" - } - }, - "extAccentLine": { - "width": "{feedback.width.200}" - }, - "extCloseButton": { - "width": "{feedback.width.100}" - }, - "extSuccess": { - "color": "{success.500}", - "closeButton": { - "color": "{success.500}", - "borderColor": "{success.500}" - }, - "caption": { - "color": "{text.color}" - } - }, - "extWarn": { - "color": "{warn.500}", - "closeButton": { - "color": "{warn.500}", - "borderColor": "{warn.500}" - }, - "caption": { - "color": "{text.color}" - } - }, - "extError": { - "color": "{error.500}", - "closeButton": { - "color": "{error.500}", - "borderColor": "{error.500}" - }, - "caption": { - "color": "{text.color}" - } - } - }, - "colorScheme": { - "light": { - "info": { - "background": "{info.50}", - "borderColor": "{info.500}", - "color": "{text.color}", - "detailColor": "{text.color}", - "shadow": "{overlay.popover.shadow}", - "closeButton": { - "hoverBackground": "{info.200}", - "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" - } - } - }, - "success": { - "background": "{success.50}", - "borderColor": "{success.500}", - "color": "{text.color}", - "detailColor": "{text.color}", - "shadow": "{overlay.popover.shadow}", - "closeButton": { - "hoverBackground": "{success.200}", - "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" - } - } - }, - "warn": { - "background": "{warn.50}", - "borderColor": "{warn.500}", - "color": "{text.color}", - "detailColor": "{text.color}", - "shadow": "{overlay.popover.shadow}", - "closeButton": { - "hoverBackground": "{warn.200}", - "focusRing": { - "color": "{focusRing.color}", - "shadow": "none" - } - } - }, - "error": { - "background": "{error.50}", - "borderColor": "{error.500}", - "color": "{text.color}", - "detailColor": "{text.color}", - "shadow": "{overlay.popover.shadow}", - "closeButton": { - "hoverBackground": "{error.200}", - "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" - } - } - }, - "secondary": { - "shadow": "{overlay.popover.shadow}" - }, - "contrast": { - "shadow": "{overlay.popover.shadow}" - } - } - }, - "root": { - "width": "{messages.width}", - "borderWidth": "{feedback.width.100}", - "borderRadius": "{content.borderRadius}", - "transitionDuration": "{feedback.transitionDuration}" - }, - "icon": { - "size": "{feedback.icon.size.500}" - }, - "content": { - "padding": "{feedback.padding.200}", - "gap": "{feedback.gap.400}" - }, - "text": { - "gap": "{feedback.gap.100}" - }, - "summary": { - "fontWeight": "{fonts.fontWeight.bold}", - "fontSize": "{fonts.fontSize.300}" - }, - "detail": { - "fontWeight": "{fonts.fontWeight.regular}", - "fontSize": "{fonts.fontSize.200}" - }, - "closeButton": { - "width": "{feedback.icon.size.400}", - "height": "{feedback.icon.size.400}", - "borderRadius": "{controls.borderRadius.100}", - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "offset": "{focusRing.offset}" - } - }, - "closeIcon": { - "size": "{feedback.icon.size.200}" - } - }, - "tag": { - "colorScheme": { - "light": { - "primary": { - "background": "{primary.selectedBackground}", - "color": "{text.color}" - }, - "secondary": { - "background": "{surface.200}", - "color": "{text.color}" - }, - "success": { - "background": "{success.400}", - "color": "{success.900}" - }, - "info": { - "background": "{info.300}", - "color": "{info.900}" - }, - "warn": { - "background": "{warn.300}", - "color": "{warn.900}" - }, - "danger": { - "background": "{error.300}", - "color": "{error.900}" - } - } - }, - "root": { - "fontSize": "{fonts.fontSize.100}", - "fontWeight": "{fonts.fontWeight.regular}", - "padding": "{media.padding.100} {media.padding.200}", - "gap": "{media.gap.100}", - "borderRadius": "{media.size.200}", - "roundedBorderRadius": "{media.borderRadius.400}" - }, - "icon": { - "size": "{media.icon.size.100}" - } - }, - "textarea": { - "extend": { - "readonlyBackground": "{form.readonlyBackground}", - "borderWidth": "{form.borderWidth}", - "iconSize": "{form.icon.300}", - "minHeight": "{form.size.900}", - "extXlg": { - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.500}" - } - }, - "root": { - "background": "{form.background}", - "disabledBackground": "{form.disabledBackground}", - "filledBackground": "{form.filledBackground}", - "filledHoverBackground": "{form.filledHoverBackground}", - "filledFocusBackground": "{form.filledFocusBackground}", - "borderColor": "{form.borderColor}", - "hoverBorderColor": "{form.hoverBorderSecondaryColor}", - "focusBorderColor": "{form.focusBorderSecondaryColor}", - "invalidBorderColor": "{form.invalidBorderColor}", - "color": "{form.color}", - "disabledColor": "{form.disabledColor}", - "placeholderColor": "{form.placeholderColor}", - "invalidPlaceholderColor": "{form.invalidPlaceholderColor}", - "shadow": "0", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.300}", - "borderRadius": "{form.borderRadius.200}", - "transitionDuration": "{form.transitionDuration}", - "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "0" - }, - "sm": { - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.200}" - }, - "lg": { - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.400}" - } - } - }, - "tieredmenu": { - "extend": { - "extSubmenu": { - "borderColor": "{content.borderColor}", - "background": "{content.background}" - }, - "iconSize": "{navigation.submenuIcon.size}", - "extItem": { - "caption": { - "gap": "{content.gap.100}", - "color": "{text.mutedColor}" - } - } - }, - "root": { - "background": "{content.background}", - "borderColor": "{transparent}", - "color": "{content.color}", - "borderRadius": "{content.borderRadius}", - "shadow": "{navigation.shadow}", - "transitionDuration": "{feedback.transitionDuration}" - }, - "list": { - "padding": "{navigation.list.padding.100}", - "gap": "{navigation.list.gap}" - }, - "item": { - "focusBackground": "{navigation.item.focusBackground}", - "activeBackground": "{navigation.item.activeBackground}", - "color": "{navigation.item.color}", - "focusColor": "{navigation.item.focusColor}", - "activeColor": "{navigation.item.activeColor}", - "padding": "{navigation.item.padding}", - "borderRadius": "{navigation.item.borderRadius}", - "gap": "{navigation.item.gap}", - "icon": { - "color": "{navigation.item.icon.color}", - "focusColor": "{navigation.item.icon.focusColor}", - "activeColor": "{navigation.item.icon.activeColor}" - } - }, - "submenu": { - "mobileIndent": "{overlay.popover.padding.100}" - }, - "separator": { - "borderColor": "{content.borderColor}" - } - }, - "timeline": { - "extend": { - "extEvent": { - "gap": "{feedback.gap.100}" - } - }, - "event": { - "minHeight": "{feedback.height.900}" - }, - "vertical": { - "eventContent": { - "padding": "0 {feedback.padding.100}" - } - }, - "horizontal": { - "eventContent": { - "padding": "{feedback.padding.100} 0" - } - }, - "eventMarker": { - "size": "{feedback.width.500}", - "borderRadius": "{content.borderRadius}", - "borderWidth": "{feedback.width.200}", - "background": "{content.background}", - "borderColor": "{primary.color}", - "content": { - "borderRadius": "{content.borderRadius}", - "size": "{feedback.width.400}", - "background": "{transparent}", - "insetShadow": "none" - } - }, - "eventConnector": { - "color": "{content.borderColor}", - "size": "{feedback.width.100}" - }, - "colorScheme": { - "light": { - "eventMarker": { - "background": "{content.background}", - "borderColor": "{primary.color}" - } - }, - "dark": { - "eventMarker": { - "background": "{content.background}", - "borderColor": "{primary.color}" - } - } - } - }, - "togglebutton": { - "extend": { - "ext": { - "gap": "{form.gap.300}" - }, - "iconSize": { - "sm": "{controls.iconOnly.200}", - "md": "{controls.iconOnly.300}", - "lg": "{controls.iconOnly.400}" - }, - "iconOnlyWidth": "{form.size.600}", - "hoverBorderColor": "{surface.300}", - "checkedHoverColor": "{text.extend.colorInverted}", - "checkedHoverBackground": "{surface.800}", - "checkedHoverBorderColor": "{surface.800}", - "extXlg": { - "padding": "{form.padding.500} {form.padding.600}", - "iconOnlyWidth": "4.0714rem" - }, - "extSm": { - "iconOnlyWidth": "2.1429rem" - }, - "extLg": { - "iconOnlyWidth": "3.5714rem" - } - }, - "colorScheme": { - "light": { - "root": { - "background": "{surface.200}", - "hoverBackground": "{surface.300}", - "borderColor": "{surface.200}", - "color": "{text.color}", - "hoverColor": "{text.color}", - "checkedBackground": "{surface.900}", - "checkedColor": "{text.extend.colorInverted}", - "checkedBorderColor": "{surface.900}", - "disabledBackground": "{form.disabledBackground}", - "disabledBorderColor": "{form.disabledBackground}", - "disabledColor": "{form.disabledColor}", - "invalidBorderColor": "{form.invalidBorderColor}" - }, - "icon": { - "color": "{text.color}", - "hoverColor": "{text.color}", - "checkedColor": "{text.extend.colorInverted}", - "disabledColor": "{form.disabledColor}" - }, - "content": { - "checkedBackground": "{transparent}" - } - } - }, - "root": { - "padding": "{form.padding.200} {form.padding.400}", - "borderRadius": "{form.borderRadius.300}", - "gap": "{form.gap.200}", - "fontWeight": "{fonts.fontWeight.demibold}", - "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "{focusRing.shadow}" - }, - "sm": { - "fontSize": "{fonts.fontSize.200}", - "padding": "{form.padding.100} {form.padding.300}" - }, - "lg": { - "fontSize": "{fonts.fontSize.500}", - "padding": "{form.padding.400} {form.padding.600}" - }, - "transitionDuration": "{form.transitionDuration}" - }, - "content": { - "checkedShadow": "none", - "padding": "0rem", - "borderRadius": "0rem", - "sm": { - "padding": "0rem" - }, - "lg": { - "padding": "0rem" - } - } - }, - "toggleswitch": { - "colorScheme": { - "light": { - "root": { - "background": "{surface.400}", - "hoverBackground": "{surface.500}", - "disabledBackground": "{form.disabledBackground}", - "checkedBackground": "{surface.900}", - "checkedHoverBackground": "{surface.800}" - }, - "handle": { - "background": "{form.backgroundHandler}", - "hoverBackground": "{form.backgroundHandler}", - "disabledBackground": "{form.disabledColor}", - "checkedBackground": "{surface.0}", - "checkedHoverBackground": "{surface.0}", - "color": "{text.color}", - "hoverColor": "{text.color}", - "checkedColor": "{text.color}", - "checkedHoverColor": "{text.color}" - } - } - }, - "root": { - "width": "{form.size.600}", - "height": "{form.size.400}", - "borderRadius": "{form.borderRadius.300}", - "gap": "{form.gap.100}", - "borderWidth": "{form.borderWidth}", - "shadow": "none", - "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "0" - }, - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "checkedBorderColor": "{transparent}", - "checkedHoverBorderColor": "{transparent}", - "invalidBorderColor": "{form.invalidBorderColor}", - "transitionDuration": "{form.transitionDuration}", - "slideDuration": "{form.transitionDuration}" - }, - "handle": { - "borderRadius": "{form.borderRadius.300}", - "size": "{form.size.300}" - } - }, - "tooltip": { - "colorScheme": { - "light": { - "root": { - "background": "{surface.900}", - "color": "{text.extend.colorInverted}" - } - } - }, - "root": { - "maxWidth": "{overlay.width}", - "gutter": "{feedback.gap.100}", - "shadow": "{overlay.popover.shadow}", - "padding": "{feedback.padding.100} {feedback.padding.200} ", - "borderRadius": "{overlay.popover.borderRadius}" - } - }, - "tree": { - "root": { - "background": "{content.background}", - "color": "{content.color}", - "padding": "{data.padding.400}", - "gap": "{data.gap.100}", - "indent": "{data.padding.400}" - }, - "node": { - "padding": "{data.padding.200} {data.padding.300}", - "color": "{text.color}", - "selectedColor": "{text.extend.colorInverted}", - "gap": "{data.gap.100}" - }, - "nodeIcon": { - "selectedColor": "{text.extend.colorInverted}" - }, - "nodeToggleButton": { - "borderRadius": "{data.borderRadius}", - "size": "{data.icon.size.400}", - "selectedHoverBackground": "{surface.900}" - }, - "loadingIcon": { - "size": "{data.icon.size.100}" - }, - "filter": { - "margin": "0 0 {data.padding.200} 0" - } - }, - "overlaybadge": { - "root": { - "outline": { - "width": "0rem", - "color": "{transparent}" - } - } - } - } -} diff --git a/scripts/tokens/build_tokens.py b/scripts/tokens/build_tokens.py deleted file mode 100644 index 7357d640..00000000 --- a/scripts/tokens/build_tokens.py +++ /dev/null @@ -1,23 +0,0 @@ -import json, re, copy -orig=json.load(open("src/lib/providers/prime-preset/tokens/tokens.json")) -canon=json.load(open("docs/superpowers/specs/prebuild-tokens.json")) -def strip_color(o): - if isinstance(o,str): return re.sub(r"\{color\.([^}]+)\}", r"{\1}", o) - if isinstance(o,dict): return {k:strip_color(v) for k,v in o.items()} - if isinstance(o,list): return [strip_color(x) for x in o] - return o -def merge(a,b): - out=copy.deepcopy(a) - for k,v in b.items(): - out[k]=merge(out[k],v) if (k in out and isinstance(out[k],dict) and isinstance(v,dict)) else copy.deepcopy(v) - return out -prim=copy.deepcopy(orig["primitive"]); prim["size"]=copy.deepcopy(canon["primitive"]["size"]) -sem=copy.deepcopy(orig["semantic"]) # сохраняем старый colorScheme + бакеты = backward-compat для Aura/CSS -sem["dimension"]=strip_color(canon["semantic"]["dimension"]) -sem["typography"]=strip_color(canon["semantic"]["typography"]) -sem["shadow"]=strip_color(canon["semantic"]["shadow"]) -sem["colorScheme"]["light"]=merge(sem["colorScheme"]["light"], strip_color(canon["semantic"]["color"]["light"])) -sem["colorScheme"]["dark"]=merge(sem["colorScheme"]["dark"], strip_color(canon["semantic"]["color"]["dark"])) -out={"primitive":prim,"semantic":sem,"components":strip_color(canon["components"])} -json.dump(out, open("src/lib/providers/prime-preset/tokens/tokens.migrated.json","w"), ensure_ascii=False, indent=2) -print("ok") diff --git a/scripts/tokens/repoint_primitive.py b/scripts/tokens/repoint_primitive.py deleted file mode 100644 index e1c60ad0..00000000 --- a/scripts/tokens/repoint_primitive.py +++ /dev/null @@ -1,14 +0,0 @@ -import json -m=json.load(open("docs/superpowers/specs/2026-06-17-primitive-remap.json")) -f="src/lib/providers/prime-preset/tokens/tokens.json" -t=json.load(open(f)) -def fix(o): - if isinstance(o,str): - for old,new in m.items(): o=o.replace("{"+old+"}","{"+new+"}") - return o - if isinstance(o,dict): return {k:fix(v) for k,v in o.items()} - if isinstance(o,list): return [fix(x) for x in o] - return o -t=fix(t) -for k in ("spacing","sizing","borderWidth","borderRadius"): t["primitive"].pop(k,None) -json.dump(t,open(f,"w"),ensure_ascii=False,indent=2); print("ok, primitive keys:", list(t["primitive"].keys())) diff --git a/scripts/tokens/validate.py b/scripts/tokens/validate.py deleted file mode 100644 index 31b973ef..00000000 --- a/scripts/tokens/validate.py +++ /dev/null @@ -1,69 +0,0 @@ -import json, re, sys -# Эталон значений = pre-migration снимок (фикстура). Можно переопределить argv[2]. -# Использование: python3 validate.py [] -DEFAULT_BASE="scripts/tokens/baseline.json" -def get(t,p): - c=t - for x in p.split("."): - c=c.get(x) if isinstance(c,dict) else None - if c is None: return None - return c -def leaves(d,p=""): - for k,v in d.items(): - pp=p+"."+k if p else k - if isinstance(v,dict): yield from leaves(v,pp) - elif isinstance(v,str): yield pp,v -def mkres(t,mode): - P=t["primitive"];S=t["semantic"];CS=get(S,"colorScheme.%s"%mode) or {};CL=get(S,"color.%s"%mode) or {} - def r(val,d=0): - if not isinstance(val,str) or d>30: return val - def rp(m): - ref=m.group(1);root=ref.split(".")[0] - node=get(CL,ref[6:]) if root=="color" else (get(P,ref) or get(S,ref) or get(CS,ref) or get(t["components"],ref)) - if node is None or isinstance(node,dict): return m.group(0) - return r(node,d+1) - return re.sub(r"\{([^}]+)\}",rp,val) - return r -def main(cand, base_path): - base=json.load(open(base_path)); new=json.load(open(cand)) - if base_path==cand: - print("WARN: baseline == candidate — EQUIV-проверка вырождена (сравнение файла с собой)") - # equivalence - for mode in ("light","dark"): - rb=mkres(base,mode); rn=mkres(new,mode) - ob=dict(leaves(base["components"])); on=dict(leaves(new["components"])) - same=diff=0 - for path in set(ob)&set(on): - a=rb(ob[path]).strip().lower(); b=rn(on[path]).strip().lower() - if "{" in a or "{" in b: continue - if a==b: same+=1 - elif "0.000" in a and "0.000" in b: same+=1 - else: diff+=1 - print(f"EQUIV {mode}: same={same} diffs={diff}") - if diff>0: globals()['FAIL']=True - # dangling + R11 - PRIM=set(new["primitive"].keys()); SEM=set(new["semantic"].keys()) - CL=get(new["semantic"],"color.light") or {} - CS=get(new["semantic"],"colorScheme.light") or {} - def resolves(r): - root=r.split(".")[0] - if root=="color": return get(CL,r[6:]) is not None - # любой формат: primitive | semantic top-level | colorScheme.light | color.light | component - return (get(new["primitive"],r) is not None or get(new["semantic"],r) is not None - or get(CS,r) is not None or get(CL,r) is not None or get(new["components"],r) is not None) - refs=[] - def walk(d): - for v in d.values(): - if isinstance(v,dict): walk(v) - elif isinstance(v,str): refs.extend(re.findall(r"\{([^}]+)\}",v)) - walk(new["components"]) - dang=[r for r in refs if not resolves(r)] - prim_refs=[r for r in refs if r.split(".")[0] in PRIM] - print(f"DANGLING={len(dang)} {dang[:5]}") - print(f"R11_PRIMITIVE_REFS={len(prim_refs)} {sorted(set(prim_refs))[:5]}") - if dang: globals()['FAIL']=True -if __name__=="__main__": - cand=sys.argv[1] - base=sys.argv[2] if len(sys.argv)>2 else DEFAULT_BASE - FAIL=False; main(cand, base) - sys.exit(1 if FAIL else 0) diff --git a/src/app/app.config.ts b/src/app/app.config.ts index ccd31bda..454e30ad 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -3,9 +3,8 @@ import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; import { providePrimeNG } from 'primeng/config'; -import Preset from '../prime-preset/theme.preset'; -import { RU_TRANSLATION } from '../prime-preset/locale/ru'; import Preset from '../lib/providers/prime-preset/theme.preset'; +import { RU_TRANSLATION } from '../lib/providers/prime-preset/locale/ru'; export const appConfig: ApplicationConfig = { providers: [ diff --git a/src/assets/fonts/noto-sans/NotoSans-Bold.woff2 b/src/assets/fonts/noto-sans/NotoSans-Bold.woff2 new file mode 100644 index 00000000..bb0ecf33 Binary files /dev/null and b/src/assets/fonts/noto-sans/NotoSans-Bold.woff2 differ diff --git a/src/assets/fonts/noto-sans/NotoSans-Regular.woff2 b/src/assets/fonts/noto-sans/NotoSans-Regular.woff2 new file mode 100644 index 00000000..0ce57f4c Binary files /dev/null and b/src/assets/fonts/noto-sans/NotoSans-Regular.woff2 differ diff --git a/src/lib/providers/prime-preset/tokens/components/accordion.ts b/src/lib/providers/prime-preset/tokens/components/accordion.ts index 500facbb..b9b38aa9 100644 --- a/src/lib/providers/prime-preset/tokens/components/accordion.ts +++ b/src/lib/providers/prime-preset/tokens/components/accordion.ts @@ -5,8 +5,8 @@ export const accordionCss = ({ dt }: { dt: (token: string) => string }): string => ` /* ─── Шрифт заголовка ─── */ .p-accordionheader { - font-family: ${dt('accordion.extend.fonts_fontFamily_base')}; - font-size: ${dt('accordion.extend.fonts_fontSize_300')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-size: ${dt('fonts.fontSize.300')}; } /* ─── Размер иконки toggle ─── */ diff --git a/src/lib/providers/prime-preset/tokens/components/autocomplete.ts b/src/lib/providers/prime-preset/tokens/components/autocomplete.ts index b989d14b..46b1b616 100644 --- a/src/lib/providers/prime-preset/tokens/components/autocomplete.ts +++ b/src/lib/providers/prime-preset/tokens/components/autocomplete.ts @@ -8,14 +8,14 @@ export const autocompleteCss = ({ dt }: { dt: (token: string) => string }): stri .p-autocomplete:has(input:disabled) .p-autocomplete-input, .p-autocomplete:has(input:disabled) .p-autocomplete-input-multiple, .p-autocomplete:has(input:disabled) .p-autocomplete-dropdown { - border-color: ${dt('autocomplete.extend.form_borderColor')}; + border-color: ${dt('color.fg.muted')}; } /* ─── Инпут и границы ─── */ .p-autocomplete .p-autocomplete-input { width: 100%; padding: ${dt('autocomplete.root.paddingY')} ${dt('autocomplete.root.paddingX')}; - line-height: ${dt('autocomplete.extend.fonts_lineHeight_250')}; + line-height: ${dt('fonts.lineHeight.250')}; } /* Монолитный вид: убираем стыкующиеся границы инпута и dropdown-кнопки. @@ -34,12 +34,12 @@ export const autocompleteCss = ({ dt }: { dt: (token: string) => string }): stri .p-autocomplete.p-component:not(:has(input:disabled)):hover .p-inputtext.p-autocomplete-input, .p-autocomplete.p-component:not(:has(input:disabled)):hover .p-autocomplete-dropdown, .p-autocomplete.p-component:not(:has(input:disabled)):has(.p-autocomplete-input:hover) .p-autocomplete-dropdown { - border-color: ${dt('autocomplete.extend.form_hoverBorderSecondaryColor')}; + border-color: ${dt('color.bg.brand.strong.hover')}; } /* ─── States: Focus ─── */ .p-autocomplete:has(.p-autocomplete-input:focus) .p-autocomplete-dropdown { - border-color: ${dt('autocomplete.extend.form_focusBorderSecondaryColor')}; + border-color: ${dt('color.bg.brand.strong.hover')}; } /* ─── Иконки ─── */ @@ -49,12 +49,12 @@ export const autocompleteCss = ({ dt }: { dt: (token: string) => string }): stri } .p-autocomplete.p-component:has(.p-autocomplete-dropdown) .p-autocomplete-clear-icon { - inset-inline-end: ${dt('autocomplete.extend.form_width_300')}; + inset-inline-end: ${dt('dimension.size.1100')}; } /* ─── Multiple: чипсы ─── */ .p-autocomplete .p-autocomplete-input-multiple { - line-height: ${dt('autocomplete.extend.fonts_lineHeight_250')}; + line-height: ${dt('fonts.lineHeight.250')}; padding: ${dt('autocomplete.root.paddingY')} ${dt('autocomplete.root.paddingX')}; } @@ -138,8 +138,8 @@ export const autocompleteCss = ({ dt }: { dt: (token: string) => string }): stri } .p-autocomplete.p-component .p-inputtext-xlg .p-autocomplete-chip { - padding-top: ${dt('autocomplete.extend.dimension_space_200')}; - padding-bottom: ${dt('autocomplete.extend.dimension_space_200')}; - font-size: ${dt('autocomplete.extend.fonts_fontSize_300')}; + padding-top: ${dt('dimension.space.200')}; + padding-bottom: ${dt('dimension.space.200')}; + font-size: ${dt('fonts.fontSize.300')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/avatar.ts b/src/lib/providers/prime-preset/tokens/components/avatar.ts index 732298c4..88c4f887 100644 --- a/src/lib/providers/prime-preset/tokens/components/avatar.ts +++ b/src/lib/providers/prime-preset/tokens/components/avatar.ts @@ -2,10 +2,10 @@ export const avatarCss = ({ dt }: { dt: (token: string) => string }): string => :root { --p-avatar-extend-border-color: ${dt('avatar.extend.borderColor')}; --p-avatar-extend-circle-border-radius: ${dt('avatar.extend.circle.borderRadius')}; - --p-avatar-group-border-color: ${dt('avatar.extend.content_background')}; - --p-avatar-group-offset: calc(-1 * ${dt('avatar.extend.media_padding_300')}); - --p-avatar-lg-group-offset: calc(-1 * ${dt('avatar.extend.media_padding_300')}); - --p-avatar-xl-group-offset: calc(-1 * ${dt('avatar.extend.media_padding_600')}); + --p-avatar-group-border-color: ${dt('color.bg.surface.raised.default')}; + --p-avatar-group-offset: calc(-1 * ${dt('dimension.space.300')}); + --p-avatar-lg-group-offset: calc(-1 * ${dt('dimension.space.300')}); + --p-avatar-xl-group-offset: calc(-1 * ${dt('dimension.space.600')}); } /* ─── Группировка: отступы для кастомных классов хост-элемента ─── */ diff --git a/src/lib/providers/prime-preset/tokens/components/breadcrumb.ts b/src/lib/providers/prime-preset/tokens/components/breadcrumb.ts index dc5f80ad..dc4dbe33 100644 --- a/src/lib/providers/prime-preset/tokens/components/breadcrumb.ts +++ b/src/lib/providers/prime-preset/tokens/components/breadcrumb.ts @@ -1,7 +1,7 @@ export const breadcrumbCss = ({ dt }: { dt: (token: string) => string }): string => ` .p-breadcrumb-item-link { padding: ${dt('breadcrumb.extend.extItem.padding')}; - font-size: ${dt('breadcrumb.extend.fonts_fontSize_200')}; + font-size: ${dt('fonts.fontSize.200')}; } .p-breadcrumb-item-link:hover { @@ -13,12 +13,12 @@ export const breadcrumbCss = ({ dt }: { dt: (token: string) => string }): string } .p-breadcrumb-item:last-child .p-breadcrumb-item-link { - opacity: ${dt('breadcrumb.extend.opacity_500')}; + opacity: ${dt('effects.opacity.50')}; pointer-events: none; cursor: default; } .p-breadcrumb-item:last-child .p-breadcrumb-item-link:hover { - background: ${dt('breadcrumb.extend.transparent')}; + background: transparent; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/button.ts b/src/lib/providers/prime-preset/tokens/components/button.ts index 7989a4f5..39dea47f 100644 --- a/src/lib/providers/prime-preset/tokens/components/button.ts +++ b/src/lib/providers/prime-preset/tokens/components/button.ts @@ -197,7 +197,7 @@ export default ({ dt }: { dt: (token: string) => string }) => ` /* Стили для disabled и loading кнопок */ .p-button:is(.p-disabled, :disabled, .p-button-loading) { mix-blend-mode: inherit; - opacity: ${dt('opacity.1000')}; + opacity: ${dt('effects.opacity.100')}; color: ${dt('button.extend.disabledColor')}; background: ${dt('button.extend.disabledBackground')}; border-color: ${dt('button.extend.disabledBackground')}; @@ -206,22 +206,22 @@ export default ({ dt }: { dt: (token: string) => string }) => ` /* disabled outlined кнопки */ .p-button.p-button-outlined:is(.p-disabled, :disabled, .p-button-loading) { color: ${dt('button.extend.disabledColor')}; - background: ${dt('transparent')}; - border-color: ${dt('transparent')}; + background: transparent; + border-color: transparent; } /* disabled text кнопки */ .p-button.p-button-text:is(.p-disabled, :disabled, .p-button-loading) { color: ${dt('button.extend.disabledColor')}; - background: ${dt('transparent')}; - border-color: ${dt('transparent')}; + background: transparent; + border-color: transparent; } /* disabled link кнопки */ .p-button.p-button-link:is(.p-disabled, :disabled, .p-button-loading) { color: ${dt('button.extend.disabledColor')}; - background: ${dt('transparent')}; - border-color: ${dt('transparent')}; + background: transparent; + border-color: transparent; } /* Отступы для link кнопок */ @@ -289,14 +289,14 @@ export default ({ dt }: { dt: (token: string) => string }) => ` .p-button-lg.p-button:not(.p-button-icon-only):not(.p-button-link) { padding: ${dt('button.root.lg.paddingY')} ${dt('button.root.lg.paddingX')}; font-size: ${dt('button.root.lg.fontSize')}; - height: ${dt('controls.iconOnly.850')}; + height: ${dt('dimension.size.800')}; } /* Отступы и размер шрифта для xlg кнопки */ :is(.p-button-xlg.p-button, .p-button-xlg .p-button).p-component:not(.p-button-icon-only):not(.p-button-link) { padding: ${dt('button.extend.extXlg.paddingY')} ${dt('button.extend.extXlg.paddingX')}; font-size: ${dt('fonts.fontSize.500')}; - height: ${dt('controls.iconOnly.900')}; + height: ${dt('dimension.size.900')}; } /* Размеры для icon-only кнопок */ diff --git a/src/lib/providers/prime-preset/tokens/components/card.ts b/src/lib/providers/prime-preset/tokens/components/card.ts index c5d96940..bbd3e5a6 100644 --- a/src/lib/providers/prime-preset/tokens/components/card.ts +++ b/src/lib/providers/prime-preset/tokens/components/card.ts @@ -1,38 +1,34 @@ /** * Кастомная CSS-стилизация для компонента p-card. - * Публикует extend-токены как CSS-переменные и применяет глобальные стили. * Подключается в map-tokens.ts: `import { cardCss } from './tokens/components/card'` + * + * Все значения берутся через dt() — PrimeUIX сам выпускает CSS-переменную для каждого токена + * пресета, поэтому объявлять их повторно в :root не нужно. */ export const cardCss = ({ dt }: { dt: (token: string) => string }): string => ` - /* ─── Card extend: публикуем кастомные переменные в :root ─── */ - :root { - --p-card-extend-border-color: ${dt('card.extend.borderColor')}; - --p-card-extend-border-width: ${dt('card.extend.borderWidth')}; - } - - /* ─── Card base styles ─── */ + /* ─── Рамка и базовое состояние ─── */ .p-card.p-component { - border: var(--p-card-extend-border-width) solid var(--p-card-extend-border-color); + border: ${dt('card.extend.borderWidth')} solid ${dt('card.extend.borderColor')}; overflow: hidden; - box-shadow: none; + box-shadow: ${dt('card.root.shadow')}; } - /* ─── Overlay variant ─── */ + /* ─── Overlay: тень задаётся токеном карточки, а не общей шкалой ─── */ .p-card.p-component.shadow-md { - box-shadow: ${dt('card.extend.overlay_popover_shadow')}; + box-shadow: ${dt('card.overlay.shadow')}; } - /* ─── Caption (Title & Subtitle wrapper) ─── */ + /* ─── Caption: обёртка заголовка и подзаголовка ─── */ .p-card-caption { display: flex; flex-direction: column; gap: ${dt('card.caption.gap')}; } - /* ─── Subtitle typography ─── */ + /* ─── Типографика подзаголовка ─── */ .p-card-subtitle { - font-family: ${dt('card.extend.fonts_fontFamily_heading')}; - font-size: ${dt('card.extend.fonts_fontSize_200')}; - font-weight: ${dt('card.extend.fonts_fontWeight_regular')}; + font-family: ${dt('fonts.fontFamily.heading')}; + font-size: ${dt('fonts.fontSize.200')}; + font-weight: ${dt('fonts.fontWeight.regular')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/carousel.ts b/src/lib/providers/prime-preset/tokens/components/carousel.ts index f1ca8dfe..cf260f5c 100644 --- a/src/lib/providers/prime-preset/tokens/components/carousel.ts +++ b/src/lib/providers/prime-preset/tokens/components/carousel.ts @@ -1,25 +1,25 @@ export const carouselCss = ({ dt }: { dt: (token: string) => string }): string => ` .p-carousel .p-carousel-prev-button.p-button-secondary, .p-carousel .p-carousel-next-button.p-button-secondary { - background: ${dt('carousel.extend.surface_200')}; - color: ${dt('carousel.extend.text_color')}; + background: ${dt('color.bg.neutral.weak.disabled')}; + color: ${dt('color.fg.default')}; border-color: transparent; } .p-carousel .p-carousel-prev-button.p-button-secondary:not(:disabled):hover, .p-carousel .p-carousel-next-button.p-button-secondary:not(:disabled):hover { - background: ${dt('carousel.extend.surface_300')}; - color: ${dt('carousel.extend.text_color')}; + background: ${dt('color.fg.muted')}; + color: ${dt('color.fg.default')}; } .p-carousel .p-carousel-prev-button.p-button-secondary:not(:disabled):active, .p-carousel .p-carousel-next-button.p-button-secondary:not(:disabled):active { - background: ${dt('carousel.extend.surface_400')}; - color: ${dt('carousel.extend.text_color')}; + background: ${dt('color.fg.subtle')}; + color: ${dt('color.fg.default')}; } .p-carousel .p-button-icon-only.p-button-rounded { - border-radius: ${dt('button.roundedBorderRadius')}; + border-radius: ${dt('button.root.roundedBorderRadius')}; } .p-carousel .p-carousel-item { diff --git a/src/lib/providers/prime-preset/tokens/components/checkbox.ts b/src/lib/providers/prime-preset/tokens/components/checkbox.ts index 8a2dde52..a1746523 100644 --- a/src/lib/providers/prime-preset/tokens/components/checkbox.ts +++ b/src/lib/providers/prime-preset/tokens/components/checkbox.ts @@ -3,37 +3,37 @@ export const checkboxCss = ({ dt }: { dt: (token: string) => string }): string = .checkbox-label { display: flex; align-items: center; - color: ${dt('checkbox.extend.text_color')}; - font-family: ${dt('checkbox.extend.fonts_fontFamily_base')}; - font-size: ${dt('checkbox.extend.fonts_fontSize_300')}; - font-weight: ${dt('checkbox.extend.fonts_fontWeight_regular')}; + color: ${dt('color.fg.default')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-size: ${dt('fonts.fontSize.300')}; + font-weight: ${dt('fonts.fontWeight.regular')}; line-height: normal; cursor: pointer; } .checkbox-label--hover { - color: ${dt('checkbox.extend.text_brand')}; + color: ${dt('color.fg.brand.default')}; } .checkbox-label--disabled { - color: ${dt('checkbox.extend.text_mutedColor')}; + color: ${dt('color.fg.muted')}; cursor: default; } .checkbox-caption { - color: ${dt('checkbox.extend.text_subtle')}; - font-family: ${dt('checkbox.extend.fonts_fontFamily_heading')}; - font-size: ${dt('checkbox.extend.fonts_fontSize_200')}; - font-weight: ${dt('checkbox.extend.fonts_fontWeight_regular')}; + color: ${dt('color.fg.subtle')}; + font-family: ${dt('fonts.fontFamily.heading')}; + font-size: ${dt('fonts.fontSize.200')}; + font-weight: ${dt('fonts.fontWeight.regular')}; line-height: normal; } .checkbox-caption--hover { - color: ${dt('checkbox.extend.text_brand')}; + color: ${dt('color.fg.brand.default')}; } .checkbox-caption--disabled { - color: ${dt('checkbox.extend.text_disabled')}; + color: ${dt('color.fg.muted')}; } /* Переопределение ширины border для checkbox */ @@ -62,13 +62,13 @@ export const checkboxCss = ({ dt }: { dt: (token: string) => string }): string = .p-checkbox:not(.p-disabled):not(.p-checkbox-checked):not(.p-invalid):has(.p-checkbox-input:focus-visible) .p-checkbox-box, .p-checkbox-checked:not(.p-disabled):not(.p-invalid):has(.p-checkbox-input:focus-visible) .p-checkbox-box, .p-checkbox-indeterminate:not(.p-disabled):not(.p-invalid):has(.p-checkbox-input:focus-visible) .p-checkbox-box { - box-shadow: 0 0 0 ${dt('checkbox.root.focusRing.focusRing')} ${dt('checkbox.extend.focusRing_success')}; + box-shadow: 0 0 0 ${dt('checkbox.root.focusRing.focusRing')} ${dt('color.border.focus')}; } /* Focus ring с красным цветом для состояний с ошибкой */ .p-checkbox.p-invalid .p-checkbox-box, .p-checkbox-checked.p-invalid .p-checkbox-box, .p-checkbox-indeterminate.p-invalid .p-checkbox-box { - box-shadow: 0 0 0 ${dt('checkbox.extend.focusRing_width')} ${dt('checkbox.extend.focusRing_invalid')}; + box-shadow: 0 0 0 ${dt('dimension.space.100')} ${dt('color.bg.status.danger.weak.active')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/chip.ts b/src/lib/providers/prime-preset/tokens/components/chip.ts index 460ad4f2..a1f96013 100644 --- a/src/lib/providers/prime-preset/tokens/components/chip.ts +++ b/src/lib/providers/prime-preset/tokens/components/chip.ts @@ -17,10 +17,10 @@ export const chipCss = ({ dt }: { dt: (token: string) => string }): string => ` /* ─── Типографика лейбла ─── */ .p-chip-label { - font-family: ${dt('chip.extend.fonts_fontFamily_base')}; - font-size: ${dt('chip.extend.fonts_fontSize_300')}; - font-weight: ${dt('chip.extend.fonts_fontWeight_regular')}; - line-height: ${dt('chip.extend.fonts_lineHeight_400')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-size: ${dt('fonts.fontSize.300')}; + font-weight: ${dt('fonts.fontWeight.regular')}; + line-height: ${dt('fonts.lineHeight.400')}; } /* ─── Сброс уменьшенного padding PrimeNG при наличии кнопки удаления ─── */ @@ -30,12 +30,12 @@ export const chipCss = ({ dt }: { dt: (token: string) => string }): string => ` /* ─── Focus ring иконки удаления ─── */ .p-chip-remove-icon:focus-visible { - outline: ${dt('chip.removeIcon.focusRing.width')} solid ${dt('chip.extend.focusRing_success')}; + outline: ${dt('chip.removeIcon.focusRing.width')} solid ${dt('color.border.focus')}; } /* ─── Disabled состояние ─── */ .p-chip.p-disabled { - opacity: ${dt('chip.extend.opacity_500')}; + opacity: ${dt('effects.opacity.50')}; pointer-events: none; } diff --git a/src/lib/providers/prime-preset/tokens/components/data-table.ts b/src/lib/providers/prime-preset/tokens/components/data-table.ts index 5745eafa..d3b9c5f2 100644 --- a/src/lib/providers/prime-preset/tokens/components/data-table.ts +++ b/src/lib/providers/prime-preset/tokens/components/data-table.ts @@ -23,6 +23,6 @@ export const dataTableCss = ({ dt }: { dt: (token: string) => string }): string } .p-datatable .p-datatable-sortable-column:not(.p-datatable-column-sorted):hover { - color: ${dt('datatable.extend.text_hoverColor')}; + color: ${dt('color.fg.hover')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/date-picker.ts b/src/lib/providers/prime-preset/tokens/components/date-picker.ts index 378c6a7f..0c480004 100644 --- a/src/lib/providers/prime-preset/tokens/components/date-picker.ts +++ b/src/lib/providers/prime-preset/tokens/components/date-picker.ts @@ -37,7 +37,7 @@ export const datePickerCss = ({ dt }: { dt: (token: string) => string }): string } .p-datepicker-year-select { - min-width: ${dt('datepicker.extend.extSelectYear.minWidth')}; + min-width: ${dt('dimension.size.1000')}; } .p-datepicker-custom-header .p-button.p-button { @@ -50,7 +50,7 @@ export const datePickerCss = ({ dt }: { dt: (token: string) => string }): string } .p-datepicker-today.p-datepicker-today > .p-datepicker-day:not(.p-datepicker-day-selected) { - border: ${dt('datepicker.extend.form_borderWidth')} solid ${dt( + border: ${dt('dimension.size.100')} solid ${dt( 'datepicker.extend.extToday.borderColor' )}; } @@ -73,16 +73,16 @@ export const datePickerCss = ({ dt }: { dt: (token: string) => string }): string /* ─── Weekday header text ─── */ .p-datepicker-weekday { - font-family: ${dt('datepicker.extend.fonts_fontFamily_base')}; - font-size: ${dt('datepicker.extend.fonts_fontSize_300')}; - font-weight: ${dt('datepicker.extend.fonts_fontWeight_demibold')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-size: ${dt('fonts.fontSize.300')}; + font-weight: ${dt('fonts.fontWeight.demibold')}; } /* ─── Day cell text ─── */ .p-datepicker-day { - font-family: ${dt('datepicker.extend.fonts_fontFamily_base')}; - font-size: ${dt('datepicker.extend.fonts_fontSize_300')}; - font-weight: ${dt('datepicker.extend.fonts_fontWeight_regular')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-size: ${dt('fonts.fontSize.300')}; + font-weight: ${dt('fonts.fontWeight.regular')}; } /* ─── Скрываем нативный time picker (заменён кастомным в footer) ─── */ @@ -94,7 +94,7 @@ export const datePickerCss = ({ dt }: { dt: (token: string) => string }): string background: transparent; color: ${dt('button.colorScheme.light.text.primary.color')}; border: 0 none; - font-family: ${dt('datepicker.extend.fonts_fontFamily_heading')}; + font-family: ${dt('fonts.fontFamily.heading')}; font-weight: ${dt('button.root.label.fontWeight')}; transition: background-color ${dt('button.root.transitionDuration')}; } @@ -141,7 +141,7 @@ export const datePickerCss = ({ dt }: { dt: (token: string) => string }): string justify-content: center; gap: ${dt('datepicker.timePicker.gap')}; padding: ${dt('datepicker.timePicker.padding')}; - border-top: ${dt('datepicker.extend.form_borderWidth')} solid ${dt('datepicker.panel.borderColor')}; + border-top: ${dt('dimension.size.100')} solid ${dt('datepicker.panel.borderColor')}; } .p-datepicker-time-picker-custom .p-datepicker-time-field { @@ -153,9 +153,9 @@ export const datePickerCss = ({ dt }: { dt: (token: string) => string }): string } .p-datepicker-time-picker-custom .p-datepicker-time-label { - font-family: ${dt('datepicker.extend.fonts_fontFamily_heading')}; - font-size: ${dt('datepicker.extend.fonts_fontSize_100')}; - font-weight: ${dt('datepicker.extend.fonts_fontWeight_regular')}; + font-family: ${dt('fonts.fontFamily.heading')}; + font-size: ${dt('fonts.fontSize.100')}; + font-weight: ${dt('fonts.fontWeight.regular')}; line-height: 1; color: ${dt('datepicker.extend.extTimePicker.color')}; } @@ -167,12 +167,12 @@ export const datePickerCss = ({ dt }: { dt: (token: string) => string }): string } .p-datepicker-time-picker-custom .p-datepicker-separator { - font-family: ${dt('datepicker.extend.fonts_fontFamily_heading')}; - font-size: ${dt('datepicker.extend.fonts_fontSize_100')}; - font-weight: ${dt('datepicker.extend.fonts_fontWeight_regular')}; + font-family: ${dt('fonts.fontFamily.heading')}; + font-size: ${dt('fonts.fontSize.100')}; + font-weight: ${dt('fonts.fontWeight.regular')}; line-height: 1; color: ${dt('datepicker.extend.extTimePicker.color')}; - margin-top: calc(${dt('datepicker.extend.fonts_fontSize_100')} + ${dt('datepicker.timePicker.buttonGap')}); + margin-top: calc(${dt('fonts.fontSize.100')} + ${dt('datepicker.timePicker.buttonGap')}); } :is(.p-datepicker-month-select, .p-datepicker-year-select) .p-select-dropdown { @@ -180,7 +180,7 @@ export const datePickerCss = ({ dt }: { dt: (token: string) => string }): string } :is(.p-datepicker-month-select, .p-datepicker-year-select) .p-select-label { - width: ${dt('datepicker.extend.dimension_size_1000')}; + width: ${dt('dimension.size.1000')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/dialog.ts b/src/lib/providers/prime-preset/tokens/components/dialog.ts index 925d1829..ad7f447e 100644 --- a/src/lib/providers/prime-preset/tokens/components/dialog.ts +++ b/src/lib/providers/prime-preset/tokens/components/dialog.ts @@ -1,20 +1,20 @@ export const dialogCss = ({ dt }: { dt: (token: string) => string }): string => ` .p-dialog .p-dialog-title { - font-family: ${dt('dialog.extend.fonts_fontFamily_heading')}; + font-family: ${dt('fonts.fontFamily.heading')}; font-size: ${dt('dialog.title.fontSize')}; font-weight: ${dt('dialog.title.fontWeight')}; - line-height: ${dt('dialog.extend.fonts_lineHeight_550')}; + line-height: ${dt('fonts.lineHeight.550')}; } .p-dialog .p-dialog-content { - font-family: ${dt('dialog.extend.fonts_fontFamily_base')}; - font-size: ${dt('dialog.extend.fonts_fontSize_300')}; - font-weight: ${dt('dialog.extend.fonts_fontWeight_regular')}; - line-height: ${dt('dialog.extend.fonts_lineHeight_500')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-size: ${dt('fonts.fontSize.300')}; + font-weight: ${dt('fonts.fontWeight.regular')}; + line-height: ${dt('fonts.lineHeight.500')}; } .p-dialog .p-dialog-header { - border-bottom: ${dt('dialog.extend.dimension_borderWidth_100')} solid ${dt('dialog.root.borderColor')}; + border-bottom: ${dt('dimension.borderWidth.100')} solid ${dt('dialog.root.borderColor')}; display: flex; align-items: center; justify-content: space-between; diff --git a/src/lib/providers/prime-preset/tokens/components/divider.ts b/src/lib/providers/prime-preset/tokens/components/divider.ts index f3141b06..de3e3581 100644 --- a/src/lib/providers/prime-preset/tokens/components/divider.ts +++ b/src/lib/providers/prime-preset/tokens/components/divider.ts @@ -15,9 +15,9 @@ export const dividerCss = ({ dt }: { dt: (token: string) => string }): string => display: flex; align-items: center; gap: var(--p-divider-extend-content-gap); - font-family: ${dt('divider.extend.fonts_fontFamily_heading')}; - font-size: ${dt('divider.extend.fonts_fontSize_200')}; - font-weight: ${dt('divider.extend.fonts_fontWeight_demibold')}; + font-family: ${dt('fonts.fontFamily.heading')}; + font-size: ${dt('fonts.fontSize.200')}; + font-weight: ${dt('fonts.fontWeight.demibold')}; } .p-divider-content .ti { diff --git a/src/lib/providers/prime-preset/tokens/components/drawer.ts b/src/lib/providers/prime-preset/tokens/components/drawer.ts index bedc92e4..0a236c4f 100644 --- a/src/lib/providers/prime-preset/tokens/components/drawer.ts +++ b/src/lib/providers/prime-preset/tokens/components/drawer.ts @@ -8,7 +8,7 @@ const drawerCss = ({ dt }: { dt: (token: string) => string }): string => ` /* Нижняя граница и внутренние отступы заголовка */ .p-drawer.p-component .p-drawer-header { border-bottom: 1px solid ${dt('drawer.extend.extHeader.borderColor')}; - padding: ${dt('drawer.extend.overlay_modal_padding_300')} ${dt('drawer.extend.overlay_modal_padding_300')} ${dt('drawer.extend.dimension_space_400')} ${dt('drawer.extend.overlay_modal_padding_300')}; + padding: ${dt('dimension.space.600')} ${dt('dimension.space.600')} ${dt('dimension.space.400')} ${dt('dimension.space.600')}; } /* Типографика */ @@ -24,19 +24,19 @@ const drawerCss = ({ dt }: { dt: (token: string) => string }): string => ` /* Внутренние отступы контента и футера */ .p-drawer.p-component .p-drawer-content { - padding: ${dt('drawer.extend.overlay_modal_padding_300')}; + padding: ${dt('dimension.space.600')}; } .p-drawer.p-component .p-drawer-footer { - padding: 0 ${dt('drawer.extend.overlay_modal_padding_300')} ${dt('drawer.extend.overlay_modal_padding_300')} ${dt('drawer.extend.overlay_modal_padding_300')}; + padding: 0 ${dt('dimension.space.600')} ${dt('dimension.space.600')} ${dt('dimension.space.600')}; } /* Боковые drawer (слева/справа) - базовые размеры и отступы от краев экрана */ .p-drawer.p-component.p-drawer-left, .p-drawer.p-component.p-drawer-right { - margin: ${dt('drawer.extend.padding')}; + margin: ${dt('dimension.space.200')}; width: ${dt('drawer.root.width')}; - height: calc(100% - ${dt('drawer.extend.padding')} * 2); + height: calc(100% - ${dt('dimension.space.200')} * 2); } .p-drawer.p-component.p-drawer-left.p-drawer-sm, @@ -57,8 +57,8 @@ const drawerCss = ({ dt }: { dt: (token: string) => string }): string => ` /* Горизонтальные drawer (сверху/снизу) - базовые размеры и отступы от краев экрана */ .p-drawer.p-component.p-drawer-top, .p-drawer.p-component.p-drawer-bottom { - margin: ${dt('drawer.extend.padding')}; - width: calc(100% - ${dt('drawer.extend.padding')} * 2); + margin: ${dt('dimension.space.200')}; + width: calc(100% - ${dt('dimension.space.200')} * 2); } /* Полноэкранный режим — drawer на весь экран, без отступов и без учёта размера */ diff --git a/src/lib/providers/prime-preset/tokens/components/fileupload.ts b/src/lib/providers/prime-preset/tokens/components/fileupload.ts index a41671fc..548d7d74 100644 --- a/src/lib/providers/prime-preset/tokens/components/fileupload.ts +++ b/src/lib/providers/prime-preset/tokens/components/fileupload.ts @@ -3,7 +3,7 @@ export const fileuploadCss = ({ dt }: { dt: (token: string) => string }): string .p-fileupload { display: flex; flex-direction: column; - gap: ${dt('form.gap.200')}; + gap: ${dt('dimension.space.200')}; border: unset; } @@ -26,7 +26,7 @@ export const fileuploadCss = ({ dt }: { dt: (token: string) => string }): string } .fu-dropzone { - border: ${dt('form.borderWidth')} dashed ${dt('fileupload.extend.extContent.highlightBorderDefault')}; + border: ${dt('dimension.borderWidth.100')} dashed ${dt('fileupload.extend.extContent.highlightBorderDefault')}; border-radius: ${dt('fileupload.extend.extDragNdrop.borderRadius')}; padding: ${dt('fileupload.extend.extDragNdrop.padding')}; background: ${dt('fileupload.extend.extDragNdrop.background')}; @@ -48,7 +48,7 @@ export const fileuploadCss = ({ dt }: { dt: (token: string) => string }): string .fu-dropzone__icon { font-size: ${dt('fileupload.extend.extDragNdrop.iconSize')}; - color: ${dt('content.color')}; + color: ${dt('color.fg.default')}; } .fu-dropzone__info { @@ -63,19 +63,19 @@ export const fileuploadCss = ({ dt }: { dt: (token: string) => string }): string font-size: ${dt('fonts.fontSize.300')}; font-weight: ${dt('fonts.fontWeight.bold')}; line-height: ${dt('fonts.lineHeight.500')}; - color: ${dt('content.color')}; + color: ${dt('color.fg.default')}; align-self: center; } .fu-dropzone__caption { display: flex; align-items: center; - gap: ${dt('form.gap.100')}; + gap: ${dt('dimension.space.100')}; font-family: ${dt('fonts.fontFamily.base')}; font-size: ${dt('fonts.fontSize.200')}; font-weight: ${dt('fonts.fontWeight.regular')}; line-height: ${dt('fonts.lineHeight.250')}; - color: ${dt('text.mutedColor')}; + color: ${dt('color.fg.muted')}; align-self: center; } @@ -103,26 +103,26 @@ export const fileuploadCss = ({ dt }: { dt: (token: string) => string }): string align-items: center; justify-content: space-between; padding: ${dt('fileupload.file.padding')}; - border: ${dt('form.borderWidth')} solid ${dt('fileupload.file.borderColor')}; + border: ${dt('dimension.borderWidth.100')} solid ${dt('fileupload.file.borderColor')}; border-radius: ${dt('fileupload.extend.extDragNdrop.borderRadius')}; gap: ${dt('fileupload.file.gap')}; transition: border-color ${dt('fileupload.root.transitionDuration')}; } .fu-file-card--uploaded { - opacity: ${dt('opacity.500')}; - background: ${dt('surface.50')}; + opacity: ${dt('effects.opacity.50')}; + background: ${dt('colors.solid.zinc.50')}; } .fu-file-card__wrap { display: flex; align-items: center; - gap: ${dt('form.gap.300')}; + gap: ${dt('dimension.space.300')}; } .fu-file-card__icon { font-size: ${dt('fileupload.extend.extFile.iconSize')}; - color: ${dt('content.color')}; + color: ${dt('color.fg.default')}; flex-shrink: 0; } @@ -142,16 +142,16 @@ export const fileuploadCss = ({ dt }: { dt: (token: string) => string }): string .fu-file-card__name { font-size: ${dt('fonts.fontSize.300')}; - color: ${dt('content.color')}; + color: ${dt('color.fg.default')}; line-height: ${dt('fonts.lineHeight.400')}; } .fu-file-card__size { display: flex; align-items: center; - gap: ${dt('form.gap.100')}; + gap: ${dt('dimension.space.100')}; font-size: ${dt('fonts.fontSize.200')}; - color: ${dt('text.mutedColor')}; + color: ${dt('color.fg.muted')}; } .fu-file-card__size .ti { diff --git a/src/lib/providers/prime-preset/tokens/components/galleria.ts b/src/lib/providers/prime-preset/tokens/components/galleria.ts index d0314890..952b3f20 100644 --- a/src/lib/providers/prime-preset/tokens/components/galleria.ts +++ b/src/lib/providers/prime-preset/tokens/components/galleria.ts @@ -2,7 +2,7 @@ export const galleriaCss = ({ dt }: { dt: (token: string) => string }): string = /* ─── Подпись к изображению ─── */ .p-galleria .p-galleria-caption { background: ${dt('galleria.caption.background')}; - padding: ${dt('galleria.extend.dimension_space_200')}; + padding: ${dt('dimension.space.200')}; } /* ─── Кнопки навигации в полноэкранном режиме ─── */ diff --git a/src/lib/providers/prime-preset/tokens/components/inputnumber.ts b/src/lib/providers/prime-preset/tokens/components/inputnumber.ts index 124351e0..f8a88386 100644 --- a/src/lib/providers/prime-preset/tokens/components/inputnumber.ts +++ b/src/lib/providers/prime-preset/tokens/components/inputnumber.ts @@ -2,15 +2,15 @@ export const inputnumberCss = ({ dt }: { dt: (token: string) => string }): strin /* ─── Базовые стили ─── */ .p-inputnumber .p-inputnumber-input { - font-family: ${dt('inputnumber.extend.fonts_fontFamily_base')}; + font-family: ${dt('fonts.fontFamily.base')}; } .p-inputnumber .p-inputnumber-input::placeholder { - font-family: ${dt('inputnumber.extend.fonts_fontFamily_base')}; + font-family: ${dt('fonts.fontFamily.base')}; } .p-floatlabel:has(.p-inputnumber) label { - font-family: ${dt('inputnumber.extend.fonts_fontFamily_base')}; + font-family: ${dt('fonts.fontFamily.base')}; } /* ─── Кнопки увеличения/уменьшения ─── */ @@ -29,7 +29,7 @@ export const inputnumberCss = ({ dt }: { dt: (token: string) => string }): strin /* ─── Focus ─── */ .p-inputnumber .p-inputnumber-input:enabled:focus { - box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('inputtext.focusRing.color')}; + box-shadow: 0 0 0 ${dt('inputtext.root.focusRing.width')} ${dt('inputtext.root.focusRing.color')}; } /* ─── Invalid + Focus ─── */ diff --git a/src/lib/providers/prime-preset/tokens/components/inputotp.ts b/src/lib/providers/prime-preset/tokens/components/inputotp.ts index 10961cd7..492972a5 100644 --- a/src/lib/providers/prime-preset/tokens/components/inputotp.ts +++ b/src/lib/providers/prime-preset/tokens/components/inputotp.ts @@ -19,13 +19,13 @@ export const inputotpCss = ({ dt }: { dt: (token: string) => string }): string = /* ─── Focus ─── */ .p-inputotp.p-component .p-inputtext:enabled:focus { - box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('inputtext.focusRing.color')}; + box-shadow: 0 0 0 ${dt('inputtext.root.focusRing.width')} ${dt('inputtext.root.focusRing.color')}; } /* ─── Invalid + Focus ─── */ .p-inputotp.p-component .p-inputtext.p-invalid:focus { border-color: ${dt('inputtext.root.invalidBorderColor')}; - box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('inputotp.extend.focusRing_invalid')}; + box-shadow: 0 0 0 ${dt('inputtext.root.focusRing.width')} ${dt('color.bg.status.danger.weak.active')}; } /* ─── Small ─── */ diff --git a/src/lib/providers/prime-preset/tokens/components/inputtext.ts b/src/lib/providers/prime-preset/tokens/components/inputtext.ts index 5949c04d..3362b32d 100644 --- a/src/lib/providers/prime-preset/tokens/components/inputtext.ts +++ b/src/lib/providers/prime-preset/tokens/components/inputtext.ts @@ -2,16 +2,16 @@ export const inputtextCss = ({ dt }: { dt: (token: string) => string }): string /* ─── Базовые стили ─── */ .p-inputtext { - line-height: ${dt('inputtext.extend.fonts_lineHeight_250')}; - font-family: ${dt('inputtext.extend.fonts_fontFamily_base')}; + line-height: ${dt('fonts.lineHeight.250')}; + font-family: ${dt('fonts.fontFamily.base')}; } .p-inputtext::placeholder { - font-family: ${dt('inputtext.extend.fonts_fontFamily_base')}; + font-family: ${dt('fonts.fontFamily.base')}; } .p-floatlabel:has(.p-inputtext) label { - font-family: ${dt('inputtext.extend.fonts_fontFamily_base')}; + font-family: ${dt('fonts.fontFamily.base')}; } /* ─── Disabled ─── */ @@ -28,13 +28,13 @@ export const inputtextCss = ({ dt }: { dt: (token: string) => string }): string /* ─── Focus ─── */ .p-inputtext:enabled:focus { - box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('inputtext.focusRing.color')}; + box-shadow: 0 0 0 ${dt('inputtext.root.focusRing.width')} ${dt('inputtext.root.focusRing.color')}; } /* ─── Invalid + Focus ─── */ .p-inputtext.p-invalid:focus { border-color: ${dt('inputtext.root.invalidBorderColor')}; - box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('inputtext.extend.focusRing_invalid')}; + box-shadow: 0 0 0 ${dt('inputtext.root.focusRing.width')} ${dt('color.bg.status.danger.weak.active')}; } /* ─── Extra Large ─── */ diff --git a/src/lib/providers/prime-preset/tokens/components/listbox.ts b/src/lib/providers/prime-preset/tokens/components/listbox.ts index 2bd5ad9e..05489d17 100644 --- a/src/lib/providers/prime-preset/tokens/components/listbox.ts +++ b/src/lib/providers/prime-preset/tokens/components/listbox.ts @@ -33,8 +33,8 @@ export const listboxCss = ({ dt }: { dt: (token: string) => string }): string => /* ─── Подпись элемента списка ─── */ .p-listbox-option-caption { color: var(--p-listbox-extend-ext-option-caption-color); - font-size: ${dt('listbox.extend.fonts_fontSize_200')}; - font-family: ${dt('listbox.extend.fonts_fontFamily_heading')}; + font-size: ${dt('fonts.fontSize.200')}; + font-family: ${dt('fonts.fontFamily.heading')}; } /* ─── Галочка выбора ─── */ diff --git a/src/lib/providers/prime-preset/tokens/components/megamenu.ts b/src/lib/providers/prime-preset/tokens/components/megamenu.ts index 13d244c6..542864b7 100644 --- a/src/lib/providers/prime-preset/tokens/components/megamenu.ts +++ b/src/lib/providers/prime-preset/tokens/components/megamenu.ts @@ -7,8 +7,8 @@ export const megamenuCss = ({ dt }: { dt: (token: string) => string }): string = /* ─── Типографика пунктов меню ─── */ .p-megamenu-item-label { - font-size: ${dt('megamenu.extend.fonts_fontSize_300')}; - font-weight: ${dt('megamenu.extend.fonts_fontWeight_regular')}; + font-size: ${dt('fonts.fontSize.300')}; + font-weight: ${dt('fonts.fontWeight.regular')}; } /* ─── Caption (описание) для кастомных пунктов ─── */ @@ -19,7 +19,7 @@ export const megamenuCss = ({ dt }: { dt: (token: string) => string }): string = } .p-megamenu .megamenu-item-caption { - font-size: ${dt('megamenu.extend.fonts_fontSize_200')}; + font-size: ${dt('fonts.fontSize.200')}; color: ${dt('megamenu.extend.extItem.caption.color')}; } diff --git a/src/lib/providers/prime-preset/tokens/components/menu.ts b/src/lib/providers/prime-preset/tokens/components/menu.ts index 21732f10..7dbe6b88 100644 --- a/src/lib/providers/prime-preset/tokens/components/menu.ts +++ b/src/lib/providers/prime-preset/tokens/components/menu.ts @@ -4,10 +4,10 @@ export const menuCss = ({ dt }: { dt: (token: string) => string }): string => ` } .p-menu .p-menu-item-content .p-menu-item-link .p-menu-item-label { - font-family: ${dt('menu.extend.fonts_fontFamily_base')}; - font-size: ${dt('menu.extend.fonts_fontSize_300')}; - font-weight: ${dt('menu.extend.fonts_fontWeight_regular')}; - line-height: ${dt('menu.extend.fonts_lineHeight_400')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-size: ${dt('fonts.fontSize.300')}; + font-weight: ${dt('fonts.fontWeight.regular')}; + line-height: ${dt('fonts.lineHeight.400')}; } .p-menu .p-menu-item-content .menu-item-label { @@ -17,18 +17,18 @@ export const menuCss = ({ dt }: { dt: (token: string) => string }): string => ` } .p-menu .p-menu-item-content .menu-item-caption { - font-family: ${dt('menu.extend.fonts_fontFamily_base')}; - font-size: ${dt('menu.extend.fonts_fontSize_200')}; - font-weight: ${dt('menu.extend.fonts_fontWeight_regular')}; - color: ${dt('menu.colorScheme.light.extend.extItem.caption.color')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-size: ${dt('fonts.fontSize.200')}; + font-weight: ${dt('fonts.fontWeight.regular')}; + color: ${dt('color.fg.muted')}; } .p-menu .p-menu-item:not(.p-disabled) .p-menu-item-content:hover, .p-menu .p-menu-item:not(.p-disabled) .p-menu-item-content:hover .p-menu-item-link, .p-menu .p-menu-item:not(.p-disabled) .p-menu-item-content:hover .p-menu-item-label, .p-menu .p-menu-item:not(.p-disabled) .p-menu-item-content:hover .p-menu-item-icon { - background: ${dt('menu.colorScheme.light.item.focusBackground')}; - color: ${dt('menu.colorScheme.light.item.focusColor')}; + background: ${dt('color.bg.neutral.weak.hover')}; + color: ${dt('color.fg.default')}; } .p-menu .p-menu-item.p-menuitem-checked > .p-menu-item-content, @@ -46,22 +46,22 @@ export const menuCss = ({ dt }: { dt: (token: string) => string }): string => ` .p-menu .p-menu-item.p-menuitem-checked > .p-menu-item-content .p-menu-item-icon, .p-menu .p-menu-item.p-focus > .p-menu-item-content .p-menu-item-icon { - color: ${dt('menu.colorScheme.light.extend.extItem.icon.activeColor')}; + color: ${dt('color.fg.inverse.default')}; } .p-menu .p-menu-item.p-menuitem-checked:not(.p-disabled) > .p-menu-item-content:hover { - background: ${dt('menu.colorScheme.light.item.focusBackground')}; - color: ${dt('menu.colorScheme.light.item.focusColor')}; + background: ${dt('color.bg.neutral.weak.hover')}; + color: ${dt('color.fg.default')}; } .p-menu .p-menu-item.p-menuitem-checked:not(.p-disabled) > .p-menu-item-content:hover .p-menu-item-icon { - color: ${dt('menu.colorScheme.light.item.focusColor')}; + color: ${dt('color.fg.default')}; } .p-menu .p-menu-submenu-label { text-transform: uppercase; - font-size: ${dt('menu.extend.fonts_fontSize_200')}; - font-family: ${dt('menu.extend.fonts_fontFamily_heading')}; - line-height: ${dt('menu.extend.fonts_lineHeight_400')}; + font-size: ${dt('fonts.fontSize.200')}; + font-family: ${dt('fonts.fontFamily.heading')}; + line-height: ${dt('fonts.lineHeight.400')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/menubar.ts b/src/lib/providers/prime-preset/tokens/components/menubar.ts index cd566216..6e2202a7 100644 --- a/src/lib/providers/prime-preset/tokens/components/menubar.ts +++ b/src/lib/providers/prime-preset/tokens/components/menubar.ts @@ -5,13 +5,13 @@ export const menubarCss = ({ dt }: { dt: (token: string) => string }): string => } .p-menubar-item-label { - font-family: ${dt('menubar.extend.fonts_fontFamily_base')}; - font-size: ${dt('menubar.extend.fonts_fontSize_300')}; - font-weight: ${dt('menubar.extend.fonts_fontWeight_regular')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-size: ${dt('fonts.fontSize.300')}; + font-weight: ${dt('fonts.fontWeight.regular')}; } .p-menubar-item-caption { - font-size: ${dt('menubar.extend.fonts_fontSize_200')}; + font-size: ${dt('fonts.fontSize.200')}; color: ${dt('menubar.extend.extItem.caption.color')}; } @@ -22,7 +22,7 @@ export const menubarCss = ({ dt }: { dt: (token: string) => string }): string => } .p-menubar .menubar-item-caption { - font-size: ${dt('menubar.extend.fonts_fontSize_200')}; + font-size: ${dt('fonts.fontSize.200')}; color: ${dt('menubar.extend.extItem.caption.color')}; } diff --git a/src/lib/providers/prime-preset/tokens/components/message.ts b/src/lib/providers/prime-preset/tokens/components/message.ts index f5ba9525..bfb4aeba 100644 --- a/src/lib/providers/prime-preset/tokens/components/message.ts +++ b/src/lib/providers/prime-preset/tokens/components/message.ts @@ -1,3 +1,7 @@ +/** + * Кастомная CSS-стилизация для компонента p-message. + * Подключается в map-tokens.ts: `import { messageCss } from './tokens/components/message'` + */ export const messageCss = ({ dt }: { dt: (token: string) => string }): string => ` /* Основной контейнер message */ .p-message { @@ -33,18 +37,18 @@ export const messageCss = ({ dt }: { dt: (token: string) => string }): string => /* Заголовок message */ .p-message-summary { - font-family: ${dt('message.extend.fonts_fontFamily_base')}; + font-family: ${dt('fonts.fontFamily.base')}; font-weight: ${dt('message.text.fontWeight')}; - line-height: ${dt('message.extend.fonts_lineHeight_250')}; + line-height: ${dt('fonts.lineHeight.250')}; font-size: ${dt('message.text.fontSize')}; } /* Детальное описание message */ .p-message .p-message-detail { - font-family: ${dt('message.extend.fonts_fontFamily_base')}; - font-size: ${dt('message.extend.fonts_fontSize_200')}; - line-height: ${dt('message.extend.fonts_lineHeight_250')}; - font-weight: ${dt('message.extend.fonts_fontWeight_regular')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-size: ${dt('fonts.fontSize.200')}; + line-height: ${dt('fonts.lineHeight.250')}; + font-weight: ${dt('fonts.fontWeight.regular')}; } /* Кнопка закрытия message */ @@ -156,4 +160,18 @@ export const messageCss = ({ dt }: { dt: (token: string) => string }): string => .p-message-error .p-message-accent-line { background: ${dt('message.extend.extError.color')}; } + + /* Цвет подписи по типам: дизайн задаёт его отдельно от цвета акцента */ + .p-message-info .p-message-detail { + color: ${dt('message.extend.extInfo.caption.color')}; + } + .p-message-success .p-message-detail { + color: ${dt('message.extend.extSuccess.caption.color')}; + } + .p-message-warn .p-message-detail { + color: ${dt('message.extend.extWarn.caption.color')}; + } + .p-message-error .p-message-detail { + color: ${dt('message.extend.extError.caption.color')}; + } `; diff --git a/src/lib/providers/prime-preset/tokens/components/metergroup.ts b/src/lib/providers/prime-preset/tokens/components/metergroup.ts index b4864b69..eb46c743 100644 --- a/src/lib/providers/prime-preset/tokens/components/metergroup.ts +++ b/src/lib/providers/prime-preset/tokens/components/metergroup.ts @@ -1,16 +1,16 @@ export const metergroupCss = ({ dt }: { dt: (path: string) => string }) => ` .p-metergroup-label-text { - font-family: ${dt('metergroup.extend.fonts_fontFamily_base')}; - font-size: ${dt('metergroup.extend.fonts_fontSize_200')}; - font-weight: ${dt('metergroup.extend.fonts_fontWeight_regular')}; - line-height: ${dt('metergroup.extend.fonts_lineHeight_200')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-size: ${dt('fonts.fontSize.200')}; + font-weight: ${dt('fonts.fontWeight.regular')}; + line-height: ${dt('fonts.lineHeight.250')}; color: ${dt('metergroup.extend.extLabel.color')}; } .p-metergroup-label .p-metergroup-label-text + span { - font-family: ${dt('metergroup.extend.fonts_fontFamily_base')}; - font-size: ${dt('metergroup.extend.fonts_fontSize_200')}; - font-weight: ${dt('metergroup.extend.fonts_fontWeight_medium')}; - color: ${dt('metergroup.extend.text_color')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-size: ${dt('fonts.fontSize.200')}; + font-weight: ${dt('fonts.fontWeight.medium')}; + color: ${dt('color.fg.default')}; } .p-metergroup-horizontal .p-metergroup-meter { min-height: 100%; } .p-metergroup-vertical .p-metergroup-meter { min-width: 100%; } diff --git a/src/lib/providers/prime-preset/tokens/components/paginator.ts b/src/lib/providers/prime-preset/tokens/components/paginator.ts index 2161399c..061b759f 100644 --- a/src/lib/providers/prime-preset/tokens/components/paginator.ts +++ b/src/lib/providers/prime-preset/tokens/components/paginator.ts @@ -1,18 +1,18 @@ export const paginatorCss = ({ dt }: { dt: (token: string) => string }): string => ` /* ─── Current page report ─── */ .p-paginator .p-paginator-current { - font-family: ${dt('paginator.extend.fonts_fontFamily_base')}; - font-size: ${dt('paginator.extend.fonts_fontSize_300')}; - font-weight: ${dt('paginator.extend.fonts_fontWeight_regular')}; - line-height: ${dt('paginator.extend.fonts_lineHeight_250')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-size: ${dt('fonts.fontSize.300')}; + font-weight: ${dt('fonts.fontWeight.regular')}; + line-height: ${dt('fonts.lineHeight.250')}; color: ${dt('paginator.currentPageReport.color')}; } /* ─── Page number buttons ─── */ .p-paginator .p-paginator-page { - font-family: ${dt('paginator.extend.fonts_fontFamily_base')}; - font-size: ${dt('paginator.extend.fonts_fontSize_300')}; - font-weight: ${dt('paginator.extend.fonts_fontWeight_regular')}; - line-height: ${dt('paginator.extend.fonts_lineHeight_250')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-size: ${dt('fonts.fontSize.300')}; + font-weight: ${dt('fonts.fontWeight.regular')}; + line-height: ${dt('fonts.lineHeight.250')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/panelmenu.ts b/src/lib/providers/prime-preset/tokens/components/panelmenu.ts index 15177a06..eec1938d 100644 --- a/src/lib/providers/prime-preset/tokens/components/panelmenu.ts +++ b/src/lib/providers/prime-preset/tokens/components/panelmenu.ts @@ -9,7 +9,7 @@ export const panelmenuCss = ({ dt }: { dt: (token: string) => string }): string .p-panelmenu-header-content, .p-panelmenu-item-content { - font-size: ${dt('panelmenu.extend.fonts_fontSize_300')}; + font-size: ${dt('fonts.fontSize.300')}; } .p-panelmenu-submenu-icon { @@ -61,8 +61,8 @@ export const panelmenuCss = ({ dt }: { dt: (token: string) => string }): string } .p-panelmenu .panelmenu-item-caption { - font-size: ${dt('panelmenu.extend.fonts_fontSize_200')}; - line-height: ${dt('panelmenu.extend.fonts_lineHeight_450')}; + font-size: ${dt('fonts.fontSize.200')}; + line-height: ${dt('fonts.lineHeight.500')}; color: ${dt('panelmenu.extend.extItem.caption.color')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/password.ts b/src/lib/providers/prime-preset/tokens/components/password.ts index 48931769..77da932f 100644 --- a/src/lib/providers/prime-preset/tokens/components/password.ts +++ b/src/lib/providers/prime-preset/tokens/components/password.ts @@ -16,22 +16,22 @@ export const passwordCss = ({ dt }: { dt: (token: string) => string }): string = } .p-password-meter-text { - font-family: ${dt('password.extend.fonts_fontFamily_base')}; - font-size: ${dt('password.extend.fonts_fontSize_200')}; - font-weight: ${dt('password.extend.fonts_fontWeight_regular')}; - line-height: ${dt('password.extend.fonts_lineHeight_250')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-size: ${dt('fonts.fontSize.200')}; + font-weight: ${dt('fonts.fontWeight.regular')}; + line-height: ${dt('fonts.lineHeight.250')}; color: ${dt('password.overlay.color')}; } /* ─── Focus ─── */ .p-password:has(.p-inputtext:enabled:focus) { - box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('inputtext.focusRing.color')}; + box-shadow: 0 0 0 ${dt('inputtext.root.focusRing.width')} ${dt('inputtext.root.focusRing.color')}; border-radius: ${dt('inputtext.root.borderRadius')}; } /* ─── Invalid + Focus ─── */ .p-password:has(.p-inputtext.p-invalid:focus) { - box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('password.extend.focusRing_invalid')}; + box-shadow: 0 0 0 ${dt('inputtext.root.focusRing.width')} ${dt('color.bg.status.danger.weak.active')}; border-radius: ${dt('inputtext.root.borderRadius')}; } @@ -41,20 +41,20 @@ export const passwordCss = ({ dt }: { dt: (token: string) => string }): string = /* ─── FloatLabel ─── */ .p-floatlabel:has(.p-password) label { - font-family: ${dt('password.extend.fonts_fontFamily_base')}; - font-weight: ${dt('password.extend.floatlabel_root_fontWeight')}; - line-height: ${dt('password.extend.fonts_lineHeight_250')}; - color: ${dt('password.extend.floatlabel_root_color')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-weight: ${dt('fonts.fontWeight.regular')}; + line-height: ${dt('fonts.lineHeight.250')}; + color: ${dt('color.bg.neutral.medium.strong')}; } .p-floatlabel:has(.p-password) .p-floatlabel-active label { - font-weight: ${dt('password.extend.floatlabel_root_active_fontWeight')}; + font-weight: ${dt('fonts.fontWeight.regular')}; } .p-floatlabel-in .p-password .p-inputtext { - font-family: ${dt('password.extend.fonts_fontFamily_base')}; - padding-block-start: ${dt('password.extend.floatlabel_in_input_paddingTop')}; - padding-block-end: ${dt('password.extend.floatlabel_in_input_paddingBottom')}; + font-family: ${dt('fonts.fontFamily.base')}; + padding-block-start: ${dt('dimension.space.700')}; + padding-block-end: ${dt('dimension.space.300')}; } /* ─── Кастомный контент (правила пароля) ─── */ @@ -71,20 +71,20 @@ export const passwordCss = ({ dt }: { dt: (token: string) => string }): string = display: flex; align-items: center; gap: ${dt('password.content.gap')}; - font-family: ${dt('password.extend.fonts_fontFamily_base')}; - font-size: ${dt('password.extend.fonts_fontSize_200')}; - font-weight: ${dt('password.extend.fonts_fontWeight_regular')}; - line-height: ${dt('password.extend.fonts_lineHeight_250')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-size: ${dt('fonts.fontSize.200')}; + font-weight: ${dt('fonts.fontWeight.regular')}; + line-height: ${dt('fonts.lineHeight.250')}; color: ${dt('password.overlay.color')}; } /* ─── Состояния иконок правил ─── */ .p-password-rule i { - font-size: ${dt('password.extend.fonts_fontSize_200')}; + font-size: ${dt('fonts.fontSize.200')}; } .p-password-rule .ti-circle { - color: ${dt('password.extend.surface_400')}; + color: ${dt('color.fg.subtle')}; } .p-password-rule .ti-circle-check { diff --git a/src/lib/providers/prime-preset/tokens/components/progressbar.ts b/src/lib/providers/prime-preset/tokens/components/progressbar.ts index 1ce30601..eda95979 100644 --- a/src/lib/providers/prime-preset/tokens/components/progressbar.ts +++ b/src/lib/providers/prime-preset/tokens/components/progressbar.ts @@ -1,5 +1,5 @@ export const progressbarCss = ({ dt }: { dt: (path: string) => string }) => ` .p-progressbar-label { - font-family: ${dt('progressbar.extend.fonts_fontFamily_base')}; + font-family: ${dt('fonts.fontFamily.base')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/progressspinner.ts b/src/lib/providers/prime-preset/tokens/components/progressspinner.ts index 187b324a..194d3ed8 100644 --- a/src/lib/providers/prime-preset/tokens/components/progressspinner.ts +++ b/src/lib/providers/prime-preset/tokens/components/progressspinner.ts @@ -5,7 +5,7 @@ export const progressspinnerCss = ({ dt }: { dt: (token: string) => string }): s /* multicolor false */ .p-progressspinner.p-progressspinner-monochrome .p-progressspinner-circle { - stroke: ${dt('progressspinner.extend.primary_color')}; + stroke: ${dt('color.bg.brand.strong.default')}; animation: p-progressspinner-dash 1.5s ease-in-out infinite; } diff --git a/src/lib/providers/prime-preset/tokens/components/radiobutton.ts b/src/lib/providers/prime-preset/tokens/components/radiobutton.ts index 8f6b0c1a..c78f8701 100644 --- a/src/lib/providers/prime-preset/tokens/components/radiobutton.ts +++ b/src/lib/providers/prime-preset/tokens/components/radiobutton.ts @@ -3,7 +3,7 @@ export const radiobuttonCss = ({ dt }: { dt: (token: string) => string }): strin .p-radiobutton:not(.p-disabled):not(.p-invalid):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box, .p-radiobutton-checked:not(.p-disabled):not(.p-invalid):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { outline: none; - box-shadow: 0 0 0 ${dt('radiobutton.focusRing.width')} ${dt('radiobutton.extend.focusRing_success')}; + box-shadow: 0 0 0 ${dt('radiobutton.focusRing.width')} ${dt('color.border.focus')}; } /* Focus ring с красным цветом для состояний с ошибкой */ @@ -11,6 +11,6 @@ export const radiobuttonCss = ({ dt }: { dt: (token: string) => string }): strin .p-radiobutton.p-invalid:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box, .p-radiobutton-checked.p-invalid .p-radiobutton-box, .p-radiobutton-checked.p-invalid:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box { - box-shadow: 0 0 0 ${dt('radiobutton.focusRing.width')} ${dt('radiobutton.extend.focusRing_invalid')}; + box-shadow: 0 0 0 ${dt('radiobutton.focusRing.width')} ${dt('color.bg.status.danger.weak.active')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/select.ts b/src/lib/providers/prime-preset/tokens/components/select.ts index 21f5d564..6670fc3b 100644 --- a/src/lib/providers/prime-preset/tokens/components/select.ts +++ b/src/lib/providers/prime-preset/tokens/components/select.ts @@ -3,12 +3,12 @@ export const selectCss = ({ dt }: { dt: (token: string) => string }): string => .p-select.p-component { width: 100%; border-width: ${dt('select.extend.borderWidth')}; - line-height: ${dt('select.extend.fonts_lineHeight_250')}; + line-height: ${dt('fonts.lineHeight.250')}; } .p-select.p-component .p-select-label, .p-select-option { - font-family: ${dt('select.extend.fonts_fontFamily_base')}; + font-family: ${dt('fonts.fontFamily.base')}; } /* ─── Focus ─── */ @@ -19,7 +19,7 @@ export const selectCss = ({ dt }: { dt: (token: string) => string }): string => /* ─── Invalid + Focus ─── */ .p-select.p-component.p-invalid.p-focus { border-color: ${dt('select.root.invalidBorderColor')}; - box-shadow: 0 0 0 ${dt('select.root.focusRing.width')} ${dt('select.extend.focusRing_invalid')}; + box-shadow: 0 0 0 ${dt('select.root.focusRing.width')} ${dt('color.bg.status.danger.weak.active')}; } /* ─── Readonly ─── */ @@ -44,20 +44,20 @@ export const selectCss = ({ dt }: { dt: (token: string) => string }): string => /* ─── FloatLabel ─── */ .p-floatlabel:has(.p-select.p-component) label { - font-family: ${dt('select.extend.fonts_fontFamily_base')}; - font-weight: ${dt('select.extend.floatlabel_root_fontWeight')}; - line-height: ${dt('select.extend.fonts_lineHeight_250')}; - color: ${dt('select.extend.floatlabel_root_color')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-weight: ${dt('fonts.fontWeight.regular')}; + line-height: ${dt('fonts.lineHeight.250')}; + color: ${dt('color.bg.neutral.medium.strong')}; } .p-floatlabel:has(.p-select.p-component) .p-floatlabel-active label { - font-weight: ${dt('select.extend.floatlabel_root_active_fontWeight')}; + font-weight: ${dt('fonts.fontWeight.regular')}; } .p-floatlabel-in .p-select.p-component .p-select-label { - font-family: ${dt('select.extend.fonts_fontFamily_base')}; - padding-block-start: ${dt('select.extend.floatlabel_in_input_paddingTop')}; - padding-block-end: ${dt('select.extend.floatlabel_in_input_paddingBottom')}; + font-family: ${dt('fonts.fontFamily.base')}; + padding-block-start: ${dt('dimension.space.700')}; + padding-block-end: ${dt('dimension.space.300')}; } /* ─── Checkmark: выбранный элемент ─── */ diff --git a/src/lib/providers/prime-preset/tokens/components/selectbutton.ts b/src/lib/providers/prime-preset/tokens/components/selectbutton.ts index 5eeb74a9..89dd1c8a 100644 --- a/src/lib/providers/prime-preset/tokens/components/selectbutton.ts +++ b/src/lib/providers/prime-preset/tokens/components/selectbutton.ts @@ -1,23 +1,30 @@ +/** + * Кастомная CSS-стилизация для компонента p-selectbutton. + * Подключается в map-tokens.ts: `import { selectbuttonCss } from './tokens/components/selectbutton'` + * + * Высоты и hover-рамка берутся из токенов togglebutton: selectbutton — контейнер кнопок-переключателей, + * и их размерная лестница задаётся дизайном именно там. + */ export const selectbuttonCss = ({ dt }: { dt: (token: string) => string }): string => ` .p-selectbutton.p-component { background: ${dt('selectbutton.colorScheme.light.extend.background')}; padding: ${dt('selectbutton.extend.paddingY')} ${dt('selectbutton.extend.paddingX')}; gap: ${dt('selectbutton.extend.gap')}; - font-family: ${dt('selectbutton.extend.fonts_fontFamily_heading')}; - font-weight: ${dt('selectbutton.extend.fonts_fontWeight_demibold')}; + font-family: ${dt('fonts.fontFamily.heading')}; + font-weight: ${dt('fonts.fontWeight.demibold')}; } .p-selectbutton.p-component .p-togglebutton.p-component { - font-family: ${dt('selectbutton.extend.fonts_fontFamily_heading')}; - font-weight: ${dt('selectbutton.extend.fonts_fontWeight_demibold')}; - line-height: ${dt('selectbutton.extend.fonts_lineHeight_500')}; - height: ${dt('selectbutton.extend.controls_iconOnly_700')}; + font-family: ${dt('fonts.fontFamily.heading')}; + font-weight: ${dt('fonts.fontWeight.demibold')}; + line-height: ${dt('fonts.lineHeight.500')}; + height: ${dt('togglebutton.extend.iconOnlyWidth')}; border-radius: ${dt('selectbutton.extend.ext.borderRadius')}; } .p-selectbutton.p-component .p-togglebutton .p-togglebutton-label, .p-selectbutton.p-component .p-togglebutton .p-togglebutton-content > span { - line-height: ${dt('selectbutton.extend.fonts_lineHeight_400')}; + line-height: ${dt('fonts.lineHeight.400')}; } .p-selectbutton.p-component .p-togglebutton.p-togglebutton-checked.p-component, @@ -35,13 +42,13 @@ export const selectbuttonCss = ({ dt }: { dt: (token: string) => string }): stri /* Size: small */ .p-selectbutton.p-selectbutton-small.p-component .p-togglebutton.p-component { - line-height: ${dt('selectbutton.extend.fonts_lineHeight_300')}; - height: ${dt('selectbutton.extend.controls_iconOnly_600')}; + line-height: ${dt('fonts.lineHeight.300')}; + height: ${dt('togglebutton.extend.extSm.iconOnlyWidth')}; } .p-selectbutton.p-selectbutton-small.p-component .p-togglebutton .p-togglebutton-label, .p-selectbutton.p-selectbutton-small.p-component .p-togglebutton .p-togglebutton-content > span { - line-height: ${dt('selectbutton.extend.fonts_lineHeight_250')}; + line-height: ${dt('fonts.lineHeight.250')}; } .p-selectbutton.p-selectbutton-small.p-component .p-togglebutton .p-togglebutton-icon, @@ -57,13 +64,13 @@ export const selectbuttonCss = ({ dt }: { dt: (token: string) => string }): stri /* Size: large */ .p-selectbutton.p-selectbutton-large.p-component .p-togglebutton.p-component { - line-height: ${dt('selectbutton.extend.fonts_lineHeight_550')}; - height: ${dt('selectbutton.extend.controls_iconOnly_850')}; + line-height: ${dt('fonts.lineHeight.550')}; + height: ${dt('togglebutton.extend.extLg.iconOnlyWidth')}; } .p-selectbutton.p-selectbutton-large.p-component .p-togglebutton .p-togglebutton-label, .p-selectbutton.p-selectbutton-large.p-component .p-togglebutton .p-togglebutton-content > span { - line-height: ${dt('selectbutton.extend.fonts_lineHeight_550')}; + line-height: ${dt('fonts.lineHeight.550')}; } .p-selectbutton.p-selectbutton-large.p-component .p-togglebutton .p-togglebutton-icon, @@ -73,14 +80,14 @@ export const selectbuttonCss = ({ dt }: { dt: (token: string) => string }): stri /* Size: xlarge */ .p-selectbutton.p-selectbutton-xlarge.p-component .p-togglebutton.p-component { - font-size: ${dt('selectbutton.extend.fonts_fontSize_600')}; - line-height: ${dt('selectbutton.extend.fonts_lineHeight_550')}; - height: ${dt('selectbutton.extend.controls_iconOnly_900')}; + font-size: ${dt('fonts.fontSize.600')}; + line-height: ${dt('fonts.lineHeight.550')}; + height: ${dt('togglebutton.extend.extXlg.iconOnlyWidth')}; } .p-selectbutton.p-selectbutton-xlarge.p-component .p-togglebutton .p-togglebutton-label, .p-selectbutton.p-selectbutton-xlarge.p-component .p-togglebutton .p-togglebutton-content > span { - line-height: ${dt('selectbutton.extend.fonts_lineHeight_700')}; + line-height: ${dt('fonts.lineHeight.700')}; } .p-selectbutton.p-selectbutton-xlarge.p-component .p-togglebutton .p-togglebutton-icon, diff --git a/src/lib/providers/prime-preset/tokens/components/slider.ts b/src/lib/providers/prime-preset/tokens/components/slider.ts index 6fca119d..b2d3acab 100644 --- a/src/lib/providers/prime-preset/tokens/components/slider.ts +++ b/src/lib/providers/prime-preset/tokens/components/slider.ts @@ -5,7 +5,7 @@ export const sliderCss = ({ dt }: { dt: (token: string) => string }): string => ` /* ─── Focus ring ползунка ─── */ .p-slider-handle:focus-visible { - outline: ${dt('slider.handle.focusRing.width')} ${dt('slider.handle.focusRing.style')} ${dt('slider.extend.focusRing_success')}; + outline: ${dt('slider.handle.focusRing.width')} ${dt('slider.handle.focusRing.style')} ${dt('color.border.focus')}; outline-offset: ${dt('slider.handle.focusRing.offset')}; box-shadow: none; } diff --git a/src/lib/providers/prime-preset/tokens/components/stepper.ts b/src/lib/providers/prime-preset/tokens/components/stepper.ts index ed130d89..debe5e42 100644 --- a/src/lib/providers/prime-preset/tokens/components/stepper.ts +++ b/src/lib/providers/prime-preset/tokens/components/stepper.ts @@ -5,7 +5,7 @@ export const stepperCss = ({ dt }: { dt: (token: string) => string }): string => display: flex; flex-direction: column; gap: ${dt('stepper.extend.extCaption.gap')}; - line-height: ${dt('stepper.extend.fonts_lineHeight_200')}; + line-height: ${dt('fonts.lineHeight.250')}; align-items: flex-start; text-align: left; } @@ -14,19 +14,19 @@ export const stepperCss = ({ dt }: { dt: (token: string) => string }): string => .p-stepper .p-step-title .caption-secondary { display: flex; justify-content: flex-start; - font-family: ${dt('stepper.extend.fonts_fontFamily_base')}; - font-size: ${dt('stepper.extend.fonts_fontSize_200')}; - font-weight: ${dt('stepper.extend.fonts_fontWeight_regular')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-size: ${dt('fonts.fontSize.200')}; + font-weight: ${dt('fonts.fontWeight.regular')}; line-height: normal; - color: ${dt('stepper.extend.text_mutedColor')}; + color: ${dt('color.fg.muted')}; } /* Номер шага */ .p-stepper .p-step-number { - font-family: ${dt('stepper.extend.fonts_fontFamily_base')}; - font-size: ${dt('stepper.extend.fonts_fontSize_300')}; - font-weight: ${dt('stepper.extend.fonts_fontWeight_medium')}; - line-height: ${dt('stepper.extend.fonts_lineHeight_150')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-size: ${dt('fonts.fontSize.300')}; + font-weight: ${dt('fonts.fontWeight.medium')}; + line-height: ${dt('fonts.lineHeight.250')}; } /* Border для номера шага */ @@ -43,8 +43,8 @@ export const stepperCss = ({ dt }: { dt: (token: string) => string }): string => /* Step-number с иконкой */ .p-stepper .p-step-number:has(i) { - background: ${dt('stepper.extend.background_transparent')}; - border-color: ${dt('stepper.extend.background_transparent')}; + background: transparent; + border-color: transparent; } /* Размер иконок в step-number */ @@ -59,6 +59,6 @@ export const stepperCss = ({ dt }: { dt: (token: string) => string }): string => /* Прозрачный фон для панелей */ .p-stepper .p-steppanel { - background: ${dt('stepper.extend.background_transparent')}; + background: transparent; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/tabs.ts b/src/lib/providers/prime-preset/tokens/components/tabs.ts index 1bf7a783..e9cc5dcf 100644 --- a/src/lib/providers/prime-preset/tokens/components/tabs.ts +++ b/src/lib/providers/prime-preset/tokens/components/tabs.ts @@ -12,9 +12,9 @@ export const tabsCss = ({ dt }: { dt: (token: string) => string }): string => ` display: flex; align-items: center; gap: ${dt('tabs.tab.gap')}; - font-family: ${dt('tabs.extend.fonts_fontFamily_heading')}; - font-size: ${dt('tabs.extend.fonts_fontSize_300')}; - font-weight: ${dt('tabs.extend.fonts_fontWeight_demibold')}; + font-family: ${dt('fonts.fontFamily.heading')}; + font-size: ${dt('fonts.fontSize.300')}; + font-weight: ${dt('fonts.fontWeight.demibold')}; } /* Стили для tablist с правильной границей */ diff --git a/src/lib/providers/prime-preset/tokens/components/tag.ts b/src/lib/providers/prime-preset/tokens/components/tag.ts index 4d288fcb..7f84dbe3 100644 --- a/src/lib/providers/prime-preset/tokens/components/tag.ts +++ b/src/lib/providers/prime-preset/tokens/components/tag.ts @@ -1,6 +1,6 @@ export const tagCss = ({ dt }: { dt: (token: string) => string }): string => ` .p-tag { - font-family: ${dt('tag.extend.fonts_fontFamily_base')}; - line-height: ${dt('tag.extend.fonts_lineHeight_250')}; + font-family: ${dt('fonts.fontFamily.base')}; + line-height: ${dt('fonts.lineHeight.250')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/textarea.ts b/src/lib/providers/prime-preset/tokens/components/textarea.ts index 1bc0d1e2..5721bf16 100644 --- a/src/lib/providers/prime-preset/tokens/components/textarea.ts +++ b/src/lib/providers/prime-preset/tokens/components/textarea.ts @@ -3,17 +3,17 @@ export const textareaCss = ({ dt }: { dt: (token: string) => string }): string = /* --- Base --- */ .p-textarea { border-width: ${dt('textarea.extend.borderWidth')}; - line-height: ${dt('textarea.extend.fonts_lineHeight_250')}; + line-height: ${dt('fonts.lineHeight.250')}; min-height: ${dt('textarea.extend.minHeight')}; - font-family: ${dt('textarea.extend.fonts_fontFamily_base')}; + font-family: ${dt('fonts.fontFamily.base')}; } .p-textarea::placeholder { - font-family: ${dt('textarea.extend.fonts_fontFamily_base')}; + font-family: ${dt('fonts.fontFamily.base')}; } .p-floatlabel:has(.p-textarea) label { - font-family: ${dt('textarea.extend.fonts_fontFamily_base')}; + font-family: ${dt('fonts.fontFamily.base')}; } /* --- Sizes --- */ @@ -25,24 +25,24 @@ export const textareaCss = ({ dt }: { dt: (token: string) => string }): string = /* --- States --- */ .p-textarea:enabled:read-only { background: ${dt('textarea.extend.readonlyBackground')}; - color: ${dt('textarea.color')}; + color: ${dt('textarea.root.color')}; } .p-textarea:disabled { - background: ${dt('textarea.disabledBackground')}; - color: ${dt('textarea.disabledColor')}; + background: ${dt('textarea.root.disabledBackground')}; + color: ${dt('textarea.root.disabledColor')}; opacity: 1; } /* --- Focus --- */ .p-textarea:enabled:focus { - box-shadow: 0 0 0 ${dt('textarea.focusRing.width')} ${dt('textarea.focusRing.color')}; + box-shadow: 0 0 0 ${dt('textarea.root.focusRing.width')} ${dt('textarea.root.focusRing.color')}; } /* --- Invalid + Focus --- */ .p-textarea.p-invalid:focus { - border-color: ${dt('textarea.invalidBorderColor')}; - box-shadow: 0 0 0 ${dt('textarea.focusRing.width')} ${dt('textarea.extend.focusRing_invalid')}; + border-color: ${dt('textarea.root.invalidBorderColor')}; + box-shadow: 0 0 0 ${dt('textarea.root.focusRing.width')} ${dt('color.bg.status.danger.weak.active')}; } /* --- ClearButton (showClear) --- */ @@ -52,11 +52,11 @@ export const textareaCss = ({ dt }: { dt: (token: string) => string }): string = } .p-iconfield:has(.p-textarea) .p-textarea { - padding-right: ${dt('textarea.extend.form_padding_700')}; + padding-right: ${dt('dimension.space.700')}; } .p-iconfield:has(.p-textarea) .p-inputicon { - top: ${dt('textarea.extend.form_padding_500')}; + top: ${dt('dimension.space.500')}; transform: none; font-size: ${dt('textarea.extend.iconSize')}; width: ${dt('textarea.extend.iconSize')}; diff --git a/src/lib/providers/prime-preset/tokens/components/tieredmenu.ts b/src/lib/providers/prime-preset/tokens/components/tieredmenu.ts index 8acda6c8..bdef994f 100644 --- a/src/lib/providers/prime-preset/tokens/components/tieredmenu.ts +++ b/src/lib/providers/prime-preset/tokens/components/tieredmenu.ts @@ -4,7 +4,7 @@ export const tieredmenuCss = ({ dt }: { dt: (token: string) => string }): string } .p-tieredmenu-item-content { - font-size: ${dt('tieredmenu.extend.fonts_fontSize_300')}; + font-size: ${dt('fonts.fontSize.300')}; } .p-tieredmenu-submenu-icon { @@ -46,7 +46,7 @@ export const tieredmenuCss = ({ dt }: { dt: (token: string) => string }): string } .p-tieredmenu .p-tieredmenu-item-caption-text { - font-size: ${dt('tieredmenu.extend.fonts_fontSize_200')}; + font-size: ${dt('fonts.fontSize.200')}; color: ${dt('tieredmenu.extend.extItem.caption.color')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/timeline.ts b/src/lib/providers/prime-preset/tokens/components/timeline.ts index 454737d3..154d917f 100644 --- a/src/lib/providers/prime-preset/tokens/components/timeline.ts +++ b/src/lib/providers/prime-preset/tokens/components/timeline.ts @@ -2,10 +2,10 @@ export const timelineCss = ({ dt }: { dt: (token: string) => string }): string = /* ─── Типографика ─── */ .p-timeline { - font-family: ${dt('timeline.extend.fonts_fontFamily_base')}; - font-size: ${dt('timeline.extend.fonts_fontSize_300')}; - line-height: ${dt('timeline.extend.fonts_lineHeight_500')}; - color: ${dt('timeline.extend.text_color')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-size: ${dt('fonts.fontSize.300')}; + line-height: ${dt('fonts.lineHeight.500')}; + color: ${dt('color.fg.default')}; } /* ─── Маркер ─── */ diff --git a/src/lib/providers/prime-preset/tokens/components/toast.ts b/src/lib/providers/prime-preset/tokens/components/toast.ts index 36506ea2..adc64305 100644 --- a/src/lib/providers/prime-preset/tokens/components/toast.ts +++ b/src/lib/providers/prime-preset/tokens/components/toast.ts @@ -24,14 +24,14 @@ export const toastCss = ({ dt }: { dt: (token: string) => string }): string => ` /* Заголовок toast */ .p-toast-summary { - font-family: ${dt('toast.extend.fonts_fontFamily_base')}; - line-height: ${dt('toast.extend.fonts_lineHeight_250')}; + font-family: ${dt('fonts.fontFamily.base')}; + line-height: ${dt('fonts.lineHeight.250')}; } /* Детальное описание toast */ .p-toast-message .p-toast-detail { - font-family: ${dt('toast.extend.fonts_fontFamily_base')}; - line-height: ${dt('toast.extend.fonts_lineHeight_250')}; + font-family: ${dt('fonts.fontFamily.base')}; + line-height: ${dt('fonts.lineHeight.250')}; } /* Кнопка закрытия toast-сообщения */ diff --git a/src/lib/providers/prime-preset/tokens/components/togglebutton.ts b/src/lib/providers/prime-preset/tokens/components/togglebutton.ts index 68e7b83f..7052e804 100644 --- a/src/lib/providers/prime-preset/tokens/components/togglebutton.ts +++ b/src/lib/providers/prime-preset/tokens/components/togglebutton.ts @@ -1,10 +1,32 @@ +/** + * Кастомная CSS-стилизация для компонента p-togglebutton. + * Подключается в map-tokens.ts: `import { togglebuttonCss } from './tokens/components/togglebutton'` + * + * Высота у всех размеров задаётся явно из размерной лестницы дизайна + * (`extend.*.iconOnlyWidth` = 32/40/56/64px). Без этого высота текстовой кнопки выводилась + * из паддинга и расходилась с icon-only на 2–6px, а внутри select-button — ещё и с группой. + */ export const togglebuttonCss = ({ dt }: { dt: (token: string) => string }): string => ` /* ─── Типографика ─── */ .p-togglebutton.p-component { - font-family: ${dt('togglebutton.extend.fonts_fontFamily_heading')}; - font-weight: ${dt('togglebutton.extend.fonts_fontWeight_demibold')}; - line-height: ${dt('togglebutton.extend.fonts_lineHeight_500')}; + font-family: ${dt('fonts.fontFamily.heading')}; + font-weight: ${dt('fonts.fontWeight.demibold')}; + line-height: ${dt('fonts.lineHeight.500')}; +} + +/* ─── Высота по размерам: одна лестница для текстовых и icon-only ─── */ +.p-togglebutton.p-component { + height: ${dt('togglebutton.extend.iconOnlyWidth')}; +} +.p-togglebutton.p-togglebutton.p-component.p-togglebutton-sm { + height: ${dt('togglebutton.extend.extSm.iconOnlyWidth')}; +} +.p-togglebutton.p-togglebutton.p-component.p-togglebutton-lg { + height: ${dt('togglebutton.extend.extLg.iconOnlyWidth')}; +} +.p-togglebutton.p-togglebutton.p-component.p-togglebutton-xlarge { + height: ${dt('togglebutton.extend.extXlg.iconOnlyWidth')}; } /* ─── Hover unchecked ─── */ @@ -21,10 +43,10 @@ export const togglebuttonCss = ({ dt }: { dt: (token: string) => string }): stri /* ─── Small ─── */ .p-togglebutton.p-togglebutton.p-component.p-togglebutton-sm { - line-height: ${dt('togglebutton.extend.fonts_lineHeight_300')}; + line-height: ${dt('fonts.lineHeight.300')}; } .p-togglebutton.p-togglebutton.p-component.p-togglebutton-sm .p-togglebutton-label { - line-height: ${dt('togglebutton.extend.fonts_lineHeight_250')}; + line-height: ${dt('fonts.lineHeight.250')}; } .p-togglebutton.p-togglebutton.p-component.p-togglebutton-sm .p-togglebutton-icon { font-size: ${dt('togglebutton.extend.iconSize.sm')}; @@ -37,7 +59,7 @@ export const togglebuttonCss = ({ dt }: { dt: (token: string) => string }): stri /* ─── Large ─── */ .p-togglebutton.p-togglebutton.p-component.p-togglebutton-lg { - line-height: ${dt('togglebutton.extend.fonts_lineHeight_550')}; + line-height: ${dt('fonts.lineHeight.550')}; gap: ${dt('togglebutton.root.gap')}; } .p-togglebutton.p-togglebutton.p-component.p-togglebutton-lg .p-togglebutton-content { @@ -50,8 +72,8 @@ export const togglebuttonCss = ({ dt }: { dt: (token: string) => string }): stri /* ─── Extra Large ─── */ .p-togglebutton.p-togglebutton.p-component.p-togglebutton-xlarge { padding: ${dt('togglebutton.extend.extXlg.padding')}; - font-size: ${dt('togglebutton.extend.fonts_fontSize_500')}; - line-height: ${dt('togglebutton.extend.fonts_lineHeight_550')}; + font-size: ${dt('fonts.fontSize.500')}; + line-height: ${dt('fonts.lineHeight.550')}; display: inline-flex; align-items: center; justify-content: center; diff --git a/src/lib/providers/prime-preset/tokens/components/toggleswitch.ts b/src/lib/providers/prime-preset/tokens/components/toggleswitch.ts index 2c57e480..2278b508 100644 --- a/src/lib/providers/prime-preset/tokens/components/toggleswitch.ts +++ b/src/lib/providers/prime-preset/tokens/components/toggleswitch.ts @@ -1,11 +1,11 @@ export const toggleswitchCss = ({ dt }: { dt: (token: string) => string }): string => ` /* Focus ring для валидных состояний */ .p-toggleswitch:not(.p-disabled):not(.p-invalid):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider { - box-shadow: 0 0 0 ${dt('toggleswitch.root.focusRing.width')} ${dt('toggleswitch.extend.focusRing_success')}; + box-shadow: 0 0 0 ${dt('toggleswitch.root.focusRing.width')} ${dt('color.border.focus')}; } /* Focus ring для состояния ошибки */ .p-toggleswitch.p-invalid:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider { - box-shadow: 0 0 0 ${dt('toggleswitch.extend.focusRing_width')} ${dt('toggleswitch.extend.focusRing_invalid')}; + box-shadow: 0 0 0 ${dt('dimension.space.100')} ${dt('color.bg.status.danger.weak.active')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/tooltip.ts b/src/lib/providers/prime-preset/tokens/components/tooltip.ts index 3284de1b..8bbc215f 100644 --- a/src/lib/providers/prime-preset/tokens/components/tooltip.ts +++ b/src/lib/providers/prime-preset/tokens/components/tooltip.ts @@ -1,9 +1,9 @@ export const tooltipCss = ({ dt }: { dt: (token: string) => string }): string => ` /* Типографика для Tooltip */ .p-tooltip .p-tooltip-text { - font-family: ${dt('tooltip.extend.fonts_fontFamily_base')}; - font-size: ${dt('tooltip.extend.fonts_fontSize_200')}; - font-weight: ${dt('tooltip.extend.fonts_fontWeight_regular')}; - line-height: ${dt('tooltip.extend.fonts_lineHeight_300')}; + font-family: ${dt('fonts.fontFamily.base')}; + font-size: ${dt('fonts.fontSize.200')}; + font-weight: ${dt('fonts.fontWeight.regular')}; + line-height: ${dt('fonts.lineHeight.300')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/tokens.json b/src/lib/providers/prime-preset/tokens/tokens.json index a930e214..363335f8 100644 --- a/src/lib/providers/prime-preset/tokens/tokens.json +++ b/src/lib/providers/prime-preset/tokens/tokens.json @@ -3,7 +3,12 @@ "colors": { "alpha": { "white": { + "10": "rgba(255, 255, 255, 0.0100)", + "40": "rgba(255, 255, 255, 0.0400)", + "50": "rgba(255, 255, 255, 0.0500)", + "60": "rgba(255, 255, 255, 0.0600)", "100": "rgba(255, 255, 255, 0.1000)", + "160": "rgba(255, 255, 255, 0.1600)", "200": "rgba(255, 255, 255, 0.2000)", "300": "rgba(255, 255, 255, 0.3000)", "400": "rgba(255, 255, 255, 0.4000)", @@ -11,10 +16,12 @@ "600": "rgba(255, 255, 255, 0.6000)", "700": "rgba(255, 255, 255, 0.7000)", "800": "rgba(255, 255, 255, 0.8000)", + "870": "rgba(255, 255, 255, 0.8700)", "900": "rgba(255, 255, 255, 0.9000)", "1000": "#ffffff" }, "black": { + "40": "rgba(0, 0, 0, 0.0400)", "100": "rgba(0, 0, 0, 0.1000)", "200": "rgba(0, 0, 0, 0.2000)", "300": "rgba(0, 0, 0, 0.3000)", @@ -25,6 +32,34 @@ "800": "rgba(0, 0, 0, 0.8000)", "900": "rgba(0, 0, 0, 0.9000)", "1000": "#000000" + }, + "green": { + "40": "rgba(68, 232, 88, 0.04)", + "100": "rgba(68, 232, 88, 0.1)", + "200": "rgba(68, 232, 88, 0.2)", + "400": "rgba(68, 232, 88, 0.4)", + "600": "rgba(68, 232, 88, 0.6)" + }, + "blue": { + "40": "rgba(68, 150, 232, 0.04)", + "100": "rgba(68, 150, 232, 0.1)", + "200": "rgba(68, 150, 232, 0.2)", + "400": "rgba(68, 150, 232, 0.4)", + "600": "rgba(68, 150, 232, 0.6)" + }, + "yellow": { + "40": "rgba(245, 184, 61, 0.04)", + "100": "rgba(245, 184, 61, 0.1)", + "200": "rgba(245, 184, 61, 0.2)", + "400": "rgba(245, 184, 61, 0.4)", + "600": "rgba(245, 184, 61, 0.6)" + }, + "red": { + "40": "rgba(232, 82, 68, 0.04)", + "100": "rgba(232, 82, 68, 0.1)", + "200": "rgba(232, 82, 68, 0.2)", + "400": "rgba(232, 82, 68, 0.4)", + "600": "rgba(232, 82, 68, 0.6)" } }, "solid": { @@ -316,19 +351,90 @@ } } }, - "borderRadius": { - "100": "0.25rem", - "200": "0.5rem", - "300": "0.75rem", - "400": "1rem", - "500": "1.5rem", + "sizing": { "none": "0rem", - "max": "71.3571rem" + "05x": "0.0625rem", + "1x": "0.125rem", + "2x": "0.25rem", + "3x": "0.375rem", + "4x": "0.5rem", + "5x": "0.625rem", + "6x": "0.75rem", + "7x": "0.875rem", + "8x": "1rem", + "9x": "1.125rem", + "10x": "1.25rem", + "12x": "1.5rem", + "13x": "1.625rem", + "14x": "1.75rem", + "16x": "2rem", + "18x": "2.25rem", + "19x": "2.375rem", + "21x": "2.625rem", + "23x": "2.875rem", + "24x": "3rem", + "26x": "3.25rem", + "28x": "3.5rem", + "30x": "3.75rem", + "32x": "4rem", + "33x": "4.125rem", + "35x": "4.375rem", + "42x": "5.25rem", + "49x": "6.125rem", + "50x": "6.25rem", + "56x": "7rem", + "63x": "7.875rem", + "70x": "8.75rem", + "77x": "9.625rem", + "84x": "10.5rem", + "91x": "11.375rem", + "98x": "12.25rem", + "105x": "13.125rem", + "112x": "14rem", + "119x": "14.875rem", + "126x": "15.75rem", + "133x": "16.625rem", + "140x": "17.5rem", + "147x": "18.375rem", + "154x": "19.25rem", + "161x": "20.125rem", + "168x": "21rem", + "175x": "21.875rem", + "182x": "22.75rem", + "189x": "23.625rem", + "196x": "24.5rem", + "203x": "25.375rem", + "210x": "26.25rem", + "238x": "29.75rem", + "288x": "36rem", + "315x": "39.375rem", + "350x": "43.75rem", + "378x": "47.25rem", + "384x": "48rem", + "406x": "50.75rem", + "420x": "52.5rem", + "496x": "62rem", + "600x": "75rem", + "700x": "87.5rem", + "max": "100rem", + "20x": "2.5rem", + "40x": "5rem", + "120x": "15rem", + "136x": "17rem", + "152x": "19rem", + "200x": "25rem" }, - "borderWidth": { "100": "0.0714rem", "200": "0.1429rem", "300": "0.25rem", "none": "0rem" }, "fonts": { - "fontFamily": { "heading": "TT Fellows", "base": "Noto Sans" }, - "fontWeight": { "regular": 400, "medium": 500, "demibold": 600, "bold": 700 }, + "fontFamily": { + "base": "Noto Sans", + "heading": "TT Fellows" + }, + "fontWeight": { + "regular": "400", + "medium": "500", + "demibold": "600", + "bold": "700" + }, "fontSize": { "100": "0.75rem", "200": "0.875rem", @@ -344,3331 +450,5296 @@ "1000": "6rem" }, "lineHeight": { - "100": "0.7857rem", - "150": "0.8571rem", - "200": "0.9286rem", + "100": "0.75rem", + "150": "0.875rem", + "200": "0.875rem", "250": "1rem", - "300": "1.0714rem", - "350": "1.1429rem", - "400": "1.2857rem", - "450": "1.4286rem", + "300": "1.125rem", + "350": "1.125rem", + "400": "1.25rem", + "450": "1.375rem", "500": "1.5rem", - "550": "1.5714rem", - "600": "1.7143rem", - "700": "1.8571rem", - "800": "2.2857rem", - "850": "2.3571rem", - "900": "2.7857rem", - "1000": "3.3571rem", + "550": "1.625rem", + "600": "1.75rem", + "700": "1.875rem", + "800": "2.25rem", + "850": "2.375rem", + "900": "2.75rem", + "1000": "3.375rem", + "none": "1", "auto": "auto" }, "letterSpacing": { - "100": "-0.0071rem", - "200": "-0.0179rem", - "300": "-0.025rem", - "400": "-0.0357rem", - "500": "0rem" + "200": "-0.02rem", + "400": "-0.03rem", + "500": "0rem", + "600": "0.02rem", + "700": "0.03rem" } - }, - "spacing": { - "none": "0rem", - "1x": "0.25rem", - "2x": "0.5rem", - "3x": "0.75rem", - "4x": "1rem", - "5x": "1.25rem", - "6x": "1.5rem", - "7x": "1.75rem", - "8x": "2rem", - "9x": "2.25rem", - "10x": "2.5rem", - "11x": "2.75rem", - "12x": "3rem", - "14x": "3.5rem", - "16x": "4rem", - "20x": "5rem", - "24x": "6rem", - "28x": "7rem", - "32x": "8rem", - "36x": "9rem", - "40x": "10rem" - }, - "sizing": { - "none": "0rem", - "min": "0.0714rem", - "1x": "0.25rem", - "2x": "0.5rem", - "3x": "0.75rem", - "4x": "1rem", - "5x": "1.25rem", - "6x": "1.5rem", - "7x": "1.75rem", - "8x": "2rem", - "9x": "2.25rem", - "10x": "2.5rem", - "11x": "2.75rem", - "12x": "3rem", - "14x": "3.5rem", - "16x": "4rem", - "20x": "5rem", - "24x": "6rem", - "28x": "7rem", - "32x": "8rem", - "36x": "9rem", - "40x": "10rem", - "44x": "11rem", - "48x": "12rem", - "52x": "13rem", - "56x": "14rem", - "60x": "15rem", - "64x": "16rem", - "68x": "17rem", - "72x": "18rem", - "76x": "19rem", - "80x": "20rem", - "84x": "21rem", - "88x": "22rem", - "92x": "23rem", - "96x": "24rem", - "100x": "25rem", - "104x": "26rem", - "108x": "27rem", - "112x": "28rem", - "116x": "29rem", - "120x": "30rem", - "124x": "34rem", - "128x": "45rem", - "132x": "50rem", - "136x": "54rem", - "140x": "58rem", - "144x": "60rem", - "max": "100%" - }, - "shadows": { - "100": "0 0 0.1rem {colors.alpha.black.200}", - "200": "0 0 0.25rem {colors.alpha.black.200}", - "300": "0 0.1rem 0.25rem {colors.alpha.black.200}", - "400": "0 0.25rem 0.5rem {colors.alpha.black.200}", - "500": "0 0.5rem 1rem 0 {colors.alpha.black.200}", - "none": "none" - }, - "transition": { - "easing": { - "linear": "linear", - "in": "cubic-bezier(0.55, 0.06, 0.7, 0.2)", - "out": "cubic-bezier(0.2, 0.6, 0.4, 1)", - "inOut": "cubic-bezier(0.65, 0.05, 0.35, 1)" - }, - "duration": { "100": "140ms", "200": "180ms", "300": "240ms", "400": "320ms", "500": "400ms" } - }, - "opacity": { "250": 0.25, "500": 0.5, "1000": 1 } + } }, "semantic": { - "list": { - "padding": "{spacing.1x}", - "gap": { "100": "{spacing.1x}", "200": "{spacing.2x}" }, - "header": { "padding": "{spacing.4x} {spacing.4x} 0 {spacing.4x}" }, - "option": { "padding": "{spacing.2x} {spacing.3x}", "borderRadius": "{borderRadius.200}" }, - "optionGroup": { "padding": "{spacing.2x} {spacing.3x}", "fontWeight": "{fonts.fontWeight.demibold}" } - }, - "focusRing": { - "width": "{borderWidth.300}", - "style": "none", - "color": "{focusRing.extend.success}", - "offset": "0rem" - }, - "form": { - "padding": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.3x}", - "400": "{spacing.4x}", - "500": "{spacing.5x}", - "600": "{spacing.6x}", - "700": "{spacing.7x}" - }, - "borderRadius": { "100": "{borderRadius.200}", "200": "{borderRadius.300}", "300": "{borderRadius.max}" }, - "borderWidth": "{borderWidth.100}", - "icon": { - "100": "{sizing.2x}", - "200": "{sizing.3x}", - "300": "{sizing.4x}", - "400": "{sizing.5x}", - "500": "{sizing.6x}" + "colorScheme": { + "light": { + "color": { + "fg": { + "default": "{colors.solid.zinc.900}", + "hover": "{colors.solid.zinc.700}", + "active": "{colors.solid.zinc.950}", + "focus": "{colors.solid.zinc.900}", + "muted": "{colors.solid.zinc.500}", + "subtle": "{colors.solid.zinc.600}", + "brand": { + "default": "{colors.solid.green.500}", + "hover": "{colors.solid.green.600}", + "active": "{colors.solid.green.700}", + "disabled": "{colors.solid.green.300}", + "visited": "{colors.solid.green.800}", + "muted": "{colors.solid.green.400}" + }, + "inverse": { + "default": "{colors.alpha.white.1000}", + "hover": "{colors.alpha.white.1000}", + "active": "{colors.alpha.white.1000}", + "focus": "{colors.alpha.white.1000}", + "muted": "{colors.alpha.white.700}" + }, + "status": { + "danger": { + "default": "{colors.solid.red.500}", + "hover": "{colors.solid.red.600}", + "active": "{colors.solid.red.700}", + "disabled": "{colors.solid.red.300}", + "visited": "{colors.solid.red.800}", + "muted": "{colors.solid.red.400}" + }, + "info": { + "default": "{colors.solid.blue.500}", + "hover": "{colors.solid.blue.600}", + "active": "{colors.solid.blue.700}", + "disabled": "{colors.solid.blue.300}", + "visited": "{colors.solid.blue.800}", + "muted": "{colors.solid.blue.400}" + }, + "warning": { + "default": "{colors.solid.yellow.500}", + "hover": "{colors.solid.yellow.600}", + "active": "{colors.solid.yellow.700}", + "disabled": "{colors.solid.yellow.300}", + "visited": "{colors.solid.yellow.800}", + "muted": "{colors.solid.yellow.400}" + }, + "success": { + "default": "{colors.solid.green.500}", + "hover": "{colors.solid.green.600}", + "active": "{colors.solid.green.700}", + "disabled": "{colors.solid.green.300}", + "visited": "{colors.solid.green.800}", + "muted": "{colors.solid.green.400}" + }, + "help": { + "default": "{colors.solid.purple.500}", + "hover": "{colors.solid.purple.600}", + "active": "{colors.solid.purple.700}", + "disabled": "{colors.solid.purple.300}", + "visited": "{colors.solid.purple.800}", + "muted": "{colors.solid.purple.400}" + } + }, + "on": { + "brand": { + "default": "{colors.solid.zinc.900}", + "hover": "{colors.solid.zinc.900}", + "active": "{colors.solid.zinc.900}" + }, + "fill": { + "default": "{colors.alpha.white.1000}", + "hover": "{colors.alpha.white.1000}", + "active": "{colors.alpha.white.1000}", + "muted": "{colors.solid.zinc.200}" + }, + "status": { + "danger": { + "default": "{colors.solid.red.900}", + "hover": "{colors.solid.red.950}" + }, + "info": { + "default": "{colors.solid.blue.900}", + "hover": "{colors.solid.blue.950}" + }, + "warning": { + "default": "{colors.solid.yellow.900}", + "hover": "{colors.solid.yellow.950}" + }, + "success": { + "default": "{colors.solid.green.900}", + "hover": "{colors.solid.green.950}" + }, + "help": { + "default": "{colors.solid.purple.900}", + "hover": "{colors.solid.purple.950}" + } + } + } + }, + "bg": { + "status": { + "danger": { + "weak": { + "default": "{colors.solid.red.50}", + "hover": "{colors.solid.red.100}", + "active": "{colors.solid.red.200}" + }, + "strong": { + "default": "{colors.solid.red.300}", + "hover": "{colors.solid.red.400}", + "active": "{colors.solid.red.500}" + } + }, + "info": { + "weak": { + "default": "{colors.solid.blue.50}", + "hover": "{colors.solid.blue.100}", + "active": "{colors.solid.blue.200}" + }, + "strong": { + "default": "{colors.solid.blue.300}", + "hover": "{colors.solid.blue.400}", + "active": "{colors.solid.blue.500}" + } + }, + "warning": { + "weak": { + "default": "{colors.solid.yellow.50}", + "hover": "{colors.solid.yellow.100}", + "active": "{colors.solid.yellow.200}" + }, + "strong": { + "default": "{colors.solid.yellow.300}", + "hover": "{colors.solid.yellow.400}", + "active": "{colors.solid.yellow.500}" + } + }, + "success": { + "weak": { + "default": "{colors.solid.green.50}", + "hover": "{colors.solid.green.100}", + "active": "{colors.solid.green.200}" + }, + "strong": { + "default": "{colors.solid.green.300}", + "hover": "{colors.solid.green.400}", + "active": "{colors.solid.green.500}" + } + }, + "help": { + "weak": { + "default": "{colors.solid.purple.50}", + "hover": "{colors.solid.purple.100}", + "active": "{colors.solid.purple.200}" + }, + "strong": { + "default": "{colors.solid.purple.300}", + "hover": "{colors.solid.purple.400}", + "active": "{colors.solid.purple.500}" + } + } + }, + "brand": { + "weak": { + "hover": "{colors.solid.green.50}", + "active": "{colors.solid.green.100}" + }, + "strong": { + "default": "{colors.solid.green.500}", + "hover": "{colors.solid.green.600}", + "active": "{colors.solid.green.700}" + } + }, + "surface": { + "canvas": { + "default": "{colors.solid.zinc.100}", + "hover": "{colors.solid.zinc.200}", + "active": "{colors.solid.zinc.300}", + "selected": "{colors.solid.zinc.200}" + }, + "default": { + "default": "{colors.alpha.white.1000}", + "hover": "{colors.solid.zinc.50}", + "active": "{colors.solid.zinc.100}", + "selected": "{colors.solid.zinc.50}" + }, + "raised": { + "default": "{colors.alpha.white.1000}", + "hover": "{colors.solid.zinc.50}", + "active": "{colors.solid.zinc.100}", + "selected": "{colors.solid.zinc.50}" + }, + "overlay": { + "default": "{colors.alpha.white.1000}", + "hover": "{colors.solid.zinc.50}" + }, + "backdrop": "{colors.alpha.black.300}" + }, + "neutral": { + "weak": { + "default": "{colors.solid.zinc.100}", + "hover": "{colors.solid.zinc.200}", + "active": "{colors.solid.zinc.300}", + "disabled": "{colors.solid.zinc.200}" + }, + "medium": { + "default": "{colors.solid.zinc.200}", + "hover": "{colors.solid.zinc.300}", + "active": "{colors.solid.zinc.400}", + "strong": "{colors.solid.zinc.500}" + }, + "strong": { + "default": "{colors.solid.zinc.900}", + "hover": "{colors.solid.zinc.800}", + "active": "{colors.solid.zinc.700}", + "selected": "{colors.solid.zinc.900}" + } + } + }, + "border": { + "focus": "{colors.solid.green.200}", + "neutral": { + "default": "{colors.solid.zinc.200}", + "strong": "{colors.solid.zinc.300}", + "bold": { + "default": "{colors.solid.zinc.900}", + "hover": "{colors.solid.zinc.800}" + }, + "inverse": "{colors.alpha.white.1000}" + }, + "brand": { + "subtle": "{colors.solid.green.200}", + "default": "{colors.solid.green.500}", + "strong": "{colors.solid.green.600}" + }, + "status": { + "danger": { + "subtle": "{colors.solid.red.400}", + "default": "{colors.solid.red.500}", + "strong": "{colors.solid.red.600}" + }, + "info": { + "default": "{colors.solid.blue.500}", + "strong": "{colors.solid.blue.600}" + }, + "warning": { + "default": "{colors.solid.yellow.500}", + "strong": "{colors.solid.yellow.600}" + }, + "success": { + "default": "{colors.solid.green.500}", + "strong": "{colors.solid.green.600}" + }, + "help": { + "strong": "{colors.solid.purple.600}" + } + } + } + } }, - "transitionDuration": "{transition.duration.200}", - "size": { - "100": "{sizing.min}", - "150": "{sizing.1x}", - "200": "{sizing.2x}", - "250": "{sizing.3x}", - "300": "{sizing.4x}", - "350": "{sizing.5x}", - "400": "{sizing.6x}", - "500": "{sizing.8x}", + "dark": { + "color": { + "fg": { + "default": "{colors.alpha.white.1000}", + "hover": "{colors.solid.zinc.300}", + "active": "{colors.solid.zinc.100}", + "focus": "{colors.alpha.white.1000}", + "muted": "{colors.solid.zinc.400}", + "subtle": "{colors.solid.zinc.400}", + "brand": { + "default": "{colors.solid.green.400}", + "hover": "{colors.solid.green.300}", + "active": "{colors.solid.green.200}", + "disabled": "{colors.solid.green.700}", + "visited": "{colors.solid.green.300}", + "muted": "{colors.solid.green.500}" + }, + "inverse": { + "default": "{colors.solid.zinc.900}", + "hover": "{colors.solid.zinc.700}", + "active": "{colors.solid.zinc.950}", + "focus": "{colors.solid.zinc.900}", + "muted": "{colors.solid.zinc.500}" + }, + "status": { + "danger": { + "default": "{colors.solid.red.400}", + "hover": "{colors.solid.red.300}", + "active": "{colors.solid.red.200}", + "disabled": "{colors.solid.red.700}", + "visited": "{colors.solid.red.300}", + "muted": "{colors.solid.red.500}" + }, + "info": { + "default": "{colors.solid.blue.400}", + "hover": "{colors.solid.blue.300}", + "active": "{colors.solid.blue.200}", + "disabled": "{colors.solid.blue.700}", + "visited": "{colors.solid.blue.300}", + "muted": "{colors.solid.blue.500}" + }, + "warning": { + "default": "{colors.solid.yellow.400}", + "hover": "{colors.solid.yellow.300}", + "active": "{colors.solid.yellow.200}", + "disabled": "{colors.solid.yellow.700}", + "visited": "{colors.solid.yellow.300}", + "muted": "{colors.solid.yellow.500}" + }, + "success": { + "default": "{colors.solid.green.400}", + "hover": "{colors.solid.green.300}", + "active": "{colors.solid.green.200}", + "disabled": "{colors.solid.green.700}", + "visited": "{colors.solid.green.300}", + "muted": "{colors.solid.green.500}" + }, + "help": { + "default": "{colors.solid.purple.400}", + "hover": "{colors.solid.purple.300}", + "active": "{colors.solid.purple.200}", + "disabled": "{colors.solid.purple.700}", + "visited": "{colors.solid.purple.300}", + "muted": "{colors.solid.purple.500}" + } + }, + "on": { + "brand": { + "default": "{colors.solid.zinc.900}", + "hover": "{colors.solid.zinc.900}", + "active": "{colors.solid.zinc.900}" + }, + "fill": { + "default": "{colors.alpha.white.1000}", + "hover": "{colors.alpha.white.1000}", + "active": "{colors.alpha.white.1000}", + "muted": "{colors.solid.zinc.200}" + }, + "status": { + "danger": { + "default": "{colors.solid.red.100}", + "hover": "{colors.solid.red.50}" + }, + "info": { + "default": "{colors.solid.blue.100}", + "hover": "{colors.solid.blue.50}" + }, + "warning": { + "default": "{colors.solid.yellow.100}", + "hover": "{colors.solid.yellow.50}" + }, + "success": { + "default": "{colors.solid.green.100}", + "hover": "{colors.solid.green.50}" + }, + "help": { + "default": "{colors.solid.purple.100}", + "hover": "{colors.solid.purple.50}" + } + } + } + }, + "bg": { + "status": { + "danger": { + "weak": { + "default": "{colors.solid.red.950}", + "hover": "{colors.solid.red.900}", + "active": "{colors.solid.red.800}" + }, + "strong": { + "default": "{colors.solid.red.700}", + "hover": "{colors.solid.red.600}", + "active": "{colors.solid.red.500}" + } + }, + "info": { + "weak": { + "default": "{colors.solid.blue.950}", + "hover": "{colors.solid.blue.900}", + "active": "{colors.solid.blue.800}" + }, + "strong": { + "default": "{colors.solid.blue.700}", + "hover": "{colors.solid.blue.600}", + "active": "{colors.solid.blue.500}" + } + }, + "warning": { + "weak": { + "default": "{colors.solid.yellow.950}", + "hover": "{colors.solid.yellow.900}", + "active": "{colors.solid.yellow.800}" + }, + "strong": { + "default": "{colors.solid.yellow.700}", + "hover": "{colors.solid.yellow.600}", + "active": "{colors.solid.yellow.500}" + } + }, + "success": { + "weak": { + "default": "{colors.solid.green.950}", + "hover": "{colors.solid.green.900}", + "active": "{colors.solid.green.800}" + }, + "strong": { + "default": "{colors.solid.green.700}", + "hover": "{colors.solid.green.600}", + "active": "{colors.solid.green.500}" + } + }, + "help": { + "weak": { + "default": "{colors.solid.purple.950}", + "hover": "{colors.solid.purple.900}", + "active": "{colors.solid.purple.800}" + }, + "strong": { + "default": "{colors.solid.purple.700}", + "hover": "{colors.solid.purple.600}", + "active": "{colors.solid.purple.500}" + } + } + }, + "brand": { + "weak": { + "hover": "{colors.solid.green.950}", + "active": "{colors.solid.green.900}" + }, + "strong": { + "default": "{colors.solid.green.500}", + "hover": "{colors.solid.green.400}", + "active": "{colors.solid.green.300}" + } + }, + "surface": { + "canvas": { + "default": "{colors.solid.zinc.900}", + "hover": "{colors.solid.zinc.800}", + "active": "{colors.solid.zinc.700}", + "selected": "{colors.solid.zinc.800}" + }, + "default": { + "default": "{colors.solid.zinc.800}", + "hover": "{colors.solid.zinc.700}", + "active": "{colors.solid.zinc.600}", + "selected": "{colors.solid.zinc.700}" + }, + "raised": { + "default": "{colors.solid.zinc.700}", + "hover": "{colors.solid.zinc.600}", + "active": "{colors.solid.zinc.500}", + "selected": "{colors.solid.zinc.600}" + }, + "overlay": { + "default": "{colors.solid.zinc.800}", + "hover": "{colors.solid.zinc.700}" + }, + "backdrop": "{colors.alpha.black.300}" + }, + "neutral": { + "weak": { + "default": "{colors.solid.zinc.900}", + "hover": "{colors.solid.zinc.800}", + "active": "{colors.solid.zinc.700}", + "disabled": "{colors.solid.zinc.800}" + }, + "medium": { + "default": "{colors.solid.zinc.800}", + "hover": "{colors.solid.zinc.700}", + "active": "{colors.solid.zinc.600}", + "strong": "{colors.solid.zinc.500}" + }, + "strong": { + "default": "{colors.solid.zinc.100}", + "hover": "{colors.solid.zinc.200}", + "active": "{colors.solid.zinc.300}", + "selected": "{colors.solid.zinc.100}" + } + } + }, + "border": { + "focus": "{colors.solid.green.200}", + "neutral": { + "default": "{colors.solid.zinc.800}", + "strong": "{colors.solid.zinc.700}", + "bold": { + "default": "{colors.solid.zinc.100}", + "hover": "{colors.solid.zinc.200}" + }, + "inverse": "{colors.solid.zinc.900}" + }, + "brand": { + "subtle": "{colors.solid.green.800}", + "default": "{colors.solid.green.500}", + "strong": "{colors.solid.green.400}" + }, + "status": { + "danger": { + "subtle": "{colors.solid.red.600}", + "default": "{colors.solid.red.500}", + "strong": "{colors.solid.red.400}" + }, + "info": { + "default": "{colors.solid.blue.500}", + "strong": "{colors.solid.blue.400}" + }, + "warning": { + "default": "{colors.solid.yellow.500}", + "strong": "{colors.solid.yellow.400}" + }, + "success": { + "default": "{colors.solid.green.500}", + "strong": "{colors.solid.green.400}" + }, + "help": { + "strong": "{colors.solid.purple.400}" + } + } + } + } + } + }, + "dimension": { + "space": { + "none": "{sizing.none}", + "100": "{sizing.2x}", + "150": "{sizing.3x}", + "200": "{sizing.4x}", + "300": "{sizing.5x}", + "350": "{sizing.6x}", + "400": "{sizing.7x}", + "500": "{sizing.9x}", "600": "{sizing.10x}", "700": "{sizing.12x}", - "800": "{sizing.16x}", - "900": "{sizing.20x}" - }, - "width": "{sizing.68x}", - "gap": { "100": "{spacing.1x}", "200": "{spacing.2x}", "300": "{spacing.3x}", "400": "{spacing.4x}" }, - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}" - }, - "sm": { - "width": "{sizing.60x}", - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{spacing.3x}", - "paddingY": "{spacing.3x}" - }, - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{spacing.4x}", - "paddingY": "{spacing.4x}", - "lg": { - "width": "{sizing.76x}", - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{spacing.5x}", - "paddingY": "{spacing.5x}" - }, - "xlg": { - "width": "{sizing.84x}", - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{spacing.6x}", - "paddingY": "{spacing.6x}" - } - }, - "content": { - "padding": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.4x}", - "400": "{spacing.6x}", - "500": "{spacing.7x}" - }, - "borderRadius": "{borderRadius.300}", - "borderWidth": "{sizing.min}", - "gap": { "100": "{spacing.1x}", "200": "{spacing.2x}", "300": "{spacing.3x}", "400": "{spacing.4x}" } - }, - "navigation": { - "width": { "100": "{borderWidth.100}", "200": "{borderWidth.300}" }, - "padding": { "100": "{spacing.1x}", "200": "{spacing.3x}", "300": "{spacing.4x}", "400": "{spacing.6x}" }, - "borderRadius": "{borderRadius.100}", - "size": { - "100": "{sizing.1x}", - "200": "{sizing.2x}", - "300": "{sizing.5x}", - "400": "{sizing.8x}", - "500": "{sizing.16x}" - }, - "submenu": { "padding": "{spacing.5x}" }, - "list": { "padding": { "100": "{spacing.1x}", "200": "{spacing.2x}" }, "gap": "{spacing.1x}" }, - "item": { "padding": "{spacing.2x} {spacing.3x}", "borderRadius": "{borderRadius.200}", "gap": "{spacing.2x}" }, - "submenuLabel": { "padding": "{spacing.2x} {spacing.3x}", "fontWeight": "{fonts.fontWeight.demibold}" }, - "submenuIcon": { "size": "{fonts.fontSize.500}" } - }, - "overlay": { - "mask": { "transitionDuration": "{transition.duration.200}" }, - "select": { "borderRadius": "{borderRadius.300}", "padding": "{spacing.1x}" }, - "borderWidth": "{borderWidth.100}", - "icon": { - "size": { - "100": "{sizing.4x}", - "200": "{sizing.6x}", - "300": "{sizing.7x}", - "400": "{sizing.8x}", - "500": "{sizing.9x}" - } - }, - "popover": { - "borderRadius": "{borderRadius.200}", - "width": { "100": "{sizing.2x}", "200": "{sizing.3x}" }, - "padding": { "100": "{spacing.3x}", "200": "{spacing.5x}" } - }, - "modal": { - "borderRadius": "{borderRadius.500}", - "padding": { "100": "{spacing.4x}", "200": "{spacing.5x}", "300": "{spacing.6x}" } - }, - "gap": { "100": "{spacing.1x}", "200": "{spacing.2x}", "300": "{spacing.3x}", "400": "{spacing.4x}" }, - "width": "{sizing.100x}", - "drawer": { "padding": "{spacing.2x}", "margin": "{spacing.2x}" }, - "sm": { "width": "{sizing.80x}" }, - "lg": { "width": "{sizing.120x}" }, - "xlg": { "width": "{sizing.128x}" } - }, - "feedback": { - "transitionDuration": "{transition.duration.200}", - "width": { - "100": "{sizing.min}", - "200": "{sizing.1x}", - "300": "{sizing.2x}", - "400": "{sizing.3x}", - "500": "{sizing.4x}", - "550": "{sizing.5x}", - "600": "{sizing.6x}", - "650": "{sizing.7x}", - "700": "{sizing.8x}", - "800": "{sizing.12x}", - "900": "{sizing.16x}" - }, - "icon": { - "size": { - "100": "{sizing.2x}", - "200": "{sizing.4x}", - "300": "{sizing.6x}", - "350": "{sizing.7x}", - "400": "{sizing.8x}", - "500": "{sizing.9x}" + "800": "{sizing.14x}", + "negative": { + "50": "-0.125rem", + "200": "-0.5rem", + "300": "-0.75rem", + "600": "-1.5rem" } }, - "padding": { "100": "{spacing.2x}", "200": "{spacing.4x}" }, - "height": { - "100": "{sizing.2x}", - "200": "{sizing.3x}", - "300": "{sizing.4x}", - "400": "{sizing.5x}", - "500": "{sizing.6x}", - "600": "{sizing.7x}", - "650": "{sizing.8x}", - "700": "{sizing.9x}", - "750": "{sizing.10x}", - "800": "{sizing.11x}", - "850": "{sizing.12x}", - "900": "{sizing.16x}" - }, - "gap": { "100": "{spacing.1x}", "200": "{spacing.2x}", "300": "{spacing.3x}", "400": "{spacing.4x}" } - }, - "data": { - "padding": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.3x}", - "400": "{spacing.4x}", - "500": "{spacing.5x}" - }, - "icon": { - "size": { - "100": "{sizing.4x}", - "200": "{sizing.5x}", - "300": "{sizing.6x}", - "400": "{sizing.7x}", - "500": "{sizing.8x}", - "600": "{sizing.9x}", - "700": "{sizing.10x}" - } - }, - "transitionDuration": "{transition.duration.200}", - "borderWidth": "{borderWidth.none}", - "borderRadius": "{borderRadius.100}", - "gap": { "100": "{spacing.1x}", "200": "{spacing.2x}", "300": "{spacing.3x}" }, - "width": { "100": "{sizing.min}", "200": "{sizing.1x}", "300": "{sizing.2x}", "400": "{sizing.20x}" } - }, - "media": { "size": { - "100": "{sizing.1x}", - "200": "{sizing.2x}", - "300": "{sizing.8x}", - "400": "{sizing.10x}", - "500": "{sizing.14x}", - "600": "{sizing.16x}" + "none": "{sizing.none}", + "50": "{sizing.1x}", + "100": "{sizing.2x}", + "150": "{sizing.3x}", + "200": "{sizing.4x}", + "300": "{sizing.5x}", + "350": "{sizing.6x}", + "400": "{sizing.7x}", + "450": "{sizing.8x}", + "500": "{sizing.9x}", + "600": "{sizing.10x}", + "700": "{sizing.12x}", + "750": "{sizing.13x}", + "800": "{sizing.14x}", + "900": "{sizing.16x}", + "1000": "{sizing.18x}", + "1100": "{sizing.20x}", + "1200": "{sizing.24x}", + "1300": "{sizing.28x}", + "1400": "{sizing.32x}", + "1500": "{sizing.40x}", + "1600": "{sizing.120x}", + "1700": "{sizing.136x}", + "1800": "{sizing.152x}", + "1900": "{sizing.168x}", + "2000": "{sizing.200x}", + "max": "{sizing.max}" }, "borderRadius": { - "100": "{borderRadius.200}", - "200": "{borderRadius.300}", - "300": "{borderRadius.400}", - "400": "{borderRadius.500}", - "max": "{borderRadius.max}" - }, - "icon": { "size": { "100": "{sizing.4x}", "200": "{sizing.6x}", "300": "{sizing.8x}" } }, - "transitionDuration": "{transition.duration.200}", - "padding": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.3x}", - "400": "{spacing.4x}", - "500": "{spacing.5x}", - "600": "{spacing.6x}" - }, - "gap": { "100": "{spacing.1x}", "200": "{spacing.2x}" } - }, - "controls": { - "iconOnly": { + "none": "{sizing.none}", "100": "{sizing.2x}", "200": "{sizing.4x}", "300": "{sizing.5x}", - "400": "{sizing.6x}", - "500": "{sizing.7x}", - "600": "{sizing.8x}", - "700": "{sizing.10x}", - "800": "{sizing.11x}", - "850": "{sizing.14x}", - "900": "{sizing.16x}" - }, - "borderRadius": { "100": "{borderRadius.300}", "200": "{borderRadius.400}", "max": "{borderRadius.max}" }, - "padding": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.3x}", - "400": "{spacing.4x}", - "500": "{spacing.5x}", - "600": "{spacing.6x}" - }, - "transitionDuration": "{transition.duration.200}", - "gap": { "100": "{spacing.2x}", "200": "{spacing.3x}", "300": "{spacing.4x}" }, - "width": { "100": "{sizing.min}" } + "350": "{sizing.6x}", + "400": "{sizing.7x}", + "500": "{sizing.10x}", + "max": "{sizing.max}" + }, + "borderWidth": { + "none": "{sizing.none}", + "100": "{sizing.05x}", + "200": "{sizing.1x}", + "300": "{sizing.2x}" + }, + "focusRing": { + "width": "{sizing.2x}", + "offset": "{sizing.none}" + }, + "depth": { + "100": "1000", + "200": "1100", + "300": "1200", + "400": "1300", + "500": "1400", + "600": "1500", + "700": "1600" + }, + "viewport": { + "100": "{sizing.288x}", + "200": "{sizing.384x}", + "300": "{sizing.496x}", + "400": "{sizing.600x}", + "500": "{sizing.700x}" + } }, - "colorScheme": { - "light": { - "success": { - "50": "{colors.solid.green.50}", - "100": "{colors.solid.green.100}", - "200": "{colors.solid.green.200}", - "300": "{colors.solid.green.300}", - "400": "{colors.solid.green.400}", - "500": "{colors.solid.green.500}", - "600": "{colors.solid.green.600}", - "700": "{colors.solid.green.700}", - "800": "{colors.solid.green.800}", - "900": "{colors.solid.green.900}", - "950": "{colors.solid.green.950}" - }, - "info": { - "50": "{colors.solid.blue.50}", - "100": "{colors.solid.blue.100}", - "200": "{colors.solid.blue.200}", - "300": "{colors.solid.blue.300}", - "400": "{colors.solid.blue.400}", - "500": "{colors.solid.blue.500}", - "600": "{colors.solid.blue.600}", - "700": "{colors.solid.blue.700}", - "800": "{colors.solid.blue.800}", - "900": "{colors.solid.blue.900}", - "950": "{colors.solid.blue.950}" - }, - "warn": { - "50": "{colors.solid.yellow.50}", - "100": "{colors.solid.yellow.100}", - "200": "{colors.solid.yellow.200}", - "300": "{colors.solid.yellow.300}", - "400": "{colors.solid.yellow.400}", - "500": "{colors.solid.yellow.500}", - "600": "{colors.solid.yellow.600}", - "700": "{colors.solid.yellow.700}", - "800": "{colors.solid.yellow.800}", - "900": "{colors.solid.yellow.900}", - "950": "{colors.solid.yellow.950}" - }, - "transparent": "rgba(255, 255, 255, 0.0001)", - "help": { - "50": "{colors.solid.purple.50}", - "100": "{colors.solid.purple.100}", - "200": "{colors.solid.purple.200}", - "300": "{colors.solid.purple.300}", - "400": "{colors.solid.purple.400}", - "500": "{colors.solid.purple.500}", - "600": "{colors.solid.purple.600}", - "700": "{colors.solid.purple.700}", - "800": "{colors.solid.purple.800}", - "900": "{colors.solid.purple.900}", - "950": "{colors.solid.purple.950}" - }, - "error": { - "50": "{colors.solid.red.50}", - "100": "{colors.solid.red.100}", - "200": "{colors.solid.red.200}", - "300": "{colors.solid.red.300}", - "400": "{colors.solid.red.400}", - "500": "{colors.solid.red.500}", - "600": "{colors.solid.red.600}", - "700": "{colors.solid.red.700}", - "800": "{colors.solid.red.800}", - "900": "{colors.solid.red.900}", - "950": "{colors.solid.red.950}" - }, - "surface": { - "0": "{colors.alpha.white.1000}", - "50": "{colors.solid.zinc.50}", - "100": "{colors.solid.zinc.100}", - "200": "{colors.solid.zinc.200}", - "300": "{colors.solid.zinc.300}", - "400": "{colors.solid.zinc.400}", - "500": "{colors.solid.zinc.500}", - "600": "{colors.solid.zinc.600}", - "700": "{colors.solid.zinc.700}", - "800": "{colors.solid.zinc.800}", - "900": "{colors.solid.zinc.900}", - "950": "{colors.solid.zinc.950}" - }, - "primary": { - "color": "{colors.solid.green.500}", - "contrastColor": "{colors.alpha.white.1000}", - "hoverColor": "{colors.solid.green.600}", - "activeColor": "{colors.solid.green.700}", - "hoverBackground": "{colors.solid.green.50}", - "activeBackground": "{colors.solid.green.100}", - "borderColor": "{colors.solid.green.200}", - "selectedBackground": "{colors.solid.green.500}", - "selectedHoverBackground": "{colors.solid.green.600}" - }, - "highlight": { - "background": "{colors.solid.zinc.900}", - "focusBackground": "{colors.solid.zinc.800}", - "color": "{colors.alpha.white.1000}", - "focusColor": "{colors.alpha.white.1000}" - }, - "focusRing": { - "shadow": "{shadows.200}", - "extend": { - "invalid": "{colors.solid.red.200}", - "success": "{colors.solid.green.200}", - "warning": "{colors.solid.yellow.200}", - "info": "{colors.solid.blue.200}" - } - }, - "mask": { "background": "{colors.alpha.black.400}", "color": "{surface.200}" }, - "form": { - "background": "{colors.alpha.white.1000}", - "disabledBackground": "{colors.solid.zinc.200}", - "readonlyBackground": "{colors.solid.zinc.100}", - "filledBackground": "{colors.alpha.white.1000}", - "filledHoverBackground": "{colors.alpha.white.1000}", - "filledFocusBackground": "{colors.alpha.white.1000}", - "borderColor": "{colors.solid.zinc.300}", - "hoverBorderPrimaryColor": "{colors.solid.zinc.900}", - "focusBorderPrimaryColor": "{colors.solid.zinc.900}", - "hoverBorderSecondaryColor": "{colors.solid.green.600}", - "focusBorderSecondaryColor": "{colors.solid.green.600}", - "invalidBorderColor": "{colors.solid.red.400}", - "color": "{colors.solid.zinc.950}", - "disabledColor": "{colors.solid.zinc.500}", - "placeholderColor": "{colors.solid.zinc.500}", - "invalidPlaceholderColor": "{colors.solid.red.600}", - "floatLabelColor": "{colors.solid.zinc.500}", - "floatLabelFocusColor": "{colors.solid.zinc.500}", - "floatLabelActiveColor": "{colors.solid.zinc.500}", - "floatLabelInvalidColor": "{form.invalidPlaceholderColor}", - "iconColor": "{colors.solid.zinc.950}", - "backgroundHandler": "{colors.alpha.white.1000}", - "shadow": "{shadows.200}" - }, - "text": { - "color": "{colors.solid.zinc.900}", - "extend": { - "colorPrimaryStatic": "{colors.solid.zinc.900}", - "colorSecondaryStatic": "{colors.alpha.white.1000}", - "colorInverted": "{colors.alpha.white.1000}" - }, - "hoverColor": "{colors.solid.zinc.700}", - "primaryColor": "{colors.solid.green.600}", - "hoverPrimaryColor": "{colors.solid.green.700}", - "secondaryColor": "{colors.solid.zinc.600}", - "hoverSecondaryColor": "{colors.solid.zinc.400}", - "mutedColor": "{colors.solid.zinc.500}", - "hoverMutedColor": "{colors.solid.zinc.300}", - "disabledColor": "{colors.solid.zinc.300}", - "infoColor": "{colors.solid.blue.600}", - "successColor": "{colors.solid.green.700}", - "dangerColor": "{colors.solid.red.600}", - "warningColor": "{colors.solid.yellow.600}", - "helpColor": "{colors.solid.purple.600}" + "effects": { + "opacity": { + "0": "0", + "4": "0.04", + "8": "0.08", + "12": "0.12", + "16": "0.16", + "20": "0.2", + "30": "0.3", + "40": "0.4", + "50": "0.5", + "60": "0.6", + "70": "0.7", + "80": "0.8", + "90": "0.9", + "100": "1" + }, + "blur": { + "none": "0", + "100": "4px", + "200": "8px", + "300": "16px", + "400": "24px" + }, + "transition": { + "easing": { + "linear": "linear", + "in": "cubic-bezier(0.55, 0.06, 0.7, 0.2)", + "out": "cubic-bezier(0.2, 0.6, 0.4, 1)", + "inOut": "cubic-bezier(0.65, 0.05, 0.35, 1)", + "standard": "cubic-bezier(0.2, 0, 0, 1)", + "accelerate": "cubic-bezier(0.3, 0, 1, 1)", + "decelerate": "cubic-bezier(0, 0, 0, 1)", + "emphasizedAccelerate": "cubic-bezier(0.3, 0, 0.8, 0.15)", + "emphasizedDecelerate": "cubic-bezier(0.05, 0.7, 0.1, 1)", + "spring": "cubic-bezier(0.34, 1.56, 0.64, 1)" }, - "content": { - "background": "{colors.alpha.white.1000}", - "hoverBackground": "{colors.solid.zinc.100}", - "borderColor": "{colors.solid.zinc.200}", - "activeBorderColor": "{colors.solid.zinc.800}", - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "shadow": "{shadows.400}" - }, - "overlay": { - "select": { - "background": "{colors.alpha.white.1000}", - "borderColor": "{colors.solid.zinc.200}", - "color": "{text.color}", - "shadow": "{shadows.400}" - }, - "popover": { - "background": "{colors.alpha.white.1000}", - "borderColor": "{form.borderColor}", - "color": "{text.color}", - "shadow": "{shadows.400}" - }, - "modal": { - "background": "{colors.alpha.white.1000}", - "backdrop": "{colors.alpha.black.300}", - "borderColor": "{colors.solid.zinc.200}", - "color": "{text.color}", - "shadow": "{shadows.200}" - } - }, - "list": { - "option": { - "background": "{colors.alpha.white.1000}", - "focusBackground": "{colors.solid.zinc.100}", - "selectedBackground": "{colors.solid.zinc.900}", - "selectedFocusBackground": "{colors.solid.zinc.700}", - "color": "{text.color}", - "focusColor": "{text.color}", - "selectedColor": "{text.extend.colorInverted}", - "selectedFocusColor": "{text.extend.colorInverted}", - "icon": { "color": "{text.color}", "focusColor": "{text.color}" } - }, - "optionGroup": { "background": "{colors.alpha.white.1000}", "color": "{text.mutedColor}" } - }, - "navigation": { - "submenuLabel": { "background": "rgba(255, 255, 255, 0.0000)", "color": "{text.mutedColor}" }, - "submenuIcon": { - "color": "{colors.solid.zinc.900}", - "focusColor": "{colors.solid.zinc.900}", - "activeColor": "{colors.alpha.white.1000}" - }, - "item": { - "focusBackground": "{colors.solid.zinc.100}", - "activeBackground": "{colors.solid.zinc.900}", - "color": "{colors.solid.zinc.900}", - "focusColor": "{colors.solid.zinc.900}", - "icon": { - "color": "{colors.solid.zinc.900}", - "focusColor": "{colors.solid.zinc.900}", - "activeColor": "{colors.alpha.white.1000}" - }, - "activeColor": "{colors.alpha.white.1000}" - }, - "shadow": "{shadows.400}" + "duration": { + "100": "140ms", + "200": "180ms", + "300": "240ms", + "400": "320ms", + "500": "400ms" } }, - "dark": { - "success": { - "50": "{colors.solid.green.950}", - "100": "{colors.solid.green.900}", - "200": "{colors.solid.green.800}", - "300": "{colors.solid.green.700}", - "400": "{colors.solid.green.600}", - "500": "{colors.solid.green.500}", - "600": "{colors.solid.green.400}", - "700": "{colors.solid.green.300}", - "800": "{colors.solid.green.200}", - "900": "{colors.solid.green.100}", - "950": "{colors.solid.green.50}" - }, - "info": { - "50": "{colors.solid.blue.950}", - "100": "{colors.solid.blue.900}", - "200": "{colors.solid.blue.800}", - "300": "{colors.solid.blue.700}", - "400": "{colors.solid.blue.600}", - "500": "{colors.solid.blue.500}", - "600": "{colors.solid.blue.400}", - "700": "{colors.solid.blue.300}", - "800": "{colors.solid.blue.200}", - "900": "{colors.solid.blue.100}", - "950": "{colors.solid.blue.50}" - }, - "warn": { - "50": "{colors.solid.yellow.950}", - "100": "{colors.solid.yellow.900}", - "200": "{colors.solid.yellow.800}", - "300": "{colors.solid.yellow.700}", - "400": "{colors.solid.yellow.600}", - "500": "{colors.solid.yellow.500}", - "600": "{colors.solid.yellow.400}", - "700": "{colors.solid.yellow.300}", - "800": "{colors.solid.yellow.200}", - "900": "{colors.solid.yellow.100}", - "950": "{colors.solid.yellow.50}" - }, - "transparent": "rgba(0, 0, 0, 0.0001)", - "help": { - "50": "{colors.solid.purple.950}", - "100": "{colors.solid.purple.900}", - "200": "{colors.solid.purple.800}", - "300": "{colors.solid.purple.700}", - "400": "{colors.solid.purple.600}", - "500": "{colors.solid.purple.500}", - "600": "{colors.solid.purple.400}", - "700": "{colors.solid.purple.300}", - "800": "{colors.solid.purple.200}", - "900": "{colors.solid.purple.100}", - "950": "{colors.solid.purple.50}" - }, - "error": { - "50": "{colors.solid.red.950}", - "100": "{colors.solid.red.900}", - "200": "{colors.solid.red.800}", - "300": "{colors.solid.red.700}", - "400": "{colors.solid.red.600}", - "500": "{colors.solid.red.500}", - "600": "{colors.solid.red.400}", - "700": "{colors.solid.red.300}", - "800": "{colors.solid.red.200}", - "900": "{colors.solid.red.100}", - "950": "{colors.solid.red.50}" - }, - "surface": { - "0": "{colors.alpha.black.1000}", - "50": "{colors.solid.zinc.950}", - "100": "{colors.solid.zinc.900}", - "200": "{colors.solid.zinc.800}", - "300": "{colors.solid.zinc.700}", - "400": "{colors.solid.zinc.600}", - "500": "{colors.solid.zinc.500}", - "600": "{colors.solid.zinc.400}", - "700": "{colors.solid.zinc.300}", - "800": "{colors.solid.zinc.200}", - "900": "{colors.solid.zinc.100}", - "950": "{colors.solid.zinc.50}" - }, - "primary": { - "color": "{colors.solid.green.500}", - "contrastColor": "{colors.solid.zinc.900}", - "hoverColor": "{colors.solid.green.400}", - "activeColor": "{colors.solid.green.300}", - "hoverBackground": "{colors.solid.green.950}", - "activeBackground": "{colors.solid.green.900}", - "borderColor": "{colors.solid.green.800}", - "selectedBackground": "{colors.solid.green.500}", - "selectedHoverBackground": "{colors.solid.green.600}" - }, - "highlight": { - "background": "{colors.solid.zinc.100}", - "focusBackground": "{colors.solid.zinc.200}", - "color": "{colors.solid.zinc.900}", - "focusColor": "{colors.solid.zinc.900}" - }, - "focusRing": { - "shadow": "{shadows.200}", - "extend": { - "invalid": "{colors.solid.red.800}", - "success": "{colors.solid.green.800}", - "warning": "{colors.solid.yellow.800}", - "info": "{colors.solid.blue.800}" - } - }, - "mask": { "background": "{colors.alpha.black.600}", "color": "{surface.800}" }, - "form": { - "background": "{colors.solid.zinc.950}", - "disabledBackground": "{colors.solid.zinc.800}", - "readonlyBackground": "{colors.solid.zinc.900}", - "filledBackground": "{colors.solid.zinc.950}", - "filledHoverBackground": "{colors.solid.zinc.950}", - "filledFocusBackground": "{colors.solid.zinc.950}", - "borderColor": "{colors.solid.zinc.700}", - "hoverBorderPrimaryColor": "{colors.solid.zinc.100}", - "focusBorderPrimaryColor": "{colors.solid.zinc.100}", - "hoverBorderSecondaryColor": "{colors.solid.green.400}", - "focusBorderSecondaryColor": "{colors.solid.green.400}", - "invalidBorderColor": "{colors.solid.red.600}", - "color": "{colors.alpha.white.1000}", - "disabledColor": "{colors.solid.zinc.500}", - "placeholderColor": "{colors.solid.zinc.500}", - "invalidPlaceholderColor": "{colors.solid.red.400}", - "floatLabelColor": "{colors.solid.zinc.500}", - "floatLabelFocusColor": "{colors.solid.zinc.500}", - "floatLabelActiveColor": "{colors.solid.zinc.500}", - "floatLabelInvalidColor": "{form.invalidPlaceholderColor}", - "iconColor": "{colors.alpha.white.1000}", - "backgroundHandler": "{colors.alpha.white.1000}", - "shadow": "{shadows.200}" - }, - "text": { - "color": "{colors.alpha.white.1000}", - "extend": { - "colorPrimaryStatic": "{colors.solid.zinc.900}", - "colorSecondaryStatic": "{colors.alpha.white.1000}", - "colorInverted": "{colors.solid.zinc.900}" - }, - "hoverColor": "{colors.solid.zinc.300}", - "primaryColor": "{colors.solid.green.400}", - "hoverPrimaryColor": "{colors.solid.green.300}", - "secondaryColor": "{colors.solid.zinc.400}", - "hoverSecondaryColor": "{colors.solid.zinc.600}", - "mutedColor": "{colors.solid.zinc.500}", - "hoverMutedColor": "{colors.solid.zinc.700}", - "disabledColor": "{colors.solid.zinc.700}", - "infoColor": "{colors.solid.blue.400}", - "successColor": "{colors.solid.green.400}", - "dangerColor": "{colors.solid.red.400}", - "warningColor": "{colors.solid.yellow.400}", - "helpColor": "{colors.solid.purple.400}" - }, - "content": { - "background": "{colors.solid.zinc.900}", - "hoverBackground": "{colors.solid.zinc.800}", - "borderColor": "{colors.solid.zinc.800}", - "activeBorderColor": "{colors.solid.zinc.200}", - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "shadow": "{shadows.400}" - }, - "overlay": { - "select": { - "background": "{colors.solid.zinc.900}", - "borderColor": "{colors.solid.zinc.800}", - "color": "{text.color}", - "shadow": "{shadows.400}" - }, - "popover": { - "background": "{colors.solid.zinc.900}", - "borderColor": "{form.borderColor}", - "color": "{text.color}", - "shadow": "{shadows.400}" - }, - "modal": { - "background": "{colors.solid.zinc.900}", - "backdrop": "{colors.alpha.black.300}", - "borderColor": "{colors.solid.zinc.800}", - "color": "{text.color}", - "shadow": "{shadows.200}" - } - }, - "list": { - "option": { - "background": "{colors.solid.zinc.900}", - "focusBackground": "{colors.solid.zinc.800}", - "selectedBackground": "{colors.solid.zinc.100}", - "selectedFocusBackground": "{colors.solid.zinc.300}", - "color": "{text.color}", - "focusColor": "{text.color}", - "selectedColor": "{text.extend.colorInverted}", - "selectedFocusColor": "{text.extend.colorInverted}", - "icon": { "color": "{text.color}", "focusColor": "{text.color}" } - }, - "optionGroup": { "background": "{colors.solid.zinc.900}", "color": "{text.mutedColor}" } - }, - "navigation": { - "submenuLabel": { "background": "rgba(255, 255, 255, 0.0000)", "color": "{text.mutedColor}" }, - "submenuIcon": { - "color": "{colors.solid.zinc.100}", - "focusColor": "{colors.solid.zinc.100}", - "activeColor": "{colors.solid.zinc.900}" - }, - "item": { - "focusBackground": "{colors.solid.zinc.900}", - "activeBackground": "{colors.solid.zinc.100}", - "color": "{colors.alpha.white.1000}", - "focusColor": "{colors.alpha.white.1000}", - "icon": { - "color": "{colors.alpha.white.1000}", - "focusColor": "{colors.alpha.white.1000}", - "activeColor": "{colors.solid.zinc.900}" - }, - "activeColor": "{colors.solid.zinc.900}" - }, - "shadow": "{shadows.400}" + "elevation": { + "none": "none", + "100": "0 0 2px {colors.alpha.black.200}", + "200": "0 0 4px {colors.alpha.black.200}", + "300": "0 2px 4px {colors.alpha.black.200}", + "400": "0 4px 8px {colors.alpha.black.200}", + "500": "0 8px 16px 0 {colors.alpha.black.200}", + "status": { + "info": "0px 4px 8px 0px {colors.alpha.blue.40}", + "success": "0px 4px 8px 0px {colors.alpha.green.40}", + "warning": "0px 4px 8px 0px {colors.alpha.yellow.40}", + "danger": "0px 4px 8px 0px {colors.alpha.red.40}", + "secondary": "0px 4px 8px 0px {colors.alpha.black.40}", + "contrast": "0px 4px 8px 0px {colors.alpha.black.40}" } + }, + "focusRing": { + "shadow": "inset 0 0 0 {dimension.focusRing.width} {colors.solid.green.200}" } } }, "components": { "accordion": { - "extend": { "extHeader": { "iconSize": "{controls.iconOnly.300}", "gap": "{controls.gap.100}" } }, + "extend": { + "extHeader": { + "iconSize": "{dimension.size.600}", + "gap": "{dimension.space.200}" + } + }, "colorScheme": { "light": { "header": { - "background": "{transparent}", - "hoverBackground": "{transparent}", - "activeBackground": "{transparent}", - "activeHoverBackground": "{transparent}" + "background": "transparent", + "hoverBackground": "transparent", + "activeBackground": "transparent", + "activeHoverBackground": "transparent" + } + }, + "dark": { + "header": { + "activeBackground": "transparent", + "activeHoverBackground": "transparent", + "background": "transparent", + "hoverBackground": "transparent" } } }, "header": { - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "activeColor": "{text.color}", - "activeHoverColor": "{text.hoverColor}", - "borderColor": "{transparent}", - "padding": "{navigation.padding.300} 0 {navigation.padding.300} 0", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "activeColor": "{color.fg.default}", + "activeHoverColor": "{color.fg.hover}", + "borderColor": "transparent", + "padding": "{dimension.space.400} {dimension.space.none} {dimension.space.400} {dimension.space.none}", "fontWeight": "{fonts.fontWeight.bold}", - "borderRadius": "{borderRadius.none}", - "borderWidth": "{borderWidth.none}", + "borderRadius": "{dimension.borderRadius.none}", + "borderWidth": "{dimension.borderWidth.none}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "inset {focus.ring.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.focusRing.shadow}" }, "toggleIcon": { - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "activeColor": "{text.color}", - "activeHoverColor": "{text.hoverColor}" + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "activeColor": "{color.fg.default}", + "activeHoverColor": "{color.fg.hover}" }, - "last": { "bottomBorderRadius": "{borderRadius.none}", "activeBottomBorderRadius": "{borderRadius.none}" }, - "first": { "borderWidth": "{borderWidth.none}", "topBorderRadius": "{borderRadius.none}" } + "last": { + "bottomBorderRadius": "{dimension.borderRadius.none}", + "activeBottomBorderRadius": "{dimension.borderRadius.none}" + }, + "first": { + "borderWidth": "{dimension.borderWidth.none}", + "topBorderRadius": "{dimension.borderRadius.none}" + } + }, + "root": { + "transitionDuration": "{effects.transition.duration.200}" }, - "root": { "transitionDuration": "{controls.transitionDuration}" }, "panel": { - "borderWidth": "{borderWidth.none} {borderWidth.none} {navigation.width.200} {borderWidth.none}", - "borderColor": "{form.borderColor}" + "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.300} {dimension.borderWidth.none}", + "borderColor": "{color.border.neutral.strong}" }, "content": { - "borderWidth": "{content.borderWidth} {borderWidth.none} {borderWidth.none} {borderWidth.none}", - "borderColor": "{transparent}", - "background": "{transparent}", - "color": "{text.color}", - "padding": "0 {content.padding.400} {content.padding.300} {content.padding.400}" + "borderWidth": "{dimension.borderWidth.100} {dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.none}", + "borderColor": "transparent", + "background": "transparent", + "color": "{color.fg.default}", + "padding": "{dimension.space.none} {dimension.space.700} {dimension.space.400} {dimension.space.700}" } }, "autocomplete": { - "extend": { "extOption": { "gap": "{form.gap.200}" }, "extOptionGroup": { "gap": "{form.gap.200}" } }, + "extend": { + "checkmarkSize": "{dimension.size.600}", + "extOption": { + "gap": "{dimension.space.200}" + }, + "extOptionGroup": { + "gap": "{dimension.space.200}" + } + }, "colorScheme": { "light": { "chip": { - "focusBackground": "{chip.colorScheme.light.root.background}", - "focusColor": "{chip.colorScheme.light.root.color}" + "focusBackground": "{color.bg.neutral.medium.default}", + "focusColor": "{color.fg.default}" + }, + "extend": { + "option": { + "background": "{color.bg.surface.default.default}" + } + }, + "dropdown": { + "background": "{color.bg.surface.default.default}", + "hoverBackground": "{color.bg.surface.default.default}", + "activeBackground": "{color.bg.surface.default.default}", + "color": "{color.fg.muted}", + "hoverColor": "{color.fg.muted}", + "activeColor": "{color.fg.muted}" + } + }, + "dark": { + "chip": { + "focusBackground": "{color.bg.neutral.medium.default}", + "focusColor": "{color.fg.default}" }, "dropdown": { - "background": "{form.background}", - "hoverBackground": "{form.background}", - "activeBackground": "{form.background}", - "color": "{form.color}", - "hoverColor": "{form.color}", - "activeColor": "{form.color}" + "activeBackground": "{color.bg.surface.default.default}", + "activeColor": "{color.fg.inverse.muted}", + "background": "{color.bg.surface.default.default}", + "color": "{color.fg.inverse.muted}", + "hoverBackground": "{color.bg.surface.default.default}", + "hoverColor": "{color.fg.inverse.muted}" + }, + "extend": { + "option": { + "background": "{color.bg.surface.canvas.default}" + } + }, + "option": { + "focusBackground": "{color.bg.surface.canvas.hover}" + }, + "optionGroup": { + "background": "{color.bg.surface.canvas.default}", + "color": "{color.fg.inverse.muted}" + }, + "overlay": { + "background": "{color.bg.surface.canvas.default}" } } }, "root": { - "background": "{form.background}", - "disabledBackground": "{form.disabledBackground}", - "filledBackground": "{form.filledBackground}", - "filledHoverBackground": "{form.filledHoverBackground}", - "filledFocusBackground": "{form.filledFocusBackground}", - "borderColor": "{form.borderColor}", - "hoverBorderColor": "{form.hoverBorderSecondaryColor}", - "focusBorderColor": "{form.focusBorderSecondaryColor}", - "invalidBorderColor": "{form.invalidBorderColor}", - "color": "{form.color}", - "disabledColor": "{form.disabledColor}", - "placeholderColor": "{form.placeholderColor}", - "invalidPlaceholderColor": "{form.invalidPlaceholderColor}", - "shadow": "0", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.300}", - "borderRadius": "{form.borderRadius.200}", - "transitionDuration": "{form.transitionDuration}", + "background": "{color.bg.surface.default.default}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "filledBackground": "{color.bg.surface.default.default}", + "filledHoverBackground": "{color.bg.surface.default.default}", + "filledFocusBackground": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.strong}", + "hoverBorderColor": "{color.border.brand.strong}", + "focusBorderColor": "{color.border.brand.strong}", + "invalidBorderColor": "{color.border.status.danger.subtle}", + "color": "{color.fg.active}", + "disabledColor": "{color.fg.muted}", + "placeholderColor": "{color.fg.muted}", + "invalidPlaceholderColor": "{color.fg.status.danger.hover}", + "shadow": "{effects.elevation.none}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}", + "borderRadius": "{dimension.borderRadius.400}", + "transitionDuration": "{effects.transition.duration.200}", "focusRing": { - "width": "{focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "0" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}" } }, "overlay": { - "background": "{overlay.select.background}", - "borderColor": "{overlay.select.borderColor}", - "borderRadius": "{overlay.select.borderRadius}", - "color": "{overlay.select.color}", - "shadow": "{form.shadow}" + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "borderRadius": "{dimension.borderRadius.350}", + "color": "{color.fg.default}", + "shadow": "{effects.elevation.400}" + }, + "list": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" }, - "list": { "padding": "{list.padding}", "gap": "{list.gap.100}" }, "option": { - "focusBackground": "{list.option.focusBackground}", - "selectedBackground": "{list.option.selectedBackground}", - "selectedFocusBackground": "{list.option.selectedFocusBackground}", - "color": "{list.option.color}", - "focusColor": "{list.option.focusColor}", - "selectedColor": "{list.option.selectedColor}", - "selectedFocusColor": "{list.option.selectedFocusColor}", - "padding": "{list.option.padding}", - "borderRadius": "{list.option.borderRadius}" + "focusBackground": "{color.bg.neutral.weak.default}", + "selectedBackground": "{color.bg.neutral.strong.selected}", + "selectedFocusBackground": "{color.bg.neutral.strong.active}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "selectedColor": "{color.fg.inverse.default}", + "selectedFocusColor": "{color.fg.on.fill.active}", + "padding": "{dimension.space.200} {dimension.space.350}", + "borderRadius": "{dimension.borderRadius.200}" }, "optionGroup": { - "background": "{list.optionGroup.background}", - "color": "{list.optionGroup.color}", - "fontWeight": "{fonts.fontWeight.regular}", - "padding": "{list.optionGroup.padding}" + "background": "{color.bg.surface.raised.default}", + "color": "{color.fg.muted}", + "fontWeight": "{fonts.fontWeight.demibold}", + "padding": "{dimension.space.200} {dimension.space.400}" }, "dropdown": { - "width": "{form.width.300}", - "borderColor": "{form.borderColor}", - "hoverBorderColor": "{form.hoverBorderSecondaryColor}", - "activeBorderColor": "{form.focusBorderSecondaryColor}", - "borderRadius": "{form.borderRadius.200}", + "width": "{dimension.size.1700}", + "borderColor": "{color.border.neutral.strong}", + "hoverBorderColor": "{color.border.brand.strong}", + "activeBorderColor": "{color.border.brand.strong}", + "borderRadius": "{dimension.borderRadius.400}", "focusRing": { - "width": "{focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "0" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}" + }, + "sm": { + "width": "{dimension.size.1600}" }, - "sm": { "width": "{form.width.200}" }, - "lg": { "width": "{form.width.400}" } + "lg": { + "width": "{dimension.size.1800}" + } }, - "chip": { "borderRadius": "{chip.root.borderRadius}" }, - "emptyMessage": { "padding": "{list.option.padding}" } + "chip": { + "borderRadius": "{dimension.borderRadius.200}" + }, + "emptyMessage": { + "padding": "{dimension.space.200} {dimension.space.400}" + } }, "avatar": { - "extend": { "borderColor": "{form.borderColor}", "circle": { "borderRadius": "{media.borderRadius.max}" } }, + "extend": { + "borderColor": "{color.border.neutral.strong}", + "circle": { + "borderRadius": "{dimension.borderRadius.max}" + } + }, "root": { - "width": "{media.size.300}", - "height": "{media.size.300}", + "width": "{dimension.size.900}", + "height": "{dimension.size.900}", "fontSize": "{fonts.fontSize.300}", - "color": "{text.extend.colorPrimaryStatic}", - "background": "{primary.color}", - "borderRadius": "{media.borderRadius.200}" + "color": "{color.fg.on.brand.default}", + "background": "{color.bg.brand.strong.default}", + "borderRadius": "{dimension.borderRadius.400}" + }, + "icon": { + "size": "{dimension.size.450}" + }, + "group": { + "borderColor": "{color.border.neutral.inverse}", + "offset": "{dimension.space.negative.300}" }, - "icon": { "size": "{media.icon.size.100}" }, - "group": { "borderColor": "{content.background}", "offset": "-{media.padding.300}" }, "lg": { - "width": "{media.size.400}", - "height": "{media.size.400}", + "width": "{dimension.size.1100}", + "height": "{dimension.size.1100}", "fontSize": "{fonts.fontSize.300}", - "icon": { "size": "{media.icon.size.100}" }, - "group": { "offset": "-{media.padding.300}" } + "icon": { + "size": "{dimension.size.450}" + }, + "group": { + "offset": "{dimension.space.negative.300}" + } }, "xl": { - "width": "{media.size.500}", - "height": "{media.size.500}", - "icon": { "size": "{media.icon.size.200}" }, - "group": { "offset": "-{media.padding.600}" }, + "width": "{dimension.size.1300}", + "height": "{dimension.size.1300}", + "icon": { + "size": "{dimension.size.700}" + }, + "group": { + "offset": "{dimension.space.negative.600}" + }, "fontSize": "{fonts.fontSize.300}" } }, "badge": { "extend": { "extDot": { - "success": { "background": "{colors.solid.green.400}" }, - "info": { "background": "{info.400}" }, - "warn": { "background": "{warn.400}" }, - "danger": { "background": "{error.400}" }, - "lg": { "size": "{feedback.width.400}" }, - "xlg": { "size": "{feedback.width.500}" } + "success": { + "background": "{color.bg.status.success.strong.hover}" + }, + "info": { + "background": "{color.bg.status.info.strong.hover}" + }, + "warn": { + "background": "{color.bg.status.warning.strong.hover}" + }, + "danger": { + "background": "{color.bg.status.danger.strong.hover}" + }, + "lg": { + "size": "{dimension.size.350}" + }, + "xlg": { + "size": "{dimension.size.450}" + } }, - "ext": { "padding": "0rem" } + "ext": { + "padding": "{dimension.space.none}" + } }, "colorScheme": { "light": { - "primary": { "color": "{text.extend.colorPrimaryStatic}", "background": "{primary.color}" }, - "secondary": { "color": "{text.extend.colorInverted}", "background": "{surface.900}" }, - "success": { "color": "{success.900}", "background": "{success.300}" }, - "info": { "color": "{info.900}", "background": "{info.300}" }, - "warn": { "color": "{warn.900}", "background": "{warn.300}" }, - "danger": { "color": "{error.900}", "background": "{error.300}" } + "primary": { + "color": "{color.fg.default}", + "background": "{color.bg.brand.strong.default}" + }, + "secondary": { + "color": "{color.fg.on.fill.default}", + "background": "{color.bg.neutral.strong.default}" + }, + "success": { + "color": "{color.fg.on.status.success.default}", + "background": "{color.bg.status.success.strong.default}" + }, + "info": { + "color": "{color.fg.on.status.info.default}", + "background": "{color.bg.status.info.strong.default}" + }, + "warn": { + "color": "{color.fg.on.status.warning.default}", + "background": "{color.bg.status.warning.strong.default}" + }, + "danger": { + "color": "{color.fg.on.status.danger.default}", + "background": "{color.bg.status.danger.strong.default}" + }, + "contrast": { + "background": "{color.bg.neutral.strong.default}", + "color": "{color.fg.on.fill.default}" + } + }, + "dark": { + "contrast": { + "background": "{color.bg.surface.canvas.default}", + "color": "{color.fg.default}" + }, + "danger": { + "background": "{color.bg.status.danger.strong.default}", + "color": "{color.fg.on.status.danger.default}" + }, + "info": { + "background": "{color.bg.status.info.strong.default}", + "color": "{color.fg.on.status.info.default}" + }, + "primary": { + "background": "{color.bg.brand.strong.default}", + "color": "{color.fg.inverse.default}" + }, + "secondary": { + "background": "{color.bg.surface.canvas.default}", + "color": "{color.fg.default}" + }, + "success": { + "background": "{color.bg.status.success.strong.default}", + "color": "{color.fg.on.status.success.default}" + }, + "warn": { + "background": "{color.bg.status.warning.strong.default}", + "color": "{color.fg.on.status.warning.default}" + } } }, "root": { - "borderRadius": "{feedback.width.300}", - "padding": "{feedback.padding.100}", + "borderRadius": "{dimension.borderRadius.200}", + "padding": "{dimension.space.200}", "fontSize": "{fonts.fontSize.100}", "fontWeight": "{fonts.fontWeight.regular}", - "minWidth": "{feedback.width.600}", - "height": "{feedback.height.500}" + "minWidth": "{dimension.size.700}", + "height": "{dimension.size.700}" + }, + "dot": { + "size": "{dimension.size.200}" + }, + "sm": { + "fontSize": "{fonts.fontSize.100}", + "minWidth": "{dimension.size.none}", + "height": "{dimension.size.none}" }, - "dot": { "size": "{feedback.width.300}" }, - "sm": { "fontSize": "{fonts.fontSize.100}", "minWidth": "0rem", "height": "0rem" }, "lg": { "fontSize": "{fonts.fontSize.100}", - "minWidth": "{feedback.width.650}", - "height": "{feedback.height.600}" + "minWidth": "{dimension.size.800}", + "height": "{dimension.size.800}" }, "xl": { "fontSize": "{fonts.fontSize.100}", - "minWidth": "{feedback.width.700}", - "height": "{feedback.height.650}" + "minWidth": "{dimension.size.900}", + "height": "{dimension.size.900}" } }, "breadcrumb": { "extend": { - "hoverBackground": "{surface.100}", - "iconSize": "{navigation.size.300}", - "extItem": { "padding": "{navigation.padding.100}" } + "hoverBackground": "{color.bg.neutral.weak.default}", + "iconSize": "{dimension.size.600}", + "extItem": { + "padding": "{dimension.space.100}" + } }, "root": { - "padding": "0rem", - "background": "{transparent}", - "gap": "0rem", - "transitionDuration": "{form.transitionDuration}" + "padding": "{dimension.space.none}", + "background": "transparent", + "gap": "{dimension.space.none}", + "transitionDuration": "{effects.transition.duration.200}" }, "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" }, "item": { - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "borderRadius": "{navigation.borderRadius}", - "gap": "{navigation.item.gap}", - "icon": { "color": "{text.color}", "hoverColor": "{text.hoverColor}" } + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "borderRadius": "{dimension.borderRadius.100}", + "gap": "{dimension.space.200}", + "icon": { + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}" + }, + "focusRing": { + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}", + "style": "none", + "width": "{dimension.focusRing.width}" + } }, - "separator": { "color": "{text.color}" } + "separator": { + "color": "{color.fg.default}" + } }, "button": { "extend": { - "disabledBackground": "{form.disabledBackground}", + "disabledBackground": "{color.bg.neutral.weak.disabled}", "extOutlined": { - "danger": { "focusBackground": "{transparent}" }, - "warn": { "focusBackground": "{transparent}" }, - "info": { "focusBackground": "{transparent}" }, - "help": { "focusBackground": "{transparent}" }, - "success": { "focusBackground": "{transparent}" } + "danger": { + "focusBackground": "transparent" + }, + "warn": { + "focusBackground": "transparent" + }, + "info": { + "focusBackground": "transparent" + }, + "help": { + "focusBackground": "transparent" + }, + "success": { + "focusBackground": "transparent" + } }, - "disabledColor": "{form.disabledColor}", + "disabledColor": "{color.fg.muted}", "extText": { - "danger": { "focusBackground": "{transparent}" }, - "warn": { "focusBackground": "{transparent}" }, - "info": { "focusBackground": "{transparent}" }, - "help": { "focusBackground": "{transparent}" }, - "success": { "focusBackground": "{transparent}" } + "danger": { + "focusBackground": "transparent" + }, + "warn": { + "focusBackground": "transparent" + }, + "info": { + "focusBackground": "transparent" + }, + "help": { + "focusBackground": "transparent" + }, + "success": { + "focusBackground": "transparent" + } }, "extLink": { - "background": "{transparent}", - "colorHover": "{text.hoverColor}", - "paddingX": "0rem", - "paddingY": "{controls.padding.100}", - "sm": { "iconOnlyWidth": "{controls.iconOnly.200}" }, - "base": { "iconOnlyWidth": "{controls.iconOnly.400}" }, - "lg": { "iconOnlyWidth": "{controls.iconOnly.500}" }, - "xlg": { "iconOnlyWidth": "{controls.iconOnly.600}" } - }, - "extSm": { "borderRadius": "{controls.borderRadius.100}", "gap": "{controls.gap.100}" }, + "background": "transparent", + "colorHover": "{color.fg.hover}", + "paddingX": "{dimension.space.none}", + "paddingY": "{dimension.space.100}", + "sm": { + "iconOnlyWidth": "{dimension.size.450}" + }, + "base": { + "iconOnlyWidth": "{dimension.size.700}" + }, + "lg": { + "iconOnlyWidth": "{dimension.size.800}" + }, + "xlg": { + "iconOnlyWidth": "{dimension.size.900}" + } + }, + "extSm": { + "borderRadius": "{dimension.borderRadius.400}", + "gap": "{dimension.space.200}", + "height": "{dimension.size.800}" + }, "extLg": { - "borderRadius": "{controls.borderRadius.200}", - "gap": "{controls.gap.200}", - "height": "{controls.iconOnly.850}" + "borderRadius": "{dimension.borderRadius.400}", + "gap": "{dimension.space.400}", + "height": "{dimension.size.1200}" }, "extXlg": { - "borderRadius": "{controls.borderRadius.200}", - "gap": "{controls.gap.200}", - "iconOnlyWidth": "{controls.iconOnly.900}", - "paddingX": "{controls.padding.600}", - "paddingY": "{controls.padding.500}", - "height": "{controls.iconOnly.900}" - }, - "borderWidth": "{controls.width.100}", + "borderRadius": "{dimension.borderRadius.400}", + "gap": "{dimension.space.400}", + "iconOnlyWidth": "{dimension.size.1300}", + "paddingX": "{dimension.space.700}", + "paddingY": "{dimension.space.600}", + "height": "{dimension.size.1300}" + }, + "borderWidth": "{dimension.borderWidth.100}", "iconSize": { - "sm": "{controls.iconOnly.200}", - "md": "{controls.iconOnly.300}", - "lg": "{controls.iconOnly.400}" + "sm": "{dimension.size.450}", + "md": "{dimension.size.600}", + "lg": "{dimension.size.700}" } }, "colorScheme": { "light": { "root": { "primary": { - "background": "{primary.color}", - "hoverBackground": "{primary.hoverColor}", - "activeBackground": "{primary.activeColor}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{text.extend.colorPrimaryStatic}", - "hoverColor": "{text.extend.colorPrimaryStatic}", - "activeColor": "{text.extend.colorPrimaryStatic}", - "focusRing": { "color": "{focusRing.color}", "shadow": "{focusRing.shadow}" } + "background": "{color.bg.brand.strong.default}", + "hoverBackground": "{color.bg.brand.strong.hover}", + "activeBackground": "{color.bg.brand.strong.active}", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.default}", + "activeColor": "{color.fg.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } }, "secondary": { - "background": "{surface.900}", - "hoverBackground": "{surface.800}", - "activeBackground": "{surface.700}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{text.extend.colorInverted}", - "hoverColor": "{text.extend.colorInverted}", - "activeColor": "{text.extend.colorInverted}", - "focusRing": { "color": "{focusRing.color}", "shadow": "{focusRing.shadow}" } + "background": "{color.bg.neutral.strong.default}", + "hoverBackground": "{color.bg.neutral.strong.hover}", + "activeBackground": "{color.bg.neutral.strong.active}", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "{color.fg.on.fill.default}", + "hoverColor": "{color.fg.on.fill.hover}", + "activeColor": "{color.fg.on.fill.active}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } }, "contrast": { - "background": "{surface.200}", - "hoverBackground": "{surface.300}", - "activeBackground": "{surface.400}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{text.color}", - "hoverColor": "{text.color}", - "activeColor": "{text.color}", - "focusRing": { "color": "{focusRing.color}", "shadow": "{focusRing.shadow}" } + "background": "{color.bg.surface.canvas.hover}", + "hoverBackground": "{color.bg.surface.canvas.active}", + "activeBackground": "{color.bg.neutral.medium.active}", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.default}", + "activeColor": "{color.fg.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } }, "info": { - "background": "{info.300}", - "hoverBackground": "{info.400}", - "activeBackground": "{info.500}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{info.900}", - "hoverColor": "{info.950}", - "activeColor": "{info.900}" + "background": "{color.bg.status.info.strong.default}", + "hoverBackground": "{color.bg.status.info.strong.hover}", + "activeBackground": "{color.bg.status.info.strong.active}", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "{color.fg.on.status.info.default}", + "hoverColor": "{color.fg.on.status.info.hover}", + "activeColor": "{color.fg.on.status.info.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + } }, "success": { - "background": "{success.300}", - "hoverBackground": "{success.400}", - "activeBackground": "{success.500}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{success.900}", - "hoverColor": "{success.950}", - "activeColor": "{success.900}" + "background": "{color.bg.status.success.strong.default}", + "hoverBackground": "{color.bg.status.success.strong.hover}", + "activeBackground": "{color.bg.status.success.strong.active}", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "{color.fg.on.status.success.default}", + "hoverColor": "{color.fg.on.status.success.hover}", + "activeColor": "{color.fg.on.status.success.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + } }, "warn": { - "background": "{warn.300}", - "hoverBackground": "{warn.400}", - "activeBackground": "{warn.500}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{warn.900}", - "hoverColor": "{warn.950}", - "activeColor": "{warn.900}" + "background": "{color.bg.status.warning.strong.default}", + "hoverBackground": "{color.bg.status.warning.strong.hover}", + "activeBackground": "{color.bg.status.warning.strong.active}", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "{color.fg.on.status.warning.default}", + "hoverColor": "{color.fg.on.status.warning.hover}", + "activeColor": "{color.fg.on.status.warning.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + } }, "help": { - "background": "{help.300}", - "hoverBackground": "{help.400}", - "activeBackground": "{help.500}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{help.900}", - "hoverColor": "{help.950}", - "activeColor": "{help.900}" + "background": "{color.bg.status.help.strong.default}", + "hoverBackground": "{color.bg.status.help.strong.hover}", + "activeBackground": "{color.bg.status.help.strong.active}", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "{color.fg.on.status.help.default}", + "hoverColor": "{color.fg.on.status.help.hover}", + "activeColor": "{color.fg.on.status.help.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + } }, "danger": { - "background": "{error.300}", - "hoverBackground": "{error.400}", - "activeBackground": "{error.500}", - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "activeBorderColor": "{transparent}", - "color": "{error.900}", - "hoverColor": "{error.950}", - "activeColor": "{error.900}" + "background": "{color.bg.status.danger.strong.default}", + "hoverBackground": "{color.bg.status.danger.strong.hover}", + "activeBackground": "{color.bg.status.danger.strong.active}", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "{color.fg.on.status.danger.default}", + "hoverColor": "{color.fg.on.status.danger.hover}", + "activeColor": "{color.fg.on.status.danger.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + } } }, "outlined": { "primary": { - "hoverBackground": "{primary.hoverBackground}", - "activeBackground": "{primary.activeBackground}", - "borderColor": "{primary.borderColor}", - "color": "{primary.color}" + "hoverBackground": "{color.bg.brand.weak.hover}", + "activeBackground": "{color.bg.brand.weak.active}", + "borderColor": "{color.border.focus}", + "color": "{color.fg.brand.default}" }, "success": { - "hoverBackground": "{success.100}", - "activeBackground": "{success.200}", - "borderColor": "{success.600}", - "color": "{success.600}" + "hoverBackground": "{color.bg.status.success.weak.hover}", + "activeBackground": "{color.bg.status.success.weak.active}", + "borderColor": "{color.border.brand.strong}", + "color": "{color.fg.status.success.hover}" }, "info": { - "hoverBackground": "{info.100}", - "activeBackground": "{info.200}", - "borderColor": "{info.600}", - "color": "{info.600}" + "hoverBackground": "{color.bg.status.info.weak.hover}", + "activeBackground": "{color.bg.status.info.weak.active}", + "borderColor": "{color.border.status.info.strong}", + "color": "{color.fg.status.info.hover}" }, "warn": { - "hoverBackground": "{warn.100}", - "activeBackground": "{warn.200}", - "borderColor": "{warn.600}", - "color": "{warn.600}" + "hoverBackground": "{color.bg.status.warning.weak.hover}", + "activeBackground": "{color.bg.status.warning.weak.active}", + "borderColor": "{color.border.status.warning.strong}", + "color": "{color.fg.status.warning.hover}" }, "help": { - "hoverBackground": "{help.100}", - "activeBackground": "{help.200}", - "borderColor": "{help.600}", - "color": "{help.600}" + "hoverBackground": "{color.bg.status.help.weak.hover}", + "activeBackground": "{color.bg.status.help.weak.active}", + "borderColor": "{color.border.status.help.strong}", + "color": "{color.fg.status.help.hover}" }, "danger": { - "hoverBackground": "{error.100}", - "activeBackground": "{error.200}", - "borderColor": "{error.600}", - "color": "{error.600}" + "hoverBackground": "{color.bg.status.danger.weak.hover}", + "activeBackground": "{color.bg.status.danger.weak.active}", + "borderColor": "{color.border.status.danger.strong}", + "color": "{color.fg.status.danger.hover}" + }, + "contrast": { + "activeBackground": "{color.bg.neutral.strong.active}", + "borderColor": "{color.border.neutral.bold.default}", + "color": "{color.fg.on.fill.default}", + "hoverBackground": "{color.bg.neutral.strong.hover}" + }, + "plain": { + "activeBackground": "{color.bg.neutral.medium.default}", + "borderColor": "{color.border.neutral.strong}", + "color": "{color.fg.default}", + "hoverBackground": "{color.bg.neutral.weak.default}" + }, + "secondary": { + "activeBackground": "{color.bg.neutral.medium.default}", + "borderColor": "{color.border.neutral.strong}", + "color": "{color.fg.default}", + "hoverBackground": "{color.bg.neutral.weak.default}" } }, "text": { "primary": { - "hoverBackground": "{surface.100}", - "activeBackground": "{surface.200}", - "color": "{text.color}" + "hoverBackground": "{color.bg.neutral.weak.default}", + "activeBackground": "{color.bg.neutral.medium.default}", + "color": "{color.fg.default}" }, "success": { - "hoverBackground": "{success.100}", - "activeBackground": "{success.200}", - "color": "{success.600}" + "hoverBackground": "{color.bg.status.success.weak.hover}", + "activeBackground": "{color.bg.status.success.weak.active}", + "color": "{color.fg.status.success.hover}" + }, + "info": { + "hoverBackground": "{color.bg.status.info.weak.hover}", + "activeBackground": "{color.bg.status.info.weak.active}", + "color": "{color.fg.status.info.hover}" + }, + "warn": { + "hoverBackground": "{color.bg.status.warning.weak.hover}", + "activeBackground": "{color.bg.status.warning.weak.active}", + "color": "{color.fg.status.warning.hover}" + }, + "help": { + "hoverBackground": "{color.bg.status.help.weak.hover}", + "activeBackground": "{color.bg.status.help.weak.active}", + "color": "{color.fg.status.help.hover}" + }, + "danger": { + "hoverBackground": "{color.bg.status.danger.weak.hover}", + "activeBackground": "{color.bg.status.danger.weak.active}", + "color": "{color.fg.status.danger.hover}" + }, + "contrast": { + "activeBackground": "{color.bg.neutral.strong.active}", + "color": "{color.fg.on.fill.default}", + "hoverBackground": "{color.bg.neutral.strong.hover}" + }, + "plain": { + "activeBackground": "{color.bg.neutral.medium.default}", + "color": "{color.fg.default}", + "hoverBackground": "{color.bg.neutral.weak.default}" }, - "info": { "hoverBackground": "{info.100}", "activeBackground": "{info.200}", "color": "{info.600}" }, - "warn": { "hoverBackground": "{warn.100}", "activeBackground": "{warn.200}", "color": "{warn.600}" }, - "help": { "hoverBackground": "{help.100}", "activeBackground": "{help.200}", "color": "{help.600}" }, - "danger": { "hoverBackground": "{error.100}", "activeBackground": "{error.200}", "color": "{error.600}" } + "secondary": { + "activeBackground": "{color.bg.neutral.medium.default}", + "color": "{color.fg.default}", + "hoverBackground": "{color.bg.neutral.weak.default}" + } }, - "link": { "color": "{text.color}", "hoverColor": "{text.hoverColor}", "activeColor": "{text.mutedColor}" } - } - }, - "root": { - "borderRadius": "{controls.borderRadius.100}", - "roundedBorderRadius": "{controls.borderRadius.max}", - "gap": "{controls.gap.100}", - "paddingX": "{controls.padding.400}", - "paddingY": "{controls.padding.200}", - "iconOnlyWidth": "{controls.iconOnly.700}", - "raisedShadow": "none", - "badgeSize": "{feedback.width.500}", - "transitionDuration": "{controls.transitionDuration}", - "focusRing": { "width": "{focusRing.width}", "style": "{focusRing.style}", "offset": "{focusRing.offset}" }, + "link": { + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "activeColor": "{color.fg.muted}" + } + }, + "dark": { + "link": { + "activeColor": "{color.fg.inverse.muted}", + "color": "{color.fg.inverse.default}", + "hoverColor": "{color.fg.inverse.hover}" + }, + "outlined": { + "contrast": { + "activeBackground": "{color.bg.surface.canvas.active}", + "borderColor": "{color.border.neutral.inverse}", + "color": "{color.fg.default}", + "hoverBackground": "{color.bg.surface.canvas.hover}" + }, + "danger": { + "activeBackground": "{color.bg.status.danger.weak.active}", + "borderColor": "{color.border.status.danger.subtle}", + "color": "{color.fg.status.danger.hover}", + "hoverBackground": "{color.bg.status.danger.weak.hover}" + }, + "help": { + "activeBackground": "{color.bg.status.help.weak.active}", + "borderColor": "{color.border.status.help.strong}", + "color": "{color.fg.status.help.hover}", + "hoverBackground": "{color.bg.status.help.weak.hover}" + }, + "info": { + "activeBackground": "{color.bg.status.info.weak.active}", + "borderColor": "{color.border.status.info.strong}", + "color": "{color.fg.status.info.hover}", + "hoverBackground": "{color.bg.status.info.weak.hover}" + }, + "plain": { + "activeBackground": "{color.bg.neutral.strong.hover}", + "borderColor": "{color.border.neutral.strong}", + "color": "{color.fg.inverse.default}", + "hoverBackground": "{color.bg.neutral.strong.selected}" + }, + "primary": { + "activeBackground": "{color.bg.brand.weak.active}", + "borderColor": "{color.border.focus}", + "color": "{color.fg.brand.muted}", + "hoverBackground": "{color.bg.brand.weak.hover}" + }, + "secondary": { + "activeBackground": "{color.bg.neutral.strong.hover}", + "borderColor": "{color.border.neutral.strong}", + "color": "{color.fg.inverse.default}", + "hoverBackground": "{color.bg.neutral.strong.selected}" + }, + "success": { + "activeBackground": "{color.bg.status.success.weak.active}", + "borderColor": "{color.border.brand.strong}", + "color": "{color.fg.status.success.hover}", + "hoverBackground": "{color.bg.status.success.weak.hover}" + }, + "warn": { + "activeBackground": "{color.bg.status.warning.weak.active}", + "borderColor": "{color.border.status.warning.strong}", + "color": "{color.fg.status.warning.hover}", + "hoverBackground": "{color.bg.status.warning.weak.hover}" + } + }, + "root": { + "contrast": { + "activeBackground": "{color.bg.neutral.medium.active}", + "activeBorderColor": "transparent", + "activeColor": "{color.fg.on.brand.active}", + "background": "{color.bg.neutral.strong.hover}", + "borderColor": "transparent", + "color": "{color.fg.inverse.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "{color.bg.neutral.strong.active}", + "hoverBorderColor": "transparent", + "hoverColor": "{color.fg.on.brand.hover}" + }, + "danger": { + "activeBackground": "{color.bg.status.danger.strong.active}", + "activeBorderColor": "transparent", + "activeColor": "{color.fg.on.status.danger.default}", + "background": "{color.bg.status.danger.strong.default}", + "borderColor": "transparent", + "color": "{color.fg.on.status.danger.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + }, + "hoverBackground": "{color.bg.status.danger.strong.hover}", + "hoverBorderColor": "transparent", + "hoverColor": "{color.fg.on.status.danger.hover}" + }, + "help": { + "activeBackground": "{color.bg.status.help.strong.active}", + "activeBorderColor": "transparent", + "activeColor": "{color.fg.on.status.help.default}", + "background": "{color.bg.status.help.strong.default}", + "borderColor": "transparent", + "color": "{color.fg.on.status.help.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + }, + "hoverBackground": "{color.bg.status.help.strong.hover}", + "hoverBorderColor": "transparent", + "hoverColor": "{color.fg.on.status.help.hover}" + }, + "info": { + "activeBackground": "{color.bg.status.info.strong.active}", + "activeBorderColor": "transparent", + "activeColor": "{color.fg.on.status.info.default}", + "background": "{color.bg.status.info.strong.default}", + "borderColor": "transparent", + "color": "{color.fg.on.status.info.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + }, + "hoverBackground": "{color.bg.status.info.strong.hover}", + "hoverBorderColor": "transparent", + "hoverColor": "{color.fg.on.status.info.hover}" + }, + "primary": { + "activeBackground": "{color.bg.status.success.strong.default}", + "activeBorderColor": "transparent", + "activeColor": "{color.fg.on.brand.active}", + "background": "{color.bg.brand.strong.default}", + "borderColor": "transparent", + "color": "{color.fg.inverse.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "{color.bg.status.success.strong.hover}", + "hoverBorderColor": "transparent", + "hoverColor": "{color.fg.on.brand.hover}" + }, + "secondary": { + "activeBackground": "{color.bg.surface.canvas.active}", + "activeBorderColor": "transparent", + "activeColor": "{color.fg.on.fill.active}", + "background": "{color.bg.surface.canvas.default}", + "borderColor": "transparent", + "color": "{color.fg.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "{color.bg.surface.canvas.hover}", + "hoverBorderColor": "transparent", + "hoverColor": "{color.fg.on.fill.hover}" + }, + "success": { + "activeBackground": "{color.bg.status.success.strong.active}", + "activeBorderColor": "transparent", + "activeColor": "{color.fg.on.status.success.default}", + "background": "{color.bg.brand.strong.active}", + "borderColor": "transparent", + "color": "{color.fg.on.status.success.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + }, + "hoverBackground": "{color.bg.brand.strong.hover}", + "hoverBorderColor": "transparent", + "hoverColor": "{color.fg.on.status.success.hover}" + }, + "warn": { + "activeBackground": "{color.bg.status.warning.strong.active}", + "activeBorderColor": "transparent", + "activeColor": "{color.fg.on.status.warning.default}", + "background": "{color.bg.status.warning.strong.default}", + "borderColor": "transparent", + "color": "{color.fg.on.status.warning.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + }, + "hoverBackground": "{color.bg.status.warning.strong.hover}", + "hoverBorderColor": "transparent", + "hoverColor": "{color.fg.on.status.warning.hover}" + } + }, + "text": { + "contrast": { + "activeBackground": "{color.bg.surface.canvas.active}", + "color": "{color.fg.default}", + "hoverBackground": "{color.bg.surface.canvas.hover}" + }, + "danger": { + "activeBackground": "{color.bg.status.danger.weak.active}", + "color": "{color.fg.status.danger.hover}", + "hoverBackground": "{color.bg.status.danger.weak.hover}" + }, + "help": { + "activeBackground": "{color.bg.status.help.weak.active}", + "color": "{color.fg.status.help.hover}", + "hoverBackground": "{color.bg.status.help.weak.hover}" + }, + "info": { + "activeBackground": "{color.bg.status.info.weak.active}", + "color": "{color.fg.status.info.hover}", + "hoverBackground": "{color.bg.status.info.weak.hover}" + }, + "plain": { + "activeBackground": "{color.bg.neutral.strong.hover}", + "color": "{color.fg.inverse.default}", + "hoverBackground": "{color.bg.neutral.strong.selected}" + }, + "primary": { + "activeBackground": "{color.bg.neutral.strong.hover}", + "color": "{color.fg.inverse.default}", + "hoverBackground": "{color.bg.neutral.strong.selected}" + }, + "secondary": { + "activeBackground": "{color.bg.neutral.strong.hover}", + "color": "{color.fg.inverse.default}", + "hoverBackground": "{color.bg.neutral.strong.selected}" + }, + "success": { + "activeBackground": "{color.bg.status.success.weak.active}", + "color": "{color.fg.status.success.hover}", + "hoverBackground": "{color.bg.status.success.weak.hover}" + }, + "warn": { + "activeBackground": "{color.bg.status.warning.weak.active}", + "color": "{color.fg.status.warning.hover}", + "hoverBackground": "{color.bg.status.warning.weak.hover}" + } + } + } + }, + "root": { + "borderRadius": "{dimension.borderRadius.400}", + "roundedBorderRadius": "{dimension.borderRadius.max}", + "gap": "{dimension.space.200}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.200}", + "height": "{dimension.size.1000}", + "iconOnlyWidth": "{dimension.size.1000}", + "raisedShadow": "none", + "badgeSize": "{dimension.size.450}", + "transitionDuration": "{effects.transition.duration.200}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "offset": "{dimension.focusRing.offset}" + }, "sm": { "fontSize": "{fonts.fontSize.200}", - "iconOnlyWidth": "{controls.iconOnly.600}", - "paddingX": "{controls.padding.300}", - "paddingY": "{controls.padding.200}" + "iconOnlyWidth": "{dimension.size.800}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.200}" }, "lg": { "fontSize": "{fonts.fontSize.500}", - "iconOnlyWidth": "{controls.iconOnly.850}", - "paddingX": "{controls.padding.600}", - "paddingY": "{controls.padding.400}" + "iconOnlyWidth": "{dimension.size.1200}", + "paddingX": "{dimension.space.700}", + "paddingY": "{dimension.space.400}" }, - "label": { "fontWeight": "{fonts.fontWeight.demibold}" } + "label": { + "fontWeight": "{fonts.fontWeight.demibold}" + } } }, "card": { - "extend": { "borderColor": "{content.borderColor}", "borderWidth": "{content.borderWidth}" }, - "root": { "background": "{content.background}", "borderRadius": "{content.gap.400}", "color": "{content.color}" }, - "body": { "padding": "{content.padding.300}", "gap": "{content.gap.400}" }, - "caption": { "gap": "{content.gap.100}" }, - "title": { "fontSize": "{fonts.fontSize.400}", "fontWeight": "{fonts.fontWeight.demibold}" }, - "subtitle": { "color": "{text.mutedColor}" } + "extend": { + "borderColor": "{color.border.neutral.default}", + "borderWidth": "{dimension.borderWidth.100}" + }, + "root": { + "background": "{color.bg.surface.default.default}", + "borderRadius": "{dimension.borderRadius.400}", + "color": "{color.fg.default}", + "shadow": "{effects.elevation.none}" + }, + "body": { + "padding": "{dimension.space.400}", + "gap": "{dimension.space.400}" + }, + "caption": { + "gap": "{dimension.space.100}" + }, + "title": { + "fontSize": "{fonts.fontSize.400}", + "fontWeight": "{fonts.fontWeight.demibold}" + }, + "subtitle": { + "color": "{color.fg.muted}" + }, + "overlay": { + "shadow": "{effects.elevation.300}" + } }, "carousel": { "colorScheme": { "light": { "indicator": { - "background": "{surface.300}", - "hoverBackground": "{surface.400}", - "activeBackground": "{surface.900}" + "background": "{color.bg.neutral.weak.active}", + "hoverBackground": "{color.bg.neutral.medium.active}", + "activeBackground": "{color.bg.neutral.strong.default}" + } + }, + "dark": { + "indicator": { + "activeBackground": "{color.bg.neutral.strong.default}", + "background": "{color.bg.neutral.weak.active}", + "hoverBackground": "{color.bg.neutral.medium.active}" } } }, - "root": { "transitionDuration": "{media.transitionDuration}" }, - "content": { "gap": "{media.gap.200}" }, - "indicatorList": { "padding": "{media.padding.400}", "gap": "{media.gap.200}" }, + "root": { + "transitionDuration": "{effects.transition.duration.200}" + }, + "content": { + "gap": "{dimension.space.200}" + }, + "indicatorList": { + "padding": "{dimension.space.400}", + "gap": "{dimension.space.200}" + }, "indicator": { - "width": "{controls.iconOnly.100}", - "height": "{controls.iconOnly.100}", - "borderRadius": "{media.borderRadius.400}", + "width": "{dimension.size.200}", + "height": "{dimension.size.200}", + "borderRadius": "{dimension.borderRadius.max}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" } } }, "checkbox": { "root": { - "borderRadius": "{form.borderRadius.100}", - "extend": { "borderWidth": "{form.borderWidth}" }, - "width": "{form.size.400}", - "height": "{form.size.400}", - "background": "{form.background}", - "checkedBackground": "{surface.900}", - "checkedHoverBackground": "{surface.800}", - "disabledBackground": "{form.disabledBackground}", - "filledBackground": "{form.filledBackground}", - "borderColor": "{form.borderColor}", - "hoverBorderColor": "{form.hoverBorderPrimaryColor}", - "focusBorderColor": "{form.focusBorderPrimaryColor}", - "checkedBorderColor": "{surface.900}", - "checkedHoverBorderColor": "{surface.800}", - "checkedFocusBorderColor": "{primary.color}", - "checkedDisabledBorderColor": "{form.borderColor}", - "invalidBorderColor": "{form.invalidBorderColor}", - "shadow": "0", + "borderRadius": "{dimension.borderRadius.200}", + "extend": { + "borderWidth": "{dimension.borderWidth.100}" + }, + "width": "{dimension.size.700}", + "height": "{dimension.size.700}", + "background": "{color.bg.surface.default.default}", + "checkedBackground": "{color.bg.neutral.strong.default}", + "checkedHoverBackground": "{color.bg.neutral.strong.hover}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "filledBackground": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.strong}", + "hoverBorderColor": "{color.border.neutral.bold.default}", + "focusBorderColor": "{color.border.neutral.bold.default}", + "checkedBorderColor": "{color.border.neutral.bold.default}", + "checkedHoverBorderColor": "{color.border.neutral.bold.hover}", + "checkedFocusBorderColor": "{color.border.brand.default}", + "checkedDisabledBorderColor": "{color.border.neutral.strong}", + "invalidBorderColor": "{color.border.status.danger.subtle}", + "shadow": "{effects.elevation.none}", "focusRing": { - "focusRing": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "focusRing": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}", + "width": "{dimension.focusRing.width}" }, - "sm": { "width": "{form.size.200}", "height": "{form.size.200}" }, - "lg": { "width": "{form.size.350}", "height": "{form.size.350}" }, - "transitionDuration": "{form.transitionDuration}" + "sm": { + "width": "{dimension.size.200}", + "height": "{dimension.size.200}" + }, + "lg": { + "width": "{dimension.size.600}", + "height": "{dimension.size.600}" + }, + "transitionDuration": "{effects.transition.duration.200}" }, "icon": { - "size": "{form.icon.300}", - "color": "{form.color}", - "checkedColor": "{primary.contrastColor}", - "checkedHoverColor": "{primary.contrastColor}", - "disabledColor": "{form.disabledColor}", - "sm": { "size": "{form.icon.200}" }, - "lg": { "size": "{form.icon.400}" } + "size": "{dimension.size.450}", + "color": "{color.fg.active}", + "checkedColor": "{color.fg.on.fill.default}", + "checkedHoverColor": "{color.fg.on.fill.hover}", + "disabledColor": "{color.fg.muted}", + "sm": { + "size": "{dimension.size.350}" + }, + "lg": { + "size": "{dimension.size.600}" + } } }, "chip": { - "extend": { "borderColor": "{transparent}", "borderWidth": "{controls.width.100}" }, + "extend": { + "borderColor": "transparent", + "borderWidth": "{dimension.borderWidth.100}" + }, "root": { - "borderRadius": "{media.borderRadius.100}", - "paddingX": "{media.padding.200}", - "paddingY": "{media.padding.100}", - "gap": "{media.gap.200}", - "transitionDuration": "{media.transitionDuration}" + "borderRadius": "{dimension.borderRadius.200}", + "paddingX": "{dimension.space.200}", + "paddingY": "{dimension.space.100}", + "gap": "{dimension.space.200}", + "transitionDuration": "{effects.transition.duration.200}" }, "colorScheme": { "light": { - "root": { "background": "{surface.200}", "color": "{text.color}" }, - "icon": { "color": "{text.color}" }, - "removeIcon": { "color": "{text.color}" } + "root": { + "background": "{color.bg.surface.canvas.hover}", + "color": "{color.fg.default}" + }, + "icon": { + "color": "{color.fg.default}" + }, + "removeIcon": { + "color": "{color.fg.default}" + } + }, + "dark": { + "icon": { + "color": "{color.fg.inverse.default}" + }, + "removeIcon": { + "color": "{color.fg.inverse.default}" + }, + "root": { + "background": "{color.bg.neutral.strong.hover}", + "color": "{color.fg.inverse.default}" + } } }, - "image": { "width": "0rem", "height": "0rem" }, - "icon": { "size": "{media.icon.size.100}" }, + "image": { + "width": "{dimension.size.none}", + "height": "{dimension.size.none}" + }, + "icon": { + "size": "{dimension.size.450}" + }, "removeIcon": { - "size": "{media.icon.size.100}", + "size": "{dimension.size.450}", "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" } } }, "confirmdialog": { "extend": { "extIcon": { - "success": "{success.500}", - "info": "{info.500}", - "help": "{help.500}", - "warn": "{warn.500}", - "danger": "{error.500}" + "success": "{color.fg.status.success.default}", + "info": "{color.fg.status.info.default}", + "help": "{color.fg.status.help.default}", + "warn": "{color.fg.status.warning.default}", + "danger": "{color.fg.status.danger.default}" } }, - "icon": { "size": "{overlay.icon.size.200}", "color": "{overlay.modal.color}" }, - "content": { "gap": "0rem" } + "icon": { + "size": "{dimension.size.700}", + "color": "{color.fg.default}" + }, + "content": { + "gap": "{dimension.space.none}" + } }, "confirmpopup": { "root": { - "background": "{overlay.popover.background}", - "color": "{overlay.popover.color}", - "shadow": "{overlay.popover.shadow}", - "gutter": "{overlay.gap.300}", - "arrowOffset": "{overlay.modal.padding.200}" - }, - "content": { "padding": "{overlay.popover.padding.100}", "gap": "{overlay.gap.400}" }, - "icon": { "size": "{overlay.icon.size.200}", "color": "{overlay.popover.color}" }, + "background": "{color.bg.surface.default.default}", + "color": "{color.fg.default}", + "shadow": "{effects.elevation.400}", + "gutter": "{dimension.space.400}", + "arrowOffset": "{dimension.space.600}", + "borderColor": "{color.border.neutral.default}", + "borderRadius": "{dimension.borderRadius.400}" + }, + "content": { + "padding": "{dimension.space.400}", + "gap": "{dimension.space.400}" + }, + "icon": { + "size": "{dimension.size.700}", + "color": "{color.fg.default}" + }, "footer": { - "gap": "{overlay.gap.200}", - "padding": "0 {overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.300}" + "gap": "{dimension.space.200}", + "padding": "{dimension.space.none} {dimension.space.700} {dimension.space.700} {dimension.space.700}" } }, "contextmenu": { - "root": { "background": "{content.background}", "color": "{content.color}", "shadow": "{navigation.shadow}" }, - "list": { "padding": "{navigation.list.padding.200} 0", "gap": "{navigation.list.gap}" }, - "item": { "padding": "{navigation.item.padding}", "gap": "{navigation.item.gap}" }, - "submenu": { "mobileIndent": "{navigation.submenu.padding}" } + "root": { + "background": "{color.bg.surface.default.default}", + "color": "{color.fg.default}", + "shadow": "{effects.elevation.400}", + "borderColor": "{color.border.neutral.default}", + "borderRadius": "{dimension.borderRadius.400}", + "transitionDuration": "{effects.transition.duration.200}" + }, + "list": { + "padding": "{dimension.space.200} {dimension.space.none}", + "gap": "{dimension.space.100}" + }, + "item": { + "padding": "{dimension.space.200} {dimension.space.400}", + "gap": "{dimension.space.200}", + "activeBackground": "{color.bg.neutral.medium.default}", + "activeColor": "{color.fg.hover}", + "borderRadius": "{dimension.borderRadius.400}", + "color": "{color.fg.default}", + "focusBackground": "{color.bg.neutral.weak.default}", + "focusColor": "{color.fg.hover}", + "icon": { + "activeColor": "{color.fg.hover}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.hover}" + } + }, + "submenu": { + "mobileIndent": "{dimension.space.600}" + }, + "separator": { + "borderColor": "{color.border.neutral.default}" + }, + "submenuIcon": { + "activeColor": "{color.fg.hover}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.hover}", + "size": "{dimension.size.400}" + } }, "datatable": { "colorScheme": { "light": { - "root": { "color": "{text.color}", "borderColor": "{content.borderColor}" }, - "header": { "background": "{surface.50}", "color": "{text.color}" }, - "headerCell": { "background": "{surface.50}", "hoverBackground": "{surface.100}", "color": "{text.color}" }, - "footer": { "background": "{surface.100}", "color": "{text.color}" }, - "footerCell": { "background": "{content.hoverBackground}", "color": "{text.color}" }, - "row": { "stripedBackground": "{content.hoverBackground}" }, - "bodyCell": { "selectedBorderColor": "{content.borderColor}" } + "root": { + "color": "{color.fg.default}", + "borderColor": "{color.border.neutral.default}" + }, + "header": { + "background": "{color.bg.surface.default.hover}", + "color": "{color.fg.default}" + }, + "headerCell": { + "background": "{color.bg.surface.raised.selected}", + "hoverBackground": "{color.bg.neutral.weak.default}", + "color": "{color.fg.default}" + }, + "footer": { + "background": "{color.bg.surface.canvas.default}", + "color": "{color.fg.default}" + }, + "footerCell": { + "background": "{color.bg.neutral.weak.default}", + "color": "{color.fg.default}" + }, + "row": { + "stripedBackground": "{color.bg.neutral.weak.default}" + }, + "bodyCell": { + "selectedBorderColor": "{color.border.neutral.default}" + } + }, + "dark": { + "bodyCell": { + "selectedBorderColor": "{color.border.neutral.bold.hover}" + }, + "footer": { + "background": "{color.bg.neutral.strong.default}", + "color": "{color.fg.inverse.default}" + }, + "footerCell": { + "background": "{color.bg.neutral.strong.default}", + "color": "{color.fg.inverse.default}" + }, + "header": { + "background": "{color.bg.surface.default.hover}", + "color": "{color.fg.inverse.default}" + }, + "headerCell": { + "background": "{color.bg.surface.raised.selected}", + "color": "{color.fg.inverse.default}", + "hoverBackground": "{color.bg.neutral.strong.selected}" + }, + "root": { + "borderColor": "{color.border.neutral.bold.hover}", + "color": "{color.fg.inverse.default}" + }, + "row": { + "stripedBackground": "{color.bg.neutral.strong.default}" + } } }, "extended": { - "extHeaderCell": { "selectedHoverBackground": "{surface.800}" }, + "extHeaderCell": { + "selectedHoverBackground": "{color.bg.neutral.strong.hover}" + }, "extRow": { - "selectedHoverBackground": "{surface.800}", - "stripedHoverBackground": "{surface.100}", - "iconSize": "{data.icon.size.200}" + "selectedHoverBackground": "{color.bg.neutral.strong.hover}", + "stripedHoverBackground": "{color.bg.neutral.weak.default}", + "iconSize": "{dimension.size.600}" } }, - "root": { "transitionDuration": "{data.transitionDuration}" }, + "root": { + "transitionDuration": "{effects.transition.duration.200}" + }, "header": { - "borderColor": "{content.borderColor}", - "borderWidth": "{data.width.100} 0 {data.width.100} 0", - "padding": "{data.padding.400}", - "sm": { "padding": "{data.padding.200}" }, - "lg": { "padding": "{data.padding.500}" } + "borderColor": "{color.border.neutral.default}", + "borderWidth": "{dimension.borderWidth.100} {dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.none}", + "padding": "{dimension.space.400}", + "sm": { + "padding": "{dimension.space.200}" + }, + "lg": { + "padding": "{dimension.space.600}" + } }, "headerCell": { - "selectedBackground": "{highlight.background}", - "borderColor": "{content.borderColor}", - "hoverColor": "{text.hoverColor}", - "selectedColor": "{highlight.color}", - "gap": "{data.gap.200}", - "padding": "{data.padding.400}", + "selectedBackground": "{color.bg.neutral.strong.selected}", + "borderColor": "{color.border.neutral.default}", + "hoverColor": "{color.fg.hover}", + "selectedColor": "{color.fg.on.fill.default}", + "gap": "{dimension.space.200}", + "padding": "{dimension.space.400}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "inset {focus.ring.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.focusRing.shadow}" }, - "sm": { "padding": "{data.padding.200}" }, - "lg": { "padding": "{data.padding.500}" } + "sm": { + "padding": "{dimension.space.200}" + }, + "lg": { + "padding": "{dimension.space.600}" + } + }, + "columnTitle": { + "fontWeight": "{fonts.fontWeight.bold}" }, - "columnTitle": { "fontWeight": "{fonts.fontWeight.bold}" }, "row": { - "background": "{content.background}", - "hoverBackground": "{content.hoverBackground}", - "selectedBackground": "{highlight.background}", - "color": "{content.color}", - "hoverColor": "{content.hoverColor}", - "selectedColor": "{highlight.color}", + "background": "{color.bg.surface.raised.default}", + "hoverBackground": "{color.bg.neutral.weak.default}", + "selectedBackground": "{color.bg.neutral.strong.selected}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "selectedColor": "{color.fg.on.fill.default}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "inset {focus.ring.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.focusRing.shadow}" } }, "bodyCell": { - "borderColor": "{content.borderColor}", - "padding": "{data.padding.400}", - "sm": { "padding": "{data.padding.200}" }, - "lg": { "padding": "{data.padding.500}" } + "borderColor": "{color.border.neutral.default}", + "padding": "{dimension.space.400}", + "sm": { + "padding": "{dimension.space.200}" + }, + "lg": { + "padding": "{dimension.space.600}" + } }, "footerCell": { - "borderColor": "{content.borderColor}", - "padding": "{data.padding.400}", - "sm": { "padding": "{data.padding.200}" }, - "lg": { "padding": "{data.padding.500}" } + "borderColor": "{color.border.neutral.default}", + "padding": "{dimension.space.400}", + "sm": { + "padding": "{dimension.space.200}" + }, + "lg": { + "padding": "{dimension.space.600}" + } + }, + "columnFooter": { + "fontWeight": "{fonts.fontWeight.bold}" + }, + "dropPoint": { + "color": "{color.fg.default}" }, - "columnFooter": { "fontWeight": "{fonts.fontWeight.bold}" }, - "dropPoint": { "color": "{highlight.background}" }, "footer": { - "borderColor": "{content.borderColor}", - "borderWidth": "0 0 {data.width.100} 0", - "padding": "{data.padding.400}", - "sm": { "padding": "{data.padding.200}" }, - "lg": { "padding": "{data.padding.500}" } - }, - "columnResizer": { "width": "{data.width.300}" }, - "resizeIndicator": { "width": "{data.width.100}", "color": "{highlight.background}" }, - "sortIcon": { "color": "{text.color}", "hoverColor": "{text.hoverColor}", "size": "{data.icon.size.100}" }, - "loadingIcon": { "size": "{data.icon.size.500}" }, + "borderColor": "{color.border.neutral.default}", + "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.none}", + "padding": "{dimension.space.400}", + "sm": { + "padding": "{dimension.space.200}" + }, + "lg": { + "padding": "{dimension.space.600}" + } + }, + "columnResizer": { + "width": "{dimension.size.200}" + }, + "resizeIndicator": { + "width": "{dimension.borderWidth.100}", + "color": "{color.fg.default}" + }, + "sortIcon": { + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "size": "{dimension.size.450}" + }, + "loadingIcon": { + "size": "{dimension.size.900}" + }, "rowToggleButton": { - "hoverBackground": "{content.hoverBackground}", - "selectedHoverBackground": "{content.hoverBackground}", - "color": "{text.color}", - "hoverColor": "{text.color}", - "selectedHoverColor": "{text.color}", - "size": "{data.icon.size.500}", - "borderRadius": "{content.borderRadius}", + "hoverBackground": "{color.bg.neutral.weak.default}", + "selectedHoverBackground": "{color.bg.neutral.weak.default}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.default}", + "selectedHoverColor": "{color.fg.default}", + "size": "{dimension.size.900}", + "borderRadius": "{dimension.borderRadius.400}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" } }, "filter": { - "inlineGap": "{data.gap.200}", - "rule": { "borderColor": "{content.borderColor}" }, - "constraintList": { "padding": "{list.padding}", "gap": "{list.gap.100}" }, + "inlineGap": "{dimension.space.200}", + "rule": { + "borderColor": "{color.border.neutral.default}" + }, + "constraintList": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + }, "constraint": { - "focusBackground": "{list.option.focusBackground}", - "selectedBackground": "{list.option.selectedBackground}", - "selectedFocusBackground": "{list.option.selectedFocusBackground}", - "color": "{list.option.color}", - "focusColor": "{list.option.focusColor}", - "selectedColor": "{list.option.selectedColor}", - "selectedFocusColor": "{list.option.selectedFocusColor}", - "padding": "{list.option.padding}", - "borderRadius": "{list.option.borderRadius}", - "separator": { "borderColor": "{content.borderColor}" } + "focusBackground": "{color.bg.neutral.weak.default}", + "selectedBackground": "{color.bg.neutral.strong.selected}", + "selectedFocusBackground": "{color.bg.neutral.strong.active}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "selectedColor": "{color.fg.on.fill.default}", + "selectedFocusColor": "{color.fg.on.fill.active}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.200}", + "separator": { + "borderColor": "{color.border.neutral.default}" + } }, "overlaySelect": { - "background": "{overlay.select.background}", - "color": "{overlay.select.color}", - "borderColor": "{overlay.select.borderColor}", - "borderRadius": "{overlay.select.borderRadius}", - "shadow": "{overlay.select.shadow}" + "background": "{color.bg.surface.raised.default}", + "color": "{color.fg.default}", + "borderColor": "{color.border.neutral.default}", + "borderRadius": "{dimension.borderRadius.400}", + "shadow": "{effects.elevation.400}" }, "overlayPopover": { - "background": "{overlay.popover.background}", - "color": "{overlay.popover.color}", - "borderColor": "{overlay.select.borderColor}", - "borderRadius": "{overlay.select.borderRadius}", - "shadow": "{overlay.popover.shadow}", - "padding": "{overlay.popover.padding.100}", - "gap": "{list.gap.100}" + "background": "{color.bg.surface.raised.default}", + "color": "{color.fg.default}", + "borderColor": "{color.border.neutral.default}", + "borderRadius": "{dimension.borderRadius.400}", + "shadow": "{effects.elevation.400}", + "padding": "{dimension.space.400}", + "gap": "{dimension.space.100}" } }, - "paginatorTop": { "borderColor": "{form.borderColor}", "borderWidth": "0 0 {data.width.100} 0" }, - "paginatorBottom": { "borderWidth": "0 0 {data.width.100} 0", "borderColor": "{content.borderColor}" } + "paginatorTop": { + "borderColor": "{color.border.neutral.strong}", + "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.none}" + }, + "paginatorBottom": { + "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.none}", + "borderColor": "{color.border.neutral.default}" + } }, "dataview": { "root": { - "borderWidth": "{data.width.100}", - "borderRadius": "{data.borderRadius}", - "padding": "0rem", - "borderColor": "{content.borderColor}" + "borderWidth": "{dimension.borderWidth.100}", + "borderRadius": "{dimension.borderRadius.100}", + "padding": "{dimension.space.none}", + "borderColor": "{color.border.neutral.default}" }, "header": { - "borderWidth": "0 0 {data.width.100} 0", - "padding": "{data.padding.200} {data.padding.300}", - "borderRadius": "0 0 0 0", - "color": "{text.color}" + "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.none}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.none} {dimension.borderRadius.none} {dimension.borderRadius.none} {dimension.borderRadius.none}", + "color": "{color.fg.default}", + "borderColor": "{color.border.neutral.default}" }, "content": { - "background": "{content.background}", - "color": "{content.color}", - "borderColor": "{content.borderColor}", - "borderWidth": "0rem", - "padding": "0rem", - "borderRadius": "0" + "background": "{color.bg.surface.default.default}", + "color": "{color.fg.default}", + "borderColor": "{color.border.neutral.default}", + "borderWidth": "{dimension.borderWidth.none}", + "padding": "{dimension.space.none}", + "borderRadius": "{dimension.borderRadius.none}" }, "footer": { - "background": "{surface.100}", - "color": "{text.color}", - "borderWidth": "{data.width.100} 0 0 0", - "padding": "{data.padding.200} {data.padding.300}", - "borderRadius": "0 0 0 0" + "background": "{color.bg.surface.canvas.default}", + "color": "{color.fg.default}", + "borderWidth": "{dimension.borderWidth.100} {dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.none}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.none} {dimension.borderRadius.none} {dimension.borderRadius.none} {dimension.borderRadius.none}", + "borderColor": "{color.border.neutral.default}" + }, + "paginatorTop": { + "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.none}", + "borderColor": "{color.border.neutral.default}" + }, + "paginatorBottom": { + "borderWidth": "{dimension.borderWidth.100} {dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.none}", + "borderColor": "{color.border.neutral.default}" }, - "paginatorTop": { "borderWidth": "0 0 {data.width.100} 0" }, - "paginatorBottom": { "borderWidth": "{data.width.100} 0 0 0" } + "colorScheme": { + "dark": { + "header": { + "background": "{color.bg.surface.default.default}", + "color": "{color.fg.inverse.default}" + } + }, + "light": { + "header": { + "background": "{color.bg.surface.default.default}", + "color": "{color.fg.default}" + } + } + } }, "datepicker": { "extend": { - "extDate": { "selectedHoverBackground": "{surface.800}" }, - "extToday": { "hoverBackground": "{content.hoverBackground}", "borderColor": "{content.activeBorderColor}" }, - "extTitle": { "width": "{form.width.500}" }, - "extTimePicker": { "minWidth": "{form.width.400}", "color": "{content.color}" } + "extDate": { + "selectedHoverBackground": "{color.bg.neutral.strong.hover}" + }, + "extToday": { + "hoverBackground": "{color.bg.neutral.weak.default}", + "borderColor": "{color.border.neutral.bold.hover}" + }, + "extTitle": { + "width": "{dimension.size.1900}" + }, + "extTimePicker": { + "minWidth": "{dimension.size.1800}", + "color": "{color.fg.default}" + } }, "colorScheme": { "light": { "dropdown": { - "background": "{content.background}", - "hoverBackground": "{navigation.item.focusBackground}", - "activeBackground": "{navigation.item.activeBackground}", - "color": "{navigation.item.color}", - "hoverColor": "{navigation.item.focusColor}", - "activeColor": "{navigation.item.activeColor}" + "background": "{color.bg.surface.default.default}", + "hoverBackground": "{color.bg.surface.canvas.default}", + "activeBackground": "{color.bg.neutral.strong.default}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.default}", + "activeColor": "{color.fg.inverse.active}" + }, + "today": { + "background": "transparent", + "color": "{color.fg.default}" + } + }, + "dark": { + "dropdown": { + "activeBackground": "{color.bg.surface.canvas.default}", + "activeColor": "{color.fg.on.fill.active}", + "background": "{color.bg.surface.default.default}", + "color": "{color.fg.inverse.default}", + "hoverBackground": "{color.bg.neutral.strong.selected}", + "hoverColor": "{color.fg.on.brand.hover}" }, - "today": { "background": "{transparent}", "color": "{text.extend.colorPrimaryStatic}" } + "today": { + "background": "transparent", + "color": "{color.fg.inverse.default}" + } } }, "panel": { - "background": "{content.background}", - "borderColor": "{content.borderColor}", - "color": "{content.color}", - "borderRadius": "{content.borderRadius}", - "shadow": "{overlay.popover.shadow}", - "padding": "0rem" + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "color": "{color.fg.default}", + "borderRadius": "{dimension.borderRadius.400}", + "shadow": "{effects.elevation.400}", + "padding": "{dimension.space.none}" }, "header": { - "background": "{content.background}", - "borderColor": "{content.borderColor}", - "color": "{content.color}", - "padding": "{overlay.popover.padding.100}" + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "color": "{color.fg.default}", + "padding": "{dimension.space.400}" + }, + "title": { + "gap": "{dimension.space.200}", + "fontWeight": "{fonts.fontWeight.bold}" }, - "title": { "gap": "{form.gap.200}", "fontWeight": "{fonts.fontWeight.bold}" }, - "inputIcon": { "color": "{form.floatLabelColor}" }, "selectMonth": { - "hoverBackground": "{content.hoverBackground}", - "color": "{content.color}", - "hoverColor": "{content.hoverColor}", - "borderRadius": "{content.borderRadius}", - "padding": "{form.padding.200}" + "hoverBackground": "{color.bg.neutral.weak.default}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "borderRadius": "{dimension.borderRadius.400}", + "padding": "{dimension.space.200}" + }, + "inputIcon": { + "color": "{color.fg.muted}" }, "dropdown": { - "width": "{form.width.300}", - "borderColor": "{form.borderColor}", - "hoverBorderColor": "{form.borderColor}", - "activeBorderColor": "{form.borderColor}", - "borderRadius": "{form.borderRadius.200}", + "width": "{dimension.size.1700}", + "borderColor": "{color.border.neutral.strong}", + "hoverBorderColor": "{color.border.neutral.strong}", + "activeBorderColor": "{color.border.neutral.strong}", + "borderRadius": "{dimension.borderRadius.400}", "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" }, - "sm": { "width": "0rem" }, - "lg": { "width": "0rem" } + "sm": { + "width": "{dimension.size.none}" + }, + "lg": { + "width": "{dimension.size.none}" + } + }, + "group": { + "borderColor": "{color.border.neutral.default}", + "gap": "{dimension.space.400}" }, - "group": { "borderColor": "{content.borderColor}", "gap": "{overlay.popover.padding.100}" }, "selectYear": { - "hoverBackground": "{content.hoverBackground}", - "color": "{content.color}", - "hoverColor": "{content.hoverColor}", - "borderRadius": "{content.borderRadius}", - "padding": "{overlay.select.padding}" + "hoverBackground": "{color.bg.neutral.weak.default}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "borderRadius": "{dimension.borderRadius.400}", + "padding": "{dimension.space.100}" + }, + "dayView": { + "margin": "{dimension.space.400}" }, - "dayView": { "margin": "{overlay.popover.padding.100}" }, "weekDay": { - "padding": "{form.padding.100}", + "padding": "{dimension.space.100}", "fontWeight": "{fonts.fontWeight.bold}", - "color": "{content.color}" + "color": "{color.fg.default}" }, "date": { - "hoverBackground": "{content.hoverBackground}", - "selectedBackground": "{highlight.background}", - "rangeSelectedBackground": "{list.option.focusBackground}", - "color": "{content.color}", - "hoverColor": "{content.color}", - "selectedColor": "{text.extend.colorInverted}", - "rangeSelectedColor": "{text.color}", - "width": "{form.size.500}", - "height": "{form.size.500}", - "borderRadius": "{form.borderRadius.100}", - "padding": "{form.padding.100}", + "hoverBackground": "{color.bg.neutral.weak.default}", + "selectedBackground": "{color.bg.neutral.strong.selected}", + "rangeSelectedBackground": "{color.bg.neutral.weak.default}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.default}", + "selectedColor": "{color.fg.on.fill.default}", + "rangeSelectedColor": "{color.fg.default}", + "width": "{dimension.size.900}", + "height": "{dimension.size.900}", + "borderRadius": "{dimension.borderRadius.200}", + "padding": "{dimension.space.100}", "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "{focusRing.shadow}" - } - }, - "monthView": { "margin": "0 0 0 0" }, - "month": { "padding": "0", "borderRadius": "0rem" }, - "yearView": { "margin": "0 0 0 0" }, - "year": { "padding": "0", "borderRadius": "0rem" }, - "buttonbar": { "padding": "{overlay.popover.padding.100}", "borderColor": "{content.borderColor}" }, + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + } + }, + "monthView": { + "margin": "{dimension.space.none} {dimension.space.none} {dimension.space.none} {dimension.space.none}" + }, + "month": { + "padding": "{dimension.space.none}", + "borderRadius": "{dimension.borderRadius.none}" + }, + "yearView": { + "margin": "{dimension.space.none} {dimension.space.none} {dimension.space.none} {dimension.space.none}" + }, + "year": { + "padding": "{dimension.space.none}", + "borderRadius": "{dimension.borderRadius.none}" + }, + "buttonbar": { + "padding": "{dimension.space.400}", + "borderColor": "{color.border.neutral.default}" + }, "timePicker": { - "padding": "{form.padding.300}", - "borderColor": "{content.borderColor}", - "gap": "{form.gap.200}", - "buttonGap": "{form.gap.100}" + "padding": "{dimension.space.400}", + "borderColor": "{color.border.neutral.default}", + "gap": "{dimension.space.200}", + "buttonGap": "{dimension.space.100}" }, - "root": { "transitionDuration": "{form.transitionDuration}" } + "root": { + "transitionDuration": "{effects.transition.duration.200}" + } }, "dialog": { - "extend": { "borderWidth": "{overlay.borderWidth}", "backdrop": "{overlay.modal.backdrop}" }, + "extend": { + "borderWidth": "{dimension.borderWidth.100}", + "backdrop": "{color.bg.surface.backdrop}" + }, "root": { - "background": "{overlay.modal.background}", - "borderColor": "{overlay.modal.borderColor}", - "color": "{overlay.modal.color}", - "borderRadius": "{overlay.modal.borderRadius}", - "shadow": "{overlay.popover.shadow}" + "background": "{color.bg.surface.raised.default}", + "borderColor": "{color.border.neutral.default}", + "color": "{color.fg.default}", + "borderRadius": "{dimension.size.700}", + "shadow": "{effects.elevation.400}" }, "header": { - "padding": "{overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.100} {overlay.modal.padding.300}", - "gap": "{overlay.gap.200}" + "padding": "{dimension.space.700} {dimension.space.700} {dimension.space.400} {dimension.space.700}", + "gap": "{dimension.space.200}" + }, + "title": { + "fontSize": "{fonts.fontSize.500}", + "fontWeight": "{fonts.fontWeight.demibold}" + }, + "content": { + "padding": "{dimension.space.700}" }, - "title": { "fontSize": "{fonts.fontSize.500}", "fontWeight": "{fonts.fontWeight.demibold}" }, - "content": { "padding": "{content.padding.400}" }, "footer": { - "padding": "0 {overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.300}", - "gap": "{content.gap.200}" + "padding": "{dimension.space.none} {dimension.space.700} {dimension.space.700} {dimension.space.700}", + "gap": "{dimension.space.200}" + }, + "colorScheme": { + "dark": { + "root": { + "background": "{color.bg.surface.canvas.default}" + } + } } }, "divider": { - "colorScheme": { - "light": { - "content": { "background": "{content.background}", "color": "{text.mutedColor}" }, - "borderColor": "{content.borderColor}" - } + "extend": { + "content": { + "gap": "{dimension.space.200}" + }, + "iconSize": "{dimension.size.450}" }, - "extend": { "content": { "gap": "{content.gap.200}" }, "iconSize": "{media.icon.size.100}" }, "horizontal": { - "margin": "{content.padding.300} 0", - "padding": "0 {content.padding.300}", - "content": { "padding": "0 {content.padding.200}" } + "margin": "{dimension.space.400} {dimension.space.none}", + "padding": "{dimension.space.none} {dimension.space.400}", + "content": { + "padding": "{dimension.space.none} {dimension.space.200}" + } }, "vertical": { - "margin": "0 {content.padding.300}", - "padding": "{content.padding.300} 0", - "content": { "padding": "{content.padding.200} 0" } + "margin": "{dimension.space.none} {dimension.space.400}", + "padding": "{dimension.space.400} {dimension.space.none}", + "content": { + "padding": "{dimension.space.200} {dimension.space.none}" + } + }, + "content": { + "background": "{color.bg.surface.default.default}", + "color": "{color.fg.default}" + }, + "root": { + "borderColor": "{color.border.neutral.default}" } }, "drawer": { "extend": { - "borderRadius": "{overlay.popover.borderRadius}", - "borderWidth": "{overlay.borderWidth}", - "extHeader": { "gap": "{overlay.gap.200}", "borderColor": "{drawer.root.borderColor}" }, - "width": "{overlay.width}", - "margin": "{overlay.drawer.margin}", - "padding": "{overlay.drawer.padding}", - "scale": "0.125rem", - "backdrop": "{overlay.modal.backdrop}" + "borderRadius": "{dimension.borderRadius.200}", + "borderWidth": "{dimension.borderWidth.100}", + "width": "{dimension.size.2000}", + "extHeader": { + "gap": "{dimension.space.200}", + "borderColor": "{color.border.neutral.strong}" + }, + "margin": "{dimension.space.200}", + "scale": "{dimension.size.50}", + "backdrop": "{color.bg.surface.backdrop}" }, "root": { - "background": "{overlay.modal.background}", - "borderColor": "{overlay.modal.borderColor}", - "color": "{overlay.modal.color}", - "shadow": "{overlay.modal.shadow}" + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "color": "{color.fg.default}", + "shadow": "{effects.elevation.200}" }, "header": { - "padding": "{overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.100} {overlay.modal.padding.300} " + "padding": "{dimension.space.700} {dimension.space.700} {dimension.space.400} {dimension.space.700}" + }, + "title": { + "fontSize": "{fonts.fontSize.500}", + "fontWeight": "{fonts.fontWeight.demibold}" }, - "title": { "fontSize": "{fonts.fontSize.500}", "fontWeight": "{fonts.fontWeight.demibold}" }, - "content": { "padding": "{overlay.modal.padding.300}" }, - "footer": { "padding": "0 {overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.300} " } + "content": { + "padding": "{dimension.space.700}" + }, + "footer": { + "padding": "{dimension.space.none} {dimension.space.700} {dimension.space.700} {dimension.space.700}" + } }, "fileupload": { "extend": { "extDragNdrop": { - "background": "{surface.0}", - "borderRadius": "{form.borderRadius.200}", - "iconSize": "{form.size.500}", - "padding": "{form.padding.400}", - "info": { "gap": "{form.gap.100}" } + "background": "{color.bg.surface.raised.default}", + "borderRadius": "{dimension.borderRadius.400}", + "iconSize": "{dimension.size.900}", + "padding": "{dimension.space.400}", + "info": { + "gap": "{dimension.space.100}" + } }, - "extFile": { "iconSize": "{form.size.500}" }, - "extContent": { "borderRadius": "{content.borderRadius}", "highlightBorderDefault": "{form.borderColor}" } + "extFile": { + "iconSize": "{dimension.size.600}" + }, + "extContent": { + "borderRadius": "{dimension.borderRadius.400}", + "highlightBorderDefault": "{color.border.neutral.strong}" + } + }, + "colorScheme": { + "light": { + "header": { + "background": "{color.bg.surface.default.default}", + "color": "{color.fg.default}" + } + }, + "dark": { + "header": { + "background": "{color.bg.surface.default.default}", + "color": "{color.fg.inverse.default}" + } + } }, - "colorScheme": { "light": { "header": { "background": "{surface.0}", "color": "{text.color}" } } }, "root": { - "background": "{content.background}", - "borderColor": "{content.borderColor}", - "color": "{content.color}", - "borderRadius": "{content.borderRadius}", - "transitionDuration": "{form.transitionDuration}" + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "color": "{color.fg.default}", + "borderRadius": "{dimension.borderRadius.400}", + "transitionDuration": "{effects.transition.duration.200}" }, "header": { - "borderColor": "{content.borderColor}", - "borderWidth": "0rem", - "padding": "0rem", - "borderRadius": "0rem", - "gap": "{content.gap.200}" + "borderColor": "{color.border.neutral.default}", + "borderWidth": "{dimension.borderWidth.none}", + "padding": "{dimension.space.none}", + "borderRadius": "{dimension.borderRadius.none}", + "gap": "{dimension.space.200}" + }, + "content": { + "highlightBorderColor": "{color.border.neutral.bold.default}", + "padding": "{dimension.space.none}", + "gap": "{dimension.space.200}" }, - "content": { "highlightBorderColor": "{surface.900}", "padding": "0rem", "gap": "{content.gap.200}" }, "file": { - "padding": "{content.padding.200}", - "gap": "{content.gap.200}", - "borderColor": "{form.borderColor}", - "info": { "gap": "{content.gap.100}" } + "padding": "{dimension.space.200}", + "gap": "{dimension.space.200}", + "borderColor": "{color.border.neutral.strong}", + "info": { + "gap": "{dimension.space.100}" + } }, - "fileList": { "gap": "{content.gap.200}" }, - "progressbar": { "height": "{feedback.height.100}" }, - "basic": { "gap": "{content.gap.200}" } + "fileList": { + "gap": "{dimension.space.200}" + }, + "progressbar": { + "height": "{dimension.size.200}" + }, + "basic": { + "gap": "{dimension.space.200}" + } }, "floatlabel": { - "extend": { "iconSize": "{form.icon.400}" }, + "extend": { + "height": "{dimension.size.1400}", + "iconSize": "{dimension.size.600}" + }, "root": { - "color": "{form.floatLabelColor}", - "focusColor": "{form.floatLabelFocusColor}", - "activeColor": "{form.floatLabelActiveColor}", - "invalidColor": "{form.floatLabelInvalidColor}", - "transitionDuration": "{form.transitionDuration}", - "positionX": "{form.padding.300}", - "positionY": "{form.padding.300}", + "color": "{color.fg.muted}", + "focusColor": "{color.fg.muted}", + "activeColor": "{color.fg.muted}", + "invalidColor": "{color.fg.status.danger.hover}", + "transitionDuration": "{effects.transition.duration.200}", + "positionX": "{dimension.space.400}", + "positionY": "{dimension.space.400}", "fontWeight": "{fonts.fontWeight.regular}", - "active": { "fontSize": "{fonts.fontSize.100}", "fontWeight": "{fonts.fontWeight.regular}" } + "active": { + "fontSize": "{fonts.fontSize.100}", + "fontWeight": "{fonts.fontWeight.regular}" + } + }, + "over": { + "active": { + "top": "{dimension.space.400}" + } }, - "over": { "active": { "top": "{form.padding.400}" } }, "inside": { - "input": { "paddingTop": "{form.padding.700}", "paddingBottom": "{form.padding.300}" }, - "active": { "top": "{form.padding.300}" } + "input": { + "paddingTop": "{dimension.space.800}", + "paddingBottom": "{dimension.space.400}" + }, + "active": { + "top": "{dimension.space.400}" + } }, "on": { - "borderRadius": "0rem", - "active": { "padding": "0 {form.padding.100}", "background": "{form.background}" } + "borderRadius": "{dimension.borderRadius.none}", + "active": { + "padding": "{dimension.space.none} {dimension.space.100}", + "background": "{color.bg.surface.raised.default}" + } } }, "galleria": { - "extend": { "backdrop": "{overlay.modal.backdrop}" }, + "extend": { + "backdrop": "{color.bg.surface.backdrop}" + }, "colorScheme": { "light": { - "thumbnailContent": { "background": "{surface.100}" }, + "thumbnailContent": { + "background": "{color.bg.neutral.weak.default}" + }, + "thumbnailNavButton": { + "hoverBackground": "{color.bg.neutral.medium.default}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}" + }, + "indicatorButton": { + "background": "{color.bg.neutral.weak.active}", + "hoverBackground": "{color.bg.neutral.medium.active}" + }, + "thumbnailsContent": { + "background": "{color.bg.neutral.medium.default}" + } + }, + "dark": { + "indicatorButton": { + "background": "{color.bg.neutral.strong.active}", + "hoverBackground": "{color.bg.neutral.medium.active}" + }, "thumbnailNavButton": { - "hoverBackground": "{colors.alpha.white.200}", - "color": "{text.color}", - "hoverColor": "{text.hoverColor}" + "color": "{color.fg.inverse.default}", + "hoverBackground": "{color.bg.neutral.medium.default}", + "hoverColor": "{color.fg.inverse.hover}" }, - "indicatorButton": { "background": "{surface.300}", "hoverBackground": "{surface.400}" } + "thumbnailsContent": { + "background": "{color.bg.neutral.medium.default}" + }, + "thumbnailContent": { + "background": "{color.bg.neutral.strong.default}" + } } }, "root": { - "borderWidth": "{content.borderWidth}", - "borderColor": "{content.borderColor}", - "borderRadius": "{content.borderRadius}", - "transitionDuration": "{media.transitionDuration}" + "borderWidth": "{dimension.borderWidth.100}", + "borderColor": "{color.border.neutral.default}", + "borderRadius": "{dimension.borderRadius.400}", + "transitionDuration": "{effects.transition.duration.200}" }, "navButton": { - "background": "{transparent}", - "hoverBackground": "{colors.alpha.white.200}", - "color": "{text.extend.colorInverted}", - "hoverColor": "{text.extend.colorInverted}", - "size": "{media.size.600}", - "gutter": "{media.gap.200}", - "prev": { "borderRadius": "{navigation.item.borderRadius}" }, - "next": { "borderRadius": "{navigation.item.borderRadius}" }, + "background": "transparent", + "hoverBackground": "{color.bg.neutral.medium.default}", + "color": "{color.fg.inverse.default}", + "hoverColor": "{color.fg.inverse.hover}", + "size": "{dimension.size.1400}", + "gutter": "{dimension.space.200}", + "prev": { + "borderRadius": "{dimension.borderRadius.200}" + }, + "next": { + "borderRadius": "{dimension.borderRadius.200}" + }, "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" } }, - "navIcon": { "size": "{media.icon.size.300}" }, - "thumbnailsContent": { "padding": "{media.padding.100}" }, + "navIcon": { + "size": "{dimension.size.900}" + }, + "thumbnailsContent": { + "padding": "{dimension.space.100}" + }, "thumbnailNavButton": { - "size": "{media.size.300}", - "borderRadius": "{content.borderRadius}", - "gutter": "{media.gap.200}", + "size": "{dimension.size.900}", + "borderRadius": "{dimension.borderRadius.400}", + "gutter": "{dimension.space.200}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" } }, - "thumbnailNavButtonIcon": { "size": "{media.icon.size.100}" }, - "caption": { "background": "{colors.alpha.white.500}", "color": "{text.color}", "padding": "{media.gap.200}" }, - "indicatorList": { "gap": "{media.gap.200}", "padding": "{media.padding.400}" }, + "thumbnailNavButtonIcon": { + "size": "{dimension.size.450}" + }, + "caption": { + "background": "{color.bg.neutral.medium.default}", + "color": "{color.fg.default}", + "padding": "{dimension.space.200}" + }, + "indicatorList": { + "gap": "{dimension.space.200}", + "padding": "{dimension.space.400}" + }, "indicatorButton": { - "width": "{media.size.200}", - "height": "{media.size.200}", - "activeBackground": "{surface.900}", - "borderRadius": "{content.borderRadius}", + "width": "{dimension.size.200}", + "height": "{dimension.size.200}", + "activeBackground": "{color.bg.neutral.strong.default}", + "borderRadius": "{dimension.borderRadius.400}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" } }, - "insetIndicatorList": { "background": "{colors.alpha.black.500}" }, + "insetIndicatorList": { + "background": "{color.bg.surface.backdrop}" + }, "insetIndicatorButton": { - "background": "{colors.alpha.white.100}", - "hoverBackground": "{colors.alpha.white.200}", - "activeBackground": "{colors.alpha.white.500}" + "background": "{color.bg.neutral.medium.default}", + "hoverBackground": "{color.bg.neutral.medium.default}", + "activeBackground": "{color.bg.neutral.medium.default}" }, "closeButton": { - "size": "{media.size.600}", - "gutter": "{media.gap.200}", - "background": "{colors.alpha.white.100}", - "hoverBackground": "{colors.alpha.white.200}", - "color": "{text.extend.colorInverted}", - "hoverColor": "{text.extend.colorInverted}", - "borderRadius": "{controls.borderRadius.200}", + "size": "{dimension.size.1400}", + "gutter": "{dimension.space.200}", + "background": "{color.bg.neutral.medium.default}", + "hoverBackground": "{color.bg.neutral.medium.default}", + "color": "{color.fg.inverse.default}", + "hoverColor": "{color.fg.inverse.hover}", + "borderRadius": "{dimension.borderRadius.400}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" } }, - "closeButtonIcon": { "size": "{media.icon.size.300}" } + "closeButtonIcon": { + "size": "{dimension.size.900}" + } }, "inputgroup": { - "extend": { "borderWidth": "{form.borderWidth}", "iconSize": "{form.icon.300}" }, + "extend": { + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": "{dimension.size.450}" + }, "colorScheme": { "light": { "addon": { - "background": "{form.background}", - "borderColor": "{form.borderColor}", - "color": "{text.mutedColor}" + "background": "{color.bg.surface.raised.default}", + "borderColor": "{color.border.neutral.strong}", + "color": "{color.fg.muted}" + } + }, + "dark": { + "addon": { + "background": "{color.bg.surface.raised.default}", + "borderColor": "{color.border.neutral.strong}", + "color": "{color.fg.inverse.muted}" } } }, "addon": { - "borderRadius": "{form.borderRadius.200}", - "padding": "{form.padding.300}", - "minWidth": "{form.width.300}" + "borderRadius": "{dimension.borderRadius.400}", + "padding": "{dimension.space.400}", + "minWidth": "{dimension.size.1700}" } }, "inputnumber": { "extend": { - "borderWidth": "{form.borderWidth}", - "extButton": { "height": "{form.size.600}", "iconSize": "{form.icon.300}" } + "borderWidth": "{dimension.borderWidth.100}", + "extButton": { + "height": "{dimension.size.1100}", + "iconSize": "{dimension.size.450}" + } }, "colorScheme": { "light": { "button": { - "background": "{content.background}", - "hoverBackground": "{content.hoverBackground}", - "activeBackground": "{transparent}", - "borderColor": "{form.borderColor}", - "hoverBorderColor": "{form.borderColor}", - "activeBorderColor": "{form.borderColor}", - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "activeColor": "{text.color}" + "background": "{color.bg.surface.raised.default}", + "hoverBackground": "{color.bg.neutral.weak.default}", + "activeBackground": "transparent", + "borderColor": "{color.border.neutral.strong}", + "hoverBorderColor": "{color.border.neutral.strong}", + "activeBorderColor": "{color.border.neutral.strong}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "activeColor": "{color.fg.default}" + } + }, + "dark": { + "button": { + "activeBackground": "transparent", + "activeBorderColor": "{color.border.neutral.strong}", + "activeColor": "{color.fg.on.brand.active}", + "background": "{color.bg.surface.raised.default}", + "borderColor": "{color.border.neutral.strong}", + "color": "{color.fg.inverse.default}", + "hoverBackground": "{color.bg.neutral.strong.selected}", + "hoverBorderColor": "{color.border.neutral.strong}", + "hoverColor": "{color.fg.inverse.hover}" } } }, - "transitionDuration": { "transitionDuration": "{form.transitionDuration}" }, + "transitionDuration": { + "transitionDuration": "{effects.transition.duration.200}" + }, "button": { - "width": "{form.width.300}", - "borderRadius": "{form.borderRadius.200}", - "verticalPadding": "{form.padding.300}" + "width": "{dimension.size.1100}", + "borderRadius": "{dimension.borderRadius.400}", + "verticalPadding": "{dimension.space.400}" + }, + "root": { + "transitionDuration": "{effects.transition.duration.200}" } }, "inputotp": { - "extend": { "height": "{form.size.600}", "borderWidth": "{form.borderWidth}" }, - "root": { "gap": "{form.gap.200}" }, - "input": { "width": "{form.width.400}" }, - "sm": { "width": "0rem" }, - "lg": { "width": "0rem" } + "extend": { + "height": "{dimension.size.1100}", + "borderWidth": "{dimension.borderWidth.100}" + }, + "root": { + "gap": "{dimension.space.200}" + }, + "input": { + "width": "{dimension.size.1800}", + "lg": { + "width": "{dimension.size.1900}" + }, + "sm": { + "width": "{dimension.size.1700}" + } + }, + "sm": { + "width": "{dimension.size.none}" + }, + "lg": { + "width": "{dimension.size.none}" + } }, "inputtext": { "extend": { - "readonlyBackground": "{form.readonlyBackground}", - "iconSize": "{form.icon.300}", - "borderWidth": "{form.borderWidth}", - "extXlg": { "fontSize": "{form.fontSize}", "paddingX": "{form.paddingX}", "paddingY": "{form.paddingY}" } + "readonlyBackground": "{color.bg.neutral.weak.default}", + "iconSize": "{dimension.size.450}", + "borderWidth": "{dimension.borderWidth.100}", + "extXlg": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.600}" + } }, "root": { - "background": "{form.background}", - "disabledBackground": "{form.disabledBackground}", - "filledBackground": "{form.filledBackground}", - "filledHoverBackground": "{form.filledHoverBackground}", - "filledFocusBackground": "{form.filledFocusBackground}", - "borderColor": "{form.borderColor}", - "hoverBorderColor": "{form.hoverBorderSecondaryColor}", - "focusBorderColor": "{form.focusBorderSecondaryColor}", - "invalidBorderColor": "{form.invalidBorderColor}", - "color": "{text.color}", - "disabledColor": "{form.disabledColor}", - "placeholderColor": "{form.placeholderColor}", - "invalidPlaceholderColor": "{form.invalidPlaceholderColor}", - "shadow": "0", - "paddingX": "{form.padding.300}", - "paddingY": "{form.paddingY}", - "borderRadius": "{form.borderRadius.200}", - "transitionDuration": "{form.transitionDuration}", - "sm": { "fontSize": "{form.fontSize}", "paddingX": "{form.padding.300}", "paddingY": "{form.paddingY}" }, - "lg": { "fontSize": "{form.fontSize}", "paddingX": "{form.padding.300}", "paddingY": "{form.paddingY}" }, + "background": "{color.bg.surface.default.default}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "filledBackground": "{color.bg.surface.default.default}", + "filledHoverBackground": "{color.bg.surface.default.default}", + "filledFocusBackground": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.strong}", + "hoverBorderColor": "{color.border.brand.strong}", + "focusBorderColor": "{color.border.brand.strong}", + "invalidBorderColor": "{color.border.status.danger.subtle}", + "color": "{color.fg.default}", + "disabledColor": "{color.fg.muted}", + "placeholderColor": "{color.fg.muted}", + "invalidPlaceholderColor": "{color.fg.status.danger.hover}", + "shadow": "{effects.elevation.none}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.300}", + "borderRadius": "{dimension.borderRadius.400}", + "transitionDuration": "{effects.transition.duration.200}", + "sm": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.200}" + }, + "lg": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.400}" + }, "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "0" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}" } } }, "listbox": { "extend": { "extOption": { - "label": { "gap": "{list.gap.100}" }, - "caption": { "color": "{text.mutedColor}", "stripedColor": "{text.mutedColor}" }, - "gap": "{list.gap.200}" + "label": { + "gap": "{dimension.space.100}" + }, + "caption": { + "color": "{color.fg.muted}", + "stripedColor": "{color.fg.muted}" + }, + "gap": "{dimension.space.200}" + } + }, + "colorScheme": { + "light": { + "option": { + "stripedBackground": "{color.bg.surface.raised.selected}" + } + }, + "dark": { + "option": { + "stripedBackground": "{color.bg.surface.raised.selected}" + } } }, - "colorScheme": { "light": { "option": { "stripedBackground": "{surface.50}" } } }, "root": { - "background": "{form.background}", - "disabledBackground": "{form.disabledBackground}", - "borderColor": "{form.borderColor}", - "invalidBorderColor": "{form.invalidBorderColor}", - "color": "{form.color}", - "disabledColor": "{form.disabledColor}", - "shadow": "0", - "borderRadius": "{form.borderRadius.200}", - "transitionDuration": "{form.transitionDuration}" + "background": "{color.bg.surface.default.default}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "borderColor": "{color.border.neutral.strong}", + "invalidBorderColor": "{color.border.status.danger.subtle}", + "color": "{color.fg.active}", + "disabledColor": "{color.fg.muted}", + "shadow": "{effects.elevation.none}", + "borderRadius": "{dimension.borderRadius.400}", + "transitionDuration": "{effects.transition.duration.200}" }, "list": { - "padding": "{list.padding}", - "gap": "{list.gap.100}", - "header": { "padding": "{list.header.padding}" } + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}", + "header": { + "padding": "{dimension.space.400} {dimension.space.400} {dimension.space.none} {dimension.space.400}" + } }, "option": { - "focusBackground": "{list.option.focusBackground}", - "selectedBackground": "{list.option.selectedBackground}", - "selectedFocusBackground": "{list.option.selectedFocusBackground}", - "color": "{list.option.color}", - "focusColor": "{list.option.focusColor}", - "selectedColor": "{list.option.selectedColor}", - "selectedFocusColor": "{list.option.selectedFocusColor}", - "padding": "{list.option.padding}", - "borderRadius": "{list.option.borderRadius}" + "focusBackground": "{color.bg.neutral.weak.default}", + "selectedBackground": "{color.bg.neutral.strong.selected}", + "selectedFocusBackground": "{color.bg.neutral.strong.active}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "selectedColor": "{color.fg.on.fill.default}", + "selectedFocusColor": "{color.fg.on.fill.active}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.200}" }, "optionGroup": { - "background": "{list.optionGroup.background}", - "color": "{list.optionGroup.color}", + "background": "{color.bg.surface.raised.default}", + "color": "{color.fg.muted}", "fontWeight": "{fonts.fontWeight.regular}", - "padding": "{list.option.padding}" + "padding": "{dimension.space.200} {dimension.space.400}" }, - "checkmark": { "color": "{list.option.color}", "gutterStart": "-{list.gap.200}", "gutterEnd": "{list.gap.200}" }, - "emptyMessage": { "padding": "{list.option.padding}" } + "checkmark": { + "color": "{color.fg.default}", + "gutterStart": "{dimension.space.negative.200}", + "gutterEnd": "{dimension.space.200}" + }, + "emptyMessage": { + "padding": "{dimension.space.200} {dimension.space.400}" + } }, "megamenu": { "extend": { - "extItem": { "caption": { "color": "{text.mutedColor}", "gap": "{content.gap.100}" } }, - "iconSize": "{navigation.submenuIcon.size}" + "extItem": { + "caption": { + "color": "{color.fg.muted}", + "gap": "{dimension.space.100}" + } + }, + "iconSize": "{dimension.size.600}" + }, + "colorScheme": { + "light": { + "root": { + "background": "transparent" + } + }, + "dark": { + "root": { + "background": "transparent" + } + } }, - "colorScheme": { "light": { "root": { "background": "{transparent}" } } }, "root": { - "borderColor": "{transparent}", - "borderRadius": "{content.borderRadius}", - "color": "{content.color}", - "gap": "{content.gap.100}", - "transitionDuration": "{form.transitionDuration}", - "verticalOrientation": { "padding": "{navigation.list.padding.100}", "gap": "{navigation.list.gap}" }, - "horizontalOrientation": { "padding": "{navigation.list.padding.100}", "gap": "{navigation.list.gap}" } - }, - "baseItem": { "borderRadius": "{content.borderRadius}", "padding": "{navigation.item.padding}" }, + "borderColor": "transparent", + "borderRadius": "{dimension.borderRadius.400}", + "color": "{color.fg.default}", + "gap": "{dimension.space.100}", + "transitionDuration": "{effects.transition.duration.200}", + "verticalOrientation": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + }, + "horizontalOrientation": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + } + }, + "baseItem": { + "borderRadius": "{dimension.borderRadius.400}", + "padding": "{dimension.space.200} {dimension.space.400}" + }, "item": { - "focusBackground": "{navigation.item.focusBackground}", - "activeBackground": "{navigation.item.activeBackground}", - "color": "{navigation.item.color}", - "focusColor": "{navigation.item.focusColor}", - "activeColor": "{navigation.item.activeColor}", - "padding": "{navigation.item.padding}", - "borderRadius": "{navigation.item.borderRadius}", - "gap": "{navigation.item.gap}", + "focusBackground": "{color.bg.neutral.weak.default}", + "activeBackground": "{color.bg.neutral.strong.default}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "activeColor": "{color.fg.inverse.active}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.200}", + "gap": "{dimension.space.200}", "icon": { - "color": "{navigation.item.icon.color}", - "focusColor": "{navigation.item.icon.focusColor}", - "activeColor": "{navigation.item.icon.activeColor}" + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "activeColor": "{color.fg.inverse.active}" } }, "overlay": { - "padding": "{content.padding.100}", - "background": "{content.background}", - "borderColor": "{content.borderColor}", - "borderRadius": "{content.borderRadius}", - "color": "{content.color}", - "shadow": "{navigation.shadow}", - "gap": "0rem" - }, - "submenu": { "padding": "{navigation.list.padding.100}", "gap": "{navigation.list.gap}" }, + "padding": "{dimension.space.100}", + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "borderRadius": "{dimension.borderRadius.400}", + "color": "{color.fg.default}", + "shadow": "{effects.elevation.400}", + "gap": "{dimension.space.none}" + }, + "submenu": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + }, "submenuLabel": { - "padding": "{navigation.submenuLabel.padding}", - "background": "{navigation.submenuLabel.background}", - "color": "{navigation.submenuLabel.color}" + "padding": "{dimension.space.200} {dimension.space.400}", + "background": "transparent", + "color": "{color.fg.muted}", + "fontWeight": "{fonts.fontWeight.regular}" }, "submenuIcon": { - "size": "{navigation.submenuIcon.size}", - "color": "{navigation.submenuIcon.color}", - "focusColor": "{navigation.submenuIcon.focusColor}", - "activeColor": "{navigation.submenuIcon.activeColor}" + "size": "{dimension.size.600}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "activeColor": "{color.fg.inverse.active}" + }, + "separator": { + "borderColor": "{color.border.neutral.default}" }, - "separator": { "borderColor": "{content.borderColor}" }, "mobileButton": { - "borderRadius": "{navigation.item.borderRadius}", - "size": "{controls.iconOnly.600}", - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "hoverBackground": "{content.hoverBackground}", + "borderRadius": "{dimension.borderRadius.200}", + "size": "{dimension.size.900}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "hoverBackground": "{color.bg.neutral.weak.default}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" } } }, "menu": { "extend": { - "paddingX": "0.25rem", - "iconSize": "{navigation.submenuIcon.size}", - "paddingY": "0.25rem", + "paddingX": "{dimension.space.100}", + "iconSize": "{dimension.size.600}", + "paddingY": "{dimension.space.100}", "extItem": { - "caption": { "gap": "{content.gap.100}" }, - "activeBackground": "{navigation.item.activeBackground}", - "activeColor": "{navigation.item.activeColor}" - } - }, - "colorScheme": { - "light": { - "extend": { - "extItem": { - "caption": { "color": "{text.mutedColor}" }, - "icon": { "activeColor": "{navigation.item.icon.activeColor}" } - } + "caption": { + "gap": "{dimension.space.100}", + "color": "{color.fg.muted}" }, - "root": { - "background": "{content.background}", - "borderColor": "{content.borderColor}", - "color": "{content.color}" - }, - "item": { - "focusBackground": "{navigation.item.focusBackground}", - "color": "{navigation.item.color}", - "focusColor": "{navigation.item.focusColor}", - "icon": { "color": "{navigation.item.icon.color}", "focusColor": "{navigation.item.icon.focusColor}" } + "activeBackground": "{color.bg.neutral.strong.default}", + "activeColor": "{color.fg.inverse.active}", + "icon": { + "activeColor": "{color.fg.inverse.active}" } } }, "root": { - "borderRadius": "{content.borderRadius}", - "shadow": "{navigation.shadow}", - "transitionDuration": "{form.transitionDuration}" + "borderRadius": "{dimension.borderRadius.400}", + "shadow": "{effects.elevation.400}", + "transitionDuration": "{effects.transition.duration.200}", + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "color": "{color.fg.default}" + }, + "list": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" }, - "list": { "padding": "{navigation.list.padding.100}", "gap": "{navigation.list.gap}" }, "submenuLabel": { - "padding": "{navigation.submenuLabel.padding}", + "padding": "{dimension.space.200} {dimension.space.400}", "fontWeight": "{fonts.fontWeight.regular}", - "background": "{navigation.submenuLabel.background}", - "color": "{navigation.submenuLabel.color}" + "background": "transparent", + "color": "{color.fg.muted}" + }, + "separator": { + "borderColor": "{color.border.neutral.default}" }, - "separator": { "borderColor": "{content.borderColor}" }, "item": { - "padding": "{navigation.item.padding}", - "borderRadius": "{navigation.item.borderRadius}", - "gap": "{navigation.item.gap}" + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.200}", + "gap": "{dimension.space.200}", + "color": "{color.fg.default}", + "focusBackground": "{color.bg.surface.canvas.default}", + "focusColor": "{color.fg.default}", + "icon": { + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}" + } } }, "menubar": { "extend": { - "iconSize": "{navigation.submenuIcon.size}", - "extItem": { "caption": { "color": "{text.mutedColor}", "gap": "{content.padding.100}" } }, + "iconSize": "{dimension.size.600}", + "extItem": { + "caption": { + "color": "{color.fg.muted}", + "gap": "{dimension.space.100}" + } + }, "extSubmenuLabel": { - "padding": "{navigation.submenuLabel.padding}", + "padding": "{dimension.space.200} {dimension.space.400}", "fontWeight": "{fonts.fontWeight.regular}", - "background": "{navigation.submenuLabel.background}", - "color": "{navigation.submenuLabel.color}" + "background": "transparent", + "color": "{color.fg.muted}" + } + }, + "colorScheme": { + "light": { + "root": { + "background": "transparent" + } + }, + "dark": { + "root": { + "background": "transparent" + } } }, - "colorScheme": { "light": { "root": { "background": "{transparent}" } } }, "root": { - "borderColor": "{transparent}", - "borderRadius": "{navigation.item.borderRadius}", - "color": "{content.color}", - "gap": "{content.padding.100}", - "padding": "{navigation.list.padding.100}", - "transitionDuration": "{form.transitionDuration}" - }, - "baseItem": { "borderRadius": "{navigation.item.borderRadius}", "padding": "{navigation.item.padding}" }, + "borderColor": "transparent", + "borderRadius": "{dimension.borderRadius.200}", + "color": "{color.fg.default}", + "gap": "{dimension.space.100}", + "padding": "{dimension.space.100}", + "transitionDuration": "{effects.transition.duration.200}" + }, + "baseItem": { + "borderRadius": "{dimension.borderRadius.200}", + "padding": "{dimension.space.200} {dimension.space.400}" + }, "item": { - "focusBackground": "{navigation.item.focusBackground}", - "activeBackground": "{navigation.item.activeBackground}", - "color": "{navigation.item.color}", - "focusColor": "{navigation.item.focusColor}", - "activeColor": "{navigation.item.activeColor}", - "padding": "{navigation.item.padding}", - "borderRadius": "{navigation.item.borderRadius}", - "gap": "{navigation.item.gap}", + "focusBackground": "{color.bg.neutral.weak.default}", + "activeBackground": "{color.bg.neutral.strong.default}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "activeColor": "{color.fg.inverse.active}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.200}", + "gap": "{dimension.space.200}", "icon": { - "color": "{navigation.item.icon.color}", - "focusColor": "{navigation.item.icon.focusColor}", - "activeColor": "{navigation.item.icon.activeColor}" + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "activeColor": "{color.fg.inverse.active}" } }, "submenu": { - "padding": "{navigation.list.padding.100}", - "gap": "{navigation.list.gap}", - "background": "{content.background}", - "borderColor": "{content.borderColor}", - "borderRadius": "{content.borderRadius}", - "shadow": "{navigation.shadow}", - "mobileIndent": "{navigation.padding.200}", + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}", + "background": "{color.bg.surface.raised.default}", + "borderColor": "{color.border.neutral.default}", + "borderRadius": "{dimension.borderRadius.400}", + "shadow": "{effects.elevation.400}", + "mobileIndent": "{dimension.space.400}", "icon": { - "size": "{navigation.submenuIcon.size}", - "color": "{navigation.submenuIcon.color}", - "focusColor": "{navigation.submenuIcon.focusColor}", - "activeColor": "{navigation.submenuIcon.activeColor}" + "size": "{dimension.size.600}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "activeColor": "{color.fg.inverse.active}" } }, - "separator": { "borderColor": "{content.borderColor}" }, + "separator": { + "borderColor": "{color.border.neutral.default}" + }, "mobileButton": { - "borderRadius": "{navigation.item.borderRadius}", - "size": "{controls.iconOnly.600}", - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "hoverBackground": "{content.hoverBackground}", + "borderRadius": "{dimension.borderRadius.200}", + "size": "{dimension.size.900}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "hoverBackground": "{color.bg.neutral.weak.default}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" } } }, "message": { "extend": { - "width": "{messages.width}", - "extText": { "gap": "{feedback.gap.100}" }, + "width": "{dimension.size.2000}", + "extText": { + "gap": "{dimension.space.100}" + }, "extInfo": { - "color": "{info.500}", - "closeButton": { "color": "{info.500}", "borderColor": "{info.500}" }, - "caption": { "color": "{text.color}" } + "color": "{color.fg.status.info.default}", + "closeButton": { + "color": "{color.fg.status.info.default}", + "borderColor": "{color.border.status.info.default}" + }, + "caption": { + "color": "{color.fg.default}" + } + }, + "extAccentLine": { + "width": "{dimension.size.100}" + }, + "extCloseButton": { + "width": "{dimension.borderWidth.100}" }, - "extAccentLine": { "width": "{feedback.width.200}" }, - "extCloseButton": { "width": "{feedback.width.100}" }, "extSuccess": { - "color": "{success.500}", - "closeButton": { "color": "{success.500}", "borderColor": "{success.500}" }, - "caption": { "color": "{text.color}" } + "color": "{color.fg.status.success.default}", + "closeButton": { + "color": "{color.fg.status.success.default}", + "borderColor": "{color.border.brand.default}" + }, + "caption": { + "color": "{color.fg.default}" + } }, "extWarn": { - "color": "{warn.500}", - "closeButton": { "color": "{warn.500}", "borderColor": "{warn.500}" }, - "caption": { "color": "{text.color}" } + "color": "{color.fg.status.warning.default}", + "closeButton": { + "color": "{color.fg.status.warning.default}", + "borderColor": "{color.border.status.warning.default}" + }, + "caption": { + "color": "{color.fg.default}" + } }, "extError": { - "color": "{error.500}", - "closeButton": { "color": "{error.500}", "borderColor": "{error.500}" }, - "caption": { "color": "{text.color}" } + "color": "{color.fg.status.danger.default}", + "closeButton": { + "color": "{color.fg.status.danger.default}", + "borderColor": "{color.border.status.danger.default}" + }, + "caption": { + "color": "{color.fg.default}" + } } }, "colorScheme": { "light": { "success": { - "background": "{success.50}", - "borderColor": "{success.500}", - "color": "{text.color}", + "background": "{color.bg.status.success.weak.default}", + "borderColor": "{color.border.brand.default}", + "color": "{color.fg.default}", "shadow": "none", - "outlined": { "color": "{text.color}", "borderColor": "{success.500}" }, + "outlined": { + "color": "{color.fg.default}", + "borderColor": "{color.border.brand.default}" + }, "closeButton": { - "hoverBackground": "{success.200}", - "focusRing": { "color": "{focusRing.color}", "shadow": "{focusRing.shadow}" } + "hoverBackground": "{color.bg.status.success.weak.active}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } }, - "simple": { "color": "{text.color}" } + "simple": { + "color": "{color.fg.default}" + } }, "outlined": { - "root": { "borderWidth": "0rem" }, + "root": { + "borderWidth": "{dimension.borderWidth.none}" + }, "closeButton": { - "hoverBackground": "{transparent}", - "focusRing": { "color": "{focusRing.color}", "shadow": "{focusRing.shadow}" } + "hoverBackground": "transparent", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } }, - "outlined": { "color": "{transparent}", "borderColor": "{transparent}" }, - "simple": { "color": "{transparent}" } + "outlined": { + "color": "transparent", + "borderColor": "transparent" + }, + "simple": { + "color": "transparent" + } + }, + "simple": { + "content": { + "padding": "{dimension.space.none}" + } }, - "simple": { "content": { "padding": "0rem" } }, "warn": { - "background": "{warn.50}", - "borderColor": "{warn.500}", - "color": "{text.color}", + "background": "{color.bg.status.warning.weak.default}", + "borderColor": "{color.border.status.warning.default}", + "color": "{color.fg.default}", "shadow": "none", - "outlined": { "color": "{text.color}", "borderColor": "{warn.500}" }, + "outlined": { + "color": "{color.fg.default}", + "borderColor": "{color.border.status.warning.default}" + }, "closeButton": { - "hoverBackground": "{warn.200}", - "focusRing": { "color": "{focusRing.color}", "shadow": "{focusRing.shadow}" } + "hoverBackground": "{color.bg.status.warning.weak.active}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } }, - "simple": { "color": "{text.color}" } + "simple": { + "color": "{color.fg.default}" + } }, "error": { - "background": "{error.50}", - "borderColor": "{error.500}", - "color": "{text.color}", + "background": "{color.bg.status.danger.weak.default}", + "borderColor": "{color.border.status.danger.default}", + "color": "{color.fg.default}", "shadow": "none", - "outlined": { "color": "{text.color}", "borderColor": "{error.500}" }, + "outlined": { + "color": "{color.fg.default}", + "borderColor": "{color.border.status.danger.default}" + }, "closeButton": { - "hoverBackground": "{error.200}", - "focusRing": { "color": "{focusRing.color}", "shadow": "{focusRing.shadow}" } + "hoverBackground": "{color.bg.status.danger.weak.active}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } }, - "simple": { "color": "{text.color}" } + "simple": { + "color": "{color.fg.default}" + } }, "secondary": { - "borderColor": "{transparent}", + "borderColor": "transparent", "shadow": "none", "closeButton": { - "hoverBackground": "{transparent}", - "focusRing": { "color": "{focusRing.color}", "shadow": "{focusRing.shadow}" } + "hoverBackground": "transparent", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } + }, + "simple": { + "color": "transparent" + }, + "outlined": { + "color": "transparent", + "borderColor": "transparent" + }, + "background": "{color.bg.neutral.weak.default}", + "color": "{color.fg.default}" + }, + "contrast": { + "borderColor": "transparent", + "shadow": "none", + "closeButton": { + "hoverBackground": "transparent", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } + }, + "simple": { + "color": "transparent" }, - "simple": { "color": "{transparent}" }, - "outlined": { "color": "{transparent}", "borderColor": "{transparent}" } + "outlined": { + "color": "transparent", + "borderColor": "transparent" + }, + "background": "{color.bg.neutral.strong.default}", + "color": "{color.fg.on.fill.default}" }, + "info": { + "background": "{color.bg.status.info.weak.default}", + "borderColor": "{color.border.status.info.default}", + "color": "{color.fg.default}", + "shadow": "none", + "closeButton": { + "hoverBackground": "{color.bg.status.info.weak.active}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } + }, + "outlined": { + "color": "{color.fg.default}", + "borderColor": "{color.border.status.info.default}" + }, + "simple": { + "color": "{color.fg.default}" + } + } + }, + "dark": { "contrast": { - "borderColor": "{transparent}", + "background": "{color.bg.surface.canvas.default}", + "borderColor": "transparent", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "transparent" + }, + "color": "{color.fg.default}", + "outlined": { + "borderColor": "transparent", + "color": "transparent" + }, "shadow": "none", + "simple": { + "color": "transparent" + } + }, + "error": { + "background": "{color.bg.status.danger.weak.default}", + "borderColor": "{color.border.status.danger.default}", "closeButton": { - "hoverBackground": "{transparent}", - "focusRing": { "color": "{focusRing.color}", "shadow": "{focusRing.shadow}" } + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "{color.bg.status.danger.weak.active}" + }, + "color": "{color.fg.inverse.default}", + "outlined": { + "borderColor": "{color.border.status.danger.default}", + "color": "{color.fg.inverse.default}" }, - "simple": { "color": "{transparent}" }, - "outlined": { "color": "{transparent}", "borderColor": "{transparent}" } + "shadow": "none", + "simple": { + "color": "{color.fg.inverse.default}" + } }, "info": { - "background": "{info.50}", - "borderColor": "{info.500}", - "color": "{text.color}", + "background": "{color.bg.status.info.weak.default}", + "borderColor": "{color.border.status.info.default}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "{color.bg.status.info.weak.active}" + }, + "color": "{color.fg.inverse.default}", + "outlined": { + "borderColor": "{color.border.status.info.default}", + "color": "{color.fg.inverse.default}" + }, + "shadow": "none", + "simple": { + "color": "{color.fg.inverse.default}" + } + }, + "secondary": { + "background": "{color.bg.neutral.strong.default}", + "borderColor": "transparent", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "transparent" + }, + "color": "{color.fg.inverse.default}", + "outlined": { + "borderColor": "transparent", + "color": "transparent" + }, + "shadow": "none", + "simple": { + "color": "transparent" + } + }, + "success": { + "background": "{color.bg.status.success.weak.default}", + "borderColor": "{color.border.brand.default}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "{color.bg.status.success.weak.active}" + }, + "color": "{color.fg.inverse.default}", + "outlined": { + "borderColor": "{color.border.brand.default}", + "color": "{color.fg.inverse.default}" + }, + "shadow": "none", + "simple": { + "color": "{color.fg.inverse.default}" + } + }, + "warn": { + "background": "{color.bg.status.warning.weak.default}", + "borderColor": "{color.border.status.warning.default}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "{color.bg.status.warning.weak.active}" + }, + "color": "{color.fg.inverse.default}", + "outlined": { + "borderColor": "{color.border.status.warning.default}", + "color": "{color.fg.inverse.default}" + }, "shadow": "none", + "simple": { + "color": "{color.fg.inverse.default}" + } + }, + "outlined": { + "root": { + "borderWidth": "{dimension.borderWidth.none}" + }, "closeButton": { - "hoverBackground": "{info.200}", - "focusRing": { "color": "{focusRing.color}", "shadow": "{focusRing.shadow}" } + "hoverBackground": "transparent", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } }, - "outlined": { "color": "{text.color}", "borderColor": "{info.500}" }, - "simple": { "color": "{text.color}" } + "outlined": { + "color": "transparent", + "borderColor": "transparent" + }, + "simple": { + "color": "transparent" + } + }, + "simple": { + "content": { + "padding": "{dimension.space.none}" + } } } }, "root": { - "borderRadius": "{content.borderRadius}", - "borderWidth": "{feedback.width.100}", - "transitionDuration": "{feedback.transitionDuration}" + "borderRadius": "{dimension.borderRadius.400}", + "borderWidth": "{dimension.borderWidth.100}", + "transitionDuration": "{effects.transition.duration.200}" }, "content": { - "padding": "{feedback.padding.200}", - "gap": "{feedback.gap.400}", - "sm": { "padding": "{feedback.padding.200}" }, - "lg": { "padding": "{feedback.padding.200}" } + "padding": "{dimension.space.400}", + "gap": "{dimension.space.400}", + "sm": { + "padding": "{dimension.space.400}" + }, + "lg": { + "padding": "{dimension.space.400}" + } }, "text": { "fontSize": "{fonts.fontSize.300}", "fontWeight": "{fonts.fontWeight.bold}", - "sm": { "fontSize": "{fonts.fontSize.300}" }, - "lg": { "fontSize": "{fonts.fontSize.300}" } + "sm": { + "fontSize": "{fonts.fontSize.300}" + }, + "lg": { + "fontSize": "{fonts.fontSize.300}" + } }, "icon": { - "size": "{feedback.icon.size.500}", - "sm": { "size": "{feedback.icon.size.500}" }, - "lg": { "size": "{feedback.icon.size.500}" } + "size": "{dimension.size.1000}", + "sm": { + "size": "{dimension.size.1000}" + }, + "lg": { + "size": "{dimension.size.1000}" + } }, "closeButton": { - "width": "{controls.iconOnly.600}", - "height": "{controls.iconOnly.600}", - "borderRadius": "{controls.borderRadius.100}", - "focusRing": { "width": "{focusRing.width}", "style": "{focusRing.style}", "offset": "{focusRing.offset}" } + "width": "{dimension.size.900}", + "height": "{dimension.size.900}", + "borderRadius": "{dimension.borderRadius.400}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "offset": "{dimension.focusRing.offset}" + } }, "closeIcon": { - "size": "{feedback.icon.size.200}", - "sm": { "size": "{feedback.icon.size.200}" }, - "lg": { "size": "{feedback.icon.size.200}" } + "size": "{dimension.size.450}", + "sm": { + "size": "{dimension.size.450}" + }, + "lg": { + "size": "{dimension.size.450}" + } + }, + "outlined": { + "root": { + "borderWidth": "{dimension.borderWidth.100}" + } + }, + "simple": { + "content": { + "padding": "{dimension.space.none}" + } } }, "metergroup": { - "extend": { "extLabel": { "color": "{text.mutedColor}" } }, - "root": { "borderRadius": "{content.borderRadius}", "gap": "{feedback.gap.300}" }, - "meters": { "size": "{feedback.height.100}", "background": "{content.borderColor}" }, - "label": { "gap": "{feedback.gap.100}" }, - "labelMarker": { "size": "{feedback.icon.size.100}" }, - "labelIcon": { "size": "{feedback.icon.size.200}" }, - "labelList": { "verticalGap": "{feedback.gap.200}", "horizontalGap": "{feedback.gap.300}" } + "extend": { + "extLabel": { + "color": "{color.fg.muted}" + } + }, + "root": { + "borderRadius": "{dimension.borderRadius.400}", + "gap": "{dimension.space.400}" + }, + "meters": { + "size": "{dimension.size.200}", + "background": "{color.bg.neutral.medium.default}" + }, + "label": { + "gap": "{dimension.space.100}" + }, + "labelMarker": { + "size": "{dimension.size.200}" + }, + "labelIcon": { + "size": "{dimension.size.450}" + }, + "labelList": { + "verticalGap": "{dimension.space.200}", + "horizontalGap": "{dimension.space.400}" + } }, "multiselect": { - "colorScheme": { - "option": { - "focusBackground": "{list.option.focusBackground}", - "selectedBackground": "{list.option.selectedBackground}", - "selectedFocusBackground": "{list.option.selectedFocusBackground}", - "color": "{list.option.color}", - "focusColor": "{list.option.focusColor}", - "selectedColor": "{list.option.selectedColor}", - "selectedFocusColor": "{list.option.selectedFocusColor}" - }, - "overlay": { - "background": "{overlay.select.background}", - "borderColor": "{overlay.select.borderColor}", - "color": "{overlay.select.color}" - }, - "root": { - "background": "{form.background}", - "disabledBackground": "{form.disabledBackground}", - "filledBackground": "{form.filledBackground}", - "filledHoverBackground": "{form.filledHoverBackground}", - "filledFocusBackground": "{form.filledFocusBackground}", - "borderColor": "{form.borderColor}", - "hoverBorderColor": "{form.hoverBorderSecondaryColor}", - "focusBorderColor": "{form.focusBorderSecondaryColor}", - "invalidBorderColor": "{form.invalidBorderColor}", - "color": "{form.color}", - "disabledColor": "{form.disabledColor}", - "placeholderColor": "{form.placeholderColor}", - "invalidPlaceholderColor": "{form.invalidPlaceholderColor}", - "focusRing": { "color": "{form.focusRing.color}" } - }, - "dropdown": { "color": "{form.floatLabelColor}" }, - "optionGroup": { "background": "{list.optionGroup.background}", "color": "{list.optionGroup.color}" }, - "clearIcon": { "color": "{form.floatLabelColor}" } - }, "extend": { - "paddingX": "0.3571rem", - "paddingY": "0.3571rem", - "borderWidth": "{form.borderWidth}", - "iconSize": "{form.icon.300}", - "width": "{form.width}", - "readonlyBackground": "{form.readonlyBackground}" + "paddingX": "{dimension.space.150}", + "paddingY": "{dimension.space.150}", + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": "{dimension.size.450}", + "width": "{dimension.size.1700}", + "readonlyBackground": "{color.bg.neutral.weak.default}" }, "root": { - "shadow": "0", - "paddingX": "{form.paddingX}", - "paddingY": "{form.paddingY}", - "borderRadius": "{form.borderRadius.200}", - "transitionDuration": "{form.transitionDuration}", + "shadow": "{effects.elevation.none}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}", + "borderRadius": "{dimension.borderRadius.400}", + "transitionDuration": "{effects.transition.duration.200}", "sm": { "fontSize": "{fonts.fontSize.300}", - "paddingX": "{form.padding.200}", - "paddingY": "{form.padding.200}" + "paddingX": "{dimension.space.200}", + "paddingY": "{dimension.space.200}" }, "lg": { "fontSize": "{fonts.fontSize.300}", - "paddingX": "{form.padding.400}", - "paddingY": "{form.padding.400}" + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}" }, "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "offset": "{form.focusRing.offset}", - "shadow": "0" - } + "width": "{dimension.focusRing.width}", + "style": "none", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}", + "color": "{color.border.focus}" + }, + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.strong}", + "color": "{color.fg.default}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "disabledColor": "{color.fg.muted}", + "filledBackground": "{color.bg.surface.default.default}", + "filledFocusBackground": "{color.bg.surface.default.default}", + "filledHoverBackground": "{color.bg.surface.default.default}", + "focusBorderColor": "{color.border.brand.strong}", + "hoverBorderColor": "{color.border.brand.strong}", + "invalidBorderColor": "{color.border.status.danger.subtle}", + "invalidPlaceholderColor": "{color.fg.status.danger.hover}", + "placeholderColor": "{color.fg.muted}" + }, + "dropdown": { + "width": "{dimension.size.1700}", + "color": "{color.fg.active}" + }, + "overlay": { + "borderRadius": "{dimension.borderRadius.400}", + "shadow": "{effects.elevation.400}", + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "color": "{color.fg.default}" }, - "dropdown": { "width": "{form.width.300}" }, - "overlay": { "borderRadius": "{overlay.select.borderRadius}", "shadow": "{overlay.select.shadow}" }, "list": { - "padding": "{list.padding}", - "header": { "padding": "{list.header.padding}" }, - "gap": "{list.gap.100}" + "padding": "{dimension.space.100}", + "header": { + "padding": "{dimension.space.400} {dimension.space.400} {dimension.space.none} {dimension.space.400}" + }, + "gap": "{dimension.space.100}" + }, + "chip": { + "borderRadius": "{dimension.borderRadius.200}" }, - "chip": { "borderRadius": "{form.borderRadius.100}" }, "option": { - "padding": "{list.option.padding}", - "borderRadius": "{list.option.borderRadius}", - "gap": "{list.gap.200}" + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.200}", + "gap": "{dimension.space.200}", + "color": "{color.fg.default}", + "focusBackground": "{color.bg.neutral.weak.default}", + "focusColor": "{color.fg.default}", + "selectedBackground": "{color.bg.neutral.strong.selected}", + "selectedColor": "{color.fg.on.fill.default}", + "selectedFocusBackground": "{color.bg.neutral.strong.active}", + "selectedFocusColor": "{color.fg.on.fill.active}" + }, + "optionGroup": { + "fontWeight": "{fonts.fontWeight.demibold}", + "padding": "{dimension.space.200} {dimension.space.400}", + "background": "{color.bg.surface.raised.default}", + "color": "{color.fg.muted}" }, - "optionGroup": { "fontWeight": "{fonts.fontWeight.regular}", "padding": "{list.optionGroup.padding}" }, - "emptyMessage": { "padding": "{list.option.padding}" } + "emptyMessage": { + "padding": "{dimension.space.200} {dimension.space.400}" + }, + "clearIcon": { + "color": "{color.fg.active}" + } }, "paginator": { "root": { - "padding": "0 {data.padding.200}", - "gap": "{data.gap.200}", - "borderRadius": "{content.borderRadius}", - "background": "{transparent}", - "color": "{content.color}", - "transitionDuration": "{data.transitionDuration}" - }, - "currentPageReport": { "color": "{text.mutedColor}" }, + "padding": "{dimension.space.none} {dimension.space.200}", + "gap": "{dimension.space.200}", + "borderRadius": "{dimension.borderRadius.400}", + "background": "transparent", + "color": "{color.fg.default}", + "transitionDuration": "{effects.transition.duration.200}" + }, + "currentPageReport": { + "color": "{color.fg.muted}" + }, "navButton": { - "background": "{transparent}", - "hoverBackground": "{content.hoverBackground}", - "selectedBackground": "{highlight.background}", - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "selectedColor": "{text.extend.colorInverted}", - "width": "{data.icon.size.700}", - "height": "{data.icon.size.700}", - "borderRadius": "{content.borderRadius}", + "background": "transparent", + "hoverBackground": "{color.bg.neutral.weak.default}", + "selectedBackground": "{color.bg.neutral.strong.selected}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "selectedColor": "{color.fg.on.fill.default}", + "width": "{dimension.size.1100}", + "height": "{dimension.size.1100}", + "borderRadius": "{dimension.borderRadius.400}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "focus": "{focusRing.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "focus": "{effects.elevation.200}", + "shadow": "{effects.elevation.none}" } }, - "jumpToPageInput": { "maxWidth": "{data.width.400}" } + "jumpToPageInput": { + "maxWidth": "{dimension.size.1500}" + } }, "panelmenu": { "extend": { - "extPanel": { "gap": "{content.gap.100}" }, - "iconSize": "{navigation.submenuIcon.size}", + "iconSize": "{dimension.size.600}", + "extPanel": { + "gap": "{dimension.space.100}" + }, "extItem": { - "activeBackground": "{navigation.item.activeBackground}", - "activeColor": "{navigation.item.activeColor}", - "caption": { "color": "{text.mutedColor}", "gap": "{content.gap.100}" } + "activeBackground": "{color.bg.neutral.strong.default}", + "activeColor": "{color.fg.inverse.active}", + "caption": { + "color": "{color.fg.muted}", + "gap": "{dimension.space.100}" + } } }, - "root": { "gap": "{content.gap.100}", "transitionDuration": "{form.transitionDuration}" }, + "root": { + "gap": "{dimension.space.100}", + "transitionDuration": "{effects.transition.duration.200}" + }, "panel": { - "background": "{transparent}", - "borderColor": "{transparent}", - "borderWidth": "{navigation.width.100}", - "color": "{content.color}", - "padding": "{content.padding.100}", - "borderRadius": "{content.borderRadius}", + "background": "transparent", + "borderColor": "transparent", + "borderWidth": "{dimension.borderWidth.100}", + "color": "{color.fg.default}", + "padding": "{dimension.space.100}", + "borderRadius": "{dimension.borderRadius.400}", "first": { - "borderWidth": "{navigation.width.100} {navigation.width.100} 0 {navigation.width.100}", - "topBorderRadius": "{content.borderRadius}" + "borderWidth": "{dimension.borderWidth.100} {dimension.borderWidth.100} {dimension.borderWidth.none} {dimension.borderWidth.100}", + "topBorderRadius": "{dimension.borderRadius.400}" }, "last": { - "borderWidth": "0 {navigation.width.100} {navigation.width.100} {navigation.width.100}", - "topBorderRadius": "{content.borderRadius}" + "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.100} {dimension.borderWidth.100}", + "topBorderRadius": "{dimension.borderRadius.400}", + "bottomBorderRadius": "{dimension.borderRadius.400}" } }, "item": { - "focusBackground": "{navigation.item.focusBackground}", - "color": "{navigation.item.color}", - "focusColor": "{navigation.item.focusColor}", - "gap": "{navigation.item.gap}", - "padding": "{navigation.item.padding}", - "borderRadius": "{navigation.item.borderRadius}", - "icon": { "color": "{navigation.item.icon.color}", "focusColor": "{navigation.item.icon.focusColor}" } - }, - "submenu": { "indent": "{navigation.padding.400}" }, - "separator": { "borderColor": "{content.borderColor}" }, - "submenuIcon": { "color": "{navigation.submenuIcon.color}", "focusColor": "{navigation.submenuIcon.focusColor}" } + "focusBackground": "{color.bg.neutral.weak.default}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "gap": "{dimension.space.200}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.200}", + "icon": { + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}" + } + }, + "submenu": { + "indent": "{dimension.space.700}" + }, + "separator": { + "borderColor": "{color.border.neutral.default}" + }, + "submenuIcon": { + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}" + } }, "password": { - "extend": { "borderWidth": "{form.borderWidth}" }, + "extend": { + "borderWidth": "{dimension.borderWidth.100}" + }, "colorScheme": { "light": { "strength": { - "weakBackground": "{error.500}", - "mediumBackground": "{warn.500}", - "strongBackground": "{success.600}" + "weakBackground": "{color.bg.status.danger.strong.active}", + "mediumBackground": "{color.bg.status.warning.strong.active}", + "strongBackground": "{color.bg.brand.strong.hover}" }, - "icon": { "color": "{form.placeholderColor}" } + "icon": { + "color": "{color.fg.muted}" + } + }, + "dark": { + "strength": { + "mediumBackground": "{color.bg.status.warning.strong.active}", + "strongBackground": "{color.bg.status.success.strong.hover}", + "weakBackground": "{color.bg.status.danger.strong.active}" + }, + "icon": { + "color": "{color.fg.inverse.muted}" + } } }, "meter": { - "background": "{content.borderColor}", - "borderRadius": "{content.borderRadius}", - "height": "{feedback.height.100}" + "background": "{color.bg.neutral.medium.default}", + "borderRadius": "{dimension.borderRadius.400}", + "height": "{dimension.size.200}" }, "overlay": { - "background": "{overlay.popover.background}", - "borderColor": "{overlay.popover.borderColor}", - "borderRadius": "{overlay.popover.borderRadius}", - "color": "{overlay.popover.color}", - "padding": "{overlay.popover.padding.100}", - "shadow": "{overlay.popover.shadow}" + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.strong}", + "borderRadius": "{dimension.borderRadius.200}", + "color": "{color.fg.default}", + "padding": "{dimension.space.400}", + "shadow": "{effects.elevation.400}" + }, + "content": { + "gap": "{dimension.space.200}" }, - "content": { "gap": "{content.gap.200}" } + "icon": { + "color": "{color.fg.default}" + } }, "popover": { "extend": { - "borderWidth": "{overlay.borderWidth}", - "arrow": { "width": "{overlay.popover.width.200}", "height": "{overlay.popover.width.100}" } + "borderWidth": "{dimension.borderWidth.100}", + "arrow": { + "width": "{dimension.size.350}", + "height": "{dimension.size.200}" + } }, "root": { - "background": "{overlay.popover.background}", - "borderColor": "{overlay.popover.borderColor}", - "color": "{overlay.popover.color}", - "borderRadius": "{overlay.popover.borderRadius}", - "shadow": "{overlay.popover.shadow}", - "gutter": "{overlay.gap.100}", - "arrowOffset": "{overlay.popover.padding.200}" + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.strong}", + "color": "{color.fg.default}", + "borderRadius": "{dimension.borderRadius.200}", + "shadow": "{effects.elevation.400}", + "gutter": "{dimension.space.100}", + "arrowOffset": "{dimension.space.600}" }, - "content": { "padding": "{overlay.popover.padding.100}" } + "content": { + "padding": "{dimension.space.400}" + } }, "progressbar": { "label": { - "color": "{text.extend.colorPrimaryStatic}", + "color": "{color.fg.default}", "fontSize": "{fonts.fontSize.100}", "fontWeight": "{fonts.fontWeight.regular}" }, "root": { - "background": "{content.borderColor}", - "borderRadius": "{content.borderRadius}", - "height": "{feedback.height.300}" + "background": "{color.bg.surface.canvas.hover}", + "borderRadius": "{dimension.borderRadius.400}", + "height": "{dimension.size.450}" }, - "value": { "background": "{primary.color}" } + "value": { + "background": "{color.bg.brand.strong.default}" + } }, "progressspinner": { "extend": { - "small": "{feedback.width.500}", - "medium": "{feedback.width.700}", - "large": "{feedback.width.800}", - "xlarge": "{feedback.width.900}" + "small": "{dimension.size.450}", + "medium": "{dimension.size.900}", + "large": "{dimension.size.1200}", + "xlarge": "{dimension.size.1300}" }, "colorScheme": { "light": { "root": { - "colorOne": "{success.500}", - "colorTwo": "{info.500}", - "colorThree": "{error.500}", - "colorFour": "{warn.500}" + "colorOne": "{color.fg.brand.default}", + "colorTwo": "{color.fg.status.info.default}", + "colorThree": "{color.fg.status.danger.default}", + "colorFour": "{color.fg.status.warning.default}" + } + }, + "dark": { + "root": { + "colorFour": "{color.fg.status.warning.muted}", + "colorOne": "{color.fg.brand.muted}", + "colorThree": "{color.fg.status.danger.muted}", + "colorTwo": "{color.fg.status.info.muted}" } } }, - "root": { "borderWidth": "{feedback.width.200}" } + "root": { + "borderWidth": "{dimension.borderWidth.300}" + } }, "radiobutton": { "root": { - "width": "{form.size.400}", - "height": "{form.size.400}", - "background": "{form.background}", - "checkedBackground": "{surface.900}", - "checkedHoverBackground": "{surface.800}", - "disabledBackground": "{form.disabledBackground}", - "filledBackground": "{form.filledBackground}", - "borderColor": "{form.borderColor}", - "hoverBorderColor": "{form.hoverBorderPrimaryColor}", - "focusBorderColor": "{form.borderColor}", - "checkedBorderColor": "{surface.900}", - "checkedHoverBorderColor": "{form.hoverBorderPrimaryColor}", - "checkedFocusBorderColor": "{form.focusBorderPrimaryColor}", - "checkedDisabledBorderColor": "{form.borderColor}", - "invalidBorderColor": "{form.invalidBorderColor}", - "shadow": "0", - "transitionDuration": "{form.transitionDuration}" + "width": "{dimension.size.700}", + "height": "{dimension.size.700}", + "background": "{color.bg.surface.default.default}", + "checkedBackground": "{color.bg.neutral.strong.default}", + "checkedHoverBackground": "{color.bg.neutral.strong.hover}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "filledBackground": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.strong}", + "hoverBorderColor": "{color.border.neutral.bold.default}", + "focusBorderColor": "{color.border.neutral.strong}", + "checkedBorderColor": "{color.border.neutral.bold.default}", + "checkedHoverBorderColor": "{color.border.neutral.bold.default}", + "checkedFocusBorderColor": "{color.border.neutral.bold.default}", + "checkedDisabledBorderColor": "{color.border.neutral.strong}", + "invalidBorderColor": "{color.border.status.danger.subtle}", + "shadow": "{effects.elevation.none}", + "transitionDuration": "{effects.transition.duration.200}", + "focusRing": { + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}", + "style": "none", + "width": "{dimension.focusRing.width}" + }, + "lg": { + "height": "{dimension.size.600}", + "width": "{dimension.size.600}" + }, + "sm": { + "height": "{dimension.size.200}", + "width": "{dimension.size.200}" + } }, "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" - }, - "sm": { "width": "{form.size.300}", "height": "{form.size.300}" }, - "lg": { "width": "{form.size.350}", "height": "{form.size.350}" }, + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + }, + "sm": { + "width": "{dimension.size.450}", + "height": "{dimension.size.450}" + }, + "lg": { + "width": "{dimension.size.600}", + "height": "{dimension.size.600}" + }, "icon": { - "size": "{form.icon.200}", - "checkedColor": "{text.extend.colorInverted}", - "checkedHoverColor": "{text.extend.colorInverted}", - "disabledColor": "{text.mutedColor}", - "sm": { "size": "{form.icon.100}" }, - "lg": { "size": "{form.icon.300}" } + "size": "{dimension.size.350}", + "checkedColor": "{color.fg.on.fill.default}", + "checkedHoverColor": "{color.fg.on.fill.hover}", + "disabledColor": "{color.fg.muted}", + "sm": { + "size": "{dimension.size.200}" + }, + "lg": { + "size": "{dimension.size.450}" + } } }, "rating": { - "root": { "gap": "{form.gap.200}", "transitionDuration": "{form.transitionDuration}" }, + "root": { + "gap": "{dimension.space.200}", + "transitionDuration": "{effects.transition.duration.200}", + "focusRing": { + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}", + "style": "none", + "width": "{dimension.focusRing.width}" + } + }, "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" }, "icon": { - "size": "{form.icon.500}", - "color": "{surface.500}", - "hoverColor": "{warn.500}", - "activeColor": "{warn.500}" + "size": "{dimension.size.700}", + "color": "{color.fg.muted}", + "hoverColor": "{color.fg.status.warning.default}", + "activeColor": "{color.fg.status.warning.default}" + } + }, + "ripple": { + "colorScheme": { + "light": { + "root": { + "background": "{color.bg.neutral.medium.default}" + } + }, + "dark": { + "root": { + "background": "{color.bg.neutral.medium.default}" + } + } } }, - "ripple": { "colorScheme": { "light": { "root": { "background": "rgba(255, 255, 255, 0.0100)" } } } }, "scrollpanel": { - "colorScheme": { "light": { "bar": { "background": "{surface.300}" } } }, - "root": { "transitionDuration": "{media.transitionDuration}" }, + "colorScheme": { + "light": { + "bar": { + "background": "{color.bg.neutral.weak.active}" + } + }, + "dark": { + "bar": { + "background": "{color.bg.neutral.strong.active}" + } + } + }, + "root": { + "transitionDuration": "{effects.transition.duration.200}" + }, "bar": { - "size": "{media.size.200}", - "borderRadius": "{media.borderRadius.100}", + "size": "{dimension.size.200}", + "borderRadius": "{dimension.borderRadius.200}", "focusRing": { - "width": "0rem", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.size.none}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" } } }, "select": { "extend": { - "extOption": { "background": "{list.option.background}", "gap": "{list.gap.200}" }, - "extOptionGroup": { "gap": "{list.gap.200}" }, - "readonlyBackground": "{form.readonlyBackground}", - "borderWidth": "{form.borderWidth}", - "iconSize": "{form.icon.300}" + "extOption": { + "background": "{color.bg.surface.raised.default}", + "gap": "{dimension.space.200}" + }, + "extOptionGroup": { + "gap": "{dimension.space.200}" + }, + "readonlyBackground": "{color.bg.neutral.weak.default}", + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": "{dimension.size.450}" }, "root": { - "background": "{form.background}", - "disabledBackground": "{form.disabledBackground}", - "filledBackground": "{form.filledBackground}", - "filledHoverBackground": "{form.filledHoverBackground}", - "filledFocusBackground": "{form.filledFocusBackground}", - "borderColor": "{form.borderColor}", - "hoverBorderColor": "{form.hoverBorderSecondaryColor}", - "focusBorderColor": "{form.focusBorderSecondaryColor}", - "invalidBorderColor": "{form.invalidBorderColor}", - "color": "{text.color}", - "disabledColor": "{form.disabledColor}", - "placeholderColor": "{form.placeholderColor}", - "invalidPlaceholderColor": "{form.invalidPlaceholderColor}", - "shadow": "0", - "paddingX": "{form.paddingX}", - "paddingY": "{form.paddingY}", - "borderRadius": "{form.borderRadius.200}", - "transitionDuration": "{form.transitionDuration}", - "sm": { "fontSize": "{form.fontSize}", "paddingX": "{form.paddingX}", "paddingY": "{form.paddingY}" }, - "lg": { "fontSize": "{form.fontSize}", "paddingX": "{form.paddingX}", "paddingY": "{form.paddingY}" }, + "background": "{color.bg.surface.default.default}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "filledBackground": "{color.bg.surface.default.default}", + "filledHoverBackground": "{color.bg.surface.default.default}", + "filledFocusBackground": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.strong}", + "hoverBorderColor": "{color.border.brand.strong}", + "focusBorderColor": "{color.border.brand.strong}", + "invalidBorderColor": "{color.border.status.danger.subtle}", + "color": "{color.fg.default}", + "disabledColor": "{color.fg.muted}", + "placeholderColor": "{color.fg.muted}", + "invalidPlaceholderColor": "{color.fg.status.danger.hover}", + "shadow": "{effects.elevation.none}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}", + "borderRadius": "{dimension.borderRadius.400}", + "transitionDuration": "{effects.transition.duration.200}", + "sm": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}" + }, + "lg": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}" + }, "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "0" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}" } }, - "dropdown": { "width": "{form.width.300}", "color": "{form.placeholderColor}" }, + "dropdown": { + "width": "{dimension.size.1700}", + "color": "{color.fg.active}" + }, "overlay": { - "background": "{overlay.select.background}", - "borderColor": "{overlay.select.borderColor}", - "borderRadius": "{overlay.select.borderRadius}", - "color": "{overlay.select.color}", - "shadow": "{overlay.select.shadow}" + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "borderRadius": "{dimension.borderRadius.400}", + "color": "{color.fg.default}", + "shadow": "{effects.elevation.400}" }, "list": { - "padding": "{list.padding}", - "gap": "{list.gap.100}", - "header": { "padding": "{list.header.padding}" } + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}", + "header": { + "padding": "{dimension.space.400} {dimension.space.400} {dimension.space.none} {dimension.space.400}" + } }, "option": { - "focusBackground": "{list.option.focusBackground}", - "selectedBackground": "{list.option.selectedBackground}", - "selectedFocusBackground": "{list.option.selectedFocusBackground}", - "color": "{list.option.color}", - "focusColor": "{list.option.focusColor}", - "selectedColor": "{list.option.selectedColor}", - "selectedFocusColor": "{list.option.selectedFocusColor}", - "padding": "{list.option.padding}", - "borderRadius": "{list.option.borderRadius}" + "focusBackground": "{color.bg.neutral.weak.default}", + "selectedBackground": "{color.bg.neutral.strong.selected}", + "selectedFocusBackground": "{color.bg.neutral.strong.active}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "selectedColor": "{color.fg.on.fill.default}", + "selectedFocusColor": "{color.fg.on.fill.active}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.200}" }, "optionGroup": { - "background": "{list.optionGroup.background}", - "color": "{list.optionGroup.color}", - "fontWeight": "{fonts.fontWeight.regular}", - "padding": "{list.option.padding}" + "background": "{color.bg.surface.raised.default}", + "color": "{color.fg.muted}", + "fontWeight": "{fonts.fontWeight.demibold}", + "padding": "{dimension.space.200} {dimension.space.400}" + }, + "clearIcon": { + "color": "{color.fg.active}" }, - "clearIcon": { "color": "{form.placeholderColor}" }, "checkmark": { - "color": "{list.option.color}", - "gutterStart": "-{form.padding.200}", - "gutterEnd": "{form.padding.200}" + "color": "{color.fg.default}", + "gutterStart": "{dimension.space.negative.200}", + "gutterEnd": "{dimension.space.200}" }, - "emptyMessage": { "padding": "{list.option.padding}" } + "emptyMessage": { + "padding": "{dimension.space.200} {dimension.space.400}" + } }, "selectbutton": { "extend": { - "gap": "{form.gap.100}", - "paddingX": "{controls.padding.100}", - "paddingY": "{controls.padding.100}", - "checkedBackground": "{form.background}", + "gap": "{dimension.space.100}", + "paddingX": "{dimension.space.100}", + "paddingY": "{dimension.space.100}", "iconSize": { - "sm": "{controls.iconOnly.200}", - "md": "{controls.iconOnly.300}", - "lg": "{controls.iconOnly.400}", - "xlg": "{controls.iconOnly.500}" + "sm": "{dimension.size.450}", + "md": "{dimension.size.600}", + "lg": "{dimension.size.700}", + "xlg": "{dimension.size.800}" }, - "checkedBorderColor": "{form.background}", - "checkedColor": "{form.color}", - "ext": { "borderRadius": "{borderRadius.200}" } + "checkedBackground": "{color.bg.surface.raised.default}", + "checkedBorderColor": "{color.border.neutral.inverse}", + "checkedColor": "{color.fg.active}", + "ext": { + "borderRadius": "{dimension.borderRadius.200}" + } }, "colorScheme": { "light": { - "root": { "invalidBorderColor": "{form.invalidBorderColor}" }, - "extend": { "background": "{surface.200}" } + "root": { + "invalidBorderColor": "{color.border.status.danger.subtle}" + }, + "extend": { + "background": "{color.bg.neutral.medium.default}" + } + }, + "dark": { + "root": { + "invalidBorderColor": "{color.border.status.danger.strong}" + }, + "extend": { + "background": "{color.bg.neutral.strong.hover}" + } } }, - "root": { "borderRadius": "{form.borderRadius.200}" } + "root": { + "borderRadius": "{dimension.borderRadius.350}" + } }, "skeleton": { - "extend": { "minWidth": "{feedback.width.700}", "height": "{feedback.height.650}" }, - "colorScheme": { "light": { "root": { "background": "{surface.200}", "animationBackground": "{surface.100}" } } }, - "root": { "borderRadius": "{content.borderRadius}" } + "extend": { + "minWidth": "{dimension.size.900}", + "height": "{dimension.size.900}" + }, + "colorScheme": { + "light": { + "root": { + "background": "{color.bg.surface.canvas.hover}", + "animationBackground": "{color.bg.surface.canvas.default}" + } + }, + "dark": { + "root": { + "background": "{color.bg.surface.raised.default}", + "animationBackground": "{color.bg.surface.raised.selected}" + } + } + }, + "root": { + "borderRadius": "{dimension.borderRadius.400}" + } }, "slider": { - "colorScheme": { "handle": { "content": { "background": "{surface.0}" } } }, - "root": { "transitionDuration": "{form.transitionDuration}" }, + "colorScheme": { + "light": { + "handle": { + "content": { + "background": "{color.bg.surface.default.default}" + } + } + }, + "dark": { + "handle": { + "content": { + "background": "{color.bg.surface.canvas.default}" + } + } + } + }, + "root": { + "transitionDuration": "{effects.transition.duration.200}" + }, "track": { - "background": "{content.borderColor}", - "borderRadius": "{content.borderRadius}", - "size": "{form.size.150}" + "background": "{color.bg.neutral.medium.default}", + "borderRadius": "{dimension.borderRadius.350}", + "size": "{dimension.size.100}" + }, + "range": { + "background": "{color.bg.neutral.strong.default}" }, - "range": { "background": "{surface.900}" }, "handle": { - "width": "{form.size.350}", - "height": "{form.size.350}", - "borderRadius": "{form.borderRadius.300}", - "background": "{surface.900}", - "hoverBackground": "{surface.900}", + "width": "{dimension.size.600}", + "height": "{dimension.size.600}", + "borderRadius": "{dimension.borderRadius.max}", + "background": "{color.bg.neutral.strong.default}", + "hoverBackground": "{color.bg.neutral.strong.default}", "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" }, "content": { - "borderRadius": "{form.borderRadius.300}", - "hoverBackground": "{surface.900}", - "width": "{form.size.250}", - "height": "{form.size.250}", + "borderRadius": "{dimension.borderRadius.max}", + "hoverBackground": "{color.bg.neutral.strong.default}", + "width": "{dimension.size.350}", + "height": "{dimension.size.350}", "shadow": "none" + }, + "extend": { + "hoverRing": "0 0 0 {dimension.focusRing.width} rgba(206, 207, 210, 0.5000)" } } }, "splitter": { - "colorScheme": { "light": { "handle": { "background": "{surface.900}" } } }, - "gutter": { "background": "{surface.100}" }, + "colorScheme": { + "light": { + "handle": { + "background": "{color.bg.neutral.strong.default}" + } + }, + "dark": { + "handle": { + "background": "{color.bg.surface.canvas.default}" + } + } + }, + "gutter": { + "background": "{color.bg.neutral.weak.default}" + }, "root": { - "background": "{content.background}", - "borderColor": "{content.borderColor}", - "color": "{content.color}", - "transitionDuration": "{controls.transitionDuration}" + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "color": "{color.fg.default}", + "transitionDuration": "{effects.transition.duration.200}" }, "handle": { - "size": "{form.size.150}", - "borderRadius": "{content.borderRadius}", + "size": "{dimension.size.100}", + "borderRadius": "{dimension.borderRadius.400}", "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" } } }, "stepper": { "extend": { - "extCaption": { "gap": "{feedback.gap.100}" }, + "extCaption": { + "gap": "{dimension.space.100}" + }, "extStepNumber": { - "invalidBackground": "{error.400}", - "invalidColor": "{error.900}", - "invalidBorderColor": "{error.400}", - "borderWidth": "{feedback.width.100}", - "iconSize": "{feedback.icon.size.300}" + "invalidBackground": "{color.bg.status.danger.strong.hover}", + "invalidColor": "{color.fg.on.status.danger.default}", + "invalidBorderColor": "{color.border.status.danger.subtle}", + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": "{dimension.size.700}" } }, - "root": { "transitionDuration": "{feedback.transitionDuration}" }, + "root": { + "transitionDuration": "{effects.transition.duration.200}" + }, "separator": { - "background": "{content.borderColor}", - "activeBackground": "{form.focusBorderPrimaryColor}", - "margin": "0 0 0 1.625rem", - "size": "{form.size.100}" + "background": "{color.bg.neutral.medium.default}", + "activeBackground": "{color.bg.neutral.strong.default}", + "margin": "{dimension.space.none} {dimension.space.none} {dimension.space.none} {dimension.space.700}", + "size": "{dimension.borderWidth.100}" + }, + "step": { + "padding": "{dimension.space.200}", + "gap": "{dimension.space.200}" }, - "step": { "padding": "{feedback.padding.100}", "gap": "{feedback.gap.200}" }, "stepHeader": { - "padding": "0rem", - "borderRadius": "0rem", - "gap": "{feedback.gap.200}", + "padding": "{dimension.space.none}", + "borderRadius": "{dimension.borderRadius.none}", + "gap": "{dimension.space.200}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" } }, "stepTitle": { - "color": "{text.color}", - "activeColor": "{text.color}", + "color": "{color.fg.default}", + "activeColor": "{color.fg.default}", "fontWeight": "{fonts.fontWeight.regular}" }, "stepNumber": { - "background": "{content.background}", - "activeBackground": "{primary.color}", - "borderColor": "{content.borderColor}", - "activeBorderColor": "{primary.color}", - "color": "{text.color}", - "activeColor": "{text.extend.colorPrimaryStatic}", - "size": "{form.size.400}", + "background": "{color.bg.surface.raised.default}", + "activeBackground": "{color.bg.brand.strong.default}", + "borderColor": "{color.border.neutral.default}", + "activeBorderColor": "{color.border.brand.default}", + "color": "{color.fg.default}", + "activeColor": "{color.fg.default}", + "size": "{dimension.size.700}", "fontSize": "{fonts.fontSize.300}", - "fontWeight": "{fonts.fontWeight.bold}", - "borderRadius": "{form.borderRadius.300}", + "fontWeight": "{fonts.fontWeight.regular}", + "borderRadius": "{dimension.borderRadius.max}", "shadow": "none" }, - "steppanels": { "padding": "{feedback.padding.200}" }, + "steppanels": { + "padding": "{dimension.space.400}" + }, "steppanel": { - "background": "{content.background}", - "color": "{content.color}", - "padding": "0rem", - "indent": "0rem" + "background": "{color.bg.surface.raised.default}", + "color": "{color.fg.default}", + "padding": "{dimension.space.none}", + "indent": "{dimension.space.none}" } }, "steps": { - "itemLink": { "gap": "{form.gap.200}" }, - "itemLabel": { "fontWeight": "{fonts.fontWeight.regular}" }, + "itemLink": { + "gap": "{dimension.space.200}", + "borderRadius": "{dimension.borderRadius.400}", + "focusRing": { + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}", + "style": "none", + "width": "{dimension.focusRing.width}" + } + }, + "itemLabel": { + "fontWeight": "{fonts.fontWeight.regular}", + "activeColor": "{color.fg.hover}", + "color": "{color.fg.default}" + }, "itemNumber": { - "background": "{content.background}", - "size": "{form.size.500}", + "background": "{color.bg.surface.raised.default}", + "size": "{dimension.size.900}", "fontSize": "{fonts.fontSize.300}", "fontWeight": "{fonts.fontWeight.bold}", - "borderRadius": "{form.borderRadius.300}", - "shadow": "none" + "borderRadius": "{dimension.borderRadius.max}", + "shadow": "none", + "activeBackground": "{color.bg.surface.raised.default}", + "activeBorderColor": "{color.border.neutral.default}", + "activeColor": "{color.fg.hover}", + "borderColor": "{color.border.neutral.default}", + "color": "{color.fg.default}" + }, + "root": { + "transitionDuration": "{effects.transition.duration.200}" + }, + "separator": { + "background": "{color.bg.neutral.medium.default}" } }, "tabs": { "colorScheme": { "light": { - "navButton": { "shadow": "none" }, + "navButton": { + "shadow": "none" + }, + "tab": { + "background": "transparent", + "hoverBackground": "transparent", + "activeBackground": "transparent" + } + }, + "dark": { + "navButton": { + "shadow": "none" + }, "tab": { - "background": "{transparent}", - "hoverBackground": "{transparent}", - "activeBackground": "{transparent}" + "activeBackground": "transparent", + "background": "transparent", + "hoverBackground": "transparent" } } }, - "root": { "transitionDuration": "{data.transitionDuration}" }, + "root": { + "transitionDuration": "{effects.transition.duration.200}" + }, "tablist": { - "borderWidth": "0 0 {data.width.100} 0", - "background": "{transparent}", - "borderColor": "{content.borderColor}" + "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.none}", + "background": "transparent", + "borderColor": "{color.border.neutral.default}" }, "tab": { - "borderWidth": "0", - "borderColor": "{content.borderColor}", - "hoverBorderColor": "{content.borderColor}", - "activeBorderColor": "{content.activeBorderColor}", - "color": "{text.mutedColor}", - "hoverColor": "{text.color}", - "activeColor": "{text.color}", - "padding": "{content.padding.300}", + "borderWidth": "{dimension.borderWidth.none}", + "borderColor": "{color.border.neutral.default}", + "hoverBorderColor": "{color.border.neutral.default}", + "activeBorderColor": "{color.border.neutral.bold.hover}", + "color": "{color.fg.muted}", + "hoverColor": "{color.fg.default}", + "activeColor": "{color.fg.default}", + "padding": "{dimension.space.400}", "fontWeight": "{fonts.fontWeight.demibold}", - "margin": "0", - "gap": "{content.gap.200}", + "margin": "{dimension.space.none}", + "gap": "{dimension.space.200}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" } }, "tabpanel": { - "background": "{transparent}", - "color": "{text.color}", - "padding": "{spacing.4x}", + "background": "transparent", + "color": "{color.fg.default}", + "padding": "{dimension.space.400}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" } }, "navButton": { - "background": "{content.background}", - "color": "{content.color}", - "hoverColor": "{content.hoverColor}", - "width": "{controls.iconOnly.400}", + "background": "{color.bg.surface.raised.default}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "width": "{dimension.size.700}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" } }, - "activeBar": { "height": "0.18rem", "bottom": "-0.18rem", "background": "{content.color}" } + "activeBar": { + "height": "{dimension.size.50}", + "bottom": "{dimension.space.negative.50}", + "background": "{color.bg.neutral.strong.default}" + } }, "toast": { "extend": { "extInfo": { - "color": "{info.500}", - "closeButton": { "color": "{info.500}", "borderColor": "{info.500}" }, - "caption": { "color": "{text.color}" } + "color": "{color.fg.status.info.default}", + "closeButton": { + "color": "{color.fg.status.info.default}", + "borderColor": "{color.border.status.info.default}" + }, + "caption": { + "color": "{color.fg.default}" + } + }, + "extAccentLine": { + "width": "{dimension.size.100}" + }, + "extCloseButton": { + "width": "{dimension.borderWidth.100}" }, - "extAccentLine": { "width": "{feedback.width.200}" }, - "extCloseButton": { "width": "{feedback.width.100}" }, "extSuccess": { - "color": "{success.500}", - "closeButton": { "color": "{success.500}", "borderColor": "{success.500}" }, - "caption": { "color": "{text.color}" } + "color": "{color.fg.status.success.default}", + "closeButton": { + "color": "{color.fg.status.success.default}", + "borderColor": "{color.border.brand.default}" + }, + "caption": { + "color": "{color.fg.default}" + } }, "extWarn": { - "color": "{warn.500}", - "closeButton": { "color": "{warn.500}", "borderColor": "{warn.500}" }, - "caption": { "color": "{text.color}" } + "color": "{color.fg.status.warning.default}", + "closeButton": { + "color": "{color.fg.status.warning.default}", + "borderColor": "{color.border.status.warning.default}" + }, + "caption": { + "color": "{color.fg.default}" + } }, "extError": { - "color": "{error.500}", - "closeButton": { "color": "{error.500}", "borderColor": "{error.500}" }, - "caption": { "color": "{text.color}" } + "color": "{color.fg.status.danger.default}", + "closeButton": { + "color": "{color.fg.status.danger.default}", + "borderColor": "{color.border.status.danger.default}" + }, + "caption": { + "color": "{color.fg.default}" + } } }, "colorScheme": { "light": { "info": { - "background": "{info.50}", - "borderColor": "{info.500}", - "color": "{text.color}", - "detailColor": "{text.color}", - "shadow": "{overlay.popover.shadow}", + "background": "{color.bg.status.info.weak.default}", + "borderColor": "{color.border.status.info.default}", + "color": "{color.fg.default}", + "detailColor": "{color.fg.default}", + "shadow": "{effects.elevation.400}", "closeButton": { - "hoverBackground": "{info.200}", - "focusRing": { "color": "{focusRing.color}", "shadow": "{focusRing.shadow}" } + "hoverBackground": "{color.bg.status.info.weak.active}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } } }, "success": { - "background": "{success.50}", - "borderColor": "{success.500}", - "color": "{text.color}", - "detailColor": "{text.color}", - "shadow": "{overlay.popover.shadow}", + "background": "{color.bg.status.success.weak.default}", + "borderColor": "{color.border.brand.default}", + "color": "{color.fg.default}", + "detailColor": "{color.fg.default}", + "shadow": "{effects.elevation.400}", "closeButton": { - "hoverBackground": "{success.200}", - "focusRing": { "color": "{focusRing.color}", "shadow": "{focusRing.shadow}" } + "hoverBackground": "{color.bg.status.success.weak.active}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } } }, "warn": { - "background": "{warn.50}", - "borderColor": "{warn.500}", - "color": "{text.color}", - "detailColor": "{text.color}", - "shadow": "{overlay.popover.shadow}", + "background": "{color.bg.status.warning.weak.default}", + "borderColor": "{color.border.status.warning.default}", + "color": "{color.fg.default}", + "detailColor": "{color.fg.default}", + "shadow": "{effects.elevation.400}", "closeButton": { - "hoverBackground": "{warn.200}", - "focusRing": { "color": "{focusRing.color}", "shadow": "none" } + "hoverBackground": "{color.bg.status.warning.weak.active}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "none" + } } }, "error": { - "background": "{error.50}", - "borderColor": "{error.500}", - "color": "{text.color}", - "detailColor": "{text.color}", - "shadow": "{overlay.popover.shadow}", + "background": "{color.bg.status.danger.weak.default}", + "borderColor": "{color.border.status.danger.default}", + "color": "{color.fg.default}", + "detailColor": "{color.fg.default}", + "shadow": "{effects.elevation.400}", "closeButton": { - "hoverBackground": "{error.200}", - "focusRing": { "color": "{focusRing.color}", "shadow": "{focusRing.shadow}" } + "hoverBackground": "{color.bg.status.danger.weak.active}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } } }, - "secondary": { "shadow": "{overlay.popover.shadow}" }, - "contrast": { "shadow": "{overlay.popover.shadow}" } + "secondary": { + "shadow": "{effects.elevation.400}", + "background": "{color.bg.neutral.weak.default}", + "borderColor": "{color.border.neutral.strong}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + }, + "hoverBackground": "{color.bg.neutral.weak.default}" + }, + "color": "{color.fg.default}", + "detailColor": "{color.fg.subtle}" + }, + "contrast": { + "shadow": "{effects.elevation.400}", + "background": "{color.bg.neutral.strong.default}", + "borderColor": "{color.border.neutral.bold.default}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + }, + "hoverBackground": "{color.bg.neutral.strong.hover}" + }, + "color": "{color.fg.on.fill.default}", + "detailColor": "{color.fg.on.fill.muted}" + }, + "root": { + "blur": "{effects.blur.none}" + } + }, + "dark": { + "contrast": { + "background": "{color.bg.surface.canvas.default}", + "borderColor": "{color.border.neutral.inverse}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + }, + "hoverBackground": "{color.bg.surface.canvas.hover}" + }, + "color": "{color.fg.default}", + "detailColor": "{color.fg.on.fill.muted}", + "shadow": "{effects.elevation.400}" + }, + "error": { + "background": "{color.bg.status.danger.weak.default}", + "borderColor": "{color.border.status.danger.default}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "{color.bg.status.danger.weak.active}" + }, + "color": "{color.fg.inverse.default}", + "detailColor": "{color.fg.inverse.default}", + "shadow": "{effects.elevation.400}" + }, + "info": { + "background": "{color.bg.status.info.weak.default}", + "borderColor": "{color.border.status.info.default}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "{color.bg.status.info.weak.active}" + }, + "color": "{color.fg.inverse.default}", + "detailColor": "{color.fg.inverse.default}", + "shadow": "{effects.elevation.400}" + }, + "root": { + "blur": "{effects.blur.none}" + }, + "secondary": { + "background": "{color.bg.neutral.strong.default}", + "borderColor": "{color.border.neutral.strong}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + }, + "hoverBackground": "{color.bg.neutral.strong.selected}" + }, + "color": "{color.fg.inverse.default}", + "detailColor": "{color.fg.subtle}", + "shadow": "{effects.elevation.400}" + }, + "success": { + "background": "{color.bg.status.success.weak.default}", + "borderColor": "{color.border.brand.default}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "{color.bg.status.success.weak.active}" + }, + "color": "{color.fg.inverse.default}", + "detailColor": "{color.fg.inverse.default}", + "shadow": "{effects.elevation.400}" + }, + "warn": { + "background": "{color.bg.status.warning.weak.default}", + "borderColor": "{color.border.status.warning.default}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "none" + }, + "hoverBackground": "{color.bg.status.warning.weak.active}" + }, + "color": "{color.fg.inverse.default}", + "detailColor": "{color.fg.inverse.default}", + "shadow": "{effects.elevation.400}" + } } }, "root": { - "width": "{messages.width}", - "borderWidth": "{feedback.width.100}", - "borderRadius": "{content.borderRadius}", - "transitionDuration": "{feedback.transitionDuration}" - }, - "icon": { "size": "{feedback.icon.size.500}" }, - "content": { "padding": "{feedback.padding.200}", "gap": "{feedback.gap.400}" }, - "text": { "gap": "{feedback.gap.100}" }, - "summary": { "fontWeight": "{fonts.fontWeight.bold}", "fontSize": "{fonts.fontSize.300}" }, - "detail": { "fontWeight": "{fonts.fontWeight.regular}", "fontSize": "{fonts.fontSize.200}" }, + "width": "{dimension.size.2000}", + "borderWidth": "{dimension.borderWidth.100}", + "borderRadius": "{dimension.borderRadius.400}", + "transitionDuration": "{effects.transition.duration.200}" + }, + "icon": { + "size": "{dimension.size.1000}" + }, + "content": { + "padding": "{dimension.space.400}", + "gap": "{dimension.space.400}" + }, + "text": { + "gap": "{dimension.space.100}" + }, + "summary": { + "fontWeight": "{fonts.fontWeight.bold}", + "fontSize": "{fonts.fontSize.300}" + }, + "detail": { + "fontWeight": "{fonts.fontWeight.regular}", + "fontSize": "{fonts.fontSize.200}" + }, "closeButton": { - "width": "{feedback.icon.size.400}", - "height": "{feedback.icon.size.400}", - "borderRadius": "{controls.borderRadius.100}", - "focusRing": { "width": "{focusRing.width}", "style": "{focusRing.style}", "offset": "{focusRing.offset}" } + "width": "{dimension.size.900}", + "height": "{dimension.size.900}", + "borderRadius": "{dimension.borderRadius.400}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "offset": "{dimension.focusRing.offset}" + } }, - "closeIcon": { "size": "{feedback.icon.size.200}" } + "closeIcon": { + "size": "{dimension.size.450}" + } }, "tag": { "colorScheme": { "light": { - "primary": { "background": "{primary.selectedBackground}", "color": "{text.color}" }, - "secondary": { "background": "{surface.200}", "color": "{text.color}" }, - "success": { "background": "{success.400}", "color": "{success.900}" }, - "info": { "background": "{info.300}", "color": "{info.900}" }, - "warn": { "background": "{warn.300}", "color": "{warn.900}" }, - "danger": { "background": "{error.300}", "color": "{error.900}" } + "primary": { + "background": "{color.bg.brand.strong.default}", + "color": "{color.fg.default}" + }, + "secondary": { + "background": "{color.bg.neutral.medium.default}", + "color": "{color.fg.default}" + }, + "success": { + "background": "{color.bg.status.success.strong.hover}", + "color": "{color.fg.on.status.success.default}" + }, + "info": { + "background": "{color.bg.status.info.strong.default}", + "color": "{color.fg.on.status.info.default}" + }, + "warn": { + "background": "{color.bg.status.warning.strong.default}", + "color": "{color.fg.on.status.warning.default}" + }, + "danger": { + "background": "{color.bg.status.danger.strong.default}", + "color": "{color.fg.on.status.danger.default}" + }, + "contrast": { + "background": "{color.bg.neutral.strong.default}", + "color": "{color.fg.on.fill.default}" + } + }, + "dark": { + "contrast": { + "background": "{color.bg.surface.canvas.default}", + "color": "{color.fg.default}" + }, + "danger": { + "background": "{color.bg.status.danger.strong.default}", + "color": "{color.fg.on.status.danger.default}" + }, + "info": { + "background": "{color.bg.status.info.strong.default}", + "color": "{color.fg.on.status.info.default}" + }, + "primary": { + "background": "{color.bg.brand.strong.default}", + "color": "{color.fg.inverse.default}" + }, + "secondary": { + "background": "{color.bg.neutral.strong.hover}", + "color": "{color.fg.inverse.default}" + }, + "success": { + "background": "{color.bg.brand.strong.hover}", + "color": "{color.fg.on.status.success.default}" + }, + "warn": { + "background": "{color.bg.status.warning.strong.default}", + "color": "{color.fg.on.status.warning.default}" + } } }, "root": { "fontSize": "{fonts.fontSize.100}", "fontWeight": "{fonts.fontWeight.regular}", - "padding": "{media.padding.100} {media.padding.200}", - "gap": "{media.gap.100}", - "borderRadius": "{media.size.200}", - "roundedBorderRadius": "{media.borderRadius.400}" + "padding": "{dimension.space.100} {dimension.space.200}", + "gap": "{dimension.space.100}", + "borderRadius": "{dimension.borderRadius.200}", + "roundedBorderRadius": "{dimension.borderRadius.max}" }, - "icon": { "size": "{media.icon.size.100}" } + "icon": { + "size": "{dimension.size.450}" + } }, "textarea": { "extend": { - "readonlyBackground": "{form.readonlyBackground}", - "borderWidth": "{form.borderWidth}", - "iconSize": "{form.icon.300}", - "minHeight": "{form.size.900}" + "readonlyBackground": "{color.bg.neutral.weak.default}", + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": "{dimension.size.450}", + "minHeight": "{dimension.size.1500}", + "extXlg": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.500}" + } }, "root": { - "background": "{form.background}", - "disabledBackground": "{form.disabledBackground}", - "filledBackground": "{form.filledBackground}", - "filledHoverBackground": "{form.filledHoverBackground}", - "filledFocusBackground": "{form.filledFocusBackground}", - "borderColor": "{form.borderColor}", - "hoverBorderColor": "{form.hoverBorderSecondaryColor}", - "focusBorderColor": "{form.focusBorderSecondaryColor}", - "invalidBorderColor": "{form.invalidBorderColor}", - "color": "{form.color}", - "disabledColor": "{form.disabledColor}", - "placeholderColor": "{form.placeholderColor}", - "invalidPlaceholderColor": "{form.invalidPlaceholderColor}", - "shadow": "0", - "paddingX": "{form.paddingX}", - "paddingY": "{form.paddingY}", - "borderRadius": "{form.borderRadius.200}", - "transitionDuration": "{form.transitionDuration}", + "background": "{color.bg.surface.default.default}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "filledBackground": "{color.bg.surface.default.default}", + "filledHoverBackground": "{color.bg.surface.default.default}", + "filledFocusBackground": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.strong}", + "hoverBorderColor": "{color.border.brand.strong}", + "focusBorderColor": "{color.border.brand.strong}", + "invalidBorderColor": "{color.border.status.danger.subtle}", + "color": "{color.fg.active}", + "disabledColor": "{color.fg.muted}", + "placeholderColor": "{color.fg.muted}", + "invalidPlaceholderColor": "{color.fg.status.danger.hover}", + "shadow": "{effects.elevation.none}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.300}", + "borderRadius": "{dimension.borderRadius.400}", + "transitionDuration": "{effects.transition.duration.200}", "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "0" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}" }, - "sm": { + "lg": { "fontSize": "{fonts.fontSize.300}", - "paddingX": "{form.padding.200}", - "paddingY": "{form.padding.200}" + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.400}" }, - "lg": { "fontSize": "{fonts.fontSize.300}", "paddingX": "{form.padding.400}", "paddingY": "{form.padding.400}" } + "sm": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.200}" + } } }, "tieredmenu": { "extend": { - "extSubmenu": { "borderColor": "{content.borderColor}", "background": "{content.background}" }, - "iconSize": "{navigation.submenuIcon.size}", - "extItem": { "caption": { "gap": "{content.gap.100}", "color": "{text.mutedColor}" } } + "iconSize": "{dimension.size.600}", + "extSubmenu": { + "borderColor": "{color.border.neutral.default}", + "background": "{color.bg.surface.raised.default}" + }, + "extItem": { + "caption": { + "gap": "{dimension.space.100}", + "color": "{color.fg.muted}" + } + } }, "root": { - "background": "{content.background}", - "borderColor": "{transparent}", - "color": "{content.color}", - "borderRadius": "{content.borderRadius}", - "shadow": "{navigation.shadow}", - "transitionDuration": "{feedback.transitionDuration}" - }, - "list": { "padding": "{navigation.list.padding.100}", "gap": "{navigation.list.gap}" }, + "background": "{color.bg.surface.default.default}", + "borderColor": "transparent", + "color": "{color.fg.default}", + "borderRadius": "{dimension.borderRadius.400}", + "shadow": "{effects.elevation.400}", + "transitionDuration": "{effects.transition.duration.200}" + }, + "list": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + }, "item": { - "focusBackground": "{navigation.item.focusBackground}", - "activeBackground": "{navigation.item.activeBackground}", - "color": "{navigation.item.color}", - "focusColor": "{navigation.item.focusColor}", - "activeColor": "{navigation.item.activeColor}", - "padding": "{navigation.item.padding}", - "borderRadius": "{navigation.item.borderRadius}", - "gap": "{navigation.item.gap}", + "focusBackground": "{color.bg.neutral.weak.default}", + "activeBackground": "{color.bg.neutral.strong.default}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "activeColor": "{color.fg.inverse.active}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.200}", + "gap": "{dimension.space.200}", "icon": { - "color": "{navigation.item.icon.color}", - "focusColor": "{navigation.item.icon.focusColor}", - "activeColor": "{navigation.item.icon.activeColor}" + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "activeColor": "{color.fg.inverse.active}" } }, - "submenu": { "mobileIndent": "{overlay.popover.padding.100}" }, - "separator": { "borderColor": "{content.borderColor}" } + "submenu": { + "mobileIndent": "{dimension.space.400}" + }, + "separator": { + "borderColor": "{color.border.neutral.default}" + }, + "submenuIcon": { + "activeColor": "{color.fg.inverse.active}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "size": "{dimension.size.400}" + } }, "timeline": { - "extend": { "extEvent": { "gap": "{feedback.gap.100}" } }, - "event": { "minHeight": "{feedback.height.900}" }, - "vertical": { "eventContent": { "padding": "0 {feedback.padding.100}" } }, - "horizontal": { "eventContent": { "padding": "{feedback.padding.100} 0" } }, + "extend": { + "extEvent": { + "gap": "{dimension.space.100}" + } + }, + "event": { + "minHeight": "{dimension.size.1400}" + }, + "vertical": { + "eventContent": { + "padding": "{dimension.space.none} {dimension.space.600}" + } + }, + "horizontal": { + "eventContent": { + "padding": "{dimension.space.600} {dimension.space.none}" + } + }, "eventMarker": { - "size": "{feedback.width.500}", - "borderRadius": "{content.borderRadius}", - "borderWidth": "{feedback.width.200}", - "background": "{content.background}", - "borderColor": "{primary.color}", + "size": "{dimension.size.450}", + "borderRadius": "{dimension.borderRadius.400}", + "borderWidth": "{dimension.borderWidth.300}", + "background": "{color.bg.surface.raised.default}", + "borderColor": "{color.border.brand.default}", "content": { - "borderRadius": "{content.borderRadius}", - "size": "{feedback.width.400}", - "background": "{transparent}", + "borderRadius": "{dimension.borderRadius.400}", + "size": "{dimension.size.350}", + "background": "transparent", "insetShadow": "none" } }, - "eventConnector": { "color": "{content.borderColor}", "size": "{feedback.width.100}" } + "eventConnector": { + "color": "{color.border.neutral.default}", + "size": "{dimension.borderWidth.100}" + } }, "togglebutton": { "extend": { - "ext": { "gap": "{form.gap.300}" }, + "ext": { + "gap": "{dimension.space.400}" + }, "iconSize": { - "sm": "{controls.iconOnly.200}", - "md": "{controls.iconOnly.300}", - "lg": "{controls.iconOnly.400}" - }, - "iconOnlyWidth": "{form.size.600}", - "hoverBorderColor": "{surface.300}", - "checkedHoverColor": "{text.extend.colorInverted}", - "checkedHoverBackground": "{surface.800}", - "checkedHoverBorderColor": "{surface.800}", - "extXlg": { "padding": "{form.padding.500} {form.padding.500}", "iconOnlyWidth": "4.0714rem" }, - "extSm": { "iconOnlyWidth": "2.1429rem" }, - "extLg": { "iconOnlyWidth": "3.5714rem" } + "sm": "{dimension.size.450}", + "md": "{dimension.size.600}", + "lg": "{dimension.size.700}" + }, + "iconOnlyWidth": "{dimension.size.1100}", + "hoverBorderColor": "{color.border.neutral.strong}", + "checkedHoverColor": "{color.fg.inverse.default}", + "checkedHoverBackground": "{color.bg.neutral.strong.hover}", + "checkedHoverBorderColor": "{color.border.neutral.bold.hover}", + "extXlg": { + "padding": "{dimension.space.600} {dimension.space.700}", + "iconOnlyWidth": "{dimension.size.1400}" + }, + "extSm": { + "iconOnlyWidth": "{dimension.size.900}" + }, + "extLg": { + "iconOnlyWidth": "{dimension.size.1300}" + } }, "colorScheme": { "light": { "root": { - "background": "{surface.200}", - "hoverBackground": "{surface.300}", - "borderColor": "{surface.200}", - "color": "{text.color}", - "hoverColor": "{text.color}", - "checkedBackground": "{surface.900}", - "checkedColor": "{text.extend.colorInverted}", - "checkedBorderColor": "{surface.900}", - "disabledBackground": "{form.disabledBackground}", - "disabledBorderColor": "{form.disabledBackground}", - "disabledColor": "{form.disabledColor}", - "invalidBorderColor": "{form.invalidBorderColor}" + "background": "{color.bg.surface.canvas.hover}", + "hoverBackground": "{color.bg.surface.canvas.active}", + "borderColor": "{color.border.neutral.default}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.default}", + "checkedBackground": "{color.bg.neutral.strong.default}", + "checkedColor": "{color.fg.on.fill.default}", + "checkedBorderColor": "{color.border.neutral.bold.default}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "disabledBorderColor": "{color.border.neutral.default}", + "disabledColor": "{color.fg.muted}", + "invalidBorderColor": "{color.border.status.danger.subtle}" + }, + "icon": { + "color": "{color.fg.default}", + "hoverColor": "{color.fg.default}", + "checkedColor": "{color.fg.on.fill.default}", + "disabledColor": "{color.fg.muted}" + }, + "content": { + "checkedBackground": "transparent" + } + }, + "dark": { + "root": { + "hoverBackground": "{color.bg.surface.canvas.active}", + "background": "{color.bg.surface.canvas.hover}", + "borderColor": "{color.border.neutral.default}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.default}", + "checkedBackground": "{color.bg.neutral.strong.default}", + "checkedColor": "{color.fg.inverse.default}", + "checkedBorderColor": "{color.border.neutral.bold.default}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "disabledBorderColor": "{color.border.neutral.default}", + "disabledColor": "{color.fg.inverse.muted}", + "invalidBorderColor": "{color.border.status.danger.strong}" }, "icon": { - "color": "{text.color}", - "hoverColor": "{text.color}", - "checkedColor": "{text.extend.colorInverted}", - "disabledColor": "{form.disabledColor}" + "color": "{color.fg.default}", + "hoverColor": "{color.fg.default}", + "checkedColor": "{color.fg.inverse.default}", + "disabledColor": "{color.fg.inverse.muted}" }, - "content": { "checkedBackground": "{transparent}" } + "content": { + "checkedBackground": "transparent" + } } }, "root": { - "padding": "{form.padding.200} {form.padding.400}", - "borderRadius": "{form.borderRadius.300}", - "gap": "{form.gap.200}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.max}", + "gap": "{dimension.space.200}", "fontWeight": "{fonts.fontWeight.demibold}", "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + }, + "sm": { + "fontSize": "{fonts.fontSize.200}", + "padding": "{dimension.space.100} {dimension.space.400}" + }, + "lg": { + "fontSize": "{fonts.fontSize.500}", + "padding": "{dimension.space.400} {dimension.space.700}" }, - "sm": { "fontSize": "{fonts.fontSize.200}", "padding": "{form.padding.100} {form.padding.300}" }, - "lg": { "fontSize": "{fonts.fontSize.500}", "padding": "{form.padding.400} {form.padding.600}" }, - "transitionDuration": "{form.transitionDuration}" + "transitionDuration": "{effects.transition.duration.200}", + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "checkedBackground": "{color.bg.surface.default.default}", + "checkedBorderColor": "{color.border.neutral.default}", + "checkedColor": "{color.fg.default}", + "color": "{color.fg.default}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "disabledBorderColor": "{color.border.neutral.default}", + "disabledColor": "{color.fg.muted}", + "hoverColor": "{color.fg.hover}", + "invalidBorderColor": "{color.border.status.danger.subtle}" }, "content": { "checkedShadow": "none", - "padding": "0rem", - "borderRadius": "0rem", - "sm": { "padding": "0rem" }, - "lg": { "padding": "0rem" } + "padding": "{dimension.space.none}", + "borderRadius": "{dimension.borderRadius.none}", + "sm": { + "padding": "{dimension.space.none}" + }, + "lg": { + "padding": "{dimension.space.none}" + }, + "checkedBackground": "{color.bg.surface.default.default}" + }, + "icon": { + "checkedColor": "{color.fg.default}", + "color": "{color.fg.default}", + "disabledColor": "{color.fg.muted}", + "hoverColor": "{color.fg.hover}" } }, "toggleswitch": { "colorScheme": { "light": { "root": { - "background": "{surface.400}", - "hoverBackground": "{surface.500}", - "disabledBackground": "{form.disabledBackground}", - "checkedBackground": "{surface.900}", - "checkedHoverBackground": "{surface.800}" + "background": "{color.bg.neutral.medium.active}", + "hoverBackground": "{color.bg.neutral.medium.strong}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "checkedBackground": "{color.bg.neutral.strong.default}", + "checkedHoverBackground": "{color.bg.neutral.strong.hover}" }, "handle": { - "background": "{form.backgroundHandler}", - "hoverBackground": "{form.backgroundHandler}", - "disabledBackground": "{form.disabledColor}", - "checkedBackground": "{surface.0}", - "checkedHoverBackground": "{surface.0}", - "color": "{text.color}", - "hoverColor": "{text.color}", - "checkedColor": "{text.color}", - "checkedHoverColor": "{text.color}" + "background": "{color.bg.surface.raised.default}", + "hoverBackground": "{color.bg.surface.raised.default}", + "disabledBackground": "{color.bg.neutral.medium.strong}", + "checkedBackground": "{color.bg.surface.raised.default}", + "checkedHoverBackground": "{color.bg.surface.raised.default}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.default}", + "checkedColor": "{color.fg.default}", + "checkedHoverColor": "{color.fg.default}" + } + }, + "dark": { + "handle": { + "background": "{color.bg.surface.raised.default}", + "checkedBackground": "{color.bg.surface.raised.default}", + "checkedColor": "{color.fg.inverse.focus}", + "checkedHoverBackground": "{color.bg.surface.raised.default}", + "checkedHoverColor": "{color.fg.on.brand.hover}", + "color": "{color.fg.inverse.default}", + "disabledBackground": "{color.bg.surface.raised.active}", + "hoverBackground": "{color.bg.surface.raised.default}", + "hoverColor": "{color.fg.on.brand.hover}" + }, + "root": { + "background": "{color.bg.neutral.medium.active}", + "checkedBackground": "{color.bg.surface.canvas.default}", + "checkedHoverBackground": "{color.bg.surface.canvas.hover}", + "disabledBackground": "{color.bg.neutral.strong.hover}", + "hoverBackground": "{color.bg.surface.raised.active}" } } }, "root": { - "width": "{form.size.600}", - "height": "{form.size.400}", - "borderRadius": "{form.borderRadius.300}", - "gap": "{form.gap.100}", - "borderWidth": "{form.borderWidth}", + "width": "{dimension.size.1100}", + "height": "{dimension.size.700}", + "borderRadius": "{dimension.borderRadius.max}", + "gap": "{dimension.space.100}", + "borderWidth": "{dimension.borderWidth.100}", "shadow": "none", "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "0" - }, - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "checkedBorderColor": "{transparent}", - "checkedHoverBorderColor": "{transparent}", - "invalidBorderColor": "{form.invalidBorderColor}", - "transitionDuration": "{form.transitionDuration}", - "slideDuration": "{form.transitionDuration}" - }, - "handle": { "borderRadius": "{form.borderRadius.300}", "size": "{form.size.300}" } + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}" + }, + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "checkedBorderColor": "transparent", + "checkedHoverBorderColor": "transparent", + "invalidBorderColor": "{color.border.status.danger.subtle}", + "transitionDuration": "{effects.transition.duration.200}", + "slideDuration": "{effects.transition.duration.200}" + }, + "handle": { + "borderRadius": "{dimension.borderRadius.max}", + "size": "{dimension.size.450}" + } }, "tooltip": { - "colorScheme": { "light": { "root": { "background": "{surface.900}", "color": "{text.extend.colorInverted}" } } }, + "colorScheme": { + "light": { + "root": { + "background": "{color.bg.neutral.strong.default}", + "color": "{color.fg.inverse.default}" + } + }, + "dark": { + "root": { + "background": "{color.bg.surface.canvas.default}", + "color": "{color.fg.default}" + } + } + }, "root": { - "maxWidth": "{overlay.width}", - "gutter": "{feedback.gap.100}", - "shadow": "{overlay.popover.shadow}", - "padding": "{feedback.padding.100} {feedback.padding.200} ", - "borderRadius": "{overlay.popover.borderRadius}" + "maxWidth": "{dimension.size.2000}", + "gutter": "{dimension.space.100}", + "shadow": "{effects.elevation.400}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.200}" } }, "tree": { "root": { - "background": "{content.background}", - "color": "{content.color}", - "padding": "{data.padding.400}", - "gap": "{data.gap.100}", - "indent": "{data.padding.400}" + "background": "{color.bg.surface.default.default}", + "color": "{color.fg.default}", + "padding": "{dimension.space.400}", + "gap": "{dimension.space.100}", + "indent": "{dimension.space.400}", + "transitionDuration": "{effects.transition.duration.200}" }, "node": { - "padding": "{data.padding.200} {data.padding.300}", - "color": "{text.color}", - "selectedColor": "{text.extend.colorInverted}", - "gap": "{data.gap.100}" + "padding": "{dimension.space.200} {dimension.space.400}", + "color": "{color.fg.default}", + "selectedColor": "{color.fg.on.fill.default}", + "gap": "{dimension.space.100}", + "borderRadius": "{dimension.borderRadius.400}", + "focusRing": { + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}", + "style": "none", + "width": "{dimension.focusRing.width}" + }, + "hoverBackground": "{color.bg.neutral.weak.default}", + "hoverColor": "{color.fg.default}", + "selectedBackground": "{color.bg.neutral.strong.selected}" + }, + "nodeIcon": { + "selectedColor": "{color.fg.on.fill.default}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}" }, - "nodeIcon": { "selectedColor": "{text.extend.colorInverted}" }, "nodeToggleButton": { - "borderRadius": "{data.borderRadius}", - "size": "{data.icon.size.400}", - "selectedHoverBackground": "{surface.900}" + "borderRadius": "{dimension.borderRadius.100}", + "size": "{dimension.size.800}", + "selectedHoverBackground": "{color.bg.neutral.strong.default}", + "color": "{color.fg.default}", + "focusRing": { + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}", + "style": "none", + "width": "{dimension.focusRing.width}" + }, + "hoverBackground": "{color.bg.neutral.weak.default}", + "hoverColor": "{color.fg.hover}", + "selectedHoverColor": "{color.fg.hover}" + }, + "loadingIcon": { + "size": "{dimension.size.450}" }, - "loadingIcon": { "size": "{data.icon.size.100}" }, - "filter": { "margin": "0 0 {data.padding.200} 0" } + "filter": { + "margin": "{dimension.space.none} {dimension.space.none} {dimension.space.200} {dimension.space.none}" + } }, - "overlaybadge": { "root": { "outline": { "width": "0rem", "color": "{transparent}" } } } + "overlaybadge": { + "root": { + "outline": { + "width": "{dimension.size.none}", + "color": "transparent" + } + } + } } } diff --git a/src/styles.scss b/src/styles.scss index 75d23e2d..835f41d1 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -20,8 +20,18 @@ font-style: normal; } -html { - font-size: 14px; +@font-face { + font-family: 'Noto Sans'; + src: url('./assets/fonts/noto-sans/NotoSans-Regular.woff2') format('woff2'); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Noto Sans'; + src: url('./assets/fonts/noto-sans/NotoSans-Bold.woff2') format('woff2'); + font-weight: 700; + font-style: normal; } body .css-3rewwu { diff --git a/tailwind/generate.mjs b/tailwind/generate.mjs index c244c110..5c2333cc 100644 --- a/tailwind/generate.mjs +++ b/tailwind/generate.mjs @@ -77,16 +77,28 @@ function resolveToken(value, scope = tokens) { const [color, shade] = alphaMatch[1].split('.'); return ALPHA[color]?.[shade]; } - const semanticMatch = path.match( - /^(text|form|content|surface|primary|navigation|overlay|highlight|focusRing|mask|list|background|border|icon)\.(.+)$/ - ); - if (semanticMatch) { - const obj = walk(semantic[semanticMatch[1]], semanticMatch[2].split('.')); + // {color.fg.default} / {color.bg.brand.strong.hover} → semantic.colorScheme.light.color.* + const colorMatch = path.match(/^color\.(.+)$/); + if (colorMatch) { + const obj = walk(semantic.color, colorMatch[1].split('.')); return typeof obj === 'string' ? resolveToken(obj) : obj; } - const scaleMatch = path.match(/^(spacing|sizing)\.(.+)$/); - if (scaleMatch) { - return primitive[scaleMatch[1]]?.[scaleMatch[2]]; + // {sizing.8x} → primitive.sizing.8x + const sizingMatch = path.match(/^sizing\.(.+)$/); + if (sizingMatch) { + return primitive.sizing?.[sizingMatch[1]]; + } + // {fonts.fontSize.300} → primitive.fonts.* + const fontsMatch = path.match(/^fonts\.(.+)$/); + if (fontsMatch) { + const obj = walk(primitive.fonts, fontsMatch[1].split('.')); + return typeof obj === 'string' ? resolveToken(obj) : obj; + } + // {dimension.borderRadius.400} / {effects.transition.duration.200} → semantic.* + const semanticMatch = path.match(/^(dimension|effects)\.(.+)$/); + if (semanticMatch) { + const obj = walk(tokens.semantic[semanticMatch[1]], semanticMatch[2].split('.')); + return typeof obj === 'string' ? resolveToken(obj) : obj; } return value; } @@ -117,33 +129,33 @@ function resolveInline(value) { // без линков на runtime --p-* (их имена у кастомного пресета нестандартны) и без fallback'ов. // Нейминг чистый: foreground/secondary/muted/disabled (утилиты text-foreground, text-secondary…). const SEMANTIC_TOKENS = [ - // [tailwind var, путь в semantic.colorScheme.light.*] - ['--color-foreground', 'text.color'], - ['--color-secondary', 'text.secondaryColor'], - ['--color-muted', 'text.mutedColor'], - ['--color-disabled', 'text.disabledColor'], - ['--color-primary', 'primary.color'], - ['--color-on-primary', 'primary.contrastColor'], - ['--color-primary-hover', 'primary.hoverColor'], - ['--color-primary-active', 'primary.activeColor'], - ['--color-surface-ground', 'content.background'], - ['--color-surface-section', 'content.hoverBackground'], - ['--color-surface-card', 'content.background'], - ['--color-surface-overlay', 'overlay.select.background'], - ['--color-surface-border', 'content.borderColor'], - ['--color-surface-hover', 'content.hoverBackground'], - ['--color-form-border', 'form.borderColor'], - ['--color-form-bg', 'form.background'], - ['--color-danger', 'text.dangerColor'], - ['--color-success', 'text.successColor'], - ['--color-warning', 'text.warningColor'], - ['--color-info', 'text.infoColor'], - ['--color-help', 'text.helpColor'] + // [tailwind var, путь в semantic.colorScheme.light.color.*] + ['--color-foreground', 'fg.default'], + ['--color-secondary', 'fg.subtle'], + ['--color-muted', 'fg.muted'], + ['--color-disabled', 'fg.muted'], + ['--color-primary', 'bg.brand.strong.default'], + ['--color-on-primary', 'fg.on.brand.default'], + ['--color-primary-hover', 'bg.brand.strong.hover'], + ['--color-primary-active', 'bg.brand.strong.active'], + ['--color-surface-ground', 'bg.surface.canvas.default'], + ['--color-surface-section', 'bg.surface.canvas.hover'], + ['--color-surface-card', 'bg.surface.default.default'], + ['--color-surface-overlay', 'bg.surface.overlay.default'], + ['--color-surface-border', 'border.neutral.default'], + ['--color-surface-hover', 'bg.surface.default.hover'], + ['--color-form-border', 'border.neutral.strong'], + ['--color-form-bg', 'bg.surface.default.default'], + ['--color-danger', 'fg.status.danger.default'], + ['--color-success', 'fg.status.success.default'], + ['--color-warning', 'fg.status.warning.default'], + ['--color-info', 'fg.status.info.default'], + ['--color-help', 'fg.status.help.default'] ]; /** Разрешить semantic-токен по пути (text.color, primary.color, content.background…). */ function semanticValue(path) { - return resolveToken(`{${path}}`); + return resolveToken(`{color.${path}}`); } /** @@ -175,12 +187,14 @@ const FONT_BASE = primitive.fonts.fontFamily.base; // 'Noto Sans' const FONT_WEIGHT = primitive.fonts.fontWeight; // {regular,medium,demibold,bold} const FONT_SIZE = primitive.fonts.fontSize; // {100..1000} const LINE_HEIGHT = primitive.fonts.lineHeight; // {100..1000, auto} -const RADIUS = primitive.borderRadius; // {100,200,...,none,max} -const SHADOWS = primitive.shadows; // {100..500, none} (со ссылками на alpha-цвета) -const EASING = primitive.transition.easing; // {linear, in, out, inOut} +const RADIUS = tokens.semantic.dimension.borderRadius; // {100,...,none,max} → {sizing.*} +const SHADOWS = tokens.semantic.effects.elevation; // {100..500, none} (+ вложенный status — пропускаем) +const EASING = tokens.semantic.effects.transition.easing; +const LETTER_SPACING = primitive.fonts.letterSpacing; // {200..700} → --tracking-* // spacing: v4 отдаёт под spacing ОДНУ ручку --spacing (множитель). Базовый шаг кита — -// primitive.spacing["1x"] (= 0.25rem); вся шкала (p/m/w/h/gap/inset/...) выводится v4 как calc(var(--spacing)*N). -const SPACING_STEP = primitive.spacing['1x']; +// primitive.sizing["2x"] (= 0.25rem = 4px при базе 16); вся шкала (p/m/w/h/gap/inset/...) +// выводится v4 как calc(var(--spacing)*N). +const SPACING_STEP = primitive.sizing['2x']; const HEADER = `/** * СГЕНЕРИРОВАНО. Не править руками — источник: src/lib/providers/prime-preset/tokens/tokens.json. @@ -278,6 +292,9 @@ function buildThemeCss() { for (const [k, v] of Object.entries(LINE_HEIGHT)) { lines.push(` --leading-${k}: ${v};`); } + for (const [k, v] of Object.entries(LETTER_SPACING)) { + lines.push(` --tracking-${k}: ${v};`); + } // radius lines.push(''); @@ -295,6 +312,7 @@ function buildThemeCss() { lines.push(''); lines.push(' /* shadows (box-shadow, {colors.alpha.*} раскрыты) */'); for (const [k, v] of Object.entries(SHADOWS)) { + if (typeof v !== 'string') continue; // elevation.status — вложенная группа, в @theme не идёт const resolved = resolveInline(v); lines.push(` --shadow-${k}: ${assertResolved(`--shadow-${k}`, resolved, `shadows.${k}`)};`); } diff --git a/tailwind/theme.css b/tailwind/theme.css index 5fdcb4ec..c8b779d0 100644 --- a/tailwind/theme.css +++ b/tailwind/theme.css @@ -24,24 +24,24 @@ --color-foreground: #2b2e33; --color-secondary: #6d7076; --color-muted: #85888e; - --color-disabled: #cecfd2; + --color-disabled: #85888e; --color-primary: #44e858; - --color-on-primary: #ffffff; + --color-on-primary: #2b2e33; --color-primary-hover: #1dc831; --color-primary-active: #168322; - --color-surface-ground: #ffffff; - --color-surface-section: #f0f0f1; + --color-surface-ground: #f0f0f1; + --color-surface-section: #e2e2e4; --color-surface-card: #ffffff; --color-surface-overlay: #ffffff; --color-surface-border: #e2e2e4; - --color-surface-hover: #f0f0f1; + --color-surface-hover: #fafafa; --color-form-border: #cecfd2; --color-form-bg: #ffffff; - --color-danger: #db3424; - --color-success: #168322; - --color-warning: #dc9710; - --color-info: #1e76cd; - --color-help: #9333ea; + --color-danger: #e85244; + --color-success: #44e858; + --color-warning: #f5b83d; + --color-info: #4496e8; + --color-help: #a855f7; /* primary — фирменный цвет кита (= green-палитра), оттенки */ --color-primary-50: #fafffb; @@ -372,7 +372,12 @@ --color-rose-950: #4c0519; /* alpha white/black (colors.alpha.*) */ + --color-white-10: rgba(255, 255, 255, 0.0100); + --color-white-40: rgba(255, 255, 255, 0.0400); + --color-white-50: rgba(255, 255, 255, 0.0500); + --color-white-60: rgba(255, 255, 255, 0.0600); --color-white-100: rgba(255, 255, 255, 0.1000); + --color-white-160: rgba(255, 255, 255, 0.1600); --color-white-200: rgba(255, 255, 255, 0.2000); --color-white-300: rgba(255, 255, 255, 0.3000); --color-white-400: rgba(255, 255, 255, 0.4000); @@ -380,8 +385,10 @@ --color-white-600: rgba(255, 255, 255, 0.6000); --color-white-700: rgba(255, 255, 255, 0.7000); --color-white-800: rgba(255, 255, 255, 0.8000); + --color-white-870: rgba(255, 255, 255, 0.8700); --color-white-900: rgba(255, 255, 255, 0.9000); --color-white-DEFAULT: #ffffff; + --color-black-40: rgba(0, 0, 0, 0.0400); --color-black-100: rgba(0, 0, 0, 0.1000); --color-black-200: rgba(0, 0, 0, 0.2000); --color-black-300: rgba(0, 0, 0, 0.3000); @@ -415,42 +422,49 @@ --text-800: 3.75rem; --text-900: 4.5rem; --text-1000: 6rem; - --leading-100: 0.7857rem; - --leading-150: 0.8571rem; - --leading-200: 0.9286rem; + --leading-100: 0.75rem; + --leading-150: 0.875rem; + --leading-200: 0.875rem; --leading-250: 1rem; - --leading-300: 1.0714rem; - --leading-350: 1.1429rem; - --leading-400: 1.2857rem; - --leading-450: 1.4286rem; + --leading-300: 1.125rem; + --leading-350: 1.125rem; + --leading-400: 1.25rem; + --leading-450: 1.375rem; --leading-500: 1.5rem; - --leading-550: 1.5714rem; - --leading-600: 1.7143rem; - --leading-700: 1.8571rem; - --leading-800: 2.2857rem; - --leading-850: 2.3571rem; - --leading-900: 2.7857rem; - --leading-1000: 3.3571rem; + --leading-550: 1.625rem; + --leading-600: 1.75rem; + --leading-700: 1.875rem; + --leading-800: 2.25rem; + --leading-850: 2.375rem; + --leading-900: 2.75rem; + --leading-1000: 3.375rem; + --leading-none: 1; --leading-auto: auto; + --tracking-200: -0.02rem; + --tracking-400: -0.03rem; + --tracking-500: 0rem; + --tracking-600: 0.02rem; + --tracking-700: 0.03rem; /* border-radius */ --radius-100: 0.25rem; --radius-200: 0.5rem; - --radius-300: 0.75rem; - --radius-400: 1rem; - --radius-500: 1.5rem; + --radius-300: 0.625rem; + --radius-350: 0.75rem; + --radius-400: 0.875rem; + --radius-500: 1.25rem; --radius-none: 0rem; - --radius-max: 71.3571rem; + --radius-max: 100rem; /* spacing: множитель для p/m/w/h/gap/inset/… (v4: calc(var(--spacing)*N)) */ --spacing: 0.25rem; /* shadows (box-shadow, {colors.alpha.*} раскрыты) */ - --shadow-100: 0 0 0.1rem rgba(0, 0, 0, 0.2000); - --shadow-200: 0 0 0.25rem rgba(0, 0, 0, 0.2000); - --shadow-300: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.2000); - --shadow-400: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2000); - --shadow-500: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2000); + --shadow-100: 0 0 2px rgba(0, 0, 0, 0.2000); + --shadow-200: 0 0 4px rgba(0, 0, 0, 0.2000); + --shadow-300: 0 2px 4px rgba(0, 0, 0, 0.2000); + --shadow-400: 0 4px 8px rgba(0, 0, 0, 0.2000); + --shadow-500: 0 8px 16px 0 rgba(0, 0, 0, 0.2000); --shadow-none: none; /* transition easing (--ease-*) */ @@ -458,4 +472,10 @@ --ease-in: cubic-bezier(0.55, 0.06, 0.7, 0.2); --ease-out: cubic-bezier(0.2, 0.6, 0.4, 1); --ease-inOut: cubic-bezier(0.65, 0.05, 0.35, 1); + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --ease-accelerate: cubic-bezier(0.3, 0, 1, 1); + --ease-decelerate: cubic-bezier(0, 0, 0, 1); + --ease-emphasizedAccelerate: cubic-bezier(0.3, 0, 0.8, 0.15); + --ease-emphasizedDecelerate: cubic-bezier(0.05, 0.7, 0.1, 1); + --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); }