@central-design-system/components 3.0.0-beta.0 → 3.0.0-beta.10

package/src/scss/utility/flexbox.scss

@@ -1,37 +1,35 @@
-@import "variables";
+@import "./variables";
 
-@each $name, $direction in $flex-direction {
-  .cds-#{$name} {
-    flex-direction: $direction !important;
-  }
-}
+/*
+ * При добавлении утилитарных классов необходимо разделять переменные/формирование. Переменные хранятся в папке ./variables и также используются для формирования документации.
+ * Для всех утилитарных классов необходимо указывать !important
+ * Также, в данном файле необходимо указывать классы как без брейкпоинтов, так и с ними. Пример ниже.
+ * Чтобы утилитарные стили начали работать, необходимо экспортировать этот файл в index.scss, который в дальнейшем окажется в основном бандле.
+ */
 
-@each $name, $value in $justify-content {
-  .cds-justify-#{$name} {
-    justify-content: $value !important;
-  }
-}
+@each $key, $value in $flex-properties {
+  $prefix: map-get($value, 'name');
+  $propertyMap: map-get($value, 'map');
+  $cssProperty: map-get($value, 'property');
 
-@each $name, $value in $align-items {
-  .cds-items-#{$name} {
-    align-items: $value !important;
+  // без брейкпоинтов
+  @each $name, $propValue in $propertyMap {
+    .cds-#{$prefix}#{$name} {
+      #{$cssProperty}: $propValue !important;
+    }
   }
-}
 
-@each $name, $value in $align-content {
-  .cds-content-#{$name} {
-    align-content: $value !important;
-  }
-}
+  // брейкпоинты
+  @each $breakpoint, $map in $grid-breakpoints {
+    $width: map-get($map, 'width');
 
-@each $name, $value in $flex-wrap {
-  .cds-flex-#{$name} {
-    flex-wrap: $value !important;
+    @media (min-width: $width) {
+      @each $name, $propValue in $propertyMap {
+        .#{$breakpoint}\:cds-#{$prefix}#{$name} {
+          #{$cssProperty}: $propValue !important;
+        }
+      }
+    }
   }
 }
 
-@each $name, $value in $align-self {
-  .cds-self-#{$name} {
-    align-self: $value !important;
-  }
-}

package/src/scss/utility/index.scss

@@ -1,7 +1,5 @@
-@import 'generatedFiles/generatedStyles';
 @import 'display';
 @import 'layout';
 @import 'spacing';
-@import 'typography';
 @import 'flexbox';
 @import 'lists';

package/src/scss/utility/layout.scss

@@ -1,4 +1,11 @@
-@import "variables";
+@import "./variables";
+
+/*
+ * При добавлении утилитарных классов необходимо разделять переменные/формирование. Переменные хранятся в папке ./variables и также используются для формирования документации.
+ * Для всех утилитарных классов необходимо указывать !important
+ * Также, в данном файле необходимо указывать классы как без брейкпоинтов, так и с ними. Пример ниже.
+ * Чтобы утилитарные стили начали работать, необходимо экспортировать этот файл в index.scss, который в дальнейшем окажется в основном бандле.
+ */
 
 @each $name, $index in $z-indexes {
   .#{$name} {
@@ -6,6 +13,61 @@
   }
 }
 
-.cds-fullwidth {
-  width: 100%;
+@each $name, $value in $widthHeight {
+  .cds-h-#{$name} {
+    height: $value !important;
+  }
+
+  .cds-w-#{$name} {
+    width: $value !important;
+  }
+
+  .cds-max-h-#{$name} {
+    max-height: $value !important;
+  }
+
+  .cds-max-w-#{$name} {
+    max-width: $value !important;
+  }
+
+  .cds-min-h-#{$name} {
+    min-height: $value !important;
+  }
+
+  .cds-min-w-#{$name} {
+    min-width: $value !important;
+  }
+}
+
+
+@each $breakpoint, $map in $grid-breakpoints {
+  $width: map-get($map, 'width');
+
+  @media (min-width: $width) {
+    @each $name, $value in $widthHeight {
+      .#{$breakpoint}\:cds-w-#{$name} {
+        width: $value !important;
+      }
+
+      .#{$breakpoint}\:cds-min-w-#{$name} {
+        min-width: $value !important;
+      }
+
+      .#{$breakpoint}\:cds-max-w-#{$name} {
+        max-width: $value !important;
+      }
+
+      .#{$breakpoint}\:cds-h-#{$name} {
+        height: $value !important;
+      }
+
+      .#{$breakpoint}\:cds-min-h-#{$name} {
+        min-height: $value !important;
+      }
+
+      .#{$breakpoint}\:cds-max-h-#{$name} {
+        max-height: $value !important;
+      }
+    }
+  }
 }

