lookbook 2.0.0.beta.6 → 2.0.0.beta.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bfe0ace7c0c83d2cb22ac89815ccb492dd5c8fc16ad4b33c905caae04f942fec
-  data.tar.gz: f8c0fd31b102ab2e6846c9990574f0b1404025eec8b9d5670e61404d0590a83d
+  metadata.gz: 2aeae40db8c7d4b78350a2de8a0b95cdf2728e539bd7875a9c7562116db2bca4
+  data.tar.gz: a9167271b7ba9af1942b13ef871b045f76c5a71ff7dc6e1771c5fae94934abc0
 SHA512:
-  metadata.gz: 70b9c6dec1a29fbc3a2287377f9f69010c6fafac082478db74690b0ca1a746f617046f0f02b0edecc557d6aef7e8e572a73e03a9acd119f8ee3cfd7b5ba79f01
-  data.tar.gz: 6a1870ef7600be6280e7d26c4337c99bc60bc3ffd47998ee313386d6d259a14e0e00fcff6e85a232f6f7120cb3b2b6d6df5a6b0b1383d8154f4d46d195890013
+  metadata.gz: 858c8effb4094dbd6aba5cb125b0e241e6c8f49959fb7437ce96bd1925afb9994d8d11cda03ef456823627f6af2732cfddbdf96e897e3bdb3fecc0081755e356
+  data.tar.gz: 66680a4c10c8be27d25a4cf790d3833a2d93b6ffcef1ca9c965f27f350962d4d000c668820b59ac02326b783db25c5f9499ca4994afe2fde0340e5c8d3df89bf

data/assets/css/fonts.css

@@ -0,0 +1,33 @@
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("../fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("../fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
+}
+
+@font-face {
+  font-family: "Source Code Variable";
+  font-weight: 200 900;
+  font-style: normal;
+  font-stretch: normal;
+  src: url("../fonts/SourceCodeVariable-Roman.ttf.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Source Code Variable";
+  font-weight: 200 900;
+  font-style: italic;
+  font-stretch: normal;
+  src: url("../fonts/SourceCodeVariable-Italic.ttf.woff2") format("woff2");
+}

data/assets/css/lookbook.css

@@ -0,0 +1,145 @@
+@import "./fonts.css";
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@import "./tooltip.css";
+
+@import-glob "../../app/components/lookbook/**/*/component.css";
+
+@layer base {
+  html {
+    @apply scroll-smooth h-screen;
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    html {
+      @apply scroll-auto;
+    }
+  }
+
+  body {
+    @apply text-lookbook-text font-sans text-sm antialiased overflow-hidden;
+  }
+
+  [x-cloak] {
+    @apply !hidden;
+  }
+
+  pre[class*="language-"] {
+    @apply !p-0 !m-0;
+  }
+
+  ::-webkit-scrollbar {
+    @apply w-1 h-1;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply transition-colors rounded-full	bg-clip-content bg-lookbook-scrollbar;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-lookbook-scrollbar-hover;
+  }
+}
+
+@layer utilities {
+  .bg-checked {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23f3f3f3' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
+  }
+}
+
+@layer components {
+  [type="text"],
+  [type="email"],
+  [type="url"],
+  [type="password"],
+  [type="number"],
+  [type="date"],
+  [type="datetime-local"],
+  [type="month"],
+  [type="search"],
+  [type="tel"],
+  [type="time"],
+  [type="week"],
+  textarea,
+  select {
+    @apply text-lookbook-input-text placeholder:text-lookbook-input-text-placeholder placeholder:italic;
+    @apply border-lookbook-input-border focus:ring-lookbook-input-border-focus focus:border-lookbook-input-border-focus;
+    @apply rounded-md text-sm w-full bg-lookbook-input-bg block;
+  }
+
+  input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+    width: 100%;
+  }
+
+  input[type="range"]:focus {
+    outline: none;
+  }
+
+  input[type="range"]::-webkit-slider-runnable-track {
+    @apply bg-lookbook-input-toggle;
+    border-radius: 0.5rem;
+    height: 0.5rem;
+  }
+
+  input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    @apply bg-lookbook-input-toggle-active;
+    margin-top: -4px;
+    border-radius: 0.5rem;
+    height: 1rem;
+    width: 1rem;
+  }
+
+  input[type="range"]::-moz-range-track {
+    @apply bg-lookbook-input-toggle;
+    border-radius: 0.5rem;
+    height: 0.5rem;
+  }
+
+  input[type="range"]::-moz-range-thumb {
+    @apply bg-lookbook-input-toggle-active;
+    border: none;
+    border-radius: 0.5rem;
+    height: 1rem;
+    width: 1rem;
+  }
+
+  input[type="range"]:focus::-webkit-slider-thumb,
+  input[type="range"]:focus::-moz-range-thumb {
+    @apply outline-1 outline-lookbook-input-toggle-active outline-offset-2;
+  }
+
+  input[type="color"] {
+    -webkit-appearance: none;
+    width: 46px;
+    @apply border border-lookbook-input-border rounded-lg cursor-pointer;
+  }
+
+  input[type="color"]::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  input[type="color"]::-webkit-color-swatch {
+    @apply border-0 rounded-lg;
+  }
+
+  select.compact {
+    font-size: 0.8rem;
+    line-height: 1.1rem;
+    border-radius: 0.375rem;
+    padding: 0.26rem 1.5rem 0.26rem 0.6rem;
+    background-size: 1.2em 1.2em;
+    background-position: right 0.4rem center;
+  }
+}

