@lapismd/design-core 0.2.0 → 0.3.0

package/dist/storybook.css

@@ -0,0 +1,46 @@
+@import "./styles.css";
+
+@layer base {
+  html,
+  body,
+  #storybook-root {
+    @apply min-h-full;
+  }
+}
+
+#storybook-root {
+  min-height: 100vh;
+  padding: 1.5rem;
+}
+
+/*
+ * Workspace and shell stories are application surfaces, so they deliberately
+ * occupy the complete capture viewport. Regular catalog stories retain the
+ * longstanding 1.5rem root inset above; widening every fullscreen story here
+ * changes a 1232px component capture into 1280px.
+ */
+body.sb-main-fullscreen[data-ui-catalog-full-viewport] #storybook-root {
+  width: 100%;
+  height: 100vh;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+.docs-story {
+  overflow: visible !important;
+}
+
+.docs-story .sb-story {
+  box-sizing: border-box;
+  padding: 1rem 2.5rem;
+}
+
+/*
+ * Workspace and Shell stories are application surfaces in Docs too. Keep the
+ * document scrollable, but let those embedded fullscreen stories meet the
+ * Canvas edge instead of inheriting the regular component-example inset.
+ */
+.docs-story .sb-story:is([id^="story--workspace-"], [id^="story--shell-"]) {
+  padding: 0;
+}

package/dist/styles.css

@@ -0,0 +1,82 @@
+@import "tailwindcss";
+@import "@fontsource-variable/dm-sans";
+@import "@fontsource-variable/source-code-pro";
+@import "tw-animate-css";
+@import "shadcn-svelte/tailwind.css";
+@import "./theme.css";
+@import "./shared/shadcn/hover-card/hover-card.tokens.css";
+@import "./shared/shadcn/tooltip/tooltip.tokens.css";
+@import "./shared/shadcn/toggle-group/toggle-group.tokens.css";
+@import "./shared/shadcn/toggle/toggle.tokens.css";
+@import "./shared/shadcn/textarea/textarea.tokens.css";
+@import "./shared/shadcn/tabs/tabs.tokens.css";
+@import "./shared/shadcn/table/table.tokens.css";
+@import "./shared/shadcn/switch/switch.tokens.css";
+@import "./shared/shadcn/swipe-item/swipe-item.tokens.css";
+@import "./shared/shadcn/spinner/spinner.tokens.css";
+@import "./shared/shadcn/slider/slider.tokens.css";
+@import "./shared/shadcn/skeleton/skeleton.tokens.css";
+@import "./shared/shadcn/sheet/sheet.tokens.css";
+@import "./shared/shadcn/separator/separator.tokens.css";
+@import "./shared/shadcn/select/select.tokens.css";
+@import "./shared/shadcn/scroll-area/scroll-area.tokens.css";
+@import "./shared/shadcn/resizable/resizable.tokens.css";
+@import "./shared/shadcn/progress/progress.tokens.css";
+@import "./shared/shadcn/popover/popover.tokens.css";
+@import "./shared/shadcn/pagination/pagination.tokens.css";
+@import "./shared/shadcn/label/label.tokens.css";
+@import "./shared/shadcn/input-group/input-group.tokens.css";
+@import "./shared/shadcn/input/input.tokens.css";
+@import "./shared/shadcn/field/field.tokens.css";
+@import "./shared/shadcn/empty/empty.tokens.css";
+@import "./shared/shadcn/dropdown-menu/dropdown-menu.tokens.css";
+@import "./shared/shadcn/dialog/dialog.tokens.css";
+@import "./shared/shadcn/drawer/drawer.tokens.css";
+@import "./shared/shadcn/context-menu/context-menu.tokens.css";
+@import "./shared/shadcn/command/command.tokens.css";
+@import "./shared/shadcn/command-view/command-view.tokens.css";
+@import "./shared/shadcn/collapsible/collapsible.tokens.css";
+@import "./shared/shadcn/column-canvas/column-canvas.tokens.css";
+@import "./shared/shadcn/panel-toggle/panel-toggle.tokens.css";
+@import "./shared/shadcn/checkbox/checkbox.tokens.css";
+@import "./shared/shadcn/card/card.tokens.css";
+@import "./shared/shadcn/button-group/button-group.tokens.css";
+@import "./shared/shadcn/breadcrumb/breadcrumb.tokens.css";
+@import "./shared/shadcn/badge/badge.tokens.css";
+@import "./shared/shadcn/alert-dialog/alert-dialog.tokens.css";
+@import "./shared/shadcn/alert/alert.tokens.css";
+@import "./shared/shadcn/accordion/accordion.tokens.css";
+@import "./shared/shadcn/button/button.tokens.css";
+@import "./shared/forms/form.tokens.css";
+@import "./shared/diff/diff.tokens.css";
+@import "./shared/workspace/workspace.tokens.css";
+@import "./shared/workspace/workspace-desktop-drag.css";
+@import "./themes/lapis.css";
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-sidebar text-foreground font-sans;
+  }
+
+  html {
+    @apply font-sans;
+  }
+}
+
+@layer utilities {
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}

