@olympusoss/canvas 2.20.2 → 3.2.0

package/styles/atoms/select.css

@@ -0,0 +1,57 @@
+@layer canvas.components {
+  .select {
+    appearance: none;
+    height: 2.25rem;
+    padding: 0.25rem 2rem 0.25rem 0.75rem;
+    border: 1px solid hsl(var(--input));
+    border-radius: var(--radius-md, 6px);
+    background-color: transparent;
+    color: hsl(var(--foreground));
+    font-family: var(--font-sans);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    box-shadow: var(--shadow-xs);
+    outline: none;
+    width: 100%;
+    cursor: pointer;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.625rem center;
+    background-size: 12px;
+  }
+
+  .select:focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+  }
+
+  .select:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .select-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    height: 2.25rem;
+    padding: 0.25rem 0.75rem;
+    border: 1px solid hsl(var(--input));
+    border-radius: var(--radius-md, 6px);
+    background-color: transparent;
+    color: hsl(var(--foreground));
+    font-family: var(--font-sans);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    box-shadow: var(--shadow-xs);
+    outline: none;
+    width: 100%;
+    cursor: pointer;
+  }
+
+  .select-trigger:focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+  }
+}

package/styles/atoms/separator.css

@@ -0,0 +1,32 @@
+@layer canvas.components {
+  .sep {
+    height: 1px;
+    background-color: hsl(var(--border));
+    border-width: 0;
+    margin: 0;
+  }
+
+  .sep-v {
+    width: 1px;
+    height: 100%;
+    background-color: hsl(var(--border));
+  }
+
+  .sep-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: hsl(var(--muted-foreground));
+    font-family: var(--font-sans);
+    font-size: 0.75rem;
+    line-height: 1;
+  }
+
+  .sep-label::before,
+  .sep-label::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background-color: hsl(var(--border));
+  }
+}

package/styles/atoms/skeleton.css

@@ -0,0 +1,32 @@
+@layer canvas.components {
+  @keyframes shimmer {
+    from { background-position: -200% 0; }
+    to   { background-position: 200% 0; }
+  }
+
+  .skeleton {
+    background-color: hsl(var(--muted));
+    border-radius: var(--radius-md, 6px);
+    background-image: linear-gradient(
+      90deg,
+      transparent 0%,
+      hsl(var(--muted-foreground) / 0.08) 50%,
+      transparent 100%
+    );
+    background-size: 200% 100%;
+    animation: shimmer 1.5s ease-in-out infinite;
+  }
+
+  .skeleton-text {
+    height: 1rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .skeleton-circle {
+    border-radius: 9999px;
+  }
+
+  .skeleton-rect {
+    border-radius: var(--radius-md, 6px);
+  }
+}

package/styles/atoms/spinner.css

@@ -0,0 +1,26 @@
+@layer canvas.components {
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+  }
+
+  .spinner {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    border: 2px solid hsl(var(--primary));
+    border-top-color: transparent;
+    border-radius: 9999px;
+    animation: spin 600ms linear infinite;
+  }
+
+  .spinner-sm {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  .spinner-lg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+}

package/styles/atoms/switch.css

@@ -0,0 +1,45 @@
+@layer canvas.components {
+  .switch {
+    appearance: none;
+    position: relative;
+    width: 2.25rem;
+    height: 1.25rem;
+    border-radius: var(--radius-full, 9999px);
+    background-color: hsl(var(--muted));
+    border: none;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background-color var(--duration-fast);
+  }
+
+  .switch::after {
+    content: "";
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 0.875rem;
+    height: 0.875rem;
+    border-radius: 9999px;
+    background-color: white;
+    box-shadow: var(--shadow-xs);
+    transition: transform var(--duration-fast);
+  }
+
+  .switch:checked {
+    background-color: hsl(var(--primary));
+  }
+
+  .switch:checked::after {
+    transform: translateX(1rem);
+  }
+
+  .switch:focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+  }
+
+  .switch:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}

package/styles/atoms/textarea.css

@@ -0,0 +1,31 @@
+@layer canvas.components {
+  .textarea {
+    min-height: 5rem;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid hsl(var(--input));
+    border-radius: var(--radius-md, 6px);
+    background-color: transparent;
+    color: hsl(var(--foreground));
+    font-family: var(--font-sans);
+    font-size: 0.875rem;
+    line-height: 1.5;
+    resize: vertical;
+    box-shadow: var(--shadow-xs);
+    outline: none;
+    width: 100%;
+  }
+
+  .textarea::placeholder {
+    color: hsl(var(--muted-foreground));
+  }
+
+  .textarea:focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+  }
+
+  .textarea:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}

package/styles/atoms/tooltip.css

@@ -0,0 +1,53 @@
+@layer canvas.components {
+  .tooltip {
+    position: absolute;
+    padding: 6px 12px;
+    border-radius: var(--radius-md, 6px);
+    background-color: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+    font-family: var(--font-sans);
+    font-size: 0.75rem;
+    line-height: 1.4;
+    white-space: nowrap;
+    z-index: var(--z-popover);
+    box-shadow: var(--shadow-sm);
+    animation: var(--animate-fade-in);
+    pointer-events: none;
+  }
+
+  .tooltip-arrow {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background-color: hsl(var(--primary));
+    transform: rotate(45deg);
+  }
+
+  .tooltip-arrow.bottom {
+    top: 100%;
+    left: 50%;
+    margin-top: -4px;
+    margin-left: -4px;
+  }
+
+  .tooltip-arrow.top {
+    bottom: 100%;
+    left: 50%;
+    margin-bottom: -4px;
+    margin-left: -4px;
+  }
+
+  .tooltip-arrow.left {
+    right: 100%;
+    top: 50%;
+    margin-right: -4px;
+    margin-top: -4px;
+  }
+
+  .tooltip-arrow.right {
+    left: 100%;
+    top: 50%;
+    margin-left: -4px;
+    margin-top: -4px;
+  }
+}

