@central-design-system/components 3.0.0-beta.3 → 3.0.0-beta.31

package/src/scss/utility/variables/overflow.scss

@@ -0,0 +1,6 @@
+$overflow: (
+  'hidden': hidden,
+  'scroll': scroll,
+  'auto': auto,
+  'visible': visible
+);

package/src/scss/utility/variables/position.scss

@@ -0,0 +1,7 @@
+$positions: (
+  'static': static,
+  'relative': relative,
+  'absolute': absolute,
+  'fixed': fixed,
+  'sticky': sticky
+);

package/src/scss/utility/variables/spacing.scss

@@ -0,0 +1,37 @@
+@import "../../mixins/layout/spacing";
+
+$spaces: (
+  'none': 0,
+  '3xs': $cds-spacing-3xs,
+  'xxs': $cds-spacing-xxs,
+  'xs': $cds-spacing-xs,
+  's': $cds-spacing-s,
+  'm': $cds-spacing-m,
+  'l': $cds-spacing-l,
+  'xl': $cds-spacing-xl,
+  'xxl': $cds-spacing-xxl,
+  '3xl': $cds-spacing-3xl,
+  '4xl': $cds-spacing-4xl,
+  '5xl': $cds-spacing-5xl,
+  '6xl': $cds-spacing-6xl
+);
+
+$padding-map: (
+  'pa': 'padding',
+  'pt': 'padding-top',
+  'pb': 'padding-bottom',
+  'pr': 'padding-right',
+  'pl': 'padding-left',
+  'px': (padding-right, padding-left),
+  'py': (padding-top, padding-bottom),
+);
+
+$margin-map: (
+  'ma': 'margin',
+  'mt': 'margin-top',
+  'mb': 'margin-bottom',
+  'mr': 'margin-right',
+  'ml': 'margin-left',
+  'mx': (margin-right, margin-left),
+  'my': (margin-top, margin-bottom),
+);

package/src/scss/utility/{variables.scss → variables/typography.scss}

@@ -1,7 +1,4 @@
-@import "../mixins/layout/spacing";
-@import "../mixins/layout/layout";
-@import "../mixins/layout/spacing";
-@import "../mixins/typo";
+@import "../../mixins/typo";
 
 $xs: ('size': var(--cds-font-body-size-xs), 'height': var(--cds-font-height-body), 'weight': var(--cds-font-weight-light));
 $sm: ('size': var(--cds-font-body-size-s), 'height': var(--cds-font-height-body), 'weight': var(--cds-font-weight-light));
@@ -31,86 +28,66 @@ $typography: (
   'display-2': $display2
 );
 
