@olympusoss/canvas 3.2.1 → 5.0.0

package/styles/molecules/card.css

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

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

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

package/styles/molecules/field.css

@@ -1,27 +0,0 @@
-@layer canvas.components {
-  .field {
-    display: grid;
-    grid-template-columns: 180px 1fr;
-    gap: 1rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    align-items: baseline;
-  }
-
-  .field-label {
-    font-size: 13px;
-    color: hsl(var(--muted-foreground));
-    font-weight: 500;
-  }
-
-  .field-value {
-    font-size: 13px;
-    color: hsl(var(--foreground));
-    overflow-wrap: break-word;
-  }
-
-  .field-value.mono {
-    font-family: var(--font-mono);
-    font-size: 12.5px;
-  }
-}

package/styles/molecules/form.css

@@ -1,27 +0,0 @@
-@layer canvas.components {
-  .form-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
-  }
-
-  .form-row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-  }
-
-  .form-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: 0.5rem;
-    margin-top: 1.5rem;
-  }
-
-  .form-error {
-    font-size: 0.75rem;
-    line-height: 1rem;
-    color: hsl(var(--destructive));
-    margin-top: 0.25rem;
-  }
-}

package/styles/molecules/page-header.css

@@ -1,52 +0,0 @@
-@layer canvas.components {
-  .page-header {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    margin-bottom: 1.25rem;
-  }
-
-  @media (min-width: 640px) {
-    .page-header {
-      flex-direction: row;
-      align-items: flex-start;
-      justify-content: space-between;
-      gap: 1rem;
-      margin-bottom: 1.5rem;
-    }
-  }
-
-  .page-header-title {
-    display: flex;
-    align-items: center;
-    gap: 0.625rem;
-  }
-
-  .page-header h1 {
-    margin: 0;
-    font-size: 20px;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-    color: hsl(var(--foreground));
-  }
-
-  @media (min-width: 640px) {
-    .page-header h1 {
-      font-size: 22px;
-    }
-  }
-
-  .page-header .sub {
-    margin-top: 0.25rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    color: hsl(var(--muted-foreground));
-  }
-
-  .page-header-actions {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    flex-wrap: wrap;
-  }
-}

package/styles/molecules/section-card.css

@@ -1,49 +0,0 @@
-@layer canvas.components {
-  .section-card {
-    background-color: hsl(var(--card));
-    border: 1px solid hsl(var(--border));
-    border-radius: var(--radius-xl, 12px);
-    box-shadow: var(--shadow-elevated);
-    background-image: linear-gradient(to bottom, hsl(var(--card)), hsl(var(--muted) / 0.4));
-  }
-
-  .dark .section-card {
-    box-shadow: var(--shadow-elevated);
-    background-image: linear-gradient(to bottom, hsl(var(--card)), hsl(var(--background)));
-  }
-
-  .section-card-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0.75rem;
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
-    padding-top: 18px;
-    padding-bottom: 0.75rem;
-  }
-
-  .section-card-header h3 {
-    margin: 0;
-    font-size: 15px;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    color: hsl(var(--foreground));
-  }
-
-  .section-card-body {
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
-    padding-bottom: 18px;
-  }
-
-  .section-card-divider {
-    height: 1px;
-    background-color: hsl(var(--border));
-    margin-left: 1.25rem;
-    margin-right: 1.25rem;
-    margin-bottom: 0.875rem;
-  }
-}

package/styles/molecules/stat-card.css

@@ -1,71 +0,0 @@
-@layer canvas.components {
-  .stat-card {
-    background-color: hsl(var(--card));
-    border: 1px solid hsl(var(--border));
-    border-radius: var(--radius-xl, 12px);
-    padding: 1.25rem;
-    box-shadow: var(--shadow-elevated);
-    background-image: linear-gradient(to bottom, hsl(var(--card)), hsl(var(--muted) / 0.4));
-  }
-
-  .dark .stat-card {
-    box-shadow: var(--shadow-elevated);
-    background-image: linear-gradient(to bottom, hsl(var(--card)), hsl(var(--background)));
-  }
-
-  .stat-card-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: 0.75rem;
-  }
-
-  .stat-card-label {
-    font-size: 13px;
-    color: hsl(var(--muted-foreground));
-    font-weight: 500;
-  }
-
-  .stat-card-value {
-    font-size: 28px;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-    margin-top: 0.25rem;
-    color: hsl(var(--foreground));
-  }
-
-  .stat-card-icon {
-    width: 2.25rem;
-    height: 2.25rem;
-    border-radius: var(--radius-lg, 8px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-  }
-
-  .stat-card-icon.blue {
-    background-color: rgb(59 130 246 / 0.1);
-    color: #3b82f6;
-  }
-
-  .stat-card-icon.success {
-    background-color: rgb(16 185 129 / 0.1);
-    color: #10b981;
-  }
-
-  .stat-card-icon.purple {
-    background-color: rgb(139 92 246 / 0.1);
-    color: #8b5cf6;
-  }
-
-  .stat-card-icon.destructive {
-    background-color: rgb(239 68 68 / 0.1);
-    color: #ef4444;
-  }
-
-  .stat-card-icon.amber {
-    background-color: rgb(245 158 11 / 0.1);
-    color: #f59e0b;
-  }
-}

