@times-design-system/theme-scss 2.1.0 → 2.2.0

package/dist/palettes/world-dark.scss

@@ -24,12 +24,12 @@ $dark-world-text-channel-tertiary: #016d6f;
 $dark-world-text-static-dark: #000000;
 $dark-world-text-static-light: #ffffff;
 $dark-world-text-inverse: #000000;
-$dark-world-icon-primary: #000000;
-$dark-world-icon-secondary: #262626;
-$dark-world-icon-tertiary: #595959;
+$dark-world-icon-primary: #ffffff;
+$dark-world-icon-secondary: #d9d9d9;
+$dark-world-icon-tertiary: #a6a6a6;
 $dark-world-icon-channel-primary: #016d6f;
 $dark-world-icon-channel-secondary: #1c7f83;
-$dark-world-icon-channel-tertiary: #85b4b6;
+$dark-world-icon-channel-tertiary: #016d6f;
 $dark-world-icon-inverse: #000000;
 $dark-world-border-primary: #575757;
 $dark-world-border-secondary: #333333;
@@ -50,67 +50,67 @@ $dark-world-input-fill-warning: #664109;
 $dark-world-input-fill-info: #08295a;
 $dark-world-input-border-default: #737373;
 $dark-world-input-border-error: #ff7268;
-$dark-world-input-border-hover: #808080;
+$dark-world-input-border-hover: #6d6d6d;
 $dark-world-input-border-active: #a6a6a6;
 $dark-world-input-border-completed: #d9d9d9;
 $dark-world-input-border-success: #80c4a1;
 $dark-world-input-border-warning: #ffc77f;
 $dark-world-input-border-info: #466fb5;
-$dark-world-input-text-default: #595959;
-$dark-world-input-text-error: #000000;
-$dark-world-input-text-hover: #262626;
-$dark-world-input-text-active: #000000;
-$dark-world-input-text-completed: #000000;
-$dark-world-input-text-success: #000000;
-$dark-world-input-text-warning: #000000;
-$dark-world-input-text-info: #000000;
-$dark-world-input-icon-default: #8c8c8c;
+$dark-world-input-text-default: #a6a6a6;
+$dark-world-input-text-error: #ffffff;
+$dark-world-input-text-hover: #d9d9d9;
+$dark-world-input-text-active: #ffffff;
+$dark-world-input-text-completed: #ffffff;
+$dark-world-input-text-success: #ffffff;
+$dark-world-input-text-warning: #ffffff;
+$dark-world-input-text-info: #ffffff;
+$dark-world-input-icon-default: #737373;
 $dark-world-input-icon-hover: #6d6d6d;
-$dark-world-input-icon-active: #595959;
-$dark-world-input-icon-completed: #262626;
-$dark-world-input-icon-error: #e70300;
-$dark-world-input-icon-success: #2c9365;
-$dark-world-input-icon-warning: #cc8103;
-$dark-world-input-icon-info: #2658a9;
+$dark-world-input-icon-active: #a6a6a6;
+$dark-world-input-icon-completed: #d9d9d9;
+$dark-world-input-icon-error: #ff7268;
+$dark-world-input-icon-success: #80c4a1;
+$dark-world-input-icon-warning: #ffc77f;
+$dark-world-input-icon-info: #466fb5;
 $dark-world-active-fill: #ffffff;
 $dark-world-active-text: #000000;
 $dark-world-active-border: #ffffff;
 $dark-world-active-icon: #000000;
 $dark-world-focus-border: #8c8c8c;
-$dark-world-label-primary: #000000;
-$dark-world-label-secondary: #262626;
-$dark-world-label-channel: #268186;
-$dark-world-label-callout: #ff403a;
+$dark-world-label-primary: #ffffff;
+$dark-world-label-secondary: #d9d9d9;
+$dark-world-label-channel: #3c8b90;
+$dark-world-label-callout: #ff3933;
 $dark-world-flag-primary-fill: #ffffff;
 $dark-world-flag-primary-text: #0d0d0d;
