@olympusoss/canvas 4.0.0 → 5.0.0

package/styles/components/typography.css

@@ -1,105 +0,0 @@
-@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

@@ -1,35 +0,0 @@
-@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

@@ -1,66 +0,0 @@
-@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

@@ -1,38 +0,0 @@
-@layer canvas.patterns {
-  :where(
-    .input:focus,
-    input:focus,
-    textarea:focus,
-    select:focus,
-    .btn:focus,
-    button:focus,
-    a:focus,
-    [role="button"]:focus,
-    [role="switch"]:focus,
-    [role="checkbox"]:focus,
-    [role="radio"]:focus,
-    [role="menuitem"]:focus,
-    [role="option"]:focus,
-    [role="tab"]:focus,
-    [tabindex]: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); }
-  }
-
-  :where(a, [role="link"]):focus,
-  :where(a, [role="link"]).canvas-focus-pulse {
-    border-radius: 9999px;
-  }
-}

package/styles/patterns/glass.css

@@ -1,85 +0,0 @@
-@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));
-  }
-}

package/styles/patterns/high-contrast.css

@@ -1,70 +0,0 @@
-@layer canvas.patterns {
-  @media (prefers-contrast: more) {
-    :root {
-      --border: 240 5.9% 50%;
-      --input: 240 5.9% 50%;
-      --muted-foreground: 240 6% 25%;
-      --shadow-xs: none;
-      --shadow-sm: none;
-      --shadow-md: none;
-      --shadow-lg: none;
-      --shadow-elevated: none;
-    }
-
-    .dark {
-      --border: 240 5% 60%;
-      --input: 240 5% 60%;
-      --muted-foreground: 240 5% 80%;
-    }
-
-    .btn,
-    .input,
-    .select,
-    .textarea,
-    .checkbox,
-    .radio,
-    .switch {
-      border-width: 2px;
-    }
-
-    .card,
-    .stat-card,
-    .section-card,
-    .dt-wrap,
-    .empty-card,
-    .alert {
-      border-width: 2px;
-    }
-
-    .badge,
-    .status-badge,
-    .kbd {
-      border-width: 2px;
-    }
-
-    .sidebar {
-      border-right-width: 2px;
-    }
-
-    .topbar {
-      border-bottom-width: 2px;
-    }
-
-    .dt-table th,
-    .dt-table td {
-      border-bottom-width: 2px;
-    }
-
-    .tab.active {
-      border-bottom-width: 3px;
-    }
-
-    .sep {
-      border-top-width: 2px;
-    }
-
-    .sep-v {
-      border-left-width: 2px;
-    }
-  }
-}

package/styles/patterns/reduced-motion.css

@@ -1,12 +0,0 @@
-@layer canvas.patterns {
-  @media (prefers-reduced-motion: reduce) {
-    *,
-    ::before,
-    ::after {
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
-      scroll-behavior: auto !important;
-    }
-  }
-}

package/styles/patterns/scrollbar.css

@@ -1,10 +0,0 @@
-@layer canvas.patterns {
-  * {
-    scrollbar-width: thin;
-    scrollbar-color: hsl(var(--muted-foreground) / 0.25) transparent;
-  }
-
-  html[data-surface="glass"] * {
-    scrollbar-color: hsl(255 100% 100% / 0.30) transparent;
-  }
-}

package/styles/reset.css

@@ -1,89 +0,0 @@
-@layer canvas.reset {
-  *,
-  ::after,
-  ::before {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-  }
-
-  html {
-    line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
-    tab-size: 4;
-  }
-
-  body {
-    line-height: inherit;
-  }
-
-  hr {
-    height: 0;
-    color: inherit;
-    border-top-width: 1px;
-  }
-
-  h1, h2, h3, h4, h5, h6 {
-    font-size: inherit;
-    font-weight: inherit;
-  }
-
-  a {
-    color: inherit;
-    text-decoration: inherit;
-  }
-
-  b, strong {
-    font-weight: bolder;
-  }
-
-  code, kbd, samp, pre {
-    font-size: 1em;
-  }
-
-  small {
-    font-size: 80%;
-  }
-
-  button, input, optgroup, select, textarea {
-    font-family: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    font-size: 100%;
-    font-weight: inherit;
-    line-height: inherit;
-    color: inherit;
-  }
-
-  button, select {
-    text-transform: none;
-  }
-
-  button,
-  [type="button"],
-  [type="reset"],
-  [type="submit"] {
-    -webkit-appearance: button;
-    appearance: button;
-  }
-
-  table {
-    text-indent: 0;
-    border-color: inherit;
-    border-collapse: collapse;
-  }
-
-  img, svg, video, canvas, audio, iframe, embed, object {
-    display: block;
-    vertical-align: middle;
-  }
-
-  img, video {
-    max-width: 100%;
-    height: auto;
-  }
-
-  [hidden] {
-    display: none;
-  }
-}

