@skbkontur/colors 1.1.2-97dd9.0 → 1.1.2-bdb5e.0

package/dist/esm/helpers/get-palette.js

@@ -130,75 +130,69 @@ function findClosestLightnessStep(targetL, availableLightnessSteps) {
     return closestStep;
 }
 export function calculateBaseHueAndCorrectionRange(inputColorString, abneyData) {
-    try {
-        var toOklch = converter('oklch');
-        var oklch = toOklch(inputColorString);
-        if (!oklch) {
-            console.warn("Could not parse color string: ".concat(inputColorString));
-            return null;
-        }
-        var targetLightness = Math.round(oklch.l * 100);
-        var targetHue_1 = oklch.h;
-        if (isNaN(targetHue_1)) {
-            console.warn("Achromatic color detected (".concat(inputColorString, "). Defaulting hue to 0."));
-            targetHue_1 = 0;
-        }
-        var availableLightnessSteps = Object.keys(abneyData).map(Number);
-        if (availableLightnessSteps.length === 0) {
-            console.warn('Abney correction data is empty, cannot calculate base hue.');
-            return null;
-        }
-        var closestLightness = findClosestLightnessStep(targetLightness, availableLightnessSteps);
-        var lightnessCorrectionData = abneyData[closestLightness];
-        if (!lightnessCorrectionData) {
-            console.warn("No Abney correction data for lightness ".concat(closestLightness, "."));
-            return null;
-        }
-        var correctedHueMap_1 = Object.entries(lightnessCorrectionData).map(function (_a) {
-            var rawHueStr = _a[0], shift = _a[1];
-            var rawHue = Number(rawHueStr);
-            return {
-                rawHue: rawHue,
-                shift: shift,
-                correctedHue: (rawHue + shift + 360) % 360,
-            };
-        });
-        correctedHueMap_1.sort(function (a, b) {
-            if (a.correctedHue !== b.correctedHue) {
-                return a.correctedHue - b.correctedHue;
-            }
-            return a.rawHue - b.rawHue;
-        });
-        if (correctedHueMap_1.length === 0) {
-            console.warn("No hue ranges defined for lightness ".concat(closestLightness, "."));
-            return null;
-        }
-        var findCorrectRange = function () {
-            var nextRangeIndex = correctedHueMap_1.findIndex(function (range) { return range.correctedHue > targetHue_1; });
-            if (nextRangeIndex === 0) {
-                return correctedHueMap_1[correctedHueMap_1.length - 1];
-            }
-            if (nextRangeIndex > 0) {
-                return correctedHueMap_1[nextRangeIndex - 1];
-            }
-            return correctedHueMap_1[correctedHueMap_1.length - 1];
-        };
-        var selectedRange = findCorrectRange();
-        if (!selectedRange) {
-            console.error('Could not determine the correct hue range.');
-            return null;
-        }
-        var baseHue = (targetHue_1 - selectedRange.shift + 360) % 360;
+    var toOklch = converter('oklch');
+    var oklch = toOklch(inputColorString);
+    if (!oklch) {
+        console.warn("Could not parse color string: ".concat(inputColorString));
+        return null;
+    }
+    var targetLightness = Math.round(oklch.l * 100);
+    var targetHue = oklch.h;
+    if (isNaN(targetHue)) {
+        console.warn("Achromatic color detected (".concat(inputColorString, "). Defaulting hue to 0."));
+        targetHue = 0;
+    }
+    var availableLightnessSteps = Object.keys(abneyData).map(Number);
+    if (availableLightnessSteps.length === 0) {
+        console.warn('Abney correction data is empty, cannot calculate base hue.');
+        return null;
+    }
+    var closestLightness = findClosestLightnessStep(targetLightness, availableLightnessSteps);
+    var lightnessCorrectionData = abneyData[closestLightness];
+    if (!lightnessCorrectionData) {
+        console.warn("No Abney correction data for lightness ".concat(closestLightness, "."));
+        return null;
+    }
+    var correctedHueMap = Object.entries(lightnessCorrectionData).map(function (_a) {
+        var rawHueStr = _a[0], shift = _a[1];
+        var rawHue = Number(rawHueStr);
         return {
-            baseHue: baseHue,
-            correctionLightness: closestLightness,
-            correctionHueRange: selectedRange.rawHue,
+            rawHue: rawHue,
+            shift: shift,
+            correctedHue: (rawHue + shift + 360) % 360,
         };
+    });
+    correctedHueMap.sort(function (a, b) {
+        if (a.correctedHue !== b.correctedHue) {
+            return a.correctedHue - b.correctedHue;
+        }
+        return a.rawHue - b.rawHue;
+    });
+    if (correctedHueMap.length === 0) {
+        console.warn("No hue ranges defined for lightness ".concat(closestLightness, "."));
+        return null;
     }
-    catch (error) {
-        console.error('Error calculating base hue:', error);
+    var findCorrectRange = function () {
+        var nextRangeIndex = correctedHueMap.findIndex(function (range) { return range.correctedHue > targetHue; });
+        if (nextRangeIndex === 0) {
+            return correctedHueMap[correctedHueMap.length - 1];
+        }
+        if (nextRangeIndex > 0) {
+            return correctedHueMap[nextRangeIndex - 1];
+        }
+        return correctedHueMap[correctedHueMap.length - 1];
+    };
+    var selectedRange = findCorrectRange();
+    if (!selectedRange) {
+        console.error('Could not determine the correct hue range.');
         return null;
     }
+    var baseHue = (targetHue - selectedRange.shift + 360) % 360;
+    return {
+        baseHue: baseHue,
+        correctionLightness: closestLightness,
+        correctionHueRange: selectedRange.rawHue,
+    };
 }
 export function calcOnBrand(hex) {
     var whiteContrast = Number(calcAPCA('#fff', hex));

package/dist/esm/helpers/get-promo.js

@@ -2,35 +2,29 @@ import { clampChroma, converter, formatHex } from 'culori';
 import { PROMO_HUE_SHIFTS } from '../constants/promo-hue-shift';
 export function getPromo(color, hueShifts) {
     if (hueShifts === void 0) { hueShifts = PROMO_HUE_SHIFTS; }
-    try {
-        var toOklch = converter('oklch');
-        var oklchColor = toOklch(color);
-        if (!oklchColor) {
-            throw new Error("Invalid color string: ".concat(color));
-        }
-        var currentHue = oklchColor.h;
-        var promoHueShift = getPromoHueShift(currentHue, hueShifts);
-        var correctedHue = (currentHue + promoHueShift + 360) % 360;
-        var promoLightness = oklchColor.l * 100;
-        if (promoLightness >= 50) {
-            promoLightness = promoLightness - 32;
-        }
-        promoLightness = Math.min(Math.max(promoLightness, 30), 34);
-        var promoChroma = 0.1;
-        var finalLightness = Math.round(promoLightness) / 100;
-        var finalChroma = Math.round(promoChroma * 100) / 100;
-        var promoOklch = {
-            mode: 'oklch',
-            l: finalLightness,
-            c: finalChroma,
-            h: correctedHue,
-        };
-        return formatHex(clampChroma(promoOklch, 'oklch'));
+    var toOklch = converter('oklch');
+    var oklchColor = toOklch(color);
+    if (!oklchColor) {
+        throw new Error("Invalid color string: ".concat(color));
     }
-    catch (error) {
-        console.error('Error generating promo palette:', error);
-        return '';
+    var currentHue = oklchColor.h;
+    var promoHueShift = getPromoHueShift(currentHue, hueShifts);
+    var correctedHue = (currentHue + promoHueShift + 360) % 360;
+    var promoLightness = oklchColor.l * 100;
+    if (promoLightness >= 50) {
+        promoLightness = promoLightness - 32;
     }
+    promoLightness = Math.min(Math.max(promoLightness, 30), 34);
+    var promoChroma = 0.1;
+    var finalLightness = Math.round(promoLightness) / 100;
+    var finalChroma = Math.round(promoChroma * 100) / 100;
+    var promoOklch = {
+        mode: 'oklch',
+        l: finalLightness,
+        c: finalChroma,
+        h: correctedHue,
+    };
+    return formatHex(clampChroma(promoOklch, 'oklch'));
 }
 export function getPromoHueShift(currentHue, promoHueShifts) {
     var hueRanges = Object.keys(promoHueShifts)

package/dist/esm/types/base-tokens.d.ts

@@ -9,7 +9,7 @@ export interface BaseTokens {
         };
         palette: ColorPalette;
     };
-    accent: {
+    accent?: {
         original: ThemedValue;
         interactions: {
             hover: ThemedValue;
@@ -42,13 +42,13 @@ export interface ColorPalette {
     normal: ColorWithScale<ChromaScale>;
     dim: ColorWithScale<ChromaScale>;
 }
-type ChromaScale = 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 68 | 72 | 76 | 80 | 84 | 88 | 92 | 96;
+export type ChromaScale = 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 68 | 72 | 76 | 80 | 84 | 88 | 92 | 96;
 type AlphaScale = 4 | 6 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 68 | 72 | 76 | 80 | 84 | 88 | 92 | 96 | 100;
-type GrayScale = 0 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 68 | 72 | 76 | 80 | 84 | 88 | 92 | 96 | 98 | 100;
+export type GrayScale = 0 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 64 | 68 | 72 | 76 | 80 | 84 | 88 | 92 | 96 | 98 | 100;
 type ColorWithScale<T extends string | number> = {
     [K in T]: string;
 };
-interface ThemedValue {
+export interface ThemedValue {
     light: string;
     dark: string;
 }

package/dist/esm/utils/format-variable.d.ts

@@ -0,0 +1,2 @@
+export declare const camelCaseToKebabCase: (str: string) => string;
+export declare const kebabCaseToCamelCase: (str: string) => string;

package/dist/esm/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/dist/tokens/base/css/brand-green_accent-brand.css

@@ -0,0 +1,444 @@
+:root {
+  --k-brand-logo-light: green;
+  --k-brand-logo-dark: #3fa536;
+  --k-brand-promo: #313000;
+  --k-brand-original: green;
+  --k-brand-interactions-hover-light: #007400;
+  --k-brand-interactions-hover-dark: #208c16;
+  --k-brand-interactions-pressed-light: #096501;
+  --k-brand-interactions-pressed-dark: #1c7115;
+  --k-brand-palette-vivid-20: #001d00;
+  --k-brand-palette-vivid-24: #012800;
+  --k-brand-palette-vivid-28: #013300;
+  --k-brand-palette-vivid-32: #023f00;
+  --k-brand-palette-vivid-36: #034c00;
+  --k-brand-palette-vivid-40: #035800;
+  --k-brand-palette-vivid-44: #046500;
+  --k-brand-palette-vivid-48: #067200;
+  --k-brand-palette-vivid-52: #078000;
+  --k-brand-palette-vivid-56: #088e00;
+  --k-brand-palette-vivid-60: #0b9c00;
+  --k-brand-palette-vivid-64: #0caa00;
+  --k-brand-palette-vivid-68: #27b71a;
+  --k-brand-palette-vivid-72: #40c335;
+  --k-brand-palette-vivid-76: #56cf4c;
+  --k-brand-palette-vivid-80: #6ddb62;
+  --k-brand-palette-vivid-84: #84e67b;
+  --k-brand-palette-vivid-88: #a0ef97;
+  --k-brand-palette-vivid-92: #b9f8b5;
+  --k-brand-palette-vivid-96: #d6ffd5;
+  --k-brand-palette-normal-20: #091b07;
+  --k-brand-palette-normal-24: #0d260b;
+  --k-brand-palette-normal-28: #11310e;
+  --k-brand-palette-normal-32: #163d12;
+  --k-brand-palette-normal-36: #1b4917;
+  --k-brand-palette-normal-40: #1f551b;
+  --k-brand-palette-normal-44: #256220;
+  --k-brand-palette-normal-48: #296f23;
+  --k-brand-palette-normal-52: #2c7c25;
+  --k-brand-palette-normal-56: #2f8a27;
+  --k-brand-palette-normal-60: #319928;
+  --k-brand-palette-normal-64: #32a729;
+  --k-brand-palette-normal-68: #3db533;
+  --k-brand-palette-normal-72: #53c049;
+  --k-brand-palette-normal-76: #68cc5f;
+  --k-brand-palette-normal-80: #7fd776;
+  --k-brand-palette-normal-84: #97e18e;
+  --k-brand-palette-normal-88: #b0e9aa;
+  --k-brand-palette-normal-92: #c8f2c5;
+  --k-brand-palette-normal-96: #e1fae0;
+  --k-brand-palette-dim-20: #0e1a0c;
+  --k-brand-palette-dim-24: #142412;
+  --k-brand-palette-dim-28: #1a2f18;
+  --k-brand-palette-dim-32: #213a1e;
+  --k-brand-palette-dim-36: #284625;
+  --k-brand-palette-dim-40: #2e522b;
+  --k-brand-palette-dim-44: #345e30;
+  --k-brand-palette-dim-48: #3b6b36;
+  --k-brand-palette-dim-52: #40783b;
+  --k-brand-palette-dim-56: #468640;
+  --k-brand-palette-dim-60: #4c9445;
+  --k-brand-palette-dim-64: #51a249;
+  --k-brand-palette-dim-68: #58b050;
+  --k-brand-palette-dim-72: #6abb62;
+  --k-brand-palette-dim-76: #7fc677;
+  --k-brand-palette-dim-80: #94d08d;
+  --k-brand-palette-dim-84: #a9daa4;
+  --k-brand-palette-dim-88: #bfe3bb;
+  --k-brand-palette-dim-92: #d4edd2;
+  --k-brand-palette-dim-96: #e8f7e7;
+  --k-accent-original-light: green;
+  --k-accent-original-dark: green;
+  --k-accent-interactions-hover-light: #007400;
+  --k-accent-interactions-hover-dark: #208c16;
+  --k-accent-interactions-pressed-light: #096501;
+  --k-accent-interactions-pressed-dark: #1c7115;
+  --k-accent-palette-vivid-20: #001d00;
+  --k-accent-palette-vivid-24: #012800;
+  --k-accent-palette-vivid-28: #013300;
+  --k-accent-palette-vivid-32: #023f00;
+  --k-accent-palette-vivid-36: #034c00;
+  --k-accent-palette-vivid-40: #035800;
+  --k-accent-palette-vivid-44: #046500;
+  --k-accent-palette-vivid-48: #067200;
+  --k-accent-palette-vivid-52: #078000;
+  --k-accent-palette-vivid-56: #088e00;
+  --k-accent-palette-vivid-60: #0b9c00;
+  --k-accent-palette-vivid-64: #0caa00;
+  --k-accent-palette-vivid-68: #27b71a;
+  --k-accent-palette-vivid-72: #40c335;
+  --k-accent-palette-vivid-76: #56cf4c;
+  --k-accent-palette-vivid-80: #6ddb62;
+  --k-accent-palette-vivid-84: #84e67b;
+  --k-accent-palette-vivid-88: #a0ef97;
+  --k-accent-palette-vivid-92: #b9f8b5;
+  --k-accent-palette-vivid-96: #d6ffd5;
+  --k-accent-palette-normal-20: #091b07;
+  --k-accent-palette-normal-24: #0d260b;
+  --k-accent-palette-normal-28: #11310e;
+  --k-accent-palette-normal-32: #163d12;
+  --k-accent-palette-normal-36: #1b4917;
+  --k-accent-palette-normal-40: #1f551b;
+  --k-accent-palette-normal-44: #256220;
+  --k-accent-palette-normal-48: #296f23;
+  --k-accent-palette-normal-52: #2c7c25;
+  --k-accent-palette-normal-56: #2f8a27;
+  --k-accent-palette-normal-60: #319928;
+  --k-accent-palette-normal-64: #32a729;
+  --k-accent-palette-normal-68: #3db533;
+  --k-accent-palette-normal-72: #53c049;
+  --k-accent-palette-normal-76: #68cc5f;
+  --k-accent-palette-normal-80: #7fd776;
+  --k-accent-palette-normal-84: #97e18e;
+  --k-accent-palette-normal-88: #b0e9aa;
+  --k-accent-palette-normal-92: #c8f2c5;
+  --k-accent-palette-normal-96: #e1fae0;
+  --k-accent-palette-dim-20: #0e1a0c;
+  --k-accent-palette-dim-24: #142412;
+  --k-accent-palette-dim-28: #1a2f18;
+  --k-accent-palette-dim-32: #213a1e;
+  --k-accent-palette-dim-36: #284625;
+  --k-accent-palette-dim-40: #2e522b;
+  --k-accent-palette-dim-44: #345e30;
+  --k-accent-palette-dim-48: #3b6b36;
+  --k-accent-palette-dim-52: #40783b;
+  --k-accent-palette-dim-56: #468640;
+  --k-accent-palette-dim-60: #4c9445;
+  --k-accent-palette-dim-64: #51a249;
+  --k-accent-palette-dim-68: #58b050;
+  --k-accent-palette-dim-72: #6abb62;
+  --k-accent-palette-dim-76: #7fc677;
+  --k-accent-palette-dim-80: #94d08d;
+  --k-accent-palette-dim-84: #a9daa4;
+  --k-accent-palette-dim-88: #bfe3bb;
+  --k-accent-palette-dim-92: #d4edd2;
+  --k-accent-palette-dim-96: #e8f7e7;
+  --k-warning-vivid-20: #211300;
+  --k-warning-vivid-24: #2d1b00;
+  --k-warning-vivid-28: #3a2400;
+  --k-warning-vivid-32: #472d00;
+  --k-warning-vivid-36: #543600;
+  --k-warning-vivid-40: #623f00;
+  --k-warning-vivid-44: #714901;
+  --k-warning-vivid-48: #7f5300;
+  --k-warning-vivid-52: #8e5e01;
+  --k-warning-vivid-56: #9d6800;
+  --k-warning-vivid-60: #ac7301;
+  --k-warning-vivid-64: #bc7d00;
+  --k-warning-vivid-68: #cc8801;
+  --k-warning-vivid-72: #db9400;
+  --k-warning-vivid-76: #eaa000;
+  --k-warning-vivid-80: #f8ae00;
+  --k-warning-vivid-84: #ffbf0b;
+  --k-warning-vivid-88: #fcd35d;
+  --k-warning-vivid-92: #fbe48d;
+  --k-warning-vivid-96: #fff3bd;
+  --k-warning-normal-20: #211300;
+  --k-warning-normal-24: #2d1b00;
+  --k-warning-normal-28: #3a2400;
+  --k-warning-normal-32: #472d00;
+  --k-warning-normal-36: #543600;
+  --k-warning-normal-40: #623f00;
+  --k-warning-normal-44: #714901;
+  --k-warning-normal-48: #7f5300;
+  --k-warning-normal-52: #8e5e01;
+  --k-warning-normal-56: #9d6800;
+  --k-warning-normal-60: #ac7301;
+  --k-warning-normal-64: #bc7d00;
+  --k-warning-normal-68: #cc8801;
+  --k-warning-normal-72: #da9513;
+  --k-warning-normal-76: #e5a331;
+  --k-warning-normal-80: #f1b03b;
+  --k-warning-normal-84: #f4c359;
+  --k-warning-normal-88: #f2d585;
+  --k-warning-normal-92: #f4e5ad;
+  --k-warning-normal-96: #faf3d1;
+  --k-warning-dim-20: #1c150c;
+  --k-warning-dim-24: #271d10;
+  --k-warning-dim-28: #342614;
+  --k-warning-dim-32: #402f18;
+  --k-warning-dim-36: #4d391c;
+  --k-warning-dim-40: #5b4320;
+  --k-warning-dim-44: #694d24;
+  --k-warning-dim-48: #775728;
+  --k-warning-dim-52: #86612c;
+  --k-warning-dim-56: #956c30;
+  --k-warning-dim-60: #a37736;
+  --k-warning-dim-64: #b1823f;
+  --k-warning-dim-68: #bd8f4d;
+  --k-warning-dim-72: #cc9a51;
+  --k-warning-dim-76: #daa75a;
+  --k-warning-dim-80: #e5b566;
+  --k-warning-dim-84: #e6c686;
+  --k-warning-dim-88: #e9d6a5;
+  --k-warning-dim-92: #ede5c4;
+  --k-warning-dim-96: #f6f2df;
+  --k-error-vivid-20: #320003;
+  --k-error-vivid-24: #420005;
+  --k-error-vivid-28: #540007;
+  --k-error-vivid-32: #65000a;
+  --k-error-vivid-36: #78000e;
+  --k-error-vivid-40: #8a0013;
+  --k-error-vivid-44: #9e0117;
+  --k-error-vivid-48: #b2001b;
+  --k-error-vivid-52: #c50220;
+  --k-error-vivid-56: #d6192a;
+  --k-error-vivid-60: #e62b34;
+  --k-error-vivid-64: #f63b40;
+  --k-error-vivid-68: #ff5352;
+  --k-error-vivid-72: #ff726b;
+  --k-error-vivid-76: #ff8a84;
+  --k-error-vivid-80: #ffa09b;
+  --k-error-vivid-84: #ffb4b2;
+  --k-error-vivid-88: #ffc7c7;
+  --k-error-vivid-92: #ffdadd;
+  --k-error-vivid-96: #ffedef;
+  --k-error-normal-20: #2a0a09;
+  --k-error-normal-24: #39100e;
+  --k-error-normal-28: #481514;
+  --k-error-normal-32: #591a19;
+  --k-error-normal-36: #6b1f1e;
+  --k-error-normal-40: #7d2423;
+  --k-error-normal-44: #902828;
+  --k-error-normal-48: #a32c2d;
+  --k-error-normal-52: #b82f31;
+  --k-error-normal-56: #cd3235;
+  --k-error-normal-60: #de3c3e;
+  --k-error-normal-64: #ee4948;
+  --k-error-normal-68: #f65f5a;
+  --k-error-normal-72: #f97770;
+  --k-error-normal-76: #f98e88;
+  --k-error-normal-80: #fea09c;
+  --k-error-normal-84: #ffb4b2;
+  --k-error-normal-88: #ffc7c7;
+  --k-error-normal-92: #ffdadd;
+  --k-error-normal-96: #ffedef;
+  --k-error-dim-20: #240f0d;
+  --k-error-dim-24: #321514;
+  --k-error-dim-28: #411c1a;
+  --k-error-dim-32: #502421;
+  --k-error-dim-36: #602a27;
+  --k-error-dim-40: #71312e;
+  --k-error-dim-44: #823835;
+  --k-error-dim-48: #943e3b;
+  --k-error-dim-52: #a74541;
+  --k-error-dim-56: #ba4b47;
+  --k-error-dim-60: #ce524d;
+  --k-error-dim-64: #dd5d58;
+  --k-error-dim-68: #e47069;
+  --k-error-dim-72: #e8847c;
+  --k-error-dim-76: #ea9892;
+  --k-error-dim-80: #ecaaa6;
+  --k-error-dim-84: #eebcba;
+  --k-error-dim-88: #f2cdcd;
+  --k-error-dim-92: #f5dee0;
+  --k-error-dim-96: #fceef0;
+  --k-success-vivid-20: #001d06;
+  --k-success-vivid-24: #00280b;
+  --k-success-vivid-28: #003310;
+  --k-success-vivid-32: #003f16;
+  --k-success-vivid-36: #004b1c;
+  --k-success-vivid-40: #005821;
+  --k-success-vivid-44: #006428;
+  --k-success-vivid-48: #00712e;
+  --k-success-vivid-52: #007f34;
+  --k-success-vivid-56: #008d3a;
+  --k-success-vivid-60: #009b41;
+  --k-success-vivid-64: #00a948;
+  --k-success-vivid-68: #00b74e;
+  --k-success-vivid-72: #00c655;
+  --k-success-vivid-76: #29d363;
+  --k-success-vivid-80: #4ede76;
+  --k-success-vivid-84: #6fe98b;
+  --k-success-vivid-88: #91f2a3;
+  --k-success-vivid-92: #b0fabd;
+  --k-success-vivid-96: #d4ffda;
+  --k-success-normal-20: #061b0a;
+  --k-success-normal-24: #07260f;
+  --k-success-normal-28: #083214;
+  --k-success-normal-32: #093e1a;
+  --k-success-normal-36: #0b4a1f;
+  --k-success-normal-40: #0c5725;
+  --k-success-normal-44: #0f632b;
+  --k-success-normal-48: #117032;
+  --k-success-normal-52: #147e38;
+  --k-success-normal-56: #178b3f;
+  --k-success-normal-60: #1d9946;
+  --k-success-normal-64: #2ca651;
+  --k-success-normal-68: #2eb458;
+  --k-success-normal-72: #2dc35d;
+  --k-success-normal-76: #4ecf70;
+  --k-success-normal-80: #6cd984;
+  --k-success-normal-84: #89e39a;
+  --k-success-normal-88: #a7ebb2;
+  --k-success-normal-92: #c3f3ca;
+  --k-success-normal-96: #defbe2;
+  --k-success-dim-20: #0d190f;
+  --k-success-dim-24: #142417;
+  --k-success-dim-28: #1a2e1e;
+  --k-success-dim-32: #213a25;
+  --k-success-dim-36: #27452d;
+  --k-success-dim-40: #2d5134;
+  --k-success-dim-44: #345e3c;
+  --k-success-dim-48: #3a6a43;
+  --k-success-dim-52: #3f784b;
+  --k-success-dim-56: #458552;
+  --k-success-dim-60: #4a935a;
+  --k-success-dim-64: #4fa161;
+  --k-success-dim-68: #54af69;
+  --k-success-dim-72: #58bd70;
+  --k-success-dim-76: #71c882;
+  --k-success-dim-80: #89d296;
+  --k-success-dim-84: #a1dbab;
+  --k-success-dim-88: #bae4c0;
+  --k-success-dim-92: #d1edd5;
+  --k-success-dim-96: #e6f7e8;
+  --k-gray-0: #000;
+  --k-gray-16: #0d0d0d;
+  --k-gray-20: #161616;
+  --k-gray-24: #1f1f1f;
+  --k-gray-28: #292929;
+  --k-gray-32: #333;
+  --k-gray-36: #3d3d3d;
+  --k-gray-40: #484848;
+  --k-gray-44: #525252;
+  --k-gray-48: #5d5d5d;
+  --k-gray-52: #696969;
+  --k-gray-56: #747474;
+  --k-gray-60: #808080;
+  --k-gray-64: #8c8c8c;
+  --k-gray-68: #989898;
+  --k-gray-72: #a4a4a4;
+  --k-gray-76: #b1b1b1;
+  --k-gray-80: #bebebe;
+  --k-gray-84: #cacaca;
+  --k-gray-88: #d7d7d7;
+  --k-gray-92: #e4e4e4;
+  --k-gray-96: #f2f2f2;
+  --k-gray-98: #f8f8f8;
+  --k-gray-100: #fff;
+  --k-whiteAlpha-4: rgba(255, 255, 255, 0.04);
+  --k-whiteAlpha-6: rgba(255, 255, 255, 0.06);
+  --k-whiteAlpha-8: rgba(255, 255, 255, 0.08);
+  --k-whiteAlpha-12: rgba(255, 255, 255, 0.12);
+  --k-whiteAlpha-16: rgba(255, 255, 255, 0.16);
+  --k-whiteAlpha-20: rgba(255, 255, 255, 0.2);
+  --k-whiteAlpha-24: rgba(255, 255, 255, 0.24);
+  --k-whiteAlpha-28: rgba(255, 255, 255, 0.28);
+  --k-whiteAlpha-32: rgba(255, 255, 255, 0.32);
+  --k-whiteAlpha-36: rgba(255, 255, 255, 0.36);
+  --k-whiteAlpha-40: rgba(255, 255, 255, 0.4);
+  --k-whiteAlpha-44: rgba(255, 255, 255, 0.44);
+  --k-whiteAlpha-48: rgba(255, 255, 255, 0.48);
+  --k-whiteAlpha-52: rgba(255, 255, 255, 0.52);
+  --k-whiteAlpha-56: rgba(255, 255, 255, 0.56);
+  --k-whiteAlpha-60: rgba(255, 255, 255, 0.6);
+  --k-whiteAlpha-64: rgba(255, 255, 255, 0.64);
+  --k-whiteAlpha-68: rgba(255, 255, 255, 0.68);
+  --k-whiteAlpha-72: rgba(255, 255, 255, 0.72);
+  --k-whiteAlpha-76: rgba(255, 255, 255, 0.76);
+  --k-whiteAlpha-80: rgba(255, 255, 255, 0.8);
+  --k-whiteAlpha-84: rgba(255, 255, 255, 0.84);
+  --k-whiteAlpha-88: rgba(255, 255, 255, 0.88);
+  --k-whiteAlpha-92: rgba(255, 255, 255, 0.92);
+  --k-whiteAlpha-96: rgba(255, 255, 255, 0.96);
+  --k-whiteAlpha-100: rgba(255, 255, 255, 1);
+  --k-blackAlpha-4: rgba(0, 0, 0, 0.04);
+  --k-blackAlpha-6: rgba(0, 0, 0, 0.06);
+  --k-blackAlpha-8: rgba(0, 0, 0, 0.08);
+  --k-blackAlpha-12: rgba(0, 0, 0, 0.12);
+  --k-blackAlpha-16: rgba(0, 0, 0, 0.16);
+  --k-blackAlpha-20: rgba(0, 0, 0, 0.2);
+  --k-blackAlpha-24: rgba(0, 0, 0, 0.24);
+  --k-blackAlpha-28: rgba(0, 0, 0, 0.28);
+  --k-blackAlpha-32: rgba(0, 0, 0, 0.32);
+  --k-blackAlpha-36: rgba(0, 0, 0, 0.36);
+  --k-blackAlpha-40: rgba(0, 0, 0, 0.4);
+  --k-blackAlpha-44: rgba(0, 0, 0, 0.44);
+  --k-blackAlpha-48: rgba(0, 0, 0, 0.48);
+  --k-blackAlpha-52: rgba(0, 0, 0, 0.52);
+  --k-blackAlpha-56: rgba(0, 0, 0, 0.56);
+  --k-blackAlpha-60: rgba(0, 0, 0, 0.6);
+  --k-blackAlpha-64: rgba(0, 0, 0, 0.64);
+  --k-blackAlpha-68: rgba(0, 0, 0, 0.68);
+  --k-blackAlpha-72: rgba(0, 0, 0, 0.72);
+  --k-blackAlpha-76: rgba(0, 0, 0, 0.76);
+  --k-blackAlpha-80: rgba(0, 0, 0, 0.8);
+  --k-blackAlpha-84: rgba(0, 0, 0, 0.84);
+  --k-blackAlpha-88: rgba(0, 0, 0, 0.88);
+  --k-blackAlpha-92: rgba(0, 0, 0, 0.92);
+  --k-blackAlpha-96: rgba(0, 0, 0, 0.96);
+  --k-blackAlpha-100: rgba(0, 0, 0, 1);
+  --k-onBrand-4: rgba(255, 255, 255, 0.04);
+  --k-onBrand-6: rgba(255, 255, 255, 0.06);
+  --k-onBrand-8: rgba(255, 255, 255, 0.08);
+  --k-onBrand-12: rgba(255, 255, 255, 0.12);
+  --k-onBrand-16: rgba(255, 255, 255, 0.16);
+  --k-onBrand-20: rgba(255, 255, 255, 0.2);
+  --k-onBrand-24: rgba(255, 255, 255, 0.24);
+  --k-onBrand-28: rgba(255, 255, 255, 0.28);
+  --k-onBrand-32: rgba(255, 255, 255, 0.32);
+  --k-onBrand-36: rgba(255, 255, 255, 0.36);
+  --k-onBrand-40: rgba(255, 255, 255, 0.4);
+  --k-onBrand-44: rgba(255, 255, 255, 0.44);
+  --k-onBrand-48: rgba(255, 255, 255, 0.48);
+  --k-onBrand-52: rgba(255, 255, 255, 0.52);
+  --k-onBrand-56: rgba(255, 255, 255, 0.56);
+  --k-onBrand-60: rgba(255, 255, 255, 0.6);
+  --k-onBrand-64: rgba(255, 255, 255, 0.64);
+  --k-onBrand-68: rgba(255, 255, 255, 0.68);
+  --k-onBrand-72: rgba(255, 255, 255, 0.72);
+  --k-onBrand-76: rgba(255, 255, 255, 0.76);
+  --k-onBrand-80: rgba(255, 255, 255, 0.8);
+  --k-onBrand-84: rgba(255, 255, 255, 0.84);
+  --k-onBrand-88: rgba(255, 255, 255, 0.88);
+  --k-onBrand-92: rgba(255, 255, 255, 0.92);
+  --k-onBrand-96: rgba(255, 255, 255, 0.96);
+  --k-onBrand-100: rgba(255, 255, 255, 1);
+  --k-onAccent-4: rgba(255, 255, 255, 0.04);
+  --k-onAccent-6: rgba(255, 255, 255, 0.06);
+  --k-onAccent-8: rgba(255, 255, 255, 0.08);
+  --k-onAccent-12: rgba(255, 255, 255, 0.12);
+  --k-onAccent-16: rgba(255, 255, 255, 0.16);
+  --k-onAccent-20: rgba(255, 255, 255, 0.2);
+  --k-onAccent-24: rgba(255, 255, 255, 0.24);
+  --k-onAccent-28: rgba(255, 255, 255, 0.28);
+  --k-onAccent-32: rgba(255, 255, 255, 0.32);
+  --k-onAccent-36: rgba(255, 255, 255, 0.36);
+  --k-onAccent-40: rgba(255, 255, 255, 0.4);
+  --k-onAccent-44: rgba(255, 255, 255, 0.44);
+  --k-onAccent-48: rgba(255, 255, 255, 0.48);
+  --k-onAccent-52: rgba(255, 255, 255, 0.52);
+  --k-onAccent-56: rgba(255, 255, 255, 0.56);
+  --k-onAccent-60: rgba(255, 255, 255, 0.6);
+  --k-onAccent-64: rgba(255, 255, 255, 0.64);
+  --k-onAccent-68: rgba(255, 255, 255, 0.68);
+  --k-onAccent-72: rgba(255, 255, 255, 0.72);
+  --k-onAccent-76: rgba(255, 255, 255, 0.76);
+  --k-onAccent-80: rgba(255, 255, 255, 0.8);
+  --k-onAccent-84: rgba(255, 255, 255, 0.84);
+  --k-onAccent-88: rgba(255, 255, 255, 0.88);
+  --k-onAccent-92: rgba(255, 255, 255, 0.92);
+  --k-onAccent-96: rgba(255, 255, 255, 0.96);
+  --k-onAccent-100: rgba(255, 255, 255, 1);
+}