-$dark-world-flag-primary-icon: #f2f2f2;
-$dark-world-flag-secondary-text: #000000;
-$dark-world-flag-secondary-icon: #000000;
-$dark-world-flag-channel-fill: #9bc3c5;
-$dark-world-flag-channel-text: #073131;
-$dark-world-flag-channel-icon: #073131;
+$dark-world-flag-primary-icon: #0d0d0d;
+$dark-world-flag-secondary-text: #ffffff;
+$dark-world-flag-secondary-icon: #ffffff;
+$dark-world-flag-channel-fill: #056065;
+$dark-world-flag-channel-text: #90bbbe;
+$dark-world-flag-channel-icon: #90bbbe;
 $dark-world-flag-callout-fill: #ff3933;
-$dark-world-flag-callout-text: #000000;
-$dark-world-flag-callout-icon: #000000;
+$dark-world-flag-callout-text: #ffffff;
+$dark-world-flag-callout-icon: #ffffff;
 $dark-world-interactive-primary-fill-default: #ffffff;
 $dark-world-interactive-primary-fill-hover: #ffffff;
 $dark-world-interactive-primary-fill-pressed: #ffffff;
 $dark-world-interactive-primary-text-default: #000000;
-$dark-world-interactive-primary-text-hover: #ffffff;
-$dark-world-interactive-primary-text-pressed: #ffffff;
-$dark-world-interactive-primary-icon-default: #ffffff;
-$dark-world-interactive-primary-icon-hover: #ffffff;
-$dark-world-interactive-primary-icon-pressed: #ffffff;
-$dark-world-interactive-secondary-fill-default: #ffffff;
+$dark-world-interactive-primary-text-hover: #000000;
+$dark-world-interactive-primary-text-pressed: #000000;
+$dark-world-interactive-primary-icon-default: #000000;
+$dark-world-interactive-primary-icon-hover: #000000;
+$dark-world-interactive-primary-icon-pressed: #000000;
+$dark-world-interactive-secondary-fill-default: #000000;
 $dark-world-interactive-secondary-fill-hover: #262626;
 $dark-world-interactive-secondary-fill-pressed: #333333;
 $dark-world-interactive-secondary-border-default: #8c8c8c;
 $dark-world-interactive-secondary-border-hover: #9d9d9d;
 $dark-world-interactive-secondary-border-pressed: #a3a3a3;
-$dark-world-interactive-secondary-text-default: #000000;
+$dark-world-interactive-secondary-text-default: #ffffff;
 $dark-world-interactive-secondary-text-hover: #ffffff;
 $dark-world-interactive-secondary-text-pressed: #ffffff;
-$dark-world-interactive-secondary-icon-default: #000000;
+$dark-world-interactive-secondary-icon-default: #ffffff;
 $dark-world-interactive-secondary-icon-hover: #ffffff;
 $dark-world-interactive-secondary-icon-pressed: #ffffff;
 $dark-world-interactive-disabled-a: #262626;
@@ -119,123 +119,133 @@ $dark-world-interactive-disabled-c: #575757;
 $dark-world-interactive-negative-fill-default: #000000;
 $dark-world-interactive-negative-fill-hover: #000000;
 $dark-world-interactive-negative-fill-pressed: #000000;
-$dark-world-interactive-negative-border-default: #ff8883;
+$dark-world-interactive-negative-border-default: #e70300;
 $dark-world-interactive-negative-border-hover: #c40300;
 $dark-world-interactive-negative-border-pressed: #b90200;
 $dark-world-interactive-negative-text-default: #e70300;
 $dark-world-interactive-negative-text-hover: #c40300;
 $dark-world-interactive-negative-text-pressed: #b90200;
-$dark-world-interactive-negative-icon-default: #ff8883;
+$dark-world-interactive-negative-icon-default: #e70300;
 $dark-world-interactive-negative-icon-hover: #c40300;
 $dark-world-interactive-negative-icon-pressed: #b90200;
 $dark-world-interactive-link-secondary-text-default: #8c8c8c;
 $dark-world-interactive-link-secondary-text-hover: #777777;
 $dark-world-interactive-link-secondary-text-pressed: #707070;
 $dark-world-interactive-link-secondary-text-visited: #9a9a9a;
