@morphos/styles 0.1.0

package/src/overlays/dialog.css

@@ -0,0 +1,91 @@
+/**
+ * Recipe for @morphos/overlays `Dialog`.
+ * Apply `class="morphos-dialog-content"` to `DialogContent`,
+ * `class="morphos-dialog-title"` to `DialogTitle`,
+ * `class="morphos-dialog-description"` to `DialogDescription`, and
+ * `class="morphos-dialog-close"` to `DialogClose`. `DialogTrigger` is a
+ * plain button — pair it with the `morphos-button` recipe if you want one.
+ * `DialogContent` also renders a sibling backdrop `<div data-morphos-backdrop>`,
+ * styled below without needing its own class.
+ */
+[data-morphos-backdrop] {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  background: rgba(0, 0, 0, 0.4);
+  animation: morphos-fade-in var(--morphos-transition-medium);
+}
+
+.morphos-dialog-content {
+  /* Portaled to document.body, so it can't inherit the page's font — set it explicitly. */
+  font-family: var(--morphos-font);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 101;
+  width: 100%;
+  max-width: 28rem;
+  max-height: 85vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: var(--morphos-space-4);
+  background: var(--morphos-color-bg);
+  color: var(--morphos-color-text);
+  border-radius: var(--morphos-radius-lg);
+  animation: morphos-scale-in var(--morphos-transition-medium);
+}
+
+.morphos-dialog-content:focus-visible {
+  outline: none;
+}
+
+.morphos-dialog-title {
+  margin: 0 0 var(--morphos-space-2);
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.morphos-dialog-description {
+  margin: 0 0 var(--morphos-space-3);
+  color: var(--morphos-color-text-muted);
+}
+
+.morphos-dialog-close {
+  position: absolute;
+  top: var(--morphos-space-3);
+  right: var(--morphos-space-3);
+  border: none;
+  background: none;
+  color: var(--morphos-color-text-muted);
+  cursor: pointer;
+  line-height: 1;
+  padding: var(--morphos-space-1);
+  border-radius: var(--morphos-radius-sm);
+}
+
+.morphos-dialog-close:hover {
+  color: var(--morphos-color-text);
+  background: var(--morphos-color-bg-hover);
+}
+
+.morphos-dialog-close:focus-visible {
+  outline: none;
+  box-shadow: var(--morphos-focus-ring);
+}
+
+@keyframes morphos-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes morphos-scale-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}

package/src/overlays/drawer.css

