@cas-smartdesign/design-tokens 2.0.0 → 3.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.
Files changed (38) hide show
  1. package/dist/base/_tokens.scss +401 -0
  2. package/dist/base/tokens.css +401 -0
  3. package/dist/base/tokens.json +6810 -0
  4. package/dist/dark/_tokens.scss +316 -0
  5. package/dist/dark/tokens.css +316 -0
  6. package/dist/dark/tokens.json +4103 -0
  7. package/dist/docs/assets/color-prominence-guide.svg +53 -0
  8. package/dist/docs/assets/color-role-guide.svg +65 -0
  9. package/dist/docs/assets/color-state-guide.svg +53 -0
  10. package/dist/docs/assets/color-type-guide.svg +58 -0
  11. package/dist/docs/assets/examples/buttons_default.svg +124 -0
  12. package/dist/docs/assets/examples/buttons_ghost.svg +119 -0
  13. package/dist/docs/assets/examples/buttons_outline.svg +142 -0
  14. package/dist/docs/assets/examples/buttons_standard.svg +129 -0
  15. package/dist/docs/assets/examples/checkbox_default.svg +106 -0
  16. package/dist/docs/assets/examples/content.svg +68 -0
  17. package/dist/docs/assets/examples/input_default-focus.svg +87 -0
  18. package/dist/docs/assets/examples/input_default.svg +46 -0
  19. package/dist/docs/assets/examples/input_disabled.svg +70 -0
  20. package/dist/docs/assets/examples/input_error.svg +48 -0
  21. package/dist/docs/assets/examples/input_warning.svg +46 -0
  22. package/dist/docs/assets/examples/list_item_navigation.svg +193 -0
  23. package/dist/docs/assets/examples/list_item_selection.svg +113 -0
  24. package/dist/docs/assets/examples/note.svg +160 -0
  25. package/dist/docs/assets/examples/segmented_button_group.svg +57 -0
  26. package/dist/docs/assets/examples/tag.svg +190 -0
  27. package/dist/docs/index.html +5317 -192
  28. package/dist/light/_tokens.scss +316 -0
  29. package/dist/light/tokens.css +316 -0
  30. package/dist/light/tokens.json +4103 -0
  31. package/dist/tokens.css +1033 -165
  32. package/npm-third-party-licenses.json +1 -1
  33. package/package.json +15 -5
  34. package/readme.md +7 -2
  35. package/dist/tokens.d.ts +0 -222
  36. package/dist/tokens.esm.js +0 -2189
  37. package/dist/tokens.json +0 -2993
  38. package/dist/tokens.scss +0 -494