-$dark-world-interactive-link-secondary-icon-default: #737373;
+$dark-world-interactive-link-secondary-icon-default: #8c8c8c;
 $dark-world-interactive-link-secondary-icon-hover: #777777;
 $dark-world-interactive-link-secondary-icon-pressed: #707070;
 $dark-world-interactive-link-secondary-icon-visited: #9a9a9a;
-$dark-world-interactive-link-secondary-underline-default: #737373;
+$dark-world-interactive-link-secondary-underline-default: #8c8c8c;
 $dark-world-interactive-link-secondary-underline-hover: #9d9d9d;
 $dark-world-interactive-link-secondary-underline-pressed: #a3a3a3;
 $dark-world-interactive-link-secondary-underline-visited: #7e7e7e;
-$dark-world-interactive-link-primary-text-default: #000000;
+$dark-world-interactive-link-primary-text-default: #ffffff;
 $dark-world-interactive-link-primary-text-hover: #d9d9d9;
 $dark-world-interactive-link-primary-text-pressed: #cccccc;
 $dark-world-interactive-link-primary-text-visited: #ffffff;
-$dark-world-interactive-link-primary-icon-default: #000000;
+$dark-world-interactive-link-primary-icon-default: #ffffff;
 $dark-world-interactive-link-primary-icon-hover: #d9d9d9;
 $dark-world-interactive-link-primary-icon-pressed: #cccccc;
 $dark-world-interactive-link-primary-icon-visited: #ffffff;
-$dark-world-interactive-link-primary-underline-default: #000000;
+$dark-world-interactive-link-primary-underline-default: #ffffff;
 $dark-world-interactive-link-primary-underline-hover: #ffffff;
 $dark-world-interactive-link-primary-underline-pressed: #ffffff;
 $dark-world-interactive-link-primary-underline-visited: #e6e6e6;
-$dark-world-interactive-chip-primary-on-fill-default: #000000;
+$dark-world-interactive-chip-primary-on-fill-default: #ffffff;
 $dark-world-interactive-chip-primary-on-fill-hover: #d9d9d9;
 $dark-world-interactive-chip-primary-on-fill-pressed: #cccccc;
-$dark-world-interactive-chip-primary-on-text-default: #ffffff;
+$dark-world-interactive-chip-primary-on-text-default: #000000;
 $dark-world-interactive-chip-primary-on-text-hover: #000000;
 $dark-world-interactive-chip-primary-on-text-pressed: #000000;
-$dark-world-interactive-chip-primary-on-icon-default: #ffffff;
+$dark-world-interactive-chip-primary-on-icon-default: #000000;
 $dark-world-interactive-chip-primary-on-icon-hover: #000000;
 $dark-world-interactive-chip-primary-on-icon-pressed: #000000;
-$dark-world-interactive-chip-primary-off-fill-default: #ffffff;
+$dark-world-interactive-chip-primary-off-fill-default: #000000;
 $dark-world-interactive-chip-primary-off-fill-hover: #000000;
 $dark-world-interactive-chip-primary-off-fill-pressed: #000000;
-$dark-world-interactive-chip-primary-off-text-default: #000000;
+$dark-world-interactive-chip-primary-off-text-default: #ffffff;
 $dark-world-interactive-chip-primary-off-text-hover: #d9d9d9;
 $dark-world-interactive-chip-primary-off-text-pressed: #cccccc;
-$dark-world-interactive-chip-primary-off-icon-default: #000000;
+$dark-world-interactive-chip-primary-off-icon-default: #ffffff;
 $dark-world-interactive-chip-primary-off-icon-hover: #d9d9d9;
 $dark-world-interactive-chip-primary-off-icon-pressed: #cccccc;
-$dark-world-interactive-chip-primary-off-border-default: #000000;
+$dark-world-interactive-chip-primary-off-border-default: #ffffff;
 $dark-world-interactive-chip-primary-off-border-hover: #d9d9d9;
 $dark-world-interactive-chip-primary-off-border-pressed: #cccccc;
-$dark-world-interactive-chip-secondary-on-text-default: #000000;
+$dark-world-interactive-chip-secondary-on-text-default: #ffffff;
 $dark-world-interactive-chip-secondary-on-text-hover: #d9d9d9;
 $dark-world-interactive-chip-secondary-on-text-pressed: #cccccc;
 $dark-world-interactive-chip-secondary-on-fill-default: #262626;
 $dark-world-interactive-chip-secondary-on-fill-hover: #202020;
 $dark-world-interactive-chip-secondary-on-fill-pressed: #1e1e1e;
