{"_id":"stenfert-ui","_rev":"28-baaf923dee191297f8bee2b2e0112cbd","name":"stenfert-ui","dist-tags":{"latest":"1.2.0"},"versions":{"1.1.0":{"name":"stenfert-ui","version":"1.1.0","author":{"name":"Stenfert Informatisering B.V."},"license":"MIT","_id":"stenfert-ui@1.1.0","maintainers":[{"name":"stenfert","email":"info@schaaponline.nl"}],"dist":{"shasum":"d65f139a5ccbb548efbf04478b05190f7a62f28b","tarball":"https://registry.npmjs.org/stenfert-ui/-/stenfert-ui-1.1.0.tgz","fileCount":6,"integrity":"sha512-glDHQm6t+9zw9nMJHiN4inW7POQ2gk36x0vxGyQxSlwre0yB+DM5mbF7pPC5zfusGI0XwXCJ6a5evAXiZo87BQ==","signatures":[{"sig":"MEUCIQDEc17Dzm2JWYcdNrgJzrQhfvFbxH+pmoaH1LpX7yJ2ggIgEbc32yovskHEPdYJJZhMVbUXa3siYo/OMzinOmqQGV8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83152},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.cts","module":"./dist/index.mjs","exports":{"types":"./dist/index.d.mts","import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"gitHead":"94c3f2b9b58c24a5007f9a850a3ac5908d91c057","scripts":{"build":"pkgroll","prepare":"npm run build"},"_npmUser":{"name":"stenfert","email":"info@schaaponline.nl"},"_npmVersion":"10.8.0","description":"Tailwind plugin for Svelte to create themes and change styles at runtime.","directories":{},"_nodeVersion":"20.11.0","dependencies":{"svelte":"^4.2.18","tailwindcss":"^3.4.10","@types/tailwindcss":"^3.1.0","svelte-persisted-store":"^0.11.0"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.17.0","pkgroll":"^2.4.2","typescript":"^5.5.4"},"_npmOperationalInternal":{"tmp":"tmp/stenfert-ui_1.1.0_1725005524599_0.8727662201696595","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"stenfert-ui","version":"1.1.1","author":{"name":"Stenfert Informatisering B.V."},"license":"MIT","_id":"stenfert-ui@1.1.1","maintainers":[{"name":"stenfert","email":"info@schaaponline.nl"}],"dist":{"shasum":"8242036889aee93cc916d33c7ef2b9c590cc6269","tarball":"https://registry.npmjs.org/stenfert-ui/-/stenfert-ui-1.1.1.tgz","fileCount":6,"integrity":"sha512-h1Tcl79tmEo/AEy46plRdG9xTWAsHyjwfXVRgBOCcHhpsEfeK1aAzKO9fA6Pyx3KfGsbAYcIQ1/JMBWBVxCk2A==","signatures":[{"sig":"MEQCIEs3KaTzyrd2OQAckqEIfj7Q6Lb5XUXwJfhyYeumLlgPAiBiMHz37dtevvZzjPZEOf1sh/bCfXC0gKN96RZmCf/Q3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":83281},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.cts","module":"./dist/index.mjs","exports":{"types":"./dist/index.d.mts","import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"gitHead":"94c3f2b9b58c24a5007f9a850a3ac5908d91c057","scripts":{"build":"pkgroll && node ./build.js","prepare":"npm run build"},"_npmUser":{"name":"stenfert","email":"info@schaaponline.nl"},"_npmVersion":"10.8.0","description":"Tailwind plugin for Svelte to create themes and change styles at runtime.","directories":{},"_nodeVersion":"20.11.0","dependencies":{"svelte":"^4.2.18","tailwindcss":"^3.4.10","@types/tailwindcss":"^3.1.0","svelte-persisted-store":"^0.11.0"},"_hasShrinkwrap":false,"devDependencies":{"tsx":"^4.17.0","pkgroll":"^2.4.2","typescript":"^5.5.4"},"_npmOperationalInternal":{"tmp":"tmp/stenfert-ui_1.1.1_1725006910293_0.6554011049738446","host":"s3://npm-registry-packages"}},"1.2.0":{"name":"stenfert-ui","version":"1.2.0","author":{"name":"Stenfert Informatisering B.V."},"description":"Tailwind plugin for Svelte to create themes and change styles at runtime.","main":"./dist/index.cjs","module":"./dist/index.mjs","types":"./dist/index.d.cts","type":"module","scripts":{"prepare":"npm run build","build":"pkgroll && node ./build.js"},"exports":{"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"},"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"types":"./dist/index.d.mts"},"license":"MIT","dependencies":{"@types/tailwindcss":"^3.1.0","svelte":"^4.2.18","svelte-persisted-store":"^0.11.0","tailwindcss":"^3.4.10"},"devDependencies":{"pkgroll":"^2.4.2","tsx":"^4.17.0","typescript":"^5.5.4"},"_id":"stenfert-ui@1.2.0","gitHead":"2d9c7582592a4340e6ee32710230f165f3af42dc","_nodeVersion":"20.11.0","_npmVersion":"10.8.0","dist":{"integrity":"sha512-Mnsdqt5vcME+X33oPW5l4gsvihTzRh8OuByPrvTVJxP95ffvh/GXDuSVMjS2jQVKLiFn4adzbYfILi0rHNyuKw==","shasum":"947804e77bb652b732ca67a285cf179431befe4f","tarball":"https://registry.npmjs.org/stenfert-ui/-/stenfert-ui-1.2.0.tgz","fileCount":6,"unpackedSize":84804,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/moNpW981eSjM0hQJJbs8vpKa1XlqK56+5QjbII1YBQIgJyjKm1oCSeToBDMWZ+ZBXzuaX7LHmlQ1S4UwPwEVfYk="}]},"_npmUser":{"name":"stenfert","email":"info@schaaponline.nl"},"directories":{},"maintainers":[{"name":"stenfert","email":"info@schaaponline.nl"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/stenfert-ui_1.2.0_1725020604963_0.0616014555047486"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-19T13:58:25.510Z","modified":"2024-08-30T12:23:25.321Z","1.0.0":"2024-08-19T13:58:25.724Z","1.0.1":"2024-08-19T14:11:26.127Z","1.0.2":"2024-08-19T14:45:04.952Z","1.0.3":"2024-08-19T14:54:57.085Z","1.0.4":"2024-08-19T15:09:22.823Z","1.0.5":"2024-08-28T11:42:51.518Z","1.0.6":"2024-08-28T11:53:53.585Z","1.0.7":"2024-08-28T12:27:55.722Z","1.0.8":"2024-08-28T14:28:58.537Z","1.0.9":"2024-08-28T14:48:55.965Z","1.0.10":"2024-08-28T15:06:35.740Z","1.0.11":"2024-08-28T15:14:03.434Z","1.0.12":"2024-08-30T07:46:09.536Z","1.1.0":"2024-08-30T08:12:04.821Z","1.1.1":"2024-08-30T08:35:10.435Z","1.2.0":"2024-08-30T12:23:25.172Z"},"author":{"name":"Stenfert Informatisering B.V."},"license":"MIT","description":"Tailwind plugin for Svelte to create themes and change styles at runtime.","maintainers":[{"name":"stenfert","email":"info@schaaponline.nl"}],"readme":"# Stenfert UI\r\nStenfert UI is a Tailwind CSS plugin for Svelte. Its core features are:\r\n- Register custom fonts.\r\n- Create detailed themes in a simple manner.\r\n- Switch between themes and change the site settings dynamically.\r\n- Store the current theme and site settings in local storage.\r\n\r\n## Installation\r\n```bash\r\nnpm install stenfert-ui\r\n```\r\n\r\n## Setup\r\n\r\n### Creating a custom font\r\nThe `fontFamily` property in the theme object is a string.\r\nYou can either use the name of a font that is already installed on the user's device or use the name of a custom font.\r\nThis custom font must then be added to the configuration file. \r\n\r\nA custom font is created like so:\r\n```ts\r\n// src/lib/ui/stenfert-ui.config.ts\r\nimport { createFont } from \"stenfert-ui\";\r\n\r\nconst myCustomFont = createFont({\r\n    name: \"Custom Font\",\r\n    source: \"/path/to/my/custom-font.ttf\",\r\n});\r\n```\r\n\r\n### Creating a theme\r\nThe example below makes use of the methods `#generateSizeRange`, `#generateForeground` and `Color#getShades` to create a theme.\r\n\r\nIn case you would like to assign specific values to the shades of the foreground and background colors and the size ranges, you can replace those methods and define the values manually.\r\n\r\nA simple theme can be created like so:\r\n```ts\r\n// src/lib/ui/stenfert-ui.config.ts\r\nimport { createTheme, Color, generateForeground, generateSizeRange } from \"stenfert-ui\";\r\n\r\nconst colors = {\r\n    surface: Color.ofHex(\"#eeeeee\").getShades(),\r\n    primary: Color.ofHex(\"#0041c2\").getShades(),\r\n    secondary: Color.ofHex(\"#371f76\").getShades(),\r\n    tertiary: Color.ofHex(\"#90e4c1\").getShades(),\r\n    success: Color.ofHex(\"#22bb33\").getShades(),\r\n    warning: Color.ofHex(\"#f0ad4e\").getShades(),\r\n    danger: Color.ofHex(\"#bb2124\").getShades(),\r\n    debug: Color.ofHex(\"#5bc0de\").getShades(),\r\n}\r\n\r\nconst myDefaultTheme = createTheme({\r\n    name: \"default\",\r\n    colors: {\r\n        background: colors,\r\n        foreground: generateForeground(colors),\r\n    },\r\n    borderWidth: \"2px\",\r\n    borderRadius: \"8px\",\r\n    fontFamily: \"Arial\",\r\n    fontSize: generateSizeRange(\"1rem\"),\r\n    lineHeight: generateSizeRange(\"1rem\"),\r\n    letterSpacing: generateSizeRange(\"0.035rem\"),\r\n    wordSpacing: generateSizeRange(\"0.035rem\"),\r\n});\r\n```\r\n\r\n### Configuring the plugin\r\nCreate a configuration file somewhere in the lib directory of your project. In the example, the file can be found at `$lib/ui/stenfert-ui.config.ts`.\r\nAdd the following code to your config:\r\n```ts\r\n// src/lib/ui/stenfert-ui.config.ts\r\nimport { StenfertUIConfig } from \"stenfert-ui\";\r\n\r\nexport default {\r\n    defaultTheme: \"default\", // The name of the default theme. This name must match the name of a theme in the themes array.\r\n    fonts: [ myCustomFont ], // An array of custom fonts.\r\n    themes: [ myDefaultTheme ], // An array of themes.\r\n    options: {\r\n        revealBody: false, // Remove the \"hidden\" class from the body element. This ensures the page is displayed after the styles are loaded.\r\n        fallbackFontFamily: \"sans-serif\" // The font family to use if the custom font is not available.\r\n    }\r\n} satisfies StenfertUIConfig;\r\n```\r\n\r\n### Registering the plugin\r\nAdd the following code to the `tailwind.config.ts` file:\r\n```ts\r\n// tailwind.config.ts\r\nimport type { Config } from \"tailwindcss\";\r\nimport { stenfertUI } from \"stenfert-ui\";\r\n\r\nexport default {\r\n    content: [\r\n        \"./src/**/*.{html,js,svelte,ts}\"\r\n    ],\r\n    plugins: [\r\n        stenfertUI(),\r\n    ]\r\n} satisfies Config;\r\n```\r\n\r\n### Initializing the plugin\r\nAdd the following code to the root layout of your Svelte project:\r\n```html\r\n<!-- src/routes/+layout.svelte -->\r\n<script lang=\"ts\">\r\n    import { load } from \"stenfert-ui\";\r\n    import config from \"$lib/ui/stenfert-ui.config\";\r\n    import { onMount } from \"svelte\";\r\n\r\n    onMount(() => {\r\n        load(config);\r\n    });\r\n</script>\r\n\r\n<slot />\r\n```\r\n\r\nAlso, it is recommended to add the \"hidden\" class to the body in the `app.html` file. Paired with the option `revealBody: true`, this will ensure that the page is displayed after the styles are loaded.\r\n\r\n\r\n## Usage\r\n\r\n### Changing the site settings\r\nThe font size, line height, letter spacing, word spacing and contrast can be changed dynamically during runtime. This can be done with the following two methods:\r\n```ts\r\nimport { \r\n    setSettings, \r\n    fontSizeStore, \r\n    lineHeightStore, \r\n    letterSpacingStore, \r\n    wordSpacingStore, \r\n    contrastStore \r\n} from \"stenfert-ui\";\r\n\r\nsetSettings({\r\n    fontSize: \"1.5\", // Range from 0 to Number.MAX_SAFE_INTEGER\r\n    lineHeight: \"1\", // Range from 0 to Number.MAX_SAFE_INTEGER\r\n    letterSpacing: \"1\", // Range from 0 to Number.MAX_SAFE_INTEGER\r\n    wordSpacing: \"1\", // Range from 0 to Number.MAX_SAFE_INTEGER\r\n    contrast: \"0\", // Range from -1 to 1\r\n});\r\n\r\nfontSizeStore.set(\"1.5\"); // Or $fontSizeStore = 1.5 in .svelte files;\r\nlineHeightStore.set(\"1\"); // Or $lineHeightStore = 1 in .svelte files;\r\nletterSpacingStore.set(\"1\"); // Or $letterSpacingStore = 1 in .svelte files;\r\nwordSpacingStore.set(\"1\"); // Or $wordSpacingStore = 1 in .svelte files;\r\ncontrastStore.set(\"0\"); // Or $contrastStore = 0 in .svelte files;\r\n```\r\n\r\n### Changing the theme\r\nThe theme can be changed dynamically during runtime. This can be done with the following method:\r\n```html\r\n<script lang=\"ts\">\r\n    import { getThemes, setTheme, themeStore, themesStore } from \"stenfert-ui\";\r\n    \r\n    function changeTheme(themeName: string) {\r\n        setTheme(themeName);\r\n\r\n        themeStore.set(themeName); // Or $themeStore = \"default\" in .svelte files;\r\n    }\r\n</script>\r\n\r\n<!-- Use themesStore over #getThemes(), because method may return empty array if config has not been loaded yet. -->\r\n{#each $themesStore as theme}\r\n    <button on:click={() => changeTheme(theme.getName())}>{theme.getName()}</button>\r\n{/each}\r\n```","readmeFilename":"README.md"}