https://github.com/tobua/laier
Plugin to organize zIndex layers.
https://github.com/tobua/laier
Last synced: 3 months ago
JSON representation
Plugin to organize zIndex layers.
- Host: GitHub
- URL: https://github.com/tobua/laier
- Owner: tobua
- Created: 2021-12-15T21:49:17.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-14T18:18:40.000Z (over 1 year ago)
- Last Synced: 2025-02-18T10:51:46.709Z (3 months ago)
- Language: TypeScript
- Homepage: https://tobua.github.io/laier
- Size: 1.56 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# laier
[](https://tobua.github.io/laier)
[](https://npmjs.com/laier)
Plugin to organize CSS `z-index` layers.
## Usage
First configure the layers by assigning the available layers in their respective order starting from bottom to top.
```ts
// index.ts
import configureLayer from 'laier'
export const Layer = configureLayer(['Base', 'Popup', 'Modal'])
```
Then the layers can be imported anywhere and assigned to the `z-index` where needed.
```tsx
// markup/MyComponent.tsx
import { Layer } from '../../index'
export const MyComponent = () =>
Hello World
```
When a new layer is needed it can be added into the initially configured order without having to adapt all other `z-index`'s everywhere. Also, there is no need to calculate any numbers by hand and when **TypeScript** is used it will ensure only the available layers are used.
## Surface Colors
Googles design language Material Design 3 introduces [tone-based surface colors](https://m3.material.io/styles/color/overview#fb46760e-a96a-4d05-9ca6-2b6754ddfb73). The idea is to indicate layers by making each layer below a slightly darker shade. To achieve this effect a color can be passed to `configureLayer` as the second parameter. This will return an additional `color` for each layer. The outermost layer will match the input color while layers above it are gradually lightened.
```tsx
import configureLayer from 'laier'
const Layer = configureLayer(['Base', 'Popup', 'Modal'], '#FF00FF')
const MyComponent = () => (
<>
Above
Between
Below
>
)
```