data/assets/css/themes/blue.css

@@ -0,0 +1,76 @@
+:root {
+  --lookbook-white: theme("colors.white");
+  --lookbook-accent-50: theme("colors.blue.50");
+  --lookbook-accent-100: theme("colors.blue.100");
+  --lookbook-accent-200: theme("colors.blue.200");
+  --lookbook-accent-300: theme("colors.blue.300");
+  --lookbook-accent-400: theme("colors.blue.400");
+  --lookbook-accent-500: theme("colors.blue.500");
+  --lookbook-accent-600: theme("colors.blue.600");
+  --lookbook-accent-700: theme("colors.blue.700");
+  --lookbook-accent-800: theme("colors.blue.800");
+  --lookbook-accent-900: theme("colors.blue.900");
+  --lookbook-base-50: theme("colors.zinc.50");
+  --lookbook-base-100: theme("colors.zinc.100");
+  --lookbook-base-200: theme("colors.zinc.200");
+  --lookbook-base-300: theme("colors.zinc.300");
+  --lookbook-base-400: theme("colors.zinc.400");
+  --lookbook-base-500: theme("colors.zinc.500");
+  --lookbook-base-600: theme("colors.zinc.600");
+  --lookbook-base-700: theme("colors.zinc.700");
+  --lookbook-base-800: theme("colors.zinc.800");
+  --lookbook-base-900: theme("colors.zinc.900");
+  --lookbook-text: var(--lookbook-base-800);
+  --lookbook-divider: var(--lookbook-base-300);
+  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
+  --lookbook-icon-button-stroke: var(--lookbook-base-400);
+  --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
+  --lookbook-button-bg: var(--lookbook-accent-500);
+  --lookbook-button-bg-hover: var(--lookbook-accent-600);
+  --lookbook-button-text: var(--lookbook-white);
+  --lookbook-tooltip-bg: var(--lookbook-accent-500);
+  --lookbook-tooltip-text: var(--lookbook-white);
+  --lookbook-dropdown-bg: var(--lookbook-toolbar-bg);
+  --lookbook-dropdown-text: var(--lookbook-text);
+  --lookbook-dropdown-divider: var(--lookbook-divider);
+  --lookbook-scrollbar: var(--lookbook-base-200);
+  --lookbook-scrollbar-hover: var(--lookbook-base-300);
+  --lookbook-toolbar-bg: var(--lookbook-white);
+  --lookbook-toolbar-divider: var(--lookbook-divider);
+  --lookbook-nav-text: var(--lookbook-text);
+  --lookbook-nav-toggle: var(--lookbook-base-500);
+  --lookbook-nav-icon-stroke: var(--lookbook-accent-500);
+  --lookbook-nav-item-hover: var(--lookbook-base-100);
+  --lookbook-nav-item-active: var(--lookbook-accent-50);
+  --lookbook-input-bg: var(--lookbook-white);
+  --lookbook-input-border: var(--lookbook-base-300);
+  --lookbook-input-border-focus: var(--lookbook-accent-200);
+  --lookbook-input-text: var(--lookbook-base-600);
+  --lookbook-input-text-placeholder: var(--lookbook-base-400);
+  --lookbook-input-toggle: var(--lookbook-base-300);
+  --lookbook-input-toggle-active: var(--lookbook-accent-500);
+  --lookbook-prose-bg: var(--lookbook-white);
+  --lookbook-prose-text: var(--lookbook-base-600);
+  --lookbook-prose-link: var(--lookbook-accent-900);
+  --lookbook-tabs-text: var(--lookbook-base-500);
+  --lookbook-tabs-text-hover: var(--lookbook-base-700);
+  --lookbook-tabs-text-disabled: var(--lookbook-base-300);
+  --lookbook-tabs-border-active: var(--lookbook-accent-400);
+  --lookbook-viewport-handle: var(--lookbook-white);
+  --lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
+  --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
+  --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
+  --lookbook-sidebar-bg: var(--lookbook-base-50);
+  --lookbook-page-bg: var(--lookbook-white);
+  --lookbook-drawer-bg: var(--lookbook-base-50);
+  --lookbook-params-editor-bg: var(--lookbook-white);
+  --lookbook-header-bg: var(--lookbook-accent-600);
+  --lookbook-header-text: var(--lookbook-white);
+  --lookbook-header-border: var(--lookbook-accent-700);
+  --lookbook-message-bg: var(--lookbook-white);
+  --lookbook-message-border: var(--lookbook-divider);
+  --lookbook-message-title: var(--lookbook-base-600);
+  --lookbook-message-text: var(--lookbook-text);
+  --lookbook-embed-title: var(--lookbook-text);
+  --lookbook-branding-text: var(--lookbook-header-text);
+}

