@olympusoss/canvas 2.20.2 → 3.2.0

package/styles/molecules/field.css

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

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

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

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

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

@@ -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/organisms/app-shell.css

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

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

@@ -0,0 +1,94 @@
+@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(--accent));
+  }
+
+  .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);
+  }
+}

package/styles/organisms/data-table.css

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