package/npm-third-party-licenses.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "@cypress/vite-dev-server@7.2.1": {
2
+ "@cypress/vite-dev-server@7.3.2": {
3
3
  "licenses": "MIT",
4
4
  "repository": "https://github.com/cypress-io/cypress",
5
5
  "licenseUrl": "https://github.com/cypress-io/cypress/tree/develop/npm/vite-dev-server#readme"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cas-smartdesign/design-tokens",
3
- "version": "2.0.0",
3
+ "version": "3.0.0",
4
4
  "description": "Design tokens for SmartDesign",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "files": [
@@ -8,9 +8,18 @@
8
8
  "npm-third-party-licenses.json"
9
9
  ],
10
10
  "type": "module",
11
- "main": "dist/tokens.esm.js",
12
- "module": "dist/tokens.esm.js",
13
- "types": "dist/tokens.d.ts",
11
+ "exports": {
12
+ "./css": "./dist/tokens.css",
13
+ "./base/css": "./dist/base/tokens.css",
14
+ "./base/json": "./dist/base/tokens.json",
15
+ "./base/scss": "./dist/base/_tokens.scss",
16
+ "./light/css": "./dist/light/tokens.css",
17
+ "./light/json": "./dist/light/tokens.json",
18
+ "./light/scss": "./dist/light/_tokens.scss",
19
+ "./dark/css": "./dist/dark/tokens.css",
20
+ "./dark/json": "./dist/dark/tokens.json",
21
+ "./dark/scss": "./dist/dark/_tokens.scss"
22
+ },
14
23
  "publishConfig": {
15
24
  "access": "public",
16
25
  "registry": "https://registry.npmjs.org/"
@@ -26,6 +35,7 @@
26
35
  "build:no-license": "pnpm generate-style-dictionary",
27
36
  "build": "pnpm generate-license && pnpm build:no-license",
28
37
  "generate-license": "sd-license-generator --r ../",
29
- "generate-style-dictionary": "node ./build.mts"
38
+ "generate-style-dictionary": "node ./build.mts",
39
+ "sort-tokens": "node ./sort-json.mts ./tokens"
30
40
  }
31
41
  }
package/readme.md CHANGED
@@ -7,5 +7,10 @@ A shared package providing design tokens to create SmartDesign like components a
7
7
  The design tokens are provided as
8
8
 
9
9
  - JSON
10
- - JavaScript module (esm)
11
- - CSS Variables
10
+ - CSS Variables (also via SCSS mixins)
11
+
12
+ There are dedicated subfolders for different type of tokens:
13
+
14
+ - `base` contains the base and theme independent tokens
15
+ - `light` & `dark` contain the theme dependent tokens
16
+ - A combined `token.css` is exported on `css` mapping which contains all tokens which is useful if tokens are needed without any additional processing.
package/dist/tokens.d.ts DELETED
@@ -1,222 +0,0 @@
1
-
2
- export default tokens;
3
-
4
- export interface DesignToken {
5
- $value?: any;
6
- $type?: string;
7
- $description?: string;
8
- name?: string;
9
- themeable?: boolean;
10
- attributes?: Record<string, unknown>;
11
- [key: string]: any;
12
- }
13
-
14
- declare const tokens: {
15
- "color": {
16
- "base": {
17
- "red": {
18
- "50": DesignToken,
19
- "100": DesignToken,
20
- "150": DesignToken,
21
- "200": DesignToken,
22
- "300": DesignToken,
23
- "400": DesignToken,
24
- "450": DesignToken,
25
- "500": DesignToken,
26
- "600": DesignToken,
27
- "700": DesignToken,
28
- "800": DesignToken,
29
- "900": DesignToken
30
- },
31
- "orange": {
32
- "50": DesignToken,
33
- "100": DesignToken,
34
- "150": DesignToken,
35
- "200": DesignToken,
36
- "300": DesignToken,
37
- "400": DesignToken,
38
- "450": DesignToken,
39
- "500": DesignToken,
40
- "600": DesignToken,
41
- "700": DesignToken,
42
- "800": DesignToken,
43
- "900": DesignToken
44
- },
45
- "yellow": {
46
- "50": DesignToken,
47
- "100": DesignToken,
48
- "150": DesignToken,
49
- "200": DesignToken,
50
- "300": DesignToken,
51
- "400": DesignToken,
52
- "450": DesignToken,
53
- "500": DesignToken,
54
- "600": DesignToken,
55
- "700": DesignToken,
56
- "800": DesignToken,
57
- "900": DesignToken
58
- },
59
- "green": {
60
- "50": DesignToken,
61
- "100": DesignToken,
62
- "150": DesignToken,
63
- "200": DesignToken,
64
- "300": DesignToken,
65
- "400": DesignToken,
66
- "450": DesignToken,
67
- "500": DesignToken,
68
- "600": DesignToken,
69
- "700": DesignToken,
70
- "800": DesignToken,
71
- "900": DesignToken
72
- },
73
- "dark-green": {
74
- "50": DesignToken,
75
- "100": DesignToken,
76
- "150": DesignToken,
77
- "200": DesignToken,
78
- "300": DesignToken,
79
- "400": DesignToken,
80
- "450": DesignToken,
81
- "500": DesignToken,
82
- "600": DesignToken,
83
- "700": DesignToken,
84
- "800": DesignToken,
85
- "900": DesignToken
86
- },
87
- "cyan": {
88
- "50": DesignToken,
89
- "100": DesignToken,
90
- "150": DesignToken,
91
- "200": DesignToken,
92
- "300": DesignToken,
93
- "400": DesignToken,
94
- "450": DesignToken,
95
- "500": DesignToken,
96
- "600": DesignToken,
97
- "700": DesignToken,
98
- "800": DesignToken,
99
- "900": DesignToken
100
- },
101
- "blue": {
102
- "50": DesignToken,
103
- "100": DesignToken,
104
- "150": DesignToken,
105
- "200": DesignToken,
106
- "300": DesignToken,
107
- "400": DesignToken,
108
- "450": DesignToken,
109
- "500": DesignToken,
110
- "600": DesignToken,
111
- "700": DesignToken,
112
- "800": DesignToken,
113
- "900": DesignToken
114
- },
115
- "dark-blue": {
116
- "50": DesignToken,
117
- "100": DesignToken,
118
- "150": DesignToken,
119
- "200": DesignToken,
120
- "300": DesignToken,
121
- "400": DesignToken,
122
- "450": DesignToken,
123
- "500": DesignToken,
124
- "600": DesignToken,
125
- "700": DesignToken,
126
- "800": DesignToken,
127
- "900": DesignToken
128
- },
129
- "pink": {
130
- "50": DesignToken,
131
- "100": DesignToken,
132
- "150": DesignToken,
133
- "200": DesignToken,
134
- "300": DesignToken,
135
- "400": DesignToken,
136
- "450": DesignToken,
137
- "500": DesignToken,
138
- "600": DesignToken,
139
- "700": DesignToken,
140
- "800": DesignToken,
141
- "900": DesignToken
142
- },
143
- "purple": {
144
- "50": DesignToken,
145
- "100": DesignToken,
146
- "150": DesignToken,
147
- "200": DesignToken,
148
- "300": DesignToken,
149
- "400": DesignToken,
150
- "450": DesignToken,
151
- "500": DesignToken,
152
- "600": DesignToken,
153
- "700": DesignToken,
154
- "800": DesignToken,
155
- "900": DesignToken
156
- },
157
- "brown": {
158
- "50": DesignToken,
159
- "100": DesignToken,
160
- "150": DesignToken,
161
- "200": DesignToken,
162
- "300": DesignToken,
163
- "400": DesignToken,
164
- "450": DesignToken,
165
- "500": DesignToken,
166
- "600": DesignToken,
167
- "700": DesignToken,
168
- "800": DesignToken,
169
- "900": DesignToken
170
- },
171
- "grey": {
172
- "50": DesignToken,
173
- "100": DesignToken,
174
- "150": DesignToken,
175
- "200": DesignToken,
176
- "300": DesignToken,
177
- "400": DesignToken,
178
- "450": DesignToken,
179
- "500": DesignToken,
180
- "600": DesignToken,
181
- "700": DesignToken,
182
- "800": DesignToken,
183
- "900": DesignToken
184
- },
185
- "white": DesignToken,
186
- "black": DesignToken
187
- },
188
- "font": {
189
- "base": DesignToken,
190
- "secondary": DesignToken,
191
- "tertiary": DesignToken,
192
- "warn": DesignToken,
193
- "suggest": DesignToken,
194
- "error": DesignToken
195
- }
196
- },
197
- "font": {
198
- "family": {
199
- "base": DesignToken
200
- }
201
- },
202
- "size": {
203
- "font": {
204
- "tiny": DesignToken,
205
- "small": DesignToken,
206
- "medium": DesignToken,
207
- "large": DesignToken,
208
- "xl": DesignToken,
209
- "xxl": DesignToken,
210
- "xxxl": DesignToken,
211
- "base": DesignToken
212
- }
213
- },
214
- "time": {
215
- "transition": {
216
- "short": DesignToken,
217
- "base": DesignToken,
218
- "long": DesignToken,
219
- "xl": DesignToken
220
- }
221
- }
222
- }