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

package/lib/utils/convert-color.js

@@ -0,0 +1,144 @@
+import { converter, formatHex } from 'culori';
+export function convertColorFormat(obj, format) {
+    if (format === void 0) { format = 'hex/rgba'; }
+    if (format === 'oklch') {
+        return convertToOklchRecursive(obj);
+    }
+    var result = convertOklchToHex(obj);
+    result = convertAlphaOklchToRgba(result);
+    if (format === 'hex-aarrggbb') {
+        return convertToAarrggbbRecursive(result);
+    }
+    return result;
+}
+function convertToOklchRecursive(obj) {
+    if (typeof obj !== 'object' || obj === null) {
+        return obj;
+    }
+    if (Array.isArray(obj)) {
+        return obj.map(function (item) { return convertToOklchRecursive(item); });
+    }
+    var newObj = {};
+    var toOklch = converter('oklch');
+    for (var key in obj) {
+        var value = obj[key];
+        if (typeof value === 'string') {
+            if (value.startsWith('oklch(')) {
+                newObj[key] = value;
+            }
+            else {
+                var color = toOklch(value);
+                if (color) {
+                    var l = (color.l * 100).toFixed(3);
+                    var c = color.c.toFixed(3);
+                    var h = (color.h || 0).toFixed(0);
+                    var a = color.alpha !== undefined && color.alpha < 1 ? " / ".concat(color.alpha) : '';
+                    newObj[key] = "oklch(".concat(l, "% ").concat(c, " ").concat(h).concat(a, ")");
+                }
+                else {
+                    newObj[key] = value;
+                }
+            }
+        }
+        else if (typeof value === 'object' && value !== null) {
+            newObj[key] = convertToOklchRecursive(value);
+        }
+        else {
+            newObj[key] = value;
+        }
+    }
+    return newObj;
+}
+function convertOklchToHex(obj) {
+    if (typeof obj !== 'object' || obj === null) {
+        return obj;
+    }
+    if (Array.isArray(obj)) {
+        return obj.map(function (item) { return convertOklchToHex(item); });
+    }
+    var newObj = {};
+    for (var key in obj) {
+        var value = obj[key];
+        if (typeof value === 'string' && value.startsWith('oklch(') && !value.includes('/')) {
+            var oklchColor = converter('oklch')(value);
+            newObj[key] = oklchColor ? formatHex(oklchColor) : value;
+        }
+        else if (typeof value === 'object' && value !== null) {
+            newObj[key] = convertOklchToHex(value);
+        }
+        else {
+            newObj[key] = value;
+        }
+    }
+    return newObj;
+}
+function convertAlphaOklchToRgba(obj) {
+    var _a;
+    if (typeof obj !== 'object' || obj === null) {
+        return obj;
+    }
+    if (Array.isArray(obj)) {
+        return obj.map(function (item) { return convertAlphaOklchToRgba(item); });
+    }
+    var newObj = {};
+    for (var key in obj) {
+        var value = obj[key];
+        if (typeof value === 'string' && value.startsWith('oklch(') && value.includes('/')) {
+            var rgbaColor = converter('rgb')(value);
+            if (rgbaColor) {
+                var r = Math.round(rgbaColor.r * 255);
+                var g = Math.round(rgbaColor.g * 255);
+                var b = Math.round(rgbaColor.b * 255);
+                var a = (_a = rgbaColor.alpha) !== null && _a !== void 0 ? _a : 1;
+                newObj[key] = "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(a, ")");
+                continue;
+            }
+        }
+        if (typeof value === 'object' && value !== null) {
+            newObj[key] = convertAlphaOklchToRgba(value);
+        }
+        else {
+            newObj[key] = value;
+        }
+    }
+    return newObj;
+}
+var convertToAarrggbb = function (colorString) {
+    var _a;
+    var color = converter('rgb')(colorString);
+    if (!color) {
+        return colorString;
+    }
+    var r = Math.round(color.r * 255);
+    var g = Math.round(color.g * 255);
+    var b = Math.round(color.b * 255);
+    var alpha = Math.round(((_a = color.alpha) !== null && _a !== void 0 ? _a : 1) * 255);
+    var toHex = function (c) { return c.toString(16).padStart(2, '0'); };
+    var rgbHex = "".concat(toHex(r)).concat(toHex(g)).concat(toHex(b)).toUpperCase();
+    if (alpha === 255) {
+        return "#".concat(rgbHex);
+    }
+    return "#".concat(toHex(alpha)).concat(rgbHex).toUpperCase();
+};
+function convertToAarrggbbRecursive(obj) {
+    if (typeof obj !== 'object' || obj === null) {
+        return obj;
+    }
+    if (Array.isArray(obj)) {
+        return obj.map(function (item) { return convertToAarrggbbRecursive(item); });
+    }
+    var newObj = {};
+    for (var key in obj) {
+        var value = obj[key];
+        if (typeof value === 'string') {
+            newObj[key] = convertToAarrggbb(value);
+        }
+        else if (typeof value === 'object' && value !== null) {
+            newObj[key] = convertToAarrggbbRecursive(value);
+        }
+        else {
+            newObj[key] = value;
+        }
+    }
+    return newObj;
+}

