@skbkontur/colors 2.0.0-alpha.0 → 2.0.0-alpha.2

package/dist/colors.less

@@ -1,319 +1,319 @@
-@textAccentHeavy: var(--k-text-accent-heavy);
-@textAccentHeavyHover: var(--k-text-accent-heavy-hover);
-@textAccentHeavyPressed: var(--k-text-accent-heavy-pressed);
-@textDisabled: var(--k-text-disabled);
-@textErrorHeavy: var(--k-text-error-heavy);
-@textErrorHeavyHover: var(--k-text-error-heavy-hover);
-@textErrorHeavyPressed: var(--k-text-error-heavy-pressed);
-@textInvertedAccentHeavy: var(--k-text-inverted-accent-heavy);
-@textInvertedAccentHeavyHover: var(--k-text-inverted-accent-heavy-hover);
-@textInvertedAccentHeavyPressed: var(--k-text-inverted-accent-heavy-pressed);
-@textInvertedDisabled: var(--k-text-inverted-disabled);
-@textInvertedErrorHeavy: var(--k-text-inverted-error-heavy);
-@textInvertedErrorHeavyHover: var(--k-text-inverted-error-heavy-hover);
-@textInvertedErrorHeavyPressed: var(--k-text-inverted-error-heavy-pressed);
-@textInvertedNeutralHeavy: var(--k-text-inverted-neutral-heavy);
-@textInvertedNeutralPale: var(--k-text-inverted-neutral-pale);
-@textInvertedNeutralSoft: var(--k-text-inverted-neutral-soft);
-@textInvertedSuccessHeavy: var(--k-text-inverted-success-heavy);
-@textInvertedSuccessHeavyHover: var(--k-text-inverted-success-heavy-hover);
-@textInvertedSuccessHeavyPressed: var(--k-text-inverted-success-heavy-pressed);
-@textInvertedWarningHeavy: var(--k-text-inverted-warning-heavy);
-@textInvertedWarningHeavyHover: var(--k-text-inverted-warning-heavy-hover);
-@textInvertedWarningHeavyPressed: var(--k-text-inverted-warning-heavy-pressed);
-@textLogo: var(--k-text-logo);
-@textNeutralHeavy: var(--k-text-neutral-heavy);
-@textNeutralPale: var(--k-text-neutral-pale);
-@textNeutralSoft: var(--k-text-neutral-soft);
-@textSuccessHeavy: var(--k-text-success-heavy);
-@textSuccessHeavyHover: var(--k-text-success-heavy-hover);
-@textSuccessHeavyPressed: var(--k-text-success-heavy-pressed);
-@textWarningHeavy: var(--k-text-warning-heavy);
-@textWarningHeavyHover: var(--k-text-warning-heavy-hover);
-@textWarningHeavyPressed: var(--k-text-warning-heavy-pressed);
-@textConstDisabledBlack: var(--k-text-const-disabled-black);
-@textConstDisabledWhite: var(--k-text-const-disabled-white);
-@textConstHeavyBlack: var(--k-text-const-heavy-black);
-@textConstHeavyWhite: var(--k-text-const-heavy-white);
-@textConstPaleBlack: var(--k-text-const-pale-black);
-@textConstPaleWhite: var(--k-text-const-pale-white);
-@textConstSoftBlack: var(--k-text-const-soft-black);
-@textConstSoftWhite: var(--k-text-const-soft-white);
-@textOnAccentBoldDisabled: var(--k-text-on-accent-bold-disabled);
-@textOnAccentBoldHeavy: var(--k-text-on-accent-bold-heavy);
-@textOnAccentBoldPale: var(--k-text-on-accent-bold-pale);
-@textOnAccentBoldSoft: var(--k-text-on-accent-bold-soft);
-@textOnBrandOriginalDisabled: var(--k-text-on-brand-original-disabled);
-@textOnBrandOriginalHeavy: var(--k-text-on-brand-original-heavy);
-@textOnBrandOriginalPale: var(--k-text-on-brand-original-pale);
-@textOnBrandOriginalSoft: var(--k-text-on-brand-original-soft);
-@shapeBoldAccent: var(--k-shape-bold-accent);
-@shapeBoldAccentHover: var(--k-shape-bold-accent-hover);
-@shapeBoldAccentPressed: var(--k-shape-bold-accent-pressed);
-@shapeBoldBrandOriginal: var(--k-shape-bold-brand-original);
-@shapeBoldBrandOriginalHover: var(--k-shape-bold-brand-original-hover);
-@shapeBoldBrandOriginalPressed: var(--k-shape-bold-brand-original-pressed);
-@shapeBoldError: var(--k-shape-bold-error);
-@shapeBoldErrorHover: var(--k-shape-bold-error-hover);
-@shapeBoldErrorPressed: var(--k-shape-bold-error-pressed);
-@shapeBoldNeutral: var(--k-shape-bold-neutral);
-@shapeBoldNeutralHover: var(--k-shape-bold-neutral-hover);
-@shapeBoldNeutralPressed: var(--k-shape-bold-neutral-pressed);
-@shapeBoldSuccess: var(--k-shape-bold-success);
-@shapeBoldSuccessHover: var(--k-shape-bold-success-hover);
-@shapeBoldSuccessPressed: var(--k-shape-bold-success-pressed);
-@shapeBoldWarning: var(--k-shape-bold-warning);
-@shapeBoldWarningHover: var(--k-shape-bold-warning-hover);
-@shapeBoldWarningPressed: var(--k-shape-bold-warning-pressed);
-@shapeFaintAccent: var(--k-shape-faint-accent);
-@shapeFaintAccentHover: var(--k-shape-faint-accent-hover);
-@shapeFaintAccentPressed: var(--k-shape-faint-accent-pressed);
-@shapeFaintBrand: var(--k-shape-faint-brand);
-@shapeFaintBrandHover: var(--k-shape-faint-brand-hover);
-@shapeFaintBrandPressed: var(--k-shape-faint-brand-pressed);
-@shapeFaintError: var(--k-shape-faint-error);
-@shapeFaintErrorHover: var(--k-shape-faint-error-hover);
-@shapeFaintErrorPressed: var(--k-shape-faint-error-pressed);
-@shapeFaintNeutralAlpha: var(--k-shape-faint-neutral-alpha);
-@shapeFaintNeutralAlphaHover: var(--k-shape-faint-neutral-alpha-hover);
-@shapeFaintNeutralAlphaPressed: var(--k-shape-faint-neutral-alpha-pressed);
-@shapeFaintSuccess: var(--k-shape-faint-success);
-@shapeFaintSuccessHover: var(--k-shape-faint-success-hover);
-@shapeFaintSuccessPressed: var(--k-shape-faint-success-pressed);
-@shapeFaintWarning: var(--k-shape-faint-warning);
-@shapeFaintWarningHover: var(--k-shape-faint-warning-hover);
-@shapeFaintWarningPressed: var(--k-shape-faint-warning-pressed);
-@shapeHeavyError: var(--k-shape-heavy-error);
-@shapeHeavyNeutral: var(--k-shape-heavy-neutral);
-@shapeHeavySuccess: var(--k-shape-heavy-success);
-@shapeHeavyWarning: var(--k-shape-heavy-warning);
-@shapeOtherAccentBoldDisabled: var(--k-shape-other-accent-bold-disabled);
-@shapeOtherBacklessHover: var(--k-shape-other-backless-hover);
-@shapeOtherBacklessPressed: var(--k-shape-other-backless-pressed);
-@shapeOtherBase: var(--k-shape-other-base);
-@shapeOtherBaseHover: var(--k-shape-other-base-hover);
-@shapeOtherBasePressed: var(--k-shape-other-base-pressed);
-@shapeOtherDisabled: var(--k-shape-other-disabled);
-@shapeOtherField: var(--k-shape-other-field);
-@shapeOtherFieldHover: var(--k-shape-other-field-hover);
-@shapeOtherFieldPressed: var(--k-shape-other-field-pressed);
-@shapeOtherLow: var(--k-shape-other-low);
-@shapeOtherLowHover: var(--k-shape-other-low-hover);
-@shapeOtherLowPressed: var(--k-shape-other-low-pressed);
-@shapeOtherNeutralFaintSolid: var(--k-shape-other-neutral-faint-solid);
-@shapeOtherNeutralFaintSolidHover: var(--k-shape-other-neutral-faint-solid-hover);
-@shapeOtherNeutralFaintSolidPressed: var(--k-shape-other-neutral-faint-solid-pressed);
-@shapeOtherNeutralPaleSolid: var(--k-shape-other-neutral-pale-solid);
-@shapeOtherNeutralPaleSolidHover: var(--k-shape-other-neutral-pale-solid-hover);
-@shapeOtherNeutralPaleSolidPressed: var(--k-shape-other-neutral-pale-solid-pressed);
-@shapeOtherNeutralSoftSolid: var(--k-shape-other-neutral-soft-solid);
-@shapeOtherNeutralSoftSolidHover: var(--k-shape-other-neutral-soft-solid-hover);
-@shapeOtherNeutralSoftSolidPressed: var(--k-shape-other-neutral-soft-solid-pressed);
-@shapePaleAccent: var(--k-shape-pale-accent);
-@shapePaleAccentHover: var(--k-shape-pale-accent-hover);
-@shapePaleAccentPressed: var(--k-shape-pale-accent-pressed);
-@shapePaleBrand: var(--k-shape-pale-brand);
-@shapePaleBrandHover: var(--k-shape-pale-brand-hover);
-@shapePaleBrandPressed: var(--k-shape-pale-brand-pressed);
-@shapePaleError: var(--k-shape-pale-error);
-@shapePaleErrorHover: var(--k-shape-pale-error-hover);
-@shapePaleErrorPressed: var(--k-shape-pale-error-pressed);
-@shapePaleNeutralAlpha: var(--k-shape-pale-neutral-alpha);
-@shapePaleNeutralAlphaHover: var(--k-shape-pale-neutral-alpha-hover);
-@shapePaleNeutralAlphaPressed: var(--k-shape-pale-neutral-alpha-pressed);
-@shapePaleSuccess: var(--k-shape-pale-success);
-@shapePaleSuccessHover: var(--k-shape-pale-success-hover);
-@shapePaleSuccessPressed: var(--k-shape-pale-success-pressed);
-@shapePaleWarning: var(--k-shape-pale-warning);
-@shapePaleWarningHover: var(--k-shape-pale-warning-hover);
-@shapePaleWarningPressed: var(--k-shape-pale-warning-pressed);
-@shapeSoftAccent: var(--k-shape-soft-accent);
-@shapeSoftAccentHover: var(--k-shape-soft-accent-hover);
-@shapeSoftAccentPressed: var(--k-shape-soft-accent-pressed);
-@shapeSoftBrand: var(--k-shape-soft-brand);
-@shapeSoftBrandHover: var(--k-shape-soft-brand-hover);
-@shapeSoftBrandPressed: var(--k-shape-soft-brand-pressed);
-@shapeSoftError: var(--k-shape-soft-error);
-@shapeSoftErrorHover: var(--k-shape-soft-error-hover);
-@shapeSoftErrorPressed: var(--k-shape-soft-error-pressed);
-@shapeSoftNeutralAlpha: var(--k-shape-soft-neutral-alpha);
-@shapeSoftNeutralAlphaHover: var(--k-shape-soft-neutral-alpha-hover);
-@shapeSoftNeutralAlphaPressed: var(--k-shape-soft-neutral-alpha-pressed);
-@shapeSoftSuccess: var(--k-shape-soft-success);
-@shapeSoftSuccessHover: var(--k-shape-soft-success-hover);
-@shapeSoftSuccessPressed: var(--k-shape-soft-success-pressed);
-@shapeSoftWarning: var(--k-shape-soft-warning);
-@shapeSoftWarningHover: var(--k-shape-soft-warning-hover);
-@shapeSoftWarningPressed: var(--k-shape-soft-warning-pressed);
-@shapeInvertedBacklessHover: var(--k-shape-inverted-backless-hover);
-@shapeInvertedBacklessPressed: var(--k-shape-inverted-backless-pressed);
-@shapeInvertedDisabled: var(--k-shape-inverted-disabled);
-@shapeInvertedNeutralFaintAlpha: var(--k-shape-inverted-neutral-faint-alpha);
-@shapeInvertedNeutralFaintAlphaHover: var(--k-shape-inverted-neutral-faint-alpha-hover);
-@shapeInvertedNeutralFaintAlphaPressed: var(--k-shape-inverted-neutral-faint-alpha-pressed);
-@shapeInvertedNeutralHeavy: var(--k-shape-inverted-neutral-heavy);
-@shapeInvertedNeutralHeavyHover: var(--k-shape-inverted-neutral-heavy-hover);
-@shapeInvertedNeutralHeavyPressed: var(--k-shape-inverted-neutral-heavy-pressed);
-@shapeInvertedNeutralPaleAlpha: var(--k-shape-inverted-neutral-pale-alpha);
-@shapeInvertedNeutralPaleAlphaHover: var(--k-shape-inverted-neutral-pale-alpha-hover);
-@shapeInvertedNeutralPaleAlphaPressed: var(--k-shape-inverted-neutral-pale-alpha-pressed);
-@shapeInvertedNeutralSoftAlpha: var(--k-shape-inverted-neutral-soft-alpha);
-@shapeInvertedNeutralSoftAlphaHover: var(--k-shape-inverted-neutral-soft-alpha-hover);
-@shapeInvertedNeutralSoftAlphaPressed: var(--k-shape-inverted-neutral-soft-alpha-pressed);
-@shapeConstBacklessBlackHover: var(--k-shape-const-backless-black-hover);
-@shapeConstBacklessBlackPressed: var(--k-shape-const-backless-black-pressed);
-@shapeConstBacklessWhiteHover: var(--k-shape-const-backless-white-hover);
-@shapeConstBacklessWhitePressed: var(--k-shape-const-backless-white-pressed);
-@shapeConstDisabledBlack: var(--k-shape-const-disabled-black);
-@shapeConstDisabledWhite: var(--k-shape-const-disabled-white);
-@shapeConstFaintBlack: var(--k-shape-const-faint-black);
-@shapeConstFaintBlackHover: var(--k-shape-const-faint-black-hover);
-@shapeConstFaintBlackPressed: var(--k-shape-const-faint-black-pressed);
-@shapeConstFaintWhite: var(--k-shape-const-faint-white);
-@shapeConstFaintWhiteHover: var(--k-shape-const-faint-white-hover);
-@shapeConstFaintWhitePressed: var(--k-shape-const-faint-white-pressed);
-@shapeConstHeavyBlack: var(--k-shape-const-heavy-black);
-@shapeConstHeavyBlackHover: var(--k-shape-const-heavy-black-hover);
-@shapeConstHeavyBlackPressed: var(--k-shape-const-heavy-black-pressed);
-@shapeConstHeavyWhite: var(--k-shape-const-heavy-white);
-@shapeConstHeavyWhiteHover: var(--k-shape-const-heavy-white-hover);
-@shapeConstHeavyWhitePressed: var(--k-shape-const-heavy-white-pressed);
-@shapeConstPaleBlack: var(--k-shape-const-pale-black);
-@shapeConstPaleBlackHover: var(--k-shape-const-pale-black-hover);
-@shapeConstPaleBlackPressed: var(--k-shape-const-pale-black-pressed);
-@shapeConstPaleWhite: var(--k-shape-const-pale-white);
-@shapeConstPaleWhiteHover: var(--k-shape-const-pale-white-hover);
-@shapeConstPaleWhitePressed: var(--k-shape-const-pale-white-pressed);
-@shapeConstPromo: var(--k-shape-const-promo);
-@shapeConstSoftBlack: var(--k-shape-const-soft-black);
-@shapeConstSoftBlackHover: var(--k-shape-const-soft-black-hover);
-@shapeConstSoftBlackPressed: var(--k-shape-const-soft-black-pressed);
-@shapeConstSoftWhite: var(--k-shape-const-soft-white);
-@shapeConstSoftWhiteHover: var(--k-shape-const-soft-white-hover);
-@shapeConstSoftWhitePressed: var(--k-shape-const-soft-white-pressed);
-@lineAccentBold: var(--k-line-accent-bold);
-@lineAccentBoldHover: var(--k-line-accent-bold-hover);
-@lineAccentBoldPressed: var(--k-line-accent-bold-pressed);
-@lineAccentPale: var(--k-line-accent-pale);
-@lineAccentPaleHover: var(--k-line-accent-pale-hover);
-@lineAccentPalePressed: var(--k-line-accent-pale-pressed);
-@lineAccentSoft: var(--k-line-accent-soft);
-@lineAccentSoftHover: var(--k-line-accent-soft-hover);
-@lineAccentSoftPressed: var(--k-line-accent-soft-pressed);
-@lineBrandOriginal: var(--k-line-brand-original);
-@lineErrorBold: var(--k-line-error-bold);
-@lineErrorBoldHover: var(--k-line-error-bold-hover);
-@lineErrorBoldPressed: var(--k-line-error-bold-pressed);
-@lineNeutralFaint: var(--k-line-neutral-faint);
-@lineNeutralPale: var(--k-line-neutral-pale);
-@lineNeutralPaleHover: var(--k-line-neutral-pale-hover);
-@lineNeutralPalePressed: var(--k-line-neutral-pale-pressed);
-@lineOnAccentBoldFaint: var(--k-line-on-accent-bold-faint);
-@lineOnAccentBoldPale: var(--k-line-on-accent-bold-pale);
-@lineOnBrandOriginalFaint: var(--k-line-on-brand-original-faint);
-@lineOnBrandOriginalPale: var(--k-line-on-brand-original-pale);
-@lineSuccessBold: var(--k-line-success-bold);
-@lineSuccessBoldHover: var(--k-line-success-bold-hover);
-@lineSuccessBoldPressed: var(--k-line-success-bold-pressed);
-@lineWarningBold: var(--k-line-warning-bold);
-@lineWarningBoldHover: var(--k-line-warning-bold-hover);
-@lineWarningBoldPressed: var(--k-line-warning-bold-pressed);
-@lineInvertedAccentBold: var(--k-line-inverted-accent-bold);
-@lineInvertedAccentBoldHover: var(--k-line-inverted-accent-bold-hover);
-@lineInvertedAccentBoldPressed: var(--k-line-inverted-accent-bold-pressed);
-@lineInvertedAccentPale: var(--k-line-inverted-accent-pale);
-@lineInvertedAccentPaleHover: var(--k-line-inverted-accent-pale-hover);
-@lineInvertedAccentPalePressed: var(--k-line-inverted-accent-pale-pressed);
-@lineInvertedAccentSoft: var(--k-line-inverted-accent-soft);
-@lineInvertedAccentSoftHover: var(--k-line-inverted-accent-soft-hover);
-@lineInvertedAccentSoftPressed: var(--k-line-inverted-accent-soft-pressed);
-@lineInvertedErrorBold: var(--k-line-inverted-error-bold);
-@lineInvertedErrorBoldHover: var(--k-line-inverted-error-bold-hover);
-@lineInvertedErrorBoldPressed: var(--k-line-inverted-error-bold-pressed);
-@lineInvertedNeutralFaint: var(--k-line-inverted-neutral-faint);
-@lineInvertedNeutralPale: var(--k-line-inverted-neutral-pale);
-@lineInvertedNeutralPaleHover: var(--k-line-inverted-neutral-pale-hover);
-@lineInvertedNeutralPalePressed: var(--k-line-inverted-neutral-pale-pressed);
-@lineInvertedSuccessBold: var(--k-line-inverted-success-bold);
-@lineInvertedSuccessBoldHover: var(--k-line-inverted-success-bold-hover);
-@lineInvertedSuccessBoldPressed: var(--k-line-inverted-success-bold-pressed);
-@lineInvertedWarningBold: var(--k-line-inverted-warning-bold);
-@lineInvertedWarningBoldHover: var(--k-line-inverted-warning-bold-hover);
-@lineInvertedWarningBoldPressed: var(--k-line-inverted-warning-bold-pressed);
-@lineConstFaintBlack: var(--k-line-const-faint-black);
-@lineConstFaintWhite: var(--k-line-const-faint-white);
-@lineConstPaleBlack: var(--k-line-const-pale-black);
-@lineConstPaleBlackHover: var(--k-line-const-pale-black-hover);
-@lineConstPaleBlackPressed: var(--k-line-const-pale-black-pressed);
-@lineConstPaleWhite: var(--k-line-const-pale-white);
-@lineConstPaleWhiteHover: var(--k-line-const-pale-white-hover);
-@lineConstPaleWhitePressed: var(--k-line-const-pale-white-pressed);
-@surfaceBase: var(--k-surface-base);
-@surfaceHigh: var(--k-surface-high);
-@surfaceLow: var(--k-surface-low);
-@surfaceModalBackdrop: var(--k-surface-modal-backdrop);
-@illustrationBlack: var(--k-illustration-black);
-@illustrationBrand: var(--k-illustration-brand);
-@illustrationComplement: var(--k-illustration-complement);
-@illustrationInvertedNeutral: var(--k-illustration-inverted-neutral);
-@illustrationNeutral: var(--k-illustration-neutral);
-@illustrationOnBrand: var(--k-illustration-on-brand);
-@illustrationOnComplement: var(--k-illustration-on-complement);
-@illustrationPromo: var(--k-illustration-promo);
-@illustrationSymbol: var(--k-illustration-symbol);
-@illustrationWhite: var(--k-illustration-white);
-@customizableBoldBlack: var(--k-customizable-bold-black);
-@customizableBoldBlue: var(--k-customizable-bold-blue);
-@customizableBoldBlueDeep: var(--k-customizable-bold-blue-deep);
-@customizableBoldGray: var(--k-customizable-bold-gray);
-@customizableBoldGreen: var(--k-customizable-bold-green);
-@customizableBoldMint: var(--k-customizable-bold-mint);
-@customizableBoldOrange: var(--k-customizable-bold-orange);
-@customizableBoldPurple: var(--k-customizable-bold-purple);
-@customizableBoldRed: var(--k-customizable-bold-red);
-@customizableBoldViolet: var(--k-customizable-bold-violet);
-@customizableBoldYellow: var(--k-customizable-bold-yellow);
-@customizableFaintBlack: var(--k-customizable-faint-black);
-@customizableFaintBlue: var(--k-customizable-faint-blue);
-@customizableFaintBlueDeep: var(--k-customizable-faint-blue-deep);
-@customizableFaintGray: var(--k-customizable-faint-gray);
-@customizableFaintGreen: var(--k-customizable-faint-green);
-@customizableFaintMint: var(--k-customizable-faint-mint);
-@customizableFaintOrange: var(--k-customizable-faint-orange);
-@customizableFaintPurple: var(--k-customizable-faint-purple);
-@customizableFaintRed: var(--k-customizable-faint-red);
-@customizableFaintViolet: var(--k-customizable-faint-violet);
-@customizableFaintYellow: var(--k-customizable-faint-yellow);
-@customizableHeavyBlack: var(--k-customizable-heavy-black);
-@customizableHeavyBlue: var(--k-customizable-heavy-blue);
-@customizableHeavyBlueDeep: var(--k-customizable-heavy-blue-deep);
-@customizableHeavyGray: var(--k-customizable-heavy-gray);
-@customizableHeavyGreen: var(--k-customizable-heavy-green);
-@customizableHeavyMint: var(--k-customizable-heavy-mint);
-@customizableHeavyOrange: var(--k-customizable-heavy-orange);
-@customizableHeavyPurple: var(--k-customizable-heavy-purple);
-@customizableHeavyRed: var(--k-customizable-heavy-red);
-@customizableHeavyViolet: var(--k-customizable-heavy-violet);
-@customizableHeavyYellow: var(--k-customizable-heavy-yellow);
-@customizablePaleBlack: var(--k-customizable-pale-black);
-@customizablePaleBlue: var(--k-customizable-pale-blue);
-@customizablePaleBlueDeep: var(--k-customizable-pale-blue-deep);
-@customizablePaleGray: var(--k-customizable-pale-gray);
-@customizablePaleGreen: var(--k-customizable-pale-green);
-@customizablePaleMint: var(--k-customizable-pale-mint);
-@customizablePaleOrange: var(--k-customizable-pale-orange);
-@customizablePalePurple: var(--k-customizable-pale-purple);
-@customizablePaleRed: var(--k-customizable-pale-red);
-@customizablePaleViolet: var(--k-customizable-pale-violet);
-@customizablePaleYellow: var(--k-customizable-pale-yellow);
-@customizableSoftBlack: var(--k-customizable-soft-black);
-@customizableSoftBlue: var(--k-customizable-soft-blue);
-@customizableSoftBlueDeep: var(--k-customizable-soft-blue-deep);
-@customizableSoftGray: var(--k-customizable-soft-gray);
-@customizableSoftGreen: var(--k-customizable-soft-green);
-@customizableSoftMint: var(--k-customizable-soft-mint);
-@customizableSoftOrange: var(--k-customizable-soft-orange);
-@customizableSoftPurple: var(--k-customizable-soft-purple);
-@customizableSoftRed: var(--k-customizable-soft-red);
-@customizableSoftViolet: var(--k-customizable-soft-violet);
-@customizableSoftYellow: var(--k-customizable-soft-yellow);
+@text-accent-heavy: var(--k-color-text-accent-heavy);
+@text-accent-heavy-hover: var(--k-color-text-accent-heavy-hover);
+@text-accent-heavy-pressed: var(--k-color-text-accent-heavy-pressed);
+@text-error-heavy: var(--k-color-text-error-heavy);
+@text-error-heavy-hover: var(--k-color-text-error-heavy-hover);
+@text-error-heavy-pressed: var(--k-color-text-error-heavy-pressed);
+@text-inverted-accent-heavy: var(--k-color-text-inverted-accent-heavy);
+@text-inverted-accent-heavy-hover: var(--k-color-text-inverted-accent-heavy-hover);
+@text-inverted-accent-heavy-pressed: var(--k-color-text-inverted-accent-heavy-pressed);
+@text-inverted-error-heavy: var(--k-color-text-inverted-error-heavy);
+@text-inverted-error-heavy-hover: var(--k-color-text-inverted-error-heavy-hover);
+@text-inverted-error-heavy-pressed: var(--k-color-text-inverted-error-heavy-pressed);
+@text-inverted-neutral-faint: var(--k-color-text-inverted-neutral-faint);
+@text-inverted-neutral-heavy: var(--k-color-text-inverted-neutral-heavy);
+@text-inverted-neutral-pale: var(--k-color-text-inverted-neutral-pale);
+@text-inverted-neutral-soft: var(--k-color-text-inverted-neutral-soft);
+@text-inverted-success-heavy: var(--k-color-text-inverted-success-heavy);
+@text-inverted-success-heavy-hover: var(--k-color-text-inverted-success-heavy-hover);
+@text-inverted-success-heavy-pressed: var(--k-color-text-inverted-success-heavy-pressed);
+@text-inverted-warning-heavy: var(--k-color-text-inverted-warning-heavy);
+@text-inverted-warning-heavy-hover: var(--k-color-text-inverted-warning-heavy-hover);
+@text-inverted-warning-heavy-pressed: var(--k-color-text-inverted-warning-heavy-pressed);
+@text-logo: var(--k-color-text-logo);
+@text-neutral-faint: var(--k-color-text-neutral-faint);
+@text-neutral-heavy: var(--k-color-text-neutral-heavy);
+@text-neutral-pale: var(--k-color-text-neutral-pale);
+@text-neutral-soft: var(--k-color-text-neutral-soft);
+@text-success-heavy: var(--k-color-text-success-heavy);
+@text-success-heavy-hover: var(--k-color-text-success-heavy-hover);
+@text-success-heavy-pressed: var(--k-color-text-success-heavy-pressed);
+@text-warning-heavy: var(--k-color-text-warning-heavy);
+@text-warning-heavy-hover: var(--k-color-text-warning-heavy-hover);
+@text-warning-heavy-pressed: var(--k-color-text-warning-heavy-pressed);
+@text-const-faint-black: var(--k-color-text-const-faint-black);
+@text-const-faint-white: var(--k-color-text-const-faint-white);
+@text-const-heavy-black: var(--k-color-text-const-heavy-black);
+@text-const-heavy-white: var(--k-color-text-const-heavy-white);
+@text-const-pale-black: var(--k-color-text-const-pale-black);
+@text-const-pale-white: var(--k-color-text-const-pale-white);
+@text-const-soft-black: var(--k-color-text-const-soft-black);
+@text-const-soft-white: var(--k-color-text-const-soft-white);
+@text-on-accent-bold-faint: var(--k-color-text-on-accent-bold-faint);
+@text-on-accent-bold-heavy: var(--k-color-text-on-accent-bold-heavy);
+@text-on-accent-bold-pale: var(--k-color-text-on-accent-bold-pale);
+@text-on-accent-bold-soft: var(--k-color-text-on-accent-bold-soft);
+@text-on-brand-original-faint: var(--k-color-text-on-brand-original-faint);
+@text-on-brand-original-heavy: var(--k-color-text-on-brand-original-heavy);
+@text-on-brand-original-pale: var(--k-color-text-on-brand-original-pale);
+@text-on-brand-original-soft: var(--k-color-text-on-brand-original-soft);
+@shape-bold-accent: var(--k-color-shape-bold-accent);
+@shape-bold-accent-hover: var(--k-color-shape-bold-accent-hover);
+@shape-bold-accent-pressed: var(--k-color-shape-bold-accent-pressed);
+@shape-bold-brand-original: var(--k-color-shape-bold-brand-original);
+@shape-bold-brand-original-hover: var(--k-color-shape-bold-brand-original-hover);
+@shape-bold-brand-original-pressed: var(--k-color-shape-bold-brand-original-pressed);
+@shape-bold-error: var(--k-color-shape-bold-error);
+@shape-bold-error-hover: var(--k-color-shape-bold-error-hover);
+@shape-bold-error-pressed: var(--k-color-shape-bold-error-pressed);
+@shape-bold-neutral: var(--k-color-shape-bold-neutral);
+@shape-bold-neutral-hover: var(--k-color-shape-bold-neutral-hover);
+@shape-bold-neutral-pressed: var(--k-color-shape-bold-neutral-pressed);
+@shape-bold-success: var(--k-color-shape-bold-success);
+@shape-bold-success-hover: var(--k-color-shape-bold-success-hover);
+@shape-bold-success-pressed: var(--k-color-shape-bold-success-pressed);
+@shape-bold-warning: var(--k-color-shape-bold-warning);
+@shape-bold-warning-hover: var(--k-color-shape-bold-warning-hover);
+@shape-bold-warning-pressed: var(--k-color-shape-bold-warning-pressed);
+@shape-faint-accent: var(--k-color-shape-faint-accent);
+@shape-faint-accent-hover: var(--k-color-shape-faint-accent-hover);
+@shape-faint-accent-pressed: var(--k-color-shape-faint-accent-pressed);
+@shape-faint-brand: var(--k-color-shape-faint-brand);
+@shape-faint-brand-hover: var(--k-color-shape-faint-brand-hover);
+@shape-faint-brand-pressed: var(--k-color-shape-faint-brand-pressed);
+@shape-faint-error: var(--k-color-shape-faint-error);
+@shape-faint-error-hover: var(--k-color-shape-faint-error-hover);
+@shape-faint-error-pressed: var(--k-color-shape-faint-error-pressed);
+@shape-faint-neutral-alpha: var(--k-color-shape-faint-neutral-alpha);
+@shape-faint-neutral-alpha-hover: var(--k-color-shape-faint-neutral-alpha-hover);
+@shape-faint-neutral-alpha-pressed: var(--k-color-shape-faint-neutral-alpha-pressed);
+@shape-faint-success: var(--k-color-shape-faint-success);
+@shape-faint-success-hover: var(--k-color-shape-faint-success-hover);
+@shape-faint-success-pressed: var(--k-color-shape-faint-success-pressed);
+@shape-faint-warning: var(--k-color-shape-faint-warning);
+@shape-faint-warning-hover: var(--k-color-shape-faint-warning-hover);
+@shape-faint-warning-pressed: var(--k-color-shape-faint-warning-pressed);
+@shape-heavy-error: var(--k-color-shape-heavy-error);
+@shape-heavy-neutral: var(--k-color-shape-heavy-neutral);
+@shape-heavy-success: var(--k-color-shape-heavy-success);
+@shape-heavy-warning: var(--k-color-shape-heavy-warning);
+@shape-other-accent-bold-disabled: var(--k-color-shape-other-accent-bold-disabled);
+@shape-other-backless-hover: var(--k-color-shape-other-backless-hover);
+@shape-other-backless-pressed: var(--k-color-shape-other-backless-pressed);
+@shape-other-base: var(--k-color-shape-other-base);
+@shape-other-base-hover: var(--k-color-shape-other-base-hover);
+@shape-other-base-pressed: var(--k-color-shape-other-base-pressed);
+@shape-other-disabled: var(--k-color-shape-other-disabled);
+@shape-other-field: var(--k-color-shape-other-field);
+@shape-other-field-hover: var(--k-color-shape-other-field-hover);
+@shape-other-field-pressed: var(--k-color-shape-other-field-pressed);
+@shape-other-low: var(--k-color-shape-other-low);
+@shape-other-low-hover: var(--k-color-shape-other-low-hover);
+@shape-other-low-pressed: var(--k-color-shape-other-low-pressed);
+@shape-other-neutral-faint-solid: var(--k-color-shape-other-neutral-faint-solid);
+@shape-other-neutral-faint-solid-hover: var(--k-color-shape-other-neutral-faint-solid-hover);
+@shape-other-neutral-faint-solid-pressed: var(--k-color-shape-other-neutral-faint-solid-pressed);
+@shape-other-neutral-pale-solid: var(--k-color-shape-other-neutral-pale-solid);
+@shape-other-neutral-pale-solid-hover: var(--k-color-shape-other-neutral-pale-solid-hover);
+@shape-other-neutral-pale-solid-pressed: var(--k-color-shape-other-neutral-pale-solid-pressed);
+@shape-other-neutral-soft-solid: var(--k-color-shape-other-neutral-soft-solid);
+@shape-other-neutral-soft-solid-hover: var(--k-color-shape-other-neutral-soft-solid-hover);
+@shape-other-neutral-soft-solid-pressed: var(--k-color-shape-other-neutral-soft-solid-pressed);
+@shape-pale-accent: var(--k-color-shape-pale-accent);
+@shape-pale-accent-hover: var(--k-color-shape-pale-accent-hover);
+@shape-pale-accent-pressed: var(--k-color-shape-pale-accent-pressed);
+@shape-pale-brand: var(--k-color-shape-pale-brand);
+@shape-pale-brand-hover: var(--k-color-shape-pale-brand-hover);
+@shape-pale-brand-pressed: var(--k-color-shape-pale-brand-pressed);
+@shape-pale-error: var(--k-color-shape-pale-error);
+@shape-pale-error-hover: var(--k-color-shape-pale-error-hover);
+@shape-pale-error-pressed: var(--k-color-shape-pale-error-pressed);
+@shape-pale-neutral-alpha: var(--k-color-shape-pale-neutral-alpha);
+@shape-pale-neutral-alpha-hover: var(--k-color-shape-pale-neutral-alpha-hover);
+@shape-pale-neutral-alpha-pressed: var(--k-color-shape-pale-neutral-alpha-pressed);
+@shape-pale-success: var(--k-color-shape-pale-success);
+@shape-pale-success-hover: var(--k-color-shape-pale-success-hover);
+@shape-pale-success-pressed: var(--k-color-shape-pale-success-pressed);
+@shape-pale-warning: var(--k-color-shape-pale-warning);
+@shape-pale-warning-hover: var(--k-color-shape-pale-warning-hover);
+@shape-pale-warning-pressed: var(--k-color-shape-pale-warning-pressed);
+@shape-soft-accent: var(--k-color-shape-soft-accent);
+@shape-soft-accent-hover: var(--k-color-shape-soft-accent-hover);
+@shape-soft-accent-pressed: var(--k-color-shape-soft-accent-pressed);
+@shape-soft-brand: var(--k-color-shape-soft-brand);
+@shape-soft-brand-hover: var(--k-color-shape-soft-brand-hover);
+@shape-soft-brand-pressed: var(--k-color-shape-soft-brand-pressed);
+@shape-soft-error: var(--k-color-shape-soft-error);
+@shape-soft-error-hover: var(--k-color-shape-soft-error-hover);
+@shape-soft-error-pressed: var(--k-color-shape-soft-error-pressed);
+@shape-soft-neutral-alpha: var(--k-color-shape-soft-neutral-alpha);
+@shape-soft-neutral-alpha-hover: var(--k-color-shape-soft-neutral-alpha-hover);
+@shape-soft-neutral-alpha-pressed: var(--k-color-shape-soft-neutral-alpha-pressed);
+@shape-soft-success: var(--k-color-shape-soft-success);
+@shape-soft-success-hover: var(--k-color-shape-soft-success-hover);
+@shape-soft-success-pressed: var(--k-color-shape-soft-success-pressed);
+@shape-soft-warning: var(--k-color-shape-soft-warning);
+@shape-soft-warning-hover: var(--k-color-shape-soft-warning-hover);
+@shape-soft-warning-pressed: var(--k-color-shape-soft-warning-pressed);
+@shape-inverted-backless-hover: var(--k-color-shape-inverted-backless-hover);
+@shape-inverted-backless-pressed: var(--k-color-shape-inverted-backless-pressed);
+@shape-inverted-disabled: var(--k-color-shape-inverted-disabled);
+@shape-inverted-neutral-faint-alpha: var(--k-color-shape-inverted-neutral-faint-alpha);
+@shape-inverted-neutral-faint-alpha-hover: var(--k-color-shape-inverted-neutral-faint-alpha-hover);
+@shape-inverted-neutral-faint-alpha-pressed: var(--k-color-shape-inverted-neutral-faint-alpha-pressed);
+@shape-inverted-neutral-heavy: var(--k-color-shape-inverted-neutral-heavy);
+@shape-inverted-neutral-heavy-hover: var(--k-color-shape-inverted-neutral-heavy-hover);
+@shape-inverted-neutral-heavy-pressed: var(--k-color-shape-inverted-neutral-heavy-pressed);
+@shape-inverted-neutral-pale-alpha: var(--k-color-shape-inverted-neutral-pale-alpha);
+@shape-inverted-neutral-pale-alpha-hover: var(--k-color-shape-inverted-neutral-pale-alpha-hover);
+@shape-inverted-neutral-pale-alpha-pressed: var(--k-color-shape-inverted-neutral-pale-alpha-pressed);
+@shape-inverted-neutral-soft-alpha: var(--k-color-shape-inverted-neutral-soft-alpha);
+@shape-inverted-neutral-soft-alpha-hover: var(--k-color-shape-inverted-neutral-soft-alpha-hover);
+@shape-inverted-neutral-soft-alpha-pressed: var(--k-color-shape-inverted-neutral-soft-alpha-pressed);
+@shape-const-backless-black-hover: var(--k-color-shape-const-backless-black-hover);
+@shape-const-backless-black-pressed: var(--k-color-shape-const-backless-black-pressed);
+@shape-const-backless-white-hover: var(--k-color-shape-const-backless-white-hover);
+@shape-const-backless-white-pressed: var(--k-color-shape-const-backless-white-pressed);
+@shape-const-disabled-black: var(--k-color-shape-const-disabled-black);
+@shape-const-disabled-white: var(--k-color-shape-const-disabled-white);
+@shape-const-faint-black: var(--k-color-shape-const-faint-black);
+@shape-const-faint-black-hover: var(--k-color-shape-const-faint-black-hover);
+@shape-const-faint-black-pressed: var(--k-color-shape-const-faint-black-pressed);
+@shape-const-faint-white: var(--k-color-shape-const-faint-white);
+@shape-const-faint-white-hover: var(--k-color-shape-const-faint-white-hover);
+@shape-const-faint-white-pressed: var(--k-color-shape-const-faint-white-pressed);
+@shape-const-heavy-black: var(--k-color-shape-const-heavy-black);
+@shape-const-heavy-black-hover: var(--k-color-shape-const-heavy-black-hover);
+@shape-const-heavy-black-pressed: var(--k-color-shape-const-heavy-black-pressed);
+@shape-const-heavy-white: var(--k-color-shape-const-heavy-white);
+@shape-const-heavy-white-hover: var(--k-color-shape-const-heavy-white-hover);
+@shape-const-heavy-white-pressed: var(--k-color-shape-const-heavy-white-pressed);
+@shape-const-pale-black: var(--k-color-shape-const-pale-black);
+@shape-const-pale-black-hover: var(--k-color-shape-const-pale-black-hover);
+@shape-const-pale-black-pressed: var(--k-color-shape-const-pale-black-pressed);
+@shape-const-pale-white: var(--k-color-shape-const-pale-white);
+@shape-const-pale-white-hover: var(--k-color-shape-const-pale-white-hover);
+@shape-const-pale-white-pressed: var(--k-color-shape-const-pale-white-pressed);
+@shape-const-promo: var(--k-color-shape-const-promo);
+@shape-const-soft-black: var(--k-color-shape-const-soft-black);
+@shape-const-soft-black-hover: var(--k-color-shape-const-soft-black-hover);
+@shape-const-soft-black-pressed: var(--k-color-shape-const-soft-black-pressed);
+@shape-const-soft-white: var(--k-color-shape-const-soft-white);
+@shape-const-soft-white-hover: var(--k-color-shape-const-soft-white-hover);
+@shape-const-soft-white-pressed: var(--k-color-shape-const-soft-white-pressed);
+@line-accent-bold: var(--k-color-line-accent-bold);
+@line-accent-bold-hover: var(--k-color-line-accent-bold-hover);
+@line-accent-bold-pressed: var(--k-color-line-accent-bold-pressed);
+@line-accent-pale: var(--k-color-line-accent-pale);
+@line-accent-pale-hover: var(--k-color-line-accent-pale-hover);
+@line-accent-pale-pressed: var(--k-color-line-accent-pale-pressed);
+@line-accent-soft: var(--k-color-line-accent-soft);
+@line-accent-soft-hover: var(--k-color-line-accent-soft-hover);
+@line-accent-soft-pressed: var(--k-color-line-accent-soft-pressed);
+@line-brand-original: var(--k-color-line-brand-original);
+@line-error-bold: var(--k-color-line-error-bold);
+@line-error-bold-hover: var(--k-color-line-error-bold-hover);
+@line-error-bold-pressed: var(--k-color-line-error-bold-pressed);
+@line-neutral-faint: var(--k-color-line-neutral-faint);
+@line-neutral-pale: var(--k-color-line-neutral-pale);
+@line-neutral-pale-hover: var(--k-color-line-neutral-pale-hover);
+@line-neutral-pale-pressed: var(--k-color-line-neutral-pale-pressed);
+@line-on-accent-bold-faint: var(--k-color-line-on-accent-bold-faint);
+@line-on-accent-bold-pale: var(--k-color-line-on-accent-bold-pale);
+@line-on-brand-original-faint: var(--k-color-line-on-brand-original-faint);
+@line-on-brand-original-pale: var(--k-color-line-on-brand-original-pale);
+@line-success-bold: var(--k-color-line-success-bold);
+@line-success-bold-hover: var(--k-color-line-success-bold-hover);
+@line-success-bold-pressed: var(--k-color-line-success-bold-pressed);
+@line-warning-bold: var(--k-color-line-warning-bold);
+@line-warning-bold-hover: var(--k-color-line-warning-bold-hover);
+@line-warning-bold-pressed: var(--k-color-line-warning-bold-pressed);
+@line-inverted-accent-bold: var(--k-color-line-inverted-accent-bold);
+@line-inverted-accent-bold-hover: var(--k-color-line-inverted-accent-bold-hover);
+@line-inverted-accent-bold-pressed: var(--k-color-line-inverted-accent-bold-pressed);
+@line-inverted-accent-pale: var(--k-color-line-inverted-accent-pale);
+@line-inverted-accent-pale-hover: var(--k-color-line-inverted-accent-pale-hover);
+@line-inverted-accent-pale-pressed: var(--k-color-line-inverted-accent-pale-pressed);
+@line-inverted-accent-soft: var(--k-color-line-inverted-accent-soft);
+@line-inverted-accent-soft-hover: var(--k-color-line-inverted-accent-soft-hover);
+@line-inverted-accent-soft-pressed: var(--k-color-line-inverted-accent-soft-pressed);
+@line-inverted-error-bold: var(--k-color-line-inverted-error-bold);
+@line-inverted-error-bold-hover: var(--k-color-line-inverted-error-bold-hover);
+@line-inverted-error-bold-pressed: var(--k-color-line-inverted-error-bold-pressed);
+@line-inverted-neutral-faint: var(--k-color-line-inverted-neutral-faint);
+@line-inverted-neutral-pale: var(--k-color-line-inverted-neutral-pale);
+@line-inverted-neutral-pale-hover: var(--k-color-line-inverted-neutral-pale-hover);
+@line-inverted-neutral-pale-pressed: var(--k-color-line-inverted-neutral-pale-pressed);
+@line-inverted-success-bold: var(--k-color-line-inverted-success-bold);
+@line-inverted-success-bold-hover: var(--k-color-line-inverted-success-bold-hover);
+@line-inverted-success-bold-pressed: var(--k-color-line-inverted-success-bold-pressed);
+@line-inverted-warning-bold: var(--k-color-line-inverted-warning-bold);
+@line-inverted-warning-bold-hover: var(--k-color-line-inverted-warning-bold-hover);
+@line-inverted-warning-bold-pressed: var(--k-color-line-inverted-warning-bold-pressed);
+@line-const-faint-black: var(--k-color-line-const-faint-black);
+@line-const-faint-white: var(--k-color-line-const-faint-white);
+@line-const-pale-black: var(--k-color-line-const-pale-black);
+@line-const-pale-black-hover: var(--k-color-line-const-pale-black-hover);
+@line-const-pale-black-pressed: var(--k-color-line-const-pale-black-pressed);
+@line-const-pale-white: var(--k-color-line-const-pale-white);
+@line-const-pale-white-hover: var(--k-color-line-const-pale-white-hover);
+@line-const-pale-white-pressed: var(--k-color-line-const-pale-white-pressed);
+@surface-base: var(--k-color-surface-base);
+@surface-high: var(--k-color-surface-high);
+@surface-low: var(--k-color-surface-low);
+@surface-modal-backdrop: var(--k-color-surface-modal-backdrop);
+@illustration-black: var(--k-color-illustration-black);
+@illustration-brand: var(--k-color-illustration-brand);
+@illustration-complement: var(--k-color-illustration-complement);
+@illustration-inverted-neutral: var(--k-color-illustration-inverted-neutral);
+@illustration-neutral: var(--k-color-illustration-neutral);
+@illustration-on-brand: var(--k-color-illustration-on-brand);
+@illustration-on-complement: var(--k-color-illustration-on-complement);
+@illustration-promo: var(--k-color-illustration-promo);
+@illustration-symbol: var(--k-color-illustration-symbol);
+@illustration-white: var(--k-color-illustration-white);
+@customizable-bold-black: var(--k-color-customizable-bold-black);
+@customizable-bold-blue: var(--k-color-customizable-bold-blue);
+@customizable-bold-blue-deep: var(--k-color-customizable-bold-blue-deep);
+@customizable-bold-gray: var(--k-color-customizable-bold-gray);
+@customizable-bold-green: var(--k-color-customizable-bold-green);
+@customizable-bold-mint: var(--k-color-customizable-bold-mint);
+@customizable-bold-orange: var(--k-color-customizable-bold-orange);
+@customizable-bold-purple: var(--k-color-customizable-bold-purple);
+@customizable-bold-red: var(--k-color-customizable-bold-red);
+@customizable-bold-violet: var(--k-color-customizable-bold-violet);
+@customizable-bold-yellow: var(--k-color-customizable-bold-yellow);
+@customizable-faint-black: var(--k-color-customizable-faint-black);
+@customizable-faint-blue: var(--k-color-customizable-faint-blue);
+@customizable-faint-blue-deep: var(--k-color-customizable-faint-blue-deep);
+@customizable-faint-gray: var(--k-color-customizable-faint-gray);
+@customizable-faint-green: var(--k-color-customizable-faint-green);
+@customizable-faint-mint: var(--k-color-customizable-faint-mint);
+@customizable-faint-orange: var(--k-color-customizable-faint-orange);
+@customizable-faint-purple: var(--k-color-customizable-faint-purple);
+@customizable-faint-red: var(--k-color-customizable-faint-red);
+@customizable-faint-violet: var(--k-color-customizable-faint-violet);
+@customizable-faint-yellow: var(--k-color-customizable-faint-yellow);
+@customizable-heavy-black: var(--k-color-customizable-heavy-black);
+@customizable-heavy-blue: var(--k-color-customizable-heavy-blue);
+@customizable-heavy-blue-deep: var(--k-color-customizable-heavy-blue-deep);
+@customizable-heavy-gray: var(--k-color-customizable-heavy-gray);
+@customizable-heavy-green: var(--k-color-customizable-heavy-green);
+@customizable-heavy-mint: var(--k-color-customizable-heavy-mint);
+@customizable-heavy-orange: var(--k-color-customizable-heavy-orange);
+@customizable-heavy-purple: var(--k-color-customizable-heavy-purple);
+@customizable-heavy-red: var(--k-color-customizable-heavy-red);
+@customizable-heavy-violet: var(--k-color-customizable-heavy-violet);
+@customizable-heavy-yellow: var(--k-color-customizable-heavy-yellow);
+@customizable-pale-black: var(--k-color-customizable-pale-black);
+@customizable-pale-blue: var(--k-color-customizable-pale-blue);
+@customizable-pale-blue-deep: var(--k-color-customizable-pale-blue-deep);
+@customizable-pale-gray: var(--k-color-customizable-pale-gray);
+@customizable-pale-green: var(--k-color-customizable-pale-green);
+@customizable-pale-mint: var(--k-color-customizable-pale-mint);
+@customizable-pale-orange: var(--k-color-customizable-pale-orange);
+@customizable-pale-purple: var(--k-color-customizable-pale-purple);
+@customizable-pale-red: var(--k-color-customizable-pale-red);
+@customizable-pale-violet: var(--k-color-customizable-pale-violet);
+@customizable-pale-yellow: var(--k-color-customizable-pale-yellow);
+@customizable-soft-black: var(--k-color-customizable-soft-black);
+@customizable-soft-blue: var(--k-color-customizable-soft-blue);
+@customizable-soft-blue-deep: var(--k-color-customizable-soft-blue-deep);
+@customizable-soft-gray: var(--k-color-customizable-soft-gray);
+@customizable-soft-green: var(--k-color-customizable-soft-green);
+@customizable-soft-mint: var(--k-color-customizable-soft-mint);
+@customizable-soft-orange: var(--k-color-customizable-soft-orange);
+@customizable-soft-purple: var(--k-color-customizable-soft-purple);
+@customizable-soft-red: var(--k-color-customizable-soft-red);
+@customizable-soft-violet: var(--k-color-customizable-soft-violet);
+@customizable-soft-yellow: var(--k-color-customizable-soft-yellow);