@skbkontur/colors 1.1.2-1903c.0 → 1.1.2-626ea.0

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

@@ -0,0 +1,55 @@
+export interface BaseTokens {
+    brand: {
+        logo: ThemedValue;
+        original: string;
+        promo: string;
+        interactions: {
+            hover: ThemedValue;
+            pressed: ThemedValue;
+        };
+        palette: ColorPalette;
+    };
+    accent: {
+        original: ThemedValue;
+        interactions: {
+            hover: ThemedValue;
+            pressed: ThemedValue;
+        };
+        palette?: ColorPalette;
+    };
+    warning: ColorPalette;
+    error: ColorPalette;
+    success: ColorPalette;
+    gray: ColorWithScale<GrayScale>;
+    whiteAlpha: ColorWithScale<AlphaScale>;
+    blackAlpha: ColorWithScale<AlphaScale>;
+    onBrand: ColorWithScale<AlphaScale>;
+    onAccent?: ColorWithScale<AlphaScale>;
+    customizable: {
+        red: ColorPalette;
+        orange: ColorPalette;
+        green: ColorPalette;
+        mint: ColorPalette;
+        blue: ColorPalette;
+        blueDeep: ColorPalette;
+        violet: ColorPalette;
+        purple: ColorPalette;
+        yellow: ColorPalette;
+    };
+}
+export interface ColorPalette {
+    vivid: ColorWithScale<ChromaScale>;
+    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;
+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;
+type ColorWithScale<T extends string | number> = {
+    [K in T]: string;
+};
+interface ThemedValue {
+    light: string;
+    dark: string;
+}
+export {};

package/dist/esm/types/base-tokens.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,43 @@
+export interface GeneratorColorChromaSettingsGroup {
+    [key: number]: {
+        vivid: GeneratorColorChromaSettings;
+        normal: GeneratorColorChromaSettings;
+        dim: GeneratorColorChromaSettings;
+    };
+}
+export interface GeneratorColorChromaSettings {
+    rel: number;
+    min?: number;
+    max?: number;
+}
+export interface GeneratorColorPalette {
+    vivid: {
+        [key: number]: string;
+    };
+    normal: {
+        [key: number]: string;
+    };
+    dim: {
+        [key: number]: string;
+    };
+}
+export interface GeneratorColorAbneyCorrection {
+    [lightness: number]: {
+        [hueShiftRange: number]: number;
+    };
+}
+export interface GeneratorColorWarningHuePatch {
+    [lightness: number]: number;
+}
+export interface GeneratorPaletteParams {
+    color: string;
+    type?: 'default' | 'warning' | 'promo';
+    settings?: {
+        chromaSettings?: GeneratorColorChromaSettingsGroup;
+        abneyCorrection?: GeneratorColorAbneyCorrection;
+        promoHueShifts?: {
+            [hueRange: number]: number;
+        };
+        warningHuePatch?: GeneratorColorWarningHuePatch;
+    };
+}

package/dist/esm/types/generator-tokens.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,31 +1,37 @@
 {
   "name": "@skbkontur/colors",
-  "version": "1.1.2-1903c.0",
+  "version": "1.1.2-626ea.0",
+  "author": "Kontur",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "module": "dist/esm/colors.js",
-  "main": "dist/cjs/colors.js",
+  "module": "dist/esm/get-colors.js",
+  "main": "dist/cjs/get-colors.js",
   "license": "UNLICENSED",
   "scripts": {
     "clean": "git clean -fdxqe node_modules",
-    "prebuild": "rimraf dist && node --require ./scripts/babel-register -- scripts/generate.ts",
-    "build": "npm run build:cjs && npm run build:esm && npm run build:prettier",
+    "extract-tokens": "node --require ./scripts/babel-register -- scripts/extract-tokens-from-figma.ts",
+    "generate": "rimraf dist && node --require ./scripts/babel-register -- scripts/generate.ts && prettier ./src/tokens * --write && npx stylelint \"**/*.{css,scss,less}\" --fix",
+    "build": "npm run build:cjs && npm run build:esm",
     "build:cjs": "tsc -p tsconfig.cjs.json",
-    "build:esm": "tsc -p tsconfig.esm.json",
-    "build:prettier": "prettier src colors.* --write"
+    "build:esm": "tsc -p tsconfig.esm.json"
   },
   "sideEffects": false,
   "files": [
     "dist",
     "colors.*"
   ],
-  "author": "Kontur",
   "devDependencies": {
     "@babel/preset-typescript": "7.22.5",
     "@babel/register": "7.22.5",
     "@skbkontur/react-ui": "4.25.2",
     "rimraf": "^4.1.2"
+  },
+  "dependencies": {
+    "@types/apca-w3": "0.1.3",
+    "@types/culori": "4.0.1",
+    "apca-w3": "0.1.9",
+    "culori": "4.0.2"
   }
 }

package/colors.css

@@ -1,160 +0,0 @@
-:root {
-  --kontur-red-0-logo: #fe4c4c;
-  --kontur-red-10: #ffebeb;
-  --kontur-red-20: #ffcbcb;
-  --kontur-red-30: #ffabab;
-  --kontur-red-40: #fe8c8c;
-  --kontur-red-light-basic-50: #fe6c6c;
-  --kontur-red-basic-60: #fe4c4c;
-  --kontur-red-70: #ed3f3f;
-  --kontur-red-80: #dd3333;
-  --kontur-red-90: #cc2626;
-  --kontur-red-100: #bb1919;
-  --kontur-red-110: #ab0d0d;
-  --kontur-red-promo-accent: #6c1d45;
-  --kontur-orange-0-logo: #fc7630;
-  --kontur-orange-10: #ffe0c3;
-  --kontur-orange-20: #ffd1a0;
-  --kontur-orange-30: #ffc17d;
-  --kontur-orange-40: #ffb259;
-  --kontur-orange-light-basic-50: #ffa236;
-  --kontur-orange-basic-60: #ff8227;
-  --kontur-orange-70: #ea7324;
-  --kontur-orange-80: #d46421;
-  --kontur-orange-90: #bf561e;
-  --kontur-orange-100: #a9471b;
-  --kontur-orange-110: #943817;
-  --kontur-orange-promo-accent: #661429;
-  --kontur-yellow-0-logo: #feca42;
-  --kontur-yellow-10: #ffeec2;
-  --kontur-yellow-20: #fde1a1;
-  --kontur-yellow-30: #fdd481;
-  --kontur-yellow-40: #fcc660;
-  --kontur-yellow-light-basic-50: #fcb73e;
-  --kontur-yellow-basic-60: #fda70c;
-  --kontur-yellow-70: #f69912;
-  --kontur-yellow-80: #ef8b17;
-  --kontur-yellow-90: #e77e1b;
-  --kontur-yellow-100: #de711e;
-  --kontur-yellow-110: #d46421;
-  --kontur-green-0-logo: #26ad50;
-  --kontur-green-10: #c7f9cc;
-  --kontur-green-20: #a7eeb3;
-  --kontur-green-30: #87e39a;
-  --kontur-green-40: #67d881;
-  --kontur-green-light-basic-50: #46cd68;
-  --kontur-green-basic-60: #26ad50;
-  --kontur-green-70: #23a14a;
-  --kontur-green-80: #209644;
-  --kontur-green-90: #1c8a3f;
-  --kontur-green-100: #197f39;
-  --kontur-green-110: #167333;
-  --kontur-green-green: #144942;
-  --kontur-green-mint-0-logo: #00bea2;
-  --kontur-green-mint-10: #c6f5ec;
-  --kontur-green-mint-20: #a8eee2;
-  --kontur-green-mint-30: #8be7d8;
-  --kontur-green-mint-40: #6ddfcd;
-  --kontur-green-mint-light-basic-50: #4fd8c3;
-  --kontur-green-mint-basic-60: #00c5a8;
-  --kontur-green-mint-70: #00b59a;
-  --kontur-green-mint-80: #00a58d;
-  --kontur-green-mint-90: #00957f;
-  --kontur-green-mint-100: #008571;
-  --kontur-green-mint-110: #007564;
-  --kontur-green-mint-promo-accent: #013f54;
-  --kontur-blue-0-logo: #2291ff;
-  --kontur-blue-10: #cdedff;
-  --kontur-blue-20: #aeddff;
-  --kontur-blue-30: #8fcdff;
-  --kontur-blue-40: #70bdff;
-  --kontur-blue-light-basic-50: #51adff;
-  --kontur-blue-basic-60: #2291ff;
-  --kontur-blue-70: #1f87ef;
-  --kontur-blue-80: #1c7edf;
-  --kontur-blue-90: #1874cf;
-  --kontur-blue-100: #156abe;
-  --kontur-blue-110: #1261ae;
-  --kontur-blue-promo-accent: #153177;
-  --kontur-blue-dark-0-logo: #366af3;
-  --kontur-blue-dark-10: #dde6ff;
-  --kontur-blue-dark-20: #becfff;
-  --kontur-blue-dark-30: #9fb8ff;
-  --kontur-blue-dark-40: #80a1ff;
-  --kontur-blue-dark-light-basic-50: #618aff;
-  --kontur-blue-dark-basic-60: #366af3;
-  --kontur-blue-dark-70: #3365e8;
-  --kontur-blue-dark-80: #3060dc;
-  --kontur-blue-dark-90: #2e5ad1;
-  --kontur-blue-dark-100: #2b55c5;
-  --kontur-blue-dark-110: #2850ba;
-  --kontur-blue-dark-promo-accent: #272567;
-  --kontur-purple-0-logo: #b750d1;
-  --kontur-purple-10: #f7d7ff;
-  --kontur-purple-20: #eabdf6;
-  --kontur-purple-30: #dea3ec;
-  --kontur-purple-40: #d189e3;
-  --kontur-purple-light-basic-50: #c56fda;
-  --kontur-purple-basic-60: #b750d1;
-  --kontur-purple-70: #aa49c3;
-  --kontur-purple-80: #9e43b5;
-  --kontur-purple-90: #913ca6;
-  --kontur-purple-100: #843698;
-  --kontur-purple-110: #782f8a;
-  --kontur-purple-promo-accent: #452a78;
-  --kontur-main-link-text-blue-90: #1874cf;
-  --kontur-main-link-shape-blue-60: #2291ff;
-  --kontur-main-link-background-blue-10: #cdedff;
-  --kontur-main-success-text-green-90: #1c8a3f;
-  --kontur-main-success-shape-green-60: #26ad50;
-  --kontur-main-success-background-green-10: #c7f9cc;
-  --kontur-main-warning-text-yellow-80: #ef8b17;
-  --kontur-main-warning-shape-yellow-50: #fcb73e;
-  --kontur-main-warning-background-yellow-10: #ffeec2;
-  --kontur-main-error-text-red-90: #cc2626;
-  --kontur-main-error-shape-red-60: #fe4c4c;
-  --kontur-main-error-background-red-10: #ffebeb;
-  --kontur-grayscale-text: #222222;
-  --kontur-grayscale-secondary-text: #757575;
-  --kontur-grayscale-disabled-text: #adadad;
-  --kontur-grayscale-dark-background: #d6d6d6;
-  --kontur-grayscale-background: #e6e6e6;
-  --kontur-grayscale-light-background: #f0f0f0;
-  --kontur-grayscale-87-text: rgba(0, 0, 0, 0.87);
-  --kontur-grayscale-54-secondary-text: rgba(0, 0, 0, 0.54);
-  --kontur-grayscale-32-disabled-text: rgba(0, 0, 0, 0.32);
-  --kontur-grayscale-16-dark-background: rgba(0, 0, 0, 0.16);
-  --kontur-grayscale-10-background: rgba(0, 0, 0, 0.1);
-  --kontur-grayscale-6-light-background: rgba(0, 0, 0, 0.06);
-  --kontur-grayscale-87-text-white: rgba(255, 255, 255, 0.87);
-  --kontur-grayscale-54-secondary-white: rgba(255, 255, 255, 0.54);
-  --kontur-grayscale-32-disabled-white: rgba(255, 255, 255, 0.32);
-  --kontur-grayscale-16-white: rgba(255, 255, 255, 0.16);
-  --kontur-grayscale-10-white: rgba(255, 255, 255, 0.1);
-  --kontur-grayscale-6-white: rgba(255, 255, 255, 0.06);
-  --kontur-grayscale-black-000: #000000;
-  --kontur-grayscale-white-fff: #ffffff;
-  --kontur-primary-default: #3d3d3d;
-  --kontur-primary-hover: #292929;
-  --kontur-primary-pressed: #141414;
-  --kontur-link-states-text-hover-blue-100: #156abe;
-  --kontur-link-states-text-pressed-blue-110: #1260ae;
-  --kontur-link-states-shape-hover-blue-70: #1f87ef;
-  --kontur-link-states-shape-pressed-blue-80: #1c7edf;
-  --kontur-success-states-text-hover-green-100: #197f39;
-  --kontur-success-states-text-pressed-green-110: #167333;
-  --kontur-success-states-shape-hover-green-70: #23a14a;
-  --kontur-success-states-shape-pressed-green-80: #209644;
-  --kontur-warning-states-text-hover-yellow-90: #e77e1b;
-  --kontur-warning-states-text-pressed-yellow-100: #de711e;
-  --kontur-warning-states-shape-hover-yellow-60: #fda70c;
-  --kontur-warning-states-shape-pressed-yellow-70: #f69912;
-  --kontur-error-states-text-hover-red-100: #bb1919;
-  --kontur-error-states-text-pressed-red-110: #ab0d0d;
-  --kontur-error-states-shape-hover-red-70: #ed3f3f;
-  --kontur-error-states-shape-pressed-red-80: #dd3333;
-  --kontur-shade-16-black: rgba(0, 0, 0, 0.16);
-  --kontur-shade-80-white: rgba(255, 255, 255, 0.8);
-  --kontur-elements-exceptions-hint: rgba(0, 0, 0, 0.76);
-  --kontur-elements-exceptions-toast-red: rgba(210, 15, 0, 0.76);
-}

package/colors.less

@@ -1,158 +0,0 @@
-@red-0-logo: #fe4c4c;
-@red-10: #ffebeb;
-@red-20: #ffcbcb;
-@red-30: #ffabab;
-@red-40: #fe8c8c;
-@red-light-basic-50: #fe6c6c;
-@red-basic-60: #fe4c4c;
-@red-70: #ed3f3f;
-@red-80: #dd3333;
-@red-90: #cc2626;
-@red-100: #bb1919;
-@red-110: #ab0d0d;
-@red-promo-accent: #6c1d45;
-@orange-0-logo: #fc7630;
-@orange-10: #ffe0c3;
-@orange-20: #ffd1a0;
-@orange-30: #ffc17d;
-@orange-40: #ffb259;
-@orange-light-basic-50: #ffa236;
-@orange-basic-60: #ff8227;
-@orange-70: #ea7324;
-@orange-80: #d46421;
-@orange-90: #bf561e;
-@orange-100: #a9471b;
-@orange-110: #943817;
-@orange-promo-accent: #661429;
-@yellow-0-logo: #feca42;
-@yellow-10: #ffeec2;
-@yellow-20: #fde1a1;
-@yellow-30: #fdd481;
-@yellow-40: #fcc660;
-@yellow-light-basic-50: #fcb73e;
-@yellow-basic-60: #fda70c;
-@yellow-70: #f69912;
-@yellow-80: #ef8b17;
-@yellow-90: #e77e1b;
-@yellow-100: #de711e;
-@yellow-110: #d46421;
-@green-0-logo: #26ad50;
-@green-10: #c7f9cc;
-@green-20: #a7eeb3;
-@green-30: #87e39a;
-@green-40: #67d881;
-@green-light-basic-50: #46cd68;
-@green-basic-60: #26ad50;
-@green-70: #23a14a;
-@green-80: #209644;
-@green-90: #1c8a3f;
-@green-100: #197f39;
-@green-110: #167333;
-@green-green: #144942;
-@green-mint-0-logo: #00bea2;
-@green-mint-10: #c6f5ec;
-@green-mint-20: #a8eee2;
-@green-mint-30: #8be7d8;
-@green-mint-40: #6ddfcd;
-@green-mint-light-basic-50: #4fd8c3;
-@green-mint-basic-60: #00c5a8;
-@green-mint-70: #00b59a;
-@green-mint-80: #00a58d;
-@green-mint-90: #00957f;
-@green-mint-100: #008571;
-@green-mint-110: #007564;
-@green-mint-promo-accent: #013f54;
-@blue-0-logo: #2291ff;
-@blue-10: #cdedff;
-@blue-20: #aeddff;
-@blue-30: #8fcdff;
-@blue-40: #70bdff;
-@blue-light-basic-50: #51adff;
-@blue-basic-60: #2291ff;
-@blue-70: #1f87ef;
-@blue-80: #1c7edf;
-@blue-90: #1874cf;
-@blue-100: #156abe;
-@blue-110: #1261ae;
-@blue-promo-accent: #153177;
-@blue-dark-0-logo: #366af3;
-@blue-dark-10: #dde6ff;
-@blue-dark-20: #becfff;
-@blue-dark-30: #9fb8ff;
-@blue-dark-40: #80a1ff;
-@blue-dark-light-basic-50: #618aff;
-@blue-dark-basic-60: #366af3;
-@blue-dark-70: #3365e8;
-@blue-dark-80: #3060dc;
-@blue-dark-90: #2e5ad1;
-@blue-dark-100: #2b55c5;
-@blue-dark-110: #2850ba;
-@blue-dark-promo-accent: #272567;
-@purple-0-logo: #b750d1;
-@purple-10: #f7d7ff;
-@purple-20: #eabdf6;
-@purple-30: #dea3ec;
-@purple-40: #d189e3;
-@purple-light-basic-50: #c56fda;
-@purple-basic-60: #b750d1;
-@purple-70: #aa49c3;
-@purple-80: #9e43b5;
-@purple-90: #913ca6;
-@purple-100: #843698;
-@purple-110: #782f8a;
-@purple-promo-accent: #452a78;
-@main-link-text-blue-90: #1874cf;
-@main-link-shape-blue-60: #2291ff;
-@main-link-background-blue-10: #cdedff;
-@main-success-text-green-90: #1c8a3f;
-@main-success-shape-green-60: #26ad50;
-@main-success-background-green-10: #c7f9cc;
-@main-warning-text-yellow-80: #ef8b17;
-@main-warning-shape-yellow-50: #fcb73e;
-@main-warning-background-yellow-10: #ffeec2;
-@main-error-text-red-90: #cc2626;
-@main-error-shape-red-60: #fe4c4c;
-@main-error-background-red-10: #ffebeb;
-@grayscale-text: #222222;
-@grayscale-secondary-text: #757575;
-@grayscale-disabled-text: #adadad;
-@grayscale-dark-background: #d6d6d6;
-@grayscale-background: #e6e6e6;
-@grayscale-light-background: #f0f0f0;
-@grayscale-87-text: rgba(0, 0, 0, 0.87);
-@grayscale-54-secondary-text: rgba(0, 0, 0, 0.54);
-@grayscale-32-disabled-text: rgba(0, 0, 0, 0.32);
-@grayscale-16-dark-background: rgba(0, 0, 0, 0.16);
-@grayscale-10-background: rgba(0, 0, 0, 0.1);
-@grayscale-6-light-background: rgba(0, 0, 0, 0.06);
-@grayscale-87-text-white: rgba(255, 255, 255, 0.87);
-@grayscale-54-secondary-white: rgba(255, 255, 255, 0.54);
-@grayscale-32-disabled-white: rgba(255, 255, 255, 0.32);
-@grayscale-16-white: rgba(255, 255, 255, 0.16);
-@grayscale-10-white: rgba(255, 255, 255, 0.1);
-@grayscale-6-white: rgba(255, 255, 255, 0.06);
-@grayscale-black-000: #000000;
-@grayscale-white-fff: #ffffff;
-@primary-default: #3d3d3d;
-@primary-hover: #292929;
-@primary-pressed: #141414;
-@link-states-text-hover-blue-100: #156abe;
-@link-states-text-pressed-blue-110: #1260ae;
-@link-states-shape-hover-blue-70: #1f87ef;
-@link-states-shape-pressed-blue-80: #1c7edf;
-@success-states-text-hover-green-100: #197f39;
-@success-states-text-pressed-green-110: #167333;
-@success-states-shape-hover-green-70: #23a14a;
-@success-states-shape-pressed-green-80: #209644;
-@warning-states-text-hover-yellow-90: #e77e1b;
-@warning-states-text-pressed-yellow-100: #de711e;
-@warning-states-shape-hover-yellow-60: #fda70c;
-@warning-states-shape-pressed-yellow-70: #f69912;
-@error-states-text-hover-red-100: #bb1919;
-@error-states-text-pressed-red-110: #ab0d0d;
-@error-states-shape-hover-red-70: #ed3f3f;
-@error-states-shape-pressed-red-80: #dd3333;
-@shade-16-black: rgba(0, 0, 0, 0.16);
-@shade-80-white: rgba(255, 255, 255, 0.8);
-@elements-exceptions-hint: rgba(0, 0, 0, 0.76);
-@elements-exceptions-toast-red: rgba(210, 15, 0, 0.76);

package/colors.scss

@@ -1,158 +0,0 @@
-$red-0-logo: #fe4c4c;
-$red-10: #ffebeb;
-$red-20: #ffcbcb;
-$red-30: #ffabab;
-$red-40: #fe8c8c;
-$red-light-basic-50: #fe6c6c;
-$red-basic-60: #fe4c4c;
-$red-70: #ed3f3f;
-$red-80: #dd3333;
-$red-90: #cc2626;
-$red-100: #bb1919;
-$red-110: #ab0d0d;
-$red-promo-accent: #6c1d45;
-$orange-0-logo: #fc7630;
-$orange-10: #ffe0c3;
-$orange-20: #ffd1a0;
-$orange-30: #ffc17d;
-$orange-40: #ffb259;
-$orange-light-basic-50: #ffa236;
-$orange-basic-60: #ff8227;
-$orange-70: #ea7324;
-$orange-80: #d46421;
-$orange-90: #bf561e;
-$orange-100: #a9471b;
-$orange-110: #943817;
-$orange-promo-accent: #661429;
-$yellow-0-logo: #feca42;
-$yellow-10: #ffeec2;
-$yellow-20: #fde1a1;
-$yellow-30: #fdd481;
-$yellow-40: #fcc660;
-$yellow-light-basic-50: #fcb73e;
-$yellow-basic-60: #fda70c;
-$yellow-70: #f69912;
-$yellow-80: #ef8b17;
-$yellow-90: #e77e1b;
-$yellow-100: #de711e;
-$yellow-110: #d46421;
-$green-0-logo: #26ad50;
-$green-10: #c7f9cc;
-$green-20: #a7eeb3;
-$green-30: #87e39a;
-$green-40: #67d881;
-$green-light-basic-50: #46cd68;
-$green-basic-60: #26ad50;
-$green-70: #23a14a;
-$green-80: #209644;
-$green-90: #1c8a3f;
-$green-100: #197f39;
-$green-110: #167333;
-$green-green: #144942;
-$green-mint-0-logo: #00bea2;
-$green-mint-10: #c6f5ec;
-$green-mint-20: #a8eee2;
-$green-mint-30: #8be7d8;
-$green-mint-40: #6ddfcd;
-$green-mint-light-basic-50: #4fd8c3;
-$green-mint-basic-60: #00c5a8;
-$green-mint-70: #00b59a;
-$green-mint-80: #00a58d;
-$green-mint-90: #00957f;
-$green-mint-100: #008571;
-$green-mint-110: #007564;
-$green-mint-promo-accent: #013f54;
-$blue-0-logo: #2291ff;
-$blue-10: #cdedff;
-$blue-20: #aeddff;
-$blue-30: #8fcdff;
-$blue-40: #70bdff;
-$blue-light-basic-50: #51adff;
-$blue-basic-60: #2291ff;
-$blue-70: #1f87ef;
-$blue-80: #1c7edf;
-$blue-90: #1874cf;
-$blue-100: #156abe;
-$blue-110: #1261ae;
-$blue-promo-accent: #153177;
-$blue-dark-0-logo: #366af3;
-$blue-dark-10: #dde6ff;
-$blue-dark-20: #becfff;
-$blue-dark-30: #9fb8ff;
-$blue-dark-40: #80a1ff;
-$blue-dark-light-basic-50: #618aff;
-$blue-dark-basic-60: #366af3;
-$blue-dark-70: #3365e8;
-$blue-dark-80: #3060dc;
-$blue-dark-90: #2e5ad1;
-$blue-dark-100: #2b55c5;
-$blue-dark-110: #2850ba;
-$blue-dark-promo-accent: #272567;
-$purple-0-logo: #b750d1;
-$purple-10: #f7d7ff;
-$purple-20: #eabdf6;
-$purple-30: #dea3ec;
-$purple-40: #d189e3;
-$purple-light-basic-50: #c56fda;
-$purple-basic-60: #b750d1;
-$purple-70: #aa49c3;
-$purple-80: #9e43b5;
-$purple-90: #913ca6;
-$purple-100: #843698;
-$purple-110: #782f8a;
-$purple-promo-accent: #452a78;
-$main-link-text-blue-90: #1874cf;
-$main-link-shape-blue-60: #2291ff;
-$main-link-background-blue-10: #cdedff;
-$main-success-text-green-90: #1c8a3f;
-$main-success-shape-green-60: #26ad50;
-$main-success-background-green-10: #c7f9cc;
-$main-warning-text-yellow-80: #ef8b17;
-$main-warning-shape-yellow-50: #fcb73e;
-$main-warning-background-yellow-10: #ffeec2;
-$main-error-text-red-90: #cc2626;
-$main-error-shape-red-60: #fe4c4c;
-$main-error-background-red-10: #ffebeb;
-$grayscale-text: #222222;
-$grayscale-secondary-text: #757575;
-$grayscale-disabled-text: #adadad;
-$grayscale-dark-background: #d6d6d6;
-$grayscale-background: #e6e6e6;
-$grayscale-light-background: #f0f0f0;
-$grayscale-87-text: rgba(0, 0, 0, 0.87);
-$grayscale-54-secondary-text: rgba(0, 0, 0, 0.54);
-$grayscale-32-disabled-text: rgba(0, 0, 0, 0.32);
-$grayscale-16-dark-background: rgba(0, 0, 0, 0.16);
-$grayscale-10-background: rgba(0, 0, 0, 0.1);
-$grayscale-6-light-background: rgba(0, 0, 0, 0.06);
-$grayscale-87-text-white: rgba(255, 255, 255, 0.87);
-$grayscale-54-secondary-white: rgba(255, 255, 255, 0.54);
-$grayscale-32-disabled-white: rgba(255, 255, 255, 0.32);
-$grayscale-16-white: rgba(255, 255, 255, 0.16);
-$grayscale-10-white: rgba(255, 255, 255, 0.1);
-$grayscale-6-white: rgba(255, 255, 255, 0.06);
-$grayscale-black-000: #000000;
-$grayscale-white-fff: #ffffff;
-$primary-default: #3d3d3d;
-$primary-hover: #292929;
-$primary-pressed: #141414;
-$link-states-text-hover-blue-100: #156abe;
-$link-states-text-pressed-blue-110: #1260ae;
-$link-states-shape-hover-blue-70: #1f87ef;
-$link-states-shape-pressed-blue-80: #1c7edf;
-$success-states-text-hover-green-100: #197f39;
-$success-states-text-pressed-green-110: #167333;
-$success-states-shape-hover-green-70: #23a14a;
-$success-states-shape-pressed-green-80: #209644;
-$warning-states-text-hover-yellow-90: #e77e1b;
-$warning-states-text-pressed-yellow-100: #de711e;
-$warning-states-shape-hover-yellow-60: #fda70c;
-$warning-states-shape-pressed-yellow-70: #f69912;
-$error-states-text-hover-red-100: #bb1919;
-$error-states-text-pressed-red-110: #ab0d0d;
-$error-states-shape-hover-red-70: #ed3f3f;
-$error-states-shape-pressed-red-80: #dd3333;
-$shade-16-black: rgba(0, 0, 0, 0.16);
-$shade-80-white: rgba(255, 255, 255, 0.8);
-$elements-exceptions-hint: rgba(0, 0, 0, 0.76);
-$elements-exceptions-toast-red: rgba(210, 15, 0, 0.76);