@wwtdev/bsds-css 3.4.0-rc.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.
Files changed (9) hide show
  1. package/dist/wwt-bsds-components.css +1 -1
  2. package/dist/wwt-bsds-components.min.css +1 -1
  3. package/dist/wwt-bsds-preset-v4.css +16 -0
  4. package/dist/wwt-bsds-preset.js +48 -32
  5. package/dist/wwt-bsds-tokens.css +64 -27
  6. package/dist/wwt-bsds-tokens.min.css +1 -1
  7. package/dist/wwt-bsds.css +65 -28
  8. package/dist/wwt-bsds.min.css +1 -1
  9. package/package.json +1 -1
package/dist/wwt-bsds-preset-v4.css CHANGED
@@ -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,12 +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);
42
+ --color-gold-10-dark: var(--bs-gold-10-dark);
40
43
 
41
44
  --color-gray-50: var(--bs-gray-50);
42
45
  --color-gray-100: var(--bs-gray-100);
@@ -52,6 +55,7 @@
52
55
  --color-green-300: var(--bs-green-300);
53
56
  --color-green-400: var(--bs-green-400);
54
57
  --color-green-500: var(--bs-green-500);
58
+ --color-green-10-dark: var(--bs-green-10-dark);
55
59
 
56
60
  --color-maroon-10: var(--bs-maroon-10);
57
61
  --color-maroon-100: var(--bs-maroon-100);
@@ -59,18 +63,21 @@
59
63
  --color-maroon-300: var(--bs-maroon-300);
60
64
  --color-maroon-400: var(--bs-maroon-400);
61
65
  --color-maroon-500: var(--bs-maroon-500);
66
+ --color-maroon-10-dark: var(--bs-maroon-10-dark);
62
67
 
63
68
  --color-midnight-10: var(--bs-midnight-10);
64
69
  --color-midnight-100: var(--bs-midnight-100);
65
70
  --color-midnight-200: var(--bs-midnight-200);
66
71
  --color-midnight-300: var(--bs-midnight-300);
67
72
  --color-midnight-400: var(--bs-midnight-400);
73
+ --color-midnight-10-dark: var(--bs-midnight-10-dark);
68
74
 
69
75
  --color-navy-10: var(--bs-navy-10);
70
76
  --color-navy-100: var(--bs-navy-100);
71
77
  --color-navy-200: var(--bs-navy-200);
72
78
  --color-navy-300: var(--bs-navy-300);
73
79
  --color-navy-400: var(--bs-navy-400);
80
+ --color-navy-10-dark: var(--bs-navy-10-dark);
74
81
 
75
82
  --color-orange-10: var(--bs-orange-10);
76
83
  --color-orange-100: var(--bs-orange-100);
@@ -79,12 +86,14 @@
79
86
  --color-orange-400: var(--bs-orange-400);
80
87
  --color-orange-500: var(--bs-orange-500);
81
88
  --color-orange-brand: var(--bs-orange-brand);
89
+ --color-orange-10-dark: var(--bs-orange-10-dark);
82
90
 
83
91
  --color-orchid-10: var(--bs-orchid-10);
84
92
  --color-orchid-100: var(--bs-orchid-100);
85
93
  --color-orchid-200: var(--bs-orchid-200);
86
94
  --color-orchid-300: var(--bs-orchid-300);
87
95
  --color-orchid-400: var(--bs-orchid-400);
96
+ --color-orchid-10-dark: var(--bs-orchid-10-dark);
88
97
 
89
98
  --color-pink-10: var(--bs-pink-10);
90
99
  --color-pink-100: var(--bs-pink-100);
@@ -92,18 +101,21 @@
92
101
  --color-pink-300: var(--bs-pink-300);
93
102
  --color-pink-400: var(--bs-pink-400);
94
103
  --color-pink-500: var(--bs-pink-500);
104
+ --color-pink-10-dark: var(--bs-pink-10-dark);
95
105
 
