@fylgja/tokens/css/index.css

[](https://www.npmjs.com/package/@fylgja/tokens) [](https://www.npmjs.com/package/@fylgja/tokens) [![License](https://img.shields.

:where(:root) {
  --ratio-box: 1;
  --ratio-landscape: 4 / 3;
  --ratio-portrait: 3 / 4;
  --ratio-widescreen: 16 / 9;
  --ratio-superwide: 21 / 9;
  --ratio-ultrawide: 18 / 5;
  --ratio-golden: 1.618 / 1;
  --border-size-1: 1px;
  --border-size-2: 2px;
  --border-size-3: 4px;
  --border-size-4: 8px;
  --border-size-5: 12px;
  --radius-1: .125rem;
  --radius-2: .25rem;
  --radius-3: .5rem;
  --radius-4: 1rem;
  --radius-5: 2rem;
  --radius-6: 3rem;
  --radius-full: 100000px;
  --ease-1: cubic-bezier(.25, .1, .1, 1);
  --ease-2: cubic-bezier(.25, .1, .2, 1);
  --ease-3: cubic-bezier(.25, .1, .3, 1);
  --ease-4: cubic-bezier(.25, .1, .4, 1);
  --ease-5: cubic-bezier(.25, .1, .5, 1);
  --ease-in-1: cubic-bezier(.3, 0, 1, 1);
  --ease-in-2: cubic-bezier(.5, 0, 1, 1);
  --ease-in-3: cubic-bezier(.7, 0, 1, 1);
  --ease-in-4: cubic-bezier(.9, 0, 1, 1);
  --ease-in-5: cubic-bezier(1, 0, 1, 1);
  --ease-out-1: cubic-bezier(0, 0, .7, 1);
  --ease-out-2: cubic-bezier(0, 0, .5, 1);
  --ease-out-3: cubic-bezier(0, 0, .3, 1);
  --ease-out-4: cubic-bezier(0, 0, .1, 1);
  --ease-out-5: cubic-bezier(0, 0, 0, 1);
  --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
  --ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
  --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
  --ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
  --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
  --ease-elastic-in-1: cubic-bezier(.5, .25, .75, -.25);
  --ease-elastic-in-2: cubic-bezier(.5, 0, .75, -.25);
  --ease-elastic-in-3: cubic-bezier(.5, -.25, .75, -.25);
  --ease-elastic-in-4: cubic-bezier(.5, -.5, .75, -.25);
  --ease-elastic-in-5: cubic-bezier(.5, -.75, .75, -.25);
  --ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25);
  --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25);
  --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25);
  --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25);
  --ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25);
  --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5);
  --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5);
  --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5);
  --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5);
  --ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5);
  --font-size-1: .875rem;
  --font-size-2: 1rem;
  --font-size-3: 1.125rem;
  --font-size-4: 1.25rem;
  --font-size-5: 1.5rem;
  --font-size-6: 2rem;
  --font-size-7: 2.5rem;
  --font-size-8: 3rem;
  --font-size-9: 3.5rem;
  --font-size-fluid-1: clamp(.875rem, 1.5cqi, 1rem);
  --font-size-fluid-2: clamp(1rem, 2cqi, 1.125rem);
  --font-size-fluid-3: clamp(1.25rem, 2cqi, 1.5rem);
  --font-size-fluid-4: clamp(1.5rem, 3cqi, 2rem);
  --font-size-fluid-5: clamp(2rem, 5cqi, 3.5rem);
  --line-height-1: 1.1;
  --line-height-2: 1.25;
  --line-height-3: 1.375;
  --line-height-4: 1.5;
  --line-height-5: 1.8;
  --hue-pink: 350;
  --hue-purple: 330;
  --hue-violet: 310;
  --hue-indigo: 290;
  --hue-blue: 260;
  --hue-cyan: 220;
  --hue-teal: 170;
  --hue-green: 140;
  --hue-lime: 125;
  --hue-yellow: 96;
  --hue-orange: 70;
  --hue-red: 25;
  --spacing: .25rem;
  --size-1: calc(var(--spacing) * 1);
  --size-2: calc(var(--spacing) * 2);
  --size-3: calc(var(--spacing) * 3);
  --size-4: calc(var(--spacing) * 4);
  --size-5: calc(var(--spacing) * 5);
  --size-6: calc(var(--spacing) * 6);
  --size-7: calc(var(--spacing) * 7);
  --size-8: calc(var(--spacing) * 8);
  --size-9: calc(var(--spacing) * 9);
  --size-10: calc(var(--spacing) * 10);
  --size-12: calc(var(--spacing) * 12);
  --size-14: calc(var(--spacing) * 14);
  --size-16: calc(var(--spacing) * 16);
  --size-18: calc(var(--spacing) * 18);
  --size-20: calc(var(--spacing) * 20);
  --size-24: calc(var(--spacing) * 24);
  --size-28: calc(var(--spacing) * 28);
  --size-32: calc(var(--spacing) * 32);
  --size-36: calc(var(--spacing) * 36);
  --size-40: calc(var(--spacing) * 40);
  --size-50: calc(var(--spacing) * 50);
  --size-60: calc(var(--spacing) * 60);
  --size-70: calc(var(--spacing) * 70);
  --size-80: calc(var(--spacing) * 80);
  --size-90: calc(var(--spacing) * 90);
  --size-100: calc(var(--spacing) * 100);
  --size-120: calc(var(--spacing) * 120);
  --size-05: calc(var(--spacing) * .5);
  --size-heading: 36ch;
  --size-content: 64ch;
  --layer-1: 1;
  --layer-2: 2;
  --layer-3: 4;
  --layer-4: 6;
  --layer-5: 8;
}

