@igrec-j/design-tokens-test 0.1.0 → 0.2.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 (6) hide show
  1. package/README.md +27 -4
  2. package/build/css/variables-dark.css +126 -63
  3. package/build/css/variables.css +126 -63
  4. package/package.json +7 -3
  5. package/tokens/02-Semantic/Dark.json +1296 -644
  6. package/tokens/02-Semantic/Light.json +1296 -644
package/README.md CHANGED
@@ -2,20 +2,43 @@
2
2
 
3
3
  🚧 **This is a personal test/prototype** - Testing design token pipeline before company rollout.
4
4
 
5
- ## Installation (Testing)
5
+ ## Installation
6
6
  ```bash
7
7
  npm install @igrec-j/design-tokens-test
8
8
  ```
9
9
 
10
10
  ## Usage
11
+
12
+ Both the light and dark theme CSS files need to be imported. The light theme sets all tokens on `:root`, and the dark theme overrides the semantic tokens when `data-theme="dark"` is applied.
13
+
14
+ ### HTML
11
15
  ```html
12
16
  <link rel="stylesheet" href="node_modules/@igrec-j/design-tokens-test/build/css/variables.css">
13
17
  <link rel="stylesheet" href="node_modules/@igrec-j/design-tokens-test/build/css/variables-dark.css">
14
18
  ```
15
19
 
16
- ### Dark Mode
17
- ```javascript
20
+ ### CSS `@import`
21
+ ```css
22
+ @import '@igrec-j/design-tokens-test/build/css/variables.css';
23
+ @import '@igrec-j/design-tokens-test/build/css/variables-dark.css';
24
+ ```
25
+
26
+ ### JavaScript / Bundlers (Vite, webpack, etc.)
27
+ ```js
28
+ import '@igrec-j/design-tokens-test/build/css/variables.css';
29
+ import '@igrec-j/design-tokens-test/build/css/variables-dark.css';
30
+ ```
31
+
32
+ ## Switching Themes
33
+
34
+ Toggle dark mode by setting `data-theme="dark"` on the root element:
35
+
36
+ ```js
37
+ // Enable dark mode
18
38
  document.documentElement.setAttribute('data-theme', 'dark');
