@nonext/husk 0.2.3

package/dist/admin/tokens.css

@@ -0,0 +1,597 @@
+/* Husk design tokens.
+   Canonical source: .docs/styleguide/02-tokens.md section 2, 3 and the z-index utilities.
+   Values are copied, never invented. Changing one means changing the style guide in the
+   same commit. This file is imported by the admin stylesheet and by the playground. */
+
+:root {
+  /* Surfaces */
+  --color-surface-base: #111214;
+  --color-surface-sidebar: #101113;
+  --color-surface-raised: #191a1e;
+  --color-surface-card: #121315;
+  --color-surface-hover: #1c1e22;
+  --color-surface-active: #202227;
+  --color-surface-overlay: #18191d;
+  --color-surface-input: #151619;
+  --color-surface-disabled: #141517;
+
+  /* Text */
+  --color-text-primary: #f3f4f6;
+  --color-text-secondary: #bfc2c8;
+  --color-text-muted: #7b8089;
+  --color-text-faint: #575c65;
+  --color-text-disabled: #484c54;
+  --color-text-inverse: #111214;
+
+  /* Borders */
+  --color-border-subtle: rgba(255, 255, 255, 0.045);
+  --color-border-default: rgba(255, 255, 255, 0.07);
+  --color-border-strong: rgba(255, 255, 255, 0.11);
+  --color-border-active: rgba(255, 255, 255, 0.16);
+
+  /* Accent */
+  --color-accent-primary: #c52b8a;
+  --color-accent-magenta: #e32d7d;
+  --color-accent-violet: #7541d8;
+  --color-accent-violet-bright: #8547ee;
+  --color-accent-soft: rgba(197, 43, 138, 0.18);
+  --color-accent-hover: #d43796;
+  --color-accent-active: #b92580;
+
+  /* Semantic */
+  --color-success: #35b85a;
+  --color-success-muted: rgba(53, 184, 90, 0.14);
+  --color-warning: #d98b26;
+  --color-warning-muted: rgba(217, 139, 38, 0.14);
+  --color-danger: #d94b5f;
+  --color-danger-muted: rgba(217, 75, 95, 0.14);
+  --color-info: #5b8def;
+  --color-info-muted: rgba(91, 141, 239, 0.14);
+
+  /* Data series, fixed order */
+  --color-series-1: #c52b8a;
+  --color-series-2: #7541d8;
+  --color-series-3: #e32d7d;
+  --color-series-4: #5b8def;
+  --color-series-5: #35b85a;
+  --color-series-6: #d98b26;
+
+  /* Radius */
+  --radius-none: 0px;
+  --radius-xs: 3px;
+  --radius-sm: 5px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-full: 9999px;
+
+  /* Spacing */
+  --space-0: 0px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+
+  /* Motion */
+  --motion-fast: 100ms;
+  --motion-normal: 160ms;
+  --motion-slow: 220ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  /* Elevation */
+  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.28);
+
+  /* Focus */
+  --focus-ring-color: rgba(255, 255, 255, 0.14);
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+  --focus-field-ring-color: rgba(255, 255, 255, 0.06);
+  --focus-field-ring-offset: 1px;
+
+  /* Z-index */
+  --z-base: 0;
+  --z-sticky: 10;
+  --z-dropdown: 30;
+  --z-overlay: 40;
+  --z-modal: 50;
+  --z-toast: 60;
+  --z-tooltip: 70;
+
+  /* Component dimensions */
+  --control-sm: 30px;
+  --control-md: 36px;
+  --control-lg: 40px;
+  --sidebar-width: 280px;
+  --entry-sidebar-width: 280px;
+  --sidebar-item-height: 36px;
+  --menu-item-height: 34px;
+  --table-header-height: 36px;
+  --table-row-height: 40px;
+  --badge-height: 22px;
+  --status-dot-size: 6px;
+  --button-padding-inline: 14px;
+  --menu-padding-inline: 10px;
+  --toast-width: 360px;
+  --modal-width-sm: 420px;
+  --modal-width-md: 560px;
+  --modal-width-lg: 720px;
+  --modal-width-xl: 960px;
+  --scrollbar-width: 8px;
+  --icon-size: 16px;
+  --icon-stroke: 1.5;
+}
+
+@theme {
+  --font-sans:
+    var(--font-inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", sans-serif;
+
+  /* One 4px step, so p-1=4, p-2=8, p-3=12, p-4=16, p-5=20, p-6=24,
+     p-8=32, p-10=40, p-12=48, p-16=64. Only those steps are permitted. */
+  --spacing: 4px;
+
+  --color-surface-base: #111214;
+  --color-surface-sidebar: #101113;
+  --color-surface-raised: #191a1e;
+  --color-surface-card: #121315;
+  --color-surface-hover: #1c1e22;
+  --color-surface-active: #202227;
+  --color-surface-overlay: #18191d;
+  --color-surface-input: #151619;
+  --color-surface-disabled: #141517;
+
+  --color-text-primary: #f3f4f6;
+  --color-text-secondary: #bfc2c8;
+  --color-text-muted: #7b8089;
+  --color-text-faint: #575c65;
+  --color-text-disabled: #484c54;
+  --color-text-inverse: #111214;
+
+  --color-border-subtle: rgba(255, 255, 255, 0.045);
+  --color-border-default: rgba(255, 255, 255, 0.07);
+  --color-border-strong: rgba(255, 255, 255, 0.11);
+  --color-border-active: rgba(255, 255, 255, 0.16);
+
+  --color-accent-primary: #c52b8a;
+  --color-accent-magenta: #e32d7d;
+  --color-accent-violet: #7541d8;
+  --color-accent-violet-bright: #8547ee;
+  --color-accent-soft: rgba(197, 43, 138, 0.18);
+  --color-accent-hover: #d43796;
+  --color-accent-active: #b92580;
+
+  --color-success: #35b85a;
+  --color-success-muted: rgba(53, 184, 90, 0.14);
+  --color-warning: #d98b26;
+  --color-warning-muted: rgba(217, 139, 38, 0.14);
+  --color-danger: #d94b5f;
+  --color-danger-muted: rgba(217, 75, 95, 0.14);
+  --color-info: #5b8def;
+  --color-info-muted: rgba(91, 141, 239, 0.14);
+
+  --color-series-1: #c52b8a;
+  --color-series-2: #7541d8;
+  --color-series-3: #e32d7d;
+  --color-series-4: #5b8def;
+  --color-series-5: #35b85a;
+  --color-series-6: #d98b26;
+
+  --radius-xs: 3px;
+  --radius-sm: 5px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+
+  --text-display-sm: 28px;
+  --text-display-sm--line-height: 34px;
+  --text-display-sm--font-weight: 700;
+  --text-display-sm--letter-spacing: -0.02em;
+
+  --text-heading-lg: 24px;
+  --text-heading-lg--line-height: 30px;
+  --text-heading-lg--font-weight: 700;
+  --text-heading-lg--letter-spacing: -0.015em;
+
+  --text-heading-md: 18px;
+  --text-heading-md--line-height: 24px;
+  --text-heading-md--font-weight: 600;
+  --text-heading-md--letter-spacing: -0.01em;
+
+  --text-heading-sm: 15px;
+  --text-heading-sm--line-height: 20px;
+  --text-heading-sm--font-weight: 600;
+
+  --text-body: 14px;
+  --text-body--line-height: 20px;
+  --text-body--font-weight: 400;
+
+  --text-body-medium: 14px;
+  --text-body-medium--line-height: 20px;
+  --text-body-medium--font-weight: 500;
+
+  --text-body-sm: 13px;
+  --text-body-sm--line-height: 18px;
+  --text-body-sm--font-weight: 400;
+
+  --text-label: 12px;
+  --text-label--line-height: 16px;
+  --text-label--font-weight: 500;
+
+  --text-caption: 11px;
+  --text-caption--line-height: 15px;
+  --text-caption--font-weight: 400;
+
+  --text-micro: 10px;
+  --text-micro--line-height: 14px;
+  --text-micro--font-weight: 500;
+  --text-micro--letter-spacing: 0.04em;
+
+  --text-metric-lg: 30px;
+  --text-metric-lg--line-height: 34px;
+  --text-metric-lg--font-weight: 700;
+  --text-metric-lg--letter-spacing: -0.02em;
+
+  --text-metric-md: 24px;
+  --text-metric-md--line-height: 29px;
+  --text-metric-md--font-weight: 700;
+  --text-metric-md--letter-spacing: -0.015em;
+
+  --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.28);
+
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+}
+
+@layer utilities {
+  .z-sticky {
+    z-index: var(--z-sticky);
+  }
+  .z-dropdown {
+    z-index: var(--z-dropdown);
+  }
+  .z-overlay {
+    z-index: var(--z-overlay);
+  }
+  .z-modal {
+    z-index: var(--z-modal);
+  }
+  .z-toast {
+    z-index: var(--z-toast);
+  }
+  .z-tooltip {
+    z-index: var(--z-tooltip);
+  }
+}
+
+/* Focus rings as utilities, so a component never restates the values.
+   Canonical source: .docs/styleguide/01-foundations.md section 8. */
+@utility focus-ring {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: var(--focus-ring-offset);
+}
+
+@utility focus-field-ring {
+  border-color: var(--color-border-active);
+  outline: var(--focus-ring-width) solid var(--focus-field-ring-color);
+  outline-offset: var(--focus-field-ring-offset);
+}
+
+/* The one spinner animation: 800ms continuous linear rotation.
+   Canonical source: .docs/styleguide/04-components.md section 16. */
+@theme {
+  --animate-spinner: husk-spin 800ms linear infinite;
+
+  @keyframes husk-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
+
+/* The one state transition every interactive component uses.
+   Canonical source: .docs/styleguide/04-components.md section 1. */
+@utility state-transition {
+  transition:
+    background-color var(--motion-fast) var(--ease-standard),
+    border-color var(--motion-fast) var(--ease-standard),
+    color var(--motion-fast) var(--ease-standard),
+    opacity var(--motion-fast) var(--ease-standard);
+}
+
+/* The empty state description measure, 42ch, as a container token so no component has to
+   write it. Canonical source: .docs/styleguide/04-components.md section 15. */
+@theme {
+  --container-empty-state: 42ch;
+}
+
+/* The modal backdrop, the one place the system allows near-black.
+   Canonical source: .docs/styleguide/04-components.md section 12. */
+@theme {
+  --color-backdrop: rgba(0, 0, 0, 0.62);
+}
+
+/* Fixed overlay measures, as container tokens so max-w-* and min-w-* can name them
+   instead of a component restating the pixel value.
+   Canonical source: .docs/styleguide/04-components.md sections 11, 12, 13, 14. */
+@theme {
+  --container-menu: 180px;
+  --container-tooltip: 240px;
+  --container-toast: 360px;
+  --container-modal-sm: 420px;
+  --container-modal-md: 560px;
+  --container-modal-lg: 720px;
+  --container-modal-xl: 960px;
+}
+
+/* The modal body measure. A calc cannot live in @theme, so it is a utility.
+   Canonical source: .docs/styleguide/04-components.md section 12. */
+@utility modal-max-height {
+  max-height: calc(100dvh - 96px);
+}
+
+/* The focus ring for elements whose own edge would clip an outset ring: table rows and
+   tabs. Same ring, negative offset.
+   Canonical source: .docs/styleguide/01-foundations.md section 8,
+   .docs/styleguide/04-components.md sections 4 and 5. */
+@utility focus-ring-inset {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: calc(-1 * var(--focus-ring-offset));
+}
+
+/* Skeleton pulse and the two overlay entrances. No component writes a duration or an
+   easing of its own.
+   Canonical source: .docs/styleguide/04-components.md sections 11, 14, 16. */
+@theme {
+  --animate-skeleton: husk-skeleton 1.4s var(--ease-standard) infinite;
+  --animate-menu-in: husk-menu-in var(--motion-slow) var(--ease-standard);
+  --animate-menu-in-up: husk-menu-in-up var(--motion-slow) var(--ease-standard);
+  --animate-toast-in: husk-toast-in var(--motion-slow) var(--ease-standard);
+
+  @keyframes husk-skeleton {
+    0%,
+    100% {
+      background-color: var(--color-surface-raised);
+    }
+    50% {
+      background-color: var(--color-surface-hover);
+    }
+  }
+
+  @keyframes husk-menu-in {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* Same entrance as husk-menu-in, direction inverted: a menu opening upward (side="top",
+     04 Components section 11) grows from the trigger toward negative Y, so the panel starts
+     below its resting position instead of above it. */
+  @keyframes husk-menu-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes husk-toast-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}
+
+/* The switch thumb transition. The global state-transition does not cover transform, and
+   the switch is the only control in the system whose thumb moves.
+   Canonical source: .docs/styleguide/04-components.md section 3.6. */
+@utility switch-transition {
+  transition:
+    background-color var(--motion-fast) var(--ease-standard),
+    transform var(--motion-fast) var(--ease-standard);
+}
+
+/* The application shell: the sidebar measure as a container token so a component can say
+   `w-sidebar`, and the two-column grid as a utility because a grid template cannot be a
+   container token. Canonical source: .docs/styleguide/03-layout.md section 1. */
+@theme {
+  --container-sidebar: 280px;
+}
+
+@utility shell-grid {
+  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
+}
+
+/* The entry editor's two columns: the generated field stack, then the metadata sidebar.
+   A grid template cannot be a container token, so it is a utility, like shell-grid.
+   Canonical source: .docs/styleguide/03-layout.md section 5.2. */
+@utility entry-grid {
+  grid-template-columns: minmax(0, 1fr) var(--entry-sidebar-width);
+}
+
+/* The one reading measure in the system, 72ch, as a container token so a page header or a
+   settings description can say `max-w-reading` instead of restating it.
+   Canonical source: .docs/styleguide/03-layout.md section 1. */
+@theme {
+  --container-reading: 72ch;
+}
+
+/* Rich text body typography, and the minimum height of the editable surface.
+   Canonical source: .docs/styleguide/04-components.md section 3.9.
+
+   It is CSS rather than Tailwind utilities because the editor writes real elements into a
+   contenteditable element at runtime: there is no JSX to hang a class on. Every value below
+   is a token, and the table in section 3.9 is the whole permitted set. A selector that is not
+   in that table does not belong here, because a mark with no styling is a mark the format
+   does not have. */
+@theme {
+  --richtext-min-height: 160px;
+}
+
+@utility richtext-content {
+  min-height: var(--richtext-min-height);
+  padding: calc(var(--spacing) * 3);
+  font-size: var(--text-body);
+  line-height: var(--text-body--line-height);
+  color: var(--color-text-primary);
+  cursor: text;
+
+  & > :first-child {
+    margin-top: 0;
+  }
+
+  & > :last-child {
+    margin-bottom: 0;
+  }
+
+  & p {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
+
+  & h2 {
+    margin-top: calc(var(--spacing) * 5);
+    margin-bottom: calc(var(--spacing) * 2);
+    font-size: var(--text-heading-md);
+    line-height: var(--text-heading-md--line-height);
+    font-weight: var(--text-heading-md--font-weight);
+    letter-spacing: var(--text-heading-md--letter-spacing);
+  }
+
+  & h3 {
+    margin-top: calc(var(--spacing) * 5);
+    margin-bottom: calc(var(--spacing) * 2);
+    font-size: var(--text-heading-sm);
+    line-height: var(--text-heading-sm--line-height);
+    font-weight: var(--text-heading-sm--font-weight);
+  }
+
+  & ul,
+  & ol {
+    margin-bottom: calc(var(--spacing) * 3);
+    padding-inline-start: calc(var(--spacing) * 5);
+    color: var(--color-text-muted);
+  }
+
+  & ul {
+    list-style-type: disc;
+  }
+
+  & ol {
+    list-style-type: decimal;
+  }
+
+  & li {
+    margin-bottom: var(--spacing);
+  }
+
+  /* The marker takes text-muted from the list; the content goes back to body colour. */
+  & li > * {
+    color: var(--color-text-primary);
+    margin-bottom: 0;
+  }
+
+  & blockquote {
+    margin-bottom: calc(var(--spacing) * 3);
+    border-inline-start: 2px solid var(--color-border-strong);
+    padding-inline-start: calc(var(--spacing) * 3);
+    color: var(--color-text-secondary);
+  }
+
+  & strong {
+    font-weight: 600;
+  }
+
+  & em {
+    font-style: italic;
+  }
+
+  & s {
+    text-decoration: line-through;
+    color: var(--color-text-muted);
+  }
+
+  & a {
+    color: var(--color-text-primary);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-color: var(--color-border-strong);
+  }
+
+  /* The editor's own placeholder node, shown while the document is empty. */
+  & p.is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    color: var(--color-text-faint);
+    float: inline-start;
+    height: 0;
+    pointer-events: none;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+/* Reduced motion. Canonical source: .docs/styleguide/01-foundations.md section 6, which
+   asks for motion-fast opacity-only transitions, no icon morphs and no skeleton shimmer.
+
+   The declarations sit outside every @layer on purpose: unlayered CSS outranks Tailwind's
+   utility layer, so this wins without !important on any of it.
+
+   MorphIcon handles its own half through the library's reducedMotion="user", and the
+   spinner keeps turning: the guide names the shimmer and the morphs, and a spinner that
+   freezes stops reporting that anything is still happening. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    transition-property: opacity;
+    transition-duration: var(--motion-fast);
+  }
+
+  .animate-skeleton,
+  .animate-menu-in,
+  .animate-menu-in-up,
+  .animate-toast-in {
+    animation: none;
+  }
+}
+
+/* The upload progress bar's fill. The global state-transition does not cover width, and
+   the progress bar is the only control in the system whose width is a measured value.
+   Canonical source: .docs/styleguide/04-components.md section 16. */
+@utility progress-transition {
+  transition: width var(--motion-normal) var(--ease-standard);
+}
+
+/* The media library grid, and the aspect ratio of a tile's image area. A grid template
+   cannot be a container token, so it is a utility, like shell-grid and entry-grid.
+   Canonical source: .docs/styleguide/03-layout.md section 5.3. */
+@theme {
+  --container-media-tile: 180px;
+  --aspect-media: 4 / 3;
+}
+
+@utility media-grid {
+  grid-template-columns: repeat(auto-fill, minmax(var(--container-media-tile), 1fr));
+}