@skbkontur/colors 2.0.5 → 2.0.6-alpha.1

package/default-light.js

@@ -17,9 +17,9 @@ export var textInvertedNeutralSoft = 'var(--k-color-text-inverted-neutral-soft,
 export var textInvertedSuccessHeavy = 'var(--k-color-text-inverted-success-heavy, #00c655)';
 export var textInvertedSuccessHeavyHover = 'var(--k-color-text-inverted-success-heavy-hover, #4ede76)';
 export var textInvertedSuccessHeavyPressed = 'var(--k-color-text-inverted-success-heavy-pressed, #4fa161)';
-export var textInvertedWarningHeavy = 'var(--k-color-text-inverted-warning-heavy, #f8ae00)';
-export var textInvertedWarningHeavyHover = 'var(--k-color-text-inverted-warning-heavy-hover, #ffbf0b)';
-export var textInvertedWarningHeavyPressed = 'var(--k-color-text-inverted-warning-heavy-pressed, #cc9a51)';
+export var textInvertedWarningHeavy = 'var(--k-color-text-inverted-warning-heavy, #faac00)';
+export var textInvertedWarningHeavyHover = 'var(--k-color-text-inverted-warning-heavy-hover, #ffbe26)';
+export var textInvertedWarningHeavyPressed = 'var(--k-color-text-inverted-warning-heavy-pressed, #d29750)';
 export var textLogo = 'var(--k-color-text-logo, #FE4C4C)';
 export var textNeutralFaint = 'var(--k-color-text-neutral-faint, rgba(0, 0, 0, 0.32))';
 export var textNeutralHeavy = 'var(--k-color-text-neutral-heavy, rgba(0, 0, 0, 0.88))';
@@ -28,9 +28,9 @@ export var textNeutralSoft = 'var(--k-color-text-neutral-soft, rgba(0, 0, 0, 0.5
 export var textSuccessHeavy = 'var(--k-color-text-success-heavy, #007f34)';
 export var textSuccessHeavyHover = 'var(--k-color-text-success-heavy-hover, #009b41)';
 export var textSuccessHeavyPressed = 'var(--k-color-text-success-heavy-pressed, #3a6a43)';
-export var textWarningHeavy = 'var(--k-color-text-warning-heavy, #bc7d00)';
-export var textWarningHeavyHover = 'var(--k-color-text-warning-heavy-hover, #db9400)';
-export var textWarningHeavyPressed = 'var(--k-color-text-warning-heavy-pressed, #a37736)';
+export var textWarningHeavy = 'var(--k-color-text-warning-heavy, #cc7204)';
+export var textWarningHeavyHover = 'var(--k-color-text-warning-heavy-hover, #e28f05)';
+export var textWarningHeavyPressed = 'var(--k-color-text-warning-heavy-pressed, #a9733c)';
 export var textConstFaintBlack = 'var(--k-color-text-const-faint-black, rgba(0, 0, 0, 0.32))';
 export var textConstFaintWhite = 'var(--k-color-text-const-faint-white, rgba(255, 255, 255, 0.4))';
 export var textConstHeavyBlack = 'var(--k-color-text-const-heavy-black, rgba(0, 0, 0, 0.88))';
@@ -62,9 +62,9 @@ export var shapeBoldNeutralPressed = 'var(--k-color-shape-bold-neutral-pressed,
 export var shapeBoldSuccess = 'var(--k-color-shape-bold-success, #00a948)';
 export var shapeBoldSuccessHover = 'var(--k-color-shape-bold-success-hover, #009b41)';
 export var shapeBoldSuccessPressed = 'var(--k-color-shape-bold-success-pressed, #178b3f)';
-export var shapeBoldWarning = 'var(--k-color-shape-bold-warning, #ffbf0b)';
-export var shapeBoldWarningHover = 'var(--k-color-shape-bold-warning-hover, #f8ae00)';
-export var shapeBoldWarningPressed = 'var(--k-color-shape-bold-warning-pressed, #e5a331)';
+export var shapeBoldWarning = 'var(--k-color-shape-bold-warning, #ffbe26)';
+export var shapeBoldWarningHover = 'var(--k-color-shape-bold-warning-hover, #faac00)';
+export var shapeBoldWarningPressed = 'var(--k-color-shape-bold-warning-pressed, #e7a132)';
 export var shapeFaintAccent = 'var(--k-color-shape-faint-accent, rgba(0, 0, 0, 0.12))';
 export var shapeFaintAccentHover = 'var(--k-color-shape-faint-accent-hover, rgba(0, 0, 0, 0.16))';
 export var shapeFaintAccentPressed = 'var(--k-color-shape-faint-accent-pressed, rgba(0, 0, 0, 0.24))';
