npm - @central-design-system/components - Versions diffs - 4.0.0-alpha.2 → 4.0.0-alpha.4 - Mend

@central-design-system/components 4.0.0-alpha.2 → 4.0.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (478) hide show

package/llms/llms-migration.txt CHANGED Viewed

@@ -1,6 +1,6 @@
 # Central Design System — миграция CDS 3 → CDS 4
-> Версия: 4.0.0-alpha.2
+> Версия: 4.0.0-alpha.4
 > Полный гайд перехода: breaking-изменения, переименования, deprecations и шаги миграции.
 > Сгенерировано автоматически (`bun run generate:meta` → `bun run generate:llms`). Не редактировать вручную.
@@ -12,7 +12,7 @@
 Этот документ — **живой** migration guide: записи добавляются по мере появления
 breaking-изменений в alpha/beta релизах CDS 4.
-> Версии: CDS 3 — `3.10.1` (стабильная), CDS 4 — `4.0.0-alpha.2` (в разработке).
+> Версии: CDS 3 — `3.10.1` (стабильная), CDS 4 — `4.0.0-alpha.4` (в разработке).
 ## Как читать этот документ

package/llms/llms-tokens.txt CHANGED Viewed

@@ -1,6 +1,6 @@
 # Central Design System (CDS 4) — токены и темы
-> Версия: 4.0.0-alpha.2
+> Версия: 4.0.0-alpha.4
 > Три уровня токенов: палитра-примитивы, цветовые токены тем (`--cds-color-*`) и локальные переменные компонентов.
 > Сгенерировано автоматически (`bun run generate:meta` → `bun run generate:llms`). Не редактировать вручную.
@@ -504,6 +504,248 @@ const cds = createCds({ theme: { defaultTheme: 'cdsLight' } });
 | `--cds-color-brand-primary-active` | `#014F77` |
 | `--cds-color-brand-primary` | `#0287CA` |
