@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
package/build/scss/aaf/Dark/_mixins.scss CHANGED
@@ -63,12 +63,6 @@
63
63
  --dds-color-red-100: #7b070e;
64
64
  --dds-color-red-110: #5d050a;
65
65
  --dds-color-red-120: #3e0307;
66
- --dds-color-red-aaf-100: #fcecea;
67
- --dds-color-red-aaf-200: #f5c0b8;
68
- --dds-color-red-aaf-300: #f8aeba;
69
- --dds-color-red-aaf-400: #db4f66;
70
- --dds-color-red-aaf-500: #d2324c;
71
- --dds-color-red-aaf-600: #c8102e;
72
66
  --dds-color-gray-10: #f2f2f2;
73
67
  --dds-color-gray-20: #ebebeb;
74
68
  --dds-color-gray-30: #dcdcdc;
@@ -83,8 +77,6 @@
83
77
  --dds-color-gray-120: #212121;
84
78
  --dds-color-black: #000000;
85
79
  --dds-color-white: #ffffff;
86
- --dds-color-black-shadow: rgba(0, 0, 0, 0.1);
87
- --dds-color-white-shadow: rgba(255, 255, 255, 0.1);
88
80
  --dds-color-blue-gray-10: #eef0f2;
89
81
  --dds-color-blue-gray-20: #d8dde0;
90
82
  --dds-color-blue-gray-30: #bbc1c7;
@@ -112,20 +104,6 @@
112
104
  --dds-color-purple-100: #4a1c51;
113
105
  --dds-color-purple-110: #37153d;
114
106
  --dds-color-purple-120: #250e29;
115
- --dds-color-feedback-positive: #00c3ac; /* System status is positive */
116
- --dds-color-feedback-warning: #ffbf0e; /* System status is warning */
117
- --dds-color-feedback-negative: #f21a27; /* System status is warning */
118
- --dds-color-feedback-alarm: #fa7a12; /* System status is warning */
119
- --dds-color-feedback-information: #30ade9; /* System status is warning */
120
- --dds-color-brand-primary: #db4f66; /* Primary brand blue */
121
- --dds-color-brand-secondary: #c8102e;
122
- --dds-color-text-brand-primary: #db4f66;
123
- --dds-color-text-theme: #515151;
124
- --dds-color-text-default: #ffffff;
125
- --dds-color-text-default-sub: #f2f2f2;
126
- --dds-color-background-theme: #000000;
127
- --dds-color-background-component: #515151;
128
- --dds-color-background-object: #ffffff;
129
107
  --dds-border-radius-100: 4px;
130
108
  --dds-border-radius-150: 6px;
131
109
  --dds-border-radius-200: 8px;
@@ -142,73 +120,24 @@
142
120
  --dds-space-400: 16px;
143
121
  --dds-space-800: 32px;
144
122
  --dds-space-050: 2px;
145
- --dds-shadow-black: 0 -2px 19px 0 rgba(0, 0, 0, 0.1);
146
- --dds-shadow-white: 0 -2px 19px 0 rgba(255, 255, 255, 0.1);
123
+ --dds-font-regular-normal-300: 400 12px/1.5 Roboto;
124
+ --dds-font-regular-normal-350: 400 14px/1.5 Roboto;
125
+ --dds-font-regular-normal-400: 400 16px/1.5 Roboto;
126
+ --dds-font-regular-tight-300: 400 12px/1.3 Roboto;
127
+ --dds-font-regular-tight-350: 400 14px/1.3 Roboto;
128
+ --dds-font-regular-tight-400: 400 16px/1.3 Roboto;
129
+ --dds-font-regular-bold-normal-300: 700 12px/1.5 Roboto;
130
+ --dds-font-regular-bold-normal-350: 700 14px/1.5 Roboto;
131
+ --dds-font-regular-bold-normal-400: 700 16px/1.5 Roboto;
132
+ --dds-font-regular-bold-tight-300: 700 12px/1.3 Roboto;
133
+ --dds-font-regular-bold-tight-350: 700 14px/1.3 Roboto;
134
+ --dds-font-regular-bold-tight-400: 700 16px/1.3 Roboto;
147
135
  --dds-font-size-300: 12px;
148
136
  --dds-font-size-350: 14px;
149
137
  --dds-font-size-400: 16px;
