@skbkontur/colors 2.0.5 → 2.0.6-alpha.0

package/lib/helpers/get-palette.ts

@@ -1,5 +1,4 @@
 import { clampChroma, converter } from 'culori';
-import { calcAPCA } from 'apca-w3';
 
 import type {
   GeneratorColorAbneyCorrection,
@@ -7,12 +6,13 @@ import type {
   GeneratorColorPalette,
   GeneratorColorWarningHuePatch,
 } from '../types/tokens-base-generator.js';
-import * as DefaultSwatch from '../consts/default-swatch.js';
 import { CHROMA_PARAMS } from '../consts/params/chroma-params.js';
 import { ABNEY_CORRECTION } from '../consts/params/abney-correction.js';
 import { PROMO_HUE_SHIFTS } from '../consts/params/promo-hue-shift.js';
 import { WARNING_HUE_PATCH } from '../consts/params/warning-hue-patch.js';
 
+const toOklch = converter('oklch');
+
 interface GeneratePaletteParams {
   color: string;
   type?: 'default' | 'warning';
@@ -41,10 +41,6 @@ export function getPalette({
     ...customSettings,
   };
 
-  const toOklch = converter('oklch');
-  const oklchColor = toOklch(color);
-  const currentHue = oklchColor?.h || 0;
-
   const toNorm = (x: number) => x / 100;
 
   const calculateChromaValue = (
@@ -70,6 +66,8 @@ export function getPalette({
     dim: {},
   };
   const isWarning = type === 'warning';
+  const baseHue = calcBaseHue(color, settings.abneyCorrection);
+  const correctionHueRange = calcCorrectionRange(color, settings.abneyCorrection);
 
   for (const Lstr in settings.chromaSettings) {
     const L = +Lstr;
@@ -80,10 +78,18 @@ export function getPalette({
       continue;
     }
 
-    const hueAfterWarningPatch = applyWarningHuePatch(currentHue, L, settings.warningHuePatch, isWarning);
-    const appliedHueShift = applyAbneyShift(L, hueAfterWarningPatch, settings.abneyCorrection);
+    let hue = baseHue;
+    const lightnessCorrectionData = settings.abneyCorrection[L];
+    if (lightnessCorrectionData && correctionHueRange !== undefined) {
+      const shift = lightnessCorrectionData[correctionHueRange] ?? 0;
+      hue = (baseHue + shift + 360) % 360;
+    }
 
-    const chromaMax = clampChroma({ mode: 'oklch', l: L / 100, c: 1, h: appliedHueShift }, 'oklch').c;
+    if (isWarning) {
+      hue = calcWarningHuePatch(hue, L, settings.warningHuePatch);
+    }
+
+    const chromaMax = clampChroma({ mode: 'oklch', l: L / 100, c: 1, h: hue }, 'oklch').c;
     const currentParams = settings.chromaSettings[L];
 
     const vividN = calculateChromaValue(
@@ -100,62 +106,22 @@ export function getPalette({
     );
     const dimN = calculateChromaValue(currentParams.dim.rel, currentParams.dim.min, currentParams.dim.max, chromaMax);
 
-    result.vivid[L] = `oklch(${L}% ${vividN.toFixed(3)} ${appliedHueShift.toFixed(0)})`;
-    result.normal[L] = `oklch(${L}% ${normN.toFixed(3)} ${appliedHueShift.toFixed(0)})`;
-    result.dim[L] = `oklch(${L}% ${dimN.toFixed(3)} ${appliedHueShift.toFixed(0)})`;
+    result.vivid[L] = `oklch(${L}% ${vividN.toFixed(3)} ${hue.toFixed(0)})`;
+    result.normal[L] = `oklch(${L}% ${normN.toFixed(3)} ${hue.toFixed(0)})`;
+    result.dim[L] = `oklch(${L}% ${dimN.toFixed(3)} ${hue.toFixed(0)})`;
   }
 
   return result;
 }
 
-export function getAbneyHueShift(
-  lightness: number,
-  currentHue: number,
-  abneyData: GeneratorColorAbneyCorrection
-): number {
-  const lightnessData = abneyData[lightness];
-  if (!lightnessData) {
-    return 0;
-  }
-  const hueRanges = Object.keys(lightnessData)
-    .map(Number)
-    .sort((a, b) => a - b);
-  let selectedHueRange = hueRanges[0];
-  for (let i = 0; i < hueRanges.length; i++) {
-    const startRange = hueRanges[i];
-    const endRange = hueRanges[i + 1] !== undefined ? hueRanges[i + 1] : 360;
-    if (currentHue >= startRange && currentHue < endRange) {
-      selectedHueRange = startRange;
-      break;
-    }
-    if (i === hueRanges.length - 1 && currentHue >= startRange && currentHue < 360) {
-      selectedHueRange = startRange;
-      break;
-    }
-  }
-  return lightnessData[selectedHueRange] !== undefined ? lightnessData[selectedHueRange] : 0;
-}
-
-export function applyAbneyShift(
-  lightness: number,
-  currentHue: number,
-  abneyData: GeneratorColorAbneyCorrection
-): number {
-  const abneyShift = getAbneyHueShift(lightness, currentHue, abneyData);
-  return (currentHue + abneyShift + 360) % 360;
-}
-
-export function applyWarningHuePatch(
+export function calcWarningHuePatch(
   currentHue: number,
   lightness: number,
-  warningHuePatchData: GeneratorColorWarningHuePatch,
-  isWarningMode: boolean
+  warningHuePatchData: GeneratorColorWarningHuePatch
 ): number {
-  if (isWarningMode) {
-    const patch = warningHuePatchData[lightness];
-    if (patch !== undefined) {
-      return (currentHue + patch + 360) % 360;
-    }
+  const patch = warningHuePatchData[lightness];
+  if (patch !== undefined) {
+    return (currentHue + patch + 360) % 360;
   }
   return currentHue;
 }
@@ -178,37 +144,13 @@ function findClosestLightnessStep(targetL: number, availableLightnessSteps: numb
   return closestStep;
 }
 
-export function calculateBaseHueAndCorrectionRange(
-  inputColorString: string,
-  abneyData: GeneratorColorAbneyCorrection
-): {
-  baseHue: number;
-  correctionLightness: number;
-  correctionHueRange: number;
-} | null {
-  const toOklch = converter('oklch');
-  const oklch = toOklch(inputColorString) as { l: number; c: number; h: number };
-  if (!oklch) {
-    console.warn(`Could not parse color string: ${inputColorString}`);
-    return null;
-  }
-  const targetLightness = Math.round(oklch.l * 100);
-  let targetHue = oklch.h;
-  if (isNaN(targetHue)) {
-    console.warn(`Achromatic color detected (${inputColorString}). Defaulting hue to 0.`);
-    targetHue = 0;
-  }
+export function calcBaseHue(inputColorString: string, abneyData: GeneratorColorAbneyCorrection): number {
+  const colorOKLCH = toOklch(inputColorString) as { l: number; c: number; h: number };
+  const targetLightness = colorOKLCH.l * 100;
+  const targetHue = colorOKLCH.h;
   const availableLightnessSteps = Object.keys(abneyData).map(Number);
-  if (availableLightnessSteps.length === 0) {
-    console.warn('Abney correction data is empty, cannot calculate base hue.');
-    return null;
-  }
   const closestLightness = findClosestLightnessStep(targetLightness, availableLightnessSteps);
   const lightnessCorrectionData = abneyData[closestLightness];
-  if (!lightnessCorrectionData) {
-    console.warn(`No Abney correction data for lightness ${closestLightness}.`);
-    return null;
-  }
   const correctedHueMap = Object.entries(lightnessCorrectionData).map(([rawHueStr, shift]) => {
     const rawHue = Number(rawHueStr);
     return {
@@ -217,45 +159,59 @@ export function calculateBaseHueAndCorrectionRange(
       correctedHue: (rawHue + shift + 360) % 360,
     };
   });
-  correctedHueMap.sort((a, b) => {
-    if (a.correctedHue !== b.correctedHue) {
-      return a.correctedHue - b.correctedHue;
-    }
-    return a.rawHue - b.rawHue;
-  });
+
+  correctedHueMap.sort((a, b) => a.correctedHue - b.correctedHue);
   if (correctedHueMap.length === 0) {
-    console.warn(`No hue ranges defined for lightness ${closestLightness}.`);
-    return null;
+    return targetHue;
   }
-  const findCorrectRange = () => {
-    const nextRangeIndex = correctedHueMap.findIndex((range) => range.correctedHue > targetHue);
-    if (nextRangeIndex === 0) {
-      return correctedHueMap[correctedHueMap.length - 1];
+
+  let selectedRange = correctedHueMap[correctedHueMap.length - 1];
+  for (let i = 0; i < correctedHueMap.length; i++) {
+    const current = correctedHueMap[i];
+    const next = correctedHueMap[i + 1];
+
+    if (!next) {
+      selectedRange = current;
+      break;
     }
-    if (nextRangeIndex > 0) {
-      return correctedHueMap[nextRangeIndex - 1];
+
+    if (targetHue >= current.correctedHue && targetHue < next.correctedHue) {
+      selectedRange = current;
+      break;
     }
-    return correctedHueMap[correctedHueMap.length - 1];
-  };
-  const selectedRange = findCorrectRange();
-  if (!selectedRange) {
-    console.error('Could not determine the correct hue range.');
-    return null;
   }
-  const baseHue = (targetHue - selectedRange.shift + 360) % 360;
-  return {
-    baseHue,
-    correctionLightness: closestLightness,
-    correctionHueRange: selectedRange.rawHue,
-  };
+
+  return (targetHue - selectedRange.shift + 360) % 360;
 }
 
-export function calcOnBrand(hex: string) {
-  const whiteContrast = Math.abs(Number(calcAPCA('#fff', hex)));
-  const blackContrast = Math.abs(Number(calcAPCA('#000', hex)));
+export function calcCorrectionRange(inputColorString: string, abneyData: GeneratorColorAbneyCorrection): number {
+  const colorOKLCH = toOklch(inputColorString) as { l: number; c: number; h: number };
+  const targetLightness = colorOKLCH.l * 100;
+  const targetHue = colorOKLCH.h;
+  const availableLightnessSteps = Object.keys(abneyData).map(Number);
+  const closestLightness = findClosestLightnessStep(targetLightness, availableLightnessSteps);
+  const lightnessCorrectionData = abneyData[closestLightness];
+  const correctedHueMap = Object.entries(lightnessCorrectionData).map(([rawHueStr, shift]) => {
+    const rawHue = Number(rawHueStr);
+    return {
+      rawHue,
+      shift,
+      correctedHue: (rawHue + shift + 360) % 360,
+    };
+  });
+
+  correctedHueMap.sort((a, b) => a.correctedHue - b.correctedHue);
+
+  let selectedRange = correctedHueMap[correctedHueMap.length - 1];
+  for (let i = 0; i < correctedHueMap.length; i++) {
+    const current = correctedHueMap[i];
+    const next = correctedHueMap[i + 1];
 
-  if (whiteContrast + 10 >= blackContrast) {
-    return DefaultSwatch.whiteAlpha;
+    if (targetHue >= current.correctedHue && targetHue < next.correctedHue) {
+      selectedRange = current;
+      break;
+    }
   }
-  return DefaultSwatch.blackAlpha;
+
+  return selectedRange.rawHue;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skbkontur/colors",
-  "version": "2.0.5",
+  "version": "2.0.6-alpha.0",
   "author": "Kontur",
   "publishConfig": {
     "access": "public",

package/tokens/brand-blue-deep_accent-brand.css

@@ -18,9 +18,9 @@
   --k-color-text-inverted-success-heavy: #00c655;
   --k-color-text-inverted-success-heavy-hover: #4ede76;
   --k-color-text-inverted-success-heavy-pressed: #4fa161;
-  --k-color-text-inverted-warning-heavy: #f8ae00;
-  --k-color-text-inverted-warning-heavy-hover: #ffbf0b;
-  --k-color-text-inverted-warning-heavy-pressed: #cc9a51;
+  --k-color-text-inverted-warning-heavy: #fdaa00;
+  --k-color-text-inverted-warning-heavy-hover: #ffbe3d;
+  --k-color-text-inverted-warning-heavy-pressed: #d69551;
   --k-color-text-logo: #366af3;
   --k-color-text-neutral-faint: rgba(0, 0, 0, 0.32);
   --k-color-text-neutral-heavy: rgba(0, 0, 0, 0.88);
@@ -29,9 +29,9 @@
   --k-color-text-success-heavy: #007f34;
   --k-color-text-success-heavy-hover: #009b41;
   --k-color-text-success-heavy-pressed: #3a6a43;
-  --k-color-text-warning-heavy: #bc7d00;
-  --k-color-text-warning-heavy-hover: #db9400;
-  --k-color-text-warning-heavy-pressed: #a37736;
+  --k-color-text-warning-heavy: #d26e00;
+  --k-color-text-warning-heavy-hover: #e88b00;
+  --k-color-text-warning-heavy-pressed: #ab713f;
   --k-color-text-const-faint-black: rgba(0, 0, 0, 0.32);
   --k-color-text-const-faint-white: rgba(255, 255, 255, 0.4);
   --k-color-text-const-heavy-black: rgba(0, 0, 0, 0.88);
@@ -63,9 +63,9 @@
   --k-color-shape-bold-success: #00a948;
   --k-color-shape-bold-success-hover: #009b41;
   --k-color-shape-bold-success-pressed: #178b3f;
-  --k-color-shape-bold-warning: #ffbf0b;
-  --k-color-shape-bold-warning-hover: #f8ae00;
-  --k-color-shape-bold-warning-pressed: #e5a331;
+  --k-color-shape-bold-warning: #ffbe3d;
+  --k-color-shape-bold-warning-hover: #fdaa00;
+  --k-color-shape-bold-warning-pressed: #ec9e32;
   --k-color-shape-faint-accent: #e8f3ff;
   --k-color-shape-faint-accent-hover: #d2e7ff;
   --k-color-shape-faint-accent-pressed: #c8d9f1;
@@ -81,13 +81,13 @@
   --k-color-shape-faint-success: #defbe2;
   --k-color-shape-faint-success-hover: #c3f3ca;
   --k-color-shape-faint-success-pressed: #d1edd5;
-  --k-color-shape-faint-warning: #fff3bd;
-  --k-color-shape-faint-warning-hover: #f4e5ad;
-  --k-color-shape-faint-warning-pressed: #ede5c4;
+  --k-color-shape-faint-warning: #fff1ca;
+  --k-color-shape-faint-warning-hover: #f9e3ac;
+  --k-color-shape-faint-warning-pressed: #f1e4c4;
   --k-color-shape-heavy-error: #6b1f1e;
   --k-color-shape-heavy-neutral: #292929;
   --k-color-shape-heavy-success: #0b4a1f;
-  --k-color-shape-heavy-warning: #543600;
+  --k-color-shape-heavy-warning: #583400;
   --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.16);
@@ -125,9 +125,9 @@
   --k-color-shape-pale-success: #c3f3ca;
   --k-color-shape-pale-success-hover: #a7ebb2;
   --k-color-shape-pale-success-pressed: #bae4c0;
-  --k-color-shape-pale-warning: #fbe48d;
-  --k-color-shape-pale-warning-hover: #f2d585;
-  --k-color-shape-pale-warning-pressed: #e9d6a5;
+  --k-color-shape-pale-warning: #ffe29a;
+  --k-color-shape-pale-warning-hover: #f8d286;
+  --k-color-shape-pale-warning-pressed: #edd5a5;
   --k-color-shape-soft-accent: #99bfff;
   --k-color-shape-soft-accent-hover: #88b0ff;
   --k-color-shape-soft-accent-pressed: #83a4e6;
@@ -143,9 +143,9 @@
   --k-color-shape-soft-success: #6cd984;
   --k-color-shape-soft-success-hover: #4ecf70;
   --k-color-shape-soft-success-pressed: #58be6f;
-  --k-color-shape-soft-warning: #fcd35d;
-  --k-color-shape-soft-warning-hover: #f4c359;
-  --k-color-shape-soft-warning-pressed: #e5b566;
+  --k-color-shape-soft-warning: #ffd06f;
+  --k-color-shape-soft-warning-hover: #f8c05c;
+  --k-color-shape-soft-warning-pressed: #e9b368;
   --k-color-shape-inverted-backless-hover: rgba(255, 255, 255, 0.06);
   --k-color-shape-inverted-backless-pressed: rgba(255, 255, 255, 0.04);
   --k-color-shape-inverted-disabled: rgba(255, 255, 255, 0.06);
@@ -216,9 +216,9 @@
   --k-color-line-success-bold: #008d3a;
   --k-color-line-success-bold-hover: #00b74e;
   --k-color-line-success-bold-pressed: #458552;
-  --k-color-line-warning-bold: #f8ae00;
-  --k-color-line-warning-bold-hover: #db9400;
-  --k-color-line-warning-bold-pressed: #bd8f4d;
+  --k-color-line-warning-bold: #fdaa00;
+  --k-color-line-warning-bold-hover: #e88b00;
+  --k-color-line-warning-bold-pressed: #cb874c;
   --k-color-line-inverted-accent-bold: #366af3;
   --k-color-line-inverted-accent-bold-hover: #4377ff;
   --k-color-line-inverted-accent-bold-pressed: #3662d4;
@@ -238,9 +238,9 @@
   --k-color-line-inverted-success-bold: #009b41;
   --k-color-line-inverted-success-bold-hover: #00b74e;
   --k-color-line-inverted-success-bold-pressed: #458552;
-  --k-color-line-inverted-warning-bold: #f8ae00;
-  --k-color-line-inverted-warning-bold-hover: #ffbf0b;
-  --k-color-line-inverted-warning-bold-pressed: #cc9a51;
+  --k-color-line-inverted-warning-bold: #fdaa00;
+  --k-color-line-inverted-warning-bold-hover: #ffbe3d;
+  --k-color-line-inverted-warning-bold-pressed: #d69551;
   --k-color-line-const-faint-black: rgba(0, 0, 0, 0.12);
   --k-color-line-const-faint-white: rgba(255, 255, 255, 0.12);
   --k-color-line-const-pale-black: rgba(0, 0, 0, 0.24);
@@ -269,51 +269,51 @@
   --k-color-customizable-bold-gray: #a4a4a4;
   --k-color-customizable-bold-green: #00b74e;
   --k-color-customizable-bold-mint: #05bfa3;
-  --k-color-customizable-bold-orange: #f56600;
+  --k-color-customizable-bold-orange: #f96100;
   --k-color-customizable-bold-purple: #cf60ec;
   --k-color-customizable-bold-red: #ff5352;
   --k-color-customizable-bold-violet: #a17bff;
-  --k-color-customizable-bold-yellow: #ecb400;
+  --k-color-customizable-bold-yellow: #f2b100;
   --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: #defbe2;
   --k-color-customizable-faint-mint: #d2fcf6;
-  --k-color-customizable-faint-orange: #ffeee1;
+  --k-color-customizable-faint-orange: #ffeee2;
   --k-color-customizable-faint-purple: #ffeaff;
   --k-color-customizable-faint-red: #ffedef;
   --k-color-customizable-faint-violet: #f1f0ff;
-  --k-color-customizable-faint-yellow: #faf5be;
+  --k-color-customizable-faint-yellow: #fcf4be;
   --k-color-customizable-heavy-black: #3d3d3d;
   --k-color-customizable-heavy-blue: #005dae;
   --k-color-customizable-heavy-blue-deep: #234ece;
   --k-color-customizable-heavy-gray: #747474;
   --k-color-customizable-heavy-green: #00722d;
   --k-color-customizable-heavy-mint: #027b68;
-  --k-color-customizable-heavy-orange: #9a3d00;
+  --k-color-customizable-heavy-orange: #9c3a00;
   --k-color-customizable-heavy-purple: #8b22a4;
   --k-color-customizable-heavy-red: #c50220;
   --k-color-customizable-heavy-violet: #6936c2;
-  --k-color-customizable-heavy-yellow: #966c01;
+  --k-color-customizable-heavy-yellow: #9a6a00;
   --k-color-customizable-pale-black: #d7d7d7;
   --k-color-customizable-pale-blue: #c7ebff;
   --k-color-customizable-pale-blue-deep: #d2e7ff;
   --k-color-customizable-pale-gray: #e4e4e4;
   --k-color-customizable-pale-green: #c3f3ca;
   --k-color-customizable-pale-mint: #adf5e9;
-  --k-color-customizable-pale-orange: #ffddc6;
+  --k-color-customizable-pale-orange: #ffddc7;
   --k-color-customizable-pale-purple: #fbd6ff;
   --k-color-customizable-pale-red: #ffdadd;
   --k-color-customizable-pale-violet: #e4e0ff;
-  --k-color-customizable-pale-yellow: #f5e78f;
+  --k-color-customizable-pale-yellow: #f7e68e;
   --k-color-customizable-soft-black: #b1b1b1;
   --k-color-customizable-soft-blue: #80c5ff;
   --k-color-customizable-soft-blue-deep: #99bfff;
   --k-color-customizable-soft-gray: #d7d7d7;
   --k-color-customizable-soft-green: #6cd984;
   --k-color-customizable-soft-mint: #4fe6cc;
-  --k-color-customizable-soft-orange: #ffa56f;
+  --k-color-customizable-soft-orange: #ffa573;
   --k-color-customizable-soft-purple: #ea9aff;
   --k-color-customizable-soft-red: #ffa09b;
   --k-color-customizable-soft-violet: #c1b0ff;
@@ -340,9 +340,9 @@
   --k-color-text-inverted-success-heavy: #007f34;
   --k-color-text-inverted-success-heavy-hover: #009b41;
   --k-color-text-inverted-success-heavy-pressed: #3a6a43;
-  --k-color-text-inverted-warning-heavy: #bc7d00;
-  --k-color-text-inverted-warning-heavy-hover: #db9400;
-  --k-color-text-inverted-warning-heavy-pressed: #956c30;
+  --k-color-text-inverted-warning-heavy: #d26e00;
+  --k-color-text-inverted-warning-heavy-hover: #e88b00;
+  --k-color-text-inverted-warning-heavy-pressed: #9a6836;
   --k-color-text-logo: #4b80ff;
   --k-color-text-neutral-faint: rgba(255, 255, 255, 0.4);
   --k-color-text-neutral-heavy: rgba(255, 255, 255, 0.96);
@@ -351,9 +351,9 @@
   --k-color-text-success-heavy: #00c655;
   --k-color-text-success-heavy-hover: #4ede76;
   --k-color-text-success-heavy-pressed: #4fa161;
-  --k-color-text-warning-heavy: #f8ae00;
-  --k-color-text-warning-heavy-hover: #ffbf0b;
-  --k-color-text-warning-heavy-pressed: #cc9a51;
+  --k-color-text-warning-heavy: #fdaa00;
+  --k-color-text-warning-heavy-hover: #ffbe3d;
+  --k-color-text-warning-heavy-pressed: #d69551;
   --k-color-text-const-faint-black: rgba(0, 0, 0, 0.32);
   --k-color-text-const-faint-white: rgba(255, 255, 255, 0.4);
   --k-color-text-const-heavy-black: rgba(0, 0, 0, 0.88);
@@ -385,9 +385,9 @@
   --k-color-shape-bold-success: #1d9946;
   --k-color-shape-bold-success-hover: #2ca651;
   --k-color-shape-bold-success-pressed: #3f784b;
-  --k-color-shape-bold-warning: #f1b03b;
-  --k-color-shape-bold-warning-hover: #f4c359;
-  --k-color-shape-bold-warning-pressed: #cc9a51;
+  --k-color-shape-bold-warning: #f6ad3c;
+  --k-color-shape-bold-warning-hover: #f8c05c;
+  --k-color-shape-bold-warning-pressed: #d69551;
   --k-color-shape-faint-accent: #1e305c;
   --k-color-shape-faint-accent-hover: #243a6e;
   --k-color-shape-faint-accent-pressed: #18274b;
@@ -403,13 +403,13 @@
   --k-color-shape-faint-success: #213a25;
   --k-color-shape-faint-success-hover: #27452d;
   --k-color-shape-faint-success-pressed: #1a2e1e;
-  --k-color-shape-faint-warning: #402f18;
-  --k-color-shape-faint-warning-hover: #4d391c;
-  --k-color-shape-faint-warning-pressed: #342614;
+  --k-color-shape-faint-warning: #422e19;
+  --k-color-shape-faint-warning-hover: #4f381d;
+  --k-color-shape-faint-warning-pressed: #352515;
   --k-color-shape-heavy-error: #ffdadd;
   --k-color-shape-heavy-neutral: #f2f2f2;
   --k-color-shape-heavy-success: #c3f3ca;
-  --k-color-shape-heavy-warning: #fbe48d;
+  --k-color-shape-heavy-warning: #ffe29a;
   --k-color-shape-other-accent-bold-disabled: rgba(255, 255, 255, 0.32);
   --k-color-shape-other-backless-hover: rgba(255, 255, 255, 0.06);
   --k-color-shape-other-backless-pressed: rgba(255, 255, 255, 0.04);
@@ -447,9 +447,9 @@
   --k-color-shape-pale-success: #27452d;
   --k-color-shape-pale-success-hover: #2d5134;
   --k-color-shape-pale-success-pressed: #213a25;
-  --k-color-shape-pale-warning: #4d391c;
-  --k-color-shape-pale-warning-hover: #5b4320;
-  --k-color-shape-pale-warning-pressed: #402f18;
+  --k-color-shape-pale-warning: #4f381d;
+  --k-color-shape-pale-warning-hover: #5d4122;
+  --k-color-shape-pale-warning-pressed: #422e19;
   --k-color-shape-soft-accent: #3959a5;
   --k-color-shape-soft-accent-hover: #4164b8;
   --k-color-shape-soft-accent-pressed: #324e92;
@@ -465,9 +465,9 @@
   --k-color-shape-soft-success: #3a6a43;
   --k-color-shape-soft-success-hover: #3f784b;
   --k-color-shape-soft-success-pressed: #345e3c;
-  --k-color-shape-soft-warning: #86612c;
-  --k-color-shape-soft-warning-hover: #956c30;
-  --k-color-shape-soft-warning-pressed: #775728;
+  --k-color-shape-soft-warning: #8a5f30;
+  --k-color-shape-soft-warning-hover: #9a6836;
+  --k-color-shape-soft-warning-pressed: #7a552b;
   --k-color-shape-inverted-backless-hover: rgba(0, 0, 0, 0.06);
   --k-color-shape-inverted-backless-pressed: rgba(0, 0, 0, 0.16);
   --k-color-shape-inverted-disabled: rgba(0, 0, 0, 0.06);
@@ -538,9 +538,9 @@
   --k-color-line-success-bold: #009b41;
   --k-color-line-success-bold-hover: #00b74e;
   --k-color-line-success-bold-pressed: #458552;
-  --k-color-line-warning-bold: #f8ae00;
-  --k-color-line-warning-bold-hover: #ffbf0b;
-  --k-color-line-warning-bold-pressed: #cc9a51;
+  --k-color-line-warning-bold: #fdaa00;
+  --k-color-line-warning-bold-hover: #ffbe3d;
+  --k-color-line-warning-bold-pressed: #d69551;
   --k-color-line-inverted-accent-bold: #366af3;
   --k-color-line-inverted-accent-bold-hover: #2d5de5;
   --k-color-line-inverted-accent-bold-pressed: #2c55c6;
@@ -560,9 +560,9 @@
   --k-color-line-inverted-success-bold: #008d3a;
   --k-color-line-inverted-success-bold-hover: #00b74e;
   --k-color-line-inverted-success-bold-pressed: #458552;
-  --k-color-line-inverted-warning-bold: #f8ae00;
-  --k-color-line-inverted-warning-bold-hover: #db9400;
-  --k-color-line-inverted-warning-bold-pressed: #bd8f4d;
+  --k-color-line-inverted-warning-bold: #fdaa00;
+  --k-color-line-inverted-warning-bold-hover: #e88b00;
+  --k-color-line-inverted-warning-bold-pressed: #cb874c;
   --k-color-line-const-faint-black: rgba(0, 0, 0, 0.12);
   --k-color-line-const-faint-white: rgba(255, 255, 255, 0.12);
   --k-color-line-const-pale-black: rgba(0, 0, 0, 0.24);
@@ -591,53 +591,53 @@
   --k-color-customizable-bold-gray: #696969;
   --k-color-customizable-bold-green: #2ca651;
   --k-color-customizable-bold-mint: #01b197;
-  --k-color-customizable-bold-orange: #ed6d28;
+  --k-color-customizable-bold-orange: #f06a28;
   --k-color-customizable-bold-purple: #be5ad8;
   --k-color-customizable-bold-red: #ee4948;
   --k-color-customizable-bold-violet: #956ef2;
-  --k-color-customizable-bold-yellow: #dfa700;
+  --k-color-customizable-bold-yellow: #e5a403;
   --k-color-customizable-faint-black: #484848;
   --k-color-customizable-faint-blue: #1f344d;
   --k-color-customizable-faint-blue-deep: #1e305c;
   --k-color-customizable-faint-gray: #333;
   --k-color-customizable-faint-green: #213a25;
   --k-color-customizable-faint-mint: #163a32;
-  --k-color-customizable-faint-orange: #472b1e;
+  --k-color-customizable-faint-orange: #482a1e;
   --k-color-customizable-faint-purple: #44244c;
   --k-color-customizable-faint-red: #502421;
   --k-color-customizable-faint-violet: #362958;
-  --k-color-customizable-faint-yellow: #3e3117;
+  --k-color-customizable-faint-yellow: #3f3018;
   --k-color-customizable-heavy-black: #f2f2f2;
   --k-color-customizable-heavy-blue: #80c5ff;
   --k-color-customizable-heavy-blue-deep: #88b0ff;
   --k-color-customizable-heavy-gray: #808080;
   --k-color-customizable-heavy-green: #6fe98b;
   --k-color-customizable-heavy-mint: #4af6dd;
-  --k-color-customizable-heavy-orange: #ff8f4f;
+  --k-color-customizable-heavy-orange: #ff8f54;
   --k-color-customizable-heavy-purple: #ea9aff;
   --k-color-customizable-heavy-red: #ff8a84;
   --k-color-customizable-heavy-violet: #b69fff;
-  --k-color-customizable-heavy-yellow: #f6c405;
+  --k-color-customizable-heavy-yellow: #f9c206;
   --k-color-customizable-pale-black: #525252;
   --k-color-customizable-pale-blue: #253f5c;
   --k-color-customizable-pale-blue-deep: #243a6e;
   --k-color-customizable-pale-gray: #3d3d3d;
   --k-color-customizable-pale-green: #27452d;
   --k-color-customizable-pale-mint: #19463d;
-  --k-color-customizable-pale-orange: #563324;
+  --k-color-customizable-pale-orange: #573324;
   --k-color-customizable-pale-purple: #522a5c;
   --k-color-customizable-pale-red: #602a27;
   --k-color-customizable-pale-violet: #413169;
-  --k-color-customizable-pale-yellow: #4b3a1b;
+  --k-color-customizable-pale-yellow: #4c3a1b;
   --k-color-customizable-soft-black: #747474;
   --k-color-customizable-soft-blue: #37608e;
   --k-color-customizable-soft-blue-deep: #3959a5;
   --k-color-customizable-soft-gray: #525252;
   --k-color-customizable-soft-green: #3a6a43;
   --k-color-customizable-soft-mint: #216c5d;
-  --k-color-customizable-soft-orange: #844d34;
+  --k-color-customizable-soft-orange: #864c34;
   --k-color-customizable-soft-purple: #7c428b;
   --k-color-customizable-soft-red: #943e3b;
   --k-color-customizable-soft-violet: #634c9e;
-  --k-color-customizable-soft-yellow: #81642a;
+  --k-color-customizable-soft-yellow: #83622b;
 }