@tedi-design-system/core 2.4.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/_base.scss +1 -1
  2. package/_helpers.scss +2 -2
  3. package/_icons.scss +1 -1
  4. package/_mixins.scss +2 -37
  5. package/_print.scss +1 -1
  6. package/_typography.scss +7 -1
  7. package/index.css +1 -1
  8. package/index.scss +0 -2
  9. package/package.json +5 -5
  10. package/tedi-storybook-styles.scss +8 -8
  11. package/variables/_base-variables.scss +28 -28
  12. package/variables/_color-variables.scss +0 -1
  13. package/variables/_font-variables.scss +0 -1
  14. package/variables/themes/default/color-variables__dark.scss +3 -6
  15. package/variables/themes/default/color-variables__default.scss +6 -15
  16. package/variables/themes/muis/color-variables__muis.scss +1 -0
  17. package/variables/themes/muis/font-variables__muis.scss +2 -2
  18. package/variables/themes/rit/color-variables__rit.scss +7 -16
  19. package/variables/_base-variables-legacy.scss +0 -110
  20. package/variables/_color-variables-legacy.scss +0 -1113
  21. package/variables/_dimensional-variables-legacy.scss +0 -1236
  22. package/variables/_font-variables-legacy.scss +0 -77
package/index.scss CHANGED
@@ -1,10 +1,8 @@
1
1
  @use 'bootstrap-utility/breakpoints';
2
2
  @use 'bootstrap-utility/grid';
3
3
  @use 'variables/bootstrap-variables';
4
- @use 'variables/base-variables-legacy';
5
4
  @use 'variables/base-variables';
6
5
  @use 'variables/color-variables';
7
- @use 'variables/dimensional-variables-legacy';
8
6
  @use 'variables/dimensional-variables';
9
7
  @use 'variables/font-variables';
10
8
  @use 'variables/utility-variables';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tedi-design-system/core",
3
- "version": "2.4.0",
3
+ "version": "3.0.0",
4
4
  "main": "src/index.scss",
