@olympusoss/canvas 2.20.1 → 3.1.0

package/styles/patterns/high-contrast.css

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

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

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

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

@@ -0,0 +1,106 @@
+@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 79.4% 60%;
+    --primary-foreground: 0 0% 100%;
+    --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 84.2% 60.2%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 79.4% 60%;
+    --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 79.4% 60%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --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: 240 79.4% 60%;
+    --primary-foreground: 0 0% 100%;
+    --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 84.2% 60.2%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 79.4% 60%;
+
+    --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: 240 79.4% 60%;
+    --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

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

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

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

package/styles/tokens/spacing.css

@@ -0,0 +1,19 @@
+@layer canvas.tokens {
+  :root {
+    --space-0: 0px;
+    --space-px: 1px;
+    --space-0-5: 0.125rem;
+    --space-1: 0.25rem;
+    --space-1-5: 0.375rem;
+    --space-2: 0.5rem;
+    --space-2-5: 0.625rem;
+    --space-3: 0.75rem;
+    --space-4: 1rem;
+    --space-5: 1.25rem;
+    --space-6: 1.5rem;
+    --space-8: 2rem;
+    --space-10: 2.5rem;
+    --space-12: 3rem;
+    --space-16: 4rem;
+  }
+}

package/styles/tokens/typography.css

@@ -0,0 +1,6 @@
+@layer canvas.tokens {
+  :root {
+    --font-sans: "Inter", system-ui, -apple-system, sans-serif;
+    --font-mono: "JetBrains Mono", "Fira Code", monospace;
+  }
+}

package/styles/tokens/z-index.css

@@ -0,0 +1,12 @@
+@layer canvas.tokens {
+  :root {
+    --z-base: 0;
+    --z-dropdown: 10;
+    --z-sticky: 20;
+    --z-overlay: 30;
+    --z-sidebar: 40;
+    --z-modal: 50;
+    --z-popover: 60;
+    --z-toast: 70;
+  }
+}

package/styles/utilities/display.css

@@ -0,0 +1,66 @@
+/* AUTO-GENERATED by scripts/generate-utilities.ts. Do not edit by hand; run: bun run generate-utilities */
+@layer canvas.utilities {
+  .block { display:block; }
+  .inline-block { display:inline-block; }
+  .inline { display:inline; }
+  .flex { display:flex; }
+  .inline-flex { display:inline-flex; }
+  .grid { display:grid; }
+  .inline-grid { display:inline-grid; }
+  .hidden { display:none; }
+
+  @media (min-width: 640px) {
+    .sm\:block { display:block; }
+    .sm\:inline-block { display:inline-block; }
+    .sm\:inline { display:inline; }
+    .sm\:flex { display:flex; }
+    .sm\:inline-flex { display:inline-flex; }
+    .sm\:grid { display:grid; }
+    .sm\:inline-grid { display:inline-grid; }
+    .sm\:hidden { display:none; }
+  }
+
+  @media (min-width: 768px) {
+    .md\:block { display:block; }
+    .md\:inline-block { display:inline-block; }
+    .md\:inline { display:inline; }
+    .md\:flex { display:flex; }
+    .md\:inline-flex { display:inline-flex; }
+    .md\:grid { display:grid; }
+    .md\:inline-grid { display:inline-grid; }
+    .md\:hidden { display:none; }
+  }
+
+  @media (min-width: 1024px) {
+    .lg\:block { display:block; }
+    .lg\:inline-block { display:inline-block; }
+    .lg\:inline { display:inline; }
+    .lg\:flex { display:flex; }
+    .lg\:inline-flex { display:inline-flex; }
+    .lg\:grid { display:grid; }
+    .lg\:inline-grid { display:inline-grid; }
+    .lg\:hidden { display:none; }
+  }
+
+  @media (min-width: 1280px) {
+    .xl\:block { display:block; }
+    .xl\:inline-block { display:inline-block; }
+    .xl\:inline { display:inline; }
+    .xl\:flex { display:flex; }
+    .xl\:inline-flex { display:inline-flex; }
+    .xl\:grid { display:grid; }
+    .xl\:inline-grid { display:inline-grid; }
+    .xl\:hidden { display:none; }
+  }
+
+  @media (min-width: 1536px) {
+    .\32 xl\:block { display:block; }
+    .\32 xl\:inline-block { display:inline-block; }
+    .\32 xl\:inline { display:inline; }
+    .\32 xl\:flex { display:flex; }
+    .\32 xl\:inline-flex { display:inline-flex; }
+    .\32 xl\:grid { display:grid; }
+    .\32 xl\:inline-grid { display:inline-grid; }
+    .\32 xl\:hidden { display:none; }
+  }
+}