@wwtdev/bsds-css 3.3.0 → 3.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/dist/wwt-bsds-components.css +7 -1
- package/dist/wwt-bsds-components.min.css +1 -1
- package/dist/wwt-bsds-preset-v4.css +16 -1
- package/dist/wwt-bsds-preset.js +109 -47
- package/dist/wwt-bsds-tokens.css +279 -23
- package/dist/wwt-bsds-tokens.min.css +1 -1
- package/dist/wwt-bsds.css +286 -24
- package/dist/wwt-bsds.min.css +1 -1
- package/package.json +1 -1
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
--color-blue-300: var(--bs-blue-300);
|
|
20
20
|
--color-blue-400: var(--bs-blue-400);
|
|
21
21
|
--color-blue-500: var(--bs-blue-500);
|
|
22
|
+
--color-blue-10-dark: var(--bs-blue-10-dark);
|
|
22
23
|
|
|
23
24
|
--color-charcoal-100: var(--bs-charcoal-100);
|
|
24
25
|
--color-charcoal-200: var(--bs-charcoal-200);
|
|
@@ -31,13 +32,14 @@
|
|
|
31
32
|
--color-cobalt-200: var(--bs-cobalt-200);
|
|
32
33
|
--color-cobalt-300: var(--bs-cobalt-300);
|
|
33
34
|
--color-cobalt-400: var(--bs-cobalt-400);
|
|
35
|
+
--color-cobalt-10-dark: var(--bs-cobalt-10-dark);
|
|
34
36
|
|
|
35
37
|
--color-gold-10: var(--bs-gold-10);
|
|
36
38
|
--color-gold-100: var(--bs-gold-100);
|
|
37
39
|
--color-gold-200: var(--bs-gold-200);
|
|
38
40
|
--color-gold-300: var(--bs-gold-300);
|
|
39
41
|
--color-gold-400: var(--bs-gold-400);
|
|
40
|
-
--color-gold-
|
|
42
|
+
--color-gold-10-dark: var(--bs-gold-10-dark);
|
|
41
43
|
|
|
42
44
|
--color-gray-50: var(--bs-gray-50);
|
|
43
45
|
--color-gray-100: var(--bs-gray-100);
|
|
@@ -53,6 +55,7 @@
|
|
|
53
55
|
--color-green-300: var(--bs-green-300);
|
|
54
56
|
--color-green-400: var(--bs-green-400);
|
|
55
57
|
--color-green-500: var(--bs-green-500);
|
|
58
|
+
--color-green-10-dark: var(--bs-green-10-dark);
|
|
56
59
|
|
|
57
60
|
--color-maroon-10: var(--bs-maroon-10);
|
|
58
61
|
--color-maroon-100: var(--bs-maroon-100);
|
|
@@ -60,18 +63,21 @@
|
|
|
60
63
|
--color-maroon-300: var(--bs-maroon-300);
|
|
61
64
|
--color-maroon-400: var(--bs-maroon-400);
|
|
62
65
|
--color-maroon-500: var(--bs-maroon-500);
|
|
66
|
+
--color-maroon-10-dark: var(--bs-maroon-10-dark);
|
|
63
67
|
|
|
64
68
|
--color-midnight-10: var(--bs-midnight-10);
|
|
65
69
|
--color-midnight-100: var(--bs-midnight-100);
|
|
66
70
|
--color-midnight-200: var(--bs-midnight-200);
|
|
67
71
|
--color-midnight-300: var(--bs-midnight-300);
|
|
68
72
|
--color-midnight-400: var(--bs-midnight-400);
|
|
73
|
+
--color-midnight-10-dark: var(--bs-midnight-10-dark);
|
|
69
74
|
|
|
70
75
|
--color-navy-10: var(--bs-navy-10);
|
|
71
76
|
--color-navy-100: var(--bs-navy-100);
|
|
72
77
|
--color-navy-200: var(--bs-navy-200);
|
|
73
78
|
--color-navy-300: var(--bs-navy-300);
|
|
74
79
|
--color-navy-400: var(--bs-navy-400);
|
|
80
|
+
--color-navy-10-dark: var(--bs-navy-10-dark);
|
|
75
81
|
|
|
76
82
|
--color-orange-10: var(--bs-orange-10);
|
|
77
83
|
--color-orange-100: var(--bs-orange-100);
|
|
@@ -80,12 +86,14 @@
|
|
|
80
86
|
--color-orange-400: var(--bs-orange-400);
|
|
81
87
|
--color-orange-500: var(--bs-orange-500);
|
|
82
88
|
--color-orange-brand: var(--bs-orange-brand);
|
|
89
|
+
--color-orange-10-dark: var(--bs-orange-10-dark);
|
|
83
90
|
|
|
84
91
|
--color-orchid-10: var(--bs-orchid-10);
|
|
85
92
|
--color-orchid-100: var(--bs-orchid-100);
|
|
86
93
|
--color-orchid-200: var(--bs-orchid-200);
|
|
87
94
|
--color-orchid-300: var(--bs-orchid-300);
|
|
88
95
|
--color-orchid-400: var(--bs-orchid-400);
|
|
96
|
+
--color-orchid-10-dark: var(--bs-orchid-10-dark);
|
|
89
97
|
|
|
90
98
|
--color-pink-10: var(--bs-pink-10);
|
|
91
99
|
--color-pink-100: var(--bs-pink-100);
|
|
@@ -93,18 +101,21 @@
|
|
|
93
101
|
--color-pink-300: var(--bs-pink-300);
|
|
94
102
|
--color-pink-400: var(--bs-pink-400);
|
|
95
103
|
--color-pink-500: var(--bs-pink-500);
|
|
104
|
+
--color-pink-10-dark: var(--bs-pink-10-dark);
|
|
96
105
|
|
|
97
106
|
--color-plum-10: var(--bs-plum-10);
|
|
98
107
|
--color-plum-100: var(--bs-plum-100);
|
|
99
108
|
--color-plum-200: var(--bs-plum-200);
|
|
100
109
|
--color-plum-300: var(--bs-plum-300);
|
|
101
110
|
--color-plum-400: var(--bs-plum-400);
|
|
111
|
+
--color-plum-10-dark: var(--bs-plum-10-dark);
|
|
102
112
|
|
|
103
113
|
--color-purple-10: var(--bs-purple-10);
|
|
104
114
|
--color-purple-100: var(--bs-purple-100);
|
|
105
115
|
--color-purple-200: var(--bs-purple-200);
|
|
106
116
|
--color-purple-300: var(--bs-purple-300);
|
|
107
117
|
--color-purple-400: var(--bs-purple-400);
|
|
118
|
+
--color-purple-10-dark: var(--bs-purple-10-dark);
|
|
108
119
|
|
|
109
120
|
--color-red-10: var(--bs-red-10);
|
|
110
121
|
--color-red-100: var(--bs-red-100);
|
|
@@ -112,12 +123,14 @@
|
|
|
112
123
|
--color-red-300: var(--bs-red-300);
|
|
113
124
|
--color-red-400: var(--bs-red-400);
|
|
114
125
|
--color-red-500: var(--bs-red-500);
|
|
126
|
+
--color-red-10-dark: var(--bs-red-10-dark);
|
|
115
127
|
|
|
116
128
|
--color-royal-10: var(--bs-royal-10);
|
|
117
129
|
--color-royal-100: var(--bs-royal-100);
|
|
118
130
|
--color-royal-200: var(--bs-royal-200);
|
|
119
131
|
--color-royal-300: var(--bs-royal-300);
|
|
120
132
|
--color-royal-400: var(--bs-royal-400);
|
|
133
|
+
--color-royal-10-dark: var(--bs-royal-10-dark);
|
|
121
134
|
|
|
122
135
|
--color-slate-400: var(--bs-slate-400);
|
|
123
136
|
--color-slate-500: var(--bs-slate-500);
|
|
@@ -128,6 +141,7 @@
|
|
|
128
141
|
--color-violet-200: var(--bs-violet-200);
|
|
129
142
|
--color-violet-300: var(--bs-violet-300);
|
|
130
143
|
--color-violet-400: var(--bs-violet-400);
|
|
144
|
+
--color-violet-10-dark: var(--bs-violet-10-dark);
|
|
131
145
|
|
|
132
146
|
--color-yellow-10: var(--bs-yellow-10);
|
|
133
147
|
--color-yellow-100: var(--bs-yellow-100);
|
|
@@ -135,6 +149,7 @@
|
|
|
135
149
|
--color-yellow-300: var(--bs-yellow-300);
|
|
136
150
|
--color-yellow-400: var(--bs-yellow-400);
|
|
137
151
|
--color-yellow-500: var(--bs-yellow-500);
|
|
152
|
+
--color-yellow-10-dark: var(--bs-yellow-10-dark);
|
|
138
153
|
|
|
139
154
|
--color-shadow-primary: var(--bs-shadow-primary);
|
|
140
155
|
--color-shadow-secondary: var(--bs-shadow-secondary);
|
package/dist/wwt-bsds-preset.js
CHANGED
|
@@ -11,12 +11,13 @@ var colorPrimitives = {
|
|
|
11
11
|
"white-10": "rgba(255, 255, 255, 0.1)",
|
|
12
12
|
black: "#0A0B19",
|
|
13
13
|
blue: {
|
|
14
|
-
10: "
|
|
14
|
+
10: "#F6FBFE",
|
|
15
15
|
100: "#99CFF7",
|
|
16
16
|
200: "#66B6F2",
|
|
17
17
|
300: "#339EEE",
|
|
18
18
|
400: "#0086EA",
|
|
19
|
-
500: "#006DC7"
|
|
19
|
+
500: "#006DC7",
|
|
20
|
+
"10-dark": "#16202B"
|
|
20
21
|
},
|
|
21
22
|
charcoal: {
|
|
22
23
|
100: "#F5F5F6",
|
|
@@ -26,19 +27,20 @@ var colorPrimitives = {
|
|
|
26
27
|
500: "#40454D"
|
|
27
28
|
},
|
|
28
29
|
cobalt: {
|
|
29
|
-
10: "
|
|
30
|
+
10: "#FAF9FE",
|
|
30
31
|
100: "#C9C5F0",
|
|
31
32
|
200: "#948BE1",
|
|
32
33
|
300: "#5F52D3",
|
|
33
|
-
400: "#2918C4"
|
|
34
|
+
400: "#2918C4",
|
|
35
|
+
"10-dark": "#1B1A29"
|
|
34
36
|
},
|
|
35
37
|
gold: {
|
|
36
|
-
10: "
|
|
37
|
-
100: "#
|
|
38
|
-
200: "#
|
|
39
|
-
300: "#
|
|
40
|
-
400: "#
|
|
41
|
-
|
|
38
|
+
10: "#FDFBF9",
|
|
39
|
+
100: "#EBDFD4",
|
|
40
|
+
200: "#E0C7AC",
|
|
41
|
+
300: "#CCA175",
|
|
42
|
+
400: "#997958",
|
|
43
|
+
"10-dark": "#252223"
|
|
42
44
|
},
|
|
43
45
|
gray: {
|
|
44
46
|
50: "#F7F7FC",
|
|
@@ -50,87 +52,98 @@ var colorPrimitives = {
|
|
|
50
52
|
500: "#292940"
|
|
51
53
|
},
|
|
52
54
|
green: {
|
|
53
|
-
10: "
|
|
55
|
+
10: "#F5FAF9",
|
|
54
56
|
100: "#ABCFCC",
|
|
55
57
|
200: "#72B9A8",
|
|
56
58
|
300: "#39A283",
|
|
57
59
|
400: "#008B5D",
|
|
58
|
-
500: "#00744D"
|
|
60
|
+
500: "#00744D",
|
|
61
|
+
"10-dark": "#111D1E"
|
|
59
62
|
},
|
|
60
63
|
maroon: {
|
|
61
|
-
10: "
|
|
64
|
+
10: "#FEF6F7",
|
|
62
65
|
100: "#EBC8C8",
|
|
63
66
|
200: "#D79191",
|
|
64
67
|
300: "#C35B5B",
|
|
65
68
|
400: "#AF2424",
|
|
66
|
-
500: "#A70C0C"
|
|
69
|
+
500: "#A70C0C",
|
|
70
|
+
"10-dark": "#271418"
|
|
67
71
|
},
|
|
68
72
|
midnight: {
|
|
69
|
-
10: "
|
|
73
|
+
10: "#F7F7FA",
|
|
70
74
|
100: "#C6C4D8",
|
|
71
75
|
200: "#8D89B1",
|
|
72
76
|
300: "#494382",
|
|
73
|
-
400: "#1C1463"
|
|
77
|
+
400: "#1C1463",
|
|
78
|
+
"10-dark": "#1B1A23"
|
|
74
79
|
},
|
|
75
80
|
navy: {
|
|
76
|
-
10: "
|
|
81
|
+
10: "#F8F8F9",
|
|
77
82
|
100: "#C6C6D1",
|
|
78
83
|
200: "#8D8EA1",
|
|
79
84
|
300: "#555775",
|
|
80
|
-
400: "#1D1E48"
|
|
85
|
+
400: "#1D1E48",
|
|
86
|
+
"10-dark": "#1B1B21"
|
|
81
87
|
},
|
|
82
88
|
orange: {
|
|
83
|
-
10: "
|
|
89
|
+
10: "#FFF9F7",
|
|
84
90
|
100: "#F3C4A8",
|
|
85
91
|
200: "#F7A17B",
|
|
86
92
|
300: "#F97C4C",
|
|
87
|
-
400: "#
|
|
93
|
+
400: "#ed5615",
|
|
88
94
|
500: "#C33D04",
|
|
89
|
-
"brand": "#FF5100"
|
|
95
|
+
"brand": "#FF5100",
|
|
96
|
+
"10-dark": "#271D1D"
|
|
90
97
|
},
|
|
91
98
|
orchid: {
|
|
92
|
-
10: "
|
|
99
|
+
10: "#FBF7FF",
|
|
93
100
|
100: "#DEBFFF",
|
|
94
101
|
200: "#BE80FF",
|
|
95
102
|
300: "#9D40FF",
|
|
96
|
-
400: "#7D00FF"
|
|
103
|
+
400: "#7D00FF",
|
|
104
|
+
"10-dark": "#20192D"
|
|
97
105
|
},
|
|
98
106
|
pink: {
|
|
99
|
-
10: "
|
|
107
|
+
10: "#FEF7FA",
|
|
100
108
|
100: "#F6CBE0",
|
|
101
109
|
200: "#EB7EAF",
|
|
102
110
|
300: "#E45E9B",
|
|
103
111
|
400: "#E31C79",
|
|
104
|
-
500: "#D11A6F"
|
|
112
|
+
500: "#D11A6F",
|
|
113
|
+
"10-dark": "#261923"
|
|
105
114
|
},
|
|
106
115
|
plum: {
|
|
107
|
-
10: "
|
|
116
|
+
10: "#F7F6FB",
|
|
108
117
|
100: "#A499CF",
|
|
109
118
|
200: "#7766B7",
|
|
110
119
|
300: "#49339F",
|
|
111
|
-
400: "#1C0087"
|
|
120
|
+
400: "#1C0087",
|
|
121
|
+
"10-dark": "#181624"
|
|
112
122
|
},
|
|
113
123
|
purple: {
|
|
114
|
-
10: "
|
|
124
|
+
10: "#FBF8FD",
|
|
115
125
|
100: "#E0C5EF",
|
|
116
126
|
200: "#BF8ADF",
|
|
117
127
|
300: "#A154D0",
|
|
118
|
-
400: "#8212C4"
|
|
128
|
+
400: "#8212C4",
|
|
129
|
+
"10-dark": "#211A29"
|
|
119
130
|
},
|
|
120
131
|
red: {
|
|
121
|
-
10: "
|
|
132
|
+
10: "#FFF9F9",
|
|
122
133
|
100: "#F8A9AA",
|
|
123
134
|
200: "#F57E7F",
|
|
124
135
|
300: "#F15355",
|
|
125
136
|
400: "#EE282A",
|
|
126
|
-
500: "#D91214"
|
|
137
|
+
500: "#D91214",
|
|
138
|
+
"10-dark": "#27191D"
|
|
127
139
|
},
|
|
128
140
|
royal: {
|
|
129
|
-
10: "
|
|
141
|
+
10: "#F5F6FC",
|
|
130
142
|
100: "#C5CCEB",
|
|
131
143
|
200: "#7585D1",
|
|
132
144
|
300: "#5365C4",
|
|
133
|
-
400: "#162FB4"
|
|
145
|
+
400: "#162FB4",
|
|
146
|
+
"10-dark": "#181A27"
|
|
134
147
|
},
|
|
135
148
|
slate: {
|
|
136
149
|
400: "#22222E",
|
|
@@ -138,19 +151,21 @@ var colorPrimitives = {
|
|
|
138
151
|
600: "#0B0B10"
|
|
139
152
|
},
|
|
140
153
|
violet: {
|
|
141
|
-
10: "
|
|
154
|
+
10: "#F8F6FA",
|
|
142
155
|
100: "#CBC0DA",
|
|
143
156
|
200: "#9983B6",
|
|
144
157
|
300: "#634291",
|
|
145
|
-
400: "#330072"
|
|
158
|
+
400: "#330072",
|
|
159
|
+
"10-dark": "#1C1924"
|
|
146
160
|
},
|
|
147
161
|
yellow: {
|
|
148
|
-
10: "
|
|
162
|
+
10: "#FFFBF3",
|
|
149
163
|
100: "#FDEED3",
|
|
150
164
|
200: "#FCDEA7",
|
|
151
165
|
300: "#F8C464",
|
|
152
166
|
400: "#C18300",
|
|
153
|
-
500: "#805A14"
|
|
167
|
+
500: "#805A14",
|
|
168
|
+
"10-dark": "#282014"
|
|
154
169
|
},
|
|
155
170
|
"shadow-primary": "rgba(0, 0, 0, 0.06)",
|
|
156
171
|
"shadow-secondary": "rgba(28, 0, 135, 0.2)"
|
|
@@ -408,28 +423,75 @@ var lineHeight = {
|
|
|
408
423
|
};
|
|
409
424
|
var spacing = {
|
|
410
425
|
"": "0.25rem",
|
|
426
|
+
"px": "1px",
|
|
411
427
|
"0": "calc(var(--bs-space) * 0)",
|
|
412
428
|
// 0
|
|
429
|
+
"0.5": "calc(var(--bs-space) * 0.5)",
|
|
430
|
+
// 0.125rem | 2px
|
|
413
431
|
"1": "calc(var(--bs-space) * 1)",
|
|
414
|
-
// 0.25rem
|
|
432
|
+
// 0.25rem | 4px
|
|
433
|
+
"1.5": "calc(var(--bs-space) * 1.5)",
|
|
434
|
+
// 0.375rem | 6px
|
|
415
435
|
"2": "calc(var(--bs-space) * 2)",
|
|
416
|
-
// 0.5rem
|
|
436
|
+
// 0.5rem | 8px
|
|
437
|
+
"2.5": "calc(var(--bs-space) * 2.5)",
|
|
438
|
+
// 0.625rem | 10px
|
|
417
439
|
"3": "calc(var(--bs-space) * 3)",
|
|
418
|
-
// 0.75rem
|
|
440
|
+
// 0.75rem | 12px
|
|
441
|
+
"3.5": "calc(var(--bs-space) * 3.5)",
|
|
442
|
+
// 0.875rem | 14px
|
|
419
443
|
"4": "calc(var(--bs-space) * 4)",
|
|
420
|
-
// 1rem
|
|
444
|
+
// 1rem | 16px
|
|
445
|
+
"5": "calc(var(--bs-space) * 5)",
|
|
446
|
+
// 1.25rem | 20px
|
|
421
447
|
"6": "calc(var(--bs-space) * 6)",
|
|
422
|
-
// 1.5rem
|
|
448
|
+
// 1.5rem | 24px
|
|
449
|
+
"7": "calc(var(--bs-space) * 7)",
|
|
450
|
+
// 1.75rem | 28px
|
|
423
451
|
"8": "calc(var(--bs-space) * 8)",
|
|
424
|
-
// 2rem
|
|
452
|
+
// 2rem | 32px
|
|
453
|
+
"9": "calc(var(--bs-space) * 9)",
|
|
454
|
+
// 2.25rem | 36px
|
|
455
|
+
"10": "calc(var(--bs-space) * 10)",
|
|
456
|
+
// 2.5rem | 40px
|
|
457
|
+
"11": "calc(var(--bs-space) * 11)",
|
|
458
|
+
// 2.75rem | 44px
|
|
425
459
|
"12": "calc(var(--bs-space) * 12)",
|
|
426
|
-
// 3rem
|
|
460
|
+
// 3rem | 48px
|
|
461
|
+
"14": "calc(var(--bs-space) * 14)",
|
|
462
|
+
// 3.5rem | 56px
|
|
427
463
|
"16": "calc(var(--bs-space) * 16)",
|
|
428
|
-
// 4rem
|
|
464
|
+
// 4rem | 64px
|
|
465
|
+
"20": "calc(var(--bs-space) * 20)",
|
|
466
|
+
// 5rem | 80px
|
|
429
467
|
"24": "calc(var(--bs-space) * 24)",
|
|
430
|
-
// 6rem
|
|
468
|
+
// 6rem | 96px
|
|
469
|
+
"28": "calc(var(--bs-space) * 28)",
|
|
470
|
+
// 7rem | 112px
|
|
431
471
|
"32": "calc(var(--bs-space) * 32)",
|
|
432
|
-
// 8rem
|
|
472
|
+
// 8rem | 128px
|
|
473
|
+
"36": "calc(var(--bs-space) * 36)",
|
|
474
|
+
// 9rem | 144px
|
|
475
|
+
"40": "calc(var(--bs-space) * 40)",
|
|
476
|
+
// 10rem | 160px
|
|
477
|
+
"44": "calc(var(--bs-space) * 44)",
|
|
478
|
+
// 11rem | 176px
|
|
479
|
+
"48": "calc(var(--bs-space) * 48)",
|
|
480
|
+
// 12rem | 192px
|
|
481
|
+
"52": "calc(var(--bs-space) * 52)",
|
|
482
|
+
// 13rem | 208px
|
|
483
|
+
"56": "calc(var(--bs-space) * 56)",
|
|
484
|
+
// 14rem | 224px
|
|
485
|
+
"60": "calc(var(--bs-space) * 60)",
|
|
486
|
+
// 15rem | 240px
|
|
487
|
+
"64": "calc(var(--bs-space) * 64)",
|
|
488
|
+
// 16rem | 256px
|
|
489
|
+
"72": "calc(var(--bs-space) * 72)",
|
|
490
|
+
// 18rem | 288px
|
|
491
|
+
"80": "calc(var(--bs-space) * 80)",
|
|
492
|
+
// 20rem | 320px
|
|
493
|
+
"96": "calc(var(--bs-space) * 96)",
|
|
494
|
+
// 24rem | 384px
|
|
433
495
|
"none": "var(--bs-space-0)",
|
|
434
496
|
"3xs": "var(--bs-space-1)",
|
|
435
497
|
"2xs": "var(--bs-space-2)",
|