-$dark-world-interactive-chip-secondary-on-border-default: #737373;
+$dark-world-interactive-chip-secondary-on-border-default: #8c8c8c;
 $dark-world-interactive-chip-secondary-on-border-hover: #777777;
 $dark-world-interactive-chip-secondary-on-border-pressed: #707070;
-$dark-world-interactive-chip-secondary-on-icon-default: #000000;
+$dark-world-interactive-chip-secondary-on-icon-default: #ffffff;
 $dark-world-interactive-chip-secondary-on-icon-hover: #d9d9d9;
 $dark-world-interactive-chip-secondary-on-icon-pressed: #cccccc;
-$dark-world-interactive-chip-secondary-off-fill-default: #d9d9d9;
+$dark-world-interactive-chip-secondary-off-fill-default: #262626;
 $dark-world-interactive-chip-secondary-off-fill-hover: #202020;
 $dark-world-interactive-chip-secondary-off-fill-pressed: #1e1e1e;
-$dark-world-interactive-chip-secondary-off-text-default: #595959;
+$dark-world-interactive-chip-secondary-off-text-default: #a6a6a6;
 $dark-world-interactive-chip-secondary-off-text-hover: #8d8d8d;
 $dark-world-interactive-chip-secondary-off-text-pressed: #858585;
-$dark-world-interactive-chip-secondary-off-icon-default: #595959;
+$dark-world-interactive-chip-secondary-off-icon-default: #a6a6a6;
 $dark-world-interactive-chip-secondary-off-icon-hover: #8d8d8d;
 $dark-world-interactive-chip-secondary-off-icon-pressed: #858585;
 $dark-world-interactive-chip-channel-secondary-off-fill-default: #073131;
 $dark-world-interactive-chip-channel-secondary-off-fill-hover: #062a2a;
 $dark-world-interactive-chip-channel-secondary-off-fill-pressed: #062727;
-$dark-world-interactive-chip-channel-secondary-off-text-default: #085358;
+$dark-world-interactive-chip-channel-secondary-off-text-default: #6ea7a9;
 $dark-world-interactive-chip-channel-secondary-off-text-hover: #589395;
 $dark-world-interactive-chip-channel-secondary-off-text-pressed: #538a8c;
-$dark-world-interactive-chip-channel-secondary-off-icon-default: #085358;
+$dark-world-interactive-chip-channel-secondary-off-icon-default: #6ea7a9;
 $dark-world-interactive-chip-channel-secondary-off-icon-hover: #589395;
 $dark-world-interactive-chip-channel-secondary-off-icon-pressed: #538a8c;
-$dark-world-interactive-chip-channel-secondary-on-border-default: #085358;
+$dark-world-interactive-chip-channel-secondary-on-border-default: #6ea7a9;
 $dark-world-interactive-chip-channel-secondary-on-border-hover: #589395;
 $dark-world-interactive-chip-channel-secondary-on-border-pressed: #538a8c;
-$dark-world-interactive-chip-channel-secondary-on-fill-default: #e4edf0;
+$dark-world-interactive-chip-channel-secondary-on-fill-default: #073131;
 $dark-world-interactive-chip-channel-secondary-on-fill-hover: #062a2a;
 $dark-world-interactive-chip-channel-secondary-on-fill-pressed: #062727;
-$dark-world-interactive-chip-channel-secondary-on-text-default: #000000;
+$dark-world-interactive-chip-channel-secondary-on-text-default: #ffffff;
 $dark-world-interactive-chip-channel-secondary-on-text-hover: #d9d9d9;
 $dark-world-interactive-chip-channel-secondary-on-text-pressed: #cccccc;
-$dark-world-interactive-chip-channel-secondary-on-icon-default: #000000;
+$dark-world-interactive-chip-channel-secondary-on-icon-default: #ffffff;
 $dark-world-interactive-chip-channel-secondary-on-icon-hover: #d9d9d9;
 $dark-world-interactive-chip-channel-secondary-on-icon-pressed: #cccccc;
