diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml index 25afca18..33e3f263 100644 --- a/.github/workflows/npm-publish.yml +++ b/.github/workflows/npm-publish.yml @@ -26,13 +26,11 @@ jobs: with: version: ${{github.ref_name}} - name: Sync src/lib/package.json version with root package.json + # Only sync the file in the working tree — the build/publish read it from here. + # Do NOT commit/push back: `main` is a protected branch and rejects direct pushes + # (GH013: Changes must be made through a pull request). run: | node -e "const fs=require('fs'); const path='src/lib/package.json'; const root=JSON.parse(fs.readFileSync('package.json')); const lib=JSON.parse(fs.readFileSync(path)); if(lib.version!==root.version){ lib.version=root.version; fs.writeFileSync(path, JSON.stringify(lib,null,2)+'\n'); }" - git config user.name "github-actions[bot]" - git config user.email "github-actions[bot]@users.noreply.github.com" - git add src/lib/package.json - # commit only if there are staged changes - git diff --cached --quiet || (git commit -m "chore(release): sync src/lib package version to ${{github.ref_name}}" && git push origin HEAD:refs/heads/${{ github.event.release.target_commitish }}) - run: npm run build:lib - name: Prepare dist/package.json run: | diff --git a/.gitignore b/.gitignore index e535eb88..fafd8dce 100644 --- a/.gitignore +++ b/.gitignore @@ -59,3 +59,5 @@ src/assets/components/themes .playwright-mcp/* .claude/* +.qwen +.worktrees/ diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 379ff709..174efb99 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -5,7 +5,6 @@ import docJson from '../documentation.json'; import { providePrimeNG } from 'primeng/config'; import { provideAnimationsAsync } from '@angular/platform-browser/animations/async'; import { GalleriaItemSlot } from 'primeng/galleria'; -import { RU_TRANSLATION } from '../src/prime-preset/locale/ru'; // Fix PrimeNG bug: GalleriaItemSlot's main item slot has no `type` attribute, // so the `item` setter's forEach loop never matches and context stays stale on updates. (function patchGalleriaItemSlot() { @@ -27,6 +26,7 @@ import { RU_TRANSLATION } from '../src/prime-preset/locale/ru'; import Preset from '../src/lib/providers/prime-preset/theme.preset'; import '!style-loader!css-loader!postcss-loader!sass-loader!../src/styles.scss'; +import { RU_TRANSLATION } from '../src/lib/providers/prime-preset/locale/ru'; setCompodocJson(docJson); diff --git a/README.md b/README.md index 9eaf1e4d..1ec27c03 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,63 @@ import { ExtraButtonComponent, ExtraTagComponent } from '@cdek-it/angular-ui-kit export class AppExample {} ``` +## Tailwind v4: вся дизайн-система из кита + +Кит публикует готовую **Tailwind v4 CSS-first тему** (`@theme`), **полностью сгенерированную из +своих дизайн-токенов** (`tokens.json` — тот же источник, что и тема PrimeNG). Это единая точка +истины: поменяли токен в ките → consumer'у достаточно bump'нуть версию, чтобы получить обновление, +согласованное с компонентами `extra-*`. Никаких JS-пресетов/`@config`/v3 — только v4 CSS-first. + +Генерация: `npm run generate:tailwind` (входит в `build:lib`). Артефакт: `tailwind/theme.css`. + +### Подключение (одна строка) + +В `styles.scss` проекта: + +```scss +@use "tailwindcss"; +@use "@cdek-it/angular-ui-kit/tailwind"; +``` + +### Что отдаёт кит (утилиты из токенов) + +| Namespace | Токены | Утилиты | +|---|---|---| +| colors | палитра + semantic | `bg-primary`, `text-danger`, `bg-surface-ground`, `border-surface-border`, `text-zinc-500`, … | +| fonts | `fontFamily` | `font-heading` (TT Fellows), `font-base` (PT Sans) | +| font-weight | `fontWeight` | `font-regular/medium/demibold/bold` | +| text (font-size) | `fontSize` | `text-100…text-1000` | +| leading (line-height) | `lineHeight` | `leading-100…leading-1000`, `leading-auto` | +| radius | `borderRadius` | `rounded-100…rounded-500`, `rounded-none`, `rounded-max` | +| shadow | `shadows` | `shadow-100…shadow-500`, `shadow-none` | +| ease | `transition.easing` | `ease-in/out/inOut` (плюс дефолтный `ease-linear`) | +| spacing | `spacing["1x"]` | одна ручка `--spacing` (множитель); из неё v4 выводит `p/m/w/h/gap/inset/space/translate` | + +Semantic-цвета (`primary`, `surface-ground`, `text`, …) ссылаются на runtime-переменные PrimeNG +(`--p-*`) и **трекают `provideExtraThemes()`**; оттенки палитры — статический слепок (их runtime-имена +нестандартны, поэтому зафиксированы в ките). + +> Не вошли в `@theme` (нет v4-namespace): `sizing`, `borderWidth` (только `--default-border-width`), +> `opacity`, `transition.duration`. Для них — дефолты v4 или произвольные значения +> (`border-[3px]`, `w-[15rem]`, `opacity-[.25]`). + +### Кастомизация (без болей) — локальный `@theme` поверх + +```scss +@use "tailwindcss"; +@use "@cdek-it/angular-ui-kit/tailwind"; + +@theme { + --color-primary: #ff0000; /* перебить */ + --color-brand: #123456; /* добавить */ + --breakpoint-xs: 480px; /* расширить */ +} +``` +v4 мержит `@theme`-блоки (last-wins) — конфликта нет, кит править не нужно. Разделение: кит владеет +дизайн-токенами, проект — build-конфигом (`content`-сканирование в v4 автоматическое, плагины через `@plugin`). + +--- + ## Используемые технологии и связанные зависимости --- diff --git a/docs/superpowers/plans/2026-04-16-inputnumber.md b/docs/superpowers/plans/2026-04-16-inputnumber.md deleted file mode 100644 index ab3591e0..00000000 --- a/docs/superpowers/plans/2026-04-16-inputnumber.md +++ /dev/null @@ -1,808 +0,0 @@ -# InputNumber Component — Implementation Plan - -> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. - -**Goal:** Создать Angular wrapper-компонент InputNumber с CSS-переопределениями и Storybook-сториями. - -**Architecture:** Standalone CVA-компонент `InputNumberComponent`, оборачивающий PrimeNG `p-inputnumber`. CSS-оверрайды в `src/prime-preset/tokens/components/inputnumber.ts`, подключаются через `map-tokens.ts`. Четыре стории: Default (динамический template из args), FloatLabel (нативный `p-inputnumber` внутри `p-floatlabel`), Currency, MinMax. - -**Tech Stack:** Angular 20, PrimeNG 20, Storybook 8, Tailwind, `dt()` токены, Tabler Icons. - ---- - -## File Map - -| Действие | Путь | -|---|---| -| Создать | `src/lib/components/inputnumber/inputnumber.component.ts` | -| Создать | `src/prime-preset/tokens/components/inputnumber.ts` | -| Изменить | `src/prime-preset/map-tokens.ts` | -| Создать | `src/stories/components/inputnumber/inputnumber.stories.ts` | -| Создать | `src/stories/components/inputnumber/examples/inputnumber-float-label.component.ts` | -| Создать | `src/stories/components/inputnumber/examples/inputnumber-currency.component.ts` | -| Создать | `src/stories/components/inputnumber/examples/inputnumber-minmax.component.ts` | - ---- - -### Task 1: CSS-переопределения InputNumber - -**Files:** -- Create: `src/prime-preset/tokens/components/inputnumber.ts` -- Modify: `src/prime-preset/map-tokens.ts` - -- [ ] **Step 1: Создать файл CSS-токенов** - -Создать `src/prime-preset/tokens/components/inputnumber.ts`: - -```typescript -export const inputnumberCss = ({ dt }: { dt: (token: string) => string }): string => ` - -/* ─── Кнопки +/− ─── */ -.p-inputnumber-button { - border-width: ${dt('inputnumber.extend.borderWidth')}; -} - -.p-inputnumber-horizontal .p-inputnumber-button { - min-height: ${dt('inputnumber.extend.extButton.height')}; -} - -/* ─── Disabled состояние кнопок ─── */ -.p-inputnumber-horizontal:has(.p-inputnumber-input:disabled) .p-inputnumber-button { - background: ${dt('inputtext.root.disabledBackground')}; - color: ${dt('inputtext.root.disabledColor')}; -} - -/* ─── Extra Large ─── */ -.p-inputnumber.p-inputnumber-xlg .p-inputnumber-input { - font-size: ${dt('inputtext.extend.extXlg.fontSize')}; - padding: ${dt('inputtext.extend.extXlg.paddingY')} ${dt('inputtext.extend.extXlg.paddingX')}; -} -`; -``` - -- [ ] **Step 2: Зарегистрировать CSS в map-tokens.ts** - -Открыть `src/prime-preset/map-tokens.ts`. Добавить импорт после строки с `inputtextCss`: - -```typescript -import { inputnumberCss } from './tokens/components/inputnumber'; -``` - -Добавить запись в объект `components` после блока `inputtext`: - -```typescript -inputnumber: { - ...(tokens.components.inputnumber as unknown as ComponentsDesignTokens['inputnumber']), - css: inputnumberCss, -}, -``` - -- [ ] **Step 3: Проверить компиляцию** - -```bash -cd /Users/d.khaliulin/Downloads/angular-ui-kit-feature-styles-debug -npx tsc --noEmit -``` - -Ожидается: нет ошибок. - -- [ ] **Step 4: Коммит** - -```bash -git add src/prime-preset/tokens/components/inputnumber.ts src/prime-preset/map-tokens.ts -git commit -m "feat(inputnumber): добавить CSS-переопределения токенов" -``` - ---- - -### Task 2: InputNumberComponent - -**Files:** -- Create: `src/lib/components/inputnumber/inputnumber.component.ts` - -- [ ] **Step 1: Создать компонент** - -Создать `src/lib/components/inputnumber/inputnumber.component.ts`: - -```typescript -import { Component, Input, forwardRef } from '@angular/core'; -import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms'; -import { NgClass } from '@angular/common'; -import { InputNumber } from 'primeng/inputnumber'; - -export type InputNumberSize = 'small' | 'base' | 'large' | 'xlarge'; -export type InputNumberButtonLayout = 'horizontal' | 'vertical' | 'stacked'; -export type InputNumberMode = 'decimal' | 'currency'; - -@Component({ - selector: 'input-number', - standalone: true, - imports: [InputNumber, NgClass, FormsModule], - providers: [ - { - provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => InputNumberComponent), - multi: true, - }, - ], - template: ` - - `, -}) -export class InputNumberComponent implements ControlValueAccessor { - @Input() size: InputNumberSize = 'base'; - @Input() placeholder = ''; - @Input() disabled = false; - @Input() readonly = false; - @Input() invalid = false; - @Input() showButtons = true; - @Input() buttonLayout: InputNumberButtonLayout = 'horizontal'; - @Input() mode: InputNumberMode = 'decimal'; - @Input() currency = 'RUB'; - @Input() locale = 'ru-RU'; - @Input() prefix: string | undefined = undefined; - @Input() suffix: string | undefined = undefined; - @Input() min: number | undefined = undefined; - @Input() max: number | undefined = undefined; - @Input() step = 1; - @Input() minFractionDigits = 0; - @Input() maxFractionDigits = 20; - @Input() fluid = false; - - modelValue: number | null = null; - - private _onChange: (value: number | null) => void = () => {}; - onTouched: () => void = () => {}; - - get primeSize(): 'small' | 'large' | undefined { - if (this.size === 'small') return 'small'; - if (this.size === 'large' || this.size === 'xlarge') return 'large'; - return undefined; - } - - get sizeClass(): Record { - return { 'p-inputnumber-xlg': this.size === 'xlarge' }; - } - - onInputChange(event: { value: number | null | undefined }): void { - const value = event.value ?? null; - this.modelValue = value; - this._onChange(value); - } - - writeValue(value: number | null): void { - this.modelValue = value ?? null; - } - - registerOnChange(fn: (value: number | null) => void): void { - this._onChange = fn; - } - - registerOnTouched(fn: () => void): void { - this.onTouched = fn; - } - - setDisabledState(isDisabled: boolean): void { - this.disabled = isDisabled; - } -} -``` - -- [ ] **Step 2: Проверить компиляцию** - -```bash -npx tsc --noEmit -``` - -Ожидается: нет ошибок. - -- [ ] **Step 3: Коммит** - -```bash -git add src/lib/components/inputnumber/inputnumber.component.ts -git commit -m "feat(inputnumber): добавить компонент InputNumberComponent" -``` - ---- - -### Task 3: FloatLabel story - -**Files:** -- Create: `src/stories/components/inputnumber/examples/inputnumber-float-label.component.ts` - -- [ ] **Step 1: Создать файл** - -Создать `src/stories/components/inputnumber/examples/inputnumber-float-label.component.ts`: - -```typescript -import { Component } from '@angular/core'; -import { FormsModule } from '@angular/forms'; -import { StoryObj } from '@storybook/angular'; -import { InputNumber } from 'primeng/inputnumber'; -import { FloatLabel } from 'primeng/floatlabel'; - -const template = ` -
- - - - -
-`; -const styles = ''; - -@Component({ - selector: 'app-inputnumber-float-label', - standalone: true, - imports: [InputNumber, FloatLabel, FormsModule], - template, - styles, -}) -export class InputNumberFloatLabelComponent { - value: number | null = null; -} - -export const FloatLabelStory: StoryObj = { - name: 'FloatLabel', - render: () => ({ - template: ``, - }), - parameters: { - controls: { disable: true }, - docs: { - description: { - story: - 'Интеграция с `p-floatlabel` — плавающая метка внутри поля. Требует нативный `p-inputnumber` как прямой дочерний элемент `p-floatlabel`.', - }, - source: { - language: 'ts', - code: ` -import { Component } from '@angular/core'; -import { InputNumber } from 'primeng/inputnumber'; -import { FloatLabel } from 'primeng/floatlabel'; -import { FormsModule } from '@angular/forms'; - -@Component({ - selector: 'app-inputnumber-float-label', - standalone: true, - imports: [InputNumber, FloatLabel, FormsModule], - template: \` - - - - - \`, -}) -export class InputNumberFloatLabelComponent { - value: number | null = null; -} - `, - }, - }, - }, -}; -``` - -- [ ] **Step 2: Проверить компиляцию** - -```bash -npx tsc --noEmit -``` - -Ожидается: нет ошибок. - ---- - -### Task 4: Currency story - -**Files:** -- Create: `src/stories/components/inputnumber/examples/inputnumber-currency.component.ts` - -- [ ] **Step 1: Создать файл** - -Создать `src/stories/components/inputnumber/examples/inputnumber-currency.component.ts`: - -```typescript -import { StoryObj } from '@storybook/angular'; -import { InputNumberComponent } from '../../../../lib/components/inputnumber/inputnumber.component'; - -type Story = StoryObj; - -export const Currency: Story = { - name: 'Currency', - render: (args) => ({ - props: { ...args, value: null }, - template: ` - - `, - }), - args: { - mode: 'currency', - currency: 'RUB', - locale: 'ru-RU', - minFractionDigits: 2, - maxFractionDigits: 2, - }, - parameters: { - docs: { - description: { - story: 'Режим валюты — форматирует значение с символом валюты по заданной локали.', - }, - source: { - language: 'ts', - code: ` -import { InputNumberComponent } from '@cdek-it/angular-ui-kit'; -import { FormsModule } from '@angular/forms'; - -// template: -// - `, - }, - }, - }, -}; -``` - ---- - -### Task 5: MinMax story - -**Files:** -- Create: `src/stories/components/inputnumber/examples/inputnumber-minmax.component.ts` - -- [ ] **Step 1: Создать файл** - -Создать `src/stories/components/inputnumber/examples/inputnumber-minmax.component.ts`: - -```typescript -import { StoryObj } from '@storybook/angular'; -import { InputNumberComponent } from '../../../../lib/components/inputnumber/inputnumber.component'; - -type Story = StoryObj; - -export const MinMax: Story = { - name: 'Min / Max / Step', - render: (args) => ({ - props: { ...args, value: null }, - template: ` - - `, - }), - args: { - min: 0, - max: 100, - step: 1, - placeholder: '0–100', - }, - parameters: { - docs: { - description: { - story: 'Ограничения min/max и шаг изменения через кнопки и клавиатуру.', - }, - source: { - language: 'ts', - code: ` -import { InputNumberComponent } from '@cdek-it/angular-ui-kit'; -import { FormsModule } from '@angular/forms'; - -// template: -// - `, - }, - }, - }, -}; -``` - ---- - -### Task 6: Main stories file - -**Files:** -- Create: `src/stories/components/inputnumber/inputnumber.stories.ts` - -- [ ] **Step 1: Создать файл** - -Создать `src/stories/components/inputnumber/inputnumber.stories.ts`: - -```typescript -import { Meta, StoryObj, moduleMetadata } from '@storybook/angular'; -import { FormsModule } from '@angular/forms'; -import { InputNumberComponent } from '../../../lib/components/inputnumber/inputnumber.component'; -import { InputNumberFloatLabelComponent, FloatLabelStory } from './examples/inputnumber-float-label.component'; -import { Currency } from './examples/inputnumber-currency.component'; -import { MinMax } from './examples/inputnumber-minmax.component'; - -type InputNumberArgs = InputNumberComponent; - -const meta: Meta = { - title: 'Components/Form/InputNumber', - component: InputNumberComponent, - tags: ['autodocs'], - decorators: [ - moduleMetadata({ - imports: [ - InputNumberComponent, - FormsModule, - InputNumberFloatLabelComponent, - ], - }), - ], - parameters: { - designTokens: { prefix: '--p-inputnumber' }, - docs: { - description: { - component: `Числовое поле ввода с поддержкой форматирования и кнопок +/−. - -\`\`\`typescript -import { InputNumberComponent } from '@cdek-it/angular-ui-kit'; -\`\`\``, - }, - }, - }, - argTypes: { - // ── Props ──────────────────────────────────────────────── - size: { - control: 'select', - options: ['small', 'base', 'large', 'xlarge'], - description: 'Размер поля', - table: { - category: 'Props', - defaultValue: { summary: "'base'" }, - type: { summary: "'small' | 'base' | 'large' | 'xlarge'" }, - }, - }, - placeholder: { - control: 'text', - description: 'Подсказка при пустом поле', - table: { - category: 'Props', - defaultValue: { summary: "''" }, - type: { summary: 'string' }, - }, - }, - disabled: { - control: 'boolean', - description: 'Отключает взаимодействие', - table: { - category: 'Props', - defaultValue: { summary: 'false' }, - type: { summary: 'boolean' }, - }, - }, - readonly: { - control: 'boolean', - description: 'Только для чтения', - table: { - category: 'Props', - defaultValue: { summary: 'false' }, - type: { summary: 'boolean' }, - }, - }, - invalid: { - control: 'boolean', - description: 'Невалидное состояние', - table: { - category: 'Props', - defaultValue: { summary: 'false' }, - type: { summary: 'boolean' }, - }, - }, - showButtons: { - control: 'boolean', - description: 'Показывать кнопки +/−', - table: { - category: 'Props', - defaultValue: { summary: 'true' }, - type: { summary: 'boolean' }, - }, - }, - buttonLayout: { - control: 'select', - options: ['horizontal', 'vertical', 'stacked'], - description: 'Расположение кнопок', - table: { - category: 'Props', - defaultValue: { summary: "'horizontal'" }, - type: { summary: "'horizontal' | 'vertical' | 'stacked'" }, - }, - }, - mode: { - control: 'select', - options: ['decimal', 'currency'], - description: 'Режим отображения значения', - table: { - category: 'Props', - defaultValue: { summary: "'decimal'" }, - type: { summary: "'decimal' | 'currency'" }, - }, - }, - currency: { - control: 'text', - description: 'Код валюты ISO 4217, используется при mode="currency"', - table: { - category: 'Props', - defaultValue: { summary: "'RUB'" }, - type: { summary: 'string' }, - }, - }, - locale: { - control: 'text', - description: 'Локаль для форматирования числа', - table: { - category: 'Props', - defaultValue: { summary: "'ru-RU'" }, - type: { summary: 'string' }, - }, - }, - prefix: { - control: 'text', - description: 'Префикс перед значением', - table: { - category: 'Props', - type: { summary: 'string' }, - }, - }, - suffix: { - control: 'text', - description: 'Суффикс после значения (например, "%")', - table: { - category: 'Props', - type: { summary: 'string' }, - }, - }, - min: { - control: 'number', - description: 'Минимально допустимое значение', - table: { - category: 'Props', - type: { summary: 'number' }, - }, - }, - max: { - control: 'number', - description: 'Максимально допустимое значение', - table: { - category: 'Props', - type: { summary: 'number' }, - }, - }, - step: { - control: 'number', - description: 'Шаг изменения значения', - table: { - category: 'Props', - defaultValue: { summary: '1' }, - type: { summary: 'number' }, - }, - }, - minFractionDigits: { - control: { type: 'number', min: 0, max: 20 }, - description: 'Минимальное количество знаков после запятой', - table: { - category: 'Props', - defaultValue: { summary: '0' }, - type: { summary: 'number' }, - }, - }, - maxFractionDigits: { - control: { type: 'number', min: 0, max: 20 }, - description: 'Максимальное количество знаков после запятой', - table: { - category: 'Props', - defaultValue: { summary: '20' }, - type: { summary: 'number' }, - }, - }, - fluid: { - control: 'boolean', - description: 'Растягивает поле на всю ширину контейнера', - table: { - category: 'Props', - defaultValue: { summary: 'false' }, - type: { summary: 'boolean' }, - }, - }, - // Hidden computed props - modelValue: { table: { disable: true } }, - primeSize: { table: { disable: true } }, - sizeClass: { table: { disable: true } }, - }, - args: { - size: 'base', - placeholder: '0', - disabled: false, - readonly: false, - invalid: false, - showButtons: true, - buttonLayout: 'horizontal', - mode: 'decimal', - currency: 'RUB', - locale: 'ru-RU', - step: 1, - minFractionDigits: 0, - maxFractionDigits: 20, - fluid: false, - }, -}; - -export default meta; -type Story = StoryObj; - -// ── Default ────────────────────────────────────────────────────────────────── -export const Default: Story = { - name: 'Default', - render: (args) => { - const parts: string[] = []; - - if (args.size && args.size !== 'base') parts.push(`size="${args.size}"`); - if (args.placeholder) parts.push(`placeholder="${args.placeholder}"`); - if (args.disabled) parts.push(`[disabled]="true"`); - if (args.readonly) parts.push(`[readonly]="true"`); - if (args.invalid) parts.push(`[invalid]="true"`); - if (!args.showButtons) parts.push(`[showButtons]="false"`); - if (args.buttonLayout && args.buttonLayout !== 'horizontal') parts.push(`buttonLayout="${args.buttonLayout}"`); - if (args.mode && args.mode !== 'decimal') parts.push(`mode="${args.mode}"`); - if (args.mode === 'currency' && args.currency) parts.push(`currency="${args.currency}"`); - if (args.locale && args.locale !== 'ru-RU') parts.push(`locale="${args.locale}"`); - if (args.prefix) parts.push(`prefix="${args.prefix}"`); - if (args.suffix) parts.push(`suffix="${args.suffix}"`); - if (args.min !== undefined) parts.push(`[min]="${args.min}"`); - if (args.max !== undefined) parts.push(`[max]="${args.max}"`); - if (args.step && args.step !== 1) parts.push(`[step]="${args.step}"`); - if (args.minFractionDigits) parts.push(`[minFractionDigits]="${args.minFractionDigits}"`); - if (args.maxFractionDigits && args.maxFractionDigits !== 20) parts.push(`[maxFractionDigits]="${args.maxFractionDigits}"`); - if (args.fluid) parts.push(`[fluid]="true"`); - parts.push(`[(ngModel)]="value"`); - - const template = ``; - - return { props: { ...args, value: null }, template }; - }, - parameters: { - docs: { - description: { - story: 'Базовый пример компонента. Используйте Controls для интерактивного изменения пропсов.', - }, - }, - }, -}; - -// ── Re-exports from example components ──────────────────────────────────── -export { FloatLabelStory as FloatLabel, Currency, MinMax }; -``` - -- [ ] **Step 2: Проверить компиляцию** - -```bash -npx tsc --noEmit -``` - -Ожидается: нет ошибок. - -- [ ] **Step 3: Коммит** - -```bash -git add src/stories/components/inputnumber/ -git commit -m "feat(inputnumber): добавить Storybook-стории" -``` - ---- - -### Task 7: Финальная проверка - -- [ ] **Step 1: Полная проверка TypeScript** - -```bash -npx tsc --noEmit -``` - -Ожидается: нет ошибок. - -- [ ] **Step 2: Запустить Storybook и проверить визуально** - -```bash -npm run storybook -``` - -Открыть `http://localhost:6006` и проверить: -- `Components/Form/InputNumber` → Default: Controls меняют пропсы, code-snippet обновляется -- FloatLabel: метка анимируется при фокусе/вводе -- Currency: значение форматируется с символом ₽ -- Min/Max: кнопки не выходят за диапазон 0–100 - -- [ ] **Step 3: Финальный коммит** - -```bash -git add -A -git commit -m "feat(inputnumber): компонент InputNumber готов" -``` - ---- - -## Self-Review - -**Spec coverage:** -- ✅ Компонент с CVA — Task 2 -- ✅ Все 18 пропсов — Task 2 (InputNumberComponent) -- ✅ Size mapping (primeSize + p-inputnumber-xlg) — Task 2 -- ✅ Tabler Icons через `incrementButtonIcon` / `decrementButtonIcon` — Task 2 -- ✅ CSS overrides (border, height, disabled, xlarge) — Task 1 -- ✅ map-tokens регистрация — Task 1 -- ✅ Default story с динамическим template — Task 6 -- ✅ FloatLabel story (нативный p-inputnumber) — Task 3 -- ✅ Currency story — Task 4 -- ✅ MinMax story — Task 5 -- ✅ modelValue / primeSize / sizeClass скрыты в argTypes — Task 6 - -**Placeholder scan:** нет TBD/TODO. - -**Type consistency:** `InputNumberSize`, `InputNumberButtonLayout`, `InputNumberMode` определены в Task 2 и используются в `argTypes` Task 6 через строковые литералы — согласованы. diff --git a/package-lock.json b/package-lock.json index 5fe8bcf3..1b587fc8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.2", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { + "@tailwindcss/postcss": "^4.3.1", "cpx": "1.5.0" }, "devDependencies": { @@ -31,14 +32,15 @@ "@angular/router": "20.3.15", "@compodoc/compodoc": "1.1.32", "@primeng/themes": "20.4.0", + "@primeuix/themes": "1.2.5", "@storybook/addon-a11y": "10.1.8", "@storybook/addon-docs": "10.1.8", "@storybook/addon-themes": "^10.1.8", "@storybook/angular": "10.1.8", "@tabler/icons-webfont": "3.35.0", + "@tailwindcss/postcss": "4.3.1", "@types/jasmine": "5.1.13", "@typescript-eslint/eslint-plugin": "7.18.0", - "autoprefixer": "10.4.22", "eslint": "8.57.1", "eslint-config-prettier": "9.1.2", "eslint-plugin-import": "2.32.0", @@ -46,6 +48,7 @@ "eslint-plugin-prefer-arrow": "1.2.3", "eslint-plugin-storybook": "10.1.8", "jasmine-core": "5.13.0", + "js-yaml": "^4.1.0", "karma": "6.4.4", "karma-chrome-launcher": "3.2.0", "karma-coverage": "2.2.1", @@ -56,7 +59,7 @@ "primeng": "20.4.0", "rxjs": "7.8.2", "storybook": "10.1.8", - "tailwindcss": "3.4.19", + "tailwindcss": "4.3.1", "tslib": "2.8.1", "typescript": "5.9.3", "zone.js": "0.15.1" @@ -6993,6 +6996,326 @@ "url": "https://github.com/sponsors/codecalm" } }, + "node_modules/@tailwindcss/node": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.3.1.tgz", + "integrity": "sha512-6NDaqRoAMSXD1mr/RXu0HBvNE9a2n5tHPsxu9XHLws8o4Twes5rBM2205SUUiJ9goAtadrN6xTGX0UDEwp/N4A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/remapping": "^2.3.5", + "enhanced-resolve": "5.21.6", + "jiti": "^2.7.0", + "lightningcss": "1.32.0", + "magic-string": "^0.30.21", + "source-map-js": "^1.2.1", + "tailwindcss": "4.3.1" + } + }, + "node_modules/@tailwindcss/node/node_modules/jiti": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.7.0.tgz", + "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==", + "dev": true, + "license": "MIT", + "bin": { + "jiti": "lib/jiti-cli.mjs" + } + }, + "node_modules/@tailwindcss/node/node_modules/magic-string": { + "version": "0.30.21", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", + "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.5" + } + }, + "node_modules/@tailwindcss/oxide": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.3.1.tgz", + "integrity": "sha512-yVPyo8RNkabVr3O2EhHEE0Rewu7YKzc1DhIqfL46LKveFrmu9XbDazNOJY7/GRuvw1h6u3utWnR29H/p5JPlgA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 20" + }, + "optionalDependencies": { + "@tailwindcss/oxide-android-arm64": "4.3.1", + "@tailwindcss/oxide-darwin-arm64": "4.3.1", + "@tailwindcss/oxide-darwin-x64": "4.3.1", + "@tailwindcss/oxide-freebsd-x64": "4.3.1", + "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.1", + "@tailwindcss/oxide-linux-arm64-gnu": "4.3.1", + "@tailwindcss/oxide-linux-arm64-musl": "4.3.1", + "@tailwindcss/oxide-linux-x64-gnu": "4.3.1", + "@tailwindcss/oxide-linux-x64-musl": "4.3.1", + "@tailwindcss/oxide-wasm32-wasi": "4.3.1", + "@tailwindcss/oxide-win32-arm64-msvc": "4.3.1", + "@tailwindcss/oxide-win32-x64-msvc": "4.3.1" + } + }, + "node_modules/@tailwindcss/oxide-android-arm64": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.3.1.tgz", + "integrity": "sha512-SVlyf61g374l5cHyg8x9kf5xmLcOaxvOTsbsqDnSsDJaKOEFZ7GCvi84VAVGpxojYOs1+3K6M0UjXfqPU8vmOQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-darwin-arm64": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.3.1.tgz", + "integrity": "sha512-hVnWLwv+e/l7c4WKyVtHVrIPvYdqWHjRB3MDIqARynzFtnQg85kmQEFCbV9Ja0VVx4xXTIiDWY60Y7iz/iNoDA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-darwin-x64": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.3.1.tgz", + "integrity": "sha512-Cf7abu0WVgbhU7ANgPUnSAvm7nCvMweusHb8FnaHlLfv/Caq4GYaEZg7ZImzzmjx4lIAfuS8q+eLIS7A7IzxIg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-freebsd-x64": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.3.1.tgz", + "integrity": "sha512-ZZqzX2Y+GXtXXfqSfpJhDm60OoZfvLHLCgm+J7NVqgHHJjG/m9ugZI77RwTsVd4fnBJuCFP6Ae6kTJb71UdS8g==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.3.1.tgz", + "integrity": "sha512-/Ah/xik0LaMYfv9DZ0S/t4pBlBNYOcqtRwusjgovHkvT8ixueWCLyJjsaF5kQIckjb4IT8Q6K6p/iPmZMixYgg==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm64-gnu": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.3.1.tgz", + "integrity": "sha512-gqdFoVJlw444GvpnheZLHmvTzSxI/cOUUh2KSNejQjTcYkW062SVD+En0rUgD+QV91bz1XGIGtt1HJd48xUGbQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-arm64-musl": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.3.1.tgz", + "integrity": "sha512-Bwv9KwOvE0VKa86xPFif9b9c3Y1NxOV1P0gLti/IYaWEsQYZXDlxfGEtA8mdDZ7SG3wyNXAWYT5SIn3giL57oA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-x64-gnu": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.3.1.tgz", + "integrity": "sha512-Ymi8O8T15HYQdOUWUtTI6ldN0neHP85FC+Qz32xTcZ7iJXtem/x8ITev0o1e9e5rkqj4lONZfTRLvkmin1+tKg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-linux-x64-musl": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.3.1.tgz", + "integrity": "sha512-M+P/91qJ6uILLw4k2G93GMDRAXj61SMvFQYt39AqvUqYgExXpLL5aepfns7sj4HiAQeolirQF9E0lzRvdf4zPQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.3.1.tgz", + "integrity": "sha512-zsM8uOeqvVGHsAXsJxsT28ttosFahLJKCLOTUBqRAtKnVgGSRitds9T432QiT8b77Yga7JIBkulIRRlJPtYhRA==", + "bundleDependencies": [ + "@napi-rs/wasm-runtime", + "@emnapi/core", + "@emnapi/runtime", + "@tybys/wasm-util", + "@emnapi/wasi-threads", + "tslib" + ], + "cpu": [ + "wasm32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@emnapi/core": "^1.10.0", + "@emnapi/runtime": "^1.10.0", + "@emnapi/wasi-threads": "^1.2.1", + "@napi-rs/wasm-runtime": "^1.1.4", + "@tybys/wasm-util": "^0.10.2", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/@tailwindcss/oxide-win32-arm64-msvc": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.3.1.tgz", + "integrity": "sha512-aiNvSq9BsVk8V513lDKlrCFAgf8qBMPZTpgEhInL+NwQqs97mYmupVMrPrgBBSL8Pv/0zXu9MrMF9rMun1ZeNg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/oxide-win32-x64-msvc": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.3.1.tgz", + "integrity": "sha512-xDEyu1rg290472FEGaKHnzyDyh5QH+AlWvsU5hMoMtPpzmKlRI0jaYKCgSHDYtaQWZOYbMaduSyCwFwY4n1HmA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 20" + } + }, + "node_modules/@tailwindcss/postcss": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.3.1.tgz", + "integrity": "sha512-dNJuNbdEJT/SWRuXTYP1WSamelsz3ztkUsdtWQPjrexysrTpaEPM40P/71knXiXLYEojqPOEGitVLLpPMS5T6A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@alloc/quick-lru": "^5.2.0", + "@tailwindcss/node": "4.3.1", + "@tailwindcss/oxide": "4.3.1", + "postcss": "8.5.15", + "tailwindcss": "4.3.1" + } + }, + "node_modules/@tailwindcss/postcss/node_modules/postcss": { + "version": "8.5.15", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.15.tgz", + "integrity": "sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.12", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, "node_modules/@testing-library/dom": { "version": "10.4.1", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz", @@ -8502,13 +8825,6 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, - "node_modules/any-promise": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", - "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", - "dev": true, - "license": "MIT" - }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -8569,13 +8885,6 @@ "node": ">=14" } }, - "node_modules/arg": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", - "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", - "dev": true, - "license": "MIT" - }, "node_modules/argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -8837,44 +9146,6 @@ "node": ">= 4.5.0" } }, - "node_modules/autoprefixer": { - "version": "10.4.22", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.22.tgz", - "integrity": "sha512-ARe0v/t9gO28Bznv6GgqARmVqcWOV3mfgUPn9becPHMiD3o9BwlRgaeccZnwTpZ7Zwqrm+c1sUSsMxIzQzc8Xg==", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/autoprefixer" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "dependencies": { - "browserslist": "^4.27.0", - "caniuse-lite": "^1.0.30001754", - "fraction.js": "^5.3.4", - "normalize-range": "^0.1.2", - "picocolors": "^1.1.1", - "postcss-value-parser": "^4.2.0" - }, - "bin": { - "autoprefixer": "bin/autoprefixer" - }, - "engines": { - "node": "^10 || ^12 || >=14" - }, - "peerDependencies": { - "postcss": "^8.1.0" - } - }, "node_modules/available-typed-arrays": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", @@ -9515,16 +9786,6 @@ "tslib": "^2.0.3" } }, - "node_modules/camelcase-css": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", - "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 6" - } - }, "node_modules/caniuse-lite": { "version": "1.0.30001760", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001760.tgz", @@ -11400,13 +11661,6 @@ "dev": true, "license": "MIT" }, - "node_modules/didyoumean": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", - "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", - "dev": true, - "license": "Apache-2.0" - }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", @@ -11420,13 +11674,6 @@ "node": ">=8" } }, - "node_modules/dlv": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", - "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", - "dev": true, - "license": "MIT" - }, "node_modules/dns-packet": { "version": "5.6.1", "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz", @@ -11789,14 +12036,14 @@ } }, "node_modules/enhanced-resolve": { - "version": "5.18.4", - "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz", - "integrity": "sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==", + "version": "5.21.6", + "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.21.6.tgz", + "integrity": "sha512-aNnGCvbJ/RIyWo1IuhNdVjnNF+EjH9wpzpNHt+ci/m9He9LJvUN8wrCcXjp9cWsGNAuvSpVFTx/vraAFQ8qGjQ==", "dev": true, "license": "MIT", "dependencies": { "graceful-fs": "^4.2.4", - "tapable": "^2.2.0" + "tapable": "^2.3.3" }, "engines": { "node": ">=10.13.0" @@ -13533,20 +13780,6 @@ "node": ">= 0.6" } }, - "node_modules/fraction.js": { - "version": "5.3.4", - "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz", - "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": "*" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/rawify" - } - }, "node_modules/fragment-cache": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz", @@ -16477,17 +16710,265 @@ } } }, - "node_modules/lilconfig": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz", - "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==", + "node_modules/lightningcss": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz", + "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==", "dev": true, - "license": "MIT", + "license": "MPL-2.0", + "dependencies": { + "detect-libc": "^2.0.3" + }, "engines": { - "node": ">=14" + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "lightningcss-android-arm64": "1.32.0", + "lightningcss-darwin-arm64": "1.32.0", + "lightningcss-darwin-x64": "1.32.0", + "lightningcss-freebsd-x64": "1.32.0", + "lightningcss-linux-arm-gnueabihf": "1.32.0", + "lightningcss-linux-arm64-gnu": "1.32.0", + "lightningcss-linux-arm64-musl": "1.32.0", + "lightningcss-linux-x64-gnu": "1.32.0", + "lightningcss-linux-x64-musl": "1.32.0", + "lightningcss-win32-arm64-msvc": "1.32.0", + "lightningcss-win32-x64-msvc": "1.32.0" + } + }, + "node_modules/lightningcss-android-arm64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz", + "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-arm64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz", + "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-x64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz", + "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-freebsd-x64": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz", + "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm-gnueabihf": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz", + "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" }, "funding": { - "url": "https://github.com/sponsors/antonk52" + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-gnu": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz", + "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-musl": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz", + "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-gnu": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz", + "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-musl": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz", + "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-arm64-msvc": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz", + "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-win32-x64-msvc": { + "version": "1.32.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz", + "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" } }, "node_modules/lines-and-columns": { @@ -17632,18 +18113,6 @@ "node": "^18.17.0 || >=20.5.0" } }, - "node_modules/mz": { - "version": "2.7.0", - "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", - "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", - "dev": true, - "license": "MIT", - "dependencies": { - "any-promise": "^1.0.0", - "object-assign": "^4.0.1", - "thenify-all": "^1.0.0" - } - }, "node_modules/nan": { "version": "2.24.0", "resolved": "https://registry.npmjs.org/nan/-/nan-2.24.0.tgz", @@ -17652,9 +18121,9 @@ "optional": true }, "node_modules/nanoid": { - "version": "3.3.11", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", - "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", + "version": "3.3.15", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.15.tgz", + "integrity": "sha512-y7Wygv/7mEOvxTuEQDB8StXdMRBWf1kR/tlhAzBRUFkB2jfcLOAxO/SHmOO2zgz1pVgK29/kyupn059/bCHdjA==", "dev": true, "funding": [ { @@ -18287,16 +18756,6 @@ "dev": true, "license": "MIT" }, - "node_modules/object-hash": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", - "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 6" - } - }, "node_modules/object-inspect": { "version": "1.13.4", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz", @@ -19237,26 +19696,6 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, - "node_modules/pify": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/pirates": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz", - "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 6" - } - }, "node_modules/piscina": { "version": "5.1.3", "resolved": "https://registry.npmjs.org/piscina/-/piscina-5.1.3.tgz", @@ -19355,93 +19794,6 @@ "node": "^10 || ^12 || >=14" } }, - "node_modules/postcss-import": { - "version": "15.1.0", - "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", - "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", - "dev": true, - "license": "MIT", - "dependencies": { - "postcss-value-parser": "^4.0.0", - "read-cache": "^1.0.0", - "resolve": "^1.1.7" - }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "postcss": "^8.0.0" - } - }, - "node_modules/postcss-js": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz", - "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "dependencies": { - "camelcase-css": "^2.0.1" - }, - "engines": { - "node": "^12 || ^14 || >= 16" - }, - "peerDependencies": { - "postcss": "^8.4.21" - } - }, - "node_modules/postcss-load-config": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz", - "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "dependencies": { - "lilconfig": "^3.1.1" - }, - "engines": { - "node": ">= 18" - }, - "peerDependencies": { - "jiti": ">=1.21.0", - "postcss": ">=8.0.9", - "tsx": "^4.8.1", - "yaml": "^2.4.2" - }, - "peerDependenciesMeta": { - "jiti": { - "optional": true - }, - "postcss": { - "optional": true - }, - "tsx": { - "optional": true - }, - "yaml": { - "optional": true - } - } - }, "node_modules/postcss-loader": { "version": "8.1.1", "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-8.1.1.tgz", @@ -19544,46 +19896,6 @@ "postcss": "^8.1.0" } }, - "node_modules/postcss-nested": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz", - "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==", - "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], - "license": "MIT", - "dependencies": { - "postcss-selector-parser": "^6.1.1" - }, - "engines": { - "node": ">=12.0" - }, - "peerDependencies": { - "postcss": "^8.2.14" - } - }, - "node_modules/postcss-nested/node_modules/postcss-selector-parser": { - "version": "6.1.2", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", - "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", - "dev": true, - "license": "MIT", - "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/postcss-selector-parser": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz", @@ -19931,16 +20243,6 @@ "license": "MIT", "peer": true }, - "node_modules/read-cache": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", - "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", - "dev": true, - "license": "MIT", - "dependencies": { - "pify": "^2.3.0" - } - }, "node_modules/readable-stream": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", @@ -22488,39 +22790,6 @@ "minimist": "^1.1.0" } }, - "node_modules/sucrase": { - "version": "3.35.1", - "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz", - "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@jridgewell/gen-mapping": "^0.3.2", - "commander": "^4.0.0", - "lines-and-columns": "^1.1.6", - "mz": "^2.7.0", - "pirates": "^4.0.1", - "tinyglobby": "^0.2.11", - "ts-interface-checker": "^0.1.9" - }, - "bin": { - "sucrase": "bin/sucrase", - "sucrase-node": "bin/sucrase-node" - }, - "engines": { - "node": ">=16 || 14 >=14.17" - } - }, - "node_modules/sucrase/node_modules/commander": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", - "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 6" - } - }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -22565,125 +22834,16 @@ } }, "node_modules/tailwindcss": { - "version": "3.4.19", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz", - "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@alloc/quick-lru": "^5.2.0", - "arg": "^5.0.2", - "chokidar": "^3.6.0", - "didyoumean": "^1.2.2", - "dlv": "^1.1.3", - "fast-glob": "^3.3.2", - "glob-parent": "^6.0.2", - "is-glob": "^4.0.3", - "jiti": "^1.21.7", - "lilconfig": "^3.1.3", - "micromatch": "^4.0.8", - "normalize-path": "^3.0.0", - "object-hash": "^3.0.0", - "picocolors": "^1.1.1", - "postcss": "^8.4.47", - "postcss-import": "^15.1.0", - "postcss-js": "^4.0.1", - "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0", - "postcss-nested": "^6.2.0", - "postcss-selector-parser": "^6.1.2", - "resolve": "^1.22.8", - "sucrase": "^3.35.0" - }, - "bin": { - "tailwind": "lib/cli.js", - "tailwindcss": "lib/cli.js" - }, - "engines": { - "node": ">=14.0.0" - } - }, - "node_modules/tailwindcss/node_modules/chokidar": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", - "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", - "dev": true, - "license": "MIT", - "dependencies": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - }, - "engines": { - "node": ">= 8.10.0" - }, - "funding": { - "url": "https://paulmillr.com/funding/" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, - "node_modules/tailwindcss/node_modules/chokidar/node_modules/glob-parent": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", - "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, - "license": "ISC", - "dependencies": { - "is-glob": "^4.0.1" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/tailwindcss/node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, - "node_modules/tailwindcss/node_modules/postcss-selector-parser": { - "version": "6.1.2", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", - "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", - "dev": true, - "license": "MIT", - "dependencies": { - "cssesc": "^3.0.0", - "util-deprecate": "^1.0.2" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/tailwindcss/node_modules/readdirp": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", - "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.3.1.tgz", + "integrity": "sha512-hk+TB1m+K8CYNrP6rjQaq/Y+4Zylwpa87mLYBKCunwnnQ9p+fHb7kmSfGqyEJoxF/O6CDyABWVFEafNSYKll+Q==", "dev": true, - "license": "MIT", - "dependencies": { - "picomatch": "^2.2.1" - }, - "engines": { - "node": ">=8.10.0" - } + "license": "MIT" }, "node_modules/tapable": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz", - "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==", + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz", + "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==", "dev": true, "license": "MIT", "engines": { @@ -22870,29 +23030,6 @@ "dev": true, "license": "MIT" }, - "node_modules/thenify": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", - "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", - "dev": true, - "license": "MIT", - "dependencies": { - "any-promise": "^1.0.0" - } - }, - "node_modules/thenify-all": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", - "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", - "dev": true, - "license": "MIT", - "dependencies": { - "thenify": ">= 3.1.0 < 4" - }, - "engines": { - "node": ">=0.8" - } - }, "node_modules/thingies": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/thingies/-/thingies-2.5.0.tgz", @@ -23130,13 +23267,6 @@ "node": ">=6.10" } }, - "node_modules/ts-interface-checker": { - "version": "0.1.13", - "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", - "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", - "dev": true, - "license": "Apache-2.0" - }, "node_modules/ts-morph": { "version": "27.0.2", "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-27.0.2.tgz", diff --git a/package.json b/package.json index 8fa837c7..f92df482 100644 --- a/package.json +++ b/package.json @@ -20,9 +20,11 @@ "format:check": "prettier --check \"**/*.{js,ts,d.ts}\"", "build:check": "npm run format:check && npm run security:check", "build:storybook": "ng run angular-ui-kit:build-storybook", - "build:lib": "ng build angular-ui-kit-lib", + "build:lib": "ng build angular-ui-kit-lib && npm run generate:tailwind && node tailwind/copy-to-dist.mjs", + "generate:tailwind": "node tailwind/generate.mjs", "security:check": "npm audit --production --audit-level high", - "copy:dist": "cpx 'src/lib/providers/prime-preset/**/*.{json,ts}' dist/ && cpx 'src-tokens/theme.preset.ts' dist/" + "copy:dist": "cpx 'src/lib/providers/prime-preset/**/*.{json,ts}' dist/ && cpx 'src-tokens/theme.preset.ts' dist/", + "validate:figma-cc": "node scripts/figma-code-connect/validate.mjs" }, "repository": "github:cdek-it/angular-ui-kit", "devDependencies": { @@ -45,14 +47,15 @@ "@angular/router": "20.3.15", "@compodoc/compodoc": "1.1.32", "@primeng/themes": "20.4.0", + "@primeuix/themes": "1.2.5", "@storybook/addon-a11y": "10.1.8", "@storybook/addon-docs": "10.1.8", "@storybook/addon-themes": "^10.1.8", "@storybook/angular": "10.1.8", "@tabler/icons-webfont": "3.35.0", + "@tailwindcss/postcss": "4.3.1", "@types/jasmine": "5.1.13", "@typescript-eslint/eslint-plugin": "7.18.0", - "autoprefixer": "10.4.22", "eslint": "8.57.1", "eslint-config-prettier": "9.1.2", "eslint-plugin-import": "2.32.0", @@ -60,23 +63,24 @@ "eslint-plugin-prefer-arrow": "1.2.3", "eslint-plugin-storybook": "10.1.8", "jasmine-core": "5.13.0", + "js-yaml": "^4.1.0", "karma": "6.4.4", "karma-chrome-launcher": "3.2.0", "karma-coverage": "2.2.1", "karma-jasmine": "5.1.0", - "ng-packagr": "20.3.2", - "@primeuix/themes": "1.2.5", "karma-jasmine-html-reporter": "2.1.0", + "ng-packagr": "20.3.2", "prettier": "3.7.4", "primeng": "20.4.0", "rxjs": "7.8.2", "storybook": "10.1.8", - "tailwindcss": "3.4.19", + "tailwindcss": "4.3.1", "tslib": "2.8.1", "typescript": "5.9.3", "zone.js": "0.15.1" }, "dependencies": { + "@tailwindcss/postcss": "^4.3.1", "cpx": "1.5.0" }, "eslintConfig": { diff --git a/postcss.config.js b/postcss.config.js index 67cdf1a5..390440a8 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,6 @@ +// Tailwind v4: движок + autoprefixer встроены в @tailwindcss/postcss. module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, + plugins: { + '@tailwindcss/postcss': {} + } }; diff --git a/scripts/figma-code-connect/__fixtures__/invalid-bad-status.figma.md b/scripts/figma-code-connect/__fixtures__/invalid-bad-status.figma.md new file mode 100644 index 00000000..b19e2d61 --- /dev/null +++ b/scripts/figma-code-connect/__fixtures__/invalid-bad-status.figma.md @@ -0,0 +1,40 @@ +--- +component: extra-fixture +selector: extra-fixture +import: + symbol: ExtraFixtureComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: TESTKEY + nodeId: '1:2' + componentKey: stable-key + name: 'Fixture' +status: nonsense +updated: '2026-06-22' +--- + +## Overview +Тестовый компонент. + +## Props mapping +| Figma | Angular | Type | Notes | +|-------|---------|------|-------| +| Size | size | 'sm' | | + +## Variants +### Default +Figma nodeId: `1:3` + +```html + +``` + +## Slots +Нет. + +## Related +Нет. + +## Do / Don't +- ✅ ОК. +- ❌ Не ОК. diff --git a/scripts/figma-code-connect/__fixtures__/invalid-closing-fence-language.figma.md b/scripts/figma-code-connect/__fixtures__/invalid-closing-fence-language.figma.md new file mode 100644 index 00000000..075c8978 --- /dev/null +++ b/scripts/figma-code-connect/__fixtures__/invalid-closing-fence-language.figma.md @@ -0,0 +1,40 @@ +--- +component: extra-fixture +selector: extra-fixture +import: + symbol: ExtraFixtureComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: TESTKEY + nodeId: '1:2' + componentKey: stable-key + name: 'Fixture' +status: stable +updated: '2026-06-22' +--- + +## Overview +Тестовый компонент. + +## Props mapping +| Figma | Angular | Type | Notes | +|-------|---------|------|-------| +| Size | size | 'sm' | | + +## Variants +### Default +Figma nodeId: `1:3` + +```html + +```html + +## Slots +Нет. + +## Related +Нет. + +## Do / Don't +- ✅ ОК. +- ❌ Не ОК. diff --git a/scripts/figma-code-connect/__fixtures__/invalid-dangling-cross-link.figma.md b/scripts/figma-code-connect/__fixtures__/invalid-dangling-cross-link.figma.md new file mode 100644 index 00000000..3f1eb722 --- /dev/null +++ b/scripts/figma-code-connect/__fixtures__/invalid-dangling-cross-link.figma.md @@ -0,0 +1,40 @@ +--- +component: extra-fixture-link +selector: extra-fixture-link +import: + symbol: ExtraFixtureLinkComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: TESTKEY + nodeId: '1:9' + componentKey: link-key + name: 'FixtureLink' +status: stable +updated: '2026-06-22' +--- + +## Overview +Фикстура со ссылкой на несуществующий контракт. + +## Props mapping +| Figma | Angular | Type | Notes | +|-------|---------|------|-------| +| Size | size | 'sm' | | + +## Variants +### Default +Figma nodeId: `1:10` + +```html + +``` + +## Slots +Нет. + +## Related +- [Nonexistent](./does-not-exist.figma.md) — намеренно битая ссылка + +## Do / Don't +- ✅ ОК. +- ❌ Не ОК. diff --git a/scripts/figma-code-connect/__fixtures__/invalid-dup-nodeid.figma.md b/scripts/figma-code-connect/__fixtures__/invalid-dup-nodeid.figma.md new file mode 100644 index 00000000..2c998137 --- /dev/null +++ b/scripts/figma-code-connect/__fixtures__/invalid-dup-nodeid.figma.md @@ -0,0 +1,40 @@ +--- +component: extra-fixture-dup +selector: extra-fixture-dup +import: + symbol: ExtraFixtureDupComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: TESTKEY + nodeId: '1:2' + componentKey: dup-key + name: 'FixtureDup' +status: stable +updated: '2026-06-22' +--- + +## Overview +Фикстура с тем же nodeId, что и valid.figma.md (1:2) — для проверки уникальности. + +## Props mapping +| Figma | Angular | Type | Notes | +|-------|---------|------|-------| +| Size | size | 'sm' | | + +## Variants +### Default +Figma nodeId: `1:4` + +```html + +``` + +## Slots +Нет. + +## Related +Нет. + +## Do / Don't +- ✅ ОК. +- ❌ Не ОК. diff --git a/scripts/figma-code-connect/__fixtures__/invalid-missing-frontmatter.figma.md b/scripts/figma-code-connect/__fixtures__/invalid-missing-frontmatter.figma.md new file mode 100644 index 00000000..b8345b33 --- /dev/null +++ b/scripts/figma-code-connect/__fixtures__/invalid-missing-frontmatter.figma.md @@ -0,0 +1,2 @@ +## Overview +Нет frontmatter. diff --git a/scripts/figma-code-connect/__fixtures__/invalid-missing-open-fence-language.figma.md b/scripts/figma-code-connect/__fixtures__/invalid-missing-open-fence-language.figma.md new file mode 100644 index 00000000..304737f0 --- /dev/null +++ b/scripts/figma-code-connect/__fixtures__/invalid-missing-open-fence-language.figma.md @@ -0,0 +1,40 @@ +--- +component: extra-fixture +selector: extra-fixture +import: + symbol: ExtraFixtureComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: TESTKEY + nodeId: '1:2' + componentKey: stable-key + name: 'Fixture' +status: stable +updated: 2026-06-22 +--- + +## Overview +Тестовый компонент. + +## Props mapping +| Figma | Angular | Type | Notes | +|-------|---------|------|-------| +| Size | size | 'sm' | | + +## Variants +### Default +Figma nodeId: `1:3` + +``` + +``` + +## Slots +Нет. + +## Related +Нет. + +## Do / Don't +- ✅ ОК. +- ❌ Не ОК. diff --git a/scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md b/scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md new file mode 100644 index 00000000..e1958e95 --- /dev/null +++ b/scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md @@ -0,0 +1,40 @@ +--- +component: extra-fixture +selector: extra-fixture +import: + symbol: ExtraFixtureComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: TESTKEY + nodeId: '1:2' + componentKey: stable-key + name: 'Fixture' +status: stable +updated: 2026-06-22 +--- + +## Overview +Тестовый компонент. + +## Variants +### Default +Figma nodeId: `1:3` + +```html + +``` + +## Props mapping +| Figma | Angular | Type | Notes | +|-------|---------|------|-------| +| Size | size | 'sm' | | + +## Slots +Нет. + +## Related +Нет. + +## Do / Don't +- ✅ ОК. +- ❌ Не ОК. diff --git a/scripts/figma-code-connect/__fixtures__/valid.figma.md b/scripts/figma-code-connect/__fixtures__/valid.figma.md new file mode 100644 index 00000000..26b549da --- /dev/null +++ b/scripts/figma-code-connect/__fixtures__/valid.figma.md @@ -0,0 +1,40 @@ +--- +component: extra-fixture +selector: extra-fixture +import: + symbol: ExtraFixtureComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: TESTKEY + nodeId: '1:2' + componentKey: stable-key + name: 'Fixture' +status: stable +updated: '2026-06-22' +--- + +## Overview +Тестовый компонент. + +## Props mapping +| Figma | Angular | Type | Notes | +|-------|---------|------|-------| +| Size | size | 'sm' | | + +## Variants +### Default +Figma nodeId: `1:3` + +```html + +``` + +## Slots +Нет. + +## Related +Нет. + +## Do / Don't +- ✅ ОК. +- ❌ Не ОК. diff --git a/scripts/figma-code-connect/validate.mjs b/scripts/figma-code-connect/validate.mjs new file mode 100644 index 00000000..42cac1cb --- /dev/null +++ b/scripts/figma-code-connect/validate.mjs @@ -0,0 +1,121 @@ +import { readFile, access } from 'node:fs/promises'; +import { dirname, resolve } from 'node:path'; +import yaml from 'js-yaml'; + +const REQUIRED_FIELDS = ['component', 'selector', 'import', 'figma', 'status', 'updated']; +const REQUIRED_FIGMA = ['fileKey', 'nodeId', 'componentKey', 'name']; +const SECTION_ORDER = ['## Overview', '## Props mapping', '## Variants', '## Slots', '## Related', "## Do / Don't"]; +const ALLOWED_STATUSES = ['stable', 'beta', 'deprecated', 'orphan-code']; + +// Markdown links pointing at another component's contract, with optional #anchor. +const CROSS_LINK_RE = /\]\(([^)\s#]+\.figma\.md)(#[^)]*)?\)/g; + +const FRONTMATTER_RE = /^---\n([\s\S]*?)\n---\n([\s\S]*)$/; + +function parseFrontmatter(raw) { + const m = raw.match(FRONTMATTER_RE); + if (!m) return null; + try { return { fm: yaml.load(m[1]), body: m[2] }; } + catch { return null; } +} + +export async function validateFile(path) { + const errors = []; + const raw = await readFile(path, 'utf8'); + const m = raw.match(FRONTMATTER_RE); + if (!m) { errors.push(`${path}: missing frontmatter`); return errors; } + let fm; + try { fm = yaml.load(m[1]); } + catch (e) { errors.push(`${path}: invalid YAML: ${e.message}`); return errors; } + for (const f of REQUIRED_FIELDS) if (!(f in fm)) errors.push(`${path}: missing field ${f}`); + if (fm.figma) for (const f of REQUIRED_FIGMA) if (!(f in fm.figma)) errors.push(`${path}: missing figma.${f}`); + if ('status' in fm && !ALLOWED_STATUSES.includes(fm.status)) { + errors.push(`${path}: unknown status "${fm.status}", expected one of: ${ALLOWED_STATUSES.join(' | ')}`); + } + const body = m[2]; + const positions = SECTION_ORDER.map(s => body.indexOf(`\n${s}`)); + const present = positions.map((p, i) => [p, i]).filter(([p]) => p !== -1); + for (let i = 1; i < present.length; i++) { + if (present[i][0] < present[i-1][0]) { + errors.push(`${path}: section order violation near ${SECTION_ORDER[present[i][1]]}`); + break; + } + } + const fences = [...body.matchAll(/^```(\w*)$/gm)]; + for (let i = 0; i < fences.length; i++) { + // Only opening fences (even index: 0, 2, 4, …) must carry a language. + // Closing fences (odd index) are bare ``` per CommonMark spec. + if (i % 2 === 0 && !fences[i][1]) errors.push(`${path}: code-fence without language`); + if (i % 2 === 1 && fences[i][1]) errors.push(`${path}: closing fence has language "${fences[i][1]}", must be bare`); + } + return errors; +} + +// Cross-links to sibling component contracts are reported as warnings, not errors: +// a contract may legitimately reference a pilot that hasn't been written yet +// (forward reference) without blocking the build. +export async function crossLinkWarnings(path) { + const raw = await readFile(path, 'utf8'); + const baseDir = dirname(path); + const seen = new Set(); + const warnings = []; + for (const m of raw.matchAll(CROSS_LINK_RE)) { + const link = m[1]; + const target = resolve(baseDir, link); + if (seen.has(target)) continue; + seen.add(target); + try { + await access(target); + } catch { + warnings.push(`${path}: dangling cross-link → ${link} (file not found)`); + } + } + return warnings; +} + +// nodeId uniqueness is a cross-file invariant, so it can only be checked over the +// whole set of contracts. A nodeId shared by two files breaks grep-based lookup. +export async function duplicateNodeIdErrors(paths) { + const byNodeId = new Map(); + for (const path of paths) { + const raw = await readFile(path, 'utf8'); + const parsed = parseFrontmatter(raw); + const nodeId = parsed?.fm?.figma?.nodeId; + if (!nodeId) continue; + if (!byNodeId.has(nodeId)) byNodeId.set(nodeId, []); + byNodeId.get(nodeId).push(path); + } + const errors = []; + for (const [nodeId, files] of byNodeId) { + if (files.length > 1) { + errors.push(`nodeId '${nodeId}' is not unique — appears in: ${files.join(', ')}`); + } + } + return errors; +} + +export async function validateAll(paths) { + const errors = []; + const warnings = []; + for (const path of paths) { + errors.push(...await validateFile(path)); + warnings.push(...await crossLinkWarnings(path)); + } + errors.push(...await duplicateNodeIdErrors(paths)); + return { errors, warnings }; +} + +if (import.meta.url === `file://${process.argv[1]}`) { + const args = process.argv.slice(2); + let files; + if (args.length) files = args; + else { + const { glob } = await import('node:fs/promises'); + files = []; + for await (const p of glob('src/lib/**/*.figma.md')) files.push(p); + } + const { errors, warnings } = await validateAll(files); + for (const w of warnings) console.error(`warning: ${w}`); + for (const e of errors) console.error(e); + process.exit(errors.length === 0 ? 0 : 1); +} diff --git a/scripts/figma-code-connect/validate.test.mjs b/scripts/figma-code-connect/validate.test.mjs new file mode 100644 index 00000000..2d8f54f8 --- /dev/null +++ b/scripts/figma-code-connect/validate.test.mjs @@ -0,0 +1,68 @@ +import { strict as assert } from 'node:assert'; +import { test } from 'node:test'; +import { validateFile, crossLinkWarnings, duplicateNodeIdErrors, validateAll } from './validate.mjs'; + +const FIX = 'scripts/figma-code-connect/__fixtures__'; + +test('valid fixture passes', async () => { + const errors = await validateFile('scripts/figma-code-connect/__fixtures__/valid.figma.md'); + assert.deepEqual(errors, []); +}); + +test('missing frontmatter fails', async () => { + const errors = await validateFile('scripts/figma-code-connect/__fixtures__/invalid-missing-frontmatter.figma.md'); + assert.ok(errors.some(e => /frontmatter/i.test(e))); +}); + +test('wrong section order fails', async () => { + const errors = await validateFile('scripts/figma-code-connect/__fixtures__/invalid-wrong-section-order.figma.md'); + assert.ok(errors.some(e => /order/i.test(e))); +}); + +test('missing open fence language fails', async () => { + const errors = await validateFile('scripts/figma-code-connect/__fixtures__/invalid-missing-open-fence-language.figma.md'); + assert.ok(errors.some(e => /code-fence/i.test(e))); +}); + +test('unknown status value fails', async () => { + const errors = await validateFile('scripts/figma-code-connect/__fixtures__/invalid-bad-status.figma.md'); + assert.ok(errors.some(e => /unknown status/i.test(e))); +}); + +test('closing fence with language fails', async () => { + const errors = await validateFile('scripts/figma-code-connect/__fixtures__/invalid-closing-fence-language.figma.md'); + assert.ok(errors.some(e => /closing fence/i.test(e))); +}); + +test('dangling cross-link is a warning, not an error', async () => { + const path = `${FIX}/invalid-dangling-cross-link.figma.md`; + const warnings = await crossLinkWarnings(path); + assert.ok(warnings.some(w => /dangling cross-link/i.test(w) && /does-not-exist/.test(w))); + // It must NOT surface as a hard error — forward references are allowed. + const errors = await validateFile(path); + assert.deepEqual(errors, []); +}); + +test('valid fixture has no dangling cross-link warnings', async () => { + const warnings = await crossLinkWarnings(`${FIX}/valid.figma.md`); + assert.deepEqual(warnings, []); +}); + +test('duplicate nodeId across files is an error', async () => { + const errors = await duplicateNodeIdErrors([ + `${FIX}/valid.figma.md`, + `${FIX}/invalid-dup-nodeid.figma.md`, + ]); + assert.ok(errors.some(e => /not unique/i.test(e) && /1:2/.test(e))); +}); + +test('unique nodeIds produce no duplicate error', async () => { + const errors = await duplicateNodeIdErrors([`${FIX}/valid.figma.md`]); + assert.deepEqual(errors, []); +}); + +test('validateAll separates errors from warnings', async () => { + const { errors, warnings } = await validateAll([`${FIX}/invalid-dangling-cross-link.figma.md`]); + assert.deepEqual(errors, []); + assert.ok(warnings.some(w => /dangling cross-link/i.test(w))); +}); diff --git a/scripts/tokens/baseline.json b/scripts/tokens/baseline.json new file mode 100644 index 00000000..869e9334 --- /dev/null +++ b/scripts/tokens/baseline.json @@ -0,0 +1,5072 @@ +{ + "primitive": { + "colors": { + "alpha": { + "white": { + "100": "rgba(255, 255, 255, 0.1000)", + "200": "rgba(255, 255, 255, 0.2000)", + "300": "rgba(255, 255, 255, 0.3000)", + "400": "rgba(255, 255, 255, 0.4000)", + "500": "rgba(255, 255, 255, 0.5000)", + "600": "rgba(255, 255, 255, 0.6000)", + "700": "rgba(255, 255, 255, 0.7000)", + "800": "rgba(255, 255, 255, 0.8000)", + "900": "rgba(255, 255, 255, 0.9000)", + "1000": "#ffffff" + }, + "black": { + "100": "rgba(0, 0, 0, 0.1000)", + "200": "rgba(0, 0, 0, 0.2000)", + "300": "rgba(0, 0, 0, 0.3000)", + "400": "rgba(0, 0, 0, 0.4000)", + "500": "rgba(0, 0, 0, 0.5000)", + "600": "rgba(0, 0, 0, 0.6000)", + "700": "rgba(0, 0, 0, 0.7000)", + "800": "rgba(0, 0, 0, 0.8000)", + "900": "rgba(0, 0, 0, 0.9000)", + "1000": "#000000" + } + }, + "solid": { + "purple": { + "50": "#faf5ff", + "100": "#f3e8ff", + "200": "#e9d5ff", + "300": "#d8b4fe", + "400": "#c084fc", + "500": "#a855f7", + "600": "#9333ea", + "700": "#7e22ce", + "800": "#6b21a8", + "900": "#581c87", + "950": "#3b0764" + }, + "fuchsia": { + "50": "#fdf4ff", + "100": "#fae8ff", + "200": "#f5d0fe", + "300": "#f0abfc", + "400": "#e879f9", + "500": "#d946ef", + "600": "#c026d3", + "700": "#a21caf", + "800": "#86198f", + "900": "#701a75", + "950": "#4a044e" + }, + "pink": { + "50": "#fdf2f8", + "100": "#fce7f3", + "200": "#fbcfe8", + "300": "#f9a8d4", + "400": "#f472b6", + "500": "#ec4899", + "600": "#db2777", + "700": "#be185d", + "800": "#9d174d", + "900": "#831843", + "950": "#500724" + }, + "rose": { + "50": "#fff1f2", + "100": "#ffe4e6", + "200": "#fecdd3", + "300": "#fda4af", + "400": "#fb7185", + "500": "#f43f5e", + "600": "#e11d48", + "700": "#be123c", + "800": "#9f1239", + "900": "#881337", + "950": "#4c0519" + }, + "teal": { + "50": "#f0fdfa", + "100": "#ccfbf1", + "200": "#99f6e4", + "300": "#5eead4", + "400": "#2dd4bf", + "500": "#14b8a6", + "600": "#0d9488", + "700": "#0f766e", + "800": "#115e59", + "900": "#134e4a", + "950": "#042f2e" + }, + "cyan": { + "50": "#ecfeff", + "100": "#cffafe", + "200": "#a5f3fc", + "300": "#67e8f9", + "400": "#22d3ee", + "500": "#06b6d4", + "600": "#0891b2", + "700": "#0e7490", + "800": "#155e75", + "900": "#164e63", + "950": "#013138" + }, + "sky": { + "50": "#f0f9ff", + "100": "#e0f2fe", + "200": "#bae6fd", + "300": "#7dd3fc", + "400": "#38bdf8", + "500": "#0ea5e9", + "600": "#0284c7", + "700": "#0369a1", + "800": "#075985", + "900": "#0c4a6e", + "950": "#082f49" + }, + "blue": { + "50": "#fafdff", + "100": "#f0f9ff", + "200": "#d4ecfe", + "300": "#aad7fb", + "400": "#77baf4", + "500": "#4496e8", + "600": "#1e76cd", + "700": "#18538d", + "800": "#123a61", + "900": "#0e2a45", + "950": "#0c243b" + }, + "indigo": { + "50": "#eef2ff", + "100": "#e0e7ff", + "200": "#c7d2fe", + "300": "#a5b4fc", + "400": "#818cf8", + "500": "#6366f1", + "600": "#4f46e5", + "700": "#4338ca", + "800": "#3730a3", + "900": "#312e81", + "950": "#1e1b4b" + }, + "violet": { + "50": "#fcfaff", + "100": "#f6f0ff", + "200": "#e5d4fe", + "300": "#cbaafb", + "400": "#b284f5", + "500": "#a265ec", + "600": "#9457ea", + "700": "#48188d", + "800": "#321261", + "900": "#240e45", + "950": "#1f0c3b" + }, + "emerald": { + "50": "#ecfdf5", + "100": "#d1fae5", + "200": "#a7f3d0", + "300": "#6ee7b7", + "400": "#34d399", + "500": "#10b981", + "600": "#059669", + "700": "#047857", + "800": "#065f46", + "900": "#064e3b", + "950": "#022c22" + }, + "green": { + "50": "#fafffb", + "100": "#f0fff3", + "200": "#d4fedc", + "300": "#aafbb7", + "400": "#77f48a", + "500": "#44e858", + "600": "#1dc831", + "700": "#168322", + "800": "#12611b", + "900": "#0e4514", + "950": "#0c3b11" + }, + "lime": { + "50": "#f7fee7", + "100": "#ecfccb", + "200": "#d9f99d", + "300": "#bef264", + "400": "#a3e635", + "500": "#84cc16", + "600": "#65a30d", + "700": "#4d7c0f", + "800": "#3f6212", + "900": "#365314", + "950": "#1a2e05" + }, + "red": { + "50": "#fffafa", + "100": "#fff0f0", + "200": "#fed4d4", + "300": "#fbacaa", + "400": "#f47f77", + "500": "#e85244", + "600": "#db3424", + "700": "#8d2218", + "800": "#611912", + "900": "#45120e", + "950": "#3b100c" + }, + "orange": { + "50": "#fffbfa", + "100": "#fff3f0", + "200": "#ffddd5", + "300": "#ffbca9", + "400": "#ff9273", + "500": "#fe6434", + "600": "#d53f0b", + "700": "#a83107", + "800": "#752506", + "900": "#561c05", + "950": "#4b1905" + }, + "amber": { + "50": "#fffbeb", + "100": "#fef3c7", + "200": "#fde68a", + "300": "#fcd34d", + "400": "#fbbf24", + "500": "#f59e0b", + "600": "#d97706", + "700": "#b45309", + "800": "#92400e", + "900": "#78350f", + "950": "#451a03" + }, + "yellow": { + "50": "#fffdfa", + "100": "#fff9f0", + "200": "#ffeed4", + "300": "#fddeaa", + "400": "#facb75", + "500": "#f5b83d", + "600": "#dc9710", + "700": "#9d6d0e", + "800": "#6d4c0b", + "900": "#4f3709", + "950": "#453008" + }, + "slate": { + "50": "#f8fafc", + "100": "#f1f5f9", + "200": "#e2e8f0", + "300": "#cbd5e1", + "400": "#94a3b8", + "500": "#64748b", + "600": "#475569", + "700": "#334155", + "800": "#1e293b", + "900": "#0f172a", + "950": "#020617" + }, + "gray": { + "50": "#f9fafb", + "100": "#f3f4f6", + "200": "#e5e7eb", + "300": "#d1d5db", + "400": "#9ca3af", + "500": "#6b7280", + "600": "#4b5563", + "700": "#374151", + "800": "#1f2937", + "900": "#111827", + "950": "#030712" + }, + "zinc": { + "50": "#fafafa", + "100": "#f0f0f1", + "200": "#e2e2e4", + "300": "#cecfd2", + "400": "#a2a5a9", + "500": "#85888e", + "600": "#6d7076", + "700": "#56595f", + "800": "#404348", + "900": "#2b2e33", + "950": "#181a1f" + }, + "neutral": { + "50": "#fafafa", + "100": "#f5f5f5", + "200": "#e5e5e5", + "300": "#d4d4d4", + "400": "#a3a3a3", + "500": "#737373", + "600": "#525252", + "700": "#404040", + "800": "#262626", + "900": "#171717", + "950": "#0a0a0a" + }, + "stone": { + "50": "#fafaf9", + "100": "#f5f5f4", + "200": "#e7e5e4", + "300": "#d6d3d1", + "400": "#a8a29e", + "500": "#78716c", + "600": "#57534e", + "700": "#44403c", + "800": "#292524", + "900": "#1c1917", + "950": "#0c0a09" + } + } + }, + "borderRadius": { + "100": "0.25rem", + "200": "0.5rem", + "300": "0.75rem", + "400": "1rem", + "500": "1.5rem", + "none": "0rem", + "max": "71.3571rem" + }, + "borderWidth": { + "100": "0.0714rem", + "200": "0.1429rem", + "300": "0.25rem", + "none": "0rem" + }, + "fonts": { + "fontFamily": { + "heading": "TT Fellows", + "base": "PT Sans" + }, + "fontWeight": { + "regular": "400", + "medium": "500", + "demibold": "600", + "bold": "700" + }, + "fontSize": { + "100": "0.75rem", + "200": "0.875rem", + "300": "1rem", + "400": "1.125rem", + "500": "1.25rem", + "600": "1.5rem", + "650": "1.875rem", + "700": "2.25rem", + "750": "3rem", + "800": "3.75rem", + "900": "4.5rem", + "1000": "6rem" + }, + "lineHeight": { + "100": "0.7857rem", + "150": "0.8571rem", + "200": "0.9286rem", + "250": "1rem", + "300": "1.0714rem", + "350": "1.1429rem", + "400": "1.2857rem", + "450": "1.4286rem", + "500": "1.5rem", + "550": "1.5714rem", + "600": "1.7143rem", + "700": "1.8571rem", + "800": "2.2857rem", + "850": "2.3571rem", + "900": "2.7857rem", + "1000": "3.3571rem", + "auto": "auto" + } + }, + "spacing": { + "none": "0rem", + "1x": "0.25rem", + "2x": "0.5rem", + "3x": "0.75rem", + "4x": "1rem", + "5x": "1.25rem", + "6x": "1.5rem", + "7x": "1.75rem", + "8x": "2rem", + "9x": "2.25rem", + "10x": "2.5rem", + "11x": "2.75rem", + "12x": "3rem", + "14x": "3.5rem", + "16x": "4rem", + "20x": "5rem", + "24x": "6rem", + "28x": "7rem", + "32x": "8rem", + "36x": "9rem", + "40x": "10rem" + }, + "sizing": { + "none": "0rem", + "min": "0.0714rem", + "1x": "0.25rem", + "2x": "0.5rem", + "3x": "0.75rem", + "4x": "1rem", + "5x": "1.25rem", + "6x": "1.5rem", + "7x": "1.75rem", + "8x": "2rem", + "9x": "2.25rem", + "10x": "2.5rem", + "11x": "2.75rem", + "12x": "3rem", + "14x": "3.5rem", + "16x": "4rem", + "20x": "5rem", + "24x": "6rem", + "28x": "7rem", + "32x": "8rem", + "36x": "9rem", + "40x": "10rem", + "44x": "11rem", + "48x": "12rem", + "52x": "13rem", + "56x": "14rem", + "60x": "15rem", + "64x": "16rem", + "68x": "17rem", + "72x": "18rem", + "76x": "19rem", + "80x": "20rem", + "84x": "21rem", + "88x": "22rem", + "92x": "23rem", + "96x": "24rem", + "100x": "25rem", + "104x": "26rem", + "108x": "27rem", + "112x": "28rem", + "116x": "29rem", + "120x": "30rem", + "124x": "34rem", + "128x": "45rem", + "132x": "50rem", + "136x": "54rem", + "140x": "58rem", + "144x": "60rem", + "max": "100%" + }, + "shadows": { + "100": "0 0 0.1rem {colors.alpha.black.200}", + "200": "0 0 0.25rem {colors.alpha.black.200}", + "300": "0 0.1rem 0.25rem {colors.alpha.black.200}", + "400": "0 0.25rem 0.5rem {colors.alpha.black.200}", + "500": "0 0.5rem 1rem 0 {colors.alpha.black.200}", + "none": "none" + }, + "transition": { + "easing": { + "linear": "linear", + "in": "cubic-bezier(0.55, 0.06, 0.7, 0.2)", + "out": "cubic-bezier(0.2, 0.6, 0.4, 1)", + "inOut": "cubic-bezier(0.65, 0.05, 0.35, 1)" + }, + "duration": { + "100": "140ms", + "200": "180ms", + "300": "240ms", + "400": "320ms", + "500": "400ms" + } + }, + "opacity": { + "250": "0.25", + "500": "0.5", + "1000": "1" + } + }, + "semantic": { + "list": { + "padding": "{spacing.1x}", + "gap": { + "100": "{spacing.1x}", + "200": "{spacing.2x}" + }, + "header": { + "padding": "{spacing.4x} {spacing.4x} 0 {spacing.4x}" + }, + "option": { + "padding": "{spacing.2x} {spacing.3x}", + "borderRadius": "{borderRadius.200}" + }, + "optionGroup": { + "padding": "{spacing.2x} {spacing.3x}", + "fontWeight": "{fonts.fontWeight.demibold}" + } + }, + "focusRing": { + "width": "{borderWidth.300}", + "style": "none", + "color": "{focusRing.extend.success}", + "offset": "0rem" + }, + "form": { + "padding": { + "100": "{spacing.1x}", + "200": "{spacing.2x}", + "300": "{spacing.3x}", + "400": "{spacing.4x}", + "500": "{spacing.5x}", + "600": "{spacing.6x}", + "700": "{spacing.7x}" + }, + "borderRadius": { + "100": "{borderRadius.200}", + "200": "{borderRadius.300}", + "300": "{borderRadius.max}" + }, + "borderWidth": "{borderWidth.100}", + "icon": { + "100": "{sizing.2x}", + "200": "{sizing.3x}", + "300": "{sizing.4x}", + "400": "{sizing.5x}", + "500": "{sizing.6x}" + }, + "transitionDuration": "{transition.duration.200}", + "size": { + "100": "{sizing.min}", + "150": "{sizing.1x}", + "200": "{sizing.2x}", + "250": "{sizing.3x}", + "300": "{sizing.4x}", + "350": "{sizing.5x}", + "400": "{sizing.6x}", + "500": "{sizing.8x}", + "600": "{sizing.10x}", + "700": "{sizing.12x}", + "800": "{sizing.16x}", + "900": "{sizing.20x}" + }, + "width": { + "100": "{sizing.6x}", + "200": "{sizing.8x}", + "300": "{sizing.10x}", + "350": "{sizing.11x}", + "400": "{sizing.12x}", + "500": "{sizing.60x}", + "full": "{sizing.max}" + }, + "gap": { + "100": "{spacing.1x}", + "200": "{spacing.2x}", + "300": "{spacing.3x}", + "400": "{spacing.4x}" + }, + "focusRing": { + "width": "{focusRing.width}", + "style": "{focusRing.style}", + "color": "{focusRing.color}", + "offset": "{focusRing.offset}" + }, + "sm": { + "width": "{sizing.60x}", + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{spacing.3x}", + "paddingY": "{spacing.3x}" + }, + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{spacing.4x}", + "paddingY": "{spacing.4x}", + "lg": { + "width": "{sizing.76x}", + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{spacing.5x}", + "paddingY": "{spacing.5x}" + }, + "xlg": { + "width": "{sizing.84x}", + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{spacing.6x}", + "paddingY": "{spacing.6x}" + } + }, + "content": { + "borderRadius": "{borderRadius.300}", + "padding": { + "100": "{spacing.1x}", + "200": "{spacing.2x}", + "300": "{spacing.4x}", + "400": "{spacing.6x}", + "500": "{spacing.7x}" + }, + "borderWidth": "{sizing.min}", + "gap": { + "100": "{spacing.1x}", + "200": "{spacing.2x}", + "300": "{spacing.3x}", + "400": "{spacing.4x}" + } + }, + "navigation": { + "width": { + "100": "{borderWidth.100}", + "200": "{borderWidth.300}" + }, + "borderRadius": "{borderRadius.100}", + "padding": { + "100": "{spacing.1x}", + "200": "{spacing.3x}", + "300": "{spacing.4x}", + "400": "{spacing.6x}" + }, + "size": { + "100": "{sizing.1x}", + "200": "{sizing.2x}", + "300": "{sizing.5x}", + "400": "{sizing.8x}", + "500": "{sizing.16x}" + }, + "submenu": { + "padding": "{spacing.5x}" + }, + "list": { + "padding": { + "100": "{spacing.1x}", + "200": "{spacing.2x}" + }, + "gap": "{spacing.1x}" + }, + "item": { + "padding": "{spacing.2x} {spacing.3x}", + "borderRadius": "{borderRadius.200}", + "gap": "{spacing.2x}" + }, + "submenuLabel": { + "padding": "{spacing.2x} {spacing.3x}", + "fontWeight": "{fonts.fontWeight.regular}" + }, + "submenuIcon": { + "size": "{fonts.fontSize.500}" + } + }, + "overlay": { + "mask": { + "transitionDuration": "{transition.duration.200}" + }, + "select": { + "borderRadius": "{borderRadius.300}", + "padding": "{spacing.1x}" + }, + "borderWidth": "{borderWidth.100}", + "icon": { + "size": { + "100": "{sizing.4x}", + "200": "{sizing.6x}", + "300": "{sizing.7x}", + "400": "{sizing.8x}", + "500": "{sizing.9x}" + } + }, + "popover": { + "borderRadius": "{borderRadius.200}", + "width": { + "100": "{sizing.2x}", + "200": "{sizing.3x}" + }, + "padding": { + "100": "{spacing.3x}", + "200": "{spacing.5x}" + } + }, + "modal": { + "borderRadius": "{borderRadius.500}", + "padding": { + "100": "{spacing.4x}", + "200": "{spacing.5x}", + "300": "{spacing.6x}" + } + }, + "gap": { + "100": "{spacing.1x}", + "200": "{spacing.2x}", + "300": "{spacing.3x}", + "400": "{spacing.4x}" + }, + "width": "{sizing.100x}", + "drawer": { + "padding": "{spacing.2x}" + }, + "sm": { + "width": "{sizing.80x}" + }, + "lg": { + "width": "{sizing.120x}" + }, + "xlg": { + "width": "{sizing.128x}" + } + }, + "feedback": { + "transitionDuration": "{transition.duration.200}", + "width": { + "100": "{sizing.min}", + "200": "{sizing.1x}", + "300": "{sizing.2x}", + "400": "{sizing.3x}", + "500": "{sizing.4x}", + "550": "{sizing.5x}", + "600": "{sizing.6x}", + "650": "{sizing.7x}", + "700": "{sizing.8x}", + "800": "{sizing.12x}", + "900": "{sizing.16x}" + }, + "icon": { + "size": { + "100": "{sizing.2x}", + "200": "{sizing.4x}", + "300": "{sizing.6x}", + "350": "{sizing.7x}", + "400": "{sizing.8x}", + "500": "{sizing.9x}" + } + }, + "padding": { + "100": "{spacing.2x}", + "200": "{spacing.4x}" + }, + "height": { + "100": "{sizing.2x}", + "200": "{sizing.3x}", + "300": "{sizing.4x}", + "400": "{sizing.5x}", + "500": "{sizing.6x}", + "600": "{sizing.7x}", + "650": "{sizing.8x}", + "700": "{sizing.9x}", + "750": "{sizing.10x}", + "800": "{sizing.11x}", + "850": "{sizing.12x}", + "900": "{sizing.16x}" + }, + "gap": { + "100": "{spacing.1x}", + "200": "{spacing.2x}", + "300": "{spacing.3x}", + "400": "{spacing.4x}" + } + }, + "data": { + "padding": { + "100": "{spacing.1x}", + "200": "{spacing.2x}", + "300": "{spacing.3x}", + "400": "{spacing.4x}", + "500": "{spacing.5x}" + }, + "icon": { + "size": { + "100": "{sizing.4x}", + "200": "{sizing.5x}", + "300": "{sizing.6x}", + "400": "{sizing.7x}", + "500": "{sizing.8x}", + "600": "{sizing.9x}", + "700": "{sizing.10x}" + } + }, + "transitionDuration": "{transition.duration.200}", + "borderWidth": "{borderWidth.none}", + "borderRadius": "{borderRadius.100}", + "gap": { + "100": "{spacing.1x}", + "200": "{spacing.2x}", + "300": "{spacing.3x}" + }, + "width": { + "100": "{sizing.min}", + "200": "{sizing.1x}", + "300": "{sizing.2x}", + "400": "{sizing.20x}" + } + }, + "media": { + "size": { + "100": "{sizing.1x}", + "200": "{sizing.2x}", + "300": "{sizing.8x}", + "400": "{sizing.10x}", + "500": "{sizing.14x}", + "600": "{sizing.16x}" + }, + "borderRadius": { + "100": "{borderRadius.200}", + "200": "{borderRadius.300}", + "300": "{borderRadius.400}", + "400": "{borderRadius.500}", + "max": "{borderRadius.max}" + }, + "icon": { + "size": { + "100": "{sizing.4x}", + "200": "{sizing.6x}", + "300": "{sizing.8x}" + } + }, + "transitionDuration": "{transition.duration.200}", + "padding": { + "100": "{spacing.1x}", + "200": "{spacing.2x}", + "300": "{spacing.3x}", + "400": "{spacing.4x}", + "500": "{spacing.5x}", + "600": "{spacing.6x}" + }, + "gap": { + "100": "{spacing.1x}", + "200": "{spacing.2x}" + } + }, + "controls": { + "iconOnly": { + "100": "{sizing.2x}", + "200": "{sizing.4x}", + "300": "{sizing.5x}", + "400": "{sizing.6x}", + "500": "{sizing.7x}", + "600": "{sizing.8x}", + "700": "{sizing.10x}", + "800": "{sizing.11x}", + "850": "{sizing.14x}", + "900": "{sizing.16x}" + }, + "borderRadius": { + "100": "{borderRadius.300}", + "200": "{borderRadius.400}", + "max": "{borderRadius.max}" + }, + "transitionDuration": "{transition.duration.200}", + "padding": { + "100": "{spacing.1x}", + "200": "{spacing.2x}", + "300": "{spacing.3x}", + "400": "{spacing.4x}", + "500": "{spacing.5x}", + "600": "{spacing.6x}" + }, + "gap": { + "100": "{spacing.2x}", + "200": "{spacing.3x}", + "300": "{spacing.4x}" + }, + "width": { + "100": "{sizing.min}" + } + }, + "colorScheme": { + "light": { + "success": { + "50": "{colors.solid.green.50}", + "100": "{colors.solid.green.100}", + "200": "{colors.solid.green.200}", + "300": "{colors.solid.green.300}", + "400": "{colors.solid.green.400}", + "500": "{colors.solid.green.500}", + "600": "{colors.solid.green.600}", + "700": "{colors.solid.green.700}", + "800": "{colors.solid.green.800}", + "900": "{colors.solid.green.900}", + "950": "{colors.solid.green.950}" + }, + "info": { + "50": "{colors.solid.blue.50}", + "100": "{colors.solid.blue.100}", + "200": "{colors.solid.blue.200}", + "300": "{colors.solid.blue.300}", + "400": "{colors.solid.blue.400}", + "500": "{colors.solid.blue.500}", + "600": "{colors.solid.blue.600}", + "700": "{colors.solid.blue.700}", + "800": "{colors.solid.blue.800}", + "900": "{colors.solid.blue.900}", + "950": "{colors.solid.blue.950}" + }, + "warn": { + "50": "{colors.solid.yellow.50}", + "100": "{colors.solid.yellow.100}", + "200": "{colors.solid.yellow.200}", + "300": "{colors.solid.yellow.300}", + "400": "{colors.solid.yellow.400}", + "500": "{colors.solid.yellow.500}", + "600": "{colors.solid.yellow.600}", + "700": "{colors.solid.yellow.700}", + "800": "{colors.solid.yellow.800}", + "900": "{colors.solid.yellow.900}", + "950": "{colors.solid.yellow.950}" + }, + "transparent": "rgba(255, 255, 255, 0.0001)", + "help": { + "50": "{colors.solid.purple.50}", + "100": "{colors.solid.purple.100}", + "200": "{colors.solid.purple.200}", + "300": "{colors.solid.purple.300}", + "400": "{colors.solid.purple.400}", + "500": "{colors.solid.purple.500}", + "600": "{colors.solid.purple.600}", + "700": "{colors.solid.purple.700}", + "800": "{colors.solid.purple.800}", + "900": "{colors.solid.purple.900}", + "950": "{colors.solid.purple.950}" + }, + "error": { + "50": "{colors.solid.red.50}", + "100": "{colors.solid.red.100}", + "200": "{colors.solid.red.200}", + "300": "{colors.solid.red.300}", + "400": "{colors.solid.red.400}", + "500": "{colors.solid.red.500}", + "600": "{colors.solid.red.600}", + "700": "{colors.solid.red.700}", + "800": "{colors.solid.red.800}", + "900": "{colors.solid.red.900}", + "950": "{colors.solid.red.950}" + }, + "surface": { + "0": "{colors.alpha.white.1000}", + "50": "{colors.solid.zinc.50}", + "100": "{colors.solid.zinc.100}", + "200": "{colors.solid.zinc.200}", + "300": "{colors.solid.zinc.300}", + "400": "{colors.solid.zinc.400}", + "500": "{colors.solid.zinc.500}", + "600": "{colors.solid.zinc.600}", + "700": "{colors.solid.zinc.700}", + "800": "{colors.solid.zinc.800}", + "900": "{colors.solid.zinc.900}", + "950": "{colors.solid.zinc.950}" + }, + "primary": { + "color": "{colors.solid.green.500}", + "contrastColor": "{colors.alpha.white.1000}", + "hoverColor": "{colors.solid.green.600}", + "activeColor": "{colors.solid.green.700}", + "hoverBackground": "{colors.solid.green.50}", + "activeBackground": "{colors.solid.green.100}", + "borderColor": "{colors.solid.green.200}", + "selectedBackground": "{colors.solid.green.500}", + "selectedHoverBackground": "{colors.solid.green.600}" + }, + "highlight": { + "background": "{colors.solid.zinc.900}", + "focusBackground": "{colors.solid.zinc.800}", + "color": "{colors.alpha.white.1000}", + "focusColor": "{colors.alpha.white.1000}" + }, + "focusRing": { + "shadow": "{shadows.200}", + "extend": { + "invalid": "{colors.solid.red.200}", + "success": "{colors.solid.green.200}", + "warning": "{colors.solid.yellow.200}", + "info": "{colors.solid.blue.200}" + } + }, + "mask": { + "background": "{colors.alpha.black.400}", + "color": "{surface.200}" + }, + "form": { + "background": "{colors.alpha.white.1000}", + "disabledBackground": "{colors.solid.zinc.200}", + "readonlyBackground": "{colors.solid.zinc.100}", + "filledBackground": "{colors.alpha.white.1000}", + "filledHoverBackground": "{colors.alpha.white.1000}", + "filledFocusBackground": "{colors.alpha.white.1000}", + "borderColor": "{colors.solid.zinc.300}", + "hoverBorderPrimaryColor": "{colors.solid.zinc.900}", + "focusBorderPrimaryColor": "{colors.solid.zinc.900}", + "hoverBorderSecondaryColor": "{colors.solid.green.600}", + "focusBorderSecondaryColor": "{colors.solid.green.600}", + "invalidBorderColor": "{colors.solid.red.400}", + "color": "{colors.solid.zinc.950}", + "disabledColor": "{colors.solid.zinc.500}", + "placeholderColor": "{colors.solid.zinc.500}", + "invalidPlaceholderColor": "{colors.solid.red.600}", + "floatLabelColor": "{colors.solid.zinc.500}", + "floatLabelFocusColor": "{colors.solid.zinc.500}", + "floatLabelActiveColor": "{colors.solid.zinc.500}", + "floatLabelInvalidColor": "{form.invalidPlaceholderColor}", + "iconColor": "{colors.solid.zinc.950}", + "backgroundHandler": "{colors.alpha.white.1000}", + "shadow": "{shadows.200}" + }, + "text": { + "color": "{colors.solid.zinc.900}", + "extend": { + "colorPrimaryStatic": "{colors.solid.zinc.900}", + "colorSecondaryStatic": "{colors.alpha.white.1000}", + "colorInverted": "{colors.alpha.white.1000}" + }, + "hoverColor": "{colors.solid.zinc.700}", + "primaryColor": "{colors.solid.green.600}", + "hoverPrimaryColor": "{colors.solid.green.700}", + "secondaryColor": "{colors.solid.zinc.600}", + "hoverSecondaryColor": "{colors.solid.zinc.400}", + "mutedColor": "{colors.solid.zinc.500}", + "hoverMutedColor": "{colors.solid.zinc.300}", + "disabledColor": "{colors.solid.zinc.300}", + "infoColor": "{colors.solid.blue.600}", + "successColor": "{colors.solid.green.700}", + "dangerColor": "{colors.solid.red.600}", + "warningColor": "{colors.solid.yellow.600}", + "helpColor": "{colors.solid.purple.600}" + }, + "content": { + "background": "{colors.alpha.white.1000}", + "hoverBackground": "{colors.solid.zinc.100}", + "borderColor": "{colors.solid.zinc.200}", + "activeBorderColor": "{colors.solid.zinc.800}", + "color": "{text.color}", + "hoverColor": "{text.hoverColor}", + "shadow": "{shadows.400}" + }, + "list": { + "option": { + "background": "{colors.alpha.white.1000}", + "focusBackground": "{colors.solid.zinc.100}", + "selectedBackground": "{colors.solid.zinc.900}", + "selectedFocusBackground": "{colors.solid.zinc.700}", + "color": "{text.color}", + "focusColor": "{text.color}", + "selectedColor": "{text.extend.colorInverted}", + "selectedFocusColor": "{text.extend.colorInverted}", + "icon": { + "color": "{text.color}", + "focusColor": "{text.color}" + } + }, + "optionGroup": { + "background": "{colors.alpha.white.1000}", + "color": "{text.mutedColor}" + } + }, + "overlay": { + "select": { + "background": "{colors.alpha.white.1000}", + "borderColor": "{colors.solid.zinc.200}", + "color": "{text.color}", + "shadow": "0 0.25rem 0.5rem {colors.alpha.black.200}" + }, + "popover": { + "background": "{colors.alpha.white.1000}", + "borderColor": "{form.borderColor}", + "color": "{text.color}", + "shadow": "{shadows.400}" + }, + "modal": { + "background": "{colors.alpha.white.1000}", + "backdrop": "{colors.alpha.black.300}", + "borderColor": "{colors.solid.zinc.200}", + "color": "{text.color}", + "shadow": "{shadows.200}" + } + }, + "navigation": { + "submenuLabel": { + "background": "rgba(255, 255, 255, 0.0000)", + "color": "{text.mutedColor}" + }, + "submenuIcon": { + "color": "{colors.solid.zinc.900}", + "focusColor": "{colors.solid.zinc.900}", + "activeColor": "{colors.alpha.white.1000}" + }, + "item": { + "focusBackground": "{colors.solid.zinc.100}", + "activeBackground": "{colors.solid.zinc.900}", + "color": "{colors.solid.zinc.900}", + "focusColor": "{colors.solid.zinc.900}", + "icon": { + "color": "{colors.solid.zinc.900}", + "focusColor": "{colors.solid.zinc.900}", + "activeColor": "{colors.alpha.white.1000}" + }, + "activeColor": "{colors.alpha.white.1000}" + }, + "shadow": "{shadows.400}" + } + }, + "dark": { + "success": { + "50": "{colors.solid.green.950}", + "100": "{colors.solid.green.900}", + "200": "{colors.solid.green.800}", + "300": "{colors.solid.green.700}", + "400": "{colors.solid.green.600}", + "500": "{colors.solid.green.500}", + "600": "{colors.solid.green.400}", + "700": "{colors.solid.green.300}", + "800": "{colors.solid.green.200}", + "900": "{colors.solid.green.100}", + "950": "{colors.solid.green.50}" + }, + "info": { + "50": "{colors.solid.blue.950}", + "100": "{colors.solid.blue.900}", + "200": "{colors.solid.blue.800}", + "300": "{colors.solid.blue.700}", + "400": "{colors.solid.blue.600}", + "500": "{colors.solid.blue.500}", + "600": "{colors.solid.blue.400}", + "700": "{colors.solid.blue.300}", + "800": "{colors.solid.blue.200}", + "900": "{colors.solid.blue.100}", + "950": "{colors.solid.blue.50}" + }, + "warn": { + "50": "{colors.solid.yellow.950}", + "100": "{colors.solid.yellow.900}", + "200": "{colors.solid.yellow.800}", + "300": "{colors.solid.yellow.700}", + "400": "{colors.solid.yellow.600}", + "500": "{colors.solid.yellow.500}", + "600": "{colors.solid.yellow.400}", + "700": "{colors.solid.yellow.300}", + "800": "{colors.solid.yellow.200}", + "900": "{colors.solid.yellow.100}", + "950": "{colors.solid.yellow.50}" + }, + "transparent": "rgba(0, 0, 0, 0.0001)", + "help": { + "50": "{colors.solid.purple.950}", + "100": "{colors.solid.purple.900}", + "200": "{colors.solid.purple.800}", + "300": "{colors.solid.purple.700}", + "400": "{colors.solid.purple.600}", + "500": "{colors.solid.purple.500}", + "600": "{colors.solid.purple.400}", + "700": "{colors.solid.purple.300}", + "800": "{colors.solid.purple.200}", + "900": "{colors.solid.purple.100}", + "950": "{colors.solid.purple.50}" + }, + "error": { + "50": "{colors.solid.red.950}", + "100": "{colors.solid.red.900}", + "200": "{colors.solid.red.800}", + "300": "{colors.solid.red.700}", + "400": "{colors.solid.red.600}", + "500": "{colors.solid.red.500}", + "600": "{colors.solid.red.400}", + "700": "{colors.solid.red.300}", + "800": "{colors.solid.red.200}", + "900": "{colors.solid.red.100}", + "950": "{colors.solid.red.50}" + }, + "surface": { + "0": "{colors.alpha.black.1000}", + "50": "{colors.solid.zinc.950}", + "100": "{colors.solid.zinc.900}", + "200": "{colors.solid.zinc.800}", + "300": "{colors.solid.zinc.700}", + "400": "{colors.solid.zinc.600}", + "500": "{colors.solid.zinc.500}", + "600": "{colors.solid.zinc.400}", + "700": "{colors.solid.zinc.300}", + "800": "{colors.solid.zinc.200}", + "900": "{colors.solid.zinc.100}", + "950": "{colors.solid.zinc.50}" + }, + "primary": { + "color": "{colors.solid.green.500}", + "contrastColor": "{colors.solid.zinc.900}", + "hoverColor": "{colors.solid.green.400}", + "activeColor": "{colors.solid.green.300}", + "hoverBackground": "{colors.solid.green.950}", + "activeBackground": "{colors.solid.green.900}", + "borderColor": "{colors.solid.green.800}", + "selectedBackground": "{colors.solid.green.500}", + "selectedHoverBackground": "{colors.solid.green.600}" + }, + "highlight": { + "background": "{colors.solid.zinc.100}", + "focusBackground": "{colors.solid.zinc.200}", + "color": "{colors.solid.zinc.900}", + "focusColor": "{colors.solid.zinc.900}" + }, + "focusRing": { + "shadow": "{shadows.200}", + "extend": { + "invalid": "{colors.solid.red.800}", + "success": "{colors.solid.green.800}", + "warning": "{colors.solid.yellow.800}", + "info": "{colors.solid.blue.800}" + } + }, + "mask": { + "background": "{colors.alpha.black.600}", + "color": "{surface.800}" + }, + "form": { + "background": "{colors.solid.zinc.950}", + "disabledBackground": "{colors.solid.zinc.800}", + "readonlyBackground": "{colors.solid.zinc.900}", + "filledBackground": "{colors.solid.zinc.950}", + "filledHoverBackground": "{colors.solid.zinc.950}", + "filledFocusBackground": "{colors.solid.zinc.950}", + "borderColor": "{colors.solid.zinc.700}", + "hoverBorderPrimaryColor": "{colors.solid.zinc.100}", + "focusBorderPrimaryColor": "{colors.solid.zinc.100}", + "hoverBorderSecondaryColor": "{colors.solid.green.400}", + "focusBorderSecondaryColor": "{colors.solid.green.400}", + "invalidBorderColor": "{colors.solid.red.600}", + "color": "{colors.alpha.white.1000}", + "disabledColor": "{colors.solid.zinc.500}", + "placeholderColor": "{colors.solid.zinc.500}", + "invalidPlaceholderColor": "{colors.solid.red.400}", + "floatLabelColor": "{colors.solid.zinc.500}", + "floatLabelFocusColor": "{colors.solid.zinc.500}", + "floatLabelActiveColor": "{colors.solid.zinc.500}", + "floatLabelInvalidColor": "{form.invalidPlaceholderColor}", + "iconColor": "{colors.alpha.white.1000}", + "backgroundHandler": "{colors.alpha.white.1000}", + "shadow": "{shadows.200}" + }, + "text": { + "color": "{colors.alpha.white.1000}", + "extend": { + "colorPrimaryStatic": "{colors.solid.zinc.900}", + "colorSecondaryStatic": "{colors.alpha.white.1000}", + "colorInverted": "{colors.solid.zinc.900}" + }, + "hoverColor": "{colors.solid.zinc.300}", + "primaryColor": "{colors.solid.green.400}", + "hoverPrimaryColor": "{colors.solid.green.300}", + "secondaryColor": "{colors.solid.zinc.400}", + "hoverSecondaryColor": "{colors.solid.zinc.600}", + "mutedColor": "{colors.solid.zinc.500}", + "hoverMutedColor": "{colors.solid.zinc.700}", + "disabledColor": "{colors.solid.zinc.700}", + "infoColor": "{colors.solid.blue.400}", + "successColor": "{colors.solid.green.400}", + "dangerColor": "{colors.solid.red.400}", + "warningColor": "{colors.solid.yellow.400}", + "helpColor": "{colors.solid.purple.400}" + }, + "content": { + "background": "{colors.solid.zinc.900}", + "hoverBackground": "{colors.solid.zinc.800}", + "borderColor": "{colors.solid.zinc.800}", + "activeBorderColor": "{colors.solid.zinc.200}", + "color": "{text.color}", + "hoverColor": "{text.hoverColor}", + "shadow": "{shadows.400}" + }, + "list": { + "option": { + "background": "{colors.solid.zinc.900}", + "focusBackground": "{colors.solid.zinc.800}", + "selectedBackground": "{colors.solid.zinc.100}", + "selectedFocusBackground": "{colors.solid.zinc.300}", + "color": "{text.color}", + "focusColor": "{text.color}", + "selectedColor": "{text.extend.colorInverted}", + "selectedFocusColor": "{text.extend.colorInverted}", + "icon": { + "color": "{text.color}", + "focusColor": "{text.color}" + } + }, + "optionGroup": { + "background": "{colors.solid.zinc.900}", + "color": "{text.mutedColor}" + } + }, + "overlay": { + "select": { + "background": "{colors.solid.zinc.900}", + "borderColor": "{colors.solid.zinc.800}", + "color": "{text.color}", + "shadow": "{shadows.400}" + }, + "popover": { + "background": "{colors.solid.zinc.900}", + "borderColor": "{form.borderColor}", + "color": "{text.color}", + "shadow": "{shadows.400}" + }, + "modal": { + "background": "{colors.solid.zinc.900}", + "backdrop": "{colors.alpha.black.300}", + "borderColor": "{colors.solid.zinc.800}", + "color": "{text.color}", + "shadow": "{shadows.200}" + } + }, + "navigation": { + "submenuLabel": { + "background": "rgba(255, 255, 255, 0.0000)", + "color": "{text.mutedColor}" + }, + "submenuIcon": { + "color": "{colors.solid.zinc.100}", + "focusColor": "{colors.solid.zinc.100}", + "activeColor": "{colors.solid.zinc.900}" + }, + "item": { + "focusBackground": "{colors.solid.zinc.900}", + "activeBackground": "{colors.solid.zinc.100}", + "color": "{colors.alpha.white.1000}", + "focusColor": "{colors.alpha.white.1000}", + "icon": { + "color": "{colors.alpha.white.1000}", + "focusColor": "{colors.alpha.white.1000}", + "activeColor": "{colors.solid.zinc.900}" + }, + "activeColor": "{colors.solid.zinc.900}" + }, + "shadow": "{shadows.400}" + } + } + } + }, + "components": { + "accordion": { + "extend": { + "extHeader": { + "iconSize": "{controls.iconOnly.300}", + "gap": "{controls.gap.100}" + } + }, + "colorScheme": { + "light": { + "header": { + "background": "{transparent}", + "hoverBackground": "{transparent}", + "activeBackground": "{transparent}", + "activeHoverBackground": "{transparent}" + } + } + }, + "header": { + "color": "{text.color}", + "hoverColor": "{text.hoverColor}", + "activeColor": "{text.color}", + "activeHoverColor": "{text.hoverColor}", + "borderColor": "{transparent}", + "padding": "{navigation.padding.300} 0 {navigation.padding.300} 0", + "fontWeight": "{fonts.fontWeight.bold}", + "borderRadius": "{borderRadius.none}", + "borderWidth": "{borderWidth.none}", + "focusRing": { + "width": "{focusRing.width}", + "style": "{focusRing.style}", + "color": "{focusRing.color}", + "offset": "{focusRing.offset}", + "shadow": "inset {focus.ring.shadow}" + }, + "toggleIcon": { + "color": "{text.color}", + "hoverColor": "{text.hoverColor}", + "activeColor": "{text.color}", + "activeHoverColor": "{text.hoverColor}" + }, + "last": { + "bottomBorderRadius": "{borderRadius.none}", + "activeBottomBorderRadius": "{borderRadius.none}" + }, + "first": { + "borderWidth": "{borderWidth.none}", + "topBorderRadius": "{borderRadius.none}" + } + }, + "root": { + "transitionDuration": "{controls.transitionDuration}" + }, + "panel": { + "borderWidth": "{borderWidth.none} {borderWidth.none} {navigation.width.100} {borderWidth.none}", + "borderColor": "{form.borderColor}" + }, + "content": { + "borderWidth": "{content.borderWidth} {borderWidth.none} {borderWidth.none} {borderWidth.none}", + "borderColor": "{transparent}", + "background": "{transparent}", + "color": "{text.color}", + "padding": "0 {content.padding.400} {content.padding.300} {content.padding.400}" + } + }, + "autocomplete": { + "extend": { + "extOption": { + "gap": "{form.gap.200}" + }, + "extOptionGroup": { + "gap": "{form.gap.200}" + } + }, + "colorScheme": { + "light": { + "chip": { + "focusBackground": "{chip.colorScheme.light.root.background}", + "focusColor": "{chip.colorScheme.light.root.color}" + }, + "dropdown": { + "background": "{form.background}", + "hoverBackground": "{form.background}", + "activeBackground": "{form.background}", + "color": "{form.color}", + "hoverColor": "{form.color}", + "activeColor": "{form.color}" + } + } + }, + "root": { + "background": "{form.background}", + "disabledBackground": "{form.disabledBackground}", + "filledBackground": "{form.filledBackground}", + "filledHoverBackground": "{form.filledHoverBackground}", + "filledFocusBackground": "{form.filledFocusBackground}", + "borderColor": "{form.borderColor}", + "hoverBorderColor": "{form.hoverBorderSecondaryColor}", + "focusBorderColor": "{form.focusBorderSecondaryColor}", + "invalidBorderColor": "{form.invalidBorderColor}", + "color": "{form.color}", + "disabledColor": "{form.disabledColor}", + "placeholderColor": "{form.placeholderColor}", + "invalidPlaceholderColor": "{form.invalidPlaceholderColor}", + "shadow": "0", + "paddingX": "{form.padding.300}", + "paddingY": "{form.padding.300}", + "borderRadius": "{form.borderRadius.200}", + "transitionDuration": "{form.transitionDuration}", + "focusRing": { + "width": "{focusRing.width}", + "style": "{form.focusRing.style}", + "color": "{form.focusRing.color}", + "offset": "{form.focusRing.offset}", + "shadow": "0" + } + }, + "overlay": { + "background": "{overlay.select.background}", + "borderColor": "{overlay.select.borderColor}", + "borderRadius": "{overlay.select.borderRadius}", + "color": "{overlay.select.color}", + "shadow": "{form.shadow}" + }, + "list": { + "padding": "{list.padding}", + "gap": "{list.gap.100}" + }, + "option": { + "focusBackground": "{list.option.focusBackground}", + "selectedBackground": "{list.option.selectedBackground}", + "selectedFocusBackground": "{list.option.selectedFocusBackground}", + "color": "{list.option.color}", + "focusColor": "{list.option.focusColor}", + "selectedColor": "{list.option.selectedColor}", + "selectedFocusColor": "{list.option.selectedFocusColor}", + "padding": "{list.option.padding}", + "borderRadius": "{list.option.borderRadius}" + }, + "optionGroup": { + "background": "{list.optionGroup.background}", + "color": "{list.optionGroup.color}", + "fontWeight": "{fonts.fontWeight.demibold}", + "padding": "{list.optionGroup.padding}" + }, + "dropdown": { + "width": "{form.width.300}", + "borderColor": "{form.borderColor}", + "hoverBorderColor": "{form.hoverBorderSecondaryColor}", + "activeBorderColor": "{form.focusBorderSecondaryColor}", + "borderRadius": "{form.borderRadius.200}", + "focusRing": { + "width": "{focusRing.width}", + "style": "{form.focusRing.style}", + "color": "{form.focusRing.color}", + "offset": "{form.focusRing.offset}", + "shadow": "0" + }, + "sm": { + "width": "{form.width.200}" + }, + "lg": { + "width": "{form.width.400}" + } + }, + "chip": { + "borderRadius": "{chip.root.borderRadius}" + }, + "emptyMessage": { + "padding": "{list.option.padding}" + } + }, + "avatar": { + "extend": { + "borderColor": "{form.borderColor}", + "circle": { + "borderRadius": "{media.borderRadius.max}" + } + }, + "root": { + "width": "{media.size.300}", + "height": "{media.size.300}", + "fontSize": "{fonts.fontSize.200}", + "color": "{text.extend.colorPrimaryStatic}", + "background": "{primary.color}", + "borderRadius": "{media.borderRadius.200}" + }, + "icon": { + "size": "{media.icon.size.100}" + }, + "group": { + "borderColor": "{content.background}", + "offset": "-{media.padding.300}" + }, + "lg": { + "width": "{media.size.400}", + "height": "{media.size.400}", + "fontSize": "{fonts.fontSize.300}", + "icon": { + "size": "{media.icon.size.100}" + }, + "group": { + "offset": "-{media.padding.300}" + } + }, + "xl": { + "width": "{media.size.500}", + "height": "{media.size.500}", + "icon": { + "size": "{media.icon.size.200}" + }, + "group": { + "offset": "-{media.padding.600}" + }, + "fontSize": "{fonts.fontSize.500}" + } + }, + "badge": { + "extend": { + "extDot": { + "success": { + "background": "{colors.solid.green.400}" + }, + "info": { + "background": "{info.400}" + }, + "warn": { + "background": "{warn.400}" + }, + "danger": { + "background": "{error.400}" + }, + "lg": { + "size": "{feedback.width.400}" + }, + "xlg": { + "size": "{feedback.width.500}" + } + }, + "ext": { + "padding": "0rem" + } + }, + "colorScheme": { + "light": { + "primary": { + "color": "{text.extend.colorPrimaryStatic}", + "background": "{primary.color}" + }, + "secondary": { + "color": "{text.extend.colorInverted}", + "background": "{surface.900}" + }, + "success": { + "color": "{success.900}", + "background": "{success.300}" + }, + "info": { + "color": "{info.900}", + "background": "{info.300}" + }, + "warn": { + "color": "{warn.900}", + "background": "{warn.300}" + }, + "danger": { + "color": "{error.900}", + "background": "{error.300}" + } + } + }, + "root": { + "borderRadius": "{feedback.width.300}", + "padding": "{feedback.padding.100}", + "fontSize": "{fonts.fontSize.100}", + "fontWeight": "{fonts.fontWeight.regular}", + "minWidth": "{feedback.width.600}", + "height": "{feedback.height.500}" + }, + "dot": { + "size": "{feedback.width.300}" + }, + "sm": { + "fontSize": "{fonts.fontSize.100}", + "minWidth": "0rem", + "height": "0rem" + }, + "lg": { + "fontSize": "{fonts.fontSize.100}", + "minWidth": "{feedback.width.650}", + "height": "{feedback.height.600}" + }, + "xl": { + "fontSize": "{fonts.fontSize.100}", + "minWidth": "{feedback.width.700}", + "height": "{feedback.height.650}" + } + }, + "breadcrumb": { + "extend": { + "hoverBackground": "{surface.100}", + "iconSize": "{navigation.size.300}", + "extItem": { + "padding": "{navigation.padding.100}" + } + }, + "root": { + "padding": "0rem", + "background": "{transparent}", + "gap": "0rem", + "transitionDuration": "{form.transitionDuration}" + }, + "focusRing": { + "width": "{focusRing.width}", + "style": "{focusRing.style}", + "color": "{focusRing.color}", + "offset": "{focusRing.offset}", + "shadow": "{focusRing.shadow}" + }, + "item": { + "color": "{text.color}", + "hoverColor": "{text.hoverColor}", + "borderRadius": "{navigation.borderRadius}", + "gap": "{navigation.item.gap}", + "icon": { + "color": "{text.color}", + "hoverColor": "{text.hoverColor}" + } + }, + "separator": { + "color": "{text.color}" + } + }, + "button": { + "extend": { + "disabledBackground": "{form.disabledBackground}", + "extOutlined": { + "danger": { + "focusBackground": "{transparent}" + }, + "warn": { + "focusBackground": "{transparent}" + }, + "info": { + "focusBackground": "{transparent}" + }, + "help": { + "focusBackground": "{transparent}" + }, + "success": { + "focusBackground": "{transparent}" + } + }, + "disabledColor": "{form.disabledColor}", + "extText": { + "danger": { + "focusBackground": "{transparent}" + }, + "warn": { + "focusBackground": "{transparent}" + }, + "info": { + "focusBackground": "{transparent}" + }, + "help": { + "focusBackground": "{transparent}" + }, + "success": { + "focusBackground": "{transparent}" + } + }, + "extLink": { + "background": "{transparent}", + "colorHover": "{text.hoverColor}", + "paddingX": "0rem", + "paddingY": "{controls.padding.100}", + "sm": { + "iconOnlyWidth": "{controls.iconOnly.200}" + }, + "base": { + "iconOnlyWidth": "{controls.iconOnly.400}" + }, + "lg": { + "iconOnlyWidth": "{controls.iconOnly.500}" + }, + "xlg": { + "iconOnlyWidth": "{controls.iconOnly.600}" + } + }, + "extSm": { + "borderRadius": "{controls.borderRadius.100}", + "gap": "{controls.gap.100}" + }, + "extLg": { + "borderRadius": "{controls.borderRadius.200}", + "gap": "{controls.gap.200}", + "height": "{controls.iconOnly.850}" + }, + "extXlg": { + "borderRadius": "{controls.borderRadius.200}", + "gap": "{controls.gap.200}", + "iconOnlyWidth": "{controls.iconOnly.900}", + "paddingX": "{controls.padding.600}", + "paddingY": "{controls.padding.500}", + "height": "{controls.iconOnly.900}" + }, + "borderWidth": "{controls.width.100}", + "iconSize": { + "sm": "{controls.iconOnly.200}", + "md": "{controls.iconOnly.300}", + "lg": "{controls.iconOnly.400}" + } + }, + "colorScheme": { + "light": { + "root": { + "primary": { + "background": "{primary.color}", + "hoverBackground": "{primary.hoverColor}", + "activeBackground": "{primary.activeColor}", + "borderColor": "{transparent}", + "hoverBorderColor": "{transparent}", + "activeBorderColor": "{transparent}", + "color": "{text.extend.colorPrimaryStatic}", + "hoverColor": "{text.extend.colorPrimaryStatic}", + "activeColor": "{text.extend.colorPrimaryStatic}", + "focusRing": { + "color": "{focusRing.color}", + "shadow": "{focusRing.shadow}" + } + }, + "secondary": { + "background": "{surface.900}", + "hoverBackground": "{surface.800}", + "activeBackground": "{surface.700}", + "borderColor": "{transparent}", + "hoverBorderColor": "{transparent}", + "activeBorderColor": "{transparent}", + "color": "{text.extend.colorInverted}", + "hoverColor": "{text.extend.colorInverted}", + "activeColor": "{text.extend.colorInverted}", + "focusRing": { + "color": "{focusRing.color}", + "shadow": "{focusRing.shadow}" + } + }, + "contrast": { + "background": "{surface.200}", + "hoverBackground": "{surface.300}", + "activeBackground": "{surface.400}", + "borderColor": "{transparent}", + "hoverBorderColor": "{transparent}", + "activeBorderColor": "{transparent}", + "color": "{text.color}", + "hoverColor": "{text.color}", + "activeColor": "{text.color}", + "focusRing": { + "color": "{focusRing.color}", + "shadow": "{focusRing.shadow}" + } + }, + "info": { + "background": "{info.300}", + "hoverBackground": "{info.400}", + "activeBackground": "{info.500}", + "borderColor": "{transparent}", + "hoverBorderColor": "{transparent}", + "activeBorderColor": "{transparent}", + "color": "{info.900}", + "hoverColor": "{info.950}", + "activeColor": "{info.900}" + }, + "success": { + "background": "{success.300}", + "hoverBackground": "{success.400}", + "activeBackground": "{success.500}", + "borderColor": "{transparent}", + "hoverBorderColor": "{transparent}", + "activeBorderColor": "{transparent}", + "color": "{success.900}", + "hoverColor": "{success.950}", + "activeColor": "{success.900}" + }, + "warn": { + "background": "{warn.300}", + "hoverBackground": "{warn.400}", + "activeBackground": "{warn.500}", + "borderColor": "{transparent}", + "hoverBorderColor": "{transparent}", + "activeBorderColor": "{transparent}", + "color": "{warn.900}", + "hoverColor": "{warn.950}", + "activeColor": "{warn.900}" + }, + "help": { + "background": "{help.300}", + "hoverBackground": "{help.400}", + "activeBackground": "{help.500}", + "borderColor": "{transparent}", + "hoverBorderColor": "{transparent}", + "activeBorderColor": "{transparent}", + "color": "{help.900}", + "hoverColor": "{help.950}", + "activeColor": "{help.900}" + }, + "danger": { + "background": "{error.300}", + "hoverBackground": "{error.400}", + "activeBackground": "{error.500}", + "borderColor": "{transparent}", + "hoverBorderColor": "{transparent}", + "activeBorderColor": "{transparent}", + "color": "{error.900}", + "hoverColor": "{error.950}", + "activeColor": "{error.900}" + } + }, + "outlined": { + "primary": { + "hoverBackground": "{primary.hoverBackground}", + "activeBackground": "{primary.activeBackground}", + "borderColor": "{primary.borderColor}", + "color": "{primary.color}" + }, + "success": { + "hoverBackground": "{success.100}", + "activeBackground": "{success.200}", + "borderColor": "{success.600}", + "color": "{success.600}" + }, + "info": { + "hoverBackground": "{info.100}", + "activeBackground": "{info.200}", + "borderColor": "{info.600}", + "color": "{info.600}" + }, + "warn": { + "hoverBackground": "{warn.100}", + "activeBackground": "{warn.200}", + "borderColor": "{warn.600}", + "color": "{warn.600}" + }, + "help": { + "hoverBackground": "{help.100}", + "activeBackground": "{help.200}", + "borderColor": "{help.600}", + "color": "{help.600}" + }, + "danger": { + "hoverBackground": "{error.100}", + "activeBackground": "{error.200}", + "borderColor": "{error.600}", + "color": "{error.600}" + } + }, + "text": { + "primary": { + "hoverBackground": "{surface.100}", + "activeBackground": "{surface.200}", + "color": "{text.color}" + }, + "success": { + "hoverBackground": "{success.100}", + "activeBackground": "{success.200}", + "color": "{success.600}" + }, + "info": { + "hoverBackground": "{info.100}", + "activeBackground": "{info.200}", + "color": "{info.600}" + }, + "warn": { + "hoverBackground": "{warn.100}", + "activeBackground": "{warn.200}", + "color": "{warn.600}" + }, + "help": { + "hoverBackground": "{help.100}", + "activeBackground": "{help.200}", + "color": "{help.600}" + }, + "danger": { + "hoverBackground": "{error.100}", + "activeBackground": "{error.200}", + "color": "{error.600}" + } + }, + "link": { + "color": "{text.color}", + "hoverColor": "{text.hoverColor}", + "activeColor": "{text.mutedColor}" + } + }, + "dark": { + "root": { + "primary": { + "background": "{primary.color}", + "hoverBackground": "{primary.hoverColor}", + "activeBackground": "{primary.activeColor}", + "borderColor": "{transparent}", + "hoverBorderColor": "{transparent}", + "activeBorderColor": "{transparent}", + "color": "{text.extend.colorPrimaryStatic}", + "hoverColor": "{text.extend.colorPrimaryStatic}", + "activeColor": "{text.extend.colorPrimaryStatic}", + "focusRing": { + "color": "{focusRing.color}", + "shadow": "{focusRing.shadow}" + } + }, + "secondary": { + "background": "{surface.200}", + "hoverBackground": "{surface.300}", + "activeBackground": "{surface.400}", + "borderColor": "{transparent}", + "hoverBorderColor": "{transparent}", + "activeBorderColor": "{transparent}", + "color": "{surface.950}", + "hoverColor": "{surface.950}", + "activeColor": "{surface.950}", + "focusRing": { + "color": "{focusRing.color}", + "shadow": "{focusRing.shadow}" + } + }, + "contrast": { + "background": "{surface.950}", + "hoverBackground": "{surface.900}", + "activeBackground": "{surface.800}", + "borderColor": "{transparent}", + "hoverBorderColor": "{transparent}", + "activeBorderColor": "{transparent}", + "color": "{surface.0}", + "hoverColor": "{surface.0}", + "activeColor": "{surface.0}", + "focusRing": { + "color": "{focusRing.color}", + "shadow": "{focusRing.shadow}" + } + }, + "info": { + "background": "{info.500}", + "hoverBackground": "{info.400}", + "activeBackground": "{info.300}", + "borderColor": "{transparent}", + "hoverBorderColor": "{transparent}", + "activeBorderColor": "{transparent}", + "color": "{text.extend.colorPrimaryStatic}", + "hoverColor": "{text.extend.colorPrimaryStatic}", + "activeColor": "{text.extend.colorPrimaryStatic}" + }, + "success": { + "background": "{success.500}", + "hoverBackground": "{success.400}", + "activeBackground": "{success.300}", + "borderColor": "{transparent}", + "hoverBorderColor": "{transparent}", + "activeBorderColor": "{transparent}", + "color": "{text.extend.colorPrimaryStatic}", + "hoverColor": "{text.extend.colorPrimaryStatic}", + "activeColor": "{text.extend.colorPrimaryStatic}" + }, + "warn": { + "background": "{warn.500}", + "hoverBackground": "{warn.400}", + "activeBackground": "{warn.300}", + "borderColor": "{transparent}", + "hoverBorderColor": "{transparent}", + "activeBorderColor": "{transparent}", + "color": "{text.extend.colorPrimaryStatic}", + "hoverColor": "{text.extend.colorPrimaryStatic}", + "activeColor": "{text.extend.colorPrimaryStatic}" + }, + "help": { + "background": "{help.500}", + "hoverBackground": "{help.400}", + "activeBackground": "{help.300}", + "borderColor": "{transparent}", + "hoverBorderColor": "{transparent}", + "activeBorderColor": "{transparent}", + "color": "{text.extend.colorPrimaryStatic}", + "hoverColor": "{text.extend.colorPrimaryStatic}", + "activeColor": "{text.extend.colorPrimaryStatic}" + }, + "danger": { + "background": "{error.500}", + "hoverBackground": "{error.400}", + "activeBackground": "{error.300}", + "borderColor": "{transparent}", + "hoverBorderColor": "{transparent}", + "activeBorderColor": "{transparent}", + "color": "{text.extend.colorPrimaryStatic}", + "hoverColor": "{text.extend.colorPrimaryStatic}", + "activeColor": "{text.extend.colorPrimaryStatic}" + } + }, + "outlined": { + "primary": { + "hoverBackground": "{primary.hoverBackground}", + "activeBackground": "{primary.activeBackground}", + "borderColor": "{primary.borderColor}", + "color": "{primary.color}" + }, + "success": { + "hoverBackground": "{success.950}", + "activeBackground": "{success.900}", + "borderColor": "{success.500}", + "color": "{success.500}" + }, + "info": { + "hoverBackground": "{info.950}", + "activeBackground": "{info.900}", + "borderColor": "{info.500}", + "color": "{info.500}" + }, + "warn": { + "hoverBackground": "{warn.950}", + "activeBackground": "{warn.900}", + "borderColor": "{warn.500}", + "color": "{warn.500}" + }, + "help": { + "hoverBackground": "{help.950}", + "activeBackground": "{help.900}", + "borderColor": "{help.500}", + "color": "{help.500}" + }, + "danger": { + "hoverBackground": "{error.950}", + "activeBackground": "{error.900}", + "borderColor": "{error.500}", + "color": "{error.500}" + } + }, + "text": { + "primary": { + "hoverBackground": "{surface.800}", + "activeBackground": "{surface.700}", + "color": "{text.color}" + }, + "success": { + "hoverBackground": "{success.950}", + "activeBackground": "{success.900}", + "color": "{success.500}" + }, + "info": { + "hoverBackground": "{info.950}", + "activeBackground": "{info.900}", + "color": "{info.500}" + }, + "warn": { + "hoverBackground": "{warn.950}", + "activeBackground": "{warn.900}", + "color": "{warn.500}" + }, + "help": { + "hoverBackground": "{help.950}", + "activeBackground": "{help.900}", + "color": "{help.500}" + }, + "danger": { + "hoverBackground": "{error.950}", + "activeBackground": "{error.900}", + "color": "{error.500}" + } + }, + "link": { + "color": "{text.color}", + "hoverColor": "{text.hoverColor}", + "activeColor": "{text.mutedColor}" + } + } + }, + "root": { + "borderRadius": "{controls.borderRadius.100}", + "roundedBorderRadius": "{controls.borderRadius.max}", + "gap": "{controls.gap.100}", + "fontSize": "{fonts.fontSize.200}", + "paddingX": "{controls.padding.400}", + "paddingY": "{controls.padding.200}", + "iconOnlyWidth": "{controls.iconOnly.700}", + "raisedShadow": "none", + "badgeSize": "{feedback.width.500}", + "transitionDuration": "{controls.transitionDuration}", + "focusRing": { + "width": "{focusRing.width}", + "style": "{focusRing.style}", + "offset": "{focusRing.offset}" + }, + "sm": { + "fontSize": "{fonts.fontSize.200}", + "iconOnlyWidth": "{controls.iconOnly.600}", + "paddingX": "{controls.padding.300}", + "paddingY": "{controls.padding.200}" + }, + "lg": { + "fontSize": "{fonts.fontSize.500}", + "iconOnlyWidth": "{controls.iconOnly.850}", + "paddingX": "{controls.padding.600}", + "paddingY": "{controls.padding.400}" + }, + "label": { + "fontWeight": "{fonts.fontWeight.demibold}" + } + } + }, + "card": { + "extend": { + "borderColor": "{content.borderColor}", + "borderWidth": "{content.borderWidth}" + }, + "root": { + "background": "{content.background}", + "borderRadius": "{content.gap.400}", + "color": "{content.color}" + }, + "body": { + "padding": "{content.padding.300}", + "gap": "{content.gap.400}" + }, + "caption": { + "gap": "{content.gap.100}" + }, + "title": { + "fontSize": "{fonts.fontSize.400}", + "fontWeight": "{fonts.fontWeight.demibold}" + }, + "subtitle": { + "color": "{text.mutedColor}" + } + }, + "carousel": { + "colorScheme": { + "light": { + "indicator": { + "background": "{surface.300}", + "hoverBackground": "{surface.400}", + "activeBackground": "{surface.900}" + } + } + }, + "root": { + "transitionDuration": "{media.transitionDuration}" + }, + "content": { + "gap": "{media.gap.200}" + }, + "indicatorList": { + "padding": "{media.padding.400}", + "gap": "{media.gap.200}" + }, + "indicator": { + "width": "{controls.iconOnly.100}", + "height": "{controls.iconOnly.100}", + "borderRadius": "{media.borderRadius.400}", + "focusRing": { + "width": "{focusRing.width}", + "style": "{focusRing.style}", + "color": "{focusRing.color}", + "offset": "{focusRing.offset}", + "shadow": "{focusRing.shadow}" + } + } + }, + "checkbox": { + "root": { + "borderRadius": "{form.borderRadius.100}", + "extend": { + "borderWidth": "{form.borderWidth}" + }, + "width": "{form.size.400}", + "height": "{form.size.400}", + "background": "{form.background}", + "checkedBackground": "{surface.900}", + "checkedHoverBackground": "{surface.800}", + "disabledBackground": "{form.disabledBackground}", + "filledBackground": "{form.filledBackground}", + "borderColor": "{form.borderColor}", + "hoverBorderColor": "{form.hoverBorderPrimaryColor}", + "focusBorderColor": "{form.focusBorderPrimaryColor}", + "checkedBorderColor": "{surface.900}", + "checkedHoverBorderColor": "{surface.800}", + "checkedFocusBorderColor": "{primary.color}", + "checkedDisabledBorderColor": "{form.borderColor}", + "invalidBorderColor": "{form.invalidBorderColor}", + "shadow": "0", + "focusRing": { + "focusRing": "{focusRing.width}", + "style": "{focusRing.style}", + "color": "{focusRing.color}", + "offset": "{focusRing.offset}", + "shadow": "{focusRing.shadow}" + }, + "sm": { + "width": "{form.size.200}", + "height": "{form.size.200}" + }, + "lg": { + "width": "{form.size.350}", + "height": "{form.size.350}" + }, + "transitionDuration": "{form.transitionDuration}" + }, + "icon": { + "size": "{form.icon.300}", + "color": "{form.color}", + "checkedColor": "{primary.contrastColor}", + "checkedHoverColor": "{primary.contrastColor}", + "disabledColor": "{form.disabledColor}", + "sm": { + "size": "{form.icon.200}" + }, + "lg": { + "size": "{form.icon.400}" + } + } + }, + "chip": { + "extend": { + "borderColor": "{transparent}", + "borderWidth": "{controls.width.100}" + }, + "root": { + "borderRadius": "{media.borderRadius.100}", + "paddingX": "{media.padding.200}", + "paddingY": "{media.padding.100}", + "gap": "{media.gap.200}", + "transitionDuration": "{media.transitionDuration}" + }, + "colorScheme": { + "light": { + "root": { + "background": "{surface.200}", + "color": "{text.color}" + }, + "icon": { + "color": "{text.color}" + }, + "removeIcon": { + "color": "{text.color}" + } + } + }, + "image": { + "width": "0rem", + "height": "0rem" + }, + "icon": { + "size": "{media.icon.size.100}" + }, + "removeIcon": { + "size": "{media.icon.size.100}", + "focusRing": { + "width": "{form.focusRing.width}", + "style": "{form.focusRing.style}", + "color": "{focusRing.color}", + "offset": "{form.focusRing.offset}", + "shadow": "{focusRing.shadow}" + } + } + }, + "confirmdialog": { + "extend": { + "extIcon": { + "success": "{success.500}", + "info": "{info.500}", + "help": "{help.500}", + "warn": "{warn.500}", + "danger": "{error.500}" + } + }, + "icon": { + "size": "{overlay.icon.size.200}", + "color": "{overlay.modal.color}" + }, + "content": { + "gap": "0rem" + } + }, + "confirmpopup": { + "root": { + "background": "{overlay.popover.background}", + "color": "{overlay.popover.color}", + "shadow": "{overlay.popover.shadow}", + "gutter": "{overlay.gap.300}", + "arrowOffset": "{overlay.modal.padding.200}" + }, + "content": { + "padding": "{overlay.popover.padding.100}", + "gap": "{overlay.gap.400}" + }, + "icon": { + "size": "{overlay.icon.size.200}", + "color": "{overlay.popover.color}" + }, + "footer": { + "gap": "{overlay.gap.200}", + "padding": "0 {overlay.popover.padding} {overlay.popover.padding} {overlay.popover.padding}" + } + }, + "contextmenu": { + "root": { + "background": "{content.background}", + "color": "{content.color}", + "shadow": "{navigation.shadow}" + }, + "list": { + "padding": "{navigation.list.padding.md} 0", + "gap": "{navigation.list.gap}" + }, + "item": { + "padding": "{navigation.item.padding}", + "gap": "{navigation.item.gap}" + }, + "submenu": { + "mobileIndent": "{navigation.submenu.padding}" + } + }, + "datatable": { + "colorScheme": { + "light": { + "root": { + "color": "{text.color}", + "borderColor": "{content.borderColor}" + }, + "header": { + "background": "{surface.50}", + "color": "{text.color}" + }, + "headerCell": { + "background": "{surface.50}", + "hoverBackground": "{surface.100}", + "color": "{text.color}" + }, + "footer": { + "background": "{surface.100}", + "color": "{text.color}" + }, + "footerCell": { + "background": "{content.hoverBackground}", + "color": "{text.color}" + }, + "row": { + "stripedBackground": "{content.hoverBackground}" + }, + "bodyCell": { + "selectedBorderColor": "{content.borderColor}" + } + } + }, + "extended": { + "extHeaderCell": { + "selectedHoverBackground": "{surface.800}" + }, + "extRow": { + "selectedHoverBackground": "{surface.800}", + "stripedHoverBackground": "{surface.100}" + } + }, + "root": { + "transitionDuration": "{data.transitionDuration}" + }, + "header": { + "borderColor": "{content.borderColor}", + "borderWidth": "{data.width.100} 0 {data.width.100} 0", + "padding": "{data.padding.400}", + "sm": { + "padding": "{data.padding.200}" + }, + "lg": { + "padding": "{data.padding.500}" + } + }, + "headerCell": { + "selectedBackground": "{highlight.background}", + "borderColor": "{content.borderColor}", + "hoverColor": "{text.extend.colorInverted}", + "selectedColor": "{highlight.color}", + "gap": "{data.gap.200}", + "padding": "{data.padding.400}", + "focusRing": { + "width": "{focusRing.width}", + "style": "{focusRing.style}", + "color": "{focusRing.color}", + "offset": "{focusRing.offset}", + "shadow": "inset {focus.ring.shadow}" + }, + "sm": { + "padding": "{data.padding.200}" + }, + "lg": { + "padding": "{data.padding.500}" + } + }, + "columnTitle": { + "fontWeight": "{fonts.fontWeight.bold}" + }, + "row": { + "background": "{content.background}", + "hoverBackground": "{content.hoverBackground}", + "selectedBackground": "{highlight.background}", + "color": "{content.color}", + "hoverColor": "{content.hoverColor}", + "selectedColor": "{highlight.color}", + "focusRing": { + "width": "{focusRing.width}", + "style": "{focusRing.style}", + "color": "{focusRing.color}", + "offset": "{focusRing.offset}", + "shadow": "inset {focus.ring.shadow}" + } + }, + "bodyCell": { + "borderColor": "{content.borderColor}", + "padding": "{data.padding.400}", + "sm": { + "padding": "{data.padding.200}" + }, + "lg": { + "padding": "{data.padding.500}" + } + }, + "footerCell": { + "borderColor": "{content.borderColor}", + "padding": "{data.padding.400}", + "sm": { + "padding": "{data.padding.200}" + }, + "lg": { + "padding": "{data.padding.500}" + } + }, + "columnFooter": { + "fontWeight": "{fonts.fontWeight.bold}" + }, + "dropPoint": { + "color": "{highlight.background}" + }, + "footer": { + "borderColor": "{content.borderColor}", + "borderWidth": "0 0 {data.width.100} 0", + "padding": "{data.padding.400}", + "sm": { + "padding": "{data.padding.200}" + }, + "lg": { + "padding": "{data.padding.500}" + } + }, + "columnResizer": { + "width": "{data.width.300}" + }, + "resizeIndicator": { + "width": "{data.width.100}", + "color": "{highlight.background}" + }, + "sortIcon": { + "color": "{text.color}", + "hoverColor": "{text.hoverColor}", + "size": "{data.icon.size.100}" + }, + "loadingIcon": { + "size": "{data.icon.size.500}" + }, + "rowToggleButton": { + "hoverBackground": "{content.hoverBackground}", + "selectedHoverBackground": "{content.hoverBackground}", + "color": "{text.color}", + "hoverColor": "{text.color}", + "selectedHoverColor": "{text.color}", + "size": "{data.icon.size.500}", + "borderRadius": "{content.borderRadius}", + "focusRing": { + "width": "{focusRing.width}", + "style": "{focusRing.style}", + "color": "{focusRing.color}", + "offset": "{focusRing.offset}", + "shadow": "{focusRing.shadow}" + } + }, + "filter": { + "inlineGap": "{data.gap.200}", + "rule": { + "borderColor": "{content.borderColor}" + }, + "constraintList": { + "padding": "{list.padding}", + "gap": "{list.gap.100}" + }, + "constraint": { + "focusBackground": "{list.option.focusBackground}", + "selectedBackground": "{list.option.selectedBackground}", + "selectedFocusBackground": "{list.option.selectedFocusBackground}", + "color": "{list.option.color}", + "focusColor": "{list.option.focusColor}", + "selectedColor": "{list.option.selectedColor}", + "selectedFocusColor": "{list.option.selectedFocusColor}", + "padding": "{list.option.padding}", + "borderRadius": "{list.option.borderRadius}", + "separator": { + "borderColor": "{content.borderColor}" + } + }, + "overlaySelect": { + "background": "{overlay.select.background}", + "color": "{overlay.select.color}", + "borderColor": "{overlay.select.borderColor}", + "borderRadius": "{overlay.select.borderRadius}", + "shadow": "{overlay.select.shadow}" + }, + "overlayPopover": { + "background": "{overlay.popover.background}", + "color": "{overlay.popover.color}", + "borderColor": "{overlay.select.borderColor}", + "borderRadius": "{overlay.select.borderRadius}", + "shadow": "{overlay.popover.shadow}", + "padding": "{overlay.popover.padding.100}", + "gap": "{list.gap.100}" + } + }, + "paginatorTop": { + "borderColor": "{form.borderColor}", + "borderWidth": "0 0 {data.width.100} 0" + }, + "paginatorBottom": { + "borderWidth": "0 0 {data.width.100} 0", + "borderColor": "{content.borderColor}" + } + }, + "dataview": { + "root": { + "borderWidth": "{data.width.100}", + "borderRadius": "{data.borderRadius}", + "padding": "0rem", + "borderColor": "{content.borderColor}" + }, + "header": { + "borderWidth": "0 0 {data.width.100} 0", + "padding": "{data.padding.200} {data.padding.300}", + "borderRadius": "0 0 0 0", + "color": "{text.color}" + }, + "content": { + "background": "{content.background}", + "color": "{content.color}", + "borderColor": "{content.borderColor}", + "borderWidth": "0rem", + "padding": "0rem", + "borderRadius": "0" + }, + "footer": { + "background": "{surface.100}", + "color": "{text.color}", + "borderWidth": "{data.width.100} 0 0 0", + "padding": "{data.padding.200} {data.padding.300}", + "borderRadius": "0 0 0 0" + }, + "paginatorTop": { + "borderWidth": "0 0 {data.width.100} 0" + }, + "paginatorBottom": { + "borderWidth": "{data.width.100} 0 0 0" + } + }, + "datepicker": { + "extend": { + "extDate": { + "selectedHoverBackground": "{surface.800}" + }, + "extToday": { + "hoverBackground": "{content.hoverBackground}", + "borderColor": "{content.activeBorderColor}" + }, + "extTitle": { + "width": "{form.width.500}" + }, + "extTimePicker": { + "minWidth": "{form.width.400}", + "color": "{content.color}" + } + }, + "colorScheme": { + "light": { + "dropdown": { + "background": "{content.background}", + "hoverBackground": "{navigation.item.focusBackground}", + "activeBackground": "{navigation.item.activeBackground}", + "color": "{navigation.item.color}", + "hoverColor": "{navigation.item.focusColor}", + "activeColor": "{navigation.item.activeColor}" + }, + "today": { + "background": "{transparent}", + "color": "{text.extend.colorPrimaryStatic}" + } + } + }, + "panel": { + "background": "{content.background}", + "borderColor": "{content.borderColor}", + "color": "{content.color}", + "borderRadius": "{content.borderRadius}", + "shadow": "{overlay.popover.shadow}", + "padding": "0rem" + }, + "header": { + "background": "{content.background}", + "borderColor": "{content.borderColor}", + "color": "{content.color}", + "padding": "{overlay.popover.padding.100}" + }, + "title": { + "gap": "{form.gap.200}", + "fontWeight": "{fonts.fontWeight.bold}" + }, + "selectMonth": { + "hoverBackground": "{content.hoverBackground}", + "color": "{content.color}", + "hoverColor": "{content.hoverColor}", + "borderRadius": "{content.borderRadius}", + "padding": "{form.padding.200}" + }, + "inputIcon": { + "color": "{form.floatLabelColor}" + }, + "dropdown": { + "width": "{form.width.300}", + "borderColor": "{form.borderColor}", + "hoverBorderColor": "{form.borderColor}", + "activeBorderColor": "{form.borderColor}", + "borderRadius": "{form.borderRadius.200}", + "focusRing": { + "width": "{form.focusRing.width}", + "style": "{form.focusRing.style}", + "color": "{form.focusRing.color}", + "offset": "{form.focusRing.offset}", + "shadow": "{focusRing.shadow}" + }, + "sm": { + "width": "0rem" + }, + "lg": { + "width": "0rem" + } + }, + "group": { + "borderColor": "{content.borderColor}", + "gap": "{overlay.popover.padding.100}" + }, + "selectYear": { + "hoverBackground": "{content.hoverBackground}", + "color": "{content.color}", + "hoverColor": "{content.hoverColor}", + "borderRadius": "{content.borderRadius}", + "padding": "{overlay.select.padding}" + }, + "dayView": { + "margin": "{overlay.popover.padding.100}" + }, + "weekDay": { + "padding": "{form.padding.100}", + "fontWeight": "{fonts.fontWeight.bold}", + "color": "{content.color}" + }, + "date": { + "hoverBackground": "{content.hoverBackground}", + "selectedBackground": "{highlight.background}", + "rangeSelectedBackground": "{list.option.focusBackground}", + "color": "{content.color}", + "hoverColor": "{content.color}", + "selectedColor": "{text.extend.colorInverted}", + "rangeSelectedColor": "{text.color}", + "width": "{form.size.500}", + "height": "{form.size.500}", + "borderRadius": "{form.borderRadius.100}", + "padding": "{form.padding.100}", + "focusRing": { + "width": "{form.focusRing.width}", + "style": "{form.focusRing.style}", + "color": "{form.focusRing.color}", + "offset": "{form.focusRing.offset}", + "shadow": "{focusRing.shadow}" + } + }, + "monthView": { + "margin": "0 0 0 0" + }, + "month": { + "padding": "0", + "borderRadius": "0rem" + }, + "yearView": { + "margin": "0 0 0 0" + }, + "year": { + "padding": "0", + "borderRadius": "0rem" + }, + "buttonbar": { + "padding": "{overlay.popover.padding.100}", + "borderColor": "{content.borderColor}" + }, + "timePicker": { + "padding": "{form.padding.300}", + "borderColor": "{content.borderColor}", + "gap": "{form.gap.200}", + "buttonGap": "{form.gap.100}" + }, + "root": { + "transitionDuration": "{form.transitionDuration}" + } + }, + "dialog": { + "extend": { + "borderWidth": "{overlay.borderWidth}", + "backdrop": "{overlay.modal.backdrop}" + }, + "root": { + "background": "{overlay.modal.background}", + "borderColor": "{overlay.modal.borderColor}", + "color": "{overlay.modal.color}", + "borderRadius": "{overlay.modal.borderRadius}", + "shadow": "{overlay.popover.shadow}" + }, + "header": { + "padding": "{overlay.modal.padding.300} {overlay.modal.padding.300} 1rem {overlay.modal.padding.300}", + "gap": "{overlay.gap.200}" + }, + "title": { + "fontSize": "{fonts.fontSize.500}", + "fontWeight": "{fonts.fontWeight.demibold}" + }, + "content": { + "padding": "{content.padding.400}" + }, + "footer": { + "padding": "0 {overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.300}", + "gap": "{content.gap.200}" + } + }, + "divider": { + "colorScheme": { + "light": { + "content": { + "background": "{content.background}", + "color": "{text.mutedColor}" + }, + "borderColor": "{content.borderColor}" + } + }, + "extend": { + "content": { + "gap": "{content.gap.200}" + }, + "iconSize": "{media.icon.size.100}" + }, + "horizontal": { + "margin": "{content.padding.300} 0", + "padding": "0 {content.padding.300}", + "content": { + "padding": "0 {content.padding.200}" + } + }, + "vertical": { + "margin": "0 {content.padding.300}", + "padding": "{content.padding.300} 0", + "content": { + "padding": "{content.padding.200} 0" + } + } + }, + "drawer": { + "extend": { + "borderRadius": "{overlay.popover.borderRadius}", + "borderWidth": "{overlay.borderWidth}", + "width": "{overlay.width}", + "extHeader": { + "gap": "{overlay.gap.200}", + "borderColor": "{drawer.root.borderColor}" + }, + "padding": "{overlay.drawer.padding}", + "scale": "0.125rem", + "backdrop": "{overlay.modal.backdrop}" + }, + "root": { + "background": "{overlay.modal.background}", + "borderColor": "{overlay.modal.borderColor}", + "color": "{overlay.modal.color}", + "shadow": "{overlay.modal.shadow}", + "width": "{overlay.width}" + }, + "sm": { + "width": "{overlay.sm.width}" + }, + "lg": { + "width": "{overlay.lg.width}" + }, + "xlg": { + "width": "{overlay.xlg.width}" + }, + "header": { + "padding": "{overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.200} {overlay.modal.padding.300} " + }, + "title": { + "fontSize": "{fonts.fontSize.500}", + "fontWeight": "{fonts.fontWeight.demibold}" + }, + "content": { + "padding": "{overlay.modal.padding.300}" + }, + "footer": { + "padding": "0 {overlay.modal.padding.300} {overlay.modal.padding.300} {overlay.modal.padding.300} " + } + }, + "fileupload": { + "extend": { + "extDragNdrop": { + "background": "{surface.0}", + "borderRadius": "{form.borderRadius.200}", + "iconSize": "{form.size.500}", + "padding": "{form.padding.400}", + "info": { + "gap": "{form.gap.100}" + } + }, + "extFile": { + "iconSize": "{form.size.350}" + }, + "extContent": { + "borderRadius": "{content.borderRadius}", + "highlightBorderDefault": "{form.borderColor}" + } + }, + "colorScheme": { + "light": { + "header": { + "background": "{surface.0}", + "color": "{text.color}" + } + } + }, + "root": { + "background": "{content.background}", + "borderColor": "{content.borderColor}", + "color": "{content.color}", + "borderRadius": "{content.borderRadius}", + "transitionDuration": "{form.transitionDuration}" + }, + "header": { + "borderColor": "{content.borderColor}", + "borderWidth": "0rem", + "padding": "0rem", + "borderRadius": "0rem", + "gap": "{content.gap.200}" + }, + "content": { + "highlightBorderColor": "{surface.900}", + "padding": "0rem", + "gap": "{content.gap.200}" + }, + "file": { + "padding": "{content.padding.200}", + "gap": "{content.gap.200}", + "borderColor": "{form.borderColor}", + "info": { + "gap": "{content.gap.100}" + } + }, + "fileList": { + "gap": "{content.gap.200}" + }, + "progressbar": { + "height": "{feedback.height.100}" + }, + "basic": { + "gap": "{content.gap.200}" + } + }, + "floatlabel": { + "extend": { + "height": "{form.size.800}", + "iconSize": "{form.icon.400}" + }, + "root": { + "color": "{form.floatLabelColor}", + "focusColor": "{form.floatLabelFocusColor}", + "activeColor": "{form.floatLabelActiveColor}", + "invalidColor": "{form.floatLabelInvalidColor}", + "transitionDuration": "{form.transitionDuration}", + "positionX": "{form.padding.300}", + "positionY": "{form.padding.300}", + "fontWeight": "{fonts.fontWeight.regular}", + "active": { + "fontSize": "{fonts.fontSize.100}", + "fontWeight": "{fonts.fontWeight.regular}" + } + }, + "over": { + "active": { + "top": "{form.padding.400}" + } + }, + "in": { + "input": { + "paddingTop": "{form.padding.700}", + "paddingBottom": "{form.padding.300}" + }, + "active": { + "top": "{form.padding.300}" + } + }, + "on": { + "borderRadius": "0rem", + "active": { + "padding": "0 {form.padding.100}", + "background": "{form.background}" + } + } + }, + "galleria": { + "extend": { + "backdrop": "{overlay.modal.backdrop}" + }, + "colorScheme": { + "light": { + "thumbnailContent": { + "background": "{surface.100}" + }, + "thumbnailNavButton": { + "hoverBackground": "{colors.alpha.white.200}", + "color": "{text.color}", + "hoverColor": "{text.hoverColor}" + }, + "indicatorButton": { + "background": "{surface.300}", + "hoverBackground": "{surface.400}" + } + } + }, + "root": { + "borderWidth": "{content.borderWidth}", + "borderColor": "{content.borderColor}", + "borderRadius": "{content.borderRadius}", + "transitionDuration": "{media.transitionDuration}" + }, + "navButton": { + "background": "{transparent}", + "hoverBackground": "{colors.alpha.white.200}", + "color": "{text.extend.colorInverted}", + "hoverColor": "{text.extend.colorInverted}", + "size": "{media.size.600}", + "gutter": "{media.gap.200}", + "prev": { + "borderRadius": "{navigation.item.borderRadius}" + }, + "next": { + "borderRadius": "{navigation.item.borderRadius}" + }, + "focusRing": { + "width": "{focusRing.width}", + "style": "{focusRing.style}", + "color": "{focusRing.color}", + "offset": "{focusRing.offset}", + "shadow": "{focusRing.shadow}" + } + }, + "navIcon": { + "size": "{media.icon.size.300}" + }, + "thumbnailsContent": { + "padding": "{media.padding.100}" + }, + "thumbnailNavButton": { + "size": "{media.size.300}", + "borderRadius": "{content.borderRadius}", + "gutter": "{media.gap.200}", + "focusRing": { + "width": "{focusRing.width}", + "style": "{focusRing.style}", + "color": "{focusRing.color}", + "offset": "{focusRing.offset}", + "shadow": "{focusRing.shadow}" + } + }, + "thumbnailNavButtonIcon": { + "size": "{media.icon.size.100}" + }, + "caption": { + "background": "{colors.alpha.white.500}", + "color": "{text.color}", + "padding": "{media.gap.200}" + }, + "indicatorList": { + "gap": "{media.gap.200}", + "padding": "{media.padding.400}" + }, + "indicatorButton": { + "width": "{media.size.200}", + "height": "{media.size.200}", + "activeBackground": "{surface.900}", + "borderRadius": "{content.borderRadius}", + "focusRing": { + "width": "{focusRing.width}", + "style": "{focusRing.style}", + "color": "{focusRing.color}", + "offset": "{focusRing.offset}", + "shadow": "{focusRing.shadow}" + } + }, + "insetIndicatorList": { + "background": "{colors.alpha.black.500}" + }, + "insetIndicatorButton": { + "background": "{colors.alpha.white.100}", + "hoverBackground": "{colors.alpha.white.200}", + "activeBackground": "{colors.alpha.white.500}" + }, + "closeButton": { + "size": "{media.size.600}", + "gutter": "{media.gap.200}", + "background": "{colors.alpha.white.100}", + "hoverBackground": "{colors.alpha.white.200}", + "color": "{text.extend.colorInverted}", + "hoverColor": "{text.extend.colorInverted}", + "borderRadius": "{controls.borderRadius.200}", + "focusRing": { + "width": "{focusRing.width}", + "style": "{focusRing.style}", + "color": "{focusRing.color}", + "offset": "{focusRing.offset}", + "shadow": "{focusRing.shadow}" + } + }, + "closeButtonIcon": { + "size": "{media.icon.size.300}" + } + }, + "inputgroup": { + "extend": { + "borderWidth": "{form.borderWidth}", + "iconSize": "{form.icon.300}" + }, + "colorScheme": { + "light": { + "addon": { + "background": "{form.background}", + "borderColor": "{form.borderColor}", + "color": "{text.mutedColor}" + } + } + }, + "addon": { + "borderRadius": "{form.borderRadius.200}", + "padding": "{form.padding.300}", + "minWidth": "{form.width.300}" + } + }, + "inputnumber": { + "extend": { + "borderWidth": "{form.borderWidth}", + "extButton": { + "height": "{form.size.600}", + "iconSize": "{form.icon.300}" + } + }, + "colorScheme": { + "light": { + "button": { + "background": "{content.background}", + "hoverBackground": "{content.hoverBackground}", + "activeBackground": "{transparent}", + "borderColor": "{form.borderColor}", + "hoverBorderColor": "{form.borderColor}", + "activeBorderColor": "{form.borderColor}", + "color": "{text.color}", + "hoverColor": "{text.hoverColor}", + "activeColor": "{text.color}" + } + } + }, + "transitionDuration": { + "transitionDuration": "{form.transitionDuration}" + }, + "button": { + "width": "{form.size.600}", + "borderRadius": "{form.borderRadius.200}", + "verticalPadding": "{form.padding.300}" + } + }, + "inputotp": { + "extend": { + "height": "{form.size.600}", + "borderWidth": "{form.borderWidth}" + }, + "root": { + "gap": "{form.gap.200}" + }, + "input": { + "width": "{form.width.400}" + }, + "sm": { + "width": "0rem" + }, + "lg": { + "width": "0rem" + } + }, + "inputtext": { + "extend": { + "readonlyBackground": "{form.readonlyBackground}", + "iconSize": "{form.icon.300}", + "borderWidth": "{form.borderWidth}", + "extXlg": { + "fontSize": "{form.xlg.fontSize}", + "paddingX": "{form.padding.300}", + "paddingY": "{form.padding.600}" + } + }, + "root": { + "background": "{form.background}", + "disabledBackground": "{form.disabledBackground}", + "filledBackground": "{form.filledBackground}", + "filledHoverBackground": "{form.filledHoverBackground}", + "filledFocusBackground": "{form.filledFocusBackground}", + "borderColor": "{form.borderColor}", + "hoverBorderColor": "{form.hoverBorderSecondaryColor}", + "focusBorderColor": "{form.focusBorderSecondaryColor}", + "invalidBorderColor": "{form.invalidBorderColor}", + "color": "{text.color}", + "disabledColor": "{form.disabledColor}", + "placeholderColor": "{form.placeholderColor}", + "invalidPlaceholderColor": "{form.invalidPlaceholderColor}", + "shadow": "0", + "paddingX": "{form.padding.300}", + "paddingY": "{form.padding.300}", + "borderRadius": "{form.borderRadius.200}", + "transitionDuration": "{form.transitionDuration}", + "sm": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{form.padding.300}", + "paddingY": "{form.padding.200}" + }, + "lg": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{form.padding.300}", + "paddingY": "{form.padding.400}" + }, + "focusRing": { + "width": "{form.focusRing.width}", + "style": "{form.focusRing.style}", + "color": "{form.focusRing.color}", + "offset": "{form.focusRing.offset}", + "shadow": "0" + } + } + }, + "listbox": { + "extend": { + "extOption": { + "label": { + "gap": "{list.gap.100}" + }, + "caption": { + "color": "{text.mutedColor}", + "stripedColor": "{text.mutedColor}" + }, + "gap": "{list.gap.200}" + } + }, + "colorScheme": { + "light": { + "option": { + "stripedBackground": "{surface.50}" + } + } + }, + "root": { + "background": "{form.background}", + "disabledBackground": "{form.disabledBackground}", + "borderColor": "{form.borderColor}", + "invalidBorderColor": "{form.invalidBorderColor}", + "color": "{form.color}", + "disabledColor": "{form.disabledColor}", + "shadow": "0", + "borderRadius": "{form.borderRadius.200}", + "transitionDuration": "{form.transitionDuration}" + }, + "list": { + "padding": "{list.padding}", + "gap": "{list.gap.100}", + "header": { + "padding": "{list.header.padding}" + } + }, + "option": { + "focusBackground": "{list.option.focusBackground}", + "selectedBackground": "{list.option.selectedBackground}", + "selectedFocusBackground": "{list.option.selectedFocusBackground}", + "color": "{list.option.color}", + "focusColor": "{list.option.focusColor}", + "selectedColor": "{list.option.selectedColor}", + "selectedFocusColor": "{list.option.selectedFocusColor}", + "padding": "{list.option.padding}", + "borderRadius": "{list.option.borderRadius}" + }, + "optionGroup": { + "background": "{list.optionGroup.background}", + "color": "{list.optionGroup.color}", + "fontWeight": "{fonts.fontWeight.regular}", + "padding": "{list.option.padding}" + }, + "checkmark": { + "color": "{list.option.color}", + "gutterStart": "-{list.gap.200}", + "gutterEnd": "{list.gap.200}" + }, + "emptyMessage": { + "padding": "{list.option.padding}" + } + }, + "megamenu": { + "extend": { + "extItem": { + "caption": { + "color": "{text.mutedColor}", + "gap": "{content.gap.100}" + } + }, + "iconSize": "{navigation.submenuIcon.size}" + }, + "colorScheme": { + "light": { + "root": { + "background": "{transparent}" + } + } + }, + "root": { + "borderColor": "{transparent}", + "borderRadius": "{content.borderRadius}", + "color": "{content.color}", + "gap": "{content.gap.100}", + "transitionDuration": "{form.transitionDuration}", + "verticalOrientation": { + "padding": "{navigation.list.padding.100}", + "gap": "{navigation.list.gap}" + }, + "horizontalOrientation": { + "padding": "{navigation.list.padding.100}", + "gap": "{navigation.list.gap}" + } + }, + "baseItem": { + "borderRadius": "{content.borderRadius}", + "padding": "{navigation.item.padding}" + }, + "item": { + "focusBackground": "{navigation.item.focusBackground}", + "activeBackground": "{navigation.item.activeBackground}", + "color": "{navigation.item.color}", + "focusColor": "{navigation.item.focusColor}", + "activeColor": "{navigation.item.activeColor}", + "padding": "{navigation.item.padding}", + "borderRadius": "{navigation.item.borderRadius}", + "gap": "{navigation.item.gap}", + "icon": { + "color": "{navigation.item.icon.color}", + "focusColor": "{navigation.item.icon.focusColor}", + "activeColor": "{navigation.item.icon.activeColor}" + } + }, + "overlay": { + "padding": "{content.padding.100}", + "background": "{content.background}", + "borderColor": "{content.borderColor}", + "borderRadius": "{content.borderRadius}", + "color": "{content.color}", + "shadow": "{navigation.shadow}", + "gap": "0rem" + }, + "submenu": { + "padding": "{navigation.list.padding.100}", + "gap": "{navigation.list.gap}" + }, + "submenuLabel": { + "fontWeight": "{navigation.submenuLabel.fontWeight}", + "padding": "{navigation.submenuLabel.padding}", + "background": "{navigation.submenuLabel.background}", + "color": "{navigation.submenuLabel.color}" + }, + "submenuIcon": { + "size": "{navigation.submenuIcon.size}", + "color": "{navigation.submenuIcon.color}", + "focusColor": "{navigation.submenuIcon.focusColor}", + "activeColor": "{navigation.submenuIcon.activeColor}" + }, + "separator": { + "borderColor": "{content.borderColor}" + }, + "mobileButton": { + "borderRadius": "{navigation.item.borderRadius}", + "size": "{controls.iconOnly.600}", + "color": "{text.color}", + "hoverColor": "{text.hoverColor}", + "hoverBackground": "{content.hoverBackground}", + "focusRing": { + "width": "{focusRing.width}", + "style": "{focusRing.style}", + "color": "{focusRing.color}", + "offset": "{focusRing.offset}", + "shadow": "{focusRing.shadow}" + } + } + }, + "menu": { + "extend": { + "paddingX": "0.25rem", + "iconSize": "{navigation.submenuIcon.size}", + "paddingY": "0.25rem", + "extItem": { + "caption": { + "gap": "{content.gap.100}" + }, + "activeBackground": "{navigation.item.activeBackground}", + "activeColor": "{navigation.item.activeColor}" + } + }, + "colorScheme": { + "light": { + "extend": { + "extItem": { + "caption": { + "color": "{text.mutedColor}" + }, + "icon": { + "activeColor": "{navigation.item.icon.activeColor}" + } + } + }, + "root": { + "background": "{content.background}", + "borderColor": "{content.borderColor}", + "color": "{content.color}" + }, + "item": { + "focusBackground": "{navigation.item.focusBackground}", + "color": "{navigation.item.color}", + "focusColor": "{navigation.item.focusColor}", + "icon": { + "color": "{navigation.item.icon.color}", + "focusColor": "{navigation.item.icon.focusColor}" + } + } + } + }, + "root": { + "borderRadius": "{content.borderRadius}", + "shadow": "{navigation.shadow}", + "transitionDuration": "{form.transitionDuration}" + }, + "list": { + "padding": "{navigation.list.padding.100}", + "gap": "{navigation.list.gap}" + }, + "submenuLabel": { + "padding": "{navigation.submenuLabel.padding}", + "fontWeight": "{fonts.fontWeight.regular}", + "background": "{navigation.submenuLabel.background}", + "color": "{navigation.submenuLabel.color}" + }, + "separator": { + "borderColor": "{content.borderColor}" + }, + "item": { + "padding": "{navigation.item.padding}", + "borderRadius": "{navigation.item.borderRadius}", + "gap": "{navigation.item.gap}" + } + }, + "menubar": { + "extend": { + "iconSize": "{navigation.submenuIcon.size}", + "extItem": { + "caption": { + "color": "{text.mutedColor}", + "gap": "{content.padding.100}" + } + }, + "extSubmenuLabel": { + "padding": "{navigation.submenuLabel.padding}", + "fontWeight": "{fonts.fontWeight.demibold}", + "background": "{navigation.submenuLabel.background}", + "color": "{navigation.submenuLabel.color}" + } + }, + "colorScheme": { + "light": { + "root": { + "background": "{transparent}" + } + } + }, + "root": { + "borderColor": "{transparent}", + "borderRadius": "{navigation.item.borderRadius}", + "color": "{content.color}", + "gap": "{content.padding.100}", + "padding": "{navigation.list.padding.100}", + "transitionDuration": "{form.transitionDuration}" + }, + "baseItem": { + "borderRadius": "{navigation.item.borderRadius}", + "padding": "{navigation.item.padding}" + }, + "item": { + "focusBackground": "{navigation.item.focusBackground}", + "activeBackground": "{navigation.item.activeBackground}", + "color": "{navigation.item.color}", + "focusColor": "{navigation.item.focusColor}", + "activeColor": "{navigation.item.activeColor}", + "padding": "{navigation.item.padding}", + "borderRadius": "{navigation.item.borderRadius}", + "gap": "{navigation.item.gap}", + "icon": { + "color": "{navigation.item.icon.color}", + "focusColor": "{navigation.item.icon.focusColor}", + "activeColor": "{navigation.item.icon.activeColor}" + } + }, + "submenu": { + "padding": "{navigation.list.padding.100}", + "gap": "{navigation.list.gap}", + "background": "{content.background}", + "borderColor": "{content.borderColor}", + "borderRadius": "{content.borderRadius}", + "shadow": "{navigation.shadow}", + "mobileIndent": "{navigation.padding.200}", + "icon": { + "size": "{navigation.submenuIcon.size}", + "color": "{navigation.submenuIcon.color}", + "focusColor": "{navigation.submenuIcon.focusColor}", + "activeColor": "{navigation.submenuIcon.activeColor}" + } + }, + "separator": { + "borderColor": "{content.borderColor}" + }, + "mobileButton": { + "borderRadius": "{navigation.item.borderRadius}", + "size": "{controls.iconOnly.600}", + "color": "{text.color}", + "hoverColor": "{text.hoverColor}", + "hoverBackground": "{content.hoverBackground}", + "focusRing": { + "width": "{focusRing.width}", + "style": "{focusRing.style}", + "color": "{focusRing.color}", + "offset": "{focusRing.offset}", + "shadow": "{focusRing.shadow}" + } + } + }, + "message": { + "extend": { + "width": "{messages.width}", + "extText": { + "gap": "{feedback.gap.100}" + }, + "extInfo": { + "color": "{info.500}", + "closeButton": { + "color": "{info.500}", + "borderColor": "{info.500}" + }, + "caption": { + "color": "{text.color}" + } + }, + "extAccentLine": { + "width": "{feedback.width.200}" + }, + "extCloseButton": { + "width": "{feedback.width.100}" + }, + "extSuccess": { + "color": "{success.500}", + "closeButton": { + "color": "{success.500}", + "borderColor": "{success.500}" + }, + "caption": { + "color": "{text.color}" + } + }, + "extWarn": { + "color": "{warn.500}", + "closeButton": { + "color": "{warn.500}", + "borderColor": "{warn.500}" + }, + "caption": { + "color": "{text.color}" + } + }, + "extError": { + "color": "{error.500}", + "closeButton": { + "color": "{error.500}", + "borderColor": "{error.500}" + }, + "caption": { + "color": "{text.color}" + } + } + }, + "colorScheme": { + "light": { + "success": { + "background": "{success.50}", + "borderColor": "{success.500}", + "color": "{text.color}", + "shadow": "none", + "outlined": { + "color": "{text.color}", + "borderColor": "{success.500}" + }, + "closeButton": { + "hoverBackground": "{success.200}", + "focusRing": { + "color": "{focusRing.color}", + "shadow": "{focusRing.shadow}" + } + }, + "simple": { + "color": "{text.color}" + } + }, + "outlined": { + "root": { + "borderWidth": "0rem" + }, + "closeButton": { + "hoverBackground": "{transparent}", + "focusRing": { + "color": "{focusRing.color}", + "shadow": "{focusRing.shadow}" + } + }, + "outlined": { + "color": "{transparent}", + "borderColor": "{transparent}" + }, + "simple": { + "color": "{transparent}" + } + }, + "simple": { + "content": { + "padding": "0rem" + } + }, + "warn": { + "background": "{warn.50}", + "borderColor": "{warn.500}", + "color": "{text.color}", + "shadow": "none", + "outlined": { + "color": "{text.color}", + "borderColor": "{warn.500}" + }, + "closeButton": { + "hoverBackground": "{warn.200}", + "focusRing": { + "color": "{focusRing.color}", + "shadow": "{focusRing.shadow}" + } + }, + "simple": { + "color": "{text.color}" + } + }, + "error": { + "background": "{error.50}", + "borderColor": "{error.500}", + "color": "{text.color}", + "shadow": "none", + "outlined": { + "color": "{text.color}", + "borderColor": "{error.500}" + }, + "closeButton": { + "hoverBackground": "{error.200}", + "focusRing": { + "color": "{focusRing.color}", + "shadow": "{focusRing.shadow}" + } + }, + "simple": { + "color": "{text.color}" + } + }, + "secondary": { + "borderColor": "{transparent}", + "shadow": "none", + "closeButton": { + "hoverBackground": "{transparent}", + "focusRing": { + "color": "{focusRing.color}", + "shadow": "{focusRing.shadow}" + } + }, + "simple": { + "color": "{transparent}" + }, + "outlined": { + "color": "{transparent}", + "borderColor": "{transparent}" + } + }, + "contrast": { + "borderColor": "{transparent}", + "shadow": "none", + "closeButton": { + "hoverBackground": "{transparent}", + "focusRing": { + "color": "{focusRing.color}", + "shadow": "{focusRing.shadow}" + } + }, + "simple": { + "color": "{transparent}" + }, + "outlined": { + "color": "{transparent}", + "borderColor": "{transparent}" + } + }, + "info": { + "background": "{info.50}", + "borderColor": "{info.500}", + "color": "{text.color}", + "shadow": "none", + "closeButton": { + "hoverBackground": "{info.200}", + "focusRing": { + "color": "{focusRing.color}", + "shadow": "{focusRing.shadow}" + } + }, + "outlined": { + "color": "{text.color}", + "borderColor": "{info.500}" + }, + "simple": { + "color": "{text.color}" + } + } + } + }, + "root": { + "borderRadius": "{content.borderRadius}", + "borderWidth": "{feedback.width.100}", + "transitionDuration": "{feedback.transitionDuration}" + }, + "content": { + "padding": "{feedback.padding.200}", + "gap": "{feedback.gap.400}", + "sm": { + "padding": "{feedback.padding.200}" + }, + "lg": { + "padding": "{feedback.padding.200}" + } + }, + "text": { + "fontSize": "{fonts.fontSize.300}", + "fontWeight": "{fonts.fontWeight.bold}", + "sm": { + "fontSize": "{fonts.fontSize.300}" + }, + "lg": { + "fontSize": "{fonts.fontSize.300}" + } + }, + "icon": { + "size": "{feedback.icon.size.500}", + "sm": { + "size": "{feedback.icon.size.500}" + }, + "lg": { + "size": "{feedback.icon.size.500}" + } + }, + "closeButton": { + "width": "{controls.iconOnly.600}", + "height": "{controls.iconOnly.600}", + "borderRadius": "{controls.borderRadius.100}", + "focusRing": { + "width": "{focusRing.width}", + "style": "{focusRing.style}", + "offset": "{focusRing.offset}" + } + }, + "closeIcon": { + "size": "{feedback.icon.size.200}", + "sm": { + "size": "{feedback.icon.size.200}" + }, + "lg": { + "size": "{feedback.icon.size.200}" + } + } + }, + "metergroup": { + "extend": { + "extLabel": { + "color": "{text.mutedColor}" + } + }, + "root": { + "borderRadius": "{content.borderRadius}", + "gap": "{feedback.gap.300}" + }, + "meters": { + "size": "{feedback.height.100}", + "background": "{content.borderColor}" + }, + "label": { + "gap": "{feedback.gap.100}" + }, + "labelMarker": { + "size": "{feedback.icon.size.100}" + }, + "labelIcon": { + "size": "{feedback.icon.size.200}" + }, + "labelList": { + "verticalGap": "{feedback.gap.200}", + "horizontalGap": "{feedback.gap.300}" + } + }, + "multiselect": { + "colorScheme": { + "overlay": { + "background": "{overlay.select.background}", + "borderColor": "{overlay.select.borderColor}", + "color": "{overlay.select.color}" + }, + "option": { + "focusBackground": "{list.option.focusBackground}", + "selectedBackground": "{list.option.selectedBackground}", + "selectedFocusBackground": "{list.option.selectedFocusBackground}", + "color": "{list.option.color}", + "focusColor": "{list.option.focusColor}", + "selectedColor": "{list.option.selectedColor}", + "selectedFocusColor": "{list.option.selectedFocusColor}" + }, + "root": { + "background": "{form.background}", + "disabledBackground": "{form.disabledBackground}", + "filledBackground": "{form.filledBackground}", + "filledHoverBackground": "{form.filledHoverBackground}", + "filledFocusBackground": "{form.filledFocusBackground}", + "borderColor": "{form.borderColor}", + "hoverBorderColor": "{form.hoverBorderSecondaryColor}", + "focusBorderColor": "{form.focusBorderSecondaryColor}", + "invalidBorderColor": "{form.invalidBorderColor}", + "color": "{form.color}", + "disabledColor": "{form.disabledColor}", + "placeholderColor": "{form.placeholderColor}", + "invalidPlaceholderColor": "{form.invalidPlaceholderColor}", + "focusRing": { + "color": "{form.focusRing.color}" + } + }, + "dropdown": { + "color": "{form.floatLabelColor}" + }, + "optionGroup": { + "background": "{list.optionGroup.background}", + "color": "{list.optionGroup.color}" + }, + "clearIcon": { + "color": "{form.floatLabelColor}" + } + }, + "extend": { + "paddingX": "0.3571rem", + "paddingY": "0.3571rem", + "borderWidth": "{form.borderWidth}", + "iconSize": "{form.icon.300}", + "width": "{form.width}", + "readonlyBackground": "{form.readonlyBackground}" + }, + "root": { + "shadow": "0", + "paddingX": "{form.paddingX}", + "paddingY": "{form.paddingY}", + "borderRadius": "{form.borderRadius.200}", + "transitionDuration": "{form.transitionDuration}", + "sm": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{form.padding.200}", + "paddingY": "{form.padding.200}" + }, + "lg": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{form.padding.400}", + "paddingY": "{form.padding.400}" + }, + "focusRing": { + "width": "{form.focusRing.width}", + "style": "{form.focusRing.style}", + "offset": "{form.focusRing.offset}", + "shadow": "0" + } + }, + "dropdown": { + "width": "{form.width.300}" + }, + "overlay": { + "borderRadius": "{overlay.select.borderRadius}", + "shadow": "{overlay.select.shadow}" + }, + "list": { + "padding": "{list.padding}", + "header": { + "padding": "{list.header.padding}" + }, + "gap": "{list.gap.100}" + }, + "chip": { + "borderRadius": "{form.borderRadius.100}" + }, + "option": { + "padding": "{list.option.padding}", + "borderRadius": "{list.option.borderRadius}", + "gap": "{list.gap.200}" + }, + "optionGroup": { + "fontWeight": "{fonts.fontWeight.demibold}", + "padding": "{list.optionGroup.padding}" + }, + "emptyMessage": { + "padding": "{list.option.padding}" + } + }, + "paginator": { + "root": { + "padding": "0 {data.padding.200}", + "gap": "{data.gap.200}", + "borderRadius": "{content.borderRadius}", + "background": "{transparent}", + "color": "{content.color}", + "transitionDuration": "{data.transitionDuration}" + }, + "currentPageReport": { + "color": "{text.mutedColor}" + }, + "navButton": { + "background": "{transparent}", + "hoverBackground": "{content.hoverBackground}", + "selectedBackground": "{highlight.background}", + "color": "{text.color}", + "hoverColor": "{text.hoverColor}", + "selectedColor": "{text.extend.colorInverted}", + "width": "{data.icon.size.700}", + "height": "{data.icon.size.700}", + "borderRadius": "{content.borderRadius}", + "focusRing": { + "width": "{focusRing.width}", + "style": "{focusRing.style}", + "color": "{focusRing.color}", + "offset": "{focusRing.offset}", + "focus": "{focusRing.shadow}" + } + }, + "jumpToPageInput": { + "maxWidth": "{data.width.400}" + } + }, + "panelmenu": { + "extend": { + "extPanel": { + "gap": "{content.gap.100}" + }, + "iconSize": "{navigation.submenuIcon.size}", + "extItem": { + "activeBackground": "{navigation.item.activeBackground}", + "activeColor": "{navigation.item.activeColor}", + "caption": { + "color": "{text.mutedColor}", + "gap": "{content.gap.100}" + } + } + }, + "root": { + "gap": "{content.gap.100}", + "transitionDuration": "{form.transitionDuration}" + }, + "panel": { + "background": "{transparent}", + "borderColor": "{transparent}", + "borderWidth": "{navigation.width.100}", + "color": "{content.color}", + "padding": "{content.padding.100}", + "borderRadius": "{content.borderRadius}", + "first": { + "borderWidth": "{navigation.width.100} {navigation.width.100} 0 {navigation.width.100}", + "topBorderRadius": "{content.borderRadius}" + }, + "last": { + "borderWidth": "0 {navigation.width.100} {navigation.width.100} {navigation.width.100}", + "topBorderRadius": "{content.borderRadius}" + } + }, + "item": { + "focusBackground": "{navigation.item.focusBackground}", + "color": "{navigation.item.color}", + "focusColor": "{navigation.item.focusColor}", + "gap": "{navigation.item.gap}", + "padding": "{navigation.item.padding}", + "borderRadius": "{navigation.item.borderRadius}", + "icon": { + "color": "{navigation.item.icon.color}", + "focusColor": "{navigation.item.icon.focusColor}" + } + }, + "submenu": { + "indent": "{navigation.padding.400}" + }, + "separator": { + "borderColor": "{content.borderColor}" + }, + "submenuIcon": { + "color": "{navigation.submenuIcon.color}", + "focusColor": "{navigation.submenuIcon.focusColor}" + } + }, + "password": { + "extend": { + "borderWidth": "{form.borderWidth}" + }, + "colorScheme": { + "light": { + "strength": { + "weakBackground": "{error.500}", + "mediumBackground": "{warn.500}", + "strongBackground": "{success.600}" + }, + "icon": { + "color": "{form.placeholderColor}" + } + }, + "dark": { + "strength": { + "weakBackground": "{error.500}", + "mediumBackground": "{warn.500}", + "strongBackground": "{success.600}" + }, + "icon": { + "color": "{form.placeholderColor}" + } + } + }, + "meter": { + "background": "{content.borderColor}", + "borderRadius": "{content.borderRadius}", + "height": "{feedback.height.100}" + }, + "overlay": { + "background": "{overlay.popover.background}", + "borderColor": "{overlay.popover.borderColor}", + "borderRadius": "{overlay.popover.borderRadius}", + "color": "{overlay.popover.color}", + "padding": "{overlay.popover.padding.100}", + "shadow": "{overlay.popover.shadow}" + }, + "content": { + "gap": "{content.gap.200}" + } + }, + "popover": { + "extend": { + "borderWidth": "{overlay.borderWidth}", + "arrow": { + "width": "{overlay.popover.width.200}", + "height": "{overlay.popover.width.100}" + } + }, + "root": { + "background": "{overlay.popover.background}", + "borderColor": "{overlay.popover.borderColor}", + "color": "{overlay.popover.color}", + "borderRadius": "{overlay.popover.borderRadius}", + "shadow": "{overlay.popover.shadow}", + "gutter": "{overlay.gap.300}", + "arrowOffset": "{overlay.popover.padding.200}", + "arrowLeft": "0px" + }, + "content": { + "padding": "{overlay.popover.padding.100}" + } + }, + "progressbar": { + "label": { + "color": "{text.extend.colorPrimaryStatic}", + "fontSize": "{fonts.fontSize.100}", + "fontWeight": "{fonts.fontWeight.regular}" + }, + "root": { + "background": "{content.borderColor}", + "borderRadius": "{content.borderRadius}", + "height": "{feedback.height.300}" + }, + "value": { + "background": "{primary.color}" + } + }, + "progressspinner": { + "extend": { + "small": "{feedback.width.500}", + "medium": "{feedback.width.700}", + "large": "{feedback.width.800}", + "xlarge": "{feedback.width.900}" + }, + "colorScheme": { + "light": { + "root": { + "colorOne": "{success.500}", + "colorTwo": "{info.500}", + "colorThree": "{error.500}", + "colorFour": "{warn.500}" + } + } + }, + "root": { + "borderWidth": "{feedback.width.200}" + } + }, + "radiobutton": { + "root": { + "width": "{form.size.400}", + "height": "{form.size.400}", + "background": "{form.background}", + "checkedBackground": "{surface.900}", + "checkedHoverBackground": "{surface.800}", + "disabledBackground": "{form.disabledBackground}", + "filledBackground": "{form.filledBackground}", + "borderColor": "{form.borderColor}", + "hoverBorderColor": "{form.hoverBorderPrimaryColor}", + "focusBorderColor": "{form.borderColor}", + "checkedBorderColor": "{surface.900}", + "checkedHoverBorderColor": "{form.hoverBorderPrimaryColor}", + "checkedFocusBorderColor": "{form.focusBorderPrimaryColor}", + "checkedDisabledBorderColor": "{form.borderColor}", + "invalidBorderColor": "{form.invalidBorderColor}", + "shadow": "0", + "transitionDuration": "{form.transitionDuration}" + }, + "focusRing": { + "width": "{focusRing.width}", + "style": "{focusRing.style}", + "color": "{focusRing.color}", + "offset": "{focusRing.offset}", + "shadow": "{focusRing.shadow}" + }, + "sm": { + "width": "{form.size.300}", + "height": "{form.size.300}" + }, + "lg": { + "width": "{form.size.350}", + "height": "{form.size.350}" + }, + "icon": { + "size": "0.7rem", + "checkedColor": "{text.extend.colorInverted}", + "checkedHoverColor": "{text.extend.colorInverted}", + "disabledColor": "{text.mutedColor}", + "sm": { + "size": "{form.icon.100}" + }, + "lg": { + "size": "{form.icon.300}" + } + } + }, + "rating": { + "root": { + "gap": "{form.gap.200}", + "transitionDuration": "{form.transitionDuration}" + }, + "focusRing": { + "width": "{form.focusRing.width}", + "style": "{form.focusRing.style}", + "color": "{form.focusRing.color}", + "offset": "{form.focusRing.offset}", + "shadow": "{focusRing.shadow}" + }, + "icon": { + "size": "{form.icon.500}", + "color": "{surface.500}", + "hoverColor": "{warn.500}", + "activeColor": "{warn.500}" + } + }, + "ripple": { + "colorScheme": { + "light": { + "root": { + "background": "rgba(255, 255, 255, 0.0100)" + } + } + } + }, + "scrollpanel": { + "colorScheme": { + "light": { + "bar": { + "background": "{surface.300}" + } + } + }, + "root": { + "transitionDuration": "{media.transitionDuration}" + }, + "bar": { + "size": "{media.size.200}", + "borderRadius": "{media.borderRadius.100}", + "focusRing": { + "width": "0rem", + "style": "{focusRing.style}", + "color": "{focusRing.color}", + "offset": "{focusRing.offset}", + "shadow": "{focusRing.shadow}" + } + } + }, + "select": { + "extend": { + "extOption": { + "background": "{list.option.background}", + "gap": "{list.gap.200}" + }, + "extOptionGroup": { + "gap": "{list.gap.200}" + }, + "readonlyBackground": "{form.readonlyBackground}", + "borderWidth": "{form.borderWidth}", + "iconSize": "{form.icon.300}" + }, + "root": { + "background": "{form.background}", + "disabledBackground": "{form.disabledBackground}", + "filledBackground": "{form.filledBackground}", + "filledHoverBackground": "{form.filledHoverBackground}", + "filledFocusBackground": "{form.filledFocusBackground}", + "borderColor": "{form.borderColor}", + "hoverBorderColor": "{form.hoverBorderSecondaryColor}", + "focusBorderColor": "{form.focusBorderSecondaryColor}", + "invalidBorderColor": "{form.invalidBorderColor}", + "color": "{text.color}", + "disabledColor": "{form.disabledColor}", + "placeholderColor": "{form.placeholderColor}", + "invalidPlaceholderColor": "{form.invalidPlaceholderColor}", + "shadow": "0", + "paddingX": "{form.padding.300}", + "paddingY": "{form.padding.300}", + "borderRadius": "{form.borderRadius.200}", + "transitionDuration": "{form.transitionDuration}", + "sm": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{form.padding.300}", + "paddingY": "{form.padding.200}" + }, + "lg": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{form.padding.300}", + "paddingY": "{form.padding.400}" + }, + "focusRing": { + "width": "{form.focusRing.width}", + "style": "{form.focusRing.style}", + "color": "{form.focusRing.color}", + "offset": "{form.focusRing.offset}", + "shadow": "0" + } + }, + "dropdown": { + "width": "{form.width.300}", + "color": "{form.iconColor}" + }, + "overlay": { + "background": "{overlay.select.background}", + "borderColor": "{overlay.select.borderColor}", + "borderRadius": "{overlay.select.borderRadius}", + "color": "{overlay.select.color}", + "shadow": "{overlay.select.shadow}" + }, + "list": { + "padding": "{list.padding}", + "gap": "{list.gap.100}", + "header": { + "padding": "{list.header.padding}" + } + }, + "option": { + "focusBackground": "{list.option.focusBackground}", + "selectedBackground": "{list.option.selectedBackground}", + "selectedFocusBackground": "{list.option.selectedFocusBackground}", + "color": "{list.option.color}", + "focusColor": "{list.option.focusColor}", + "selectedColor": "{list.option.selectedColor}", + "selectedFocusColor": "{list.option.selectedFocusColor}", + "padding": "{list.option.padding}", + "borderRadius": "{list.option.borderRadius}" + }, + "optionGroup": { + "background": "{list.optionGroup.background}", + "color": "{list.optionGroup.color}", + "fontWeight": "{fonts.fontWeight.regular}", + "padding": "{list.option.padding}" + }, + "clearIcon": { + "color": "{form.iconColor}" + }, + "checkmark": { + "color": "{list.option.color}", + "gutterStart": "-{form.padding.200}", + "gutterEnd": "{form.padding.200}" + }, + "emptyMessage": { + "padding": "{list.option.padding}" + } + }, + "selectbutton": { + "extend": { + "gap": "{form.gap.100}", + "paddingX": "{controls.padding.100}", + "paddingY": "{controls.padding.100}", + "checkedBackground": "{form.background}", + "iconSize": { + "sm": "{controls.iconOnly.200}", + "md": "{controls.iconOnly.300}", + "lg": "{controls.iconOnly.400}", + "xlg": "{controls.iconOnly.500}" + }, + "checkedBorderColor": "{form.background}", + "checkedColor": "{form.color}", + "ext": { + "borderRadius": "{borderRadius.200}" + } + }, + "colorScheme": { + "light": { + "root": { + "invalidBorderColor": "{form.invalidBorderColor}" + }, + "extend": { + "background": "{surface.200}" + } + } + }, + "root": { + "borderRadius": "{form.borderRadius.200}" + } + }, + "skeleton": { + "extend": { + "minWidth": "{feedback.width.700}", + "height": "{feedback.height.650}" + }, + "colorScheme": { + "light": { + "root": { + "background": "{surface.200}", + "animationBackground": "{surface.100}" + } + } + }, + "root": { + "borderRadius": "{content.borderRadius}" + } + }, + "slider": { + "colorScheme": { + "handle": { + "content": { + "background": "{surface.0}" + } + } + }, + "root": { + "transitionDuration": "{form.transitionDuration}" + }, + "track": { + "background": "{content.borderColor}", + "borderRadius": "{content.borderRadius}", + "size": "{form.size.150}" + }, + "range": { + "background": "{surface.900}" + }, + "handle": { + "width": "{form.size.350}", + "height": "{form.size.350}", + "borderRadius": "{form.borderRadius.300}", + "background": "{surface.900}", + "hoverBackground": "{surface.900}", + "focusRing": { + "width": "{form.focusRing.width}", + "style": "{form.focusRing.style}", + "color": "{form.focusRing.color}", + "offset": "{form.focusRing.offset}", + "shadow": "{focusRing.shadow}" + }, + "content": { + "borderRadius": "{form.borderRadius.300}", + "hoverBackground": "{surface.900}", + "width": "{form.size.250}", + "height": "{form.size.250}", + "shadow": "none" + } + } + }, + "splitter": { + "colorScheme": { + "light": { + "handle": { + "background": "{surface.900}" + } + } + }, + "gutter": { + "background": "{surface.100}" + }, + "root": { + "background": "{content.background}", + "borderColor": "{content.borderColor}", + "color": "{content.color}", + "transitionDuration": "{controls.transitionDuration}" + }, + "handle": { + "size": "{form.size.150}", + "borderRadius": "{content.borderRadius}", + "focusRing": { + "width": "{form.focusRing.width}", + "style": "{form.focusRing.style}", + "color": "{form.focusRing.color}", + "offset": "{form.focusRing.offset}", + "shadow": "{focusRing.shadow}" + } + } + }, + "stepper": { + "extend": { + "extCaption": { + "gap": "{feedback.gap.100}" + }, + "extStepNumber": { + "invalidBackground": "{error.400}", + "invalidColor": "{error.900}", + "invalidBorderColor": "{error.400}", + "borderWidth": "{feedback.width.100}", + "iconSize": "{feedback.icon.size.300}" + } + }, + "root": { + "transitionDuration": "{feedback.transitionDuration}" + }, + "separator": { + "background": "{content.borderColor}", + "activeBackground": "{form.focusBorderPrimaryColor}", + "margin": "0 0 0 1.625rem", + "size": "{form.size.100}" + }, + "step": { + "padding": "{feedback.padding.100}", + "gap": "{feedback.gap.200}" + }, + "stepHeader": { + "padding": "0rem", + "borderRadius": "0rem", + "gap": "{feedback.gap.200}", + "focusRing": { + "width": "{focusRing.width}", + "style": "{focusRing.style}", + "color": "{focusRing.color}", + "offset": "{focusRing.offset}", + "shadow": "{focusRing.shadow}" + } + }, + "stepTitle": { + "color": "{text.color}", + "activeColor": "{text.color}", + "fontWeight": "{fonts.fontWeight.regular}" + }, + "stepNumber": { + "background": "{content.background}", + "activeBackground": "{primary.color}", + "borderColor": "{content.borderColor}", + "activeBorderColor": "{primary.color}", + "color": "{text.color}", + "activeColor": "{text.extend.colorPrimaryStatic}", + "size": "{form.size.400}", + "fontSize": "{fonts.fontSize.300}", + "fontWeight": "{fonts.fontWeight.bold}", + "borderRadius": "{form.borderRadius.300}", + "shadow": "none" + }, + "steppanels": { + "padding": "{feedback.padding.200}" + }, + "steppanel": { + "background": "{content.background}", + "color": "{content.color}", + "padding": "0rem", + "indent": "0rem" + } + }, + "steps": { + "itemLink": { + "gap": "{form.gap.200}" + }, + "itemLabel": { + "fontWeight": "{fonts.fontWeight.regular}" + }, + "itemNumber": { + "background": "{content.background}", + "size": "{form.size.500}", + "fontSize": "{fonts.fontSize.300}", + "fontWeight": "{fonts.fontWeight.bold}", + "borderRadius": "{form.borderRadius.300}", + "shadow": "none" + } + }, + "tabs": { + "colorScheme": { + "light": { + "navButton": { + "shadow": "none" + }, + "tab": { + "background": "{transparent}", + "hoverBackground": "{transparent}", + "activeBackground": "{transparent}" + } + } + }, + "root": { + "transitionDuration": "{data.transitionDuration}" + }, + "tablist": { + "borderWidth": "0 0 {data.width.100} 0", + "background": "{transparent}", + "borderColor": "{content.borderColor}" + }, + "tab": { + "borderWidth": "0", + "borderColor": "{content.borderColor}", + "hoverBorderColor": "{content.borderColor}", + "activeBorderColor": "{content.activeBorderColor}", + "color": "{text.mutedColor}", + "hoverColor": "{text.color}", + "activeColor": "{text.color}", + "padding": "{content.padding.300}", + "fontWeight": "{fonts.fontWeight.demibold}", + "margin": "0", + "gap": "{content.gap.200}", + "focusRing": { + "width": "{focusRing.width}", + "style": "{focusRing.style}", + "color": "{focusRing.color}", + "offset": "{focusRing.offset}", + "shadow": "{focusRing.shadow}" + } + }, + "tabpanel": { + "background": "{transparent}", + "color": "{text.color}", + "padding": "{spacing.4x}", + "focusRing": { + "width": "{focusRing.width}", + "style": "{focusRing.style}", + "color": "{focusRing.color}", + "offset": "{focusRing.offset}", + "shadow": "{focusRing.shadow}" + } + }, + "navButton": { + "background": "{content.background}", + "color": "{content.color}", + "hoverColor": "{content.hoverColor}", + "width": "{controls.iconOnly.400}", + "focusRing": { + "width": "{focusRing.width}", + "style": "{focusRing.style}", + "color": "{focusRing.color}", + "offset": "{focusRing.offset}", + "shadow": "{focusRing.shadow}" + } + }, + "activeBar": { + "height": "0.18rem", + "bottom": "-0.18rem", + "background": "{content.color}" + } + }, + "toast": { + "extend": { + "extInfo": { + "color": "{info.500}", + "closeButton": { + "color": "{info.500}", + "borderColor": "{info.500}" + }, + "caption": { + "color": "{text.color}" + } + }, + "extAccentLine": { + "width": "{feedback.width.200}" + }, + "extCloseButton": { + "width": "{feedback.width.100}" + }, + "extSuccess": { + "color": "{success.500}", + "closeButton": { + "color": "{success.500}", + "borderColor": "{success.500}" + }, + "caption": { + "color": "{text.color}" + } + }, + "extWarn": { + "color": "{warn.500}", + "closeButton": { + "color": "{warn.500}", + "borderColor": "{warn.500}" + }, + "caption": { + "color": "{text.color}" + } + }, + "extError": { + "color": "{error.500}", + "closeButton": { + "color": "{error.500}", + "borderColor": "{error.500}" + }, + "caption": { + "color": "{text.color}" + } + } + }, + "colorScheme": { + "light": { + "info": { + "background": "{info.50}", + "borderColor": "{info.500}", + "color": "{text.color}", + "detailColor": "{text.color}", + "shadow": "{overlay.popover.shadow}", + "closeButton": { + "hoverBackground": "{info.200}", + "focusRing": { + "color": "{focusRing.color}", + "shadow": "{focusRing.shadow}" + } + } + }, + "success": { + "background": "{success.50}", + "borderColor": "{success.500}", + "color": "{text.color}", + "detailColor": "{text.color}", + "shadow": "{overlay.popover.shadow}", + "closeButton": { + "hoverBackground": "{success.200}", + "focusRing": { + "color": "{focusRing.color}", + "shadow": "{focusRing.shadow}" + } + } + }, + "warn": { + "background": "{warn.50}", + "borderColor": "{warn.500}", + "color": "{text.color}", + "detailColor": "{text.color}", + "shadow": "{overlay.popover.shadow}", + "closeButton": { + "hoverBackground": "{warn.200}", + "focusRing": { + "color": "{focusRing.color}", + "shadow": "none" + } + } + }, + "error": { + "background": "{error.50}", + "borderColor": "{error.500}", + "color": "{text.color}", + "detailColor": "{text.color}", + "shadow": "{overlay.popover.shadow}", + "closeButton": { + "hoverBackground": "{error.200}", + "focusRing": { + "color": "{focusRing.color}", + "shadow": "{focusRing.shadow}" + } + } + }, + "secondary": { + "shadow": "{overlay.popover.shadow}" + }, + "contrast": { + "shadow": "{overlay.popover.shadow}" + } + } + }, + "root": { + "width": "{messages.width}", + "borderWidth": "{feedback.width.100}", + "borderRadius": "{content.borderRadius}", + "transitionDuration": "{feedback.transitionDuration}" + }, + "icon": { + "size": "{feedback.icon.size.500}" + }, + "content": { + "padding": "{feedback.padding.200}", + "gap": "{feedback.gap.400}" + }, + "text": { + "gap": "{feedback.gap.100}" + }, + "summary": { + "fontWeight": "{fonts.fontWeight.bold}", + "fontSize": "{fonts.fontSize.300}" + }, + "detail": { + "fontWeight": "{fonts.fontWeight.regular}", + "fontSize": "{fonts.fontSize.200}" + }, + "closeButton": { + "width": "{feedback.icon.size.400}", + "height": "{feedback.icon.size.400}", + "borderRadius": "{controls.borderRadius.100}", + "focusRing": { + "width": "{focusRing.width}", + "style": "{focusRing.style}", + "offset": "{focusRing.offset}" + } + }, + "closeIcon": { + "size": "{feedback.icon.size.200}" + } + }, + "tag": { + "colorScheme": { + "light": { + "primary": { + "background": "{primary.selectedBackground}", + "color": "{text.color}" + }, + "secondary": { + "background": "{surface.200}", + "color": "{text.color}" + }, + "success": { + "background": "{success.400}", + "color": "{success.900}" + }, + "info": { + "background": "{info.300}", + "color": "{info.900}" + }, + "warn": { + "background": "{warn.300}", + "color": "{warn.900}" + }, + "danger": { + "background": "{error.300}", + "color": "{error.900}" + } + } + }, + "root": { + "fontSize": "{fonts.fontSize.100}", + "fontWeight": "{fonts.fontWeight.regular}", + "padding": "{media.padding.100} {media.padding.200}", + "gap": "{media.gap.100}", + "borderRadius": "{media.size.200}", + "roundedBorderRadius": "{media.borderRadius.400}" + }, + "icon": { + "size": "{media.icon.size.100}" + } + }, + "textarea": { + "extend": { + "readonlyBackground": "{form.readonlyBackground}", + "borderWidth": "{form.borderWidth}", + "iconSize": "{form.icon.300}", + "minHeight": "{form.size.900}", + "extXlg": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{form.padding.300}", + "paddingY": "{form.padding.500}" + } + }, + "root": { + "background": "{form.background}", + "disabledBackground": "{form.disabledBackground}", + "filledBackground": "{form.filledBackground}", + "filledHoverBackground": "{form.filledHoverBackground}", + "filledFocusBackground": "{form.filledFocusBackground}", + "borderColor": "{form.borderColor}", + "hoverBorderColor": "{form.hoverBorderSecondaryColor}", + "focusBorderColor": "{form.focusBorderSecondaryColor}", + "invalidBorderColor": "{form.invalidBorderColor}", + "color": "{form.color}", + "disabledColor": "{form.disabledColor}", + "placeholderColor": "{form.placeholderColor}", + "invalidPlaceholderColor": "{form.invalidPlaceholderColor}", + "shadow": "0", + "paddingX": "{form.padding.300}", + "paddingY": "{form.padding.300}", + "borderRadius": "{form.borderRadius.200}", + "transitionDuration": "{form.transitionDuration}", + "focusRing": { + "width": "{form.focusRing.width}", + "style": "{form.focusRing.style}", + "color": "{form.focusRing.color}", + "offset": "{form.focusRing.offset}", + "shadow": "0" + }, + "sm": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{form.padding.300}", + "paddingY": "{form.padding.200}" + }, + "lg": { + "fontSize": "{fonts.fontSize.300}", + "paddingX": "{form.padding.300}", + "paddingY": "{form.padding.400}" + } + } + }, + "tieredmenu": { + "extend": { + "extSubmenu": { + "borderColor": "{content.borderColor}", + "background": "{content.background}" + }, + "iconSize": "{navigation.submenuIcon.size}", + "extItem": { + "caption": { + "gap": "{content.gap.100}", + "color": "{text.mutedColor}" + } + } + }, + "root": { + "background": "{content.background}", + "borderColor": "{transparent}", + "color": "{content.color}", + "borderRadius": "{content.borderRadius}", + "shadow": "{navigation.shadow}", + "transitionDuration": "{feedback.transitionDuration}" + }, + "list": { + "padding": "{navigation.list.padding.100}", + "gap": "{navigation.list.gap}" + }, + "item": { + "focusBackground": "{navigation.item.focusBackground}", + "activeBackground": "{navigation.item.activeBackground}", + "color": "{navigation.item.color}", + "focusColor": "{navigation.item.focusColor}", + "activeColor": "{navigation.item.activeColor}", + "padding": "{navigation.item.padding}", + "borderRadius": "{navigation.item.borderRadius}", + "gap": "{navigation.item.gap}", + "icon": { + "color": "{navigation.item.icon.color}", + "focusColor": "{navigation.item.icon.focusColor}", + "activeColor": "{navigation.item.icon.activeColor}" + } + }, + "submenu": { + "mobileIndent": "{overlay.popover.padding.100}" + }, + "separator": { + "borderColor": "{content.borderColor}" + } + }, + "timeline": { + "extend": { + "extEvent": { + "gap": "{feedback.gap.100}" + } + }, + "event": { + "minHeight": "{feedback.height.900}" + }, + "vertical": { + "eventContent": { + "padding": "0 {feedback.padding.100}" + } + }, + "horizontal": { + "eventContent": { + "padding": "{feedback.padding.100} 0" + } + }, + "eventMarker": { + "size": "{feedback.width.500}", + "borderRadius": "{content.borderRadius}", + "borderWidth": "{feedback.width.200}", + "background": "{content.background}", + "borderColor": "{primary.color}", + "content": { + "borderRadius": "{content.borderRadius}", + "size": "{feedback.width.400}", + "background": "{transparent}", + "insetShadow": "none" + } + }, + "eventConnector": { + "color": "{content.borderColor}", + "size": "{feedback.width.100}" + }, + "colorScheme": { + "light": { + "eventMarker": { + "background": "{content.background}", + "borderColor": "{primary.color}" + } + }, + "dark": { + "eventMarker": { + "background": "{content.background}", + "borderColor": "{primary.color}" + } + } + } + }, + "togglebutton": { + "extend": { + "ext": { + "gap": "{form.gap.300}" + }, + "iconSize": { + "sm": "{controls.iconOnly.200}", + "md": "{controls.iconOnly.300}", + "lg": "{controls.iconOnly.400}" + }, + "iconOnlyWidth": "{form.size.600}", + "hoverBorderColor": "{surface.300}", + "checkedHoverColor": "{text.extend.colorInverted}", + "checkedHoverBackground": "{surface.800}", + "checkedHoverBorderColor": "{surface.800}", + "extXlg": { + "padding": "{form.padding.500} {form.padding.600}", + "iconOnlyWidth": "4.0714rem" + }, + "extSm": { + "iconOnlyWidth": "2.1429rem" + }, + "extLg": { + "iconOnlyWidth": "3.5714rem" + } + }, + "colorScheme": { + "light": { + "root": { + "background": "{surface.200}", + "hoverBackground": "{surface.300}", + "borderColor": "{surface.200}", + "color": "{text.color}", + "hoverColor": "{text.color}", + "checkedBackground": "{surface.900}", + "checkedColor": "{text.extend.colorInverted}", + "checkedBorderColor": "{surface.900}", + "disabledBackground": "{form.disabledBackground}", + "disabledBorderColor": "{form.disabledBackground}", + "disabledColor": "{form.disabledColor}", + "invalidBorderColor": "{form.invalidBorderColor}" + }, + "icon": { + "color": "{text.color}", + "hoverColor": "{text.color}", + "checkedColor": "{text.extend.colorInverted}", + "disabledColor": "{form.disabledColor}" + }, + "content": { + "checkedBackground": "{transparent}" + } + } + }, + "root": { + "padding": "{form.padding.200} {form.padding.400}", + "borderRadius": "{form.borderRadius.300}", + "gap": "{form.gap.200}", + "fontWeight": "{fonts.fontWeight.demibold}", + "focusRing": { + "width": "{form.focusRing.width}", + "style": "{form.focusRing.style}", + "color": "{form.focusRing.color}", + "offset": "{form.focusRing.offset}", + "shadow": "{focusRing.shadow}" + }, + "sm": { + "fontSize": "{fonts.fontSize.200}", + "padding": "{form.padding.100} {form.padding.300}" + }, + "lg": { + "fontSize": "{fonts.fontSize.500}", + "padding": "{form.padding.400} {form.padding.600}" + }, + "transitionDuration": "{form.transitionDuration}" + }, + "content": { + "checkedShadow": "none", + "padding": "0rem", + "borderRadius": "0rem", + "sm": { + "padding": "0rem" + }, + "lg": { + "padding": "0rem" + } + } + }, + "toggleswitch": { + "colorScheme": { + "light": { + "root": { + "background": "{surface.400}", + "hoverBackground": "{surface.500}", + "disabledBackground": "{form.disabledBackground}", + "checkedBackground": "{surface.900}", + "checkedHoverBackground": "{surface.800}" + }, + "handle": { + "background": "{form.backgroundHandler}", + "hoverBackground": "{form.backgroundHandler}", + "disabledBackground": "{form.disabledColor}", + "checkedBackground": "{surface.0}", + "checkedHoverBackground": "{surface.0}", + "color": "{text.color}", + "hoverColor": "{text.color}", + "checkedColor": "{text.color}", + "checkedHoverColor": "{text.color}" + } + } + }, + "root": { + "width": "{form.size.600}", + "height": "{form.size.400}", + "borderRadius": "{form.borderRadius.300}", + "gap": "{form.gap.100}", + "borderWidth": "{form.borderWidth}", + "shadow": "none", + "focusRing": { + "width": "{form.focusRing.width}", + "style": "{form.focusRing.style}", + "color": "{form.focusRing.color}", + "offset": "{form.focusRing.offset}", + "shadow": "0" + }, + "borderColor": "{transparent}", + "hoverBorderColor": "{transparent}", + "checkedBorderColor": "{transparent}", + "checkedHoverBorderColor": "{transparent}", + "invalidBorderColor": "{form.invalidBorderColor}", + "transitionDuration": "{form.transitionDuration}", + "slideDuration": "{form.transitionDuration}" + }, + "handle": { + "borderRadius": "{form.borderRadius.300}", + "size": "{form.size.300}" + } + }, + "tooltip": { + "colorScheme": { + "light": { + "root": { + "background": "{surface.900}", + "color": "{text.extend.colorInverted}" + } + } + }, + "root": { + "maxWidth": "{overlay.width}", + "gutter": "{feedback.gap.100}", + "shadow": "{overlay.popover.shadow}", + "padding": "{feedback.padding.100} {feedback.padding.200} ", + "borderRadius": "{overlay.popover.borderRadius}" + } + }, + "tree": { + "root": { + "background": "{content.background}", + "color": "{content.color}", + "padding": "{data.padding.400}", + "gap": "{data.gap.100}", + "indent": "{data.padding.400}" + }, + "node": { + "padding": "{data.padding.200} {data.padding.300}", + "color": "{text.color}", + "selectedColor": "{text.extend.colorInverted}", + "gap": "{data.gap.100}" + }, + "nodeIcon": { + "selectedColor": "{text.extend.colorInverted}" + }, + "nodeToggleButton": { + "borderRadius": "{data.borderRadius}", + "size": "{data.icon.size.400}", + "selectedHoverBackground": "{surface.900}" + }, + "loadingIcon": { + "size": "{data.icon.size.100}" + }, + "filter": { + "margin": "0 0 {data.padding.200} 0" + } + }, + "overlaybadge": { + "root": { + "outline": { + "width": "0rem", + "color": "{transparent}" + } + } + } + } +} diff --git a/scripts/tokens/build_tokens.py b/scripts/tokens/build_tokens.py new file mode 100644 index 00000000..7357d640 --- /dev/null +++ b/scripts/tokens/build_tokens.py @@ -0,0 +1,23 @@ +import json, re, copy +orig=json.load(open("src/lib/providers/prime-preset/tokens/tokens.json")) +canon=json.load(open("docs/superpowers/specs/prebuild-tokens.json")) +def strip_color(o): + if isinstance(o,str): return re.sub(r"\{color\.([^}]+)\}", r"{\1}", o) + if isinstance(o,dict): return {k:strip_color(v) for k,v in o.items()} + if isinstance(o,list): return [strip_color(x) for x in o] + return o +def merge(a,b): + out=copy.deepcopy(a) + for k,v in b.items(): + out[k]=merge(out[k],v) if (k in out and isinstance(out[k],dict) and isinstance(v,dict)) else copy.deepcopy(v) + return out +prim=copy.deepcopy(orig["primitive"]); prim["size"]=copy.deepcopy(canon["primitive"]["size"]) +sem=copy.deepcopy(orig["semantic"]) # сохраняем старый colorScheme + бакеты = backward-compat для Aura/CSS +sem["dimension"]=strip_color(canon["semantic"]["dimension"]) +sem["typography"]=strip_color(canon["semantic"]["typography"]) +sem["shadow"]=strip_color(canon["semantic"]["shadow"]) +sem["colorScheme"]["light"]=merge(sem["colorScheme"]["light"], strip_color(canon["semantic"]["color"]["light"])) +sem["colorScheme"]["dark"]=merge(sem["colorScheme"]["dark"], strip_color(canon["semantic"]["color"]["dark"])) +out={"primitive":prim,"semantic":sem,"components":strip_color(canon["components"])} +json.dump(out, open("src/lib/providers/prime-preset/tokens/tokens.migrated.json","w"), ensure_ascii=False, indent=2) +print("ok") diff --git a/scripts/tokens/repoint_primitive.py b/scripts/tokens/repoint_primitive.py new file mode 100644 index 00000000..e1c60ad0 --- /dev/null +++ b/scripts/tokens/repoint_primitive.py @@ -0,0 +1,14 @@ +import json +m=json.load(open("docs/superpowers/specs/2026-06-17-primitive-remap.json")) +f="src/lib/providers/prime-preset/tokens/tokens.json" +t=json.load(open(f)) +def fix(o): + if isinstance(o,str): + for old,new in m.items(): o=o.replace("{"+old+"}","{"+new+"}") + return o + if isinstance(o,dict): return {k:fix(v) for k,v in o.items()} + if isinstance(o,list): return [fix(x) for x in o] + return o +t=fix(t) +for k in ("spacing","sizing","borderWidth","borderRadius"): t["primitive"].pop(k,None) +json.dump(t,open(f,"w"),ensure_ascii=False,indent=2); print("ok, primitive keys:", list(t["primitive"].keys())) diff --git a/scripts/tokens/validate.py b/scripts/tokens/validate.py new file mode 100644 index 00000000..31b973ef --- /dev/null +++ b/scripts/tokens/validate.py @@ -0,0 +1,69 @@ +import json, re, sys +# Эталон значений = pre-migration снимок (фикстура). Можно переопределить argv[2]. +# Использование: python3 validate.py [] +DEFAULT_BASE="scripts/tokens/baseline.json" +def get(t,p): + c=t + for x in p.split("."): + c=c.get(x) if isinstance(c,dict) else None + if c is None: return None + return c +def leaves(d,p=""): + for k,v in d.items(): + pp=p+"."+k if p else k + if isinstance(v,dict): yield from leaves(v,pp) + elif isinstance(v,str): yield pp,v +def mkres(t,mode): + P=t["primitive"];S=t["semantic"];CS=get(S,"colorScheme.%s"%mode) or {};CL=get(S,"color.%s"%mode) or {} + def r(val,d=0): + if not isinstance(val,str) or d>30: return val + def rp(m): + ref=m.group(1);root=ref.split(".")[0] + node=get(CL,ref[6:]) if root=="color" else (get(P,ref) or get(S,ref) or get(CS,ref) or get(t["components"],ref)) + if node is None or isinstance(node,dict): return m.group(0) + return r(node,d+1) + return re.sub(r"\{([^}]+)\}",rp,val) + return r +def main(cand, base_path): + base=json.load(open(base_path)); new=json.load(open(cand)) + if base_path==cand: + print("WARN: baseline == candidate — EQUIV-проверка вырождена (сравнение файла с собой)") + # equivalence + for mode in ("light","dark"): + rb=mkres(base,mode); rn=mkres(new,mode) + ob=dict(leaves(base["components"])); on=dict(leaves(new["components"])) + same=diff=0 + for path in set(ob)&set(on): + a=rb(ob[path]).strip().lower(); b=rn(on[path]).strip().lower() + if "{" in a or "{" in b: continue + if a==b: same+=1 + elif "0.000" in a and "0.000" in b: same+=1 + else: diff+=1 + print(f"EQUIV {mode}: same={same} diffs={diff}") + if diff>0: globals()['FAIL']=True + # dangling + R11 + PRIM=set(new["primitive"].keys()); SEM=set(new["semantic"].keys()) + CL=get(new["semantic"],"color.light") or {} + CS=get(new["semantic"],"colorScheme.light") or {} + def resolves(r): + root=r.split(".")[0] + if root=="color": return get(CL,r[6:]) is not None + # любой формат: primitive | semantic top-level | colorScheme.light | color.light | component + return (get(new["primitive"],r) is not None or get(new["semantic"],r) is not None + or get(CS,r) is not None or get(CL,r) is not None or get(new["components"],r) is not None) + refs=[] + def walk(d): + for v in d.values(): + if isinstance(v,dict): walk(v) + elif isinstance(v,str): refs.extend(re.findall(r"\{([^}]+)\}",v)) + walk(new["components"]) + dang=[r for r in refs if not resolves(r)] + prim_refs=[r for r in refs if r.split(".")[0] in PRIM] + print(f"DANGLING={len(dang)} {dang[:5]}") + print(f"R11_PRIMITIVE_REFS={len(prim_refs)} {sorted(set(prim_refs))[:5]}") + if dang: globals()['FAIL']=True +if __name__=="__main__": + cand=sys.argv[1] + base=sys.argv[2] if len(sys.argv)>2 else DEFAULT_BASE + FAIL=False; main(cand, base) + sys.exit(1 if FAIL else 0) diff --git a/src/lib/components/accordion/accordion.figma.md b/src/lib/components/accordion/accordion.figma.md new file mode 100644 index 00000000..fb091e40 --- /dev/null +++ b/src/lib/components/accordion/accordion.figma.md @@ -0,0 +1,132 @@ +--- +component: ExtraAccordion +selector: extra-accordion +import: + symbol: ExtraAccordionComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: 'Khh7arsuXss3ncqy1Dz3OZ' + nodeId: '1153:3084' + componentKey: '6d041d9db66babf7fe442165f3ab97f9bea7710a' + name: '' +status: stable +updated: '2026-06-22' +--- + +## Overview + +`ExtraAccordionComponent` — компонент аккордеона, который группирует связанный контент в вертикальный набор раскрываемых/сворачиваемых секций. Экономит место при большом объёме информации и поддерживает прогрессивное раскрытие. Оборачивает PrimeNG `p-accordion` с под-элементами `p-accordion-panel`, `p-accordion-header` и `p-accordion-content`. + +Компонент соответствует Figma-компоненту `` (nodeId `1153:3084`, fileKey `Khh7arsuXss3ncqy1Dz3OZ`, библиотека «UI Kit (DS) v2.0»). В отличие от диалога, содержимое задаётся декларативно через массив `items`, а не через слоты проекции контента — каждая секция описывается объектом `ExtraAccordionItem`. + +## Props mapping + +| Свойство | Тип | По умолчанию | Описание | +|----------|-----|--------------|---------| +| `items` | `ExtraAccordionItem[]` | `[]` | Массив секций аккордеона; каждый элемент рендерится как отдельная панель с заголовком и содержимым | +| `multiple` | `boolean` | `false` | Разрешить одновременное раскрытие нескольких панелей — соответствует Figma-режиму single/multiple | +| `activeValue` | `string \| null` | `'0'` | Значение (`value`) изначально раскрытой панели; `null` — все панели свёрнуты | + +> `activeValueChange` — `@Output() EventEmitter`. Используйте синтаксис `[(activeValue)]` для двусторонней привязки активной секции. + +Структура одного элемента `ExtraAccordionItem`: + +| Поле | Тип | Описание | +|------|-----|---------| +| `value` | `string` | Уникальный идентификатор панели (ключ раскрытия и `track` в цикле) | +| `header` | `string` | Текст заголовка панели | +| `content` | `string` | Текстовое содержимое раскрываемой панели | +| `icon` | `string` (опц.) | CSS-класс иконки в заголовке; доступные иконки — [icons.md](../../figma-code-connect/icons.md) | +| `disabled` | `boolean` (опц.) | Заблокировать панель — она недоступна для раскрытия | + +## Variants + +### Одиночное раскрытие (single, по умолчанию) + +Figma: ``, режим single — раскрыта ровно одна панель. + +```html + +``` + +```ts +import { ExtraAccordionComponent, ExtraAccordionItem } from '@cdek-it/angular-ui-kit'; + +// В компоненте: +items: ExtraAccordionItem[] = [ + { value: '0', header: 'Данные отправления', content: 'Заказ №ЦД-00123456' }, + { value: '1', header: 'Маршрут доставки', content: 'Москва → Новосибирск' }, +]; +``` + +### Множественное раскрытие (multiple) + +Figma: ``, режим multiple — одновременно могут быть раскрыты несколько панелей. + +```html + +``` + +```ts +import { ExtraAccordionComponent, ExtraAccordionItem } from '@cdek-it/angular-ui-kit'; +``` + +### С заблокированной панелью (disabled) + +Заблокированная панель задаётся через `disabled: true` в соответствующем `ExtraAccordionItem` и недоступна для раскрытия. + +```html + +``` + +```ts +import { ExtraAccordionComponent, ExtraAccordionItem } from '@cdek-it/angular-ui-kit'; + +// В компоненте: +items: ExtraAccordionItem[] = [ + { value: '0', header: 'Данные отправления', content: 'Заказ №ЦД-00123456' }, + { value: '1', header: 'Документы (недоступно)', content: 'Недоступно', disabled: true }, +]; +``` + +## Slots + +Не используются. Аккордеон не применяет проекцию содержимого — структура секций задаётся декларативно через массив `items`. + +Внутренняя композиция каждой секции (рендерится компонентом автоматически по элементу `ExtraAccordionItem`): + +| Часть | PrimeNG-узел | Источник | +|-------|--------------|----------| +| Панель | `p-accordion-panel` | один элемент массива `items` (`value`, `disabled`) | +| Заголовок | `p-accordion-header` | `item.header` + опциональная `item.icon` | +| Содержимое | `p-accordion-content` | `item.content` | + +## Related + +- [Button](../button/button.figma.md) — кнопки действий внутри или рядом с панелями +- [Иконки](../../figma-code-connect/icons.md) — CSS-классы иконок для заголовков панелей +- [Токены](../../figma-code-connect/tokens.md) — цветовые токены поверхности и границ панелей +- [Conventions](../../figma-code-connect/conventions.md) — соглашения маппинга Figma → Angular + +## Do / Don't + +**Do:** +- Задавайте уникальный `value` для каждого элемента `items` — он используется как ключ раскрытия и `track`. +- Используйте `[(activeValue)]` для двусторонней синхронизации раскрытой секции с состоянием компонента. +- Включайте `[multiple]="true"`, когда пользователю полезно сравнивать содержимое нескольких секций одновременно. +- Помечайте недоступные секции через `disabled: true` в `ExtraAccordionItem`, а не скрывайте их полностью. + +**Don't:** +- Не используйте аккордеон для критичной информации, которая должна быть всегда видна. +- Не путайте с Tabs — вкладки показывают параллельные равноправные разделы, а аккордеон раскрывает секции контента. +- Не задавайте `activeValue`, не существующий среди `value` элементов `items` — ни одна панель не раскроется. diff --git a/src/lib/components/autocomplete/autocomplete.figma.md b/src/lib/components/autocomplete/autocomplete.figma.md new file mode 100644 index 00000000..257cdc11 --- /dev/null +++ b/src/lib/components/autocomplete/autocomplete.figma.md @@ -0,0 +1,255 @@ +--- +component: ExtraAutoComplete +selector: extra-auto-complete +import: + symbol: ExtraAutoCompleteComponent + from: '@cdek-it/angular-ui-kit' +figma: + fileKey: 'Khh7arsuXss3ncqy1Dz3OZ' + nodeId: '9370:42021' + componentKey: 'bfe33336c5b6261f311895a42da1f3a8a92ae4d4' + name: '' +status: stable +updated: '2026-06-22' +--- + +## Overview + +`ExtraAutoCompleteComponent` — текстовое поле с выпадающим списком подсказок, фильтруемым по мере ввода (паттерн combobox). Подходит для свободного ввода с автодополнением, длинных списков, асинхронной подгрузки опций по вводу и множественного выбора тегами. Оборачивает PrimeNG `p-autocomplete` и расширяет его размерами и режимом `fluid`. Реализует `ControlValueAccessor` и работает с `[(ngModel)]` и `[formControl]` «из коробки». + +Компонент соответствует Figma-компоненту `` (component set, nodeId `9370:42021`, fileKey `Khh7arsuXss3ncqy1Dz3OZ`, библиотека «UI Kit (DS) v2.0»). Варианты задаются Figma-свойствами `type` (`dropdown | group | multi-select`) и `state` (`default | opened`). Выпадающая панель, пункты и группы вынесены в отдельные Figma-узлы ``, `` и ``. + +В отличие от `' +status: stable +updated: '2026-06-22' +--- + +## Overview + +`ExtraSelectComponent` — выпадающий список для выбора одного значения из набора опций. Оборачивает PrimeNG `p-select` и расширяет его размерами, фильтрацией, группировкой, режимом плавающей метки и кастомными шаблонами пунктов. Реализует `ControlValueAccessor` и работает с `[(ngModel)]` и `[formControl]` «из коробки». + +Компонент соответствует Figma-компоненту ``, state=default, has-placeholder=true, has-floatlabel=false — nodeId `361:1603` + +```html + +``` + +### С привязкой значения (optionValue) + +Figma: ``, show-clear=true + +```html + +``` + +### С группировкой опций (group) + +Figma: `` — заголовок группы в панели + +```html + +``` + +### С плавающей меткой (has-floatlabel) + +Figma: ``, state=default + +```html + +``` + +### Readonly (только для чтения) + +Figma: ``, state=disabled, has-placeholder=true, has-floatlabel=false — nodeId `361:1562` + +```html + +``` + +```ts +// Управляется через FormControl: +disabledControl = new FormControl({ value: null, disabled: true }); +``` + +### Невалидное состояние (formControl + валидация) + +Figma: `