150
- --dds-line-height-tight: 130%;
151
- --dds-line-height-normal: 150%;
152
- --dds-font-weight-bold: Bold;
153
- --dds-font-weight-regular: Regular;
154
- --dds-font-family-base: Roboto; /* The primary font used in the DDS Design Kit is Roboto */
155
- --dds-regular-normal-300: 400 12px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
156
- --dds-regular-normal-350: 400 14px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
157
- --dds-regular-normal-400: 400 16px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
158
- --dds-regular-tight-300: 400 12px/1.3 Roboto; /* Body is primarily used for components and for blocks of text. */
159
- --dds-regular-tight-350: 400 14px/1.3 Roboto; /* Body is primarily used for components and for blocks of text. */
160
- --dds-regular-tight-400: 400 16px/1.3 Roboto; /* Body is primarily used for components and for blocks of text. */
161
- --dds-regular-bold-normal-300: 700 12px/1.5 Roboto; /* Header is used to create various levels of typographic hierarchies. */
162
- --dds-regular-bold-normal-350: 700 14px/1.5 Roboto; /* Header is used to create various levels of typographic hierarchies. */
163
- --dds-regular-bold-normal-400: 700 16px/1.5 Roboto; /* Header is used to create various levels of typographic hierarchies. */
164
- --dds-regular-bold-tight-300: 700 12px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
165
- --dds-regular-bold-tight-350: 700 14px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
166
- --dds-regular-bold-tight-400: 700 16px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
167
- --dds-checkbox-border-unselected: 2px solid #bfbfbf;
168
- --dds-checkbox-color-background: #30ade9;
169
- --dds-checkbox-color-icon: #ffffff;
170
- --dds-dropdown-color-background: #ffffff;
171
- --dds-dropdown-color-text: #515151;
172
- --dds-dropdown-tray-color-background-selected: #ebebeb;
173
- --dds-table-color-background: #ffffff;
174
- --dds-table-color-text: #515151;
175
- --dds-table-header-border: 1px none #000000;
176
- --dds-table-cell-border: 1px none #ebebeb;
177
- --dds-table-page-number-color-background-selected: #828282;
178
- --dds-table-page-number-color-text-default: #515151;
179
- --dds-table-page-number-color-text-selected: #ffffff;
180
- --dds-table-page-number-border-hover: 1px none #828282;
181
- --dds-login-sso-button-border: 1px none #616161;
182
- --dds-login-sso-button-color-text: #616161;
183
- --dds-form-color-background: #ffffff;
184
- --dds-form-color-text-default: #414141;
185
- --dds-form-color-text-placeholder: #828282;
186
- --dds-form-color-text-positive: #00c3ac;
187
- --dds-form-color-text-negative: #f21a27;
188
- --dds-notification-color-background-success: #00c3ac;
189
- --dds-notification-color-background-error: #f21a27;
190
- --dds-notification-color-background-warning: #ffbf0e;
191
- --dds-notification-color-background-alarm: #fa7a12;
192
- --dds-notification-color-background-information: #30ade9;
193
- --dds-icon-color-background: #ffffff;
194
- --dds-container-color-background: #515151;
195
- --dds-container-color-text-header: #ffffff;
196
- --dds-container-color-text-body: #f2f2f2;
197
- --dds-container-shadow: 0 -2px 19px 0 rgba(255, 255, 255, 0.1);
198
- --dds-button-color-background-primary-active: #db4f66; /* Color used for the default state of a secondary button */
199
- --dds-button-color-background-primary-hover: #c8102e;
200
- --dds-button-color-background-primary-press: #f8aeba;
201
- --dds-button-color-background-primary-focus: #f5c0b8;
202
- --dds-button-color-background-primary-disabled: #616161;
203
- --dds-button-color-border-secondary-active: #db4f66;
204
- --dds-button-color-border-secondary-hover: #c8102e;
205
- --dds-button-color-border-secondary-press: #f8aeba;
206
- --dds-button-color-border-secondary-focus: #f5c0b8;
207
- --dds-button-color-border-secondary-disabled: #616161;
208
- --dds-button-color-text-secondary-active: #db4f66;
209
- --dds-button-color-text-secondary-hover: #c8102e;
210
- --dds-button-color-text-secondary-press: #f8aeba;
211
- --dds-button-color-text-secondary-focus: #f5c0b8;
212
- --dds-button-color-text-secondary-disabled: #616161;
213
- --dds-button-color-text-primary: #515151;
138
+ --dds-font-line-height-tight: 1.3;
139
+ --dds-font-line-height-normal: 1.5;
140
+ --dds-font-weight-bold: 700;
141
+ --dds-font-weight-regular: 400;
142
+ --dds-font-family-base: Roboto;
214
143
  }
package/build/scss/aaf/Light/_mixins.scss CHANGED
@@ -63,12 +63,6 @@
63
63
  --dds-color-red-100: #7b070e;
64
64
  --dds-color-red-110: #5d050a;
65
65
  --dds-color-red-120: #3e0307;
66
- --dds-color-red-aaf-100: #fcecea;
67
- --dds-color-red-aaf-200: #f5c0b8;
68
- --dds-color-red-aaf-300: #f8aeba;
69
- --dds-color-red-aaf-400: #db4f66;
70
- --dds-color-red-aaf-500: #d2324c;
71
- --dds-color-red-aaf-600: #c8102e;
72
66
  --dds-color-gray-10: #f2f2f2;
73
67
  --dds-color-gray-20: #ebebeb;
74
68
  --dds-color-gray-30: #dcdcdc;
@@ -83,8 +77,6 @@
83
77
  --dds-color-gray-120: #212121;
84
78
  --dds-color-black: #000000;
