@times-design-system/theme-scss 1.1.1-alpha.831

package/dist/palettes/_uk-light.scss

@@ -0,0 +1,148 @@
+$tds-surface-undercanvas: #f2f2f2;
+$tds-surface-canvas: #ffffff;
+$tds-surface-level-1: #ffffff;
+$tds-surface-level-2: #ffffff;
+$tds-surface-level-3: #ffffff;
+$tds-surface-level-4: #ffffff;
+$tds-surface-inverse: #000000;
+$tds-surface-overlay: rgba(0, 0, 0, 0.45);
+$tds-surface-channel-high: #556d7f;
+$tds-surface-channel-medium: #c1c1c1;
+$tds-surface-channel-low: #f2f2f2;
+$tds-surface-static-dark: #000000;
+$tds-surface-static-light: #ffffff;
+$tds-text-primary: #1a1a1a;
+$tds-text-secondary: #404040;
+$tds-text-tertiary: #737373;
+$tds-text-inverse-primary: #ffffff;
+$tds-text-inverse-secondary: #8c8c8c;
+$tds-text-channel-primary: #3b3b3b;
+$tds-text-channel-secondary: #556d7f;
+$tds-text-static-dark: #000000;
+$tds-text-static-light: #ffffff;
+$tds-icon-primary: #1a1a1a;
+$tds-icon-secondary: #404040;
+$tds-icon-tertiary: #737373;
+$tds-icon-inverse-primary: #ffffff;
+$tds-icon-inverse-secondary: #8c8c8c;
+$tds-icon-channel-primary: #556d7f;
+$tds-icon-channel-secondary: #676767;
+$tds-border-primary: #a6a6a6;
+$tds-border-secondary: #cccccc;
+$tds-border-tertiary: #e6e6e6;
+$tds-border-inverse-primary: #ffffff;
+$tds-border-inverse-secondary: #8c8c8c;
+$tds-border-channel-primary: #5e5e5e;
+$tds-border-channel-secondary: #8b8b8b;
+$tds-border-channel-tertiary: #c1c1c1;
+$tds-border-elevation: #e6e6e6;
+$tds-border-static-dark: #000000;
+$tds-border-static-light: #ffffff;
+$tds-input-fill-default: #ffffff;
+$tds-input-fill-error: #fff9f9;
+$tds-input-fill-hover: #e6e6e6;
+$tds-input-fill-active: #d9d9d9;
+$tds-input-fill-completed: #f4fafc;
+$tds-input-fill-success: #f4fafc;
+$tds-input-fill-warning: #f2fff6;
+$tds-input-fill-info: #f0f0f0;
+$tds-input-border-default: #333333;
+$tds-input-border-error: #b30000;
+$tds-input-border-hover: #404040;
+$tds-input-border-active: #262626;
+$tds-input-border-completed: #3db2c5;
+$tds-input-border-success: #3db2c5;
+$tds-input-border-warning: #26ff68;
+$tds-input-border-info: #0f4aa2;
+$tds-input-text-default: #737373;
+$tds-input-text-error: #800000;
+$tds-input-text-hover: #000000;
+$tds-input-text-active: #000000;
+$tds-input-text-completed: #1d5962;
+$tds-input-text-success: #1d5962;
+$tds-input-text-warning: #00992e;
+$tds-input-text-info: #090909;
+$tds-input-icon-default: #737373;
+$tds-input-icon-hover: #000000;
+$tds-input-icon-active: #000000;
+$tds-input-icon-completed: #1d5962;
+$tds-input-icon-error: #800000;
+$tds-input-icon-success: #1d5962;
+$tds-input-icon-warning: #00992e;
+$tds-input-icon-info: #090909;
+$tds-feedback-fill-error: #fff9f9;
+$tds-feedback-fill-success: #f4fafc;
+$tds-feedback-fill-warning: #f2fff6;
+$tds-feedback-fill-info: #f0f0f0;
+$tds-feedback-text-error: #800000;
+$tds-feedback-text-success: #1d5962;
+$tds-feedback-text-warning: #00992e;
+$tds-feedback-text-info: #090909;
+$tds-feedback-border-error: #b30000;
+$tds-feedback-border-success: #3db2c5;
+$tds-feedback-border-warning: #26ff68;
+$tds-feedback-border-info: #0f4aa2;
+$tds-feedback-icon-error: #800000;
+$tds-feedback-icon-success: #1d5962;
+$tds-feedback-icon-warning: #00992e;
+$tds-feedback-icon-info: #090909;
+$tds-interactive-primary-fill-default: #005c8a;
+$tds-interactive-primary-fill-hover: #005c8a;
+$tds-interactive-primary-fill-pressed: #005c8a;
+$tds-interactive-primary-text-default: #000000;
+$tds-interactive-primary-text-hover: #000000;
+$tds-interactive-primary-text-pressed: #000000;
+$tds-interactive-primary-icon-default: #000000;
+$tds-interactive-primary-icon-hover: #000000;
+$tds-interactive-primary-icon-pressed: #000000;
+$tds-interactive-secondary-fill-default: #ffffff;
+$tds-interactive-secondary-fill-hover: #ffffff;
+$tds-interactive-secondary-fill-pressed: #ffffff;
+$tds-interactive-secondary-border-default: #000000;
+$tds-interactive-secondary-border-hover: #000000;
+$tds-interactive-secondary-border-pressed: #000000;
+$tds-interactive-secondary-text-default: #404040;
+$tds-interactive-secondary-text-hover: #404040;
+$tds-interactive-secondary-text-pressed: #404040;
+$tds-interactive-secondary-icon-default: #404040;
+$tds-interactive-secondary-icon-hover: #404040;
+$tds-interactive-secondary-icon-pressed: #404040;
+$tds-interactive-disabled-a: #d9d9d9;
+$tds-interactive-disabled-b: #bfbfbf;
+$tds-interactive-disabled-c: #a6a6a6;
+$tds-interactive-link-primary-default: #005c8a;
+$tds-interactive-link-primary-hover: #005c8a;
+$tds-interactive-link-primary-pressed: #005c8a;
+$tds-interactive-link-secondary-default: #737373;
+$tds-interactive-link-secondary-hover: #737373;
+$tds-interactive-link-secondary-pressed: #737373;
+$tds-selection-background: #000000;
+$tds-selection-text: #f2f2f2;
+$tds-selected-fill-default: #000000;
+$tds-selected-fill-hover: #000000;
+$tds-selected-fill-pressed: #000000;
+$tds-selected-text-default: #ffffff;
+$tds-selected-text-hover: #ffffff;
+$tds-selected-text-pressed: #ffffff;
+$tds-selected-border-default: #000000;
+$tds-selected-border-hover: #000000;
+$tds-selected-border-pressed: #000000;
+$tds-selected-icon-default: #ffffff;
+$tds-selected-icon-hover: #ffffff;
+$tds-selected-icon-pressed: #ffffff;
+$tds-active-fill: #000000;
+$tds-active-text: #ffffff;
+$tds-active-border: #000000;
+$tds-active-icon: #ffffff;
+$tds-focus-border: #737373;
+$tds-tag-filled-live-fill: #b30000;
+$tds-tag-filled-live-text: #ffffff;
+$tds-tag-filled-primary-fill: #556d7f;
+$tds-tag-filled-primary-text: #ffffff;
+$tds-tag-filled-secondary-border: #f2f2f2;
+$tds-tag-filled-secondary-fill: #f2f2f2;
+$tds-tag-filled-secondary-text: #f2f2f2;
+$tds-tag-inline-live-text: #b30000;
+$tds-tag-inline-primary-text: #556d7f;
+$tds-tag-inline-secondary-text: #f2f2f2;
+$tds-tag-channel-text: #8b8b8b;