package/lib/utils/convert-color.ts

@@ -0,0 +1,163 @@
+import { converter, formatHex, type Rgb } from 'culori';
+
+import type { ColorObject, ColorStructure } from '../types/tokens.js';
+
+export type ColorFormat = 'hex/rgba' | 'oklch' | 'hex-aarrggbb';
+
+export function convertColorFormat(obj: ColorStructure, format: ColorFormat = 'hex/rgba'): ColorStructure {
+  if (format === 'oklch') {
+    return convertToOklchRecursive(obj);
+  }
+
+  let result = convertOklchToHex(obj);
+  result = convertAlphaOklchToRgba(result);
+
+  if (format === 'hex-aarrggbb') {
+    return convertToAarrggbbRecursive(result);
+  }
+
+  return result;
+}
+
+function convertToOklchRecursive(obj: ColorStructure): ColorStructure {
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map((item) => convertToOklchRecursive(item as ColorStructure));
+  }
+
+  const newObj: ColorObject = {};
+  const toOklch = converter('oklch');
+
+  for (const key in obj) {
+    const value = obj[key];
+
+    if (typeof value === 'string') {
+      if (value.startsWith('oklch(')) {
+        newObj[key] = value;
+      } else {
+        const color = toOklch(value);
+        if (color) {
+          const l = (color.l * 100).toFixed(3);
+          const c = color.c.toFixed(3);
+          const h = (color.h || 0).toFixed(0);
+          const a = color.alpha !== undefined && color.alpha < 1 ? ` / ${color.alpha}` : '';
+          newObj[key] = `oklch(${l}% ${c} ${h}${a})`;
+        } else {
+          newObj[key] = value;
+        }
+      }
+    } else if (typeof value === 'object' && value !== null) {
+      newObj[key] = convertToOklchRecursive(value as ColorStructure) as any;
+    } else {
+      newObj[key] = value;
+    }
+  }
+  return newObj as ColorStructure;
+}
+
+function convertOklchToHex(obj: ColorStructure): ColorStructure {
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map((item) => convertOklchToHex(item as ColorStructure));
+  }
+
+  const newObj: ColorObject = {};
+  for (const key in obj) {
+    const value = obj[key];
+
+    if (typeof value === 'string' && value.startsWith('oklch(') && !value.includes('/')) {
+      const oklchColor = converter('oklch')(value);
+      newObj[key] = oklchColor ? formatHex(oklchColor) : value;
+    } else if (typeof value === 'object' && value !== null) {
+      newObj[key] = convertOklchToHex(value as ColorStructure) as any;
+    } else {
+      newObj[key] = value;
+    }
+  }
+  return newObj as ColorStructure;
+}
+
+function convertAlphaOklchToRgba(obj: ColorStructure): ColorStructure {
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map((item) => convertAlphaOklchToRgba(item as ColorStructure));
+  }
+
+  const newObj: ColorObject = {};
+  for (const key in obj) {
+    const value = obj[key];
+
+    if (typeof value === 'string' && value.startsWith('oklch(') && value.includes('/')) {
+      const rgbaColor = converter('rgb')(value);
+      if (rgbaColor) {
+        const r = Math.round(rgbaColor.r * 255);
+        const g = Math.round(rgbaColor.g * 255);
+        const b = Math.round(rgbaColor.b * 255);
+        const a = rgbaColor.alpha ?? 1;
+        newObj[key] = `rgba(${r}, ${g}, ${b}, ${a})`;
+        continue;
+      }
+    }
+
+    if (typeof value === 'object' && value !== null) {
+      newObj[key] = convertAlphaOklchToRgba(value as ColorStructure) as any;
+    } else {
+      newObj[key] = value;
+    }
+  }
+  return newObj as ColorStructure;
+}
+
+const convertToAarrggbb = (colorString: string): string => {
+  const color = converter('rgb')(colorString) as Rgb;
+  if (!color) {
+    return colorString;
+  }
+
+  const r = Math.round(color.r * 255);
+  const g = Math.round(color.g * 255);
+  const b = Math.round(color.b * 255);
+  const alpha = Math.round((color.alpha ?? 1) * 255);
+
+  const toHex = (c: number) => c.toString(16).padStart(2, '0');
+  const rgbHex = `${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
+
+  if (alpha === 255) {
+    return `#${rgbHex}`;
+  }
+
+  return `#${toHex(alpha)}${rgbHex}`.toUpperCase();
+};
+
+function convertToAarrggbbRecursive(obj: ColorStructure): ColorStructure {
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
+  }
+
+  if (Array.isArray(obj)) {
+    return obj.map((item) => convertToAarrggbbRecursive(item as ColorStructure));
+  }
+
+  const newObj: ColorObject = {};
+  for (const key in obj) {
+    const value = obj[key];
+
+    if (typeof value === 'string') {
+      newObj[key] = convertToAarrggbb(value);
+    } else if (typeof value === 'object' && value !== null) {
+      newObj[key] = convertToAarrggbbRecursive(value as ColorStructure) as any;
+    } else {
+      newObj[key] = value;
+    }
+  }
+  return newObj as ColorStructure;
+}

package/lib/utils/format-variable.js

@@ -0,0 +1,6 @@
+export var camelCaseToKebabCase = function (str) {
+    return str.replace(/[A-Z]/g, function (match) { return "-".concat(match.toLowerCase()); });
+};
+export var kebabCaseToCamelCase = function (str) {
+    return str.replace(/-(\w)/g, function (_, c) { return c.toUpperCase(); });
+};

package/lib/utils/format-variable.ts

@@ -0,0 +1,7 @@
+export const camelCaseToKebabCase = (str: string) => {
+  return str.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+};
+
+export const kebabCaseToCamelCase = (str: string) => {
+  return str.replace(/-(\w)/g, (_, c) => c.toUpperCase());
+};

package/package.json

@@ -1,37 +1,62 @@
 {
   "name": "@skbkontur/colors",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.4",
   "author": "Kontur",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "module": "dist/esm/get-colors.js",
-  "main": "dist/cjs/get-colors.js",
+  "type": "module",
   "license": "UNLICENSED",
-  "scripts": {
-    "clean": "git clean -fdxqe node_modules",
-    "extract-tokens": "node --require ./scripts/babel-register -- scripts/extract-tokens-from-figma.ts",
-    "build": "npm run build:cjs && npm run build:esm && npm run build:static",
-    "build:cjs": "tsc -p tsconfig.cjs.json",
-    "build:esm": "tsc -p tsconfig.esm.json",
-    "build:static": "node --require ./scripts/babel-register -- scripts/generate.ts && prettier ./dist --write && npx stylelint \"**/*.{css,scss,less}\" --fix"
-  },
   "sideEffects": false,
   "files": [
-    "dist",
+    "/lib",
+    "/tokens",
+    "/tokens-mobile",
     "colors.*"
   ],
-  "devDependencies": {
-    "@babel/preset-typescript": "7.22.5",
-    "@babel/register": "7.22.5",
-    "@skbkontur/react-ui": "5.4.2",
-    "rimraf": "^4.1.2"
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./colors.js",
+    "./colors.scss": "./colors.scss",
+    "./colors.less": "./colors.less",
+    "./get-colors": "./lib/get-colors.js",
+    "./light-default": "./colors-light-default.js",
+    "./dark-default": "./colors-dark-default.js",
+    "./tokens/brand-orange_accent-gray.css": "./tokens/brand-orange_accent-gray.css",
+    "./tokens/brand-blue_accent-gray.css": "./tokens/brand-blue_accent-gray.css",
+    "./tokens/brand-blue_accent-brand.css": "./tokens/brand-blue_accent-brand.css",
+    "./tokens/brand-blue-deep_accent-brand.css": "./tokens/brand-blue-deep_accent-brand.css",
+    "./tokens/brand-blue-deep_accent-gray.css": "./tokens/brand-blue-deep_accent-gray.css",
+    "./tokens/brand-green_accent-brand.css": "./tokens/brand-green_accent-brand.css",
+    "./tokens/brand-green_accent-gray.css": "./tokens/brand-green_accent-gray.css",
+    "./tokens/brand-mint_accent-brand.css": "./tokens/brand-mint_accent-brand.css",
+    "./tokens/brand-mint_accent-gray.css": "./tokens/brand-mint_accent-gray.css",
+    "./tokens/brand-purple_accent-brand.css": "./tokens/brand-purple_accent-brand.css",
+    "./tokens/brand-purple_accent-gray.css": "./tokens/brand-purple_accent-gray.css",
+    "./tokens/brand-violet_accent-brand.css": "./tokens/brand-violet_accent-brand.css",
+    "./tokens/brand-violet_accent-gray.css": "./tokens/brand-violet_accent-gray.css"
+  },
+  "scripts": {
+    "prebuild": "node --import=tsx scripts/create-tokens-from-figma.ts",
+    "build": "npm run build:static && npm run build:esm",
+    "build:esm": "tsc",
+    "build:static": "node --import=tsx scripts/create-tokens-files.ts && prettier . --write && npx stylelint \"**/*.{css,scss,less}\" --fix",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "git clean -fdxqe node_modules"
   },
   "dependencies": {
-    "@types/apca-w3": "0.1.3",
-    "@types/culori": "4.0.1",
     "apca-w3": "0.1.9",
     "culori": "4.0.2"
+  },
+  "devDependencies": {
+    "@skbkontur/react-ui": "5.5.1",
+    "@types/apca-w3": "0.1.3",
+    "@types/culori": "4.0.1",
+    "vitest": "^2.1.6"
+  },
+  "colors": {
+    "_": "./"
   }
 }

package/{dist/tokens → tokens}/brand-blue-deep_accent-brand.css

@@ -76,8 +76,8 @@
   --k-color-shape-faint-error-hover: #ffdadd;
   --k-color-shape-faint-error-pressed: #f5dee0;
   --k-color-shape-faint-neutral-alpha: rgba(0, 0, 0, 0.06);
-  --k-color-shape-faint-neutral-alpha-hover: rgba(0, 0, 0, 0.08);
-  --k-color-shape-faint-neutral-alpha-pressed: rgba(0, 0, 0, 0.12);
+  --k-color-shape-faint-neutral-alpha-hover: rgba(0, 0, 0, 0.12);
+  --k-color-shape-faint-neutral-alpha-pressed: rgba(0, 0, 0, 0.16);
   --k-color-shape-faint-success: #defbe2;
   --k-color-shape-faint-success-hover: #c3f3ca;
   --k-color-shape-faint-success-pressed: #d1edd5;
@@ -90,7 +90,7 @@
   --k-color-shape-heavy-warning: #543600;
   --k-color-shape-other-accent-bold-disabled: rgba(0, 0, 0, 0.32);
   --k-color-shape-other-backless-hover: rgba(0, 0, 0, 0.06);
-  --k-color-shape-other-backless-pressed: rgba(0, 0, 0, 0.08);
+  --k-color-shape-other-backless-pressed: rgba(0, 0, 0, 0.16);
   --k-color-shape-other-base: #fff;
   --k-color-shape-other-base-hover: #f2f2f2;
   --k-color-shape-other-base-pressed: #e4e4e4;
