@times-design-system/theme-css 1.5.0 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +134 -118
  2. package/dist/variables.css +6222 -5879
  3. package/package.json +2 -2
package/README.md CHANGED
@@ -1,190 +1,206 @@
1
- # @times-design-system/theme-react
1
+ # @times-design-system/theme-css
2
2
 
3
- Times Design System theme tokens, React hooks, and CSS variables for building themed applications.
3
+ Times Design System CSS theme package with 2,748+ pre-compiled CSS custom properties (variables) for building themed applications.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
- npm install @times-design-system/theme-react
8
+ npm install @times-design-system/theme-css
9
9
  ```
10
10
 
11
11
  ## Usage
12
12
 
13
- ### JavaScript/React Tokens & Hooks
14
-
15
- ```javascript
16
- import { tokens, useTypographyToken } from '@times-design-system/theme-react';
17
-
18
- // Use design tokens
19
- console.log(tokens.Foundation.fontSize100); // "2.25rem"
20
- console.log(tokens.semanticColor.text.primary); // "rgba(26, 26, 26, 1.00)"
21
-
22
- // Use typography hook in React components
23
- const MyComponent = () => {
24
- const headingStyle = useTypographyToken('brand.heading.fluid.bold.large');
25
- return <h1 style={headingStyle}>Heading</h1>;
26
- };
27
- ```
28
-
29
- ### CSS Custom Properties
13
+ ### Link CSS File
30
14
 
31
15
  ```html
32
- <!-- Link the CSS variables -->
16
+ <!-- Via CDN or npm node_modules -->
33
17
  <link
34
18
  rel="stylesheet"
35
- href="node_modules/@times-design-system/theme-react/variables.css"
19
+ href="node_modules/@times-design-system/theme-css/variables.css"
36
20
  />
37
21
  ```
38
22
 
23
+ ### Use CSS Variables in Your Stylesheet
24
+
39
25
  ```css