@@ -80,13 +80,13 @@ export var shapeFaintNeutralAlphaPressed = 'var(--k-color-shape-faint-neutral-al
 export var shapeFaintSuccess = 'var(--k-color-shape-faint-success, #defbe2)';
 export var shapeFaintSuccessHover = 'var(--k-color-shape-faint-success-hover, #c3f3ca)';
 export var shapeFaintSuccessPressed = 'var(--k-color-shape-faint-success-pressed, #d1edd5)';
-export var shapeFaintWarning = 'var(--k-color-shape-faint-warning, #fff3bd)';
-export var shapeFaintWarningHover = 'var(--k-color-shape-faint-warning-hover, #f4e5ad)';
-export var shapeFaintWarningPressed = 'var(--k-color-shape-faint-warning-pressed, #ede5c4)';
+export var shapeFaintWarning = 'var(--k-color-shape-faint-warning, #fff2c1)';
+export var shapeFaintWarningHover = 'var(--k-color-shape-faint-warning-hover, #f5e4ac)';
+export var shapeFaintWarningPressed = 'var(--k-color-shape-faint-warning-pressed, #eee5c4)';
 export var shapeHeavyError = 'var(--k-color-shape-heavy-error, #6b1f1e)';
 export var shapeHeavyNeutral = 'var(--k-color-shape-heavy-neutral, #292929)';
 export var shapeHeavySuccess = 'var(--k-color-shape-heavy-success, #0b4a1f)';
-export var shapeHeavyWarning = 'var(--k-color-shape-heavy-warning, #543600)';
+export var shapeHeavyWarning = 'var(--k-color-shape-heavy-warning, #563500)';
 export var shapeOtherAccentBoldDisabled = 'var(--k-color-shape-other-accent-bold-disabled, rgba(0, 0, 0, 0.32))';
 export var shapeOtherBacklessHover = 'var(--k-color-shape-other-backless-hover, rgba(0, 0, 0, 0.06))';
 export var shapeOtherBacklessPressed = 'var(--k-color-shape-other-backless-pressed, rgba(0, 0, 0, 0.16))';
@@ -124,9 +124,9 @@ export var shapePaleNeutralAlphaPressed = 'var(--k-color-shape-pale-neutral-alph
 export var shapePaleSuccess = 'var(--k-color-shape-pale-success, #c3f3ca)';
 export var shapePaleSuccessHover = 'var(--k-color-shape-pale-success-hover, #a7ebb2)';
 export var shapePaleSuccessPressed = 'var(--k-color-shape-pale-success-pressed, #bae4c0)';
-export var shapePaleWarning = 'var(--k-color-shape-pale-warning, #fbe48d)';
-export var shapePaleWarningHover = 'var(--k-color-shape-pale-warning-hover, #f2d585)';
-export var shapePaleWarningPressed = 'var(--k-color-shape-pale-warning-pressed, #e9d6a5)';
+export var shapePaleWarning = 'var(--k-color-shape-pale-warning, #fee38d)';
+export var shapePaleWarningHover = 'var(--k-color-shape-pale-warning-hover, #f4d485)';
+export var shapePaleWarningPressed = 'var(--k-color-shape-pale-warning-pressed, #ead6a5)';
 export var shapeSoftAccent = 'var(--k-color-shape-soft-accent, rgba(0, 0, 0, 0.32))';
 export var shapeSoftAccentHover = 'var(--k-color-shape-soft-accent-hover, rgba(0, 0, 0, 0.4))';
 export var shapeSoftAccentPressed = 'var(--k-color-shape-soft-accent-pressed, rgba(0, 0, 0, 0.48))';
@@ -142,9 +142,9 @@ export var shapeSoftNeutralAlphaPressed = 'var(--k-color-shape-soft-neutral-alph
 export var shapeSoftSuccess = 'var(--k-color-shape-soft-success, #6cd984)';
 export var shapeSoftSuccessHover = 'var(--k-color-shape-soft-success-hover, #4ecf70)';
 export var shapeSoftSuccessPressed = 'var(--k-color-shape-soft-success-pressed, #58be6f)';
