<|start_filename|>src/props.indigo.css<|end_filename|>
:where(html) {
  --indigo-0: #edf2ff;
  --indigo-1: #dbe4ff;
  --indigo-2: #bac8ff;
  --indigo-3: #91a7ff;
  --indigo-4: #748ffc;
  --indigo-5: #5c7cfa;
  --indigo-6: #4c6ef5;
  --indigo-7: #4263eb;
  --indigo-8: #3b5bdb;
  --indigo-9: #364fc7;
}


<|start_filename|>src/props.easing.js<|end_filename|>
export default {
  '--ease-1': 'cubic-bezier(.25, 0, .5, 1)',
  '--ease-2': 'cubic-bezier(.25, 0, .4, 1)',
  '--ease-3': 'cubic-bezier(.25, 0, .3, 1)',
  '--ease-4': 'cubic-bezier(.25, 0, .2, 1)',
  '--ease-5': 'cubic-bezier(.25, 0, .1, 1)',

  '--ease-in-1': 'cubic-bezier(.25, 0, 1, 1)',
  '--ease-in-2': 'cubic-bezier(.50, 0, 1, 1)',
  '--ease-in-3': 'cubic-bezier(.70, 0, 1, 1)',
  '--ease-in-4': 'cubic-bezier(.90, 0, 1, 1)',
  '--ease-in-5': 'cubic-bezier(1, 0, 1, 1)',

  '--ease-out-1': 'cubic-bezier(0, 0, .75, 1)',
  '--ease-out-2': 'cubic-bezier(0, 0, .50, 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-1': 'cubic-bezier(.5, .75, .75, 1.25)',
  '--ease-elastic-2': 'cubic-bezier(.5, 1, .75, 1.25)',
  '--ease-elastic-3': 'cubic-bezier(.5, 1.25, .75, 1.25)',
  '--ease-elastic-4': 'cubic-bezier(.5, 1.5, .75, 1.25)',
  '--ease-elastic-5': 'cubic-bezier(.5, 1.75, .75, 1.25)',

  '--ease-squish-1': 'cubic-bezier(.5, -.1, .1, 1.5)',
  '--ease-squish-2': 'cubic-bezier(.5, -.3, .1, 1.5)',
  '--ease-squish-3': 'cubic-bezier(.5, -.5, .1, 1.5)',
  '--ease-squish-4': 'cubic-bezier(.5, -.7, .1, 1.5)',
  '--ease-squish-5': 'cubic-bezier(.5, -.9, .1, 1.5)',

  '--ease-step-1': 'steps(2)',
  '--ease-step-2': 'steps(3)',
  '--ease-step-3': 'steps(4)',
  '--ease-step-4': 'steps(7)',
  '--ease-step-5': 'steps(10)',
}


<|start_filename|>src/props.highlights.css<|end_filename|>
:where(html) {
  --highlight-size: 10px;
  --highlight-color: hsl(0 0% 0% / 20%);

  --highlight: 
    0 0 0 
    var(--highlight-size) 
    var(--highlight-color)
  ;

  @media (--OSdark) {
    --highlight-color: hsl(0 0% 100% / 20%);
  }
}

<|start_filename|>docsite/js/animations.js<|end_filename|>
import {toggleIcons} from './easing.js'

const cleanup = e => {
  setTimeout(()=> {
    e.target.style = ''
    toggleIcons(e.target.querySelector('button'))
  }, 500)
}

document
  .querySelectorAll('.animation-demo')
  .forEach(group => {
    group.addEventListener('click', e => {
      if (e.target.nodeName !== 'BUTTON') return

      let sample = e.target.closest('.animation-demo-target')

      if (sample.dataset.startingStyles) {
        sample.style = sample.dataset.startingStyles

        setTimeout(()=> {
          sample.style.animation = `var(--animation-${sample.dataset.animation}) forwards`
          sample.addEventListener('animationend', cleanup, {once:true})
        }, 300)
      }
      else if (sample.style.animation != '') {
        sample.style.animation = null
        sample.removeEventListener('animationend', cleanup)
      }
      else {
        sample.style.animation = `var(--animation-${sample.dataset.animation}) forwards`
        sample.addEventListener('animationend', cleanup, {once:true})
      }
    })
  })