package/dist/theme.css

@@ -0,0 +1,132 @@
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  /* Runtime defaults must survive consumer Tailwind tree shaking. */
+  --container-xs: 20rem;
+  --container-md: 28rem;
+  --container-lg: 32rem;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  /* Compiled shadcn CSS reads these even when a consumer does not reprocess @theme. */
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --radius: 0.625rem;
+  --studio-font-mono: "Source Code Pro Variable", "Source Code Pro",
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    monospace;
+  --background: oklch(100% 0 0);
+  --foreground: oklch(15% 0.05 295);
+  --card: oklch(100% 0 0);
+  --card-foreground: oklch(15% 0.05 295);
+  --popover: oklch(100% 0 0);
+  --popover-foreground: oklch(15% 0.05 295);
+  --primary: oklch(45% 0.2 295);
+  --primary-foreground: oklch(99% 0.005 295);
+  --secondary: oklch(96.5% 0.015 295);
+  --secondary-foreground: oklch(20% 0.05 295);
+  --muted: oklch(96.5% 0.015 295);
+  --muted-foreground: oklch(50% 0.05 295);
+  --accent: oklch(96.5% 0.015 295);
+  --accent-foreground: oklch(20% 0.05 295);
+  --destructive: oklch(57.7% 0.245 27.325);
+  --border: oklch(92.5% 0.02 295);
+  --input: oklch(92.5% 0.02 295);
+  --ring: oklch(55% 0.15 295);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(98.5% 0.008 295);
+  --sidebar-foreground: oklch(15% 0.05 295);
+  --sidebar-primary: oklch(45% 0.2 295);
+  --sidebar-primary-foreground: oklch(99% 0.005 295);
+  --sidebar-accent: oklch(96.5% 0.015 295);
+  --sidebar-accent-foreground: oklch(20% 0.05 295);
+  --sidebar-border: oklch(92.5% 0.02 295);
+  --sidebar-ring: oklch(55% 0.15 295);
+}
+
+.dark {
+  --background: oklch(12.9% 0.042 264.695);
+  --foreground: oklch(98.4% 0.003 247.858);
+  --card: oklch(20.8% 0.042 265.755);
+  --card-foreground: oklch(98.4% 0.003 247.858);
+  --popover: oklch(20.8% 0.042 265.755);
+  --popover-foreground: oklch(98.4% 0.003 247.858);
+  --primary: oklch(92.9% 0.013 255.508);
+  --primary-foreground: oklch(20.8% 0.042 265.755);
+  --secondary: oklch(27.9% 0.041 260.031);
+  --secondary-foreground: oklch(98.4% 0.003 247.858);
+  --muted: oklch(27.9% 0.041 260.031);
+  --muted-foreground: oklch(70.4% 0.04 256.788);
+  --accent: oklch(27.9% 0.041 260.031);
+  --accent-foreground: oklch(98.4% 0.003 247.858);
+  --destructive: oklch(70.4% 0.191 22.216);
+  --border: oklch(100% 0 0 / 10%);
+  --input: oklch(100% 0 0 / 15%);
+  --ring: oklch(55.1% 0.027 264.364);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(20.8% 0.042 265.755);
+  --sidebar-foreground: oklch(98.4% 0.003 247.858);
+  --sidebar-primary: oklch(48.8% 0.243 264.376);
+  --sidebar-primary-foreground: oklch(98.4% 0.003 247.858);
+  --sidebar-accent: oklch(27.9% 0.041 260.031);
+  --sidebar-accent-foreground: oklch(98.4% 0.003 247.858);
+  --sidebar-border: oklch(100% 0 0 / 10%);
+  --sidebar-ring: oklch(55.1% 0.027 264.364);
+}
+
+@theme inline {
+  --font-sans: "DM Sans Variable", sans-serif;
+  --font-mono: var(--studio-font-mono);
+  /* Explicit palette anchors used by compiled shadcn CSS (e.g. destructive text). */
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}

