@daikin-oss/dds-tokens 0.2.0 → 0.3.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 (45) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/build/css/aaf/Dark/variables.css +29 -88
  3. package/build/css/aaf/Light/variables.css +29 -88
  4. package/build/css/daikin/Dark/variables.css +71 -103
  5. package/build/css/daikin/Light/variables.css +35 -108
  6. package/build/js/aaf/Dark/variables.cjs +28 -87
  7. package/build/js/aaf/Dark/variables.d.cts +28 -107
  8. package/build/js/aaf/Dark/variables.d.ts +28 -107
  9. package/build/js/aaf/Dark/variables.js +29 -88
  10. package/build/js/aaf/Light/variables.cjs +28 -87
  11. package/build/js/aaf/Light/variables.d.cts +28 -107
  12. package/build/js/aaf/Light/variables.d.ts +28 -107
  13. package/build/js/aaf/Light/variables.js +29 -88
  14. package/build/js/daikin/Dark/variables.cjs +70 -102
  15. package/build/js/daikin/Dark/variables.d.cts +70 -123
  16. package/build/js/daikin/Dark/variables.d.ts +70 -123
  17. package/build/js/daikin/Dark/variables.js +71 -103
  18. package/build/js/daikin/Light/variables.cjs +34 -107
  19. package/build/js/daikin/Light/variables.d.cts +33 -127
  20. package/build/js/daikin/Light/variables.d.ts +33 -127
  21. package/build/js/daikin/Light/variables.js +35 -108
  22. package/build/json/aaf/Dark/tokens.json +60 -296
  23. package/build/json/aaf/Light/tokens.json +60 -296
  24. package/build/json/daikin/Dark/tokens.json +220 -348
  25. package/build/json/daikin/Light/tokens.json +81 -373
  26. package/build/scss/aaf/Dark/_mixins.scss +29 -88
  27. package/build/scss/aaf/Light/_mixins.scss +29 -88
  28. package/build/scss/daikin/Dark/_mixins.scss +71 -103
  29. package/build/scss/daikin/Light/_mixins.scss +35 -108
  30. package/package.json +1 -1
  31. package/themes/aaf/dark/component.json +1 -113
  32. package/themes/aaf/dark/system.json +1 -49
  33. package/themes/aaf/light/component.json +1 -113
  34. package/themes/aaf/light/system.json +1 -49
  35. package/themes/component.json +1 -184
  36. package/themes/dkn/dark/component.json +17 -178
  37. package/themes/dkn/dark/system.json +142 -55
  38. package/themes/dkn/light/component.json +17 -228
  39. package/themes/dkn/light/system.json +0 -73
  40. package/themes/reference.json +181 -200
  41. package/themes/system.json +1 -31
  42. package/build/css/aaf/Dark/buttons.css +0 -22
  43. package/build/css/aaf/Light/buttons.css +0 -22
  44. package/build/css/daikin/Dark/buttons.css +0 -22
  45. package/build/css/daikin/Light/buttons.css +0 -22
