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

package/README.md

@@ -5,7 +5,7 @@ Times Design System CSS theme package with 2,748+ pre-compiled CSS custom proper
 ## Installation
 
 ```bash
-npm install @times-design-system/theme-css
+yarn add @times-design-system/theme-css
 ```
 
 ## Usage
@@ -18,50 +18,47 @@ npm install @times-design-system/theme-css
   rel="stylesheet"
   href="node_modules/@times-design-system/theme-css/variables.css"
 />
+
+<!-- Via CDN with cachable version reference -->
+<link
+  rel="stylesheet"
+  href="https://unpkg.com/@times-design-system/theme-css@[VERSION_NUMBER]/dist/variables.css"
+/>
 ```
 
 ### Use CSS Variables in Your Stylesheet
 
 ```css
-/* Color tokens */
+/* Color tokens - prescoped within media queries for both mode (light/dark) and theme (e.g. [data-theme="sport"])*/
 body {
-  background-color: var(--tds-surface-canvas);
-  color: var(--tds-text-primary);
+  background-color: var(surface-canvas);
+  color: var(text-primary);
 }
 
 /* Spacing tokens */
 .component {
-  padding: var(--tds-spacing-100);
-  margin: var(--tds-spacing-050);
-  gap: var(--tds-spacing-200);
-}
-
-/* Typography */
-h1 {
-  font-size: var(--tds-font-size-100);
-  line-height: var(--tds-line-height-heading);
-  letter-spacing: var(--tds-letter-spacing-tight);
-}
-
-/* Dark mode with light-dark() */
-.card {
-  background: light-dark(
-    var(--tds-surface-level-1),
-    var(--tds-surface-level-1-dark)
-  );
-  border-color: light-dark(
-    var(--tds-border-primary),
-    var(--tds-border-primary-dark)
-  );
+  padding: var(spacing-100);
+  margin: var(spacing-050);
+  gap: var(spacing-200);
 }
 
 /* Shadows/Elevation */
 .elevated {
-  box-shadow: var(--tds-elevation-100);
+  box-shadow: var(elevation-100);
 }
 ```
 
-### Import in JavaScript
+### Use Typographic classes in markup
+
+```js
+/* Typography */
+/* Typographic styling should be adopted through typographic classes */
+<h1 className="brand-heading-fluid-bold-xlarge">Styled Heading</h1>
+
+<Text typographyStyle="brand-heading-fluid-bold-xlarge">Styled Text Component</Text>
+```
+
+### Alternative Import in JavaScript
 
 ```javascript
 // If bundling CSS
@@ -69,7 +66,7 @@ import '@times-design-system/theme-css/variables.css';
 
 // Then use in JS
 const element = document.querySelector('.component');
-const spacing = getComputedStyle(element).getPropertyValue('--tds-spacing-100');
+const spacing = getComputedStyle(element).getPropertyValue('spacing-100');
 ```
 
 ## Package Contents
@@ -87,88 +84,62 @@ All semantic and brand colors:
 
 ```css
 /* Semantic colors */
---tds-text-primary
---tds-text-secondary
---tds-text-tertiary
---tds-surface-canvas
---tds-surface-level-1
---tds-surface-level-2
---tds-border-primary
---tds-border-secondary
+text-primary
+text-secondary
+text-tertiary
+surface-canvas
+surface-level-1
+surface-level-2
+border-primary
+border-secondary
 
 /* Brand/Channel colors (e.g.) */
---tds-brand-home-500
---tds-brand-business-500
---tds-channel-sport-500
---tds-channel-money-500
+brand-home-500
+brand-business-500
+channel-sport-500
+channel-money-500
 ```
 
 ### Spacing Tokens
 
 ```css
---tds-spacing-025    /* 0.25rem */
---tds-spacing-050    /* 0.5rem */
---tds-spacing-100    /* 1rem */
---tds-spacing-200    /* 1.5rem */
---tds-spacing-300    /* 2rem */
---tds-spacing-400    /* 2.5rem */
+spacing-025    /* 0.25rem */
+spacing-050    /* 0.5rem */
+spacing-100    /* 1rem */
+spacing-200    /* 1.5rem */
+spacing-300    /* 2rem */
+spacing-400    /* 2.5rem */
 ```
 
 ### Typography Tokens
 
 ```css
---tds-font-size-025  /* 0.75rem */
---tds-font-size-050  /* 1rem */
---tds-font-size-100  /* 2.25rem */
---tds-font-family-sans
---tds-font-family-serif
---tds-font-weight-regular  /* 400 */
---tds-font-weight-bold     /* 700 */
---tds-line-height-tight
---tds-line-height-normal
---tds-letter-spacing-tight
+font-size-025  /* 0.75rem */
+font-size-050  /* 1rem */
+font-size-100  /* 2.25rem */
+font-family-sans
+font-family-serif
+font-weight-regular  /* 400 */
+font-weight-bold     /* 700 */
+line-height-tight
+line-height-normal
+letter-spacing-tight
 ```
 
 ### Other Tokens
 
 ```css
---tds-radius-100      /* Border radius */
---tds-radius-200
---tds-elevation-100   /* Box shadows */
---tds-elevation-200
---tds-transition-normal
---tds-transition-smooth
-```
-
-## Dark Mode
-
-All tokens support light and dark variants through CSS variable naming. Use with `light-dark()` for automatic switching:
-
-```css
-:root {
-  color-scheme: light dark;
-}
-
-body {
-  color: light-dark(var(--tds-text-primary), var(--tds-text-primary-dark));
-  background: light-dark(
-    var(--tds-surface-canvas),
-    var(--tds-surface-canvas-dark)
-  );
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --tds-text-primary: #ffffff;
-    --tds-surface-canvas: #000000;
-    /* ... */
-  }
-}
+radius-100      /* Border radius */
+radius-200
+elevation-100   /* Box shadows */
+elevation-200
+transition-normal
+transition-smooth
 ```
 
 ## Browser Support
 
-- **Modern browsers**: Full support with `light-dark()` and CSS custom properties
+- **Modern browsers**: Full support with scoped CSS
 - **All other modern browsers (Chrome, Firefox, Safari, Edge)**: CSS custom properties supported
 - **Fallback**: Provide fallback values for older browsers
 
@@ -177,7 +148,7 @@ body {
   /* Fallback for older browsers */
   padding: 1rem;
   /* Override if CSS variables supported */
-  padding: var(--tds-spacing-100, 1rem);
+  padding: var(spacing-100, 1rem);
 }
 ```
 
@@ -198,7 +169,7 @@ body {
 To rebuild the package after modifying tokens:
 
 ```bash
-npm run build
+yarn build
 ```
 
 ## License