@wwtdev/bsds-components-vue3 2.1.4 → 2.2.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 +13 -13
- package/lib/bsds-components.js +1817 -1456
- package/lib/components.css +1 -1
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -17,6 +17,7 @@ Add the following to your `main.js` file to import styles:
|
|
|
17
17
|
*/
|
|
18
18
|
import '@wwtdev/bsds-components-vue3/components.css'
|
|
19
19
|
import '@wwtdev/bsds-icons-vue3/lib/style.css' // see note below re ^2.0.6
|
|
20
|
+
|
|
20
21
|
```
|
|
21
22
|
|
|
22
23
|
**Note** that the CSS framework is _included_ in `@wwtdev/bsds-components-vue3/components.css`, along with a few additional styles needed for the Vue components. This means that you do not need to import `@wwtdev/bsds-css/dist/wwt-bsds.min.css` separately.*
|
|
@@ -103,28 +104,22 @@ Since our CSS has its own reset and default styles, we prevent Tailwind's `base`
|
|
|
103
104
|
@tailwind utilities;
|
|
104
105
|
```
|
|
105
106
|
|
|
106
|
-
Once you have completed the Tailwind installation steps, you can use the classes generated from the preset.
|
|
107
|
-
|
|
108
|
-
### 3. Dark Mode-compatible "semantic" color utilities
|
|
109
|
-
|
|
110
|
-
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.
|
|
111
|
-
|
|
112
|
-
### 4. Order matters!
|
|
107
|
+
Once you have completed the Tailwind installation steps, you can use the classes generated from the preset.
|
|
113
108
|
|
|
114
|
-
|
|
109
|
+
### 3. App setup w/ Tailwind and BSDS Styles
|
|
115
110
|
|
|
116
111
|
Vue example:
|
|
117
112
|
|
|
118
113
|
```javascript
|
|
119
114
|
/* src/main.js */
|
|
120
115
|
|
|
121
|
-
// TW
|
|
122
|
-
import './styles/tailwind.css'
|
|
123
|
-
|
|
124
116
|
// Blue Steel Styles
|
|
125
117
|
import '@wwtdev/bsds-components-vue3/components.css'
|
|
126
118
|
import '@wwtdev/bsds-icons-vue3/lib/style.css' // separate icon styles not needed from v2.0.6
|
|
127
119
|
|
|
120
|
+
// TW
|
|
121
|
+
import './styles/tailwind.css'
|
|
122
|
+
|
|
128
123
|
```
|
|
129
124
|
|
|
130
125
|
Nuxt example:
|
|
@@ -135,10 +130,15 @@ Nuxt example:
|
|
|
135
130
|
export default defineNuxtConfig({
|
|
136
131
|
...
|
|
137
132
|
css: [
|
|
138
|
-
'~/assets/styles/tailwind.css',
|
|
139
133
|
'@wwtdev/bsds-components-vue3/components.css',
|
|
140
|
-
'@wwtdev/bsds-icons-vue3/lib/style.css' // separate icon styles not needed from v2.0.6
|
|
134
|
+
'@wwtdev/bsds-icons-vue3/lib/style.css', // separate icon styles not needed from v2.0.6
|
|
135
|
+
'~/assets/styles/tailwind.css',
|
|
141
136
|
]
|
|
142
137
|
})
|
|
143
138
|
|
|
144
139
|
```
|
|
140
|
+
|
|
141
|
+
### 4. Dark Mode-compatible "semantic" color utilities
|
|
142
|
+
|
|
143
|
+
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.
|
|
144
|
+
|