+## lumaLight (светлая)
+| Токен | Значение |
+| --- | --- |
+| `--cds-color-surface-secondary` | `#ECEEF2` |
+| `--cds-color-surface-primary` | `#FFFFFF` |
+| `--cds-color-surface-overlay` | `#272A3080` |
+| `--cds-color-surface-inverse` | `#404653` |
+| `--cds-color-surface-elevated` | `#FFFFFF` |
+| `--cds-color-status-warning-surface` | `#A6840A` |
+| `--cds-color-status-warning-line` | `#B69210` |
+| `--cds-color-status-warning-fill-hover` | `#DEC048` |
+| `--cds-color-status-warning-fill` | `#F2DB82` |
+| `--cds-color-status-warning-content` | `#584001` |
+| `--cds-color-status-success-surface` | `#3C9C2C` |
+| `--cds-color-status-success-line` | `#50A946` |
+| `--cds-color-status-success-fill-hover` | `#97D283` |
+| `--cds-color-status-success-fill` | `#BCE8AB` |
+| `--cds-color-status-success-content` | `#005005` |
+| `--cds-color-status-progress-surface` | `#198FD8` |
+| `--cds-color-status-progress-line` | `#2B9DE9` |
+| `--cds-color-status-progress-fill-hover` | `#90C8FF` |
+| `--cds-color-status-progress-fill` | `#C3DFFF` |
+| `--cds-color-status-progress-content` | `#004871` |
+| `--cds-color-status-info-surface` | `#828A97` |
+| `--cds-color-status-info-line` | `#9298A4` |
+| `--cds-color-status-info-fill-hover` | `#C0C3CB` |
+| `--cds-color-status-info-fill` | `#DADDE2` |
+| `--cds-color-status-info-content` | `#404653` |
+| `--cds-color-status-indication-surface` | `#D1453F` |
+| `--cds-color-status-indication-line` | `#D1453F` |
+| `--cds-color-status-indication-fill-hover` | `#FFAE9E` |
+| `--cds-color-status-indication-fill` | `#FFD1C6` |
+| `--cds-color-status-indication-content` | `#831118` |
+| `--cds-color-status-danger-surface` | `#D1453F` |
+| `--cds-color-status-danger-line` | `#D1453F` |
+| `--cds-color-status-danger-fill-hover` | `#FFAE9E` |
+| `--cds-color-status-danger-fill` | `#FFD1C6` |
+| `--cds-color-status-danger-content` | `#831118` |
+| `--cds-color-page-primary` | `#ECEEF2` |
+| `--cds-color-other-teal-surface` | `#3A969E` |
+| `--cds-color-other-teal-line` | `#3CA5AD` |
+| `--cds-color-other-teal-fill-hover` | `#48D6DB` |
+| `--cds-color-other-teal-fill` | `#A1E9E9` |
+| `--cds-color-other-teal-content` | `#022B2F` |
+| `--cds-color-other-purple-surface` | `#A96FDE` |
+| `--cds-color-other-purple-line` | `#B381E1` |
+| `--cds-color-other-purple-fill-hover` | `#D6B8EF` |
+| `--cds-color-other-purple-fill` | `#E8D5F6` |
+| `--cds-color-other-purple-content` | `#2F0F50` |
+| `--cds-color-other-pink-surface` | `#D25CB8` |
+| `--cds-color-other-pink-line` | `#DB70C4` |
+| `--cds-color-other-pink-fill-hover` | `#F3ACE7` |
+| `--cds-color-other-pink-fill` | `#F8D1F2` |
+| `--cds-color-other-pink-content` | `#420D35` |
+| `--cds-color-other-lime-surface` | `#78922C` |
+| `--cds-color-other-lime-line` | `#85A12D` |
+| `--cds-color-other-lime-fill-hover` | `#B6CC65` |
+| `--cds-color-other-lime-fill` | `#D4E490` |
+| `--cds-color-other-lime-content` | `#202901` |
+| `--cds-color-other-lemon-surface` | `#8E8C23` |
+| `--cds-color-other-lemon-line` | `#9D9B25` |
+| `--cds-color-other-lemon-fill-hover` | `#CBC65F` |
+| `--cds-color-other-lemon-fill` | `#E6DF83` |
+| `--cds-color-other-lemon-content` | `#282601` |
+| `--cds-color-other-indigo-surface` | `#807EEC` |
+| `--cds-color-other-indigo-line` | `#918DEC` |
+| `--cds-color-other-indigo-fill-hover` | `#C3BDF9` |
+| `--cds-color-other-indigo-fill` | `#DDD9FC` |
+| `--cds-color-other-indigo-content` | `#1F1F55` |
+| `--cds-color-other-cyan-surface` | `#439786` |
+| `--cds-color-other-cyan-line` | `#48A692` |
+| `--cds-color-other-cyan-fill-hover` | `#58D8BE` |
+| `--cds-color-other-cyan-fill` | `#9FEBD8` |
+| `--cds-color-other-cyan-content` | `#052B24` |
+| `--cds-color-other-chocolate-surface` | `#AC7F58` |
+| `--cds-color-other-chocolate-line` | `#B78F6D` |
+| `--cds-color-other-chocolate-fill-hover` | `#D8BEA9` |
+| `--cds-color-other-chocolate-fill` | `#E7D9CC` |
+| `--cds-color-other-chocolate-content` | `#361D01` |
+| `--cds-color-line-tertiary-hover` | `#AFB3BD` |
+| `--cds-color-line-tertiary` | `#CCCFD6` |
+| `--cds-color-line-selected-hover` | `#2978D4` |
+| `--cds-color-line-selected` | `#4D98F9` |
+| `--cds-color-line-secondary-hover` | `#9298A4` |
+| `--cds-color-line-secondary` | `#AFB3BD` |
+| `--cds-color-line-primary-hover` | `#727987` |
+| `--cds-color-line-primary` | `#9298A4` |
+| `--cds-color-line-focus-outline` | `#A4C5FE` |
+| `--cds-color-line-focus` | `#4D98F9` |
+| `--cds-color-line-elevated` | `#FFFFFF00` |
+| `--cds-color-line-disable` | `#C0C3CB` |
+| `--cds-color-fill-selected-hover` | `#2978D4` |
+| `--cds-color-fill-selected` | `#4D98F9` |
+| `--cds-color-fill-secondary-hover` | `#CCCFD6` |
+| `--cds-color-fill-secondary-active` | `#C0C3CB` |
+| `--cds-color-fill-secondary` | `#DADDE2` |
+| `--cds-color-fill-primary-hover` | `#DADDE2` |
+| `--cds-color-fill-primary-active` | `#CCCFD6` |
+| `--cds-color-fill-primary` | `#FFFFFF` |
+| `--cds-color-fill-elevated` | `#FFFFFF` |
+| `--cds-color-fill-disable` | `#DADDE2` |
+| `--cds-color-content-tertiary` | `#727987` |
+| `--cds-color-content-secondary` | `#4F5666` |
+| `--cds-color-content-primary` | `#212631` |
+| `--cds-color-content-placeholder` | `#828A97` |
+| `--cds-color-content-on-dark` | `#FFFFFF` |
+| `--cds-color-content-link-visited` | `#955EC8` |
+| `--cds-color-content-link` | `#2978D4` |
+| `--cds-color-content-inverse` | `#FFFFFF` |
+| `--cds-color-content-disable` | `#9298A4` |
+| `--cds-color-brand-secondary-hover` | `#F7CFDA` |
+| `--cds-color-brand-secondary-border` | `#FBE7EC` |
+| `--cds-color-brand-secondary-active` | `#F0A8BC` |
+| `--cds-color-brand-secondary` | `#FBE7EC` |
+| `--cds-color-brand-primary-hover` | `#D2154B` |
+| `--cds-color-brand-primary-content` | `#7D0E27` |
+| `--cds-color-brand-primary-border` | `#C71B3C` |
+| `--cds-color-brand-primary-active` | `#E0476E` |
+| `--cds-color-brand-primary` | `#C71B3C` |
+## lumaDark (тёмная)
+| Токен | Значение |
+| --- | --- |
+| `--cds-color-surface-secondary` | `#33373F` |
+| `--cds-color-surface-primary` | `#272A30` |
+| `--cds-color-surface-overlay` | `#272A30CC` |
+| `--cds-color-surface-inverse` | `#DCDDE3` |
+| `--cds-color-surface-elevated` | `#33373F` |
+| `--cds-color-status-warning-surface` | `#C9A449` |
+| `--cds-color-status-warning-line` | `#BE9737` |
+| `--cds-color-status-warning-fill-hover` | `#8A6502` |
+| `--cds-color-status-warning-fill` | `#614301` |
+| `--cds-color-status-warning-content` | `#EADBBA` |
+| `--cds-color-status-success-surface` | `#6EBA66` |
+| `--cds-color-status-success-line` | `#5DAF55` |
+| `--cds-color-status-success-fill-hover` | `#1F7C22` |
+| `--cds-color-status-success-fill` | `#0D5512` |
+| `--cds-color-status-success-content` | `#CAE4C4` |
+| `--cds-color-status-progress-surface` | `#4DB1FF` |
+| `--cds-color-status-progress-line` | `#0EA4F8` |
+| `--cds-color-status-progress-fill-hover` | `#0172AC` |
+| `--cds-color-status-progress-fill` | `#014F77` |
+| `--cds-color-status-progress-content` | `#C7E0FF` |
+| `--cds-color-status-info-surface` | `#A5A9B2` |
+| `--cds-color-status-info-line` | `#989DA8` |
+| `--cds-color-status-info-fill-hover` | `#666C79` |
+| `--cds-color-status-info-fill` | `#454951` |
+| `--cds-color-status-info-content` | `#DCDDE3` |
+| `--cds-color-status-indication-surface` | `#FF9E92` |
+| `--cds-color-status-indication-line` | `#FF9E92` |
+| `--cds-color-status-indication-fill-hover` | `#B8423D` |
+| `--cds-color-status-indication-fill` | `#822825` |
+| `--cds-color-status-indication-content` | `#FFD2CC` |
+| `--cds-color-status-danger-surface` | `#FF9E92` |
+| `--cds-color-status-danger-line` | `#FF9E92` |
+| `--cds-color-status-danger-fill-hover` | `#B8423D` |
+| `--cds-color-status-danger-fill` | `#822825` |
+| `--cds-color-status-danger-content` | `#FFD2CC` |
+| `--cds-color-page-primary` | `#1A1A1A` |
+| `--cds-color-other-teal-surface` | `#0ABACE` |
+| `--cds-color-other-teal-line` | `#01ACBF` |
+| `--cds-color-other-teal-fill-hover` | `#007886` |
+| `--cds-color-other-teal-fill` | `#04525B` |
+| `--cds-color-other-teal-content` | `#D4F2F7` |
+| `--cds-color-other-purple-surface` | `#B79AF5` |
+| `--cds-color-other-purple-line` | `#AE8BEE` |
+| `--cds-color-other-purple-fill-hover` | `#8457B8` |
+| `--cds-color-other-purple-fill` | `#5E3882` |
+| `--cds-color-other-purple-content` | `#F3E9FE` |
+| `--cds-color-other-pink-surface` | `#E889D1` |
+| `--cds-color-other-pink-line` | `#E078C7` |
+| `--cds-color-other-pink-fill-hover` | `#AC4296` |
+| `--cds-color-other-pink-fill` | `#7A2869` |
+| `--cds-color-other-pink-content` | `#FDE6F6` |
+| `--cds-color-other-lime-surface` | `#9BB24D` |
+| `--cds-color-other-lime-line` | `#8DA63B` |
+| `--cds-color-other-lime-fill-hover` | `#5B7400` |
+| `--cds-color-other-lime-fill` | `#3D4F00` |
+| `--cds-color-other-lime-content` | `#EBEED8` |
+| `--cds-color-other-lemon-surface` | `#ABAE48` |
+| `--cds-color-other-lemon-line` | `#9DA235` |
+| `--cds-color-other-lemon-fill-hover` | `#6A7100` |
+| `--cds-color-other-lemon-fill` | `#484C01` |
+| `--cds-color-other-lemon-content` | `#EEEED9` |
+| `--cds-color-other-indigo-surface` | `#96A4FF` |
+| `--cds-color-other-indigo-line` | `#8B95F9` |
+| `--cds-color-other-indigo-fill-hover` | `#6362C5` |
+| `--cds-color-other-indigo-fill` | `#40428D` |
+| `--cds-color-other-indigo-content` | `#EBEBFF` |
+| `--cds-color-other-cyan-surface` | `#0ABEA3` |
+| `--cds-color-other-cyan-line` | `#0AB098` |
+| `--cds-color-other-cyan-fill-hover` | `#067A69` |
+| `--cds-color-other-cyan-fill` | `#005348` |
+| `--cds-color-other-cyan-content` | `#D5F3EB` |
+| `--cds-color-other-chocolate-surface` | `#D49E6D` |
+| `--cds-color-other-chocolate-line` | `#CA915C` |
+| `--cds-color-other-chocolate-fill-hover` | `#985E1F` |
+| `--cds-color-other-chocolate-fill` | `#6E3B01` |
+| `--cds-color-other-chocolate-content` | `#FAEADB` |
+| `--cds-color-line-tertiary-hover` | `#7A808E` |
+| `--cds-color-line-tertiary` | `#565D67` |
+| `--cds-color-line-selected-hover` | `#92BAFE` |
+| `--cds-color-line-selected` | `#5D9DFC` |
+| `--cds-color-line-secondary-hover` | `#989DA8` |
+| `--cds-color-line-secondary` | `#7A808E` |
+| `--cds-color-line-primary-hover` | `#B5B7C0` |
+| `--cds-color-line-primary` | `#989DA8` |
+| `--cds-color-line-focus-outline` | `#1159B5` |
+| `--cds-color-line-focus` | `#5D9DFC` |
+| `--cds-color-line-elevated` | `#828A9766` |
+| `--cds-color-line-disable` | `#666C79` |
+| `--cds-color-fill-selected-hover` | `#92BAFE` |
+| `--cds-color-fill-selected` | `#5D9DFC` |
+| `--cds-color-fill-secondary-hover` | `#565D67` |
+| `--cds-color-fill-secondary-active` | `#666C79` |
+| `--cds-color-fill-secondary` | `#454951` |
+| `--cds-color-fill-primary-hover` | `#454951` |
+| `--cds-color-fill-primary-active` | `#565D67` |
+| `--cds-color-fill-primary` | `#272A30` |
+| `--cds-color-fill-elevated` | `#7A808E` |
+| `--cds-color-fill-disable` | `#454951` |
+| `--cds-color-content-tertiary` | `#B5B7C0` |
+| `--cds-color-content-secondary` | `#CFD2D7` |
+| `--cds-color-content-primary` | `#ECECEF` |
+| `--cds-color-content-placeholder` | `#A5A9B2` |
+| `--cds-color-content-on-dark` | `#F9F9FC` |
+| `--cds-color-content-link-visited` | `#C0AEF8` |
+| `--cds-color-content-link` | `#92BAFE` |
+| `--cds-color-content-inverse` | `#1A1A1A` |
+| `--cds-color-content-disable` | `#989DA8` |
+| `--cds-color-brand-secondary-hover` | `#650B25` |
+| `--cds-color-brand-secondary-border` | `#8A1034` |
+| `--cds-color-brand-secondary-active` | `#8A1034` |
+| `--cds-color-brand-secondary` | `#3A0715` |
+| `--cds-color-brand-primary-hover` | `#8A1034` |
+| `--cds-color-brand-primary-content` | `#FFD9E1` |
+| `--cds-color-brand-primary-border` | `#D2154B` |
+| `--cds-color-brand-primary-active` | `#650B25` |
+| `--cds-color-brand-primary` | `#D2154B` |
 ## promoLight (светлая)
 | Токен | Значение |

