@skbkontur/colors 1.1.2-d1791.0 → 2.0.0-alpha.0

package/dist/colors.scss

@@ -0,0 +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);