5
5
  "scripts": {
6
6
  "prepare": "husky",
@@ -29,15 +29,15 @@
29
29
  "@semantic-release/npm": "^12.0.1",
30
30
  "dotenv-cli": "^11.0.0",
31
31
  "husky": "^9.0.11",
32
- "lint-staged": "^16.2.4",
32
+ "lint-staged": "^16.2.7",
33
33
  "node-fetch": "^3.3.2",
34
34
  "prettier": "^2.8.8",
35
35
  "replace-in-file": "^8.3.0",
36
36
  "sass": "^1.86.0",
37
37
  "semantic-release": "^24.2.7",
38
- "stylelint": "^16.13.2",
39
- "stylelint-config-recess-order": "^4.2.0",
40
- "stylelint-config-standard-scss": "^14.0.0",
38
+ "stylelint": "^16.26.1",
39
+ "stylelint-config-recess-order": "^7.4.0",
40
+ "stylelint-config-standard-scss": "^16.0.0",
41
41
  "stylelint-declaration-strict-value": "^1.9.2",
42
42
  "ts-node": "^10.9.2",
43
43
  "tslib": "^2.8.1",
package/tedi-storybook-styles.scss CHANGED
@@ -86,17 +86,17 @@ a {
86
86
 
87
87
  .example-list {
88
88
  overflow: hidden;
89
- border: 1px solid var(--neutral-350);
89
+ border: 1px solid var(--tedi-neutral-350);
90
90
  border-radius: var(--radius-03);
91
91
  }
92
92
 
93
93
  .example-text {
94
94
  &--primary {
95
- color: var(--neutral-900);
95
+ color: var(--tedi-neutral-900);
96
96
  }
97
97
 
98
98
  &--secondary {
99
- color: var(--neutral-700);
99
+ color: var(--tedi-neutral-700);
100
100
  }
101
101
  }
102
102
 
@@ -107,7 +107,7 @@ a {
107
107
  }
108
108
 
109
109
  .border-bottom {
110
- border-bottom: 1px solid var(--neutral-350);
110
+ border-bottom: 1px solid var(--tedi-neutral-350);
111
111
 
112
112
  &--3x {
113
113
  border-width: 3px;
@@ -140,15 +140,15 @@ a {
140
140
  width: 100%;
141
141
  height: 100%;
142
142
  content: '';
143
- background-color: var(--neutral-150);
143
+ background-color: var(--tedi-neutral-150);
144
144
  background-image: linear-gradient(
145
145
  45deg,
146
- var(--neutral-300) 25%,
146
+ var(--tedi-neutral-300) 25%,
147
147
  transparent 25%,
148
148
  transparent 75%,
149
- var(--neutral-300) 75%
149
+ var(--tedi-neutral-300) 75%
150
150
  ),
151
- linear-gradient(45deg, var(--neutral-300) 25%, transparent 25%, transparent 75%, var(--neutral-300) 75%);
151
+ linear-gradient(45deg, var(--tedi-neutral-300) 25%, transparent 25%, transparent 75%, var(--tedi-neutral-300) 75%);
152
152
  background-position: 0 0, 10px 10px;
153
153
  background-size: 20px 20px;
154
154
  }
package/variables/_base-variables.scss CHANGED
@@ -77,6 +77,7 @@
77
77
  --muis-blue-700: rgb(0 129 147);
78
78
  --muis-blue-800: rgb(1 110 157);
79
79
  --muis-blue-900: rgb(0 80 96);
80
+ --muis-family-open-sans: open sans;
80
81
  --muis-green-100: rgb(234 243 238);
81
82
  --muis-green-200: rgb(214 231 221);
82
83
  --muis-green-300: rgb(208 255 191);
@@ -85,6 +86,18 @@
85
86
  --muis-green-600: rgb(17 207 0);
86
87
  --muis-green-700: rgb(38 107 66);
87
88
  --muis-green-800: rgb(29 80 50);
89
+ --muis-line-height-00: 1rem;
90
+ --muis-line-height-01: 1.25rem;
91
+ --muis-line-height-02: 1.3125rem;
92
+ --muis-line-height-03: 1.5rem;
93
+ --muis-line-height-04: 1.625rem;
94
+ --muis-line-height-05: 1.75rem;
95
+ --muis-line-height-06: 1.875rem;
96
+ --muis-line-height-07: 2rem;
97
+ --muis-line-height-08: 2.25rem;
98
+ --muis-line-height-09: 2.625rem;
99
+ --muis-line-height-10: 2.875rem;
100
+ --muis-line-height-11: 3rem;
88
101
  --muis-neutral-100: rgb(255 255 255);
89
102
  --muis-neutral-200: rgb(243 243 243);
90
103
  --muis-neutral-300: rgb(241 241 241);
@@ -125,6 +138,19 @@
125
138
  --muis-red-600: rgb(255 46 0);
126
139
  --muis-red-700: rgb(172 50 50);
127
140
  --muis-red-800: rgb(129 37 37);
141
+ --muis-size-00: 0.75rem;
142
+ --muis-size-01: 0.875rem;
143
+ --muis-size-02: 1rem;
144
+ --muis-size-03: 1.125rem;
145
+ --muis-size-04: 1.25rem;
146
+ --muis-size-05: 1.375rem;
147
+ --muis-size-06: 1.5rem;
148
+ --muis-size-07: 1.75rem;
149
+ --muis-size-08: 1.875rem;
150
+ --muis-size-09: 2rem;
151
+ --muis-weight-01: 300;
152
+ --muis-weight-02: 400;
153
+ --muis-weight-03: 700;
128
154
  --muis-yellow-100: rgb(255 248 231);
129
155
  --muis-yellow-200: rgb(255 240 207);
130
156
  --muis-yellow-300: rgb(255 225 160);
@@ -133,32 +159,6 @@
133
159
  --muis-yellow-600: rgb(186 131 13);
134
160
  --muis-yellow-700: rgb(148 105 13);
135
161
  --muis-yellow-800: rgb(102 72 7);
136
- --muis2-family-open-sans: open sans;
137
- --muis2-line-height-00: 1rem;
138
- --muis2-line-height-01: 1.25rem;
139
- --muis2-line-height-02: 1.3125rem;
140
- --muis2-line-height-03: 1.5rem;
141
- --muis2-line-height-04: 1.625rem;
142
- --muis2-line-height-05: 1.75rem;
143
- --muis2-line-height-06: 1.875rem;
144
- --muis2-line-height-07: 2rem;
145
- --muis2-line-height-08: 2.25rem;
146
- --muis2-line-height-09: 2.625rem;
147
- --muis2-line-height-10: 2.875rem;
148
- --muis2-line-height-11: 3rem;
149
- --muis2-size-00: 0.75rem;
150
- --muis2-size-01: 0.875rem;
151
- --muis2-size-02: 1rem;
152
- --muis2-size-03: 1.125rem;
153
- --muis2-size-04: 1.25rem;
154
- --muis2-size-05: 1.375rem;
155
- --muis2-size-06: 1.5rem;
156
- --muis2-size-07: 1.75rem;
157
- --muis2-size-08: 1.875rem;
158
- --muis2-size-09: 2rem;
159
- --muis2-weight-01: 300;
160
- --muis2-weight-02: 400;
161
- --muis2-weight-03: 700;
162
162
  --radius-00: 0;
163
163
  --radius-01: 0.125rem;
164
164
  --radius-02-default: 0.25rem;
@@ -176,7 +176,7 @@
176
176
  --rit-accent-600: rgb(0 135 0);
177
177
  --rit-accent-700: rgb(0 135 0);
178
178
  --rit-accent-800: rgb(0 135 0);
179
- --rit-accent-extra-1: rgb(85 25 155);
179
+ --rit-accent-extra-1: rgb(0 60 165);
180
180
  --rit-accent-extra-10: rgb(58 216 204);
181
181
  --rit-accent-extra-2: rgb(247 102 79);
182
182
  --rit-accent-extra-3: rgb(67 199 246);
@@ -185,7 +185,7 @@
185
185
  --rit-accent-extra-6: rgb(253 192 183);
186
186
  --rit-accent-extra-7: rgb(0 132 85);
187
187
  --rit-accent-extra-8: rgb(255 200 50);
188
- --rit-accent-extra-9: rgb(0 60 165);
188
+ --rit-accent-extra-9: rgb(85 25 155);
189
189
  --rit-alpha-01: rgb(0 0 0 / 0.1%);
190
190
  --rit-alpha-10: rgb(0 0 0 / 10%);
191
191
  --rit-alpha-14: rgb(0 0 0 / 14%);
package/variables/_color-variables.scss CHANGED
@@ -1,4 +1,3 @@
1
- @use 'color-variables-legacy';
2
1
  @use 'themes/default/color-variables__default';
3
2
  @use 'themes/default/color-variables__dark';
4
3
  @use 'themes/rit/color-variables__rit';
package/variables/_font-variables.scss CHANGED
@@ -1,4 +1,3 @@
1
- @use 'font-variables-legacy';
2
1
  @use 'themes/default/font-variables__default';
3
2
  @use 'themes/rit/font-variables__rit';
4
3
 
package/variables/themes/default/color-variables__dark.scss CHANGED
@@ -289,9 +289,7 @@
289
289
  --form-checkbox-radio-card-primary-hover-text: var(--button-main-primary-text-default);
290
290
  --form-checkbox-radio-card-primary-selected-background: var(--button-main-primary-background-default);
291
291
  --form-checkbox-radio-card-primary-selected-border-group: var(--button-main-primary-border-active);
292
- --form-checkbox-radio-card-primary-selected-border-separate: var(
293
- --form-checkbox-radio-card-primary-selected-background
294
- );
292
+ --form-checkbox-radio-card-primary-selected-border-separate: var(--form-checkbox-radio-card-primary-selected-background);
295
293
  --form-checkbox-radio-card-primary-selected-text: var(--button-main-primary-text-default);
296
294
  --form-checkbox-radio-card-secondary-default-background: var(--button-main-secondary-background-default);
297
295
  --form-checkbox-radio-card-secondary-default-border: var(--form-checkbox-radio-card-primary-default-border-group);
@@ -300,9 +298,7 @@
300
298
  --form-checkbox-radio-card-secondary-disabled-default-border: var(--form-input-border-disabled);
301
299
  --form-checkbox-radio-card-secondary-disabled-default-text: var(--general-text-disabled);
302
300
  --form-checkbox-radio-card-secondary-disabled-selected-background: var(--general-surface-primary);
303
- --form-checkbox-radio-card-secondary-disabled-selected-border: var(
304
- --form-checkbox-radio-default-border-selected-disabled
305
- );
301
+ --form-checkbox-radio-card-secondary-disabled-selected-border: var(--form-checkbox-radio-default-border-selected-disabled);
306
302
  --form-checkbox-radio-card-secondary-disabled-selected-text: var(--tedi-primary-600);
307
303
  --form-checkbox-radio-card-secondary-hover-background: var(--button-main-secondary-background-hover);
308
304
  --form-checkbox-radio-card-secondary-hover-border: var(--button-main-secondary-border-hover);
@@ -334,6 +330,7 @@
334
330
  --form-datepicker-date-default: var(--button-main-secondary-background-default);
335
331
  --form-datepicker-date-hover: var(--button-main-secondary-background-hover);
336
332
  --form-datepicker-date-selected: var(--general-surface-brand-primary);
333
+ --form-datepicker-date-selected-hover: var(--general-surface-brand-secondary);
337
334
  --form-datepicker-date-text-available: var(--general-status-success-text);
338
335
  --form-datepicker-date-text-muted: var(--general-text-disabled);
339
336
  --form-datepicker-date-text-selected: var(--general-text-white);
package/variables/themes/default/color-variables__default.scss CHANGED
@@ -278,24 +278,18 @@
278
278
  --form-checkbox-radio-card-disabled-text: var(--button-main-disabled-general-text);
279
279
  --form-checkbox-radio-card-primary-default-background: var(--general-surface-tertiary);
280
280
  --form-checkbox-radio-card-primary-default-border-group: var(--button-main-secondary-border-default);
281
- --form-checkbox-radio-card-primary-default-border-separate: var(
282
- --form-checkbox-radio-card-primary-default-background
283
- );
281
+ --form-checkbox-radio-card-primary-default-border-separate: var(--form-checkbox-radio-card-primary-default-background);
284
282
  --form-checkbox-radio-card-primary-default-text: var(--general-text-secondary);
285
283
  --form-checkbox-radio-card-primary-disabled-default-background: var(--form-general-background-disabled);
286
284
  --form-checkbox-radio-card-primary-disabled-default-text: var(--general-text-disabled);
287
- --form-checkbox-radio-card-primary-disabled-selected-background: var(
288
- --form-checkbox-radio-default-background-selected-disabled
289
- );
285
+ --form-checkbox-radio-card-primary-disabled-selected-background: var(--form-checkbox-radio-default-background-selected-disabled);
290
286
  --form-checkbox-radio-card-primary-disabled-selected-text: var(--form-checkbox-radio-card-primary-selected-text);
291
287
  --form-checkbox-radio-card-primary-hover-background: var(--button-main-primary-background-hover);
292
288
  --form-checkbox-radio-card-primary-hover-border: var(--button-main-primary-border-hover);
293
289
  --form-checkbox-radio-card-primary-hover-text: var(--button-main-primary-text-default);
294
290
  --form-checkbox-radio-card-primary-selected-background: var(--button-main-primary-background-default);
295
291
  --form-checkbox-radio-card-primary-selected-border-group: var(--button-main-primary-border-active);
296
- --form-checkbox-radio-card-primary-selected-border-separate: var(
297
- --form-checkbox-radio-card-primary-selected-background
298
- );
292
+ --form-checkbox-radio-card-primary-selected-border-separate: var(--form-checkbox-radio-card-primary-selected-background);
299
293
  --form-checkbox-radio-card-primary-selected-text: var(--button-main-primary-text-default);
300
294
  --form-checkbox-radio-card-secondary-default-background: var(--button-main-secondary-background-default);
301
295
  --form-checkbox-radio-card-secondary-default-border: var(--form-checkbox-radio-card-primary-default-border-group);
@@ -304,12 +298,8 @@
304
298
  --form-checkbox-radio-card-secondary-disabled-default-border: var(--form-input-border-disabled);
305
299
  --form-checkbox-radio-card-secondary-disabled-default-text: var(--general-text-disabled);
306
300
  --form-checkbox-radio-card-secondary-disabled-selected-background: var(--general-surface-primary);
307
- --form-checkbox-radio-card-secondary-disabled-selected-border: var(
308
- --form-checkbox-radio-default-border-selected-disabled
309
- );
310
- --form-checkbox-radio-card-secondary-disabled-selected-text: var(
311
- --form-checkbox-radio-card-primary-disabled-selected-background
312
- );
301
+ --form-checkbox-radio-card-secondary-disabled-selected-border: var(--form-checkbox-radio-default-border-selected-disabled);
302
+ --form-checkbox-radio-card-secondary-disabled-selected-text: var(--form-checkbox-radio-card-primary-disabled-selected-background);
313
303
  --form-checkbox-radio-card-secondary-hover-background: var(--button-main-secondary-background-hover);
314
304
  --form-checkbox-radio-card-secondary-hover-border: var(--button-main-secondary-border-hover);
315
305
  --form-checkbox-radio-card-secondary-hover-text: var(--button-main-secondary-text-default);
@@ -340,6 +330,7 @@
340
330
  --form-datepicker-date-default: var(--button-main-secondary-background-default);
341
331
  --form-datepicker-date-hover: var(--button-main-secondary-background-hover);
342
332
  --form-datepicker-date-selected: var(--general-surface-brand-primary);
333
+ --form-datepicker-date-selected-hover: var(--general-surface-brand-secondary);
343
334
  --form-datepicker-date-text-available: var(--general-status-success-text);
344
335
  --form-datepicker-date-text-muted: var(--general-text-disabled);
345
336
  --form-datepicker-date-text-selected: var(--general-text-white);
package/variables/themes/muis/color-variables__muis.scss CHANGED
@@ -330,6 +330,7 @@
330
330
  --form-datepicker-date-default: var(--button-main-secondary-background-default);
331
331
  --form-datepicker-date-hover: var(--muis-blue-00);
332
332
  --form-datepicker-date-selected: var(--general-surface-brand-primary);
333
+ --form-datepicker-date-selected-hover: var(--general-surface-brand-primary);
333
334
  --form-datepicker-date-text-available: var(--general-status-success-text);
334
335
  --form-datepicker-date-text-muted: var(--general-text-disabled);
335
336
  --form-datepicker-date-text-selected: var(--general-text-white);
package/variables/themes/muis/font-variables__muis.scss CHANGED
@@ -17,8 +17,8 @@
17
17
  --body-small-regular-line-height: var(--tedi-line-height-01);
18
18
  --body-small-regular-size: var(--tedi-size-01);
19
19
  --body-small-regular-weight: var(--tedi-weight-02);
20
- --family-default: var(--muis2-family-open-sans);
21
- --family-heading: var(--muis2-family-open-sans);
20
+ --family-default: var(--muis-family-open-sans);
21
+ --family-heading: var(--muis-family-open-sans);
22
22
  --heading-h1-line-height: var(--tedi-line-height-10);
23
23
  --heading-h1-size: var(--tedi-size-09);
24
24
  --heading-h1-weight: var(--tedi-weight-01);
package/variables/themes/rit/color-variables__rit.scss CHANGED
@@ -149,7 +149,7 @@
149
149
  --button-main-neutral-inverted-text-focus: var(--tedi-neutral-100);
150
150
  --button-main-neutral-inverted-text-hover: var(--rit-accent-100);
151
151
  --button-main-neutral-text-active: var(--rit-accent-extra-7);
152
- --button-main-neutral-text-default: var(--rit-accent-extra-1);
152
+ --button-main-neutral-text-default: rgb(0 60 165);
153
153
  --button-main-neutral-text-focus: var(--rit-accent-extra-7);
154
154
  --button-main-neutral-text-hover: var(--rit-accent-extra-7);
155
155
  --button-main-primary-background-active: var(--rit-accent-600);
@@ -278,24 +278,18 @@
278
278
  --form-checkbox-radio-card-disabled-text: var(--button-main-disabled-general-text);
279
279
  --form-checkbox-radio-card-primary-default-background: var(--general-surface-tertiary);
280
280
  --form-checkbox-radio-card-primary-default-border-group: var(--button-main-secondary-border-default);
281
- --form-checkbox-radio-card-primary-default-border-separate: var(
282
- --form-checkbox-radio-card-primary-default-background
283
- );
281
+ --form-checkbox-radio-card-primary-default-border-separate: var(--form-checkbox-radio-card-primary-default-background);
284
282
  --form-checkbox-radio-card-primary-default-text: var(--general-text-secondary);
285
283
  --form-checkbox-radio-card-primary-disabled-default-background: var(--form-general-background-disabled);
286
284
  --form-checkbox-radio-card-primary-disabled-default-text: var(--general-text-disabled);
287
- --form-checkbox-radio-card-primary-disabled-selected-background: var(
288
- --form-checkbox-radio-default-background-selected-disabled
289
- );
285
+ --form-checkbox-radio-card-primary-disabled-selected-background: var(--form-checkbox-radio-default-background-selected-disabled);
290
286
  --form-checkbox-radio-card-primary-disabled-selected-text: var(--form-checkbox-radio-card-primary-selected-text);
291
287
  --form-checkbox-radio-card-primary-hover-background: var(--button-main-primary-background-hover);
292
288
  --form-checkbox-radio-card-primary-hover-border: var(--button-main-primary-border-hover);
293
289
  --form-checkbox-radio-card-primary-hover-text: var(--button-main-primary-text-default);
294
290
  --form-checkbox-radio-card-primary-selected-background: var(--button-main-primary-background-default);
295
291
  --form-checkbox-radio-card-primary-selected-border-group: var(--button-main-primary-border-active);
296
- --form-checkbox-radio-card-primary-selected-border-separate: var(
297
- --form-checkbox-radio-card-primary-selected-background
298
- );
292
+ --form-checkbox-radio-card-primary-selected-border-separate: var(--form-checkbox-radio-card-primary-selected-background);
299
293
  --form-checkbox-radio-card-primary-selected-text: var(--button-main-primary-text-default);
300
294
  --form-checkbox-radio-card-secondary-default-background: var(--button-main-secondary-background-default);
301
295
  --form-checkbox-radio-card-secondary-default-border: var(--form-checkbox-radio-card-primary-default-border-group);
@@ -304,12 +298,8 @@
304
298
  --form-checkbox-radio-card-secondary-disabled-default-border: var(--form-input-border-disabled);
305
299
  --form-checkbox-radio-card-secondary-disabled-default-text: var(--general-text-disabled);
306
300
  --form-checkbox-radio-card-secondary-disabled-selected-background: var(--general-surface-primary);
307
- --form-checkbox-radio-card-secondary-disabled-selected-border: var(
308
- --form-checkbox-radio-default-border-selected-disabled
309
- );
310
- --form-checkbox-radio-card-secondary-disabled-selected-text: var(
311
- --form-checkbox-radio-card-primary-disabled-selected-background
312
- );
301
+ --form-checkbox-radio-card-secondary-disabled-selected-border: var(--form-checkbox-radio-default-border-selected-disabled);
302
+ --form-checkbox-radio-card-secondary-disabled-selected-text: var(--form-checkbox-radio-card-primary-disabled-selected-background);
313
303
  --form-checkbox-radio-card-secondary-hover-background: var(--button-main-secondary-background-hover);
314
304
  --form-checkbox-radio-card-secondary-hover-border: var(--button-main-secondary-border-hover);
315
305
  --form-checkbox-radio-card-secondary-hover-text: var(--button-main-secondary-text-default);
@@ -340,6 +330,7 @@
340
330
  --form-datepicker-date-default: var(--button-main-secondary-background-default);
341
331
  --form-datepicker-date-hover: var(--rit-accent-100);
342
332
  --form-datepicker-date-selected: var(--rit-accent-100);
333
+ --form-datepicker-date-selected-hover: var(--rit-accent-100);
343
334
  --form-datepicker-date-text-available: var(--general-text-dark);
344
335
  --form-datepicker-date-text-muted: var(--general-text-disabled);
345
336
  --form-datepicker-date-text-selected: var(--general-text-dark);
package/variables/_base-variables-legacy.scss DELETED
@@ -1,110 +0,0 @@
1
- :root {
2
- --accent-100: var(--orange-100);
3
- --accent-200: var(--orange-200);
4
- --accent-300: var(--orange-300);
5
- --accent-400: var(--orange-400);
6
- --accent-500: var(--orange-500);
7
- --accent-600: var(--orange-600);
8
- --accent-700: var(--orange-700);
9
- --accent-800: var(--orange-800);
10
- --alpha-01: rgba(0 0 0 / 0%);
11
- --alpha-10: rgba(0 0 0 / 10%);
12
- --alpha-14: rgba(0 0 0 / 14%);
13
- --alpha-20: rgba(0 0 0 / 20%);
14
- --alpha-40: rgba(23 23 23 / 40%);
15
- --alpha-80: rgba(34 35 43 / 80%);
16
- --alpha-primary-08: rgba(0 90 163 / 8%);
17
- --alpha-primary-20: rgba(0 90 163 / 20%);
18
- --alpha-white-10: rgba(255 255 255 / 10%);
19
- --alpha-white-14: rgba(255 255 255 / 14%);
20
- --alpha-white-20: rgba(255 255 255 / 20%);
21
- --alpha-white-30: rgba(255 255 255 / 30%);
22
- --alpha-white-50: rgba(255 255 255 / 50%);
23
- --alpha-white-80: rgba(255 255 255 / 80%);
24
- --blue-100: #e7f0f6;
25
- --blue-200: #d0e1ee;
26
- --blue-300: #99bdda;
27
- --blue-400: #4587bc;
28
- --blue-500: #337bb5;
29
- --blue-600: #005aa3;
30
- --blue-700: #004277;
31
- --blue-800: #003662;
32
- --green-100: #eaf3ee;
33
- --green-200: #d6e7dd;
34
- --green-300: #accfba;
35
- --green-400: #83b698;
36
- --green-500: #599e75;
37
- --green-600: #308653;
38
- --green-700: #266b42;
39
- --green-800: #1d5032;
40
- --neutral-100: #fff;
41
- --neutral-200: #f9f9f9;
42
- --neutral-300: #f0f0f2;
43
- --neutral-350: #e1e2e5;
44
- --neutral-400: #d2d3d8;
45
- --neutral-450: #9293a4;
46
- --neutral-500: #838494;
47
- --neutral-550: #737482;
48
- --neutral-600: #5d6071;
49
- --neutral-700: #4b4e62;
50
- --neutral-750: #34394c;
51
- --neutral-800: #262b3b;
52
- --neutral-850: #151926;
53
- --neutral-900: #000;
54
- --orange-100: #fff2e6;
55
- --orange-200: #ffe6cc;
56
- --orange-300: #fc9;
57
- --orange-400: #ffb366;
58
- --orange-500: #f93;
59
- --orange-600: #ff8000;
60
- --orange-700: #994d00;
61
- --orange-800: #630;
62
- --primary-100: var(--blue-100);
63
- --primary-200: var(--blue-200);
64
- --primary-300: var(--blue-300);
65
- --primary-400: var(--blue-400);
66
- --primary-500: var(--blue-500);
67
- --primary-600: var(--blue-600);
68
- --primary-700: var(--blue-700);
69
- --primary-800: var(--blue-800);
70
- --red-100: #fbecec;
71
- --red-200: #f7d8d8;
72
- --red-300: #efb2b2;
73
- --red-400: #e78b8b;
74
- --red-500: #df6565;
75
- --red-600: #d73e3e;
76
- --red-700: #ac3232;
77
- --red-800: #812525;
78
- --yellow-100: #fff8e7;
79
- --yellow-200: #fff0cf;
80
- --yellow-300: #ffe1a0;
81
- --yellow-400: #ffd370;
82
- --yellow-500: #ffb511;
83
- --yellow-600: #ba830d;
84
- --yellow-700: #94690d;
85
- --yellow-800: #664807;
86
-
87
- // /* BASE FONTS */
88
- --family-roboto: 'Roboto';
89
- --size-00: 0.75rem; /* 12px */
90
- --size-01: 0.875rem; /* 14px */
91
- --size-02: 1rem; /* 16px */
92
- --size-03: 1.125rem; /* 18px */
93
- --size-04: 1.25rem; /* 20px */
94
- --size-05: 1.375rem; /* 22px */
95
- --size-06: 1.5rem; /* 24px */
96
- --size-07: 1.75rem; /* 28px */
97
- --size-08: 1.875rem; /* 30px */
98
- --size-09: 2rem; /* 32px */
99
- --line-height-01: 1.25rem; /* 20px */
100
- --line-height-02: 1.3125rem; /* 21px */
101
- --line-height-03: 1.5rem; /* 24px */
102
- --line-height-04: 1.625rem; /* 26px */
103
- --line-height-05: 1.75rem; /* 28px */
104
- --line-height-06: 1.875rem; /* 30px */
105
- --line-height-07: 2rem; /* 32px */
106
- --line-height-08: 2.25rem; /* 36px */
107
- --line-height-09: 2.625rem; /* 42px */
108
- --line-height-10: 2.875rem; /* 46px */
109
- --line-height-11: 3rem; /* 48px */
110
- }