diff --git a/.github/actions/typecheck/action.yml b/.github/actions/typecheck/action.yml index be5114d9..5b74884c 100644 --- a/.github/actions/typecheck/action.yml +++ b/.github/actions/typecheck/action.yml @@ -1,5 +1,5 @@ -name: Run Typecheck -description: Run typecheck +name: Run Typechecks +description: Typecheck the project and check generated tokens runs: using: composite @@ -9,3 +9,11 @@ runs: - name: Run Typecheck shell: bash run: yarn tsc --noEmit + + - name: Typecheck Token Generator + shell: bash + run: yarn tokens:typecheck + + - name: Check Generated Tokens + shell: bash + run: yarn tokens:check diff --git a/MIGRATION.md b/MIGRATION.md index 42303352..074c690b 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,18 +1,14 @@ # Миграция на Unistyles V3 -Стили переведены на `react-native-unistyles`. `ThemeContextProvider` доступен -как внешний конфигуратор тем и шрифтов, но чтение темы и шрифтов теперь идет -через API `unistyles`. +Стили переведены на `react-native-unistyles`. UI kit предоставляет провайдер и +хуки для настройки темы и шрифтов, а стили создаются через API `unistyles`. ## Изменения -### `ThemeContextProvider` — доступен +### Настройка темы и шрифтов -UI kit по-прежнему использует `react-native-unistyles` внутри, но для внешнего -потребителя снова доступен `ThemeContextProvider` как единая точка конфигурации -тем и шрифтов. - -Если приложению нужны кастомные шрифты, настройте их через провайдер: +Оберните приложение в `ThemeContextProvider`. Через `initialTheme` задаётся +начальная тема, через `fonts` — используемые семейства шрифтов: ```tsx import { @@ -30,18 +26,17 @@ export const Root = () => ( ) ``` -Провайдер также принимает `lightTheme` и `darkTheme`, если нужно передать -полностью кастомные темы. +Провайдер не принимает пользовательские объекты тем. Он настраивает +зарегистрированные внутри UI kit темы `light` и `dark`. ### `useFonts` -Используйте `useUnistyles`: +Для получения настроенных шрифтов используйте экспортируемый UI kit хук: ```tsx -import { useUnistyles } from '@cdek-it/react-native-ui-kit' +import { useFonts } from '@cdek-it/react-native-ui-kit' -const { theme } = useUnistyles() -theme.fonts +const fonts = useFonts() ``` Или прямо в стилях через `StyleSheet.create(...)`: @@ -54,25 +49,37 @@ const styles = StyleSheet.create(({ fonts }) => ({ })) ``` -### `useTheme()` / `useChangeTheme()` +### Чтение и переключение темы + +Для чтения и переключения темы используйте публичные хуки UI kit: + +```tsx +import { + ThemeVariant, + useChangeTheme, + useTheme, +} from '@cdek-it/react-native-ui-kit' + +const theme = useTheme() +const changeTheme = useChangeTheme() -`ThemeContextProvider` больше не является источником `theme/fonts` через React -context. Он только конфигурирует `react-native-unistyles`. +changeTheme(ThemeVariant.Dark) +``` -- `useTheme()` читает `UnistylesRuntime.themeName` -- `useFonts()` читает `useUnistyles().theme.fonts` -- `ThemeContext` остается пустым и имеет значение `null` -- `useChangeTheme()` всегда вызывает `UnistylesRuntime.setTheme(...)` +`ThemeContextProvider` не хранит тему и шрифты в React Context: `ThemeContext` +имеет значение `null`, а источником состояния остаётся Unistyles. ### `makeStyles` — removed Используйте `StyleSheet.create(...)`: ```tsx -import { StyleSheet } from '@cdek-it/react-native-ui-kit' +import { StyleSheet } from 'react-native-unistyles' -const styles = StyleSheet.create((theme) => ({ - container: { backgroundColor: theme.Button.Brand.buttonBg }, +const styles = StyleSheet.create(({ semantic }) => ({ + container: { + backgroundColor: semantic.colorScheme.color.bg.surface.default.default, + }, })) ``` @@ -80,32 +87,9 @@ const styles = StyleSheet.create((theme) => ({ темы. `StyleSheet.create(...)` — нативный путь, обновляет стили **без** ререндеров. -SDK реэкспортирует `StyleSheet`, `useUnistyles`, `UnistylesRuntime` и -`withUnistyles`, поэтому потребителям не нужно импортировать -`react-native-unistyles` напрямую. - -### `useTheme()` — removed - -```tsx -import { UnistylesRuntime, useUnistyles } from '@cdek-it/react-native-ui-kit' - -const themeName = UnistylesRuntime.themeName // 'light' | 'dark' -``` - -Для реактивного поведения используйте `useUnistyles()`: - -```tsx -const { rt } = useUnistyles() -rt.themeName -``` - -### `useChangeTheme()` — removed - -```tsx -import { UnistylesRuntime } from '@cdek-it/react-native-ui-kit' - -UnistylesRuntime.setTheme('dark') -``` +UI kit не реэкспортирует `StyleSheet`, `useUnistyles`, `UnistylesRuntime` и +`withUnistyles`. Если они нужны приложению напрямую, импортируйте их из +`react-native-unistyles`. ## ESLint Правила для Unistyles diff --git a/README.md b/README.md index b74edb56..b95d6112 100644 --- a/README.md +++ b/README.md @@ -54,12 +54,9 @@ UI kit использует следующие виды шрифтов. После этого шрифты доступны через `useUnistyles().theme.fonts` или прямо в `StyleSheet.create(({ fonts }) => ...)`. -`ThemeContextProvider` только настраивает темы и шрифты для `unistyles`. +`ThemeContextProvider` настраивает активную тему и шрифты для `unistyles`. `ThemeContext` остается пустым и всегда имеет значение `null`. -Провайдер также принимает `lightTheme` и `darkTheme`, если нужно переопределить -темы целиком. - ### Пример подключения шрифтов с помощью expo-fonts через плагин ```ts @@ -160,6 +157,17 @@ UI kit использует следующие виды шрифтов. ``` +## Токены анимации + +Длительность анимации хранится в `semanticTokens` числом в миллисекундах. +Easing-токен нужно передать в Reanimated через публичный адаптер: + +```ts +import { semanticTokens, toEasing } from '@cdek-it/react-native-ui-kit' + +const easing = toEasing(semanticTokens.effects.transition.easing.standard) +``` + ## Dependencies Для использования данной библиотеки необходимо: diff --git a/design-tokens/README.md b/design-tokens/README.md new file mode 100644 index 00000000..bba3daab --- /dev/null +++ b/design-tokens/README.md @@ -0,0 +1,6 @@ +# Design tokens + +`input/tokens.json` содержит входные токены из Figma, из которых генерируются +токены проекта. + +Подробности: [генератор токенов](../scripts/token-generator/README.md). diff --git a/design-tokens/input/tokens.json b/design-tokens/input/tokens.json new file mode 100644 index 00000000..16993284 --- /dev/null +++ b/design-tokens/input/tokens.json @@ -0,0 +1,5220 @@ +{ + "primitive": { + "colors": { + "alpha": { + "white": { + "10": "rgba(255, 255, 255, 0.0100)", + "40": "rgba(255, 255, 255, 0.0400)", + "50": "rgba(255, 255, 255, 0.0500)", + "60": "rgba(255, 255, 255, 0.0600)", + "100": "rgba(255, 255, 255, 0.1000)", + "160": "rgba(255, 255, 255, 0.1600)", + "200": "rgba(255, 255, 255, 0.2000)", + "300": "rgba(255, 255, 255, 0.3000)", + "400": "rgba(255, 255, 255, 0.4000)", + "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)", + "870": "rgba(255, 255, 255, 0.8700)", + "900": "rgba(255, 255, 255, 0.9000)", + "1000": "#ffffff" + }, + "black": { + "40": "rgba(0, 0, 0, 0.0400)", + "100": "rgba(0, 0, 0, 0.1000)", + "200": "rgba(0, 0, 0, 0.2000)", + "300": "rgba(0, 0, 0, 0.3000)", + "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" + }, + "green": { + "40": "rgba(68, 232, 88, 0.04)", + "100": "rgba(68, 232, 88, 0.1)", + "200": "rgba(68, 232, 88, 0.2)", + "400": "rgba(68, 232, 88, 0.4)", + "600": "rgba(68, 232, 88, 0.6)" + }, + "blue": { + "40": "rgba(68, 150, 232, 0.04)", + "100": "rgba(68, 150, 232, 0.1)", + "200": "rgba(68, 150, 232, 0.2)", + "400": "rgba(68, 150, 232, 0.4)", + "600": "rgba(68, 150, 232, 0.6)" + }, + "yellow": { + "40": "rgba(245, 184, 61, 0.04)", + "100": "rgba(245, 184, 61, 0.1)", + "200": "rgba(245, 184, 61, 0.2)", + "400": "rgba(245, 184, 61, 0.4)", + "600": "rgba(245, 184, 61, 0.6)" + }, + "red": { + "40": "rgba(232, 82, 68, 0.04)", + "100": "rgba(232, 82, 68, 0.1)", + "200": "rgba(232, 82, 68, 0.2)", + "400": "rgba(232, 82, 68, 0.4)", + "600": "rgba(232, 82, 68, 0.6)" + } + }, + "solid": { + "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" + } + } + }, + "sizing": { + "none": "0rem", + "05x": "0.0625rem", + "1x": "0.125rem", + "2x": "0.25rem", + "3x": "0.375rem", + "4x": "0.5rem", + "5x": "0.625rem", + "6x": "0.75rem", + "7x": "0.875rem", + "8x": "1rem", + "9x": "1.125rem", + "10x": "1.25rem", + "12x": "1.5rem", + "13x": "1.625rem", + "14x": "1.75rem", + "16x": "2rem", + "18x": "2.25rem", + "19x": "2.375rem", + "21x": "2.625rem", + "23x": "2.875rem", + "24x": "3rem", + "26x": "3.25rem", + "28x": "3.5rem", + "30x": "3.75rem", + "32x": "4rem", + "33x": "4.125rem", + "35x": "4.375rem", + "42x": "5.25rem", + "49x": "6.125rem", + "50x": "6.25rem", + "56x": "7rem", + "63x": "7.875rem", + "70x": "8.75rem", + "77x": "9.625rem", + "84x": "10.5rem", + "91x": "11.375rem", + "98x": "12.25rem", + "105x": "13.125rem", + "112x": "14rem", + "119x": "14.875rem", + "126x": "15.75rem", + "133x": "16.625rem", + "140x": "17.5rem", + "147x": "18.375rem", + "154x": "19.25rem", + "161x": "20.125rem", + "168x": "21rem", + "175x": "21.875rem", + "182x": "22.75rem", + "189x": "23.625rem", + "196x": "24.5rem", + "203x": "25.375rem", + "210x": "26.25rem", + "238x": "29.75rem", + "288x": "36rem", + "315x": "39.375rem", + "350x": "43.75rem", + "378x": "47.25rem", + "384x": "48rem", + "406x": "50.75rem", + "420x": "52.5rem", + "496x": "62rem", + "600x": "75rem", + "700x": "87.5rem", + "max": "100rem", + "20x": "2.5rem", + "40x": "5rem", + "120x": "15rem", + "136x": "17rem", + "152x": "19rem", + "200x": "25rem" + }, + "fonts": { + "fontFamily": { "base": "Noto Sans", "heading": "TT Fellows" }, + "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.75rem", + "150": "0.875rem", + "200": "0.875rem", + "250": "1rem", + "300": "1.125rem", + "350": "1.125rem", + "400": "1.25rem", + "450": "1.375rem", + "500": "1.5rem", + "550": "1.625rem", + "600": "1.75rem", + "700": "1.875rem", + "800": "2.25rem", + "850": "2.375rem", + "900": "2.75rem", + "1000": "3.375rem", + "none": "1", + "auto": "auto" + }, + "letterSpacing": { + "200": "-0.02rem", + "400": "-0.03rem", + "500": "0rem", + "600": "0.02rem", + "700": "0.03rem" + } + } + }, + "semantic": { + "colorScheme": { + "light": { + "color": { + "fg": { + "default": "{colors.solid.zinc.900}", + "hover": "{colors.solid.zinc.700}", + "active": "{colors.solid.zinc.950}", + "focus": "{colors.solid.zinc.900}", + "muted": "{colors.solid.zinc.500}", + "subtle": "{colors.solid.zinc.600}", + "brand": { + "default": "{colors.solid.green.500}", + "hover": "{colors.solid.green.600}", + "active": "{colors.solid.green.700}", + "disabled": "{colors.solid.green.300}", + "visited": "{colors.solid.green.800}", + "muted": "{colors.solid.green.400}" + }, + "inverse": { + "default": "{colors.alpha.white.1000}", + "hover": "{colors.alpha.white.1000}", + "active": "{colors.alpha.white.1000}", + "focus": "{colors.alpha.white.1000}", + "muted": "{colors.alpha.white.700}" + }, + "status": { + "danger": { + "default": "{colors.solid.red.500}", + "hover": "{colors.solid.red.600}", + "active": "{colors.solid.red.700}", + "disabled": "{colors.solid.red.300}", + "visited": "{colors.solid.red.800}", + "muted": "{colors.solid.red.400}" + }, + "info": { + "default": "{colors.solid.blue.500}", + "hover": "{colors.solid.blue.600}", + "active": "{colors.solid.blue.700}", + "disabled": "{colors.solid.blue.300}", + "visited": "{colors.solid.blue.800}", + "muted": "{colors.solid.blue.400}" + }, + "warning": { + "default": "{colors.solid.yellow.500}", + "hover": "{colors.solid.yellow.600}", + "active": "{colors.solid.yellow.700}", + "disabled": "{colors.solid.yellow.300}", + "visited": "{colors.solid.yellow.800}", + "muted": "{colors.solid.yellow.400}" + }, + "success": { + "default": "{colors.solid.green.500}", + "hover": "{colors.solid.green.600}", + "active": "{colors.solid.green.700}", + "disabled": "{colors.solid.green.300}", + "visited": "{colors.solid.green.800}", + "muted": "{colors.solid.green.400}" + }, + "help": { + "default": "{colors.solid.purple.500}", + "hover": "{colors.solid.purple.600}", + "active": "{colors.solid.purple.700}", + "disabled": "{colors.solid.purple.300}", + "visited": "{colors.solid.purple.800}", + "muted": "{colors.solid.purple.400}" + } + }, + "on": { + "brand": { + "default": "{colors.solid.zinc.900}", + "hover": "{colors.solid.zinc.900}", + "active": "{colors.solid.zinc.900}" + }, + "fill": { + "default": "{colors.alpha.white.1000}", + "hover": "{colors.alpha.white.1000}", + "active": "{colors.alpha.white.1000}", + "muted": "{colors.solid.zinc.200}" + }, + "status": { + "danger": { + "default": "{colors.solid.red.900}", + "hover": "{colors.solid.red.950}" + }, + "info": { + "default": "{colors.solid.blue.900}", + "hover": "{colors.solid.blue.950}" + }, + "warning": { + "default": "{colors.solid.yellow.900}", + "hover": "{colors.solid.yellow.950}" + }, + "success": { + "default": "{colors.solid.green.900}", + "hover": "{colors.solid.green.950}" + }, + "help": { + "default": "{colors.solid.purple.900}", + "hover": "{colors.solid.purple.950}" + } + } + } + }, + "bg": { + "status": { + "danger": { + "weak": { + "default": "{colors.solid.red.50}", + "hover": "{colors.solid.red.100}", + "active": "{colors.solid.red.200}" + }, + "strong": { + "default": "{colors.solid.red.300}", + "hover": "{colors.solid.red.400}", + "active": "{colors.solid.red.500}" + } + }, + "info": { + "weak": { + "default": "{colors.solid.blue.50}", + "hover": "{colors.solid.blue.100}", + "active": "{colors.solid.blue.200}" + }, + "strong": { + "default": "{colors.solid.blue.300}", + "hover": "{colors.solid.blue.400}", + "active": "{colors.solid.blue.500}" + } + }, + "warning": { + "weak": { + "default": "{colors.solid.yellow.50}", + "hover": "{colors.solid.yellow.100}", + "active": "{colors.solid.yellow.200}" + }, + "strong": { + "default": "{colors.solid.yellow.300}", + "hover": "{colors.solid.yellow.400}", + "active": "{colors.solid.yellow.500}" + } + }, + "success": { + "weak": { + "default": "{colors.solid.green.50}", + "hover": "{colors.solid.green.100}", + "active": "{colors.solid.green.200}" + }, + "strong": { + "default": "{colors.solid.green.300}", + "hover": "{colors.solid.green.400}", + "active": "{colors.solid.green.500}" + } + }, + "help": { + "weak": { + "default": "{colors.solid.purple.50}", + "hover": "{colors.solid.purple.100}", + "active": "{colors.solid.purple.200}" + }, + "strong": { + "default": "{colors.solid.purple.300}", + "hover": "{colors.solid.purple.400}", + "active": "{colors.solid.purple.500}" + } + } + }, + "brand": { + "weak": { + "hover": "{colors.solid.green.50}", + "active": "{colors.solid.green.100}" + }, + "strong": { + "default": "{colors.solid.green.500}", + "hover": "{colors.solid.green.600}", + "active": "{colors.solid.green.700}" + } + }, + "surface": { + "canvas": { + "default": "{colors.solid.zinc.100}", + "hover": "{colors.solid.zinc.200}", + "active": "{colors.solid.zinc.300}", + "selected": "{colors.solid.zinc.200}" + }, + "default": { + "default": "{colors.alpha.white.1000}", + "hover": "{colors.solid.zinc.50}", + "active": "{colors.solid.zinc.100}", + "selected": "{colors.solid.zinc.50}" + }, + "raised": { + "default": "{colors.alpha.white.1000}", + "hover": "{colors.solid.zinc.50}", + "active": "{colors.solid.zinc.100}", + "selected": "{colors.solid.zinc.50}" + }, + "overlay": { + "default": "{colors.alpha.white.1000}", + "hover": "{colors.solid.zinc.50}" + }, + "backdrop": "{colors.alpha.black.400}" + }, + "neutral": { + "weak": { + "default": "{colors.solid.zinc.100}", + "hover": "{colors.solid.zinc.200}", + "active": "{colors.solid.zinc.300}", + "disabled": "{colors.solid.zinc.200}" + }, + "medium": { + "default": "{colors.solid.zinc.200}", + "hover": "{colors.solid.zinc.300}", + "active": "{colors.solid.zinc.400}", + "strong": "{colors.solid.zinc.500}" + }, + "strong": { + "default": "{colors.solid.zinc.900}", + "hover": "{colors.solid.zinc.800}", + "active": "{colors.solid.zinc.700}", + "selected": "{colors.solid.zinc.900}" + } + } + }, + "border": { + "focus": "{colors.solid.green.200}", + "neutral": { + "default": "{colors.solid.zinc.200}", + "strong": "{colors.solid.zinc.300}", + "bold": { + "default": "{colors.solid.zinc.900}", + "hover": "{colors.solid.zinc.800}" + }, + "inverse": "{colors.alpha.white.1000}" + }, + "brand": { + "subtle": "{colors.solid.green.200}", + "default": "{colors.solid.green.500}", + "strong": "{colors.solid.green.600}" + }, + "status": { + "danger": { + "subtle": "{colors.solid.red.400}", + "default": "{colors.solid.red.500}", + "strong": "{colors.solid.red.600}" + }, + "info": { + "default": "{colors.solid.blue.500}", + "strong": "{colors.solid.blue.600}" + }, + "warning": { + "default": "{colors.solid.yellow.500}", + "strong": "{colors.solid.yellow.600}" + }, + "success": { + "default": "{colors.solid.green.500}", + "strong": "{colors.solid.green.600}" + }, + "help": { "strong": "{colors.solid.purple.600}" } + } + } + } + }, + "dark": { + "color": { + "fg": { + "default": "{colors.alpha.white.1000}", + "hover": "{colors.solid.zinc.300}", + "active": "{colors.solid.zinc.100}", + "focus": "{colors.alpha.white.1000}", + "muted": "{colors.solid.zinc.400}", + "subtle": "{colors.solid.zinc.400}", + "brand": { + "default": "{colors.solid.green.400}", + "hover": "{colors.solid.green.300}", + "active": "{colors.solid.green.200}", + "disabled": "{colors.solid.green.700}", + "visited": "{colors.solid.green.300}", + "muted": "{colors.solid.green.500}" + }, + "inverse": { + "default": "{colors.solid.zinc.900}", + "hover": "{colors.solid.zinc.700}", + "active": "{colors.solid.zinc.950}", + "focus": "{colors.solid.zinc.900}", + "muted": "{colors.solid.zinc.500}" + }, + "status": { + "danger": { + "default": "{colors.solid.red.400}", + "hover": "{colors.solid.red.300}", + "active": "{colors.solid.red.200}", + "disabled": "{colors.solid.red.700}", + "visited": "{colors.solid.red.300}", + "muted": "{colors.solid.red.500}" + }, + "info": { + "default": "{colors.solid.blue.400}", + "hover": "{colors.solid.blue.300}", + "active": "{colors.solid.blue.200}", + "disabled": "{colors.solid.blue.700}", + "visited": "{colors.solid.blue.300}", + "muted": "{colors.solid.blue.500}" + }, + "warning": { + "default": "{colors.solid.yellow.400}", + "hover": "{colors.solid.yellow.300}", + "active": "{colors.solid.yellow.200}", + "disabled": "{colors.solid.yellow.700}", + "visited": "{colors.solid.yellow.300}", + "muted": "{colors.solid.yellow.500}" + }, + "success": { + "default": "{colors.solid.green.400}", + "hover": "{colors.solid.green.300}", + "active": "{colors.solid.green.200}", + "disabled": "{colors.solid.green.700}", + "visited": "{colors.solid.green.300}", + "muted": "{colors.solid.green.500}" + }, + "help": { + "default": "{colors.solid.purple.400}", + "hover": "{colors.solid.purple.300}", + "active": "{colors.solid.purple.200}", + "disabled": "{colors.solid.purple.700}", + "visited": "{colors.solid.purple.300}", + "muted": "{colors.solid.purple.500}" + } + }, + "on": { + "brand": { + "default": "{colors.solid.zinc.900}", + "hover": "{colors.solid.zinc.900}", + "active": "{colors.solid.zinc.900}" + }, + "fill": { + "default": "{colors.alpha.white.1000}", + "hover": "{colors.alpha.white.1000}", + "active": "{colors.alpha.white.1000}", + "muted": "{colors.solid.zinc.200}" + }, + "status": { + "danger": { + "default": "{colors.solid.red.100}", + "hover": "{colors.solid.red.50}" + }, + "info": { + "default": "{colors.solid.blue.100}", + "hover": "{colors.solid.blue.50}" + }, + "warning": { + "default": "{colors.solid.yellow.100}", + "hover": "{colors.solid.yellow.50}" + }, + "success": { + "default": "{colors.solid.green.100}", + "hover": "{colors.solid.green.50}" + }, + "help": { + "default": "{colors.solid.purple.100}", + "hover": "{colors.solid.purple.50}" + } + } + } + }, + "bg": { + "status": { + "danger": { + "weak": { + "default": "{colors.solid.red.950}", + "hover": "{colors.solid.red.900}", + "active": "{colors.solid.red.800}" + }, + "strong": { + "default": "{colors.solid.red.700}", + "hover": "{colors.solid.red.600}", + "active": "{colors.solid.red.500}" + } + }, + "info": { + "weak": { + "default": "{colors.solid.blue.950}", + "hover": "{colors.solid.blue.900}", + "active": "{colors.solid.blue.800}" + }, + "strong": { + "default": "{colors.solid.blue.700}", + "hover": "{colors.solid.blue.600}", + "active": "{colors.solid.blue.500}" + } + }, + "warning": { + "weak": { + "default": "{colors.solid.yellow.950}", + "hover": "{colors.solid.yellow.900}", + "active": "{colors.solid.yellow.800}" + }, + "strong": { + "default": "{colors.solid.yellow.700}", + "hover": "{colors.solid.yellow.600}", + "active": "{colors.solid.yellow.500}" + } + }, + "success": { + "weak": { + "default": "{colors.solid.green.950}", + "hover": "{colors.solid.green.900}", + "active": "{colors.solid.green.800}" + }, + "strong": { + "default": "{colors.solid.green.700}", + "hover": "{colors.solid.green.600}", + "active": "{colors.solid.green.500}" + } + }, + "help": { + "weak": { + "default": "{colors.solid.purple.950}", + "hover": "{colors.solid.purple.900}", + "active": "{colors.solid.purple.800}" + }, + "strong": { + "default": "{colors.solid.purple.700}", + "hover": "{colors.solid.purple.600}", + "active": "{colors.solid.purple.500}" + } + } + }, + "brand": { + "weak": { + "hover": "{colors.solid.green.950}", + "active": "{colors.solid.green.900}" + }, + "strong": { + "default": "{colors.solid.green.500}", + "hover": "{colors.solid.green.400}", + "active": "{colors.solid.green.300}" + } + }, + "surface": { + "canvas": { + "default": "{colors.solid.zinc.900}", + "hover": "{colors.solid.zinc.800}", + "active": "{colors.solid.zinc.700}", + "selected": "{colors.solid.zinc.800}" + }, + "default": { + "default": "{colors.solid.zinc.800}", + "hover": "{colors.solid.zinc.700}", + "active": "{colors.solid.zinc.600}", + "selected": "{colors.solid.zinc.700}" + }, + "raised": { + "default": "{colors.solid.zinc.700}", + "hover": "{colors.solid.zinc.600}", + "active": "{colors.solid.zinc.500}", + "selected": "{colors.solid.zinc.600}" + }, + "overlay": { + "default": "{colors.solid.zinc.800}", + "hover": "{colors.solid.zinc.700}" + }, + "backdrop": "{colors.alpha.black.600}" + }, + "neutral": { + "weak": { + "default": "{colors.solid.zinc.900}", + "hover": "{colors.solid.zinc.800}", + "active": "{colors.solid.zinc.700}", + "disabled": "{colors.solid.zinc.800}" + }, + "medium": { + "default": "{colors.solid.zinc.800}", + "hover": "{colors.solid.zinc.700}", + "active": "{colors.solid.zinc.600}", + "strong": "{colors.solid.zinc.500}" + }, + "strong": { + "default": "{colors.solid.zinc.100}", + "hover": "{colors.solid.zinc.200}", + "active": "{colors.solid.zinc.300}", + "selected": "{colors.solid.zinc.100}" + } + } + }, + "border": { + "focus": "{colors.solid.green.200}", + "neutral": { + "default": "{colors.solid.zinc.800}", + "strong": "{colors.solid.zinc.700}", + "bold": { + "default": "{colors.solid.zinc.100}", + "hover": "{colors.solid.zinc.200}" + }, + "inverse": "{colors.solid.zinc.900}" + }, + "brand": { + "subtle": "{colors.solid.green.800}", + "default": "{colors.solid.green.500}", + "strong": "{colors.solid.green.400}" + }, + "status": { + "danger": { + "subtle": "{colors.solid.red.600}", + "default": "{colors.solid.red.500}", + "strong": "{colors.solid.red.400}" + }, + "info": { + "default": "{colors.solid.blue.500}", + "strong": "{colors.solid.blue.400}" + }, + "warning": { + "default": "{colors.solid.yellow.500}", + "strong": "{colors.solid.yellow.400}" + }, + "success": { + "default": "{colors.solid.green.500}", + "strong": "{colors.solid.green.400}" + }, + "help": { "strong": "{colors.solid.purple.400}" } + } + } + } + } + }, + "dimension": { + "space": { + "none": "{sizing.none}", + "100": "{sizing.2x}", + "150": "{sizing.3x}", + "200": "{sizing.4x}", + "300": "{sizing.5x}", + "400": "{sizing.7x}", + "500": "{sizing.9x}", + "600": "{sizing.10x}", + "700": "{sizing.12x}", + "800": "{sizing.14x}", + "negative": { + "50": "-0.125rem", + "200": "-0.5rem", + "300": "-0.75rem", + "600": "-1.5rem" + } + }, + "size": { + "none": "{sizing.none}", + "50": "{sizing.1x}", + "100": "{sizing.2x}", + "150": "{sizing.3x}", + "200": "{sizing.4x}", + "300": "{sizing.5x}", + "350": "{sizing.6x}", + "400": "{sizing.7x}", + "450": "{sizing.8x}", + "500": "{sizing.9x}", + "600": "{sizing.10x}", + "700": "{sizing.12x}", + "750": "{sizing.13x}", + "800": "{sizing.14x}", + "900": "{sizing.16x}", + "1000": "{sizing.18x}", + "1100": "{sizing.20x}", + "1200": "{sizing.24x}", + "1300": "{sizing.28x}", + "1400": "{sizing.32x}", + "1500": "{sizing.40x}", + "1600": "{sizing.120x}", + "1700": "{sizing.136x}", + "1800": "{sizing.152x}", + "1900": "{sizing.168x}", + "2000": "{sizing.200x}", + "max": "{sizing.max}" + }, + "borderRadius": { + "none": "{sizing.none}", + "100": "{sizing.2x}", + "200": "{sizing.4x}", + "300": "{sizing.5x}", + "400": "{sizing.7x}", + "500": "{sizing.10x}", + "max": "{sizing.max}" + }, + "borderWidth": { + "none": "{sizing.none}", + "100": "{sizing.05x}", + "200": "{sizing.1x}", + "300": "{sizing.2x}" + }, + "focusRing": { "width": "{sizing.2x}", "offset": "{sizing.none}" }, + "depth": { + "100": "1000", + "200": "1100", + "300": "1200", + "400": "1300", + "500": "1400", + "600": "1500", + "700": "1600" + }, + "viewport": { + "100": "{sizing.288x}", + "200": "{sizing.384x}", + "300": "{sizing.496x}", + "400": "{sizing.600x}", + "500": "{sizing.700x}" + } + }, + "effects": { + "opacity": { + "0": "0", + "4": "0.04", + "8": "0.08", + "12": "0.12", + "16": "0.16", + "20": "0.2", + "30": "0.3", + "40": "0.4", + "50": "0.5", + "60": "0.6", + "70": "0.7", + "80": "0.8", + "90": "0.9", + "100": "1" + }, + "blur": { + "none": "0", + "100": "4px", + "200": "8px", + "300": "16px", + "400": "24px" + }, + "transition": { + "easing": { + "linear": "linear", + "in": "cubic-bezier(0.55, 0.06, 0.7, 0.2)", + "out": "cubic-bezier(0.2, 0.6, 0.4, 1)", + "inOut": "cubic-bezier(0.65, 0.05, 0.35, 1)", + "standard": "cubic-bezier(0.2, 0, 0, 1)", + "accelerate": "cubic-bezier(0.3, 0, 1, 1)", + "decelerate": "cubic-bezier(0, 0, 0, 1)", + "emphasizedAccelerate": "cubic-bezier(0.3, 0, 0.8, 0.15)", + "emphasizedDecelerate": "cubic-bezier(0.05, 0.7, 0.1, 1)", + "spring": "cubic-bezier(0.34, 1.56, 0.64, 1)" + }, + "duration": { + "100": "140ms", + "200": "180ms", + "300": "240ms", + "400": "320ms", + "500": "400ms" + } + }, + "elevation": { + "none": "none", + "100": "0 0 2px {colors.alpha.black.200}", + "200": "0 0 4px {colors.alpha.black.200}", + "300": "0 2px 4px {colors.alpha.black.200}", + "400": "0 4px 8px {colors.alpha.black.200}", + "500": "0 8px 16px 0 {colors.alpha.black.200}", + "status": { + "info": "0px 4px 8px 0px {colors.alpha.blue.40}", + "success": "0px 4px 8px 0px {colors.alpha.green.40}", + "warning": "0px 4px 8px 0px {colors.alpha.yellow.40}", + "danger": "0px 4px 8px 0px {colors.alpha.red.40}", + "secondary": "0px 4px 8px 0px {colors.alpha.black.40}", + "contrast": "0px 4px 8px 0px {colors.alpha.black.40}" + } + }, + "focusRing": { + "shadow": "inset 0 0 0 {dimension.focusRing.width} {colors.solid.green.200}" + } + } + }, + "components": { + "accordion": { + "extend": { + "extHeader": { + "iconSize": "{dimension.size.600}", + "gap": "{dimension.space.200}" + } + }, + "colorScheme": { + "light": { + "header": { + "background": "transparent", + "hoverBackground": "transparent", + "activeBackground": "transparent", + "activeHoverBackground": "transparent" + } + }, + "dark": { + "header": { + "activeBackground": "transparent", + "activeHoverBackground": "transparent", + "background": "transparent", + "hoverBackground": "transparent" + } + } + }, + "header": { + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "activeColor": "{color.fg.default}", + "activeHoverColor": "{color.fg.hover}", + "borderColor": "transparent", + "padding": "{dimension.space.400} {dimension.space.none} {dimension.space.400} {dimension.space.none}", + "fontWeight": "{fonts.fontWeight.bold}", + "borderRadius": "{dimension.borderRadius.none}", + "borderWidth": "{dimension.borderWidth.none}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.focusRing.shadow}" + }, + "toggleIcon": { + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "activeColor": "{color.fg.default}", + "activeHoverColor": "{color.fg.hover}" + }, + "last": { + "bottomBorderRadius": "{dimension.borderRadius.none}", + "activeBottomBorderRadius": "{dimension.borderRadius.none}" + }, + "first": { + "borderWidth": "{dimension.borderWidth.none}", + "topBorderRadius": "{dimension.borderRadius.none}" + } + }, + "root": { "transitionDuration": "{effects.transition.duration.200}" }, + "panel": { + "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.300} {dimension.borderWidth.none}", + "borderColor": "{color.border.neutral.strong}" + }, + "content": { + "borderWidth": "{dimension.borderWidth.100} {dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.none}", + "borderColor": "transparent", + "background": "transparent", + "color": "{color.fg.default}", + "padding": "{dimension.space.none} {dimension.space.700} {dimension.space.400} {dimension.space.700}" + } + }, + "autocomplete": { + "extend": { + "extOption": { "gap": "{dimension.space.200}" }, + "extOptionGroup": { "gap": "{dimension.space.200}" } + }, + "colorScheme": { + "light": { + "chip": { + "focusBackground": "{color.bg.neutral.medium.default}", + "focusColor": "{color.fg.default}" + }, + "dropdown": { + "background": "{color.bg.surface.default.default}", + "hoverBackground": "{color.bg.surface.default.default}", + "activeBackground": "{color.bg.surface.default.default}", + "color": "{color.fg.active}", + "hoverColor": "{color.fg.active}", + "activeColor": "{color.fg.active}" + } + }, + "dark": { + "chip": { + "focusBackground": "{color.bg.neutral.strong.hover}", + "focusColor": "{color.fg.inverse.focus}" + }, + "dropdown": { + "activeBackground": "{color.bg.surface.default.default}", + "activeColor": "{color.fg.inverse.active}", + "background": "{color.bg.surface.default.default}", + "color": "{color.fg.inverse.active}", + "hoverBackground": "{color.bg.surface.default.default}", + "hoverColor": "{color.fg.inverse.active}" + } + } + }, + "root": { + "background": "{color.bg.surface.default.default}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "filledBackground": "{color.bg.surface.default.default}", + "filledHoverBackground": "{color.bg.surface.default.default}", + "filledFocusBackground": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.strong}", + "hoverBorderColor": "{color.border.brand.strong}", + "focusBorderColor": "{color.border.brand.strong}", + "invalidBorderColor": "{color.border.status.danger.subtle}", + "color": "{color.fg.active}", + "disabledColor": "{color.fg.muted}", + "placeholderColor": "{color.fg.muted}", + "invalidPlaceholderColor": "{color.fg.status.danger.hover}", + "shadow": "{effects.elevation.none}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}", + "borderRadius": "{dimension.borderRadius.400}", + "transitionDuration": "{effects.transition.duration.200}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}" + } + }, + "overlay": { + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "borderRadius": "{dimension.borderRadius.400}", + "color": "{color.fg.default}", + "shadow": "{effects.elevation.200}" + }, + "list": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + }, + "option": { + "focusBackground": "{color.bg.neutral.weak.default}", + "selectedBackground": "{color.bg.neutral.strong.selected}", + "selectedFocusBackground": "{color.bg.neutral.strong.active}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "selectedColor": "{color.fg.on.fill.default}", + "selectedFocusColor": "{color.fg.on.fill.active}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.200}" + }, + "optionGroup": { + "background": "{color.bg.surface.raised.default}", + "color": "{color.fg.muted}", + "fontWeight": "{fonts.fontWeight.demibold}", + "padding": "{dimension.space.200} {dimension.space.400}" + }, + "dropdown": { + "width": "{dimension.size.1700}", + "borderColor": "{color.border.neutral.strong}", + "hoverBorderColor": "{color.border.brand.strong}", + "activeBorderColor": "{color.border.brand.strong}", + "borderRadius": "{dimension.borderRadius.400}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}" + }, + "sm": { "width": "{dimension.size.1600}" }, + "lg": { "width": "{dimension.size.1800}" } + }, + "chip": { "borderRadius": "{dimension.borderRadius.200}" }, + "emptyMessage": { + "padding": "{dimension.space.200} {dimension.space.400}" + } + }, + "avatar": { + "extend": { + "borderColor": "{color.border.neutral.strong}", + "circle": { "borderRadius": "{dimension.borderRadius.max}" } + }, + "root": { + "width": "{dimension.size.900}", + "height": "{dimension.size.900}", + "fontSize": "{fonts.fontSize.300}", + "color": "{color.fg.default}", + "background": "{color.bg.brand.strong.default}", + "borderRadius": "{dimension.borderRadius.400}" + }, + "icon": { "size": "{dimension.size.450}" }, + "group": { + "borderColor": "{color.border.neutral.inverse}", + "offset": "{dimension.space.negative.300}" + }, + "lg": { + "width": "{dimension.size.1100}", + "height": "{dimension.size.1100}", + "fontSize": "{fonts.fontSize.300}", + "icon": { "size": "{dimension.size.450}" }, + "group": { "offset": "{dimension.space.negative.300}" } + }, + "xl": { + "width": "{dimension.size.1300}", + "height": "{dimension.size.1300}", + "icon": { "size": "{dimension.size.700}" }, + "group": { "offset": "{dimension.space.negative.600}" }, + "fontSize": "{fonts.fontSize.300}" + } + }, + "badge": { + "extend": { + "extDot": { + "success": { "background": "{color.bg.status.success.strong.hover}" }, + "info": { "background": "{color.bg.status.info.strong.hover}" }, + "warn": { "background": "{color.bg.status.warning.strong.hover}" }, + "danger": { "background": "{color.bg.status.danger.strong.hover}" }, + "lg": { "size": "{dimension.size.350}" }, + "xlg": { "size": "{dimension.size.450}" } + }, + "ext": { "padding": "{dimension.space.none}" } + }, + "colorScheme": { + "light": { + "primary": { + "color": "{color.fg.default}", + "background": "{color.bg.brand.strong.default}" + }, + "secondary": { + "color": "{color.fg.on.fill.default}", + "background": "{color.bg.neutral.strong.default}" + }, + "success": { + "color": "{color.fg.on.status.success.default}", + "background": "{color.bg.status.success.strong.default}" + }, + "info": { + "color": "{color.fg.on.status.info.default}", + "background": "{color.bg.status.info.strong.default}" + }, + "warn": { + "color": "{color.fg.on.status.warning.default}", + "background": "{color.bg.status.warning.strong.default}" + }, + "danger": { + "color": "{color.fg.on.status.danger.default}", + "background": "{color.bg.status.danger.strong.default}" + }, + "contrast": { + "background": "{color.bg.neutral.strong.default}", + "color": "{color.fg.on.fill.default}" + } + }, + "dark": { + "contrast": { + "background": "{color.bg.surface.canvas.default}", + "color": "{color.fg.default}" + }, + "danger": { + "background": "{color.bg.status.danger.strong.default}", + "color": "{color.fg.on.status.danger.default}" + }, + "info": { + "background": "{color.bg.status.info.strong.default}", + "color": "{color.fg.on.status.info.default}" + }, + "primary": { + "background": "{color.bg.brand.strong.default}", + "color": "{color.fg.inverse.default}" + }, + "secondary": { + "background": "{color.bg.surface.canvas.default}", + "color": "{color.fg.default}" + }, + "success": { + "background": "{color.bg.brand.strong.active}", + "color": "{color.fg.on.status.success.default}" + }, + "warn": { + "background": "{color.bg.status.warning.strong.default}", + "color": "{color.fg.on.status.warning.default}" + } + } + }, + "root": { + "borderRadius": "{dimension.borderRadius.200}", + "padding": "{dimension.space.200}", + "fontSize": "{fonts.fontSize.100}", + "fontWeight": "{fonts.fontWeight.regular}", + "minWidth": "{dimension.size.700}", + "height": "{dimension.size.700}" + }, + "dot": { "size": "{dimension.size.200}" }, + "sm": { + "fontSize": "{fonts.fontSize.100}", + "minWidth": "{dimension.size.none}", + "height": "{dimension.size.none}" + }, + "lg": { + "fontSize": "{fonts.fontSize.100}", + "minWidth": "{dimension.size.800}", + "height": "{dimension.size.800}" + }, + "xl": { + "fontSize": "{fonts.fontSize.100}", + "minWidth": "{dimension.size.900}", + "height": "{dimension.size.900}" + } + }, + "breadcrumb": { + "extend": { + "hoverBackground": "{color.bg.neutral.weak.default}", + "iconSize": "{dimension.size.600}", + "extItem": { "padding": "{dimension.space.100}" } + }, + "root": { + "padding": "{dimension.space.none}", + "background": "transparent", + "gap": "{dimension.space.none}", + "transitionDuration": "{effects.transition.duration.200}" + }, + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + }, + "item": { + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "borderRadius": "{dimension.borderRadius.100}", + "gap": "{dimension.space.200}", + "icon": { + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}" + }, + "focusRing": { + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}", + "style": "none", + "width": "{dimension.focusRing.width}" + } + }, + "separator": { "color": "{color.fg.default}" } + }, + "button": { + "extend": { + "disabledBackground": "{color.bg.neutral.weak.disabled}", + "extOutlined": { + "danger": { "focusBackground": "transparent" }, + "warn": { "focusBackground": "transparent" }, + "info": { "focusBackground": "transparent" }, + "help": { "focusBackground": "transparent" }, + "success": { "focusBackground": "transparent" } + }, + "disabledColor": "{color.fg.muted}", + "extText": { + "danger": { "focusBackground": "transparent" }, + "warn": { "focusBackground": "transparent" }, + "info": { "focusBackground": "transparent" }, + "help": { "focusBackground": "transparent" }, + "success": { "focusBackground": "transparent" } + }, + "extLink": { + "background": "transparent", + "colorHover": "{color.fg.hover}", + "paddingX": "{dimension.space.none}", + "paddingY": "{dimension.space.100}", + "sm": { "iconOnlyWidth": "{dimension.size.450}" }, + "base": { "iconOnlyWidth": "{dimension.size.700}" }, + "lg": { "iconOnlyWidth": "{dimension.size.800}" }, + "xlg": { "iconOnlyWidth": "{dimension.size.900}" } + }, + "extSm": { + "borderRadius": "{dimension.borderRadius.400}", + "gap": "{dimension.space.200}" + }, + "extLg": { + "borderRadius": "{dimension.borderRadius.400}", + "gap": "{dimension.space.400}", + "height": "{dimension.size.1300}" + }, + "extXlg": { + "borderRadius": "{dimension.borderRadius.400}", + "gap": "{dimension.space.400}", + "iconOnlyWidth": "{dimension.size.1400}", + "paddingX": "{dimension.space.700}", + "paddingY": "{dimension.space.600}", + "height": "{dimension.size.1400}" + }, + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": { + "sm": "{dimension.size.450}", + "md": "{dimension.size.600}", + "lg": "{dimension.size.700}" + } + }, + "colorScheme": { + "light": { + "root": { + "primary": { + "background": "{color.bg.brand.strong.default}", + "hoverBackground": "{color.bg.brand.strong.hover}", + "activeBackground": "{color.bg.brand.strong.active}", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.default}", + "activeColor": "{color.fg.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } + }, + "secondary": { + "background": "{color.bg.neutral.strong.default}", + "hoverBackground": "{color.bg.neutral.strong.hover}", + "activeBackground": "{color.bg.neutral.strong.active}", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "{color.fg.on.fill.default}", + "hoverColor": "{color.fg.on.fill.hover}", + "activeColor": "{color.fg.on.fill.active}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } + }, + "contrast": { + "background": "{color.bg.surface.canvas.hover}", + "hoverBackground": "{color.bg.surface.canvas.active}", + "activeBackground": "{color.bg.neutral.medium.active}", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.default}", + "activeColor": "{color.fg.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } + }, + "info": { + "background": "{color.bg.status.info.strong.default}", + "hoverBackground": "{color.bg.status.info.strong.hover}", + "activeBackground": "{color.bg.status.info.strong.active}", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "{color.fg.on.status.info.default}", + "hoverColor": "{color.fg.on.status.info.hover}", + "activeColor": "{color.fg.on.status.info.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + } + }, + "success": { + "background": "{color.bg.status.success.strong.default}", + "hoverBackground": "{color.bg.status.success.strong.hover}", + "activeBackground": "{color.bg.status.success.strong.active}", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "{color.fg.on.status.success.default}", + "hoverColor": "{color.fg.on.status.success.hover}", + "activeColor": "{color.fg.on.status.success.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + } + }, + "warn": { + "background": "{color.bg.status.warning.strong.default}", + "hoverBackground": "{color.bg.status.warning.strong.hover}", + "activeBackground": "{color.bg.status.warning.strong.active}", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "{color.fg.on.status.warning.default}", + "hoverColor": "{color.fg.on.status.warning.hover}", + "activeColor": "{color.fg.on.status.warning.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + } + }, + "help": { + "background": "{color.bg.status.help.strong.default}", + "hoverBackground": "{color.bg.status.help.strong.hover}", + "activeBackground": "{color.bg.status.help.strong.active}", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "{color.fg.on.status.help.default}", + "hoverColor": "{color.fg.on.status.help.hover}", + "activeColor": "{color.fg.on.status.help.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + } + }, + "danger": { + "background": "{color.bg.status.danger.strong.default}", + "hoverBackground": "{color.bg.status.danger.strong.hover}", + "activeBackground": "{color.bg.status.danger.strong.active}", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "{color.fg.on.status.danger.default}", + "hoverColor": "{color.fg.on.status.danger.hover}", + "activeColor": "{color.fg.on.status.danger.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + } + } + }, + "outlined": { + "primary": { + "hoverBackground": "{color.bg.brand.weak.hover}", + "activeBackground": "{color.bg.brand.weak.active}", + "borderColor": "{color.border.focus}", + "color": "{color.fg.brand.default}" + }, + "success": { + "hoverBackground": "{color.bg.status.success.weak.hover}", + "activeBackground": "{color.bg.status.success.weak.active}", + "borderColor": "{color.border.brand.strong}", + "color": "{color.fg.status.success.hover}" + }, + "info": { + "hoverBackground": "{color.bg.status.info.weak.hover}", + "activeBackground": "{color.bg.status.info.weak.active}", + "borderColor": "{color.border.status.info.strong}", + "color": "{color.fg.status.info.hover}" + }, + "warn": { + "hoverBackground": "{color.bg.status.warning.weak.hover}", + "activeBackground": "{color.bg.status.warning.weak.active}", + "borderColor": "{color.border.status.warning.strong}", + "color": "{color.fg.status.warning.hover}" + }, + "help": { + "hoverBackground": "{color.bg.status.help.weak.hover}", + "activeBackground": "{color.bg.status.help.weak.active}", + "borderColor": "{color.border.status.help.strong}", + "color": "{color.fg.status.help.hover}" + }, + "danger": { + "hoverBackground": "{color.bg.status.danger.weak.hover}", + "activeBackground": "{color.bg.status.danger.weak.active}", + "borderColor": "{color.border.status.danger.strong}", + "color": "{color.fg.status.danger.hover}" + }, + "contrast": { + "activeBackground": "{color.bg.neutral.strong.active}", + "borderColor": "{color.border.neutral.bold.default}", + "color": "{color.fg.on.fill.default}", + "hoverBackground": "{color.bg.neutral.strong.hover}" + }, + "plain": { + "activeBackground": "{color.bg.neutral.medium.default}", + "borderColor": "{color.border.neutral.strong}", + "color": "{color.fg.default}", + "hoverBackground": "{color.bg.neutral.weak.default}" + }, + "secondary": { + "activeBackground": "{color.bg.neutral.medium.default}", + "borderColor": "{color.border.neutral.strong}", + "color": "{color.fg.default}", + "hoverBackground": "{color.bg.neutral.weak.default}" + } + }, + "text": { + "primary": { + "hoverBackground": "{color.bg.neutral.weak.default}", + "activeBackground": "{color.bg.neutral.medium.default}", + "color": "{color.fg.default}" + }, + "success": { + "hoverBackground": "{color.bg.status.success.weak.hover}", + "activeBackground": "{color.bg.status.success.weak.active}", + "color": "{color.fg.status.success.hover}" + }, + "info": { + "hoverBackground": "{color.bg.status.info.weak.hover}", + "activeBackground": "{color.bg.status.info.weak.active}", + "color": "{color.fg.status.info.hover}" + }, + "warn": { + "hoverBackground": "{color.bg.status.warning.weak.hover}", + "activeBackground": "{color.bg.status.warning.weak.active}", + "color": "{color.fg.status.warning.hover}" + }, + "help": { + "hoverBackground": "{color.bg.status.help.weak.hover}", + "activeBackground": "{color.bg.status.help.weak.active}", + "color": "{color.fg.status.help.hover}" + }, + "danger": { + "hoverBackground": "{color.bg.status.danger.weak.hover}", + "activeBackground": "{color.bg.status.danger.weak.active}", + "color": "{color.fg.status.danger.hover}" + }, + "contrast": { + "activeBackground": "{color.bg.neutral.strong.active}", + "color": "{color.fg.on.fill.default}", + "hoverBackground": "{color.bg.neutral.strong.hover}" + }, + "plain": { + "activeBackground": "{color.bg.neutral.medium.default}", + "color": "{color.fg.default}", + "hoverBackground": "{color.bg.neutral.weak.default}" + }, + "secondary": { + "activeBackground": "{color.bg.neutral.medium.default}", + "color": "{color.fg.default}", + "hoverBackground": "{color.bg.neutral.weak.default}" + } + }, + "link": { + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "activeColor": "{color.fg.muted}" + } + }, + "dark": { + "link": { + "activeColor": "{color.fg.inverse.muted}", + "color": "{color.fg.inverse.default}", + "hoverColor": "{color.fg.inverse.hover}" + }, + "outlined": { + "contrast": { + "activeBackground": "{color.bg.surface.canvas.active}", + "borderColor": "{color.border.neutral.inverse}", + "color": "{color.fg.default}", + "hoverBackground": "{color.bg.surface.canvas.hover}" + }, + "danger": { + "activeBackground": "{color.bg.status.danger.weak.active}", + "borderColor": "{color.border.status.danger.subtle}", + "color": "{color.fg.status.danger.hover}", + "hoverBackground": "{color.bg.status.danger.weak.hover}" + }, + "help": { + "activeBackground": "{color.bg.status.help.weak.active}", + "borderColor": "{color.border.status.help.strong}", + "color": "{color.fg.status.help.hover}", + "hoverBackground": "{color.bg.status.help.weak.hover}" + }, + "info": { + "activeBackground": "{color.bg.status.info.weak.active}", + "borderColor": "{color.border.status.info.strong}", + "color": "{color.fg.status.info.hover}", + "hoverBackground": "{color.bg.status.info.weak.hover}" + }, + "plain": { + "activeBackground": "{color.bg.neutral.strong.hover}", + "borderColor": "{color.border.neutral.strong}", + "color": "{color.fg.inverse.default}", + "hoverBackground": "{color.bg.neutral.strong.selected}" + }, + "primary": { + "activeBackground": "{color.bg.brand.weak.active}", + "borderColor": "{color.border.focus}", + "color": "{color.fg.brand.muted}", + "hoverBackground": "{color.bg.brand.weak.hover}" + }, + "secondary": { + "activeBackground": "{color.bg.neutral.strong.hover}", + "borderColor": "{color.border.neutral.strong}", + "color": "{color.fg.inverse.default}", + "hoverBackground": "{color.bg.neutral.strong.selected}" + }, + "success": { + "activeBackground": "{color.bg.status.success.weak.active}", + "borderColor": "{color.border.brand.strong}", + "color": "{color.fg.status.success.hover}", + "hoverBackground": "{color.bg.status.success.weak.hover}" + }, + "warn": { + "activeBackground": "{color.bg.status.warning.weak.active}", + "borderColor": "{color.border.status.warning.strong}", + "color": "{color.fg.status.warning.hover}", + "hoverBackground": "{color.bg.status.warning.weak.hover}" + } + }, + "root": { + "contrast": { + "activeBackground": "{color.bg.neutral.medium.active}", + "activeBorderColor": "transparent", + "activeColor": "{color.fg.on.brand.active}", + "background": "{color.bg.neutral.strong.hover}", + "borderColor": "transparent", + "color": "{color.fg.inverse.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "{color.bg.neutral.strong.active}", + "hoverBorderColor": "transparent", + "hoverColor": "{color.fg.on.brand.hover}" + }, + "danger": { + "activeBackground": "{color.bg.status.danger.strong.active}", + "activeBorderColor": "transparent", + "activeColor": "{color.fg.on.status.danger.default}", + "background": "{color.bg.status.danger.strong.default}", + "borderColor": "transparent", + "color": "{color.fg.on.status.danger.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + }, + "hoverBackground": "{color.bg.status.danger.strong.hover}", + "hoverBorderColor": "transparent", + "hoverColor": "{color.fg.on.status.danger.hover}" + }, + "help": { + "activeBackground": "{color.bg.status.help.strong.active}", + "activeBorderColor": "transparent", + "activeColor": "{color.fg.on.status.help.default}", + "background": "{color.bg.status.help.strong.default}", + "borderColor": "transparent", + "color": "{color.fg.on.status.help.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + }, + "hoverBackground": "{color.bg.status.help.strong.hover}", + "hoverBorderColor": "transparent", + "hoverColor": "{color.fg.on.status.help.hover}" + }, + "info": { + "activeBackground": "{color.bg.status.info.strong.active}", + "activeBorderColor": "transparent", + "activeColor": "{color.fg.on.status.info.default}", + "background": "{color.bg.status.info.strong.default}", + "borderColor": "transparent", + "color": "{color.fg.on.status.info.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + }, + "hoverBackground": "{color.bg.status.info.strong.hover}", + "hoverBorderColor": "transparent", + "hoverColor": "{color.fg.on.status.info.hover}" + }, + "primary": { + "activeBackground": "{color.bg.status.success.strong.default}", + "activeBorderColor": "transparent", + "activeColor": "{color.fg.on.brand.active}", + "background": "{color.bg.brand.strong.default}", + "borderColor": "transparent", + "color": "{color.fg.inverse.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "{color.bg.status.success.strong.hover}", + "hoverBorderColor": "transparent", + "hoverColor": "{color.fg.on.brand.hover}" + }, + "secondary": { + "activeBackground": "{color.bg.surface.canvas.active}", + "activeBorderColor": "transparent", + "activeColor": "{color.fg.on.fill.active}", + "background": "{color.bg.surface.canvas.default}", + "borderColor": "transparent", + "color": "{color.fg.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "{color.bg.surface.canvas.hover}", + "hoverBorderColor": "transparent", + "hoverColor": "{color.fg.on.fill.hover}" + }, + "success": { + "activeBackground": "{color.bg.status.success.strong.active}", + "activeBorderColor": "transparent", + "activeColor": "{color.fg.on.status.success.default}", + "background": "{color.bg.brand.strong.active}", + "borderColor": "transparent", + "color": "{color.fg.on.status.success.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + }, + "hoverBackground": "{color.bg.brand.strong.hover}", + "hoverBorderColor": "transparent", + "hoverColor": "{color.fg.on.status.success.hover}" + }, + "warn": { + "activeBackground": "{color.bg.status.warning.strong.active}", + "activeBorderColor": "transparent", + "activeColor": "{color.fg.on.status.warning.default}", + "background": "{color.bg.status.warning.strong.default}", + "borderColor": "transparent", + "color": "{color.fg.on.status.warning.default}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + }, + "hoverBackground": "{color.bg.status.warning.strong.hover}", + "hoverBorderColor": "transparent", + "hoverColor": "{color.fg.on.status.warning.hover}" + } + }, + "text": { + "contrast": { + "activeBackground": "{color.bg.surface.canvas.active}", + "color": "{color.fg.default}", + "hoverBackground": "{color.bg.surface.canvas.hover}" + }, + "danger": { + "activeBackground": "{color.bg.status.danger.weak.active}", + "color": "{color.fg.status.danger.hover}", + "hoverBackground": "{color.bg.status.danger.weak.hover}" + }, + "help": { + "activeBackground": "{color.bg.status.help.weak.active}", + "color": "{color.fg.status.help.hover}", + "hoverBackground": "{color.bg.status.help.weak.hover}" + }, + "info": { + "activeBackground": "{color.bg.status.info.weak.active}", + "color": "{color.fg.status.info.hover}", + "hoverBackground": "{color.bg.status.info.weak.hover}" + }, + "plain": { + "activeBackground": "{color.bg.neutral.strong.hover}", + "color": "{color.fg.inverse.default}", + "hoverBackground": "{color.bg.neutral.strong.selected}" + }, + "primary": { + "activeBackground": "{color.bg.neutral.strong.hover}", + "color": "{color.fg.inverse.default}", + "hoverBackground": "{color.bg.neutral.strong.selected}" + }, + "secondary": { + "activeBackground": "{color.bg.neutral.strong.hover}", + "color": "{color.fg.inverse.default}", + "hoverBackground": "{color.bg.neutral.strong.selected}" + }, + "success": { + "activeBackground": "{color.bg.status.success.weak.active}", + "color": "{color.fg.status.success.hover}", + "hoverBackground": "{color.bg.status.success.weak.hover}" + }, + "warn": { + "activeBackground": "{color.bg.status.warning.weak.active}", + "color": "{color.fg.status.warning.hover}", + "hoverBackground": "{color.bg.status.warning.weak.hover}" + } + } + } + }, + "root": { + "borderRadius": "{dimension.borderRadius.400}", + "roundedBorderRadius": "{dimension.borderRadius.max}", + "gap": "{dimension.space.200}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.200}", + "iconOnlyWidth": "{dimension.size.1100}", + "raisedShadow": "none", + "badgeSize": "{dimension.size.450}", + "transitionDuration": "{effects.transition.duration.200}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "offset": "{dimension.focusRing.offset}" + }, + "sm": { + "fontSize": "{fonts.fontSize.200}", + "iconOnlyWidth": "{dimension.size.900}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.200}" + }, + "lg": { + "fontSize": "{fonts.fontSize.500}", + "iconOnlyWidth": "{dimension.size.1300}", + "paddingX": "{dimension.space.700}", + "paddingY": "{dimension.space.400}" + }, + "label": { "fontWeight": "{fonts.fontWeight.demibold}" } + } + }, + "card": { + "extend": { + "borderColor": "{color.border.neutral.default}", + "borderWidth": "{dimension.borderWidth.100}" + }, + "root": { + "background": "{color.bg.surface.default.default}", + "borderRadius": "{dimension.borderRadius.400}", + "color": "{color.fg.default}", + "shadow": "{effects.elevation.none}" + }, + "body": { + "padding": "{dimension.space.400}", + "gap": "{dimension.space.400}" + }, + "caption": { "gap": "{dimension.space.100}" }, + "title": { + "fontSize": "{fonts.fontSize.400}", + "fontWeight": "{fonts.fontWeight.demibold}" + }, + "subtitle": { "color": "{color.fg.muted}" } + }, + "carousel": { + "colorScheme": { + "light": { + "indicator": { + "background": "{color.bg.neutral.weak.active}", + "hoverBackground": "{color.bg.neutral.medium.active}", + "activeBackground": "{color.bg.neutral.strong.default}" + } + }, + "dark": { + "indicator": { + "activeBackground": "{color.bg.surface.canvas.default}", + "background": "{color.bg.neutral.strong.active}", + "hoverBackground": "{color.bg.neutral.medium.active}" + } + } + }, + "root": { "transitionDuration": "{effects.transition.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.borderRadius.max}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + } + } + }, + "checkbox": { + "root": { + "borderRadius": "{dimension.borderRadius.200}", + "extend": { "borderWidth": "{dimension.borderWidth.100}" }, + "width": "{dimension.size.700}", + "height": "{dimension.size.700}", + "background": "{color.bg.surface.default.default}", + "checkedBackground": "{color.bg.neutral.strong.default}", + "checkedHoverBackground": "{color.bg.neutral.strong.hover}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "filledBackground": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.strong}", + "hoverBorderColor": "{color.border.neutral.bold.default}", + "focusBorderColor": "{color.border.neutral.bold.default}", + "checkedBorderColor": "{color.border.neutral.bold.default}", + "checkedHoverBorderColor": "{color.border.neutral.bold.hover}", + "checkedFocusBorderColor": "{color.border.brand.default}", + "checkedDisabledBorderColor": "{color.border.neutral.strong}", + "invalidBorderColor": "{color.border.status.danger.subtle}", + "shadow": "{effects.elevation.none}", + "focusRing": { + "focusRing": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}", + "width": "{dimension.focusRing.width}" + }, + "sm": { + "width": "{dimension.size.200}", + "height": "{dimension.size.200}" + }, + "lg": { + "width": "{dimension.size.600}", + "height": "{dimension.size.600}" + }, + "transitionDuration": "{effects.transition.duration.200}" + }, + "icon": { + "size": "{dimension.size.450}", + "color": "{color.fg.active}", + "checkedColor": "{color.fg.on.fill.default}", + "checkedHoverColor": "{color.fg.on.fill.hover}", + "disabledColor": "{color.fg.muted}", + "sm": { "size": "{dimension.size.350}" }, + "lg": { "size": "{dimension.size.600}" } + } + }, + "chip": { + "extend": { + "borderColor": "transparent", + "borderWidth": "{dimension.borderWidth.100}" + }, + "root": { + "borderRadius": "{dimension.borderRadius.200}", + "paddingX": "{dimension.space.200}", + "paddingY": "{dimension.space.100}", + "gap": "{dimension.space.200}", + "transitionDuration": "{effects.transition.duration.200}" + }, + "colorScheme": { + "light": { + "root": { + "background": "{color.bg.surface.canvas.hover}", + "color": "{color.fg.default}" + }, + "icon": { "color": "{color.fg.default}" }, + "removeIcon": { "color": "{color.fg.default}" } + }, + "dark": { + "icon": { "color": "{color.fg.inverse.default}" }, + "removeIcon": { "color": "{color.fg.inverse.default}" }, + "root": { + "background": "{color.bg.neutral.strong.hover}", + "color": "{color.fg.inverse.default}" + } + } + }, + "image": { + "width": "{dimension.size.none}", + "height": "{dimension.size.none}" + }, + "icon": { "size": "{dimension.size.450}" }, + "removeIcon": { + "size": "{dimension.size.450}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + } + } + }, + "confirmdialog": { + "extend": { + "extIcon": { + "success": "{color.fg.status.success.default}", + "info": "{color.fg.status.info.default}", + "help": "{color.fg.status.help.default}", + "warn": "{color.fg.status.warning.default}", + "danger": "{color.fg.status.danger.default}" + } + }, + "icon": { "size": "{dimension.size.700}", "color": "{color.fg.default}" }, + "content": { "gap": "{dimension.space.none}" } + }, + "confirmpopup": { + "root": { + "background": "{color.bg.surface.default.default}", + "color": "{color.fg.default}", + "shadow": "{effects.elevation.400}", + "gutter": "{dimension.space.400}", + "arrowOffset": "{dimension.space.600}", + "borderColor": "{color.border.neutral.default}", + "borderRadius": "{dimension.borderRadius.400}" + }, + "content": { + "padding": "{dimension.space.400}", + "gap": "{dimension.space.400}" + }, + "icon": { "size": "{dimension.size.700}", "color": "{color.fg.default}" }, + "footer": { + "gap": "{dimension.space.200}", + "padding": "{dimension.space.none} {dimension.space.700} {dimension.space.700} {dimension.space.700}" + } + }, + "contextmenu": { + "root": { + "background": "{color.bg.surface.default.default}", + "color": "{color.fg.default}", + "shadow": "{effects.elevation.400}", + "borderColor": "{color.border.neutral.default}", + "borderRadius": "{dimension.borderRadius.400}", + "transitionDuration": "{effects.transition.duration.200}" + }, + "list": { + "padding": "{dimension.space.200} {dimension.space.none}", + "gap": "{dimension.space.100}" + }, + "item": { + "padding": "{dimension.space.200} {dimension.space.400}", + "gap": "{dimension.space.200}", + "activeBackground": "{color.bg.neutral.medium.default}", + "activeColor": "{color.fg.hover}", + "borderRadius": "{dimension.borderRadius.400}", + "color": "{color.fg.default}", + "focusBackground": "{color.bg.neutral.weak.default}", + "focusColor": "{color.fg.hover}", + "icon": { + "activeColor": "{color.fg.hover}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.hover}" + } + }, + "submenu": { "mobileIndent": "{dimension.space.600}" }, + "separator": { "borderColor": "{color.border.neutral.default}" }, + "submenuIcon": { + "activeColor": "{color.fg.hover}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.hover}", + "size": "{dimension.size.400}" + } + }, + "datatable": { + "colorScheme": { + "light": { + "root": { + "color": "{color.fg.default}", + "borderColor": "{color.border.neutral.default}" + }, + "header": { + "background": "{color.bg.surface.default.hover}", + "color": "{color.fg.default}" + }, + "headerCell": { + "background": "{color.bg.surface.raised.selected}", + "hoverBackground": "{color.bg.neutral.weak.default}", + "color": "{color.fg.default}" + }, + "footer": { + "background": "{color.bg.surface.canvas.default}", + "color": "{color.fg.default}" + }, + "footerCell": { + "background": "{color.bg.neutral.weak.default}", + "color": "{color.fg.default}" + }, + "row": { "stripedBackground": "{color.bg.neutral.weak.default}" }, + "bodyCell": { + "selectedBorderColor": "{color.border.neutral.default}" + } + }, + "dark": { + "bodyCell": { + "selectedBorderColor": "{color.border.neutral.bold.hover}" + }, + "footer": { + "background": "{color.bg.neutral.strong.default}", + "color": "{color.fg.inverse.default}" + }, + "footerCell": { + "background": "{color.bg.neutral.strong.default}", + "color": "{color.fg.inverse.default}" + }, + "header": { + "background": "{color.bg.surface.default.hover}", + "color": "{color.fg.inverse.default}" + }, + "headerCell": { + "background": "{color.bg.surface.raised.selected}", + "color": "{color.fg.inverse.default}", + "hoverBackground": "{color.bg.neutral.strong.selected}" + }, + "root": { + "borderColor": "{color.border.neutral.bold.hover}", + "color": "{color.fg.inverse.default}" + }, + "row": { "stripedBackground": "{color.bg.neutral.strong.default}" } + } + }, + "extended": { + "extHeaderCell": { + "selectedHoverBackground": "{color.bg.neutral.strong.hover}" + }, + "extRow": { + "selectedHoverBackground": "{color.bg.neutral.strong.hover}", + "stripedHoverBackground": "{color.bg.neutral.weak.default}", + "iconSize": "{dimension.size.600}" + } + }, + "root": { "transitionDuration": "{effects.transition.duration.200}" }, + "header": { + "borderColor": "{color.border.neutral.default}", + "borderWidth": "{dimension.borderWidth.100} {dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.none}", + "padding": "{dimension.space.400}", + "sm": { "padding": "{dimension.space.200}" }, + "lg": { "padding": "{dimension.space.600}" } + }, + "headerCell": { + "selectedBackground": "{color.bg.neutral.strong.selected}", + "borderColor": "{color.border.neutral.default}", + "hoverColor": "{color.fg.hover}", + "selectedColor": "{color.fg.on.fill.default}", + "gap": "{dimension.space.200}", + "padding": "{dimension.space.400}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.focusRing.shadow}" + }, + "sm": { "padding": "{dimension.space.200}" }, + "lg": { "padding": "{dimension.space.600}" } + }, + "columnTitle": { "fontWeight": "{fonts.fontWeight.bold}" }, + "row": { + "background": "{color.bg.surface.raised.default}", + "hoverBackground": "{color.bg.neutral.weak.default}", + "selectedBackground": "{color.bg.neutral.strong.selected}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "selectedColor": "{color.fg.on.fill.default}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.focusRing.shadow}" + } + }, + "bodyCell": { + "borderColor": "{color.border.neutral.default}", + "padding": "{dimension.space.400}", + "sm": { "padding": "{dimension.space.200}" }, + "lg": { "padding": "{dimension.space.600}" } + }, + "footerCell": { + "borderColor": "{color.border.neutral.default}", + "padding": "{dimension.space.400}", + "sm": { "padding": "{dimension.space.200}" }, + "lg": { "padding": "{dimension.space.600}" } + }, + "columnFooter": { "fontWeight": "{fonts.fontWeight.bold}" }, + "dropPoint": { "color": "{color.fg.default}" }, + "footer": { + "borderColor": "{color.border.neutral.default}", + "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.none}", + "padding": "{dimension.space.400}", + "sm": { "padding": "{dimension.space.200}" }, + "lg": { "padding": "{dimension.space.600}" } + }, + "columnResizer": { "width": "{dimension.size.200}" }, + "resizeIndicator": { + "width": "{dimension.borderWidth.100}", + "color": "{color.fg.default}" + }, + "sortIcon": { + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "size": "{dimension.size.450}" + }, + "loadingIcon": { "size": "{dimension.size.900}" }, + "rowToggleButton": { + "hoverBackground": "{color.bg.neutral.weak.default}", + "selectedHoverBackground": "{color.bg.neutral.weak.default}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.default}", + "selectedHoverColor": "{color.fg.default}", + "size": "{dimension.size.900}", + "borderRadius": "{dimension.borderRadius.400}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + } + }, + "filter": { + "inlineGap": "{dimension.space.200}", + "rule": { "borderColor": "{color.border.neutral.default}" }, + "constraintList": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + }, + "constraint": { + "focusBackground": "{color.bg.neutral.weak.default}", + "selectedBackground": "{color.bg.neutral.strong.selected}", + "selectedFocusBackground": "{color.bg.neutral.strong.active}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "selectedColor": "{color.fg.on.fill.default}", + "selectedFocusColor": "{color.fg.on.fill.active}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.200}", + "separator": { "borderColor": "{color.border.neutral.default}" } + }, + "overlaySelect": { + "background": "{color.bg.surface.raised.default}", + "color": "{color.fg.default}", + "borderColor": "{color.border.neutral.default}", + "borderRadius": "{dimension.borderRadius.400}", + "shadow": "{effects.elevation.400}" + }, + "overlayPopover": { + "background": "{color.bg.surface.raised.default}", + "color": "{color.fg.default}", + "borderColor": "{color.border.neutral.default}", + "borderRadius": "{dimension.borderRadius.400}", + "shadow": "{effects.elevation.400}", + "padding": "{dimension.space.400}", + "gap": "{dimension.space.100}" + } + }, + "paginatorTop": { + "borderColor": "{color.border.neutral.strong}", + "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.none}" + }, + "paginatorBottom": { + "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.none}", + "borderColor": "{color.border.neutral.default}" + } + }, + "dataview": { + "root": { + "borderWidth": "{dimension.borderWidth.100}", + "borderRadius": "{dimension.borderRadius.100}", + "padding": "{dimension.space.none}", + "borderColor": "{color.border.neutral.default}" + }, + "header": { + "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.none}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.none} {dimension.borderRadius.none} {dimension.borderRadius.none} {dimension.borderRadius.none}", + "color": "{color.fg.default}", + "borderColor": "{color.border.neutral.default}" + }, + "content": { + "background": "{color.bg.surface.default.default}", + "color": "{color.fg.default}", + "borderColor": "{color.border.neutral.default}", + "borderWidth": "{dimension.borderWidth.none}", + "padding": "{dimension.space.none}", + "borderRadius": "{dimension.borderRadius.none}" + }, + "footer": { + "background": "{color.bg.surface.canvas.default}", + "color": "{color.fg.default}", + "borderWidth": "{dimension.borderWidth.100} {dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.none}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.none} {dimension.borderRadius.none} {dimension.borderRadius.none} {dimension.borderRadius.none}", + "borderColor": "{color.border.neutral.default}" + }, + "paginatorTop": { + "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.none}", + "borderColor": "{color.border.neutral.default}" + }, + "paginatorBottom": { + "borderWidth": "{dimension.borderWidth.100} {dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.none}", + "borderColor": "{color.border.neutral.default}" + }, + "colorScheme": { + "dark": { + "header": { + "background": "{color.bg.surface.default.default}", + "color": "{color.fg.inverse.default}" + } + }, + "light": { + "header": { + "background": "{color.bg.surface.default.default}", + "color": "{color.fg.default}" + } + } + } + }, + "datepicker": { + "extend": { + "extDate": { + "selectedHoverBackground": "{color.bg.neutral.strong.hover}" + }, + "extToday": { + "hoverBackground": "{color.bg.neutral.weak.default}", + "borderColor": "{color.border.neutral.bold.hover}" + }, + "extTitle": { "width": "{dimension.size.1900}" }, + "extTimePicker": { + "minWidth": "{dimension.size.1800}", + "color": "{color.fg.default}" + } + }, + "colorScheme": { + "light": { + "dropdown": { + "background": "{color.bg.surface.default.default}", + "hoverBackground": "{color.bg.surface.canvas.default}", + "activeBackground": "{color.bg.neutral.strong.default}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.default}", + "activeColor": "{color.fg.inverse.active}" + }, + "today": { + "background": "transparent", + "color": "{color.fg.default}" + } + }, + "dark": { + "dropdown": { + "activeBackground": "{color.bg.surface.canvas.default}", + "activeColor": "{color.fg.on.fill.active}", + "background": "{color.bg.surface.default.default}", + "color": "{color.fg.inverse.default}", + "hoverBackground": "{color.bg.neutral.strong.selected}", + "hoverColor": "{color.fg.on.brand.hover}" + }, + "today": { + "background": "transparent", + "color": "{color.fg.inverse.default}" + } + } + }, + "panel": { + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "color": "{color.fg.default}", + "borderRadius": "{dimension.borderRadius.400}", + "shadow": "{effects.elevation.400}", + "padding": "{dimension.space.none}" + }, + "header": { + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "color": "{color.fg.default}", + "padding": "{dimension.space.400}" + }, + "title": { + "gap": "{dimension.space.200}", + "fontWeight": "{fonts.fontWeight.bold}" + }, + "selectMonth": { + "hoverBackground": "{color.bg.neutral.weak.default}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "borderRadius": "{dimension.borderRadius.400}", + "padding": "{dimension.space.200}" + }, + "inputIcon": { "color": "{color.fg.muted}" }, + "dropdown": { + "width": "{dimension.size.1700}", + "borderColor": "{color.border.neutral.strong}", + "hoverBorderColor": "{color.border.neutral.strong}", + "activeBorderColor": "{color.border.neutral.strong}", + "borderRadius": "{dimension.borderRadius.400}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + }, + "sm": { "width": "{dimension.size.none}" }, + "lg": { "width": "{dimension.size.none}" } + }, + "group": { + "borderColor": "{color.border.neutral.default}", + "gap": "{dimension.space.400}" + }, + "selectYear": { + "hoverBackground": "{color.bg.neutral.weak.default}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "borderRadius": "{dimension.borderRadius.400}", + "padding": "{dimension.space.100}" + }, + "dayView": { "margin": "{dimension.space.400}" }, + "weekDay": { + "padding": "{dimension.space.100}", + "fontWeight": "{fonts.fontWeight.bold}", + "color": "{color.fg.default}" + }, + "date": { + "hoverBackground": "{color.bg.neutral.weak.default}", + "selectedBackground": "{color.bg.neutral.strong.selected}", + "rangeSelectedBackground": "{color.bg.neutral.weak.default}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.default}", + "selectedColor": "{color.fg.on.fill.default}", + "rangeSelectedColor": "{color.fg.default}", + "width": "{dimension.size.900}", + "height": "{dimension.size.900}", + "borderRadius": "{dimension.borderRadius.200}", + "padding": "{dimension.space.100}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + } + }, + "monthView": { + "margin": "{dimension.space.none} {dimension.space.none} {dimension.space.none} {dimension.space.none}" + }, + "month": { + "padding": "{dimension.space.none}", + "borderRadius": "{dimension.borderRadius.none}" + }, + "yearView": { + "margin": "{dimension.space.none} {dimension.space.none} {dimension.space.none} {dimension.space.none}" + }, + "year": { + "padding": "{dimension.space.none}", + "borderRadius": "{dimension.borderRadius.none}" + }, + "buttonbar": { + "padding": "{dimension.space.400}", + "borderColor": "{color.border.neutral.default}" + }, + "timePicker": { + "padding": "{dimension.space.400}", + "borderColor": "{color.border.neutral.default}", + "gap": "{dimension.space.200}", + "buttonGap": "{dimension.space.100}" + }, + "root": { "transitionDuration": "{effects.transition.duration.200}" } + }, + "dialog": { + "extend": { + "borderWidth": "{dimension.borderWidth.100}", + "backdrop": "{color.bg.surface.backdrop}" + }, + "root": { + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "color": "{color.fg.default}", + "borderRadius": "{dimension.borderRadius.max}", + "shadow": "{effects.elevation.400}" + }, + "header": { + "padding": "{dimension.space.700} {dimension.space.700} {dimension.space.400} {dimension.space.700}", + "gap": "{dimension.space.200}" + }, + "title": { + "fontSize": "{fonts.fontSize.500}", + "fontWeight": "{fonts.fontWeight.demibold}" + }, + "content": { "padding": "{dimension.space.700}" }, + "footer": { + "padding": "{dimension.space.none} {dimension.space.700} {dimension.space.700} {dimension.space.700}", + "gap": "{dimension.space.200}" + } + }, + "divider": { + "extend": { + "content": { "gap": "{dimension.space.200}" }, + "iconSize": "{dimension.size.450}" + }, + "horizontal": { + "margin": "{dimension.space.400} {dimension.space.none}", + "padding": "{dimension.space.none} {dimension.space.400}", + "content": { "padding": "{dimension.space.none} {dimension.space.200}" } + }, + "vertical": { + "margin": "{dimension.space.none} {dimension.space.400}", + "padding": "{dimension.space.400} {dimension.space.none}", + "content": { "padding": "{dimension.space.200} {dimension.space.none}" } + }, + "content": { + "background": "{color.bg.surface.default.default}", + "color": "{color.fg.default}" + }, + "root": { "borderColor": "{color.border.neutral.default}" } + }, + "drawer": { + "extend": { + "borderRadius": "{dimension.borderRadius.200}", + "borderWidth": "{dimension.borderWidth.100}", + "width": "{dimension.size.2000}", + "extHeader": { + "gap": "{dimension.space.200}", + "borderColor": "{color.border.neutral.default}" + }, + "margin": "{dimension.space.200}", + "scale": "{dimension.size.50}", + "backdrop": "{color.bg.surface.backdrop}" + }, + "root": { + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "color": "{color.fg.default}", + "shadow": "{effects.elevation.200}" + }, + "header": { + "padding": "{dimension.space.700} {dimension.space.700} {dimension.space.400} {dimension.space.700}" + }, + "title": { + "fontSize": "{fonts.fontSize.500}", + "fontWeight": "{fonts.fontWeight.demibold}" + }, + "content": { "padding": "{dimension.space.700}" }, + "footer": { + "padding": "{dimension.space.none} {dimension.space.700} {dimension.space.700} {dimension.space.700}" + } + }, + "fileupload": { + "extend": { + "extDragNdrop": { + "background": "{color.bg.surface.raised.default}", + "borderRadius": "{dimension.borderRadius.400}", + "iconSize": "{dimension.size.900}", + "padding": "{dimension.space.400}", + "info": { "gap": "{dimension.space.100}" } + }, + "extFile": { "iconSize": "{dimension.size.600}" }, + "extContent": { + "borderRadius": "{dimension.borderRadius.400}", + "highlightBorderDefault": "{color.border.neutral.strong}" + } + }, + "colorScheme": { + "light": { + "header": { + "background": "{color.bg.surface.default.default}", + "color": "{color.fg.default}" + } + }, + "dark": { + "header": { + "background": "{color.bg.surface.default.default}", + "color": "{color.fg.inverse.default}" + } + } + }, + "root": { + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "color": "{color.fg.default}", + "borderRadius": "{dimension.borderRadius.400}", + "transitionDuration": "{effects.transition.duration.200}" + }, + "header": { + "borderColor": "{color.border.neutral.default}", + "borderWidth": "{dimension.borderWidth.none}", + "padding": "{dimension.space.none}", + "borderRadius": "{dimension.borderRadius.none}", + "gap": "{dimension.space.200}" + }, + "content": { + "highlightBorderColor": "{color.border.neutral.bold.default}", + "padding": "{dimension.space.none}", + "gap": "{dimension.space.200}" + }, + "file": { + "padding": "{dimension.space.200}", + "gap": "{dimension.space.200}", + "borderColor": "{color.border.neutral.strong}", + "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.1400}", + "iconSize": "{dimension.size.600}" + }, + "root": { + "color": "{color.fg.muted}", + "focusColor": "{color.fg.muted}", + "activeColor": "{color.fg.muted}", + "invalidColor": "{color.fg.status.danger.hover}", + "transitionDuration": "{effects.transition.duration.200}", + "positionX": "{dimension.space.400}", + "positionY": "{dimension.space.400}", + "fontWeight": "{fonts.fontWeight.regular}", + "active": { + "fontSize": "{fonts.fontSize.100}", + "fontWeight": "{fonts.fontWeight.regular}" + } + }, + "over": { "active": { "top": "{dimension.space.400}" } }, + "inside": { + "input": { + "paddingTop": "{dimension.space.800}", + "paddingBottom": "{dimension.space.400}" + }, + "active": { "top": "{dimension.space.400}" } + }, + "on": { + "borderRadius": "{dimension.borderRadius.none}", + "active": { + "padding": "{dimension.space.none} {dimension.space.100}", + "background": "{color.bg.surface.raised.default}" + } + } + }, + "galleria": { + "extend": { "backdrop": "{color.bg.surface.backdrop}" }, + "colorScheme": { + "light": { + "thumbnailContent": { + "background": "{color.bg.neutral.weak.default}" + }, + "thumbnailNavButton": { + "hoverBackground": "{color.bg.neutral.medium.default}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}" + }, + "indicatorButton": { + "background": "{color.bg.neutral.weak.active}", + "hoverBackground": "{color.bg.neutral.medium.active}" + }, + "thumbnailsContent": { + "background": "{color.bg.neutral.medium.default}" + } + }, + "dark": { + "indicatorButton": { + "background": "{color.bg.neutral.strong.active}", + "hoverBackground": "{color.bg.neutral.medium.active}" + }, + "thumbnailNavButton": { + "color": "{color.fg.inverse.default}", + "hoverBackground": "{color.bg.neutral.medium.default}", + "hoverColor": "{color.fg.inverse.hover}" + }, + "thumbnailsContent": { + "background": "{color.bg.neutral.medium.default}" + }, + "thumbnailContent": { + "background": "{color.bg.neutral.strong.default}" + } + } + }, + "root": { + "borderWidth": "{dimension.borderWidth.100}", + "borderColor": "{color.border.neutral.default}", + "borderRadius": "{dimension.borderRadius.400}", + "transitionDuration": "{effects.transition.duration.200}" + }, + "navButton": { + "background": "transparent", + "hoverBackground": "{color.bg.neutral.medium.default}", + "color": "{color.fg.inverse.default}", + "hoverColor": "{color.fg.inverse.hover}", + "size": "{dimension.size.1400}", + "gutter": "{dimension.space.200}", + "prev": { "borderRadius": "{dimension.borderRadius.200}" }, + "next": { "borderRadius": "{dimension.borderRadius.200}" }, + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + } + }, + "navIcon": { "size": "{dimension.size.900}" }, + "thumbnailsContent": { "padding": "{dimension.space.100}" }, + "thumbnailNavButton": { + "size": "{dimension.size.900}", + "borderRadius": "{dimension.borderRadius.400}", + "gutter": "{dimension.space.200}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + } + }, + "thumbnailNavButtonIcon": { "size": "{dimension.size.450}" }, + "caption": { + "background": "{color.bg.neutral.medium.default}", + "color": "{color.fg.default}", + "padding": "{dimension.space.200}" + }, + "indicatorList": { + "gap": "{dimension.space.200}", + "padding": "{dimension.space.400}" + }, + "indicatorButton": { + "width": "{dimension.size.200}", + "height": "{dimension.size.200}", + "activeBackground": "{color.bg.neutral.strong.default}", + "borderRadius": "{dimension.borderRadius.400}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + } + }, + "insetIndicatorList": { "background": "{color.bg.surface.backdrop}" }, + "insetIndicatorButton": { + "background": "{color.bg.neutral.medium.default}", + "hoverBackground": "{color.bg.neutral.medium.default}", + "activeBackground": "{color.bg.neutral.medium.default}" + }, + "closeButton": { + "size": "{dimension.size.1400}", + "gutter": "{dimension.space.200}", + "background": "{color.bg.neutral.medium.default}", + "hoverBackground": "{color.bg.neutral.medium.default}", + "color": "{color.fg.inverse.default}", + "hoverColor": "{color.fg.inverse.hover}", + "borderRadius": "{dimension.borderRadius.400}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + } + }, + "closeButtonIcon": { "size": "{dimension.size.900}" } + }, + "inputgroup": { + "extend": { + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": "{dimension.size.450}" + }, + "colorScheme": { + "light": { + "addon": { + "background": "{color.bg.surface.raised.default}", + "borderColor": "{color.border.neutral.strong}", + "color": "{color.fg.muted}" + } + }, + "dark": { + "addon": { + "background": "{color.bg.surface.raised.default}", + "borderColor": "{color.border.neutral.strong}", + "color": "{color.fg.inverse.muted}" + } + } + }, + "addon": { + "borderRadius": "{dimension.borderRadius.400}", + "padding": "{dimension.space.400}", + "minWidth": "{dimension.size.1700}" + } + }, + "inputnumber": { + "extend": { + "borderWidth": "{dimension.borderWidth.100}", + "extButton": { + "height": "{dimension.size.1100}", + "iconSize": "{dimension.size.450}" + } + }, + "colorScheme": { + "light": { + "button": { + "background": "{color.bg.surface.raised.default}", + "hoverBackground": "{color.bg.neutral.weak.default}", + "activeBackground": "transparent", + "borderColor": "{color.border.neutral.strong}", + "hoverBorderColor": "{color.border.neutral.strong}", + "activeBorderColor": "{color.border.neutral.strong}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "activeColor": "{color.fg.default}" + } + }, + "dark": { + "button": { + "activeBackground": "transparent", + "activeBorderColor": "{color.border.neutral.strong}", + "activeColor": "{color.fg.on.brand.active}", + "background": "{color.bg.surface.raised.default}", + "borderColor": "{color.border.neutral.strong}", + "color": "{color.fg.inverse.default}", + "hoverBackground": "{color.bg.neutral.strong.selected}", + "hoverBorderColor": "{color.border.neutral.strong}", + "hoverColor": "{color.fg.inverse.hover}" + } + } + }, + "transitionDuration": { + "transitionDuration": "{effects.transition.duration.200}" + }, + "button": { + "width": "{dimension.size.1700}", + "borderRadius": "{dimension.borderRadius.400}", + "verticalPadding": "{dimension.space.400}" + }, + "root": { "transitionDuration": "{effects.transition.duration.200}" } + }, + "inputotp": { + "extend": { + "height": "{dimension.size.1100}", + "borderWidth": "{dimension.borderWidth.100}" + }, + "root": { "gap": "{dimension.space.200}" }, + "input": { + "width": "{dimension.size.1800}", + "lg": { "width": "{dimension.size.1900}" }, + "sm": { "width": "{dimension.size.1700}" } + }, + "sm": { "width": "{dimension.size.none}" }, + "lg": { "width": "{dimension.size.none}" } + }, + "inputtext": { + "extend": { + "readonlyBackground": "{color.bg.neutral.weak.default}", + "iconSize": "{dimension.size.450}", + "borderWidth": "{dimension.borderWidth.100}", + "extXlg": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}" + } + }, + "root": { + "background": "{color.bg.surface.default.default}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "filledBackground": "{color.bg.surface.default.default}", + "filledHoverBackground": "{color.bg.surface.default.default}", + "filledFocusBackground": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.strong}", + "hoverBorderColor": "{color.border.brand.strong}", + "focusBorderColor": "{color.border.brand.strong}", + "invalidBorderColor": "{color.border.status.danger.subtle}", + "color": "{color.fg.default}", + "disabledColor": "{color.fg.muted}", + "placeholderColor": "{color.fg.muted}", + "invalidPlaceholderColor": "{color.fg.status.danger.hover}", + "shadow": "{effects.elevation.none}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}", + "borderRadius": "{dimension.borderRadius.400}", + "transitionDuration": "{effects.transition.duration.200}", + "sm": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}" + }, + "lg": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}" + }, + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}" + } + } + }, + "listbox": { + "extend": { + "extOption": { + "label": { "gap": "{dimension.space.100}" }, + "caption": { + "color": "{color.fg.muted}", + "stripedColor": "{color.fg.muted}" + }, + "gap": "{dimension.space.200}" + } + }, + "colorScheme": { + "light": { + "option": { + "stripedBackground": "{color.bg.surface.raised.selected}" + } + }, + "dark": { + "option": { + "stripedBackground": "{color.bg.surface.raised.selected}" + } + } + }, + "root": { + "background": "{color.bg.surface.default.default}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "borderColor": "{color.border.neutral.strong}", + "invalidBorderColor": "{color.border.status.danger.subtle}", + "color": "{color.fg.active}", + "disabledColor": "{color.fg.muted}", + "shadow": "{effects.elevation.none}", + "borderRadius": "{dimension.borderRadius.400}", + "transitionDuration": "{effects.transition.duration.200}" + }, + "list": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}", + "header": { + "padding": "{dimension.space.400} {dimension.space.400} {dimension.space.none} {dimension.space.400}" + } + }, + "option": { + "focusBackground": "{color.bg.neutral.weak.default}", + "selectedBackground": "{color.bg.neutral.strong.selected}", + "selectedFocusBackground": "{color.bg.neutral.strong.active}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "selectedColor": "{color.fg.on.fill.default}", + "selectedFocusColor": "{color.fg.on.fill.active}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.200}" + }, + "optionGroup": { + "background": "{color.bg.surface.raised.default}", + "color": "{color.fg.muted}", + "fontWeight": "{fonts.fontWeight.demibold}", + "padding": "{dimension.space.200} {dimension.space.400}" + }, + "checkmark": { + "color": "{color.fg.default}", + "gutterStart": "{dimension.space.negative.200}", + "gutterEnd": "{dimension.space.200}" + }, + "emptyMessage": { + "padding": "{dimension.space.200} {dimension.space.400}" + } + }, + "megamenu": { + "extend": { + "extItem": { + "caption": { + "color": "{color.fg.muted}", + "gap": "{dimension.space.100}" + } + }, + "iconSize": "{dimension.size.600}" + }, + "colorScheme": { + "light": { "root": { "background": "transparent" } }, + "dark": { "root": { "background": "transparent" } } + }, + "root": { + "borderColor": "transparent", + "borderRadius": "{dimension.borderRadius.400}", + "color": "{color.fg.default}", + "gap": "{dimension.space.100}", + "transitionDuration": "{effects.transition.duration.200}", + "verticalOrientation": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + }, + "horizontalOrientation": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + } + }, + "baseItem": { + "borderRadius": "{dimension.borderRadius.400}", + "padding": "{dimension.space.200} {dimension.space.400}" + }, + "item": { + "focusBackground": "{color.bg.neutral.weak.default}", + "activeBackground": "{color.bg.neutral.strong.default}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "activeColor": "{color.fg.inverse.active}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.200}", + "gap": "{dimension.space.200}", + "icon": { + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "activeColor": "{color.fg.inverse.active}" + } + }, + "overlay": { + "padding": "{dimension.space.100}", + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "borderRadius": "{dimension.borderRadius.400}", + "color": "{color.fg.default}", + "shadow": "{effects.elevation.400}", + "gap": "{dimension.space.none}" + }, + "submenu": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + }, + "submenuLabel": { + "padding": "{dimension.space.200} {dimension.space.400}", + "background": "transparent", + "color": "{color.fg.muted}", + "fontWeight": "{fonts.fontWeight.demibold}" + }, + "submenuIcon": { + "size": "{dimension.size.600}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "activeColor": "{color.fg.inverse.active}" + }, + "separator": { "borderColor": "{color.border.neutral.default}" }, + "mobileButton": { + "borderRadius": "{dimension.borderRadius.200}", + "size": "{dimension.size.900}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "hoverBackground": "{color.bg.neutral.weak.default}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + } + } + }, + "menu": { + "extend": { + "paddingX": "{dimension.space.100}", + "iconSize": "{dimension.size.600}", + "paddingY": "{dimension.space.100}", + "extItem": { + "caption": { + "gap": "{dimension.space.100}", + "color": "{color.fg.muted}" + }, + "activeBackground": "{color.bg.neutral.strong.default}", + "activeColor": "{color.fg.inverse.active}", + "icon": { "activeColor": "{color.fg.inverse.active}" } + } + }, + "root": { + "borderRadius": "{dimension.borderRadius.400}", + "shadow": "{effects.elevation.400}", + "transitionDuration": "{effects.transition.duration.200}", + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "color": "{color.fg.default}" + }, + "list": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + }, + "submenuLabel": { + "padding": "{dimension.space.200} {dimension.space.400}", + "fontWeight": "{fonts.fontWeight.demibold}", + "background": "transparent", + "color": "{color.fg.muted}" + }, + "separator": { "borderColor": "{color.border.neutral.default}" }, + "item": { + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.200}", + "gap": "{dimension.space.200}", + "color": "{color.fg.default}", + "focusBackground": "{color.bg.surface.canvas.default}", + "focusColor": "{color.fg.hover}", + "icon": { + "color": "{color.fg.default}", + "focusColor": "{color.fg.hover}" + } + } + }, + "menubar": { + "extend": { + "iconSize": "{dimension.size.600}", + "extItem": { + "caption": { + "color": "{color.fg.muted}", + "gap": "{dimension.space.100}" + } + }, + "extSubmenuLabel": { + "padding": "{dimension.space.200} {dimension.space.400}", + "fontWeight": "{fonts.fontWeight.demibold}", + "background": "transparent", + "color": "{color.fg.muted}" + } + }, + "colorScheme": { + "light": { "root": { "background": "transparent" } }, + "dark": { "root": { "background": "transparent" } } + }, + "root": { + "borderColor": "transparent", + "borderRadius": "{dimension.borderRadius.200}", + "color": "{color.fg.default}", + "gap": "{dimension.space.100}", + "padding": "{dimension.space.100}", + "transitionDuration": "{effects.transition.duration.200}" + }, + "baseItem": { + "borderRadius": "{dimension.borderRadius.200}", + "padding": "{dimension.space.200} {dimension.space.400}" + }, + "item": { + "focusBackground": "{color.bg.neutral.weak.default}", + "activeBackground": "{color.bg.neutral.strong.default}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "activeColor": "{color.fg.inverse.active}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.200}", + "gap": "{dimension.space.200}", + "icon": { + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "activeColor": "{color.fg.inverse.active}" + } + }, + "submenu": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}", + "background": "{color.bg.surface.raised.default}", + "borderColor": "{color.border.neutral.default}", + "borderRadius": "{dimension.borderRadius.400}", + "shadow": "{effects.elevation.400}", + "mobileIndent": "{dimension.space.400}", + "icon": { + "size": "{dimension.size.600}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "activeColor": "{color.fg.inverse.active}" + } + }, + "separator": { "borderColor": "{color.border.neutral.default}" }, + "mobileButton": { + "borderRadius": "{dimension.borderRadius.200}", + "size": "{dimension.size.900}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "hoverBackground": "{color.bg.neutral.weak.default}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + } + } + }, + "message": { + "extend": { + "width": "{dimension.size.2000}", + "extText": { "gap": "{dimension.space.100}" }, + "extInfo": { + "color": "{color.fg.status.info.default}", + "closeButton": { + "color": "{color.fg.status.info.default}", + "borderColor": "{color.border.status.info.default}" + }, + "caption": { "color": "{color.fg.default}" } + }, + "extAccentLine": { "width": "{dimension.size.100}" }, + "extCloseButton": { "width": "{dimension.borderWidth.100}" }, + "extSuccess": { + "color": "{color.fg.status.success.default}", + "closeButton": { + "color": "{color.fg.status.success.default}", + "borderColor": "{color.border.brand.default}" + }, + "caption": { "color": "{color.fg.default}" } + }, + "extWarn": { + "color": "{color.fg.status.warning.default}", + "closeButton": { + "color": "{color.fg.status.warning.default}", + "borderColor": "{color.border.status.warning.default}" + }, + "caption": { "color": "{color.fg.default}" } + }, + "extError": { + "color": "{color.fg.status.danger.default}", + "closeButton": { + "color": "{color.fg.status.danger.default}", + "borderColor": "{color.border.status.danger.default}" + }, + "caption": { "color": "{color.fg.default}" } + } + }, + "colorScheme": { + "light": { + "success": { + "background": "{color.bg.status.success.weak.default}", + "borderColor": "{color.border.brand.default}", + "color": "{color.fg.default}", + "shadow": "none", + "outlined": { + "color": "{color.fg.default}", + "borderColor": "{color.border.brand.default}" + }, + "closeButton": { + "hoverBackground": "{color.bg.status.success.weak.active}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } + }, + "simple": { "color": "{color.fg.default}" } + }, + "outlined": { + "root": { "borderWidth": "{dimension.borderWidth.none}" }, + "closeButton": { + "hoverBackground": "transparent", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } + }, + "outlined": { + "color": "transparent", + "borderColor": "transparent" + }, + "simple": { "color": "transparent" } + }, + "simple": { "content": { "padding": "{dimension.space.none}" } }, + "warn": { + "background": "{color.bg.status.warning.weak.default}", + "borderColor": "{color.border.status.warning.default}", + "color": "{color.fg.default}", + "shadow": "none", + "outlined": { + "color": "{color.fg.default}", + "borderColor": "{color.border.status.warning.default}" + }, + "closeButton": { + "hoverBackground": "{color.bg.status.warning.weak.active}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } + }, + "simple": { "color": "{color.fg.default}" } + }, + "error": { + "background": "{color.bg.status.danger.weak.default}", + "borderColor": "{color.border.status.danger.default}", + "color": "{color.fg.default}", + "shadow": "none", + "outlined": { + "color": "{color.fg.default}", + "borderColor": "{color.border.status.danger.default}" + }, + "closeButton": { + "hoverBackground": "{color.bg.status.danger.weak.active}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } + }, + "simple": { "color": "{color.fg.default}" } + }, + "secondary": { + "borderColor": "transparent", + "shadow": "none", + "closeButton": { + "hoverBackground": "transparent", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } + }, + "simple": { "color": "transparent" }, + "outlined": { + "color": "transparent", + "borderColor": "transparent" + }, + "background": "{color.bg.neutral.weak.default}", + "color": "{color.fg.default}" + }, + "contrast": { + "borderColor": "transparent", + "shadow": "none", + "closeButton": { + "hoverBackground": "transparent", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } + }, + "simple": { "color": "transparent" }, + "outlined": { + "color": "transparent", + "borderColor": "transparent" + }, + "background": "{color.bg.neutral.strong.default}", + "color": "{color.fg.on.fill.default}" + }, + "info": { + "background": "{color.bg.status.info.weak.default}", + "borderColor": "{color.border.status.info.default}", + "color": "{color.fg.default}", + "shadow": "none", + "closeButton": { + "hoverBackground": "{color.bg.status.info.weak.active}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } + }, + "outlined": { + "color": "{color.fg.default}", + "borderColor": "{color.border.status.info.default}" + }, + "simple": { "color": "{color.fg.default}" } + } + }, + "dark": { + "contrast": { + "background": "{color.bg.surface.canvas.default}", + "borderColor": "transparent", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "transparent" + }, + "color": "{color.fg.default}", + "outlined": { + "borderColor": "transparent", + "color": "transparent" + }, + "shadow": "none", + "simple": { "color": "transparent" } + }, + "error": { + "background": "{color.bg.status.danger.weak.default}", + "borderColor": "{color.border.status.danger.default}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "{color.bg.status.danger.weak.active}" + }, + "color": "{color.fg.inverse.default}", + "outlined": { + "borderColor": "{color.border.status.danger.default}", + "color": "{color.fg.inverse.default}" + }, + "shadow": "none", + "simple": { "color": "{color.fg.inverse.default}" } + }, + "info": { + "background": "{color.bg.status.info.weak.default}", + "borderColor": "{color.border.status.info.default}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "{color.bg.status.info.weak.active}" + }, + "color": "{color.fg.inverse.default}", + "outlined": { + "borderColor": "{color.border.status.info.default}", + "color": "{color.fg.inverse.default}" + }, + "shadow": "none", + "simple": { "color": "{color.fg.inverse.default}" } + }, + "secondary": { + "background": "{color.bg.neutral.strong.default}", + "borderColor": "transparent", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "transparent" + }, + "color": "{color.fg.inverse.default}", + "outlined": { + "borderColor": "transparent", + "color": "transparent" + }, + "shadow": "none", + "simple": { "color": "transparent" } + }, + "success": { + "background": "{color.bg.status.success.weak.default}", + "borderColor": "{color.border.brand.default}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "{color.bg.status.success.weak.active}" + }, + "color": "{color.fg.inverse.default}", + "outlined": { + "borderColor": "{color.border.brand.default}", + "color": "{color.fg.inverse.default}" + }, + "shadow": "none", + "simple": { "color": "{color.fg.inverse.default}" } + }, + "warn": { + "background": "{color.bg.status.warning.weak.default}", + "borderColor": "{color.border.status.warning.default}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "{color.bg.status.warning.weak.active}" + }, + "color": "{color.fg.inverse.default}", + "outlined": { + "borderColor": "{color.border.status.warning.default}", + "color": "{color.fg.inverse.default}" + }, + "shadow": "none", + "simple": { "color": "{color.fg.inverse.default}" } + }, + "outlined": { + "root": { "borderWidth": "{dimension.borderWidth.none}" }, + "closeButton": { + "hoverBackground": "transparent", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } + }, + "outlined": { + "color": "transparent", + "borderColor": "transparent" + }, + "simple": { "color": "transparent" } + }, + "simple": { "content": { "padding": "{dimension.space.none}" } } + } + }, + "root": { + "borderRadius": "{dimension.borderRadius.400}", + "borderWidth": "{dimension.borderWidth.100}", + "transitionDuration": "{effects.transition.duration.200}" + }, + "content": { + "padding": "{dimension.space.400}", + "gap": "{dimension.space.400}", + "sm": { "padding": "{dimension.space.400}" }, + "lg": { "padding": "{dimension.space.400}" } + }, + "text": { + "fontSize": "{fonts.fontSize.300}", + "fontWeight": "{fonts.fontWeight.bold}", + "sm": { "fontSize": "{fonts.fontSize.300}" }, + "lg": { "fontSize": "{fonts.fontSize.300}" } + }, + "icon": { + "size": "{dimension.size.1000}", + "sm": { "size": "{dimension.size.1000}" }, + "lg": { "size": "{dimension.size.1000}" } + }, + "closeButton": { + "width": "{dimension.size.900}", + "height": "{dimension.size.900}", + "borderRadius": "{dimension.borderRadius.400}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "offset": "{dimension.focusRing.offset}" + } + }, + "closeIcon": { + "size": "{dimension.size.450}", + "sm": { "size": "{dimension.size.450}" }, + "lg": { "size": "{dimension.size.450}" } + }, + "outlined": { "root": { "borderWidth": "{dimension.borderWidth.100}" } }, + "simple": { "content": { "padding": "{dimension.space.none}" } } + }, + "metergroup": { + "extend": { "extLabel": { "color": "{color.fg.muted}" } }, + "root": { + "borderRadius": "{dimension.borderRadius.400}", + "gap": "{dimension.space.400}" + }, + "meters": { + "size": "{dimension.size.200}", + "background": "{color.bg.neutral.medium.default}" + }, + "label": { "gap": "{dimension.space.100}" }, + "labelMarker": { "size": "{dimension.size.200}" }, + "labelIcon": { "size": "{dimension.size.450}" }, + "labelList": { + "verticalGap": "{dimension.space.200}", + "horizontalGap": "{dimension.space.400}" + } + }, + "multiselect": { + "extend": { + "paddingX": "{dimension.space.150}", + "paddingY": "{dimension.space.150}", + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": "{dimension.size.450}", + "width": "{dimension.size.1700}", + "readonlyBackground": "{color.bg.neutral.weak.default}" + }, + "root": { + "shadow": "{effects.elevation.none}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}", + "borderRadius": "{dimension.borderRadius.400}", + "transitionDuration": "{effects.transition.duration.200}", + "sm": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{dimension.space.200}", + "paddingY": "{dimension.space.200}" + }, + "lg": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}" + }, + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}", + "color": "{color.border.focus}" + }, + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.strong}", + "color": "{color.fg.default}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "disabledColor": "{color.fg.muted}", + "filledBackground": "{color.bg.surface.default.default}", + "filledFocusBackground": "{color.bg.surface.default.default}", + "filledHoverBackground": "{color.bg.surface.default.default}", + "focusBorderColor": "{color.border.brand.strong}", + "hoverBorderColor": "{color.border.brand.strong}", + "invalidBorderColor": "{color.border.status.danger.subtle}", + "invalidPlaceholderColor": "{color.fg.status.danger.hover}", + "placeholderColor": "{color.fg.muted}" + }, + "dropdown": { + "width": "{dimension.size.1700}", + "color": "{color.fg.active}" + }, + "overlay": { + "borderRadius": "{dimension.borderRadius.400}", + "shadow": "{effects.elevation.400}", + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "color": "{color.fg.default}" + }, + "list": { + "padding": "{dimension.space.100}", + "header": { + "padding": "{dimension.space.400} {dimension.space.400} {dimension.space.none} {dimension.space.400}" + }, + "gap": "{dimension.space.100}" + }, + "chip": { "borderRadius": "{dimension.borderRadius.200}" }, + "option": { + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.200}", + "gap": "{dimension.space.200}", + "color": "{color.fg.default}", + "focusBackground": "{color.bg.neutral.weak.default}", + "focusColor": "{color.fg.default}", + "selectedBackground": "{color.bg.neutral.strong.selected}", + "selectedColor": "{color.fg.on.fill.default}", + "selectedFocusBackground": "{color.bg.neutral.strong.active}", + "selectedFocusColor": "{color.fg.on.fill.active}" + }, + "optionGroup": { + "fontWeight": "{fonts.fontWeight.demibold}", + "padding": "{dimension.space.200} {dimension.space.400}", + "background": "{color.bg.surface.raised.default}", + "color": "{color.fg.muted}" + }, + "emptyMessage": { + "padding": "{dimension.space.200} {dimension.space.400}" + }, + "clearIcon": { "color": "{color.fg.active}" } + }, + "paginator": { + "root": { + "padding": "{dimension.space.none} {dimension.space.200}", + "gap": "{dimension.space.200}", + "borderRadius": "{dimension.borderRadius.400}", + "background": "transparent", + "color": "{color.fg.default}", + "transitionDuration": "{effects.transition.duration.200}" + }, + "currentPageReport": { "color": "{color.fg.muted}" }, + "navButton": { + "background": "transparent", + "hoverBackground": "{color.bg.neutral.weak.default}", + "selectedBackground": "{color.bg.neutral.strong.selected}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "selectedColor": "{color.fg.on.fill.default}", + "width": "{dimension.size.1100}", + "height": "{dimension.size.1100}", + "borderRadius": "{dimension.borderRadius.400}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "focus": "{effects.elevation.200}", + "shadow": "{effects.elevation.none}" + } + }, + "jumpToPageInput": { "maxWidth": "{dimension.size.1500}" } + }, + "panelmenu": { + "extend": { + "iconSize": "{dimension.size.600}", + "extPanel": { "gap": "{dimension.space.100}" }, + "extItem": { + "activeBackground": "{color.bg.neutral.strong.default}", + "activeColor": "{color.fg.inverse.active}", + "caption": { + "color": "{color.fg.muted}", + "gap": "{dimension.space.100}" + } + } + }, + "root": { + "gap": "{dimension.space.100}", + "transitionDuration": "{effects.transition.duration.200}" + }, + "panel": { + "background": "transparent", + "borderColor": "transparent", + "borderWidth": "{dimension.borderWidth.100}", + "color": "{color.fg.default}", + "padding": "{dimension.space.100}", + "borderRadius": "{dimension.borderRadius.400}", + "first": { + "borderWidth": "{dimension.borderWidth.100} {dimension.borderWidth.100} {dimension.borderWidth.none} {dimension.borderWidth.100}", + "topBorderRadius": "{dimension.borderRadius.400}" + }, + "last": { + "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.100} {dimension.borderWidth.100}", + "topBorderRadius": "{dimension.borderRadius.400}", + "bottomBorderRadius": "{dimension.borderRadius.400}" + } + }, + "item": { + "focusBackground": "{color.bg.neutral.weak.default}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "gap": "{dimension.space.200}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.200}", + "icon": { + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}" + } + }, + "submenu": { "indent": "{dimension.space.700}" }, + "separator": { "borderColor": "{color.border.neutral.default}" }, + "submenuIcon": { + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}" + } + }, + "password": { + "extend": { "borderWidth": "{dimension.borderWidth.100}" }, + "colorScheme": { + "light": { + "strength": { + "weakBackground": "{color.bg.status.danger.strong.active}", + "mediumBackground": "{color.bg.status.warning.strong.active}", + "strongBackground": "{color.bg.brand.strong.hover}" + }, + "icon": { "color": "{color.fg.muted}" } + }, + "dark": { + "strength": { + "mediumBackground": "{color.bg.status.warning.strong.active}", + "strongBackground": "{color.bg.status.success.strong.hover}", + "weakBackground": "{color.bg.status.danger.strong.active}" + }, + "icon": { "color": "{color.fg.inverse.muted}" } + } + }, + "meter": { + "background": "{color.bg.neutral.medium.default}", + "borderRadius": "{dimension.borderRadius.400}", + "height": "{dimension.size.200}" + }, + "overlay": { + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.strong}", + "borderRadius": "{dimension.borderRadius.200}", + "color": "{color.fg.default}", + "padding": "{dimension.space.400}", + "shadow": "{effects.elevation.400}" + }, + "content": { "gap": "{dimension.space.200}" }, + "icon": { "color": "{color.fg.default}" } + }, + "popover": { + "extend": { + "borderWidth": "{dimension.borderWidth.100}", + "arrow": { + "width": "{dimension.size.350}", + "height": "{dimension.size.200}" + } + }, + "root": { + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.strong}", + "color": "{color.fg.default}", + "borderRadius": "{dimension.borderRadius.200}", + "shadow": "{effects.elevation.400}", + "gutter": "{dimension.space.100}", + "arrowOffset": "{dimension.space.600}" + }, + "content": { "padding": "{dimension.space.400}" } + }, + "progressbar": { + "label": { + "color": "{color.fg.default}", + "fontSize": "{fonts.fontSize.100}", + "fontWeight": "{fonts.fontWeight.regular}" + }, + "root": { + "background": "{color.bg.surface.canvas.hover}", + "borderRadius": "{dimension.borderRadius.400}", + "height": "{dimension.size.450}" + }, + "value": { "background": "{color.bg.brand.strong.default}" } + }, + "progressspinner": { + "extend": { + "small": "{dimension.size.450}", + "medium": "{dimension.size.900}", + "large": "{dimension.size.1200}", + "xlarge": "{dimension.size.1300}" + }, + "colorScheme": { + "light": { + "root": { + "colorOne": "{color.fg.brand.default}", + "colorTwo": "{color.fg.status.info.default}", + "colorThree": "{color.fg.status.danger.default}", + "colorFour": "{color.fg.status.warning.default}" + } + }, + "dark": { + "root": { + "colorFour": "{color.fg.status.warning.muted}", + "colorOne": "{color.fg.brand.muted}", + "colorThree": "{color.fg.status.danger.muted}", + "colorTwo": "{color.fg.status.info.muted}" + } + } + }, + "root": { "borderWidth": "{dimension.borderWidth.300}" } + }, + "radiobutton": { + "root": { + "width": "{dimension.size.700}", + "height": "{dimension.size.700}", + "background": "{color.bg.surface.default.default}", + "checkedBackground": "{color.bg.neutral.strong.default}", + "checkedHoverBackground": "{color.bg.neutral.strong.hover}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "filledBackground": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.strong}", + "hoverBorderColor": "{color.border.neutral.bold.default}", + "focusBorderColor": "{color.border.neutral.strong}", + "checkedBorderColor": "{color.border.neutral.bold.default}", + "checkedHoverBorderColor": "{color.border.neutral.bold.default}", + "checkedFocusBorderColor": "{color.border.neutral.bold.default}", + "checkedDisabledBorderColor": "{color.border.neutral.strong}", + "invalidBorderColor": "{color.border.status.danger.subtle}", + "shadow": "{effects.elevation.none}", + "transitionDuration": "{effects.transition.duration.200}", + "focusRing": { + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}", + "style": "none", + "width": "{dimension.focusRing.width}" + }, + "lg": { + "height": "{dimension.size.600}", + "width": "{dimension.size.600}" + }, + "sm": { + "height": "{dimension.size.200}", + "width": "{dimension.size.200}" + } + }, + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + }, + "sm": { + "width": "{dimension.size.450}", + "height": "{dimension.size.450}" + }, + "lg": { + "width": "{dimension.size.600}", + "height": "{dimension.size.600}" + }, + "icon": { + "size": "{dimension.size.350}", + "checkedColor": "{color.fg.on.fill.default}", + "checkedHoverColor": "{color.fg.on.fill.hover}", + "disabledColor": "{color.fg.muted}", + "sm": { "size": "{dimension.size.200}" }, + "lg": { "size": "{dimension.size.450}" } + } + }, + "rating": { + "root": { + "gap": "{dimension.space.200}", + "transitionDuration": "{effects.transition.duration.200}", + "focusRing": { + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}", + "style": "none", + "width": "{dimension.focusRing.width}" + } + }, + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + }, + "icon": { + "size": "{dimension.size.700}", + "color": "{color.fg.muted}", + "hoverColor": "{color.fg.status.warning.default}", + "activeColor": "{color.fg.status.warning.default}" + } + }, + "ripple": { + "colorScheme": { + "light": { + "root": { "background": "{color.bg.neutral.medium.default}" } + }, + "dark": { + "root": { "background": "{color.bg.neutral.medium.default}" } + } + } + }, + "scrollpanel": { + "colorScheme": { + "light": { "bar": { "background": "{color.bg.neutral.weak.active}" } }, + "dark": { "bar": { "background": "{color.bg.neutral.strong.active}" } } + }, + "root": { "transitionDuration": "{effects.transition.duration.200}" }, + "bar": { + "size": "{dimension.size.200}", + "borderRadius": "{dimension.borderRadius.200}", + "focusRing": { + "width": "{dimension.size.none}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + } + } + }, + "select": { + "extend": { + "extOption": { + "background": "{color.bg.surface.raised.default}", + "gap": "{dimension.space.200}" + }, + "extOptionGroup": { "gap": "{dimension.space.200}" }, + "readonlyBackground": "{color.bg.neutral.weak.default}", + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": "{dimension.size.450}" + }, + "root": { + "background": "{color.bg.surface.default.default}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "filledBackground": "{color.bg.surface.default.default}", + "filledHoverBackground": "{color.bg.surface.default.default}", + "filledFocusBackground": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.strong}", + "hoverBorderColor": "{color.border.brand.strong}", + "focusBorderColor": "{color.border.brand.strong}", + "invalidBorderColor": "{color.border.status.danger.subtle}", + "color": "{color.fg.default}", + "disabledColor": "{color.fg.muted}", + "placeholderColor": "{color.fg.muted}", + "invalidPlaceholderColor": "{color.fg.status.danger.hover}", + "shadow": "{effects.elevation.none}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}", + "borderRadius": "{dimension.borderRadius.400}", + "transitionDuration": "{effects.transition.duration.200}", + "sm": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}" + }, + "lg": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}" + }, + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}" + } + }, + "dropdown": { + "width": "{dimension.size.1700}", + "color": "{color.fg.active}" + }, + "overlay": { + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "borderRadius": "{dimension.borderRadius.400}", + "color": "{color.fg.default}", + "shadow": "{effects.elevation.400}" + }, + "list": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}", + "header": { + "padding": "{dimension.space.400} {dimension.space.400} {dimension.space.none} {dimension.space.400}" + } + }, + "option": { + "focusBackground": "{color.bg.neutral.weak.default}", + "selectedBackground": "{color.bg.neutral.strong.selected}", + "selectedFocusBackground": "{color.bg.neutral.strong.active}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "selectedColor": "{color.fg.on.fill.default}", + "selectedFocusColor": "{color.fg.on.fill.active}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.200}" + }, + "optionGroup": { + "background": "{color.bg.surface.raised.default}", + "color": "{color.fg.muted}", + "fontWeight": "{fonts.fontWeight.demibold}", + "padding": "{dimension.space.200} {dimension.space.400}" + }, + "clearIcon": { "color": "{color.fg.active}" }, + "checkmark": { + "color": "{color.fg.default}", + "gutterStart": "{dimension.space.negative.200}", + "gutterEnd": "{dimension.space.200}" + }, + "emptyMessage": { + "padding": "{dimension.space.200} {dimension.space.400}" + } + }, + "selectbutton": { + "extend": { + "gap": "{dimension.space.100}", + "paddingX": "{dimension.space.100}", + "paddingY": "{dimension.space.100}", + "iconSize": { + "sm": "{dimension.size.450}", + "md": "{dimension.size.600}", + "lg": "{dimension.size.700}", + "xlg": "{dimension.size.800}" + }, + "checkedBackground": "{color.bg.surface.raised.default}", + "checkedBorderColor": "{color.border.neutral.inverse}", + "checkedColor": "{color.fg.active}", + "ext": { "borderRadius": "{dimension.borderRadius.200}" } + }, + "colorScheme": { + "light": { + "root": { + "invalidBorderColor": "{color.border.status.danger.subtle}" + }, + "extend": { "background": "{color.bg.neutral.medium.default}" } + }, + "dark": { + "root": { + "invalidBorderColor": "{color.border.status.danger.strong}" + }, + "extend": { "background": "{color.bg.neutral.strong.hover}" } + } + }, + "root": { "borderRadius": "{dimension.borderRadius.400}" } + }, + "skeleton": { + "extend": { + "minWidth": "{dimension.size.900}", + "height": "{dimension.size.900}" + }, + "colorScheme": { + "light": { + "root": { + "background": "{color.bg.surface.canvas.hover}", + "animationBackground": "{color.bg.surface.canvas.default}" + } + }, + "dark": { + "root": { + "background": "{color.bg.surface.raised.default}", + "animationBackground": "{color.bg.surface.raised.selected}" + } + } + }, + "root": { "borderRadius": "{dimension.borderRadius.400}" } + }, + "slider": { + "colorScheme": { + "light": { + "handle": { + "content": { "background": "{color.bg.surface.default.default}" } + } + }, + "dark": { + "handle": { + "content": { "background": "{color.bg.surface.canvas.default}" } + } + } + }, + "root": { "transitionDuration": "{effects.transition.duration.200}" }, + "track": { + "background": "{color.bg.neutral.medium.default}", + "borderRadius": "{dimension.borderRadius.400}", + "size": "{dimension.size.100}" + }, + "range": { "background": "{color.bg.neutral.strong.default}" }, + "handle": { + "width": "{dimension.size.600}", + "height": "{dimension.size.600}", + "borderRadius": "{dimension.borderRadius.max}", + "background": "{color.bg.neutral.strong.default}", + "hoverBackground": "{color.bg.neutral.strong.default}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + }, + "content": { + "borderRadius": "{dimension.borderRadius.max}", + "hoverBackground": "{color.bg.neutral.strong.default}", + "width": "{dimension.size.350}", + "height": "{dimension.size.350}", + "shadow": "none" + } + } + }, + "splitter": { + "colorScheme": { + "light": { + "handle": { "background": "{color.bg.neutral.strong.default}" } + }, + "dark": { + "handle": { "background": "{color.bg.surface.canvas.default}" } + } + }, + "gutter": { "background": "{color.bg.neutral.weak.default}" }, + "root": { + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "color": "{color.fg.default}", + "transitionDuration": "{effects.transition.duration.200}" + }, + "handle": { + "size": "{dimension.size.100}", + "borderRadius": "{dimension.borderRadius.400}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + } + } + }, + "stepper": { + "extend": { + "extCaption": { "gap": "{dimension.space.100}" }, + "extStepNumber": { + "invalidBackground": "{color.bg.status.danger.strong.hover}", + "invalidColor": "{color.fg.on.status.danger.default}", + "invalidBorderColor": "{color.border.status.danger.subtle}", + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": "{dimension.size.700}" + } + }, + "root": { "transitionDuration": "{effects.transition.duration.200}" }, + "separator": { + "background": "{color.bg.neutral.medium.default}", + "activeBackground": "{color.bg.neutral.strong.default}", + "margin": "{dimension.space.none} {dimension.space.none} {dimension.space.none} {dimension.space.700}", + "size": "{dimension.borderWidth.100}" + }, + "step": { + "padding": "{dimension.space.200}", + "gap": "{dimension.space.200}" + }, + "stepHeader": { + "padding": "{dimension.space.none}", + "borderRadius": "{dimension.borderRadius.none}", + "gap": "{dimension.space.200}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + } + }, + "stepTitle": { + "color": "{color.fg.default}", + "activeColor": "{color.fg.default}", + "fontWeight": "{fonts.fontWeight.regular}" + }, + "stepNumber": { + "background": "{color.bg.surface.raised.default}", + "activeBackground": "{color.bg.brand.strong.default}", + "borderColor": "{color.border.neutral.default}", + "activeBorderColor": "{color.border.brand.default}", + "color": "{color.fg.default}", + "activeColor": "{color.fg.default}", + "size": "{dimension.size.700}", + "fontSize": "{fonts.fontSize.300}", + "fontWeight": "{fonts.fontWeight.bold}", + "borderRadius": "{dimension.borderRadius.max}", + "shadow": "none" + }, + "steppanels": { "padding": "{dimension.space.400}" }, + "steppanel": { + "background": "{color.bg.surface.raised.default}", + "color": "{color.fg.default}", + "padding": "{dimension.space.none}", + "indent": "{dimension.space.none}" + } + }, + "steps": { + "itemLink": { + "gap": "{dimension.space.200}", + "borderRadius": "{dimension.borderRadius.400}", + "focusRing": { + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}", + "style": "none", + "width": "{dimension.focusRing.width}" + } + }, + "itemLabel": { + "fontWeight": "{fonts.fontWeight.regular}", + "activeColor": "{color.fg.hover}", + "color": "{color.fg.default}" + }, + "itemNumber": { + "background": "{color.bg.surface.raised.default}", + "size": "{dimension.size.900}", + "fontSize": "{fonts.fontSize.300}", + "fontWeight": "{fonts.fontWeight.bold}", + "borderRadius": "{dimension.borderRadius.max}", + "shadow": "none", + "activeBackground": "{color.bg.surface.raised.default}", + "activeBorderColor": "{color.border.neutral.default}", + "activeColor": "{color.fg.hover}", + "borderColor": "{color.border.neutral.default}", + "color": "{color.fg.default}" + }, + "root": { "transitionDuration": "{effects.transition.duration.200}" }, + "separator": { "background": "{color.bg.neutral.medium.default}" } + }, + "tabs": { + "colorScheme": { + "light": { + "navButton": { "shadow": "none" }, + "tab": { + "background": "transparent", + "hoverBackground": "transparent", + "activeBackground": "transparent" + } + }, + "dark": { + "navButton": { "shadow": "none" }, + "tab": { + "activeBackground": "transparent", + "background": "transparent", + "hoverBackground": "transparent" + } + } + }, + "root": { "transitionDuration": "{effects.transition.duration.200}" }, + "tablist": { + "borderWidth": "{dimension.borderWidth.none} {dimension.borderWidth.none} {dimension.borderWidth.100} {dimension.borderWidth.none}", + "background": "transparent", + "borderColor": "{color.border.neutral.default}" + }, + "tab": { + "borderWidth": "{dimension.borderWidth.none}", + "borderColor": "{color.border.neutral.default}", + "hoverBorderColor": "{color.border.neutral.default}", + "activeBorderColor": "{color.border.neutral.bold.hover}", + "color": "{color.fg.muted}", + "hoverColor": "{color.fg.default}", + "activeColor": "{color.fg.default}", + "padding": "{dimension.space.400}", + "fontWeight": "{fonts.fontWeight.demibold}", + "margin": "{dimension.space.none}", + "gap": "{dimension.space.200}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + } + }, + "tabpanel": { + "background": "transparent", + "color": "{color.fg.default}", + "padding": "{dimension.space.400}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + } + }, + "navButton": { + "background": "{color.bg.surface.raised.default}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}", + "width": "{dimension.size.700}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + } + }, + "activeBar": { + "height": "{dimension.size.50}", + "bottom": "{dimension.space.negative.50}", + "background": "{color.bg.neutral.strong.default}" + } + }, + "toast": { + "extend": { + "extInfo": { + "color": "{color.fg.status.info.default}", + "closeButton": { + "color": "{color.fg.status.info.default}", + "borderColor": "{color.border.status.info.default}" + }, + "caption": { "color": "{color.fg.default}" } + }, + "extAccentLine": { "width": "{dimension.size.100}" }, + "extCloseButton": { "width": "{dimension.borderWidth.100}" }, + "extSuccess": { + "color": "{color.fg.status.success.default}", + "closeButton": { + "color": "{color.fg.status.success.default}", + "borderColor": "{color.border.brand.default}" + }, + "caption": { "color": "{color.fg.default}" } + }, + "extWarn": { + "color": "{color.fg.status.warning.default}", + "closeButton": { + "color": "{color.fg.status.warning.default}", + "borderColor": "{color.border.status.warning.default}" + }, + "caption": { "color": "{color.fg.default}" } + }, + "extError": { + "color": "{color.fg.status.danger.default}", + "closeButton": { + "color": "{color.fg.status.danger.default}", + "borderColor": "{color.border.status.danger.default}" + }, + "caption": { "color": "{color.fg.default}" } + } + }, + "colorScheme": { + "light": { + "info": { + "background": "{color.bg.status.info.weak.default}", + "borderColor": "{color.border.status.info.default}", + "color": "{color.fg.default}", + "detailColor": "{color.fg.default}", + "shadow": "{effects.elevation.400}", + "closeButton": { + "hoverBackground": "{color.bg.status.info.weak.active}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } + } + }, + "success": { + "background": "{color.bg.status.success.weak.default}", + "borderColor": "{color.border.brand.default}", + "color": "{color.fg.default}", + "detailColor": "{color.fg.default}", + "shadow": "{effects.elevation.400}", + "closeButton": { + "hoverBackground": "{color.bg.status.success.weak.active}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } + } + }, + "warn": { + "background": "{color.bg.status.warning.weak.default}", + "borderColor": "{color.border.status.warning.default}", + "color": "{color.fg.default}", + "detailColor": "{color.fg.default}", + "shadow": "{effects.elevation.400}", + "closeButton": { + "hoverBackground": "{color.bg.status.warning.weak.active}", + "focusRing": { "color": "{color.border.focus}", "shadow": "none" } + } + }, + "error": { + "background": "{color.bg.status.danger.weak.default}", + "borderColor": "{color.border.status.danger.default}", + "color": "{color.fg.default}", + "detailColor": "{color.fg.default}", + "shadow": "{effects.elevation.400}", + "closeButton": { + "hoverBackground": "{color.bg.status.danger.weak.active}", + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + } + } + }, + "secondary": { + "shadow": "{effects.elevation.400}", + "background": "{color.bg.neutral.weak.default}", + "borderColor": "{color.border.neutral.strong}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + }, + "hoverBackground": "{color.bg.neutral.weak.default}" + }, + "color": "{color.fg.default}", + "detailColor": "{color.fg.subtle}" + }, + "contrast": { + "shadow": "{effects.elevation.400}", + "background": "{color.bg.neutral.strong.default}", + "borderColor": "{color.border.neutral.bold.default}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + }, + "hoverBackground": "{color.bg.neutral.strong.hover}" + }, + "color": "{color.fg.on.fill.default}", + "detailColor": "{color.fg.on.fill.muted}" + }, + "root": { "blur": "{effects.blur.none}" } + }, + "dark": { + "contrast": { + "background": "{color.bg.surface.canvas.default}", + "borderColor": "{color.border.neutral.inverse}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + }, + "hoverBackground": "{color.bg.surface.canvas.hover}" + }, + "color": "{color.fg.default}", + "detailColor": "{color.fg.on.fill.muted}", + "shadow": "{effects.elevation.400}" + }, + "error": { + "background": "{color.bg.status.danger.weak.default}", + "borderColor": "{color.border.status.danger.default}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "{color.bg.status.danger.weak.active}" + }, + "color": "{color.fg.inverse.default}", + "detailColor": "{color.fg.inverse.default}", + "shadow": "{effects.elevation.400}" + }, + "info": { + "background": "{color.bg.status.info.weak.default}", + "borderColor": "{color.border.status.info.default}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "{color.bg.status.info.weak.active}" + }, + "color": "{color.fg.inverse.default}", + "detailColor": "{color.fg.inverse.default}", + "shadow": "{effects.elevation.400}" + }, + "root": { "blur": "{effects.blur.none}" }, + "secondary": { + "background": "{color.bg.neutral.strong.default}", + "borderColor": "{color.border.neutral.strong}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.none}" + }, + "hoverBackground": "{color.bg.neutral.strong.selected}" + }, + "color": "{color.fg.inverse.default}", + "detailColor": "{color.fg.subtle}", + "shadow": "{effects.elevation.400}" + }, + "success": { + "background": "{color.bg.status.success.weak.default}", + "borderColor": "{color.border.brand.default}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "{effects.elevation.200}" + }, + "hoverBackground": "{color.bg.status.success.weak.active}" + }, + "color": "{color.fg.inverse.default}", + "detailColor": "{color.fg.inverse.default}", + "shadow": "{effects.elevation.400}" + }, + "warn": { + "background": "{color.bg.status.warning.weak.default}", + "borderColor": "{color.border.status.warning.default}", + "closeButton": { + "focusRing": { + "color": "{color.border.focus}", + "shadow": "none" + }, + "hoverBackground": "{color.bg.status.warning.weak.active}" + }, + "color": "{color.fg.inverse.default}", + "detailColor": "{color.fg.inverse.default}", + "shadow": "{effects.elevation.400}" + } + } + }, + "root": { + "width": "{dimension.size.2000}", + "borderWidth": "{dimension.borderWidth.100}", + "borderRadius": "{dimension.borderRadius.400}", + "transitionDuration": "{effects.transition.duration.200}" + }, + "icon": { "size": "{dimension.size.1000}" }, + "content": { + "padding": "{dimension.space.400}", + "gap": "{dimension.space.400}" + }, + "text": { "gap": "{dimension.space.100}" }, + "summary": { + "fontWeight": "{fonts.fontWeight.bold}", + "fontSize": "{fonts.fontSize.300}" + }, + "detail": { + "fontWeight": "{fonts.fontWeight.regular}", + "fontSize": "{fonts.fontSize.200}" + }, + "closeButton": { + "width": "{dimension.size.900}", + "height": "{dimension.size.900}", + "borderRadius": "{dimension.borderRadius.400}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "offset": "{dimension.focusRing.offset}" + } + }, + "closeIcon": { "size": "{dimension.size.450}" } + }, + "tag": { + "colorScheme": { + "light": { + "primary": { + "background": "{color.bg.brand.strong.default}", + "color": "{color.fg.default}" + }, + "secondary": { + "background": "{color.bg.neutral.medium.default}", + "color": "{color.fg.default}" + }, + "success": { + "background": "{color.bg.status.success.strong.hover}", + "color": "{color.fg.on.status.success.default}" + }, + "info": { + "background": "{color.bg.status.info.strong.default}", + "color": "{color.fg.on.status.info.default}" + }, + "warn": { + "background": "{color.bg.status.warning.strong.default}", + "color": "{color.fg.on.status.warning.default}" + }, + "danger": { + "background": "{color.bg.status.danger.strong.default}", + "color": "{color.fg.on.status.danger.default}" + }, + "contrast": { + "background": "{color.bg.neutral.strong.default}", + "color": "{color.fg.on.fill.default}" + } + }, + "dark": { + "contrast": { + "background": "{color.bg.surface.canvas.default}", + "color": "{color.fg.default}" + }, + "danger": { + "background": "{color.bg.status.danger.strong.default}", + "color": "{color.fg.on.status.danger.default}" + }, + "info": { + "background": "{color.bg.status.info.strong.default}", + "color": "{color.fg.on.status.info.default}" + }, + "primary": { + "background": "{color.bg.brand.strong.default}", + "color": "{color.fg.inverse.default}" + }, + "secondary": { + "background": "{color.bg.neutral.strong.hover}", + "color": "{color.fg.inverse.default}" + }, + "success": { + "background": "{color.bg.brand.strong.hover}", + "color": "{color.fg.on.status.success.default}" + }, + "warn": { + "background": "{color.bg.status.warning.strong.default}", + "color": "{color.fg.on.status.warning.default}" + } + } + }, + "root": { + "fontSize": "{fonts.fontSize.100}", + "fontWeight": "{fonts.fontWeight.regular}", + "padding": "{dimension.space.100} {dimension.space.200}", + "gap": "{dimension.space.100}", + "borderRadius": "{dimension.borderRadius.200}", + "roundedBorderRadius": "{dimension.borderRadius.max}" + }, + "icon": { "size": "{dimension.size.450}" } + }, + "textarea": { + "extend": { + "readonlyBackground": "{color.bg.neutral.weak.default}", + "borderWidth": "{dimension.borderWidth.100}", + "iconSize": "{dimension.size.450}", + "minHeight": "{dimension.size.1500}" + }, + "root": { + "background": "{color.bg.surface.default.default}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "filledBackground": "{color.bg.surface.default.default}", + "filledHoverBackground": "{color.bg.surface.default.default}", + "filledFocusBackground": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.strong}", + "hoverBorderColor": "{color.border.brand.strong}", + "focusBorderColor": "{color.border.brand.strong}", + "invalidBorderColor": "{color.border.status.danger.subtle}", + "color": "{color.fg.active}", + "disabledColor": "{color.fg.muted}", + "placeholderColor": "{color.fg.muted}", + "invalidPlaceholderColor": "{color.fg.status.danger.hover}", + "shadow": "{effects.elevation.none}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}", + "borderRadius": "{dimension.borderRadius.400}", + "transitionDuration": "{effects.transition.duration.200}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}" + }, + "lg": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}" + }, + "sm": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}" + } + }, + "sm": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{dimension.space.200}", + "paddingY": "{dimension.space.200}" + }, + "lg": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{dimension.space.400}", + "paddingY": "{dimension.space.400}" + } + }, + "tieredmenu": { + "extend": { + "iconSize": "{dimension.size.600}", + "extSubmenu": { + "borderColor": "{color.border.neutral.default}", + "background": "{color.bg.surface.raised.default}" + }, + "extItem": { + "caption": { + "gap": "{dimension.space.100}", + "color": "{color.fg.muted}" + } + } + }, + "root": { + "background": "{color.bg.surface.default.default}", + "borderColor": "transparent", + "color": "{color.fg.default}", + "borderRadius": "{dimension.borderRadius.400}", + "shadow": "{effects.elevation.400}", + "transitionDuration": "{effects.transition.duration.200}" + }, + "list": { + "padding": "{dimension.space.100}", + "gap": "{dimension.space.100}" + }, + "item": { + "focusBackground": "{color.bg.neutral.weak.default}", + "activeBackground": "{color.bg.neutral.strong.default}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "activeColor": "{color.fg.inverse.active}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.200}", + "gap": "{dimension.space.200}", + "icon": { + "color": "{color.fg.default}", + "focusColor": "{color.fg.default}", + "activeColor": "{color.fg.inverse.active}" + } + }, + "submenu": { "mobileIndent": "{dimension.space.400}" }, + "separator": { "borderColor": "{color.border.neutral.default}" }, + "submenuIcon": { + "activeColor": "{color.fg.hover}", + "color": "{color.fg.default}", + "focusColor": "{color.fg.hover}", + "size": "{dimension.size.400}" + } + }, + "timeline": { + "extend": { "extEvent": { "gap": "{dimension.space.100}" } }, + "event": { "minHeight": "{dimension.size.1400}" }, + "vertical": { + "eventContent": { + "padding": "{dimension.space.none} {dimension.space.600}" + } + }, + "horizontal": { + "eventContent": { + "padding": "{dimension.space.600} {dimension.space.none}" + } + }, + "eventMarker": { + "size": "{dimension.size.450}", + "borderRadius": "{dimension.borderRadius.400}", + "borderWidth": "{dimension.borderWidth.300}", + "background": "{color.bg.surface.raised.default}", + "borderColor": "{color.border.brand.default}", + "content": { + "borderRadius": "{dimension.borderRadius.400}", + "size": "{dimension.size.350}", + "background": "transparent", + "insetShadow": "none" + } + }, + "eventConnector": { + "color": "{color.border.neutral.default}", + "size": "{dimension.borderWidth.100}" + } + }, + "togglebutton": { + "extend": { + "ext": { "gap": "{dimension.space.400}" }, + "iconSize": { + "sm": "{dimension.size.450}", + "md": "{dimension.size.600}", + "lg": "{dimension.size.700}" + }, + "iconOnlyWidth": "{dimension.size.1100}", + "hoverBorderColor": "{color.border.neutral.strong}", + "checkedHoverColor": "{color.fg.on.fill.hover}", + "checkedHoverBackground": "{color.bg.neutral.strong.hover}", + "checkedHoverBorderColor": "{color.border.neutral.bold.hover}", + "extXlg": { + "padding": "{dimension.space.600} {dimension.space.600}", + "iconOnlyWidth": "{dimension.size.1400}" + }, + "extSm": { "iconOnlyWidth": "{dimension.size.900}" }, + "extLg": { "iconOnlyWidth": "{dimension.size.1300}" } + }, + "colorScheme": { + "light": { + "root": { + "background": "{color.bg.surface.canvas.hover}", + "hoverBackground": "{color.bg.surface.canvas.active}", + "borderColor": "{color.border.neutral.default}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.default}", + "checkedBackground": "{color.bg.neutral.strong.default}", + "checkedColor": "{color.fg.on.fill.default}", + "checkedBorderColor": "{color.border.neutral.bold.default}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "disabledBorderColor": "{color.border.neutral.default}", + "disabledColor": "{color.fg.muted}", + "invalidBorderColor": "{color.border.status.danger.subtle}" + }, + "icon": { + "color": "{color.fg.default}", + "hoverColor": "{color.fg.default}", + "checkedColor": "{color.fg.on.fill.default}", + "disabledColor": "{color.fg.muted}" + }, + "content": { "checkedBackground": "transparent" } + }, + "dark": { + "root": { + "hoverBackground": "{color.bg.neutral.strong.active}", + "background": "{color.bg.neutral.strong.hover}", + "borderColor": "{color.border.neutral.bold.hover}", + "color": "{color.fg.inverse.default}", + "hoverColor": "{color.fg.on.brand.hover}", + "checkedBackground": "{color.bg.surface.canvas.default}", + "checkedColor": "{color.fg.focus}", + "checkedBorderColor": "{color.border.neutral.inverse}", + "disabledBackground": "{color.bg.neutral.strong.hover}", + "disabledBorderColor": "{color.border.neutral.bold.hover}", + "disabledColor": "{color.fg.inverse.muted}", + "invalidBorderColor": "{color.border.status.danger.strong}" + }, + "icon": { + "color": "{color.fg.inverse.default}", + "hoverColor": "{color.fg.on.brand.hover}", + "checkedColor": "{color.fg.focus}", + "disabledColor": "{color.fg.inverse.muted}" + }, + "content": { "checkedBackground": "transparent" } + } + }, + "root": { + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.max}", + "gap": "{dimension.space.200}", + "fontWeight": "{fonts.fontWeight.demibold}", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.200}" + }, + "sm": { + "fontSize": "{fonts.fontSize.200}", + "padding": "{dimension.space.100} {dimension.space.400}" + }, + "lg": { + "fontSize": "{fonts.fontSize.500}", + "padding": "{dimension.space.400} {dimension.space.700}" + }, + "transitionDuration": "{effects.transition.duration.200}", + "background": "{color.bg.surface.default.default}", + "borderColor": "{color.border.neutral.default}", + "checkedBackground": "{color.bg.surface.default.default}", + "checkedBorderColor": "{color.border.neutral.default}", + "checkedColor": "{color.fg.default}", + "color": "{color.fg.default}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "disabledBorderColor": "{color.border.neutral.default}", + "disabledColor": "{color.fg.muted}", + "hoverColor": "{color.fg.hover}", + "invalidBorderColor": "{color.border.status.danger.subtle}" + }, + "content": { + "checkedShadow": "none", + "padding": "{dimension.space.none}", + "borderRadius": "{dimension.borderRadius.none}", + "sm": { "padding": "{dimension.space.none}" }, + "lg": { "padding": "{dimension.space.none}" }, + "checkedBackground": "{color.bg.surface.default.default}" + }, + "icon": { + "checkedColor": "{color.fg.default}", + "color": "{color.fg.default}", + "disabledColor": "{color.fg.muted}", + "hoverColor": "{color.fg.hover}" + } + }, + "toggleswitch": { + "colorScheme": { + "light": { + "root": { + "background": "{color.bg.neutral.medium.active}", + "hoverBackground": "{color.bg.neutral.medium.strong}", + "disabledBackground": "{color.bg.surface.canvas.hover}", + "checkedBackground": "{color.bg.neutral.strong.default}", + "checkedHoverBackground": "{color.bg.neutral.strong.hover}" + }, + "handle": { + "background": "{color.bg.surface.raised.default}", + "hoverBackground": "{color.bg.surface.raised.default}", + "disabledBackground": "{color.bg.neutral.medium.strong}", + "checkedBackground": "{color.bg.surface.raised.default}", + "checkedHoverBackground": "{color.bg.surface.raised.default}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.default}", + "checkedColor": "{color.fg.default}", + "checkedHoverColor": "{color.fg.default}" + } + }, + "dark": { + "handle": { + "background": "{color.bg.surface.raised.default}", + "checkedBackground": "{color.bg.surface.raised.default}", + "checkedColor": "{color.fg.inverse.focus}", + "checkedHoverBackground": "{color.bg.surface.raised.default}", + "checkedHoverColor": "{color.fg.on.brand.hover}", + "color": "{color.fg.inverse.default}", + "disabledBackground": "{color.bg.surface.raised.active}", + "hoverBackground": "{color.bg.surface.raised.default}", + "hoverColor": "{color.fg.on.brand.hover}" + }, + "root": { + "background": "{color.bg.neutral.medium.active}", + "checkedBackground": "{color.bg.surface.canvas.default}", + "checkedHoverBackground": "{color.bg.surface.canvas.hover}", + "disabledBackground": "{color.bg.neutral.strong.hover}", + "hoverBackground": "{color.bg.surface.raised.active}" + } + } + }, + "root": { + "width": "{dimension.size.1100}", + "height": "{dimension.size.700}", + "borderRadius": "{dimension.borderRadius.max}", + "gap": "{dimension.space.100}", + "borderWidth": "{dimension.borderWidth.100}", + "shadow": "none", + "focusRing": { + "width": "{dimension.focusRing.width}", + "style": "none", + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}" + }, + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "checkedBorderColor": "transparent", + "checkedHoverBorderColor": "transparent", + "invalidBorderColor": "{color.border.status.danger.subtle}", + "transitionDuration": "{effects.transition.duration.200}", + "slideDuration": "{effects.transition.duration.200}" + }, + "handle": { + "borderRadius": "{dimension.borderRadius.max}", + "size": "{dimension.size.450}" + } + }, + "tooltip": { + "colorScheme": { + "light": { + "root": { + "background": "{color.bg.neutral.strong.default}", + "color": "{color.fg.inverse.default}" + } + }, + "dark": { + "root": { + "background": "{color.bg.surface.canvas.default}", + "color": "{color.fg.default}" + } + } + }, + "root": { + "maxWidth": "{dimension.size.2000}", + "gutter": "{dimension.space.100}", + "shadow": "{effects.elevation.400}", + "padding": "{dimension.space.200} {dimension.space.400}", + "borderRadius": "{dimension.borderRadius.200}" + } + }, + "tree": { + "root": { + "background": "{color.bg.surface.default.default}", + "color": "{color.fg.default}", + "padding": "{dimension.space.400}", + "gap": "{dimension.space.100}", + "indent": "{dimension.space.400}", + "transitionDuration": "{effects.transition.duration.200}" + }, + "node": { + "padding": "{dimension.space.200} {dimension.space.400}", + "color": "{color.fg.default}", + "selectedColor": "{color.fg.on.fill.default}", + "gap": "{dimension.space.100}", + "borderRadius": "{dimension.borderRadius.400}", + "focusRing": { + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}", + "style": "none", + "width": "{dimension.focusRing.width}" + }, + "hoverBackground": "{color.bg.neutral.weak.default}", + "hoverColor": "{color.fg.default}", + "selectedBackground": "{color.bg.neutral.strong.selected}" + }, + "nodeIcon": { + "selectedColor": "{color.fg.on.fill.default}", + "color": "{color.fg.default}", + "hoverColor": "{color.fg.hover}" + }, + "nodeToggleButton": { + "borderRadius": "{dimension.borderRadius.100}", + "size": "{dimension.size.800}", + "selectedHoverBackground": "{color.bg.neutral.strong.default}", + "color": "{color.fg.default}", + "focusRing": { + "color": "{color.border.focus}", + "offset": "{dimension.focusRing.offset}", + "shadow": "{effects.elevation.none}", + "style": "none", + "width": "{dimension.focusRing.width}" + }, + "hoverBackground": "{color.bg.neutral.weak.default}", + "hoverColor": "{color.fg.hover}", + "selectedHoverColor": "{color.fg.hover}" + }, + "loadingIcon": { "size": "{dimension.size.450}" }, + "filter": { + "margin": "{dimension.space.none} {dimension.space.none} {dimension.space.200} {dimension.space.none}" + } + }, + "overlaybadge": { + "root": { + "outline": { "width": "{dimension.size.none}", "color": "transparent" } + } + } + } +} diff --git a/eslint.config.ts b/eslint.config.ts index 8b9966fb..29583883 100644 --- a/eslint.config.ts +++ b/eslint.config.ts @@ -5,6 +5,10 @@ import { MobileConfig } from './configs/eslint' export default defineConfig([ ...MobileConfig, { files: ['configs/eslint/**/*'], rules: { 'max-lines': 'off' } }, + { + files: ['scripts/**/*.ts'], + rules: { 'import-x/no-nodejs-modules': 'off' }, + }, { ignores: [ 'node_modules/**/*', diff --git a/lefthook.yml b/lefthook.yml index 536173ee..c6a2bdc7 100644 --- a/lefthook.yml +++ b/lefthook.yml @@ -70,6 +70,8 @@ pre-push: exit 1 fi eslint: - run: npx yarn eslint . + run: yarn eslint . type-check: - run: npx yarn tsc --noEmit + run: yarn tsc --noEmit + tokens-check: + run: yarn tokens:typecheck && yarn tokens:check diff --git a/package.json b/package.json index 42f78d05..d5aa9d25 100644 --- a/package.json +++ b/package.json @@ -31,12 +31,15 @@ } }, "scripts": { - "build": "rm -rf dist && tsc -p tsconfig.build.json", + "build": "yarn tokens:typecheck && yarn tokens:check && rm -rf dist && tsc -p tsconfig.build.json", "test": "jest", "start": "expo start --dev-client --clear", "android": "expo run:android", "ios": "expo run:ios --no-install", "storybook-generate": "sb-rn-get-stories --config-path .storybook && sed -i -e 's/export const view = global.view/export const view: ReturnType = global.view/' .storybook/storybook.requires.ts && prettier .storybook --write", + "tokens:generate": "ts-node --project scripts/token-generator/tsconfig.json scripts/token-generator/build.ts", + "tokens:check": "ts-node --transpile-only --project scripts/token-generator/tsconfig.json scripts/token-generator/build.ts --check", + "tokens:typecheck": "tsc --noEmit -p scripts/token-generator/tsconfig.json", "doctor": "expo-doctor", "check": "expo install --check", "lint:check": "eslint --cache .", @@ -75,6 +78,7 @@ "@testing-library/react-native": "13.3.3", "@types/jest": "29.5.14", "@types/lodash.map": "4.6.13", + "@types/node": "22.7.7", "@types/react": "19.2.14", "babel-loader": "8.2.3", "chalk": "4.1.2", diff --git a/scripts/token-generator/README.md b/scripts/token-generator/README.md new file mode 100644 index 00000000..e179f802 --- /dev/null +++ b/scripts/token-generator/README.md @@ -0,0 +1,145 @@ +# Генератор токенов + +Генератор преобразует входные токены из Figma в JSON для React Native. + +## Обновление токенов + +1. Обновить `design-tokens/input/tokens.json`. +2. Запустить `yarn tokens:generate`. +3. Проверить изменения в `src/theme/tokens`. +4. Закоммитить входные и сгенерированные токены вместе. + +`tokens:generate` сначала собирает и валидирует весь результат в памяти. При +ошибке файлы не изменяются. После успешной проверки команда удаляет лишние JSON +и записывает отформатированный результат. + +## Использование токенов + +Component-токены предназначены только для реализации компонентов UI Kit. Они не +входят в темы и публичные экспорты библиотеки. + +В `semantic` темы находится только `colorScheme`: Unistyles подставляет +соответствующие light- или dark-токены при переключении темы. Не зависящие от +темы `dimension` и `effects` доступны в статическом `semanticTokens`. + +## Результат генерации + +Из `design-tokens/input/tokens.json` создаются семь файлов: + +```text +src/theme/tokens +├── fonts.json +├── semantic +│ ├── colorScheme +│ │ ├── light.json +│ │ └── dark.json +│ ├── dimensions.json +│ └── effects.json +└── components + ├── light.json + └── dark.json +``` + +Для `semantic/colorScheme` и component-файлов выбирается соответствующая ветка +`colorScheme.light` или `colorScheme.dark`, а уровень `light`/`dark` удаляется. +Semantic-файл подключается в тему как `semantic.colorScheme`; в component-файлах +ключ `colorScheme` сохраняется: + +```text +semantic.colorScheme.light.color +→ semantic/colorScheme/light.json: color + +components.button.colorScheme.light.outlined +→ components/light.json: button.colorScheme.outlined +``` + +`semantic.dimension` записывается в `semantic/dimensions.json`, а +`semantic.effects` — в `semantic/effects.json`. Эти секции генерируются один раз +и не входят в тему. Если их итоговые значения зависят от `colorScheme`, +генератор завершится с ошибкой. + +`fonts.json` собирается из `primitive.fonts`, нормализуется по общим правилам и +не разделяется по цветовым схемам. Пока файл не экспортируется из библиотеки. + +Остальная часть `primitive` нужна только для подстановки ссылок и не +записывается в результат. Light- и dark-файлы должны иметь одинаковую структуру +и типы значений. + +## Преобразование значений + +Ссылки разрешаются до нормализации. Поддерживаются ссылки на всё значение и +вставки внутри поддерживаемых shorthand и `boxShadow`: + +```text +"{dimension.space.400}" -> "0.875rem" -> 14 +``` + +```text +"1.5rem" -> 24 +"4px" -> 4 +"150ms" -> 150 +"0.4" -> 0.4 +"0" -> 0 +``` + +Числовые строки преобразуются в числа, включая `fontWeight`. + +Animation duration преобразуется из `ms` в число. Easing записывается как +коэффициенты для `Easing.bezier`: + +```text +"linear" -> { x1: 0, y1: 0, x2: 1, y2: 1 } +"cubic-bezier(0.2, 0, 0, 1)" -> { x1: 0.2, y1: 0, x2: 0, y2: 1 } +``` + +Коэффициенты `x1` и `x2` должны находиться в диапазоне от `0` до `1`. + +CSS shorthand из 2–4 значений раскрывается в поля React Native: + +```text +padding: "8px 14px" +-> paddingTop: 8 +-> paddingRight: 14 +-> paddingBottom: 8 +-> paddingLeft: 14 +``` + +Для `borderRadius` одинаковые значения сворачиваются в число. Разные значения +сохраняются в объекте в порядке углов CSS: + +```text +borderRadius: "0 0 0 0" +-> borderRadius: 0 + +borderRadius: "4 8 12 16" +-> borderRadius: { left: 16, top: 4, right: 8, bottom: 12 } +``` + +Значения `boxShadow` сохраняются строками. Размеры внутри строки записываются в +`px`, поэтому ссылка на `0.25rem` превращается в `4px`. `boxShadow` требует New +Architecture. На Android обычные тени поддерживаются с API 28, `inset` — с +API 29. Fallback для более ранних версий намеренно не предусмотрен. + +`focusRing` сохраняет исходную структуру. Его размеры нормализуются, а `shadow` +обрабатывается по правилам `boxShadow`. Значение `style: "none"` отключает +только применение `width`, `color` и `offset` как outline-свойств: генератор не +зануляет эти токены. `shadow` остаётся независимым и может использоваться как +`boxShadow`. + +Генерация завершается с ошибкой при отсутствующей или циклической ссылке, +неподдерживаемом shorthand, непреобразованных числовых значениях и единицах, +составных `rem`/`px` вне `boxShadow`, `NaN` или `Infinity`. + +## Автоматические проверки + +`yarn tokens:check` ничего не изменяет и отдельно показывает отсутствующие, +изменённые и лишние JSON. `yarn tokens:typecheck` проверяет TypeScript-код +генератора. Обе команды запускаются при сборке и в CI. Если проверка файлов не +прошла, нужно выполнить `yarn tokens:generate` и проверить diff. + +## Устройство генератора + +Для изменения генератора: `core/compiler.ts` собирает темы, `core/resolution.ts` +разрешает ссылки, `core/normalization.ts` преобразует значения, +`core/validation.ts` проверяет результат. CLI и запись файлов находятся в +`build.ts` и `io.ts`. diff --git a/scripts/token-generator/__tests__/compiler.test.ts b/scripts/token-generator/__tests__/compiler.test.ts new file mode 100644 index 00000000..4094276c --- /dev/null +++ b/scripts/token-generator/__tests__/compiler.test.ts @@ -0,0 +1,634 @@ +import { + accessSync, + readdirSync, + mkdtempSync, + writeFileSync, + rmSync, +} from 'node:fs' +import { tmpdir } from 'node:os' +import { join } from 'node:path' + +import { + INPUT_DIRECTORY, + INPUT_FILE, + TOKENS_DIRECTORY, + parseArgs, +} from '../build' +import { compileTokens } from '../core/compiler' +import { + convertUnit, + normalizeEasing, + normalizeTree, + parseBoxShorthand, +} from '../core/normalization' +import { resolveReferences } from '../core/resolution' +import { + isTokenTree, + type CompiledTokens, + type TokenTree, + type TokenValue, +} from '../core/types' +import { assertValidOutput } from '../core/validation' +import { + OUTPUT_FILES, + findGeneratedTokenIssues, + loadTokenTree, + writeGeneratedTokens, +} from '../io' + +const listJsonFiles = (directory: string, prefix = ''): string[] => + readdirSync(directory, { withFileTypes: true }) + .flatMap((entry) => { + const relativePath = join(prefix, entry.name) + + return entry.isDirectory() + ? listJsonFiles(join(directory, entry.name), relativePath) + : entry.name.endsWith('.json') + ? [relativePath] + : [] + }) + .sort() + +const expectedOutputFiles = [ + OUTPUT_FILES.fonts, + ...Object.values(OUTPUT_FILES.semantic.colorScheme), + OUTPUT_FILES.semantic.dimensions, + OUTPUT_FILES.semantic.effects, + ...Object.values(OUTPUT_FILES.components), +].sort() + +const containsColorSchemeThemeBranch = (node: TokenValue): boolean => { + if (Array.isArray(node)) return node.some(containsColorSchemeThemeBranch) + + if (!isTokenTree(node)) return false + + return Object.entries(node).some(([key, value]) => { + if ( + key === 'colorScheme' && + isTokenTree(value) && + ('light' in value || 'dark' in value) + ) { + return true + } + + return containsColorSchemeThemeBranch(value) + }) +} + +describe('token compiler', () => { + describe('normalizeEasing', () => { + test.each([ + { + name: 'linear', + value: 'linear', + expected: { x1: 0, y1: 0, x2: 1, y2: 1 }, + }, + { + name: 'cubic-bezier', + value: 'cubic-bezier(0.2, 0, 0, 1)', + expected: { x1: 0.2, y1: 0, x2: 0, y2: 1 }, + }, + { + name: 'spring с y больше единицы', + value: 'cubic-bezier(0.34, 1.56, 0.64, 1)', + expected: { x1: 0.34, y1: 1.56, x2: 0.64, y2: 1 }, + }, + ])('$name преобразуется в коэффициенты', ({ value, expected }) => { + expect(normalizeEasing(value)).toStrictEqual(expected) + }) + + test('отклоняет неподдерживаемый формат', () => { + expect(() => normalizeEasing('ease-in')).toThrow('Unsupported easing') + }) + + test('отклоняет объект вместо easing-строки при нормализации дерева', () => { + expect(() => + normalizeTree( + { + effects: { + transition: { easing: { standard: { unexpected: 'value' } } }, + }, + }, + 'semantic' + ) + ).toThrow( + 'Expected easing string at "semantic.effects.transition.easing.standard"' + ) + }) + + test.each([ + { name: 'x1 меньше нуля', value: 'cubic-bezier(-0.1, 0, 1, 1)' }, + { name: 'x2 больше единицы', value: 'cubic-bezier(0, 0, 1.1, 1)' }, + ])('$name отклоняется', ({ value }) => { + expect(() => normalizeEasing(value)).toThrow( + 'Easing x coordinates must be between 0 and 1' + ) + }) + }) + + describe('convertUnit', () => { + test.each([ + { name: 'положительный rem', value: '1.5rem', expected: 24 }, + { name: 'отрицательный rem', value: '-0.5rem', expected: -8 }, + { name: 'миллисекунды', value: '150ms', expected: 150 }, + { name: 'пиксели', value: '4px', expected: 4 }, + { name: 'числовая строка', value: '0.4', expected: 0.4 }, + { name: 'строковый ноль', value: '0', expected: 0 }, + { + name: 'rem внутри составной строки', + value: 'inset 0 0 0 0.25rem #fff', + expected: 'inset 0 0 0 4px #fff', + }, + { name: 'обычная строка', value: 'auto', expected: 'auto' }, + ])('$name преобразуется в ожидаемое значение', ({ value, expected }) => { + expect(convertUnit(value)).toBe(expected) + }) + + test('отклоняет rem внутри неподдерживаемой составной строки', () => { + expect(() => convertUnit('blur(1rem)', 'semantic.effects.blur')).toThrow( + 'Unsupported composite unit value "blur(1rem)" at "semantic.effects.blur"' + ) + }) + }) + + describe('parseBoxShorthand', () => { + test.each([ + { + name: 'одно значение', + value: '8', + expected: { top: 8, right: 8, bottom: 8, left: 8 }, + }, + { + name: 'два значения', + value: '8 14', + expected: { top: 8, right: 14, bottom: 8, left: 14 }, + }, + { + name: 'три значения', + value: '8 14 10', + expected: { top: 8, right: 14, bottom: 10, left: 14 }, + }, + { + name: 'четыре значения с rem', + value: '0rem 1.5rem 0.875rem 1.5rem', + expected: { top: 0, right: 24, bottom: 14, left: 24 }, + }, + { + name: 'значения с px', + value: '4px 8px 12px 16px', + expected: { top: 4, right: 8, bottom: 12, left: 16 }, + }, + ])('$name раскрывается по правилам CSS', ({ value, expected }) => { + expect(parseBoxShorthand(value)).toStrictEqual(expected) + }) + + test.each([ + { name: 'пустая строка', value: '', message: 'Expected 1-4 box values' }, + { + name: 'пять значений', + value: '1 2 3 4 5', + message: 'Expected 1-4 box values', + }, + { + name: 'неподдерживаемая единица', + value: '1em 2em', + message: 'Invalid box value', + }, + { + name: 'нечисловое значение', + value: 'auto', + message: 'Invalid box value', + }, + ])('$name отклоняется', ({ value, message }) => { + expect(() => parseBoxShorthand(value)).toThrow(message) + }) + }) + + describe('normalizeTree', () => { + test('одинаковые радиусы сворачивает в одно значение', () => { + expect( + normalizeTree({ borderRadius: '0rem 0rem 0rem 0rem' }) + ).toStrictEqual({ borderRadius: 0 }) + }) + + test('разные радиусы сохраняет отдельными значениями', () => { + expect( + normalizeTree({ borderRadius: '0.25rem 0.5rem 0.75rem 1rem' }) + ).toStrictEqual({ + borderRadius: { left: 16, top: 4, right: 8, bottom: 12 }, + }) + }) + + test('преобразует числовые строки, включая fontWeight', () => { + expect( + normalizeTree({ depth: '1000', opacity: '0.4', fontWeight: '600' }) + ).toStrictEqual({ depth: 1000, opacity: 0.4, fontWeight: 600 }) + }) + }) + + describe('assertValidOutput', () => { + test.each(['4px', '0.4', 'blur(4px)'])( + 'отклоняет непреобразованное значение %s', + (value) => { + expect(() => assertValidOutput(value, 'semantic.value')).toThrow( + 'Unconverted token' + ) + } + ) + + test('разрешает boxShadow', () => { + expect(() => + assertValidOutput('0 0 4px #000', 'components.button.shadow') + ).not.toThrow() + }) + }) + + test('разделяет один источник на темы, разрешает ссылки и нормализует значения', () => { + const source: TokenTree = { + primitive: { + fonts: { + fontFamily: { base: 'Noto Sans' }, + fontWeight: { regular: '400' }, + fontSize: { base: '1rem' }, + }, + sizing: { small: '0.5rem', base: '1rem' }, + motion: { fast: '150ms' }, + }, + semantic: { + dimension: { + spacing: { small: '{sizing.small}', base: '{sizing.base}' }, + }, + effects: { duration: '{motion.fast}' }, + colorScheme: { + light: { color: { text: '#111111' } }, + dark: { color: { text: '#eeeeee' } }, + }, + }, + components: { + demo: { + extend: { + padding: '{dimension.spacing.small} {dimension.spacing.base}', + }, + root: { + margin: '{dimension.spacing.base}', + duration: '{effects.duration}', + borderWidth: '0rem 0rem {dimension.spacing.small} 0rem', + }, + icon: { size: '{dimension.spacing.base}' }, + colorScheme: { + light: { color: '{color.text}' }, + dark: { color: '{color.text}' }, + }, + }, + }, + } + + const compiled = compileTokens(source) + + expect(compiled).not.toHaveProperty('primitive') + expect(compiled.fonts).toStrictEqual({ + fontFamily: { base: 'Noto Sans' }, + fontWeight: { regular: 400 }, + fontSize: { base: 16 }, + }) + expect(compiled.semantic).toStrictEqual({ + colorScheme: { + light: { color: { text: '#111111' } }, + dark: { color: { text: '#eeeeee' } }, + }, + dimension: { spacing: { small: 8, base: 16 } }, + effects: { duration: 150 }, + }) + expect(compiled.components.light).toStrictEqual({ + demo: { + extend: { + paddingTop: 8, + paddingRight: 16, + paddingBottom: 8, + paddingLeft: 16, + }, + root: { + margin: 16, + duration: 150, + borderTopWidth: 0, + borderRightWidth: 0, + borderBottomWidth: 8, + borderLeftWidth: 0, + }, + icon: { size: 16 }, + colorScheme: { color: '#111111' }, + }, + }) + expect(compiled.components.dark.demo).toHaveProperty( + 'colorScheme.color', + '#eeeeee' + ) + expect(compiled.components.light.demo).not.toHaveProperty( + 'colorScheme.light' + ) + expect(compiled.components.dark.demo).not.toHaveProperty('colorScheme.dark') + }) + + test('сохраняет focusRing и нормализует его значения', () => { + const source: TokenTree = { + primitive: { + fonts: {}, + sizing: { focusRing: '0.25rem' }, + colors: { focus: '#d4fedc' }, + }, + semantic: { + dimension: { + focusRing: { width: '{sizing.focusRing}', offset: '0px' }, + }, + effects: { + focusRing: { + shadow: 'inset 0 0 0 {dimension.focusRing.width} {colors.focus}', + }, + }, + colorScheme: { light: {}, dark: {} }, + }, + components: { + demo: { + root: { + focusRing: { + width: '{dimension.focusRing.width}', + style: 'none', + color: '{colors.focus}', + offset: '{dimension.focusRing.offset}', + shadow: '{effects.focusRing.shadow}', + }, + }, + }, + }, + } + + const compiled = compileTokens(source) + + expect(compiled.semantic).toStrictEqual({ + colorScheme: { light: {}, dark: {} }, + dimension: { focusRing: { width: 4, offset: 0 } }, + effects: { focusRing: { shadow: 'inset 0 0 0 4px #d4fedc' } }, + }) + expect(compiled.components.light.demo).toStrictEqual({ + root: { + focusRing: { + width: 4, + style: 'none', + color: '#d4fedc', + offset: 0, + shadow: 'inset 0 0 0 4px #d4fedc', + }, + }, + }) + expect(compiled.components.dark).toStrictEqual(compiled.components.light) + }) + + test('отклоняет источник без одной из цветовых схем semantic', () => { + const source: TokenTree = { + primitive: { fonts: {} }, + semantic: { colorScheme: { light: {} } }, + components: {}, + } + + expect(() => compileTokens(source)).toThrow( + 'Expected an object at "semantic.colorScheme.dark"' + ) + }) + + test('отклоняет общие semantic-токены, зависящие от цветовой схемы', () => { + const source: TokenTree = { + primitive: { fonts: {} }, + semantic: { + colorScheme: { + light: { color: { spacing: '1rem' } }, + dark: { color: { spacing: '2rem' } }, + }, + dimension: { spacing: '{color.spacing}' }, + effects: {}, + }, + components: {}, + } + + expect(() => compileTokens(source)).toThrow( + 'Semantic "dimension" tokens must not depend on colorScheme' + ) + }) + + test('отклоняет циклические ссылки', () => { + const references: TokenTree = { first: '{second}', second: '{first}' } + + expect(() => resolveReferences('{first}', references)).toThrow( + 'Circular token reference' + ) + }) +}) + +describe('production input tokens', () => { + const source = loadTokenTree(INPUT_FILE) + const compiled: CompiledTokens = compileTokens(source) + + test('использует единственный входной tokens-файл', () => { + const tokenFiles = readdirSync(INPUT_DIRECTORY) + .filter((fileName) => /\.json$/.test(fileName)) + .sort() + + expect(tokenFiles).toStrictEqual(['tokens.json']) + }) + + test('экспортирует fonts без primitive и убирает темы из colorScheme', () => { + expect(Object.keys(compiled)).toStrictEqual([ + 'fonts', + 'semantic', + 'components', + ]) + expect(compiled).not.toHaveProperty('primitive') + + const inputComponents = source.components + const lightOutputComponents = compiled.components.light + const darkOutputComponents = compiled.components.dark + + if ( + !isTokenTree(inputComponents) || + !isTokenTree(inputComponents.button) || + !isTokenTree(lightOutputComponents.button) + ) { + throw new Error('Expected component namespaces') + } + + expect(Object.keys(lightOutputComponents).sort()).toStrictEqual( + Object.keys(inputComponents).sort() + ) + expect(Object.keys(darkOutputComponents).sort()).toStrictEqual( + Object.keys(inputComponents).sort() + ) + expect(lightOutputComponents.button).toHaveProperty('extend') + expect(lightOutputComponents.button).toHaveProperty('root') + expect(lightOutputComponents.button).toHaveProperty('colorScheme') + expect(darkOutputComponents.button).toHaveProperty('colorScheme') + expect(compiled.semantic.colorScheme.light).toHaveProperty('color') + expect(compiled.semantic.colorScheme.dark).toHaveProperty('color') + expect( + [ + compiled.semantic.colorScheme.light, + compiled.semantic.colorScheme.dark, + compiled.components.light, + compiled.components.dark, + ].filter(containsColorSchemeThemeBranch) + ).toHaveLength(0) + }) + + test('собирает и нормализует primitive.fonts без цветовой схемы', () => { + expect(compiled.fonts).toHaveProperty('fontFamily.base', 'Noto Sans') + expect(compiled.fonts).toHaveProperty('fontWeight.demibold', 600) + expect(compiled.fonts).toHaveProperty('fontSize.300', 16) + expect(compiled.fonts).toHaveProperty('lineHeight.auto', 'auto') + expect(compiled.fonts).toHaveProperty('letterSpacing.400', -0.48) + }) + + test('содержит только целевые файлы', () => { + const tokenFiles = listJsonFiles(TOKENS_DIRECTORY) + + expect(tokenFiles).toStrictEqual(expectedOutputFiles) + }) + + test('не содержит неразрешённых ссылок и CSS-единиц', () => { + const serialized = JSON.stringify(compiled) + + expect(serialized).not.toMatch(/\{[a-z][^}]*\}/i) + expect(serialized).not.toMatch(/-?\d*\.?\d+(?:rem|ms)\b/) + }) + + test('преобразует animation-токены в runtime-формат', () => { + expect(compiled.semantic.effects).toHaveProperty( + 'transition.easing.linear', + { x1: 0, y1: 0, x2: 1, y2: 1 } + ) + expect(compiled.semantic.effects).toHaveProperty( + 'transition.easing.spring', + { x1: 0.34, y1: 1.56, x2: 0.64, y2: 1 } + ) + expect(compiled.semantic.effects).toHaveProperty( + 'transition.duration.200', + 180 + ) + expect(compiled.components.light).toHaveProperty( + 'button.root.transitionDuration', + 180 + ) + expect(compiled.components.dark).toHaveProperty( + 'toggleswitch.root.slideDuration', + 180 + ) + expect(JSON.stringify(compiled)).not.toMatch(/cubic-bezier\s*\(/) + }) + + test('экспортирует focusRing без изменения его структуры', () => { + expect(compiled.semantic.effects).toHaveProperty( + 'focusRing.shadow', + 'inset 0 0 0 4px #d4fedc' + ) + expect(compiled.components.light).toHaveProperty( + 'accordion.header.focusRing', + { + width: 4, + style: 'none', + color: '#d4fedc', + offset: 0, + shadow: 'inset 0 0 0 4px #d4fedc', + } + ) + }) + + test('совпадает с закоммиченными сгенерированными токенами', async () => { + await expect( + findGeneratedTokenIssues(compiled, TOKENS_DIRECTORY) + ).resolves.toStrictEqual({ missing: [], changed: [], unexpected: [] }) + }) + + test('преобразует числовые RN-значения', () => { + expect(compiled.semantic.dimension).toHaveProperty('depth.100', 1000) + expect(compiled.semantic.effects).toHaveProperty('opacity.4', 0.04) + expect(compiled.semantic.effects).toHaveProperty('blur.100', 4) + expect(compiled.components.light).toHaveProperty( + 'button.root.label.fontWeight', + 600 + ) + }) + + test('component-токены содержат выбранную схему на исходных путях', () => { + expect(compiled.components.light.accordion).toHaveProperty('root') + expect(compiled.components.light.accordion).toHaveProperty('extend') + expect(compiled.components.light.accordion).toHaveProperty( + 'colorScheme.header.background' + ) + expect(compiled.components.dark.accordion).toHaveProperty( + 'colorScheme.header.background' + ) + expect(compiled.components.light.dataview).toHaveProperty( + 'header.borderRadius', + 0 + ) + expect(compiled.components.dark.dataview).toHaveProperty( + 'footer.borderRadius', + 0 + ) + }) + + test('check находит расхождения, а generate приводит файлы к актуальному состоянию', async () => { + const temporaryDirectory = mkdtempSync(join(tmpdir(), 'token-generator-')) + const unexpectedFile = join(temporaryDirectory, 'common.json') + const preservedFile = join(temporaryDirectory, 'README.md') + const missingFile = OUTPUT_FILES.semantic.colorScheme.dark + const changedFile = OUTPUT_FILES.semantic.dimensions + + try { + await writeGeneratedTokens(compiled, temporaryDirectory) + + expect(listJsonFiles(temporaryDirectory)).toStrictEqual( + expectedOutputFiles + ) + await expect( + findGeneratedTokenIssues(compiled, temporaryDirectory) + ).resolves.toStrictEqual({ missing: [], changed: [], unexpected: [] }) + + writeFileSync(unexpectedFile, '{}\n') + writeFileSync(preservedFile, '# Generated tokens\n') + rmSync(join(temporaryDirectory, missingFile)) + const changedPath = join(temporaryDirectory, changedFile) + + writeFileSync(changedPath, JSON.stringify(loadTokenTree(changedPath))) + + await expect( + findGeneratedTokenIssues(compiled, temporaryDirectory) + ).resolves.toStrictEqual({ + missing: [missingFile], + changed: [changedFile], + unexpected: ['common.json'], + }) + expect(() => accessSync(unexpectedFile)).not.toThrow() + expect(() => accessSync(preservedFile)).not.toThrow() + + await writeGeneratedTokens(compiled, temporaryDirectory) + + await expect( + findGeneratedTokenIssues(compiled, temporaryDirectory) + ).resolves.toStrictEqual({ missing: [], changed: [], unexpected: [] }) + expect(() => accessSync(unexpectedFile)).toThrow('ENOENT') + expect(() => accessSync(preservedFile)).not.toThrow() + } finally { + rmSync(temporaryDirectory, { recursive: true, force: true }) + } + }) +}) + +describe('token generator CLI', () => { + test('распознаёт check-режим', () => { + expect(parseArgs(['--check'])).toStrictEqual({ check: true, help: false }) + }) + + test('отклоняет неизвестный аргумент', () => { + expect(() => parseArgs(['--unknown'])).toThrow( + 'Неизвестный аргумент "--unknown"' + ) + }) +}) diff --git a/scripts/token-generator/build.ts b/scripts/token-generator/build.ts new file mode 100644 index 00000000..3c8f2531 --- /dev/null +++ b/scripts/token-generator/build.ts @@ -0,0 +1,97 @@ +import { resolve, join } from 'node:path' + +import { compileTokens } from './core/compiler' +import type { CompiledTokens } from './core/types' +import { + findGeneratedTokenIssues, + type GeneratedTokenIssues, + loadTokenTree, + writeGeneratedTokens, +} from './io' + +export const DESIGN_TOKENS_DIRECTORY = resolve(__dirname, '../../design-tokens') +export const INPUT_DIRECTORY = join(DESIGN_TOKENS_DIRECTORY, 'input') +export const TOKENS_DIRECTORY = resolve(__dirname, '../../src/theme/tokens') +export const INPUT_FILE = join(INPUT_DIRECTORY, 'tokens.json') + +interface CliOptions { + check: boolean + help: boolean +} + +const HELP = `Использование: + yarn tokens:generate + yarn tokens:check + +Опции: + --check проверить актуальность сгенерированных токенов без записи + --help показать эту справку` + +export const parseArgs = (arguments_: string[]): CliOptions => { + const options: CliOptions = { check: false, help: false } + + for (const argument of arguments_) { + if (argument === '--check') options.check = true + else if (argument === '--help') options.help = true + else { + throw new Error(`Неизвестный аргумент "${argument}"`) + } + } + + return options +} + +export const compileInputTokens = (): CompiledTokens => + compileTokens(loadTokenTree(INPUT_FILE)) + +const formatTokenIssues = (issues: GeneratedTokenIssues): string => + [ + issues.missing.length > 0 + ? `Отсутствуют: ${issues.missing.join(', ')}` + : '', + issues.changed.length > 0 ? `Изменены: ${issues.changed.join(', ')}` : '', + issues.unexpected.length > 0 + ? `Лишние: ${issues.unexpected.join(', ')}` + : '', + ] + .filter(Boolean) + .join('\n') + +export const run = async (arguments_: string[]): Promise => { + const options = parseArgs(arguments_) + + if (options.help) { + console.log(HELP) + + return + } + + const compiled = compileInputTokens() + + if (options.check) { + const issues = await findGeneratedTokenIssues(compiled, TOKENS_DIRECTORY) + const issueDescription = formatTokenIssues(issues) + + if (issueDescription) { + throw new Error( + `Сгенерированные токены неактуальны:\n${issueDescription}\n` + + 'Запустите yarn tokens:generate.' + ) + } + + console.log('Сгенерированные токены актуальны.') + + return + } + + await writeGeneratedTokens(compiled, TOKENS_DIRECTORY) + console.log(`Сгенерированные токены записаны в ${TOKENS_DIRECTORY}`) +} + +if (require.main === module) { + void run(process.argv.slice(2)).catch((error: unknown) => { + const message = error instanceof Error ? error.message : String(error) + console.error(message) + process.exitCode = 1 + }) +} diff --git a/scripts/token-generator/core/compiler.ts b/scripts/token-generator/core/compiler.ts new file mode 100644 index 00000000..4dfe18c0 --- /dev/null +++ b/scripts/token-generator/core/compiler.ts @@ -0,0 +1,272 @@ +import { isDeepStrictEqual } from 'node:util' + +import { normalizeTree } from './normalization' +import { resolveReferences } from './resolution' +import { mergeTrees, resolvePath } from './tree' +import { + isTokenTree, + type CompiledTokens, + type SemanticTokens, + type ThemeTokens, + type TokenTree, + type TokenValue, +} from './types' +import { assertSameShape, assertValidOutput } from './validation' + +type ColorScheme = keyof ThemeTokens + +const compileGroup = ( + input: TokenValue, + group: 'semantic' | 'components', + scheme: 'light' | 'dark' +): TokenTree => { + const normalized = normalizeTree(input, group) + + if (!isTokenTree(normalized)) { + throw new Error( + `Expected an object at "${group}" in ${scheme} input tokens` + ) + } + + assertValidOutput(normalized, `${scheme}.${group}`) + + return normalized +} + +const getGroup = ( + source: TokenTree, + group: 'primitive' | 'semantic' | 'components' +): TokenTree => { + const value = resolvePath(source, group) + + if (!isTokenTree(value)) { + throw new Error(`Expected an object at "${group}" in input tokens`) + } + + return value +} + +const compileFonts = (primitive: TokenTree): TokenTree => { + const fonts = resolvePath(primitive, 'fonts') + + if (!isTokenTree(fonts)) { + throw new Error('Expected an object at "primitive.fonts" in input tokens') + } + + const resolvedFonts = resolveReferences(fonts, primitive, 'fonts') + const normalizedFonts = normalizeTree(resolvedFonts, 'fonts') + + if (!isTokenTree(normalizedFonts)) { + throw new Error('Expected an object at "fonts" in output tokens') + } + + assertValidOutput(normalizedFonts, 'fonts') + + return normalizedFonts +} + +const selectColorScheme = ( + group: TokenTree, + scheme: ColorScheme, + tokenPath: string +): TokenTree => { + const { colorScheme } = group + const selectedScheme = isTokenTree(colorScheme) + ? colorScheme[scheme] + : undefined + + if (!isTokenTree(selectedScheme)) { + throw new Error( + `Expected an object at "${tokenPath}.colorScheme.${scheme}"` + ) + } + + return Object.fromEntries( + Object.entries(group).map(([key, value]) => [ + key, + key === 'colorScheme' ? mergeTrees({}, selectedScheme) : value, + ]) + ) +} + +const selectComponentColorSchemes = ( + components: TokenTree, + scheme: ColorScheme +): TokenTree => + Object.fromEntries( + Object.entries(components).map(([componentName, component]) => { + if (!isTokenTree(component)) { + throw new Error(`Expected an object at "components.${componentName}"`) + } + + const { colorScheme, ...base } = component + + if (colorScheme === undefined) { + return [componentName, mergeTrees({}, base)] + } + + const selectedScheme = isTokenTree(colorScheme) + ? colorScheme[scheme] + : undefined + + if (!isTokenTree(selectedScheme)) { + throw new Error( + `Expected an object at "components.${componentName}.colorScheme.${scheme}"` + ) + } + + return [ + componentName, + Object.fromEntries( + Object.entries(component).map(([key, value]) => [ + key, + key === 'colorScheme' ? mergeTrees({}, selectedScheme) : value, + ]) + ), + ] + }) + ) + +const unwrapColorScheme = (group: TokenTree, tokenPath: string): TokenTree => { + const { colorScheme, ...base } = group + + if (!isTokenTree(colorScheme)) { + throw new Error(`Expected an object at "${tokenPath}.colorScheme"`) + } + + return mergeTrees(base, colorScheme) +} + +const createReferenceRoot = ( + primitive: TokenTree, + semantic: TokenTree +): TokenTree => { + const duplicateKeys = Object.keys(primitive).filter((key) => key in semantic) + + if (duplicateKeys.length > 0) { + throw new Error( + `Duplicate primitive and semantic namespaces: ${duplicateKeys.join(', ')}` + ) + } + + return { ...primitive, ...semantic } +} + +const compileScheme = ( + primitive: TokenTree, + semanticSource: TokenTree, + componentsSource: TokenTree, + scheme: ColorScheme +): { semantic: TokenTree; components: TokenTree } => { + const selectedSemantic = selectColorScheme(semanticSource, scheme, 'semantic') + const semanticForReferences = unwrapColorScheme(selectedSemantic, 'semantic') + const semanticReferences = createReferenceRoot( + primitive, + semanticForReferences + ) + const resolvedSemanticForReferences = resolveReferences( + semanticForReferences, + semanticReferences, + `${scheme}.semantic` + ) + const resolvedSemantic = resolveReferences( + selectedSemantic, + semanticReferences, + `${scheme}.semantic` + ) + + if ( + !isTokenTree(resolvedSemantic) || + !isTokenTree(resolvedSemanticForReferences) + ) { + throw new Error(`Expected resolved semantic tokens for "${scheme}"`) + } + + const componentReferences = createReferenceRoot( + primitive, + resolvedSemanticForReferences + ) + const selectedComponents = selectComponentColorSchemes( + componentsSource, + scheme + ) + const resolvedComponents = resolveReferences( + selectedComponents, + componentReferences, + `${scheme}.components` + ) + + return { + semantic: compileGroup(resolvedSemantic, 'semantic', scheme), + components: compileGroup(resolvedComponents, 'components', scheme), + } +} + +const getSemanticGroup = ( + semantic: TokenTree, + group: 'colorScheme' | 'dimension' | 'effects', + scheme: ColorScheme +): TokenTree => { + const value = semantic[group] + + if (!isTokenTree(value)) { + throw new Error(`Expected an object at "${scheme}.semantic.${group}"`) + } + + return value +} + +const splitSemantic = (light: TokenTree, dark: TokenTree): SemanticTokens => { + const dimension = getSemanticGroup(light, 'dimension', 'light') + const darkDimension = getSemanticGroup(dark, 'dimension', 'dark') + const effects = getSemanticGroup(light, 'effects', 'light') + const darkEffects = getSemanticGroup(dark, 'effects', 'dark') + + if (!isDeepStrictEqual(dimension, darkDimension)) { + throw new Error( + 'Semantic "dimension" tokens must not depend on colorScheme' + ) + } + + if (!isDeepStrictEqual(effects, darkEffects)) { + throw new Error('Semantic "effects" tokens must not depend on colorScheme') + } + + return { + colorScheme: { + light: getSemanticGroup(light, 'colorScheme', 'light'), + dark: getSemanticGroup(dark, 'colorScheme', 'dark'), + }, + dimension, + effects, + } +} + +export const compileTokens = (source: TokenTree): CompiledTokens => { + const primitive = getGroup(source, 'primitive') + const semanticSource = getGroup(source, 'semantic') + const componentsSource = getGroup(source, 'components') + const fonts = compileFonts(primitive) + const light = compileScheme( + primitive, + semanticSource, + componentsSource, + 'light' + ) + const dark = compileScheme( + primitive, + semanticSource, + componentsSource, + 'dark' + ) + const components = { light: light.components, dark: dark.components } + + assertSameShape(light.semantic, dark.semantic) + assertSameShape(components.light, components.dark) + + return { + fonts, + semantic: splitSemantic(light.semantic, dark.semantic), + components, + } +} diff --git a/scripts/token-generator/core/normalization.ts b/scripts/token-generator/core/normalization.ts new file mode 100644 index 00000000..ee351b77 --- /dev/null +++ b/scripts/token-generator/core/normalization.ts @@ -0,0 +1,273 @@ +import { + isTokenTree, + type BoxEdges, + type TokenPrimitive, + type TokenTree, + type TokenValue, +} from './types' + +const REM_BASE = 16 +const NUMBER_SOURCE = '[+-]?(?:\\d+(?:\\.\\d*)?|\\.\\d+)' +const NUMBER_PATTERN = /^-?\d*\.?\d+$/ +const PIXEL_PATTERN = /^-?\d*\.?\d+px$/ +const SHADOW_LENGTH_PATTERN = /^(?:0|-?\d*\.?\d+(?:rem|px))$/ +const CUBIC_BEZIER_PATTERN = new RegExp( + `^cubic-bezier\\(\\s*(${NUMBER_SOURCE})\\s*,\\s*(${NUMBER_SOURCE})\\s*,\\s*(${NUMBER_SOURCE})\\s*,\\s*(${NUMBER_SOURCE})\\s*\\)$` +) +export const BOX_PROPERTIES = ['padding', 'margin', 'borderWidth'] as const + +export type BoxProperty = (typeof BOX_PROPERTIES)[number] + +export const isEasingTokenPath = (tokenPath: string): boolean => + /\.effects\.transition\.easing\.[^.]+$/.test(tokenPath) + +export const normalizeEasing = ( + value: TokenValue, + tokenPath = 'semantic.effects.transition.easing' +): TokenTree => { + if (typeof value !== 'string') { + throw new Error(`Expected easing string at "${tokenPath}"`) + } + + const easing = value.trim() + + if (easing === 'linear') return { x1: 0, y1: 0, x2: 1, y2: 1 } + + const match = CUBIC_BEZIER_PATTERN.exec(easing) + + if (!match) { + throw new Error(`Unsupported easing "${value}" at "${tokenPath}"`) + } + + const [, x1Source, y1Source, x2Source, y2Source] = match + const coordinates = [x1Source, y1Source, x2Source, y2Source].map(Number) + const [x1, y1, x2, y2] = coordinates + + if ( + coordinates.some((coordinate) => !Number.isFinite(coordinate)) || + x1 === undefined || + y1 === undefined || + x2 === undefined || + y2 === undefined + ) { + throw new Error(`Invalid easing "${value}" at "${tokenPath}"`) + } + + if (x1 < 0 || x1 > 1 || x2 < 0 || x2 > 1) { + throw new Error( + `Easing x coordinates must be between 0 and 1 at "${tokenPath}"` + ) + } + + return { x1, y1, x2, y2 } +} + +export const isBoxShadowValue = (value: string): boolean => { + const parts = value + .trim() + .split(/\s+(?![^(]*\))/) + .filter(Boolean) + const insetIndex = parts.indexOf('inset') + + if (insetIndex > 0 && insetIndex < parts.length - 1) return false + + const shadowParts = parts.filter((_, index) => index !== insetIndex) + const colorIndexes = shadowParts + .map((part, index) => (SHADOW_LENGTH_PATTERN.test(part) ? -1 : index)) + .filter((index) => index !== -1) + + if (colorIndexes.length !== 1) return false + + const [colorIndex] = colorIndexes + + if (colorIndex !== 0 && colorIndex !== shadowParts.length - 1) return false + + const lengths = shadowParts.filter((_, index) => index !== colorIndex) + + return ( + lengths.length >= 2 && + lengths.length <= 4 && + lengths.every((part) => SHADOW_LENGTH_PATTERN.test(part)) + ) +} + +export const convertUnit = ( + value: TokenPrimitive, + tokenPath = 'root' +): TokenPrimitive => { + if (typeof value !== 'string') return value + + const isRem = /^-?\d*\.?\d+rem$/.test(value) + + if (isRem) return Number(value.slice(0, -3)) * REM_BASE + + const isMilliseconds = /^-?\d*\.?\d+ms$/.test(value) + + if (isMilliseconds) return Number(value.slice(0, -2)) + + if (PIXEL_PATTERN.test(value)) return Number(value.slice(0, -2)) + + if (NUMBER_PATTERN.test(value)) return Number(value) + + const converted = value.replace(/-?\d*\.?\d+rem\b/g, (token) => { + const pixels = Number(token.slice(0, -3)) * REM_BASE + + return `${pixels}px` + }) + + if (converted !== value && !isBoxShadowValue(converted)) { + throw new Error( + `Unsupported composite unit value "${value}" at "${tokenPath}"` + ) + } + + return converted +} + +const parseBoxPart = (part: string, tokenPath: string): number => { + if (!/^-?\d*\.?\d+(?:rem|px)?$/.test(part)) { + throw new Error(`Invalid box value "${part}" at "${tokenPath}"`) + } + + const unit = part.endsWith('rem') ? 'rem' : part.endsWith('px') ? 'px' : '' + const value = Number(unit ? part.slice(0, -unit.length) : part) + const isRem = unit === 'rem' + const normalized = isRem ? value * REM_BASE : value + + if (!Number.isFinite(normalized)) { + throw new Error(`Non-finite box value "${part}" at "${tokenPath}"`) + } + + return normalized +} + +export const parseBoxShorthand = ( + value: string | number, + tokenPath = 'box' +): BoxEdges => { + const parts = + typeof value === 'number' + ? [value] + : value + .trim() + .split(/\s+/) + .filter(Boolean) + .map((part) => parseBoxPart(part, tokenPath)) + + if (parts.length === 0 || parts.length > 4) { + throw new Error(`Expected 1-4 box values at "${tokenPath}"`) + } + + const [top, right = top, bottom = top, left = right] = parts + + if ( + top === undefined || + right === undefined || + bottom === undefined || + left === undefined + ) { + throw new Error(`Unable to expand box value at "${tokenPath}"`) + } + + return { top, right, bottom, left } +} + +const normalizeBorderRadius = ( + value: string | number, + tokenPath: string +): number | TokenTree => { + const corners = parseBoxShorthand(value, tokenPath) + const values = Object.values(corners) + + if (values.every((corner) => corner === corners.top)) { + return corners.top + } + + return { + left: corners.left, + top: corners.top, + right: corners.right, + bottom: corners.bottom, + } +} + +const edgePropertyName = ( + property: BoxProperty, + edge: keyof BoxEdges +): string => { + const capitalizedEdge = `${edge[0].toUpperCase()}${edge.slice(1)}` + + return property === 'borderWidth' + ? `border${capitalizedEdge}Width` + : `${property}${capitalizedEdge}` +} + +const assignBoxEdges = ( + target: TokenTree, + source: TokenTree, + property: BoxProperty, + edges: BoxEdges, + tokenPath: string +): void => { + for (const [edge, edgeValue] of Object.entries(edges) as Array< + [keyof BoxEdges, number] + >) { + const edgeKey = edgePropertyName(property, edge) + + if (edgeKey in source || edgeKey in target) { + throw new Error(`Duplicate generated token "${tokenPath}.${edgeKey}"`) + } + + target[edgeKey] = edgeValue + } +} + +export const normalizeTree = ( + node: TokenValue, + tokenPath = 'root' +): TokenValue => { + if (isEasingTokenPath(tokenPath)) { + return normalizeEasing(node, tokenPath) + } + + if (Array.isArray(node)) { + return node.map((item, index) => + normalizeTree(item, `${tokenPath}.${index}`) + ) + } + + if (!isTokenTree(node)) return convertUnit(node, tokenPath) + + const normalized: TokenTree = {} + + for (const [key, value] of Object.entries(node)) { + const currentPath = `${tokenPath}.${key}` + const boxProperty = BOX_PROPERTIES.find((property) => property === key) + + if ( + key === 'borderRadius' && + (typeof value === 'string' || typeof value === 'number') + ) { + normalized[key] = normalizeBorderRadius(value, currentPath) + } else if ( + boxProperty && + (typeof value === 'string' || typeof value === 'number') + ) { + const edges = parseBoxShorthand(value, currentPath) + const partCount = + typeof value === 'number' + ? 1 + : value.trim().split(/\s+/).filter(Boolean).length + + if (partCount === 1) { + normalized[key] = edges.top + } else { + assignBoxEdges(normalized, node, boxProperty, edges, currentPath) + } + } else { + normalized[key] = normalizeTree(value, currentPath) + } + } + + return normalized +} diff --git a/scripts/token-generator/core/resolution.ts b/scripts/token-generator/core/resolution.ts new file mode 100644 index 00000000..42078ff6 --- /dev/null +++ b/scripts/token-generator/core/resolution.ts @@ -0,0 +1,99 @@ +import { resolvePath } from './tree' +import { isTokenTree, type TokenTree, type TokenValue } from './types' + +const EXACT_REFERENCE_PATTERN = /^\{[^{}]+\}$/ +const REFERENCE_PATTERN = /\{[^{}]+\}/g + +const stringifyReference = ( + value: TokenValue, + reference: string, + tokenPath: string +): string => { + if (value === null || Array.isArray(value) || isTokenTree(value)) { + throw new Error( + `Reference "${reference}" at "${tokenPath}" cannot be embedded in a string` + ) + } + + return String(value) +} + +export const resolveReferences = ( + node: TokenValue, + referenceRoot: TokenTree, + tokenPath = 'root' +): TokenValue => { + const cache = new Map() + + const resolveReference = ( + reference: string, + sourcePath: string, + stack: string[] + ): TokenValue => { + if (stack.includes(reference)) { + throw new Error( + `Circular token reference at "${sourcePath}": ${[ + ...stack, + reference, + ].join(' -> ')}` + ) + } + + const cached = cache.get(reference) + + if (cached !== undefined) return cached + + const referencedValue = resolvePath( + referenceRoot, + reference, + `references for "${sourcePath}"` + ) + const resolved = resolveNode(referencedValue, reference, [ + ...stack, + reference, + ]) + + cache.set(reference, resolved) + + return resolved + } + + const resolveNode = ( + value: TokenValue, + currentPath: string, + stack: string[] + ): TokenValue => { + if (Array.isArray(value)) { + return value.map((item, index) => + resolveNode(item, `${currentPath}.${index}`, stack) + ) + } + + if (isTokenTree(value)) { + return Object.fromEntries( + Object.entries(value).map(([key, nestedValue]) => [ + key, + resolveNode(nestedValue, `${currentPath}.${key}`, stack), + ]) + ) + } + + if (typeof value !== 'string') return value + + if (EXACT_REFERENCE_PATTERN.test(value)) { + return resolveReference(value.slice(1, -1), currentPath, stack) + } + + return value.replace(REFERENCE_PATTERN, (token) => { + const reference = token.slice(1, -1) + + return stringifyReference( + resolveReference(reference, currentPath, stack), + reference, + currentPath + ) + }) + } + + return resolveNode(node, tokenPath, []) +} diff --git a/scripts/token-generator/core/tree.ts b/scripts/token-generator/core/tree.ts new file mode 100644 index 00000000..e8141baa --- /dev/null +++ b/scripts/token-generator/core/tree.ts @@ -0,0 +1,49 @@ +import { isTokenTree, type TokenTree, type TokenValue } from './types' + +const cloneValue = (value: TokenValue): TokenValue => { + if (Array.isArray(value)) return value.map(cloneValue) + + if (isTokenTree(value)) { + return Object.fromEntries( + Object.entries(value).map(([key, nestedValue]) => [ + key, + cloneValue(nestedValue), + ]) + ) + } + + return value +} + +export const mergeTrees = (base: TokenTree, override: TokenTree): TokenTree => { + const result = cloneValue(base) as TokenTree + + for (const [key, value] of Object.entries(override)) { + const current = result[key] + + result[key] = + isTokenTree(current) && isTokenTree(value) + ? mergeTrees(current, value) + : cloneValue(value) + } + + return result +} + +export const resolvePath = ( + source: TokenTree, + tokenPath: string, + context = 'input tokens' +): TokenValue => { + let current: TokenValue = source + + for (const segment of tokenPath.split('.')) { + if (!isTokenTree(current) || !(segment in current)) { + throw new Error(`Missing "${tokenPath}" in ${context}`) + } + + current = current[segment] + } + + return current +} diff --git a/scripts/token-generator/core/types.ts b/scripts/token-generator/core/types.ts new file mode 100644 index 00000000..89522e41 --- /dev/null +++ b/scripts/token-generator/core/types.ts @@ -0,0 +1,33 @@ +export type TokenPrimitive = string | number | boolean | null +export type TokenValue = TokenPrimitive | TokenTree | TokenValue[] + +export interface TokenTree { + [key: string]: TokenValue +} + +export interface BoxEdges { + top: number + right: number + bottom: number + left: number +} + +export interface CompiledTokens { + fonts: TokenTree + semantic: SemanticTokens + components: ThemeTokens +} + +export interface SemanticTokens { + colorScheme: ThemeTokens + dimension: TokenTree + effects: TokenTree +} + +export interface ThemeTokens { + light: TokenTree + dark: TokenTree +} + +export const isTokenTree = (value: unknown): value is TokenTree => + typeof value === 'object' && value !== null && !Array.isArray(value) diff --git a/scripts/token-generator/core/validation.ts b/scripts/token-generator/core/validation.ts new file mode 100644 index 00000000..d93dcdec --- /dev/null +++ b/scripts/token-generator/core/validation.ts @@ -0,0 +1,97 @@ +import { + BOX_PROPERTIES, + isEasingTokenPath, + isBoxShadowValue, + type BoxProperty, +} from './normalization' +import { isTokenTree, type TokenTree, type TokenValue } from './types' + +const REFERENCE_PATTERN = /\{[^}]+\}/ +const UNCONVERTED_UNIT_PATTERN = /-?\d*\.?\d+(?:rem|ms)\b/ +const PIXEL_PATTERN = /-?\d*\.?\d+px\b/ +const NUMERIC_STRING_PATTERN = /^-?\d*\.?\d+$/ +const CUBIC_BEZIER_PATTERN = /cubic-bezier\s*\(/ + +export const assertValidOutput = ( + node: TokenValue, + tokenPath: string +): void => { + if (Array.isArray(node)) { + node.forEach((item, index) => + assertValidOutput(item, `${tokenPath}.${index}`) + ) + + return + } + + if (isTokenTree(node)) { + for (const [key, value] of Object.entries(node)) { + if ( + (BOX_PROPERTIES.includes(key as BoxProperty) || + key === 'borderRadius') && + typeof value === 'string' + ) { + throw new Error(`Unconverted box shorthand at "${tokenPath}.${key}"`) + } + + assertValidOutput(value, `${tokenPath}.${key}`) + } + + return + } + + if (typeof node === 'number' && !Number.isFinite(node)) { + throw new Error(`Non-finite number at "${tokenPath}"`) + } + + if (typeof node === 'string') { + const hasUnconvertedValue = + REFERENCE_PATTERN.test(node) || + UNCONVERTED_UNIT_PATTERN.test(node) || + (PIXEL_PATTERN.test(node) && !isBoxShadowValue(node)) || + NUMERIC_STRING_PATTERN.test(node) || + CUBIC_BEZIER_PATTERN.test(node) || + (node === 'linear' && isEasingTokenPath(tokenPath)) + + if (hasUnconvertedValue) { + throw new Error(`Unconverted token "${node}" at "${tokenPath}"`) + } + } +} + +const collectShape = ( + node: TokenValue, + tokenPath = 'root', + shape: string[] = [] +): string[] => { + if (Array.isArray(node)) { + shape.push(`${tokenPath}:array`) + node.forEach((item, index) => + collectShape(item, `${tokenPath}.${index}`, shape) + ) + + return shape + } + + if (isTokenTree(node)) { + shape.push(`${tokenPath}:object`) + Object.entries(node).forEach(([key, value]) => + collectShape(value, `${tokenPath}.${key}`, shape) + ) + + return shape + } + + shape.push(`${tokenPath}:${node === null ? 'null' : typeof node}`) + + return shape +} + +export const assertSameShape = (light: TokenTree, dark: TokenTree): void => { + const lightShape = collectShape(light).sort() + const darkShape = collectShape(dark).sort() + + if (JSON.stringify(lightShape) !== JSON.stringify(darkShape)) { + throw new Error('Light and dark runtime tokens have different shapes') + } +} diff --git a/scripts/token-generator/io.ts b/scripts/token-generator/io.ts new file mode 100644 index 00000000..63974c4b --- /dev/null +++ b/scripts/token-generator/io.ts @@ -0,0 +1,160 @@ +import { + readFileSync, + readdirSync, + mkdirSync, + writeFileSync, + renameSync, + existsSync, + unlinkSync, +} from 'node:fs' +import { dirname, join } from 'node:path' + +import { format, resolveConfig, type Options } from 'prettier' + +import { isTokenTree, type CompiledTokens, type TokenTree } from './core/types' + +export const OUTPUT_FILES = { + fonts: 'fonts.json', + semantic: { + colorScheme: { + light: join('semantic', 'colorScheme', 'light.json'), + dark: join('semantic', 'colorScheme', 'dark.json'), + }, + dimensions: join('semantic', 'dimensions.json'), + effects: join('semantic', 'effects.json'), + }, + components: { + light: join('components', 'light.json'), + dark: join('components', 'dark.json'), + }, +} as const + +export const parseTokenTree = ( + contents: string, + filePath: string +): TokenTree => { + const parsed: unknown = JSON.parse(contents) + + if (!isTokenTree(parsed)) { + throw new Error(`Expected an object in "${filePath}"`) + } + + return parsed +} + +export const loadTokenTree = (filePath: string): TokenTree => + parseTokenTree(readFileSync(filePath, 'utf8'), filePath) + +export const renderJson = ( + value: TokenTree, + options: Options = {} +): Promise => + format(JSON.stringify(value), { ...options, parser: 'json' }) + +const outputEntries = ( + compiled: CompiledTokens +): Array<[string, TokenTree]> => [ + [OUTPUT_FILES.fonts, compiled.fonts], + [ + OUTPUT_FILES.semantic.colorScheme.light, + compiled.semantic.colorScheme.light, + ], + [OUTPUT_FILES.semantic.colorScheme.dark, compiled.semantic.colorScheme.dark], + [OUTPUT_FILES.semantic.dimensions, compiled.semantic.dimension], + [OUTPUT_FILES.semantic.effects, compiled.semantic.effects], + [OUTPUT_FILES.components.light, compiled.components.light], + [OUTPUT_FILES.components.dark, compiled.components.dark], +] + +const renderOutputEntries = async ( + compiled: CompiledTokens, + outputDirectory: string +): Promise> => { + const options = + (await resolveConfig(join(outputDirectory, OUTPUT_FILES.fonts))) ?? {} + + return Promise.all( + outputEntries(compiled).map(async ([fileName, value]) => [ + fileName, + await renderJson(value, options), + ]) + ) +} + +export const writeGeneratedTokens = async ( + compiled: CompiledTokens, + outputDirectory: string +): Promise => { + const entries = await renderOutputEntries(compiled, outputDirectory) + + mkdirSync(outputDirectory, { recursive: true }) + + const expectedFiles = new Set(entries.map(([fileName]) => fileName)) + + for (const fileName of findJsonFiles(outputDirectory)) { + if (!expectedFiles.has(fileName)) { + unlinkSync(join(outputDirectory, fileName)) + } + } + + for (const [fileName, contents] of entries) { + const outputPath = join(outputDirectory, fileName) + const temporaryPath = `${outputPath}.tmp` + + mkdirSync(dirname(outputPath), { recursive: true }) + writeFileSync(temporaryPath, contents) + renameSync(temporaryPath, outputPath) + } +} + +const findJsonFiles = (directory: string, prefix = ''): string[] => { + if (!existsSync(directory)) return [] + + return readdirSync(directory, { withFileTypes: true }) + .flatMap((entry) => { + const relativePath = join(prefix, entry.name) + + if (entry.isDirectory()) { + return findJsonFiles(join(directory, entry.name), relativePath) + } + + return entry.isFile() && entry.name.endsWith('.json') + ? [relativePath] + : [] + }) + .sort() +} + +export interface GeneratedTokenIssues { + missing: string[] + changed: string[] + unexpected: string[] +} + +export const findGeneratedTokenIssues = async ( + compiled: CompiledTokens, + outputDirectory: string +): Promise => { + const entries = await renderOutputEntries(compiled, outputDirectory) + const expectedFiles = new Set(entries.map(([fileName]) => fileName)) + const missing: string[] = [] + const changed: string[] = [] + + for (const [fileName, contents] of entries) { + const outputPath = join(outputDirectory, fileName) + + if (existsSync(outputPath)) { + if (readFileSync(outputPath, 'utf8') !== contents) { + changed.push(fileName) + } + } else { + missing.push(fileName) + } + } + + const unexpected = findJsonFiles(outputDirectory).filter( + (fileName) => !expectedFiles.has(fileName) + ) + + return { missing, changed, unexpected } +} diff --git a/scripts/token-generator/tsconfig.json b/scripts/token-generator/tsconfig.json new file mode 100644 index 00000000..e2005382 --- /dev/null +++ b/scripts/token-generator/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "module": "NodeNext", + "moduleResolution": "NodeNext", + "noEmit": true, + "types": ["jest", "node"] + }, + "include": ["**/*.ts"], + "exclude": [] +} diff --git a/src/index.ts b/src/index.ts index 0a2d5231..12678ece 100644 --- a/src/index.ts +++ b/src/index.ts @@ -8,7 +8,11 @@ export { ThemeVariant, darkTheme, lightTheme, + semanticTokens, + toEasing, + type SemanticTokens, type ThemeType, + type EasingToken, type FontsConfig, type FontsConfigType, type ThemeContextProviderProps, diff --git a/src/theme/__tests__/ThemeContext.test.tsx b/src/theme/__tests__/ThemeContext.test.tsx index ed58df0e..71425de8 100644 --- a/src/theme/__tests__/ThemeContext.test.tsx +++ b/src/theme/__tests__/ThemeContext.test.tsx @@ -4,7 +4,13 @@ import { Text } from 'react-native' import { UnistylesRuntime } from 'react-native-unistyles' import { ThemeContextProvider } from '../ThemeContext' +import { darkTheme } from '../darkTheme' import { lightTheme } from '../lightTheme' +import { semanticTokens } from '../tokens' +import darkSemanticColorSchemeTokens from '../tokens/semantic/colorScheme/dark.json' +import lightSemanticColorSchemeTokens from '../tokens/semantic/colorScheme/light.json' +import semanticDimensions from '../tokens/semantic/dimensions.json' +import semanticEffects from '../tokens/semantic/effects.json' import { ThemeVariant } from '../types' describe('ThemeContextProvider', () => { @@ -66,4 +72,21 @@ describe('ThemeContextProvider', () => { expect(UnistylesRuntime.updateTheme).not.toHaveBeenCalled() }) + + test('каждая тема содержит только соответствующую цветовую схему', () => { + expect(lightTheme.semantic.colorScheme).toBe(lightSemanticColorSchemeTokens) + expect(darkTheme.semantic.colorScheme).toBe(darkSemanticColorSchemeTokens) + expect(lightTheme.semantic).not.toHaveProperty('dimension') + expect(lightTheme.semantic).not.toHaveProperty('effects') + }) + + test('общие semantic-токены не зависят от темы', () => { + expect(semanticTokens.dimension).toBe(semanticDimensions) + expect(semanticTokens.effects).toBe(semanticEffects) + }) + + test('component-токены не входят в публичные темы', () => { + expect(lightTheme).not.toHaveProperty('components') + expect(darkTheme).not.toHaveProperty('components') + }) }) diff --git a/src/theme/__tests__/tokenAdapters.test.ts b/src/theme/__tests__/tokenAdapters.test.ts new file mode 100644 index 00000000..f11c67b4 --- /dev/null +++ b/src/theme/__tests__/tokenAdapters.test.ts @@ -0,0 +1,11 @@ +import { toEasing } from '../tokenAdapters' + +describe('toEasing', () => { + test('создаёт Reanimated easing из коэффициентов токена', () => { + const easing = toEasing({ x1: 0, y1: 0, x2: 1, y2: 1 }).factory() + + expect(easing(0)).toBe(0) + expect(easing(0.5)).toBeCloseTo(0.5) + expect(easing(1)).toBe(1) + }) +}) diff --git a/src/theme/darkTheme.ts b/src/theme/darkTheme.ts index 1f52f8ed..bbc330fe 100644 --- a/src/theme/darkTheme.ts +++ b/src/theme/darkTheme.ts @@ -3,9 +3,11 @@ import { ModalSize } from './assets/ModalSize' import { customDark } from './assets/customDark' import darkThemeAssets from './assets/themeDark.json' import { commonTheme } from './commonTheme' +import darkSemanticColorSchemeTokens from './tokens/semantic/colorScheme/dark.json' import type { ThemeType } from './types' export const darkTheme: ThemeType = { + semantic: { colorScheme: darkSemanticColorSchemeTokens }, theme: { ...darkThemeAssets, InputSize, ModalSize, custom: customDark }, ...commonTheme, fonts: { primary: 'TT Fellows', secondary: 'Noto Sans' }, diff --git a/src/theme/index.ts b/src/theme/index.ts index f1312be7..4266d324 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -1,5 +1,7 @@ export { darkTheme } from './darkTheme' export { lightTheme } from './lightTheme' +export { toEasing, type EasingToken } from './tokenAdapters' +export { semanticTokens, type SemanticTokens } from './tokens' export { ThemeContext, ThemeContextProvider, diff --git a/src/theme/lightTheme.ts b/src/theme/lightTheme.ts index cc47c3be..e3c80bfb 100644 --- a/src/theme/lightTheme.ts +++ b/src/theme/lightTheme.ts @@ -3,9 +3,11 @@ import { ModalSize } from './assets/ModalSize' import { customLight } from './assets/customLight' import lightThemeAssets from './assets/themeLight.json' import { commonTheme } from './commonTheme' +import lightSemanticColorSchemeTokens from './tokens/semantic/colorScheme/light.json' import type { ThemeType } from './types' export const lightTheme: ThemeType = { + semantic: { colorScheme: lightSemanticColorSchemeTokens }, theme: { ...lightThemeAssets, InputSize, ModalSize, custom: customLight }, ...commonTheme, fonts: { primary: 'TT Fellows', secondary: 'Noto Sans' }, diff --git a/src/theme/tokenAdapters.ts b/src/theme/tokenAdapters.ts new file mode 100644 index 00000000..855e15e8 --- /dev/null +++ b/src/theme/tokenAdapters.ts @@ -0,0 +1,15 @@ +import { Easing, type EasingFunctionFactory } from 'react-native-reanimated' + +export interface EasingToken { + readonly x1: number + readonly y1: number + readonly x2: number + readonly y2: number +} + +export const toEasing = ({ + x1, + y1, + x2, + y2, +}: EasingToken): EasingFunctionFactory => Easing.bezier(x1, y1, x2, y2) diff --git a/src/theme/tokens/README.md b/src/theme/tokens/README.md new file mode 100644 index 00000000..6547d0fb --- /dev/null +++ b/src/theme/tokens/README.md @@ -0,0 +1,23 @@ +# Сгенерированные токены + +В `ThemeType.semantic` подключается только выбранный `colorScheme`. Общие +`dimension` и `effects` экспортируются как статический `semanticTokens`, поэтому +не участвуют в переключении темы. `components` хранит внутренние токены +компонентов и не входит в темы или публичные экспорты. `fonts.json` содержит +общие для цветовых схем токены из `primitive.fonts`, но пока не подключён к теме +и не экспортируется из библиотеки. Всё генерируется из +`design-tokens/input/tokens.json` и не редактируется вручную. + +Подробности: [генератор токенов](../../../scripts/token-generator/README.md). + +`focusRing` сохраняет структуру входных токенов. При `style: "none"` компонент +не применяет `width`, `color` и `offset` как outline-свойства, но может +использовать независимый `shadow` как `boxShadow`. + +Для передачи easing в Reanimated используйте адаптер: + +```ts +import { semanticTokens, toEasing } from '@cdek-it/react-native-ui-kit' + +const easing = toEasing(semanticTokens.effects.transition.easing.standard) +``` diff --git a/src/theme/tokens/components/dark.json b/src/theme/tokens/components/dark.json new file mode 100644 index 00000000..3bef7b42 --- /dev/null +++ b/src/theme/tokens/components/dark.json @@ -0,0 +1,2920 @@ +{ + "accordion": { + "extend": { "extHeader": { "iconSize": 20, "gap": 8 } }, + "colorScheme": { + "header": { + "activeBackground": "transparent", + "activeHoverBackground": "transparent", + "background": "transparent", + "hoverBackground": "transparent" + } + }, + "header": { + "color": "#ffffff", + "hoverColor": "#cecfd2", + "activeColor": "#ffffff", + "activeHoverColor": "#cecfd2", + "borderColor": "transparent", + "paddingTop": 14, + "paddingRight": 0, + "paddingBottom": 14, + "paddingLeft": 0, + "fontWeight": 700, + "borderRadius": 0, + "borderWidth": 0, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "inset 0 0 0 4px #d4fedc" + }, + "toggleIcon": { + "color": "#ffffff", + "hoverColor": "#cecfd2", + "activeColor": "#ffffff", + "activeHoverColor": "#cecfd2" + }, + "last": { "bottomBorderRadius": 0, "activeBottomBorderRadius": 0 }, + "first": { "borderWidth": 0, "topBorderRadius": 0 } + }, + "root": { "transitionDuration": 180 }, + "panel": { + "borderTopWidth": 0, + "borderRightWidth": 0, + "borderBottomWidth": 4, + "borderLeftWidth": 0, + "borderColor": "#56595f" + }, + "content": { + "borderTopWidth": 1, + "borderRightWidth": 0, + "borderBottomWidth": 0, + "borderLeftWidth": 0, + "borderColor": "transparent", + "background": "transparent", + "color": "#ffffff", + "paddingTop": 0, + "paddingRight": 24, + "paddingBottom": 14, + "paddingLeft": 24 + } + }, + "autocomplete": { + "extend": { "extOption": { "gap": 8 }, "extOptionGroup": { "gap": 8 } }, + "colorScheme": { + "chip": { "focusBackground": "#e2e2e4", "focusColor": "#2b2e33" }, + "dropdown": { + "activeBackground": "#404348", + "activeColor": "#181a1f", + "background": "#404348", + "color": "#181a1f", + "hoverBackground": "#404348", + "hoverColor": "#181a1f" + } + }, + "root": { + "background": "#404348", + "disabledBackground": "#404348", + "filledBackground": "#404348", + "filledHoverBackground": "#404348", + "filledFocusBackground": "#404348", + "borderColor": "#56595f", + "hoverBorderColor": "#77f48a", + "focusBorderColor": "#77f48a", + "invalidBorderColor": "#db3424", + "color": "#f0f0f1", + "disabledColor": "#a2a5a9", + "placeholderColor": "#a2a5a9", + "invalidPlaceholderColor": "#fbacaa", + "shadow": "none", + "paddingX": 14, + "paddingY": 14, + "borderRadius": 14, + "transitionDuration": 180, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "none" + } + }, + "overlay": { + "background": "#404348", + "borderColor": "#404348", + "borderRadius": 14, + "color": "#ffffff", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "list": { "padding": 4, "gap": 4 }, + "option": { + "focusBackground": "#2b2e33", + "selectedBackground": "#f0f0f1", + "selectedFocusBackground": "#cecfd2", + "color": "#ffffff", + "focusColor": "#ffffff", + "selectedColor": "#ffffff", + "selectedFocusColor": "#ffffff", + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 8 + }, + "optionGroup": { + "background": "#56595f", + "color": "#a2a5a9", + "fontWeight": 600, + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14 + }, + "dropdown": { + "width": 272, + "borderColor": "#56595f", + "hoverBorderColor": "#77f48a", + "activeBorderColor": "#77f48a", + "borderRadius": 14, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "none" + }, + "sm": { "width": 240 }, + "lg": { "width": 304 } + }, + "chip": { "borderRadius": 8 }, + "emptyMessage": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14 + } + }, + "avatar": { + "extend": { "borderColor": "#56595f", "circle": { "borderRadius": 1600 } }, + "root": { + "width": 32, + "height": 32, + "fontSize": 16, + "color": "#ffffff", + "background": "#44e858", + "borderRadius": 14 + }, + "icon": { "size": 16 }, + "group": { "borderColor": "#2b2e33", "offset": -12 }, + "lg": { + "width": 40, + "height": 40, + "fontSize": 16, + "icon": { "size": 16 }, + "group": { "offset": -12 } + }, + "xl": { + "width": 56, + "height": 56, + "icon": { "size": 24 }, + "group": { "offset": -24 }, + "fontSize": 16 + } + }, + "badge": { + "extend": { + "extDot": { + "success": { "background": "#1dc831" }, + "info": { "background": "#1e76cd" }, + "warn": { "background": "#dc9710" }, + "danger": { "background": "#db3424" }, + "lg": { "size": 12 }, + "xlg": { "size": 16 } + }, + "ext": { "padding": 0 } + }, + "colorScheme": { + "contrast": { "background": "#2b2e33", "color": "#ffffff" }, + "danger": { "background": "#8d2218", "color": "#fff0f0" }, + "info": { "background": "#18538d", "color": "#f0f9ff" }, + "primary": { "background": "#44e858", "color": "#2b2e33" }, + "secondary": { "background": "#2b2e33", "color": "#ffffff" }, + "success": { "background": "#aafbb7", "color": "#f0fff3" }, + "warn": { "background": "#9d6d0e", "color": "#fff9f0" } + }, + "root": { + "borderRadius": 8, + "padding": 8, + "fontSize": 12, + "fontWeight": 400, + "minWidth": 24, + "height": 24 + }, + "dot": { "size": 8 }, + "sm": { "fontSize": 12, "minWidth": 0, "height": 0 }, + "lg": { "fontSize": 12, "minWidth": 28, "height": 28 }, + "xl": { "fontSize": 12, "minWidth": 32, "height": 32 } + }, + "breadcrumb": { + "extend": { + "hoverBackground": "#2b2e33", + "iconSize": 20, + "extItem": { "padding": 4 } + }, + "root": { + "padding": 0, + "background": "transparent", + "gap": 0, + "transitionDuration": 180 + }, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "item": { + "color": "#ffffff", + "hoverColor": "#cecfd2", + "borderRadius": 4, + "gap": 8, + "icon": { "color": "#ffffff", "hoverColor": "#cecfd2" }, + "focusRing": { + "color": "#d4fedc", + "offset": 0, + "shadow": "none", + "style": "none", + "width": 4 + } + }, + "separator": { "color": "#ffffff" } + }, + "button": { + "extend": { + "disabledBackground": "#404348", + "extOutlined": { + "danger": { "focusBackground": "transparent" }, + "warn": { "focusBackground": "transparent" }, + "info": { "focusBackground": "transparent" }, + "help": { "focusBackground": "transparent" }, + "success": { "focusBackground": "transparent" } + }, + "disabledColor": "#a2a5a9", + "extText": { + "danger": { "focusBackground": "transparent" }, + "warn": { "focusBackground": "transparent" }, + "info": { "focusBackground": "transparent" }, + "help": { "focusBackground": "transparent" }, + "success": { "focusBackground": "transparent" } + }, + "extLink": { + "background": "transparent", + "colorHover": "#cecfd2", + "paddingX": 0, + "paddingY": 4, + "sm": { "iconOnlyWidth": 16 }, + "base": { "iconOnlyWidth": 24 }, + "lg": { "iconOnlyWidth": 28 }, + "xlg": { "iconOnlyWidth": 32 } + }, + "extSm": { "borderRadius": 14, "gap": 8 }, + "extLg": { "borderRadius": 14, "gap": 14, "height": 56 }, + "extXlg": { + "borderRadius": 14, + "gap": 14, + "iconOnlyWidth": 64, + "paddingX": 24, + "paddingY": 20, + "height": 64 + }, + "borderWidth": 1, + "iconSize": { "sm": 16, "md": 20, "lg": 24 } + }, + "colorScheme": { + "link": { + "activeColor": "#85888e", + "color": "#2b2e33", + "hoverColor": "#56595f" + }, + "outlined": { + "contrast": { + "activeBackground": "#56595f", + "borderColor": "#2b2e33", + "color": "#ffffff", + "hoverBackground": "#404348" + }, + "danger": { + "activeBackground": "#611912", + "borderColor": "#db3424", + "color": "#fbacaa", + "hoverBackground": "#45120e" + }, + "help": { + "activeBackground": "#6b21a8", + "borderColor": "#c084fc", + "color": "#d8b4fe", + "hoverBackground": "#581c87" + }, + "info": { + "activeBackground": "#123a61", + "borderColor": "#77baf4", + "color": "#aad7fb", + "hoverBackground": "#0e2a45" + }, + "plain": { + "activeBackground": "#e2e2e4", + "borderColor": "#56595f", + "color": "#2b2e33", + "hoverBackground": "#f0f0f1" + }, + "primary": { + "activeBackground": "#0e4514", + "borderColor": "#d4fedc", + "color": "#44e858", + "hoverBackground": "#0c3b11" + }, + "secondary": { + "activeBackground": "#e2e2e4", + "borderColor": "#56595f", + "color": "#2b2e33", + "hoverBackground": "#f0f0f1" + }, + "success": { + "activeBackground": "#12611b", + "borderColor": "#77f48a", + "color": "#aafbb7", + "hoverBackground": "#0e4514" + }, + "warn": { + "activeBackground": "#6d4c0b", + "borderColor": "#facb75", + "color": "#fddeaa", + "hoverBackground": "#4f3709" + } + }, + "root": { + "contrast": { + "activeBackground": "#6d7076", + "activeBorderColor": "transparent", + "activeColor": "#2b2e33", + "background": "#e2e2e4", + "borderColor": "transparent", + "color": "#2b2e33", + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "hoverBackground": "#cecfd2", + "hoverBorderColor": "transparent", + "hoverColor": "#2b2e33" + }, + "danger": { + "activeBackground": "#e85244", + "activeBorderColor": "transparent", + "activeColor": "#fff0f0", + "background": "#8d2218", + "borderColor": "transparent", + "color": "#fff0f0", + "focusRing": { "color": "#d4fedc", "shadow": "none" }, + "hoverBackground": "#db3424", + "hoverBorderColor": "transparent", + "hoverColor": "#fffafa" + }, + "help": { + "activeBackground": "#a855f7", + "activeBorderColor": "transparent", + "activeColor": "#f3e8ff", + "background": "#7e22ce", + "borderColor": "transparent", + "color": "#f3e8ff", + "focusRing": { "color": "#d4fedc", "shadow": "none" }, + "hoverBackground": "#9333ea", + "hoverBorderColor": "transparent", + "hoverColor": "#faf5ff" + }, + "info": { + "activeBackground": "#4496e8", + "activeBorderColor": "transparent", + "activeColor": "#f0f9ff", + "background": "#18538d", + "borderColor": "transparent", + "color": "#f0f9ff", + "focusRing": { "color": "#d4fedc", "shadow": "none" }, + "hoverBackground": "#1e76cd", + "hoverBorderColor": "transparent", + "hoverColor": "#fafdff" + }, + "primary": { + "activeBackground": "#168322", + "activeBorderColor": "transparent", + "activeColor": "#2b2e33", + "background": "#44e858", + "borderColor": "transparent", + "color": "#2b2e33", + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "hoverBackground": "#1dc831", + "hoverBorderColor": "transparent", + "hoverColor": "#2b2e33" + }, + "secondary": { + "activeBackground": "#56595f", + "activeBorderColor": "transparent", + "activeColor": "#ffffff", + "background": "#2b2e33", + "borderColor": "transparent", + "color": "#ffffff", + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "hoverBackground": "#404348", + "hoverBorderColor": "transparent", + "hoverColor": "#ffffff" + }, + "success": { + "activeBackground": "#44e858", + "activeBorderColor": "transparent", + "activeColor": "#f0fff3", + "background": "#aafbb7", + "borderColor": "transparent", + "color": "#f0fff3", + "focusRing": { "color": "#d4fedc", "shadow": "none" }, + "hoverBackground": "#77f48a", + "hoverBorderColor": "transparent", + "hoverColor": "#fafffb" + }, + "warn": { + "activeBackground": "#f5b83d", + "activeBorderColor": "transparent", + "activeColor": "#fff9f0", + "background": "#9d6d0e", + "borderColor": "transparent", + "color": "#fff9f0", + "focusRing": { "color": "#d4fedc", "shadow": "none" }, + "hoverBackground": "#dc9710", + "hoverBorderColor": "transparent", + "hoverColor": "#fffdfa" + } + }, + "text": { + "contrast": { + "activeBackground": "#56595f", + "color": "#ffffff", + "hoverBackground": "#404348" + }, + "danger": { + "activeBackground": "#611912", + "color": "#fbacaa", + "hoverBackground": "#45120e" + }, + "help": { + "activeBackground": "#6b21a8", + "color": "#d8b4fe", + "hoverBackground": "#581c87" + }, + "info": { + "activeBackground": "#123a61", + "color": "#aad7fb", + "hoverBackground": "#0e2a45" + }, + "plain": { + "activeBackground": "#e2e2e4", + "color": "#2b2e33", + "hoverBackground": "#f0f0f1" + }, + "primary": { + "activeBackground": "#e2e2e4", + "color": "#2b2e33", + "hoverBackground": "#f0f0f1" + }, + "secondary": { + "activeBackground": "#e2e2e4", + "color": "#2b2e33", + "hoverBackground": "#f0f0f1" + }, + "success": { + "activeBackground": "#12611b", + "color": "#aafbb7", + "hoverBackground": "#0e4514" + }, + "warn": { + "activeBackground": "#6d4c0b", + "color": "#fddeaa", + "hoverBackground": "#4f3709" + } + } + }, + "root": { + "borderRadius": 14, + "roundedBorderRadius": 1600, + "gap": 8, + "paddingX": 14, + "paddingY": 8, + "iconOnlyWidth": 40, + "raisedShadow": "none", + "badgeSize": 16, + "transitionDuration": 180, + "focusRing": { "width": 4, "style": "none", "offset": 0 }, + "sm": { + "fontSize": 14, + "iconOnlyWidth": 32, + "paddingX": 14, + "paddingY": 8 + }, + "lg": { + "fontSize": 20, + "iconOnlyWidth": 56, + "paddingX": 24, + "paddingY": 14 + }, + "label": { "fontWeight": 600 } + } + }, + "card": { + "extend": { "borderColor": "#404348", "borderWidth": 1 }, + "root": { + "background": "#404348", + "borderRadius": 14, + "color": "#ffffff", + "shadow": "none" + }, + "body": { "padding": 14, "gap": 14 }, + "caption": { "gap": 4 }, + "title": { "fontSize": 18, "fontWeight": 600 }, + "subtitle": { "color": "#a2a5a9" } + }, + "carousel": { + "colorScheme": { + "indicator": { + "activeBackground": "#2b2e33", + "background": "#cecfd2", + "hoverBackground": "#6d7076" + } + }, + "root": { "transitionDuration": 180 }, + "content": { "gap": 8 }, + "indicatorList": { "padding": 14, "gap": 8 }, + "indicator": { + "width": 8, + "height": 8, + "borderRadius": 1600, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + } + }, + "checkbox": { + "root": { + "borderRadius": 8, + "extend": { "borderWidth": 1 }, + "width": 24, + "height": 24, + "background": "#404348", + "checkedBackground": "#f0f0f1", + "checkedHoverBackground": "#e2e2e4", + "disabledBackground": "#404348", + "filledBackground": "#404348", + "borderColor": "#56595f", + "hoverBorderColor": "#f0f0f1", + "focusBorderColor": "#f0f0f1", + "checkedBorderColor": "#f0f0f1", + "checkedHoverBorderColor": "#e2e2e4", + "checkedFocusBorderColor": "#44e858", + "checkedDisabledBorderColor": "#56595f", + "invalidBorderColor": "#db3424", + "shadow": "none", + "focusRing": { + "focusRing": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)", + "width": 4 + }, + "sm": { "width": 8, "height": 8 }, + "lg": { "width": 20, "height": 20 }, + "transitionDuration": 180 + }, + "icon": { + "size": 16, + "color": "#f0f0f1", + "checkedColor": "#ffffff", + "checkedHoverColor": "#ffffff", + "disabledColor": "#a2a5a9", + "sm": { "size": 12 }, + "lg": { "size": 20 } + } + }, + "chip": { + "extend": { "borderColor": "transparent", "borderWidth": 1 }, + "root": { + "borderRadius": 8, + "paddingX": 8, + "paddingY": 4, + "gap": 8, + "transitionDuration": 180 + }, + "colorScheme": { + "icon": { "color": "#2b2e33" }, + "removeIcon": { "color": "#2b2e33" }, + "root": { "background": "#e2e2e4", "color": "#2b2e33" } + }, + "image": { "width": 0, "height": 0 }, + "icon": { "size": 16 }, + "removeIcon": { + "size": 16, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + } + }, + "confirmdialog": { + "extend": { + "extIcon": { + "success": "#77f48a", + "info": "#77baf4", + "help": "#c084fc", + "warn": "#facb75", + "danger": "#f47f77" + } + }, + "icon": { "size": 24, "color": "#ffffff" }, + "content": { "gap": 0 } + }, + "confirmpopup": { + "root": { + "background": "#404348", + "color": "#ffffff", + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "gutter": 14, + "arrowOffset": 20, + "borderColor": "#404348", + "borderRadius": 14 + }, + "content": { "padding": 14, "gap": 14 }, + "icon": { "size": 24, "color": "#ffffff" }, + "footer": { + "gap": 8, + "paddingTop": 0, + "paddingRight": 24, + "paddingBottom": 24, + "paddingLeft": 24 + } + }, + "contextmenu": { + "root": { + "background": "#404348", + "color": "#ffffff", + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "borderColor": "#404348", + "borderRadius": 14, + "transitionDuration": 180 + }, + "list": { + "paddingTop": 8, + "paddingRight": 0, + "paddingBottom": 8, + "paddingLeft": 0, + "gap": 4 + }, + "item": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "gap": 8, + "activeBackground": "#404348", + "activeColor": "#cecfd2", + "borderRadius": 14, + "color": "#ffffff", + "focusBackground": "#2b2e33", + "focusColor": "#cecfd2", + "icon": { + "activeColor": "#cecfd2", + "color": "#ffffff", + "focusColor": "#cecfd2" + } + }, + "submenu": { "mobileIndent": 20 }, + "separator": { "borderColor": "#404348" }, + "submenuIcon": { + "activeColor": "#cecfd2", + "color": "#ffffff", + "focusColor": "#cecfd2", + "size": 14 + } + }, + "datatable": { + "colorScheme": { + "bodyCell": { "selectedBorderColor": "#e2e2e4" }, + "footer": { "background": "#f0f0f1", "color": "#2b2e33" }, + "footerCell": { "background": "#f0f0f1", "color": "#2b2e33" }, + "header": { "background": "#56595f", "color": "#2b2e33" }, + "headerCell": { + "background": "#6d7076", + "color": "#2b2e33", + "hoverBackground": "#f0f0f1" + }, + "root": { "borderColor": "#e2e2e4", "color": "#2b2e33" }, + "row": { "stripedBackground": "#f0f0f1" } + }, + "extended": { + "extHeaderCell": { "selectedHoverBackground": "#e2e2e4" }, + "extRow": { + "selectedHoverBackground": "#e2e2e4", + "stripedHoverBackground": "#2b2e33", + "iconSize": 20 + } + }, + "root": { "transitionDuration": 180 }, + "header": { + "borderColor": "#404348", + "borderTopWidth": 1, + "borderRightWidth": 0, + "borderBottomWidth": 1, + "borderLeftWidth": 0, + "padding": 14, + "sm": { "padding": 8 }, + "lg": { "padding": 20 } + }, + "headerCell": { + "selectedBackground": "#f0f0f1", + "borderColor": "#404348", + "hoverColor": "#cecfd2", + "selectedColor": "#ffffff", + "gap": 8, + "padding": 14, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "inset 0 0 0 4px #d4fedc" + }, + "sm": { "padding": 8 }, + "lg": { "padding": 20 } + }, + "columnTitle": { "fontWeight": 700 }, + "row": { + "background": "#56595f", + "hoverBackground": "#2b2e33", + "selectedBackground": "#f0f0f1", + "color": "#ffffff", + "hoverColor": "#cecfd2", + "selectedColor": "#ffffff", + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "inset 0 0 0 4px #d4fedc" + } + }, + "bodyCell": { + "borderColor": "#404348", + "padding": 14, + "sm": { "padding": 8 }, + "lg": { "padding": 20 } + }, + "footerCell": { + "borderColor": "#404348", + "padding": 14, + "sm": { "padding": 8 }, + "lg": { "padding": 20 } + }, + "columnFooter": { "fontWeight": 700 }, + "dropPoint": { "color": "#ffffff" }, + "footer": { + "borderColor": "#404348", + "borderTopWidth": 0, + "borderRightWidth": 0, + "borderBottomWidth": 1, + "borderLeftWidth": 0, + "padding": 14, + "sm": { "padding": 8 }, + "lg": { "padding": 20 } + }, + "columnResizer": { "width": 8 }, + "resizeIndicator": { "width": 1, "color": "#ffffff" }, + "sortIcon": { "color": "#ffffff", "hoverColor": "#cecfd2", "size": 16 }, + "loadingIcon": { "size": 32 }, + "rowToggleButton": { + "hoverBackground": "#2b2e33", + "selectedHoverBackground": "#2b2e33", + "color": "#ffffff", + "hoverColor": "#ffffff", + "selectedHoverColor": "#ffffff", + "size": 32, + "borderRadius": 14, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "filter": { + "inlineGap": 8, + "rule": { "borderColor": "#404348" }, + "constraintList": { "padding": 4, "gap": 4 }, + "constraint": { + "focusBackground": "#2b2e33", + "selectedBackground": "#f0f0f1", + "selectedFocusBackground": "#cecfd2", + "color": "#ffffff", + "focusColor": "#ffffff", + "selectedColor": "#ffffff", + "selectedFocusColor": "#ffffff", + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 8, + "separator": { "borderColor": "#404348" } + }, + "overlaySelect": { + "background": "#56595f", + "color": "#ffffff", + "borderColor": "#404348", + "borderRadius": 14, + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)" + }, + "overlayPopover": { + "background": "#56595f", + "color": "#ffffff", + "borderColor": "#404348", + "borderRadius": 14, + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "padding": 14, + "gap": 4 + } + }, + "paginatorTop": { + "borderColor": "#56595f", + "borderTopWidth": 0, + "borderRightWidth": 0, + "borderBottomWidth": 1, + "borderLeftWidth": 0 + }, + "paginatorBottom": { + "borderTopWidth": 0, + "borderRightWidth": 0, + "borderBottomWidth": 1, + "borderLeftWidth": 0, + "borderColor": "#404348" + } + }, + "dataview": { + "root": { + "borderWidth": 1, + "borderRadius": 4, + "padding": 0, + "borderColor": "#404348" + }, + "header": { + "borderTopWidth": 0, + "borderRightWidth": 0, + "borderBottomWidth": 1, + "borderLeftWidth": 0, + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 0, + "color": "#ffffff", + "borderColor": "#404348" + }, + "content": { + "background": "#404348", + "color": "#ffffff", + "borderColor": "#404348", + "borderWidth": 0, + "padding": 0, + "borderRadius": 0 + }, + "footer": { + "background": "#2b2e33", + "color": "#ffffff", + "borderTopWidth": 1, + "borderRightWidth": 0, + "borderBottomWidth": 0, + "borderLeftWidth": 0, + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 0, + "borderColor": "#404348" + }, + "paginatorTop": { + "borderTopWidth": 0, + "borderRightWidth": 0, + "borderBottomWidth": 1, + "borderLeftWidth": 0, + "borderColor": "#404348" + }, + "paginatorBottom": { + "borderTopWidth": 1, + "borderRightWidth": 0, + "borderBottomWidth": 0, + "borderLeftWidth": 0, + "borderColor": "#404348" + }, + "colorScheme": { "header": { "background": "#404348", "color": "#2b2e33" } } + }, + "datepicker": { + "extend": { + "extDate": { "selectedHoverBackground": "#e2e2e4" }, + "extToday": { "hoverBackground": "#2b2e33", "borderColor": "#e2e2e4" }, + "extTitle": { "width": 336 }, + "extTimePicker": { "minWidth": 304, "color": "#ffffff" } + }, + "colorScheme": { + "dropdown": { + "activeBackground": "#2b2e33", + "activeColor": "#ffffff", + "background": "#404348", + "color": "#2b2e33", + "hoverBackground": "#f0f0f1", + "hoverColor": "#2b2e33" + }, + "today": { "background": "transparent", "color": "#2b2e33" } + }, + "panel": { + "background": "#404348", + "borderColor": "#404348", + "color": "#ffffff", + "borderRadius": 14, + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "padding": 0 + }, + "header": { + "background": "#404348", + "borderColor": "#404348", + "color": "#ffffff", + "padding": 14 + }, + "title": { "gap": 8, "fontWeight": 700 }, + "selectMonth": { + "hoverBackground": "#2b2e33", + "color": "#ffffff", + "hoverColor": "#cecfd2", + "borderRadius": 14, + "padding": 8 + }, + "inputIcon": { "color": "#a2a5a9" }, + "dropdown": { + "width": 272, + "borderColor": "#56595f", + "hoverBorderColor": "#56595f", + "activeBorderColor": "#56595f", + "borderRadius": 14, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "sm": { "width": 0 }, + "lg": { "width": 0 } + }, + "group": { "borderColor": "#404348", "gap": 14 }, + "selectYear": { + "hoverBackground": "#2b2e33", + "color": "#ffffff", + "hoverColor": "#cecfd2", + "borderRadius": 14, + "padding": 4 + }, + "dayView": { "margin": 14 }, + "weekDay": { "padding": 4, "fontWeight": 700, "color": "#ffffff" }, + "date": { + "hoverBackground": "#2b2e33", + "selectedBackground": "#f0f0f1", + "rangeSelectedBackground": "#2b2e33", + "color": "#ffffff", + "hoverColor": "#ffffff", + "selectedColor": "#ffffff", + "rangeSelectedColor": "#ffffff", + "width": 32, + "height": 32, + "borderRadius": 8, + "padding": 4, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "monthView": { + "marginTop": 0, + "marginRight": 0, + "marginBottom": 0, + "marginLeft": 0 + }, + "month": { "padding": 0, "borderRadius": 0 }, + "yearView": { + "marginTop": 0, + "marginRight": 0, + "marginBottom": 0, + "marginLeft": 0 + }, + "year": { "padding": 0, "borderRadius": 0 }, + "buttonbar": { "padding": 14, "borderColor": "#404348" }, + "timePicker": { + "padding": 14, + "borderColor": "#404348", + "gap": 8, + "buttonGap": 4 + }, + "root": { "transitionDuration": 180 } + }, + "dialog": { + "extend": { "borderWidth": 1, "backdrop": "rgba(0, 0, 0, 0.6000)" }, + "root": { + "background": "#404348", + "borderColor": "#404348", + "color": "#ffffff", + "borderRadius": 1600, + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)" + }, + "header": { + "paddingTop": 24, + "paddingRight": 24, + "paddingBottom": 14, + "paddingLeft": 24, + "gap": 8 + }, + "title": { "fontSize": 20, "fontWeight": 600 }, + "content": { "padding": 24 }, + "footer": { + "paddingTop": 0, + "paddingRight": 24, + "paddingBottom": 24, + "paddingLeft": 24, + "gap": 8 + } + }, + "divider": { + "extend": { "content": { "gap": 8 }, "iconSize": 16 }, + "horizontal": { + "marginTop": 14, + "marginRight": 0, + "marginBottom": 14, + "marginLeft": 0, + "paddingTop": 0, + "paddingRight": 14, + "paddingBottom": 0, + "paddingLeft": 14, + "content": { + "paddingTop": 0, + "paddingRight": 8, + "paddingBottom": 0, + "paddingLeft": 8 + } + }, + "vertical": { + "marginTop": 0, + "marginRight": 14, + "marginBottom": 0, + "marginLeft": 14, + "paddingTop": 14, + "paddingRight": 0, + "paddingBottom": 14, + "paddingLeft": 0, + "content": { + "paddingTop": 8, + "paddingRight": 0, + "paddingBottom": 8, + "paddingLeft": 0 + } + }, + "content": { "background": "#404348", "color": "#ffffff" }, + "root": { "borderColor": "#404348" } + }, + "drawer": { + "extend": { + "borderRadius": 8, + "borderWidth": 1, + "width": 400, + "extHeader": { "gap": 8, "borderColor": "#404348" }, + "margin": 8, + "scale": 2, + "backdrop": "rgba(0, 0, 0, 0.6000)" + }, + "root": { + "background": "#404348", + "borderColor": "#404348", + "color": "#ffffff", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "header": { + "paddingTop": 24, + "paddingRight": 24, + "paddingBottom": 14, + "paddingLeft": 24 + }, + "title": { "fontSize": 20, "fontWeight": 600 }, + "content": { "padding": 24 }, + "footer": { + "paddingTop": 0, + "paddingRight": 24, + "paddingBottom": 24, + "paddingLeft": 24 + } + }, + "fileupload": { + "extend": { + "extDragNdrop": { + "background": "#56595f", + "borderRadius": 14, + "iconSize": 32, + "padding": 14, + "info": { "gap": 4 } + }, + "extFile": { "iconSize": 20 }, + "extContent": { "borderRadius": 14, "highlightBorderDefault": "#56595f" } + }, + "colorScheme": { + "header": { "background": "#404348", "color": "#2b2e33" } + }, + "root": { + "background": "#404348", + "borderColor": "#404348", + "color": "#ffffff", + "borderRadius": 14, + "transitionDuration": 180 + }, + "header": { + "borderColor": "#404348", + "borderWidth": 0, + "padding": 0, + "borderRadius": 0, + "gap": 8 + }, + "content": { "highlightBorderColor": "#f0f0f1", "padding": 0, "gap": 8 }, + "file": { + "padding": 8, + "gap": 8, + "borderColor": "#56595f", + "info": { "gap": 4 } + }, + "fileList": { "gap": 8 }, + "progressbar": { "height": 8 }, + "basic": { "gap": 8 } + }, + "floatlabel": { + "extend": { "height": 64, "iconSize": 20 }, + "root": { + "color": "#a2a5a9", + "focusColor": "#a2a5a9", + "activeColor": "#a2a5a9", + "invalidColor": "#fbacaa", + "transitionDuration": 180, + "positionX": 14, + "positionY": 14, + "fontWeight": 400, + "active": { "fontSize": 12, "fontWeight": 400 } + }, + "over": { "active": { "top": 14 } }, + "inside": { + "input": { "paddingTop": 28, "paddingBottom": 14 }, + "active": { "top": 14 } + }, + "on": { + "borderRadius": 0, + "active": { + "paddingTop": 0, + "paddingRight": 4, + "paddingBottom": 0, + "paddingLeft": 4, + "background": "#56595f" + } + } + }, + "galleria": { + "extend": { "backdrop": "rgba(0, 0, 0, 0.6000)" }, + "colorScheme": { + "indicatorButton": { + "background": "#cecfd2", + "hoverBackground": "#6d7076" + }, + "thumbnailNavButton": { + "color": "#2b2e33", + "hoverBackground": "#404348", + "hoverColor": "#56595f" + }, + "thumbnailsContent": { "background": "#404348" }, + "thumbnailContent": { "background": "#f0f0f1" } + }, + "root": { + "borderWidth": 1, + "borderColor": "#404348", + "borderRadius": 14, + "transitionDuration": 180 + }, + "navButton": { + "background": "transparent", + "hoverBackground": "#404348", + "color": "#2b2e33", + "hoverColor": "#56595f", + "size": 64, + "gutter": 8, + "prev": { "borderRadius": 8 }, + "next": { "borderRadius": 8 }, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "navIcon": { "size": 32 }, + "thumbnailsContent": { "padding": 4 }, + "thumbnailNavButton": { + "size": 32, + "borderRadius": 14, + "gutter": 8, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "thumbnailNavButtonIcon": { "size": 16 }, + "caption": { "background": "#404348", "color": "#ffffff", "padding": 8 }, + "indicatorList": { "gap": 8, "padding": 14 }, + "indicatorButton": { + "width": 8, + "height": 8, + "activeBackground": "#f0f0f1", + "borderRadius": 14, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "insetIndicatorList": { "background": "rgba(0, 0, 0, 0.6000)" }, + "insetIndicatorButton": { + "background": "#404348", + "hoverBackground": "#404348", + "activeBackground": "#404348" + }, + "closeButton": { + "size": 64, + "gutter": 8, + "background": "#404348", + "hoverBackground": "#404348", + "color": "#2b2e33", + "hoverColor": "#56595f", + "borderRadius": 14, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "closeButtonIcon": { "size": 32 } + }, + "inputgroup": { + "extend": { "borderWidth": 1, "iconSize": 16 }, + "colorScheme": { + "addon": { + "background": "#56595f", + "borderColor": "#56595f", + "color": "#85888e" + } + }, + "addon": { "borderRadius": 14, "padding": 14, "minWidth": 272 } + }, + "inputnumber": { + "extend": { + "borderWidth": 1, + "extButton": { "height": 40, "iconSize": 16 } + }, + "colorScheme": { + "button": { + "activeBackground": "transparent", + "activeBorderColor": "#56595f", + "activeColor": "#2b2e33", + "background": "#56595f", + "borderColor": "#56595f", + "color": "#2b2e33", + "hoverBackground": "#f0f0f1", + "hoverBorderColor": "#56595f", + "hoverColor": "#56595f" + } + }, + "transitionDuration": { "transitionDuration": 180 }, + "button": { "width": 272, "borderRadius": 14, "verticalPadding": 14 }, + "root": { "transitionDuration": 180 } + }, + "inputotp": { + "extend": { "height": 40, "borderWidth": 1 }, + "root": { "gap": 8 }, + "input": { "width": 304, "lg": { "width": 336 }, "sm": { "width": 272 } }, + "sm": { "width": 0 }, + "lg": { "width": 0 } + }, + "inputtext": { + "extend": { + "readonlyBackground": "#2b2e33", + "iconSize": 16, + "borderWidth": 1, + "extXlg": { "fontSize": 16, "paddingX": 14, "paddingY": 14 } + }, + "root": { + "background": "#404348", + "disabledBackground": "#404348", + "filledBackground": "#404348", + "filledHoverBackground": "#404348", + "filledFocusBackground": "#404348", + "borderColor": "#56595f", + "hoverBorderColor": "#77f48a", + "focusBorderColor": "#77f48a", + "invalidBorderColor": "#db3424", + "color": "#ffffff", + "disabledColor": "#a2a5a9", + "placeholderColor": "#a2a5a9", + "invalidPlaceholderColor": "#fbacaa", + "shadow": "none", + "paddingX": 14, + "paddingY": 14, + "borderRadius": 14, + "transitionDuration": 180, + "sm": { "fontSize": 16, "paddingX": 14, "paddingY": 14 }, + "lg": { "fontSize": 16, "paddingX": 14, "paddingY": 14 }, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "none" + } + } + }, + "listbox": { + "extend": { + "extOption": { + "label": { "gap": 4 }, + "caption": { "color": "#a2a5a9", "stripedColor": "#a2a5a9" }, + "gap": 8 + } + }, + "colorScheme": { "option": { "stripedBackground": "#6d7076" } }, + "root": { + "background": "#404348", + "disabledBackground": "#404348", + "borderColor": "#56595f", + "invalidBorderColor": "#db3424", + "color": "#f0f0f1", + "disabledColor": "#a2a5a9", + "shadow": "none", + "borderRadius": 14, + "transitionDuration": 180 + }, + "list": { + "padding": 4, + "gap": 4, + "header": { + "paddingTop": 14, + "paddingRight": 14, + "paddingBottom": 0, + "paddingLeft": 14 + } + }, + "option": { + "focusBackground": "#2b2e33", + "selectedBackground": "#f0f0f1", + "selectedFocusBackground": "#cecfd2", + "color": "#ffffff", + "focusColor": "#ffffff", + "selectedColor": "#ffffff", + "selectedFocusColor": "#ffffff", + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 8 + }, + "optionGroup": { + "background": "#56595f", + "color": "#a2a5a9", + "fontWeight": 600, + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14 + }, + "checkmark": { "color": "#ffffff", "gutterStart": -8, "gutterEnd": 8 }, + "emptyMessage": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14 + } + }, + "megamenu": { + "extend": { + "extItem": { "caption": { "color": "#a2a5a9", "gap": 4 } }, + "iconSize": 20 + }, + "colorScheme": { "root": { "background": "transparent" } }, + "root": { + "borderColor": "transparent", + "borderRadius": 14, + "color": "#ffffff", + "gap": 4, + "transitionDuration": 180, + "verticalOrientation": { "padding": 4, "gap": 4 }, + "horizontalOrientation": { "padding": 4, "gap": 4 } + }, + "baseItem": { + "borderRadius": 14, + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14 + }, + "item": { + "focusBackground": "#2b2e33", + "activeBackground": "#f0f0f1", + "color": "#ffffff", + "focusColor": "#ffffff", + "activeColor": "#181a1f", + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 8, + "gap": 8, + "icon": { + "color": "#ffffff", + "focusColor": "#ffffff", + "activeColor": "#181a1f" + } + }, + "overlay": { + "padding": 4, + "background": "#404348", + "borderColor": "#404348", + "borderRadius": 14, + "color": "#ffffff", + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "gap": 0 + }, + "submenu": { "padding": 4, "gap": 4 }, + "submenuLabel": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "background": "transparent", + "color": "#a2a5a9", + "fontWeight": 600 + }, + "submenuIcon": { + "size": 20, + "color": "#ffffff", + "focusColor": "#ffffff", + "activeColor": "#181a1f" + }, + "separator": { "borderColor": "#404348" }, + "mobileButton": { + "borderRadius": 8, + "size": 32, + "color": "#ffffff", + "hoverColor": "#cecfd2", + "hoverBackground": "#2b2e33", + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + } + }, + "menu": { + "extend": { + "paddingX": 4, + "iconSize": 20, + "paddingY": 4, + "extItem": { + "caption": { "gap": 4, "color": "#a2a5a9" }, + "activeBackground": "#f0f0f1", + "activeColor": "#181a1f", + "icon": { "activeColor": "#181a1f" } + } + }, + "root": { + "borderRadius": 14, + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "transitionDuration": 180, + "background": "#404348", + "borderColor": "#404348", + "color": "#ffffff" + }, + "list": { "padding": 4, "gap": 4 }, + "submenuLabel": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "fontWeight": 600, + "background": "transparent", + "color": "#a2a5a9" + }, + "separator": { "borderColor": "#404348" }, + "item": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 8, + "gap": 8, + "color": "#ffffff", + "focusBackground": "#2b2e33", + "focusColor": "#cecfd2", + "icon": { "color": "#ffffff", "focusColor": "#cecfd2" } + } + }, + "menubar": { + "extend": { + "iconSize": 20, + "extItem": { "caption": { "color": "#a2a5a9", "gap": 4 } }, + "extSubmenuLabel": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "fontWeight": 600, + "background": "transparent", + "color": "#a2a5a9" + } + }, + "colorScheme": { "root": { "background": "transparent" } }, + "root": { + "borderColor": "transparent", + "borderRadius": 8, + "color": "#ffffff", + "gap": 4, + "padding": 4, + "transitionDuration": 180 + }, + "baseItem": { + "borderRadius": 8, + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14 + }, + "item": { + "focusBackground": "#2b2e33", + "activeBackground": "#f0f0f1", + "color": "#ffffff", + "focusColor": "#ffffff", + "activeColor": "#181a1f", + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 8, + "gap": 8, + "icon": { + "color": "#ffffff", + "focusColor": "#ffffff", + "activeColor": "#181a1f" + } + }, + "submenu": { + "padding": 4, + "gap": 4, + "background": "#56595f", + "borderColor": "#404348", + "borderRadius": 14, + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "mobileIndent": 14, + "icon": { + "size": 20, + "color": "#ffffff", + "focusColor": "#ffffff", + "activeColor": "#181a1f" + } + }, + "separator": { "borderColor": "#404348" }, + "mobileButton": { + "borderRadius": 8, + "size": 32, + "color": "#ffffff", + "hoverColor": "#cecfd2", + "hoverBackground": "#2b2e33", + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + } + }, + "message": { + "extend": { + "width": 400, + "extText": { "gap": 4 }, + "extInfo": { + "color": "#77baf4", + "closeButton": { "color": "#77baf4", "borderColor": "#4496e8" }, + "caption": { "color": "#ffffff" } + }, + "extAccentLine": { "width": 4 }, + "extCloseButton": { "width": 1 }, + "extSuccess": { + "color": "#77f48a", + "closeButton": { "color": "#77f48a", "borderColor": "#44e858" }, + "caption": { "color": "#ffffff" } + }, + "extWarn": { + "color": "#facb75", + "closeButton": { "color": "#facb75", "borderColor": "#f5b83d" }, + "caption": { "color": "#ffffff" } + }, + "extError": { + "color": "#f47f77", + "closeButton": { "color": "#f47f77", "borderColor": "#e85244" }, + "caption": { "color": "#ffffff" } + } + }, + "colorScheme": { + "contrast": { + "background": "#2b2e33", + "borderColor": "transparent", + "closeButton": { + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "hoverBackground": "transparent" + }, + "color": "#ffffff", + "outlined": { "borderColor": "transparent", "color": "transparent" }, + "shadow": "none", + "simple": { "color": "transparent" } + }, + "error": { + "background": "#3b100c", + "borderColor": "#e85244", + "closeButton": { + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "hoverBackground": "#611912" + }, + "color": "#2b2e33", + "outlined": { "borderColor": "#e85244", "color": "#2b2e33" }, + "shadow": "none", + "simple": { "color": "#2b2e33" } + }, + "info": { + "background": "#0c243b", + "borderColor": "#4496e8", + "closeButton": { + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "hoverBackground": "#123a61" + }, + "color": "#2b2e33", + "outlined": { "borderColor": "#4496e8", "color": "#2b2e33" }, + "shadow": "none", + "simple": { "color": "#2b2e33" } + }, + "secondary": { + "background": "#f0f0f1", + "borderColor": "transparent", + "closeButton": { + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "hoverBackground": "transparent" + }, + "color": "#2b2e33", + "outlined": { "borderColor": "transparent", "color": "transparent" }, + "shadow": "none", + "simple": { "color": "transparent" } + }, + "success": { + "background": "#0c3b11", + "borderColor": "#44e858", + "closeButton": { + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "hoverBackground": "#12611b" + }, + "color": "#2b2e33", + "outlined": { "borderColor": "#44e858", "color": "#2b2e33" }, + "shadow": "none", + "simple": { "color": "#2b2e33" } + }, + "warn": { + "background": "#453008", + "borderColor": "#f5b83d", + "closeButton": { + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "hoverBackground": "#6d4c0b" + }, + "color": "#2b2e33", + "outlined": { "borderColor": "#f5b83d", "color": "#2b2e33" }, + "shadow": "none", + "simple": { "color": "#2b2e33" } + }, + "outlined": { + "root": { "borderWidth": 0 }, + "closeButton": { + "hoverBackground": "transparent", + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "outlined": { "color": "transparent", "borderColor": "transparent" }, + "simple": { "color": "transparent" } + }, + "simple": { "content": { "padding": 0 } } + }, + "root": { "borderRadius": 14, "borderWidth": 1, "transitionDuration": 180 }, + "content": { + "padding": 14, + "gap": 14, + "sm": { "padding": 14 }, + "lg": { "padding": 14 } + }, + "text": { + "fontSize": 16, + "fontWeight": 700, + "sm": { "fontSize": 16 }, + "lg": { "fontSize": 16 } + }, + "icon": { "size": 36, "sm": { "size": 36 }, "lg": { "size": 36 } }, + "closeButton": { + "width": 32, + "height": 32, + "borderRadius": 14, + "focusRing": { "width": 4, "style": "none", "offset": 0 } + }, + "closeIcon": { "size": 16, "sm": { "size": 16 }, "lg": { "size": 16 } }, + "outlined": { "root": { "borderWidth": 1 } }, + "simple": { "content": { "padding": 0 } } + }, + "metergroup": { + "extend": { "extLabel": { "color": "#a2a5a9" } }, + "root": { "borderRadius": 14, "gap": 14 }, + "meters": { "size": 8, "background": "#404348" }, + "label": { "gap": 4 }, + "labelMarker": { "size": 8 }, + "labelIcon": { "size": 16 }, + "labelList": { "verticalGap": 8, "horizontalGap": 14 } + }, + "multiselect": { + "extend": { + "paddingX": 6, + "paddingY": 6, + "borderWidth": 1, + "iconSize": 16, + "width": 272, + "readonlyBackground": "#2b2e33" + }, + "root": { + "shadow": "none", + "paddingX": 14, + "paddingY": 14, + "borderRadius": 14, + "transitionDuration": 180, + "sm": { "fontSize": 16, "paddingX": 8, "paddingY": 8 }, + "lg": { "fontSize": 16, "paddingX": 14, "paddingY": 14 }, + "focusRing": { + "width": 4, + "style": "none", + "offset": 0, + "shadow": "none", + "color": "#d4fedc" + }, + "background": "#404348", + "borderColor": "#56595f", + "color": "#ffffff", + "disabledBackground": "#404348", + "disabledColor": "#a2a5a9", + "filledBackground": "#404348", + "filledFocusBackground": "#404348", + "filledHoverBackground": "#404348", + "focusBorderColor": "#77f48a", + "hoverBorderColor": "#77f48a", + "invalidBorderColor": "#db3424", + "invalidPlaceholderColor": "#fbacaa", + "placeholderColor": "#a2a5a9" + }, + "dropdown": { "width": 272, "color": "#f0f0f1" }, + "overlay": { + "borderRadius": 14, + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "background": "#404348", + "borderColor": "#404348", + "color": "#ffffff" + }, + "list": { + "padding": 4, + "header": { + "paddingTop": 14, + "paddingRight": 14, + "paddingBottom": 0, + "paddingLeft": 14 + }, + "gap": 4 + }, + "chip": { "borderRadius": 8 }, + "option": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 8, + "gap": 8, + "color": "#ffffff", + "focusBackground": "#2b2e33", + "focusColor": "#ffffff", + "selectedBackground": "#f0f0f1", + "selectedColor": "#ffffff", + "selectedFocusBackground": "#cecfd2", + "selectedFocusColor": "#ffffff" + }, + "optionGroup": { + "fontWeight": 600, + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "background": "#56595f", + "color": "#a2a5a9" + }, + "emptyMessage": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14 + }, + "clearIcon": { "color": "#f0f0f1" } + }, + "paginator": { + "root": { + "paddingTop": 0, + "paddingRight": 8, + "paddingBottom": 0, + "paddingLeft": 8, + "gap": 8, + "borderRadius": 14, + "background": "transparent", + "color": "#ffffff", + "transitionDuration": 180 + }, + "currentPageReport": { "color": "#a2a5a9" }, + "navButton": { + "background": "transparent", + "hoverBackground": "#2b2e33", + "selectedBackground": "#f0f0f1", + "color": "#ffffff", + "hoverColor": "#cecfd2", + "selectedColor": "#ffffff", + "width": 40, + "height": 40, + "borderRadius": 14, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "focus": "0 0 4px rgba(0, 0, 0, 0.2000)", + "shadow": "none" + } + }, + "jumpToPageInput": { "maxWidth": 80 } + }, + "panelmenu": { + "extend": { + "iconSize": 20, + "extPanel": { "gap": 4 }, + "extItem": { + "activeBackground": "#f0f0f1", + "activeColor": "#181a1f", + "caption": { "color": "#a2a5a9", "gap": 4 } + } + }, + "root": { "gap": 4, "transitionDuration": 180 }, + "panel": { + "background": "transparent", + "borderColor": "transparent", + "borderWidth": 1, + "color": "#ffffff", + "padding": 4, + "borderRadius": 14, + "first": { + "borderTopWidth": 1, + "borderRightWidth": 1, + "borderBottomWidth": 0, + "borderLeftWidth": 1, + "topBorderRadius": 14 + }, + "last": { + "borderTopWidth": 0, + "borderRightWidth": 1, + "borderBottomWidth": 1, + "borderLeftWidth": 1, + "topBorderRadius": 14, + "bottomBorderRadius": 14 + } + }, + "item": { + "focusBackground": "#2b2e33", + "color": "#ffffff", + "focusColor": "#ffffff", + "gap": 8, + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 8, + "icon": { "color": "#ffffff", "focusColor": "#ffffff" } + }, + "submenu": { "indent": 24 }, + "separator": { "borderColor": "#404348" }, + "submenuIcon": { "color": "#ffffff", "focusColor": "#ffffff" } + }, + "password": { + "extend": { "borderWidth": 1 }, + "colorScheme": { + "strength": { + "mediumBackground": "#f5b83d", + "strongBackground": "#1dc831", + "weakBackground": "#e85244" + }, + "icon": { "color": "#85888e" } + }, + "meter": { "background": "#404348", "borderRadius": 14, "height": 8 }, + "overlay": { + "background": "#404348", + "borderColor": "#56595f", + "borderRadius": 8, + "color": "#ffffff", + "padding": 14, + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)" + }, + "content": { "gap": 8 }, + "icon": { "color": "#ffffff" } + }, + "popover": { + "extend": { "borderWidth": 1, "arrow": { "width": 12, "height": 8 } }, + "root": { + "background": "#404348", + "borderColor": "#56595f", + "color": "#ffffff", + "borderRadius": 8, + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "gutter": 4, + "arrowOffset": 20 + }, + "content": { "padding": 14 } + }, + "progressbar": { + "label": { "color": "#ffffff", "fontSize": 12, "fontWeight": 400 }, + "root": { "background": "#404348", "borderRadius": 14, "height": 16 }, + "value": { "background": "#44e858" } + }, + "progressspinner": { + "extend": { "small": 16, "medium": 32, "large": 48, "xlarge": 56 }, + "colorScheme": { + "root": { + "colorFour": "#f5b83d", + "colorOne": "#44e858", + "colorThree": "#e85244", + "colorTwo": "#4496e8" + } + }, + "root": { "borderWidth": 4 } + }, + "radiobutton": { + "root": { + "width": 24, + "height": 24, + "background": "#404348", + "checkedBackground": "#f0f0f1", + "checkedHoverBackground": "#e2e2e4", + "disabledBackground": "#404348", + "filledBackground": "#404348", + "borderColor": "#56595f", + "hoverBorderColor": "#f0f0f1", + "focusBorderColor": "#56595f", + "checkedBorderColor": "#f0f0f1", + "checkedHoverBorderColor": "#f0f0f1", + "checkedFocusBorderColor": "#f0f0f1", + "checkedDisabledBorderColor": "#56595f", + "invalidBorderColor": "#db3424", + "shadow": "none", + "transitionDuration": 180, + "focusRing": { + "color": "#d4fedc", + "offset": 0, + "shadow": "none", + "style": "none", + "width": 4 + }, + "lg": { "height": 20, "width": 20 }, + "sm": { "height": 8, "width": 8 } + }, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "sm": { "width": 16, "height": 16 }, + "lg": { "width": 20, "height": 20 }, + "icon": { + "size": 12, + "checkedColor": "#ffffff", + "checkedHoverColor": "#ffffff", + "disabledColor": "#a2a5a9", + "sm": { "size": 8 }, + "lg": { "size": 16 } + } + }, + "rating": { + "root": { + "gap": 8, + "transitionDuration": 180, + "focusRing": { + "color": "#d4fedc", + "offset": 0, + "shadow": "none", + "style": "none", + "width": 4 + } + }, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "icon": { + "size": 24, + "color": "#a2a5a9", + "hoverColor": "#facb75", + "activeColor": "#facb75" + } + }, + "ripple": { "colorScheme": { "root": { "background": "#404348" } } }, + "scrollpanel": { + "colorScheme": { "bar": { "background": "#cecfd2" } }, + "root": { "transitionDuration": 180 }, + "bar": { + "size": 8, + "borderRadius": 8, + "focusRing": { + "width": 0, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + } + }, + "select": { + "extend": { + "extOption": { "background": "#56595f", "gap": 8 }, + "extOptionGroup": { "gap": 8 }, + "readonlyBackground": "#2b2e33", + "borderWidth": 1, + "iconSize": 16 + }, + "root": { + "background": "#404348", + "disabledBackground": "#404348", + "filledBackground": "#404348", + "filledHoverBackground": "#404348", + "filledFocusBackground": "#404348", + "borderColor": "#56595f", + "hoverBorderColor": "#77f48a", + "focusBorderColor": "#77f48a", + "invalidBorderColor": "#db3424", + "color": "#ffffff", + "disabledColor": "#a2a5a9", + "placeholderColor": "#a2a5a9", + "invalidPlaceholderColor": "#fbacaa", + "shadow": "none", + "paddingX": 14, + "paddingY": 14, + "borderRadius": 14, + "transitionDuration": 180, + "sm": { "fontSize": 16, "paddingX": 14, "paddingY": 14 }, + "lg": { "fontSize": 16, "paddingX": 14, "paddingY": 14 }, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "none" + } + }, + "dropdown": { "width": 272, "color": "#f0f0f1" }, + "overlay": { + "background": "#404348", + "borderColor": "#404348", + "borderRadius": 14, + "color": "#ffffff", + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)" + }, + "list": { + "padding": 4, + "gap": 4, + "header": { + "paddingTop": 14, + "paddingRight": 14, + "paddingBottom": 0, + "paddingLeft": 14 + } + }, + "option": { + "focusBackground": "#2b2e33", + "selectedBackground": "#f0f0f1", + "selectedFocusBackground": "#cecfd2", + "color": "#ffffff", + "focusColor": "#ffffff", + "selectedColor": "#ffffff", + "selectedFocusColor": "#ffffff", + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 8 + }, + "optionGroup": { + "background": "#56595f", + "color": "#a2a5a9", + "fontWeight": 600, + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14 + }, + "clearIcon": { "color": "#f0f0f1" }, + "checkmark": { "color": "#ffffff", "gutterStart": -8, "gutterEnd": 8 }, + "emptyMessage": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14 + } + }, + "selectbutton": { + "extend": { + "gap": 4, + "paddingX": 4, + "paddingY": 4, + "iconSize": { "sm": 16, "md": 20, "lg": 24, "xlg": 28 }, + "checkedBackground": "#56595f", + "checkedBorderColor": "#2b2e33", + "checkedColor": "#f0f0f1", + "ext": { "borderRadius": 8 } + }, + "colorScheme": { + "root": { "invalidBorderColor": "#f47f77" }, + "extend": { "background": "#e2e2e4" } + }, + "root": { "borderRadius": 14 } + }, + "skeleton": { + "extend": { "minWidth": 32, "height": 32 }, + "colorScheme": { + "root": { "background": "#56595f", "animationBackground": "#6d7076" } + }, + "root": { "borderRadius": 14 } + }, + "slider": { + "colorScheme": { "handle": { "content": { "background": "#2b2e33" } } }, + "root": { "transitionDuration": 180 }, + "track": { "background": "#404348", "borderRadius": 14, "size": 4 }, + "range": { "background": "#f0f0f1" }, + "handle": { + "width": 20, + "height": 20, + "borderRadius": 1600, + "background": "#f0f0f1", + "hoverBackground": "#f0f0f1", + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "content": { + "borderRadius": 1600, + "hoverBackground": "#f0f0f1", + "width": 12, + "height": 12, + "shadow": "none" + } + } + }, + "splitter": { + "colorScheme": { "handle": { "background": "#2b2e33" } }, + "gutter": { "background": "#2b2e33" }, + "root": { + "background": "#404348", + "borderColor": "#404348", + "color": "#ffffff", + "transitionDuration": 180 + }, + "handle": { + "size": 4, + "borderRadius": 14, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + } + }, + "stepper": { + "extend": { + "extCaption": { "gap": 4 }, + "extStepNumber": { + "invalidBackground": "#db3424", + "invalidColor": "#fff0f0", + "invalidBorderColor": "#db3424", + "borderWidth": 1, + "iconSize": 24 + } + }, + "root": { "transitionDuration": 180 }, + "separator": { + "background": "#404348", + "activeBackground": "#f0f0f1", + "marginTop": 0, + "marginRight": 0, + "marginBottom": 0, + "marginLeft": 24, + "size": 1 + }, + "step": { "padding": 8, "gap": 8 }, + "stepHeader": { + "padding": 0, + "borderRadius": 0, + "gap": 8, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "stepTitle": { + "color": "#ffffff", + "activeColor": "#ffffff", + "fontWeight": 400 + }, + "stepNumber": { + "background": "#56595f", + "activeBackground": "#44e858", + "borderColor": "#404348", + "activeBorderColor": "#44e858", + "color": "#ffffff", + "activeColor": "#ffffff", + "size": 24, + "fontSize": 16, + "fontWeight": 700, + "borderRadius": 1600, + "shadow": "none" + }, + "steppanels": { "padding": 14 }, + "steppanel": { + "background": "#56595f", + "color": "#ffffff", + "padding": 0, + "indent": 0 + } + }, + "steps": { + "itemLink": { + "gap": 8, + "borderRadius": 14, + "focusRing": { + "color": "#d4fedc", + "offset": 0, + "shadow": "none", + "style": "none", + "width": 4 + } + }, + "itemLabel": { + "fontWeight": 400, + "activeColor": "#cecfd2", + "color": "#ffffff" + }, + "itemNumber": { + "background": "#56595f", + "size": 32, + "fontSize": 16, + "fontWeight": 700, + "borderRadius": 1600, + "shadow": "none", + "activeBackground": "#56595f", + "activeBorderColor": "#404348", + "activeColor": "#cecfd2", + "borderColor": "#404348", + "color": "#ffffff" + }, + "root": { "transitionDuration": 180 }, + "separator": { "background": "#404348" } + }, + "tabs": { + "colorScheme": { + "navButton": { "shadow": "none" }, + "tab": { + "activeBackground": "transparent", + "background": "transparent", + "hoverBackground": "transparent" + } + }, + "root": { "transitionDuration": 180 }, + "tablist": { + "borderTopWidth": 0, + "borderRightWidth": 0, + "borderBottomWidth": 1, + "borderLeftWidth": 0, + "background": "transparent", + "borderColor": "#404348" + }, + "tab": { + "borderWidth": 0, + "borderColor": "#404348", + "hoverBorderColor": "#404348", + "activeBorderColor": "#e2e2e4", + "color": "#a2a5a9", + "hoverColor": "#ffffff", + "activeColor": "#ffffff", + "padding": 14, + "fontWeight": 600, + "margin": 0, + "gap": 8, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "tabpanel": { + "background": "transparent", + "color": "#ffffff", + "padding": 14, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "navButton": { + "background": "#56595f", + "color": "#ffffff", + "hoverColor": "#cecfd2", + "width": 24, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "activeBar": { "height": 2, "bottom": -2, "background": "#f0f0f1" } + }, + "toast": { + "extend": { + "extInfo": { + "color": "#77baf4", + "closeButton": { "color": "#77baf4", "borderColor": "#4496e8" }, + "caption": { "color": "#ffffff" } + }, + "extAccentLine": { "width": 4 }, + "extCloseButton": { "width": 1 }, + "extSuccess": { + "color": "#77f48a", + "closeButton": { "color": "#77f48a", "borderColor": "#44e858" }, + "caption": { "color": "#ffffff" } + }, + "extWarn": { + "color": "#facb75", + "closeButton": { "color": "#facb75", "borderColor": "#f5b83d" }, + "caption": { "color": "#ffffff" } + }, + "extError": { + "color": "#f47f77", + "closeButton": { "color": "#f47f77", "borderColor": "#e85244" }, + "caption": { "color": "#ffffff" } + } + }, + "colorScheme": { + "contrast": { + "background": "#2b2e33", + "borderColor": "#2b2e33", + "closeButton": { + "focusRing": { "color": "#d4fedc", "shadow": "none" }, + "hoverBackground": "#404348" + }, + "color": "#ffffff", + "detailColor": "#e2e2e4", + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)" + }, + "error": { + "background": "#3b100c", + "borderColor": "#e85244", + "closeButton": { + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "hoverBackground": "#611912" + }, + "color": "#2b2e33", + "detailColor": "#2b2e33", + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)" + }, + "info": { + "background": "#0c243b", + "borderColor": "#4496e8", + "closeButton": { + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "hoverBackground": "#123a61" + }, + "color": "#2b2e33", + "detailColor": "#2b2e33", + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)" + }, + "root": { "blur": 0 }, + "secondary": { + "background": "#f0f0f1", + "borderColor": "#56595f", + "closeButton": { + "focusRing": { "color": "#d4fedc", "shadow": "none" }, + "hoverBackground": "#f0f0f1" + }, + "color": "#2b2e33", + "detailColor": "#a2a5a9", + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)" + }, + "success": { + "background": "#0c3b11", + "borderColor": "#44e858", + "closeButton": { + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "hoverBackground": "#12611b" + }, + "color": "#2b2e33", + "detailColor": "#2b2e33", + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)" + }, + "warn": { + "background": "#453008", + "borderColor": "#f5b83d", + "closeButton": { + "focusRing": { "color": "#d4fedc", "shadow": "none" }, + "hoverBackground": "#6d4c0b" + }, + "color": "#2b2e33", + "detailColor": "#2b2e33", + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)" + } + }, + "root": { + "width": 400, + "borderWidth": 1, + "borderRadius": 14, + "transitionDuration": 180 + }, + "icon": { "size": 36 }, + "content": { "padding": 14, "gap": 14 }, + "text": { "gap": 4 }, + "summary": { "fontWeight": 700, "fontSize": 16 }, + "detail": { "fontWeight": 400, "fontSize": 14 }, + "closeButton": { + "width": 32, + "height": 32, + "borderRadius": 14, + "focusRing": { "width": 4, "style": "none", "offset": 0 } + }, + "closeIcon": { "size": 16 } + }, + "tag": { + "colorScheme": { + "contrast": { "background": "#2b2e33", "color": "#ffffff" }, + "danger": { "background": "#8d2218", "color": "#fff0f0" }, + "info": { "background": "#18538d", "color": "#f0f9ff" }, + "primary": { "background": "#44e858", "color": "#2b2e33" }, + "secondary": { "background": "#e2e2e4", "color": "#2b2e33" }, + "success": { "background": "#77f48a", "color": "#f0fff3" }, + "warn": { "background": "#9d6d0e", "color": "#fff9f0" } + }, + "root": { + "fontSize": 12, + "fontWeight": 400, + "paddingTop": 4, + "paddingRight": 8, + "paddingBottom": 4, + "paddingLeft": 8, + "gap": 4, + "borderRadius": 8, + "roundedBorderRadius": 1600 + }, + "icon": { "size": 16 } + }, + "textarea": { + "extend": { + "readonlyBackground": "#2b2e33", + "borderWidth": 1, + "iconSize": 16, + "minHeight": 80 + }, + "root": { + "background": "#404348", + "disabledBackground": "#404348", + "filledBackground": "#404348", + "filledHoverBackground": "#404348", + "filledFocusBackground": "#404348", + "borderColor": "#56595f", + "hoverBorderColor": "#77f48a", + "focusBorderColor": "#77f48a", + "invalidBorderColor": "#db3424", + "color": "#f0f0f1", + "disabledColor": "#a2a5a9", + "placeholderColor": "#a2a5a9", + "invalidPlaceholderColor": "#fbacaa", + "shadow": "none", + "paddingX": 14, + "paddingY": 14, + "borderRadius": 14, + "transitionDuration": 180, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "none" + }, + "lg": { "fontSize": 16, "paddingX": 14, "paddingY": 14 }, + "sm": { "fontSize": 16, "paddingX": 14, "paddingY": 14 } + }, + "sm": { "fontSize": 16, "paddingX": 8, "paddingY": 8 }, + "lg": { "fontSize": 16, "paddingX": 14, "paddingY": 14 } + }, + "tieredmenu": { + "extend": { + "iconSize": 20, + "extSubmenu": { "borderColor": "#404348", "background": "#56595f" }, + "extItem": { "caption": { "gap": 4, "color": "#a2a5a9" } } + }, + "root": { + "background": "#404348", + "borderColor": "transparent", + "color": "#ffffff", + "borderRadius": 14, + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "transitionDuration": 180 + }, + "list": { "padding": 4, "gap": 4 }, + "item": { + "focusBackground": "#2b2e33", + "activeBackground": "#f0f0f1", + "color": "#ffffff", + "focusColor": "#ffffff", + "activeColor": "#181a1f", + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 8, + "gap": 8, + "icon": { + "color": "#ffffff", + "focusColor": "#ffffff", + "activeColor": "#181a1f" + } + }, + "submenu": { "mobileIndent": 14 }, + "separator": { "borderColor": "#404348" }, + "submenuIcon": { + "activeColor": "#cecfd2", + "color": "#ffffff", + "focusColor": "#cecfd2", + "size": 14 + } + }, + "timeline": { + "extend": { "extEvent": { "gap": 4 } }, + "event": { "minHeight": 64 }, + "vertical": { + "eventContent": { + "paddingTop": 0, + "paddingRight": 20, + "paddingBottom": 0, + "paddingLeft": 20 + } + }, + "horizontal": { + "eventContent": { + "paddingTop": 20, + "paddingRight": 0, + "paddingBottom": 20, + "paddingLeft": 0 + } + }, + "eventMarker": { + "size": 16, + "borderRadius": 14, + "borderWidth": 4, + "background": "#56595f", + "borderColor": "#44e858", + "content": { + "borderRadius": 14, + "size": 12, + "background": "transparent", + "insetShadow": "none" + } + }, + "eventConnector": { "color": "#404348", "size": 1 } + }, + "togglebutton": { + "extend": { + "ext": { "gap": 14 }, + "iconSize": { "sm": 16, "md": 20, "lg": 24 }, + "iconOnlyWidth": 40, + "hoverBorderColor": "#56595f", + "checkedHoverColor": "#ffffff", + "checkedHoverBackground": "#e2e2e4", + "checkedHoverBorderColor": "#e2e2e4", + "extXlg": { + "paddingTop": 20, + "paddingRight": 20, + "paddingBottom": 20, + "paddingLeft": 20, + "iconOnlyWidth": 64 + }, + "extSm": { "iconOnlyWidth": 32 }, + "extLg": { "iconOnlyWidth": 56 } + }, + "colorScheme": { + "root": { + "hoverBackground": "#cecfd2", + "background": "#e2e2e4", + "borderColor": "#e2e2e4", + "color": "#2b2e33", + "hoverColor": "#2b2e33", + "checkedBackground": "#2b2e33", + "checkedColor": "#ffffff", + "checkedBorderColor": "#2b2e33", + "disabledBackground": "#e2e2e4", + "disabledBorderColor": "#e2e2e4", + "disabledColor": "#85888e", + "invalidBorderColor": "#f47f77" + }, + "icon": { + "color": "#2b2e33", + "hoverColor": "#2b2e33", + "checkedColor": "#ffffff", + "disabledColor": "#85888e" + }, + "content": { "checkedBackground": "transparent" } + }, + "root": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 1600, + "gap": 8, + "fontWeight": 600, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "sm": { + "fontSize": 14, + "paddingTop": 4, + "paddingRight": 14, + "paddingBottom": 4, + "paddingLeft": 14 + }, + "lg": { + "fontSize": 20, + "paddingTop": 14, + "paddingRight": 24, + "paddingBottom": 14, + "paddingLeft": 24 + }, + "transitionDuration": 180, + "background": "#404348", + "borderColor": "#404348", + "checkedBackground": "#404348", + "checkedBorderColor": "#404348", + "checkedColor": "#ffffff", + "color": "#ffffff", + "disabledBackground": "#404348", + "disabledBorderColor": "#404348", + "disabledColor": "#a2a5a9", + "hoverColor": "#cecfd2", + "invalidBorderColor": "#db3424" + }, + "content": { + "checkedShadow": "none", + "padding": 0, + "borderRadius": 0, + "sm": { "padding": 0 }, + "lg": { "padding": 0 }, + "checkedBackground": "#404348" + }, + "icon": { + "checkedColor": "#ffffff", + "color": "#ffffff", + "disabledColor": "#a2a5a9", + "hoverColor": "#cecfd2" + } + }, + "toggleswitch": { + "colorScheme": { + "handle": { + "background": "#56595f", + "checkedBackground": "#56595f", + "checkedColor": "#2b2e33", + "checkedHoverBackground": "#56595f", + "checkedHoverColor": "#2b2e33", + "color": "#2b2e33", + "disabledBackground": "#85888e", + "hoverBackground": "#56595f", + "hoverColor": "#2b2e33" + }, + "root": { + "background": "#6d7076", + "checkedBackground": "#2b2e33", + "checkedHoverBackground": "#404348", + "disabledBackground": "#e2e2e4", + "hoverBackground": "#85888e" + } + }, + "root": { + "width": 40, + "height": 24, + "borderRadius": 1600, + "gap": 4, + "borderWidth": 1, + "shadow": "none", + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "none" + }, + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "checkedBorderColor": "transparent", + "checkedHoverBorderColor": "transparent", + "invalidBorderColor": "#db3424", + "transitionDuration": 180, + "slideDuration": 180 + }, + "handle": { "borderRadius": 1600, "size": 16 } + }, + "tooltip": { + "colorScheme": { "root": { "background": "#2b2e33", "color": "#ffffff" } }, + "root": { + "maxWidth": 400, + "gutter": 4, + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 8 + } + }, + "tree": { + "root": { + "background": "#404348", + "color": "#ffffff", + "padding": 14, + "gap": 4, + "indent": 14, + "transitionDuration": 180 + }, + "node": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "color": "#ffffff", + "selectedColor": "#ffffff", + "gap": 4, + "borderRadius": 14, + "focusRing": { + "color": "#d4fedc", + "offset": 0, + "shadow": "none", + "style": "none", + "width": 4 + }, + "hoverBackground": "#2b2e33", + "hoverColor": "#ffffff", + "selectedBackground": "#f0f0f1" + }, + "nodeIcon": { + "selectedColor": "#ffffff", + "color": "#ffffff", + "hoverColor": "#cecfd2" + }, + "nodeToggleButton": { + "borderRadius": 4, + "size": 28, + "selectedHoverBackground": "#f0f0f1", + "color": "#ffffff", + "focusRing": { + "color": "#d4fedc", + "offset": 0, + "shadow": "none", + "style": "none", + "width": 4 + }, + "hoverBackground": "#2b2e33", + "hoverColor": "#cecfd2", + "selectedHoverColor": "#cecfd2" + }, + "loadingIcon": { "size": 16 }, + "filter": { + "marginTop": 0, + "marginRight": 0, + "marginBottom": 8, + "marginLeft": 0 + } + }, + "overlaybadge": { + "root": { "outline": { "width": 0, "color": "transparent" } } + } +} diff --git a/src/theme/tokens/components/light.json b/src/theme/tokens/components/light.json new file mode 100644 index 00000000..be686424 --- /dev/null +++ b/src/theme/tokens/components/light.json @@ -0,0 +1,2920 @@ +{ + "accordion": { + "extend": { "extHeader": { "iconSize": 20, "gap": 8 } }, + "colorScheme": { + "header": { + "background": "transparent", + "hoverBackground": "transparent", + "activeBackground": "transparent", + "activeHoverBackground": "transparent" + } + }, + "header": { + "color": "#2b2e33", + "hoverColor": "#56595f", + "activeColor": "#2b2e33", + "activeHoverColor": "#56595f", + "borderColor": "transparent", + "paddingTop": 14, + "paddingRight": 0, + "paddingBottom": 14, + "paddingLeft": 0, + "fontWeight": 700, + "borderRadius": 0, + "borderWidth": 0, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "inset 0 0 0 4px #d4fedc" + }, + "toggleIcon": { + "color": "#2b2e33", + "hoverColor": "#56595f", + "activeColor": "#2b2e33", + "activeHoverColor": "#56595f" + }, + "last": { "bottomBorderRadius": 0, "activeBottomBorderRadius": 0 }, + "first": { "borderWidth": 0, "topBorderRadius": 0 } + }, + "root": { "transitionDuration": 180 }, + "panel": { + "borderTopWidth": 0, + "borderRightWidth": 0, + "borderBottomWidth": 4, + "borderLeftWidth": 0, + "borderColor": "#cecfd2" + }, + "content": { + "borderTopWidth": 1, + "borderRightWidth": 0, + "borderBottomWidth": 0, + "borderLeftWidth": 0, + "borderColor": "transparent", + "background": "transparent", + "color": "#2b2e33", + "paddingTop": 0, + "paddingRight": 24, + "paddingBottom": 14, + "paddingLeft": 24 + } + }, + "autocomplete": { + "extend": { "extOption": { "gap": 8 }, "extOptionGroup": { "gap": 8 } }, + "colorScheme": { + "chip": { "focusBackground": "#e2e2e4", "focusColor": "#2b2e33" }, + "dropdown": { + "background": "#ffffff", + "hoverBackground": "#ffffff", + "activeBackground": "#ffffff", + "color": "#181a1f", + "hoverColor": "#181a1f", + "activeColor": "#181a1f" + } + }, + "root": { + "background": "#ffffff", + "disabledBackground": "#e2e2e4", + "filledBackground": "#ffffff", + "filledHoverBackground": "#ffffff", + "filledFocusBackground": "#ffffff", + "borderColor": "#cecfd2", + "hoverBorderColor": "#1dc831", + "focusBorderColor": "#1dc831", + "invalidBorderColor": "#f47f77", + "color": "#181a1f", + "disabledColor": "#85888e", + "placeholderColor": "#85888e", + "invalidPlaceholderColor": "#db3424", + "shadow": "none", + "paddingX": 14, + "paddingY": 14, + "borderRadius": 14, + "transitionDuration": 180, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "none" + } + }, + "overlay": { + "background": "#ffffff", + "borderColor": "#e2e2e4", + "borderRadius": 14, + "color": "#2b2e33", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "list": { "padding": 4, "gap": 4 }, + "option": { + "focusBackground": "#f0f0f1", + "selectedBackground": "#2b2e33", + "selectedFocusBackground": "#56595f", + "color": "#2b2e33", + "focusColor": "#2b2e33", + "selectedColor": "#ffffff", + "selectedFocusColor": "#ffffff", + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 8 + }, + "optionGroup": { + "background": "#ffffff", + "color": "#85888e", + "fontWeight": 600, + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14 + }, + "dropdown": { + "width": 272, + "borderColor": "#cecfd2", + "hoverBorderColor": "#1dc831", + "activeBorderColor": "#1dc831", + "borderRadius": 14, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "none" + }, + "sm": { "width": 240 }, + "lg": { "width": 304 } + }, + "chip": { "borderRadius": 8 }, + "emptyMessage": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14 + } + }, + "avatar": { + "extend": { "borderColor": "#cecfd2", "circle": { "borderRadius": 1600 } }, + "root": { + "width": 32, + "height": 32, + "fontSize": 16, + "color": "#2b2e33", + "background": "#44e858", + "borderRadius": 14 + }, + "icon": { "size": 16 }, + "group": { "borderColor": "#ffffff", "offset": -12 }, + "lg": { + "width": 40, + "height": 40, + "fontSize": 16, + "icon": { "size": 16 }, + "group": { "offset": -12 } + }, + "xl": { + "width": 56, + "height": 56, + "icon": { "size": 24 }, + "group": { "offset": -24 }, + "fontSize": 16 + } + }, + "badge": { + "extend": { + "extDot": { + "success": { "background": "#77f48a" }, + "info": { "background": "#77baf4" }, + "warn": { "background": "#facb75" }, + "danger": { "background": "#f47f77" }, + "lg": { "size": 12 }, + "xlg": { "size": 16 } + }, + "ext": { "padding": 0 } + }, + "colorScheme": { + "primary": { "color": "#2b2e33", "background": "#44e858" }, + "secondary": { "color": "#ffffff", "background": "#2b2e33" }, + "success": { "color": "#0e4514", "background": "#aafbb7" }, + "info": { "color": "#0e2a45", "background": "#aad7fb" }, + "warn": { "color": "#4f3709", "background": "#fddeaa" }, + "danger": { "color": "#45120e", "background": "#fbacaa" }, + "contrast": { "background": "#2b2e33", "color": "#ffffff" } + }, + "root": { + "borderRadius": 8, + "padding": 8, + "fontSize": 12, + "fontWeight": 400, + "minWidth": 24, + "height": 24 + }, + "dot": { "size": 8 }, + "sm": { "fontSize": 12, "minWidth": 0, "height": 0 }, + "lg": { "fontSize": 12, "minWidth": 28, "height": 28 }, + "xl": { "fontSize": 12, "minWidth": 32, "height": 32 } + }, + "breadcrumb": { + "extend": { + "hoverBackground": "#f0f0f1", + "iconSize": 20, + "extItem": { "padding": 4 } + }, + "root": { + "padding": 0, + "background": "transparent", + "gap": 0, + "transitionDuration": 180 + }, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "item": { + "color": "#2b2e33", + "hoverColor": "#56595f", + "borderRadius": 4, + "gap": 8, + "icon": { "color": "#2b2e33", "hoverColor": "#56595f" }, + "focusRing": { + "color": "#d4fedc", + "offset": 0, + "shadow": "none", + "style": "none", + "width": 4 + } + }, + "separator": { "color": "#2b2e33" } + }, + "button": { + "extend": { + "disabledBackground": "#e2e2e4", + "extOutlined": { + "danger": { "focusBackground": "transparent" }, + "warn": { "focusBackground": "transparent" }, + "info": { "focusBackground": "transparent" }, + "help": { "focusBackground": "transparent" }, + "success": { "focusBackground": "transparent" } + }, + "disabledColor": "#85888e", + "extText": { + "danger": { "focusBackground": "transparent" }, + "warn": { "focusBackground": "transparent" }, + "info": { "focusBackground": "transparent" }, + "help": { "focusBackground": "transparent" }, + "success": { "focusBackground": "transparent" } + }, + "extLink": { + "background": "transparent", + "colorHover": "#56595f", + "paddingX": 0, + "paddingY": 4, + "sm": { "iconOnlyWidth": 16 }, + "base": { "iconOnlyWidth": 24 }, + "lg": { "iconOnlyWidth": 28 }, + "xlg": { "iconOnlyWidth": 32 } + }, + "extSm": { "borderRadius": 14, "gap": 8 }, + "extLg": { "borderRadius": 14, "gap": 14, "height": 56 }, + "extXlg": { + "borderRadius": 14, + "gap": 14, + "iconOnlyWidth": 64, + "paddingX": 24, + "paddingY": 20, + "height": 64 + }, + "borderWidth": 1, + "iconSize": { "sm": 16, "md": 20, "lg": 24 } + }, + "colorScheme": { + "root": { + "primary": { + "background": "#44e858", + "hoverBackground": "#1dc831", + "activeBackground": "#168322", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "#2b2e33", + "hoverColor": "#2b2e33", + "activeColor": "#2b2e33", + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "secondary": { + "background": "#2b2e33", + "hoverBackground": "#404348", + "activeBackground": "#56595f", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "#ffffff", + "hoverColor": "#ffffff", + "activeColor": "#ffffff", + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "contrast": { + "background": "#e2e2e4", + "hoverBackground": "#cecfd2", + "activeBackground": "#a2a5a9", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "#2b2e33", + "hoverColor": "#2b2e33", + "activeColor": "#2b2e33", + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "info": { + "background": "#aad7fb", + "hoverBackground": "#77baf4", + "activeBackground": "#4496e8", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "#0e2a45", + "hoverColor": "#0c243b", + "activeColor": "#0e2a45", + "focusRing": { "color": "#d4fedc", "shadow": "none" } + }, + "success": { + "background": "#aafbb7", + "hoverBackground": "#77f48a", + "activeBackground": "#44e858", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "#0e4514", + "hoverColor": "#0c3b11", + "activeColor": "#0e4514", + "focusRing": { "color": "#d4fedc", "shadow": "none" } + }, + "warn": { + "background": "#fddeaa", + "hoverBackground": "#facb75", + "activeBackground": "#f5b83d", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "#4f3709", + "hoverColor": "#453008", + "activeColor": "#4f3709", + "focusRing": { "color": "#d4fedc", "shadow": "none" } + }, + "help": { + "background": "#d8b4fe", + "hoverBackground": "#c084fc", + "activeBackground": "#a855f7", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "#581c87", + "hoverColor": "#3b0764", + "activeColor": "#581c87", + "focusRing": { "color": "#d4fedc", "shadow": "none" } + }, + "danger": { + "background": "#fbacaa", + "hoverBackground": "#f47f77", + "activeBackground": "#e85244", + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "activeBorderColor": "transparent", + "color": "#45120e", + "hoverColor": "#3b100c", + "activeColor": "#45120e", + "focusRing": { "color": "#d4fedc", "shadow": "none" } + } + }, + "outlined": { + "primary": { + "hoverBackground": "#fafffb", + "activeBackground": "#f0fff3", + "borderColor": "#d4fedc", + "color": "#44e858" + }, + "success": { + "hoverBackground": "#f0fff3", + "activeBackground": "#d4fedc", + "borderColor": "#1dc831", + "color": "#1dc831" + }, + "info": { + "hoverBackground": "#f0f9ff", + "activeBackground": "#d4ecfe", + "borderColor": "#1e76cd", + "color": "#1e76cd" + }, + "warn": { + "hoverBackground": "#fff9f0", + "activeBackground": "#ffeed4", + "borderColor": "#dc9710", + "color": "#dc9710" + }, + "help": { + "hoverBackground": "#f3e8ff", + "activeBackground": "#e9d5ff", + "borderColor": "#9333ea", + "color": "#9333ea" + }, + "danger": { + "hoverBackground": "#fff0f0", + "activeBackground": "#fed4d4", + "borderColor": "#db3424", + "color": "#db3424" + }, + "contrast": { + "activeBackground": "#56595f", + "borderColor": "#2b2e33", + "color": "#ffffff", + "hoverBackground": "#404348" + }, + "plain": { + "activeBackground": "#e2e2e4", + "borderColor": "#cecfd2", + "color": "#2b2e33", + "hoverBackground": "#f0f0f1" + }, + "secondary": { + "activeBackground": "#e2e2e4", + "borderColor": "#cecfd2", + "color": "#2b2e33", + "hoverBackground": "#f0f0f1" + } + }, + "text": { + "primary": { + "hoverBackground": "#f0f0f1", + "activeBackground": "#e2e2e4", + "color": "#2b2e33" + }, + "success": { + "hoverBackground": "#f0fff3", + "activeBackground": "#d4fedc", + "color": "#1dc831" + }, + "info": { + "hoverBackground": "#f0f9ff", + "activeBackground": "#d4ecfe", + "color": "#1e76cd" + }, + "warn": { + "hoverBackground": "#fff9f0", + "activeBackground": "#ffeed4", + "color": "#dc9710" + }, + "help": { + "hoverBackground": "#f3e8ff", + "activeBackground": "#e9d5ff", + "color": "#9333ea" + }, + "danger": { + "hoverBackground": "#fff0f0", + "activeBackground": "#fed4d4", + "color": "#db3424" + }, + "contrast": { + "activeBackground": "#56595f", + "color": "#ffffff", + "hoverBackground": "#404348" + }, + "plain": { + "activeBackground": "#e2e2e4", + "color": "#2b2e33", + "hoverBackground": "#f0f0f1" + }, + "secondary": { + "activeBackground": "#e2e2e4", + "color": "#2b2e33", + "hoverBackground": "#f0f0f1" + } + }, + "link": { + "color": "#2b2e33", + "hoverColor": "#56595f", + "activeColor": "#85888e" + } + }, + "root": { + "borderRadius": 14, + "roundedBorderRadius": 1600, + "gap": 8, + "paddingX": 14, + "paddingY": 8, + "iconOnlyWidth": 40, + "raisedShadow": "none", + "badgeSize": 16, + "transitionDuration": 180, + "focusRing": { "width": 4, "style": "none", "offset": 0 }, + "sm": { + "fontSize": 14, + "iconOnlyWidth": 32, + "paddingX": 14, + "paddingY": 8 + }, + "lg": { + "fontSize": 20, + "iconOnlyWidth": 56, + "paddingX": 24, + "paddingY": 14 + }, + "label": { "fontWeight": 600 } + } + }, + "card": { + "extend": { "borderColor": "#e2e2e4", "borderWidth": 1 }, + "root": { + "background": "#ffffff", + "borderRadius": 14, + "color": "#2b2e33", + "shadow": "none" + }, + "body": { "padding": 14, "gap": 14 }, + "caption": { "gap": 4 }, + "title": { "fontSize": 18, "fontWeight": 600 }, + "subtitle": { "color": "#85888e" } + }, + "carousel": { + "colorScheme": { + "indicator": { + "background": "#cecfd2", + "hoverBackground": "#a2a5a9", + "activeBackground": "#2b2e33" + } + }, + "root": { "transitionDuration": 180 }, + "content": { "gap": 8 }, + "indicatorList": { "padding": 14, "gap": 8 }, + "indicator": { + "width": 8, + "height": 8, + "borderRadius": 1600, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + } + }, + "checkbox": { + "root": { + "borderRadius": 8, + "extend": { "borderWidth": 1 }, + "width": 24, + "height": 24, + "background": "#ffffff", + "checkedBackground": "#2b2e33", + "checkedHoverBackground": "#404348", + "disabledBackground": "#e2e2e4", + "filledBackground": "#ffffff", + "borderColor": "#cecfd2", + "hoverBorderColor": "#2b2e33", + "focusBorderColor": "#2b2e33", + "checkedBorderColor": "#2b2e33", + "checkedHoverBorderColor": "#404348", + "checkedFocusBorderColor": "#44e858", + "checkedDisabledBorderColor": "#cecfd2", + "invalidBorderColor": "#f47f77", + "shadow": "none", + "focusRing": { + "focusRing": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)", + "width": 4 + }, + "sm": { "width": 8, "height": 8 }, + "lg": { "width": 20, "height": 20 }, + "transitionDuration": 180 + }, + "icon": { + "size": 16, + "color": "#181a1f", + "checkedColor": "#ffffff", + "checkedHoverColor": "#ffffff", + "disabledColor": "#85888e", + "sm": { "size": 12 }, + "lg": { "size": 20 } + } + }, + "chip": { + "extend": { "borderColor": "transparent", "borderWidth": 1 }, + "root": { + "borderRadius": 8, + "paddingX": 8, + "paddingY": 4, + "gap": 8, + "transitionDuration": 180 + }, + "colorScheme": { + "root": { "background": "#e2e2e4", "color": "#2b2e33" }, + "icon": { "color": "#2b2e33" }, + "removeIcon": { "color": "#2b2e33" } + }, + "image": { "width": 0, "height": 0 }, + "icon": { "size": 16 }, + "removeIcon": { + "size": 16, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + } + }, + "confirmdialog": { + "extend": { + "extIcon": { + "success": "#44e858", + "info": "#4496e8", + "help": "#a855f7", + "warn": "#f5b83d", + "danger": "#e85244" + } + }, + "icon": { "size": 24, "color": "#2b2e33" }, + "content": { "gap": 0 } + }, + "confirmpopup": { + "root": { + "background": "#ffffff", + "color": "#2b2e33", + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "gutter": 14, + "arrowOffset": 20, + "borderColor": "#e2e2e4", + "borderRadius": 14 + }, + "content": { "padding": 14, "gap": 14 }, + "icon": { "size": 24, "color": "#2b2e33" }, + "footer": { + "gap": 8, + "paddingTop": 0, + "paddingRight": 24, + "paddingBottom": 24, + "paddingLeft": 24 + } + }, + "contextmenu": { + "root": { + "background": "#ffffff", + "color": "#2b2e33", + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "borderColor": "#e2e2e4", + "borderRadius": 14, + "transitionDuration": 180 + }, + "list": { + "paddingTop": 8, + "paddingRight": 0, + "paddingBottom": 8, + "paddingLeft": 0, + "gap": 4 + }, + "item": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "gap": 8, + "activeBackground": "#e2e2e4", + "activeColor": "#56595f", + "borderRadius": 14, + "color": "#2b2e33", + "focusBackground": "#f0f0f1", + "focusColor": "#56595f", + "icon": { + "activeColor": "#56595f", + "color": "#2b2e33", + "focusColor": "#56595f" + } + }, + "submenu": { "mobileIndent": 20 }, + "separator": { "borderColor": "#e2e2e4" }, + "submenuIcon": { + "activeColor": "#56595f", + "color": "#2b2e33", + "focusColor": "#56595f", + "size": 14 + } + }, + "datatable": { + "colorScheme": { + "root": { "color": "#2b2e33", "borderColor": "#e2e2e4" }, + "header": { "background": "#fafafa", "color": "#2b2e33" }, + "headerCell": { + "background": "#fafafa", + "hoverBackground": "#f0f0f1", + "color": "#2b2e33" + }, + "footer": { "background": "#f0f0f1", "color": "#2b2e33" }, + "footerCell": { "background": "#f0f0f1", "color": "#2b2e33" }, + "row": { "stripedBackground": "#f0f0f1" }, + "bodyCell": { "selectedBorderColor": "#e2e2e4" } + }, + "extended": { + "extHeaderCell": { "selectedHoverBackground": "#404348" }, + "extRow": { + "selectedHoverBackground": "#404348", + "stripedHoverBackground": "#f0f0f1", + "iconSize": 20 + } + }, + "root": { "transitionDuration": 180 }, + "header": { + "borderColor": "#e2e2e4", + "borderTopWidth": 1, + "borderRightWidth": 0, + "borderBottomWidth": 1, + "borderLeftWidth": 0, + "padding": 14, + "sm": { "padding": 8 }, + "lg": { "padding": 20 } + }, + "headerCell": { + "selectedBackground": "#2b2e33", + "borderColor": "#e2e2e4", + "hoverColor": "#56595f", + "selectedColor": "#ffffff", + "gap": 8, + "padding": 14, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "inset 0 0 0 4px #d4fedc" + }, + "sm": { "padding": 8 }, + "lg": { "padding": 20 } + }, + "columnTitle": { "fontWeight": 700 }, + "row": { + "background": "#ffffff", + "hoverBackground": "#f0f0f1", + "selectedBackground": "#2b2e33", + "color": "#2b2e33", + "hoverColor": "#56595f", + "selectedColor": "#ffffff", + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "inset 0 0 0 4px #d4fedc" + } + }, + "bodyCell": { + "borderColor": "#e2e2e4", + "padding": 14, + "sm": { "padding": 8 }, + "lg": { "padding": 20 } + }, + "footerCell": { + "borderColor": "#e2e2e4", + "padding": 14, + "sm": { "padding": 8 }, + "lg": { "padding": 20 } + }, + "columnFooter": { "fontWeight": 700 }, + "dropPoint": { "color": "#2b2e33" }, + "footer": { + "borderColor": "#e2e2e4", + "borderTopWidth": 0, + "borderRightWidth": 0, + "borderBottomWidth": 1, + "borderLeftWidth": 0, + "padding": 14, + "sm": { "padding": 8 }, + "lg": { "padding": 20 } + }, + "columnResizer": { "width": 8 }, + "resizeIndicator": { "width": 1, "color": "#2b2e33" }, + "sortIcon": { "color": "#2b2e33", "hoverColor": "#56595f", "size": 16 }, + "loadingIcon": { "size": 32 }, + "rowToggleButton": { + "hoverBackground": "#f0f0f1", + "selectedHoverBackground": "#f0f0f1", + "color": "#2b2e33", + "hoverColor": "#2b2e33", + "selectedHoverColor": "#2b2e33", + "size": 32, + "borderRadius": 14, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "filter": { + "inlineGap": 8, + "rule": { "borderColor": "#e2e2e4" }, + "constraintList": { "padding": 4, "gap": 4 }, + "constraint": { + "focusBackground": "#f0f0f1", + "selectedBackground": "#2b2e33", + "selectedFocusBackground": "#56595f", + "color": "#2b2e33", + "focusColor": "#2b2e33", + "selectedColor": "#ffffff", + "selectedFocusColor": "#ffffff", + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 8, + "separator": { "borderColor": "#e2e2e4" } + }, + "overlaySelect": { + "background": "#ffffff", + "color": "#2b2e33", + "borderColor": "#e2e2e4", + "borderRadius": 14, + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)" + }, + "overlayPopover": { + "background": "#ffffff", + "color": "#2b2e33", + "borderColor": "#e2e2e4", + "borderRadius": 14, + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "padding": 14, + "gap": 4 + } + }, + "paginatorTop": { + "borderColor": "#cecfd2", + "borderTopWidth": 0, + "borderRightWidth": 0, + "borderBottomWidth": 1, + "borderLeftWidth": 0 + }, + "paginatorBottom": { + "borderTopWidth": 0, + "borderRightWidth": 0, + "borderBottomWidth": 1, + "borderLeftWidth": 0, + "borderColor": "#e2e2e4" + } + }, + "dataview": { + "root": { + "borderWidth": 1, + "borderRadius": 4, + "padding": 0, + "borderColor": "#e2e2e4" + }, + "header": { + "borderTopWidth": 0, + "borderRightWidth": 0, + "borderBottomWidth": 1, + "borderLeftWidth": 0, + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 0, + "color": "#2b2e33", + "borderColor": "#e2e2e4" + }, + "content": { + "background": "#ffffff", + "color": "#2b2e33", + "borderColor": "#e2e2e4", + "borderWidth": 0, + "padding": 0, + "borderRadius": 0 + }, + "footer": { + "background": "#f0f0f1", + "color": "#2b2e33", + "borderTopWidth": 1, + "borderRightWidth": 0, + "borderBottomWidth": 0, + "borderLeftWidth": 0, + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 0, + "borderColor": "#e2e2e4" + }, + "paginatorTop": { + "borderTopWidth": 0, + "borderRightWidth": 0, + "borderBottomWidth": 1, + "borderLeftWidth": 0, + "borderColor": "#e2e2e4" + }, + "paginatorBottom": { + "borderTopWidth": 1, + "borderRightWidth": 0, + "borderBottomWidth": 0, + "borderLeftWidth": 0, + "borderColor": "#e2e2e4" + }, + "colorScheme": { "header": { "background": "#ffffff", "color": "#2b2e33" } } + }, + "datepicker": { + "extend": { + "extDate": { "selectedHoverBackground": "#404348" }, + "extToday": { "hoverBackground": "#f0f0f1", "borderColor": "#404348" }, + "extTitle": { "width": 336 }, + "extTimePicker": { "minWidth": 304, "color": "#2b2e33" } + }, + "colorScheme": { + "dropdown": { + "background": "#ffffff", + "hoverBackground": "#f0f0f1", + "activeBackground": "#2b2e33", + "color": "#2b2e33", + "hoverColor": "#2b2e33", + "activeColor": "#ffffff" + }, + "today": { "background": "transparent", "color": "#2b2e33" } + }, + "panel": { + "background": "#ffffff", + "borderColor": "#e2e2e4", + "color": "#2b2e33", + "borderRadius": 14, + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "padding": 0 + }, + "header": { + "background": "#ffffff", + "borderColor": "#e2e2e4", + "color": "#2b2e33", + "padding": 14 + }, + "title": { "gap": 8, "fontWeight": 700 }, + "selectMonth": { + "hoverBackground": "#f0f0f1", + "color": "#2b2e33", + "hoverColor": "#56595f", + "borderRadius": 14, + "padding": 8 + }, + "inputIcon": { "color": "#85888e" }, + "dropdown": { + "width": 272, + "borderColor": "#cecfd2", + "hoverBorderColor": "#cecfd2", + "activeBorderColor": "#cecfd2", + "borderRadius": 14, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "sm": { "width": 0 }, + "lg": { "width": 0 } + }, + "group": { "borderColor": "#e2e2e4", "gap": 14 }, + "selectYear": { + "hoverBackground": "#f0f0f1", + "color": "#2b2e33", + "hoverColor": "#56595f", + "borderRadius": 14, + "padding": 4 + }, + "dayView": { "margin": 14 }, + "weekDay": { "padding": 4, "fontWeight": 700, "color": "#2b2e33" }, + "date": { + "hoverBackground": "#f0f0f1", + "selectedBackground": "#2b2e33", + "rangeSelectedBackground": "#f0f0f1", + "color": "#2b2e33", + "hoverColor": "#2b2e33", + "selectedColor": "#ffffff", + "rangeSelectedColor": "#2b2e33", + "width": 32, + "height": 32, + "borderRadius": 8, + "padding": 4, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "monthView": { + "marginTop": 0, + "marginRight": 0, + "marginBottom": 0, + "marginLeft": 0 + }, + "month": { "padding": 0, "borderRadius": 0 }, + "yearView": { + "marginTop": 0, + "marginRight": 0, + "marginBottom": 0, + "marginLeft": 0 + }, + "year": { "padding": 0, "borderRadius": 0 }, + "buttonbar": { "padding": 14, "borderColor": "#e2e2e4" }, + "timePicker": { + "padding": 14, + "borderColor": "#e2e2e4", + "gap": 8, + "buttonGap": 4 + }, + "root": { "transitionDuration": 180 } + }, + "dialog": { + "extend": { "borderWidth": 1, "backdrop": "rgba(0, 0, 0, 0.4000)" }, + "root": { + "background": "#ffffff", + "borderColor": "#e2e2e4", + "color": "#2b2e33", + "borderRadius": 1600, + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)" + }, + "header": { + "paddingTop": 24, + "paddingRight": 24, + "paddingBottom": 14, + "paddingLeft": 24, + "gap": 8 + }, + "title": { "fontSize": 20, "fontWeight": 600 }, + "content": { "padding": 24 }, + "footer": { + "paddingTop": 0, + "paddingRight": 24, + "paddingBottom": 24, + "paddingLeft": 24, + "gap": 8 + } + }, + "divider": { + "extend": { "content": { "gap": 8 }, "iconSize": 16 }, + "horizontal": { + "marginTop": 14, + "marginRight": 0, + "marginBottom": 14, + "marginLeft": 0, + "paddingTop": 0, + "paddingRight": 14, + "paddingBottom": 0, + "paddingLeft": 14, + "content": { + "paddingTop": 0, + "paddingRight": 8, + "paddingBottom": 0, + "paddingLeft": 8 + } + }, + "vertical": { + "marginTop": 0, + "marginRight": 14, + "marginBottom": 0, + "marginLeft": 14, + "paddingTop": 14, + "paddingRight": 0, + "paddingBottom": 14, + "paddingLeft": 0, + "content": { + "paddingTop": 8, + "paddingRight": 0, + "paddingBottom": 8, + "paddingLeft": 0 + } + }, + "content": { "background": "#ffffff", "color": "#2b2e33" }, + "root": { "borderColor": "#e2e2e4" } + }, + "drawer": { + "extend": { + "borderRadius": 8, + "borderWidth": 1, + "width": 400, + "extHeader": { "gap": 8, "borderColor": "#e2e2e4" }, + "margin": 8, + "scale": 2, + "backdrop": "rgba(0, 0, 0, 0.4000)" + }, + "root": { + "background": "#ffffff", + "borderColor": "#e2e2e4", + "color": "#2b2e33", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "header": { + "paddingTop": 24, + "paddingRight": 24, + "paddingBottom": 14, + "paddingLeft": 24 + }, + "title": { "fontSize": 20, "fontWeight": 600 }, + "content": { "padding": 24 }, + "footer": { + "paddingTop": 0, + "paddingRight": 24, + "paddingBottom": 24, + "paddingLeft": 24 + } + }, + "fileupload": { + "extend": { + "extDragNdrop": { + "background": "#ffffff", + "borderRadius": 14, + "iconSize": 32, + "padding": 14, + "info": { "gap": 4 } + }, + "extFile": { "iconSize": 20 }, + "extContent": { "borderRadius": 14, "highlightBorderDefault": "#cecfd2" } + }, + "colorScheme": { + "header": { "background": "#ffffff", "color": "#2b2e33" } + }, + "root": { + "background": "#ffffff", + "borderColor": "#e2e2e4", + "color": "#2b2e33", + "borderRadius": 14, + "transitionDuration": 180 + }, + "header": { + "borderColor": "#e2e2e4", + "borderWidth": 0, + "padding": 0, + "borderRadius": 0, + "gap": 8 + }, + "content": { "highlightBorderColor": "#2b2e33", "padding": 0, "gap": 8 }, + "file": { + "padding": 8, + "gap": 8, + "borderColor": "#cecfd2", + "info": { "gap": 4 } + }, + "fileList": { "gap": 8 }, + "progressbar": { "height": 8 }, + "basic": { "gap": 8 } + }, + "floatlabel": { + "extend": { "height": 64, "iconSize": 20 }, + "root": { + "color": "#85888e", + "focusColor": "#85888e", + "activeColor": "#85888e", + "invalidColor": "#db3424", + "transitionDuration": 180, + "positionX": 14, + "positionY": 14, + "fontWeight": 400, + "active": { "fontSize": 12, "fontWeight": 400 } + }, + "over": { "active": { "top": 14 } }, + "inside": { + "input": { "paddingTop": 28, "paddingBottom": 14 }, + "active": { "top": 14 } + }, + "on": { + "borderRadius": 0, + "active": { + "paddingTop": 0, + "paddingRight": 4, + "paddingBottom": 0, + "paddingLeft": 4, + "background": "#ffffff" + } + } + }, + "galleria": { + "extend": { "backdrop": "rgba(0, 0, 0, 0.4000)" }, + "colorScheme": { + "thumbnailContent": { "background": "#f0f0f1" }, + "thumbnailNavButton": { + "hoverBackground": "#e2e2e4", + "color": "#2b2e33", + "hoverColor": "#56595f" + }, + "indicatorButton": { + "background": "#cecfd2", + "hoverBackground": "#a2a5a9" + }, + "thumbnailsContent": { "background": "#e2e2e4" } + }, + "root": { + "borderWidth": 1, + "borderColor": "#e2e2e4", + "borderRadius": 14, + "transitionDuration": 180 + }, + "navButton": { + "background": "transparent", + "hoverBackground": "#e2e2e4", + "color": "#ffffff", + "hoverColor": "#ffffff", + "size": 64, + "gutter": 8, + "prev": { "borderRadius": 8 }, + "next": { "borderRadius": 8 }, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "navIcon": { "size": 32 }, + "thumbnailsContent": { "padding": 4 }, + "thumbnailNavButton": { + "size": 32, + "borderRadius": 14, + "gutter": 8, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "thumbnailNavButtonIcon": { "size": 16 }, + "caption": { "background": "#e2e2e4", "color": "#2b2e33", "padding": 8 }, + "indicatorList": { "gap": 8, "padding": 14 }, + "indicatorButton": { + "width": 8, + "height": 8, + "activeBackground": "#2b2e33", + "borderRadius": 14, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "insetIndicatorList": { "background": "rgba(0, 0, 0, 0.4000)" }, + "insetIndicatorButton": { + "background": "#e2e2e4", + "hoverBackground": "#e2e2e4", + "activeBackground": "#e2e2e4" + }, + "closeButton": { + "size": 64, + "gutter": 8, + "background": "#e2e2e4", + "hoverBackground": "#e2e2e4", + "color": "#ffffff", + "hoverColor": "#ffffff", + "borderRadius": 14, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "closeButtonIcon": { "size": 32 } + }, + "inputgroup": { + "extend": { "borderWidth": 1, "iconSize": 16 }, + "colorScheme": { + "addon": { + "background": "#ffffff", + "borderColor": "#cecfd2", + "color": "#85888e" + } + }, + "addon": { "borderRadius": 14, "padding": 14, "minWidth": 272 } + }, + "inputnumber": { + "extend": { + "borderWidth": 1, + "extButton": { "height": 40, "iconSize": 16 } + }, + "colorScheme": { + "button": { + "background": "#ffffff", + "hoverBackground": "#f0f0f1", + "activeBackground": "transparent", + "borderColor": "#cecfd2", + "hoverBorderColor": "#cecfd2", + "activeBorderColor": "#cecfd2", + "color": "#2b2e33", + "hoverColor": "#56595f", + "activeColor": "#2b2e33" + } + }, + "transitionDuration": { "transitionDuration": 180 }, + "button": { "width": 272, "borderRadius": 14, "verticalPadding": 14 }, + "root": { "transitionDuration": 180 } + }, + "inputotp": { + "extend": { "height": 40, "borderWidth": 1 }, + "root": { "gap": 8 }, + "input": { "width": 304, "lg": { "width": 336 }, "sm": { "width": 272 } }, + "sm": { "width": 0 }, + "lg": { "width": 0 } + }, + "inputtext": { + "extend": { + "readonlyBackground": "#f0f0f1", + "iconSize": 16, + "borderWidth": 1, + "extXlg": { "fontSize": 16, "paddingX": 14, "paddingY": 14 } + }, + "root": { + "background": "#ffffff", + "disabledBackground": "#e2e2e4", + "filledBackground": "#ffffff", + "filledHoverBackground": "#ffffff", + "filledFocusBackground": "#ffffff", + "borderColor": "#cecfd2", + "hoverBorderColor": "#1dc831", + "focusBorderColor": "#1dc831", + "invalidBorderColor": "#f47f77", + "color": "#2b2e33", + "disabledColor": "#85888e", + "placeholderColor": "#85888e", + "invalidPlaceholderColor": "#db3424", + "shadow": "none", + "paddingX": 14, + "paddingY": 14, + "borderRadius": 14, + "transitionDuration": 180, + "sm": { "fontSize": 16, "paddingX": 14, "paddingY": 14 }, + "lg": { "fontSize": 16, "paddingX": 14, "paddingY": 14 }, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "none" + } + } + }, + "listbox": { + "extend": { + "extOption": { + "label": { "gap": 4 }, + "caption": { "color": "#85888e", "stripedColor": "#85888e" }, + "gap": 8 + } + }, + "colorScheme": { "option": { "stripedBackground": "#fafafa" } }, + "root": { + "background": "#ffffff", + "disabledBackground": "#e2e2e4", + "borderColor": "#cecfd2", + "invalidBorderColor": "#f47f77", + "color": "#181a1f", + "disabledColor": "#85888e", + "shadow": "none", + "borderRadius": 14, + "transitionDuration": 180 + }, + "list": { + "padding": 4, + "gap": 4, + "header": { + "paddingTop": 14, + "paddingRight": 14, + "paddingBottom": 0, + "paddingLeft": 14 + } + }, + "option": { + "focusBackground": "#f0f0f1", + "selectedBackground": "#2b2e33", + "selectedFocusBackground": "#56595f", + "color": "#2b2e33", + "focusColor": "#2b2e33", + "selectedColor": "#ffffff", + "selectedFocusColor": "#ffffff", + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 8 + }, + "optionGroup": { + "background": "#ffffff", + "color": "#85888e", + "fontWeight": 600, + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14 + }, + "checkmark": { "color": "#2b2e33", "gutterStart": -8, "gutterEnd": 8 }, + "emptyMessage": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14 + } + }, + "megamenu": { + "extend": { + "extItem": { "caption": { "color": "#85888e", "gap": 4 } }, + "iconSize": 20 + }, + "colorScheme": { "root": { "background": "transparent" } }, + "root": { + "borderColor": "transparent", + "borderRadius": 14, + "color": "#2b2e33", + "gap": 4, + "transitionDuration": 180, + "verticalOrientation": { "padding": 4, "gap": 4 }, + "horizontalOrientation": { "padding": 4, "gap": 4 } + }, + "baseItem": { + "borderRadius": 14, + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14 + }, + "item": { + "focusBackground": "#f0f0f1", + "activeBackground": "#2b2e33", + "color": "#2b2e33", + "focusColor": "#2b2e33", + "activeColor": "#ffffff", + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 8, + "gap": 8, + "icon": { + "color": "#2b2e33", + "focusColor": "#2b2e33", + "activeColor": "#ffffff" + } + }, + "overlay": { + "padding": 4, + "background": "#ffffff", + "borderColor": "#e2e2e4", + "borderRadius": 14, + "color": "#2b2e33", + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "gap": 0 + }, + "submenu": { "padding": 4, "gap": 4 }, + "submenuLabel": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "background": "transparent", + "color": "#85888e", + "fontWeight": 600 + }, + "submenuIcon": { + "size": 20, + "color": "#2b2e33", + "focusColor": "#2b2e33", + "activeColor": "#ffffff" + }, + "separator": { "borderColor": "#e2e2e4" }, + "mobileButton": { + "borderRadius": 8, + "size": 32, + "color": "#2b2e33", + "hoverColor": "#56595f", + "hoverBackground": "#f0f0f1", + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + } + }, + "menu": { + "extend": { + "paddingX": 4, + "iconSize": 20, + "paddingY": 4, + "extItem": { + "caption": { "gap": 4, "color": "#85888e" }, + "activeBackground": "#2b2e33", + "activeColor": "#ffffff", + "icon": { "activeColor": "#ffffff" } + } + }, + "root": { + "borderRadius": 14, + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "transitionDuration": 180, + "background": "#ffffff", + "borderColor": "#e2e2e4", + "color": "#2b2e33" + }, + "list": { "padding": 4, "gap": 4 }, + "submenuLabel": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "fontWeight": 600, + "background": "transparent", + "color": "#85888e" + }, + "separator": { "borderColor": "#e2e2e4" }, + "item": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 8, + "gap": 8, + "color": "#2b2e33", + "focusBackground": "#f0f0f1", + "focusColor": "#56595f", + "icon": { "color": "#2b2e33", "focusColor": "#56595f" } + } + }, + "menubar": { + "extend": { + "iconSize": 20, + "extItem": { "caption": { "color": "#85888e", "gap": 4 } }, + "extSubmenuLabel": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "fontWeight": 600, + "background": "transparent", + "color": "#85888e" + } + }, + "colorScheme": { "root": { "background": "transparent" } }, + "root": { + "borderColor": "transparent", + "borderRadius": 8, + "color": "#2b2e33", + "gap": 4, + "padding": 4, + "transitionDuration": 180 + }, + "baseItem": { + "borderRadius": 8, + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14 + }, + "item": { + "focusBackground": "#f0f0f1", + "activeBackground": "#2b2e33", + "color": "#2b2e33", + "focusColor": "#2b2e33", + "activeColor": "#ffffff", + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 8, + "gap": 8, + "icon": { + "color": "#2b2e33", + "focusColor": "#2b2e33", + "activeColor": "#ffffff" + } + }, + "submenu": { + "padding": 4, + "gap": 4, + "background": "#ffffff", + "borderColor": "#e2e2e4", + "borderRadius": 14, + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "mobileIndent": 14, + "icon": { + "size": 20, + "color": "#2b2e33", + "focusColor": "#2b2e33", + "activeColor": "#ffffff" + } + }, + "separator": { "borderColor": "#e2e2e4" }, + "mobileButton": { + "borderRadius": 8, + "size": 32, + "color": "#2b2e33", + "hoverColor": "#56595f", + "hoverBackground": "#f0f0f1", + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + } + }, + "message": { + "extend": { + "width": 400, + "extText": { "gap": 4 }, + "extInfo": { + "color": "#4496e8", + "closeButton": { "color": "#4496e8", "borderColor": "#4496e8" }, + "caption": { "color": "#2b2e33" } + }, + "extAccentLine": { "width": 4 }, + "extCloseButton": { "width": 1 }, + "extSuccess": { + "color": "#44e858", + "closeButton": { "color": "#44e858", "borderColor": "#44e858" }, + "caption": { "color": "#2b2e33" } + }, + "extWarn": { + "color": "#f5b83d", + "closeButton": { "color": "#f5b83d", "borderColor": "#f5b83d" }, + "caption": { "color": "#2b2e33" } + }, + "extError": { + "color": "#e85244", + "closeButton": { "color": "#e85244", "borderColor": "#e85244" }, + "caption": { "color": "#2b2e33" } + } + }, + "colorScheme": { + "success": { + "background": "#fafffb", + "borderColor": "#44e858", + "color": "#2b2e33", + "shadow": "none", + "outlined": { "color": "#2b2e33", "borderColor": "#44e858" }, + "closeButton": { + "hoverBackground": "#d4fedc", + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "simple": { "color": "#2b2e33" } + }, + "outlined": { + "root": { "borderWidth": 0 }, + "closeButton": { + "hoverBackground": "transparent", + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "outlined": { "color": "transparent", "borderColor": "transparent" }, + "simple": { "color": "transparent" } + }, + "simple": { "content": { "padding": 0 } }, + "warn": { + "background": "#fffdfa", + "borderColor": "#f5b83d", + "color": "#2b2e33", + "shadow": "none", + "outlined": { "color": "#2b2e33", "borderColor": "#f5b83d" }, + "closeButton": { + "hoverBackground": "#ffeed4", + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "simple": { "color": "#2b2e33" } + }, + "error": { + "background": "#fffafa", + "borderColor": "#e85244", + "color": "#2b2e33", + "shadow": "none", + "outlined": { "color": "#2b2e33", "borderColor": "#e85244" }, + "closeButton": { + "hoverBackground": "#fed4d4", + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "simple": { "color": "#2b2e33" } + }, + "secondary": { + "borderColor": "transparent", + "shadow": "none", + "closeButton": { + "hoverBackground": "transparent", + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "simple": { "color": "transparent" }, + "outlined": { "color": "transparent", "borderColor": "transparent" }, + "background": "#f0f0f1", + "color": "#2b2e33" + }, + "contrast": { + "borderColor": "transparent", + "shadow": "none", + "closeButton": { + "hoverBackground": "transparent", + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "simple": { "color": "transparent" }, + "outlined": { "color": "transparent", "borderColor": "transparent" }, + "background": "#2b2e33", + "color": "#ffffff" + }, + "info": { + "background": "#fafdff", + "borderColor": "#4496e8", + "color": "#2b2e33", + "shadow": "none", + "closeButton": { + "hoverBackground": "#d4ecfe", + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "outlined": { "color": "#2b2e33", "borderColor": "#4496e8" }, + "simple": { "color": "#2b2e33" } + } + }, + "root": { "borderRadius": 14, "borderWidth": 1, "transitionDuration": 180 }, + "content": { + "padding": 14, + "gap": 14, + "sm": { "padding": 14 }, + "lg": { "padding": 14 } + }, + "text": { + "fontSize": 16, + "fontWeight": 700, + "sm": { "fontSize": 16 }, + "lg": { "fontSize": 16 } + }, + "icon": { "size": 36, "sm": { "size": 36 }, "lg": { "size": 36 } }, + "closeButton": { + "width": 32, + "height": 32, + "borderRadius": 14, + "focusRing": { "width": 4, "style": "none", "offset": 0 } + }, + "closeIcon": { "size": 16, "sm": { "size": 16 }, "lg": { "size": 16 } }, + "outlined": { "root": { "borderWidth": 1 } }, + "simple": { "content": { "padding": 0 } } + }, + "metergroup": { + "extend": { "extLabel": { "color": "#85888e" } }, + "root": { "borderRadius": 14, "gap": 14 }, + "meters": { "size": 8, "background": "#e2e2e4" }, + "label": { "gap": 4 }, + "labelMarker": { "size": 8 }, + "labelIcon": { "size": 16 }, + "labelList": { "verticalGap": 8, "horizontalGap": 14 } + }, + "multiselect": { + "extend": { + "paddingX": 6, + "paddingY": 6, + "borderWidth": 1, + "iconSize": 16, + "width": 272, + "readonlyBackground": "#f0f0f1" + }, + "root": { + "shadow": "none", + "paddingX": 14, + "paddingY": 14, + "borderRadius": 14, + "transitionDuration": 180, + "sm": { "fontSize": 16, "paddingX": 8, "paddingY": 8 }, + "lg": { "fontSize": 16, "paddingX": 14, "paddingY": 14 }, + "focusRing": { + "width": 4, + "style": "none", + "offset": 0, + "shadow": "none", + "color": "#d4fedc" + }, + "background": "#ffffff", + "borderColor": "#cecfd2", + "color": "#2b2e33", + "disabledBackground": "#e2e2e4", + "disabledColor": "#85888e", + "filledBackground": "#ffffff", + "filledFocusBackground": "#ffffff", + "filledHoverBackground": "#ffffff", + "focusBorderColor": "#1dc831", + "hoverBorderColor": "#1dc831", + "invalidBorderColor": "#f47f77", + "invalidPlaceholderColor": "#db3424", + "placeholderColor": "#85888e" + }, + "dropdown": { "width": 272, "color": "#181a1f" }, + "overlay": { + "borderRadius": 14, + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "background": "#ffffff", + "borderColor": "#e2e2e4", + "color": "#2b2e33" + }, + "list": { + "padding": 4, + "header": { + "paddingTop": 14, + "paddingRight": 14, + "paddingBottom": 0, + "paddingLeft": 14 + }, + "gap": 4 + }, + "chip": { "borderRadius": 8 }, + "option": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 8, + "gap": 8, + "color": "#2b2e33", + "focusBackground": "#f0f0f1", + "focusColor": "#2b2e33", + "selectedBackground": "#2b2e33", + "selectedColor": "#ffffff", + "selectedFocusBackground": "#56595f", + "selectedFocusColor": "#ffffff" + }, + "optionGroup": { + "fontWeight": 600, + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "background": "#ffffff", + "color": "#85888e" + }, + "emptyMessage": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14 + }, + "clearIcon": { "color": "#181a1f" } + }, + "paginator": { + "root": { + "paddingTop": 0, + "paddingRight": 8, + "paddingBottom": 0, + "paddingLeft": 8, + "gap": 8, + "borderRadius": 14, + "background": "transparent", + "color": "#2b2e33", + "transitionDuration": 180 + }, + "currentPageReport": { "color": "#85888e" }, + "navButton": { + "background": "transparent", + "hoverBackground": "#f0f0f1", + "selectedBackground": "#2b2e33", + "color": "#2b2e33", + "hoverColor": "#56595f", + "selectedColor": "#ffffff", + "width": 40, + "height": 40, + "borderRadius": 14, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "focus": "0 0 4px rgba(0, 0, 0, 0.2000)", + "shadow": "none" + } + }, + "jumpToPageInput": { "maxWidth": 80 } + }, + "panelmenu": { + "extend": { + "iconSize": 20, + "extPanel": { "gap": 4 }, + "extItem": { + "activeBackground": "#2b2e33", + "activeColor": "#ffffff", + "caption": { "color": "#85888e", "gap": 4 } + } + }, + "root": { "gap": 4, "transitionDuration": 180 }, + "panel": { + "background": "transparent", + "borderColor": "transparent", + "borderWidth": 1, + "color": "#2b2e33", + "padding": 4, + "borderRadius": 14, + "first": { + "borderTopWidth": 1, + "borderRightWidth": 1, + "borderBottomWidth": 0, + "borderLeftWidth": 1, + "topBorderRadius": 14 + }, + "last": { + "borderTopWidth": 0, + "borderRightWidth": 1, + "borderBottomWidth": 1, + "borderLeftWidth": 1, + "topBorderRadius": 14, + "bottomBorderRadius": 14 + } + }, + "item": { + "focusBackground": "#f0f0f1", + "color": "#2b2e33", + "focusColor": "#2b2e33", + "gap": 8, + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 8, + "icon": { "color": "#2b2e33", "focusColor": "#2b2e33" } + }, + "submenu": { "indent": 24 }, + "separator": { "borderColor": "#e2e2e4" }, + "submenuIcon": { "color": "#2b2e33", "focusColor": "#2b2e33" } + }, + "password": { + "extend": { "borderWidth": 1 }, + "colorScheme": { + "strength": { + "weakBackground": "#e85244", + "mediumBackground": "#f5b83d", + "strongBackground": "#1dc831" + }, + "icon": { "color": "#85888e" } + }, + "meter": { "background": "#e2e2e4", "borderRadius": 14, "height": 8 }, + "overlay": { + "background": "#ffffff", + "borderColor": "#cecfd2", + "borderRadius": 8, + "color": "#2b2e33", + "padding": 14, + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)" + }, + "content": { "gap": 8 }, + "icon": { "color": "#2b2e33" } + }, + "popover": { + "extend": { "borderWidth": 1, "arrow": { "width": 12, "height": 8 } }, + "root": { + "background": "#ffffff", + "borderColor": "#cecfd2", + "color": "#2b2e33", + "borderRadius": 8, + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "gutter": 4, + "arrowOffset": 20 + }, + "content": { "padding": 14 } + }, + "progressbar": { + "label": { "color": "#2b2e33", "fontSize": 12, "fontWeight": 400 }, + "root": { "background": "#e2e2e4", "borderRadius": 14, "height": 16 }, + "value": { "background": "#44e858" } + }, + "progressspinner": { + "extend": { "small": 16, "medium": 32, "large": 48, "xlarge": 56 }, + "colorScheme": { + "root": { + "colorOne": "#44e858", + "colorTwo": "#4496e8", + "colorThree": "#e85244", + "colorFour": "#f5b83d" + } + }, + "root": { "borderWidth": 4 } + }, + "radiobutton": { + "root": { + "width": 24, + "height": 24, + "background": "#ffffff", + "checkedBackground": "#2b2e33", + "checkedHoverBackground": "#404348", + "disabledBackground": "#e2e2e4", + "filledBackground": "#ffffff", + "borderColor": "#cecfd2", + "hoverBorderColor": "#2b2e33", + "focusBorderColor": "#cecfd2", + "checkedBorderColor": "#2b2e33", + "checkedHoverBorderColor": "#2b2e33", + "checkedFocusBorderColor": "#2b2e33", + "checkedDisabledBorderColor": "#cecfd2", + "invalidBorderColor": "#f47f77", + "shadow": "none", + "transitionDuration": 180, + "focusRing": { + "color": "#d4fedc", + "offset": 0, + "shadow": "none", + "style": "none", + "width": 4 + }, + "lg": { "height": 20, "width": 20 }, + "sm": { "height": 8, "width": 8 } + }, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "sm": { "width": 16, "height": 16 }, + "lg": { "width": 20, "height": 20 }, + "icon": { + "size": 12, + "checkedColor": "#ffffff", + "checkedHoverColor": "#ffffff", + "disabledColor": "#85888e", + "sm": { "size": 8 }, + "lg": { "size": 16 } + } + }, + "rating": { + "root": { + "gap": 8, + "transitionDuration": 180, + "focusRing": { + "color": "#d4fedc", + "offset": 0, + "shadow": "none", + "style": "none", + "width": 4 + } + }, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "icon": { + "size": 24, + "color": "#85888e", + "hoverColor": "#f5b83d", + "activeColor": "#f5b83d" + } + }, + "ripple": { "colorScheme": { "root": { "background": "#e2e2e4" } } }, + "scrollpanel": { + "colorScheme": { "bar": { "background": "#cecfd2" } }, + "root": { "transitionDuration": 180 }, + "bar": { + "size": 8, + "borderRadius": 8, + "focusRing": { + "width": 0, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + } + }, + "select": { + "extend": { + "extOption": { "background": "#ffffff", "gap": 8 }, + "extOptionGroup": { "gap": 8 }, + "readonlyBackground": "#f0f0f1", + "borderWidth": 1, + "iconSize": 16 + }, + "root": { + "background": "#ffffff", + "disabledBackground": "#e2e2e4", + "filledBackground": "#ffffff", + "filledHoverBackground": "#ffffff", + "filledFocusBackground": "#ffffff", + "borderColor": "#cecfd2", + "hoverBorderColor": "#1dc831", + "focusBorderColor": "#1dc831", + "invalidBorderColor": "#f47f77", + "color": "#2b2e33", + "disabledColor": "#85888e", + "placeholderColor": "#85888e", + "invalidPlaceholderColor": "#db3424", + "shadow": "none", + "paddingX": 14, + "paddingY": 14, + "borderRadius": 14, + "transitionDuration": 180, + "sm": { "fontSize": 16, "paddingX": 14, "paddingY": 14 }, + "lg": { "fontSize": 16, "paddingX": 14, "paddingY": 14 }, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "none" + } + }, + "dropdown": { "width": 272, "color": "#181a1f" }, + "overlay": { + "background": "#ffffff", + "borderColor": "#e2e2e4", + "borderRadius": 14, + "color": "#2b2e33", + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)" + }, + "list": { + "padding": 4, + "gap": 4, + "header": { + "paddingTop": 14, + "paddingRight": 14, + "paddingBottom": 0, + "paddingLeft": 14 + } + }, + "option": { + "focusBackground": "#f0f0f1", + "selectedBackground": "#2b2e33", + "selectedFocusBackground": "#56595f", + "color": "#2b2e33", + "focusColor": "#2b2e33", + "selectedColor": "#ffffff", + "selectedFocusColor": "#ffffff", + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 8 + }, + "optionGroup": { + "background": "#ffffff", + "color": "#85888e", + "fontWeight": 600, + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14 + }, + "clearIcon": { "color": "#181a1f" }, + "checkmark": { "color": "#2b2e33", "gutterStart": -8, "gutterEnd": 8 }, + "emptyMessage": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14 + } + }, + "selectbutton": { + "extend": { + "gap": 4, + "paddingX": 4, + "paddingY": 4, + "iconSize": { "sm": 16, "md": 20, "lg": 24, "xlg": 28 }, + "checkedBackground": "#ffffff", + "checkedBorderColor": "#ffffff", + "checkedColor": "#181a1f", + "ext": { "borderRadius": 8 } + }, + "colorScheme": { + "root": { "invalidBorderColor": "#f47f77" }, + "extend": { "background": "#e2e2e4" } + }, + "root": { "borderRadius": 14 } + }, + "skeleton": { + "extend": { "minWidth": 32, "height": 32 }, + "colorScheme": { + "root": { "background": "#e2e2e4", "animationBackground": "#f0f0f1" } + }, + "root": { "borderRadius": 14 } + }, + "slider": { + "colorScheme": { "handle": { "content": { "background": "#ffffff" } } }, + "root": { "transitionDuration": 180 }, + "track": { "background": "#e2e2e4", "borderRadius": 14, "size": 4 }, + "range": { "background": "#2b2e33" }, + "handle": { + "width": 20, + "height": 20, + "borderRadius": 1600, + "background": "#2b2e33", + "hoverBackground": "#2b2e33", + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "content": { + "borderRadius": 1600, + "hoverBackground": "#2b2e33", + "width": 12, + "height": 12, + "shadow": "none" + } + } + }, + "splitter": { + "colorScheme": { "handle": { "background": "#2b2e33" } }, + "gutter": { "background": "#f0f0f1" }, + "root": { + "background": "#ffffff", + "borderColor": "#e2e2e4", + "color": "#2b2e33", + "transitionDuration": 180 + }, + "handle": { + "size": 4, + "borderRadius": 14, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + } + }, + "stepper": { + "extend": { + "extCaption": { "gap": 4 }, + "extStepNumber": { + "invalidBackground": "#f47f77", + "invalidColor": "#45120e", + "invalidBorderColor": "#f47f77", + "borderWidth": 1, + "iconSize": 24 + } + }, + "root": { "transitionDuration": 180 }, + "separator": { + "background": "#e2e2e4", + "activeBackground": "#2b2e33", + "marginTop": 0, + "marginRight": 0, + "marginBottom": 0, + "marginLeft": 24, + "size": 1 + }, + "step": { "padding": 8, "gap": 8 }, + "stepHeader": { + "padding": 0, + "borderRadius": 0, + "gap": 8, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "stepTitle": { + "color": "#2b2e33", + "activeColor": "#2b2e33", + "fontWeight": 400 + }, + "stepNumber": { + "background": "#ffffff", + "activeBackground": "#44e858", + "borderColor": "#e2e2e4", + "activeBorderColor": "#44e858", + "color": "#2b2e33", + "activeColor": "#2b2e33", + "size": 24, + "fontSize": 16, + "fontWeight": 700, + "borderRadius": 1600, + "shadow": "none" + }, + "steppanels": { "padding": 14 }, + "steppanel": { + "background": "#ffffff", + "color": "#2b2e33", + "padding": 0, + "indent": 0 + } + }, + "steps": { + "itemLink": { + "gap": 8, + "borderRadius": 14, + "focusRing": { + "color": "#d4fedc", + "offset": 0, + "shadow": "none", + "style": "none", + "width": 4 + } + }, + "itemLabel": { + "fontWeight": 400, + "activeColor": "#56595f", + "color": "#2b2e33" + }, + "itemNumber": { + "background": "#ffffff", + "size": 32, + "fontSize": 16, + "fontWeight": 700, + "borderRadius": 1600, + "shadow": "none", + "activeBackground": "#ffffff", + "activeBorderColor": "#e2e2e4", + "activeColor": "#56595f", + "borderColor": "#e2e2e4", + "color": "#2b2e33" + }, + "root": { "transitionDuration": 180 }, + "separator": { "background": "#e2e2e4" } + }, + "tabs": { + "colorScheme": { + "navButton": { "shadow": "none" }, + "tab": { + "background": "transparent", + "hoverBackground": "transparent", + "activeBackground": "transparent" + } + }, + "root": { "transitionDuration": 180 }, + "tablist": { + "borderTopWidth": 0, + "borderRightWidth": 0, + "borderBottomWidth": 1, + "borderLeftWidth": 0, + "background": "transparent", + "borderColor": "#e2e2e4" + }, + "tab": { + "borderWidth": 0, + "borderColor": "#e2e2e4", + "hoverBorderColor": "#e2e2e4", + "activeBorderColor": "#404348", + "color": "#85888e", + "hoverColor": "#2b2e33", + "activeColor": "#2b2e33", + "padding": 14, + "fontWeight": 600, + "margin": 0, + "gap": 8, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "tabpanel": { + "background": "transparent", + "color": "#2b2e33", + "padding": 14, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "navButton": { + "background": "#ffffff", + "color": "#2b2e33", + "hoverColor": "#56595f", + "width": 24, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + }, + "activeBar": { "height": 2, "bottom": -2, "background": "#2b2e33" } + }, + "toast": { + "extend": { + "extInfo": { + "color": "#4496e8", + "closeButton": { "color": "#4496e8", "borderColor": "#4496e8" }, + "caption": { "color": "#2b2e33" } + }, + "extAccentLine": { "width": 4 }, + "extCloseButton": { "width": 1 }, + "extSuccess": { + "color": "#44e858", + "closeButton": { "color": "#44e858", "borderColor": "#44e858" }, + "caption": { "color": "#2b2e33" } + }, + "extWarn": { + "color": "#f5b83d", + "closeButton": { "color": "#f5b83d", "borderColor": "#f5b83d" }, + "caption": { "color": "#2b2e33" } + }, + "extError": { + "color": "#e85244", + "closeButton": { "color": "#e85244", "borderColor": "#e85244" }, + "caption": { "color": "#2b2e33" } + } + }, + "colorScheme": { + "info": { + "background": "#fafdff", + "borderColor": "#4496e8", + "color": "#2b2e33", + "detailColor": "#2b2e33", + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "closeButton": { + "hoverBackground": "#d4ecfe", + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + } + }, + "success": { + "background": "#fafffb", + "borderColor": "#44e858", + "color": "#2b2e33", + "detailColor": "#2b2e33", + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "closeButton": { + "hoverBackground": "#d4fedc", + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + } + }, + "warn": { + "background": "#fffdfa", + "borderColor": "#f5b83d", + "color": "#2b2e33", + "detailColor": "#2b2e33", + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "closeButton": { + "hoverBackground": "#ffeed4", + "focusRing": { "color": "#d4fedc", "shadow": "none" } + } + }, + "error": { + "background": "#fffafa", + "borderColor": "#e85244", + "color": "#2b2e33", + "detailColor": "#2b2e33", + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "closeButton": { + "hoverBackground": "#fed4d4", + "focusRing": { + "color": "#d4fedc", + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + } + } + }, + "secondary": { + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "background": "#f0f0f1", + "borderColor": "#cecfd2", + "closeButton": { + "focusRing": { "color": "#d4fedc", "shadow": "none" }, + "hoverBackground": "#f0f0f1" + }, + "color": "#2b2e33", + "detailColor": "#6d7076" + }, + "contrast": { + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "background": "#2b2e33", + "borderColor": "#2b2e33", + "closeButton": { + "focusRing": { "color": "#d4fedc", "shadow": "none" }, + "hoverBackground": "#404348" + }, + "color": "#ffffff", + "detailColor": "#e2e2e4" + }, + "root": { "blur": 0 } + }, + "root": { + "width": 400, + "borderWidth": 1, + "borderRadius": 14, + "transitionDuration": 180 + }, + "icon": { "size": 36 }, + "content": { "padding": 14, "gap": 14 }, + "text": { "gap": 4 }, + "summary": { "fontWeight": 700, "fontSize": 16 }, + "detail": { "fontWeight": 400, "fontSize": 14 }, + "closeButton": { + "width": 32, + "height": 32, + "borderRadius": 14, + "focusRing": { "width": 4, "style": "none", "offset": 0 } + }, + "closeIcon": { "size": 16 } + }, + "tag": { + "colorScheme": { + "primary": { "background": "#44e858", "color": "#2b2e33" }, + "secondary": { "background": "#e2e2e4", "color": "#2b2e33" }, + "success": { "background": "#77f48a", "color": "#0e4514" }, + "info": { "background": "#aad7fb", "color": "#0e2a45" }, + "warn": { "background": "#fddeaa", "color": "#4f3709" }, + "danger": { "background": "#fbacaa", "color": "#45120e" }, + "contrast": { "background": "#2b2e33", "color": "#ffffff" } + }, + "root": { + "fontSize": 12, + "fontWeight": 400, + "paddingTop": 4, + "paddingRight": 8, + "paddingBottom": 4, + "paddingLeft": 8, + "gap": 4, + "borderRadius": 8, + "roundedBorderRadius": 1600 + }, + "icon": { "size": 16 } + }, + "textarea": { + "extend": { + "readonlyBackground": "#f0f0f1", + "borderWidth": 1, + "iconSize": 16, + "minHeight": 80 + }, + "root": { + "background": "#ffffff", + "disabledBackground": "#e2e2e4", + "filledBackground": "#ffffff", + "filledHoverBackground": "#ffffff", + "filledFocusBackground": "#ffffff", + "borderColor": "#cecfd2", + "hoverBorderColor": "#1dc831", + "focusBorderColor": "#1dc831", + "invalidBorderColor": "#f47f77", + "color": "#181a1f", + "disabledColor": "#85888e", + "placeholderColor": "#85888e", + "invalidPlaceholderColor": "#db3424", + "shadow": "none", + "paddingX": 14, + "paddingY": 14, + "borderRadius": 14, + "transitionDuration": 180, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "none" + }, + "lg": { "fontSize": 16, "paddingX": 14, "paddingY": 14 }, + "sm": { "fontSize": 16, "paddingX": 14, "paddingY": 14 } + }, + "sm": { "fontSize": 16, "paddingX": 8, "paddingY": 8 }, + "lg": { "fontSize": 16, "paddingX": 14, "paddingY": 14 } + }, + "tieredmenu": { + "extend": { + "iconSize": 20, + "extSubmenu": { "borderColor": "#e2e2e4", "background": "#ffffff" }, + "extItem": { "caption": { "gap": 4, "color": "#85888e" } } + }, + "root": { + "background": "#ffffff", + "borderColor": "transparent", + "color": "#2b2e33", + "borderRadius": 14, + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "transitionDuration": 180 + }, + "list": { "padding": 4, "gap": 4 }, + "item": { + "focusBackground": "#f0f0f1", + "activeBackground": "#2b2e33", + "color": "#2b2e33", + "focusColor": "#2b2e33", + "activeColor": "#ffffff", + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 8, + "gap": 8, + "icon": { + "color": "#2b2e33", + "focusColor": "#2b2e33", + "activeColor": "#ffffff" + } + }, + "submenu": { "mobileIndent": 14 }, + "separator": { "borderColor": "#e2e2e4" }, + "submenuIcon": { + "activeColor": "#56595f", + "color": "#2b2e33", + "focusColor": "#56595f", + "size": 14 + } + }, + "timeline": { + "extend": { "extEvent": { "gap": 4 } }, + "event": { "minHeight": 64 }, + "vertical": { + "eventContent": { + "paddingTop": 0, + "paddingRight": 20, + "paddingBottom": 0, + "paddingLeft": 20 + } + }, + "horizontal": { + "eventContent": { + "paddingTop": 20, + "paddingRight": 0, + "paddingBottom": 20, + "paddingLeft": 0 + } + }, + "eventMarker": { + "size": 16, + "borderRadius": 14, + "borderWidth": 4, + "background": "#ffffff", + "borderColor": "#44e858", + "content": { + "borderRadius": 14, + "size": 12, + "background": "transparent", + "insetShadow": "none" + } + }, + "eventConnector": { "color": "#e2e2e4", "size": 1 } + }, + "togglebutton": { + "extend": { + "ext": { "gap": 14 }, + "iconSize": { "sm": 16, "md": 20, "lg": 24 }, + "iconOnlyWidth": 40, + "hoverBorderColor": "#cecfd2", + "checkedHoverColor": "#ffffff", + "checkedHoverBackground": "#404348", + "checkedHoverBorderColor": "#404348", + "extXlg": { + "paddingTop": 20, + "paddingRight": 20, + "paddingBottom": 20, + "paddingLeft": 20, + "iconOnlyWidth": 64 + }, + "extSm": { "iconOnlyWidth": 32 }, + "extLg": { "iconOnlyWidth": 56 } + }, + "colorScheme": { + "root": { + "background": "#e2e2e4", + "hoverBackground": "#cecfd2", + "borderColor": "#e2e2e4", + "color": "#2b2e33", + "hoverColor": "#2b2e33", + "checkedBackground": "#2b2e33", + "checkedColor": "#ffffff", + "checkedBorderColor": "#2b2e33", + "disabledBackground": "#e2e2e4", + "disabledBorderColor": "#e2e2e4", + "disabledColor": "#85888e", + "invalidBorderColor": "#f47f77" + }, + "icon": { + "color": "#2b2e33", + "hoverColor": "#2b2e33", + "checkedColor": "#ffffff", + "disabledColor": "#85888e" + }, + "content": { "checkedBackground": "transparent" } + }, + "root": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 1600, + "gap": 8, + "fontWeight": 600, + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "0 0 4px rgba(0, 0, 0, 0.2000)" + }, + "sm": { + "fontSize": 14, + "paddingTop": 4, + "paddingRight": 14, + "paddingBottom": 4, + "paddingLeft": 14 + }, + "lg": { + "fontSize": 20, + "paddingTop": 14, + "paddingRight": 24, + "paddingBottom": 14, + "paddingLeft": 24 + }, + "transitionDuration": 180, + "background": "#ffffff", + "borderColor": "#e2e2e4", + "checkedBackground": "#ffffff", + "checkedBorderColor": "#e2e2e4", + "checkedColor": "#2b2e33", + "color": "#2b2e33", + "disabledBackground": "#e2e2e4", + "disabledBorderColor": "#e2e2e4", + "disabledColor": "#85888e", + "hoverColor": "#56595f", + "invalidBorderColor": "#f47f77" + }, + "content": { + "checkedShadow": "none", + "padding": 0, + "borderRadius": 0, + "sm": { "padding": 0 }, + "lg": { "padding": 0 }, + "checkedBackground": "#ffffff" + }, + "icon": { + "checkedColor": "#2b2e33", + "color": "#2b2e33", + "disabledColor": "#85888e", + "hoverColor": "#56595f" + } + }, + "toggleswitch": { + "colorScheme": { + "root": { + "background": "#a2a5a9", + "hoverBackground": "#85888e", + "disabledBackground": "#e2e2e4", + "checkedBackground": "#2b2e33", + "checkedHoverBackground": "#404348" + }, + "handle": { + "background": "#ffffff", + "hoverBackground": "#ffffff", + "disabledBackground": "#85888e", + "checkedBackground": "#ffffff", + "checkedHoverBackground": "#ffffff", + "color": "#2b2e33", + "hoverColor": "#2b2e33", + "checkedColor": "#2b2e33", + "checkedHoverColor": "#2b2e33" + } + }, + "root": { + "width": 40, + "height": 24, + "borderRadius": 1600, + "gap": 4, + "borderWidth": 1, + "shadow": "none", + "focusRing": { + "width": 4, + "style": "none", + "color": "#d4fedc", + "offset": 0, + "shadow": "none" + }, + "borderColor": "transparent", + "hoverBorderColor": "transparent", + "checkedBorderColor": "transparent", + "checkedHoverBorderColor": "transparent", + "invalidBorderColor": "#f47f77", + "transitionDuration": 180, + "slideDuration": 180 + }, + "handle": { "borderRadius": 1600, "size": 16 } + }, + "tooltip": { + "colorScheme": { "root": { "background": "#2b2e33", "color": "#ffffff" } }, + "root": { + "maxWidth": 400, + "gutter": 4, + "shadow": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "borderRadius": 8 + } + }, + "tree": { + "root": { + "background": "#ffffff", + "color": "#2b2e33", + "padding": 14, + "gap": 4, + "indent": 14, + "transitionDuration": 180 + }, + "node": { + "paddingTop": 8, + "paddingRight": 14, + "paddingBottom": 8, + "paddingLeft": 14, + "color": "#2b2e33", + "selectedColor": "#ffffff", + "gap": 4, + "borderRadius": 14, + "focusRing": { + "color": "#d4fedc", + "offset": 0, + "shadow": "none", + "style": "none", + "width": 4 + }, + "hoverBackground": "#f0f0f1", + "hoverColor": "#2b2e33", + "selectedBackground": "#2b2e33" + }, + "nodeIcon": { + "selectedColor": "#ffffff", + "color": "#2b2e33", + "hoverColor": "#56595f" + }, + "nodeToggleButton": { + "borderRadius": 4, + "size": 28, + "selectedHoverBackground": "#2b2e33", + "color": "#2b2e33", + "focusRing": { + "color": "#d4fedc", + "offset": 0, + "shadow": "none", + "style": "none", + "width": 4 + }, + "hoverBackground": "#f0f0f1", + "hoverColor": "#56595f", + "selectedHoverColor": "#56595f" + }, + "loadingIcon": { "size": 16 }, + "filter": { + "marginTop": 0, + "marginRight": 0, + "marginBottom": 8, + "marginLeft": 0 + } + }, + "overlaybadge": { + "root": { "outline": { "width": 0, "color": "transparent" } } + } +} diff --git a/src/theme/tokens/fonts.json b/src/theme/tokens/fonts.json new file mode 100644 index 00000000..bec6ffbc --- /dev/null +++ b/src/theme/tokens/fonts.json @@ -0,0 +1,45 @@ +{ + "fontFamily": { "base": "Noto Sans", "heading": "TT Fellows" }, + "fontWeight": { "regular": 400, "medium": 500, "demibold": 600, "bold": 700 }, + "fontSize": { + "100": 12, + "200": 14, + "300": 16, + "400": 18, + "500": 20, + "600": 24, + "650": 30, + "700": 36, + "750": 48, + "800": 60, + "900": 72, + "1000": 96 + }, + "lineHeight": { + "100": 12, + "150": 14, + "200": 14, + "250": 16, + "300": 18, + "350": 18, + "400": 20, + "450": 22, + "500": 24, + "550": 26, + "600": 28, + "700": 30, + "800": 36, + "850": 38, + "900": 44, + "1000": 54, + "none": 1, + "auto": "auto" + }, + "letterSpacing": { + "200": -0.32, + "400": -0.48, + "500": 0, + "600": 0.32, + "700": 0.48 + } +} diff --git a/src/theme/tokens/index.ts b/src/theme/tokens/index.ts new file mode 100644 index 00000000..9344acc6 --- /dev/null +++ b/src/theme/tokens/index.ts @@ -0,0 +1,6 @@ +import dimensions from './semantic/dimensions.json' +import effects from './semantic/effects.json' + +export const semanticTokens = { dimension: dimensions, effects } as const + +export type SemanticTokens = typeof semanticTokens diff --git a/src/theme/tokens/semantic/colorScheme/dark.json b/src/theme/tokens/semantic/colorScheme/dark.json new file mode 100644 index 00000000..4ae11e18 --- /dev/null +++ b/src/theme/tokens/semantic/colorScheme/dark.json @@ -0,0 +1,228 @@ +{ + "color": { + "fg": { + "default": "#ffffff", + "hover": "#cecfd2", + "active": "#f0f0f1", + "focus": "#ffffff", + "muted": "#a2a5a9", + "subtle": "#a2a5a9", + "brand": { + "default": "#77f48a", + "hover": "#aafbb7", + "active": "#d4fedc", + "disabled": "#168322", + "visited": "#aafbb7", + "muted": "#44e858" + }, + "inverse": { + "default": "#2b2e33", + "hover": "#56595f", + "active": "#181a1f", + "focus": "#2b2e33", + "muted": "#85888e" + }, + "status": { + "danger": { + "default": "#f47f77", + "hover": "#fbacaa", + "active": "#fed4d4", + "disabled": "#8d2218", + "visited": "#fbacaa", + "muted": "#e85244" + }, + "info": { + "default": "#77baf4", + "hover": "#aad7fb", + "active": "#d4ecfe", + "disabled": "#18538d", + "visited": "#aad7fb", + "muted": "#4496e8" + }, + "warning": { + "default": "#facb75", + "hover": "#fddeaa", + "active": "#ffeed4", + "disabled": "#9d6d0e", + "visited": "#fddeaa", + "muted": "#f5b83d" + }, + "success": { + "default": "#77f48a", + "hover": "#aafbb7", + "active": "#d4fedc", + "disabled": "#168322", + "visited": "#aafbb7", + "muted": "#44e858" + }, + "help": { + "default": "#c084fc", + "hover": "#d8b4fe", + "active": "#e9d5ff", + "disabled": "#7e22ce", + "visited": "#d8b4fe", + "muted": "#a855f7" + } + }, + "on": { + "brand": { + "default": "#2b2e33", + "hover": "#2b2e33", + "active": "#2b2e33" + }, + "fill": { + "default": "#ffffff", + "hover": "#ffffff", + "active": "#ffffff", + "muted": "#e2e2e4" + }, + "status": { + "danger": { "default": "#fff0f0", "hover": "#fffafa" }, + "info": { "default": "#f0f9ff", "hover": "#fafdff" }, + "warning": { "default": "#fff9f0", "hover": "#fffdfa" }, + "success": { "default": "#f0fff3", "hover": "#fafffb" }, + "help": { "default": "#f3e8ff", "hover": "#faf5ff" } + } + } + }, + "bg": { + "status": { + "danger": { + "weak": { + "default": "#3b100c", + "hover": "#45120e", + "active": "#611912" + }, + "strong": { + "default": "#8d2218", + "hover": "#db3424", + "active": "#e85244" + } + }, + "info": { + "weak": { + "default": "#0c243b", + "hover": "#0e2a45", + "active": "#123a61" + }, + "strong": { + "default": "#18538d", + "hover": "#1e76cd", + "active": "#4496e8" + } + }, + "warning": { + "weak": { + "default": "#453008", + "hover": "#4f3709", + "active": "#6d4c0b" + }, + "strong": { + "default": "#9d6d0e", + "hover": "#dc9710", + "active": "#f5b83d" + } + }, + "success": { + "weak": { + "default": "#0c3b11", + "hover": "#0e4514", + "active": "#12611b" + }, + "strong": { + "default": "#168322", + "hover": "#1dc831", + "active": "#44e858" + } + }, + "help": { + "weak": { + "default": "#3b0764", + "hover": "#581c87", + "active": "#6b21a8" + }, + "strong": { + "default": "#7e22ce", + "hover": "#9333ea", + "active": "#a855f7" + } + } + }, + "brand": { + "weak": { "hover": "#0c3b11", "active": "#0e4514" }, + "strong": { + "default": "#44e858", + "hover": "#77f48a", + "active": "#aafbb7" + } + }, + "surface": { + "canvas": { + "default": "#2b2e33", + "hover": "#404348", + "active": "#56595f", + "selected": "#404348" + }, + "default": { + "default": "#404348", + "hover": "#56595f", + "active": "#6d7076", + "selected": "#56595f" + }, + "raised": { + "default": "#56595f", + "hover": "#6d7076", + "active": "#85888e", + "selected": "#6d7076" + }, + "overlay": { "default": "#404348", "hover": "#56595f" }, + "backdrop": "rgba(0, 0, 0, 0.6000)" + }, + "neutral": { + "weak": { + "default": "#2b2e33", + "hover": "#404348", + "active": "#56595f", + "disabled": "#404348" + }, + "medium": { + "default": "#404348", + "hover": "#56595f", + "active": "#6d7076", + "strong": "#85888e" + }, + "strong": { + "default": "#f0f0f1", + "hover": "#e2e2e4", + "active": "#cecfd2", + "selected": "#f0f0f1" + } + } + }, + "border": { + "focus": "#d4fedc", + "neutral": { + "default": "#404348", + "strong": "#56595f", + "bold": { "default": "#f0f0f1", "hover": "#e2e2e4" }, + "inverse": "#2b2e33" + }, + "brand": { + "subtle": "#12611b", + "default": "#44e858", + "strong": "#77f48a" + }, + "status": { + "danger": { + "subtle": "#db3424", + "default": "#e85244", + "strong": "#f47f77" + }, + "info": { "default": "#4496e8", "strong": "#77baf4" }, + "warning": { "default": "#f5b83d", "strong": "#facb75" }, + "success": { "default": "#44e858", "strong": "#77f48a" }, + "help": { "strong": "#c084fc" } + } + } + } +} diff --git a/src/theme/tokens/semantic/colorScheme/light.json b/src/theme/tokens/semantic/colorScheme/light.json new file mode 100644 index 00000000..695bff01 --- /dev/null +++ b/src/theme/tokens/semantic/colorScheme/light.json @@ -0,0 +1,228 @@ +{ + "color": { + "fg": { + "default": "#2b2e33", + "hover": "#56595f", + "active": "#181a1f", + "focus": "#2b2e33", + "muted": "#85888e", + "subtle": "#6d7076", + "brand": { + "default": "#44e858", + "hover": "#1dc831", + "active": "#168322", + "disabled": "#aafbb7", + "visited": "#12611b", + "muted": "#77f48a" + }, + "inverse": { + "default": "#ffffff", + "hover": "#ffffff", + "active": "#ffffff", + "focus": "#ffffff", + "muted": "rgba(255, 255, 255, 0.7000)" + }, + "status": { + "danger": { + "default": "#e85244", + "hover": "#db3424", + "active": "#8d2218", + "disabled": "#fbacaa", + "visited": "#611912", + "muted": "#f47f77" + }, + "info": { + "default": "#4496e8", + "hover": "#1e76cd", + "active": "#18538d", + "disabled": "#aad7fb", + "visited": "#123a61", + "muted": "#77baf4" + }, + "warning": { + "default": "#f5b83d", + "hover": "#dc9710", + "active": "#9d6d0e", + "disabled": "#fddeaa", + "visited": "#6d4c0b", + "muted": "#facb75" + }, + "success": { + "default": "#44e858", + "hover": "#1dc831", + "active": "#168322", + "disabled": "#aafbb7", + "visited": "#12611b", + "muted": "#77f48a" + }, + "help": { + "default": "#a855f7", + "hover": "#9333ea", + "active": "#7e22ce", + "disabled": "#d8b4fe", + "visited": "#6b21a8", + "muted": "#c084fc" + } + }, + "on": { + "brand": { + "default": "#2b2e33", + "hover": "#2b2e33", + "active": "#2b2e33" + }, + "fill": { + "default": "#ffffff", + "hover": "#ffffff", + "active": "#ffffff", + "muted": "#e2e2e4" + }, + "status": { + "danger": { "default": "#45120e", "hover": "#3b100c" }, + "info": { "default": "#0e2a45", "hover": "#0c243b" }, + "warning": { "default": "#4f3709", "hover": "#453008" }, + "success": { "default": "#0e4514", "hover": "#0c3b11" }, + "help": { "default": "#581c87", "hover": "#3b0764" } + } + } + }, + "bg": { + "status": { + "danger": { + "weak": { + "default": "#fffafa", + "hover": "#fff0f0", + "active": "#fed4d4" + }, + "strong": { + "default": "#fbacaa", + "hover": "#f47f77", + "active": "#e85244" + } + }, + "info": { + "weak": { + "default": "#fafdff", + "hover": "#f0f9ff", + "active": "#d4ecfe" + }, + "strong": { + "default": "#aad7fb", + "hover": "#77baf4", + "active": "#4496e8" + } + }, + "warning": { + "weak": { + "default": "#fffdfa", + "hover": "#fff9f0", + "active": "#ffeed4" + }, + "strong": { + "default": "#fddeaa", + "hover": "#facb75", + "active": "#f5b83d" + } + }, + "success": { + "weak": { + "default": "#fafffb", + "hover": "#f0fff3", + "active": "#d4fedc" + }, + "strong": { + "default": "#aafbb7", + "hover": "#77f48a", + "active": "#44e858" + } + }, + "help": { + "weak": { + "default": "#faf5ff", + "hover": "#f3e8ff", + "active": "#e9d5ff" + }, + "strong": { + "default": "#d8b4fe", + "hover": "#c084fc", + "active": "#a855f7" + } + } + }, + "brand": { + "weak": { "hover": "#fafffb", "active": "#f0fff3" }, + "strong": { + "default": "#44e858", + "hover": "#1dc831", + "active": "#168322" + } + }, + "surface": { + "canvas": { + "default": "#f0f0f1", + "hover": "#e2e2e4", + "active": "#cecfd2", + "selected": "#e2e2e4" + }, + "default": { + "default": "#ffffff", + "hover": "#fafafa", + "active": "#f0f0f1", + "selected": "#fafafa" + }, + "raised": { + "default": "#ffffff", + "hover": "#fafafa", + "active": "#f0f0f1", + "selected": "#fafafa" + }, + "overlay": { "default": "#ffffff", "hover": "#fafafa" }, + "backdrop": "rgba(0, 0, 0, 0.4000)" + }, + "neutral": { + "weak": { + "default": "#f0f0f1", + "hover": "#e2e2e4", + "active": "#cecfd2", + "disabled": "#e2e2e4" + }, + "medium": { + "default": "#e2e2e4", + "hover": "#cecfd2", + "active": "#a2a5a9", + "strong": "#85888e" + }, + "strong": { + "default": "#2b2e33", + "hover": "#404348", + "active": "#56595f", + "selected": "#2b2e33" + } + } + }, + "border": { + "focus": "#d4fedc", + "neutral": { + "default": "#e2e2e4", + "strong": "#cecfd2", + "bold": { "default": "#2b2e33", "hover": "#404348" }, + "inverse": "#ffffff" + }, + "brand": { + "subtle": "#d4fedc", + "default": "#44e858", + "strong": "#1dc831" + }, + "status": { + "danger": { + "subtle": "#f47f77", + "default": "#e85244", + "strong": "#db3424" + }, + "info": { "default": "#4496e8", "strong": "#1e76cd" }, + "warning": { "default": "#f5b83d", "strong": "#dc9710" }, + "success": { "default": "#44e858", "strong": "#1dc831" }, + "help": { "strong": "#9333ea" } + } + } + } +} diff --git a/src/theme/tokens/semantic/dimensions.json b/src/theme/tokens/semantic/dimensions.json new file mode 100644 index 00000000..28c7802d --- /dev/null +++ b/src/theme/tokens/semantic/dimensions.json @@ -0,0 +1,65 @@ +{ + "space": { + "100": 4, + "150": 6, + "200": 8, + "300": 10, + "400": 14, + "500": 18, + "600": 20, + "700": 24, + "800": 28, + "none": 0, + "negative": { "50": -2, "200": -8, "300": -12, "600": -24 } + }, + "size": { + "50": 2, + "100": 4, + "150": 6, + "200": 8, + "300": 10, + "350": 12, + "400": 14, + "450": 16, + "500": 18, + "600": 20, + "700": 24, + "750": 26, + "800": 28, + "900": 32, + "1000": 36, + "1100": 40, + "1200": 48, + "1300": 56, + "1400": 64, + "1500": 80, + "1600": 240, + "1700": 272, + "1800": 304, + "1900": 336, + "2000": 400, + "none": 0, + "max": 1600 + }, + "borderRadius": { + "100": 4, + "200": 8, + "300": 10, + "400": 14, + "500": 20, + "none": 0, + "max": 1600 + }, + "borderWidth": { "100": 1, "200": 2, "300": 4, "none": 0 }, + "focusRing": { "width": 4, "offset": 0 }, + "depth": { + "100": 1000, + "200": 1100, + "300": 1200, + "400": 1300, + "500": 1400, + "600": 1500, + "700": 1600 + }, + "viewport": { "100": 576, "200": 768, "300": 992, "400": 1200, "500": 1400 } +} diff --git a/src/theme/tokens/semantic/effects.json b/src/theme/tokens/semantic/effects.json new file mode 100644 index 00000000..1a1a6294 --- /dev/null +++ b/src/theme/tokens/semantic/effects.json @@ -0,0 +1,51 @@ +{ + "opacity": { + "0": 0, + "4": 0.04, + "8": 0.08, + "12": 0.12, + "16": 0.16, + "20": 0.2, + "30": 0.3, + "40": 0.4, + "50": 0.5, + "60": 0.6, + "70": 0.7, + "80": 0.8, + "90": 0.9, + "100": 1 + }, + "blur": { "100": 4, "200": 8, "300": 16, "400": 24, "none": 0 }, + "transition": { + "easing": { + "linear": { "x1": 0, "y1": 0, "x2": 1, "y2": 1 }, + "in": { "x1": 0.55, "y1": 0.06, "x2": 0.7, "y2": 0.2 }, + "out": { "x1": 0.2, "y1": 0.6, "x2": 0.4, "y2": 1 }, + "inOut": { "x1": 0.65, "y1": 0.05, "x2": 0.35, "y2": 1 }, + "standard": { "x1": 0.2, "y1": 0, "x2": 0, "y2": 1 }, + "accelerate": { "x1": 0.3, "y1": 0, "x2": 1, "y2": 1 }, + "decelerate": { "x1": 0, "y1": 0, "x2": 0, "y2": 1 }, + "emphasizedAccelerate": { "x1": 0.3, "y1": 0, "x2": 0.8, "y2": 0.15 }, + "emphasizedDecelerate": { "x1": 0.05, "y1": 0.7, "x2": 0.1, "y2": 1 }, + "spring": { "x1": 0.34, "y1": 1.56, "x2": 0.64, "y2": 1 } + }, + "duration": { "100": 140, "200": 180, "300": 240, "400": 320, "500": 400 } + }, + "elevation": { + "100": "0 0 2px rgba(0, 0, 0, 0.2000)", + "200": "0 0 4px rgba(0, 0, 0, 0.2000)", + "300": "0 2px 4px rgba(0, 0, 0, 0.2000)", + "400": "0 4px 8px rgba(0, 0, 0, 0.2000)", + "500": "0 8px 16px 0 rgba(0, 0, 0, 0.2000)", + "none": "none", + "status": { + "info": "0px 4px 8px 0px rgba(68, 150, 232, 0.04)", + "success": "0px 4px 8px 0px rgba(68, 232, 88, 0.04)", + "warning": "0px 4px 8px 0px rgba(245, 184, 61, 0.04)", + "danger": "0px 4px 8px 0px rgba(232, 82, 68, 0.04)", + "secondary": "0px 4px 8px 0px rgba(0, 0, 0, 0.0400)", + "contrast": "0px 4px 8px 0px rgba(0, 0, 0, 0.0400)" + } + }, + "focusRing": { "shadow": "inset 0 0 0 4px #d4fedc" } +} diff --git a/src/theme/types.ts b/src/theme/types.ts index 250836a5..a73c9ea9 100644 --- a/src/theme/types.ts +++ b/src/theme/types.ts @@ -12,6 +12,7 @@ import type sizing from './assets/sizing.json' import type spacing from './assets/spacing.json' import type lightTheme from './assets/themeLight.json' import type typography from './assets/typography.json' +import type lightSemanticColorSchemeTokens from './tokens/semantic/colorScheme/light.json' export interface ThemeType { background: typeof background @@ -21,6 +22,7 @@ export interface ThemeType { global: typeof global sizing: typeof sizing spacing: typeof spacing + semantic: { colorScheme: typeof lightSemanticColorSchemeTokens } theme: typeof lightTheme & { custom: typeof customLight InputSize: typeof InputSize diff --git a/yarn.lock b/yarn.lock index 8475446c..4cb04e52 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2841,6 +2841,7 @@ __metadata: "@testing-library/react-native": "npm:13.3.3" "@types/jest": "npm:29.5.14" "@types/lodash.map": "npm:4.6.13" + "@types/node": "npm:22.7.7" "@types/react": "npm:19.2.14" babel-loader: "npm:8.2.3" chalk: "npm:4.1.2" @@ -6087,7 +6088,7 @@ __metadata: languageName: node linkType: hard -"@types/node@npm:*": +"@types/node@npm:*, @types/node@npm:22.7.7": version: 22.7.7 resolution: "@types/node@npm:22.7.7" dependencies: