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

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,6 +1,6 @@
 {
   "name": "@skbkontur/colors",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.5",
   "author": "Kontur",
   "publishConfig": {
     "access": "public",
@@ -9,11 +9,66 @@
   "type": "module",
   "license": "UNLICENSED",
   "sideEffects": false,
+  "files": [
+    "/lib",
+    "/tokens",
+    "/tokens-mobile",
+    "colors.*"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "default": "./colors.js",
+      "types": "./colors.d.ts"
+    },
+    "./get-colors": {
+      "default": "./lib/get-colors.js",
+      "types": "./lib/get-colors.d.ts"
+    },
+    "./light-default": {
+      "default": "./colors-light-default.js",
+      "types": "./colors-light-default.d.ts"
+    },
+    "./dark-default": {
+      "default": "./colors-dark-default.js",
+      "types": "./colors-dark-default.d.ts"
+    },
+    "./colors.scss": "./colors.scss",
+    "./colors.less": "./colors.less",
+    "./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",
+    "./tokens-mobile/brand-orange_accent-gray.json": "./tokens/brand-orange_accent-gray.json",
+    "./tokens-mobile/brand-blue_accent-gray.json": "./tokens/brand-blue_accent-gray.json",
+    "./tokens-mobile/brand-blue_accent-brand.json": "./tokens/brand-blue_accent-brand.json",
+    "./tokens-mobile/brand-blue-deep_accent-brand.json": "./tokens/brand-blue-deep_accent-brand.json",
+    "./tokens-mobile/brand-blue-deep_accent-gray.json": "./tokens/brand-blue-deep_accent-gray.json",
+    "./tokens-mobile/brand-green_accent-brand.json": "./tokens/brand-green_accent-brand.json",
+    "./tokens-mobile/brand-green_accent-gray.json": "./tokens/brand-green_accent-gray.json",
+    "./tokens-mobile/brand-mint_accent-brand.json": "./tokens/brand-mint_accent-brand.json",
+    "./tokens-mobile/brand-mint_accent-gray.json": "./tokens/brand-mint_accent-gray.json",
+    "./tokens-mobile/brand-purple_accent-brand.json": "./tokens/brand-purple_accent-brand.json",
+    "./tokens-mobile/brand-purple_accent-gray.json": "./tokens/brand-purple_accent-gray.json",
+    "./tokens-mobile/brand-violet_accent-brand.json": "./tokens/brand-violet_accent-brand.json",
+    "./tokens-mobile/brand-violet_accent-gray.json": "./tokens/brand-violet_accent-gray.json"
+  },
   "scripts": {
-    "build": "npm run build:esm && npm run build:static",
-    "build:esm": "tsc --outDir dist/esm",
-    "build:static": "node --import=tsx scripts/generate.ts && prettier ./dist --write && npx stylelint \"**/*.{css,scss,less}\" --fix",
-    "extract-tokens": "node --import=tsx scripts/extract-tokens-from-figma.ts",
+    "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": {
@@ -21,8 +76,12 @@
     "culori": "4.0.2"
   },
   "devDependencies": {
-    "@skbkontur/react-ui": "5.4.6",
+    "@skbkontur/react-ui": "5.5.1",
     "@types/apca-w3": "0.1.3",
-    "@types/culori": "4.0.1"
+    "@types/culori": "4.0.1",
+    "vitest": "^2.1.6"
+  },
+  "colors": {
+    "_": "./"
   }
 }

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

@@ -1,4 +1,4 @@
-[data-k-color-brand='blue-deep'][data-k-color-accent='brand'] {
+[data-k-brand='blue-deep'][data-k-accent='brand'] {
   --k-color-text-accent-heavy: #2b5adf;
   --k-color-text-accent-heavy-hover: #3e72ff;
   --k-color-text-accent-heavy-pressed: #3959a5;
@@ -320,7 +320,7 @@
   --k-color-customizable-soft-yellow: #f6d65e;
 }
 
-[data-k-color-brand='blue-deep'][data-k-color-accent='brand'][data-k-color-theme='dark'] {
+[data-k-brand='blue-deep'][data-k-accent='brand'][data-k-color-theme='dark'] {
   --k-color-text-accent-heavy: #76a2ff;
   --k-color-text-accent-heavy-hover: #99bfff;
   --k-color-text-accent-heavy-pressed: #6589dc;

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

@@ -1,4 +1,4 @@
-[data-k-color-brand='blue-deep'][data-k-color-accent='gray'] {
+[data-k-brand='blue-deep'][data-k-accent='gray'] {
   --k-color-text-accent-heavy: rgba(0, 0, 0, 0.88);
   --k-color-text-accent-heavy-hover: rgba(0, 0, 0, 0.96);
   --k-color-text-accent-heavy-pressed: rgba(0, 0, 0, 0.96);
@@ -320,7 +320,7 @@
   --k-color-customizable-soft-yellow: #f6d65e;
 }
 
-[data-k-color-brand='blue-deep'][data-k-color-accent='gray'][data-k-color-theme='dark'] {
+[data-k-brand='blue-deep'][data-k-accent='gray'][data-k-color-theme='dark'] {
   --k-color-text-accent-heavy: rgba(255, 255, 255, 0.96);
   --k-color-text-accent-heavy-hover: #fff;
   --k-color-text-accent-heavy-pressed: #fff;

package/{dist/tokens → tokens}/brand-blue_accent-brand.css

@@ -1,4 +1,4 @@
-[data-k-color-brand='blue'][data-k-color-accent='brand'] {
+[data-k-brand='blue'][data-k-accent='brand'] {
   --k-color-text-accent-heavy: #0069c2;
   --k-color-text-accent-heavy-hover: #0080ea;
   --k-color-text-accent-heavy-pressed: #37608e;
@@ -320,7 +320,7 @@
   --k-color-customizable-soft-yellow: #f6d65e;
 }
 
-[data-k-color-brand='blue'][data-k-color-accent='brand'][data-k-color-theme='dark'] {
+[data-k-brand='blue'][data-k-accent='brand'][data-k-color-theme='dark'] {
   --k-color-text-accent-heavy: #55a9ff;
   --k-color-text-accent-heavy-hover: #80c5ff;
   --k-color-text-accent-heavy-pressed: #4b8fdb;

package/{dist/tokens → tokens}/brand-blue_accent-gray.css

@@ -1,4 +1,4 @@
-[data-k-color-brand='blue'][data-k-color-accent='gray'] {
+[data-k-brand='blue'][data-k-accent='gray'] {
   --k-color-text-accent-heavy: rgba(0, 0, 0, 0.88);
   --k-color-text-accent-heavy-hover: rgba(0, 0, 0, 0.96);
   --k-color-text-accent-heavy-pressed: rgba(0, 0, 0, 0.96);
@@ -320,7 +320,7 @@
   --k-color-customizable-soft-yellow: #f6d65e;
 }
 
-[data-k-color-brand='blue'][data-k-color-accent='gray'][data-k-color-theme='dark'] {
+[data-k-brand='blue'][data-k-accent='gray'][data-k-color-theme='dark'] {
   --k-color-text-accent-heavy: rgba(255, 255, 255, 0.96);
   --k-color-text-accent-heavy-hover: #fff;
   --k-color-text-accent-heavy-pressed: #fff;

package/{dist/tokens → tokens}/brand-green_accent-brand.css

@@ -1,4 +1,4 @@
-[data-k-color-brand='green'][data-k-color-accent='brand'] {
+[data-k-brand='green'][data-k-accent='brand'] {
   --k-color-text-accent-heavy: #007f34;
   --k-color-text-accent-heavy-hover: #009b41;
   --k-color-text-accent-heavy-pressed: #3a6a43;
@@ -320,7 +320,7 @@
   --k-color-customizable-soft-yellow: #f6d65e;
 }
 
-[data-k-color-brand='green'][data-k-color-accent='brand'][data-k-color-theme='dark'] {
+[data-k-brand='green'][data-k-accent='brand'][data-k-color-theme='dark'] {
   --k-color-text-accent-heavy: #00c655;
   --k-color-text-accent-heavy-hover: #4ede76;
   --k-color-text-accent-heavy-pressed: #4fa161;

package/{dist/tokens → tokens}/brand-green_accent-gray.css

@@ -1,4 +1,4 @@
-[data-k-color-brand='green'][data-k-color-accent='gray'] {
+[data-k-brand='green'][data-k-accent='gray'] {
   --k-color-text-accent-heavy: rgba(0, 0, 0, 0.88);
   --k-color-text-accent-heavy-hover: rgba(0, 0, 0, 0.96);
   --k-color-text-accent-heavy-pressed: rgba(0, 0, 0, 0.96);
@@ -320,7 +320,7 @@
   --k-color-customizable-soft-yellow: #f6d65e;
 }
 
-[data-k-color-brand='green'][data-k-color-accent='gray'][data-k-color-theme='dark'] {
+[data-k-brand='green'][data-k-accent='gray'][data-k-color-theme='dark'] {
   --k-color-text-accent-heavy: rgba(255, 255, 255, 0.96);
   --k-color-text-accent-heavy-hover: #fff;
   --k-color-text-accent-heavy-pressed: #fff;

package/{dist/tokens → tokens}/brand-mint_accent-brand.css

@@ -1,4 +1,4 @@
-[data-k-color-brand='mint'][data-k-color-accent='brand'] {
+[data-k-brand='mint'][data-k-accent='brand'] {
   --k-color-text-accent-heavy: #027b68;
   --k-color-text-accent-heavy-hover: #02957f;
   --k-color-text-accent-heavy-pressed: #216c5d;
@@ -320,7 +320,7 @@
   --k-color-customizable-soft-yellow: #f6d65e;
 }
 
-[data-k-color-brand='mint'][data-k-color-accent='brand'][data-k-color-theme='dark'] {
+[data-k-brand='mint'][data-k-accent='brand'][data-k-color-theme='dark'] {
   --k-color-text-accent-heavy: #05bfa3;
   --k-color-text-accent-heavy-hover: #02dcbe;
   --k-color-text-accent-heavy-pressed: #35a08b;

package/{dist/tokens → tokens}/brand-mint_accent-gray.css

@@ -1,4 +1,4 @@
-[data-k-color-brand='mint'][data-k-color-accent='gray'] {
+[data-k-brand='mint'][data-k-accent='gray'] {
   --k-color-text-accent-heavy: rgba(0, 0, 0, 0.88);
   --k-color-text-accent-heavy-hover: rgba(0, 0, 0, 0.96);
   --k-color-text-accent-heavy-pressed: rgba(0, 0, 0, 0.96);
@@ -320,7 +320,7 @@
   --k-color-customizable-soft-yellow: #f6d65e;
 }
 
-[data-k-color-brand='mint'][data-k-color-accent='gray'][data-k-color-theme='dark'] {
+[data-k-brand='mint'][data-k-accent='gray'][data-k-color-theme='dark'] {
   --k-color-text-accent-heavy: rgba(255, 255, 255, 0.96);
   --k-color-text-accent-heavy-hover: #fff;
   --k-color-text-accent-heavy-pressed: #fff;

package/{dist/tokens → tokens}/brand-orange_accent-gray.css

@@ -1,4 +1,4 @@
-[data-k-color-brand='orange'][data-k-color-accent='gray'] {
+[data-k-brand='orange'][data-k-accent='gray'] {
   --k-color-text-accent-heavy: rgba(0, 0, 0, 0.88);
   --k-color-text-accent-heavy-hover: rgba(0, 0, 0, 0.96);
   --k-color-text-accent-heavy-pressed: rgba(0, 0, 0, 0.96);
@@ -320,7 +320,7 @@
   --k-color-customizable-soft-yellow: #f6d65e;
 }
 
-[data-k-color-brand='orange'][data-k-color-accent='gray'][data-k-color-theme='dark'] {
+[data-k-brand='orange'][data-k-accent='gray'][data-k-color-theme='dark'] {
   --k-color-text-accent-heavy: rgba(255, 255, 255, 0.96);
   --k-color-text-accent-heavy-hover: #fff;
   --k-color-text-accent-heavy-pressed: #fff;

package/{dist/tokens → tokens}/brand-purple_accent-brand.css

@@ -1,4 +1,4 @@
-[data-k-color-brand='purple'][data-k-color-accent='brand'] {
+[data-k-brand='purple'][data-k-accent='brand'] {
   --k-color-text-accent-heavy: #992db3;
   --k-color-text-accent-heavy-hover: #b545d1;
   --k-color-text-accent-heavy-pressed: #7c428b;
@@ -320,7 +320,7 @@
   --k-color-customizable-soft-yellow: #f6d65e;
 }
 
-[data-k-color-brand='purple'][data-k-color-accent='brand'][data-k-color-theme='dark'] {
+[data-k-brand='purple'][data-k-accent='brand'][data-k-color-theme='dark'] {
   --k-color-text-accent-heavy: #db70f7;
   --k-color-text-accent-heavy-hover: #ea9aff;
   --k-color-text-accent-heavy-pressed: #b568ca;

package/{dist/tokens → tokens}/brand-purple_accent-gray.css

@@ -1,4 +1,4 @@
-[data-k-color-brand='purple'][data-k-color-accent='gray'] {
+[data-k-brand='purple'][data-k-accent='gray'] {
   --k-color-text-accent-heavy: rgba(0, 0, 0, 0.88);
   --k-color-text-accent-heavy-hover: rgba(0, 0, 0, 0.96);
   --k-color-text-accent-heavy-pressed: rgba(0, 0, 0, 0.96);
@@ -320,7 +320,7 @@
   --k-color-customizable-soft-yellow: #f6d65e;
 }
 
-[data-k-color-brand='purple'][data-k-color-accent='gray'][data-k-color-theme='dark'] {
+[data-k-brand='purple'][data-k-accent='gray'][data-k-color-theme='dark'] {
   --k-color-text-accent-heavy: rgba(255, 255, 255, 0.96);
   --k-color-text-accent-heavy-hover: #fff;
   --k-color-text-accent-heavy-pressed: #fff;

package/{dist/tokens → tokens}/brand-red_accent-gray.css

@@ -1,4 +1,4 @@
-[data-k-color-brand='red'][data-k-color-accent='gray'] {
+[data-k-brand='red'][data-k-accent='gray'] {
   --k-color-text-accent-heavy: rgba(0, 0, 0, 0.88);
   --k-color-text-accent-heavy-hover: rgba(0, 0, 0, 0.96);
   --k-color-text-accent-heavy-pressed: rgba(0, 0, 0, 0.96);
@@ -320,7 +320,7 @@
   --k-color-customizable-soft-yellow: #f6d65e;
 }
 
-[data-k-color-brand='red'][data-k-color-accent='gray'][data-k-color-theme='dark'] {
+[data-k-brand='red'][data-k-accent='gray'][data-k-color-theme='dark'] {
   --k-color-text-accent-heavy: rgba(255, 255, 255, 0.96);
   --k-color-text-accent-heavy-hover: #fff;
   --k-color-text-accent-heavy-pressed: #fff;

package/{dist/tokens → tokens}/brand-violet_accent-brand.css

@@ -1,4 +1,4 @@
-[data-k-color-brand='violet'][data-k-color-accent='brand'] {
+[data-k-brand='violet'][data-k-accent='brand'] {
   --k-color-text-accent-heavy: #7441d3;
   --k-color-text-accent-heavy-hover: #8c59f3;
   --k-color-text-accent-heavy-pressed: #634c9e;
@@ -320,7 +320,7 @@
   --k-color-customizable-soft-yellow: #f6d65e;
 }
 
-[data-k-color-brand='violet'][data-k-color-accent='brand'][data-k-color-theme='dark'] {
+[data-k-brand='violet'][data-k-accent='brand'][data-k-color-theme='dark'] {
   --k-color-text-accent-heavy: #ab8eff;
   --k-color-text-accent-heavy-hover: #c1b0ff;
   --k-color-text-accent-heavy-pressed: #9278dc;

package/{dist/tokens → tokens}/brand-violet_accent-gray.css

@@ -1,4 +1,4 @@
-[data-k-color-brand='violet'][data-k-color-accent='gray'] {
+[data-k-brand='violet'][data-k-accent='gray'] {
   --k-color-text-accent-heavy: rgba(0, 0, 0, 0.88);
   --k-color-text-accent-heavy-hover: rgba(0, 0, 0, 0.96);
   --k-color-text-accent-heavy-pressed: rgba(0, 0, 0, 0.96);
@@ -320,7 +320,7 @@
   --k-color-customizable-soft-yellow: #f6d65e;
 }
 
-[data-k-color-brand='violet'][data-k-color-accent='gray'][data-k-color-theme='dark'] {
+[data-k-brand='violet'][data-k-accent='gray'][data-k-color-theme='dark'] {
   --k-color-text-accent-heavy: rgba(255, 255, 255, 0.96);
   --k-color-text-accent-heavy-hover: #fff;
   --k-color-text-accent-heavy-pressed: #fff;