baldur 0.1.1

data/app/assets/stylesheets/baldur/application/components/alert.css

@@ -0,0 +1,226 @@
+@layer components {
+  .alert {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--space-3);
+    padding: var(--space-3);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--color-outline-variant);
+    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
+    color: var(--color-on-surface);
+    animation: layer-enter var(--motion-duration-medium1) var(--motion-easing-emphasized-decelerate) both;
+    transition: border-color var(--motion-duration-short4) var(--motion-easing-standard),
+      background-color var(--motion-duration-short4) var(--motion-easing-standard);
+  }
+
+  .alert__icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 9999px;
+    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    color: var(--color-primary);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .alert__icon svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .alert__body {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+
+  .alert__details {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    overflow: hidden;
+    opacity: 1;
+    max-height: 1000px;
+    transition:
+      max-height var(--motion-duration-medium2) var(--motion-easing-emphasized-decelerate),
+      opacity var(--motion-duration-short4) var(--motion-easing-standard);
+  }
+
+  .alert__details--collapsed {
+    max-height: 0;
+    opacity: 0;
+  }
+
+  .alert__rail {
+    display: flex;
+    flex: 0 0 auto;
+    align-self: center;
+    justify-content: flex-end;
+    align-items: center;
+    min-height: 100%;
+  }
+
+  .alert__actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--space-3);
+  }
+
+  .alert__content {
+    font-size: 0.95rem;
+    color: var(--color-text);
+  }
+
+  .alert__summary-action {
+    flex-shrink: 0;
+  }
+
+  .alert__toggle {
+    padding-inline: 0;
+  }
+
+  .alert--notice {
+    border-color: var(--color-info-outline);
+    background: var(--color-info-container);
+    color: var(--color-on-info-container);
+  }
+
+  .alert--notice .alert__icon {
+    background: transparent;
+    color: var(--color-on-info-container);
+  }
+
+  .alert--notice .alert__title,
+  .alert--notice .alert__content {
+    color: var(--color-on-info-container);
+  }
+
+  .alert--success {
+    border-color: var(--color-success-outline);
+    background: var(--color-success-container);
+    color: var(--color-on-success-container);
+  }
+
+  .alert--success .alert__icon {
+    background: transparent;
+    color: var(--color-on-success-container);
+  }
+
+  .alert--success .alert__title,
+  .alert--success .alert__content {
+    color: var(--color-on-success-container);
+  }
+
+  .alert--warning {
+    border-color: var(--color-warning-outline);
+    background: var(--color-warning-container);
+    color: var(--color-on-warning-container);
+  }
+
+  .alert--warning .alert__icon {
+    background: transparent;
+    color: var(--color-on-warning-container);
+  }
+
+  .alert--warning .alert__title,
+  .alert--warning .alert__content {
+    color: var(--color-on-warning-container);
+  }
+
+  .alert--error {
+    border-color: var(--color-error-outline);
+    background: var(--color-error-container);
+    color: var(--color-on-error-container);
+  }
+
+  .alert--error .alert__icon {
+    background: transparent;
+    color: var(--color-on-error-container);
+  }
+
+  .alert--error .alert__title,
+  .alert--error .alert__content {
+    color: var(--color-on-error-container);
+  }
+
+  .alert__title {
+    font-weight: 600;
+    font-size: 1rem;
+    margin: 0;
+  }
+
+  .alert--collapsed .alert__body {
+    gap: 0;
+    align-self: center;
+    justify-content: center;
+  }
+
+  .alert--collapsed {
+    align-items: center;
+  }
+
+  .alert--collapsed .alert__title {
+    display: flex;
+    align-items: center;
+    min-height: 2.5rem;
+  }
+
+  .alert__actions[hidden],
+  .alert__summary-action[hidden] {
+    display: none;
+  }
+
+  .alert__list {
+    list-style: disc;
+    margin: 0;
+    padding-left: var(--space-5);
+    font-size: 0.875rem;
+    color: var(--color-text-soft);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .alert {
+      animation: none;
+      transition: none;
+    }
+
+    .alert__details {
+      transition: none;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .alert {
+      flex-wrap: wrap;
+    }
+
+    .alert__rail {
+      width: 100%;
+      justify-content: flex-start;
+      align-self: stretch;
+    }
+
+    .alert__actions {
+      justify-content: flex-start;
+    }
+
+    .alert--collapsed .alert__rail {
+      width: auto;
+      margin-left: auto;
+    }
+
+    .alert--collapsed .alert__body {
+      flex: 1 1 auto;
+    }
+
+    .alert__details {
+      flex-direction: column;
+    }
+  }
+}