@@ -0,0 +1,124 @@
+/**
+ * Recipe for @morphos/overlays `Drawer`.
+ * Apply `class="morphos-drawer-content"` to `DrawerContent`,
+ * `class="morphos-drawer-title"` to `DrawerTitle`,
+ * `class="morphos-drawer-description"` to `DrawerDescription`, and
+ * `class="morphos-drawer-close"` to `DrawerClose`. `DrawerContent` also
+ * renders a sibling backdrop `<div data-morphos-backdrop>`, styled below
+ * without needing its own class. The panel slides in from `side`, read off
+ * `data-side` on the content element.
+ */
+[data-morphos-backdrop] {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  background: rgba(0, 0, 0, 0.4);
+  animation: morphos-fade-in var(--morphos-transition-medium);
+}
+
+.morphos-drawer-content {
+  /* Portaled to document.body, so it can't inherit the page's font — set it explicitly. */
+  font-family: var(--morphos-font);
+  position: fixed;
+  z-index: 101;
+  display: flex;
+  flex-direction: column;
+  padding: var(--morphos-space-4);
+  background: var(--morphos-color-bg);
+  color: var(--morphos-color-text);
+}
+
+.morphos-drawer-content:focus-visible {
+  outline: none;
+}
+
+.morphos-drawer-content[data-side="right"] {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(24rem, 100vw);
+  animation: morphos-slide-in-right var(--morphos-transition-medium);
+}
+
+.morphos-drawer-content[data-side="left"] {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: min(24rem, 100vw);
+  animation: morphos-slide-in-left var(--morphos-transition-medium);
+}
+
+.morphos-drawer-content[data-side="top"] {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: min(24rem, 100vh);
+  animation: morphos-slide-in-top var(--morphos-transition-medium);
+}
+
+.morphos-drawer-content[data-side="bottom"] {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: min(24rem, 100vh);
+  animation: morphos-slide-in-bottom var(--morphos-transition-medium);
+}
+
+.morphos-drawer-title {
+  margin: 0 0 var(--morphos-space-2);
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.morphos-drawer-description {
+  margin: 0 0 var(--morphos-space-3);
+  color: var(--morphos-color-text-muted);
+}
+
+.morphos-drawer-close {
+  position: absolute;
+  top: var(--morphos-space-3);
+  right: var(--morphos-space-3);
+  border: none;
+  background: none;
+  color: var(--morphos-color-text-muted);
+  cursor: pointer;
+  line-height: 1;
+  padding: var(--morphos-space-1);
+  border-radius: var(--morphos-radius-sm);
+}
+
+.morphos-drawer-close:hover {
+  color: var(--morphos-color-text);
+  background: var(--morphos-color-bg-hover);
+}
+
+.morphos-drawer-close:focus-visible {
+  outline: none;
+  box-shadow: var(--morphos-focus-ring);
+}
+
+@keyframes morphos-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes morphos-slide-in-right {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes morphos-slide-in-left {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes morphos-slide-in-top {
+  from { transform: translateY(-100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes morphos-slide-in-bottom {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}

package/src/overlays/dropdown.css

@@ -0,0 +1,51 @@
+/**
+ * Recipe for @morphos/overlays `Dropdown` (also exported as `Menu`).
+ * Apply `class="morphos-dropdown-menu"` to `DropdownMenu` and
+ * `class="morphos-dropdown-item"` to each `DropdownItem`.
+ * `DropdownTrigger` is a plain button — pair it with the `morphos-button`
+ * recipe if you want one.
+ */
+.morphos-dropdown-menu {
+  /* Portaled to document.body, so it can't inherit the page's font — set it explicitly. */
+  font-family: var(--morphos-font);
+  z-index: 100;
+  min-width: 10rem;
+  margin: 0;
+  padding: var(--morphos-space-1);
+  list-style: none;
+  color: var(--morphos-color-text);
+  background: var(--morphos-color-bg);
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-md);
+  animation: morphos-fade-in var(--morphos-transition-fast);
+}
+
+.morphos-dropdown-menu:focus-visible {
+  outline: none;
+}
+
+.morphos-dropdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--morphos-space-2);
+  padding: var(--morphos-space-2) var(--morphos-space-3);
+  border-radius: var(--morphos-radius-sm);
+  cursor: pointer;
+}
+
+.morphos-dropdown-item:hover,
+.morphos-dropdown-item:focus-visible {
+  outline: none;
+  background: var(--morphos-color-bg-hover);
+}
+
+.morphos-dropdown-item[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@keyframes morphos-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}

package/src/overlays/popover.css

@@ -0,0 +1,28 @@
+/**
+ * Recipe for @morphos/overlays `Popover`.
+ * Apply `class="morphos-popover-content"` to `PopoverContent`.
+ * `PopoverTrigger` is a plain button — pair it with the `morphos-button`
+ * recipe if you want one.
+ */
+.morphos-popover-content {
+  /* Portaled to document.body, so it can't inherit the page's font — set it explicitly. */
+  font-family: var(--morphos-font);
+  z-index: 100;
+  min-width: 12rem;
+  max-width: 24rem;
+  padding: var(--morphos-space-4);
+  color: var(--morphos-color-text);
+  background: var(--morphos-color-bg);
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-lg);
+  animation: morphos-fade-in var(--morphos-transition-fast);
+}
+
+.morphos-popover-content:focus-visible {
+  outline: none;
+}
+
+@keyframes morphos-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}

package/src/overlays/preview-card.css

@@ -0,0 +1,22 @@
+/**
+ * Recipe for @morphos/overlays `PreviewCard`.
+ * Apply `class="morphos-preview-card-content"` to `PreviewCardContent`.
+ * `PreviewCardTrigger` is a plain inline `<span>` — no styling needed.
+ */
+.morphos-preview-card-content {
+  /* Portaled to document.body, so it can't inherit the page's font — set it explicitly. */
+  font-family: var(--morphos-font);
+  z-index: 100;
+  width: 20rem;
+  padding: var(--morphos-space-4);
+  color: var(--morphos-color-text);
+  background: var(--morphos-color-bg);
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-lg);
+  animation: morphos-fade-in var(--morphos-transition-fast);
+}
+
+@keyframes morphos-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}

