@olympusoss/canvas 2.20.1 → 3.1.0

package/styles/canvas.css

@@ -1,55 +1,80 @@
-/* ---------- Canvas lib runtime entry ----------
- *
- * The single CSS import that gives a consumer Canvas's full styling contract:
- *   - Tailwind v4 with @source pointed at canvas/src
- *   - Canonical design tokens (light + dark, tiered surfaces, sidebar, stat-card)
- *   - @theme inline mapping so `bg-card`, `text-foreground`, etc. resolve
- *   - Leaflet defaults for canvas/components/molecules/leaflet-map and scalable-globe
- *
- * Consumers (athena/hera/site/daedalus) and the canvas-docs site both import
- * this file. Inside canvas-docs, the per-example iframe filters parent
- * stylesheets down to ONLY this one — the sentinel rule below
- * (`--canvas-runtime`) is what the filter looks for. Keep that rule.
- */
+@layer canvas.reset, canvas.tokens, canvas.base, canvas.components, canvas.patterns, canvas.utilities;
 
-@import "tailwindcss";
-@source "../src/**/*.{ts,tsx}";
-@import "./tokens.css";
-@import "./leaflet.css";
-@import "./dashboard-grid.css";
+/* Reset */
+@import "./reset.css";
 
-@theme inline {
-	--color-background: hsl(var(--background));
-	--color-foreground: hsl(var(--foreground));
-	--color-card: hsl(var(--card));
-	--color-card-foreground: hsl(var(--card-foreground));
-	--color-popover: hsl(var(--popover));
-	--color-popover-foreground: hsl(var(--popover-foreground));
-	--color-primary: hsl(var(--primary));
-	--color-primary-foreground: hsl(var(--primary-foreground));
-	--color-secondary: hsl(var(--secondary));
-	--color-secondary-foreground: hsl(var(--secondary-foreground));
-	--color-muted: hsl(var(--muted));
-	--color-muted-foreground: hsl(var(--muted-foreground));
-	--color-accent: hsl(var(--accent));
-	--color-accent-foreground: hsl(var(--accent-foreground));
-	--color-destructive: hsl(var(--destructive));
-	--color-destructive-foreground: hsl(var(--destructive-foreground));
-	--color-brand: hsl(var(--brand));
-	--color-brand-foreground: hsl(var(--brand-foreground));
-	--color-border: hsl(var(--border));
-	--color-input: hsl(var(--input));
-	--color-ring: hsl(var(--ring));
-}
+/* Tokens */
+@import "./tokens/colors.css";
+@import "./tokens/typography.css";
+@import "./tokens/radius.css";
+@import "./tokens/spacing.css";
+@import "./tokens/shadows.css";
+@import "./tokens/z-index.css";
+@import "./tokens/motion.css";
 
-/* ---------- Iframe-filter sentinel ----------
- * Do NOT remove. The canvas-docs Example wrapper uses this token to identify
- * the canvas-runtime stylesheet among all parent-document styles when cloning
- * into the per-example iframe. Stripping this rule will cause example
- * components to render unstyled inside the docs preview.
- */
-@layer canvas-runtime {
-	:root {
-		--canvas-runtime: 1;
-	}
-}
+/* Base */
+@import "./base.css";
+
+/* Components */
+@import "./components/typography.css";
+@import "./components/button.css";
+@import "./components/input.css";
+@import "./components/card.css";
+@import "./components/badge.css";
+@import "./components/separator.css";
+@import "./components/icon.css";
+@import "./components/avatar.css";
+@import "./components/kbd.css";
+@import "./components/code-block.css";
+@import "./components/sidebar.css";
+@import "./components/topbar.css";
+@import "./components/app-shell.css";
+@import "./components/stat-card.css";
+@import "./components/section-card.css";
+@import "./components/data-table.css";
+@import "./components/field.css";
+@import "./components/page-header.css";
+@import "./components/empty-state.css";
+@import "./components/row-menu.css";
+@import "./components/tooltip.css";
+@import "./components/skeleton.css";
+@import "./components/spinner.css";
+@import "./components/checkbox.css";
+@import "./components/radio.css";
+@import "./components/switch.css";
+@import "./components/select.css";
+@import "./components/textarea.css";
+@import "./components/combobox.css";
+@import "./components/alert.css";
+@import "./components/toast.css";
+@import "./components/dialog.css";
+@import "./components/sheet.css";
+@import "./components/popover.css";
+@import "./components/dropdown.css";
+@import "./components/breadcrumb.css";
+@import "./components/pagination.css";
+@import "./components/tabs.css";
+@import "./components/button-group.css";
+@import "./components/form.css";
+@import "./components/input-group.css";
+@import "./components/command.css";
+@import "./components/stepper.css";
+@import "./components/calendar.css";
+@import "./components/filter-panel.css";
+
+/* Patterns */
+@import "./patterns/backdrops.css";
+@import "./patterns/glass.css";
+@import "./patterns/density.css";
+@import "./patterns/focus.css";
+@import "./patterns/scrollbar.css";
+@import "./patterns/reduced-motion.css";
+@import "./patterns/high-contrast.css";
+
+/* Utilities */
+@import "./utilities/display.css";
+@import "./utilities/flexbox.css";
+@import "./utilities/grid.css";
+@import "./utilities/gap.css";
+@import "./utilities/sizing.css";
+@import "./utilities/position.css";

