tycho-components 0.0.5-SNAPSHOT → 0.0.5-SNAPSHOT-2
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/dist/AppModal/style.scss +2 -3
- package/package.json +5 -4
- package/dist/new-styles/base/_borders.scss +0 -30
- package/dist/new-styles/base/_colors.scss +0 -100
- package/dist/new-styles/base/_displays.scss +0 -207
- package/dist/new-styles/base/_margins.css +0 -174
- package/dist/new-styles/base/_spacing.scss +0 -26
- package/dist/new-styles/base/_tokens.scss +0 -329
- package/dist/new-styles/base/_typographs.scss +0 -348
- package/dist/new-styles/main.scss +0 -27
package/dist/AppModal/style.scss
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@use '
|
|
1
|
+
@use 'tycho-storybook/dist/styles/main' as *;
|
|
2
2
|
|
|
3
3
|
.modal-container {
|
|
4
4
|
.header {
|
|
@@ -19,8 +19,7 @@
|
|
|
19
19
|
color: var(--text-secondary);
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
|
-
|
|
23
|
-
.ds-icon {
|
|
22
|
+
i .ds-icon {
|
|
24
23
|
margin-left: auto;
|
|
25
24
|
margin-bottom: auto;
|
|
26
25
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tycho-components",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.5-SNAPSHOT",
|
|
4
|
+
"version": "0.0.5-SNAPSHOT-2",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"exports": {
|
|
@@ -9,7 +9,8 @@
|
|
|
9
9
|
"import": "./dist/index.js",
|
|
10
10
|
"require": "./dist/index.js",
|
|
11
11
|
"types": "./dist/index.d.ts"
|
|
12
|
-
}
|
|
12
|
+
},
|
|
13
|
+
"./dist/styles/main": "./dist/styles/main.scss"
|
|
13
14
|
},
|
|
14
15
|
"files": [
|
|
15
16
|
"dist/"
|
|
@@ -28,8 +29,7 @@
|
|
|
28
29
|
"react-easy-edit": "^2.0.0",
|
|
29
30
|
"react-loading": "^2.0.3",
|
|
30
31
|
"react-switch": "^7.1.0",
|
|
31
|
-
"react-toastify": "^9.1.3"
|
|
32
|
-
"tycho-storybook": "0.1.2-SNAPSHOT-3"
|
|
32
|
+
"react-toastify": "^9.1.3"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"@emotion/react": "^11.13.3",
|
|
@@ -45,6 +45,7 @@
|
|
|
45
45
|
"react-dom": ">=17 <19",
|
|
46
46
|
"react-hook-form": "^7.45.2",
|
|
47
47
|
"react-i18next": "^13.0.2",
|
|
48
|
+
"tycho-storybook": "0.1.2-SNAPSHOT-9",
|
|
48
49
|
"yup": "^1.2.0"
|
|
49
50
|
},
|
|
50
51
|
"devDependencies": {
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
// borders, dividers and border radius
|
|
2
|
-
|
|
3
|
-
:root {
|
|
4
|
-
--border-0: 0px;
|
|
5
|
-
--border-050: 0.5px;
|
|
6
|
-
--border-100: 1px;
|
|
7
|
-
--border-150: 1.5px;
|
|
8
|
-
--border-200: 2px;
|
|
9
|
-
--border-250: 2.5px;
|
|
10
|
-
--border-300: 3px;
|
|
11
|
-
--border-400: 4px;
|
|
12
|
-
--border-500: 5px;
|
|
13
|
-
--border-600: 6px;
|
|
14
|
-
--border-700: 7px;
|
|
15
|
-
--border-800: 8px;
|
|
16
|
-
|
|
17
|
-
--radius-0: 0px;
|
|
18
|
-
--radius-050: 2px;
|
|
19
|
-
--radius-100: 4px;
|
|
20
|
-
--radius-200: 8px;
|
|
21
|
-
--radius-300: 12px;
|
|
22
|
-
--radius-400: 16px;
|
|
23
|
-
--radius-500: 20px;
|
|
24
|
-
--radius-600: 24px;
|
|
25
|
-
--radius-700: 28px;
|
|
26
|
-
--radius-800: 32px;
|
|
27
|
-
--radius-900: 36px;
|
|
28
|
-
--radius-1000: 40px;
|
|
29
|
-
--radius-full: 999px;
|
|
30
|
-
}
|
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
// colors, tonal scales for accent, neutral and semantic
|
|
2
|
-
|
|
3
|
-
:root {
|
|
4
|
-
--accent-0: #000000;
|
|
5
|
-
--accent-10: #142e57;
|
|
6
|
-
--accent-100: #ffffff;
|
|
7
|
-
--accent-20: #194c8f;
|
|
8
|
-
--accent-30: #185abd;
|
|
9
|
-
--accent-40: #146ce1;
|
|
10
|
-
--accent-50: #1c83f4;
|
|
11
|
-
--accent-60: #32a2ff;
|
|
12
|
-
--accent-70: #59bfff;
|
|
13
|
-
--accent-80: #8ed8ff;
|
|
14
|
-
--accent-90: #bce6ff;
|
|
15
|
-
--accent-95: #d9f0ff;
|
|
16
|
-
--accent-99: #eef9ff;
|
|
17
|
-
--high-contrast-blue: #6bfdff;
|
|
18
|
-
--high-contrast-dark: #000000;
|
|
19
|
-
--high-contrast-green: #7bff57;
|
|
20
|
-
--high-contrast-light: #ffffff;
|
|
21
|
-
--high-contrast-yellow: #fff81f;
|
|
22
|
-
--neutral-dark-0: #ffffff;
|
|
23
|
-
--neutral-dark-10: #f6f7f9;
|
|
24
|
-
--neutral-dark-100: #000000;
|
|
25
|
-
--neutral-dark-20: #ebeef3;
|
|
26
|
-
--neutral-dark-30: #d3d9e4;
|
|
27
|
-
--neutral-dark-40: #acb9cd;
|
|
28
|
-
--neutral-dark-50: #7f94b1;
|
|
29
|
-
--neutral-dark-60: #5f7698;
|
|
30
|
-
--neutral-dark-70: #4b5f7e;
|
|
31
|
-
--neutral-dark-80: #42526e;
|
|
32
|
-
--neutral-dark-90: #364256;
|
|
33
|
-
--neutral-dark-95: #30394a;
|
|
34
|
-
--neutral-dark-99: #202531;
|
|
35
|
-
--neutral-light-0: #000000;
|
|
36
|
-
--neutral-light-10: #141415;
|
|
37
|
-
--neutral-light-100: #ffffff;
|
|
38
|
-
--neutral-light-20: #252627;
|
|
39
|
-
--neutral-light-30: #434447;
|
|
40
|
-
--neutral-light-40: #5c5e61;
|
|
41
|
-
--neutral-light-50: #707276;
|
|
42
|
-
--neutral-light-60: #9d9fa2;
|
|
43
|
-
--neutral-light-70: #bebfc1;
|
|
44
|
-
--neutral-light-80: #cbcccd;
|
|
45
|
-
--neutral-light-90: #eaeaeb;
|
|
46
|
-
--neutral-light-95: #f7f7f8;
|
|
47
|
-
--neutral-light-99: #f9fafb;
|
|
48
|
-
--semantic-danger-0: #000000;
|
|
49
|
-
--semantic-danger-10: #44060c;
|
|
50
|
-
--semantic-danger-100: #ffffff;
|
|
51
|
-
--semantic-danger-20: #7e1015;
|
|
52
|
-
--semantic-danger-30: #9d0f16;
|
|
53
|
-
--semantic-danger-40: #c6080a;
|
|
54
|
-
--semantic-danger-50: #ef1207;
|
|
55
|
-
--semantic-danger-60: #fe3820;
|
|
56
|
-
--semantic-danger-70: #ff5638;
|
|
57
|
-
--semantic-danger-80: #ff8f71;
|
|
58
|
-
--semantic-danger-90: #ffbda8;
|
|
59
|
-
--semantic-danger-95: #ffe0d4;
|
|
60
|
-
--semantic-danger-99: #fff2ed;
|
|
61
|
-
--semantic-info-0: #000000;
|
|
62
|
-
--semantic-info-10: #440055;
|
|
63
|
-
--semantic-info-100: #ffffff;
|
|
64
|
-
--semantic-info-20: #68127d;
|
|
65
|
-
--semantic-info-30: #7c0e9a;
|
|
66
|
-
--semantic-info-40: #950fbc;
|
|
67
|
-
--semantic-info-50: #b720e9;
|
|
68
|
-
--semantic-info-60: #c837fe;
|
|
69
|
-
--semantic-info-70: #dc6dff;
|
|
70
|
-
--semantic-info-80: #e8a4ff;
|
|
71
|
-
--semantic-info-90: #f1ccff;
|
|
72
|
-
--semantic-info-95: #f8e6ff;
|
|
73
|
-
--semantic-info-99: #f8e6ff;
|
|
74
|
-
--semantic-success-0: #000000;
|
|
75
|
-
--semantic-success-10: #182c07;
|
|
76
|
-
--semantic-success-100: #ffffff;
|
|
77
|
-
--semantic-success-20: #335017;
|
|
78
|
-
--semantic-success-30: #3b5e16;
|
|
79
|
-
--semantic-success-40: #477714;
|
|
80
|
-
--semantic-success-50: #5c9c14;
|
|
81
|
-
--semantic-success-60: #70b51c;
|
|
82
|
-
--semantic-success-70: #98de3d;
|
|
83
|
-
--semantic-success-80: #b5ec6a;
|
|
84
|
-
--semantic-success-90: #d3f5a1;
|
|
85
|
-
--semantic-success-95: #e9facd;
|
|
86
|
-
--semantic-success-99: #f6fde8;
|
|
87
|
-
--semantic-warning-0: #000000;
|
|
88
|
-
--semantic-warning-10: #461702;
|
|
89
|
-
--semantic-warning-100: #ffffff;
|
|
90
|
-
--semantic-warning-20: #7a310d;
|
|
91
|
-
--semantic-warning-30: #943a0c;
|
|
92
|
-
--semantic-warning-40: #b74c06;
|
|
93
|
-
--semantic-warning-50: #dd6f02;
|
|
94
|
-
--semantic-warning-60: #f99607;
|
|
95
|
-
--semantic-warning-70: #ffb920;
|
|
96
|
-
--semantic-warning-80: #ffc938;
|
|
97
|
-
--semantic-warning-90: #ffe388;
|
|
98
|
-
--semantic-warning-95: #fff2c6;
|
|
99
|
-
--semantic-warning-99: #fffaeb;
|
|
100
|
-
}
|
|
@@ -1,207 +0,0 @@
|
|
|
1
|
-
/* Display none */
|
|
2
|
-
.d-none {
|
|
3
|
-
display: none !important;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
/* Display block */
|
|
7
|
-
.d-block {
|
|
8
|
-
display: block !important;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
/* Display inline */
|
|
12
|
-
.d-inline {
|
|
13
|
-
display: inline !important;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
/* Display inline-block */
|
|
17
|
-
.d-inline-block {
|
|
18
|
-
display: inline-block !important;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
/* Display flex */
|
|
22
|
-
.d-flex {
|
|
23
|
-
display: flex !important;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
/* Display inline-flex */
|
|
27
|
-
.d-inline-flex {
|
|
28
|
-
display: inline-flex !important;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
/* Display grid */
|
|
32
|
-
.d-grid {
|
|
33
|
-
display: grid !important;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
/* Display inline-grid */
|
|
37
|
-
.d-inline-grid {
|
|
38
|
-
display: inline-grid !important;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
/* Responsive display classes */
|
|
42
|
-
|
|
43
|
-
/* Extra small (xs) */
|
|
44
|
-
.d-xs-none {
|
|
45
|
-
display: none !important;
|
|
46
|
-
}
|
|
47
|
-
.d-xs-block {
|
|
48
|
-
display: block !important;
|
|
49
|
-
}
|
|
50
|
-
.d-xs-inline {
|
|
51
|
-
display: inline !important;
|
|
52
|
-
}
|
|
53
|
-
.d-xs-inline-block {
|
|
54
|
-
display: inline-block !important;
|
|
55
|
-
}
|
|
56
|
-
.d-xs-flex {
|
|
57
|
-
display: flex !important;
|
|
58
|
-
}
|
|
59
|
-
.d-xs-inline-flex {
|
|
60
|
-
display: inline-flex !important;
|
|
61
|
-
}
|
|
62
|
-
.d-xs-grid {
|
|
63
|
-
display: grid !important;
|
|
64
|
-
}
|
|
65
|
-
.d-xs-inline-grid {
|
|
66
|
-
display: inline-grid !important;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
/* Small (sm) */
|
|
70
|
-
@media (min-width: 576px) {
|
|
71
|
-
.d-sm-none {
|
|
72
|
-
display: none !important;
|
|
73
|
-
}
|
|
74
|
-
.d-sm-block {
|
|
75
|
-
display: block !important;
|
|
76
|
-
}
|
|
77
|
-
.d-sm-inline {
|
|
78
|
-
display: inline !important;
|
|
79
|
-
}
|
|
80
|
-
.d-sm-inline-block {
|
|
81
|
-
display: inline-block !important;
|
|
82
|
-
}
|
|
83
|
-
.d-sm-flex {
|
|
84
|
-
display: flex !important;
|
|
85
|
-
}
|
|
86
|
-
.d-sm-inline-flex {
|
|
87
|
-
display: inline-flex !important;
|
|
88
|
-
}
|
|
89
|
-
.d-sm-grid {
|
|
90
|
-
display: grid !important;
|
|
91
|
-
}
|
|
92
|
-
.d-sm-inline-grid {
|
|
93
|
-
display: inline-grid !important;
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
/* Medium (md) */
|
|
98
|
-
@media (min-width: 768px) {
|
|
99
|
-
.d-md-none {
|
|
100
|
-
display: none !important;
|
|
101
|
-
}
|
|
102
|
-
.d-md-block {
|
|
103
|
-
display: block !important;
|
|
104
|
-
}
|
|
105
|
-
.d-md-inline {
|
|
106
|
-
display: inline !important;
|
|
107
|
-
}
|
|
108
|
-
.d-md-inline-block {
|
|
109
|
-
display: inline-block !important;
|
|
110
|
-
}
|
|
111
|
-
.d-md-flex {
|
|
112
|
-
display: flex !important;
|
|
113
|
-
}
|
|
114
|
-
.d-md-inline-flex {
|
|
115
|
-
display: inline-flex !important;
|
|
116
|
-
}
|
|
117
|
-
.d-md-grid {
|
|
118
|
-
display: grid !important;
|
|
119
|
-
}
|
|
120
|
-
.d-md-inline-grid {
|
|
121
|
-
display: inline-grid !important;
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
/* Large (lg) */
|
|
126
|
-
@media (min-width: 992px) {
|
|
127
|
-
.d-lg-none {
|
|
128
|
-
display: none !important;
|
|
129
|
-
}
|
|
130
|
-
.d-lg-block {
|
|
131
|
-
display: block !important;
|
|
132
|
-
}
|
|
133
|
-
.d-lg-inline {
|
|
134
|
-
display: inline !important;
|
|
135
|
-
}
|
|
136
|
-
.d-lg-inline-block {
|
|
137
|
-
display: inline-block !important;
|
|
138
|
-
}
|
|
139
|
-
.d-lg-flex {
|
|
140
|
-
display: flex !important;
|
|
141
|
-
}
|
|
142
|
-
.d-lg-inline-flex {
|
|
143
|
-
display: inline-flex !important;
|
|
144
|
-
}
|
|
145
|
-
.d-lg-grid {
|
|
146
|
-
display: grid !important;
|
|
147
|
-
}
|
|
148
|
-
.d-lg-inline-grid {
|
|
149
|
-
display: inline-grid !important;
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
/* Extra Large (xl) */
|
|
154
|
-
@media (min-width: 1200px) {
|
|
155
|
-
.d-xl-none {
|
|
156
|
-
display: none !important;
|
|
157
|
-
}
|
|
158
|
-
.d-xl-block {
|
|
159
|
-
display: block !important;
|
|
160
|
-
}
|
|
161
|
-
.d-xl-inline {
|
|
162
|
-
display: inline !important;
|
|
163
|
-
}
|
|
164
|
-
.d-xl-inline-block {
|
|
165
|
-
display: inline-block !important;
|
|
166
|
-
}
|
|
167
|
-
.d-xl-flex {
|
|
168
|
-
display: flex !important;
|
|
169
|
-
}
|
|
170
|
-
.d-xl-inline-flex {
|
|
171
|
-
display: inline-flex !important;
|
|
172
|
-
}
|
|
173
|
-
.d-xl-grid {
|
|
174
|
-
display: grid !important;
|
|
175
|
-
}
|
|
176
|
-
.d-xl-inline-grid {
|
|
177
|
-
display: inline-grid !important;
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
/* Extra Extra Large (xxl) */
|
|
182
|
-
@media (min-width: 1400px) {
|
|
183
|
-
.d-xxl-none {
|
|
184
|
-
display: none !important;
|
|
185
|
-
}
|
|
186
|
-
.d-xxl-block {
|
|
187
|
-
display: block !important;
|
|
188
|
-
}
|
|
189
|
-
.d-xxl-inline {
|
|
190
|
-
display: inline !important;
|
|
191
|
-
}
|
|
192
|
-
.d-xxl-inline-block {
|
|
193
|
-
display: inline-block !important;
|
|
194
|
-
}
|
|
195
|
-
.d-xxl-flex {
|
|
196
|
-
display: flex !important;
|
|
197
|
-
}
|
|
198
|
-
.d-xxl-inline-flex {
|
|
199
|
-
display: inline-flex !important;
|
|
200
|
-
}
|
|
201
|
-
.d-xxl-grid {
|
|
202
|
-
display: grid !important;
|
|
203
|
-
}
|
|
204
|
-
.d-xxl-inline-grid {
|
|
205
|
-
display: inline-grid !important;
|
|
206
|
-
}
|
|
207
|
-
}
|
|
@@ -1,174 +0,0 @@
|
|
|
1
|
-
/* Margin for all sides */
|
|
2
|
-
.m-0 {
|
|
3
|
-
margin: 0 !important;
|
|
4
|
-
}
|
|
5
|
-
.m-1 {
|
|
6
|
-
margin: 0.25rem !important;
|
|
7
|
-
}
|
|
8
|
-
.m-2 {
|
|
9
|
-
margin: 0.5rem !important;
|
|
10
|
-
}
|
|
11
|
-
.m-3 {
|
|
12
|
-
margin: 1rem !important;
|
|
13
|
-
}
|
|
14
|
-
.m-4 {
|
|
15
|
-
margin: 1.5rem !important;
|
|
16
|
-
}
|
|
17
|
-
.m-5 {
|
|
18
|
-
margin: 3rem !important;
|
|
19
|
-
}
|
|
20
|
-
.m-auto {
|
|
21
|
-
margin: auto !important;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
/* Margin-top */
|
|
25
|
-
.mt-0 {
|
|
26
|
-
margin-top: 0 !important;
|
|
27
|
-
}
|
|
28
|
-
.mt-1 {
|
|
29
|
-
margin-top: 0.25rem !important;
|
|
30
|
-
}
|
|
31
|
-
.mt-2 {
|
|
32
|
-
margin-top: 0.5rem !important;
|
|
33
|
-
}
|
|
34
|
-
.mt-3 {
|
|
35
|
-
margin-top: 1rem !important;
|
|
36
|
-
}
|
|
37
|
-
.mt-4 {
|
|
38
|
-
margin-top: 1.5rem !important;
|
|
39
|
-
}
|
|
40
|
-
.mt-5 {
|
|
41
|
-
margin-top: 3rem !important;
|
|
42
|
-
}
|
|
43
|
-
.mt-auto {
|
|
44
|
-
margin-top: auto !important;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
/* Margin-right */
|
|
48
|
-
.me-0 {
|
|
49
|
-
margin-right: 0 !important;
|
|
50
|
-
}
|
|
51
|
-
.me-1 {
|
|
52
|
-
margin-right: 0.25rem !important;
|
|
53
|
-
}
|
|
54
|
-
.me-2 {
|
|
55
|
-
margin-right: 0.5rem !important;
|
|
56
|
-
}
|
|
57
|
-
.me-3 {
|
|
58
|
-
margin-right: 1rem !important;
|
|
59
|
-
}
|
|
60
|
-
.me-4 {
|
|
61
|
-
margin-right: 1.5rem !important;
|
|
62
|
-
}
|
|
63
|
-
.me-5 {
|
|
64
|
-
margin-right: 3rem !important;
|
|
65
|
-
}
|
|
66
|
-
.me-auto {
|
|
67
|
-
margin-right: auto !important;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
/* Margin-bottom */
|
|
71
|
-
.mb-0 {
|
|
72
|
-
margin-bottom: 0 !important;
|
|
73
|
-
}
|
|
74
|
-
.mb-1 {
|
|
75
|
-
margin-bottom: 0.25rem !important;
|
|
76
|
-
}
|
|
77
|
-
.mb-2 {
|
|
78
|
-
margin-bottom: 0.5rem !important;
|
|
79
|
-
}
|
|
80
|
-
.mb-3 {
|
|
81
|
-
margin-bottom: 1rem !important;
|
|
82
|
-
}
|
|
83
|
-
.mb-4 {
|
|
84
|
-
margin-bottom: 1.5rem !important;
|
|
85
|
-
}
|
|
86
|
-
.mb-5 {
|
|
87
|
-
margin-bottom: 3rem !important;
|
|
88
|
-
}
|
|
89
|
-
.mb-auto {
|
|
90
|
-
margin-bottom: auto !important;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
/* Margin-left */
|
|
94
|
-
.ms-0 {
|
|
95
|
-
margin-left: 0 !important;
|
|
96
|
-
}
|
|
97
|
-
.ms-1 {
|
|
98
|
-
margin-left: 0.25rem !important;
|
|
99
|
-
}
|
|
100
|
-
.ms-2 {
|
|
101
|
-
margin-left: 0.5rem !important;
|
|
102
|
-
}
|
|
103
|
-
.ms-3 {
|
|
104
|
-
margin-left: 1rem !important;
|
|
105
|
-
}
|
|
106
|
-
.ms-4 {
|
|
107
|
-
margin-left: 1.5rem !important;
|
|
108
|
-
}
|
|
109
|
-
.ms-5 {
|
|
110
|
-
margin-left: 3rem !important;
|
|
111
|
-
}
|
|
112
|
-
.ms-auto {
|
|
113
|
-
margin-left: auto !important;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
/* Horizontal (left + right) margin */
|
|
117
|
-
.mx-0 {
|
|
118
|
-
margin-left: 0 !important;
|
|
119
|
-
margin-right: 0 !important;
|
|
120
|
-
}
|
|
121
|
-
.mx-1 {
|
|
122
|
-
margin-left: 0.25rem !important;
|
|
123
|
-
margin-right: 0.25rem !important;
|
|
124
|
-
}
|
|
125
|
-
.mx-2 {
|
|
126
|
-
margin-left: 0.5rem !important;
|
|
127
|
-
margin-right: 0.5rem !important;
|
|
128
|
-
}
|
|
129
|
-
.mx-3 {
|
|
130
|
-
margin-left: 1rem !important;
|
|
131
|
-
margin-right: 1rem !important;
|
|
132
|
-
}
|
|
133
|
-
.mx-4 {
|
|
134
|
-
margin-left: 1.5rem !important;
|
|
135
|
-
margin-right: 1.5rem !important;
|
|
136
|
-
}
|
|
137
|
-
.mx-5 {
|
|
138
|
-
margin-left: 3rem !important;
|
|
139
|
-
margin-right: 3rem !important;
|
|
140
|
-
}
|
|
141
|
-
.mx-auto {
|
|
142
|
-
margin-left: auto !important;
|
|
143
|
-
margin-right: auto !important;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
/* Vertical (top + bottom) margin */
|
|
147
|
-
.my-0 {
|
|
148
|
-
margin-top: 0 !important;
|
|
149
|
-
margin-bottom: 0 !important;
|
|
150
|
-
}
|
|
151
|
-
.my-1 {
|
|
152
|
-
margin-top: 0.25rem !important;
|
|
153
|
-
margin-bottom: 0.25rem !important;
|
|
154
|
-
}
|
|
155
|
-
.my-2 {
|
|
156
|
-
margin-top: 0.5rem !important;
|
|
157
|
-
margin-bottom: 0.5rem !important;
|
|
158
|
-
}
|
|
159
|
-
.my-3 {
|
|
160
|
-
margin-top: 1rem !important;
|
|
161
|
-
margin-bottom: 1rem !important;
|
|
162
|
-
}
|
|
163
|
-
.my-4 {
|
|
164
|
-
margin-top: 1.5rem !important;
|
|
165
|
-
margin-bottom: 1.5rem !important;
|
|
166
|
-
}
|
|
167
|
-
.my-5 {
|
|
168
|
-
margin-top: 3rem !important;
|
|
169
|
-
margin-bottom: 3rem !important;
|
|
170
|
-
}
|
|
171
|
-
.my-auto {
|
|
172
|
-
margin-top: auto !important;
|
|
173
|
-
margin-bottom: auto !important;
|
|
174
|
-
}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
// spaces
|
|
2
|
-
|
|
3
|
-
:root {
|
|
4
|
-
--spacing-0: 0px;
|
|
5
|
-
--spacing-050: 4px;
|
|
6
|
-
--spacing-075: 6px;
|
|
7
|
-
--spacing-100: 8px;
|
|
8
|
-
--spacing-125: 10px;
|
|
9
|
-
--spacing-150: 12px;
|
|
10
|
-
--spacing-200: 16px;
|
|
11
|
-
--spacing-250: 20px;
|
|
12
|
-
--spacing-300: 24px;
|
|
13
|
-
--spacing-350: 28px;
|
|
14
|
-
--spacing-400: 32px;
|
|
15
|
-
--spacing-500: 40px;
|
|
16
|
-
--spacing-600: 48px;
|
|
17
|
-
--spacing-700: 56px;
|
|
18
|
-
--spacing-800: 64px;
|
|
19
|
-
--spacing-900: 72px;
|
|
20
|
-
--spacing-1000: 80px;
|
|
21
|
-
--spacing-1100: 88px;
|
|
22
|
-
--spacing-1200: 96px;
|
|
23
|
-
--spacing-1300: 104px;
|
|
24
|
-
--spacing-1400: 112px;
|
|
25
|
-
--spacing-1500: 120px;
|
|
26
|
-
}
|
|
@@ -1,329 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--background-accent: var(--accent-30);
|
|
3
|
-
--background-default: var(--neutral-light-100);
|
|
4
|
-
--background-inverse: var(--neutral-dark-99);
|
|
5
|
-
--border-accent-1: var(--neutral-light-50);
|
|
6
|
-
--border-accent-2: var(--neutral-light-40);
|
|
7
|
-
--border-accent-3: var(--accent-20);
|
|
8
|
-
--border-button: var(--accent-30);
|
|
9
|
-
--border-button-white: var(--accent-100);
|
|
10
|
-
--border-error: var(--semantic-danger-50);
|
|
11
|
-
--border-error-hover: var(--semantic-danger-30);
|
|
12
|
-
--border-hover: var(--accent-50);
|
|
13
|
-
--border-only-high-contrast: #ffffff00;
|
|
14
|
-
--border-subtle-1: var(--neutral-light-90);
|
|
15
|
-
--border-subtle-2: var(--neutral-light-80);
|
|
16
|
-
--border-subtle-3: var(--neutral-light-80);
|
|
17
|
-
--border-subtle-4: var(--neutral-light-100);
|
|
18
|
-
--button-contrast: #00000000;
|
|
19
|
-
--button-danger-active: var(--semantic-danger-70);
|
|
20
|
-
--button-danger-default: var(--semantic-danger-50);
|
|
21
|
-
--button-danger-hover: var(--semantic-danger-60);
|
|
22
|
-
--button-primary-active: var(--accent-50);
|
|
23
|
-
--button-primary-default: var(--accent-30);
|
|
24
|
-
--button-primary-hover: var(--accent-40);
|
|
25
|
-
--button-secondary-active: var(--neutral-dark-40);
|
|
26
|
-
--button-secondary-default: var(--neutral-dark-20);
|
|
27
|
-
--button-secondary-hover: var(--neutral-dark-30);
|
|
28
|
-
--button-tertiary-active: var(--accent-90);
|
|
29
|
-
--button-tertiary-default: var(--accent-100);
|
|
30
|
-
--button-tertiary-hover: var(--accent-95);
|
|
31
|
-
--icon-accent: var(--accent-30);
|
|
32
|
-
--icon-accent-hover: var(--accent-50);
|
|
33
|
-
--icon-dark-fixed: var(--neutral-light-0);
|
|
34
|
-
--icon-disabled: var(--neutral-light-70);
|
|
35
|
-
--icon-error: var(--semantic-danger-40);
|
|
36
|
-
--icon-error-hover: var(--semantic-danger-30);
|
|
37
|
-
--icon-error-on-hover: var(--semantic-danger-30);
|
|
38
|
-
--icon-info: var(--semantic-info-50);
|
|
39
|
-
--icon-light-fixed: var(--neutral-light-100);
|
|
40
|
-
--icon-on-color-accent: var(--accent-30);
|
|
41
|
-
--icon-on-color-dark: var(--neutral-light-0);
|
|
42
|
-
--icon-on-color-light: var(--neutral-light-100);
|
|
43
|
-
--icon-on-disabled: var(--neutral-light-60);
|
|
44
|
-
--icon-placeholder: var(--neutral-light-50);
|
|
45
|
-
--icon-primary: var(--neutral-light-0);
|
|
46
|
-
--icon-secondary: var(--neutral-light-30);
|
|
47
|
-
--icon-success: var(--semantic-success-60);
|
|
48
|
-
--icon-tertiary: var(--neutral-light-40);
|
|
49
|
-
--icon-warning: var(--semantic-warning-50);
|
|
50
|
-
--layer-disabled: var(--neutral-dark-10);
|
|
51
|
-
--layer-field: var(--neutral-dark-20);
|
|
52
|
-
--layer-field-active: var(--accent-99);
|
|
53
|
-
--layer-field-hover: var(--accent-95);
|
|
54
|
-
--layer-hover-1: var(--neutral-light-95);
|
|
55
|
-
--layer-hover-2: var(--neutral-light-90);
|
|
56
|
-
--layer-hover-3: var(--neutral-light-80);
|
|
57
|
-
--layer-layer-1: var(--neutral-light-99);
|
|
58
|
-
--layer-layer-2: var(--neutral-light-95);
|
|
59
|
-
--layer-layer-3: var(--neutral-light-90);
|
|
60
|
-
--layer-semantic-danger: var(--semantic-danger-95);
|
|
61
|
-
--layer-semantic-info: var(--semantic-info-95);
|
|
62
|
-
--layer-semantic-success: var(--semantic-success-95);
|
|
63
|
-
--layer-semantic-warning: var(--semantic-warning-95);
|
|
64
|
-
--layer-tooltip: var(--neutral-dark-99);
|
|
65
|
-
--link-default: var(--semantic-info-40);
|
|
66
|
-
--link-hover: var(--semantic-info-60);
|
|
67
|
-
--link-visited: var(--neutral-dark-60);
|
|
68
|
-
--miscellaneous-brand-gradient-1: #0a5dff00;
|
|
69
|
-
--miscellaneous-brand-gradient-2: #0a5dff14;
|
|
70
|
-
--miscellaneous-scrim: #00000080;
|
|
71
|
-
--miscellaneous-scroll: #00000040;
|
|
72
|
-
--miscellaneous-scroll-hover: var(--neutral-dark-40);
|
|
73
|
-
--miscellaneous-shadow-1: #18274b1f;
|
|
74
|
-
--miscellaneous-shadow-2: #18274b14;
|
|
75
|
-
--miscellaneous-skeleton: var(--neutral-dark-10);
|
|
76
|
-
--miscellaneous-skeleton-light: var(--neutral-dark-30);
|
|
77
|
-
--tag-blue-accent: var(--accent-60);
|
|
78
|
-
--tag-blue-low: var(--accent-90);
|
|
79
|
-
--tag-gray-accent: var(--neutral-light-20);
|
|
80
|
-
--tag-gray-low: var(--neutral-light-90);
|
|
81
|
-
--tag-green-accent: var(--semantic-success-70);
|
|
82
|
-
--tag-green-low: var(--semantic-success-90);
|
|
83
|
-
--tag-red-accent: var(--semantic-danger-50);
|
|
84
|
-
--tag-red-low: var(--semantic-danger-90);
|
|
85
|
-
--tag-violet-accent: var(--semantic-info-50);
|
|
86
|
-
--tag-violet-low: var(--semantic-info-90);
|
|
87
|
-
--tag-yellow-accent: var(--semantic-warning-80);
|
|
88
|
-
--tag-yellow-low: var(--semantic-warning-95);
|
|
89
|
-
--text-accent: var(--accent-30);
|
|
90
|
-
--text-accent-hover: var(--accent-50);
|
|
91
|
-
--text-dark-fixed: var(--neutral-light-0);
|
|
92
|
-
--text-disabled: var(--neutral-light-70);
|
|
93
|
-
--text-error: var(--semantic-danger-40);
|
|
94
|
-
--text-error-hover: var(--semantic-danger-30);
|
|
95
|
-
--text-error-on-hover: var(--semantic-danger-30);
|
|
96
|
-
--text-info: var(--semantic-info-50);
|
|
97
|
-
--text-light-fixed: var(--neutral-light-100);
|
|
98
|
-
--text-on-color-accent: var(--accent-30);
|
|
99
|
-
--text-on-color-dark: var(--neutral-light-0);
|
|
100
|
-
--text-on-color-light: var(--neutral-light-100);
|
|
101
|
-
--text-on-disabled: var(--neutral-light-60);
|
|
102
|
-
--text-placeholder: var(--neutral-light-50);
|
|
103
|
-
--text-placeholder-hover: var(--neutral-light-40);
|
|
104
|
-
--text-primary: var(--neutral-light-0);
|
|
105
|
-
--text-secondary: var(--neutral-light-30);
|
|
106
|
-
--text-success: var(--semantic-success-60);
|
|
107
|
-
--text-tertiary: var(--neutral-light-40);
|
|
108
|
-
--text-warning: var(--semantic-warning-50);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
body.dark-mode {
|
|
112
|
-
--background-accent: var(--accent-10);
|
|
113
|
-
--background-default: var(--neutral-dark-99);
|
|
114
|
-
--background-inverse: var(--neutral-light-100);
|
|
115
|
-
--border-accent-1: var(--neutral-dark-40);
|
|
116
|
-
--border-accent-2: var(--neutral-dark-30);
|
|
117
|
-
--border-accent-3: var(--accent-95);
|
|
118
|
-
--border-button: var(--accent-60);
|
|
119
|
-
--border-button-white: var(--accent-100);
|
|
120
|
-
--border-error: var(--semantic-danger-70);
|
|
121
|
-
--border-error-hover: var(--semantic-danger-80);
|
|
122
|
-
--border-hover: var(--accent-80);
|
|
123
|
-
--border-only-high-contrast: #ffffff00;
|
|
124
|
-
--border-subtle-1: var(--neutral-dark-80);
|
|
125
|
-
--border-subtle-2: var(--neutral-dark-70);
|
|
126
|
-
--border-subtle-3: var(--neutral-dark-70);
|
|
127
|
-
--border-subtle-4: var(--neutral-dark-100);
|
|
128
|
-
--button-contrast: #00000000;
|
|
129
|
-
--button-danger-active: var(--semantic-danger-80);
|
|
130
|
-
--button-danger-default: var(--semantic-danger-60);
|
|
131
|
-
--button-danger-hover: var(--semantic-danger-70);
|
|
132
|
-
--button-primary-active: var(--accent-80);
|
|
133
|
-
--button-primary-default: var(--accent-60);
|
|
134
|
-
--button-primary-hover: var(--accent-70);
|
|
135
|
-
--button-secondary-active: var(--neutral-light-20);
|
|
136
|
-
--button-secondary-default: var(--neutral-light-0);
|
|
137
|
-
--button-secondary-hover: var(--neutral-light-10);
|
|
138
|
-
--button-tertiary-active: var(--accent-40);
|
|
139
|
-
--button-tertiary-default: var(--accent-10);
|
|
140
|
-
--button-tertiary-hover: var(--accent-20);
|
|
141
|
-
--icon-accent: var(--accent-80);
|
|
142
|
-
--icon-accent-hover: var(--accent-60);
|
|
143
|
-
--icon-dark-fixed: var(--neutral-dark-100);
|
|
144
|
-
--icon-disabled: var(--neutral-dark-70);
|
|
145
|
-
--icon-error: var(--semantic-danger-70);
|
|
146
|
-
--icon-error-hover: var(--semantic-danger-80);
|
|
147
|
-
--icon-error-on-hover: var(--semantic-danger-80);
|
|
148
|
-
--icon-info: var(--semantic-info-80);
|
|
149
|
-
--icon-light-fixed: var(--neutral-dark-0);
|
|
150
|
-
--icon-on-color-accent: var(--accent-95);
|
|
151
|
-
--icon-on-color-dark: var(--neutral-dark-0);
|
|
152
|
-
--icon-on-color-light: var(--neutral-dark-100);
|
|
153
|
-
--icon-on-disabled: var(--neutral-dark-60);
|
|
154
|
-
--icon-placeholder: var(--neutral-dark-50);
|
|
155
|
-
--icon-primary: var(--neutral-dark-0);
|
|
156
|
-
--icon-secondary: var(--neutral-dark-30);
|
|
157
|
-
--icon-success: var(--semantic-success-80);
|
|
158
|
-
--icon-tertiary: var(--neutral-dark-40);
|
|
159
|
-
--icon-warning: var(--semantic-warning-70);
|
|
160
|
-
--layer-disabled: var(--neutral-dark-95);
|
|
161
|
-
--layer-field: var(--neutral-light-30);
|
|
162
|
-
--layer-field-active: var(--neutral-dark-100);
|
|
163
|
-
--layer-field-hover: var(--neutral-dark-80);
|
|
164
|
-
--layer-hover-1: var(--neutral-dark-90);
|
|
165
|
-
--layer-hover-2: var(--neutral-dark-80);
|
|
166
|
-
--layer-hover-3: var(--neutral-dark-70);
|
|
167
|
-
--layer-layer-1: var(--neutral-dark-95);
|
|
168
|
-
--layer-layer-2: var(--neutral-dark-90);
|
|
169
|
-
--layer-layer-3: var(--neutral-light-80);
|
|
170
|
-
--layer-semantic-danger: var(--semantic-danger-20);
|
|
171
|
-
--layer-semantic-info: var(--semantic-info-20);
|
|
172
|
-
--layer-semantic-success: var(--semantic-success-20);
|
|
173
|
-
--layer-semantic-warning: var(--semantic-warning-40);
|
|
174
|
-
--layer-tooltip: var(--neutral-dark-0);
|
|
175
|
-
--link-default: var(--semantic-info-80);
|
|
176
|
-
--link-hover: var(--semantic-info-50);
|
|
177
|
-
--link-visited: var(--neutral-dark-40);
|
|
178
|
-
--miscellaneous-brand-gradient-1: #0a5dff00;
|
|
179
|
-
--miscellaneous-brand-gradient-2: #0a5dff26;
|
|
180
|
-
--miscellaneous-scrim: #000000b2;
|
|
181
|
-
--miscellaneous-scroll: var(--neutral-dark-80);
|
|
182
|
-
--miscellaneous-scroll-hover: var(--neutral-dark-60);
|
|
183
|
-
--miscellaneous-shadow-1: #000000e5;
|
|
184
|
-
--miscellaneous-shadow-2: #000000b2;
|
|
185
|
-
--miscellaneous-skeleton: var(--neutral-dark-99);
|
|
186
|
-
--miscellaneous-skeleton-light: var(--neutral-dark-80);
|
|
187
|
-
--tag-blue-accent: var(--accent-60);
|
|
188
|
-
--tag-blue-low: var(--accent-40);
|
|
189
|
-
--tag-gray-accent: var(--neutral-dark-20);
|
|
190
|
-
--tag-gray-low: var(--neutral-dark-80);
|
|
191
|
-
--tag-green-accent: var(--semantic-success-80);
|
|
192
|
-
--tag-green-low: var(--semantic-success-40);
|
|
193
|
-
--tag-red-accent: var(--semantic-danger-70);
|
|
194
|
-
--tag-red-low: var(--semantic-danger-20);
|
|
195
|
-
--tag-violet-accent: var(--semantic-info-80);
|
|
196
|
-
--tag-violet-low: var(--semantic-info-20);
|
|
197
|
-
--tag-yellow-accent: var(--semantic-warning-80);
|
|
198
|
-
--tag-yellow-low: var(--semantic-warning-20);
|
|
199
|
-
--text-accent: var(--accent-80);
|
|
200
|
-
--text-accent-hover: var(--accent-60);
|
|
201
|
-
--text-dark-fixed: var(--neutral-dark-100);
|
|
202
|
-
--text-disabled: var(--neutral-dark-70);
|
|
203
|
-
--text-error: var(--semantic-danger-70);
|
|
204
|
-
--text-error-hover: var(--semantic-danger-80);
|
|
205
|
-
--text-error-on-hover: var(--semantic-danger-80);
|
|
206
|
-
--text-info: var(--semantic-info-80);
|
|
207
|
-
--text-light-fixed: var(--neutral-dark-0);
|
|
208
|
-
--text-on-color-accent: var(--accent-95);
|
|
209
|
-
--text-on-color-dark: var(--neutral-dark-0);
|
|
210
|
-
--text-on-color-light: var(--neutral-dark-100);
|
|
211
|
-
--text-on-disabled: var(--neutral-dark-60);
|
|
212
|
-
--text-placeholder: var(--neutral-dark-50);
|
|
213
|
-
--text-placeholder-hover: var(--neutral-dark-40);
|
|
214
|
-
--text-primary: var(--neutral-dark-0);
|
|
215
|
-
--text-secondary: var(--neutral-dark-30);
|
|
216
|
-
--text-success: var(--semantic-success-80);
|
|
217
|
-
--text-tertiary: var(--neutral-dark-40);
|
|
218
|
-
--text-warning: var(--semantic-warning-70);
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
body.high-contrast {
|
|
222
|
-
--background-accent: var(--high-contrast-dark);
|
|
223
|
-
--background-default: var(--high-contrast-dark);
|
|
224
|
-
--background-inverse: var(--high-contrast-dark);
|
|
225
|
-
--border-accent-1: var(--high-contrast-light);
|
|
226
|
-
--border-accent-2: var(--high-contrast-light);
|
|
227
|
-
--border-accent-3: var(--high-contrast-light);
|
|
228
|
-
--border-button: var(--high-contrast-light);
|
|
229
|
-
--border-button-white: var(--high-contrast-light);
|
|
230
|
-
--border-error: var(--high-contrast-light);
|
|
231
|
-
--border-error-hover: var(--high-contrast-yellow);
|
|
232
|
-
--border-hover: var(--high-contrast-yellow);
|
|
233
|
-
--border-only-high-contrast: var(--high-contrast-light);
|
|
234
|
-
--border-subtle-1: var(--high-contrast-light);
|
|
235
|
-
--border-subtle-2: var(--high-contrast-light);
|
|
236
|
-
--border-subtle-3: var(--high-contrast-light);
|
|
237
|
-
--border-subtle-4: var(--high-contrast-light);
|
|
238
|
-
--button-contrast: var(--high-contrast-dark);
|
|
239
|
-
--button-danger-active: var(--high-contrast-blue);
|
|
240
|
-
--button-danger-default: var(--high-contrast-light);
|
|
241
|
-
--button-danger-hover: var(--high-contrast-yellow);
|
|
242
|
-
--button-primary-active: var(--high-contrast-blue);
|
|
243
|
-
--button-primary-default: var(--high-contrast-light);
|
|
244
|
-
--button-primary-hover: var(--high-contrast-yellow);
|
|
245
|
-
--button-secondary-active: var(--high-contrast-light);
|
|
246
|
-
--button-secondary-default: var(--high-contrast-light);
|
|
247
|
-
--button-secondary-hover: var(--high-contrast-green);
|
|
248
|
-
--button-tertiary-active: var(--high-contrast-blue);
|
|
249
|
-
--button-tertiary-default: var(--high-contrast-light);
|
|
250
|
-
--button-tertiary-hover: var(--high-contrast-yellow);
|
|
251
|
-
--icon-accent: var(--high-contrast-light);
|
|
252
|
-
--icon-accent-hover: var(--high-contrast-yellow);
|
|
253
|
-
--icon-dark-fixed: var(--high-contrast-dark);
|
|
254
|
-
--icon-disabled: var(--high-contrast-light);
|
|
255
|
-
--icon-error: var(--high-contrast-light);
|
|
256
|
-
--icon-error-hover: var(--high-contrast-yellow);
|
|
257
|
-
--icon-error-on-hover: var(--high-contrast-dark);
|
|
258
|
-
--icon-info: var(--high-contrast-light);
|
|
259
|
-
--icon-light-fixed: var(--high-contrast-light);
|
|
260
|
-
--icon-on-color-accent: var(--high-contrast-dark);
|
|
261
|
-
--icon-on-color-dark: var(--high-contrast-dark);
|
|
262
|
-
--icon-on-color-light: var(--high-contrast-dark);
|
|
263
|
-
--icon-on-disabled: var(--high-contrast-dark);
|
|
264
|
-
--icon-placeholder: var(--high-contrast-dark);
|
|
265
|
-
--icon-primary: var(--high-contrast-light);
|
|
266
|
-
--icon-secondary: var(--high-contrast-yellow);
|
|
267
|
-
--icon-success: var(--high-contrast-light);
|
|
268
|
-
--icon-tertiary: var(--high-contrast-green);
|
|
269
|
-
--icon-warning: var(--high-contrast-light);
|
|
270
|
-
--layer-disabled: var(--high-contrast-light);
|
|
271
|
-
--layer-field: var(--high-contrast-light);
|
|
272
|
-
--layer-field-active: var(--high-contrast-blue);
|
|
273
|
-
--layer-field-hover: var(--high-contrast-yellow);
|
|
274
|
-
--layer-hover-1: var(--high-contrast-yellow);
|
|
275
|
-
--layer-hover-2: var(--high-contrast-yellow);
|
|
276
|
-
--layer-hover-3: var(--high-contrast-yellow);
|
|
277
|
-
--layer-layer-1: var(--high-contrast-dark);
|
|
278
|
-
--layer-layer-2: var(--high-contrast-dark);
|
|
279
|
-
--layer-layer-3: var(--high-contrast-dark);
|
|
280
|
-
--layer-semantic-danger: var(--high-contrast-dark);
|
|
281
|
-
--layer-semantic-info: var(--high-contrast-dark);
|
|
282
|
-
--layer-semantic-success: var(--high-contrast-dark);
|
|
283
|
-
--layer-semantic-warning: var(--high-contrast-dark);
|
|
284
|
-
--layer-tooltip: var(--high-contrast-light);
|
|
285
|
-
--link-default: var(--high-contrast-light);
|
|
286
|
-
--link-hover: var(--high-contrast-yellow);
|
|
287
|
-
--link-visited: var(--high-contrast-blue);
|
|
288
|
-
--miscellaneous-brand-gradient-1: var(--high-contrast-dark);
|
|
289
|
-
--miscellaneous-brand-gradient-2: var(--high-contrast-dark);
|
|
290
|
-
--miscellaneous-scrim: #000000e5;
|
|
291
|
-
--miscellaneous-scroll: var(--high-contrast-light);
|
|
292
|
-
--miscellaneous-scroll-hover: var(--high-contrast-yellow);
|
|
293
|
-
--miscellaneous-shadow-1: #00000000;
|
|
294
|
-
--miscellaneous-shadow-2: #00000000;
|
|
295
|
-
--miscellaneous-skeleton: var(--high-contrast-dark);
|
|
296
|
-
--miscellaneous-skeleton-light: var(--high-contrast-light);
|
|
297
|
-
--tag-blue-accent: var(--high-contrast-green);
|
|
298
|
-
--tag-blue-low: var(--high-contrast-light);
|
|
299
|
-
--tag-gray-accent: var(--high-contrast-green);
|
|
300
|
-
--tag-gray-low: var(--high-contrast-light);
|
|
301
|
-
--tag-green-accent: var(--high-contrast-green);
|
|
302
|
-
--tag-green-low: var(--high-contrast-light);
|
|
303
|
-
--tag-red-accent: var(--high-contrast-green);
|
|
304
|
-
--tag-red-low: var(--high-contrast-light);
|
|
305
|
-
--tag-violet-accent: var(--high-contrast-green);
|
|
306
|
-
--tag-violet-low: var(--high-contrast-light);
|
|
307
|
-
--tag-yellow-accent: var(--high-contrast-green);
|
|
308
|
-
--tag-yellow-low: var(--high-contrast-light);
|
|
309
|
-
--text-accent: var(--high-contrast-light);
|
|
310
|
-
--text-accent-hover: var(--high-contrast-yellow);
|
|
311
|
-
--text-dark-fixed: var(--high-contrast-dark);
|
|
312
|
-
--text-disabled: var(--high-contrast-light);
|
|
313
|
-
--text-error: var(--high-contrast-light);
|
|
314
|
-
--text-error-hover: var(--high-contrast-yellow);
|
|
315
|
-
--text-error-on-hover: var(--high-contrast-dark);
|
|
316
|
-
--text-info: var(--high-contrast-light);
|
|
317
|
-
--text-light-fixed: var(--high-contrast-light);
|
|
318
|
-
--text-on-color-accent: var(--high-contrast-dark);
|
|
319
|
-
--text-on-color-dark: var(--high-contrast-dark);
|
|
320
|
-
--text-on-color-light: var(--high-contrast-dark);
|
|
321
|
-
--text-on-disabled: var(--high-contrast-dark);
|
|
322
|
-
--text-placeholder: var(--high-contrast-yellow);
|
|
323
|
-
--text-placeholder-hover: var(--high-contrast-dark);
|
|
324
|
-
--text-primary: var(--high-contrast-light);
|
|
325
|
-
--text-secondary: var(--high-contrast-yellow);
|
|
326
|
-
--text-success: var(--high-contrast-light);
|
|
327
|
-
--text-tertiary: var(--high-contrast-green);
|
|
328
|
-
--text-warning: var(--high-contrast-light);
|
|
329
|
-
}
|
|
@@ -1,348 +0,0 @@
|
|
|
1
|
-
// typographs styles
|
|
2
|
-
|
|
3
|
-
@mixin button-large {
|
|
4
|
-
font-size: 20px;
|
|
5
|
-
font-weight: 600;
|
|
6
|
-
line-height: 100%;
|
|
7
|
-
letter-spacing: 0.32px;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
@mixin button-medium {
|
|
11
|
-
font-size: 16px;
|
|
12
|
-
font-weight: 600;
|
|
13
|
-
line-height: 100%;
|
|
14
|
-
letter-spacing: 0.32px;
|
|
15
|
-
text-transform: uppercase;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
@mixin button-small {
|
|
19
|
-
font-size: 14px;
|
|
20
|
-
font-weight: 700;
|
|
21
|
-
line-height: 100%;
|
|
22
|
-
letter-spacing: 0.32px;
|
|
23
|
-
text-transform: uppercase;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
@mixin label-large-1 {
|
|
27
|
-
font-size: 20px;
|
|
28
|
-
font-weight: 400;
|
|
29
|
-
line-height: 120%;
|
|
30
|
-
letter-spacing: 0px;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
@mixin label-large-2 {
|
|
34
|
-
font-size: 20px;
|
|
35
|
-
font-weight: 700;
|
|
36
|
-
line-height: 120%;
|
|
37
|
-
letter-spacing: 0px;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
@mixin label-medium-1 {
|
|
41
|
-
font-size: 16px;
|
|
42
|
-
font-weight: 400;
|
|
43
|
-
line-height: 120%;
|
|
44
|
-
letter-spacing: 0px;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
@mixin label-medium-2 {
|
|
48
|
-
font-size: 16px;
|
|
49
|
-
font-weight: 700;
|
|
50
|
-
line-height: 120%;
|
|
51
|
-
letter-spacing: 0px;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
@mixin label-small-1 {
|
|
55
|
-
font-size: 14px;
|
|
56
|
-
font-weight: 400;
|
|
57
|
-
line-height: 100%;
|
|
58
|
-
letter-spacing: 0px;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
@mixin label-small-2 {
|
|
62
|
-
font-size: 14px;
|
|
63
|
-
font-weight: 700;
|
|
64
|
-
line-height: 100%;
|
|
65
|
-
letter-spacing: 0px;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
@mixin tag-large-1 {
|
|
69
|
-
font-size: 16px;
|
|
70
|
-
font-weight: 500;
|
|
71
|
-
line-height: 100%;
|
|
72
|
-
letter-spacing: 1px;
|
|
73
|
-
text-transform: uppercase;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
@mixin tag-large-2 {
|
|
77
|
-
font-family: 'Lora';
|
|
78
|
-
font-size: 20px;
|
|
79
|
-
font-weight: 800;
|
|
80
|
-
line-height: 100%;
|
|
81
|
-
letter-spacing: 1px;
|
|
82
|
-
text-transform: uppercase;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
@mixin tag-medium-1 {
|
|
86
|
-
font-size: 14px;
|
|
87
|
-
font-weight: 500;
|
|
88
|
-
line-height: 100%;
|
|
89
|
-
letter-spacing: 1px;
|
|
90
|
-
text-transform: uppercase;
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
@mixin tag-medium-2 {
|
|
94
|
-
font-family: 'Lora';
|
|
95
|
-
font-size: 14px;
|
|
96
|
-
font-weight: 800;
|
|
97
|
-
line-height: 100%;
|
|
98
|
-
letter-spacing: 1px;
|
|
99
|
-
text-transform: uppercase;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
@mixin tag-small-1 {
|
|
103
|
-
font-size: 12px;
|
|
104
|
-
font-weight: 500;
|
|
105
|
-
line-height: 100%;
|
|
106
|
-
letter-spacing: 1px;
|
|
107
|
-
text-transform: uppercase;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
@mixin tag-small-2 {
|
|
111
|
-
font-family: 'Lora';
|
|
112
|
-
font-size: 12px;
|
|
113
|
-
font-weight: 800;
|
|
114
|
-
line-height: 100%;
|
|
115
|
-
letter-spacing: 1px;
|
|
116
|
-
text-transform: uppercase;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
@mixin helper-large-1 {
|
|
120
|
-
font-size: 14px;
|
|
121
|
-
font-weight: 400;
|
|
122
|
-
line-height: 100%;
|
|
123
|
-
letter-spacing: 0.16px;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
@mixin helper-large-2 {
|
|
127
|
-
font-size: 14px;
|
|
128
|
-
font-weight: 700;
|
|
129
|
-
line-height: 120%;
|
|
130
|
-
letter-spacing: 0.16px;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
@mixin helper-medium-1 {
|
|
134
|
-
font-size: 12px;
|
|
135
|
-
font-weight: 400;
|
|
136
|
-
line-height: 100%;
|
|
137
|
-
letter-spacing: 0.16px;
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
@mixin helper-medium-2 {
|
|
141
|
-
font-size: 12px;
|
|
142
|
-
font-weight: 700;
|
|
143
|
-
line-height: 120%;
|
|
144
|
-
letter-spacing: 0.16px;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
@mixin helper-small-1 {
|
|
148
|
-
font-size: 10px;
|
|
149
|
-
font-weight: 400;
|
|
150
|
-
line-height: 100%;
|
|
151
|
-
letter-spacing: 0.16px;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
@mixin helper-small-2 {
|
|
155
|
-
font-size: 10px;
|
|
156
|
-
font-weight: 700;
|
|
157
|
-
line-height: 120%;
|
|
158
|
-
letter-spacing: 0.16px;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
@mixin body-large-1 {
|
|
162
|
-
font-size: 20px;
|
|
163
|
-
font-weight: 400;
|
|
164
|
-
line-height: 150%;
|
|
165
|
-
letter-spacing: 0px;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
@mixin body-large-2 {
|
|
169
|
-
font-size: 20px;
|
|
170
|
-
font-weight: 700;
|
|
171
|
-
line-height: 150%;
|
|
172
|
-
letter-spacing: 0px;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
// sets as important to override MuiTooltip-tooltip
|
|
176
|
-
@mixin body-medium-1 {
|
|
177
|
-
font-size: 16px !important;
|
|
178
|
-
font-weight: 400 !important;
|
|
179
|
-
line-height: 150% !important;
|
|
180
|
-
letter-spacing: 0px !important;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
@mixin body-medium-2 {
|
|
184
|
-
font-size: 16px;
|
|
185
|
-
font-weight: 400;
|
|
186
|
-
line-height: 150%;
|
|
187
|
-
letter-spacing: 0px;
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
@mixin body-small-1 {
|
|
191
|
-
font-size: 14px;
|
|
192
|
-
font-weight: 400;
|
|
193
|
-
line-height: 150%;
|
|
194
|
-
letter-spacing: 0px;
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
@mixin body-small-2 {
|
|
198
|
-
font-size: 14px;
|
|
199
|
-
font-weight: 400;
|
|
200
|
-
line-height: 150%;
|
|
201
|
-
letter-spacing: 0px;
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
@mixin link-large {
|
|
205
|
-
font-size: 20px;
|
|
206
|
-
font-weight: 400;
|
|
207
|
-
line-height: 120%;
|
|
208
|
-
letter-spacing: 0px;
|
|
209
|
-
decoration: underline;
|
|
210
|
-
}
|
|
211
|
-
|
|
212
|
-
@mixin link-medium {
|
|
213
|
-
font-size: 16px;
|
|
214
|
-
font-weight: 400;
|
|
215
|
-
line-height: 120%;
|
|
216
|
-
letter-spacing: 0px;
|
|
217
|
-
decoration: underline;
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
@mixin link-small {
|
|
221
|
-
font-size: 14px;
|
|
222
|
-
font-weight: 700;
|
|
223
|
-
line-height: 120%;
|
|
224
|
-
letter-spacing: 0px;
|
|
225
|
-
decoration: underline;
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
@mixin heading-x-large {
|
|
229
|
-
font-family: 'Lora';
|
|
230
|
-
font-size: 64px;
|
|
231
|
-
font-weight: 500;
|
|
232
|
-
line-height: 120%;
|
|
233
|
-
letter-spacing: 0px;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
@mixin heading-large {
|
|
237
|
-
font-family: 'Lora';
|
|
238
|
-
font-size: 56px;
|
|
239
|
-
font-weight: 500;
|
|
240
|
-
line-height: 120%;
|
|
241
|
-
letter-spacing: 0px;
|
|
242
|
-
}
|
|
243
|
-
|
|
244
|
-
@mixin heading-medium {
|
|
245
|
-
font-family: 'Lora';
|
|
246
|
-
font-size: 48px;
|
|
247
|
-
font-weight: 500;
|
|
248
|
-
line-height: 120%;
|
|
249
|
-
letter-spacing: 0px;
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
@mixin heading-small {
|
|
253
|
-
font-family: 'Lora';
|
|
254
|
-
font-size: 40px;
|
|
255
|
-
font-weight: 500;
|
|
256
|
-
line-height: 120%;
|
|
257
|
-
letter-spacing: 0px;
|
|
258
|
-
}
|
|
259
|
-
|
|
260
|
-
@mixin heading-x-small {
|
|
261
|
-
font-family: 'Lora';
|
|
262
|
-
font-size: 32px;
|
|
263
|
-
font-weight: 500;
|
|
264
|
-
line-height: 120%;
|
|
265
|
-
letter-spacing: 0px;
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
@mixin subtitle-large-1 {
|
|
269
|
-
font-size: 32px;
|
|
270
|
-
font-weight: 300;
|
|
271
|
-
line-height: 120%;
|
|
272
|
-
letter-spacing: 0px;
|
|
273
|
-
}
|
|
274
|
-
|
|
275
|
-
@mixin subtitle-large-2 {
|
|
276
|
-
font-size: 32px;
|
|
277
|
-
font-weight: 600;
|
|
278
|
-
line-height: 120%;
|
|
279
|
-
letter-spacing: 0px;
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
@mixin subtitle-medium-1 {
|
|
283
|
-
font-size: 28px;
|
|
284
|
-
font-weight: 300;
|
|
285
|
-
line-height: 120%;
|
|
286
|
-
letter-spacing: 0px;
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
@mixin subtitle-medium-2 {
|
|
290
|
-
font-size: 28px;
|
|
291
|
-
font-weight: 600;
|
|
292
|
-
line-height: 120%;
|
|
293
|
-
letter-spacing: 0px;
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
@mixin subtitle-small-1 {
|
|
297
|
-
font-size: 20px;
|
|
298
|
-
font-weight: 300;
|
|
299
|
-
line-height: 120%;
|
|
300
|
-
letter-spacing: 1px;
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
@mixin subtitle-small-2 {
|
|
304
|
-
font-size: 20px;
|
|
305
|
-
font-weight: 600;
|
|
306
|
-
line-height: 120%;
|
|
307
|
-
letter-spacing: 1px;
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
@mixin display-x-large {
|
|
311
|
-
font-family: 'Lora';
|
|
312
|
-
font-size: 144px;
|
|
313
|
-
font-weight: 300;
|
|
314
|
-
line-height: 100%;
|
|
315
|
-
letter-spacing: 0px;
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
@mixin display-large {
|
|
319
|
-
font-family: 'Lora';
|
|
320
|
-
font-size: 120px;
|
|
321
|
-
font-weight: 300;
|
|
322
|
-
line-height: 100%;
|
|
323
|
-
letter-spacing: 0px;
|
|
324
|
-
}
|
|
325
|
-
|
|
326
|
-
@mixin display-medium {
|
|
327
|
-
font-family: 'Lora';
|
|
328
|
-
font-size: 112px;
|
|
329
|
-
font-weight: 300;
|
|
330
|
-
line-height: 100%;
|
|
331
|
-
letter-spacing: 0px;
|
|
332
|
-
}
|
|
333
|
-
|
|
334
|
-
@mixin display-small {
|
|
335
|
-
font-family: 'Lora';
|
|
336
|
-
font-size: 96px;
|
|
337
|
-
font-weight: 300;
|
|
338
|
-
line-height: 100%;
|
|
339
|
-
letter-spacing: 0px;
|
|
340
|
-
}
|
|
341
|
-
|
|
342
|
-
@mixin display-x-small {
|
|
343
|
-
font-family: 'Lora';
|
|
344
|
-
font-size: 80px;
|
|
345
|
-
font-weight: 300;
|
|
346
|
-
line-height: 100%;
|
|
347
|
-
letter-spacing: 0px;
|
|
348
|
-
}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
@import 'base/borders';
|
|
2
|
-
@import 'base/colors';
|
|
3
|
-
@import 'base/displays';
|
|
4
|
-
@import 'base/margins';
|
|
5
|
-
@import 'base/spacing';
|
|
6
|
-
@import 'base/tokens';
|
|
7
|
-
@import 'base/typographs';
|
|
8
|
-
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,200,0..1,0&display=swap');
|
|
9
|
-
|
|
10
|
-
.MuiTooltip-tooltip {
|
|
11
|
-
display: flex;
|
|
12
|
-
align-items: center;
|
|
13
|
-
background-color: var(--layer-tooltip) !important;
|
|
14
|
-
height: 40px;
|
|
15
|
-
max-width: 280px;
|
|
16
|
-
padding: var(--spacing-100) var(--spacing-150);
|
|
17
|
-
border-radius: var(--radius-100);
|
|
18
|
-
@include body-medium-1;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.MuiTooltip-arrow {
|
|
22
|
-
color: var(--layer-tooltip) !important;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.pointer {
|
|
26
|
-
cursor: pointer;
|
|
27
|
-
}
|