baldur 0.1.1

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

@@ -0,0 +1,123 @@
+@layer components {
+  .sidebar {
+    position: sticky;
+    top: 0;
+    align-self: flex-start;
+    height: 100vh;
+    z-index: 21;
+    overflow: visible;
+    width: var(--tp-sidebar-width-expanded, 16rem);
+    transition: width var(--motion-duration-short4) var(--motion-easing-standard);
+  }
+
+  .sidebar__link {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius-md);
+    color: var(--color-on-surface);
+    text-decoration: none;
+    font-weight: 500;
+  }
+
+  .sidebar__toggle {
+    cursor: pointer;
+    pointer-events: auto;
+    position: relative;
+    z-index: 22;
+  }
+
+  .sidebar__link:hover,
+  .sidebar__link[aria-current="page"] {
+    background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
+    color: var(--color-primary);
+  }
+
+  .sidebar__icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+  }
+
+  .sidebar__label {
+    white-space: nowrap;
+  }
+
+  [data-sidebar-collapsed-value="true"] .sidebar {
+    width: var(--tp-sidebar-width-collapsed, 4.25rem);
+  }
+
+  [data-sidebar-collapsed-value="true"] .sidebar__menu {
+    display: none;
+  }
+
+  [data-sidebar-collapsed-value="true"] .sidebar__label,
+  [data-sidebar-collapsed-value="true"] .sidebar__brand-name,
+  [data-sidebar-collapsed-value="true"] .sidebar__section-label {
+    display: none;
+  }
+
+  [data-sidebar-collapsed-value="true"] .sidebar__header {
+    justify-content: center;
+  }
+
+  .sidebar__toggle-hit-area {
+    display: none;
+  }
+
+  [data-sidebar-collapsed-value="true"] .sidebar__toggle {
+    position: absolute;
+    top: var(--space-4);
+    right: 0;
+    transform: translateX(50%);
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-outline-variant);
+    box-shadow: var(--elev-1);
+    z-index: 22;
+  }
+
+  [data-sidebar-collapsed-value="true"] .sidebar__toggle-hit-area {
+    display: block;
+    position: absolute;
+    top: var(--space-4);
+    left: var(--tp-sidebar-width-collapsed, 4.25rem);
+    width: 20px;
+    height: 40px;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    z-index: 23;
+  }
+
+  [data-sidebar-collapsed-value="true"] .sidebar__link {
+    justify-content: center;
+    padding-left: var(--space-2);
+    padding-right: var(--space-2);
+  }
+
+  [data-sidebar-collapsed-value="true"] .theme-toggle {
+    gap: 0;
+  }
+
+  [data-sidebar-collapsed-value="true"] .theme-toggle .switch__track {
+    display: none;
+  }
+
+  [data-sidebar-collapsed-value="true"] .theme-toggle__compact {
+    display: inline-flex;
+  }
+
+  [data-sidebar-collapsed-value="true"] .sidebar__footer-inner {
+    align-items: center;
+  }
+
+  html[data-theme="dark"] .theme-toggle__compact-icon--sun {
+    display: none;
+  }
+
+  html[data-theme="dark"] .theme-toggle__compact-icon--moon {
+    display: inline-flex;
+  }
+}

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