package/dist/themes/lapis.css

@@ -0,0 +1,225 @@
+/**
+ * Lapis brand theme adapted to the @lapismd/design-core token contract.
+ *
+ * Source: lapis-notes/packages/ui/src/lib/styles/theme/{light,dark,aliases}.css
+ * Source revision: a371198e495d9e4e465c2960a04b3a4fd11f4023
+ *
+ * The theme deliberately supplies host-level semantic tokens as well as the
+ * public Workspace tokens. Components continue to depend only on the target
+ * repository's token contracts.
+ */
+[data-ui-theme="lapis"] {
+  --radius: 0.5rem;
+  --lapis-accent-h: 258;
+  --lapis-accent-s: 88%;
+  --lapis-accent-l: 66%;
+  --lapis-accent-hsl: var(--lapis-accent-h), var(--lapis-accent-s),
+    var(--lapis-accent-l);
+  --lapis-accent: hsl(var(--lapis-accent-hsl));
+  --lapis-accent-hover: hsl(
+    calc(var(--lapis-accent-h) - 1),
+    calc(var(--lapis-accent-s) * 1.01),
+    calc(var(--lapis-accent-l) * 1.075)
+  );
+  --lapis-accent-subtle: hsl(
+    calc(var(--lapis-accent-h) - 3),
+    calc(var(--lapis-accent-s) * 1.02),
+    calc(var(--lapis-accent-l) * 1.15)
+  );
+
+  --background: #ffffff;
+  --foreground: #222222;
+  --card: #fafafa;
+  --card-foreground: #222222;
+  --popover: #ffffff;
+  --popover-foreground: #222222;
+  /* Filled actions use darker AA-safe fills; accent/hover stay for rings + selection. */
+  --primary: hsl(
+    calc(var(--lapis-accent-h) - 1),
+    calc(var(--lapis-accent-s) * 1.01),
+    42%
+  );
+  --primary-foreground: #ffffff;
+  --secondary: #f6f6f6;
+  --secondary-foreground: #222222;
+  --muted: #f6f6f6;
+  --muted-foreground: #5c5c5c;
+  --accent: #f6f6f6;
+  --accent-foreground: #222222;
+  --destructive: #c41e34;
+  --destructive-foreground: #ffffff;
+  --warning: #ec7500;
+  --success: #08b94e;
+  --border: #e0e0e0;
+  --input: #d4d4d4;
+  --ring: var(--lapis-accent);
+  --sidebar: #f6f6f6;
+  --sidebar-foreground: #222222;
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: #e3e3e3;
+  --sidebar-accent-foreground: #222222;
+  --sidebar-border: #e0e0e0;
+  --sidebar-ring: var(--lapis-accent);
+
+  --ui-workspace-background: #ffffff;
+  --ui-workspace-foreground: #222222;
+  --ui-workspace-panel: #f6f6f6;
+  --ui-workspace-panel-foreground: #222222;
+  --ui-workspace-panel-action-hover-background: var(--sidebar-accent);
+  --ui-workspace-panel-action-hover-foreground: var(
+    --sidebar-accent-foreground
+  );
+  --ui-workspace-explorer-toolbar-action-hover-background: var(
+    --sidebar-accent
+  );
+  --ui-workspace-explorer-toolbar-action-hover-foreground: var(
+    --sidebar-accent-foreground
+  );
+  --ui-workspace-muted: #f6f6f6;
+  --ui-workspace-muted-foreground: #5c5c5c;
+  --ui-workspace-popover: #ffffff;
+  --ui-workspace-popover-foreground: #222222;
+  --ui-workspace-border: #e0e0e0;
+  --ui-workspace-border-strong: #d4d4d4;
+  --ui-workspace-accent: var(--primary);
+  --ui-workspace-accent-foreground: var(--primary-foreground);
+  --ui-workspace-about-primary-foreground: #241733;
+  --ui-workspace-selection: hsla(var(--lapis-accent-hsl), 0.2);
+  --ui-workspace-destructive: var(--destructive);
+  --ui-workspace-warning: #ec7500;
+  --ui-workspace-focus-ring: var(--lapis-accent);
+  --ui-workspace-font-sans: var(--font-sans), ui-sans-serif, system-ui,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Noto Color Emoji";
+  --ui-workspace-radius-small: 4px;
+  --ui-workspace-radius-medium: 8px;
+  --ui-workspace-radius-large: 12px;
+  --ui-workspace-shadow: none;
+  --ui-workspace-tab-hover-background: var(--sidebar-accent);
+  --ui-workspace-tab-action-hover-background: color-mix(
+    in srgb,
+    var(--ui-workspace-foreground) 12%,
+    transparent
+  );
+  --ui-workspace-tab-action-hover-foreground: var(--ui-workspace-foreground);
+  --ui-workspace-fmode-default-accent: #000000;
+  --ui-workspace-fmode-font-mono: monospace;
+  --ui-workspace-notifications-primary: #000000;
+  --ui-workspace-notifications-warning: #f97316;
+  --ui-workspace-notifications-card: #fafafa;
+  --ui-workspace-notifications-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%),
+    0 4px 6px -4px rgb(0 0 0 / 10%);
+  --ui-workspace-tab-height: 40px;
+  --ui-workspace-tab-active-height: 36px;
+  --ui-workspace-tab-width: 200px;
+  --ui-workspace-tab-max-width: 320px;
+  --ui-workspace-tab-curve: 4px;
+  --ui-workspace-tab-active-background: #ffffff;
+  --ui-workspace-tab-container-background: #f6f6f6;
+  --ui-workspace-tab-divider: #e0e0e0;
+  --ui-workspace-stacked-shadow: -8px 0 8px rgb(0 0 0 / 5%);
+  --ui-workspace-stacked-pane-width: 700px;
+  --ui-workspace-sidebar-header-height: 32px;
+  --ui-workspace-ribbon-width: 49px;
+  --ui-workspace-status-height: 24px;
+  --ui-workspace-settings-heading-size: 16px;
+  --ui-workspace-settings-heading-weight: 400;
+  --ui-workspace-settings-label-size: 15px;
+  --ui-workspace-settings-description-size: 12px;
+  --ui-workspace-settings-navigation-row-height: 32px;
+  --ui-workspace-settings-navigation-active-background: #e3e3e3;
+  --ui-workspace-settings-control-height: 30px;
+  --ui-workspace-settings-control-radius: 6px;
+  --ui-workspace-settings-dialog-radius: 8px;
+  --ui-workspace-settings-dialog-max-width: 1100px;
+  --ui-workspace-settings-dialog-height: 85vh;
+}
+
+[data-ui-theme="lapis"].dark,
+.dark [data-ui-theme="lapis"] {
+  --lapis-accent-hover: hsl(
+    calc(var(--lapis-accent-h) - 3),
+    calc(var(--lapis-accent-s) * 1.02),
+    calc(var(--lapis-accent-l) * 1.15)
+  );
+  --lapis-accent-subtle: hsl(
+    calc(var(--lapis-accent-h) - 5),
+    calc(var(--lapis-accent-s) * 1.05),
+    calc(var(--lapis-accent-l) * 1.29)
+  );
+
+  --background: #1e1e1e;
+  --foreground: #dadada;
+  --card: #242424;
+  --card-foreground: #dadada;
+  --popover: #262626;
+  --popover-foreground: #dadada;
+  --primary: hsl(
+    calc(var(--lapis-accent-h) - 1),
+    calc(var(--lapis-accent-s) * 1.01),
+    55%
+  );
+  --primary-foreground: #ffffff;
+  --secondary: #262626;
+  --secondary-foreground: #dadada;
+  --muted: #262626;
+  --muted-foreground: #b3b3b3;
+  --accent: #363636;
+  --accent-foreground: #dadada;
+  --destructive: #d92a3f;
+  --destructive-foreground: #ffffff;
+  --warning: #e9973f;
+  --success: #44cf6e;
+  --border: #363636;
+  --input: #3f3f3f;
+  --ring: var(--lapis-accent-hover);
+  --sidebar: #262626;
+  --sidebar-foreground: #dadada;
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: #363636;
+  --sidebar-accent-foreground: #dadada;
+  --sidebar-border: #363636;
+  --sidebar-ring: var(--lapis-accent-hover);
+
+  --ui-workspace-background: #1e1e1e;
+  --ui-workspace-foreground: #dadada;
+  --ui-workspace-panel: #262626;
+  --ui-workspace-panel-foreground: #dadada;
+  --ui-workspace-panel-action-hover-background: var(--sidebar-accent);
+  --ui-workspace-panel-action-hover-foreground: var(
+    --sidebar-accent-foreground
+  );
+  --ui-workspace-explorer-toolbar-action-hover-background: var(
+    --sidebar-accent
+  );
+  --ui-workspace-explorer-toolbar-action-hover-foreground: var(
+    --sidebar-accent-foreground
+  );
+  --ui-workspace-muted: #262626;
+  --ui-workspace-muted-foreground: #b3b3b3;
+  --ui-workspace-popover: #262626;
+  --ui-workspace-popover-foreground: #dadada;
+  --ui-workspace-border: #363636;
+  --ui-workspace-border-strong: #3f3f3f;
+  --ui-workspace-accent: var(--primary);
+  --ui-workspace-accent-foreground: var(--primary-foreground);
+  --ui-workspace-selection: hsla(var(--lapis-accent-hsl), 0.33);
+  --ui-workspace-destructive: var(--destructive);
+  --ui-workspace-warning: #e9973f;
+  --ui-workspace-focus-ring: var(--lapis-accent-hover);
+  --ui-workspace-notifications-card: #242424;
+  --ui-workspace-tab-active-background: #1e1e1e;
+  --ui-workspace-tab-hover-background: var(--sidebar-accent);
+  --ui-workspace-tab-action-hover-background: color-mix(
+    in srgb,
+    var(--ui-workspace-foreground) 12%,
+    transparent
+  );
+  --ui-workspace-tab-action-hover-foreground: var(--ui-workspace-foreground);
+  --ui-workspace-tab-container-background: #262626;
+  --ui-workspace-tab-divider: #3f3f3f;
+  --ui-workspace-settings-navigation-active-background: #363636;
+  --ui-workspace-stacked-shadow: -8px 0 8px rgb(0 0 0 / 20%);
+}