@itwin/itwinui-variables
Advanced tools
Comparing version
{ | ||
"name": "@itwin/itwinui-variables", | ||
"version": "1.0.0-dev.1", | ||
"version": "1.0.0", | ||
"author": "Bentley Systems", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
@@ -15,18 +15,50 @@ # @itwin/itwinui-variables | ||
As a stylesheet: | ||
Import in CSS: | ||
```html | ||
<link rel="stylesheet" href="@itwin/itwinui-variables" /> | ||
```css | ||
@import '@itwin/itwinui-variables'; | ||
``` | ||
Or, as a CSS import | ||
Or in JS: | ||
```js | ||
import '@itwin/itwinui-variables'; | ||
``` | ||
> **Note**: If your project doesn't support export maps, then you might need to import the css file explicitly: | ||
> | ||
> ```css | ||
> @import '@itwin/itwinui-variables/index.css'; | ||
> ``` | ||
Now you can start using the variables: | ||
```css | ||
@import url('@itwin/itwinui-variables'); | ||
button { | ||
background-color: var(--iui-color-background); | ||
border: var(--iui-color-border); | ||
color: var(--iui-color-text); | ||
} | ||
``` | ||
Or, as a JS import: | ||
By default, the variables use light theme. You can switch to dark theme using `data-iui-theme` in your HTML. | ||
```js | ||
import '@itwin/itwinui-variables'; | ||
```html | ||
<body data-iui-theme="dark"> | ||
<!-- your application code --> | ||
</body> | ||
``` | ||
You can also specify `data-iui-contrast` to switch to a high contrast theme. | ||
```html | ||
<body data-iui-theme="dark" data-iui-contrast="high"> | ||
<!-- your application code --> | ||
</body> | ||
``` | ||
If you want the variables to automatically respect the user preferences (color-scheme and contrast), then import `os.css`: | ||
```css | ||
@import '@itwin/itwinui-variables/os.css'; | ||
``` |
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
27360
3.01%0
-100%64
100%