85
79
  --dds-color-white: #ffffff;
86
- --dds-color-black-shadow: rgba(0, 0, 0, 0.1);
87
- --dds-color-white-shadow: rgba(255, 255, 255, 0.1);
88
80
  --dds-color-blue-gray-10: #eef0f2;
89
81
  --dds-color-blue-gray-20: #d8dde0;
90
82
  --dds-color-blue-gray-30: #bbc1c7;
@@ -112,20 +104,6 @@
112
104
  --dds-color-purple-100: #4a1c51;
113
105
  --dds-color-purple-110: #37153d;
114
106
  --dds-color-purple-120: #250e29;
115
- --dds-color-feedback-positive: #00c3ac; /* System status is positive */
116
- --dds-color-feedback-warning: #ffbf0e; /* System status is warning */
117
- --dds-color-feedback-negative: #f21a27; /* System status is warning */
118
- --dds-color-feedback-alarm: #fa7a12; /* System status is warning */
119
- --dds-color-feedback-information: #30ade9; /* System status is warning */
120
- --dds-color-brand-primary: #c8102e; /* Primary brand blue */
121
- --dds-color-brand-secondary: #db4f66;
122
- --dds-color-text-brand-primary: #c8102e;
123
- --dds-color-text-theme: #ffffff;
124
- --dds-color-text-default: #515151;
125
- --dds-color-text-default-sub: #828282;
126
- --dds-color-background-theme: #ffffff;
127
- --dds-color-background-component: #ffffff;
128
- --dds-color-background-object: #515151;
129
107
  --dds-border-radius-100: 4px;
130
108
  --dds-border-radius-150: 6px;
131
109
  --dds-border-radius-200: 8px;
@@ -142,73 +120,24 @@
142
120
  --dds-space-400: 16px;
143
121
  --dds-space-800: 32px;
144
122
  --dds-space-050: 2px;
145
- --dds-shadow-black: 0 -2px 19px 0 rgba(0, 0, 0, 0.1);
146
- --dds-shadow-white: 0 -2px 19px 0 rgba(255, 255, 255, 0.1);
123
+ --dds-font-regular-normal-300: 400 12px/1.5 Roboto;
124
+ --dds-font-regular-normal-350: 400 14px/1.5 Roboto;
125
+ --dds-font-regular-normal-400: 400 16px/1.5 Roboto;
126
+ --dds-font-regular-tight-300: 400 12px/1.3 Roboto;
127
+ --dds-font-regular-tight-350: 400 14px/1.3 Roboto;
128
+ --dds-font-regular-tight-400: 400 16px/1.3 Roboto;
129
+ --dds-font-regular-bold-normal-300: 700 12px/1.5 Roboto;
130
+ --dds-font-regular-bold-normal-350: 700 14px/1.5 Roboto;
131
+ --dds-font-regular-bold-normal-400: 700 16px/1.5 Roboto;
132
+ --dds-font-regular-bold-tight-300: 700 12px/1.3 Roboto;
133
+ --dds-font-regular-bold-tight-350: 700 14px/1.3 Roboto;
134
+ --dds-font-regular-bold-tight-400: 700 16px/1.3 Roboto;
147
135
  --dds-font-size-300: 12px;
148
136
  --dds-font-size-350: 14px;
149
137
  --dds-font-size-400: 16px;