-$borders: ('1': var(--cds-border-element-01), '2': var(--cds-border-element-02));
-$borders-radius: ('3': var(--cds-border-radius-s), '6': var(--cds-border-radius-m), '9': var(--cds-border-radius-l));
-
-$spaces: (
-  'none': 0,
-  '3xs': $cds-spacing-3xs,
-  'xxs': $cds-spacing-xxs,
-  'xs': $cds-spacing-xs,
-  's': $cds-spacing-s,
-  'm': $cds-spacing-m,
-  'l': $cds-spacing-l,
-  'xl': $cds-spacing-xl,
-  'xxl': $cds-spacing-xxl,
-  '3xl': $cds-spacing-3xl,
-  '4xl': $cds-spacing-4xl,
-  '5xl': $cds-spacing-5xl,
-  '6xl': $cds-spacing-6xl
+$font-weight: (
+  'normal': normal,
+  'bold': bold,
+  '100': 100,
+  '200': 200,
+  '300': 300,
+  '400': 400,
+  '500': 500,
+  '600': 600,
+  '700': 700,
+  '800': 800,
+  '900': 900
 );
 
-$displays: (
-  'block': block,
-  'inline-block': inline-block,
-  'inline': inline,
-  'flex': flex,
-  'inline-flex': inline-flex,
-  'hidden': none,
+$font-style: (
+  'normal': normal,
+  'italic': italic,
+  'oblique': oblique
 );
 
-$visibility: (
-  'invisible': hidden,
-  'visible': visible,
+$text-align: (
+  'left': left,
+  'right': right,
+  'center': center,
+  'justify': justify
 );
 
-$flex-direction: (
-  'flex-col': column,
-  'flex-row': row,
-  'flex-row-reverse': row-reverse,
-  'flex-col-reverse': column-reverse
+$text-decoration: (
+  'none': none,
+  'underline': underline,
+  'overline': overline,
+  'line-through': line-through
 );
 
-$justify-content: (
-  'center': center,
-  'start': flex-start,
-  'end': flex-end,
-  'between': space-between,
-  'around': space-around,
-  'stretch': stretch
+$text-transform: (
+  'none': none,
+  'capitalize': capitalize,
+  'uppercase': uppercase,
+  'lowercase': lowercase
 );
 
-$align-items: (
-  'start': flex-start,
-  'end': flex-end,
-  'center': center,
-  'baseline': baseline,
-  'stretch': stretch
-);
-
-$align-content: (
-  'start': flex-start,
-  'end': flex-end,
-  'center': center,
-  'between': space-between,
-  'around': space-around,
-  'stretch': stretch,
+$line-height: (
+  'normal': normal,
+  '1': 1,
+  '2': 2
 );
 
-$align-self: (
-  'start': flex-start,
-  'end': flex-end,
-  'center': center,
-  'baseline': baseline,
-  'stretch': stretch,
-  'auto': auto,
+$letter-spacing: (
   'normal': normal,
-  'first-baseline': first baseline,
-  'last-baseline': last baseline
+  'tight': -0.05em,
+  0: 0,
+  'wide': 0.05em
 );
 
-$flex-wrap: (
-  'wrap': wrap,
-  'nowrap': nowrap,
-  'wrap-reverse': wrap-reverse
+$typography-properties: (
+  'weight': ('name': 'font-weight-', 'map': $font-weight, 'property': 'font-weight'),
+  'style': ('name': 'font-style-', 'map': $font-style, 'property': 'font-style'),
+  'align': ('name': 'align-', 'map': $text-align, 'property': 'text-align'),
+  'decoration': ('name': 'text-decoration-', 'map': $text-decoration, 'property': 'text-decoration'),
+  'transform': ('name': 'text-transform-', 'map': $text-transform, 'property': 'text-transform'),
+  'line-height': ('name': 'line-height-', 'map': $line-height, 'property': 'line-height'),
+  'letter-spacing': ('name': 'letter-spacing-', 'map': $letter-spacing, 'property': 'letter-spacing'),
 );

package/src/scss/utility/variables/visibility.scss

@@ -0,0 +1,5 @@
+$visibility: (
+  'invisible': hidden,
+  'visible': visible,
+  'collapse': collapse
+);

package/src/scss/utility/variables/widthHeight.scss

@@ -0,0 +1,69 @@
+$widthHeight: (
+  '0': 0px,
+  'px': 1px,
+  '0\\.5': 0.125rem, // 2px
+  '1': 0.25rem, // 4px
+  '1\\.5': 0.375rem, // 6px
+  '2': 0.5rem, // 8px
+  '2\\.5': 0.625rem, // 10px
+  '3': 0.75rem, // 12px
+  '3\\.5': 0.875rem, // 14px
+  '4': 1rem, // 16px
+  '5': 1.25rem, // 20px
+  '6': 1.5rem, // 24px
+  '7': 1.75rem, // 28px
+  '8': 2rem, // 32px
+  '9': 2.25rem, // 36px
+  '10': 2.5rem, // 40px
+  '11': 2.75rem, // 44px
+  '12': 3rem, // 48px
+  '14': 3.5rem, // 56px
+  '16': 4rem, // 64px
+  '20': 5rem, // 80px
+  '24': 6rem, // 96px
+  '28': 7rem, // 112px
+  '32': 8rem, // 128px
+  '36': 9rem, // 144px
+  '40': 10rem, // 160px
+  '44': 11rem, // 176px
+  '48': 12rem, // 192px
+  '52': 13rem, // 208px
+  '56': 14rem, // 224px
+  '60': 15rem, // 240px
+  '64': 16rem, // 256px
+  '72': 18rem, // 288px
+  '80': 20rem, // 320px
+  '96': 24rem, // 384px
+  'auto': auto,
+  '1\\/2': 50%,
+  '1\\/3': 33.333333%,
+  '2\\/3': 66.666667%,
+  '1\\/4': 25%,
+  '2\\/4': 50%,
+  '3\\/4': 75%,
+  '1\\/5': 20%,
+  '2\\/5': 40%,
+  '3\\/5': 60%,
+  '4\\/5': 80%,
+  '1\\/6': 16.666667%,
+  '2\\/6': 33.333333%,
+  '3\\/6': 50%,
+  '4\\/6': 66.666667%,
+  '5\\/6': 83.333333%,
+  '1\\/12': 8.333333%,
+  '2\\/12': 16.666667%,
+  '3\\/12': 25%,
+  '4\\/12': 33.333333%,
+  '5\\/12': 41.666667%,
+  '6\\/12': 50%,
+  '7\\/12': 58.333333%,
+  '8\\/12': 66.666667%,
+  '9\\/12': 75%,
+  '10\\/12': 83.333333%,
+  '11\\/12': 91.666667%,
+  'full': 100%,
+  'screen': 100vw,
+  'min': min-content,
+  'max': max-content,
+  'fit': fit-content
+);

package/dist/components/CdsDropdown/composable/index.d.ts

@@ -1 +0,0 @@
-export * from './scrolling';

package/dist/composable/dark.d.ts

@@ -1,19 +0,0 @@
-import type { ComputedRef, PropType } from 'vue';
-export interface IDarkProps {
-    dark: boolean;
-}
-export interface IUseDark {
-    darkClasses: ComputedRef<string | undefined>;
-}
-export declare const makeDarkProps: <Defaults extends {
-    dark?: unknown;
-} = {}>(defaults?: Defaults | undefined) => import('../utils').AppendDefault<{
-    /**
-     * Темная тема
-     */
-    dark: {
-        type: PropType<boolean>;
-        default: boolean;
-    };
-}, Defaults>;
-export declare function useDark(props: IDarkProps, name: string): IUseDark;

package/dist/plugins/index.d.ts

@@ -1,2 +0,0 @@
-declare const _default: {};
-export default _default;

package/src/scss/utility/generatedFiles/generatedStyles.json

@@ -1 +0,0 @@
-".cds-border-radius-s { border-radius: var(--cds-border-radius-s) !important; }/.cds-border-radius-m { border-radius: var(--cds-border-radius-m) !important; }/.cds-border-radius-l { border-radius: var(--cds-border-radius-l) !important; }/.cds-color-background-page-primary { background-color: var(--cds-color-background-page-primary) !important; }/.cds-color-background-page-secondary { background-color: var(--cds-color-background-page-secondary) !important; }/.cds-color-background-container-primary { background-color: var(--cds-color-background-container-primary) !important; }/.cds-color-background-container-secondary { background-color: var(--cds-color-background-container-secondary) !important; }/.cds-color-background-field-primary { background-color: var(--cds-color-background-field-primary) !important; }/.cds-color-background-field-secondary { background-color: var(--cds-color-background-field-secondary) !important; }/.cds-color-background-element-primary { background-color: var(--cds-color-background-element-primary) !important; }/.cds-color-background-inverse { background-color: var(--cds-color-background-inverse) !important; }/.cds-color-border-element-primary { border-color: var(--cds-color-border-element-primary) !important; }/.cds-color-border-element-secondary { border-color: var(--cds-color-border-element-secondary) !important; }/.cds-color-disabled-01 { color: var(--cds-color-disabled-01) !important; }/.cds-color-disabled-02 { color: var(--cds-color-disabled-02) !important; }/.cds-color-feedback-error-10 { color: var(--cds-color-feedback-error-10) !important; }/.cds-color-feedback-error-20 { color: var(--cds-color-feedback-error-20) !important; }/.cds-color-feedback-error-100 { color: var(--cds-color-feedback-error-100) !important; }/.cds-color-feedback-warning-10 { color: var(--cds-color-feedback-warning-10) !important; }/.cds-color-feedback-warning-20 { color: var(--cds-color-feedback-warning-20) !important; }/.cds-color-feedback-warning-100 { color: var(--cds-color-feedback-warning-100) !important; }/.cds-color-feedback-success-10 { color: var(--cds-color-feedback-success-10) !important; }/.cds-color-feedback-success-20 { color: var(--cds-color-feedback-success-20) !important; }/.cds-color-feedback-success-100 { color: var(--cds-color-feedback-success-100) !important; }/.cds-color-feedback-info-10 { color: var(--cds-color-feedback-info-10) !important; }/.cds-color-feedback-info-20 { color: var(--cds-color-feedback-info-20) !important; }/.cds-color-feedback-info-100 { color: var(--cds-color-feedback-info-100) !important; }/.cds-color-feedback-progress-10 { color: var(--cds-color-feedback-progress-10) !important; }/.cds-color-feedback-progress-20 { color: var(--cds-color-feedback-progress-20) !important; }/.cds-color-feedback-progress-100 { color: var(--cds-color-feedback-progress-100) !important; }/.cds-color-icon-default { color: var(--cds-color-icon-default) !important; }/.cds-color-icon-inverse { color: var(--cds-color-icon-inverse) !important; }/.cds-color-interactive-01 { color: var(--cds-color-interactive-01-default) !important; }/.cds-color-interactive-01:hover { color: var(--cds-color-interactive-01-hover) !important; }/.cds-color-interactive-01:focus { color: var(--cds-color-interactive-01-focus) !important; }/.cds-color-interactive-01:active { color: var(--cds-color-interactive-01-active) !important; }/.cds-color-interactive-01:above { color: var(--cds-color-interactive-01-above) !important; }/.cds-color-interactive-02 { color: var(--cds-color-interactive-02-default) !important; }/.cds-color-interactive-02:hover { color: var(--cds-color-interactive-02-hover) !important; }/.cds-color-interactive-02:focus { color: var(--cds-color-interactive-02-focus) !important; }/.cds-color-interactive-02:active { color: var(--cds-color-interactive-02-active) !important; }/.cds-color-interactive-02:above { color: var(--cds-color-interactive-02-above) !important; }/.cds-color-link-default { color: var(--cds-color-link-default) !important; }/.cds-color-link-visited { color: var(--cds-color-link-visited) !important; }/.cds-color-neutral-0 { color: var(--cds-color-neutral-0) !important; }/.cds-color-neutral-4 { color: var(--cds-color-neutral-4) !important; }/.cds-color-neutral-8 { color: var(--cds-color-neutral-8) !important; }/.cds-color-neutral-10 { color: var(--cds-color-neutral-10) !important; }/.cds-color-neutral-15 { color: var(--cds-color-neutral-15) !important; }/.cds-color-neutral-25 { color: var(--cds-color-neutral-25) !important; }/.cds-color-neutral-40 { color: var(--cds-color-neutral-40) !important; }/.cds-color-neutral-48 { color: var(--cds-color-neutral-48) !important; }/.cds-color-neutral-66 { color: var(--cds-color-neutral-66) !important; }/.cds-color-neutral-100 { color: var(--cds-color-neutral-100) !important; }/.cds-color-overlay-01 { color: var(--cds-color-overlay-01) !important; }/.cds-color-overlay-02 { color: var(--cds-color-overlay-02) !important; }/.cds-color-text-primary { color: var(--cds-color-text-primary) !important; }/.cds-color-text-secondary { color: var(--cds-color-text-secondary) !important; }/.cds-color-text-description { color: var(--cds-color-text-description) !important; }/.cds-color-text-label { color: var(--cds-color-text-label) !important; }/.cds-color-text-placeholder { color: var(--cds-color-text-placeholder) !important; }/.cds-color-text-inverse { color: var(--cds-color-text-inverse) !important; }/.cds-font-family-size { font-size: var(--cds-font-family-size) !important; }/.cds-font-body-size-xs { font-size: var(--cds-font-body-size-xs) !important; }/.cds-font-body-size-s { font-size: var(--cds-font-body-size-s) !important; }/.cds-font-body-size-m { font-size: var(--cds-font-body-size-m) !important; }/.cds-font-body-size-l { font-size: var(--cds-font-body-size-l) !important; }/.cds-font-heading-1 { font-size: var(--cds-font-heading-1) !important; }/.cds-font-heading-2 { font-size: var(--cds-font-heading-2) !important; }/.cds-font-heading-3 { font-size: var(--cds-font-heading-3) !important; }/.cds-font-heading-4 { font-size: var(--cds-font-heading-4) !important; }/.cds-font-heading-5 { font-size: var(--cds-font-heading-5) !important; }/.cds-font-heading-6 { font-size: var(--cds-font-heading-6) !important; }/.cds-font-heading-eyebrow { font-size: var(--cds-font-heading-eyebrow) !important; }/.cds-font-display-1 { font-size: var(--cds-font-display-1) !important; }/.cds-font-display-2 { font-size: var(--cds-font-display-2) !important; }/.cds-font-weight-bold { font-weight: var(--cds-font-weight-bold) !important; }/.cds-font-weight-semi-bold { font-weight: var(--cds-font-weight-semi-bold) !important; }/.cds-font-weight-normal { font-weight: var(--cds-font-weight-normal) !important; }/.cds-font-weight-light { font-weight: var(--cds-font-weight-light) !important; }/.cds-font-height-body { line-height: var(--cds-font-height-body) !important; }/.cds-font-height-heading { line-height: var(--cds-font-height-heading) !important; }/.cds-font-height-display { line-height: var(--cds-font-height-display) !important; }/.cds-font-height-helper { line-height: var(--cds-font-height-helper) !important; }/.cds-font-margin-heading-1 { margin: var(--cds-font-margin-heading-1) !important; }/.cds-font-margin-heading-2 { margin: var(--cds-font-margin-heading-2) !important; }/.cds-font-margin-heading-3 { margin: var(--cds-font-margin-heading-3) !important; }/.cds-font-margin-heading-4 { margin: var(--cds-font-margin-heading-4) !important; }/.cds-font-margin-heading-5 { margin: var(--cds-font-margin-heading-5) !important; }/.cds-font-margin-heading-6 { margin: var(--cds-font-margin-heading-6) !important; }/.cds-font-margin-display-1 { margin: var(--cds-font-margin-display-1) !important; }/.cds-font-margin-display-2 { margin: var(--cds-font-margin-display-2) !important; }/.cds-font-margin-s { margin: var(--cds-font-margin-s) !important; }/.cds-box-shadow-header { box-shadow: var(--cds-box-shadow-header) !important; }/.cds-box-shadow-footer { box-shadow: var(--cds-box-shadow-footer) !important; }/.cds-box-shadow-sidebar-left { box-shadow: var(--cds-box-shadow-sidebar-left) !important; }/.cds-box-shadow-sidebar-right { box-shadow: var(--cds-box-shadow-sidebar-right) !important; }/.cds-box-shadow-menu { box-shadow: var(--cds-box-shadow-menu) !important; }/.cds-box-shadow-modal { box-shadow: var(--cds-box-shadow-modal) !important; }/.cds-box-shadow-notification { box-shadow: var(--cds-box-shadow-notification) !important; }"

package/src/scss/utility/generatedFiles/generatedStyles.scss

@@ -1,300 +0,0 @@
-.cds-border-radius-s {
-  border-radius: var(--cds-border-radius-s) !important;
-}
-.cds-border-radius-m {
-  border-radius: var(--cds-border-radius-m) !important;
-}
-.cds-border-radius-l {
-  border-radius: var(--cds-border-radius-l) !important;
-}
-.cds-color-background-page-primary {
-  background-color: var(--cds-color-background-page-primary) !important;
-}
-.cds-color-background-page-secondary {
-  background-color: var(--cds-color-background-page-secondary) !important;
-}
-.cds-color-background-container-primary {
-  background-color: var(--cds-color-background-container-primary) !important;
-}
-.cds-color-background-container-secondary {
-  background-color: var(--cds-color-background-container-secondary) !important;
-}
-.cds-color-background-field-primary {
-  background-color: var(--cds-color-background-field-primary) !important;
-}
-.cds-color-background-field-secondary {
-  background-color: var(--cds-color-background-field-secondary) !important;
-}
-.cds-color-background-element-primary {
-  background-color: var(--cds-color-background-element-primary) !important;
-}
-.cds-color-background-inverse {
-  background-color: var(--cds-color-background-inverse) !important;
-}
-.cds-color-border-element-primary {
-  border-color: var(--cds-color-border-element-primary) !important;
-}
-.cds-color-border-element-secondary {
-  border-color: var(--cds-color-border-element-secondary) !important;
-}
-.cds-color-disabled-01 {
-  color: var(--cds-color-disabled-01) !important;
-}
-.cds-color-disabled-02 {
-  color: var(--cds-color-disabled-02) !important;
-}
-.cds-color-feedback-error-10 {
-  color: var(--cds-color-feedback-error-10) !important;
-}
-.cds-color-feedback-error-20 {
-  color: var(--cds-color-feedback-error-20) !important;
-}
-.cds-color-feedback-error-100 {
-  color: var(--cds-color-feedback-error-100) !important;
-}
-.cds-color-feedback-warning-10 {
-  color: var(--cds-color-feedback-warning-10) !important;
-}
-.cds-color-feedback-warning-20 {
-  color: var(--cds-color-feedback-warning-20) !important;
-}
-.cds-color-feedback-warning-100 {
-  color: var(--cds-color-feedback-warning-100) !important;
-}
-.cds-color-feedback-success-10 {
-  color: var(--cds-color-feedback-success-10) !important;
-}
-.cds-color-feedback-success-20 {
-  color: var(--cds-color-feedback-success-20) !important;
-}
-.cds-color-feedback-success-100 {
-  color: var(--cds-color-feedback-success-100) !important;
-}
-.cds-color-feedback-info-10 {
-  color: var(--cds-color-feedback-info-10) !important;
-}
-.cds-color-feedback-info-20 {
-  color: var(--cds-color-feedback-info-20) !important;
-}
-.cds-color-feedback-info-100 {
-  color: var(--cds-color-feedback-info-100) !important;
-}
-.cds-color-feedback-progress-10 {
-  color: var(--cds-color-feedback-progress-10) !important;
-}
-.cds-color-feedback-progress-20 {
-  color: var(--cds-color-feedback-progress-20) !important;
-}
-.cds-color-feedback-progress-100 {
-  color: var(--cds-color-feedback-progress-100) !important;
-}
-.cds-color-icon-default {
-  color: var(--cds-color-icon-default) !important;
-}
-.cds-color-icon-inverse {
-  color: var(--cds-color-icon-inverse) !important;
-}
-.cds-color-interactive-01 {
-  color: var(--cds-color-interactive-01-default) !important;
-}
-.cds-color-interactive-01:hover {
-  color: var(--cds-color-interactive-01-hover) !important;
-}
-.cds-color-interactive-01:focus {
-  color: var(--cds-color-interactive-01-focus) !important;
-}
-.cds-color-interactive-01:active {
-  color: var(--cds-color-interactive-01-active) !important;
-}
-.cds-color-interactive-01:above {
-  color: var(--cds-color-interactive-01-above) !important;
-}
-.cds-color-interactive-02 {
-  color: var(--cds-color-interactive-02-default) !important;
-}
-.cds-color-interactive-02:hover {
-  color: var(--cds-color-interactive-02-hover) !important;
-}
-.cds-color-interactive-02:focus {
-  color: var(--cds-color-interactive-02-focus) !important;
-}
-.cds-color-interactive-02:active {
-  color: var(--cds-color-interactive-02-active) !important;
-}
-.cds-color-interactive-02:above {
-  color: var(--cds-color-interactive-02-above) !important;
-}
-.cds-color-link-default {
-  color: var(--cds-color-link-default) !important;
-}
-.cds-color-link-visited {
-  color: var(--cds-color-link-visited) !important;
-}
-.cds-color-neutral-0 {
-  color: var(--cds-color-neutral-0) !important;
-}
-.cds-color-neutral-4 {
-  color: var(--cds-color-neutral-4) !important;
-}
-.cds-color-neutral-8 {
-  color: var(--cds-color-neutral-8) !important;
-}
-.cds-color-neutral-10 {
-  color: var(--cds-color-neutral-10) !important;
-}
-.cds-color-neutral-15 {
-  color: var(--cds-color-neutral-15) !important;
-}
-.cds-color-neutral-25 {
-  color: var(--cds-color-neutral-25) !important;
-}
-.cds-color-neutral-40 {
-  color: var(--cds-color-neutral-40) !important;
-}
-.cds-color-neutral-48 {
-  color: var(--cds-color-neutral-48) !important;
-}
-.cds-color-neutral-66 {
-  color: var(--cds-color-neutral-66) !important;
-}
-.cds-color-neutral-100 {
-  color: var(--cds-color-neutral-100) !important;
-}
-.cds-color-overlay-01 {
-  color: var(--cds-color-overlay-01) !important;
-}
-.cds-color-overlay-02 {
-  color: var(--cds-color-overlay-02) !important;
-}
-.cds-color-text-primary {
-  color: var(--cds-color-text-primary) !important;
-}
-.cds-color-text-secondary {
-  color: var(--cds-color-text-secondary) !important;
-}
-.cds-color-text-description {
-  color: var(--cds-color-text-description) !important;
-}
-.cds-color-text-label {
-  color: var(--cds-color-text-label) !important;
-}
-.cds-color-text-placeholder {
-  color: var(--cds-color-text-placeholder) !important;
-}
-.cds-color-text-inverse {
-  color: var(--cds-color-text-inverse) !important;
-}
-.cds-font-family-size {
-  font-size: var(--cds-font-family-size) !important;
-}
-.cds-font-body-size-xs {
-  font-size: var(--cds-font-body-size-xs) !important;
-}
-.cds-font-body-size-s {
-  font-size: var(--cds-font-body-size-s) !important;
-}
-.cds-font-body-size-m {
-  font-size: var(--cds-font-body-size-m) !important;
-}
-.cds-font-body-size-l {
-  font-size: var(--cds-font-body-size-l) !important;
-}
-.cds-font-heading-1 {
-  font-size: var(--cds-font-heading-1) !important;
-}
-.cds-font-heading-2 {
-  font-size: var(--cds-font-heading-2) !important;
-}
-.cds-font-heading-3 {
-  font-size: var(--cds-font-heading-3) !important;
-}
-.cds-font-heading-4 {
-  font-size: var(--cds-font-heading-4) !important;
-}
-.cds-font-heading-5 {
-  font-size: var(--cds-font-heading-5) !important;
-}
-.cds-font-heading-6 {
-  font-size: var(--cds-font-heading-6) !important;
-}
-.cds-font-heading-eyebrow {
-  font-size: var(--cds-font-heading-eyebrow) !important;
-}
-.cds-font-display-1 {
-  font-size: var(--cds-font-display-1) !important;
-}
-.cds-font-display-2 {
-  font-size: var(--cds-font-display-2) !important;
-}
-.cds-font-weight-bold {
-  font-weight: var(--cds-font-weight-bold) !important;
-}
-.cds-font-weight-semi-bold {
-  font-weight: var(--cds-font-weight-semi-bold) !important;
-}
-.cds-font-weight-normal {
-  font-weight: var(--cds-font-weight-normal) !important;
-}
-.cds-font-weight-light {
-  font-weight: var(--cds-font-weight-light) !important;
-}
-.cds-font-height-body {
-  line-height: var(--cds-font-height-body) !important;
-}
-.cds-font-height-heading {
-  line-height: var(--cds-font-height-heading) !important;
-}
-.cds-font-height-display {
-  line-height: var(--cds-font-height-display) !important;
-}
-.cds-font-height-helper {
-  line-height: var(--cds-font-height-helper) !important;
-}
-.cds-font-margin-heading-1 {
-  margin: var(--cds-font-margin-heading-1) !important;
-}
-.cds-font-margin-heading-2 {
-  margin: var(--cds-font-margin-heading-2) !important;
-}
-.cds-font-margin-heading-3 {
-  margin: var(--cds-font-margin-heading-3) !important;
-}
-.cds-font-margin-heading-4 {
-  margin: var(--cds-font-margin-heading-4) !important;
-}
-.cds-font-margin-heading-5 {
-  margin: var(--cds-font-margin-heading-5) !important;
-}
-.cds-font-margin-heading-6 {
-  margin: var(--cds-font-margin-heading-6) !important;
-}
-.cds-font-margin-display-1 {
-  margin: var(--cds-font-margin-display-1) !important;
-}
-.cds-font-margin-display-2 {
-  margin: var(--cds-font-margin-display-2) !important;
-}
-.cds-font-margin-s {
-  margin: var(--cds-font-margin-s) !important;
-}
-.cds-box-shadow-header {
-  box-shadow: var(--cds-box-shadow-header) !important;
-}
-.cds-box-shadow-footer {
-  box-shadow: var(--cds-box-shadow-footer) !important;
-}
-.cds-box-shadow-sidebar-left {
-  box-shadow: var(--cds-box-shadow-sidebar-left) !important;
-}
-.cds-box-shadow-sidebar-right {
-  box-shadow: var(--cds-box-shadow-sidebar-right) !important;
-}
-.cds-box-shadow-menu {
-  box-shadow: var(--cds-box-shadow-menu) !important;
-}
-.cds-box-shadow-modal {
-  box-shadow: var(--cds-box-shadow-modal) !important;
-}
-.cds-box-shadow-notification {
-  box-shadow: var(--cds-box-shadow-notification) !important;
-}