data/app/assets/stylesheets/baldur/application/components/app_bar.css

@@ -0,0 +1,41 @@
+@layer components {
+  .app-bar {
+    position: relative;
+    z-index: 20;
+    background-color: transparent;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    border-bottom: 1px solid var(--color-outline-variant);
+  }
+
+  .app-bar__inner {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--space-4);
+    padding: var(--space-4) var(--space-6);
+    width: 100%;
+  }
+
+  .app-bar__actions {
+    pointer-events: auto;
+  }
+
+  .avatar {
+    inline-size: 40px;
+    block-size: 40px;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--color-primary-container);
+    color: var(--color-on-primary-container);
+    font-weight: 700;
+  }
+
+  .theme-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+}

data/app/assets/stylesheets/baldur/application/components/button.css

@@ -0,0 +1,173 @@
+@layer components {
+
+  /* Default buttons align to a 40px tap target. */
+  .button {
+    position: relative;
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    height: 2.5rem;
+    padding: calc(var(--space-2) + 2px) var(--space-4);
+    border-radius: var(--radius-md);
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    text-decoration: none;
+    transition:
+      background-color var(--motion-duration-short4) var(--motion-easing-standard),
+      color var(--motion-duration-short4) var(--motion-easing-standard),
+      border-color var(--motion-duration-short4) var(--motion-easing-standard),
+      transform var(--motion-duration-short4) var(--motion-easing-standard);
+    overflow: hidden;
+    border: 1px solid var(--btn-border, transparent);
+    color: var(--btn-fg, var(--color-on-primary));
+    background-color: var(--btn-bg, var(--color-primary));
+    cursor: pointer;
+  }
+
+  .button::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-color: var(--btn-state, var(--color-on-primary));
+    opacity: 0;
+    transition: opacity var(--motion-duration-short4) var(--motion-easing-standard);
+  }
+
+  .button:hover::after {
+    opacity: 0.08;
+  }
+
+  .button:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
+  .button:disabled {
+    cursor: not-allowed;
+    opacity: 0.38;
+  }
+
+  .button--filled {
+    --btn-bg: var(--color-primary);
+    --btn-fg: var(--color-on-primary);
+    --btn-state: var(--color-on-primary);
+    --btn-border: transparent;
+  }
+
+  .button--tonal {
+    --btn-bg: var(--color-secondary-container);
+    --btn-fg: var(--color-on-secondary-container);
+    --btn-state: var(--color-on-secondary-container);
+    --btn-border: transparent;
+  }
+
+  :root.dark .button--tonal,
+  .dark .button--tonal {
+    /* Dark mode: add subtle elevation/outline so tonal buttons don't blend into cards. */
+    --btn-bg: color-mix(in oklch, var(--color-secondary-container) 90%, var(--_scale-light) 10%);
+    --btn-border: color-mix(in oklch, var(--color-outline-variant) 35%, transparent);
+  }
+
+  .button--tonal-error {
+    --btn-bg: var(--color-error-container);
+    --btn-fg: var(--color-on-error-container);
+    --btn-state: var(--color-on-error-container);
+    --btn-border: transparent;
+  }
+
+  .button--tertiary {
+    --btn-bg: var(--color-tertiary-container);
+    --btn-fg: var(--color-on-tertiary-container);
+    --btn-state: var(--color-on-tertiary-container);
+    --btn-border: transparent;
+  }
+
+  .button--outlined {
+    --btn-bg: transparent;
+    --btn-fg: var(--color-on-surface);
+    --btn-state: var(--color-on-surface);
+    --btn-border: var(--color-outline);
+  }
+
+  .button--text {
+    --btn-bg: transparent;
+    --btn-fg: var(--color-primary);
+    --btn-state: var(--color-primary);
+    --btn-border: transparent;
+  }
+
+  .button--elevated {
+    --btn-bg: var(--color-surface-highest);
+    --btn-fg: var(--color-primary);
+    --btn-state: var(--color-primary);
+    --btn-border: color-mix(in srgb, var(--color-primary) 22%, var(--color-outline-variant));
+  }
+
+  .button--error {
+    --btn-bg: var(--color-error);
+    --btn-fg: var(--color-on-error);
+    --btn-state: var(--color-on-error);
+    --btn-border: transparent;
+  }
+
+  .button--sm {
+    height: 2.25rem;
+    padding: var(--space-2) var(--space-3);
+    font-size: 0.9rem;
+    border-radius: var(--radius-sm);
+  }
+
+  .button--lg {
+    height: 2.75rem;
+    padding: var(--space-3) var(--space-5);
+    font-size: 1rem;
+    border-radius: var(--radius-lg);
+  }
+
+  .button--swap {
+    display: inline-grid;
+    place-items: center;
+    white-space: nowrap;
+  }
+
+  .button--swap .button__label {
+    grid-area: 1 / 1;
+    line-height: 1;
+    display: block;
+    transition: opacity var(--motion-duration-short4) var(--motion-easing-standard);
+  }
+
+  .button--swap .button__label-hover {
+    opacity: 0;
+  }
+
+  .button--swap:hover .button__label-default {
+    opacity: 0;
+  }
+
+  .button--swap:hover .button__label-hover {
+    opacity: 1;
+  }
+
+  .button--block {
+    width: 100%;
+  }
+
+  .icon-button {
+    inline-size: 40px;
+    block-size: 40px;
+    border-radius: var(--radius-md);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    color: var(--color-on-surface);
+    transition: background-color var(--motion-duration-short4) var(--motion-easing-standard), color var(--motion-duration-short4) var(--motion-easing-standard);
+  }
+
+  .icon-button:hover {
+    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  }
+}

