@daikin-oss/dds-tokens 0.2.1 → 0.3.1

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 (46) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/README.md +1 -1
  3. package/build/css/aaf/Dark/variables.css +17 -88
  4. package/build/css/aaf/Light/variables.css +17 -88
  5. package/build/css/daikin/Dark/variables.css +21 -111
  6. package/build/css/daikin/Light/variables.css +17 -107
  7. package/build/js/aaf/Dark/variables.cjs +16 -87
  8. package/build/js/aaf/Dark/variables.d.cts +16 -107
  9. package/build/js/aaf/Dark/variables.d.ts +16 -107
  10. package/build/js/aaf/Dark/variables.js +17 -88
  11. package/build/js/aaf/Light/variables.cjs +16 -87
  12. package/build/js/aaf/Light/variables.d.cts +16 -107
  13. package/build/js/aaf/Light/variables.d.ts +16 -107
  14. package/build/js/aaf/Light/variables.js +17 -88
  15. package/build/js/daikin/Dark/variables.cjs +20 -110
  16. package/build/js/daikin/Dark/variables.d.cts +16 -127
  17. package/build/js/daikin/Dark/variables.d.ts +16 -127
  18. package/build/js/daikin/Dark/variables.js +21 -111
  19. package/build/js/daikin/Light/variables.cjs +16 -106
  20. package/build/js/daikin/Light/variables.d.cts +16 -127
  21. package/build/js/daikin/Light/variables.d.ts +16 -127
  22. package/build/js/daikin/Light/variables.js +17 -107
  23. package/build/json/aaf/Dark/tokens.json +302 -449
  24. package/build/json/aaf/Light/tokens.json +302 -449
  25. package/build/json/daikin/Dark/tokens.json +390 -571
  26. package/build/json/daikin/Light/tokens.json +386 -567
  27. package/build/scss/aaf/Dark/_mixins.scss +17 -88
  28. package/build/scss/aaf/Light/_mixins.scss +17 -88
  29. package/build/scss/daikin/Dark/_mixins.scss +21 -111
  30. package/build/scss/daikin/Light/_mixins.scss +17 -107
  31. package/package.json +1 -1
  32. package/themes/aaf/dark/component.json +1 -113
  33. package/themes/aaf/dark/system.json +1 -49
  34. package/themes/aaf/light/component.json +1 -113
  35. package/themes/aaf/light/system.json +1 -49
  36. package/themes/component.json +1 -184
  37. package/themes/dkn/dark/component.json +0 -237
  38. package/themes/dkn/dark/system.json +4 -77
  39. package/themes/dkn/light/component.json +0 -237
  40. package/themes/dkn/light/system.json +0 -73
  41. package/themes/reference.json +131 -200
  42. package/themes/system.json +1 -31
  43. package/build/css/aaf/Dark/buttons.css +0 -22
  44. package/build/css/aaf/Light/buttons.css +0 -22
  45. package/build/css/daikin/Dark/buttons.css +0 -22
  46. package/build/css/daikin/Light/buttons.css +0 -22
@@ -62,12 +62,6 @@ export const colorRed90 = "#9a0911";
62
62
  export const colorRed100 = "#7b070e";
63
63
  export const colorRed110 = "#5d050a";
64
64
  export const colorRed120 = "#3e0307";
65
- export const colorRedAaf100 = "#fcecea";
66
- export const colorRedAaf200 = "#f5c0b8";
67
- export const colorRedAaf300 = "#f8aeba";
68
- export const colorRedAaf400 = "#db4f66";
69
- export const colorRedAaf500 = "#d2324c";
70
- export const colorRedAaf600 = "#c8102e";
71
65
  export const colorGray10 = "#f2f2f2";
72
66
  export const colorGray20 = "#ebebeb";
73
67
  export const colorGray30 = "#dcdcdc";
@@ -82,8 +76,6 @@ export const colorGray110 = "#313131";
82
76
  export const colorGray120 = "#212121";
83
77
  export const colorBlack = "#000000";
84
78
  export const colorWhite = "#ffffff";
85
- export const colorBlackShadow = "rgba(0, 0, 0, 0.1)";
86
- export const colorWhiteShadow = "rgba(255, 255, 255, 0.1)";
87
79
  export const colorBlueGray10 = "#eef0f2";
88
80
  export const colorBlueGray20 = "#d8dde0";
89
81
  export const colorBlueGray30 = "#bbc1c7";
@@ -111,20 +103,6 @@ export const colorPurple90 = "#5c2365";
111
103
  export const colorPurple100 = "#4a1c51";
112
104
  export const colorPurple110 = "#37153d";
