@phcdevworks/spectre-tokens 4.5.0 → 4.8.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/dist/index.css CHANGED
@@ -9,6 +9,7 @@
9
9
  --sp-surface-selected: #f0f9ff;
10
10
  --sp-surface-active: #d9dfeb;
11
11
  --sp-surface-divider: #d9dfeb;
12
+ --sp-surface-inverse: #141b24;
12
13
  --sp-text-on-page-default: #141b24;
13
14
  --sp-text-on-page-muted: #4b576a;
14
15
  --sp-text-on-page-subtle: #657287;
@@ -19,6 +20,8 @@
19
20
  --sp-text-on-surface-subtle: #657287;
20
21
  --sp-text-on-surface-meta: #657287;
21
22
  --sp-text-on-surface-brand: #1f57db;
23
+ --sp-text-on-inverse-default: #f7f8fb;
24
+ --sp-text-on-inverse-muted: #b7c1d4;
22
25
  --sp-component-card-text: #141b24;
23
26
  --sp-component-card-text-muted: #4b576a;
24
27
  --sp-component-input-text: #141b24;
@@ -142,6 +145,13 @@
142
145
  --sp-badge-success-bg-hover: #bbf7d0;
143
146
  --sp-badge-warning-bg-hover: #ffe08a;
144
147
  --sp-badge-danger-bg-hover: #fecaca;
148
+ --sp-component-card-padding-sm: 1.5rem;
149
+ --sp-component-card-padding-md: 2rem;
150
+ --sp-component-card-padding-lg: 2.5rem;
151
+ --sp-badge-inverse-bg: rgba(255, 255, 255, 0.16);
152
+ --sp-badge-inverse-bg-hover: rgba(255, 255, 255, 0.24);
153
+ --sp-badge-inverse-text: #ffffff;
154
+ --sp-badge-inverse-border: rgba(255, 255, 255, 0.3);
145
155
  --sp-select-border-invalid: #ef4444;
146
156
  --sp-select-bg-invalid: #fef2f2;
147
157
  --sp-select-border-success: #22c55e;
@@ -154,6 +164,8 @@
154
164
  --sp-link-hover: #1946b4;
155
165
  --sp-link-active: #173b8f;
156
166
  --sp-link-visited: #5d28b8;
167
+ --sp-link-on-inverse: #b7c1d4;
168
+ --sp-link-on-inverse-hover: #8ab6ff;
157
169
  --sp-color-brand-50: #eef4ff;
158
170
  --sp-color-brand-100: #d9e7ff;
159
171
  --sp-color-brand-200: #b9d2ff;
@@ -518,6 +530,83 @@
518
530
  --sp-color-palette-taupe-800: #2b2422;
519
531
  --sp-color-palette-taupe-900: #1d1816;
520
532
  --sp-color-palette-taupe-950: #0c0a09;