package/llms/llms.txt CHANGED Viewed

@@ -1,6 +1,6 @@
 # Central Design System (CDS 4)
-> Версия: 4.0.0-alpha.2. Модульная библиотека Vue 3 UI-компонентов `@central-design-system/components`.
+> Версия: 4.0.0-alpha.4. Модульная библиотека Vue 3 UI-компонентов `@central-design-system/components`.
 > Этот файл — индекс для AI-агентов, собирающих продуктовый UI на CDS.
 > Сгенерировано автоматически (`bun run generate:meta` → `bun run generate:llms`). Не редактировать вручную.
@@ -47,7 +47,7 @@ createApp(App).use(cds).mount('#app');
   `CdsField` + `CdsLabel` + `CdsDescription` + `CdsMessages` + `CdsInput`).
 - Полный гайд миграции CDS 3 → CDS 4 — в `MIGRATION.md`.
-## Компоненты (78)
+## Компоненты (79)
 Ниже — назначение каждого компонента. Полный контракт (props / events / slots /
 exposed) и примеры — в llms-components.txt.
@@ -92,7 +92,7 @@ exposed) и примеры — в llms-components.txt.
 - **CdsTree** — Дерево показывает иерархию: разделы каталога, файлы проекта, структуру организации.
 - **CdsVirtualScroll** — Виртуальный скролл держит длинные списки быстрыми: в DOM попадают только видимые строки, а не весь массив.