data/assets/css/themes/green.css

@@ -0,0 +1,76 @@
+:root {
+  --lookbook-white: theme("colors.white");
+  --lookbook-accent-50: theme("colors.green.50");
+  --lookbook-accent-100: theme("colors.green.100");
+  --lookbook-accent-200: theme("colors.green.200");
+  --lookbook-accent-300: theme("colors.green.300");
+  --lookbook-accent-400: theme("colors.green.400");
+  --lookbook-accent-500: theme("colors.green.500");
+  --lookbook-accent-600: theme("colors.green.600");
+  --lookbook-accent-700: theme("colors.green.700");
+  --lookbook-accent-800: theme("colors.green.800");
+  --lookbook-accent-900: theme("colors.green.900");
+  --lookbook-base-50: theme("colors.zinc.50");
+  --lookbook-base-100: theme("colors.zinc.100");
+  --lookbook-base-200: theme("colors.zinc.200");
+  --lookbook-base-300: theme("colors.zinc.300");
+  --lookbook-base-400: theme("colors.zinc.400");
+  --lookbook-base-500: theme("colors.zinc.500");
+  --lookbook-base-600: theme("colors.zinc.600");
+  --lookbook-base-700: theme("colors.zinc.700");
+  --lookbook-base-800: theme("colors.zinc.800");
+  --lookbook-base-900: theme("colors.zinc.900");
+  --lookbook-text: var(--lookbook-base-800);
+  --lookbook-divider: var(--lookbook-base-300);
+  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
+  --lookbook-icon-button-stroke: var(--lookbook-base-400);
+  --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
+  --lookbook-button-bg: var(--lookbook-accent-500);
+  --lookbook-button-bg-hover: var(--lookbook-accent-600);
+  --lookbook-button-text: var(--lookbook-white);
+  --lookbook-tooltip-bg: var(--lookbook-accent-500);
+  --lookbook-tooltip-text: var(--lookbook-white);
+  --lookbook-dropdown-bg: var(--lookbook-toolbar-bg);
+  --lookbook-dropdown-text: var(--lookbook-text);
+  --lookbook-dropdown-divider: var(--lookbook-divider);
+  --lookbook-scrollbar: var(--lookbook-base-200);
+  --lookbook-scrollbar-hover: var(--lookbook-base-300);
+  --lookbook-toolbar-bg: var(--lookbook-white);
+  --lookbook-toolbar-divider: var(--lookbook-divider);
+  --lookbook-nav-text: var(--lookbook-text);
+  --lookbook-nav-toggle: var(--lookbook-base-500);
+  --lookbook-nav-icon-stroke: var(--lookbook-accent-500);
+  --lookbook-nav-item-hover: var(--lookbook-base-100);
+  --lookbook-nav-item-active: var(--lookbook-accent-50);
+  --lookbook-input-bg: var(--lookbook-white);
+  --lookbook-input-border: var(--lookbook-base-300);
+  --lookbook-input-border-focus: var(--lookbook-accent-200);
+  --lookbook-input-text: var(--lookbook-base-600);
+  --lookbook-input-text-placeholder: var(--lookbook-base-400);
+  --lookbook-input-toggle: var(--lookbook-base-300);
+  --lookbook-input-toggle-active: var(--lookbook-accent-500);
+  --lookbook-prose-bg: var(--lookbook-white);
+  --lookbook-prose-text: var(--lookbook-base-600);
+  --lookbook-prose-link: var(--lookbook-accent-900);
+  --lookbook-tabs-text: var(--lookbook-base-500);
+  --lookbook-tabs-text-hover: var(--lookbook-base-700);
+  --lookbook-tabs-text-disabled: var(--lookbook-base-300);
+  --lookbook-tabs-border-active: var(--lookbook-accent-400);
+  --lookbook-viewport-handle: var(--lookbook-white);
+  --lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
+  --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
+  --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
+  --lookbook-sidebar-bg: var(--lookbook-base-50);
+  --lookbook-page-bg: var(--lookbook-white);
+  --lookbook-drawer-bg: var(--lookbook-base-50);
+  --lookbook-params-editor-bg: var(--lookbook-white);
+  --lookbook-header-bg: var(--lookbook-accent-600);
+  --lookbook-header-text: var(--lookbook-white);
+  --lookbook-header-border: var(--lookbook-accent-700);
+  --lookbook-message-bg: var(--lookbook-white);
+  --lookbook-message-border: var(--lookbook-divider);
+  --lookbook-message-title: var(--lookbook-base-600);
+  --lookbook-message-text: var(--lookbook-text);
+  --lookbook-embed-title: var(--lookbook-text);
+  --lookbook-branding-text: var(--lookbook-header-text);
+}