533
+ --sp-color-palette-integration-ink-50: #fafafb;
534
+ --sp-color-palette-integration-ink-100: #f5f5f6;
535
+ --sp-color-palette-integration-ink-200: #e7e8e9;
536
+ --sp-color-palette-integration-ink-300: #d3d4d6;
537
+ --sp-color-palette-integration-ink-400: #9ea0a3;
538
+ --sp-color-palette-integration-ink-500: #707376;
539
+ --sp-color-palette-integration-ink-600: #525457;
540
+ --sp-color-palette-integration-ink-700: #3e4143;
541
+ --sp-color-palette-integration-ink-800: #27292b;
542
+ --sp-color-palette-integration-ink-900: #16181a;
543
+ --sp-color-palette-integration-ink-950: #06080a;
544
+ --sp-color-palette-integration-gunmetal-50: #f0f0f1;
545
+ --sp-color-palette-integration-gunmetal-100: #eaebec;
546
+ --sp-color-palette-integration-gunmetal-200: #dddedf;
547
+ --sp-color-palette-integration-gunmetal-300: #c8cbcd;
548
+ --sp-color-palette-integration-gunmetal-400: #93979a;
549
+ --sp-color-palette-integration-gunmetal-500: #666b6e;
550
+ --sp-color-palette-integration-gunmetal-600: #484c50;
551
+ --sp-color-palette-integration-gunmetal-700: #35393c;
552
+ --sp-color-palette-integration-gunmetal-800: #1f2225;
553
+ --sp-color-palette-integration-gunmetal-900: #0c1014;
554
+ --sp-color-palette-integration-gunmetal-950: #000104;
555
+ --sp-color-palette-integration-signal-blue-50: #ebf0f9;
556
+ --sp-color-palette-integration-signal-blue-100: #d8e3f8;
557
+ --sp-color-palette-integration-signal-blue-200: #bfd4f9;
558
+ --sp-color-palette-integration-signal-blue-300: #95bdf9;
559
+ --sp-color-palette-integration-signal-blue-400: #4a9df7;
560
+ --sp-color-palette-integration-signal-blue-500: #0083f7;
561
+ --sp-color-palette-integration-signal-blue-600: #006dfa;
562
+ --sp-color-palette-integration-signal-blue-700: #005ce8;
563
+ --sp-color-palette-integration-signal-blue-800: #004bb8;
564
+ --sp-color-palette-integration-signal-blue-900: #003f8a;
565
+ --sp-color-palette-integration-signal-blue-950: #002552;
566
+ --sp-color-palette-integration-icy-blue-50: #e4f0fa;
567
+ --sp-color-palette-integration-icy-blue-100: #cbe5fb;
568
+ --sp-color-palette-integration-icy-blue-200: #a4d8ff;
569
+ --sp-color-palette-integration-icy-blue-300: #59c4ff;
570
+ --sp-color-palette-integration-icy-blue-400: #00a8ff;
571
+ --sp-color-palette-integration-icy-blue-500: #0090ff;
572
+ --sp-color-palette-integration-icy-blue-600: #007cff;
573
+ --sp-color-palette-integration-icy-blue-700: #006aff;
574
+ --sp-color-palette-integration-icy-blue-800: #0055ce;
575
+ --sp-color-palette-integration-icy-blue-900: #004699;
576
+ --sp-color-palette-integration-icy-blue-950: #002a5a;
577
+ --sp-color-palette-phcdevworks-raspberry-red-50: #fff3f4;
578
+ --sp-color-palette-phcdevworks-raspberry-red-100: #ffe7e8;
579
+ --sp-color-palette-phcdevworks-raspberry-red-200: #ffcfd2;
580
+ --sp-color-palette-phcdevworks-raspberry-red-300: #fea5ae;
581
+ --sp-color-palette-phcdevworks-raspberry-red-400: #fd6982;
582
+ --sp-color-palette-phcdevworks-raspberry-red-500: #fe2b67;
583
+ --sp-color-palette-phcdevworks-raspberry-red-600: #ee005a;
584
+ --sp-color-palette-phcdevworks-raspberry-red-700: #c8054b;
585
+ --sp-color-palette-phcdevworks-raspberry-red-800: #a4113e;
586
+ --sp-color-palette-phcdevworks-raspberry-red-900: #8a1635;
587
+ --sp-color-palette-phcdevworks-raspberry-red-950: #4d081a;
588
+ --sp-color-palette-phcdevworks-deep-space-blue-50: #edf1f7;
589
+ --sp-color-palette-phcdevworks-deep-space-blue-100: #dce5f1;
590
+ --sp-color-palette-phcdevworks-deep-space-blue-200: #c4d5ec;
591
+ --sp-color-palette-phcdevworks-deep-space-blue-300: #a1bee3;
592
+ --sp-color-palette-phcdevworks-deep-space-blue-400: #6b9ed5;
593
+ --sp-color-palette-phcdevworks-deep-space-blue-500: #2583ca;
594
+ --sp-color-palette-phcdevworks-deep-space-blue-600: #006dc2;
595
+ --sp-color-palette-phcdevworks-deep-space-blue-700: #005bb0;
596
+ --sp-color-palette-phcdevworks-deep-space-blue-800: #004a8c;
597
+ --sp-color-palette-phcdevworks-deep-space-blue-900: #003f6d;
598
+ --sp-color-palette-phcdevworks-deep-space-blue-950: #012641;
599
+ --sp-color-palette-phcdevworks-paper-50: #fcfaf7;
600
+ --sp-color-palette-phcdevworks-paper-100: #f7f5f2;
601
+ --sp-color-palette-phcdevworks-paper-200: #e9e5e0;
602
+ --sp-color-palette-phcdevworks-paper-300: #d9d3ca;
603
+ --sp-color-palette-phcdevworks-paper-400: #aca08b;
604
+ --sp-color-palette-phcdevworks-paper-500: #807056;
605
+ --sp-color-palette-phcdevworks-paper-600: #5e523d;
606
+ --sp-color-palette-phcdevworks-paper-700: #4a3f2d;
607
+ --sp-color-palette-phcdevworks-paper-800: #2b251b;
608
+ --sp-color-palette-phcdevworks-paper-900: #1f190e;
609
+ --sp-color-palette-phcdevworks-paper-950: #0e0a05;
521
610
  --sp-space-0: 0rem;
