1.0.1 • Published 3 months ago
@stenfert-ui/svelte v1.0.1
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.