150
- --dds-line-height-tight: 130%;
151
- --dds-line-height-normal: 150%;
152
- --dds-font-weight-bold: Bold;
153
- --dds-font-weight-regular: Regular;
154
- --dds-font-family-base: Roboto; /* The primary font used in the DDS Design Kit is Roboto */
155
- --dds-regular-normal-300: 400 12px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
156
- --dds-regular-normal-350: 400 14px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
157
- --dds-regular-normal-400: 400 16px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
158
- --dds-regular-tight-300: 400 12px/1.3 Roboto; /* Body is primarily used for components and for blocks of text. */
159
- --dds-regular-tight-350: 400 14px/1.3 Roboto; /* Body is primarily used for components and for blocks of text. */
160
- --dds-regular-tight-400: 400 16px/1.3 Roboto; /* Body is primarily used for components and for blocks of text. */
161
- --dds-regular-bold-normal-300: 700 12px/1.5 Roboto; /* Header is used to create various levels of typographic hierarchies. */
162
- --dds-regular-bold-normal-350: 700 14px/1.5 Roboto; /* Header is used to create various levels of typographic hierarchies. */
163
- --dds-regular-bold-normal-400: 700 16px/1.5 Roboto; /* Header is used to create various levels of typographic hierarchies. */
164
- --dds-regular-bold-tight-300: 700 12px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
165
- --dds-regular-bold-tight-350: 700 14px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
166
- --dds-regular-bold-tight-400: 700 16px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
167
- --dds-checkbox-border-unselected: 2px solid #bfbfbf;
168
- --dds-checkbox-color-background: #30ade9;
169
- --dds-checkbox-color-icon: #ffffff;
170
- --dds-dropdown-color-background: #ffffff;
171
- --dds-dropdown-color-text: #515151;
172
- --dds-dropdown-tray-color-background-selected: #ebebeb;
173
- --dds-table-color-background: #ffffff;
174
- --dds-table-color-text: #515151;
175
- --dds-table-header-border: 1px none #000000;
176
- --dds-table-cell-border: 1px none #ebebeb;
177
- --dds-table-page-number-color-background-selected: #828282;
178
- --dds-table-page-number-color-text-default: #515151;
179
- --dds-table-page-number-color-text-selected: #ffffff;
180
- --dds-table-page-number-border-hover: 1px none #828282;
181
- --dds-login-sso-button-border: 1px none #616161;
182
- --dds-login-sso-button-color-text: #616161;
183
- --dds-form-color-background: #ffffff;
184
- --dds-form-color-text-default: #414141;
185
- --dds-form-color-text-placeholder: #828282;
186
- --dds-form-color-text-positive: #00c3ac;
187
- --dds-form-color-text-negative: #f21a27;
188
- --dds-notification-color-background-success: #00c3ac;
189
- --dds-notification-color-background-error: #f21a27;
190
- --dds-notification-color-background-warning: #ffbf0e;
191
- --dds-notification-color-background-alarm: #fa7a12;
192
- --dds-notification-color-background-information: #30ade9;
193
- --dds-icon-color-background: #515151;
194
- --dds-container-color-background: #ffffff;
195
- --dds-container-color-text-header: #515151;
196
- --dds-container-color-text-body: #828282;
197
- --dds-container-shadow: 0 -2px 19px 0 rgba(0, 0, 0, 0.1);
198
- --dds-button-color-background-primary-active: #c8102e; /* Color used for the default state of a secondary button */
199
- --dds-button-color-background-primary-hover: #db4f66;
200
- --dds-button-color-background-primary-press: #d2324c;
201
- --dds-button-color-background-primary-focus: #f8aeba;
202
- --dds-button-color-background-primary-disabled: #dcdcdc;
203
- --dds-button-color-border-secondary-active: #c8102e;
204
- --dds-button-color-border-secondary-hover: #db4f66;
205
- --dds-button-color-border-secondary-press: #d2324c;
206
- --dds-button-color-border-secondary-focus: #f8aeba;
207
- --dds-button-color-border-secondary-disabled: #dcdcdc;
208
- --dds-button-color-text-secondary-active: #c8102e;
209
- --dds-button-color-text-secondary-hover: #db4f66;
210
- --dds-button-color-text-secondary-press: #d2324c;
211
- --dds-button-color-text-secondary-focus: #f8aeba;
212
- --dds-button-color-text-secondary-disabled: #dcdcdc;
213
- --dds-button-color-text-primary: #ffffff;
138
+ --dds-font-line-height-tight: 1.3;
139
+ --dds-font-line-height-normal: 1.5;
140
+ --dds-font-weight-bold: 700;
141
+ --dds-font-weight-regular: 400;
142
+ --dds-font-family-base: Roboto;
214
143
  }
package/build/scss/daikin/Dark/_mixins.scss CHANGED
@@ -63,12 +63,6 @@
63
63
  --dds-color-red-100: #7b070e;
64
64
  --dds-color-red-110: #5d050a;
65
65
  --dds-color-red-120: #3e0307;
66
- --dds-color-red-aaf-100: #fcecea;
67
- --dds-color-red-aaf-200: #f5c0b8;
68
- --dds-color-red-aaf-300: #f8aeba;
69
- --dds-color-red-aaf-400: #db4f66;
70
- --dds-color-red-aaf-500: #d2324c;
71
- --dds-color-red-aaf-600: #c8102e;
72
66
  --dds-color-gray-10: #f2f2f2;
73
67
  --dds-color-gray-20: #ebebeb;
74
68
  --dds-color-gray-30: #dcdcdc;
@@ -83,8 +77,6 @@
83
77
  --dds-color-gray-120: #212121;
84
78
  --dds-color-black: #000000;
85
79
  --dds-color-white: #ffffff;
86
- --dds-color-black-shadow: rgba(0, 0, 0, 0.1);
87
- --dds-color-white-shadow: rgba(255, 255, 255, 0.1);
88
80
  --dds-color-blue-gray-10: #eef0f2;
89
81
  --dds-color-blue-gray-20: #d8dde0;
90
82
  --dds-color-blue-gray-30: #bbc1c7;
@@ -112,32 +104,18 @@
112
104
  --dds-color-purple-100: #4a1c51;
113
105
  --dds-color-purple-110: #37153d;
114
106
  --dds-color-purple-120: #250e29;
