npm promotes metadefinitions

    themepark
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.0 • Public • Published
    Themepark

    themepark

    Reactive CSS Variables

    Features

    • Write reactive CSS with minimal overhead
    • Isomorphic (importable on both server and browser)
    • Works on all modern browsers: Browser Compatibility
    • Super easy to support night mode

    Usage

    1. Import Themepark

    Install package (via npm)

    npm i themepark
    // ESM syntax
    import { themepark } from 'themepark';
    // CJS syntax
    var { themepark } = require('themepark')

    Script tag (via unpkg):

    <!-- Available as global variable themepark -->
    <script src="https://unpkg.com/themepark"></script>
    <!-- Later -->
    <script>
      let theme = themepark(/***/); // theme parameters / definitions go here
    </script>

    Browser Module (via skypack):

    import { themepark } from 'https://cdn.skypack.dev/themepark';

    2. Create and use theme

      // Initialize theme
      let theme = themepark({
        night: false,
        hue: 220
      }, ({ night, hue }) => ({
        primary: `hsl(${hue}, 100%, 50%)`,
        background: night ? `hsl(${primary}, 20%, 20%)` : `white`,
        text: night ? `white` : `hsl(200, 20%, 20%)`
      }))
    
      // Subscribe to changes in the theme
      let unsub = theme.$(({ night, hue, primary, background, text }) => {
        console.log(night) // false
        console.log(primary) // hsl(220,100%,50%)
      })
    
      // Unsubcribe from updates
      unsub()
    
      // Apply CSS var definitions to the body element and auto-subscribe to updates
      theme.$('body')
    
      // Directly access values (sync)
      console.log(theme.$.primary) // `hsl(220,100%,50%)`
      console.log(theme.$.night) // false
    
      // Update theme granularly
      theme.hue = 120;
    
      // Update theme with multiple changes
      theme({
        hue: 320,
        night: true
      })
    
      // Get CSS var definitions as string
      console.log(theme.toString()) // --primary:hsl(320,100%,50%);--background:hsl(320,20%,20%);--text:white;
    
      // Get var reference as string
      console.log(theme.text) // var(--text)
      

    API

    let theme = themepark(parameters, definitions)

    Creates a new instance of Themepark

    parameters: stateful values that can be used by definitions and can updated to trigger a recalculation of styles definitions: a function that takes parameters as its input and returns an object corresponding to the desired CSS variables

    Example

    let theme = themepark({
      night: true,
      hue: 220
    }, ({ night, hue }) => ({
      primary: `hsl(${hue}, 100%, 50%)`, // primary color depends on the hue in parameters
      bg: night ? `#112` : `#fff` // if night mode, dark background - else, white background
    }))

    theme.$(() => {})

    Subscribe to theme updates


    theme.$(CSS_Query)

    Finds all DOM elements with matching CSS query and automatically style those elements


    theme.$[var_name]

    Synchronously get the value of var_name


    theme[var_name]

    Get the string of the CSS variable (for inserting directly into styles)

    Ex: theme.primary ~> "var(--primary)"


    theme[param] = value

    Update a parameter, recompute css vars, and trigger all subscribers to update


    theme(obj)

    Assigns all properties in obj to params and triggers all subscribers to update


    License

    MIT © Marshall Brandt

    Install

    npm i themepark

    DownloadsWeekly Downloads

    31

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    10.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • marshallcb