data/assets/css/themes/indigo.css

@@ -0,0 +1,76 @@
+:root {
+  --lookbook-white: theme("colors.white");
+  --lookbook-accent-50: theme("colors.indigo.50");
+  --lookbook-accent-100: theme("colors.indigo.100");
+  --lookbook-accent-200: theme("colors.indigo.200");
+  --lookbook-accent-300: theme("colors.indigo.300");
+  --lookbook-accent-400: theme("colors.indigo.400");
+  --lookbook-accent-500: theme("colors.indigo.500");
+  --lookbook-accent-600: theme("colors.indigo.600");
+  --lookbook-accent-700: theme("colors.indigo.700");
+  --lookbook-accent-800: theme("colors.indigo.800");
+  --lookbook-accent-900: theme("colors.indigo.900");
+  --lookbook-base-50: theme("colors.zinc.50");
+  --lookbook-base-100: theme("colors.zinc.100");
+  --lookbook-base-200: theme("colors.zinc.200");
+  --lookbook-base-300: theme("colors.zinc.300");
+  --lookbook-base-400: theme("colors.zinc.400");
+  --lookbook-base-500: theme("colors.zinc.500");
+  --lookbook-base-600: theme("colors.zinc.600");
+  --lookbook-base-700: theme("colors.zinc.700");
+  --lookbook-base-800: theme("colors.zinc.800");
+  --lookbook-base-900: theme("colors.zinc.900");
+  --lookbook-text: var(--lookbook-base-800);
+  --lookbook-divider: var(--lookbook-base-300);
+  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
+  --lookbook-icon-button-stroke: var(--lookbook-base-400);
+  --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
+  --lookbook-button-bg: var(--lookbook-accent-500);
+  --lookbook-button-bg-hover: var(--lookbook-accent-600);
+  --lookbook-button-text: var(--lookbook-white);
+  --lookbook-tooltip-bg: var(--lookbook-accent-500);
+  --lookbook-tooltip-text: var(--lookbook-white);
+  --lookbook-dropdown-bg: var(--lookbook-toolbar-bg);
+  --lookbook-dropdown-text: var(--lookbook-text);
+  --lookbook-dropdown-divider: var(--lookbook-divider);
+  --lookbook-scrollbar: var(--lookbook-base-200);
+  --lookbook-scrollbar-hover: var(--lookbook-base-300);
+  --lookbook-toolbar-bg: var(--lookbook-white);
+  --lookbook-toolbar-divider: var(--lookbook-divider);
+  --lookbook-nav-text: var(--lookbook-text);
+  --lookbook-nav-toggle: var(--lookbook-base-500);
+  --lookbook-nav-icon-stroke: var(--lookbook-accent-500);
+  --lookbook-nav-item-hover: var(--lookbook-base-100);
+  --lookbook-nav-item-active: var(--lookbook-accent-50);
+  --lookbook-input-bg: var(--lookbook-white);
+  --lookbook-input-border: var(--lookbook-base-300);
+  --lookbook-input-border-focus: var(--lookbook-accent-200);
+  --lookbook-input-text: var(--lookbook-base-600);
+  --lookbook-input-text-placeholder: var(--lookbook-base-400);
+  --lookbook-input-toggle: var(--lookbook-base-300);
+  --lookbook-input-toggle-active: var(--lookbook-accent-500);
+  --lookbook-prose-bg: var(--lookbook-white);
+  --lookbook-prose-text: var(--lookbook-base-600);
+  --lookbook-prose-link: var(--lookbook-accent-900);
+  --lookbook-tabs-text: var(--lookbook-base-500);
+  --lookbook-tabs-text-hover: var(--lookbook-base-700);
+  --lookbook-tabs-text-disabled: var(--lookbook-base-300);
+  --lookbook-tabs-border-active: var(--lookbook-accent-400);
+  --lookbook-viewport-handle: var(--lookbook-white);
+  --lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
+  --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
+  --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
+  --lookbook-sidebar-bg: var(--lookbook-base-50);
+  --lookbook-page-bg: var(--lookbook-white);
+  --lookbook-drawer-bg: var(--lookbook-base-50);
+  --lookbook-params-editor-bg: var(--lookbook-white);
+  --lookbook-header-bg: var(--lookbook-accent-600);
+  --lookbook-header-text: var(--lookbook-white);
+  --lookbook-header-border: var(--lookbook-accent-700);
+  --lookbook-message-bg: var(--lookbook-white);
+  --lookbook-message-border: var(--lookbook-divider);
+  --lookbook-message-title: var(--lookbook-base-600);
+  --lookbook-message-text: var(--lookbook-text);
+  --lookbook-embed-title: var(--lookbook-text);
+  --lookbook-branding-text: var(--lookbook-header-text);
+}