@@ -0,0 +1,179 @@
+@layer components {
+  .snackbar-stack {
+    position: fixed;
+    top: var(--space-6);
+    right: var(--space-6);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    z-index: 60;
+    width: min(360px, calc(100vw - 2rem));
+    pointer-events: none;
+  }
+
+  @media (max-width: 640px) {
+    .snackbar-stack {
+      top: var(--space-4);
+      right: var(--space-4);
+      left: var(--space-4);
+      width: auto;
+    }
+  }
+
+  .snackbar {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: start;
+    gap: var(--space-4);
+    padding: var(--space-3) var(--space-4);
+    background-color: var(--color-surface-high);
+    border: 1px solid var(--color-outline-variant);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--elev-2);
+    min-width: 280px;
+    pointer-events: auto;
+
+    opacity: 0;
+    transform: translateY(-8px);
+    transition:
+      opacity var(--motion-duration-short4) var(--motion-easing-emphasized-accelerate),
+      transform var(--motion-duration-short4) var(--motion-easing-emphasized-accelerate);
+  }
+
+  .snackbar.is-visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .snackbar.is-leaving {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+
+  .snackbar__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 0.1rem;
+  }
+
+  .snackbar__icon svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .snackbar__body {
+    display: grid;
+    gap: var(--space-1);
+    min-width: 0;
+  }
+
+  .snackbar__title {
+    margin: 0;
+    font-size: 0.95rem;
+    line-height: 1.35;
+    font-weight: 600;
+  }
+
+  .snackbar__message {
+    font-size: 0.9rem;
+    line-height: 1.45;
+    margin: 0;
+    color: inherit;
+    opacity: 0.92;
+  }
+
+  .snackbar__dismiss {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin-top: -0.15rem;
+    border: none;
+    border-radius: 999px;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    transition:
+      background-color var(--motion-duration-short4) var(--motion-easing-standard),
+      box-shadow var(--motion-duration-short4) var(--motion-easing-standard);
+  }
+
+  .snackbar__dismiss:hover {
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
+  }
+
+  .snackbar__dismiss:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 24%, transparent);
+  }
+
+  .snackbar__dismiss-ring {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .snackbar__dismiss-ring svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg);
+  }
+
+  .snackbar__dismiss-track,
+  .snackbar__dismiss-indicator {
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.75;
+  }
+
+  .snackbar__dismiss-track {
+    opacity: 0.18;
+  }
+
+  .snackbar__dismiss-indicator {
+    stroke-dasharray: 100;
+    stroke-dashoffset: 0;
+    stroke-linecap: round;
+  }
+
+  .snackbar__dismiss-icon {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .snackbar__dismiss-icon svg {
+    width: 0.95rem;
+    height: 0.95rem;
+  }
+
+  .snackbar--success {
+    background-color: var(--color-success-container);
+    border-color: var(--color-success-outline);
+    color: var(--color-on-success-container);
+  }
+
+  .snackbar--notice {
+    background-color: var(--color-info-container);
+    border-color: var(--color-info-outline);
+    color: var(--color-on-info-container);
+  }
+
+  .snackbar--warning {
+    background-color: var(--color-warning-container);
+    border-color: var(--color-warning-outline);
+    color: var(--color-on-warning-container);
+  }
+
+  .snackbar--error {
+    background-color: var(--color-error-container);
+    border-color: var(--color-error-outline);
+    color: var(--color-on-error-container);
+  }
+}

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

