Stenfert UI / svelte

See Stenfert UI / core on how to set up the plugin. This document will only cover the Svelte specific parts.

Installation

npm install @stenfert-ui/core @stenfert-ui/svelte

Setup

Loading the plugin

To use the plugin with Svelte, add the following code to your root layout component:

<script lang="ts">
    import "../app.css";
    import { onMount } from "svelte";
    import { load } from "@stenfert-ui/core";
    import config from "$lib/ui/stenfert-ui.config";
    import { isLoaded } from "@stenfert-ui/svelte";

    let { data, children } = $props();

    onMount(() => {
        load(config);
    });
</script>

{#if $isLoaded}
    {@render children()}
{/if}

Usage

Changing the site settings

The font size, line height, letter spacing, word spacing and contrast can be requested and changed dynamically during runtime. This can be done with the following stores:

import { 
    fontSize,
    lineHeight,
    letterSpacing,
    wordSpacing,
    contrast,
} from "@stenfert-ui/svelte";

console.log({ 
    fontSize: $fontSize, 
    lineHeight: $lineHeight, 
    letterSpacing: $letterSpacing, 
    wordSpacing: $wordSpacing, 
    contrast: $contrast
}); // { fontSize: "1", lineHeight: "1", letterSpacing: "1", wordSpacing: "1", contrast: "0" }

$fontSize = "1.5"; // Range from 0 to Number.MAX_SAFE_INTEGER
$lineHeight = "1"; // Range from 0 to Number.MAX_SAFE_INTEGER
$letterSpacing = "1"; // Range from 0 to Number.MAX_SAFE_INTEGER
$wordSpacing = "1"; // Range from 0 to Number.MAX_SAFE_INTEGER
$contrast = "0"; // Range from -1 to 1

These settings are multipliers and will be multiplied against the theme's values.

Changing the theme

The theme can be changed dynamically during runtime. This can be done with the following stores:

import { getTheme } from "@stenfert-ui/core";
import { themes, activeThemeName } from "@stenfert-ui/svelte";

const theme = $themes[0]; // Let's say we want to set the active theme to the theme at index 0.

$activeThemeName = theme.getName(); // Set the active theme to the theme at index 0.
console.log(getTheme($activeThemeName)); // Prints the theme at index 0.

Example

See ./example for a working example in Svelte.