@wwtdev/bsds-css 1.12.0 → 1.13.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/README.md +4 -0
- package/dist/wwt-bsds-preset.js +70 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -39,6 +39,10 @@ Since our CSS has its own reset and default styles, we prevent Tailwind's `base`
|
|
|
39
39
|
|
|
40
40
|
Once you have completed the Tailwind installation steps, you can use the classes generated from the preset.
|
|
41
41
|
|
|
42
|
+
### 3. Dark Mode-compatible "semantic" color utilities
|
|
43
|
+
|
|
44
|
+
We've extended the TW theme with color utilities that will automatically adjust when using dark mode. These classes require the CSS custom properties defined in the global stylesheet (`wwt-bsds.css`). If you're not bringing that stylesheet in, either disregard these classes or manually include the properties from [tokens.css](https://github.wwt.com/custom-apps/wwt-blue-steel/blob/main/packages/css-framework/src/styles/tokens.css) and [global.css](https://github.wwt.com/custom-apps/wwt-blue-steel/blob/main/packages/css-framework/src/styles/global.css) in your project.
|
|
45
|
+
|
|
42
46
|
### Browser Support
|
|
43
47
|
|
|
44
48
|
Our styles are compiled using Post CSS and Autoprefixer using the [`defaults` setting](https://github.com/browserslist/browserslist#full-list).
|
package/dist/wwt-bsds-preset.js
CHANGED
|
@@ -137,6 +137,20 @@ module.exports = {
|
|
|
137
137
|
"f-4xl": "clamp(2.25rem, calc(1.88rem + 1.50vw), 3.00rem)"
|
|
138
138
|
},
|
|
139
139
|
extend: {
|
|
140
|
+
backgroundColor: {
|
|
141
|
+
"base": "var(--bs-bg-base)",
|
|
142
|
+
"base-elevated": "var(--bs-bg-base-elevated)",
|
|
143
|
+
"light": "var(--bs-bg-light)",
|
|
144
|
+
"medium": "var(--bs-bg-medium)",
|
|
145
|
+
"invert-base": "var(--bs-bg-invert-base)",
|
|
146
|
+
"invert-medium": "var(--bs-bg-invert-medium)",
|
|
147
|
+
"disabled": "var(--bs-bg-disabled)"
|
|
148
|
+
},
|
|
149
|
+
borderColor: {
|
|
150
|
+
"dark": "var(--bs-border-dark)",
|
|
151
|
+
"base": "var(--bs-border-base)",
|
|
152
|
+
"light": "var(--bs-border-light)"
|
|
153
|
+
},
|
|
140
154
|
borderRadius: {
|
|
141
155
|
md: ".25rem"
|
|
142
156
|
},
|
|
@@ -161,6 +175,49 @@ module.exports = {
|
|
|
161
175
|
"-12px 12px 24px rgba(0,0,0,0.06), 16px 16px 32px rgba(28,0,135,0.2)",
|
|
162
176
|
profilePhoto: "inset 0px 0px 0.5em rgba(28,0,135,0.25)"
|
|
163
177
|
},
|
|
178
|
+
colors: {
|
|
179
|
+
"blue-base": "var(--bs-blue-base)",
|
|
180
|
+
"blue-medium": "var(--bs-blue-medium)",
|
|
181
|
+
"blue-light": "var(--bs-blue-light)",
|
|
182
|
+
"blue-lightest": "var(--bs-blue-lightest)",
|
|
183
|
+
"plum-base": "var(--bs-plum-base)",
|
|
184
|
+
"plum-medium": "var(--bs-plum-medium)",
|
|
185
|
+
"plum-light": "var(--bs-plum-light)",
|
|
186
|
+
"plum-lightest": "var(--bs-plum-lightest)",
|
|
187
|
+
"red-base": "var(--bs-red-base)",
|
|
188
|
+
"red-medium": "var(--bs-red-medium)",
|
|
189
|
+
"red-light": "var(--bs-red-light)",
|
|
190
|
+
"red-lightest": "var(--bs-red-lightest)",
|
|
191
|
+
"royal-base": "var(--bs-royal-base)",
|
|
192
|
+
"royal-medium": "var(--bs-royal-medium)",
|
|
193
|
+
"royal-light": "var(--bs-royal-light)",
|
|
194
|
+
"royal-lightest": "var(--bs-royal-lightest)",
|
|
195
|
+
"navy-base": "var(--bs-navy-base)",
|
|
196
|
+
"navy-medium": "var(--bs-navy-medium)",
|
|
197
|
+
"navy-light": "var(--bs-navy-light)",
|
|
198
|
+
"navy-lightest": "var(--bs-navy-lightest)",
|
|
199
|
+
"pink-base": "var(--bs-pink-base)",
|
|
200
|
+
"pink-medium": "var(--bs-pink-medium)",
|
|
201
|
+
"pink-light": "var(--bs-pink-light)",
|
|
202
|
+
"pink-lightest": "var(--bs-pink-lightest)",
|
|
203
|
+
"violet-base": "var(--bs-violet-base)",
|
|
204
|
+
"violet-medium": "var(--bs-violet-medium)",
|
|
205
|
+
"violet-light": "var(--bs-violet-light)",
|
|
206
|
+
"violet-lightest": "var(--bs-violet-lightest)",
|
|
207
|
+
"orange-base": "var(--bs-orange-base)",
|
|
208
|
+
"orange-medium": "var(--bs-orange-medium)",
|
|
209
|
+
"orange-light": "var(--bs-orange-light)",
|
|
210
|
+
"orange-lightest": "var(--bs-orange-lightest)",
|
|
211
|
+
"purple-base": "var(--bs-purple-base)",
|
|
212
|
+
"purple-medium": "var(--bs-purple-medium)",
|
|
213
|
+
"purple-light": "var(--bs-purple-light)",
|
|
214
|
+
"purple-lightest": "var(--bs-purple-lightest)",
|
|
215
|
+
"gray-dark": "var(--bs-gray-dark)",
|
|
216
|
+
"gray-base": "var(--bs-gray-base)",
|
|
217
|
+
"gray-medium": "var(--bs-gray-medium)",
|
|
218
|
+
"gray-light": "var(--bs-gray-light)",
|
|
219
|
+
"gray-lightest": "var(--bs-gray-lightest)",
|
|
220
|
+
},
|
|
164
221
|
lineHeight: {
|
|
165
222
|
sm: "115%",
|
|
166
223
|
base: "150%"
|
|
@@ -186,6 +243,19 @@ module.exports = {
|
|
|
186
243
|
maxWidth: {
|
|
187
244
|
content: "72rem"
|
|
188
245
|
},
|
|
246
|
+
textColor: {
|
|
247
|
+
"ink-base": "var(--bs-ink-base)",
|
|
248
|
+
"ink-medium": "var(--bs-ink-medium)",
|
|
249
|
+
"ink-light": "var(--bs-ink-light)",
|
|
250
|
+
"ink-accent": "var(--bs-ink-accent)",
|
|
251
|
+
"ink-invert": "var(--bs-ink-invert)",
|
|
252
|
+
"ink-invert-medium": "var(--bs-ink-invert-medium)",
|
|
253
|
+
"ink-blue": "var(--bs-ink-blue)",
|
|
254
|
+
"ink-red": "var(--bs-ink-red)",
|
|
255
|
+
"ink-pink": "var(--bs-ink-pink)",
|
|
256
|
+
"ink-orange": "var(--bs-ink-orange)",
|
|
257
|
+
"ink-disabled": "var(--bs-ink-disabled)"
|
|
258
|
+
},
|
|
189
259
|
zIndex: {
|
|
190
260
|
"-1": "-1",
|
|
191
261
|
"100": "100"
|