package/themes/dkn/dark/system.json CHANGED
@@ -1,77 +1,164 @@
1
1
  {
2
2
  "color": {
3
- "brand": {
4
- "primary": {
5
- "value": "{color.blue.40}",
6
- "type": "color",
7
- "description": "Primary brand blue"
8
- },
9
- "secondary": {
10
- "value": "{color.blue.60}",
11
- "type": "color",
12
- "description": "Primary secondary brand blue"
13
- }
14
- },
15
- "text": {
3
+ "common": {
16
4
  "brand": {
17
- "primary": {
18
- "value": "{color.brand.primary}",
5
+ "default": {
6
+ "value": "{color.blue.60}",
7
+ "type": "color"
8
+ },
9
+ "hover": {
10
+ "value": "{color.blue.50}",
11
+ "type": "color"
12
+ },
13
+ "press": {
14
+ "value": "{color.blue.40}",
19
15
  "type": "color"
20
16
  }
21
17
  },
22
- "theme": {
23
- "value": "{color.gray.100}",
24
- "type": "color"
25
- },
26
- "default": {
27
- "value": "{color.gray.10}",
28
- "type": "color"
18
+ "surface": {
19
+ "brand": {
20
+ "hover": {
21
+ "value": "{color.blue.120}",
22
+ "type": "color"
23
+ },
24
+ "press": {
25
+ "value": "{color.blue.110}",
26
+ "type": "color"
27
+ }
28
+ },
29
+ "neutral": {
30
+ "hover": {
31
+ "value": "{color.dark-gray.115}",
32
+ "type": "color"
33
+ },
34
+ "press": {
35
+ "value": "{color.gray.110}",
36
+ "type": "color"
37
+ }
38
+ },
39
+ "danger": {
40
+ "hover": {
41
+ "value": "{color.red.120}",
42
+ "type": "color"
43
+ },
44
+ "press": {
45
+ "value": "{color.red.110}",
46
+ "type": "color"
47
+ }
48
+ },
49
+ "default": {
50
+ "value": "{color.gray.120}",
51
+ "type": "color"
52
+ },
53
+ "hover": {
54
+ "value": "{color.dark-gray.115}",
55
+ "type": "color"
56
+ },
57
+ "press": {
58
+ "value": "{color.gray.110}",
59
+ "type": "color"
60
+ },
61
+ "selected": {
62
+ "default": {
63
+ "value": "{color.blue.120}",
64
+ "type": "color"
65
+ },
66
+ "hover": {
67
+ "value": "{color.blue.110}",
68
+ "type": "color"
69
+ },
70
+ "press": {
71
+ "value": "{color.blue.100}",
72
+ "type": "color"
73
+ }
74
+ }
29
75
  },
30
- "default-sub": {
31
- "value": "{color.gray.20}",
32
- "type": "color"
33
- }
34
- },
35
- "background": {
36
- "theme": {
37
- "value": "{color.black}",
38
- "type": "color"
76
+ "neutral": {
77
+ "default": {
78
+ "value": "{color.gray.50}",
79
+ "type": "color"
80
+ },
81
+ "hover": {
82
+ "value": "{color.gray.40}",
83
+ "type": "color"
84
+ },
85
+ "press": {
86
+ "value": "{color.gray.30}",
87
+ "type": "color"
88
+ }
39
89
  },
40
- "component": {
41
- "value": "{color.gray.100}",
42
- "type": "color"
90
+ "danger": {
91
+ "default": {
92
+ "value": "{color.red.60}",
93
+ "type": "color"
94
+ },
95
+ "hover": {
96
+ "value": "{color.red.50}",
97
+ "type": "color"
98
+ },
99
+ "press": {
100
+ "value": "{color.red.40}",
101
+ "type": "color"
102
+ }
43
103
  },
44
- "object": {
45
- "value": "{color.gray.10}",
46
- "type": "color"
47
- }
48
- },
49
- "feedback": {
50
- "positive": {
104
+ "success": {
51
105
  "value": "{color.green.60}",
52
- "type": "color",
53
- "description": "System status is positive"
106
+ "type": "color"
54
107
  },
55
108
  "warning": {
56
- "value": "{color.yellow.50}",
57
- "type": "color",
58
- "description": "System status is warning"
59
- },
60
- "negative": {
61
- "value": "{color.red.60}",
62
- "type": "color",
63
- "description": "System status is warning"
109
+ "value": "{color.yellow.60}",
110
+ "type": "color"
64
111
  },
65
112
  "alarm": {
66
113
  "value": "{color.orange.60}",
67
- "type": "color",
68
- "description": "System status is warning"
114
+ "type": "color"
69
115
  },
70
116
  "information": {
71
117
  "value": "{color.blue.60}",
72
- "type": "color",
73
- "description": "System status is warning"
118
+ "type": "color"
119
+ },
120
+ "disabled": {
121
+ "value": "{color.gray.80}",
122
+ "type": "color"
123
+ },
124
+ "text": {
125
+ "primary": {
126
+ "value": "{color.gray.30}",
127
+ "type": "color"
128
+ },
129
+ "secondary": {
130
+ "value": "{color.gray.50}",
131
+ "type": "color"
132
+ },
133
+ "inverse": {
134
+ "value": "{color.gray.120}",
135
+ "type": "color"
136
+ }
137
+ },
138
+ "border": {
139
+ "focus": {
140
+ "value": "{color.blue.50}",
141
+ "type": "color"
142
+ },
143
+ "empty": {
144
+ "value": "{color.gray.90}",
145
+ "type": "color"
146
+ }
147
+ },
148
+ "background": {
149
+ "default": {
150
+ "value": "{color.gray.120}",
151
+ "type": "color"
152
+ },
153
+ "overlay": {
154
+ "value": "{color.black}",
155
+ "type": "color"
156
+ }
74
157
  }
158
+ },
159
+ "divider": {
160
+ "value": "{color.gray.90}",
161
+ "type": "color"
75
162
  }
76
163
  }
77
164
  }
package/themes/dkn/light/component.json CHANGED
@@ -1,255 +1,44 @@
1
1
  {
2
- "container": {
3
- "color": {
4
- "background": {
5
- "value": "{color.background.component}",
6
- "type": "color"
7
- },
2
+ "color": {
3
+ "link": {
8
4
  "text": {
9
- "header": {
10
- "value": "{color.text.default}",
11
- "type": "color"
12
- },
13
- "body": {
14
- "value": "{color.text.default-sub}",
15
- "type": "color"
16
- }
17
- }
18
- }
19
- },
20
- "card": {
21
- "shadow": {
22
- "value": "{shadow.black}",
23
- "type": "boxShadow"
24
- },
25
- "color": {
26
- "background": {
27
- "value": "{container.color.background}",
28
- "type": "color"
29
- }
30
- },
31
- "border": {
32
- "hover": {
33
- "value": {
34
- "color": "#BFBFBF",
35
- "width": "2",
36
- "style": "solid"
37
- },
38
- "type": "border"
39
- },
40
- "alert": {
41
- "value": {
42
- "color": "{color.feedback.negative}",
43
- "width": "2",
44
- "style": "solid"
45
- },
46
- "type": "border"
47
- },
48
- "underline": {
49
- "value": {
50
- "color": "{color.blue-gray.20}",
51
- "width": "1",
52
- "style": "solid"
53
- },
54
- "type": "border"
55
- }
56
- }
57
- },
58
- "notification": {
59
- "shadow": {
60
- "value": "{shadow.black}",
61
- "type": "boxShadow"
62
- },
63
- "color": {
64
- "background": {
65
- "theme": {
66
- "value": "{color.background.component}",
67
- "type": "color"
68
- },
69
- "success": {
70
- "value": "{color.feedback.positive}",
71
- "type": "color"
72
- },
73
- "error": {
74
- "value": "{color.feedback.negative}",
75
- "type": "color"
76
- },
77
- "warning": {
78
- "value": "{color.feedback.warning}",
5
+ "default": {
6
+ "value": "{color.blue.90}",
79
7
  "type": "color"
80
8
  },
81
- "alarm": {
82
- "value": "{color.feedback.alarm}",
9
+ "hover": {
10
+ "value": "{color.blue.100}",
83
11
  "type": "color"
84
12
  },
85
- "information": {
86
- "value": "{color.feedback.information}",
87
- "type": "color"
88
- }
89
- },
90
- "text": {
91
- "value": "{color.text.default}",
92
- "type": "color"
93
- }
94
- }
95
- },
96
- "icon": {
97
- "color": {
98
- "background": {
99
- "default": {
100
- "value": "{color.background.object}",
13
+ "press": {
14
+ "value": "{color.blue.110}",
101
15
  "type": "color"
102
16
  },
103
- "theme": {
104
- "value": "{color.background.theme}",
105
- "type": "color"
106
- }
107
- }
108
- }
109
- },
110
- "button": {
111
- "color": {
112
- "background": {
113
- "primary": {
114
- "active": {
115
- "value": "{color.brand.primary}",
116
- "type": "color",
117
- "description": "Color used for the default state of a secondary button"
118
- },
119
- "hover": {
120
- "value": "{color.brand.secondary}",
121
- "type": "color"
122
- },
123
- "press": {
124
- "value": "{color.blue.70}",
125
- "type": "color"
126
- },
127
- "focus": {
128
- "value": "{color.blue.80}",
129
- "type": "color"
130
- },
131
- "disabled": {
132
- "value": "{color.gray.30}",
133
- "type": "color"
134
- }
135
- }
136
- },
137
- "border": {
138
- "secondary": {
139
- "active": {
140
- "value": "{color.brand.primary}",
17
+ "visited": {
18
+ "default": {
19
+ "value": "{color.purple.90}",
141
20
  "type": "color"
142
21
  },
143
22
  "hover": {
144
- "value": "{color.brand.secondary}",
23
+ "value": "{color.purple.100}",
145
24
  "type": "color"
146
25
  },
147
26
  "press": {
148
- "value": "{color.blue.70}",
149
- "type": "color"
150
- },
151
- "focus": {
152
- "value": "{color.blue.80}",
153
- "type": "color"
154
- },
155
- "disabled": {
156
- "value": "{color.gray.30}",
27
+ "value": "{color.purple.110}",
157
28
  "type": "color"
158
29
  }
159
30
  }
160
31
  },
161
- "text": {
162
- "secondary": {
163
- "active": {
164
- "value": "{color.text.brand.primary}",
165
- "type": "color"
166
- },
32
+ "surface": {
33
+ "visited": {
167
34
  "hover": {
168
- "value": "{color.brand.secondary}",
35
+ "value": "{color.purple.10}",
169
36
  "type": "color"
170
37
  },
171
38
  "press": {
172
- "value": "{color.blue.70}",
173
- "type": "color"
174
- },
175
- "focus": {
176
- "value": "{color.blue.80}",
177
- "type": "color"
178
- },
179
- "disabled": {
180
- "value": "{color.gray.30}",
39
+ "value": "{color.purple.20}",
181
40
  "type": "color"
182
41
  }
183
- },
184
- "primary": {
185
- "value": "{color.text.theme}",
186
- "type": "color"
187
- }
188
- }
189
- }
190
- },
191
- "tab": {
192
- "color": {
193
- "line": {
194
- "active": {
195
- "value": "{color.brand.primary}",
196
- "type": "color"
197
- },
198
- "hover": {
199
- "value": "{color.brand.secondary}",
200
- "type": "color"
201
- },
202
- "press": {
203
- "value": "{color.blue.70}",
204
- "type": "color"
205
- },
206
- "focus": {
207
- "value": "{color.blue.80}",
208
- "type": "color"
209
- },
210
- "disabled": {
211
- "value": "{color.gray.30}",
212
- "type": "color"
213
- }
214
- },
215
- "text": {
216
- "active": {
217
- "value": "{color.text.brand.primary}",
218
- "type": "color"
219
- },
220
- "hover": {
221
- "value": "{color.brand.secondary}",
222
- "type": "color"
223
- },
224
- "press": {
225
- "value": "{color.blue.70}",
226
- "type": "color"
227
- },
228
- "focus": {
229
- "value": "{color.blue.80}",
230
- "type": "color"
231
- },
232
- "disabled": {
233
- "value": "{color.gray.30}",
234
- "type": "color"
235
- }
236
- }
237
- }
238
- },
239
- "color": {
240
- "link": {
241
- "text": {
242
- "default": {
243
- "value": "{color.blue.90}",
244
- "type": "color"
245
- },
246
- "hover": {
247
- "value": "{color.blue.100}",
248
- "type": "color"
249
- },
250
- "press": {
251
- "value": "{color.blue.100}",
252
- "type": "color"
253
42
  }
254
43
  }
255
44
  }
package/themes/dkn/light/system.json CHANGED
@@ -1,78 +1,5 @@
1
1
  {
2
2
  "color": {
3
- "brand": {
4
- "primary": {
5
- "value": "{color.blue.60}",
6
- "type": "color",
7
- "description": "Primary brand blue"
8
- },
9
- "secondary": {
10
- "value": "{color.blue.40}",
11
- "type": "color",
12
- "description": "Primary secondary brand blue"
13
- }
14
- },
15
- "text": {
16
- "brand": {
17
- "primary": {
18
- "value": "{color.brand.primary}",
19
- "type": "color"
20
- }
21
- },
22
- "theme": {
23
- "value": "{color.white}",
24
- "type": "color"
25
- },
26
- "default": {
27
- "value": "{color.gray.100}",
28
- "type": "color"
29
- },
30
- "default-sub": {
31
- "value": "{color.gray.80}",
32
- "type": "color"
33
- }
34
- },
35
- "background": {
36
- "theme": {
37
- "value": "{color.white}",
38
- "type": "color"
39
- },
40
- "component": {
41
- "value": "{color.white}",
42
- "type": "color"
43
- },
44
- "object": {
45
- "value": "{color.gray.100}",
46
- "type": "color"
47
- }
48
- },
49
- "feedback": {
50
- "positive": {
51
- "value": "{color.green.60}",
52
- "type": "color",
53
- "description": "System status is positive"
54
- },
55
- "warning": {
56
- "value": "{color.yellow.50}",
57
- "type": "color",
58
- "description": "System status is warning"
59
- },
60
- "negative": {
61
- "value": "{color.red.60}",
62
- "type": "color",
63
- "description": "System status is warning"
64
- },
65
- "alarm": {
66
- "value": "{color.orange.60}",
67
- "type": "color",
68
- "description": "System status is warning"
69
- },
70
- "information": {
71
- "value": "{color.blue.60}",
72
- "type": "color",
73
- "description": "System status is warning"
74
- }
75
- },
76
3
  "common": {
77
4
  "brand": {
78
5
  "default": {