From 2b19ea00da600ec5028739ee495179891ea3a762 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Thu, 18 Jun 2026 14:02:17 +0800 Subject: [PATCH 01/46] =?UTF-8?q?=D1=84=D0=B0=D0=B9=D0=BB=20=D1=81=20?= =?UTF-8?q?=D0=BF=D1=80=D0=B5=D0=B1=D0=B8=D0=BB=D0=B4=D0=BE=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/superpowers/specs/prebuild-tokens.json | 4720 +++++++++++++++++++ 1 file changed, 4720 insertions(+) create mode 100644 docs/superpowers/specs/prebuild-tokens.json diff --git a/docs/superpowers/specs/prebuild-tokens.json b/docs/superpowers/specs/prebuild-tokens.json new file mode 100644 index 00000000..d910c3f2 --- /dev/null +++ b/docs/superpowers/specs/prebuild-tokens.json @@ -0,0 +1,4720 @@ +{ + "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" + } + } + }, + "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" + } + }, + "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" + }, + "size": { + "none": "0rem", + "min": "0.0714rem", + "2px": "0.1429rem", + "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", + "pill": "71.3571rem", + "max": "100%" + } + }, + "semantic": { + "color": { + "light": { + "background": { + "surface": { + "ground": "{colors.alpha.white.1000}", + "section": "{colors.solid.zinc.50}", + "raised": "{colors.alpha.white.1000}", + "overlay": "{colors.alpha.white.1000}", + "sunken": "{colors.solid.zinc.100}", + "canvas": "{colors.alpha.white.1000}", + "inverse": "{colors.solid.zinc.800}", + "inverseStrong": "{colors.solid.zinc.950}", + "hover": { + "section": "{colors.solid.zinc.100}", + "raised": "{colors.solid.zinc.100}" + } + }, + "brand": { + "subtle": "{colors.solid.green.50}", + "subtleHover": "{colors.solid.green.100}", + "bold": "{colors.solid.green.500}", + "boldHover": "{colors.solid.green.600}", + "boldActive": "{colors.solid.green.700}" + }, + "success": { + "subtle": "{colors.solid.green.50}", + "subtleHover": "{colors.solid.green.100}", + "indicator": "{colors.solid.green.400}", + "bold": "{colors.solid.green.500}", + "boldHover": "{colors.solid.green.600}", + "deep": "{colors.solid.green.950}" + }, + "info": { + "subtle": "{colors.solid.blue.50}", + "subtleHover": "{colors.solid.blue.100}", + "bold": "{colors.solid.blue.500}", + "boldHover": "{colors.solid.blue.600}", + "deep": "{colors.solid.blue.950}" + }, + "warning": { + "subtle": "{colors.solid.yellow.50}", + "subtleHover": "{colors.solid.yellow.100}", + "bold": "{colors.solid.yellow.500}", + "boldHover": "{colors.solid.yellow.600}", + "deep": "{colors.solid.yellow.950}" + }, + "danger": { + "subtle": "{colors.solid.red.50}", + "subtleHover": "{colors.solid.red.100}", + "bold": "{colors.solid.red.500}", + "boldHover": "{colors.solid.red.600}", + "deep": "{colors.solid.red.950}" + }, + "neutral": { + "subtle": "{colors.solid.zinc.50}", + "subtleHover": "{colors.solid.zinc.100}", + "bold": "{colors.solid.zinc.500}", + "boldHover": "{colors.solid.zinc.600}" + }, + "help": { + "subtle": "{colors.solid.purple.50}", + "subtleHover": "{colors.solid.purple.100}", + "bold": "{colors.solid.purple.500}", + "boldHover": "{colors.solid.purple.600}", + "deep": "{colors.solid.purple.950}" + }, + "selected": { + "default": "{colors.solid.green.500}", + "hover": "{colors.solid.green.600}" + }, + "disabled": "{colors.solid.zinc.200}", + "scrim": { + "default": "{colors.alpha.black.400}", + "modal": "{colors.alpha.black.300}" + }, + "translucent": { + "light": { + "subtle": "{colors.alpha.white.100}", + "default": "{colors.alpha.white.200}", + "strong": "{colors.alpha.white.500}" + }, + "dark": { + "default": "{colors.alpha.black.500}" + } + }, + "transparent": "rgba(255, 255, 255, 0.0001)" + }, + "text": { + "default": "{colors.solid.zinc.900}", + "subtle": "{colors.solid.zinc.600}", + "muted": "{colors.solid.zinc.500}", + "placeholder": "{colors.solid.zinc.500}", + "disabled": "{colors.solid.zinc.300}", + "onBold": "{colors.alpha.white.1000}", + "staticDark": "{colors.solid.zinc.900}", + "staticLight": "{colors.alpha.white.1000}", + "brand": "{colors.solid.green.600}", + "link": "{colors.solid.green.600}", + "linkHover": "{colors.solid.green.700}", + "success": "{colors.solid.green.700}", + "info": "{colors.solid.blue.600}", + "warning": "{colors.solid.yellow.600}", + "danger": "{colors.solid.red.600}", + "neutral": "{colors.solid.zinc.600}", + "help": "{colors.solid.purple.600}", + "successStrong": "{colors.solid.green.900}", + "infoStrong": "{colors.solid.blue.900}", + "warningStrong": "{colors.solid.yellow.900}", + "dangerStrong": "{colors.solid.red.900}", + "helpStrong": "{colors.solid.purple.900}", + "hover": { + "default": "{colors.solid.zinc.700}", + "subtle": "{colors.solid.zinc.400}", + "muted": "{colors.solid.zinc.300}", + "brand": "{colors.solid.green.700}" + } + }, + "border": { + "subtle": "{colors.solid.zinc.200}", + "default": "{colors.solid.zinc.300}", + "strong": "{colors.solid.zinc.900}", + "disabled": "{colors.solid.zinc.200}", + "brand": "{colors.solid.green.600}", + "success": "{colors.solid.green.400}", + "info": "{colors.solid.blue.400}", + "warning": "{colors.solid.yellow.400}", + "danger": "{colors.solid.red.400}", + "neutral": "{colors.solid.zinc.400}", + "help": "{colors.solid.purple.400}", + "inverse": "{colors.solid.zinc.800}", + "successSubtle": "{colors.solid.green.300}", + "infoSubtle": "{colors.solid.blue.300}", + "warningSubtle": "{colors.solid.yellow.300}", + "dangerSubtle": "{colors.solid.red.300}", + "helpSubtle": "{colors.solid.purple.300}" + }, + "icon": { + "default": "{colors.solid.zinc.950}", + "subtle": "{colors.solid.zinc.500}", + "disabled": "{colors.solid.zinc.300}", + "onBold": "{colors.alpha.white.1000}", + "brand": "{colors.solid.green.600}", + "success": "{colors.solid.green.600}", + "info": "{colors.solid.blue.600}", + "warning": "{colors.solid.yellow.600}", + "danger": "{colors.solid.red.600}", + "neutral": "{colors.solid.zinc.600}", + "help": "{colors.solid.purple.600}" + }, + "focusRing": { + "default": "{colors.solid.green.500}", + "invalid": "{colors.solid.red.200}", + "success": "{colors.solid.green.200}", + "warning": "{colors.solid.yellow.200}", + "info": "{colors.solid.blue.200}", + "help": "{colors.solid.purple.200}", + "shadow": "{shadow.200}" + } + }, + "dark": { + "background": { + "surface": { + "ground": "{colors.solid.zinc.950}", + "section": "{colors.solid.zinc.900}", + "raised": "{colors.solid.zinc.900}", + "overlay": "{colors.solid.zinc.900}", + "sunken": "{colors.solid.zinc.950}", + "canvas": "{colors.alpha.black.1000}", + "inverse": "{colors.solid.zinc.200}", + "inverseStrong": "{colors.solid.zinc.50}", + "hover": { + "section": "{colors.solid.zinc.800}", + "raised": "{colors.solid.zinc.800}" + } + }, + "brand": { + "subtle": "{colors.solid.green.950}", + "subtleHover": "{colors.solid.green.900}", + "bold": "{colors.solid.green.500}", + "boldHover": "{colors.solid.green.400}", + "boldActive": "{colors.solid.green.300}" + }, + "success": { + "subtle": "{colors.solid.green.950}", + "subtleHover": "{colors.solid.green.900}", + "indicator": "{colors.solid.green.400}", + "bold": "{colors.solid.green.500}", + "boldHover": "{colors.solid.green.400}", + "deep": "{colors.solid.green.50}" + }, + "info": { + "subtle": "{colors.solid.blue.950}", + "subtleHover": "{colors.solid.blue.900}", + "bold": "{colors.solid.blue.500}", + "boldHover": "{colors.solid.blue.400}", + "deep": "{colors.solid.blue.50}" + }, + "warning": { + "subtle": "{colors.solid.yellow.950}", + "subtleHover": "{colors.solid.yellow.900}", + "bold": "{colors.solid.yellow.500}", + "boldHover": "{colors.solid.yellow.400}", + "deep": "{colors.solid.yellow.50}" + }, + "danger": { + "subtle": "{colors.solid.red.950}", + "subtleHover": "{colors.solid.red.900}", + "bold": "{colors.solid.red.500}", + "boldHover": "{colors.solid.red.400}", + "deep": "{colors.solid.red.50}" + }, + "neutral": { + "subtle": "{colors.solid.zinc.950}", + "subtleHover": "{colors.solid.zinc.900}", + "bold": "{colors.solid.zinc.500}", + "boldHover": "{colors.solid.zinc.400}" + }, + "help": { + "subtle": "{colors.solid.purple.950}", + "subtleHover": "{colors.solid.purple.900}", + "bold": "{colors.solid.purple.500}", + "boldHover": "{colors.solid.purple.400}", + "deep": "{colors.solid.purple.50}" + }, + "selected": { + "default": "{colors.solid.green.500}", + "hover": "{colors.solid.green.600}" + }, + "disabled": "{colors.solid.zinc.800}", + "scrim": { + "default": "{colors.alpha.black.600}", + "modal": "{colors.alpha.black.300}" + }, + "translucent": { + "light": { + "subtle": "{colors.alpha.white.100}", + "default": "{colors.alpha.white.200}", + "strong": "{colors.alpha.white.500}" + }, + "dark": { + "default": "{colors.alpha.black.500}" + } + }, + "transparent": "rgba(0, 0, 0, 0.0001)" + }, + "text": { + "default": "{colors.alpha.white.1000}", + "subtle": "{colors.solid.zinc.400}", + "muted": "{colors.solid.zinc.500}", + "placeholder": "{colors.solid.zinc.500}", + "disabled": "{colors.solid.zinc.700}", + "onBold": "{colors.solid.zinc.900}", + "staticDark": "{colors.solid.zinc.900}", + "staticLight": "{colors.alpha.white.1000}", + "brand": "{colors.solid.green.400}", + "link": "{colors.solid.green.400}", + "linkHover": "{colors.solid.green.300}", + "success": "{colors.solid.green.400}", + "info": "{colors.solid.blue.400}", + "warning": "{colors.solid.yellow.400}", + "danger": "{colors.solid.red.400}", + "neutral": "{colors.solid.zinc.400}", + "help": "{colors.solid.purple.400}", + "successStrong": "{colors.solid.green.100}", + "infoStrong": "{colors.solid.blue.100}", + "warningStrong": "{colors.solid.yellow.100}", + "dangerStrong": "{colors.solid.red.100}", + "helpStrong": "{colors.solid.purple.100}", + "hover": { + "default": "{colors.solid.zinc.300}", + "subtle": "{colors.solid.zinc.600}", + "muted": "{colors.solid.zinc.700}", + "brand": "{colors.solid.green.300}" + } + }, + "border": { + "subtle": "{colors.solid.zinc.800}", + "default": "{colors.solid.zinc.700}", + "strong": "{colors.solid.zinc.100}", + "disabled": "{colors.solid.zinc.800}", + "brand": "{colors.solid.green.400}", + "success": "{colors.solid.green.600}", + "info": "{colors.solid.blue.600}", + "warning": "{colors.solid.yellow.600}", + "danger": "{colors.solid.red.600}", + "neutral": "{colors.solid.zinc.600}", + "help": "{colors.solid.purple.600}", + "inverse": "{colors.solid.zinc.200}", + "successSubtle": "{colors.solid.green.700}", + "infoSubtle": "{colors.solid.blue.700}", + "warningSubtle": "{colors.solid.yellow.700}", + "dangerSubtle": "{colors.solid.red.700}", + "helpSubtle": "{colors.solid.purple.700}" + }, + "icon": { + "default": "{colors.alpha.white.1000}", + "subtle": "{colors.solid.zinc.500}", + "disabled": "{colors.solid.zinc.700}", + "onBold": "{colors.solid.zinc.900}", + "brand": "{colors.solid.green.400}", + "success": "{colors.solid.green.400}", + "info": "{colors.solid.blue.400}", + "warning": "{colors.solid.yellow.400}", + "danger": "{colors.solid.red.400}", + "neutral": "{colors.solid.zinc.400}", + "help": "{colors.solid.purple.400}" + }, + "focusRing": { + "default": "{colors.solid.green.500}", + "invalid": "{colors.solid.red.800}", + "success": "{colors.solid.green.800}", + "warning": "{colors.solid.yellow.800}", + "info": "{colors.solid.blue.800}", + "help": "{colors.solid.purple.800}", + "shadow": "{shadow.200}" + } + } + }, + "dimension": { + "space": { + "none": "{size.none}", + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.3x}", + "400": "{size.4x}", + "500": "{size.5x}", + "600": "{size.6x}", + "700": "{size.7x}", + "800": "{size.8x}", + "900": "{size.10x}" + }, + "size": { + "100": "{size.min}", + "150": "{size.1x}", + "200": "{size.2x}", + "250": "{size.3x}", + "300": "{size.4x}", + "350": "{size.5x}", + "400": "{size.6x}", + "450": "{size.7x}", + "500": "{size.8x}", + "550": "{size.9x}", + "600": "{size.10x}", + "700": "{size.12x}", + "750": "{size.14x}", + "800": "{size.16x}", + "900": "{size.20x}" + }, + "radius": { + "none": "{size.none}", + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.3x}", + "400": "{size.4x}", + "500": "{size.6x}", + "max": "{size.pill}" + }, + "borderWidth": { + "none": "{size.none}", + "100": "{size.min}", + "200": "{size.2px}", + "300": "{size.1x}" + }, + "focusRing": { + "width": "{size.1x}", + "offset": "{size.none}", + "style": "none" + }, + "duration": { + "100": "{transition.duration.100}", + "200": "{transition.duration.200}", + "300": "{transition.duration.300}", + "400": "{transition.duration.400}", + "500": "{transition.duration.500}" + }, + "overlayWidth": { + "narrow": "{size.60x}", + "sm": "{size.80x}", + "base": "{size.100x}", + "lg": "{size.120x}", + "xlg": "{size.128x}" + } + }, + "typography": { + "fontFamily": { + "heading": "{fonts.fontFamily.heading}", + "base": "{fonts.fontFamily.base}" + }, + "fontWeight": { + "regular": "{fonts.fontWeight.regular}", + "medium": "{fonts.fontWeight.medium}", + "demibold": "{fonts.fontWeight.demibold}", + "bold": "{fonts.fontWeight.bold}" + }, + "fontSize": { + "100": "{fonts.fontSize.100}", + "200": "{fonts.fontSize.200}", + "300": "{fonts.fontSize.300}", + "400": "{fonts.fontSize.400}", + "500": "{fonts.fontSize.500}", + "600": "{fonts.fontSize.600}", + "650": "{fonts.fontSize.650}", + "700": "{fonts.fontSize.700}", + "750": "{fonts.fontSize.750}", + "800": "{fonts.fontSize.800}", + "900": "{fonts.fontSize.900}", + "1000": "{fonts.fontSize.1000}" + }, + "lineHeight": { + "100": "{fonts.lineHeight.100}", + "150": "{fonts.lineHeight.150}", + "200": "{fonts.lineHeight.200}", + "250": "{fonts.lineHeight.250}", + "300": "{fonts.lineHeight.300}", + "350": "{fonts.lineHeight.350}", + "400": "{fonts.lineHeight.400}", + "450": "{fonts.lineHeight.450}", + "500": "{fonts.lineHeight.500}", + "550": "{fonts.lineHeight.550}", + "600": "{fonts.lineHeight.600}", + "700": "{fonts.lineHeight.700}", + "800": "{fonts.lineHeight.800}", + "850": "{fonts.lineHeight.850}", + "900": "{fonts.lineHeight.900}", + "1000": "{fonts.lineHeight.1000}", + "auto": "{fonts.lineHeight.auto}" + }, + "display": { + "lg": { + "fontFamily": "{fonts.fontFamily.heading}", + "fontSize": "{fonts.fontSize.1000}", + "fontWeight": "{fonts.fontWeight.bold}", + "lineHeight": "{fonts.lineHeight.auto}" + }, + "md": { + "fontFamily": "{fonts.fontFamily.heading}", + "fontSize": "{fonts.fontSize.900}", + "fontWeight": "{fonts.fontWeight.bold}", + "lineHeight": "{fonts.lineHeight.auto}" + }, + "sm": { + "fontFamily": "{fonts.fontFamily.heading}", + "fontSize": "{fonts.fontSize.800}", + "fontWeight": "{fonts.fontWeight.bold}", + "lineHeight": "{fonts.lineHeight.auto}" + } + }, + "heading": { + "xl": { + "fontFamily": "{fonts.fontFamily.heading}", + "fontSize": "{fonts.fontSize.750}", + "fontWeight": "{fonts.fontWeight.bold}", + "lineHeight": "{fonts.lineHeight.auto}" + }, + "lg": { + "fontFamily": "{fonts.fontFamily.heading}", + "fontSize": "{fonts.fontSize.700}", + "fontWeight": "{fonts.fontWeight.demibold}", + "lineHeight": "{fonts.lineHeight.900}" + }, + "md": { + "fontFamily": "{fonts.fontFamily.heading}", + "fontSize": "{fonts.fontSize.600}", + "fontWeight": "{fonts.fontWeight.demibold}", + "lineHeight": "{fonts.lineHeight.700}" + }, + "sm": { + "fontFamily": "{fonts.fontFamily.heading}", + "fontSize": "{fonts.fontSize.500}", + "fontWeight": "{fonts.fontWeight.demibold}", + "lineHeight": "{fonts.lineHeight.600}" + } + }, + "body": { + "lg": { + "fontFamily": "{fonts.fontFamily.base}", + "fontSize": "{fonts.fontSize.400}", + "fontWeight": "{fonts.fontWeight.regular}", + "lineHeight": "{fonts.lineHeight.550}" + }, + "md": { + "fontFamily": "{fonts.fontFamily.base}", + "fontSize": "{fonts.fontSize.300}", + "fontWeight": "{fonts.fontWeight.regular}", + "lineHeight": "{fonts.lineHeight.500}" + }, + "sm": { + "fontFamily": "{fonts.fontFamily.base}", + "fontSize": "{fonts.fontSize.200}", + "fontWeight": "{fonts.fontWeight.regular}", + "lineHeight": "{fonts.lineHeight.400}" + } + }, + "label": { + "lg": { + "fontFamily": "{fonts.fontFamily.base}", + "fontSize": "{fonts.fontSize.300}", + "fontWeight": "{fonts.fontWeight.medium}", + "lineHeight": "{fonts.lineHeight.500}" + }, + "md": { + "fontFamily": "{fonts.fontFamily.base}", + "fontSize": "{fonts.fontSize.200}", + "fontWeight": "{fonts.fontWeight.medium}", + "lineHeight": "{fonts.lineHeight.400}" + }, + "sm": { + "fontFamily": "{fonts.fontFamily.base}", + "fontSize": "{fonts.fontSize.100}", + "fontWeight": "{fonts.fontWeight.medium}", + "lineHeight": "{fonts.lineHeight.300}" + } + }, + "caption": { + "fontFamily": "{fonts.fontFamily.base}", + "fontSize": "{fonts.fontSize.100}", + "fontWeight": "{fonts.fontWeight.regular}", + "lineHeight": "{fonts.lineHeight.250}" + } + }, + "shadow": { + "none": "{shadows.none}", + "100": "{shadows.100}", + "200": "{shadows.200}", + "300": "{shadows.300}", + "400": "{shadows.400}", + "500": "{shadows.500}" + } + }, + "components": { + "accordion": { + "extend": { + "extHeader": { + "iconSize": "{dimension.size.350}", + "gap": "{dimension.space.200}" + } + }, + "colorScheme": { + "light": { + "header": { + "background": "{color.background.transparent}", + "hoverBackground": "{color.background.transparent}", + "activeBackground": "{color.background.transparent}", + "activeHoverBackground": "{color.background.transparent}" + } + } + }, + "header": { + "color": "{color.text.default}", + "hoverColor": "{color.text.hover.default}", + "activeColor": "{color.text.default}", + "activeHoverColor": "{color.text.hover.default}", + "borderColor": "{color.background.transparent}", + "padding": "{dimension.space.400} 0 {dimension.space.400} 0", + "fontWeight": "{typography.fontWeight.bold}", + "borderRadius": "{dimension.radius.none}", + "borderWidth": "{dimension.borderWidth.none}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "inset {shadow.200}" + }, + "toggleIcon": { + "color": "{color.text.default}", + "hoverColor": "{color.text.hover.default}", + "activeColor": "{color.text.default}", + "activeHoverColor": "{color.text.hover.default}" + }, + "last": { + "bottomBorderRadius": "{dimension.radius.none}", + "activeBottomBorderRadius": "{dimension.radius.none}" + }, + "first": { + "borderWidth": "{dimension.borderWidth.none}", + "topBorderRadius": "{dimension.radius.none}" + } + }, + "root": { + "transitionDuration": "{dimension.duration.200}" + }, + "panel": { + "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.none}", + "borderColor": "{color.border.default}" + }, + "content": { + "borderWidth": "{dimension.size.100} {dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.none}", + "borderColor": "{color.background.transparent}", + "background": "{color.background.transparent}", + "color": "{color.text.default}", + "padding": "0 {dimension.space.600} {dimension.space.400} {dimension.space.600}" + } + }, + "autocomplete": { + "extend": { + "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}" + }, + "dropdown": { + "background": "{color.background.surface.ground}", + "hoverBackground": "{color.background.surface.ground}", + "activeBackground": "{color.background.surface.ground}", + "color": "{color.icon.default}", + "hoverColor": "{color.icon.default}", + "activeColor": "{color.icon.default}" + } + } + }, + "root": { + "background": "{color.background.surface.ground}", + "disabledBackground": "{color.background.disabled}", + "filledBackground": "{color.background.surface.ground}", + "filledHoverBackground": "{color.background.surface.ground}", + "filledFocusBackground": "{color.background.surface.ground}", + "borderColor": "{color.border.default}", + "hoverBorderColor": "{color.border.brand}", + "focusBorderColor": "{color.border.brand}", + "invalidBorderColor": "{color.border.danger}", + "color": "{color.icon.default}", + "disabledColor": "{color.text.muted}", + "placeholderColor": "{color.text.muted}", + "invalidPlaceholderColor": "{color.text.danger}", + "shadow": "0", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.300}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "0" + } + }, + "overlay": { + "background": "{color.background.surface.raised}", + "borderColor": "{color.border.subtle}", + "borderRadius": "{dimension.radius.300}", + "color": "{color.text.default}", + "shadow": "{shadow.200}" + }, + "list": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + }, + "option": { + "focusBackground": "{color.background.surface.hover.section}", + "selectedBackground": "{color.border.strong}", + "selectedFocusBackground": "{color.text.hover.default}", + "color": "{color.text.default}", + "focusColor": "{color.text.default}", + "selectedColor": "{color.text.onBold}", + "selectedFocusColor": "{color.text.onBold}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}" + }, + "optionGroup": { + "background": "{color.background.surface.raised}", + "color": "{color.text.muted}", + "fontWeight": "{typography.fontWeight.demibold}", + "padding": "{dimension.space.200} {dimension.space.300}" + }, + "dropdown": { + "width": "{dimension.size.600}", + "borderColor": "{color.border.default}", + "hoverBorderColor": "{color.border.brand}", + "activeBorderColor": "{color.border.brand}", + "borderRadius": "{dimension.radius.300}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "0" + }, + "sm": { + "width": "{dimension.size.500}" + }, + "lg": { + "width": "{dimension.size.700}" + } + }, + "chip": { + "borderRadius": "{chip.root.borderRadius}" + }, + "emptyMessage": { + "padding": "{dimension.space.200} {dimension.space.300}" + } + }, + "avatar": { + "extend": { + "borderColor": "{color.border.default}", + "circle": { + "borderRadius": "{dimension.radius.max}" + } + }, + "root": { + "width": "{dimension.size.500}", + "height": "{dimension.size.500}", + "fontSize": "{typography.fontSize.200}", + "color": "{color.text.staticDark}", + "background": "{color.background.brand.bold}", + "borderRadius": "{dimension.radius.300}" + }, + "icon": { + "size": "{dimension.size.300}" + }, + "group": { + "borderColor": "{color.background.surface.raised}", + "offset": "-{dimension.space.300}" + }, + "lg": { + "width": "{dimension.size.600}", + "height": "{dimension.size.600}", + "fontSize": "{typography.fontSize.300}", + "icon": { + "size": "{dimension.size.300}" + }, + "group": { + "offset": "-{dimension.space.300}" + } + }, + "xl": { + "width": "{dimension.size.750}", + "height": "{dimension.size.750}", + "icon": { + "size": "{dimension.size.400}" + }, + "group": { + "offset": "-{dimension.space.600}" + }, + "fontSize": "{typography.fontSize.500}" + } + }, + "badge": { + "extend": { + "extDot": { + "success": { + "background": "{color.background.success.indicator}" + }, + "info": { + "background": "{color.border.info}" + }, + "warn": { + "background": "{color.border.warning}" + }, + "danger": { + "background": "{color.border.danger}" + }, + "lg": { + "size": "{dimension.size.250}" + }, + "xlg": { + "size": "{dimension.size.300}" + } + }, + "ext": { + "padding": "0rem" + } + }, + "colorScheme": { + "light": { + "primary": { + "color": "{color.text.staticDark}", + "background": "{color.background.brand.bold}" + }, + "secondary": { + "color": "{color.text.onBold}", + "background": "{color.border.strong}" + }, + "success": { + "color": "{color.text.successStrong}", + "background": "{color.border.successSubtle}" + }, + "info": { + "color": "{color.text.infoStrong}", + "background": "{color.border.infoSubtle}" + }, + "warn": { + "color": "{color.text.warningStrong}", + "background": "{color.border.warningSubtle}" + }, + "danger": { + "color": "{color.text.dangerStrong}", + "background": "{color.border.dangerSubtle}" + } + } + }, + "root": { + "borderRadius": "{dimension.size.200}", + "padding": "{dimension.space.200}", + "fontSize": "{typography.fontSize.100}", + "fontWeight": "{typography.fontWeight.regular}", + "minWidth": "{dimension.size.400}", + "height": "{dimension.size.400}" + }, + "dot": { + "size": "{dimension.size.200}" + }, + "sm": { + "fontSize": "{typography.fontSize.100}", + "minWidth": "0rem", + "height": "0rem" + }, + "lg": { + "fontSize": "{typography.fontSize.100}", + "minWidth": "{dimension.size.450}", + "height": "{dimension.size.450}" + }, + "xl": { + "fontSize": "{typography.fontSize.100}", + "minWidth": "{dimension.size.500}", + "height": "{dimension.size.500}" + } + }, + "breadcrumb": { + "extend": { + "hoverBackground": "{color.background.neutral.subtleHover}", + "iconSize": "{dimension.size.350}", + "extItem": { + "padding": "{dimension.space.100}" + } + }, + "root": { + "padding": "0rem", + "background": "{color.background.transparent}", + "gap": "0rem", + "transitionDuration": "{dimension.duration.200}" + }, + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + }, + "item": { + "color": "{color.text.default}", + "hoverColor": "{color.text.hover.default}", + "borderRadius": "{dimension.radius.100}", + "gap": "{dimension.space.200}", + "icon": { + "color": "{color.text.default}", + "hoverColor": "{color.text.hover.default}" + } + }, + "separator": { + "color": "{color.text.default}" + } + }, + "button": { + "extend": { + "disabledBackground": "{color.background.disabled}", + "extOutlined": { + "danger": { + "focusBackground": "{color.background.transparent}" + }, + "warn": { + "focusBackground": "{color.background.transparent}" + }, + "info": { + "focusBackground": "{color.background.transparent}" + }, + "help": { + "focusBackground": "{color.background.transparent}" + }, + "success": { + "focusBackground": "{color.background.transparent}" + } + }, + "disabledColor": "{color.text.muted}", + "extText": { + "danger": { + "focusBackground": "{color.background.transparent}" + }, + "warn": { + "focusBackground": "{color.background.transparent}" + }, + "info": { + "focusBackground": "{color.background.transparent}" + }, + "help": { + "focusBackground": "{color.background.transparent}" + }, + "success": { + "focusBackground": "{color.background.transparent}" + } + }, + "extLink": { + "background": "{color.background.transparent}", + "colorHover": "{color.text.hover.default}", + "paddingX": "0rem", + "paddingY": "{dimension.space.100}", + "sm": { + "iconOnlyWidth": "{dimension.size.300}" + }, + "base": { + "iconOnlyWidth": "{dimension.size.400}" + }, + "lg": { + "iconOnlyWidth": "{dimension.size.450}" + }, + "xlg": { + "iconOnlyWidth": "{dimension.size.500}" + } + }, + "extSm": { + "borderRadius": "{dimension.radius.300}", + "gap": "{dimension.space.200}" + }, + "extLg": { + "borderRadius": "{dimension.radius.400}", + "gap": "{dimension.space.300}", + "height": "{dimension.size.750}" + }, + "extXlg": { + "borderRadius": "{dimension.radius.400}", + "gap": "{dimension.space.300}", + "iconOnlyWidth": "{dimension.size.800}", + "paddingX": "{dimension.space.600}", + "paddingY": "{dimension.space.500}", + "height": "{dimension.size.800}" + }, + "borderWidth": "{dimension.size.100}", + "iconSize": { + "sm": "{dimension.size.300}", + "md": "{dimension.size.350}", + "lg": "{dimension.size.400}" + } + }, + "colorScheme": { + "light": { + "root": { + "primary": { + "background": "{color.background.brand.bold}", + "hoverBackground": "{color.text.brand}", + "activeBackground": "{color.text.linkHover}", + "borderColor": "{color.background.transparent}", + "hoverBorderColor": "{color.background.transparent}", + "activeBorderColor": "{color.background.transparent}", + "color": "{color.text.staticDark}", + "hoverColor": "{color.text.staticDark}", + "activeColor": "{color.text.staticDark}", + "focusRing": { + "color": "{color.focusRing.success}", + "shadow": "{shadow.200}" + } + }, + "secondary": { + "background": "{color.border.strong}", + "hoverBackground": "{color.background.surface.inverse}", + "activeBackground": "{color.text.hover.default}", + "borderColor": "{color.background.transparent}", + "hoverBorderColor": "{color.background.transparent}", + "activeBorderColor": "{color.background.transparent}", + "color": "{color.text.onBold}", + "hoverColor": "{color.text.onBold}", + "activeColor": "{color.text.onBold}", + "focusRing": { + "color": "{color.focusRing.success}", + "shadow": "{shadow.200}" + } + }, + "contrast": { + "background": "{color.background.disabled}", + "hoverBackground": "{color.text.disabled}", + "activeBackground": "{color.text.hover.subtle}", + "borderColor": "{color.background.transparent}", + "hoverBorderColor": "{color.background.transparent}", + "activeBorderColor": "{color.background.transparent}", + "color": "{color.text.default}", + "hoverColor": "{color.text.default}", + "activeColor": "{color.text.default}", + "focusRing": { + "color": "{color.focusRing.success}", + "shadow": "{shadow.200}" + } + }, + "info": { + "background": "{color.border.infoSubtle}", + "hoverBackground": "{color.border.info}", + "activeBackground": "{color.background.info.bold}", + "borderColor": "{color.background.transparent}", + "hoverBorderColor": "{color.background.transparent}", + "activeBorderColor": "{color.background.transparent}", + "color": "{color.text.infoStrong}", + "hoverColor": "{color.background.info.deep}", + "activeColor": "{color.text.infoStrong}" + }, + "success": { + "background": "{color.border.successSubtle}", + "hoverBackground": "{color.border.success}", + "activeBackground": "{color.background.brand.bold}", + "borderColor": "{color.background.transparent}", + "hoverBorderColor": "{color.background.transparent}", + "activeBorderColor": "{color.background.transparent}", + "color": "{color.text.successStrong}", + "hoverColor": "{color.background.success.deep}", + "activeColor": "{color.text.successStrong}" + }, + "warn": { + "background": "{color.border.warningSubtle}", + "hoverBackground": "{color.border.warning}", + "activeBackground": "{color.background.warning.bold}", + "borderColor": "{color.background.transparent}", + "hoverBorderColor": "{color.background.transparent}", + "activeBorderColor": "{color.background.transparent}", + "color": "{color.text.warningStrong}", + "hoverColor": "{color.background.warning.deep}", + "activeColor": "{color.text.warningStrong}" + }, + "help": { + "background": "{color.border.helpSubtle}", + "hoverBackground": "{color.border.help}", + "activeBackground": "{color.background.help.bold}", + "borderColor": "{color.background.transparent}", + "hoverBorderColor": "{color.background.transparent}", + "activeBorderColor": "{color.background.transparent}", + "color": "{color.text.helpStrong}", + "hoverColor": "{color.background.help.deep}", + "activeColor": "{color.text.helpStrong}" + }, + "danger": { + "background": "{color.border.dangerSubtle}", + "hoverBackground": "{color.border.danger}", + "activeBackground": "{color.background.danger.bold}", + "borderColor": "{color.background.transparent}", + "hoverBorderColor": "{color.background.transparent}", + "activeBorderColor": "{color.background.transparent}", + "color": "{color.text.dangerStrong}", + "hoverColor": "{color.background.danger.deep}", + "activeColor": "{color.text.dangerStrong}" + } + }, + "outlined": { + "primary": { + "hoverBackground": "{color.background.brand.subtle}", + "activeBackground": "{color.background.brand.subtleHover}", + "borderColor": "{color.focusRing.success}", + "color": "{color.background.brand.bold}" + }, + "success": { + "hoverBackground": "{color.background.brand.subtleHover}", + "activeBackground": "{color.focusRing.success}", + "borderColor": "{color.background.brand.boldHover}", + "color": "{color.background.brand.boldHover}" + }, + "info": { + "hoverBackground": "{color.background.info.subtleHover}", + "activeBackground": "{color.focusRing.info}", + "borderColor": "{color.background.info.boldHover}", + "color": "{color.background.info.boldHover}" + }, + "warn": { + "hoverBackground": "{color.background.warning.subtleHover}", + "activeBackground": "{color.focusRing.warning}", + "borderColor": "{color.background.warning.boldHover}", + "color": "{color.background.warning.boldHover}" + }, + "help": { + "hoverBackground": "{color.background.help.subtleHover}", + "activeBackground": "{color.focusRing.help}", + "borderColor": "{color.background.help.boldHover}", + "color": "{color.background.help.boldHover}" + }, + "danger": { + "hoverBackground": "{color.background.danger.subtleHover}", + "activeBackground": "{color.focusRing.invalid}", + "borderColor": "{color.background.danger.boldHover}", + "color": "{color.background.danger.boldHover}" + } + }, + "text": { + "primary": { + "hoverBackground": "{color.background.neutral.subtleHover}", + "activeBackground": "{color.background.disabled}", + "color": "{color.text.default}" + }, + "success": { + "hoverBackground": "{color.background.brand.subtleHover}", + "activeBackground": "{color.focusRing.success}", + "color": "{color.background.brand.boldHover}" + }, + "info": { + "hoverBackground": "{color.background.info.subtleHover}", + "activeBackground": "{color.focusRing.info}", + "color": "{color.background.info.boldHover}" + }, + "warn": { + "hoverBackground": "{color.background.warning.subtleHover}", + "activeBackground": "{color.focusRing.warning}", + "color": "{color.background.warning.boldHover}" + }, + "help": { + "hoverBackground": "{color.background.help.subtleHover}", + "activeBackground": "{color.focusRing.help}", + "color": "{color.background.help.boldHover}" + }, + "danger": { + "hoverBackground": "{color.background.danger.subtleHover}", + "activeBackground": "{color.focusRing.invalid}", + "color": "{color.background.danger.boldHover}" + } + }, + "link": { + "color": "{color.text.default}", + "hoverColor": "{color.text.hover.default}", + "activeColor": "{color.text.muted}" + } + }, + "dark": { + "root": { + "primary": { + "background": "{color.background.brand.bold}", + "hoverBackground": "{color.text.brand}", + "activeBackground": "{color.text.linkHover}", + "borderColor": "{color.background.transparent}", + "hoverBorderColor": "{color.background.transparent}", + "activeBorderColor": "{color.background.transparent}", + "color": "{color.text.staticDark}", + "hoverColor": "{color.text.staticDark}", + "activeColor": "{color.text.staticDark}", + "focusRing": { + "color": "{color.focusRing.success}", + "shadow": "{shadow.200}" + } + }, + "secondary": { + "background": "{color.background.disabled}", + "hoverBackground": "{color.text.disabled}", + "activeBackground": "{color.text.hover.subtle}", + "borderColor": "{color.background.transparent}", + "hoverBorderColor": "{color.background.transparent}", + "activeBorderColor": "{color.background.transparent}", + "color": "{color.background.surface.inverseStrong}", + "hoverColor": "{color.background.surface.inverseStrong}", + "activeColor": "{color.background.surface.inverseStrong}", + "focusRing": { + "color": "{color.focusRing.success}", + "shadow": "{shadow.200}" + } + }, + "contrast": { + "background": "{color.background.surface.inverseStrong}", + "hoverBackground": "{color.border.strong}", + "activeBackground": "{color.background.surface.inverse}", + "borderColor": "{color.background.transparent}", + "hoverBorderColor": "{color.background.transparent}", + "activeBorderColor": "{color.background.transparent}", + "color": "{color.background.surface.canvas}", + "hoverColor": "{color.background.surface.canvas}", + "activeColor": "{color.background.surface.canvas}", + "focusRing": { + "color": "{color.focusRing.success}", + "shadow": "{shadow.200}" + } + }, + "info": { + "background": "{color.background.info.bold}", + "hoverBackground": "{color.border.info}", + "activeBackground": "{color.border.infoSubtle}", + "borderColor": "{color.background.transparent}", + "hoverBorderColor": "{color.background.transparent}", + "activeBorderColor": "{color.background.transparent}", + "color": "{color.text.staticDark}", + "hoverColor": "{color.text.staticDark}", + "activeColor": "{color.text.staticDark}" + }, + "success": { + "background": "{color.background.brand.bold}", + "hoverBackground": "{color.border.success}", + "activeBackground": "{color.border.successSubtle}", + "borderColor": "{color.background.transparent}", + "hoverBorderColor": "{color.background.transparent}", + "activeBorderColor": "{color.background.transparent}", + "color": "{color.text.staticDark}", + "hoverColor": "{color.text.staticDark}", + "activeColor": "{color.text.staticDark}" + }, + "warn": { + "background": "{color.background.warning.bold}", + "hoverBackground": "{color.border.warning}", + "activeBackground": "{color.border.warningSubtle}", + "borderColor": "{color.background.transparent}", + "hoverBorderColor": "{color.background.transparent}", + "activeBorderColor": "{color.background.transparent}", + "color": "{color.text.staticDark}", + "hoverColor": "{color.text.staticDark}", + "activeColor": "{color.text.staticDark}" + }, + "help": { + "background": "{color.background.help.bold}", + "hoverBackground": "{color.border.help}", + "activeBackground": "{color.border.helpSubtle}", + "borderColor": "{color.background.transparent}", + "hoverBorderColor": "{color.background.transparent}", + "activeBorderColor": "{color.background.transparent}", + "color": "{color.text.staticDark}", + "hoverColor": "{color.text.staticDark}", + "activeColor": "{color.text.staticDark}" + }, + "danger": { + "background": "{color.background.danger.bold}", + "hoverBackground": "{color.border.danger}", + "activeBackground": "{color.border.dangerSubtle}", + "borderColor": "{color.background.transparent}", + "hoverBorderColor": "{color.background.transparent}", + "activeBorderColor": "{color.background.transparent}", + "color": "{color.text.staticDark}", + "hoverColor": "{color.text.staticDark}", + "activeColor": "{color.text.staticDark}" + } + }, + "outlined": { + "primary": { + "hoverBackground": "{color.background.brand.subtle}", + "activeBackground": "{color.background.brand.subtleHover}", + "borderColor": "{color.focusRing.success}", + "color": "{color.background.brand.bold}" + }, + "success": { + "hoverBackground": "{color.background.success.deep}", + "activeBackground": "{color.text.successStrong}", + "borderColor": "{color.background.brand.bold}", + "color": "{color.background.brand.bold}" + }, + "info": { + "hoverBackground": "{color.background.info.deep}", + "activeBackground": "{color.text.infoStrong}", + "borderColor": "{color.background.info.bold}", + "color": "{color.background.info.bold}" + }, + "warn": { + "hoverBackground": "{color.background.warning.deep}", + "activeBackground": "{color.text.warningStrong}", + "borderColor": "{color.background.warning.bold}", + "color": "{color.background.warning.bold}" + }, + "help": { + "hoverBackground": "{color.background.help.deep}", + "activeBackground": "{color.text.helpStrong}", + "borderColor": "{color.background.help.bold}", + "color": "{color.background.help.bold}" + }, + "danger": { + "hoverBackground": "{color.background.danger.deep}", + "activeBackground": "{color.text.dangerStrong}", + "borderColor": "{color.background.danger.bold}", + "color": "{color.background.danger.bold}" + } + }, + "text": { + "primary": { + "hoverBackground": "{color.background.surface.inverse}", + "activeBackground": "{color.text.hover.default}", + "color": "{color.text.default}" + }, + "success": { + "hoverBackground": "{color.background.success.deep}", + "activeBackground": "{color.text.successStrong}", + "color": "{color.background.brand.bold}" + }, + "info": { + "hoverBackground": "{color.background.info.deep}", + "activeBackground": "{color.text.infoStrong}", + "color": "{color.background.info.bold}" + }, + "warn": { + "hoverBackground": "{color.background.warning.deep}", + "activeBackground": "{color.text.warningStrong}", + "color": "{color.background.warning.bold}" + }, + "help": { + "hoverBackground": "{color.background.help.deep}", + "activeBackground": "{color.text.helpStrong}", + "color": "{color.background.help.bold}" + }, + "danger": { + "hoverBackground": "{color.background.danger.deep}", + "activeBackground": "{color.text.dangerStrong}", + "color": "{color.background.danger.bold}" + } + }, + "link": { + "color": "{color.text.default}", + "hoverColor": "{color.text.hover.default}", + "activeColor": "{color.text.muted}" + } + } + }, + "root": { + "borderRadius": "{dimension.radius.300}", + "roundedBorderRadius": "{dimension.radius.max}", + "gap": "{dimension.space.200}", + "fontSize": "{typography.fontSize.200}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.200}", + "iconOnlyWidth": "{dimension.size.600}", + "raisedShadow": "none", + "badgeSize": "{dimension.size.300}", + "transitionDuration": "{dimension.duration.200}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "offset": "{dimension.focusRing.offset}" + }, + "sm": { + "fontSize": "{typography.fontSize.200}", + "iconOnlyWidth": "{dimension.size.500}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.200}" + }, + "lg": { + "fontSize": "{typography.fontSize.500}", + "iconOnlyWidth": "{dimension.size.750}", + "paddingX": "{dimension.space.600}", + "paddingY": "{dimension.space.400}" + }, + "label": { + "fontWeight": "{typography.fontWeight.demibold}" + } + } + }, + "card": { + "extend": { + "borderColor": "{color.border.subtle}", + "borderWidth": "{dimension.size.100}" + }, + "root": { + "background": "{color.background.surface.raised}", + "borderRadius": "{dimension.space.400}", + "color": "{color.text.default}" + }, + "body": { + "padding": "{dimension.space.400}", + "gap": "{dimension.space.400}" + }, + "caption": { + "gap": "{dimension.space.100}" + }, + "title": { + "fontSize": "{typography.fontSize.400}", + "fontWeight": "{typography.fontWeight.demibold}" + }, + "subtitle": { + "color": "{color.text.muted}" + } + }, + "carousel": { + "colorScheme": { + "light": { + "indicator": { + "background": "{color.text.disabled}", + "hoverBackground": "{color.text.hover.subtle}", + "activeBackground": "{color.border.strong}" + } + } + }, + "root": { + "transitionDuration": "{dimension.duration.200}" + }, + "content": { + "gap": "{dimension.space.200}" + }, + "indicatorList": { + "padding": "{dimension.space.400}", + "gap": "{dimension.space.200}" + }, + "indicator": { + "width": "{dimension.size.200}", + "height": "{dimension.size.200}", + "borderRadius": "{dimension.radius.500}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + } + }, + "checkbox": { + "root": { + "borderRadius": "{dimension.radius.200}", + "extend": { + "borderWidth": "{dimension.borderWidth.100}" + }, + "width": "{dimension.size.400}", + "height": "{dimension.size.400}", + "background": "{color.background.surface.ground}", + "checkedBackground": "{color.border.strong}", + "checkedHoverBackground": "{color.background.surface.inverse}", + "disabledBackground": "{color.background.disabled}", + "filledBackground": "{color.background.surface.ground}", + "borderColor": "{color.border.default}", + "hoverBorderColor": "{color.border.strong}", + "focusBorderColor": "{color.border.strong}", + "checkedBorderColor": "{color.border.strong}", + "checkedHoverBorderColor": "{color.background.surface.inverse}", + "checkedFocusBorderColor": "{color.background.brand.bold}", + "checkedDisabledBorderColor": "{color.border.default}", + "invalidBorderColor": "{color.border.danger}", + "shadow": "0", + "focusRing": { + "focusRing": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + }, + "sm": { + "width": "{dimension.size.200}", + "height": "{dimension.size.200}" + }, + "lg": { + "width": "{dimension.size.350}", + "height": "{dimension.size.350}" + }, + "transitionDuration": "{dimension.duration.200}" + }, + "icon": { + "size": "{dimension.size.300}", + "color": "{color.icon.default}", + "checkedColor": "{color.text.onBold}", + "checkedHoverColor": "{color.text.onBold}", + "disabledColor": "{color.text.muted}", + "sm": { + "size": "{dimension.size.250}" + }, + "lg": { + "size": "{dimension.size.350}" + } + } + }, + "chip": { + "extend": { + "borderColor": "{color.background.transparent}", + "borderWidth": "{dimension.size.100}" + }, + "root": { + "borderRadius": "{dimension.radius.200}", + "paddingX": "{dimension.space.200}", + "paddingY": "{dimension.space.100}", + "gap": "{dimension.space.200}", + "transitionDuration": "{dimension.duration.200}" + }, + "colorScheme": { + "light": { + "root": { + "background": "{color.background.disabled}", + "color": "{color.text.default}" + }, + "icon": { + "color": "{color.text.default}" + }, + "removeIcon": { + "color": "{color.text.default}" + } + } + }, + "image": { + "width": "0rem", + "height": "0rem" + }, + "icon": { + "size": "{dimension.size.300}" + }, + "removeIcon": { + "size": "{dimension.size.300}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + } + }, + "confirmdialog": { + "extend": { + "extIcon": { + "success": "{color.background.brand.bold}", + "info": "{color.background.info.bold}", + "help": "{color.background.help.bold}", + "warn": "{color.background.warning.bold}", + "danger": "{color.background.danger.bold}" + } + }, + "icon": { + "size": "{dimension.size.400}", + "color": "{color.text.default}" + }, + "content": { + "gap": "0rem" + } + }, + "confirmpopup": { + "root": { + "background": "{color.background.surface.raised}", + "color": "{color.text.default}", + "shadow": "{shadow.400}", + "gutter": "{dimension.space.300}", + "arrowOffset": "{dimension.space.500}" + }, + "content": { + "padding": "{dimension.space.300}", + "gap": "{dimension.space.400}" + }, + "icon": { + "size": "{dimension.size.400}", + "color": "{color.text.default}" + }, + "footer": { + "gap": "{dimension.space.200}", + "padding": "0 {dimension.space.300} {dimension.space.500} {dimension.space.300} {dimension.space.500} {dimension.space.300} {dimension.space.500}" + } + }, + "contextmenu": { + "root": { + "background": "{color.background.surface.raised}", + "color": "{color.text.default}", + "shadow": "{shadow.400}" + }, + "list": { + "padding": "{dimension.space.100} 0", + "gap": "{dimension.space.100}" + }, + "item": { + "padding": "{dimension.space.200} {dimension.space.300}", + "gap": "{dimension.space.200}" + }, + "submenu": { + "mobileIndent": "{dimension.space.500}" + } + }, + "datatable": { + "colorScheme": { + "light": { + "root": { + "color": "{color.text.default}", + "borderColor": "{color.border.subtle}" + }, + "header": { + "background": "{color.background.neutral.subtle}", + "color": "{color.text.default}" + }, + "headerCell": { + "background": "{color.background.neutral.subtle}", + "hoverBackground": "{color.background.neutral.subtleHover}", + "color": "{color.text.default}" + }, + "footer": { + "background": "{color.background.neutral.subtleHover}", + "color": "{color.text.default}" + }, + "footerCell": { + "background": "{color.background.surface.hover.section}", + "color": "{color.text.default}" + }, + "row": { + "stripedBackground": "{color.background.surface.hover.section}" + }, + "bodyCell": { + "selectedBorderColor": "{color.border.subtle}" + } + } + }, + "extended": { + "extHeaderCell": { + "selectedHoverBackground": "{color.background.surface.inverse}" + }, + "extRow": { + "selectedHoverBackground": "{color.background.surface.inverse}", + "stripedHoverBackground": "{color.background.neutral.subtleHover}" + } + }, + "root": { + "transitionDuration": "{dimension.duration.200}" + }, + "header": { + "borderColor": "{color.border.subtle}", + "borderWidth": "{dimension.size.100} 0 {dimension.size.100} 0", + "padding": "{dimension.space.400}", + "sm": { + "padding": "{dimension.space.200}" + }, + "lg": { + "padding": "{dimension.space.500}" + } + }, + "headerCell": { + "selectedBackground": "{color.border.strong}", + "borderColor": "{color.border.subtle}", + "hoverColor": "{color.text.onBold}", + "selectedColor": "{color.text.onBold}", + "gap": "{dimension.space.200}", + "padding": "{dimension.space.400}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "inset {shadow.200}" + }, + "sm": { + "padding": "{dimension.space.200}" + }, + "lg": { + "padding": "{dimension.space.500}" + } + }, + "columnTitle": { + "fontWeight": "{typography.fontWeight.bold}" + }, + "row": { + "background": "{color.background.surface.raised}", + "hoverBackground": "{color.background.surface.hover.section}", + "selectedBackground": "{color.border.strong}", + "color": "{color.text.default}", + "hoverColor": "{color.text.hover.default}", + "selectedColor": "{color.text.onBold}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "inset {shadow.200}" + } + }, + "bodyCell": { + "borderColor": "{color.border.subtle}", + "padding": "{dimension.space.400}", + "sm": { + "padding": "{dimension.space.200}" + }, + "lg": { + "padding": "{dimension.space.500}" + } + }, + "footerCell": { + "borderColor": "{color.border.subtle}", + "padding": "{dimension.space.400}", + "sm": { + "padding": "{dimension.space.200}" + }, + "lg": { + "padding": "{dimension.space.500}" + } + }, + "columnFooter": { + "fontWeight": "{typography.fontWeight.bold}" + }, + "dropPoint": { + "color": "{color.border.strong}" + }, + "footer": { + "borderColor": "{color.border.subtle}", + "borderWidth": "0 0 {dimension.size.100} 0", + "padding": "{dimension.space.400}", + "sm": { + "padding": "{dimension.space.200}" + }, + "lg": { + "padding": "{dimension.space.500}" + } + }, + "columnResizer": { + "width": "{dimension.size.200}" + }, + "resizeIndicator": { + "width": "{dimension.size.100}", + "color": "{color.border.strong}" + }, + "sortIcon": { + "color": "{color.text.default}", + "hoverColor": "{color.text.hover.default}", + "size": "{dimension.size.300}" + }, + "loadingIcon": { + "size": "{dimension.size.500}" + }, + "rowToggleButton": { + "hoverBackground": "{color.background.surface.hover.section}", + "selectedHoverBackground": "{color.background.surface.hover.section}", + "color": "{color.text.default}", + "hoverColor": "{color.text.default}", + "selectedHoverColor": "{color.text.default}", + "size": "{dimension.size.500}", + "borderRadius": "{dimension.radius.300}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + }, + "filter": { + "inlineGap": "{dimension.space.200}", + "rule": { + "borderColor": "{color.border.subtle}" + }, + "constraintList": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + }, + "constraint": { + "focusBackground": "{color.background.surface.hover.section}", + "selectedBackground": "{color.border.strong}", + "selectedFocusBackground": "{color.text.hover.default}", + "color": "{color.text.default}", + "focusColor": "{color.text.default}", + "selectedColor": "{color.text.onBold}", + "selectedFocusColor": "{color.text.onBold}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}", + "separator": { + "borderColor": "{color.border.subtle}" + } + }, + "overlaySelect": { + "background": "{color.background.surface.raised}", + "color": "{color.text.default}", + "borderColor": "{color.border.subtle}", + "borderRadius": "{dimension.radius.300}", + "shadow": "{shadow.400}" + }, + "overlayPopover": { + "background": "{color.background.surface.raised}", + "color": "{color.text.default}", + "borderColor": "{color.border.subtle}", + "borderRadius": "{dimension.radius.300}", + "shadow": "{shadow.400}", + "padding": "{dimension.space.300}", + "gap": "{dimension.space.100}" + } + }, + "paginatorTop": { + "borderColor": "{color.border.default}", + "borderWidth": "0 0 {dimension.size.100} 0" + }, + "paginatorBottom": { + "borderWidth": "0 0 {dimension.size.100} 0", + "borderColor": "{color.border.subtle}" + } + }, + "dataview": { + "root": { + "borderWidth": "{dimension.size.100}", + "borderRadius": "{dimension.radius.100}", + "padding": "0rem", + "borderColor": "{color.border.subtle}" + }, + "header": { + "borderWidth": "0 0 {dimension.size.100} 0", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "0 0 0 0", + "color": "{color.text.default}" + }, + "content": { + "background": "{color.background.surface.raised}", + "color": "{color.text.default}", + "borderColor": "{color.border.subtle}", + "borderWidth": "0rem", + "padding": "0rem", + "borderRadius": "0" + }, + "footer": { + "background": "{color.background.neutral.subtleHover}", + "color": "{color.text.default}", + "borderWidth": "{dimension.size.100} 0 0 0", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "0 0 0 0" + }, + "paginatorTop": { + "borderWidth": "0 0 {dimension.size.100} 0" + }, + "paginatorBottom": { + "borderWidth": "{dimension.size.100} 0 0 0" + } + }, + "datepicker": { + "extend": { + "extDate": { + "selectedHoverBackground": "{color.background.surface.inverse}" + }, + "extToday": { + "hoverBackground": "{color.background.surface.hover.section}", + "borderColor": "{color.border.inverse}" + }, + "extTitle": { + "width": "{dimension.overlayWidth.narrow}" + }, + "extTimePicker": { + "minWidth": "{dimension.size.700}", + "color": "{color.text.default}" + } + }, + "colorScheme": { + "light": { + "dropdown": { + "background": "{color.background.surface.raised}", + "hoverBackground": "{color.background.neutral.subtleHover}", + "activeBackground": "{color.border.strong}", + "color": "{color.text.default}", + "hoverColor": "{color.text.default}", + "activeColor": "{color.text.onBold}" + }, + "today": { + "background": "{color.background.transparent}", + "color": "{color.text.staticDark}" + } + } + }, + "panel": { + "background": "{color.background.surface.raised}", + "borderColor": "{color.border.subtle}", + "color": "{color.text.default}", + "borderRadius": "{dimension.radius.300}", + "shadow": "{shadow.400}", + "padding": "0rem" + }, + "header": { + "background": "{color.background.surface.raised}", + "borderColor": "{color.border.subtle}", + "color": "{color.text.default}", + "padding": "{dimension.space.300}" + }, + "title": { + "gap": "{dimension.space.200}", + "fontWeight": "{typography.fontWeight.bold}" + }, + "selectMonth": { + "hoverBackground": "{color.background.surface.hover.section}", + "color": "{color.text.default}", + "hoverColor": "{color.text.hover.default}", + "borderRadius": "{dimension.radius.300}", + "padding": "{dimension.space.200}" + }, + "inputIcon": { + "color": "{color.text.muted}" + }, + "dropdown": { + "width": "{dimension.size.600}", + "borderColor": "{color.border.default}", + "hoverBorderColor": "{color.border.default}", + "activeBorderColor": "{color.border.default}", + "borderRadius": "{dimension.radius.300}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + }, + "sm": { + "width": "0rem" + }, + "lg": { + "width": "0rem" + } + }, + "group": { + "borderColor": "{color.border.subtle}", + "gap": "{dimension.space.300}" + }, + "selectYear": { + "hoverBackground": "{color.background.surface.hover.section}", + "color": "{color.text.default}", + "hoverColor": "{color.text.hover.default}", + "borderRadius": "{dimension.radius.300}", + "padding": "{dimension.space.100}" + }, + "dayView": { + "margin": "{dimension.space.300}" + }, + "weekDay": { + "padding": "{dimension.space.100}", + "fontWeight": "{typography.fontWeight.bold}", + "color": "{color.text.default}" + }, + "date": { + "hoverBackground": "{color.background.surface.hover.section}", + "selectedBackground": "{color.border.strong}", + "rangeSelectedBackground": "{color.background.surface.hover.section}", + "color": "{color.text.default}", + "hoverColor": "{color.text.default}", + "selectedColor": "{color.text.onBold}", + "rangeSelectedColor": "{color.text.default}", + "width": "{dimension.size.500}", + "height": "{dimension.size.500}", + "borderRadius": "{dimension.radius.200}", + "padding": "{dimension.space.100}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + }, + "monthView": { + "margin": "0 0 0 0" + }, + "month": { + "padding": "0", + "borderRadius": "0rem" + }, + "yearView": { + "margin": "0 0 0 0" + }, + "year": { + "padding": "0", + "borderRadius": "0rem" + }, + "buttonbar": { + "padding": "{dimension.space.300}", + "borderColor": "{color.border.subtle}" + }, + "timePicker": { + "padding": "{dimension.space.300}", + "borderColor": "{color.border.subtle}", + "gap": "{dimension.space.200}", + "buttonGap": "{dimension.space.100}" + }, + "root": { + "transitionDuration": "{dimension.duration.200}" + } + }, + "dialog": { + "extend": { + "borderWidth": "{dimension.borderWidth.100}", + "backdrop": "{color.background.scrim.modal}" + }, + "root": { + "background": "{color.background.surface.raised}", + "borderColor": "{color.border.subtle}", + "color": "{color.text.default}", + "borderRadius": "{dimension.radius.500}", + "shadow": "{shadow.400}" + }, + "header": { + "padding": "{dimension.space.600} {dimension.space.600} 1rem {dimension.space.600}", + "gap": "{dimension.space.200}" + }, + "title": { + "fontSize": "{typography.fontSize.500}", + "fontWeight": "{typography.fontWeight.demibold}" + }, + "content": { + "padding": "{dimension.space.600}" + }, + "footer": { + "padding": "0 {dimension.space.600} {dimension.space.600} {dimension.space.600}", + "gap": "{dimension.space.200}" + } + }, + "divider": { + "colorScheme": { + "light": { + "content": { + "background": "{color.background.surface.raised}", + "color": "{color.text.muted}" + }, + "borderColor": "{color.border.subtle}" + } + }, + "extend": { + "content": { + "gap": "{dimension.space.200}" + }, + "iconSize": "{dimension.size.300}" + }, + "horizontal": { + "margin": "{dimension.space.400} 0", + "padding": "0 {dimension.space.400}", + "content": { + "padding": "0 {dimension.space.200}" + } + }, + "vertical": { + "margin": "0 {dimension.space.400}", + "padding": "{dimension.space.400} 0", + "content": { + "padding": "{dimension.space.200} 0" + } + } + }, + "drawer": { + "extend": { + "borderRadius": "{dimension.radius.200}", + "borderWidth": "{dimension.borderWidth.100}", + "width": "{dimension.overlayWidth.base}", + "extHeader": { + "gap": "{dimension.space.200}", + "borderColor": "{drawer.root.borderColor}" + }, + "padding": "{dimension.space.200}", + "scale": "0.125rem", + "backdrop": "{color.background.scrim.modal}" + }, + "root": { + "background": "{color.background.surface.raised}", + "borderColor": "{color.border.subtle}", + "color": "{color.text.default}", + "shadow": "{shadow.200}", + "width": "{dimension.overlayWidth.base}" + }, + "sm": { + "width": "{dimension.overlayWidth.sm}" + }, + "lg": { + "width": "{dimension.overlayWidth.lg}" + }, + "xlg": { + "width": "{dimension.overlayWidth.xlg}" + }, + "header": { + "padding": "{dimension.space.600} {dimension.space.600} {dimension.space.500} {dimension.space.600} " + }, + "title": { + "fontSize": "{typography.fontSize.500}", + "fontWeight": "{typography.fontWeight.demibold}" + }, + "content": { + "padding": "{dimension.space.600}" + }, + "footer": { + "padding": "0 {dimension.space.600} {dimension.space.600} {dimension.space.600} " + } + }, + "fileupload": { + "extend": { + "extDragNdrop": { + "background": "{color.background.surface.canvas}", + "borderRadius": "{dimension.radius.300}", + "iconSize": "{dimension.size.500}", + "padding": "{dimension.space.400}", + "info": { + "gap": "{dimension.space.100}" + } + }, + "extFile": { + "iconSize": "{dimension.size.350}" + }, + "extContent": { + "borderRadius": "{dimension.radius.300}", + "highlightBorderDefault": "{color.border.default}" + } + }, + "colorScheme": { + "light": { + "header": { + "background": "{color.background.surface.canvas}", + "color": "{color.text.default}" + } + } + }, + "root": { + "background": "{color.background.surface.raised}", + "borderColor": "{color.border.subtle}", + "color": "{color.text.default}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}" + }, + "header": { + "borderColor": "{color.border.subtle}", + "borderWidth": "0rem", + "padding": "0rem", + "borderRadius": "0rem", + "gap": "{dimension.space.200}" + }, + "content": { + "highlightBorderColor": "{color.border.strong}", + "padding": "0rem", + "gap": "{dimension.space.200}" + }, + "file": { + "padding": "{dimension.space.200}", + "gap": "{dimension.space.200}", + "borderColor": "{color.border.default}", + "info": { + "gap": "{dimension.space.100}" + } + }, + "fileList": { + "gap": "{dimension.space.200}" + }, + "progressbar": { + "height": "{dimension.size.200}" + }, + "basic": { + "gap": "{dimension.space.200}" + } + }, + "floatlabel": { + "extend": { + "height": "{dimension.size.800}", + "iconSize": "{dimension.size.350}" + }, + "root": { + "color": "{color.text.muted}", + "focusColor": "{color.text.muted}", + "activeColor": "{color.text.muted}", + "invalidColor": "{color.text.danger}", + "transitionDuration": "{dimension.duration.200}", + "positionX": "{dimension.space.300}", + "positionY": "{dimension.space.300}", + "fontWeight": "{typography.fontWeight.regular}", + "active": { + "fontSize": "{typography.fontSize.100}", + "fontWeight": "{typography.fontWeight.regular}" + } + }, + "over": { + "active": { + "top": "{dimension.space.400}" + } + }, + "in": { + "input": { + "paddingTop": "{dimension.space.700}", + "paddingBottom": "{dimension.space.300}" + }, + "active": { + "top": "{dimension.space.300}" + } + }, + "on": { + "borderRadius": "0rem", + "active": { + "padding": "0 {dimension.space.100}", + "background": "{color.background.surface.ground}" + } + } + }, + "galleria": { + "extend": { + "backdrop": "{color.background.scrim.modal}" + }, + "colorScheme": { + "light": { + "thumbnailContent": { + "background": "{color.background.neutral.subtleHover}" + }, + "thumbnailNavButton": { + "hoverBackground": "{color.background.translucent.light.default}", + "color": "{color.text.default}", + "hoverColor": "{color.text.hover.default}" + }, + "indicatorButton": { + "background": "{color.text.disabled}", + "hoverBackground": "{color.text.hover.subtle}" + } + } + }, + "root": { + "borderWidth": "{dimension.size.100}", + "borderColor": "{color.border.subtle}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}" + }, + "navButton": { + "background": "{color.background.transparent}", + "hoverBackground": "{color.background.translucent.light.default}", + "color": "{color.text.onBold}", + "hoverColor": "{color.text.onBold}", + "size": "{dimension.size.800}", + "gutter": "{dimension.space.200}", + "prev": { + "borderRadius": "{dimension.radius.200}" + }, + "next": { + "borderRadius": "{dimension.radius.200}" + }, + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + }, + "navIcon": { + "size": "{dimension.size.500}" + }, + "thumbnailsContent": { + "padding": "{dimension.space.100}" + }, + "thumbnailNavButton": { + "size": "{dimension.size.500}", + "borderRadius": "{dimension.radius.300}", + "gutter": "{dimension.space.200}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + }, + "thumbnailNavButtonIcon": { + "size": "{dimension.size.300}" + }, + "caption": { + "background": "{color.background.translucent.light.strong}", + "color": "{color.text.default}", + "padding": "{dimension.space.200}" + }, + "indicatorList": { + "gap": "{dimension.space.200}", + "padding": "{dimension.space.400}" + }, + "indicatorButton": { + "width": "{dimension.size.200}", + "height": "{dimension.size.200}", + "activeBackground": "{color.border.strong}", + "borderRadius": "{dimension.radius.300}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + }, + "insetIndicatorList": { + "background": "{color.background.translucent.dark.default}" + }, + "insetIndicatorButton": { + "background": "{color.background.translucent.light.subtle}", + "hoverBackground": "{color.background.translucent.light.default}", + "activeBackground": "{color.background.translucent.light.strong}" + }, + "closeButton": { + "size": "{dimension.size.800}", + "gutter": "{dimension.space.200}", + "background": "{color.background.translucent.light.subtle}", + "hoverBackground": "{color.background.translucent.light.default}", + "color": "{color.text.onBold}", + "hoverColor": "{color.text.onBold}", + "borderRadius": "{dimension.radius.400}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + }, + "closeButtonIcon": { + "size": "{dimension.size.500}" + } + }, + "inputgroup": { + "extend": { + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": "{dimension.size.300}" + }, + "colorScheme": { + "light": { + "addon": { + "background": "{color.background.surface.ground}", + "borderColor": "{color.border.default}", + "color": "{color.text.muted}" + } + } + }, + "addon": { + "borderRadius": "{dimension.radius.300}", + "padding": "{dimension.space.300}", + "minWidth": "{dimension.size.600}" + } + }, + "inputnumber": { + "extend": { + "borderWidth": "{dimension.borderWidth.100}", + "extButton": { + "height": "{dimension.size.600}", + "iconSize": "{dimension.size.300}" + } + }, + "colorScheme": { + "light": { + "button": { + "background": "{color.background.surface.raised}", + "hoverBackground": "{color.background.surface.hover.section}", + "activeBackground": "{color.background.transparent}", + "borderColor": "{color.border.default}", + "hoverBorderColor": "{color.border.default}", + "activeBorderColor": "{color.border.default}", + "color": "{color.text.default}", + "hoverColor": "{color.text.hover.default}", + "activeColor": "{color.text.default}" + } + } + }, + "transitionDuration": { + "transitionDuration": "{dimension.duration.200}" + }, + "button": { + "width": "{dimension.size.600}", + "borderRadius": "{dimension.radius.300}", + "verticalPadding": "{dimension.space.300}" + } + }, + "inputotp": { + "extend": { + "height": "{dimension.size.600}", + "borderWidth": "{dimension.borderWidth.100}" + }, + "root": { + "gap": "{dimension.space.200}" + }, + "input": { + "width": "{dimension.size.700}" + }, + "sm": { + "width": "0rem" + }, + "lg": { + "width": "0rem" + } + }, + "inputtext": { + "extend": { + "readonlyBackground": "{color.background.neutral.subtleHover}", + "iconSize": "{dimension.size.300}", + "borderWidth": "{dimension.borderWidth.100}", + "extXlg": { + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.600}" + } + }, + "root": { + "background": "{color.background.surface.ground}", + "disabledBackground": "{color.background.disabled}", + "filledBackground": "{color.background.surface.ground}", + "filledHoverBackground": "{color.background.surface.ground}", + "filledFocusBackground": "{color.background.surface.ground}", + "borderColor": "{color.border.default}", + "hoverBorderColor": "{color.border.brand}", + "focusBorderColor": "{color.border.brand}", + "invalidBorderColor": "{color.border.danger}", + "color": "{color.text.default}", + "disabledColor": "{color.text.muted}", + "placeholderColor": "{color.text.muted}", + "invalidPlaceholderColor": "{color.text.danger}", + "shadow": "0", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.300}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}", + "sm": { + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.200}" + }, + "lg": { + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.400}" + }, + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "0" + } + } + }, + "listbox": { + "extend": { + "extOption": { + "label": { + "gap": "{dimension.space.100}" + }, + "caption": { + "color": "{color.text.muted}", + "stripedColor": "{color.text.muted}" + }, + "gap": "{dimension.space.200}" + } + }, + "colorScheme": { + "light": { + "option": { + "stripedBackground": "{color.background.neutral.subtle}" + } + } + }, + "root": { + "background": "{color.background.surface.ground}", + "disabledBackground": "{color.background.disabled}", + "borderColor": "{color.border.default}", + "invalidBorderColor": "{color.border.danger}", + "color": "{color.icon.default}", + "disabledColor": "{color.text.muted}", + "shadow": "0", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}" + }, + "list": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}", + "header": { + "padding": "{dimension.space.400} {dimension.space.400} 0 {dimension.space.400}" + } + }, + "option": { + "focusBackground": "{color.background.surface.hover.section}", + "selectedBackground": "{color.border.strong}", + "selectedFocusBackground": "{color.text.hover.default}", + "color": "{color.text.default}", + "focusColor": "{color.text.default}", + "selectedColor": "{color.text.onBold}", + "selectedFocusColor": "{color.text.onBold}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}" + }, + "optionGroup": { + "background": "{color.background.surface.raised}", + "color": "{color.text.muted}", + "fontWeight": "{typography.fontWeight.regular}", + "padding": "{dimension.space.200} {dimension.space.300}" + }, + "checkmark": { + "color": "{color.text.default}", + "gutterStart": "-{dimension.space.200}", + "gutterEnd": "{dimension.space.200}" + }, + "emptyMessage": { + "padding": "{dimension.space.200} {dimension.space.300}" + } + }, + "megamenu": { + "extend": { + "extItem": { + "caption": { + "color": "{color.text.muted}", + "gap": "{dimension.space.100}" + } + }, + "iconSize": "{typography.fontSize.500}" + }, + "colorScheme": { + "light": { + "root": { + "background": "{color.background.transparent}" + } + } + }, + "root": { + "borderColor": "{color.background.transparent}", + "borderRadius": "{dimension.radius.300}", + "color": "{color.text.default}", + "gap": "{dimension.space.100}", + "transitionDuration": "{dimension.duration.200}", + "verticalOrientation": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + }, + "horizontalOrientation": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + } + }, + "baseItem": { + "borderRadius": "{dimension.radius.300}", + "padding": "{dimension.space.200} {dimension.space.300}" + }, + "item": { + "focusBackground": "{color.background.neutral.subtleHover}", + "activeBackground": "{color.border.strong}", + "color": "{color.text.default}", + "focusColor": "{color.text.default}", + "activeColor": "{color.text.onBold}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}", + "gap": "{dimension.space.200}", + "icon": { + "color": "{color.text.default}", + "focusColor": "{color.text.default}", + "activeColor": "{color.text.onBold}" + } + }, + "overlay": { + "padding": "{dimension.space.100}", + "background": "{color.background.surface.raised}", + "borderColor": "{color.border.subtle}", + "borderRadius": "{dimension.radius.300}", + "color": "{color.text.default}", + "shadow": "{shadow.400}", + "gap": "0rem" + }, + "submenu": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + }, + "submenuLabel": { + "fontWeight": "{typography.fontWeight.regular}", + "padding": "{dimension.space.200} {dimension.space.300}", + "background": "{color.background.transparent}", + "color": "{color.text.muted}" + }, + "submenuIcon": { + "size": "{typography.fontSize.500}", + "color": "{color.border.strong}", + "focusColor": "{color.border.strong}", + "activeColor": "{color.text.onBold}" + }, + "separator": { + "borderColor": "{color.border.subtle}" + }, + "mobileButton": { + "borderRadius": "{dimension.radius.200}", + "size": "{dimension.size.500}", + "color": "{color.text.default}", + "hoverColor": "{color.text.hover.default}", + "hoverBackground": "{color.background.surface.hover.section}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + } + }, + "menu": { + "extend": { + "paddingX": "0.25rem", + "iconSize": "{typography.fontSize.500}", + "paddingY": "0.25rem", + "extItem": { + "caption": { + "gap": "{dimension.space.100}" + }, + "activeBackground": "{color.border.strong}", + "activeColor": "{color.text.onBold}" + } + }, + "colorScheme": { + "light": { + "extend": { + "extItem": { + "caption": { + "color": "{color.text.muted}" + }, + "icon": { + "activeColor": "{color.text.onBold}" + } + } + }, + "root": { + "background": "{color.background.surface.raised}", + "borderColor": "{color.border.subtle}", + "color": "{color.text.default}" + }, + "item": { + "focusBackground": "{color.background.neutral.subtleHover}", + "color": "{color.text.default}", + "focusColor": "{color.text.default}", + "icon": { + "color": "{color.text.default}", + "focusColor": "{color.text.default}" + } + } + } + }, + "root": { + "borderRadius": "{dimension.radius.300}", + "shadow": "{shadow.400}", + "transitionDuration": "{dimension.duration.200}" + }, + "list": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + }, + "submenuLabel": { + "padding": "{dimension.space.200} {dimension.space.300}", + "fontWeight": "{typography.fontWeight.regular}", + "background": "{color.background.transparent}", + "color": "{color.text.muted}" + }, + "separator": { + "borderColor": "{color.border.subtle}" + }, + "item": { + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}", + "gap": "{dimension.space.200}" + } + }, + "menubar": { + "extend": { + "iconSize": "{typography.fontSize.500}", + "extItem": { + "caption": { + "color": "{color.text.muted}", + "gap": "{dimension.space.100}" + } + }, + "extSubmenuLabel": { + "padding": "{dimension.space.200} {dimension.space.300}", + "fontWeight": "{typography.fontWeight.demibold}", + "background": "{color.background.transparent}", + "color": "{color.text.muted}" + } + }, + "colorScheme": { + "light": { + "root": { + "background": "{color.background.transparent}" + } + } + }, + "root": { + "borderColor": "{color.background.transparent}", + "borderRadius": "{dimension.radius.200}", + "color": "{color.text.default}", + "gap": "{dimension.space.100}", + "padding": "{dimension.space.100}", + "transitionDuration": "{dimension.duration.200}" + }, + "baseItem": { + "borderRadius": "{dimension.radius.200}", + "padding": "{dimension.space.200} {dimension.space.300}" + }, + "item": { + "focusBackground": "{color.background.neutral.subtleHover}", + "activeBackground": "{color.border.strong}", + "color": "{color.text.default}", + "focusColor": "{color.text.default}", + "activeColor": "{color.text.onBold}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}", + "gap": "{dimension.space.200}", + "icon": { + "color": "{color.text.default}", + "focusColor": "{color.text.default}", + "activeColor": "{color.text.onBold}" + } + }, + "submenu": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}", + "background": "{color.background.surface.raised}", + "borderColor": "{color.border.subtle}", + "borderRadius": "{dimension.radius.300}", + "shadow": "{shadow.400}", + "mobileIndent": "{dimension.space.300}", + "icon": { + "size": "{typography.fontSize.500}", + "color": "{color.border.strong}", + "focusColor": "{color.border.strong}", + "activeColor": "{color.text.onBold}" + } + }, + "separator": { + "borderColor": "{color.border.subtle}" + }, + "mobileButton": { + "borderRadius": "{dimension.radius.200}", + "size": "{dimension.size.500}", + "color": "{color.text.default}", + "hoverColor": "{color.text.hover.default}", + "hoverBackground": "{color.background.surface.hover.section}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + } + }, + "message": { + "extend": { + "width": "{dimension.overlayWidth.base}", + "extText": { + "gap": "{dimension.space.100}" + }, + "extInfo": { + "color": "{color.background.info.bold}", + "closeButton": { + "color": "{color.background.info.bold}", + "borderColor": "{color.background.info.bold}" + }, + "caption": { + "color": "{color.text.default}" + } + }, + "extAccentLine": { + "width": "{dimension.size.150}" + }, + "extCloseButton": { + "width": "{dimension.size.100}" + }, + "extSuccess": { + "color": "{color.background.brand.bold}", + "closeButton": { + "color": "{color.background.brand.bold}", + "borderColor": "{color.background.brand.bold}" + }, + "caption": { + "color": "{color.text.default}" + } + }, + "extWarn": { + "color": "{color.background.warning.bold}", + "closeButton": { + "color": "{color.background.warning.bold}", + "borderColor": "{color.background.warning.bold}" + }, + "caption": { + "color": "{color.text.default}" + } + }, + "extError": { + "color": "{color.background.danger.bold}", + "closeButton": { + "color": "{color.background.danger.bold}", + "borderColor": "{color.background.danger.bold}" + }, + "caption": { + "color": "{color.text.default}" + } + } + }, + "colorScheme": { + "light": { + "success": { + "background": "{color.background.brand.subtle}", + "borderColor": "{color.background.brand.bold}", + "color": "{color.text.default}", + "shadow": "none", + "outlined": { + "color": "{color.text.default}", + "borderColor": "{color.background.brand.bold}" + }, + "closeButton": { + "hoverBackground": "{color.focusRing.success}", + "focusRing": { + "color": "{color.focusRing.success}", + "shadow": "{shadow.200}" + } + }, + "simple": { + "color": "{color.text.default}" + } + }, + "outlined": { + "root": { + "borderWidth": "0rem" + }, + "closeButton": { + "hoverBackground": "{color.background.transparent}", + "focusRing": { + "color": "{color.focusRing.success}", + "shadow": "{shadow.200}" + } + }, + "outlined": { + "color": "{color.background.transparent}", + "borderColor": "{color.background.transparent}" + }, + "simple": { + "color": "{color.background.transparent}" + } + }, + "simple": { + "content": { + "padding": "0rem" + } + }, + "warn": { + "background": "{color.background.warning.subtle}", + "borderColor": "{color.background.warning.bold}", + "color": "{color.text.default}", + "shadow": "none", + "outlined": { + "color": "{color.text.default}", + "borderColor": "{color.background.warning.bold}" + }, + "closeButton": { + "hoverBackground": "{color.focusRing.warning}", + "focusRing": { + "color": "{color.focusRing.success}", + "shadow": "{shadow.200}" + } + }, + "simple": { + "color": "{color.text.default}" + } + }, + "error": { + "background": "{color.background.danger.subtle}", + "borderColor": "{color.background.danger.bold}", + "color": "{color.text.default}", + "shadow": "none", + "outlined": { + "color": "{color.text.default}", + "borderColor": "{color.background.danger.bold}" + }, + "closeButton": { + "hoverBackground": "{color.focusRing.invalid}", + "focusRing": { + "color": "{color.focusRing.success}", + "shadow": "{shadow.200}" + } + }, + "simple": { + "color": "{color.text.default}" + } + }, + "secondary": { + "borderColor": "{color.background.transparent}", + "shadow": "none", + "closeButton": { + "hoverBackground": "{color.background.transparent}", + "focusRing": { + "color": "{color.focusRing.success}", + "shadow": "{shadow.200}" + } + }, + "simple": { + "color": "{color.background.transparent}" + }, + "outlined": { + "color": "{color.background.transparent}", + "borderColor": "{color.background.transparent}" + } + }, + "contrast": { + "borderColor": "{color.background.transparent}", + "shadow": "none", + "closeButton": { + "hoverBackground": "{color.background.transparent}", + "focusRing": { + "color": "{color.focusRing.success}", + "shadow": "{shadow.200}" + } + }, + "simple": { + "color": "{color.background.transparent}" + }, + "outlined": { + "color": "{color.background.transparent}", + "borderColor": "{color.background.transparent}" + } + }, + "info": { + "background": "{color.background.info.subtle}", + "borderColor": "{color.background.info.bold}", + "color": "{color.text.default}", + "shadow": "none", + "closeButton": { + "hoverBackground": "{color.focusRing.info}", + "focusRing": { + "color": "{color.focusRing.success}", + "shadow": "{shadow.200}" + } + }, + "outlined": { + "color": "{color.text.default}", + "borderColor": "{color.background.info.bold}" + }, + "simple": { + "color": "{color.text.default}" + } + } + } + }, + "root": { + "borderRadius": "{dimension.radius.300}", + "borderWidth": "{dimension.size.100}", + "transitionDuration": "{dimension.duration.200}" + }, + "content": { + "padding": "{dimension.space.400}", + "gap": "{dimension.space.400}", + "sm": { + "padding": "{dimension.space.400}" + }, + "lg": { + "padding": "{dimension.space.400}" + } + }, + "text": { + "fontSize": "{typography.fontSize.300}", + "fontWeight": "{typography.fontWeight.bold}", + "sm": { + "fontSize": "{typography.fontSize.300}" + }, + "lg": { + "fontSize": "{typography.fontSize.300}" + } + }, + "icon": { + "size": "{dimension.size.550}", + "sm": { + "size": "{dimension.size.550}" + }, + "lg": { + "size": "{dimension.size.550}" + } + }, + "closeButton": { + "width": "{dimension.size.500}", + "height": "{dimension.size.500}", + "borderRadius": "{dimension.radius.300}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "offset": "{dimension.focusRing.offset}" + } + }, + "closeIcon": { + "size": "{dimension.size.300}", + "sm": { + "size": "{dimension.size.300}" + }, + "lg": { + "size": "{dimension.size.300}" + } + } + }, + "metergroup": { + "extend": { + "extLabel": { + "color": "{color.text.muted}" + } + }, + "root": { + "borderRadius": "{dimension.radius.300}", + "gap": "{dimension.space.300}" + }, + "meters": { + "size": "{dimension.size.200}", + "background": "{color.border.subtle}" + }, + "label": { + "gap": "{dimension.space.100}" + }, + "labelMarker": { + "size": "{dimension.size.200}" + }, + "labelIcon": { + "size": "{dimension.size.300}" + }, + "labelList": { + "verticalGap": "{dimension.space.200}", + "horizontalGap": "{dimension.space.300}" + } + }, + "multiselect": { + "colorScheme": { + "overlay": { + "background": "{color.background.surface.raised}", + "borderColor": "{color.border.subtle}", + "color": "{color.text.default}" + }, + "option": { + "focusBackground": "{color.background.surface.hover.section}", + "selectedBackground": "{color.border.strong}", + "selectedFocusBackground": "{color.text.hover.default}", + "color": "{color.text.default}", + "focusColor": "{color.text.default}", + "selectedColor": "{color.text.onBold}", + "selectedFocusColor": "{color.text.onBold}" + }, + "root": { + "background": "{color.background.surface.ground}", + "disabledBackground": "{color.background.disabled}", + "filledBackground": "{color.background.surface.ground}", + "filledHoverBackground": "{color.background.surface.ground}", + "filledFocusBackground": "{color.background.surface.ground}", + "borderColor": "{color.border.default}", + "hoverBorderColor": "{color.border.brand}", + "focusBorderColor": "{color.border.brand}", + "invalidBorderColor": "{color.border.danger}", + "color": "{color.icon.default}", + "disabledColor": "{color.text.muted}", + "placeholderColor": "{color.text.muted}", + "invalidPlaceholderColor": "{color.text.danger}", + "focusRing": { + "color": "{color.focusRing.success}" + } + }, + "dropdown": { + "color": "{color.text.muted}" + }, + "optionGroup": { + "background": "{color.background.surface.raised}", + "color": "{color.text.muted}" + }, + "clearIcon": { + "color": "{color.text.muted}" + } + }, + "extend": { + "paddingX": "0.3571rem", + "paddingY": "0.3571rem", + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": "{dimension.size.300}", + "width": "{dimension.overlayWidth.narrow}", + "readonlyBackground": "{color.background.neutral.subtleHover}" + }, + "root": { + "shadow": "0", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}", + "sm": { + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.200}", + "paddingY": "{dimension.space.200}" + }, + "lg": { + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}" + }, + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "offset": "{dimension.focusRing.offset}", + "shadow": "0" + } + }, + "dropdown": { + "width": "{dimension.size.600}" + }, + "overlay": { + "borderRadius": "{dimension.radius.300}", + "shadow": "{shadow.400}" + }, + "list": { + "padding": "{dimension.space.100}", + "header": { + "padding": "{dimension.space.400} {dimension.space.400} 0 {dimension.space.400}" + }, + "gap": "{dimension.space.100}" + }, + "chip": { + "borderRadius": "{dimension.radius.200}" + }, + "option": { + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}", + "gap": "{dimension.space.200}" + }, + "optionGroup": { + "fontWeight": "{typography.fontWeight.demibold}", + "padding": "{dimension.space.200} {dimension.space.300}" + }, + "emptyMessage": { + "padding": "{dimension.space.200} {dimension.space.300}" + } + }, + "paginator": { + "root": { + "padding": "0 {dimension.space.200}", + "gap": "{dimension.space.200}", + "borderRadius": "{dimension.radius.300}", + "background": "{color.background.transparent}", + "color": "{color.text.default}", + "transitionDuration": "{dimension.duration.200}" + }, + "currentPageReport": { + "color": "{color.text.muted}" + }, + "navButton": { + "background": "{color.background.transparent}", + "hoverBackground": "{color.background.surface.hover.section}", + "selectedBackground": "{color.border.strong}", + "color": "{color.text.default}", + "hoverColor": "{color.text.hover.default}", + "selectedColor": "{color.text.onBold}", + "width": "{dimension.size.600}", + "height": "{dimension.size.600}", + "borderRadius": "{dimension.radius.300}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "focus": "{shadow.200}" + } + }, + "jumpToPageInput": { + "maxWidth": "{dimension.size.900}" + } + }, + "panelmenu": { + "extend": { + "extPanel": { + "gap": "{dimension.space.100}" + }, + "iconSize": "{typography.fontSize.500}", + "extItem": { + "activeBackground": "{color.border.strong}", + "activeColor": "{color.text.onBold}", + "caption": { + "color": "{color.text.muted}", + "gap": "{dimension.space.100}" + } + } + }, + "root": { + "gap": "{dimension.space.100}", + "transitionDuration": "{dimension.duration.200}" + }, + "panel": { + "background": "{color.background.transparent}", + "borderColor": "{color.background.transparent}", + "borderWidth": "{dimension.borderWidth.100}", + "color": "{color.text.default}", + "padding": "{dimension.space.100}", + "borderRadius": "{dimension.radius.300}", + "first": { + "borderWidth": "{dimension.borderWidth.100} {dimension.borderWidth.100} 0 {dimension.borderWidth.100}", + "topBorderRadius": "{dimension.radius.300}" + }, + "last": { + "borderWidth": "0 {dimension.borderWidth.100} {dimension.borderWidth.100} {dimension.borderWidth.100}", + "topBorderRadius": "{dimension.radius.300}" + } + }, + "item": { + "focusBackground": "{color.background.neutral.subtleHover}", + "color": "{color.text.default}", + "focusColor": "{color.text.default}", + "gap": "{dimension.space.200}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}", + "icon": { + "color": "{color.text.default}", + "focusColor": "{color.text.default}" + } + }, + "submenu": { + "indent": "{dimension.space.600}" + }, + "separator": { + "borderColor": "{color.border.subtle}" + }, + "submenuIcon": { + "color": "{color.border.strong}", + "focusColor": "{color.border.strong}" + } + }, + "password": { + "extend": { + "borderWidth": "{dimension.borderWidth.100}" + }, + "colorScheme": { + "light": { + "strength": { + "weakBackground": "{color.background.danger.bold}", + "mediumBackground": "{color.background.warning.bold}", + "strongBackground": "{color.background.brand.boldHover}" + }, + "icon": { + "color": "{color.text.muted}" + } + }, + "dark": { + "strength": { + "weakBackground": "{color.background.danger.bold}", + "mediumBackground": "{color.background.warning.bold}", + "strongBackground": "{color.background.brand.boldHover}" + }, + "icon": { + "color": "{color.text.muted}" + } + } + }, + "meter": { + "background": "{color.border.subtle}", + "borderRadius": "{dimension.radius.300}", + "height": "{dimension.size.200}" + }, + "overlay": { + "background": "{color.background.surface.raised}", + "borderColor": "{color.border.default}", + "borderRadius": "{dimension.radius.200}", + "color": "{color.text.default}", + "padding": "{dimension.space.300}", + "shadow": "{shadow.400}" + }, + "content": { + "gap": "{dimension.space.200}" + } + }, + "popover": { + "extend": { + "borderWidth": "{dimension.borderWidth.100}", + "arrow": { + "width": "{dimension.size.250}", + "height": "{dimension.size.200}" + } + }, + "root": { + "background": "{color.background.surface.raised}", + "borderColor": "{color.border.default}", + "color": "{color.text.default}", + "borderRadius": "{dimension.radius.200}", + "shadow": "{shadow.400}", + "gutter": "{dimension.space.300}", + "arrowOffset": "{dimension.space.500}", + "arrowLeft": "0px" + }, + "content": { + "padding": "{dimension.space.300}" + } + }, + "progressbar": { + "label": { + "color": "{color.text.staticDark}", + "fontSize": "{typography.fontSize.100}", + "fontWeight": "{typography.fontWeight.regular}" + }, + "root": { + "background": "{color.border.subtle}", + "borderRadius": "{dimension.radius.300}", + "height": "{dimension.size.300}" + }, + "value": { + "background": "{color.background.brand.bold}" + } + }, + "progressspinner": { + "extend": { + "small": "{dimension.size.300}", + "medium": "{dimension.size.500}", + "large": "{dimension.size.700}", + "xlarge": "{dimension.size.800}" + }, + "colorScheme": { + "light": { + "root": { + "colorOne": "{color.background.brand.bold}", + "colorTwo": "{color.background.info.bold}", + "colorThree": "{color.background.danger.bold}", + "colorFour": "{color.background.warning.bold}" + } + } + }, + "root": { + "borderWidth": "{dimension.size.150}" + } + }, + "radiobutton": { + "root": { + "width": "{dimension.size.400}", + "height": "{dimension.size.400}", + "background": "{color.background.surface.ground}", + "checkedBackground": "{color.border.strong}", + "checkedHoverBackground": "{color.background.surface.inverse}", + "disabledBackground": "{color.background.disabled}", + "filledBackground": "{color.background.surface.ground}", + "borderColor": "{color.border.default}", + "hoverBorderColor": "{color.border.strong}", + "focusBorderColor": "{color.border.default}", + "checkedBorderColor": "{color.border.strong}", + "checkedHoverBorderColor": "{color.border.strong}", + "checkedFocusBorderColor": "{color.border.strong}", + "checkedDisabledBorderColor": "{color.border.default}", + "invalidBorderColor": "{color.border.danger}", + "shadow": "0", + "transitionDuration": "{dimension.duration.200}" + }, + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + }, + "sm": { + "width": "{dimension.size.300}", + "height": "{dimension.size.300}" + }, + "lg": { + "width": "{dimension.size.350}", + "height": "{dimension.size.350}" + }, + "icon": { + "size": "0.7rem", + "checkedColor": "{color.text.onBold}", + "checkedHoverColor": "{color.text.onBold}", + "disabledColor": "{color.text.muted}", + "sm": { + "size": "{dimension.size.200}" + }, + "lg": { + "size": "{dimension.size.300}" + } + } + }, + "rating": { + "root": { + "gap": "{dimension.space.200}", + "transitionDuration": "{dimension.duration.200}" + }, + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + }, + "icon": { + "size": "{dimension.size.400}", + "color": "{color.background.neutral.bold}", + "hoverColor": "{color.background.warning.bold}", + "activeColor": "{color.background.warning.bold}" + } + }, + "ripple": { + "colorScheme": { + "light": { + "root": { + "background": "rgba(255, 255, 255, 0.0100)" + } + } + } + }, + "scrollpanel": { + "colorScheme": { + "light": { + "bar": { + "background": "{color.text.disabled}" + } + } + }, + "root": { + "transitionDuration": "{dimension.duration.200}" + }, + "bar": { + "size": "{dimension.size.200}", + "borderRadius": "{dimension.radius.200}", + "focusRing": { + "width": "0rem", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + } + }, + "select": { + "extend": { + "extOption": { + "background": "{color.background.surface.raised}", + "gap": "{dimension.space.200}" + }, + "extOptionGroup": { + "gap": "{dimension.space.200}" + }, + "readonlyBackground": "{color.background.neutral.subtleHover}", + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": "{dimension.size.300}" + }, + "root": { + "background": "{color.background.surface.ground}", + "disabledBackground": "{color.background.disabled}", + "filledBackground": "{color.background.surface.ground}", + "filledHoverBackground": "{color.background.surface.ground}", + "filledFocusBackground": "{color.background.surface.ground}", + "borderColor": "{color.border.default}", + "hoverBorderColor": "{color.border.brand}", + "focusBorderColor": "{color.border.brand}", + "invalidBorderColor": "{color.border.danger}", + "color": "{color.text.default}", + "disabledColor": "{color.text.muted}", + "placeholderColor": "{color.text.muted}", + "invalidPlaceholderColor": "{color.text.danger}", + "shadow": "0", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.300}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}", + "sm": { + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.200}" + }, + "lg": { + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.400}" + }, + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "0" + } + }, + "dropdown": { + "width": "{dimension.size.600}", + "color": "{color.icon.default}" + }, + "overlay": { + "background": "{color.background.surface.raised}", + "borderColor": "{color.border.subtle}", + "borderRadius": "{dimension.radius.300}", + "color": "{color.text.default}", + "shadow": "{shadow.400}" + }, + "list": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}", + "header": { + "padding": "{dimension.space.400} {dimension.space.400} 0 {dimension.space.400}" + } + }, + "option": { + "focusBackground": "{color.background.surface.hover.section}", + "selectedBackground": "{color.border.strong}", + "selectedFocusBackground": "{color.text.hover.default}", + "color": "{color.text.default}", + "focusColor": "{color.text.default}", + "selectedColor": "{color.text.onBold}", + "selectedFocusColor": "{color.text.onBold}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}" + }, + "optionGroup": { + "background": "{color.background.surface.raised}", + "color": "{color.text.muted}", + "fontWeight": "{typography.fontWeight.regular}", + "padding": "{dimension.space.200} {dimension.space.300}" + }, + "clearIcon": { + "color": "{color.icon.default}" + }, + "checkmark": { + "color": "{color.text.default}", + "gutterStart": "-{dimension.space.200}", + "gutterEnd": "{dimension.space.200}" + }, + "emptyMessage": { + "padding": "{dimension.space.200} {dimension.space.300}" + } + }, + "selectbutton": { + "extend": { + "gap": "{dimension.space.100}", + "paddingX": "{dimension.space.100}", + "paddingY": "{dimension.space.100}", + "checkedBackground": "{color.background.surface.ground}", + "iconSize": { + "sm": "{dimension.size.300}", + "md": "{dimension.size.350}", + "lg": "{dimension.size.400}", + "xlg": "{dimension.size.450}" + }, + "checkedBorderColor": "{color.background.surface.ground}", + "checkedColor": "{color.icon.default}", + "ext": { + "borderRadius": "{dimension.radius.200}" + } + }, + "colorScheme": { + "light": { + "root": { + "invalidBorderColor": "{color.border.danger}" + }, + "extend": { + "background": "{color.background.disabled}" + } + } + }, + "root": { + "borderRadius": "{dimension.radius.300}" + } + }, + "skeleton": { + "extend": { + "minWidth": "{dimension.size.500}", + "height": "{dimension.size.500}" + }, + "colorScheme": { + "light": { + "root": { + "background": "{color.background.disabled}", + "animationBackground": "{color.background.neutral.subtleHover}" + } + } + }, + "root": { + "borderRadius": "{dimension.radius.300}" + } + }, + "slider": { + "colorScheme": { + "handle": { + "content": { + "background": "{color.background.surface.canvas}" + } + } + }, + "root": { + "transitionDuration": "{dimension.duration.200}" + }, + "track": { + "background": "{color.border.subtle}", + "borderRadius": "{dimension.radius.300}", + "size": "{dimension.size.150}" + }, + "range": { + "background": "{color.border.strong}" + }, + "handle": { + "width": "{dimension.size.350}", + "height": "{dimension.size.350}", + "borderRadius": "{dimension.radius.max}", + "background": "{color.border.strong}", + "hoverBackground": "{color.border.strong}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + }, + "content": { + "borderRadius": "{dimension.radius.max}", + "hoverBackground": "{color.border.strong}", + "width": "{dimension.size.250}", + "height": "{dimension.size.250}", + "shadow": "none" + } + } + }, + "splitter": { + "colorScheme": { + "light": { + "handle": { + "background": "{color.border.strong}" + } + } + }, + "gutter": { + "background": "{color.background.neutral.subtleHover}" + }, + "root": { + "background": "{color.background.surface.raised}", + "borderColor": "{color.border.subtle}", + "color": "{color.text.default}", + "transitionDuration": "{dimension.duration.200}" + }, + "handle": { + "size": "{dimension.size.150}", + "borderRadius": "{dimension.radius.300}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + } + }, + "stepper": { + "extend": { + "extCaption": { + "gap": "{dimension.space.100}" + }, + "extStepNumber": { + "invalidBackground": "{color.border.danger}", + "invalidColor": "{color.text.dangerStrong}", + "invalidBorderColor": "{color.border.danger}", + "borderWidth": "{dimension.size.100}", + "iconSize": "{dimension.size.400}" + } + }, + "root": { + "transitionDuration": "{dimension.duration.200}" + }, + "separator": { + "background": "{color.border.subtle}", + "activeBackground": "{color.border.strong}", + "margin": "0 0 0 1.625rem", + "size": "{dimension.size.100}" + }, + "step": { + "padding": "{dimension.space.200}", + "gap": "{dimension.space.200}" + }, + "stepHeader": { + "padding": "0rem", + "borderRadius": "0rem", + "gap": "{dimension.space.200}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + }, + "stepTitle": { + "color": "{color.text.default}", + "activeColor": "{color.text.default}", + "fontWeight": "{typography.fontWeight.regular}" + }, + "stepNumber": { + "background": "{color.background.surface.raised}", + "activeBackground": "{color.background.brand.bold}", + "borderColor": "{color.border.subtle}", + "activeBorderColor": "{color.background.brand.bold}", + "color": "{color.text.default}", + "activeColor": "{color.text.staticDark}", + "size": "{dimension.size.400}", + "fontSize": "{typography.fontSize.300}", + "fontWeight": "{typography.fontWeight.bold}", + "borderRadius": "{dimension.radius.max}", + "shadow": "none" + }, + "steppanels": { + "padding": "{dimension.space.400}" + }, + "steppanel": { + "background": "{color.background.surface.raised}", + "color": "{color.text.default}", + "padding": "0rem", + "indent": "0rem" + } + }, + "steps": { + "itemLink": { + "gap": "{dimension.space.200}" + }, + "itemLabel": { + "fontWeight": "{typography.fontWeight.regular}" + }, + "itemNumber": { + "background": "{color.background.surface.raised}", + "size": "{dimension.size.500}", + "fontSize": "{typography.fontSize.300}", + "fontWeight": "{typography.fontWeight.bold}", + "borderRadius": "{dimension.radius.max}", + "shadow": "none" + } + }, + "tabs": { + "colorScheme": { + "light": { + "navButton": { + "shadow": "none" + }, + "tab": { + "background": "{color.background.transparent}", + "hoverBackground": "{color.background.transparent}", + "activeBackground": "{color.background.transparent}" + } + } + }, + "root": { + "transitionDuration": "{dimension.duration.200}" + }, + "tablist": { + "borderWidth": "0 0 {dimension.size.100} 0", + "background": "{color.background.transparent}", + "borderColor": "{color.border.subtle}" + }, + "tab": { + "borderWidth": "0", + "borderColor": "{color.border.subtle}", + "hoverBorderColor": "{color.border.subtle}", + "activeBorderColor": "{color.border.inverse}", + "color": "{color.text.muted}", + "hoverColor": "{color.text.default}", + "activeColor": "{color.text.default}", + "padding": "{dimension.space.400}", + "fontWeight": "{typography.fontWeight.demibold}", + "margin": "0", + "gap": "{dimension.space.200}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + }, + "tabpanel": { + "background": "{color.background.transparent}", + "color": "{color.text.default}", + "padding": "{dimension.space.400}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + }, + "navButton": { + "background": "{color.background.surface.raised}", + "color": "{color.text.default}", + "hoverColor": "{color.text.hover.default}", + "width": "{dimension.size.400}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + }, + "activeBar": { + "height": "0.18rem", + "bottom": "-0.18rem", + "background": "{color.text.default}" + } + }, + "toast": { + "extend": { + "extInfo": { + "color": "{color.background.info.bold}", + "closeButton": { + "color": "{color.background.info.bold}", + "borderColor": "{color.background.info.bold}" + }, + "caption": { + "color": "{color.text.default}" + } + }, + "extAccentLine": { + "width": "{dimension.size.150}" + }, + "extCloseButton": { + "width": "{dimension.size.100}" + }, + "extSuccess": { + "color": "{color.background.brand.bold}", + "closeButton": { + "color": "{color.background.brand.bold}", + "borderColor": "{color.background.brand.bold}" + }, + "caption": { + "color": "{color.text.default}" + } + }, + "extWarn": { + "color": "{color.background.warning.bold}", + "closeButton": { + "color": "{color.background.warning.bold}", + "borderColor": "{color.background.warning.bold}" + }, + "caption": { + "color": "{color.text.default}" + } + }, + "extError": { + "color": "{color.background.danger.bold}", + "closeButton": { + "color": "{color.background.danger.bold}", + "borderColor": "{color.background.danger.bold}" + }, + "caption": { + "color": "{color.text.default}" + } + } + }, + "colorScheme": { + "light": { + "info": { + "background": "{color.background.info.subtle}", + "borderColor": "{color.background.info.bold}", + "color": "{color.text.default}", + "detailColor": "{color.text.default}", + "shadow": "{shadow.400}", + "closeButton": { + "hoverBackground": "{color.focusRing.info}", + "focusRing": { + "color": "{color.focusRing.success}", + "shadow": "{shadow.200}" + } + } + }, + "success": { + "background": "{color.background.brand.subtle}", + "borderColor": "{color.background.brand.bold}", + "color": "{color.text.default}", + "detailColor": "{color.text.default}", + "shadow": "{shadow.400}", + "closeButton": { + "hoverBackground": "{color.focusRing.success}", + "focusRing": { + "color": "{color.focusRing.success}", + "shadow": "{shadow.200}" + } + } + }, + "warn": { + "background": "{color.background.warning.subtle}", + "borderColor": "{color.background.warning.bold}", + "color": "{color.text.default}", + "detailColor": "{color.text.default}", + "shadow": "{shadow.400}", + "closeButton": { + "hoverBackground": "{color.focusRing.warning}", + "focusRing": { + "color": "{color.focusRing.success}", + "shadow": "none" + } + } + }, + "error": { + "background": "{color.background.danger.subtle}", + "borderColor": "{color.background.danger.bold}", + "color": "{color.text.default}", + "detailColor": "{color.text.default}", + "shadow": "{shadow.400}", + "closeButton": { + "hoverBackground": "{color.focusRing.invalid}", + "focusRing": { + "color": "{color.focusRing.success}", + "shadow": "{shadow.200}" + } + } + }, + "secondary": { + "shadow": "{shadow.400}" + }, + "contrast": { + "shadow": "{shadow.400}" + } + } + }, + "root": { + "width": "{dimension.overlayWidth.base}", + "borderWidth": "{dimension.size.100}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}" + }, + "icon": { + "size": "{dimension.size.550}" + }, + "content": { + "padding": "{dimension.space.400}", + "gap": "{dimension.space.400}" + }, + "text": { + "gap": "{dimension.space.100}" + }, + "summary": { + "fontWeight": "{typography.fontWeight.bold}", + "fontSize": "{typography.fontSize.300}" + }, + "detail": { + "fontWeight": "{typography.fontWeight.regular}", + "fontSize": "{typography.fontSize.200}" + }, + "closeButton": { + "width": "{dimension.size.500}", + "height": "{dimension.size.500}", + "borderRadius": "{dimension.radius.300}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "offset": "{dimension.focusRing.offset}" + } + }, + "closeIcon": { + "size": "{dimension.size.300}" + } + }, + "tag": { + "colorScheme": { + "light": { + "primary": { + "background": "{color.background.brand.bold}", + "color": "{color.text.default}" + }, + "secondary": { + "background": "{color.background.disabled}", + "color": "{color.text.default}" + }, + "success": { + "background": "{color.border.success}", + "color": "{color.text.successStrong}" + }, + "info": { + "background": "{color.border.infoSubtle}", + "color": "{color.text.infoStrong}" + }, + "warn": { + "background": "{color.border.warningSubtle}", + "color": "{color.text.warningStrong}" + }, + "danger": { + "background": "{color.border.dangerSubtle}", + "color": "{color.text.dangerStrong}" + } + } + }, + "root": { + "fontSize": "{typography.fontSize.100}", + "fontWeight": "{typography.fontWeight.regular}", + "padding": "{dimension.space.100} {dimension.space.200}", + "gap": "{dimension.space.100}", + "borderRadius": "{dimension.size.200}", + "roundedBorderRadius": "{dimension.radius.500}" + }, + "icon": { + "size": "{dimension.size.300}" + } + }, + "textarea": { + "extend": { + "readonlyBackground": "{color.background.neutral.subtleHover}", + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": "{dimension.size.300}", + "minHeight": "{dimension.size.900}", + "extXlg": { + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.500}" + } + }, + "root": { + "background": "{color.background.surface.ground}", + "disabledBackground": "{color.background.disabled}", + "filledBackground": "{color.background.surface.ground}", + "filledHoverBackground": "{color.background.surface.ground}", + "filledFocusBackground": "{color.background.surface.ground}", + "borderColor": "{color.border.default}", + "hoverBorderColor": "{color.border.brand}", + "focusBorderColor": "{color.border.brand}", + "invalidBorderColor": "{color.border.danger}", + "color": "{color.icon.default}", + "disabledColor": "{color.text.muted}", + "placeholderColor": "{color.text.muted}", + "invalidPlaceholderColor": "{color.text.danger}", + "shadow": "0", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.300}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "0" + }, + "sm": { + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.200}" + }, + "lg": { + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.400}" + } + } + }, + "tieredmenu": { + "extend": { + "extSubmenu": { + "borderColor": "{color.border.subtle}", + "background": "{color.background.surface.raised}" + }, + "iconSize": "{typography.fontSize.500}", + "extItem": { + "caption": { + "gap": "{dimension.space.100}", + "color": "{color.text.muted}" + } + } + }, + "root": { + "background": "{color.background.surface.raised}", + "borderColor": "{color.background.transparent}", + "color": "{color.text.default}", + "borderRadius": "{dimension.radius.300}", + "shadow": "{shadow.400}", + "transitionDuration": "{dimension.duration.200}" + }, + "list": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + }, + "item": { + "focusBackground": "{color.background.neutral.subtleHover}", + "activeBackground": "{color.border.strong}", + "color": "{color.text.default}", + "focusColor": "{color.text.default}", + "activeColor": "{color.text.onBold}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}", + "gap": "{dimension.space.200}", + "icon": { + "color": "{color.text.default}", + "focusColor": "{color.text.default}", + "activeColor": "{color.text.onBold}" + } + }, + "submenu": { + "mobileIndent": "{dimension.space.300}" + }, + "separator": { + "borderColor": "{color.border.subtle}" + } + }, + "timeline": { + "extend": { + "extEvent": { + "gap": "{dimension.space.100}" + } + }, + "event": { + "minHeight": "{dimension.size.800}" + }, + "vertical": { + "eventContent": { + "padding": "0 {dimension.space.200}" + } + }, + "horizontal": { + "eventContent": { + "padding": "{dimension.space.200} 0" + } + }, + "eventMarker": { + "size": "{dimension.size.300}", + "borderRadius": "{dimension.radius.300}", + "borderWidth": "{dimension.size.150}", + "background": "{color.background.surface.raised}", + "borderColor": "{color.background.brand.bold}", + "content": { + "borderRadius": "{dimension.radius.300}", + "size": "{dimension.size.250}", + "background": "{color.background.transparent}", + "insetShadow": "none" + } + }, + "eventConnector": { + "color": "{color.border.subtle}", + "size": "{dimension.size.100}" + }, + "colorScheme": { + "light": { + "eventMarker": { + "background": "{color.background.surface.raised}", + "borderColor": "{color.background.brand.bold}" + } + }, + "dark": { + "eventMarker": { + "background": "{color.background.surface.raised}", + "borderColor": "{color.background.brand.bold}" + } + } + } + }, + "togglebutton": { + "extend": { + "ext": { + "gap": "{dimension.space.300}" + }, + "iconSize": { + "sm": "{dimension.size.300}", + "md": "{dimension.size.350}", + "lg": "{dimension.size.400}" + }, + "iconOnlyWidth": "{dimension.size.600}", + "hoverBorderColor": "{color.text.disabled}", + "checkedHoverColor": "{color.text.onBold}", + "checkedHoverBackground": "{color.background.surface.inverse}", + "checkedHoverBorderColor": "{color.background.surface.inverse}", + "extXlg": { + "padding": "{dimension.space.500} {dimension.space.600}", + "iconOnlyWidth": "4.0714rem" + }, + "extSm": { + "iconOnlyWidth": "2.1429rem" + }, + "extLg": { + "iconOnlyWidth": "3.5714rem" + } + }, + "colorScheme": { + "light": { + "root": { + "background": "{color.background.disabled}", + "hoverBackground": "{color.text.disabled}", + "borderColor": "{color.background.disabled}", + "color": "{color.text.default}", + "hoverColor": "{color.text.default}", + "checkedBackground": "{color.border.strong}", + "checkedColor": "{color.text.onBold}", + "checkedBorderColor": "{color.border.strong}", + "disabledBackground": "{color.background.disabled}", + "disabledBorderColor": "{color.background.disabled}", + "disabledColor": "{color.text.muted}", + "invalidBorderColor": "{color.border.danger}" + }, + "icon": { + "color": "{color.text.default}", + "hoverColor": "{color.text.default}", + "checkedColor": "{color.text.onBold}", + "disabledColor": "{color.text.muted}" + }, + "content": { + "checkedBackground": "{color.background.transparent}" + } + } + }, + "root": { + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.radius.max}", + "gap": "{dimension.space.200}", + "fontWeight": "{typography.fontWeight.demibold}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + }, + "sm": { + "fontSize": "{typography.fontSize.200}", + "padding": "{dimension.space.100} {dimension.space.300}" + }, + "lg": { + "fontSize": "{typography.fontSize.500}", + "padding": "{dimension.space.400} {dimension.space.600}" + }, + "transitionDuration": "{dimension.duration.200}" + }, + "content": { + "checkedShadow": "none", + "padding": "0rem", + "borderRadius": "0rem", + "sm": { + "padding": "0rem" + }, + "lg": { + "padding": "0rem" + } + } + }, + "toggleswitch": { + "colorScheme": { + "light": { + "root": { + "background": "{color.text.hover.subtle}", + "hoverBackground": "{color.background.neutral.bold}", + "disabledBackground": "{color.background.disabled}", + "checkedBackground": "{color.border.strong}", + "checkedHoverBackground": "{color.background.surface.inverse}" + }, + "handle": { + "background": "{color.text.staticLight}", + "hoverBackground": "{color.text.staticLight}", + "disabledBackground": "{color.text.muted}", + "checkedBackground": "{color.background.surface.canvas}", + "checkedHoverBackground": "{color.background.surface.canvas}", + "color": "{color.text.default}", + "hoverColor": "{color.text.default}", + "checkedColor": "{color.text.default}", + "checkedHoverColor": "{color.text.default}" + } + } + }, + "root": { + "width": "{dimension.size.600}", + "height": "{dimension.size.400}", + "borderRadius": "{dimension.radius.max}", + "gap": "{dimension.space.100}", + "borderWidth": "{dimension.borderWidth.100}", + "shadow": "none", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{color.focusRing.success}", + "offset": "{dimension.focusRing.offset}", + "shadow": "0" + }, + "borderColor": "{color.background.transparent}", + "hoverBorderColor": "{color.background.transparent}", + "checkedBorderColor": "{color.background.transparent}", + "checkedHoverBorderColor": "{color.background.transparent}", + "invalidBorderColor": "{color.border.danger}", + "transitionDuration": "{dimension.duration.200}", + "slideDuration": "{dimension.duration.200}" + }, + "handle": { + "borderRadius": "{dimension.radius.max}", + "size": "{dimension.size.300}" + } + }, + "tooltip": { + "colorScheme": { + "light": { + "root": { + "background": "{color.border.strong}", + "color": "{color.text.onBold}" + } + } + }, + "root": { + "maxWidth": "{dimension.overlayWidth.base}", + "gutter": "{dimension.space.100}", + "shadow": "{shadow.400}", + "padding": "{dimension.space.200} {dimension.space.400} ", + "borderRadius": "{dimension.radius.200}" + } + }, + "tree": { + "root": { + "background": "{color.background.surface.raised}", + "color": "{color.text.default}", + "padding": "{dimension.space.400}", + "gap": "{dimension.space.100}", + "indent": "{dimension.space.400}" + }, + "node": { + "padding": "{dimension.space.200} {dimension.space.300}", + "color": "{color.text.default}", + "selectedColor": "{color.text.onBold}", + "gap": "{dimension.space.100}" + }, + "nodeIcon": { + "selectedColor": "{color.text.onBold}" + }, + "nodeToggleButton": { + "borderRadius": "{dimension.radius.100}", + "size": "{dimension.size.450}", + "selectedHoverBackground": "{color.border.strong}" + }, + "loadingIcon": { + "size": "{dimension.size.300}" + }, + "filter": { + "margin": "0 0 {dimension.space.200} 0" + } + }, + "overlaybadge": { + "root": { + "outline": { + "width": "0rem", + "color": "{color.background.transparent}" + } + } + } + } +} \ No newline at end of file From 2aed3ec5f1f0f0cca827ebc0cd3c6880a5a04c39 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Thu, 18 Jun 2026 16:37:01 +0800 Subject: [PATCH 02/46] =?UTF-8?q?=D0=BF=D0=BE=D1=87=D0=B8=D0=BD=D0=B8?= =?UTF-8?q?=D1=82=D1=8C=20=D1=81=D0=B1=D0=BE=D1=80=D0=BA=D1=83=20storybook?= =?UTF-8?q?:=20index.ts=20=D0=B4=D0=BB=D1=8F=20lib/shared=20=D0=B8=20baseU?= =?UTF-8?q?rl=20=D0=B2=20tsconfig?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/shared/index.ts | 1 + tsconfig.json | 1 + 2 files changed, 2 insertions(+) create mode 100644 src/lib/shared/index.ts diff --git a/src/lib/shared/index.ts b/src/lib/shared/index.ts new file mode 100644 index 00000000..4aaf8f92 --- /dev/null +++ b/src/lib/shared/index.ts @@ -0,0 +1 @@ +export * from './public_api'; diff --git a/tsconfig.json b/tsconfig.json index 28fa071e..cb8928d7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,6 +14,7 @@ "importHelpers": true, "target": "ES2022", "module": "preserve", + "baseUrl": ".", "paths": { "@cdek-it/angular-ui-kit": ["src/lib/public_api.ts"], "@cdek-it/angular-ui-kit/*": ["src/lib/*/public_api.ts"] From 0e94b80c8e1a7bd016e79d57b17d9ec5feea7e6c Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Thu, 18 Jun 2026 16:39:30 +0800 Subject: [PATCH 03/46] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D1=82=D1=8C=20=D0=B2=D0=B0=D0=BB=D0=B8=D0=B4=D0=B0=D1=82=D0=BE?= =?UTF-8?q?=D1=80=20=D1=8D=D0=BA=D0=B2=D0=B8=D0=B2=D0=B0=D0=BB=D0=B5=D0=BD?= =?UTF-8?q?=D1=82=D0=BD=D0=BE=D1=81=D1=82=D0=B8=20=D1=82=D0=BE=D0=BA=D0=B5?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2=20(equiv/dangling/R11,=20=D1=81=20=D1=83?= =?UTF-8?q?=D1=87=D1=91=D1=82=D0=BE=D0=BC=20colorScheme)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/tokens/validate.py | 63 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 scripts/tokens/validate.py diff --git a/scripts/tokens/validate.py b/scripts/tokens/validate.py new file mode 100644 index 00000000..8d8ec7cd --- /dev/null +++ b/scripts/tokens/validate.py @@ -0,0 +1,63 @@ +import json, re, sys +BASE="src/lib/providers/prime-preset/tokens/tokens.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=json.load(open(BASE)); new=json.load(open(cand)) + # 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__": + FAIL=False; main(sys.argv[1]) + sys.exit(1 if FAIL else 0) From f8eb3681a3fbd5212c997e412d11fe6b5e183464 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Thu, 18 Jun 2026 16:43:21 +0800 Subject: [PATCH 04/46] =?UTF-8?q?=D0=B3=D0=B5=D0=BD=D0=B5=D1=80=D0=B0?= =?UTF-8?q?=D1=82=D0=BE=D1=80=20=D0=B1=D0=BE=D0=B5=D0=B2=D1=8B=D1=85=20?= =?UTF-8?q?=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D0=BE=D0=B2:=20=D0=BD=D0=BE?= =?UTF-8?q?=D0=B2=D0=B0=D1=8F=20=D0=BC=D0=BE=D0=B4=D0=B5=D0=BB=D1=8C=20+?= =?UTF-8?q?=20backward-compat=20(equiv=201:1,=20dangling=200,=20R11=200)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/tokens/build_tokens.py | 23 + .../prime-preset/tokens/tokens.migrated.json | 5869 +++++++++++++++++ 2 files changed, 5892 insertions(+) create mode 100644 scripts/tokens/build_tokens.py create mode 100644 src/lib/providers/prime-preset/tokens/tokens.migrated.json diff --git a/scripts/tokens/build_tokens.py b/scripts/tokens/build_tokens.py new file mode 100644 index 00000000..7357d640 --- /dev/null +++ b/scripts/tokens/build_tokens.py @@ -0,0 +1,23 @@ +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/src/lib/providers/prime-preset/tokens/tokens.migrated.json b/src/lib/providers/prime-preset/tokens/tokens.migrated.json new file mode 100644 index 00000000..6f3ad90b --- /dev/null +++ b/src/lib/providers/prime-preset/tokens/tokens.migrated.json @@ -0,0 +1,5869 @@ +{ + "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" + }, + "size": { + "none": "0rem", + "min": "0.0714rem", + "2px": "0.1429rem", + "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", + "pill": "71.3571rem", + "max": "100%" + } + }, + "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": "{shadow.200}", + "extend": { + "invalid": "{colors.solid.red.200}", + "success": "{colors.solid.green.200}", + "warning": "{colors.solid.yellow.200}", + "info": "{colors.solid.blue.200}" + }, + "default": "{colors.solid.green.500}", + "invalid": "{colors.solid.red.200}", + "success": "{colors.solid.green.200}", + "warning": "{colors.solid.yellow.200}", + "info": "{colors.solid.blue.200}", + "help": "{colors.solid.purple.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}", + "default": "{colors.solid.zinc.900}", + "subtle": "{colors.solid.zinc.600}", + "muted": "{colors.solid.zinc.500}", + "placeholder": "{colors.solid.zinc.500}", + "disabled": "{colors.solid.zinc.300}", + "onBold": "{colors.alpha.white.1000}", + "staticDark": "{colors.solid.zinc.900}", + "staticLight": "{colors.alpha.white.1000}", + "brand": "{colors.solid.green.600}", + "link": "{colors.solid.green.600}", + "linkHover": "{colors.solid.green.700}", + "success": "{colors.solid.green.700}", + "info": "{colors.solid.blue.600}", + "warning": "{colors.solid.yellow.600}", + "danger": "{colors.solid.red.600}", + "neutral": "{colors.solid.zinc.600}", + "help": "{colors.solid.purple.600}", + "successStrong": "{colors.solid.green.900}", + "infoStrong": "{colors.solid.blue.900}", + "warningStrong": "{colors.solid.yellow.900}", + "dangerStrong": "{colors.solid.red.900}", + "helpStrong": "{colors.solid.purple.900}", + "hover": { + "default": "{colors.solid.zinc.700}", + "subtle": "{colors.solid.zinc.400}", + "muted": "{colors.solid.zinc.300}", + "brand": "{colors.solid.green.700}" + }, + "defaultHover": "{colors.solid.zinc.950}", + "neutralHover": "{colors.solid.zinc.950}", + "infoDeepest": "{colors.solid.blue.950}", + "successDeepest": "{colors.solid.green.950}", + "warningDeepest": "{colors.solid.yellow.950}", + "helpDeepest": "{colors.solid.purple.950}", + "dangerDeepest": "{colors.solid.red.950}", + "successBold": "{colors.solid.green.500}", + "infoBold": "{colors.solid.blue.500}", + "warningBold": "{colors.solid.yellow.500}", + "helpBold": "{colors.solid.purple.500}", + "dangerBold": "{colors.solid.red.500}", + "transparent": "rgba(255, 255, 255, 0.0001)" + }, + "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}" + }, + "background": { + "surface": { + "ground": "{colors.alpha.white.1000}", + "section": "{colors.solid.zinc.50}", + "raised": "{colors.alpha.white.1000}", + "overlay": "{colors.alpha.white.1000}", + "sunken": "{colors.solid.zinc.100}", + "canvas": "{colors.alpha.white.1000}", + "inverse": "{colors.solid.zinc.800}", + "inverseStrong": "{colors.solid.zinc.950}", + "hover": { + "section": "{colors.solid.zinc.100}", + "raised": "{colors.solid.zinc.100}" + } + }, + "brand": { + "subtle": "{colors.solid.green.50}", + "subtleHover": "{colors.solid.green.100}", + "bold": "{colors.solid.green.500}", + "boldHover": "{colors.solid.green.600}", + "boldActive": "{colors.solid.green.700}" + }, + "success": { + "subtle": "{colors.solid.green.50}", + "subtleHover": "{colors.solid.green.100}", + "indicator": "{colors.solid.green.400}", + "bold": "{colors.solid.green.500}", + "boldHover": "{colors.solid.green.600}", + "deep": "{colors.solid.green.900}", + "mutedBorder": "{colors.solid.green.300}", + "border": "{colors.solid.green.400}", + "subtleActive": "{colors.solid.green.200}" + }, + "info": { + "subtle": "{colors.solid.blue.50}", + "subtleHover": "{colors.solid.blue.100}", + "bold": "{colors.solid.blue.500}", + "boldHover": "{colors.solid.blue.600}", + "deep": "{colors.solid.blue.900}", + "border": "{colors.solid.blue.400}", + "mutedBorder": "{colors.solid.blue.300}", + "subtleActive": "{colors.solid.blue.200}" + }, + "warning": { + "subtle": "{colors.solid.yellow.50}", + "subtleHover": "{colors.solid.yellow.100}", + "bold": "{colors.solid.yellow.500}", + "boldHover": "{colors.solid.yellow.600}", + "deep": "{colors.solid.yellow.900}", + "border": "{colors.solid.yellow.400}", + "mutedBorder": "{colors.solid.yellow.300}", + "subtleActive": "{colors.solid.yellow.200}" + }, + "danger": { + "subtle": "{colors.solid.red.50}", + "subtleHover": "{colors.solid.red.100}", + "bold": "{colors.solid.red.500}", + "boldHover": "{colors.solid.red.600}", + "deep": "{colors.solid.red.900}", + "border": "{colors.solid.red.400}", + "mutedBorder": "{colors.solid.red.300}", + "subtleActive": "{colors.solid.red.200}" + }, + "neutral": { + "subtle": "{colors.solid.zinc.50}", + "subtleHover": "{colors.solid.zinc.100}", + "bold": "{colors.solid.zinc.500}", + "boldHover": "{colors.solid.zinc.600}" + }, + "help": { + "subtle": "{colors.solid.purple.50}", + "subtleHover": "{colors.solid.purple.100}", + "bold": "{colors.solid.purple.500}", + "boldHover": "{colors.solid.purple.600}", + "deep": "{colors.solid.purple.900}", + "mutedBorder": "{colors.solid.purple.300}", + "border": "{colors.solid.purple.400}", + "subtleActive": "{colors.solid.purple.200}" + }, + "selected": "{colors.solid.zinc.900}", + "disabled": "{colors.solid.zinc.200}", + "scrim": { + "default": "{colors.alpha.black.400}", + "modal": "{colors.alpha.black.300}" + }, + "translucent": { + "light": { + "subtle": "{colors.alpha.white.100}", + "default": "{colors.alpha.white.200}", + "strong": "{colors.alpha.white.500}" + }, + "dark": { + "default": "{colors.alpha.black.500}" + } + }, + "transparent": "rgba(255, 255, 255, 0.0001)", + "selectedStrong": "{colors.solid.zinc.700}" + }, + "border": { + "subtle": "{colors.solid.zinc.200}", + "default": "{colors.solid.zinc.300}", + "strong": "{colors.solid.zinc.900}", + "disabled": "{colors.solid.zinc.200}", + "brand": "{colors.solid.green.600}", + "success": "{colors.solid.green.400}", + "info": "{colors.solid.blue.400}", + "warning": "{colors.solid.yellow.400}", + "danger": "{colors.solid.red.400}", + "neutral": "{colors.solid.zinc.400}", + "help": "{colors.solid.purple.400}", + "inverse": "{colors.solid.zinc.800}", + "successSubtle": "{colors.solid.green.300}", + "infoSubtle": "{colors.solid.blue.300}", + "warningSubtle": "{colors.solid.yellow.300}", + "dangerSubtle": "{colors.solid.red.300}", + "helpSubtle": "{colors.solid.purple.300}", + "transparent": "rgba(255, 255, 255, 0.0001)", + "checked": "{colors.solid.green.500}", + "successSubtleActive": "{colors.solid.green.200}", + "infoBoldHover": "{colors.solid.blue.600}", + "warningBoldHover": "{colors.solid.yellow.600}", + "helpBoldHover": "{colors.solid.purple.600}", + "dangerBoldHover": "{colors.solid.red.600}", + "infoBold": "{colors.solid.blue.500}", + "warningBold": "{colors.solid.yellow.500}", + "helpBold": "{colors.solid.purple.500}", + "dangerBold": "{colors.solid.red.500}" + }, + "icon": { + "default": "{colors.solid.zinc.950}", + "subtle": "{colors.solid.zinc.500}", + "disabled": "{colors.solid.zinc.300}", + "onBold": "{colors.alpha.white.1000}", + "brand": "{colors.solid.green.600}", + "success": "{colors.solid.green.600}", + "info": "{colors.solid.blue.600}", + "warning": "{colors.solid.yellow.600}", + "danger": "{colors.solid.red.600}", + "neutral": "{colors.solid.zinc.600}", + "help": "{colors.solid.purple.600}", + "strong": "{colors.solid.zinc.900}", + "strongMuted": "{colors.solid.zinc.900}", + "strongHover": "{colors.solid.zinc.700}" + }, + "ound": { + "info": { + "border": "{colors.solid.blue.400}", + "mutedBorder": "{colors.solid.blue.300}", + "subtleActive": "{colors.solid.blue.200}", + "deep": "{colors.solid.blue.900}" + }, + "warning": { + "border": "{colors.solid.yellow.400}", + "mutedBorder": "{colors.solid.yellow.300}", + "subtleActive": "{colors.solid.yellow.200}", + "deep": "{colors.solid.yellow.900}" + }, + "danger": { + "border": "{colors.solid.red.400}", + "mutedBorder": "{colors.solid.red.300}", + "subtleActive": "{colors.solid.red.200}", + "deep": "{colors.solid.red.900}" + }, + "success": { + "mutedBorder": "{colors.solid.green.300}", + "border": "{colors.solid.green.400}", + "subtleActive": "{colors.solid.green.200}", + "deep": "{colors.solid.green.900}" + }, + "help": { + "mutedBorder": "{colors.solid.purple.300}", + "border": "{colors.solid.purple.400}", + "subtleActive": "{colors.solid.purple.200}", + "deep": "{colors.solid.purple.900}" + } + }, + "nfo": { + "deepest": "{colors.solid.blue.950}", + "bold": "{colors.solid.blue.500}" + }, + "uccess": { + "deepest": "{colors.solid.green.950}", + "bold": "{colors.solid.green.500}" + }, + "arning": { + "deepest": "{colors.solid.yellow.950}", + "bold": "{colors.solid.yellow.500}" + }, + "elp": { + "deepest": "{colors.solid.purple.950}", + "bold": "{colors.solid.purple.500}" + }, + "anger": { + "deepest": "{colors.solid.red.950}", + "bold": "{colors.solid.red.500}" + }, + "": { + "success": { + "subtleActive": "{colors.solid.green.200}" + }, + "info": { + "boldHover": "{colors.solid.blue.600}", + "bold": "{colors.solid.blue.500}" + }, + "warning": { + "boldHover": "{colors.solid.yellow.600}", + "bold": "{colors.solid.yellow.500}" + }, + "help": { + "boldHover": "{colors.solid.purple.600}", + "bold": "{colors.solid.purple.500}" + }, + "danger": { + "boldHover": "{colors.solid.red.600}", + "bold": "{colors.solid.red.500}" + } + }, + "ransparent": "rgba(255, 255, 255, 0.0001)" + }, + "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": "{shadow.200}", + "extend": { + "invalid": "{colors.solid.red.800}", + "success": "{colors.solid.green.800}", + "warning": "{colors.solid.yellow.800}", + "info": "{colors.solid.blue.800}" + }, + "default": "{colors.solid.green.500}", + "invalid": "{colors.solid.red.800}", + "success": "{colors.solid.green.800}", + "warning": "{colors.solid.yellow.800}", + "info": "{colors.solid.blue.800}", + "help": "{colors.solid.purple.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}", + "default": "{colors.alpha.white.1000}", + "subtle": "{colors.solid.zinc.400}", + "muted": "{colors.solid.zinc.500}", + "placeholder": "{colors.solid.zinc.500}", + "disabled": "{colors.solid.zinc.700}", + "onBold": "{colors.solid.zinc.900}", + "staticDark": "{colors.solid.zinc.900}", + "staticLight": "{colors.alpha.white.1000}", + "brand": "{colors.solid.green.400}", + "link": "{colors.solid.green.400}", + "linkHover": "{colors.solid.green.300}", + "success": "{colors.solid.green.400}", + "info": "{colors.solid.blue.400}", + "warning": "{colors.solid.yellow.400}", + "danger": "{colors.solid.red.400}", + "neutral": "{colors.solid.zinc.400}", + "help": "{colors.solid.purple.400}", + "successStrong": "{colors.solid.green.100}", + "infoStrong": "{colors.solid.blue.100}", + "warningStrong": "{colors.solid.yellow.100}", + "dangerStrong": "{colors.solid.red.100}", + "helpStrong": "{colors.solid.purple.100}", + "hover": { + "default": "{colors.solid.zinc.300}", + "subtle": "{colors.solid.zinc.600}", + "muted": "{colors.solid.zinc.700}", + "brand": "{colors.solid.green.300}" + }, + "defaultHover": "{colors.alpha.white.1000}", + "neutralHover": "{colors.solid.zinc.50}", + "infoDeepest": "{colors.solid.blue.50}", + "successDeepest": "{colors.solid.green.50}", + "warningDeepest": "{colors.solid.yellow.50}", + "helpDeepest": "{colors.solid.purple.50}", + "dangerDeepest": "{colors.solid.red.50}", + "successBold": "{colors.solid.green.500}", + "infoBold": "{colors.solid.blue.500}", + "warningBold": "{colors.solid.yellow.500}", + "helpBold": "{colors.solid.purple.500}", + "dangerBold": "{colors.solid.red.500}", + "transparent": "rgba(0, 0, 0, 0.0001)" + }, + "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}" + }, + "background": { + "surface": { + "ground": "{colors.solid.zinc.950}", + "section": "{colors.solid.zinc.900}", + "raised": "{colors.solid.zinc.900}", + "overlay": "{colors.solid.zinc.900}", + "sunken": "{colors.solid.zinc.950}", + "canvas": "{colors.alpha.black.1000}", + "inverse": "{colors.solid.zinc.200}", + "inverseStrong": "{colors.solid.zinc.50}", + "hover": { + "section": "{colors.solid.zinc.800}", + "raised": "{colors.solid.zinc.800}" + } + }, + "brand": { + "subtle": "{colors.solid.green.950}", + "subtleHover": "{colors.solid.green.900}", + "bold": "{colors.solid.green.500}", + "boldHover": "{colors.solid.green.400}", + "boldActive": "{colors.solid.green.300}" + }, + "success": { + "subtle": "{colors.solid.green.950}", + "subtleHover": "{colors.solid.green.900}", + "indicator": "{colors.solid.green.400}", + "bold": "{colors.solid.green.500}", + "boldHover": "{colors.solid.green.400}", + "deep": "{colors.solid.green.100}", + "mutedBorder": "{colors.solid.green.700}", + "border": "{colors.solid.green.600}", + "subtleActive": "{colors.solid.green.800}" + }, + "info": { + "subtle": "{colors.solid.blue.950}", + "subtleHover": "{colors.solid.blue.900}", + "bold": "{colors.solid.blue.500}", + "boldHover": "{colors.solid.blue.400}", + "deep": "{colors.solid.blue.100}", + "border": "{colors.solid.blue.600}", + "mutedBorder": "{colors.solid.blue.700}", + "subtleActive": "{colors.solid.blue.800}" + }, + "warning": { + "subtle": "{colors.solid.yellow.950}", + "subtleHover": "{colors.solid.yellow.900}", + "bold": "{colors.solid.yellow.500}", + "boldHover": "{colors.solid.yellow.400}", + "deep": "{colors.solid.yellow.100}", + "border": "{colors.solid.yellow.600}", + "mutedBorder": "{colors.solid.yellow.700}", + "subtleActive": "{colors.solid.yellow.800}" + }, + "danger": { + "subtle": "{colors.solid.red.950}", + "subtleHover": "{colors.solid.red.900}", + "bold": "{colors.solid.red.500}", + "boldHover": "{colors.solid.red.400}", + "deep": "{colors.solid.red.100}", + "border": "{colors.solid.red.600}", + "mutedBorder": "{colors.solid.red.700}", + "subtleActive": "{colors.solid.red.800}" + }, + "neutral": { + "subtle": "{colors.solid.zinc.950}", + "subtleHover": "{colors.solid.zinc.900}", + "bold": "{colors.solid.zinc.500}", + "boldHover": "{colors.solid.zinc.400}" + }, + "help": { + "subtle": "{colors.solid.purple.950}", + "subtleHover": "{colors.solid.purple.900}", + "bold": "{colors.solid.purple.500}", + "boldHover": "{colors.solid.purple.400}", + "deep": "{colors.solid.purple.100}", + "mutedBorder": "{colors.solid.purple.700}", + "border": "{colors.solid.purple.600}", + "subtleActive": "{colors.solid.purple.800}" + }, + "selected": "{colors.solid.zinc.100}", + "disabled": "{colors.solid.zinc.800}", + "scrim": { + "default": "{colors.alpha.black.600}", + "modal": "{colors.alpha.black.300}" + }, + "translucent": { + "light": { + "subtle": "{colors.alpha.white.100}", + "default": "{colors.alpha.white.200}", + "strong": "{colors.alpha.white.500}" + }, + "dark": { + "default": "{colors.alpha.black.500}" + } + }, + "transparent": "rgba(0, 0, 0, 0.0001)", + "selectedStrong": "{colors.solid.zinc.300}" + }, + "border": { + "subtle": "{colors.solid.zinc.800}", + "default": "{colors.solid.zinc.700}", + "strong": "{colors.solid.zinc.100}", + "disabled": "{colors.solid.zinc.800}", + "brand": "{colors.solid.green.400}", + "success": "{colors.solid.green.600}", + "info": "{colors.solid.blue.600}", + "warning": "{colors.solid.yellow.600}", + "danger": "{colors.solid.red.600}", + "neutral": "{colors.solid.zinc.600}", + "help": "{colors.solid.purple.600}", + "inverse": "{colors.solid.zinc.200}", + "successSubtle": "{colors.solid.green.700}", + "infoSubtle": "{colors.solid.blue.700}", + "warningSubtle": "{colors.solid.yellow.700}", + "dangerSubtle": "{colors.solid.red.700}", + "helpSubtle": "{colors.solid.purple.700}", + "transparent": "rgba(0, 0, 0, 0.0001)", + "checked": "{colors.solid.green.500}", + "successSubtleActive": "{colors.solid.green.800}", + "infoBoldHover": "{colors.solid.blue.400}", + "warningBoldHover": "{colors.solid.yellow.400}", + "helpBoldHover": "{colors.solid.purple.400}", + "dangerBoldHover": "{colors.solid.red.400}", + "infoBold": "{colors.solid.blue.500}", + "warningBold": "{colors.solid.yellow.500}", + "helpBold": "{colors.solid.purple.500}", + "dangerBold": "{colors.solid.red.500}" + }, + "icon": { + "default": "{colors.alpha.white.1000}", + "subtle": "{colors.solid.zinc.500}", + "disabled": "{colors.solid.zinc.700}", + "onBold": "{colors.solid.zinc.900}", + "brand": "{colors.solid.green.400}", + "success": "{colors.solid.green.400}", + "info": "{colors.solid.blue.400}", + "warning": "{colors.solid.yellow.400}", + "danger": "{colors.solid.red.400}", + "neutral": "{colors.solid.zinc.400}", + "help": "{colors.solid.purple.400}", + "strong": "{colors.alpha.white.1000}", + "strongMuted": "{colors.solid.zinc.100}", + "strongHover": "{colors.solid.zinc.300}" + }, + "ound": { + "info": { + "border": "{colors.solid.blue.600}", + "mutedBorder": "{colors.solid.blue.700}", + "subtleActive": "{colors.solid.blue.800}", + "deep": "{colors.solid.blue.100}" + }, + "warning": { + "border": "{colors.solid.yellow.600}", + "mutedBorder": "{colors.solid.yellow.700}", + "subtleActive": "{colors.solid.yellow.800}", + "deep": "{colors.solid.yellow.100}" + }, + "danger": { + "border": "{colors.solid.red.600}", + "mutedBorder": "{colors.solid.red.700}", + "subtleActive": "{colors.solid.red.800}", + "deep": "{colors.solid.red.100}" + }, + "success": { + "mutedBorder": "{colors.solid.green.700}", + "border": "{colors.solid.green.600}", + "subtleActive": "{colors.solid.green.800}", + "deep": "{colors.solid.green.100}" + }, + "help": { + "mutedBorder": "{colors.solid.purple.700}", + "border": "{colors.solid.purple.600}", + "subtleActive": "{colors.solid.purple.800}", + "deep": "{colors.solid.purple.100}" + } + }, + "nfo": { + "deepest": "{colors.solid.blue.50}", + "bold": "{colors.solid.blue.500}" + }, + "uccess": { + "deepest": "{colors.solid.green.50}", + "bold": "{colors.solid.green.500}" + }, + "arning": { + "deepest": "{colors.solid.yellow.50}", + "bold": "{colors.solid.yellow.500}" + }, + "elp": { + "deepest": "{colors.solid.purple.50}", + "bold": "{colors.solid.purple.500}" + }, + "anger": { + "deepest": "{colors.solid.red.50}", + "bold": "{colors.solid.red.500}" + }, + "": { + "success": { + "subtleActive": "{colors.solid.green.800}" + }, + "info": { + "boldHover": "{colors.solid.blue.400}", + "bold": "{colors.solid.blue.500}" + }, + "warning": { + "boldHover": "{colors.solid.yellow.400}", + "bold": "{colors.solid.yellow.500}" + }, + "help": { + "boldHover": "{colors.solid.purple.400}", + "bold": "{colors.solid.purple.500}" + }, + "danger": { + "boldHover": "{colors.solid.red.400}", + "bold": "{colors.solid.red.500}" + } + }, + "ransparent": "rgba(0, 0, 0, 0.0001)" + } + }, + "dimension": { + "space": { + "none": "{size.none}", + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.3x}", + "400": "{size.4x}", + "500": "{size.5x}", + "600": "{size.6x}", + "700": "{size.7x}", + "800": "{size.8x}", + "900": "{size.10x}" + }, + "size": { + "100": "{size.min}", + "150": "{size.1x}", + "200": "{size.2x}", + "250": "{size.3x}", + "300": "{size.4x}", + "350": "{size.5x}", + "400": "{size.6x}", + "450": "{size.7x}", + "500": "{size.8x}", + "550": "{size.9x}", + "600": "{size.10x}", + "700": "{size.12x}", + "750": "{size.14x}", + "800": "{size.16x}", + "900": "{size.20x}", + "1000": "{size.24x}" + }, + "radius": { + "none": "{size.none}", + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.3x}", + "400": "{size.4x}", + "500": "{size.6x}", + "max": "{size.pill}" + }, + "borderWidth": { + "none": "{size.none}", + "100": "{size.min}", + "200": "{size.2px}", + "300": "{size.1x}" + }, + "focusRing": { + "width": "{size.1x}", + "offset": "{size.none}", + "style": "none" + }, + "duration": { + "100": "{transition.duration.100}", + "200": "{transition.duration.200}", + "300": "{transition.duration.300}", + "400": "{transition.duration.400}", + "500": "{transition.duration.500}" + }, + "overlayWidth": { + "narrow": "{size.60x}", + "sm": "{size.80x}", + "base": "{size.100x}", + "lg": "{size.120x}", + "xlg": "{size.128x}" + } + }, + "typography": { + "fontFamily": { + "heading": "{fonts.fontFamily.heading}", + "base": "{fonts.fontFamily.base}" + }, + "fontWeight": { + "regular": "{fonts.fontWeight.regular}", + "medium": "{fonts.fontWeight.medium}", + "demibold": "{fonts.fontWeight.demibold}", + "bold": "{fonts.fontWeight.bold}" + }, + "fontSize": { + "100": "{fonts.fontSize.100}", + "200": "{fonts.fontSize.200}", + "300": "{fonts.fontSize.300}", + "400": "{fonts.fontSize.400}", + "500": "{fonts.fontSize.500}", + "600": "{fonts.fontSize.600}", + "650": "{fonts.fontSize.650}", + "700": "{fonts.fontSize.700}", + "750": "{fonts.fontSize.750}", + "800": "{fonts.fontSize.800}", + "900": "{fonts.fontSize.900}", + "1000": "{fonts.fontSize.1000}" + }, + "lineHeight": { + "100": "{fonts.lineHeight.100}", + "150": "{fonts.lineHeight.150}", + "200": "{fonts.lineHeight.200}", + "250": "{fonts.lineHeight.250}", + "300": "{fonts.lineHeight.300}", + "350": "{fonts.lineHeight.350}", + "400": "{fonts.lineHeight.400}", + "450": "{fonts.lineHeight.450}", + "500": "{fonts.lineHeight.500}", + "550": "{fonts.lineHeight.550}", + "600": "{fonts.lineHeight.600}", + "700": "{fonts.lineHeight.700}", + "800": "{fonts.lineHeight.800}", + "850": "{fonts.lineHeight.850}", + "900": "{fonts.lineHeight.900}", + "1000": "{fonts.lineHeight.1000}", + "auto": "{fonts.lineHeight.auto}" + }, + "display": { + "lg": { + "fontFamily": "{fonts.fontFamily.heading}", + "fontSize": "{fonts.fontSize.1000}", + "fontWeight": "{fonts.fontWeight.bold}", + "lineHeight": "{fonts.lineHeight.auto}" + }, + "md": { + "fontFamily": "{fonts.fontFamily.heading}", + "fontSize": "{fonts.fontSize.900}", + "fontWeight": "{fonts.fontWeight.bold}", + "lineHeight": "{fonts.lineHeight.auto}" + }, + "sm": { + "fontFamily": "{fonts.fontFamily.heading}", + "fontSize": "{fonts.fontSize.800}", + "fontWeight": "{fonts.fontWeight.bold}", + "lineHeight": "{fonts.lineHeight.auto}" + } + }, + "heading": { + "xl": { + "fontFamily": "{fonts.fontFamily.heading}", + "fontSize": "{fonts.fontSize.750}", + "fontWeight": "{fonts.fontWeight.bold}", + "lineHeight": "{fonts.lineHeight.auto}" + }, + "lg": { + "fontFamily": "{fonts.fontFamily.heading}", + "fontSize": "{fonts.fontSize.700}", + "fontWeight": "{fonts.fontWeight.demibold}", + "lineHeight": "{fonts.lineHeight.900}" + }, + "md": { + "fontFamily": "{fonts.fontFamily.heading}", + "fontSize": "{fonts.fontSize.600}", + "fontWeight": "{fonts.fontWeight.demibold}", + "lineHeight": "{fonts.lineHeight.700}" + }, + "sm": { + "fontFamily": "{fonts.fontFamily.heading}", + "fontSize": "{fonts.fontSize.500}", + "fontWeight": "{fonts.fontWeight.demibold}", + "lineHeight": "{fonts.lineHeight.600}" + } + }, + "body": { + "lg": { + "fontFamily": "{fonts.fontFamily.base}", + "fontSize": "{fonts.fontSize.400}", + "fontWeight": "{fonts.fontWeight.regular}", + "lineHeight": "{fonts.lineHeight.550}" + }, + "md": { + "fontFamily": "{fonts.fontFamily.base}", + "fontSize": "{fonts.fontSize.300}", + "fontWeight": "{fonts.fontWeight.regular}", + "lineHeight": "{fonts.lineHeight.500}" + }, + "sm": { + "fontFamily": "{fonts.fontFamily.base}", + "fontSize": "{fonts.fontSize.200}", + "fontWeight": "{fonts.fontWeight.regular}", + "lineHeight": "{fonts.lineHeight.400}" + } + }, + "label": { + "lg": { + "fontFamily": "{fonts.fontFamily.base}", + "fontSize": "{fonts.fontSize.300}", + "fontWeight": "{fonts.fontWeight.medium}", + "lineHeight": "{fonts.lineHeight.500}" + }, + "md": { + "fontFamily": "{fonts.fontFamily.base}", + "fontSize": "{fonts.fontSize.200}", + "fontWeight": "{fonts.fontWeight.medium}", + "lineHeight": "{fonts.lineHeight.400}" + }, + "sm": { + "fontFamily": "{fonts.fontFamily.base}", + "fontSize": "{fonts.fontSize.100}", + "fontWeight": "{fonts.fontWeight.medium}", + "lineHeight": "{fonts.lineHeight.300}" + } + }, + "caption": { + "fontFamily": "{fonts.fontFamily.base}", + "fontSize": "{fonts.fontSize.100}", + "fontWeight": "{fonts.fontWeight.regular}", + "lineHeight": "{fonts.lineHeight.250}" + } + }, + "shadow": { + "none": "{shadows.none}", + "100": "{shadows.100}", + "200": "{shadows.200}", + "300": "{shadows.300}", + "400": "{shadows.400}", + "500": "{shadows.500}" + } + }, + "components": { + "accordion": { + "extend": { + "extHeader": { + "iconSize": "{dimension.size.350}", + "gap": "{dimension.space.200}" + } + }, + "colorScheme": { + "light": { + "header": { + "background": "{background.transparent}", + "hoverBackground": "{background.transparent}", + "activeBackground": "{background.transparent}", + "activeHoverBackground": "{background.transparent}" + } + } + }, + "header": { + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "activeColor": "{text.default}", + "activeHoverColor": "{text.hover.default}", + "borderColor": "{border.transparent}", + "padding": "{dimension.space.400} 0 {dimension.space.400} 0", + "fontWeight": "{typography.fontWeight.bold}", + "borderRadius": "{dimension.radius.none}", + "borderWidth": "{dimension.borderWidth.none}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "inset {shadow.200}" + }, + "toggleIcon": { + "color": "{icon.strong}", + "hoverColor": "{icon.strongHover}", + "activeColor": "{icon.strong}", + "activeHoverColor": "{icon.strongHover}" + }, + "last": { + "bottomBorderRadius": "{dimension.radius.none}", + "activeBottomBorderRadius": "{dimension.radius.none}" + }, + "first": { + "borderWidth": "{dimension.borderWidth.none}", + "topBorderRadius": "{dimension.radius.none}" + } + }, + "root": { + "transitionDuration": "{dimension.duration.200}" + }, + "panel": { + "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.none}", + "borderColor": "{border.default}" + }, + "content": { + "borderWidth": "{dimension.size.100} {dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.none}", + "borderColor": "{border.transparent}", + "background": "{background.transparent}", + "color": "{text.default}", + "padding": "0 {dimension.space.600} {dimension.space.400} {dimension.space.600}" + } + }, + "autocomplete": { + "extend": { + "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}" + }, + "dropdown": { + "background": "{background.surface.ground}", + "hoverBackground": "{background.surface.ground}", + "activeBackground": "{background.surface.ground}", + "color": "{text.defaultHover}", + "hoverColor": "{text.defaultHover}", + "activeColor": "{text.defaultHover}" + } + } + }, + "root": { + "background": "{background.surface.ground}", + "disabledBackground": "{background.disabled}", + "filledBackground": "{background.surface.ground}", + "filledHoverBackground": "{background.surface.ground}", + "filledFocusBackground": "{background.surface.ground}", + "borderColor": "{border.default}", + "hoverBorderColor": "{border.brand}", + "focusBorderColor": "{border.brand}", + "invalidBorderColor": "{border.danger}", + "color": "{text.defaultHover}", + "disabledColor": "{text.muted}", + "placeholderColor": "{text.muted}", + "invalidPlaceholderColor": "{text.danger}", + "shadow": "0", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.300}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "0" + } + }, + "overlay": { + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "borderRadius": "{dimension.radius.300}", + "color": "{text.default}", + "shadow": "{shadow.200}" + }, + "list": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + }, + "option": { + "focusBackground": "{background.surface.hover.section}", + "selectedBackground": "{background.selected}", + "selectedFocusBackground": "{background.selectedStrong}", + "color": "{text.default}", + "focusColor": "{text.default}", + "selectedColor": "{text.onBold}", + "selectedFocusColor": "{text.onBold}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}" + }, + "optionGroup": { + "background": "{background.surface.raised}", + "color": "{text.muted}", + "fontWeight": "{typography.fontWeight.demibold}", + "padding": "{dimension.space.200} {dimension.space.300}" + }, + "dropdown": { + "width": "{dimension.size.600}", + "borderColor": "{border.default}", + "hoverBorderColor": "{border.brand}", + "activeBorderColor": "{border.brand}", + "borderRadius": "{dimension.radius.300}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "0" + }, + "sm": { + "width": "{dimension.size.500}" + }, + "lg": { + "width": "{dimension.size.700}" + } + }, + "chip": { + "borderRadius": "{chip.root.borderRadius}" + }, + "emptyMessage": { + "padding": "{dimension.space.200} {dimension.space.300}" + } + }, + "avatar": { + "extend": { + "borderColor": "{border.default}", + "circle": { + "borderRadius": "{dimension.radius.max}" + } + }, + "root": { + "width": "{dimension.size.500}", + "height": "{dimension.size.500}", + "fontSize": "{typography.fontSize.200}", + "color": "{text.staticDark}", + "background": "{background.brand.bold}", + "borderRadius": "{dimension.radius.300}" + }, + "icon": { + "size": "{dimension.size.300}" + }, + "group": { + "borderColor": "{background.surface.raised}", + "offset": "-{dimension.space.300}" + }, + "lg": { + "width": "{dimension.size.600}", + "height": "{dimension.size.600}", + "fontSize": "{typography.fontSize.300}", + "icon": { + "size": "{dimension.size.300}" + }, + "group": { + "offset": "-{dimension.space.300}" + } + }, + "xl": { + "width": "{dimension.size.750}", + "height": "{dimension.size.750}", + "icon": { + "size": "{dimension.size.400}" + }, + "group": { + "offset": "-{dimension.space.600}" + }, + "fontSize": "{typography.fontSize.500}" + } + }, + "badge": { + "extend": { + "extDot": { + "success": { + "background": "{background.success.indicator}" + }, + "info": { + "background": "{background.info.border}" + }, + "warn": { + "background": "{background.warning.border}" + }, + "danger": { + "background": "{background.danger.border}" + }, + "lg": { + "size": "{dimension.size.250}" + }, + "xlg": { + "size": "{dimension.size.300}" + } + }, + "ext": { + "padding": "0rem" + } + }, + "colorScheme": { + "light": { + "primary": { + "color": "{text.staticDark}", + "background": "{background.brand.bold}" + }, + "secondary": { + "color": "{text.onBold}", + "background": "{background.selected}" + }, + "success": { + "color": "{text.successStrong}", + "background": "{background.success.mutedBorder}" + }, + "info": { + "color": "{text.infoStrong}", + "background": "{background.info.mutedBorder}" + }, + "warn": { + "color": "{text.warningStrong}", + "background": "{background.warning.mutedBorder}" + }, + "danger": { + "color": "{text.dangerStrong}", + "background": "{background.danger.mutedBorder}" + } + } + }, + "root": { + "borderRadius": "{dimension.size.200}", + "padding": "{dimension.space.200}", + "fontSize": "{typography.fontSize.100}", + "fontWeight": "{typography.fontWeight.regular}", + "minWidth": "{dimension.size.400}", + "height": "{dimension.size.400}" + }, + "dot": { + "size": "{dimension.size.200}" + }, + "sm": { + "fontSize": "{typography.fontSize.100}", + "minWidth": "0rem", + "height": "0rem" + }, + "lg": { + "fontSize": "{typography.fontSize.100}", + "minWidth": "{dimension.size.450}", + "height": "{dimension.size.450}" + }, + "xl": { + "fontSize": "{typography.fontSize.100}", + "minWidth": "{dimension.size.500}", + "height": "{dimension.size.500}" + } + }, + "breadcrumb": { + "extend": { + "hoverBackground": "{background.neutral.subtleHover}", + "iconSize": "{dimension.size.350}", + "extItem": { + "padding": "{dimension.space.100}" + } + }, + "root": { + "padding": "0rem", + "background": "{background.transparent}", + "gap": "0rem", + "transitionDuration": "{dimension.duration.200}" + }, + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + }, + "item": { + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "borderRadius": "{dimension.radius.100}", + "gap": "{dimension.space.200}", + "icon": { + "color": "{icon.strong}", + "hoverColor": "{icon.strongHover}" + } + }, + "separator": { + "color": "{text.default}" + } + }, + "button": { + "extend": { + "disabledBackground": "{background.disabled}", + "extOutlined": { + "danger": { + "focusBackground": "{background.transparent}" + }, + "warn": { + "focusBackground": "{background.transparent}" + }, + "info": { + "focusBackground": "{background.transparent}" + }, + "help": { + "focusBackground": "{background.transparent}" + }, + "success": { + "focusBackground": "{background.transparent}" + } + }, + "disabledColor": "{text.muted}", + "extText": { + "danger": { + "focusBackground": "{background.transparent}" + }, + "warn": { + "focusBackground": "{background.transparent}" + }, + "info": { + "focusBackground": "{background.transparent}" + }, + "help": { + "focusBackground": "{background.transparent}" + }, + "success": { + "focusBackground": "{background.transparent}" + } + }, + "extLink": { + "background": "{background.transparent}", + "colorHover": "{background.selectedStrong}", + "paddingX": "0rem", + "paddingY": "{dimension.space.100}", + "sm": { + "iconOnlyWidth": "{dimension.size.300}" + }, + "base": { + "iconOnlyWidth": "{dimension.size.400}" + }, + "lg": { + "iconOnlyWidth": "{dimension.size.450}" + }, + "xlg": { + "iconOnlyWidth": "{dimension.size.500}" + } + }, + "extSm": { + "borderRadius": "{dimension.radius.300}", + "gap": "{dimension.space.200}" + }, + "extLg": { + "borderRadius": "{dimension.radius.400}", + "gap": "{dimension.space.300}", + "height": "{dimension.size.750}" + }, + "extXlg": { + "borderRadius": "{dimension.radius.400}", + "gap": "{dimension.space.300}", + "iconOnlyWidth": "{dimension.size.800}", + "paddingX": "{dimension.space.600}", + "paddingY": "{dimension.space.500}", + "height": "{dimension.size.800}" + }, + "borderWidth": "{dimension.size.100}", + "iconSize": { + "sm": "{dimension.size.300}", + "md": "{dimension.size.350}", + "lg": "{dimension.size.400}" + } + }, + "colorScheme": { + "light": { + "root": { + "primary": { + "background": "{background.brand.bold}", + "hoverBackground": "{background.brand.boldHover}", + "activeBackground": "{background.brand.boldActive}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.staticDark}", + "hoverColor": "{text.staticDark}", + "activeColor": "{text.staticDark}", + "focusRing": { + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" + } + }, + "secondary": { + "background": "{background.selected}", + "hoverBackground": "{background.surface.inverse}", + "activeBackground": "{background.selectedStrong}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.onBold}", + "hoverColor": "{text.onBold}", + "activeColor": "{text.onBold}", + "focusRing": { + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" + } + }, + "contrast": { + "background": "{background.disabled}", + "hoverBackground": "{text.disabled}", + "activeBackground": "{text.hover.subtle}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.default}", + "hoverColor": "{text.default}", + "activeColor": "{text.default}", + "focusRing": { + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" + } + }, + "info": { + "background": "{background.info.mutedBorder}", + "hoverBackground": "{background.info.border}", + "activeBackground": "{background.info.bold}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.infoStrong}", + "hoverColor": "{text.infoDeepest}", + "activeColor": "{text.infoStrong}" + }, + "success": { + "background": "{background.success.mutedBorder}", + "hoverBackground": "{background.success.border}", + "activeBackground": "{background.brand.bold}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.successStrong}", + "hoverColor": "{text.successDeepest}", + "activeColor": "{text.successStrong}" + }, + "warn": { + "background": "{background.warning.mutedBorder}", + "hoverBackground": "{background.warning.border}", + "activeBackground": "{background.warning.bold}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.warningStrong}", + "hoverColor": "{text.warningDeepest}", + "activeColor": "{text.warningStrong}" + }, + "help": { + "background": "{background.help.mutedBorder}", + "hoverBackground": "{background.help.border}", + "activeBackground": "{background.help.bold}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.helpStrong}", + "hoverColor": "{text.helpDeepest}", + "activeColor": "{text.helpStrong}" + }, + "danger": { + "background": "{background.danger.mutedBorder}", + "hoverBackground": "{background.danger.border}", + "activeBackground": "{background.danger.bold}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.dangerStrong}", + "hoverColor": "{text.dangerDeepest}", + "activeColor": "{text.dangerStrong}" + } + }, + "outlined": { + "primary": { + "hoverBackground": "{background.brand.subtle}", + "activeBackground": "{background.brand.subtleHover}", + "borderColor": "{border.successSubtleActive}", + "color": "{text.successBold}" + }, + "success": { + "hoverBackground": "{background.brand.subtleHover}", + "activeBackground": "{background.success.subtleActive}", + "borderColor": "{border.brand}", + "color": "{text.brand}" + }, + "info": { + "hoverBackground": "{background.info.subtleHover}", + "activeBackground": "{background.info.subtleActive}", + "borderColor": "{border.infoBoldHover}", + "color": "{text.info}" + }, + "warn": { + "hoverBackground": "{background.warning.subtleHover}", + "activeBackground": "{background.warning.subtleActive}", + "borderColor": "{border.warningBoldHover}", + "color": "{text.warning}" + }, + "help": { + "hoverBackground": "{background.help.subtleHover}", + "activeBackground": "{background.help.subtleActive}", + "borderColor": "{border.helpBoldHover}", + "color": "{text.help}" + }, + "danger": { + "hoverBackground": "{background.danger.subtleHover}", + "activeBackground": "{background.danger.subtleActive}", + "borderColor": "{border.dangerBoldHover}", + "color": "{text.danger}" + } + }, + "text": { + "primary": { + "hoverBackground": "{background.neutral.subtleHover}", + "activeBackground": "{background.disabled}", + "color": "{text.default}" + }, + "success": { + "hoverBackground": "{background.brand.subtleHover}", + "activeBackground": "{background.success.subtleActive}", + "color": "{text.brand}" + }, + "info": { + "hoverBackground": "{background.info.subtleHover}", + "activeBackground": "{background.info.subtleActive}", + "color": "{text.info}" + }, + "warn": { + "hoverBackground": "{background.warning.subtleHover}", + "activeBackground": "{background.warning.subtleActive}", + "color": "{text.warning}" + }, + "help": { + "hoverBackground": "{background.help.subtleHover}", + "activeBackground": "{background.help.subtleActive}", + "color": "{text.help}" + }, + "danger": { + "hoverBackground": "{background.danger.subtleHover}", + "activeBackground": "{background.danger.subtleActive}", + "color": "{text.danger}" + } + }, + "link": { + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "activeColor": "{text.muted}" + } + }, + "dark": { + "root": { + "primary": { + "background": "{background.brand.bold}", + "hoverBackground": "{background.brand.boldHover}", + "activeBackground": "{background.brand.boldActive}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.staticDark}", + "hoverColor": "{text.staticDark}", + "activeColor": "{text.staticDark}", + "focusRing": { + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" + } + }, + "secondary": { + "background": "{background.disabled}", + "hoverBackground": "{text.disabled}", + "activeBackground": "{text.hover.subtle}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.neutralHover}", + "hoverColor": "{text.neutralHover}", + "activeColor": "{text.neutralHover}", + "focusRing": { + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" + } + }, + "contrast": { + "background": "{background.surface.inverseStrong}", + "hoverBackground": "{background.selected}", + "activeBackground": "{background.surface.inverse}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{background.surface.canvas}", + "hoverColor": "{background.surface.canvas}", + "activeColor": "{background.surface.canvas}", + "focusRing": { + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" + } + }, + "info": { + "background": "{background.info.bold}", + "hoverBackground": "{background.info.border}", + "activeBackground": "{background.info.mutedBorder}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.staticDark}", + "hoverColor": "{text.staticDark}", + "activeColor": "{text.staticDark}" + }, + "success": { + "background": "{background.brand.bold}", + "hoverBackground": "{background.success.border}", + "activeBackground": "{background.success.mutedBorder}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.staticDark}", + "hoverColor": "{text.staticDark}", + "activeColor": "{text.staticDark}" + }, + "warn": { + "background": "{background.warning.bold}", + "hoverBackground": "{background.warning.border}", + "activeBackground": "{background.warning.mutedBorder}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.staticDark}", + "hoverColor": "{text.staticDark}", + "activeColor": "{text.staticDark}" + }, + "help": { + "background": "{background.help.bold}", + "hoverBackground": "{background.help.border}", + "activeBackground": "{background.help.mutedBorder}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.staticDark}", + "hoverColor": "{text.staticDark}", + "activeColor": "{text.staticDark}" + }, + "danger": { + "background": "{background.danger.bold}", + "hoverBackground": "{background.danger.border}", + "activeBackground": "{background.danger.mutedBorder}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.staticDark}", + "hoverColor": "{text.staticDark}", + "activeColor": "{text.staticDark}" + } + }, + "outlined": { + "primary": { + "hoverBackground": "{background.brand.subtle}", + "activeBackground": "{background.brand.subtleHover}", + "borderColor": "{border.successSubtleActive}", + "color": "{text.successBold}" + }, + "success": { + "hoverBackground": "{text.successDeepest}", + "activeBackground": "{background.success.deep}", + "borderColor": "{border.checked}", + "color": "{text.successBold}" + }, + "info": { + "hoverBackground": "{text.infoDeepest}", + "activeBackground": "{background.info.deep}", + "borderColor": "{border.infoBold}", + "color": "{text.infoBold}" + }, + "warn": { + "hoverBackground": "{text.warningDeepest}", + "activeBackground": "{background.warning.deep}", + "borderColor": "{border.warningBold}", + "color": "{text.warningBold}" + }, + "help": { + "hoverBackground": "{text.helpDeepest}", + "activeBackground": "{background.help.deep}", + "borderColor": "{border.helpBold}", + "color": "{text.helpBold}" + }, + "danger": { + "hoverBackground": "{text.dangerDeepest}", + "activeBackground": "{background.danger.deep}", + "borderColor": "{border.dangerBold}", + "color": "{text.dangerBold}" + } + }, + "text": { + "primary": { + "hoverBackground": "{background.surface.inverse}", + "activeBackground": "{background.selectedStrong}", + "color": "{text.default}" + }, + "success": { + "hoverBackground": "{text.successDeepest}", + "activeBackground": "{background.success.deep}", + "color": "{text.successBold}" + }, + "info": { + "hoverBackground": "{text.infoDeepest}", + "activeBackground": "{background.info.deep}", + "color": "{text.infoBold}" + }, + "warn": { + "hoverBackground": "{text.warningDeepest}", + "activeBackground": "{background.warning.deep}", + "color": "{text.warningBold}" + }, + "help": { + "hoverBackground": "{text.helpDeepest}", + "activeBackground": "{background.help.deep}", + "color": "{text.helpBold}" + }, + "danger": { + "hoverBackground": "{text.dangerDeepest}", + "activeBackground": "{background.danger.deep}", + "color": "{text.dangerBold}" + } + }, + "link": { + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "activeColor": "{text.muted}" + } + } + }, + "root": { + "borderRadius": "{dimension.radius.300}", + "roundedBorderRadius": "{dimension.radius.max}", + "gap": "{dimension.space.200}", + "fontSize": "{typography.fontSize.200}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.200}", + "iconOnlyWidth": "{dimension.size.600}", + "raisedShadow": "none", + "badgeSize": "{dimension.size.300}", + "transitionDuration": "{dimension.duration.200}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "offset": "{dimension.focusRing.offset}" + }, + "sm": { + "fontSize": "{typography.fontSize.200}", + "iconOnlyWidth": "{dimension.size.500}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.200}" + }, + "lg": { + "fontSize": "{typography.fontSize.500}", + "iconOnlyWidth": "{dimension.size.750}", + "paddingX": "{dimension.space.600}", + "paddingY": "{dimension.space.400}" + }, + "label": { + "fontWeight": "{typography.fontWeight.demibold}" + } + } + }, + "card": { + "extend": { + "borderColor": "{border.subtle}", + "borderWidth": "{dimension.size.100}" + }, + "root": { + "background": "{background.surface.raised}", + "borderRadius": "{dimension.space.400}", + "color": "{text.default}" + }, + "body": { + "padding": "{dimension.space.400}", + "gap": "{dimension.space.400}" + }, + "caption": { + "gap": "{dimension.space.100}" + }, + "title": { + "fontSize": "{typography.fontSize.400}", + "fontWeight": "{typography.fontWeight.demibold}" + }, + "subtitle": { + "color": "{text.muted}" + } + }, + "carousel": { + "colorScheme": { + "light": { + "indicator": { + "background": "{text.disabled}", + "hoverBackground": "{text.hover.subtle}", + "activeBackground": "{background.selected}" + } + } + }, + "root": { + "transitionDuration": "{dimension.duration.200}" + }, + "content": { + "gap": "{dimension.space.200}" + }, + "indicatorList": { + "padding": "{dimension.space.400}", + "gap": "{dimension.space.200}" + }, + "indicator": { + "width": "{dimension.size.200}", + "height": "{dimension.size.200}", + "borderRadius": "{dimension.radius.500}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + } + }, + "checkbox": { + "root": { + "borderRadius": "{dimension.radius.200}", + "extend": { + "borderWidth": "{dimension.borderWidth.100}" + }, + "width": "{dimension.size.400}", + "height": "{dimension.size.400}", + "background": "{background.surface.ground}", + "checkedBackground": "{background.selected}", + "checkedHoverBackground": "{background.surface.inverse}", + "disabledBackground": "{background.disabled}", + "filledBackground": "{background.surface.ground}", + "borderColor": "{border.default}", + "hoverBorderColor": "{border.strong}", + "focusBorderColor": "{border.strong}", + "checkedBorderColor": "{border.strong}", + "checkedHoverBorderColor": "{border.inverse}", + "checkedFocusBorderColor": "{border.checked}", + "checkedDisabledBorderColor": "{border.default}", + "invalidBorderColor": "{border.danger}", + "shadow": "0", + "focusRing": { + "focusRing": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + }, + "sm": { + "width": "{dimension.size.200}", + "height": "{dimension.size.200}" + }, + "lg": { + "width": "{dimension.size.350}", + "height": "{dimension.size.350}" + }, + "transitionDuration": "{dimension.duration.200}" + }, + "icon": { + "size": "{dimension.size.300}", + "color": "{icon.default}", + "checkedColor": "{icon.onBold}", + "checkedHoverColor": "{icon.onBold}", + "disabledColor": "{icon.subtle}", + "sm": { + "size": "{dimension.size.250}" + }, + "lg": { + "size": "{dimension.size.350}" + } + } + }, + "chip": { + "extend": { + "borderColor": "{border.transparent}", + "borderWidth": "{dimension.size.100}" + }, + "root": { + "borderRadius": "{dimension.radius.200}", + "paddingX": "{dimension.space.200}", + "paddingY": "{dimension.space.100}", + "gap": "{dimension.space.200}", + "transitionDuration": "{dimension.duration.200}" + }, + "colorScheme": { + "light": { + "root": { + "background": "{background.disabled}", + "color": "{text.default}" + }, + "icon": { + "color": "{icon.strong}" + }, + "removeIcon": { + "color": "{icon.strong}" + } + } + }, + "image": { + "width": "0rem", + "height": "0rem" + }, + "icon": { + "size": "{dimension.size.300}" + }, + "removeIcon": { + "size": "{dimension.size.300}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + } + }, + "confirmdialog": { + "extend": { + "extIcon": { + "success": "{background.brand.bold}", + "info": "{background.info.bold}", + "help": "{background.help.bold}", + "warn": "{background.warning.bold}", + "danger": "{background.danger.bold}" + } + }, + "icon": { + "size": "{dimension.size.400}", + "color": "{icon.strong}" + }, + "content": { + "gap": "0rem" + } + }, + "confirmpopup": { + "root": { + "background": "{background.surface.raised}", + "color": "{text.default}", + "shadow": "{shadow.400}", + "gutter": "{dimension.space.300}", + "arrowOffset": "{dimension.space.500}" + }, + "content": { + "padding": "{dimension.space.300}", + "gap": "{dimension.space.400}" + }, + "icon": { + "size": "{dimension.size.400}", + "color": "{icon.strong}" + }, + "footer": { + "gap": "{dimension.space.200}", + "padding": "0 {dimension.space.300} {dimension.space.500} {dimension.space.300} {dimension.space.500} {dimension.space.300} {dimension.space.500}" + } + }, + "contextmenu": { + "root": { + "background": "{background.surface.raised}", + "color": "{text.default}", + "shadow": "{shadow.400}" + }, + "list": { + "padding": "{dimension.space.100} 0", + "gap": "{dimension.space.100}" + }, + "item": { + "padding": "{dimension.space.200} {dimension.space.300}", + "gap": "{dimension.space.200}" + }, + "submenu": { + "mobileIndent": "{dimension.space.500}" + } + }, + "datatable": { + "colorScheme": { + "light": { + "root": { + "color": "{text.default}", + "borderColor": "{border.subtle}" + }, + "header": { + "background": "{background.neutral.subtle}", + "color": "{text.default}" + }, + "headerCell": { + "background": "{background.neutral.subtle}", + "hoverBackground": "{background.neutral.subtleHover}", + "color": "{text.default}" + }, + "footer": { + "background": "{background.neutral.subtleHover}", + "color": "{text.default}" + }, + "footerCell": { + "background": "{background.surface.hover.section}", + "color": "{text.default}" + }, + "row": { + "stripedBackground": "{background.surface.hover.section}" + }, + "bodyCell": { + "selectedBorderColor": "{border.subtle}" + } + } + }, + "extended": { + "extHeaderCell": { + "selectedHoverBackground": "{background.surface.inverse}" + }, + "extRow": { + "selectedHoverBackground": "{background.surface.inverse}", + "stripedHoverBackground": "{background.neutral.subtleHover}" + } + }, + "root": { + "transitionDuration": "{dimension.duration.200}" + }, + "header": { + "borderColor": "{border.subtle}", + "borderWidth": "{dimension.size.100} 0 {dimension.size.100} 0", + "padding": "{dimension.space.400}", + "sm": { + "padding": "{dimension.space.200}" + }, + "lg": { + "padding": "{dimension.space.500}" + } + }, + "headerCell": { + "selectedBackground": "{background.selected}", + "borderColor": "{border.subtle}", + "hoverColor": "{text.onBold}", + "selectedColor": "{text.onBold}", + "gap": "{dimension.space.200}", + "padding": "{dimension.space.400}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "inset {shadow.200}" + }, + "sm": { + "padding": "{dimension.space.200}" + }, + "lg": { + "padding": "{dimension.space.500}" + } + }, + "columnTitle": { + "fontWeight": "{typography.fontWeight.bold}" + }, + "row": { + "background": "{background.surface.raised}", + "hoverBackground": "{background.surface.hover.section}", + "selectedBackground": "{background.selected}", + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "selectedColor": "{text.onBold}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "inset {shadow.200}" + } + }, + "bodyCell": { + "borderColor": "{border.subtle}", + "padding": "{dimension.space.400}", + "sm": { + "padding": "{dimension.space.200}" + }, + "lg": { + "padding": "{dimension.space.500}" + } + }, + "footerCell": { + "borderColor": "{border.subtle}", + "padding": "{dimension.space.400}", + "sm": { + "padding": "{dimension.space.200}" + }, + "lg": { + "padding": "{dimension.space.500}" + } + }, + "columnFooter": { + "fontWeight": "{typography.fontWeight.bold}" + }, + "dropPoint": { + "color": "{background.selected}" + }, + "footer": { + "borderColor": "{border.subtle}", + "borderWidth": "0 0 {dimension.size.100} 0", + "padding": "{dimension.space.400}", + "sm": { + "padding": "{dimension.space.200}" + }, + "lg": { + "padding": "{dimension.space.500}" + } + }, + "columnResizer": { + "width": "{dimension.size.200}" + }, + "resizeIndicator": { + "width": "{dimension.size.100}", + "color": "{background.selected}" + }, + "sortIcon": { + "color": "{icon.strong}", + "hoverColor": "{icon.strongHover}", + "size": "{dimension.size.300}" + }, + "loadingIcon": { + "size": "{dimension.size.500}" + }, + "rowToggleButton": { + "hoverBackground": "{background.surface.hover.section}", + "selectedHoverBackground": "{background.surface.hover.section}", + "color": "{text.default}", + "hoverColor": "{text.default}", + "selectedHoverColor": "{text.default}", + "size": "{dimension.size.500}", + "borderRadius": "{dimension.radius.300}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + }, + "filter": { + "inlineGap": "{dimension.space.200}", + "rule": { + "borderColor": "{border.subtle}" + }, + "constraintList": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + }, + "constraint": { + "focusBackground": "{background.surface.hover.section}", + "selectedBackground": "{background.selected}", + "selectedFocusBackground": "{background.selectedStrong}", + "color": "{text.default}", + "focusColor": "{text.default}", + "selectedColor": "{text.onBold}", + "selectedFocusColor": "{text.onBold}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}", + "separator": { + "borderColor": "{border.subtle}" + } + }, + "overlaySelect": { + "background": "{background.surface.raised}", + "color": "{text.default}", + "borderColor": "{border.subtle}", + "borderRadius": "{dimension.radius.300}", + "shadow": "{shadow.400}" + }, + "overlayPopover": { + "background": "{background.surface.raised}", + "color": "{text.default}", + "borderColor": "{border.subtle}", + "borderRadius": "{dimension.radius.300}", + "shadow": "{shadow.400}", + "padding": "{dimension.space.300}", + "gap": "{dimension.space.100}" + } + }, + "paginatorTop": { + "borderColor": "{border.default}", + "borderWidth": "0 0 {dimension.size.100} 0" + }, + "paginatorBottom": { + "borderWidth": "0 0 {dimension.size.100} 0", + "borderColor": "{border.subtle}" + } + }, + "dataview": { + "root": { + "borderWidth": "{dimension.size.100}", + "borderRadius": "{dimension.radius.100}", + "padding": "0rem", + "borderColor": "{border.subtle}" + }, + "header": { + "borderWidth": "0 0 {dimension.size.100} 0", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "0 0 0 0", + "color": "{text.default}" + }, + "content": { + "background": "{background.surface.raised}", + "color": "{text.default}", + "borderColor": "{border.subtle}", + "borderWidth": "0rem", + "padding": "0rem", + "borderRadius": "0" + }, + "footer": { + "background": "{background.neutral.subtleHover}", + "color": "{text.default}", + "borderWidth": "{dimension.size.100} 0 0 0", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "0 0 0 0" + }, + "paginatorTop": { + "borderWidth": "0 0 {dimension.size.100} 0" + }, + "paginatorBottom": { + "borderWidth": "{dimension.size.100} 0 0 0" + } + }, + "datepicker": { + "extend": { + "extDate": { + "selectedHoverBackground": "{background.surface.inverse}" + }, + "extToday": { + "hoverBackground": "{background.surface.hover.section}", + "borderColor": "{border.inverse}" + }, + "extTitle": { + "width": "{dimension.overlayWidth.narrow}" + }, + "extTimePicker": { + "minWidth": "{dimension.size.700}", + "color": "{text.default}" + }, + "extSelectYear": { + "minWidth": "{dimension.size.1000}" + } + }, + "colorScheme": { + "light": { + "dropdown": { + "background": "{background.surface.raised}", + "hoverBackground": "{background.neutral.subtleHover}", + "activeBackground": "{background.selected}", + "color": "{text.default}", + "hoverColor": "{text.default}", + "activeColor": "{text.onBold}" + }, + "today": { + "background": "{background.transparent}", + "color": "{text.staticDark}" + } + } + }, + "panel": { + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "color": "{text.default}", + "borderRadius": "{dimension.radius.300}", + "shadow": "{shadow.400}", + "padding": "0rem" + }, + "header": { + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "color": "{text.default}", + "padding": "{dimension.space.300}" + }, + "title": { + "gap": "{dimension.space.200}", + "fontWeight": "{typography.fontWeight.bold}" + }, + "selectMonth": { + "hoverBackground": "{background.surface.hover.section}", + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "borderRadius": "{dimension.radius.300}", + "padding": "{dimension.space.200}" + }, + "inputIcon": { + "color": "{icon.subtle}" + }, + "dropdown": { + "width": "{dimension.size.600}", + "borderColor": "{border.default}", + "hoverBorderColor": "{border.default}", + "activeBorderColor": "{border.default}", + "borderRadius": "{dimension.radius.300}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + }, + "sm": { + "width": "0rem" + }, + "lg": { + "width": "0rem" + } + }, + "group": { + "borderColor": "{border.subtle}", + "gap": "{dimension.space.300}" + }, + "selectYear": { + "hoverBackground": "{background.surface.hover.section}", + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "borderRadius": "{dimension.radius.300}", + "padding": "{dimension.space.100}" + }, + "dayView": { + "margin": "{dimension.space.300}" + }, + "weekDay": { + "padding": "{dimension.space.100}", + "fontWeight": "{typography.fontWeight.bold}", + "color": "{text.default}" + }, + "date": { + "hoverBackground": "{background.surface.hover.section}", + "selectedBackground": "{background.selected}", + "rangeSelectedBackground": "{background.surface.hover.section}", + "color": "{text.default}", + "hoverColor": "{text.default}", + "selectedColor": "{text.onBold}", + "rangeSelectedColor": "{text.default}", + "width": "{dimension.size.500}", + "height": "{dimension.size.500}", + "borderRadius": "{dimension.radius.200}", + "padding": "{dimension.space.100}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + }, + "monthView": { + "margin": "0 0 0 0" + }, + "month": { + "padding": "0", + "borderRadius": "0rem" + }, + "yearView": { + "margin": "0 0 0 0" + }, + "year": { + "padding": "0", + "borderRadius": "0rem" + }, + "buttonbar": { + "padding": "{dimension.space.300}", + "borderColor": "{border.subtle}" + }, + "timePicker": { + "padding": "{dimension.space.300}", + "borderColor": "{border.subtle}", + "gap": "{dimension.space.200}", + "buttonGap": "{dimension.space.100}" + }, + "root": { + "transitionDuration": "{dimension.duration.200}" + } + }, + "dialog": { + "extend": { + "borderWidth": "{dimension.borderWidth.100}", + "backdrop": "{background.scrim.modal}" + }, + "root": { + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "color": "{text.default}", + "borderRadius": "{dimension.radius.500}", + "shadow": "{shadow.400}" + }, + "header": { + "padding": "{dimension.space.600} {dimension.space.600} 1rem {dimension.space.600}", + "gap": "{dimension.space.200}" + }, + "title": { + "fontSize": "{typography.fontSize.500}", + "fontWeight": "{typography.fontWeight.demibold}" + }, + "content": { + "padding": "{dimension.space.600}" + }, + "footer": { + "padding": "0 {dimension.space.600} {dimension.space.600} {dimension.space.600}", + "gap": "{dimension.space.200}" + } + }, + "divider": { + "colorScheme": { + "light": { + "content": { + "background": "{background.surface.raised}", + "color": "{text.muted}" + }, + "borderColor": "{border.subtle}" + } + }, + "extend": { + "content": { + "gap": "{dimension.space.200}" + }, + "iconSize": "{dimension.size.300}" + }, + "horizontal": { + "margin": "{dimension.space.400} 0", + "padding": "0 {dimension.space.400}", + "content": { + "padding": "0 {dimension.space.200}" + } + }, + "vertical": { + "margin": "0 {dimension.space.400}", + "padding": "{dimension.space.400} 0", + "content": { + "padding": "{dimension.space.200} 0" + } + } + }, + "drawer": { + "extend": { + "borderRadius": "{dimension.radius.200}", + "borderWidth": "{dimension.borderWidth.100}", + "width": "{dimension.overlayWidth.base}", + "extHeader": { + "gap": "{dimension.space.200}", + "borderColor": "{drawer.root.borderColor}" + }, + "padding": "{dimension.space.200}", + "scale": "0.125rem", + "backdrop": "{background.scrim.modal}" + }, + "root": { + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "color": "{text.default}", + "shadow": "{shadow.200}", + "width": "{dimension.overlayWidth.base}" + }, + "sm": { + "width": "{dimension.overlayWidth.sm}" + }, + "lg": { + "width": "{dimension.overlayWidth.lg}" + }, + "xlg": { + "width": "{dimension.overlayWidth.xlg}" + }, + "header": { + "padding": "{dimension.space.600} {dimension.space.600} {dimension.space.500} {dimension.space.600} " + }, + "title": { + "fontSize": "{typography.fontSize.500}", + "fontWeight": "{typography.fontWeight.demibold}" + }, + "content": { + "padding": "{dimension.space.600}" + }, + "footer": { + "padding": "0 {dimension.space.600} {dimension.space.600} {dimension.space.600} " + } + }, + "fileupload": { + "extend": { + "extDragNdrop": { + "background": "{background.surface.canvas}", + "borderRadius": "{dimension.radius.300}", + "iconSize": "{dimension.size.500}", + "padding": "{dimension.space.400}", + "info": { + "gap": "{dimension.space.100}" + } + }, + "extFile": { + "iconSize": "{dimension.size.350}" + }, + "extContent": { + "borderRadius": "{dimension.radius.300}", + "highlightBorderDefault": "{text.disabled}" + } + }, + "colorScheme": { + "light": { + "header": { + "background": "{background.surface.canvas}", + "color": "{text.default}" + } + } + }, + "root": { + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "color": "{text.default}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}" + }, + "header": { + "borderColor": "{border.subtle}", + "borderWidth": "0rem", + "padding": "0rem", + "borderRadius": "0rem", + "gap": "{dimension.space.200}" + }, + "content": { + "highlightBorderColor": "{border.strong}", + "padding": "0rem", + "gap": "{dimension.space.200}" + }, + "file": { + "padding": "{dimension.space.200}", + "gap": "{dimension.space.200}", + "borderColor": "{border.default}", + "info": { + "gap": "{dimension.space.100}" + } + }, + "fileList": { + "gap": "{dimension.space.200}" + }, + "progressbar": { + "height": "{dimension.size.200}" + }, + "basic": { + "gap": "{dimension.space.200}" + } + }, + "floatlabel": { + "extend": { + "height": "{dimension.size.800}", + "iconSize": "{dimension.size.350}" + }, + "root": { + "color": "{text.muted}", + "focusColor": "{text.muted}", + "activeColor": "{text.muted}", + "invalidColor": "{text.danger}", + "transitionDuration": "{dimension.duration.200}", + "positionX": "{dimension.space.300}", + "positionY": "{dimension.space.300}", + "fontWeight": "{typography.fontWeight.regular}", + "active": { + "fontSize": "{typography.fontSize.100}", + "fontWeight": "{typography.fontWeight.regular}" + } + }, + "over": { + "active": { + "top": "{dimension.space.400}" + } + }, + "in": { + "input": { + "paddingTop": "{dimension.space.700}", + "paddingBottom": "{dimension.space.300}" + }, + "active": { + "top": "{dimension.space.300}" + } + }, + "on": { + "borderRadius": "0rem", + "active": { + "padding": "0 {dimension.space.100}", + "background": "{background.surface.ground}" + } + } + }, + "galleria": { + "extend": { + "backdrop": "{background.scrim.modal}" + }, + "colorScheme": { + "light": { + "thumbnailContent": { + "background": "{background.neutral.subtleHover}" + }, + "thumbnailNavButton": { + "hoverBackground": "{background.translucent.light.default}", + "color": "{text.default}", + "hoverColor": "{text.hover.default}" + }, + "indicatorButton": { + "background": "{text.disabled}", + "hoverBackground": "{text.hover.subtle}" + } + } + }, + "root": { + "borderWidth": "{dimension.size.100}", + "borderColor": "{border.subtle}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}" + }, + "navButton": { + "background": "{background.transparent}", + "hoverBackground": "{background.translucent.light.default}", + "color": "{text.onBold}", + "hoverColor": "{text.onBold}", + "size": "{dimension.size.800}", + "gutter": "{dimension.space.200}", + "prev": { + "borderRadius": "{dimension.radius.200}" + }, + "next": { + "borderRadius": "{dimension.radius.200}" + }, + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + }, + "navIcon": { + "size": "{dimension.size.500}" + }, + "thumbnailsContent": { + "padding": "{dimension.space.100}" + }, + "thumbnailNavButton": { + "size": "{dimension.size.500}", + "borderRadius": "{dimension.radius.300}", + "gutter": "{dimension.space.200}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + }, + "thumbnailNavButtonIcon": { + "size": "{dimension.size.300}" + }, + "caption": { + "background": "{background.translucent.light.strong}", + "color": "{text.default}", + "padding": "{dimension.space.200}" + }, + "indicatorList": { + "gap": "{dimension.space.200}", + "padding": "{dimension.space.400}" + }, + "indicatorButton": { + "width": "{dimension.size.200}", + "height": "{dimension.size.200}", + "activeBackground": "{background.selected}", + "borderRadius": "{dimension.radius.300}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + }, + "insetIndicatorList": { + "background": "{background.translucent.dark.default}" + }, + "insetIndicatorButton": { + "background": "{background.translucent.light.subtle}", + "hoverBackground": "{background.translucent.light.default}", + "activeBackground": "{background.translucent.light.strong}" + }, + "closeButton": { + "size": "{dimension.size.800}", + "gutter": "{dimension.space.200}", + "background": "{background.translucent.light.subtle}", + "hoverBackground": "{background.translucent.light.default}", + "color": "{text.onBold}", + "hoverColor": "{text.onBold}", + "borderRadius": "{dimension.radius.400}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + }, + "closeButtonIcon": { + "size": "{dimension.size.500}" + } + }, + "inputgroup": { + "extend": { + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": "{dimension.size.300}" + }, + "colorScheme": { + "light": { + "addon": { + "background": "{background.surface.ground}", + "borderColor": "{border.default}", + "color": "{text.muted}" + } + } + }, + "addon": { + "borderRadius": "{dimension.radius.300}", + "padding": "{dimension.space.300}", + "minWidth": "{dimension.size.600}" + } + }, + "inputnumber": { + "extend": { + "borderWidth": "{dimension.borderWidth.100}", + "extButton": { + "height": "{dimension.size.600}", + "iconSize": "{dimension.size.300}" + } + }, + "colorScheme": { + "light": { + "button": { + "background": "{background.surface.raised}", + "hoverBackground": "{background.surface.hover.section}", + "activeBackground": "{background.transparent}", + "borderColor": "{border.default}", + "hoverBorderColor": "{border.default}", + "activeBorderColor": "{border.default}", + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "activeColor": "{text.default}" + } + } + }, + "transitionDuration": { + "transitionDuration": "{dimension.duration.200}" + }, + "button": { + "width": "{dimension.size.600}", + "borderRadius": "{dimension.radius.300}", + "verticalPadding": "{dimension.space.300}" + } + }, + "inputotp": { + "extend": { + "height": "{dimension.size.600}", + "borderWidth": "{dimension.borderWidth.100}" + }, + "root": { + "gap": "{dimension.space.200}" + }, + "input": { + "width": "{dimension.size.700}" + }, + "sm": { + "width": "0rem" + }, + "lg": { + "width": "0rem" + } + }, + "inputtext": { + "extend": { + "readonlyBackground": "{background.neutral.subtleHover}", + "iconSize": "{dimension.size.300}", + "borderWidth": "{dimension.borderWidth.100}", + "extXlg": { + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.600}" + } + }, + "root": { + "background": "{background.surface.ground}", + "disabledBackground": "{background.disabled}", + "filledBackground": "{background.surface.ground}", + "filledHoverBackground": "{background.surface.ground}", + "filledFocusBackground": "{background.surface.ground}", + "borderColor": "{border.default}", + "hoverBorderColor": "{border.brand}", + "focusBorderColor": "{border.brand}", + "invalidBorderColor": "{border.danger}", + "color": "{text.default}", + "disabledColor": "{text.muted}", + "placeholderColor": "{text.muted}", + "invalidPlaceholderColor": "{text.danger}", + "shadow": "0", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.300}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}", + "sm": { + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.200}" + }, + "lg": { + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.400}" + }, + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "0" + } + } + }, + "listbox": { + "extend": { + "extOption": { + "label": { + "gap": "{dimension.space.100}" + }, + "caption": { + "color": "{text.muted}", + "stripedColor": "{text.muted}" + }, + "gap": "{dimension.space.200}" + } + }, + "colorScheme": { + "light": { + "option": { + "stripedBackground": "{background.neutral.subtle}" + } + } + }, + "root": { + "background": "{background.surface.ground}", + "disabledBackground": "{background.disabled}", + "borderColor": "{border.default}", + "invalidBorderColor": "{border.danger}", + "color": "{text.defaultHover}", + "disabledColor": "{text.muted}", + "shadow": "0", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}" + }, + "list": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}", + "header": { + "padding": "{dimension.space.400} {dimension.space.400} 0 {dimension.space.400}" + } + }, + "option": { + "focusBackground": "{background.surface.hover.section}", + "selectedBackground": "{background.selected}", + "selectedFocusBackground": "{background.selectedStrong}", + "color": "{text.default}", + "focusColor": "{text.default}", + "selectedColor": "{text.onBold}", + "selectedFocusColor": "{text.onBold}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}" + }, + "optionGroup": { + "background": "{background.surface.raised}", + "color": "{text.muted}", + "fontWeight": "{typography.fontWeight.regular}", + "padding": "{dimension.space.200} {dimension.space.300}" + }, + "checkmark": { + "color": "{text.default}", + "gutterStart": "-{dimension.space.200}", + "gutterEnd": "{dimension.space.200}" + }, + "emptyMessage": { + "padding": "{dimension.space.200} {dimension.space.300}" + } + }, + "megamenu": { + "extend": { + "extItem": { + "caption": { + "color": "{text.muted}", + "gap": "{dimension.space.100}" + } + }, + "iconSize": "{typography.fontSize.500}" + }, + "colorScheme": { + "light": { + "root": { + "background": "{background.transparent}" + } + } + }, + "root": { + "borderColor": "{border.transparent}", + "borderRadius": "{dimension.radius.300}", + "color": "{text.default}", + "gap": "{dimension.space.100}", + "transitionDuration": "{dimension.duration.200}", + "verticalOrientation": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + }, + "horizontalOrientation": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + } + }, + "baseItem": { + "borderRadius": "{dimension.radius.300}", + "padding": "{dimension.space.200} {dimension.space.300}" + }, + "item": { + "focusBackground": "{background.neutral.subtleHover}", + "activeBackground": "{background.selected}", + "color": "{text.default}", + "focusColor": "{text.default}", + "activeColor": "{text.onBold}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}", + "gap": "{dimension.space.200}", + "icon": { + "color": "{icon.strong}", + "focusColor": "{icon.strong}", + "activeColor": "{icon.onBold}" + } + }, + "overlay": { + "padding": "{dimension.space.100}", + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "borderRadius": "{dimension.radius.300}", + "color": "{text.default}", + "shadow": "{shadow.400}", + "gap": "0rem" + }, + "submenu": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + }, + "submenuLabel": { + "fontWeight": "{typography.fontWeight.regular}", + "padding": "{dimension.space.200} {dimension.space.300}", + "background": "{background.transparent}", + "color": "{text.muted}" + }, + "submenuIcon": { + "size": "{typography.fontSize.500}", + "color": "{icon.strongMuted}", + "focusColor": "{icon.strongMuted}", + "activeColor": "{icon.onBold}" + }, + "separator": { + "borderColor": "{border.subtle}" + }, + "mobileButton": { + "borderRadius": "{dimension.radius.200}", + "size": "{dimension.size.500}", + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "hoverBackground": "{background.surface.hover.section}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + } + }, + "menu": { + "extend": { + "paddingX": "0.25rem", + "iconSize": "{typography.fontSize.500}", + "paddingY": "0.25rem", + "extItem": { + "caption": { + "gap": "{dimension.space.100}" + }, + "activeBackground": "{background.selected}", + "activeColor": "{text.onBold}" + } + }, + "colorScheme": { + "light": { + "extend": { + "extItem": { + "caption": { + "color": "{text.muted}" + }, + "icon": { + "activeColor": "{icon.onBold}" + } + } + }, + "root": { + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "color": "{text.default}" + }, + "item": { + "focusBackground": "{background.neutral.subtleHover}", + "color": "{text.default}", + "focusColor": "{text.default}", + "icon": { + "color": "{icon.strong}", + "focusColor": "{icon.strong}" + } + } + } + }, + "root": { + "borderRadius": "{dimension.radius.300}", + "shadow": "{shadow.400}", + "transitionDuration": "{dimension.duration.200}" + }, + "list": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + }, + "submenuLabel": { + "padding": "{dimension.space.200} {dimension.space.300}", + "fontWeight": "{typography.fontWeight.regular}", + "background": "{background.transparent}", + "color": "{text.muted}" + }, + "separator": { + "borderColor": "{border.subtle}" + }, + "item": { + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}", + "gap": "{dimension.space.200}" + } + }, + "menubar": { + "extend": { + "iconSize": "{typography.fontSize.500}", + "extItem": { + "caption": { + "color": "{text.muted}", + "gap": "{dimension.space.100}" + } + }, + "extSubmenuLabel": { + "padding": "{dimension.space.200} {dimension.space.300}", + "fontWeight": "{typography.fontWeight.demibold}", + "background": "{background.transparent}", + "color": "{text.muted}" + } + }, + "colorScheme": { + "light": { + "root": { + "background": "{background.transparent}" + } + } + }, + "root": { + "borderColor": "{border.transparent}", + "borderRadius": "{dimension.radius.200}", + "color": "{text.default}", + "gap": "{dimension.space.100}", + "padding": "{dimension.space.100}", + "transitionDuration": "{dimension.duration.200}" + }, + "baseItem": { + "borderRadius": "{dimension.radius.200}", + "padding": "{dimension.space.200} {dimension.space.300}" + }, + "item": { + "focusBackground": "{background.neutral.subtleHover}", + "activeBackground": "{background.selected}", + "color": "{text.default}", + "focusColor": "{text.default}", + "activeColor": "{text.onBold}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}", + "gap": "{dimension.space.200}", + "icon": { + "color": "{icon.strong}", + "focusColor": "{icon.strong}", + "activeColor": "{icon.onBold}" + } + }, + "submenu": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}", + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "borderRadius": "{dimension.radius.300}", + "shadow": "{shadow.400}", + "mobileIndent": "{dimension.space.300}", + "icon": { + "size": "{typography.fontSize.500}", + "color": "{icon.strongMuted}", + "focusColor": "{icon.strongMuted}", + "activeColor": "{icon.onBold}" + } + }, + "separator": { + "borderColor": "{border.subtle}" + }, + "mobileButton": { + "borderRadius": "{dimension.radius.200}", + "size": "{dimension.size.500}", + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "hoverBackground": "{background.surface.hover.section}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + } + }, + "message": { + "extend": { + "width": "{dimension.overlayWidth.base}", + "extText": { + "gap": "{dimension.space.100}" + }, + "extInfo": { + "color": "{text.infoBold}", + "closeButton": { + "color": "{text.infoBold}", + "borderColor": "{border.infoBold}" + }, + "caption": { + "color": "{text.default}" + } + }, + "extAccentLine": { + "width": "{dimension.size.150}" + }, + "extCloseButton": { + "width": "{dimension.size.100}" + }, + "extSuccess": { + "color": "{text.successBold}", + "closeButton": { + "color": "{text.successBold}", + "borderColor": "{border.checked}" + }, + "caption": { + "color": "{text.default}" + } + }, + "extWarn": { + "color": "{text.warningBold}", + "closeButton": { + "color": "{text.warningBold}", + "borderColor": "{border.warningBold}" + }, + "caption": { + "color": "{text.default}" + } + }, + "extError": { + "color": "{text.dangerBold}", + "closeButton": { + "color": "{text.dangerBold}", + "borderColor": "{border.dangerBold}" + }, + "caption": { + "color": "{text.default}" + } + } + }, + "colorScheme": { + "light": { + "success": { + "background": "{background.brand.subtle}", + "borderColor": "{border.checked}", + "color": "{text.default}", + "shadow": "none", + "outlined": { + "color": "{text.default}", + "borderColor": "{border.checked}" + }, + "closeButton": { + "hoverBackground": "{background.success.subtleActive}", + "focusRing": { + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" + } + }, + "simple": { + "color": "{text.default}" + } + }, + "outlined": { + "root": { + "borderWidth": "0rem" + }, + "closeButton": { + "hoverBackground": "{background.transparent}", + "focusRing": { + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" + } + }, + "outlined": { + "color": "{text.transparent}", + "borderColor": "{border.transparent}" + }, + "simple": { + "color": "{text.transparent}" + } + }, + "simple": { + "content": { + "padding": "0rem" + } + }, + "warn": { + "background": "{background.warning.subtle}", + "borderColor": "{border.warningBold}", + "color": "{text.default}", + "shadow": "none", + "outlined": { + "color": "{text.default}", + "borderColor": "{border.warningBold}" + }, + "closeButton": { + "hoverBackground": "{background.warning.subtleActive}", + "focusRing": { + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" + } + }, + "simple": { + "color": "{text.default}" + } + }, + "error": { + "background": "{background.danger.subtle}", + "borderColor": "{border.dangerBold}", + "color": "{text.default}", + "shadow": "none", + "outlined": { + "color": "{text.default}", + "borderColor": "{border.dangerBold}" + }, + "closeButton": { + "hoverBackground": "{background.danger.subtleActive}", + "focusRing": { + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" + } + }, + "simple": { + "color": "{text.default}" + } + }, + "secondary": { + "borderColor": "{border.transparent}", + "shadow": "none", + "closeButton": { + "hoverBackground": "{background.transparent}", + "focusRing": { + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" + } + }, + "simple": { + "color": "{text.transparent}" + }, + "outlined": { + "color": "{text.transparent}", + "borderColor": "{border.transparent}" + } + }, + "contrast": { + "borderColor": "{border.transparent}", + "shadow": "none", + "closeButton": { + "hoverBackground": "{background.transparent}", + "focusRing": { + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" + } + }, + "simple": { + "color": "{text.transparent}" + }, + "outlined": { + "color": "{text.transparent}", + "borderColor": "{border.transparent}" + } + }, + "info": { + "background": "{background.info.subtle}", + "borderColor": "{border.infoBold}", + "color": "{text.default}", + "shadow": "none", + "closeButton": { + "hoverBackground": "{background.info.subtleActive}", + "focusRing": { + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" + } + }, + "outlined": { + "color": "{text.default}", + "borderColor": "{border.infoBold}" + }, + "simple": { + "color": "{text.default}" + } + } + } + }, + "root": { + "borderRadius": "{dimension.radius.300}", + "borderWidth": "{dimension.size.100}", + "transitionDuration": "{dimension.duration.200}" + }, + "content": { + "padding": "{dimension.space.400}", + "gap": "{dimension.space.400}", + "sm": { + "padding": "{dimension.space.400}" + }, + "lg": { + "padding": "{dimension.space.400}" + } + }, + "text": { + "fontSize": "{typography.fontSize.300}", + "fontWeight": "{typography.fontWeight.bold}", + "sm": { + "fontSize": "{typography.fontSize.300}" + }, + "lg": { + "fontSize": "{typography.fontSize.300}" + } + }, + "icon": { + "size": "{dimension.size.550}", + "sm": { + "size": "{dimension.size.550}" + }, + "lg": { + "size": "{dimension.size.550}" + } + }, + "closeButton": { + "width": "{dimension.size.500}", + "height": "{dimension.size.500}", + "borderRadius": "{dimension.radius.300}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "offset": "{dimension.focusRing.offset}" + } + }, + "closeIcon": { + "size": "{dimension.size.300}", + "sm": { + "size": "{dimension.size.300}" + }, + "lg": { + "size": "{dimension.size.300}" + } + } + }, + "metergroup": { + "extend": { + "extLabel": { + "color": "{text.muted}" + } + }, + "root": { + "borderRadius": "{dimension.radius.300}", + "gap": "{dimension.space.300}" + }, + "meters": { + "size": "{dimension.size.200}", + "background": "{background.disabled}" + }, + "label": { + "gap": "{dimension.space.100}" + }, + "labelMarker": { + "size": "{dimension.size.200}" + }, + "labelIcon": { + "size": "{dimension.size.300}" + }, + "labelList": { + "verticalGap": "{dimension.space.200}", + "horizontalGap": "{dimension.space.300}" + } + }, + "multiselect": { + "colorScheme": { + "overlay": { + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "color": "{text.default}" + }, + "option": { + "focusBackground": "{background.surface.hover.section}", + "selectedBackground": "{background.selected}", + "selectedFocusBackground": "{background.selectedStrong}", + "color": "{text.default}", + "focusColor": "{text.default}", + "selectedColor": "{text.onBold}", + "selectedFocusColor": "{text.onBold}" + }, + "root": { + "background": "{background.surface.ground}", + "disabledBackground": "{background.disabled}", + "filledBackground": "{background.surface.ground}", + "filledHoverBackground": "{background.surface.ground}", + "filledFocusBackground": "{background.surface.ground}", + "borderColor": "{border.default}", + "hoverBorderColor": "{border.brand}", + "focusBorderColor": "{border.brand}", + "invalidBorderColor": "{border.danger}", + "color": "{text.defaultHover}", + "disabledColor": "{text.muted}", + "placeholderColor": "{text.muted}", + "invalidPlaceholderColor": "{text.danger}", + "focusRing": { + "color": "{background.success.subtleActive}" + } + }, + "dropdown": { + "color": "{text.muted}" + }, + "optionGroup": { + "background": "{background.surface.raised}", + "color": "{text.muted}" + }, + "clearIcon": { + "color": "{icon.subtle}" + } + }, + "extend": { + "paddingX": "0.3571rem", + "paddingY": "0.3571rem", + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": "{dimension.size.300}", + "width": "{dimension.overlayWidth.narrow}", + "readonlyBackground": "{background.neutral.subtleHover}" + }, + "root": { + "shadow": "0", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}", + "sm": { + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.200}", + "paddingY": "{dimension.space.200}" + }, + "lg": { + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}" + }, + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "offset": "{dimension.focusRing.offset}", + "shadow": "0" + } + }, + "dropdown": { + "width": "{dimension.size.600}" + }, + "overlay": { + "borderRadius": "{dimension.radius.300}", + "shadow": "{shadow.400}" + }, + "list": { + "padding": "{dimension.space.100}", + "header": { + "padding": "{dimension.space.400} {dimension.space.400} 0 {dimension.space.400}" + }, + "gap": "{dimension.space.100}" + }, + "chip": { + "borderRadius": "{dimension.radius.200}" + }, + "option": { + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}", + "gap": "{dimension.space.200}" + }, + "optionGroup": { + "fontWeight": "{typography.fontWeight.demibold}", + "padding": "{dimension.space.200} {dimension.space.300}" + }, + "emptyMessage": { + "padding": "{dimension.space.200} {dimension.space.300}" + } + }, + "paginator": { + "root": { + "padding": "0 {dimension.space.200}", + "gap": "{dimension.space.200}", + "borderRadius": "{dimension.radius.300}", + "background": "{background.transparent}", + "color": "{text.default}", + "transitionDuration": "{dimension.duration.200}" + }, + "currentPageReport": { + "color": "{text.muted}" + }, + "navButton": { + "background": "{background.transparent}", + "hoverBackground": "{background.surface.hover.section}", + "selectedBackground": "{background.selected}", + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "selectedColor": "{text.onBold}", + "width": "{dimension.size.600}", + "height": "{dimension.size.600}", + "borderRadius": "{dimension.radius.300}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "focus": "{shadow.200}" + } + }, + "jumpToPageInput": { + "maxWidth": "{dimension.size.900}" + } + }, + "panelmenu": { + "extend": { + "extPanel": { + "gap": "{dimension.space.100}" + }, + "iconSize": "{typography.fontSize.500}", + "extItem": { + "activeBackground": "{background.selected}", + "activeColor": "{text.onBold}", + "caption": { + "color": "{text.muted}", + "gap": "{dimension.space.100}" + } + } + }, + "root": { + "gap": "{dimension.space.100}", + "transitionDuration": "{dimension.duration.200}" + }, + "panel": { + "background": "{background.transparent}", + "borderColor": "{border.transparent}", + "borderWidth": "{dimension.borderWidth.100}", + "color": "{text.default}", + "padding": "{dimension.space.100}", + "borderRadius": "{dimension.radius.300}", + "first": { + "borderWidth": "{dimension.borderWidth.100} {dimension.borderWidth.100} 0 {dimension.borderWidth.100}", + "topBorderRadius": "{dimension.radius.300}" + }, + "last": { + "borderWidth": "0 {dimension.borderWidth.100} {dimension.borderWidth.100} {dimension.borderWidth.100}", + "topBorderRadius": "{dimension.radius.300}" + } + }, + "item": { + "focusBackground": "{background.neutral.subtleHover}", + "color": "{text.default}", + "focusColor": "{text.default}", + "gap": "{dimension.space.200}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}", + "icon": { + "color": "{icon.strong}", + "focusColor": "{icon.strong}" + } + }, + "submenu": { + "indent": "{dimension.space.600}" + }, + "separator": { + "borderColor": "{border.subtle}" + }, + "submenuIcon": { + "color": "{icon.strongMuted}", + "focusColor": "{icon.strongMuted}" + } + }, + "password": { + "extend": { + "borderWidth": "{dimension.borderWidth.100}" + }, + "colorScheme": { + "light": { + "strength": { + "weakBackground": "{background.danger.bold}", + "mediumBackground": "{background.warning.bold}", + "strongBackground": "{background.brand.boldHover}" + }, + "icon": { + "color": "{icon.subtle}" + } + }, + "dark": { + "strength": { + "weakBackground": "{background.danger.bold}", + "mediumBackground": "{background.warning.bold}", + "strongBackground": "{background.brand.boldHover}" + }, + "icon": { + "color": "{icon.subtle}" + } + } + }, + "meter": { + "background": "{background.disabled}", + "borderRadius": "{dimension.radius.300}", + "height": "{dimension.size.200}" + }, + "overlay": { + "background": "{background.surface.raised}", + "borderColor": "{border.default}", + "borderRadius": "{dimension.radius.200}", + "color": "{text.default}", + "padding": "{dimension.space.300}", + "shadow": "{shadow.400}" + }, + "content": { + "gap": "{dimension.space.200}" + } + }, + "popover": { + "extend": { + "borderWidth": "{dimension.borderWidth.100}", + "arrow": { + "width": "{dimension.size.250}", + "height": "{dimension.size.200}" + } + }, + "root": { + "background": "{background.surface.raised}", + "borderColor": "{border.default}", + "color": "{text.default}", + "borderRadius": "{dimension.radius.200}", + "shadow": "{shadow.400}", + "gutter": "{dimension.space.300}", + "arrowOffset": "{dimension.space.500}", + "arrowLeft": "0px" + }, + "content": { + "padding": "{dimension.space.300}" + } + }, + "progressbar": { + "label": { + "color": "{text.staticDark}", + "fontSize": "{typography.fontSize.100}", + "fontWeight": "{typography.fontWeight.regular}" + }, + "root": { + "background": "{background.disabled}", + "borderRadius": "{dimension.radius.300}", + "height": "{dimension.size.300}" + }, + "value": { + "background": "{background.brand.bold}" + } + }, + "progressspinner": { + "extend": { + "small": "{dimension.size.300}", + "medium": "{dimension.size.500}", + "large": "{dimension.size.700}", + "xlarge": "{dimension.size.800}" + }, + "colorScheme": { + "light": { + "root": { + "colorOne": "{background.brand.bold}", + "colorTwo": "{background.info.bold}", + "colorThree": "{background.danger.bold}", + "colorFour": "{background.warning.bold}" + } + } + }, + "root": { + "borderWidth": "{dimension.size.150}" + } + }, + "radiobutton": { + "root": { + "width": "{dimension.size.400}", + "height": "{dimension.size.400}", + "background": "{background.surface.ground}", + "checkedBackground": "{background.selected}", + "checkedHoverBackground": "{background.surface.inverse}", + "disabledBackground": "{background.disabled}", + "filledBackground": "{background.surface.ground}", + "borderColor": "{border.default}", + "hoverBorderColor": "{border.strong}", + "focusBorderColor": "{border.default}", + "checkedBorderColor": "{border.strong}", + "checkedHoverBorderColor": "{border.strong}", + "checkedFocusBorderColor": "{border.strong}", + "checkedDisabledBorderColor": "{border.default}", + "invalidBorderColor": "{border.danger}", + "shadow": "0", + "transitionDuration": "{dimension.duration.200}" + }, + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + }, + "sm": { + "width": "{dimension.size.300}", + "height": "{dimension.size.300}" + }, + "lg": { + "width": "{dimension.size.350}", + "height": "{dimension.size.350}" + }, + "icon": { + "size": "0.7rem", + "checkedColor": "{icon.onBold}", + "checkedHoverColor": "{icon.onBold}", + "disabledColor": "{icon.subtle}", + "sm": { + "size": "{dimension.size.200}" + }, + "lg": { + "size": "{dimension.size.300}" + } + } + }, + "rating": { + "root": { + "gap": "{dimension.space.200}", + "transitionDuration": "{dimension.duration.200}" + }, + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + }, + "icon": { + "size": "{dimension.size.400}", + "color": "{icon.subtle}", + "hoverColor": "{background.warning.bold}", + "activeColor": "{background.warning.bold}" + } + }, + "ripple": { + "colorScheme": { + "light": { + "root": { + "background": "rgba(255, 255, 255, 0.0100)" + } + } + } + }, + "scrollpanel": { + "colorScheme": { + "light": { + "bar": { + "background": "{text.disabled}" + } + } + }, + "root": { + "transitionDuration": "{dimension.duration.200}" + }, + "bar": { + "size": "{dimension.size.200}", + "borderRadius": "{dimension.radius.200}", + "focusRing": { + "width": "0rem", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + } + }, + "select": { + "extend": { + "extOption": { + "background": "{background.surface.raised}", + "gap": "{dimension.space.200}" + }, + "extOptionGroup": { + "gap": "{dimension.space.200}" + }, + "readonlyBackground": "{background.neutral.subtleHover}", + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": "{dimension.size.300}" + }, + "root": { + "background": "{background.surface.ground}", + "disabledBackground": "{background.disabled}", + "filledBackground": "{background.surface.ground}", + "filledHoverBackground": "{background.surface.ground}", + "filledFocusBackground": "{background.surface.ground}", + "borderColor": "{border.default}", + "hoverBorderColor": "{border.brand}", + "focusBorderColor": "{border.brand}", + "invalidBorderColor": "{border.danger}", + "color": "{text.default}", + "disabledColor": "{text.muted}", + "placeholderColor": "{text.muted}", + "invalidPlaceholderColor": "{text.danger}", + "shadow": "0", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.300}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}", + "sm": { + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.200}" + }, + "lg": { + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.400}" + }, + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "0" + } + }, + "dropdown": { + "width": "{dimension.size.600}", + "color": "{text.defaultHover}" + }, + "overlay": { + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "borderRadius": "{dimension.radius.300}", + "color": "{text.default}", + "shadow": "{shadow.400}" + }, + "list": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}", + "header": { + "padding": "{dimension.space.400} {dimension.space.400} 0 {dimension.space.400}" + } + }, + "option": { + "focusBackground": "{background.surface.hover.section}", + "selectedBackground": "{background.selected}", + "selectedFocusBackground": "{background.selectedStrong}", + "color": "{text.default}", + "focusColor": "{text.default}", + "selectedColor": "{text.onBold}", + "selectedFocusColor": "{text.onBold}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}" + }, + "optionGroup": { + "background": "{background.surface.raised}", + "color": "{text.muted}", + "fontWeight": "{typography.fontWeight.regular}", + "padding": "{dimension.space.200} {dimension.space.300}" + }, + "clearIcon": { + "color": "{icon.default}" + }, + "checkmark": { + "color": "{text.default}", + "gutterStart": "-{dimension.space.200}", + "gutterEnd": "{dimension.space.200}" + }, + "emptyMessage": { + "padding": "{dimension.space.200} {dimension.space.300}" + } + }, + "selectbutton": { + "extend": { + "gap": "{dimension.space.100}", + "paddingX": "{dimension.space.100}", + "paddingY": "{dimension.space.100}", + "checkedBackground": "{background.surface.ground}", + "iconSize": { + "sm": "{dimension.size.300}", + "md": "{dimension.size.350}", + "lg": "{dimension.size.400}", + "xlg": "{dimension.size.450}" + }, + "checkedBorderColor": "{background.surface.ground}", + "checkedColor": "{text.defaultHover}", + "ext": { + "borderRadius": "{dimension.radius.200}" + } + }, + "colorScheme": { + "light": { + "root": { + "invalidBorderColor": "{border.danger}" + }, + "extend": { + "background": "{background.disabled}" + } + } + }, + "root": { + "borderRadius": "{dimension.radius.300}" + } + }, + "skeleton": { + "extend": { + "minWidth": "{dimension.size.500}", + "height": "{dimension.size.500}" + }, + "colorScheme": { + "light": { + "root": { + "background": "{background.disabled}", + "animationBackground": "{background.neutral.subtleHover}" + } + } + }, + "root": { + "borderRadius": "{dimension.radius.300}" + } + }, + "slider": { + "colorScheme": { + "handle": { + "content": { + "background": "{background.surface.canvas}" + } + } + }, + "root": { + "transitionDuration": "{dimension.duration.200}" + }, + "track": { + "background": "{background.disabled}", + "borderRadius": "{dimension.radius.300}", + "size": "{dimension.size.150}" + }, + "range": { + "background": "{background.selected}" + }, + "handle": { + "width": "{dimension.size.350}", + "height": "{dimension.size.350}", + "borderRadius": "{dimension.radius.max}", + "background": "{background.selected}", + "hoverBackground": "{background.selected}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + }, + "content": { + "borderRadius": "{dimension.radius.max}", + "hoverBackground": "{background.selected}", + "width": "{dimension.size.250}", + "height": "{dimension.size.250}", + "shadow": "none" + } + } + }, + "splitter": { + "colorScheme": { + "light": { + "handle": { + "background": "{background.selected}" + } + } + }, + "gutter": { + "background": "{background.neutral.subtleHover}" + }, + "root": { + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "color": "{text.default}", + "transitionDuration": "{dimension.duration.200}" + }, + "handle": { + "size": "{dimension.size.150}", + "borderRadius": "{dimension.radius.300}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + } + }, + "stepper": { + "extend": { + "extCaption": { + "gap": "{dimension.space.100}" + }, + "extStepNumber": { + "invalidBackground": "{background.danger.border}", + "invalidColor": "{text.dangerStrong}", + "invalidBorderColor": "{border.danger}", + "borderWidth": "{dimension.size.100}", + "iconSize": "{dimension.size.400}" + } + }, + "root": { + "transitionDuration": "{dimension.duration.200}" + }, + "separator": { + "background": "{background.disabled}", + "activeBackground": "{background.selected}", + "margin": "0 0 0 1.625rem", + "size": "{dimension.size.100}" + }, + "step": { + "padding": "{dimension.space.200}", + "gap": "{dimension.space.200}" + }, + "stepHeader": { + "padding": "0rem", + "borderRadius": "0rem", + "gap": "{dimension.space.200}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + }, + "stepTitle": { + "color": "{text.default}", + "activeColor": "{text.default}", + "fontWeight": "{typography.fontWeight.regular}" + }, + "stepNumber": { + "background": "{background.surface.raised}", + "activeBackground": "{background.brand.bold}", + "borderColor": "{border.subtle}", + "activeBorderColor": "{border.checked}", + "color": "{text.default}", + "activeColor": "{text.staticDark}", + "size": "{dimension.size.400}", + "fontSize": "{typography.fontSize.300}", + "fontWeight": "{typography.fontWeight.bold}", + "borderRadius": "{dimension.radius.max}", + "shadow": "none" + }, + "steppanels": { + "padding": "{dimension.space.400}" + }, + "steppanel": { + "background": "{background.surface.raised}", + "color": "{text.default}", + "padding": "0rem", + "indent": "0rem" + } + }, + "steps": { + "itemLink": { + "gap": "{dimension.space.200}" + }, + "itemLabel": { + "fontWeight": "{typography.fontWeight.regular}" + }, + "itemNumber": { + "background": "{background.surface.raised}", + "size": "{dimension.size.500}", + "fontSize": "{typography.fontSize.300}", + "fontWeight": "{typography.fontWeight.bold}", + "borderRadius": "{dimension.radius.max}", + "shadow": "none" + } + }, + "tabs": { + "colorScheme": { + "light": { + "navButton": { + "shadow": "none" + }, + "tab": { + "background": "{background.transparent}", + "hoverBackground": "{background.transparent}", + "activeBackground": "{background.transparent}" + } + } + }, + "root": { + "transitionDuration": "{dimension.duration.200}" + }, + "tablist": { + "borderWidth": "0 0 {dimension.size.100} 0", + "background": "{background.transparent}", + "borderColor": "{border.subtle}" + }, + "tab": { + "borderWidth": "0", + "borderColor": "{border.subtle}", + "hoverBorderColor": "{border.subtle}", + "activeBorderColor": "{border.inverse}", + "color": "{text.muted}", + "hoverColor": "{text.default}", + "activeColor": "{text.default}", + "padding": "{dimension.space.400}", + "fontWeight": "{typography.fontWeight.demibold}", + "margin": "0", + "gap": "{dimension.space.200}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + }, + "tabpanel": { + "background": "{background.transparent}", + "color": "{text.default}", + "padding": "{dimension.space.400}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + }, + "navButton": { + "background": "{background.surface.raised}", + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "width": "{dimension.size.400}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + } + }, + "activeBar": { + "height": "0.18rem", + "bottom": "-0.18rem", + "background": "{text.default}" + } + }, + "toast": { + "extend": { + "extInfo": { + "color": "{text.infoBold}", + "closeButton": { + "color": "{text.infoBold}", + "borderColor": "{border.infoBold}" + }, + "caption": { + "color": "{text.default}" + } + }, + "extAccentLine": { + "width": "{dimension.size.150}" + }, + "extCloseButton": { + "width": "{dimension.size.100}" + }, + "extSuccess": { + "color": "{text.successBold}", + "closeButton": { + "color": "{text.successBold}", + "borderColor": "{border.checked}" + }, + "caption": { + "color": "{text.default}" + } + }, + "extWarn": { + "color": "{text.warningBold}", + "closeButton": { + "color": "{text.warningBold}", + "borderColor": "{border.warningBold}" + }, + "caption": { + "color": "{text.default}" + } + }, + "extError": { + "color": "{text.dangerBold}", + "closeButton": { + "color": "{text.dangerBold}", + "borderColor": "{border.dangerBold}" + }, + "caption": { + "color": "{text.default}" + } + } + }, + "colorScheme": { + "light": { + "info": { + "background": "{background.info.subtle}", + "borderColor": "{border.infoBold}", + "color": "{text.default}", + "detailColor": "{text.default}", + "shadow": "{shadow.400}", + "closeButton": { + "hoverBackground": "{background.info.subtleActive}", + "focusRing": { + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" + } + } + }, + "success": { + "background": "{background.brand.subtle}", + "borderColor": "{border.checked}", + "color": "{text.default}", + "detailColor": "{text.default}", + "shadow": "{shadow.400}", + "closeButton": { + "hoverBackground": "{background.success.subtleActive}", + "focusRing": { + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" + } + } + }, + "warn": { + "background": "{background.warning.subtle}", + "borderColor": "{border.warningBold}", + "color": "{text.default}", + "detailColor": "{text.default}", + "shadow": "{shadow.400}", + "closeButton": { + "hoverBackground": "{background.warning.subtleActive}", + "focusRing": { + "color": "{background.success.subtleActive}", + "shadow": "none" + } + } + }, + "error": { + "background": "{background.danger.subtle}", + "borderColor": "{border.dangerBold}", + "color": "{text.default}", + "detailColor": "{text.default}", + "shadow": "{shadow.400}", + "closeButton": { + "hoverBackground": "{background.danger.subtleActive}", + "focusRing": { + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" + } + } + }, + "secondary": { + "shadow": "{shadow.400}" + }, + "contrast": { + "shadow": "{shadow.400}" + } + } + }, + "root": { + "width": "{dimension.overlayWidth.base}", + "borderWidth": "{dimension.size.100}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}" + }, + "icon": { + "size": "{dimension.size.550}" + }, + "content": { + "padding": "{dimension.space.400}", + "gap": "{dimension.space.400}" + }, + "text": { + "gap": "{dimension.space.100}" + }, + "summary": { + "fontWeight": "{typography.fontWeight.bold}", + "fontSize": "{typography.fontSize.300}" + }, + "detail": { + "fontWeight": "{typography.fontWeight.regular}", + "fontSize": "{typography.fontSize.200}" + }, + "closeButton": { + "width": "{dimension.size.500}", + "height": "{dimension.size.500}", + "borderRadius": "{dimension.radius.300}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "offset": "{dimension.focusRing.offset}" + } + }, + "closeIcon": { + "size": "{dimension.size.300}" + } + }, + "tag": { + "colorScheme": { + "light": { + "primary": { + "background": "{background.brand.bold}", + "color": "{text.default}" + }, + "secondary": { + "background": "{background.disabled}", + "color": "{text.default}" + }, + "success": { + "background": "{background.success.border}", + "color": "{text.successStrong}" + }, + "info": { + "background": "{background.info.mutedBorder}", + "color": "{text.infoStrong}" + }, + "warn": { + "background": "{background.warning.mutedBorder}", + "color": "{text.warningStrong}" + }, + "danger": { + "background": "{background.danger.mutedBorder}", + "color": "{text.dangerStrong}" + } + } + }, + "root": { + "fontSize": "{typography.fontSize.100}", + "fontWeight": "{typography.fontWeight.regular}", + "padding": "{dimension.space.100} {dimension.space.200}", + "gap": "{dimension.space.100}", + "borderRadius": "{dimension.size.200}", + "roundedBorderRadius": "{dimension.radius.500}" + }, + "icon": { + "size": "{dimension.size.300}" + } + }, + "textarea": { + "extend": { + "readonlyBackground": "{background.neutral.subtleHover}", + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": "{dimension.size.300}", + "minHeight": "{dimension.size.900}", + "extXlg": { + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.500}" + } + }, + "root": { + "background": "{background.surface.ground}", + "disabledBackground": "{background.disabled}", + "filledBackground": "{background.surface.ground}", + "filledHoverBackground": "{background.surface.ground}", + "filledFocusBackground": "{background.surface.ground}", + "borderColor": "{border.default}", + "hoverBorderColor": "{border.brand}", + "focusBorderColor": "{border.brand}", + "invalidBorderColor": "{border.danger}", + "color": "{text.defaultHover}", + "disabledColor": "{text.muted}", + "placeholderColor": "{text.muted}", + "invalidPlaceholderColor": "{text.danger}", + "shadow": "0", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.300}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "0" + }, + "sm": { + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.200}" + }, + "lg": { + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.400}" + } + } + }, + "tieredmenu": { + "extend": { + "extSubmenu": { + "borderColor": "{border.subtle}", + "background": "{background.surface.raised}" + }, + "iconSize": "{typography.fontSize.500}", + "extItem": { + "caption": { + "gap": "{dimension.space.100}", + "color": "{text.muted}" + } + } + }, + "root": { + "background": "{background.surface.raised}", + "borderColor": "{border.transparent}", + "color": "{text.default}", + "borderRadius": "{dimension.radius.300}", + "shadow": "{shadow.400}", + "transitionDuration": "{dimension.duration.200}" + }, + "list": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + }, + "item": { + "focusBackground": "{background.neutral.subtleHover}", + "activeBackground": "{background.selected}", + "color": "{text.default}", + "focusColor": "{text.default}", + "activeColor": "{text.onBold}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}", + "gap": "{dimension.space.200}", + "icon": { + "color": "{icon.strong}", + "focusColor": "{icon.strong}", + "activeColor": "{icon.onBold}" + } + }, + "submenu": { + "mobileIndent": "{dimension.space.300}" + }, + "separator": { + "borderColor": "{border.subtle}" + } + }, + "timeline": { + "extend": { + "extEvent": { + "gap": "{dimension.space.100}" + } + }, + "event": { + "minHeight": "{dimension.size.800}" + }, + "vertical": { + "eventContent": { + "padding": "0 {dimension.space.200}" + } + }, + "horizontal": { + "eventContent": { + "padding": "{dimension.space.200} 0" + } + }, + "eventMarker": { + "size": "{dimension.size.300}", + "borderRadius": "{dimension.radius.300}", + "borderWidth": "{dimension.size.150}", + "background": "{background.surface.raised}", + "borderColor": "{border.checked}", + "content": { + "borderRadius": "{dimension.radius.300}", + "size": "{dimension.size.250}", + "background": "{background.transparent}", + "insetShadow": "none" + } + }, + "eventConnector": { + "color": "{background.disabled}", + "size": "{dimension.size.100}" + }, + "colorScheme": { + "light": { + "eventMarker": { + "background": "{background.surface.raised}", + "borderColor": "{border.checked}" + } + }, + "dark": { + "eventMarker": { + "background": "{background.surface.raised}", + "borderColor": "{border.checked}" + } + } + } + }, + "togglebutton": { + "extend": { + "ext": { + "gap": "{dimension.space.300}" + }, + "iconSize": { + "sm": "{dimension.size.300}", + "md": "{dimension.size.350}", + "lg": "{dimension.size.400}" + }, + "iconOnlyWidth": "{dimension.size.600}", + "hoverBorderColor": "{border.default}", + "checkedHoverColor": "{text.onBold}", + "checkedHoverBackground": "{background.surface.inverse}", + "checkedHoverBorderColor": "{border.inverse}", + "extXlg": { + "padding": "{dimension.space.500} {dimension.space.600}", + "iconOnlyWidth": "4.0714rem" + }, + "extSm": { + "iconOnlyWidth": "2.1429rem" + }, + "extLg": { + "iconOnlyWidth": "3.5714rem" + } + }, + "colorScheme": { + "light": { + "root": { + "background": "{background.disabled}", + "hoverBackground": "{text.disabled}", + "borderColor": "{border.subtle}", + "color": "{text.default}", + "hoverColor": "{text.default}", + "checkedBackground": "{background.selected}", + "checkedColor": "{text.onBold}", + "checkedBorderColor": "{border.strong}", + "disabledBackground": "{background.disabled}", + "disabledBorderColor": "{border.subtle}", + "disabledColor": "{text.muted}", + "invalidBorderColor": "{border.danger}" + }, + "icon": { + "color": "{icon.strong}", + "hoverColor": "{icon.strong}", + "checkedColor": "{icon.onBold}", + "disabledColor": "{icon.subtle}" + }, + "content": { + "checkedBackground": "{background.transparent}" + } + } + }, + "root": { + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.radius.max}", + "gap": "{dimension.space.200}", + "fontWeight": "{typography.fontWeight.demibold}", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" + }, + "sm": { + "fontSize": "{typography.fontSize.200}", + "padding": "{dimension.space.100} {dimension.space.300}" + }, + "lg": { + "fontSize": "{typography.fontSize.500}", + "padding": "{dimension.space.400} {dimension.space.600}" + }, + "transitionDuration": "{dimension.duration.200}" + }, + "content": { + "checkedShadow": "none", + "padding": "0rem", + "borderRadius": "0rem", + "sm": { + "padding": "0rem" + }, + "lg": { + "padding": "0rem" + } + } + }, + "toggleswitch": { + "colorScheme": { + "light": { + "root": { + "background": "{text.hover.subtle}", + "hoverBackground": "{background.neutral.bold}", + "disabledBackground": "{background.disabled}", + "checkedBackground": "{background.selected}", + "checkedHoverBackground": "{background.surface.inverse}" + }, + "handle": { + "background": "{text.staticLight}", + "hoverBackground": "{text.staticLight}", + "disabledBackground": "{background.neutral.bold}", + "checkedBackground": "{background.surface.canvas}", + "checkedHoverBackground": "{background.surface.canvas}", + "color": "{text.default}", + "hoverColor": "{text.default}", + "checkedColor": "{text.default}", + "checkedHoverColor": "{text.default}" + } + } + }, + "root": { + "width": "{dimension.size.600}", + "height": "{dimension.size.400}", + "borderRadius": "{dimension.radius.max}", + "gap": "{dimension.space.100}", + "borderWidth": "{dimension.borderWidth.100}", + "shadow": "none", + "focusRing": { + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "0" + }, + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "checkedBorderColor": "{border.transparent}", + "checkedHoverBorderColor": "{border.transparent}", + "invalidBorderColor": "{border.danger}", + "transitionDuration": "{dimension.duration.200}", + "slideDuration": "{dimension.duration.200}" + }, + "handle": { + "borderRadius": "{dimension.radius.max}", + "size": "{dimension.size.300}" + } + }, + "tooltip": { + "colorScheme": { + "light": { + "root": { + "background": "{background.selected}", + "color": "{text.onBold}" + } + } + }, + "root": { + "maxWidth": "{dimension.overlayWidth.base}", + "gutter": "{dimension.space.100}", + "shadow": "{shadow.400}", + "padding": "{dimension.space.200} {dimension.space.400} ", + "borderRadius": "{dimension.radius.200}" + } + }, + "tree": { + "root": { + "background": "{background.surface.raised}", + "color": "{text.default}", + "padding": "{dimension.space.400}", + "gap": "{dimension.space.100}", + "indent": "{dimension.space.400}" + }, + "node": { + "padding": "{dimension.space.200} {dimension.space.300}", + "color": "{text.default}", + "selectedColor": "{text.onBold}", + "gap": "{dimension.space.100}" + }, + "nodeIcon": { + "selectedColor": "{icon.onBold}" + }, + "nodeToggleButton": { + "borderRadius": "{dimension.radius.100}", + "size": "{dimension.size.450}", + "selectedHoverBackground": "{background.selected}" + }, + "loadingIcon": { + "size": "{dimension.size.300}" + }, + "filter": { + "margin": "0 0 {dimension.space.200} 0" + } + }, + "overlaybadge": { + "root": { + "outline": { + "width": "0rem", + "color": "{text.transparent}" + } + } + } + } +} \ No newline at end of file From 1e1ffd3d3d9f6873b8063f3f93245bb35726d2b2 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Thu, 18 Jun 2026 16:46:49 +0800 Subject: [PATCH 05/46] =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=B2=D0=B5?= =?UTF-8?q?=D1=81=D1=82=D0=B8=20=D0=B1=D0=BE=D0=B5=D0=B2=D1=8B=D0=B5=20?= =?UTF-8?q?=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B=20=D0=BD=D0=B0=20=D0=BD?= =?UTF-8?q?=D0=BE=D0=B2=D1=83=D1=8E=20=D0=BC=D0=BE=D0=B4=D0=B5=D0=BB=D1=8C?= =?UTF-8?q?=20(=D1=84=D0=B0=D0=B7=D0=B0=201,=20=D1=81=20backward-compat);?= =?UTF-8?q?=20=D1=83=D0=B1=D1=80=D0=B0=D1=82=D1=8C=20=D0=B2=D1=80=D0=B5?= =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D0=BD=D1=8B=D0=B9=20migrated?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../providers/prime-preset/tokens/tokens.json | 4659 +++++++------ .../prime-preset/tokens/tokens.migrated.json | 5869 ----------------- 2 files changed, 2728 insertions(+), 7800 deletions(-) delete mode 100644 src/lib/providers/prime-preset/tokens/tokens.migrated.json diff --git a/src/lib/providers/prime-preset/tokens/tokens.json b/src/lib/providers/prime-preset/tokens/tokens.json index 869e9334..6f3ad90b 100644 --- a/src/lib/providers/prime-preset/tokens/tokens.json +++ b/src/lib/providers/prime-preset/tokens/tokens.json @@ -477,6 +477,59 @@ "250": "0.25", "500": "0.5", "1000": "1" + }, + "size": { + "none": "0rem", + "min": "0.0714rem", + "2px": "0.1429rem", + "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", + "pill": "71.3571rem", + "max": "100%" } }, "semantic": { @@ -958,13 +1011,19 @@ "focusColor": "{colors.alpha.white.1000}" }, "focusRing": { - "shadow": "{shadows.200}", + "shadow": "{shadow.200}", "extend": { "invalid": "{colors.solid.red.200}", "success": "{colors.solid.green.200}", "warning": "{colors.solid.yellow.200}", "info": "{colors.solid.blue.200}" - } + }, + "default": "{colors.solid.green.500}", + "invalid": "{colors.solid.red.200}", + "success": "{colors.solid.green.200}", + "warning": "{colors.solid.yellow.200}", + "info": "{colors.solid.blue.200}", + "help": "{colors.solid.purple.200}" }, "mask": { "background": "{colors.alpha.black.400}", @@ -1014,7 +1073,48 @@ "successColor": "{colors.solid.green.700}", "dangerColor": "{colors.solid.red.600}", "warningColor": "{colors.solid.yellow.600}", - "helpColor": "{colors.solid.purple.600}" + "helpColor": "{colors.solid.purple.600}", + "default": "{colors.solid.zinc.900}", + "subtle": "{colors.solid.zinc.600}", + "muted": "{colors.solid.zinc.500}", + "placeholder": "{colors.solid.zinc.500}", + "disabled": "{colors.solid.zinc.300}", + "onBold": "{colors.alpha.white.1000}", + "staticDark": "{colors.solid.zinc.900}", + "staticLight": "{colors.alpha.white.1000}", + "brand": "{colors.solid.green.600}", + "link": "{colors.solid.green.600}", + "linkHover": "{colors.solid.green.700}", + "success": "{colors.solid.green.700}", + "info": "{colors.solid.blue.600}", + "warning": "{colors.solid.yellow.600}", + "danger": "{colors.solid.red.600}", + "neutral": "{colors.solid.zinc.600}", + "help": "{colors.solid.purple.600}", + "successStrong": "{colors.solid.green.900}", + "infoStrong": "{colors.solid.blue.900}", + "warningStrong": "{colors.solid.yellow.900}", + "dangerStrong": "{colors.solid.red.900}", + "helpStrong": "{colors.solid.purple.900}", + "hover": { + "default": "{colors.solid.zinc.700}", + "subtle": "{colors.solid.zinc.400}", + "muted": "{colors.solid.zinc.300}", + "brand": "{colors.solid.green.700}" + }, + "defaultHover": "{colors.solid.zinc.950}", + "neutralHover": "{colors.solid.zinc.950}", + "infoDeepest": "{colors.solid.blue.950}", + "successDeepest": "{colors.solid.green.950}", + "warningDeepest": "{colors.solid.yellow.950}", + "helpDeepest": "{colors.solid.purple.950}", + "dangerDeepest": "{colors.solid.red.950}", + "successBold": "{colors.solid.green.500}", + "infoBold": "{colors.solid.blue.500}", + "warningBold": "{colors.solid.yellow.500}", + "helpBold": "{colors.solid.purple.500}", + "dangerBold": "{colors.solid.red.500}", + "transparent": "rgba(255, 255, 255, 0.0001)" }, "content": { "background": "{colors.alpha.white.1000}", @@ -1089,7 +1189,225 @@ "activeColor": "{colors.alpha.white.1000}" }, "shadow": "{shadows.400}" - } + }, + "background": { + "surface": { + "ground": "{colors.alpha.white.1000}", + "section": "{colors.solid.zinc.50}", + "raised": "{colors.alpha.white.1000}", + "overlay": "{colors.alpha.white.1000}", + "sunken": "{colors.solid.zinc.100}", + "canvas": "{colors.alpha.white.1000}", + "inverse": "{colors.solid.zinc.800}", + "inverseStrong": "{colors.solid.zinc.950}", + "hover": { + "section": "{colors.solid.zinc.100}", + "raised": "{colors.solid.zinc.100}" + } + }, + "brand": { + "subtle": "{colors.solid.green.50}", + "subtleHover": "{colors.solid.green.100}", + "bold": "{colors.solid.green.500}", + "boldHover": "{colors.solid.green.600}", + "boldActive": "{colors.solid.green.700}" + }, + "success": { + "subtle": "{colors.solid.green.50}", + "subtleHover": "{colors.solid.green.100}", + "indicator": "{colors.solid.green.400}", + "bold": "{colors.solid.green.500}", + "boldHover": "{colors.solid.green.600}", + "deep": "{colors.solid.green.900}", + "mutedBorder": "{colors.solid.green.300}", + "border": "{colors.solid.green.400}", + "subtleActive": "{colors.solid.green.200}" + }, + "info": { + "subtle": "{colors.solid.blue.50}", + "subtleHover": "{colors.solid.blue.100}", + "bold": "{colors.solid.blue.500}", + "boldHover": "{colors.solid.blue.600}", + "deep": "{colors.solid.blue.900}", + "border": "{colors.solid.blue.400}", + "mutedBorder": "{colors.solid.blue.300}", + "subtleActive": "{colors.solid.blue.200}" + }, + "warning": { + "subtle": "{colors.solid.yellow.50}", + "subtleHover": "{colors.solid.yellow.100}", + "bold": "{colors.solid.yellow.500}", + "boldHover": "{colors.solid.yellow.600}", + "deep": "{colors.solid.yellow.900}", + "border": "{colors.solid.yellow.400}", + "mutedBorder": "{colors.solid.yellow.300}", + "subtleActive": "{colors.solid.yellow.200}" + }, + "danger": { + "subtle": "{colors.solid.red.50}", + "subtleHover": "{colors.solid.red.100}", + "bold": "{colors.solid.red.500}", + "boldHover": "{colors.solid.red.600}", + "deep": "{colors.solid.red.900}", + "border": "{colors.solid.red.400}", + "mutedBorder": "{colors.solid.red.300}", + "subtleActive": "{colors.solid.red.200}" + }, + "neutral": { + "subtle": "{colors.solid.zinc.50}", + "subtleHover": "{colors.solid.zinc.100}", + "bold": "{colors.solid.zinc.500}", + "boldHover": "{colors.solid.zinc.600}" + }, + "help": { + "subtle": "{colors.solid.purple.50}", + "subtleHover": "{colors.solid.purple.100}", + "bold": "{colors.solid.purple.500}", + "boldHover": "{colors.solid.purple.600}", + "deep": "{colors.solid.purple.900}", + "mutedBorder": "{colors.solid.purple.300}", + "border": "{colors.solid.purple.400}", + "subtleActive": "{colors.solid.purple.200}" + }, + "selected": "{colors.solid.zinc.900}", + "disabled": "{colors.solid.zinc.200}", + "scrim": { + "default": "{colors.alpha.black.400}", + "modal": "{colors.alpha.black.300}" + }, + "translucent": { + "light": { + "subtle": "{colors.alpha.white.100}", + "default": "{colors.alpha.white.200}", + "strong": "{colors.alpha.white.500}" + }, + "dark": { + "default": "{colors.alpha.black.500}" + } + }, + "transparent": "rgba(255, 255, 255, 0.0001)", + "selectedStrong": "{colors.solid.zinc.700}" + }, + "border": { + "subtle": "{colors.solid.zinc.200}", + "default": "{colors.solid.zinc.300}", + "strong": "{colors.solid.zinc.900}", + "disabled": "{colors.solid.zinc.200}", + "brand": "{colors.solid.green.600}", + "success": "{colors.solid.green.400}", + "info": "{colors.solid.blue.400}", + "warning": "{colors.solid.yellow.400}", + "danger": "{colors.solid.red.400}", + "neutral": "{colors.solid.zinc.400}", + "help": "{colors.solid.purple.400}", + "inverse": "{colors.solid.zinc.800}", + "successSubtle": "{colors.solid.green.300}", + "infoSubtle": "{colors.solid.blue.300}", + "warningSubtle": "{colors.solid.yellow.300}", + "dangerSubtle": "{colors.solid.red.300}", + "helpSubtle": "{colors.solid.purple.300}", + "transparent": "rgba(255, 255, 255, 0.0001)", + "checked": "{colors.solid.green.500}", + "successSubtleActive": "{colors.solid.green.200}", + "infoBoldHover": "{colors.solid.blue.600}", + "warningBoldHover": "{colors.solid.yellow.600}", + "helpBoldHover": "{colors.solid.purple.600}", + "dangerBoldHover": "{colors.solid.red.600}", + "infoBold": "{colors.solid.blue.500}", + "warningBold": "{colors.solid.yellow.500}", + "helpBold": "{colors.solid.purple.500}", + "dangerBold": "{colors.solid.red.500}" + }, + "icon": { + "default": "{colors.solid.zinc.950}", + "subtle": "{colors.solid.zinc.500}", + "disabled": "{colors.solid.zinc.300}", + "onBold": "{colors.alpha.white.1000}", + "brand": "{colors.solid.green.600}", + "success": "{colors.solid.green.600}", + "info": "{colors.solid.blue.600}", + "warning": "{colors.solid.yellow.600}", + "danger": "{colors.solid.red.600}", + "neutral": "{colors.solid.zinc.600}", + "help": "{colors.solid.purple.600}", + "strong": "{colors.solid.zinc.900}", + "strongMuted": "{colors.solid.zinc.900}", + "strongHover": "{colors.solid.zinc.700}" + }, + "ound": { + "info": { + "border": "{colors.solid.blue.400}", + "mutedBorder": "{colors.solid.blue.300}", + "subtleActive": "{colors.solid.blue.200}", + "deep": "{colors.solid.blue.900}" + }, + "warning": { + "border": "{colors.solid.yellow.400}", + "mutedBorder": "{colors.solid.yellow.300}", + "subtleActive": "{colors.solid.yellow.200}", + "deep": "{colors.solid.yellow.900}" + }, + "danger": { + "border": "{colors.solid.red.400}", + "mutedBorder": "{colors.solid.red.300}", + "subtleActive": "{colors.solid.red.200}", + "deep": "{colors.solid.red.900}" + }, + "success": { + "mutedBorder": "{colors.solid.green.300}", + "border": "{colors.solid.green.400}", + "subtleActive": "{colors.solid.green.200}", + "deep": "{colors.solid.green.900}" + }, + "help": { + "mutedBorder": "{colors.solid.purple.300}", + "border": "{colors.solid.purple.400}", + "subtleActive": "{colors.solid.purple.200}", + "deep": "{colors.solid.purple.900}" + } + }, + "nfo": { + "deepest": "{colors.solid.blue.950}", + "bold": "{colors.solid.blue.500}" + }, + "uccess": { + "deepest": "{colors.solid.green.950}", + "bold": "{colors.solid.green.500}" + }, + "arning": { + "deepest": "{colors.solid.yellow.950}", + "bold": "{colors.solid.yellow.500}" + }, + "elp": { + "deepest": "{colors.solid.purple.950}", + "bold": "{colors.solid.purple.500}" + }, + "anger": { + "deepest": "{colors.solid.red.950}", + "bold": "{colors.solid.red.500}" + }, + "": { + "success": { + "subtleActive": "{colors.solid.green.200}" + }, + "info": { + "boldHover": "{colors.solid.blue.600}", + "bold": "{colors.solid.blue.500}" + }, + "warning": { + "boldHover": "{colors.solid.yellow.600}", + "bold": "{colors.solid.yellow.500}" + }, + "help": { + "boldHover": "{colors.solid.purple.600}", + "bold": "{colors.solid.purple.500}" + }, + "danger": { + "boldHover": "{colors.solid.red.600}", + "bold": "{colors.solid.red.500}" + } + }, + "ransparent": "rgba(255, 255, 255, 0.0001)" }, "dark": { "success": { @@ -1190,13 +1508,19 @@ "focusColor": "{colors.solid.zinc.900}" }, "focusRing": { - "shadow": "{shadows.200}", + "shadow": "{shadow.200}", "extend": { "invalid": "{colors.solid.red.800}", "success": "{colors.solid.green.800}", "warning": "{colors.solid.yellow.800}", "info": "{colors.solid.blue.800}" - } + }, + "default": "{colors.solid.green.500}", + "invalid": "{colors.solid.red.800}", + "success": "{colors.solid.green.800}", + "warning": "{colors.solid.yellow.800}", + "info": "{colors.solid.blue.800}", + "help": "{colors.solid.purple.800}" }, "mask": { "background": "{colors.alpha.black.600}", @@ -1246,7 +1570,48 @@ "successColor": "{colors.solid.green.400}", "dangerColor": "{colors.solid.red.400}", "warningColor": "{colors.solid.yellow.400}", - "helpColor": "{colors.solid.purple.400}" + "helpColor": "{colors.solid.purple.400}", + "default": "{colors.alpha.white.1000}", + "subtle": "{colors.solid.zinc.400}", + "muted": "{colors.solid.zinc.500}", + "placeholder": "{colors.solid.zinc.500}", + "disabled": "{colors.solid.zinc.700}", + "onBold": "{colors.solid.zinc.900}", + "staticDark": "{colors.solid.zinc.900}", + "staticLight": "{colors.alpha.white.1000}", + "brand": "{colors.solid.green.400}", + "link": "{colors.solid.green.400}", + "linkHover": "{colors.solid.green.300}", + "success": "{colors.solid.green.400}", + "info": "{colors.solid.blue.400}", + "warning": "{colors.solid.yellow.400}", + "danger": "{colors.solid.red.400}", + "neutral": "{colors.solid.zinc.400}", + "help": "{colors.solid.purple.400}", + "successStrong": "{colors.solid.green.100}", + "infoStrong": "{colors.solid.blue.100}", + "warningStrong": "{colors.solid.yellow.100}", + "dangerStrong": "{colors.solid.red.100}", + "helpStrong": "{colors.solid.purple.100}", + "hover": { + "default": "{colors.solid.zinc.300}", + "subtle": "{colors.solid.zinc.600}", + "muted": "{colors.solid.zinc.700}", + "brand": "{colors.solid.green.300}" + }, + "defaultHover": "{colors.alpha.white.1000}", + "neutralHover": "{colors.solid.zinc.50}", + "infoDeepest": "{colors.solid.blue.50}", + "successDeepest": "{colors.solid.green.50}", + "warningDeepest": "{colors.solid.yellow.50}", + "helpDeepest": "{colors.solid.purple.50}", + "dangerDeepest": "{colors.solid.red.50}", + "successBold": "{colors.solid.green.500}", + "infoBold": "{colors.solid.blue.500}", + "warningBold": "{colors.solid.yellow.500}", + "helpBold": "{colors.solid.purple.500}", + "dangerBold": "{colors.solid.red.500}", + "transparent": "rgba(0, 0, 0, 0.0001)" }, "content": { "background": "{colors.solid.zinc.900}", @@ -1321,82 +1686,511 @@ "activeColor": "{colors.solid.zinc.900}" }, "shadow": "{shadows.400}" + }, + "background": { + "surface": { + "ground": "{colors.solid.zinc.950}", + "section": "{colors.solid.zinc.900}", + "raised": "{colors.solid.zinc.900}", + "overlay": "{colors.solid.zinc.900}", + "sunken": "{colors.solid.zinc.950}", + "canvas": "{colors.alpha.black.1000}", + "inverse": "{colors.solid.zinc.200}", + "inverseStrong": "{colors.solid.zinc.50}", + "hover": { + "section": "{colors.solid.zinc.800}", + "raised": "{colors.solid.zinc.800}" + } + }, + "brand": { + "subtle": "{colors.solid.green.950}", + "subtleHover": "{colors.solid.green.900}", + "bold": "{colors.solid.green.500}", + "boldHover": "{colors.solid.green.400}", + "boldActive": "{colors.solid.green.300}" + }, + "success": { + "subtle": "{colors.solid.green.950}", + "subtleHover": "{colors.solid.green.900}", + "indicator": "{colors.solid.green.400}", + "bold": "{colors.solid.green.500}", + "boldHover": "{colors.solid.green.400}", + "deep": "{colors.solid.green.100}", + "mutedBorder": "{colors.solid.green.700}", + "border": "{colors.solid.green.600}", + "subtleActive": "{colors.solid.green.800}" + }, + "info": { + "subtle": "{colors.solid.blue.950}", + "subtleHover": "{colors.solid.blue.900}", + "bold": "{colors.solid.blue.500}", + "boldHover": "{colors.solid.blue.400}", + "deep": "{colors.solid.blue.100}", + "border": "{colors.solid.blue.600}", + "mutedBorder": "{colors.solid.blue.700}", + "subtleActive": "{colors.solid.blue.800}" + }, + "warning": { + "subtle": "{colors.solid.yellow.950}", + "subtleHover": "{colors.solid.yellow.900}", + "bold": "{colors.solid.yellow.500}", + "boldHover": "{colors.solid.yellow.400}", + "deep": "{colors.solid.yellow.100}", + "border": "{colors.solid.yellow.600}", + "mutedBorder": "{colors.solid.yellow.700}", + "subtleActive": "{colors.solid.yellow.800}" + }, + "danger": { + "subtle": "{colors.solid.red.950}", + "subtleHover": "{colors.solid.red.900}", + "bold": "{colors.solid.red.500}", + "boldHover": "{colors.solid.red.400}", + "deep": "{colors.solid.red.100}", + "border": "{colors.solid.red.600}", + "mutedBorder": "{colors.solid.red.700}", + "subtleActive": "{colors.solid.red.800}" + }, + "neutral": { + "subtle": "{colors.solid.zinc.950}", + "subtleHover": "{colors.solid.zinc.900}", + "bold": "{colors.solid.zinc.500}", + "boldHover": "{colors.solid.zinc.400}" + }, + "help": { + "subtle": "{colors.solid.purple.950}", + "subtleHover": "{colors.solid.purple.900}", + "bold": "{colors.solid.purple.500}", + "boldHover": "{colors.solid.purple.400}", + "deep": "{colors.solid.purple.100}", + "mutedBorder": "{colors.solid.purple.700}", + "border": "{colors.solid.purple.600}", + "subtleActive": "{colors.solid.purple.800}" + }, + "selected": "{colors.solid.zinc.100}", + "disabled": "{colors.solid.zinc.800}", + "scrim": { + "default": "{colors.alpha.black.600}", + "modal": "{colors.alpha.black.300}" + }, + "translucent": { + "light": { + "subtle": "{colors.alpha.white.100}", + "default": "{colors.alpha.white.200}", + "strong": "{colors.alpha.white.500}" + }, + "dark": { + "default": "{colors.alpha.black.500}" + } + }, + "transparent": "rgba(0, 0, 0, 0.0001)", + "selectedStrong": "{colors.solid.zinc.300}" + }, + "border": { + "subtle": "{colors.solid.zinc.800}", + "default": "{colors.solid.zinc.700}", + "strong": "{colors.solid.zinc.100}", + "disabled": "{colors.solid.zinc.800}", + "brand": "{colors.solid.green.400}", + "success": "{colors.solid.green.600}", + "info": "{colors.solid.blue.600}", + "warning": "{colors.solid.yellow.600}", + "danger": "{colors.solid.red.600}", + "neutral": "{colors.solid.zinc.600}", + "help": "{colors.solid.purple.600}", + "inverse": "{colors.solid.zinc.200}", + "successSubtle": "{colors.solid.green.700}", + "infoSubtle": "{colors.solid.blue.700}", + "warningSubtle": "{colors.solid.yellow.700}", + "dangerSubtle": "{colors.solid.red.700}", + "helpSubtle": "{colors.solid.purple.700}", + "transparent": "rgba(0, 0, 0, 0.0001)", + "checked": "{colors.solid.green.500}", + "successSubtleActive": "{colors.solid.green.800}", + "infoBoldHover": "{colors.solid.blue.400}", + "warningBoldHover": "{colors.solid.yellow.400}", + "helpBoldHover": "{colors.solid.purple.400}", + "dangerBoldHover": "{colors.solid.red.400}", + "infoBold": "{colors.solid.blue.500}", + "warningBold": "{colors.solid.yellow.500}", + "helpBold": "{colors.solid.purple.500}", + "dangerBold": "{colors.solid.red.500}" + }, + "icon": { + "default": "{colors.alpha.white.1000}", + "subtle": "{colors.solid.zinc.500}", + "disabled": "{colors.solid.zinc.700}", + "onBold": "{colors.solid.zinc.900}", + "brand": "{colors.solid.green.400}", + "success": "{colors.solid.green.400}", + "info": "{colors.solid.blue.400}", + "warning": "{colors.solid.yellow.400}", + "danger": "{colors.solid.red.400}", + "neutral": "{colors.solid.zinc.400}", + "help": "{colors.solid.purple.400}", + "strong": "{colors.alpha.white.1000}", + "strongMuted": "{colors.solid.zinc.100}", + "strongHover": "{colors.solid.zinc.300}" + }, + "ound": { + "info": { + "border": "{colors.solid.blue.600}", + "mutedBorder": "{colors.solid.blue.700}", + "subtleActive": "{colors.solid.blue.800}", + "deep": "{colors.solid.blue.100}" + }, + "warning": { + "border": "{colors.solid.yellow.600}", + "mutedBorder": "{colors.solid.yellow.700}", + "subtleActive": "{colors.solid.yellow.800}", + "deep": "{colors.solid.yellow.100}" + }, + "danger": { + "border": "{colors.solid.red.600}", + "mutedBorder": "{colors.solid.red.700}", + "subtleActive": "{colors.solid.red.800}", + "deep": "{colors.solid.red.100}" + }, + "success": { + "mutedBorder": "{colors.solid.green.700}", + "border": "{colors.solid.green.600}", + "subtleActive": "{colors.solid.green.800}", + "deep": "{colors.solid.green.100}" + }, + "help": { + "mutedBorder": "{colors.solid.purple.700}", + "border": "{colors.solid.purple.600}", + "subtleActive": "{colors.solid.purple.800}", + "deep": "{colors.solid.purple.100}" + } + }, + "nfo": { + "deepest": "{colors.solid.blue.50}", + "bold": "{colors.solid.blue.500}" + }, + "uccess": { + "deepest": "{colors.solid.green.50}", + "bold": "{colors.solid.green.500}" + }, + "arning": { + "deepest": "{colors.solid.yellow.50}", + "bold": "{colors.solid.yellow.500}" + }, + "elp": { + "deepest": "{colors.solid.purple.50}", + "bold": "{colors.solid.purple.500}" + }, + "anger": { + "deepest": "{colors.solid.red.50}", + "bold": "{colors.solid.red.500}" + }, + "": { + "success": { + "subtleActive": "{colors.solid.green.800}" + }, + "info": { + "boldHover": "{colors.solid.blue.400}", + "bold": "{colors.solid.blue.500}" + }, + "warning": { + "boldHover": "{colors.solid.yellow.400}", + "bold": "{colors.solid.yellow.500}" + }, + "help": { + "boldHover": "{colors.solid.purple.400}", + "bold": "{colors.solid.purple.500}" + }, + "danger": { + "boldHover": "{colors.solid.red.400}", + "bold": "{colors.solid.red.500}" + } + }, + "ransparent": "rgba(0, 0, 0, 0.0001)" + } + }, + "dimension": { + "space": { + "none": "{size.none}", + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.3x}", + "400": "{size.4x}", + "500": "{size.5x}", + "600": "{size.6x}", + "700": "{size.7x}", + "800": "{size.8x}", + "900": "{size.10x}" + }, + "size": { + "100": "{size.min}", + "150": "{size.1x}", + "200": "{size.2x}", + "250": "{size.3x}", + "300": "{size.4x}", + "350": "{size.5x}", + "400": "{size.6x}", + "450": "{size.7x}", + "500": "{size.8x}", + "550": "{size.9x}", + "600": "{size.10x}", + "700": "{size.12x}", + "750": "{size.14x}", + "800": "{size.16x}", + "900": "{size.20x}", + "1000": "{size.24x}" + }, + "radius": { + "none": "{size.none}", + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.3x}", + "400": "{size.4x}", + "500": "{size.6x}", + "max": "{size.pill}" + }, + "borderWidth": { + "none": "{size.none}", + "100": "{size.min}", + "200": "{size.2px}", + "300": "{size.1x}" + }, + "focusRing": { + "width": "{size.1x}", + "offset": "{size.none}", + "style": "none" + }, + "duration": { + "100": "{transition.duration.100}", + "200": "{transition.duration.200}", + "300": "{transition.duration.300}", + "400": "{transition.duration.400}", + "500": "{transition.duration.500}" + }, + "overlayWidth": { + "narrow": "{size.60x}", + "sm": "{size.80x}", + "base": "{size.100x}", + "lg": "{size.120x}", + "xlg": "{size.128x}" + } + }, + "typography": { + "fontFamily": { + "heading": "{fonts.fontFamily.heading}", + "base": "{fonts.fontFamily.base}" + }, + "fontWeight": { + "regular": "{fonts.fontWeight.regular}", + "medium": "{fonts.fontWeight.medium}", + "demibold": "{fonts.fontWeight.demibold}", + "bold": "{fonts.fontWeight.bold}" + }, + "fontSize": { + "100": "{fonts.fontSize.100}", + "200": "{fonts.fontSize.200}", + "300": "{fonts.fontSize.300}", + "400": "{fonts.fontSize.400}", + "500": "{fonts.fontSize.500}", + "600": "{fonts.fontSize.600}", + "650": "{fonts.fontSize.650}", + "700": "{fonts.fontSize.700}", + "750": "{fonts.fontSize.750}", + "800": "{fonts.fontSize.800}", + "900": "{fonts.fontSize.900}", + "1000": "{fonts.fontSize.1000}" + }, + "lineHeight": { + "100": "{fonts.lineHeight.100}", + "150": "{fonts.lineHeight.150}", + "200": "{fonts.lineHeight.200}", + "250": "{fonts.lineHeight.250}", + "300": "{fonts.lineHeight.300}", + "350": "{fonts.lineHeight.350}", + "400": "{fonts.lineHeight.400}", + "450": "{fonts.lineHeight.450}", + "500": "{fonts.lineHeight.500}", + "550": "{fonts.lineHeight.550}", + "600": "{fonts.lineHeight.600}", + "700": "{fonts.lineHeight.700}", + "800": "{fonts.lineHeight.800}", + "850": "{fonts.lineHeight.850}", + "900": "{fonts.lineHeight.900}", + "1000": "{fonts.lineHeight.1000}", + "auto": "{fonts.lineHeight.auto}" + }, + "display": { + "lg": { + "fontFamily": "{fonts.fontFamily.heading}", + "fontSize": "{fonts.fontSize.1000}", + "fontWeight": "{fonts.fontWeight.bold}", + "lineHeight": "{fonts.lineHeight.auto}" + }, + "md": { + "fontFamily": "{fonts.fontFamily.heading}", + "fontSize": "{fonts.fontSize.900}", + "fontWeight": "{fonts.fontWeight.bold}", + "lineHeight": "{fonts.lineHeight.auto}" + }, + "sm": { + "fontFamily": "{fonts.fontFamily.heading}", + "fontSize": "{fonts.fontSize.800}", + "fontWeight": "{fonts.fontWeight.bold}", + "lineHeight": "{fonts.lineHeight.auto}" } + }, + "heading": { + "xl": { + "fontFamily": "{fonts.fontFamily.heading}", + "fontSize": "{fonts.fontSize.750}", + "fontWeight": "{fonts.fontWeight.bold}", + "lineHeight": "{fonts.lineHeight.auto}" + }, + "lg": { + "fontFamily": "{fonts.fontFamily.heading}", + "fontSize": "{fonts.fontSize.700}", + "fontWeight": "{fonts.fontWeight.demibold}", + "lineHeight": "{fonts.lineHeight.900}" + }, + "md": { + "fontFamily": "{fonts.fontFamily.heading}", + "fontSize": "{fonts.fontSize.600}", + "fontWeight": "{fonts.fontWeight.demibold}", + "lineHeight": "{fonts.lineHeight.700}" + }, + "sm": { + "fontFamily": "{fonts.fontFamily.heading}", + "fontSize": "{fonts.fontSize.500}", + "fontWeight": "{fonts.fontWeight.demibold}", + "lineHeight": "{fonts.lineHeight.600}" + } + }, + "body": { + "lg": { + "fontFamily": "{fonts.fontFamily.base}", + "fontSize": "{fonts.fontSize.400}", + "fontWeight": "{fonts.fontWeight.regular}", + "lineHeight": "{fonts.lineHeight.550}" + }, + "md": { + "fontFamily": "{fonts.fontFamily.base}", + "fontSize": "{fonts.fontSize.300}", + "fontWeight": "{fonts.fontWeight.regular}", + "lineHeight": "{fonts.lineHeight.500}" + }, + "sm": { + "fontFamily": "{fonts.fontFamily.base}", + "fontSize": "{fonts.fontSize.200}", + "fontWeight": "{fonts.fontWeight.regular}", + "lineHeight": "{fonts.lineHeight.400}" + } + }, + "label": { + "lg": { + "fontFamily": "{fonts.fontFamily.base}", + "fontSize": "{fonts.fontSize.300}", + "fontWeight": "{fonts.fontWeight.medium}", + "lineHeight": "{fonts.lineHeight.500}" + }, + "md": { + "fontFamily": "{fonts.fontFamily.base}", + "fontSize": "{fonts.fontSize.200}", + "fontWeight": "{fonts.fontWeight.medium}", + "lineHeight": "{fonts.lineHeight.400}" + }, + "sm": { + "fontFamily": "{fonts.fontFamily.base}", + "fontSize": "{fonts.fontSize.100}", + "fontWeight": "{fonts.fontWeight.medium}", + "lineHeight": "{fonts.lineHeight.300}" + } + }, + "caption": { + "fontFamily": "{fonts.fontFamily.base}", + "fontSize": "{fonts.fontSize.100}", + "fontWeight": "{fonts.fontWeight.regular}", + "lineHeight": "{fonts.lineHeight.250}" } + }, + "shadow": { + "none": "{shadows.none}", + "100": "{shadows.100}", + "200": "{shadows.200}", + "300": "{shadows.300}", + "400": "{shadows.400}", + "500": "{shadows.500}" } }, "components": { "accordion": { "extend": { "extHeader": { - "iconSize": "{controls.iconOnly.300}", - "gap": "{controls.gap.100}" + "iconSize": "{dimension.size.350}", + "gap": "{dimension.space.200}" } }, "colorScheme": { "light": { "header": { - "background": "{transparent}", - "hoverBackground": "{transparent}", - "activeBackground": "{transparent}", - "activeHoverBackground": "{transparent}" + "background": "{background.transparent}", + "hoverBackground": "{background.transparent}", + "activeBackground": "{background.transparent}", + "activeHoverBackground": "{background.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}", + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "activeColor": "{text.default}", + "activeHoverColor": "{text.hover.default}", + "borderColor": "{border.transparent}", + "padding": "{dimension.space.400} 0 {dimension.space.400} 0", + "fontWeight": "{typography.fontWeight.bold}", + "borderRadius": "{dimension.radius.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.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "inset {shadow.200}" }, "toggleIcon": { - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "activeColor": "{text.color}", - "activeHoverColor": "{text.hoverColor}" + "color": "{icon.strong}", + "hoverColor": "{icon.strongHover}", + "activeColor": "{icon.strong}", + "activeHoverColor": "{icon.strongHover}" }, "last": { - "bottomBorderRadius": "{borderRadius.none}", - "activeBottomBorderRadius": "{borderRadius.none}" + "bottomBorderRadius": "{dimension.radius.none}", + "activeBottomBorderRadius": "{dimension.radius.none}" }, "first": { - "borderWidth": "{borderWidth.none}", - "topBorderRadius": "{borderRadius.none}" + "borderWidth": "{dimension.borderWidth.none}", + "topBorderRadius": "{dimension.radius.none}" } }, "root": { - "transitionDuration": "{controls.transitionDuration}" + "transitionDuration": "{dimension.duration.200}" }, "panel": { - "borderWidth": "{borderWidth.none} {borderWidth.none} {navigation.width.100} {borderWidth.none}", - "borderColor": "{form.borderColor}" + "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.none}", + "borderColor": "{border.default}" }, "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.size.100} {dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.none}", + "borderColor": "{border.transparent}", + "background": "{background.transparent}", + "color": "{text.default}", + "padding": "0 {dimension.space.600} {dimension.space.400} {dimension.space.600}" } }, "autocomplete": { "extend": { "extOption": { - "gap": "{form.gap.200}" + "gap": "{dimension.space.200}" }, "extOptionGroup": { - "gap": "{form.gap.200}" + "gap": "{dimension.space.200}" } }, "colorScheme": { @@ -1406,162 +2200,162 @@ "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}" + "background": "{background.surface.ground}", + "hoverBackground": "{background.surface.ground}", + "activeBackground": "{background.surface.ground}", + "color": "{text.defaultHover}", + "hoverColor": "{text.defaultHover}", + "activeColor": "{text.defaultHover}" } } }, "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}", + "background": "{background.surface.ground}", + "disabledBackground": "{background.disabled}", + "filledBackground": "{background.surface.ground}", + "filledHoverBackground": "{background.surface.ground}", + "filledFocusBackground": "{background.surface.ground}", + "borderColor": "{border.default}", + "hoverBorderColor": "{border.brand}", + "focusBorderColor": "{border.brand}", + "invalidBorderColor": "{border.danger}", + "color": "{text.defaultHover}", + "disabledColor": "{text.muted}", + "placeholderColor": "{text.muted}", + "invalidPlaceholderColor": "{text.danger}", "shadow": "0", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.300}", - "borderRadius": "{form.borderRadius.200}", - "transitionDuration": "{form.transitionDuration}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.300}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}", "focusRing": { - "width": "{focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", "shadow": "0" } }, "overlay": { - "background": "{overlay.select.background}", - "borderColor": "{overlay.select.borderColor}", - "borderRadius": "{overlay.select.borderRadius}", - "color": "{overlay.select.color}", - "shadow": "{form.shadow}" + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "borderRadius": "{dimension.radius.300}", + "color": "{text.default}", + "shadow": "{shadow.200}" }, "list": { - "padding": "{list.padding}", - "gap": "{list.gap.100}" + "padding": "{dimension.space.100}", + "gap": "{dimension.space.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": "{background.surface.hover.section}", + "selectedBackground": "{background.selected}", + "selectedFocusBackground": "{background.selectedStrong}", + "color": "{text.default}", + "focusColor": "{text.default}", + "selectedColor": "{text.onBold}", + "selectedFocusColor": "{text.onBold}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}" }, "optionGroup": { - "background": "{list.optionGroup.background}", - "color": "{list.optionGroup.color}", - "fontWeight": "{fonts.fontWeight.demibold}", - "padding": "{list.optionGroup.padding}" + "background": "{background.surface.raised}", + "color": "{text.muted}", + "fontWeight": "{typography.fontWeight.demibold}", + "padding": "{dimension.space.200} {dimension.space.300}" }, "dropdown": { - "width": "{form.width.300}", - "borderColor": "{form.borderColor}", - "hoverBorderColor": "{form.hoverBorderSecondaryColor}", - "activeBorderColor": "{form.focusBorderSecondaryColor}", - "borderRadius": "{form.borderRadius.200}", + "width": "{dimension.size.600}", + "borderColor": "{border.default}", + "hoverBorderColor": "{border.brand}", + "activeBorderColor": "{border.brand}", + "borderRadius": "{dimension.radius.300}", "focusRing": { - "width": "{focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", "shadow": "0" }, "sm": { - "width": "{form.width.200}" + "width": "{dimension.size.500}" }, "lg": { - "width": "{form.width.400}" + "width": "{dimension.size.700}" } }, "chip": { "borderRadius": "{chip.root.borderRadius}" }, "emptyMessage": { - "padding": "{list.option.padding}" + "padding": "{dimension.space.200} {dimension.space.300}" } }, "avatar": { "extend": { - "borderColor": "{form.borderColor}", + "borderColor": "{border.default}", "circle": { - "borderRadius": "{media.borderRadius.max}" + "borderRadius": "{dimension.radius.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}" + "width": "{dimension.size.500}", + "height": "{dimension.size.500}", + "fontSize": "{typography.fontSize.200}", + "color": "{text.staticDark}", + "background": "{background.brand.bold}", + "borderRadius": "{dimension.radius.300}" }, "icon": { - "size": "{media.icon.size.100}" + "size": "{dimension.size.300}" }, "group": { - "borderColor": "{content.background}", - "offset": "-{media.padding.300}" + "borderColor": "{background.surface.raised}", + "offset": "-{dimension.space.300}" }, "lg": { - "width": "{media.size.400}", - "height": "{media.size.400}", - "fontSize": "{fonts.fontSize.300}", + "width": "{dimension.size.600}", + "height": "{dimension.size.600}", + "fontSize": "{typography.fontSize.300}", "icon": { - "size": "{media.icon.size.100}" + "size": "{dimension.size.300}" }, "group": { - "offset": "-{media.padding.300}" + "offset": "-{dimension.space.300}" } }, "xl": { - "width": "{media.size.500}", - "height": "{media.size.500}", + "width": "{dimension.size.750}", + "height": "{dimension.size.750}", "icon": { - "size": "{media.icon.size.200}" + "size": "{dimension.size.400}" }, "group": { - "offset": "-{media.padding.600}" + "offset": "-{dimension.space.600}" }, - "fontSize": "{fonts.fontSize.500}" + "fontSize": "{typography.fontSize.500}" } }, "badge": { "extend": { "extDot": { "success": { - "background": "{colors.solid.green.400}" + "background": "{background.success.indicator}" }, "info": { - "background": "{info.400}" + "background": "{background.info.border}" }, "warn": { - "background": "{warn.400}" + "background": "{background.warning.border}" }, "danger": { - "background": "{error.400}" + "background": "{background.danger.border}" }, "lg": { - "size": "{feedback.width.400}" + "size": "{dimension.size.250}" }, "xlg": { - "size": "{feedback.width.500}" + "size": "{dimension.size.300}" } }, "ext": { @@ -1571,700 +2365,700 @@ "colorScheme": { "light": { "primary": { - "color": "{text.extend.colorPrimaryStatic}", - "background": "{primary.color}" + "color": "{text.staticDark}", + "background": "{background.brand.bold}" }, "secondary": { - "color": "{text.extend.colorInverted}", - "background": "{surface.900}" + "color": "{text.onBold}", + "background": "{background.selected}" }, "success": { - "color": "{success.900}", - "background": "{success.300}" + "color": "{text.successStrong}", + "background": "{background.success.mutedBorder}" }, "info": { - "color": "{info.900}", - "background": "{info.300}" + "color": "{text.infoStrong}", + "background": "{background.info.mutedBorder}" }, "warn": { - "color": "{warn.900}", - "background": "{warn.300}" + "color": "{text.warningStrong}", + "background": "{background.warning.mutedBorder}" }, "danger": { - "color": "{error.900}", - "background": "{error.300}" + "color": "{text.dangerStrong}", + "background": "{background.danger.mutedBorder}" } } }, "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}" + "borderRadius": "{dimension.size.200}", + "padding": "{dimension.space.200}", + "fontSize": "{typography.fontSize.100}", + "fontWeight": "{typography.fontWeight.regular}", + "minWidth": "{dimension.size.400}", + "height": "{dimension.size.400}" }, "dot": { - "size": "{feedback.width.300}" + "size": "{dimension.size.200}" }, "sm": { - "fontSize": "{fonts.fontSize.100}", + "fontSize": "{typography.fontSize.100}", "minWidth": "0rem", "height": "0rem" }, "lg": { - "fontSize": "{fonts.fontSize.100}", - "minWidth": "{feedback.width.650}", - "height": "{feedback.height.600}" + "fontSize": "{typography.fontSize.100}", + "minWidth": "{dimension.size.450}", + "height": "{dimension.size.450}" }, "xl": { - "fontSize": "{fonts.fontSize.100}", - "minWidth": "{feedback.width.700}", - "height": "{feedback.height.650}" + "fontSize": "{typography.fontSize.100}", + "minWidth": "{dimension.size.500}", + "height": "{dimension.size.500}" } }, "breadcrumb": { "extend": { - "hoverBackground": "{surface.100}", - "iconSize": "{navigation.size.300}", + "hoverBackground": "{background.neutral.subtleHover}", + "iconSize": "{dimension.size.350}", "extItem": { - "padding": "{navigation.padding.100}" + "padding": "{dimension.space.100}" } }, "root": { "padding": "0rem", - "background": "{transparent}", + "background": "{background.transparent}", "gap": "0rem", - "transitionDuration": "{form.transitionDuration}" + "transitionDuration": "{dimension.duration.200}" }, "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" }, "item": { - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "borderRadius": "{navigation.borderRadius}", - "gap": "{navigation.item.gap}", + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "borderRadius": "{dimension.radius.100}", + "gap": "{dimension.space.200}", "icon": { - "color": "{text.color}", - "hoverColor": "{text.hoverColor}" + "color": "{icon.strong}", + "hoverColor": "{icon.strongHover}" } }, "separator": { - "color": "{text.color}" + "color": "{text.default}" } }, "button": { "extend": { - "disabledBackground": "{form.disabledBackground}", + "disabledBackground": "{background.disabled}", "extOutlined": { "danger": { - "focusBackground": "{transparent}" + "focusBackground": "{background.transparent}" }, "warn": { - "focusBackground": "{transparent}" + "focusBackground": "{background.transparent}" }, "info": { - "focusBackground": "{transparent}" + "focusBackground": "{background.transparent}" }, "help": { - "focusBackground": "{transparent}" + "focusBackground": "{background.transparent}" }, "success": { - "focusBackground": "{transparent}" + "focusBackground": "{background.transparent}" } }, - "disabledColor": "{form.disabledColor}", + "disabledColor": "{text.muted}", "extText": { "danger": { - "focusBackground": "{transparent}" + "focusBackground": "{background.transparent}" }, "warn": { - "focusBackground": "{transparent}" + "focusBackground": "{background.transparent}" }, "info": { - "focusBackground": "{transparent}" + "focusBackground": "{background.transparent}" }, "help": { - "focusBackground": "{transparent}" + "focusBackground": "{background.transparent}" }, "success": { - "focusBackground": "{transparent}" + "focusBackground": "{background.transparent}" } }, "extLink": { - "background": "{transparent}", - "colorHover": "{text.hoverColor}", + "background": "{background.transparent}", + "colorHover": "{background.selectedStrong}", "paddingX": "0rem", - "paddingY": "{controls.padding.100}", + "paddingY": "{dimension.space.100}", "sm": { - "iconOnlyWidth": "{controls.iconOnly.200}" + "iconOnlyWidth": "{dimension.size.300}" }, "base": { - "iconOnlyWidth": "{controls.iconOnly.400}" + "iconOnlyWidth": "{dimension.size.400}" }, "lg": { - "iconOnlyWidth": "{controls.iconOnly.500}" + "iconOnlyWidth": "{dimension.size.450}" }, "xlg": { - "iconOnlyWidth": "{controls.iconOnly.600}" + "iconOnlyWidth": "{dimension.size.500}" } }, "extSm": { - "borderRadius": "{controls.borderRadius.100}", - "gap": "{controls.gap.100}" + "borderRadius": "{dimension.radius.300}", + "gap": "{dimension.space.200}" }, "extLg": { - "borderRadius": "{controls.borderRadius.200}", - "gap": "{controls.gap.200}", - "height": "{controls.iconOnly.850}" + "borderRadius": "{dimension.radius.400}", + "gap": "{dimension.space.300}", + "height": "{dimension.size.750}" }, "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.radius.400}", + "gap": "{dimension.space.300}", + "iconOnlyWidth": "{dimension.size.800}", + "paddingX": "{dimension.space.600}", + "paddingY": "{dimension.space.500}", + "height": "{dimension.size.800}" + }, + "borderWidth": "{dimension.size.100}", "iconSize": { - "sm": "{controls.iconOnly.200}", - "md": "{controls.iconOnly.300}", - "lg": "{controls.iconOnly.400}" + "sm": "{dimension.size.300}", + "md": "{dimension.size.350}", + "lg": "{dimension.size.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}", + "background": "{background.brand.bold}", + "hoverBackground": "{background.brand.boldHover}", + "activeBackground": "{background.brand.boldActive}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.staticDark}", + "hoverColor": "{text.staticDark}", + "activeColor": "{text.staticDark}", "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" + "color": "{background.success.subtleActive}", + "shadow": "{shadow.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}", + "background": "{background.selected}", + "hoverBackground": "{background.surface.inverse}", + "activeBackground": "{background.selectedStrong}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.onBold}", + "hoverColor": "{text.onBold}", + "activeColor": "{text.onBold}", "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" + "color": "{background.success.subtleActive}", + "shadow": "{shadow.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}", + "background": "{background.disabled}", + "hoverBackground": "{text.disabled}", + "activeBackground": "{text.hover.subtle}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.default}", + "hoverColor": "{text.default}", + "activeColor": "{text.default}", "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" + "color": "{background.success.subtleActive}", + "shadow": "{shadow.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": "{background.info.mutedBorder}", + "hoverBackground": "{background.info.border}", + "activeBackground": "{background.info.bold}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.infoStrong}", + "hoverColor": "{text.infoDeepest}", + "activeColor": "{text.infoStrong}" }, "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": "{background.success.mutedBorder}", + "hoverBackground": "{background.success.border}", + "activeBackground": "{background.brand.bold}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.successStrong}", + "hoverColor": "{text.successDeepest}", + "activeColor": "{text.successStrong}" }, "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": "{background.warning.mutedBorder}", + "hoverBackground": "{background.warning.border}", + "activeBackground": "{background.warning.bold}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.warningStrong}", + "hoverColor": "{text.warningDeepest}", + "activeColor": "{text.warningStrong}" }, "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": "{background.help.mutedBorder}", + "hoverBackground": "{background.help.border}", + "activeBackground": "{background.help.bold}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.helpStrong}", + "hoverColor": "{text.helpDeepest}", + "activeColor": "{text.helpStrong}" }, "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": "{background.danger.mutedBorder}", + "hoverBackground": "{background.danger.border}", + "activeBackground": "{background.danger.bold}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.dangerStrong}", + "hoverColor": "{text.dangerDeepest}", + "activeColor": "{text.dangerStrong}" } }, "outlined": { "primary": { - "hoverBackground": "{primary.hoverBackground}", - "activeBackground": "{primary.activeBackground}", - "borderColor": "{primary.borderColor}", - "color": "{primary.color}" + "hoverBackground": "{background.brand.subtle}", + "activeBackground": "{background.brand.subtleHover}", + "borderColor": "{border.successSubtleActive}", + "color": "{text.successBold}" }, "success": { - "hoverBackground": "{success.100}", - "activeBackground": "{success.200}", - "borderColor": "{success.600}", - "color": "{success.600}" + "hoverBackground": "{background.brand.subtleHover}", + "activeBackground": "{background.success.subtleActive}", + "borderColor": "{border.brand}", + "color": "{text.brand}" }, "info": { - "hoverBackground": "{info.100}", - "activeBackground": "{info.200}", - "borderColor": "{info.600}", - "color": "{info.600}" + "hoverBackground": "{background.info.subtleHover}", + "activeBackground": "{background.info.subtleActive}", + "borderColor": "{border.infoBoldHover}", + "color": "{text.info}" }, "warn": { - "hoverBackground": "{warn.100}", - "activeBackground": "{warn.200}", - "borderColor": "{warn.600}", - "color": "{warn.600}" + "hoverBackground": "{background.warning.subtleHover}", + "activeBackground": "{background.warning.subtleActive}", + "borderColor": "{border.warningBoldHover}", + "color": "{text.warning}" }, "help": { - "hoverBackground": "{help.100}", - "activeBackground": "{help.200}", - "borderColor": "{help.600}", - "color": "{help.600}" + "hoverBackground": "{background.help.subtleHover}", + "activeBackground": "{background.help.subtleActive}", + "borderColor": "{border.helpBoldHover}", + "color": "{text.help}" }, "danger": { - "hoverBackground": "{error.100}", - "activeBackground": "{error.200}", - "borderColor": "{error.600}", - "color": "{error.600}" + "hoverBackground": "{background.danger.subtleHover}", + "activeBackground": "{background.danger.subtleActive}", + "borderColor": "{border.dangerBoldHover}", + "color": "{text.danger}" } }, "text": { "primary": { - "hoverBackground": "{surface.100}", - "activeBackground": "{surface.200}", - "color": "{text.color}" + "hoverBackground": "{background.neutral.subtleHover}", + "activeBackground": "{background.disabled}", + "color": "{text.default}" }, "success": { - "hoverBackground": "{success.100}", - "activeBackground": "{success.200}", - "color": "{success.600}" + "hoverBackground": "{background.brand.subtleHover}", + "activeBackground": "{background.success.subtleActive}", + "color": "{text.brand}" }, "info": { - "hoverBackground": "{info.100}", - "activeBackground": "{info.200}", - "color": "{info.600}" + "hoverBackground": "{background.info.subtleHover}", + "activeBackground": "{background.info.subtleActive}", + "color": "{text.info}" }, "warn": { - "hoverBackground": "{warn.100}", - "activeBackground": "{warn.200}", - "color": "{warn.600}" + "hoverBackground": "{background.warning.subtleHover}", + "activeBackground": "{background.warning.subtleActive}", + "color": "{text.warning}" }, "help": { - "hoverBackground": "{help.100}", - "activeBackground": "{help.200}", - "color": "{help.600}" + "hoverBackground": "{background.help.subtleHover}", + "activeBackground": "{background.help.subtleActive}", + "color": "{text.help}" }, "danger": { - "hoverBackground": "{error.100}", - "activeBackground": "{error.200}", - "color": "{error.600}" + "hoverBackground": "{background.danger.subtleHover}", + "activeBackground": "{background.danger.subtleActive}", + "color": "{text.danger}" } }, "link": { - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "activeColor": "{text.mutedColor}" + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "activeColor": "{text.muted}" } }, "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}", + "background": "{background.brand.bold}", + "hoverBackground": "{background.brand.boldHover}", + "activeBackground": "{background.brand.boldActive}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.staticDark}", + "hoverColor": "{text.staticDark}", + "activeColor": "{text.staticDark}", "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" } }, "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}", + "background": "{background.disabled}", + "hoverBackground": "{text.disabled}", + "activeBackground": "{text.hover.subtle}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.neutralHover}", + "hoverColor": "{text.neutralHover}", + "activeColor": "{text.neutralHover}", "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" } }, "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}", + "background": "{background.surface.inverseStrong}", + "hoverBackground": "{background.selected}", + "activeBackground": "{background.surface.inverse}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{background.surface.canvas}", + "hoverColor": "{background.surface.canvas}", + "activeColor": "{background.surface.canvas}", "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" } }, "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}" + "background": "{background.info.bold}", + "hoverBackground": "{background.info.border}", + "activeBackground": "{background.info.mutedBorder}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.staticDark}", + "hoverColor": "{text.staticDark}", + "activeColor": "{text.staticDark}" }, "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}" + "background": "{background.brand.bold}", + "hoverBackground": "{background.success.border}", + "activeBackground": "{background.success.mutedBorder}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.staticDark}", + "hoverColor": "{text.staticDark}", + "activeColor": "{text.staticDark}" }, "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}" + "background": "{background.warning.bold}", + "hoverBackground": "{background.warning.border}", + "activeBackground": "{background.warning.mutedBorder}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.staticDark}", + "hoverColor": "{text.staticDark}", + "activeColor": "{text.staticDark}" }, "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}" + "background": "{background.help.bold}", + "hoverBackground": "{background.help.border}", + "activeBackground": "{background.help.mutedBorder}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.staticDark}", + "hoverColor": "{text.staticDark}", + "activeColor": "{text.staticDark}" }, "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}" + "background": "{background.danger.bold}", + "hoverBackground": "{background.danger.border}", + "activeBackground": "{background.danger.mutedBorder}", + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "activeBorderColor": "{border.transparent}", + "color": "{text.staticDark}", + "hoverColor": "{text.staticDark}", + "activeColor": "{text.staticDark}" } }, "outlined": { "primary": { - "hoverBackground": "{primary.hoverBackground}", - "activeBackground": "{primary.activeBackground}", - "borderColor": "{primary.borderColor}", - "color": "{primary.color}" + "hoverBackground": "{background.brand.subtle}", + "activeBackground": "{background.brand.subtleHover}", + "borderColor": "{border.successSubtleActive}", + "color": "{text.successBold}" }, "success": { - "hoverBackground": "{success.950}", - "activeBackground": "{success.900}", - "borderColor": "{success.500}", - "color": "{success.500}" + "hoverBackground": "{text.successDeepest}", + "activeBackground": "{background.success.deep}", + "borderColor": "{border.checked}", + "color": "{text.successBold}" }, "info": { - "hoverBackground": "{info.950}", - "activeBackground": "{info.900}", - "borderColor": "{info.500}", - "color": "{info.500}" + "hoverBackground": "{text.infoDeepest}", + "activeBackground": "{background.info.deep}", + "borderColor": "{border.infoBold}", + "color": "{text.infoBold}" }, "warn": { - "hoverBackground": "{warn.950}", - "activeBackground": "{warn.900}", - "borderColor": "{warn.500}", - "color": "{warn.500}" + "hoverBackground": "{text.warningDeepest}", + "activeBackground": "{background.warning.deep}", + "borderColor": "{border.warningBold}", + "color": "{text.warningBold}" }, "help": { - "hoverBackground": "{help.950}", - "activeBackground": "{help.900}", - "borderColor": "{help.500}", - "color": "{help.500}" + "hoverBackground": "{text.helpDeepest}", + "activeBackground": "{background.help.deep}", + "borderColor": "{border.helpBold}", + "color": "{text.helpBold}" }, "danger": { - "hoverBackground": "{error.950}", - "activeBackground": "{error.900}", - "borderColor": "{error.500}", - "color": "{error.500}" + "hoverBackground": "{text.dangerDeepest}", + "activeBackground": "{background.danger.deep}", + "borderColor": "{border.dangerBold}", + "color": "{text.dangerBold}" } }, "text": { "primary": { - "hoverBackground": "{surface.800}", - "activeBackground": "{surface.700}", - "color": "{text.color}" + "hoverBackground": "{background.surface.inverse}", + "activeBackground": "{background.selectedStrong}", + "color": "{text.default}" }, "success": { - "hoverBackground": "{success.950}", - "activeBackground": "{success.900}", - "color": "{success.500}" + "hoverBackground": "{text.successDeepest}", + "activeBackground": "{background.success.deep}", + "color": "{text.successBold}" }, "info": { - "hoverBackground": "{info.950}", - "activeBackground": "{info.900}", - "color": "{info.500}" + "hoverBackground": "{text.infoDeepest}", + "activeBackground": "{background.info.deep}", + "color": "{text.infoBold}" }, "warn": { - "hoverBackground": "{warn.950}", - "activeBackground": "{warn.900}", - "color": "{warn.500}" + "hoverBackground": "{text.warningDeepest}", + "activeBackground": "{background.warning.deep}", + "color": "{text.warningBold}" }, "help": { - "hoverBackground": "{help.950}", - "activeBackground": "{help.900}", - "color": "{help.500}" + "hoverBackground": "{text.helpDeepest}", + "activeBackground": "{background.help.deep}", + "color": "{text.helpBold}" }, "danger": { - "hoverBackground": "{error.950}", - "activeBackground": "{error.900}", - "color": "{error.500}" + "hoverBackground": "{text.dangerDeepest}", + "activeBackground": "{background.danger.deep}", + "color": "{text.dangerBold}" } }, "link": { - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "activeColor": "{text.mutedColor}" + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "activeColor": "{text.muted}" } } }, "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}", + "borderRadius": "{dimension.radius.300}", + "roundedBorderRadius": "{dimension.radius.max}", + "gap": "{dimension.space.200}", + "fontSize": "{typography.fontSize.200}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.200}", + "iconOnlyWidth": "{dimension.size.600}", "raisedShadow": "none", - "badgeSize": "{feedback.width.500}", - "transitionDuration": "{controls.transitionDuration}", + "badgeSize": "{dimension.size.300}", + "transitionDuration": "{dimension.duration.200}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "offset": "{focusRing.offset}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "offset": "{dimension.focusRing.offset}" }, "sm": { - "fontSize": "{fonts.fontSize.200}", - "iconOnlyWidth": "{controls.iconOnly.600}", - "paddingX": "{controls.padding.300}", - "paddingY": "{controls.padding.200}" + "fontSize": "{typography.fontSize.200}", + "iconOnlyWidth": "{dimension.size.500}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.200}" }, "lg": { - "fontSize": "{fonts.fontSize.500}", - "iconOnlyWidth": "{controls.iconOnly.850}", - "paddingX": "{controls.padding.600}", - "paddingY": "{controls.padding.400}" + "fontSize": "{typography.fontSize.500}", + "iconOnlyWidth": "{dimension.size.750}", + "paddingX": "{dimension.space.600}", + "paddingY": "{dimension.space.400}" }, "label": { - "fontWeight": "{fonts.fontWeight.demibold}" + "fontWeight": "{typography.fontWeight.demibold}" } } }, "card": { "extend": { - "borderColor": "{content.borderColor}", - "borderWidth": "{content.borderWidth}" + "borderColor": "{border.subtle}", + "borderWidth": "{dimension.size.100}" }, "root": { - "background": "{content.background}", - "borderRadius": "{content.gap.400}", - "color": "{content.color}" + "background": "{background.surface.raised}", + "borderRadius": "{dimension.space.400}", + "color": "{text.default}" }, "body": { - "padding": "{content.padding.300}", - "gap": "{content.gap.400}" + "padding": "{dimension.space.400}", + "gap": "{dimension.space.400}" }, "caption": { - "gap": "{content.gap.100}" + "gap": "{dimension.space.100}" }, "title": { - "fontSize": "{fonts.fontSize.400}", - "fontWeight": "{fonts.fontWeight.demibold}" + "fontSize": "{typography.fontSize.400}", + "fontWeight": "{typography.fontWeight.demibold}" }, "subtitle": { - "color": "{text.mutedColor}" + "color": "{text.muted}" } }, "carousel": { "colorScheme": { "light": { "indicator": { - "background": "{surface.300}", - "hoverBackground": "{surface.400}", - "activeBackground": "{surface.900}" + "background": "{text.disabled}", + "hoverBackground": "{text.hover.subtle}", + "activeBackground": "{background.selected}" } } }, "root": { - "transitionDuration": "{media.transitionDuration}" + "transitionDuration": "{dimension.duration.200}" }, "content": { - "gap": "{media.gap.200}" + "gap": "{dimension.space.200}" }, "indicatorList": { - "padding": "{media.padding.400}", - "gap": "{media.gap.200}" + "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.radius.500}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" } } }, "checkbox": { "root": { - "borderRadius": "{form.borderRadius.100}", + "borderRadius": "{dimension.radius.200}", "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}", + "borderWidth": "{dimension.borderWidth.100}" + }, + "width": "{dimension.size.400}", + "height": "{dimension.size.400}", + "background": "{background.surface.ground}", + "checkedBackground": "{background.selected}", + "checkedHoverBackground": "{background.surface.inverse}", + "disabledBackground": "{background.disabled}", + "filledBackground": "{background.surface.ground}", + "borderColor": "{border.default}", + "hoverBorderColor": "{border.strong}", + "focusBorderColor": "{border.strong}", + "checkedBorderColor": "{border.strong}", + "checkedHoverBorderColor": "{border.inverse}", + "checkedFocusBorderColor": "{border.checked}", + "checkedDisabledBorderColor": "{border.default}", + "invalidBorderColor": "{border.danger}", "shadow": "0", "focusRing": { - "focusRing": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "focusRing": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" }, "sm": { - "width": "{form.size.200}", - "height": "{form.size.200}" + "width": "{dimension.size.200}", + "height": "{dimension.size.200}" }, "lg": { - "width": "{form.size.350}", - "height": "{form.size.350}" + "width": "{dimension.size.350}", + "height": "{dimension.size.350}" }, - "transitionDuration": "{form.transitionDuration}" + "transitionDuration": "{dimension.duration.200}" }, "icon": { - "size": "{form.icon.300}", - "color": "{form.color}", - "checkedColor": "{primary.contrastColor}", - "checkedHoverColor": "{primary.contrastColor}", - "disabledColor": "{form.disabledColor}", + "size": "{dimension.size.300}", + "color": "{icon.default}", + "checkedColor": "{icon.onBold}", + "checkedHoverColor": "{icon.onBold}", + "disabledColor": "{icon.subtle}", "sm": { - "size": "{form.icon.200}" + "size": "{dimension.size.250}" }, "lg": { - "size": "{form.icon.400}" + "size": "{dimension.size.350}" } } }, "chip": { "extend": { - "borderColor": "{transparent}", - "borderWidth": "{controls.width.100}" + "borderColor": "{border.transparent}", + "borderWidth": "{dimension.size.100}" }, "root": { - "borderRadius": "{media.borderRadius.100}", - "paddingX": "{media.padding.200}", - "paddingY": "{media.padding.100}", - "gap": "{media.gap.200}", - "transitionDuration": "{media.transitionDuration}" + "borderRadius": "{dimension.radius.200}", + "paddingX": "{dimension.space.200}", + "paddingY": "{dimension.space.100}", + "gap": "{dimension.space.200}", + "transitionDuration": "{dimension.duration.200}" }, "colorScheme": { "light": { "root": { - "background": "{surface.200}", - "color": "{text.color}" + "background": "{background.disabled}", + "color": "{text.default}" }, "icon": { - "color": "{text.color}" + "color": "{icon.strong}" }, "removeIcon": { - "color": "{text.color}" + "color": "{icon.strong}" } } }, @@ -2273,32 +3067,32 @@ "height": "0rem" }, "icon": { - "size": "{media.icon.size.100}" + "size": "{dimension.size.300}" }, "removeIcon": { - "size": "{media.icon.size.100}", + "size": "{dimension.size.300}", "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" } } }, "confirmdialog": { "extend": { "extIcon": { - "success": "{success.500}", - "info": "{info.500}", - "help": "{help.500}", - "warn": "{warn.500}", - "danger": "{error.500}" + "success": "{background.brand.bold}", + "info": "{background.info.bold}", + "help": "{background.help.bold}", + "warn": "{background.warning.bold}", + "danger": "{background.danger.bold}" } }, "icon": { - "size": "{overlay.icon.size.200}", - "color": "{overlay.modal.color}" + "size": "{dimension.size.400}", + "color": "{icon.strong}" }, "content": { "gap": "0rem" @@ -2306,362 +3100,365 @@ }, "confirmpopup": { "root": { - "background": "{overlay.popover.background}", - "color": "{overlay.popover.color}", - "shadow": "{overlay.popover.shadow}", - "gutter": "{overlay.gap.300}", - "arrowOffset": "{overlay.modal.padding.200}" + "background": "{background.surface.raised}", + "color": "{text.default}", + "shadow": "{shadow.400}", + "gutter": "{dimension.space.300}", + "arrowOffset": "{dimension.space.500}" }, "content": { - "padding": "{overlay.popover.padding.100}", - "gap": "{overlay.gap.400}" + "padding": "{dimension.space.300}", + "gap": "{dimension.space.400}" }, "icon": { - "size": "{overlay.icon.size.200}", - "color": "{overlay.popover.color}" + "size": "{dimension.size.400}", + "color": "{icon.strong}" }, "footer": { - "gap": "{overlay.gap.200}", - "padding": "0 {overlay.popover.padding} {overlay.popover.padding} {overlay.popover.padding}" + "gap": "{dimension.space.200}", + "padding": "0 {dimension.space.300} {dimension.space.500} {dimension.space.300} {dimension.space.500} {dimension.space.300} {dimension.space.500}" } }, "contextmenu": { "root": { - "background": "{content.background}", - "color": "{content.color}", - "shadow": "{navigation.shadow}" + "background": "{background.surface.raised}", + "color": "{text.default}", + "shadow": "{shadow.400}" }, "list": { - "padding": "{navigation.list.padding.md} 0", - "gap": "{navigation.list.gap}" + "padding": "{dimension.space.100} 0", + "gap": "{dimension.space.100}" }, "item": { - "padding": "{navigation.item.padding}", - "gap": "{navigation.item.gap}" + "padding": "{dimension.space.200} {dimension.space.300}", + "gap": "{dimension.space.200}" }, "submenu": { - "mobileIndent": "{navigation.submenu.padding}" + "mobileIndent": "{dimension.space.500}" } }, "datatable": { "colorScheme": { "light": { "root": { - "color": "{text.color}", - "borderColor": "{content.borderColor}" + "color": "{text.default}", + "borderColor": "{border.subtle}" }, "header": { - "background": "{surface.50}", - "color": "{text.color}" + "background": "{background.neutral.subtle}", + "color": "{text.default}" }, "headerCell": { - "background": "{surface.50}", - "hoverBackground": "{surface.100}", - "color": "{text.color}" + "background": "{background.neutral.subtle}", + "hoverBackground": "{background.neutral.subtleHover}", + "color": "{text.default}" }, "footer": { - "background": "{surface.100}", - "color": "{text.color}" + "background": "{background.neutral.subtleHover}", + "color": "{text.default}" }, "footerCell": { - "background": "{content.hoverBackground}", - "color": "{text.color}" + "background": "{background.surface.hover.section}", + "color": "{text.default}" }, "row": { - "stripedBackground": "{content.hoverBackground}" + "stripedBackground": "{background.surface.hover.section}" }, "bodyCell": { - "selectedBorderColor": "{content.borderColor}" + "selectedBorderColor": "{border.subtle}" } } }, "extended": { "extHeaderCell": { - "selectedHoverBackground": "{surface.800}" + "selectedHoverBackground": "{background.surface.inverse}" }, "extRow": { - "selectedHoverBackground": "{surface.800}", - "stripedHoverBackground": "{surface.100}" + "selectedHoverBackground": "{background.surface.inverse}", + "stripedHoverBackground": "{background.neutral.subtleHover}" } }, "root": { - "transitionDuration": "{data.transitionDuration}" + "transitionDuration": "{dimension.duration.200}" }, "header": { - "borderColor": "{content.borderColor}", - "borderWidth": "{data.width.100} 0 {data.width.100} 0", - "padding": "{data.padding.400}", + "borderColor": "{border.subtle}", + "borderWidth": "{dimension.size.100} 0 {dimension.size.100} 0", + "padding": "{dimension.space.400}", "sm": { - "padding": "{data.padding.200}" + "padding": "{dimension.space.200}" }, "lg": { - "padding": "{data.padding.500}" + "padding": "{dimension.space.500}" } }, "headerCell": { - "selectedBackground": "{highlight.background}", - "borderColor": "{content.borderColor}", - "hoverColor": "{text.extend.colorInverted}", - "selectedColor": "{highlight.color}", - "gap": "{data.gap.200}", - "padding": "{data.padding.400}", + "selectedBackground": "{background.selected}", + "borderColor": "{border.subtle}", + "hoverColor": "{text.onBold}", + "selectedColor": "{text.onBold}", + "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.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "inset {shadow.200}" }, "sm": { - "padding": "{data.padding.200}" + "padding": "{dimension.space.200}" }, "lg": { - "padding": "{data.padding.500}" + "padding": "{dimension.space.500}" } }, "columnTitle": { - "fontWeight": "{fonts.fontWeight.bold}" + "fontWeight": "{typography.fontWeight.bold}" }, "row": { - "background": "{content.background}", - "hoverBackground": "{content.hoverBackground}", - "selectedBackground": "{highlight.background}", - "color": "{content.color}", - "hoverColor": "{content.hoverColor}", - "selectedColor": "{highlight.color}", + "background": "{background.surface.raised}", + "hoverBackground": "{background.surface.hover.section}", + "selectedBackground": "{background.selected}", + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "selectedColor": "{text.onBold}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "inset {focus.ring.shadow}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "inset {shadow.200}" } }, "bodyCell": { - "borderColor": "{content.borderColor}", - "padding": "{data.padding.400}", + "borderColor": "{border.subtle}", + "padding": "{dimension.space.400}", "sm": { - "padding": "{data.padding.200}" + "padding": "{dimension.space.200}" }, "lg": { - "padding": "{data.padding.500}" + "padding": "{dimension.space.500}" } }, "footerCell": { - "borderColor": "{content.borderColor}", - "padding": "{data.padding.400}", + "borderColor": "{border.subtle}", + "padding": "{dimension.space.400}", "sm": { - "padding": "{data.padding.200}" + "padding": "{dimension.space.200}" }, "lg": { - "padding": "{data.padding.500}" + "padding": "{dimension.space.500}" } }, "columnFooter": { - "fontWeight": "{fonts.fontWeight.bold}" + "fontWeight": "{typography.fontWeight.bold}" }, "dropPoint": { - "color": "{highlight.background}" + "color": "{background.selected}" }, "footer": { - "borderColor": "{content.borderColor}", - "borderWidth": "0 0 {data.width.100} 0", - "padding": "{data.padding.400}", + "borderColor": "{border.subtle}", + "borderWidth": "0 0 {dimension.size.100} 0", + "padding": "{dimension.space.400}", "sm": { - "padding": "{data.padding.200}" + "padding": "{dimension.space.200}" }, "lg": { - "padding": "{data.padding.500}" + "padding": "{dimension.space.500}" } }, "columnResizer": { - "width": "{data.width.300}" + "width": "{dimension.size.200}" }, "resizeIndicator": { - "width": "{data.width.100}", - "color": "{highlight.background}" + "width": "{dimension.size.100}", + "color": "{background.selected}" }, "sortIcon": { - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "size": "{data.icon.size.100}" + "color": "{icon.strong}", + "hoverColor": "{icon.strongHover}", + "size": "{dimension.size.300}" }, "loadingIcon": { - "size": "{data.icon.size.500}" + "size": "{dimension.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}", + "hoverBackground": "{background.surface.hover.section}", + "selectedHoverBackground": "{background.surface.hover.section}", + "color": "{text.default}", + "hoverColor": "{text.default}", + "selectedHoverColor": "{text.default}", + "size": "{dimension.size.500}", + "borderRadius": "{dimension.radius.300}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" } }, "filter": { - "inlineGap": "{data.gap.200}", + "inlineGap": "{dimension.space.200}", "rule": { - "borderColor": "{content.borderColor}" + "borderColor": "{border.subtle}" }, "constraintList": { - "padding": "{list.padding}", - "gap": "{list.gap.100}" + "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}", + "focusBackground": "{background.surface.hover.section}", + "selectedBackground": "{background.selected}", + "selectedFocusBackground": "{background.selectedStrong}", + "color": "{text.default}", + "focusColor": "{text.default}", + "selectedColor": "{text.onBold}", + "selectedFocusColor": "{text.onBold}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}", "separator": { - "borderColor": "{content.borderColor}" + "borderColor": "{border.subtle}" } }, "overlaySelect": { - "background": "{overlay.select.background}", - "color": "{overlay.select.color}", - "borderColor": "{overlay.select.borderColor}", - "borderRadius": "{overlay.select.borderRadius}", - "shadow": "{overlay.select.shadow}" + "background": "{background.surface.raised}", + "color": "{text.default}", + "borderColor": "{border.subtle}", + "borderRadius": "{dimension.radius.300}", + "shadow": "{shadow.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": "{background.surface.raised}", + "color": "{text.default}", + "borderColor": "{border.subtle}", + "borderRadius": "{dimension.radius.300}", + "shadow": "{shadow.400}", + "padding": "{dimension.space.300}", + "gap": "{dimension.space.100}" } }, "paginatorTop": { - "borderColor": "{form.borderColor}", - "borderWidth": "0 0 {data.width.100} 0" + "borderColor": "{border.default}", + "borderWidth": "0 0 {dimension.size.100} 0" }, "paginatorBottom": { - "borderWidth": "0 0 {data.width.100} 0", - "borderColor": "{content.borderColor}" + "borderWidth": "0 0 {dimension.size.100} 0", + "borderColor": "{border.subtle}" } }, "dataview": { "root": { - "borderWidth": "{data.width.100}", - "borderRadius": "{data.borderRadius}", + "borderWidth": "{dimension.size.100}", + "borderRadius": "{dimension.radius.100}", "padding": "0rem", - "borderColor": "{content.borderColor}" + "borderColor": "{border.subtle}" }, "header": { - "borderWidth": "0 0 {data.width.100} 0", - "padding": "{data.padding.200} {data.padding.300}", + "borderWidth": "0 0 {dimension.size.100} 0", + "padding": "{dimension.space.200} {dimension.space.300}", "borderRadius": "0 0 0 0", - "color": "{text.color}" + "color": "{text.default}" }, "content": { - "background": "{content.background}", - "color": "{content.color}", - "borderColor": "{content.borderColor}", + "background": "{background.surface.raised}", + "color": "{text.default}", + "borderColor": "{border.subtle}", "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}", + "background": "{background.neutral.subtleHover}", + "color": "{text.default}", + "borderWidth": "{dimension.size.100} 0 0 0", + "padding": "{dimension.space.200} {dimension.space.300}", "borderRadius": "0 0 0 0" }, "paginatorTop": { - "borderWidth": "0 0 {data.width.100} 0" + "borderWidth": "0 0 {dimension.size.100} 0" }, "paginatorBottom": { - "borderWidth": "{data.width.100} 0 0 0" + "borderWidth": "{dimension.size.100} 0 0 0" } }, "datepicker": { "extend": { "extDate": { - "selectedHoverBackground": "{surface.800}" + "selectedHoverBackground": "{background.surface.inverse}" }, "extToday": { - "hoverBackground": "{content.hoverBackground}", - "borderColor": "{content.activeBorderColor}" + "hoverBackground": "{background.surface.hover.section}", + "borderColor": "{border.inverse}" }, "extTitle": { - "width": "{form.width.500}" + "width": "{dimension.overlayWidth.narrow}" }, "extTimePicker": { - "minWidth": "{form.width.400}", - "color": "{content.color}" + "minWidth": "{dimension.size.700}", + "color": "{text.default}" + }, + "extSelectYear": { + "minWidth": "{dimension.size.1000}" } }, "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": "{background.surface.raised}", + "hoverBackground": "{background.neutral.subtleHover}", + "activeBackground": "{background.selected}", + "color": "{text.default}", + "hoverColor": "{text.default}", + "activeColor": "{text.onBold}" }, "today": { - "background": "{transparent}", - "color": "{text.extend.colorPrimaryStatic}" + "background": "{background.transparent}", + "color": "{text.staticDark}" } } }, "panel": { - "background": "{content.background}", - "borderColor": "{content.borderColor}", - "color": "{content.color}", - "borderRadius": "{content.borderRadius}", - "shadow": "{overlay.popover.shadow}", + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "color": "{text.default}", + "borderRadius": "{dimension.radius.300}", + "shadow": "{shadow.400}", "padding": "0rem" }, "header": { - "background": "{content.background}", - "borderColor": "{content.borderColor}", - "color": "{content.color}", - "padding": "{overlay.popover.padding.100}" + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "color": "{text.default}", + "padding": "{dimension.space.300}" }, "title": { - "gap": "{form.gap.200}", - "fontWeight": "{fonts.fontWeight.bold}" + "gap": "{dimension.space.200}", + "fontWeight": "{typography.fontWeight.bold}" }, "selectMonth": { - "hoverBackground": "{content.hoverBackground}", - "color": "{content.color}", - "hoverColor": "{content.hoverColor}", - "borderRadius": "{content.borderRadius}", - "padding": "{form.padding.200}" + "hoverBackground": "{background.surface.hover.section}", + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "borderRadius": "{dimension.radius.300}", + "padding": "{dimension.space.200}" }, "inputIcon": { - "color": "{form.floatLabelColor}" + "color": "{icon.subtle}" }, "dropdown": { - "width": "{form.width.300}", - "borderColor": "{form.borderColor}", - "hoverBorderColor": "{form.borderColor}", - "activeBorderColor": "{form.borderColor}", - "borderRadius": "{form.borderRadius.200}", + "width": "{dimension.size.600}", + "borderColor": "{border.default}", + "hoverBorderColor": "{border.default}", + "activeBorderColor": "{border.default}", + "borderRadius": "{dimension.radius.300}", "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" }, "sm": { "width": "0rem" @@ -2671,42 +3468,42 @@ } }, "group": { - "borderColor": "{content.borderColor}", - "gap": "{overlay.popover.padding.100}" + "borderColor": "{border.subtle}", + "gap": "{dimension.space.300}" }, "selectYear": { - "hoverBackground": "{content.hoverBackground}", - "color": "{content.color}", - "hoverColor": "{content.hoverColor}", - "borderRadius": "{content.borderRadius}", - "padding": "{overlay.select.padding}" + "hoverBackground": "{background.surface.hover.section}", + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "borderRadius": "{dimension.radius.300}", + "padding": "{dimension.space.100}" }, "dayView": { - "margin": "{overlay.popover.padding.100}" + "margin": "{dimension.space.300}" }, "weekDay": { - "padding": "{form.padding.100}", - "fontWeight": "{fonts.fontWeight.bold}", - "color": "{content.color}" + "padding": "{dimension.space.100}", + "fontWeight": "{typography.fontWeight.bold}", + "color": "{text.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": "{background.surface.hover.section}", + "selectedBackground": "{background.selected}", + "rangeSelectedBackground": "{background.surface.hover.section}", + "color": "{text.default}", + "hoverColor": "{text.default}", + "selectedColor": "{text.onBold}", + "rangeSelectedColor": "{text.default}", + "width": "{dimension.size.500}", + "height": "{dimension.size.500}", + "borderRadius": "{dimension.radius.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}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" } }, "monthView": { @@ -2724,406 +3521,406 @@ "borderRadius": "0rem" }, "buttonbar": { - "padding": "{overlay.popover.padding.100}", - "borderColor": "{content.borderColor}" + "padding": "{dimension.space.300}", + "borderColor": "{border.subtle}" }, "timePicker": { - "padding": "{form.padding.300}", - "borderColor": "{content.borderColor}", - "gap": "{form.gap.200}", - "buttonGap": "{form.gap.100}" + "padding": "{dimension.space.300}", + "borderColor": "{border.subtle}", + "gap": "{dimension.space.200}", + "buttonGap": "{dimension.space.100}" }, "root": { - "transitionDuration": "{form.transitionDuration}" + "transitionDuration": "{dimension.duration.200}" } }, "dialog": { "extend": { - "borderWidth": "{overlay.borderWidth}", - "backdrop": "{overlay.modal.backdrop}" + "borderWidth": "{dimension.borderWidth.100}", + "backdrop": "{background.scrim.modal}" }, "root": { - "background": "{overlay.modal.background}", - "borderColor": "{overlay.modal.borderColor}", - "color": "{overlay.modal.color}", - "borderRadius": "{overlay.modal.borderRadius}", - "shadow": "{overlay.popover.shadow}" + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "color": "{text.default}", + "borderRadius": "{dimension.radius.500}", + "shadow": "{shadow.400}" }, "header": { - "padding": "{overlay.modal.padding.300} {overlay.modal.padding.300} 1rem {overlay.modal.padding.300}", - "gap": "{overlay.gap.200}" + "padding": "{dimension.space.600} {dimension.space.600} 1rem {dimension.space.600}", + "gap": "{dimension.space.200}" }, "title": { - "fontSize": "{fonts.fontSize.500}", - "fontWeight": "{fonts.fontWeight.demibold}" + "fontSize": "{typography.fontSize.500}", + "fontWeight": "{typography.fontWeight.demibold}" }, "content": { - "padding": "{content.padding.400}" + "padding": "{dimension.space.600}" }, "footer": { - "padding": "0 {overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.300}", - "gap": "{content.gap.200}" + "padding": "0 {dimension.space.600} {dimension.space.600} {dimension.space.600}", + "gap": "{dimension.space.200}" } }, "divider": { "colorScheme": { "light": { "content": { - "background": "{content.background}", - "color": "{text.mutedColor}" + "background": "{background.surface.raised}", + "color": "{text.muted}" }, - "borderColor": "{content.borderColor}" + "borderColor": "{border.subtle}" } }, "extend": { "content": { - "gap": "{content.gap.200}" + "gap": "{dimension.space.200}" }, - "iconSize": "{media.icon.size.100}" + "iconSize": "{dimension.size.300}" }, "horizontal": { - "margin": "{content.padding.300} 0", - "padding": "0 {content.padding.300}", + "margin": "{dimension.space.400} 0", + "padding": "0 {dimension.space.400}", "content": { - "padding": "0 {content.padding.200}" + "padding": "0 {dimension.space.200}" } }, "vertical": { - "margin": "0 {content.padding.300}", - "padding": "{content.padding.300} 0", + "margin": "0 {dimension.space.400}", + "padding": "{dimension.space.400} 0", "content": { - "padding": "{content.padding.200} 0" + "padding": "{dimension.space.200} 0" } } }, "drawer": { "extend": { - "borderRadius": "{overlay.popover.borderRadius}", - "borderWidth": "{overlay.borderWidth}", - "width": "{overlay.width}", + "borderRadius": "{dimension.radius.200}", + "borderWidth": "{dimension.borderWidth.100}", + "width": "{dimension.overlayWidth.base}", "extHeader": { - "gap": "{overlay.gap.200}", + "gap": "{dimension.space.200}", "borderColor": "{drawer.root.borderColor}" }, - "padding": "{overlay.drawer.padding}", + "padding": "{dimension.space.200}", "scale": "0.125rem", - "backdrop": "{overlay.modal.backdrop}" + "backdrop": "{background.scrim.modal}" }, "root": { - "background": "{overlay.modal.background}", - "borderColor": "{overlay.modal.borderColor}", - "color": "{overlay.modal.color}", - "shadow": "{overlay.modal.shadow}", - "width": "{overlay.width}" + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "color": "{text.default}", + "shadow": "{shadow.200}", + "width": "{dimension.overlayWidth.base}" }, "sm": { - "width": "{overlay.sm.width}" + "width": "{dimension.overlayWidth.sm}" }, "lg": { - "width": "{overlay.lg.width}" + "width": "{dimension.overlayWidth.lg}" }, "xlg": { - "width": "{overlay.xlg.width}" + "width": "{dimension.overlayWidth.xlg}" }, "header": { - "padding": "{overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.200} {overlay.modal.padding.300} " + "padding": "{dimension.space.600} {dimension.space.600} {dimension.space.500} {dimension.space.600} " }, "title": { - "fontSize": "{fonts.fontSize.500}", - "fontWeight": "{fonts.fontWeight.demibold}" + "fontSize": "{typography.fontSize.500}", + "fontWeight": "{typography.fontWeight.demibold}" }, "content": { - "padding": "{overlay.modal.padding.300}" + "padding": "{dimension.space.600}" }, "footer": { - "padding": "0 {overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.300} " + "padding": "0 {dimension.space.600} {dimension.space.600} {dimension.space.600} " } }, "fileupload": { "extend": { "extDragNdrop": { - "background": "{surface.0}", - "borderRadius": "{form.borderRadius.200}", - "iconSize": "{form.size.500}", - "padding": "{form.padding.400}", + "background": "{background.surface.canvas}", + "borderRadius": "{dimension.radius.300}", + "iconSize": "{dimension.size.500}", + "padding": "{dimension.space.400}", "info": { - "gap": "{form.gap.100}" + "gap": "{dimension.space.100}" } }, "extFile": { - "iconSize": "{form.size.350}" + "iconSize": "{dimension.size.350}" }, "extContent": { - "borderRadius": "{content.borderRadius}", - "highlightBorderDefault": "{form.borderColor}" + "borderRadius": "{dimension.radius.300}", + "highlightBorderDefault": "{text.disabled}" } }, "colorScheme": { "light": { "header": { - "background": "{surface.0}", - "color": "{text.color}" + "background": "{background.surface.canvas}", + "color": "{text.default}" } } }, "root": { - "background": "{content.background}", - "borderColor": "{content.borderColor}", - "color": "{content.color}", - "borderRadius": "{content.borderRadius}", - "transitionDuration": "{form.transitionDuration}" + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "color": "{text.default}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}" }, "header": { - "borderColor": "{content.borderColor}", + "borderColor": "{border.subtle}", "borderWidth": "0rem", "padding": "0rem", "borderRadius": "0rem", - "gap": "{content.gap.200}" + "gap": "{dimension.space.200}" }, "content": { - "highlightBorderColor": "{surface.900}", + "highlightBorderColor": "{border.strong}", "padding": "0rem", - "gap": "{content.gap.200}" + "gap": "{dimension.space.200}" }, "file": { - "padding": "{content.padding.200}", - "gap": "{content.gap.200}", - "borderColor": "{form.borderColor}", + "padding": "{dimension.space.200}", + "gap": "{dimension.space.200}", + "borderColor": "{border.default}", "info": { - "gap": "{content.gap.100}" + "gap": "{dimension.space.100}" } }, "fileList": { - "gap": "{content.gap.200}" + "gap": "{dimension.space.200}" }, "progressbar": { - "height": "{feedback.height.100}" + "height": "{dimension.size.200}" }, "basic": { - "gap": "{content.gap.200}" + "gap": "{dimension.space.200}" } }, "floatlabel": { "extend": { - "height": "{form.size.800}", - "iconSize": "{form.icon.400}" + "height": "{dimension.size.800}", + "iconSize": "{dimension.size.350}" }, "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}", + "color": "{text.muted}", + "focusColor": "{text.muted}", + "activeColor": "{text.muted}", + "invalidColor": "{text.danger}", + "transitionDuration": "{dimension.duration.200}", + "positionX": "{dimension.space.300}", + "positionY": "{dimension.space.300}", + "fontWeight": "{typography.fontWeight.regular}", "active": { - "fontSize": "{fonts.fontSize.100}", - "fontWeight": "{fonts.fontWeight.regular}" + "fontSize": "{typography.fontSize.100}", + "fontWeight": "{typography.fontWeight.regular}" } }, "over": { "active": { - "top": "{form.padding.400}" + "top": "{dimension.space.400}" } }, "in": { "input": { - "paddingTop": "{form.padding.700}", - "paddingBottom": "{form.padding.300}" + "paddingTop": "{dimension.space.700}", + "paddingBottom": "{dimension.space.300}" }, "active": { - "top": "{form.padding.300}" + "top": "{dimension.space.300}" } }, "on": { "borderRadius": "0rem", "active": { - "padding": "0 {form.padding.100}", - "background": "{form.background}" + "padding": "0 {dimension.space.100}", + "background": "{background.surface.ground}" } } }, "galleria": { "extend": { - "backdrop": "{overlay.modal.backdrop}" + "backdrop": "{background.scrim.modal}" }, "colorScheme": { "light": { "thumbnailContent": { - "background": "{surface.100}" + "background": "{background.neutral.subtleHover}" }, "thumbnailNavButton": { - "hoverBackground": "{colors.alpha.white.200}", - "color": "{text.color}", - "hoverColor": "{text.hoverColor}" + "hoverBackground": "{background.translucent.light.default}", + "color": "{text.default}", + "hoverColor": "{text.hover.default}" }, "indicatorButton": { - "background": "{surface.300}", - "hoverBackground": "{surface.400}" + "background": "{text.disabled}", + "hoverBackground": "{text.hover.subtle}" } } }, "root": { - "borderWidth": "{content.borderWidth}", - "borderColor": "{content.borderColor}", - "borderRadius": "{content.borderRadius}", - "transitionDuration": "{media.transitionDuration}" + "borderWidth": "{dimension.size.100}", + "borderColor": "{border.subtle}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.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}", + "background": "{background.transparent}", + "hoverBackground": "{background.translucent.light.default}", + "color": "{text.onBold}", + "hoverColor": "{text.onBold}", + "size": "{dimension.size.800}", + "gutter": "{dimension.space.200}", "prev": { - "borderRadius": "{navigation.item.borderRadius}" + "borderRadius": "{dimension.radius.200}" }, "next": { - "borderRadius": "{navigation.item.borderRadius}" + "borderRadius": "{dimension.radius.200}" }, "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" } }, "navIcon": { - "size": "{media.icon.size.300}" + "size": "{dimension.size.500}" }, "thumbnailsContent": { - "padding": "{media.padding.100}" + "padding": "{dimension.space.100}" }, "thumbnailNavButton": { - "size": "{media.size.300}", - "borderRadius": "{content.borderRadius}", - "gutter": "{media.gap.200}", + "size": "{dimension.size.500}", + "borderRadius": "{dimension.radius.300}", + "gutter": "{dimension.space.200}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" } }, "thumbnailNavButtonIcon": { - "size": "{media.icon.size.100}" + "size": "{dimension.size.300}" }, "caption": { - "background": "{colors.alpha.white.500}", - "color": "{text.color}", - "padding": "{media.gap.200}" + "background": "{background.translucent.light.strong}", + "color": "{text.default}", + "padding": "{dimension.space.200}" }, "indicatorList": { - "gap": "{media.gap.200}", - "padding": "{media.padding.400}" + "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": "{background.selected}", + "borderRadius": "{dimension.radius.300}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" } }, "insetIndicatorList": { - "background": "{colors.alpha.black.500}" + "background": "{background.translucent.dark.default}" }, "insetIndicatorButton": { - "background": "{colors.alpha.white.100}", - "hoverBackground": "{colors.alpha.white.200}", - "activeBackground": "{colors.alpha.white.500}" + "background": "{background.translucent.light.subtle}", + "hoverBackground": "{background.translucent.light.default}", + "activeBackground": "{background.translucent.light.strong}" }, "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.800}", + "gutter": "{dimension.space.200}", + "background": "{background.translucent.light.subtle}", + "hoverBackground": "{background.translucent.light.default}", + "color": "{text.onBold}", + "hoverColor": "{text.onBold}", + "borderRadius": "{dimension.radius.400}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" } }, "closeButtonIcon": { - "size": "{media.icon.size.300}" + "size": "{dimension.size.500}" } }, "inputgroup": { "extend": { - "borderWidth": "{form.borderWidth}", - "iconSize": "{form.icon.300}" + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": "{dimension.size.300}" }, "colorScheme": { "light": { "addon": { - "background": "{form.background}", - "borderColor": "{form.borderColor}", - "color": "{text.mutedColor}" + "background": "{background.surface.ground}", + "borderColor": "{border.default}", + "color": "{text.muted}" } } }, "addon": { - "borderRadius": "{form.borderRadius.200}", - "padding": "{form.padding.300}", - "minWidth": "{form.width.300}" + "borderRadius": "{dimension.radius.300}", + "padding": "{dimension.space.300}", + "minWidth": "{dimension.size.600}" } }, "inputnumber": { "extend": { - "borderWidth": "{form.borderWidth}", + "borderWidth": "{dimension.borderWidth.100}", "extButton": { - "height": "{form.size.600}", - "iconSize": "{form.icon.300}" + "height": "{dimension.size.600}", + "iconSize": "{dimension.size.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}" + "background": "{background.surface.raised}", + "hoverBackground": "{background.surface.hover.section}", + "activeBackground": "{background.transparent}", + "borderColor": "{border.default}", + "hoverBorderColor": "{border.default}", + "activeBorderColor": "{border.default}", + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "activeColor": "{text.default}" } } }, "transitionDuration": { - "transitionDuration": "{form.transitionDuration}" + "transitionDuration": "{dimension.duration.200}" }, "button": { - "width": "{form.size.600}", - "borderRadius": "{form.borderRadius.200}", - "verticalPadding": "{form.padding.300}" + "width": "{dimension.size.600}", + "borderRadius": "{dimension.radius.300}", + "verticalPadding": "{dimension.space.300}" } }, "inputotp": { "extend": { - "height": "{form.size.600}", - "borderWidth": "{form.borderWidth}" + "height": "{dimension.size.600}", + "borderWidth": "{dimension.borderWidth.100}" }, "root": { - "gap": "{form.gap.200}" + "gap": "{dimension.space.200}" }, "input": { - "width": "{form.width.400}" + "width": "{dimension.size.700}" }, "sm": { "width": "0rem" @@ -3134,49 +3931,49 @@ }, "inputtext": { "extend": { - "readonlyBackground": "{form.readonlyBackground}", - "iconSize": "{form.icon.300}", - "borderWidth": "{form.borderWidth}", + "readonlyBackground": "{background.neutral.subtleHover}", + "iconSize": "{dimension.size.300}", + "borderWidth": "{dimension.borderWidth.100}", "extXlg": { - "fontSize": "{form.xlg.fontSize}", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.600}" + "fontSize": "{typography.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}", + "background": "{background.surface.ground}", + "disabledBackground": "{background.disabled}", + "filledBackground": "{background.surface.ground}", + "filledHoverBackground": "{background.surface.ground}", + "filledFocusBackground": "{background.surface.ground}", + "borderColor": "{border.default}", + "hoverBorderColor": "{border.brand}", + "focusBorderColor": "{border.brand}", + "invalidBorderColor": "{border.danger}", + "color": "{text.default}", + "disabledColor": "{text.muted}", + "placeholderColor": "{text.muted}", + "invalidPlaceholderColor": "{text.danger}", "shadow": "0", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.300}", - "borderRadius": "{form.borderRadius.200}", - "transitionDuration": "{form.transitionDuration}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.300}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}", "sm": { - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.200}" + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.200}" }, "lg": { - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.400}" + "fontSize": "{typography.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}", + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", "shadow": "0" } } @@ -3185,171 +3982,171 @@ "extend": { "extOption": { "label": { - "gap": "{list.gap.100}" + "gap": "{dimension.space.100}" }, "caption": { - "color": "{text.mutedColor}", - "stripedColor": "{text.mutedColor}" + "color": "{text.muted}", + "stripedColor": "{text.muted}" }, - "gap": "{list.gap.200}" + "gap": "{dimension.space.200}" } }, "colorScheme": { "light": { "option": { - "stripedBackground": "{surface.50}" + "stripedBackground": "{background.neutral.subtle}" } } }, "root": { - "background": "{form.background}", - "disabledBackground": "{form.disabledBackground}", - "borderColor": "{form.borderColor}", - "invalidBorderColor": "{form.invalidBorderColor}", - "color": "{form.color}", - "disabledColor": "{form.disabledColor}", + "background": "{background.surface.ground}", + "disabledBackground": "{background.disabled}", + "borderColor": "{border.default}", + "invalidBorderColor": "{border.danger}", + "color": "{text.defaultHover}", + "disabledColor": "{text.muted}", "shadow": "0", - "borderRadius": "{form.borderRadius.200}", - "transitionDuration": "{form.transitionDuration}" + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}" }, "list": { - "padding": "{list.padding}", - "gap": "{list.gap.100}", + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}", "header": { - "padding": "{list.header.padding}" + "padding": "{dimension.space.400} {dimension.space.400} 0 {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": "{background.surface.hover.section}", + "selectedBackground": "{background.selected}", + "selectedFocusBackground": "{background.selectedStrong}", + "color": "{text.default}", + "focusColor": "{text.default}", + "selectedColor": "{text.onBold}", + "selectedFocusColor": "{text.onBold}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}" }, "optionGroup": { - "background": "{list.optionGroup.background}", - "color": "{list.optionGroup.color}", - "fontWeight": "{fonts.fontWeight.regular}", - "padding": "{list.option.padding}" + "background": "{background.surface.raised}", + "color": "{text.muted}", + "fontWeight": "{typography.fontWeight.regular}", + "padding": "{dimension.space.200} {dimension.space.300}" }, "checkmark": { - "color": "{list.option.color}", - "gutterStart": "-{list.gap.200}", - "gutterEnd": "{list.gap.200}" + "color": "{text.default}", + "gutterStart": "-{dimension.space.200}", + "gutterEnd": "{dimension.space.200}" }, "emptyMessage": { - "padding": "{list.option.padding}" + "padding": "{dimension.space.200} {dimension.space.300}" } }, "megamenu": { "extend": { "extItem": { "caption": { - "color": "{text.mutedColor}", - "gap": "{content.gap.100}" + "color": "{text.muted}", + "gap": "{dimension.space.100}" } }, - "iconSize": "{navigation.submenuIcon.size}" + "iconSize": "{typography.fontSize.500}" }, "colorScheme": { "light": { "root": { - "background": "{transparent}" + "background": "{background.transparent}" } } }, "root": { - "borderColor": "{transparent}", - "borderRadius": "{content.borderRadius}", - "color": "{content.color}", - "gap": "{content.gap.100}", - "transitionDuration": "{form.transitionDuration}", + "borderColor": "{border.transparent}", + "borderRadius": "{dimension.radius.300}", + "color": "{text.default}", + "gap": "{dimension.space.100}", + "transitionDuration": "{dimension.duration.200}", "verticalOrientation": { - "padding": "{navigation.list.padding.100}", - "gap": "{navigation.list.gap}" + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" }, "horizontalOrientation": { - "padding": "{navigation.list.padding.100}", - "gap": "{navigation.list.gap}" + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" } }, "baseItem": { - "borderRadius": "{content.borderRadius}", - "padding": "{navigation.item.padding}" + "borderRadius": "{dimension.radius.300}", + "padding": "{dimension.space.200} {dimension.space.300}" }, "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": "{background.neutral.subtleHover}", + "activeBackground": "{background.selected}", + "color": "{text.default}", + "focusColor": "{text.default}", + "activeColor": "{text.onBold}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}", + "gap": "{dimension.space.200}", "icon": { - "color": "{navigation.item.icon.color}", - "focusColor": "{navigation.item.icon.focusColor}", - "activeColor": "{navigation.item.icon.activeColor}" + "color": "{icon.strong}", + "focusColor": "{icon.strong}", + "activeColor": "{icon.onBold}" } }, "overlay": { - "padding": "{content.padding.100}", - "background": "{content.background}", - "borderColor": "{content.borderColor}", - "borderRadius": "{content.borderRadius}", - "color": "{content.color}", - "shadow": "{navigation.shadow}", + "padding": "{dimension.space.100}", + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "borderRadius": "{dimension.radius.300}", + "color": "{text.default}", + "shadow": "{shadow.400}", "gap": "0rem" }, "submenu": { - "padding": "{navigation.list.padding.100}", - "gap": "{navigation.list.gap}" + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" }, "submenuLabel": { - "fontWeight": "{navigation.submenuLabel.fontWeight}", - "padding": "{navigation.submenuLabel.padding}", - "background": "{navigation.submenuLabel.background}", - "color": "{navigation.submenuLabel.color}" + "fontWeight": "{typography.fontWeight.regular}", + "padding": "{dimension.space.200} {dimension.space.300}", + "background": "{background.transparent}", + "color": "{text.muted}" }, "submenuIcon": { - "size": "{navigation.submenuIcon.size}", - "color": "{navigation.submenuIcon.color}", - "focusColor": "{navigation.submenuIcon.focusColor}", - "activeColor": "{navigation.submenuIcon.activeColor}" + "size": "{typography.fontSize.500}", + "color": "{icon.strongMuted}", + "focusColor": "{icon.strongMuted}", + "activeColor": "{icon.onBold}" }, "separator": { - "borderColor": "{content.borderColor}" + "borderColor": "{border.subtle}" }, "mobileButton": { - "borderRadius": "{navigation.item.borderRadius}", - "size": "{controls.iconOnly.600}", - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "hoverBackground": "{content.hoverBackground}", + "borderRadius": "{dimension.radius.200}", + "size": "{dimension.size.500}", + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "hoverBackground": "{background.surface.hover.section}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" } } }, "menu": { "extend": { "paddingX": "0.25rem", - "iconSize": "{navigation.submenuIcon.size}", + "iconSize": "{typography.fontSize.500}", "paddingY": "0.25rem", "extItem": { "caption": { - "gap": "{content.gap.100}" + "gap": "{dimension.space.100}" }, - "activeBackground": "{navigation.item.activeBackground}", - "activeColor": "{navigation.item.activeColor}" + "activeBackground": "{background.selected}", + "activeColor": "{text.onBold}" } }, "colorScheme": { @@ -3357,209 +4154,209 @@ "extend": { "extItem": { "caption": { - "color": "{text.mutedColor}" + "color": "{text.muted}" }, "icon": { - "activeColor": "{navigation.item.icon.activeColor}" + "activeColor": "{icon.onBold}" } } }, "root": { - "background": "{content.background}", - "borderColor": "{content.borderColor}", - "color": "{content.color}" + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "color": "{text.default}" }, "item": { - "focusBackground": "{navigation.item.focusBackground}", - "color": "{navigation.item.color}", - "focusColor": "{navigation.item.focusColor}", + "focusBackground": "{background.neutral.subtleHover}", + "color": "{text.default}", + "focusColor": "{text.default}", "icon": { - "color": "{navigation.item.icon.color}", - "focusColor": "{navigation.item.icon.focusColor}" + "color": "{icon.strong}", + "focusColor": "{icon.strong}" } } } }, "root": { - "borderRadius": "{content.borderRadius}", - "shadow": "{navigation.shadow}", - "transitionDuration": "{form.transitionDuration}" + "borderRadius": "{dimension.radius.300}", + "shadow": "{shadow.400}", + "transitionDuration": "{dimension.duration.200}" }, "list": { - "padding": "{navigation.list.padding.100}", - "gap": "{navigation.list.gap}" + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" }, "submenuLabel": { - "padding": "{navigation.submenuLabel.padding}", - "fontWeight": "{fonts.fontWeight.regular}", - "background": "{navigation.submenuLabel.background}", - "color": "{navigation.submenuLabel.color}" + "padding": "{dimension.space.200} {dimension.space.300}", + "fontWeight": "{typography.fontWeight.regular}", + "background": "{background.transparent}", + "color": "{text.muted}" }, "separator": { - "borderColor": "{content.borderColor}" + "borderColor": "{border.subtle}" }, "item": { - "padding": "{navigation.item.padding}", - "borderRadius": "{navigation.item.borderRadius}", - "gap": "{navigation.item.gap}" + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}", + "gap": "{dimension.space.200}" } }, "menubar": { "extend": { - "iconSize": "{navigation.submenuIcon.size}", + "iconSize": "{typography.fontSize.500}", "extItem": { "caption": { - "color": "{text.mutedColor}", - "gap": "{content.padding.100}" + "color": "{text.muted}", + "gap": "{dimension.space.100}" } }, "extSubmenuLabel": { - "padding": "{navigation.submenuLabel.padding}", - "fontWeight": "{fonts.fontWeight.demibold}", - "background": "{navigation.submenuLabel.background}", - "color": "{navigation.submenuLabel.color}" + "padding": "{dimension.space.200} {dimension.space.300}", + "fontWeight": "{typography.fontWeight.demibold}", + "background": "{background.transparent}", + "color": "{text.muted}" } }, "colorScheme": { "light": { "root": { - "background": "{transparent}" + "background": "{background.transparent}" } } }, "root": { - "borderColor": "{transparent}", - "borderRadius": "{navigation.item.borderRadius}", - "color": "{content.color}", - "gap": "{content.padding.100}", - "padding": "{navigation.list.padding.100}", - "transitionDuration": "{form.transitionDuration}" + "borderColor": "{border.transparent}", + "borderRadius": "{dimension.radius.200}", + "color": "{text.default}", + "gap": "{dimension.space.100}", + "padding": "{dimension.space.100}", + "transitionDuration": "{dimension.duration.200}" }, "baseItem": { - "borderRadius": "{navigation.item.borderRadius}", - "padding": "{navigation.item.padding}" + "borderRadius": "{dimension.radius.200}", + "padding": "{dimension.space.200} {dimension.space.300}" }, "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": "{background.neutral.subtleHover}", + "activeBackground": "{background.selected}", + "color": "{text.default}", + "focusColor": "{text.default}", + "activeColor": "{text.onBold}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}", + "gap": "{dimension.space.200}", "icon": { - "color": "{navigation.item.icon.color}", - "focusColor": "{navigation.item.icon.focusColor}", - "activeColor": "{navigation.item.icon.activeColor}" + "color": "{icon.strong}", + "focusColor": "{icon.strong}", + "activeColor": "{icon.onBold}" } }, "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": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "borderRadius": "{dimension.radius.300}", + "shadow": "{shadow.400}", + "mobileIndent": "{dimension.space.300}", "icon": { - "size": "{navigation.submenuIcon.size}", - "color": "{navigation.submenuIcon.color}", - "focusColor": "{navigation.submenuIcon.focusColor}", - "activeColor": "{navigation.submenuIcon.activeColor}" + "size": "{typography.fontSize.500}", + "color": "{icon.strongMuted}", + "focusColor": "{icon.strongMuted}", + "activeColor": "{icon.onBold}" } }, "separator": { - "borderColor": "{content.borderColor}" + "borderColor": "{border.subtle}" }, "mobileButton": { - "borderRadius": "{navigation.item.borderRadius}", - "size": "{controls.iconOnly.600}", - "color": "{text.color}", - "hoverColor": "{text.hoverColor}", - "hoverBackground": "{content.hoverBackground}", + "borderRadius": "{dimension.radius.200}", + "size": "{dimension.size.500}", + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "hoverBackground": "{background.surface.hover.section}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" } } }, "message": { "extend": { - "width": "{messages.width}", + "width": "{dimension.overlayWidth.base}", "extText": { - "gap": "{feedback.gap.100}" + "gap": "{dimension.space.100}" }, "extInfo": { - "color": "{info.500}", + "color": "{text.infoBold}", "closeButton": { - "color": "{info.500}", - "borderColor": "{info.500}" + "color": "{text.infoBold}", + "borderColor": "{border.infoBold}" }, "caption": { - "color": "{text.color}" + "color": "{text.default}" } }, "extAccentLine": { - "width": "{feedback.width.200}" + "width": "{dimension.size.150}" }, "extCloseButton": { - "width": "{feedback.width.100}" + "width": "{dimension.size.100}" }, "extSuccess": { - "color": "{success.500}", + "color": "{text.successBold}", "closeButton": { - "color": "{success.500}", - "borderColor": "{success.500}" + "color": "{text.successBold}", + "borderColor": "{border.checked}" }, "caption": { - "color": "{text.color}" + "color": "{text.default}" } }, "extWarn": { - "color": "{warn.500}", + "color": "{text.warningBold}", "closeButton": { - "color": "{warn.500}", - "borderColor": "{warn.500}" + "color": "{text.warningBold}", + "borderColor": "{border.warningBold}" }, "caption": { - "color": "{text.color}" + "color": "{text.default}" } }, "extError": { - "color": "{error.500}", + "color": "{text.dangerBold}", "closeButton": { - "color": "{error.500}", - "borderColor": "{error.500}" + "color": "{text.dangerBold}", + "borderColor": "{border.dangerBold}" }, "caption": { - "color": "{text.color}" + "color": "{text.default}" } } }, "colorScheme": { "light": { "success": { - "background": "{success.50}", - "borderColor": "{success.500}", - "color": "{text.color}", + "background": "{background.brand.subtle}", + "borderColor": "{border.checked}", + "color": "{text.default}", "shadow": "none", "outlined": { - "color": "{text.color}", - "borderColor": "{success.500}" + "color": "{text.default}", + "borderColor": "{border.checked}" }, "closeButton": { - "hoverBackground": "{success.200}", + "hoverBackground": "{background.success.subtleActive}", "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" } }, "simple": { - "color": "{text.color}" + "color": "{text.default}" } }, "outlined": { @@ -3567,18 +4364,18 @@ "borderWidth": "0rem" }, "closeButton": { - "hoverBackground": "{transparent}", + "hoverBackground": "{background.transparent}", "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" } }, "outlined": { - "color": "{transparent}", - "borderColor": "{transparent}" + "color": "{text.transparent}", + "borderColor": "{border.transparent}" }, "simple": { - "color": "{transparent}" + "color": "{text.transparent}" } }, "simple": { @@ -3587,549 +4384,549 @@ } }, "warn": { - "background": "{warn.50}", - "borderColor": "{warn.500}", - "color": "{text.color}", + "background": "{background.warning.subtle}", + "borderColor": "{border.warningBold}", + "color": "{text.default}", "shadow": "none", "outlined": { - "color": "{text.color}", - "borderColor": "{warn.500}" + "color": "{text.default}", + "borderColor": "{border.warningBold}" }, "closeButton": { - "hoverBackground": "{warn.200}", + "hoverBackground": "{background.warning.subtleActive}", "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" } }, "simple": { - "color": "{text.color}" + "color": "{text.default}" } }, "error": { - "background": "{error.50}", - "borderColor": "{error.500}", - "color": "{text.color}", + "background": "{background.danger.subtle}", + "borderColor": "{border.dangerBold}", + "color": "{text.default}", "shadow": "none", "outlined": { - "color": "{text.color}", - "borderColor": "{error.500}" + "color": "{text.default}", + "borderColor": "{border.dangerBold}" }, "closeButton": { - "hoverBackground": "{error.200}", + "hoverBackground": "{background.danger.subtleActive}", "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" } }, "simple": { - "color": "{text.color}" + "color": "{text.default}" } }, "secondary": { - "borderColor": "{transparent}", + "borderColor": "{border.transparent}", "shadow": "none", "closeButton": { - "hoverBackground": "{transparent}", + "hoverBackground": "{background.transparent}", "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" } }, "simple": { - "color": "{transparent}" + "color": "{text.transparent}" }, "outlined": { - "color": "{transparent}", - "borderColor": "{transparent}" + "color": "{text.transparent}", + "borderColor": "{border.transparent}" } }, "contrast": { - "borderColor": "{transparent}", + "borderColor": "{border.transparent}", "shadow": "none", "closeButton": { - "hoverBackground": "{transparent}", + "hoverBackground": "{background.transparent}", "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" } }, "simple": { - "color": "{transparent}" + "color": "{text.transparent}" }, "outlined": { - "color": "{transparent}", - "borderColor": "{transparent}" + "color": "{text.transparent}", + "borderColor": "{border.transparent}" } }, "info": { - "background": "{info.50}", - "borderColor": "{info.500}", - "color": "{text.color}", + "background": "{background.info.subtle}", + "borderColor": "{border.infoBold}", + "color": "{text.default}", "shadow": "none", "closeButton": { - "hoverBackground": "{info.200}", + "hoverBackground": "{background.info.subtleActive}", "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" } }, "outlined": { - "color": "{text.color}", - "borderColor": "{info.500}" + "color": "{text.default}", + "borderColor": "{border.infoBold}" }, "simple": { - "color": "{text.color}" + "color": "{text.default}" } } } }, "root": { - "borderRadius": "{content.borderRadius}", - "borderWidth": "{feedback.width.100}", - "transitionDuration": "{feedback.transitionDuration}" + "borderRadius": "{dimension.radius.300}", + "borderWidth": "{dimension.size.100}", + "transitionDuration": "{dimension.duration.200}" }, "content": { - "padding": "{feedback.padding.200}", - "gap": "{feedback.gap.400}", + "padding": "{dimension.space.400}", + "gap": "{dimension.space.400}", "sm": { - "padding": "{feedback.padding.200}" + "padding": "{dimension.space.400}" }, "lg": { - "padding": "{feedback.padding.200}" + "padding": "{dimension.space.400}" } }, "text": { - "fontSize": "{fonts.fontSize.300}", - "fontWeight": "{fonts.fontWeight.bold}", + "fontSize": "{typography.fontSize.300}", + "fontWeight": "{typography.fontWeight.bold}", "sm": { - "fontSize": "{fonts.fontSize.300}" + "fontSize": "{typography.fontSize.300}" }, "lg": { - "fontSize": "{fonts.fontSize.300}" + "fontSize": "{typography.fontSize.300}" } }, "icon": { - "size": "{feedback.icon.size.500}", + "size": "{dimension.size.550}", "sm": { - "size": "{feedback.icon.size.500}" + "size": "{dimension.size.550}" }, "lg": { - "size": "{feedback.icon.size.500}" + "size": "{dimension.size.550}" } }, "closeButton": { - "width": "{controls.iconOnly.600}", - "height": "{controls.iconOnly.600}", - "borderRadius": "{controls.borderRadius.100}", + "width": "{dimension.size.500}", + "height": "{dimension.size.500}", + "borderRadius": "{dimension.radius.300}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "offset": "{focusRing.offset}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "offset": "{dimension.focusRing.offset}" } }, "closeIcon": { - "size": "{feedback.icon.size.200}", + "size": "{dimension.size.300}", "sm": { - "size": "{feedback.icon.size.200}" + "size": "{dimension.size.300}" }, "lg": { - "size": "{feedback.icon.size.200}" + "size": "{dimension.size.300}" } } }, "metergroup": { "extend": { "extLabel": { - "color": "{text.mutedColor}" + "color": "{text.muted}" } }, "root": { - "borderRadius": "{content.borderRadius}", - "gap": "{feedback.gap.300}" + "borderRadius": "{dimension.radius.300}", + "gap": "{dimension.space.300}" }, "meters": { - "size": "{feedback.height.100}", - "background": "{content.borderColor}" + "size": "{dimension.size.200}", + "background": "{background.disabled}" }, "label": { - "gap": "{feedback.gap.100}" + "gap": "{dimension.space.100}" }, "labelMarker": { - "size": "{feedback.icon.size.100}" + "size": "{dimension.size.200}" }, "labelIcon": { - "size": "{feedback.icon.size.200}" + "size": "{dimension.size.300}" }, "labelList": { - "verticalGap": "{feedback.gap.200}", - "horizontalGap": "{feedback.gap.300}" + "verticalGap": "{dimension.space.200}", + "horizontalGap": "{dimension.space.300}" } }, "multiselect": { "colorScheme": { "overlay": { - "background": "{overlay.select.background}", - "borderColor": "{overlay.select.borderColor}", - "color": "{overlay.select.color}" + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "color": "{text.default}" }, "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}" + "focusBackground": "{background.surface.hover.section}", + "selectedBackground": "{background.selected}", + "selectedFocusBackground": "{background.selectedStrong}", + "color": "{text.default}", + "focusColor": "{text.default}", + "selectedColor": "{text.onBold}", + "selectedFocusColor": "{text.onBold}" }, "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}", + "background": "{background.surface.ground}", + "disabledBackground": "{background.disabled}", + "filledBackground": "{background.surface.ground}", + "filledHoverBackground": "{background.surface.ground}", + "filledFocusBackground": "{background.surface.ground}", + "borderColor": "{border.default}", + "hoverBorderColor": "{border.brand}", + "focusBorderColor": "{border.brand}", + "invalidBorderColor": "{border.danger}", + "color": "{text.defaultHover}", + "disabledColor": "{text.muted}", + "placeholderColor": "{text.muted}", + "invalidPlaceholderColor": "{text.danger}", "focusRing": { - "color": "{form.focusRing.color}" + "color": "{background.success.subtleActive}" } }, "dropdown": { - "color": "{form.floatLabelColor}" + "color": "{text.muted}" }, "optionGroup": { - "background": "{list.optionGroup.background}", - "color": "{list.optionGroup.color}" + "background": "{background.surface.raised}", + "color": "{text.muted}" }, "clearIcon": { - "color": "{form.floatLabelColor}" + "color": "{icon.subtle}" } }, "extend": { "paddingX": "0.3571rem", "paddingY": "0.3571rem", - "borderWidth": "{form.borderWidth}", - "iconSize": "{form.icon.300}", - "width": "{form.width}", - "readonlyBackground": "{form.readonlyBackground}" + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": "{dimension.size.300}", + "width": "{dimension.overlayWidth.narrow}", + "readonlyBackground": "{background.neutral.subtleHover}" }, "root": { "shadow": "0", - "paddingX": "{form.paddingX}", - "paddingY": "{form.paddingY}", - "borderRadius": "{form.borderRadius.200}", - "transitionDuration": "{form.transitionDuration}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}", "sm": { - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{form.padding.200}", - "paddingY": "{form.padding.200}" + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.200}", + "paddingY": "{dimension.space.200}" }, "lg": { - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{form.padding.400}", - "paddingY": "{form.padding.400}" + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}" }, "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "offset": "{form.focusRing.offset}", + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "offset": "{dimension.focusRing.offset}", "shadow": "0" } }, "dropdown": { - "width": "{form.width.300}" + "width": "{dimension.size.600}" }, "overlay": { - "borderRadius": "{overlay.select.borderRadius}", - "shadow": "{overlay.select.shadow}" + "borderRadius": "{dimension.radius.300}", + "shadow": "{shadow.400}" }, "list": { - "padding": "{list.padding}", + "padding": "{dimension.space.100}", "header": { - "padding": "{list.header.padding}" + "padding": "{dimension.space.400} {dimension.space.400} 0 {dimension.space.400}" }, - "gap": "{list.gap.100}" + "gap": "{dimension.space.100}" }, "chip": { - "borderRadius": "{form.borderRadius.100}" + "borderRadius": "{dimension.radius.200}" }, "option": { - "padding": "{list.option.padding}", - "borderRadius": "{list.option.borderRadius}", - "gap": "{list.gap.200}" + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}", + "gap": "{dimension.space.200}" }, "optionGroup": { - "fontWeight": "{fonts.fontWeight.demibold}", - "padding": "{list.optionGroup.padding}" + "fontWeight": "{typography.fontWeight.demibold}", + "padding": "{dimension.space.200} {dimension.space.300}" }, "emptyMessage": { - "padding": "{list.option.padding}" + "padding": "{dimension.space.200} {dimension.space.300}" } }, "paginator": { "root": { - "padding": "0 {data.padding.200}", - "gap": "{data.gap.200}", - "borderRadius": "{content.borderRadius}", - "background": "{transparent}", - "color": "{content.color}", - "transitionDuration": "{data.transitionDuration}" + "padding": "0 {dimension.space.200}", + "gap": "{dimension.space.200}", + "borderRadius": "{dimension.radius.300}", + "background": "{background.transparent}", + "color": "{text.default}", + "transitionDuration": "{dimension.duration.200}" }, "currentPageReport": { - "color": "{text.mutedColor}" + "color": "{text.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": "{background.transparent}", + "hoverBackground": "{background.surface.hover.section}", + "selectedBackground": "{background.selected}", + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "selectedColor": "{text.onBold}", + "width": "{dimension.size.600}", + "height": "{dimension.size.600}", + "borderRadius": "{dimension.radius.300}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "focus": "{focusRing.shadow}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "focus": "{shadow.200}" } }, "jumpToPageInput": { - "maxWidth": "{data.width.400}" + "maxWidth": "{dimension.size.900}" } }, "panelmenu": { "extend": { "extPanel": { - "gap": "{content.gap.100}" + "gap": "{dimension.space.100}" }, - "iconSize": "{navigation.submenuIcon.size}", + "iconSize": "{typography.fontSize.500}", "extItem": { - "activeBackground": "{navigation.item.activeBackground}", - "activeColor": "{navigation.item.activeColor}", + "activeBackground": "{background.selected}", + "activeColor": "{text.onBold}", "caption": { - "color": "{text.mutedColor}", - "gap": "{content.gap.100}" + "color": "{text.muted}", + "gap": "{dimension.space.100}" } } }, "root": { - "gap": "{content.gap.100}", - "transitionDuration": "{form.transitionDuration}" + "gap": "{dimension.space.100}", + "transitionDuration": "{dimension.duration.200}" }, "panel": { - "background": "{transparent}", - "borderColor": "{transparent}", - "borderWidth": "{navigation.width.100}", - "color": "{content.color}", - "padding": "{content.padding.100}", - "borderRadius": "{content.borderRadius}", + "background": "{background.transparent}", + "borderColor": "{border.transparent}", + "borderWidth": "{dimension.borderWidth.100}", + "color": "{text.default}", + "padding": "{dimension.space.100}", + "borderRadius": "{dimension.radius.300}", "first": { - "borderWidth": "{navigation.width.100} {navigation.width.100} 0 {navigation.width.100}", - "topBorderRadius": "{content.borderRadius}" + "borderWidth": "{dimension.borderWidth.100} {dimension.borderWidth.100} 0 {dimension.borderWidth.100}", + "topBorderRadius": "{dimension.radius.300}" }, "last": { - "borderWidth": "0 {navigation.width.100} {navigation.width.100} {navigation.width.100}", - "topBorderRadius": "{content.borderRadius}" + "borderWidth": "0 {dimension.borderWidth.100} {dimension.borderWidth.100} {dimension.borderWidth.100}", + "topBorderRadius": "{dimension.radius.300}" } }, "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}", + "focusBackground": "{background.neutral.subtleHover}", + "color": "{text.default}", + "focusColor": "{text.default}", + "gap": "{dimension.space.200}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}", "icon": { - "color": "{navigation.item.icon.color}", - "focusColor": "{navigation.item.icon.focusColor}" + "color": "{icon.strong}", + "focusColor": "{icon.strong}" } }, "submenu": { - "indent": "{navigation.padding.400}" + "indent": "{dimension.space.600}" }, "separator": { - "borderColor": "{content.borderColor}" + "borderColor": "{border.subtle}" }, "submenuIcon": { - "color": "{navigation.submenuIcon.color}", - "focusColor": "{navigation.submenuIcon.focusColor}" + "color": "{icon.strongMuted}", + "focusColor": "{icon.strongMuted}" } }, "password": { "extend": { - "borderWidth": "{form.borderWidth}" + "borderWidth": "{dimension.borderWidth.100}" }, "colorScheme": { "light": { "strength": { - "weakBackground": "{error.500}", - "mediumBackground": "{warn.500}", - "strongBackground": "{success.600}" + "weakBackground": "{background.danger.bold}", + "mediumBackground": "{background.warning.bold}", + "strongBackground": "{background.brand.boldHover}" }, "icon": { - "color": "{form.placeholderColor}" + "color": "{icon.subtle}" } }, "dark": { "strength": { - "weakBackground": "{error.500}", - "mediumBackground": "{warn.500}", - "strongBackground": "{success.600}" + "weakBackground": "{background.danger.bold}", + "mediumBackground": "{background.warning.bold}", + "strongBackground": "{background.brand.boldHover}" }, "icon": { - "color": "{form.placeholderColor}" + "color": "{icon.subtle}" } } }, "meter": { - "background": "{content.borderColor}", - "borderRadius": "{content.borderRadius}", - "height": "{feedback.height.100}" + "background": "{background.disabled}", + "borderRadius": "{dimension.radius.300}", + "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": "{background.surface.raised}", + "borderColor": "{border.default}", + "borderRadius": "{dimension.radius.200}", + "color": "{text.default}", + "padding": "{dimension.space.300}", + "shadow": "{shadow.400}" }, "content": { - "gap": "{content.gap.200}" + "gap": "{dimension.space.200}" } }, "popover": { "extend": { - "borderWidth": "{overlay.borderWidth}", + "borderWidth": "{dimension.borderWidth.100}", "arrow": { - "width": "{overlay.popover.width.200}", - "height": "{overlay.popover.width.100}" + "width": "{dimension.size.250}", + "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.300}", - "arrowOffset": "{overlay.popover.padding.200}", + "background": "{background.surface.raised}", + "borderColor": "{border.default}", + "color": "{text.default}", + "borderRadius": "{dimension.radius.200}", + "shadow": "{shadow.400}", + "gutter": "{dimension.space.300}", + "arrowOffset": "{dimension.space.500}", "arrowLeft": "0px" }, "content": { - "padding": "{overlay.popover.padding.100}" + "padding": "{dimension.space.300}" } }, "progressbar": { "label": { - "color": "{text.extend.colorPrimaryStatic}", - "fontSize": "{fonts.fontSize.100}", - "fontWeight": "{fonts.fontWeight.regular}" + "color": "{text.staticDark}", + "fontSize": "{typography.fontSize.100}", + "fontWeight": "{typography.fontWeight.regular}" }, "root": { - "background": "{content.borderColor}", - "borderRadius": "{content.borderRadius}", - "height": "{feedback.height.300}" + "background": "{background.disabled}", + "borderRadius": "{dimension.radius.300}", + "height": "{dimension.size.300}" }, "value": { - "background": "{primary.color}" + "background": "{background.brand.bold}" } }, "progressspinner": { "extend": { - "small": "{feedback.width.500}", - "medium": "{feedback.width.700}", - "large": "{feedback.width.800}", - "xlarge": "{feedback.width.900}" + "small": "{dimension.size.300}", + "medium": "{dimension.size.500}", + "large": "{dimension.size.700}", + "xlarge": "{dimension.size.800}" }, "colorScheme": { "light": { "root": { - "colorOne": "{success.500}", - "colorTwo": "{info.500}", - "colorThree": "{error.500}", - "colorFour": "{warn.500}" + "colorOne": "{background.brand.bold}", + "colorTwo": "{background.info.bold}", + "colorThree": "{background.danger.bold}", + "colorFour": "{background.warning.bold}" } } }, "root": { - "borderWidth": "{feedback.width.200}" + "borderWidth": "{dimension.size.150}" } }, "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}", + "width": "{dimension.size.400}", + "height": "{dimension.size.400}", + "background": "{background.surface.ground}", + "checkedBackground": "{background.selected}", + "checkedHoverBackground": "{background.surface.inverse}", + "disabledBackground": "{background.disabled}", + "filledBackground": "{background.surface.ground}", + "borderColor": "{border.default}", + "hoverBorderColor": "{border.strong}", + "focusBorderColor": "{border.default}", + "checkedBorderColor": "{border.strong}", + "checkedHoverBorderColor": "{border.strong}", + "checkedFocusBorderColor": "{border.strong}", + "checkedDisabledBorderColor": "{border.default}", + "invalidBorderColor": "{border.danger}", "shadow": "0", - "transitionDuration": "{form.transitionDuration}" + "transitionDuration": "{dimension.duration.200}" }, "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" }, "sm": { - "width": "{form.size.300}", - "height": "{form.size.300}" + "width": "{dimension.size.300}", + "height": "{dimension.size.300}" }, "lg": { - "width": "{form.size.350}", - "height": "{form.size.350}" + "width": "{dimension.size.350}", + "height": "{dimension.size.350}" }, "icon": { "size": "0.7rem", - "checkedColor": "{text.extend.colorInverted}", - "checkedHoverColor": "{text.extend.colorInverted}", - "disabledColor": "{text.mutedColor}", + "checkedColor": "{icon.onBold}", + "checkedHoverColor": "{icon.onBold}", + "disabledColor": "{icon.subtle}", "sm": { - "size": "{form.icon.100}" + "size": "{dimension.size.200}" }, "lg": { - "size": "{form.icon.300}" + "size": "{dimension.size.300}" } } }, "rating": { "root": { - "gap": "{form.gap.200}", - "transitionDuration": "{form.transitionDuration}" + "gap": "{dimension.space.200}", + "transitionDuration": "{dimension.duration.200}" }, "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" }, "icon": { - "size": "{form.icon.500}", - "color": "{surface.500}", - "hoverColor": "{warn.500}", - "activeColor": "{warn.500}" + "size": "{dimension.size.400}", + "color": "{icon.subtle}", + "hoverColor": "{background.warning.bold}", + "activeColor": "{background.warning.bold}" } }, "ripple": { @@ -4145,208 +4942,208 @@ "colorScheme": { "light": { "bar": { - "background": "{surface.300}" + "background": "{text.disabled}" } } }, "root": { - "transitionDuration": "{media.transitionDuration}" + "transitionDuration": "{dimension.duration.200}" }, "bar": { - "size": "{media.size.200}", - "borderRadius": "{media.borderRadius.100}", + "size": "{dimension.size.200}", + "borderRadius": "{dimension.radius.200}", "focusRing": { "width": "0rem", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" } } }, "select": { "extend": { "extOption": { - "background": "{list.option.background}", - "gap": "{list.gap.200}" + "background": "{background.surface.raised}", + "gap": "{dimension.space.200}" }, "extOptionGroup": { - "gap": "{list.gap.200}" + "gap": "{dimension.space.200}" }, - "readonlyBackground": "{form.readonlyBackground}", - "borderWidth": "{form.borderWidth}", - "iconSize": "{form.icon.300}" + "readonlyBackground": "{background.neutral.subtleHover}", + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": "{dimension.size.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}", + "background": "{background.surface.ground}", + "disabledBackground": "{background.disabled}", + "filledBackground": "{background.surface.ground}", + "filledHoverBackground": "{background.surface.ground}", + "filledFocusBackground": "{background.surface.ground}", + "borderColor": "{border.default}", + "hoverBorderColor": "{border.brand}", + "focusBorderColor": "{border.brand}", + "invalidBorderColor": "{border.danger}", + "color": "{text.default}", + "disabledColor": "{text.muted}", + "placeholderColor": "{text.muted}", + "invalidPlaceholderColor": "{text.danger}", "shadow": "0", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.300}", - "borderRadius": "{form.borderRadius.200}", - "transitionDuration": "{form.transitionDuration}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.300}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}", "sm": { - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.200}" + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.200}" }, "lg": { - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.400}" + "fontSize": "{typography.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}", + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", "shadow": "0" } }, "dropdown": { - "width": "{form.width.300}", - "color": "{form.iconColor}" + "width": "{dimension.size.600}", + "color": "{text.defaultHover}" }, "overlay": { - "background": "{overlay.select.background}", - "borderColor": "{overlay.select.borderColor}", - "borderRadius": "{overlay.select.borderRadius}", - "color": "{overlay.select.color}", - "shadow": "{overlay.select.shadow}" + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "borderRadius": "{dimension.radius.300}", + "color": "{text.default}", + "shadow": "{shadow.400}" }, "list": { - "padding": "{list.padding}", - "gap": "{list.gap.100}", + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}", "header": { - "padding": "{list.header.padding}" + "padding": "{dimension.space.400} {dimension.space.400} 0 {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": "{background.surface.hover.section}", + "selectedBackground": "{background.selected}", + "selectedFocusBackground": "{background.selectedStrong}", + "color": "{text.default}", + "focusColor": "{text.default}", + "selectedColor": "{text.onBold}", + "selectedFocusColor": "{text.onBold}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}" }, "optionGroup": { - "background": "{list.optionGroup.background}", - "color": "{list.optionGroup.color}", - "fontWeight": "{fonts.fontWeight.regular}", - "padding": "{list.option.padding}" + "background": "{background.surface.raised}", + "color": "{text.muted}", + "fontWeight": "{typography.fontWeight.regular}", + "padding": "{dimension.space.200} {dimension.space.300}" }, "clearIcon": { - "color": "{form.iconColor}" + "color": "{icon.default}" }, "checkmark": { - "color": "{list.option.color}", - "gutterStart": "-{form.padding.200}", - "gutterEnd": "{form.padding.200}" + "color": "{text.default}", + "gutterStart": "-{dimension.space.200}", + "gutterEnd": "{dimension.space.200}" }, "emptyMessage": { - "padding": "{list.option.padding}" + "padding": "{dimension.space.200} {dimension.space.300}" } }, "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}", + "checkedBackground": "{background.surface.ground}", "iconSize": { - "sm": "{controls.iconOnly.200}", - "md": "{controls.iconOnly.300}", - "lg": "{controls.iconOnly.400}", - "xlg": "{controls.iconOnly.500}" + "sm": "{dimension.size.300}", + "md": "{dimension.size.350}", + "lg": "{dimension.size.400}", + "xlg": "{dimension.size.450}" }, - "checkedBorderColor": "{form.background}", - "checkedColor": "{form.color}", + "checkedBorderColor": "{background.surface.ground}", + "checkedColor": "{text.defaultHover}", "ext": { - "borderRadius": "{borderRadius.200}" + "borderRadius": "{dimension.radius.200}" } }, "colorScheme": { "light": { "root": { - "invalidBorderColor": "{form.invalidBorderColor}" + "invalidBorderColor": "{border.danger}" }, "extend": { - "background": "{surface.200}" + "background": "{background.disabled}" } } }, "root": { - "borderRadius": "{form.borderRadius.200}" + "borderRadius": "{dimension.radius.300}" } }, "skeleton": { "extend": { - "minWidth": "{feedback.width.700}", - "height": "{feedback.height.650}" + "minWidth": "{dimension.size.500}", + "height": "{dimension.size.500}" }, "colorScheme": { "light": { "root": { - "background": "{surface.200}", - "animationBackground": "{surface.100}" + "background": "{background.disabled}", + "animationBackground": "{background.neutral.subtleHover}" } } }, "root": { - "borderRadius": "{content.borderRadius}" + "borderRadius": "{dimension.radius.300}" } }, "slider": { "colorScheme": { "handle": { "content": { - "background": "{surface.0}" + "background": "{background.surface.canvas}" } } }, "root": { - "transitionDuration": "{form.transitionDuration}" + "transitionDuration": "{dimension.duration.200}" }, "track": { - "background": "{content.borderColor}", - "borderRadius": "{content.borderRadius}", - "size": "{form.size.150}" + "background": "{background.disabled}", + "borderRadius": "{dimension.radius.300}", + "size": "{dimension.size.150}" }, "range": { - "background": "{surface.900}" + "background": "{background.selected}" }, "handle": { - "width": "{form.size.350}", - "height": "{form.size.350}", - "borderRadius": "{form.borderRadius.300}", - "background": "{surface.900}", - "hoverBackground": "{surface.900}", + "width": "{dimension.size.350}", + "height": "{dimension.size.350}", + "borderRadius": "{dimension.radius.max}", + "background": "{background.selected}", + "hoverBackground": "{background.selected}", "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" }, "content": { - "borderRadius": "{form.borderRadius.300}", - "hoverBackground": "{surface.900}", - "width": "{form.size.250}", - "height": "{form.size.250}", + "borderRadius": "{dimension.radius.max}", + "hoverBackground": "{background.selected}", + "width": "{dimension.size.250}", + "height": "{dimension.size.250}", "shadow": "none" } } @@ -4355,110 +5152,110 @@ "colorScheme": { "light": { "handle": { - "background": "{surface.900}" + "background": "{background.selected}" } } }, "gutter": { - "background": "{surface.100}" + "background": "{background.neutral.subtleHover}" }, "root": { - "background": "{content.background}", - "borderColor": "{content.borderColor}", - "color": "{content.color}", - "transitionDuration": "{controls.transitionDuration}" + "background": "{background.surface.raised}", + "borderColor": "{border.subtle}", + "color": "{text.default}", + "transitionDuration": "{dimension.duration.200}" }, "handle": { - "size": "{form.size.150}", - "borderRadius": "{content.borderRadius}", + "size": "{dimension.size.150}", + "borderRadius": "{dimension.radius.300}", "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" } } }, "stepper": { "extend": { "extCaption": { - "gap": "{feedback.gap.100}" + "gap": "{dimension.space.100}" }, "extStepNumber": { - "invalidBackground": "{error.400}", - "invalidColor": "{error.900}", - "invalidBorderColor": "{error.400}", - "borderWidth": "{feedback.width.100}", - "iconSize": "{feedback.icon.size.300}" + "invalidBackground": "{background.danger.border}", + "invalidColor": "{text.dangerStrong}", + "invalidBorderColor": "{border.danger}", + "borderWidth": "{dimension.size.100}", + "iconSize": "{dimension.size.400}" } }, "root": { - "transitionDuration": "{feedback.transitionDuration}" + "transitionDuration": "{dimension.duration.200}" }, "separator": { - "background": "{content.borderColor}", - "activeBackground": "{form.focusBorderPrimaryColor}", + "background": "{background.disabled}", + "activeBackground": "{background.selected}", "margin": "0 0 0 1.625rem", - "size": "{form.size.100}" + "size": "{dimension.size.100}" }, "step": { - "padding": "{feedback.padding.100}", - "gap": "{feedback.gap.200}" + "padding": "{dimension.space.200}", + "gap": "{dimension.space.200}" }, "stepHeader": { "padding": "0rem", "borderRadius": "0rem", - "gap": "{feedback.gap.200}", + "gap": "{dimension.space.200}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" } }, "stepTitle": { - "color": "{text.color}", - "activeColor": "{text.color}", - "fontWeight": "{fonts.fontWeight.regular}" + "color": "{text.default}", + "activeColor": "{text.default}", + "fontWeight": "{typography.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}", + "background": "{background.surface.raised}", + "activeBackground": "{background.brand.bold}", + "borderColor": "{border.subtle}", + "activeBorderColor": "{border.checked}", + "color": "{text.default}", + "activeColor": "{text.staticDark}", + "size": "{dimension.size.400}", + "fontSize": "{typography.fontSize.300}", + "fontWeight": "{typography.fontWeight.bold}", + "borderRadius": "{dimension.radius.max}", "shadow": "none" }, "steppanels": { - "padding": "{feedback.padding.200}" + "padding": "{dimension.space.400}" }, "steppanel": { - "background": "{content.background}", - "color": "{content.color}", + "background": "{background.surface.raised}", + "color": "{text.default}", "padding": "0rem", "indent": "0rem" } }, "steps": { "itemLink": { - "gap": "{form.gap.200}" + "gap": "{dimension.space.200}" }, "itemLabel": { - "fontWeight": "{fonts.fontWeight.regular}" + "fontWeight": "{typography.fontWeight.regular}" }, "itemNumber": { - "background": "{content.background}", - "size": "{form.size.500}", - "fontSize": "{fonts.fontSize.300}", - "fontWeight": "{fonts.fontWeight.bold}", - "borderRadius": "{form.borderRadius.300}", + "background": "{background.surface.raised}", + "size": "{dimension.size.500}", + "fontSize": "{typography.fontSize.300}", + "fontWeight": "{typography.fontWeight.bold}", + "borderRadius": "{dimension.radius.max}", "shadow": "none" } }, @@ -4469,410 +5266,410 @@ "shadow": "none" }, "tab": { - "background": "{transparent}", - "hoverBackground": "{transparent}", - "activeBackground": "{transparent}" + "background": "{background.transparent}", + "hoverBackground": "{background.transparent}", + "activeBackground": "{background.transparent}" } } }, "root": { - "transitionDuration": "{data.transitionDuration}" + "transitionDuration": "{dimension.duration.200}" }, "tablist": { - "borderWidth": "0 0 {data.width.100} 0", - "background": "{transparent}", - "borderColor": "{content.borderColor}" + "borderWidth": "0 0 {dimension.size.100} 0", + "background": "{background.transparent}", + "borderColor": "{border.subtle}" }, "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}", + "borderColor": "{border.subtle}", + "hoverBorderColor": "{border.subtle}", + "activeBorderColor": "{border.inverse}", + "color": "{text.muted}", + "hoverColor": "{text.default}", + "activeColor": "{text.default}", + "padding": "{dimension.space.400}", + "fontWeight": "{typography.fontWeight.demibold}", "margin": "0", - "gap": "{content.gap.200}", + "gap": "{dimension.space.200}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" } }, "tabpanel": { - "background": "{transparent}", - "color": "{text.color}", - "padding": "{spacing.4x}", + "background": "{background.transparent}", + "color": "{text.default}", + "padding": "{dimension.space.400}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" } }, "navButton": { - "background": "{content.background}", - "color": "{content.color}", - "hoverColor": "{content.hoverColor}", - "width": "{controls.iconOnly.400}", + "background": "{background.surface.raised}", + "color": "{text.default}", + "hoverColor": "{text.hover.default}", + "width": "{dimension.size.400}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" } }, "activeBar": { "height": "0.18rem", "bottom": "-0.18rem", - "background": "{content.color}" + "background": "{text.default}" } }, "toast": { "extend": { "extInfo": { - "color": "{info.500}", + "color": "{text.infoBold}", "closeButton": { - "color": "{info.500}", - "borderColor": "{info.500}" + "color": "{text.infoBold}", + "borderColor": "{border.infoBold}" }, "caption": { - "color": "{text.color}" + "color": "{text.default}" } }, "extAccentLine": { - "width": "{feedback.width.200}" + "width": "{dimension.size.150}" }, "extCloseButton": { - "width": "{feedback.width.100}" + "width": "{dimension.size.100}" }, "extSuccess": { - "color": "{success.500}", + "color": "{text.successBold}", "closeButton": { - "color": "{success.500}", - "borderColor": "{success.500}" + "color": "{text.successBold}", + "borderColor": "{border.checked}" }, "caption": { - "color": "{text.color}" + "color": "{text.default}" } }, "extWarn": { - "color": "{warn.500}", + "color": "{text.warningBold}", "closeButton": { - "color": "{warn.500}", - "borderColor": "{warn.500}" + "color": "{text.warningBold}", + "borderColor": "{border.warningBold}" }, "caption": { - "color": "{text.color}" + "color": "{text.default}" } }, "extError": { - "color": "{error.500}", + "color": "{text.dangerBold}", "closeButton": { - "color": "{error.500}", - "borderColor": "{error.500}" + "color": "{text.dangerBold}", + "borderColor": "{border.dangerBold}" }, "caption": { - "color": "{text.color}" + "color": "{text.default}" } } }, "colorScheme": { "light": { "info": { - "background": "{info.50}", - "borderColor": "{info.500}", - "color": "{text.color}", - "detailColor": "{text.color}", - "shadow": "{overlay.popover.shadow}", + "background": "{background.info.subtle}", + "borderColor": "{border.infoBold}", + "color": "{text.default}", + "detailColor": "{text.default}", + "shadow": "{shadow.400}", "closeButton": { - "hoverBackground": "{info.200}", + "hoverBackground": "{background.info.subtleActive}", "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" } } }, "success": { - "background": "{success.50}", - "borderColor": "{success.500}", - "color": "{text.color}", - "detailColor": "{text.color}", - "shadow": "{overlay.popover.shadow}", + "background": "{background.brand.subtle}", + "borderColor": "{border.checked}", + "color": "{text.default}", + "detailColor": "{text.default}", + "shadow": "{shadow.400}", "closeButton": { - "hoverBackground": "{success.200}", + "hoverBackground": "{background.success.subtleActive}", "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" } } }, "warn": { - "background": "{warn.50}", - "borderColor": "{warn.500}", - "color": "{text.color}", - "detailColor": "{text.color}", - "shadow": "{overlay.popover.shadow}", + "background": "{background.warning.subtle}", + "borderColor": "{border.warningBold}", + "color": "{text.default}", + "detailColor": "{text.default}", + "shadow": "{shadow.400}", "closeButton": { - "hoverBackground": "{warn.200}", + "hoverBackground": "{background.warning.subtleActive}", "focusRing": { - "color": "{focusRing.color}", + "color": "{background.success.subtleActive}", "shadow": "none" } } }, "error": { - "background": "{error.50}", - "borderColor": "{error.500}", - "color": "{text.color}", - "detailColor": "{text.color}", - "shadow": "{overlay.popover.shadow}", + "background": "{background.danger.subtle}", + "borderColor": "{border.dangerBold}", + "color": "{text.default}", + "detailColor": "{text.default}", + "shadow": "{shadow.400}", "closeButton": { - "hoverBackground": "{error.200}", + "hoverBackground": "{background.danger.subtleActive}", "focusRing": { - "color": "{focusRing.color}", - "shadow": "{focusRing.shadow}" + "color": "{background.success.subtleActive}", + "shadow": "{shadow.200}" } } }, "secondary": { - "shadow": "{overlay.popover.shadow}" + "shadow": "{shadow.400}" }, "contrast": { - "shadow": "{overlay.popover.shadow}" + "shadow": "{shadow.400}" } } }, "root": { - "width": "{messages.width}", - "borderWidth": "{feedback.width.100}", - "borderRadius": "{content.borderRadius}", - "transitionDuration": "{feedback.transitionDuration}" + "width": "{dimension.overlayWidth.base}", + "borderWidth": "{dimension.size.100}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}" }, "icon": { - "size": "{feedback.icon.size.500}" + "size": "{dimension.size.550}" }, "content": { - "padding": "{feedback.padding.200}", - "gap": "{feedback.gap.400}" + "padding": "{dimension.space.400}", + "gap": "{dimension.space.400}" }, "text": { - "gap": "{feedback.gap.100}" + "gap": "{dimension.space.100}" }, "summary": { - "fontWeight": "{fonts.fontWeight.bold}", - "fontSize": "{fonts.fontSize.300}" + "fontWeight": "{typography.fontWeight.bold}", + "fontSize": "{typography.fontSize.300}" }, "detail": { - "fontWeight": "{fonts.fontWeight.regular}", - "fontSize": "{fonts.fontSize.200}" + "fontWeight": "{typography.fontWeight.regular}", + "fontSize": "{typography.fontSize.200}" }, "closeButton": { - "width": "{feedback.icon.size.400}", - "height": "{feedback.icon.size.400}", - "borderRadius": "{controls.borderRadius.100}", + "width": "{dimension.size.500}", + "height": "{dimension.size.500}", + "borderRadius": "{dimension.radius.300}", "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "offset": "{focusRing.offset}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "offset": "{dimension.focusRing.offset}" } }, "closeIcon": { - "size": "{feedback.icon.size.200}" + "size": "{dimension.size.300}" } }, "tag": { "colorScheme": { "light": { "primary": { - "background": "{primary.selectedBackground}", - "color": "{text.color}" + "background": "{background.brand.bold}", + "color": "{text.default}" }, "secondary": { - "background": "{surface.200}", - "color": "{text.color}" + "background": "{background.disabled}", + "color": "{text.default}" }, "success": { - "background": "{success.400}", - "color": "{success.900}" + "background": "{background.success.border}", + "color": "{text.successStrong}" }, "info": { - "background": "{info.300}", - "color": "{info.900}" + "background": "{background.info.mutedBorder}", + "color": "{text.infoStrong}" }, "warn": { - "background": "{warn.300}", - "color": "{warn.900}" + "background": "{background.warning.mutedBorder}", + "color": "{text.warningStrong}" }, "danger": { - "background": "{error.300}", - "color": "{error.900}" + "background": "{background.danger.mutedBorder}", + "color": "{text.dangerStrong}" } } }, "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}" + "fontSize": "{typography.fontSize.100}", + "fontWeight": "{typography.fontWeight.regular}", + "padding": "{dimension.space.100} {dimension.space.200}", + "gap": "{dimension.space.100}", + "borderRadius": "{dimension.size.200}", + "roundedBorderRadius": "{dimension.radius.500}" }, "icon": { - "size": "{media.icon.size.100}" + "size": "{dimension.size.300}" } }, "textarea": { "extend": { - "readonlyBackground": "{form.readonlyBackground}", - "borderWidth": "{form.borderWidth}", - "iconSize": "{form.icon.300}", - "minHeight": "{form.size.900}", + "readonlyBackground": "{background.neutral.subtleHover}", + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": "{dimension.size.300}", + "minHeight": "{dimension.size.900}", "extXlg": { - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.500}" + "fontSize": "{typography.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}", + "background": "{background.surface.ground}", + "disabledBackground": "{background.disabled}", + "filledBackground": "{background.surface.ground}", + "filledHoverBackground": "{background.surface.ground}", + "filledFocusBackground": "{background.surface.ground}", + "borderColor": "{border.default}", + "hoverBorderColor": "{border.brand}", + "focusBorderColor": "{border.brand}", + "invalidBorderColor": "{border.danger}", + "color": "{text.defaultHover}", + "disabledColor": "{text.muted}", + "placeholderColor": "{text.muted}", + "invalidPlaceholderColor": "{text.danger}", "shadow": "0", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.300}", - "borderRadius": "{form.borderRadius.200}", - "transitionDuration": "{form.transitionDuration}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.300}", + "borderRadius": "{dimension.radius.300}", + "transitionDuration": "{dimension.duration.200}", "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", "shadow": "0" }, "sm": { - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.200}" + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.200}" }, "lg": { - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{form.padding.300}", - "paddingY": "{form.padding.400}" + "fontSize": "{typography.fontSize.300}", + "paddingX": "{dimension.space.300}", + "paddingY": "{dimension.space.400}" } } }, "tieredmenu": { "extend": { "extSubmenu": { - "borderColor": "{content.borderColor}", - "background": "{content.background}" + "borderColor": "{border.subtle}", + "background": "{background.surface.raised}" }, - "iconSize": "{navigation.submenuIcon.size}", + "iconSize": "{typography.fontSize.500}", "extItem": { "caption": { - "gap": "{content.gap.100}", - "color": "{text.mutedColor}" + "gap": "{dimension.space.100}", + "color": "{text.muted}" } } }, "root": { - "background": "{content.background}", - "borderColor": "{transparent}", - "color": "{content.color}", - "borderRadius": "{content.borderRadius}", - "shadow": "{navigation.shadow}", - "transitionDuration": "{feedback.transitionDuration}" + "background": "{background.surface.raised}", + "borderColor": "{border.transparent}", + "color": "{text.default}", + "borderRadius": "{dimension.radius.300}", + "shadow": "{shadow.400}", + "transitionDuration": "{dimension.duration.200}" }, "list": { - "padding": "{navigation.list.padding.100}", - "gap": "{navigation.list.gap}" + "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": "{background.neutral.subtleHover}", + "activeBackground": "{background.selected}", + "color": "{text.default}", + "focusColor": "{text.default}", + "activeColor": "{text.onBold}", + "padding": "{dimension.space.200} {dimension.space.300}", + "borderRadius": "{dimension.radius.200}", + "gap": "{dimension.space.200}", "icon": { - "color": "{navigation.item.icon.color}", - "focusColor": "{navigation.item.icon.focusColor}", - "activeColor": "{navigation.item.icon.activeColor}" + "color": "{icon.strong}", + "focusColor": "{icon.strong}", + "activeColor": "{icon.onBold}" } }, "submenu": { - "mobileIndent": "{overlay.popover.padding.100}" + "mobileIndent": "{dimension.space.300}" }, "separator": { - "borderColor": "{content.borderColor}" + "borderColor": "{border.subtle}" } }, "timeline": { "extend": { "extEvent": { - "gap": "{feedback.gap.100}" + "gap": "{dimension.space.100}" } }, "event": { - "minHeight": "{feedback.height.900}" + "minHeight": "{dimension.size.800}" }, "vertical": { "eventContent": { - "padding": "0 {feedback.padding.100}" + "padding": "0 {dimension.space.200}" } }, "horizontal": { "eventContent": { - "padding": "{feedback.padding.100} 0" + "padding": "{dimension.space.200} 0" } }, "eventMarker": { - "size": "{feedback.width.500}", - "borderRadius": "{content.borderRadius}", - "borderWidth": "{feedback.width.200}", - "background": "{content.background}", - "borderColor": "{primary.color}", + "size": "{dimension.size.300}", + "borderRadius": "{dimension.radius.300}", + "borderWidth": "{dimension.size.150}", + "background": "{background.surface.raised}", + "borderColor": "{border.checked}", "content": { - "borderRadius": "{content.borderRadius}", - "size": "{feedback.width.400}", - "background": "{transparent}", + "borderRadius": "{dimension.radius.300}", + "size": "{dimension.size.250}", + "background": "{background.transparent}", "insetShadow": "none" } }, "eventConnector": { - "color": "{content.borderColor}", - "size": "{feedback.width.100}" + "color": "{background.disabled}", + "size": "{dimension.size.100}" }, "colorScheme": { "light": { "eventMarker": { - "background": "{content.background}", - "borderColor": "{primary.color}" + "background": "{background.surface.raised}", + "borderColor": "{border.checked}" } }, "dark": { "eventMarker": { - "background": "{content.background}", - "borderColor": "{primary.color}" + "background": "{background.surface.raised}", + "borderColor": "{border.checked}" } } } @@ -4880,20 +5677,20 @@ "togglebutton": { "extend": { "ext": { - "gap": "{form.gap.300}" + "gap": "{dimension.space.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}", + "sm": "{dimension.size.300}", + "md": "{dimension.size.350}", + "lg": "{dimension.size.400}" + }, + "iconOnlyWidth": "{dimension.size.600}", + "hoverBorderColor": "{border.default}", + "checkedHoverColor": "{text.onBold}", + "checkedHoverBackground": "{background.surface.inverse}", + "checkedHoverBorderColor": "{border.inverse}", "extXlg": { - "padding": "{form.padding.500} {form.padding.600}", + "padding": "{dimension.space.500} {dimension.space.600}", "iconOnlyWidth": "4.0714rem" }, "extSm": { @@ -4906,51 +5703,51 @@ "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": "{background.disabled}", + "hoverBackground": "{text.disabled}", + "borderColor": "{border.subtle}", + "color": "{text.default}", + "hoverColor": "{text.default}", + "checkedBackground": "{background.selected}", + "checkedColor": "{text.onBold}", + "checkedBorderColor": "{border.strong}", + "disabledBackground": "{background.disabled}", + "disabledBorderColor": "{border.subtle}", + "disabledColor": "{text.muted}", + "invalidBorderColor": "{border.danger}" }, "icon": { - "color": "{text.color}", - "hoverColor": "{text.color}", - "checkedColor": "{text.extend.colorInverted}", - "disabledColor": "{form.disabledColor}" + "color": "{icon.strong}", + "hoverColor": "{icon.strong}", + "checkedColor": "{icon.onBold}", + "disabledColor": "{icon.subtle}" }, "content": { - "checkedBackground": "{transparent}" + "checkedBackground": "{background.transparent}" } } }, "root": { - "padding": "{form.padding.200} {form.padding.400}", - "borderRadius": "{form.borderRadius.300}", - "gap": "{form.gap.200}", - "fontWeight": "{fonts.fontWeight.demibold}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.radius.max}", + "gap": "{dimension.space.200}", + "fontWeight": "{typography.fontWeight.demibold}", "focusRing": { - "width": "{form.focusRing.width}", - "style": "{form.focusRing.style}", - "color": "{form.focusRing.color}", - "offset": "{form.focusRing.offset}", - "shadow": "{focusRing.shadow}" + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{shadow.200}" }, "sm": { - "fontSize": "{fonts.fontSize.200}", - "padding": "{form.padding.100} {form.padding.300}" + "fontSize": "{typography.fontSize.200}", + "padding": "{dimension.space.100} {dimension.space.300}" }, "lg": { - "fontSize": "{fonts.fontSize.500}", - "padding": "{form.padding.400} {form.padding.600}" + "fontSize": "{typography.fontSize.500}", + "padding": "{dimension.space.400} {dimension.space.600}" }, - "transitionDuration": "{form.transitionDuration}" + "transitionDuration": "{dimension.duration.200}" }, "content": { "checkedShadow": "none", @@ -4968,105 +5765,105 @@ "colorScheme": { "light": { "root": { - "background": "{surface.400}", - "hoverBackground": "{surface.500}", - "disabledBackground": "{form.disabledBackground}", - "checkedBackground": "{surface.900}", - "checkedHoverBackground": "{surface.800}" + "background": "{text.hover.subtle}", + "hoverBackground": "{background.neutral.bold}", + "disabledBackground": "{background.disabled}", + "checkedBackground": "{background.selected}", + "checkedHoverBackground": "{background.surface.inverse}" }, "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": "{text.staticLight}", + "hoverBackground": "{text.staticLight}", + "disabledBackground": "{background.neutral.bold}", + "checkedBackground": "{background.surface.canvas}", + "checkedHoverBackground": "{background.surface.canvas}", + "color": "{text.default}", + "hoverColor": "{text.default}", + "checkedColor": "{text.default}", + "checkedHoverColor": "{text.default}" } } }, "root": { - "width": "{form.size.600}", - "height": "{form.size.400}", - "borderRadius": "{form.borderRadius.300}", - "gap": "{form.gap.100}", - "borderWidth": "{form.borderWidth}", + "width": "{dimension.size.600}", + "height": "{dimension.size.400}", + "borderRadius": "{dimension.radius.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}", + "width": "{dimension.borderWidth.300}", + "style": "{dimension.focusRing.style}", + "color": "{background.success.subtleActive}", + "offset": "{dimension.focusRing.offset}", "shadow": "0" }, - "borderColor": "{transparent}", - "hoverBorderColor": "{transparent}", - "checkedBorderColor": "{transparent}", - "checkedHoverBorderColor": "{transparent}", - "invalidBorderColor": "{form.invalidBorderColor}", - "transitionDuration": "{form.transitionDuration}", - "slideDuration": "{form.transitionDuration}" + "borderColor": "{border.transparent}", + "hoverBorderColor": "{border.transparent}", + "checkedBorderColor": "{border.transparent}", + "checkedHoverBorderColor": "{border.transparent}", + "invalidBorderColor": "{border.danger}", + "transitionDuration": "{dimension.duration.200}", + "slideDuration": "{dimension.duration.200}" }, "handle": { - "borderRadius": "{form.borderRadius.300}", - "size": "{form.size.300}" + "borderRadius": "{dimension.radius.max}", + "size": "{dimension.size.300}" } }, "tooltip": { "colorScheme": { "light": { "root": { - "background": "{surface.900}", - "color": "{text.extend.colorInverted}" + "background": "{background.selected}", + "color": "{text.onBold}" } } }, "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.overlayWidth.base}", + "gutter": "{dimension.space.100}", + "shadow": "{shadow.400}", + "padding": "{dimension.space.200} {dimension.space.400} ", + "borderRadius": "{dimension.radius.200}" } }, "tree": { "root": { - "background": "{content.background}", - "color": "{content.color}", - "padding": "{data.padding.400}", - "gap": "{data.gap.100}", - "indent": "{data.padding.400}" + "background": "{background.surface.raised}", + "color": "{text.default}", + "padding": "{dimension.space.400}", + "gap": "{dimension.space.100}", + "indent": "{dimension.space.400}" }, "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.300}", + "color": "{text.default}", + "selectedColor": "{text.onBold}", + "gap": "{dimension.space.100}" }, "nodeIcon": { - "selectedColor": "{text.extend.colorInverted}" + "selectedColor": "{icon.onBold}" }, "nodeToggleButton": { - "borderRadius": "{data.borderRadius}", - "size": "{data.icon.size.400}", - "selectedHoverBackground": "{surface.900}" + "borderRadius": "{dimension.radius.100}", + "size": "{dimension.size.450}", + "selectedHoverBackground": "{background.selected}" }, "loadingIcon": { - "size": "{data.icon.size.100}" + "size": "{dimension.size.300}" }, "filter": { - "margin": "0 0 {data.padding.200} 0" + "margin": "0 0 {dimension.space.200} 0" } }, "overlaybadge": { "root": { "outline": { "width": "0rem", - "color": "{transparent}" + "color": "{text.transparent}" } } } } -} +} \ No newline at end of file diff --git a/src/lib/providers/prime-preset/tokens/tokens.migrated.json b/src/lib/providers/prime-preset/tokens/tokens.migrated.json deleted file mode 100644 index 6f3ad90b..00000000 --- a/src/lib/providers/prime-preset/tokens/tokens.migrated.json +++ /dev/null @@ -1,5869 +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" - }, - "size": { - "none": "0rem", - "min": "0.0714rem", - "2px": "0.1429rem", - "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", - "pill": "71.3571rem", - "max": "100%" - } - }, - "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": "{shadow.200}", - "extend": { - "invalid": "{colors.solid.red.200}", - "success": "{colors.solid.green.200}", - "warning": "{colors.solid.yellow.200}", - "info": "{colors.solid.blue.200}" - }, - "default": "{colors.solid.green.500}", - "invalid": "{colors.solid.red.200}", - "success": "{colors.solid.green.200}", - "warning": "{colors.solid.yellow.200}", - "info": "{colors.solid.blue.200}", - "help": "{colors.solid.purple.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}", - "default": "{colors.solid.zinc.900}", - "subtle": "{colors.solid.zinc.600}", - "muted": "{colors.solid.zinc.500}", - "placeholder": "{colors.solid.zinc.500}", - "disabled": "{colors.solid.zinc.300}", - "onBold": "{colors.alpha.white.1000}", - "staticDark": "{colors.solid.zinc.900}", - "staticLight": "{colors.alpha.white.1000}", - "brand": "{colors.solid.green.600}", - "link": "{colors.solid.green.600}", - "linkHover": "{colors.solid.green.700}", - "success": "{colors.solid.green.700}", - "info": "{colors.solid.blue.600}", - "warning": "{colors.solid.yellow.600}", - "danger": "{colors.solid.red.600}", - "neutral": "{colors.solid.zinc.600}", - "help": "{colors.solid.purple.600}", - "successStrong": "{colors.solid.green.900}", - "infoStrong": "{colors.solid.blue.900}", - "warningStrong": "{colors.solid.yellow.900}", - "dangerStrong": "{colors.solid.red.900}", - "helpStrong": "{colors.solid.purple.900}", - "hover": { - "default": "{colors.solid.zinc.700}", - "subtle": "{colors.solid.zinc.400}", - "muted": "{colors.solid.zinc.300}", - "brand": "{colors.solid.green.700}" - }, - "defaultHover": "{colors.solid.zinc.950}", - "neutralHover": "{colors.solid.zinc.950}", - "infoDeepest": "{colors.solid.blue.950}", - "successDeepest": "{colors.solid.green.950}", - "warningDeepest": "{colors.solid.yellow.950}", - "helpDeepest": "{colors.solid.purple.950}", - "dangerDeepest": "{colors.solid.red.950}", - "successBold": "{colors.solid.green.500}", - "infoBold": "{colors.solid.blue.500}", - "warningBold": "{colors.solid.yellow.500}", - "helpBold": "{colors.solid.purple.500}", - "dangerBold": "{colors.solid.red.500}", - "transparent": "rgba(255, 255, 255, 0.0001)" - }, - "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}" - }, - "background": { - "surface": { - "ground": "{colors.alpha.white.1000}", - "section": "{colors.solid.zinc.50}", - "raised": "{colors.alpha.white.1000}", - "overlay": "{colors.alpha.white.1000}", - "sunken": "{colors.solid.zinc.100}", - "canvas": "{colors.alpha.white.1000}", - "inverse": "{colors.solid.zinc.800}", - "inverseStrong": "{colors.solid.zinc.950}", - "hover": { - "section": "{colors.solid.zinc.100}", - "raised": "{colors.solid.zinc.100}" - } - }, - "brand": { - "subtle": "{colors.solid.green.50}", - "subtleHover": "{colors.solid.green.100}", - "bold": "{colors.solid.green.500}", - "boldHover": "{colors.solid.green.600}", - "boldActive": "{colors.solid.green.700}" - }, - "success": { - "subtle": "{colors.solid.green.50}", - "subtleHover": "{colors.solid.green.100}", - "indicator": "{colors.solid.green.400}", - "bold": "{colors.solid.green.500}", - "boldHover": "{colors.solid.green.600}", - "deep": "{colors.solid.green.900}", - "mutedBorder": "{colors.solid.green.300}", - "border": "{colors.solid.green.400}", - "subtleActive": "{colors.solid.green.200}" - }, - "info": { - "subtle": "{colors.solid.blue.50}", - "subtleHover": "{colors.solid.blue.100}", - "bold": "{colors.solid.blue.500}", - "boldHover": "{colors.solid.blue.600}", - "deep": "{colors.solid.blue.900}", - "border": "{colors.solid.blue.400}", - "mutedBorder": "{colors.solid.blue.300}", - "subtleActive": "{colors.solid.blue.200}" - }, - "warning": { - "subtle": "{colors.solid.yellow.50}", - "subtleHover": "{colors.solid.yellow.100}", - "bold": "{colors.solid.yellow.500}", - "boldHover": "{colors.solid.yellow.600}", - "deep": "{colors.solid.yellow.900}", - "border": "{colors.solid.yellow.400}", - "mutedBorder": "{colors.solid.yellow.300}", - "subtleActive": "{colors.solid.yellow.200}" - }, - "danger": { - "subtle": "{colors.solid.red.50}", - "subtleHover": "{colors.solid.red.100}", - "bold": "{colors.solid.red.500}", - "boldHover": "{colors.solid.red.600}", - "deep": "{colors.solid.red.900}", - "border": "{colors.solid.red.400}", - "mutedBorder": "{colors.solid.red.300}", - "subtleActive": "{colors.solid.red.200}" - }, - "neutral": { - "subtle": "{colors.solid.zinc.50}", - "subtleHover": "{colors.solid.zinc.100}", - "bold": "{colors.solid.zinc.500}", - "boldHover": "{colors.solid.zinc.600}" - }, - "help": { - "subtle": "{colors.solid.purple.50}", - "subtleHover": "{colors.solid.purple.100}", - "bold": "{colors.solid.purple.500}", - "boldHover": "{colors.solid.purple.600}", - "deep": "{colors.solid.purple.900}", - "mutedBorder": "{colors.solid.purple.300}", - "border": "{colors.solid.purple.400}", - "subtleActive": "{colors.solid.purple.200}" - }, - "selected": "{colors.solid.zinc.900}", - "disabled": "{colors.solid.zinc.200}", - "scrim": { - "default": "{colors.alpha.black.400}", - "modal": "{colors.alpha.black.300}" - }, - "translucent": { - "light": { - "subtle": "{colors.alpha.white.100}", - "default": "{colors.alpha.white.200}", - "strong": "{colors.alpha.white.500}" - }, - "dark": { - "default": "{colors.alpha.black.500}" - } - }, - "transparent": "rgba(255, 255, 255, 0.0001)", - "selectedStrong": "{colors.solid.zinc.700}" - }, - "border": { - "subtle": "{colors.solid.zinc.200}", - "default": "{colors.solid.zinc.300}", - "strong": "{colors.solid.zinc.900}", - "disabled": "{colors.solid.zinc.200}", - "brand": "{colors.solid.green.600}", - "success": "{colors.solid.green.400}", - "info": "{colors.solid.blue.400}", - "warning": "{colors.solid.yellow.400}", - "danger": "{colors.solid.red.400}", - "neutral": "{colors.solid.zinc.400}", - "help": "{colors.solid.purple.400}", - "inverse": "{colors.solid.zinc.800}", - "successSubtle": "{colors.solid.green.300}", - "infoSubtle": "{colors.solid.blue.300}", - "warningSubtle": "{colors.solid.yellow.300}", - "dangerSubtle": "{colors.solid.red.300}", - "helpSubtle": "{colors.solid.purple.300}", - "transparent": "rgba(255, 255, 255, 0.0001)", - "checked": "{colors.solid.green.500}", - "successSubtleActive": "{colors.solid.green.200}", - "infoBoldHover": "{colors.solid.blue.600}", - "warningBoldHover": "{colors.solid.yellow.600}", - "helpBoldHover": "{colors.solid.purple.600}", - "dangerBoldHover": "{colors.solid.red.600}", - "infoBold": "{colors.solid.blue.500}", - "warningBold": "{colors.solid.yellow.500}", - "helpBold": "{colors.solid.purple.500}", - "dangerBold": "{colors.solid.red.500}" - }, - "icon": { - "default": "{colors.solid.zinc.950}", - "subtle": "{colors.solid.zinc.500}", - "disabled": "{colors.solid.zinc.300}", - "onBold": "{colors.alpha.white.1000}", - "brand": "{colors.solid.green.600}", - "success": "{colors.solid.green.600}", - "info": "{colors.solid.blue.600}", - "warning": "{colors.solid.yellow.600}", - "danger": "{colors.solid.red.600}", - "neutral": "{colors.solid.zinc.600}", - "help": "{colors.solid.purple.600}", - "strong": "{colors.solid.zinc.900}", - "strongMuted": "{colors.solid.zinc.900}", - "strongHover": "{colors.solid.zinc.700}" - }, - "ound": { - "info": { - "border": "{colors.solid.blue.400}", - "mutedBorder": "{colors.solid.blue.300}", - "subtleActive": "{colors.solid.blue.200}", - "deep": "{colors.solid.blue.900}" - }, - "warning": { - "border": "{colors.solid.yellow.400}", - "mutedBorder": "{colors.solid.yellow.300}", - "subtleActive": "{colors.solid.yellow.200}", - "deep": "{colors.solid.yellow.900}" - }, - "danger": { - "border": "{colors.solid.red.400}", - "mutedBorder": "{colors.solid.red.300}", - "subtleActive": "{colors.solid.red.200}", - "deep": "{colors.solid.red.900}" - }, - "success": { - "mutedBorder": "{colors.solid.green.300}", - "border": "{colors.solid.green.400}", - "subtleActive": "{colors.solid.green.200}", - "deep": "{colors.solid.green.900}" - }, - "help": { - "mutedBorder": "{colors.solid.purple.300}", - "border": "{colors.solid.purple.400}", - "subtleActive": "{colors.solid.purple.200}", - "deep": "{colors.solid.purple.900}" - } - }, - "nfo": { - "deepest": "{colors.solid.blue.950}", - "bold": "{colors.solid.blue.500}" - }, - "uccess": { - "deepest": "{colors.solid.green.950}", - "bold": "{colors.solid.green.500}" - }, - "arning": { - "deepest": "{colors.solid.yellow.950}", - "bold": "{colors.solid.yellow.500}" - }, - "elp": { - "deepest": "{colors.solid.purple.950}", - "bold": "{colors.solid.purple.500}" - }, - "anger": { - "deepest": "{colors.solid.red.950}", - "bold": "{colors.solid.red.500}" - }, - "": { - "success": { - "subtleActive": "{colors.solid.green.200}" - }, - "info": { - "boldHover": "{colors.solid.blue.600}", - "bold": "{colors.solid.blue.500}" - }, - "warning": { - "boldHover": "{colors.solid.yellow.600}", - "bold": "{colors.solid.yellow.500}" - }, - "help": { - "boldHover": "{colors.solid.purple.600}", - "bold": "{colors.solid.purple.500}" - }, - "danger": { - "boldHover": "{colors.solid.red.600}", - "bold": "{colors.solid.red.500}" - } - }, - "ransparent": "rgba(255, 255, 255, 0.0001)" - }, - "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": "{shadow.200}", - "extend": { - "invalid": "{colors.solid.red.800}", - "success": "{colors.solid.green.800}", - "warning": "{colors.solid.yellow.800}", - "info": "{colors.solid.blue.800}" - }, - "default": "{colors.solid.green.500}", - "invalid": "{colors.solid.red.800}", - "success": "{colors.solid.green.800}", - "warning": "{colors.solid.yellow.800}", - "info": "{colors.solid.blue.800}", - "help": "{colors.solid.purple.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}", - "default": "{colors.alpha.white.1000}", - "subtle": "{colors.solid.zinc.400}", - "muted": "{colors.solid.zinc.500}", - "placeholder": "{colors.solid.zinc.500}", - "disabled": "{colors.solid.zinc.700}", - "onBold": "{colors.solid.zinc.900}", - "staticDark": "{colors.solid.zinc.900}", - "staticLight": "{colors.alpha.white.1000}", - "brand": "{colors.solid.green.400}", - "link": "{colors.solid.green.400}", - "linkHover": "{colors.solid.green.300}", - "success": "{colors.solid.green.400}", - "info": "{colors.solid.blue.400}", - "warning": "{colors.solid.yellow.400}", - "danger": "{colors.solid.red.400}", - "neutral": "{colors.solid.zinc.400}", - "help": "{colors.solid.purple.400}", - "successStrong": "{colors.solid.green.100}", - "infoStrong": "{colors.solid.blue.100}", - "warningStrong": "{colors.solid.yellow.100}", - "dangerStrong": "{colors.solid.red.100}", - "helpStrong": "{colors.solid.purple.100}", - "hover": { - "default": "{colors.solid.zinc.300}", - "subtle": "{colors.solid.zinc.600}", - "muted": "{colors.solid.zinc.700}", - "brand": "{colors.solid.green.300}" - }, - "defaultHover": "{colors.alpha.white.1000}", - "neutralHover": "{colors.solid.zinc.50}", - "infoDeepest": "{colors.solid.blue.50}", - "successDeepest": "{colors.solid.green.50}", - "warningDeepest": "{colors.solid.yellow.50}", - "helpDeepest": "{colors.solid.purple.50}", - "dangerDeepest": "{colors.solid.red.50}", - "successBold": "{colors.solid.green.500}", - "infoBold": "{colors.solid.blue.500}", - "warningBold": "{colors.solid.yellow.500}", - "helpBold": "{colors.solid.purple.500}", - "dangerBold": "{colors.solid.red.500}", - "transparent": "rgba(0, 0, 0, 0.0001)" - }, - "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}" - }, - "background": { - "surface": { - "ground": "{colors.solid.zinc.950}", - "section": "{colors.solid.zinc.900}", - "raised": "{colors.solid.zinc.900}", - "overlay": "{colors.solid.zinc.900}", - "sunken": "{colors.solid.zinc.950}", - "canvas": "{colors.alpha.black.1000}", - "inverse": "{colors.solid.zinc.200}", - "inverseStrong": "{colors.solid.zinc.50}", - "hover": { - "section": "{colors.solid.zinc.800}", - "raised": "{colors.solid.zinc.800}" - } - }, - "brand": { - "subtle": "{colors.solid.green.950}", - "subtleHover": "{colors.solid.green.900}", - "bold": "{colors.solid.green.500}", - "boldHover": "{colors.solid.green.400}", - "boldActive": "{colors.solid.green.300}" - }, - "success": { - "subtle": "{colors.solid.green.950}", - "subtleHover": "{colors.solid.green.900}", - "indicator": "{colors.solid.green.400}", - "bold": "{colors.solid.green.500}", - "boldHover": "{colors.solid.green.400}", - "deep": "{colors.solid.green.100}", - "mutedBorder": "{colors.solid.green.700}", - "border": "{colors.solid.green.600}", - "subtleActive": "{colors.solid.green.800}" - }, - "info": { - "subtle": "{colors.solid.blue.950}", - "subtleHover": "{colors.solid.blue.900}", - "bold": "{colors.solid.blue.500}", - "boldHover": "{colors.solid.blue.400}", - "deep": "{colors.solid.blue.100}", - "border": "{colors.solid.blue.600}", - "mutedBorder": "{colors.solid.blue.700}", - "subtleActive": "{colors.solid.blue.800}" - }, - "warning": { - "subtle": "{colors.solid.yellow.950}", - "subtleHover": "{colors.solid.yellow.900}", - "bold": "{colors.solid.yellow.500}", - "boldHover": "{colors.solid.yellow.400}", - "deep": "{colors.solid.yellow.100}", - "border": "{colors.solid.yellow.600}", - "mutedBorder": "{colors.solid.yellow.700}", - "subtleActive": "{colors.solid.yellow.800}" - }, - "danger": { - "subtle": "{colors.solid.red.950}", - "subtleHover": "{colors.solid.red.900}", - "bold": "{colors.solid.red.500}", - "boldHover": "{colors.solid.red.400}", - "deep": "{colors.solid.red.100}", - "border": "{colors.solid.red.600}", - "mutedBorder": "{colors.solid.red.700}", - "subtleActive": "{colors.solid.red.800}" - }, - "neutral": { - "subtle": "{colors.solid.zinc.950}", - "subtleHover": "{colors.solid.zinc.900}", - "bold": "{colors.solid.zinc.500}", - "boldHover": "{colors.solid.zinc.400}" - }, - "help": { - "subtle": "{colors.solid.purple.950}", - "subtleHover": "{colors.solid.purple.900}", - "bold": "{colors.solid.purple.500}", - "boldHover": "{colors.solid.purple.400}", - "deep": "{colors.solid.purple.100}", - "mutedBorder": "{colors.solid.purple.700}", - "border": "{colors.solid.purple.600}", - "subtleActive": "{colors.solid.purple.800}" - }, - "selected": "{colors.solid.zinc.100}", - "disabled": "{colors.solid.zinc.800}", - "scrim": { - "default": "{colors.alpha.black.600}", - "modal": "{colors.alpha.black.300}" - }, - "translucent": { - "light": { - "subtle": "{colors.alpha.white.100}", - "default": "{colors.alpha.white.200}", - "strong": "{colors.alpha.white.500}" - }, - "dark": { - "default": "{colors.alpha.black.500}" - } - }, - "transparent": "rgba(0, 0, 0, 0.0001)", - "selectedStrong": "{colors.solid.zinc.300}" - }, - "border": { - "subtle": "{colors.solid.zinc.800}", - "default": "{colors.solid.zinc.700}", - "strong": "{colors.solid.zinc.100}", - "disabled": "{colors.solid.zinc.800}", - "brand": "{colors.solid.green.400}", - "success": "{colors.solid.green.600}", - "info": "{colors.solid.blue.600}", - "warning": "{colors.solid.yellow.600}", - "danger": "{colors.solid.red.600}", - "neutral": "{colors.solid.zinc.600}", - "help": "{colors.solid.purple.600}", - "inverse": "{colors.solid.zinc.200}", - "successSubtle": "{colors.solid.green.700}", - "infoSubtle": "{colors.solid.blue.700}", - "warningSubtle": "{colors.solid.yellow.700}", - "dangerSubtle": "{colors.solid.red.700}", - "helpSubtle": "{colors.solid.purple.700}", - "transparent": "rgba(0, 0, 0, 0.0001)", - "checked": "{colors.solid.green.500}", - "successSubtleActive": "{colors.solid.green.800}", - "infoBoldHover": "{colors.solid.blue.400}", - "warningBoldHover": "{colors.solid.yellow.400}", - "helpBoldHover": "{colors.solid.purple.400}", - "dangerBoldHover": "{colors.solid.red.400}", - "infoBold": "{colors.solid.blue.500}", - "warningBold": "{colors.solid.yellow.500}", - "helpBold": "{colors.solid.purple.500}", - "dangerBold": "{colors.solid.red.500}" - }, - "icon": { - "default": "{colors.alpha.white.1000}", - "subtle": "{colors.solid.zinc.500}", - "disabled": "{colors.solid.zinc.700}", - "onBold": "{colors.solid.zinc.900}", - "brand": "{colors.solid.green.400}", - "success": "{colors.solid.green.400}", - "info": "{colors.solid.blue.400}", - "warning": "{colors.solid.yellow.400}", - "danger": "{colors.solid.red.400}", - "neutral": "{colors.solid.zinc.400}", - "help": "{colors.solid.purple.400}", - "strong": "{colors.alpha.white.1000}", - "strongMuted": "{colors.solid.zinc.100}", - "strongHover": "{colors.solid.zinc.300}" - }, - "ound": { - "info": { - "border": "{colors.solid.blue.600}", - "mutedBorder": "{colors.solid.blue.700}", - "subtleActive": "{colors.solid.blue.800}", - "deep": "{colors.solid.blue.100}" - }, - "warning": { - "border": "{colors.solid.yellow.600}", - "mutedBorder": "{colors.solid.yellow.700}", - "subtleActive": "{colors.solid.yellow.800}", - "deep": "{colors.solid.yellow.100}" - }, - "danger": { - "border": "{colors.solid.red.600}", - "mutedBorder": "{colors.solid.red.700}", - "subtleActive": "{colors.solid.red.800}", - "deep": "{colors.solid.red.100}" - }, - "success": { - "mutedBorder": "{colors.solid.green.700}", - "border": "{colors.solid.green.600}", - "subtleActive": "{colors.solid.green.800}", - "deep": "{colors.solid.green.100}" - }, - "help": { - "mutedBorder": "{colors.solid.purple.700}", - "border": "{colors.solid.purple.600}", - "subtleActive": "{colors.solid.purple.800}", - "deep": "{colors.solid.purple.100}" - } - }, - "nfo": { - "deepest": "{colors.solid.blue.50}", - "bold": "{colors.solid.blue.500}" - }, - "uccess": { - "deepest": "{colors.solid.green.50}", - "bold": "{colors.solid.green.500}" - }, - "arning": { - "deepest": "{colors.solid.yellow.50}", - "bold": "{colors.solid.yellow.500}" - }, - "elp": { - "deepest": "{colors.solid.purple.50}", - "bold": "{colors.solid.purple.500}" - }, - "anger": { - "deepest": "{colors.solid.red.50}", - "bold": "{colors.solid.red.500}" - }, - "": { - "success": { - "subtleActive": "{colors.solid.green.800}" - }, - "info": { - "boldHover": "{colors.solid.blue.400}", - "bold": "{colors.solid.blue.500}" - }, - "warning": { - "boldHover": "{colors.solid.yellow.400}", - "bold": "{colors.solid.yellow.500}" - }, - "help": { - "boldHover": "{colors.solid.purple.400}", - "bold": "{colors.solid.purple.500}" - }, - "danger": { - "boldHover": "{colors.solid.red.400}", - "bold": "{colors.solid.red.500}" - } - }, - "ransparent": "rgba(0, 0, 0, 0.0001)" - } - }, - "dimension": { - "space": { - "none": "{size.none}", - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.3x}", - "400": "{size.4x}", - "500": "{size.5x}", - "600": "{size.6x}", - "700": "{size.7x}", - "800": "{size.8x}", - "900": "{size.10x}" - }, - "size": { - "100": "{size.min}", - "150": "{size.1x}", - "200": "{size.2x}", - "250": "{size.3x}", - "300": "{size.4x}", - "350": "{size.5x}", - "400": "{size.6x}", - "450": "{size.7x}", - "500": "{size.8x}", - "550": "{size.9x}", - "600": "{size.10x}", - "700": "{size.12x}", - "750": "{size.14x}", - "800": "{size.16x}", - "900": "{size.20x}", - "1000": "{size.24x}" - }, - "radius": { - "none": "{size.none}", - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.3x}", - "400": "{size.4x}", - "500": "{size.6x}", - "max": "{size.pill}" - }, - "borderWidth": { - "none": "{size.none}", - "100": "{size.min}", - "200": "{size.2px}", - "300": "{size.1x}" - }, - "focusRing": { - "width": "{size.1x}", - "offset": "{size.none}", - "style": "none" - }, - "duration": { - "100": "{transition.duration.100}", - "200": "{transition.duration.200}", - "300": "{transition.duration.300}", - "400": "{transition.duration.400}", - "500": "{transition.duration.500}" - }, - "overlayWidth": { - "narrow": "{size.60x}", - "sm": "{size.80x}", - "base": "{size.100x}", - "lg": "{size.120x}", - "xlg": "{size.128x}" - } - }, - "typography": { - "fontFamily": { - "heading": "{fonts.fontFamily.heading}", - "base": "{fonts.fontFamily.base}" - }, - "fontWeight": { - "regular": "{fonts.fontWeight.regular}", - "medium": "{fonts.fontWeight.medium}", - "demibold": "{fonts.fontWeight.demibold}", - "bold": "{fonts.fontWeight.bold}" - }, - "fontSize": { - "100": "{fonts.fontSize.100}", - "200": "{fonts.fontSize.200}", - "300": "{fonts.fontSize.300}", - "400": "{fonts.fontSize.400}", - "500": "{fonts.fontSize.500}", - "600": "{fonts.fontSize.600}", - "650": "{fonts.fontSize.650}", - "700": "{fonts.fontSize.700}", - "750": "{fonts.fontSize.750}", - "800": "{fonts.fontSize.800}", - "900": "{fonts.fontSize.900}", - "1000": "{fonts.fontSize.1000}" - }, - "lineHeight": { - "100": "{fonts.lineHeight.100}", - "150": "{fonts.lineHeight.150}", - "200": "{fonts.lineHeight.200}", - "250": "{fonts.lineHeight.250}", - "300": "{fonts.lineHeight.300}", - "350": "{fonts.lineHeight.350}", - "400": "{fonts.lineHeight.400}", - "450": "{fonts.lineHeight.450}", - "500": "{fonts.lineHeight.500}", - "550": "{fonts.lineHeight.550}", - "600": "{fonts.lineHeight.600}", - "700": "{fonts.lineHeight.700}", - "800": "{fonts.lineHeight.800}", - "850": "{fonts.lineHeight.850}", - "900": "{fonts.lineHeight.900}", - "1000": "{fonts.lineHeight.1000}", - "auto": "{fonts.lineHeight.auto}" - }, - "display": { - "lg": { - "fontFamily": "{fonts.fontFamily.heading}", - "fontSize": "{fonts.fontSize.1000}", - "fontWeight": "{fonts.fontWeight.bold}", - "lineHeight": "{fonts.lineHeight.auto}" - }, - "md": { - "fontFamily": "{fonts.fontFamily.heading}", - "fontSize": "{fonts.fontSize.900}", - "fontWeight": "{fonts.fontWeight.bold}", - "lineHeight": "{fonts.lineHeight.auto}" - }, - "sm": { - "fontFamily": "{fonts.fontFamily.heading}", - "fontSize": "{fonts.fontSize.800}", - "fontWeight": "{fonts.fontWeight.bold}", - "lineHeight": "{fonts.lineHeight.auto}" - } - }, - "heading": { - "xl": { - "fontFamily": "{fonts.fontFamily.heading}", - "fontSize": "{fonts.fontSize.750}", - "fontWeight": "{fonts.fontWeight.bold}", - "lineHeight": "{fonts.lineHeight.auto}" - }, - "lg": { - "fontFamily": "{fonts.fontFamily.heading}", - "fontSize": "{fonts.fontSize.700}", - "fontWeight": "{fonts.fontWeight.demibold}", - "lineHeight": "{fonts.lineHeight.900}" - }, - "md": { - "fontFamily": "{fonts.fontFamily.heading}", - "fontSize": "{fonts.fontSize.600}", - "fontWeight": "{fonts.fontWeight.demibold}", - "lineHeight": "{fonts.lineHeight.700}" - }, - "sm": { - "fontFamily": "{fonts.fontFamily.heading}", - "fontSize": "{fonts.fontSize.500}", - "fontWeight": "{fonts.fontWeight.demibold}", - "lineHeight": "{fonts.lineHeight.600}" - } - }, - "body": { - "lg": { - "fontFamily": "{fonts.fontFamily.base}", - "fontSize": "{fonts.fontSize.400}", - "fontWeight": "{fonts.fontWeight.regular}", - "lineHeight": "{fonts.lineHeight.550}" - }, - "md": { - "fontFamily": "{fonts.fontFamily.base}", - "fontSize": "{fonts.fontSize.300}", - "fontWeight": "{fonts.fontWeight.regular}", - "lineHeight": "{fonts.lineHeight.500}" - }, - "sm": { - "fontFamily": "{fonts.fontFamily.base}", - "fontSize": "{fonts.fontSize.200}", - "fontWeight": "{fonts.fontWeight.regular}", - "lineHeight": "{fonts.lineHeight.400}" - } - }, - "label": { - "lg": { - "fontFamily": "{fonts.fontFamily.base}", - "fontSize": "{fonts.fontSize.300}", - "fontWeight": "{fonts.fontWeight.medium}", - "lineHeight": "{fonts.lineHeight.500}" - }, - "md": { - "fontFamily": "{fonts.fontFamily.base}", - "fontSize": "{fonts.fontSize.200}", - "fontWeight": "{fonts.fontWeight.medium}", - "lineHeight": "{fonts.lineHeight.400}" - }, - "sm": { - "fontFamily": "{fonts.fontFamily.base}", - "fontSize": "{fonts.fontSize.100}", - "fontWeight": "{fonts.fontWeight.medium}", - "lineHeight": "{fonts.lineHeight.300}" - } - }, - "caption": { - "fontFamily": "{fonts.fontFamily.base}", - "fontSize": "{fonts.fontSize.100}", - "fontWeight": "{fonts.fontWeight.regular}", - "lineHeight": "{fonts.lineHeight.250}" - } - }, - "shadow": { - "none": "{shadows.none}", - "100": "{shadows.100}", - "200": "{shadows.200}", - "300": "{shadows.300}", - "400": "{shadows.400}", - "500": "{shadows.500}" - } - }, - "components": { - "accordion": { - "extend": { - "extHeader": { - "iconSize": "{dimension.size.350}", - "gap": "{dimension.space.200}" - } - }, - "colorScheme": { - "light": { - "header": { - "background": "{background.transparent}", - "hoverBackground": "{background.transparent}", - "activeBackground": "{background.transparent}", - "activeHoverBackground": "{background.transparent}" - } - } - }, - "header": { - "color": "{text.default}", - "hoverColor": "{text.hover.default}", - "activeColor": "{text.default}", - "activeHoverColor": "{text.hover.default}", - "borderColor": "{border.transparent}", - "padding": "{dimension.space.400} 0 {dimension.space.400} 0", - "fontWeight": "{typography.fontWeight.bold}", - "borderRadius": "{dimension.radius.none}", - "borderWidth": "{dimension.borderWidth.none}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "inset {shadow.200}" - }, - "toggleIcon": { - "color": "{icon.strong}", - "hoverColor": "{icon.strongHover}", - "activeColor": "{icon.strong}", - "activeHoverColor": "{icon.strongHover}" - }, - "last": { - "bottomBorderRadius": "{dimension.radius.none}", - "activeBottomBorderRadius": "{dimension.radius.none}" - }, - "first": { - "borderWidth": "{dimension.borderWidth.none}", - "topBorderRadius": "{dimension.radius.none}" - } - }, - "root": { - "transitionDuration": "{dimension.duration.200}" - }, - "panel": { - "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.none}", - "borderColor": "{border.default}" - }, - "content": { - "borderWidth": "{dimension.size.100} {dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.none}", - "borderColor": "{border.transparent}", - "background": "{background.transparent}", - "color": "{text.default}", - "padding": "0 {dimension.space.600} {dimension.space.400} {dimension.space.600}" - } - }, - "autocomplete": { - "extend": { - "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}" - }, - "dropdown": { - "background": "{background.surface.ground}", - "hoverBackground": "{background.surface.ground}", - "activeBackground": "{background.surface.ground}", - "color": "{text.defaultHover}", - "hoverColor": "{text.defaultHover}", - "activeColor": "{text.defaultHover}" - } - } - }, - "root": { - "background": "{background.surface.ground}", - "disabledBackground": "{background.disabled}", - "filledBackground": "{background.surface.ground}", - "filledHoverBackground": "{background.surface.ground}", - "filledFocusBackground": "{background.surface.ground}", - "borderColor": "{border.default}", - "hoverBorderColor": "{border.brand}", - "focusBorderColor": "{border.brand}", - "invalidBorderColor": "{border.danger}", - "color": "{text.defaultHover}", - "disabledColor": "{text.muted}", - "placeholderColor": "{text.muted}", - "invalidPlaceholderColor": "{text.danger}", - "shadow": "0", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.300}", - "borderRadius": "{dimension.radius.300}", - "transitionDuration": "{dimension.duration.200}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "0" - } - }, - "overlay": { - "background": "{background.surface.raised}", - "borderColor": "{border.subtle}", - "borderRadius": "{dimension.radius.300}", - "color": "{text.default}", - "shadow": "{shadow.200}" - }, - "list": { - "padding": "{dimension.space.100}", - "gap": "{dimension.space.100}" - }, - "option": { - "focusBackground": "{background.surface.hover.section}", - "selectedBackground": "{background.selected}", - "selectedFocusBackground": "{background.selectedStrong}", - "color": "{text.default}", - "focusColor": "{text.default}", - "selectedColor": "{text.onBold}", - "selectedFocusColor": "{text.onBold}", - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "{dimension.radius.200}" - }, - "optionGroup": { - "background": "{background.surface.raised}", - "color": "{text.muted}", - "fontWeight": "{typography.fontWeight.demibold}", - "padding": "{dimension.space.200} {dimension.space.300}" - }, - "dropdown": { - "width": "{dimension.size.600}", - "borderColor": "{border.default}", - "hoverBorderColor": "{border.brand}", - "activeBorderColor": "{border.brand}", - "borderRadius": "{dimension.radius.300}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "0" - }, - "sm": { - "width": "{dimension.size.500}" - }, - "lg": { - "width": "{dimension.size.700}" - } - }, - "chip": { - "borderRadius": "{chip.root.borderRadius}" - }, - "emptyMessage": { - "padding": "{dimension.space.200} {dimension.space.300}" - } - }, - "avatar": { - "extend": { - "borderColor": "{border.default}", - "circle": { - "borderRadius": "{dimension.radius.max}" - } - }, - "root": { - "width": "{dimension.size.500}", - "height": "{dimension.size.500}", - "fontSize": "{typography.fontSize.200}", - "color": "{text.staticDark}", - "background": "{background.brand.bold}", - "borderRadius": "{dimension.radius.300}" - }, - "icon": { - "size": "{dimension.size.300}" - }, - "group": { - "borderColor": "{background.surface.raised}", - "offset": "-{dimension.space.300}" - }, - "lg": { - "width": "{dimension.size.600}", - "height": "{dimension.size.600}", - "fontSize": "{typography.fontSize.300}", - "icon": { - "size": "{dimension.size.300}" - }, - "group": { - "offset": "-{dimension.space.300}" - } - }, - "xl": { - "width": "{dimension.size.750}", - "height": "{dimension.size.750}", - "icon": { - "size": "{dimension.size.400}" - }, - "group": { - "offset": "-{dimension.space.600}" - }, - "fontSize": "{typography.fontSize.500}" - } - }, - "badge": { - "extend": { - "extDot": { - "success": { - "background": "{background.success.indicator}" - }, - "info": { - "background": "{background.info.border}" - }, - "warn": { - "background": "{background.warning.border}" - }, - "danger": { - "background": "{background.danger.border}" - }, - "lg": { - "size": "{dimension.size.250}" - }, - "xlg": { - "size": "{dimension.size.300}" - } - }, - "ext": { - "padding": "0rem" - } - }, - "colorScheme": { - "light": { - "primary": { - "color": "{text.staticDark}", - "background": "{background.brand.bold}" - }, - "secondary": { - "color": "{text.onBold}", - "background": "{background.selected}" - }, - "success": { - "color": "{text.successStrong}", - "background": "{background.success.mutedBorder}" - }, - "info": { - "color": "{text.infoStrong}", - "background": "{background.info.mutedBorder}" - }, - "warn": { - "color": "{text.warningStrong}", - "background": "{background.warning.mutedBorder}" - }, - "danger": { - "color": "{text.dangerStrong}", - "background": "{background.danger.mutedBorder}" - } - } - }, - "root": { - "borderRadius": "{dimension.size.200}", - "padding": "{dimension.space.200}", - "fontSize": "{typography.fontSize.100}", - "fontWeight": "{typography.fontWeight.regular}", - "minWidth": "{dimension.size.400}", - "height": "{dimension.size.400}" - }, - "dot": { - "size": "{dimension.size.200}" - }, - "sm": { - "fontSize": "{typography.fontSize.100}", - "minWidth": "0rem", - "height": "0rem" - }, - "lg": { - "fontSize": "{typography.fontSize.100}", - "minWidth": "{dimension.size.450}", - "height": "{dimension.size.450}" - }, - "xl": { - "fontSize": "{typography.fontSize.100}", - "minWidth": "{dimension.size.500}", - "height": "{dimension.size.500}" - } - }, - "breadcrumb": { - "extend": { - "hoverBackground": "{background.neutral.subtleHover}", - "iconSize": "{dimension.size.350}", - "extItem": { - "padding": "{dimension.space.100}" - } - }, - "root": { - "padding": "0rem", - "background": "{background.transparent}", - "gap": "0rem", - "transitionDuration": "{dimension.duration.200}" - }, - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - }, - "item": { - "color": "{text.default}", - "hoverColor": "{text.hover.default}", - "borderRadius": "{dimension.radius.100}", - "gap": "{dimension.space.200}", - "icon": { - "color": "{icon.strong}", - "hoverColor": "{icon.strongHover}" - } - }, - "separator": { - "color": "{text.default}" - } - }, - "button": { - "extend": { - "disabledBackground": "{background.disabled}", - "extOutlined": { - "danger": { - "focusBackground": "{background.transparent}" - }, - "warn": { - "focusBackground": "{background.transparent}" - }, - "info": { - "focusBackground": "{background.transparent}" - }, - "help": { - "focusBackground": "{background.transparent}" - }, - "success": { - "focusBackground": "{background.transparent}" - } - }, - "disabledColor": "{text.muted}", - "extText": { - "danger": { - "focusBackground": "{background.transparent}" - }, - "warn": { - "focusBackground": "{background.transparent}" - }, - "info": { - "focusBackground": "{background.transparent}" - }, - "help": { - "focusBackground": "{background.transparent}" - }, - "success": { - "focusBackground": "{background.transparent}" - } - }, - "extLink": { - "background": "{background.transparent}", - "colorHover": "{background.selectedStrong}", - "paddingX": "0rem", - "paddingY": "{dimension.space.100}", - "sm": { - "iconOnlyWidth": "{dimension.size.300}" - }, - "base": { - "iconOnlyWidth": "{dimension.size.400}" - }, - "lg": { - "iconOnlyWidth": "{dimension.size.450}" - }, - "xlg": { - "iconOnlyWidth": "{dimension.size.500}" - } - }, - "extSm": { - "borderRadius": "{dimension.radius.300}", - "gap": "{dimension.space.200}" - }, - "extLg": { - "borderRadius": "{dimension.radius.400}", - "gap": "{dimension.space.300}", - "height": "{dimension.size.750}" - }, - "extXlg": { - "borderRadius": "{dimension.radius.400}", - "gap": "{dimension.space.300}", - "iconOnlyWidth": "{dimension.size.800}", - "paddingX": "{dimension.space.600}", - "paddingY": "{dimension.space.500}", - "height": "{dimension.size.800}" - }, - "borderWidth": "{dimension.size.100}", - "iconSize": { - "sm": "{dimension.size.300}", - "md": "{dimension.size.350}", - "lg": "{dimension.size.400}" - } - }, - "colorScheme": { - "light": { - "root": { - "primary": { - "background": "{background.brand.bold}", - "hoverBackground": "{background.brand.boldHover}", - "activeBackground": "{background.brand.boldActive}", - "borderColor": "{border.transparent}", - "hoverBorderColor": "{border.transparent}", - "activeBorderColor": "{border.transparent}", - "color": "{text.staticDark}", - "hoverColor": "{text.staticDark}", - "activeColor": "{text.staticDark}", - "focusRing": { - "color": "{background.success.subtleActive}", - "shadow": "{shadow.200}" - } - }, - "secondary": { - "background": "{background.selected}", - "hoverBackground": "{background.surface.inverse}", - "activeBackground": "{background.selectedStrong}", - "borderColor": "{border.transparent}", - "hoverBorderColor": "{border.transparent}", - "activeBorderColor": "{border.transparent}", - "color": "{text.onBold}", - "hoverColor": "{text.onBold}", - "activeColor": "{text.onBold}", - "focusRing": { - "color": "{background.success.subtleActive}", - "shadow": "{shadow.200}" - } - }, - "contrast": { - "background": "{background.disabled}", - "hoverBackground": "{text.disabled}", - "activeBackground": "{text.hover.subtle}", - "borderColor": "{border.transparent}", - "hoverBorderColor": "{border.transparent}", - "activeBorderColor": "{border.transparent}", - "color": "{text.default}", - "hoverColor": "{text.default}", - "activeColor": "{text.default}", - "focusRing": { - "color": "{background.success.subtleActive}", - "shadow": "{shadow.200}" - } - }, - "info": { - "background": "{background.info.mutedBorder}", - "hoverBackground": "{background.info.border}", - "activeBackground": "{background.info.bold}", - "borderColor": "{border.transparent}", - "hoverBorderColor": "{border.transparent}", - "activeBorderColor": "{border.transparent}", - "color": "{text.infoStrong}", - "hoverColor": "{text.infoDeepest}", - "activeColor": "{text.infoStrong}" - }, - "success": { - "background": "{background.success.mutedBorder}", - "hoverBackground": "{background.success.border}", - "activeBackground": "{background.brand.bold}", - "borderColor": "{border.transparent}", - "hoverBorderColor": "{border.transparent}", - "activeBorderColor": "{border.transparent}", - "color": "{text.successStrong}", - "hoverColor": "{text.successDeepest}", - "activeColor": "{text.successStrong}" - }, - "warn": { - "background": "{background.warning.mutedBorder}", - "hoverBackground": "{background.warning.border}", - "activeBackground": "{background.warning.bold}", - "borderColor": "{border.transparent}", - "hoverBorderColor": "{border.transparent}", - "activeBorderColor": "{border.transparent}", - "color": "{text.warningStrong}", - "hoverColor": "{text.warningDeepest}", - "activeColor": "{text.warningStrong}" - }, - "help": { - "background": "{background.help.mutedBorder}", - "hoverBackground": "{background.help.border}", - "activeBackground": "{background.help.bold}", - "borderColor": "{border.transparent}", - "hoverBorderColor": "{border.transparent}", - "activeBorderColor": "{border.transparent}", - "color": "{text.helpStrong}", - "hoverColor": "{text.helpDeepest}", - "activeColor": "{text.helpStrong}" - }, - "danger": { - "background": "{background.danger.mutedBorder}", - "hoverBackground": "{background.danger.border}", - "activeBackground": "{background.danger.bold}", - "borderColor": "{border.transparent}", - "hoverBorderColor": "{border.transparent}", - "activeBorderColor": "{border.transparent}", - "color": "{text.dangerStrong}", - "hoverColor": "{text.dangerDeepest}", - "activeColor": "{text.dangerStrong}" - } - }, - "outlined": { - "primary": { - "hoverBackground": "{background.brand.subtle}", - "activeBackground": "{background.brand.subtleHover}", - "borderColor": "{border.successSubtleActive}", - "color": "{text.successBold}" - }, - "success": { - "hoverBackground": "{background.brand.subtleHover}", - "activeBackground": "{background.success.subtleActive}", - "borderColor": "{border.brand}", - "color": "{text.brand}" - }, - "info": { - "hoverBackground": "{background.info.subtleHover}", - "activeBackground": "{background.info.subtleActive}", - "borderColor": "{border.infoBoldHover}", - "color": "{text.info}" - }, - "warn": { - "hoverBackground": "{background.warning.subtleHover}", - "activeBackground": "{background.warning.subtleActive}", - "borderColor": "{border.warningBoldHover}", - "color": "{text.warning}" - }, - "help": { - "hoverBackground": "{background.help.subtleHover}", - "activeBackground": "{background.help.subtleActive}", - "borderColor": "{border.helpBoldHover}", - "color": "{text.help}" - }, - "danger": { - "hoverBackground": "{background.danger.subtleHover}", - "activeBackground": "{background.danger.subtleActive}", - "borderColor": "{border.dangerBoldHover}", - "color": "{text.danger}" - } - }, - "text": { - "primary": { - "hoverBackground": "{background.neutral.subtleHover}", - "activeBackground": "{background.disabled}", - "color": "{text.default}" - }, - "success": { - "hoverBackground": "{background.brand.subtleHover}", - "activeBackground": "{background.success.subtleActive}", - "color": "{text.brand}" - }, - "info": { - "hoverBackground": "{background.info.subtleHover}", - "activeBackground": "{background.info.subtleActive}", - "color": "{text.info}" - }, - "warn": { - "hoverBackground": "{background.warning.subtleHover}", - "activeBackground": "{background.warning.subtleActive}", - "color": "{text.warning}" - }, - "help": { - "hoverBackground": "{background.help.subtleHover}", - "activeBackground": "{background.help.subtleActive}", - "color": "{text.help}" - }, - "danger": { - "hoverBackground": "{background.danger.subtleHover}", - "activeBackground": "{background.danger.subtleActive}", - "color": "{text.danger}" - } - }, - "link": { - "color": "{text.default}", - "hoverColor": "{text.hover.default}", - "activeColor": "{text.muted}" - } - }, - "dark": { - "root": { - "primary": { - "background": "{background.brand.bold}", - "hoverBackground": "{background.brand.boldHover}", - "activeBackground": "{background.brand.boldActive}", - "borderColor": "{border.transparent}", - "hoverBorderColor": "{border.transparent}", - "activeBorderColor": "{border.transparent}", - "color": "{text.staticDark}", - "hoverColor": "{text.staticDark}", - "activeColor": "{text.staticDark}", - "focusRing": { - "color": "{background.success.subtleActive}", - "shadow": "{shadow.200}" - } - }, - "secondary": { - "background": "{background.disabled}", - "hoverBackground": "{text.disabled}", - "activeBackground": "{text.hover.subtle}", - "borderColor": "{border.transparent}", - "hoverBorderColor": "{border.transparent}", - "activeBorderColor": "{border.transparent}", - "color": "{text.neutralHover}", - "hoverColor": "{text.neutralHover}", - "activeColor": "{text.neutralHover}", - "focusRing": { - "color": "{background.success.subtleActive}", - "shadow": "{shadow.200}" - } - }, - "contrast": { - "background": "{background.surface.inverseStrong}", - "hoverBackground": "{background.selected}", - "activeBackground": "{background.surface.inverse}", - "borderColor": "{border.transparent}", - "hoverBorderColor": "{border.transparent}", - "activeBorderColor": "{border.transparent}", - "color": "{background.surface.canvas}", - "hoverColor": "{background.surface.canvas}", - "activeColor": "{background.surface.canvas}", - "focusRing": { - "color": "{background.success.subtleActive}", - "shadow": "{shadow.200}" - } - }, - "info": { - "background": "{background.info.bold}", - "hoverBackground": "{background.info.border}", - "activeBackground": "{background.info.mutedBorder}", - "borderColor": "{border.transparent}", - "hoverBorderColor": "{border.transparent}", - "activeBorderColor": "{border.transparent}", - "color": "{text.staticDark}", - "hoverColor": "{text.staticDark}", - "activeColor": "{text.staticDark}" - }, - "success": { - "background": "{background.brand.bold}", - "hoverBackground": "{background.success.border}", - "activeBackground": "{background.success.mutedBorder}", - "borderColor": "{border.transparent}", - "hoverBorderColor": "{border.transparent}", - "activeBorderColor": "{border.transparent}", - "color": "{text.staticDark}", - "hoverColor": "{text.staticDark}", - "activeColor": "{text.staticDark}" - }, - "warn": { - "background": "{background.warning.bold}", - "hoverBackground": "{background.warning.border}", - "activeBackground": "{background.warning.mutedBorder}", - "borderColor": "{border.transparent}", - "hoverBorderColor": "{border.transparent}", - "activeBorderColor": "{border.transparent}", - "color": "{text.staticDark}", - "hoverColor": "{text.staticDark}", - "activeColor": "{text.staticDark}" - }, - "help": { - "background": "{background.help.bold}", - "hoverBackground": "{background.help.border}", - "activeBackground": "{background.help.mutedBorder}", - "borderColor": "{border.transparent}", - "hoverBorderColor": "{border.transparent}", - "activeBorderColor": "{border.transparent}", - "color": "{text.staticDark}", - "hoverColor": "{text.staticDark}", - "activeColor": "{text.staticDark}" - }, - "danger": { - "background": "{background.danger.bold}", - "hoverBackground": "{background.danger.border}", - "activeBackground": "{background.danger.mutedBorder}", - "borderColor": "{border.transparent}", - "hoverBorderColor": "{border.transparent}", - "activeBorderColor": "{border.transparent}", - "color": "{text.staticDark}", - "hoverColor": "{text.staticDark}", - "activeColor": "{text.staticDark}" - } - }, - "outlined": { - "primary": { - "hoverBackground": "{background.brand.subtle}", - "activeBackground": "{background.brand.subtleHover}", - "borderColor": "{border.successSubtleActive}", - "color": "{text.successBold}" - }, - "success": { - "hoverBackground": "{text.successDeepest}", - "activeBackground": "{background.success.deep}", - "borderColor": "{border.checked}", - "color": "{text.successBold}" - }, - "info": { - "hoverBackground": "{text.infoDeepest}", - "activeBackground": "{background.info.deep}", - "borderColor": "{border.infoBold}", - "color": "{text.infoBold}" - }, - "warn": { - "hoverBackground": "{text.warningDeepest}", - "activeBackground": "{background.warning.deep}", - "borderColor": "{border.warningBold}", - "color": "{text.warningBold}" - }, - "help": { - "hoverBackground": "{text.helpDeepest}", - "activeBackground": "{background.help.deep}", - "borderColor": "{border.helpBold}", - "color": "{text.helpBold}" - }, - "danger": { - "hoverBackground": "{text.dangerDeepest}", - "activeBackground": "{background.danger.deep}", - "borderColor": "{border.dangerBold}", - "color": "{text.dangerBold}" - } - }, - "text": { - "primary": { - "hoverBackground": "{background.surface.inverse}", - "activeBackground": "{background.selectedStrong}", - "color": "{text.default}" - }, - "success": { - "hoverBackground": "{text.successDeepest}", - "activeBackground": "{background.success.deep}", - "color": "{text.successBold}" - }, - "info": { - "hoverBackground": "{text.infoDeepest}", - "activeBackground": "{background.info.deep}", - "color": "{text.infoBold}" - }, - "warn": { - "hoverBackground": "{text.warningDeepest}", - "activeBackground": "{background.warning.deep}", - "color": "{text.warningBold}" - }, - "help": { - "hoverBackground": "{text.helpDeepest}", - "activeBackground": "{background.help.deep}", - "color": "{text.helpBold}" - }, - "danger": { - "hoverBackground": "{text.dangerDeepest}", - "activeBackground": "{background.danger.deep}", - "color": "{text.dangerBold}" - } - }, - "link": { - "color": "{text.default}", - "hoverColor": "{text.hover.default}", - "activeColor": "{text.muted}" - } - } - }, - "root": { - "borderRadius": "{dimension.radius.300}", - "roundedBorderRadius": "{dimension.radius.max}", - "gap": "{dimension.space.200}", - "fontSize": "{typography.fontSize.200}", - "paddingX": "{dimension.space.400}", - "paddingY": "{dimension.space.200}", - "iconOnlyWidth": "{dimension.size.600}", - "raisedShadow": "none", - "badgeSize": "{dimension.size.300}", - "transitionDuration": "{dimension.duration.200}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "offset": "{dimension.focusRing.offset}" - }, - "sm": { - "fontSize": "{typography.fontSize.200}", - "iconOnlyWidth": "{dimension.size.500}", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.200}" - }, - "lg": { - "fontSize": "{typography.fontSize.500}", - "iconOnlyWidth": "{dimension.size.750}", - "paddingX": "{dimension.space.600}", - "paddingY": "{dimension.space.400}" - }, - "label": { - "fontWeight": "{typography.fontWeight.demibold}" - } - } - }, - "card": { - "extend": { - "borderColor": "{border.subtle}", - "borderWidth": "{dimension.size.100}" - }, - "root": { - "background": "{background.surface.raised}", - "borderRadius": "{dimension.space.400}", - "color": "{text.default}" - }, - "body": { - "padding": "{dimension.space.400}", - "gap": "{dimension.space.400}" - }, - "caption": { - "gap": "{dimension.space.100}" - }, - "title": { - "fontSize": "{typography.fontSize.400}", - "fontWeight": "{typography.fontWeight.demibold}" - }, - "subtitle": { - "color": "{text.muted}" - } - }, - "carousel": { - "colorScheme": { - "light": { - "indicator": { - "background": "{text.disabled}", - "hoverBackground": "{text.hover.subtle}", - "activeBackground": "{background.selected}" - } - } - }, - "root": { - "transitionDuration": "{dimension.duration.200}" - }, - "content": { - "gap": "{dimension.space.200}" - }, - "indicatorList": { - "padding": "{dimension.space.400}", - "gap": "{dimension.space.200}" - }, - "indicator": { - "width": "{dimension.size.200}", - "height": "{dimension.size.200}", - "borderRadius": "{dimension.radius.500}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - } - }, - "checkbox": { - "root": { - "borderRadius": "{dimension.radius.200}", - "extend": { - "borderWidth": "{dimension.borderWidth.100}" - }, - "width": "{dimension.size.400}", - "height": "{dimension.size.400}", - "background": "{background.surface.ground}", - "checkedBackground": "{background.selected}", - "checkedHoverBackground": "{background.surface.inverse}", - "disabledBackground": "{background.disabled}", - "filledBackground": "{background.surface.ground}", - "borderColor": "{border.default}", - "hoverBorderColor": "{border.strong}", - "focusBorderColor": "{border.strong}", - "checkedBorderColor": "{border.strong}", - "checkedHoverBorderColor": "{border.inverse}", - "checkedFocusBorderColor": "{border.checked}", - "checkedDisabledBorderColor": "{border.default}", - "invalidBorderColor": "{border.danger}", - "shadow": "0", - "focusRing": { - "focusRing": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - }, - "sm": { - "width": "{dimension.size.200}", - "height": "{dimension.size.200}" - }, - "lg": { - "width": "{dimension.size.350}", - "height": "{dimension.size.350}" - }, - "transitionDuration": "{dimension.duration.200}" - }, - "icon": { - "size": "{dimension.size.300}", - "color": "{icon.default}", - "checkedColor": "{icon.onBold}", - "checkedHoverColor": "{icon.onBold}", - "disabledColor": "{icon.subtle}", - "sm": { - "size": "{dimension.size.250}" - }, - "lg": { - "size": "{dimension.size.350}" - } - } - }, - "chip": { - "extend": { - "borderColor": "{border.transparent}", - "borderWidth": "{dimension.size.100}" - }, - "root": { - "borderRadius": "{dimension.radius.200}", - "paddingX": "{dimension.space.200}", - "paddingY": "{dimension.space.100}", - "gap": "{dimension.space.200}", - "transitionDuration": "{dimension.duration.200}" - }, - "colorScheme": { - "light": { - "root": { - "background": "{background.disabled}", - "color": "{text.default}" - }, - "icon": { - "color": "{icon.strong}" - }, - "removeIcon": { - "color": "{icon.strong}" - } - } - }, - "image": { - "width": "0rem", - "height": "0rem" - }, - "icon": { - "size": "{dimension.size.300}" - }, - "removeIcon": { - "size": "{dimension.size.300}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - } - }, - "confirmdialog": { - "extend": { - "extIcon": { - "success": "{background.brand.bold}", - "info": "{background.info.bold}", - "help": "{background.help.bold}", - "warn": "{background.warning.bold}", - "danger": "{background.danger.bold}" - } - }, - "icon": { - "size": "{dimension.size.400}", - "color": "{icon.strong}" - }, - "content": { - "gap": "0rem" - } - }, - "confirmpopup": { - "root": { - "background": "{background.surface.raised}", - "color": "{text.default}", - "shadow": "{shadow.400}", - "gutter": "{dimension.space.300}", - "arrowOffset": "{dimension.space.500}" - }, - "content": { - "padding": "{dimension.space.300}", - "gap": "{dimension.space.400}" - }, - "icon": { - "size": "{dimension.size.400}", - "color": "{icon.strong}" - }, - "footer": { - "gap": "{dimension.space.200}", - "padding": "0 {dimension.space.300} {dimension.space.500} {dimension.space.300} {dimension.space.500} {dimension.space.300} {dimension.space.500}" - } - }, - "contextmenu": { - "root": { - "background": "{background.surface.raised}", - "color": "{text.default}", - "shadow": "{shadow.400}" - }, - "list": { - "padding": "{dimension.space.100} 0", - "gap": "{dimension.space.100}" - }, - "item": { - "padding": "{dimension.space.200} {dimension.space.300}", - "gap": "{dimension.space.200}" - }, - "submenu": { - "mobileIndent": "{dimension.space.500}" - } - }, - "datatable": { - "colorScheme": { - "light": { - "root": { - "color": "{text.default}", - "borderColor": "{border.subtle}" - }, - "header": { - "background": "{background.neutral.subtle}", - "color": "{text.default}" - }, - "headerCell": { - "background": "{background.neutral.subtle}", - "hoverBackground": "{background.neutral.subtleHover}", - "color": "{text.default}" - }, - "footer": { - "background": "{background.neutral.subtleHover}", - "color": "{text.default}" - }, - "footerCell": { - "background": "{background.surface.hover.section}", - "color": "{text.default}" - }, - "row": { - "stripedBackground": "{background.surface.hover.section}" - }, - "bodyCell": { - "selectedBorderColor": "{border.subtle}" - } - } - }, - "extended": { - "extHeaderCell": { - "selectedHoverBackground": "{background.surface.inverse}" - }, - "extRow": { - "selectedHoverBackground": "{background.surface.inverse}", - "stripedHoverBackground": "{background.neutral.subtleHover}" - } - }, - "root": { - "transitionDuration": "{dimension.duration.200}" - }, - "header": { - "borderColor": "{border.subtle}", - "borderWidth": "{dimension.size.100} 0 {dimension.size.100} 0", - "padding": "{dimension.space.400}", - "sm": { - "padding": "{dimension.space.200}" - }, - "lg": { - "padding": "{dimension.space.500}" - } - }, - "headerCell": { - "selectedBackground": "{background.selected}", - "borderColor": "{border.subtle}", - "hoverColor": "{text.onBold}", - "selectedColor": "{text.onBold}", - "gap": "{dimension.space.200}", - "padding": "{dimension.space.400}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "inset {shadow.200}" - }, - "sm": { - "padding": "{dimension.space.200}" - }, - "lg": { - "padding": "{dimension.space.500}" - } - }, - "columnTitle": { - "fontWeight": "{typography.fontWeight.bold}" - }, - "row": { - "background": "{background.surface.raised}", - "hoverBackground": "{background.surface.hover.section}", - "selectedBackground": "{background.selected}", - "color": "{text.default}", - "hoverColor": "{text.hover.default}", - "selectedColor": "{text.onBold}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "inset {shadow.200}" - } - }, - "bodyCell": { - "borderColor": "{border.subtle}", - "padding": "{dimension.space.400}", - "sm": { - "padding": "{dimension.space.200}" - }, - "lg": { - "padding": "{dimension.space.500}" - } - }, - "footerCell": { - "borderColor": "{border.subtle}", - "padding": "{dimension.space.400}", - "sm": { - "padding": "{dimension.space.200}" - }, - "lg": { - "padding": "{dimension.space.500}" - } - }, - "columnFooter": { - "fontWeight": "{typography.fontWeight.bold}" - }, - "dropPoint": { - "color": "{background.selected}" - }, - "footer": { - "borderColor": "{border.subtle}", - "borderWidth": "0 0 {dimension.size.100} 0", - "padding": "{dimension.space.400}", - "sm": { - "padding": "{dimension.space.200}" - }, - "lg": { - "padding": "{dimension.space.500}" - } - }, - "columnResizer": { - "width": "{dimension.size.200}" - }, - "resizeIndicator": { - "width": "{dimension.size.100}", - "color": "{background.selected}" - }, - "sortIcon": { - "color": "{icon.strong}", - "hoverColor": "{icon.strongHover}", - "size": "{dimension.size.300}" - }, - "loadingIcon": { - "size": "{dimension.size.500}" - }, - "rowToggleButton": { - "hoverBackground": "{background.surface.hover.section}", - "selectedHoverBackground": "{background.surface.hover.section}", - "color": "{text.default}", - "hoverColor": "{text.default}", - "selectedHoverColor": "{text.default}", - "size": "{dimension.size.500}", - "borderRadius": "{dimension.radius.300}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - }, - "filter": { - "inlineGap": "{dimension.space.200}", - "rule": { - "borderColor": "{border.subtle}" - }, - "constraintList": { - "padding": "{dimension.space.100}", - "gap": "{dimension.space.100}" - }, - "constraint": { - "focusBackground": "{background.surface.hover.section}", - "selectedBackground": "{background.selected}", - "selectedFocusBackground": "{background.selectedStrong}", - "color": "{text.default}", - "focusColor": "{text.default}", - "selectedColor": "{text.onBold}", - "selectedFocusColor": "{text.onBold}", - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "{dimension.radius.200}", - "separator": { - "borderColor": "{border.subtle}" - } - }, - "overlaySelect": { - "background": "{background.surface.raised}", - "color": "{text.default}", - "borderColor": "{border.subtle}", - "borderRadius": "{dimension.radius.300}", - "shadow": "{shadow.400}" - }, - "overlayPopover": { - "background": "{background.surface.raised}", - "color": "{text.default}", - "borderColor": "{border.subtle}", - "borderRadius": "{dimension.radius.300}", - "shadow": "{shadow.400}", - "padding": "{dimension.space.300}", - "gap": "{dimension.space.100}" - } - }, - "paginatorTop": { - "borderColor": "{border.default}", - "borderWidth": "0 0 {dimension.size.100} 0" - }, - "paginatorBottom": { - "borderWidth": "0 0 {dimension.size.100} 0", - "borderColor": "{border.subtle}" - } - }, - "dataview": { - "root": { - "borderWidth": "{dimension.size.100}", - "borderRadius": "{dimension.radius.100}", - "padding": "0rem", - "borderColor": "{border.subtle}" - }, - "header": { - "borderWidth": "0 0 {dimension.size.100} 0", - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "0 0 0 0", - "color": "{text.default}" - }, - "content": { - "background": "{background.surface.raised}", - "color": "{text.default}", - "borderColor": "{border.subtle}", - "borderWidth": "0rem", - "padding": "0rem", - "borderRadius": "0" - }, - "footer": { - "background": "{background.neutral.subtleHover}", - "color": "{text.default}", - "borderWidth": "{dimension.size.100} 0 0 0", - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "0 0 0 0" - }, - "paginatorTop": { - "borderWidth": "0 0 {dimension.size.100} 0" - }, - "paginatorBottom": { - "borderWidth": "{dimension.size.100} 0 0 0" - } - }, - "datepicker": { - "extend": { - "extDate": { - "selectedHoverBackground": "{background.surface.inverse}" - }, - "extToday": { - "hoverBackground": "{background.surface.hover.section}", - "borderColor": "{border.inverse}" - }, - "extTitle": { - "width": "{dimension.overlayWidth.narrow}" - }, - "extTimePicker": { - "minWidth": "{dimension.size.700}", - "color": "{text.default}" - }, - "extSelectYear": { - "minWidth": "{dimension.size.1000}" - } - }, - "colorScheme": { - "light": { - "dropdown": { - "background": "{background.surface.raised}", - "hoverBackground": "{background.neutral.subtleHover}", - "activeBackground": "{background.selected}", - "color": "{text.default}", - "hoverColor": "{text.default}", - "activeColor": "{text.onBold}" - }, - "today": { - "background": "{background.transparent}", - "color": "{text.staticDark}" - } - } - }, - "panel": { - "background": "{background.surface.raised}", - "borderColor": "{border.subtle}", - "color": "{text.default}", - "borderRadius": "{dimension.radius.300}", - "shadow": "{shadow.400}", - "padding": "0rem" - }, - "header": { - "background": "{background.surface.raised}", - "borderColor": "{border.subtle}", - "color": "{text.default}", - "padding": "{dimension.space.300}" - }, - "title": { - "gap": "{dimension.space.200}", - "fontWeight": "{typography.fontWeight.bold}" - }, - "selectMonth": { - "hoverBackground": "{background.surface.hover.section}", - "color": "{text.default}", - "hoverColor": "{text.hover.default}", - "borderRadius": "{dimension.radius.300}", - "padding": "{dimension.space.200}" - }, - "inputIcon": { - "color": "{icon.subtle}" - }, - "dropdown": { - "width": "{dimension.size.600}", - "borderColor": "{border.default}", - "hoverBorderColor": "{border.default}", - "activeBorderColor": "{border.default}", - "borderRadius": "{dimension.radius.300}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - }, - "sm": { - "width": "0rem" - }, - "lg": { - "width": "0rem" - } - }, - "group": { - "borderColor": "{border.subtle}", - "gap": "{dimension.space.300}" - }, - "selectYear": { - "hoverBackground": "{background.surface.hover.section}", - "color": "{text.default}", - "hoverColor": "{text.hover.default}", - "borderRadius": "{dimension.radius.300}", - "padding": "{dimension.space.100}" - }, - "dayView": { - "margin": "{dimension.space.300}" - }, - "weekDay": { - "padding": "{dimension.space.100}", - "fontWeight": "{typography.fontWeight.bold}", - "color": "{text.default}" - }, - "date": { - "hoverBackground": "{background.surface.hover.section}", - "selectedBackground": "{background.selected}", - "rangeSelectedBackground": "{background.surface.hover.section}", - "color": "{text.default}", - "hoverColor": "{text.default}", - "selectedColor": "{text.onBold}", - "rangeSelectedColor": "{text.default}", - "width": "{dimension.size.500}", - "height": "{dimension.size.500}", - "borderRadius": "{dimension.radius.200}", - "padding": "{dimension.space.100}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - }, - "monthView": { - "margin": "0 0 0 0" - }, - "month": { - "padding": "0", - "borderRadius": "0rem" - }, - "yearView": { - "margin": "0 0 0 0" - }, - "year": { - "padding": "0", - "borderRadius": "0rem" - }, - "buttonbar": { - "padding": "{dimension.space.300}", - "borderColor": "{border.subtle}" - }, - "timePicker": { - "padding": "{dimension.space.300}", - "borderColor": "{border.subtle}", - "gap": "{dimension.space.200}", - "buttonGap": "{dimension.space.100}" - }, - "root": { - "transitionDuration": "{dimension.duration.200}" - } - }, - "dialog": { - "extend": { - "borderWidth": "{dimension.borderWidth.100}", - "backdrop": "{background.scrim.modal}" - }, - "root": { - "background": "{background.surface.raised}", - "borderColor": "{border.subtle}", - "color": "{text.default}", - "borderRadius": "{dimension.radius.500}", - "shadow": "{shadow.400}" - }, - "header": { - "padding": "{dimension.space.600} {dimension.space.600} 1rem {dimension.space.600}", - "gap": "{dimension.space.200}" - }, - "title": { - "fontSize": "{typography.fontSize.500}", - "fontWeight": "{typography.fontWeight.demibold}" - }, - "content": { - "padding": "{dimension.space.600}" - }, - "footer": { - "padding": "0 {dimension.space.600} {dimension.space.600} {dimension.space.600}", - "gap": "{dimension.space.200}" - } - }, - "divider": { - "colorScheme": { - "light": { - "content": { - "background": "{background.surface.raised}", - "color": "{text.muted}" - }, - "borderColor": "{border.subtle}" - } - }, - "extend": { - "content": { - "gap": "{dimension.space.200}" - }, - "iconSize": "{dimension.size.300}" - }, - "horizontal": { - "margin": "{dimension.space.400} 0", - "padding": "0 {dimension.space.400}", - "content": { - "padding": "0 {dimension.space.200}" - } - }, - "vertical": { - "margin": "0 {dimension.space.400}", - "padding": "{dimension.space.400} 0", - "content": { - "padding": "{dimension.space.200} 0" - } - } - }, - "drawer": { - "extend": { - "borderRadius": "{dimension.radius.200}", - "borderWidth": "{dimension.borderWidth.100}", - "width": "{dimension.overlayWidth.base}", - "extHeader": { - "gap": "{dimension.space.200}", - "borderColor": "{drawer.root.borderColor}" - }, - "padding": "{dimension.space.200}", - "scale": "0.125rem", - "backdrop": "{background.scrim.modal}" - }, - "root": { - "background": "{background.surface.raised}", - "borderColor": "{border.subtle}", - "color": "{text.default}", - "shadow": "{shadow.200}", - "width": "{dimension.overlayWidth.base}" - }, - "sm": { - "width": "{dimension.overlayWidth.sm}" - }, - "lg": { - "width": "{dimension.overlayWidth.lg}" - }, - "xlg": { - "width": "{dimension.overlayWidth.xlg}" - }, - "header": { - "padding": "{dimension.space.600} {dimension.space.600} {dimension.space.500} {dimension.space.600} " - }, - "title": { - "fontSize": "{typography.fontSize.500}", - "fontWeight": "{typography.fontWeight.demibold}" - }, - "content": { - "padding": "{dimension.space.600}" - }, - "footer": { - "padding": "0 {dimension.space.600} {dimension.space.600} {dimension.space.600} " - } - }, - "fileupload": { - "extend": { - "extDragNdrop": { - "background": "{background.surface.canvas}", - "borderRadius": "{dimension.radius.300}", - "iconSize": "{dimension.size.500}", - "padding": "{dimension.space.400}", - "info": { - "gap": "{dimension.space.100}" - } - }, - "extFile": { - "iconSize": "{dimension.size.350}" - }, - "extContent": { - "borderRadius": "{dimension.radius.300}", - "highlightBorderDefault": "{text.disabled}" - } - }, - "colorScheme": { - "light": { - "header": { - "background": "{background.surface.canvas}", - "color": "{text.default}" - } - } - }, - "root": { - "background": "{background.surface.raised}", - "borderColor": "{border.subtle}", - "color": "{text.default}", - "borderRadius": "{dimension.radius.300}", - "transitionDuration": "{dimension.duration.200}" - }, - "header": { - "borderColor": "{border.subtle}", - "borderWidth": "0rem", - "padding": "0rem", - "borderRadius": "0rem", - "gap": "{dimension.space.200}" - }, - "content": { - "highlightBorderColor": "{border.strong}", - "padding": "0rem", - "gap": "{dimension.space.200}" - }, - "file": { - "padding": "{dimension.space.200}", - "gap": "{dimension.space.200}", - "borderColor": "{border.default}", - "info": { - "gap": "{dimension.space.100}" - } - }, - "fileList": { - "gap": "{dimension.space.200}" - }, - "progressbar": { - "height": "{dimension.size.200}" - }, - "basic": { - "gap": "{dimension.space.200}" - } - }, - "floatlabel": { - "extend": { - "height": "{dimension.size.800}", - "iconSize": "{dimension.size.350}" - }, - "root": { - "color": "{text.muted}", - "focusColor": "{text.muted}", - "activeColor": "{text.muted}", - "invalidColor": "{text.danger}", - "transitionDuration": "{dimension.duration.200}", - "positionX": "{dimension.space.300}", - "positionY": "{dimension.space.300}", - "fontWeight": "{typography.fontWeight.regular}", - "active": { - "fontSize": "{typography.fontSize.100}", - "fontWeight": "{typography.fontWeight.regular}" - } - }, - "over": { - "active": { - "top": "{dimension.space.400}" - } - }, - "in": { - "input": { - "paddingTop": "{dimension.space.700}", - "paddingBottom": "{dimension.space.300}" - }, - "active": { - "top": "{dimension.space.300}" - } - }, - "on": { - "borderRadius": "0rem", - "active": { - "padding": "0 {dimension.space.100}", - "background": "{background.surface.ground}" - } - } - }, - "galleria": { - "extend": { - "backdrop": "{background.scrim.modal}" - }, - "colorScheme": { - "light": { - "thumbnailContent": { - "background": "{background.neutral.subtleHover}" - }, - "thumbnailNavButton": { - "hoverBackground": "{background.translucent.light.default}", - "color": "{text.default}", - "hoverColor": "{text.hover.default}" - }, - "indicatorButton": { - "background": "{text.disabled}", - "hoverBackground": "{text.hover.subtle}" - } - } - }, - "root": { - "borderWidth": "{dimension.size.100}", - "borderColor": "{border.subtle}", - "borderRadius": "{dimension.radius.300}", - "transitionDuration": "{dimension.duration.200}" - }, - "navButton": { - "background": "{background.transparent}", - "hoverBackground": "{background.translucent.light.default}", - "color": "{text.onBold}", - "hoverColor": "{text.onBold}", - "size": "{dimension.size.800}", - "gutter": "{dimension.space.200}", - "prev": { - "borderRadius": "{dimension.radius.200}" - }, - "next": { - "borderRadius": "{dimension.radius.200}" - }, - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - }, - "navIcon": { - "size": "{dimension.size.500}" - }, - "thumbnailsContent": { - "padding": "{dimension.space.100}" - }, - "thumbnailNavButton": { - "size": "{dimension.size.500}", - "borderRadius": "{dimension.radius.300}", - "gutter": "{dimension.space.200}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - }, - "thumbnailNavButtonIcon": { - "size": "{dimension.size.300}" - }, - "caption": { - "background": "{background.translucent.light.strong}", - "color": "{text.default}", - "padding": "{dimension.space.200}" - }, - "indicatorList": { - "gap": "{dimension.space.200}", - "padding": "{dimension.space.400}" - }, - "indicatorButton": { - "width": "{dimension.size.200}", - "height": "{dimension.size.200}", - "activeBackground": "{background.selected}", - "borderRadius": "{dimension.radius.300}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - }, - "insetIndicatorList": { - "background": "{background.translucent.dark.default}" - }, - "insetIndicatorButton": { - "background": "{background.translucent.light.subtle}", - "hoverBackground": "{background.translucent.light.default}", - "activeBackground": "{background.translucent.light.strong}" - }, - "closeButton": { - "size": "{dimension.size.800}", - "gutter": "{dimension.space.200}", - "background": "{background.translucent.light.subtle}", - "hoverBackground": "{background.translucent.light.default}", - "color": "{text.onBold}", - "hoverColor": "{text.onBold}", - "borderRadius": "{dimension.radius.400}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - }, - "closeButtonIcon": { - "size": "{dimension.size.500}" - } - }, - "inputgroup": { - "extend": { - "borderWidth": "{dimension.borderWidth.100}", - "iconSize": "{dimension.size.300}" - }, - "colorScheme": { - "light": { - "addon": { - "background": "{background.surface.ground}", - "borderColor": "{border.default}", - "color": "{text.muted}" - } - } - }, - "addon": { - "borderRadius": "{dimension.radius.300}", - "padding": "{dimension.space.300}", - "minWidth": "{dimension.size.600}" - } - }, - "inputnumber": { - "extend": { - "borderWidth": "{dimension.borderWidth.100}", - "extButton": { - "height": "{dimension.size.600}", - "iconSize": "{dimension.size.300}" - } - }, - "colorScheme": { - "light": { - "button": { - "background": "{background.surface.raised}", - "hoverBackground": "{background.surface.hover.section}", - "activeBackground": "{background.transparent}", - "borderColor": "{border.default}", - "hoverBorderColor": "{border.default}", - "activeBorderColor": "{border.default}", - "color": "{text.default}", - "hoverColor": "{text.hover.default}", - "activeColor": "{text.default}" - } - } - }, - "transitionDuration": { - "transitionDuration": "{dimension.duration.200}" - }, - "button": { - "width": "{dimension.size.600}", - "borderRadius": "{dimension.radius.300}", - "verticalPadding": "{dimension.space.300}" - } - }, - "inputotp": { - "extend": { - "height": "{dimension.size.600}", - "borderWidth": "{dimension.borderWidth.100}" - }, - "root": { - "gap": "{dimension.space.200}" - }, - "input": { - "width": "{dimension.size.700}" - }, - "sm": { - "width": "0rem" - }, - "lg": { - "width": "0rem" - } - }, - "inputtext": { - "extend": { - "readonlyBackground": "{background.neutral.subtleHover}", - "iconSize": "{dimension.size.300}", - "borderWidth": "{dimension.borderWidth.100}", - "extXlg": { - "fontSize": "{typography.fontSize.300}", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.600}" - } - }, - "root": { - "background": "{background.surface.ground}", - "disabledBackground": "{background.disabled}", - "filledBackground": "{background.surface.ground}", - "filledHoverBackground": "{background.surface.ground}", - "filledFocusBackground": "{background.surface.ground}", - "borderColor": "{border.default}", - "hoverBorderColor": "{border.brand}", - "focusBorderColor": "{border.brand}", - "invalidBorderColor": "{border.danger}", - "color": "{text.default}", - "disabledColor": "{text.muted}", - "placeholderColor": "{text.muted}", - "invalidPlaceholderColor": "{text.danger}", - "shadow": "0", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.300}", - "borderRadius": "{dimension.radius.300}", - "transitionDuration": "{dimension.duration.200}", - "sm": { - "fontSize": "{typography.fontSize.300}", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.200}" - }, - "lg": { - "fontSize": "{typography.fontSize.300}", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.400}" - }, - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "0" - } - } - }, - "listbox": { - "extend": { - "extOption": { - "label": { - "gap": "{dimension.space.100}" - }, - "caption": { - "color": "{text.muted}", - "stripedColor": "{text.muted}" - }, - "gap": "{dimension.space.200}" - } - }, - "colorScheme": { - "light": { - "option": { - "stripedBackground": "{background.neutral.subtle}" - } - } - }, - "root": { - "background": "{background.surface.ground}", - "disabledBackground": "{background.disabled}", - "borderColor": "{border.default}", - "invalidBorderColor": "{border.danger}", - "color": "{text.defaultHover}", - "disabledColor": "{text.muted}", - "shadow": "0", - "borderRadius": "{dimension.radius.300}", - "transitionDuration": "{dimension.duration.200}" - }, - "list": { - "padding": "{dimension.space.100}", - "gap": "{dimension.space.100}", - "header": { - "padding": "{dimension.space.400} {dimension.space.400} 0 {dimension.space.400}" - } - }, - "option": { - "focusBackground": "{background.surface.hover.section}", - "selectedBackground": "{background.selected}", - "selectedFocusBackground": "{background.selectedStrong}", - "color": "{text.default}", - "focusColor": "{text.default}", - "selectedColor": "{text.onBold}", - "selectedFocusColor": "{text.onBold}", - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "{dimension.radius.200}" - }, - "optionGroup": { - "background": "{background.surface.raised}", - "color": "{text.muted}", - "fontWeight": "{typography.fontWeight.regular}", - "padding": "{dimension.space.200} {dimension.space.300}" - }, - "checkmark": { - "color": "{text.default}", - "gutterStart": "-{dimension.space.200}", - "gutterEnd": "{dimension.space.200}" - }, - "emptyMessage": { - "padding": "{dimension.space.200} {dimension.space.300}" - } - }, - "megamenu": { - "extend": { - "extItem": { - "caption": { - "color": "{text.muted}", - "gap": "{dimension.space.100}" - } - }, - "iconSize": "{typography.fontSize.500}" - }, - "colorScheme": { - "light": { - "root": { - "background": "{background.transparent}" - } - } - }, - "root": { - "borderColor": "{border.transparent}", - "borderRadius": "{dimension.radius.300}", - "color": "{text.default}", - "gap": "{dimension.space.100}", - "transitionDuration": "{dimension.duration.200}", - "verticalOrientation": { - "padding": "{dimension.space.100}", - "gap": "{dimension.space.100}" - }, - "horizontalOrientation": { - "padding": "{dimension.space.100}", - "gap": "{dimension.space.100}" - } - }, - "baseItem": { - "borderRadius": "{dimension.radius.300}", - "padding": "{dimension.space.200} {dimension.space.300}" - }, - "item": { - "focusBackground": "{background.neutral.subtleHover}", - "activeBackground": "{background.selected}", - "color": "{text.default}", - "focusColor": "{text.default}", - "activeColor": "{text.onBold}", - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "{dimension.radius.200}", - "gap": "{dimension.space.200}", - "icon": { - "color": "{icon.strong}", - "focusColor": "{icon.strong}", - "activeColor": "{icon.onBold}" - } - }, - "overlay": { - "padding": "{dimension.space.100}", - "background": "{background.surface.raised}", - "borderColor": "{border.subtle}", - "borderRadius": "{dimension.radius.300}", - "color": "{text.default}", - "shadow": "{shadow.400}", - "gap": "0rem" - }, - "submenu": { - "padding": "{dimension.space.100}", - "gap": "{dimension.space.100}" - }, - "submenuLabel": { - "fontWeight": "{typography.fontWeight.regular}", - "padding": "{dimension.space.200} {dimension.space.300}", - "background": "{background.transparent}", - "color": "{text.muted}" - }, - "submenuIcon": { - "size": "{typography.fontSize.500}", - "color": "{icon.strongMuted}", - "focusColor": "{icon.strongMuted}", - "activeColor": "{icon.onBold}" - }, - "separator": { - "borderColor": "{border.subtle}" - }, - "mobileButton": { - "borderRadius": "{dimension.radius.200}", - "size": "{dimension.size.500}", - "color": "{text.default}", - "hoverColor": "{text.hover.default}", - "hoverBackground": "{background.surface.hover.section}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - } - }, - "menu": { - "extend": { - "paddingX": "0.25rem", - "iconSize": "{typography.fontSize.500}", - "paddingY": "0.25rem", - "extItem": { - "caption": { - "gap": "{dimension.space.100}" - }, - "activeBackground": "{background.selected}", - "activeColor": "{text.onBold}" - } - }, - "colorScheme": { - "light": { - "extend": { - "extItem": { - "caption": { - "color": "{text.muted}" - }, - "icon": { - "activeColor": "{icon.onBold}" - } - } - }, - "root": { - "background": "{background.surface.raised}", - "borderColor": "{border.subtle}", - "color": "{text.default}" - }, - "item": { - "focusBackground": "{background.neutral.subtleHover}", - "color": "{text.default}", - "focusColor": "{text.default}", - "icon": { - "color": "{icon.strong}", - "focusColor": "{icon.strong}" - } - } - } - }, - "root": { - "borderRadius": "{dimension.radius.300}", - "shadow": "{shadow.400}", - "transitionDuration": "{dimension.duration.200}" - }, - "list": { - "padding": "{dimension.space.100}", - "gap": "{dimension.space.100}" - }, - "submenuLabel": { - "padding": "{dimension.space.200} {dimension.space.300}", - "fontWeight": "{typography.fontWeight.regular}", - "background": "{background.transparent}", - "color": "{text.muted}" - }, - "separator": { - "borderColor": "{border.subtle}" - }, - "item": { - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "{dimension.radius.200}", - "gap": "{dimension.space.200}" - } - }, - "menubar": { - "extend": { - "iconSize": "{typography.fontSize.500}", - "extItem": { - "caption": { - "color": "{text.muted}", - "gap": "{dimension.space.100}" - } - }, - "extSubmenuLabel": { - "padding": "{dimension.space.200} {dimension.space.300}", - "fontWeight": "{typography.fontWeight.demibold}", - "background": "{background.transparent}", - "color": "{text.muted}" - } - }, - "colorScheme": { - "light": { - "root": { - "background": "{background.transparent}" - } - } - }, - "root": { - "borderColor": "{border.transparent}", - "borderRadius": "{dimension.radius.200}", - "color": "{text.default}", - "gap": "{dimension.space.100}", - "padding": "{dimension.space.100}", - "transitionDuration": "{dimension.duration.200}" - }, - "baseItem": { - "borderRadius": "{dimension.radius.200}", - "padding": "{dimension.space.200} {dimension.space.300}" - }, - "item": { - "focusBackground": "{background.neutral.subtleHover}", - "activeBackground": "{background.selected}", - "color": "{text.default}", - "focusColor": "{text.default}", - "activeColor": "{text.onBold}", - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "{dimension.radius.200}", - "gap": "{dimension.space.200}", - "icon": { - "color": "{icon.strong}", - "focusColor": "{icon.strong}", - "activeColor": "{icon.onBold}" - } - }, - "submenu": { - "padding": "{dimension.space.100}", - "gap": "{dimension.space.100}", - "background": "{background.surface.raised}", - "borderColor": "{border.subtle}", - "borderRadius": "{dimension.radius.300}", - "shadow": "{shadow.400}", - "mobileIndent": "{dimension.space.300}", - "icon": { - "size": "{typography.fontSize.500}", - "color": "{icon.strongMuted}", - "focusColor": "{icon.strongMuted}", - "activeColor": "{icon.onBold}" - } - }, - "separator": { - "borderColor": "{border.subtle}" - }, - "mobileButton": { - "borderRadius": "{dimension.radius.200}", - "size": "{dimension.size.500}", - "color": "{text.default}", - "hoverColor": "{text.hover.default}", - "hoverBackground": "{background.surface.hover.section}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - } - }, - "message": { - "extend": { - "width": "{dimension.overlayWidth.base}", - "extText": { - "gap": "{dimension.space.100}" - }, - "extInfo": { - "color": "{text.infoBold}", - "closeButton": { - "color": "{text.infoBold}", - "borderColor": "{border.infoBold}" - }, - "caption": { - "color": "{text.default}" - } - }, - "extAccentLine": { - "width": "{dimension.size.150}" - }, - "extCloseButton": { - "width": "{dimension.size.100}" - }, - "extSuccess": { - "color": "{text.successBold}", - "closeButton": { - "color": "{text.successBold}", - "borderColor": "{border.checked}" - }, - "caption": { - "color": "{text.default}" - } - }, - "extWarn": { - "color": "{text.warningBold}", - "closeButton": { - "color": "{text.warningBold}", - "borderColor": "{border.warningBold}" - }, - "caption": { - "color": "{text.default}" - } - }, - "extError": { - "color": "{text.dangerBold}", - "closeButton": { - "color": "{text.dangerBold}", - "borderColor": "{border.dangerBold}" - }, - "caption": { - "color": "{text.default}" - } - } - }, - "colorScheme": { - "light": { - "success": { - "background": "{background.brand.subtle}", - "borderColor": "{border.checked}", - "color": "{text.default}", - "shadow": "none", - "outlined": { - "color": "{text.default}", - "borderColor": "{border.checked}" - }, - "closeButton": { - "hoverBackground": "{background.success.subtleActive}", - "focusRing": { - "color": "{background.success.subtleActive}", - "shadow": "{shadow.200}" - } - }, - "simple": { - "color": "{text.default}" - } - }, - "outlined": { - "root": { - "borderWidth": "0rem" - }, - "closeButton": { - "hoverBackground": "{background.transparent}", - "focusRing": { - "color": "{background.success.subtleActive}", - "shadow": "{shadow.200}" - } - }, - "outlined": { - "color": "{text.transparent}", - "borderColor": "{border.transparent}" - }, - "simple": { - "color": "{text.transparent}" - } - }, - "simple": { - "content": { - "padding": "0rem" - } - }, - "warn": { - "background": "{background.warning.subtle}", - "borderColor": "{border.warningBold}", - "color": "{text.default}", - "shadow": "none", - "outlined": { - "color": "{text.default}", - "borderColor": "{border.warningBold}" - }, - "closeButton": { - "hoverBackground": "{background.warning.subtleActive}", - "focusRing": { - "color": "{background.success.subtleActive}", - "shadow": "{shadow.200}" - } - }, - "simple": { - "color": "{text.default}" - } - }, - "error": { - "background": "{background.danger.subtle}", - "borderColor": "{border.dangerBold}", - "color": "{text.default}", - "shadow": "none", - "outlined": { - "color": "{text.default}", - "borderColor": "{border.dangerBold}" - }, - "closeButton": { - "hoverBackground": "{background.danger.subtleActive}", - "focusRing": { - "color": "{background.success.subtleActive}", - "shadow": "{shadow.200}" - } - }, - "simple": { - "color": "{text.default}" - } - }, - "secondary": { - "borderColor": "{border.transparent}", - "shadow": "none", - "closeButton": { - "hoverBackground": "{background.transparent}", - "focusRing": { - "color": "{background.success.subtleActive}", - "shadow": "{shadow.200}" - } - }, - "simple": { - "color": "{text.transparent}" - }, - "outlined": { - "color": "{text.transparent}", - "borderColor": "{border.transparent}" - } - }, - "contrast": { - "borderColor": "{border.transparent}", - "shadow": "none", - "closeButton": { - "hoverBackground": "{background.transparent}", - "focusRing": { - "color": "{background.success.subtleActive}", - "shadow": "{shadow.200}" - } - }, - "simple": { - "color": "{text.transparent}" - }, - "outlined": { - "color": "{text.transparent}", - "borderColor": "{border.transparent}" - } - }, - "info": { - "background": "{background.info.subtle}", - "borderColor": "{border.infoBold}", - "color": "{text.default}", - "shadow": "none", - "closeButton": { - "hoverBackground": "{background.info.subtleActive}", - "focusRing": { - "color": "{background.success.subtleActive}", - "shadow": "{shadow.200}" - } - }, - "outlined": { - "color": "{text.default}", - "borderColor": "{border.infoBold}" - }, - "simple": { - "color": "{text.default}" - } - } - } - }, - "root": { - "borderRadius": "{dimension.radius.300}", - "borderWidth": "{dimension.size.100}", - "transitionDuration": "{dimension.duration.200}" - }, - "content": { - "padding": "{dimension.space.400}", - "gap": "{dimension.space.400}", - "sm": { - "padding": "{dimension.space.400}" - }, - "lg": { - "padding": "{dimension.space.400}" - } - }, - "text": { - "fontSize": "{typography.fontSize.300}", - "fontWeight": "{typography.fontWeight.bold}", - "sm": { - "fontSize": "{typography.fontSize.300}" - }, - "lg": { - "fontSize": "{typography.fontSize.300}" - } - }, - "icon": { - "size": "{dimension.size.550}", - "sm": { - "size": "{dimension.size.550}" - }, - "lg": { - "size": "{dimension.size.550}" - } - }, - "closeButton": { - "width": "{dimension.size.500}", - "height": "{dimension.size.500}", - "borderRadius": "{dimension.radius.300}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "offset": "{dimension.focusRing.offset}" - } - }, - "closeIcon": { - "size": "{dimension.size.300}", - "sm": { - "size": "{dimension.size.300}" - }, - "lg": { - "size": "{dimension.size.300}" - } - } - }, - "metergroup": { - "extend": { - "extLabel": { - "color": "{text.muted}" - } - }, - "root": { - "borderRadius": "{dimension.radius.300}", - "gap": "{dimension.space.300}" - }, - "meters": { - "size": "{dimension.size.200}", - "background": "{background.disabled}" - }, - "label": { - "gap": "{dimension.space.100}" - }, - "labelMarker": { - "size": "{dimension.size.200}" - }, - "labelIcon": { - "size": "{dimension.size.300}" - }, - "labelList": { - "verticalGap": "{dimension.space.200}", - "horizontalGap": "{dimension.space.300}" - } - }, - "multiselect": { - "colorScheme": { - "overlay": { - "background": "{background.surface.raised}", - "borderColor": "{border.subtle}", - "color": "{text.default}" - }, - "option": { - "focusBackground": "{background.surface.hover.section}", - "selectedBackground": "{background.selected}", - "selectedFocusBackground": "{background.selectedStrong}", - "color": "{text.default}", - "focusColor": "{text.default}", - "selectedColor": "{text.onBold}", - "selectedFocusColor": "{text.onBold}" - }, - "root": { - "background": "{background.surface.ground}", - "disabledBackground": "{background.disabled}", - "filledBackground": "{background.surface.ground}", - "filledHoverBackground": "{background.surface.ground}", - "filledFocusBackground": "{background.surface.ground}", - "borderColor": "{border.default}", - "hoverBorderColor": "{border.brand}", - "focusBorderColor": "{border.brand}", - "invalidBorderColor": "{border.danger}", - "color": "{text.defaultHover}", - "disabledColor": "{text.muted}", - "placeholderColor": "{text.muted}", - "invalidPlaceholderColor": "{text.danger}", - "focusRing": { - "color": "{background.success.subtleActive}" - } - }, - "dropdown": { - "color": "{text.muted}" - }, - "optionGroup": { - "background": "{background.surface.raised}", - "color": "{text.muted}" - }, - "clearIcon": { - "color": "{icon.subtle}" - } - }, - "extend": { - "paddingX": "0.3571rem", - "paddingY": "0.3571rem", - "borderWidth": "{dimension.borderWidth.100}", - "iconSize": "{dimension.size.300}", - "width": "{dimension.overlayWidth.narrow}", - "readonlyBackground": "{background.neutral.subtleHover}" - }, - "root": { - "shadow": "0", - "paddingX": "{dimension.space.400}", - "paddingY": "{dimension.space.400}", - "borderRadius": "{dimension.radius.300}", - "transitionDuration": "{dimension.duration.200}", - "sm": { - "fontSize": "{typography.fontSize.300}", - "paddingX": "{dimension.space.200}", - "paddingY": "{dimension.space.200}" - }, - "lg": { - "fontSize": "{typography.fontSize.300}", - "paddingX": "{dimension.space.400}", - "paddingY": "{dimension.space.400}" - }, - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "offset": "{dimension.focusRing.offset}", - "shadow": "0" - } - }, - "dropdown": { - "width": "{dimension.size.600}" - }, - "overlay": { - "borderRadius": "{dimension.radius.300}", - "shadow": "{shadow.400}" - }, - "list": { - "padding": "{dimension.space.100}", - "header": { - "padding": "{dimension.space.400} {dimension.space.400} 0 {dimension.space.400}" - }, - "gap": "{dimension.space.100}" - }, - "chip": { - "borderRadius": "{dimension.radius.200}" - }, - "option": { - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "{dimension.radius.200}", - "gap": "{dimension.space.200}" - }, - "optionGroup": { - "fontWeight": "{typography.fontWeight.demibold}", - "padding": "{dimension.space.200} {dimension.space.300}" - }, - "emptyMessage": { - "padding": "{dimension.space.200} {dimension.space.300}" - } - }, - "paginator": { - "root": { - "padding": "0 {dimension.space.200}", - "gap": "{dimension.space.200}", - "borderRadius": "{dimension.radius.300}", - "background": "{background.transparent}", - "color": "{text.default}", - "transitionDuration": "{dimension.duration.200}" - }, - "currentPageReport": { - "color": "{text.muted}" - }, - "navButton": { - "background": "{background.transparent}", - "hoverBackground": "{background.surface.hover.section}", - "selectedBackground": "{background.selected}", - "color": "{text.default}", - "hoverColor": "{text.hover.default}", - "selectedColor": "{text.onBold}", - "width": "{dimension.size.600}", - "height": "{dimension.size.600}", - "borderRadius": "{dimension.radius.300}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "focus": "{shadow.200}" - } - }, - "jumpToPageInput": { - "maxWidth": "{dimension.size.900}" - } - }, - "panelmenu": { - "extend": { - "extPanel": { - "gap": "{dimension.space.100}" - }, - "iconSize": "{typography.fontSize.500}", - "extItem": { - "activeBackground": "{background.selected}", - "activeColor": "{text.onBold}", - "caption": { - "color": "{text.muted}", - "gap": "{dimension.space.100}" - } - } - }, - "root": { - "gap": "{dimension.space.100}", - "transitionDuration": "{dimension.duration.200}" - }, - "panel": { - "background": "{background.transparent}", - "borderColor": "{border.transparent}", - "borderWidth": "{dimension.borderWidth.100}", - "color": "{text.default}", - "padding": "{dimension.space.100}", - "borderRadius": "{dimension.radius.300}", - "first": { - "borderWidth": "{dimension.borderWidth.100} {dimension.borderWidth.100} 0 {dimension.borderWidth.100}", - "topBorderRadius": "{dimension.radius.300}" - }, - "last": { - "borderWidth": "0 {dimension.borderWidth.100} {dimension.borderWidth.100} {dimension.borderWidth.100}", - "topBorderRadius": "{dimension.radius.300}" - } - }, - "item": { - "focusBackground": "{background.neutral.subtleHover}", - "color": "{text.default}", - "focusColor": "{text.default}", - "gap": "{dimension.space.200}", - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "{dimension.radius.200}", - "icon": { - "color": "{icon.strong}", - "focusColor": "{icon.strong}" - } - }, - "submenu": { - "indent": "{dimension.space.600}" - }, - "separator": { - "borderColor": "{border.subtle}" - }, - "submenuIcon": { - "color": "{icon.strongMuted}", - "focusColor": "{icon.strongMuted}" - } - }, - "password": { - "extend": { - "borderWidth": "{dimension.borderWidth.100}" - }, - "colorScheme": { - "light": { - "strength": { - "weakBackground": "{background.danger.bold}", - "mediumBackground": "{background.warning.bold}", - "strongBackground": "{background.brand.boldHover}" - }, - "icon": { - "color": "{icon.subtle}" - } - }, - "dark": { - "strength": { - "weakBackground": "{background.danger.bold}", - "mediumBackground": "{background.warning.bold}", - "strongBackground": "{background.brand.boldHover}" - }, - "icon": { - "color": "{icon.subtle}" - } - } - }, - "meter": { - "background": "{background.disabled}", - "borderRadius": "{dimension.radius.300}", - "height": "{dimension.size.200}" - }, - "overlay": { - "background": "{background.surface.raised}", - "borderColor": "{border.default}", - "borderRadius": "{dimension.radius.200}", - "color": "{text.default}", - "padding": "{dimension.space.300}", - "shadow": "{shadow.400}" - }, - "content": { - "gap": "{dimension.space.200}" - } - }, - "popover": { - "extend": { - "borderWidth": "{dimension.borderWidth.100}", - "arrow": { - "width": "{dimension.size.250}", - "height": "{dimension.size.200}" - } - }, - "root": { - "background": "{background.surface.raised}", - "borderColor": "{border.default}", - "color": "{text.default}", - "borderRadius": "{dimension.radius.200}", - "shadow": "{shadow.400}", - "gutter": "{dimension.space.300}", - "arrowOffset": "{dimension.space.500}", - "arrowLeft": "0px" - }, - "content": { - "padding": "{dimension.space.300}" - } - }, - "progressbar": { - "label": { - "color": "{text.staticDark}", - "fontSize": "{typography.fontSize.100}", - "fontWeight": "{typography.fontWeight.regular}" - }, - "root": { - "background": "{background.disabled}", - "borderRadius": "{dimension.radius.300}", - "height": "{dimension.size.300}" - }, - "value": { - "background": "{background.brand.bold}" - } - }, - "progressspinner": { - "extend": { - "small": "{dimension.size.300}", - "medium": "{dimension.size.500}", - "large": "{dimension.size.700}", - "xlarge": "{dimension.size.800}" - }, - "colorScheme": { - "light": { - "root": { - "colorOne": "{background.brand.bold}", - "colorTwo": "{background.info.bold}", - "colorThree": "{background.danger.bold}", - "colorFour": "{background.warning.bold}" - } - } - }, - "root": { - "borderWidth": "{dimension.size.150}" - } - }, - "radiobutton": { - "root": { - "width": "{dimension.size.400}", - "height": "{dimension.size.400}", - "background": "{background.surface.ground}", - "checkedBackground": "{background.selected}", - "checkedHoverBackground": "{background.surface.inverse}", - "disabledBackground": "{background.disabled}", - "filledBackground": "{background.surface.ground}", - "borderColor": "{border.default}", - "hoverBorderColor": "{border.strong}", - "focusBorderColor": "{border.default}", - "checkedBorderColor": "{border.strong}", - "checkedHoverBorderColor": "{border.strong}", - "checkedFocusBorderColor": "{border.strong}", - "checkedDisabledBorderColor": "{border.default}", - "invalidBorderColor": "{border.danger}", - "shadow": "0", - "transitionDuration": "{dimension.duration.200}" - }, - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - }, - "sm": { - "width": "{dimension.size.300}", - "height": "{dimension.size.300}" - }, - "lg": { - "width": "{dimension.size.350}", - "height": "{dimension.size.350}" - }, - "icon": { - "size": "0.7rem", - "checkedColor": "{icon.onBold}", - "checkedHoverColor": "{icon.onBold}", - "disabledColor": "{icon.subtle}", - "sm": { - "size": "{dimension.size.200}" - }, - "lg": { - "size": "{dimension.size.300}" - } - } - }, - "rating": { - "root": { - "gap": "{dimension.space.200}", - "transitionDuration": "{dimension.duration.200}" - }, - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - }, - "icon": { - "size": "{dimension.size.400}", - "color": "{icon.subtle}", - "hoverColor": "{background.warning.bold}", - "activeColor": "{background.warning.bold}" - } - }, - "ripple": { - "colorScheme": { - "light": { - "root": { - "background": "rgba(255, 255, 255, 0.0100)" - } - } - } - }, - "scrollpanel": { - "colorScheme": { - "light": { - "bar": { - "background": "{text.disabled}" - } - } - }, - "root": { - "transitionDuration": "{dimension.duration.200}" - }, - "bar": { - "size": "{dimension.size.200}", - "borderRadius": "{dimension.radius.200}", - "focusRing": { - "width": "0rem", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - } - }, - "select": { - "extend": { - "extOption": { - "background": "{background.surface.raised}", - "gap": "{dimension.space.200}" - }, - "extOptionGroup": { - "gap": "{dimension.space.200}" - }, - "readonlyBackground": "{background.neutral.subtleHover}", - "borderWidth": "{dimension.borderWidth.100}", - "iconSize": "{dimension.size.300}" - }, - "root": { - "background": "{background.surface.ground}", - "disabledBackground": "{background.disabled}", - "filledBackground": "{background.surface.ground}", - "filledHoverBackground": "{background.surface.ground}", - "filledFocusBackground": "{background.surface.ground}", - "borderColor": "{border.default}", - "hoverBorderColor": "{border.brand}", - "focusBorderColor": "{border.brand}", - "invalidBorderColor": "{border.danger}", - "color": "{text.default}", - "disabledColor": "{text.muted}", - "placeholderColor": "{text.muted}", - "invalidPlaceholderColor": "{text.danger}", - "shadow": "0", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.300}", - "borderRadius": "{dimension.radius.300}", - "transitionDuration": "{dimension.duration.200}", - "sm": { - "fontSize": "{typography.fontSize.300}", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.200}" - }, - "lg": { - "fontSize": "{typography.fontSize.300}", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.400}" - }, - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "0" - } - }, - "dropdown": { - "width": "{dimension.size.600}", - "color": "{text.defaultHover}" - }, - "overlay": { - "background": "{background.surface.raised}", - "borderColor": "{border.subtle}", - "borderRadius": "{dimension.radius.300}", - "color": "{text.default}", - "shadow": "{shadow.400}" - }, - "list": { - "padding": "{dimension.space.100}", - "gap": "{dimension.space.100}", - "header": { - "padding": "{dimension.space.400} {dimension.space.400} 0 {dimension.space.400}" - } - }, - "option": { - "focusBackground": "{background.surface.hover.section}", - "selectedBackground": "{background.selected}", - "selectedFocusBackground": "{background.selectedStrong}", - "color": "{text.default}", - "focusColor": "{text.default}", - "selectedColor": "{text.onBold}", - "selectedFocusColor": "{text.onBold}", - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "{dimension.radius.200}" - }, - "optionGroup": { - "background": "{background.surface.raised}", - "color": "{text.muted}", - "fontWeight": "{typography.fontWeight.regular}", - "padding": "{dimension.space.200} {dimension.space.300}" - }, - "clearIcon": { - "color": "{icon.default}" - }, - "checkmark": { - "color": "{text.default}", - "gutterStart": "-{dimension.space.200}", - "gutterEnd": "{dimension.space.200}" - }, - "emptyMessage": { - "padding": "{dimension.space.200} {dimension.space.300}" - } - }, - "selectbutton": { - "extend": { - "gap": "{dimension.space.100}", - "paddingX": "{dimension.space.100}", - "paddingY": "{dimension.space.100}", - "checkedBackground": "{background.surface.ground}", - "iconSize": { - "sm": "{dimension.size.300}", - "md": "{dimension.size.350}", - "lg": "{dimension.size.400}", - "xlg": "{dimension.size.450}" - }, - "checkedBorderColor": "{background.surface.ground}", - "checkedColor": "{text.defaultHover}", - "ext": { - "borderRadius": "{dimension.radius.200}" - } - }, - "colorScheme": { - "light": { - "root": { - "invalidBorderColor": "{border.danger}" - }, - "extend": { - "background": "{background.disabled}" - } - } - }, - "root": { - "borderRadius": "{dimension.radius.300}" - } - }, - "skeleton": { - "extend": { - "minWidth": "{dimension.size.500}", - "height": "{dimension.size.500}" - }, - "colorScheme": { - "light": { - "root": { - "background": "{background.disabled}", - "animationBackground": "{background.neutral.subtleHover}" - } - } - }, - "root": { - "borderRadius": "{dimension.radius.300}" - } - }, - "slider": { - "colorScheme": { - "handle": { - "content": { - "background": "{background.surface.canvas}" - } - } - }, - "root": { - "transitionDuration": "{dimension.duration.200}" - }, - "track": { - "background": "{background.disabled}", - "borderRadius": "{dimension.radius.300}", - "size": "{dimension.size.150}" - }, - "range": { - "background": "{background.selected}" - }, - "handle": { - "width": "{dimension.size.350}", - "height": "{dimension.size.350}", - "borderRadius": "{dimension.radius.max}", - "background": "{background.selected}", - "hoverBackground": "{background.selected}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - }, - "content": { - "borderRadius": "{dimension.radius.max}", - "hoverBackground": "{background.selected}", - "width": "{dimension.size.250}", - "height": "{dimension.size.250}", - "shadow": "none" - } - } - }, - "splitter": { - "colorScheme": { - "light": { - "handle": { - "background": "{background.selected}" - } - } - }, - "gutter": { - "background": "{background.neutral.subtleHover}" - }, - "root": { - "background": "{background.surface.raised}", - "borderColor": "{border.subtle}", - "color": "{text.default}", - "transitionDuration": "{dimension.duration.200}" - }, - "handle": { - "size": "{dimension.size.150}", - "borderRadius": "{dimension.radius.300}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - } - }, - "stepper": { - "extend": { - "extCaption": { - "gap": "{dimension.space.100}" - }, - "extStepNumber": { - "invalidBackground": "{background.danger.border}", - "invalidColor": "{text.dangerStrong}", - "invalidBorderColor": "{border.danger}", - "borderWidth": "{dimension.size.100}", - "iconSize": "{dimension.size.400}" - } - }, - "root": { - "transitionDuration": "{dimension.duration.200}" - }, - "separator": { - "background": "{background.disabled}", - "activeBackground": "{background.selected}", - "margin": "0 0 0 1.625rem", - "size": "{dimension.size.100}" - }, - "step": { - "padding": "{dimension.space.200}", - "gap": "{dimension.space.200}" - }, - "stepHeader": { - "padding": "0rem", - "borderRadius": "0rem", - "gap": "{dimension.space.200}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - }, - "stepTitle": { - "color": "{text.default}", - "activeColor": "{text.default}", - "fontWeight": "{typography.fontWeight.regular}" - }, - "stepNumber": { - "background": "{background.surface.raised}", - "activeBackground": "{background.brand.bold}", - "borderColor": "{border.subtle}", - "activeBorderColor": "{border.checked}", - "color": "{text.default}", - "activeColor": "{text.staticDark}", - "size": "{dimension.size.400}", - "fontSize": "{typography.fontSize.300}", - "fontWeight": "{typography.fontWeight.bold}", - "borderRadius": "{dimension.radius.max}", - "shadow": "none" - }, - "steppanels": { - "padding": "{dimension.space.400}" - }, - "steppanel": { - "background": "{background.surface.raised}", - "color": "{text.default}", - "padding": "0rem", - "indent": "0rem" - } - }, - "steps": { - "itemLink": { - "gap": "{dimension.space.200}" - }, - "itemLabel": { - "fontWeight": "{typography.fontWeight.regular}" - }, - "itemNumber": { - "background": "{background.surface.raised}", - "size": "{dimension.size.500}", - "fontSize": "{typography.fontSize.300}", - "fontWeight": "{typography.fontWeight.bold}", - "borderRadius": "{dimension.radius.max}", - "shadow": "none" - } - }, - "tabs": { - "colorScheme": { - "light": { - "navButton": { - "shadow": "none" - }, - "tab": { - "background": "{background.transparent}", - "hoverBackground": "{background.transparent}", - "activeBackground": "{background.transparent}" - } - } - }, - "root": { - "transitionDuration": "{dimension.duration.200}" - }, - "tablist": { - "borderWidth": "0 0 {dimension.size.100} 0", - "background": "{background.transparent}", - "borderColor": "{border.subtle}" - }, - "tab": { - "borderWidth": "0", - "borderColor": "{border.subtle}", - "hoverBorderColor": "{border.subtle}", - "activeBorderColor": "{border.inverse}", - "color": "{text.muted}", - "hoverColor": "{text.default}", - "activeColor": "{text.default}", - "padding": "{dimension.space.400}", - "fontWeight": "{typography.fontWeight.demibold}", - "margin": "0", - "gap": "{dimension.space.200}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - }, - "tabpanel": { - "background": "{background.transparent}", - "color": "{text.default}", - "padding": "{dimension.space.400}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - }, - "navButton": { - "background": "{background.surface.raised}", - "color": "{text.default}", - "hoverColor": "{text.hover.default}", - "width": "{dimension.size.400}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - }, - "activeBar": { - "height": "0.18rem", - "bottom": "-0.18rem", - "background": "{text.default}" - } - }, - "toast": { - "extend": { - "extInfo": { - "color": "{text.infoBold}", - "closeButton": { - "color": "{text.infoBold}", - "borderColor": "{border.infoBold}" - }, - "caption": { - "color": "{text.default}" - } - }, - "extAccentLine": { - "width": "{dimension.size.150}" - }, - "extCloseButton": { - "width": "{dimension.size.100}" - }, - "extSuccess": { - "color": "{text.successBold}", - "closeButton": { - "color": "{text.successBold}", - "borderColor": "{border.checked}" - }, - "caption": { - "color": "{text.default}" - } - }, - "extWarn": { - "color": "{text.warningBold}", - "closeButton": { - "color": "{text.warningBold}", - "borderColor": "{border.warningBold}" - }, - "caption": { - "color": "{text.default}" - } - }, - "extError": { - "color": "{text.dangerBold}", - "closeButton": { - "color": "{text.dangerBold}", - "borderColor": "{border.dangerBold}" - }, - "caption": { - "color": "{text.default}" - } - } - }, - "colorScheme": { - "light": { - "info": { - "background": "{background.info.subtle}", - "borderColor": "{border.infoBold}", - "color": "{text.default}", - "detailColor": "{text.default}", - "shadow": "{shadow.400}", - "closeButton": { - "hoverBackground": "{background.info.subtleActive}", - "focusRing": { - "color": "{background.success.subtleActive}", - "shadow": "{shadow.200}" - } - } - }, - "success": { - "background": "{background.brand.subtle}", - "borderColor": "{border.checked}", - "color": "{text.default}", - "detailColor": "{text.default}", - "shadow": "{shadow.400}", - "closeButton": { - "hoverBackground": "{background.success.subtleActive}", - "focusRing": { - "color": "{background.success.subtleActive}", - "shadow": "{shadow.200}" - } - } - }, - "warn": { - "background": "{background.warning.subtle}", - "borderColor": "{border.warningBold}", - "color": "{text.default}", - "detailColor": "{text.default}", - "shadow": "{shadow.400}", - "closeButton": { - "hoverBackground": "{background.warning.subtleActive}", - "focusRing": { - "color": "{background.success.subtleActive}", - "shadow": "none" - } - } - }, - "error": { - "background": "{background.danger.subtle}", - "borderColor": "{border.dangerBold}", - "color": "{text.default}", - "detailColor": "{text.default}", - "shadow": "{shadow.400}", - "closeButton": { - "hoverBackground": "{background.danger.subtleActive}", - "focusRing": { - "color": "{background.success.subtleActive}", - "shadow": "{shadow.200}" - } - } - }, - "secondary": { - "shadow": "{shadow.400}" - }, - "contrast": { - "shadow": "{shadow.400}" - } - } - }, - "root": { - "width": "{dimension.overlayWidth.base}", - "borderWidth": "{dimension.size.100}", - "borderRadius": "{dimension.radius.300}", - "transitionDuration": "{dimension.duration.200}" - }, - "icon": { - "size": "{dimension.size.550}" - }, - "content": { - "padding": "{dimension.space.400}", - "gap": "{dimension.space.400}" - }, - "text": { - "gap": "{dimension.space.100}" - }, - "summary": { - "fontWeight": "{typography.fontWeight.bold}", - "fontSize": "{typography.fontSize.300}" - }, - "detail": { - "fontWeight": "{typography.fontWeight.regular}", - "fontSize": "{typography.fontSize.200}" - }, - "closeButton": { - "width": "{dimension.size.500}", - "height": "{dimension.size.500}", - "borderRadius": "{dimension.radius.300}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "offset": "{dimension.focusRing.offset}" - } - }, - "closeIcon": { - "size": "{dimension.size.300}" - } - }, - "tag": { - "colorScheme": { - "light": { - "primary": { - "background": "{background.brand.bold}", - "color": "{text.default}" - }, - "secondary": { - "background": "{background.disabled}", - "color": "{text.default}" - }, - "success": { - "background": "{background.success.border}", - "color": "{text.successStrong}" - }, - "info": { - "background": "{background.info.mutedBorder}", - "color": "{text.infoStrong}" - }, - "warn": { - "background": "{background.warning.mutedBorder}", - "color": "{text.warningStrong}" - }, - "danger": { - "background": "{background.danger.mutedBorder}", - "color": "{text.dangerStrong}" - } - } - }, - "root": { - "fontSize": "{typography.fontSize.100}", - "fontWeight": "{typography.fontWeight.regular}", - "padding": "{dimension.space.100} {dimension.space.200}", - "gap": "{dimension.space.100}", - "borderRadius": "{dimension.size.200}", - "roundedBorderRadius": "{dimension.radius.500}" - }, - "icon": { - "size": "{dimension.size.300}" - } - }, - "textarea": { - "extend": { - "readonlyBackground": "{background.neutral.subtleHover}", - "borderWidth": "{dimension.borderWidth.100}", - "iconSize": "{dimension.size.300}", - "minHeight": "{dimension.size.900}", - "extXlg": { - "fontSize": "{typography.fontSize.300}", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.500}" - } - }, - "root": { - "background": "{background.surface.ground}", - "disabledBackground": "{background.disabled}", - "filledBackground": "{background.surface.ground}", - "filledHoverBackground": "{background.surface.ground}", - "filledFocusBackground": "{background.surface.ground}", - "borderColor": "{border.default}", - "hoverBorderColor": "{border.brand}", - "focusBorderColor": "{border.brand}", - "invalidBorderColor": "{border.danger}", - "color": "{text.defaultHover}", - "disabledColor": "{text.muted}", - "placeholderColor": "{text.muted}", - "invalidPlaceholderColor": "{text.danger}", - "shadow": "0", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.300}", - "borderRadius": "{dimension.radius.300}", - "transitionDuration": "{dimension.duration.200}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "0" - }, - "sm": { - "fontSize": "{typography.fontSize.300}", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.200}" - }, - "lg": { - "fontSize": "{typography.fontSize.300}", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.400}" - } - } - }, - "tieredmenu": { - "extend": { - "extSubmenu": { - "borderColor": "{border.subtle}", - "background": "{background.surface.raised}" - }, - "iconSize": "{typography.fontSize.500}", - "extItem": { - "caption": { - "gap": "{dimension.space.100}", - "color": "{text.muted}" - } - } - }, - "root": { - "background": "{background.surface.raised}", - "borderColor": "{border.transparent}", - "color": "{text.default}", - "borderRadius": "{dimension.radius.300}", - "shadow": "{shadow.400}", - "transitionDuration": "{dimension.duration.200}" - }, - "list": { - "padding": "{dimension.space.100}", - "gap": "{dimension.space.100}" - }, - "item": { - "focusBackground": "{background.neutral.subtleHover}", - "activeBackground": "{background.selected}", - "color": "{text.default}", - "focusColor": "{text.default}", - "activeColor": "{text.onBold}", - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "{dimension.radius.200}", - "gap": "{dimension.space.200}", - "icon": { - "color": "{icon.strong}", - "focusColor": "{icon.strong}", - "activeColor": "{icon.onBold}" - } - }, - "submenu": { - "mobileIndent": "{dimension.space.300}" - }, - "separator": { - "borderColor": "{border.subtle}" - } - }, - "timeline": { - "extend": { - "extEvent": { - "gap": "{dimension.space.100}" - } - }, - "event": { - "minHeight": "{dimension.size.800}" - }, - "vertical": { - "eventContent": { - "padding": "0 {dimension.space.200}" - } - }, - "horizontal": { - "eventContent": { - "padding": "{dimension.space.200} 0" - } - }, - "eventMarker": { - "size": "{dimension.size.300}", - "borderRadius": "{dimension.radius.300}", - "borderWidth": "{dimension.size.150}", - "background": "{background.surface.raised}", - "borderColor": "{border.checked}", - "content": { - "borderRadius": "{dimension.radius.300}", - "size": "{dimension.size.250}", - "background": "{background.transparent}", - "insetShadow": "none" - } - }, - "eventConnector": { - "color": "{background.disabled}", - "size": "{dimension.size.100}" - }, - "colorScheme": { - "light": { - "eventMarker": { - "background": "{background.surface.raised}", - "borderColor": "{border.checked}" - } - }, - "dark": { - "eventMarker": { - "background": "{background.surface.raised}", - "borderColor": "{border.checked}" - } - } - } - }, - "togglebutton": { - "extend": { - "ext": { - "gap": "{dimension.space.300}" - }, - "iconSize": { - "sm": "{dimension.size.300}", - "md": "{dimension.size.350}", - "lg": "{dimension.size.400}" - }, - "iconOnlyWidth": "{dimension.size.600}", - "hoverBorderColor": "{border.default}", - "checkedHoverColor": "{text.onBold}", - "checkedHoverBackground": "{background.surface.inverse}", - "checkedHoverBorderColor": "{border.inverse}", - "extXlg": { - "padding": "{dimension.space.500} {dimension.space.600}", - "iconOnlyWidth": "4.0714rem" - }, - "extSm": { - "iconOnlyWidth": "2.1429rem" - }, - "extLg": { - "iconOnlyWidth": "3.5714rem" - } - }, - "colorScheme": { - "light": { - "root": { - "background": "{background.disabled}", - "hoverBackground": "{text.disabled}", - "borderColor": "{border.subtle}", - "color": "{text.default}", - "hoverColor": "{text.default}", - "checkedBackground": "{background.selected}", - "checkedColor": "{text.onBold}", - "checkedBorderColor": "{border.strong}", - "disabledBackground": "{background.disabled}", - "disabledBorderColor": "{border.subtle}", - "disabledColor": "{text.muted}", - "invalidBorderColor": "{border.danger}" - }, - "icon": { - "color": "{icon.strong}", - "hoverColor": "{icon.strong}", - "checkedColor": "{icon.onBold}", - "disabledColor": "{icon.subtle}" - }, - "content": { - "checkedBackground": "{background.transparent}" - } - } - }, - "root": { - "padding": "{dimension.space.200} {dimension.space.400}", - "borderRadius": "{dimension.radius.max}", - "gap": "{dimension.space.200}", - "fontWeight": "{typography.fontWeight.demibold}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - }, - "sm": { - "fontSize": "{typography.fontSize.200}", - "padding": "{dimension.space.100} {dimension.space.300}" - }, - "lg": { - "fontSize": "{typography.fontSize.500}", - "padding": "{dimension.space.400} {dimension.space.600}" - }, - "transitionDuration": "{dimension.duration.200}" - }, - "content": { - "checkedShadow": "none", - "padding": "0rem", - "borderRadius": "0rem", - "sm": { - "padding": "0rem" - }, - "lg": { - "padding": "0rem" - } - } - }, - "toggleswitch": { - "colorScheme": { - "light": { - "root": { - "background": "{text.hover.subtle}", - "hoverBackground": "{background.neutral.bold}", - "disabledBackground": "{background.disabled}", - "checkedBackground": "{background.selected}", - "checkedHoverBackground": "{background.surface.inverse}" - }, - "handle": { - "background": "{text.staticLight}", - "hoverBackground": "{text.staticLight}", - "disabledBackground": "{background.neutral.bold}", - "checkedBackground": "{background.surface.canvas}", - "checkedHoverBackground": "{background.surface.canvas}", - "color": "{text.default}", - "hoverColor": "{text.default}", - "checkedColor": "{text.default}", - "checkedHoverColor": "{text.default}" - } - } - }, - "root": { - "width": "{dimension.size.600}", - "height": "{dimension.size.400}", - "borderRadius": "{dimension.radius.max}", - "gap": "{dimension.space.100}", - "borderWidth": "{dimension.borderWidth.100}", - "shadow": "none", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", - "offset": "{dimension.focusRing.offset}", - "shadow": "0" - }, - "borderColor": "{border.transparent}", - "hoverBorderColor": "{border.transparent}", - "checkedBorderColor": "{border.transparent}", - "checkedHoverBorderColor": "{border.transparent}", - "invalidBorderColor": "{border.danger}", - "transitionDuration": "{dimension.duration.200}", - "slideDuration": "{dimension.duration.200}" - }, - "handle": { - "borderRadius": "{dimension.radius.max}", - "size": "{dimension.size.300}" - } - }, - "tooltip": { - "colorScheme": { - "light": { - "root": { - "background": "{background.selected}", - "color": "{text.onBold}" - } - } - }, - "root": { - "maxWidth": "{dimension.overlayWidth.base}", - "gutter": "{dimension.space.100}", - "shadow": "{shadow.400}", - "padding": "{dimension.space.200} {dimension.space.400} ", - "borderRadius": "{dimension.radius.200}" - } - }, - "tree": { - "root": { - "background": "{background.surface.raised}", - "color": "{text.default}", - "padding": "{dimension.space.400}", - "gap": "{dimension.space.100}", - "indent": "{dimension.space.400}" - }, - "node": { - "padding": "{dimension.space.200} {dimension.space.300}", - "color": "{text.default}", - "selectedColor": "{text.onBold}", - "gap": "{dimension.space.100}" - }, - "nodeIcon": { - "selectedColor": "{icon.onBold}" - }, - "nodeToggleButton": { - "borderRadius": "{dimension.radius.100}", - "size": "{dimension.size.450}", - "selectedHoverBackground": "{background.selected}" - }, - "loadingIcon": { - "size": "{dimension.size.300}" - }, - "filter": { - "margin": "0 0 {dimension.space.200} 0" - } - }, - "overlaybadge": { - "root": { - "outline": { - "width": "0rem", - "color": "{text.transparent}" - } - } - } - } -} \ No newline at end of file From bec47319b2c2cf0dba1ec19a9004068166a9356a Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Thu, 18 Jun 2026 16:51:35 +0800 Subject: [PATCH 06/46] =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=B2=D0=B5?= =?UTF-8?q?=D1=81=D1=82=D0=B8=20=D1=86=D0=B2=D0=B5=D1=82=D0=BE=D0=B2=D1=8B?= =?UTF-8?q?=D0=B5=20dt-=D1=81=D1=81=D1=8B=D0=BB=D0=BA=D0=B8=20CSS=20=D0=BD?= =?UTF-8?q?=D0=B0=20=D0=BD=D0=BE=D0=B2=D1=8B=D0=B5=20=D1=80=D0=BE=D0=BB?= =?UTF-8?q?=D0=B8=20(8=20=D0=B8=D0=BC=D1=91=D0=BD;=20overlay.modal.padding?= =?UTF-8?q?=E2=86=92space.400)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../prime-preset/tokens/components/checkbox.ts | 12 ++++++------ .../providers/prime-preset/tokens/components/chip.ts | 2 +- .../prime-preset/tokens/components/confirm-dialog.ts | 2 +- .../prime-preset/tokens/components/dialog.ts | 2 +- .../prime-preset/tokens/components/drawer.ts | 2 +- .../prime-preset/tokens/components/inputotp.ts | 2 +- .../prime-preset/tokens/components/inputtext.ts | 2 +- .../prime-preset/tokens/components/password.ts | 2 +- .../prime-preset/tokens/components/radiobutton.ts | 4 ++-- .../prime-preset/tokens/components/select.ts | 2 +- .../prime-preset/tokens/components/slider.ts | 2 +- .../prime-preset/tokens/components/stepper.ts | 6 +++--- .../prime-preset/tokens/components/textarea.ts | 2 +- .../prime-preset/tokens/components/toggleswitch.ts | 4 ++-- 14 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/lib/providers/prime-preset/tokens/components/checkbox.ts b/src/lib/providers/prime-preset/tokens/components/checkbox.ts index a1e3d355..d262a9f5 100644 --- a/src/lib/providers/prime-preset/tokens/components/checkbox.ts +++ b/src/lib/providers/prime-preset/tokens/components/checkbox.ts @@ -12,7 +12,7 @@ export const checkboxCss = ({ dt }: { dt: (token: string) => string }): string = } .checkbox-label--hover { - color: ${dt('text.primaryColor')}; + color: ${dt('text.brand')}; } .checkbox-label--disabled { @@ -21,7 +21,7 @@ export const checkboxCss = ({ dt }: { dt: (token: string) => string }): string = } .checkbox-caption { - color: ${dt('text.secondaryColor')}; + color: ${dt('text.subtle')}; font-family: ${dt('fonts.fontFamily.heading')}; font-size: ${dt('fonts.fontSize.200')}; font-weight: ${dt('fonts.fontWeight.regular')}; @@ -29,11 +29,11 @@ export const checkboxCss = ({ dt }: { dt: (token: string) => string }): string = } .checkbox-caption--hover { - color: ${dt('text.primaryColor')}; + color: ${dt('text.brand')}; } .checkbox-caption--disabled { - color: ${dt('text.disabledColor')}; + color: ${dt('text.disabled')}; } /* Переопределение ширины 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('focusRing.extend.success')}; + box-shadow: 0 0 0 ${dt('checkbox.root.focusRing.focusRing')} ${dt('focusRing.success')}; } /* 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('focusRing.width')} ${dt('focusRing.extend.invalid')}; + box-shadow: 0 0 0 ${dt('focusRing.width')} ${dt('focusRing.invalid')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/chip.ts b/src/lib/providers/prime-preset/tokens/components/chip.ts index d4e93526..08540351 100644 --- a/src/lib/providers/prime-preset/tokens/components/chip.ts +++ b/src/lib/providers/prime-preset/tokens/components/chip.ts @@ -30,7 +30,7 @@ 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('focusRing.extend.success')}; + outline: ${dt('chip.removeIcon.focusRing.width')} solid ${dt('focusRing.success')}; } /* ─── Disabled состояние ─── */ diff --git a/src/lib/providers/prime-preset/tokens/components/confirm-dialog.ts b/src/lib/providers/prime-preset/tokens/components/confirm-dialog.ts index bc9e3ffd..51364460 100644 --- a/src/lib/providers/prime-preset/tokens/components/confirm-dialog.ts +++ b/src/lib/providers/prime-preset/tokens/components/confirm-dialog.ts @@ -15,7 +15,7 @@ export const confirmDialogCss = ({ dt }: { dt: (token: string) => string }): str /* Размеры */ .p-confirmdialog.p-dialog { - width: ${dt('overlay.width')}; + width: ${dt('dimension.overlayWidth.base')}; } .p-confirmdialog-sm.p-dialog { diff --git a/src/lib/providers/prime-preset/tokens/components/dialog.ts b/src/lib/providers/prime-preset/tokens/components/dialog.ts index 7426012c..e5ad85c2 100644 --- a/src/lib/providers/prime-preset/tokens/components/dialog.ts +++ b/src/lib/providers/prime-preset/tokens/components/dialog.ts @@ -36,7 +36,7 @@ export const dialogCss = ({ dt }: { dt: (token: string) => string }): string => } .p-dialog { - width: ${dt('overlay.width')}; + width: ${dt('dimension.overlayWidth.base')}; } .p-dialog.p-component.p-dialog-sm { diff --git a/src/lib/providers/prime-preset/tokens/components/drawer.ts b/src/lib/providers/prime-preset/tokens/components/drawer.ts index 8783c865..16a26bea 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('overlay.modal.padding.300')} ${dt('overlay.modal.padding.300')} ${dt('overlay.modal.padding.100')} ${dt('overlay.modal.padding.300')}; + padding: ${dt('overlay.modal.padding.300')} ${dt('overlay.modal.padding.300')} ${dt('dimension.space.400')} ${dt('overlay.modal.padding.300')}; } /* Типографика */ diff --git a/src/lib/providers/prime-preset/tokens/components/inputotp.ts b/src/lib/providers/prime-preset/tokens/components/inputotp.ts index de80e1d9..6322b610 100644 --- a/src/lib/providers/prime-preset/tokens/components/inputotp.ts +++ b/src/lib/providers/prime-preset/tokens/components/inputotp.ts @@ -25,7 +25,7 @@ export const inputotpCss = ({ dt }: { dt: (token: string) => string }): string = /* ─── 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('focusRing.extend.invalid')}; + box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('focusRing.invalid')}; } /* ─── Small ─── */ diff --git a/src/lib/providers/prime-preset/tokens/components/inputtext.ts b/src/lib/providers/prime-preset/tokens/components/inputtext.ts index 8f0131cc..c9f8f8e6 100644 --- a/src/lib/providers/prime-preset/tokens/components/inputtext.ts +++ b/src/lib/providers/prime-preset/tokens/components/inputtext.ts @@ -34,7 +34,7 @@ export const inputtextCss = ({ dt }: { dt: (token: string) => string }): string /* ─── Invalid + Focus ─── */ .p-inputtext.p-invalid:focus { border-color: ${dt('inputtext.root.invalidBorderColor')}; - box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('focusRing.extend.invalid')}; + box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('focusRing.invalid')}; } /* ─── Extra Large ─── */ diff --git a/src/lib/providers/prime-preset/tokens/components/password.ts b/src/lib/providers/prime-preset/tokens/components/password.ts index b682ad02..80dd07a4 100644 --- a/src/lib/providers/prime-preset/tokens/components/password.ts +++ b/src/lib/providers/prime-preset/tokens/components/password.ts @@ -31,7 +31,7 @@ export const passwordCss = ({ dt }: { dt: (token: string) => string }): string = /* ─── Invalid + Focus ─── */ .p-password:has(.p-inputtext.p-invalid:focus) { - box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('focusRing.extend.invalid')}; + box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('focusRing.invalid')}; border-radius: ${dt('inputtext.root.borderRadius')}; } diff --git a/src/lib/providers/prime-preset/tokens/components/radiobutton.ts b/src/lib/providers/prime-preset/tokens/components/radiobutton.ts index 975dce6f..5555d8eb 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('focusRing.extend.success')}; + box-shadow: 0 0 0 ${dt('radiobutton.focusRing.width')} ${dt('focusRing.success')}; } /* 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('focusRing.extend.invalid')}; + box-shadow: 0 0 0 ${dt('radiobutton.focusRing.width')} ${dt('focusRing.invalid')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/select.ts b/src/lib/providers/prime-preset/tokens/components/select.ts index 9a3bfd52..f8505f0c 100644 --- a/src/lib/providers/prime-preset/tokens/components/select.ts +++ b/src/lib/providers/prime-preset/tokens/components/select.ts @@ -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('focusRing.extend.invalid')}; + box-shadow: 0 0 0 ${dt('select.root.focusRing.width')} ${dt('focusRing.invalid')}; } /* ─── Readonly ─── */ diff --git a/src/lib/providers/prime-preset/tokens/components/slider.ts b/src/lib/providers/prime-preset/tokens/components/slider.ts index 0fb55b17..edeb457e 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('focusRing.extend.success')}; + outline: ${dt('slider.handle.focusRing.width')} ${dt('slider.handle.focusRing.style')} ${dt('focusRing.success')}; 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 b6fd0534..d370681d 100644 --- a/src/lib/providers/prime-preset/tokens/components/stepper.ts +++ b/src/lib/providers/prime-preset/tokens/components/stepper.ts @@ -43,8 +43,8 @@ export const stepperCss = ({ dt }: { dt: (token: string) => string }): string => /* Step-number с иконкой */ .p-stepper .p-step-number:has(i) { - background: ${dt('colorScheme.light.transparent')}; - border-color: ${dt('colorScheme.light.transparent')}; + background: ${dt('background.transparent')}; + border-color: ${dt('background.transparent')}; } /* Размер иконок в step-number */ @@ -59,6 +59,6 @@ export const stepperCss = ({ dt }: { dt: (token: string) => string }): string => /* Прозрачный фон для панелей */ .p-stepper .p-steppanel { - background: ${dt('colorScheme.light.transparent')}; + background: ${dt('background.transparent')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/textarea.ts b/src/lib/providers/prime-preset/tokens/components/textarea.ts index 263e6886..c359a9cf 100644 --- a/src/lib/providers/prime-preset/tokens/components/textarea.ts +++ b/src/lib/providers/prime-preset/tokens/components/textarea.ts @@ -42,7 +42,7 @@ export const textareaCss = ({ dt }: { dt: (token: string) => string }): string = /* --- Invalid + Focus --- */ .p-textarea.p-invalid:focus { border-color: ${dt('textarea.invalidBorderColor')}; - box-shadow: 0 0 0 ${dt('textarea.focusRing.width')} ${dt('focusRing.extend.invalid')}; + box-shadow: 0 0 0 ${dt('textarea.focusRing.width')} ${dt('focusRing.invalid')}; } /* --- ClearButton (showClear) --- */ diff --git a/src/lib/providers/prime-preset/tokens/components/toggleswitch.ts b/src/lib/providers/prime-preset/tokens/components/toggleswitch.ts index 8793c207..db421e6f 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('focusRing.extend.success')}; + box-shadow: 0 0 0 ${dt('toggleswitch.root.focusRing.width')} ${dt('focusRing.success')}; } /* Focus ring для состояния ошибки */ .p-toggleswitch.p-invalid:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider { - box-shadow: 0 0 0 ${dt('focusRing.width')} ${dt('focusRing.extend.invalid')}; + box-shadow: 0 0 0 ${dt('focusRing.width')} ${dt('focusRing.invalid')}; } `; From 24212dcfab8fbeee6e65ae62840e6e0293963c04 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Thu, 18 Jun 2026 16:55:22 +0800 Subject: [PATCH 07/46] =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=B2=D0=B5?= =?UTF-8?q?=D1=81=D1=82=D0=B8=20=D1=80=D0=B0=D0=B7=D0=BC=D0=B5=D1=80=D0=BD?= =?UTF-8?q?=D1=8B=D0=B5=20dt-=D1=81=D1=81=D1=8B=D0=BB=D0=BA=D0=B8=20CSS=20?= =?UTF-8?q?=D0=BD=D0=B0=20dimension-=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D1=8B?= =?UTF-8?q?=20(11=20=D0=B8=D0=BC=D1=91=D0=BD;=20sizing.24x=E2=86=92size.10?= =?UTF-8?q?00)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../prime-preset/tokens/components/autocomplete.ts | 4 ++-- .../prime-preset/tokens/components/confirm-dialog.ts | 6 +++--- .../prime-preset/tokens/components/date-picker.ts | 2 +- .../providers/prime-preset/tokens/components/dialog.ts | 8 ++++---- .../providers/prime-preset/tokens/components/galleria.ts | 2 +- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/lib/providers/prime-preset/tokens/components/autocomplete.ts b/src/lib/providers/prime-preset/tokens/components/autocomplete.ts index e1119016..5a1415ec 100644 --- a/src/lib/providers/prime-preset/tokens/components/autocomplete.ts +++ b/src/lib/providers/prime-preset/tokens/components/autocomplete.ts @@ -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('spacing.2x')}; - padding-bottom: ${dt('spacing.2x')}; + 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/confirm-dialog.ts b/src/lib/providers/prime-preset/tokens/components/confirm-dialog.ts index 51364460..9841b1f5 100644 --- a/src/lib/providers/prime-preset/tokens/components/confirm-dialog.ts +++ b/src/lib/providers/prime-preset/tokens/components/confirm-dialog.ts @@ -19,15 +19,15 @@ export const confirmDialogCss = ({ dt }: { dt: (token: string) => string }): str } .p-confirmdialog-sm.p-dialog { - width: ${dt('sizing.80x')}; + width: ${dt('dimension.overlayWidth.sm')}; } .p-confirmdialog-lg.p-dialog { - width: ${dt('sizing.120x')}; + width: ${dt('dimension.overlayWidth.lg')}; } .p-confirmdialog-xlg.p-dialog { - width: ${dt('sizing.128x')}; + width: ${dt('dimension.overlayWidth.xlg')}; } /* Цвета иконок по severity */ 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 a923663f..686c2f5b 100644 --- a/src/lib/providers/prime-preset/tokens/components/date-picker.ts +++ b/src/lib/providers/prime-preset/tokens/components/date-picker.ts @@ -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('sizing.24x')}; + 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 e5ad85c2..cbf8128c 100644 --- a/src/lib/providers/prime-preset/tokens/components/dialog.ts +++ b/src/lib/providers/prime-preset/tokens/components/dialog.ts @@ -14,7 +14,7 @@ export const dialogCss = ({ dt }: { dt: (token: string) => string }): string => } .p-dialog .p-dialog-header { - border-bottom: ${dt('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; @@ -40,14 +40,14 @@ export const dialogCss = ({ dt }: { dt: (token: string) => string }): string => } .p-dialog.p-component.p-dialog-sm { - width: ${dt('sizing.80x')}; + width: ${dt('dimension.overlayWidth.sm')}; } .p-dialog.p-component.p-dialog-lg { - width: ${dt('sizing.120x')}; + width: ${dt('dimension.overlayWidth.lg')}; } .p-dialog.p-component.p-dialog-xlg { - width: ${dt('sizing.128x')}; + width: ${dt('dimension.overlayWidth.xlg')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/galleria.ts b/src/lib/providers/prime-preset/tokens/components/galleria.ts index b247c67c..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('spacing.2x')}; + padding: ${dt('dimension.space.200')}; } /* ─── Кнопки навигации в полноэкранном режиме ─── */ From ea1365da819620419c506738aa308697f60328bd Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Thu, 18 Jun 2026 17:00:14 +0800 Subject: [PATCH 08/46] =?UTF-8?q?=D1=81=D0=BD=D1=8F=D1=82=D1=8C=20superset?= =?UTF-8?q?=20=D1=80=D0=B0=D0=B7=D0=BC=D0=B5=D1=80=D0=BE=D0=B2:=20=D0=B5?= =?UTF-8?q?=D0=B4=D0=B8=D0=BD=D0=B0=D1=8F=20size-=D0=BB=D0=B5=D1=81=D1=82?= =?UTF-8?q?=D0=BD=D0=B8=D1=86=D0=B0,=20=D1=83=D0=B4=D0=B0=D0=BB=D0=B8?= =?UTF-8?q?=D1=82=D1=8C=20=D0=B4=D1=83=D0=B1=D0=BB=D1=8C-=D1=88=D0=BA?= =?UTF-8?q?=D0=B0=D0=BB=D1=8B=20primitive?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/tokens/repoint_primitive.py | 14 + .../providers/prime-preset/tokens/tokens.json | 521 ++++++++---------- 2 files changed, 230 insertions(+), 305 deletions(-) create mode 100644 scripts/tokens/repoint_primitive.py diff --git a/scripts/tokens/repoint_primitive.py b/scripts/tokens/repoint_primitive.py new file mode 100644 index 00000000..e1c60ad0 --- /dev/null +++ b/scripts/tokens/repoint_primitive.py @@ -0,0 +1,14 @@ +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/src/lib/providers/prime-preset/tokens/tokens.json b/src/lib/providers/prime-preset/tokens/tokens.json index 6f3ad90b..5b2fbfeb 100644 --- a/src/lib/providers/prime-preset/tokens/tokens.json +++ b/src/lib/providers/prime-preset/tokens/tokens.json @@ -316,21 +316,6 @@ } } }, - "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", @@ -376,80 +361,6 @@ "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}", @@ -534,81 +445,81 @@ }, "semantic": { "list": { - "padding": "{spacing.1x}", + "padding": "{size.1x}", "gap": { - "100": "{spacing.1x}", - "200": "{spacing.2x}" + "100": "{size.1x}", + "200": "{size.2x}" }, "header": { - "padding": "{spacing.4x} {spacing.4x} 0 {spacing.4x}" + "padding": "{size.4x} {size.4x} 0 {size.4x}" }, "option": { - "padding": "{spacing.2x} {spacing.3x}", - "borderRadius": "{borderRadius.200}" + "padding": "{size.2x} {size.3x}", + "borderRadius": "{size.2x}" }, "optionGroup": { - "padding": "{spacing.2x} {spacing.3x}", + "padding": "{size.2x} {size.3x}", "fontWeight": "{fonts.fontWeight.demibold}" } }, "focusRing": { - "width": "{borderWidth.300}", + "width": "{size.1x}", "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}" + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.3x}", + "400": "{size.4x}", + "500": "{size.5x}", + "600": "{size.6x}", + "700": "{size.7x}" }, "borderRadius": { - "100": "{borderRadius.200}", - "200": "{borderRadius.300}", - "300": "{borderRadius.max}" + "100": "{size.2x}", + "200": "{size.3x}", + "300": "{size.pill}" }, - "borderWidth": "{borderWidth.100}", + "borderWidth": "{size.min}", "icon": { - "100": "{sizing.2x}", - "200": "{sizing.3x}", - "300": "{sizing.4x}", - "400": "{sizing.5x}", - "500": "{sizing.6x}" + "100": "{size.2x}", + "200": "{size.3x}", + "300": "{size.4x}", + "400": "{size.5x}", + "500": "{size.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}" + "100": "{size.min}", + "150": "{size.1x}", + "200": "{size.2x}", + "250": "{size.3x}", + "300": "{size.4x}", + "350": "{size.5x}", + "400": "{size.6x}", + "500": "{size.8x}", + "600": "{size.10x}", + "700": "{size.12x}", + "800": "{size.16x}", + "900": "{size.20x}" }, "width": { - "100": "{sizing.6x}", - "200": "{sizing.8x}", - "300": "{sizing.10x}", - "350": "{sizing.11x}", - "400": "{sizing.12x}", - "500": "{sizing.60x}", - "full": "{sizing.max}" + "100": "{size.6x}", + "200": "{size.8x}", + "300": "{size.10x}", + "350": "{size.11x}", + "400": "{size.12x}", + "500": "{size.60x}", + "full": "{size.max}" }, "gap": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.3x}", - "400": "{spacing.4x}" + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.3x}", + "400": "{size.4x}" }, "focusRing": { "width": "{focusRing.width}", @@ -617,80 +528,80 @@ "offset": "{focusRing.offset}" }, "sm": { - "width": "{sizing.60x}", + "width": "{size.60x}", "fontSize": "{fonts.fontSize.300}", - "paddingX": "{spacing.3x}", - "paddingY": "{spacing.3x}" + "paddingX": "{size.3x}", + "paddingY": "{size.3x}" }, "fontSize": "{fonts.fontSize.300}", - "paddingX": "{spacing.4x}", - "paddingY": "{spacing.4x}", + "paddingX": "{size.4x}", + "paddingY": "{size.4x}", "lg": { - "width": "{sizing.76x}", + "width": "{size.76x}", "fontSize": "{fonts.fontSize.300}", - "paddingX": "{spacing.5x}", - "paddingY": "{spacing.5x}" + "paddingX": "{size.5x}", + "paddingY": "{size.5x}" }, "xlg": { - "width": "{sizing.84x}", + "width": "{size.84x}", "fontSize": "{fonts.fontSize.300}", - "paddingX": "{spacing.6x}", - "paddingY": "{spacing.6x}" + "paddingX": "{size.6x}", + "paddingY": "{size.6x}" } }, "content": { - "borderRadius": "{borderRadius.300}", + "borderRadius": "{size.3x}", "padding": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.4x}", - "400": "{spacing.6x}", - "500": "{spacing.7x}" + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.4x}", + "400": "{size.6x}", + "500": "{size.7x}" }, - "borderWidth": "{sizing.min}", + "borderWidth": "{size.min}", "gap": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.3x}", - "400": "{spacing.4x}" + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.3x}", + "400": "{size.4x}" } }, "navigation": { "width": { - "100": "{borderWidth.100}", - "200": "{borderWidth.300}" + "100": "{size.min}", + "200": "{size.1x}" }, - "borderRadius": "{borderRadius.100}", + "borderRadius": "{size.1x}", "padding": { - "100": "{spacing.1x}", - "200": "{spacing.3x}", - "300": "{spacing.4x}", - "400": "{spacing.6x}" + "100": "{size.1x}", + "200": "{size.3x}", + "300": "{size.4x}", + "400": "{size.6x}" }, "size": { - "100": "{sizing.1x}", - "200": "{sizing.2x}", - "300": "{sizing.5x}", - "400": "{sizing.8x}", - "500": "{sizing.16x}" + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.5x}", + "400": "{size.8x}", + "500": "{size.16x}" }, "submenu": { - "padding": "{spacing.5x}" + "padding": "{size.5x}" }, "list": { "padding": { - "100": "{spacing.1x}", - "200": "{spacing.2x}" + "100": "{size.1x}", + "200": "{size.2x}" }, - "gap": "{spacing.1x}" + "gap": "{size.1x}" }, "item": { - "padding": "{spacing.2x} {spacing.3x}", - "borderRadius": "{borderRadius.200}", - "gap": "{spacing.2x}" + "padding": "{size.2x} {size.3x}", + "borderRadius": "{size.2x}", + "gap": "{size.2x}" }, "submenuLabel": { - "padding": "{spacing.2x} {spacing.3x}", + "padding": "{size.2x} {size.3x}", "fontWeight": "{fonts.fontWeight.regular}" }, "submenuIcon": { @@ -702,213 +613,213 @@ "transitionDuration": "{transition.duration.200}" }, "select": { - "borderRadius": "{borderRadius.300}", - "padding": "{spacing.1x}" + "borderRadius": "{size.3x}", + "padding": "{size.1x}" }, - "borderWidth": "{borderWidth.100}", + "borderWidth": "{size.min}", "icon": { "size": { - "100": "{sizing.4x}", - "200": "{sizing.6x}", - "300": "{sizing.7x}", - "400": "{sizing.8x}", - "500": "{sizing.9x}" + "100": "{size.4x}", + "200": "{size.6x}", + "300": "{size.7x}", + "400": "{size.8x}", + "500": "{size.9x}" } }, "popover": { - "borderRadius": "{borderRadius.200}", + "borderRadius": "{size.2x}", "width": { - "100": "{sizing.2x}", - "200": "{sizing.3x}" + "100": "{size.2x}", + "200": "{size.3x}" }, "padding": { - "100": "{spacing.3x}", - "200": "{spacing.5x}" + "100": "{size.3x}", + "200": "{size.5x}" } }, "modal": { - "borderRadius": "{borderRadius.500}", + "borderRadius": "{size.6x}", "padding": { - "100": "{spacing.4x}", - "200": "{spacing.5x}", - "300": "{spacing.6x}" + "100": "{size.4x}", + "200": "{size.5x}", + "300": "{size.6x}" } }, "gap": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.3x}", - "400": "{spacing.4x}" + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.3x}", + "400": "{size.4x}" }, - "width": "{sizing.100x}", + "width": "{size.100x}", "drawer": { - "padding": "{spacing.2x}" + "padding": "{size.2x}" }, "sm": { - "width": "{sizing.80x}" + "width": "{size.80x}" }, "lg": { - "width": "{sizing.120x}" + "width": "{size.120x}" }, "xlg": { - "width": "{sizing.128x}" + "width": "{size.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}" + "100": "{size.min}", + "200": "{size.1x}", + "300": "{size.2x}", + "400": "{size.3x}", + "500": "{size.4x}", + "550": "{size.5x}", + "600": "{size.6x}", + "650": "{size.7x}", + "700": "{size.8x}", + "800": "{size.12x}", + "900": "{size.16x}" }, "icon": { "size": { - "100": "{sizing.2x}", - "200": "{sizing.4x}", - "300": "{sizing.6x}", - "350": "{sizing.7x}", - "400": "{sizing.8x}", - "500": "{sizing.9x}" + "100": "{size.2x}", + "200": "{size.4x}", + "300": "{size.6x}", + "350": "{size.7x}", + "400": "{size.8x}", + "500": "{size.9x}" } }, "padding": { - "100": "{spacing.2x}", - "200": "{spacing.4x}" + "100": "{size.2x}", + "200": "{size.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}" + "100": "{size.2x}", + "200": "{size.3x}", + "300": "{size.4x}", + "400": "{size.5x}", + "500": "{size.6x}", + "600": "{size.7x}", + "650": "{size.8x}", + "700": "{size.9x}", + "750": "{size.10x}", + "800": "{size.11x}", + "850": "{size.12x}", + "900": "{size.16x}" }, "gap": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.3x}", - "400": "{spacing.4x}" + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.3x}", + "400": "{size.4x}" } }, "data": { "padding": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.3x}", - "400": "{spacing.4x}", - "500": "{spacing.5x}" + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.3x}", + "400": "{size.4x}", + "500": "{size.5x}" }, "icon": { "size": { - "100": "{sizing.4x}", - "200": "{sizing.5x}", - "300": "{sizing.6x}", - "400": "{sizing.7x}", - "500": "{sizing.8x}", - "600": "{sizing.9x}", - "700": "{sizing.10x}" + "100": "{size.4x}", + "200": "{size.5x}", + "300": "{size.6x}", + "400": "{size.7x}", + "500": "{size.8x}", + "600": "{size.9x}", + "700": "{size.10x}" } }, "transitionDuration": "{transition.duration.200}", - "borderWidth": "{borderWidth.none}", - "borderRadius": "{borderRadius.100}", + "borderWidth": "{size.none}", + "borderRadius": "{size.1x}", "gap": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.3x}" + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.3x}" }, "width": { - "100": "{sizing.min}", - "200": "{sizing.1x}", - "300": "{sizing.2x}", - "400": "{sizing.20x}" + "100": "{size.min}", + "200": "{size.1x}", + "300": "{size.2x}", + "400": "{size.20x}" } }, "media": { "size": { - "100": "{sizing.1x}", - "200": "{sizing.2x}", - "300": "{sizing.8x}", - "400": "{sizing.10x}", - "500": "{sizing.14x}", - "600": "{sizing.16x}" + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.8x}", + "400": "{size.10x}", + "500": "{size.14x}", + "600": "{size.16x}" }, "borderRadius": { - "100": "{borderRadius.200}", - "200": "{borderRadius.300}", - "300": "{borderRadius.400}", - "400": "{borderRadius.500}", - "max": "{borderRadius.max}" + "100": "{size.2x}", + "200": "{size.3x}", + "300": "{size.4x}", + "400": "{size.6x}", + "max": "{size.pill}" }, "icon": { "size": { - "100": "{sizing.4x}", - "200": "{sizing.6x}", - "300": "{sizing.8x}" + "100": "{size.4x}", + "200": "{size.6x}", + "300": "{size.8x}" } }, "transitionDuration": "{transition.duration.200}", "padding": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.3x}", - "400": "{spacing.4x}", - "500": "{spacing.5x}", - "600": "{spacing.6x}" + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.3x}", + "400": "{size.4x}", + "500": "{size.5x}", + "600": "{size.6x}" }, "gap": { - "100": "{spacing.1x}", - "200": "{spacing.2x}" + "100": "{size.1x}", + "200": "{size.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}" + "100": "{size.2x}", + "200": "{size.4x}", + "300": "{size.5x}", + "400": "{size.6x}", + "500": "{size.7x}", + "600": "{size.8x}", + "700": "{size.10x}", + "800": "{size.11x}", + "850": "{size.14x}", + "900": "{size.16x}" }, "borderRadius": { - "100": "{borderRadius.300}", - "200": "{borderRadius.400}", - "max": "{borderRadius.max}" + "100": "{size.3x}", + "200": "{size.4x}", + "max": "{size.pill}" }, "transitionDuration": "{transition.duration.200}", "padding": { - "100": "{spacing.1x}", - "200": "{spacing.2x}", - "300": "{spacing.3x}", - "400": "{spacing.4x}", - "500": "{spacing.5x}", - "600": "{spacing.6x}" + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.3x}", + "400": "{size.4x}", + "500": "{size.5x}", + "600": "{size.6x}" }, "gap": { - "100": "{spacing.2x}", - "200": "{spacing.3x}", - "300": "{spacing.4x}" + "100": "{size.2x}", + "200": "{size.3x}", + "300": "{size.4x}" }, "width": { - "100": "{sizing.min}" + "100": "{size.min}" } }, "colorScheme": { From 5fe1166ace50ae2cddb281a2f1c8656a6d183b0c Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Thu, 18 Jun 2026 17:12:50 +0800 Subject: [PATCH 09/46] =?UTF-8?q?=D1=83=D0=B4=D0=B0=D0=BB=D0=B8=D1=82?= =?UTF-8?q?=D1=8C=20=D0=BC=D1=91=D1=80=D1=82=D0=B2=D1=8B=D0=B5=20dimension?= =?UTF-8?q?-=D0=B1=D0=B0=D0=BA=D0=B5=D1=82=D1=8B=20(list/content/navigatio?= =?UTF-8?q?n/overlay/feedback/data/media/controls);=20=D0=BE=D1=81=D1=82?= =?UTF-8?q?=D0=B0=D0=B2=D0=B8=D1=82=D1=8C=20Aura-compat=20colorScheme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../providers/prime-preset/tokens/tokens.json | 291 ------------------ 1 file changed, 291 deletions(-) diff --git a/src/lib/providers/prime-preset/tokens/tokens.json b/src/lib/providers/prime-preset/tokens/tokens.json index 5b2fbfeb..53cadda9 100644 --- a/src/lib/providers/prime-preset/tokens/tokens.json +++ b/src/lib/providers/prime-preset/tokens/tokens.json @@ -444,24 +444,6 @@ } }, "semantic": { - "list": { - "padding": "{size.1x}", - "gap": { - "100": "{size.1x}", - "200": "{size.2x}" - }, - "header": { - "padding": "{size.4x} {size.4x} 0 {size.4x}" - }, - "option": { - "padding": "{size.2x} {size.3x}", - "borderRadius": "{size.2x}" - }, - "optionGroup": { - "padding": "{size.2x} {size.3x}", - "fontWeight": "{fonts.fontWeight.demibold}" - } - }, "focusRing": { "width": "{size.1x}", "style": "none", @@ -549,279 +531,6 @@ "paddingY": "{size.6x}" } }, - "content": { - "borderRadius": "{size.3x}", - "padding": { - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.4x}", - "400": "{size.6x}", - "500": "{size.7x}" - }, - "borderWidth": "{size.min}", - "gap": { - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.3x}", - "400": "{size.4x}" - } - }, - "navigation": { - "width": { - "100": "{size.min}", - "200": "{size.1x}" - }, - "borderRadius": "{size.1x}", - "padding": { - "100": "{size.1x}", - "200": "{size.3x}", - "300": "{size.4x}", - "400": "{size.6x}" - }, - "size": { - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.5x}", - "400": "{size.8x}", - "500": "{size.16x}" - }, - "submenu": { - "padding": "{size.5x}" - }, - "list": { - "padding": { - "100": "{size.1x}", - "200": "{size.2x}" - }, - "gap": "{size.1x}" - }, - "item": { - "padding": "{size.2x} {size.3x}", - "borderRadius": "{size.2x}", - "gap": "{size.2x}" - }, - "submenuLabel": { - "padding": "{size.2x} {size.3x}", - "fontWeight": "{fonts.fontWeight.regular}" - }, - "submenuIcon": { - "size": "{fonts.fontSize.500}" - } - }, - "overlay": { - "mask": { - "transitionDuration": "{transition.duration.200}" - }, - "select": { - "borderRadius": "{size.3x}", - "padding": "{size.1x}" - }, - "borderWidth": "{size.min}", - "icon": { - "size": { - "100": "{size.4x}", - "200": "{size.6x}", - "300": "{size.7x}", - "400": "{size.8x}", - "500": "{size.9x}" - } - }, - "popover": { - "borderRadius": "{size.2x}", - "width": { - "100": "{size.2x}", - "200": "{size.3x}" - }, - "padding": { - "100": "{size.3x}", - "200": "{size.5x}" - } - }, - "modal": { - "borderRadius": "{size.6x}", - "padding": { - "100": "{size.4x}", - "200": "{size.5x}", - "300": "{size.6x}" - } - }, - "gap": { - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.3x}", - "400": "{size.4x}" - }, - "width": "{size.100x}", - "drawer": { - "padding": "{size.2x}" - }, - "sm": { - "width": "{size.80x}" - }, - "lg": { - "width": "{size.120x}" - }, - "xlg": { - "width": "{size.128x}" - } - }, - "feedback": { - "transitionDuration": "{transition.duration.200}", - "width": { - "100": "{size.min}", - "200": "{size.1x}", - "300": "{size.2x}", - "400": "{size.3x}", - "500": "{size.4x}", - "550": "{size.5x}", - "600": "{size.6x}", - "650": "{size.7x}", - "700": "{size.8x}", - "800": "{size.12x}", - "900": "{size.16x}" - }, - "icon": { - "size": { - "100": "{size.2x}", - "200": "{size.4x}", - "300": "{size.6x}", - "350": "{size.7x}", - "400": "{size.8x}", - "500": "{size.9x}" - } - }, - "padding": { - "100": "{size.2x}", - "200": "{size.4x}" - }, - "height": { - "100": "{size.2x}", - "200": "{size.3x}", - "300": "{size.4x}", - "400": "{size.5x}", - "500": "{size.6x}", - "600": "{size.7x}", - "650": "{size.8x}", - "700": "{size.9x}", - "750": "{size.10x}", - "800": "{size.11x}", - "850": "{size.12x}", - "900": "{size.16x}" - }, - "gap": { - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.3x}", - "400": "{size.4x}" - } - }, - "data": { - "padding": { - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.3x}", - "400": "{size.4x}", - "500": "{size.5x}" - }, - "icon": { - "size": { - "100": "{size.4x}", - "200": "{size.5x}", - "300": "{size.6x}", - "400": "{size.7x}", - "500": "{size.8x}", - "600": "{size.9x}", - "700": "{size.10x}" - } - }, - "transitionDuration": "{transition.duration.200}", - "borderWidth": "{size.none}", - "borderRadius": "{size.1x}", - "gap": { - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.3x}" - }, - "width": { - "100": "{size.min}", - "200": "{size.1x}", - "300": "{size.2x}", - "400": "{size.20x}" - } - }, - "media": { - "size": { - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.8x}", - "400": "{size.10x}", - "500": "{size.14x}", - "600": "{size.16x}" - }, - "borderRadius": { - "100": "{size.2x}", - "200": "{size.3x}", - "300": "{size.4x}", - "400": "{size.6x}", - "max": "{size.pill}" - }, - "icon": { - "size": { - "100": "{size.4x}", - "200": "{size.6x}", - "300": "{size.8x}" - } - }, - "transitionDuration": "{transition.duration.200}", - "padding": { - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.3x}", - "400": "{size.4x}", - "500": "{size.5x}", - "600": "{size.6x}" - }, - "gap": { - "100": "{size.1x}", - "200": "{size.2x}" - } - }, - "controls": { - "iconOnly": { - "100": "{size.2x}", - "200": "{size.4x}", - "300": "{size.5x}", - "400": "{size.6x}", - "500": "{size.7x}", - "600": "{size.8x}", - "700": "{size.10x}", - "800": "{size.11x}", - "850": "{size.14x}", - "900": "{size.16x}" - }, - "borderRadius": { - "100": "{size.3x}", - "200": "{size.4x}", - "max": "{size.pill}" - }, - "transitionDuration": "{transition.duration.200}", - "padding": { - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.3x}", - "400": "{size.4x}", - "500": "{size.5x}", - "600": "{size.6x}" - }, - "gap": { - "100": "{size.2x}", - "200": "{size.3x}", - "300": "{size.4x}" - }, - "width": { - "100": "{size.min}" - } - }, "colorScheme": { "light": { "success": { From a3001b8c39fe6ac0efaf07de640055ffcda74002 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Thu, 18 Jun 2026 17:30:46 +0800 Subject: [PATCH 10/46] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81=D1=8B=20=D1=80?= =?UTF-8?q?=D0=B5=D0=B2=D1=8C=D1=8E:=20confirmpopup=20padding=20(4=20?= =?UTF-8?q?=D0=B7=D0=BD=D0=B0=D1=87=D0=B5=D0=BD=D0=B8=D1=8F),=20accordion?= =?UTF-8?q?=20borderWidth,=20=D1=83=D0=B1=D1=80=D0=B0=D1=82=D1=8C=20=D0=BC?= =?UTF-8?q?=D1=83=D1=81=D0=BE=D1=80=D0=BD=D1=8B=D0=B5=20=D0=BA=D0=BB=D1=8E?= =?UTF-8?q?=D1=87=D0=B8=20colorScheme,=20=D0=B2=D0=B0=D0=BB=D0=B8=D0=B4?= =?UTF-8?q?=D0=B0=D1=82=D0=BE=D1=80=20=D0=BD=D0=B0=20baseline-=D1=84=D0=B8?= =?UTF-8?q?=D0=BA=D1=81=D1=82=D1=83=D1=80=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- scripts/tokens/baseline.json | 5072 +++++++++++++++++ scripts/tokens/validate.py | 14 +- .../providers/prime-preset/tokens/tokens.json | 156 +- 3 files changed, 5086 insertions(+), 156 deletions(-) create mode 100644 scripts/tokens/baseline.json diff --git a/scripts/tokens/baseline.json b/scripts/tokens/baseline.json new file mode 100644 index 00000000..869e9334 --- /dev/null +++ b/scripts/tokens/baseline.json @@ -0,0 +1,5072 @@ +{ + "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/validate.py b/scripts/tokens/validate.py index 8d8ec7cd..31b973ef 100644 --- a/scripts/tokens/validate.py +++ b/scripts/tokens/validate.py @@ -1,5 +1,7 @@ import json, re, sys -BASE="src/lib/providers/prime-preset/tokens/tokens.json" # текущий боевой = эталон значений +# Эталон значений = pre-migration снимок (фикстура). Можно переопределить argv[2]. +# Использование: python3 validate.py [] +DEFAULT_BASE="scripts/tokens/baseline.json" def get(t,p): c=t for x in p.split("."): @@ -22,8 +24,10 @@ def rp(m): return r(node,d+1) return re.sub(r"\{([^}]+)\}",rp,val) return r -def main(cand): - base=json.load(open(BASE)); new=json.load(open(cand)) +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) @@ -59,5 +63,7 @@ def walk(d): print(f"R11_PRIMITIVE_REFS={len(prim_refs)} {sorted(set(prim_refs))[:5]}") if dang: globals()['FAIL']=True if __name__=="__main__": - FAIL=False; main(sys.argv[1]) + 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/lib/providers/prime-preset/tokens/tokens.json b/src/lib/providers/prime-preset/tokens/tokens.json index 53cadda9..d5599dd8 100644 --- a/src/lib/providers/prime-preset/tokens/tokens.json +++ b/src/lib/providers/prime-preset/tokens/tokens.json @@ -953,81 +953,7 @@ "strong": "{colors.solid.zinc.900}", "strongMuted": "{colors.solid.zinc.900}", "strongHover": "{colors.solid.zinc.700}" - }, - "ound": { - "info": { - "border": "{colors.solid.blue.400}", - "mutedBorder": "{colors.solid.blue.300}", - "subtleActive": "{colors.solid.blue.200}", - "deep": "{colors.solid.blue.900}" - }, - "warning": { - "border": "{colors.solid.yellow.400}", - "mutedBorder": "{colors.solid.yellow.300}", - "subtleActive": "{colors.solid.yellow.200}", - "deep": "{colors.solid.yellow.900}" - }, - "danger": { - "border": "{colors.solid.red.400}", - "mutedBorder": "{colors.solid.red.300}", - "subtleActive": "{colors.solid.red.200}", - "deep": "{colors.solid.red.900}" - }, - "success": { - "mutedBorder": "{colors.solid.green.300}", - "border": "{colors.solid.green.400}", - "subtleActive": "{colors.solid.green.200}", - "deep": "{colors.solid.green.900}" - }, - "help": { - "mutedBorder": "{colors.solid.purple.300}", - "border": "{colors.solid.purple.400}", - "subtleActive": "{colors.solid.purple.200}", - "deep": "{colors.solid.purple.900}" - } - }, - "nfo": { - "deepest": "{colors.solid.blue.950}", - "bold": "{colors.solid.blue.500}" - }, - "uccess": { - "deepest": "{colors.solid.green.950}", - "bold": "{colors.solid.green.500}" - }, - "arning": { - "deepest": "{colors.solid.yellow.950}", - "bold": "{colors.solid.yellow.500}" - }, - "elp": { - "deepest": "{colors.solid.purple.950}", - "bold": "{colors.solid.purple.500}" - }, - "anger": { - "deepest": "{colors.solid.red.950}", - "bold": "{colors.solid.red.500}" - }, - "": { - "success": { - "subtleActive": "{colors.solid.green.200}" - }, - "info": { - "boldHover": "{colors.solid.blue.600}", - "bold": "{colors.solid.blue.500}" - }, - "warning": { - "boldHover": "{colors.solid.yellow.600}", - "bold": "{colors.solid.yellow.500}" - }, - "help": { - "boldHover": "{colors.solid.purple.600}", - "bold": "{colors.solid.purple.500}" - }, - "danger": { - "boldHover": "{colors.solid.red.600}", - "bold": "{colors.solid.red.500}" - } - }, - "ransparent": "rgba(255, 255, 255, 0.0001)" + } }, "dark": { "success": { @@ -1450,81 +1376,7 @@ "strong": "{colors.alpha.white.1000}", "strongMuted": "{colors.solid.zinc.100}", "strongHover": "{colors.solid.zinc.300}" - }, - "ound": { - "info": { - "border": "{colors.solid.blue.600}", - "mutedBorder": "{colors.solid.blue.700}", - "subtleActive": "{colors.solid.blue.800}", - "deep": "{colors.solid.blue.100}" - }, - "warning": { - "border": "{colors.solid.yellow.600}", - "mutedBorder": "{colors.solid.yellow.700}", - "subtleActive": "{colors.solid.yellow.800}", - "deep": "{colors.solid.yellow.100}" - }, - "danger": { - "border": "{colors.solid.red.600}", - "mutedBorder": "{colors.solid.red.700}", - "subtleActive": "{colors.solid.red.800}", - "deep": "{colors.solid.red.100}" - }, - "success": { - "mutedBorder": "{colors.solid.green.700}", - "border": "{colors.solid.green.600}", - "subtleActive": "{colors.solid.green.800}", - "deep": "{colors.solid.green.100}" - }, - "help": { - "mutedBorder": "{colors.solid.purple.700}", - "border": "{colors.solid.purple.600}", - "subtleActive": "{colors.solid.purple.800}", - "deep": "{colors.solid.purple.100}" - } - }, - "nfo": { - "deepest": "{colors.solid.blue.50}", - "bold": "{colors.solid.blue.500}" - }, - "uccess": { - "deepest": "{colors.solid.green.50}", - "bold": "{colors.solid.green.500}" - }, - "arning": { - "deepest": "{colors.solid.yellow.50}", - "bold": "{colors.solid.yellow.500}" - }, - "elp": { - "deepest": "{colors.solid.purple.50}", - "bold": "{colors.solid.purple.500}" - }, - "anger": { - "deepest": "{colors.solid.red.50}", - "bold": "{colors.solid.red.500}" - }, - "": { - "success": { - "subtleActive": "{colors.solid.green.800}" - }, - "info": { - "boldHover": "{colors.solid.blue.400}", - "bold": "{colors.solid.blue.500}" - }, - "warning": { - "boldHover": "{colors.solid.yellow.400}", - "bold": "{colors.solid.yellow.500}" - }, - "help": { - "boldHover": "{colors.solid.purple.400}", - "bold": "{colors.solid.purple.500}" - }, - "danger": { - "boldHover": "{colors.solid.red.400}", - "bold": "{colors.solid.red.500}" - } - }, - "ransparent": "rgba(0, 0, 0, 0.0001)" + } } }, "dimension": { @@ -1797,7 +1649,7 @@ "borderColor": "{border.default}" }, "content": { - "borderWidth": "{dimension.size.100} {dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.none}", + "borderWidth": "{dimension.borderWidth.100} {dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.none}", "borderColor": "{border.transparent}", "background": "{background.transparent}", "color": "{text.default}", @@ -2736,7 +2588,7 @@ }, "footer": { "gap": "{dimension.space.200}", - "padding": "0 {dimension.space.300} {dimension.space.500} {dimension.space.300} {dimension.space.500} {dimension.space.300} {dimension.space.500}" + "padding": "0 {dimension.space.300} {dimension.space.500} {dimension.space.300}" } }, "contextmenu": { From 9c529cb3f9a51ae5cbbc665ccd74ad9fdec43dc2 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Thu, 18 Jun 2026 20:32:09 +0800 Subject: [PATCH 11/46] =?UTF-8?q?=D0=BB=D0=B8=D0=BD-=D0=BA=D0=BE=D0=BD?= =?UTF-8?q?=D1=81=D0=BE=D0=BB=D0=B8=D0=B4=D0=B0=D1=86=D0=B8=D1=8F=20semant?= =?UTF-8?q?ic:=20=D1=81=D1=82=D0=B0=D1=82=D1=83=D1=81=20=D1=81=D0=B2=D1=91?= =?UTF-8?q?=D1=80=D0=BD=D1=83=D1=82=20=D0=B4=D0=BE=20structured=20subtle/b?= =?UTF-8?q?old/text/border=20(35=20=D1=80=D0=BE=D0=BB=D0=B5=D0=B9),=20?= =?UTF-8?q?=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D1=8B=20?= =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D1=80=D0=B0=D0=B7=D0=B2=D0=B5=D0=B4?= =?UTF-8?q?=D0=B5=D0=BD=D1=8B=20(=D0=BD=D0=B0=D0=BC=D0=B5=D1=80=D0=B5?= =?UTF-8?q?=D0=BD=D0=BD=D1=8B=D0=B5=20=D1=81=D0=B4=D0=B2=D0=B8=D0=B3=D0=B8?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../providers/prime-preset/tokens/tokens.json | 973 +++++++++++------- 1 file changed, 582 insertions(+), 391 deletions(-) diff --git a/src/lib/providers/prime-preset/tokens/tokens.json b/src/lib/providers/prime-preset/tokens/tokens.json index d5599dd8..f1e43382 100644 --- a/src/lib/providers/prime-preset/tokens/tokens.json +++ b/src/lib/providers/prime-preset/tokens/tokens.json @@ -444,6 +444,24 @@ } }, "semantic": { + "list": { + "padding": "{size.1x}", + "gap": { + "100": "{size.1x}", + "200": "{size.2x}" + }, + "header": { + "padding": "{size.4x} {size.4x} 0 {size.4x}" + }, + "option": { + "padding": "{size.2x} {size.3x}", + "borderRadius": "{size.2x}" + }, + "optionGroup": { + "padding": "{size.2x} {size.3x}", + "fontWeight": "{fonts.fontWeight.demibold}" + } + }, "focusRing": { "width": "{size.1x}", "style": "none", @@ -531,6 +549,279 @@ "paddingY": "{size.6x}" } }, + "content": { + "borderRadius": "{size.3x}", + "padding": { + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.4x}", + "400": "{size.6x}", + "500": "{size.7x}" + }, + "borderWidth": "{size.min}", + "gap": { + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.3x}", + "400": "{size.4x}" + } + }, + "navigation": { + "width": { + "100": "{size.min}", + "200": "{size.1x}" + }, + "borderRadius": "{size.1x}", + "padding": { + "100": "{size.1x}", + "200": "{size.3x}", + "300": "{size.4x}", + "400": "{size.6x}" + }, + "size": { + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.5x}", + "400": "{size.8x}", + "500": "{size.16x}" + }, + "submenu": { + "padding": "{size.5x}" + }, + "list": { + "padding": { + "100": "{size.1x}", + "200": "{size.2x}" + }, + "gap": "{size.1x}" + }, + "item": { + "padding": "{size.2x} {size.3x}", + "borderRadius": "{size.2x}", + "gap": "{size.2x}" + }, + "submenuLabel": { + "padding": "{size.2x} {size.3x}", + "fontWeight": "{fonts.fontWeight.regular}" + }, + "submenuIcon": { + "size": "{fonts.fontSize.500}" + } + }, + "overlay": { + "mask": { + "transitionDuration": "{transition.duration.200}" + }, + "select": { + "borderRadius": "{size.3x}", + "padding": "{size.1x}" + }, + "borderWidth": "{size.min}", + "icon": { + "size": { + "100": "{size.4x}", + "200": "{size.6x}", + "300": "{size.7x}", + "400": "{size.8x}", + "500": "{size.9x}" + } + }, + "popover": { + "borderRadius": "{size.2x}", + "width": { + "100": "{size.2x}", + "200": "{size.3x}" + }, + "padding": { + "100": "{size.3x}", + "200": "{size.5x}" + } + }, + "modal": { + "borderRadius": "{size.6x}", + "padding": { + "100": "{size.4x}", + "200": "{size.5x}", + "300": "{size.6x}" + } + }, + "gap": { + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.3x}", + "400": "{size.4x}" + }, + "width": "{size.100x}", + "drawer": { + "padding": "{size.2x}" + }, + "sm": { + "width": "{size.80x}" + }, + "lg": { + "width": "{size.120x}" + }, + "xlg": { + "width": "{size.128x}" + } + }, + "feedback": { + "transitionDuration": "{transition.duration.200}", + "width": { + "100": "{size.min}", + "200": "{size.1x}", + "300": "{size.2x}", + "400": "{size.3x}", + "500": "{size.4x}", + "550": "{size.5x}", + "600": "{size.6x}", + "650": "{size.7x}", + "700": "{size.8x}", + "800": "{size.12x}", + "900": "{size.16x}" + }, + "icon": { + "size": { + "100": "{size.2x}", + "200": "{size.4x}", + "300": "{size.6x}", + "350": "{size.7x}", + "400": "{size.8x}", + "500": "{size.9x}" + } + }, + "padding": { + "100": "{size.2x}", + "200": "{size.4x}" + }, + "height": { + "100": "{size.2x}", + "200": "{size.3x}", + "300": "{size.4x}", + "400": "{size.5x}", + "500": "{size.6x}", + "600": "{size.7x}", + "650": "{size.8x}", + "700": "{size.9x}", + "750": "{size.10x}", + "800": "{size.11x}", + "850": "{size.12x}", + "900": "{size.16x}" + }, + "gap": { + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.3x}", + "400": "{size.4x}" + } + }, + "data": { + "padding": { + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.3x}", + "400": "{size.4x}", + "500": "{size.5x}" + }, + "icon": { + "size": { + "100": "{size.4x}", + "200": "{size.5x}", + "300": "{size.6x}", + "400": "{size.7x}", + "500": "{size.8x}", + "600": "{size.9x}", + "700": "{size.10x}" + } + }, + "transitionDuration": "{transition.duration.200}", + "borderWidth": "{size.none}", + "borderRadius": "{size.1x}", + "gap": { + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.3x}" + }, + "width": { + "100": "{size.min}", + "200": "{size.1x}", + "300": "{size.2x}", + "400": "{size.20x}" + } + }, + "media": { + "size": { + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.8x}", + "400": "{size.10x}", + "500": "{size.14x}", + "600": "{size.16x}" + }, + "borderRadius": { + "100": "{size.2x}", + "200": "{size.3x}", + "300": "{size.4x}", + "400": "{size.6x}", + "max": "{size.pill}" + }, + "icon": { + "size": { + "100": "{size.4x}", + "200": "{size.6x}", + "300": "{size.8x}" + } + }, + "transitionDuration": "{transition.duration.200}", + "padding": { + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.3x}", + "400": "{size.4x}", + "500": "{size.5x}", + "600": "{size.6x}" + }, + "gap": { + "100": "{size.1x}", + "200": "{size.2x}" + } + }, + "controls": { + "iconOnly": { + "100": "{size.2x}", + "200": "{size.4x}", + "300": "{size.5x}", + "400": "{size.6x}", + "500": "{size.7x}", + "600": "{size.8x}", + "700": "{size.10x}", + "800": "{size.11x}", + "850": "{size.14x}", + "900": "{size.16x}" + }, + "borderRadius": { + "100": "{size.3x}", + "200": "{size.4x}", + "max": "{size.pill}" + }, + "transitionDuration": "{transition.duration.200}", + "padding": { + "100": "{size.1x}", + "200": "{size.2x}", + "300": "{size.3x}", + "400": "{size.4x}", + "500": "{size.5x}", + "600": "{size.6x}" + }, + "gap": { + "100": "{size.2x}", + "200": "{size.3x}", + "300": "{size.4x}" + }, + "width": { + "100": "{size.min}" + } + }, "colorScheme": { "light": { "success": { @@ -705,17 +996,7 @@ "brand": "{colors.solid.green.600}", "link": "{colors.solid.green.600}", "linkHover": "{colors.solid.green.700}", - "success": "{colors.solid.green.700}", - "info": "{colors.solid.blue.600}", - "warning": "{colors.solid.yellow.600}", - "danger": "{colors.solid.red.600}", "neutral": "{colors.solid.zinc.600}", - "help": "{colors.solid.purple.600}", - "successStrong": "{colors.solid.green.900}", - "infoStrong": "{colors.solid.blue.900}", - "warningStrong": "{colors.solid.yellow.900}", - "dangerStrong": "{colors.solid.red.900}", - "helpStrong": "{colors.solid.purple.900}", "hover": { "default": "{colors.solid.zinc.700}", "subtle": "{colors.solid.zinc.400}", @@ -724,17 +1005,12 @@ }, "defaultHover": "{colors.solid.zinc.950}", "neutralHover": "{colors.solid.zinc.950}", - "infoDeepest": "{colors.solid.blue.950}", - "successDeepest": "{colors.solid.green.950}", - "warningDeepest": "{colors.solid.yellow.950}", - "helpDeepest": "{colors.solid.purple.950}", - "dangerDeepest": "{colors.solid.red.950}", - "successBold": "{colors.solid.green.500}", - "infoBold": "{colors.solid.blue.500}", - "warningBold": "{colors.solid.yellow.500}", - "helpBold": "{colors.solid.purple.500}", - "dangerBold": "{colors.solid.red.500}", - "transparent": "rgba(255, 255, 255, 0.0001)" + "transparent": "rgba(255, 255, 255, 0.0001)", + "success": "{colors.solid.green.600}", + "info": "{colors.solid.blue.600}", + "warning": "{colors.solid.yellow.600}", + "danger": "{colors.solid.red.600}", + "help": "{colors.solid.purple.600}" }, "content": { "background": "{colors.alpha.white.1000}", @@ -832,81 +1108,60 @@ "boldHover": "{colors.solid.green.600}", "boldActive": "{colors.solid.green.700}" }, + "neutral": { + "subtle": "{colors.solid.zinc.50}", + "subtleHover": "{colors.solid.zinc.100}", + "bold": "{colors.solid.zinc.500}", + "boldHover": "{colors.solid.zinc.600}" + }, + "selected": "{colors.solid.zinc.900}", + "disabled": "{colors.solid.zinc.200}", + "scrim": { + "default": "{colors.alpha.black.400}", + "modal": "{colors.alpha.black.300}" + }, + "translucent": { + "light": { + "subtle": "{colors.alpha.white.100}", + "default": "{colors.alpha.white.200}", + "strong": "{colors.alpha.white.500}" + }, + "dark": { + "default": "{colors.alpha.black.500}" + } + }, + "transparent": "rgba(255, 255, 255, 0.0001)", + "selectedStrong": "{colors.solid.zinc.700}", "success": { "subtle": "{colors.solid.green.50}", "subtleHover": "{colors.solid.green.100}", - "indicator": "{colors.solid.green.400}", "bold": "{colors.solid.green.500}", - "boldHover": "{colors.solid.green.600}", - "deep": "{colors.solid.green.900}", - "mutedBorder": "{colors.solid.green.300}", - "border": "{colors.solid.green.400}", - "subtleActive": "{colors.solid.green.200}" + "boldHover": "{colors.solid.green.600}" }, "info": { "subtle": "{colors.solid.blue.50}", "subtleHover": "{colors.solid.blue.100}", "bold": "{colors.solid.blue.500}", - "boldHover": "{colors.solid.blue.600}", - "deep": "{colors.solid.blue.900}", - "border": "{colors.solid.blue.400}", - "mutedBorder": "{colors.solid.blue.300}", - "subtleActive": "{colors.solid.blue.200}" + "boldHover": "{colors.solid.blue.600}" }, "warning": { "subtle": "{colors.solid.yellow.50}", "subtleHover": "{colors.solid.yellow.100}", "bold": "{colors.solid.yellow.500}", - "boldHover": "{colors.solid.yellow.600}", - "deep": "{colors.solid.yellow.900}", - "border": "{colors.solid.yellow.400}", - "mutedBorder": "{colors.solid.yellow.300}", - "subtleActive": "{colors.solid.yellow.200}" + "boldHover": "{colors.solid.yellow.600}" }, "danger": { "subtle": "{colors.solid.red.50}", "subtleHover": "{colors.solid.red.100}", "bold": "{colors.solid.red.500}", - "boldHover": "{colors.solid.red.600}", - "deep": "{colors.solid.red.900}", - "border": "{colors.solid.red.400}", - "mutedBorder": "{colors.solid.red.300}", - "subtleActive": "{colors.solid.red.200}" - }, - "neutral": { - "subtle": "{colors.solid.zinc.50}", - "subtleHover": "{colors.solid.zinc.100}", - "bold": "{colors.solid.zinc.500}", - "boldHover": "{colors.solid.zinc.600}" + "boldHover": "{colors.solid.red.600}" }, "help": { "subtle": "{colors.solid.purple.50}", "subtleHover": "{colors.solid.purple.100}", "bold": "{colors.solid.purple.500}", - "boldHover": "{colors.solid.purple.600}", - "deep": "{colors.solid.purple.900}", - "mutedBorder": "{colors.solid.purple.300}", - "border": "{colors.solid.purple.400}", - "subtleActive": "{colors.solid.purple.200}" - }, - "selected": "{colors.solid.zinc.900}", - "disabled": "{colors.solid.zinc.200}", - "scrim": { - "default": "{colors.alpha.black.400}", - "modal": "{colors.alpha.black.300}" - }, - "translucent": { - "light": { - "subtle": "{colors.alpha.white.100}", - "default": "{colors.alpha.white.200}", - "strong": "{colors.alpha.white.500}" - }, - "dark": { - "default": "{colors.alpha.black.500}" - } - }, - "transparent": "rgba(255, 255, 255, 0.0001)", - "selectedStrong": "{colors.solid.zinc.700}" + "boldHover": "{colors.solid.purple.600}" + } }, "border": { "subtle": "{colors.solid.zinc.200}", @@ -914,29 +1169,15 @@ "strong": "{colors.solid.zinc.900}", "disabled": "{colors.solid.zinc.200}", "brand": "{colors.solid.green.600}", - "success": "{colors.solid.green.400}", - "info": "{colors.solid.blue.400}", - "warning": "{colors.solid.yellow.400}", - "danger": "{colors.solid.red.400}", "neutral": "{colors.solid.zinc.400}", - "help": "{colors.solid.purple.400}", "inverse": "{colors.solid.zinc.800}", - "successSubtle": "{colors.solid.green.300}", - "infoSubtle": "{colors.solid.blue.300}", - "warningSubtle": "{colors.solid.yellow.300}", - "dangerSubtle": "{colors.solid.red.300}", - "helpSubtle": "{colors.solid.purple.300}", "transparent": "rgba(255, 255, 255, 0.0001)", "checked": "{colors.solid.green.500}", - "successSubtleActive": "{colors.solid.green.200}", - "infoBoldHover": "{colors.solid.blue.600}", - "warningBoldHover": "{colors.solid.yellow.600}", - "helpBoldHover": "{colors.solid.purple.600}", - "dangerBoldHover": "{colors.solid.red.600}", - "infoBold": "{colors.solid.blue.500}", - "warningBold": "{colors.solid.yellow.500}", - "helpBold": "{colors.solid.purple.500}", - "dangerBold": "{colors.solid.red.500}" + "success": "{colors.solid.green.400}", + "info": "{colors.solid.blue.400}", + "warning": "{colors.solid.yellow.400}", + "danger": "{colors.solid.red.400}", + "help": "{colors.solid.purple.400}" }, "icon": { "default": "{colors.solid.zinc.950}", @@ -944,15 +1185,15 @@ "disabled": "{colors.solid.zinc.300}", "onBold": "{colors.alpha.white.1000}", "brand": "{colors.solid.green.600}", + "neutral": "{colors.solid.zinc.600}", + "strong": "{colors.solid.zinc.900}", + "strongMuted": "{colors.solid.zinc.900}", + "strongHover": "{colors.solid.zinc.700}", "success": "{colors.solid.green.600}", "info": "{colors.solid.blue.600}", "warning": "{colors.solid.yellow.600}", "danger": "{colors.solid.red.600}", - "neutral": "{colors.solid.zinc.600}", - "help": "{colors.solid.purple.600}", - "strong": "{colors.solid.zinc.900}", - "strongMuted": "{colors.solid.zinc.900}", - "strongHover": "{colors.solid.zinc.700}" + "help": "{colors.solid.purple.600}" } }, "dark": { @@ -1128,17 +1369,7 @@ "brand": "{colors.solid.green.400}", "link": "{colors.solid.green.400}", "linkHover": "{colors.solid.green.300}", - "success": "{colors.solid.green.400}", - "info": "{colors.solid.blue.400}", - "warning": "{colors.solid.yellow.400}", - "danger": "{colors.solid.red.400}", "neutral": "{colors.solid.zinc.400}", - "help": "{colors.solid.purple.400}", - "successStrong": "{colors.solid.green.100}", - "infoStrong": "{colors.solid.blue.100}", - "warningStrong": "{colors.solid.yellow.100}", - "dangerStrong": "{colors.solid.red.100}", - "helpStrong": "{colors.solid.purple.100}", "hover": { "default": "{colors.solid.zinc.300}", "subtle": "{colors.solid.zinc.600}", @@ -1147,17 +1378,12 @@ }, "defaultHover": "{colors.alpha.white.1000}", "neutralHover": "{colors.solid.zinc.50}", - "infoDeepest": "{colors.solid.blue.50}", - "successDeepest": "{colors.solid.green.50}", - "warningDeepest": "{colors.solid.yellow.50}", - "helpDeepest": "{colors.solid.purple.50}", - "dangerDeepest": "{colors.solid.red.50}", - "successBold": "{colors.solid.green.500}", - "infoBold": "{colors.solid.blue.500}", - "warningBold": "{colors.solid.yellow.500}", - "helpBold": "{colors.solid.purple.500}", - "dangerBold": "{colors.solid.red.500}", - "transparent": "rgba(0, 0, 0, 0.0001)" + "transparent": "rgba(0, 0, 0, 0.0001)", + "success": "{colors.solid.green.400}", + "info": "{colors.solid.blue.400}", + "warning": "{colors.solid.yellow.400}", + "danger": "{colors.solid.red.400}", + "help": "{colors.solid.purple.400}" }, "content": { "background": "{colors.solid.zinc.900}", @@ -1255,81 +1481,60 @@ "boldHover": "{colors.solid.green.400}", "boldActive": "{colors.solid.green.300}" }, + "neutral": { + "subtle": "{colors.solid.zinc.950}", + "subtleHover": "{colors.solid.zinc.900}", + "bold": "{colors.solid.zinc.500}", + "boldHover": "{colors.solid.zinc.400}" + }, + "selected": "{colors.solid.zinc.100}", + "disabled": "{colors.solid.zinc.800}", + "scrim": { + "default": "{colors.alpha.black.600}", + "modal": "{colors.alpha.black.300}" + }, + "translucent": { + "light": { + "subtle": "{colors.alpha.white.100}", + "default": "{colors.alpha.white.200}", + "strong": "{colors.alpha.white.500}" + }, + "dark": { + "default": "{colors.alpha.black.500}" + } + }, + "transparent": "rgba(0, 0, 0, 0.0001)", + "selectedStrong": "{colors.solid.zinc.300}", "success": { "subtle": "{colors.solid.green.950}", "subtleHover": "{colors.solid.green.900}", - "indicator": "{colors.solid.green.400}", "bold": "{colors.solid.green.500}", - "boldHover": "{colors.solid.green.400}", - "deep": "{colors.solid.green.100}", - "mutedBorder": "{colors.solid.green.700}", - "border": "{colors.solid.green.600}", - "subtleActive": "{colors.solid.green.800}" + "boldHover": "{colors.solid.green.400}" }, "info": { "subtle": "{colors.solid.blue.950}", "subtleHover": "{colors.solid.blue.900}", "bold": "{colors.solid.blue.500}", - "boldHover": "{colors.solid.blue.400}", - "deep": "{colors.solid.blue.100}", - "border": "{colors.solid.blue.600}", - "mutedBorder": "{colors.solid.blue.700}", - "subtleActive": "{colors.solid.blue.800}" + "boldHover": "{colors.solid.blue.400}" }, "warning": { "subtle": "{colors.solid.yellow.950}", "subtleHover": "{colors.solid.yellow.900}", "bold": "{colors.solid.yellow.500}", - "boldHover": "{colors.solid.yellow.400}", - "deep": "{colors.solid.yellow.100}", - "border": "{colors.solid.yellow.600}", - "mutedBorder": "{colors.solid.yellow.700}", - "subtleActive": "{colors.solid.yellow.800}" + "boldHover": "{colors.solid.yellow.400}" }, "danger": { "subtle": "{colors.solid.red.950}", "subtleHover": "{colors.solid.red.900}", "bold": "{colors.solid.red.500}", - "boldHover": "{colors.solid.red.400}", - "deep": "{colors.solid.red.100}", - "border": "{colors.solid.red.600}", - "mutedBorder": "{colors.solid.red.700}", - "subtleActive": "{colors.solid.red.800}" - }, - "neutral": { - "subtle": "{colors.solid.zinc.950}", - "subtleHover": "{colors.solid.zinc.900}", - "bold": "{colors.solid.zinc.500}", - "boldHover": "{colors.solid.zinc.400}" + "boldHover": "{colors.solid.red.400}" }, "help": { "subtle": "{colors.solid.purple.950}", "subtleHover": "{colors.solid.purple.900}", "bold": "{colors.solid.purple.500}", - "boldHover": "{colors.solid.purple.400}", - "deep": "{colors.solid.purple.100}", - "mutedBorder": "{colors.solid.purple.700}", - "border": "{colors.solid.purple.600}", - "subtleActive": "{colors.solid.purple.800}" - }, - "selected": "{colors.solid.zinc.100}", - "disabled": "{colors.solid.zinc.800}", - "scrim": { - "default": "{colors.alpha.black.600}", - "modal": "{colors.alpha.black.300}" - }, - "translucent": { - "light": { - "subtle": "{colors.alpha.white.100}", - "default": "{colors.alpha.white.200}", - "strong": "{colors.alpha.white.500}" - }, - "dark": { - "default": "{colors.alpha.black.500}" - } - }, - "transparent": "rgba(0, 0, 0, 0.0001)", - "selectedStrong": "{colors.solid.zinc.300}" + "boldHover": "{colors.solid.purple.400}" + } }, "border": { "subtle": "{colors.solid.zinc.800}", @@ -1337,29 +1542,15 @@ "strong": "{colors.solid.zinc.100}", "disabled": "{colors.solid.zinc.800}", "brand": "{colors.solid.green.400}", - "success": "{colors.solid.green.600}", - "info": "{colors.solid.blue.600}", - "warning": "{colors.solid.yellow.600}", - "danger": "{colors.solid.red.600}", "neutral": "{colors.solid.zinc.600}", - "help": "{colors.solid.purple.600}", "inverse": "{colors.solid.zinc.200}", - "successSubtle": "{colors.solid.green.700}", - "infoSubtle": "{colors.solid.blue.700}", - "warningSubtle": "{colors.solid.yellow.700}", - "dangerSubtle": "{colors.solid.red.700}", - "helpSubtle": "{colors.solid.purple.700}", "transparent": "rgba(0, 0, 0, 0.0001)", "checked": "{colors.solid.green.500}", - "successSubtleActive": "{colors.solid.green.800}", - "infoBoldHover": "{colors.solid.blue.400}", - "warningBoldHover": "{colors.solid.yellow.400}", - "helpBoldHover": "{colors.solid.purple.400}", - "dangerBoldHover": "{colors.solid.red.400}", - "infoBold": "{colors.solid.blue.500}", - "warningBold": "{colors.solid.yellow.500}", - "helpBold": "{colors.solid.purple.500}", - "dangerBold": "{colors.solid.red.500}" + "success": "{colors.solid.green.600}", + "info": "{colors.solid.blue.600}", + "warning": "{colors.solid.yellow.600}", + "danger": "{colors.solid.red.600}", + "help": "{colors.solid.purple.600}" }, "icon": { "default": "{colors.alpha.white.1000}", @@ -1367,15 +1558,15 @@ "disabled": "{colors.solid.zinc.700}", "onBold": "{colors.solid.zinc.900}", "brand": "{colors.solid.green.400}", + "neutral": "{colors.solid.zinc.400}", + "strong": "{colors.alpha.white.1000}", + "strongMuted": "{colors.solid.zinc.100}", + "strongHover": "{colors.solid.zinc.300}", "success": "{colors.solid.green.400}", "info": "{colors.solid.blue.400}", "warning": "{colors.solid.yellow.400}", "danger": "{colors.solid.red.400}", - "neutral": "{colors.solid.zinc.400}", - "help": "{colors.solid.purple.400}", - "strong": "{colors.alpha.white.1000}", - "strongMuted": "{colors.solid.zinc.100}", - "strongHover": "{colors.solid.zinc.300}" + "help": "{colors.solid.purple.400}" } } }, @@ -1622,7 +1813,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "inset {shadow.200}" }, @@ -1703,7 +1894,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "0" } @@ -1745,7 +1936,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "0" }, @@ -1812,16 +2003,16 @@ "extend": { "extDot": { "success": { - "background": "{background.success.indicator}" + "background": "{background.success.bold}" }, "info": { - "background": "{background.info.border}" + "background": "{background.info.bold}" }, "warn": { - "background": "{background.warning.border}" + "background": "{background.warning.bold}" }, "danger": { - "background": "{background.danger.border}" + "background": "{background.danger.bold}" }, "lg": { "size": "{dimension.size.250}" @@ -1845,20 +2036,20 @@ "background": "{background.selected}" }, "success": { - "color": "{text.successStrong}", - "background": "{background.success.mutedBorder}" + "color": "{text.success}", + "background": "{background.success.subtleHover}" }, "info": { - "color": "{text.infoStrong}", - "background": "{background.info.mutedBorder}" + "color": "{text.info}", + "background": "{background.info.subtleHover}" }, "warn": { - "color": "{text.warningStrong}", - "background": "{background.warning.mutedBorder}" + "color": "{text.warning}", + "background": "{background.warning.subtleHover}" }, "danger": { - "color": "{text.dangerStrong}", - "background": "{background.danger.mutedBorder}" + "color": "{text.danger}", + "background": "{background.danger.subtleHover}" } } }, @@ -1906,7 +2097,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" }, @@ -2018,7 +2209,7 @@ "hoverColor": "{text.staticDark}", "activeColor": "{text.staticDark}", "focusRing": { - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "shadow": "{shadow.200}" } }, @@ -2033,7 +2224,7 @@ "hoverColor": "{text.onBold}", "activeColor": "{text.onBold}", "focusRing": { - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "shadow": "{shadow.200}" } }, @@ -2048,101 +2239,101 @@ "hoverColor": "{text.default}", "activeColor": "{text.default}", "focusRing": { - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "shadow": "{shadow.200}" } }, "info": { - "background": "{background.info.mutedBorder}", - "hoverBackground": "{background.info.border}", + "background": "{background.info.subtleHover}", + "hoverBackground": "{background.info.bold}", "activeBackground": "{background.info.bold}", "borderColor": "{border.transparent}", "hoverBorderColor": "{border.transparent}", "activeBorderColor": "{border.transparent}", - "color": "{text.infoStrong}", - "hoverColor": "{text.infoDeepest}", - "activeColor": "{text.infoStrong}" + "color": "{text.info}", + "hoverColor": "{text.info}", + "activeColor": "{text.info}" }, "success": { - "background": "{background.success.mutedBorder}", - "hoverBackground": "{background.success.border}", + "background": "{background.success.subtleHover}", + "hoverBackground": "{background.success.bold}", "activeBackground": "{background.brand.bold}", "borderColor": "{border.transparent}", "hoverBorderColor": "{border.transparent}", "activeBorderColor": "{border.transparent}", - "color": "{text.successStrong}", - "hoverColor": "{text.successDeepest}", - "activeColor": "{text.successStrong}" + "color": "{text.success}", + "hoverColor": "{text.success}", + "activeColor": "{text.success}" }, "warn": { - "background": "{background.warning.mutedBorder}", - "hoverBackground": "{background.warning.border}", + "background": "{background.warning.subtleHover}", + "hoverBackground": "{background.warning.bold}", "activeBackground": "{background.warning.bold}", "borderColor": "{border.transparent}", "hoverBorderColor": "{border.transparent}", "activeBorderColor": "{border.transparent}", - "color": "{text.warningStrong}", - "hoverColor": "{text.warningDeepest}", - "activeColor": "{text.warningStrong}" + "color": "{text.warning}", + "hoverColor": "{text.warning}", + "activeColor": "{text.warning}" }, "help": { - "background": "{background.help.mutedBorder}", - "hoverBackground": "{background.help.border}", + "background": "{background.help.subtleHover}", + "hoverBackground": "{background.help.bold}", "activeBackground": "{background.help.bold}", "borderColor": "{border.transparent}", "hoverBorderColor": "{border.transparent}", "activeBorderColor": "{border.transparent}", - "color": "{text.helpStrong}", - "hoverColor": "{text.helpDeepest}", - "activeColor": "{text.helpStrong}" + "color": "{text.help}", + "hoverColor": "{text.help}", + "activeColor": "{text.help}" }, "danger": { - "background": "{background.danger.mutedBorder}", - "hoverBackground": "{background.danger.border}", + "background": "{background.danger.subtleHover}", + "hoverBackground": "{background.danger.bold}", "activeBackground": "{background.danger.bold}", "borderColor": "{border.transparent}", "hoverBorderColor": "{border.transparent}", "activeBorderColor": "{border.transparent}", - "color": "{text.dangerStrong}", - "hoverColor": "{text.dangerDeepest}", - "activeColor": "{text.dangerStrong}" + "color": "{text.danger}", + "hoverColor": "{text.danger}", + "activeColor": "{text.danger}" } }, "outlined": { "primary": { "hoverBackground": "{background.brand.subtle}", "activeBackground": "{background.brand.subtleHover}", - "borderColor": "{border.successSubtleActive}", - "color": "{text.successBold}" + "borderColor": "{border.success}", + "color": "{text.success}" }, "success": { "hoverBackground": "{background.brand.subtleHover}", - "activeBackground": "{background.success.subtleActive}", + "activeBackground": "{background.success.subtleHover}", "borderColor": "{border.brand}", "color": "{text.brand}" }, "info": { "hoverBackground": "{background.info.subtleHover}", - "activeBackground": "{background.info.subtleActive}", - "borderColor": "{border.infoBoldHover}", + "activeBackground": "{background.info.subtleHover}", + "borderColor": "{border.info}", "color": "{text.info}" }, "warn": { "hoverBackground": "{background.warning.subtleHover}", - "activeBackground": "{background.warning.subtleActive}", - "borderColor": "{border.warningBoldHover}", + "activeBackground": "{background.warning.subtleHover}", + "borderColor": "{border.warning}", "color": "{text.warning}" }, "help": { "hoverBackground": "{background.help.subtleHover}", - "activeBackground": "{background.help.subtleActive}", - "borderColor": "{border.helpBoldHover}", + "activeBackground": "{background.help.subtleHover}", + "borderColor": "{border.help}", "color": "{text.help}" }, "danger": { "hoverBackground": "{background.danger.subtleHover}", - "activeBackground": "{background.danger.subtleActive}", - "borderColor": "{border.dangerBoldHover}", + "activeBackground": "{background.danger.subtleHover}", + "borderColor": "{border.danger}", "color": "{text.danger}" } }, @@ -2154,27 +2345,27 @@ }, "success": { "hoverBackground": "{background.brand.subtleHover}", - "activeBackground": "{background.success.subtleActive}", + "activeBackground": "{background.success.subtleHover}", "color": "{text.brand}" }, "info": { "hoverBackground": "{background.info.subtleHover}", - "activeBackground": "{background.info.subtleActive}", + "activeBackground": "{background.info.subtleHover}", "color": "{text.info}" }, "warn": { "hoverBackground": "{background.warning.subtleHover}", - "activeBackground": "{background.warning.subtleActive}", + "activeBackground": "{background.warning.subtleHover}", "color": "{text.warning}" }, "help": { "hoverBackground": "{background.help.subtleHover}", - "activeBackground": "{background.help.subtleActive}", + "activeBackground": "{background.help.subtleHover}", "color": "{text.help}" }, "danger": { "hoverBackground": "{background.danger.subtleHover}", - "activeBackground": "{background.danger.subtleActive}", + "activeBackground": "{background.danger.subtleHover}", "color": "{text.danger}" } }, @@ -2197,7 +2388,7 @@ "hoverColor": "{text.staticDark}", "activeColor": "{text.staticDark}", "focusRing": { - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "shadow": "{shadow.200}" } }, @@ -2212,7 +2403,7 @@ "hoverColor": "{text.neutralHover}", "activeColor": "{text.neutralHover}", "focusRing": { - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "shadow": "{shadow.200}" } }, @@ -2227,14 +2418,14 @@ "hoverColor": "{background.surface.canvas}", "activeColor": "{background.surface.canvas}", "focusRing": { - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "shadow": "{shadow.200}" } }, "info": { "background": "{background.info.bold}", - "hoverBackground": "{background.info.border}", - "activeBackground": "{background.info.mutedBorder}", + "hoverBackground": "{background.info.bold}", + "activeBackground": "{background.info.subtleHover}", "borderColor": "{border.transparent}", "hoverBorderColor": "{border.transparent}", "activeBorderColor": "{border.transparent}", @@ -2244,8 +2435,8 @@ }, "success": { "background": "{background.brand.bold}", - "hoverBackground": "{background.success.border}", - "activeBackground": "{background.success.mutedBorder}", + "hoverBackground": "{background.success.bold}", + "activeBackground": "{background.success.subtleHover}", "borderColor": "{border.transparent}", "hoverBorderColor": "{border.transparent}", "activeBorderColor": "{border.transparent}", @@ -2255,8 +2446,8 @@ }, "warn": { "background": "{background.warning.bold}", - "hoverBackground": "{background.warning.border}", - "activeBackground": "{background.warning.mutedBorder}", + "hoverBackground": "{background.warning.bold}", + "activeBackground": "{background.warning.subtleHover}", "borderColor": "{border.transparent}", "hoverBorderColor": "{border.transparent}", "activeBorderColor": "{border.transparent}", @@ -2266,8 +2457,8 @@ }, "help": { "background": "{background.help.bold}", - "hoverBackground": "{background.help.border}", - "activeBackground": "{background.help.mutedBorder}", + "hoverBackground": "{background.help.bold}", + "activeBackground": "{background.help.subtleHover}", "borderColor": "{border.transparent}", "hoverBorderColor": "{border.transparent}", "activeBorderColor": "{border.transparent}", @@ -2277,8 +2468,8 @@ }, "danger": { "background": "{background.danger.bold}", - "hoverBackground": "{background.danger.border}", - "activeBackground": "{background.danger.mutedBorder}", + "hoverBackground": "{background.danger.bold}", + "activeBackground": "{background.danger.subtleHover}", "borderColor": "{border.transparent}", "hoverBorderColor": "{border.transparent}", "activeBorderColor": "{border.transparent}", @@ -2291,38 +2482,38 @@ "primary": { "hoverBackground": "{background.brand.subtle}", "activeBackground": "{background.brand.subtleHover}", - "borderColor": "{border.successSubtleActive}", - "color": "{text.successBold}" + "borderColor": "{border.success}", + "color": "{text.success}" }, "success": { - "hoverBackground": "{text.successDeepest}", - "activeBackground": "{background.success.deep}", + "hoverBackground": "{text.success}", + "activeBackground": "{background.success.bold}", "borderColor": "{border.checked}", - "color": "{text.successBold}" + "color": "{text.success}" }, "info": { - "hoverBackground": "{text.infoDeepest}", - "activeBackground": "{background.info.deep}", - "borderColor": "{border.infoBold}", - "color": "{text.infoBold}" + "hoverBackground": "{text.info}", + "activeBackground": "{background.info.bold}", + "borderColor": "{border.info}", + "color": "{text.info}" }, "warn": { - "hoverBackground": "{text.warningDeepest}", - "activeBackground": "{background.warning.deep}", - "borderColor": "{border.warningBold}", - "color": "{text.warningBold}" + "hoverBackground": "{text.warning}", + "activeBackground": "{background.warning.bold}", + "borderColor": "{border.warning}", + "color": "{text.warning}" }, "help": { - "hoverBackground": "{text.helpDeepest}", - "activeBackground": "{background.help.deep}", - "borderColor": "{border.helpBold}", - "color": "{text.helpBold}" + "hoverBackground": "{text.help}", + "activeBackground": "{background.help.bold}", + "borderColor": "{border.help}", + "color": "{text.help}" }, "danger": { - "hoverBackground": "{text.dangerDeepest}", - "activeBackground": "{background.danger.deep}", - "borderColor": "{border.dangerBold}", - "color": "{text.dangerBold}" + "hoverBackground": "{text.danger}", + "activeBackground": "{background.danger.bold}", + "borderColor": "{border.danger}", + "color": "{text.danger}" } }, "text": { @@ -2332,29 +2523,29 @@ "color": "{text.default}" }, "success": { - "hoverBackground": "{text.successDeepest}", - "activeBackground": "{background.success.deep}", - "color": "{text.successBold}" + "hoverBackground": "{text.success}", + "activeBackground": "{background.success.bold}", + "color": "{text.success}" }, "info": { - "hoverBackground": "{text.infoDeepest}", - "activeBackground": "{background.info.deep}", - "color": "{text.infoBold}" + "hoverBackground": "{text.info}", + "activeBackground": "{background.info.bold}", + "color": "{text.info}" }, "warn": { - "hoverBackground": "{text.warningDeepest}", - "activeBackground": "{background.warning.deep}", - "color": "{text.warningBold}" + "hoverBackground": "{text.warning}", + "activeBackground": "{background.warning.bold}", + "color": "{text.warning}" }, "help": { - "hoverBackground": "{text.helpDeepest}", - "activeBackground": "{background.help.deep}", - "color": "{text.helpBold}" + "hoverBackground": "{text.help}", + "activeBackground": "{background.help.bold}", + "color": "{text.help}" }, "danger": { - "hoverBackground": "{text.dangerDeepest}", - "activeBackground": "{background.danger.deep}", - "color": "{text.dangerBold}" + "hoverBackground": "{text.danger}", + "activeBackground": "{background.danger.bold}", + "color": "{text.danger}" } }, "link": { @@ -2449,7 +2640,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" } @@ -2480,7 +2671,7 @@ "focusRing": { "focusRing": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" }, @@ -2546,7 +2737,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" } @@ -2674,7 +2865,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "inset {shadow.200}" }, @@ -2698,7 +2889,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "inset {shadow.200}" } @@ -2766,7 +2957,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" } @@ -2928,7 +3119,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" }, @@ -2973,7 +3164,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" } @@ -3255,7 +3446,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" } @@ -3273,7 +3464,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" } @@ -3298,7 +3489,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" } @@ -3322,7 +3513,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" } @@ -3444,7 +3635,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "0" } @@ -3602,7 +3793,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" } @@ -3750,7 +3941,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" } @@ -3763,10 +3954,10 @@ "gap": "{dimension.space.100}" }, "extInfo": { - "color": "{text.infoBold}", + "color": "{text.info}", "closeButton": { - "color": "{text.infoBold}", - "borderColor": "{border.infoBold}" + "color": "{text.info}", + "borderColor": "{border.info}" }, "caption": { "color": "{text.default}" @@ -3779,9 +3970,9 @@ "width": "{dimension.size.100}" }, "extSuccess": { - "color": "{text.successBold}", + "color": "{text.success}", "closeButton": { - "color": "{text.successBold}", + "color": "{text.success}", "borderColor": "{border.checked}" }, "caption": { @@ -3789,20 +3980,20 @@ } }, "extWarn": { - "color": "{text.warningBold}", + "color": "{text.warning}", "closeButton": { - "color": "{text.warningBold}", - "borderColor": "{border.warningBold}" + "color": "{text.warning}", + "borderColor": "{border.warning}" }, "caption": { "color": "{text.default}" } }, "extError": { - "color": "{text.dangerBold}", + "color": "{text.danger}", "closeButton": { - "color": "{text.dangerBold}", - "borderColor": "{border.dangerBold}" + "color": "{text.danger}", + "borderColor": "{border.danger}" }, "caption": { "color": "{text.default}" @@ -3821,9 +4012,9 @@ "borderColor": "{border.checked}" }, "closeButton": { - "hoverBackground": "{background.success.subtleActive}", + "hoverBackground": "{background.success.subtleHover}", "focusRing": { - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "shadow": "{shadow.200}" } }, @@ -3838,7 +4029,7 @@ "closeButton": { "hoverBackground": "{background.transparent}", "focusRing": { - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "shadow": "{shadow.200}" } }, @@ -3857,17 +4048,17 @@ }, "warn": { "background": "{background.warning.subtle}", - "borderColor": "{border.warningBold}", + "borderColor": "{border.warning}", "color": "{text.default}", "shadow": "none", "outlined": { "color": "{text.default}", - "borderColor": "{border.warningBold}" + "borderColor": "{border.warning}" }, "closeButton": { - "hoverBackground": "{background.warning.subtleActive}", + "hoverBackground": "{background.warning.subtleHover}", "focusRing": { - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "shadow": "{shadow.200}" } }, @@ -3877,17 +4068,17 @@ }, "error": { "background": "{background.danger.subtle}", - "borderColor": "{border.dangerBold}", + "borderColor": "{border.danger}", "color": "{text.default}", "shadow": "none", "outlined": { "color": "{text.default}", - "borderColor": "{border.dangerBold}" + "borderColor": "{border.danger}" }, "closeButton": { - "hoverBackground": "{background.danger.subtleActive}", + "hoverBackground": "{background.danger.subtleHover}", "focusRing": { - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "shadow": "{shadow.200}" } }, @@ -3901,7 +4092,7 @@ "closeButton": { "hoverBackground": "{background.transparent}", "focusRing": { - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "shadow": "{shadow.200}" } }, @@ -3919,7 +4110,7 @@ "closeButton": { "hoverBackground": "{background.transparent}", "focusRing": { - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "shadow": "{shadow.200}" } }, @@ -3933,19 +4124,19 @@ }, "info": { "background": "{background.info.subtle}", - "borderColor": "{border.infoBold}", + "borderColor": "{border.info}", "color": "{text.default}", "shadow": "none", "closeButton": { - "hoverBackground": "{background.info.subtleActive}", + "hoverBackground": "{background.info.subtleHover}", "focusRing": { - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "shadow": "{shadow.200}" } }, "outlined": { "color": "{text.default}", - "borderColor": "{border.infoBold}" + "borderColor": "{border.info}" }, "simple": { "color": "{text.default}" @@ -4066,7 +4257,7 @@ "placeholderColor": "{text.muted}", "invalidPlaceholderColor": "{text.danger}", "focusRing": { - "color": "{background.success.subtleActive}" + "color": "{background.success.subtleHover}" } }, "dropdown": { @@ -4166,7 +4357,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "focus": "{shadow.200}" } @@ -4357,7 +4548,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" }, @@ -4390,7 +4581,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" }, @@ -4427,7 +4618,7 @@ "focusRing": { "width": "0rem", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" } @@ -4478,7 +4669,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "0" } @@ -4607,7 +4798,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" }, @@ -4643,7 +4834,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" } @@ -4655,8 +4846,8 @@ "gap": "{dimension.space.100}" }, "extStepNumber": { - "invalidBackground": "{background.danger.border}", - "invalidColor": "{text.dangerStrong}", + "invalidBackground": "{background.danger.bold}", + "invalidColor": "{text.danger}", "invalidBorderColor": "{border.danger}", "borderWidth": "{dimension.size.100}", "iconSize": "{dimension.size.400}" @@ -4682,7 +4873,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" } @@ -4767,7 +4958,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" } @@ -4779,7 +4970,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" } @@ -4792,7 +4983,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" } @@ -4806,10 +4997,10 @@ "toast": { "extend": { "extInfo": { - "color": "{text.infoBold}", + "color": "{text.info}", "closeButton": { - "color": "{text.infoBold}", - "borderColor": "{border.infoBold}" + "color": "{text.info}", + "borderColor": "{border.info}" }, "caption": { "color": "{text.default}" @@ -4822,9 +5013,9 @@ "width": "{dimension.size.100}" }, "extSuccess": { - "color": "{text.successBold}", + "color": "{text.success}", "closeButton": { - "color": "{text.successBold}", + "color": "{text.success}", "borderColor": "{border.checked}" }, "caption": { @@ -4832,20 +5023,20 @@ } }, "extWarn": { - "color": "{text.warningBold}", + "color": "{text.warning}", "closeButton": { - "color": "{text.warningBold}", - "borderColor": "{border.warningBold}" + "color": "{text.warning}", + "borderColor": "{border.warning}" }, "caption": { "color": "{text.default}" } }, "extError": { - "color": "{text.dangerBold}", + "color": "{text.danger}", "closeButton": { - "color": "{text.dangerBold}", - "borderColor": "{border.dangerBold}" + "color": "{text.danger}", + "borderColor": "{border.danger}" }, "caption": { "color": "{text.default}" @@ -4856,14 +5047,14 @@ "light": { "info": { "background": "{background.info.subtle}", - "borderColor": "{border.infoBold}", + "borderColor": "{border.info}", "color": "{text.default}", "detailColor": "{text.default}", "shadow": "{shadow.400}", "closeButton": { - "hoverBackground": "{background.info.subtleActive}", + "hoverBackground": "{background.info.subtleHover}", "focusRing": { - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "shadow": "{shadow.200}" } } @@ -4875,37 +5066,37 @@ "detailColor": "{text.default}", "shadow": "{shadow.400}", "closeButton": { - "hoverBackground": "{background.success.subtleActive}", + "hoverBackground": "{background.success.subtleHover}", "focusRing": { - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "shadow": "{shadow.200}" } } }, "warn": { "background": "{background.warning.subtle}", - "borderColor": "{border.warningBold}", + "borderColor": "{border.warning}", "color": "{text.default}", "detailColor": "{text.default}", "shadow": "{shadow.400}", "closeButton": { - "hoverBackground": "{background.warning.subtleActive}", + "hoverBackground": "{background.warning.subtleHover}", "focusRing": { - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "shadow": "none" } } }, "error": { "background": "{background.danger.subtle}", - "borderColor": "{border.dangerBold}", + "borderColor": "{border.danger}", "color": "{text.default}", "detailColor": "{text.default}", "shadow": "{shadow.400}", "closeButton": { - "hoverBackground": "{background.danger.subtleActive}", + "hoverBackground": "{background.danger.subtleHover}", "focusRing": { - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "shadow": "{shadow.200}" } } @@ -4968,20 +5159,20 @@ "color": "{text.default}" }, "success": { - "background": "{background.success.border}", - "color": "{text.successStrong}" + "background": "{background.success.bold}", + "color": "{text.success}" }, "info": { - "background": "{background.info.mutedBorder}", - "color": "{text.infoStrong}" + "background": "{background.info.subtleHover}", + "color": "{text.info}" }, "warn": { - "background": "{background.warning.mutedBorder}", - "color": "{text.warningStrong}" + "background": "{background.warning.subtleHover}", + "color": "{text.warning}" }, "danger": { - "background": "{background.danger.mutedBorder}", - "color": "{text.dangerStrong}" + "background": "{background.danger.subtleHover}", + "color": "{text.danger}" } } }, @@ -5031,7 +5222,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "0" }, @@ -5207,7 +5398,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" }, @@ -5266,7 +5457,7 @@ "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", - "color": "{background.success.subtleActive}", + "color": "{background.success.subtleHover}", "offset": "{dimension.focusRing.offset}", "shadow": "0" }, From e143449412f078fd4421126eafc639772608b5f9 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Thu, 18 Jun 2026 20:37:09 +0800 Subject: [PATCH 12/46] =?UTF-8?q?B:=20=D0=B2=D1=81=D0=B5=20CSS-=D1=81?= =?UTF-8?q?=D1=82=D0=B8=D0=BB=D0=B8=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD?= =?UTF-8?q?=D0=B5=D0=BD=D1=82=D0=BE=D0=B2=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B2?= =?UTF-8?q?=D0=B5=D0=B4=D0=B5=D0=BD=D1=8B=20=D0=BD=D0=B0=20=D0=BA=D0=BE?= =?UTF-8?q?=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D0=BD=D1=8B=D0=B9=20?= =?UTF-8?q?=D1=83=D1=80=D0=BE=D0=B2=D0=B5=D0=BD=D1=8C=20(187=20extend-?= =?UTF-8?q?=D1=82=D0=BE=D0=BA=D0=B5=D0=BD=D0=BE=D0=B2,=200=20=D1=87=D1=83?= =?UTF-8?q?=D0=B6=D0=B8=D1=85=20=D1=81=D1=81=D1=8B=D0=BB=D0=BE=D0=BA)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tokens/components/accordion.ts | 4 +- .../tokens/components/autocomplete.ts | 18 +- .../prime-preset/tokens/components/avatar.ts | 8 +- .../tokens/components/breadcrumb.ts | 6 +- .../prime-preset/tokens/components/card.ts | 8 +- .../tokens/components/carousel.ts | 12 +- .../tokens/components/checkbox.ts | 28 +- .../prime-preset/tokens/components/chip.ts | 12 +- .../tokens/components/confirm-dialog.ts | 8 +- .../tokens/components/data-table.ts | 2 +- .../tokens/components/date-picker.ts | 34 +-- .../prime-preset/tokens/components/dialog.ts | 22 +- .../prime-preset/tokens/components/divider.ts | 6 +- .../prime-preset/tokens/components/drawer.ts | 6 +- .../tokens/components/galleria.ts | 2 +- .../tokens/components/inputnumber.ts | 6 +- .../tokens/components/inputotp.ts | 2 +- .../tokens/components/inputtext.ts | 10 +- .../prime-preset/tokens/components/listbox.ts | 4 +- .../tokens/components/megamenu.ts | 6 +- .../prime-preset/tokens/components/menu.ts | 20 +- .../prime-preset/tokens/components/menubar.ts | 10 +- .../prime-preset/tokens/components/message.ts | 12 +- .../tokens/components/metergroup.ts | 16 +- .../tokens/components/paginator.ts | 16 +- .../tokens/components/panelmenu.ts | 6 +- .../tokens/components/password.ts | 38 +-- .../tokens/components/progressbar.ts | 2 +- .../tokens/components/progressspinner.ts | 2 +- .../tokens/components/radiobutton.ts | 4 +- .../prime-preset/tokens/components/select.ts | 22 +- .../tokens/components/selectbutton.ts | 34 +-- .../prime-preset/tokens/components/slider.ts | 2 +- .../prime-preset/tokens/components/stepper.ts | 24 +- .../prime-preset/tokens/components/tabs.ts | 6 +- .../prime-preset/tokens/components/tag.ts | 4 +- .../tokens/components/textarea.ts | 14 +- .../tokens/components/tieredmenu.ts | 4 +- .../tokens/components/timeline.ts | 8 +- .../prime-preset/tokens/components/toast.ts | 8 +- .../tokens/components/togglebutton.ts | 16 +- .../tokens/components/toggleswitch.ts | 4 +- .../prime-preset/tokens/components/tooltip.ts | 8 +- .../providers/prime-preset/tokens/tokens.json | 273 ++++++++++++++++-- 44 files changed, 483 insertions(+), 274 deletions(-) diff --git a/src/lib/providers/prime-preset/tokens/components/accordion.ts b/src/lib/providers/prime-preset/tokens/components/accordion.ts index b9b38aa9..500facbb 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('fonts.fontFamily.base')}; - font-size: ${dt('fonts.fontSize.300')}; + font-family: ${dt('accordion.extend.fonts_fontFamily_base')}; + font-size: ${dt('accordion.extend.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 5a1415ec..b989d14b 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('form.borderColor')}; + border-color: ${dt('autocomplete.extend.form_borderColor')}; } /* ─── Инпут и границы ─── */ .p-autocomplete .p-autocomplete-input { width: 100%; padding: ${dt('autocomplete.root.paddingY')} ${dt('autocomplete.root.paddingX')}; - line-height: ${dt('fonts.lineHeight.250')}; + line-height: ${dt('autocomplete.extend.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('form.hoverBorderSecondaryColor')}; + border-color: ${dt('autocomplete.extend.form_hoverBorderSecondaryColor')}; } /* ─── States: Focus ─── */ .p-autocomplete:has(.p-autocomplete-input:focus) .p-autocomplete-dropdown { - border-color: ${dt('form.focusBorderSecondaryColor')}; + border-color: ${dt('autocomplete.extend.form_focusBorderSecondaryColor')}; } /* ─── Иконки ─── */ @@ -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('form.width.300')}; + inset-inline-end: ${dt('autocomplete.extend.form_width_300')}; } /* ─── Multiple: чипсы ─── */ .p-autocomplete .p-autocomplete-input-multiple { - line-height: ${dt('fonts.lineHeight.250')}; + line-height: ${dt('autocomplete.extend.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('dimension.space.200')}; - padding-bottom: ${dt('dimension.space.200')}; - font-size: ${dt('fonts.fontSize.300')}; + padding-top: ${dt('autocomplete.extend.dimension_space_200')}; + padding-bottom: ${dt('autocomplete.extend.dimension_space_200')}; + font-size: ${dt('autocomplete.extend.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 2c80d571..732298c4 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('content.background')}; - --p-avatar-group-offset: calc(-1 * ${dt('media.padding.300')}); - --p-avatar-lg-group-offset: calc(-1 * ${dt('media.padding.300')}); - --p-avatar-xl-group-offset: calc(-1 * ${dt('media.padding.600')}); + --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')}); } /* ─── Группировка: отступы для кастомных классов хост-элемента ─── */ diff --git a/src/lib/providers/prime-preset/tokens/components/breadcrumb.ts b/src/lib/providers/prime-preset/tokens/components/breadcrumb.ts index 5c6fe006..dc5f80ad 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('fonts.fontSize.200')}; + font-size: ${dt('breadcrumb.extend.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('opacity.500')}; + opacity: ${dt('breadcrumb.extend.opacity_500')}; pointer-events: none; cursor: default; } .p-breadcrumb-item:last-child .p-breadcrumb-item-link:hover { - background: ${dt('transparent')}; + background: ${dt('breadcrumb.extend.transparent')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/card.ts b/src/lib/providers/prime-preset/tokens/components/card.ts index 7bfac62c..c5d96940 100644 --- a/src/lib/providers/prime-preset/tokens/components/card.ts +++ b/src/lib/providers/prime-preset/tokens/components/card.ts @@ -19,7 +19,7 @@ export const cardCss = ({ dt }: { dt: (token: string) => string }): string => ` /* ─── Overlay variant ─── */ .p-card.p-component.shadow-md { - box-shadow: ${dt('overlay.popover.shadow')}; + box-shadow: ${dt('card.extend.overlay_popover_shadow')}; } /* ─── Caption (Title & Subtitle wrapper) ─── */ @@ -31,8 +31,8 @@ export const cardCss = ({ dt }: { dt: (token: string) => string }): string => ` /* ─── Subtitle typography ─── */ .p-card-subtitle { - font-family: ${dt('fonts.fontFamily.heading')}; - font-size: ${dt('fonts.fontSize.200')}; - font-weight: ${dt('fonts.fontWeight.regular')}; + font-family: ${dt('card.extend.fonts_fontFamily_heading')}; + font-size: ${dt('card.extend.fonts_fontSize_200')}; + font-weight: ${dt('card.extend.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 298a3d13..f1ca8dfe 100644 --- a/src/lib/providers/prime-preset/tokens/components/carousel.ts +++ b/src/lib/providers/prime-preset/tokens/components/carousel.ts @@ -1,21 +1,21 @@ 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('surface.200')}; - color: ${dt('text.color')}; + background: ${dt('carousel.extend.surface_200')}; + color: ${dt('carousel.extend.text_color')}; 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('surface.300')}; - color: ${dt('text.color')}; + background: ${dt('carousel.extend.surface_300')}; + color: ${dt('carousel.extend.text_color')}; } .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('surface.400')}; - color: ${dt('text.color')}; + background: ${dt('carousel.extend.surface_400')}; + color: ${dt('carousel.extend.text_color')}; } .p-carousel .p-button-icon-only.p-button-rounded { diff --git a/src/lib/providers/prime-preset/tokens/components/checkbox.ts b/src/lib/providers/prime-preset/tokens/components/checkbox.ts index d262a9f5..8a2dde52 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('text.color')}; - font-family: ${dt('fonts.fontFamily.base')}; - font-size: ${dt('fonts.fontSize.300')}; - font-weight: ${dt('fonts.fontWeight.regular')}; + 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')}; line-height: normal; cursor: pointer; } .checkbox-label--hover { - color: ${dt('text.brand')}; + color: ${dt('checkbox.extend.text_brand')}; } .checkbox-label--disabled { - color: ${dt('text.mutedColor')}; + color: ${dt('checkbox.extend.text_mutedColor')}; cursor: default; } .checkbox-caption { - color: ${dt('text.subtle')}; - font-family: ${dt('fonts.fontFamily.heading')}; - font-size: ${dt('fonts.fontSize.200')}; - font-weight: ${dt('fonts.fontWeight.regular')}; + 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')}; line-height: normal; } .checkbox-caption--hover { - color: ${dt('text.brand')}; + color: ${dt('checkbox.extend.text_brand')}; } .checkbox-caption--disabled { - color: ${dt('text.disabled')}; + color: ${dt('checkbox.extend.text_disabled')}; } /* Переопределение ширины 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('focusRing.success')}; + box-shadow: 0 0 0 ${dt('checkbox.root.focusRing.focusRing')} ${dt('checkbox.extend.focusRing_success')}; } /* 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('focusRing.width')} ${dt('focusRing.invalid')}; + box-shadow: 0 0 0 ${dt('checkbox.extend.focusRing_width')} ${dt('checkbox.extend.focusRing_invalid')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/chip.ts b/src/lib/providers/prime-preset/tokens/components/chip.ts index 08540351..460ad4f2 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('fonts.fontFamily.base')}; - font-size: ${dt('fonts.fontSize.300')}; - font-weight: ${dt('fonts.fontWeight.regular')}; - line-height: ${dt('fonts.lineHeight.400')}; + 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')}; } /* ─── Сброс уменьшенного 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('focusRing.success')}; + outline: ${dt('chip.removeIcon.focusRing.width')} solid ${dt('chip.extend.focusRing_success')}; } /* ─── Disabled состояние ─── */ .p-chip.p-disabled { - opacity: ${dt('opacity.500')}; + opacity: ${dt('chip.extend.opacity_500')}; pointer-events: none; } diff --git a/src/lib/providers/prime-preset/tokens/components/confirm-dialog.ts b/src/lib/providers/prime-preset/tokens/components/confirm-dialog.ts index 9841b1f5..ce681c42 100644 --- a/src/lib/providers/prime-preset/tokens/components/confirm-dialog.ts +++ b/src/lib/providers/prime-preset/tokens/components/confirm-dialog.ts @@ -15,19 +15,19 @@ export const confirmDialogCss = ({ dt }: { dt: (token: string) => string }): str /* Размеры */ .p-confirmdialog.p-dialog { - width: ${dt('dimension.overlayWidth.base')}; + width: ${dt('confirmdialog.extend.dimension_overlayWidth_base')}; } .p-confirmdialog-sm.p-dialog { - width: ${dt('dimension.overlayWidth.sm')}; + width: ${dt('confirmdialog.extend.dimension_overlayWidth_sm')}; } .p-confirmdialog-lg.p-dialog { - width: ${dt('dimension.overlayWidth.lg')}; + width: ${dt('confirmdialog.extend.dimension_overlayWidth_lg')}; } .p-confirmdialog-xlg.p-dialog { - width: ${dt('dimension.overlayWidth.xlg')}; + width: ${dt('confirmdialog.extend.dimension_overlayWidth_xlg')}; } /* Цвета иконок по severity */ 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 d5d0960e..5745eafa 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('text.hoverColor')}; + color: ${dt('datatable.extend.text_hoverColor')}; } `; 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 686c2f5b..378c6a7f 100644 --- a/src/lib/providers/prime-preset/tokens/components/date-picker.ts +++ b/src/lib/providers/prime-preset/tokens/components/date-picker.ts @@ -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('form.borderWidth')} solid ${dt( + border: ${dt('datepicker.extend.form_borderWidth')} 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('fonts.fontFamily.base')}; - font-size: ${dt('fonts.fontSize.300')}; - font-weight: ${dt('fonts.fontWeight.demibold')}; + font-family: ${dt('datepicker.extend.fonts_fontFamily_base')}; + font-size: ${dt('datepicker.extend.fonts_fontSize_300')}; + font-weight: ${dt('datepicker.extend.fonts_fontWeight_demibold')}; } /* ─── Day cell text ─── */ .p-datepicker-day { - font-family: ${dt('fonts.fontFamily.base')}; - font-size: ${dt('fonts.fontSize.300')}; - font-weight: ${dt('fonts.fontWeight.regular')}; + font-family: ${dt('datepicker.extend.fonts_fontFamily_base')}; + font-size: ${dt('datepicker.extend.fonts_fontSize_300')}; + font-weight: ${dt('datepicker.extend.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('fonts.fontFamily.heading')}; + font-family: ${dt('datepicker.extend.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('form.borderWidth')} solid ${dt('datepicker.panel.borderColor')}; + border-top: ${dt('datepicker.extend.form_borderWidth')} 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('fonts.fontFamily.heading')}; - font-size: ${dt('fonts.fontSize.100')}; - font-weight: ${dt('fonts.fontWeight.regular')}; + font-family: ${dt('datepicker.extend.fonts_fontFamily_heading')}; + font-size: ${dt('datepicker.extend.fonts_fontSize_100')}; + font-weight: ${dt('datepicker.extend.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('fonts.fontFamily.heading')}; - font-size: ${dt('fonts.fontSize.100')}; - font-weight: ${dt('fonts.fontWeight.regular')}; + font-family: ${dt('datepicker.extend.fonts_fontFamily_heading')}; + font-size: ${dt('datepicker.extend.fonts_fontSize_100')}; + font-weight: ${dt('datepicker.extend.fonts_fontWeight_regular')}; line-height: 1; color: ${dt('datepicker.extend.extTimePicker.color')}; - margin-top: calc(${dt('fonts.fontSize.100')} + ${dt('datepicker.timePicker.buttonGap')}); + margin-top: calc(${dt('datepicker.extend.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('dimension.size.1000')}; + width: ${dt('datepicker.extend.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 cbf8128c..925d1829 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('fonts.fontFamily.heading')}; + font-family: ${dt('dialog.extend.fonts_fontFamily_heading')}; font-size: ${dt('dialog.title.fontSize')}; font-weight: ${dt('dialog.title.fontWeight')}; - line-height: ${dt('fonts.lineHeight.550')}; + line-height: ${dt('dialog.extend.fonts_lineHeight_550')}; } .p-dialog .p-dialog-content { - font-family: ${dt('fonts.fontFamily.base')}; - font-size: ${dt('fonts.fontSize.300')}; - font-weight: ${dt('fonts.fontWeight.regular')}; - line-height: ${dt('fonts.lineHeight.500')}; + 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')}; } .p-dialog .p-dialog-header { - border-bottom: ${dt('dimension.borderWidth.100')} solid ${dt('dialog.root.borderColor')}; + border-bottom: ${dt('dialog.extend.dimension_borderWidth_100')} solid ${dt('dialog.root.borderColor')}; display: flex; align-items: center; justify-content: space-between; @@ -36,18 +36,18 @@ export const dialogCss = ({ dt }: { dt: (token: string) => string }): string => } .p-dialog { - width: ${dt('dimension.overlayWidth.base')}; + width: ${dt('dialog.extend.dimension_overlayWidth_base')}; } .p-dialog.p-component.p-dialog-sm { - width: ${dt('dimension.overlayWidth.sm')}; + width: ${dt('dialog.extend.dimension_overlayWidth_sm')}; } .p-dialog.p-component.p-dialog-lg { - width: ${dt('dimension.overlayWidth.lg')}; + width: ${dt('dialog.extend.dimension_overlayWidth_lg')}; } .p-dialog.p-component.p-dialog-xlg { - width: ${dt('dimension.overlayWidth.xlg')}; + width: ${dt('dialog.extend.dimension_overlayWidth_xlg')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/divider.ts b/src/lib/providers/prime-preset/tokens/components/divider.ts index de3e3581..f3141b06 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('fonts.fontFamily.heading')}; - font-size: ${dt('fonts.fontSize.200')}; - font-weight: ${dt('fonts.fontWeight.demibold')}; + font-family: ${dt('divider.extend.fonts_fontFamily_heading')}; + font-size: ${dt('divider.extend.fonts_fontSize_200')}; + font-weight: ${dt('divider.extend.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 16a26bea..bedc92e4 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('overlay.modal.padding.300')} ${dt('overlay.modal.padding.300')} ${dt('dimension.space.400')} ${dt('overlay.modal.padding.300')}; + 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')}; } /* Типографика */ @@ -24,11 +24,11 @@ const drawerCss = ({ dt }: { dt: (token: string) => string }): string => ` /* Внутренние отступы контента и футера */ .p-drawer.p-component .p-drawer-content { - padding: ${dt('overlay.modal.padding.300')}; + padding: ${dt('drawer.extend.overlay_modal_padding_300')}; } .p-drawer.p-component .p-drawer-footer { - padding: 0 ${dt('overlay.modal.padding.300')} ${dt('overlay.modal.padding.300')} ${dt('overlay.modal.padding.300')}; + padding: 0 ${dt('drawer.extend.overlay_modal_padding_300')} ${dt('drawer.extend.overlay_modal_padding_300')} ${dt('drawer.extend.overlay_modal_padding_300')}; } /* Боковые drawer (слева/справа) - базовые размеры и отступы от краев экрана */ diff --git a/src/lib/providers/prime-preset/tokens/components/galleria.ts b/src/lib/providers/prime-preset/tokens/components/galleria.ts index 952b3f20..d0314890 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('dimension.space.200')}; + padding: ${dt('galleria.extend.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 950a3c1c..124351e0 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('fonts.fontFamily.base')}; + font-family: ${dt('inputnumber.extend.fonts_fontFamily_base')}; } .p-inputnumber .p-inputnumber-input::placeholder { - font-family: ${dt('fonts.fontFamily.base')}; + font-family: ${dt('inputnumber.extend.fonts_fontFamily_base')}; } .p-floatlabel:has(.p-inputnumber) label { - font-family: ${dt('fonts.fontFamily.base')}; + font-family: ${dt('inputnumber.extend.fonts_fontFamily_base')}; } /* ─── Кнопки увеличения/уменьшения ─── */ diff --git a/src/lib/providers/prime-preset/tokens/components/inputotp.ts b/src/lib/providers/prime-preset/tokens/components/inputotp.ts index 6322b610..10961cd7 100644 --- a/src/lib/providers/prime-preset/tokens/components/inputotp.ts +++ b/src/lib/providers/prime-preset/tokens/components/inputotp.ts @@ -25,7 +25,7 @@ export const inputotpCss = ({ dt }: { dt: (token: string) => string }): string = /* ─── 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('focusRing.invalid')}; + box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('inputotp.extend.focusRing_invalid')}; } /* ─── Small ─── */ diff --git a/src/lib/providers/prime-preset/tokens/components/inputtext.ts b/src/lib/providers/prime-preset/tokens/components/inputtext.ts index c9f8f8e6..5949c04d 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('fonts.lineHeight.250')}; - font-family: ${dt('fonts.fontFamily.base')}; + line-height: ${dt('inputtext.extend.fonts_lineHeight_250')}; + font-family: ${dt('inputtext.extend.fonts_fontFamily_base')}; } .p-inputtext::placeholder { - font-family: ${dt('fonts.fontFamily.base')}; + font-family: ${dt('inputtext.extend.fonts_fontFamily_base')}; } .p-floatlabel:has(.p-inputtext) label { - font-family: ${dt('fonts.fontFamily.base')}; + font-family: ${dt('inputtext.extend.fonts_fontFamily_base')}; } /* ─── Disabled ─── */ @@ -34,7 +34,7 @@ export const inputtextCss = ({ dt }: { dt: (token: string) => string }): string /* ─── Invalid + Focus ─── */ .p-inputtext.p-invalid:focus { border-color: ${dt('inputtext.root.invalidBorderColor')}; - box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('focusRing.invalid')}; + box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('inputtext.extend.focusRing_invalid')}; } /* ─── 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 05489d17..2bd5ad9e 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('fonts.fontSize.200')}; - font-family: ${dt('fonts.fontFamily.heading')}; + font-size: ${dt('listbox.extend.fonts_fontSize_200')}; + font-family: ${dt('listbox.extend.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 542864b7..13d244c6 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('fonts.fontSize.300')}; - font-weight: ${dt('fonts.fontWeight.regular')}; + font-size: ${dt('megamenu.extend.fonts_fontSize_300')}; + font-weight: ${dt('megamenu.extend.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('fonts.fontSize.200')}; + font-size: ${dt('megamenu.extend.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 2ef5fcfc..21732f10 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('fonts.fontFamily.base')}; - font-size: ${dt('fonts.fontSize.300')}; - font-weight: ${dt('fonts.fontWeight.regular')}; - line-height: ${dt('fonts.lineHeight.400')}; + 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')}; } .p-menu .p-menu-item-content .menu-item-label { @@ -17,9 +17,9 @@ export const menuCss = ({ dt }: { dt: (token: string) => string }): string => ` } .p-menu .p-menu-item-content .menu-item-caption { - font-family: ${dt('fonts.fontFamily.base')}; - font-size: ${dt('fonts.fontSize.200')}; - font-weight: ${dt('fonts.fontWeight.regular')}; + 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')}; } @@ -60,8 +60,8 @@ export const menuCss = ({ dt }: { dt: (token: string) => string }): string => ` .p-menu .p-menu-submenu-label { text-transform: uppercase; - font-size: ${dt('fonts.fontSize.200')}; - font-family: ${dt('fonts.fontFamily.heading')}; - line-height: ${dt('fonts.lineHeight.400')}; + font-size: ${dt('menu.extend.fonts_fontSize_200')}; + font-family: ${dt('menu.extend.fonts_fontFamily_heading')}; + line-height: ${dt('menu.extend.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 6e2202a7..cd566216 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('fonts.fontFamily.base')}; - font-size: ${dt('fonts.fontSize.300')}; - font-weight: ${dt('fonts.fontWeight.regular')}; + font-family: ${dt('menubar.extend.fonts_fontFamily_base')}; + font-size: ${dt('menubar.extend.fonts_fontSize_300')}; + font-weight: ${dt('menubar.extend.fonts_fontWeight_regular')}; } .p-menubar-item-caption { - font-size: ${dt('fonts.fontSize.200')}; + font-size: ${dt('menubar.extend.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('fonts.fontSize.200')}; + font-size: ${dt('menubar.extend.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 6e39b2bc..bf0c8fce 100644 --- a/src/lib/providers/prime-preset/tokens/components/message.ts +++ b/src/lib/providers/prime-preset/tokens/components/message.ts @@ -24,18 +24,18 @@ export const messageCss = ({ dt }: { dt: (token: string) => string }): string => /* Заголовок message */ .p-message-summary { - font-family: ${dt('fonts.fontFamily.base')}; + font-family: ${dt('message.extend.fonts_fontFamily_base')}; font-weight: ${dt('message.text.fontWeight')}; - line-height: ${dt('fonts.lineHeight.250')}; + line-height: ${dt('message.extend.fonts_lineHeight_250')}; font-size: ${dt('message.text.fontSize')}; } /* Детальное описание message */ .p-message .p-message-detail { - font-family: ${dt('fonts.fontFamily.base')}; - font-size: ${dt('fonts.fontSize.200')}; - line-height: ${dt('fonts.lineHeight.250')}; - font-weight: ${dt('fonts.fontWeight.regular')}; + 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')}; } /* Кнопка закрытия message */ diff --git a/src/lib/providers/prime-preset/tokens/components/metergroup.ts b/src/lib/providers/prime-preset/tokens/components/metergroup.ts index 91b53797..b4864b69 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('fonts.fontFamily.base')}; - font-size: ${dt('fonts.fontSize.200')}; - font-weight: ${dt('fonts.fontWeight.regular')}; - line-height: ${dt('fonts.lineHeight.200')}; + 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')}; color: ${dt('metergroup.extend.extLabel.color')}; } .p-metergroup-label .p-metergroup-label-text + span { - font-family: ${dt('fonts.fontFamily.base')}; - font-size: ${dt('fonts.fontSize.200')}; - font-weight: ${dt('fonts.fontWeight.medium')}; - color: ${dt('text.color')}; + 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')}; } .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 061b759f..2161399c 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('fonts.fontFamily.base')}; - font-size: ${dt('fonts.fontSize.300')}; - font-weight: ${dt('fonts.fontWeight.regular')}; - line-height: ${dt('fonts.lineHeight.250')}; + 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')}; color: ${dt('paginator.currentPageReport.color')}; } /* ─── Page number buttons ─── */ .p-paginator .p-paginator-page { - font-family: ${dt('fonts.fontFamily.base')}; - font-size: ${dt('fonts.fontSize.300')}; - font-weight: ${dt('fonts.fontWeight.regular')}; - line-height: ${dt('fonts.lineHeight.250')}; + 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')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/panelmenu.ts b/src/lib/providers/prime-preset/tokens/components/panelmenu.ts index 0ef79947..15177a06 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('fonts.fontSize.300')}; + font-size: ${dt('panelmenu.extend.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('fonts.fontSize.200')}; - line-height: ${dt('fonts.lineHeight.450')}; + font-size: ${dt('panelmenu.extend.fonts_fontSize_200')}; + line-height: ${dt('panelmenu.extend.fonts_lineHeight_450')}; 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 80dd07a4..48931769 100644 --- a/src/lib/providers/prime-preset/tokens/components/password.ts +++ b/src/lib/providers/prime-preset/tokens/components/password.ts @@ -16,10 +16,10 @@ export const passwordCss = ({ dt }: { dt: (token: string) => string }): string = } .p-password-meter-text { - font-family: ${dt('fonts.fontFamily.base')}; - font-size: ${dt('fonts.fontSize.200')}; - font-weight: ${dt('fonts.fontWeight.regular')}; - line-height: ${dt('fonts.lineHeight.250')}; + 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')}; color: ${dt('password.overlay.color')}; } @@ -31,7 +31,7 @@ export const passwordCss = ({ dt }: { dt: (token: string) => string }): string = /* ─── Invalid + Focus ─── */ .p-password:has(.p-inputtext.p-invalid:focus) { - box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('focusRing.invalid')}; + box-shadow: 0 0 0 ${dt('inputtext.focusRing.width')} ${dt('password.extend.focusRing_invalid')}; 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('fonts.fontFamily.base')}; - font-weight: ${dt('floatlabel.root.fontWeight')}; - line-height: ${dt('fonts.lineHeight.250')}; - color: ${dt('floatlabel.root.color')}; + 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')}; } .p-floatlabel:has(.p-password) .p-floatlabel-active label { - font-weight: ${dt('floatlabel.root.active.fontWeight')}; + font-weight: ${dt('password.extend.floatlabel_root_active_fontWeight')}; } .p-floatlabel-in .p-password .p-inputtext { - font-family: ${dt('fonts.fontFamily.base')}; - padding-block-start: ${dt('floatlabel.in.input.paddingTop')}; - padding-block-end: ${dt('floatlabel.in.input.paddingBottom')}; + 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')}; } /* ─── Кастомный контент (правила пароля) ─── */ @@ -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('fonts.fontFamily.base')}; - font-size: ${dt('fonts.fontSize.200')}; - font-weight: ${dt('fonts.fontWeight.regular')}; - line-height: ${dt('fonts.lineHeight.250')}; + 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')}; color: ${dt('password.overlay.color')}; } /* ─── Состояния иконок правил ─── */ .p-password-rule i { - font-size: ${dt('fonts.fontSize.200')}; + font-size: ${dt('password.extend.fonts_fontSize_200')}; } .p-password-rule .ti-circle { - color: ${dt('surface.400')}; + color: ${dt('password.extend.surface_400')}; } .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 eda95979..1ce30601 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('fonts.fontFamily.base')}; + font-family: ${dt('progressbar.extend.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 d901e3e1..8967afa1 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('primary.color')}; + stroke: ${dt('progressspinner.extend.primary_color')}; 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 5555d8eb..8f6b0c1a 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('focusRing.success')}; + box-shadow: 0 0 0 ${dt('radiobutton.focusRing.width')} ${dt('radiobutton.extend.focusRing_success')}; } /* 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('focusRing.invalid')}; + box-shadow: 0 0 0 ${dt('radiobutton.focusRing.width')} ${dt('radiobutton.extend.focusRing_invalid')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/select.ts b/src/lib/providers/prime-preset/tokens/components/select.ts index f8505f0c..21f5d564 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('fonts.lineHeight.250')}; + line-height: ${dt('select.extend.fonts_lineHeight_250')}; } .p-select.p-component .p-select-label, .p-select-option { - font-family: ${dt('fonts.fontFamily.base')}; + font-family: ${dt('select.extend.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('focusRing.invalid')}; + box-shadow: 0 0 0 ${dt('select.root.focusRing.width')} ${dt('select.extend.focusRing_invalid')}; } /* ─── 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('fonts.fontFamily.base')}; - font-weight: ${dt('floatlabel.root.fontWeight')}; - line-height: ${dt('fonts.lineHeight.250')}; - color: ${dt('floatlabel.root.color')}; + 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')}; } .p-floatlabel:has(.p-select.p-component) .p-floatlabel-active label { - font-weight: ${dt('floatlabel.root.active.fontWeight')}; + font-weight: ${dt('select.extend.floatlabel_root_active_fontWeight')}; } .p-floatlabel-in .p-select.p-component .p-select-label { - font-family: ${dt('fonts.fontFamily.base')}; - padding-block-start: ${dt('floatlabel.in.input.paddingTop')}; - padding-block-end: ${dt('floatlabel.in.input.paddingBottom')}; + 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')}; } /* ─── Checkmark: выбранный элемент ─── */ diff --git a/src/lib/providers/prime-preset/tokens/components/selectbutton.ts b/src/lib/providers/prime-preset/tokens/components/selectbutton.ts index d02fd4fd..5eeb74a9 100644 --- a/src/lib/providers/prime-preset/tokens/components/selectbutton.ts +++ b/src/lib/providers/prime-preset/tokens/components/selectbutton.ts @@ -3,21 +3,21 @@ export const selectbuttonCss = ({ dt }: { dt: (token: string) => string }): stri background: ${dt('selectbutton.colorScheme.light.extend.background')}; padding: ${dt('selectbutton.extend.paddingY')} ${dt('selectbutton.extend.paddingX')}; gap: ${dt('selectbutton.extend.gap')}; - font-family: ${dt('fonts.fontFamily.heading')}; - font-weight: ${dt('fonts.fontWeight.demibold')}; + font-family: ${dt('selectbutton.extend.fonts_fontFamily_heading')}; + font-weight: ${dt('selectbutton.extend.fonts_fontWeight_demibold')}; } .p-selectbutton.p-component .p-togglebutton.p-component { - font-family: ${dt('fonts.fontFamily.heading')}; - font-weight: ${dt('fonts.fontWeight.demibold')}; - line-height: ${dt('fonts.lineHeight.500')}; - height: ${dt('controls.iconOnly.700')}; + 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')}; 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('fonts.lineHeight.400')}; + line-height: ${dt('selectbutton.extend.fonts_lineHeight_400')}; } .p-selectbutton.p-component .p-togglebutton.p-togglebutton-checked.p-component, @@ -35,13 +35,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('fonts.lineHeight.300')}; - height: ${dt('controls.iconOnly.600')}; + line-height: ${dt('selectbutton.extend.fonts_lineHeight_300')}; + height: ${dt('selectbutton.extend.controls_iconOnly_600')}; } .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('fonts.lineHeight.250')}; + line-height: ${dt('selectbutton.extend.fonts_lineHeight_250')}; } .p-selectbutton.p-selectbutton-small.p-component .p-togglebutton .p-togglebutton-icon, @@ -57,13 +57,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('fonts.lineHeight.550')}; - height: ${dt('controls.iconOnly.850')}; + line-height: ${dt('selectbutton.extend.fonts_lineHeight_550')}; + height: ${dt('selectbutton.extend.controls_iconOnly_850')}; } .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('fonts.lineHeight.550')}; + line-height: ${dt('selectbutton.extend.fonts_lineHeight_550')}; } .p-selectbutton.p-selectbutton-large.p-component .p-togglebutton .p-togglebutton-icon, @@ -73,14 +73,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('fonts.fontSize.600')}; - line-height: ${dt('fonts.lineHeight.550')}; - height: ${dt('controls.iconOnly.900')}; + font-size: ${dt('selectbutton.extend.fonts_fontSize_600')}; + line-height: ${dt('selectbutton.extend.fonts_lineHeight_550')}; + height: ${dt('selectbutton.extend.controls_iconOnly_900')}; } .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('fonts.lineHeight.700')}; + line-height: ${dt('selectbutton.extend.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 edeb457e..6fca119d 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('focusRing.success')}; + outline: ${dt('slider.handle.focusRing.width')} ${dt('slider.handle.focusRing.style')} ${dt('slider.extend.focusRing_success')}; 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 d370681d..ed130d89 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('fonts.lineHeight.200')}; + line-height: ${dt('stepper.extend.fonts_lineHeight_200')}; 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('fonts.fontFamily.base')}; - font-size: ${dt('fonts.fontSize.200')}; - font-weight: ${dt('fonts.fontWeight.regular')}; + font-family: ${dt('stepper.extend.fonts_fontFamily_base')}; + font-size: ${dt('stepper.extend.fonts_fontSize_200')}; + font-weight: ${dt('stepper.extend.fonts_fontWeight_regular')}; line-height: normal; - color: ${dt('text.mutedColor')}; + color: ${dt('stepper.extend.text_mutedColor')}; } /* Номер шага */ .p-stepper .p-step-number { - font-family: ${dt('fonts.fontFamily.base')}; - font-size: ${dt('fonts.fontSize.300')}; - font-weight: ${dt('fonts.fontWeight.medium')}; - line-height: ${dt('fonts.lineHeight.150')}; + 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')}; } /* 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('background.transparent')}; - border-color: ${dt('background.transparent')}; + background: ${dt('stepper.extend.background_transparent')}; + border-color: ${dt('stepper.extend.background_transparent')}; } /* Размер иконок в step-number */ @@ -59,6 +59,6 @@ export const stepperCss = ({ dt }: { dt: (token: string) => string }): string => /* Прозрачный фон для панелей */ .p-stepper .p-steppanel { - background: ${dt('background.transparent')}; + background: ${dt('stepper.extend.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 e9cc5dcf..1bf7a783 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('fonts.fontFamily.heading')}; - font-size: ${dt('fonts.fontSize.300')}; - font-weight: ${dt('fonts.fontWeight.demibold')}; + font-family: ${dt('tabs.extend.fonts_fontFamily_heading')}; + font-size: ${dt('tabs.extend.fonts_fontSize_300')}; + font-weight: ${dt('tabs.extend.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 7f84dbe3..4d288fcb 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('fonts.fontFamily.base')}; - line-height: ${dt('fonts.lineHeight.250')}; + font-family: ${dt('tag.extend.fonts_fontFamily_base')}; + line-height: ${dt('tag.extend.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 c359a9cf..1bc0d1e2 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('fonts.lineHeight.250')}; + line-height: ${dt('textarea.extend.fonts_lineHeight_250')}; min-height: ${dt('textarea.extend.minHeight')}; - font-family: ${dt('fonts.fontFamily.base')}; + font-family: ${dt('textarea.extend.fonts_fontFamily_base')}; } .p-textarea::placeholder { - font-family: ${dt('fonts.fontFamily.base')}; + font-family: ${dt('textarea.extend.fonts_fontFamily_base')}; } .p-floatlabel:has(.p-textarea) label { - font-family: ${dt('fonts.fontFamily.base')}; + font-family: ${dt('textarea.extend.fonts_fontFamily_base')}; } /* --- Sizes --- */ @@ -42,7 +42,7 @@ export const textareaCss = ({ dt }: { dt: (token: string) => string }): string = /* --- Invalid + Focus --- */ .p-textarea.p-invalid:focus { border-color: ${dt('textarea.invalidBorderColor')}; - box-shadow: 0 0 0 ${dt('textarea.focusRing.width')} ${dt('focusRing.invalid')}; + box-shadow: 0 0 0 ${dt('textarea.focusRing.width')} ${dt('textarea.extend.focusRing_invalid')}; } /* --- 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('form.padding.700')}; + padding-right: ${dt('textarea.extend.form_padding_700')}; } .p-iconfield:has(.p-textarea) .p-inputicon { - top: ${dt('form.padding.500')}; + top: ${dt('textarea.extend.form_padding_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 bdef994f..8acda6c8 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('fonts.fontSize.300')}; + font-size: ${dt('tieredmenu.extend.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('fonts.fontSize.200')}; + font-size: ${dt('tieredmenu.extend.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 562376ec..454737d3 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('fonts.fontFamily.base')}; - font-size: ${dt('fonts.fontSize.300')}; - line-height: ${dt('fonts.lineHeight.500')}; - color: ${dt('text.color')}; + 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')}; } /* ─── Маркер ─── */ diff --git a/src/lib/providers/prime-preset/tokens/components/toast.ts b/src/lib/providers/prime-preset/tokens/components/toast.ts index adc64305..36506ea2 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('fonts.fontFamily.base')}; - line-height: ${dt('fonts.lineHeight.250')}; + font-family: ${dt('toast.extend.fonts_fontFamily_base')}; + line-height: ${dt('toast.extend.fonts_lineHeight_250')}; } /* Детальное описание toast */ .p-toast-message .p-toast-detail { - font-family: ${dt('fonts.fontFamily.base')}; - line-height: ${dt('fonts.lineHeight.250')}; + font-family: ${dt('toast.extend.fonts_fontFamily_base')}; + line-height: ${dt('toast.extend.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 228d2d39..68e7b83f 100644 --- a/src/lib/providers/prime-preset/tokens/components/togglebutton.ts +++ b/src/lib/providers/prime-preset/tokens/components/togglebutton.ts @@ -2,9 +2,9 @@ export const togglebuttonCss = ({ dt }: { dt: (token: string) => string }): stri /* ─── Типографика ─── */ .p-togglebutton.p-component { - font-family: ${dt('fonts.fontFamily.heading')}; - font-weight: ${dt('fonts.fontWeight.demibold')}; - line-height: ${dt('fonts.lineHeight.500')}; + font-family: ${dt('togglebutton.extend.fonts_fontFamily_heading')}; + font-weight: ${dt('togglebutton.extend.fonts_fontWeight_demibold')}; + line-height: ${dt('togglebutton.extend.fonts_lineHeight_500')}; } /* ─── Hover unchecked ─── */ @@ -21,10 +21,10 @@ export const togglebuttonCss = ({ dt }: { dt: (token: string) => string }): stri /* ─── Small ─── */ .p-togglebutton.p-togglebutton.p-component.p-togglebutton-sm { - line-height: ${dt('fonts.lineHeight.300')}; + line-height: ${dt('togglebutton.extend.fonts_lineHeight_300')}; } .p-togglebutton.p-togglebutton.p-component.p-togglebutton-sm .p-togglebutton-label { - line-height: ${dt('fonts.lineHeight.250')}; + line-height: ${dt('togglebutton.extend.fonts_lineHeight_250')}; } .p-togglebutton.p-togglebutton.p-component.p-togglebutton-sm .p-togglebutton-icon { font-size: ${dt('togglebutton.extend.iconSize.sm')}; @@ -37,7 +37,7 @@ export const togglebuttonCss = ({ dt }: { dt: (token: string) => string }): stri /* ─── Large ─── */ .p-togglebutton.p-togglebutton.p-component.p-togglebutton-lg { - line-height: ${dt('fonts.lineHeight.550')}; + line-height: ${dt('togglebutton.extend.fonts_lineHeight_550')}; gap: ${dt('togglebutton.root.gap')}; } .p-togglebutton.p-togglebutton.p-component.p-togglebutton-lg .p-togglebutton-content { @@ -50,8 +50,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('fonts.fontSize.500')}; - line-height: ${dt('fonts.lineHeight.550')}; + font-size: ${dt('togglebutton.extend.fonts_fontSize_500')}; + line-height: ${dt('togglebutton.extend.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 db421e6f..2c57e480 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('focusRing.success')}; + box-shadow: 0 0 0 ${dt('toggleswitch.root.focusRing.width')} ${dt('toggleswitch.extend.focusRing_success')}; } /* Focus ring для состояния ошибки */ .p-toggleswitch.p-invalid:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) .p-toggleswitch-slider { - box-shadow: 0 0 0 ${dt('focusRing.width')} ${dt('focusRing.invalid')}; + box-shadow: 0 0 0 ${dt('toggleswitch.extend.focusRing_width')} ${dt('toggleswitch.extend.focusRing_invalid')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/components/tooltip.ts b/src/lib/providers/prime-preset/tokens/components/tooltip.ts index 8bbc215f..3284de1b 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('fonts.fontFamily.base')}; - font-size: ${dt('fonts.fontSize.200')}; - font-weight: ${dt('fonts.fontWeight.regular')}; - line-height: ${dt('fonts.lineHeight.300')}; + 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')}; } `; diff --git a/src/lib/providers/prime-preset/tokens/tokens.json b/src/lib/providers/prime-preset/tokens/tokens.json index f1e43382..fc09de9a 100644 --- a/src/lib/providers/prime-preset/tokens/tokens.json +++ b/src/lib/providers/prime-preset/tokens/tokens.json @@ -1788,7 +1788,9 @@ "extHeader": { "iconSize": "{dimension.size.350}", "gap": "{dimension.space.200}" - } + }, + "fonts_fontFamily_base": "{typography.fontFamily.base}", + "fonts_fontSize_300": "{typography.fontSize.300}" }, "colorScheme": { "light": { @@ -1854,7 +1856,14 @@ }, "extOptionGroup": { "gap": "{dimension.space.200}" - } + }, + "dimension_space_200": "{dimension.space.200}", + "fonts_fontSize_300": "{typography.fontSize.300}", + "fonts_lineHeight_250": "{typography.lineHeight.250}", + "form_borderColor": "{text.disabled}", + "form_focusBorderSecondaryColor": "{background.brand.boldHover}", + "form_hoverBorderSecondaryColor": "{background.brand.boldHover}", + "form_width_300": "{dimension.space.900}" }, "colorScheme": { "light": { @@ -1959,7 +1968,10 @@ "borderColor": "{border.default}", "circle": { "borderRadius": "{dimension.radius.max}" - } + }, + "content_background": "{background.surface.raised}", + "media_padding_300": "{dimension.space.300}", + "media_padding_600": "{dimension.space.600}" }, "root": { "width": "{dimension.size.500}", @@ -2086,7 +2098,10 @@ "iconSize": "{dimension.size.350}", "extItem": { "padding": "{dimension.space.100}" - } + }, + "fonts_fontSize_200": "{typography.fontSize.200}", + "opacity_500": "{opacity.500}", + "transparent": "{background.transparent}" }, "root": { "padding": "0rem", @@ -2591,7 +2606,11 @@ "card": { "extend": { "borderColor": "{border.subtle}", - "borderWidth": "{dimension.size.100}" + "borderWidth": "{dimension.size.100}", + "fonts_fontFamily_heading": "{typography.fontFamily.heading}", + "fonts_fontSize_200": "{typography.fontSize.200}", + "fonts_fontWeight_regular": "{typography.fontWeight.regular}", + "overlay_popover_shadow": "{shadow.400}" }, "root": { "background": "{background.surface.raised}", @@ -2644,6 +2663,12 @@ "offset": "{dimension.focusRing.offset}", "shadow": "{shadow.200}" } + }, + "extend": { + "surface_200": "{background.disabled}", + "surface_300": "{text.disabled}", + "surface_400": "{text.hover.subtle}", + "text_color": "{text.default}" } }, "checkbox": { @@ -2697,12 +2722,33 @@ "lg": { "size": "{dimension.size.350}" } + }, + "extend": { + "focusRing_invalid": "{focusRing.invalid}", + "focusRing_success": "{focusRing.success}", + "fonts_fontFamily_base": "{typography.fontFamily.base}", + "fonts_fontFamily_heading": "{typography.fontFamily.heading}", + "fonts_fontSize_200": "{typography.fontSize.200}", + "fonts_fontSize_300": "{typography.fontSize.300}", + "fonts_fontWeight_regular": "{typography.fontWeight.regular}", + "text_brand": "{text.brand}", + "text_color": "{text.default}", + "text_disabled": "{text.disabled}", + "text_mutedColor": "{text.muted}", + "text_subtle": "{text.subtle}", + "focusRing_width": "{dimension.space.100}" } }, "chip": { "extend": { "borderColor": "{border.transparent}", - "borderWidth": "{dimension.size.100}" + "borderWidth": "{dimension.size.100}", + "focusRing_success": "{focusRing.success}", + "fonts_fontFamily_base": "{typography.fontFamily.base}", + "fonts_fontSize_300": "{typography.fontSize.300}", + "fonts_fontWeight_regular": "{typography.fontWeight.regular}", + "fonts_lineHeight_400": "{typography.lineHeight.400}", + "opacity_500": "{opacity.500}" }, "root": { "borderRadius": "{dimension.radius.200}", @@ -2751,7 +2797,11 @@ "help": "{background.help.bold}", "warn": "{background.warning.bold}", "danger": "{background.danger.bold}" - } + }, + "dimension_overlayWidth_base": "{dimension.overlayWidth.base}", + "dimension_overlayWidth_lg": "{dimension.overlayWidth.lg}", + "dimension_overlayWidth_sm": "{dimension.overlayWidth.sm}", + "dimension_overlayWidth_xlg": "{dimension.overlayWidth.xlg}" }, "icon": { "size": "{dimension.size.400}", @@ -3009,6 +3059,9 @@ "paginatorBottom": { "borderWidth": "0 0 {dimension.size.100} 0", "borderColor": "{border.subtle}" + }, + "extend": { + "text_hoverColor": "{text.hover.default}" } }, "dataview": { @@ -3064,7 +3117,15 @@ }, "extSelectYear": { "minWidth": "{dimension.size.1000}" - } + }, + "dimension_size_1000": "{dimension.size.1000}", + "fonts_fontFamily_base": "{typography.fontFamily.base}", + "fonts_fontFamily_heading": "{typography.fontFamily.heading}", + "fonts_fontSize_100": "{typography.fontSize.100}", + "fonts_fontSize_300": "{typography.fontSize.300}", + "fonts_fontWeight_demibold": "{typography.fontWeight.demibold}", + "fonts_fontWeight_regular": "{typography.fontWeight.regular}", + "form_borderWidth": "{dimension.size.100}" }, "colorScheme": { "light": { @@ -3200,7 +3261,18 @@ "dialog": { "extend": { "borderWidth": "{dimension.borderWidth.100}", - "backdrop": "{background.scrim.modal}" + "backdrop": "{background.scrim.modal}", + "dimension_borderWidth_100": "{dimension.borderWidth.100}", + "dimension_overlayWidth_base": "{dimension.overlayWidth.base}", + "dimension_overlayWidth_lg": "{dimension.overlayWidth.lg}", + "dimension_overlayWidth_sm": "{dimension.overlayWidth.sm}", + "dimension_overlayWidth_xlg": "{dimension.overlayWidth.xlg}", + "fonts_fontFamily_base": "{typography.fontFamily.base}", + "fonts_fontFamily_heading": "{typography.fontFamily.heading}", + "fonts_fontSize_300": "{typography.fontSize.300}", + "fonts_fontWeight_regular": "{typography.fontWeight.regular}", + "fonts_lineHeight_500": "{typography.lineHeight.500}", + "fonts_lineHeight_550": "{typography.lineHeight.550}" }, "root": { "background": "{background.surface.raised}", @@ -3239,7 +3311,10 @@ "content": { "gap": "{dimension.space.200}" }, - "iconSize": "{dimension.size.300}" + "iconSize": "{dimension.size.300}", + "fonts_fontFamily_heading": "{typography.fontFamily.heading}", + "fonts_fontSize_200": "{typography.fontSize.200}", + "fonts_fontWeight_demibold": "{typography.fontWeight.demibold}" }, "horizontal": { "margin": "{dimension.space.400} 0", @@ -3267,7 +3342,9 @@ }, "padding": "{dimension.space.200}", "scale": "0.125rem", - "backdrop": "{background.scrim.modal}" + "backdrop": "{background.scrim.modal}", + "dimension_space_400": "{dimension.space.400}", + "overlay_modal_padding_300": "{dimension.space.600}" }, "root": { "background": "{background.surface.raised}", @@ -3406,7 +3483,8 @@ }, "galleria": { "extend": { - "backdrop": "{background.scrim.modal}" + "backdrop": "{background.scrim.modal}", + "dimension_space_200": "{dimension.space.200}" }, "colorScheme": { "light": { @@ -3548,7 +3626,8 @@ "extButton": { "height": "{dimension.size.600}", "iconSize": "{dimension.size.300}" - } + }, + "fonts_fontFamily_base": "{typography.fontFamily.base}" }, "colorScheme": { "light": { @@ -3577,7 +3656,8 @@ "inputotp": { "extend": { "height": "{dimension.size.600}", - "borderWidth": "{dimension.borderWidth.100}" + "borderWidth": "{dimension.borderWidth.100}", + "focusRing_invalid": "{focusRing.invalid}" }, "root": { "gap": "{dimension.space.200}" @@ -3601,7 +3681,10 @@ "fontSize": "{typography.fontSize.300}", "paddingX": "{dimension.space.300}", "paddingY": "{dimension.space.600}" - } + }, + "focusRing_invalid": "{focusRing.invalid}", + "fonts_fontFamily_base": "{typography.fontFamily.base}", + "fonts_lineHeight_250": "{typography.lineHeight.250}" }, "root": { "background": "{background.surface.ground}", @@ -3652,7 +3735,9 @@ "stripedColor": "{text.muted}" }, "gap": "{dimension.space.200}" - } + }, + "fonts_fontFamily_heading": "{typography.fontFamily.heading}", + "fonts_fontSize_200": "{typography.fontSize.200}" }, "colorScheme": { "light": { @@ -3713,7 +3798,10 @@ "gap": "{dimension.space.100}" } }, - "iconSize": "{typography.fontSize.500}" + "iconSize": "{typography.fontSize.500}", + "fonts_fontSize_200": "{typography.fontSize.200}", + "fonts_fontSize_300": "{typography.fontSize.300}", + "fonts_fontWeight_regular": "{typography.fontWeight.regular}" }, "colorScheme": { "light": { @@ -3810,7 +3898,13 @@ }, "activeBackground": "{background.selected}", "activeColor": "{text.onBold}" - } + }, + "fonts_fontFamily_base": "{typography.fontFamily.base}", + "fonts_fontFamily_heading": "{typography.fontFamily.heading}", + "fonts_fontSize_200": "{typography.fontSize.200}", + "fonts_fontSize_300": "{typography.fontSize.300}", + "fonts_fontWeight_regular": "{typography.fontWeight.regular}", + "fonts_lineHeight_400": "{typography.lineHeight.400}" }, "colorScheme": { "light": { @@ -3878,7 +3972,11 @@ "fontWeight": "{typography.fontWeight.demibold}", "background": "{background.transparent}", "color": "{text.muted}" - } + }, + "fonts_fontFamily_base": "{typography.fontFamily.base}", + "fonts_fontSize_200": "{typography.fontSize.200}", + "fonts_fontSize_300": "{typography.fontSize.300}", + "fonts_fontWeight_regular": "{typography.fontWeight.regular}" }, "colorScheme": { "light": { @@ -3998,7 +4096,11 @@ "caption": { "color": "{text.default}" } - } + }, + "fonts_fontFamily_base": "{typography.fontFamily.base}", + "fonts_fontSize_200": "{typography.fontSize.200}", + "fonts_fontWeight_regular": "{typography.fontWeight.regular}", + "fonts_lineHeight_250": "{typography.lineHeight.250}" }, "colorScheme": { "light": { @@ -4202,7 +4304,13 @@ "extend": { "extLabel": { "color": "{text.muted}" - } + }, + "fonts_fontFamily_base": "{typography.fontFamily.base}", + "fonts_fontSize_200": "{typography.fontSize.200}", + "fonts_fontWeight_medium": "{typography.fontWeight.medium}", + "fonts_fontWeight_regular": "{typography.fontWeight.regular}", + "fonts_lineHeight_200": "{typography.lineHeight.200}", + "text_color": "{text.default}" }, "root": { "borderRadius": "{dimension.radius.300}", @@ -4364,6 +4472,12 @@ }, "jumpToPageInput": { "maxWidth": "{dimension.size.900}" + }, + "extend": { + "fonts_fontFamily_base": "{typography.fontFamily.base}", + "fonts_fontSize_300": "{typography.fontSize.300}", + "fonts_fontWeight_regular": "{typography.fontWeight.regular}", + "fonts_lineHeight_250": "{typography.lineHeight.250}" } }, "panelmenu": { @@ -4379,7 +4493,10 @@ "color": "{text.muted}", "gap": "{dimension.space.100}" } - } + }, + "fonts_fontSize_200": "{typography.fontSize.200}", + "fonts_fontSize_300": "{typography.fontSize.300}", + "fonts_lineHeight_450": "{typography.lineHeight.450}" }, "root": { "gap": "{dimension.space.100}", @@ -4426,7 +4543,18 @@ }, "password": { "extend": { - "borderWidth": "{dimension.borderWidth.100}" + "borderWidth": "{dimension.borderWidth.100}", + "floatlabel_root_color": "{background.neutral.bold}", + "focusRing_invalid": "{focusRing.invalid}", + "fonts_fontFamily_base": "{typography.fontFamily.base}", + "fonts_fontSize_200": "{typography.fontSize.200}", + "fonts_fontWeight_regular": "{typography.fontWeight.regular}", + "fonts_lineHeight_250": "{typography.lineHeight.250}", + "surface_400": "{text.hover.subtle}", + "floatlabel_in_input_paddingBottom": "{dimension.space.300}", + "floatlabel_in_input_paddingTop": "{dimension.space.700}", + "floatlabel_root_active_fontWeight": "{typography.fontWeight.regular}", + "floatlabel_root_fontWeight": "{typography.fontWeight.regular}" }, "colorScheme": { "light": { @@ -4502,6 +4630,9 @@ }, "value": { "background": "{background.brand.bold}" + }, + "extend": { + "fonts_fontFamily_base": "{typography.fontFamily.base}" } }, "progressspinner": { @@ -4509,7 +4640,8 @@ "small": "{dimension.size.300}", "medium": "{dimension.size.500}", "large": "{dimension.size.700}", - "xlarge": "{dimension.size.800}" + "xlarge": "{dimension.size.800}", + "primary_color": "{background.brand.bold}" }, "colorScheme": { "light": { @@ -4571,6 +4703,10 @@ "lg": { "size": "{dimension.size.300}" } + }, + "extend": { + "focusRing_invalid": "{focusRing.invalid}", + "focusRing_success": "{focusRing.success}" } }, "rating": { @@ -4635,7 +4771,15 @@ }, "readonlyBackground": "{background.neutral.subtleHover}", "borderWidth": "{dimension.borderWidth.100}", - "iconSize": "{dimension.size.300}" + "iconSize": "{dimension.size.300}", + "floatlabel_root_color": "{background.neutral.bold}", + "focusRing_invalid": "{focusRing.invalid}", + "fonts_fontFamily_base": "{typography.fontFamily.base}", + "fonts_lineHeight_250": "{typography.lineHeight.250}", + "floatlabel_in_input_paddingBottom": "{dimension.space.300}", + "floatlabel_in_input_paddingTop": "{dimension.space.700}", + "floatlabel_root_active_fontWeight": "{typography.fontWeight.regular}", + "floatlabel_root_fontWeight": "{typography.fontWeight.regular}" }, "root": { "background": "{background.surface.ground}", @@ -4737,7 +4881,20 @@ "checkedColor": "{text.defaultHover}", "ext": { "borderRadius": "{dimension.radius.200}" - } + }, + "fonts_fontFamily_heading": "{typography.fontFamily.heading}", + "fonts_fontSize_600": "{typography.fontSize.600}", + "fonts_fontWeight_demibold": "{typography.fontWeight.demibold}", + "fonts_lineHeight_250": "{typography.lineHeight.250}", + "fonts_lineHeight_300": "{typography.lineHeight.300}", + "fonts_lineHeight_400": "{typography.lineHeight.400}", + "fonts_lineHeight_500": "{typography.lineHeight.500}", + "fonts_lineHeight_550": "{typography.lineHeight.550}", + "fonts_lineHeight_700": "{typography.lineHeight.700}", + "controls_iconOnly_600": "{dimension.space.800}", + "controls_iconOnly_700": "{dimension.space.900}", + "controls_iconOnly_850": "{dimension.size.750}", + "controls_iconOnly_900": "{dimension.size.800}" }, "colorScheme": { "light": { @@ -4809,6 +4966,9 @@ "height": "{dimension.size.250}", "shadow": "none" } + }, + "extend": { + "focusRing_success": "{focusRing.success}" } }, "splitter": { @@ -4851,7 +5011,16 @@ "invalidBorderColor": "{border.danger}", "borderWidth": "{dimension.size.100}", "iconSize": "{dimension.size.400}" - } + }, + "background_transparent": "{background.transparent}", + "fonts_fontFamily_base": "{typography.fontFamily.base}", + "fonts_fontSize_200": "{typography.fontSize.200}", + "fonts_fontSize_300": "{typography.fontSize.300}", + "fonts_fontWeight_medium": "{typography.fontWeight.medium}", + "fonts_fontWeight_regular": "{typography.fontWeight.regular}", + "fonts_lineHeight_150": "{typography.lineHeight.150}", + "fonts_lineHeight_200": "{typography.lineHeight.200}", + "text_mutedColor": "{text.muted}" }, "root": { "transitionDuration": "{dimension.duration.200}" @@ -4992,6 +5161,11 @@ "height": "0.18rem", "bottom": "-0.18rem", "background": "{text.default}" + }, + "extend": { + "fonts_fontFamily_heading": "{typography.fontFamily.heading}", + "fonts_fontSize_300": "{typography.fontSize.300}", + "fonts_fontWeight_demibold": "{typography.fontWeight.demibold}" } }, "toast": { @@ -5041,7 +5215,9 @@ "caption": { "color": "{text.default}" } - } + }, + "fonts_fontFamily_base": "{typography.fontFamily.base}", + "fonts_lineHeight_250": "{typography.lineHeight.250}" }, "colorScheme": { "light": { @@ -5186,6 +5362,10 @@ }, "icon": { "size": "{dimension.size.300}" + }, + "extend": { + "fonts_fontFamily_base": "{typography.fontFamily.base}", + "fonts_lineHeight_250": "{typography.lineHeight.250}" } }, "textarea": { @@ -5198,7 +5378,12 @@ "fontSize": "{typography.fontSize.300}", "paddingX": "{dimension.space.300}", "paddingY": "{dimension.space.500}" - } + }, + "focusRing_invalid": "{focusRing.invalid}", + "fonts_fontFamily_base": "{typography.fontFamily.base}", + "fonts_lineHeight_250": "{typography.lineHeight.250}", + "form_padding_500": "{dimension.space.500}", + "form_padding_700": "{dimension.space.700}" }, "root": { "background": "{background.surface.ground}", @@ -5250,7 +5435,9 @@ "gap": "{dimension.space.100}", "color": "{text.muted}" } - } + }, + "fonts_fontSize_200": "{typography.fontSize.200}", + "fonts_fontSize_300": "{typography.fontSize.300}" }, "root": { "background": "{background.surface.raised}", @@ -5290,7 +5477,11 @@ "extend": { "extEvent": { "gap": "{dimension.space.100}" - } + }, + "fonts_fontFamily_base": "{typography.fontFamily.base}", + "fonts_fontSize_300": "{typography.fontSize.300}", + "fonts_lineHeight_500": "{typography.lineHeight.500}", + "text_color": "{text.default}" }, "event": { "minHeight": "{dimension.size.800}" @@ -5361,7 +5552,14 @@ }, "extLg": { "iconOnlyWidth": "3.5714rem" - } + }, + "fonts_fontFamily_heading": "{typography.fontFamily.heading}", + "fonts_fontSize_500": "{typography.fontSize.500}", + "fonts_fontWeight_demibold": "{typography.fontWeight.demibold}", + "fonts_lineHeight_250": "{typography.lineHeight.250}", + "fonts_lineHeight_300": "{typography.lineHeight.300}", + "fonts_lineHeight_500": "{typography.lineHeight.500}", + "fonts_lineHeight_550": "{typography.lineHeight.550}" }, "colorScheme": { "light": { @@ -5472,6 +5670,11 @@ "handle": { "borderRadius": "{dimension.radius.max}", "size": "{dimension.size.300}" + }, + "extend": { + "focusRing_invalid": "{focusRing.invalid}", + "focusRing_success": "{focusRing.success}", + "focusRing_width": "{dimension.space.100}" } }, "tooltip": { @@ -5489,6 +5692,12 @@ "shadow": "{shadow.400}", "padding": "{dimension.space.200} {dimension.space.400} ", "borderRadius": "{dimension.radius.200}" + }, + "extend": { + "fonts_fontFamily_base": "{typography.fontFamily.base}", + "fonts_fontSize_200": "{typography.fontSize.200}", + "fonts_fontWeight_regular": "{typography.fontWeight.regular}", + "fonts_lineHeight_300": "{typography.lineHeight.300}" } }, "tree": { From 67647ce8ab1c583074a3d32828ab35a6c8970c3c Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Thu, 18 Jun 2026 20:43:05 +0800 Subject: [PATCH 13/46] =?UTF-8?q?A:=20tokens.json=20=D0=BF=D0=B5=D1=80?= =?UTF-8?q?=D0=B5=D0=B2=D0=B5=D0=B4=D1=91=D0=BD=20=D0=BD=D0=B0=20=D1=87?= =?UTF-8?q?=D0=B8=D1=81=D1=82=D1=83=D1=8E=20prebuild-=D0=BC=D0=BE=D0=B4?= =?UTF-8?q?=D0=B5=D0=BB=D1=8C=20=D0=B1=D0=B5=D0=B7=20Aura-superset=20(sema?= =?UTF-8?q?ntic=20=3D=20colorScheme(5=20=D1=80=D0=BE=D0=BB=D0=B5=D0=B9)+di?= =?UTF-8?q?mension+typography+shadow)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../providers/prime-preset/tokens/tokens.json | 976 ++---------------- 1 file changed, 74 insertions(+), 902 deletions(-) diff --git a/src/lib/providers/prime-preset/tokens/tokens.json b/src/lib/providers/prime-preset/tokens/tokens.json index fc09de9a..cd226009 100644 --- a/src/lib/providers/prime-preset/tokens/tokens.json +++ b/src/lib/providers/prime-preset/tokens/tokens.json @@ -444,648 +444,8 @@ } }, "semantic": { - "list": { - "padding": "{size.1x}", - "gap": { - "100": "{size.1x}", - "200": "{size.2x}" - }, - "header": { - "padding": "{size.4x} {size.4x} 0 {size.4x}" - }, - "option": { - "padding": "{size.2x} {size.3x}", - "borderRadius": "{size.2x}" - }, - "optionGroup": { - "padding": "{size.2x} {size.3x}", - "fontWeight": "{fonts.fontWeight.demibold}" - } - }, - "focusRing": { - "width": "{size.1x}", - "style": "none", - "color": "{focusRing.extend.success}", - "offset": "0rem" - }, - "form": { - "padding": { - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.3x}", - "400": "{size.4x}", - "500": "{size.5x}", - "600": "{size.6x}", - "700": "{size.7x}" - }, - "borderRadius": { - "100": "{size.2x}", - "200": "{size.3x}", - "300": "{size.pill}" - }, - "borderWidth": "{size.min}", - "icon": { - "100": "{size.2x}", - "200": "{size.3x}", - "300": "{size.4x}", - "400": "{size.5x}", - "500": "{size.6x}" - }, - "transitionDuration": "{transition.duration.200}", - "size": { - "100": "{size.min}", - "150": "{size.1x}", - "200": "{size.2x}", - "250": "{size.3x}", - "300": "{size.4x}", - "350": "{size.5x}", - "400": "{size.6x}", - "500": "{size.8x}", - "600": "{size.10x}", - "700": "{size.12x}", - "800": "{size.16x}", - "900": "{size.20x}" - }, - "width": { - "100": "{size.6x}", - "200": "{size.8x}", - "300": "{size.10x}", - "350": "{size.11x}", - "400": "{size.12x}", - "500": "{size.60x}", - "full": "{size.max}" - }, - "gap": { - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.3x}", - "400": "{size.4x}" - }, - "focusRing": { - "width": "{focusRing.width}", - "style": "{focusRing.style}", - "color": "{focusRing.color}", - "offset": "{focusRing.offset}" - }, - "sm": { - "width": "{size.60x}", - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{size.3x}", - "paddingY": "{size.3x}" - }, - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{size.4x}", - "paddingY": "{size.4x}", - "lg": { - "width": "{size.76x}", - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{size.5x}", - "paddingY": "{size.5x}" - }, - "xlg": { - "width": "{size.84x}", - "fontSize": "{fonts.fontSize.300}", - "paddingX": "{size.6x}", - "paddingY": "{size.6x}" - } - }, - "content": { - "borderRadius": "{size.3x}", - "padding": { - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.4x}", - "400": "{size.6x}", - "500": "{size.7x}" - }, - "borderWidth": "{size.min}", - "gap": { - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.3x}", - "400": "{size.4x}" - } - }, - "navigation": { - "width": { - "100": "{size.min}", - "200": "{size.1x}" - }, - "borderRadius": "{size.1x}", - "padding": { - "100": "{size.1x}", - "200": "{size.3x}", - "300": "{size.4x}", - "400": "{size.6x}" - }, - "size": { - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.5x}", - "400": "{size.8x}", - "500": "{size.16x}" - }, - "submenu": { - "padding": "{size.5x}" - }, - "list": { - "padding": { - "100": "{size.1x}", - "200": "{size.2x}" - }, - "gap": "{size.1x}" - }, - "item": { - "padding": "{size.2x} {size.3x}", - "borderRadius": "{size.2x}", - "gap": "{size.2x}" - }, - "submenuLabel": { - "padding": "{size.2x} {size.3x}", - "fontWeight": "{fonts.fontWeight.regular}" - }, - "submenuIcon": { - "size": "{fonts.fontSize.500}" - } - }, - "overlay": { - "mask": { - "transitionDuration": "{transition.duration.200}" - }, - "select": { - "borderRadius": "{size.3x}", - "padding": "{size.1x}" - }, - "borderWidth": "{size.min}", - "icon": { - "size": { - "100": "{size.4x}", - "200": "{size.6x}", - "300": "{size.7x}", - "400": "{size.8x}", - "500": "{size.9x}" - } - }, - "popover": { - "borderRadius": "{size.2x}", - "width": { - "100": "{size.2x}", - "200": "{size.3x}" - }, - "padding": { - "100": "{size.3x}", - "200": "{size.5x}" - } - }, - "modal": { - "borderRadius": "{size.6x}", - "padding": { - "100": "{size.4x}", - "200": "{size.5x}", - "300": "{size.6x}" - } - }, - "gap": { - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.3x}", - "400": "{size.4x}" - }, - "width": "{size.100x}", - "drawer": { - "padding": "{size.2x}" - }, - "sm": { - "width": "{size.80x}" - }, - "lg": { - "width": "{size.120x}" - }, - "xlg": { - "width": "{size.128x}" - } - }, - "feedback": { - "transitionDuration": "{transition.duration.200}", - "width": { - "100": "{size.min}", - "200": "{size.1x}", - "300": "{size.2x}", - "400": "{size.3x}", - "500": "{size.4x}", - "550": "{size.5x}", - "600": "{size.6x}", - "650": "{size.7x}", - "700": "{size.8x}", - "800": "{size.12x}", - "900": "{size.16x}" - }, - "icon": { - "size": { - "100": "{size.2x}", - "200": "{size.4x}", - "300": "{size.6x}", - "350": "{size.7x}", - "400": "{size.8x}", - "500": "{size.9x}" - } - }, - "padding": { - "100": "{size.2x}", - "200": "{size.4x}" - }, - "height": { - "100": "{size.2x}", - "200": "{size.3x}", - "300": "{size.4x}", - "400": "{size.5x}", - "500": "{size.6x}", - "600": "{size.7x}", - "650": "{size.8x}", - "700": "{size.9x}", - "750": "{size.10x}", - "800": "{size.11x}", - "850": "{size.12x}", - "900": "{size.16x}" - }, - "gap": { - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.3x}", - "400": "{size.4x}" - } - }, - "data": { - "padding": { - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.3x}", - "400": "{size.4x}", - "500": "{size.5x}" - }, - "icon": { - "size": { - "100": "{size.4x}", - "200": "{size.5x}", - "300": "{size.6x}", - "400": "{size.7x}", - "500": "{size.8x}", - "600": "{size.9x}", - "700": "{size.10x}" - } - }, - "transitionDuration": "{transition.duration.200}", - "borderWidth": "{size.none}", - "borderRadius": "{size.1x}", - "gap": { - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.3x}" - }, - "width": { - "100": "{size.min}", - "200": "{size.1x}", - "300": "{size.2x}", - "400": "{size.20x}" - } - }, - "media": { - "size": { - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.8x}", - "400": "{size.10x}", - "500": "{size.14x}", - "600": "{size.16x}" - }, - "borderRadius": { - "100": "{size.2x}", - "200": "{size.3x}", - "300": "{size.4x}", - "400": "{size.6x}", - "max": "{size.pill}" - }, - "icon": { - "size": { - "100": "{size.4x}", - "200": "{size.6x}", - "300": "{size.8x}" - } - }, - "transitionDuration": "{transition.duration.200}", - "padding": { - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.3x}", - "400": "{size.4x}", - "500": "{size.5x}", - "600": "{size.6x}" - }, - "gap": { - "100": "{size.1x}", - "200": "{size.2x}" - } - }, - "controls": { - "iconOnly": { - "100": "{size.2x}", - "200": "{size.4x}", - "300": "{size.5x}", - "400": "{size.6x}", - "500": "{size.7x}", - "600": "{size.8x}", - "700": "{size.10x}", - "800": "{size.11x}", - "850": "{size.14x}", - "900": "{size.16x}" - }, - "borderRadius": { - "100": "{size.3x}", - "200": "{size.4x}", - "max": "{size.pill}" - }, - "transitionDuration": "{transition.duration.200}", - "padding": { - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.3x}", - "400": "{size.4x}", - "500": "{size.5x}", - "600": "{size.6x}" - }, - "gap": { - "100": "{size.2x}", - "200": "{size.3x}", - "300": "{size.4x}" - }, - "width": { - "100": "{size.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": "{shadow.200}", - "extend": { - "invalid": "{colors.solid.red.200}", - "success": "{colors.solid.green.200}", - "warning": "{colors.solid.yellow.200}", - "info": "{colors.solid.blue.200}" - }, - "default": "{colors.solid.green.500}", - "invalid": "{colors.solid.red.200}", - "success": "{colors.solid.green.200}", - "warning": "{colors.solid.yellow.200}", - "info": "{colors.solid.blue.200}", - "help": "{colors.solid.purple.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}", - "default": "{colors.solid.zinc.900}", - "subtle": "{colors.solid.zinc.600}", - "muted": "{colors.solid.zinc.500}", - "placeholder": "{colors.solid.zinc.500}", - "disabled": "{colors.solid.zinc.300}", - "onBold": "{colors.alpha.white.1000}", - "staticDark": "{colors.solid.zinc.900}", - "staticLight": "{colors.alpha.white.1000}", - "brand": "{colors.solid.green.600}", - "link": "{colors.solid.green.600}", - "linkHover": "{colors.solid.green.700}", - "neutral": "{colors.solid.zinc.600}", - "hover": { - "default": "{colors.solid.zinc.700}", - "subtle": "{colors.solid.zinc.400}", - "muted": "{colors.solid.zinc.300}", - "brand": "{colors.solid.green.700}" - }, - "defaultHover": "{colors.solid.zinc.950}", - "neutralHover": "{colors.solid.zinc.950}", - "transparent": "rgba(255, 255, 255, 0.0001)", - "success": "{colors.solid.green.600}", - "info": "{colors.solid.blue.600}", - "warning": "{colors.solid.yellow.600}", - "danger": "{colors.solid.red.600}", - "help": "{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}" - }, "background": { "surface": { "ground": "{colors.alpha.white.1000}", @@ -1163,6 +523,34 @@ "boldHover": "{colors.solid.purple.600}" } }, + "text": { + "default": "{colors.solid.zinc.900}", + "subtle": "{colors.solid.zinc.600}", + "muted": "{colors.solid.zinc.500}", + "placeholder": "{colors.solid.zinc.500}", + "disabled": "{colors.solid.zinc.300}", + "onBold": "{colors.alpha.white.1000}", + "staticDark": "{colors.solid.zinc.900}", + "staticLight": "{colors.alpha.white.1000}", + "brand": "{colors.solid.green.600}", + "link": "{colors.solid.green.600}", + "linkHover": "{colors.solid.green.700}", + "neutral": "{colors.solid.zinc.600}", + "hover": { + "default": "{colors.solid.zinc.700}", + "subtle": "{colors.solid.zinc.400}", + "muted": "{colors.solid.zinc.300}", + "brand": "{colors.solid.green.700}" + }, + "defaultHover": "{colors.solid.zinc.950}", + "neutralHover": "{colors.solid.zinc.950}", + "transparent": "rgba(255, 255, 255, 0.0001)", + "success": "{colors.solid.green.600}", + "info": "{colors.solid.blue.600}", + "warning": "{colors.solid.yellow.600}", + "danger": "{colors.solid.red.600}", + "help": "{colors.solid.purple.600}" + }, "border": { "subtle": "{colors.solid.zinc.200}", "default": "{colors.solid.zinc.300}", @@ -1194,271 +582,18 @@ "warning": "{colors.solid.yellow.600}", "danger": "{colors.solid.red.600}", "help": "{colors.solid.purple.600}" - } - }, - "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": "{shadow.200}", - "extend": { - "invalid": "{colors.solid.red.800}", - "success": "{colors.solid.green.800}", - "warning": "{colors.solid.yellow.800}", - "info": "{colors.solid.blue.800}" - }, "default": "{colors.solid.green.500}", - "invalid": "{colors.solid.red.800}", - "success": "{colors.solid.green.800}", - "warning": "{colors.solid.yellow.800}", - "info": "{colors.solid.blue.800}", - "help": "{colors.solid.purple.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}", - "default": "{colors.alpha.white.1000}", - "subtle": "{colors.solid.zinc.400}", - "muted": "{colors.solid.zinc.500}", - "placeholder": "{colors.solid.zinc.500}", - "disabled": "{colors.solid.zinc.700}", - "onBold": "{colors.solid.zinc.900}", - "staticDark": "{colors.solid.zinc.900}", - "staticLight": "{colors.alpha.white.1000}", - "brand": "{colors.solid.green.400}", - "link": "{colors.solid.green.400}", - "linkHover": "{colors.solid.green.300}", - "neutral": "{colors.solid.zinc.400}", - "hover": { - "default": "{colors.solid.zinc.300}", - "subtle": "{colors.solid.zinc.600}", - "muted": "{colors.solid.zinc.700}", - "brand": "{colors.solid.green.300}" - }, - "defaultHover": "{colors.alpha.white.1000}", - "neutralHover": "{colors.solid.zinc.50}", - "transparent": "rgba(0, 0, 0, 0.0001)", - "success": "{colors.solid.green.400}", - "info": "{colors.solid.blue.400}", - "warning": "{colors.solid.yellow.400}", - "danger": "{colors.solid.red.400}", - "help": "{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}" - }, + "invalid": "{colors.solid.red.200}", + "success": "{colors.solid.green.200}", + "warning": "{colors.solid.yellow.200}", + "info": "{colors.solid.blue.200}", + "help": "{colors.solid.purple.200}", + "shadow": "{shadow.200}" + } + }, + "dark": { "background": { "surface": { "ground": "{colors.solid.zinc.950}", @@ -1536,6 +671,34 @@ "boldHover": "{colors.solid.purple.400}" } }, + "text": { + "default": "{colors.alpha.white.1000}", + "subtle": "{colors.solid.zinc.400}", + "muted": "{colors.solid.zinc.500}", + "placeholder": "{colors.solid.zinc.500}", + "disabled": "{colors.solid.zinc.700}", + "onBold": "{colors.solid.zinc.900}", + "staticDark": "{colors.solid.zinc.900}", + "staticLight": "{colors.alpha.white.1000}", + "brand": "{colors.solid.green.400}", + "link": "{colors.solid.green.400}", + "linkHover": "{colors.solid.green.300}", + "neutral": "{colors.solid.zinc.400}", + "hover": { + "default": "{colors.solid.zinc.300}", + "subtle": "{colors.solid.zinc.600}", + "muted": "{colors.solid.zinc.700}", + "brand": "{colors.solid.green.300}" + }, + "defaultHover": "{colors.alpha.white.1000}", + "neutralHover": "{colors.solid.zinc.50}", + "transparent": "rgba(0, 0, 0, 0.0001)", + "success": "{colors.solid.green.400}", + "info": "{colors.solid.blue.400}", + "warning": "{colors.solid.yellow.400}", + "danger": "{colors.solid.red.400}", + "help": "{colors.solid.purple.400}" + }, "border": { "subtle": "{colors.solid.zinc.800}", "default": "{colors.solid.zinc.700}", @@ -1567,6 +730,15 @@ "warning": "{colors.solid.yellow.400}", "danger": "{colors.solid.red.400}", "help": "{colors.solid.purple.400}" + }, + "focusRing": { + "default": "{colors.solid.green.500}", + "invalid": "{colors.solid.red.800}", + "success": "{colors.solid.green.800}", + "warning": "{colors.solid.yellow.800}", + "info": "{colors.solid.blue.800}", + "help": "{colors.solid.purple.800}", + "shadow": "{shadow.200}" } } }, From 48cb47d3b9a4fadc5527a53097b544ed572435fe Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Thu, 18 Jun 2026 21:37:53 +0800 Subject: [PATCH 14/46] =?UTF-8?q?semantic.typography=20=D1=82=D0=BE=D0=BB?= =?UTF-8?q?=D1=8C=D0=BA=D0=BE=20=D1=80=D0=BE=D0=BB=D0=B8:=20=D0=B0=D1=82?= =?UTF-8?q?=D0=BE=D0=BC=D0=B0=D1=80=D0=BD=D1=8B=D0=B5=20=D1=88=D0=BA=D0=B0?= =?UTF-8?q?=D0=BB=D1=8B=20=D1=83=D0=B1=D1=80=D0=B0=D0=BD=D1=8B,=20190=20?= =?UTF-8?q?=D1=81=D1=81=D1=8B=D0=BB=D0=BE=D0=BA=20=D0=BF=D0=B5=D1=80=D0=B5?= =?UTF-8?q?=D1=80=D0=B0=D0=B7=D0=B2=D0=B5=D0=B4=D0=B5=D0=BD=D1=8B=20=D0=BD?= =?UTF-8?q?=D0=B0=20=D0=BF=D0=BE=D0=B4-=D0=BF=D1=83=D1=82=D0=B8=20=D1=80?= =?UTF-8?q?=D0=BE=D0=BB=D0=B5=D0=B9=20(3=20lineHeight=20=D1=81=D0=BD=D0=B0?= =?UTF-8?q?=D0=BF:=20stepper/metergroup=E2=86=92caption,=20panelmenu?= =?UTF-8?q?=E2=86=92body.md)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../providers/prime-preset/tokens/tokens.json | 423 ++++++++---------- 1 file changed, 190 insertions(+), 233 deletions(-) diff --git a/src/lib/providers/prime-preset/tokens/tokens.json b/src/lib/providers/prime-preset/tokens/tokens.json index cd226009..4f365c88 100644 --- a/src/lib/providers/prime-preset/tokens/tokens.json +++ b/src/lib/providers/prime-preset/tokens/tokens.json @@ -809,49 +809,6 @@ } }, "typography": { - "fontFamily": { - "heading": "{fonts.fontFamily.heading}", - "base": "{fonts.fontFamily.base}" - }, - "fontWeight": { - "regular": "{fonts.fontWeight.regular}", - "medium": "{fonts.fontWeight.medium}", - "demibold": "{fonts.fontWeight.demibold}", - "bold": "{fonts.fontWeight.bold}" - }, - "fontSize": { - "100": "{fonts.fontSize.100}", - "200": "{fonts.fontSize.200}", - "300": "{fonts.fontSize.300}", - "400": "{fonts.fontSize.400}", - "500": "{fonts.fontSize.500}", - "600": "{fonts.fontSize.600}", - "650": "{fonts.fontSize.650}", - "700": "{fonts.fontSize.700}", - "750": "{fonts.fontSize.750}", - "800": "{fonts.fontSize.800}", - "900": "{fonts.fontSize.900}", - "1000": "{fonts.fontSize.1000}" - }, - "lineHeight": { - "100": "{fonts.lineHeight.100}", - "150": "{fonts.lineHeight.150}", - "200": "{fonts.lineHeight.200}", - "250": "{fonts.lineHeight.250}", - "300": "{fonts.lineHeight.300}", - "350": "{fonts.lineHeight.350}", - "400": "{fonts.lineHeight.400}", - "450": "{fonts.lineHeight.450}", - "500": "{fonts.lineHeight.500}", - "550": "{fonts.lineHeight.550}", - "600": "{fonts.lineHeight.600}", - "700": "{fonts.lineHeight.700}", - "800": "{fonts.lineHeight.800}", - "850": "{fonts.lineHeight.850}", - "900": "{fonts.lineHeight.900}", - "1000": "{fonts.lineHeight.1000}", - "auto": "{fonts.lineHeight.auto}" - }, "display": { "lg": { "fontFamily": "{fonts.fontFamily.heading}", @@ -961,8 +918,8 @@ "iconSize": "{dimension.size.350}", "gap": "{dimension.space.200}" }, - "fonts_fontFamily_base": "{typography.fontFamily.base}", - "fonts_fontSize_300": "{typography.fontSize.300}" + "fonts_fontFamily_base": "{typography.body.lg.fontFamily}", + "fonts_fontSize_300": "{typography.body.md.fontSize}" }, "colorScheme": { "light": { @@ -981,7 +938,7 @@ "activeHoverColor": "{text.hover.default}", "borderColor": "{border.transparent}", "padding": "{dimension.space.400} 0 {dimension.space.400} 0", - "fontWeight": "{typography.fontWeight.bold}", + "fontWeight": "{typography.heading.xl.fontWeight}", "borderRadius": "{dimension.radius.none}", "borderWidth": "{dimension.borderWidth.none}", "focusRing": { @@ -1030,8 +987,8 @@ "gap": "{dimension.space.200}" }, "dimension_space_200": "{dimension.space.200}", - "fonts_fontSize_300": "{typography.fontSize.300}", - "fonts_lineHeight_250": "{typography.lineHeight.250}", + "fonts_fontSize_300": "{typography.body.md.fontSize}", + "fonts_lineHeight_250": "{typography.caption.lineHeight}", "form_borderColor": "{text.disabled}", "form_focusBorderSecondaryColor": "{background.brand.boldHover}", "form_hoverBorderSecondaryColor": "{background.brand.boldHover}", @@ -1105,7 +1062,7 @@ "optionGroup": { "background": "{background.surface.raised}", "color": "{text.muted}", - "fontWeight": "{typography.fontWeight.demibold}", + "fontWeight": "{typography.heading.lg.fontWeight}", "padding": "{dimension.space.200} {dimension.space.300}" }, "dropdown": { @@ -1148,7 +1105,7 @@ "root": { "width": "{dimension.size.500}", "height": "{dimension.size.500}", - "fontSize": "{typography.fontSize.200}", + "fontSize": "{typography.body.sm.fontSize}", "color": "{text.staticDark}", "background": "{background.brand.bold}", "borderRadius": "{dimension.radius.300}" @@ -1163,7 +1120,7 @@ "lg": { "width": "{dimension.size.600}", "height": "{dimension.size.600}", - "fontSize": "{typography.fontSize.300}", + "fontSize": "{typography.body.md.fontSize}", "icon": { "size": "{dimension.size.300}" }, @@ -1180,7 +1137,7 @@ "group": { "offset": "-{dimension.space.600}" }, - "fontSize": "{typography.fontSize.500}" + "fontSize": "{typography.heading.sm.fontSize}" } }, "badge": { @@ -1240,8 +1197,8 @@ "root": { "borderRadius": "{dimension.size.200}", "padding": "{dimension.space.200}", - "fontSize": "{typography.fontSize.100}", - "fontWeight": "{typography.fontWeight.regular}", + "fontSize": "{typography.label.sm.fontSize}", + "fontWeight": "{typography.body.lg.fontWeight}", "minWidth": "{dimension.size.400}", "height": "{dimension.size.400}" }, @@ -1249,17 +1206,17 @@ "size": "{dimension.size.200}" }, "sm": { - "fontSize": "{typography.fontSize.100}", + "fontSize": "{typography.label.sm.fontSize}", "minWidth": "0rem", "height": "0rem" }, "lg": { - "fontSize": "{typography.fontSize.100}", + "fontSize": "{typography.label.sm.fontSize}", "minWidth": "{dimension.size.450}", "height": "{dimension.size.450}" }, "xl": { - "fontSize": "{typography.fontSize.100}", + "fontSize": "{typography.label.sm.fontSize}", "minWidth": "{dimension.size.500}", "height": "{dimension.size.500}" } @@ -1271,7 +1228,7 @@ "extItem": { "padding": "{dimension.space.100}" }, - "fonts_fontSize_200": "{typography.fontSize.200}", + "fonts_fontSize_200": "{typography.body.sm.fontSize}", "opacity_500": "{opacity.500}", "transparent": "{background.transparent}" }, @@ -1746,7 +1703,7 @@ "borderRadius": "{dimension.radius.300}", "roundedBorderRadius": "{dimension.radius.max}", "gap": "{dimension.space.200}", - "fontSize": "{typography.fontSize.200}", + "fontSize": "{typography.body.sm.fontSize}", "paddingX": "{dimension.space.400}", "paddingY": "{dimension.space.200}", "iconOnlyWidth": "{dimension.size.600}", @@ -1759,19 +1716,19 @@ "offset": "{dimension.focusRing.offset}" }, "sm": { - "fontSize": "{typography.fontSize.200}", + "fontSize": "{typography.body.sm.fontSize}", "iconOnlyWidth": "{dimension.size.500}", "paddingX": "{dimension.space.300}", "paddingY": "{dimension.space.200}" }, "lg": { - "fontSize": "{typography.fontSize.500}", + "fontSize": "{typography.heading.sm.fontSize}", "iconOnlyWidth": "{dimension.size.750}", "paddingX": "{dimension.space.600}", "paddingY": "{dimension.space.400}" }, "label": { - "fontWeight": "{typography.fontWeight.demibold}" + "fontWeight": "{typography.heading.lg.fontWeight}" } } }, @@ -1779,9 +1736,9 @@ "extend": { "borderColor": "{border.subtle}", "borderWidth": "{dimension.size.100}", - "fonts_fontFamily_heading": "{typography.fontFamily.heading}", - "fonts_fontSize_200": "{typography.fontSize.200}", - "fonts_fontWeight_regular": "{typography.fontWeight.regular}", + "fonts_fontFamily_heading": "{typography.heading.lg.fontFamily}", + "fonts_fontSize_200": "{typography.body.sm.fontSize}", + "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}", "overlay_popover_shadow": "{shadow.400}" }, "root": { @@ -1797,8 +1754,8 @@ "gap": "{dimension.space.100}" }, "title": { - "fontSize": "{typography.fontSize.400}", - "fontWeight": "{typography.fontWeight.demibold}" + "fontSize": "{typography.body.lg.fontSize}", + "fontWeight": "{typography.heading.lg.fontWeight}" }, "subtitle": { "color": "{text.muted}" @@ -1898,11 +1855,11 @@ "extend": { "focusRing_invalid": "{focusRing.invalid}", "focusRing_success": "{focusRing.success}", - "fonts_fontFamily_base": "{typography.fontFamily.base}", - "fonts_fontFamily_heading": "{typography.fontFamily.heading}", - "fonts_fontSize_200": "{typography.fontSize.200}", - "fonts_fontSize_300": "{typography.fontSize.300}", - "fonts_fontWeight_regular": "{typography.fontWeight.regular}", + "fonts_fontFamily_base": "{typography.body.lg.fontFamily}", + "fonts_fontFamily_heading": "{typography.heading.lg.fontFamily}", + "fonts_fontSize_200": "{typography.body.sm.fontSize}", + "fonts_fontSize_300": "{typography.body.md.fontSize}", + "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}", "text_brand": "{text.brand}", "text_color": "{text.default}", "text_disabled": "{text.disabled}", @@ -1916,10 +1873,10 @@ "borderColor": "{border.transparent}", "borderWidth": "{dimension.size.100}", "focusRing_success": "{focusRing.success}", - "fonts_fontFamily_base": "{typography.fontFamily.base}", - "fonts_fontSize_300": "{typography.fontSize.300}", - "fonts_fontWeight_regular": "{typography.fontWeight.regular}", - "fonts_lineHeight_400": "{typography.lineHeight.400}", + "fonts_fontFamily_base": "{typography.body.lg.fontFamily}", + "fonts_fontSize_300": "{typography.body.md.fontSize}", + "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}", + "fonts_lineHeight_400": "{typography.body.sm.lineHeight}", "opacity_500": "{opacity.500}" }, "root": { @@ -2099,7 +2056,7 @@ } }, "columnTitle": { - "fontWeight": "{typography.fontWeight.bold}" + "fontWeight": "{typography.heading.xl.fontWeight}" }, "row": { "background": "{background.surface.raised}", @@ -2137,7 +2094,7 @@ } }, "columnFooter": { - "fontWeight": "{typography.fontWeight.bold}" + "fontWeight": "{typography.heading.xl.fontWeight}" }, "dropPoint": { "color": "{background.selected}" @@ -2291,12 +2248,12 @@ "minWidth": "{dimension.size.1000}" }, "dimension_size_1000": "{dimension.size.1000}", - "fonts_fontFamily_base": "{typography.fontFamily.base}", - "fonts_fontFamily_heading": "{typography.fontFamily.heading}", - "fonts_fontSize_100": "{typography.fontSize.100}", - "fonts_fontSize_300": "{typography.fontSize.300}", - "fonts_fontWeight_demibold": "{typography.fontWeight.demibold}", - "fonts_fontWeight_regular": "{typography.fontWeight.regular}", + "fonts_fontFamily_base": "{typography.body.lg.fontFamily}", + "fonts_fontFamily_heading": "{typography.heading.lg.fontFamily}", + "fonts_fontSize_100": "{typography.label.sm.fontSize}", + "fonts_fontSize_300": "{typography.body.md.fontSize}", + "fonts_fontWeight_demibold": "{typography.heading.lg.fontWeight}", + "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}", "form_borderWidth": "{dimension.size.100}" }, "colorScheme": { @@ -2331,7 +2288,7 @@ }, "title": { "gap": "{dimension.space.200}", - "fontWeight": "{typography.fontWeight.bold}" + "fontWeight": "{typography.heading.xl.fontWeight}" }, "selectMonth": { "hoverBackground": "{background.surface.hover.section}", @@ -2379,7 +2336,7 @@ }, "weekDay": { "padding": "{dimension.space.100}", - "fontWeight": "{typography.fontWeight.bold}", + "fontWeight": "{typography.heading.xl.fontWeight}", "color": "{text.default}" }, "date": { @@ -2439,12 +2396,12 @@ "dimension_overlayWidth_lg": "{dimension.overlayWidth.lg}", "dimension_overlayWidth_sm": "{dimension.overlayWidth.sm}", "dimension_overlayWidth_xlg": "{dimension.overlayWidth.xlg}", - "fonts_fontFamily_base": "{typography.fontFamily.base}", - "fonts_fontFamily_heading": "{typography.fontFamily.heading}", - "fonts_fontSize_300": "{typography.fontSize.300}", - "fonts_fontWeight_regular": "{typography.fontWeight.regular}", - "fonts_lineHeight_500": "{typography.lineHeight.500}", - "fonts_lineHeight_550": "{typography.lineHeight.550}" + "fonts_fontFamily_base": "{typography.body.lg.fontFamily}", + "fonts_fontFamily_heading": "{typography.heading.lg.fontFamily}", + "fonts_fontSize_300": "{typography.body.md.fontSize}", + "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}", + "fonts_lineHeight_500": "{typography.body.md.lineHeight}", + "fonts_lineHeight_550": "{typography.body.lg.lineHeight}" }, "root": { "background": "{background.surface.raised}", @@ -2458,8 +2415,8 @@ "gap": "{dimension.space.200}" }, "title": { - "fontSize": "{typography.fontSize.500}", - "fontWeight": "{typography.fontWeight.demibold}" + "fontSize": "{typography.heading.sm.fontSize}", + "fontWeight": "{typography.heading.lg.fontWeight}" }, "content": { "padding": "{dimension.space.600}" @@ -2484,9 +2441,9 @@ "gap": "{dimension.space.200}" }, "iconSize": "{dimension.size.300}", - "fonts_fontFamily_heading": "{typography.fontFamily.heading}", - "fonts_fontSize_200": "{typography.fontSize.200}", - "fonts_fontWeight_demibold": "{typography.fontWeight.demibold}" + "fonts_fontFamily_heading": "{typography.heading.lg.fontFamily}", + "fonts_fontSize_200": "{typography.body.sm.fontSize}", + "fonts_fontWeight_demibold": "{typography.heading.lg.fontWeight}" }, "horizontal": { "margin": "{dimension.space.400} 0", @@ -2538,8 +2495,8 @@ "padding": "{dimension.space.600} {dimension.space.600} {dimension.space.500} {dimension.space.600} " }, "title": { - "fontSize": "{typography.fontSize.500}", - "fontWeight": "{typography.fontWeight.demibold}" + "fontSize": "{typography.heading.sm.fontSize}", + "fontWeight": "{typography.heading.lg.fontWeight}" }, "content": { "padding": "{dimension.space.600}" @@ -2625,10 +2582,10 @@ "transitionDuration": "{dimension.duration.200}", "positionX": "{dimension.space.300}", "positionY": "{dimension.space.300}", - "fontWeight": "{typography.fontWeight.regular}", + "fontWeight": "{typography.body.lg.fontWeight}", "active": { - "fontSize": "{typography.fontSize.100}", - "fontWeight": "{typography.fontWeight.regular}" + "fontSize": "{typography.label.sm.fontSize}", + "fontWeight": "{typography.body.lg.fontWeight}" } }, "over": { @@ -2799,7 +2756,7 @@ "height": "{dimension.size.600}", "iconSize": "{dimension.size.300}" }, - "fonts_fontFamily_base": "{typography.fontFamily.base}" + "fonts_fontFamily_base": "{typography.body.lg.fontFamily}" }, "colorScheme": { "light": { @@ -2850,13 +2807,13 @@ "iconSize": "{dimension.size.300}", "borderWidth": "{dimension.borderWidth.100}", "extXlg": { - "fontSize": "{typography.fontSize.300}", + "fontSize": "{typography.body.md.fontSize}", "paddingX": "{dimension.space.300}", "paddingY": "{dimension.space.600}" }, "focusRing_invalid": "{focusRing.invalid}", - "fonts_fontFamily_base": "{typography.fontFamily.base}", - "fonts_lineHeight_250": "{typography.lineHeight.250}" + "fonts_fontFamily_base": "{typography.body.lg.fontFamily}", + "fonts_lineHeight_250": "{typography.caption.lineHeight}" }, "root": { "background": "{background.surface.ground}", @@ -2878,12 +2835,12 @@ "borderRadius": "{dimension.radius.300}", "transitionDuration": "{dimension.duration.200}", "sm": { - "fontSize": "{typography.fontSize.300}", + "fontSize": "{typography.body.md.fontSize}", "paddingX": "{dimension.space.300}", "paddingY": "{dimension.space.200}" }, "lg": { - "fontSize": "{typography.fontSize.300}", + "fontSize": "{typography.body.md.fontSize}", "paddingX": "{dimension.space.300}", "paddingY": "{dimension.space.400}" }, @@ -2908,8 +2865,8 @@ }, "gap": "{dimension.space.200}" }, - "fonts_fontFamily_heading": "{typography.fontFamily.heading}", - "fonts_fontSize_200": "{typography.fontSize.200}" + "fonts_fontFamily_heading": "{typography.heading.lg.fontFamily}", + "fonts_fontSize_200": "{typography.body.sm.fontSize}" }, "colorScheme": { "light": { @@ -2950,7 +2907,7 @@ "optionGroup": { "background": "{background.surface.raised}", "color": "{text.muted}", - "fontWeight": "{typography.fontWeight.regular}", + "fontWeight": "{typography.body.lg.fontWeight}", "padding": "{dimension.space.200} {dimension.space.300}" }, "checkmark": { @@ -2970,10 +2927,10 @@ "gap": "{dimension.space.100}" } }, - "iconSize": "{typography.fontSize.500}", - "fonts_fontSize_200": "{typography.fontSize.200}", - "fonts_fontSize_300": "{typography.fontSize.300}", - "fonts_fontWeight_regular": "{typography.fontWeight.regular}" + "iconSize": "{typography.heading.sm.fontSize}", + "fonts_fontSize_200": "{typography.body.sm.fontSize}", + "fonts_fontSize_300": "{typography.body.md.fontSize}", + "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}" }, "colorScheme": { "light": { @@ -3030,13 +2987,13 @@ "gap": "{dimension.space.100}" }, "submenuLabel": { - "fontWeight": "{typography.fontWeight.regular}", + "fontWeight": "{typography.body.lg.fontWeight}", "padding": "{dimension.space.200} {dimension.space.300}", "background": "{background.transparent}", "color": "{text.muted}" }, "submenuIcon": { - "size": "{typography.fontSize.500}", + "size": "{typography.heading.sm.fontSize}", "color": "{icon.strongMuted}", "focusColor": "{icon.strongMuted}", "activeColor": "{icon.onBold}" @@ -3062,7 +3019,7 @@ "menu": { "extend": { "paddingX": "0.25rem", - "iconSize": "{typography.fontSize.500}", + "iconSize": "{typography.heading.sm.fontSize}", "paddingY": "0.25rem", "extItem": { "caption": { @@ -3071,12 +3028,12 @@ "activeBackground": "{background.selected}", "activeColor": "{text.onBold}" }, - "fonts_fontFamily_base": "{typography.fontFamily.base}", - "fonts_fontFamily_heading": "{typography.fontFamily.heading}", - "fonts_fontSize_200": "{typography.fontSize.200}", - "fonts_fontSize_300": "{typography.fontSize.300}", - "fonts_fontWeight_regular": "{typography.fontWeight.regular}", - "fonts_lineHeight_400": "{typography.lineHeight.400}" + "fonts_fontFamily_base": "{typography.body.lg.fontFamily}", + "fonts_fontFamily_heading": "{typography.heading.lg.fontFamily}", + "fonts_fontSize_200": "{typography.body.sm.fontSize}", + "fonts_fontSize_300": "{typography.body.md.fontSize}", + "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}", + "fonts_lineHeight_400": "{typography.body.sm.lineHeight}" }, "colorScheme": { "light": { @@ -3117,7 +3074,7 @@ }, "submenuLabel": { "padding": "{dimension.space.200} {dimension.space.300}", - "fontWeight": "{typography.fontWeight.regular}", + "fontWeight": "{typography.body.lg.fontWeight}", "background": "{background.transparent}", "color": "{text.muted}" }, @@ -3132,7 +3089,7 @@ }, "menubar": { "extend": { - "iconSize": "{typography.fontSize.500}", + "iconSize": "{typography.heading.sm.fontSize}", "extItem": { "caption": { "color": "{text.muted}", @@ -3141,14 +3098,14 @@ }, "extSubmenuLabel": { "padding": "{dimension.space.200} {dimension.space.300}", - "fontWeight": "{typography.fontWeight.demibold}", + "fontWeight": "{typography.heading.lg.fontWeight}", "background": "{background.transparent}", "color": "{text.muted}" }, - "fonts_fontFamily_base": "{typography.fontFamily.base}", - "fonts_fontSize_200": "{typography.fontSize.200}", - "fonts_fontSize_300": "{typography.fontSize.300}", - "fonts_fontWeight_regular": "{typography.fontWeight.regular}" + "fonts_fontFamily_base": "{typography.body.lg.fontFamily}", + "fonts_fontSize_200": "{typography.body.sm.fontSize}", + "fonts_fontSize_300": "{typography.body.md.fontSize}", + "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}" }, "colorScheme": { "light": { @@ -3193,7 +3150,7 @@ "shadow": "{shadow.400}", "mobileIndent": "{dimension.space.300}", "icon": { - "size": "{typography.fontSize.500}", + "size": "{typography.heading.sm.fontSize}", "color": "{icon.strongMuted}", "focusColor": "{icon.strongMuted}", "activeColor": "{icon.onBold}" @@ -3269,10 +3226,10 @@ "color": "{text.default}" } }, - "fonts_fontFamily_base": "{typography.fontFamily.base}", - "fonts_fontSize_200": "{typography.fontSize.200}", - "fonts_fontWeight_regular": "{typography.fontWeight.regular}", - "fonts_lineHeight_250": "{typography.lineHeight.250}" + "fonts_fontFamily_base": "{typography.body.lg.fontFamily}", + "fonts_fontSize_200": "{typography.body.sm.fontSize}", + "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}", + "fonts_lineHeight_250": "{typography.caption.lineHeight}" }, "colorScheme": { "light": { @@ -3434,13 +3391,13 @@ } }, "text": { - "fontSize": "{typography.fontSize.300}", - "fontWeight": "{typography.fontWeight.bold}", + "fontSize": "{typography.body.md.fontSize}", + "fontWeight": "{typography.heading.xl.fontWeight}", "sm": { - "fontSize": "{typography.fontSize.300}" + "fontSize": "{typography.body.md.fontSize}" }, "lg": { - "fontSize": "{typography.fontSize.300}" + "fontSize": "{typography.body.md.fontSize}" } }, "icon": { @@ -3477,11 +3434,11 @@ "extLabel": { "color": "{text.muted}" }, - "fonts_fontFamily_base": "{typography.fontFamily.base}", - "fonts_fontSize_200": "{typography.fontSize.200}", - "fonts_fontWeight_medium": "{typography.fontWeight.medium}", - "fonts_fontWeight_regular": "{typography.fontWeight.regular}", - "fonts_lineHeight_200": "{typography.lineHeight.200}", + "fonts_fontFamily_base": "{typography.body.lg.fontFamily}", + "fonts_fontSize_200": "{typography.body.sm.fontSize}", + "fonts_fontWeight_medium": "{typography.label.lg.fontWeight}", + "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}", + "fonts_lineHeight_200": "{typography.caption.lineHeight}", "text_color": "{text.default}" }, "root": { @@ -3566,12 +3523,12 @@ "borderRadius": "{dimension.radius.300}", "transitionDuration": "{dimension.duration.200}", "sm": { - "fontSize": "{typography.fontSize.300}", + "fontSize": "{typography.body.md.fontSize}", "paddingX": "{dimension.space.200}", "paddingY": "{dimension.space.200}" }, "lg": { - "fontSize": "{typography.fontSize.300}", + "fontSize": "{typography.body.md.fontSize}", "paddingX": "{dimension.space.400}", "paddingY": "{dimension.space.400}" }, @@ -3605,7 +3562,7 @@ "gap": "{dimension.space.200}" }, "optionGroup": { - "fontWeight": "{typography.fontWeight.demibold}", + "fontWeight": "{typography.heading.lg.fontWeight}", "padding": "{dimension.space.200} {dimension.space.300}" }, "emptyMessage": { @@ -3646,10 +3603,10 @@ "maxWidth": "{dimension.size.900}" }, "extend": { - "fonts_fontFamily_base": "{typography.fontFamily.base}", - "fonts_fontSize_300": "{typography.fontSize.300}", - "fonts_fontWeight_regular": "{typography.fontWeight.regular}", - "fonts_lineHeight_250": "{typography.lineHeight.250}" + "fonts_fontFamily_base": "{typography.body.lg.fontFamily}", + "fonts_fontSize_300": "{typography.body.md.fontSize}", + "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}", + "fonts_lineHeight_250": "{typography.caption.lineHeight}" } }, "panelmenu": { @@ -3657,7 +3614,7 @@ "extPanel": { "gap": "{dimension.space.100}" }, - "iconSize": "{typography.fontSize.500}", + "iconSize": "{typography.heading.sm.fontSize}", "extItem": { "activeBackground": "{background.selected}", "activeColor": "{text.onBold}", @@ -3666,9 +3623,9 @@ "gap": "{dimension.space.100}" } }, - "fonts_fontSize_200": "{typography.fontSize.200}", - "fonts_fontSize_300": "{typography.fontSize.300}", - "fonts_lineHeight_450": "{typography.lineHeight.450}" + "fonts_fontSize_200": "{typography.body.sm.fontSize}", + "fonts_fontSize_300": "{typography.body.md.fontSize}", + "fonts_lineHeight_450": "{typography.body.md.lineHeight}" }, "root": { "gap": "{dimension.space.100}", @@ -3718,15 +3675,15 @@ "borderWidth": "{dimension.borderWidth.100}", "floatlabel_root_color": "{background.neutral.bold}", "focusRing_invalid": "{focusRing.invalid}", - "fonts_fontFamily_base": "{typography.fontFamily.base}", - "fonts_fontSize_200": "{typography.fontSize.200}", - "fonts_fontWeight_regular": "{typography.fontWeight.regular}", - "fonts_lineHeight_250": "{typography.lineHeight.250}", + "fonts_fontFamily_base": "{typography.body.lg.fontFamily}", + "fonts_fontSize_200": "{typography.body.sm.fontSize}", + "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}", + "fonts_lineHeight_250": "{typography.caption.lineHeight}", "surface_400": "{text.hover.subtle}", "floatlabel_in_input_paddingBottom": "{dimension.space.300}", "floatlabel_in_input_paddingTop": "{dimension.space.700}", - "floatlabel_root_active_fontWeight": "{typography.fontWeight.regular}", - "floatlabel_root_fontWeight": "{typography.fontWeight.regular}" + "floatlabel_root_active_fontWeight": "{typography.body.lg.fontWeight}", + "floatlabel_root_fontWeight": "{typography.body.lg.fontWeight}" }, "colorScheme": { "light": { @@ -3792,8 +3749,8 @@ "progressbar": { "label": { "color": "{text.staticDark}", - "fontSize": "{typography.fontSize.100}", - "fontWeight": "{typography.fontWeight.regular}" + "fontSize": "{typography.label.sm.fontSize}", + "fontWeight": "{typography.body.lg.fontWeight}" }, "root": { "background": "{background.disabled}", @@ -3804,7 +3761,7 @@ "background": "{background.brand.bold}" }, "extend": { - "fonts_fontFamily_base": "{typography.fontFamily.base}" + "fonts_fontFamily_base": "{typography.body.lg.fontFamily}" } }, "progressspinner": { @@ -3946,12 +3903,12 @@ "iconSize": "{dimension.size.300}", "floatlabel_root_color": "{background.neutral.bold}", "focusRing_invalid": "{focusRing.invalid}", - "fonts_fontFamily_base": "{typography.fontFamily.base}", - "fonts_lineHeight_250": "{typography.lineHeight.250}", + "fonts_fontFamily_base": "{typography.body.lg.fontFamily}", + "fonts_lineHeight_250": "{typography.caption.lineHeight}", "floatlabel_in_input_paddingBottom": "{dimension.space.300}", "floatlabel_in_input_paddingTop": "{dimension.space.700}", - "floatlabel_root_active_fontWeight": "{typography.fontWeight.regular}", - "floatlabel_root_fontWeight": "{typography.fontWeight.regular}" + "floatlabel_root_active_fontWeight": "{typography.body.lg.fontWeight}", + "floatlabel_root_fontWeight": "{typography.body.lg.fontWeight}" }, "root": { "background": "{background.surface.ground}", @@ -3973,12 +3930,12 @@ "borderRadius": "{dimension.radius.300}", "transitionDuration": "{dimension.duration.200}", "sm": { - "fontSize": "{typography.fontSize.300}", + "fontSize": "{typography.body.md.fontSize}", "paddingX": "{dimension.space.300}", "paddingY": "{dimension.space.200}" }, "lg": { - "fontSize": "{typography.fontSize.300}", + "fontSize": "{typography.body.md.fontSize}", "paddingX": "{dimension.space.300}", "paddingY": "{dimension.space.400}" }, @@ -4022,7 +3979,7 @@ "optionGroup": { "background": "{background.surface.raised}", "color": "{text.muted}", - "fontWeight": "{typography.fontWeight.regular}", + "fontWeight": "{typography.body.lg.fontWeight}", "padding": "{dimension.space.200} {dimension.space.300}" }, "clearIcon": { @@ -4054,15 +4011,15 @@ "ext": { "borderRadius": "{dimension.radius.200}" }, - "fonts_fontFamily_heading": "{typography.fontFamily.heading}", - "fonts_fontSize_600": "{typography.fontSize.600}", - "fonts_fontWeight_demibold": "{typography.fontWeight.demibold}", - "fonts_lineHeight_250": "{typography.lineHeight.250}", - "fonts_lineHeight_300": "{typography.lineHeight.300}", - "fonts_lineHeight_400": "{typography.lineHeight.400}", - "fonts_lineHeight_500": "{typography.lineHeight.500}", - "fonts_lineHeight_550": "{typography.lineHeight.550}", - "fonts_lineHeight_700": "{typography.lineHeight.700}", + "fonts_fontFamily_heading": "{typography.heading.lg.fontFamily}", + "fonts_fontSize_600": "{typography.heading.md.fontSize}", + "fonts_fontWeight_demibold": "{typography.heading.lg.fontWeight}", + "fonts_lineHeight_250": "{typography.caption.lineHeight}", + "fonts_lineHeight_300": "{typography.label.sm.lineHeight}", + "fonts_lineHeight_400": "{typography.body.sm.lineHeight}", + "fonts_lineHeight_500": "{typography.body.md.lineHeight}", + "fonts_lineHeight_550": "{typography.body.lg.lineHeight}", + "fonts_lineHeight_700": "{typography.heading.md.lineHeight}", "controls_iconOnly_600": "{dimension.space.800}", "controls_iconOnly_700": "{dimension.space.900}", "controls_iconOnly_850": "{dimension.size.750}", @@ -4185,13 +4142,13 @@ "iconSize": "{dimension.size.400}" }, "background_transparent": "{background.transparent}", - "fonts_fontFamily_base": "{typography.fontFamily.base}", - "fonts_fontSize_200": "{typography.fontSize.200}", - "fonts_fontSize_300": "{typography.fontSize.300}", - "fonts_fontWeight_medium": "{typography.fontWeight.medium}", - "fonts_fontWeight_regular": "{typography.fontWeight.regular}", - "fonts_lineHeight_150": "{typography.lineHeight.150}", - "fonts_lineHeight_200": "{typography.lineHeight.200}", + "fonts_fontFamily_base": "{typography.body.lg.fontFamily}", + "fonts_fontSize_200": "{typography.body.sm.fontSize}", + "fonts_fontSize_300": "{typography.body.md.fontSize}", + "fonts_fontWeight_medium": "{typography.label.lg.fontWeight}", + "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}", + "fonts_lineHeight_150": "{typography.caption.lineHeight}", + "fonts_lineHeight_200": "{typography.caption.lineHeight}", "text_mutedColor": "{text.muted}" }, "root": { @@ -4222,7 +4179,7 @@ "stepTitle": { "color": "{text.default}", "activeColor": "{text.default}", - "fontWeight": "{typography.fontWeight.regular}" + "fontWeight": "{typography.body.lg.fontWeight}" }, "stepNumber": { "background": "{background.surface.raised}", @@ -4232,8 +4189,8 @@ "color": "{text.default}", "activeColor": "{text.staticDark}", "size": "{dimension.size.400}", - "fontSize": "{typography.fontSize.300}", - "fontWeight": "{typography.fontWeight.bold}", + "fontSize": "{typography.body.md.fontSize}", + "fontWeight": "{typography.heading.xl.fontWeight}", "borderRadius": "{dimension.radius.max}", "shadow": "none" }, @@ -4252,13 +4209,13 @@ "gap": "{dimension.space.200}" }, "itemLabel": { - "fontWeight": "{typography.fontWeight.regular}" + "fontWeight": "{typography.body.lg.fontWeight}" }, "itemNumber": { "background": "{background.surface.raised}", "size": "{dimension.size.500}", - "fontSize": "{typography.fontSize.300}", - "fontWeight": "{typography.fontWeight.bold}", + "fontSize": "{typography.body.md.fontSize}", + "fontWeight": "{typography.heading.xl.fontWeight}", "borderRadius": "{dimension.radius.max}", "shadow": "none" } @@ -4293,7 +4250,7 @@ "hoverColor": "{text.default}", "activeColor": "{text.default}", "padding": "{dimension.space.400}", - "fontWeight": "{typography.fontWeight.demibold}", + "fontWeight": "{typography.heading.lg.fontWeight}", "margin": "0", "gap": "{dimension.space.200}", "focusRing": { @@ -4335,9 +4292,9 @@ "background": "{text.default}" }, "extend": { - "fonts_fontFamily_heading": "{typography.fontFamily.heading}", - "fonts_fontSize_300": "{typography.fontSize.300}", - "fonts_fontWeight_demibold": "{typography.fontWeight.demibold}" + "fonts_fontFamily_heading": "{typography.heading.lg.fontFamily}", + "fonts_fontSize_300": "{typography.body.md.fontSize}", + "fonts_fontWeight_demibold": "{typography.heading.lg.fontWeight}" } }, "toast": { @@ -4388,8 +4345,8 @@ "color": "{text.default}" } }, - "fonts_fontFamily_base": "{typography.fontFamily.base}", - "fonts_lineHeight_250": "{typography.lineHeight.250}" + "fonts_fontFamily_base": "{typography.body.lg.fontFamily}", + "fonts_lineHeight_250": "{typography.caption.lineHeight}" }, "colorScheme": { "light": { @@ -4474,12 +4431,12 @@ "gap": "{dimension.space.100}" }, "summary": { - "fontWeight": "{typography.fontWeight.bold}", - "fontSize": "{typography.fontSize.300}" + "fontWeight": "{typography.heading.xl.fontWeight}", + "fontSize": "{typography.body.md.fontSize}" }, "detail": { - "fontWeight": "{typography.fontWeight.regular}", - "fontSize": "{typography.fontSize.200}" + "fontWeight": "{typography.body.lg.fontWeight}", + "fontSize": "{typography.body.sm.fontSize}" }, "closeButton": { "width": "{dimension.size.500}", @@ -4525,8 +4482,8 @@ } }, "root": { - "fontSize": "{typography.fontSize.100}", - "fontWeight": "{typography.fontWeight.regular}", + "fontSize": "{typography.label.sm.fontSize}", + "fontWeight": "{typography.body.lg.fontWeight}", "padding": "{dimension.space.100} {dimension.space.200}", "gap": "{dimension.space.100}", "borderRadius": "{dimension.size.200}", @@ -4536,8 +4493,8 @@ "size": "{dimension.size.300}" }, "extend": { - "fonts_fontFamily_base": "{typography.fontFamily.base}", - "fonts_lineHeight_250": "{typography.lineHeight.250}" + "fonts_fontFamily_base": "{typography.body.lg.fontFamily}", + "fonts_lineHeight_250": "{typography.caption.lineHeight}" } }, "textarea": { @@ -4547,13 +4504,13 @@ "iconSize": "{dimension.size.300}", "minHeight": "{dimension.size.900}", "extXlg": { - "fontSize": "{typography.fontSize.300}", + "fontSize": "{typography.body.md.fontSize}", "paddingX": "{dimension.space.300}", "paddingY": "{dimension.space.500}" }, "focusRing_invalid": "{focusRing.invalid}", - "fonts_fontFamily_base": "{typography.fontFamily.base}", - "fonts_lineHeight_250": "{typography.lineHeight.250}", + "fonts_fontFamily_base": "{typography.body.lg.fontFamily}", + "fonts_lineHeight_250": "{typography.caption.lineHeight}", "form_padding_500": "{dimension.space.500}", "form_padding_700": "{dimension.space.700}" }, @@ -4584,12 +4541,12 @@ "shadow": "0" }, "sm": { - "fontSize": "{typography.fontSize.300}", + "fontSize": "{typography.body.md.fontSize}", "paddingX": "{dimension.space.300}", "paddingY": "{dimension.space.200}" }, "lg": { - "fontSize": "{typography.fontSize.300}", + "fontSize": "{typography.body.md.fontSize}", "paddingX": "{dimension.space.300}", "paddingY": "{dimension.space.400}" } @@ -4601,15 +4558,15 @@ "borderColor": "{border.subtle}", "background": "{background.surface.raised}" }, - "iconSize": "{typography.fontSize.500}", + "iconSize": "{typography.heading.sm.fontSize}", "extItem": { "caption": { "gap": "{dimension.space.100}", "color": "{text.muted}" } }, - "fonts_fontSize_200": "{typography.fontSize.200}", - "fonts_fontSize_300": "{typography.fontSize.300}" + "fonts_fontSize_200": "{typography.body.sm.fontSize}", + "fonts_fontSize_300": "{typography.body.md.fontSize}" }, "root": { "background": "{background.surface.raised}", @@ -4650,9 +4607,9 @@ "extEvent": { "gap": "{dimension.space.100}" }, - "fonts_fontFamily_base": "{typography.fontFamily.base}", - "fonts_fontSize_300": "{typography.fontSize.300}", - "fonts_lineHeight_500": "{typography.lineHeight.500}", + "fonts_fontFamily_base": "{typography.body.lg.fontFamily}", + "fonts_fontSize_300": "{typography.body.md.fontSize}", + "fonts_lineHeight_500": "{typography.body.md.lineHeight}", "text_color": "{text.default}" }, "event": { @@ -4725,13 +4682,13 @@ "extLg": { "iconOnlyWidth": "3.5714rem" }, - "fonts_fontFamily_heading": "{typography.fontFamily.heading}", - "fonts_fontSize_500": "{typography.fontSize.500}", - "fonts_fontWeight_demibold": "{typography.fontWeight.demibold}", - "fonts_lineHeight_250": "{typography.lineHeight.250}", - "fonts_lineHeight_300": "{typography.lineHeight.300}", - "fonts_lineHeight_500": "{typography.lineHeight.500}", - "fonts_lineHeight_550": "{typography.lineHeight.550}" + "fonts_fontFamily_heading": "{typography.heading.lg.fontFamily}", + "fonts_fontSize_500": "{typography.heading.sm.fontSize}", + "fonts_fontWeight_demibold": "{typography.heading.lg.fontWeight}", + "fonts_lineHeight_250": "{typography.caption.lineHeight}", + "fonts_lineHeight_300": "{typography.label.sm.lineHeight}", + "fonts_lineHeight_500": "{typography.body.md.lineHeight}", + "fonts_lineHeight_550": "{typography.body.lg.lineHeight}" }, "colorScheme": { "light": { @@ -4764,7 +4721,7 @@ "padding": "{dimension.space.200} {dimension.space.400}", "borderRadius": "{dimension.radius.max}", "gap": "{dimension.space.200}", - "fontWeight": "{typography.fontWeight.demibold}", + "fontWeight": "{typography.heading.lg.fontWeight}", "focusRing": { "width": "{dimension.borderWidth.300}", "style": "{dimension.focusRing.style}", @@ -4773,11 +4730,11 @@ "shadow": "{shadow.200}" }, "sm": { - "fontSize": "{typography.fontSize.200}", + "fontSize": "{typography.body.sm.fontSize}", "padding": "{dimension.space.100} {dimension.space.300}" }, "lg": { - "fontSize": "{typography.fontSize.500}", + "fontSize": "{typography.heading.sm.fontSize}", "padding": "{dimension.space.400} {dimension.space.600}" }, "transitionDuration": "{dimension.duration.200}" @@ -4866,10 +4823,10 @@ "borderRadius": "{dimension.radius.200}" }, "extend": { - "fonts_fontFamily_base": "{typography.fontFamily.base}", - "fonts_fontSize_200": "{typography.fontSize.200}", - "fonts_fontWeight_regular": "{typography.fontWeight.regular}", - "fonts_lineHeight_300": "{typography.lineHeight.300}" + "fonts_fontFamily_base": "{typography.body.lg.fontFamily}", + "fonts_fontSize_200": "{typography.body.sm.fontSize}", + "fonts_fontWeight_regular": "{typography.body.lg.fontWeight}", + "fonts_lineHeight_300": "{typography.label.sm.lineHeight}" } }, "tree": { From f60ad95fc02799da5f4ea33ed5005c8b4fadfbcb Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 22 Jun 2026 21:17:55 +0800 Subject: [PATCH 15/46] =?UTF-8?q?=D0=BE=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB?= =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B1=D0=B0=D0=B7=D1=8B=20=D1=82?= =?UTF-8?q?=D0=BE=D0=BA=D0=B5=D0=BD=D0=BE=D0=B2=20=D0=B4=D0=BB=D1=8F=20?= =?UTF-8?q?=D1=81=D0=B5=D0=BC=D0=B0=D0=BD=D1=82=D0=B8=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../plans/2026-04-16-inputnumber.md | 808 --- docs/superpowers/specs/prebuild-tokens.json | 4720 ----------------- .../providers/prime-preset/tokens/tokens.json | 70 +- 3 files changed, 36 insertions(+), 5562 deletions(-) delete mode 100644 docs/superpowers/plans/2026-04-16-inputnumber.md delete mode 100644 docs/superpowers/specs/prebuild-tokens.json diff --git a/docs/superpowers/plans/2026-04-16-inputnumber.md b/docs/superpowers/plans/2026-04-16-inputnumber.md deleted file mode 100644 index ab3591e0..00000000 --- a/docs/superpowers/plans/2026-04-16-inputnumber.md +++ /dev/null @@ -1,808 +0,0 @@ -# InputNumber Component — Implementation Plan - -> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. - -**Goal:** Создать Angular wrapper-компонент InputNumber с CSS-переопределениями и Storybook-сториями. - -**Architecture:** Standalone CVA-компонент `InputNumberComponent`, оборачивающий PrimeNG `p-inputnumber`. CSS-оверрайды в `src/prime-preset/tokens/components/inputnumber.ts`, подключаются через `map-tokens.ts`. Четыре стории: Default (динамический template из args), FloatLabel (нативный `p-inputnumber` внутри `p-floatlabel`), Currency, MinMax. - -**Tech Stack:** Angular 20, PrimeNG 20, Storybook 8, Tailwind, `dt()` токены, Tabler Icons. - ---- - -## File Map - -| Действие | Путь | -|---|---| -| Создать | `src/lib/components/inputnumber/inputnumber.component.ts` | -| Создать | `src/prime-preset/tokens/components/inputnumber.ts` | -| Изменить | `src/prime-preset/map-tokens.ts` | -| Создать | `src/stories/components/inputnumber/inputnumber.stories.ts` | -| Создать | `src/stories/components/inputnumber/examples/inputnumber-float-label.component.ts` | -| Создать | `src/stories/components/inputnumber/examples/inputnumber-currency.component.ts` | -| Создать | `src/stories/components/inputnumber/examples/inputnumber-minmax.component.ts` | - ---- - -### Task 1: CSS-переопределения InputNumber - -**Files:** -- Create: `src/prime-preset/tokens/components/inputnumber.ts` -- Modify: `src/prime-preset/map-tokens.ts` - -- [ ] **Step 1: Создать файл CSS-токенов** - -Создать `src/prime-preset/tokens/components/inputnumber.ts`: - -```typescript -export const inputnumberCss = ({ dt }: { dt: (token: string) => string }): string => ` - -/* ─── Кнопки +/− ─── */ -.p-inputnumber-button { - border-width: ${dt('inputnumber.extend.borderWidth')}; -} - -.p-inputnumber-horizontal .p-inputnumber-button { - min-height: ${dt('inputnumber.extend.extButton.height')}; -} - -/* ─── Disabled состояние кнопок ─── */ -.p-inputnumber-horizontal:has(.p-inputnumber-input:disabled) .p-inputnumber-button { - background: ${dt('inputtext.root.disabledBackground')}; - color: ${dt('inputtext.root.disabledColor')}; -} - -/* ─── Extra Large ─── */ -.p-inputnumber.p-inputnumber-xlg .p-inputnumber-input { - font-size: ${dt('inputtext.extend.extXlg.fontSize')}; - padding: ${dt('inputtext.extend.extXlg.paddingY')} ${dt('inputtext.extend.extXlg.paddingX')}; -} -`; -``` - -- [ ] **Step 2: Зарегистрировать CSS в map-tokens.ts** - -Открыть `src/prime-preset/map-tokens.ts`. Добавить импорт после строки с `inputtextCss`: - -```typescript -import { inputnumberCss } from './tokens/components/inputnumber'; -``` - -Добавить запись в объект `components` после блока `inputtext`: - -```typescript -inputnumber: { - ...(tokens.components.inputnumber as unknown as ComponentsDesignTokens['inputnumber']), - css: inputnumberCss, -}, -``` - -- [ ] **Step 3: Проверить компиляцию** - -```bash -cd /Users/d.khaliulin/Downloads/angular-ui-kit-feature-styles-debug -npx tsc --noEmit -``` - -Ожидается: нет ошибок. - -- [ ] **Step 4: Коммит** - -```bash -git add src/prime-preset/tokens/components/inputnumber.ts src/prime-preset/map-tokens.ts -git commit -m "feat(inputnumber): добавить CSS-переопределения токенов" -``` - ---- - -### Task 2: InputNumberComponent - -**Files:** -- Create: `src/lib/components/inputnumber/inputnumber.component.ts` - -- [ ] **Step 1: Создать компонент** - -Создать `src/lib/components/inputnumber/inputnumber.component.ts`: - -```typescript -import { Component, Input, forwardRef } from '@angular/core'; -import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms'; -import { NgClass } from '@angular/common'; -import { InputNumber } from 'primeng/inputnumber'; - -export type InputNumberSize = 'small' | 'base' | 'large' | 'xlarge'; -export type InputNumberButtonLayout = 'horizontal' | 'vertical' | 'stacked'; -export type InputNumberMode = 'decimal' | 'currency'; - -@Component({ - selector: 'input-number', - standalone: true, - imports: [InputNumber, NgClass, FormsModule], - providers: [ - { - provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => InputNumberComponent), - multi: true, - }, - ], - template: ` - - `, -}) -export class InputNumberComponent implements ControlValueAccessor { - @Input() size: InputNumberSize = 'base'; - @Input() placeholder = ''; - @Input() disabled = false; - @Input() readonly = false; - @Input() invalid = false; - @Input() showButtons = true; - @Input() buttonLayout: InputNumberButtonLayout = 'horizontal'; - @Input() mode: InputNumberMode = 'decimal'; - @Input() currency = 'RUB'; - @Input() locale = 'ru-RU'; - @Input() prefix: string | undefined = undefined; - @Input() suffix: string | undefined = undefined; - @Input() min: number | undefined = undefined; - @Input() max: number | undefined = undefined; - @Input() step = 1; - @Input() minFractionDigits = 0; - @Input() maxFractionDigits = 20; - @Input() fluid = false; - - modelValue: number | null = null; - - private _onChange: (value: number | null) => void = () => {}; - onTouched: () => void = () => {}; - - get primeSize(): 'small' | 'large' | undefined { - if (this.size === 'small') return 'small'; - if (this.size === 'large' || this.size === 'xlarge') return 'large'; - return undefined; - } - - get sizeClass(): Record { - return { 'p-inputnumber-xlg': this.size === 'xlarge' }; - } - - onInputChange(event: { value: number | null | undefined }): void { - const value = event.value ?? null; - this.modelValue = value; - this._onChange(value); - } - - writeValue(value: number | null): void { - this.modelValue = value ?? null; - } - - registerOnChange(fn: (value: number | null) => void): void { - this._onChange = fn; - } - - registerOnTouched(fn: () => void): void { - this.onTouched = fn; - } - - setDisabledState(isDisabled: boolean): void { - this.disabled = isDisabled; - } -} -``` - -- [ ] **Step 2: Проверить компиляцию** - -```bash -npx tsc --noEmit -``` - -Ожидается: нет ошибок. - -- [ ] **Step 3: Коммит** - -```bash -git add src/lib/components/inputnumber/inputnumber.component.ts -git commit -m "feat(inputnumber): добавить компонент InputNumberComponent" -``` - ---- - -### Task 3: FloatLabel story - -**Files:** -- Create: `src/stories/components/inputnumber/examples/inputnumber-float-label.component.ts` - -- [ ] **Step 1: Создать файл** - -Создать `src/stories/components/inputnumber/examples/inputnumber-float-label.component.ts`: - -```typescript -import { Component } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { StoryObj } from '@storybook/angular'; -import { InputNumber } from 'primeng/inputnumber'; -import { FloatLabel } from 'primeng/floatlabel'; - -const template = ` -
- - - - -
-`; -const styles = ''; - -@Component({ - selector: 'app-inputnumber-float-label', - standalone: true, - imports: [InputNumber, FloatLabel, FormsModule], - template, - styles, -}) -export class InputNumberFloatLabelComponent { - value: number | null = null; -} - -export const FloatLabelStory: StoryObj = { - name: 'FloatLabel', - render: () => ({ - template: ``, - }), - parameters: { - controls: { disable: true }, - docs: { - description: { - story: - 'Интеграция с `p-floatlabel` — плавающая метка внутри поля. Требует нативный `p-inputnumber` как прямой дочерний элемент `p-floatlabel`.', - }, - source: { - language: 'ts', - code: ` -import { Component } from '@angular/core'; -import { InputNumber } from 'primeng/inputnumber'; -import { FloatLabel } from 'primeng/floatlabel'; -import { FormsModule } from '@angular/forms'; - -@Component({ - selector: 'app-inputnumber-float-label', - standalone: true, - imports: [InputNumber, FloatLabel, FormsModule], - template: \` - - - - - \`, -}) -export class InputNumberFloatLabelComponent { - value: number | null = null; -} - `, - }, - }, - }, -}; -``` - -- [ ] **Step 2: Проверить компиляцию** - -```bash -npx tsc --noEmit -``` - -Ожидается: нет ошибок. - ---- - -### Task 4: Currency story - -**Files:** -- Create: `src/stories/components/inputnumber/examples/inputnumber-currency.component.ts` - -- [ ] **Step 1: Создать файл** - -Создать `src/stories/components/inputnumber/examples/inputnumber-currency.component.ts`: - -```typescript -import { StoryObj } from '@storybook/angular'; -import { InputNumberComponent } from '../../../../lib/components/inputnumber/inputnumber.component'; - -type Story = StoryObj; - -export const Currency: Story = { - name: 'Currency', - render: (args) => ({ - props: { ...args, value: null }, - template: ` - - `, - }), - args: { - mode: 'currency', - currency: 'RUB', - locale: 'ru-RU', - minFractionDigits: 2, - maxFractionDigits: 2, - }, - parameters: { - docs: { - description: { - story: 'Режим валюты — форматирует значение с символом валюты по заданной локали.', - }, - source: { - language: 'ts', - code: ` -import { InputNumberComponent } from '@cdek-it/angular-ui-kit'; -import { FormsModule } from '@angular/forms'; - -// template: -// - `, - }, - }, - }, -}; -``` - ---- - -### Task 5: MinMax story - -**Files:** -- Create: `src/stories/components/inputnumber/examples/inputnumber-minmax.component.ts` - -- [ ] **Step 1: Создать файл** - -Создать `src/stories/components/inputnumber/examples/inputnumber-minmax.component.ts`: - -```typescript -import { StoryObj } from '@storybook/angular'; -import { InputNumberComponent } from '../../../../lib/components/inputnumber/inputnumber.component'; - -type Story = StoryObj; - -export const MinMax: Story = { - name: 'Min / Max / Step', - render: (args) => ({ - props: { ...args, value: null }, - template: ` - - `, - }), - args: { - min: 0, - max: 100, - step: 1, - placeholder: '0–100', - }, - parameters: { - docs: { - description: { - story: 'Ограничения min/max и шаг изменения через кнопки и клавиатуру.', - }, - source: { - language: 'ts', - code: ` -import { InputNumberComponent } from '@cdek-it/angular-ui-kit'; -import { FormsModule } from '@angular/forms'; - -// template: -// - `, - }, - }, - }, -}; -``` - ---- - -### Task 6: Main stories file - -**Files:** -- Create: `src/stories/components/inputnumber/inputnumber.stories.ts` - -- [ ] **Step 1: Создать файл** - -Создать `src/stories/components/inputnumber/inputnumber.stories.ts`: - -```typescript -import { Meta, StoryObj, moduleMetadata } from '@storybook/angular'; -import { FormsModule } from '@angular/forms'; -import { InputNumberComponent } from '../../../lib/components/inputnumber/inputnumber.component'; -import { InputNumberFloatLabelComponent, FloatLabelStory } from './examples/inputnumber-float-label.component'; -import { Currency } from './examples/inputnumber-currency.component'; -import { MinMax } from './examples/inputnumber-minmax.component'; - -type InputNumberArgs = InputNumberComponent; - -const meta: Meta = { - title: 'Components/Form/InputNumber', - component: InputNumberComponent, - tags: ['autodocs'], - decorators: [ - moduleMetadata({ - imports: [ - InputNumberComponent, - FormsModule, - InputNumberFloatLabelComponent, - ], - }), - ], - parameters: { - designTokens: { prefix: '--p-inputnumber' }, - docs: { - description: { - component: `Числовое поле ввода с поддержкой форматирования и кнопок +/−. - -\`\`\`typescript -import { InputNumberComponent } from '@cdek-it/angular-ui-kit'; -\`\`\``, - }, - }, - }, - argTypes: { - // ── Props ──────────────────────────────────────────────── - size: { - control: 'select', - options: ['small', 'base', 'large', 'xlarge'], - description: 'Размер поля', - table: { - category: 'Props', - defaultValue: { summary: "'base'" }, - type: { summary: "'small' | 'base' | 'large' | 'xlarge'" }, - }, - }, - placeholder: { - control: 'text', - description: 'Подсказка при пустом поле', - table: { - category: 'Props', - defaultValue: { summary: "''" }, - type: { summary: 'string' }, - }, - }, - disabled: { - control: 'boolean', - description: 'Отключает взаимодействие', - table: { - category: 'Props', - defaultValue: { summary: 'false' }, - type: { summary: 'boolean' }, - }, - }, - readonly: { - control: 'boolean', - description: 'Только для чтения', - table: { - category: 'Props', - defaultValue: { summary: 'false' }, - type: { summary: 'boolean' }, - }, - }, - invalid: { - control: 'boolean', - description: 'Невалидное состояние', - table: { - category: 'Props', - defaultValue: { summary: 'false' }, - type: { summary: 'boolean' }, - }, - }, - showButtons: { - control: 'boolean', - description: 'Показывать кнопки +/−', - table: { - category: 'Props', - defaultValue: { summary: 'true' }, - type: { summary: 'boolean' }, - }, - }, - buttonLayout: { - control: 'select', - options: ['horizontal', 'vertical', 'stacked'], - description: 'Расположение кнопок', - table: { - category: 'Props', - defaultValue: { summary: "'horizontal'" }, - type: { summary: "'horizontal' | 'vertical' | 'stacked'" }, - }, - }, - mode: { - control: 'select', - options: ['decimal', 'currency'], - description: 'Режим отображения значения', - table: { - category: 'Props', - defaultValue: { summary: "'decimal'" }, - type: { summary: "'decimal' | 'currency'" }, - }, - }, - currency: { - control: 'text', - description: 'Код валюты ISO 4217, используется при mode="currency"', - table: { - category: 'Props', - defaultValue: { summary: "'RUB'" }, - type: { summary: 'string' }, - }, - }, - locale: { - control: 'text', - description: 'Локаль для форматирования числа', - table: { - category: 'Props', - defaultValue: { summary: "'ru-RU'" }, - type: { summary: 'string' }, - }, - }, - prefix: { - control: 'text', - description: 'Префикс перед значением', - table: { - category: 'Props', - type: { summary: 'string' }, - }, - }, - suffix: { - control: 'text', - description: 'Суффикс после значения (например, "%")', - table: { - category: 'Props', - type: { summary: 'string' }, - }, - }, - min: { - control: 'number', - description: 'Минимально допустимое значение', - table: { - category: 'Props', - type: { summary: 'number' }, - }, - }, - max: { - control: 'number', - description: 'Максимально допустимое значение', - table: { - category: 'Props', - type: { summary: 'number' }, - }, - }, - step: { - control: 'number', - description: 'Шаг изменения значения', - table: { - category: 'Props', - defaultValue: { summary: '1' }, - type: { summary: 'number' }, - }, - }, - minFractionDigits: { - control: { type: 'number', min: 0, max: 20 }, - description: 'Минимальное количество знаков после запятой', - table: { - category: 'Props', - defaultValue: { summary: '0' }, - type: { summary: 'number' }, - }, - }, - maxFractionDigits: { - control: { type: 'number', min: 0, max: 20 }, - description: 'Максимальное количество знаков после запятой', - table: { - category: 'Props', - defaultValue: { summary: '20' }, - type: { summary: 'number' }, - }, - }, - fluid: { - control: 'boolean', - description: 'Растягивает поле на всю ширину контейнера', - table: { - category: 'Props', - defaultValue: { summary: 'false' }, - type: { summary: 'boolean' }, - }, - }, - // Hidden computed props - modelValue: { table: { disable: true } }, - primeSize: { table: { disable: true } }, - sizeClass: { table: { disable: true } }, - }, - args: { - size: 'base', - placeholder: '0', - disabled: false, - readonly: false, - invalid: false, - showButtons: true, - buttonLayout: 'horizontal', - mode: 'decimal', - currency: 'RUB', - locale: 'ru-RU', - step: 1, - minFractionDigits: 0, - maxFractionDigits: 20, - fluid: false, - }, -}; - -export default meta; -type Story = StoryObj; - -// ── Default ────────────────────────────────────────────────────────────────── -export const Default: Story = { - name: 'Default', - render: (args) => { - const parts: string[] = []; - - if (args.size && args.size !== 'base') parts.push(`size="${args.size}"`); - if (args.placeholder) parts.push(`placeholder="${args.placeholder}"`); - if (args.disabled) parts.push(`[disabled]="true"`); - if (args.readonly) parts.push(`[readonly]="true"`); - if (args.invalid) parts.push(`[invalid]="true"`); - if (!args.showButtons) parts.push(`[showButtons]="false"`); - if (args.buttonLayout && args.buttonLayout !== 'horizontal') parts.push(`buttonLayout="${args.buttonLayout}"`); - if (args.mode && args.mode !== 'decimal') parts.push(`mode="${args.mode}"`); - if (args.mode === 'currency' && args.currency) parts.push(`currency="${args.currency}"`); - if (args.locale && args.locale !== 'ru-RU') parts.push(`locale="${args.locale}"`); - if (args.prefix) parts.push(`prefix="${args.prefix}"`); - if (args.suffix) parts.push(`suffix="${args.suffix}"`); - if (args.min !== undefined) parts.push(`[min]="${args.min}"`); - if (args.max !== undefined) parts.push(`[max]="${args.max}"`); - if (args.step && args.step !== 1) parts.push(`[step]="${args.step}"`); - if (args.minFractionDigits) parts.push(`[minFractionDigits]="${args.minFractionDigits}"`); - if (args.maxFractionDigits && args.maxFractionDigits !== 20) parts.push(`[maxFractionDigits]="${args.maxFractionDigits}"`); - if (args.fluid) parts.push(`[fluid]="true"`); - parts.push(`[(ngModel)]="value"`); - - const template = ``; - - return { props: { ...args, value: null }, template }; - }, - parameters: { - docs: { - description: { - story: 'Базовый пример компонента. Используйте Controls для интерактивного изменения пропсов.', - }, - }, - }, -}; - -// ── Re-exports from example components ──────────────────────────────────── -export { FloatLabelStory as FloatLabel, Currency, MinMax }; -``` - -- [ ] **Step 2: Проверить компиляцию** - -```bash -npx tsc --noEmit -``` - -Ожидается: нет ошибок. - -- [ ] **Step 3: Коммит** - -```bash -git add src/stories/components/inputnumber/ -git commit -m "feat(inputnumber): добавить Storybook-стории" -``` - ---- - -### Task 7: Финальная проверка - -- [ ] **Step 1: Полная проверка TypeScript** - -```bash -npx tsc --noEmit -``` - -Ожидается: нет ошибок. - -- [ ] **Step 2: Запустить Storybook и проверить визуально** - -```bash -npm run storybook -``` - -Открыть `http://localhost:6006` и проверить: -- `Components/Form/InputNumber` → Default: Controls меняют пропсы, code-snippet обновляется -- FloatLabel: метка анимируется при фокусе/вводе -- Currency: значение форматируется с символом ₽ -- Min/Max: кнопки не выходят за диапазон 0–100 - -- [ ] **Step 3: Финальный коммит** - -```bash -git add -A -git commit -m "feat(inputnumber): компонент InputNumber готов" -``` - ---- - -## Self-Review - -**Spec coverage:** -- ✅ Компонент с CVA — Task 2 -- ✅ Все 18 пропсов — Task 2 (InputNumberComponent) -- ✅ Size mapping (primeSize + p-inputnumber-xlg) — Task 2 -- ✅ Tabler Icons через `incrementButtonIcon` / `decrementButtonIcon` — Task 2 -- ✅ CSS overrides (border, height, disabled, xlarge) — Task 1 -- ✅ map-tokens регистрация — Task 1 -- ✅ Default story с динамическим template — Task 6 -- ✅ FloatLabel story (нативный p-inputnumber) — Task 3 -- ✅ Currency story — Task 4 -- ✅ MinMax story — Task 5 -- ✅ modelValue / primeSize / sizeClass скрыты в argTypes — Task 6 - -**Placeholder scan:** нет TBD/TODO. - -**Type consistency:** `InputNumberSize`, `InputNumberButtonLayout`, `InputNumberMode` определены в Task 2 и используются в `argTypes` Task 6 через строковые литералы — согласованы. diff --git a/docs/superpowers/specs/prebuild-tokens.json b/docs/superpowers/specs/prebuild-tokens.json deleted file mode 100644 index d910c3f2..00000000 --- a/docs/superpowers/specs/prebuild-tokens.json +++ /dev/null @@ -1,4720 +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" - } - } - }, - "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" - } - }, - "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" - }, - "size": { - "none": "0rem", - "min": "0.0714rem", - "2px": "0.1429rem", - "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", - "pill": "71.3571rem", - "max": "100%" - } - }, - "semantic": { - "color": { - "light": { - "background": { - "surface": { - "ground": "{colors.alpha.white.1000}", - "section": "{colors.solid.zinc.50}", - "raised": "{colors.alpha.white.1000}", - "overlay": "{colors.alpha.white.1000}", - "sunken": "{colors.solid.zinc.100}", - "canvas": "{colors.alpha.white.1000}", - "inverse": "{colors.solid.zinc.800}", - "inverseStrong": "{colors.solid.zinc.950}", - "hover": { - "section": "{colors.solid.zinc.100}", - "raised": "{colors.solid.zinc.100}" - } - }, - "brand": { - "subtle": "{colors.solid.green.50}", - "subtleHover": "{colors.solid.green.100}", - "bold": "{colors.solid.green.500}", - "boldHover": "{colors.solid.green.600}", - "boldActive": "{colors.solid.green.700}" - }, - "success": { - "subtle": "{colors.solid.green.50}", - "subtleHover": "{colors.solid.green.100}", - "indicator": "{colors.solid.green.400}", - "bold": "{colors.solid.green.500}", - "boldHover": "{colors.solid.green.600}", - "deep": "{colors.solid.green.950}" - }, - "info": { - "subtle": "{colors.solid.blue.50}", - "subtleHover": "{colors.solid.blue.100}", - "bold": "{colors.solid.blue.500}", - "boldHover": "{colors.solid.blue.600}", - "deep": "{colors.solid.blue.950}" - }, - "warning": { - "subtle": "{colors.solid.yellow.50}", - "subtleHover": "{colors.solid.yellow.100}", - "bold": "{colors.solid.yellow.500}", - "boldHover": "{colors.solid.yellow.600}", - "deep": "{colors.solid.yellow.950}" - }, - "danger": { - "subtle": "{colors.solid.red.50}", - "subtleHover": "{colors.solid.red.100}", - "bold": "{colors.solid.red.500}", - "boldHover": "{colors.solid.red.600}", - "deep": "{colors.solid.red.950}" - }, - "neutral": { - "subtle": "{colors.solid.zinc.50}", - "subtleHover": "{colors.solid.zinc.100}", - "bold": "{colors.solid.zinc.500}", - "boldHover": "{colors.solid.zinc.600}" - }, - "help": { - "subtle": "{colors.solid.purple.50}", - "subtleHover": "{colors.solid.purple.100}", - "bold": "{colors.solid.purple.500}", - "boldHover": "{colors.solid.purple.600}", - "deep": "{colors.solid.purple.950}" - }, - "selected": { - "default": "{colors.solid.green.500}", - "hover": "{colors.solid.green.600}" - }, - "disabled": "{colors.solid.zinc.200}", - "scrim": { - "default": "{colors.alpha.black.400}", - "modal": "{colors.alpha.black.300}" - }, - "translucent": { - "light": { - "subtle": "{colors.alpha.white.100}", - "default": "{colors.alpha.white.200}", - "strong": "{colors.alpha.white.500}" - }, - "dark": { - "default": "{colors.alpha.black.500}" - } - }, - "transparent": "rgba(255, 255, 255, 0.0001)" - }, - "text": { - "default": "{colors.solid.zinc.900}", - "subtle": "{colors.solid.zinc.600}", - "muted": "{colors.solid.zinc.500}", - "placeholder": "{colors.solid.zinc.500}", - "disabled": "{colors.solid.zinc.300}", - "onBold": "{colors.alpha.white.1000}", - "staticDark": "{colors.solid.zinc.900}", - "staticLight": "{colors.alpha.white.1000}", - "brand": "{colors.solid.green.600}", - "link": "{colors.solid.green.600}", - "linkHover": "{colors.solid.green.700}", - "success": "{colors.solid.green.700}", - "info": "{colors.solid.blue.600}", - "warning": "{colors.solid.yellow.600}", - "danger": "{colors.solid.red.600}", - "neutral": "{colors.solid.zinc.600}", - "help": "{colors.solid.purple.600}", - "successStrong": "{colors.solid.green.900}", - "infoStrong": "{colors.solid.blue.900}", - "warningStrong": "{colors.solid.yellow.900}", - "dangerStrong": "{colors.solid.red.900}", - "helpStrong": "{colors.solid.purple.900}", - "hover": { - "default": "{colors.solid.zinc.700}", - "subtle": "{colors.solid.zinc.400}", - "muted": "{colors.solid.zinc.300}", - "brand": "{colors.solid.green.700}" - } - }, - "border": { - "subtle": "{colors.solid.zinc.200}", - "default": "{colors.solid.zinc.300}", - "strong": "{colors.solid.zinc.900}", - "disabled": "{colors.solid.zinc.200}", - "brand": "{colors.solid.green.600}", - "success": "{colors.solid.green.400}", - "info": "{colors.solid.blue.400}", - "warning": "{colors.solid.yellow.400}", - "danger": "{colors.solid.red.400}", - "neutral": "{colors.solid.zinc.400}", - "help": "{colors.solid.purple.400}", - "inverse": "{colors.solid.zinc.800}", - "successSubtle": "{colors.solid.green.300}", - "infoSubtle": "{colors.solid.blue.300}", - "warningSubtle": "{colors.solid.yellow.300}", - "dangerSubtle": "{colors.solid.red.300}", - "helpSubtle": "{colors.solid.purple.300}" - }, - "icon": { - "default": "{colors.solid.zinc.950}", - "subtle": "{colors.solid.zinc.500}", - "disabled": "{colors.solid.zinc.300}", - "onBold": "{colors.alpha.white.1000}", - "brand": "{colors.solid.green.600}", - "success": "{colors.solid.green.600}", - "info": "{colors.solid.blue.600}", - "warning": "{colors.solid.yellow.600}", - "danger": "{colors.solid.red.600}", - "neutral": "{colors.solid.zinc.600}", - "help": "{colors.solid.purple.600}" - }, - "focusRing": { - "default": "{colors.solid.green.500}", - "invalid": "{colors.solid.red.200}", - "success": "{colors.solid.green.200}", - "warning": "{colors.solid.yellow.200}", - "info": "{colors.solid.blue.200}", - "help": "{colors.solid.purple.200}", - "shadow": "{shadow.200}" - } - }, - "dark": { - "background": { - "surface": { - "ground": "{colors.solid.zinc.950}", - "section": "{colors.solid.zinc.900}", - "raised": "{colors.solid.zinc.900}", - "overlay": "{colors.solid.zinc.900}", - "sunken": "{colors.solid.zinc.950}", - "canvas": "{colors.alpha.black.1000}", - "inverse": "{colors.solid.zinc.200}", - "inverseStrong": "{colors.solid.zinc.50}", - "hover": { - "section": "{colors.solid.zinc.800}", - "raised": "{colors.solid.zinc.800}" - } - }, - "brand": { - "subtle": "{colors.solid.green.950}", - "subtleHover": "{colors.solid.green.900}", - "bold": "{colors.solid.green.500}", - "boldHover": "{colors.solid.green.400}", - "boldActive": "{colors.solid.green.300}" - }, - "success": { - "subtle": "{colors.solid.green.950}", - "subtleHover": "{colors.solid.green.900}", - "indicator": "{colors.solid.green.400}", - "bold": "{colors.solid.green.500}", - "boldHover": "{colors.solid.green.400}", - "deep": "{colors.solid.green.50}" - }, - "info": { - "subtle": "{colors.solid.blue.950}", - "subtleHover": "{colors.solid.blue.900}", - "bold": "{colors.solid.blue.500}", - "boldHover": "{colors.solid.blue.400}", - "deep": "{colors.solid.blue.50}" - }, - "warning": { - "subtle": "{colors.solid.yellow.950}", - "subtleHover": "{colors.solid.yellow.900}", - "bold": "{colors.solid.yellow.500}", - "boldHover": "{colors.solid.yellow.400}", - "deep": "{colors.solid.yellow.50}" - }, - "danger": { - "subtle": "{colors.solid.red.950}", - "subtleHover": "{colors.solid.red.900}", - "bold": "{colors.solid.red.500}", - "boldHover": "{colors.solid.red.400}", - "deep": "{colors.solid.red.50}" - }, - "neutral": { - "subtle": "{colors.solid.zinc.950}", - "subtleHover": "{colors.solid.zinc.900}", - "bold": "{colors.solid.zinc.500}", - "boldHover": "{colors.solid.zinc.400}" - }, - "help": { - "subtle": "{colors.solid.purple.950}", - "subtleHover": "{colors.solid.purple.900}", - "bold": "{colors.solid.purple.500}", - "boldHover": "{colors.solid.purple.400}", - "deep": "{colors.solid.purple.50}" - }, - "selected": { - "default": "{colors.solid.green.500}", - "hover": "{colors.solid.green.600}" - }, - "disabled": "{colors.solid.zinc.800}", - "scrim": { - "default": "{colors.alpha.black.600}", - "modal": "{colors.alpha.black.300}" - }, - "translucent": { - "light": { - "subtle": "{colors.alpha.white.100}", - "default": "{colors.alpha.white.200}", - "strong": "{colors.alpha.white.500}" - }, - "dark": { - "default": "{colors.alpha.black.500}" - } - }, - "transparent": "rgba(0, 0, 0, 0.0001)" - }, - "text": { - "default": "{colors.alpha.white.1000}", - "subtle": "{colors.solid.zinc.400}", - "muted": "{colors.solid.zinc.500}", - "placeholder": "{colors.solid.zinc.500}", - "disabled": "{colors.solid.zinc.700}", - "onBold": "{colors.solid.zinc.900}", - "staticDark": "{colors.solid.zinc.900}", - "staticLight": "{colors.alpha.white.1000}", - "brand": "{colors.solid.green.400}", - "link": "{colors.solid.green.400}", - "linkHover": "{colors.solid.green.300}", - "success": "{colors.solid.green.400}", - "info": "{colors.solid.blue.400}", - "warning": "{colors.solid.yellow.400}", - "danger": "{colors.solid.red.400}", - "neutral": "{colors.solid.zinc.400}", - "help": "{colors.solid.purple.400}", - "successStrong": "{colors.solid.green.100}", - "infoStrong": "{colors.solid.blue.100}", - "warningStrong": "{colors.solid.yellow.100}", - "dangerStrong": "{colors.solid.red.100}", - "helpStrong": "{colors.solid.purple.100}", - "hover": { - "default": "{colors.solid.zinc.300}", - "subtle": "{colors.solid.zinc.600}", - "muted": "{colors.solid.zinc.700}", - "brand": "{colors.solid.green.300}" - } - }, - "border": { - "subtle": "{colors.solid.zinc.800}", - "default": "{colors.solid.zinc.700}", - "strong": "{colors.solid.zinc.100}", - "disabled": "{colors.solid.zinc.800}", - "brand": "{colors.solid.green.400}", - "success": "{colors.solid.green.600}", - "info": "{colors.solid.blue.600}", - "warning": "{colors.solid.yellow.600}", - "danger": "{colors.solid.red.600}", - "neutral": "{colors.solid.zinc.600}", - "help": "{colors.solid.purple.600}", - "inverse": "{colors.solid.zinc.200}", - "successSubtle": "{colors.solid.green.700}", - "infoSubtle": "{colors.solid.blue.700}", - "warningSubtle": "{colors.solid.yellow.700}", - "dangerSubtle": "{colors.solid.red.700}", - "helpSubtle": "{colors.solid.purple.700}" - }, - "icon": { - "default": "{colors.alpha.white.1000}", - "subtle": "{colors.solid.zinc.500}", - "disabled": "{colors.solid.zinc.700}", - "onBold": "{colors.solid.zinc.900}", - "brand": "{colors.solid.green.400}", - "success": "{colors.solid.green.400}", - "info": "{colors.solid.blue.400}", - "warning": "{colors.solid.yellow.400}", - "danger": "{colors.solid.red.400}", - "neutral": "{colors.solid.zinc.400}", - "help": "{colors.solid.purple.400}" - }, - "focusRing": { - "default": "{colors.solid.green.500}", - "invalid": "{colors.solid.red.800}", - "success": "{colors.solid.green.800}", - "warning": "{colors.solid.yellow.800}", - "info": "{colors.solid.blue.800}", - "help": "{colors.solid.purple.800}", - "shadow": "{shadow.200}" - } - } - }, - "dimension": { - "space": { - "none": "{size.none}", - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.3x}", - "400": "{size.4x}", - "500": "{size.5x}", - "600": "{size.6x}", - "700": "{size.7x}", - "800": "{size.8x}", - "900": "{size.10x}" - }, - "size": { - "100": "{size.min}", - "150": "{size.1x}", - "200": "{size.2x}", - "250": "{size.3x}", - "300": "{size.4x}", - "350": "{size.5x}", - "400": "{size.6x}", - "450": "{size.7x}", - "500": "{size.8x}", - "550": "{size.9x}", - "600": "{size.10x}", - "700": "{size.12x}", - "750": "{size.14x}", - "800": "{size.16x}", - "900": "{size.20x}" - }, - "radius": { - "none": "{size.none}", - "100": "{size.1x}", - "200": "{size.2x}", - "300": "{size.3x}", - "400": "{size.4x}", - "500": "{size.6x}", - "max": "{size.pill}" - }, - "borderWidth": { - "none": "{size.none}", - "100": "{size.min}", - "200": "{size.2px}", - "300": "{size.1x}" - }, - "focusRing": { - "width": "{size.1x}", - "offset": "{size.none}", - "style": "none" - }, - "duration": { - "100": "{transition.duration.100}", - "200": "{transition.duration.200}", - "300": "{transition.duration.300}", - "400": "{transition.duration.400}", - "500": "{transition.duration.500}" - }, - "overlayWidth": { - "narrow": "{size.60x}", - "sm": "{size.80x}", - "base": "{size.100x}", - "lg": "{size.120x}", - "xlg": "{size.128x}" - } - }, - "typography": { - "fontFamily": { - "heading": "{fonts.fontFamily.heading}", - "base": "{fonts.fontFamily.base}" - }, - "fontWeight": { - "regular": "{fonts.fontWeight.regular}", - "medium": "{fonts.fontWeight.medium}", - "demibold": "{fonts.fontWeight.demibold}", - "bold": "{fonts.fontWeight.bold}" - }, - "fontSize": { - "100": "{fonts.fontSize.100}", - "200": "{fonts.fontSize.200}", - "300": "{fonts.fontSize.300}", - "400": "{fonts.fontSize.400}", - "500": "{fonts.fontSize.500}", - "600": "{fonts.fontSize.600}", - "650": "{fonts.fontSize.650}", - "700": "{fonts.fontSize.700}", - "750": "{fonts.fontSize.750}", - "800": "{fonts.fontSize.800}", - "900": "{fonts.fontSize.900}", - "1000": "{fonts.fontSize.1000}" - }, - "lineHeight": { - "100": "{fonts.lineHeight.100}", - "150": "{fonts.lineHeight.150}", - "200": "{fonts.lineHeight.200}", - "250": "{fonts.lineHeight.250}", - "300": "{fonts.lineHeight.300}", - "350": "{fonts.lineHeight.350}", - "400": "{fonts.lineHeight.400}", - "450": "{fonts.lineHeight.450}", - "500": "{fonts.lineHeight.500}", - "550": "{fonts.lineHeight.550}", - "600": "{fonts.lineHeight.600}", - "700": "{fonts.lineHeight.700}", - "800": "{fonts.lineHeight.800}", - "850": "{fonts.lineHeight.850}", - "900": "{fonts.lineHeight.900}", - "1000": "{fonts.lineHeight.1000}", - "auto": "{fonts.lineHeight.auto}" - }, - "display": { - "lg": { - "fontFamily": "{fonts.fontFamily.heading}", - "fontSize": "{fonts.fontSize.1000}", - "fontWeight": "{fonts.fontWeight.bold}", - "lineHeight": "{fonts.lineHeight.auto}" - }, - "md": { - "fontFamily": "{fonts.fontFamily.heading}", - "fontSize": "{fonts.fontSize.900}", - "fontWeight": "{fonts.fontWeight.bold}", - "lineHeight": "{fonts.lineHeight.auto}" - }, - "sm": { - "fontFamily": "{fonts.fontFamily.heading}", - "fontSize": "{fonts.fontSize.800}", - "fontWeight": "{fonts.fontWeight.bold}", - "lineHeight": "{fonts.lineHeight.auto}" - } - }, - "heading": { - "xl": { - "fontFamily": "{fonts.fontFamily.heading}", - "fontSize": "{fonts.fontSize.750}", - "fontWeight": "{fonts.fontWeight.bold}", - "lineHeight": "{fonts.lineHeight.auto}" - }, - "lg": { - "fontFamily": "{fonts.fontFamily.heading}", - "fontSize": "{fonts.fontSize.700}", - "fontWeight": "{fonts.fontWeight.demibold}", - "lineHeight": "{fonts.lineHeight.900}" - }, - "md": { - "fontFamily": "{fonts.fontFamily.heading}", - "fontSize": "{fonts.fontSize.600}", - "fontWeight": "{fonts.fontWeight.demibold}", - "lineHeight": "{fonts.lineHeight.700}" - }, - "sm": { - "fontFamily": "{fonts.fontFamily.heading}", - "fontSize": "{fonts.fontSize.500}", - "fontWeight": "{fonts.fontWeight.demibold}", - "lineHeight": "{fonts.lineHeight.600}" - } - }, - "body": { - "lg": { - "fontFamily": "{fonts.fontFamily.base}", - "fontSize": "{fonts.fontSize.400}", - "fontWeight": "{fonts.fontWeight.regular}", - "lineHeight": "{fonts.lineHeight.550}" - }, - "md": { - "fontFamily": "{fonts.fontFamily.base}", - "fontSize": "{fonts.fontSize.300}", - "fontWeight": "{fonts.fontWeight.regular}", - "lineHeight": "{fonts.lineHeight.500}" - }, - "sm": { - "fontFamily": "{fonts.fontFamily.base}", - "fontSize": "{fonts.fontSize.200}", - "fontWeight": "{fonts.fontWeight.regular}", - "lineHeight": "{fonts.lineHeight.400}" - } - }, - "label": { - "lg": { - "fontFamily": "{fonts.fontFamily.base}", - "fontSize": "{fonts.fontSize.300}", - "fontWeight": "{fonts.fontWeight.medium}", - "lineHeight": "{fonts.lineHeight.500}" - }, - "md": { - "fontFamily": "{fonts.fontFamily.base}", - "fontSize": "{fonts.fontSize.200}", - "fontWeight": "{fonts.fontWeight.medium}", - "lineHeight": "{fonts.lineHeight.400}" - }, - "sm": { - "fontFamily": "{fonts.fontFamily.base}", - "fontSize": "{fonts.fontSize.100}", - "fontWeight": "{fonts.fontWeight.medium}", - "lineHeight": "{fonts.lineHeight.300}" - } - }, - "caption": { - "fontFamily": "{fonts.fontFamily.base}", - "fontSize": "{fonts.fontSize.100}", - "fontWeight": "{fonts.fontWeight.regular}", - "lineHeight": "{fonts.lineHeight.250}" - } - }, - "shadow": { - "none": "{shadows.none}", - "100": "{shadows.100}", - "200": "{shadows.200}", - "300": "{shadows.300}", - "400": "{shadows.400}", - "500": "{shadows.500}" - } - }, - "components": { - "accordion": { - "extend": { - "extHeader": { - "iconSize": "{dimension.size.350}", - "gap": "{dimension.space.200}" - } - }, - "colorScheme": { - "light": { - "header": { - "background": "{color.background.transparent}", - "hoverBackground": "{color.background.transparent}", - "activeBackground": "{color.background.transparent}", - "activeHoverBackground": "{color.background.transparent}" - } - } - }, - "header": { - "color": "{color.text.default}", - "hoverColor": "{color.text.hover.default}", - "activeColor": "{color.text.default}", - "activeHoverColor": "{color.text.hover.default}", - "borderColor": "{color.background.transparent}", - "padding": "{dimension.space.400} 0 {dimension.space.400} 0", - "fontWeight": "{typography.fontWeight.bold}", - "borderRadius": "{dimension.radius.none}", - "borderWidth": "{dimension.borderWidth.none}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "inset {shadow.200}" - }, - "toggleIcon": { - "color": "{color.text.default}", - "hoverColor": "{color.text.hover.default}", - "activeColor": "{color.text.default}", - "activeHoverColor": "{color.text.hover.default}" - }, - "last": { - "bottomBorderRadius": "{dimension.radius.none}", - "activeBottomBorderRadius": "{dimension.radius.none}" - }, - "first": { - "borderWidth": "{dimension.borderWidth.none}", - "topBorderRadius": "{dimension.radius.none}" - } - }, - "root": { - "transitionDuration": "{dimension.duration.200}" - }, - "panel": { - "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.none}", - "borderColor": "{color.border.default}" - }, - "content": { - "borderWidth": "{dimension.size.100} {dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.none}", - "borderColor": "{color.background.transparent}", - "background": "{color.background.transparent}", - "color": "{color.text.default}", - "padding": "0 {dimension.space.600} {dimension.space.400} {dimension.space.600}" - } - }, - "autocomplete": { - "extend": { - "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}" - }, - "dropdown": { - "background": "{color.background.surface.ground}", - "hoverBackground": "{color.background.surface.ground}", - "activeBackground": "{color.background.surface.ground}", - "color": "{color.icon.default}", - "hoverColor": "{color.icon.default}", - "activeColor": "{color.icon.default}" - } - } - }, - "root": { - "background": "{color.background.surface.ground}", - "disabledBackground": "{color.background.disabled}", - "filledBackground": "{color.background.surface.ground}", - "filledHoverBackground": "{color.background.surface.ground}", - "filledFocusBackground": "{color.background.surface.ground}", - "borderColor": "{color.border.default}", - "hoverBorderColor": "{color.border.brand}", - "focusBorderColor": "{color.border.brand}", - "invalidBorderColor": "{color.border.danger}", - "color": "{color.icon.default}", - "disabledColor": "{color.text.muted}", - "placeholderColor": "{color.text.muted}", - "invalidPlaceholderColor": "{color.text.danger}", - "shadow": "0", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.300}", - "borderRadius": "{dimension.radius.300}", - "transitionDuration": "{dimension.duration.200}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "0" - } - }, - "overlay": { - "background": "{color.background.surface.raised}", - "borderColor": "{color.border.subtle}", - "borderRadius": "{dimension.radius.300}", - "color": "{color.text.default}", - "shadow": "{shadow.200}" - }, - "list": { - "padding": "{dimension.space.100}", - "gap": "{dimension.space.100}" - }, - "option": { - "focusBackground": "{color.background.surface.hover.section}", - "selectedBackground": "{color.border.strong}", - "selectedFocusBackground": "{color.text.hover.default}", - "color": "{color.text.default}", - "focusColor": "{color.text.default}", - "selectedColor": "{color.text.onBold}", - "selectedFocusColor": "{color.text.onBold}", - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "{dimension.radius.200}" - }, - "optionGroup": { - "background": "{color.background.surface.raised}", - "color": "{color.text.muted}", - "fontWeight": "{typography.fontWeight.demibold}", - "padding": "{dimension.space.200} {dimension.space.300}" - }, - "dropdown": { - "width": "{dimension.size.600}", - "borderColor": "{color.border.default}", - "hoverBorderColor": "{color.border.brand}", - "activeBorderColor": "{color.border.brand}", - "borderRadius": "{dimension.radius.300}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "0" - }, - "sm": { - "width": "{dimension.size.500}" - }, - "lg": { - "width": "{dimension.size.700}" - } - }, - "chip": { - "borderRadius": "{chip.root.borderRadius}" - }, - "emptyMessage": { - "padding": "{dimension.space.200} {dimension.space.300}" - } - }, - "avatar": { - "extend": { - "borderColor": "{color.border.default}", - "circle": { - "borderRadius": "{dimension.radius.max}" - } - }, - "root": { - "width": "{dimension.size.500}", - "height": "{dimension.size.500}", - "fontSize": "{typography.fontSize.200}", - "color": "{color.text.staticDark}", - "background": "{color.background.brand.bold}", - "borderRadius": "{dimension.radius.300}" - }, - "icon": { - "size": "{dimension.size.300}" - }, - "group": { - "borderColor": "{color.background.surface.raised}", - "offset": "-{dimension.space.300}" - }, - "lg": { - "width": "{dimension.size.600}", - "height": "{dimension.size.600}", - "fontSize": "{typography.fontSize.300}", - "icon": { - "size": "{dimension.size.300}" - }, - "group": { - "offset": "-{dimension.space.300}" - } - }, - "xl": { - "width": "{dimension.size.750}", - "height": "{dimension.size.750}", - "icon": { - "size": "{dimension.size.400}" - }, - "group": { - "offset": "-{dimension.space.600}" - }, - "fontSize": "{typography.fontSize.500}" - } - }, - "badge": { - "extend": { - "extDot": { - "success": { - "background": "{color.background.success.indicator}" - }, - "info": { - "background": "{color.border.info}" - }, - "warn": { - "background": "{color.border.warning}" - }, - "danger": { - "background": "{color.border.danger}" - }, - "lg": { - "size": "{dimension.size.250}" - }, - "xlg": { - "size": "{dimension.size.300}" - } - }, - "ext": { - "padding": "0rem" - } - }, - "colorScheme": { - "light": { - "primary": { - "color": "{color.text.staticDark}", - "background": "{color.background.brand.bold}" - }, - "secondary": { - "color": "{color.text.onBold}", - "background": "{color.border.strong}" - }, - "success": { - "color": "{color.text.successStrong}", - "background": "{color.border.successSubtle}" - }, - "info": { - "color": "{color.text.infoStrong}", - "background": "{color.border.infoSubtle}" - }, - "warn": { - "color": "{color.text.warningStrong}", - "background": "{color.border.warningSubtle}" - }, - "danger": { - "color": "{color.text.dangerStrong}", - "background": "{color.border.dangerSubtle}" - } - } - }, - "root": { - "borderRadius": "{dimension.size.200}", - "padding": "{dimension.space.200}", - "fontSize": "{typography.fontSize.100}", - "fontWeight": "{typography.fontWeight.regular}", - "minWidth": "{dimension.size.400}", - "height": "{dimension.size.400}" - }, - "dot": { - "size": "{dimension.size.200}" - }, - "sm": { - "fontSize": "{typography.fontSize.100}", - "minWidth": "0rem", - "height": "0rem" - }, - "lg": { - "fontSize": "{typography.fontSize.100}", - "minWidth": "{dimension.size.450}", - "height": "{dimension.size.450}" - }, - "xl": { - "fontSize": "{typography.fontSize.100}", - "minWidth": "{dimension.size.500}", - "height": "{dimension.size.500}" - } - }, - "breadcrumb": { - "extend": { - "hoverBackground": "{color.background.neutral.subtleHover}", - "iconSize": "{dimension.size.350}", - "extItem": { - "padding": "{dimension.space.100}" - } - }, - "root": { - "padding": "0rem", - "background": "{color.background.transparent}", - "gap": "0rem", - "transitionDuration": "{dimension.duration.200}" - }, - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - }, - "item": { - "color": "{color.text.default}", - "hoverColor": "{color.text.hover.default}", - "borderRadius": "{dimension.radius.100}", - "gap": "{dimension.space.200}", - "icon": { - "color": "{color.text.default}", - "hoverColor": "{color.text.hover.default}" - } - }, - "separator": { - "color": "{color.text.default}" - } - }, - "button": { - "extend": { - "disabledBackground": "{color.background.disabled}", - "extOutlined": { - "danger": { - "focusBackground": "{color.background.transparent}" - }, - "warn": { - "focusBackground": "{color.background.transparent}" - }, - "info": { - "focusBackground": "{color.background.transparent}" - }, - "help": { - "focusBackground": "{color.background.transparent}" - }, - "success": { - "focusBackground": "{color.background.transparent}" - } - }, - "disabledColor": "{color.text.muted}", - "extText": { - "danger": { - "focusBackground": "{color.background.transparent}" - }, - "warn": { - "focusBackground": "{color.background.transparent}" - }, - "info": { - "focusBackground": "{color.background.transparent}" - }, - "help": { - "focusBackground": "{color.background.transparent}" - }, - "success": { - "focusBackground": "{color.background.transparent}" - } - }, - "extLink": { - "background": "{color.background.transparent}", - "colorHover": "{color.text.hover.default}", - "paddingX": "0rem", - "paddingY": "{dimension.space.100}", - "sm": { - "iconOnlyWidth": "{dimension.size.300}" - }, - "base": { - "iconOnlyWidth": "{dimension.size.400}" - }, - "lg": { - "iconOnlyWidth": "{dimension.size.450}" - }, - "xlg": { - "iconOnlyWidth": "{dimension.size.500}" - } - }, - "extSm": { - "borderRadius": "{dimension.radius.300}", - "gap": "{dimension.space.200}" - }, - "extLg": { - "borderRadius": "{dimension.radius.400}", - "gap": "{dimension.space.300}", - "height": "{dimension.size.750}" - }, - "extXlg": { - "borderRadius": "{dimension.radius.400}", - "gap": "{dimension.space.300}", - "iconOnlyWidth": "{dimension.size.800}", - "paddingX": "{dimension.space.600}", - "paddingY": "{dimension.space.500}", - "height": "{dimension.size.800}" - }, - "borderWidth": "{dimension.size.100}", - "iconSize": { - "sm": "{dimension.size.300}", - "md": "{dimension.size.350}", - "lg": "{dimension.size.400}" - } - }, - "colorScheme": { - "light": { - "root": { - "primary": { - "background": "{color.background.brand.bold}", - "hoverBackground": "{color.text.brand}", - "activeBackground": "{color.text.linkHover}", - "borderColor": "{color.background.transparent}", - "hoverBorderColor": "{color.background.transparent}", - "activeBorderColor": "{color.background.transparent}", - "color": "{color.text.staticDark}", - "hoverColor": "{color.text.staticDark}", - "activeColor": "{color.text.staticDark}", - "focusRing": { - "color": "{color.focusRing.success}", - "shadow": "{shadow.200}" - } - }, - "secondary": { - "background": "{color.border.strong}", - "hoverBackground": "{color.background.surface.inverse}", - "activeBackground": "{color.text.hover.default}", - "borderColor": "{color.background.transparent}", - "hoverBorderColor": "{color.background.transparent}", - "activeBorderColor": "{color.background.transparent}", - "color": "{color.text.onBold}", - "hoverColor": "{color.text.onBold}", - "activeColor": "{color.text.onBold}", - "focusRing": { - "color": "{color.focusRing.success}", - "shadow": "{shadow.200}" - } - }, - "contrast": { - "background": "{color.background.disabled}", - "hoverBackground": "{color.text.disabled}", - "activeBackground": "{color.text.hover.subtle}", - "borderColor": "{color.background.transparent}", - "hoverBorderColor": "{color.background.transparent}", - "activeBorderColor": "{color.background.transparent}", - "color": "{color.text.default}", - "hoverColor": "{color.text.default}", - "activeColor": "{color.text.default}", - "focusRing": { - "color": "{color.focusRing.success}", - "shadow": "{shadow.200}" - } - }, - "info": { - "background": "{color.border.infoSubtle}", - "hoverBackground": "{color.border.info}", - "activeBackground": "{color.background.info.bold}", - "borderColor": "{color.background.transparent}", - "hoverBorderColor": "{color.background.transparent}", - "activeBorderColor": "{color.background.transparent}", - "color": "{color.text.infoStrong}", - "hoverColor": "{color.background.info.deep}", - "activeColor": "{color.text.infoStrong}" - }, - "success": { - "background": "{color.border.successSubtle}", - "hoverBackground": "{color.border.success}", - "activeBackground": "{color.background.brand.bold}", - "borderColor": "{color.background.transparent}", - "hoverBorderColor": "{color.background.transparent}", - "activeBorderColor": "{color.background.transparent}", - "color": "{color.text.successStrong}", - "hoverColor": "{color.background.success.deep}", - "activeColor": "{color.text.successStrong}" - }, - "warn": { - "background": "{color.border.warningSubtle}", - "hoverBackground": "{color.border.warning}", - "activeBackground": "{color.background.warning.bold}", - "borderColor": "{color.background.transparent}", - "hoverBorderColor": "{color.background.transparent}", - "activeBorderColor": "{color.background.transparent}", - "color": "{color.text.warningStrong}", - "hoverColor": "{color.background.warning.deep}", - "activeColor": "{color.text.warningStrong}" - }, - "help": { - "background": "{color.border.helpSubtle}", - "hoverBackground": "{color.border.help}", - "activeBackground": "{color.background.help.bold}", - "borderColor": "{color.background.transparent}", - "hoverBorderColor": "{color.background.transparent}", - "activeBorderColor": "{color.background.transparent}", - "color": "{color.text.helpStrong}", - "hoverColor": "{color.background.help.deep}", - "activeColor": "{color.text.helpStrong}" - }, - "danger": { - "background": "{color.border.dangerSubtle}", - "hoverBackground": "{color.border.danger}", - "activeBackground": "{color.background.danger.bold}", - "borderColor": "{color.background.transparent}", - "hoverBorderColor": "{color.background.transparent}", - "activeBorderColor": "{color.background.transparent}", - "color": "{color.text.dangerStrong}", - "hoverColor": "{color.background.danger.deep}", - "activeColor": "{color.text.dangerStrong}" - } - }, - "outlined": { - "primary": { - "hoverBackground": "{color.background.brand.subtle}", - "activeBackground": "{color.background.brand.subtleHover}", - "borderColor": "{color.focusRing.success}", - "color": "{color.background.brand.bold}" - }, - "success": { - "hoverBackground": "{color.background.brand.subtleHover}", - "activeBackground": "{color.focusRing.success}", - "borderColor": "{color.background.brand.boldHover}", - "color": "{color.background.brand.boldHover}" - }, - "info": { - "hoverBackground": "{color.background.info.subtleHover}", - "activeBackground": "{color.focusRing.info}", - "borderColor": "{color.background.info.boldHover}", - "color": "{color.background.info.boldHover}" - }, - "warn": { - "hoverBackground": "{color.background.warning.subtleHover}", - "activeBackground": "{color.focusRing.warning}", - "borderColor": "{color.background.warning.boldHover}", - "color": "{color.background.warning.boldHover}" - }, - "help": { - "hoverBackground": "{color.background.help.subtleHover}", - "activeBackground": "{color.focusRing.help}", - "borderColor": "{color.background.help.boldHover}", - "color": "{color.background.help.boldHover}" - }, - "danger": { - "hoverBackground": "{color.background.danger.subtleHover}", - "activeBackground": "{color.focusRing.invalid}", - "borderColor": "{color.background.danger.boldHover}", - "color": "{color.background.danger.boldHover}" - } - }, - "text": { - "primary": { - "hoverBackground": "{color.background.neutral.subtleHover}", - "activeBackground": "{color.background.disabled}", - "color": "{color.text.default}" - }, - "success": { - "hoverBackground": "{color.background.brand.subtleHover}", - "activeBackground": "{color.focusRing.success}", - "color": "{color.background.brand.boldHover}" - }, - "info": { - "hoverBackground": "{color.background.info.subtleHover}", - "activeBackground": "{color.focusRing.info}", - "color": "{color.background.info.boldHover}" - }, - "warn": { - "hoverBackground": "{color.background.warning.subtleHover}", - "activeBackground": "{color.focusRing.warning}", - "color": "{color.background.warning.boldHover}" - }, - "help": { - "hoverBackground": "{color.background.help.subtleHover}", - "activeBackground": "{color.focusRing.help}", - "color": "{color.background.help.boldHover}" - }, - "danger": { - "hoverBackground": "{color.background.danger.subtleHover}", - "activeBackground": "{color.focusRing.invalid}", - "color": "{color.background.danger.boldHover}" - } - }, - "link": { - "color": "{color.text.default}", - "hoverColor": "{color.text.hover.default}", - "activeColor": "{color.text.muted}" - } - }, - "dark": { - "root": { - "primary": { - "background": "{color.background.brand.bold}", - "hoverBackground": "{color.text.brand}", - "activeBackground": "{color.text.linkHover}", - "borderColor": "{color.background.transparent}", - "hoverBorderColor": "{color.background.transparent}", - "activeBorderColor": "{color.background.transparent}", - "color": "{color.text.staticDark}", - "hoverColor": "{color.text.staticDark}", - "activeColor": "{color.text.staticDark}", - "focusRing": { - "color": "{color.focusRing.success}", - "shadow": "{shadow.200}" - } - }, - "secondary": { - "background": "{color.background.disabled}", - "hoverBackground": "{color.text.disabled}", - "activeBackground": "{color.text.hover.subtle}", - "borderColor": "{color.background.transparent}", - "hoverBorderColor": "{color.background.transparent}", - "activeBorderColor": "{color.background.transparent}", - "color": "{color.background.surface.inverseStrong}", - "hoverColor": "{color.background.surface.inverseStrong}", - "activeColor": "{color.background.surface.inverseStrong}", - "focusRing": { - "color": "{color.focusRing.success}", - "shadow": "{shadow.200}" - } - }, - "contrast": { - "background": "{color.background.surface.inverseStrong}", - "hoverBackground": "{color.border.strong}", - "activeBackground": "{color.background.surface.inverse}", - "borderColor": "{color.background.transparent}", - "hoverBorderColor": "{color.background.transparent}", - "activeBorderColor": "{color.background.transparent}", - "color": "{color.background.surface.canvas}", - "hoverColor": "{color.background.surface.canvas}", - "activeColor": "{color.background.surface.canvas}", - "focusRing": { - "color": "{color.focusRing.success}", - "shadow": "{shadow.200}" - } - }, - "info": { - "background": "{color.background.info.bold}", - "hoverBackground": "{color.border.info}", - "activeBackground": "{color.border.infoSubtle}", - "borderColor": "{color.background.transparent}", - "hoverBorderColor": "{color.background.transparent}", - "activeBorderColor": "{color.background.transparent}", - "color": "{color.text.staticDark}", - "hoverColor": "{color.text.staticDark}", - "activeColor": "{color.text.staticDark}" - }, - "success": { - "background": "{color.background.brand.bold}", - "hoverBackground": "{color.border.success}", - "activeBackground": "{color.border.successSubtle}", - "borderColor": "{color.background.transparent}", - "hoverBorderColor": "{color.background.transparent}", - "activeBorderColor": "{color.background.transparent}", - "color": "{color.text.staticDark}", - "hoverColor": "{color.text.staticDark}", - "activeColor": "{color.text.staticDark}" - }, - "warn": { - "background": "{color.background.warning.bold}", - "hoverBackground": "{color.border.warning}", - "activeBackground": "{color.border.warningSubtle}", - "borderColor": "{color.background.transparent}", - "hoverBorderColor": "{color.background.transparent}", - "activeBorderColor": "{color.background.transparent}", - "color": "{color.text.staticDark}", - "hoverColor": "{color.text.staticDark}", - "activeColor": "{color.text.staticDark}" - }, - "help": { - "background": "{color.background.help.bold}", - "hoverBackground": "{color.border.help}", - "activeBackground": "{color.border.helpSubtle}", - "borderColor": "{color.background.transparent}", - "hoverBorderColor": "{color.background.transparent}", - "activeBorderColor": "{color.background.transparent}", - "color": "{color.text.staticDark}", - "hoverColor": "{color.text.staticDark}", - "activeColor": "{color.text.staticDark}" - }, - "danger": { - "background": "{color.background.danger.bold}", - "hoverBackground": "{color.border.danger}", - "activeBackground": "{color.border.dangerSubtle}", - "borderColor": "{color.background.transparent}", - "hoverBorderColor": "{color.background.transparent}", - "activeBorderColor": "{color.background.transparent}", - "color": "{color.text.staticDark}", - "hoverColor": "{color.text.staticDark}", - "activeColor": "{color.text.staticDark}" - } - }, - "outlined": { - "primary": { - "hoverBackground": "{color.background.brand.subtle}", - "activeBackground": "{color.background.brand.subtleHover}", - "borderColor": "{color.focusRing.success}", - "color": "{color.background.brand.bold}" - }, - "success": { - "hoverBackground": "{color.background.success.deep}", - "activeBackground": "{color.text.successStrong}", - "borderColor": "{color.background.brand.bold}", - "color": "{color.background.brand.bold}" - }, - "info": { - "hoverBackground": "{color.background.info.deep}", - "activeBackground": "{color.text.infoStrong}", - "borderColor": "{color.background.info.bold}", - "color": "{color.background.info.bold}" - }, - "warn": { - "hoverBackground": "{color.background.warning.deep}", - "activeBackground": "{color.text.warningStrong}", - "borderColor": "{color.background.warning.bold}", - "color": "{color.background.warning.bold}" - }, - "help": { - "hoverBackground": "{color.background.help.deep}", - "activeBackground": "{color.text.helpStrong}", - "borderColor": "{color.background.help.bold}", - "color": "{color.background.help.bold}" - }, - "danger": { - "hoverBackground": "{color.background.danger.deep}", - "activeBackground": "{color.text.dangerStrong}", - "borderColor": "{color.background.danger.bold}", - "color": "{color.background.danger.bold}" - } - }, - "text": { - "primary": { - "hoverBackground": "{color.background.surface.inverse}", - "activeBackground": "{color.text.hover.default}", - "color": "{color.text.default}" - }, - "success": { - "hoverBackground": "{color.background.success.deep}", - "activeBackground": "{color.text.successStrong}", - "color": "{color.background.brand.bold}" - }, - "info": { - "hoverBackground": "{color.background.info.deep}", - "activeBackground": "{color.text.infoStrong}", - "color": "{color.background.info.bold}" - }, - "warn": { - "hoverBackground": "{color.background.warning.deep}", - "activeBackground": "{color.text.warningStrong}", - "color": "{color.background.warning.bold}" - }, - "help": { - "hoverBackground": "{color.background.help.deep}", - "activeBackground": "{color.text.helpStrong}", - "color": "{color.background.help.bold}" - }, - "danger": { - "hoverBackground": "{color.background.danger.deep}", - "activeBackground": "{color.text.dangerStrong}", - "color": "{color.background.danger.bold}" - } - }, - "link": { - "color": "{color.text.default}", - "hoverColor": "{color.text.hover.default}", - "activeColor": "{color.text.muted}" - } - } - }, - "root": { - "borderRadius": "{dimension.radius.300}", - "roundedBorderRadius": "{dimension.radius.max}", - "gap": "{dimension.space.200}", - "fontSize": "{typography.fontSize.200}", - "paddingX": "{dimension.space.400}", - "paddingY": "{dimension.space.200}", - "iconOnlyWidth": "{dimension.size.600}", - "raisedShadow": "none", - "badgeSize": "{dimension.size.300}", - "transitionDuration": "{dimension.duration.200}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "offset": "{dimension.focusRing.offset}" - }, - "sm": { - "fontSize": "{typography.fontSize.200}", - "iconOnlyWidth": "{dimension.size.500}", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.200}" - }, - "lg": { - "fontSize": "{typography.fontSize.500}", - "iconOnlyWidth": "{dimension.size.750}", - "paddingX": "{dimension.space.600}", - "paddingY": "{dimension.space.400}" - }, - "label": { - "fontWeight": "{typography.fontWeight.demibold}" - } - } - }, - "card": { - "extend": { - "borderColor": "{color.border.subtle}", - "borderWidth": "{dimension.size.100}" - }, - "root": { - "background": "{color.background.surface.raised}", - "borderRadius": "{dimension.space.400}", - "color": "{color.text.default}" - }, - "body": { - "padding": "{dimension.space.400}", - "gap": "{dimension.space.400}" - }, - "caption": { - "gap": "{dimension.space.100}" - }, - "title": { - "fontSize": "{typography.fontSize.400}", - "fontWeight": "{typography.fontWeight.demibold}" - }, - "subtitle": { - "color": "{color.text.muted}" - } - }, - "carousel": { - "colorScheme": { - "light": { - "indicator": { - "background": "{color.text.disabled}", - "hoverBackground": "{color.text.hover.subtle}", - "activeBackground": "{color.border.strong}" - } - } - }, - "root": { - "transitionDuration": "{dimension.duration.200}" - }, - "content": { - "gap": "{dimension.space.200}" - }, - "indicatorList": { - "padding": "{dimension.space.400}", - "gap": "{dimension.space.200}" - }, - "indicator": { - "width": "{dimension.size.200}", - "height": "{dimension.size.200}", - "borderRadius": "{dimension.radius.500}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - } - }, - "checkbox": { - "root": { - "borderRadius": "{dimension.radius.200}", - "extend": { - "borderWidth": "{dimension.borderWidth.100}" - }, - "width": "{dimension.size.400}", - "height": "{dimension.size.400}", - "background": "{color.background.surface.ground}", - "checkedBackground": "{color.border.strong}", - "checkedHoverBackground": "{color.background.surface.inverse}", - "disabledBackground": "{color.background.disabled}", - "filledBackground": "{color.background.surface.ground}", - "borderColor": "{color.border.default}", - "hoverBorderColor": "{color.border.strong}", - "focusBorderColor": "{color.border.strong}", - "checkedBorderColor": "{color.border.strong}", - "checkedHoverBorderColor": "{color.background.surface.inverse}", - "checkedFocusBorderColor": "{color.background.brand.bold}", - "checkedDisabledBorderColor": "{color.border.default}", - "invalidBorderColor": "{color.border.danger}", - "shadow": "0", - "focusRing": { - "focusRing": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - }, - "sm": { - "width": "{dimension.size.200}", - "height": "{dimension.size.200}" - }, - "lg": { - "width": "{dimension.size.350}", - "height": "{dimension.size.350}" - }, - "transitionDuration": "{dimension.duration.200}" - }, - "icon": { - "size": "{dimension.size.300}", - "color": "{color.icon.default}", - "checkedColor": "{color.text.onBold}", - "checkedHoverColor": "{color.text.onBold}", - "disabledColor": "{color.text.muted}", - "sm": { - "size": "{dimension.size.250}" - }, - "lg": { - "size": "{dimension.size.350}" - } - } - }, - "chip": { - "extend": { - "borderColor": "{color.background.transparent}", - "borderWidth": "{dimension.size.100}" - }, - "root": { - "borderRadius": "{dimension.radius.200}", - "paddingX": "{dimension.space.200}", - "paddingY": "{dimension.space.100}", - "gap": "{dimension.space.200}", - "transitionDuration": "{dimension.duration.200}" - }, - "colorScheme": { - "light": { - "root": { - "background": "{color.background.disabled}", - "color": "{color.text.default}" - }, - "icon": { - "color": "{color.text.default}" - }, - "removeIcon": { - "color": "{color.text.default}" - } - } - }, - "image": { - "width": "0rem", - "height": "0rem" - }, - "icon": { - "size": "{dimension.size.300}" - }, - "removeIcon": { - "size": "{dimension.size.300}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - } - }, - "confirmdialog": { - "extend": { - "extIcon": { - "success": "{color.background.brand.bold}", - "info": "{color.background.info.bold}", - "help": "{color.background.help.bold}", - "warn": "{color.background.warning.bold}", - "danger": "{color.background.danger.bold}" - } - }, - "icon": { - "size": "{dimension.size.400}", - "color": "{color.text.default}" - }, - "content": { - "gap": "0rem" - } - }, - "confirmpopup": { - "root": { - "background": "{color.background.surface.raised}", - "color": "{color.text.default}", - "shadow": "{shadow.400}", - "gutter": "{dimension.space.300}", - "arrowOffset": "{dimension.space.500}" - }, - "content": { - "padding": "{dimension.space.300}", - "gap": "{dimension.space.400}" - }, - "icon": { - "size": "{dimension.size.400}", - "color": "{color.text.default}" - }, - "footer": { - "gap": "{dimension.space.200}", - "padding": "0 {dimension.space.300} {dimension.space.500} {dimension.space.300} {dimension.space.500} {dimension.space.300} {dimension.space.500}" - } - }, - "contextmenu": { - "root": { - "background": "{color.background.surface.raised}", - "color": "{color.text.default}", - "shadow": "{shadow.400}" - }, - "list": { - "padding": "{dimension.space.100} 0", - "gap": "{dimension.space.100}" - }, - "item": { - "padding": "{dimension.space.200} {dimension.space.300}", - "gap": "{dimension.space.200}" - }, - "submenu": { - "mobileIndent": "{dimension.space.500}" - } - }, - "datatable": { - "colorScheme": { - "light": { - "root": { - "color": "{color.text.default}", - "borderColor": "{color.border.subtle}" - }, - "header": { - "background": "{color.background.neutral.subtle}", - "color": "{color.text.default}" - }, - "headerCell": { - "background": "{color.background.neutral.subtle}", - "hoverBackground": "{color.background.neutral.subtleHover}", - "color": "{color.text.default}" - }, - "footer": { - "background": "{color.background.neutral.subtleHover}", - "color": "{color.text.default}" - }, - "footerCell": { - "background": "{color.background.surface.hover.section}", - "color": "{color.text.default}" - }, - "row": { - "stripedBackground": "{color.background.surface.hover.section}" - }, - "bodyCell": { - "selectedBorderColor": "{color.border.subtle}" - } - } - }, - "extended": { - "extHeaderCell": { - "selectedHoverBackground": "{color.background.surface.inverse}" - }, - "extRow": { - "selectedHoverBackground": "{color.background.surface.inverse}", - "stripedHoverBackground": "{color.background.neutral.subtleHover}" - } - }, - "root": { - "transitionDuration": "{dimension.duration.200}" - }, - "header": { - "borderColor": "{color.border.subtle}", - "borderWidth": "{dimension.size.100} 0 {dimension.size.100} 0", - "padding": "{dimension.space.400}", - "sm": { - "padding": "{dimension.space.200}" - }, - "lg": { - "padding": "{dimension.space.500}" - } - }, - "headerCell": { - "selectedBackground": "{color.border.strong}", - "borderColor": "{color.border.subtle}", - "hoverColor": "{color.text.onBold}", - "selectedColor": "{color.text.onBold}", - "gap": "{dimension.space.200}", - "padding": "{dimension.space.400}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "inset {shadow.200}" - }, - "sm": { - "padding": "{dimension.space.200}" - }, - "lg": { - "padding": "{dimension.space.500}" - } - }, - "columnTitle": { - "fontWeight": "{typography.fontWeight.bold}" - }, - "row": { - "background": "{color.background.surface.raised}", - "hoverBackground": "{color.background.surface.hover.section}", - "selectedBackground": "{color.border.strong}", - "color": "{color.text.default}", - "hoverColor": "{color.text.hover.default}", - "selectedColor": "{color.text.onBold}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "inset {shadow.200}" - } - }, - "bodyCell": { - "borderColor": "{color.border.subtle}", - "padding": "{dimension.space.400}", - "sm": { - "padding": "{dimension.space.200}" - }, - "lg": { - "padding": "{dimension.space.500}" - } - }, - "footerCell": { - "borderColor": "{color.border.subtle}", - "padding": "{dimension.space.400}", - "sm": { - "padding": "{dimension.space.200}" - }, - "lg": { - "padding": "{dimension.space.500}" - } - }, - "columnFooter": { - "fontWeight": "{typography.fontWeight.bold}" - }, - "dropPoint": { - "color": "{color.border.strong}" - }, - "footer": { - "borderColor": "{color.border.subtle}", - "borderWidth": "0 0 {dimension.size.100} 0", - "padding": "{dimension.space.400}", - "sm": { - "padding": "{dimension.space.200}" - }, - "lg": { - "padding": "{dimension.space.500}" - } - }, - "columnResizer": { - "width": "{dimension.size.200}" - }, - "resizeIndicator": { - "width": "{dimension.size.100}", - "color": "{color.border.strong}" - }, - "sortIcon": { - "color": "{color.text.default}", - "hoverColor": "{color.text.hover.default}", - "size": "{dimension.size.300}" - }, - "loadingIcon": { - "size": "{dimension.size.500}" - }, - "rowToggleButton": { - "hoverBackground": "{color.background.surface.hover.section}", - "selectedHoverBackground": "{color.background.surface.hover.section}", - "color": "{color.text.default}", - "hoverColor": "{color.text.default}", - "selectedHoverColor": "{color.text.default}", - "size": "{dimension.size.500}", - "borderRadius": "{dimension.radius.300}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - }, - "filter": { - "inlineGap": "{dimension.space.200}", - "rule": { - "borderColor": "{color.border.subtle}" - }, - "constraintList": { - "padding": "{dimension.space.100}", - "gap": "{dimension.space.100}" - }, - "constraint": { - "focusBackground": "{color.background.surface.hover.section}", - "selectedBackground": "{color.border.strong}", - "selectedFocusBackground": "{color.text.hover.default}", - "color": "{color.text.default}", - "focusColor": "{color.text.default}", - "selectedColor": "{color.text.onBold}", - "selectedFocusColor": "{color.text.onBold}", - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "{dimension.radius.200}", - "separator": { - "borderColor": "{color.border.subtle}" - } - }, - "overlaySelect": { - "background": "{color.background.surface.raised}", - "color": "{color.text.default}", - "borderColor": "{color.border.subtle}", - "borderRadius": "{dimension.radius.300}", - "shadow": "{shadow.400}" - }, - "overlayPopover": { - "background": "{color.background.surface.raised}", - "color": "{color.text.default}", - "borderColor": "{color.border.subtle}", - "borderRadius": "{dimension.radius.300}", - "shadow": "{shadow.400}", - "padding": "{dimension.space.300}", - "gap": "{dimension.space.100}" - } - }, - "paginatorTop": { - "borderColor": "{color.border.default}", - "borderWidth": "0 0 {dimension.size.100} 0" - }, - "paginatorBottom": { - "borderWidth": "0 0 {dimension.size.100} 0", - "borderColor": "{color.border.subtle}" - } - }, - "dataview": { - "root": { - "borderWidth": "{dimension.size.100}", - "borderRadius": "{dimension.radius.100}", - "padding": "0rem", - "borderColor": "{color.border.subtle}" - }, - "header": { - "borderWidth": "0 0 {dimension.size.100} 0", - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "0 0 0 0", - "color": "{color.text.default}" - }, - "content": { - "background": "{color.background.surface.raised}", - "color": "{color.text.default}", - "borderColor": "{color.border.subtle}", - "borderWidth": "0rem", - "padding": "0rem", - "borderRadius": "0" - }, - "footer": { - "background": "{color.background.neutral.subtleHover}", - "color": "{color.text.default}", - "borderWidth": "{dimension.size.100} 0 0 0", - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "0 0 0 0" - }, - "paginatorTop": { - "borderWidth": "0 0 {dimension.size.100} 0" - }, - "paginatorBottom": { - "borderWidth": "{dimension.size.100} 0 0 0" - } - }, - "datepicker": { - "extend": { - "extDate": { - "selectedHoverBackground": "{color.background.surface.inverse}" - }, - "extToday": { - "hoverBackground": "{color.background.surface.hover.section}", - "borderColor": "{color.border.inverse}" - }, - "extTitle": { - "width": "{dimension.overlayWidth.narrow}" - }, - "extTimePicker": { - "minWidth": "{dimension.size.700}", - "color": "{color.text.default}" - } - }, - "colorScheme": { - "light": { - "dropdown": { - "background": "{color.background.surface.raised}", - "hoverBackground": "{color.background.neutral.subtleHover}", - "activeBackground": "{color.border.strong}", - "color": "{color.text.default}", - "hoverColor": "{color.text.default}", - "activeColor": "{color.text.onBold}" - }, - "today": { - "background": "{color.background.transparent}", - "color": "{color.text.staticDark}" - } - } - }, - "panel": { - "background": "{color.background.surface.raised}", - "borderColor": "{color.border.subtle}", - "color": "{color.text.default}", - "borderRadius": "{dimension.radius.300}", - "shadow": "{shadow.400}", - "padding": "0rem" - }, - "header": { - "background": "{color.background.surface.raised}", - "borderColor": "{color.border.subtle}", - "color": "{color.text.default}", - "padding": "{dimension.space.300}" - }, - "title": { - "gap": "{dimension.space.200}", - "fontWeight": "{typography.fontWeight.bold}" - }, - "selectMonth": { - "hoverBackground": "{color.background.surface.hover.section}", - "color": "{color.text.default}", - "hoverColor": "{color.text.hover.default}", - "borderRadius": "{dimension.radius.300}", - "padding": "{dimension.space.200}" - }, - "inputIcon": { - "color": "{color.text.muted}" - }, - "dropdown": { - "width": "{dimension.size.600}", - "borderColor": "{color.border.default}", - "hoverBorderColor": "{color.border.default}", - "activeBorderColor": "{color.border.default}", - "borderRadius": "{dimension.radius.300}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - }, - "sm": { - "width": "0rem" - }, - "lg": { - "width": "0rem" - } - }, - "group": { - "borderColor": "{color.border.subtle}", - "gap": "{dimension.space.300}" - }, - "selectYear": { - "hoverBackground": "{color.background.surface.hover.section}", - "color": "{color.text.default}", - "hoverColor": "{color.text.hover.default}", - "borderRadius": "{dimension.radius.300}", - "padding": "{dimension.space.100}" - }, - "dayView": { - "margin": "{dimension.space.300}" - }, - "weekDay": { - "padding": "{dimension.space.100}", - "fontWeight": "{typography.fontWeight.bold}", - "color": "{color.text.default}" - }, - "date": { - "hoverBackground": "{color.background.surface.hover.section}", - "selectedBackground": "{color.border.strong}", - "rangeSelectedBackground": "{color.background.surface.hover.section}", - "color": "{color.text.default}", - "hoverColor": "{color.text.default}", - "selectedColor": "{color.text.onBold}", - "rangeSelectedColor": "{color.text.default}", - "width": "{dimension.size.500}", - "height": "{dimension.size.500}", - "borderRadius": "{dimension.radius.200}", - "padding": "{dimension.space.100}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - }, - "monthView": { - "margin": "0 0 0 0" - }, - "month": { - "padding": "0", - "borderRadius": "0rem" - }, - "yearView": { - "margin": "0 0 0 0" - }, - "year": { - "padding": "0", - "borderRadius": "0rem" - }, - "buttonbar": { - "padding": "{dimension.space.300}", - "borderColor": "{color.border.subtle}" - }, - "timePicker": { - "padding": "{dimension.space.300}", - "borderColor": "{color.border.subtle}", - "gap": "{dimension.space.200}", - "buttonGap": "{dimension.space.100}" - }, - "root": { - "transitionDuration": "{dimension.duration.200}" - } - }, - "dialog": { - "extend": { - "borderWidth": "{dimension.borderWidth.100}", - "backdrop": "{color.background.scrim.modal}" - }, - "root": { - "background": "{color.background.surface.raised}", - "borderColor": "{color.border.subtle}", - "color": "{color.text.default}", - "borderRadius": "{dimension.radius.500}", - "shadow": "{shadow.400}" - }, - "header": { - "padding": "{dimension.space.600} {dimension.space.600} 1rem {dimension.space.600}", - "gap": "{dimension.space.200}" - }, - "title": { - "fontSize": "{typography.fontSize.500}", - "fontWeight": "{typography.fontWeight.demibold}" - }, - "content": { - "padding": "{dimension.space.600}" - }, - "footer": { - "padding": "0 {dimension.space.600} {dimension.space.600} {dimension.space.600}", - "gap": "{dimension.space.200}" - } - }, - "divider": { - "colorScheme": { - "light": { - "content": { - "background": "{color.background.surface.raised}", - "color": "{color.text.muted}" - }, - "borderColor": "{color.border.subtle}" - } - }, - "extend": { - "content": { - "gap": "{dimension.space.200}" - }, - "iconSize": "{dimension.size.300}" - }, - "horizontal": { - "margin": "{dimension.space.400} 0", - "padding": "0 {dimension.space.400}", - "content": { - "padding": "0 {dimension.space.200}" - } - }, - "vertical": { - "margin": "0 {dimension.space.400}", - "padding": "{dimension.space.400} 0", - "content": { - "padding": "{dimension.space.200} 0" - } - } - }, - "drawer": { - "extend": { - "borderRadius": "{dimension.radius.200}", - "borderWidth": "{dimension.borderWidth.100}", - "width": "{dimension.overlayWidth.base}", - "extHeader": { - "gap": "{dimension.space.200}", - "borderColor": "{drawer.root.borderColor}" - }, - "padding": "{dimension.space.200}", - "scale": "0.125rem", - "backdrop": "{color.background.scrim.modal}" - }, - "root": { - "background": "{color.background.surface.raised}", - "borderColor": "{color.border.subtle}", - "color": "{color.text.default}", - "shadow": "{shadow.200}", - "width": "{dimension.overlayWidth.base}" - }, - "sm": { - "width": "{dimension.overlayWidth.sm}" - }, - "lg": { - "width": "{dimension.overlayWidth.lg}" - }, - "xlg": { - "width": "{dimension.overlayWidth.xlg}" - }, - "header": { - "padding": "{dimension.space.600} {dimension.space.600} {dimension.space.500} {dimension.space.600} " - }, - "title": { - "fontSize": "{typography.fontSize.500}", - "fontWeight": "{typography.fontWeight.demibold}" - }, - "content": { - "padding": "{dimension.space.600}" - }, - "footer": { - "padding": "0 {dimension.space.600} {dimension.space.600} {dimension.space.600} " - } - }, - "fileupload": { - "extend": { - "extDragNdrop": { - "background": "{color.background.surface.canvas}", - "borderRadius": "{dimension.radius.300}", - "iconSize": "{dimension.size.500}", - "padding": "{dimension.space.400}", - "info": { - "gap": "{dimension.space.100}" - } - }, - "extFile": { - "iconSize": "{dimension.size.350}" - }, - "extContent": { - "borderRadius": "{dimension.radius.300}", - "highlightBorderDefault": "{color.border.default}" - } - }, - "colorScheme": { - "light": { - "header": { - "background": "{color.background.surface.canvas}", - "color": "{color.text.default}" - } - } - }, - "root": { - "background": "{color.background.surface.raised}", - "borderColor": "{color.border.subtle}", - "color": "{color.text.default}", - "borderRadius": "{dimension.radius.300}", - "transitionDuration": "{dimension.duration.200}" - }, - "header": { - "borderColor": "{color.border.subtle}", - "borderWidth": "0rem", - "padding": "0rem", - "borderRadius": "0rem", - "gap": "{dimension.space.200}" - }, - "content": { - "highlightBorderColor": "{color.border.strong}", - "padding": "0rem", - "gap": "{dimension.space.200}" - }, - "file": { - "padding": "{dimension.space.200}", - "gap": "{dimension.space.200}", - "borderColor": "{color.border.default}", - "info": { - "gap": "{dimension.space.100}" - } - }, - "fileList": { - "gap": "{dimension.space.200}" - }, - "progressbar": { - "height": "{dimension.size.200}" - }, - "basic": { - "gap": "{dimension.space.200}" - } - }, - "floatlabel": { - "extend": { - "height": "{dimension.size.800}", - "iconSize": "{dimension.size.350}" - }, - "root": { - "color": "{color.text.muted}", - "focusColor": "{color.text.muted}", - "activeColor": "{color.text.muted}", - "invalidColor": "{color.text.danger}", - "transitionDuration": "{dimension.duration.200}", - "positionX": "{dimension.space.300}", - "positionY": "{dimension.space.300}", - "fontWeight": "{typography.fontWeight.regular}", - "active": { - "fontSize": "{typography.fontSize.100}", - "fontWeight": "{typography.fontWeight.regular}" - } - }, - "over": { - "active": { - "top": "{dimension.space.400}" - } - }, - "in": { - "input": { - "paddingTop": "{dimension.space.700}", - "paddingBottom": "{dimension.space.300}" - }, - "active": { - "top": "{dimension.space.300}" - } - }, - "on": { - "borderRadius": "0rem", - "active": { - "padding": "0 {dimension.space.100}", - "background": "{color.background.surface.ground}" - } - } - }, - "galleria": { - "extend": { - "backdrop": "{color.background.scrim.modal}" - }, - "colorScheme": { - "light": { - "thumbnailContent": { - "background": "{color.background.neutral.subtleHover}" - }, - "thumbnailNavButton": { - "hoverBackground": "{color.background.translucent.light.default}", - "color": "{color.text.default}", - "hoverColor": "{color.text.hover.default}" - }, - "indicatorButton": { - "background": "{color.text.disabled}", - "hoverBackground": "{color.text.hover.subtle}" - } - } - }, - "root": { - "borderWidth": "{dimension.size.100}", - "borderColor": "{color.border.subtle}", - "borderRadius": "{dimension.radius.300}", - "transitionDuration": "{dimension.duration.200}" - }, - "navButton": { - "background": "{color.background.transparent}", - "hoverBackground": "{color.background.translucent.light.default}", - "color": "{color.text.onBold}", - "hoverColor": "{color.text.onBold}", - "size": "{dimension.size.800}", - "gutter": "{dimension.space.200}", - "prev": { - "borderRadius": "{dimension.radius.200}" - }, - "next": { - "borderRadius": "{dimension.radius.200}" - }, - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - }, - "navIcon": { - "size": "{dimension.size.500}" - }, - "thumbnailsContent": { - "padding": "{dimension.space.100}" - }, - "thumbnailNavButton": { - "size": "{dimension.size.500}", - "borderRadius": "{dimension.radius.300}", - "gutter": "{dimension.space.200}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - }, - "thumbnailNavButtonIcon": { - "size": "{dimension.size.300}" - }, - "caption": { - "background": "{color.background.translucent.light.strong}", - "color": "{color.text.default}", - "padding": "{dimension.space.200}" - }, - "indicatorList": { - "gap": "{dimension.space.200}", - "padding": "{dimension.space.400}" - }, - "indicatorButton": { - "width": "{dimension.size.200}", - "height": "{dimension.size.200}", - "activeBackground": "{color.border.strong}", - "borderRadius": "{dimension.radius.300}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - }, - "insetIndicatorList": { - "background": "{color.background.translucent.dark.default}" - }, - "insetIndicatorButton": { - "background": "{color.background.translucent.light.subtle}", - "hoverBackground": "{color.background.translucent.light.default}", - "activeBackground": "{color.background.translucent.light.strong}" - }, - "closeButton": { - "size": "{dimension.size.800}", - "gutter": "{dimension.space.200}", - "background": "{color.background.translucent.light.subtle}", - "hoverBackground": "{color.background.translucent.light.default}", - "color": "{color.text.onBold}", - "hoverColor": "{color.text.onBold}", - "borderRadius": "{dimension.radius.400}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - }, - "closeButtonIcon": { - "size": "{dimension.size.500}" - } - }, - "inputgroup": { - "extend": { - "borderWidth": "{dimension.borderWidth.100}", - "iconSize": "{dimension.size.300}" - }, - "colorScheme": { - "light": { - "addon": { - "background": "{color.background.surface.ground}", - "borderColor": "{color.border.default}", - "color": "{color.text.muted}" - } - } - }, - "addon": { - "borderRadius": "{dimension.radius.300}", - "padding": "{dimension.space.300}", - "minWidth": "{dimension.size.600}" - } - }, - "inputnumber": { - "extend": { - "borderWidth": "{dimension.borderWidth.100}", - "extButton": { - "height": "{dimension.size.600}", - "iconSize": "{dimension.size.300}" - } - }, - "colorScheme": { - "light": { - "button": { - "background": "{color.background.surface.raised}", - "hoverBackground": "{color.background.surface.hover.section}", - "activeBackground": "{color.background.transparent}", - "borderColor": "{color.border.default}", - "hoverBorderColor": "{color.border.default}", - "activeBorderColor": "{color.border.default}", - "color": "{color.text.default}", - "hoverColor": "{color.text.hover.default}", - "activeColor": "{color.text.default}" - } - } - }, - "transitionDuration": { - "transitionDuration": "{dimension.duration.200}" - }, - "button": { - "width": "{dimension.size.600}", - "borderRadius": "{dimension.radius.300}", - "verticalPadding": "{dimension.space.300}" - } - }, - "inputotp": { - "extend": { - "height": "{dimension.size.600}", - "borderWidth": "{dimension.borderWidth.100}" - }, - "root": { - "gap": "{dimension.space.200}" - }, - "input": { - "width": "{dimension.size.700}" - }, - "sm": { - "width": "0rem" - }, - "lg": { - "width": "0rem" - } - }, - "inputtext": { - "extend": { - "readonlyBackground": "{color.background.neutral.subtleHover}", - "iconSize": "{dimension.size.300}", - "borderWidth": "{dimension.borderWidth.100}", - "extXlg": { - "fontSize": "{typography.fontSize.300}", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.600}" - } - }, - "root": { - "background": "{color.background.surface.ground}", - "disabledBackground": "{color.background.disabled}", - "filledBackground": "{color.background.surface.ground}", - "filledHoverBackground": "{color.background.surface.ground}", - "filledFocusBackground": "{color.background.surface.ground}", - "borderColor": "{color.border.default}", - "hoverBorderColor": "{color.border.brand}", - "focusBorderColor": "{color.border.brand}", - "invalidBorderColor": "{color.border.danger}", - "color": "{color.text.default}", - "disabledColor": "{color.text.muted}", - "placeholderColor": "{color.text.muted}", - "invalidPlaceholderColor": "{color.text.danger}", - "shadow": "0", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.300}", - "borderRadius": "{dimension.radius.300}", - "transitionDuration": "{dimension.duration.200}", - "sm": { - "fontSize": "{typography.fontSize.300}", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.200}" - }, - "lg": { - "fontSize": "{typography.fontSize.300}", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.400}" - }, - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "0" - } - } - }, - "listbox": { - "extend": { - "extOption": { - "label": { - "gap": "{dimension.space.100}" - }, - "caption": { - "color": "{color.text.muted}", - "stripedColor": "{color.text.muted}" - }, - "gap": "{dimension.space.200}" - } - }, - "colorScheme": { - "light": { - "option": { - "stripedBackground": "{color.background.neutral.subtle}" - } - } - }, - "root": { - "background": "{color.background.surface.ground}", - "disabledBackground": "{color.background.disabled}", - "borderColor": "{color.border.default}", - "invalidBorderColor": "{color.border.danger}", - "color": "{color.icon.default}", - "disabledColor": "{color.text.muted}", - "shadow": "0", - "borderRadius": "{dimension.radius.300}", - "transitionDuration": "{dimension.duration.200}" - }, - "list": { - "padding": "{dimension.space.100}", - "gap": "{dimension.space.100}", - "header": { - "padding": "{dimension.space.400} {dimension.space.400} 0 {dimension.space.400}" - } - }, - "option": { - "focusBackground": "{color.background.surface.hover.section}", - "selectedBackground": "{color.border.strong}", - "selectedFocusBackground": "{color.text.hover.default}", - "color": "{color.text.default}", - "focusColor": "{color.text.default}", - "selectedColor": "{color.text.onBold}", - "selectedFocusColor": "{color.text.onBold}", - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "{dimension.radius.200}" - }, - "optionGroup": { - "background": "{color.background.surface.raised}", - "color": "{color.text.muted}", - "fontWeight": "{typography.fontWeight.regular}", - "padding": "{dimension.space.200} {dimension.space.300}" - }, - "checkmark": { - "color": "{color.text.default}", - "gutterStart": "-{dimension.space.200}", - "gutterEnd": "{dimension.space.200}" - }, - "emptyMessage": { - "padding": "{dimension.space.200} {dimension.space.300}" - } - }, - "megamenu": { - "extend": { - "extItem": { - "caption": { - "color": "{color.text.muted}", - "gap": "{dimension.space.100}" - } - }, - "iconSize": "{typography.fontSize.500}" - }, - "colorScheme": { - "light": { - "root": { - "background": "{color.background.transparent}" - } - } - }, - "root": { - "borderColor": "{color.background.transparent}", - "borderRadius": "{dimension.radius.300}", - "color": "{color.text.default}", - "gap": "{dimension.space.100}", - "transitionDuration": "{dimension.duration.200}", - "verticalOrientation": { - "padding": "{dimension.space.100}", - "gap": "{dimension.space.100}" - }, - "horizontalOrientation": { - "padding": "{dimension.space.100}", - "gap": "{dimension.space.100}" - } - }, - "baseItem": { - "borderRadius": "{dimension.radius.300}", - "padding": "{dimension.space.200} {dimension.space.300}" - }, - "item": { - "focusBackground": "{color.background.neutral.subtleHover}", - "activeBackground": "{color.border.strong}", - "color": "{color.text.default}", - "focusColor": "{color.text.default}", - "activeColor": "{color.text.onBold}", - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "{dimension.radius.200}", - "gap": "{dimension.space.200}", - "icon": { - "color": "{color.text.default}", - "focusColor": "{color.text.default}", - "activeColor": "{color.text.onBold}" - } - }, - "overlay": { - "padding": "{dimension.space.100}", - "background": "{color.background.surface.raised}", - "borderColor": "{color.border.subtle}", - "borderRadius": "{dimension.radius.300}", - "color": "{color.text.default}", - "shadow": "{shadow.400}", - "gap": "0rem" - }, - "submenu": { - "padding": "{dimension.space.100}", - "gap": "{dimension.space.100}" - }, - "submenuLabel": { - "fontWeight": "{typography.fontWeight.regular}", - "padding": "{dimension.space.200} {dimension.space.300}", - "background": "{color.background.transparent}", - "color": "{color.text.muted}" - }, - "submenuIcon": { - "size": "{typography.fontSize.500}", - "color": "{color.border.strong}", - "focusColor": "{color.border.strong}", - "activeColor": "{color.text.onBold}" - }, - "separator": { - "borderColor": "{color.border.subtle}" - }, - "mobileButton": { - "borderRadius": "{dimension.radius.200}", - "size": "{dimension.size.500}", - "color": "{color.text.default}", - "hoverColor": "{color.text.hover.default}", - "hoverBackground": "{color.background.surface.hover.section}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - } - }, - "menu": { - "extend": { - "paddingX": "0.25rem", - "iconSize": "{typography.fontSize.500}", - "paddingY": "0.25rem", - "extItem": { - "caption": { - "gap": "{dimension.space.100}" - }, - "activeBackground": "{color.border.strong}", - "activeColor": "{color.text.onBold}" - } - }, - "colorScheme": { - "light": { - "extend": { - "extItem": { - "caption": { - "color": "{color.text.muted}" - }, - "icon": { - "activeColor": "{color.text.onBold}" - } - } - }, - "root": { - "background": "{color.background.surface.raised}", - "borderColor": "{color.border.subtle}", - "color": "{color.text.default}" - }, - "item": { - "focusBackground": "{color.background.neutral.subtleHover}", - "color": "{color.text.default}", - "focusColor": "{color.text.default}", - "icon": { - "color": "{color.text.default}", - "focusColor": "{color.text.default}" - } - } - } - }, - "root": { - "borderRadius": "{dimension.radius.300}", - "shadow": "{shadow.400}", - "transitionDuration": "{dimension.duration.200}" - }, - "list": { - "padding": "{dimension.space.100}", - "gap": "{dimension.space.100}" - }, - "submenuLabel": { - "padding": "{dimension.space.200} {dimension.space.300}", - "fontWeight": "{typography.fontWeight.regular}", - "background": "{color.background.transparent}", - "color": "{color.text.muted}" - }, - "separator": { - "borderColor": "{color.border.subtle}" - }, - "item": { - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "{dimension.radius.200}", - "gap": "{dimension.space.200}" - } - }, - "menubar": { - "extend": { - "iconSize": "{typography.fontSize.500}", - "extItem": { - "caption": { - "color": "{color.text.muted}", - "gap": "{dimension.space.100}" - } - }, - "extSubmenuLabel": { - "padding": "{dimension.space.200} {dimension.space.300}", - "fontWeight": "{typography.fontWeight.demibold}", - "background": "{color.background.transparent}", - "color": "{color.text.muted}" - } - }, - "colorScheme": { - "light": { - "root": { - "background": "{color.background.transparent}" - } - } - }, - "root": { - "borderColor": "{color.background.transparent}", - "borderRadius": "{dimension.radius.200}", - "color": "{color.text.default}", - "gap": "{dimension.space.100}", - "padding": "{dimension.space.100}", - "transitionDuration": "{dimension.duration.200}" - }, - "baseItem": { - "borderRadius": "{dimension.radius.200}", - "padding": "{dimension.space.200} {dimension.space.300}" - }, - "item": { - "focusBackground": "{color.background.neutral.subtleHover}", - "activeBackground": "{color.border.strong}", - "color": "{color.text.default}", - "focusColor": "{color.text.default}", - "activeColor": "{color.text.onBold}", - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "{dimension.radius.200}", - "gap": "{dimension.space.200}", - "icon": { - "color": "{color.text.default}", - "focusColor": "{color.text.default}", - "activeColor": "{color.text.onBold}" - } - }, - "submenu": { - "padding": "{dimension.space.100}", - "gap": "{dimension.space.100}", - "background": "{color.background.surface.raised}", - "borderColor": "{color.border.subtle}", - "borderRadius": "{dimension.radius.300}", - "shadow": "{shadow.400}", - "mobileIndent": "{dimension.space.300}", - "icon": { - "size": "{typography.fontSize.500}", - "color": "{color.border.strong}", - "focusColor": "{color.border.strong}", - "activeColor": "{color.text.onBold}" - } - }, - "separator": { - "borderColor": "{color.border.subtle}" - }, - "mobileButton": { - "borderRadius": "{dimension.radius.200}", - "size": "{dimension.size.500}", - "color": "{color.text.default}", - "hoverColor": "{color.text.hover.default}", - "hoverBackground": "{color.background.surface.hover.section}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - } - }, - "message": { - "extend": { - "width": "{dimension.overlayWidth.base}", - "extText": { - "gap": "{dimension.space.100}" - }, - "extInfo": { - "color": "{color.background.info.bold}", - "closeButton": { - "color": "{color.background.info.bold}", - "borderColor": "{color.background.info.bold}" - }, - "caption": { - "color": "{color.text.default}" - } - }, - "extAccentLine": { - "width": "{dimension.size.150}" - }, - "extCloseButton": { - "width": "{dimension.size.100}" - }, - "extSuccess": { - "color": "{color.background.brand.bold}", - "closeButton": { - "color": "{color.background.brand.bold}", - "borderColor": "{color.background.brand.bold}" - }, - "caption": { - "color": "{color.text.default}" - } - }, - "extWarn": { - "color": "{color.background.warning.bold}", - "closeButton": { - "color": "{color.background.warning.bold}", - "borderColor": "{color.background.warning.bold}" - }, - "caption": { - "color": "{color.text.default}" - } - }, - "extError": { - "color": "{color.background.danger.bold}", - "closeButton": { - "color": "{color.background.danger.bold}", - "borderColor": "{color.background.danger.bold}" - }, - "caption": { - "color": "{color.text.default}" - } - } - }, - "colorScheme": { - "light": { - "success": { - "background": "{color.background.brand.subtle}", - "borderColor": "{color.background.brand.bold}", - "color": "{color.text.default}", - "shadow": "none", - "outlined": { - "color": "{color.text.default}", - "borderColor": "{color.background.brand.bold}" - }, - "closeButton": { - "hoverBackground": "{color.focusRing.success}", - "focusRing": { - "color": "{color.focusRing.success}", - "shadow": "{shadow.200}" - } - }, - "simple": { - "color": "{color.text.default}" - } - }, - "outlined": { - "root": { - "borderWidth": "0rem" - }, - "closeButton": { - "hoverBackground": "{color.background.transparent}", - "focusRing": { - "color": "{color.focusRing.success}", - "shadow": "{shadow.200}" - } - }, - "outlined": { - "color": "{color.background.transparent}", - "borderColor": "{color.background.transparent}" - }, - "simple": { - "color": "{color.background.transparent}" - } - }, - "simple": { - "content": { - "padding": "0rem" - } - }, - "warn": { - "background": "{color.background.warning.subtle}", - "borderColor": "{color.background.warning.bold}", - "color": "{color.text.default}", - "shadow": "none", - "outlined": { - "color": "{color.text.default}", - "borderColor": "{color.background.warning.bold}" - }, - "closeButton": { - "hoverBackground": "{color.focusRing.warning}", - "focusRing": { - "color": "{color.focusRing.success}", - "shadow": "{shadow.200}" - } - }, - "simple": { - "color": "{color.text.default}" - } - }, - "error": { - "background": "{color.background.danger.subtle}", - "borderColor": "{color.background.danger.bold}", - "color": "{color.text.default}", - "shadow": "none", - "outlined": { - "color": "{color.text.default}", - "borderColor": "{color.background.danger.bold}" - }, - "closeButton": { - "hoverBackground": "{color.focusRing.invalid}", - "focusRing": { - "color": "{color.focusRing.success}", - "shadow": "{shadow.200}" - } - }, - "simple": { - "color": "{color.text.default}" - } - }, - "secondary": { - "borderColor": "{color.background.transparent}", - "shadow": "none", - "closeButton": { - "hoverBackground": "{color.background.transparent}", - "focusRing": { - "color": "{color.focusRing.success}", - "shadow": "{shadow.200}" - } - }, - "simple": { - "color": "{color.background.transparent}" - }, - "outlined": { - "color": "{color.background.transparent}", - "borderColor": "{color.background.transparent}" - } - }, - "contrast": { - "borderColor": "{color.background.transparent}", - "shadow": "none", - "closeButton": { - "hoverBackground": "{color.background.transparent}", - "focusRing": { - "color": "{color.focusRing.success}", - "shadow": "{shadow.200}" - } - }, - "simple": { - "color": "{color.background.transparent}" - }, - "outlined": { - "color": "{color.background.transparent}", - "borderColor": "{color.background.transparent}" - } - }, - "info": { - "background": "{color.background.info.subtle}", - "borderColor": "{color.background.info.bold}", - "color": "{color.text.default}", - "shadow": "none", - "closeButton": { - "hoverBackground": "{color.focusRing.info}", - "focusRing": { - "color": "{color.focusRing.success}", - "shadow": "{shadow.200}" - } - }, - "outlined": { - "color": "{color.text.default}", - "borderColor": "{color.background.info.bold}" - }, - "simple": { - "color": "{color.text.default}" - } - } - } - }, - "root": { - "borderRadius": "{dimension.radius.300}", - "borderWidth": "{dimension.size.100}", - "transitionDuration": "{dimension.duration.200}" - }, - "content": { - "padding": "{dimension.space.400}", - "gap": "{dimension.space.400}", - "sm": { - "padding": "{dimension.space.400}" - }, - "lg": { - "padding": "{dimension.space.400}" - } - }, - "text": { - "fontSize": "{typography.fontSize.300}", - "fontWeight": "{typography.fontWeight.bold}", - "sm": { - "fontSize": "{typography.fontSize.300}" - }, - "lg": { - "fontSize": "{typography.fontSize.300}" - } - }, - "icon": { - "size": "{dimension.size.550}", - "sm": { - "size": "{dimension.size.550}" - }, - "lg": { - "size": "{dimension.size.550}" - } - }, - "closeButton": { - "width": "{dimension.size.500}", - "height": "{dimension.size.500}", - "borderRadius": "{dimension.radius.300}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "offset": "{dimension.focusRing.offset}" - } - }, - "closeIcon": { - "size": "{dimension.size.300}", - "sm": { - "size": "{dimension.size.300}" - }, - "lg": { - "size": "{dimension.size.300}" - } - } - }, - "metergroup": { - "extend": { - "extLabel": { - "color": "{color.text.muted}" - } - }, - "root": { - "borderRadius": "{dimension.radius.300}", - "gap": "{dimension.space.300}" - }, - "meters": { - "size": "{dimension.size.200}", - "background": "{color.border.subtle}" - }, - "label": { - "gap": "{dimension.space.100}" - }, - "labelMarker": { - "size": "{dimension.size.200}" - }, - "labelIcon": { - "size": "{dimension.size.300}" - }, - "labelList": { - "verticalGap": "{dimension.space.200}", - "horizontalGap": "{dimension.space.300}" - } - }, - "multiselect": { - "colorScheme": { - "overlay": { - "background": "{color.background.surface.raised}", - "borderColor": "{color.border.subtle}", - "color": "{color.text.default}" - }, - "option": { - "focusBackground": "{color.background.surface.hover.section}", - "selectedBackground": "{color.border.strong}", - "selectedFocusBackground": "{color.text.hover.default}", - "color": "{color.text.default}", - "focusColor": "{color.text.default}", - "selectedColor": "{color.text.onBold}", - "selectedFocusColor": "{color.text.onBold}" - }, - "root": { - "background": "{color.background.surface.ground}", - "disabledBackground": "{color.background.disabled}", - "filledBackground": "{color.background.surface.ground}", - "filledHoverBackground": "{color.background.surface.ground}", - "filledFocusBackground": "{color.background.surface.ground}", - "borderColor": "{color.border.default}", - "hoverBorderColor": "{color.border.brand}", - "focusBorderColor": "{color.border.brand}", - "invalidBorderColor": "{color.border.danger}", - "color": "{color.icon.default}", - "disabledColor": "{color.text.muted}", - "placeholderColor": "{color.text.muted}", - "invalidPlaceholderColor": "{color.text.danger}", - "focusRing": { - "color": "{color.focusRing.success}" - } - }, - "dropdown": { - "color": "{color.text.muted}" - }, - "optionGroup": { - "background": "{color.background.surface.raised}", - "color": "{color.text.muted}" - }, - "clearIcon": { - "color": "{color.text.muted}" - } - }, - "extend": { - "paddingX": "0.3571rem", - "paddingY": "0.3571rem", - "borderWidth": "{dimension.borderWidth.100}", - "iconSize": "{dimension.size.300}", - "width": "{dimension.overlayWidth.narrow}", - "readonlyBackground": "{color.background.neutral.subtleHover}" - }, - "root": { - "shadow": "0", - "paddingX": "{dimension.space.400}", - "paddingY": "{dimension.space.400}", - "borderRadius": "{dimension.radius.300}", - "transitionDuration": "{dimension.duration.200}", - "sm": { - "fontSize": "{typography.fontSize.300}", - "paddingX": "{dimension.space.200}", - "paddingY": "{dimension.space.200}" - }, - "lg": { - "fontSize": "{typography.fontSize.300}", - "paddingX": "{dimension.space.400}", - "paddingY": "{dimension.space.400}" - }, - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "offset": "{dimension.focusRing.offset}", - "shadow": "0" - } - }, - "dropdown": { - "width": "{dimension.size.600}" - }, - "overlay": { - "borderRadius": "{dimension.radius.300}", - "shadow": "{shadow.400}" - }, - "list": { - "padding": "{dimension.space.100}", - "header": { - "padding": "{dimension.space.400} {dimension.space.400} 0 {dimension.space.400}" - }, - "gap": "{dimension.space.100}" - }, - "chip": { - "borderRadius": "{dimension.radius.200}" - }, - "option": { - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "{dimension.radius.200}", - "gap": "{dimension.space.200}" - }, - "optionGroup": { - "fontWeight": "{typography.fontWeight.demibold}", - "padding": "{dimension.space.200} {dimension.space.300}" - }, - "emptyMessage": { - "padding": "{dimension.space.200} {dimension.space.300}" - } - }, - "paginator": { - "root": { - "padding": "0 {dimension.space.200}", - "gap": "{dimension.space.200}", - "borderRadius": "{dimension.radius.300}", - "background": "{color.background.transparent}", - "color": "{color.text.default}", - "transitionDuration": "{dimension.duration.200}" - }, - "currentPageReport": { - "color": "{color.text.muted}" - }, - "navButton": { - "background": "{color.background.transparent}", - "hoverBackground": "{color.background.surface.hover.section}", - "selectedBackground": "{color.border.strong}", - "color": "{color.text.default}", - "hoverColor": "{color.text.hover.default}", - "selectedColor": "{color.text.onBold}", - "width": "{dimension.size.600}", - "height": "{dimension.size.600}", - "borderRadius": "{dimension.radius.300}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "focus": "{shadow.200}" - } - }, - "jumpToPageInput": { - "maxWidth": "{dimension.size.900}" - } - }, - "panelmenu": { - "extend": { - "extPanel": { - "gap": "{dimension.space.100}" - }, - "iconSize": "{typography.fontSize.500}", - "extItem": { - "activeBackground": "{color.border.strong}", - "activeColor": "{color.text.onBold}", - "caption": { - "color": "{color.text.muted}", - "gap": "{dimension.space.100}" - } - } - }, - "root": { - "gap": "{dimension.space.100}", - "transitionDuration": "{dimension.duration.200}" - }, - "panel": { - "background": "{color.background.transparent}", - "borderColor": "{color.background.transparent}", - "borderWidth": "{dimension.borderWidth.100}", - "color": "{color.text.default}", - "padding": "{dimension.space.100}", - "borderRadius": "{dimension.radius.300}", - "first": { - "borderWidth": "{dimension.borderWidth.100} {dimension.borderWidth.100} 0 {dimension.borderWidth.100}", - "topBorderRadius": "{dimension.radius.300}" - }, - "last": { - "borderWidth": "0 {dimension.borderWidth.100} {dimension.borderWidth.100} {dimension.borderWidth.100}", - "topBorderRadius": "{dimension.radius.300}" - } - }, - "item": { - "focusBackground": "{color.background.neutral.subtleHover}", - "color": "{color.text.default}", - "focusColor": "{color.text.default}", - "gap": "{dimension.space.200}", - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "{dimension.radius.200}", - "icon": { - "color": "{color.text.default}", - "focusColor": "{color.text.default}" - } - }, - "submenu": { - "indent": "{dimension.space.600}" - }, - "separator": { - "borderColor": "{color.border.subtle}" - }, - "submenuIcon": { - "color": "{color.border.strong}", - "focusColor": "{color.border.strong}" - } - }, - "password": { - "extend": { - "borderWidth": "{dimension.borderWidth.100}" - }, - "colorScheme": { - "light": { - "strength": { - "weakBackground": "{color.background.danger.bold}", - "mediumBackground": "{color.background.warning.bold}", - "strongBackground": "{color.background.brand.boldHover}" - }, - "icon": { - "color": "{color.text.muted}" - } - }, - "dark": { - "strength": { - "weakBackground": "{color.background.danger.bold}", - "mediumBackground": "{color.background.warning.bold}", - "strongBackground": "{color.background.brand.boldHover}" - }, - "icon": { - "color": "{color.text.muted}" - } - } - }, - "meter": { - "background": "{color.border.subtle}", - "borderRadius": "{dimension.radius.300}", - "height": "{dimension.size.200}" - }, - "overlay": { - "background": "{color.background.surface.raised}", - "borderColor": "{color.border.default}", - "borderRadius": "{dimension.radius.200}", - "color": "{color.text.default}", - "padding": "{dimension.space.300}", - "shadow": "{shadow.400}" - }, - "content": { - "gap": "{dimension.space.200}" - } - }, - "popover": { - "extend": { - "borderWidth": "{dimension.borderWidth.100}", - "arrow": { - "width": "{dimension.size.250}", - "height": "{dimension.size.200}" - } - }, - "root": { - "background": "{color.background.surface.raised}", - "borderColor": "{color.border.default}", - "color": "{color.text.default}", - "borderRadius": "{dimension.radius.200}", - "shadow": "{shadow.400}", - "gutter": "{dimension.space.300}", - "arrowOffset": "{dimension.space.500}", - "arrowLeft": "0px" - }, - "content": { - "padding": "{dimension.space.300}" - } - }, - "progressbar": { - "label": { - "color": "{color.text.staticDark}", - "fontSize": "{typography.fontSize.100}", - "fontWeight": "{typography.fontWeight.regular}" - }, - "root": { - "background": "{color.border.subtle}", - "borderRadius": "{dimension.radius.300}", - "height": "{dimension.size.300}" - }, - "value": { - "background": "{color.background.brand.bold}" - } - }, - "progressspinner": { - "extend": { - "small": "{dimension.size.300}", - "medium": "{dimension.size.500}", - "large": "{dimension.size.700}", - "xlarge": "{dimension.size.800}" - }, - "colorScheme": { - "light": { - "root": { - "colorOne": "{color.background.brand.bold}", - "colorTwo": "{color.background.info.bold}", - "colorThree": "{color.background.danger.bold}", - "colorFour": "{color.background.warning.bold}" - } - } - }, - "root": { - "borderWidth": "{dimension.size.150}" - } - }, - "radiobutton": { - "root": { - "width": "{dimension.size.400}", - "height": "{dimension.size.400}", - "background": "{color.background.surface.ground}", - "checkedBackground": "{color.border.strong}", - "checkedHoverBackground": "{color.background.surface.inverse}", - "disabledBackground": "{color.background.disabled}", - "filledBackground": "{color.background.surface.ground}", - "borderColor": "{color.border.default}", - "hoverBorderColor": "{color.border.strong}", - "focusBorderColor": "{color.border.default}", - "checkedBorderColor": "{color.border.strong}", - "checkedHoverBorderColor": "{color.border.strong}", - "checkedFocusBorderColor": "{color.border.strong}", - "checkedDisabledBorderColor": "{color.border.default}", - "invalidBorderColor": "{color.border.danger}", - "shadow": "0", - "transitionDuration": "{dimension.duration.200}" - }, - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - }, - "sm": { - "width": "{dimension.size.300}", - "height": "{dimension.size.300}" - }, - "lg": { - "width": "{dimension.size.350}", - "height": "{dimension.size.350}" - }, - "icon": { - "size": "0.7rem", - "checkedColor": "{color.text.onBold}", - "checkedHoverColor": "{color.text.onBold}", - "disabledColor": "{color.text.muted}", - "sm": { - "size": "{dimension.size.200}" - }, - "lg": { - "size": "{dimension.size.300}" - } - } - }, - "rating": { - "root": { - "gap": "{dimension.space.200}", - "transitionDuration": "{dimension.duration.200}" - }, - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - }, - "icon": { - "size": "{dimension.size.400}", - "color": "{color.background.neutral.bold}", - "hoverColor": "{color.background.warning.bold}", - "activeColor": "{color.background.warning.bold}" - } - }, - "ripple": { - "colorScheme": { - "light": { - "root": { - "background": "rgba(255, 255, 255, 0.0100)" - } - } - } - }, - "scrollpanel": { - "colorScheme": { - "light": { - "bar": { - "background": "{color.text.disabled}" - } - } - }, - "root": { - "transitionDuration": "{dimension.duration.200}" - }, - "bar": { - "size": "{dimension.size.200}", - "borderRadius": "{dimension.radius.200}", - "focusRing": { - "width": "0rem", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - } - }, - "select": { - "extend": { - "extOption": { - "background": "{color.background.surface.raised}", - "gap": "{dimension.space.200}" - }, - "extOptionGroup": { - "gap": "{dimension.space.200}" - }, - "readonlyBackground": "{color.background.neutral.subtleHover}", - "borderWidth": "{dimension.borderWidth.100}", - "iconSize": "{dimension.size.300}" - }, - "root": { - "background": "{color.background.surface.ground}", - "disabledBackground": "{color.background.disabled}", - "filledBackground": "{color.background.surface.ground}", - "filledHoverBackground": "{color.background.surface.ground}", - "filledFocusBackground": "{color.background.surface.ground}", - "borderColor": "{color.border.default}", - "hoverBorderColor": "{color.border.brand}", - "focusBorderColor": "{color.border.brand}", - "invalidBorderColor": "{color.border.danger}", - "color": "{color.text.default}", - "disabledColor": "{color.text.muted}", - "placeholderColor": "{color.text.muted}", - "invalidPlaceholderColor": "{color.text.danger}", - "shadow": "0", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.300}", - "borderRadius": "{dimension.radius.300}", - "transitionDuration": "{dimension.duration.200}", - "sm": { - "fontSize": "{typography.fontSize.300}", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.200}" - }, - "lg": { - "fontSize": "{typography.fontSize.300}", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.400}" - }, - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "0" - } - }, - "dropdown": { - "width": "{dimension.size.600}", - "color": "{color.icon.default}" - }, - "overlay": { - "background": "{color.background.surface.raised}", - "borderColor": "{color.border.subtle}", - "borderRadius": "{dimension.radius.300}", - "color": "{color.text.default}", - "shadow": "{shadow.400}" - }, - "list": { - "padding": "{dimension.space.100}", - "gap": "{dimension.space.100}", - "header": { - "padding": "{dimension.space.400} {dimension.space.400} 0 {dimension.space.400}" - } - }, - "option": { - "focusBackground": "{color.background.surface.hover.section}", - "selectedBackground": "{color.border.strong}", - "selectedFocusBackground": "{color.text.hover.default}", - "color": "{color.text.default}", - "focusColor": "{color.text.default}", - "selectedColor": "{color.text.onBold}", - "selectedFocusColor": "{color.text.onBold}", - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "{dimension.radius.200}" - }, - "optionGroup": { - "background": "{color.background.surface.raised}", - "color": "{color.text.muted}", - "fontWeight": "{typography.fontWeight.regular}", - "padding": "{dimension.space.200} {dimension.space.300}" - }, - "clearIcon": { - "color": "{color.icon.default}" - }, - "checkmark": { - "color": "{color.text.default}", - "gutterStart": "-{dimension.space.200}", - "gutterEnd": "{dimension.space.200}" - }, - "emptyMessage": { - "padding": "{dimension.space.200} {dimension.space.300}" - } - }, - "selectbutton": { - "extend": { - "gap": "{dimension.space.100}", - "paddingX": "{dimension.space.100}", - "paddingY": "{dimension.space.100}", - "checkedBackground": "{color.background.surface.ground}", - "iconSize": { - "sm": "{dimension.size.300}", - "md": "{dimension.size.350}", - "lg": "{dimension.size.400}", - "xlg": "{dimension.size.450}" - }, - "checkedBorderColor": "{color.background.surface.ground}", - "checkedColor": "{color.icon.default}", - "ext": { - "borderRadius": "{dimension.radius.200}" - } - }, - "colorScheme": { - "light": { - "root": { - "invalidBorderColor": "{color.border.danger}" - }, - "extend": { - "background": "{color.background.disabled}" - } - } - }, - "root": { - "borderRadius": "{dimension.radius.300}" - } - }, - "skeleton": { - "extend": { - "minWidth": "{dimension.size.500}", - "height": "{dimension.size.500}" - }, - "colorScheme": { - "light": { - "root": { - "background": "{color.background.disabled}", - "animationBackground": "{color.background.neutral.subtleHover}" - } - } - }, - "root": { - "borderRadius": "{dimension.radius.300}" - } - }, - "slider": { - "colorScheme": { - "handle": { - "content": { - "background": "{color.background.surface.canvas}" - } - } - }, - "root": { - "transitionDuration": "{dimension.duration.200}" - }, - "track": { - "background": "{color.border.subtle}", - "borderRadius": "{dimension.radius.300}", - "size": "{dimension.size.150}" - }, - "range": { - "background": "{color.border.strong}" - }, - "handle": { - "width": "{dimension.size.350}", - "height": "{dimension.size.350}", - "borderRadius": "{dimension.radius.max}", - "background": "{color.border.strong}", - "hoverBackground": "{color.border.strong}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - }, - "content": { - "borderRadius": "{dimension.radius.max}", - "hoverBackground": "{color.border.strong}", - "width": "{dimension.size.250}", - "height": "{dimension.size.250}", - "shadow": "none" - } - } - }, - "splitter": { - "colorScheme": { - "light": { - "handle": { - "background": "{color.border.strong}" - } - } - }, - "gutter": { - "background": "{color.background.neutral.subtleHover}" - }, - "root": { - "background": "{color.background.surface.raised}", - "borderColor": "{color.border.subtle}", - "color": "{color.text.default}", - "transitionDuration": "{dimension.duration.200}" - }, - "handle": { - "size": "{dimension.size.150}", - "borderRadius": "{dimension.radius.300}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - } - }, - "stepper": { - "extend": { - "extCaption": { - "gap": "{dimension.space.100}" - }, - "extStepNumber": { - "invalidBackground": "{color.border.danger}", - "invalidColor": "{color.text.dangerStrong}", - "invalidBorderColor": "{color.border.danger}", - "borderWidth": "{dimension.size.100}", - "iconSize": "{dimension.size.400}" - } - }, - "root": { - "transitionDuration": "{dimension.duration.200}" - }, - "separator": { - "background": "{color.border.subtle}", - "activeBackground": "{color.border.strong}", - "margin": "0 0 0 1.625rem", - "size": "{dimension.size.100}" - }, - "step": { - "padding": "{dimension.space.200}", - "gap": "{dimension.space.200}" - }, - "stepHeader": { - "padding": "0rem", - "borderRadius": "0rem", - "gap": "{dimension.space.200}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - }, - "stepTitle": { - "color": "{color.text.default}", - "activeColor": "{color.text.default}", - "fontWeight": "{typography.fontWeight.regular}" - }, - "stepNumber": { - "background": "{color.background.surface.raised}", - "activeBackground": "{color.background.brand.bold}", - "borderColor": "{color.border.subtle}", - "activeBorderColor": "{color.background.brand.bold}", - "color": "{color.text.default}", - "activeColor": "{color.text.staticDark}", - "size": "{dimension.size.400}", - "fontSize": "{typography.fontSize.300}", - "fontWeight": "{typography.fontWeight.bold}", - "borderRadius": "{dimension.radius.max}", - "shadow": "none" - }, - "steppanels": { - "padding": "{dimension.space.400}" - }, - "steppanel": { - "background": "{color.background.surface.raised}", - "color": "{color.text.default}", - "padding": "0rem", - "indent": "0rem" - } - }, - "steps": { - "itemLink": { - "gap": "{dimension.space.200}" - }, - "itemLabel": { - "fontWeight": "{typography.fontWeight.regular}" - }, - "itemNumber": { - "background": "{color.background.surface.raised}", - "size": "{dimension.size.500}", - "fontSize": "{typography.fontSize.300}", - "fontWeight": "{typography.fontWeight.bold}", - "borderRadius": "{dimension.radius.max}", - "shadow": "none" - } - }, - "tabs": { - "colorScheme": { - "light": { - "navButton": { - "shadow": "none" - }, - "tab": { - "background": "{color.background.transparent}", - "hoverBackground": "{color.background.transparent}", - "activeBackground": "{color.background.transparent}" - } - } - }, - "root": { - "transitionDuration": "{dimension.duration.200}" - }, - "tablist": { - "borderWidth": "0 0 {dimension.size.100} 0", - "background": "{color.background.transparent}", - "borderColor": "{color.border.subtle}" - }, - "tab": { - "borderWidth": "0", - "borderColor": "{color.border.subtle}", - "hoverBorderColor": "{color.border.subtle}", - "activeBorderColor": "{color.border.inverse}", - "color": "{color.text.muted}", - "hoverColor": "{color.text.default}", - "activeColor": "{color.text.default}", - "padding": "{dimension.space.400}", - "fontWeight": "{typography.fontWeight.demibold}", - "margin": "0", - "gap": "{dimension.space.200}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - }, - "tabpanel": { - "background": "{color.background.transparent}", - "color": "{color.text.default}", - "padding": "{dimension.space.400}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - }, - "navButton": { - "background": "{color.background.surface.raised}", - "color": "{color.text.default}", - "hoverColor": "{color.text.hover.default}", - "width": "{dimension.size.400}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - } - }, - "activeBar": { - "height": "0.18rem", - "bottom": "-0.18rem", - "background": "{color.text.default}" - } - }, - "toast": { - "extend": { - "extInfo": { - "color": "{color.background.info.bold}", - "closeButton": { - "color": "{color.background.info.bold}", - "borderColor": "{color.background.info.bold}" - }, - "caption": { - "color": "{color.text.default}" - } - }, - "extAccentLine": { - "width": "{dimension.size.150}" - }, - "extCloseButton": { - "width": "{dimension.size.100}" - }, - "extSuccess": { - "color": "{color.background.brand.bold}", - "closeButton": { - "color": "{color.background.brand.bold}", - "borderColor": "{color.background.brand.bold}" - }, - "caption": { - "color": "{color.text.default}" - } - }, - "extWarn": { - "color": "{color.background.warning.bold}", - "closeButton": { - "color": "{color.background.warning.bold}", - "borderColor": "{color.background.warning.bold}" - }, - "caption": { - "color": "{color.text.default}" - } - }, - "extError": { - "color": "{color.background.danger.bold}", - "closeButton": { - "color": "{color.background.danger.bold}", - "borderColor": "{color.background.danger.bold}" - }, - "caption": { - "color": "{color.text.default}" - } - } - }, - "colorScheme": { - "light": { - "info": { - "background": "{color.background.info.subtle}", - "borderColor": "{color.background.info.bold}", - "color": "{color.text.default}", - "detailColor": "{color.text.default}", - "shadow": "{shadow.400}", - "closeButton": { - "hoverBackground": "{color.focusRing.info}", - "focusRing": { - "color": "{color.focusRing.success}", - "shadow": "{shadow.200}" - } - } - }, - "success": { - "background": "{color.background.brand.subtle}", - "borderColor": "{color.background.brand.bold}", - "color": "{color.text.default}", - "detailColor": "{color.text.default}", - "shadow": "{shadow.400}", - "closeButton": { - "hoverBackground": "{color.focusRing.success}", - "focusRing": { - "color": "{color.focusRing.success}", - "shadow": "{shadow.200}" - } - } - }, - "warn": { - "background": "{color.background.warning.subtle}", - "borderColor": "{color.background.warning.bold}", - "color": "{color.text.default}", - "detailColor": "{color.text.default}", - "shadow": "{shadow.400}", - "closeButton": { - "hoverBackground": "{color.focusRing.warning}", - "focusRing": { - "color": "{color.focusRing.success}", - "shadow": "none" - } - } - }, - "error": { - "background": "{color.background.danger.subtle}", - "borderColor": "{color.background.danger.bold}", - "color": "{color.text.default}", - "detailColor": "{color.text.default}", - "shadow": "{shadow.400}", - "closeButton": { - "hoverBackground": "{color.focusRing.invalid}", - "focusRing": { - "color": "{color.focusRing.success}", - "shadow": "{shadow.200}" - } - } - }, - "secondary": { - "shadow": "{shadow.400}" - }, - "contrast": { - "shadow": "{shadow.400}" - } - } - }, - "root": { - "width": "{dimension.overlayWidth.base}", - "borderWidth": "{dimension.size.100}", - "borderRadius": "{dimension.radius.300}", - "transitionDuration": "{dimension.duration.200}" - }, - "icon": { - "size": "{dimension.size.550}" - }, - "content": { - "padding": "{dimension.space.400}", - "gap": "{dimension.space.400}" - }, - "text": { - "gap": "{dimension.space.100}" - }, - "summary": { - "fontWeight": "{typography.fontWeight.bold}", - "fontSize": "{typography.fontSize.300}" - }, - "detail": { - "fontWeight": "{typography.fontWeight.regular}", - "fontSize": "{typography.fontSize.200}" - }, - "closeButton": { - "width": "{dimension.size.500}", - "height": "{dimension.size.500}", - "borderRadius": "{dimension.radius.300}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "offset": "{dimension.focusRing.offset}" - } - }, - "closeIcon": { - "size": "{dimension.size.300}" - } - }, - "tag": { - "colorScheme": { - "light": { - "primary": { - "background": "{color.background.brand.bold}", - "color": "{color.text.default}" - }, - "secondary": { - "background": "{color.background.disabled}", - "color": "{color.text.default}" - }, - "success": { - "background": "{color.border.success}", - "color": "{color.text.successStrong}" - }, - "info": { - "background": "{color.border.infoSubtle}", - "color": "{color.text.infoStrong}" - }, - "warn": { - "background": "{color.border.warningSubtle}", - "color": "{color.text.warningStrong}" - }, - "danger": { - "background": "{color.border.dangerSubtle}", - "color": "{color.text.dangerStrong}" - } - } - }, - "root": { - "fontSize": "{typography.fontSize.100}", - "fontWeight": "{typography.fontWeight.regular}", - "padding": "{dimension.space.100} {dimension.space.200}", - "gap": "{dimension.space.100}", - "borderRadius": "{dimension.size.200}", - "roundedBorderRadius": "{dimension.radius.500}" - }, - "icon": { - "size": "{dimension.size.300}" - } - }, - "textarea": { - "extend": { - "readonlyBackground": "{color.background.neutral.subtleHover}", - "borderWidth": "{dimension.borderWidth.100}", - "iconSize": "{dimension.size.300}", - "minHeight": "{dimension.size.900}", - "extXlg": { - "fontSize": "{typography.fontSize.300}", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.500}" - } - }, - "root": { - "background": "{color.background.surface.ground}", - "disabledBackground": "{color.background.disabled}", - "filledBackground": "{color.background.surface.ground}", - "filledHoverBackground": "{color.background.surface.ground}", - "filledFocusBackground": "{color.background.surface.ground}", - "borderColor": "{color.border.default}", - "hoverBorderColor": "{color.border.brand}", - "focusBorderColor": "{color.border.brand}", - "invalidBorderColor": "{color.border.danger}", - "color": "{color.icon.default}", - "disabledColor": "{color.text.muted}", - "placeholderColor": "{color.text.muted}", - "invalidPlaceholderColor": "{color.text.danger}", - "shadow": "0", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.300}", - "borderRadius": "{dimension.radius.300}", - "transitionDuration": "{dimension.duration.200}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "0" - }, - "sm": { - "fontSize": "{typography.fontSize.300}", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.200}" - }, - "lg": { - "fontSize": "{typography.fontSize.300}", - "paddingX": "{dimension.space.300}", - "paddingY": "{dimension.space.400}" - } - } - }, - "tieredmenu": { - "extend": { - "extSubmenu": { - "borderColor": "{color.border.subtle}", - "background": "{color.background.surface.raised}" - }, - "iconSize": "{typography.fontSize.500}", - "extItem": { - "caption": { - "gap": "{dimension.space.100}", - "color": "{color.text.muted}" - } - } - }, - "root": { - "background": "{color.background.surface.raised}", - "borderColor": "{color.background.transparent}", - "color": "{color.text.default}", - "borderRadius": "{dimension.radius.300}", - "shadow": "{shadow.400}", - "transitionDuration": "{dimension.duration.200}" - }, - "list": { - "padding": "{dimension.space.100}", - "gap": "{dimension.space.100}" - }, - "item": { - "focusBackground": "{color.background.neutral.subtleHover}", - "activeBackground": "{color.border.strong}", - "color": "{color.text.default}", - "focusColor": "{color.text.default}", - "activeColor": "{color.text.onBold}", - "padding": "{dimension.space.200} {dimension.space.300}", - "borderRadius": "{dimension.radius.200}", - "gap": "{dimension.space.200}", - "icon": { - "color": "{color.text.default}", - "focusColor": "{color.text.default}", - "activeColor": "{color.text.onBold}" - } - }, - "submenu": { - "mobileIndent": "{dimension.space.300}" - }, - "separator": { - "borderColor": "{color.border.subtle}" - } - }, - "timeline": { - "extend": { - "extEvent": { - "gap": "{dimension.space.100}" - } - }, - "event": { - "minHeight": "{dimension.size.800}" - }, - "vertical": { - "eventContent": { - "padding": "0 {dimension.space.200}" - } - }, - "horizontal": { - "eventContent": { - "padding": "{dimension.space.200} 0" - } - }, - "eventMarker": { - "size": "{dimension.size.300}", - "borderRadius": "{dimension.radius.300}", - "borderWidth": "{dimension.size.150}", - "background": "{color.background.surface.raised}", - "borderColor": "{color.background.brand.bold}", - "content": { - "borderRadius": "{dimension.radius.300}", - "size": "{dimension.size.250}", - "background": "{color.background.transparent}", - "insetShadow": "none" - } - }, - "eventConnector": { - "color": "{color.border.subtle}", - "size": "{dimension.size.100}" - }, - "colorScheme": { - "light": { - "eventMarker": { - "background": "{color.background.surface.raised}", - "borderColor": "{color.background.brand.bold}" - } - }, - "dark": { - "eventMarker": { - "background": "{color.background.surface.raised}", - "borderColor": "{color.background.brand.bold}" - } - } - } - }, - "togglebutton": { - "extend": { - "ext": { - "gap": "{dimension.space.300}" - }, - "iconSize": { - "sm": "{dimension.size.300}", - "md": "{dimension.size.350}", - "lg": "{dimension.size.400}" - }, - "iconOnlyWidth": "{dimension.size.600}", - "hoverBorderColor": "{color.text.disabled}", - "checkedHoverColor": "{color.text.onBold}", - "checkedHoverBackground": "{color.background.surface.inverse}", - "checkedHoverBorderColor": "{color.background.surface.inverse}", - "extXlg": { - "padding": "{dimension.space.500} {dimension.space.600}", - "iconOnlyWidth": "4.0714rem" - }, - "extSm": { - "iconOnlyWidth": "2.1429rem" - }, - "extLg": { - "iconOnlyWidth": "3.5714rem" - } - }, - "colorScheme": { - "light": { - "root": { - "background": "{color.background.disabled}", - "hoverBackground": "{color.text.disabled}", - "borderColor": "{color.background.disabled}", - "color": "{color.text.default}", - "hoverColor": "{color.text.default}", - "checkedBackground": "{color.border.strong}", - "checkedColor": "{color.text.onBold}", - "checkedBorderColor": "{color.border.strong}", - "disabledBackground": "{color.background.disabled}", - "disabledBorderColor": "{color.background.disabled}", - "disabledColor": "{color.text.muted}", - "invalidBorderColor": "{color.border.danger}" - }, - "icon": { - "color": "{color.text.default}", - "hoverColor": "{color.text.default}", - "checkedColor": "{color.text.onBold}", - "disabledColor": "{color.text.muted}" - }, - "content": { - "checkedBackground": "{color.background.transparent}" - } - } - }, - "root": { - "padding": "{dimension.space.200} {dimension.space.400}", - "borderRadius": "{dimension.radius.max}", - "gap": "{dimension.space.200}", - "fontWeight": "{typography.fontWeight.demibold}", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "{shadow.200}" - }, - "sm": { - "fontSize": "{typography.fontSize.200}", - "padding": "{dimension.space.100} {dimension.space.300}" - }, - "lg": { - "fontSize": "{typography.fontSize.500}", - "padding": "{dimension.space.400} {dimension.space.600}" - }, - "transitionDuration": "{dimension.duration.200}" - }, - "content": { - "checkedShadow": "none", - "padding": "0rem", - "borderRadius": "0rem", - "sm": { - "padding": "0rem" - }, - "lg": { - "padding": "0rem" - } - } - }, - "toggleswitch": { - "colorScheme": { - "light": { - "root": { - "background": "{color.text.hover.subtle}", - "hoverBackground": "{color.background.neutral.bold}", - "disabledBackground": "{color.background.disabled}", - "checkedBackground": "{color.border.strong}", - "checkedHoverBackground": "{color.background.surface.inverse}" - }, - "handle": { - "background": "{color.text.staticLight}", - "hoverBackground": "{color.text.staticLight}", - "disabledBackground": "{color.text.muted}", - "checkedBackground": "{color.background.surface.canvas}", - "checkedHoverBackground": "{color.background.surface.canvas}", - "color": "{color.text.default}", - "hoverColor": "{color.text.default}", - "checkedColor": "{color.text.default}", - "checkedHoverColor": "{color.text.default}" - } - } - }, - "root": { - "width": "{dimension.size.600}", - "height": "{dimension.size.400}", - "borderRadius": "{dimension.radius.max}", - "gap": "{dimension.space.100}", - "borderWidth": "{dimension.borderWidth.100}", - "shadow": "none", - "focusRing": { - "width": "{dimension.borderWidth.300}", - "style": "{dimension.focusRing.style}", - "color": "{color.focusRing.success}", - "offset": "{dimension.focusRing.offset}", - "shadow": "0" - }, - "borderColor": "{color.background.transparent}", - "hoverBorderColor": "{color.background.transparent}", - "checkedBorderColor": "{color.background.transparent}", - "checkedHoverBorderColor": "{color.background.transparent}", - "invalidBorderColor": "{color.border.danger}", - "transitionDuration": "{dimension.duration.200}", - "slideDuration": "{dimension.duration.200}" - }, - "handle": { - "borderRadius": "{dimension.radius.max}", - "size": "{dimension.size.300}" - } - }, - "tooltip": { - "colorScheme": { - "light": { - "root": { - "background": "{color.border.strong}", - "color": "{color.text.onBold}" - } - } - }, - "root": { - "maxWidth": "{dimension.overlayWidth.base}", - "gutter": "{dimension.space.100}", - "shadow": "{shadow.400}", - "padding": "{dimension.space.200} {dimension.space.400} ", - "borderRadius": "{dimension.radius.200}" - } - }, - "tree": { - "root": { - "background": "{color.background.surface.raised}", - "color": "{color.text.default}", - "padding": "{dimension.space.400}", - "gap": "{dimension.space.100}", - "indent": "{dimension.space.400}" - }, - "node": { - "padding": "{dimension.space.200} {dimension.space.300}", - "color": "{color.text.default}", - "selectedColor": "{color.text.onBold}", - "gap": "{dimension.space.100}" - }, - "nodeIcon": { - "selectedColor": "{color.text.onBold}" - }, - "nodeToggleButton": { - "borderRadius": "{dimension.radius.100}", - "size": "{dimension.size.450}", - "selectedHoverBackground": "{color.border.strong}" - }, - "loadingIcon": { - "size": "{dimension.size.300}" - }, - "filter": { - "margin": "0 0 {dimension.space.200} 0" - } - }, - "overlaybadge": { - "root": { - "outline": { - "width": "0rem", - "color": "{color.background.transparent}" - } - } - } - } -} \ No newline at end of file diff --git a/src/lib/providers/prime-preset/tokens/tokens.json b/src/lib/providers/prime-preset/tokens/tokens.json index 4f365c88..bb1a3262 100644 --- a/src/lib/providers/prime-preset/tokens/tokens.json +++ b/src/lib/providers/prime-preset/tokens/tokens.json @@ -448,8 +448,9 @@ "light": { "background": { "surface": { - "ground": "{colors.alpha.white.1000}", - "section": "{colors.solid.zinc.50}", + "ground": "{colors.solid.zinc.100}", + "section": "{colors.alpha.white.1000}", + "field": "{colors.alpha.white.1000}", "raised": "{colors.alpha.white.1000}", "overlay": "{colors.alpha.white.1000}", "sunken": "{colors.solid.zinc.100}", @@ -598,6 +599,7 @@ "surface": { "ground": "{colors.solid.zinc.950}", "section": "{colors.solid.zinc.900}", + "field": "{colors.solid.zinc.950}", "raised": "{colors.solid.zinc.900}", "overlay": "{colors.solid.zinc.900}", "sunken": "{colors.solid.zinc.950}", @@ -1001,9 +1003,9 @@ "focusColor": "{chip.colorScheme.light.root.color}" }, "dropdown": { - "background": "{background.surface.ground}", - "hoverBackground": "{background.surface.ground}", - "activeBackground": "{background.surface.ground}", + "background": "{background.surface.field}", + "hoverBackground": "{background.surface.field}", + "activeBackground": "{background.surface.field}", "color": "{text.defaultHover}", "hoverColor": "{text.defaultHover}", "activeColor": "{text.defaultHover}" @@ -1011,11 +1013,11 @@ } }, "root": { - "background": "{background.surface.ground}", + "background": "{background.surface.field}", "disabledBackground": "{background.disabled}", - "filledBackground": "{background.surface.ground}", - "filledHoverBackground": "{background.surface.ground}", - "filledFocusBackground": "{background.surface.ground}", + "filledBackground": "{background.surface.field}", + "filledHoverBackground": "{background.surface.field}", + "filledFocusBackground": "{background.surface.field}", "borderColor": "{border.default}", "hoverBorderColor": "{border.brand}", "focusBorderColor": "{border.brand}", @@ -1808,11 +1810,11 @@ }, "width": "{dimension.size.400}", "height": "{dimension.size.400}", - "background": "{background.surface.ground}", + "background": "{background.surface.field}", "checkedBackground": "{background.selected}", "checkedHoverBackground": "{background.surface.inverse}", "disabledBackground": "{background.disabled}", - "filledBackground": "{background.surface.ground}", + "filledBackground": "{background.surface.field}", "borderColor": "{border.default}", "hoverBorderColor": "{border.strong}", "focusBorderColor": "{border.strong}", @@ -2606,7 +2608,7 @@ "borderRadius": "0rem", "active": { "padding": "0 {dimension.space.100}", - "background": "{background.surface.ground}" + "background": "{background.surface.field}" } } }, @@ -2737,7 +2739,7 @@ "colorScheme": { "light": { "addon": { - "background": "{background.surface.ground}", + "background": "{background.surface.field}", "borderColor": "{border.default}", "color": "{text.muted}" } @@ -2816,11 +2818,11 @@ "fonts_lineHeight_250": "{typography.caption.lineHeight}" }, "root": { - "background": "{background.surface.ground}", + "background": "{background.surface.field}", "disabledBackground": "{background.disabled}", - "filledBackground": "{background.surface.ground}", - "filledHoverBackground": "{background.surface.ground}", - "filledFocusBackground": "{background.surface.ground}", + "filledBackground": "{background.surface.field}", + "filledHoverBackground": "{background.surface.field}", + "filledFocusBackground": "{background.surface.field}", "borderColor": "{border.default}", "hoverBorderColor": "{border.brand}", "focusBorderColor": "{border.brand}", @@ -2876,7 +2878,7 @@ } }, "root": { - "background": "{background.surface.ground}", + "background": "{background.surface.field}", "disabledBackground": "{background.disabled}", "borderColor": "{border.default}", "invalidBorderColor": "{border.danger}", @@ -3480,11 +3482,11 @@ "selectedFocusColor": "{text.onBold}" }, "root": { - "background": "{background.surface.ground}", + "background": "{background.surface.field}", "disabledBackground": "{background.disabled}", - "filledBackground": "{background.surface.ground}", - "filledHoverBackground": "{background.surface.ground}", - "filledFocusBackground": "{background.surface.ground}", + "filledBackground": "{background.surface.field}", + "filledHoverBackground": "{background.surface.field}", + "filledFocusBackground": "{background.surface.field}", "borderColor": "{border.default}", "hoverBorderColor": "{border.brand}", "focusBorderColor": "{border.brand}", @@ -3790,11 +3792,11 @@ "root": { "width": "{dimension.size.400}", "height": "{dimension.size.400}", - "background": "{background.surface.ground}", + "background": "{background.surface.field}", "checkedBackground": "{background.selected}", "checkedHoverBackground": "{background.surface.inverse}", "disabledBackground": "{background.disabled}", - "filledBackground": "{background.surface.ground}", + "filledBackground": "{background.surface.field}", "borderColor": "{border.default}", "hoverBorderColor": "{border.strong}", "focusBorderColor": "{border.default}", @@ -3911,11 +3913,11 @@ "floatlabel_root_fontWeight": "{typography.body.lg.fontWeight}" }, "root": { - "background": "{background.surface.ground}", + "background": "{background.surface.field}", "disabledBackground": "{background.disabled}", - "filledBackground": "{background.surface.ground}", - "filledHoverBackground": "{background.surface.ground}", - "filledFocusBackground": "{background.surface.ground}", + "filledBackground": "{background.surface.field}", + "filledHoverBackground": "{background.surface.field}", + "filledFocusBackground": "{background.surface.field}", "borderColor": "{border.default}", "hoverBorderColor": "{border.brand}", "focusBorderColor": "{border.brand}", @@ -3999,14 +4001,14 @@ "gap": "{dimension.space.100}", "paddingX": "{dimension.space.100}", "paddingY": "{dimension.space.100}", - "checkedBackground": "{background.surface.ground}", + "checkedBackground": "{background.surface.field}", "iconSize": { "sm": "{dimension.size.300}", "md": "{dimension.size.350}", "lg": "{dimension.size.400}", "xlg": "{dimension.size.450}" }, - "checkedBorderColor": "{background.surface.ground}", + "checkedBorderColor": "{background.surface.field}", "checkedColor": "{text.defaultHover}", "ext": { "borderRadius": "{dimension.radius.200}" @@ -4515,11 +4517,11 @@ "form_padding_700": "{dimension.space.700}" }, "root": { - "background": "{background.surface.ground}", + "background": "{background.surface.field}", "disabledBackground": "{background.disabled}", - "filledBackground": "{background.surface.ground}", - "filledHoverBackground": "{background.surface.ground}", - "filledFocusBackground": "{background.surface.ground}", + "filledBackground": "{background.surface.field}", + "filledHoverBackground": "{background.surface.field}", + "filledFocusBackground": "{background.surface.field}", "borderColor": "{border.default}", "hoverBorderColor": "{border.brand}", "focusBorderColor": "{border.brand}", From 69cb6f58e660f94874bbd36ff4d686edeba1661a Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 22 Jun 2026 21:21:31 +0800 Subject: [PATCH 16/46] chore: ignore .worktrees/ --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index e535eb88..1f6be103 100644 --- a/.gitignore +++ b/.gitignore @@ -59,3 +59,4 @@ src/assets/components/themes .playwright-mcp/* .claude/* +.worktrees/ From 42fed013a0751e00447a90e1f06ab1a3b5ee1b79 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 22 Jun 2026 21:26:13 +0800 Subject: [PATCH 17/46] docs(figma-cc): add spec and implementation plan --- .../2026-06-22-figma-code-connect-static.md | 370 ++++++++++++++++++ ...-06-22-figma-code-connect-static-design.md | 181 +++++++++ 2 files changed, 551 insertions(+) create mode 100644 docs/superpowers/plans/2026-06-22-figma-code-connect-static.md create mode 100644 docs/superpowers/specs/2026-06-22-figma-code-connect-static-design.md diff --git a/docs/superpowers/plans/2026-06-22-figma-code-connect-static.md b/docs/superpowers/plans/2026-06-22-figma-code-connect-static.md new file mode 100644 index 00000000..88918652 --- /dev/null +++ b/docs/superpowers/plans/2026-06-22-figma-code-connect-static.md @@ -0,0 +1,370 @@ +# Static Figma Code Connect — Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Создать статический файловый аналог Figma Code Connect для `@cdek-it/angular-ui-kit`, дающий LLM контракт Figma↔код без рантайма CLI. + +**Architecture:** Колокация `.figma.md` рядом с каждым компонентом + глобальные артефакты в `src/lib/figma-code-connect/`. Формат — Markdown с YAML frontmatter и жёстким порядком секций. Lookup по Figma `nodeId` через `grep` без отдельного индекса. Валидация структуры — Node-скриптом перед коммитом. + +**Tech Stack:** Angular 20, PrimeNG, Markdown, YAML, Node ≥18 (для validator), `js-yaml` (единственная новая dev-зависимость). + +## Global Constraints + +- Все пути относительно корня проекта. +- Один кодовый компонент = ровно один `.figma.md` файл; варианты — секциями внутри. +- Глобалы лежат в `src/lib/figma-code-connect/`; индивидуальные `.figma.md` ссылаются на них через относительные ссылки. +- Frontmatter — YAML; обязательные поля: `component`, `selector`, `import.symbol`, `import.from`, `figma.fileKey`, `figma.nodeId`, `figma.componentKey`, `figma.name`, `status`, `updated`. +- Жёсткий порядок секций тела: `## Overview` → `## Props mapping` → `## Variants` → `## Slots` → `## Related` → `## Do / Don't`. +- Все code-fence обязаны иметь язык (`html`, `ts`, `scss`). +- Никаких inline-значений токенов/иконок — только ссылки на `tokens.md` / `icons.md`. +- Figma fileKey проекта: `Khh7arsuXss3ncqy1Dz3OZ` (UI Kit v2.0). nodeId/componentKey пилотов вытаскивать через Figma MCP. Если MCP недоступен — `nodeId: null`, `componentKey: null`, `status: orphan-code`. +- Дата `updated:` во всех файлах = `2026-06-22`. +- Никаких рантайм-зависимостей. validator — devDependency `js-yaml`. +- Не модифицировать `.env`, `angular.json`, существующие `*.component.ts`. Создаём только новые файлы. + +--- + +### Task 1: Validator-скрипт (контракт формата) + +**Files:** +- Create: `scripts/figma-code-connect/validate.mjs` +- Create: `scripts/figma-code-connect/__fixtures__/valid.figma.md` +- Create: `scripts/figma-code-connect/__fixtures__/invalid-missing-frontmatter.figma.md` +- Create: `scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md` +- Create: `scripts/figma-code-connect/validate.test.mjs` +- Modify: `package.json` — добавить script `"validate:figma-cc": "node scripts/figma-code-connect/validate.mjs"` и devDependency `"js-yaml": "^4.1.0"`. + +**Interfaces:** +- Consumes: ничего. +- Produces: CLI `node scripts/figma-code-connect/validate.mjs [path...]` — без аргументов сканирует `src/lib/**/*.figma.md`; с аргументами валидирует переданные файлы. Exit 0 = OK, 1 = errors; ошибки в stderr строкой `: `. Экспорт `validateFile(path): Promise`. + +**Steps:** + +- [ ] **Step 1: Создать fixture валидного файла** `scripts/figma-code-connect/__fixtures__/valid.figma.md`: + +``` +--- +component: extra-fixture +selector: extra-fixture +import: + symbol: ExtraFixtureComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: TESTKEY + nodeId: '1:2' + componentKey: stable-key + name: 'Fixture' +status: stable +updated: 2026-06-22 +--- + +## Overview +Тестовый компонент. + +## Props mapping +| Figma | Angular | Type | Notes | +|-------|---------|------|-------| +| Size | size | 'sm' | | + +## Variants +### Default +Figma nodeId: `1:3` + +```html + +``` + +## Slots +Нет. + +## Related +Нет. + +## Do / Don't +- ✅ ОК. +- ❌ Не ОК. +``` + +- [ ] **Step 2: Fixture с пропущенным frontmatter** `scripts/figma-code-connect/__fixtures__/invalid-missing-frontmatter.figma.md`: + +``` +## Overview +Нет frontmatter. +``` + +- [ ] **Step 3: Fixture с нарушенным порядком секций** `scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md` — копия валидного, но `## Variants` стоит перед `## Props mapping`. + +- [ ] **Step 4: Тест `validate.test.mjs`** (запустить до реализации — должен упасть): + +```javascript +import { strict as assert } from 'node:assert'; +import { test } from 'node:test'; +import { validateFile } from './validate.mjs'; + +test('valid fixture passes', async () => { + const errors = await validateFile('scripts/figma-code-connect/__fixtures__/valid.figma.md'); + assert.deepEqual(errors, []); +}); + +test('missing frontmatter fails', async () => { + const errors = await validateFile('scripts/figma-code-connect/__fixtures__/invalid-missing-frontmatter.figma.md'); + assert.ok(errors.some(e => /frontmatter/i.test(e))); +}); + +test('wrong section order fails', async () => { + const errors = await validateFile('scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md'); + assert.ok(errors.some(e => /order/i.test(e))); +}); +``` + +- [ ] **Step 5: Запустить тест — ожидать FAIL** `node --test scripts/figma-code-connect/validate.test.mjs` → fail (нет validate.mjs). + +- [ ] **Step 6: Реализовать `scripts/figma-code-connect/validate.mjs`**: + +```javascript +import { readFile } from 'node:fs/promises'; +import yaml from 'js-yaml'; + +const REQUIRED_FIELDS = ['component', 'selector', 'import', 'figma', 'status', 'updated']; +const REQUIRED_FIGMA = ['fileKey', 'nodeId', 'componentKey', 'name']; +const SECTION_ORDER = ['## Overview', '## Props mapping', '## Variants', '## Slots', '## Related', "## Do / Don't"]; + +export async function validateFile(path) { + const errors = []; + const raw = await readFile(path, 'utf8'); + const m = raw.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/); + if (!m) { errors.push(`${path}: missing frontmatter`); return errors; } + let fm; + try { fm = yaml.load(m[1]); } + catch (e) { errors.push(`${path}: invalid YAML: ${e.message}`); return errors; } + for (const f of REQUIRED_FIELDS) if (!(f in fm)) errors.push(`${path}: missing field ${f}`); + if (fm.figma) for (const f of REQUIRED_FIGMA) if (!(f in fm.figma)) errors.push(`${path}: missing figma.${f}`); + const body = m[2]; + const positions = SECTION_ORDER.map(s => body.indexOf(`\n${s}`)); + const present = positions.map((p, i) => [p, i]).filter(([p]) => p !== -1); + for (let i = 1; i < present.length; i++) { + if (present[i][0] < present[i-1][0]) { + errors.push(`${path}: section order violation near ${SECTION_ORDER[present[i][1]]}`); + break; + } + } + for (const f of [...body.matchAll(/^```(\w*)$/gm)]) + if (!f[1]) errors.push(`${path}: code-fence without language`); + return errors; +} + +if (import.meta.url === `file://${process.argv[1]}`) { + const args = process.argv.slice(2); + let files; + if (args.length) files = args; + else { + const { glob } = await import('node:fs/promises'); + files = []; + for await (const p of glob('src/lib/**/*.figma.md')) files.push(p); + } + let total = 0; + for (const f of files) { + const errs = await validateFile(f); + for (const e of errs) console.error(e); + total += errs.length; + } + process.exit(total === 0 ? 0 : 1); +} +``` + +- [ ] **Step 7: Запустить тест — PASS** `node --test scripts/figma-code-connect/validate.test.mjs`. + +- [ ] **Step 8: Обновить `package.json`** — добавить в `scripts`: `"validate:figma-cc": "node scripts/figma-code-connect/validate.mjs"`; в `devDependencies`: `"js-yaml": "^4.1.0"`; запустить `npm install`. + +- [ ] **Step 9: CLI smoke** — `node scripts/figma-code-connect/validate.mjs scripts/figma-code-connect/__fixtures__/valid.figma.md` → exit 0; на `invalid-missing-frontmatter.figma.md` → exit 1 + stderr. + +- [ ] **Step 10: Commit** `git add scripts/figma-code-connect/ package.json package-lock.json && git commit -m "feat(figma-cc): add validator and fixtures"`. + +--- + +### Task 2: schema.md + README.md + +**Files:** +- Create: `src/lib/figma-code-connect/schema.md` +- Create: `src/lib/figma-code-connect/README.md` + +**Interfaces:** +- Consumes: validator из Task 1. +- Produces: ссылочные документы для Tasks 3–7. + +**Steps:** + +- [ ] **Step 1: Написать `schema.md`** с полной спецификацией: + - Перечень обязательных полей frontmatter (`component`, `selector`, `import.{symbol,from}`, `figma.{fileKey,nodeId,componentKey,name}`, `status`, `updated`). + - Опциональные: `deprecated.{replaceWith,since,reason}`. + - Фиксированный порядок секций тела (6 пунктов из Global Constraints). + - Правила: code-fence с языком; никаких inline-значений токенов/иконок; ссылки на `tokens.md` / `icons.md`. + +- [ ] **Step 2: Написать `README.md`** — точка входа: краткое описание, ссылки на schema/conventions/tokens/icons/missing, инструкция «как агент использует» (grep по nodeId), команда валидации `npm run validate:figma-cc`. + +- [ ] **Step 3: Прогнать validator** `npm run validate:figma-cc` → exit 0 (validator сканирует только `src/lib/**/*.figma.md`, глобалы в `src/lib/figma-code-connect/*.md` не валидируются). + +- [ ] **Step 4: Commit** `git add src/lib/figma-code-connect/schema.md src/lib/figma-code-connect/README.md && git commit -m "feat(figma-cc): add schema and README"`. + +--- + +### Task 3: conventions.md + +**Files:** +- Create: `src/lib/figma-code-connect/conventions.md` + +**Interfaces:** +- Consumes: ничего. +- Produces: справочник, на который ссылается README.md и индивидуальные `.figma.md`. + +**Steps:** + +- [ ] **Step 1: Написать `conventions.md`** с разделами: + - **Naming**: префикс селектора `extra-`, класс `ExtraComponent`, импорт из `@cdek-it/angular-ui-kit`. + - **Figma property → Angular @Input**: `Variant=primary` → `variant="primary"`, `State=Disabled` → `[disabled]="true"`, `Size=base` → `size="base"`, boolean Figma props → `[prop]="true|false"`. + - **Two-way binding**: `[(visible)]`, `[(ngModel)]`. + - **Slots / content projection**: структурные директивы `extraHeader`/`extraFooter` либо ``. + - **Red lines**: не описывать приватные компоненты; не дублировать Storybook; не описывать runtime-логику; не инлайнить токены; не создавать файлы под отдельные варианты. + +- [ ] **Step 2: Validator** `npm run validate:figma-cc` → exit 0. + +- [ ] **Step 3: Commit** `git add src/lib/figma-code-connect/conventions.md && git commit -m "feat(figma-cc): add conventions"`. + +--- + +### Task 4: tokens.md + icons.md + missing.md + +**Files:** +- Create: `src/lib/figma-code-connect/tokens.md` +- Create: `src/lib/figma-code-connect/icons.md` +- Create: `src/lib/figma-code-connect/missing.md` + +**Interfaces:** +- Consumes: `src/lib/providers/prime-preset/` (текущие токены), `src/styles.scss`, опционально Figma MCP variables. +- Produces: anchor-ссылки для индивидуальных `.figma.md`. + +**Steps:** + +- [ ] **Step 1: Собрать актуальные токены** — `grep -r --include='*.ts' 'preset' src/lib/providers/prime-preset/ | head -50`, прочитать `src/styles.scss`. Если значения недоступны — отметить «pending» и сослаться на `missing.md`. + +- [ ] **Step 2: Написать `tokens.md`** — разделы Colors / Spacing / Radius / Typography. Каждый — таблица или подразделы с anchor-friendly заголовками (`### color-primary`, `### spacing-base`). Минимум 1 строка в каждой таблице. Inline-значения недопустимы в `.figma.md`, но в `tokens.md` сами значения и есть контент. + +- [ ] **Step 3: Написать `icons.md`** — источник иконок (`primeicons` через PrimeNG); таблица `Figma layer | код | пример использования`; правила (передача строкой `'pi pi-'`, цвет наследуется). + +- [ ] **Step 4: Написать `missing.md`** — backlog таблица `Figma name | nodeId | componentKey | заметка | статус`, изначально пустая, с пояснением «не путать с `status: orphan-code`». + +- [ ] **Step 5: Validator** `npm run validate:figma-cc` → exit 0. + +- [ ] **Step 6: Commit** `git add src/lib/figma-code-connect/tokens.md src/lib/figma-code-connect/icons.md src/lib/figma-code-connect/missing.md && git commit -m "feat(figma-cc): add tokens, icons, missing globals"`. + +--- + +### Task 5: button.figma.md (пилот 1) + +**Files:** +- Create: `src/lib/components/button/button.figma.md` +- Read: `src/lib/components/button/button.component.ts`, `src/lib/components/button/public_api.ts`, `src/stories/components/button/button.stories.ts`. + +**Interfaces:** +- Consumes: schema (Task 2), conventions (Task 3), tokens/icons (Task 4). +- Produces: эталон формата для Tasks 6–7. + +**Steps:** + +- [ ] **Step 1: Получить Figma данные.** Через Figma MCP (`figma fileKey Khh7arsuXss3ncqy1Dz3OZ`) найти компонент `Button`: nodeId componentSet, componentKey, nodeId каждого variant. Если MCP недоступен — `figma.nodeId: null`, `figma.componentKey: null`, `status: orphan-code`; в `## Overview` второе предложение «Маппинг Figma в процессе синхронизации.». + +- [ ] **Step 2: Написать `button.figma.md`** с frontmatter (component/selector/import/figma/status/updated) и телом по schema. Покрыть варианты: Primary/Base, Secondary/Base, Outlined/Large, Text/Base, Link/Base, With icon (prefix), Icon only, Loading, Danger. Props mapping должен покрывать все `@Input` из `button.component.ts` (variant, size, severity, disabled, loading, iconPos, iconOnly, showBadge, badge, badgeSeverity, rounded, fluid, label, icon, ariaLabel). Иконку передавать строкой `'pi pi-'`. Ссылка на `icons.md` обязательна. + +- [ ] **Step 3: Validator** `npm run validate:figma-cc` → exit 0. При ошибке — поправить frontmatter/секции. + +- [ ] **Step 4: Smoke lookup** (только если nodeId заполнен): `grep -rl --include='*.figma.md' "nodeId: '<один_из_nodeId>'" src/lib/components` → одна строка `src/lib/components/button/button.figma.md`. + +- [ ] **Step 5: Commit** `git add src/lib/components/button/button.figma.md && git commit -m "feat(figma-cc): add button.figma.md pilot"`. + +--- + +### Task 6: inputtext.figma.md (пилот 2) + +**Files:** +- Create: `src/lib/components/inputtext/inputtext.figma.md` +- Read: `src/lib/components/inputtext/inputtext.component.ts`, `src/stories/components/inputtext/*.stories.ts`. + +**Interfaces:** +- Consumes: schema (Task 2), conventions (Task 3). +- Produces: пример с ControlValueAccessor (FormControl/ngModel). + +**Steps:** + +- [ ] **Step 1: Figma данные** аналогично Task 5 Step 1, имя в Figma — `Input / Text` (либо `TextField`/`Input` — найти точное). + +- [ ] **Step 2: Написать `inputtext.figma.md`** с frontmatter и телом. Selector `extra-input-text`, symbol `ExtraInputTextComponent`. Props: `size`, `disabled`, `readonly`, `showClear`, `fluid`, `placeholder`, value через `[(ngModel)]` / `formControl`. Варианты: Default/Base, With clear, Disabled, Fluid/Large, With reactive form. В `## Related` — `inputgroup` и `form-field`. В `## Do/Don't` — обязательность использования `[(ngModel)]`/`formControl` (компонент реализует CVA). + +- [ ] **Step 3: Validator** `npm run validate:figma-cc` → exit 0. + +- [ ] **Step 4: Commit** `git add src/lib/components/inputtext/inputtext.figma.md && git commit -m "feat(figma-cc): add inputtext.figma.md pilot"`. + +--- + +### Task 7: dialog.figma.md (пилот 3) + +**Files:** +- Create: `src/lib/components/dialog/dialog.figma.md` +- Read: `src/lib/components/dialog/dialog.component.ts`, `src/stories/components/dialog/*.stories.ts`. + +**Interfaces:** +- Consumes: schema (Task 2), conventions (Task 3). +- Produces: пример композиции (dialog с button в footer) — демонстрирует `## Related` в действии. + +**Steps:** + +- [ ] **Step 1: Figma данные** аналогично Task 5 Step 1, имя `Dialog`. + +- [ ] **Step 2: Написать `dialog.figma.md`** с frontmatter и телом. Selector `extra-dialog`, symbol `ExtraDialogComponent`. Props: `size` (`'sm' | 'default' | 'lg' | 'xlg'`), `modal`, `header`, `dismissableMask`, `closeOnEscape`, `showHeader`, `[(visible)]`. Варианты: Default/md, Large with custom header (через `*extraDialogHeader`), With actions in footer (через `*extraDialogFooter` с `extra-button`), Non-modal. В `## Slots`: ``, `*extraDialogHeader`, `*extraDialogFooter`. В `## Related` — `button`, `confirm-dialog`. В `## Do/Don't` — управлять через `[(visible)]`, не `*ngIf`; не более 2 кнопок в footer; не выключать `closeOnEscape` (a11y). + +- [ ] **Step 3: Validator** `npm run validate:figma-cc` → exit 0. + +- [ ] **Step 4: Commit** `git add src/lib/components/dialog/dialog.figma.md && git commit -m "feat(figma-cc): add dialog.figma.md pilot"`. + +--- + +### Task 8: Acceptance — сквозная проверка + +**Files:** +- Опционально modify: `package.json` — добавить `"prebuild": "npm run validate:figma-cc"`. +- Read: `docs/superpowers/specs/2026-06-22-figma-code-connect-static-design.md` секция 9. + +**Interfaces:** +- Consumes: всё из Tasks 1–7. +- Produces: подтверждение MVP-критериев. + +**Steps:** + +- [ ] **Step 1: Полный прогон validator** `npm run validate:figma-cc` → exit 0, без stderr. + +- [ ] **Step 2: Lookup smoke по каждому пилоту**: + - `grep -rl --include='*.figma.md' "component: extra-button" src/lib/components` → `src/lib/components/button/button.figma.md`. + - Аналогично для `extra-input-text` и `extra-dialog`. + +- [ ] **Step 3: Сверка с spec § 9** — открыть spec, проверить 5 критериев приёмки; каждый — closed by соответствующая Task. + +- [ ] **Step 4: Опционально prebuild hook** — если согласовано, в `package.json` добавить `"prebuild": "npm run validate:figma-cc"`. Иначе пропустить. + +- [ ] **Step 5: Commit** (если prebuild добавлен) `git add package.json && git commit -m "chore(figma-cc): wire validator into prebuild"`. + +--- + +## Self-Review + +**Spec coverage:** +- § 1–2 → Architecture + Tasks 2–7. +- § 3 → Tasks 5–7 (структура); Task 2 (формализация); Task 1 (валидация). +- § 4 → Task 8 Step 2. +- § 5 → Tasks 5–7 Step 1 (источники). +- § 6 → fallback orphan-code в Global Constraints и Tasks 5–7. +- § 7 → conventions.md (Task 3). +- § 8 → план учитывает доступность/недоступность MCP. +- § 9 → Task 8. + +**Type consistency:** `validateFile(path)` определён в Task 1, использован там же. Селекторы `extra-button`, `extra-input-text`, `extra-dialog` соответствуют реальным. + +**Placeholders:** нет TBD-плейсхолдеров. Метки получения Figma данных — рабочие инструкции с явным fallback на `orphan-code`. diff --git a/docs/superpowers/specs/2026-06-22-figma-code-connect-static-design.md b/docs/superpowers/specs/2026-06-22-figma-code-connect-static-design.md new file mode 100644 index 00000000..a02036bf --- /dev/null +++ b/docs/superpowers/specs/2026-06-22-figma-code-connect-static-design.md @@ -0,0 +1,181 @@ +# Статический Figma Code Connect — дизайн + +**Дата:** 2026-06-22 +**Проект:** `@cdek-it/angular-ui-kit` (Angular 20 + PrimeNG) +**Тип:** design spec +**Статус:** утверждён к реализации + +## 1. Постановка задачи + +Реализовать статический (file-based) аналог Figma Code Connect для Angular UI Kit. +Цель — предоставить LLM-агенту тот же контекст связки «Figma-компонент ↔ кодовый компонент», +который даёт оригинальный Figma Code Connect, но без рантайма Figma CLI и без TypeScript-DSL. + +**Потребитель:** LLM/Claude при генерации Angular-кода (страниц, виджетов) по Figma-дизайну. +**Триггер:** агент получает Figma `nodeId` / `componentKey` из MCP и ищет соответствующий файл контекста. +**Не-цели:** +- Не заменяет Storybook (это не интерактивная песочница). +- Не описывает приватные компоненты. +- Не отражает runtime-логику (animations, CDK overlay) — только props/template-API. + +## 2. Архитектура файлов + +### Расположение +Колокация рядом с компонентом: + +``` +src/lib/components//.figma.md +``` + +Один кодовый компонент → один `.figma.md`. Варианты компонента (`primary`, `secondary`, +`outlined` и т.д.) — секциями внутри файла, отдельных файлов под варианты нет. + +### Глобальные артефакты +``` +src/lib/figma-code-connect/ + README.md # точка входа: что это, как использовать + schema.md # единственный источник правды о формате + conventions.md # общие соглашения проекта (префиксы, naming) + tokens.md # маппинг Figma variables → CSS-переменные / Tailwind + icons.md # icon-set: имена в Figma → имена в коде + missing.md # backlog: Figma-компоненты без реализации в коде +``` + +Индивидуальные `.figma.md` ссылаются на глобалы через относительные ссылки +(`[token](../../figma-code-connect/tokens.md#color-primary)`). Значения не дублируются. + +## 3. Структура файла `.figma.md` + +### Frontmatter (YAML) + +Обязательные поля: +```yaml +--- +component: extra-button # имя Angular-компонента (обратный поиск) +selector: extra-button # Angular-селектор +import: + symbol: ExtraButtonComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: + nodeId: '123:456' # ID родительского componentSet (или массив) + componentKey: + name: 'Button' # имя в Figma (для отладки) +status: stable | beta | deprecated | orphan-code +updated: 2026-06-22 +--- +``` + +Опциональные поля: +```yaml +deprecated: + replaceWith: extra-other + since: 2026-03-01 + reason: 'Заменён на extra-other из-за изменения a11y-контракта' +``` + +Если `nodeId` — массив, в `Overview` обязана быть заметка о правилах выбора. + +### Тело — фиксированный порядок секций + +1. `## Overview` — 1–2 предложения о назначении, когда брать именно этот компонент. +2. `## Props mapping` — таблица `Figma property | Angular @Input | Type / values | Notes`. +3. `## Variants` — для каждого варианта `### ` + строка `Figma nodeId: \`\`` + code-fence `html` со сниппетом. +4. `## Slots` — описание `ng-content` / структурных директив; «Нет.» если отсутствуют. +5. `## Related` — ссылки на смежные `.figma.md`; «Нет.» если отсутствуют. +6. `## Do / Don't` — список `✅`/`❌`, ≤ 5 пунктов. + +### Правила тела +- Жёсткий порядок секций (для детерминированного парсинга). +- Все code-fence обязаны иметь язык (`html`, `ts`, `scss`). +- Свободного текста между секциями нет — только содержимое самих секций. +- Никаких inline-значений токенов или цветов — только ссылки на `tokens.md`. + +## 4. Поиск по `nodeId` (lookup) + +**MVP-стратегия:** без индекс-файла. + +``` +grep -rl "nodeId: '123:456'" src/lib/components --include='*.figma.md' +``` + +Работает потому что: +- `.figma.md` ≤ количества компонентов (~40); +- frontmatter содержит `nodeId` родителя, секции `## Variants` — `nodeId` каждого варианта; +- grep по проекту такого размера < 100 мс. + +**Обратный lookup (по имени компонента):** соглашение пути +`src/lib/components//.figma.md` — агент строит путь напрямую. + +**Когда добавим индекс:** при превышении ~200 компонентов или времени grep > 500 мс. +До тех пор — YAGNI. + +## 5. Источники данных и процесс генерации + +### Источники (в порядке приоритета при конфликте) + +1. **Figma MCP** — `componentKey`, `nodeId`, variants, Figma property panel. +2. **`src/lib/components//.component.ts`** — селектор, `@Input`/`@Output`, + типы (`ExtraButtonVariant = 'primary' | …`), дефолты. +3. **`src/stories/components//*.stories.ts`** — канонические сниппеты для `## Variants`. +4. **`public_api.ts`** — реальный import symbol и публичный путь. + +### Разрешение конфликтов +- Тип в коде ≠ variant в Figma → побеждает код. Заметка в `## Do / Don't`. +- Селектор не совпадает с шаблоном `extra-*` → фиксируется как есть, `status: beta`. + +### Генерация одного файла +1. Прочитать `.component.ts` → props, типы, селектор. +2. Прочитать `public_api.ts` → import symbol. +3. Figma MCP по имени → `nodeId`, `componentKey`, variants. +4. Прочитать stories в `src/stories/components//` (если есть) → канонические сниппеты. +5. Скомпоновать `.figma.md` строго по schema. +6. Self-check: все обязательные поля frontmatter заполнены, все Figma-variants + представлены секциями `## Variants`. + +### Обновление существующего файла +- Триггер: изменение `.component.ts` или соответствующих stories. +- Регенерация по тому же процессу, но `figma.fileKey/nodeId/componentKey` берутся + из старого frontmatter (Figma-ID стабильнее имени). +- Поле `updated:` обновляется на текущую дату. + +## 6. Edge cases + +| Случай | Поведение | +|--------|-----------| +| Компонент в коде, нет в Figma | Файл создаётся, `figma.nodeId = null`, `status: orphan-code`. Агент не предлагает первым при генерации. | +| Компонент в Figma, нет в коде | Файл НЕ создаётся. Запись в `figma-code-connect/missing.md`. | +| Variant в Figma не покрыт типом в коде | Блок `### …` создаётся, в code-fence `` + сниппет ближайшего поддерживаемого. Запись в `## Do / Don't`. | +| Несколько Figma-компонентов → один кодовый | `figma.nodeId` — массив, в `## Overview` правила выбора. | +| Deprecated | `status: deprecated` + поле `deprecated: { replaceWith, since, reason }`. Агент только распознаёт, не предлагает. | +| Composition (dialog→button) | В `## Related` — ссылка, в `## Variants` — пример композиции. Детали зависимого компонента не дублируются. | +| Токены/иконки | Только ссылки на `tokens.md` / `icons.md`. Inline-значений нет. | + +## 7. Red lines + +- Не описывать приватные компоненты (которых нет в `public_api.ts`). +- Не отражать runtime-логику (анимации, CDK overlay, router-выборы). +- Не дублировать Storybook — это контракт, а не песочница. +- Не инлайнить значения токенов/иконок — только ссылки на глобалы. +- Не создавать отдельные файлы под варианты компонента. + +## 8. Что нужно от пользователя + +**Обязательно:** +- URL Figma-файла UI Kit (для MCP). +- Подтверждение прав на запись в `src/lib/`. +- Решение по MVP-объёму: пилот на 3–5 компонентов или сразу все ~40. + +**Желательно:** +- Существующий `figma.config.json` / Code Connect TS-файлы (если есть) — для переиспользования nodeId. +- Канонические Storybook stories (`src/stories/`) как источник сниппетов. +- Внутренние соглашения по a11y и именованию иконок. + +## 9. Критерии приёмки (MVP) + +1. Создан каркас `src/lib/figma-code-connect/` со всеми пятью глобальными файлами. +2. Сгенерированы `.figma.md` для пилотных компонентов (`button`, `inputtext`, `dialog`). +3. Каждый пилотный файл проходит self-check по `schema.md`. +4. Lookup по `nodeId` через grep возвращает корректный файл. +5. Агент по `.figma.md` пилотного компонента генерирует валидный Angular-код, + соответствующий контракту в коде (props, типы, селектор). From 38cf258774156dd54551ed2e3a99c27bf18a61ad Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 22 Jun 2026 21:39:10 +0800 Subject: [PATCH 18/46] feat(figma-cc): add validator and fixtures Implement .figma.md format validator with TDD approach. Validates frontmatter (required YAML fields), section order, and code fence language annotations. Includes three fixtures: valid example, missing frontmatter, and wrong section order violations. Co-Authored-By: Claude Opus 4.7 (1M context) --- package-lock.json | 2 + package.json | 4 +- .../invalid-missing-frontmatter.figma.md | 2 + .../invalid-wrong-section-order.figma.md | 40 ++++++++++++++++ .../__fixtures__/valid.figma.md | 40 ++++++++++++++++ scripts/figma-code-connect/validate.mjs | 48 +++++++++++++++++++ scripts/figma-code-connect/validate.test.mjs | 18 +++++++ 7 files changed, 153 insertions(+), 1 deletion(-) create mode 100644 scripts/figma-code-connect/__fixtures__/invalid-missing-frontmatter.figma.md create mode 100644 scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md create mode 100644 scripts/figma-code-connect/__fixtures__/valid.figma.md create mode 100644 scripts/figma-code-connect/validate.mjs create mode 100644 scripts/figma-code-connect/validate.test.mjs diff --git a/package-lock.json b/package-lock.json index 5fe8bcf3..4cee0460 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,6 +31,7 @@ "@angular/router": "20.3.15", "@compodoc/compodoc": "1.1.32", "@primeng/themes": "20.4.0", + "@primeuix/themes": "1.2.5", "@storybook/addon-a11y": "10.1.8", "@storybook/addon-docs": "10.1.8", "@storybook/addon-themes": "^10.1.8", @@ -46,6 +47,7 @@ "eslint-plugin-prefer-arrow": "1.2.3", "eslint-plugin-storybook": "10.1.8", "jasmine-core": "5.13.0", + "js-yaml": "^4.1.0", "karma": "6.4.4", "karma-chrome-launcher": "3.2.0", "karma-coverage": "2.2.1", diff --git a/package.json b/package.json index 8fa837c7..334eade9 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,8 @@ "build:storybook": "ng run angular-ui-kit:build-storybook", "build:lib": "ng build angular-ui-kit-lib", "security:check": "npm audit --production --audit-level high", - "copy:dist": "cpx 'src/lib/providers/prime-preset/**/*.{json,ts}' dist/ && cpx 'src-tokens/theme.preset.ts' dist/" + "copy:dist": "cpx 'src/lib/providers/prime-preset/**/*.{json,ts}' dist/ && cpx 'src-tokens/theme.preset.ts' dist/", + "validate:figma-cc": "node scripts/figma-code-connect/validate.mjs" }, "repository": "github:cdek-it/angular-ui-kit", "devDependencies": { @@ -60,6 +61,7 @@ "eslint-plugin-prefer-arrow": "1.2.3", "eslint-plugin-storybook": "10.1.8", "jasmine-core": "5.13.0", + "js-yaml": "^4.1.0", "karma": "6.4.4", "karma-chrome-launcher": "3.2.0", "karma-coverage": "2.2.1", diff --git a/scripts/figma-code-connect/__fixtures__/invalid-missing-frontmatter.figma.md b/scripts/figma-code-connect/__fixtures__/invalid-missing-frontmatter.figma.md new file mode 100644 index 00000000..b8345b33 --- /dev/null +++ b/scripts/figma-code-connect/__fixtures__/invalid-missing-frontmatter.figma.md @@ -0,0 +1,2 @@ +## Overview +Нет frontmatter. diff --git a/scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md b/scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md new file mode 100644 index 00000000..ccf17e86 --- /dev/null +++ b/scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md @@ -0,0 +1,40 @@ +--- +component: extra-fixture +selector: extra-fixture +import: + symbol: ExtraFixtureComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: TESTKEY + nodeId: '1:2' + componentKey: stable-key + name: 'Fixture' +status: stable +updated: 2026-06-22 +--- + +## Overview +Тестовый компонент. + +## Variants +### Default +Figma nodeId: `1:3` + +```html + +```html + +## Props mapping +| Figma | Angular | Type | Notes | +|-------|---------|------|-------| +| Size | size | 'sm' | | + +## Slots +Нет. + +## Related +Нет. + +## Do / Don't +- ✅ ОК. +- ❌ Не ОК. diff --git a/scripts/figma-code-connect/__fixtures__/valid.figma.md b/scripts/figma-code-connect/__fixtures__/valid.figma.md new file mode 100644 index 00000000..ab905e55 --- /dev/null +++ b/scripts/figma-code-connect/__fixtures__/valid.figma.md @@ -0,0 +1,40 @@ +--- +component: extra-fixture +selector: extra-fixture +import: + symbol: ExtraFixtureComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: TESTKEY + nodeId: '1:2' + componentKey: stable-key + name: 'Fixture' +status: stable +updated: 2026-06-22 +--- + +## Overview +Тестовый компонент. + +## Props mapping +| Figma | Angular | Type | Notes | +|-------|---------|------|-------| +| Size | size | 'sm' | | + +## Variants +### Default +Figma nodeId: `1:3` + +```html + +```html + +## Slots +Нет. + +## Related +Нет. + +## Do / Don't +- ✅ ОК. +- ❌ Не ОК. diff --git a/scripts/figma-code-connect/validate.mjs b/scripts/figma-code-connect/validate.mjs new file mode 100644 index 00000000..5a050517 --- /dev/null +++ b/scripts/figma-code-connect/validate.mjs @@ -0,0 +1,48 @@ +import { readFile } from 'node:fs/promises'; +import yaml from 'js-yaml'; + +const REQUIRED_FIELDS = ['component', 'selector', 'import', 'figma', 'status', 'updated']; +const REQUIRED_FIGMA = ['fileKey', 'nodeId', 'componentKey', 'name']; +const SECTION_ORDER = ['## Overview', '## Props mapping', '## Variants', '## Slots', '## Related', "## Do / Don't"]; + +export async function validateFile(path) { + const errors = []; + const raw = await readFile(path, 'utf8'); + const m = raw.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/); + if (!m) { errors.push(`${path}: missing frontmatter`); return errors; } + let fm; + try { fm = yaml.load(m[1]); } + catch (e) { errors.push(`${path}: invalid YAML: ${e.message}`); return errors; } + for (const f of REQUIRED_FIELDS) if (!(f in fm)) errors.push(`${path}: missing field ${f}`); + if (fm.figma) for (const f of REQUIRED_FIGMA) if (!(f in fm.figma)) errors.push(`${path}: missing figma.${f}`); + const body = m[2]; + const positions = SECTION_ORDER.map(s => body.indexOf(`\n${s}`)); + const present = positions.map((p, i) => [p, i]).filter(([p]) => p !== -1); + for (let i = 1; i < present.length; i++) { + if (present[i][0] < present[i-1][0]) { + errors.push(`${path}: section order violation near ${SECTION_ORDER[present[i][1]]}`); + break; + } + } + for (const f of [...body.matchAll(/^```(\w*)$/gm)]) + if (!f[1]) errors.push(`${path}: code-fence without language`); + return errors; +} + +if (import.meta.url === `file://${process.argv[1]}`) { + const args = process.argv.slice(2); + let files; + if (args.length) files = args; + else { + const { glob } = await import('node:fs/promises'); + files = []; + for await (const p of glob('src/lib/**/*.figma.md')) files.push(p); + } + let total = 0; + for (const f of files) { + const errs = await validateFile(f); + for (const e of errs) console.error(e); + total += errs.length; + } + process.exit(total === 0 ? 0 : 1); +} diff --git a/scripts/figma-code-connect/validate.test.mjs b/scripts/figma-code-connect/validate.test.mjs new file mode 100644 index 00000000..9177fe0e --- /dev/null +++ b/scripts/figma-code-connect/validate.test.mjs @@ -0,0 +1,18 @@ +import { strict as assert } from 'node:assert'; +import { test } from 'node:test'; +import { validateFile } from './validate.mjs'; + +test('valid fixture passes', async () => { + const errors = await validateFile('scripts/figma-code-connect/__fixtures__/valid.figma.md'); + assert.deepEqual(errors, []); +}); + +test('missing frontmatter fails', async () => { + const errors = await validateFile('scripts/figma-code-connect/__fixtures__/invalid-missing-frontmatter.figma.md'); + assert.ok(errors.some(e => /frontmatter/i.test(e))); +}); + +test('wrong section order fails', async () => { + const errors = await validateFile('scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md'); + assert.ok(errors.some(e => /order/i.test(e))); +}); From ba3a2f619bb6ed3e85ccd29fe1da67161b08e5b3 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 22 Jun 2026 21:43:29 +0800 Subject: [PATCH 19/46] feat(figma-cc): add schema and README Co-Authored-By: Claude Opus 4.7 (1M context) --- src/lib/figma-code-connect/README.md | 218 ++++++++++++++++++++ src/lib/figma-code-connect/schema.md | 294 +++++++++++++++++++++++++++ 2 files changed, 512 insertions(+) create mode 100644 src/lib/figma-code-connect/README.md create mode 100644 src/lib/figma-code-connect/schema.md diff --git a/src/lib/figma-code-connect/README.md b/src/lib/figma-code-connect/README.md new file mode 100644 index 00000000..d3617f7e --- /dev/null +++ b/src/lib/figma-code-connect/README.md @@ -0,0 +1,218 @@ +# Figma Code Connect — Статические файлы описания компонентов + +Эта директория содержит статические файлы документации для интеграции Figma с исходным кодом компонентов `@cdek-it/angular-ui-kit`. + +## Структура директории + +``` +src/lib/figma-code-connect/ +├── README.md # Этот файл +├── schema.md # Полная спецификация формата .figma.md +├── conventions.md # Соглашения и best practices (Task 3) +├── tokens.md # Дизайн токены (Task 4) +├── icons.md # Доступные иконки (Task 4) +├── missing.md # Список компонентов без Code Connect (Task 4) +├── button/ +│ └── button.figma.md # Документация Button (Task 5) +├── input-text/ +│ └── input-text.figma.md # Документация InputText (Task 6) +└── dialog/ + └── dialog.figma.md # Документация Dialog (Task 7) +``` + +## Описание + +**Figma Code Connect** — это практика связывания компонентов Figma с их реализацией в исходном коде. +Статические файлы (`.figma.md`) содержат метаданные о компонентах, которые позволяют: + +- Агентам находить реальную реализацию компонента по его nodeId из Figma +- Разработчикам быстро переходить между дизайном и кодом +- Поддерживать актуальность синхронизации между Figma и исходным кодом + +## Как использовать этот формат + +### Для разработчиков + +1. **Читайте** [`schema.md`](./schema.md) для понимания структуры файлов +2. **Смотрите примеры** в директориях компонентов (`button/`, `input-text/`, `dialog/`) +3. **Следуйте соглашениям** из [`conventions.md`](./conventions.md) +4. **Валидируйте** свои файлы перед коммитом: + ```bash + npm run validate:figma-cc + ``` + +### Для агентов и интеграций + +Агент (например, при автоматическом синхронизировании дизайна) может использовать эти файлы следующим образом: + +1. **Получить nodeId из Figma** + ``` + figma.fileKey = abc123def456 + figma.nodeId = 1:42 + ``` + +2. **Найти соответствующий .figma.md файл** + ```bash + grep -r "nodeId.*1:42" src/lib/**/*.figma.md + # Результат: src/lib/button/button.figma.md + ``` + +3. **Извлечь метаданные из frontmatter** + ```yaml + component: ExtraButton + selector: extra-button + import: + symbol: ExtraButtonComponent + from: '@cdek-it/angular-ui-kit' + ``` + +4. **Использовать данные для синхронизации** + - Обновить тип компонента в коде + - Добавить новое свойство или slot + - Обновить документацию + +## Справочные документы + +| Документ | Описание | +|----------|---------| +| [`schema.md`](./schema.md) | Полная спецификация формата файлов, обязательные/опциональные поля, правила форматирования | +| [`conventions.md`](./conventions.md) | Соглашения по именованию, структуре компонентов, примеры best practices | +| [`tokens.md`](./tokens.md) | Список дизайн-токенов (цвета, типография, размеры, отступы) | +| [`icons.md`](./icons.md) | Доступные иконки и их имена | +| [`missing.md`](./missing.md) | Компоненты, которые есть в коде, но не документированы в Code Connect | + +## Валидация + +### Команда валидации + +```bash +npm run validate:figma-cc +``` + +### Что проверяет валидатор? + +Валидатор сканирует файлы по паттерну `src/lib/**/*.figma.md` и проверяет: + +✓ Наличие и корректность YAML frontmatter +✓ Обязательные поля: `component`, `selector`, `import.{symbol,from}`, `figma.{fileKey,nodeId,componentKey,name}`, `status`, `updated` +✓ Правильный порядок секций (Overview → Props mapping → Variants → Slots → Related → Do/Don't) +✓ Все code-fences содержат явный язык программирования +✓ Опциональные поля (если present): `deprecated.{replaceWith,since,reason}` + +### Примеры ошибок + +```bash +# ❌ Отсутствует frontmatter +src/lib/button/button.figma.md: missing frontmatter + +# ❌ Отсутствует обязательное поле +src/lib/button/button.figma.md: missing field figma + +# ❌ Нарушен порядок секций +src/lib/button/button.figma.md: section order violation near ## Related + +# ❌ Code-fence без языка +src/lib/button/button.figma.md: code-fence without language +``` + +### Валидация отдельного файла + +```bash +npm run validate:figma-cc src/lib/button/button.figma.md +``` + +## Примеры использования + +### Пример 1: Найти компонент по nodeId + +Дизайнер скопировал nodeId из Figma: `1:42` + +```bash +grep -r "nodeId.*1:42" src/lib +# src/lib/button/button.figma.md: figma: +# nodeId: '1:42' +``` + +Затем агент может прочитать `src/lib/button/button.figma.md` и получить полную информацию +о компоненте (селектор, имя для импорта и т.д.). + +### Пример 2: Отобразить все компоненты со статусом deprecated + +```bash +grep -l "status: deprecated" src/lib/**/*.figma.md +``` + +### Пример 3: Обновить дату последнего обновления + +```yaml +# Было +updated: '2026-06-15' + +# Стало +updated: '2026-06-22' +``` + +## Создание нового компонента Code Connect + +1. **Прочитайте** [`schema.md`](./schema.md) — полную спецификацию +2. **Создайте файл** `src/lib//.figma.md` +3. **Добавьте frontmatter** со всеми обязательными полями +4. **Напишите секции** в правильном порядке +5. **Валидируйте**: `npm run validate:figma-cc` +6. **Коммитьте** с message: `feat(figma-cc): add .figma.md` + +Пример структуры: + +```markdown +--- +component: ExtraButton +selector: extra-button +import: + symbol: ExtraButtonComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: 'abc123' + nodeId: '1:42' + componentKey: 'Button_primary' + name: 'Button / Primary' +status: stable +updated: '2026-06-22' +--- + +## Overview +Описание компонента... + +## Props mapping +Таблица свойств... + +## Variants +Описание вариантов... + +## Slots +Информация о slot'ах... + +## Related +Связанные компоненты и документы... + +## Do / Don't +Рекомендации... +``` + +## Важные замечания + +- **Только статические файлы**: Этот формат не требует интеграции с Figma API (в отличие от других решений Code Connect) +- **Git-friendly**: Файлы хорошо работают с системой контроля версий (читаемые, небольшие) +- **Человеко-читаемые**: Легко редактировать в обычном текстовом редакторе +- **Безопасные**: Можно безопасно хранить в репозитории (нет секретов Figma) + +## Контролеры и ответственность + +- **Разработчики компонентов**: Создают и обновляют `.figma.md` файлы +- **Дизайнеры**: Получают информацию о реализации компонентов +- **Агенты/интеграции**: Используют метаданные для синхронизации дизайна и кода + +## Дополнительные ресурсы + +- [Figma Code Connect Official Documentation](https://www.figma.com/developers/api#code-connect) +- [@cdek-it/angular-ui-kit на npm](https://www.npmjs.com/package/@cdek-it/angular-ui-kit) +- [Angular Components](https://angular.io/guide/component-overview) diff --git a/src/lib/figma-code-connect/schema.md b/src/lib/figma-code-connect/schema.md new file mode 100644 index 00000000..2b81cf91 --- /dev/null +++ b/src/lib/figma-code-connect/schema.md @@ -0,0 +1,294 @@ +# Схема файлов Figma Code Connect + +Этот документ описывает структуру и формат файлов Code Connect для компонентов `@cdek-it/angular-ui-kit`. + +## Формат файла + +Файлы Code Connect имеют расширение `.figma.md` и состоят из двух частей: +1. **Frontmatter** (YAML) — метаданные компонента +2. **Тело** (Markdown) — описание и примеры + +### Пример структуры + +```markdown +--- +component: ExtraButton +selector: extra-button +import: + symbol: ExtraButtonComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: 'abc123def456' + nodeId: '1:42' + componentKey: 'Button_primary' + name: 'Button / Primary' +status: stable +updated: '2026-06-22' +deprecated: + replaceWith: ExtraButtonV2 + since: '2.0.0' + reason: 'Migrated to Material Design v2' +--- + +## Overview +... +``` + +## Обязательные поля Frontmatter + +### Основная информация компонента + +- **`component`** (строка) + - Название компонента на TypeScript (UpperCamelCase) + - Пример: `ExtraButton`, `ExtraInputText`, `ExtraDialog` + +- **`selector`** (строка) + - CSS-селектор для использования в шаблонах (kebab-case) + - Пример: `extra-button`, `extra-input-text`, `extra-dialog` + +### Информация об импорте + +- **`import.symbol`** (строка) + - Экспортируемый символ из пакета + - Пример: `ExtraButtonComponent`, `ExtraInputTextComponent` + +- **`import.from`** (строка) + - Путь до импорта в пакете `@cdek-it/angular-ui-kit` + - Обычно: `@cdek-it/angular-ui-kit` + +### Информация о Figma + +- **`figma.fileKey`** (строка) + - Уникальный идентификатор Figma-файла из URL + - Пример: `abc123def456` (из `figma.com/file/abc123def456/...`) + +- **`figma.nodeId`** (строка) + - Уникальный идентификатор узла компонента в Figma + - Пример: `1:42`, `123:456` + +- **`figma.componentKey`** (строка) + - Ключ компонента в Figma (для библиотек) + - Пример: `Button_primary`, `InputText_default` + +- **`figma.name`** (строка) + - Отображаемое имя компонента в Figma + - Пример: `Button / Primary`, `Input Text / Default` + +### Статус и дата + +- **`status`** (строка, перечисление) + - Статус компонента: `stable`, `beta`, `deprecated`, `draft` + - Определяет, используется ли компонент в продакшене + +- **`updated`** (строка, ISO 8601 дата) + - Дата последнего обновления в формате `YYYY-MM-DD` + - Пример: `2026-06-22` + +## Опциональные поля Frontmatter + +### Информация об устаревании + +- **`deprecated.replaceWith`** (строка) + - Название компонента, который использовать вместо текущего + - Используется только если `status: deprecated` + +- **`deprecated.since`** (строка, семантическое версионирование) + - Версия, с которой компонент отмечен как deprecated + - Пример: `2.0.0` + +- **`deprecated.reason`** (строка) + - Описание причины устаревания + - Пример: `Migrated to Material Design v2` + +## Структура тела файла + +Тело должно содержать следующие секции в **строгом порядке**: + +### 1. `## Overview` +Краткое описание компонента и его предназначения. Обычно 1-3 абзаца. + +Пример: +```markdown +## Overview + +ExtraButton — универсальный компонент кнопки для выполнения действий. +Поддерживает различные варианты оформления, размеры и состояния. +``` + +### 2. `## Props mapping` +Таблица или описание входных свойств компонента (Input properties). + +Пример: +```markdown +## Props mapping + +| Свойство | Тип | Описание | +|----------|-----|---------| +| `label` | `string` | Текст кнопки | +| `disabled` | `boolean` | Отключить кнопку | +``` + +### 3. `## Variants` +Описание доступных вариантов компонента (primary, secondary, size variations и т.д.). + +Пример: +```markdown +## Variants + +- **Primary** — основная кнопка для главного действия +- **Secondary** — вторичная кнопка для дополнительных действий +- **Ghost** — невидимая кнопка только с текстом +``` + +### 4. `## Slots` +Описание именованных slot'ов для проектирования содержимого (если компонент их имеет). + +Пример: +```markdown +## Slots + +- **`default`** — основное содержимое кнопки (текст или иконка) +``` + +Если компонент не использует слоты, напишите: +```markdown +## Slots + +Не используются. +``` + +### 5. `## Related` +Ссылки на связанные компоненты, документацию или стандарты. + +Пример: +```markdown +## Related + +- [ButtonGroup](./button-group.figma.md) — группировка кнопок +- [Icon](./icon.figma.md) — иконки +- [Conventions](./conventions.md) — соглашения кодирования +``` + +### 6. `## Do / Don't` +Рекомендации и антипаттерны использования компонента. + +Пример: +```markdown +## Do / Don't + +**Do:** +- Используйте для основных действий на странице +- Выравнивайте кнопки по левому краю контейнера + +**Don't:** +- Не комбинируйте текст и иконку без пространства +- Не размещайте более 2 primary-кнопок рядом +``` + +## Правила форматирования + +### Code-fences +**Все примеры кода должны быть в отдельных блоках с явным указанием языка.** + +```typescript +// Правильно: язык явно указан +@Component({ + selector: 'extra-button', + template: '', +}) +export class ExtraButtonComponent {} +``` + +```html + + +``` + +**Запрещено:** +- Code-fences без языка (без спецификации после обратных кавычек) +- Inline-значения токенов прямо в примерах (используйте ссылки на `tokens.md`) +- Inline-иконки в примерах (используйте ссылки на `icons.md`) + +### Ссылки на глобальные документы + +При ссылке на вспомогательные документы используйте относительные пути: + +```markdown +- [Список токенов](./tokens.md) +- [Доступные иконки](./icons.md) +- [Соглашения](./conventions.md) +- [Отсутствующие компоненты](./missing.md) +``` + +### Языки кода + +Используйте следующие языки для code-fences: + +- **typescript** или **ts** — TypeScript и JavaScript +- **html** — HTML шаблоны +- **css** — Стили CSS +- **json** — JSON данные +- **yaml** — YAML конфигурация +- **bash** или **shell** — Bash/Shell команды + +## Порядок проверки валидатором + +Валидатор (`npm run validate:figma-cc`) проверяет в следующем порядке: + +1. Наличие frontmatter (YAML между `---...---`) +2. Корректность YAML синтаксиса +3. Наличие всех обязательных полей frontmatter +4. Наличие всех обязательных полей внутри `figma` +5. Порядок секций в теле файла +6. Наличие языка у всех code-fences + +Если какая-то проверка не пройдена, валидатор выведет ошибку и завершится с кодом 1. + +## Примеры полных файлов + +### Минимальный компонент (без deprecated) + +```markdown +--- +component: ExtraTag +selector: extra-tag +import: + symbol: ExtraTagComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: 'xyz789' + nodeId: '2:100' + componentKey: 'Tag_default' + name: 'Tag / Default' +status: stable +updated: '2026-06-22' +--- + +## Overview +ExtraTag — компонент для отображения меток. + +## Props mapping +| Свойство | Тип | Описание | +|----------|-----|---------| +| `value` | `string` | Текст метки | + +## Variants +- **Default** — стандартная метка + +## Slots +Не используются. + +## Related +- [Conventions](./conventions.md) + +## Do / Don't +**Do:** +- Используйте для категоризации контента +``` + +## Файлы, подлежащие валидации + +Валидатор сканирует только файлы по паттерну `src/lib/**/*.figma.md` и проверяет только их. + +Глобальные документы (schema.md, README.md, conventions.md, tokens.md, icons.md, missing.md) +**НЕ проверяются** валидатором и служат справочной информацией для разработчиков и агентов. From 7b4e24c0900be890994e4ae4422cda444681b269 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 22 Jun 2026 21:46:59 +0800 Subject: [PATCH 20/46] feat(figma-cc): add conventions --- src/lib/figma-code-connect/conventions.md | 354 ++++++++++++++++++++++ 1 file changed, 354 insertions(+) create mode 100644 src/lib/figma-code-connect/conventions.md diff --git a/src/lib/figma-code-connect/conventions.md b/src/lib/figma-code-connect/conventions.md new file mode 100644 index 00000000..0df5f366 --- /dev/null +++ b/src/lib/figma-code-connect/conventions.md @@ -0,0 +1,354 @@ +# Соглашения Figma Code Connect + +Этот документ описывает соглашения и best practices для написания файлов Code Connect (`.figma.md`) компонентов `@cdek-it/angular-ui-kit`. + +## Naming (Именование) + +### Селектор компонента (CSS) + +Все селекторы должны начинаться с префикса `extra-` в формате kebab-case: + +```html + + + + + + + + + +``` + +### Название класса компонента (TypeScript) + +Все классы компонентов должны следовать паттерну `ExtraComponent` в формате PascalCase: + +```typescript +// ✓ Правильно +export class ExtraButtonComponent {} +export class ExtraInputTextComponent {} +export class ExtraDialogComponent {} + +// ✗ Неправильно +export class ButtonComponent {} +export class CdekButtonComponent {} +export class ExtraButton {} +``` + +### Путь импорта + +Все импорты должны идти из пакета `@cdek-it/angular-ui-kit`: + +```typescript +// ✓ Правильно +import { ExtraButtonComponent } from '@cdek-it/angular-ui-kit'; +import { ExtraInputTextComponent, ExtraDialogComponent } from '@cdek-it/angular-ui-kit'; + +// ✗ Неправильно +import { ExtraButtonComponent } from './button/button.component'; +import { ExtraButtonComponent } from '@cdek-it/angular-ui-kit/button'; +``` + +--- + +## Figma property → Angular @Input Mapping (Маппинг свойств) + +Свойства компонентов в Figma должны маппироваться в Angular `@Input()` следующим образом: + +### Строковые свойства (Variant, Size, Style) + +Figma-свойства типа **Variant** маппируются в string-тип Angular inputs: + +```html + +Submit + + +Cancel + + + + + + +``` + +**Правило:** Значения Figma-свойств преобразуются в lowercase и передаются как строки без кавычек в шаблоне TypeScript. + +### Булевы свойства (State) + +Figma-свойства типа **State** маппируются в boolean inputs с использованием property binding `[prop]="true|false"`: + +```html + +Disabled Button + + +Enabled Button + + +Loading... + + + +``` + +**Правило:** Булевы свойства всегда используют property binding `[prop]="true"` или `[prop]="false"`, никогда не передаются как атрибуты без квадратных скобок. + +### Других типы свойств (Number, Text, Custom) + +Для числовых и пользовательских свойств используйте property binding: + +```html + + + + + + + +First +``` + +--- + +## Two-way Binding (Двусторонняя привязка) + +Компоненты, которые имеют изменяемое состояние, должны поддерживать двустороннюю привязку через `[()]` syntax: + +### Видимость (visible) + +```html + + +

Dialog content

+ + + + + +``` + +### Модель (ngModel) + +```html + + + + + + + + + +``` + +### Пользовательские свойства + +```html + + + + + + + + +``` + +**Правило:** Для двусторонней привязки компонент должен иметь пару: +- `@Input() propertyName` +- `@Output() propertyNameChange = new EventEmitter()` + +--- + +## Slots / Content Projection (Слоты и проектирование содержимого) + +### Структурные директивы (Structural Directives) + +Для более сложного проектирования содержимого используйте структурные директивы: + +```html + + +
+

Dialog Title

+
+

Dialog body content

+ + + + +

Dialog body content

+
+ Cancel + Submit +
+ +``` + +**Паттерн:** Структурные директивы следуют паттерну `*extra` (camelCase после компонента). + +### ng-content (Безымянные слоты) + +Для базового проектирования содержимого используйте ``: + +```html + + + + + + Click me + + + +Click me +``` + +### Несколько именованных слотов + +```html + +
+
+ +
+
+ +
+
+ +
+
+ + + +
+

Title

+
+

Body content

+
+ Cancel +
+ +``` + +**Правило:** +- Используйте структурные директивы (`*extra`) для более семантичного и удобного API +- Используйте `` для простого проектирования безымянного содержимого +- Используйте selector-based `ng-content` для типизированного проектирования нескольких слотов + +--- + +## Red Lines (Красные линии — антипаттерны) + +### ✗ Не описывайте приватные компоненты + +Только компоненты, экспортированные в `public_api.ts` библиотеки, должны иметь `.figma.md` файлы: + +```typescript +// ✓ Публичный компонент (экспортирован в public_api.ts) +export class ExtraButtonComponent {} + +// ✗ Приватный компонент (НЕ пишите для него .figma.md) +class _ExtraButtonBaseComponent {} // недокументируется +``` + +### ✗ Не дублируйте Storybook + +Файлы `.figma.md` — это метаданные для интеграции Figma, а не документация компонентов: + +```markdown + +## Overview +ExtraButton — универсальная кнопка для выполнения действий. + + +## Overview +ExtraButton — это компонент кнопки с поддержкой 15 вариантов, включая primary, secondary, +danger, ghost, с размерами small, base, large, и состояниями disabled, loading, focus... + +``` + +### ✗ Не описывайте runtime-логику + +`.figma.md` файлы описывают **структуру и маппинг**, а не implementation details: + +```markdown + +## Props mapping +| Свойство | Тип | Описание | +| disabled | boolean | Отключить кнопку | + + +## Props mapping +| Свойство | Тип | Описание | +| disabled | boolean | Устанавливает атрибут disabled на native button element внутри компонента и запускает CD | +``` + +### ✗ Не инлайньте значения токенов + +Используйте ссылки на `tokens.md` вместо копирования значений: + +```markdown + +## Variants +- **Primary** — использует токен `color-primary` [см. tokens.md](./tokens.md) + + +## Variants +- **Primary** — использует цвет #007AFF (primary blue) +``` + +### ✗ Не инлайньте названия иконок + +Используйте ссылки на `icons.md` вместо копирования списков: + +```markdown + +## Props mapping +| Свойство | Тип | Описание | +| icon | string | Имя иконки из доступного набора [см. icons.md](./icons.md) | + + +## Props mapping +| Свойство | Тип | Описание | +| icon | 'check' \| 'close' \| 'warning' \| 'info' \| 'success' | Иконка | +``` + +### ✗ Не создавайте отдельные файлы для вариантов + +Все варианты одного компонента описываются в **одном** файле: + +``` + +src/lib/button/ +├── button.figma.md # все варианты Button +└── button.component.ts + + +src/lib/button/ +├── button-primary.figma.md # ❌ отдельный файл для варианта +├── button-secondary.figma.md # ❌ отдельный файл для варианта +├── button.component.ts +└── button.variant.ts +``` + +--- + +## Файлы для справки + +- [`schema.md`](./schema.md) — Полная спецификация формата файлов +- [`tokens.md`](./tokens.md) — Список дизайн-токенов +- [`icons.md`](./icons.md) — Доступные иконки +- [`missing.md`](./missing.md) — Компоненты без Code Connect + +## Дополнительные ресурсы + +- [Figma Code Connect Official Documentation](https://www.figma.com/developers/api#code-connect) +- [Angular Template Syntax](https://angular.io/guide/template-syntax) +- [@cdek-it/angular-ui-kit Documentation](https://www.npmjs.com/package/@cdek-it/angular-ui-kit) From f32a3f30dc04d8318d9f6f123552bd599b8e867c Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 22 Jun 2026 21:49:35 +0800 Subject: [PATCH 21/46] feat(figma-cc): add tokens, icons, missing globals Add three reference documents for static Figma Code Connect feature: - tokens.md: Figma variables mapped to CSS/Tailwind (colors, spacing, radius, typography, shadows, opacity) - icons.md: PrimeIcons usage guide with common icon examples - missing.md: Backlog table for tracking unimplemented tokens and icons All three documents follow Russian documentation standard and serve as anchors for `.figma.md` component files. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/lib/figma-code-connect/icons.md | 55 +++++++++ src/lib/figma-code-connect/missing.md | 34 ++++++ src/lib/figma-code-connect/tokens.md | 158 ++++++++++++++++++++++++++ 3 files changed, 247 insertions(+) create mode 100644 src/lib/figma-code-connect/icons.md create mode 100644 src/lib/figma-code-connect/missing.md create mode 100644 src/lib/figma-code-connect/tokens.md diff --git a/src/lib/figma-code-connect/icons.md b/src/lib/figma-code-connect/icons.md new file mode 100644 index 00000000..970cd315 --- /dev/null +++ b/src/lib/figma-code-connect/icons.md @@ -0,0 +1,55 @@ +# Иконки (Icons) + +Справочник иконок для компонентов `@cdek-it/angular-ui-kit`. Используется библиотека **PrimeIcons** (часть PrimeNG). + +## Использование + +Иконки передаются в компоненты как строка в формате `'pi pi-'`: + +```typescript +import { ExtraButtonComponent } from '@cdek-it/angular-ui-kit'; + +// Использование в шаблоне + + +``` + +Цвет иконки наследуется от `currentColor` текущего контекста. + +## Часто используемые иконки (Common icons) + +| Figma слой | Код | Пример использования | +|-----------|------|-------------------| +| check | `'pi pi-check'` | `` | +| times | `'pi pi-times'` | `` | +| search | `'pi pi-search'` | `` | +| trash | `'pi pi-trash'` | `` | +| arrow-left | `'pi pi-arrow-left'` | `` | +| arrow-right | `'pi pi-arrow-right'` | `` | +| chevron-down | `'pi pi-chevron-down'` | `` | +| chevron-up | `'pi pi-chevron-up'` | `` | +| star | `'pi pi-star'` | `` | +| heart | `'pi pi-heart'` | `` | +| bell | `'pi pi-bell'` | `` | +| calendar | `'pi pi-calendar'` | `` | +| clock | `'pi pi-clock'` | `` | +| cog | `'pi pi-cog'` | `` | +| user | `'pi pi-user'` | `` | +| home | `'pi pi-home'` | `` | +| info | `'pi pi-info'` | `` | +| exclamation-triangle | `'pi pi-exclamation-triangle'` | `` | +| question | `'pi pi-question'` | `` | +| lock | `'pi pi-lock'` | `` | +| unlock | `'pi pi-unlock'` | `` | +| download | `'pi pi-download'` | `` | +| upload | `'pi pi-upload'` | `` | + +## Все иконки PrimeIcons + +Полный список иконок доступен на [primeng.org/icons](https://primeng.org/icons). Формат для использования: `'pi pi-'`, где `` — название иконки в kebab-case (например, `exclamation-triangle`, `arrow-left`). + +## Примечания + +- Иконки из PrimeIcons подключены автоматически через PrimeNG. +- Цвет контролируется через CSS или атрибут `severity` компонента. +- При необходимости новых иконок (не найденных в PrimeIcons) обратитесь к [`missing.md`](#missing.md). diff --git a/src/lib/figma-code-connect/missing.md b/src/lib/figma-code-connect/missing.md new file mode 100644 index 00000000..79a8714e --- /dev/null +++ b/src/lib/figma-code-connect/missing.md @@ -0,0 +1,34 @@ +# Backlog: отсутствующие токены и иконки (Missing) + +Таблица компонентов и токенов, которые еще не добавлены в Code Connect или требуют уточнения. + +## Описание + +Этот документ отслеживает: +- Токены из Figma, отсутствующие в коде или `tokens.md` +- Иконки, которые нужно добавить в `icons.md` +- Компоненты, требующие синхронизации + +**Важно:** не путать с `status: orphan-code` — это обратное: в коде есть элемент, которого нет в Figma. + +## Таблица backlog + +| Figma имя | nodeId | componentKey | Заметка | Статус | +|-----------|--------|--------------|---------|--------| +| _(пусто)_ | — | — | Нет текущих задач | — | + +## Добавление записей + +При обнаружении отсутствующего токена или иконки: +1. Добавьте строку в таблицу выше. +2. Заполните все поля: Figma имя, nodeId (из URL), componentKey, заметку и статус. +3. Статус: `pending` (ожидает реализации), `in-progress` (в работе), `blocked` (заблокирован). +4. После реализации измените статус на `done` или удалите строку. + +## Примеры + +```markdown +| custom-token-primary | node_abc123 | custom.primary | Новый цвет бренда | pending | +| expand-icon | node_def456 | icons.expand | Иконка разворота меню | in-progress | +| avatar-xl | node_ghi789 | components.avatar.xl | Размер XL для аватара | blocked | +``` diff --git a/src/lib/figma-code-connect/tokens.md b/src/lib/figma-code-connect/tokens.md new file mode 100644 index 00000000..e90a4076 --- /dev/null +++ b/src/lib/figma-code-connect/tokens.md @@ -0,0 +1,158 @@ +# Токены дизайна (Design Tokens) + +Справочник токенов Figma, используемых в `@cdek-it/angular-ui-kit`. Токены разбиты на категории: примитивные (primitive) и семантические (semantic). + +## Цвета (Colors) + +### Основные цвета (Solid colors) + +Примитивные цвета из палитры доступны в 11 оттенках (50, 100, 200, ..., 900, 950): + +| Цвет | Примеры оттенков | CSS переменная | +|------|-----------------|----------------| +| Зелёный (green) | #dcfce7, #bbf7d0, #86efac, #22c55e, #059669 | `--p-green-500` | +| Красный (red) | #fee2e2, #fca5a5, #f87171, #ef4444, #b91c1c | `--p-red-500` | +| Синий (blue) | #dbeafe, #93c5fd, #3b82f6, #1d4ed8, #1e40af | `--p-blue-500` | +| Жёлтый (yellow) | #fef3c7, #fde047, #facc15, #eab308, #ca8a04 | `--p-yellow-500` | +| Фиолетовый (purple) | #f3e8ff, #d8b4fe, #a855f7, #7e22ce, #6b21a8 | `--p-purple-500` | +| Цинк (zinc) | #f4f4f5, #d4d4d8, #71717a, #27272a, #09090b | `--p-zinc-500` | + +Доступные цвета: amber, blue, cyan, emerald, fuchsia, gray, green, indigo, lime, neutral, orange, pink, purple, red, rose, sky, slate, stone, teal, violet, yellow, zinc. + +### Семантические цвета (Semantic colors) + +Привязаны к смыслу (фон, текст, бордер и т.д.): + +#### ### color-background + +| Название | Светлая тема | Тёмная тема | Использование | +|----------|--------------|------------|----------------| +| surface.ground | `#f4f4f5` | `#18181b` | Базовый фон | +| surface.section | `#ffffff` | `#27272a` | Фон секций, панелей | +| background.brand.bold | `#22c55e` (green-500) | `#16a34a` | Активные элементы, основные кнопки | +| background.success.bold | `#22c55e` (green-500) | `#16a34a` | Успех | +| background.danger.bold | `#ef4444` (red-500) | `#dc2626` | Ошибка, удаление | +| background.warning.bold | `#eab308` (yellow-500) | `#ca8a04` | Предупреждение | +| background.info.bold | `#3b82f6` (blue-500) | `#2563eb` | Информация | +| background.help.bold | `#a855f7` (purple-500) | `#9333ea` | Справка | + +#### ### color-text + +| Название | Светлая тема | Тёмная тема | Использование | +|----------|--------------|------------|----------------| +| text.default | `#18181b` (zinc-900) | `#fafafa` | Основной текст | +| text.subtle | `#52525b` (zinc-600) | `#a1a1aa` | Вторичный текст | +| text.muted | `#71717a` (zinc-500) | `#71717a` | Выключенный текст | +| text.disabled | `#d4d4d8` (zinc-300) | `#52525b` | Недоступный текст | +| text.onBold | `#ffffff` | `#ffffff` | Текст на ярких фонах | +| text.link | `#16a34a` (green-600) | `#22c55e` | Ссылки | + +#### ### color-border + +| Название | Светлая тема | Тёмная тема | Использование | +|----------|--------------|------------|----------------| +| border.default | `#e4e4e7` (zinc-200) | `#52525b` | Основной бордер | +| border.subtle | `#e4e4e7` (zinc-200) | `#3f3f46` | Мягкий бордер | +| border.muted | `#f4f4f5` (zinc-100) | `#3f3f46` | Едва заметный бордер | + +#### ### color-icon + +| Название | Светлая тема | Тёмная тема | Использование | +|----------|--------------|------------|----------------| +| icon.default | `#52525b` (zinc-600) | `#a1a1aa` | Основной цвет иконок | +| icon.subtle | `#71717a` (zinc-500) | `#71717a` | Вторичные иконки | +| icon.muted | `#d4d4d8` (zinc-300) | `#52525b` | Отключённые иконки | + +## Интервалы (Spacing) + +Используется 12-кратная система на основе `0.25rem` (4px): + +| Токен | Значение | CSS переменная | Использование | +|-------|----------|----------------|----------------| +| `1x` | 0.25rem (4px) | `--p-spacing-1` | Минимальный отступ | +| `2x` | 0.5rem (8px) | `--p-spacing-2` | Маленький отступ | +| `3x` | 0.75rem (12px) | `--p-spacing-3` | Отступ между элементами | +| `4x` | 1rem (16px) | `--p-spacing-4` | Стандартный отступ | +| `6x` | 1.5rem (24px) | `--p-spacing-6` | Больший отступ | +| `8x` | 2rem (32px) | `--p-spacing-8` | Крупный отступ | +| `12x` | 3rem (48px) | `--p-spacing-12` | Очень крупный отступ | + +Доступны значения: none, min, 2px, 1x–120x, pill, max. + +## Скругления (Radius) + +| Токен | Значение | CSS переменная | Использование | +|-------|----------|----------------|----------------| +| ### radius-none | 0rem | `--p-radius-0` | Прямые углы | +| ### radius-100 | 0.25rem (4px) | `--p-radius-100` | Небольшое скругление | +| ### radius-200 | 0.5rem (8px) | `--p-radius-200` | Стандартное скругление | +| ### radius-300 | 0.75rem (12px) | `--p-radius-300` | Умеренное скругление | +| ### radius-400 | 1rem (16px) | `--p-radius-400` | Выраженное скругление | +| ### radius-500 | 1.5rem (24px) | `--p-radius-500` | Большое скругление | +| ### radius-max | 71.357rem (pill) | `--p-radius-max` | Круглая кнопка, таблетка | + +## Типография (Typography) + +### Шрифты + +| Категория | Семейство | Использование | +|-----------|-----------|----------------| +| ### font-heading | TT Fellows | Заголовки, крупный текст | +| ### font-base | PT Sans | Основной текст, интерфейс | + +### Размеры шрифта + +| Размер | Значение | CSS переменная | Использование | +|--------|----------|----------------|----------------| +| 100 | 0.75rem (12px) | `--p-font-size-100` | Caption, подпись | +| 200 | 0.875rem (14px) | `--p-font-size-200` | Label small | +| 300 | 1rem (16px) | `--p-font-size-300` | Body, label | +| 400 | 1.125rem (18px) | `--p-font-size-400` | Body large | +| 500 | 1.25rem (20px) | `--p-font-size-500` | Heading small | +| 600 | 1.5rem (24px) | `--p-font-size-600` | Heading medium | +| 700 | 2.25rem (36px) | `--p-font-size-700` | Heading large | +| 750 | 3rem (48px) | `--p-font-size-750` | Heading extra-large | + +### Полужирность (Font weights) + +| Вес | Значение | CSS переменная | Использование | +|-----|----------|----------------|----------------| +| ### font-weight-regular | 400 | `--p-font-weight-regular` | Основной текст | +| ### font-weight-medium | 500 | `--p-font-weight-medium` | Label, emphasis | +| ### font-weight-demibold | 600 | `--p-font-weight-demibold` | Подзаголовки, heading | +| ### font-weight-bold | 700 | `--p-font-weight-bold` | Заголовки, выделение | + +### Высота строки (Line height) + +| Токен | Значение | Использование | +|-------|----------|----------------| +| ### line-height-250 | 1rem | Caption, маленький текст | +| ### line-height-300 | 1.0714rem | Label small | +| ### line-height-400 | 1.2857rem | Label, body small | +| ### line-height-500 | 1.5rem | Body, основной текст | +| ### line-height-550 | 1.5714rem | Body large | +| ### line-height-600 | 1.7143rem | Heading small | +| ### line-height-700 | 1.8571rem | Heading medium | +| ### line-height-900 | 2.7857rem | Heading large | +| ### line-height-auto | auto | Автоматическая высота | + +## Тени (Shadows) + +| Уровень | CSS переменная | Использование | +|---------|----------------|----------------| +| ### shadow-none | `--p-shadow-none` | Без тени | +| ### shadow-100 | `--p-shadow-100` | Лёгкая тень (hover) | +| ### shadow-200 | `--p-shadow-200` | Мягкая тень | +| ### shadow-300 | `--p-shadow-300` | Средняя тень | +| ### shadow-400 | `--p-shadow-400` | Глубокая тень | +| ### shadow-500 | `--p-shadow-500` | Очень глубокая тень (модальные окна) | + +## Прозрачность (Opacity) + +Доступны уровни прозрачности для белого и чёрного с шагом 10% (от 0.1 до 1.0). + +## Примечания + +- Все токены привязаны к переменным Figma и синхронизируются с `src/lib/providers/prime-preset/tokens/tokens.json`. +- Для Tailwind используются CSS переменные через `theme.extend.colors`. +- При отсутствии значения в коде обратитесь к [`missing.md`](#missing.md). From 9f7f4f61875bc3a484cf1438c74aeb724adfed5c Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 22 Jun 2026 21:51:49 +0800 Subject: [PATCH 22/46] fix(figma-cc): tokens.md heading syntax for valid anchors --- src/lib/figma-code-connect/tokens.md | 64 ++++++++++++++-------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/src/lib/figma-code-connect/tokens.md b/src/lib/figma-code-connect/tokens.md index e90a4076..3bff677c 100644 --- a/src/lib/figma-code-connect/tokens.md +++ b/src/lib/figma-code-connect/tokens.md @@ -23,7 +23,7 @@ Привязаны к смыслу (фон, текст, бордер и т.д.): -#### ### color-background +#### color-background | Название | Светлая тема | Тёмная тема | Использование | |----------|--------------|------------|----------------| @@ -36,7 +36,7 @@ | background.info.bold | `#3b82f6` (blue-500) | `#2563eb` | Информация | | background.help.bold | `#a855f7` (purple-500) | `#9333ea` | Справка | -#### ### color-text +#### color-text | Название | Светлая тема | Тёмная тема | Использование | |----------|--------------|------------|----------------| @@ -47,7 +47,7 @@ | text.onBold | `#ffffff` | `#ffffff` | Текст на ярких фонах | | text.link | `#16a34a` (green-600) | `#22c55e` | Ссылки | -#### ### color-border +#### color-border | Название | Светлая тема | Тёмная тема | Использование | |----------|--------------|------------|----------------| @@ -55,7 +55,7 @@ | border.subtle | `#e4e4e7` (zinc-200) | `#3f3f46` | Мягкий бордер | | border.muted | `#f4f4f5` (zinc-100) | `#3f3f46` | Едва заметный бордер | -#### ### color-icon +#### color-icon | Название | Светлая тема | Тёмная тема | Использование | |----------|--------------|------------|----------------| @@ -83,13 +83,13 @@ | Токен | Значение | CSS переменная | Использование | |-------|----------|----------------|----------------| -| ### radius-none | 0rem | `--p-radius-0` | Прямые углы | -| ### radius-100 | 0.25rem (4px) | `--p-radius-100` | Небольшое скругление | -| ### radius-200 | 0.5rem (8px) | `--p-radius-200` | Стандартное скругление | -| ### radius-300 | 0.75rem (12px) | `--p-radius-300` | Умеренное скругление | -| ### radius-400 | 1rem (16px) | `--p-radius-400` | Выраженное скругление | -| ### radius-500 | 1.5rem (24px) | `--p-radius-500` | Большое скругление | -| ### radius-max | 71.357rem (pill) | `--p-radius-max` | Круглая кнопка, таблетка | +| radius-none | 0rem | `--p-radius-0` | Прямые углы | +| radius-100 | 0.25rem (4px) | `--p-radius-100` | Небольшое скругление | +| radius-200 | 0.5rem (8px) | `--p-radius-200` | Стандартное скругление | +| radius-300 | 0.75rem (12px) | `--p-radius-300` | Умеренное скругление | +| radius-400 | 1rem (16px) | `--p-radius-400` | Выраженное скругление | +| radius-500 | 1.5rem (24px) | `--p-radius-500` | Большое скругление | +| radius-max | 71.357rem (pill) | `--p-radius-max` | Круглая кнопка, таблетка | ## Типография (Typography) @@ -97,8 +97,8 @@ | Категория | Семейство | Использование | |-----------|-----------|----------------| -| ### font-heading | TT Fellows | Заголовки, крупный текст | -| ### font-base | PT Sans | Основной текст, интерфейс | +| font-heading | TT Fellows | Заголовки, крупный текст | +| font-base | PT Sans | Основной текст, интерфейс | ### Размеры шрифта @@ -117,35 +117,35 @@ | Вес | Значение | CSS переменная | Использование | |-----|----------|----------------|----------------| -| ### font-weight-regular | 400 | `--p-font-weight-regular` | Основной текст | -| ### font-weight-medium | 500 | `--p-font-weight-medium` | Label, emphasis | -| ### font-weight-demibold | 600 | `--p-font-weight-demibold` | Подзаголовки, heading | -| ### font-weight-bold | 700 | `--p-font-weight-bold` | Заголовки, выделение | +| font-weight-regular | 400 | `--p-font-weight-regular` | Основной текст | +| font-weight-medium | 500 | `--p-font-weight-medium` | Label, emphasis | +| font-weight-demibold | 600 | `--p-font-weight-demibold` | Подзаголовки, heading | +| font-weight-bold | 700 | `--p-font-weight-bold` | Заголовки, выделение | ### Высота строки (Line height) | Токен | Значение | Использование | |-------|----------|----------------| -| ### line-height-250 | 1rem | Caption, маленький текст | -| ### line-height-300 | 1.0714rem | Label small | -| ### line-height-400 | 1.2857rem | Label, body small | -| ### line-height-500 | 1.5rem | Body, основной текст | -| ### line-height-550 | 1.5714rem | Body large | -| ### line-height-600 | 1.7143rem | Heading small | -| ### line-height-700 | 1.8571rem | Heading medium | -| ### line-height-900 | 2.7857rem | Heading large | -| ### line-height-auto | auto | Автоматическая высота | +| line-height-250 | 1rem | Caption, маленький текст | +| line-height-300 | 1.0714rem | Label small | +| line-height-400 | 1.2857rem | Label, body small | +| line-height-500 | 1.5rem | Body, основной текст | +| line-height-550 | 1.5714rem | Body large | +| line-height-600 | 1.7143rem | Heading small | +| line-height-700 | 1.8571rem | Heading medium | +| line-height-900 | 2.7857rem | Heading large | +| line-height-auto | auto | Автоматическая высота | ## Тени (Shadows) | Уровень | CSS переменная | Использование | |---------|----------------|----------------| -| ### shadow-none | `--p-shadow-none` | Без тени | -| ### shadow-100 | `--p-shadow-100` | Лёгкая тень (hover) | -| ### shadow-200 | `--p-shadow-200` | Мягкая тень | -| ### shadow-300 | `--p-shadow-300` | Средняя тень | -| ### shadow-400 | `--p-shadow-400` | Глубокая тень | -| ### shadow-500 | `--p-shadow-500` | Очень глубокая тень (модальные окна) | +| shadow-none | `--p-shadow-none` | Без тени | +| shadow-100 | `--p-shadow-100` | Лёгкая тень (hover) | +| shadow-200 | `--p-shadow-200` | Мягкая тень | +| shadow-300 | `--p-shadow-300` | Средняя тень | +| shadow-400 | `--p-shadow-400` | Глубокая тень | +| shadow-500 | `--p-shadow-500` | Очень глубокая тень (модальные окна) | ## Прозрачность (Opacity) From 4e482b35fa5ec69aeef36954f75518037e314758 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 22 Jun 2026 22:13:09 +0800 Subject: [PATCH 23/46] feat(figma-cc): add button.figma.md pilot --- src/lib/components/button/button.figma.md | 176 ++++++++++++++++++++++ 1 file changed, 176 insertions(+) create mode 100644 src/lib/components/button/button.figma.md diff --git a/src/lib/components/button/button.figma.md b/src/lib/components/button/button.figma.md new file mode 100644 index 00000000..8e753352 --- /dev/null +++ b/src/lib/components/button/button.figma.md @@ -0,0 +1,176 @@ +--- +component: ExtraButton +selector: extra-button +import: + symbol: ExtraButtonComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: 'Khh7arsuXss3ncqy1Dz3OZ' + nodeId: '160:5223' + componentKey: '78978b6676b9ce8c25a312d5fb52ee06805c8fa2' + name: 'Button.Base' +status: stable +updated: '2026-06-22' +--- + +## Overview + +`ExtraButton` — универсальный компонент кнопки для инициации действий, отправки форм и навигации. Оборачивает PrimeNG `p-button` и расширяет его дополнительными вариантами отображения, размерами и поддержкой бейджа. + +Компонент соответствует Figma-компоненту `` (nodeId `160:5223`) и `` (nodeId `162:5457`). + +## Props mapping + +| Свойство | Тип | По умолчанию | Описание | +|----------|-----|--------------|---------| +| `label` | `string` | `'Button'` | Текст кнопки | +| `variant` | `'primary' \| 'secondary' \| 'outlined' \| 'text' \| 'link'` | `'primary'` | Вариант отображения — соответствует Figma-свойству `variant` | +| `severity` | `'success' \| 'warning' \| 'danger' \| 'info' \| null` | `null` | Семантический акцент — соответствует Figma-компоненту `` и аналогам | +| `size` | `'small' \| 'base' \| 'large' \| 'xlarge'` | `'base'` | Размер кнопки — соответствует Figma-свойству `size` | +| `icon` | `string` | `''` | CSS-класс иконки (например `'pi pi-check'`); доступные иконки — [icons.md](../../figma-code-connect/icons.md) | +| `iconPos` | `'prefix' \| 'postfix' \| null` | `null` | Позиция иконки — соответствует Figma-свойству `icon-position` | +| `iconOnly` | `boolean` | `false` | Режим «только иконка» без текста — соответствует Figma-свойству `icon-only` | +| `disabled` | `boolean` | `false` | Отключённое состояние — соответствует Figma-состоянию `state=disabled` | +| `loading` | `boolean` | `false` | Состояние загрузки со спиннером — соответствует Figma-состоянию `state=loading` | +| `rounded` | `boolean` | `false` | Скруглённая форма кнопки — соответствует Figma-свойству `rounded` | +| `fluid` | `boolean` | `false` | Растяжение кнопки на всю ширину контейнера | +| `showBadge` | `boolean` | `false` | Показывать бейдж поверх кнопки | +| `badge` | `string` | `''` | Текст бейджа (отображается только при `showBadge=true`) | +| `badgeSeverity` | `'success' \| 'info' \| 'warning' \| 'danger' \| 'secondary' \| 'contrast' \| null` | `null` | Цветовая схема бейджа; цвета соответствуют токенам [tokens.md](../../figma-code-connect/tokens.md) | +| `text` | `boolean` | `false` | Текстовый вариант без фона и рамки (алиас для `variant='text'`) | +| `ariaLabel` | `string \| undefined` | `undefined` | Метка для программ экранного доступа | +| `autofocus` | `boolean` | `false` | Автофокус при монтировании компонента | +| `tabindex` | `number \| undefined` | `undefined` | Порядок перехода по Tab | + +## Variants + +### Primary / Base (основная кнопка) + +Figma: ``, variant=primary, size=base, state=default — nodeId `160:5223` + +```html + +```html + +### Secondary / Base (вторичная кнопка) + +Figma: ``, variant=tertiary (в коде: `variant="secondary"`), size=base, state=default + +```html + +```html + +### Outlined / Large (контурная кнопка, большой размер) + +Figma: ``, variant=outlined, size=large, state=default + +```html + +```html + +### Text / Base (текстовая кнопка) + +Figma: ``, variant=text, size=base, state=default + +```html + +```html + +### Link / Base (кнопка-ссылка) + +Figma: ``, variant=link, size=base, state=default + +```html + +```html + +### С иконкой слева (prefix) + +Figma: ``, icon-position=prefix, icon-only=false + +```html + +```html + +### Только иконка (icon-only) + +Figma: ``, icon-only=true + +```html + +```html + +### Состояние загрузки (loading) + +Figma: ``, state=loading + +```html + +```html + +### Danger (деструктивное действие) + +Figma: ``, nodeId `162:5457`, componentKey `071aae3b46b09cd249c18e1942ca7db77051f6f0` + +Использует токен `background.danger.bold` — подробности в [tokens.md](../../figma-code-connect/tokens.md#color-background). + +```html + +```html + +### С бейджем + +```html + +```html + +### Скруглённая (rounded) + +Figma: ``, rounded=true + +```html + +```html + +### Fluid (на всю ширину) + +```html + +```html + +## Slots + +Не используются. Содержимое кнопки передаётся через `@Input() label` и `@Input() icon`. + +## Related + +- [Иконки](../../figma-code-connect/icons.md) — доступные иконки (`pi pi-*`) +- [Токены](../../figma-code-connect/tokens.md) — цветовые токены severity и badge +- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular + +## Do / Don't + +**Do:** +- Используйте `variant="primary"` для единственного главного действия на экране +- Для деструктивных действий задавайте `severity="danger"` и добавляйте иконку через [icons.md](../../figma-code-connect/icons.md) +- При кнопке только с иконкой всегда задавайте `ariaLabel` для доступности +- Используйте `[fluid]="true"` в мобильных макетах и формах на всю ширину + +**Don't:** +- Не размещайте две кнопки `variant="primary"` рядом без явной иерархии +- Не инлайньте CSS-классы иконок вручную — используйте справочник [icons.md](../../figma-code-connect/icons.md) +- Не используйте `severity` вместо `variant` для смены формы кнопки: `severity` меняет цвет, `variant` — форму +- Не передавайте `[iconOnly]="true"` без `icon` — кнопка окажется пустой From db5075c65c059ccc3666a63b6d3894b2adf550d0 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 22 Jun 2026 22:23:46 +0800 Subject: [PATCH 24/46] =?UTF-8?q?fix(figma-cc):=20align=20code-fence=20rul?= =?UTF-8?q?e=20with=20CommonMark=20=E2=80=94=20language=20on=20opening=20f?= =?UTF-8?q?ence=20only?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Opening fences require a language tag (html/ts/scss); closing fences must be bare ``` per CommonMark/GitHub spec. Updated validator logic (odd-index check), fixtures, schema.md, README.md, and button.figma.md accordingly. Added invalid-missing-open-fence-language fixture + test. Added variant='text' Do/Don't rule to button.figma.md. Co-Authored-By: Claude Sonnet 4.6 --- ...valid-missing-open-fence-language.figma.md | 40 +++++++++++++++++++ .../invalid-wrong-section-order.figma.md | 2 +- .../__fixtures__/valid.figma.md | 2 +- scripts/figma-code-connect/validate.mjs | 8 +++- scripts/figma-code-connect/validate.test.mjs | 5 +++ src/lib/components/button/button.figma.md | 25 ++++++------ src/lib/figma-code-connect/README.md | 4 +- src/lib/figma-code-connect/schema.md | 23 +++++------ 8 files changed, 77 insertions(+), 32 deletions(-) create mode 100644 scripts/figma-code-connect/__fixtures__/invalid-missing-open-fence-language.figma.md diff --git a/scripts/figma-code-connect/__fixtures__/invalid-missing-open-fence-language.figma.md b/scripts/figma-code-connect/__fixtures__/invalid-missing-open-fence-language.figma.md new file mode 100644 index 00000000..304737f0 --- /dev/null +++ b/scripts/figma-code-connect/__fixtures__/invalid-missing-open-fence-language.figma.md @@ -0,0 +1,40 @@ +--- +component: extra-fixture +selector: extra-fixture +import: + symbol: ExtraFixtureComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: TESTKEY + nodeId: '1:2' + componentKey: stable-key + name: 'Fixture' +status: stable +updated: 2026-06-22 +--- + +## Overview +Тестовый компонент. + +## Props mapping +| Figma | Angular | Type | Notes | +|-------|---------|------|-------| +| Size | size | 'sm' | | + +## Variants +### Default +Figma nodeId: `1:3` + +``` + +``` + +## Slots +Нет. + +## Related +Нет. + +## Do / Don't +- ✅ ОК. +- ❌ Не ОК. diff --git a/scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md b/scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md index ccf17e86..e1958e95 100644 --- a/scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md +++ b/scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md @@ -22,7 +22,7 @@ Figma nodeId: `1:3` ```html -```html +``` ## Props mapping | Figma | Angular | Type | Notes | diff --git a/scripts/figma-code-connect/__fixtures__/valid.figma.md b/scripts/figma-code-connect/__fixtures__/valid.figma.md index ab905e55..a2956d6c 100644 --- a/scripts/figma-code-connect/__fixtures__/valid.figma.md +++ b/scripts/figma-code-connect/__fixtures__/valid.figma.md @@ -27,7 +27,7 @@ Figma nodeId: `1:3` ```html -```html +``` ## Slots Нет. diff --git a/scripts/figma-code-connect/validate.mjs b/scripts/figma-code-connect/validate.mjs index 5a050517..914847ee 100644 --- a/scripts/figma-code-connect/validate.mjs +++ b/scripts/figma-code-connect/validate.mjs @@ -24,8 +24,12 @@ export async function validateFile(path) { break; } } - for (const f of [...body.matchAll(/^```(\w*)$/gm)]) - if (!f[1]) errors.push(`${path}: code-fence without language`); + const fences = [...body.matchAll(/^```(\w*)$/gm)]; + for (let i = 0; i < fences.length; i++) { + // Only opening fences (even index: 0, 2, 4, …) must carry a language. + // Closing fences (odd index) are bare ``` per CommonMark spec. + if (i % 2 === 0 && !fences[i][1]) errors.push(`${path}: code-fence without language`); + } return errors; } diff --git a/scripts/figma-code-connect/validate.test.mjs b/scripts/figma-code-connect/validate.test.mjs index 9177fe0e..5008a3eb 100644 --- a/scripts/figma-code-connect/validate.test.mjs +++ b/scripts/figma-code-connect/validate.test.mjs @@ -16,3 +16,8 @@ test('wrong section order fails', async () => { const errors = await validateFile('scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md'); assert.ok(errors.some(e => /order/i.test(e))); }); + +test('missing open fence language fails', async () => { + const errors = await validateFile('scripts/figma-code-connect/__fixtures__/invalid-missing-open-fence-language.figma.md'); + assert.ok(errors.some(e => /code-fence/i.test(e))); +}); diff --git a/src/lib/components/button/button.figma.md b/src/lib/components/button/button.figma.md index 8e753352..7d81e513 100644 --- a/src/lib/components/button/button.figma.md +++ b/src/lib/components/button/button.figma.md @@ -50,7 +50,7 @@ Figma: ``, variant=primary, size=base, state=default — nodeId `16 ```html -```html +``` ### Secondary / Base (вторичная кнопка) @@ -58,7 +58,7 @@ Figma: ``, variant=tertiary (в коде: `variant="secondary"`), s ```html -```html +``` ### Outlined / Large (контурная кнопка, большой размер) @@ -66,7 +66,7 @@ Figma: ``, variant=outlined, size=large, state=default ```html -```html +``` ### Text / Base (текстовая кнопка) @@ -74,7 +74,7 @@ Figma: ``, variant=text, size=base, state=default ```html -```html +``` ### Link / Base (кнопка-ссылка) @@ -82,7 +82,7 @@ Figma: ``, variant=link, size=base, state=default ```html -```html +``` ### С иконкой слева (prefix) @@ -94,7 +94,7 @@ Figma: ``, icon-position=prefix, icon-only=false icon="pi pi-plus" iconPos="prefix" > -```html +``` ### Только иконка (icon-only) @@ -106,7 +106,7 @@ Figma: ``, icon-only=true [iconOnly]="true" ariaLabel="Удалить" > -```html +``` ### Состояние загрузки (loading) @@ -114,7 +114,7 @@ Figma: ``, state=loading ```html -```html +``` ### Danger (деструктивное действие) @@ -124,7 +124,7 @@ Figma: ``, nodeId `162:5457`, componentKey `071aae3b46b09cd249c18 ```html -```html +``` ### С бейджем @@ -135,7 +135,7 @@ Figma: ``, nodeId `162:5457`, componentKey `071aae3b46b09cd249c18 badge="3" badgeSeverity="danger" > -```html +``` ### Скруглённая (rounded) @@ -143,13 +143,13 @@ Figma: ``, rounded=true ```html -```html +``` ### Fluid (на всю ширину) ```html -```html +``` ## Slots @@ -164,6 +164,7 @@ Figma: ``, rounded=true ## Do / Don't **Do:** +- Используйте `variant="text"` для текстовых кнопок; `[text]="true"` оставлен только как алиас для совместимости с PrimeNG. - Используйте `variant="primary"` для единственного главного действия на экране - Для деструктивных действий задавайте `severity="danger"` и добавляйте иконку через [icons.md](../../figma-code-connect/icons.md) - При кнопке только с иконкой всегда задавайте `ariaLabel` для доступности diff --git a/src/lib/figma-code-connect/README.md b/src/lib/figma-code-connect/README.md index d3617f7e..ae523890 100644 --- a/src/lib/figma-code-connect/README.md +++ b/src/lib/figma-code-connect/README.md @@ -96,7 +96,7 @@ npm run validate:figma-cc ✓ Наличие и корректность YAML frontmatter ✓ Обязательные поля: `component`, `selector`, `import.{symbol,from}`, `figma.{fileKey,nodeId,componentKey,name}`, `status`, `updated` ✓ Правильный порядок секций (Overview → Props mapping → Variants → Slots → Related → Do/Don't) -✓ Все code-fences содержат явный язык программирования +✓ Открывающие code-fences содержат явный язык программирования (закрывающие — без языка, стандарт CommonMark) ✓ Опциональные поля (если present): `deprecated.{replaceWith,since,reason}` ### Примеры ошибок @@ -111,7 +111,7 @@ src/lib/button/button.figma.md: missing field figma # ❌ Нарушен порядок секций src/lib/button/button.figma.md: section order violation near ## Related -# ❌ Code-fence без языка +# ❌ Открывающий code-fence без языка src/lib/button/button.figma.md: code-fence without language ``` diff --git a/src/lib/figma-code-connect/schema.md b/src/lib/figma-code-connect/schema.md index 2b81cf91..206314be 100644 --- a/src/lib/figma-code-connect/schema.md +++ b/src/lib/figma-code-connect/schema.md @@ -188,24 +188,19 @@ ExtraButton — универсальный компонент кнопки дл ## Правила форматирования ### Code-fences -**Все примеры кода должны быть в отдельных блоках с явным указанием языка.** - -```typescript -// Правильно: язык явно указан -@Component({ - selector: 'extra-button', - template: '', -}) -export class ExtraButtonComponent {} -``` +Каждый **ОТКРЫВАЮЩИЙ** code-fence обязан иметь язык (`html`, `ts`, `scss`). Закрывающий fence — без языка (стандарт CommonMark). + +Пример (открывающий с языком, закрывающий — пустой): +````markdown ```html - - + ``` +```` **Запрещено:** -- Code-fences без языка (без спецификации после обратных кавычек) +- Открывающий code-fence без языка (без спецификации после обратных кавычек) +- Закрывающий fence с языком (нестандартно, игнорируется рендерерами) - Inline-значения токенов прямо в примерах (используйте ссылки на `tokens.md`) - Inline-иконки в примерах (используйте ссылки на `icons.md`) @@ -240,7 +235,7 @@ export class ExtraButtonComponent {} 3. Наличие всех обязательных полей frontmatter 4. Наличие всех обязательных полей внутри `figma` 5. Порядок секций в теле файла -6. Наличие языка у всех code-fences +6. Наличие языка у открывающих code-fences (закрывающие fences должны быть без языка) Если какая-то проверка не пройдена, валидатор выведет ошибку и завершится с кодом 1. From 8418b4892d334d5628b6bf2dc20d0cfd1fbdb9fe Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 22 Jun 2026 22:39:38 +0800 Subject: [PATCH 25/46] feat(figma-cc): add inputtext.figma.md pilot Adds Code Connect file for ExtraInputTextComponent with Figma hit: componentSet nodeId 15:13444, componentKey b8bc649d..., fileKey HOLKdvQJ8jCLeX17s9d0Yf (UI Kit DS v2.0). Maps all @Inputs (placeholder, size, readonly, showClear, fluid, disabled via CVA), 6 variants, Do/Don't rules. Validator exits 0. Co-Authored-By: Claude Sonnet 4.6 --- .../components/inputtext/inputtext.figma.md | 144 ++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 src/lib/components/inputtext/inputtext.figma.md diff --git a/src/lib/components/inputtext/inputtext.figma.md b/src/lib/components/inputtext/inputtext.figma.md new file mode 100644 index 00000000..598e5d73 --- /dev/null +++ b/src/lib/components/inputtext/inputtext.figma.md @@ -0,0 +1,144 @@ +--- +component: ExtraInputText +selector: extra-input-text +import: + symbol: ExtraInputTextComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: 'HOLKdvQJ8jCLeX17s9d0Yf' + nodeId: '15:13444' + componentKey: 'b8bc649d1acf7132183bed9af9df322dcab6ab9e' + name: '' +status: stable +updated: '2026-06-22' +--- + +## Overview + +`ExtraInputTextComponent` — атомарное однострочное поле для ввода короткого свободного текста (имя, email, строка поиска). Реализует `ControlValueAccessor` и работает с `[(ngModel)]` и `[formControl]` «из коробки». + +Компонент соответствует Figma-компоненту `` (nodeId `15:13444`, fileKey `HOLKdvQJ8jCLeX17s9d0Yf`, библиотека «UI Kit (DS) v2.0»). Label, подсказка и сообщение об ошибке навешиваются снаружи — через `` или ``. + +## Props mapping + +| Свойство | Тип | По умолчанию | Описание | +|----------|-----|--------------|---------| +| `placeholder` | `string` | `''` | Подсказка при пустом поле — соответствует Figma-свойству `text-placeholder` / `has-placeholder` | +| `size` | `'small' \| 'base' \| 'large' \| 'xlarge'` | `'base'` | Размер поля; `large` и `xlarge` маппируются на PrimeNG `pSize="large"` | +| `readonly` | `boolean` | `false` | Только для чтения — соответствует Figma-состоянию `state=readonly` | +| `showClear` | `boolean` | `false` | Показывает иконку очистки (×) при наличии значения — соответствует Figma-свойству `show-clear` | +| `fluid` | `boolean` | `false` | Растягивает поле на всю ширину контейнера | +| `disabled` | `boolean` | `false` | Отключённое состояние — управляется через `FormControl.disable()` или `ControlValueAccessor.setDisabledState`; соответствует Figma-состоянию `state=disabled` | +| `(onClear)` | `EventEmitter` | — | Событие при нажатии на иконку очистки (только при `showClear=true`) | +| `[(ngModel)]` / `[formControl]` | `string` | `''` | Значение поля через ControlValueAccessor — соответствует Figma-свойству `text-input` | + +> `invalid` — вычисляемое свойство: берётся автоматически из связанного `NgControl` (соответствует Figma-состоянию `state=danger`). Устанавливать вручную нельзя. + +## Variants + +### Default / Base (базовое поле) + +Figma: ``, state=default, has-placeholder=true, has-floatlabel=false — nodeId `15:13443` + +```html + +``` + +### С кнопкой очистки (show-clear) + +Figma: ``, state=default, show-clear=true — nodeId `15:13443` + +```html + +``` + +### Disabled (отключённое поле) + +Figma: ``, state=disabled — nodeId `15:13439` + +```html + +``` + +```ts +// Управляется через FormControl: +disabledControl = new FormControl({ value: '', disabled: true }); +``` + +### Fluid / Large (на всю ширину, большой размер) + +Figma: ``, state=default + +```html + +``` + +### С реактивной формой (formControl + валидация) + +Figma: ``, state=danger — nodeId `15:13435` (невалидное состояние определяется через NgControl автоматически) + +```ts +emailControl = new FormControl('', [Validators.required, Validators.email]); +``` + +```html + +``` + +### Readonly (только для чтения) + +Figma: ``, state=readonly — nodeId `14978:17413` + +```html + +``` + +## Slots + +Нет — поле атомарное. Проекция содержимого не поддерживается. Для добавления prefix/suffix-иконок используйте `` — см. [inputgroup.figma.md](../inputgroup/inputgroup.figma.md). + +## Related + +- [InputGroup](../inputgroup/inputgroup.figma.md) — обёртка с prefix/suffix-слотами +- [FormField](../form-field/form-field.figma.md) — label, подсказка, сообщение об ошибке +- [Токены](../../figma-code-connect/tokens.md) — цветовые токены состояний поля +- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular + +## Do / Don't + +**Do:** +- Используйте `[(ngModel)]` или `[formControl]` — компонент реализует `ControlValueAccessor` и именно через них передаётся значение. +- Управляйте состоянием `disabled` через `FormControl.disable()` / `FormControl.enable()` — это сохраняет dirty/touched-флаги. +- Для сброса поля через иконку × включайте `[showClear]="true"` и подписывайтесь на `(onClear)` при необходимости пост-обработки. +- Используйте `[fluid]="true"` в формах на всю ширину и мобильных макетах. +- Оберните поле в `` или `` для добавления label, подсказки и prefix/suffix. + +**Don't:** +- Не подменяйте `value` через прямой DOM (`document.querySelector('input').value = ...`) — теряется `dirty`-state и Angular-реактивность. +- Не задавайте `[disabled]="true"` как Input-атрибут напрямую — компонент не объявляет `@Input() disabled`; передавайте через `FormControl` или `ControlValueAccessor`. +- Не используйте поле без `[(ngModel)]` / `[formControl]` — без привязки значение не синхронизируется с моделью. From 5b08c685c0e44529d8269cc9436462bfb235e2a7 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 22 Jun 2026 22:42:07 +0800 Subject: [PATCH 26/46] docs(figma-cc): clarify fileKey is per-component (linked libraries) --- docs/superpowers/plans/2026-06-22-figma-code-connect-static.md | 2 +- .../specs/2026-06-22-figma-code-connect-static-design.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/superpowers/plans/2026-06-22-figma-code-connect-static.md b/docs/superpowers/plans/2026-06-22-figma-code-connect-static.md index 88918652..f15edce2 100644 --- a/docs/superpowers/plans/2026-06-22-figma-code-connect-static.md +++ b/docs/superpowers/plans/2026-06-22-figma-code-connect-static.md @@ -17,7 +17,7 @@ - Жёсткий порядок секций тела: `## Overview` → `## Props mapping` → `## Variants` → `## Slots` → `## Related` → `## Do / Don't`. - Все code-fence обязаны иметь язык (`html`, `ts`, `scss`). - Никаких inline-значений токенов/иконок — только ссылки на `tokens.md` / `icons.md`. -- Figma fileKey проекта: `Khh7arsuXss3ncqy1Dz3OZ` (UI Kit v2.0). nodeId/componentKey пилотов вытаскивать через Figma MCP. Если MCP недоступен — `nodeId: null`, `componentKey: null`, `status: orphan-code`. +- Figma fileKey — per-component: берётся из Figma MCP для каждого компонента и может различаться (linked libraries). Базовый файл-точка-входа: `Khh7arsuXss3ncqy1Dz3OZ` (UI Kit v2.0); компоненты могут жить в связанных файлах библиотек. nodeId/componentKey пилотов вытаскивать через Figma MCP. Если MCP недоступен — `fileKey/nodeId/componentKey: null`, `status: orphan-code`. - Дата `updated:` во всех файлах = `2026-06-22`. - Никаких рантайм-зависимостей. validator — devDependency `js-yaml`. - Не модифицировать `.env`, `angular.json`, существующие `*.component.ts`. Создаём только новые файлы. diff --git a/docs/superpowers/specs/2026-06-22-figma-code-connect-static-design.md b/docs/superpowers/specs/2026-06-22-figma-code-connect-static-design.md index a02036bf..669b73c7 100644 --- a/docs/superpowers/specs/2026-06-22-figma-code-connect-static-design.md +++ b/docs/superpowers/specs/2026-06-22-figma-code-connect-static-design.md @@ -57,7 +57,7 @@ import: symbol: ExtraButtonComponent from: '@cdek-it/angular-ui-kit' figma: - fileKey: + fileKey: # per-component; берётся из Figma MCP для каждого компонента; может различаться при использовании linked libraries nodeId: '123:456' # ID родительского componentSet (или массив) componentKey: name: 'Button' # имя в Figma (для отладки) From 59ad77abf9a0f0f0d2ebe745e97b999d52102fdb Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 22 Jun 2026 22:46:05 +0800 Subject: [PATCH 27/46] feat(figma-cc): add dialog.figma.md pilot Co-Authored-By: Claude Sonnet 4.6 --- src/lib/components/dialog/dialog.figma.md | 160 ++++++++++++++++++++++ 1 file changed, 160 insertions(+) create mode 100644 src/lib/components/dialog/dialog.figma.md diff --git a/src/lib/components/dialog/dialog.figma.md b/src/lib/components/dialog/dialog.figma.md new file mode 100644 index 00000000..2e6387d2 --- /dev/null +++ b/src/lib/components/dialog/dialog.figma.md @@ -0,0 +1,160 @@ +--- +component: ExtraDialog +selector: extra-dialog +import: + symbol: ExtraDialogComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: 'HOLKdvQJ8jCLeX17s9d0Yf' + nodeId: '520:6620' + componentKey: 'e22e66372cf0eaa8dae30d765325f4ed2b51ca42' + name: '' +status: stable +updated: '2026-06-22' +--- + +## Overview + +`ExtraDialogComponent` — модальное диалоговое окно поверх основного контента страницы. Оборачивает PrimeNG `p-dialog` и расширяет его поддержкой структурных директив для кастомного заголовка и футера, а также типизированным свойством `size`. + +Компонент соответствует Figma-компоненту `` (nodeId `520:6620`, fileKey `HOLKdvQJ8jCLeX17s9d0Yf`, библиотека «UI Kit (DS) v2.0»). Для программного открытия с произвольным содержимым используйте `ExtraDialogService` (см. Storybook «Dynamic»). + +## Props mapping + +| Свойство | Тип | По умолчанию | Описание | +|----------|-----|--------------|---------| +| `header` | `string` | `''` | Строковый заголовок окна — игнорируется, если передан слот `*extraDialogHeader` | +| `[(visible)]` | `boolean` | `false` | Двусторонняя привязка видимости — `[visible]` открывает окно, `(visibleChange)` реагирует на закрытие крестиком или маской | +| `size` | `'sm' \| 'default' \| 'lg' \| 'xlg'` | `'default'` | Ширина диалога — соответствует Figma-свойству `Modal Size` (sm → w-20, default/md → w-25, lg → w-30, xlg → w-45) | +| `modal` | `boolean` | `true` | Блокировать ли фон страницы затемнением — соответствует Figma-варианту `modal=true/false` | +| `dismissableMask` | `boolean` | `false` | Закрывать окно при клике на затемнённый фон | +| `closeOnEscape` | `boolean` | `true` | Закрывать окно по нажатию клавиши Escape | +| `showHeader` | `boolean` | `true` | Отображать ли панель заголовка — соответствует Figma-свойству `show-header` | +| `focusOnShow` | `boolean` | `false` | Переводить фокус на первый интерактивный элемент при открытии | +| `appendTo` | `string` | `'body'` | CSS-селектор или `'body'` — куда в DOM монтируется оверлей | + +> `visibleChange` — `@Output() EventEmitter`. Используйте синтаксис `[(visible)]` для двусторонней привязки. + +## Variants + +### Default / md (базовый диалог с футером) + +Figma: ``, modal=true, size=default — nodeId `520:6572` + +```html + +

Заявка на доставку груза №CDEK-2025-00478312 готова к оформлению.

+ + + + + +``` + +```ts +import { ExtraDialogComponent, ExtraDialogFooterDirective, ExtraButtonComponent } from '@cdek-it/angular-ui-kit'; + +// В компоненте: +isOpen = false; +``` + +### Large с кастомным заголовком (extraDialogHeader) + +Figma: ``, modal=true, size=lg, show-header=true + +```html + + +
+ + Детали отправления +
+ + +

Содержимое диалога с кастомным заголовком. Шаблон заменяет строковый проп header.

+ + + + + +``` + +```ts +import { ExtraDialogComponent, ExtraDialogHeaderDirective, ExtraDialogFooterDirective, ExtraButtonComponent } from '@cdek-it/angular-ui-kit'; +``` + +### С кнопками действий в футере (extraDialogFooter + деструктивное действие) + +Figma: ``, modal=true, show-footer=true + +```html + +

Вы уверены, что хотите удалить эту запись? Действие необратимо.

+ + + + + +``` + +```ts +import { ExtraDialogComponent, ExtraDialogFooterDirective, ExtraButtonComponent } from '@cdek-it/angular-ui-kit'; +``` + +### Немодальный (non-modal) + +Figma: ``, modal=false — nodeId `536:314` + +Окно не блокирует фон и не показывает затемнение. Пользователь может взаимодействовать с остальным контентом страницы. + +```html + +

Маршрут: Москва → Новосибирск. Это окно не блокирует основной контент.

+ + + + +``` + +## Slots + +| Слот | Синтаксис | Описание | +|------|-----------|---------| +| Тело (body) | `` | Произвольное содержимое диалога — размещается между заголовком и футером | +| Кастомный заголовок | `` | Заменяет строковый проп `header`; импортируйте `ExtraDialogHeaderDirective` из `'@cdek-it/angular-ui-kit'` | +| Кастомный футер | `` | Кнопки действий и прочий контент нижней части; импортируйте `ExtraDialogFooterDirective` из `'@cdek-it/angular-ui-kit'` | + +Директивы `ExtraDialogHeaderDirective` и `ExtraDialogFooterDirective` экспортируются из `@cdek-it/angular-ui-kit` и объявляются как `standalone: true` — добавляйте их в массив `imports` компонента отдельно от `ExtraDialogComponent`. + +## Related + +- [Button](../button/button.figma.md) — кнопки действий в футере диалога +- [ConfirmDialog](../confirm-dialog/confirm-dialog.figma.md) — укороченный диалог подтверждения без произвольного тела +- [Токены](../../figma-code-connect/tokens.md) — цветовые токены оверлея и поверхности +- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular + +## Do / Don't + +**Do:** +- Управляйте видимостью через `[(visible)]` — это сохраняет двустороннюю синхронизацию и корректно эмитит `visibleChange` при закрытии крестиком. +- Используйте `variant="primary"` для основного действия в футере, `severity="danger"` — для деструктивного. +- Размещайте не более 2 кнопок в футере: основное действие и «Отмена». +- Используйте `dismissableMask="true"` вместе с `modal="true"`, чтобы разрешить закрытие кликом по фону — это улучшает UX. + +**Don't:** +- Не скрывайте диалог через `*ngIf` — всегда используйте `[(visible)]`; `*ngIf` уничтожает DOM и теряет состояние формы внутри. +- Не отключайте `closeOnEscape` без явной необходимости — это нарушает доступность (a11y) и ожидания пользователей. +- Не смешивайте строковый `header` и `*extraDialogHeader` одновременно — директива имеет приоритет и строковый проп будет проигнорирован. From 34eb593ab517a3c63f9a2c1247c9888a762cec12 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 22 Jun 2026 22:48:13 +0800 Subject: [PATCH 28/46] fix(figma-cc): drop inline icon from dialog Large variant --- src/lib/components/dialog/dialog.figma.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/lib/components/dialog/dialog.figma.md b/src/lib/components/dialog/dialog.figma.md index 2e6387d2..8a26a02f 100644 --- a/src/lib/components/dialog/dialog.figma.md +++ b/src/lib/components/dialog/dialog.figma.md @@ -65,6 +65,8 @@ isOpen = false; Figma: ``, modal=true, size=lg, show-header=true +Для добавления иконки в заголовок используйте [иконки](../../figma-code-connect/icons.md). + ```html `, modal=true, size=lg, show-header=true >
- + Детали отправления
From be3cfbeeb485adf0db3d30c3c36e5abb7ab61df0 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 22 Jun 2026 22:53:58 +0800 Subject: [PATCH 29/46] fix(figma-cc): correct README directory map MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace false figma-code-connect/button|input-text|dialog layout with real colocated layout: src/lib/components/{button,inputtext,dialog}/.figma.md. Fix input-text/ → inputtext/ folder name. Co-Authored-By: Claude Sonnet 4.6 --- src/lib/figma-code-connect/README.md | 29 ++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/src/lib/figma-code-connect/README.md b/src/lib/figma-code-connect/README.md index ae523890..c1dd0c54 100644 --- a/src/lib/figma-code-connect/README.md +++ b/src/lib/figma-code-connect/README.md @@ -5,19 +5,24 @@ ## Структура директории ``` -src/lib/figma-code-connect/ -├── README.md # Этот файл -├── schema.md # Полная спецификация формата .figma.md -├── conventions.md # Соглашения и best practices (Task 3) -├── tokens.md # Дизайн токены (Task 4) -├── icons.md # Доступные иконки (Task 4) -├── missing.md # Список компонентов без Code Connect (Task 4) +src/lib/figma-code-connect/ # Глобальные справочные документы +├── README.md # Этот файл +├── schema.md # Полная спецификация формата .figma.md +├── conventions.md # Соглашения и best practices +├── tokens.md # Дизайн токены +├── icons.md # Доступные иконки +└── missing.md # Список компонентов без Code Connect + +src/lib/components/ # Контрактные файлы (colocated с компонентом) ├── button/ -│ └── button.figma.md # Документация Button (Task 5) -├── input-text/ -│ └── input-text.figma.md # Документация InputText (Task 6) +│ ├── button.component.ts +│ └── button.figma.md # Code Connect для Button +├── inputtext/ +│ ├── inputtext.component.ts +│ └── inputtext.figma.md # Code Connect для InputText └── dialog/ - └── dialog.figma.md # Документация Dialog (Task 7) + ├── dialog.component.ts + └── dialog.figma.md # Code Connect для Dialog ``` ## Описание @@ -34,7 +39,7 @@ src/lib/figma-code-connect/ ### Для разработчиков 1. **Читайте** [`schema.md`](./schema.md) для понимания структуры файлов -2. **Смотрите примеры** в директориях компонентов (`button/`, `input-text/`, `dialog/`) +2. **Смотрите примеры** рядом с компонентами (`src/lib/components/{button,inputtext,dialog}/.figma.md`) 3. **Следуйте соглашениям** из [`conventions.md`](./conventions.md) 4. **Валидируйте** свои файлы перед коммитом: ```bash From fadd04d6d2e40b12c295a7cf3b97786b72c27f00 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 22 Jun 2026 22:54:04 +0800 Subject: [PATCH 30/46] fix(figma-cc): add orphan-code to status enum + validator check Replace unused `draft` with `orphan-code` in schema.md. Add validator check that rejects unknown status values. Quote updated date in valid.figma.md fixture. Add invalid-bad-status fixture + test. Co-Authored-By: Claude Sonnet 4.6 --- .../__fixtures__/invalid-bad-status.figma.md | 40 +++++++++++++++++++ .../__fixtures__/valid.figma.md | 2 +- scripts/figma-code-connect/validate.mjs | 5 +++ scripts/figma-code-connect/validate.test.mjs | 10 +++++ src/lib/figma-code-connect/schema.md | 5 ++- 5 files changed, 59 insertions(+), 3 deletions(-) create mode 100644 scripts/figma-code-connect/__fixtures__/invalid-bad-status.figma.md diff --git a/scripts/figma-code-connect/__fixtures__/invalid-bad-status.figma.md b/scripts/figma-code-connect/__fixtures__/invalid-bad-status.figma.md new file mode 100644 index 00000000..b19e2d61 --- /dev/null +++ b/scripts/figma-code-connect/__fixtures__/invalid-bad-status.figma.md @@ -0,0 +1,40 @@ +--- +component: extra-fixture +selector: extra-fixture +import: + symbol: ExtraFixtureComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: TESTKEY + nodeId: '1:2' + componentKey: stable-key + name: 'Fixture' +status: nonsense +updated: '2026-06-22' +--- + +## Overview +Тестовый компонент. + +## Props mapping +| Figma | Angular | Type | Notes | +|-------|---------|------|-------| +| Size | size | 'sm' | | + +## Variants +### Default +Figma nodeId: `1:3` + +```html + +``` + +## Slots +Нет. + +## Related +Нет. + +## Do / Don't +- ✅ ОК. +- ❌ Не ОК. diff --git a/scripts/figma-code-connect/__fixtures__/valid.figma.md b/scripts/figma-code-connect/__fixtures__/valid.figma.md index a2956d6c..26b549da 100644 --- a/scripts/figma-code-connect/__fixtures__/valid.figma.md +++ b/scripts/figma-code-connect/__fixtures__/valid.figma.md @@ -10,7 +10,7 @@ figma: componentKey: stable-key name: 'Fixture' status: stable -updated: 2026-06-22 +updated: '2026-06-22' --- ## Overview diff --git a/scripts/figma-code-connect/validate.mjs b/scripts/figma-code-connect/validate.mjs index 914847ee..53172582 100644 --- a/scripts/figma-code-connect/validate.mjs +++ b/scripts/figma-code-connect/validate.mjs @@ -4,6 +4,7 @@ import yaml from 'js-yaml'; const REQUIRED_FIELDS = ['component', 'selector', 'import', 'figma', 'status', 'updated']; const REQUIRED_FIGMA = ['fileKey', 'nodeId', 'componentKey', 'name']; const SECTION_ORDER = ['## Overview', '## Props mapping', '## Variants', '## Slots', '## Related', "## Do / Don't"]; +const ALLOWED_STATUSES = ['stable', 'beta', 'deprecated', 'orphan-code']; export async function validateFile(path) { const errors = []; @@ -15,6 +16,9 @@ export async function validateFile(path) { catch (e) { errors.push(`${path}: invalid YAML: ${e.message}`); return errors; } for (const f of REQUIRED_FIELDS) if (!(f in fm)) errors.push(`${path}: missing field ${f}`); if (fm.figma) for (const f of REQUIRED_FIGMA) if (!(f in fm.figma)) errors.push(`${path}: missing figma.${f}`); + if ('status' in fm && !ALLOWED_STATUSES.includes(fm.status)) { + errors.push(`${path}: unknown status "${fm.status}", expected one of: ${ALLOWED_STATUSES.join(' | ')}`); + } const body = m[2]; const positions = SECTION_ORDER.map(s => body.indexOf(`\n${s}`)); const present = positions.map((p, i) => [p, i]).filter(([p]) => p !== -1); @@ -29,6 +33,7 @@ export async function validateFile(path) { // Only opening fences (even index: 0, 2, 4, …) must carry a language. // Closing fences (odd index) are bare ``` per CommonMark spec. if (i % 2 === 0 && !fences[i][1]) errors.push(`${path}: code-fence without language`); + if (i % 2 === 1 && fences[i][1]) errors.push(`${path}: closing fence has language "${fences[i][1]}", must be bare`); } return errors; } diff --git a/scripts/figma-code-connect/validate.test.mjs b/scripts/figma-code-connect/validate.test.mjs index 5008a3eb..97ec659e 100644 --- a/scripts/figma-code-connect/validate.test.mjs +++ b/scripts/figma-code-connect/validate.test.mjs @@ -21,3 +21,13 @@ test('missing open fence language fails', async () => { const errors = await validateFile('scripts/figma-code-connect/__fixtures__/invalid-missing-open-fence-language.figma.md'); assert.ok(errors.some(e => /code-fence/i.test(e))); }); + +test('unknown status value fails', async () => { + const errors = await validateFile('scripts/figma-code-connect/__fixtures__/invalid-bad-status.figma.md'); + assert.ok(errors.some(e => /unknown status/i.test(e))); +}); + +test('closing fence with language fails', async () => { + const errors = await validateFile('scripts/figma-code-connect/__fixtures__/invalid-closing-fence-language.figma.md'); + assert.ok(errors.some(e => /closing fence/i.test(e))); +}); diff --git a/src/lib/figma-code-connect/schema.md b/src/lib/figma-code-connect/schema.md index 206314be..dbc2d09f 100644 --- a/src/lib/figma-code-connect/schema.md +++ b/src/lib/figma-code-connect/schema.md @@ -77,8 +77,9 @@ deprecated: ### Статус и дата - **`status`** (строка, перечисление) - - Статус компонента: `stable`, `beta`, `deprecated`, `draft` - - Определяет, используется ли компонент в продакшене + - Статус компонента: `stable | beta | deprecated | orphan-code` + - Определяет, используется ли компонент в продакшене. + - `orphan-code` — компонент есть в коде, но не сопоставлен с Figma; используется как fallback при недоступности MCP. - **`updated`** (строка, ISO 8601 дата) - Дата последнего обновления в формате `YYYY-MM-DD` From 269893a4c6591cd025f8bec19f777acfe8039544 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 22 Jun 2026 22:54:09 +0800 Subject: [PATCH 31/46] fix(figma-cc): enforce bare closing fence in validator Add validator error when a closing (odd-indexed) code-fence carries a language tag. Add invalid-closing-fence-language fixture + test. Co-Authored-By: Claude Sonnet 4.6 --- .../invalid-closing-fence-language.figma.md | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 scripts/figma-code-connect/__fixtures__/invalid-closing-fence-language.figma.md diff --git a/scripts/figma-code-connect/__fixtures__/invalid-closing-fence-language.figma.md b/scripts/figma-code-connect/__fixtures__/invalid-closing-fence-language.figma.md new file mode 100644 index 00000000..075c8978 --- /dev/null +++ b/scripts/figma-code-connect/__fixtures__/invalid-closing-fence-language.figma.md @@ -0,0 +1,40 @@ +--- +component: extra-fixture +selector: extra-fixture +import: + symbol: ExtraFixtureComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: TESTKEY + nodeId: '1:2' + componentKey: stable-key + name: 'Fixture' +status: stable +updated: '2026-06-22' +--- + +## Overview +Тестовый компонент. + +## Props mapping +| Figma | Angular | Type | Notes | +|-------|---------|------|-------| +| Size | size | 'sm' | | + +## Variants +### Default +Figma nodeId: `1:3` + +```html + +```html + +## Slots +Нет. + +## Related +Нет. + +## Do / Don't +- ✅ ОК. +- ❌ Не ОК. From 5ab9b1e73002e028f4599a803dbc34b897d6899c Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 22 Jun 2026 23:17:45 +0800 Subject: [PATCH 32/46] feat(figma-cc): cross-link warnings + nodeId uniqueness in validator --- .../invalid-dangling-cross-link.figma.md | 40 +++++++++ .../__fixtures__/invalid-dup-nodeid.figma.md | 40 +++++++++ scripts/figma-code-connect/validate.mjs | 82 +++++++++++++++++-- scripts/figma-code-connect/validate.test.mjs | 37 ++++++++- src/lib/figma-code-connect/schema.md | 19 ++++- 5 files changed, 204 insertions(+), 14 deletions(-) create mode 100644 scripts/figma-code-connect/__fixtures__/invalid-dangling-cross-link.figma.md create mode 100644 scripts/figma-code-connect/__fixtures__/invalid-dup-nodeid.figma.md diff --git a/scripts/figma-code-connect/__fixtures__/invalid-dangling-cross-link.figma.md b/scripts/figma-code-connect/__fixtures__/invalid-dangling-cross-link.figma.md new file mode 100644 index 00000000..3f1eb722 --- /dev/null +++ b/scripts/figma-code-connect/__fixtures__/invalid-dangling-cross-link.figma.md @@ -0,0 +1,40 @@ +--- +component: extra-fixture-link +selector: extra-fixture-link +import: + symbol: ExtraFixtureLinkComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: TESTKEY + nodeId: '1:9' + componentKey: link-key + name: 'FixtureLink' +status: stable +updated: '2026-06-22' +--- + +## Overview +Фикстура со ссылкой на несуществующий контракт. + +## Props mapping +| Figma | Angular | Type | Notes | +|-------|---------|------|-------| +| Size | size | 'sm' | | + +## Variants +### Default +Figma nodeId: `1:10` + +```html + +``` + +## Slots +Нет. + +## Related +- [Nonexistent](./does-not-exist.figma.md) — намеренно битая ссылка + +## Do / Don't +- ✅ ОК. +- ❌ Не ОК. diff --git a/scripts/figma-code-connect/__fixtures__/invalid-dup-nodeid.figma.md b/scripts/figma-code-connect/__fixtures__/invalid-dup-nodeid.figma.md new file mode 100644 index 00000000..2c998137 --- /dev/null +++ b/scripts/figma-code-connect/__fixtures__/invalid-dup-nodeid.figma.md @@ -0,0 +1,40 @@ +--- +component: extra-fixture-dup +selector: extra-fixture-dup +import: + symbol: ExtraFixtureDupComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: TESTKEY + nodeId: '1:2' + componentKey: dup-key + name: 'FixtureDup' +status: stable +updated: '2026-06-22' +--- + +## Overview +Фикстура с тем же nodeId, что и valid.figma.md (1:2) — для проверки уникальности. + +## Props mapping +| Figma | Angular | Type | Notes | +|-------|---------|------|-------| +| Size | size | 'sm' | | + +## Variants +### Default +Figma nodeId: `1:4` + +```html + +``` + +## Slots +Нет. + +## Related +Нет. + +## Do / Don't +- ✅ ОК. +- ❌ Не ОК. diff --git a/scripts/figma-code-connect/validate.mjs b/scripts/figma-code-connect/validate.mjs index 53172582..42cac1cb 100644 --- a/scripts/figma-code-connect/validate.mjs +++ b/scripts/figma-code-connect/validate.mjs @@ -1,4 +1,5 @@ -import { readFile } from 'node:fs/promises'; +import { readFile, access } from 'node:fs/promises'; +import { dirname, resolve } from 'node:path'; import yaml from 'js-yaml'; const REQUIRED_FIELDS = ['component', 'selector', 'import', 'figma', 'status', 'updated']; @@ -6,10 +7,22 @@ const REQUIRED_FIGMA = ['fileKey', 'nodeId', 'componentKey', 'name']; const SECTION_ORDER = ['## Overview', '## Props mapping', '## Variants', '## Slots', '## Related', "## Do / Don't"]; const ALLOWED_STATUSES = ['stable', 'beta', 'deprecated', 'orphan-code']; +// Markdown links pointing at another component's contract, with optional #anchor. +const CROSS_LINK_RE = /\]\(([^)\s#]+\.figma\.md)(#[^)]*)?\)/g; + +const FRONTMATTER_RE = /^---\n([\s\S]*?)\n---\n([\s\S]*)$/; + +function parseFrontmatter(raw) { + const m = raw.match(FRONTMATTER_RE); + if (!m) return null; + try { return { fm: yaml.load(m[1]), body: m[2] }; } + catch { return null; } +} + export async function validateFile(path) { const errors = []; const raw = await readFile(path, 'utf8'); - const m = raw.match(/^---\n([\s\S]*?)\n---\n([\s\S]*)$/); + const m = raw.match(FRONTMATTER_RE); if (!m) { errors.push(`${path}: missing frontmatter`); return errors; } let fm; try { fm = yaml.load(m[1]); } @@ -38,6 +51,60 @@ export async function validateFile(path) { return errors; } +// Cross-links to sibling component contracts are reported as warnings, not errors: +// a contract may legitimately reference a pilot that hasn't been written yet +// (forward reference) without blocking the build. +export async function crossLinkWarnings(path) { + const raw = await readFile(path, 'utf8'); + const baseDir = dirname(path); + const seen = new Set(); + const warnings = []; + for (const m of raw.matchAll(CROSS_LINK_RE)) { + const link = m[1]; + const target = resolve(baseDir, link); + if (seen.has(target)) continue; + seen.add(target); + try { + await access(target); + } catch { + warnings.push(`${path}: dangling cross-link → ${link} (file not found)`); + } + } + return warnings; +} + +// nodeId uniqueness is a cross-file invariant, so it can only be checked over the +// whole set of contracts. A nodeId shared by two files breaks grep-based lookup. +export async function duplicateNodeIdErrors(paths) { + const byNodeId = new Map(); + for (const path of paths) { + const raw = await readFile(path, 'utf8'); + const parsed = parseFrontmatter(raw); + const nodeId = parsed?.fm?.figma?.nodeId; + if (!nodeId) continue; + if (!byNodeId.has(nodeId)) byNodeId.set(nodeId, []); + byNodeId.get(nodeId).push(path); + } + const errors = []; + for (const [nodeId, files] of byNodeId) { + if (files.length > 1) { + errors.push(`nodeId '${nodeId}' is not unique — appears in: ${files.join(', ')}`); + } + } + return errors; +} + +export async function validateAll(paths) { + const errors = []; + const warnings = []; + for (const path of paths) { + errors.push(...await validateFile(path)); + warnings.push(...await crossLinkWarnings(path)); + } + errors.push(...await duplicateNodeIdErrors(paths)); + return { errors, warnings }; +} + if (import.meta.url === `file://${process.argv[1]}`) { const args = process.argv.slice(2); let files; @@ -47,11 +114,8 @@ if (import.meta.url === `file://${process.argv[1]}`) { files = []; for await (const p of glob('src/lib/**/*.figma.md')) files.push(p); } - let total = 0; - for (const f of files) { - const errs = await validateFile(f); - for (const e of errs) console.error(e); - total += errs.length; - } - process.exit(total === 0 ? 0 : 1); + const { errors, warnings } = await validateAll(files); + for (const w of warnings) console.error(`warning: ${w}`); + for (const e of errors) console.error(e); + process.exit(errors.length === 0 ? 0 : 1); } diff --git a/scripts/figma-code-connect/validate.test.mjs b/scripts/figma-code-connect/validate.test.mjs index 97ec659e..2d8f54f8 100644 --- a/scripts/figma-code-connect/validate.test.mjs +++ b/scripts/figma-code-connect/validate.test.mjs @@ -1,6 +1,8 @@ import { strict as assert } from 'node:assert'; import { test } from 'node:test'; -import { validateFile } from './validate.mjs'; +import { validateFile, crossLinkWarnings, duplicateNodeIdErrors, validateAll } from './validate.mjs'; + +const FIX = 'scripts/figma-code-connect/__fixtures__'; test('valid fixture passes', async () => { const errors = await validateFile('scripts/figma-code-connect/__fixtures__/valid.figma.md'); @@ -31,3 +33,36 @@ test('closing fence with language fails', async () => { const errors = await validateFile('scripts/figma-code-connect/__fixtures__/invalid-closing-fence-language.figma.md'); assert.ok(errors.some(e => /closing fence/i.test(e))); }); + +test('dangling cross-link is a warning, not an error', async () => { + const path = `${FIX}/invalid-dangling-cross-link.figma.md`; + const warnings = await crossLinkWarnings(path); + assert.ok(warnings.some(w => /dangling cross-link/i.test(w) && /does-not-exist/.test(w))); + // It must NOT surface as a hard error — forward references are allowed. + const errors = await validateFile(path); + assert.deepEqual(errors, []); +}); + +test('valid fixture has no dangling cross-link warnings', async () => { + const warnings = await crossLinkWarnings(`${FIX}/valid.figma.md`); + assert.deepEqual(warnings, []); +}); + +test('duplicate nodeId across files is an error', async () => { + const errors = await duplicateNodeIdErrors([ + `${FIX}/valid.figma.md`, + `${FIX}/invalid-dup-nodeid.figma.md`, + ]); + assert.ok(errors.some(e => /not unique/i.test(e) && /1:2/.test(e))); +}); + +test('unique nodeIds produce no duplicate error', async () => { + const errors = await duplicateNodeIdErrors([`${FIX}/valid.figma.md`]); + assert.deepEqual(errors, []); +}); + +test('validateAll separates errors from warnings', async () => { + const { errors, warnings } = await validateAll([`${FIX}/invalid-dangling-cross-link.figma.md`]); + assert.deepEqual(errors, []); + assert.ok(warnings.some(w => /dangling cross-link/i.test(w))); +}); diff --git a/src/lib/figma-code-connect/schema.md b/src/lib/figma-code-connect/schema.md index dbc2d09f..ab91e85d 100644 --- a/src/lib/figma-code-connect/schema.md +++ b/src/lib/figma-code-connect/schema.md @@ -229,16 +229,27 @@ ExtraButton — универсальный компонент кнопки дл ## Порядок проверки валидатором -Валидатор (`npm run validate:figma-cc`) проверяет в следующем порядке: +Валидатор (`npm run validate:figma-cc`) различает **ошибки** (errors) и **предупреждения** (warnings). Только ошибки завершают процесс с кодом 1; предупреждения печатаются с префиксом `warning:`, но не блокируют сборку. + +### Ошибки (exit 1) + +Проверяются по каждому файлу: 1. Наличие frontmatter (YAML между `---...---`) 2. Корректность YAML синтаксиса 3. Наличие всех обязательных полей frontmatter 4. Наличие всех обязательных полей внутри `figma` -5. Порядок секций в теле файла -6. Наличие языка у открывающих code-fences (закрывающие fences должны быть без языка) +5. Допустимое значение `status` (`stable | beta | deprecated | orphan-code`) +6. Порядок секций в теле файла +7. Наличие языка у открывающих code-fences (закрывающие fences должны быть без языка) + +Кросс-файловая проверка по всему набору: + +8. **Уникальность `figma.nodeId`** — один nodeId не должен встречаться в двух `.figma.md`. Дубликаты ломают grep-lookup по nodeId, поэтому это ошибка. + +### Предупреждения (exit 0) -Если какая-то проверка не пройдена, валидатор выведет ошибку и завершится с кодом 1. +- **Висячие cross-links** — относительная ссылка вида `[...](..//.figma.md)` на ещё не созданный контракт. Это намеренно warning, а не error: контракт может законно ссылаться на компонент-пилот, который будет написан позже (forward reference). Ссылка с `#anchor` проверяется по базовому файлу без учёта якоря. ## Примеры полных файлов From f7b63bee093906c0cff56150df9855309bdf8820 Mon Sep 17 00:00:00 2001 From: Danil Khaliulin Date: Mon, 22 Jun 2026 23:31:22 +0800 Subject: [PATCH 33/46] feat(figma-cc): add 6 component contracts (checkbox, radiobutton, tag, confirm-dialog, inputgroup, tooltip) --- src/lib/components/checkbox/checkbox.figma.md | 140 +++++++++++++++ .../confirm-dialog/confirm-dialog.figma.md | 153 ++++++++++++++++ .../components/inputgroup/inputgroup.figma.md | 106 ++++++++++++ .../radiobutton/radiobutton.figma.md | 163 ++++++++++++++++++ src/lib/components/tag/tag.figma.md | 121 +++++++++++++ src/lib/components/tooltip/tooltip.figma.md | 115 ++++++++++++ 6 files changed, 798 insertions(+) create mode 100644 src/lib/components/checkbox/checkbox.figma.md create mode 100644 src/lib/components/confirm-dialog/confirm-dialog.figma.md create mode 100644 src/lib/components/inputgroup/inputgroup.figma.md create mode 100644 src/lib/components/radiobutton/radiobutton.figma.md create mode 100644 src/lib/components/tag/tag.figma.md create mode 100644 src/lib/components/tooltip/tooltip.figma.md diff --git a/src/lib/components/checkbox/checkbox.figma.md b/src/lib/components/checkbox/checkbox.figma.md new file mode 100644 index 00000000..7f7491cc --- /dev/null +++ b/src/lib/components/checkbox/checkbox.figma.md @@ -0,0 +1,140 @@ +--- +component: ExtraCheckbox +selector: extra-checkbox +import: + symbol: ExtraCheckboxComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: 'HOLKdvQJ8jCLeX17s9d0Yf' + nodeId: '16:13529' + componentKey: 'ce267dfcda08b2861c4aa2aea4af70194735c9f0' + name: '' +status: stable +updated: '2026-06-22' +--- + +## Overview + +`ExtraCheckbox` — компонент флажка для выбора одного или нескольких вариантов. Оборачивает PrimeNG `p-checkbox` и реализует `ControlValueAccessor`, поэтому интегрируется с `[(ngModel)]` и реактивными формами через `formControl` / `formControlName`. + +Компонент соответствует Figma-компоненту `` (nodeId `16:13529`). Figma-свойства `state`, `checked` и `indeterminate` маппируются на Angular-инпуты и модель значения (см. раздел Props mapping). + +## Props mapping + +| Свойство | Тип | По умолчанию | Описание | +|----------|-----|--------------|---------| +| `value` | `any` | `null` | Значение, добавляемое в массив-модель в небинарном режиме (группа чекбоксов) | +| `binary` | `boolean` | `false` | Бинарный режим: модель — `true`/`false` вместо массива значений | +| `disabled` | `boolean` | `false` | Отключённое состояние — соответствует Figma-свойству `state=disabled`; передаётся через `[disabled]` | +| `readonly` | `boolean` | `false` | Режим только для чтения без изменения значения | +| `indeterminate` | `boolean` | `false` | Неопределённое состояние — соответствует Figma-свойству `indeterminate=true` | +| `invalid` | `boolean` | `false` | Подсветка как невалидного поля — соответствует Figma-свойству `state=danger` | +| `size` | `'small' \| 'base' \| 'large'` | `'base'` | Размер флажка | +| `variant` | `'outlined' \| 'filled'` | `'outlined'` | Вариант отображения | +| `checkboxIcon` | `string \| undefined` | `undefined` | CSS-класс иконки галочки; доступные иконки — [icons.md](../../figma-code-connect/icons.md) | +| `ariaLabel` | `string \| undefined` | `undefined` | Метка для программ экранного доступа | +| `ariaLabelledBy` | `string \| undefined` | `undefined` | Идентификатор элемента с меткой для доступности | +| `tabindex` | `number \| undefined` | `undefined` | Порядок перехода по Tab | +| `inputId` | `string \| undefined` | `undefined` | Идентификатор внутреннего `input`; используется для связки с `