@times-design-system/theme-scss 2.0.2-alpha.8 → 2.2.0

package/README.md

@@ -5,7 +5,7 @@ Times Design System SCSS theme package with pre-compiled palette files and utili
 ## Installation
 
 ```bash
-npm install @times-design-system/theme-scss
+yarn add @times-design-system/theme-scss
 ```
 
 ## Usage
@@ -19,9 +19,9 @@ npm install @times-design-system/theme-scss
 // Import layout utilities
 @import '@times-design-system/theme-scss/tds-layout.scss';
 
-// Import a specific palette
-@import '@times-design-system/theme-scss/palettes/light-palette.scss';
-@import '@times-design-system/theme-scss/palettes/dark-palette.scss';
+// Import a specific theme palette
+@import '@times-design-system/theme-scss/palettes/core-light.scss';
+@import '@times-design-system/theme-scss/palettes/core-dark.scss';
 ```
 
 ### Using Design Tokens in SCSS
@@ -29,21 +29,21 @@ npm install @times-design-system/theme-scss
 ```scss
 // Access color variables
 body {
-  background-color: $tds-surface-canvas;
-  color: $tds-text-primary;
+  background-color: $dark-core-surface-canvas;
+  color: $dark-core-text-primary;
 }
 
-// Use typography utilities
+// Use typography mixins located in tds-typography.scss
 h1 {
-  @include tds-heading-large;
-  margin-bottom: $tds-spacing-200;
+  @include brand-heading-fluid-light-xlarge;
+  margin-bottom: $spacing-200;
 }
 
 // Use spacing tokens
 .component {
-  padding: $tds-spacing-100;
-  margin: $tds-spacing-050;
-  border-radius: $tds-radius-100;
+  padding: $spacing-100;
+  margin: $spacing-050;
+  border-radius: $radius-100;
 }
 ```
 
@@ -53,48 +53,47 @@ All channel and brand palettes are included:
 
 ```
 dist/palettes/
-├── light-palette.scss          # Light mode palette
-├── dark-palette.scss           # Dark mode palette
-├── light-brand-colors.scss     # Light brand colors
-├── dark-brand-colors.scss      # Dark brand colors
-├── light-channels.scss         # Light channel colors
-├── dark-channels.scss          # Dark channel colors
-└── ... (20+ additional palettes)
+├── core-light.scss             # Core theme (light mode)
+├── core-dark.scss              # Core theme (dark mode)
+├── business-light.scss         # Business theme (light mode)
+├── business-dark.scss          # Business theme (dark mode)
+├── culture-light.scss          # Culture theme (light mode)
+├── culture-dark.scss           # Culture theme (dark mode)
+├── home-light.scss             # Home theme (light mode)
+├── home-dark.scss              # Home theme (dark mode)
+├── sport-light.scss            # Sport theme (light mode)
+├── sport-dark.scss             # Sport theme (dark mode)
+└── ... (14 additional theme variants)
 ```
 
 ## Package Contents
 
 ```
 dist/
-├── tds-layout.scss             # Layout and grid utilities
-├── tds-typography.scss         # Typography mixins and utilities
-├── variables.css               # CSS custom properties (compatible)
-└── palettes/                   # SCSS palette files
-    ├── light-*.scss
-    ├── dark-*.scss
-    └── foundation-*.scss
+├── tds-layout.scss         # Layout and grid utilities
+├── tds-typography.scss     # Typography mixins and utilities
+└── palettes/               # Theme-specific SCSS palette files
+    ├── business-light.scss
+    ├── business-dark.scss
+    ├── core-light.scss
+    ├── core-dark.scss
+    └── ... (24 total theme variants)
 ```
 
 ## Available Tokens
 
 ### Color Tokens
 
-All tokens follow a consistent naming pattern:
+All tokens follow a consistent naming pattern of $[MODE]-[THEME]-[TOKEN]. Colour tokens have been published in both light and dark mode files for each theme, where the client will be responsible for resolving dynamic references to tokens for the associated theme/channel.
 
 ```scss
-// Semantic colors (light mode)
-$tds-text-primary
-$tds-text-secondary
-$tds-text-tertiary
-$tds-surface-canvas
-$tds-surface-level-1
-$tds-border-primary
-
-// Brand colors
-$tds-brand-home-500
-$tds-brand-business-500
-$tds-brand-sport-500
-// ... and more channels
+// Semantic colors
+$[MODE-THEME]-text-primary
+$[MODE-THEME]-text-secondary
+$[MODE-THEME]-text-tertiary
+$[MODE-THEME]-surface-canvas
+$[MODE-THEME]-surface-level-1
+$[MODE-THEME]-border-primary
 
 // Dark mode variants
 // Use the palette files or CSS custom properties with light-dark()
@@ -103,30 +102,25 @@ $tds-brand-sport-500
 ### Spacing Tokens
 
 ```scss
-$tds-spacing-025    // 0.25rem
-$tds-spacing-050    // 0.5rem
-$tds-spacing-100    // 1rem
-$tds-spacing-200    // 1.5rem
-// ... scales up to $tds-spacing-400
+$spacing-025    // 0.25rem
+$spacing-050    // 0.5rem
+$spacing-100    // 1rem
+$spacing-200    // 1.5rem
+// ... scales up to $spacing-400
 ```
 
 ### Typography
 
 ```scss
 // Use typography mixins
-@include tds-heading-large;
-@include tds-body-standard;
-@include tds-label-small;
+@include brand-heading-fluid-light-large;
+@include utility-body-regular-medium;
+@include utility-label-small;
 ```
 
 ## Dark Mode Support
 
-The package includes dedicated dark mode palettes. Use CSS custom properties with `light-dark()` for best results:
-
-```scss
-color: light-dark($tds-text-primary, $tds-text-primary-dark);
-background: light-dark($tds-surface-canvas, $tds-surface-canvas-dark);
-```
+The package includes dedicated dark mode palettes that can be referenced where applicable.
 
 ## Compatibility
 
@@ -139,10 +133,10 @@ background: light-dark($tds-surface-canvas, $tds-surface-canvas-dark);
 To rebuild the package after modifying tokens:
 
 ```bash
-npm run build
+yarn build
 ```
 
-This will compile SCSS files with deduplication and asset distribution.
+This will compile SCSS files with asset distribution.
 
 ## License