115
- --dds-color-feedback-positive: #00c3ac; /* System status is positive */
116
- --dds-color-feedback-warning: #ffbf0e; /* System status is warning */
117
- --dds-color-feedback-negative: #f21a27; /* System status is warning */
118
- --dds-color-feedback-alarm: #fa7a12; /* System status is warning */
119
- --dds-color-feedback-information: #30ade9; /* System status is warning */
120
- --dds-color-brand-primary: #30ade9; /* Primary brand blue */
121
- --dds-color-brand-secondary: #76cff4; /* Primary secondary brand blue */
122
- --dds-color-text-brand-primary: #30ade9;
123
- --dds-color-text-theme: #ffffff;
124
- --dds-color-text-default: #414141;
125
- --dds-color-text-default-sub: #616161;
126
- --dds-color-background-theme: #ffffff;
127
- --dds-color-background-component: #ffffff;
128
- --dds-color-background-object: #414141;
129
107
  --dds-color-common-brand-default: #30ade9;
130
108
  --dds-color-common-brand-hover: #54c3f1;
131
109
  --dds-color-common-brand-press: #76cff4;
132
110
  --dds-color-common-surface-brand-hover: #002b40;
133
111
  --dds-color-common-surface-brand-press: #004160;
134
- --dds-color-common-surface-neutral-hover: #313131;
135
- --dds-color-common-surface-neutral-press: #414141;
112
+ --dds-color-common-surface-neutral-hover: #282828;
113
+ --dds-color-common-surface-neutral-press: #313131;
136
114
  --dds-color-common-surface-danger-hover: #3e0307;
137
115
  --dds-color-common-surface-danger-press: #5d050a;
138
116
  --dds-color-common-surface-default: #212121;
139
- --dds-color-common-surface-hover: #313131;
140
- --dds-color-common-surface-press: #414141;
117
+ --dds-color-common-surface-hover: #282828;
118
+ --dds-color-common-surface-press: #313131;
141
119
  --dds-color-common-surface-selected-default: #002b40;
142
120
  --dds-color-common-surface-selected-hover: #004160;
143
121
  --dds-color-common-surface-selected-press: #005077;
@@ -184,92 +162,24 @@
184
162
  --dds-space-400: 16px;
185
163
  --dds-space-800: 32px;
186
164
  --dds-space-050: 2px;
187
- --dds-shadow-black: 0 -2px 19px 0 rgba(0, 0, 0, 0.1);
188
- --dds-shadow-white: 0 -2px 19px 0 rgba(255, 255, 255, 0.1);
165
+ --dds-font-regular-normal-300: 400 12px/1.5 Roboto;
166
+ --dds-font-regular-normal-350: 400 14px/1.5 Roboto;
167
+ --dds-font-regular-normal-400: 400 16px/1.5 Roboto;
168
+ --dds-font-regular-tight-300: 400 12px/1.3 Roboto;
169
+ --dds-font-regular-tight-350: 400 14px/1.3 Roboto;
170
+ --dds-font-regular-tight-400: 400 16px/1.3 Roboto;
171
+ --dds-font-regular-bold-normal-300: 700 12px/1.5 Roboto;
172
+ --dds-font-regular-bold-normal-350: 700 14px/1.5 Roboto;
173
+ --dds-font-regular-bold-normal-400: 700 16px/1.5 Roboto;
174
+ --dds-font-regular-bold-tight-300: 700 12px/1.3 Roboto;
175
+ --dds-font-regular-bold-tight-350: 700 14px/1.3 Roboto;
176
+ --dds-font-regular-bold-tight-400: 700 16px/1.3 Roboto;
189
177
  --dds-font-size-300: 12px;
190
178
  --dds-font-size-350: 14px;
191
179
  --dds-font-size-400: 16px;