-### Controls (17)
+### Controls (18)
 - **CdsAutocomplete** — Автокомплит — поле выбора из длинного списка: пользователь вводит запрос, список фильтруется на лету, совпадения подсвечиваются.
 - **CdsCheckbox** — Чекбокс включает и выключает независимую опцию: согласие с условиями, пункт в списке фильтров, настройку профиля.
@@ -103,6 +103,7 @@ exposed) и примеры — в llms-components.txt.
 - **CdsFileInput** — Поле выбора файлов: пользователь прикладывает документы кликом, перетаскиванием или вставкой из буфера обмена.
 - **CdsFileUpload** — Зона загрузки файлов: принимает файлы перетаскиванием, вставкой из буфера обмена и через системный диалог, а выбранное показывает списком с превью изображений.
 - **CdsForm** — Форма объединяет поля в одну группу: собирает их валидацию в общий статус, перехватывает отправку и умеет сбрасывать значения.
+- **CdsOtpInput** — Поле ввода одноразового кода — из SMS, письма или приложения-аутентификатора.
 - **CdsRadio** — Радиокнопка — один вариант взаимоисключающего выбора.
 - **CdsRadioGroup** — Группа радиокнопок — выбор одного варианта из короткого взаимоисключающего набора: способ оплаты, тариф, период отчёта.
 - **CdsSelect** — Селект открывает выпадающий список и позволяет выбрать одно или несколько значений из заранее известного набора: страну, статус, категорию.

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@central-design-system/components",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.4",
   "author": "magersoft",
   "description": "Luma Design System - Vue 3 UI Framework",
   "homepage": "https://cds.b2b-center.ru/",
