https://github.com/le0pard/storybook-addon-root-attribute-demo

Demo for storybook-addon-root-attribute
https://github.com/le0pard/storybook-addon-root-attribute-demo

css html library storybook storybook-addon

Last synced: about 2 months ago
JSON representation

Demo for storybook-addon-root-attribute

• Host: GitHub
• URL: https://github.com/le0pard/storybook-addon-root-attribute-demo
• Owner: le0pard
• Created: 2019-06-22T13:52:45.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T04:12:44.000Z (about 2 years ago)
• Last Synced: 2024-11-05T23:13:17.975Z (3 months ago)
• Topics: css, html, library, storybook, storybook-addon
• Language: JavaScript
• Homepage: https://storybook-addon-root-attribute.leopard.in.ua
• Size: 1.57 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Demo repo for [Storybook-addon-root-attribute](https://github.com/le0pard/storybook-addon-root-attribute)

## Deploy

Run:

```bash

$ yarn

$ yarn run deploy-storybook

```

## How demo works

All "magic" inside css file:

```css

:root {

  --baseColor: #657b83;

  --bgColor: #fdf6e3;

  --headsColor: #eee8d5;

  --commentColor: #93a1a1;

  --linkColor: #b58900;

  --linkHoverColor: #cb4b16;

}

:root.dark {

  --baseColor: #839496;

  --bgColor: #002b36;

  --headsColor: #073642;

  --commentColor: #586e75;

  --linkColor: #b58900;

  --linkHoverColor: #cb4b16;

}

:root.blue {

  --baseColor: #fff;

  --bgColor: #f5f5f5;

  --headsColor: #2196f3;

  --commentColor: #fff;

  --linkColor: #ccc;

  --linkHoverColor: #aaa;

}

html {

  background-color: var(--headsColor);

  color: var(--baseColor);

  font-size: 2rem;

}

a {

  margin: 0 50px;

  color: var(--linkColor);

}

a:hover {

  color: var(--linkHoverColor);

  text-decoration: none;

}

```

If you change "class" for html tag, this will "override" css custom variables.