package/dist/palettes/_world-dark.scss

@@ -0,0 +1,148 @@
+$tds-surface-undercanvas: #1a1a1a;
+$tds-surface-canvas: #0d0d0d;
+$tds-surface-level-1: #0d0d0d;
+$tds-surface-level-2: #1a1a1a;
+$tds-surface-level-3: #262626;
+$tds-surface-level-4: #1a1a1a;
+$tds-surface-inverse: #ffffff;
+$tds-surface-overlay: rgba(0, 0, 0, 0.55);
+$tds-surface-channel-high: #0000a3;
+$tds-surface-channel-medium: #000063;
+$tds-surface-channel-low: #000032;
+$tds-surface-static-dark: #000000;
+$tds-surface-static-light: #ffffff;
+$tds-text-primary: #ffffff;
+$tds-text-secondary: #d9d9d9;
+$tds-text-tertiary: #a6a6a6;
+$tds-text-inverse-primary: #000000;
+$tds-text-inverse-secondary: #737373;
+$tds-text-channel-primary: #0404ff;
+$tds-text-channel-secondary: #0000b6;
+$tds-text-static-dark: #000000;
+$tds-text-static-light: #ffffff;
+$tds-icon-primary: #ffffff;
+$tds-icon-secondary: #d9d9d9;
+$tds-icon-tertiary: #a6a6a6;
+$tds-icon-inverse-primary: #000000;
+$tds-icon-inverse-secondary: #737373;
+$tds-icon-channel-primary: #000070;
+$tds-icon-channel-secondary: #00008f;
+$tds-border-primary: #595959;
+$tds-border-secondary: #333333;
+$tds-border-tertiary: #1a1a1a;
+$tds-border-inverse-primary: #000000;
+$tds-border-inverse-secondary: #737373;
+$tds-border-channel-primary: #000070;
+$tds-border-channel-secondary: #00004a;
+$tds-border-channel-tertiary: #000032;
+$tds-border-elevation: #333333;
+$tds-border-static-dark: #000000;
+$tds-border-static-light: #ffffff;
+$tds-tag-filled-live-fill: #ff0000;
+$tds-tag-filled-live-text: #0d0d0d;
+$tds-tag-filled-primary-fill: #0000c9;
+$tds-tag-filled-primary-text: #0d0d0d;
+$tds-tag-filled-secondary-border: #0d0d0d;
+$tds-tag-filled-secondary-fill: #0d0d0d;
+$tds-tag-filled-secondary-text: #0d0d0d;
+$tds-tag-inline-live-text: #ff0000;
+$tds-tag-inline-primary-text: #0000c9;
+$tds-tag-inline-secondary-text: #0d0d0d;
+$tds-tag-channel-text: #00787c;
+$tds-input-fill-default: #000000;
+$tds-input-fill-error: #1a0000;
+$tds-input-fill-hover: #1a1a1a;
+$tds-input-fill-active: #262626;
+$tds-input-fill-completed: #76c8d6;
+$tds-input-fill-success: #050f10;
+$tds-input-fill-warning: #001a08;
+$tds-input-fill-info: #010101;
+$tds-input-border-default: #8c8c8c;
+$tds-input-border-error: #ff4040;
+$tds-input-border-hover: #595959;
+$tds-input-border-active: #737373;
+$tds-input-border-completed: #48b6c8;
+$tds-input-border-success: #53bbcc;
+$tds-input-border-warning: #40ff79;
+$tds-input-border-info: #1a1a1a;
+$tds-input-text-default: #a6a6a6;
+$tds-input-text-error: #ff4040;
+$tds-input-text-hover: #ffffff;
+$tds-input-text-active: #ffffff;
+$tds-input-text-completed: #0a1e21;
+$tds-input-text-success: #53bbcc;
+$tds-input-text-warning: #40ff79;
+$tds-input-text-info: #1a1a1a;
+$tds-input-icon-default: #a6a6a6;
+$tds-input-icon-hover: #ffffff;
+$tds-input-icon-active: #ffffff;
+$tds-input-icon-completed: #0a1e21;
+$tds-input-icon-error: #ff4040;
+$tds-input-icon-success: #53bbcc;
+$tds-input-icon-warning: #40ff79;
+$tds-input-icon-info: #1a1a1a;
+$tds-feedback-fill-error: #1a0000;
+$tds-feedback-fill-success: #050f10;
+$tds-feedback-fill-warning: #001a08;
+$tds-feedback-fill-info: #010101;
+$tds-feedback-text-error: #ff4040;
+$tds-feedback-text-success: #53bbcc;
+$tds-feedback-text-warning: #40ff79;
+$tds-feedback-text-info: #1a1a1a;
+$tds-feedback-border-error: #ff4040;
+$tds-feedback-border-success: #53bbcc;
+$tds-feedback-border-warning: #40ff79;
+$tds-feedback-border-info: #1a1a1a;
+$tds-feedback-icon-error: #ff4040;
+$tds-feedback-icon-success: #53bbcc;
+$tds-feedback-icon-warning: #40ff79;
+$tds-feedback-icon-info: #1a1a1a;
+$tds-interactive-primary-fill-default: #000000;
+$tds-interactive-primary-fill-hover: #000000;
+$tds-interactive-primary-fill-pressed: #000000;
+$tds-interactive-primary-text-default: #ffffff;
+$tds-interactive-primary-text-hover: #ffffff;
+$tds-interactive-primary-text-pressed: #ffffff;
+$tds-interactive-primary-icon-default: #ffffff;
+$tds-interactive-primary-icon-hover: #ffffff;
+$tds-interactive-primary-icon-pressed: #ffffff;
+$tds-interactive-secondary-fill-default: #000000;
+$tds-interactive-secondary-fill-hover: #000000;
+$tds-interactive-secondary-fill-pressed: #000000;
+$tds-interactive-secondary-border-default: #8c8c8c;
+$tds-interactive-secondary-border-hover: #8c8c8c;
+$tds-interactive-secondary-border-pressed: #8c8c8c;
+$tds-interactive-secondary-text-default: #d9d9d9;
+$tds-interactive-secondary-text-hover: #d9d9d9;
+$tds-interactive-secondary-text-pressed: #d9d9d9;
+$tds-interactive-secondary-icon-default: #d9d9d9;
+$tds-interactive-secondary-icon-hover: #d9d9d9;
+$tds-interactive-secondary-icon-pressed: #d9d9d9;
+$tds-interactive-disabled-a: #262626;
+$tds-interactive-disabled-b: #404040;
+$tds-interactive-disabled-c: #595959;
+$tds-interactive-link-primary-default: #0d0d0d;
+$tds-interactive-link-primary-hover: #0d0d0d;
+$tds-interactive-link-primary-pressed: #0d0d0d;
+$tds-interactive-link-secondary-default: #8c8c8c;
+$tds-interactive-link-secondary-hover: #8c8c8c;
+$tds-interactive-link-secondary-pressed: #8c8c8c;
+$tds-focus-border: #8c8c8c;
+$tds-selection-background: #ffffff;
+$tds-selection-text: #000000;
+$tds-selected-fill-default: #ffffff;
+$tds-selected-fill-hover: #ffffff;
+$tds-selected-fill-pressed: #ffffff;
+$tds-selected-text-default: #000000;
+$tds-selected-text-hover: #000000;
+$tds-selected-text-pressed: #000000;
+$tds-selected-border-default: #ffffff;
+$tds-selected-border-hover: #ffffff;
+$tds-selected-border-pressed: #ffffff;
+$tds-selected-icon-default: #000000;
+$tds-selected-icon-hover: #000000;
+$tds-selected-icon-pressed: #000000;
+$tds-active-fill: #ffffff;
+$tds-active-text: #000000;
+$tds-active-border: #ffffff;
+$tds-active-icon: #000000;

