@times-design-system/theme-css 1.5.0 → 1.7.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.
- package/README.md +134 -118
- package/dist/variables.css +8455 -7620
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,190 +1,206 @@
|
|
|
1
|
-
# @times-design-system/theme-
|
|
1
|
+
# @times-design-system/theme-css
|
|
2
2
|
|
|
3
|
-
Times Design System theme
|
|
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-
|
|
8
|
+
npm install @times-design-system/theme-css
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
13
|
-
###
|
|
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
|
-
<!--
|
|
16
|
+
<!-- Via CDN or npm node_modules -->
|
|
33
17
|
<link
|
|
34
18
|
rel="stylesheet"
|
|
35
|
-
href="node_modules/@times-design-system/theme-
|
|
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
|
-
/*
|
|
41
|
-
|
|
42
|
-
--tds-
|
|
43
|
-
--tds-
|
|
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
|
-
|
|
49
|
-
|
|
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
|
-
|
|
57
|
-
|
|
58
|
-
|
|
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
|
-
|
|
61
|
-
|
|
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
|
-
|
|
64
|
-
|
|
58
|
+
/* Shadows/Elevation */
|
|
59
|
+
.elevated {
|
|
60
|
+
box-shadow: var(--tds-elevation-100);
|
|
61
|
+
}
|
|
65
62
|
```
|
|
66
63
|
|
|
67
|
-
|
|
64
|
+
### Import in JavaScript
|
|
68
65
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
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
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
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
|
-
|
|
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
|
-
|
|
82
|
+
## Available Token Categories
|
|
93
83
|
|
|
94
|
-
|
|
84
|
+
### Color Tokens
|
|
95
85
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
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
|
-
|
|
106
|
+
### Spacing Tokens
|
|
104
107
|
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
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
|
-
|
|
117
|
+
### Typography Tokens
|
|
112
118
|
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
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
|
-
|
|
132
|
+
### Other Tokens
|
|
120
133
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
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
|
-
|
|
126
|
-
const { useTypographyToken } from '@times-design-system/theme-react/hooks';
|
|
143
|
+
## Dark Mode
|
|
127
144
|
|
|
128
|
-
|
|
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
|
-
|
|
133
|
-
|
|
147
|
+
```css
|
|
148
|
+
:root {
|
|
149
|
+
color-scheme: light dark;
|
|
150
|
+
}
|
|
134
151
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
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
|
-
|
|
147
|
-
{
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
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
|
-
|
|
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
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
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
|
-
##
|
|
184
|
+
## File Size
|
|
167
185
|
|
|
168
|
-
|
|
186
|
+
- **variables.css**: ~314KB (uncompressed)
|
|
187
|
+
- **variables.css (gzipped)**: ~20KB
|
|
188
|
+
- **CSS custom properties**: 2,748+
|
|
169
189
|
|
|
170
|
-
|
|
171
|
-
npm run build
|
|
172
|
-
```
|
|
190
|
+
## Compatibility
|
|
173
191
|
|
|
174
|
-
|
|
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
|
-
|
|
177
|
-
2. Build ESM and CJS JavaScript modules
|
|
178
|
-
3. Copy CSS variables to dist/
|
|
196
|
+
## Building
|
|
179
197
|
|
|
180
|
-
|
|
198
|
+
To rebuild the package after modifying tokens:
|
|
181
199
|
|
|
182
200
|
```bash
|
|
183
|
-
npm
|
|
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
|