40
- /* Use CSS variables in your stylesheets */
41
- :root {
42
- --tds-font-size100: 2.25rem;
43
- --tds-font-size050: 1.25rem;
44
- --tds-spacing-050: 0.5rem;
45
- /* 2,748+ design tokens as CSS variables */
26
+ /* Color tokens */
27
+ body {
28
+ background-color: var(--tds-surface-canvas);
29
+ color: var(--tds-text-primary);
46
30
  }
47
31
 
48
- h1 {
49
- font-size: var(--tds-font-size100);
32
+ /* Spacing tokens */
33
+ .component {
34
+ padding: var(--tds-spacing-100);
50
35
  margin: var(--tds-spacing-050);
36
+ gap: var(--tds-spacing-200);
51
37
  }
52
- ```
53
-
54
- ### Import only specific modules
55
38
 
56
- ```javascript
57
- // Tokens only
58
- import { tokens } from '@times-design-system/theme-react/tokens';
39
+ /* Typography */
40
+ h1 {
41
+ font-size: var(--tds-font-size-100);
42
+ line-height: var(--tds-line-height-heading);
43
+ letter-spacing: var(--tds-letter-spacing-tight);
44
+ }
59
45
 
60
- // Hooks only
61
- import { useTypographyToken } from '@times-design-system/theme-react/hooks';
46
+ /* Dark mode with light-dark() */
47
+ .card {
48
+ background: light-dark(
49
+ var(--tds-surface-level-1),
50
+ var(--tds-surface-level-1-dark)
51
+ );
52
+ border-color: light-dark(
53
+ var(--tds-border-primary),
54
+ var(--tds-border-primary-dark)
55
+ );
56
+ }
62
57
 
63
- // CSS only (already in package.json exports)
64
- import '@times-design-system/theme-react/variables.css';
58
+ /* Shadows/Elevation */
59
+ .elevated {
60
+ box-shadow: var(--tds-elevation-100);
61
+ }
65
62
  ```
66
63
 
67
- ## Available Exports
64
+ ### Import in JavaScript
68
65
 
69
- ### JavaScript Modules
70
-
71
- - **tokens** - Complete design token object with all Foundation, Palette, and Semantic tokens
72
- - **useTypographyToken** - React hook for applying typography styles to elements
73
-
74
- ### CSS
66
+ ```javascript
67
+ // If bundling CSS
68
+ import '@times-design-system/theme-css/variables.css';
75
69
 
76
- - **variables.css** - 2,748+ CSS custom properties (--tds-\*) covering:
77
- - Font sizes: --tds-font-size0025 through --tds-font-size190
78
- - Spacing: --tds-spacing-\* (fluid and static variants)
79
- - Shadows: --tds-elevation-\*
80
- - Colors: --tds-brand-_, --tds-semantic-_, etc.
70
+ // Then use in JS
71
+ const element = document.querySelector('.component');
72
+ const spacing = getComputedStyle(element).getPropertyValue('--tds-spacing-100');
73
+ ```
81
74
 
82
75
  ## Package Contents
83
76
 
84
77
  ```
85
78
  dist/
86
- ├── index.js/cjs # Main export (tokens + hooks)
87
- ├── tokens.js/cjs # Design tokens only
88
- ├── hooks.js/cjs # React hooks only
89
- └── variables.css # CSS custom properties
79
+ └── variables.css # 2,748+ CSS custom properties
90
80
  ```
91
81
 
92
- ### Token Structure
82
+ ## Available Token Categories
93
83
 
94
- #### Foundation Tokens
84
+ ### Color Tokens
95
85
 
96
- ```javascript
97
- tokens.Foundation.fontSize010; // "0.75rem"
98
- tokens.Foundation.fontSize100; // "2.25rem"
99
- tokens.Foundation.spacing050; // "0.5rem"
100
- tokens.Foundation.spacing100; // "1rem"
86
+ All semantic and brand colors:
87
+
88
+ ```css
89
+ /* Semantic colors */
90
+ --tds-text-primary
91
+ --tds-text-secondary
92
+ --tds-text-tertiary
93
+ --tds-surface-canvas
94
+ --tds-surface-level-1
95
+ --tds-surface-level-2
96
+ --tds-border-primary
97
+ --tds-border-secondary
98
+
99
+ /* Brand/Channel colors (e.g.) */
100
+ --tds-brand-home-500
101
+ --tds-brand-business-500
102
+ --tds-channel-sport-500
103
+ --tds-channel-money-500
101
104
  ```
102
105
 
103
- #### Palette Tokens (Pre-resolved Colors)
106
+ ### Spacing Tokens
104
107
 
105
- ```javascript
106
- tokens.brand.primary; // Color ramp with 19 steps (100-1000)
107
- tokens.channels.comment; // Channel-specific colors
108
- tokens.dataVisualisation.data01; // Data visualization colors
108
+ ```css
109
+ --tds-spacing-025 /* 0.25rem */
110
+ --tds-spacing-050 /* 0.5rem */
111
+ --tds-spacing-100 /* 1rem */
112
+ --tds-spacing-200 /* 1.5rem */
113
+ --tds-spacing-300 /* 2rem */
114
+ --tds-spacing-400 /* 2.5rem */
109
115
  ```
110
116
 
111
- #### Semantic Tokens
117
+ ### Typography Tokens
112
118
 
113
- ```javascript
114
- tokens.semanticColor.surface.default; // "rgba(255, 255, 255, 1.00)"
115
- tokens.semanticColor.text.primary; // "rgba(26, 26, 26, 1.00)"
116
- tokens.semanticColor.interactive.primary; // Brand color for interactive elements
119
+ ```css
120
+ --tds-font-size-025 /* 0.75rem */
121
+ --tds-font-size-050 /* 1rem */
122
+ --tds-font-size-100 /* 2.25rem */
123
+ --tds-font-family-sans
124
+ --tds-font-family-serif
125
+ --tds-font-weight-regular /* 400 */
126
+ --tds-font-weight-bold /* 700 */
127
+ --tds-line-height-tight
128
+ --tds-line-height-normal
129
+ --tds-letter-spacing-tight
117
130
  ```
118
131
 
119
- ## React Hook Usage
132
+ ### Other Tokens
120
133
 
121
- ### useTypographyToken(tokenPath)
122
-
123
- Returns style object ready for use in React:
134
+ ```css
135
+ --tds-radius-100 /* Border radius */
136
+ --tds-radius-200
137
+ --tds-elevation-100 /* Box shadows */
138
+ --tds-elevation-200
139
+ --tds-transition-normal
140
+ --tds-transition-smooth
141
+ ```
124
142
 
125
- ```javascript
126
- const { useTypographyToken } from '@times-design-system/theme-react/hooks';
143
+ ## Dark Mode
127
144
 
128
- export const Article = ({ title }) => {
129
- // Get typography style for display heading
130
- const headingStyle = useTypographyToken('brand.heading.fluid.bold.large');
145
+ All tokens support light and dark variants through CSS variable naming. Use with `light-dark()` for automatic switching:
131
146
 
132
- // Get typography style for body text
133
- const bodyStyle = useTypographyToken('utility.body.static.regular.medium');
147
+ ```css
148
+ :root {
149
+ color-scheme: light dark;
150
+ }
134
151
 
135
- return (
136
- <>
137
- <h1 style={headingStyle}>{title}</h1>
138
- <p style={bodyStyle}>Article content...</p>
139
- </>
152
+ body {
153
+ color: light-dark(var(--tds-text-primary), var(--tds-text-primary-dark));
154
+ background: light-dark(
155
+ var(--tds-surface-canvas),
156
+ var(--tds-surface-canvas-dark)
140
157
  );
141
- };
142
- ```
143
-
144
- Returns object:
158
+ }
145
159
 
146
- ```javascript
147
- {
148
- fontFamily: 'Times Modern, serif',
149
- fontSize: '2.25rem',
150
- fontWeight: 700,
151
- lineHeight: 1.2,
152
- letterSpacing: '-0.02em'
160
+ @media (prefers-color-scheme: dark) {
161
+ :root {
162
+ --tds-text-primary: #ffffff;
163
+ --tds-surface-canvas: #000000;
164
+ /* ... */
165
+ }
153
166
  }
154
167
  ```
155
168
 
156
169
  ## Browser Support
157
170
 
158
- All CSS custom properties (--tds-\*) are supported in modern browsers (Chrome, Firefox, Safari, Edge).
171
+ - **Modern browsers**: Full support with `light-dark()` and CSS custom properties
172
+ - **All other modern browsers (Chrome, Firefox, Safari, Edge)**: CSS custom properties supported
173
+ - **Fallback**: Provide fallback values for older browsers
159
174
 
160
- For older browsers, use the JavaScript tokens with fallback values:
161
-
162
- ```javascript
163
- const fontSize = tokens.Foundation.fontSize100 || '2.25rem';
175
+ ```css
176
+ .component {
177
+ /* Fallback for older browsers */
178
+ padding: 1rem;
179
+ /* Override if CSS variables supported */
180
+ padding: var(--tds-spacing-100, 1rem);
181
+ }
164
182
  ```
165
183
 
166
- ## Building
184
+ ## File Size
167
185
 
168
- To rebuild the package after modifying tokens:
186
+ - **variables.css**: ~314KB (uncompressed)
187
+ - **variables.css (gzipped)**: ~20KB
188
+ - **CSS custom properties**: 2,748+
169
189
 
170
- ```bash
171
- npm run build
172
- ```
190
+ ## Compatibility
173
191
 
174
- This will:
192
+ - **Node**: ≥ 14.0.0
193
+ - **Browsers**: All modern browsers (IE not supported, use fallbacks)
194
+ - **CSS**: CSS Custom Properties Level 1
175
195
 
176
- 1. Clean the `dist/` directory
177
- 2. Build ESM and CJS JavaScript modules
178
- 3. Copy CSS variables to dist/
196
+ ## Building
179
197
 
180
- ## Publishing
198
+ To rebuild the package after modifying tokens:
181
199
 
182
200
  ```bash
183
- npm publish
201
+ npm run build
184
202
  ```
185
203
 
186
- The package is configured with public access and will publish to the public npm registry.
187
-
188
204
  ## License
189
205
 
190
206
  ISC