package/src/overlays/tooltip.css

@@ -0,0 +1,23 @@
+/**
+ * Recipe for @morphos/overlays `Tooltip`.
+ * Apply `class="morphos-tooltip-content"` to `TooltipContent`.
+ * `TooltipTrigger` is a plain inline `<span>` — no styling needed.
+ */
+.morphos-tooltip-content {
+  /* Portaled to document.body, so it can't inherit the page's font — set it explicitly. */
+  font-family: var(--morphos-font);
+  z-index: 100;
+  max-width: 20rem;
+  padding: var(--morphos-space-1) var(--morphos-space-2);
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  color: var(--morphos-color-accent-text);
+  background: var(--morphos-color-text);
+  border-radius: var(--morphos-radius-sm);
+  animation: morphos-fade-in var(--morphos-transition-fast);
+}
+
+@keyframes morphos-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}

package/src/overlays.css

@@ -0,0 +1,13 @@
+/**
+ * All @morphos/overlays recipes in one file. Prefer importing individual
+ * files from `@morphos/styles/overlays/*.css` if you only need a few.
+ */
+@import "./tokens.css";
+@import "./overlays/dialog.css";
+@import "./overlays/tooltip.css";
+@import "./overlays/popover.css";
+@import "./overlays/dropdown.css";
+@import "./overlays/alert-dialog.css";
+@import "./overlays/drawer.css";
+@import "./overlays/context-menu.css";
+@import "./overlays/preview-card.css";

package/src/tokens.css

@@ -0,0 +1,62 @@
+/**
+ * Design tokens shared by every Morphos component recipe.
+ * Deliberately flat and light — no elevation shadows, borders carry all
+ * separation, and every surface stays on a light, neutral background.
+ * Override any of these custom properties in your own stylesheet to retheme
+ * the whole set (including adding a dark variant); nothing below is
+ * required, it only feeds the recipes.
+ */
+:root {
+  --morphos-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+
+  --morphos-color-bg: #ffffff;
+  --morphos-color-bg-subtle: #f7f7f8;
+  --morphos-color-bg-hover: #f0f0f2;
+  --morphos-color-border: #e4e4e7;
+  --morphos-color-border-hover: #d4d4d8;
+  --morphos-color-text: #27272a;
+  --morphos-color-text-muted: #8b8b93;
+  --morphos-color-placeholder: #b4b4ba;
+
+  --morphos-color-accent: #3b82f6;
+  --morphos-color-accent-hover: #2f6fdb;
+  --morphos-color-accent-text: #ffffff;
+
+  --morphos-color-danger: #ef4444;
+  --morphos-color-danger-bg: #fef2f2;
+  --morphos-color-success: #22c55e;
+  --morphos-color-success-bg: #f0fdf4;
+  --morphos-color-warning: #f59e0b;
+  --morphos-color-warning-bg: #fffbeb;
+  --morphos-color-info: #3b82f6;
+  --morphos-color-info-bg: #eff6ff;
+
+  --morphos-radius-sm: 0.25rem;
+  --morphos-radius-md: 0.5rem;
+  --morphos-radius-lg: 0.625rem;
+  --morphos-radius-full: 9999px;
+
+  /* Flat by default — kept as tokens so a theme can opt back into elevation. */
+  --morphos-shadow-sm: none;
+  --morphos-shadow-md: none;
+  --morphos-shadow-lg: none;
+
+  --morphos-space-1: 0.25rem;
+  --morphos-space-2: 0.5rem;
+  --morphos-space-3: 0.75rem;
+  --morphos-space-4: 1rem;
+
+  --morphos-transition-fast: 120ms ease;
+  --morphos-transition-medium: 200ms ease;
+
+  --morphos-focus-ring: 0 0 0 2px var(--morphos-color-bg), 0 0 0 4px var(--morphos-color-accent);
+}
+
+/*
+ * Every recipe below assumes border-box sizing (e.g. `width: 100%` combined
+ * with padding/border on inputs and triggers). Scoped to morphos-* classes
+ * only — this never touches the rest of your page.
+ */
+[class*="morphos-"] {
+  box-sizing: border-box;
+}