@olympusoss/canvas 3.2.1 → 5.0.0

package/styles/organisms/data-table.css

@@ -1,142 +0,0 @@
-@layer canvas.components {
-  .dt-wrap {
-    background-color: hsl(var(--card));
-    border: 1px solid hsl(var(--border));
-    border-radius: var(--radius-xl, 12px);
-    overflow: hidden;
-    box-shadow: var(--shadow-elevated);
-  }
-
-  .dark .dt-wrap {
-    box-shadow: var(--shadow-elevated);
-  }
-
-  .dt-scroll {
-    overflow-x: auto;
-  }
-
-  .dt-toolbar {
-    display: flex;
-    align-items: center;
-    gap: 0.625rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-top: 0.875rem;
-    padding-bottom: 0.875rem;
-    border-bottom: 1px solid hsl(var(--border));
-    flex-wrap: wrap;
-  }
-
-  .dt-toolbar .input {
-    height: 34px;
-  }
-
-  .dt-table {
-    width: 100%;
-    border-collapse: collapse;
-    min-width: 720px;
-  }
-
-  .dt-table th {
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-top: 0.625rem;
-    padding-bottom: 0.625rem;
-    text-align: left;
-    font-size: 0.75rem;
-    line-height: 1rem;
-    font-weight: 500;
-    color: hsl(var(--muted-foreground));
-    letter-spacing: 0.02em;
-    line-height: 1.4;
-    border-bottom: 1px solid hsl(var(--border));
-    white-space: nowrap;
-    background: hsl(var(--muted) / 0.4);
-  }
-
-  .dt-table td {
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-    font-size: 13px;
-    line-height: 1.4;
-    color: hsl(var(--foreground));
-    border-bottom: 1px solid hsl(var(--border));
-    vertical-align: middle;
-    white-space: nowrap;
-  }
-
-  .dt-table td.wrap {
-    white-space: normal;
-  }
-
-  .dt-table tr:last-child td {
-    border-bottom-width: 0;
-  }
-
-  .dt-table tbody tr {
-    transition-property: color, background-color, border-color;
-    transition-duration: 150ms;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  .dt-table tbody tr.clickable {
-    cursor: pointer;
-  }
-
-  .dt-table tbody tr.clickable:hover {
-    background: hsl(var(--muted) / 0.4);
-  }
-
-  .dt-footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-top: 0.625rem;
-    padding-bottom: 0.625rem;
-    border-top: 1px solid hsl(var(--border));
-    font-size: 0.75rem;
-    line-height: 1rem;
-    color: hsl(var(--muted-foreground));
-  }
-
-  .dt-table th.sortable {
-    cursor: pointer;
-    user-select: none;
-  }
-
-  .dt-table th.sortable:hover {
-    background: hsl(var(--accent));
-  }
-
-  .dt-sort-icon {
-    display: inline-flex;
-    margin-left: 0.25rem;
-    opacity: 0.4;
-  }
-
-  .dt-table th.sorted .dt-sort-icon {
-    opacity: 1;
-  }
-
-  .dt-table th.sticky-col,
-  .dt-table td.sticky-col {
-    position: sticky;
-    left: 0;
-    z-index: 1;
-    background: inherit;
-  }
-
-  .dt-expand-row td {
-    padding: 0;
-    border-bottom: 1px solid hsl(var(--border));
-  }
-
-  .dt-expand-content {
-    padding: 0.75rem 1rem;
-    background: hsl(var(--muted) / 0.3);
-  }
-}

package/styles/organisms/dialog.css

@@ -1,72 +0,0 @@
-@layer canvas.components {
-  .dialog-overlay {
-    position: fixed;
-    inset: 0;
-    background-color: rgb(0 0 0 / 0.5);
-    z-index: var(--z-modal);
-    animation: var(--animate-fade-in);
-  }
-
-  .dialog {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: var(--z-modal);
-    max-width: 32rem;
-    width: calc(100% - 2rem);
-    background-color: hsl(var(--popover));
-    color: hsl(var(--popover-foreground));
-    border: 1px solid hsl(var(--border));
-    border-radius: var(--radius-xl, 12px);
-    box-shadow: var(--shadow-lg);
-    animation: var(--animate-modal-in);
-    padding: 1.5rem;
-  }
-
-  .dialog-header {
-    margin-bottom: 1rem;
-  }
-
-  .dialog-title {
-    font-size: 1.125rem;
-    line-height: 1.5rem;
-    font-weight: 600;
-  }
-
-  .dialog-desc {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    color: hsl(var(--muted-foreground));
-    margin-top: 0.25rem;
-  }
-
-  .dialog-footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.5rem;
-    margin-top: 1.5rem;
-  }
-
-  .dialog-close {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    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;
-  }
-
-  .dialog-close:hover {
-    background-color: hsl(var(--accent));
-    color: hsl(var(--foreground));
-  }
-}