-export var shapeSoftWarning = 'var(--k-color-shape-soft-warning, #fcd35d)';
-export var shapeSoftWarningHover = 'var(--k-color-shape-soft-warning-hover, #f4c359)';
-export var shapeSoftWarningPressed = 'var(--k-color-shape-soft-warning-pressed, #e5b566)';
+export var shapeSoftWarning = 'var(--k-color-shape-soft-warning, #fed25d)';
+export var shapeSoftWarningHover = 'var(--k-color-shape-soft-warning-hover, #f6c15a)';
+export var shapeSoftWarningPressed = 'var(--k-color-shape-soft-warning-pressed, #e7b467)';
 export var shapeInvertedBacklessHover = 'var(--k-color-shape-inverted-backless-hover, rgba(255, 255, 255, 0.06))';
 export var shapeInvertedBacklessPressed = 'var(--k-color-shape-inverted-backless-pressed, rgba(255, 255, 255, 0.04))';
 export var shapeInvertedDisabled = 'var(--k-color-shape-inverted-disabled, rgba(255, 255, 255, 0.06))';
@@ -215,9 +215,9 @@ export var lineOnBrandOriginalPale = 'var(--k-color-line-on-brand-original-pale,
 export var lineSuccessBold = 'var(--k-color-line-success-bold, #008d3a)';
 export var lineSuccessBoldHover = 'var(--k-color-line-success-bold-hover, #00b74e)';
 export var lineSuccessBoldPressed = 'var(--k-color-line-success-bold-pressed, #458552)';
-export var lineWarningBold = 'var(--k-color-line-warning-bold, #f8ae00)';
-export var lineWarningBoldHover = 'var(--k-color-line-warning-bold-hover, #db9400)';
-export var lineWarningBoldPressed = 'var(--k-color-line-warning-bold-pressed, #bd8f4d)';
+export var lineWarningBold = 'var(--k-color-line-warning-bold, #faac00)';
+export var lineWarningBoldHover = 'var(--k-color-line-warning-bold-hover, #e28f05)';
+export var lineWarningBoldPressed = 'var(--k-color-line-warning-bold-pressed, #c6894d)';
 export var lineInvertedAccentBold = 'var(--k-color-line-inverted-accent-bold, #d7d7d7)';
 export var lineInvertedAccentBoldHover = 'var(--k-color-line-inverted-accent-bold-hover, #ffffff)';
 export var lineInvertedAccentBoldPressed = 'var(--k-color-line-inverted-accent-bold-pressed, rgba(255, 255, 255, 0.64))';
@@ -237,9 +237,9 @@ export var lineInvertedNeutralPalePressed = 'var(--k-color-line-inverted-neutral
 export var lineInvertedSuccessBold = 'var(--k-color-line-inverted-success-bold, #009b41)';
 export var lineInvertedSuccessBoldHover = 'var(--k-color-line-inverted-success-bold-hover, #00b74e)';
 export var lineInvertedSuccessBoldPressed = 'var(--k-color-line-inverted-success-bold-pressed, #458552)';
-export var lineInvertedWarningBold = 'var(--k-color-line-inverted-warning-bold, #f8ae00)';
-export var lineInvertedWarningBoldHover = 'var(--k-color-line-inverted-warning-bold-hover, #ffbf0b)';
-export var lineInvertedWarningBoldPressed = 'var(--k-color-line-inverted-warning-bold-pressed, #cc9a51)';
+export var lineInvertedWarningBold = 'var(--k-color-line-inverted-warning-bold, #faac00)';
+export var lineInvertedWarningBoldHover = 'var(--k-color-line-inverted-warning-bold-hover, #ffbe26)';
+export var lineInvertedWarningBoldPressed = 'var(--k-color-line-inverted-warning-bold-pressed, #d29750)';
 export var lineConstFaintBlack = 'var(--k-color-line-const-faint-black, rgba(0, 0, 0, 0.12))';
 export var lineConstFaintWhite = 'var(--k-color-line-const-faint-white, rgba(255, 255, 255, 0.12))';
 export var lineConstPaleBlack = 'var(--k-color-line-const-pale-black, rgba(0, 0, 0, 0.24))';
@@ -268,52 +268,52 @@ export var customizableBoldBlueDeep = 'var(--k-color-customizable-bold-blue-deep
 export var customizableBoldGray = 'var(--k-color-customizable-bold-gray, #a4a4a4)';
 export var customizableBoldGreen = 'var(--k-color-customizable-bold-green, #00b74e)';
 export var customizableBoldMint = 'var(--k-color-customizable-bold-mint, #05bfa3)';