192
- --dds-line-height-tight: 130%;
193
- --dds-line-height-normal: 150%;
194
- --dds-font-weight-bold: Bold;
195
- --dds-font-weight-regular: Regular;
196
- --dds-font-family-base: Roboto; /* The primary font used in the DDS Design Kit is Roboto */
197
- --dds-regular-normal-300: 400 12px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
198
- --dds-regular-normal-350: 400 14px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
199
- --dds-regular-normal-400: 400 16px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
200
- --dds-regular-tight-300: 400 12px/1.3 Roboto; /* Body is primarily used for components and for blocks of text. */
201
- --dds-regular-tight-350: 400 14px/1.3 Roboto; /* Body is primarily used for components and for blocks of text. */
202
- --dds-regular-tight-400: 400 16px/1.3 Roboto; /* Body is primarily used for components and for blocks of text. */
203
- --dds-regular-bold-normal-300: 700 12px/1.5 Roboto; /* Header is used to create various levels of typographic hierarchies. */
204
- --dds-regular-bold-normal-350: 700 14px/1.5 Roboto; /* Header is used to create various levels of typographic hierarchies. */
205
- --dds-regular-bold-normal-400: 700 16px/1.5 Roboto; /* Header is used to create various levels of typographic hierarchies. */
206
- --dds-regular-bold-tight-300: 700 12px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
207
- --dds-regular-bold-tight-350: 700 14px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
208
- --dds-regular-bold-tight-400: 700 16px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
209
- --dds-checkbox-border-unselected: 2px solid #bfbfbf;
210
- --dds-checkbox-color-background: #30ade9;
211
- --dds-checkbox-color-icon: #ffffff;
212
- --dds-dropdown-color-background: #ffffff;
213
- --dds-dropdown-color-text: #515151;
214
- --dds-dropdown-tray-color-background-selected: #ebebeb;
215
- --dds-table-color-background: #ffffff;
216
- --dds-table-color-text: #515151;
217
- --dds-table-header-border: 1px none #000000;
218
- --dds-table-cell-border: 1px none #ebebeb;
219
- --dds-table-page-number-color-background-selected: #828282;
220
- --dds-table-page-number-color-text-default: #515151;
221
- --dds-table-page-number-color-text-selected: #ffffff;
222
- --dds-table-page-number-border-hover: 1px none #828282;
223
- --dds-login-sso-button-border: 1px none #616161;
224
- --dds-login-sso-button-color-text: #616161;
225
- --dds-form-color-background: #ffffff;
226
- --dds-form-color-text-default: #414141;
227
- --dds-form-color-text-placeholder: #828282;
228
- --dds-form-color-text-positive: #00c3ac;
229
- --dds-form-color-text-negative: #f21a27;
230
- --dds-notification-color-background-success: #00c3ac;
231
- --dds-notification-color-background-error: #f21a27;
232
- --dds-notification-color-background-warning: #ffbf0e;
233
- --dds-notification-color-background-alarm: #fa7a12;
234
- --dds-notification-color-background-information: #30ade9;
235
- --dds-notification-color-background-theme: #ffffff;
236
- --dds-notification-color-text: #414141;
237
- --dds-notification-shadow: 0 -2px 19px 0 rgba(0, 0, 0, 0.1);
238
- --dds-icon-color-background-neutral: #a0a0a0;
239
- --dds-icon-color-background-default: #414141;
240
- --dds-icon-color-background-theme: #ffffff;
241
- --dds-container-color-background: #ffffff;
242
- --dds-container-color-text-header: #414141;
243
- --dds-container-color-text-body: #616161;
244
- --dds-card-shadow: 0 -2px 19px 0 rgba(0, 0, 0, 0.1);
245
- --dds-card-color-background: #ffffff;
246
- --dds-card-border-hover: 2px solid #BFBFBF;
247
- --dds-card-border-alert: 2px solid #f21a27;
248
- --dds-card-border-underline: 1px solid #d8dde0;
249
- --dds-button-color-background-primary-active: #30ade9; /* Color used for the default state of a secondary button */
250
- --dds-button-color-background-primary-hover: #76cff4;
251
- --dds-button-color-background-primary-press: #0097e0;
252
- --dds-button-color-background-primary-focus: #0081c0;
253
- --dds-button-color-background-primary-disabled: #dcdcdc;
254
- --dds-button-color-border-secondary-active: #30ade9;
255
- --dds-button-color-border-secondary-hover: #76cff4;
256
- --dds-button-color-border-secondary-press: #0097e0;
257
- --dds-button-color-border-secondary-focus: #0081c0;
258
- --dds-button-color-border-secondary-disabled: #dcdcdc;
259
- --dds-button-color-text-secondary-active: #30ade9;
260
- --dds-button-color-text-secondary-hover: #76cff4;
261
- --dds-button-color-text-secondary-press: #0097e0;
262
- --dds-button-color-text-secondary-focus: #0081c0;
263
- --dds-button-color-text-secondary-disabled: #dcdcdc;
264
- --dds-button-color-text-primary: #ffffff;
265
- --dds-tab-color-line-active: #30ade9;
266
- --dds-tab-color-line-hover: #76cff4;
267
- --dds-tab-color-line-press: #0097e0;
268
- --dds-tab-color-line-focus: #0081c0;
269
- --dds-tab-color-line-disabled: #dcdcdc;
270
- --dds-tab-color-text-active: #30ade9;
271
- --dds-tab-color-text-hover: #76cff4;
272
- --dds-tab-color-text-press: #0097e0;
273
- --dds-tab-color-text-focus: #0081c0;
274
- --dds-tab-color-text-disabled: #dcdcdc;
180
+ --dds-font-line-height-tight: 1.3;
181
+ --dds-font-line-height-normal: 1.5;
182
+ --dds-font-weight-bold: 700;
183
+ --dds-font-weight-regular: 400;
184
+ --dds-font-family-base: Roboto;
275
185
  }
package/build/scss/daikin/Light/_mixins.scss CHANGED
@@ -63,12 +63,6 @@
63
63
  --dds-color-red-100: #7b070e;
64
64
  --dds-color-red-110: #5d050a;
65
65
  --dds-color-red-120: #3e0307;
66
- --dds-color-red-aaf-100: #fcecea;
67
- --dds-color-red-aaf-200: #f5c0b8;
68
- --dds-color-red-aaf-300: #f8aeba;
69
- --dds-color-red-aaf-400: #db4f66;
70
- --dds-color-red-aaf-500: #d2324c;
71
- --dds-color-red-aaf-600: #c8102e;
72
66
  --dds-color-gray-10: #f2f2f2;