113
105
  export const colorPurple120 = "#250e29";
114
- export const colorFeedbackPositive = "#00c3ac"; // System status is positive
115
- export const colorFeedbackWarning = "#ffbf0e"; // System status is warning
116
- export const colorFeedbackNegative = "#f21a27"; // System status is warning
117
- export const colorFeedbackAlarm = "#fa7a12"; // System status is warning
118
- export const colorFeedbackInformation = "#30ade9"; // System status is warning
119
- export const colorBrandPrimary = "#30ade9"; // Primary brand blue
120
- export const colorBrandSecondary = "#76cff4"; // Primary secondary brand blue
121
- export const colorTextBrandPrimary = "#30ade9";
122
- export const colorTextTheme = "#ffffff";
123
- export const colorTextDefault = "#414141";
124
- export const colorTextDefaultSub = "#616161";
125
- export const colorBackgroundTheme = "#ffffff";
126
- export const colorBackgroundComponent = "#ffffff";
127
- export const colorBackgroundObject = "#414141";
128
106
  export const colorCommonBrandDefault = "#0097e0";
129
107
  export const colorCommonBrandHover = "#0081c0";
130
108
  export const colorCommonBrandPress = "#00689a";
@@ -183,91 +161,23 @@ export const space300 = "12px";
183
161
  export const space400 = "16px";
184
162
  export const space800 = "32px";
185
163
  export const space050 = "2px";
186
- export const shadowBlack = "0 -2px 19px 0 rgba(0, 0, 0, 0.1)";
187
- export const shadowWhite = "0 -2px 19px 0 rgba(255, 255, 255, 0.1)";
164
+ export const fontRegularNormal300 = "400 12px/1.5 Roboto";
165
+ export const fontRegularNormal350 = "400 14px/1.5 Roboto";
166
+ export const fontRegularNormal400 = "400 16px/1.5 Roboto";
167
+ export const fontRegularTight300 = "400 12px/1.3 Roboto";
168
+ export const fontRegularTight350 = "400 14px/1.3 Roboto";
169
+ export const fontRegularTight400 = "400 16px/1.3 Roboto";
170
+ export const fontRegularBoldNormal300 = "700 12px/1.5 Roboto";
171
+ export const fontRegularBoldNormal350 = "700 14px/1.5 Roboto";
172
+ export const fontRegularBoldNormal400 = "700 16px/1.5 Roboto";
173
+ export const fontRegularBoldTight300 = "700 12px/1.3 Roboto";
174
+ export const fontRegularBoldTight350 = "700 14px/1.3 Roboto";
175
+ export const fontRegularBoldTight400 = "700 16px/1.3 Roboto";
188
176
  export const fontSize300 = "12px";
189
177
  export const fontSize350 = "14px";
190
178
  export const fontSize400 = "16px";
