@fastwork/xosmoz-theme 0.0.3
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 +289 -0
- package/dist/base.css +23 -0
- package/dist/index-B3oQ5FIa.d.mts +259 -0
- package/dist/index-B3oQ5FIa.d.ts +259 -0
- package/dist/index.d.mts +109 -0
- package/dist/index.d.ts +109 -0
- package/dist/index.js +876 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +839 -0
- package/dist/index.mjs.map +1 -0
- package/dist/semantic.css +51 -0
- package/dist/themes/cyberpunk.css +27 -0
- package/dist/themes/dark.css +27 -0
- package/dist/themes/forest.css +27 -0
- package/dist/themes/light.css +27 -0
- package/dist/themes/ocean.css +27 -0
- package/dist/themes.css +153 -0
- package/dist/tokens.d.mts +1 -0
- package/dist/tokens.d.ts +1 -0
- package/dist/tokens.js +547 -0
- package/dist/tokens.js.map +1 -0
- package/dist/tokens.mjs +523 -0
- package/dist/tokens.mjs.map +1 -0
- package/dist/variables.css +290 -0
- package/dist/xosmoz.css +377 -0
- package/package.json +59 -0
package/README.md
ADDED
|
@@ -0,0 +1,289 @@
|
|
|
1
|
+
# @fastwork/xosmoz-theme
|
|
2
|
+
|
|
3
|
+
Design tokens and theming system for the Xosmoz design system.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @fastwork/xosmoz-theme
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### Multi-Theme System (DaisyUI-style) 🎨
|
|
14
|
+
|
|
15
|
+
Xosmoz includes a powerful multi-theme system inspired by DaisyUI. Choose from predefined themes or create your own!
|
|
16
|
+
|
|
17
|
+
#### Available Themes
|
|
18
|
+
|
|
19
|
+
- **light** - Clean, modern light theme (default)
|
|
20
|
+
- **dark** - Elegant dark theme
|
|
21
|
+
- **cyberpunk** - Neon colors on dark background
|
|
22
|
+
- **forest** - Natural greens and earthy tones
|
|
23
|
+
- **ocean** - Deep blues and aqua tones
|
|
24
|
+
|
|
25
|
+
#### Quick Start
|
|
26
|
+
|
|
27
|
+
```css
|
|
28
|
+
/* Import base design tokens */
|
|
29
|
+
@import '@fastwork/xosmoz-theme/css/variables';
|
|
30
|
+
@import '@fastwork/xosmoz-theme/css/base';
|
|
31
|
+
|
|
32
|
+
/* Import all themes */
|
|
33
|
+
@import '@fastwork/xosmoz-theme/themes';
|
|
34
|
+
|
|
35
|
+
/* OR import specific themes only */
|
|
36
|
+
@import '@fastwork/xosmoz-theme/themes/light';
|
|
37
|
+
@import '@fastwork/xosmoz-theme/themes/dark';
|
|
38
|
+
@import '@fastwork/xosmoz-theme/themes/cyberpunk';
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Then set the theme via HTML attribute:
|
|
42
|
+
|
|
43
|
+
```html
|
|
44
|
+
<!-- Light theme (default) -->
|
|
45
|
+
<html>...</html>
|
|
46
|
+
|
|
47
|
+
<!-- Dark theme -->
|
|
48
|
+
<html data-theme="dark">...</html>
|
|
49
|
+
|
|
50
|
+
<!-- Cyberpunk theme -->
|
|
51
|
+
<html data-theme="cyberpunk">...</html>
|
|
52
|
+
|
|
53
|
+
<!-- Forest theme -->
|
|
54
|
+
<html data-theme="forest">...</html>
|
|
55
|
+
|
|
56
|
+
<!-- Ocean theme -->
|
|
57
|
+
<html data-theme="ocean">...</html>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
#### Using Theme Variables
|
|
61
|
+
|
|
62
|
+
All themes use the same semantic CSS variables, so your components work across all themes:
|
|
63
|
+
|
|
64
|
+
```css
|
|
65
|
+
.button {
|
|
66
|
+
background-color: var(--xz-primary);
|
|
67
|
+
color: var(--xz-primary-foreground);
|
|
68
|
+
padding: var(--xz-spacing-4);
|
|
69
|
+
border-radius: var(--xz-radius-md);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.card {
|
|
73
|
+
background: var(--xz-card);
|
|
74
|
+
color: var(--xz-card-foreground);
|
|
75
|
+
border: 1px solid var(--xz-border);
|
|
76
|
+
box-shadow: var(--xz-shadow-md);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.alert-success {
|
|
80
|
+
background: var(--xz-success);
|
|
81
|
+
color: var(--xz-success-foreground);
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
#### Theme Switching with JavaScript
|
|
86
|
+
|
|
87
|
+
```javascript
|
|
88
|
+
function setTheme(themeName) {
|
|
89
|
+
document.documentElement.setAttribute('data-theme', themeName);
|
|
90
|
+
localStorage.setItem('theme', themeName);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
// Usage
|
|
94
|
+
setTheme('dark'); // Switch to dark theme
|
|
95
|
+
setTheme('cyberpunk'); // Switch to cyberpunk theme
|
|
96
|
+
setTheme('light'); // Switch to light theme
|
|
97
|
+
|
|
98
|
+
// Load saved theme on page load
|
|
99
|
+
const savedTheme = localStorage.getItem('theme') || 'light';
|
|
100
|
+
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
#### Creating Custom Themes
|
|
104
|
+
|
|
105
|
+
You can create custom themes in two ways:
|
|
106
|
+
|
|
107
|
+
**1. CSS-only (Recommended for simple themes)**
|
|
108
|
+
|
|
109
|
+
```css
|
|
110
|
+
[data-theme="my-custom-theme"] {
|
|
111
|
+
--xz-background: #ffffff;
|
|
112
|
+
--xz-foreground: #000000;
|
|
113
|
+
--xz-primary: #ff6b6b;
|
|
114
|
+
--xz-primary-foreground: #ffffff;
|
|
115
|
+
--xz-secondary: #4ecdc4;
|
|
116
|
+
--xz-secondary-foreground: #ffffff;
|
|
117
|
+
/* ... other theme variables */
|
|
118
|
+
}
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
**2. Programmatic theme creation**
|
|
122
|
+
|
|
123
|
+
```typescript
|
|
124
|
+
import { createCustomTheme, themes } from '@fastwork/xosmoz-theme';
|
|
125
|
+
|
|
126
|
+
const myTheme = createCustomTheme(
|
|
127
|
+
'sunset',
|
|
128
|
+
{
|
|
129
|
+
primary: '#ff6b6b',
|
|
130
|
+
primaryForeground: '#ffffff',
|
|
131
|
+
secondary: '#feca57',
|
|
132
|
+
secondaryForeground: '#000000',
|
|
133
|
+
background: '#2d3436',
|
|
134
|
+
foreground: '#dfe6e9',
|
|
135
|
+
// ... other colors
|
|
136
|
+
},
|
|
137
|
+
'dark' // Base theme to extend from
|
|
138
|
+
);
|
|
139
|
+
|
|
140
|
+
// Use the theme configuration
|
|
141
|
+
console.log(myTheme.colors.primary); // '#ff6b6b'
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
#### Theme Variables Reference
|
|
145
|
+
|
|
146
|
+
All themes support these semantic CSS variables:
|
|
147
|
+
|
|
148
|
+
- `--xz-background` / `--xz-foreground`
|
|
149
|
+
- `--xz-primary` / `--xz-primary-foreground`
|
|
150
|
+
- `--xz-secondary` / `--xz-secondary-foreground`
|
|
151
|
+
- `--xz-accent` / `--xz-accent-foreground`
|
|
152
|
+
- `--xz-success` / `--xz-success-foreground`
|
|
153
|
+
- `--xz-warning` / `--xz-warning-foreground`
|
|
154
|
+
- `--xz-destructive` / `--xz-destructive-foreground`
|
|
155
|
+
- `--xz-muted` / `--xz-muted-foreground`
|
|
156
|
+
- `--xz-card` / `--xz-card-foreground`
|
|
157
|
+
- `--xz-popover` / `--xz-popover-foreground`
|
|
158
|
+
- `--xz-border` / `--xz-input` / `--xz-ring`
|
|
159
|
+
|
|
160
|
+
### Using Design Tokens in JavaScript/TypeScript
|
|
161
|
+
|
|
162
|
+
```typescript
|
|
163
|
+
import { colors, typography, spacing } from '@fastwork/xosmoz-theme';
|
|
164
|
+
|
|
165
|
+
// Access color tokens
|
|
166
|
+
console.log(colors.primary[500]); // '#0ea5e9'
|
|
167
|
+
|
|
168
|
+
// Access typography
|
|
169
|
+
console.log(typography.fontSize.lg); // '1.125rem'
|
|
170
|
+
|
|
171
|
+
// Access spacing
|
|
172
|
+
console.log(spacing[4]); // '1rem'
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
### Using the Theme Object
|
|
176
|
+
|
|
177
|
+
```typescript
|
|
178
|
+
import { defaultTheme, createTheme } from '@fastwork/xosmoz-theme';
|
|
179
|
+
|
|
180
|
+
// Use default theme
|
|
181
|
+
console.log(defaultTheme);
|
|
182
|
+
|
|
183
|
+
// Create custom theme
|
|
184
|
+
const customTheme = createTheme({
|
|
185
|
+
colors: {
|
|
186
|
+
primary: {
|
|
187
|
+
// Override primary colors
|
|
188
|
+
500: '#custom-color',
|
|
189
|
+
// ... other shades
|
|
190
|
+
},
|
|
191
|
+
},
|
|
192
|
+
});
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
### Generate CSS Variables Programmatically
|
|
196
|
+
|
|
197
|
+
```typescript
|
|
198
|
+
import { generateCSSVariables, defaultTheme } from '@fastwork/xosmoz-theme';
|
|
199
|
+
|
|
200
|
+
// Generate CSS custom properties as a string
|
|
201
|
+
const cssVars = generateCSSVariables(defaultTheme);
|
|
202
|
+
console.log(cssVars);
|
|
203
|
+
// Output:
|
|
204
|
+
// :root {
|
|
205
|
+
// --xz-color-primary-50: #f0f9ff;
|
|
206
|
+
// --xz-color-primary-100: #e0f2fe;
|
|
207
|
+
// ...
|
|
208
|
+
// }
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
## Design Tokens
|
|
212
|
+
|
|
213
|
+
### Colors
|
|
214
|
+
- **Primary, Secondary, Accent** - Main brand colors
|
|
215
|
+
- **Neutral** - Grayscale palette
|
|
216
|
+
- **Semantic colors** - Success, Warning, Error, Info
|
|
217
|
+
- Each color has **11 shades** (50-950) for maximum flexibility
|
|
218
|
+
|
|
219
|
+
### Typography
|
|
220
|
+
- **Font sizes**: xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl
|
|
221
|
+
- **Font weights**: thin, extralight, light, normal, medium, semibold, bold, extrabold, black
|
|
222
|
+
- **Font families**: sans, serif, mono
|
|
223
|
+
- **Line heights**: none, tight, snug, normal, relaxed, loose
|
|
224
|
+
|
|
225
|
+
### Spacing
|
|
226
|
+
- Comprehensive spacing scale from **0 to 96**
|
|
227
|
+
- Based on **rem units** for accessibility
|
|
228
|
+
- Includes fractional values (0.5, 1.5, 2.5, etc.)
|
|
229
|
+
|
|
230
|
+
### Border Radius
|
|
231
|
+
- From **none** to **full** circle
|
|
232
|
+
- Standard sizes: sm, base, md, lg, xl, 2xl, 3xl
|
|
233
|
+
|
|
234
|
+
### Shadows
|
|
235
|
+
- Multiple elevation levels: xs, sm, base, md, lg, xl, 2xl
|
|
236
|
+
- Inner shadow support
|
|
237
|
+
- Optimized for light and dark modes
|
|
238
|
+
|
|
239
|
+
## Available CSS Files
|
|
240
|
+
|
|
241
|
+
After building, the following CSS files are generated in `dist/`:
|
|
242
|
+
|
|
243
|
+
### Design Token Files
|
|
244
|
+
- **`variables.css`** - All design token CSS variables (colors, typography, spacing, etc.)
|
|
245
|
+
- **`base.css`** - Base styles and CSS resets
|
|
246
|
+
- **`xosmoz.css`** - Complete legacy bundle (variables + semantic + base)
|
|
247
|
+
|
|
248
|
+
### Theme Files (DaisyUI-style)
|
|
249
|
+
- **`themes.css`** - All 5 predefined themes in one file
|
|
250
|
+
- **`themes/light.css`** - Light theme only
|
|
251
|
+
- **`themes/dark.css`** - Dark theme only
|
|
252
|
+
- **`themes/cyberpunk.css`** - Cyberpunk theme only
|
|
253
|
+
- **`themes/forest.css`** - Forest theme only
|
|
254
|
+
- **`themes/ocean.css`** - Ocean theme only
|
|
255
|
+
|
|
256
|
+
### Import Examples
|
|
257
|
+
|
|
258
|
+
```css
|
|
259
|
+
/* Recommended: Base tokens + all themes */
|
|
260
|
+
@import '@fastwork/xosmoz-theme/css/variables';
|
|
261
|
+
@import '@fastwork/xosmoz-theme/css/base';
|
|
262
|
+
@import '@fastwork/xosmoz-theme/themes';
|
|
263
|
+
|
|
264
|
+
/* OR: Import only specific themes */
|
|
265
|
+
@import '@fastwork/xosmoz-theme/css/variables';
|
|
266
|
+
@import '@fastwork/xosmoz-theme/css/base';
|
|
267
|
+
@import '@fastwork/xosmoz-theme/themes/light';
|
|
268
|
+
@import '@fastwork/xosmoz-theme/themes/dark';
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
## Development
|
|
272
|
+
|
|
273
|
+
```bash
|
|
274
|
+
# Build the package
|
|
275
|
+
npm run build
|
|
276
|
+
|
|
277
|
+
# Watch mode for development
|
|
278
|
+
npm run dev
|
|
279
|
+
|
|
280
|
+
# Lint code
|
|
281
|
+
npm run lint
|
|
282
|
+
|
|
283
|
+
# Clean build artifacts
|
|
284
|
+
npm run clean
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
## License
|
|
288
|
+
|
|
289
|
+
MIT
|
package/dist/base.css
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/* Xosmoz Base Styles */
|
|
2
|
+
|
|
3
|
+
*,
|
|
4
|
+
*::before,
|
|
5
|
+
*::after {
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
margin: 0;
|
|
8
|
+
padding: 0;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
html {
|
|
12
|
+
-webkit-font-smoothing: antialiased;
|
|
13
|
+
-moz-osx-font-smoothing: grayscale;
|
|
14
|
+
text-rendering: optimizeLegibility;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
body {
|
|
18
|
+
font-family: var(--xz-font-family-sans);
|
|
19
|
+
font-size: var(--xz-font-size-base);
|
|
20
|
+
line-height: var(--xz-line-height-normal);
|
|
21
|
+
color: var(--xz-foreground);
|
|
22
|
+
background-color: var(--xz-background);
|
|
23
|
+
}
|
|
@@ -0,0 +1,259 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Theme type definitions
|
|
3
|
+
*/
|
|
4
|
+
interface ColorToken {
|
|
5
|
+
50: string;
|
|
6
|
+
100: string;
|
|
7
|
+
200: string;
|
|
8
|
+
300: string;
|
|
9
|
+
400: string;
|
|
10
|
+
500: string;
|
|
11
|
+
600: string;
|
|
12
|
+
700: string;
|
|
13
|
+
800: string;
|
|
14
|
+
900: string;
|
|
15
|
+
1000?: string;
|
|
16
|
+
1100?: string;
|
|
17
|
+
}
|
|
18
|
+
interface ThemeColors {
|
|
19
|
+
primary: ColorToken;
|
|
20
|
+
neutral: ColorToken;
|
|
21
|
+
green: ColorToken;
|
|
22
|
+
yellow: ColorToken;
|
|
23
|
+
red: ColorToken;
|
|
24
|
+
orange: ColorToken;
|
|
25
|
+
purple: ColorToken;
|
|
26
|
+
cyan: ColorToken;
|
|
27
|
+
'black-alpha': ColorToken;
|
|
28
|
+
'white-alpha': ColorToken;
|
|
29
|
+
}
|
|
30
|
+
interface TypographyScale {
|
|
31
|
+
50: string;
|
|
32
|
+
100: string;
|
|
33
|
+
200: string;
|
|
34
|
+
300: string;
|
|
35
|
+
400: string;
|
|
36
|
+
500: string;
|
|
37
|
+
600: string;
|
|
38
|
+
700: string;
|
|
39
|
+
800: string;
|
|
40
|
+
900: string;
|
|
41
|
+
1000: string;
|
|
42
|
+
1100: string;
|
|
43
|
+
1200: string;
|
|
44
|
+
1300: string;
|
|
45
|
+
1400: string;
|
|
46
|
+
1500: string;
|
|
47
|
+
1600: string;
|
|
48
|
+
}
|
|
49
|
+
interface FontWeights {
|
|
50
|
+
100: number;
|
|
51
|
+
200: number;
|
|
52
|
+
300: number;
|
|
53
|
+
400: number;
|
|
54
|
+
500: number;
|
|
55
|
+
600: number;
|
|
56
|
+
700: number;
|
|
57
|
+
800: number;
|
|
58
|
+
900: number;
|
|
59
|
+
}
|
|
60
|
+
interface TypographyToken {
|
|
61
|
+
fontFamily: string;
|
|
62
|
+
fontSize: {
|
|
63
|
+
desktop: string;
|
|
64
|
+
mobile: string;
|
|
65
|
+
};
|
|
66
|
+
fontWeight: number;
|
|
67
|
+
}
|
|
68
|
+
interface HeadingTokens {
|
|
69
|
+
h1: TypographyToken;
|
|
70
|
+
h2: TypographyToken;
|
|
71
|
+
h3: TypographyToken;
|
|
72
|
+
h4: TypographyToken;
|
|
73
|
+
h5: TypographyToken;
|
|
74
|
+
h6: TypographyToken;
|
|
75
|
+
}
|
|
76
|
+
interface TitleTokens {
|
|
77
|
+
title1: TypographyToken;
|
|
78
|
+
title2: TypographyToken;
|
|
79
|
+
title3: TypographyToken;
|
|
80
|
+
title4: TypographyToken;
|
|
81
|
+
}
|
|
82
|
+
interface SubtitleTokens {
|
|
83
|
+
subtitle1Bold: TypographyToken;
|
|
84
|
+
subtitle1Regular: TypographyToken;
|
|
85
|
+
subtitle2Bold: TypographyToken;
|
|
86
|
+
subtitle2Regular: TypographyToken;
|
|
87
|
+
subtitle3Bold: TypographyToken;
|
|
88
|
+
subtitle3Regular: TypographyToken;
|
|
89
|
+
}
|
|
90
|
+
interface BodyTokens {
|
|
91
|
+
body1: TypographyToken;
|
|
92
|
+
body2: TypographyToken;
|
|
93
|
+
body3: TypographyToken;
|
|
94
|
+
body4: TypographyToken;
|
|
95
|
+
}
|
|
96
|
+
interface SpacingScale {
|
|
97
|
+
0: string;
|
|
98
|
+
px: string;
|
|
99
|
+
0.5: string;
|
|
100
|
+
1: string;
|
|
101
|
+
1.5: string;
|
|
102
|
+
2: string;
|
|
103
|
+
2.5: string;
|
|
104
|
+
3: string;
|
|
105
|
+
3.5: string;
|
|
106
|
+
4: string;
|
|
107
|
+
5: string;
|
|
108
|
+
6: string;
|
|
109
|
+
7: string;
|
|
110
|
+
8: string;
|
|
111
|
+
9: string;
|
|
112
|
+
10: string;
|
|
113
|
+
11: string;
|
|
114
|
+
12: string;
|
|
115
|
+
14: string;
|
|
116
|
+
16: string;
|
|
117
|
+
20: string;
|
|
118
|
+
24: string;
|
|
119
|
+
28: string;
|
|
120
|
+
32: string;
|
|
121
|
+
36: string;
|
|
122
|
+
40: string;
|
|
123
|
+
44: string;
|
|
124
|
+
48: string;
|
|
125
|
+
52: string;
|
|
126
|
+
56: string;
|
|
127
|
+
60: string;
|
|
128
|
+
64: string;
|
|
129
|
+
72: string;
|
|
130
|
+
80: string;
|
|
131
|
+
96: string;
|
|
132
|
+
}
|
|
133
|
+
interface BorderRadius {
|
|
134
|
+
none: string;
|
|
135
|
+
sm: string;
|
|
136
|
+
base: string;
|
|
137
|
+
md: string;
|
|
138
|
+
lg: string;
|
|
139
|
+
xl: string;
|
|
140
|
+
'2xl': string;
|
|
141
|
+
'3xl': string;
|
|
142
|
+
full: string;
|
|
143
|
+
}
|
|
144
|
+
interface Shadows {
|
|
145
|
+
xs: string;
|
|
146
|
+
sm: string;
|
|
147
|
+
base: string;
|
|
148
|
+
md: string;
|
|
149
|
+
lg: string;
|
|
150
|
+
xl: string;
|
|
151
|
+
'2xl': string;
|
|
152
|
+
inner: string;
|
|
153
|
+
none: string;
|
|
154
|
+
}
|
|
155
|
+
interface Theme {
|
|
156
|
+
colors: ThemeColors;
|
|
157
|
+
typography: {
|
|
158
|
+
fontSize: TypographyScale;
|
|
159
|
+
fontWeight: FontWeights;
|
|
160
|
+
fontFamily: {
|
|
161
|
+
primary: string;
|
|
162
|
+
secondary: string;
|
|
163
|
+
};
|
|
164
|
+
lineHeight: {
|
|
165
|
+
'100pct': string;
|
|
166
|
+
'125pct': string;
|
|
167
|
+
'135pct': string;
|
|
168
|
+
'150pct': string;
|
|
169
|
+
'165pct': string;
|
|
170
|
+
'200pct': string;
|
|
171
|
+
};
|
|
172
|
+
headings: HeadingTokens;
|
|
173
|
+
titles: TitleTokens;
|
|
174
|
+
subtitles: SubtitleTokens;
|
|
175
|
+
body: BodyTokens;
|
|
176
|
+
};
|
|
177
|
+
spacing: SpacingScale;
|
|
178
|
+
borderRadius: BorderRadius;
|
|
179
|
+
shadows: Shadows;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
/**
|
|
183
|
+
* Color design tokens
|
|
184
|
+
*/
|
|
185
|
+
|
|
186
|
+
declare const primary: ColorToken;
|
|
187
|
+
declare const neutral: ColorToken;
|
|
188
|
+
declare const green: ColorToken;
|
|
189
|
+
declare const yellow: ColorToken;
|
|
190
|
+
declare const red: ColorToken;
|
|
191
|
+
declare const orange: ColorToken;
|
|
192
|
+
declare const purple: ColorToken;
|
|
193
|
+
declare const cyan: ColorToken;
|
|
194
|
+
declare const blackAlpha: ColorToken;
|
|
195
|
+
declare const whiteAlpha: ColorToken;
|
|
196
|
+
declare const colors: ThemeColors;
|
|
197
|
+
|
|
198
|
+
/**
|
|
199
|
+
* Typography design tokens
|
|
200
|
+
*/
|
|
201
|
+
|
|
202
|
+
declare const fontSize: TypographyScale;
|
|
203
|
+
declare const fontWeight: FontWeights;
|
|
204
|
+
declare const fontFamily: {
|
|
205
|
+
primary: string;
|
|
206
|
+
secondary: string;
|
|
207
|
+
};
|
|
208
|
+
declare const lineHeight: {
|
|
209
|
+
'100pct': string;
|
|
210
|
+
'125pct': string;
|
|
211
|
+
'135pct': string;
|
|
212
|
+
'150pct': string;
|
|
213
|
+
'165pct': string;
|
|
214
|
+
'200pct': string;
|
|
215
|
+
};
|
|
216
|
+
declare const headings: HeadingTokens;
|
|
217
|
+
declare const titles: TitleTokens;
|
|
218
|
+
declare const subtitles: SubtitleTokens;
|
|
219
|
+
declare const body: BodyTokens;
|
|
220
|
+
declare const typography: {
|
|
221
|
+
fontSize: TypographyScale;
|
|
222
|
+
fontWeight: FontWeights;
|
|
223
|
+
fontFamily: {
|
|
224
|
+
primary: string;
|
|
225
|
+
secondary: string;
|
|
226
|
+
};
|
|
227
|
+
lineHeight: {
|
|
228
|
+
'100pct': string;
|
|
229
|
+
'125pct': string;
|
|
230
|
+
'135pct': string;
|
|
231
|
+
'150pct': string;
|
|
232
|
+
'165pct': string;
|
|
233
|
+
'200pct': string;
|
|
234
|
+
};
|
|
235
|
+
headings: HeadingTokens;
|
|
236
|
+
titles: TitleTokens;
|
|
237
|
+
subtitles: SubtitleTokens;
|
|
238
|
+
body: BodyTokens;
|
|
239
|
+
};
|
|
240
|
+
|
|
241
|
+
/**
|
|
242
|
+
* Spacing design tokens
|
|
243
|
+
*/
|
|
244
|
+
|
|
245
|
+
declare const spacing: SpacingScale;
|
|
246
|
+
|
|
247
|
+
/**
|
|
248
|
+
* Shadow design tokens
|
|
249
|
+
*/
|
|
250
|
+
|
|
251
|
+
declare const shadows: Shadows;
|
|
252
|
+
|
|
253
|
+
/**
|
|
254
|
+
* Border radius design tokens
|
|
255
|
+
*/
|
|
256
|
+
|
|
257
|
+
declare const borderRadius: BorderRadius;
|
|
258
|
+
|
|
259
|
+
export { type TitleTokens as A, type BodyTokens as B, type ColorToken as C, type SpacingScale as D, type BorderRadius as E, type FontWeights as F, type Shadows as G, type HeadingTokens as H, type SubtitleTokens as S, type Theme as T, purple as a, blackAlpha as b, cyan as c, colors as d, fontWeight as e, fontSize as f, green as g, fontFamily as h, headings as i, body as j, typography as k, lineHeight as l, spacing as m, neutral as n, orange as o, primary as p, shadows as q, red as r, subtitles as s, titles as t, borderRadius as u, type ThemeColors as v, whiteAlpha as w, type TypographyScale as x, yellow as y, type TypographyToken as z };
|