svelte-set-css-vars
Install
npm install svelte-set-css-vars
Usage
<script>
import setVars from "svelte-set-css-vars";
let variables = {
global: {
font: {
size: "100%",
colour: "#333333",
name: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif`
},
headings: [
{
font: {
size: "1.5em",
name: "inherit",
},
},
{
font: {
size: "1.5em",
name: "inherit",
},
},
{
font: {
size: "1.17em",
name: "inherit",
},
},
{
font: {
size: "1em",
name: "inherit",
},
},
{
font: {
size: "0.83em",
name: "inherit",
},
},
{
font: {
size: "0.67em",
name: "inherit",
},
},
],
},
button: {
font: {
name: "inherit",
size: "16px",
colour: "#ffffff",
hover: {
colour: "#ffffff",
},
},
background: {
value: "#c9269e",
hover: {
value: "#b1208a",
},
},
border: {
colour: "#c9269e",
width: "3px",
style: "solid",
radius: "8px",
hover: {
colour: "#c9269e",
width: "3px",
style: "solid",
radius: "8px",
},
},
outline: {
colour: "inherit",
style: "inherit",
width: "inherit",
},
},
link: {
font: {
name: "inherit",
size: "inherit",
colour: "#c9269e",
hover: {
colour: "#c9269e",
},
},
background: {
value: "transparent",
hover: {
value: "transparent",
},
},
text: {
decoration: "underline",
hover: {
decoration: "none",
},
},
}
};
</script>
<svelte:body use:setVars={variables} />
<!-- OR LOCALISE CSS VARIABLES -->
<div use:setVars={variables}></div>
<style>
div {
font-family: var(--global-font-name);
}
/**
* var(--global-font-size);
* var(--global-font-colour);
* var(--global-font-name);
* var(--global-headings-0-font-size);
* var(--global-headings-0-font-name);
* var(--global-headings-1-font-size);
* var(--global-headings-1-font-name);
* var(--global-headings-2-font-size);
* var(--global-headings-2-font-name);
* var(--global-headings-3-font-size);
* var(--global-headings-3-font-name);
* var(--global-headings-4-font-size);
* var(--global-headings-4-font-name);
* var(--global-headings-5-font-size);
* var(--global-headings-5-font-name);
* var(--button-font-name);
* var(--button-font-size);
* var(--button-font-colour);
* var(--button-font-hover-colour);
* var(--button-background-value);
* var(--button-background-hover-value);
* var(--button-border-colour);
* var(--button-border-width);
* var(--button-border-style);
* var(--button-border-radius);
* var(--button-border-hover-colour);
* var(--button-border-hover-width);
* var(--button-border-hover-style);
* var(--button-border-hover-radius);
* var(--button-outline-colour);
* var(--button-outline-style);
* var(--button-outline-width);
* var(--link-font-name);
* var(--link-font-size);
* var(--link-font-colour);
* var(--link-font-hover-colour);
* var(--link-background-value);
* var(--link-background-hover-value);
* var(--link-text-decoration);
* var(--link-text-hover-decoration);
**/
</style>