<|start_filename|>src/props.zindex.js<|end_filename|>
export default {
  '--layer-1': 1,
  '--layer-2': 2,
  '--layer-3': 3,
  '--layer-4': 4,
  '--layer-5': 5,
  '--layer-important': 2147483647,  
}


<|start_filename|>src/props.supports.css<|end_filename|>
@custom-media --safariONLY  (-webkit-hyphens: none);
@custom-media --firefoxONLY (-moz-appearance: none);
@custom-media --chromeONLY  (-webkit-tap-highlight-color: black);

:where(html) {
  --isLTR: 1;
  --isRTL: -1;
  
  &:dir(rtl) {
    --isLTR: -1;
    --isRTL: 1;
  }
}


<|start_filename|>src/props.fonts.js<|end_filename|>
export default {
  '--font-sans': 'system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif',
  '--font-serif': 'ui-serif,serif',
  '--font-mono': 'Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace',

  '--font-weight-1': '100',
  '--font-weight-2': '200',
  '--font-weight-3': '300',
  '--font-weight-4': '400',
  '--font-weight-5': '500',
  '--font-weight-6': '600',
  '--font-weight-7': '700',
  '--font-weight-8': '800',
  '--font-weight-9': '900',

  '--font-lineheight-00': '.95',
  '--font-lineheight-0': '1.1',
  '--font-lineheight-1': '1.25',
  '--font-lineheight-2': '1.375',
  '--font-lineheight-3': '1.5',
  '--font-lineheight-4': '1.75',
  '--font-lineheight-5': '2',

  // '--font-relative-lineheight-00': 'calc(1rem + .5ch)',
  // '--font-relative-lineheight-0': 'calc(1rem + .75ch)',
  // '--font-relative-lineheight-1': 'calc(1rem + 1ch)',
  // '--font-relative-lineheight-2': 'calc(1rem + 1.25ch)',
  // '--font-relative-lineheight-3': 'calc(1rem + 1.5ch)',
  // '--font-relative-lineheight-4': 'calc(1rem + 2ch)',
  // '--font-relative-lineheight-5': 'calc(1rem + 2.5ch)',
  // '--font-relative-lineheight-6': 'calc(1rem + 3ch)',

  '--font-letterspacing-0': '-.05em',
  '--font-letterspacing-1': '.025em',
  '--font-letterspacing-2': '.050em',
  '--font-letterspacing-3': '.075em',
  '--font-letterspacing-4': '.150em',
  '--font-letterspacing-5': '.500em',
  '--font-letterspacing-6': '.750em',
  '--font-letterspacing-7': '1em',

  '--font-size-00': '.5rem',
  '--font-size-0': '.75rem',
  '--font-size-1': '1rem',
  '--font-size-2': '1.1rem',
  '--font-size-3': '1.25rem',
  '--font-size-4': '1.5rem',
  '--font-size-5': '2rem',
  '--font-size-6': '2.5rem',
  '--font-size-7': '3rem',
  '--font-size-8': '3.5rem',

  '--font-size-fluid-0': 'clamp(.75rem, 2vw, 1rem)',
  '--font-size-fluid-1': 'clamp(1rem, 4vw, 1.5rem)',
  '--font-size-fluid-2': 'clamp(1.5rem, 6vw, 2.5rem)',
  '--font-size-fluid-3': 'clamp(2rem, 9vw, 3.5rem)',
}