data/assets/css/themes/rose.css

@@ -0,0 +1,76 @@
+:root {
+  --lookbook-white: theme("colors.white");
+  --lookbook-accent-50: theme("colors.rose.50");
+  --lookbook-accent-100: theme("colors.rose.100");
+  --lookbook-accent-200: theme("colors.rose.200");
+  --lookbook-accent-300: theme("colors.rose.300");
+  --lookbook-accent-400: theme("colors.rose.400");
+  --lookbook-accent-500: theme("colors.rose.500");
+  --lookbook-accent-600: theme("colors.rose.600");
+  --lookbook-accent-700: theme("colors.rose.700");
+  --lookbook-accent-800: theme("colors.rose.800");
+  --lookbook-accent-900: theme("colors.rose.900");
+  --lookbook-base-50: theme("colors.zinc.50");
+  --lookbook-base-100: theme("colors.zinc.100");
+  --lookbook-base-200: theme("colors.zinc.200");
+  --lookbook-base-300: theme("colors.zinc.300");
+  --lookbook-base-400: theme("colors.zinc.400");
+  --lookbook-base-500: theme("colors.zinc.500");
+  --lookbook-base-600: theme("colors.zinc.600");
+  --lookbook-base-700: theme("colors.zinc.700");
+  --lookbook-base-800: theme("colors.zinc.800");
+  --lookbook-base-900: theme("colors.zinc.900");
+  --lookbook-text: var(--lookbook-base-800);
+  --lookbook-divider: var(--lookbook-base-300);
+  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
+  --lookbook-icon-button-stroke: var(--lookbook-base-400);
+  --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
+  --lookbook-button-bg: var(--lookbook-accent-500);
+  --lookbook-button-bg-hover: var(--lookbook-accent-600);
+  --lookbook-button-text: var(--lookbook-white);
+  --lookbook-tooltip-bg: var(--lookbook-accent-500);
+  --lookbook-tooltip-text: var(--lookbook-white);
+  --lookbook-dropdown-bg: var(--lookbook-toolbar-bg);
+  --lookbook-dropdown-text: var(--lookbook-text);
+  --lookbook-dropdown-divider: var(--lookbook-divider);
+  --lookbook-scrollbar: var(--lookbook-base-200);
+  --lookbook-scrollbar-hover: var(--lookbook-base-300);
+  --lookbook-toolbar-bg: var(--lookbook-white);
+  --lookbook-toolbar-divider: var(--lookbook-divider);
+  --lookbook-nav-text: var(--lookbook-text);
+  --lookbook-nav-toggle: var(--lookbook-base-500);
+  --lookbook-nav-icon-stroke: var(--lookbook-accent-500);
+  --lookbook-nav-item-hover: var(--lookbook-base-100);
+  --lookbook-nav-item-active: var(--lookbook-accent-50);
+  --lookbook-input-bg: var(--lookbook-white);
+  --lookbook-input-border: var(--lookbook-base-300);
+  --lookbook-input-border-focus: var(--lookbook-accent-200);
+  --lookbook-input-text: var(--lookbook-base-600);
+  --lookbook-input-text-placeholder: var(--lookbook-base-400);
+  --lookbook-input-toggle: var(--lookbook-base-300);
+  --lookbook-input-toggle-active: var(--lookbook-accent-500);
+  --lookbook-prose-bg: var(--lookbook-white);
+  --lookbook-prose-text: var(--lookbook-base-600);
+  --lookbook-prose-link: var(--lookbook-accent-900);
+  --lookbook-tabs-text: var(--lookbook-base-500);
+  --lookbook-tabs-text-hover: var(--lookbook-base-700);
+  --lookbook-tabs-text-disabled: var(--lookbook-base-300);
+  --lookbook-tabs-border-active: var(--lookbook-accent-400);
+  --lookbook-viewport-handle: var(--lookbook-white);
+  --lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
+  --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
+  --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
+  --lookbook-sidebar-bg: var(--lookbook-base-50);
+  --lookbook-page-bg: var(--lookbook-white);
+  --lookbook-drawer-bg: var(--lookbook-base-50);
+  --lookbook-params-editor-bg: var(--lookbook-white);
+  --lookbook-header-bg: var(--lookbook-accent-600);
+  --lookbook-header-text: var(--lookbook-white);
+  --lookbook-header-border: var(--lookbook-accent-700);
+  --lookbook-message-bg: var(--lookbook-white);
+  --lookbook-message-border: var(--lookbook-divider);
+  --lookbook-message-title: var(--lookbook-base-600);
+  --lookbook-message-text: var(--lookbook-text);
+  --lookbook-embed-title: var(--lookbook-text);
+  --lookbook-branding-text: var(--lookbook-header-text);
+}

