@olympusoss/canvas 2.20.1 → 3.1.0

package/styles/components/stepper.css

@@ -0,0 +1,63 @@
+@layer canvas.components {
+  .stepper {
+    display: flex;
+    align-items: center;
+    gap: 0;
+  }
+
+  .step {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .step-indicator {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 9999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    font-weight: 600;
+    border: 2px solid hsl(var(--border));
+    color: hsl(var(--muted-foreground));
+    background-color: hsl(var(--background));
+  }
+
+  .step.completed .step-indicator {
+    background-color: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+    border-color: hsl(var(--primary));
+  }
+
+  .step.active .step-indicator {
+    border-color: hsl(var(--primary));
+    color: hsl(var(--primary));
+  }
+
+  .step-label {
+    font-size: 14px;
+    color: hsl(var(--muted-foreground));
+  }
+
+  .step.active .step-label {
+    color: hsl(var(--foreground));
+    font-weight: 500;
+  }
+
+  .step.completed .step-label {
+    color: hsl(var(--foreground));
+  }
+
+  .step-connector {
+    flex: 1;
+    height: 2px;
+    background-color: hsl(var(--border));
+    margin: 0 0.5rem;
+  }
+
+  .step.completed + .step-connector {
+    background-color: hsl(var(--primary));
+  }
+}

package/styles/components/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/components/tabs.css

@@ -0,0 +1,40 @@
+@layer canvas.components {
+  .tabs-list {
+    display: flex;
+    border-bottom: 1px solid hsl(var(--border));
+    gap: 0;
+  }
+
+  .tab {
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    color: hsl(var(--muted-foreground));
+    border: none;
+    border-bottom: 2px solid transparent;
+    background: none;
+    cursor: pointer;
+    transition-property: color, border-color;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: ease;
+  }
+
+  .tab:hover {
+    color: hsl(var(--foreground));
+  }
+
+  .tab.active {
+    color: hsl(var(--foreground));
+    border-bottom-color: hsl(var(--primary));
+  }
+
+  .tab:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .tabs-content {
+    padding-top: 1rem;
+  }
+}

package/styles/components/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/components/toast.css

@@ -0,0 +1,95 @@
+@layer canvas.components {
+  .toast-viewport {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    z-index: var(--z-toast);
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    pointer-events: none;
+    max-width: 420px;
+    width: 100%;
+  }
+
+  .toast {
+    background-color: hsl(var(--popover));
+    color: hsl(var(--popover-foreground));
+    border: 1px solid hsl(var(--border));
+    border-radius: var(--radius-lg, 8px);
+    box-shadow: var(--shadow-lg);
+    padding: 1rem;
+    pointer-events: auto;
+    position: relative;
+    animation: var(--animate-toast-in);
+  }
+
+  .toast-title {
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .toast-desc {
+    font-size: 0.8125rem;
+    line-height: 1.25rem;
+    color: hsl(var(--muted-foreground));
+    margin-top: 0.125rem;
+  }
+
+  .toast-close {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    border: none;
+    border-radius: var(--radius-sm, 4px);
+    background-color: transparent;
+    color: hsl(var(--muted-foreground));
+    cursor: pointer;
+    padding: 0;
+  }
+
+  .toast-close:hover {
+    background-color: hsl(var(--accent));
+    color: hsl(var(--foreground));
+  }
+
+  .toast-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    border: 1px solid hsl(var(--input));
+    border-radius: var(--radius-md, 6px);
+    box-shadow: var(--shadow-xs);
+    height: 2rem;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    font-weight: 500;
+    cursor: pointer;
+    white-space: nowrap;
+    margin-top: 0.5rem;
+  }
+
+  .toast-action:hover {
+    background-color: hsl(var(--accent));
+  }
+
+  .toast-destructive {
+    border-color: hsl(var(--destructive) / 0.5);
+    color: hsl(var(--destructive));
+  }
+
+  .toast-destructive .toast-desc {
+    color: hsl(var(--destructive) / 0.7);
+  }
+}

package/styles/components/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/components/topbar.css

@@ -0,0 +1,24 @@
+@layer canvas.components {
+  .topbar {
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    border-bottom: 1px solid hsl(var(--border));
+    background-color: hsl(var(--background) / 0.7);
+    backdrop-filter: blur(12px);
+    position: sticky;
+    top: 0;
+    z-index: var(--z-sticky);
+  }
+
+  @media (min-width: 640px) {
+    .topbar {
+      gap: 0.75rem;
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+    }
+  }
+}

package/styles/components/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/patterns/backdrops.css

@@ -0,0 +1,35 @@
+@layer canvas.patterns {
+  html, body {
+    background-color: hsl(var(--background));
+  }
+
+  body {
+    background-image:
+      radial-gradient(70% 55% at 50% -10%, hsl(var(--primary) / 0.28), transparent 60%);
+    background-size: 100% 100%;
+    background-attachment: fixed;
+  }
+
+  .dark body {
+    background-image:
+      radial-gradient(70% 55% at 50% -10%, hsl(var(--primary) / 0.40), transparent 60%);
+  }
+
+  html[data-surface="glass"] body {
+    background:
+      radial-gradient(60% 50% at 12% 10%, hsl(28 100% 80% / 0.55), transparent 60%),
+      radial-gradient(55% 55% at 88% 8%, hsl(210 100% 78% / 0.55), transparent 60%),
+      radial-gradient(70% 60% at 50% 100%, hsl(270 90% 82% / 0.45), transparent 65%),
+      hsl(220 30% 97%);
+    background-attachment: fixed;
+  }
+
+  html[data-surface="glass"].dark body {
+    background:
+      radial-gradient(55% 50% at 10% 8%, hsl(245 90% 60% / 0.40), transparent 60%),
+      radial-gradient(50% 55% at 92% 12%, hsl(280 85% 55% / 0.35), transparent 60%),
+      radial-gradient(70% 60% at 50% 100%, hsl(190 90% 45% / 0.28), transparent 70%),
+      hsl(222 30% 6%);
+    background-attachment: fixed;
+  }
+}

package/styles/patterns/density.css

@@ -0,0 +1,66 @@
+@layer canvas.patterns {
+  html[data-density="compact"] .app-content {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    padding-top: 0.75rem;
+    padding-bottom: 2rem;
+  }
+
+  html[data-density="comfy"] .app-content {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    padding-top: 2rem;
+    padding-bottom: 4rem;
+  }
+
+  @media (min-width: 1024px) {
+    html[data-density="comfy"] .app-content {
+      padding-left: 2.25rem;
+      padding-right: 2.25rem;
+    }
+  }
+
+  html[data-density="compact"] .dt-toolbar {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    padding-top: 0.625rem;
+    padding-bottom: 0.625rem;
+  }
+
+  html[data-density="comfy"] .dt-toolbar {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+    padding-top: 18px;
+    padding-bottom: 18px;
+  }
+
+  html[data-density="compact"] .dt-table th {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  html[data-density="comfy"] .dt-table th {
+    padding-left: 18px;
+    padding-right: 18px;
+    padding-top: 0.875rem;
+    padding-bottom: 0.875rem;
+  }
+
+  html[data-density="compact"] .dt-table td {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    font-size: 12.5px;
+  }
+
+  html[data-density="comfy"] .dt-table td {
+    padding-left: 18px;
+    padding-right: 18px;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    font-size: 13.5px;
+  }
+}

package/styles/patterns/focus.css

@@ -0,0 +1,22 @@
+@layer canvas.patterns {
+  :where(
+    .input:focus,
+    input:focus,
+    textarea:focus,
+    select:focus,
+    .focus-pulse-within:focus-within
+  ):not(.no-focus-pulse),
+  .canvas-focus-pulse {
+    outline: none;
+    animation: canvasFocusPulse 1.2s ease-out infinite;
+  }
+
+  .focus-pulse-within :focus {
+    animation: none;
+  }
+
+  @keyframes canvasFocusPulse {
+    0% { box-shadow: 0 0 0 0px hsl(var(--ring) / 0.7); }
+    100% { box-shadow: 0 0 0 5px hsl(var(--ring) / 0); }
+  }
+}

package/styles/patterns/glass.css

@@ -0,0 +1,85 @@
+@layer canvas.patterns {
+  html[data-surface="glass"] { --glass-tint: 222 22% 100%; --glass-tint-a: 0.55; --glass-edge-a: 0.45; --glass-hi-a: 0.55; --glass-shadow: 220 30% 20%; }
+  html[data-surface="glass"].dark { --glass-tint: 222 22% 18%; --glass-tint-a: 0.55; --glass-edge-a: 0.10; --glass-hi-a: 0.10; --glass-shadow: 222 60% 4%; }
+
+  html[data-surface="glass"] .app-shell { background-color: transparent; }
+
+  html[data-surface="glass"] .stat-card,
+  html[data-surface="glass"] .section-card,
+  html[data-surface="glass"] .dt-wrap,
+  html[data-surface="glass"] .empty-card,
+  html[data-surface="glass"] .topbar,
+  html[data-surface="glass"] .sidebar {
+    backdrop-filter: blur(18px) saturate(1.4);
+    background-color: hsl(var(--glass-tint) / var(--glass-tint-a));
+    border-color: hsl(255 100% 100% / var(--glass-edge-a));
+    box-shadow:
+      inset 0 1px 0 hsl(255 100% 100% / var(--glass-hi-a)),
+      0 1px 2px hsl(var(--glass-shadow) / 0.06),
+      0 8px 24px -12px hsl(var(--glass-shadow) / 0.18);
+  }
+
+  html[data-surface="glass"] .sidebar {
+    background-color: hsl(var(--glass-tint) / calc(var(--glass-tint-a) - 0.10));
+    border-right-color: hsl(255 100% 100% / var(--glass-edge-a));
+  }
+  html[data-surface="glass"] .topbar {
+    background-color: hsl(var(--glass-tint) / calc(var(--glass-tint-a) - 0.10));
+    border-bottom-color: hsl(255 100% 100% / var(--glass-edge-a));
+  }
+  html[data-surface="glass"] .sidebar-brand,
+  html[data-surface="glass"] .sidebar-group-label {
+    border-color: hsl(255 100% 100% / var(--glass-edge-a));
+  }
+  html[data-surface="glass"] .sidebar-item:hover,
+  html[data-surface="glass"] .sidebar-item.active {
+    background-color: hsl(255 100% 100% / 0.18);
+  }
+
+  html[data-surface="glass"] .dt-toolbar,
+  html[data-surface="glass"] .dt-footer {
+    border-color: hsl(255 100% 100% / var(--glass-edge-a));
+  }
+  html[data-surface="glass"] .dt-table th {
+    background-color: hsl(255 100% 100% / 0.10);
+    border-bottom-color: hsl(255 100% 100% / var(--glass-edge-a));
+  }
+  html[data-surface="glass"] .dt-table td {
+    border-bottom-color: hsl(255 100% 100% / calc(var(--glass-edge-a) - 0.20));
+  }
+  html[data-surface="glass"] .dt-table tbody tr.clickable:hover {
+    background-color: hsl(255 100% 100% / 0.10);
+  }
+  html[data-surface="glass"] .section-card-divider {
+    background-color: hsl(255 100% 100% / var(--glass-edge-a));
+  }
+
+  html[data-surface="glass"] .input,
+  html[data-surface="glass"] textarea.input,
+  html[data-surface="glass"] select.input {
+    backdrop-filter: blur(8px);
+    background-color: hsl(var(--glass-tint) / 0.35);
+    border-color: hsl(255 100% 100% / var(--glass-edge-a));
+  }
+  html[data-surface="glass"] .kbd,
+  html[data-surface="glass"] .codeblock {
+    background-color: hsl(255 100% 100% / 0.10);
+    border-color: hsl(255 100% 100% / var(--glass-edge-a));
+  }
+
+  html[data-surface="glass"]:not(.dark) .btn-secondary,
+  html[data-surface="glass"]:not(.dark) .btn-outline {
+    backdrop-filter: blur(8px);
+    background-color: hsl(var(--glass-tint) / 0.55);
+    border-color: hsl(255 100% 100% / var(--glass-edge-a));
+  }
+
+  html[data-surface="glass"] [role="menu"],
+  html[data-surface="glass"] .popover,
+  html[data-surface="glass"] .rowmenu-portal,
+  html[data-surface="glass"] .slide-over-panel {
+    backdrop-filter: blur(20px) saturate(1.4);
+    background-color: hsl(var(--glass-tint) / 0.85);
+    border-color: hsl(255 100% 100% / var(--glass-edge-a));
+  }
+}