@daikin-oss/dds-tokens 0.3.1 → 0.4.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.
- package/CHANGELOG.md +13 -0
- package/build/css/aaf/Dark/variables.css +6 -4
- package/build/css/aaf/Light/variables.css +6 -4
- package/build/css/daikin/Dark/variables.css +7 -4
- package/build/css/daikin/Light/variables.css +7 -4
- package/build/js/aaf/Dark/variables.cjs +6 -4
- package/build/js/aaf/Dark/variables.d.cts +6 -4
- package/build/js/aaf/Dark/variables.d.ts +6 -4
- package/build/js/aaf/Dark/variables.js +6 -4
- package/build/js/aaf/Light/variables.cjs +6 -4
- package/build/js/aaf/Light/variables.d.cts +6 -4
- package/build/js/aaf/Light/variables.d.ts +6 -4
- package/build/js/aaf/Light/variables.js +6 -4
- package/build/js/daikin/Dark/variables.cjs +7 -4
- package/build/js/daikin/Dark/variables.d.cts +7 -4
- package/build/js/daikin/Dark/variables.d.ts +7 -4
- package/build/js/daikin/Dark/variables.js +7 -4
- package/build/js/daikin/Light/variables.cjs +7 -4
- package/build/js/daikin/Light/variables.d.cts +7 -4
- package/build/js/daikin/Light/variables.d.ts +7 -4
- package/build/js/daikin/Light/variables.js +7 -4
- package/build/json/aaf/Dark/tokens.json +30 -20
- package/build/json/aaf/Light/tokens.json +30 -20
- package/build/json/daikin/Dark/tokens.json +35 -20
- package/build/json/daikin/Light/tokens.json +35 -20
- package/build/scss/aaf/Dark/_mixins.scss +6 -4
- package/build/scss/aaf/Light/_mixins.scss +6 -4
- package/build/scss/daikin/Dark/_mixins.scss +7 -4
- package/build/scss/daikin/Light/_mixins.scss +7 -4
- package/package.json +9 -8
- package/themes/$themes.json +8 -4
- package/themes/dkn/dark/system.json +4 -0
- package/themes/dkn/light/system.json +4 -0
- package/themes/reference.json +44 -16
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- **BREAKING CHANGE**: 16 token(s) removed (`border-radius-150`, `border-radius-150`, `border-radius-250`, `border-radius-300`).
|
|
8
|
+
24 token(s) added.
|
|
9
|
+
|
|
10
|
+
## 0.3.2
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- 2 token(s) added.
|
|
15
|
+
|
|
3
16
|
## 0.3.1
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -105,11 +105,7 @@
|
|
|
105
105
|
--dds-color-purple-110: #37153d;
|
|
106
106
|
--dds-color-purple-120: #250e29;
|
|
107
107
|
--dds-border-radius-100: 4px;
|
|
108
|
-
--dds-border-radius-150: 6px;
|
|
109
108
|
--dds-border-radius-200: 8px;
|
|
110
|
-
--dds-border-radius-250: 10px;
|
|
111
|
-
--dds-border-radius-300: 12px;
|
|
112
|
-
--dds-border-radius-400: 16px;
|
|
113
109
|
--dds-border-radius-050: 2px;
|
|
114
110
|
--dds-border-width-100: 4px;
|
|
115
111
|
--dds-border-width-025: 1px;
|
|
@@ -118,23 +114,29 @@
|
|
|
118
114
|
--dds-space-200: 8px;
|
|
119
115
|
--dds-space-300: 12px;
|
|
120
116
|
--dds-space-400: 16px;
|
|
117
|
+
--dds-space-600: 24px;
|
|
121
118
|
--dds-space-800: 32px;
|
|
122
119
|
--dds-space-050: 2px;
|
|
123
120
|
--dds-font-regular-normal-300: 400 12px/1.5 Roboto;
|
|
124
121
|
--dds-font-regular-normal-350: 400 14px/1.5 Roboto;
|
|
125
122
|
--dds-font-regular-normal-400: 400 16px/1.5 Roboto;
|
|
123
|
+
--dds-font-regular-normal-500: 400 20px/1.5 Roboto;
|
|
126
124
|
--dds-font-regular-tight-300: 400 12px/1.3 Roboto;
|
|
127
125
|
--dds-font-regular-tight-350: 400 14px/1.3 Roboto;
|
|
128
126
|
--dds-font-regular-tight-400: 400 16px/1.3 Roboto;
|
|
127
|
+
--dds-font-regular-tight-500: 400 20px/1.3 Roboto;
|
|
129
128
|
--dds-font-regular-bold-normal-300: 700 12px/1.5 Roboto;
|
|
130
129
|
--dds-font-regular-bold-normal-350: 700 14px/1.5 Roboto;
|
|
131
130
|
--dds-font-regular-bold-normal-400: 700 16px/1.5 Roboto;
|
|
131
|
+
--dds-font-regular-bold-normal-500: 700 20px/1.5 Roboto;
|
|
132
132
|
--dds-font-regular-bold-tight-300: 700 12px/1.3 Roboto;
|
|
133
133
|
--dds-font-regular-bold-tight-350: 700 14px/1.3 Roboto;
|
|
134
134
|
--dds-font-regular-bold-tight-400: 700 16px/1.3 Roboto;
|
|
135
|
+
--dds-font-regular-bold-tight-500: 700 20px/1.3 Roboto;
|
|
135
136
|
--dds-font-size-300: 12px;
|
|
136
137
|
--dds-font-size-350: 14px;
|
|
137
138
|
--dds-font-size-400: 16px;
|
|
139
|
+
--dds-font-size-500: 20px;
|
|
138
140
|
--dds-font-line-height-tight: 1.3;
|
|
139
141
|
--dds-font-line-height-normal: 1.5;
|
|
140
142
|
--dds-font-weight-bold: 700;
|
|
@@ -105,11 +105,7 @@
|
|
|
105
105
|
--dds-color-purple-110: #37153d;
|
|
106
106
|
--dds-color-purple-120: #250e29;
|
|
107
107
|
--dds-border-radius-100: 4px;
|
|
108
|
-
--dds-border-radius-150: 6px;
|
|
109
108
|
--dds-border-radius-200: 8px;
|
|
110
|
-
--dds-border-radius-250: 10px;
|
|
111
|
-
--dds-border-radius-300: 12px;
|
|
112
|
-
--dds-border-radius-400: 16px;
|
|
113
109
|
--dds-border-radius-050: 2px;
|
|
114
110
|
--dds-border-width-100: 4px;
|
|
115
111
|
--dds-border-width-025: 1px;
|
|
@@ -118,23 +114,29 @@
|
|
|
118
114
|
--dds-space-200: 8px;
|
|
119
115
|
--dds-space-300: 12px;
|
|
120
116
|
--dds-space-400: 16px;
|
|
117
|
+
--dds-space-600: 24px;
|
|
121
118
|
--dds-space-800: 32px;
|
|
122
119
|
--dds-space-050: 2px;
|
|
123
120
|
--dds-font-regular-normal-300: 400 12px/1.5 Roboto;
|
|
124
121
|
--dds-font-regular-normal-350: 400 14px/1.5 Roboto;
|
|
125
122
|
--dds-font-regular-normal-400: 400 16px/1.5 Roboto;
|
|
123
|
+
--dds-font-regular-normal-500: 400 20px/1.5 Roboto;
|
|
126
124
|
--dds-font-regular-tight-300: 400 12px/1.3 Roboto;
|
|
127
125
|
--dds-font-regular-tight-350: 400 14px/1.3 Roboto;
|
|
128
126
|
--dds-font-regular-tight-400: 400 16px/1.3 Roboto;
|
|
127
|
+
--dds-font-regular-tight-500: 400 20px/1.3 Roboto;
|
|
129
128
|
--dds-font-regular-bold-normal-300: 700 12px/1.5 Roboto;
|
|
130
129
|
--dds-font-regular-bold-normal-350: 700 14px/1.5 Roboto;
|
|
131
130
|
--dds-font-regular-bold-normal-400: 700 16px/1.5 Roboto;
|
|
131
|
+
--dds-font-regular-bold-normal-500: 700 20px/1.5 Roboto;
|
|
132
132
|
--dds-font-regular-bold-tight-300: 700 12px/1.3 Roboto;
|
|
133
133
|
--dds-font-regular-bold-tight-350: 700 14px/1.3 Roboto;
|
|
134
134
|
--dds-font-regular-bold-tight-400: 700 16px/1.3 Roboto;
|
|
135
|
+
--dds-font-regular-bold-tight-500: 700 20px/1.3 Roboto;
|
|
135
136
|
--dds-font-size-300: 12px;
|
|
136
137
|
--dds-font-size-350: 14px;
|
|
137
138
|
--dds-font-size-400: 16px;
|
|
139
|
+
--dds-font-size-500: 20px;
|
|
138
140
|
--dds-font-line-height-tight: 1.3;
|
|
139
141
|
--dds-font-line-height-normal: 1.5;
|
|
140
142
|
--dds-font-weight-bold: 700;
|
|
@@ -114,6 +114,7 @@
|
|
|
114
114
|
--dds-color-common-surface-danger-hover: #3e0307;
|
|
115
115
|
--dds-color-common-surface-danger-press: #5d050a;
|
|
116
116
|
--dds-color-common-surface-default: #212121;
|
|
117
|
+
--dds-color-common-surface-inverse: #ffffff;
|
|
117
118
|
--dds-color-common-surface-hover: #282828;
|
|
118
119
|
--dds-color-common-surface-press: #313131;
|
|
119
120
|
--dds-color-common-surface-selected-default: #002b40;
|
|
@@ -147,11 +148,7 @@
|
|
|
147
148
|
--dds-color-link-surface-visited-hover: #250e29;
|
|
148
149
|
--dds-color-link-surface-visited-press: #37153d;
|
|
149
150
|
--dds-border-radius-100: 4px;
|
|
150
|
-
--dds-border-radius-150: 6px;
|
|
151
151
|
--dds-border-radius-200: 8px;
|
|
152
|
-
--dds-border-radius-250: 10px;
|
|
153
|
-
--dds-border-radius-300: 12px;
|
|
154
|
-
--dds-border-radius-400: 16px;
|
|
155
152
|
--dds-border-radius-050: 2px;
|
|
156
153
|
--dds-border-width-100: 4px;
|
|
157
154
|
--dds-border-width-025: 1px;
|
|
@@ -160,23 +157,29 @@
|
|
|
160
157
|
--dds-space-200: 8px;
|
|
161
158
|
--dds-space-300: 12px;
|
|
162
159
|
--dds-space-400: 16px;
|
|
160
|
+
--dds-space-600: 24px;
|
|
163
161
|
--dds-space-800: 32px;
|
|
164
162
|
--dds-space-050: 2px;
|
|
165
163
|
--dds-font-regular-normal-300: 400 12px/1.5 Roboto;
|
|
166
164
|
--dds-font-regular-normal-350: 400 14px/1.5 Roboto;
|
|
167
165
|
--dds-font-regular-normal-400: 400 16px/1.5 Roboto;
|
|
166
|
+
--dds-font-regular-normal-500: 400 20px/1.5 Roboto;
|
|
168
167
|
--dds-font-regular-tight-300: 400 12px/1.3 Roboto;
|
|
169
168
|
--dds-font-regular-tight-350: 400 14px/1.3 Roboto;
|
|
170
169
|
--dds-font-regular-tight-400: 400 16px/1.3 Roboto;
|
|
170
|
+
--dds-font-regular-tight-500: 400 20px/1.3 Roboto;
|
|
171
171
|
--dds-font-regular-bold-normal-300: 700 12px/1.5 Roboto;
|
|
172
172
|
--dds-font-regular-bold-normal-350: 700 14px/1.5 Roboto;
|
|
173
173
|
--dds-font-regular-bold-normal-400: 700 16px/1.5 Roboto;
|
|
174
|
+
--dds-font-regular-bold-normal-500: 700 20px/1.5 Roboto;
|
|
174
175
|
--dds-font-regular-bold-tight-300: 700 12px/1.3 Roboto;
|
|
175
176
|
--dds-font-regular-bold-tight-350: 700 14px/1.3 Roboto;
|
|
176
177
|
--dds-font-regular-bold-tight-400: 700 16px/1.3 Roboto;
|
|
178
|
+
--dds-font-regular-bold-tight-500: 700 20px/1.3 Roboto;
|
|
177
179
|
--dds-font-size-300: 12px;
|
|
178
180
|
--dds-font-size-350: 14px;
|
|
179
181
|
--dds-font-size-400: 16px;
|
|
182
|
+
--dds-font-size-500: 20px;
|
|
180
183
|
--dds-font-line-height-tight: 1.3;
|
|
181
184
|
--dds-font-line-height-normal: 1.5;
|
|
182
185
|
--dds-font-weight-bold: 700;
|
|
@@ -114,6 +114,7 @@
|
|
|
114
114
|
--dds-color-common-surface-danger-hover: #fdd9db;
|
|
115
115
|
--dds-color-common-surface-danger-press: #fbb3b7;
|
|
116
116
|
--dds-color-common-surface-default: #ffffff;
|
|
117
|
+
--dds-color-common-surface-inverse: #616161;
|
|
117
118
|
--dds-color-common-surface-hover: #f2f2f2;
|
|
118
119
|
--dds-color-common-surface-press: #ebebeb;
|
|
119
120
|
--dds-color-common-surface-selected-default: #ddf3fc;
|
|
@@ -147,11 +148,7 @@
|
|
|
147
148
|
--dds-color-link-surface-visited-hover: #f0ddf3;
|
|
148
149
|
--dds-color-link-surface-visited-press: #e1bbe8;
|
|
149
150
|
--dds-border-radius-100: 4px;
|
|
150
|
-
--dds-border-radius-150: 6px;
|
|
151
151
|
--dds-border-radius-200: 8px;
|
|
152
|
-
--dds-border-radius-250: 10px;
|
|
153
|
-
--dds-border-radius-300: 12px;
|
|
154
|
-
--dds-border-radius-400: 16px;
|
|
155
152
|
--dds-border-radius-050: 2px;
|
|
156
153
|
--dds-border-width-100: 4px;
|
|
157
154
|
--dds-border-width-025: 1px;
|
|
@@ -160,23 +157,29 @@
|
|
|
160
157
|
--dds-space-200: 8px;
|
|
161
158
|
--dds-space-300: 12px;
|
|
162
159
|
--dds-space-400: 16px;
|
|
160
|
+
--dds-space-600: 24px;
|
|
163
161
|
--dds-space-800: 32px;
|
|
164
162
|
--dds-space-050: 2px;
|
|
165
163
|
--dds-font-regular-normal-300: 400 12px/1.5 Roboto;
|
|
166
164
|
--dds-font-regular-normal-350: 400 14px/1.5 Roboto;
|
|
167
165
|
--dds-font-regular-normal-400: 400 16px/1.5 Roboto;
|
|
166
|
+
--dds-font-regular-normal-500: 400 20px/1.5 Roboto;
|
|
168
167
|
--dds-font-regular-tight-300: 400 12px/1.3 Roboto;
|
|
169
168
|
--dds-font-regular-tight-350: 400 14px/1.3 Roboto;
|
|
170
169
|
--dds-font-regular-tight-400: 400 16px/1.3 Roboto;
|
|
170
|
+
--dds-font-regular-tight-500: 400 20px/1.3 Roboto;
|
|
171
171
|
--dds-font-regular-bold-normal-300: 700 12px/1.5 Roboto;
|
|
172
172
|
--dds-font-regular-bold-normal-350: 700 14px/1.5 Roboto;
|
|
173
173
|
--dds-font-regular-bold-normal-400: 700 16px/1.5 Roboto;
|
|
174
|
+
--dds-font-regular-bold-normal-500: 700 20px/1.5 Roboto;
|
|
174
175
|
--dds-font-regular-bold-tight-300: 700 12px/1.3 Roboto;
|
|
175
176
|
--dds-font-regular-bold-tight-350: 700 14px/1.3 Roboto;
|
|
176
177
|
--dds-font-regular-bold-tight-400: 700 16px/1.3 Roboto;
|
|
178
|
+
--dds-font-regular-bold-tight-500: 700 20px/1.3 Roboto;
|
|
177
179
|
--dds-font-size-300: 12px;
|
|
178
180
|
--dds-font-size-350: 14px;
|
|
179
181
|
--dds-font-size-400: 16px;
|
|
182
|
+
--dds-font-size-500: 20px;
|
|
180
183
|
--dds-font-line-height-tight: 1.3;
|
|
181
184
|
--dds-font-line-height-normal: 1.5;
|
|
182
185
|
--dds-font-weight-bold: 700;
|
|
@@ -105,11 +105,7 @@ module.exports = {
|
|
|
105
105
|
colorPurple110: "#37153d",
|
|
106
106
|
colorPurple120: "#250e29",
|
|
107
107
|
borderRadius100: "4px",
|
|
108
|
-
borderRadius150: "6px",
|
|
109
108
|
borderRadius200: "8px",
|
|
110
|
-
borderRadius250: "10px",
|
|
111
|
-
borderRadius300: "12px",
|
|
112
|
-
borderRadius400: "16px",
|
|
113
109
|
borderRadius050: "2px",
|
|
114
110
|
borderWidth100: "4px",
|
|
115
111
|
borderWidth025: "1px",
|
|
@@ -118,23 +114,29 @@ module.exports = {
|
|
|
118
114
|
space200: "8px",
|
|
119
115
|
space300: "12px",
|
|
120
116
|
space400: "16px",
|
|
117
|
+
space600: "24px",
|
|
121
118
|
space800: "32px",
|
|
122
119
|
space050: "2px",
|
|
123
120
|
fontRegularNormal300: "400 12px/1.5 Roboto",
|
|
124
121
|
fontRegularNormal350: "400 14px/1.5 Roboto",
|
|
125
122
|
fontRegularNormal400: "400 16px/1.5 Roboto",
|
|
123
|
+
fontRegularNormal500: "400 20px/1.5 Roboto",
|
|
126
124
|
fontRegularTight300: "400 12px/1.3 Roboto",
|
|
127
125
|
fontRegularTight350: "400 14px/1.3 Roboto",
|
|
128
126
|
fontRegularTight400: "400 16px/1.3 Roboto",
|
|
127
|
+
fontRegularTight500: "400 20px/1.3 Roboto",
|
|
129
128
|
fontRegularBoldNormal300: "700 12px/1.5 Roboto",
|
|
130
129
|
fontRegularBoldNormal350: "700 14px/1.5 Roboto",
|
|
131
130
|
fontRegularBoldNormal400: "700 16px/1.5 Roboto",
|
|
131
|
+
fontRegularBoldNormal500: "700 20px/1.5 Roboto",
|
|
132
132
|
fontRegularBoldTight300: "700 12px/1.3 Roboto",
|
|
133
133
|
fontRegularBoldTight350: "700 14px/1.3 Roboto",
|
|
134
134
|
fontRegularBoldTight400: "700 16px/1.3 Roboto",
|
|
135
|
+
fontRegularBoldTight500: "700 20px/1.3 Roboto",
|
|
135
136
|
fontSize300: "12px",
|
|
136
137
|
fontSize350: "14px",
|
|
137
138
|
fontSize400: "16px",
|
|
139
|
+
fontSize500: "20px",
|
|
138
140
|
fontLineHeightTight: 1.3,
|
|
139
141
|
fontLineHeightNormal: 1.5,
|
|
140
142
|
fontWeightBold: 700,
|
|
@@ -104,11 +104,7 @@ export const colorPurple100: string;
|
|
|
104
104
|
export const colorPurple110: string;
|
|
105
105
|
export const colorPurple120: string;
|
|
106
106
|
export const borderRadius100: string;
|
|
107
|
-
export const borderRadius150: string;
|
|
108
107
|
export const borderRadius200: string;
|
|
109
|
-
export const borderRadius250: string;
|
|
110
|
-
export const borderRadius300: string;
|
|
111
|
-
export const borderRadius400: string;
|
|
112
108
|
export const borderRadius050: string;
|
|
113
109
|
export const borderWidth100: string;
|
|
114
110
|
export const borderWidth025: string;
|
|
@@ -117,23 +113,29 @@ export const space100: string;
|
|
|
117
113
|
export const space200: string;
|
|
118
114
|
export const space300: string;
|
|
119
115
|
export const space400: string;
|
|
116
|
+
export const space600: string;
|
|
120
117
|
export const space800: string;
|
|
121
118
|
export const space050: string;
|
|
122
119
|
export const fontRegularNormal300: string;
|
|
123
120
|
export const fontRegularNormal350: string;
|
|
124
121
|
export const fontRegularNormal400: string;
|
|
122
|
+
export const fontRegularNormal500: string;
|
|
125
123
|
export const fontRegularTight300: string;
|
|
126
124
|
export const fontRegularTight350: string;
|
|
127
125
|
export const fontRegularTight400: string;
|
|
126
|
+
export const fontRegularTight500: string;
|
|
128
127
|
export const fontRegularBoldNormal300: string;
|
|
129
128
|
export const fontRegularBoldNormal350: string;
|
|
130
129
|
export const fontRegularBoldNormal400: string;
|
|
130
|
+
export const fontRegularBoldNormal500: string;
|
|
131
131
|
export const fontRegularBoldTight300: string;
|
|
132
132
|
export const fontRegularBoldTight350: string;
|
|
133
133
|
export const fontRegularBoldTight400: string;
|
|
134
|
+
export const fontRegularBoldTight500: string;
|
|
134
135
|
export const fontSize300: string;
|
|
135
136
|
export const fontSize350: string;
|
|
136
137
|
export const fontSize400: string;
|
|
138
|
+
export const fontSize500: string;
|
|
137
139
|
export const fontLineHeightTight: number;
|
|
138
140
|
export const fontLineHeightNormal: number;
|
|
139
141
|
export const fontWeightBold: number;
|
|
@@ -104,11 +104,7 @@ export const colorPurple100: string;
|
|
|
104
104
|
export const colorPurple110: string;
|
|
105
105
|
export const colorPurple120: string;
|
|
106
106
|
export const borderRadius100: string;
|
|
107
|
-
export const borderRadius150: string;
|
|
108
107
|
export const borderRadius200: string;
|
|
109
|
-
export const borderRadius250: string;
|
|
110
|
-
export const borderRadius300: string;
|
|
111
|
-
export const borderRadius400: string;
|
|
112
108
|
export const borderRadius050: string;
|
|
113
109
|
export const borderWidth100: string;
|
|
114
110
|
export const borderWidth025: string;
|
|
@@ -117,23 +113,29 @@ export const space100: string;
|
|
|
117
113
|
export const space200: string;
|
|
118
114
|
export const space300: string;
|
|
119
115
|
export const space400: string;
|
|
116
|
+
export const space600: string;
|
|
120
117
|
export const space800: string;
|
|
121
118
|
export const space050: string;
|
|
122
119
|
export const fontRegularNormal300: string;
|
|
123
120
|
export const fontRegularNormal350: string;
|
|
124
121
|
export const fontRegularNormal400: string;
|
|
122
|
+
export const fontRegularNormal500: string;
|
|
125
123
|
export const fontRegularTight300: string;
|
|
126
124
|
export const fontRegularTight350: string;
|
|
127
125
|
export const fontRegularTight400: string;
|
|
126
|
+
export const fontRegularTight500: string;
|
|
128
127
|
export const fontRegularBoldNormal300: string;
|
|
129
128
|
export const fontRegularBoldNormal350: string;
|
|
130
129
|
export const fontRegularBoldNormal400: string;
|
|
130
|
+
export const fontRegularBoldNormal500: string;
|
|
131
131
|
export const fontRegularBoldTight300: string;
|
|
132
132
|
export const fontRegularBoldTight350: string;
|
|
133
133
|
export const fontRegularBoldTight400: string;
|
|
134
|
+
export const fontRegularBoldTight500: string;
|
|
134
135
|
export const fontSize300: string;
|
|
135
136
|
export const fontSize350: string;
|
|
136
137
|
export const fontSize400: string;
|
|
138
|
+
export const fontSize500: string;
|
|
137
139
|
export const fontLineHeightTight: number;
|
|
138
140
|
export const fontLineHeightNormal: number;
|
|
139
141
|
export const fontWeightBold: number;
|
|
@@ -104,11 +104,7 @@ export const colorPurple100 = "#4a1c51";
|
|
|
104
104
|
export const colorPurple110 = "#37153d";
|
|
105
105
|
export const colorPurple120 = "#250e29";
|
|
106
106
|
export const borderRadius100 = "4px";
|
|
107
|
-
export const borderRadius150 = "6px";
|
|
108
107
|
export const borderRadius200 = "8px";
|
|
109
|
-
export const borderRadius250 = "10px";
|
|
110
|
-
export const borderRadius300 = "12px";
|
|
111
|
-
export const borderRadius400 = "16px";
|
|
112
108
|
export const borderRadius050 = "2px";
|
|
113
109
|
export const borderWidth100 = "4px";
|
|
114
110
|
export const borderWidth025 = "1px";
|
|
@@ -117,23 +113,29 @@ export const space100 = "4px";
|
|
|
117
113
|
export const space200 = "8px";
|
|
118
114
|
export const space300 = "12px";
|
|
119
115
|
export const space400 = "16px";
|
|
116
|
+
export const space600 = "24px";
|
|
120
117
|
export const space800 = "32px";
|
|
121
118
|
export const space050 = "2px";
|
|
122
119
|
export const fontRegularNormal300 = "400 12px/1.5 Roboto";
|
|
123
120
|
export const fontRegularNormal350 = "400 14px/1.5 Roboto";
|
|
124
121
|
export const fontRegularNormal400 = "400 16px/1.5 Roboto";
|
|
122
|
+
export const fontRegularNormal500 = "400 20px/1.5 Roboto";
|
|
125
123
|
export const fontRegularTight300 = "400 12px/1.3 Roboto";
|
|
126
124
|
export const fontRegularTight350 = "400 14px/1.3 Roboto";
|
|
127
125
|
export const fontRegularTight400 = "400 16px/1.3 Roboto";
|
|
126
|
+
export const fontRegularTight500 = "400 20px/1.3 Roboto";
|
|
128
127
|
export const fontRegularBoldNormal300 = "700 12px/1.5 Roboto";
|
|
129
128
|
export const fontRegularBoldNormal350 = "700 14px/1.5 Roboto";
|
|
130
129
|
export const fontRegularBoldNormal400 = "700 16px/1.5 Roboto";
|
|
130
|
+
export const fontRegularBoldNormal500 = "700 20px/1.5 Roboto";
|
|
131
131
|
export const fontRegularBoldTight300 = "700 12px/1.3 Roboto";
|
|
132
132
|
export const fontRegularBoldTight350 = "700 14px/1.3 Roboto";
|
|
133
133
|
export const fontRegularBoldTight400 = "700 16px/1.3 Roboto";
|
|
134
|
+
export const fontRegularBoldTight500 = "700 20px/1.3 Roboto";
|
|
134
135
|
export const fontSize300 = "12px";
|
|
135
136
|
export const fontSize350 = "14px";
|
|
136
137
|
export const fontSize400 = "16px";
|
|
138
|
+
export const fontSize500 = "20px";
|
|
137
139
|
export const fontLineHeightTight = 1.3;
|
|
138
140
|
export const fontLineHeightNormal = 1.5;
|
|
139
141
|
export const fontWeightBold = 700;
|
|
@@ -105,11 +105,7 @@ module.exports = {
|
|
|
105
105
|
colorPurple110: "#37153d",
|
|
106
106
|
colorPurple120: "#250e29",
|
|
107
107
|
borderRadius100: "4px",
|
|
108
|
-
borderRadius150: "6px",
|
|
109
108
|
borderRadius200: "8px",
|
|
110
|
-
borderRadius250: "10px",
|
|
111
|
-
borderRadius300: "12px",
|
|
112
|
-
borderRadius400: "16px",
|
|
113
109
|
borderRadius050: "2px",
|
|
114
110
|
borderWidth100: "4px",
|
|
115
111
|
borderWidth025: "1px",
|
|
@@ -118,23 +114,29 @@ module.exports = {
|
|
|
118
114
|
space200: "8px",
|
|
119
115
|
space300: "12px",
|
|
120
116
|
space400: "16px",
|
|
117
|
+
space600: "24px",
|
|
121
118
|
space800: "32px",
|
|
122
119
|
space050: "2px",
|
|
123
120
|
fontRegularNormal300: "400 12px/1.5 Roboto",
|
|
124
121
|
fontRegularNormal350: "400 14px/1.5 Roboto",
|
|
125
122
|
fontRegularNormal400: "400 16px/1.5 Roboto",
|
|
123
|
+
fontRegularNormal500: "400 20px/1.5 Roboto",
|
|
126
124
|
fontRegularTight300: "400 12px/1.3 Roboto",
|
|
127
125
|
fontRegularTight350: "400 14px/1.3 Roboto",
|
|
128
126
|
fontRegularTight400: "400 16px/1.3 Roboto",
|
|
127
|
+
fontRegularTight500: "400 20px/1.3 Roboto",
|
|
129
128
|
fontRegularBoldNormal300: "700 12px/1.5 Roboto",
|
|
130
129
|
fontRegularBoldNormal350: "700 14px/1.5 Roboto",
|
|
131
130
|
fontRegularBoldNormal400: "700 16px/1.5 Roboto",
|
|
131
|
+
fontRegularBoldNormal500: "700 20px/1.5 Roboto",
|
|
132
132
|
fontRegularBoldTight300: "700 12px/1.3 Roboto",
|
|
133
133
|
fontRegularBoldTight350: "700 14px/1.3 Roboto",
|
|
134
134
|
fontRegularBoldTight400: "700 16px/1.3 Roboto",
|
|
135
|
+
fontRegularBoldTight500: "700 20px/1.3 Roboto",
|
|
135
136
|
fontSize300: "12px",
|
|
136
137
|
fontSize350: "14px",
|
|
137
138
|
fontSize400: "16px",
|
|
139
|
+
fontSize500: "20px",
|
|
138
140
|
fontLineHeightTight: 1.3,
|
|
139
141
|
fontLineHeightNormal: 1.5,
|
|
140
142
|
fontWeightBold: 700,
|
|
@@ -104,11 +104,7 @@ export const colorPurple100: string;
|
|
|
104
104
|
export const colorPurple110: string;
|
|
105
105
|
export const colorPurple120: string;
|
|
106
106
|
export const borderRadius100: string;
|
|
107
|
-
export const borderRadius150: string;
|
|
108
107
|
export const borderRadius200: string;
|
|
109
|
-
export const borderRadius250: string;
|
|
110
|
-
export const borderRadius300: string;
|
|
111
|
-
export const borderRadius400: string;
|
|
112
108
|
export const borderRadius050: string;
|
|
113
109
|
export const borderWidth100: string;
|
|
114
110
|
export const borderWidth025: string;
|
|
@@ -117,23 +113,29 @@ export const space100: string;
|
|
|
117
113
|
export const space200: string;
|
|
118
114
|
export const space300: string;
|
|
119
115
|
export const space400: string;
|
|
116
|
+
export const space600: string;
|
|
120
117
|
export const space800: string;
|
|
121
118
|
export const space050: string;
|
|
122
119
|
export const fontRegularNormal300: string;
|
|
123
120
|
export const fontRegularNormal350: string;
|
|
124
121
|
export const fontRegularNormal400: string;
|
|
122
|
+
export const fontRegularNormal500: string;
|
|
125
123
|
export const fontRegularTight300: string;
|
|
126
124
|
export const fontRegularTight350: string;
|
|
127
125
|
export const fontRegularTight400: string;
|
|
126
|
+
export const fontRegularTight500: string;
|
|
128
127
|
export const fontRegularBoldNormal300: string;
|
|
129
128
|
export const fontRegularBoldNormal350: string;
|
|
130
129
|
export const fontRegularBoldNormal400: string;
|
|
130
|
+
export const fontRegularBoldNormal500: string;
|
|
131
131
|
export const fontRegularBoldTight300: string;
|
|
132
132
|
export const fontRegularBoldTight350: string;
|
|
133
133
|
export const fontRegularBoldTight400: string;
|
|
134
|
+
export const fontRegularBoldTight500: string;
|
|
134
135
|
export const fontSize300: string;
|
|
135
136
|
export const fontSize350: string;
|
|
136
137
|
export const fontSize400: string;
|
|
138
|
+
export const fontSize500: string;
|
|
137
139
|
export const fontLineHeightTight: number;
|
|
138
140
|
export const fontLineHeightNormal: number;
|
|
139
141
|
export const fontWeightBold: number;
|
|
@@ -104,11 +104,7 @@ export const colorPurple100: string;
|
|
|
104
104
|
export const colorPurple110: string;
|
|
105
105
|
export const colorPurple120: string;
|
|
106
106
|
export const borderRadius100: string;
|
|
107
|
-
export const borderRadius150: string;
|
|
108
107
|
export const borderRadius200: string;
|
|
109
|
-
export const borderRadius250: string;
|
|
110
|
-
export const borderRadius300: string;
|
|
111
|
-
export const borderRadius400: string;
|
|
112
108
|
export const borderRadius050: string;
|
|
113
109
|
export const borderWidth100: string;
|
|
114
110
|
export const borderWidth025: string;
|
|
@@ -117,23 +113,29 @@ export const space100: string;
|
|
|
117
113
|
export const space200: string;
|
|
118
114
|
export const space300: string;
|
|
119
115
|
export const space400: string;
|
|
116
|
+
export const space600: string;
|
|
120
117
|
export const space800: string;
|
|
121
118
|
export const space050: string;
|
|
122
119
|
export const fontRegularNormal300: string;
|
|
123
120
|
export const fontRegularNormal350: string;
|
|
124
121
|
export const fontRegularNormal400: string;
|
|
122
|
+
export const fontRegularNormal500: string;
|
|
125
123
|
export const fontRegularTight300: string;
|
|
126
124
|
export const fontRegularTight350: string;
|
|
127
125
|
export const fontRegularTight400: string;
|
|
126
|
+
export const fontRegularTight500: string;
|
|
128
127
|
export const fontRegularBoldNormal300: string;
|
|
129
128
|
export const fontRegularBoldNormal350: string;
|
|
130
129
|
export const fontRegularBoldNormal400: string;
|
|
130
|
+
export const fontRegularBoldNormal500: string;
|
|
131
131
|
export const fontRegularBoldTight300: string;
|
|
132
132
|
export const fontRegularBoldTight350: string;
|
|
133
133
|
export const fontRegularBoldTight400: string;
|
|
134
|
+
export const fontRegularBoldTight500: string;
|
|
134
135
|
export const fontSize300: string;
|
|
135
136
|
export const fontSize350: string;
|
|
136
137
|
export const fontSize400: string;
|
|
138
|
+
export const fontSize500: string;
|
|
137
139
|
export const fontLineHeightTight: number;
|
|
138
140
|
export const fontLineHeightNormal: number;
|
|
139
141
|
export const fontWeightBold: number;
|
|
@@ -104,11 +104,7 @@ export const colorPurple100 = "#4a1c51";
|
|
|
104
104
|
export const colorPurple110 = "#37153d";
|
|
105
105
|
export const colorPurple120 = "#250e29";
|
|
106
106
|
export const borderRadius100 = "4px";
|
|
107
|
-
export const borderRadius150 = "6px";
|
|
108
107
|
export const borderRadius200 = "8px";
|
|
109
|
-
export const borderRadius250 = "10px";
|
|
110
|
-
export const borderRadius300 = "12px";
|
|
111
|
-
export const borderRadius400 = "16px";
|
|
112
108
|
export const borderRadius050 = "2px";
|
|
113
109
|
export const borderWidth100 = "4px";
|
|
114
110
|
export const borderWidth025 = "1px";
|
|
@@ -117,23 +113,29 @@ export const space100 = "4px";
|
|
|
117
113
|
export const space200 = "8px";
|
|
118
114
|
export const space300 = "12px";
|
|
119
115
|
export const space400 = "16px";
|
|
116
|
+
export const space600 = "24px";
|
|
120
117
|
export const space800 = "32px";
|
|
121
118
|
export const space050 = "2px";
|
|
122
119
|
export const fontRegularNormal300 = "400 12px/1.5 Roboto";
|
|
123
120
|
export const fontRegularNormal350 = "400 14px/1.5 Roboto";
|
|
124
121
|
export const fontRegularNormal400 = "400 16px/1.5 Roboto";
|
|
122
|
+
export const fontRegularNormal500 = "400 20px/1.5 Roboto";
|
|
125
123
|
export const fontRegularTight300 = "400 12px/1.3 Roboto";
|
|
126
124
|
export const fontRegularTight350 = "400 14px/1.3 Roboto";
|
|
127
125
|
export const fontRegularTight400 = "400 16px/1.3 Roboto";
|
|
126
|
+
export const fontRegularTight500 = "400 20px/1.3 Roboto";
|
|
128
127
|
export const fontRegularBoldNormal300 = "700 12px/1.5 Roboto";
|
|
129
128
|
export const fontRegularBoldNormal350 = "700 14px/1.5 Roboto";
|
|
130
129
|
export const fontRegularBoldNormal400 = "700 16px/1.5 Roboto";
|
|
130
|
+
export const fontRegularBoldNormal500 = "700 20px/1.5 Roboto";
|
|
131
131
|
export const fontRegularBoldTight300 = "700 12px/1.3 Roboto";
|
|
132
132
|
export const fontRegularBoldTight350 = "700 14px/1.3 Roboto";
|
|
133
133
|
export const fontRegularBoldTight400 = "700 16px/1.3 Roboto";
|
|
134
|
+
export const fontRegularBoldTight500 = "700 20px/1.3 Roboto";
|
|
134
135
|
export const fontSize300 = "12px";
|
|
135
136
|
export const fontSize350 = "14px";
|
|
136
137
|
export const fontSize400 = "16px";
|
|
138
|
+
export const fontSize500 = "20px";
|
|
137
139
|
export const fontLineHeightTight = 1.3;
|
|
138
140
|
export const fontLineHeightNormal = 1.5;
|
|
139
141
|
export const fontWeightBold = 700;
|
|
@@ -114,6 +114,7 @@ module.exports = {
|
|
|
114
114
|
colorCommonSurfaceDangerHover: "#3e0307",
|
|
115
115
|
colorCommonSurfaceDangerPress: "#5d050a",
|
|
116
116
|
colorCommonSurfaceDefault: "#212121",
|
|
117
|
+
colorCommonSurfaceInverse: "#ffffff",
|
|
117
118
|
colorCommonSurfaceHover: "#282828",
|
|
118
119
|
colorCommonSurfacePress: "#313131",
|
|
119
120
|
colorCommonSurfaceSelectedDefault: "#002b40",
|
|
@@ -147,11 +148,7 @@ module.exports = {
|
|
|
147
148
|
colorLinkSurfaceVisitedHover: "#250e29",
|
|
148
149
|
colorLinkSurfaceVisitedPress: "#37153d",
|
|
149
150
|
borderRadius100: "4px",
|
|
150
|
-
borderRadius150: "6px",
|
|
151
151
|
borderRadius200: "8px",
|
|
152
|
-
borderRadius250: "10px",
|
|
153
|
-
borderRadius300: "12px",
|
|
154
|
-
borderRadius400: "16px",
|
|
155
152
|
borderRadius050: "2px",
|
|
156
153
|
borderWidth100: "4px",
|
|
157
154
|
borderWidth025: "1px",
|
|
@@ -160,23 +157,29 @@ module.exports = {
|
|
|
160
157
|
space200: "8px",
|
|
161
158
|
space300: "12px",
|
|
162
159
|
space400: "16px",
|
|
160
|
+
space600: "24px",
|
|
163
161
|
space800: "32px",
|
|
164
162
|
space050: "2px",
|
|
165
163
|
fontRegularNormal300: "400 12px/1.5 Roboto",
|
|
166
164
|
fontRegularNormal350: "400 14px/1.5 Roboto",
|
|
167
165
|
fontRegularNormal400: "400 16px/1.5 Roboto",
|
|
166
|
+
fontRegularNormal500: "400 20px/1.5 Roboto",
|
|
168
167
|
fontRegularTight300: "400 12px/1.3 Roboto",
|
|
169
168
|
fontRegularTight350: "400 14px/1.3 Roboto",
|
|
170
169
|
fontRegularTight400: "400 16px/1.3 Roboto",
|
|
170
|
+
fontRegularTight500: "400 20px/1.3 Roboto",
|
|
171
171
|
fontRegularBoldNormal300: "700 12px/1.5 Roboto",
|
|
172
172
|
fontRegularBoldNormal350: "700 14px/1.5 Roboto",
|
|
173
173
|
fontRegularBoldNormal400: "700 16px/1.5 Roboto",
|
|
174
|
+
fontRegularBoldNormal500: "700 20px/1.5 Roboto",
|
|
174
175
|
fontRegularBoldTight300: "700 12px/1.3 Roboto",
|
|
175
176
|
fontRegularBoldTight350: "700 14px/1.3 Roboto",
|
|
176
177
|
fontRegularBoldTight400: "700 16px/1.3 Roboto",
|
|
178
|
+
fontRegularBoldTight500: "700 20px/1.3 Roboto",
|
|
177
179
|
fontSize300: "12px",
|
|
178
180
|
fontSize350: "14px",
|
|
179
181
|
fontSize400: "16px",
|
|
182
|
+
fontSize500: "20px",
|
|
180
183
|
fontLineHeightTight: 1.3,
|
|
181
184
|
fontLineHeightNormal: 1.5,
|
|
182
185
|
fontWeightBold: 700,
|
|
@@ -113,6 +113,7 @@ export const colorCommonSurfaceNeutralPress: string;
|
|
|
113
113
|
export const colorCommonSurfaceDangerHover: string;
|
|
114
114
|
export const colorCommonSurfaceDangerPress: string;
|
|
115
115
|
export const colorCommonSurfaceDefault: string;
|
|
116
|
+
export const colorCommonSurfaceInverse: string;
|
|
116
117
|
export const colorCommonSurfaceHover: string;
|
|
117
118
|
export const colorCommonSurfacePress: string;
|
|
118
119
|
export const colorCommonSurfaceSelectedDefault: string;
|
|
@@ -146,11 +147,7 @@ export const colorLinkTextVisitedPress: string;
|
|
|
146
147
|
export const colorLinkSurfaceVisitedHover: string;
|
|
147
148
|
export const colorLinkSurfaceVisitedPress: string;
|
|
148
149
|
export const borderRadius100: string;
|
|
149
|
-
export const borderRadius150: string;
|
|
150
150
|
export const borderRadius200: string;
|
|
151
|
-
export const borderRadius250: string;
|
|
152
|
-
export const borderRadius300: string;
|
|
153
|
-
export const borderRadius400: string;
|
|
154
151
|
export const borderRadius050: string;
|
|
155
152
|
export const borderWidth100: string;
|
|
156
153
|
export const borderWidth025: string;
|
|
@@ -159,23 +156,29 @@ export const space100: string;
|
|
|
159
156
|
export const space200: string;
|
|
160
157
|
export const space300: string;
|
|
161
158
|
export const space400: string;
|
|
159
|
+
export const space600: string;
|
|
162
160
|
export const space800: string;
|
|
163
161
|
export const space050: string;
|
|
164
162
|
export const fontRegularNormal300: string;
|
|
165
163
|
export const fontRegularNormal350: string;
|
|
166
164
|
export const fontRegularNormal400: string;
|
|
165
|
+
export const fontRegularNormal500: string;
|
|
167
166
|
export const fontRegularTight300: string;
|
|
168
167
|
export const fontRegularTight350: string;
|
|
169
168
|
export const fontRegularTight400: string;
|
|
169
|
+
export const fontRegularTight500: string;
|
|
170
170
|
export const fontRegularBoldNormal300: string;
|
|
171
171
|
export const fontRegularBoldNormal350: string;
|
|
172
172
|
export const fontRegularBoldNormal400: string;
|
|
173
|
+
export const fontRegularBoldNormal500: string;
|
|
173
174
|
export const fontRegularBoldTight300: string;
|
|
174
175
|
export const fontRegularBoldTight350: string;
|
|
175
176
|
export const fontRegularBoldTight400: string;
|
|
177
|
+
export const fontRegularBoldTight500: string;
|
|
176
178
|
export const fontSize300: string;
|
|
177
179
|
export const fontSize350: string;
|
|
178
180
|
export const fontSize400: string;
|
|
181
|
+
export const fontSize500: string;
|
|
179
182
|
export const fontLineHeightTight: number;
|
|
180
183
|
export const fontLineHeightNormal: number;
|
|
181
184
|
export const fontWeightBold: number;
|