522
611
  --sp-space-1: 0.0625rem;
523
612
  --sp-space-2: 0.125rem;
@@ -554,6 +643,7 @@
554
643
  --sp-layout-container-padding-inline-lg: 2rem;
555
644
  --sp-layout-container-max-width: 72rem;
556
645
  --sp-layout-container-max-width-prose: 65ch;
646
+ --sp-layout-container-max-width-wide: 80rem;
557
647
  --sp-layout-sidebar-width: 16rem;
558
648
  --sp-border-width-none: 0;
559
649
  --sp-border-width-base: 1px;
@@ -783,6 +873,16 @@
783
873
  --sp-button-accent-textdisabled: #8a96ad;
784
874
  --sp-button-accent-focusring: rgba(133, 79, 247, 0.4);
785
875
  --sp-button-accent-focusvisible: rgba(133, 79, 247, 0.4);
876
+ --sp-button-inverse-bg: rgba(255, 255, 255, 0.12);
877
+ --sp-button-inverse-bghover: rgba(255, 255, 255, 0.2);
878
+ --sp-button-inverse-bgactive: rgba(255, 255, 255, 0.28);
879
+ --sp-button-inverse-bgdisabled: rgba(255, 255, 255, 0.08);
880
+ --sp-button-inverse-text: #ffffff;
881
+ --sp-button-inverse-textdisabled: #8a96ad;
882
+ --sp-button-inverse-border: rgba(255, 255, 255, 0.3);
883
+ --sp-button-inverse-borderdisabled: rgba(255, 255, 255, 0.16);
884
+ --sp-button-inverse-focusring: rgba(14, 165, 233, 0.4);
885
+ --sp-button-inverse-focusvisible: rgba(14, 165, 233, 0.4);
786
886
  --sp-form-default-bg: #ffffff;
787
887
  --sp-form-default-border: #b7c1d4;
788
888
  --sp-form-default-text: #141b24;
@@ -861,6 +961,7 @@
861
961
  --sp-surface-selected: #082f49;
862
962
  --sp-surface-active: #4b576a;
863
963
  --sp-surface-divider: #374253;
964
+ --sp-surface-inverse: #141b24;
864
965
  --sp-text-on-page-default: #f7f8fb;
865
966
  --sp-text-on-page-muted: #b7c1d4;
866
967
  --sp-text-on-page-subtle: #8a96ad;
@@ -871,6 +972,8 @@
871
972
  --sp-text-on-surface-subtle: #8a96ad;
872
973
  --sp-text-on-surface-meta: #8a96ad;
873
974
  --sp-text-on-surface-brand: #5a92ff;
975
+ --sp-text-on-inverse-default: #f7f8fb;
976
+ --sp-text-on-inverse-muted: #b7c1d4;
874
977
  --sp-component-card-text: #eef1f6;
875
978
  --sp-component-card-text-muted: #b7c1d4;
876
979
  --sp-component-input-text: #eef1f6;
@@ -994,6 +1097,13 @@
994
1097
  --sp-badge-success-bg-hover: #15803d;
995
1098
  --sp-badge-warning-bg-hover: #8f5200;
996
1099
  --sp-badge-danger-bg-hover: #b91c1c;
1100
+ --sp-component-card-padding-sm: 1.5rem;
1101
+ --sp-component-card-padding-md: 2rem;
1102
+ --sp-component-card-padding-lg: 2.5rem;
1103
+ --sp-badge-inverse-bg: rgba(255, 255, 255, 0.16);
1104
+ --sp-badge-inverse-bg-hover: rgba(255, 255, 255, 0.24);
1105
+ --sp-badge-inverse-text: #ffffff;
1106
+ --sp-badge-inverse-border: rgba(255, 255, 255, 0.3);
997
1107
  --sp-select-border-invalid: #ef4444;