@@ -107,7 +107,7 @@
   --k-color-shape-other-neutral-pale-solid: #e4e4e4;
   --k-color-shape-other-neutral-pale-solid-hover: #d7d7d7;
   --k-color-shape-other-neutral-pale-solid-pressed: #cacaca;
-  --k-color-shape-other-neutral-soft-solid: #cacaca;
+  --k-color-shape-other-neutral-soft-solid: #d7d7d7;
   --k-color-shape-other-neutral-soft-solid-hover: #bebebe;
   --k-color-shape-other-neutral-soft-solid-pressed: #b1b1b1;
   --k-color-shape-pale-accent: #d2e7ff;
@@ -119,9 +119,9 @@
   --k-color-shape-pale-error: #ffdadd;
   --k-color-shape-pale-error-hover: #ffc7c7;
   --k-color-shape-pale-error-pressed: #f2cdcd;
-  --k-color-shape-pale-neutral-alpha: rgba(0, 0, 0, 0.08);
-  --k-color-shape-pale-neutral-alpha-hover: rgba(0, 0, 0, 0.12);
-  --k-color-shape-pale-neutral-alpha-pressed: rgba(0, 0, 0, 0.16);
+  --k-color-shape-pale-neutral-alpha: rgba(0, 0, 0, 0.12);
+  --k-color-shape-pale-neutral-alpha-hover: rgba(0, 0, 0, 0.16);
+  --k-color-shape-pale-neutral-alpha-pressed: rgba(0, 0, 0, 0.24);
   --k-color-shape-pale-success: #c3f3ca;
   --k-color-shape-pale-success-hover: #a7ebb2;
   --k-color-shape-pale-success-pressed: #bae4c0;
@@ -155,12 +155,12 @@
   --k-color-shape-inverted-neutral-heavy: #fff;
   --k-color-shape-inverted-neutral-heavy-hover: rgba(255, 255, 255, 0.88);
   --k-color-shape-inverted-neutral-heavy-pressed: rgba(255, 255, 255, 0.72);
-  --k-color-shape-inverted-neutral-pale-alpha: rgba(255, 255, 255, 0.08);
-  --k-color-shape-inverted-neutral-pale-alpha-hover: rgba(255, 255, 255, 0.12);
+  --k-color-shape-inverted-neutral-pale-alpha: rgba(255, 255, 255, 0.12);
+  --k-color-shape-inverted-neutral-pale-alpha-hover: rgba(255, 255, 255, 0.16);
   --k-color-shape-inverted-neutral-pale-alpha-pressed: rgba(255, 255, 255, 0.06);
   --k-color-shape-inverted-neutral-soft-alpha: rgba(255, 255, 255, 0.16);
   --k-color-shape-inverted-neutral-soft-alpha-hover: rgba(255, 255, 255, 0.24);
-  --k-color-shape-inverted-neutral-soft-alpha-pressed: rgba(255, 255, 255, 0.12);
+  --k-color-shape-inverted-neutral-soft-alpha-pressed: rgba(255, 255, 255, 0.08);
   --k-color-shape-const-backless-black-hover: rgba(0, 0, 0, 0.12);
   --k-color-shape-const-backless-black-pressed: rgba(0, 0, 0, 0.16);
   --k-color-shape-const-backless-white-hover: rgba(255, 255, 255, 0.12);
@@ -265,21 +265,21 @@
   --k-color-illustration-white: #fff;
   --k-color-customizable-bold-black: #696969;
   --k-color-customizable-bold-blue: #369bff;
-  --k-color-customizable-bold-blue-deep: #6592ff;
+  --k-color-customizable-bold-blue-deep: #5183ff;
   --k-color-customizable-bold-gray: #a4a4a4;
   --k-color-customizable-bold-green: #00b74e;
