3.3.1 • Published 9 months ago

@itwin/itwinui-variables v3.3.1

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

@itwin/itwinui-variables

Installation

npm install @itwin/itwinui-variables

Usage

Import in CSS:

@import '@itwin/itwinui-variables';

Or in JS (if using a bundler):

import '@itwin/itwinui-variables';

Note: If your project doesn't support export maps, then you might need to import the css file explicitly:

@import '@itwin/itwinui-variables/index.css';

Specify a theme ("light" or "dark") by adding a data-iui-theme attribute to the top of your app.

<body data-iui-theme="light">
  <!-- your application code -->
</body>

Now you can start using the variables:

button {
  background-color: var(--iui-color-background);
  border: var(--iui-color-border);
  color: var(--iui-color-text);
}

You can also specify data-iui-contrast to switch to a high contrast version of the current theme.

<body data-iui-theme="dark" data-iui-contrast="high">
  <!-- your application code -->
</body>

If you want the variables to automatically respect the user preferences (prefers-color-scheme and prefers-contrast), then you need to additionally import os.css, and use data-iui-theme without a value. For example:

@import '@itwin/itwinui-variables';
@import '@itwin/itwinui-variables/os.css';
<body data-iui-theme>
  <!-- your application code -->
</body>
3.3.1

9 months ago

3.3.0

1 year ago

3.2.0

1 year ago

3.1.0

2 years ago

3.0.0

2 years ago

3.0.0-dev.1

2 years ago

2.1.2

2 years ago

2.1.1

2 years ago

2.1.0

2 years ago

2.1.0-dev.0

2 years ago

2.0.0

3 years ago

2.0.0-dev.1

3 years ago

2.0.0-dev.0

3 years ago

1.0.0

3 years ago

1.0.0-dev.1

3 years ago

1.0.0-dev.0

3 years ago

0.3.0

3 years ago

0.2.0

3 years ago

0.1.0-dev.0

3 years ago