(WIP) CSS & Svelte Component Library

Installation

npm i @kazkadien/svelte
#or
pnpm add @kazkadien/svelte

Usage

Import all CSS

@import '@kazkadien/svelte/styles.css';

Import Components

import { Btn } from '@kazkadien/svelte'

Then wrap entry point (ex: root +layout.svelte) with AppWrapper component

<script>
  import { AppWrapper } from '@kazkadien/svelte'
</script>

<AppWrapper> </AppWrapper>

Set color theme app.html

<script>
  ;(function () {
    const THEME = 'my-theme'
    const DARK = 'dark'

    const myTheme = localStorage.getItem(THEME)

    if (myTheme) {
      if (myTheme === DARK) document.documentElement.classList.add(DARK)
      // if (myTheme === 'light')
    } else {
      if (
        window.matchMedia &&
        window.matchMedia('(prefers-color-scheme: dark)').matches
      ) {
        document.documentElement.classList.add(DARK)
      }
    }
  })()
</script>

Colors

There are 4 accents: alpha, beta, gamma and danger.

:root {
  --hue-alpha: 200;
  --hue-beta: 32;
  --hue-gamma: 69;
  --hue-danger: 355;

  --saturation: 60%;
  --lightness: 25%;

  --hue-sat-bg: 0, 0%;
}

html.dark {
  --saturation: 35%;
  --lightness: 75%;

  --hue-sat-bg: 195, 4%;
}

html.dark :where(.alpha, .beta, .gamma, .danger) {
  --fg-lightness: 65%;
  --fg-lightness-step: 10%;

  --fg-transparency: 0.75;
  --fg-transparency1: 0.85;

  --bg-transparency: 0.075;
  --bg-transparency1: 0.1;
}

Icons