-$dark-world-interactive-chip-channel-primary-off-fill-default: #f4f7f7;
+$dark-world-interactive-chip-channel-primary-off-fill-default: #06171a;
 $dark-world-interactive-chip-channel-primary-off-fill-hover: #051416;
 $dark-world-interactive-chip-channel-primary-off-fill-pressed: #051215;
-$dark-world-interactive-chip-channel-primary-off-text-default: #073131;
+$dark-world-interactive-chip-channel-primary-off-text-default: #90bbbe;
 $dark-world-interactive-chip-channel-primary-off-text-hover: #71a8ac;
 $dark-world-interactive-chip-channel-primary-off-text-pressed: #66a1a5;
-$dark-world-interactive-chip-channel-primary-off-icon-default: #073131;
+$dark-world-interactive-chip-channel-primary-off-icon-default: #90bbbe;
 $dark-world-interactive-chip-channel-primary-off-icon-hover: #71a8ac;
 $dark-world-interactive-chip-channel-primary-off-icon-pressed: #66a1a5;
-$dark-world-interactive-chip-channel-primary-off-border-default: #9bc3c5;
+$dark-world-interactive-chip-channel-primary-off-border-default: #056065;
 $dark-world-interactive-chip-channel-primary-off-border-hover: #045256;
 $dark-world-interactive-chip-channel-primary-off-border-pressed: #044d51;
-$dark-world-interactive-chip-channel-primary-on-fill-default: #9bc3c5;
+$dark-world-interactive-chip-channel-primary-on-fill-default: #056065;
 $dark-world-interactive-chip-channel-primary-on-fill-hover: #045256;
 $dark-world-interactive-chip-channel-primary-on-fill-pressed: #044d51;
-$dark-world-interactive-chip-channel-primary-on-text-default: #000000;
+$dark-world-interactive-chip-channel-primary-on-text-default: #ffffff;
 $dark-world-interactive-chip-channel-primary-on-text-hover: #d9d9d9;
 $dark-world-interactive-chip-channel-primary-on-text-pressed: #cccccc;
-$dark-world-interactive-chip-channel-primary-on-icon-default: #000000;
+$dark-world-interactive-chip-channel-primary-on-icon-default: #ffffff;
 $dark-world-interactive-chip-channel-primary-on-icon-hover: #d9d9d9;
 $dark-world-interactive-chip-channel-primary-on-icon-pressed: #cccccc;
+$dark-world-interactive-tab-fill-default: #000000;
+$dark-world-interactive-tab-fill-hover: #0d0d0d;
+$dark-world-interactive-tab-fill-pressed: #262626;
+$dark-world-interactive-tab-text-default: #ffffff;
+$dark-world-interactive-tab-text-hover: #d9d9d9;
+$dark-world-interactive-tab-text-pressed: #d9d9d9;
+$dark-world-interactive-tab-icon-default: #ffffff;
+$dark-world-interactive-tab-icon-hover: #d9d9d9;
+$dark-world-interactive-tab-icon-pressed: #d9d9d9;
+$dark-world-interactive-tab-selected-border-default: #ffffff;
 $dark-world-toast-fill-info: #0f4aa2;
 $dark-world-toast-fill-success: #2c865b;
 $dark-world-toast-fill-warning: #e49307;
@@ -251,10 +261,10 @@ $dark-world-toast-text-warning: #000000;
 $dark-world-toast-link-info-default: #ffffff;
 $dark-world-toast-link-info-hover: #d9d9d9;
 $dark-world-toast-link-info-pressed: #cccccc;
-$dark-world-toast-link-success-default: #000000;
+$dark-world-toast-link-success-default: #ffffff;
 $dark-world-toast-link-success-hover: #d9d9d9;
 $dark-world-toast-link-success-pressed: #cccccc;
-$dark-world-toast-link-error-default: #000000;
+$dark-world-toast-link-error-default: #ffffff;
 $dark-world-toast-link-error-hover: #d9d9d9;
 $dark-world-toast-link-error-pressed: #cccccc;
 $dark-world-toast-link-warning-default: #000000;
