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

package/README.md

@@ -0,0 +1,190 @@
+# @times-design-system/theme-react
+
+Times Design System theme tokens, React hooks, and CSS variables for building themed applications.
+
+## Installation
+
+```bash
+npm install @times-design-system/theme-react
+```
+
+## Usage
+
+### JavaScript/React Tokens & Hooks
+
+```javascript
+import { tokens, useTypographyToken } from '@times-design-system/theme-react';
+
+// Use design tokens
+console.log(tokens.Foundation.fontSize100); // "2.25rem"
+console.log(tokens.semanticColor.text.primary); // "rgba(26, 26, 26, 1.00)"
+
+// Use typography hook in React components
+const MyComponent = () => {
+  const headingStyle = useTypographyToken('brand.heading.fluid.bold.large');
+  return <h1 style={headingStyle}>Heading</h1>;
+};
+```
+
+### CSS Custom Properties
+
+```html
+<!-- Link the CSS variables -->
+<link
+  rel="stylesheet"
+  href="node_modules/@times-design-system/theme-react/variables.css"
+/>
+```
+
+```css
+/* Use CSS variables in your stylesheets */
+:root {
+  --tds-font-size100: 2.25rem;
+  --tds-font-size050: 1.25rem;
+  --tds-spacing-050: 0.5rem;
+  /* 2,748+ design tokens as CSS variables */
+}
+
+h1 {
+  font-size: var(--tds-font-size100);
+  margin: var(--tds-spacing-050);
+}
+```
+
+### Import only specific modules
+
+```javascript
+// Tokens only
+import { tokens } from '@times-design-system/theme-react/tokens';
+
+// Hooks only
+import { useTypographyToken } from '@times-design-system/theme-react/hooks';
+
+// CSS only (already in package.json exports)
+import '@times-design-system/theme-react/variables.css';
+```
+
+## Available Exports
+
+### JavaScript Modules
+
+- **tokens** - Complete design token object with all Foundation, Palette, and Semantic tokens
+- **useTypographyToken** - React hook for applying typography styles to elements
+
+### CSS
+
+- **variables.css** - 2,748+ CSS custom properties (--tds-\*) covering:
+  - Font sizes: --tds-font-size0025 through --tds-font-size190
+  - Spacing: --tds-spacing-\* (fluid and static variants)
+  - Shadows: --tds-elevation-\*
+  - Colors: --tds-brand-_, --tds-semantic-_, etc.
+
+## Package Contents
+
+```
+dist/
+├── index.js/cjs          # Main export (tokens + hooks)
+├── tokens.js/cjs         # Design tokens only
+├── hooks.js/cjs          # React hooks only
+└── variables.css         # CSS custom properties
+```
+
+### Token Structure
+
+#### Foundation Tokens
+
+```javascript
+tokens.Foundation.fontSize010; // "0.75rem"
+tokens.Foundation.fontSize100; // "2.25rem"
+tokens.Foundation.spacing050; // "0.5rem"
+tokens.Foundation.spacing100; // "1rem"
+```
+
+#### Palette Tokens (Pre-resolved Colors)
+
+```javascript
+tokens.brand.primary; // Color ramp with 19 steps (100-1000)
+tokens.channels.comment; // Channel-specific colors
+tokens.dataVisualisation.data01; // Data visualization colors
+```
+
+#### Semantic Tokens
+
+```javascript
+tokens.semanticColor.surface.default; // "rgba(255, 255, 255, 1.00)"
+tokens.semanticColor.text.primary; // "rgba(26, 26, 26, 1.00)"
+tokens.semanticColor.interactive.primary; // Brand color for interactive elements
+```
+
+## React Hook Usage
+
+### useTypographyToken(tokenPath)
+
+Returns style object ready for use in React:
+
+```javascript
+const { useTypographyToken } from '@times-design-system/theme-react/hooks';
+
+export const Article = ({ title }) => {
+  // Get typography style for display heading
+  const headingStyle = useTypographyToken('brand.heading.fluid.bold.large');
+
+  // Get typography style for body text
+  const bodyStyle = useTypographyToken('utility.body.static.regular.medium');
+
+  return (
+    <>
+      <h1 style={headingStyle}>{title}</h1>
+      <p style={bodyStyle}>Article content...</p>
+    </>
+  );
+};
+```
+
+Returns object:
+
+```javascript
+{
+  fontFamily: 'Times Modern, serif',
+  fontSize: '2.25rem',
+  fontWeight: 700,
+  lineHeight: 1.2,
+  letterSpacing: '-0.02em'
+}
+```
+
+## Browser Support
+
+All CSS custom properties (--tds-\*) are supported in modern browsers (Chrome, Firefox, Safari, Edge).
+
+For older browsers, use the JavaScript tokens with fallback values:
+
+```javascript
+const fontSize = tokens.Foundation.fontSize100 || '2.25rem';
+```
+
+## Building
+
+To rebuild the package after modifying tokens:
+
+```bash
+npm run build
+```
+
+This will:
+
+1. Clean the `dist/` directory
+2. Build ESM and CJS JavaScript modules
+3. Copy CSS variables to dist/
+
+## Publishing
+
+```bash
+npm publish
+```
+
+The package is configured with public access and will publish to the public npm registry.
+
+## License
+
+ISC

package/dist/index.js

@@ -0,0 +1,8 @@
+// CSS Theme Package Entry Point
+// This package exports CSS variables
+
+const cssFiles = {
+  variables: './variables.css'
+};
+
+export { cssFiles };