96
106
  --color-plum-10: var(--bs-plum-10);
97
107
  --color-plum-100: var(--bs-plum-100);
98
108
  --color-plum-200: var(--bs-plum-200);
99
109
  --color-plum-300: var(--bs-plum-300);
100
110
  --color-plum-400: var(--bs-plum-400);
111
+ --color-plum-10-dark: var(--bs-plum-10-dark);
101
112
 
102
113
  --color-purple-10: var(--bs-purple-10);
103
114
  --color-purple-100: var(--bs-purple-100);
104
115
  --color-purple-200: var(--bs-purple-200);
105
116
  --color-purple-300: var(--bs-purple-300);
106
117
  --color-purple-400: var(--bs-purple-400);
118
+ --color-purple-10-dark: var(--bs-purple-10-dark);
107
119
 
108
120
  --color-red-10: var(--bs-red-10);
109
121
  --color-red-100: var(--bs-red-100);
@@ -111,12 +123,14 @@
111
123
  --color-red-300: var(--bs-red-300);
112
124
  --color-red-400: var(--bs-red-400);
113
125
  --color-red-500: var(--bs-red-500);
126
+ --color-red-10-dark: var(--bs-red-10-dark);
114
127
 
115
128
  --color-royal-10: var(--bs-royal-10);
116
129
  --color-royal-100: var(--bs-royal-100);
117
130
  --color-royal-200: var(--bs-royal-200);
118
131
  --color-royal-300: var(--bs-royal-300);
119
132
  --color-royal-400: var(--bs-royal-400);
133
+ --color-royal-10-dark: var(--bs-royal-10-dark);
120
134
 
121
135
  --color-slate-400: var(--bs-slate-400);
122
136
  --color-slate-500: var(--bs-slate-500);
@@ -127,6 +141,7 @@
127
141
  --color-violet-200: var(--bs-violet-200);
128
142
  --color-violet-300: var(--bs-violet-300);
129
143
  --color-violet-400: var(--bs-violet-400);
144
+ --color-violet-10-dark: var(--bs-violet-10-dark);
130
145
 
131
146
  --color-yellow-10: var(--bs-yellow-10);
132
147
  --color-yellow-100: var(--bs-yellow-100);
@@ -134,6 +149,7 @@
134
149
  --color-yellow-300: var(--bs-yellow-300);
135
150
  --color-yellow-400: var(--bs-yellow-400);
136
151
  --color-yellow-500: var(--bs-yellow-500);
152
+ --color-yellow-10-dark: var(--bs-yellow-10-dark);
137
153
 
138
154
  --color-shadow-primary: var(--bs-shadow-primary);
139
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: "rgba(102, 182, 242, 0.1)",
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,18 +27,20 @@ var colorPrimitives = {
26
27
  500: "#40454D"
27
28
  },
28
29
  cobalt: {
29
- 10: "rgba(148, 139, 225, 0.1)",
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: "rgba(224, 199, 172, 0.1)",
38
+ 10: "#FDFBF9",
37
39
  100: "#EBDFD4",
38
40
  200: "#E0C7AC",
39
41
  300: "#CCA175",
40
- 400: "#997958"
42
+ 400: "#997958",
43
+ "10-dark": "#252223"
41
44
  },