<|start_filename|>src/props.colors.css<|end_filename|>
:where(html) {
  --gray-0: #f8f9fa;
  --gray-1: #f1f3f5;
  --gray-2: #e9ecef;
  --gray-3: #dee2e6;
  --gray-4: #ced4da;
  --gray-5: #adb5bd;
  --gray-6: #868e96;
  --gray-7: #495057;
  --gray-8: #343a40;
  --gray-9: #212529;
  --red-0: #fff5f5;
  --red-1: #ffe3e3;
  --red-2: #ffc9c9;
  --red-3: #ffa8a8;
  --red-4: #ff8787;
  --red-5: #ff6b6b;
  --red-6: #fa5252;
  --red-7: #f03e3e;
  --red-8: #e03131;
  --red-9: #c92a2a;
  --pink-0: #fff0f6;
  --pink-1: #ffdeeb;
  --pink-2: #fcc2d7;
  --pink-3: #faa2c1;
  --pink-4: #f783ac;
  --pink-5: #f06595;
  --pink-6: #e64980;
  --pink-7: #d6336c;
  --pink-8: #c2255c;
  --pink-9: #a61e4d;
  --grape-0: #f8f0fc;
  --grape-1: #f3d9fa;
  --grape-2: #eebefa;
  --grape-3: #e599f7;
  --grape-4: #da77f2;
  --grape-5: #cc5de8;
  --grape-6: #be4bdb;
  --grape-7: #ae3ec9;
  --grape-8: #9c36b5;
  --grape-9: #862e9c;
  --violet-0: #f3f0ff;
  --violet-1: #e5dbff;
  --violet-2: #d0bfff;
  --violet-3: #b197fc;
  --violet-4: #9775fa;
  --violet-5: #845ef7;
  --violet-6: #7950f2;
  --violet-7: #7048e8;
  --violet-8: #6741d9;
  --violet-9: #5f3dc4;
  --indigo-0: #edf2ff;
  --indigo-1: #dbe4ff;
  --indigo-2: #bac8ff;
  --indigo-3: #91a7ff;
  --indigo-4: #748ffc;
  --indigo-5: #5c7cfa;
  --indigo-6: #4c6ef5;
  --indigo-7: #4263eb;
  --indigo-8: #3b5bdb;
  --indigo-9: #364fc7;
  --blue-0: #e7f5ff;
  --blue-1: #d0ebff;
  --blue-2: #a5d8ff;
  --blue-3: #74c0fc;
  --blue-4: #4dabf7;
  --blue-5: #339af0;
  --blue-6: #228be6;
  --blue-7: #1c7ed6;
  --blue-8: #1971c2;
  --blue-9: #1864ab;
  --cyan-0: #e3fafc;
  --cyan-1: #c5f6fa;
  --cyan-2: #99e9f2;
  --cyan-3: #66d9e8;
  --cyan-4: #3bc9db;
  --cyan-5: #22b8cf;
  --cyan-6: #15aabf;
  --cyan-7: #1098ad;
  --cyan-8: #0c8599;
  --cyan-9: #0b7285;
  --teal-0: #e6fcf5;
  --teal-1: #c3fae8;
  --teal-2: #96f2d7;
  --teal-3: #63e6be;
  --teal-4: #38d9a9;
  --teal-5: #20c997;
  --teal-6: #12b886;
  --teal-7: #0ca678;
  --teal-8: #099268;
  --teal-9: #087f5b;
  --green-0: #ebfbee;
  --green-1: #d3f9d8;
  --green-2: #b2f2bb;
  --green-3: #8ce99a;
  --green-4: #69db7c;
  --green-5: #51cf66;
  --green-6: #40c057;
  --green-7: #37b24d;
  --green-8: #2f9e44;
  --green-9: #2b8a3e;
  --lime-0: #f4fce3;
  --lime-1: #e9fac8;
  --lime-2: #d8f5a2;
  --lime-3: #c0eb75;
  --lime-4: #a9e34b;
  --lime-5: #94d82d;
  --lime-6: #82c91e;
  --lime-7: #74b816;
  --lime-8: #66a80f;
  --lime-9: #5c940d;
  --yellow-0: #fff9db;
  --yellow-1: #fff3bf;
  --yellow-2: #ffec99;
  --yellow-3: #ffe066;
  --yellow-4: #ffd43b;
  --yellow-5: #fcc419;
  --yellow-6: #fab005;
  --yellow-7: #f59f00;
  --yellow-8: #f08c00;
  --yellow-9: #e67700;
  --orange-0: #fff4e6;
  --orange-1: #ffe8cc;
  --orange-2: #ffd8a8;
  --orange-3: #ffc078;
  --orange-4: #ffa94d;
  --orange-5: #ff922b;
  --orange-6: #fd7e14;
  --orange-7: #f76707;
  --orange-8: #e8590c;
  --orange-9: #d9480f;
}


<|start_filename|>src/props.zindex.css<|end_filename|>
:where(html) {
  --layer-1: 1;
  --layer-2: 2;
  --layer-3: 3;
  --layer-4: 4;
  --layer-5: 5;
  --layer-important: 2147483647;
}


