@vsn-ux/gaia-styles 0.3.2 → 0.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/README.md +25 -7
- package/dist/all-no-reset-10pt.css +319 -123
- package/dist/all-no-reset.css +319 -123
- package/dist/all.css +330 -134
- package/dist/base.css +1 -1
- package/dist/components/avatar.css +13 -5
- package/dist/components/badge.css +35 -3
- package/dist/components/button.css +14 -4
- package/dist/components/card.css +11 -3
- package/dist/components/checkbox.css +12 -3
- package/dist/components/dropdown.css +17 -7
- package/dist/components/form-field.css +17 -7
- package/dist/components/input.css +12 -3
- package/dist/components/menu.css +21 -11
- package/dist/components/notification.css +11 -3
- package/dist/components/radio.css +16 -3
- package/dist/components/segmented-control.css +41 -41
- package/dist/components/select.css +17 -5
- package/dist/components/switch.css +153 -0
- package/dist/components/tag.css +11 -3
- package/dist/components/text-area.css +12 -3
- package/dist/components/tooltip.css +15 -3
- package/dist/components.css +235 -91
- package/dist/design-tokens.css +86 -32
- package/dist/design-tokens.d.ts +50 -27
- package/dist/design-tokens.js +348 -90
- package/package.json +26 -26
- package/src/design-tokens/dtcg-tokens.json +197 -77
- package/src/styles/components/button.css +1 -1
- package/src/styles/components/segmented-control.css +12 -24
- package/src/styles/components/switch.css +76 -0
- package/src/styles/components.css +1 -0
- package/src/styles/theme.css +14 -14
package/README.md
CHANGED
|
@@ -52,7 +52,7 @@ Ideal for migrating existing projects. Based on default 16px root font size.
|
|
|
52
52
|
|
|
53
53
|
> Note: This does not include the Inter font faces. Read [Inter font](#inter-font) section for more information.
|
|
54
54
|
|
|
55
|
-
### Design Tokens +
|
|
55
|
+
### Design Tokens + Base Styles + Components (based on 10px font size)
|
|
56
56
|
|
|
57
57
|
Based on default 10px root font size, handy if coming from [VUD](https://vud.visma.com).
|
|
58
58
|
|
|
@@ -80,7 +80,7 @@ Want to import just the components without reset and base styles?
|
|
|
80
80
|
|
|
81
81
|
### Base styles
|
|
82
82
|
|
|
83
|
-
Want to import just the
|
|
83
|
+
Want to import just the base styles?
|
|
84
84
|
|
|
85
85
|
```css
|
|
86
86
|
/* design tokens are required for base styles to work */
|
|
@@ -92,7 +92,23 @@ Want to import just the components without reset and base styles?
|
|
|
92
92
|
|
|
93
93
|
### Inter font
|
|
94
94
|
|
|
95
|
-
|
|
95
|
+
It is highly recommended to preload the font files in your HTML to avoid FOUC (Flash of Unstyled Content).\
|
|
96
|
+
This should be implemented according to your framework specifics, typically in the `<head>` section of your `index.html`.
|
|
97
|
+
|
|
98
|
+
Available font files in the package:
|
|
99
|
+
|
|
100
|
+
```
|
|
101
|
+
@vsn-ux/gaia-styles/font/Inter-Bold.woff2
|
|
102
|
+
@vsn-ux/gaia-styles/font/Inter-BoldItalic.woff2
|
|
103
|
+
@vsn-ux/gaia-styles/font/Inter-Italic.woff2
|
|
104
|
+
@vsn-ux/gaia-styles/font/Inter-Medium.woff2
|
|
105
|
+
@vsn-ux/gaia-styles/font/Inter-MediumItalic.woff2
|
|
106
|
+
@vsn-ux/gaia-styles/font/Inter-Regular.woff2
|
|
107
|
+
@vsn-ux/gaia-styles/font/Inter-SemiBold.woff2
|
|
108
|
+
@vsn-ux/gaia-styles/font/Inter-SemiBoldItalic.woff2
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
The package also provides definitions for the font faces in CSS format.
|
|
96
112
|
|
|
97
113
|
```css
|
|
98
114
|
@import '@vsn-ux/gaia-styles/font/inter.css';
|
|
@@ -100,15 +116,17 @@ The package includes the Inter font faces. In case you want to load them by othe
|
|
|
100
116
|
|
|
101
117
|
## Tailwindcss
|
|
102
118
|
|
|
103
|
-
|
|
119
|
+
> Note: This is for the latest version **v4** and above.
|
|
104
120
|
|
|
105
|
-
|
|
121
|
+
### Importing everything: theme, base and component styles
|
|
106
122
|
|
|
107
123
|
```css
|
|
108
124
|
@import '@vsn-ux/gaia-styles/tailwindcss';
|
|
109
125
|
```
|
|
110
126
|
|
|
111
|
-
|
|
127
|
+
### Importing selectively
|
|
128
|
+
|
|
129
|
+
Pick what you need in case you want to override some of the styles.
|
|
112
130
|
|
|
113
131
|
```css
|
|
114
132
|
@import '@vsn-ux/gaia-styles/design-tokens.css';
|
|
@@ -122,4 +140,4 @@ In case you want to customize something, use this:
|
|
|
122
140
|
@import '@vsn-ux/gaia-styles/tailwindcss/components.css' layer(components);
|
|
123
141
|
```
|
|
124
142
|
|
|
125
|
-
> The following example is the exact content of `@vsn-ux/gaia-styles/tailwindcss`.
|
|
143
|
+
> Note: The following example is the exact content of `@vsn-ux/gaia-styles/tailwindcss`.
|