-  --k-color-customizable-bold-mint: #01b197;
+  --k-color-customizable-bold-mint: #05bfa3;
   --k-color-customizable-bold-orange: #f56600;
   --k-color-customizable-bold-purple: #cf60ec;
   --k-color-customizable-bold-red: #ff5352;
   --k-color-customizable-bold-violet: #a17bff;
-  --k-color-customizable-bold-yellow: #dfa700;
+  --k-color-customizable-bold-yellow: #ecb400;
   --k-color-customizable-faint-black: #e4e4e4;
   --k-color-customizable-faint-blue: #e2f5ff;
   --k-color-customizable-faint-blue-deep: #e8f3ff;
   --k-color-customizable-faint-gray: #f2f2f2;
-  --k-color-customizable-faint-green: #d4ffda;
-  --k-color-customizable-faint-mint: #c8fff7;
+  --k-color-customizable-faint-green: #defbe2;
+  --k-color-customizable-faint-mint: #d2fcf6;
   --k-color-customizable-faint-orange: #ffeee1;
   --k-color-customizable-faint-purple: #ffeaff;
   --k-color-customizable-faint-red: #ffedef;
@@ -300,8 +300,8 @@
   --k-color-customizable-pale-blue: #c7ebff;
   --k-color-customizable-pale-blue-deep: #d2e7ff;
   --k-color-customizable-pale-gray: #e4e4e4;
-  --k-color-customizable-pale-green: #b0fabd;
-  --k-color-customizable-pale-mint: #88fdeb;
+  --k-color-customizable-pale-green: #c3f3ca;
+  --k-color-customizable-pale-mint: #adf5e9;
   --k-color-customizable-pale-orange: #ffddc6;
   --k-color-customizable-pale-purple: #fbd6ff;
   --k-color-customizable-pale-red: #ffdadd;
@@ -425,13 +425,13 @@
   --k-color-shape-other-low-pressed: rgba(0, 0, 0, 0.32);
   --k-color-shape-other-neutral-faint-solid: #333;
   --k-color-shape-other-neutral-faint-solid-hover: #3d3d3d;
-  --k-color-shape-other-neutral-faint-solid-pressed: #292929;
+  --k-color-shape-other-neutral-faint-solid-pressed: #333;
   --k-color-shape-other-neutral-pale-solid: #3d3d3d;
   --k-color-shape-other-neutral-pale-solid-hover: #484848;
   --k-color-shape-other-neutral-pale-solid-pressed: #333;
-  --k-color-shape-other-neutral-soft-solid: #525252;
+  --k-color-shape-other-neutral-soft-solid: #484848;
   --k-color-shape-other-neutral-soft-solid-hover: #5d5d5d;
-  --k-color-shape-other-neutral-soft-solid-pressed: #484848;
+  --k-color-shape-other-neutral-soft-solid-pressed: #3d3d3d;
   --k-color-shape-pale-accent: #243a6e;
   --k-color-shape-pale-accent-hover: #2b4480;
   --k-color-shape-pale-accent-pressed: #1e305c;
@@ -441,8 +441,8 @@
   --k-color-shape-pale-error: #602a27;
   --k-color-shape-pale-error-hover: #71312e;
   --k-color-shape-pale-error-pressed: #502421;
-  --k-color-shape-pale-neutral-alpha: rgba(255, 255, 255, 0.08);
-  --k-color-shape-pale-neutral-alpha-hover: rgba(255, 255, 255, 0.12);
+  --k-color-shape-pale-neutral-alpha: rgba(255, 255, 255, 0.12);
+  --k-color-shape-pale-neutral-alpha-hover: rgba(255, 255, 255, 0.16);
   --k-color-shape-pale-neutral-alpha-pressed: rgba(255, 255, 255, 0.06);
   --k-color-shape-pale-success: #27452d;
   --k-color-shape-pale-success-hover: #2d5134;
@@ -461,7 +461,7 @@
   --k-color-shape-soft-error-pressed: #823835;
   --k-color-shape-soft-neutral-alpha: rgba(255, 255, 255, 0.16);
   --k-color-shape-soft-neutral-alpha-hover: rgba(255, 255, 255, 0.24);