@@ -272,18 +282,18 @@ $dark-world-messaging-icon-error: #ff7268;
 $dark-world-messaging-icon-success: #80c4a1;
 $dark-world-messaging-icon-warning: #ffa722;
 $dark-world-messaging-icon-info: #6f8dc6;
-$dark-world-messaging-link-text-default: #000000;
+$dark-world-messaging-link-text-default: #ffffff;
 $dark-world-messaging-link-text-hover: #d9d9d9;
 $dark-world-messaging-link-text-pressed: #cccccc;
 $dark-world-messaging-link-text-visited: #ffffff;
-$dark-world-messaging-link-icon-default: #000000;
+$dark-world-messaging-link-icon-default: #ffffff;
 $dark-world-messaging-link-icon-hover: #d9d9d9;
 $dark-world-messaging-link-icon-pressed: #cccccc;
 $dark-world-messaging-link-icon-visited: #ffffff;
-$dark-world-messaging-link-underline-default: #000000;
+$dark-world-messaging-link-underline-default: #ffffff;
 $dark-world-messaging-link-underline-hover: #ffffff;
 $dark-world-messaging-link-underline-pressed: #ffffff;
 $dark-world-messaging-link-underline-visited: #e6e6e6;
-$dark-world-tooltip-fill: #000000;
-$dark-world-tooltip-text: #ffffff;
-$dark-world-tooltip-icon: #ffffff;
+$dark-world-tooltip-fill: #ffffff;
+$dark-world-tooltip-text: #000000;
+$dark-world-tooltip-icon: #000000;

package/dist/palettes/world-light.scss

@@ -50,7 +50,7 @@ $light-world-input-fill-warning: #fff7ef;
 $light-world-input-fill-info: #eff2f8;
 $light-world-input-border-default: #8c8c8c;
 $light-world-input-border-error: #b20908;
-$light-world-input-border-hover: #808080;
+$light-world-input-border-hover: #6d6d6d;
 $light-world-input-border-active: #595959;
 $light-world-input-border-completed: #262626;
 $light-world-input-border-success: #298458;
@@ -216,6 +216,16 @@ $light-world-interactive-chip-channel-primary-off-icon-pressed: #063032;
 $light-world-interactive-chip-channel-primary-off-border-default: #b2cfd2;
 $light-world-interactive-chip-channel-primary-off-border-hover: #8db8bd;
 $light-world-interactive-chip-channel-primary-off-border-pressed: #81b0b5;
+$light-world-interactive-tab-fill-default: #ffffff;
+$light-world-interactive-tab-fill-hover: #f2f2f2;
+$light-world-interactive-tab-fill-pressed: #d9d9d9;
+$light-world-interactive-tab-text-default: #1a1a1a;
+$light-world-interactive-tab-text-hover: #404040;
+$light-world-interactive-tab-text-pressed: #404040;
+$light-world-interactive-tab-icon-default: #1a1a1a;
+$light-world-interactive-tab-icon-hover: #404040;
+$light-world-interactive-tab-icon-pressed: #404040;
+$light-world-interactive-tab-selected-border-default: #000000;
 $light-world-active-fill: #000000;
 $light-world-active-text: #ffffff;
 $light-world-active-border: #000000;

package/dist/tds-layout.scss

@@ -5,6 +5,18 @@
 --grid-viewport: 433px;
 --grid-max-width: 767px;
 --grid-content-area: 393px;