data/assets/css/themes/zinc.css

@@ -0,0 +1,76 @@
+:root {
+  --lookbook-white: theme("colors.white");
+  --lookbook-accent-50: theme("colors.zinc.50");
+  --lookbook-accent-100: theme("colors.zinc.100");
+  --lookbook-accent-200: theme("colors.zinc.200");
+  --lookbook-accent-300: theme("colors.zinc.300");
+  --lookbook-accent-400: theme("colors.zinc.400");
+  --lookbook-accent-500: theme("colors.zinc.500");
+  --lookbook-accent-600: theme("colors.zinc.600");
+  --lookbook-accent-700: theme("colors.zinc.700");
+  --lookbook-accent-800: theme("colors.zinc.800");
+  --lookbook-accent-900: theme("colors.zinc.900");
+  --lookbook-base-50: theme("colors.zinc.50");
+  --lookbook-base-100: theme("colors.zinc.100");
+  --lookbook-base-200: theme("colors.zinc.200");
+  --lookbook-base-300: theme("colors.zinc.300");
+  --lookbook-base-400: theme("colors.zinc.400");
+  --lookbook-base-500: theme("colors.zinc.500");
+  --lookbook-base-600: theme("colors.zinc.600");
+  --lookbook-base-700: theme("colors.zinc.700");
+  --lookbook-base-800: theme("colors.zinc.800");
+  --lookbook-base-900: theme("colors.zinc.900");
+  --lookbook-text: var(--lookbook-base-800);
+  --lookbook-divider: var(--lookbook-base-300);
+  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
+  --lookbook-icon-button-stroke: var(--lookbook-base-400);
+  --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
+  --lookbook-button-bg: var(--lookbook-accent-500);
+  --lookbook-button-bg-hover: var(--lookbook-accent-600);
+  --lookbook-button-text: var(--lookbook-white);
+  --lookbook-tooltip-bg: var(--lookbook-accent-500);
+  --lookbook-tooltip-text: var(--lookbook-white);
+  --lookbook-dropdown-bg: var(--lookbook-toolbar-bg);
+  --lookbook-dropdown-text: var(--lookbook-text);
+  --lookbook-dropdown-divider: var(--lookbook-divider);
+  --lookbook-scrollbar: var(--lookbook-base-200);
+  --lookbook-scrollbar-hover: var(--lookbook-base-300);
+  --lookbook-toolbar-bg: var(--lookbook-white);
+  --lookbook-toolbar-divider: var(--lookbook-divider);
+  --lookbook-nav-text: var(--lookbook-text);
+  --lookbook-nav-toggle: var(--lookbook-base-500);
+  --lookbook-nav-icon-stroke: var(--lookbook-accent-500);
+  --lookbook-nav-item-hover: var(--lookbook-base-100);
+  --lookbook-nav-item-active: var(--lookbook-accent-50);
+  --lookbook-input-bg: var(--lookbook-white);
+  --lookbook-input-border: var(--lookbook-base-300);
+  --lookbook-input-border-focus: var(--lookbook-accent-200);
+  --lookbook-input-text: var(--lookbook-base-600);
+  --lookbook-input-text-placeholder: var(--lookbook-base-400);
+  --lookbook-input-toggle: var(--lookbook-base-300);
+  --lookbook-input-toggle-active: var(--lookbook-accent-500);
+  --lookbook-prose-bg: var(--lookbook-white);
+  --lookbook-prose-text: var(--lookbook-base-600);
+  --lookbook-prose-link: var(--lookbook-accent-900);
+  --lookbook-tabs-text: var(--lookbook-base-500);
+  --lookbook-tabs-text-hover: var(--lookbook-base-700);
+  --lookbook-tabs-text-disabled: var(--lookbook-base-300);
+  --lookbook-tabs-border-active: var(--lookbook-accent-400);
+  --lookbook-viewport-handle: var(--lookbook-white);
+  --lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
+  --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
+  --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
+  --lookbook-sidebar-bg: var(--lookbook-base-50);
+  --lookbook-page-bg: var(--lookbook-white);
+  --lookbook-drawer-bg: var(--lookbook-base-50);
+  --lookbook-params-editor-bg: var(--lookbook-white);
+  --lookbook-header-bg: var(--lookbook-accent-600);
+  --lookbook-header-text: var(--lookbook-white);
+  --lookbook-header-border: var(--lookbook-accent-700);
+  --lookbook-message-bg: var(--lookbook-white);
+  --lookbook-message-border: var(--lookbook-divider);
+  --lookbook-message-title: var(--lookbook-base-600);
+  --lookbook-message-text: var(--lookbook-text);
+  --lookbook-embed-title: var(--lookbook-text);
+  --lookbook-branding-text: var(--lookbook-header-text);
+}