-  --k-color-shape-soft-neutral-alpha-pressed: rgba(255, 255, 255, 0.12);
+  --k-color-shape-soft-neutral-alpha-pressed: rgba(255, 255, 255, 0.08);
   --k-color-shape-soft-success: #3a6a43;
   --k-color-shape-soft-success-hover: #3f784b;
   --k-color-shape-soft-success-pressed: #345e3c;
@@ -469,17 +469,17 @@
   --k-color-shape-soft-warning-hover: #956c30;
   --k-color-shape-soft-warning-pressed: #775728;
   --k-color-shape-inverted-backless-hover: rgba(0, 0, 0, 0.06);
-  --k-color-shape-inverted-backless-pressed: rgba(0, 0, 0, 0.08);
+  --k-color-shape-inverted-backless-pressed: rgba(0, 0, 0, 0.16);
   --k-color-shape-inverted-disabled: rgba(0, 0, 0, 0.06);
   --k-color-shape-inverted-neutral-faint-alpha: rgba(0, 0, 0, 0.06);
-  --k-color-shape-inverted-neutral-faint-alpha-hover: rgba(0, 0, 0, 0.08);
-  --k-color-shape-inverted-neutral-faint-alpha-pressed: rgba(0, 0, 0, 0.12);
+  --k-color-shape-inverted-neutral-faint-alpha-hover: rgba(0, 0, 0, 0.12);
+  --k-color-shape-inverted-neutral-faint-alpha-pressed: rgba(0, 0, 0, 0.16);
   --k-color-shape-inverted-neutral-heavy: rgba(0, 0, 0, 0.8);
   --k-color-shape-inverted-neutral-heavy-hover: rgba(0, 0, 0, 0.88);
   --k-color-shape-inverted-neutral-heavy-pressed: rgba(0, 0, 0, 0.72);
-  --k-color-shape-inverted-neutral-pale-alpha: rgba(0, 0, 0, 0.08);
-  --k-color-shape-inverted-neutral-pale-alpha-hover: rgba(0, 0, 0, 0.12);
-  --k-color-shape-inverted-neutral-pale-alpha-pressed: rgba(0, 0, 0, 0.16);
+  --k-color-shape-inverted-neutral-pale-alpha: rgba(0, 0, 0, 0.12);
+  --k-color-shape-inverted-neutral-pale-alpha-hover: rgba(0, 0, 0, 0.16);
+  --k-color-shape-inverted-neutral-pale-alpha-pressed: rgba(0, 0, 0, 0.24);
   --k-color-shape-inverted-neutral-soft-alpha: rgba(0, 0, 0, 0.16);
   --k-color-shape-inverted-neutral-soft-alpha-hover: rgba(0, 0, 0, 0.24);
   --k-color-shape-inverted-neutral-soft-alpha-pressed: rgba(0, 0, 0, 0.32);
@@ -587,15 +587,15 @@
   --k-color-illustration-white: #fff;
   --k-color-customizable-bold-black: #b1b1b1;
   --k-color-customizable-bold-blue: #2b8df2;
-  --k-color-customizable-bold-blue-deep: #5183ff;
+  --k-color-customizable-bold-blue-deep: #3e72ff;
   --k-color-customizable-bold-gray: #696969;
   --k-color-customizable-bold-green: #2ca651;
-  --k-color-customizable-bold-mint: #00a38b;
-  --k-color-customizable-bold-orange: #d96528;
+  --k-color-customizable-bold-mint: #01b197;
+  --k-color-customizable-bold-orange: #ed6d28;
   --k-color-customizable-bold-purple: #be5ad8;
   --k-color-customizable-bold-red: #ee4948;
   --k-color-customizable-bold-violet: #956ef2;
-  --k-color-customizable-bold-yellow: #d19a00;
+  --k-color-customizable-bold-yellow: #dfa700;
   --k-color-customizable-faint-black: #484848;
   --k-color-customizable-faint-blue: #1f344d;
   --k-color-customizable-faint-blue-deep: #1e305c;