package/dist/palettes/_world-light.scss

@@ -0,0 +1,148 @@
+$tds-surface-undercanvas: #f2f2f2;
+$tds-surface-canvas: #ffffff;
+$tds-surface-level-1: #ffffff;
+$tds-surface-level-2: #ffffff;
+$tds-surface-level-3: #ffffff;
+$tds-surface-level-4: #ffffff;
+$tds-surface-inverse: #000000;
+$tds-surface-overlay: rgba(0, 0, 0, 0.45);
+$tds-surface-channel-high: #00787c;
+$tds-surface-channel-medium: #7878ff;
+$tds-surface-channel-low: #e2e2ff;
+$tds-surface-static-dark: #000000;
+$tds-surface-static-light: #ffffff;
+$tds-text-primary: #1a1a1a;
+$tds-text-secondary: #404040;
+$tds-text-tertiary: #737373;
+$tds-text-inverse-primary: #ffffff;
+$tds-text-inverse-secondary: #8c8c8c;
+$tds-text-channel-primary: #000057;
+$tds-text-channel-secondary: #00787c;
+$tds-text-static-dark: #000000;
+$tds-text-static-light: #ffffff;
+$tds-icon-primary: #1a1a1a;
+$tds-icon-secondary: #404040;
+$tds-icon-tertiary: #737373;
+$tds-icon-inverse-primary: #ffffff;
+$tds-icon-inverse-secondary: #8c8c8c;
+$tds-icon-channel-primary: #00787c;
+$tds-icon-channel-secondary: #0000b6;
+$tds-border-primary: #a6a6a6;
+$tds-border-secondary: #cccccc;
+$tds-border-tertiary: #e6e6e6;
+$tds-border-inverse-primary: #ffffff;
+$tds-border-inverse-secondary: #8c8c8c;
+$tds-border-channel-primary: #000099;
+$tds-border-channel-secondary: #0404ff;
+$tds-border-channel-tertiary: #7878ff;
+$tds-border-elevation: #e6e6e6;
+$tds-border-static-dark: #000000;
+$tds-border-static-light: #ffffff;
+$tds-input-fill-default: #ffffff;
+$tds-input-fill-error: #fff9f9;
+$tds-input-fill-hover: #e6e6e6;
+$tds-input-fill-active: #d9d9d9;
+$tds-input-fill-completed: #f4fafc;
+$tds-input-fill-success: #f4fafc;
+$tds-input-fill-warning: #f2fff6;
+$tds-input-fill-info: #f0f0f0;
+$tds-input-border-default: #333333;
+$tds-input-border-error: #b30000;
+$tds-input-border-hover: #404040;
+$tds-input-border-active: #262626;
+$tds-input-border-completed: #3db2c5;
+$tds-input-border-success: #3db2c5;
+$tds-input-border-warning: #26ff68;
+$tds-input-border-info: #0f4aa2;
+$tds-input-text-default: #737373;
+$tds-input-text-error: #800000;
+$tds-input-text-hover: #000000;
+$tds-input-text-active: #000000;
+$tds-input-text-completed: #1d5962;
+$tds-input-text-success: #1d5962;
+$tds-input-text-warning: #00992e;
+$tds-input-text-info: #090909;
+$tds-input-icon-default: #737373;
+$tds-input-icon-hover: #000000;
+$tds-input-icon-active: #000000;
+$tds-input-icon-completed: #1d5962;
+$tds-input-icon-error: #800000;
+$tds-input-icon-success: #1d5962;
+$tds-input-icon-warning: #00992e;
+$tds-input-icon-info: #090909;
+$tds-feedback-fill-error: #fff9f9;
+$tds-feedback-fill-success: #f4fafc;
+$tds-feedback-fill-warning: #f2fff6;
+$tds-feedback-fill-info: #f0f0f0;
+$tds-feedback-text-error: #800000;
+$tds-feedback-text-success: #1d5962;
+$tds-feedback-text-warning: #00992e;
+$tds-feedback-text-info: #090909;
+$tds-feedback-border-error: #b30000;
+$tds-feedback-border-success: #3db2c5;
+$tds-feedback-border-warning: #26ff68;
+$tds-feedback-border-info: #0f4aa2;
+$tds-feedback-icon-error: #800000;
+$tds-feedback-icon-success: #1d5962;
+$tds-feedback-icon-warning: #00992e;
+$tds-feedback-icon-info: #090909;
+$tds-interactive-primary-fill-default: #005c8a;
+$tds-interactive-primary-fill-hover: #005c8a;
+$tds-interactive-primary-fill-pressed: #005c8a;
+$tds-interactive-primary-text-default: #000000;
+$tds-interactive-primary-text-hover: #000000;
+$tds-interactive-primary-text-pressed: #000000;
+$tds-interactive-primary-icon-default: #000000;
+$tds-interactive-primary-icon-hover: #000000;
+$tds-interactive-primary-icon-pressed: #000000;
+$tds-interactive-secondary-fill-default: #ffffff;
+$tds-interactive-secondary-fill-hover: #ffffff;
+$tds-interactive-secondary-fill-pressed: #ffffff;
+$tds-interactive-secondary-border-default: #000000;
+$tds-interactive-secondary-border-hover: #000000;
+$tds-interactive-secondary-border-pressed: #000000;
+$tds-interactive-secondary-text-default: #404040;
+$tds-interactive-secondary-text-hover: #404040;
+$tds-interactive-secondary-text-pressed: #404040;
+$tds-interactive-secondary-icon-default: #404040;
+$tds-interactive-secondary-icon-hover: #404040;
+$tds-interactive-secondary-icon-pressed: #404040;
+$tds-interactive-disabled-a: #d9d9d9;
+$tds-interactive-disabled-b: #bfbfbf;
+$tds-interactive-disabled-c: #a6a6a6;
+$tds-interactive-link-primary-default: #005c8a;
+$tds-interactive-link-primary-hover: #005c8a;
+$tds-interactive-link-primary-pressed: #005c8a;
+$tds-interactive-link-secondary-default: #737373;
+$tds-interactive-link-secondary-hover: #737373;
+$tds-interactive-link-secondary-pressed: #737373;
+$tds-selection-background: #000000;
+$tds-selection-text: #f2f2f2;
+$tds-selected-fill-default: #000000;
+$tds-selected-fill-hover: #000000;
+$tds-selected-fill-pressed: #000000;
+$tds-selected-text-default: #ffffff;
+$tds-selected-text-hover: #ffffff;
+$tds-selected-text-pressed: #ffffff;
+$tds-selected-border-default: #000000;
+$tds-selected-border-hover: #000000;
+$tds-selected-border-pressed: #000000;
+$tds-selected-icon-default: #ffffff;
+$tds-selected-icon-hover: #ffffff;
+$tds-selected-icon-pressed: #ffffff;
+$tds-active-fill: #000000;
+$tds-active-text: #ffffff;
+$tds-active-border: #000000;
+$tds-active-icon: #ffffff;
+$tds-focus-border: #737373;
+$tds-tag-filled-live-fill: #b30000;
+$tds-tag-filled-live-text: #ffffff;
+$tds-tag-filled-primary-fill: #00787c;
+$tds-tag-filled-primary-text: #ffffff;
+$tds-tag-filled-secondary-border: #f2f2f2;
+$tds-tag-filled-secondary-fill: #f2f2f2;
+$tds-tag-filled-secondary-text: #f2f2f2;
+$tds-tag-inline-live-text: #b30000;
+$tds-tag-inline-primary-text: #00787c;
+$tds-tag-inline-secondary-text: #f2f2f2;
+$tds-tag-channel-text: #0404ff;