data/assets/css/tooltip.css

@@ -0,0 +1,53 @@
+@import "tippy.js/dist/tippy";
+@import "tippy.js/dist/border";
+
+.tippy-box[data-theme~="tooltip"] {
+  @apply text-xs opacity-90;
+
+  background-color: var(--lookbook-tooltip-bg);
+  color: var(--lookbook-tooltip-text);
+
+  &[data-placement^="top"] > .tippy-arrow::before {
+    border-top-color: var(--lookbook-tooltip-bg);
+  }
+
+  &[data-placement^="bottom"] > .tippy-arrow::before {
+    border-bottom-color: var(--lookbook-tooltip-bg);
+  }
+
+  &[data-placement^="left"] > .tippy-arrow::before {
+    border-left-color: var(--lookbook-tooltip-bg);
+  }
+
+  &[data-placement^="right"] > .tippy-arrow::before {
+    border-right-color: var(--lookbook-tooltip-bg);
+  }
+}
+
+.tippy-box[data-theme~="menu"] {
+  @apply shadow-lg !max-w-none;
+
+  border: 1px solid var(--lookbook-dropdown-divider);
+  color: var(--lookbook-dropdown-text);
+  background: var(--lookbook-dropdown-bg);
+
+  & > .tippy-content {
+    @apply rounded p-0 overflow-hidden;
+  }
+
+  &[data-placement^="top"] > .tippy-arrow::before {
+    border-top-color: var(--lookbook-dropdown-bg);
+  }
+
+  &[data-placement^="bottom"] > .tippy-arrow::before {
+    border-bottom-color: var(--lookbook-dropdown-bg);
+  }
+
+  &[data-placement^="left"] > .tippy-arrow::before {
+    border-left-color: var(--lookbook-dropdown-bg);
+  }
+
+  &[data-placement^="right"] > .tippy-arrow::before {
+    border-right-color: var(--lookbook-dropdown-bg);
+  }
+}