package/src/scss/utility/spacing.scss

@@ -1,89 +1,49 @@
-@import "variables";
-
-@each $name, $space in $spaces {
-  .cds-pa-#{$name} {
-    padding: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-pt-#{$name} {
-    padding-top: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-pb-#{$name} {
-    padding-bottom: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-pr-#{$name} {
-    padding-right: $space !important;
+@import "./variables";
+
+/*
+ * При добавлении утилитарных классов необходимо разделять переменные/формирование. Переменные хранятся в папке ./variables и также используются для формирования документации.
+ * Для всех утилитарных классов необходимо указывать !important
+ * Также, в данном файле необходимо указывать классы как без брейкпоинтов, так и с ними. Пример ниже.
+ * Чтобы утилитарные стили начали работать, необходимо экспортировать этот файл в index.scss, который в дальнейшем окажется в основном бандле.
+ */
+
+// Базовые классы, без брейкпоинтов
+@each $abbr, $cssProp in map-merge($padding-map, $margin-map) {
+  @each $name, $space in $spaces {
+    @if type-of($cssProp) == 'list' {
+      .cds-#{$abbr}-#{$name} {
+        @each $prop in $cssProp {
+          #{$prop}: $space !important;
+        }
+      }
+    } @else {
+      .cds-#{$abbr}-#{$name} {
+        #{$cssProp}: $space !important;
+      }
+    }
+  }
+}
+
+// Классы с брейкпоинтами
+@each $breakpoint, $map in $grid-breakpoints {
+  $width: map-get($map, 'width');
+
+  @media (min-width: $width) {
+    @each $abbr, $cssProp in map-merge($padding-map, $margin-map) {
+      @each $name, $space in $spaces {
+        @if type-of($cssProp) == 'list' {
+          .#{$breakpoint}\:cds-#{$abbr}-#{$name} {
+            @each $prop in $cssProp {
+              #{$prop}: $space !important;
+            }
+          }
+        } @else {
+          .#{$breakpoint}\:cds-#{$abbr}-#{$name} {
+            #{$cssProp}: $space !important;
+          }
+        }
+      }
+    }
   }
 }
 
-@each $name, $space in $spaces {
-  .cds-pl-#{$name} {
-    padding-left: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-px-#{$name} {
-    padding-right: $space !important;
-    padding-left: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-py-#{$name} {
-    padding-top: $space !important;
-    padding-bottom: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-ma-#{$name} {
-    margin: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-mt-#{$name} {
-    margin-top: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-mb-#{$name} {
-    margin-bottom: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-mr-#{$name} {
-    margin-right: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-ml-#{$name} {
-    margin-left: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-mx-#{$name} {
-    margin-right: $space !important;
-    margin-left: $space !important;
-  }
-}
-
-@each $name, $space in $spaces {
-  .cds-my-#{$name} {
-    margin-top: $space !important;
-    margin-bottom: $space !important;
-  }
-}

package/src/scss/utility/variables/display.scss

@@ -0,0 +1,10 @@
+$displays: (
+  block: block,
+  inline-block: inline-block,
+  inline: inline,
+  flex: flex,
+  inline-flex: inline-flex,
+  table-row: table-row,
+  table-cell: table-cell,
+  none: none
+);

package/src/scss/utility/variables/exports/_display.scss

@@ -0,0 +1,7 @@
+@import "../display";
+
+:export {
+  @each $name, $value in $displays {
+    #{$name}: display/#{$value}
+  };
+};

package/src/scss/utility/variables/exports/_flex.scss

@@ -0,0 +1,13 @@
+@import "../flex";
+
+:export {
+  @each $key, $value in $flex-properties {
+    $prefix: map-get($value, 'name');
+    $propertyMap: map-get($value, 'map');
+    $cssProperty: map-get($value, 'property');
+
+    @each $name, $value in $propertyMap {
+      #{$prefix}#{$name}: #{$cssProperty}/#{$value}
+    }
+  }
+}

package/src/scss/utility/variables/exports/_overflow.scss

@@ -0,0 +1,7 @@
+@import "../overflow";
+
+:export {
+  @each $name, $value in $overflow {
+    #{$name}: #{overflow}/#{$value}
+  }
+}

package/src/scss/utility/variables/exports/_position.scss

