@central-design-system/components 3.0.0-beta.9 → 3.0.0-rc.1

package/src/scss/themes/cds/variables.css

@@ -1,4 +1,6 @@
 :root {
+  /* CDS 2 and less Variables */
+  /* DEPRECATED */
   --cds-border-element-01: 1px solid;
   --cds-border-element-02: 2px solid;
   --cds-border-radius-s: 3px;
@@ -65,37 +67,37 @@
   --cds-color-text-inverse: #ffffff;
   --cds-font-base: 16px;
   --cds-font-family-sans: Arial;
-  --cds-font-family-size: 0.875rem; /* Font size */
-  --cds-font-body-size-xs: 0.75rem; /* Font size */
-  --cds-font-body-size-s: 0.875rem; /* Font size */
-  --cds-font-body-size-m: 1rem; /* Font size */
-  --cds-font-body-size-l: 1.5rem; /* Font size */
-  --cds-font-heading-1: 2.625rem; /* Font size */
-  --cds-font-heading-2: 2rem; /* Font size */
-  --cds-font-heading-3: 1.75rem; /* Font size */
-  --cds-font-heading-4: 1.25rem; /* Font size */
-  --cds-font-heading-5: 1rem; /* Font size */
-  --cds-font-heading-6: 0.875rem; /* Font size */
-  --cds-font-heading-eyebrow: 0.625rem; /* Font size */
-  --cds-font-display-1: 4.375rem; /* Font size */
-  --cds-font-display-2: 3.375rem; /* Font size */
-  --cds-font-weight-bold: 700; /* Font Weight */
-  --cds-font-weight-semi-bold: 600; /* Font Weight */
-  --cds-font-weight-normal: 400; /* Font Weight */
-  --cds-font-weight-light: 300; /* Font Weight */
-  --cds-font-height-body: 145%; /* Line height */
-  --cds-font-height-heading: 120%; /* Line height */
-  --cds-font-height-display: 120%; /* Line height */
-  --cds-font-height-helper: 130%; /* Line height */
-  --cds-font-margin-heading-1: 0 0 1.5rem; /* Font margin */
-  --cds-font-margin-heading-2: 3rem 0 1rem; /* Font margin */
-  --cds-font-margin-heading-3: 2rem 0 1rem; /* Font margin */
-  --cds-font-margin-heading-4: 1.5rem 0 .75rem; /* Font margin */
-  --cds-font-margin-heading-5: 1rem 0 .5rem; /* Font margin */
-  --cds-font-margin-heading-6: 1rem 0 .5rem; /* Font margin */
-  --cds-font-margin-display-1: 0 0 1.5rem; /* Font margin */
-  --cds-font-margin-display-2: 0 0 1rem; /* Font margin */
-  --cds-font-margin-s: 0 0 1rem; /* Font margin */
+  --cds-font-family-size: 0.875rem;
+  --cds-font-body-size-xs: 0.75rem;
+  --cds-font-body-size-s: 0.875rem;
+  --cds-font-body-size-m: 1rem;
+  --cds-font-body-size-l: 1.5rem;
+  --cds-font-heading-1: 2.625rem;
+  --cds-font-heading-2: 2rem;
+  --cds-font-heading-3: 1.75rem;
+  --cds-font-heading-4: 1.25rem;
+  --cds-font-heading-5: 1rem;
+  --cds-font-heading-6: 0.875rem;
+  --cds-font-heading-eyebrow: 0.625rem;
+  --cds-font-display-1: 4.375rem;
+  --cds-font-display-2: 3.375rem;
+  --cds-font-weight-bold: 700;
+  --cds-font-weight-semi-bold: 600;
+  --cds-font-weight-normal: 400;
+  --cds-font-weight-light: 300;
+  --cds-font-height-body: 145%;
+  --cds-font-height-heading: 120%;
+  --cds-font-height-display: 120%;
+  --cds-font-height-helper: 130%;
+  --cds-font-margin-heading-1: 0 0 1.5rem;
+  --cds-font-margin-heading-2: 3rem 0 1rem;
+  --cds-font-margin-heading-3: 2rem 0 1rem;
+  --cds-font-margin-heading-4: 1.5rem 0 .75rem;
+  --cds-font-margin-heading-5: 1rem 0 .5rem;
+  --cds-font-margin-heading-6: 1rem 0 .5rem;
+  --cds-font-margin-display-1: 0 0 1.5rem;
+  --cds-font-margin-display-2: 0 0 1rem;
+  --cds-font-margin-s: 0 0 1rem;
   --cds-box-shadow-header: 0px 1px 4px rgba(0, 0, 0, 0.2);
   --cds-box-shadow-footer: 0px -1px 4px rgba(0, 0, 0, 0.2);
   --cds-box-shadow-sidebar-left: 1px 0px 4px rgba(0, 0, 0, 0.2);
@@ -103,4 +105,144 @@
   --cds-box-shadow-menu: 0px 2px 6px rgba(0, 0, 0, 0.2);
   --cds-box-shadow-modal: 0px 2px 6px rgba(0, 0, 0, 0.2);
   --cds-box-shadow-notification: 0px 2px 6px rgba(0, 0, 0, 0.2);
+
+  /* CDS 3.0 Beta Variables */
+  /* DEPRECATED */
+  --cds-theme-primary: 29, 110, 246;
+  --cds-theme-primary-overlay-multiplier: 1;
+  --cds-theme-primary-lighten-1: 215, 230, 255;
+  --cds-theme-primary-lighten-1-overlay-multiplier: 1;
+  --cds-theme-primary-lighten-2: 236, 241, 250;
+  --cds-theme-primary-lighten-2-overlay-multiplier: 1;
+  --cds-theme-secondary: 29, 110, 246;
+  --cds-theme-secondary-overlay-multiplier: 1;
+  --cds-theme-secondary-lighten-1: 215, 230, 255;
+  --cds-theme-secondary-lighten-1-overlay-multiplier: 1;
+  --cds-theme-secondary-lighten-2: 236, 241, 250;
+  --cds-theme-secondary-lighten-2-overlay-multiplier: 1;
+  --cds-theme-surface-primary: 255, 255, 255;
+  --cds-theme-surface-primary-overlay-multiplier: 1;
+  --cds-theme-surface-secondary: 245, 245, 245;
+  --cds-theme-surface-secondary-overlay-multiplier: 1;
+  --cds-theme-surface-inverse: 0, 0, 0;
+  --cds-theme-surface-inverse-overlay-multiplier: 2;
+  --cds-theme-surface-text: 29, 110, 246;
+  --cds-theme-surface-text-overlay-multiplier: 1;
+  --cds-theme-surface-disabled: 235, 235, 235;
+  --cds-theme-surface-disabled-overlay-multiplier: 1;
+  --cds-theme-surface-above: 255, 255, 255;
+  --cds-theme-surface-above-overlay-multiplier: 1;
+  --cds-theme-field-primary: 255, 255, 255;
+  --cds-theme-field-primary-overlay-multiplier: 1;
+  --cds-theme-field-secondary: 245, 245, 245;
+  --cds-theme-field-secondary-overlay-multiplier: 1;
+  --cds-theme-text-primary: 0, 0, 0;
+  --cds-theme-text-primary-overlay-multiplier: 2;
+  --cds-theme-text-secondary: 133, 133, 133;
+  --cds-theme-text-secondary-overlay-multiplier: 1;
+  --cds-theme-text-tertiary: 85, 85, 85;
+  --cds-theme-text-tertiary-overlay-multiplier: 2;
+  --cds-theme-text-inverse: 255, 255, 255;
+  --cds-theme-text-inverse-overlay-multiplier: 1;
+  --cds-theme-text-disabled: 133, 133, 133;
+  --cds-theme-text-disabled-overlay-multiplier: 1;
+  --cds-theme-text-above: 255, 255, 255;
+  --cds-theme-text-above-overlay-multiplier: 1;
+  --cds-theme-neutral-primary: 190, 190, 190;
+  --cds-theme-neutral-primary-overlay-multiplier: 1;
+  --cds-theme-neutral-primary-darken-1: 153, 153, 153;
+  --cds-theme-neutral-primary-darken-1-overlay-multiplier: 1;
+  --cds-theme-neutral-primary-darken-2: 133, 133, 133;
+  --cds-theme-neutral-primary-darken-2-overlay-multiplier: 1;
+  --cds-theme-neutral-secondary: 229, 229, 229;
+  --cds-theme-neutral-secondary-overlay-multiplier: 1;
+  --cds-theme-neutral-secondary-darken-1: 218, 218, 218;
+  --cds-theme-neutral-secondary-darken-1-overlay-multiplier: 1;
+  --cds-theme-neutral-interactive: 29, 110, 246;
+  --cds-theme-neutral-interactive-overlay-multiplier: 1;
+  --cds-theme-link: 29, 110, 246;
+  --cds-theme-link-overlay-multiplier: 1;
+  --cds-theme-link-visited: 123, 29, 246;
+  --cds-theme-link-visited-overlay-multiplier: 2;
+  --cds-theme-danger: 235, 0, 0;
+  --cds-theme-danger-overlay-multiplier: 2;
+  --cds-theme-danger-lighten-1: 253, 207, 207;
+  --cds-theme-danger-lighten-1-overlay-multiplier: 1;
+  --cds-theme-danger-lighten-2: 250, 236, 236;
+  --cds-theme-danger-lighten-2-overlay-multiplier: 1;
+  --cds-theme-warning: 255, 192, 0;
+  --cds-theme-warning-overlay-multiplier: 1;
+  --cds-theme-warning-lighten-1: 255, 241, 195;
+  --cds-theme-warning-lighten-1-overlay-multiplier: 1;
+  --cds-theme-warning-lighten-2: 255, 251, 241;
+  --cds-theme-warning-lighten-2-overlay-multiplier: 1;
+  --cds-theme-success: 26, 168, 0;
+  --cds-theme-success-overlay-multiplier: 1;
+  --cds-theme-success-lighten-1: 203, 239, 196;
+  --cds-theme-success-lighten-1-overlay-multiplier: 1;
+  --cds-theme-success-lighten-2: 238, 250, 236;
+  --cds-theme-success-lighten-2-overlay-multiplier: 1;
+  --cds-theme-info: 133, 133, 133;
+  --cds-theme-info-overlay-multiplier: 1;
+  --cds-theme-info-lighten-1: 235, 235, 235;
+  --cds-theme-info-lighten-1-overlay-multiplier: 1;
+  --cds-theme-info-lighten-2: 245, 245, 245;
+  --cds-theme-info-lighten-2-overlay-multiplier: 1;
+  --cds-theme-progress: 11, 126, 203;
+  --cds-theme-progress-overlay-multiplier: 1;
+  --cds-theme-progress-lighten-1: 210, 237, 255;
+  --cds-theme-progress-lighten-1-overlay-multiplier: 1;
+  --cds-theme-progress-lighten-2: 236, 244, 250;
+  --cds-theme-progress-lighten-2-overlay-multiplier: 1;
+  --cds-theme-primary-darken-1: 0, 86, 217;
+  --cds-theme-primary-darken-1-overlay-multiplier: 2;
+  --cds-theme-primary-darken-2: 0, 64, 189;
+  --cds-theme-primary-darken-2-overlay-multiplier: 2;
+  --cds-theme-on-primary: 255, 255, 255;
+  --cds-theme-on-primary-lighten-1: 0, 0, 0;
+  --cds-theme-on-primary-lighten-2: 0, 0, 0;
+  --cds-theme-on-secondary: 255, 255, 255;
+  --cds-theme-on-secondary-lighten-1: 0, 0, 0;
+  --cds-theme-on-secondary-lighten-2: 0, 0, 0;
+  --cds-theme-on-surface-primary: 0, 0, 0;
+  --cds-theme-on-surface-secondary: 0, 0, 0;
+  --cds-theme-on-surface-inverse: 255, 255, 255;
+  --cds-theme-on-surface-text: 255, 255, 255;
+  --cds-theme-on-surface-disabled: 0, 0, 0;
+  --cds-theme-on-surface-above: 0, 0, 0;
+  --cds-theme-on-field-primary: 0, 0, 0;
+  --cds-theme-on-field-secondary: 0, 0, 0;
+  --cds-theme-on-text-primary: 255, 255, 255;
+  --cds-theme-on-text-secondary: 255, 255, 255;
+  --cds-theme-on-text-tertiary: 255, 255, 255;
+  --cds-theme-on-text-inverse: 0, 0, 0;
+  --cds-theme-on-text-disabled: 255, 255, 255;
+  --cds-theme-on-text-above: 0, 0, 0;
+  --cds-theme-on-neutral-primary: 0, 0, 0;
+  --cds-theme-on-neutral-primary-darken-1: 255, 255, 255;
+  --cds-theme-on-neutral-primary-darken-2: 255, 255, 255;
+  --cds-theme-on-neutral-secondary: 0, 0, 0;
+  --cds-theme-on-neutral-secondary-darken-1: 0, 0, 0;
+  --cds-theme-on-neutral-interactive: 255, 255, 255;
+  --cds-theme-on-link: 255, 255, 255;
+  --cds-theme-on-link-visited: 255, 255, 255;
+  --cds-theme-on-danger: 255, 255, 255;
+  --cds-theme-on-danger-lighten-1: 0, 0, 0;
+  --cds-theme-on-danger-lighten-2: 0, 0, 0;
+  --cds-theme-on-warning: 0, 0, 0;
+  --cds-theme-on-warning-lighten-1: 0, 0, 0;
+  --cds-theme-on-warning-lighten-2: 0, 0, 0;
+  --cds-theme-on-success: 255, 255, 255;
+  --cds-theme-on-success-lighten-1: 0, 0, 0;
+  --cds-theme-on-success-lighten-2: 0, 0, 0;
+  --cds-theme-on-info: 255, 255, 255;
+  --cds-theme-on-info-lighten-1: 0, 0, 0;
+  --cds-theme-on-info-lighten-2: 0, 0, 0;
+  --cds-theme-on-progress: 255, 255, 255;
+  --cds-theme-on-progress-lighten-1: 0, 0, 0;
+  --cds-theme-on-progress-lighten-2: 0, 0, 0;
+  --cds-theme-on-primary-darken-1: 255, 255, 255;
+  --cds-theme-on-primary-darken-2: 255, 255, 255;
+  --cds-overlay-primary: rgba(85, 85, 85, 0.65);
+  --cds-overlay-secondary: rgba(245, 245, 245, 0.65);
 }