<|start_filename|>src/props.pink.css<|end_filename|>
:where(html) {
  --pink-0: #fff0f6;
  --pink-1: #ffdeeb;
  --pink-2: #fcc2d7;
  --pink-3: #faa2c1;
  --pink-4: #f783ac;
  --pink-5: #f06595;
  --pink-6: #e64980;
  --pink-7: #d6336c;
  --pink-8: #c2255c;
  --pink-9: #a61e4d;
}


<|start_filename|>src/props.green.css<|end_filename|>
:where(html) {
  --green-0: #ebfbee;
  --green-1: #d3f9d8;
  --green-2: #b2f2bb;
  --green-3: #8ce99a;
  --green-4: #69db7c;
  --green-5: #51cf66;
  --green-6: #40c057;
  --green-7: #37b24d;
  --green-8: #2f9e44;
  --green-9: #2b8a3e;
}


<|start_filename|>src/props.gray.css<|end_filename|>
:where(html) {
  --gray-0: #f8f9fa;
  --gray-1: #f1f3f5;
  --gray-2: #e9ecef;
  --gray-3: #dee2e6;
  --gray-4: #ced4da;
  --gray-5: #adb5bd;
  --gray-6: #868e96;
  --gray-7: #495057;
  --gray-8: #343a40;
  --gray-9: #212529;
}


<|start_filename|>src/props.yellow.css<|end_filename|>
:where(html) {
  --yellow-0: #fff9db;
  --yellow-1: #fff3bf;
  --yellow-2: #ffec99;
  --yellow-3: #ffe066;
  --yellow-4: #ffd43b;
  --yellow-5: #fcc419;
  --yellow-6: #fab005;
  --yellow-7: #f59f00;
  --yellow-8: #f08c00;
  --yellow-9: #e67700;
}


<|start_filename|>src/props.red.css<|end_filename|>
:where(html) {
  --red-0: #fff5f5;
  --red-1: #ffe3e3;
  --red-2: #ffc9c9;
  --red-3: #ffa8a8;
  --red-4: #ff8787;
  --red-5: #ff6b6b;
  --red-6: #fa5252;
  --red-7: #f03e3e;
  --red-8: #e03131;
  --red-9: #c92a2a;
}


<|start_filename|>src/props.fonts.css<|end_filename|>
:where(html) {
  --font-sans: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  --font-serif: ui-serif,serif;
  --font-mono: Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;
  --font-weight-1: 100;
  --font-weight-2: 200;
  --font-weight-3: 300;
  --font-weight-4: 400;
  --font-weight-5: 500;
  --font-weight-6: 600;
  --font-weight-7: 700;
  --font-weight-8: 800;
  --font-weight-9: 900;
  --font-lineheight-00: .95;
  --font-lineheight-0: 1.1;
  --font-lineheight-1: 1.25;
  --font-lineheight-2: 1.375;
  --font-lineheight-3: 1.5;
  --font-lineheight-4: 1.75;
  --font-lineheight-5: 2;
  --font-letterspacing-0: -.05em;
  --font-letterspacing-1: .025em;
  --font-letterspacing-2: .050em;
  --font-letterspacing-3: .075em;
  --font-letterspacing-4: .150em;
  --font-letterspacing-5: .500em;
  --font-letterspacing-6: .750em;
  --font-letterspacing-7: 1em;
  --font-size-00: .5rem;
  --font-size-0: .75rem;
  --font-size-1: 1rem;
  --font-size-2: 1.1rem;
  --font-size-3: 1.25rem;
  --font-size-4: 1.5rem;
  --font-size-5: 2rem;
  --font-size-6: 2.5rem;
  --font-size-7: 3rem;
  --font-size-8: 3.5rem;
  --font-size-fluid-0: clamp(.75rem, 2vw, 1rem);
  --font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
  --font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
  --font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);
}