-export var customizableBoldOrange = 'var(--k-color-customizable-bold-orange, #f56600)';
+export var customizableBoldOrange = 'var(--k-color-customizable-bold-orange, #f96100)';
 export var customizableBoldPurple = 'var(--k-color-customizable-bold-purple, #cf60ec)';
 export var customizableBoldRed = 'var(--k-color-customizable-bold-red, #ff5352)';
 export var customizableBoldViolet = 'var(--k-color-customizable-bold-violet, #a17bff)';
-export var customizableBoldYellow = 'var(--k-color-customizable-bold-yellow, #ecb400)';
+export var customizableBoldYellow = 'var(--k-color-customizable-bold-yellow, #faac00)';
 export var customizableFaintBlack = 'var(--k-color-customizable-faint-black, #e4e4e4)';
 export var customizableFaintBlue = 'var(--k-color-customizable-faint-blue, #e2f5ff)';
 export var customizableFaintBlueDeep = 'var(--k-color-customizable-faint-blue-deep, #e8f3ff)';
 export var customizableFaintGray = 'var(--k-color-customizable-faint-gray, #f2f2f2)';
 export var customizableFaintGreen = 'var(--k-color-customizable-faint-green, #defbe2)';
 export var customizableFaintMint = 'var(--k-color-customizable-faint-mint, #d2fcf6)';
-export var customizableFaintOrange = 'var(--k-color-customizable-faint-orange, #ffeee1)';
+export var customizableFaintOrange = 'var(--k-color-customizable-faint-orange, #ffeee2)';
 export var customizableFaintPurple = 'var(--k-color-customizable-faint-purple, #ffeaff)';
 export var customizableFaintRed = 'var(--k-color-customizable-faint-red, #ffedef)';
 export var customizableFaintViolet = 'var(--k-color-customizable-faint-violet, #f1f0ff)';
-export var customizableFaintYellow = 'var(--k-color-customizable-faint-yellow, #faf5be)';
+export var customizableFaintYellow = 'var(--k-color-customizable-faint-yellow, #fff2c1)';
 export var customizableHeavyBlack = 'var(--k-color-customizable-heavy-black, #3d3d3d)';
 export var customizableHeavyBlue = 'var(--k-color-customizable-heavy-blue, #005dae)';
 export var customizableHeavyBlueDeep = 'var(--k-color-customizable-heavy-blue-deep, #234ece)';
 export var customizableHeavyGray = 'var(--k-color-customizable-heavy-gray, #747474)';
 export var customizableHeavyGreen = 'var(--k-color-customizable-heavy-green, #00722d)';
 export var customizableHeavyMint = 'var(--k-color-customizable-heavy-mint, #027b68)';
-export var customizableHeavyOrange = 'var(--k-color-customizable-heavy-orange, #9a3d00)';
+export var customizableHeavyOrange = 'var(--k-color-customizable-heavy-orange, #9c3a00)';
 export var customizableHeavyPurple = 'var(--k-color-customizable-heavy-purple, #8b22a4)';
 export var customizableHeavyRed = 'var(--k-color-customizable-heavy-red, #c50220)';
 export var customizableHeavyViolet = 'var(--k-color-customizable-heavy-violet, #6936c2)';
-export var customizableHeavyYellow = 'var(--k-color-customizable-heavy-yellow, #966c01)';
+export var customizableHeavyYellow = 'var(--k-color-customizable-heavy-yellow, #9f6700)';
 export var customizablePaleBlack = 'var(--k-color-customizable-pale-black, #d7d7d7)';
 export var customizablePaleBlue = 'var(--k-color-customizable-pale-blue, #c7ebff)';
 export var customizablePaleBlueDeep = 'var(--k-color-customizable-pale-blue-deep, #d2e7ff)';
 export var customizablePaleGray = 'var(--k-color-customizable-pale-gray, #e4e4e4)';
 export var customizablePaleGreen = 'var(--k-color-customizable-pale-green, #c3f3ca)';
 export var customizablePaleMint = 'var(--k-color-customizable-pale-mint, #adf5e9)';
-export var customizablePaleOrange = 'var(--k-color-customizable-pale-orange, #ffddc6)';
+export var customizablePaleOrange = 'var(--k-color-customizable-pale-orange, #ffddc7)';
 export var customizablePalePurple = 'var(--k-color-customizable-pale-purple, #fbd6ff)';
 export var customizablePaleRed = 'var(--k-color-customizable-pale-red, #ffdadd)';
 export var customizablePaleViolet = 'var(--k-color-customizable-pale-violet, #e4e0ff)';