@@ -0,0 +1,124 @@
+@layer components {
+  .stepper-container {
+    overflow-x: auto;
+    padding-bottom: 0.5rem;
+  }
+
+  .stepper {
+    --stepper-gap: 1.5rem;
+    display: flex;
+    gap: var(--stepper-gap);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    min-width: max(640px, 100%);
+  }
+
+  .stepper__item {
+    flex: 1 1 0;
+    min-width: 160px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-2);
+    text-align: center;
+  }
+
+  .stepper__indicator-row {
+    width: 100%;
+    display: grid;
+    grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
+    align-items: center;
+    column-gap: var(--space-3);
+  }
+
+  .stepper__line {
+    height: 2px;
+    border-radius: 9999px;
+    background: color-mix(in srgb, var(--color-outline-variant) 65%, transparent);
+    transition: background-color var(--motion-duration-short4) var(--motion-easing-standard);
+  }
+
+  .stepper__line--active {
+    background: var(--color-primary);
+  }
+
+  .stepper__line--hidden {
+    background: transparent;
+  }
+
+  .stepper__indicator {
+    width: 36px;
+    height: 36px;
+    border-radius: 9999px;
+    border: 2px solid var(--color-outline-variant);
+    background: var(--color-surface);
+    color: var(--color-text);
+    font-size: 0.9rem;
+    font-weight: 600;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      transform var(--motion-duration-short4) var(--motion-easing-emphasized),
+      background-color var(--motion-duration-short4) var(--motion-easing-emphasized),
+      border-color var(--motion-duration-short4) var(--motion-easing-emphasized),
+      color var(--motion-duration-short4) var(--motion-easing-emphasized);
+  }
+
+  .stepper__label {
+    font-size: 0.9rem;
+    font-weight: 600;
+    color: var(--color-on-surface);
+  }
+
+  .stepper__description {
+    font-size: 0.75rem;
+    color: var(--color-text-soft);
+    margin: 0;
+  }
+
+  .stepper__item--completed .stepper__indicator {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    color: var(--color-on-primary);
+  }
+
+  .stepper__item--current .stepper__indicator {
+    color: var(--color-primary);
+    border-color: var(--color-primary);
+    background: color-mix(in srgb, var(--color-primary) 25%, transparent);
+    outline: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
+    outline-offset: 3px;
+    transform: scale(1.05);
+  }
+
+  .stepper__item--pending .stepper__indicator {
+    background: color-mix(in srgb, var(--color-surface) 80%, transparent);
+    border-color: var(--color-outline-variant);
+    color: var(--color-text-muted);
+  }
+
+  @media (max-width: 640px) {
+    .stepper {
+      --stepper-gap: 1rem;
+      flex-wrap: nowrap;
+    }
+
+    .stepper__item {
+      min-width: 200px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .stepper__indicator,
+    .stepper__line {
+      transition: none;
+    }
+
+    .stepper__item--current .stepper__indicator {
+      transform: none;
+      outline: none;
+    }
+  }
+}

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

@@ -0,0 +1,105 @@
+@layer components {
+  .switch {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    gap: var(--space-2);
+  }
+
+  .switch input {
+    position: absolute;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  .switch__track {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 56px;
+    height: 32px;
+    padding: 0 var(--space-2);
+    border-radius: 9999px;
+    background: color-mix(in srgb, var(--color-on-surface) 15%, transparent);
+    transition:
+      background-color var(--motion-duration-short4) var(--motion-easing-emphasized);
+  }
+
+  .switch__thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 28px;
+    height: 28px;
+    border-radius: 9999px;
+    background: var(--color-surface-high);
+    border: 1px solid color-mix(in srgb, var(--color-outline) 70%, transparent);
+    transition: transform var(--motion-duration-short4) var(--motion-easing-emphasized),
+      background-color var(--motion-duration-short4) var(--motion-easing-emphasized),
+      border-color var(--motion-duration-short4) var(--motion-easing-emphasized);
+  }
+
+  .switch__icon {
+    width: 16px;
+    height: 16px;
+    color: var(--color-text);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: color var(--motion-duration-short4) var(--motion-easing-emphasized);
+  }
+
+  .theme-toggle__compact {
+    display: none;
+  }
+
+  .theme-toggle__compact-icon {
+    display: none;
+    width: 20px;
+    height: 20px;
+    color: currentColor;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .switch__icon svg,
+  .theme-toggle__compact-icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .theme-toggle__compact-icon--sun {
+    display: inline-flex;
+  }
+
+  .theme-toggle__compact-icon--moon {
+    display: none;
+  }
+
+  .switch input:checked + .switch__track {
+    background: color-mix(in srgb, var(--color-primary) 80%, transparent);
+  }
+
+  .switch input:checked + .switch__track .switch__thumb {
+    transform: translateX(24px);
+    background: var(--color-on-primary);
+    border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
+  }
+
+  .switch input:checked + .switch__track .switch__icon--moon {
+    color: var(--color-on-primary);
+  }
+
+  .switch input:checked + .switch__track .switch__icon--sun {
+    color: color-mix(in srgb, var(--color-on-primary) 80%, transparent);
+  }
+
+  .switch input:not(:checked) + .switch__track .switch__icon--sun {
+    color: var(--color-text);
+  }
+}