package/styles/organisms/filter-panel.css

@@ -1,58 +0,0 @@
-@layer canvas.components {
-  .filter-panel {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .filter-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-
-  .filter-group-label {
-    font-size: 13px;
-    font-weight: 600;
-    color: hsl(var(--foreground));
-  }
-
-  .filter-group-content {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-  }
-
-  .filter-chip {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
-    padding: 0.25rem 0.625rem;
-    border-radius: 9999px;
-    font-size: 12px;
-    border: 1px solid hsl(var(--border));
-    cursor: pointer;
-    background: transparent;
-  }
-
-  .filter-chip:hover {
-    background-color: hsl(var(--accent));
-  }
-
-  .filter-chip.active {
-    background-color: hsl(var(--primary));
-    color: hsl(var(--primary-foreground));
-    border-color: hsl(var(--primary));
-  }
-
-  .filter-chip-remove {
-    display: inline-flex;
-    margin-left: 0.125rem;
-    opacity: 0.6;
-    cursor: pointer;
-  }
-
-  .filter-chip-remove:hover {
-    opacity: 1;
-  }
-}

package/styles/organisms/row-menu.css

@@ -1,69 +0,0 @@
-@layer canvas.components {
-  .rowmenu-item {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    width: 100%;
-    background-color: transparent;
-    border: 0;
-    cursor: pointer;
-    font-size: 13px;
-    font-family: inherit;
-    color: hsl(var(--foreground));
-    padding-left: 0.625rem;
-    padding-right: 0.625rem;
-    padding-top: 0.375rem;
-    padding-bottom: 0.375rem;
-    border-radius: 5px;
-    text-align: left;
-  }
-
-  .rowmenu-item:hover {
-    background-color: hsl(var(--accent));
-  }
-
-  .rowmenu-item.rowmenu-danger {
-    color: hsl(var(--destructive));
-  }
-
-  .rowmenu-item.rowmenu-danger:hover {
-    background: hsl(var(--destructive) / 0.08);
-  }
-
-  .rowmenu-sep {
-    height: 1px;
-    background-color: hsl(var(--border));
-    margin-left: 0.125rem;
-    margin-right: 0.125rem;
-    margin-top: 0.25rem;
-    margin-bottom: 0.25rem;
-  }
-
-  .navlink {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 500;
-    color: hsl(var(--muted-foreground));
-    text-decoration: none;
-    transition-property: color, background-color, border-color;
-    transition-duration: 150ms;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  .navlink:hover {
-    color: hsl(var(--foreground));
-  }
-
-  .navlink.active {
-    color: hsl(var(--foreground));
-  }
-
-  .nav-wrap {
-    position: sticky;
-    top: 0;
-    z-index: var(--z-modal);
-    background-color: hsl(var(--background) / 0.8);
-    backdrop-filter: blur(12px);
-    border-bottom: 1px solid hsl(var(--border));
-  }
-}

package/styles/organisms/sheet.css

@@ -1,70 +0,0 @@
-@layer canvas.components {
-  @keyframes slide-in-left {
-    from { transform: translateX(-100%); }
-    to   { transform: translateX(0); }
-  }
-
-  .sheet-overlay {
-    position: fixed;
-    inset: 0;
-    background-color: rgb(0 0 0 / 0.5);
-    z-index: var(--z-modal);
-    animation: var(--animate-fade-in);
-  }
-
-  .sheet {
-    position: fixed;
-    z-index: var(--z-modal);
-    background-color: hsl(var(--popover));
-    color: hsl(var(--popover-foreground));
-    border: 1px solid hsl(var(--border));
-    box-shadow: var(--shadow-lg);
-    display: flex;
-    flex-direction: column;
-  }
-
-  .sheet-right {
-    right: 0;
-    top: 0;
-    bottom: 0;
-    width: 24rem;
-    max-width: calc(100% - 2rem);
-    animation: var(--animate-slide-in);
-    border-left: 1px solid hsl(var(--border));
-  }
-
-  .sheet-left {
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 24rem;
-    max-width: calc(100% - 2rem);
-    animation: slide-in-left 240ms var(--ease-out);
-    border-right: 1px solid hsl(var(--border));
-  }
-
-  .sheet-header {
-    padding: 1.5rem;
-    border-bottom: 1px solid hsl(var(--border));
-  }
-
-  .sheet-title {
-    font-size: 1.125rem;
-    line-height: 1.5rem;
-    font-weight: 600;
-  }
-
-  .sheet-body {
-    padding: 1.5rem;
-    overflow-y: auto;
-    flex: 1;
-  }
-
-  .sheet-footer {
-    padding: 1.5rem;
-    border-top: 1px solid hsl(var(--border));
-    display: flex;
-    gap: 0.5rem;
-    justify-content: flex-end;
-  }
-}

package/styles/organisms/sidebar.css

@@ -1,146 +0,0 @@
-@layer canvas.components {
-  .sidebar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 15rem;
-    display: flex;
-    flex-direction: column;
-    z-index: var(--z-sidebar);
-    background-color: hsl(var(--sidebar-background));
-    border-right: 1px solid hsl(var(--sidebar-border));
-    transition-property: transform, width;
-    transition-duration: 200ms;
-    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-    transform: translateX(-100%);
-  }
-
-  @media (min-width: 1024px) {
-    .sidebar {
-      transform: translateX(0);
-    }
-  }
-
-  .sidebar.open {
-    transform: translateX(0);
-  }
-
-  @media (min-width: 1024px) {
-    .sidebar.collapsed {
-      width: 3.5rem;
-    }
-  }
-
-  .sidebar-brand {
-    height: 3.5rem;
-    display: flex;
-    align-items: center;
-    gap: 0.625rem;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    border-bottom: 1px solid hsl(var(--sidebar-border));
-  }
-
-  .sidebar.collapsed .sidebar-brand {
-    padding: 0;
-    justify-content: center;
-  }
-
-  .sidebar-brand-name {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 600;
-    letter-spacing: -0.01em;
-    color: hsl(var(--sidebar-foreground));
-  }
-
-  .sidebar-collapse-btn {
-    width: 26px;
-    height: 26px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: 0;
-    background-color: transparent;
-    cursor: pointer;
-    border-radius: var(--radius-md, 6px);
-    transition-property: color, background-color, border-color;
-    transition-duration: 150ms;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    color: hsl(var(--sidebar-foreground) / 0.6);
-  }
-
-  .sidebar-collapse-btn:hover {
-    background-color: hsl(var(--sidebar-accent));
-    color: hsl(var(--sidebar-foreground));
-  }
-
-  .sidebar-nav {
-    flex: 1 1 0%;
-    overflow-y: auto;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-  }
-
-  .sidebar-group {
-    margin-bottom: 0.875rem;
-  }
-
-  .sidebar-group-label {
-    padding-left: 0.625rem;
-    padding-right: 0.625rem;
-    padding-bottom: 0.375rem;
-    font-size: 11px;
-    font-weight: 500;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: hsl(var(--muted-foreground));
-  }
-
-  .sidebar-item {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 0.625rem;
-    padding-left: 0.625rem;
-    padding-right: 0.625rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    border-radius: var(--radius-md, 6px);
-    border: 0;
-    background-color: transparent;
-    font-size: 13px;
-    font-weight: 500;
-    line-height: 1;
-    cursor: pointer;
-    transition-property: color, background-color, border-color;
-    transition-duration: 150ms;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    color: hsl(var(--sidebar-foreground));
-    opacity: 0.78;
-    font-family: var(--font-sans);
-  }
-
-  .sidebar-item:hover {
-    background-color: hsl(var(--sidebar-accent));
-    opacity: 1;
-  }
-
-  .sidebar-item.active {
-    background-color: hsl(var(--sidebar-primary) / 0.16);
-    opacity: 1;
-    color: hsl(var(--sidebar-primary));
-  }
-
-  .sidebar.collapsed .sidebar-item {
-    justify-content: center;
-    padding: 0.5rem;
-  }
-
-  .sidebar.collapsed .sidebar-item .label {
-    display: none;
-  }
-}

package/styles/organisms/stepper.css

@@ -1,63 +0,0 @@
-@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/organisms/tabs.css

@@ -1,40 +0,0 @@
-@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/organisms/topbar.css

@@ -1,24 +0,0 @@
-@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/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;
-  }
-}