-export var customizablePaleYellow = 'var(--k-color-customizable-pale-yellow, #f5e78f)';
+export var customizablePaleYellow = 'var(--k-color-customizable-pale-yellow, #fee38d)';
 export var customizableSoftBlack = 'var(--k-color-customizable-soft-black, #b1b1b1)';
 export var customizableSoftBlue = 'var(--k-color-customizable-soft-blue, #80c5ff)';
 export var customizableSoftBlueDeep = 'var(--k-color-customizable-soft-blue-deep, #99bfff)';
 export var customizableSoftGray = 'var(--k-color-customizable-soft-gray, #d7d7d7)';
 export var customizableSoftGreen = 'var(--k-color-customizable-soft-green, #6cd984)';
 export var customizableSoftMint = 'var(--k-color-customizable-soft-mint, #4fe6cc)';
-export var customizableSoftOrange = 'var(--k-color-customizable-soft-orange, #ffa56f)';
+export var customizableSoftOrange = 'var(--k-color-customizable-soft-orange, #ffa573)';
 export var customizableSoftPurple = 'var(--k-color-customizable-soft-purple, #ea9aff)';
 export var customizableSoftRed = 'var(--k-color-customizable-soft-red, #ffa09b)';
 export var customizableSoftViolet = 'var(--k-color-customizable-soft-violet, #c1b0ff)';
-export var customizableSoftYellow = 'var(--k-color-customizable-soft-yellow, #f6d65e)';
+export var customizableSoftYellow = 'var(--k-color-customizable-soft-yellow, #fed25d)';

package/lib/consts/default-swatch.js

@@ -9,7 +9,7 @@ export var brand = {
     purple: '#B750D1',
 };
 export var system = {
-    warning: '#FDAA00',
+    warning: '#FAB800',
     error: '#E62B34',
     success: '#009A40',
 };