package/src/scss/themes/index.ts

@@ -1,6 +1,6 @@
 /**
  * Automatically generated by CDS CLI
- * Generated on 12/14/2023, 10:42:39 AM
+ * Generated on 11/12/2024, 3:41:44 PM
  **/
 
 /**

package/src/scss/utility/index.scss

@@ -3,3 +3,4 @@
 @import 'spacing';
 @import 'flexbox';
 @import 'lists';
+@import "typography";

package/src/scss/utility/lists.scss

@@ -25,7 +25,7 @@
     &:before {
       display: inline-block;
       position: absolute;
-      left: -($cds-spacing-xs);
+      left: calc($cds-spacing-xs * -1);
       margin-right: $cds-spacing-xs;
       margin-bottom: $cds-spacing-xxs;
     }

package/src/scss/utility/typography.scss

@@ -0,0 +1,63 @@
+@import "./variables";
+
+@each $type, $value in $typography {
+  .cds-text-#{$type} {
+    @each $name, $val in $value {
+      @if $name == 'size' {
+        font-size: $val !important;
+      } @else if $name == 'height' {
+        line-height: $val !important;
+      } @else if $name == 'weight' {
+        font-weight: $val !important;
+      }
+    }
+    font-family: var(--cds-font-family) !important;
+  }
+}
+
+@each $breakpoint, $map in $grid-breakpoints {
+  $breakpoint-width: map-get($map, 'width');
+
+  @media (min-width: $breakpoint-width) {
+    @each $type, $value in $typography {
+      .#{$breakpoint}\:cds-text-#{$type} {
+        @each $name, $val in $value {
+          @if $name == 'size' {
+            font-size: $val !important;
+          } @else if $name == 'height' {
+            line-height: $val !important;
+          } @else if $name == 'weight' {
+            font-weight: $val !important;
+          }
+        }
+        font-family: var(--cds-font-family-sans) !important;
+      }
+    }
+  }
+}
+
+@each $key, $value in $typography-properties {
+  $prefix: map-get($value, 'name');
+  $propertyMap: map-get($value, 'map');
+  $cssProperty: map-get($value, 'property');
+
+  // Без брейкпоинтов
+  @each $name, $propValue in $propertyMap {
+    .cds-#{$prefix}#{$name} {
+      #{$cssProperty}: $propValue !important;
+    }
+  }
+
+  // Брейкпоинты
+  @each $breakpoint, $map in $grid-breakpoints {
+    $width: map-get($map, 'width');
+
+    @media (min-width: $width) {
+      @each $name, $propValue in $propertyMap {
+        .#{$breakpoint}\:cds-#{$prefix}#{$name} {
+          #{$cssProperty}: $propValue !important;
+        }
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,22 @@
+@import "../typography";
+
+@each $name, $value in $typography {
+  .text-#{$name} {
+    font-size: map-get($value, 'size');
+    line-height: map-get($value, 'height');
+    font-weight: map-get($value, 'weight');
+  }
+}
+
+@each $key, $value in $typography-properties {
+  $prefix: map-get($value, 'name');
+  $propertyMap: map-get($value, 'map');
+  $cssProperty: map-get($value, 'property');
+
+  // Без брейкпоинтов
+  @each $name, $propValue in $propertyMap {
+    .#{$prefix}#{$name} {
+      #{$cssProperty}: $propValue;
+    }
+  }
+}

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

@@ -9,3 +9,4 @@
 @import "position";
 @import "flex";
 @import "spacing";
+@import "typography";

package/src/scss/utility/variables/typography.scss

@@ -0,0 +1,93 @@
+@import "../../mixins/typo";
+
+$xs: ('size': var(--cds-font-size-100), 'height': var(--cds-font-line-height-200), 'weight': var(--cds-font-weight-regular));
+$sm: ('size': var(--cds-font-size-200), 'height': var(--cds-font-line-height-300), 'weight': var(--cds-font-weight-regular));
+$md: ('size': var(--cds-font-size-300), 'height': var(--cds-font-line-height-400), 'weight': var(--cds-font-weight-regular));
+$lg: ('size': var(--cds-font-size-500), 'height': var(--cds-font-line-height-400), 'weight': var(--cds-font-weight-regular));
+$h1: ('size': var(--cds-font-size-800), 'height': var(--cds-font-line-height-800), 'weight': var(--cds-font-weight-regular));
+$h2: ('size': var(--cds-font-size-700), 'height': var(--cds-font-line-height-700), 'weight': var(--cds-font-weight-regular));
+$h3: ('size': var(--cds-font-size-600), 'height': var(--cds-font-line-height-600), 'weight': var(--cds-font-weight-regular));
+$h4: ('size': var(--cds-font-size-400), 'height': var(--cds-font-line-height-400), 'weight': var(--cds-font-weight-bold));
+$h5: ('size': var(--cds-font-size-300), 'height': var(--cds-font-line-height-400), 'weight': var(--cds-font-weight-bold));
+$h6: ('size': var(--cds-font-size-200), 'height': var(--cds-font-line-height-300), 'weight': var(--cds-font-weight-bold));
+$display1: ('size': var(--cds-font-size-1100), 'height': var(--cds-font-line-height-1000), 'weight': var(--cds-font-weight-bold));
+$display2: ('size': var(--cds-font-size-1000), 'height': var(--cds-font-line-height-1100), 'weight': var(--cds-font-weight-bold));
+
+$typography: (
+  'h1': $h1,
+  'h2': $h2,
+  'h3': $h3,
+  'h4': $h4,
+  'h5': $h5,
+  'h6': $h6,
+  'xs': $xs,
+  'sm': $sm,
+  'md': $md,
+  'lg': $lg,
+  'display-1': $display1,
+  'display-2': $display2
+);
+
+$font-weight: (
+  'normal': normal,
+  'bold': bold,
+  '100': 100,
+  '200': 200,
+  '300': 300,
+  '400': 400,
+  '500': 500,
+  '600': 600,
+  '700': 700,
+  '800': 800,
+  '900': 900
+);
+
+$font-style: (
+  'normal': normal,
+  'italic': italic,
+  'oblique': oblique
+);
+
+$text-align: (
+  'left': left,
+  'right': right,
+  'center': center,
+  'justify': justify
+);
+
+$text-decoration: (
+  'none': none,
+  'underline': underline,
+  'overline': overline,
+  'line-through': line-through
+);
+
+$text-transform: (
+  'none': none,
+  'capitalize': capitalize,
+  'uppercase': uppercase,
+  'lowercase': lowercase
+);
+
+$line-height: (
+  'normal': normal,
+  '1': 1,
+  '2': 2
+);
+
+$letter-spacing: (
+  'normal': normal,
+  'tight': -0.05em,
+  0: 0,
+  'wide': 0.05em
+);
+
+$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/themes/b2bDark.ts

@@ -0,0 +1,191 @@
+import colors from './colors';
+
+export default {
+  dark: true,
+  colors: {
+    'surface-secondary': colors.silver.dark25,
+    'surface-primary': colors.silver.dark10,
+    'surface-overlay': colors.alpha.dark800,
+    'surface-inverse': colors.silver.dark900,
+    'surface-elevated': colors.silver.dark25,
+    'status-warning-surface': colors.yellow.dark600,
+    'status-warning-line': colors.yellow.dark500,
+    'status-warning-fill-hover': colors.yellow.dark200,
+    'status-warning-fill': colors.yellow.dark50,
+    'status-warning-content': colors.yellow.dark900,
+    'status-success-surface': colors.green.dark600,
+    'status-success-line': colors.green.dark500,
+    'status-success-fill-hover': colors.green.dark200,
+    'status-success-fill': colors.green.dark50,
+    'status-success-content': colors.green.dark900,
+    'status-progress-surface': colors.sky.dark600,
+    'status-progress-line': colors.sky.dark500,
+    'status-progress-fill-hover': colors.sky.dark200,
+    'status-progress-fill': colors.sky.dark50,
+    'status-progress-content': colors.sky.dark900,
+    'status-info-surface': colors.silver.dark600,
+    'status-info-line': colors.silver.dark500,
+    'status-info-fill-hover': colors.silver.dark200,
+    'status-info-fill': colors.silver.dark50,
+    'status-info-content': colors.silver.dark900,
+    'status-indication-surface': colors.red.dark700,
+    'status-indication-line': colors.red.dark700,
+    'status-indication-fill-hover': colors.red.dark200,
+    'status-indication-fill': colors.red.dark50,
+    'status-indication-content': colors.red.dark900,
+    'status-danger-surface': colors.red.dark700,
+    'status-danger-line': colors.red.dark700,
+    'status-danger-fill-hover': colors.red.dark200,
+    'status-danger-fill': colors.red.dark50,
+    'status-danger-content': colors.red.dark900,
+    'page-primary': colors.gray.dark0,
+    'other-teal-surface': colors.teal.dark600,
+    'other-teal-line': colors.teal.dark500,
+    'other-teal-fill-hover': colors.teal.dark200,
+    'other-teal-fill': colors.teal.dark50,
+    'other-teal-content': colors.teal.dark950,
+    'other-purple-surface': colors.purple.dark600,
+    'other-purple-line': colors.purple.dark500,
+    'other-purple-fill-hover': colors.purple.dark200,
+    'other-purple-fill': colors.purple.dark50,
+    'other-purple-content': colors.purple.dark950,
+    'other-pink-surface': colors.pink.dark600,
+    'other-pink-line': colors.pink.dark500,
+    'other-pink-fill-hover': colors.pink.dark200,
+    'other-pink-fill': colors.pink.dark50,
+    'other-pink-content': colors.pink.dark950,
+    'other-lime-surface': colors.lime.dark600,
+    'other-lime-line': colors.lime.dark500,
+    'other-lime-fill-hover': colors.lime.dark200,
+    'other-lime-fill': colors.lime.dark50,
+    'other-lime-content': colors.lime.dark950,
+    'other-lemon-surface': colors.lemon.dark600,
+    'other-lemon-line': colors.lemon.dark500,
+    'other-lemon-fill-hover': colors.lemon.dark200,
+    'other-lemon-fill': colors.lemon.dark50,
+    'other-lemon-content': colors.lemon.dark950,
+    'other-indigo-surface': colors.indigo.dark600,
+    'other-indigo-line': colors.indigo.dark500,
+    'other-indigo-fill-hover': colors.indigo.dark200,
+    'other-indigo-fill': colors.indigo.dark50,
+    'other-indigo-content': colors.indigo.dark950,
+    'other-cyan-surface': colors.cyan.dark600,
+    'other-cyan-line': colors.cyan.dark500,
+    'other-cyan-fill-hover': colors.cyan.dark200,
+    'other-cyan-fill': colors.cyan.dark50,
+    'other-cyan-content': colors.cyan.dark950,
+    'other-chocolate-surface': colors.chocolate.dark600,
+    'other-chocolate-line': colors.chocolate.dark500,
+    'other-chocolate-fill-hover': colors.chocolate.dark200,
+    'other-chocolate-fill': colors.chocolate.dark50,
+    'other-chocolate-content': colors.chocolate.dark950,
+    'line-tertiary-hover': colors.silver.dark300,
+    'line-tertiary': colors.silver.dark100,
+    'line-selected-hover': colors.blue.dark700,
+    'line-selected': colors.blue.dark500,
+    'line-secondary-hover': colors.silver.dark500,
+    'line-secondary': colors.silver.dark300,
+    'line-primary-hover': colors.silver.dark700,
+    'line-primary': colors.silver.dark500,
+    'line-focus-outline': colors.blue.dark100,
+    'line-focus': colors.blue.dark500,
+    'line-elevated': colors.alpha.silver400,
+    'line-disable': colors.silver.dark200,
+    'fill-selected-hover': colors.blue.dark700,
+    'fill-selected': colors.blue.dark500,
+    'fill-secondary-hover': colors.silver.dark100,
+    'fill-secondary-active': colors.silver.dark200,
+    'fill-secondary': colors.silver.dark50,
+    'fill-primary-hover': colors.silver.dark50,
+    'fill-primary-active': colors.silver.dark100,
+    'fill-primary': colors.silver.dark10,
+    'fill-elevated': colors.silver.dark300,
+    'fill-disable': colors.silver.dark50,
+    'content-tertiary': colors.silver.dark700,
+    'content-secondary': colors.silver.dark800,
+    'content-primary': colors.silver.dark950,
+    'content-placeholder': colors.silver.dark600,
+    'content-on-dark': colors.gray.dark1000,
+    'content-link-visited': colors.purple.dark700,
+    'content-link': colors.blue.dark700,
+    'content-inverse': colors.gray.dark0,
+    'content-disable': colors.silver.dark500,
+    'brand-secondary-hover': colors.sky.dark50,
+    'brand-secondary-border': colors.sky.dark100,
+    'brand-secondary-active': colors.sky.dark100,
+    'brand-secondary': colors.sky.dark10,
+    'brand-primary-hover': colors.sky.dark100,
+    'brand-primary-content': colors.sky.dark900,
+    'brand-primary-border': colors.sky.dark300,
+    'brand-primary-active': colors.sky.dark50,
+    'brand-primary': colors.sky.dark300
+  },
+  variables: {
+    'spacing-900': '4rem',
+    'spacing-800': '3rem',
+    'spacing-700': '2.5rem',
+    'spacing-600': '2rem',
+    'spacing-500': '1.5rem',
+    'spacing-50': '0.125rem',
+    'spacing-400': '1rem',
+    'spacing-300': '0.75rem',
+    'spacing-200': '0.5rem',
+    'spacing-1100': '6rem',
+    'spacing-1000': '5rem',
+    'spacing-100': '0.25rem',
+    'shadow-y-minus-400': '0rem',
+    'shadow-y-minus-300': '0rem',
+    'shadow-y-minus-200': '0rem',
+    'shadow-y-minus-100': '0rem',
+    'shadow-y-400': '0rem',
+    'shadow-y-300': '0rem',
+    'shadow-y-200': '0rem',
+    'shadow-y-100': '0rem',
+    'shadow-x-minus-400': '0rem',
+    'shadow-x-minus-300': '0rem',
+    'shadow-x-minus-200': '0rem',
+    'shadow-x-minus-100': '0rem',
+    'shadow-x-400': '0rem',
+    'shadow-x-300': '0rem',
+    'shadow-x-200': '0rem',
+    'shadow-x-100': '0rem',
+    'shadow-blur-400': '0rem',
+    'shadow-blur-300': '0rem',
+    'shadow-blur-200': '0rem',
+    'shadow-blur-100': '0rem',
+    'font-weight-regular': 400,
+    'font-weight-bold': 700,
+    'font-size-900': '3.25rem',
+    'font-size-800': '2.75rem',
+    'font-size-700': '2.25rem',
+    'font-size-600': '1.75rem',
+    'font-size-500': '1.5rem',
+    'font-size-50': '0.625rem',
+    'font-size-400': '1.25rem',
+    'font-size-300': '1rem',
+    'font-size-200': '0.875rem',
+    'font-size-1100': '4.5rem',
+    'font-size-1000': '3.75rem',
+    'font-size-100': '0.75rem',
+    'font-line-height-900': '4rem',
+    'font-line-height-800': '3rem',
+    'font-line-height-700': '2.5rem',
+    'font-line-height-600': '2rem',
+    'font-line-height-500': '1.75rem',
+    'font-line-height-50': '0.75rem',
+    'font-line-height-400': '1.5rem',
+    'font-line-height-300': '1.25rem',
+    'font-line-height-200': '1rem',
+    'font-line-height-1100': '5.5rem',
+    'font-line-height-1000': '4.5rem',
+    'font-line-height-100': '0.875rem',
+    'font-letter-spacing-500': '0.0625rem',
+    'font-family': 'Arial',
+    'border-radius-300': '0.5rem',
+    'border-radius-200': '0.25rem',
+    'border-radius-100': '0.125rem',
+    'border-200': '0.125rem',
+    'border-100': '0.0625rem',
+    'base-unit': '16px'
+  }
+};