data/assets/icons/accessibility.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="16" cy="4" r="1"/><path d="m18 19 1-7-5.87.94"/><path d="m5 8 3-3 5.5 3-2.21 3.1"/><path d="M4.24 14.48c-.19.58-.27 1.2-.23 1.84a5 5 0 0 0 5.31 4.67c.65-.04 1.25-.2 1.8-.46"/><path d="M13.76 17.52c.19-.58.27-1.2.23-1.84a5 5 0 0 0-5.31-4.67c-.65.04-1.25.2-1.8.46"/></svg>

data/assets/icons/activity.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>

data/assets/icons/air-vent.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 12H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><path d="M6 8h12"/><path d="M18.3 17.7a2.5 2.5 0 0 1-3.16 3.83 2.53 2.53 0 0 1-1.14-2V12"/><path d="M6.6 15.6A2 2 0 1 0 10 17v-5"/></svg>

data/assets/icons/airplay.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"/><polygon points="12 15 17 21 7 21 12 15"/></svg>

data/assets/icons/alarm-check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 21a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"/><path d="M5 3 2 6"/><path d="m22 6-3-3"/><path d="m6 19-2 2"/><path d="m18 19 2 2"/><path d="m9 13 2 2 4-4"/></svg>

data/assets/icons/alarm-clock-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.87 6.87a8 8 0 1 0 11.26 11.26"/><path d="M19.9 14.25A7.44 7.44 0 0 0 20 13a8 8 0 0 0-8-8 7.44 7.44 0 0 0-1.25.1"/><path d="m22 6-3-3"/><path d="m6 19-2 2"/><path d="m2 2 20 20"/><path d="M4 4 2 6"/></svg>

data/assets/icons/alarm-clock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2"/><path d="M5 3 2 6"/><path d="m22 6-3-3"/><path d="m6 19-2 2"/><path d="m18 19 2 2"/></svg>

data/assets/icons/alarm-minus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 21a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"/><path d="M5 3 2 6"/><path d="m22 6-3-3"/><path d="m6 19-2 2"/><path d="m18 19 2 2"/><path d="M9 13h6"/></svg>