42
45
  gray: {
43
46
  50: "#F7F7FC",
@@ -49,87 +52,98 @@ var colorPrimitives = {
49
52
  500: "#292940"
50
53
  },
51
54
  green: {
52
- 10: "rgba(57, 162, 131, 0.1)",
55
+ 10: "#F5FAF9",
53
56
  100: "#ABCFCC",
54
57
  200: "#72B9A8",
55
58
  300: "#39A283",
56
59
  400: "#008B5D",
57
- 500: "#00744D"
60
+ 500: "#00744D",
61
+ "10-dark": "#111D1E"
58
62
  },
59
63
  maroon: {
60
- 10: "rgba(215, 145, 145, 0.1)",
64
+ 10: "#FEF6F7",
61
65
  100: "#EBC8C8",
62
66
  200: "#D79191",
63
67
  300: "#C35B5B",
64
68
  400: "#AF2424",
65
- 500: "#A70C0C"
69
+ 500: "#A70C0C",
70
+ "10-dark": "#271418"
66
71
  },
67
72
  midnight: {
68
- 10: "rgba(141, 137, 177, 0.1)",
73
+ 10: "#F7F7FA",
69
74
  100: "#C6C4D8",
70
75
  200: "#8D89B1",
71
76
  300: "#494382",
72
- 400: "#1C1463"
77
+ 400: "#1C1463",
78
+ "10-dark": "#1B1A23"
73
79
  },
74
80
  navy: {
75
- 10: "rgba(141, 142, 161, 0.1)",
81
+ 10: "#F8F8F9",
76
82
  100: "#C6C6D1",
77
83
  200: "#8D8EA1",
78
84
  300: "#555775",
79
- 400: "#1D1E48"
85
+ 400: "#1D1E48",
86
+ "10-dark": "#1B1B21"
80
87
  },
81
88
  orange: {
82
- 10: "rgba(247, 161, 123, 0.1)",
89
+ 10: "#FFF9F7",
83
90
  100: "#F3C4A8",
84
91
  200: "#F7A17B",
85
92
  300: "#F97C4C",
86
93
  400: "#ed5615",
87
94
  500: "#C33D04",
88
- "brand": "#FF5100"
95
+ "brand": "#FF5100",
96
+ "10-dark": "#271D1D"
89
97
  },
90
98
  orchid: {
91
- 10: "rgba(190, 128, 255, 0.1)",
99
+ 10: "#FBF7FF",
92
100
  100: "#DEBFFF",
93
101
  200: "#BE80FF",
94
102
  300: "#9D40FF",
95
- 400: "#7D00FF"
103
+ 400: "#7D00FF",
104
+ "10-dark": "#20192D"
96
105
  },
97
106
  pink: {
98
- 10: "rgba(235, 126, 175, 0.1)",
107
+ 10: "#FEF7FA",
99
108
  100: "#F6CBE0",
100
109
  200: "#EB7EAF",
101
110
  300: "#E45E9B",
102
111
  400: "#E31C79",
103
- 500: "#D11A6F"
112
+ 500: "#D11A6F",
113
+ "10-dark": "#261923"
104
114
  },
105
115
  plum: {
106
- 10: "rgba(119, 102, 183, 0.1)",
116
+ 10: "#F7F6FB",
107
117
  100: "#A499CF",
108
118
  200: "#7766B7",
109
119
  300: "#49339F",
110
- 400: "#1C0087"
120
+ 400: "#1C0087",
121
+ "10-dark": "#181624"
111
122
  },
112
123
  purple: {
113
- 10: "rgba(191, 138, 223, 0.1)",
124
+ 10: "#FBF8FD",
114
125
  100: "#E0C5EF",
115
126
  200: "#BF8ADF",
116
127
  300: "#A154D0",
117
- 400: "#8212C4"
128
+ 400: "#8212C4",
129
+ "10-dark": "#211A29"
118
130
  },
119
131
  red: {
120
- 10: "rgba(245, 126, 127, 0.1)",
132
+ 10: "#FFF9F9",
121
133
  100: "#F8A9AA",
122
134
  200: "#F57E7F",
123
135
  300: "#F15355",
124
136
  400: "#EE282A",
125
- 500: "#D91214"
137
+ 500: "#D91214",
138
+ "10-dark": "#27191D"
126
139
  },
127
140
  royal: {
128
- 10: "rgba(117, 133, 209, 0.1)",
141
+ 10: "#F5F6FC",
129
142
  100: "#C5CCEB",
130
143
  200: "#7585D1",
131
144
  300: "#5365C4",
132
- 400: "#162FB4"
145
+ 400: "#162FB4",
146
+ "10-dark": "#181A27"
133
147
  },
134
148
  slate: {
135
149
  400: "#22222E",
@@ -137,19 +151,21 @@ var colorPrimitives = {
137
151
  600: "#0B0B10"
138
152
  },
139
153
  violet: {
140
- 10: "rgba(153, 131, 182, 0.1)",
154
+ 10: "#F8F6FA",
141
155
  100: "#CBC0DA",
142
156
  200: "#9983B6",
143
157
  300: "#634291",
144
- 400: "#330072"
158
+ 400: "#330072",
159
+ "10-dark": "#1C1924"
145
160
  },
146
161
  yellow: {
147
- 10: "rgba(255, 184, 52, 0.1)",
162
+ 10: "#FFFBF3",
148
163
  100: "#FDEED3",
149
164
  200: "#FCDEA7",
150
165
  300: "#F8C464",
151
166
  400: "#C18300",
152
- 500: "#805A14"
167
+ 500: "#805A14",
168
+ "10-dark": "#282014"
153
169
  },
154
170
  "shadow-primary": "rgba(0, 0, 0, 0.06)",
155
171
  "shadow-secondary": "rgba(28, 0, 135, 0.2)"
package/dist/wwt-bsds-tokens.css CHANGED
@@ -9,27 +9,30 @@
9
9
  --bs-white: #ffffff;
10
10
  --bs-white-10: rgba(255, 255, 255, 0.1);
11
11
  --bs-black: #0a0b19;
12
- --bs-blue-10: rgba(102, 182, 242, 0.1);
12
+ --bs-blue-10: #f6fbfe;
13
13
  --bs-blue-100: #99cff7;
14
14
  --bs-blue-200: #66b6f2;
15
15
  --bs-blue-300: #339eee;
16
16
  --bs-blue-400: #0086ea;
17
17
  --bs-blue-500: #006dc7;
18
+ --bs-blue-10-dark: #16202b;
18
19
  --bs-charcoal-100: #f5f5f6;
19
20
  --bs-charcoal-200: #ececec;
20
21
  --bs-charcoal-300: #b3b5b8;
21
22
  --bs-charcoal-400: #5f6266;
22
23
  --bs-charcoal-500: #40454d;
23
- --bs-cobalt-10: rgba(148, 139, 225, 0.1);
24
+ --bs-cobalt-10: #faf9fe;
24
25
  --bs-cobalt-100: #c9c5f0;
25
26
  --bs-cobalt-200: #948be1;
26
27
  --bs-cobalt-300: #5f52d3;
27
28
  --bs-cobalt-400: #2918c4;
28
- --bs-gold-10: rgba(224, 199, 172, 0.1);
29
+ --bs-cobalt-10-dark: #1b1a29;
30
+ --bs-gold-10: #fdfbf9;
29
31
  --bs-gold-100: #ebdfd4;
30
32
  --bs-gold-200: #e0c7ac;
31
33
  --bs-gold-300: #cca175;
32
34
  --bs-gold-400: #997958;
35
+ --bs-gold-10-dark: #252223;
33
36
  --bs-gray-50: #f7f7fc;
34
37
  --bs-gray-100: #f0f0fa;
35
38
  --bs-gray-150: #dcdde9;
@@ -37,81 +40,94 @@
37
40
  --bs-gray-300: #a3a4b7;
38
41
  --bs-gray-400: #4e4f5f;
39
42
  --bs-gray-500: #292940;
40
- --bs-green-10: rgba(57, 162, 131, 0.1);
43
+ --bs-green-10: #f5faf9;
41
44
  --bs-green-100: #abcfcc;
42
45
  --bs-green-200: #72b9a8;
43
46
  --bs-green-300: #39a283;
44
47
  --bs-green-400: #008b5d;
45
48
  --bs-green-500: #00744d;
46
- --bs-maroon-10: rgba(215, 145, 145, 0.1);
49
+ --bs-green-10-dark: #111d1e;
50
+ --bs-maroon-10: #fef6f7;
47
51
  --bs-maroon-100: #ebc8c8;
48
52
  --bs-maroon-200: #d79191;
49
53
  --bs-maroon-300: #c35b5b;
50
54
  --bs-maroon-400: #af2424;
51
55
  --bs-maroon-500: #a70c0c;
52
- --bs-midnight-10: rgba(141, 137, 177, 0.1);
56
+ --bs-maroon-10-dark: #271418;
57
+ --bs-midnight-10: #f7f7fa;
53
58
  --bs-midnight-100: #c6c4d8;
54
59
  --bs-midnight-200: #8d89b1;
55
60
  --bs-midnight-300: #494382;
56
61
  --bs-midnight-400: #1c1463;
57
- --bs-navy-10: rgba(141, 142, 161, 0.1);
62
+ --bs-midnight-10-dark: #1b1a23;
63
+ --bs-navy-10: #f8f8f9;
58
64
  --bs-navy-100: #c6c6d1;
59
65
  --bs-navy-200: #8d8ea1;
60
66
  --bs-navy-300: #555775;
61
67
  --bs-navy-400: #1d1e48;
62
- --bs-orange-10: rgba(247, 161, 123, 0.1);
68
+ --bs-navy-10-dark: #1b1b21;
69
+ --bs-orange-10: #fff9f7;
63
70
  --bs-orange-100: #f3c4a8;
64
71
  --bs-orange-200: #f7a17b;
65
72
  --bs-orange-300: #f97c4c;
66
73
  --bs-orange-400: #ed5615;
67
74
  --bs-orange-500: #c33d04;
68
75
  --bs-orange-brand: #ff5100;
69
- --bs-orchid-10: rgba(190, 128, 255, 0.1);
76
+ --bs-orange-10-dark: #271d1d;
77
+ --bs-orchid-10: #fbf7ff;
70
78
  --bs-orchid-100: #debfff;
71
79
  --bs-orchid-200: #be80ff;
72
80
  --bs-orchid-300: #9d40ff;
73
81
  --bs-orchid-400: #7d00ff;
74
- --bs-pink-10: rgba(235, 126, 175, 0.1);
82
+ --bs-orchid-10-dark: #20192d;
83
+ --bs-pink-10: #fef7fa;
75
84
  --bs-pink-100: #f6cbe0;
76
85
  --bs-pink-200: #eb7eaf;
77
86
  --bs-pink-300: #e45e9b;
78
87
  --bs-pink-400: #e31c79;
79
88
  --bs-pink-500: #d11a6f;
80
- --bs-plum-10: rgba(119, 102, 183, 0.1);
89
+ --bs-pink-10-dark: #261923;
90
+ --bs-plum-10: #f7f6fb;
81
91
  --bs-plum-100: #a499cf;
82
92
  --bs-plum-200: #7766b7;
83
93
  --bs-plum-300: #49339f;
84
94
  --bs-plum-400: #1c0087;
85
- --bs-purple-10: rgba(191, 138, 223, 0.1);
95
+ --bs-plum-10-dark: #181624;
96
+ --bs-purple-10: #fbf8fd;
86
97
  --bs-purple-100: #e0c5ef;
87
98
  --bs-purple-200: #bf8adf;
88
99
  --bs-purple-300: #a154d0;
89
100
  --bs-purple-400: #8212c4;
90
- --bs-red-10: rgba(245, 126, 127, 0.1);
101
+ --bs-purple-10-dark: #211a29;
102
+ --bs-red-10: #fff9f9;
91
103
  --bs-red-100: #f8a9aa;
92
104
  --bs-red-200: #f57e7f;
93
105
  --bs-red-300: #f15355;
94
106
  --bs-red-400: #ee282a;
95
107
  --bs-red-500: #d91214;
96
- --bs-royal-10: rgba(117, 133, 209, 0.1);
108
+ --bs-red-10-dark: #27191d;
109
+ --bs-royal-10: #f5f6fc;
97
110
  --bs-royal-100: #c5cceb;
98
111
  --bs-royal-200: #7585d1;
99
112
  --bs-royal-300: #5365c4;
100
113
  --bs-royal-400: #162fb4;
114
+ --bs-royal-10-dark: #181a27;
101
115
  --bs-slate-400: #22222e;
102
116
  --bs-slate-500: #17171f;
103
117
  --bs-slate-600: #0b0b10;
104
- --bs-violet-10: rgba(153, 131, 182, 0.1);
118
+ --bs-violet-10: #f8f6fa;
105
119
  --bs-violet-100: #cbc0da;
106
120
  --bs-violet-200: #9983b6;
107
121
  --bs-violet-300: #634291;
108
122
  --bs-violet-400: #330072;
109
- --bs-yellow-10: rgba(255, 184, 52, 0.1);
123
+ --bs-violet-10-dark: #1c1924;
124
+ --bs-yellow-10: #fffbf3;
110
125
  --bs-yellow-100: #fdeed3;
111
126
  --bs-yellow-200: #fcdea7;
112
127
  --bs-yellow-300: #f8c464;
113
128
  --bs-yellow-400: #c18300;
114
129
  --bs-yellow-500: #805a14;
130
+ --bs-yellow-10-dark: #282014;
115
131
  --bs-shadow-primary: rgba(0, 0, 0, 0.06);
116
132
  --bs-shadow-secondary: rgba(28, 0, 135, 0.2);
117
133
  --bs-gradient-dark: linear-gradient(
@@ -430,9 +446,6 @@ html:where(:has([data-theme="softchoice-dark"])),
430
446
  --bs-ink-medium: var(--bs-gray-100);
431
447
  --bs-ink-light: var(--bs-gray-150);
432
448
  --bs-ink-disabled: rgba(163, 164, 183, 0.7); /* gray-300 at 70% */
433
- --bs-ink-invert-base: var(--bs-black);
434
- --bs-ink-invert-medium: var(--bs-gray-500);
435
- --bs-ink-invert-light: var(--bs-gray-400);
436
449
  --bs-ink-primary: var(--bs-cobalt-100);
437
450
  --bs-ink-secondary: var(--bs-orange-200);
438
451
  --bs-ink-accent-1: var(--bs-midnight-100);
@@ -442,6 +455,9 @@ html:where(:has([data-theme="softchoice-dark"])),
442
455
  --bs-ink-positive: var(--bs-green-200);
443
456
  --bs-ink-warning: var(--bs-yellow-300);
444
457
  --bs-ink-negative: var(--bs-maroon-200);
458
+ --bs-ink-invert-base: var(--bs-black);
459
+ --bs-ink-invert-medium: var(--bs-gray-500);
460
+ --bs-ink-invert-light: var(--bs-gray-400);
445
461
 
446
462
  /* Primary */
447
463
  --bs-primary-base-fixed: var(--bs-cobalt-400);
@@ -449,7 +465,7 @@ html:where(:has([data-theme="softchoice-dark"])),
449
465
  --bs-primary-medium: var(--bs-cobalt-200);
450
466
  --bs-primary-light: var(--bs-cobalt-200);
451
467
  --bs-primary-lightest: var(--bs-cobalt-100);
452
- --bs-primary-highlight: var(--bs-cobalt-10);
468
+ --bs-primary-highlight: var(--bs-cobalt-10-dark);
453
469
 
454
470
  /* Secondary */
455
471
  --bs-secondary-base-fixed: var(--bs-orange-400);
@@ -457,7 +473,7 @@ html:where(:has([data-theme="softchoice-dark"])),
457
473
  --bs-secondary-medium: var(--bs-orange-200);
458
474
  --bs-secondary-light: var(--bs-orange-200);
459
475
  --bs-secondary-lightest: var(--bs-orange-100);
460
- --bs-secondary-highlight: var(--bs-orange-10);
476
+ --bs-secondary-highlight: var(--bs-orange-10-dark);
461
477
 
462
478
  /* Accent 1 */
463
479
  --bs-accent-1-base-fixed: var(--bs-midnight-400);
@@ -465,16 +481,18 @@ html:where(:has([data-theme="softchoice-dark"])),
465
481
  --bs-accent-1-medium: var(--bs-midnight-200);
466
482
  --bs-accent-1-light: var(--bs-midnight-200);
467
483
  --bs-accent-1-lightest: var(--bs-midnight-100);
468
- --bs-accent-1-highlight: var(--bs-midnight-10);
484
+ --bs-accent-1-highlight: var(--bs-midnight-10-dark);
469
485
 
470
486
  /* Accent 2 */
471
487
  --bs-accent-2-base: var(--bs-violet-300);
472
488
  --bs-accent-2-medium: var(--bs-violet-200);
473
489
  --bs-accent-2-light: var(--bs-violet-200);
490
+ --bs-accent-2-highlight: var(--bs-violet-10-dark);
474
491
 
475
492
  /* Accent 3 */
476
493
  --bs-accent-3-base: var(--bs-pink-300);
477
494
  --bs-accent-3-medium: var(--bs-pink-200);
495
+ --bs-accent-3-highlight: var(--bs-pink-10-dark);
478
496
 
479
497
  /* Accent 4 */
480
498
  --bs-accent-4-base-fixed: var(--bs-orchid-400);
@@ -482,21 +500,23 @@ html:where(:has([data-theme="softchoice-dark"])),
482
500
  --bs-accent-4-medium: var(--bs-orchid-200);
483
501
  --bs-accent-4-light: var(--bs-orchid-200);
484
502
  --bs-accent-4-lightest: var(--bs-orchid-100);
485
- --bs-accent-4-highlight: var(--bs-orchid-10);
503
+ --bs-accent-4-highlight: var(--bs-orchid-10-dark);
486
504
 
487
505
  /* Accent 5 */
488
506
  --bs-accent-5-base: var(--bs-gold-300);
489
507
  --bs-accent-5-medium: var(--bs-gold-200);
490
508
  --bs-accent-5-light: var(--bs-gold-200);
491
509
  --bs-accent-5-lightest: var(--bs-gold-100);
492
- --bs-accent-5-highlight: var(--bs-gold-10);
510
+ --bs-accent-5-highlight: var(--bs-gold-10-dark);
493
511
 
494
512
  /* Accent 6 */
495
513
  --bs-accent-6-base: var(--bs-red-300);
514
+ --bs-accent-6-highlight: var(--bs-red-10-dark);
496
515
 
497
516
  /* Accent 7 */
498
517
  --bs-accent-7-base: var(--bs-navy-300);
499
518
  --bs-accent-7-medium: var(--bs-navy-200);
519
+ --bs-accent-7-highlight: var(--bs-navy-10-dark);
500
520
 
501
521
  /* Neutral */
502
522
  --bs-neutral-dark: var(--bs-charcoal-100);
@@ -505,15 +525,18 @@ html:where(:has([data-theme="softchoice-dark"])),
505
525
  --bs-neutral-light: var(--bs-charcoal-400);
506
526
  --bs-neutral-lightest: var(--bs-charcoal-500);
507
527
 
528
+ /* Positive */
529
+ --bs-positive-highlight: var(--bs-green-10-dark);
530
+
508
531
  /* Warning */
509
532
  --bs-warning-base: var(--bs-yellow-400);
510
533
  --bs-warning-medium: var(--bs-yellow-300);
511
- --bs-warning-highlight: var(--bs-yellow-10);
534
+ --bs-warning-highlight: var(--bs-yellow-10-dark);
512
535
 
513
536
  /* Negative */
514
537
  --bs-negative-base: var(--bs-maroon-300);
515
538
  --bs-negative-medium: var(--bs-maroon-200);
516
- --bs-negative-highlight: var(--bs-maroon-10);
539
+ --bs-negative-highlight: var(--bs-maroon-10-dark);
517
540
 
518
541
  /* Background */
519
542
  --bs-bg-base: var(--bs-slate-600);
@@ -647,37 +670,46 @@ html:where(:has(.dark, [data-theme="wwt-dark"])),
647
670
  /* Primary */
648
671
  --bs-primary-base: var(--bs-blue-300);
649
672
  --bs-primary-medium: var(--bs-blue-200);
673
+ --bs-primary-highlight: var(--bs-blue-10-dark);
650
674
 
651
675
  /* Secondary */
652
676
  --bs-secondary-base: var(--bs-plum-300);
653
677
  --bs-secondary-medium: var(--bs-plum-200);
678
+ --bs-secondary-highlight: var(--bs-plum-10-dark);
654
679
 
655
680
  /* Accent 1 */
656
681
  --bs-accent-1-base: var(--bs-royal-300);
657
682
  --bs-accent-1-medium: var(--bs-royal-200);
683
+ --bs-accent-1-highlight: var(--bs-royal-10-dark);
658
684
 
659
685
  /* Accent 2 */
660
686
  --bs-accent-2-base: var(--bs-violet-300);
661
687
  --bs-accent-2-medium: var(--bs-violet-200);
688
+ --bs-accent-2-highlight: var(--bs-violet-10-dark);
662
689
 
663
690
  /* Accent 3 */
664
691
  --bs-accent-3-base: var(--bs-pink-300);
665
692
  --bs-accent-3-medium: var(--bs-pink-200);
693
+ --bs-accent-3-highlight: var(--bs-pink-10-dark);
666
694
 
667
695
  /* Accent 4 */
668
696
  --bs-accent-4-base: var(--bs-purple-300);
669
697
  --bs-accent-4-medium: var(--bs-purple-200);
698
+ --bs-accent-4-highlight: var(--bs-purple-10-dark);
670
699
 
671
700
  /* Accent 5 */
672
701
  --bs-accent-5-base: var(--bs-orange-300);
673
702
  --bs-accent-5-medium: var(--bs-orange-200);
703
+ --bs-accent-5-highlight: var(--bs-orange-10-dark);
674
704
 
675
705
  /* Accent 6 */
676
706
  --bs-accent-6-base: var(--bs-red-300);
707
+ --bs-accent-6-highlight: var(--bs-red-10-dark);
677
708
 
678
709
  /* Accent 7 */
679
710
  --bs-accent-7-base: var(--bs-navy-300);
680
711
  --bs-accent-7-medium: var(--bs-navy-200);
712
+ --bs-accent-7-highlight: var(--bs-navy-10-dark);
681
713
 
682
714
  /* Neutral */
683
715
  --bs-neutral-dark: var(--bs-gray-100);
@@ -686,13 +718,18 @@ html:where(:has(.dark, [data-theme="wwt-dark"])),
686
718
  --bs-neutral-light: var(--bs-gray-400);
687
719
  --bs-neutral-lightest: var(--bs-gray-500);
688
720
 
721
+ /* Positive */
722
+ --bs-positive-highlight: var(--bs-green-10-dark);
723
+
689
724
  /* Warning */
690
725
  --bs-warning-base: var(--bs-orange-400);
691
- --bs-warning-medium: var(--bs-orange-200);
726
+ --bs-warning-medium: var(--bs-orange-300);
727
+ --bs-warning-highlight: var(--bs-orange-10-dark);
692
728
 
693
729
  /* Negative */
694
730
  --bs-negative-base: var(--bs-red-300);
695
731
  --bs-negative-medium: var(--bs-red-200);
732
+ --bs-negative-highlight: var(--bs-red-10-dark);
696
733
 
697
734
  /* Background */
698
735
  --bs-bg-base: var(--bs-slate-600);