@@ -0,0 +1,7 @@
+@import "../position";
+
+:export {
+  @each $name, $value in $positions {
+    #{$name}: #{position}/#{$value}
+  }
+}

package/src/scss/utility/variables/exports/_spacing.scss

@@ -0,0 +1,14 @@
+@use 'sass:list';
+@import "../spacing";
+
+:export {
+  @each $abbr, $cssProp in $padding-map {
+    @each $name, $space in $spaces {
+      @if type-of($cssProp) == 'list' {
+        #{$abbr}-#{$name}: list.nth($cssProp, 1)/#{$space}_ list.nth($cssProp, 2)/#{$space}
+      } @else {
+        #{$abbr}-#{$name}: #{$cssProp}/#{$space}
+      }
+    }
+  }
+}

package/src/scss/utility/variables/exports/_visibility.scss

@@ -0,0 +1,7 @@
+@import "../visibility";
+
+:export {
+  @each $name, $value in $visibility {
+    #{$name}: #{visibility}/#{$value}
+  }
+}

package/src/scss/utility/variables/exports/_widthHeight.scss

@@ -0,0 +1,7 @@
+@import "../widthHeight";
+
+:export {
+  @each $name, $value in $widthHeight {
+    w-#{$name}: #{width}/#{$value}
+  }
+}

package/src/scss/utility/variables/flex.scss

@@ -0,0 +1,140 @@
+$flex-direction: (
+  'flex-col': column,
+  'flex-row': row,
+  'flex-row-reverse': row-reverse,
+  'flex-col-reverse': column-reverse
+);
+
+$justify-content: (
+  'center': center,
+  'start': flex-start,
+  'end': flex-end,
+  'between': space-between,
+  'around': space-around,
+  'stretch': stretch
+);
+
+$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,
+);
+
+$align-self: (
+  'start': flex-start,
+  'end': flex-end,
+  'center': center,
+  'baseline': baseline,
+  'stretch': stretch,
+  'auto': auto,
+  'normal': normal,
+  'first-baseline': first baseline,
+  'last-baseline': last baseline
+);
+
+$flex-wrap: (
+  'wrap': wrap,
+  'nowrap': nowrap,
+  'wrap-reverse': wrap-reverse
+);
+
+$flex-grow: (
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3
+);
+
+$flex-shrink: (
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3
+);
+
+$flex-basis: (
+  'auto': auto,
+  '0': 0,
+  '10': 10%,
+  '20': 20%,
+  '30': 30%,
+  '40': 40%
+);
+
+$order: (
+  'first': -1,
+  '0': 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+  '5': 5,
+  '6': 6,
+  '7': 7,
+  'last': 999
+);
+
+$gap-sizes: (
+  '0': 0,
+  '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
+);
+
+$flex-properties: (
+  'direction': ('name': '', 'map': $flex-direction, 'property': 'flex-direction'),
+  'justify': ('name': 'justify-', 'map': $justify-content, 'property': 'justify-content'),
+  'items': ('name': 'items-', 'map': $align-items, 'property': 'align-items'),
+  'content': ('name': 'content-', 'map': $align-content, 'property': 'align-content'),
+  'flex': ('name': 'flex-', 'map': $flex-wrap, 'property': 'flex-wrap'),
+  'self': ('name': 'self-', 'map': $align-self, 'property': 'align-self'),
+  'grow': ('name': 'grow-', 'map': $flex-grow, 'property': 'flex-grow'),
+  'shrink': ('name': 'shrink-', 'map': $flex-shrink, 'property': 'flex-shrink'),
+  'basis': ('name': 'basis-', 'map': $flex-basis, 'property': 'flex-basis'),
+  'order': ('name': 'order-', 'map': $order, 'property': 'order'),
+  'gap': ('name': 'gap-', 'map': $gap-sizes, 'property': 'gap'),
+  'gap-y': ('name': 'gap-y-', 'map': $gap-sizes, 'property': 'row-gap'),
+  'gap-x': ('name': 'gap-x-', 'map': $gap-sizes, 'property': 'column-gap'),
+);

package/src/scss/utility/variables/index.scss

@@ -0,0 +1,11 @@
+@import "../../mixins/layout/layout";
+@import "../../mixins/layout/spacing";
+@import "../../mixins/typo";
+@import "../../modules/grid/_config";
+@import "visibility";
+@import "widthHeight";
+@import "display";
+@import "overflow";
+@import "position";
+@import "flex";
+@import "spacing";

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/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/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; }"