package/styles/components/alert.css

@@ -0,0 +1,66 @@
+@layer canvas.components {
+  .alert {
+    display: flex;
+    gap: 0.75rem;
+    padding: 1rem;
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--radius-lg, 8px);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .alert-title {
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+  }
+
+  .alert-desc {
+    font-size: 0.8125rem;
+    line-height: 1.25rem;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .alert-default {
+    border-color: hsl(var(--border));
+    background-color: hsl(var(--card));
+  }
+
+  .alert-destructive {
+    border-color: hsl(var(--destructive) / 0.5);
+    color: hsl(var(--destructive));
+  }
+
+  .alert-destructive .alert-title {
+    color: hsl(var(--destructive));
+  }
+
+  .alert-warning {
+    border-color: hsl(var(--warning-fg) / 0.3);
+    background-color: hsl(var(--warning-bg));
+    color: hsl(var(--warning-fg));
+  }
+
+  .alert-warning .alert-title {
+    color: hsl(var(--warning-fg));
+  }
+
+  .alert-success {
+    border-color: hsl(var(--success-fg) / 0.3);
+    background-color: hsl(var(--success-bg));
+    color: hsl(var(--success-fg));
+  }
+
+  .alert-success .alert-title {
+    color: hsl(var(--success-fg));
+  }
+
+  .alert-info {
+    border-color: hsl(var(--info-fg) / 0.3);
+    background-color: hsl(var(--info-bg));
+    color: hsl(var(--info-fg));
+  }
+
+  .alert-info .alert-title {
+    color: hsl(var(--info-fg));
+  }
+}

package/styles/components/app-shell.css

@@ -0,0 +1,46 @@
+@layer canvas.components {
+  .app-shell {
+    min-height: 100vh;
+    background-color: hsl(var(--background));
+  }
+
+  .app-main {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    transition-property: margin-left;
+    transition-duration: 200ms;
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    margin-left: 0;
+  }
+
+  @media (min-width: 1024px) {
+    .app-main.collapsed {
+      margin-left: 3.5rem;
+    }
+
+    .app-main.expanded {
+      margin-left: 15rem;
+    }
+  }
+
+  .app-content {
+    flex: 1 1 0%;
+    width: 100%;
+    max-width: 1400px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 1rem;
+    padding-bottom: 3rem;
+  }
+
+  @media (min-width: 640px) {
+    .app-content {
+      padding-left: 1.75rem;
+      padding-right: 1.75rem;
+      padding-top: 1.5rem;
+    }
+  }
+}

package/styles/components/avatar.css

@@ -0,0 +1,22 @@
+@layer canvas.components {
+  .avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 9999px;
+    color: #fff;
+    font-size: 11px;
+    font-weight: 600;
+    flex-shrink: 0;
+    background: linear-gradient(135deg, var(--orb-indigo), var(--orb-violet));
+    overflow: hidden;
+  }
+
+  .avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}