package/styles/molecules/toast.css

@@ -1,95 +0,0 @@
-@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/organisms/app-shell.css

@@ -1,46 +0,0 @@
-@layer canvas.components {
-  .app-shell {
-    min-height: 100vh;
-    background-color: hsl(var(--background));
-  }
-
-  .app-main {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-    transition-property: margin-left;
-    transition-duration: 200ms;
-    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-    margin-left: 0;
-  }
-
-  @media (min-width: 1024px) {
-    .app-main.collapsed {
-      margin-left: 3.5rem;
-    }
-
-    .app-main.expanded {
-      margin-left: 15rem;
-    }
-  }
-
-  .app-content {
-    flex: 1 1 0%;
-    width: 100%;
-    max-width: 1400px;
-    margin-left: auto;
-    margin-right: auto;
-    padding-left: 1rem;
-    padding-right: 1rem;
-    padding-top: 1rem;
-    padding-bottom: 3rem;
-  }
-
-  @media (min-width: 640px) {
-    .app-content {
-      padding-left: 1.75rem;
-      padding-right: 1.75rem;
-      padding-top: 1.5rem;
-    }
-  }
-}

package/styles/organisms/calendar.css

@@ -1,73 +0,0 @@
-@layer canvas.components {
-  .calendar {
-    padding: 0.75rem;
-    width: fit-content;
-  }
-
-  .calendar-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 0.5rem;
-  }
-
-  .calendar-title {
-    font-size: 14px;
-    font-weight: 600;
-  }
-
-  .calendar-nav {
-    display: flex;
-    gap: 0.25rem;
-  }
-
-  .calendar-grid {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    gap: 0;
-  }
-
-  .calendar-head {
-    font-size: 12px;
-    font-weight: 500;
-    color: hsl(var(--muted-foreground));
-    text-align: center;
-    padding: 0.25rem;
-    width: 2.25rem;
-  }
-
-  .calendar-cell {
-    width: 2.25rem;
-    height: 2.25rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 14px;
-    border-radius: var(--radius-md);
-    cursor: pointer;
-  }
-
-  .calendar-cell:hover {
-    background-color: hsl(var(--accent));
-  }
-
-  .calendar-cell.today {
-    font-weight: 600;
-    border: 1px solid hsl(var(--primary));
-  }
-
-  .calendar-cell.selected {
-    background-color: hsl(var(--primary));
-    color: hsl(var(--primary-foreground));
-  }
-
-  .calendar-cell.outside {
-    color: hsl(var(--muted-foreground));
-    opacity: 0.4;
-  }
-
-  .calendar-cell.disabled {
-    opacity: 0.3;
-    pointer-events: none;
-  }
-}

package/styles/organisms/command.css

@@ -1,95 +0,0 @@
-@layer canvas.components {
-  .command-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgb(0 0 0 / 0.5);
-    z-index: var(--z-modal);
-  }
-
-  .command-dialog {
-    position: fixed;
-    top: 20%;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: var(--z-modal);
-    width: 32rem;
-    max-width: calc(100% - 2rem);
-    background-color: hsl(var(--popover));
-    border: 1px solid hsl(var(--border));
-    border-radius: var(--radius-xl, 12px);
-    box-shadow: var(--shadow-lg);
-    overflow: hidden;
-    animation: var(--animate-modal-in);
-  }
-
-  .command-input {
-    width: 100%;
-    padding: 0.75rem 1rem;
-    border: none;
-    border-bottom: 1px solid hsl(var(--border));
-    background: transparent;
-    font-size: 16px;
-    outline: none;
-    color: hsl(var(--foreground));
-  }
-
-  .command-input::placeholder {
-    color: hsl(var(--muted-foreground));
-  }
-
-  .command-list {
-    max-height: 20rem;
-    overflow-y: auto;
-    padding: 0.25rem;
-  }
-
-  .command-group {
-    padding: 0.25rem 0;
-  }
-
-  .command-group-label {
-    padding: 0.375rem 0.5rem;
-    font-size: 12px;
-    font-weight: 600;
-    color: hsl(var(--muted-foreground));
-  }
-
-  .command-item {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem;
-    border-radius: var(--radius-md);
-    cursor: pointer;
-    font-size: 14px;
-  }
-
-  .command-item:hover {
-    background-color: hsl(var(--accent));
-  }
-
-  .command-item.selected {
-    background-color: hsl(var(--primary) / 0.16);
-    color: hsl(var(--primary));
-  }
-
-  .command-sep {
-    height: 1px;
-    margin: 0.25rem 0;
-    background-color: hsl(var(--border));
-  }
-
-  .command-empty {
-    padding: 1.5rem;
-    text-align: center;
-    color: hsl(var(--muted-foreground));
-    font-size: 14px;
-  }
-
-  .command-shortcut {
-    margin-left: auto;
-    font-size: 12px;
-    color: hsl(var(--muted-foreground));
-    font-family: var(--font-mono);
-  }
-}