package/dist/tds-layout.scss

@@ -0,0 +1,180 @@
+:root {
+--tds-spacing-fluid-100: 4px;
+--tds-spacing-fluid-150: 6px;
+--tds-spacing-fluid-200: 8px;
+--tds-spacing-fluid-250: 10px;
+--tds-spacing-fluid-300: 12px;
+--tds-spacing-fluid-400: 16px;
+--tds-spacing-fluid-500: 20px;
+--tds-spacing-fluid-600: 24px;
+--tds-spacing-fluid-650: 26px;
+--tds-spacing-fluid-700: 28px;
+--tds-spacing-fluid-800: 32px;
+--tds-spacing-fluid-900: 36px;
+--tds-spacing-fluid-1000: 40px;
+--tds-spacing-fluid-1100: 44px;
+--tds-spacing-fluid-1200: 48px;
+--tds-spacing-fluid-1300: 52px;
+--tds-spacing-fluid-1400: 56px;
+--tds-spacing-fluid-1500: 60px;
+--tds-spacing-fluid-050: 2px;
+--tds-spacing-static-10: 18px;
+--tds-spacing-static-11: 20px;
+--tds-spacing-static-12: 23px;
+--tds-spacing-static-13: 24px;
+--tds-spacing-static-14: 28px;
+--tds-spacing-static-15: 32px;
+--tds-spacing-static-16: 36px;
+--tds-spacing-static-17: 40px;
+--tds-spacing-static-18: 48px;
+--tds-spacing-static-19: 56px;
+--tds-spacing-static-20: 64px;
+--tds-spacing-static-21: 80px;
+--tds-spacing-static-01: 2px;
+--tds-spacing-static-02: 3px;
+--tds-spacing-static-03: 4px;
+--tds-spacing-static-04: 6px;
+--tds-spacing-static-05: 8px;
+--tds-spacing-static-06: 10px;
+--tds-spacing-static-07: 12px;
+--tds-spacing-static-08: 14px;
+--tds-spacing-static-09: 16px;
+--tds-grid-columns: 4;
+--tds-grid-gutter: 24px;
+--tds-grid-margin: 20px;
+--tds-grid-viewport: 433px;
+--tds-grid-max-width: 767px;
+--tds-grid-content-area: 393px;
+}
+@media (min-width: 440px) {
+:root {
+--tds-spacing-fluid-100: 6px;
+--tds-spacing-fluid-150: 9px;
+--tds-spacing-fluid-200: 12px;
+--tds-spacing-fluid-250: 15px;
+--tds-spacing-fluid-300: 18px;
+--tds-spacing-fluid-400: 24px;
+--tds-spacing-fluid-500: 30px;
+--tds-spacing-fluid-600: 36px;
+--tds-spacing-fluid-650: 39px;
+--tds-spacing-fluid-700: 42px;
+--tds-spacing-fluid-800: 48px;
+--tds-spacing-fluid-900: 54px;
+--tds-spacing-fluid-1000: 60px;
+--tds-spacing-fluid-1100: 66px;
+--tds-spacing-fluid-1200: 72px;
+--tds-spacing-fluid-1300: 78px;
+--tds-spacing-fluid-1400: 84px;
+--tds-spacing-fluid-1500: 90px;
+--tds-spacing-fluid-050: 2px;
+--tds-grid-columns: 12;
+--tds-grid-gutter: 32px;
+--tds-grid-margin: 24px;
+--tds-grid-viewport: 816px;
+--tds-grid-max-width: 1023px;
+--tds-grid-content-area: 768px;
+}}
+@media (min-width: 1024px) {
+:root {
+--tds-spacing-fluid-100: 8px;
+--tds-spacing-fluid-150: 12px;
+--tds-spacing-fluid-200: 16px;
+--tds-spacing-fluid-250: 20px;
+--tds-spacing-fluid-300: 24px;
+--tds-spacing-fluid-400: 32px;
+--tds-spacing-fluid-500: 40px;
+--tds-spacing-fluid-600: 48px;
+--tds-spacing-fluid-650: 52px;
+--tds-spacing-fluid-700: 56px;
+--tds-spacing-fluid-800: 64px;
+--tds-spacing-fluid-900: 72px;
+--tds-spacing-fluid-1000: 80px;
+--tds-spacing-fluid-1100: 88px;
+--tds-spacing-fluid-1200: 96px;
+--tds-spacing-fluid-1300: 104px;
+--tds-spacing-fluid-1400: 112px;
+--tds-spacing-fluid-1500: 120px;
+--tds-spacing-fluid-050: 2px;
+--tds-grid-columns: 10;
+--tds-grid-gutter: 32px;
+--tds-grid-margin: 24px;
+--tds-grid-viewport: 1072px;
+--tds-grid-max-width: 1439px;
+--tds-grid-content-area: 1024px;
+}}
+@media (min-width: 1440px) {
+:root {
+--tds-spacing-fluid-100: 10px;
+--tds-spacing-fluid-150: 15px;
+--tds-spacing-fluid-200: 20px;
+--tds-spacing-fluid-250: 25px;
+--tds-spacing-fluid-300: 30px;
+--tds-spacing-fluid-400: 40px;
+--tds-spacing-fluid-500: 50px;
+--tds-spacing-fluid-600: 60px;
+--tds-spacing-fluid-650: 65px;
+--tds-spacing-fluid-700: 70px;
+--tds-spacing-fluid-800: 80px;
+--tds-spacing-fluid-900: 90px;
+--tds-spacing-fluid-1000: 100px;
+--tds-spacing-fluid-1100: 110px;
+--tds-spacing-fluid-1200: 120px;
+--tds-spacing-fluid-1300: 130px;
+--tds-spacing-fluid-1400: 140px;
+--tds-spacing-fluid-1500: 150px;
+--tds-spacing-fluid-050: 2px;
+--tds-grid-columns: 12;
+--tds-grid-gutter: 32px;
+--tds-grid-margin: 24px;
+--tds-grid-viewport: 1440px;
+--tds-grid-max-width: 1920px;
+--tds-grid-content-area: 1144px;
+}}
+
+$tds-spacing-fluid-100: var(--tds-spacing-fluid-100);
+$tds-spacing-fluid-150: var(--tds-spacing-fluid-150);
+$tds-spacing-fluid-200: var(--tds-spacing-fluid-200);
+$tds-spacing-fluid-250: var(--tds-spacing-fluid-250);
+$tds-spacing-fluid-300: var(--tds-spacing-fluid-300);
+$tds-spacing-fluid-400: var(--tds-spacing-fluid-400);
+$tds-spacing-fluid-500: var(--tds-spacing-fluid-500);
+$tds-spacing-fluid-600: var(--tds-spacing-fluid-600);
+$tds-spacing-fluid-650: var(--tds-spacing-fluid-650);
+$tds-spacing-fluid-700: var(--tds-spacing-fluid-700);
+$tds-spacing-fluid-800: var(--tds-spacing-fluid-800);
+$tds-spacing-fluid-900: var(--tds-spacing-fluid-900);
+$tds-spacing-fluid-1000: var(--tds-spacing-fluid-1000);
+$tds-spacing-fluid-1100: var(--tds-spacing-fluid-1100);
+$tds-spacing-fluid-1200: var(--tds-spacing-fluid-1200);
+$tds-spacing-fluid-1300: var(--tds-spacing-fluid-1300);
+$tds-spacing-fluid-1400: var(--tds-spacing-fluid-1400);
+$tds-spacing-fluid-1500: var(--tds-spacing-fluid-1500);
+$tds-spacing-fluid-050: var(--tds-spacing-fluid-050);
+$tds-spacing-static-10: var(--tds-spacing-static-10);
+$tds-spacing-static-11: var(--tds-spacing-static-11);
+$tds-spacing-static-12: var(--tds-spacing-static-12);
+$tds-spacing-static-13: var(--tds-spacing-static-13);
+$tds-spacing-static-14: var(--tds-spacing-static-14);
+$tds-spacing-static-15: var(--tds-spacing-static-15);
+$tds-spacing-static-16: var(--tds-spacing-static-16);
+$tds-spacing-static-17: var(--tds-spacing-static-17);
+$tds-spacing-static-18: var(--tds-spacing-static-18);
+$tds-spacing-static-19: var(--tds-spacing-static-19);
+$tds-spacing-static-20: var(--tds-spacing-static-20);
+$tds-spacing-static-21: var(--tds-spacing-static-21);
+$tds-spacing-static-01: var(--tds-spacing-static-01);
+$tds-spacing-static-02: var(--tds-spacing-static-02);
+$tds-spacing-static-03: var(--tds-spacing-static-03);
+$tds-spacing-static-04: var(--tds-spacing-static-04);
+$tds-spacing-static-05: var(--tds-spacing-static-05);
+$tds-spacing-static-06: var(--tds-spacing-static-06);
+$tds-spacing-static-07: var(--tds-spacing-static-07);
+$tds-spacing-static-08: var(--tds-spacing-static-08);
+$tds-spacing-static-09: var(--tds-spacing-static-09);
+$tds-grid-columns: var(--tds-grid-columns);
+$tds-grid-gutter: var(--tds-grid-gutter);
+$tds-grid-margin: var(--tds-grid-margin);
+$tds-grid-viewport: var(--tds-grid-viewport);
+$tds-grid-max-width: var(--tds-grid-max-width);
+$tds-grid-content-area: var(--tds-grid-content-area);
+