package/styles/components/badge.css

@@ -0,0 +1,83 @@
+@layer canvas.components {
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+    border-radius: var(--radius-md, 6px);
+    font-size: 0.75rem;
+    line-height: 1.4;
+    font-weight: 600;
+    border-width: 1px;
+    border-style: solid;
+    border-color: transparent;
+  }
+
+  .badge-default {
+    background-color: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+  }
+
+  .badge-secondary {
+    background-color: hsl(var(--secondary));
+    color: hsl(var(--secondary-foreground));
+  }
+
+  .badge-outline {
+    color: hsl(var(--foreground));
+    border-color: hsl(var(--border));
+  }
+
+  .badge-destructive {
+    background-color: hsl(var(--destructive));
+    color: hsl(var(--destructive-foreground));
+  }
+
+  .status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    line-height: 1.4;
+    font-weight: 500;
+  }
+
+  .status-badge .dot {
+    width: 0.375rem;
+    height: 0.375rem;
+    border-radius: 9999px;
+    background-color: currentColor;
+  }
+
+  .sb-success {
+    background-color: hsl(var(--success-bg));
+    color: hsl(var(--success-fg));
+  }
+
+  .sb-warning {
+    background-color: hsl(var(--warning-bg));
+    color: hsl(var(--warning-fg));
+  }
+
+  .sb-error {
+    background-color: hsl(var(--error-bg));
+    color: hsl(var(--error-fg));
+  }
+
+  .sb-info {
+    background-color: hsl(var(--info-bg));
+    color: hsl(var(--info-fg));
+  }
+
+  .sb-neutral {
+    background-color: hsl(var(--muted));
+    color: hsl(var(--muted-foreground));
+  }
+}

package/styles/components/breadcrumb.css