@@ -22,7 +22,7 @@ export var customizable = {
     blueDeep: '#366AF3',
     violet: '#844BEC',
     purple: '#B750D1',
-    yellow: '#FAB700',
+    yellow: '#FAB800',
 };
 export var gray = {
     0: 'oklch(0% 0 0)',

package/lib/consts/default-swatch.ts

@@ -10,7 +10,7 @@ export const brand = {
 };
 
 export const system = {
-  warning: '#FDAA00',
+  warning: '#FAB800',
   error: '#E62B34',
   success: '#009A40',
 };
@@ -24,7 +24,7 @@ export const customizable = {
   blueDeep: '#366AF3',
   violet: '#844BEC',
   purple: '#B750D1',
-  yellow: '#FAB700',
+  yellow: '#FAB800',
 };
 
 export const gray = {

package/lib/get-colors-base.js

@@ -1,9 +1,10 @@
-import { calcOnBrand, getPalette } from './helpers/get-palette.js';
+import { getPalette } from './helpers/get-palette.js';
 import { getHover, getPressed } from './helpers/get-interactions.js';
 import { getLogo } from './helpers/get-logo.js';
 import { getPromo } from './helpers/get-promo.js';
 import { convertColorFormat } from './utils/convert-color.js';
 import * as DEFAULT_SWATCH from './consts/default-swatch.js';
+import { getOnBrand } from './helpers/get-on-brand.js';
 export function getColorsBase(_a) {
     var brand = _a.brand, accent = _a.accent, _b = _a.system, system = _b === void 0 ? DEFAULT_SWATCH.system : _b, _c = _a.format, format = _c === void 0 ? 'hex/rgba' : _c;
     var isPresetColor = brand in DEFAULT_SWATCH.brand;
@@ -64,14 +65,14 @@ export function getColorsBase(_a) {
                 palette: accentPalette,
             }
             : undefined,
-        warning: getPalette({ color: system.warning }),
+        warning: getPalette({ color: system.warning, type: 'warning' }),
         error: getPalette({ color: system.error }),
         success: getPalette({ color: system.success }),
         gray: DEFAULT_SWATCH.gray,
         whiteAlpha: DEFAULT_SWATCH.whiteAlpha,
         blackAlpha: DEFAULT_SWATCH.blackAlpha,
-        onBrand: calcOnBrand(brandColor),
-        onAccent: accentColor ? calcOnBrand(accentColor) : undefined,
+        onBrand: getOnBrand(brandColor),
+        onAccent: accentColor ? getOnBrand(accentColor) : undefined,
         customizable: customizablePalettes,
     };
     return convertColorFormat(result, format);

package/lib/get-colors-base.ts

@@ -1,4 +1,4 @@
-import { calcOnBrand, getPalette } from './helpers/get-palette.js';
+import { getPalette } from './helpers/get-palette.js';
 import { getHover, getPressed } from './helpers/get-interactions.js';
 import { getLogo } from './helpers/get-logo.js';
 import { getPromo } from './helpers/get-promo.js';
@@ -6,6 +6,7 @@ import { type ColorFormat, convertColorFormat } from './utils/convert-color.js';
 import { type ColorStructure } from './types/tokens.js';
 import * as DEFAULT_SWATCH from './consts/default-swatch.js';
 import type { TokensBase, ColorPalette } from './types/tokens-base.js';
+import { getOnBrand } from './helpers/get-on-brand.js';
 
 export type PresetOrCustom<T extends string> = T | (string & Record<never, never>);
 
@@ -84,14 +85,14 @@ export function getColorsBase({
           palette: accentPalette,
         }
       : undefined,
-    warning: getPalette({ color: system.warning }) as ColorPalette,
+    warning: getPalette({ color: system.warning, type: 'warning' }) as ColorPalette,
     error: getPalette({ color: system.error }) as ColorPalette,
     success: getPalette({ color: system.success }) as ColorPalette,
     gray: DEFAULT_SWATCH.gray,
     whiteAlpha: DEFAULT_SWATCH.whiteAlpha,
     blackAlpha: DEFAULT_SWATCH.blackAlpha,
-    onBrand: calcOnBrand(brandColor),
-    onAccent: accentColor ? calcOnBrand(accentColor) : undefined,
+    onBrand: getOnBrand(brandColor),
+    onAccent: accentColor ? getOnBrand(accentColor) : undefined,
     customizable: customizablePalettes,
   } as unknown as ColorStructure;
 

package/lib/helpers/get-on-brand.d.ts

@@ -0,0 +1,28 @@
+export declare function getOnBrand(hex: string): {
+    4: string;
+    6: string;
+    8: string;
+    12: string;
+    16: string;
+    20: string;
+    24: string;
+    28: string;
+    32: string;
+    36: string;
+    40: string;
+    44: string;
+    48: string;
+    52: string;
+    56: string;
+    60: string;
+    64: string;
+    68: string;
+    72: string;
+    76: string;
+    80: string;
+    84: string;
+    88: string;
+    92: string;
+    96: string;
+    100: string;
+};

package/lib/helpers/get-on-brand.js

@@ -0,0 +1,10 @@
+import { calcAPCA } from 'apca-w3';
+import * as DefaultSwatch from '../../lib/consts/default-swatch.js';
+export function getOnBrand(hex) {
+    var whiteContrast = Math.abs(Number(calcAPCA('#fff', hex)));
+    var blackContrast = Math.abs(Number(calcAPCA('#000', hex)));
+    if (whiteContrast + 10 >= blackContrast) {
+        return DefaultSwatch.whiteAlpha;
+    }
+    return DefaultSwatch.blackAlpha;
+}

package/lib/helpers/get-on-brand.ts

@@ -0,0 +1,13 @@
+import { calcAPCA } from 'apca-w3';
+
+import * as DefaultSwatch from '../../lib/consts/default-swatch.js';
+
+export function getOnBrand(hex: string) {
+  const whiteContrast = Math.abs(Number(calcAPCA('#fff', hex)));
+  const blackContrast = Math.abs(Number(calcAPCA('#000', hex)));
+
+  if (whiteContrast + 10 >= blackContrast) {
+    return DefaultSwatch.whiteAlpha;
+  }
+  return DefaultSwatch.blackAlpha;
+}

package/lib/helpers/get-palette.d.ts

@@ -12,40 +12,7 @@ interface GeneratePaletteParams {
     };
 }
 export declare function getPalette({ color, type, settings: customSettings, }: GeneratePaletteParams): GeneratorColorPalette;
-export declare function getAbneyHueShift(lightness: number, currentHue: number, abneyData: GeneratorColorAbneyCorrection): number;
-export declare function applyAbneyShift(lightness: number, currentHue: number, abneyData: GeneratorColorAbneyCorrection): number;
-export declare function applyWarningHuePatch(currentHue: number, lightness: number, warningHuePatchData: GeneratorColorWarningHuePatch, isWarningMode: boolean): number;
-export declare function calculateBaseHueAndCorrectionRange(inputColorString: string, abneyData: GeneratorColorAbneyCorrection): {
-    baseHue: number;
-    correctionLightness: number;
-    correctionHueRange: number;
-} | null;
-export declare function calcOnBrand(hex: string): {
-    4: string;
-    6: string;
-    8: string;
-    12: string;
-    16: string;
-    20: string;
-    24: string;
-    28: string;
-    32: string;
-    36: string;
-    40: string;
-    44: string;
-    48: string;
-    52: string;
-    56: string;
-    60: string;
-    64: string;
-    68: string;
-    72: string;
-    76: string;
-    80: string;
-    84: string;
-    88: string;
-    92: string;
-    96: string;
-    100: string;
-};
+export declare function calcWarningHuePatch(currentHue: number, lightness: number, warningHuePatchData: GeneratorColorWarningHuePatch): number;
+export declare function calcBaseHue(inputColorString: string, abneyData: GeneratorColorAbneyCorrection): number;
+export declare function calcCorrectionRange(inputColorString: string, abneyData: GeneratorColorAbneyCorrection): number;
 export {};

package/lib/helpers/get-palette.js

@@ -19,14 +19,14 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { clampChroma, converter } from 'culori';
-import { calcAPCA } from 'apca-w3';
-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';
+var toOklch = converter('oklch');
 export function getPalette(_a) {
-    var color = _a.color, _b = _a.type, type = _b === void 0 ? 'default' : _b, customSettings = _a.settings;
+    var _b;
+    var color = _a.color, _c = _a.type, type = _c === void 0 ? 'default' : _c, customSettings = _a.settings;
     var defaultSettings = {
         chromaSettings: CHROMA_PARAMS,
         abneyCorrection: ABNEY_CORRECTION,
@@ -34,9 +34,6 @@ export function getPalette(_a) {
         warningHuePatch: WARNING_HUE_PATCH,
     };
     var settings = __assign(__assign({}, defaultSettings), customSettings);
-    var toOklch = converter('oklch');
-    var oklchColor = toOklch(color);
-    var currentHue = (oklchColor === null || oklchColor === void 0 ? void 0 : oklchColor.h) || 0;
     var toNorm = function (x) { return x / 100; };
     var calculateChromaValue = function (rel, min, max, baseChromaMax) {
         var raw = (baseChromaMax * rel) / 100;
@@ -55,6 +52,8 @@ export function getPalette(_a) {
         dim: {},
     };
     var isWarning = type === 'warning';
+    var baseHue = calcBaseHue(color, settings.abneyCorrection);
+    var correctionHueRange = calcCorrectionRange(color, settings.abneyCorrection);
     for (var Lstr in settings.chromaSettings) {
         var L = +Lstr;
         if (L === 100) {
@@ -63,52 +62,30 @@ export function getPalette(_a) {
             result.dim[L] = "oklch(100% 0 0)";
             continue;
         }
-        var hueAfterWarningPatch = applyWarningHuePatch(currentHue, L, settings.warningHuePatch, isWarning);
-        var appliedHueShift = applyAbneyShift(L, hueAfterWarningPatch, settings.abneyCorrection);
-        var chromaMax = clampChroma({ mode: 'oklch', l: L / 100, c: 1, h: appliedHueShift }, 'oklch').c;
+        var hue = baseHue;
+        var lightnessCorrectionData = settings.abneyCorrection[L];
+        if (lightnessCorrectionData && correctionHueRange !== undefined) {
+            var shift = (_b = lightnessCorrectionData[correctionHueRange]) !== null && _b !== void 0 ? _b : 0;
+            hue = (baseHue + shift + 360) % 360;
+        }
+        if (isWarning) {
+            hue = calcWarningHuePatch(hue, L, settings.warningHuePatch);
+        }
+        var chromaMax = clampChroma({ mode: 'oklch', l: L / 100, c: 1, h: hue }, 'oklch').c;
         var currentParams = settings.chromaSettings[L];
         var vividN = calculateChromaValue(currentParams.vivid.rel, currentParams.vivid.min, currentParams.vivid.max, chromaMax);
         var normN = calculateChromaValue(currentParams.normal.rel, currentParams.normal.min, currentParams.normal.max, chromaMax);
         var dimN = calculateChromaValue(currentParams.dim.rel, currentParams.dim.min, currentParams.dim.max, chromaMax);
-        result.vivid[L] = "oklch(".concat(L, "% ").concat(vividN.toFixed(3), " ").concat(appliedHueShift.toFixed(0), ")");
-        result.normal[L] = "oklch(".concat(L, "% ").concat(normN.toFixed(3), " ").concat(appliedHueShift.toFixed(0), ")");
-        result.dim[L] = "oklch(".concat(L, "% ").concat(dimN.toFixed(3), " ").concat(appliedHueShift.toFixed(0), ")");
+        result.vivid[L] = "oklch(".concat(L, "% ").concat(vividN.toFixed(3), " ").concat(hue.toFixed(0), ")");
+        result.normal[L] = "oklch(".concat(L, "% ").concat(normN.toFixed(3), " ").concat(hue.toFixed(0), ")");
+        result.dim[L] = "oklch(".concat(L, "% ").concat(dimN.toFixed(3), " ").concat(hue.toFixed(0), ")");
     }
     return result;
 }
-export function getAbneyHueShift(lightness, currentHue, abneyData) {
-    var lightnessData = abneyData[lightness];
-    if (!lightnessData) {
-        return 0;
-    }
-    var hueRanges = Object.keys(lightnessData)
-        .map(Number)
-        .sort(function (a, b) { return a - b; });
-    var selectedHueRange = hueRanges[0];
-    for (var i = 0; i < hueRanges.length; i++) {
-        var startRange = hueRanges[i];
-        var 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, currentHue, abneyData) {
-    var abneyShift = getAbneyHueShift(lightness, currentHue, abneyData);
-    return (currentHue + abneyShift + 360) % 360;
-}
-export function applyWarningHuePatch(currentHue, lightness, warningHuePatchData, isWarningMode) {
-    if (isWarningMode) {
-        var patch = warningHuePatchData[lightness];
-        if (patch !== undefined) {
-            return (currentHue + patch + 360) % 360;
-        }
+export function calcWarningHuePatch(currentHue, lightness, warningHuePatchData) {
+    var patch = warningHuePatchData[lightness];
+    if (patch !== undefined) {
+        return (currentHue + patch + 360) % 360;
     }
     return currentHue;
 }
@@ -129,30 +106,13 @@ function findClosestLightnessStep(targetL, availableLightnessSteps) {
     }
     return closestStep;
 }
-export function calculateBaseHueAndCorrectionRange(inputColorString, abneyData) {
-    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;
-    }
+export function calcBaseHue(inputColorString, abneyData) {
+    var colorOKLCH = toOklch(inputColorString);
+    var targetLightness = colorOKLCH.l * 100;
+    var targetHue = colorOKLCH.h;
     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);
@@ -162,43 +122,50 @@ export function calculateBaseHueAndCorrectionRange(inputColorString, abneyData)
             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;
-    });
+    correctedHueMap.sort(function (a, b) { return a.correctedHue - b.correctedHue; });
     if (correctedHueMap.length === 0) {
-        console.warn("No hue ranges defined for lightness ".concat(closestLightness, "."));
-        return null;
+        return targetHue;
     }
-    var findCorrectRange = function () {
-        var nextRangeIndex = correctedHueMap.findIndex(function (range) { return range.correctedHue > targetHue; });
-        if (nextRangeIndex === 0) {
-            return correctedHueMap[correctedHueMap.length - 1];
+    var selectedRange = correctedHueMap[correctedHueMap.length - 1];
+    for (var i = 0; i < correctedHueMap.length; i++) {
+        var current = correctedHueMap[i];
+        var 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];
-    };
-    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,
-    };
+    return (targetHue - selectedRange.shift + 360) % 360;
 }
-export function calcOnBrand(hex) {
-    var whiteContrast = Math.abs(Number(calcAPCA('#fff', hex)));
-    var blackContrast = Math.abs(Number(calcAPCA('#000', hex)));
-    if (whiteContrast + 10 >= blackContrast) {
-        return DefaultSwatch.whiteAlpha;
+export function calcCorrectionRange(inputColorString, abneyData) {
+    var colorOKLCH = toOklch(inputColorString);
+    var targetLightness = colorOKLCH.l * 100;
+    var targetHue = colorOKLCH.h;
+    var availableLightnessSteps = Object.keys(abneyData).map(Number);
+    var closestLightness = findClosestLightnessStep(targetLightness, availableLightnessSteps);
+    var lightnessCorrectionData = abneyData[closestLightness];
+    var correctedHueMap = 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.sort(function (a, b) { return a.correctedHue - b.correctedHue; });
+    var selectedRange = correctedHueMap[correctedHueMap.length - 1];
+    for (var i = 0; i < correctedHueMap.length; i++) {
+        var current = correctedHueMap[i];
+        var next = correctedHueMap[i + 1];
+        if (targetHue >= current.correctedHue && targetHue < next.correctedHue) {
+            selectedRange = current;
+            break;
+        }
     }
-    return DefaultSwatch.blackAlpha;
+    return selectedRange.rawHue;
 }