package/styles/tokens/colors.css

@@ -1,106 +0,0 @@
-@layer canvas.tokens {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 72% 51%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
-    --radius: 0.5rem;
-
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-
-    --brand-blue-700: #1e40af;
-    --brand-blue-400: #60a5fa;
-    --brand-gradient: linear-gradient(135deg, #1e40af 0%, #60a5fa 100%);
-
-    --orb-indigo: #6366f1;
-    --orb-violet: #8b5cf6;
-    --orb-cyan: #06b6d4;
-
-    --color-success: hsl(143 70% 45%);
-    --color-warning: hsl(38 92% 50%);
-    --color-info: hsl(217 91% 60%);
-
-    --success-bg: 141 79% 85%;
-    --success-fg: 144 61% 20%;
-    --warning-bg: 48 96% 89%;
-    --warning-fg: 40 80% 27%;
-    --error-bg: 0 93% 94%;
-    --error-fg: 0 70% 35%;
-    --info-bg: 214 95% 93%;
-    --info-fg: 221 83% 45%;
-  }
-
-  .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-
-    --success-bg: 149 50% 22%;
-    --success-fg: 142 70% 65%;
-    --warning-bg: 38 50% 20%;
-    --warning-fg: 43 90% 65%;
-    --error-bg: 0 50% 18%;
-    --error-fg: 0 80% 70%;
-    --info-bg: 217 50% 22%;
-    --info-fg: 217 90% 72%;
-  }
-}

package/styles/tokens/motion.css

@@ -1,33 +0,0 @@
-@layer canvas.tokens {
-  @keyframes toast-in {
-    from { opacity: 0; transform: translateY(8px); }
-    to   { opacity: 1; transform: translateY(0); }
-  }
-
-  @keyframes modal-in {
-    from { opacity: 0; transform: scale(0.96); }
-    to   { opacity: 1; transform: scale(1); }
-  }
-
-  @keyframes fade-in {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-  }
-
-  @keyframes slide-in {
-    from { transform: translateX(100%); }
-    to   { transform: translateX(0); }
-  }
-
-  :root {
-    --duration-fast: 150ms;
-    --duration-normal: 200ms;
-    --duration-slow: 300ms;
-    --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
-
-    --animate-toast-in: toast-in var(--duration-normal) ease-out;
-    --animate-modal-in: modal-in 180ms ease-out;
-    --animate-fade-in: fade-in var(--duration-normal) ease-out;
-    --animate-slide-in: slide-in 240ms var(--ease-out);
-  }
-}

package/styles/tokens/radius.css

@@ -1,10 +0,0 @@
-@layer canvas.tokens {
-  :root {
-    --radius-sm: 4px;
-    --radius-md: 6px;
-    --radius-lg: 8px;
-    --radius-xl: 12px;
-    --radius-2xl: 16px;
-    --radius-full: 9999px;
-  }
-}

package/styles/tokens/shadows.css

@@ -1,35 +0,0 @@
-@layer canvas.tokens {
-  :root {
-    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    --shadow-sm:
-      0 1px 2px hsl(220 30% 20% / 0.04),
-      0 2px 4px -1px hsl(220 30% 20% / 0.06);
-    --shadow-md:
-      0 1px 2px hsl(220 30% 20% / 0.04),
-      0 8px 24px -12px hsl(220 30% 20% / 0.12);
-    --shadow-lg:
-      0 2px 4px hsl(220 30% 20% / 0.04),
-      0 12px 32px -8px hsl(220 30% 20% / 0.16);
-    --shadow-elevated:
-      0 1px 2px hsl(220 30% 20% / 0.04),
-      0 8px 24px -12px hsl(220 30% 20% / 0.12),
-      inset 0 1px 0 hsl(0 0% 100% / 0.5);
-  }
-
-  .dark {
-    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.2);
-    --shadow-sm:
-      0 1px 2px hsl(0 0% 0% / 0.2),
-      0 2px 4px -1px hsl(0 0% 0% / 0.2);
-    --shadow-md:
-      0 1px 2px hsl(0 0% 0% / 0.4),
-      0 8px 24px -12px hsl(0 0% 0% / 0.5);
-    --shadow-lg:
-      0 2px 4px hsl(0 0% 0% / 0.3),
-      0 12px 32px -8px hsl(0 0% 0% / 0.5);
-    --shadow-elevated:
-      0 1px 2px hsl(0 0% 0% / 0.4),
-      0 8px 24px -12px hsl(0 0% 0% / 0.5),
-      inset 0 1px 0 hsl(0 0% 100% / 0.06);
-  }
-}