@skbkontur/colors 2.0.0-alpha.2 → 2.0.0-alpha.4

package/README.md

@@ -1,6 +1,20 @@
 # Библиотека цветов
 
-NPM-пакет для доступа к цветам из общей Figma-библиотеки [Kontur.Colors](https://www.figma.com/file/XuiIin3JAOEcHHPihtthOJ/%E2%9A%A1%EF%B8%8F-Kontur-Colors?node-id=0%3A1&t=pL38Ju5ZOo3VC6vt-0)
+Kontur Colors — библиотека цветов для продуктов Контура
+
+**Возможности**
+
+- Содержит цветовые схемы для каждого брендового цвета
+- Построена на семантических токенах
+- Поддерживает тёмные темы
+- Доступность. Контрастность цветов по APCA W3
+- Полностью синхронизирована с переменными Figma
+
+**Совместимость с любыми веб-фреймворками**
+
+- Работает на CSS-переменных `var(--k-color-token-name)` доступных через JS/SCSS/Less
+- Конфигурация сразу нескольких схем через HTML-атрибуты `data-k-brand`, `data-k-accent`, `data-k-theme`
+- [Расширеный JS API](./?path=/docs/colors-colors-api--docs) для генерации палитр любых оттенков и создания кастомных токенов
 
 ## Установка
 
@@ -8,203 +22,122 @@ NPM-пакет для доступа к цветам из общей Figma-би
 npm i @skbkontur/colors
 ```
 
-## Использование
+## Подключение
 
-- JS/TS токены содержатся в объекте `KonturColors.color.name`
-- В CSS в виде глобальных переменных`--kontur-color-name` в `:root { ... }`
-- В препроцессорах Less `@color-name` и SCSS `$color-name`
+<br />
 
-#### JS/TS
+### 1. Подключение CSS
 
-```js static
-import { KonturColors } from '@skbkontur/colors';
+Подключить CSS-файл с одной или несколькими цветовыми схемами продукта: `brand-[цвет]_accent-[gray|brand].css`
 
-const text = `<div style="color: ${KonturColors.blueDark90}">Цвет blueDark90</div>`;
+```css
+/* Список всех цветовых схем. Выберите одну или несколько */
+@import '@skbkontur/colors/tokens/brand-red_accent-gray.css';
+@import '@skbkontur/colors/tokens/brand-orange_accent-gray.css';
+@import '@skbkontur/colors/tokens/brand-mint_accent-brand.css';
+@import '@skbkontur/colors/tokens/brand-mint_accent-gray.css';
+@import '@skbkontur/colors/tokens/brand-blue_accent-brand.css';
+@import '@skbkontur/colors/tokens/brand-blue_accent-gray.css';
+@import '@skbkontur/colors/tokens/brand-blue-deep_accent-brand.css';
+@import '@skbkontur/colors/tokens/brand-blue-deep_accent-gray.css';
+@import '@skbkontur/colors/tokens/brand-green_accent-brand.css';
+@import '@skbkontur/colors/tokens/brand-green_accent-gray.css';
+@import '@skbkontur/colors/tokens/brand-violet_accent-brand.css';
+@import '@skbkontur/colors/tokens/brand-violet_accent-gray.css';
+@import '@skbkontur/colors/tokens/brand-purple_accent-brand.css';
+@import '@skbkontur/colors/tokens/brand-purple_accent-gray.css';
 ```
 
-#### React
+### 2. Конфигурация в HTML
+
+Настройка контекста через 3 data-атрибута:
 
-```jsx static
-import { KonturColors } from '@skbkontur/colors';
+- **data-k-brand** — брендовый цвет `red | orange | green | mint | blue | blueDeep | violet | purple`
+- **data-k-accent** — акцентный цвет `gray | brand`
+- **data-k-theme** — тема `light | dark` (по умолчанию light)
 
-const Component = () => {
-  return <div style={{ color: KonturColors.blueDark90 }}>Цвет blueDark90</div>;
-};
+```html
+<div data-k-brand="orange" data-k-accent="gray" data-k-theme="light">
+  <div class="block">Блок Контур.Экстерна</div>
+
+  <div data-k-brand="blue" data-k-accent="brand" data-k-theme="light">
+    <div class="banner">Рекламный баннер Контур.Эльбы</div>
+  </div>
+</div>
 ```
 
-#### CSS
+## Использование
 
-```css
-@import '@skbkontur/colors/colors.css';
+### CSS
 
-.class {
-  color: var(--blue-dark-90);
+Токены доступны в виде CSS-переменных `var(--k-color-token-name)`
+
+```css
+.block {
+  color: var(--k-color-text-on-accent-default-primary);
+  background: var(--k-color-shape-default-accent-faint);
 }
 ```
 
-#### SCSS
+### JS/TS
 
-```scss
-@import '@skbkontur/colors/colors.scss';
+Переменные `colors.tokenName` содержат ссылки на `var(--k-color-token-name)`
+
+```js
+import * as colors from '@skbkontur/colors';
+
+const text = `
+  <div style="color: ${colors.textNeutralHeavy}">
+    Блок с текстом
+  </div>
+`;
+```
+
+### SCSS
+
+Переменные `colors.$token-name` содержат ссылки на `var(--k-color-token-name)`
+
+```css
+@use '@skbkontur/colors/colors.scss' as *;
 
 .class {
-  color: $blue-dark-90;
+  color: $color-text-neutral-heavy;
 }
 ```
 
-#### Less
+### Less
+
+Переменные `$token-name` содержат ссылки на `var(--k-color-token-name)`
 
-```less
+```css
 @import '@skbkontur/colors/colors.less';
 
 .class {
-  color: @blue-dark-90;
+  color: $color-text-neutral-heavy;
 }
 ```
 
-## Палитра
-
-```jsx harmony
-import { KonturColors } from '@skbkontur/colors';
-import {
-  Toast,
-  DropdownMenu,
-  MenuHeader,
-  MenuItem,
-  ThemeContext,
-  ThemeFactory,
-  THEME_2022_UPDATE_2024,
-} from '@skbkontur/react-ui';
-
-import { css } from '@skbkontur/react-ui/lib/theming/Emotion';
-
-const styles = {
-  colors: css`
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 24px;
-  `,
-  colorGroup: css`
-    break-inside: avoid;
-    margin-bottom: 64px;
-  `,
-  colorBlock: css`
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    width: 100%;
-    border: none;
-    text-align: left;
-    background: none;
-    cursor: pointer;
-    padding: 8px;
-    border-radius: 8px;
-    transition: 0.1s ease;
-
-    &:hover {
-      background: rgba(0, 0, 0, 0.06);
-    }
-
-    &:active {
-      background: rgba(0, 0, 0, 0.1);
-    }
-  `,
-  colorTile: css`
-    display: block;
-    height: 32px;
-    width: 32px;
-    border: 1px solid rgba(0, 0, 0, 0.08);
-    border-radius: 8px;
-    flex-shrink: 0;
-  `,
-  groupTitle: css`
-    display: block;
-    font-size: 20px;
-    font-weight: 600;
-    margin: 0 8px 12px;
-  `,
-  title: css`
-    display: block;
-    padding: 1px 0 0 8px;
-  `,
-  colorName: css`
-    display: block;
-    font-size: 14px;
-    line-height: 1.2;
-  `,
-  colorValue: css`
-    display: block;
-    fontSize: 12px;
-    color: #8b8b8b;
-  }`,
-};
-
-const colorGroups = Object.entries(KonturColors).reduce((acc, [colorKey, colorValue]) => {
-  const firstWord = ['greenMint', 'blueDark'].find((color) => colorKey.match(color)) || colorKey.match(/^[a-z]+/)[0];
-
-  acc[firstWord] = { ...acc[firstWord], [colorKey]: colorValue };
-
-  return acc;
-}, {});
-
-const getColors = (color) => {
-  const colorDashCase = color
-    .replace(/[A-Z]/g, (m) => '-' + m.toLowerCase())
-    .replace(/\d/, (m) => `-${m}`)
-    .replace('f-f-f', 'fff');
-
-  return {
-    'JavaScript / TypeScript': `KonturColors.${color}`,
-    CSS: `var(--kontur-${colorDashCase})`,
-    SCSS: `$${colorDashCase}`,
-    Less: `@${colorDashCase}`,
-  };
-};
-
-const copyColor = (color) => {
-  navigator.clipboard.writeText(color);
-  Toast.push('Цвет скопирован', null, 1000);
-};
-
-<div className={styles.colors}>
-  <ThemeContext.Provider value={THEME_2022_UPDATE_2024}>
-    {Object.entries(colorGroups).map(([group, colors]) => {
-      return (
-        <div className={styles.colorGroup}>
-          <div className={styles.groupTitle}>{group}</div>
-          {Object.keys(colors).map((colorName) => {
-            const colorValue = KonturColors[colorName];
-            const colorTile = (
-              <div className={styles.colorBlock}>
-                <span className={styles.colorTile} style={{ backgroundColor: colorValue }} />
-                <span>
-                  <span className={styles.colorName}>{colorName}</span>
-                  <span className={styles.colorValue}>{colorValue}</span>
-                </span>
-              </div>
-            );
-            return (
-              <div>
-                <DropdownMenu caption={colorTile} width="300">
-                  <MenuHeader>Скопировать переменную</MenuHeader>
-                  {Object.entries(getColors(colorName)).map(([lang, color]) => (
-                    <MenuItem onClick={() => copyColor(color)} comment={lang}>
-                      <div style={{ minWidth: 270 }}>{color}</div>
-                    </MenuItem>
-                  ))}
-                </DropdownMenu>
-              </div>
-            );
-          })}
-        </div>
-      );
-    })}
-  </ThemeContext.Provider>
-</div>;
-```
+<br />
 
-## Разработка
+## Colors API: генерация палитр и кастомные токены
 
-- Токены выгружаются в формате `camelCase`
-- `src/colors.ts` — файл с токенами
-- `npm run build` — сборка пакета в `/dist`
+Библиотека Colors содержит JS API для продвинутых сценариев:
+
+- Генерация палитр для произвольных HEX-цветов, а не только брендовых
+- Создание/расширение цветовых палитр с собственными семантическими токенами
+- Генерация цветов в форматах для разных платформ (oklch, hex, rgba и др.)
+- Перекраска интерфейсов в любой цвет на лету
+
+Функция `getColors` позволяет получать цвета для произвольных `brand`, `accent` и `theme`. Настраивать образцы оттенков `warning`, `error`. Указывать формат цвета, задавать кастомные токены со ссылками на сгенерированные палитры и другие параметры.
+
+```js static
+import { getColors } from '@skbkontur/colors';
+
+const colors = getColors({ brand: 'orange', accent: 'gray', theme: 'light' });
+
+const text = `
+  <div style="color: ${colors.textNeutralHeavy}">
+    Блок с текстом
+  </div>
+`;
+```

package/colors.less

@@ -0,0 +1,319 @@
+@colortext-accent-heavy: var(--k-color-text-accent-heavy);
+@colortext-accent-heavy-hover: var(--k-color-text-accent-heavy-hover);
+@colortext-accent-heavy-pressed: var(--k-color-text-accent-heavy-pressed);
+@colortext-error-heavy: var(--k-color-text-error-heavy);
+@colortext-error-heavy-hover: var(--k-color-text-error-heavy-hover);
+@colortext-error-heavy-pressed: var(--k-color-text-error-heavy-pressed);
+@colortext-inverted-accent-heavy: var(--k-color-text-inverted-accent-heavy);
+@colortext-inverted-accent-heavy-hover: var(--k-color-text-inverted-accent-heavy-hover);
+@colortext-inverted-accent-heavy-pressed: var(--k-color-text-inverted-accent-heavy-pressed);
+@colortext-inverted-error-heavy: var(--k-color-text-inverted-error-heavy);
+@colortext-inverted-error-heavy-hover: var(--k-color-text-inverted-error-heavy-hover);
+@colortext-inverted-error-heavy-pressed: var(--k-color-text-inverted-error-heavy-pressed);
+@colortext-inverted-neutral-faint: var(--k-color-text-inverted-neutral-faint);
+@colortext-inverted-neutral-heavy: var(--k-color-text-inverted-neutral-heavy);
+@colortext-inverted-neutral-pale: var(--k-color-text-inverted-neutral-pale);
+@colortext-inverted-neutral-soft: var(--k-color-text-inverted-neutral-soft);
+@colortext-inverted-success-heavy: var(--k-color-text-inverted-success-heavy);
+@colortext-inverted-success-heavy-hover: var(--k-color-text-inverted-success-heavy-hover);
+@colortext-inverted-success-heavy-pressed: var(--k-color-text-inverted-success-heavy-pressed);
+@colortext-inverted-warning-heavy: var(--k-color-text-inverted-warning-heavy);
+@colortext-inverted-warning-heavy-hover: var(--k-color-text-inverted-warning-heavy-hover);
+@colortext-inverted-warning-heavy-pressed: var(--k-color-text-inverted-warning-heavy-pressed);
+@colortext-logo: var(--k-color-text-logo);
+@colortext-neutral-faint: var(--k-color-text-neutral-faint);
+@colortext-neutral-heavy: var(--k-color-text-neutral-heavy);
+@colortext-neutral-pale: var(--k-color-text-neutral-pale);
+@colortext-neutral-soft: var(--k-color-text-neutral-soft);
+@colortext-success-heavy: var(--k-color-text-success-heavy);
+@colortext-success-heavy-hover: var(--k-color-text-success-heavy-hover);
+@colortext-success-heavy-pressed: var(--k-color-text-success-heavy-pressed);
+@colortext-warning-heavy: var(--k-color-text-warning-heavy);
+@colortext-warning-heavy-hover: var(--k-color-text-warning-heavy-hover);
+@colortext-warning-heavy-pressed: var(--k-color-text-warning-heavy-pressed);
+@colortext-const-faint-black: var(--k-color-text-const-faint-black);
+@colortext-const-faint-white: var(--k-color-text-const-faint-white);
+@colortext-const-heavy-black: var(--k-color-text-const-heavy-black);
+@colortext-const-heavy-white: var(--k-color-text-const-heavy-white);
+@colortext-const-pale-black: var(--k-color-text-const-pale-black);
+@colortext-const-pale-white: var(--k-color-text-const-pale-white);
+@colortext-const-soft-black: var(--k-color-text-const-soft-black);
+@colortext-const-soft-white: var(--k-color-text-const-soft-white);
+@colortext-on-accent-bold-faint: var(--k-color-text-on-accent-bold-faint);
+@colortext-on-accent-bold-heavy: var(--k-color-text-on-accent-bold-heavy);
+@colortext-on-accent-bold-pale: var(--k-color-text-on-accent-bold-pale);
+@colortext-on-accent-bold-soft: var(--k-color-text-on-accent-bold-soft);
+@colortext-on-brand-original-faint: var(--k-color-text-on-brand-original-faint);
+@colortext-on-brand-original-heavy: var(--k-color-text-on-brand-original-heavy);
+@colortext-on-brand-original-pale: var(--k-color-text-on-brand-original-pale);
+@colortext-on-brand-original-soft: var(--k-color-text-on-brand-original-soft);
+@colorshape-bold-accent: var(--k-color-shape-bold-accent);
+@colorshape-bold-accent-hover: var(--k-color-shape-bold-accent-hover);
+@colorshape-bold-accent-pressed: var(--k-color-shape-bold-accent-pressed);
+@colorshape-bold-brand-original: var(--k-color-shape-bold-brand-original);
+@colorshape-bold-brand-original-hover: var(--k-color-shape-bold-brand-original-hover);
+@colorshape-bold-brand-original-pressed: var(--k-color-shape-bold-brand-original-pressed);
+@colorshape-bold-error: var(--k-color-shape-bold-error);
+@colorshape-bold-error-hover: var(--k-color-shape-bold-error-hover);
+@colorshape-bold-error-pressed: var(--k-color-shape-bold-error-pressed);
+@colorshape-bold-neutral: var(--k-color-shape-bold-neutral);
+@colorshape-bold-neutral-hover: var(--k-color-shape-bold-neutral-hover);
+@colorshape-bold-neutral-pressed: var(--k-color-shape-bold-neutral-pressed);
+@colorshape-bold-success: var(--k-color-shape-bold-success);
+@colorshape-bold-success-hover: var(--k-color-shape-bold-success-hover);
+@colorshape-bold-success-pressed: var(--k-color-shape-bold-success-pressed);
+@colorshape-bold-warning: var(--k-color-shape-bold-warning);
+@colorshape-bold-warning-hover: var(--k-color-shape-bold-warning-hover);
+@colorshape-bold-warning-pressed: var(--k-color-shape-bold-warning-pressed);
+@colorshape-faint-accent: var(--k-color-shape-faint-accent);
+@colorshape-faint-accent-hover: var(--k-color-shape-faint-accent-hover);
+@colorshape-faint-accent-pressed: var(--k-color-shape-faint-accent-pressed);
+@colorshape-faint-brand: var(--k-color-shape-faint-brand);
+@colorshape-faint-brand-hover: var(--k-color-shape-faint-brand-hover);
+@colorshape-faint-brand-pressed: var(--k-color-shape-faint-brand-pressed);
+@colorshape-faint-error: var(--k-color-shape-faint-error);
+@colorshape-faint-error-hover: var(--k-color-shape-faint-error-hover);
+@colorshape-faint-error-pressed: var(--k-color-shape-faint-error-pressed);
+@colorshape-faint-neutral-alpha: var(--k-color-shape-faint-neutral-alpha);
+@colorshape-faint-neutral-alpha-hover: var(--k-color-shape-faint-neutral-alpha-hover);
+@colorshape-faint-neutral-alpha-pressed: var(--k-color-shape-faint-neutral-alpha-pressed);
+@colorshape-faint-success: var(--k-color-shape-faint-success);
+@colorshape-faint-success-hover: var(--k-color-shape-faint-success-hover);
+@colorshape-faint-success-pressed: var(--k-color-shape-faint-success-pressed);
+@colorshape-faint-warning: var(--k-color-shape-faint-warning);
+@colorshape-faint-warning-hover: var(--k-color-shape-faint-warning-hover);
+@colorshape-faint-warning-pressed: var(--k-color-shape-faint-warning-pressed);
+@colorshape-heavy-error: var(--k-color-shape-heavy-error);
+@colorshape-heavy-neutral: var(--k-color-shape-heavy-neutral);
+@colorshape-heavy-success: var(--k-color-shape-heavy-success);
+@colorshape-heavy-warning: var(--k-color-shape-heavy-warning);
+@colorshape-other-accent-bold-disabled: var(--k-color-shape-other-accent-bold-disabled);
+@colorshape-other-backless-hover: var(--k-color-shape-other-backless-hover);
+@colorshape-other-backless-pressed: var(--k-color-shape-other-backless-pressed);
+@colorshape-other-base: var(--k-color-shape-other-base);
+@colorshape-other-base-hover: var(--k-color-shape-other-base-hover);
+@colorshape-other-base-pressed: var(--k-color-shape-other-base-pressed);
+@colorshape-other-disabled: var(--k-color-shape-other-disabled);
+@colorshape-other-field: var(--k-color-shape-other-field);
+@colorshape-other-field-hover: var(--k-color-shape-other-field-hover);
+@colorshape-other-field-pressed: var(--k-color-shape-other-field-pressed);
+@colorshape-other-low: var(--k-color-shape-other-low);
+@colorshape-other-low-hover: var(--k-color-shape-other-low-hover);
+@colorshape-other-low-pressed: var(--k-color-shape-other-low-pressed);
+@colorshape-other-neutral-faint-solid: var(--k-color-shape-other-neutral-faint-solid);
+@colorshape-other-neutral-faint-solid-hover: var(--k-color-shape-other-neutral-faint-solid-hover);
+@colorshape-other-neutral-faint-solid-pressed: var(--k-color-shape-other-neutral-faint-solid-pressed);
+@colorshape-other-neutral-pale-solid: var(--k-color-shape-other-neutral-pale-solid);
+@colorshape-other-neutral-pale-solid-hover: var(--k-color-shape-other-neutral-pale-solid-hover);
+@colorshape-other-neutral-pale-solid-pressed: var(--k-color-shape-other-neutral-pale-solid-pressed);
+@colorshape-other-neutral-soft-solid: var(--k-color-shape-other-neutral-soft-solid);
+@colorshape-other-neutral-soft-solid-hover: var(--k-color-shape-other-neutral-soft-solid-hover);
+@colorshape-other-neutral-soft-solid-pressed: var(--k-color-shape-other-neutral-soft-solid-pressed);
+@colorshape-pale-accent: var(--k-color-shape-pale-accent);
+@colorshape-pale-accent-hover: var(--k-color-shape-pale-accent-hover);
+@colorshape-pale-accent-pressed: var(--k-color-shape-pale-accent-pressed);
+@colorshape-pale-brand: var(--k-color-shape-pale-brand);
+@colorshape-pale-brand-hover: var(--k-color-shape-pale-brand-hover);
+@colorshape-pale-brand-pressed: var(--k-color-shape-pale-brand-pressed);
+@colorshape-pale-error: var(--k-color-shape-pale-error);
+@colorshape-pale-error-hover: var(--k-color-shape-pale-error-hover);
+@colorshape-pale-error-pressed: var(--k-color-shape-pale-error-pressed);
+@colorshape-pale-neutral-alpha: var(--k-color-shape-pale-neutral-alpha);
+@colorshape-pale-neutral-alpha-hover: var(--k-color-shape-pale-neutral-alpha-hover);
+@colorshape-pale-neutral-alpha-pressed: var(--k-color-shape-pale-neutral-alpha-pressed);
+@colorshape-pale-success: var(--k-color-shape-pale-success);
+@colorshape-pale-success-hover: var(--k-color-shape-pale-success-hover);
+@colorshape-pale-success-pressed: var(--k-color-shape-pale-success-pressed);
+@colorshape-pale-warning: var(--k-color-shape-pale-warning);
+@colorshape-pale-warning-hover: var(--k-color-shape-pale-warning-hover);
+@colorshape-pale-warning-pressed: var(--k-color-shape-pale-warning-pressed);
+@colorshape-soft-accent: var(--k-color-shape-soft-accent);
+@colorshape-soft-accent-hover: var(--k-color-shape-soft-accent-hover);
+@colorshape-soft-accent-pressed: var(--k-color-shape-soft-accent-pressed);
+@colorshape-soft-brand: var(--k-color-shape-soft-brand);
+@colorshape-soft-brand-hover: var(--k-color-shape-soft-brand-hover);
+@colorshape-soft-brand-pressed: var(--k-color-shape-soft-brand-pressed);
+@colorshape-soft-error: var(--k-color-shape-soft-error);
+@colorshape-soft-error-hover: var(--k-color-shape-soft-error-hover);
+@colorshape-soft-error-pressed: var(--k-color-shape-soft-error-pressed);
+@colorshape-soft-neutral-alpha: var(--k-color-shape-soft-neutral-alpha);
+@colorshape-soft-neutral-alpha-hover: var(--k-color-shape-soft-neutral-alpha-hover);
+@colorshape-soft-neutral-alpha-pressed: var(--k-color-shape-soft-neutral-alpha-pressed);
+@colorshape-soft-success: var(--k-color-shape-soft-success);
+@colorshape-soft-success-hover: var(--k-color-shape-soft-success-hover);
+@colorshape-soft-success-pressed: var(--k-color-shape-soft-success-pressed);
+@colorshape-soft-warning: var(--k-color-shape-soft-warning);
+@colorshape-soft-warning-hover: var(--k-color-shape-soft-warning-hover);
+@colorshape-soft-warning-pressed: var(--k-color-shape-soft-warning-pressed);
+@colorshape-inverted-backless-hover: var(--k-color-shape-inverted-backless-hover);
+@colorshape-inverted-backless-pressed: var(--k-color-shape-inverted-backless-pressed);
+@colorshape-inverted-disabled: var(--k-color-shape-inverted-disabled);
+@colorshape-inverted-neutral-faint-alpha: var(--k-color-shape-inverted-neutral-faint-alpha);
+@colorshape-inverted-neutral-faint-alpha-hover: var(--k-color-shape-inverted-neutral-faint-alpha-hover);
+@colorshape-inverted-neutral-faint-alpha-pressed: var(--k-color-shape-inverted-neutral-faint-alpha-pressed);
+@colorshape-inverted-neutral-heavy: var(--k-color-shape-inverted-neutral-heavy);
+@colorshape-inverted-neutral-heavy-hover: var(--k-color-shape-inverted-neutral-heavy-hover);
+@colorshape-inverted-neutral-heavy-pressed: var(--k-color-shape-inverted-neutral-heavy-pressed);
+@colorshape-inverted-neutral-pale-alpha: var(--k-color-shape-inverted-neutral-pale-alpha);
+@colorshape-inverted-neutral-pale-alpha-hover: var(--k-color-shape-inverted-neutral-pale-alpha-hover);
+@colorshape-inverted-neutral-pale-alpha-pressed: var(--k-color-shape-inverted-neutral-pale-alpha-pressed);
+@colorshape-inverted-neutral-soft-alpha: var(--k-color-shape-inverted-neutral-soft-alpha);
+@colorshape-inverted-neutral-soft-alpha-hover: var(--k-color-shape-inverted-neutral-soft-alpha-hover);
+@colorshape-inverted-neutral-soft-alpha-pressed: var(--k-color-shape-inverted-neutral-soft-alpha-pressed);
+@colorshape-const-backless-black-hover: var(--k-color-shape-const-backless-black-hover);
+@colorshape-const-backless-black-pressed: var(--k-color-shape-const-backless-black-pressed);
+@colorshape-const-backless-white-hover: var(--k-color-shape-const-backless-white-hover);
+@colorshape-const-backless-white-pressed: var(--k-color-shape-const-backless-white-pressed);
+@colorshape-const-disabled-black: var(--k-color-shape-const-disabled-black);
+@colorshape-const-disabled-white: var(--k-color-shape-const-disabled-white);
+@colorshape-const-faint-black: var(--k-color-shape-const-faint-black);
+@colorshape-const-faint-black-hover: var(--k-color-shape-const-faint-black-hover);
+@colorshape-const-faint-black-pressed: var(--k-color-shape-const-faint-black-pressed);
+@colorshape-const-faint-white: var(--k-color-shape-const-faint-white);
+@colorshape-const-faint-white-hover: var(--k-color-shape-const-faint-white-hover);
+@colorshape-const-faint-white-pressed: var(--k-color-shape-const-faint-white-pressed);
+@colorshape-const-heavy-black: var(--k-color-shape-const-heavy-black);
+@colorshape-const-heavy-black-hover: var(--k-color-shape-const-heavy-black-hover);
+@colorshape-const-heavy-black-pressed: var(--k-color-shape-const-heavy-black-pressed);
+@colorshape-const-heavy-white: var(--k-color-shape-const-heavy-white);
+@colorshape-const-heavy-white-hover: var(--k-color-shape-const-heavy-white-hover);
+@colorshape-const-heavy-white-pressed: var(--k-color-shape-const-heavy-white-pressed);
+@colorshape-const-pale-black: var(--k-color-shape-const-pale-black);
+@colorshape-const-pale-black-hover: var(--k-color-shape-const-pale-black-hover);
+@colorshape-const-pale-black-pressed: var(--k-color-shape-const-pale-black-pressed);
+@colorshape-const-pale-white: var(--k-color-shape-const-pale-white);
+@colorshape-const-pale-white-hover: var(--k-color-shape-const-pale-white-hover);
+@colorshape-const-pale-white-pressed: var(--k-color-shape-const-pale-white-pressed);
+@colorshape-const-promo: var(--k-color-shape-const-promo);
+@colorshape-const-soft-black: var(--k-color-shape-const-soft-black);
+@colorshape-const-soft-black-hover: var(--k-color-shape-const-soft-black-hover);
+@colorshape-const-soft-black-pressed: var(--k-color-shape-const-soft-black-pressed);
+@colorshape-const-soft-white: var(--k-color-shape-const-soft-white);
+@colorshape-const-soft-white-hover: var(--k-color-shape-const-soft-white-hover);
+@colorshape-const-soft-white-pressed: var(--k-color-shape-const-soft-white-pressed);
+@colorline-accent-bold: var(--k-color-line-accent-bold);
+@colorline-accent-bold-hover: var(--k-color-line-accent-bold-hover);
+@colorline-accent-bold-pressed: var(--k-color-line-accent-bold-pressed);
+@colorline-accent-pale: var(--k-color-line-accent-pale);
+@colorline-accent-pale-hover: var(--k-color-line-accent-pale-hover);
+@colorline-accent-pale-pressed: var(--k-color-line-accent-pale-pressed);
+@colorline-accent-soft: var(--k-color-line-accent-soft);
+@colorline-accent-soft-hover: var(--k-color-line-accent-soft-hover);
+@colorline-accent-soft-pressed: var(--k-color-line-accent-soft-pressed);
+@colorline-brand-original: var(--k-color-line-brand-original);
+@colorline-error-bold: var(--k-color-line-error-bold);
+@colorline-error-bold-hover: var(--k-color-line-error-bold-hover);
+@colorline-error-bold-pressed: var(--k-color-line-error-bold-pressed);
+@colorline-neutral-faint: var(--k-color-line-neutral-faint);
+@colorline-neutral-pale: var(--k-color-line-neutral-pale);
+@colorline-neutral-pale-hover: var(--k-color-line-neutral-pale-hover);
+@colorline-neutral-pale-pressed: var(--k-color-line-neutral-pale-pressed);
+@colorline-on-accent-bold-faint: var(--k-color-line-on-accent-bold-faint);
+@colorline-on-accent-bold-pale: var(--k-color-line-on-accent-bold-pale);
+@colorline-on-brand-original-faint: var(--k-color-line-on-brand-original-faint);
+@colorline-on-brand-original-pale: var(--k-color-line-on-brand-original-pale);
+@colorline-success-bold: var(--k-color-line-success-bold);
+@colorline-success-bold-hover: var(--k-color-line-success-bold-hover);
+@colorline-success-bold-pressed: var(--k-color-line-success-bold-pressed);
+@colorline-warning-bold: var(--k-color-line-warning-bold);
+@colorline-warning-bold-hover: var(--k-color-line-warning-bold-hover);
+@colorline-warning-bold-pressed: var(--k-color-line-warning-bold-pressed);
+@colorline-inverted-accent-bold: var(--k-color-line-inverted-accent-bold);
+@colorline-inverted-accent-bold-hover: var(--k-color-line-inverted-accent-bold-hover);
+@colorline-inverted-accent-bold-pressed: var(--k-color-line-inverted-accent-bold-pressed);
+@colorline-inverted-accent-pale: var(--k-color-line-inverted-accent-pale);
+@colorline-inverted-accent-pale-hover: var(--k-color-line-inverted-accent-pale-hover);
+@colorline-inverted-accent-pale-pressed: var(--k-color-line-inverted-accent-pale-pressed);
+@colorline-inverted-accent-soft: var(--k-color-line-inverted-accent-soft);
+@colorline-inverted-accent-soft-hover: var(--k-color-line-inverted-accent-soft-hover);
+@colorline-inverted-accent-soft-pressed: var(--k-color-line-inverted-accent-soft-pressed);
+@colorline-inverted-error-bold: var(--k-color-line-inverted-error-bold);
+@colorline-inverted-error-bold-hover: var(--k-color-line-inverted-error-bold-hover);
+@colorline-inverted-error-bold-pressed: var(--k-color-line-inverted-error-bold-pressed);
+@colorline-inverted-neutral-faint: var(--k-color-line-inverted-neutral-faint);
+@colorline-inverted-neutral-pale: var(--k-color-line-inverted-neutral-pale);
+@colorline-inverted-neutral-pale-hover: var(--k-color-line-inverted-neutral-pale-hover);
+@colorline-inverted-neutral-pale-pressed: var(--k-color-line-inverted-neutral-pale-pressed);
+@colorline-inverted-success-bold: var(--k-color-line-inverted-success-bold);
+@colorline-inverted-success-bold-hover: var(--k-color-line-inverted-success-bold-hover);
+@colorline-inverted-success-bold-pressed: var(--k-color-line-inverted-success-bold-pressed);
+@colorline-inverted-warning-bold: var(--k-color-line-inverted-warning-bold);
+@colorline-inverted-warning-bold-hover: var(--k-color-line-inverted-warning-bold-hover);
+@colorline-inverted-warning-bold-pressed: var(--k-color-line-inverted-warning-bold-pressed);
+@colorline-const-faint-black: var(--k-color-line-const-faint-black);
+@colorline-const-faint-white: var(--k-color-line-const-faint-white);
+@colorline-const-pale-black: var(--k-color-line-const-pale-black);
+@colorline-const-pale-black-hover: var(--k-color-line-const-pale-black-hover);
+@colorline-const-pale-black-pressed: var(--k-color-line-const-pale-black-pressed);
+@colorline-const-pale-white: var(--k-color-line-const-pale-white);
+@colorline-const-pale-white-hover: var(--k-color-line-const-pale-white-hover);
+@colorline-const-pale-white-pressed: var(--k-color-line-const-pale-white-pressed);
+@colorsurface-base: var(--k-color-surface-base);
+@colorsurface-high: var(--k-color-surface-high);
+@colorsurface-low: var(--k-color-surface-low);
+@colorsurface-modal-backdrop: var(--k-color-surface-modal-backdrop);
+@colorillustration-black: var(--k-color-illustration-black);
+@colorillustration-brand: var(--k-color-illustration-brand);
+@colorillustration-complement: var(--k-color-illustration-complement);
+@colorillustration-inverted-neutral: var(--k-color-illustration-inverted-neutral);
+@colorillustration-neutral: var(--k-color-illustration-neutral);
+@colorillustration-on-brand: var(--k-color-illustration-on-brand);
+@colorillustration-on-complement: var(--k-color-illustration-on-complement);
+@colorillustration-promo: var(--k-color-illustration-promo);
+@colorillustration-symbol: var(--k-color-illustration-symbol);
+@colorillustration-white: var(--k-color-illustration-white);
+@colorcustomizable-bold-black: var(--k-color-customizable-bold-black);
+@colorcustomizable-bold-blue: var(--k-color-customizable-bold-blue);
+@colorcustomizable-bold-blue-deep: var(--k-color-customizable-bold-blue-deep);
+@colorcustomizable-bold-gray: var(--k-color-customizable-bold-gray);
+@colorcustomizable-bold-green: var(--k-color-customizable-bold-green);
+@colorcustomizable-bold-mint: var(--k-color-customizable-bold-mint);
+@colorcustomizable-bold-orange: var(--k-color-customizable-bold-orange);
+@colorcustomizable-bold-purple: var(--k-color-customizable-bold-purple);
+@colorcustomizable-bold-red: var(--k-color-customizable-bold-red);
+@colorcustomizable-bold-violet: var(--k-color-customizable-bold-violet);
+@colorcustomizable-bold-yellow: var(--k-color-customizable-bold-yellow);
+@colorcustomizable-faint-black: var(--k-color-customizable-faint-black);
+@colorcustomizable-faint-blue: var(--k-color-customizable-faint-blue);
+@colorcustomizable-faint-blue-deep: var(--k-color-customizable-faint-blue-deep);
+@colorcustomizable-faint-gray: var(--k-color-customizable-faint-gray);
+@colorcustomizable-faint-green: var(--k-color-customizable-faint-green);
+@colorcustomizable-faint-mint: var(--k-color-customizable-faint-mint);
+@colorcustomizable-faint-orange: var(--k-color-customizable-faint-orange);
+@colorcustomizable-faint-purple: var(--k-color-customizable-faint-purple);
+@colorcustomizable-faint-red: var(--k-color-customizable-faint-red);
+@colorcustomizable-faint-violet: var(--k-color-customizable-faint-violet);
+@colorcustomizable-faint-yellow: var(--k-color-customizable-faint-yellow);
+@colorcustomizable-heavy-black: var(--k-color-customizable-heavy-black);
+@colorcustomizable-heavy-blue: var(--k-color-customizable-heavy-blue);
+@colorcustomizable-heavy-blue-deep: var(--k-color-customizable-heavy-blue-deep);
+@colorcustomizable-heavy-gray: var(--k-color-customizable-heavy-gray);
+@colorcustomizable-heavy-green: var(--k-color-customizable-heavy-green);
+@colorcustomizable-heavy-mint: var(--k-color-customizable-heavy-mint);
+@colorcustomizable-heavy-orange: var(--k-color-customizable-heavy-orange);
+@colorcustomizable-heavy-purple: var(--k-color-customizable-heavy-purple);
+@colorcustomizable-heavy-red: var(--k-color-customizable-heavy-red);
+@colorcustomizable-heavy-violet: var(--k-color-customizable-heavy-violet);
+@colorcustomizable-heavy-yellow: var(--k-color-customizable-heavy-yellow);
+@colorcustomizable-pale-black: var(--k-color-customizable-pale-black);
+@colorcustomizable-pale-blue: var(--k-color-customizable-pale-blue);
+@colorcustomizable-pale-blue-deep: var(--k-color-customizable-pale-blue-deep);
+@colorcustomizable-pale-gray: var(--k-color-customizable-pale-gray);
+@colorcustomizable-pale-green: var(--k-color-customizable-pale-green);
+@colorcustomizable-pale-mint: var(--k-color-customizable-pale-mint);
+@colorcustomizable-pale-orange: var(--k-color-customizable-pale-orange);
+@colorcustomizable-pale-purple: var(--k-color-customizable-pale-purple);
+@colorcustomizable-pale-red: var(--k-color-customizable-pale-red);
+@colorcustomizable-pale-violet: var(--k-color-customizable-pale-violet);
+@colorcustomizable-pale-yellow: var(--k-color-customizable-pale-yellow);
+@colorcustomizable-soft-black: var(--k-color-customizable-soft-black);
+@colorcustomizable-soft-blue: var(--k-color-customizable-soft-blue);
+@colorcustomizable-soft-blue-deep: var(--k-color-customizable-soft-blue-deep);
+@colorcustomizable-soft-gray: var(--k-color-customizable-soft-gray);
+@colorcustomizable-soft-green: var(--k-color-customizable-soft-green);
+@colorcustomizable-soft-mint: var(--k-color-customizable-soft-mint);
+@colorcustomizable-soft-orange: var(--k-color-customizable-soft-orange);
+@colorcustomizable-soft-purple: var(--k-color-customizable-soft-purple);
+@colorcustomizable-soft-red: var(--k-color-customizable-soft-red);
+@colorcustomizable-soft-violet: var(--k-color-customizable-soft-violet);
+@colorcustomizable-soft-yellow: var(--k-color-customizable-soft-yellow);