@@ -0,0 +1,35 @@
+@layer canvas.components {
+  .breadcrumb {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .breadcrumb-item {
+    color: hsl(var(--muted-foreground));
+  }
+
+  .breadcrumb-item a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .breadcrumb-item a:hover {
+    color: hsl(var(--foreground));
+    text-decoration: underline;
+    text-underline-offset: 4px;
+  }
+
+  .breadcrumb-item.active {
+    color: hsl(var(--foreground));
+    font-weight: 500;
+  }
+
+  .breadcrumb-sep {
+    color: hsl(var(--muted-foreground));
+    display: flex;
+    align-items: center;
+  }
+}

package/styles/components/button-group.css

@@ -0,0 +1,23 @@
+@layer canvas.components {
+  .btn-group {
+    display: inline-flex;
+  }
+
+  .btn-group > .btn {
+    border-radius: 0;
+  }
+
+  .btn-group > .btn:first-child {
+    border-top-left-radius: var(--radius-md, 6px);
+    border-bottom-left-radius: var(--radius-md, 6px);
+  }
+
+  .btn-group > .btn:last-child {
+    border-top-right-radius: var(--radius-md, 6px);
+    border-bottom-right-radius: var(--radius-md, 6px);
+  }
+
+  .btn-group > .btn + .btn {
+    margin-left: -1px;
+  }
+}

package/styles/components/button.css

@@ -0,0 +1,107 @@
+@layer canvas.components {
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    white-space: nowrap;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    border-radius: var(--radius-md, 6px);
+    border-width: 1px;
+    border-style: solid;
+    border-color: transparent;
+    cursor: pointer;
+    height: 2.25rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    font-family: var(--font-sans);
+    text-decoration: none;
+    transition-property: color, background-color, border-color,
+      text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+
+  .btn:focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+  }
+
+  .btn:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .btn-default {
+    background-color: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+    box-shadow: var(--shadow-xs);
+  }
+
+  .btn-default:hover {
+    background-color: hsl(var(--primary) / 0.9);
+  }
+
+  .btn-outline {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    border-color: hsl(var(--input));
+    box-shadow: var(--shadow-xs);
+  }
+
+  .btn-outline:hover {
+    background-color: hsl(var(--accent));
+  }
+
+  .btn-secondary {
+    background-color: hsl(var(--secondary));
+    color: hsl(var(--secondary-foreground));
+    box-shadow: var(--shadow-xs);
+  }
+
+  .btn-ghost {
+    background-color: transparent;
+    color: hsl(var(--foreground));
+  }
+
+  .btn-ghost:hover {
+    background-color: hsl(var(--accent));
+  }
+
+  .btn-destructive {
+    background-color: hsl(var(--destructive));
+    color: hsl(var(--destructive-foreground));
+    box-shadow: var(--shadow-xs);
+  }
+
+  .btn-link {
+    background-color: transparent;
+    color: hsl(var(--primary));
+    height: auto;
+    padding: 0;
+    text-decoration-line: underline;
+    text-underline-offset: 4px;
+  }
+
+  .btn-sm {
+    height: 2rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  .btn-lg {
+    height: 2.5rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .btn-icon {
+    width: 2.25rem;
+    height: 2.25rem;
+    padding: 0;
+  }
+}

package/styles/components/calendar.css

@@ -0,0 +1,73 @@
+@layer canvas.components {
+  .calendar {
+    padding: 0.75rem;
+    width: fit-content;
+  }
+
+  .calendar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+  }
+
+  .calendar-title {
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  .calendar-nav {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  .calendar-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 0;
+  }
+
+  .calendar-head {
+    font-size: 12px;
+    font-weight: 500;
+    color: hsl(var(--muted-foreground));
+    text-align: center;
+    padding: 0.25rem;
+    width: 2.25rem;
+  }
+
+  .calendar-cell {
+    width: 2.25rem;
+    height: 2.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+  }
+
+  .calendar-cell:hover {
+    background-color: hsl(var(--accent));
+  }
+
+  .calendar-cell.today {
+    font-weight: 600;
+    border: 1px solid hsl(var(--primary));
+  }
+
+  .calendar-cell.selected {
+    background-color: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+  }
+
+  .calendar-cell.outside {
+    color: hsl(var(--muted-foreground));
+    opacity: 0.4;
+  }
+
+  .calendar-cell.disabled {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+}

package/styles/components/card.css

@@ -0,0 +1,58 @@
+@layer canvas.components {
+  .card {
+    background-color: hsl(var(--card));
+    color: hsl(var(--card-foreground));
+    border-width: 1px;
+    border-style: solid;
+    border-color: hsl(var(--border));
+    border-radius: var(--radius-xl, 12px);
+    box-shadow: var(--shadow-xs);
+  }
+
+  .card-header {
+    padding: 1.5rem;
+    padding-bottom: 0.75rem;
+  }
+
+  .card-content {
+    padding: 1.5rem;
+    padding-top: 0;
+  }
+
+  .card-footer {
+    padding: 1.5rem;
+    padding-top: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .card-desc {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: hsl(var(--muted-foreground));
+    margin-top: 0.25rem;
+  }
+
+  .card-img {
+    display: block;
+    width: 100%;
+    border-top-left-radius: var(--radius-xl, 12px);
+    border-top-right-radius: var(--radius-xl, 12px);
+    object-fit: cover;
+  }
+
+  .card-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.5rem;
+    border-bottom: 1px solid hsl(var(--border));
+  }
+
+  .card-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+  }
+}

package/styles/components/checkbox.css

@@ -0,0 +1,55 @@
+@layer canvas.components {
+  .checkbox {
+    appearance: none;
+    width: 1rem;
+    height: 1rem;
+    border: 1px solid hsl(var(--input));
+    border-radius: var(--radius-sm, 4px);
+    background-color: transparent;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background-color var(--duration-fast), border-color var(--duration-fast);
+  }
+
+  .checkbox:focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+  }
+
+  .checkbox:checked {
+    background-color: hsl(var(--primary));
+    border-color: hsl(var(--primary));
+  }
+
+  .checkbox:checked::after {
+    content: "";
+    display: block;
+    width: 0.25rem;
+    height: 0.5rem;
+    margin: 1px auto 0;
+    border: solid hsl(var(--primary-foreground));
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
+
+  .checkbox:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .checkbox-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-family: var(--font-sans);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: hsl(var(--foreground));
+    cursor: pointer;
+  }
+
+  .checkbox-label:has(.checkbox:disabled) {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}