<|start_filename|>src/props.borders.css<|end_filename|>
:where(html) {
  --border-size-1: 1px;
  --border-size-2: 2px;
  --border-size-3: 5px;
  --border-size-4: 10px;
  --border-size-5: 25px;
  --radius-1: 2px;
  --radius-2: 5px;
  --radius-3: 1rem;
  --radius-4: 2rem;
  --radius-5: 4rem;
  --radius-6: 8rem;
  --radius-round: 1e5px;
  --radius-blob-1: 30% 70% 70% 30% / 53% 30% 70% 47%;
  --radius-blob-2: 53% 47% 34% 66% / 63% 46% 54% 37%;
  --radius-blob-3: 37% 63% 56% 44% / 49% 56% 44% 51%;
  --radius-blob-4: 63% 37% 37% 63% / 43% 37% 63% 57%;
  --radius-blob-5: 49% 51% 48% 52% / 57% 44% 56% 43%;
  --radius-conditional-1: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1));
  --radius-conditional-2: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-2));
  --radius-conditional-3: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-3));
  --radius-conditional-4: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-4));
  --radius-conditional-5: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-5));
  --radius-conditional-6: clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-6));
}


<|start_filename|>src/extra/utilities.css<|end_filename|>
:is(.visually-hidden, .sr-only) {
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
}

.border-between-inline > * + * {
  border-inline-start-width: var(--border);
}

.border-between-block > * + * {
  border-block-start-width: var(--border);
}

.gradient-border {
  border-width: var(--size-3);
  border-image-slice: 1;
  border-image-source: var(--conic-gradient-3);
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fade-up-and-in {
  opacity: 0;
  animation: 
    var(--animation-fade-in) forwards,
    var(--animation-slide-up) forwards;
  animation-delay: .3s, 0s;
  animation-duration: .7s, 1s;
}

<|start_filename|>src/props.layouts.css<|end_filename|>
:where(html) {
  --grid-cell: [stack] 1fr / [stack] 1fr;
  --grid-cell-name: stack;
  
  --grid-ram: repeat(auto-fit, minmax(min(0, 100%), 1fr));
  --grid-holy-grail: auto 1fr auto / auto 1fr auto;
}

* {
  --grid_adapt_mixin-viewport_context: 100vw;
  --grid_adapt_mixin-container_context: 100%;
  --grid_adapt_mixin-context: var(--grid_adapt_mixin-viewport_context);

  --grid_adapt_mixin-break_1: 1024px;
  --above-break_1-columns: 5;
  --grid_adapt_mixin-break_2: 480px;
  --above-break_2-columns: 2;

  --grid_adapt_mixin: repeat(auto-fill,
      minmax(
        clamp(
          clamp(
            calc(100% / calc(var(--above-break_1-columns) + 1) + 0.1%), 
            calc(calc(var(--grid_adapt_mixin-break_1) - var(--grid_adapt_mixin-context)) * 1e5),
            calc(100% / calc(var(--above-break_2-columns) + 1) + 0.1%)
          ), 
          calc(calc(var(--grid_adapt_mixin-break_2) - var(--grid_adapt_mixin-context)) * 1e5),
          100%
        ), 
      1fr)
  );
}



<|start_filename|>docsite/public/theme-toggle.js<|end_filename|>
// theme toggle
const getColorPreference = () => {
  if (localStorage.getItem('theme-preference'))
    return localStorage.getItem('theme-preference')
  else
    return window.matchMedia('(prefers-color-scheme: dark)').matches
      ? 'dark'
      : 'light'
}

const setPreference = () => {
  localStorage.setItem('theme-preference', theme.value)
  reflectPreference()
}

const reflectPreference = () => {
  document.firstElementChild.setAttribute('data-theme', theme.value)
  document.querySelector('#theme-toggle')?.setAttribute('aria-live', theme.value)
}

const theme = {
  value: getColorPreference(),
}

// set early so no page flashes
reflectPreference()

window.onload = () => {
  // set on load so screen readers can see latest value on the button
  reflectPreference()

  document.querySelector('#theme-toggle').addEventListener('click', e => {
    theme.value = theme.value === 'light'
      ? 'dark'
      : 'light'

    setPreference()
  })
}

window
  .matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', ({matches:isDark}) => {
    theme.value = isDark ? 'dark' : 'light'
    setPreference()
  })

<|start_filename|>src/props.cyan.css<|end_filename|>
:where(html) {
  --cyan-0: #e3fafc;
  --cyan-1: #c5f6fa;
  --cyan-2: #99e9f2;
  --cyan-3: #66d9e8;
  --cyan-4: #3bc9db;
  --cyan-5: #22b8cf;
  --cyan-6: #15aabf;
  --cyan-7: #1098ad;
  --cyan-8: #0c8599;
  --cyan-9: #0b7285;
}