package/styles/atoms/typography.css

@@ -0,0 +1,105 @@
+@layer canvas.components {
+  .display,
+  .h1 {
+    font-size: 36px;
+    line-height: 40px;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    color: hsl(var(--foreground));
+  }
+
+  .h2 {
+    font-size: 30px;
+    line-height: 2.25rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    color: hsl(var(--foreground));
+  }
+
+  .h3,
+  .page-title {
+    font-size: 1.5rem;
+    line-height: 2rem;
+    font-weight: 700;
+    letter-spacing: -0.015em;
+    color: hsl(var(--foreground));
+  }
+
+  .h4,
+  .card-title {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    color: hsl(var(--foreground));
+  }
+
+  .h5 {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    font-weight: 600;
+    color: hsl(var(--foreground));
+  }
+
+  .p,
+  .body {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    color: hsl(var(--foreground));
+  }
+
+  .small,
+  .muted {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .tiny,
+  .caption {
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .mono {
+    font-family: var(--font-mono);
+  }
+
+  .code {
+    font-family: var(--font-mono);
+    font-size: 0.9em;
+  }
+
+  code:not(pre code) {
+    background-color: hsl(var(--muted));
+    padding-inline: 0.35em;
+    padding-block: 0.125em;
+    border-radius: 0.125rem;
+  }
+
+  /* Color helpers */
+  .fg1 {
+    color: hsl(var(--foreground));
+  }
+
+  .fg2 {
+    color: hsl(var(--muted-foreground));
+  }
+
+  .bg1 {
+    background-color: hsl(var(--background));
+  }
+
+  .bg2 {
+    background-color: hsl(var(--muted));
+  }
+
+  .bg-card {
+    background-color: hsl(var(--card));
+  }
+
+  .muted-fg {
+    color: hsl(var(--muted-foreground));
+  }
+}

package/styles/base.css

@@ -0,0 +1,17 @@
+@layer canvas.base {
+  *,
+  ::after,
+  ::before {
+    border-color: hsl(var(--border));
+  }
+
+  body {
+    font-family: var(--font-sans);
+    color: hsl(var(--foreground));
+    background-color: hsl(var(--background));
+  }
+
+  code, pre, kbd {
+    font-family: var(--font-mono);
+  }
+}

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 "./atoms/typography.css";
+@import "./atoms/button.css";
+@import "./atoms/input.css";
+@import "./molecules/card.css";
+@import "./atoms/badge.css";
+@import "./atoms/separator.css";
+@import "./atoms/icon.css";
+@import "./atoms/avatar.css";
+@import "./atoms/kbd.css";
+@import "./molecules/code-block.css";
+@import "./organisms/sidebar.css";
+@import "./organisms/topbar.css";
+@import "./organisms/app-shell.css";
+@import "./molecules/stat-card.css";
+@import "./molecules/section-card.css";
+@import "./organisms/data-table.css";
+@import "./molecules/field.css";
+@import "./molecules/page-header.css";
+@import "./molecules/empty-state.css";
+@import "./organisms/row-menu.css";
+@import "./atoms/tooltip.css";
+@import "./atoms/skeleton.css";
+@import "./atoms/spinner.css";
+@import "./atoms/checkbox.css";
+@import "./atoms/radio.css";
+@import "./atoms/switch.css";
+@import "./atoms/select.css";
+@import "./atoms/textarea.css";
+@import "./atoms/combobox.css";
+@import "./molecules/alert.css";
+@import "./molecules/toast.css";
+@import "./organisms/dialog.css";
+@import "./organisms/sheet.css";
+@import "./atoms/popover.css";
+@import "./atoms/dropdown.css";
+@import "./atoms/breadcrumb.css";
+@import "./atoms/pagination.css";
+@import "./organisms/tabs.css";
+@import "./atoms/button-group.css";
+@import "./molecules/form.css";
+@import "./atoms/input-group.css";
+@import "./organisms/command.css";
+@import "./organisms/stepper.css";
+@import "./organisms/calendar.css";
+@import "./organisms/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/molecules/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/molecules/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/molecules/code-block.css

@@ -0,0 +1,18 @@
+@layer canvas.components {
+  .codeblock {
+    background-color: hsl(var(--muted) / 0.5);
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--radius-lg, 8px);
+    padding-left: 0.875rem;
+    padding-right: 0.875rem;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    line-height: 1.6;
+    color: hsl(var(--foreground));
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    overflow-x: auto;
+  }
+}

package/styles/molecules/empty-state.css

@@ -0,0 +1,17 @@
+@layer canvas.components {
+  .empty-card {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+    text-align: center;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .empty-card .title {
+    font-size: 15px;
+    font-weight: 500;
+    color: hsl(var(--foreground));
+    margin-bottom: 0.375rem;
+  }
+}