@media (prefers-color-scheme: dark) {
  :where(:root) {
    --shadow-color: #03040740;
  }
}

* {
  --color-0: oklch(99% calc(.03 * var(--chroma, 1)) var(--hue, 0));
  --color-1: oklch(95% calc(.06 * var(--chroma, 1)) var(--hue, 0));
  --color-2: oklch(90% calc(.12 * var(--chroma, 1)) var(--hue, 0));
  --color-3: oklch(88% calc(.14 * var(--chroma, 1)) var(--hue, 0));
  --color-4: oklch(82% calc(.16 * var(--chroma, 1)) var(--hue, 0));
  --color-5: oklch(78% calc(.17 * var(--chroma, 1)) var(--hue, 0));
  --color-6: oklch(68% calc(.19 * var(--chroma, 1)) var(--hue, 0));
  --color-7: oklch(58% calc(.21 * var(--chroma, 1)) var(--hue, 0));
  --color-8: oklch(52% calc(.2 * var(--chroma, 1)) var(--hue, 0));
  --color-9: oklch(44% calc(.18 * var(--chroma, 1)) var(--hue, 0));
  --color-10: oklch(35% calc(.15 * var(--chroma, 1)) var(--hue, 0));
  --color-11: oklch(28% calc(.12 * var(--chroma, 1)) var(--hue, 0));
  --color-12: oklch(20% calc(.1 * var(--chroma, 1)) var(--hue, 0));
  --color-13: oklch(15% calc(.07 * var(--chroma, 1)) var(--hue, 0));
  --color-14: oklch(11% calc(.05 * var(--chroma, 1)) var(--hue, 0));
}

@property --hue {
  syntax: "<angle> | <number>";
  inherits: true;
  initial-value: 0;
}

* {
  --shadow-color: #0000001a;
  --shadow-1: 0 2px 1px -1px var(--shadow-color), 0 1px 1px var(--shadow-color), 0 1px 3px var(--shadow-color);
  --shadow-2: 0 3px 3px -2px var(--shadow-color), 0 3px 4px var(--shadow-color), 0 1px 8px var(--shadow-color);
  --shadow-3: 0 3px 5px -1px var(--shadow-color), 0 6px 10px var(--shadow-color), 0 1px 18px var(--shadow-color);
  --shadow-4: 0 5px 5px -3px var(--shadow-color), 0 8px 10px 1px var(--shadow-color), 0 3px 14px 2px var(--shadow-color);
  --shadow-5: 0 7px 8px -4px var(--shadow-color), 0 12px 17px 2px var(--shadow-color), 0 5px 22px 4px var(--shadow-color);
  --shadow-6: 0 8px 10px -5px var(--shadow-color), 0 16px 24px 2px var(--shadow-color), 0 6px 30px 5px var(--shadow-color);
}

@property --shadow-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #0000001a;
}