<|start_filename|>docsite/index.js<|end_filename|>
import 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/prism.min.js'
import 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js'

import '/js/easing.js'
import '/js/animations.js'
import '/js/slider.js'
import '/js/scrollspy.js'


<|start_filename|>src/props.easing.css<|end_filename|>
:where(html) {
  --ease-1: cubic-bezier(.25, 0, .5, 1);
  --ease-2: cubic-bezier(.25, 0, .4, 1);
  --ease-3: cubic-bezier(.25, 0, .3, 1);
  --ease-4: cubic-bezier(.25, 0, .2, 1);
  --ease-5: cubic-bezier(.25, 0, .1, 1);
  --ease-in-1: cubic-bezier(.25, 0, 1, 1);
  --ease-in-2: cubic-bezier(.50, 0, 1, 1);
  --ease-in-3: cubic-bezier(.70, 0, 1, 1);
  --ease-in-4: cubic-bezier(.90, 0, 1, 1);
  --ease-in-5: cubic-bezier(1, 0, 1, 1);
  --ease-out-1: cubic-bezier(0, 0, .75, 1);
  --ease-out-2: cubic-bezier(0, 0, .50, 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-1: cubic-bezier(.5, .75, .75, 1.25);
  --ease-elastic-2: cubic-bezier(.5, 1, .75, 1.25);
  --ease-elastic-3: cubic-bezier(.5, 1.25, .75, 1.25);
  --ease-elastic-4: cubic-bezier(.5, 1.5, .75, 1.25);
  --ease-elastic-5: cubic-bezier(.5, 1.75, .75, 1.25);
  --ease-squish-1: cubic-bezier(.5, -.1, .1, 1.5);
  --ease-squish-2: cubic-bezier(.5, -.3, .1, 1.5);
  --ease-squish-3: cubic-bezier(.5, -.5, .1, 1.5);
  --ease-squish-4: cubic-bezier(.5, -.7, .1, 1.5);
  --ease-squish-5: cubic-bezier(.5, -.9, .1, 1.5);
  --ease-step-1: steps(2);
  --ease-step-2: steps(3);
  --ease-step-3: steps(4);
  --ease-step-4: steps(7);
  --ease-step-5: steps(10);
}


<|start_filename|>src/props.teal.css<|end_filename|>
:where(html) {
  --teal-0: #e6fcf5;
  --teal-1: #c3fae8;
  --teal-2: #96f2d7;
  --teal-3: #63e6be;
  --teal-4: #38d9a9;
  --teal-5: #20c997;
  --teal-6: #12b886;
  --teal-7: #0ca678;
  --teal-8: #099268;
  --teal-9: #087f5b;
}


<|start_filename|>docsite/js/easing.js<|end_filename|>
// easing controls
document
  .querySelectorAll('.animation-control-header > button')
  .forEach(button => {
    button.addEventListener('click', e => {
      e.currentTarget
        .closest('div')
        .querySelector('.ease-demo')
        .classList.toggle('paused')
    })
  })

export const toggleIcons = button => {
  button
    .querySelectorAll('use')
    .forEach(icon => {
      icon.classList.toggle('hidden')
    })
}

// play buttons
document
  .querySelectorAll('.play-button')
  .forEach(button => {
    button.addEventListener('click', e => {
      toggleIcons(e.currentTarget)
    })
  })

<|start_filename|>src/props.borders.js<|end_filename|>
export default {
  '--border-size-1': '1px',
  '--border-size-2': '2px',
  '--border-size-3': '5px',
  '--border-size-4': '10px',
  '--border-size-5': '25px',

  '--radius-1': '2px',
  '--radius-2': '5px',
  '--radius-3': '1rem',
  '--radius-4': '2rem',
  '--radius-5': '4rem',
  '--radius-6': '8rem',

  '--radius-round': '1e5px',
  '--radius-blob-1': '30% 70% 70% 30% / 53% 30% 70% 47%',
  '--radius-blob-2': '53% 47% 34% 66% / 63% 46% 54% 37%',
  '--radius-blob-3': '37% 63% 56% 44% / 49% 56% 44% 51%',
  '--radius-blob-4': '63% 37% 37% 63% / 43% 37% 63% 57%',
  '--radius-blob-5': '49% 51% 48% 52% / 57% 44% 56% 43%',

  '--radius-conditional-1': 'clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-1))',
  '--radius-conditional-2': 'clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-2))',
  '--radius-conditional-3': 'clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-3))',
  '--radius-conditional-4': 'clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-4))',
  '--radius-conditional-5': 'clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-5))',
  '--radius-conditional-6': 'clamp(0px, calc(100vw - 100%) * 1e5, var(--radius-6))',
}


<|start_filename|>src/props.gradients.src.js<|end_filename|>
 // const conicgradients = [
 //   {
 //     gradient: `conic-gradient(
 //         from 90deg at bottom right,
 //         cyan, 
 //         rebeccapurple
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from .5turn at bottom center,
 //         lightblue, 
 //         white
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from 90deg at 40% -25%,
 //         #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, 
 //         #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         at bottom left,
 //         deeppink, 
 //         cyan
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from 90deg at 25% -10%, 
 //         #ff4500, #d3f340, #7bee85, #afeeee, #7bee85
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -90deg at top left,
 //         black, 
 //         white
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         at top right,
 //         lime, 
 //         cyan
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -.5turn at bottom right,
 //         deeppink, 
 //         cyan,
 //         rebeccapurple
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         at top right,
 //         slategray, 
 //         white
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from .5turn at 50% 110%,
 //         white, 
 //         orange
 //       )`,
 //   },
 //   {
 //       gradient: `conic-gradient(
 //           from .5turn at center left,
 //           lime, 
 //           cyan
 //         )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -90deg at 50% -25%,
 //         blue, 
 //         blueviolet
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from .5turn at top right,
 //         darkseagreen, 
 //         darkslategray
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from 90deg at 50% 0%, 
 //         #111, 50%, #222, #111
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         at top right,
 //         lightcyan, 
 //         lightblue
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -135deg at -10% center,
 //         #ffa500, #ff7715, #ff522a, #ff3f47, #ff5482, #ff69b4
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -90deg at 50% 105%,
 //         white, 
 //         orchid
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -90deg at 25% 115%,
 //         #ff0000, #ff0066, #ff00cc, #cc00ff, #6600ff, 
 //         #0000ff, #0000ff, #0000ff, #0000ff
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -90deg at bottom center,
 //         papayawhip, 
 //         peachpuff
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -270deg at 50% -5%,
 //         yellow, 
 //         yellowgreen
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -90deg at 75% -25%,
 //         sienna, 
 //         purple
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from 90deg at 50% 125%, 
 //         #20b2aa, #135da5, #0d0895, #4b0082,
 //         #4b0082, #0d0895, #135da5, #20b2aa
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -270deg at 110% 50%,
 //         cadetblue, 
 //         darkgreen
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -270deg at 75% 110%,
 //         fuchsia, 
 //         floralwhite
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from -270deg at 75% 110%,
 //         midnightblue, 
 //         lawngreen
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from .5turn at bottom left,
 //         deeppink,
 //         rebeccapurple
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from 90deg at 50% 125%, 
 //         #1f005c, #003298, #005ac6, #007fdc, #00a2d3, #00c4ae, 
 //         #00e474, #00ff00, #1f005c, #003298, #005ac6, #007fdc, 
 //         #00a2d3, #00c4ae, #00e474, #00ff00
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         at 0% 0%,
 //         snow, 
 //         white
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         from .5turn at 0% 0%, 
 //         #00c476, 
 //         10%, 
 //         #82b0ff, 
 //         90%, 
 //         #00c476
 //       )`,
 //   },
 //   {
 //     gradient: `conic-gradient(
 //         at 125% 50%,
 //         #b78cf7, #ff7c94, #ffcf0d, #ff7c94, #b78cf7
 //       )`,
 //   },
 // ]

const linearURL = 'https://raw.githubusercontent.com/ghosh/uiGradients/master/gradients.json'
const uigradients = await(await fetch(linearURL)).json()

const linear = uigradients
  .slice(0, 30)
  .reduce((root, {colors}, i) =>
    root += `
    --gradient-${i+1}: linear-gradient(var(--op-gradient-direction),${colors.join(',')});`
  , ``)

 // const conic = conicgradients
 //   // .slice(0, 25)
 //   .reduce((root, {gradient}, i) =>
 //     root += `
 //     --conic-gradient-${i+1}: ${gradient
 //         .replace(/\s+/g, ' ')
 //         .trim()
 //         .replace(' from', 'from')
 //         .replace(' )', ')')
 //       };`
 //   , ``)

console.log(linear)
 // console.log(conic)

<|start_filename|>docsite/js/scrollspy.js<|end_filename|>
let containers = [];
let linkMap = {};
let matches = new Set();
const scrollNavLinkSelector = '#scroll-nav li a';

// Find out what the IDs are for the parent containers
// <a href="#colors"></a> => <section id="colors"></section>
for(let link of document.querySelectorAll(scrollNavLinkSelector)) {
  const containerId = link.href.replace(`${location.origin}/`, '');
  const container = document.querySelector(containerId);
  containers = [...containers, container];
  linkMap[containerId] = document.querySelector(`a[href="${containerId}"]`);
}

let observer = new IntersectionObserver(entries => {
  for(let entry of entries) {
    // Get the id of the container
    const id = entry.target.id;
    // Find it's corresponding link
    const link = linkMap[`#` + id];
    // Highlight the link of the interesecting container
    // and remove any existing containers
    if(entry.isIntersecting) {
      link.classList.add('in-view')
      for (let match of matches) {
        const matchedLink = linkMap[`#${match}`];
        matchedLink.classList.remove('in-view')
        matches.delete(id);
      }
      matches.add(id);
    } else {
      // Delete entries once they no longer intersect
      link.classList.remove('in-view')
      matches.delete(id);
    }
  }
  // Set a threshold of 10% of the target's visibility to trigger the 
  // observer's calback. This will trigger the new section faster and
  // help keep multiple sections higlighted.
}, { threshold: .1 });

for (let container of containers) {
  observer.observe(container);      
}

<|start_filename|>src/props.orange.css<|end_filename|>
:where(html) {
  --orange-0: #fff4e6;
  --orange-1: #ffe8cc;
  --orange-2: #ffd8a8;
  --orange-3: #ffc078;
  --orange-4: #ffa94d;
  --orange-5: #ff922b;
  --orange-6: #fd7e14;
  --orange-7: #f76707;
  --orange-8: #e8590c;
  --orange-9: #d9480f;
}


<|start_filename|>src/props.grape.css<|end_filename|>
:where(html) {
  --grape-0: #f8f0fc;
  --grape-1: #f3d9fa;
  --grape-2: #eebefa;
  --grape-3: #e599f7;
  --grape-4: #da77f2;
  --grape-5: #cc5de8;
  --grape-6: #be4bdb;
  --grape-7: #ae3ec9;
  --grape-8: #9c36b5;
  --grape-9: #862e9c;
}


<|start_filename|>src/props.lime.css<|end_filename|>
:where(html) {
  --lime-0: #f4fce3;
  --lime-1: #e9fac8;
  --lime-2: #d8f5a2;
  --lime-3: #c0eb75;
  --lime-4: #a9e34b;
  --lime-5: #94d82d;
  --lime-6: #82c91e;
  --lime-7: #74b816;
  --lime-8: #66a80f;
  --lime-9: #5c940d;
}


<|start_filename|>src/props.violet.css<|end_filename|>
:where(html) {
  --violet-0: #f3f0ff;
  --violet-1: #e5dbff;
  --violet-2: #d0bfff;
  --violet-3: #b197fc;
  --violet-4: #9775fa;
  --violet-5: #845ef7;
  --violet-6: #7950f2;
  --violet-7: #7048e8;
  --violet-8: #6741d9;
  --violet-9: #5f3dc4;
}


<|start_filename|>src/props.blue.css<|end_filename|>
:where(html) {
  --blue-0: #e7f5ff;
  --blue-1: #d0ebff;
  --blue-2: #a5d8ff;
  --blue-3: #74c0fc;
  --blue-4: #4dabf7;
  --blue-5: #339af0;
  --blue-6: #228be6;
  --blue-7: #1c7ed6;
  --blue-8: #1971c2;
  --blue-9: #1864ab;
}