data/app/assets/stylesheets/baldur/application/components/card.css

@@ -0,0 +1,63 @@
+@layer components {
+  .card {
+    background-color: var(--color-surface-highest);
+    color: var(--color-on-surface);
+    border-radius: var(--radius-xl);
+    border: 1px solid var(--color-outline-variant);
+    padding: var(--space-6);
+    animation: layer-enter var(--motion-duration-medium2) var(--motion-easing-emphasized-decelerate) both;
+    transition:
+      transform var(--motion-duration-short4) var(--motion-easing-standard),
+      border-color var(--motion-duration-short4) var(--motion-easing-standard);
+  }
+
+  .card:hover {
+    transform: translateY(-2px);
+  }
+
+  /* Ensure dropdown menus can layer above subsequent cards.
+     Cards animate via transform (stacking context), so the open menu
+     must raise the card's stacking order, not only the menu's z-index. */
+  @supports selector(:has(*)) {
+    .card:has(.menu-select.is-open),
+    .card:has([data-tooltip-target="bubble"][data-state="open"]),
+    .card:has(.menu-wrapper[open]) {
+      position: relative;
+      z-index: 1000;
+    }
+  }
+
+  .card--outlined {
+    background-color: var(--color-surface);
+    border-color: var(--color-outline);
+  }
+
+  .card--primary {
+    background-color: var(--color-primary-container);
+    color: var(--color-on-primary-container);
+    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-outline-variant));
+  }
+
+  .card--surface {
+    background-color: var(--color-surface);
+    color: var(--color-on-surface);
+    border-color: var(--color-outline-variant);
+  }
+
+  .card--attention {
+    background-color: var(--color-error-container);
+    color: var(--color-on-error-container);
+    border-color: color-mix(in srgb, var(--color-error) 30%, var(--color-outline-variant));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .card {
+      animation: none;
+      transition: none;
+    }
+
+    .card:hover {
+      transform: none;
+    }
+  }
+}

data/app/assets/stylesheets/baldur/application/components/chart.css

@@ -0,0 +1,40 @@
+@layer components {
+  .chart-card {
+    background-color: var(--color-surface-highest);
+    border: 1px solid var(--color-outline-variant);
+    border-radius: var(--radius-xl);
+    overflow: hidden;
+  }
+
+  .chart-card__header,
+  .chart-card__footer {
+    padding: var(--space-5) var(--space-6);
+    background-color: var(--color-surface-highest);
+  }
+
+  .chart-card__header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    border-bottom: 1px solid var(--color-outline-variant);
+  }
+
+  .chart-card__body {
+    padding: var(--space-6);
+    background-color: var(--color-surface-highest);
+  }
+
+  .chart-card__footer {
+    border-top: 1px solid var(--color-outline-variant);
+  }
+
+  @media (max-width: 640px) {
+    .chart-card__header,
+    .chart-card__body,
+    .chart-card__footer {
+      padding-inline: var(--space-4);
+    }
+  }
+}