998
1108
  --sp-select-bg-invalid: #fef2f2;
999
1109
  --sp-select-border-success: #22c55e;
@@ -1006,4 +1116,6 @@
1006
1116
  --sp-link-hover: #1946b4;
1007
1117
  --sp-link-active: #173b8f;
1008
1118
  --sp-link-visited: #5d28b8;
1119
+ --sp-link-on-inverse: #b7c1d4;
1120
+ --sp-link-on-inverse-hover: #8ab6ff;
1009
1121
  }
package/dist/index.d.cts CHANGED
@@ -3,6 +3,11 @@ interface SpectreGeneratedTokens {
3
3
  card: {
4
4
  text: string;
5
5
  textMuted: string;
6
+ padding: {
7
+ sm: string;
8
+ md: string;
9
+ lg: string;
10
+ };
6
11
  };
7
12
  input: {
8
13
  text: string;
@@ -28,6 +33,10 @@ interface SpectreGeneratedTokens {
28
33
  dangerBg: string;
29
34
  dangerBgHover: string;
30
35
  dangerText: string;
36
+ inverseBg: string;
37
+ inverseBgHover: string;
38
+ inverseText: string;
39
+ inverseBorder: string;
31
40
  };
32
41
  iconBox: {
33
42
  bg: string;
@@ -255,6 +264,18 @@ interface SpectreGeneratedTokens {
255
264
  focusRing: string;
256
265
  focusVisible: string;
257
266
  };
267
+ inverse: {
268
+ bg: string;
269
+ bgHover: string;
270
+ bgActive: string;
271
+ bgDisabled: string;
272
+ text: string;
273
+ textDisabled: string;
274
+ border: string;
275
+ borderDisabled: string;
276
+ focusRing: string;
277
+ focusVisible: string;
278
+ };
258
279
  };
259
280
  forms: {
260
281
  default: {
@@ -1137,6 +1158,97 @@ interface SpectreGeneratedTokens {
1137
1158
  '900': string;
1138
1159
  '950': string;
1139
1160
  };
1161
+ 'integration-ink': {
1162
+ '50': string;
1163
+ '100': string;
1164
+ '200': string;
1165
+ '300': string;
1166
+ '400': string;
1167
+ '500': string;
1168
+ '600': string;
1169
+ '700': string;
1170
+ '800': string;
1171
+ '900': string;
1172
+ '950': string;
1173
+ };
1174
+ 'integration-gunmetal': {
1175
+ '50': string;
1176
+ '100': string;
1177
+ '200': string;
1178
+ '300': string;
1179
+ '400': string;
1180
+ '500': string;
1181
+ '600': string;
1182
+ '700': string;
1183
+ '800': string;
1184
+ '900': string;
1185
+ '950': string;
1186
+ };
1187
+ 'integration-signal-blue': {
1188
+ '50': string;
1189
+ '100': string;
1190
+ '200': string;
1191
+ '300': string;
1192
+ '400': string;
1193
+ '500': string;
1194
+ '600': string;
1195
+ '700': string;
1196
+ '800': string;
1197
+ '900': string;
1198
+ '950': string;
1199
+ };
1200
+ 'integration-icy-blue': {
1201
+ '50': string;
1202
+ '100': string;
1203
+ '200': string;
1204
+ '300': string;
1205
+ '400': string;
1206
+ '500': string;
1207
+ '600': string;
1208
+ '700': string;
1209
+ '800': string;
1210
+ '900': string;
1211
+ '950': string;
1212
+ };
1213
+ 'phcdevworks-raspberry-red': {
1214
+ '50': string;
1215
+ '100': string;
1216
+ '200': string;
1217
+ '300': string;
1218
+ '400': string;
1219
+ '500': string;
1220
+ '600': string;
1221
+ '700': string;
1222
+ '800': string;
1223
+ '900': string;
1224
+ '950': string;
1225
+ };
1226
+ 'phcdevworks-deep-space-blue': {
1227
+ '50': string;
1228
+ '100': string;
1229
+ '200': string;
1230
+ '300': string;
1231
+ '400': string;
1232
+ '500': string;
1233
+ '600': string;
1234
+ '700': string;
1235
+ '800': string;
1236
+ '900': string;
1237
+ '950': string;
1238
+ };
1239
+ 'phcdevworks-paper': {
1240
+ '50': string;
1241
+ '100': string;
1242
+ '200': string;
1243
+ '300': string;
1244
+ '400': string;
1245
+ '500': string;
1246
+ '600': string;
1247
+ '700': string;
1248
+ '800': string;
1249
+ '900': string;
1250
+ '950': string;
1251
+ };
1140
1252
  };
1141
1253
  };
1142
1254
  space: {
@@ -1382,12 +1494,15 @@ interface SpectreGeneratedTokens {
1382
1494
  selected: string;
1383
1495
  active: string;
1384
1496
  divider: string;
1497
+ inverse: string;
1385
1498
  };
1386
1499
  link: {
1387
1500
  default: string;
1388
1501
  hover: string;
1389
1502
  active: string;
1390
1503
  visited: string;
1504
+ onInverse: string;
1505
+ onInverseHover: string;
1391
1506
  };
1392
1507
  text: {
1393
1508
  onPage: {
@@ -1404,6 +1519,10 @@ interface SpectreGeneratedTokens {
1404
1519
  meta: string;
1405
1520
  brand: string;
1406
1521
  };
1522
+ onInverse: {
1523
+ default: string;
1524
+ muted: string;
1525
+ };
1407
1526
  };
1408
1527
  layout: {
1409
1528
  section: {
@@ -1433,6 +1552,7 @@ interface SpectreGeneratedTokens {
1433
1552
  };
1434
1553
  maxWidth: string;
1435
1554
  maxWidthProse: string;
1555
+ maxWidthWide: string;
1436
1556
  };
1437
1557
  sidebar: {
1438
1558
  width: string;
@@ -1822,6 +1942,7 @@ interface ComponentTokens<Value = string> {
1822
1942
  card: {
1823
1943
  text: Value;
1824
1944
  textMuted: Value;
1945
+ padding: TokenScale;
1825
1946
  };
1826
1947
  input: {
1827
1948
  text: Value;
@@ -1895,6 +2016,7 @@ interface LayoutTokens {
1895
2016
  paddingInline: TokenScale;
1896
2017
  maxWidth: string;
1897
2018
  maxWidthProse: string;
2019
+ maxWidthWide: string;
1898
2020
  };
1899
2021
  sidebar: {
1900
2022
  width: string;
package/dist/index.d.ts CHANGED
@@ -3,6 +3,11 @@ interface SpectreGeneratedTokens {
3
3
  card: {
4
4
  text: string;
5
5
  textMuted: string;
6
+ padding: {
7
+ sm: string;
8
+ md: string;
9
+ lg: string;
10
+ };
6
11
  };
7
12
  input: {
8
13
  text: string;
@@ -28,6 +33,10 @@ interface SpectreGeneratedTokens {
28
33
  dangerBg: string;
29
34
  dangerBgHover: string;
30
35
  dangerText: string;
36
+ inverseBg: string;
37
+ inverseBgHover: string;
38
+ inverseText: string;
39
+ inverseBorder: string;
31
40
  };
32
41
  iconBox: {
33
42
  bg: string;
@@ -255,6 +264,18 @@ interface SpectreGeneratedTokens {
255
264
  focusRing: string;
256
265
  focusVisible: string;
257
266
  };
267
+ inverse: {
268
+ bg: string;
269
+ bgHover: string;
270
+ bgActive: string;
271
+ bgDisabled: string;
272
+ text: string;
273
+ textDisabled: string;
274
+ border: string;
275
+ borderDisabled: string;
276
+ focusRing: string;
277
+ focusVisible: string;
278
+ };
258
279
  };
259
280
  forms: {
260
281
  default: {
@@ -1137,6 +1158,97 @@ interface SpectreGeneratedTokens {
1137
1158
  '900': string;
1138
1159
  '950': string;
1139
1160
  };
1161
+ 'integration-ink': {
1162
+ '50': string;
1163
+ '100': string;
1164
+ '200': string;
1165
+ '300': string;
1166
+ '400': string;
1167
+ '500': string;
1168
+ '600': string;
1169
+ '700': string;
1170
+ '800': string;
1171
+ '900': string;
1172
+ '950': string;
1173
+ };
1174
+ 'integration-gunmetal': {
1175
+ '50': string;
1176
+ '100': string;
1177
+ '200': string;
1178
+ '300': string;
1179
+ '400': string;
1180
+ '500': string;
1181
+ '600': string;
1182
+ '700': string;
1183
+ '800': string;
1184
+ '900': string;
1185
+ '950': string;
1186
+ };
1187
+ 'integration-signal-blue': {
1188
+ '50': string;
1189
+ '100': string;
1190
+ '200': string;
1191
+ '300': string;
1192
+ '400': string;
1193
+ '500': string;
1194
+ '600': string;
1195
+ '700': string;
1196
+ '800': string;
1197
+ '900': string;
1198
+ '950': string;
1199
+ };
1200
+ 'integration-icy-blue': {
1201
+ '50': string;
1202
+ '100': string;
1203
+ '200': string;
1204
+ '300': string;
1205
+ '400': string;
1206
+ '500': string;
1207
+ '600': string;
1208
+ '700': string;
1209
+ '800': string;
1210
+ '900': string;
1211
+ '950': string;
1212
+ };
1213
+ 'phcdevworks-raspberry-red': {
1214
+ '50': string;
1215
+ '100': string;
1216
+ '200': string;
1217
+ '300': string;
1218
+ '400': string;
1219
+ '500': string;
1220
+ '600': string;
1221
+ '700': string;
1222
+ '800': string;
1223
+ '900': string;
1224
+ '950': string;
1225
+ };
1226
+ 'phcdevworks-deep-space-blue': {
1227
+ '50': string;
1228
+ '100': string;
1229
+ '200': string;
1230
+ '300': string;
1231
+ '400': string;
1232
+ '500': string;
1233
+ '600': string;
1234
+ '700': string;
1235
+ '800': string;
1236
+ '900': string;
1237
+ '950': string;
1238
+ };
1239
+ 'phcdevworks-paper': {
1240
+ '50': string;
1241
+ '100': string;
1242
+ '200': string;
1243
+ '300': string;
1244
+ '400': string;
1245
+ '500': string;
1246
+ '600': string;
1247
+ '700': string;
1248
+ '800': string;
1249
+ '900': string;
1250
+ '950': string;
1251
+ };
1140
1252
  };
1141
1253
  };
1142
1254
  space: {
@@ -1382,12 +1494,15 @@ interface SpectreGeneratedTokens {
1382
1494
  selected: string;
1383
1495
  active: string;
1384
1496
  divider: string;
1497
+ inverse: string;
1385
1498
  };
1386
1499
  link: {
1387
1500
  default: string;
1388
1501
  hover: string;
1389
1502
  active: string;
1390
1503
  visited: string;
1504
+ onInverse: string;
1505
+ onInverseHover: string;
1391
1506
  };
1392
1507
  text: {
1393
1508
  onPage: {
@@ -1404,6 +1519,10 @@ interface SpectreGeneratedTokens {
1404
1519
  meta: string;
1405
1520
  brand: string;
1406
1521
  };
1522
+ onInverse: {
1523
+ default: string;
1524
+ muted: string;
1525
+ };
1407
1526
  };
1408
1527
  layout: {
1409
1528
  section: {
@@ -1433,6 +1552,7 @@ interface SpectreGeneratedTokens {
1433
1552
  };
1434
1553
  maxWidth: string;
1435
1554
  maxWidthProse: string;
1555
+ maxWidthWide: string;
1436
1556
  };
1437
1557
  sidebar: {
1438
1558
  width: string;
@@ -1822,6 +1942,7 @@ interface ComponentTokens<Value = string> {
1822
1942
  card: {
1823
1943
  text: Value;
1824
1944
  textMuted: Value;
1945
+ padding: TokenScale;
1825
1946
  };
1826
1947
  input: {
1827
1948
  text: Value;
@@ -1895,6 +2016,7 @@ interface LayoutTokens {
1895
2016
  paddingInline: TokenScale;
1896
2017
  maxWidth: string;
1897
2018
  maxWidthProse: string;
2019
+ maxWidthWide: string;
1898
2020
  };
1899
2021
  sidebar: {
1900
2022
  width: string;