39
+
40
+ // Revert to light mode
41
+ document.documentElement.removeAttribute('data-theme');
19
42
  ```
20
43
 
21
44
  ## Testing Notes
@@ -23,5 +46,5 @@ document.documentElement.setAttribute('data-theme', 'dark');
23
46
  - [x] Token export from Figma
24
47
  - [x] Build system (Style Dictionary)
25
48
  - [x] Light/Dark theme switching
26
- - [ ] npm publish
49
+ - [x] npm publish
27
50
  - [ ] Install test in sample project
package/build/css/variables-dark.css CHANGED
@@ -65,69 +65,132 @@
65
65
  --actionLinkForegroundFocus: var(--colourSemanticBlue800);
66
66
  --actionLinkForegroundPressed: var(--colourSemanticBlue950);
67
67
  --actionLinkForegroundDisabled: var(--colourNeutral400);
68
- --communicationMarkersSemanticBackgroundSuccess: var(--colourSemanticGreen700);
69
- --communicationMarkersSemanticBackgroundWarning: var(--colourSemanticOrange700);
70
- --communicationMarkersSemanticBackgroundError: var(--colourSemanticRed700);
71
- --communicationMarkersSemanticBackgroundNeutral: var(--colourNeutral500);
72
- --communicationMarkersSemanticBackgroundInformation: var(--colourSemanticBlue700);
73
- --communicationMarkersSemanticForgroundSuccess: var(--colourNeutral000);
74
- --communicationMarkersSemanticForgroundWarning: var(--colourNeutral000);
75
- --communicationMarkersSemanticForgroundError: var(--colourNeutral000);
76
- --communicationMarkersSemanticForgroundNeutral: var(--colourNeutral000);
77
- --communicationMarkersSemanticForgroundInformation: var(--colourNeutral000);
78
- --communicationMarkersSemanticBorderSuccess: var(--colourTransparent100);
79
- --communicationMarkersSemanticBorderWarning: var(--colourTransparent100);
80
- --communicationMarkersSemanticBorderNeutral: var(--colourTransparent100);
81
- --communicationMarkersSemanticBorderInformation: var(--colourTransparent100);
82
- --communicationMarkersSemanticBorderError: var(--colourTransparent100);
83
- --communicationMarkersAccentBorder002: var(--colourTransparent100);
84
- --communicationMarkersAccentBorder004: var(--colourTransparent100);
85
- --communicationMarkersAccentBorder003: var(--colourTransparent100);
86
- --communicationMarkersAccentBorder005: var(--colourTransparent100);
87
- --communicationMarkersAccentBorder006: var(--colourTransparent100);
88
- --communicationMarkersAccentBorder007: var(--colourTransparent100);
89
- --communicationMarkersAccentBorder008: var(--colourTransparent100);
90
- --communicationMarkersAccentBorder009: var(--colourTransparent100);
91
- --communicationMarkersAccentBorder001: var(--colourTransparent100);
92
- --communicationMarkersAccentBorderBlank: var(--colourTransparent100);
93
- --communicationMarkersAccentForground004: var(--colourNeutral000);
94
- --communicationMarkersAccentForground002: var(--colourNeutral000);
95
- --communicationMarkersAccentForground003: var(--colourNeutral000);
96
- --communicationMarkersAccentForground005: var(--colourNeutral000);
97
- --communicationMarkersAccentForground006: var(--colourNeutral000);
98
- --communicationMarkersAccentForground007: var(--colourNeutral000);
99
- --communicationMarkersAccentForground008: var(--colourNeutral000);
100
- --communicationMarkersAccentForground009: var(--colourNeutral000);
101
- --communicationMarkersAccentForground001: var(--colourNeutral000);
102
- --communicationMarkersAccentForgroundBlank: var(--colourNeutral000);
103
- --communicationMarkersAccentBackground004: var(--colourSemanticPurple700);
104
- --communicationMarkersAccentBackground002: var(--colourSemanticPink700);
105
- --communicationMarkersAccentBackground003: var(--colourSemanticFuchsia700);
106
- --communicationMarkersAccentBackground005: var(--colourSemanticIndigo700);
107
- --communicationMarkersAccentBackground006: var(--colourSemanticSky700);
108
- --communicationMarkersAccentBackground007: var(--colourSemanticTeal700);
109
- --communicationMarkersAccentBackground008: var(--colourSemanticEmrald700);
110
- --communicationMarkersAccentBackground009: var(--colourSemanticLime700);
111
- --communicationMarkersAccentBackground001: var(--colourSemanticRose700);
112
- --communicationMarkersAccentBackgroundBlank: var(--colourNeutral950);
113
- --communicationMarkersGhostBackgroundNeutral: var(--colourTransparent100);
114
- --communicationMarkersGhostForgroundNeutral: var(--colourNeutral000);
115
- --communicationMarkersGhostBorderNeutral: var(--colourTransparent100);
116
- --communicationMarkersNeutralBackground001: var(--colourNeutral950);
117
- --communicationMarkersNeutralBackground002: var(--colourNeutral900);
118
- --communicationMarkersNeutralBackground003: var(--colourNeutral800);
119
- --communicationMarkersNeutralBackground004: var(--colourNeutral700);
120
- --communicationMarkersNeutralBackground005: var(--colourNeutral600);
121
- --communicationMarkersNeutralForground001: var(--colourNeutral000);
122
- --communicationMarkersNeutralForground002: var(--colourNeutral000);
123
- --communicationMarkersNeutralForground003: var(--colourNeutral000);
124
- --communicationMarkersNeutralForground004: var(--colourNeutral000);
125
- --communicationMarkersNeutralForground005: var(--colourNeutral000);
126
- --communicationMarkersNeutralBorder001: var(--colourTransparent100);
127
- --communicationMarkersNeutralBorder002: var(--colourTransparent100);
128
- --communicationMarkersNeutralBorder003: var(--colourTransparent100);
129
- --communicationMarkersNeutralBorder004: var(--colourTransparent100);
130
- --communicationMarkersNeutralBorder005: var(--colourTransparent100);
68
+ --communicationMarkersSemanticDefaultBackgroundSuccess: var(--colourSemanticGreen700);
69
+ --communicationMarkersSemanticDefaultBackgroundWarning: var(--colourSemanticOrange700);
70
+ --communicationMarkersSemanticDefaultBackgroundError: var(--colourSemanticRed700);
71
+ --communicationMarkersSemanticDefaultBackgroundNeutral: var(--colourNeutral500);
72
+ --communicationMarkersSemanticDefaultBackgroundInformation: var(--colourSemanticBlue700);
73
+ --communicationMarkersSemanticDefaultForgroundSuccess: var(--colourNeutral000);
74
+ --communicationMarkersSemanticDefaultForgroundWarning: var(--colourNeutral000);
75
+ --communicationMarkersSemanticDefaultForgroundError: var(--colourNeutral000);
76
+ --communicationMarkersSemanticDefaultForgroundNeutral: var(--colourNeutral000);
77
+ --communicationMarkersSemanticDefaultForgroundInformation: var(--colourNeutral000);
78
+ --communicationMarkersSemanticDefaultBorderSuccess: var(--colourTransparent100);
79
+ --communicationMarkersSemanticDefaultBorderWarning: var(--colourTransparent100);
80
+ --communicationMarkersSemanticDefaultBorderNeutral: var(--colourTransparent100);
81
+ --communicationMarkersSemanticDefaultBorderInformation: var(--colourTransparent100);
82
+ --communicationMarkersSemanticDefaultBorderError: var(--colourTransparent100);
83
+ --communicationMarkersSemanticGhostBackgroundNeutral: var(--colourTransparent950);
84
+ --communicationMarkersSemanticGhostBackgroundInformation: var(--colourTransparent950);
85
+ --communicationMarkersSemanticGhostBackgroundSuccess: var(--colourTransparent950);
86
+ --communicationMarkersSemanticGhostBackgroundWarning: var(--colourTransparent950);
87
+ --communicationMarkersSemanticGhostBackgroundError: var(--colourTransparent950);
88
+ --communicationMarkersSemanticGhostForgroundNeutral: var(--colourNeutral000);
89
+ --communicationMarkersSemanticGhostForgroundInformation: var(--colourNeutral000);
90
+ --communicationMarkersSemanticGhostForgroundSuccess: var(--colourNeutral000);
91
+ --communicationMarkersSemanticGhostForgroundWarning: var(--colourNeutral000);
92
+ --communicationMarkersSemanticGhostForgroundError: var(--colourNeutral000);
93
+ --communicationMarkersSemanticGhostBorderNeutral: var(--colourTransparent950);
94
+ --communicationMarkersSemanticGhostBorderInformation: var(--colourTransparent950);
95
+ --communicationMarkersSemanticGhostBorderSuccess: var(--colourTransparent950);
96
+ --communicationMarkersSemanticGhostBorderWarning: var(--colourTransparent950);
97
+ --communicationMarkersSemanticGhostBorderError: var(--colourTransparent950);
98
+ --communicationMarkersAccentDefaultBorder002: var(--colourTransparent100);
99
+ --communicationMarkersAccentDefaultBorder004: var(--colourTransparent100);
100
+ --communicationMarkersAccentDefaultBorder003: var(--colourTransparent100);
101
+ --communicationMarkersAccentDefaultBorder005: var(--colourTransparent100);
102
+ --communicationMarkersAccentDefaultBorder006: var(--colourTransparent100);
103
+ --communicationMarkersAccentDefaultBorder007: var(--colourTransparent100);
104
+ --communicationMarkersAccentDefaultBorder008: var(--colourTransparent100);
105
+ --communicationMarkersAccentDefaultBorder009: var(--colourTransparent100);
106
+ --communicationMarkersAccentDefaultBorder001: var(--colourTransparent100);
107
+ --communicationMarkersAccentDefaultForground004: var(--colourNeutral000);
108
+ --communicationMarkersAccentDefaultForground002: var(--colourNeutral000);
109
+ --communicationMarkersAccentDefaultForground003: var(--colourNeutral000);
110
+ --communicationMarkersAccentDefaultForground005: var(--colourNeutral000);
111
+ --communicationMarkersAccentDefaultForground006: var(--colourNeutral000);
112
+ --communicationMarkersAccentDefaultForground007: var(--colourNeutral000);
113
+ --communicationMarkersAccentDefaultForground008: var(--colourNeutral000);
114
+ --communicationMarkersAccentDefaultForground009: var(--colourNeutral000);
115
+ --communicationMarkersAccentDefaultForground001: var(--colourNeutral000);
116
+ --communicationMarkersAccentDefaultBackground004: var(--colourSemanticPurple700);
117
+ --communicationMarkersAccentDefaultBackground002: var(--colourSemanticPink700);
118
+ --communicationMarkersAccentDefaultBackground003: var(--colourSemanticFuchsia700);
119
+ --communicationMarkersAccentDefaultBackground005: var(--colourSemanticIndigo700);
120
+ --communicationMarkersAccentDefaultBackground006: var(--colourSemanticSky700);
121
+ --communicationMarkersAccentDefaultBackground007: var(--colourSemanticTeal700);
122
+ --communicationMarkersAccentDefaultBackground008: var(--colourSemanticEmrald700);
123
+ --communicationMarkersAccentDefaultBackground009: var(--colourSemanticLime700);
124
+ --communicationMarkersAccentDefaultBackground001: var(--colourSemanticRose700);
125
+ --communicationMarkersAccentSubtleBackground001: var(--colourSemanticRose950);
126
+ --communicationMarkersAccentSubtleBackground002: var(--colourSemanticPink950);
127
+ --communicationMarkersAccentSubtleBackground003: var(--colourSemanticFuchsia950);
128
+ --communicationMarkersAccentSubtleBackground004: var(--colourSemanticPurple950);
129
+ --communicationMarkersAccentSubtleBackground005: var(--colourSemanticIndigo950);
130
+ --communicationMarkersAccentSubtleBackground006: var(--colourSemanticSky950);
131
+ --communicationMarkersAccentSubtleBackground007: var(--colourSemanticTeal950);
132
+ --communicationMarkersAccentSubtleBackground008: var(--colourSemanticEmrald950);
133
+ --communicationMarkersAccentSubtleBackground009: var(--colourSemanticLime950);
134
+ --communicationMarkersAccentSubtleForground001: var(--colourSemanticRose300);
135
+ --communicationMarkersAccentSubtleForground002: var(--colourSemanticPink300);
136
+ --communicationMarkersAccentSubtleForground003: var(--colourSemanticFuchsia300);
137
+ --communicationMarkersAccentSubtleForground004: var(--colourSemanticPurple300);
138
+ --communicationMarkersAccentSubtleForground005: var(--colourSemanticIndigo300);
139
+ --communicationMarkersAccentSubtleForground006: var(--colourSemanticSky300);
140
+ --communicationMarkersAccentSubtleForground007: var(--colourSemanticTeal300);
141
+ --communicationMarkersAccentSubtleForground008: var(--colourSemanticEmrald300);
142
+ --communicationMarkersAccentSubtleForground009: var(--colourSemanticLime300);
143
+ --communicationMarkersAccentSubtleBorder001: var(--colourTransparent100);
144
+ --communicationMarkersAccentSubtleBorder002: var(--colourTransparent100);
145
+ --communicationMarkersAccentSubtleBorder003: var(--colourTransparent100);
146
+ --communicationMarkersAccentSubtleBorder004: var(--colourTransparent100);
147
+ --communicationMarkersAccentSubtleBorder005: var(--colourTransparent100);
148
+ --communicationMarkersAccentSubtleBorder006: var(--colourTransparent100);
149
+ --communicationMarkersAccentSubtleBorder007: var(--colourTransparent100);
150
+ --communicationMarkersAccentSubtleBorder008: var(--colourTransparent100);
151
+ --communicationMarkersAccentSubtleBorder009: var(--colourTransparent100);
152
+ --communicationMarkersAccentGhostBackground001: var(--colourTransparent950);
153
+ --communicationMarkersAccentGhostBackground002: var(--colourTransparent950);
154
+ --communicationMarkersAccentGhostBackground003: var(--colourTransparent950);
155
+ --communicationMarkersAccentGhostBackground004: var(--colourTransparent950);
156
+ --communicationMarkersAccentGhostBackground005: var(--colourTransparent950);
157
+ --communicationMarkersAccentGhostBackground006: var(--colourTransparent950);
158
+ --communicationMarkersAccentGhostBackground007: var(--colourTransparent950);
159
+ --communicationMarkersAccentGhostBackground008: var(--colourTransparent950);
160
+ --communicationMarkersAccentGhostBackground009: var(--colourTransparent950);
161
+ --communicationMarkersAccentGhostForground001: var(--colourNeutral000);
162
+ --communicationMarkersAccentGhostForground002: var(--colourNeutral000);
163
+ --communicationMarkersAccentGhostForground003: var(--colourNeutral000);
164
+ --communicationMarkersAccentGhostForground004: var(--colourNeutral000);
165
+ --communicationMarkersAccentGhostForground005: var(--colourNeutral000);
166
+ --communicationMarkersAccentGhostForground006: var(--colourNeutral000);
167
+ --communicationMarkersAccentGhostForground007: var(--colourNeutral000);
168
+ --communicationMarkersAccentGhostForground008: var(--colourNeutral000);
169
+ --communicationMarkersAccentGhostForground009: var(--colourNeutral000);
170
+ --communicationMarkersAccentGhostBorder001: var(--colourTransparent950);
171
+ --communicationMarkersAccentGhostBorder002: var(--colourTransparent950);
172
+ --communicationMarkersAccentGhostBorder003: var(--colourTransparent950);
173
+ --communicationMarkersAccentGhostBorder004: var(--colourTransparent950);
174
+ --communicationMarkersAccentGhostBorder005: var(--colourTransparent950);
175
+ --communicationMarkersAccentGhostBorder006: var(--colourTransparent950);
176
+ --communicationMarkersAccentGhostBorder007: var(--colourTransparent950);
177
+ --communicationMarkersAccentGhostBorder008: var(--colourTransparent950);
178
+ --communicationMarkersAccentGhostBorder009: var(--colourTransparent950);
179
+ --communicationMarkersNeutralDefaultBackground001: var(--colourNeutral950);
180
+ --communicationMarkersNeutralDefaultBackground002: var(--colourNeutral900);
181
+ --communicationMarkersNeutralDefaultBackground003: var(--colourNeutral800);
182
+ --communicationMarkersNeutralDefaultBackground004: var(--colourNeutral700);
183
+ --communicationMarkersNeutralDefaultBackground005: var(--colourNeutral600);
184
+ --communicationMarkersNeutralDefaultForground001: var(--colourNeutral000);
185
+ --communicationMarkersNeutralDefaultForground002: var(--colourNeutral000);
186
+ --communicationMarkersNeutralDefaultForground003: var(--colourNeutral000);
187
+ --communicationMarkersNeutralDefaultForground004: var(--colourNeutral000);
188
+ --communicationMarkersNeutralDefaultForground005: var(--colourNeutral000);
189
+ --communicationMarkersNeutralDefaultBorder001: var(--colourTransparent100);
190
+ --communicationMarkersNeutralDefaultBorder002: var(--colourTransparent100);
191
+ --communicationMarkersNeutralDefaultBorder003: var(--colourTransparent100);
192
+ --communicationMarkersNeutralDefaultBorder004: var(--colourTransparent100);
193
+ --communicationMarkersNeutralDefaultBorder005: var(--colourTransparent100);
131
194
  --communicationHighlightsBorderBase: var(--colourAccent100);
132
195
  --communicationHighlightsBorderDisabled: var(--colourNeutral600);
133
196
  --communicationHighlightsBorderWhite: var(--colourNeutral000);
package/build/css/variables.css CHANGED
@@ -376,69 +376,132 @@
376
376
  --actionLinkForegroundFocus: var(--colourSemanticBlue700);
377
377
  --actionLinkForegroundPressed: var(--colourSemanticBlue800);
378
378
  --actionLinkForegroundDisabled: var(--colourNeutral700);
379
- --communicationMarkersSemanticBackgroundSuccess: var(--colourSemanticGreen600);
380
- --communicationMarkersSemanticBackgroundWarning: var(--colourSemanticOrange600);
381
- --communicationMarkersSemanticBackgroundError: var(--colourSemanticRed600);
382
- --communicationMarkersSemanticBackgroundNeutral: var(--colourNeutral500);
383
- --communicationMarkersSemanticBackgroundInformation: var(--colourSemanticBlue600);
384
- --communicationMarkersSemanticForgroundSuccess: var(--colourNeutral000);
385
- --communicationMarkersSemanticForgroundWarning: var(--colourNeutral000);
386
- --communicationMarkersSemanticForgroundError: var(--colourNeutral000);
387
- --communicationMarkersSemanticForgroundNeutral: var(--colourNeutral000);
388
- --communicationMarkersSemanticForgroundInformation: var(--colourNeutral000);
389
- --communicationMarkersSemanticBorderSuccess: var(--colourTransparent100);
390
- --communicationMarkersSemanticBorderWarning: var(--colourTransparent100);
391
- --communicationMarkersSemanticBorderNeutral: var(--colourTransparent100);
392
- --communicationMarkersSemanticBorderInformation: var(--colourTransparent100);
393
- --communicationMarkersSemanticBorderError: var(--colourTransparent100);
394
- --communicationMarkersAccentBorder002: var(--colourTransparent100);
395
- --communicationMarkersAccentBorder004: var(--colourTransparent100);
396
- --communicationMarkersAccentBorder003: var(--colourTransparent100);
397
- --communicationMarkersAccentBorder005: var(--colourTransparent100);
398
- --communicationMarkersAccentBorder006: var(--colourTransparent100);
399
- --communicationMarkersAccentBorder007: var(--colourTransparent100);
400
- --communicationMarkersAccentBorder008: var(--colourTransparent100);
401
- --communicationMarkersAccentBorder009: var(--colourTransparent100);
402
- --communicationMarkersAccentBorder001: var(--colourTransparent100);
403
- --communicationMarkersAccentBorderBlank: var(--colourTransparent100);
404
- --communicationMarkersAccentForground004: var(--colourNeutral000);
405
- --communicationMarkersAccentForground002: var(--colourNeutral000);
406
- --communicationMarkersAccentForground003: var(--colourNeutral000);
407
- --communicationMarkersAccentForground005: var(--colourNeutral000);
408
- --communicationMarkersAccentForground006: var(--colourNeutral000);
409
- --communicationMarkersAccentForground007: var(--colourNeutral000);
410
- --communicationMarkersAccentForground008: var(--colourNeutral000);
411
- --communicationMarkersAccentForground009: var(--colourNeutral000);
412
- --communicationMarkersAccentForground001: var(--colourNeutral000);
413
- --communicationMarkersAccentForgroundBlank: var(--colourNeutral950);
414
- --communicationMarkersAccentBackground004: var(--colourSemanticPurple600);
415
- --communicationMarkersAccentBackground002: var(--colourSemanticPink600);
416
- --communicationMarkersAccentBackground003: var(--colourSemanticFuchsia600);
417
- --communicationMarkersAccentBackground005: var(--colourSemanticIndigo600);
418
- --communicationMarkersAccentBackground006: var(--colourSemanticSky600);
419
- --communicationMarkersAccentBackground007: var(--colourSemanticTeal600);
420
- --communicationMarkersAccentBackground008: var(--colourSemanticEmrald600);
421
- --communicationMarkersAccentBackground009: var(--colourSemanticLime600);
422
- --communicationMarkersAccentBackground001: var(--colourSemanticRose600);
423
- --communicationMarkersAccentBackgroundBlank: var(--colourNeutral000);
424
- --communicationMarkersGhostBackgroundNeutral: var(--colourTransparent100);
425
- --communicationMarkersGhostForgroundNeutral: var(--colourNeutral950);
426
- --communicationMarkersGhostBorderNeutral: var(--colourTransparent100);
427
- --communicationMarkersNeutralBackground001: var(--colourNeutral000);
428
- --communicationMarkersNeutralBackground002: var(--colourNeutral050);
429
- --communicationMarkersNeutralBackground003: var(--colourNeutral100);
430
- --communicationMarkersNeutralBackground004: var(--colourNeutral200);
431
- --communicationMarkersNeutralBackground005: var(--colourNeutral300);
432
- --communicationMarkersNeutralForground001: var(--colourNeutral950);
433
- --communicationMarkersNeutralForground002: var(--colourNeutral950);
434
- --communicationMarkersNeutralForground003: var(--colourNeutral950);
435
- --communicationMarkersNeutralForground004: var(--colourNeutral950);
436
- --communicationMarkersNeutralForground005: var(--colourNeutral950);
437
- --communicationMarkersNeutralBorder001: var(--colourTransparent100);
438
- --communicationMarkersNeutralBorder002: var(--colourTransparent100);
439
- --communicationMarkersNeutralBorder003: var(--colourTransparent100);
440
- --communicationMarkersNeutralBorder004: var(--colourTransparent100);
441
- --communicationMarkersNeutralBorder005: var(--colourTransparent100);
379
+ --communicationMarkersSemanticDefaultBackgroundSuccess: var(--colourSemanticGreen600);
380
+ --communicationMarkersSemanticDefaultBackgroundWarning: var(--colourSemanticOrange600);
381
+ --communicationMarkersSemanticDefaultBackgroundError: var(--colourSemanticRed600);
382
+ --communicationMarkersSemanticDefaultBackgroundNeutral: var(--colourNeutral500);
383
+ --communicationMarkersSemanticDefaultBackgroundInformation: var(--colourSemanticBlue600);
384
+ --communicationMarkersSemanticDefaultForgroundSuccess: var(--colourNeutral000);
385
+ --communicationMarkersSemanticDefaultForgroundWarning: var(--colourNeutral000);
386
+ --communicationMarkersSemanticDefaultForgroundError: var(--colourNeutral000);
387
+ --communicationMarkersSemanticDefaultForgroundNeutral: var(--colourNeutral000);
388
+ --communicationMarkersSemanticDefaultForgroundInformation: var(--colourNeutral000);
389
+ --communicationMarkersSemanticDefaultBorderSuccess: var(--colourTransparent100);
390
+ --communicationMarkersSemanticDefaultBorderWarning: var(--colourTransparent100);
391
+ --communicationMarkersSemanticDefaultBorderNeutral: var(--colourTransparent100);
392
+ --communicationMarkersSemanticDefaultBorderInformation: var(--colourTransparent100);
393
+ --communicationMarkersSemanticDefaultBorderError: var(--colourTransparent100);
394
+ --communicationMarkersSemanticGhostBackgroundNeutral: var(--colourTransparent100);
395
+ --communicationMarkersSemanticGhostBackgroundInformation: var(--colourTransparent100);
396
+ --communicationMarkersSemanticGhostBackgroundSuccess: var(--colourTransparent100);
397
+ --communicationMarkersSemanticGhostBackgroundWarning: var(--colourTransparent100);
398
+ --communicationMarkersSemanticGhostBackgroundError: var(--colourTransparent100);
399
+ --communicationMarkersSemanticGhostForgroundNeutral: var(--colourNeutral950);
400
+ --communicationMarkersSemanticGhostForgroundInformation: var(--colourNeutral950);
401
+ --communicationMarkersSemanticGhostForgroundSuccess: var(--colourNeutral900);
402
+ --communicationMarkersSemanticGhostForgroundWarning: var(--colourNeutral950);
403
+ --communicationMarkersSemanticGhostForgroundError: var(--colourNeutral950);
404
+ --communicationMarkersSemanticGhostBorderNeutral: var(--colourTransparent100);
405
+ --communicationMarkersSemanticGhostBorderInformation: var(--colourTransparent100);
406
+ --communicationMarkersSemanticGhostBorderSuccess: var(--colourTransparent100);
407
+ --communicationMarkersSemanticGhostBorderWarning: var(--colourTransparent100);
408
+ --communicationMarkersSemanticGhostBorderError: var(--colourTransparent100);
409
+ --communicationMarkersAccentDefaultBorder002: var(--colourTransparent100);
410
+ --communicationMarkersAccentDefaultBorder004: var(--colourTransparent100);
411
+ --communicationMarkersAccentDefaultBorder003: var(--colourTransparent100);
412
+ --communicationMarkersAccentDefaultBorder005: var(--colourTransparent100);
413
+ --communicationMarkersAccentDefaultBorder006: var(--colourTransparent100);
414
+ --communicationMarkersAccentDefaultBorder007: var(--colourTransparent100);
415
+ --communicationMarkersAccentDefaultBorder008: var(--colourTransparent100);
416
+ --communicationMarkersAccentDefaultBorder009: var(--colourTransparent100);
417
+ --communicationMarkersAccentDefaultBorder001: var(--colourTransparent100);
418
+ --communicationMarkersAccentDefaultForground004: var(--colourNeutral000);
419
+ --communicationMarkersAccentDefaultForground002: var(--colourNeutral000);
420
+ --communicationMarkersAccentDefaultForground003: var(--colourNeutral000);
421
+ --communicationMarkersAccentDefaultForground005: var(--colourNeutral000);
422
+ --communicationMarkersAccentDefaultForground006: var(--colourNeutral000);
423
+ --communicationMarkersAccentDefaultForground007: var(--colourNeutral000);
424
+ --communicationMarkersAccentDefaultForground008: var(--colourNeutral000);
425
+ --communicationMarkersAccentDefaultForground009: var(--colourNeutral000);
426
+ --communicationMarkersAccentDefaultForground001: var(--colourNeutral000);
427
+ --communicationMarkersAccentDefaultBackground004: var(--colourSemanticPurple600);
428
+ --communicationMarkersAccentDefaultBackground002: var(--colourSemanticPink600);
429
+ --communicationMarkersAccentDefaultBackground003: var(--colourSemanticFuchsia600);
430
+ --communicationMarkersAccentDefaultBackground005: var(--colourSemanticIndigo600);
431
+ --communicationMarkersAccentDefaultBackground006: var(--colourSemanticSky600);
432
+ --communicationMarkersAccentDefaultBackground007: var(--colourSemanticTeal600);
433
+ --communicationMarkersAccentDefaultBackground008: var(--colourSemanticEmrald600);
434
+ --communicationMarkersAccentDefaultBackground009: var(--colourSemanticLime600);
435
+ --communicationMarkersAccentDefaultBackground001: var(--colourSemanticRose600);
436
+ --communicationMarkersAccentSubtleBackground001: var(--colourSemanticRose100);
437
+ --communicationMarkersAccentSubtleBackground002: var(--colourSemanticPink100);
438
+ --communicationMarkersAccentSubtleBackground003: var(--colourSemanticFuchsia100);
439
+ --communicationMarkersAccentSubtleBackground004: var(--colourSemanticPurple100);
440
+ --communicationMarkersAccentSubtleBackground005: var(--colourSemanticIndigo100);
441
+ --communicationMarkersAccentSubtleBackground006: var(--colourSemanticSky100);
442
+ --communicationMarkersAccentSubtleBackground007: var(--colourSemanticTeal100);
443
+ --communicationMarkersAccentSubtleBackground008: var(--colourSemanticEmrald100);
444
+ --communicationMarkersAccentSubtleBackground009: var(--colourSemanticLime100);
445
+ --communicationMarkersAccentSubtleForground001: var(--colourSemanticRose600);
446
+ --communicationMarkersAccentSubtleForground002: var(--colourSemanticPink600);
447
+ --communicationMarkersAccentSubtleForground003: var(--colourSemanticFuchsia600);
448
+ --communicationMarkersAccentSubtleForground004: var(--colourSemanticPurple600);
449
+ --communicationMarkersAccentSubtleForground005: var(--colourSemanticIndigo600);
450
+ --communicationMarkersAccentSubtleForground006: var(--colourSemanticSky600);
451
+ --communicationMarkersAccentSubtleForground007: var(--colourSemanticTeal600);
452
+ --communicationMarkersAccentSubtleForground008: var(--colourSemanticEmrald600);
453
+ --communicationMarkersAccentSubtleForground009: var(--colourSemanticLime600);
454
+ --communicationMarkersAccentSubtleBorder001: var(--colourTransparent100);
455
+ --communicationMarkersAccentSubtleBorder002: var(--colourTransparent100);
456
+ --communicationMarkersAccentSubtleBorder003: var(--colourTransparent100);
457
+ --communicationMarkersAccentSubtleBorder004: var(--colourTransparent100);
458
+ --communicationMarkersAccentSubtleBorder005: var(--colourTransparent100);
459
+ --communicationMarkersAccentSubtleBorder006: var(--colourTransparent100);
460
+ --communicationMarkersAccentSubtleBorder007: var(--colourTransparent100);
461
+ --communicationMarkersAccentSubtleBorder008: var(--colourTransparent100);
462
+ --communicationMarkersAccentSubtleBorder009: var(--colourTransparent100);
463
+ --communicationMarkersAccentGhostBackground001: var(--colourTransparent100);
464
+ --communicationMarkersAccentGhostBackground002: var(--colourTransparent100);
465
+ --communicationMarkersAccentGhostBackground003: var(--colourTransparent100);
466
+ --communicationMarkersAccentGhostBackground004: var(--colourTransparent100);
467
+ --communicationMarkersAccentGhostBackground005: var(--colourTransparent100);
468
+ --communicationMarkersAccentGhostBackground006: var(--colourTransparent100);
469
+ --communicationMarkersAccentGhostBackground007: var(--colourTransparent100);
470
+ --communicationMarkersAccentGhostBackground008: var(--colourTransparent100);
471
+ --communicationMarkersAccentGhostBackground009: var(--colourTransparent100);
472
+ --communicationMarkersAccentGhostForground001: var(--colourNeutral950);
473
+ --communicationMarkersAccentGhostForground002: var(--colourNeutral950);
474
+ --communicationMarkersAccentGhostForground003: var(--colourNeutral950);
475
+ --communicationMarkersAccentGhostForground004: var(--colourNeutral950);
476
+ --communicationMarkersAccentGhostForground005: var(--colourNeutral950);
477
+ --communicationMarkersAccentGhostForground006: var(--colourNeutral950);
478
+ --communicationMarkersAccentGhostForground007: var(--colourNeutral950);
479
+ --communicationMarkersAccentGhostForground008: var(--colourNeutral950);
480
+ --communicationMarkersAccentGhostForground009: var(--colourNeutral950);
481
+ --communicationMarkersAccentGhostBorder001: var(--colourTransparent100);
482
+ --communicationMarkersAccentGhostBorder002: var(--colourTransparent100);
483
+ --communicationMarkersAccentGhostBorder003: var(--colourTransparent100);
484
+ --communicationMarkersAccentGhostBorder004: var(--colourTransparent100);
485
+ --communicationMarkersAccentGhostBorder005: var(--colourTransparent100);
486
+ --communicationMarkersAccentGhostBorder006: var(--colourTransparent100);
487
+ --communicationMarkersAccentGhostBorder007: var(--colourTransparent100);
488
+ --communicationMarkersAccentGhostBorder008: var(--colourTransparent100);
489
+ --communicationMarkersAccentGhostBorder009: var(--colourTransparent100);
490
+ --communicationMarkersNeutralDefaultBackground001: var(--colourNeutral000);
491
+ --communicationMarkersNeutralDefaultBackground002: var(--colourNeutral050);
492
+ --communicationMarkersNeutralDefaultBackground003: var(--colourNeutral100);
493
+ --communicationMarkersNeutralDefaultBackground004: var(--colourNeutral200);
494
+ --communicationMarkersNeutralDefaultBackground005: var(--colourNeutral300);
495
+ --communicationMarkersNeutralDefaultForground001: var(--colourNeutral950);
496
+ --communicationMarkersNeutralDefaultForground002: var(--colourNeutral950);
497
+ --communicationMarkersNeutralDefaultForground003: var(--colourNeutral950);
498
+ --communicationMarkersNeutralDefaultForground004: var(--colourNeutral950);
499
+ --communicationMarkersNeutralDefaultForground005: var(--colourNeutral950);
500
+ --communicationMarkersNeutralDefaultBorder001: var(--colourTransparent100);
501
+ --communicationMarkersNeutralDefaultBorder002: var(--colourTransparent100);
502
+ --communicationMarkersNeutralDefaultBorder003: var(--colourTransparent100);
503
+ --communicationMarkersNeutralDefaultBorder004: var(--colourTransparent100);
504
+ --communicationMarkersNeutralDefaultBorder005: var(--colourTransparent100);
442
505
  --communicationHighlightsBorderBase: var(--colourAccent100);
443
506
  --communicationHighlightsBorderDisabled: var(--colourNeutral050);
444
507
  --communicationHighlightsBorderWhite: var(--colourNeutral000);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@igrec-j/design-tokens-test",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "Design system tokens - testing setup",
5
5
  "main": "build/css/variables.css",
6
6
  "type": "module",
@@ -12,11 +12,15 @@
12
12
  "build": "node config.js",
13
13
  "prepublishOnly": "npm run build"
14
14
  },
15
- "keywords": ["design-system", "design-tokens", "css-variables"],
15
+ "keywords": [
16
+ "design-system",
17
+ "design-tokens",
18
+ "css-variables"
19
+ ],
16
20
  "author": "Your Name",
17
21
  "license": "MIT",
18
22
  "dependencies": {
19
23
  "style-dictionary": "^4.2.0",
20
24
  "@tokens-studio/sd-transforms": "^1.2.5"
21
25
  }
22
- }
26
+ }