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

package/dist/tds-layout.scss

@@ -1,81 +1,3 @@
-:root {
---grid-columns: 4;
---grid-gutter: 24px;
---grid-margin: 20px;
---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 {
---grid-columns: 12;
---grid-gutter: 32px;
---grid-margin: 24px;
---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-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-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;
 $spacing-11: 20px;
 $spacing-12: 23px;
@@ -97,24 +19,6 @@ $spacing-06: 10px;
 $spacing-07: 12px;
 $spacing-08: 14px;
 $spacing-09: 16px;
-$grid-columns: var(--grid-columns);
-$grid-gutter: var(--grid-gutter);
-$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);
@@ -132,4 +36,34 @@ $breakpoint-small: 0px;
 $breakpoint-medium: 440px;
 $breakpoint-large: 1024px;
 $breakpoint-xLarge: 1440px;
-    
+
+@mixin responsive-grid() {
+  // Mobile-first (small breakpoint)
+  grid-template-columns: repeat(4, 1fr);
+grid-gap: 24px;
+margin-inline: 20px;
+max-width: 393px;
+
+  // Medium breakpoint
+  @media (min-width: $breakpoint-medium) {
+    grid-template-columns: repeat(12, 1fr);
+grid-gap: 32px;
+margin-inline: 24px;
+max-width: 768px;
+  }
+
+  // Large breakpoint
+  @media (min-width: $breakpoint-large) {
+    max-width: 1024px;
+  }
+
+  // XLarge breakpoint
+  @media (min-width: $breakpoint-xLarge) {
+    max-width: 1144px;
+  }
+}
+
+.tds-grid {
+	display: grid;
+	@include responsive-tds-grid();
+}

package/dist/tds-typography.scss

@@ -618,4 +618,20 @@ $fontLineHeight060: 2;
 @mixin utility-link-standalone-brand-large {
   font: $fontWeight040 #{$fontSize040}/#{$fontLineHeight040} $fontFamily020;
 }
+
+@mixin utility-input-label-xsmall {
+  font: $fontWeight040 #{$fontSize010}/#{$fontLineHeight020} $fontFamily040;
+}
+
+@mixin utility-input-label-small {
+  font: $fontWeight040 #{$fontSize020}/#{$fontLineHeight020} $fontFamily040;
+}
+
+@mixin utility-input-label-medium {
+  font: $fontWeight040 #{$fontSize030}/#{$fontLineHeight020} $fontFamily040;
+}
+
+@mixin utility-input-label-large {
+  font: $fontWeight040 #{$fontSize040}/#{$fontLineHeight020} $fontFamily040;
+}
     

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@times-design-system/theme-scss",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "type": "module",
   "description": "Times Design System theme package - pre-resolved color tokens for React",
   "keywords": [
@@ -44,5 +44,5 @@
     "url": "https://github.com/newsuk/times-design-system/issues"
   },
   "homepage": "https://github.com/newsuk/times-design-system#readme",
-  "gitHead": "4e9bd2bc67b0dc34eb38eac29cebe11c6bcdb25b"
+  "gitHead": "f57ef06b52f90bc4c57a8e0cefd9be6c54b8f7bf"
 }