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

package/llms/llms-migration.txt

@@ -1,6 +1,6 @@
 # Central Design System — миграция CDS 3 → CDS 4
 
-> Версия: 4.0.0-alpha.3
+> Версия: 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.3` (в разработке).
+> Версии: CDS 3 — `3.10.1` (стабильная), CDS 4 — `4.0.0-alpha.4` (в разработке).
 
 ## Как читать этот документ
 

package/llms/llms-tokens.txt

@@ -1,6 +1,6 @@
 # Central Design System (CDS 4) — токены и темы
 
-> Версия: 4.0.0-alpha.3
+> Версия: 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

@@ -1,6 +1,6 @@
 # Central Design System (CDS 4)
 
-> Версия: 4.0.0-alpha.3. Модульная библиотека 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`). Не редактировать вручную.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@central-design-system/components",
-  "version": "4.0.0-alpha.3",
+  "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

@@ -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;
+}

package/src/themes/css/lumaLight.css

@@ -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: -0.5rem;
+  --cds-shadow-y-minus-300: -0.375rem;
+  --cds-shadow-y-minus-200: -0.25rem;
+  --cds-shadow-y-minus-100: -0.125rem;
+  --cds-shadow-y-400: 0.5rem;
+  --cds-shadow-y-300: 0.375rem;
+  --cds-shadow-y-200: 0.25rem;
+  --cds-shadow-y-100: 0.125rem;
+  --cds-shadow-x-minus-400: -0.5rem;
+  --cds-shadow-x-minus-300: -0.375rem;
+  --cds-shadow-x-minus-200: -0.25rem;
+  --cds-shadow-x-minus-100: -0.125rem;
+  --cds-shadow-x-400: 0.5rem;
+  --cds-shadow-x-300: 0.375rem;
+  --cds-shadow-x-200: 0.25rem;
+  --cds-shadow-x-100: 0.125rem;
+  --cds-shadow-blur-400: 0.75rem;
+  --cds-shadow-blur-300: 0.5rem;
+  --cds-shadow-blur-200: 0.25rem;
+  --cds-shadow-blur-100: 0.125rem;
+  --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: 236, 238, 242;
+  --cds-color-surface-primary: 255, 255, 255;
+  --cds-color-surface-overlay: 39, 42, 48, 0.5;
+  --cds-color-surface-inverse: 64, 70, 83;
+  --cds-color-surface-elevated: 255, 255, 255;
+  --cds-color-status-warning-surface: 166, 132, 10;
+  --cds-color-status-warning-line: 182, 146, 16;
+  --cds-color-status-warning-fill-hover: 222, 192, 72;
+  --cds-color-status-warning-fill: 242, 219, 130;
+  --cds-color-status-warning-content: 88, 64, 1;
+  --cds-color-status-success-surface: 60, 156, 44;
+  --cds-color-status-success-line: 80, 169, 70;
+  --cds-color-status-success-fill-hover: 151, 210, 131;
+  --cds-color-status-success-fill: 188, 232, 171;
+  --cds-color-status-success-content: 0, 80, 5;
+  --cds-color-status-progress-surface: 25, 143, 216;
+  --cds-color-status-progress-line: 43, 157, 233;
+  --cds-color-status-progress-fill-hover: 144, 200, 255;
+  --cds-color-status-progress-fill: 195, 223, 255;
+  --cds-color-status-progress-content: 0, 72, 113;
+  --cds-color-status-info-surface: 130, 138, 151;
+  --cds-color-status-info-line: 146, 152, 164;
+  --cds-color-status-info-fill-hover: 192, 195, 203;
+  --cds-color-status-info-fill: 218, 221, 226;
+  --cds-color-status-info-content: 64, 70, 83;
+  --cds-color-status-indication-surface: 209, 69, 63;
+  --cds-color-status-indication-line: 209, 69, 63;
+  --cds-color-status-indication-fill-hover: 255, 174, 158;
+  --cds-color-status-indication-fill: 255, 209, 198;
+  --cds-color-status-indication-content: 131, 17, 24;
+  --cds-color-status-danger-surface: 209, 69, 63;
+  --cds-color-status-danger-line: 209, 69, 63;
+  --cds-color-status-danger-fill-hover: 255, 174, 158;
+  --cds-color-status-danger-fill: 255, 209, 198;
+  --cds-color-status-danger-content: 131, 17, 24;
+  --cds-color-page-primary: 236, 238, 242;
+  --cds-color-other-teal-surface: 58, 150, 158;
+  --cds-color-other-teal-line: 60, 165, 173;
+  --cds-color-other-teal-fill-hover: 72, 214, 219;
+  --cds-color-other-teal-fill: 161, 233, 233;
+  --cds-color-other-teal-content: 2, 43, 47;
+  --cds-color-other-purple-surface: 169, 111, 222;
+  --cds-color-other-purple-line: 179, 129, 225;
+  --cds-color-other-purple-fill-hover: 214, 184, 239;
+  --cds-color-other-purple-fill: 232, 213, 246;
+  --cds-color-other-purple-content: 47, 15, 80;
+  --cds-color-other-pink-surface: 210, 92, 184;
+  --cds-color-other-pink-line: 219, 112, 196;
+  --cds-color-other-pink-fill-hover: 243, 172, 231;
+  --cds-color-other-pink-fill: 248, 209, 242;
+  --cds-color-other-pink-content: 66, 13, 53;
+  --cds-color-other-lime-surface: 120, 146, 44;
+  --cds-color-other-lime-line: 133, 161, 45;
+  --cds-color-other-lime-fill-hover: 182, 204, 101;
+  --cds-color-other-lime-fill: 212, 228, 144;
+  --cds-color-other-lime-content: 32, 41, 1;
+  --cds-color-other-lemon-surface: 142, 140, 35;
+  --cds-color-other-lemon-line: 157, 155, 37;
+  --cds-color-other-lemon-fill-hover: 203, 198, 95;
+  --cds-color-other-lemon-fill: 230, 223, 131;
+  --cds-color-other-lemon-content: 40, 38, 1;
+  --cds-color-other-indigo-surface: 128, 126, 236;
+  --cds-color-other-indigo-line: 145, 141, 236;
+  --cds-color-other-indigo-fill-hover: 195, 189, 249;
+  --cds-color-other-indigo-fill: 221, 217, 252;
+  --cds-color-other-indigo-content: 31, 31, 85;
+  --cds-color-other-cyan-surface: 67, 151, 134;
+  --cds-color-other-cyan-line: 72, 166, 146;
+  --cds-color-other-cyan-fill-hover: 88, 216, 190;
+  --cds-color-other-cyan-fill: 159, 235, 216;
+  --cds-color-other-cyan-content: 5, 43, 36;
+  --cds-color-other-chocolate-surface: 172, 127, 88;
+  --cds-color-other-chocolate-line: 183, 143, 109;
+  --cds-color-other-chocolate-fill-hover: 216, 190, 169;
+  --cds-color-other-chocolate-fill: 231, 217, 204;
+  --cds-color-other-chocolate-content: 54, 29, 1;
+  --cds-color-line-tertiary-hover: 175, 179, 189;
+  --cds-color-line-tertiary: 204, 207, 214;
+  --cds-color-line-selected-hover: 41, 120, 212;
+  --cds-color-line-selected: 77, 152, 249;
+  --cds-color-line-secondary-hover: 146, 152, 164;
+  --cds-color-line-secondary: 175, 179, 189;
+  --cds-color-line-primary-hover: 114, 121, 135;
+  --cds-color-line-primary: 146, 152, 164;
+  --cds-color-line-focus-outline: 164, 197, 254;
+  --cds-color-line-focus: 77, 152, 249;
+  --cds-color-line-elevated: 255, 255, 255;
+  --cds-color-line-disable: 192, 195, 203;
+  --cds-color-fill-selected-hover: 41, 120, 212;
+  --cds-color-fill-selected: 77, 152, 249;
+  --cds-color-fill-secondary-hover: 204, 207, 214;
+  --cds-color-fill-secondary-active: 192, 195, 203;
+  --cds-color-fill-secondary: 218, 221, 226;
+  --cds-color-fill-primary-hover: 218, 221, 226;
+  --cds-color-fill-primary-active: 204, 207, 214;
+  --cds-color-fill-primary: 255, 255, 255;
+  --cds-color-fill-elevated: 255, 255, 255;
+  --cds-color-fill-disable: 218, 221, 226;
+  --cds-color-content-tertiary: 114, 121, 135;
+  --cds-color-content-secondary: 79, 86, 102;
+  --cds-color-content-primary: 33, 38, 49;
+  --cds-color-content-placeholder: 130, 138, 151;
+  --cds-color-content-on-dark: 255, 255, 255;
+  --cds-color-content-link-visited: 149, 94, 200;
+  --cds-color-content-link: 41, 120, 212;
+  --cds-color-content-inverse: 255, 255, 255;
+  --cds-color-content-disable: 146, 152, 164;
+  --cds-color-brand-secondary-hover: 247, 207, 218;
+  --cds-color-brand-secondary-border: 251, 231, 236;
+  --cds-color-brand-secondary-active: 240, 168, 188;
+  --cds-color-brand-secondary: 251, 231, 236;
+  --cds-color-brand-primary-hover: 210, 21, 75;
+  --cds-color-brand-primary-content: 125, 14, 39;
+  --cds-color-brand-primary-border: 199, 27, 60;
+  --cds-color-brand-primary-active: 224, 71, 110;
+  --cds-color-brand-primary: 199, 27, 60;
+}