+--grid-span-1: 70px;
+--grid-span-2: 165px;
+--grid-span-3: 259px;
+--grid-span-4: 353px;
+--grid-span-5: 353px;
+--grid-span-6: 353px;
+--grid-span-7: 353px;
+--grid-span-8: 353px;
+--grid-span-9: 353px;
+--grid-span-10: 353px;
+--grid-span-11: 353px;
+--grid-span-12: 353px;
 }
 @media (min-width: 440px) {
 :root {
@@ -14,24 +26,54 @@
 --grid-viewport: 816px;
 --grid-max-width: 1023px;
 --grid-content-area: 768px;
+--grid-span-1: 35px;
+--grid-span-2: 101px;
+--grid-span-3: 168px;
+--grid-span-4: 235px;
+--grid-span-5: 301px;
+--grid-span-6: 368px;
+--grid-span-7: 435px;
+--grid-span-8: 501px;
+--grid-span-9: 568px;
+--grid-span-10: 635px;
+--grid-span-11: 701px;
+--grid-span-12: 768px;
 }}
 @media (min-width: 1024px) {
 :root {
---grid-columns: 12;
---grid-gutter: 32px;
---grid-margin: 24px;
 --grid-viewport: 1072px;
 --grid-max-width: 1439px;
 --grid-content-area: 1024px;
+--grid-span-1: 56px;
+--grid-span-2: 144px;
+--grid-span-3: 232px;
+--grid-span-4: 320px;
+--grid-span-5: 408px;
+--grid-span-6: 496px;
+--grid-span-7: 584px;
+--grid-span-8: 672px;
+--grid-span-9: 760px;
+--grid-span-10: 848px;
+--grid-span-11: 936px;
+--grid-span-12: 1024px;
 }}
 @media (min-width: 1440px) {
 :root {
---grid-columns: 12;
---grid-gutter: 32px;
---grid-margin: 24px;
 --grid-viewport: 1440px;
 --grid-max-width: 1920px;
 --grid-content-area: 1144px;
+--grid-span-1: 66px;
+--grid-span-2: 164px;
+--grid-span-3: 262px;
+--grid-span-4: 360px;
+--grid-span-5: 458px;
+--grid-span-6: 556px;
+--grid-span-7: 654px;
+--grid-span-8: 752px;
+--grid-span-9: 850px;
+--grid-span-10: 948px;
+--grid-span-11: 1046px;
+--grid-span-12: 1144px;
 }}
 
 $spacing-10: 18px;
@@ -61,6 +103,18 @@ $grid-margin: var(--grid-margin);
 $grid-viewport: var(--grid-viewport);
 $grid-max-width: var(--grid-max-width);
 $grid-content-area: var(--grid-content-area);
+$grid-span-1: var(--grid-span-1);
+$grid-span-2: var(--grid-span-2);
+$grid-span-3: var(--grid-span-3);
+$grid-span-4: var(--grid-span-4);
+$grid-span-5: var(--grid-span-5);
+$grid-span-6: var(--grid-span-6);
+$grid-span-7: var(--grid-span-7);
+$grid-span-8: var(--grid-span-8);
+$grid-span-9: var(--grid-span-9);
+$grid-span-10: var(--grid-span-10);
+$grid-span-11: var(--grid-span-11);
+$grid-span-12: var(--grid-span-12);
 $shadow-elevation-down-level-2: 0px 4px 8px 0px rgba(0,0,0,0.08);
 $shadow-elevation-down-level-3: 0px 16px 24px 0px rgba(0,0,0,0.08);
 $shadow-elevation-down-level-4: 0px 20px 32px 0px rgba(0,0,0,0.08);

package/dist/tds-typography.scss