data/app/assets/stylesheets/baldur/application/components/chip.css

@@ -0,0 +1,51 @@
+@layer components {
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-1) var(--space-2);
+    border-radius: var(--radius-lg);
+    font-weight: 600;
+    font-size: 0.75rem;
+    border: 1px solid var(--color-outline-variant);
+    background-color: var(--color-surface-low);
+    color: var(--color-on-surface);
+  }
+
+  .chip--xs {
+    padding: 2px 6px;
+    border-radius: var(--radius-md);
+    font-size: 0.625rem;
+    line-height: 1.3;
+  }
+
+  .chip--primary {
+    background-color: var(--color-primary-container);
+    color: var(--color-on-primary-container);
+    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-outline-variant));
+  }
+
+  .chip--success {
+    background-color: var(--color-success-container);
+    color: var(--color-on-success-container);
+    border-color: var(--color-success-outline);
+  }
+
+  .chip--warn {
+    background-color: var(--color-warning-container);
+    color: var(--color-on-warning-container);
+    border-color: var(--color-warning-outline);
+  }
+
+  .chip--disabled {
+    background-color: var(--color-surface-low);
+    color: var(--color-on-surface-variant);
+    border-color: var(--color-outline-variant);
+  }
+
+  .chip--danger {
+    background-color: var(--color-error-container);
+    color: var(--color-on-error-container);
+    border-color: var(--color-error-outline);
+  }
+}

data/app/assets/stylesheets/baldur/application/components/dialog.css

@@ -0,0 +1,81 @@
+@layer components {
+  .dialog {
+    background-color: var(--color-surface-high);
+    color: var(--color-on-surface);
+    border-radius: var(--radius-xl);
+    border: 1px solid var(--color-outline-variant);
+    padding: var(--space-6);
+    padding-right: var(--space-4);
+    transition: transform var(--motion-duration-short4) var(--motion-easing-standard);
+    max-height: min(90vh, 720px);
+    width: min(640px, calc(100vw - 2rem));
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--color-on-surface) 40%, transparent) transparent;
+  }
+
+  .dialog--overflow-visible {
+    overflow: visible;
+  }
+
+  .dialog::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .dialog::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .dialog::-webkit-scrollbar-thumb {
+    background-color: color-mix(in srgb, var(--color-on-surface) 35%, transparent);
+    border-radius: 999px;
+    border: 2px solid transparent;
+  }
+
+
+  [data-modal] {
+    background-color: color-mix(in srgb, var(--color-scrim, rgba(0, 0, 0, 1)) 32%, transparent);
+    backdrop-filter: blur(4px);
+    --modal-fade-in-duration: var(--motion-duration-short4);
+    --modal-fade-out-duration: var(--motion-duration-short4);
+    --modal-fade-easing: var(--motion-easing-linear);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--modal-fade-out-duration) var(--modal-fade-easing);
+  }
+
+  [data-modal].is-visible {
+    opacity: 1;
+    pointer-events: auto;
+    transition-duration: var(--modal-fade-in-duration);
+  }
+
+  [data-modal].is-hiding {
+    transition-duration: var(--modal-fade-out-duration);
+  }
+
+  [data-modal] .dialog {
+    opacity: 0;
+    transform: translateY(16px) scale(0.98);
+    transition:
+      opacity var(--modal-fade-in-duration) var(--modal-fade-easing),
+      transform var(--modal-fade-in-duration) var(--modal-fade-easing);
+  }
+
+  [data-modal].is-visible .dialog.motion-fade-scale {
+    animation: fade-scale var(--motion-duration-medium1) var(--motion-easing-emphasized-decelerate) both;
+  }
+
+  [data-modal].is-visible .dialog {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+
+  [data-modal].is-hiding .dialog {
+    transition-duration: var(--modal-fade-out-duration);
+  }
+
+  [data-modal].is-hiding .dialog.motion-fade-scale {
+    animation: layer-exit var(--motion-duration-short4) var(--motion-easing-emphasized-accelerate) both;
+  }
+}