73
67
  --dds-color-gray-20: #ebebeb;
74
68
  --dds-color-gray-30: #dcdcdc;
@@ -83,8 +77,6 @@
83
77
  --dds-color-gray-120: #212121;
84
78
  --dds-color-black: #000000;
85
79
  --dds-color-white: #ffffff;
86
- --dds-color-black-shadow: rgba(0, 0, 0, 0.1);
87
- --dds-color-white-shadow: rgba(255, 255, 255, 0.1);
88
80
  --dds-color-blue-gray-10: #eef0f2;
89
81
  --dds-color-blue-gray-20: #d8dde0;
90
82
  --dds-color-blue-gray-30: #bbc1c7;
@@ -112,20 +104,6 @@
112
104
  --dds-color-purple-100: #4a1c51;
113
105
  --dds-color-purple-110: #37153d;
114
106
  --dds-color-purple-120: #250e29;
115
- --dds-color-feedback-positive: #00c3ac; /* System status is positive */
116
- --dds-color-feedback-warning: #ffbf0e; /* System status is warning */
117
- --dds-color-feedback-negative: #f21a27; /* System status is warning */
118
- --dds-color-feedback-alarm: #fa7a12; /* System status is warning */
119
- --dds-color-feedback-information: #30ade9; /* System status is warning */
120
- --dds-color-brand-primary: #30ade9; /* Primary brand blue */
121
- --dds-color-brand-secondary: #76cff4; /* Primary secondary brand blue */
122
- --dds-color-text-brand-primary: #30ade9;
123
- --dds-color-text-theme: #ffffff;
124
- --dds-color-text-default: #414141;
125
- --dds-color-text-default-sub: #616161;
126
- --dds-color-background-theme: #ffffff;
127
- --dds-color-background-component: #ffffff;
128
- --dds-color-background-object: #414141;
129
107
  --dds-color-common-brand-default: #0097e0;
130
108
  --dds-color-common-brand-hover: #0081c0;
131
109
  --dds-color-common-brand-press: #00689a;
@@ -184,92 +162,24 @@
184
162
  --dds-space-400: 16px;
185
163
  --dds-space-800: 32px;
186
164
  --dds-space-050: 2px;
187
- --dds-shadow-black: 0 -2px 19px 0 rgba(0, 0, 0, 0.1);
188
- --dds-shadow-white: 0 -2px 19px 0 rgba(255, 255, 255, 0.1);
165
+ --dds-font-regular-normal-300: 400 12px/1.5 Roboto;
166
+ --dds-font-regular-normal-350: 400 14px/1.5 Roboto;
167
+ --dds-font-regular-normal-400: 400 16px/1.5 Roboto;
168
+ --dds-font-regular-tight-300: 400 12px/1.3 Roboto;
169
+ --dds-font-regular-tight-350: 400 14px/1.3 Roboto;
170
+ --dds-font-regular-tight-400: 400 16px/1.3 Roboto;
171
+ --dds-font-regular-bold-normal-300: 700 12px/1.5 Roboto;
172
+ --dds-font-regular-bold-normal-350: 700 14px/1.5 Roboto;
173
+ --dds-font-regular-bold-normal-400: 700 16px/1.5 Roboto;
174
+ --dds-font-regular-bold-tight-300: 700 12px/1.3 Roboto;
175
+ --dds-font-regular-bold-tight-350: 700 14px/1.3 Roboto;
176
+ --dds-font-regular-bold-tight-400: 700 16px/1.3 Roboto;
189
177
  --dds-font-size-300: 12px;
190
178
  --dds-font-size-350: 14px;
191
179
  --dds-font-size-400: 16px;
