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

package/CHANGELOG.md

@@ -0,0 +1,84 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [1.1.1](https://git.skbkontur.ru/ui/ui-parking-2/compare/@skbkontur/colors@1.1.0...@skbkontur/colors@1.1.1) (2025-05-06)
+
+**Note:** Version bump only for package @skbkontur/colors
+
+# [1.1.0](https://git.skbkontur.ru/ui/ui-parking-2/compare/@skbkontur/colors@1.0.0...@skbkontur/colors@1.1.0) (2025-03-17)
+
+### Features
+
+- add new storybook documentation ([c267b12](https://git.skbkontur.ru/ui/ui-parking-2/commits/c267b12a86e845a219b173a4e69be6a04b972df8))
+
+# [1.0.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.5.1...@skbkontur/colors@1.0.0) (2024-08-08)
+
+### Features
+
+- **colors:** add scss and change naming ([ef3345f](https://git.skbkontur.ru/ui/ui-parking/commits/ef3345f5f54be830f284c9a2a53991e117b8ba0b))
+- **colors:** add scss and change naming ([78b32b7](https://git.skbkontur.ru/ui/ui-parking/commits/78b32b7a22d260baf166195e7eb1adeea5b2c9f7))
+
+### BREAKING CHANGES
+
+- **colors:** change naming from camelCase to dash-case
+- **colors:** change naming from camelCase to dash-case
+
+## [0.5.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.5.0...@skbkontur/colors@0.5.1) (2024-08-08)
+
+**Note:** Version bump only for package @skbkontur/colors
+
+# [0.5.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.4.4...@skbkontur/colors@0.5.0) (2024-06-25)
+
+### Features
+
+- **colors:** update colors 2024 ([7020c9b](https://git.skbkontur.ru/ui/ui-parking/commits/7020c9b1311e4e37973847af70bad28cbbd2902d))
+
+### Reverts
+
+- remove screenshots in ie11 and obsolete packages ([57a6e89](https://git.skbkontur.ru/ui/ui-parking/commits/57a6e8962089825b6c71c1b96f4d09bc8a5a4ef7))
+
+## [0.4.4](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.4.3...@skbkontur/colors@0.4.4) (2023-08-11)
+
+**Note:** Version bump only for package @skbkontur/colors
+
+## [0.4.3](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.4.2...@skbkontur/colors@0.4.3) (2023-08-11)
+
+**Note:** Version bump only for package @skbkontur/colors
+
+## [0.4.2](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.4.1...@skbkontur/colors@0.4.2) (2023-08-11)
+
+**Note:** Version bump only for package @skbkontur/colors
+
+## [0.4.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.4.0...@skbkontur/colors@0.4.1) (2023-06-29)
+
+**Note:** Version bump only for package @skbkontur/colors
+
+# [0.4.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.3.0...@skbkontur/colors@0.4.0) (2023-05-22)
+
+### Features
+
+- **colors:** обновление grayscaleSecondaryText с [#858585](https://git.skbkontur.ru/ui/ui-parking/issues/858585) на [#757575](https://git.skbkontur.ru/ui/ui-parking/issues/757575) ([8f27457](https://git.skbkontur.ru/ui/ui-parking/commits/8f27457477e25ecd52dfb7ab9b1f521145b25125))
+
+# [0.3.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.1.1...@skbkontur/colors@0.3.0) (2023-05-12)
+
+### Features
+
+- **colors:** добавила новые цвета с прозрачностью ([9cd91ef](https://git.skbkontur.ru/ui/ui-parking/commits/9cd91ef608a9f619d02cfb818cf2a4dc2c410929))
+
+# [0.2.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.1.1...@skbkontur/colors@0.2.0) (2023-05-12)
+
+### Features
+
+- **colors:** добавила новые цвета с прозрачностью ([9cd91ef](https://git.skbkontur.ru/ui/ui-parking/commits/9cd91ef608a9f619d02cfb818cf2a4dc2c410929))
+
+## [0.1.1](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/colors@0.1.0...@skbkontur/colors@0.1.1) (2023-02-06)
+
+**Note:** Version bump only for package @skbkontur/colors
+
+# 0.1.0 (2023-02-03)
+
+### Features
+
+- new package @skbkontur/colors ([e9e1a88](https://git.skbkontur.ru/ui/ui-parking/commits/e9e1a88b3f5cea124a770a9e18c5eef2524521dc))

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';
 
 .class {
-  color: $blue-dark-90;
+  color: colors.$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: $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/dist/colors.default-dark.js

@@ -104,13 +104,13 @@ export const shapeOtherLowHover = 'var(--k-color-shape-other-low-hover, rgba(0,
 export const shapeOtherLowPressed = 'var(--k-color-shape-other-low-pressed, rgba(0, 0, 0, 0.32))';
 export const shapeOtherNeutralFaintSolid = 'var(--k-color-shape-other-neutral-faint-solid, #333333)';
 export const shapeOtherNeutralFaintSolidHover = 'var(--k-color-shape-other-neutral-faint-solid-hover, #3d3d3d)';
-export const shapeOtherNeutralFaintSolidPressed = 'var(--k-color-shape-other-neutral-faint-solid-pressed, #292929)';
+export const shapeOtherNeutralFaintSolidPressed = 'var(--k-color-shape-other-neutral-faint-solid-pressed, #333333)';
 export const shapeOtherNeutralPaleSolid = 'var(--k-color-shape-other-neutral-pale-solid, #3d3d3d)';
 export const shapeOtherNeutralPaleSolidHover = 'var(--k-color-shape-other-neutral-pale-solid-hover, #484848)';
 export const shapeOtherNeutralPaleSolidPressed = 'var(--k-color-shape-other-neutral-pale-solid-pressed, #333333)';
-export const shapeOtherNeutralSoftSolid = 'var(--k-color-shape-other-neutral-soft-solid, #525252)';
+export const shapeOtherNeutralSoftSolid = 'var(--k-color-shape-other-neutral-soft-solid, #484848)';
 export const shapeOtherNeutralSoftSolidHover = 'var(--k-color-shape-other-neutral-soft-solid-hover, #5d5d5d)';
-export const shapeOtherNeutralSoftSolidPressed = 'var(--k-color-shape-other-neutral-soft-solid-pressed, #484848)';
+export const shapeOtherNeutralSoftSolidPressed = 'var(--k-color-shape-other-neutral-soft-solid-pressed, #3d3d3d)';
 export const shapePaleAccent = 'var(--k-color-shape-pale-accent, rgba(255, 255, 255, 0.16))';
 export const shapePaleAccentHover = 'var(--k-color-shape-pale-accent-hover, rgba(255, 255, 255, 0.24))';
 export const shapePaleAccentPressed = 'var(--k-color-shape-pale-accent-pressed, rgba(255, 255, 255, 0.12))';
@@ -120,8 +120,8 @@ export const shapePaleBrandPressed = 'var(--k-color-shape-pale-brand-pressed, #5
 export const shapePaleError = 'var(--k-color-shape-pale-error, #602a27)';
 export const shapePaleErrorHover = 'var(--k-color-shape-pale-error-hover, #71312e)';
 export const shapePaleErrorPressed = 'var(--k-color-shape-pale-error-pressed, #502421)';
-export const shapePaleNeutralAlpha = 'var(--k-color-shape-pale-neutral-alpha, rgba(255, 255, 255, 0.08))';
-export const shapePaleNeutralAlphaHover = 'var(--k-color-shape-pale-neutral-alpha-hover, rgba(255, 255, 255, 0.12))';
+export const shapePaleNeutralAlpha = 'var(--k-color-shape-pale-neutral-alpha, rgba(255, 255, 255, 0.12))';
+export const shapePaleNeutralAlphaHover = 'var(--k-color-shape-pale-neutral-alpha-hover, rgba(255, 255, 255, 0.16))';
 export const shapePaleNeutralAlphaPressed =
   'var(--k-color-shape-pale-neutral-alpha-pressed, rgba(255, 255, 255, 0.06))';
 export const shapePaleSuccess = 'var(--k-color-shape-pale-success, #27452d)';
@@ -142,7 +142,7 @@ export const shapeSoftErrorPressed = 'var(--k-color-shape-soft-error-pressed, #8
 export const shapeSoftNeutralAlpha = 'var(--k-color-shape-soft-neutral-alpha, rgba(255, 255, 255, 0.16))';
 export const shapeSoftNeutralAlphaHover = 'var(--k-color-shape-soft-neutral-alpha-hover, rgba(255, 255, 255, 0.24))';
 export const shapeSoftNeutralAlphaPressed =
-  'var(--k-color-shape-soft-neutral-alpha-pressed, rgba(255, 255, 255, 0.12))';
+  'var(--k-color-shape-soft-neutral-alpha-pressed, rgba(255, 255, 255, 0.08))';
 export const shapeSoftSuccess = 'var(--k-color-shape-soft-success, #3a6a43)';
 export const shapeSoftSuccessHover = 'var(--k-color-shape-soft-success-hover, #3f784b)';
 export const shapeSoftSuccessPressed = 'var(--k-color-shape-soft-success-pressed, #345e3c)';
@@ -150,22 +150,22 @@ export const shapeSoftWarning = 'var(--k-color-shape-soft-warning, #86612c)';
 export const shapeSoftWarningHover = 'var(--k-color-shape-soft-warning-hover, #956c30)';
 export const shapeSoftWarningPressed = 'var(--k-color-shape-soft-warning-pressed, #775728)';
 export const shapeInvertedBacklessHover = 'var(--k-color-shape-inverted-backless-hover, rgba(0, 0, 0, 0.06))';
-export const shapeInvertedBacklessPressed = 'var(--k-color-shape-inverted-backless-pressed, rgba(0, 0, 0, 0.08))';
+export const shapeInvertedBacklessPressed = 'var(--k-color-shape-inverted-backless-pressed, rgba(0, 0, 0, 0.16))';
 export const shapeInvertedDisabled = 'var(--k-color-shape-inverted-disabled, rgba(0, 0, 0, 0.06))';
 export const shapeInvertedNeutralFaintAlpha = 'var(--k-color-shape-inverted-neutral-faint-alpha, rgba(0, 0, 0, 0.06))';
 export const shapeInvertedNeutralFaintAlphaHover =
-  'var(--k-color-shape-inverted-neutral-faint-alpha-hover, rgba(0, 0, 0, 0.08))';
+  'var(--k-color-shape-inverted-neutral-faint-alpha-hover, rgba(0, 0, 0, 0.12))';
 export const shapeInvertedNeutralFaintAlphaPressed =
-  'var(--k-color-shape-inverted-neutral-faint-alpha-pressed, rgba(0, 0, 0, 0.12))';
+  'var(--k-color-shape-inverted-neutral-faint-alpha-pressed, rgba(0, 0, 0, 0.16))';
 export const shapeInvertedNeutralHeavy = 'var(--k-color-shape-inverted-neutral-heavy, rgba(0, 0, 0, 0.8))';
 export const shapeInvertedNeutralHeavyHover = 'var(--k-color-shape-inverted-neutral-heavy-hover, rgba(0, 0, 0, 0.88))';
 export const shapeInvertedNeutralHeavyPressed =
   'var(--k-color-shape-inverted-neutral-heavy-pressed, rgba(0, 0, 0, 0.72))';
-export const shapeInvertedNeutralPaleAlpha = 'var(--k-color-shape-inverted-neutral-pale-alpha, rgba(0, 0, 0, 0.08))';
+export const shapeInvertedNeutralPaleAlpha = 'var(--k-color-shape-inverted-neutral-pale-alpha, rgba(0, 0, 0, 0.12))';
 export const shapeInvertedNeutralPaleAlphaHover =
-  'var(--k-color-shape-inverted-neutral-pale-alpha-hover, rgba(0, 0, 0, 0.12))';
+  'var(--k-color-shape-inverted-neutral-pale-alpha-hover, rgba(0, 0, 0, 0.16))';
 export const shapeInvertedNeutralPaleAlphaPressed =
-  'var(--k-color-shape-inverted-neutral-pale-alpha-pressed, rgba(0, 0, 0, 0.16))';
+  'var(--k-color-shape-inverted-neutral-pale-alpha-pressed, rgba(0, 0, 0, 0.24))';
 export const shapeInvertedNeutralSoftAlpha = 'var(--k-color-shape-inverted-neutral-soft-alpha, rgba(0, 0, 0, 0.16))';
 export const shapeInvertedNeutralSoftAlphaHover =
   'var(--k-color-shape-inverted-neutral-soft-alpha-hover, rgba(0, 0, 0, 0.24))';
@@ -277,15 +277,15 @@ export const illustrationSymbol = 'var(--k-color-illustration-symbol, #fea09c)';
 export const illustrationWhite = 'var(--k-color-illustration-white, #ffffff)';
 export const customizableBoldBlack = 'var(--k-color-customizable-bold-black, #b1b1b1)';
 export const customizableBoldBlue = 'var(--k-color-customizable-bold-blue, #2b8df2)';
-export const customizableBoldBlueDeep = 'var(--k-color-customizable-bold-blue-deep, #5183ff)';
+export const customizableBoldBlueDeep = 'var(--k-color-customizable-bold-blue-deep, #3e72ff)';
 export const customizableBoldGray = 'var(--k-color-customizable-bold-gray, #696969)';
 export const customizableBoldGreen = 'var(--k-color-customizable-bold-green, #2ca651)';
-export const customizableBoldMint = 'var(--k-color-customizable-bold-mint, #00a38b)';
-export const customizableBoldOrange = 'var(--k-color-customizable-bold-orange, #d96528)';
+export const customizableBoldMint = 'var(--k-color-customizable-bold-mint, #01b197)';
+export const customizableBoldOrange = 'var(--k-color-customizable-bold-orange, #ed6d28)';
 export const customizableBoldPurple = 'var(--k-color-customizable-bold-purple, #be5ad8)';
 export const customizableBoldRed = 'var(--k-color-customizable-bold-red, #ee4948)';
 export const customizableBoldViolet = 'var(--k-color-customizable-bold-violet, #956ef2)';
-export const customizableBoldYellow = 'var(--k-color-customizable-bold-yellow, #d19a00)';
+export const customizableBoldYellow = 'var(--k-color-customizable-bold-yellow, #dfa700)';
 export const customizableFaintBlack = 'var(--k-color-customizable-faint-black, #484848)';
 export const customizableFaintBlue = 'var(--k-color-customizable-faint-blue, #1f344d)';
 export const customizableFaintBlueDeep = 'var(--k-color-customizable-faint-blue-deep, #1e305c)';

package/dist/colors.default-light.js

@@ -75,8 +75,8 @@ export const shapeFaintError = 'var(--k-color-shape-faint-error, #ffedef)';
 export const shapeFaintErrorHover = 'var(--k-color-shape-faint-error-hover, #ffdadd)';
 export const shapeFaintErrorPressed = 'var(--k-color-shape-faint-error-pressed, #f5dee0)';
 export const shapeFaintNeutralAlpha = 'var(--k-color-shape-faint-neutral-alpha, rgba(0, 0, 0, 0.06))';
-export const shapeFaintNeutralAlphaHover = 'var(--k-color-shape-faint-neutral-alpha-hover, rgba(0, 0, 0, 0.08))';
-export const shapeFaintNeutralAlphaPressed = 'var(--k-color-shape-faint-neutral-alpha-pressed, rgba(0, 0, 0, 0.12))';
+export const shapeFaintNeutralAlphaHover = 'var(--k-color-shape-faint-neutral-alpha-hover, rgba(0, 0, 0, 0.12))';
+export const shapeFaintNeutralAlphaPressed = 'var(--k-color-shape-faint-neutral-alpha-pressed, rgba(0, 0, 0, 0.16))';
 export const shapeFaintSuccess = 'var(--k-color-shape-faint-success, #defbe2)';
 export const shapeFaintSuccessHover = 'var(--k-color-shape-faint-success-hover, #c3f3ca)';
 export const shapeFaintSuccessPressed = 'var(--k-color-shape-faint-success-pressed, #d1edd5)';
@@ -89,7 +89,7 @@ export const shapeHeavySuccess = 'var(--k-color-shape-heavy-success, #0b4a1f)';
 export const shapeHeavyWarning = 'var(--k-color-shape-heavy-warning, #543600)';
 export const shapeOtherAccentBoldDisabled = 'var(--k-color-shape-other-accent-bold-disabled, rgba(0, 0, 0, 0.32))';
 export const shapeOtherBacklessHover = 'var(--k-color-shape-other-backless-hover, rgba(0, 0, 0, 0.06))';
-export const shapeOtherBacklessPressed = 'var(--k-color-shape-other-backless-pressed, rgba(0, 0, 0, 0.08))';
+export const shapeOtherBacklessPressed = 'var(--k-color-shape-other-backless-pressed, rgba(0, 0, 0, 0.16))';
 export const shapeOtherBase = 'var(--k-color-shape-other-base, #ffffff)';
 export const shapeOtherBaseHover = 'var(--k-color-shape-other-base-hover, #f2f2f2)';
 export const shapeOtherBasePressed = 'var(--k-color-shape-other-base-pressed, #e4e4e4)';
@@ -106,7 +106,7 @@ export const shapeOtherNeutralFaintSolidPressed = 'var(--k-color-shape-other-neu
 export const shapeOtherNeutralPaleSolid = 'var(--k-color-shape-other-neutral-pale-solid, #e4e4e4)';
 export const shapeOtherNeutralPaleSolidHover = 'var(--k-color-shape-other-neutral-pale-solid-hover, #d7d7d7)';
 export const shapeOtherNeutralPaleSolidPressed = 'var(--k-color-shape-other-neutral-pale-solid-pressed, #cacaca)';
-export const shapeOtherNeutralSoftSolid = 'var(--k-color-shape-other-neutral-soft-solid, #cacaca)';
+export const shapeOtherNeutralSoftSolid = 'var(--k-color-shape-other-neutral-soft-solid, #d7d7d7)';
 export const shapeOtherNeutralSoftSolidHover = 'var(--k-color-shape-other-neutral-soft-solid-hover, #bebebe)';
 export const shapeOtherNeutralSoftSolidPressed = 'var(--k-color-shape-other-neutral-soft-solid-pressed, #b1b1b1)';
 export const shapePaleAccent = 'var(--k-color-shape-pale-accent, rgba(0, 0, 0, 0.16))';
@@ -118,9 +118,9 @@ export const shapePaleBrandPressed = 'var(--k-color-shape-pale-brand-pressed, #f
 export const shapePaleError = 'var(--k-color-shape-pale-error, #ffdadd)';
 export const shapePaleErrorHover = 'var(--k-color-shape-pale-error-hover, #ffc7c7)';
 export const shapePaleErrorPressed = 'var(--k-color-shape-pale-error-pressed, #f2cdcd)';
-export const shapePaleNeutralAlpha = 'var(--k-color-shape-pale-neutral-alpha, rgba(0, 0, 0, 0.08))';
-export const shapePaleNeutralAlphaHover = 'var(--k-color-shape-pale-neutral-alpha-hover, rgba(0, 0, 0, 0.12))';
-export const shapePaleNeutralAlphaPressed = 'var(--k-color-shape-pale-neutral-alpha-pressed, rgba(0, 0, 0, 0.16))';
+export const shapePaleNeutralAlpha = 'var(--k-color-shape-pale-neutral-alpha, rgba(0, 0, 0, 0.12))';
+export const shapePaleNeutralAlphaHover = 'var(--k-color-shape-pale-neutral-alpha-hover, rgba(0, 0, 0, 0.16))';
+export const shapePaleNeutralAlphaPressed = 'var(--k-color-shape-pale-neutral-alpha-pressed, rgba(0, 0, 0, 0.24))';
 export const shapePaleSuccess = 'var(--k-color-shape-pale-success, #c3f3ca)';
 export const shapePaleSuccessHover = 'var(--k-color-shape-pale-success-hover, #a7ebb2)';
 export const shapePaleSuccessPressed = 'var(--k-color-shape-pale-success-pressed, #bae4c0)';
@@ -160,9 +160,9 @@ export const shapeInvertedNeutralHeavyHover =
 export const shapeInvertedNeutralHeavyPressed =
   'var(--k-color-shape-inverted-neutral-heavy-pressed, rgba(255, 255, 255, 0.72))';
 export const shapeInvertedNeutralPaleAlpha =
-  'var(--k-color-shape-inverted-neutral-pale-alpha, rgba(255, 255, 255, 0.08))';
+  'var(--k-color-shape-inverted-neutral-pale-alpha, rgba(255, 255, 255, 0.12))';
 export const shapeInvertedNeutralPaleAlphaHover =
-  'var(--k-color-shape-inverted-neutral-pale-alpha-hover, rgba(255, 255, 255, 0.12))';
+  'var(--k-color-shape-inverted-neutral-pale-alpha-hover, rgba(255, 255, 255, 0.16))';
 export const shapeInvertedNeutralPaleAlphaPressed =
   'var(--k-color-shape-inverted-neutral-pale-alpha-pressed, rgba(255, 255, 255, 0.06))';
 export const shapeInvertedNeutralSoftAlpha =
@@ -170,7 +170,7 @@ export const shapeInvertedNeutralSoftAlpha =
 export const shapeInvertedNeutralSoftAlphaHover =
   'var(--k-color-shape-inverted-neutral-soft-alpha-hover, rgba(255, 255, 255, 0.24))';
 export const shapeInvertedNeutralSoftAlphaPressed =
-  'var(--k-color-shape-inverted-neutral-soft-alpha-pressed, rgba(255, 255, 255, 0.12))';
+  'var(--k-color-shape-inverted-neutral-soft-alpha-pressed, rgba(255, 255, 255, 0.08))';
 export const shapeConstBacklessBlackHover = 'var(--k-color-shape-const-backless-black-hover, rgba(0, 0, 0, 0.12))';
 export const shapeConstBacklessBlackPressed = 'var(--k-color-shape-const-backless-black-pressed, rgba(0, 0, 0, 0.16))';
 export const shapeConstBacklessWhiteHover =
@@ -281,21 +281,21 @@ export const illustrationSymbol = 'var(--k-color-illustration-symbol, #fea09c)';
 export const illustrationWhite = 'var(--k-color-illustration-white, #ffffff)';
 export const customizableBoldBlack = 'var(--k-color-customizable-bold-black, #696969)';
 export const customizableBoldBlue = 'var(--k-color-customizable-bold-blue, #369bff)';
-export const customizableBoldBlueDeep = 'var(--k-color-customizable-bold-blue-deep, #6592ff)';
+export const customizableBoldBlueDeep = 'var(--k-color-customizable-bold-blue-deep, #5183ff)';
 export const customizableBoldGray = 'var(--k-color-customizable-bold-gray, #a4a4a4)';
 export const customizableBoldGreen = 'var(--k-color-customizable-bold-green, #00b74e)';
-export const customizableBoldMint = 'var(--k-color-customizable-bold-mint, #01b197)';
+export const customizableBoldMint = 'var(--k-color-customizable-bold-mint, #05bfa3)';
 export const customizableBoldOrange = 'var(--k-color-customizable-bold-orange, #f56600)';
 export const customizableBoldPurple = 'var(--k-color-customizable-bold-purple, #cf60ec)';
 export const customizableBoldRed = 'var(--k-color-customizable-bold-red, #ff5352)';
 export const customizableBoldViolet = 'var(--k-color-customizable-bold-violet, #a17bff)';
-export const customizableBoldYellow = 'var(--k-color-customizable-bold-yellow, #dfa700)';
+export const customizableBoldYellow = 'var(--k-color-customizable-bold-yellow, #ecb400)';
 export const customizableFaintBlack = 'var(--k-color-customizable-faint-black, #e4e4e4)';
 export const customizableFaintBlue = 'var(--k-color-customizable-faint-blue, #e2f5ff)';
 export const customizableFaintBlueDeep = 'var(--k-color-customizable-faint-blue-deep, #e8f3ff)';
 export const customizableFaintGray = 'var(--k-color-customizable-faint-gray, #f2f2f2)';
-export const customizableFaintGreen = 'var(--k-color-customizable-faint-green, #d4ffda)';
-export const customizableFaintMint = 'var(--k-color-customizable-faint-mint, #c8fff7)';
+export const customizableFaintGreen = 'var(--k-color-customizable-faint-green, #defbe2)';
+export const customizableFaintMint = 'var(--k-color-customizable-faint-mint, #d2fcf6)';
 export const customizableFaintOrange = 'var(--k-color-customizable-faint-orange, #ffeee1)';
 export const customizableFaintPurple = 'var(--k-color-customizable-faint-purple, #ffeaff)';
 export const customizableFaintRed = 'var(--k-color-customizable-faint-red, #ffedef)';
@@ -316,8 +316,8 @@ export const customizablePaleBlack = 'var(--k-color-customizable-pale-black, #d7
 export const customizablePaleBlue = 'var(--k-color-customizable-pale-blue, #c7ebff)';
 export const customizablePaleBlueDeep = 'var(--k-color-customizable-pale-blue-deep, #d2e7ff)';
 export const customizablePaleGray = 'var(--k-color-customizable-pale-gray, #e4e4e4)';
-export const customizablePaleGreen = 'var(--k-color-customizable-pale-green, #b0fabd)';
-export const customizablePaleMint = 'var(--k-color-customizable-pale-mint, #88fdeb)';
+export const customizablePaleGreen = 'var(--k-color-customizable-pale-green, #c3f3ca)';
+export const customizablePaleMint = 'var(--k-color-customizable-pale-mint, #adf5e9)';
 export const customizablePaleOrange = 'var(--k-color-customizable-pale-orange, #ffddc6)';
 export const customizablePalePurple = 'var(--k-color-customizable-pale-purple, #fbd6ff)';
 export const customizablePaleRed = 'var(--k-color-customizable-pale-red, #ffdadd)';

package/dist/esm/consts/params/abney-correction.d.ts

@@ -0,0 +1,2 @@
+import type { GeneratorColorAbneyCorrection } from '../../types/tokens-base-generator.js';
+export declare const ABNEY_CORRECTION: GeneratorColorAbneyCorrection;

package/dist/esm/consts/params/chroma-params.d.ts

@@ -0,0 +1,2 @@
+import type { GeneratorColorChromaParamsGroup } from '../../types/tokens-base-generator.js';
+export declare const CHROMA_PARAMS: GeneratorColorChromaParamsGroup;

package/dist/esm/{constants/chroma-settings.js → consts/params/chroma-params.js}

@@ -1,4 +1,4 @@
-export var CHROMA_SETTINGS = {
+export var CHROMA_PARAMS = {
   20: {
     vivid: { rel: 100, max: 12 },
     normal: { rel: 66, min: 4.4, max: 8 },

package/dist/esm/consts/params/logo-lightness.d.ts

@@ -0,0 +1 @@
+export declare const LOGO_LIGHTNESS_MIN = 64;

package/dist/esm/consts/params/logo-lightness.js

@@ -0,0 +1 @@
+export var LOGO_LIGHTNESS_MIN = 64;

package/dist/esm/get-colors-base.d.ts

@@ -0,0 +1,12 @@
+import { type ColorFormat } from './utils/convert-color.js';
+import * as DEFAULT_SWATCH from './consts/default-swatch.js';
+import type { BaseTokens } from './types/tokens-base.js';
+type PresetOrCustom<T extends string> = T | (string & Record<never, never>);
+export interface ConfigOptions {
+  brand: PresetOrCustom<keyof typeof DEFAULT_SWATCH.brand>;
+  accent: PresetOrCustom<'brand' | 'gray'>;
+  system?: typeof DEFAULT_SWATCH.system;
+  format?: ColorFormat;
+}
+export declare function getColorsBase({ brand, accent, system, format }: ConfigOptions): BaseTokens;
+export {};