@@ -1,37 +1,80 @@
-$fontSize0025: 0.8rem;
-$fontSize005: 1rem;
-$fontSize010: 1.2rem;
-$fontSize020: 1.4rem;
-$fontSize025: 1.5008rem;
-$fontSize030: 1.6rem;
-$fontSize035: 1.7008rem;
-$fontSize040: 1.8rem;
-$fontSize045: 1.9008rem;
-$fontSize050: 2rem;
-$fontSize060: 2.2rem;
-$fontSize070: 2.4rem;
-$fontSize080: 2.8rem;
-$fontSize090: 3.2rem;
-$fontSize095: 3.4rem;
-$fontSize100: 3.6rem;
-$fontSize105: 4.6rem;
-$fontSize110: 4rem;
-$fontSize120: 4.4rem;
-$fontSize125: 4.5008rem;
-$fontSize130: 4.8rem;
-$fontSize140: 5.6rem;
-$fontSize150: 6.4rem;
-$fontSize155: 7rem;
-$fontSize160: 8rem;
-$fontSize170: 9.4rem;
-$fontSize180: 12rem;
-$fontSize190: 14.5008rem;
-$fontSize200: 17.1008rem;
-$fontSize210: 19.7008rem;
-$fontSize220: 22.3008rem;
-$fontSize230: 24.8rem;
-$fontSize240: 27.4rem;
-$fontSize250: 30rem;
+:root {
+--font-size0025: 0.8rem;
+--font-size005: 1rem;
+--font-size010: 1.2rem;
+--font-size020: 1.4rem;
+--font-size025: 1.5rem;
+--font-size030: 1.6rem;
+--font-size035: 1.7rem;
+--font-size040: 1.8rem;
+--font-size045: 1.9rem;
+--font-size050: 2rem;
+--font-size060: 2.2rem;
+--font-size070: 2.4rem;
+--font-size080: 2.8rem;
+--font-size090: 3.2rem;
+--font-size095: 3.4rem;
+--font-size100: 3.6rem;
+--font-size105: 4.6rem;
+--font-size110: 3.2rem;
+--font-size120: 4.4rem;
+--font-size125: 4.5rem;
+--font-size130: 4.8rem;
+--font-size140: 4rem;
+--font-size150: 6.4rem;
+--font-size155: 7rem;
+--font-size160: 8rem;
+}
+@media (min-width: 440px) {
+:root {
+--font-size100: 4rem;
+}}
+@media (min-width: 1024px) {
+:root {
+--font-size100: 4.6rem;
+}}
+@media (min-width: 1440px) {
+:root {
+--font-size090: 3.6rem;
+--font-size100: 5.6rem;
+--font-size110: 4rem;
+--font-size140: 5.6rem;
+}}
+
+$fontSize0025: var(--font-size0025);
+$fontSize005: var(--font-size005);
+$fontSize010: var(--font-size010);
+$fontSize020: var(--font-size020);
+$fontSize025: var(--font-size025);
+$fontSize030: var(--font-size030);
+$fontSize035: var(--font-size035);
+$fontSize040: var(--font-size040);
+$fontSize045: var(--font-size045);
+$fontSize050: var(--font-size050);
+$fontSize060: var(--font-size060);
+$fontSize070: var(--font-size070);
+$fontSize080: var(--font-size080);
+$fontSize090: var(--font-size090);
+$fontSize095: var(--font-size095);
+$fontSize100: var(--font-size100);
+$fontSize105: var(--font-size105);
+$fontSize110: var(--font-size110);
+$fontSize120: var(--font-size120);
+$fontSize125: var(--font-size125);
+$fontSize130: var(--font-size130);
+$fontSize140: var(--font-size140);
+$fontSize150: var(--font-size150);
+$fontSize155: var(--font-size155);
+$fontSize160: var(--font-size160);
+$fontSize170: var(--font-size170);
+$fontSize180: var(--font-size180);
+$fontSize190: var(--font-size190);
+$fontSize200: var(--font-size200);
+$fontSize210: var(--font-size210);
+$fontSize220: var(--font-size220);
+$fontSize230: var(--font-size230);
+$fontSize240: var(--font-size240);
+$fontSize250: var(--font-size250);
 $fontWeight010: 100;
 $fontWeight020: 200;
 $fontWeight030: 300;
@@ -44,7 +87,7 @@ $fontWeight090: 900;
 $fontFamily010: Times Modern;
 $fontFamily020: Times Digital W04 Regular;
 $fontFamily030: Times Digital W04 Bold;
-$fontFamily040: Roboto;
+$fontFamily040: Times Roboto;
 $fontLineHeight010: 1;
 $fontLineHeight020: 1.125;
 $fontLineHeight030: 1.25;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@times-design-system/theme-scss",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "type": "module",
   "description": "Times Design System theme package - pre-resolved color tokens for React",
   "keywords": [
@@ -35,7 +35,7 @@
     "clean": "rimraf dist",
     "dev": "rollup -c --watch",
     "prepublishOnly": "npm run build",
-    "test": "node ./__tests__/*.test.js"
+    "_test": "node ./__tests__/*.test.js"
   },
   "publishConfig": {
     "access": "public"
@@ -44,5 +44,5 @@
     "url": "https://github.com/newsuk/times-design-system/issues"
   },
   "homepage": "https://github.com/newsuk/times-design-system#readme",
-  "gitHead": "4843806ad8a6740ddc39584603aa0484846616ea"
+  "gitHead": "4e9bd2bc67b0dc34eb38eac29cebe11c6bcdb25b"
 }