192
- --dds-line-height-tight: 130%;
193
- --dds-line-height-normal: 150%;
194
- --dds-font-weight-bold: Bold;
195
- --dds-font-weight-regular: Regular;
196
- --dds-font-family-base: Roboto; /* The primary font used in the DDS Design Kit is Roboto */
197
- --dds-regular-normal-300: 400 12px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
198
- --dds-regular-normal-350: 400 14px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
199
- --dds-regular-normal-400: 400 16px/1.5 Roboto; /* Body is primarily used for components and for blocks of text. */
200
- --dds-regular-tight-300: 400 12px/1.3 Roboto; /* Body is primarily used for components and for blocks of text. */
201
- --dds-regular-tight-350: 400 14px/1.3 Roboto; /* Body is primarily used for components and for blocks of text. */
202
- --dds-regular-tight-400: 400 16px/1.3 Roboto; /* Body is primarily used for components and for blocks of text. */
203
- --dds-regular-bold-normal-300: 700 12px/1.5 Roboto; /* Header is used to create various levels of typographic hierarchies. */
204
- --dds-regular-bold-normal-350: 700 14px/1.5 Roboto; /* Header is used to create various levels of typographic hierarchies. */
205
- --dds-regular-bold-normal-400: 700 16px/1.5 Roboto; /* Header is used to create various levels of typographic hierarchies. */
206
- --dds-regular-bold-tight-300: 700 12px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
207
- --dds-regular-bold-tight-350: 700 14px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
208
- --dds-regular-bold-tight-400: 700 16px/1.3 Roboto; /* Header is used to create various levels of typographic hierarchies. */
209
- --dds-checkbox-border-unselected: 2px solid #bfbfbf;
210
- --dds-checkbox-color-background: #30ade9;
211
- --dds-checkbox-color-icon: #ffffff;
212
- --dds-dropdown-color-background: #ffffff;
213
- --dds-dropdown-color-text: #515151;
214
- --dds-dropdown-tray-color-background-selected: #ebebeb;
215
- --dds-table-color-background: #ffffff;
216
- --dds-table-color-text: #515151;
217
- --dds-table-header-border: 1px none #000000;
218
- --dds-table-cell-border: 1px none #ebebeb;
219
- --dds-table-page-number-color-background-selected: #828282;
220
- --dds-table-page-number-color-text-default: #515151;
221
- --dds-table-page-number-color-text-selected: #ffffff;
222
- --dds-table-page-number-border-hover: 1px none #828282;
223
- --dds-login-sso-button-border: 1px none #616161;
224
- --dds-login-sso-button-color-text: #616161;
225
- --dds-form-color-background: #ffffff;
226
- --dds-form-color-text-default: #414141;
227
- --dds-form-color-text-placeholder: #828282;
228
- --dds-form-color-text-positive: #00c3ac;
229
- --dds-form-color-text-negative: #f21a27;
230
- --dds-notification-color-background-success: #00c3ac;
231
- --dds-notification-color-background-error: #f21a27;
232
- --dds-notification-color-background-warning: #ffbf0e;
233
- --dds-notification-color-background-alarm: #fa7a12;
234
- --dds-notification-color-background-information: #30ade9;
235
- --dds-notification-color-background-theme: #ffffff;
236
- --dds-notification-color-text: #414141;
237
- --dds-notification-shadow: 0 -2px 19px 0 rgba(0, 0, 0, 0.1);
238
- --dds-icon-color-background-neutral: #a0a0a0;
239
- --dds-icon-color-background-default: #414141;
240
- --dds-icon-color-background-theme: #ffffff;
241
- --dds-container-color-background: #ffffff;
242
- --dds-container-color-text-header: #414141;
243
- --dds-container-color-text-body: #616161;
244
- --dds-card-shadow: 0 -2px 19px 0 rgba(0, 0, 0, 0.1);
245
- --dds-card-color-background: #ffffff;
246
- --dds-card-border-hover: 2px solid #BFBFBF;
247
- --dds-card-border-alert: 2px solid #f21a27;
248
- --dds-card-border-underline: 1px solid #d8dde0;
249
- --dds-button-color-background-primary-active: #30ade9; /* Color used for the default state of a secondary button */
250
- --dds-button-color-background-primary-hover: #76cff4;
251
- --dds-button-color-background-primary-press: #0097e0;
252
- --dds-button-color-background-primary-focus: #0081c0;
253
- --dds-button-color-background-primary-disabled: #dcdcdc;
254
- --dds-button-color-border-secondary-active: #30ade9;
255
- --dds-button-color-border-secondary-hover: #76cff4;
256
- --dds-button-color-border-secondary-press: #0097e0;
257
- --dds-button-color-border-secondary-focus: #0081c0;
258
- --dds-button-color-border-secondary-disabled: #dcdcdc;
259
- --dds-button-color-text-secondary-active: #30ade9;
260
- --dds-button-color-text-secondary-hover: #76cff4;
261
- --dds-button-color-text-secondary-press: #0097e0;
262
- --dds-button-color-text-secondary-focus: #0081c0;
263
- --dds-button-color-text-secondary-disabled: #dcdcdc;
264
- --dds-button-color-text-primary: #ffffff;
265
- --dds-tab-color-line-active: #30ade9;
266
- --dds-tab-color-line-hover: #76cff4;
267
- --dds-tab-color-line-press: #0097e0;
268
- --dds-tab-color-line-focus: #0081c0;
269
- --dds-tab-color-line-disabled: #dcdcdc;
270
- --dds-tab-color-text-active: #30ade9;
271
- --dds-tab-color-text-hover: #76cff4;
272
- --dds-tab-color-text-press: #0097e0;
273
- --dds-tab-color-text-focus: #0081c0;
274
- --dds-tab-color-text-disabled: #dcdcdc;
180
+ --dds-font-line-height-tight: 1.3;
181
+ --dds-font-line-height-normal: 1.5;
182
+ --dds-font-weight-bold: 700;
183
+ --dds-font-weight-regular: 400;
184
+ --dds-font-family-base: Roboto;
275
185
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@daikin-oss/dds-tokens",
3
- "version": "0.2.1",
3
+ "version": "0.3.1",
4
4
  "description": "Design token definitions for DDS",
5
5
  "type": "module",
6
6
  "files": [