191
- export const lineHeightTight = "130%";
192
- export const lineHeightNormal = "150%";
193
- export const fontWeightBold = "Bold";
194
- export const fontWeightRegular = "Regular";
195
- export const fontFamilyBase = "Roboto"; // The primary font used in the DDS Design Kit is Roboto
196
- export const regularNormal300 = "400 12px/1.5 Roboto"; // Body is primarily used for components and for blocks of text.
197
- export const regularNormal350 = "400 14px/1.5 Roboto"; // Body is primarily used for components and for blocks of text.
198
- export const regularNormal400 = "400 16px/1.5 Roboto"; // Body is primarily used for components and for blocks of text.
199
- export const regularTight300 = "400 12px/1.3 Roboto"; // Body is primarily used for components and for blocks of text.
200
- export const regularTight350 = "400 14px/1.3 Roboto"; // Body is primarily used for components and for blocks of text.
201
- export const regularTight400 = "400 16px/1.3 Roboto"; // Body is primarily used for components and for blocks of text.
202
- export const regularBoldNormal300 = "700 12px/1.5 Roboto"; // Header is used to create various levels of typographic hierarchies.
203
- export const regularBoldNormal350 = "700 14px/1.5 Roboto"; // Header is used to create various levels of typographic hierarchies.
204
- export const regularBoldNormal400 = "700 16px/1.5 Roboto"; // Header is used to create various levels of typographic hierarchies.
205
- export const regularBoldTight300 = "700 12px/1.3 Roboto"; // Header is used to create various levels of typographic hierarchies.
206
- export const regularBoldTight350 = "700 14px/1.3 Roboto"; // Header is used to create various levels of typographic hierarchies.
207
- export const regularBoldTight400 = "700 16px/1.3 Roboto"; // Header is used to create various levels of typographic hierarchies.
208
- export const checkboxBorderUnselected = "2px solid #bfbfbf";
209
- export const checkboxColorBackground = "#30ade9";
210
- export const checkboxColorIcon = "#ffffff";
211
- export const dropdownColorBackground = "#ffffff";
212
- export const dropdownColorText = "#515151";
213
- export const dropdownTrayColorBackgroundSelected = "#ebebeb";
214
- export const tableColorBackground = "#ffffff";
215
- export const tableColorText = "#515151";
216
- export const tableHeaderBorder = "1px none #000000";
217
- export const tableCellBorder = "1px none #ebebeb";
218
- export const tablePageNumberColorBackgroundSelected = "#828282";
219
- export const tablePageNumberColorTextDefault = "#515151";
220
- export const tablePageNumberColorTextSelected = "#ffffff";
221
- export const tablePageNumberBorderHover = "1px none #828282";
222
- export const loginSsoButtonBorder = "1px none #616161";
223
- export const loginSsoButtonColorText = "#616161";
224
- export const formColorBackground = "#ffffff";
225
- export const formColorTextDefault = "#414141";
226
- export const formColorTextPlaceholder = "#828282";
227
- export const formColorTextPositive = "#00c3ac";
228
- export const formColorTextNegative = "#f21a27";
229
- export const notificationColorBackgroundSuccess = "#00c3ac";
230
- export const notificationColorBackgroundError = "#f21a27";
231
- export const notificationColorBackgroundWarning = "#ffbf0e";
232
- export const notificationColorBackgroundAlarm = "#fa7a12";
233
- export const notificationColorBackgroundInformation = "#30ade9";
234
- export const notificationColorBackgroundTheme = "#ffffff";
235
- export const notificationColorText = "#414141";
236
- export const notificationShadow = "0 -2px 19px 0 rgba(0, 0, 0, 0.1)";
237
- export const iconColorBackgroundNeutral = "#a0a0a0";
238
- export const iconColorBackgroundDefault = "#414141";
239
- export const iconColorBackgroundTheme = "#ffffff";
240
- export const containerColorBackground = "#ffffff";
241
- export const containerColorTextHeader = "#414141";
242
- export const containerColorTextBody = "#616161";
243
- export const cardShadow = "0 -2px 19px 0 rgba(0, 0, 0, 0.1)";
244
- export const cardColorBackground = "#ffffff";
245
- export const cardBorderHover = "2px solid #BFBFBF";
246
- export const cardBorderAlert = "2px solid #f21a27";
247
- export const cardBorderUnderline = "1px solid #d8dde0";
248
- export const buttonColorBackgroundPrimaryActive = "#30ade9"; // Color used for the default state of a secondary button
249
- export const buttonColorBackgroundPrimaryHover = "#76cff4";
250
- export const buttonColorBackgroundPrimaryPress = "#0097e0";
251
- export const buttonColorBackgroundPrimaryFocus = "#0081c0";
252
- export const buttonColorBackgroundPrimaryDisabled = "#dcdcdc";
253
- export const buttonColorBorderSecondaryActive = "#30ade9";
254
- export const buttonColorBorderSecondaryHover = "#76cff4";
255
- export const buttonColorBorderSecondaryPress = "#0097e0";
256
- export const buttonColorBorderSecondaryFocus = "#0081c0";
257
- export const buttonColorBorderSecondaryDisabled = "#dcdcdc";
258
- export const buttonColorTextSecondaryActive = "#30ade9";
259
- export const buttonColorTextSecondaryHover = "#76cff4";
260
- export const buttonColorTextSecondaryPress = "#0097e0";
261
- export const buttonColorTextSecondaryFocus = "#0081c0";
262
- export const buttonColorTextSecondaryDisabled = "#dcdcdc";
263
- export const buttonColorTextPrimary = "#ffffff";
264
- export const tabColorLineActive = "#30ade9";
265
- export const tabColorLineHover = "#76cff4";
266
- export const tabColorLinePress = "#0097e0";
267
- export const tabColorLineFocus = "#0081c0";
268
- export const tabColorLineDisabled = "#dcdcdc";
269
- export const tabColorTextActive = "#30ade9";
270
- export const tabColorTextHover = "#76cff4";
271
- export const tabColorTextPress = "#0097e0";
272
- export const tabColorTextFocus = "#0081c0";
273
- export const tabColorTextDisabled = "#dcdcdc";
179
+ export const fontLineHeightTight = 1.3;
180
+ export const fontLineHeightNormal = 1.5;
181
+ export const fontWeightBold = 700;
182
+ export const fontWeightRegular = 400;
183
+ export const fontFamilyBase = "Roboto";