@@ -36,6 +36,12 @@
         "default": "./dist/es/src/assets/icons/*.js"
       }
     },
+    "./browser": {
+      "import": {
+        "types": "./dist/types/entry.d.ts",
+        "default": "./dist/browser/entry.js"
+      }
+    },
     "./dist/*": "./dist/*",
     "./styles": {
       "sass": "./src/styles/common.scss",
@@ -106,6 +112,7 @@
     "build:es": "vite build --config ./build/configs/vite.es.ts",
     "build:mjs": "vite build --config ./build/configs/vite.mjs.ts",
     "build:iife": "vite build --config ./build/configs/vite.iife.ts",
+    "build:browser": "vite build --config ./build/configs/vite.browser.ts",
     "build:wc": "vite build --config ./build/configs/vite.wc.ts",
     "build:styles": "vite build --config ./build/configs/vite.styles.ts",
     "generate:meta": "npx tsx build/plugins/generate-component-meta.ts",

package/src/themes/css/lumaDark.css ADDED Viewed

@@ -0,0 +1,184 @@
+:root {
+  --cds-spacing-900: 4rem;
+  --cds-spacing-800: 3rem;
+  --cds-spacing-700: 2.5rem;
+  --cds-spacing-600: 2rem;
+  --cds-spacing-500: 1.5rem;
+  --cds-spacing-50: 0.125rem;
+  --cds-spacing-400: 1rem;
+  --cds-spacing-300: 0.75rem;
+  --cds-spacing-200: 0.5rem;
+  --cds-spacing-1100: 6rem;
+  --cds-spacing-1000: 5rem;
+  --cds-spacing-100: 0.25rem;
+  --cds-shadow-y-minus-400: 0rem;
+  --cds-shadow-y-minus-300: 0rem;
+  --cds-shadow-y-minus-200: 0rem;
+  --cds-shadow-y-minus-100: 0rem;
+  --cds-shadow-y-400: 0rem;
+  --cds-shadow-y-300: 0rem;
+  --cds-shadow-y-200: 0rem;
+  --cds-shadow-y-100: 0rem;
+  --cds-shadow-x-minus-400: 0rem;
+  --cds-shadow-x-minus-300: 0rem;
+  --cds-shadow-x-minus-200: 0rem;
+  --cds-shadow-x-minus-100: 0rem;
+  --cds-shadow-x-400: 0rem;
+  --cds-shadow-x-300: 0rem;
+  --cds-shadow-x-200: 0rem;
+  --cds-shadow-x-100: 0rem;
+  --cds-shadow-blur-400: 0rem;
+  --cds-shadow-blur-300: 0rem;
+  --cds-shadow-blur-200: 0rem;
+  --cds-shadow-blur-100: 0rem;
+  --cds-font-weight-regular: 500;
+  --cds-font-weight-bold: 700;
+  --cds-font-size-900: 3.25rem;
+  --cds-font-size-800: 2.75rem;
+  --cds-font-size-700: 2.25rem;
+  --cds-font-size-600: 1.75rem;
+  --cds-font-size-500: 1.5rem;
+  --cds-font-size-50: 0.625rem;
+  --cds-font-size-400: 1.25rem;
+  --cds-font-size-300: 1rem;
+  --cds-font-size-200: 0.875rem;
+  --cds-font-size-1100: 4.5rem;
+  --cds-font-size-1000: 3.75rem;
+  --cds-font-size-100: 0.75rem;
+  --cds-font-line-height-900: 4rem;
+  --cds-font-line-height-800: 3rem;
+  --cds-font-line-height-700: 2.5rem;
+  --cds-font-line-height-600: 2rem;
+  --cds-font-line-height-500: 1.75rem;
+  --cds-font-line-height-50: 0.75rem;
+  --cds-font-line-height-400: 1.5rem;
+  --cds-font-line-height-300: 1.25rem;
+  --cds-font-line-height-200: 1rem;
+  --cds-font-line-height-1100: 5.5rem;
+  --cds-font-line-height-1000: 4.5rem;
+  --cds-font-line-height-100: 0.875rem;
+  --cds-font-letter-spacing-500: 0.0625rem;
+  --cds-font-family: arial;
+  --cds-border-radius-300: 0.5rem;
+  --cds-border-radius-200: 0.25rem;
+  --cds-border-radius-100: 0.125rem;
+  --cds-border-200: 0.125rem;
+  --cds-border-100: 0.0625rem;
+  --cds-base-unit: 16px;
+  --cds-color-surface-secondary: 51, 55, 63;
+  --cds-color-surface-primary: 39, 42, 48;
+  --cds-color-surface-overlay: 39, 42, 48, 0.8;
+  --cds-color-surface-inverse: 220, 221, 227;
+  --cds-color-surface-elevated: 51, 55, 63;
+  --cds-color-status-warning-surface: 201, 164, 73;
+  --cds-color-status-warning-line: 190, 151, 55;
+  --cds-color-status-warning-fill-hover: 138, 101, 2;
+  --cds-color-status-warning-fill: 97, 67, 1;
+  --cds-color-status-warning-content: 234, 219, 186;
+  --cds-color-status-success-surface: 110, 186, 102;
+  --cds-color-status-success-line: 93, 175, 85;
+  --cds-color-status-success-fill-hover: 31, 124, 34;
+  --cds-color-status-success-fill: 13, 85, 18;
+  --cds-color-status-success-content: 202, 228, 196;
+  --cds-color-status-progress-surface: 77, 177, 255;
+  --cds-color-status-progress-line: 14, 164, 248;
+  --cds-color-status-progress-fill-hover: 1, 114, 172;
+  --cds-color-status-progress-fill: 1, 79, 119;
+  --cds-color-status-progress-content: 199, 224, 255;
+  --cds-color-status-info-surface: 165, 169, 178;
+  --cds-color-status-info-line: 152, 157, 168;
+  --cds-color-status-info-fill-hover: 102, 108, 121;
+  --cds-color-status-info-fill: 69, 73, 81;
+  --cds-color-status-info-content: 220, 221, 227;
+  --cds-color-status-indication-surface: 255, 158, 146;
+  --cds-color-status-indication-line: 255, 158, 146;
+  --cds-color-status-indication-fill-hover: 184, 66, 61;
+  --cds-color-status-indication-fill: 130, 40, 37;
+  --cds-color-status-indication-content: 255, 210, 204;
+  --cds-color-status-danger-surface: 255, 158, 146;
+  --cds-color-status-danger-line: 255, 158, 146;
+  --cds-color-status-danger-fill-hover: 184, 66, 61;
+  --cds-color-status-danger-fill: 130, 40, 37;
+  --cds-color-status-danger-content: 255, 210, 204;
+  --cds-color-page-primary: 26, 26, 26;
+  --cds-color-other-teal-surface: 10, 186, 206;
+  --cds-color-other-teal-line: 1, 172, 191;
+  --cds-color-other-teal-fill-hover: 0, 120, 134;
+  --cds-color-other-teal-fill: 4, 82, 91;
+  --cds-color-other-teal-content: 212, 242, 247;
+  --cds-color-other-purple-surface: 183, 154, 245;
+  --cds-color-other-purple-line: 174, 139, 238;
+  --cds-color-other-purple-fill-hover: 132, 87, 184;
+  --cds-color-other-purple-fill: 94, 56, 130;
+  --cds-color-other-purple-content: 243, 233, 254;
+  --cds-color-other-pink-surface: 232, 137, 209;
+  --cds-color-other-pink-line: 224, 120, 199;
+  --cds-color-other-pink-fill-hover: 172, 66, 150;
+  --cds-color-other-pink-fill: 122, 40, 105;
+  --cds-color-other-pink-content: 253, 230, 246;
+  --cds-color-other-lime-surface: 155, 178, 77;
+  --cds-color-other-lime-line: 141, 166, 59;
+  --cds-color-other-lime-fill-hover: 91, 116, 0;
+  --cds-color-other-lime-fill: 61, 79, 0;
+  --cds-color-other-lime-content: 235, 238, 216;
+  --cds-color-other-lemon-surface: 171, 174, 72;
+  --cds-color-other-lemon-line: 157, 162, 53;
+  --cds-color-other-lemon-fill-hover: 106, 113, 0;
+  --cds-color-other-lemon-fill: 72, 76, 1;
+  --cds-color-other-lemon-content: 238, 238, 217;
+  --cds-color-other-indigo-surface: 150, 164, 255;
+  --cds-color-other-indigo-line: 139, 149, 249;
+  --cds-color-other-indigo-fill-hover: 99, 98, 197;
+  --cds-color-other-indigo-fill: 64, 66, 141;
+  --cds-color-other-indigo-content: 235, 235, 255;
+  --cds-color-other-cyan-surface: 10, 190, 163;
+  --cds-color-other-cyan-line: 10, 176, 152;
+  --cds-color-other-cyan-fill-hover: 6, 122, 105;
+  --cds-color-other-cyan-fill: 0, 83, 72;
+  --cds-color-other-cyan-content: 213, 243, 235;
+  --cds-color-other-chocolate-surface: 212, 158, 109;
+  --cds-color-other-chocolate-line: 202, 145, 92;
+  --cds-color-other-chocolate-fill-hover: 152, 94, 31;
+  --cds-color-other-chocolate-fill: 110, 59, 1;
+  --cds-color-other-chocolate-content: 250, 234, 219;
+  --cds-color-line-tertiary-hover: 122, 128, 142;
+  --cds-color-line-tertiary: 86, 93, 103;
+  --cds-color-line-selected-hover: 146, 186, 254;
+  --cds-color-line-selected: 93, 157, 252;
+  --cds-color-line-secondary-hover: 152, 157, 168;
+  --cds-color-line-secondary: 122, 128, 142;
+  --cds-color-line-primary-hover: 181, 183, 192;
+  --cds-color-line-primary: 152, 157, 168;
+  --cds-color-line-focus-outline: 17, 89, 181;
+  --cds-color-line-focus: 93, 157, 252;
+  --cds-color-line-elevated: 130, 138, 151, 0.4;
+  --cds-color-line-disable: 102, 108, 121;
+  --cds-color-fill-selected-hover: 146, 186, 254;
+  --cds-color-fill-selected: 93, 157, 252;
+  --cds-color-fill-secondary-hover: 86, 93, 103;
+  --cds-color-fill-secondary-active: 102, 108, 121;
+  --cds-color-fill-secondary: 69, 73, 81;
+  --cds-color-fill-primary-hover: 69, 73, 81;
+  --cds-color-fill-primary-active: 86, 93, 103;
+  --cds-color-fill-primary: 39, 42, 48;
+  --cds-color-fill-elevated: 122, 128, 142;
+  --cds-color-fill-disable: 69, 73, 81;
+  --cds-color-content-tertiary: 181, 183, 192;
+  --cds-color-content-secondary: 207, 210, 215;
+  --cds-color-content-primary: 236, 236, 239;
+  --cds-color-content-placeholder: 165, 169, 178;
+  --cds-color-content-on-dark: 249, 249, 252;
+  --cds-color-content-link-visited: 192, 174, 248;
+  --cds-color-content-link: 146, 186, 254;
+  --cds-color-content-inverse: 26, 26, 26;
+  --cds-color-content-disable: 152, 157, 168;
+  --cds-color-brand-secondary-hover: 101, 11, 37;
+  --cds-color-brand-secondary-border: 138, 16, 52;
+  --cds-color-brand-secondary-active: 138, 16, 52;
+  --cds-color-brand-secondary: 58, 7, 21;
+  --cds-color-brand-primary-hover: 138, 16, 52;
+  --cds-color-brand-primary-content: 255, 217, 225;
+  --cds-color-brand-primary-border: 210, 21, 75;
+  --cds-color-brand-primary-active: 101, 11, 37;
+  --cds-color-brand-primary: 210, 21, 75;
+}