@inversestudio/design-tokens 1.0.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 +339 -0
- package/dist/css/index.css +11 -0
- package/dist/css/tokens.css +123 -0
- package/dist/css/tokens.dark.css +93 -0
- package/dist/css/tokens.light.css +123 -0
- package/dist/esm/index.js +9 -0
- package/dist/esm/tokens.dark.js +80 -0
- package/dist/esm/tokens.js +132 -0
- package/dist/esm/tokens.light.js +132 -0
- package/dist/js/index.js +12 -0
- package/dist/js/tokens.dark.js +80 -0
- package/dist/js/tokens.js +132 -0
- package/dist/js/tokens.light.js +132 -0
- package/dist/json/tokens.dark.json +78 -0
- package/dist/json/tokens.dark.nested.json +110 -0
- package/dist/json/tokens.json +129 -0
- package/dist/json/tokens.light.json +129 -0
- package/dist/json/tokens.light.nested.json +183 -0
- package/dist/json/tokens.nested.json +183 -0
- package/dist/scss/_mixins.scss +59 -0
- package/dist/scss/_tokens.dark.scss +171 -0
- package/dist/scss/_tokens.light.scss +231 -0
- package/dist/scss/_tokens.scss +231 -0
- package/dist/scss/index.scss +13 -0
- package/dist/types/index.d.ts +9 -0
- package/dist/types/tokens.d.ts +441 -0
- package/dist/types/tokens.dark.d.ts +307 -0
- package/dist/types/tokens.light.d.ts +441 -0
- package/package.json +58 -0
package/README.md
ADDED
|
@@ -0,0 +1,339 @@
|
|
|
1
|
+
# IDS Design Tokens
|
|
2
|
+
|
|
3
|
+
Design tokens for the IDS (Inverse Design System), built with [Style Dictionary](https://amzn.github.io/style-dictionary/) and compatible with [Tokens Studio](https://tokens.studio/).
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @ids/design-tokens
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### CSS Custom Properties
|
|
14
|
+
|
|
15
|
+
```css
|
|
16
|
+
/* Import all tokens (light theme default) */
|
|
17
|
+
@import '@ids/design-tokens/css';
|
|
18
|
+
|
|
19
|
+
/* Or import specific theme */
|
|
20
|
+
@import '@ids/design-tokens/css/tokens.light.css';
|
|
21
|
+
@import '@ids/design-tokens/css/tokens.dark.css';
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
```css
|
|
25
|
+
.button {
|
|
26
|
+
background-color: var(--ids-color-element-primary-default);
|
|
27
|
+
color: var(--ids-color-element-primary-on-primary);
|
|
28
|
+
padding: var(--ids-spacing-0-75x) var(--ids-spacing-1x);
|
|
29
|
+
border-radius: var(--ids-border-radius-0-25x);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.button:hover {
|
|
33
|
+
background-color: var(--ids-color-element-primary-hover);
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### SCSS
|
|
38
|
+
|
|
39
|
+
```scss
|
|
40
|
+
// Import variables and mixins
|
|
41
|
+
@import '@ids/design-tokens/scss';
|
|
42
|
+
|
|
43
|
+
// Or import individual files
|
|
44
|
+
@import '@ids/design-tokens/scss/tokens';
|
|
45
|
+
@import '@ids/design-tokens/scss/mixins';
|
|
46
|
+
|
|
47
|
+
// Use variables directly
|
|
48
|
+
.button {
|
|
49
|
+
background-color: $ids-color-element-primary-default;
|
|
50
|
+
padding: $ids-spacing-0-75x $ids-spacing-1x;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// Or use utility mixins
|
|
54
|
+
.button {
|
|
55
|
+
@include ids-color(background-color, 'element-primary-default');
|
|
56
|
+
@include ids-spacing(padding, '1x');
|
|
57
|
+
@include ids-radius('0-25x');
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// Typography composite
|
|
61
|
+
.label {
|
|
62
|
+
@include ids-typography('label-1x');
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### JavaScript / TypeScript
|
|
67
|
+
|
|
68
|
+
```javascript
|
|
69
|
+
// ES Modules
|
|
70
|
+
import tokens from '@ids/design-tokens';
|
|
71
|
+
import { idsColorElementPrimaryDefault } from '@ids/design-tokens';
|
|
72
|
+
|
|
73
|
+
// CommonJS
|
|
74
|
+
const tokens = require('@ids/design-tokens');
|
|
75
|
+
|
|
76
|
+
// Access nested tokens
|
|
77
|
+
console.log(tokens.ids.color.element.primary.default);
|
|
78
|
+
// Output: '#4d5057'
|
|
79
|
+
|
|
80
|
+
// Or use flat exports
|
|
81
|
+
console.log(idsColorElementPrimaryDefault);
|
|
82
|
+
// Output: '#4d5057'
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### TypeScript with Full Type Safety
|
|
86
|
+
|
|
87
|
+
```typescript
|
|
88
|
+
import tokens, { IDSTokens } from '@ids/design-tokens';
|
|
89
|
+
|
|
90
|
+
// Full autocomplete and type checking
|
|
91
|
+
const primaryColor: string = tokens.ids.color.element.primary.default;
|
|
92
|
+
|
|
93
|
+
// Theme-specific imports
|
|
94
|
+
import * as lightTokens from '@ids/design-tokens/dist/types/tokens.light';
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### JSON
|
|
98
|
+
|
|
99
|
+
```javascript
|
|
100
|
+
// Flat structure
|
|
101
|
+
import tokens from '@ids/design-tokens/json';
|
|
102
|
+
// { "ids-color-element-primary-default": "#4d5057", ... }
|
|
103
|
+
|
|
104
|
+
// Nested structure
|
|
105
|
+
import tokens from '@ids/design-tokens/json/tokens.nested.json';
|
|
106
|
+
// { ids: { color: { element: { primary: { default: "#4d5057" } } } } }
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
## Theming
|
|
110
|
+
|
|
111
|
+
### CSS Theme Switching
|
|
112
|
+
|
|
113
|
+
```html
|
|
114
|
+
<!-- Light theme (default) -->
|
|
115
|
+
<body>
|
|
116
|
+
<!-- Uses :root tokens -->
|
|
117
|
+
</body>
|
|
118
|
+
|
|
119
|
+
<!-- Dark theme -->
|
|
120
|
+
<body data-theme="dark">
|
|
121
|
+
<!-- Uses [data-theme="dark"] tokens -->
|
|
122
|
+
</body>
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
```javascript
|
|
126
|
+
// Toggle theme
|
|
127
|
+
document.body.setAttribute('data-theme', 'dark');
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### React Theme Provider Example
|
|
131
|
+
|
|
132
|
+
```tsx
|
|
133
|
+
import { createContext, useContext, useState } from 'react';
|
|
134
|
+
|
|
135
|
+
const ThemeContext = createContext({ theme: 'light', setTheme: () => {} });
|
|
136
|
+
|
|
137
|
+
export function ThemeProvider({ children }) {
|
|
138
|
+
const [theme, setTheme] = useState('light');
|
|
139
|
+
|
|
140
|
+
return (
|
|
141
|
+
<ThemeContext.Provider value={{ theme, setTheme }}>
|
|
142
|
+
<div data-theme={theme}>{children}</div>
|
|
143
|
+
</ThemeContext.Provider>
|
|
144
|
+
);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
export const useTheme = () => useContext(ThemeContext);
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
## Token Structure
|
|
151
|
+
|
|
152
|
+
### Primitive Tokens (Core)
|
|
153
|
+
|
|
154
|
+
Located in `/core/` - Base values that should NOT be used directly in components.
|
|
155
|
+
|
|
156
|
+
- `ids.core.color.*` - Color palette (neutral, blue, red, green)
|
|
157
|
+
- `ids.core.sizing.*` - Base sizing unit (16px REM)
|
|
158
|
+
- `ids.core.font.*` - Font families, sizes, line heights
|
|
159
|
+
- `ids.core.borderRadius.*` - Base border radius
|
|
160
|
+
- `ids.core.borderWidth.*` - Border widths
|
|
161
|
+
|
|
162
|
+
### Semantic Tokens
|
|
163
|
+
|
|
164
|
+
Located in `/styles/` and `/theme/` - Meaningful tokens for component usage.
|
|
165
|
+
|
|
166
|
+
- `ids.color.element.*` - Interactive element colors (primary, secondary, disabled)
|
|
167
|
+
- `ids.color.border.*` - Border colors
|
|
168
|
+
- `ids.spacing.*` - Spacing scale (0.13x to 2.5x)
|
|
169
|
+
- `ids.dimension.*` - Element and icon dimensions
|
|
170
|
+
- `ids.borderRadius.*` - Semantic border radius
|
|
171
|
+
- `ids.border.*` - Composite border tokens
|
|
172
|
+
- `ids.typography.*` - Typography composites
|
|
173
|
+
|
|
174
|
+
## Development
|
|
175
|
+
|
|
176
|
+
### Build Tokens
|
|
177
|
+
|
|
178
|
+
```bash
|
|
179
|
+
# Install dependencies
|
|
180
|
+
npm install
|
|
181
|
+
|
|
182
|
+
# Build all outputs
|
|
183
|
+
npm run build
|
|
184
|
+
|
|
185
|
+
# Watch for changes
|
|
186
|
+
npm run build:watch
|
|
187
|
+
|
|
188
|
+
# Run tests
|
|
189
|
+
npm test
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
### Output Structure
|
|
193
|
+
|
|
194
|
+
```
|
|
195
|
+
dist/
|
|
196
|
+
├── css/
|
|
197
|
+
│ ├── tokens.css # Default (light theme)
|
|
198
|
+
│ ├── tokens.light.css # Light theme
|
|
199
|
+
│ ├── tokens.dark.css # Dark theme
|
|
200
|
+
│ └── index.css # All themes
|
|
201
|
+
├── scss/
|
|
202
|
+
│ ├── _tokens.scss # Default variables
|
|
203
|
+
│ ├── _tokens.light.scss # Light theme variables
|
|
204
|
+
│ ├── _mixins.scss # Utility mixins
|
|
205
|
+
│ └── index.scss # All imports
|
|
206
|
+
├── js/
|
|
207
|
+
│ ├── tokens.js # CommonJS default
|
|
208
|
+
│ ├── tokens.light.js # Light theme
|
|
209
|
+
│ └── index.js # All exports
|
|
210
|
+
├── esm/
|
|
211
|
+
│ ├── tokens.js # ES Modules default
|
|
212
|
+
│ ├── tokens.light.js # Light theme
|
|
213
|
+
│ └── index.js # All exports
|
|
214
|
+
├── json/
|
|
215
|
+
│ ├── tokens.json # Flat structure
|
|
216
|
+
│ ├── tokens.nested.json # Nested structure
|
|
217
|
+
│ └── tokens.light.json # Light theme
|
|
218
|
+
└── types/
|
|
219
|
+
├── tokens.d.ts # TypeScript definitions
|
|
220
|
+
├── tokens.light.d.ts # Light theme types
|
|
221
|
+
└── index.d.ts # All exports
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
## Storybook Integration
|
|
225
|
+
|
|
226
|
+
### Install Addon
|
|
227
|
+
|
|
228
|
+
```bash
|
|
229
|
+
npm install @storybook/addon-styling -D
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
### Configure `.storybook/preview.js`
|
|
233
|
+
|
|
234
|
+
```javascript
|
|
235
|
+
import '@ids/design-tokens/css';
|
|
236
|
+
|
|
237
|
+
export const parameters = {
|
|
238
|
+
backgrounds: {
|
|
239
|
+
default: 'light',
|
|
240
|
+
values: [
|
|
241
|
+
{ name: 'light', value: '#ffffff' },
|
|
242
|
+
{ name: 'dark', value: '#101114' },
|
|
243
|
+
],
|
|
244
|
+
},
|
|
245
|
+
};
|
|
246
|
+
|
|
247
|
+
// Theme decorator
|
|
248
|
+
export const decorators = [
|
|
249
|
+
(Story, context) => {
|
|
250
|
+
const theme = context.globals.theme || 'light';
|
|
251
|
+
return (
|
|
252
|
+
<div data-theme={theme}>
|
|
253
|
+
<Story />
|
|
254
|
+
</div>
|
|
255
|
+
);
|
|
256
|
+
},
|
|
257
|
+
];
|
|
258
|
+
|
|
259
|
+
export const globalTypes = {
|
|
260
|
+
theme: {
|
|
261
|
+
name: 'Theme',
|
|
262
|
+
description: 'Global theme for components',
|
|
263
|
+
defaultValue: 'light',
|
|
264
|
+
toolbar: {
|
|
265
|
+
icon: 'circlehollow',
|
|
266
|
+
items: ['light', 'dark'],
|
|
267
|
+
showName: true,
|
|
268
|
+
},
|
|
269
|
+
},
|
|
270
|
+
};
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
## CI/CD Pipeline Integration
|
|
274
|
+
|
|
275
|
+
### GitHub Actions Example
|
|
276
|
+
|
|
277
|
+
```yaml
|
|
278
|
+
name: Build and Publish Tokens
|
|
279
|
+
|
|
280
|
+
on:
|
|
281
|
+
push:
|
|
282
|
+
branches: [main]
|
|
283
|
+
paths:
|
|
284
|
+
- 'core/**'
|
|
285
|
+
- 'styles/**'
|
|
286
|
+
- 'theme/**'
|
|
287
|
+
- '$themes.json'
|
|
288
|
+
|
|
289
|
+
jobs:
|
|
290
|
+
build:
|
|
291
|
+
runs-on: ubuntu-latest
|
|
292
|
+
steps:
|
|
293
|
+
- uses: actions/checkout@v4
|
|
294
|
+
|
|
295
|
+
- name: Setup Node.js
|
|
296
|
+
uses: actions/setup-node@v4
|
|
297
|
+
with:
|
|
298
|
+
node-version: '20'
|
|
299
|
+
registry-url: 'https://registry.npmjs.org'
|
|
300
|
+
|
|
301
|
+
- name: Install dependencies
|
|
302
|
+
run: npm ci
|
|
303
|
+
|
|
304
|
+
- name: Build tokens
|
|
305
|
+
run: npm run build
|
|
306
|
+
|
|
307
|
+
- name: Run tests
|
|
308
|
+
run: npm test
|
|
309
|
+
|
|
310
|
+
- name: Publish to npm
|
|
311
|
+
run: npm publish --access public
|
|
312
|
+
env:
|
|
313
|
+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
|
314
|
+
```
|
|
315
|
+
|
|
316
|
+
## Token Naming Convention
|
|
317
|
+
|
|
318
|
+
Tokens follow a hierarchical naming pattern:
|
|
319
|
+
|
|
320
|
+
```
|
|
321
|
+
ids-{category}-{subcategory}-{variant}-{state}
|
|
322
|
+
```
|
|
323
|
+
|
|
324
|
+
Examples:
|
|
325
|
+
- `--ids-color-element-primary-default`
|
|
326
|
+
- `--ids-color-element-primary-hover`
|
|
327
|
+
- `--ids-spacing-1x`
|
|
328
|
+
- `--ids-border-radius-full`
|
|
329
|
+
|
|
330
|
+
## Contributing
|
|
331
|
+
|
|
332
|
+
1. Edit token JSON files in `/core/`, `/styles/`, or `/theme/`
|
|
333
|
+
2. Run `npm run build` to regenerate outputs
|
|
334
|
+
3. Run `npm test` to validate
|
|
335
|
+
4. Commit changes
|
|
336
|
+
|
|
337
|
+
## License
|
|
338
|
+
|
|
339
|
+
MIT
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* IDS Design Tokens - CSS Index
|
|
3
|
+
* Generated by Style Dictionary
|
|
4
|
+
*
|
|
5
|
+
* Import this file to get all theme tokens.
|
|
6
|
+
* Light theme is applied to :root
|
|
7
|
+
* Other themes use [data-theme="themeName"] selector
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
@import 'tokens.light.css';
|
|
11
|
+
@import 'tokens.dark.css';
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* IDS Design Tokens - light Theme
|
|
3
|
+
* Generated by Style Dictionary
|
|
4
|
+
* Do not edit directly
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/* ==========================================================================
|
|
8
|
+
Primitive Tokens (Core)
|
|
9
|
+
========================================================================== */
|
|
10
|
+
|
|
11
|
+
:root {
|
|
12
|
+
--ids-core-color-neutral-50: #ffffff;
|
|
13
|
+
--ids-core-color-neutral-100: #fafafb;
|
|
14
|
+
--ids-core-color-neutral-200: #f5f5f8;
|
|
15
|
+
--ids-core-color-neutral-300: #ebebef;
|
|
16
|
+
--ids-core-color-neutral-400: #e0e1e4;
|
|
17
|
+
--ids-core-color-neutral-500: #c5c6cb;
|
|
18
|
+
--ids-core-color-neutral-600: #adaeb3;
|
|
19
|
+
--ids-core-color-neutral-700: #8e9099;
|
|
20
|
+
--ids-core-color-neutral-800: #707784;
|
|
21
|
+
--ids-core-color-neutral-900: #4d5057;
|
|
22
|
+
--ids-core-color-neutral-950: #2d2f35;
|
|
23
|
+
--ids-core-color-neutral-1000: #101114;
|
|
24
|
+
--ids-core-color-blue-50: #e6edfb;
|
|
25
|
+
--ids-core-color-blue-100: #d1def8;
|
|
26
|
+
--ids-core-color-blue-200: #c3d8ff;
|
|
27
|
+
--ids-core-color-blue-300: #a2bae9;
|
|
28
|
+
--ids-core-color-blue-400: #7eaaff;
|
|
29
|
+
--ids-core-color-blue-500: #5c8fe8;
|
|
30
|
+
--ids-core-color-blue-600: #4a7ad4;
|
|
31
|
+
--ids-core-color-blue-700: #3a64b8;
|
|
32
|
+
--ids-core-color-blue-800: #27447c;
|
|
33
|
+
--ids-core-color-blue-900: #1e3560;
|
|
34
|
+
--ids-core-color-blue-950: #142442;
|
|
35
|
+
--ids-core-color-blue-1000: #0b1526;
|
|
36
|
+
--ids-core-color-red-50: #fef2f2;
|
|
37
|
+
--ids-core-color-red-100: #fee2e2;
|
|
38
|
+
--ids-core-color-red-200: #fecaca;
|
|
39
|
+
--ids-core-color-red-300: #fca5a5;
|
|
40
|
+
--ids-core-color-red-400: #f87171;
|
|
41
|
+
--ids-core-color-red-500: #ef4444;
|
|
42
|
+
--ids-core-color-red-600: #dc2626;
|
|
43
|
+
--ids-core-color-red-700: #b91c1c;
|
|
44
|
+
--ids-core-color-red-800: #991b1b;
|
|
45
|
+
--ids-core-color-red-900: #7f1d1d;
|
|
46
|
+
--ids-core-color-red-950: #5c1414;
|
|
47
|
+
--ids-core-color-red-1000: #350a0a;
|
|
48
|
+
--ids-core-color-green-50: #ecfdf5;
|
|
49
|
+
--ids-core-color-green-100: #d1fae5;
|
|
50
|
+
--ids-core-color-green-200: #a7f3d0;
|
|
51
|
+
--ids-core-color-green-300: #6ee7b7;
|
|
52
|
+
--ids-core-color-green-400: #34d399;
|
|
53
|
+
--ids-core-color-green-500: #10b981;
|
|
54
|
+
--ids-core-color-green-600: #059669;
|
|
55
|
+
--ids-core-color-green-700: #047857;
|
|
56
|
+
--ids-core-color-green-800: #065f46;
|
|
57
|
+
--ids-core-color-green-900: #064e3b;
|
|
58
|
+
--ids-core-color-green-950: #043b2c;
|
|
59
|
+
--ids-core-color-green-1000: #022419;
|
|
60
|
+
--ids-core-color-transparent: #00000000;
|
|
61
|
+
--ids-core-font-size-base: 16px;
|
|
62
|
+
--ids-core-font: Tomato Grotesk;
|
|
63
|
+
--ids-core-lineheight-base: 16px *1;
|
|
64
|
+
--ids-core-sizing-rem: 16px;
|
|
65
|
+
--ids-core-sizing-base: 16px;
|
|
66
|
+
--ids-core-borderradius-base: 16px;
|
|
67
|
+
--ids-core-borderwidth-slim: 1px;
|
|
68
|
+
--ids-core-borderwidth-thick: 2px;
|
|
69
|
+
|
|
70
|
+
/* ==========================================================================
|
|
71
|
+
Semantic Tokens
|
|
72
|
+
========================================================================== */
|
|
73
|
+
|
|
74
|
+
--ids-spacing-0-13x: 2px;
|
|
75
|
+
--ids-spacing-0-25x: 4px;
|
|
76
|
+
--ids-spacing-0-38x: 6px;
|
|
77
|
+
--ids-spacing-0-5x: 8px;
|
|
78
|
+
--ids-spacing-0-75x: 12px;
|
|
79
|
+
--ids-spacing-1x: 16px;
|
|
80
|
+
--ids-spacing-1-25x: 20px;
|
|
81
|
+
--ids-spacing-1-5x: 24px;
|
|
82
|
+
--ids-spacing-2x: 32px;
|
|
83
|
+
--ids-spacing-2-5x: 40px;
|
|
84
|
+
--ids-dimension-element-1x: 16px;
|
|
85
|
+
--ids-dimension-element-1-5x: 24px;
|
|
86
|
+
--ids-dimension-element-2x: 32px;
|
|
87
|
+
--ids-dimension-element-3x: 48px;
|
|
88
|
+
--ids-dimension-element-3-5x: 56px;
|
|
89
|
+
--ids-dimension-element-4-5x: 72px;
|
|
90
|
+
--ids-dimension-icon-1x: 16px;
|
|
91
|
+
--ids-dimension-icon-1-25x: 20px;
|
|
92
|
+
--ids-dimension-icon-1-5x: 24px;
|
|
93
|
+
--ids-typography-label-1x: [object Object];
|
|
94
|
+
--ids-borderradius-0-25x: 4px;
|
|
95
|
+
--ids-borderradius-full: 1600px;
|
|
96
|
+
--ids-border-focused: [object Object];
|
|
97
|
+
--ids-border-primary: [object Object];
|
|
98
|
+
--ids-border-disabled: [object Object];
|
|
99
|
+
--ids-border-transparent: [object Object];
|
|
100
|
+
--ids-color-element-primary-default: #4d5057;
|
|
101
|
+
--ids-color-element-primary-hover: #4d5057;
|
|
102
|
+
--ids-color-element-primary-active: #101114;
|
|
103
|
+
--ids-color-element-primary-onprimary: #ffffff;
|
|
104
|
+
--ids-color-element-secondary-default: #00000000;
|
|
105
|
+
--ids-color-element-secondary-hover: #e6edfb;
|
|
106
|
+
--ids-color-element-secondary-active: #d1def8;
|
|
107
|
+
--ids-color-element-secondary-onsecondary: #2d2f35;
|
|
108
|
+
--ids-color-element-primaryinverted-default: #ffffff;
|
|
109
|
+
--ids-color-element-primaryinverted-hover: #fafafb;
|
|
110
|
+
--ids-color-element-primaryinverted-active: #f5f5f8;
|
|
111
|
+
--ids-color-element-primaryinverted-onprimaryaccent: #101114;
|
|
112
|
+
--ids-color-element-primaryaccentinverted-default: #101114;
|
|
113
|
+
--ids-color-element-primaryaccentinverted-hover: #2d2f35;
|
|
114
|
+
--ids-color-element-primaryaccentinverted-active: #4d5057;
|
|
115
|
+
--ids-color-element-primaryaccentinverted-onprimaryaccentinverted: #ffffff;
|
|
116
|
+
--ids-color-element-disabled: #adaeb3;
|
|
117
|
+
--ids-color-element-ondisabled: #707784;
|
|
118
|
+
--ids-color-border-primary: #2d2f35;
|
|
119
|
+
--ids-color-border-disabled: #adaeb3;
|
|
120
|
+
--ids-color-border-muted: #e0e1e4;
|
|
121
|
+
--ids-color-border-subtle: #f5f5f8;
|
|
122
|
+
--ids-color-border-focus: #7eaaff;
|
|
123
|
+
}
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* IDS Design Tokens - dark Theme
|
|
3
|
+
* Generated by Style Dictionary
|
|
4
|
+
* Do not edit directly
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/* ==========================================================================
|
|
8
|
+
Primitive Tokens (Core)
|
|
9
|
+
========================================================================== */
|
|
10
|
+
|
|
11
|
+
[data-theme="dark"] {
|
|
12
|
+
--ids-core-color-neutral-50: #ffffff;
|
|
13
|
+
--ids-core-color-neutral-100: #fafafb;
|
|
14
|
+
--ids-core-color-neutral-200: #f5f5f8;
|
|
15
|
+
--ids-core-color-neutral-300: #ebebef;
|
|
16
|
+
--ids-core-color-neutral-400: #e0e1e4;
|
|
17
|
+
--ids-core-color-neutral-500: #c5c6cb;
|
|
18
|
+
--ids-core-color-neutral-600: #adaeb3;
|
|
19
|
+
--ids-core-color-neutral-700: #8e9099;
|
|
20
|
+
--ids-core-color-neutral-800: #707784;
|
|
21
|
+
--ids-core-color-neutral-900: #4d5057;
|
|
22
|
+
--ids-core-color-neutral-950: #2d2f35;
|
|
23
|
+
--ids-core-color-neutral-1000: #101114;
|
|
24
|
+
--ids-core-color-blue-50: #e6edfb;
|
|
25
|
+
--ids-core-color-blue-100: #d1def8;
|
|
26
|
+
--ids-core-color-blue-200: #c3d8ff;
|
|
27
|
+
--ids-core-color-blue-300: #a2bae9;
|
|
28
|
+
--ids-core-color-blue-400: #7eaaff;
|
|
29
|
+
--ids-core-color-blue-500: #5c8fe8;
|
|
30
|
+
--ids-core-color-blue-600: #4a7ad4;
|
|
31
|
+
--ids-core-color-blue-700: #3a64b8;
|
|
32
|
+
--ids-core-color-blue-800: #27447c;
|
|
33
|
+
--ids-core-color-blue-900: #1e3560;
|
|
34
|
+
--ids-core-color-blue-950: #142442;
|
|
35
|
+
--ids-core-color-blue-1000: #0b1526;
|
|
36
|
+
--ids-core-color-red-50: #fef2f2;
|
|
37
|
+
--ids-core-color-red-100: #fee2e2;
|
|
38
|
+
--ids-core-color-red-200: #fecaca;
|
|
39
|
+
--ids-core-color-red-300: #fca5a5;
|
|
40
|
+
--ids-core-color-red-400: #f87171;
|
|
41
|
+
--ids-core-color-red-500: #ef4444;
|
|
42
|
+
--ids-core-color-red-600: #dc2626;
|
|
43
|
+
--ids-core-color-red-700: #b91c1c;
|
|
44
|
+
--ids-core-color-red-800: #991b1b;
|
|
45
|
+
--ids-core-color-red-900: #7f1d1d;
|
|
46
|
+
--ids-core-color-red-950: #5c1414;
|
|
47
|
+
--ids-core-color-red-1000: #350a0a;
|
|
48
|
+
--ids-core-color-green-50: #ecfdf5;
|
|
49
|
+
--ids-core-color-green-100: #d1fae5;
|
|
50
|
+
--ids-core-color-green-200: #a7f3d0;
|
|
51
|
+
--ids-core-color-green-300: #6ee7b7;
|
|
52
|
+
--ids-core-color-green-400: #34d399;
|
|
53
|
+
--ids-core-color-green-500: #10b981;
|
|
54
|
+
--ids-core-color-green-600: #059669;
|
|
55
|
+
--ids-core-color-green-700: #047857;
|
|
56
|
+
--ids-core-color-green-800: #065f46;
|
|
57
|
+
--ids-core-color-green-900: #064e3b;
|
|
58
|
+
--ids-core-color-green-950: #043b2c;
|
|
59
|
+
--ids-core-color-green-1000: #022419;
|
|
60
|
+
--ids-core-color-transparent: #00000000;
|
|
61
|
+
--ids-core-sizing-rem: 16px;
|
|
62
|
+
--ids-core-sizing-base: 16px;
|
|
63
|
+
--ids-core-font-size-base: 16px;
|
|
64
|
+
--ids-core-font: Tomato Grotesk;
|
|
65
|
+
--ids-core-lineheight-base: 16px *1;
|
|
66
|
+
--ids-core-borderradius-base: 16px;
|
|
67
|
+
--ids-core-borderwidth-slim: 1px;
|
|
68
|
+
--ids-core-borderwidth-thick: 2px;
|
|
69
|
+
|
|
70
|
+
/* ==========================================================================
|
|
71
|
+
Semantic Tokens
|
|
72
|
+
========================================================================== */
|
|
73
|
+
|
|
74
|
+
--ids-spacing-0-13x: 2px;
|
|
75
|
+
--ids-spacing-0-25x: 4px;
|
|
76
|
+
--ids-spacing-0-38x: 6px;
|
|
77
|
+
--ids-spacing-0-5x: 8px;
|
|
78
|
+
--ids-spacing-0-75x: 12px;
|
|
79
|
+
--ids-spacing-1x: 16px;
|
|
80
|
+
--ids-spacing-1-25x: 20px;
|
|
81
|
+
--ids-spacing-1-5x: 24px;
|
|
82
|
+
--ids-spacing-2x: 32px;
|
|
83
|
+
--ids-spacing-2-5x: 40px;
|
|
84
|
+
--ids-dimension-element-1x: 16px;
|
|
85
|
+
--ids-dimension-element-1-5x: 24px;
|
|
86
|
+
--ids-dimension-element-2x: 32px;
|
|
87
|
+
--ids-dimension-element-3x: 48px;
|
|
88
|
+
--ids-dimension-element-3-5x: 56px;
|
|
89
|
+
--ids-dimension-element-4-5x: 72px;
|
|
90
|
+
--ids-dimension-icon-1x: 16px;
|
|
91
|
+
--ids-dimension-icon-1-25x: 20px;
|
|
92
|
+
--ids-dimension-icon-1-5x: 24px;
|
|
93
|
+
}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* IDS Design Tokens - light Theme
|
|
3
|
+
* Generated by Style Dictionary
|
|
4
|
+
* Do not edit directly
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
/* ==========================================================================
|
|
8
|
+
Primitive Tokens (Core)
|
|
9
|
+
========================================================================== */
|
|
10
|
+
|
|
11
|
+
:root {
|
|
12
|
+
--ids-core-color-neutral-50: #ffffff;
|
|
13
|
+
--ids-core-color-neutral-100: #fafafb;
|
|
14
|
+
--ids-core-color-neutral-200: #f5f5f8;
|
|
15
|
+
--ids-core-color-neutral-300: #ebebef;
|
|
16
|
+
--ids-core-color-neutral-400: #e0e1e4;
|
|
17
|
+
--ids-core-color-neutral-500: #c5c6cb;
|
|
18
|
+
--ids-core-color-neutral-600: #adaeb3;
|
|
19
|
+
--ids-core-color-neutral-700: #8e9099;
|
|
20
|
+
--ids-core-color-neutral-800: #707784;
|
|
21
|
+
--ids-core-color-neutral-900: #4d5057;
|
|
22
|
+
--ids-core-color-neutral-950: #2d2f35;
|
|
23
|
+
--ids-core-color-neutral-1000: #101114;
|
|
24
|
+
--ids-core-color-blue-50: #e6edfb;
|
|
25
|
+
--ids-core-color-blue-100: #d1def8;
|
|
26
|
+
--ids-core-color-blue-200: #c3d8ff;
|
|
27
|
+
--ids-core-color-blue-300: #a2bae9;
|
|
28
|
+
--ids-core-color-blue-400: #7eaaff;
|
|
29
|
+
--ids-core-color-blue-500: #5c8fe8;
|
|
30
|
+
--ids-core-color-blue-600: #4a7ad4;
|
|
31
|
+
--ids-core-color-blue-700: #3a64b8;
|
|
32
|
+
--ids-core-color-blue-800: #27447c;
|
|
33
|
+
--ids-core-color-blue-900: #1e3560;
|
|
34
|
+
--ids-core-color-blue-950: #142442;
|
|
35
|
+
--ids-core-color-blue-1000: #0b1526;
|
|
36
|
+
--ids-core-color-red-50: #fef2f2;
|
|
37
|
+
--ids-core-color-red-100: #fee2e2;
|
|
38
|
+
--ids-core-color-red-200: #fecaca;
|
|
39
|
+
--ids-core-color-red-300: #fca5a5;
|
|
40
|
+
--ids-core-color-red-400: #f87171;
|
|
41
|
+
--ids-core-color-red-500: #ef4444;
|
|
42
|
+
--ids-core-color-red-600: #dc2626;
|
|
43
|
+
--ids-core-color-red-700: #b91c1c;
|
|
44
|
+
--ids-core-color-red-800: #991b1b;
|
|
45
|
+
--ids-core-color-red-900: #7f1d1d;
|
|
46
|
+
--ids-core-color-red-950: #5c1414;
|
|
47
|
+
--ids-core-color-red-1000: #350a0a;
|
|
48
|
+
--ids-core-color-green-50: #ecfdf5;
|
|
49
|
+
--ids-core-color-green-100: #d1fae5;
|
|
50
|
+
--ids-core-color-green-200: #a7f3d0;
|
|
51
|
+
--ids-core-color-green-300: #6ee7b7;
|
|
52
|
+
--ids-core-color-green-400: #34d399;
|
|
53
|
+
--ids-core-color-green-500: #10b981;
|
|
54
|
+
--ids-core-color-green-600: #059669;
|
|
55
|
+
--ids-core-color-green-700: #047857;
|
|
56
|
+
--ids-core-color-green-800: #065f46;
|
|
57
|
+
--ids-core-color-green-900: #064e3b;
|
|
58
|
+
--ids-core-color-green-950: #043b2c;
|
|
59
|
+
--ids-core-color-green-1000: #022419;
|
|
60
|
+
--ids-core-color-transparent: #00000000;
|
|
61
|
+
--ids-core-font-size-base: 16px;
|
|
62
|
+
--ids-core-font: Tomato Grotesk;
|
|
63
|
+
--ids-core-lineheight-base: 16px *1;
|
|
64
|
+
--ids-core-sizing-rem: 16px;
|
|
65
|
+
--ids-core-sizing-base: 16px;
|
|
66
|
+
--ids-core-borderradius-base: 16px;
|
|
67
|
+
--ids-core-borderwidth-slim: 1px;
|
|
68
|
+
--ids-core-borderwidth-thick: 2px;
|
|
69
|
+
|
|
70
|
+
/* ==========================================================================
|
|
71
|
+
Semantic Tokens
|
|
72
|
+
========================================================================== */
|
|
73
|
+
|
|
74
|
+
--ids-spacing-0-13x: 2px;
|
|
75
|
+
--ids-spacing-0-25x: 4px;
|
|
76
|
+
--ids-spacing-0-38x: 6px;
|
|
77
|
+
--ids-spacing-0-5x: 8px;
|
|
78
|
+
--ids-spacing-0-75x: 12px;
|
|
79
|
+
--ids-spacing-1x: 16px;
|
|
80
|
+
--ids-spacing-1-25x: 20px;
|
|
81
|
+
--ids-spacing-1-5x: 24px;
|
|
82
|
+
--ids-spacing-2x: 32px;
|
|
83
|
+
--ids-spacing-2-5x: 40px;
|
|
84
|
+
--ids-dimension-element-1x: 16px;
|
|
85
|
+
--ids-dimension-element-1-5x: 24px;
|
|
86
|
+
--ids-dimension-element-2x: 32px;
|
|
87
|
+
--ids-dimension-element-3x: 48px;
|
|
88
|
+
--ids-dimension-element-3-5x: 56px;
|
|
89
|
+
--ids-dimension-element-4-5x: 72px;
|
|
90
|
+
--ids-dimension-icon-1x: 16px;
|
|
91
|
+
--ids-dimension-icon-1-25x: 20px;
|
|
92
|
+
--ids-dimension-icon-1-5x: 24px;
|
|
93
|
+
--ids-typography-label-1x: [object Object];
|
|
94
|
+
--ids-borderradius-0-25x: 4px;
|
|
95
|
+
--ids-borderradius-full: 1600px;
|
|
96
|
+
--ids-border-focused: [object Object];
|
|
97
|
+
--ids-border-primary: [object Object];
|
|
98
|
+
--ids-border-disabled: [object Object];
|
|
99
|
+
--ids-border-transparent: [object Object];
|
|
100
|
+
--ids-color-element-primary-default: #4d5057;
|
|
101
|
+
--ids-color-element-primary-hover: #4d5057;
|
|
102
|
+
--ids-color-element-primary-active: #101114;
|
|
103
|
+
--ids-color-element-primary-onprimary: #ffffff;
|
|
104
|
+
--ids-color-element-secondary-default: #00000000;
|
|
105
|
+
--ids-color-element-secondary-hover: #e6edfb;
|
|
106
|
+
--ids-color-element-secondary-active: #d1def8;
|
|
107
|
+
--ids-color-element-secondary-onsecondary: #2d2f35;
|
|
108
|
+
--ids-color-element-primaryinverted-default: #ffffff;
|
|
109
|
+
--ids-color-element-primaryinverted-hover: #fafafb;
|
|
110
|
+
--ids-color-element-primaryinverted-active: #f5f5f8;
|
|
111
|
+
--ids-color-element-primaryinverted-onprimaryaccent: #101114;
|
|
112
|
+
--ids-color-element-primaryaccentinverted-default: #101114;
|
|
113
|
+
--ids-color-element-primaryaccentinverted-hover: #2d2f35;
|
|
114
|
+
--ids-color-element-primaryaccentinverted-active: #4d5057;
|
|
115
|
+
--ids-color-element-primaryaccentinverted-onprimaryaccentinverted: #ffffff;
|
|
116
|
+
--ids-color-element-disabled: #adaeb3;
|
|
117
|
+
--ids-color-element-ondisabled: #707784;
|
|
118
|
+
--ids-color-border-primary: #2d2f35;
|
|
119
|
+
--ids-color-border-disabled: #adaeb3;
|
|
120
|
+
--ids-color-border-muted: #e0e1e4;
|
|
121
|
+
--ids-color-border-subtle: #f5f5f8;
|
|
122
|
+
--ids-color-border-focus: #7eaaff;
|
|
123
|
+
}
|