@lostgradient/cinder 0.1.0 → 0.2.0

package/src/styles/tokens-base.css

@@ -50,19 +50,26 @@
   --cinder-radius-full: 9999px;
 
   /* Shadows wrap each color argument in `light-dark()` so dark mode paints
-   * a light-neutral elevation instead of invisible black-on-dark. The light
-   * arguments preserve the original `oklch(0% 0 0 / α)` values exactly;
-   * the dark arguments use `oklch(100% 0 0 / α)` with subtle alphas tuned
-   * to lift the surface without producing a glow halo. Each shadow color
-   * is wrapped individually — the offsets, blur radii, spread radii, and
-   * layer counts are unchanged. */
-  --cinder-shadow-sm: 0 1px 2px light-dark(oklch(0% 0 0 / 0.08), oklch(100% 0 0 / 0.06));
+   * a light-neutral elevation instead of invisible black-on-dark. The dark
+   * arguments use `oklch(100% 0 0 / α)` with alphas tuned to lift the surface
+   * without producing a glow halo. Each shadow color is wrapped individually —
+   * within any one token the offsets, blur radii, and spread radii are identical
+   * across the light and dark arms (only the color/alpha branches per theme).
+   * This refinement pass did change the geometry of shadow-sm itself: it gained
+   * a 2nd hairline layer for deeper, crisper elevation, and the alphas were
+   * raised — in BOTH arms for shadow-sm
+   * (light 0.08 → 0.1 plus a new 0.06 layer; dark 0.06 → 0.09 plus a new 0.05
+   * layer) and in the DARK arms only for shadow-md and shadow-lg (the light
+   * arms of md/lg keep their original 0.12 / 0.1 and 0.14 / 0.12 values). */
+  --cinder-shadow-sm:
+    0 1px 2px light-dark(oklch(0% 0 0 / 0.1), oklch(100% 0 0 / 0.09)),
+    0 1px 1px light-dark(oklch(0% 0 0 / 0.06), oklch(100% 0 0 / 0.05));
   --cinder-shadow-md:
-    0 4px 6px -1px light-dark(oklch(0% 0 0 / 0.12), oklch(100% 0 0 / 0.06)),
-    0 2px 4px -2px light-dark(oklch(0% 0 0 / 0.1), oklch(100% 0 0 / 0.05));
+    0 4px 6px -1px light-dark(oklch(0% 0 0 / 0.12), oklch(100% 0 0 / 0.09)),
+    0 2px 4px -2px light-dark(oklch(0% 0 0 / 0.1), oklch(100% 0 0 / 0.06));
   --cinder-shadow-lg:
-    0 10px 15px -3px light-dark(oklch(0% 0 0 / 0.14), oklch(100% 0 0 / 0.08)),
-    0 4px 6px -4px light-dark(oklch(0% 0 0 / 0.12), oklch(100% 0 0 / 0.06));
+    0 10px 15px -3px light-dark(oklch(0% 0 0 / 0.14), oklch(100% 0 0 / 0.11)),
+    0 4px 6px -4px light-dark(oklch(0% 0 0 / 0.12), oklch(100% 0 0 / 0.07));
 
   /* ========================================
    * CONTROL HEIGHTS
@@ -157,6 +164,20 @@
   --cinder-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
   --cinder-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 
+  /* ========================================
+   * SEMANTIC ALIASES
+   * ----------------------------------------
+   * Intent layer over the raw scale: map raw spacing/radius tokens to the
+   * semantic use cases components reach for, so call sites express intent
+   * ("control padding", "card padding") instead of a numeric step.
+   * ======================================== */
+  --cinder-pad-control: var(--cinder-space-2-5);
+  --cinder-pad-card: var(--cinder-space-4);
+  --cinder-gap-stack: var(--cinder-space-3);
+  --cinder-gap-inline: var(--cinder-space-2);
+  --cinder-radius-control: var(--cinder-radius-md);
+  --cinder-radius-surface: var(--cinder-radius-lg);
+
   /* ========================================
    * SEMANTIC COLORS
    * ======================================== */
@@ -165,8 +186,8 @@
   /* Backgrounds / surfaces */
   --cinder-bg: light-dark(oklch(96% 0.01 245), oklch(15% 0.035 245));
   --cinder-surface: light-dark(oklch(98.5% 0.008 245), oklch(20% 0.04 245));
-  --cinder-surface-raised: light-dark(oklch(100% 0.006 245), oklch(24% 0.045 245));
-  --cinder-surface-inset: light-dark(oklch(95.5% 0.01 245), oklch(12% 0.03 245));
+  --cinder-surface-raised: light-dark(oklch(100% 0.006 245), oklch(26% 0.045 245));
+  --cinder-surface-inset: light-dark(oklch(95.5% 0.01 245), oklch(11% 0.03 245));
   /* Hover/pressed surface derivatives. The mix DIRECTION is per-theme — the
      `light-dark(black, white)` mix target darkens the surface in light mode and
      lightens it in dark mode — so only the PERCENTAGE is shared across themes.
@@ -188,29 +209,39 @@
   --cinder-text: light-dark(oklch(20% 0.018 245), oklch(92% 0.02 245));
   --cinder-text-muted: light-dark(oklch(32% 0.014 245), oklch(82% 0.02 245));
   --cinder-text-subtle: light-dark(oklch(42% 0.012 245), oklch(72% 0.02 245));
-  --cinder-text-disabled: light-dark(oklch(52% 0.01 245), oklch(62% 0.02 245));
+  --cinder-text-disabled: light-dark(oklch(52% 0.01 245), oklch(64% 0.02 245));
   /* Neutral fill for DISABLED SOLID controls (disabled-checked checkbox/radio) so they stop
      misusing --cinder-text-disabled (a text-lightness token) as an assertive fill. Reads plainly
      inert. NOTE the glyph on top must use --cinder-text-disabled, NOT --cinder-accent-contrast:
      accent-contrast is dark ink in both arms and would be ~1.45:1 on the dark-arm fill (0.30) —
-     invisible. --cinder-text-disabled clears the 3:1 UI floor in both themes (light ~3.8:1, dark ~3.7:1). */
+     invisible. --cinder-text-disabled clears the 3:1 UI floor in both themes (light ~3.8:1, dark ~4.1:1). */
   --cinder-fill-disabled: light-dark(oklch(88% 0.01 245), oklch(30% 0.04 245));
 
   /* Borders */
-  --cinder-border: light-dark(oklch(83% 0.012 245), oklch(35% 0.05 245));
+  --cinder-border: light-dark(oklch(79% 0.013 245), oklch(40% 0.05 245));
   --cinder-border-muted: light-dark(oklch(88% 0.01 245), oklch(30% 0.04 245));
   --cinder-border-strong: light-dark(oklch(72% 0.014 245), oklch(45% 0.06 245));
 
   /* Accent - cyan (hue 195) */
-  --cinder-accent: light-dark(oklch(72% 0.2 195), oklch(78% 0.15 195));
+  --cinder-accent: light-dark(oklch(66% 0.16 195), oklch(78% 0.13 195));
   --cinder-accent-contrast: light-dark(oklch(15% 0.035 245), oklch(15% 0.035 245));
   --cinder-accent-hover: oklch(from var(--cinder-accent) calc(l - 0.08) c h);
   --cinder-accent-active: oklch(from var(--cinder-accent) calc(l - 0.15) c h);
-  /* Accent used AS TEXT/ICON on light surfaces. The bright 0.72 fill-accent fails WCAG AA as
-     text (~2:1). This darker on-brand cyan clears 4.5:1 on every surface and every accent/tree/
-     info tint (verified: surface 5.43, bg 5.12, inset 4.82, accent-chip tint 4.98). The bright
-     --cinder-accent stays for FILLS; foreground/icon usages adopt this token. */
-  --cinder-accent-text: light-dark(oklch(47% 0.16 195), oklch(78% 0.15 195));
+  /* Pressed fill for SOLID accent surfaces that carry the dark-ink --cinder-accent-contrast
+     label (primary Button, FloatingActionButton). The general --cinder-accent-active darkens by
+     0.15; on the L=0.66 light accent that resolves to L=0.51, where the dark-ink label drops to
+     ~4.09:1 — below WCAG AA. This token darkens by a gentler 0.11 (light → L=0.55, ~4.79:1; dark →
+     L=0.67, ~7.1:1) so the pressed label stays AA-legible in both arms. Non-label-bearing
+     consumers keep using --cinder-accent-active. */
+  --cinder-accent-active-on-fill: oklch(from var(--cinder-accent) calc(l - 0.11) c h);
+  /* Accent used AS TEXT/ICON on light surfaces. The fill-accent was darkened to a more ink-like
+     cyan (now L=0.66); as a FOREGROUND its contrast improves (≈2.7:1 on raised, ≈2.4:1 on bg/inset)
+     but still does NOT clear the 3:1 UI floor, so a separate foreground token stays necessary. This
+     darker on-brand cyan clears 4.5:1 on every surface and every accent/tree/info tint (verified:
+     surface 5.43, bg 5.12, inset 4.82, accent-chip tint 4.98). --cinder-accent is a FILL (it carries
+     the dark-ink --cinder-accent-contrast label at ≈7.2:1); all foreground/icon usages adopt this
+     token. */
+  --cinder-accent-text: light-dark(oklch(47% 0.16 195), oklch(78% 0.13 195));
   /* Hover step for text/icon links. Derived as a DARKER step of --cinder-accent-text (not the
      bright fill-derived --cinder-accent-hover, which is LIGHTER than the resting text color and
      drops to ~2.75:1 on near-white — below WCAG AA). Light arm resolves to ~oklch(0.39 0.16 195)
@@ -252,6 +283,12 @@
   --cinder-color-danger-fg: light-dark(oklch(42% 0.16 25), oklch(90% 0.12 25));
   --cinder-color-danger-border: light-dark(oklch(80% 0.06 25), oklch(50% 0.11 25));
 
+  /* Transparency checkerboard tokens shared by color-domain components. Light
+     mode preserves the historical white/gray grid; dark mode keeps the pattern
+     visible without flashing a white backing inside dark chrome. */
+  --cinder-color-checker-base: light-dark(#fff, oklch(28% 0.02 245));
+  --cinder-color-checker-tile: light-dark(#ccc, oklch(38% 0.02 245));
+
   /* Scrollbars — used by the ScrollArea component and any consumer that
      opts into themed native scrollbars via `scrollbar-width` and
      `::-webkit-scrollbar-*`. Thumb alpha is tuned so the resolved

package/dist/components/markdown-editor/index.css

@@ -1,61 +0,0 @@
-/* src/components/markdown-editor/prosemirror.css */
-@layer cinder.components {
-  .ProseMirror {
-    position: relative;
-  }
-
-  .ProseMirror {
-    word-wrap: break-word;
-    white-space: pre-wrap;
-    white-space: break-spaces;
-    -webkit-font-variant-ligatures: none;
-    font-variant-ligatures: none;
-    font-feature-settings: "liga" 0;
-  }
-
-  .ProseMirror pre {
-    white-space: pre-wrap;
-  }
-
-  .ProseMirror li {
-    position: relative;
-  }
-
-  .ProseMirror-hideselection *::selection {
-    background: none;
-  }
-
-  .ProseMirror-hideselection *::-moz-selection {
-    background: none;
-  }
-
-  .ProseMirror-hideselection {
-    caret-color: transparent;
-  }
-
-  .ProseMirror [draggable][contenteditable="false"] {
-    user-select: text;
-  }
-
-  .ProseMirror-selectednode {
-    outline: 2px solid #8cf;
-  }
-
-  li.ProseMirror-selectednode {
-    outline: none;
-  }
-
-  li.ProseMirror-selectednode:after {
-    content: "";
-    position: absolute;
-    pointer-events: none;
-    border: 2px solid #8cf;
-    inset: -2px -2px -2px -32px;
-  }
-
-  img.ProseMirror-separator {
-    display: inline !important;
-    border: none !important;
-    margin: 0 !important;
-  }
-}

package/dist/components/review-editor/index.css

@@ -1,61 +0,0 @@
-/* src/components/markdown-editor/prosemirror.css */
-@layer cinder.components {
-  .ProseMirror {
-    position: relative;
-  }
-
-  .ProseMirror {
-    word-wrap: break-word;
-    white-space: pre-wrap;
-    white-space: break-spaces;
-    -webkit-font-variant-ligatures: none;
-    font-variant-ligatures: none;
-    font-feature-settings: "liga" 0;
-  }
-
-  .ProseMirror pre {
-    white-space: pre-wrap;
-  }
-
-  .ProseMirror li {
-    position: relative;
-  }
-
-  .ProseMirror-hideselection *::selection {
-    background: none;
-  }
-
-  .ProseMirror-hideselection *::-moz-selection {
-    background: none;
-  }
-
-  .ProseMirror-hideselection {
-    caret-color: transparent;
-  }
-
-  .ProseMirror [draggable][contenteditable="false"] {
-    user-select: text;
-  }
-
-  .ProseMirror-selectednode {
-    outline: 2px solid #8cf;
-  }
-
-  li.ProseMirror-selectednode {
-    outline: none;
-  }
-
-  li.ProseMirror-selectednode:after {
-    content: "";
-    position: absolute;
-    pointer-events: none;
-    border: 2px solid #8cf;
-    inset: -2px -2px -2px -32px;
-  }
-
-  img.ProseMirror-separator {
-    display: inline !important;
-    border: none !important;
-    margin: 0 !important;
-  }
-}

package/dist/index.css

@@ -1,61 +0,0 @@
-/* src/components/markdown-editor/prosemirror.css */
-@layer cinder.components {
-  .ProseMirror {
-    position: relative;
-  }
-
-  .ProseMirror {
-    word-wrap: break-word;
-    white-space: pre-wrap;
-    white-space: break-spaces;
-    -webkit-font-variant-ligatures: none;
-    font-variant-ligatures: none;
-    font-feature-settings: "liga" 0;
-  }
-
-  .ProseMirror pre {
-    white-space: pre-wrap;
-  }
-
-  .ProseMirror li {
-    position: relative;
-  }
-
-  .ProseMirror-hideselection *::selection {
-    background: none;
-  }
-
-  .ProseMirror-hideselection *::-moz-selection {
-    background: none;
-  }
-
-  .ProseMirror-hideselection {
-    caret-color: transparent;
-  }
-
-  .ProseMirror [draggable][contenteditable="false"] {
-    user-select: text;
-  }
-
-  .ProseMirror-selectednode {
-    outline: 2px solid #8cf;
-  }
-
-  li.ProseMirror-selectednode {
-    outline: none;
-  }
-
-  li.ProseMirror-selectednode:after {
-    content: "";
-    position: absolute;
-    pointer-events: none;
-    border: 2px solid #8cf;
-    inset: -2px -2px -2px -32px;
-  }
-
-  img.ProseMirror-separator {
-    display: inline !important;
-    border: none !important;
-    margin: 0 !important;
-  }
-}

package/dist/server/components/experimental/connection-indicator/index.css

@@ -1,60 +0,0 @@
-/* src/components/connection-indicator/connection-indicator.css */
-@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
-
-@layer cinder.components {
-  .cinder-connection-indicator {
-    display: inline-flex;
-    align-items:  center;
-    gap: var(--cinder-space-1-5);
-    padding: var(--cinder-space-0-5) var(--cinder-space-2);
-    font-size: var(--cinder-text-xs);
-    font-weight: var(--cinder-font-medium);
-    border-radius: var(--cinder-radius-full);
-    background: var(--cinder-surface-inset);
-    color: var(--cinder-text);
-  }
-
-  .cinder-connection-indicator__dot {
-    display: inline-block;
-    border-radius: var(--cinder-radius-full);
-    background: currentColor;
-    width: .5rem;
-    height: .5rem;
-  }
-
-  .cinder-connection-indicator[data-cinder-state="connected"] {
-    color: var(--cinder-success);
-  }
-
-  .cinder-connection-indicator[data-cinder-state="connecting"] {
-    color: var(--cinder-warning);
-  }
-
-  .cinder-connection-indicator[data-cinder-state="connecting"] .cinder-connection-indicator__dot {
-    animation: cinder-connection-pulse 1.4s ease-in-out infinite;
-  }
-
-  @keyframes cinder-connection-pulse {
-    0%, 100% {
-      opacity: 1;
-    }
-
-    50% {
-      opacity: .3;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .cinder-connection-indicator[data-cinder-state="connecting"] .cinder-connection-indicator__dot {
-      animation: none;
-    }
-  }
-
-  .cinder-connection-indicator[data-cinder-state="disconnected"] {
-    color: var(--cinder-text-muted);
-  }
-
-  .cinder-connection-indicator[data-cinder-state="error"] {
-    color: var(--cinder-danger);
-  }
-}

package/dist/server/components/experimental/json-viewer/index.css

@@ -1,111 +0,0 @@
-/* src/components/json-viewer/json-viewer.css */
-@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
-
-@layer cinder.components {
-  .cinder-json-viewer {
-    font-family: var(--cinder-font-mono);
-    font-size: var(--cinder-text-sm);
-    color: var(--cinder-text);
-    background: var(--cinder-surface-inset);
-    border: 1px solid var(--cinder-border);
-    border-radius: var(--cinder-radius-md);
-    padding: var(--cinder-space-3);
-    overflow: auto;
-  }
-
-  .cinder-json-viewer__fallback {
-    color: var(--cinder-text-muted);
-    font-family: var(--cinder-font-sans);
-    text-align: center;
-    padding: var(--cinder-space-4);
-  }
-
-  .cinder-json-viewer__fallback p {
-    margin: 0 0 var(--cinder-space-1) 0;
-  }
-
-  .cinder-json-viewer__node {
-    display: inline;
-  }
-
-  .cinder-json-viewer__key {
-    color: var(--cinder-accent-text);
-    margin-inline-end: var(--cinder-space-1);
-  }
-
-  .cinder-json-viewer__toggle {
-    appearance: none;
-    font: inherit;
-    color: inherit;
-    cursor: pointer;
-    display: inline-flex;
-    align-items:  center;
-    gap: var(--cinder-space-1);
-    border-radius: var(--cinder-radius-sm);
-    background: none;
-    border: none;
-    padding: 0;
-  }
-
-  .cinder-json-viewer__toggle:focus-visible {
-    outline: var(--cinder-ring-width) solid transparent;
-    box-shadow: var(--_cinder-focus-ring-shadow);
-  }
-
-  @media (forced-colors: active) {
-    .cinder-json-viewer__toggle:focus-visible {
-      outline: var(--cinder-ring-width) solid ButtonText;
-      outline-offset: 3px;
-    }
-  }
-
-  .cinder-json-viewer__caret {
-    display: inline-block;
-    border-inline: .25rem solid #0000;
-    transition: transform var(--cinder-duration-fast) var(--cinder-ease-standard);
-    border-top: .375rem solid;
-    width: 0;
-    height: 0;
-  }
-
-  .cinder-json-viewer__caret[data-cinder-collapsed] {
-    transform: rotate(-90deg);
-  }
-
-  .cinder-json-viewer__brace {
-    color: var(--cinder-text-muted);
-  }
-
-  .cinder-json-viewer__summary {
-    color: var(--cinder-text-muted);
-    font-style: italic;
-  }
-
-  .cinder-json-viewer__children {
-    list-style: none;
-    border-inline-start: 1px dashed var(--cinder-border-muted);
-    margin: 0;
-    padding-inline-start: var(--cinder-space-4);
-  }
-
-  .cinder-json-viewer__too-deep {
-    color: var(--cinder-text-muted);
-  }
-
-  .cinder-json-viewer__value[data-cinder-type="string"] {
-    color: var(--cinder-success);
-  }
-
-  .cinder-json-viewer__value[data-cinder-type="number"] {
-    color: var(--cinder-warning);
-  }
-
-  .cinder-json-viewer__value[data-cinder-type="boolean"] {
-    color: var(--cinder-danger);
-  }
-
-  .cinder-json-viewer__value[data-cinder-type="null"] {
-    color: var(--cinder-text-muted);
-    font-style: italic;
-  }
-}

package/dist/server/components/experimental/message/index.css

@@ -1,54 +0,0 @@
-/* src/components/message/message.css */
-@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
-
-@layer cinder.components {
-  .cinder-message {
-    display: flex;
-    gap: var(--cinder-space-1);
-    padding: var(--cinder-space-3) var(--cinder-space-4);
-    border-radius: var(--cinder-radius-md);
-    background: var(--cinder-surface);
-    border: 1px solid var(--cinder-border-muted);
-    flex-direction: column;
-    max-width: 48rem;
-  }
-
-  .cinder-message[data-cinder-role="user"] {
-    background: var(--cinder-color-info-bg);
-    border-color: var(--cinder-color-info-border);
-    align-self:  flex-end;
-  }
-
-  .cinder-message[data-cinder-role="assistant"] {
-    background: var(--cinder-surface-raised);
-    border-color: var(--cinder-border);
-  }
-
-  .cinder-message[data-cinder-role="system"] {
-    background: var(--cinder-surface-inset);
-    font-size: var(--cinder-text-sm);
-    border-style: dashed;
-  }
-
-  .cinder-message__header {
-    display: flex;
-    align-items: baseline;
-    gap: var(--cinder-space-2);
-    font-size: var(--cinder-text-xs);
-    color: var(--cinder-text-muted);
-  }
-
-  .cinder-message__name {
-    font-weight: var(--cinder-font-medium);
-  }
-
-  .cinder-message__time {
-    font-variant-numeric: tabular-nums;
-  }
-
-  .cinder-message__body {
-    font-size: var(--cinder-text-sm);
-    line-height: var(--cinder-leading-relaxed);
-    color: var(--cinder-text);
-  }
-}

package/dist/server/components/experimental/timeline/index.css

@@ -1,141 +0,0 @@
-/* src/components/timeline/timeline.css */
-@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
-
-@layer cinder.components {
-  .cinder-timeline {
-    --_cinder-timeline-rail-size: 1.5rem;
-    --_cinder-timeline-marker-size: .875rem;
-    --_cinder-timeline-rail-center: .6875rem;
-    list-style: none;
-    position: relative;
-    margin: 0;
-    padding: 0;
-  }
-
-  .cinder-timeline[data-cinder-orientation="horizontal"] {
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-columns: minmax(12rem, 1fr);
-    gap: var(--cinder-space-4);
-    overflow-x: auto;
-    padding-block-end: var(--cinder-space-2);
-  }
-
-  .cinder-timeline-item {
-    position: relative;
-    padding-bottom: var(--cinder-space-4);
-  }
-
-  .cinder-timeline-item:last-child {
-    padding-bottom: 0;
-  }
-
-  .cinder-timeline-item__event {
-    display: grid;
-    grid-template-columns: var(--_cinder-timeline-rail-size) 1fr;
-    gap: var(--cinder-space-3);
-  }
-
-  .cinder-timeline__group-header {
-    margin: 0 0 var(--cinder-space-2) calc(var(--_cinder-timeline-rail-size)  + var(--cinder-space-3));
-    color: var(--cinder-text-muted);
-    font-size: var(--cinder-text-xs);
-    font-weight: var(--cinder-font-semibold);
-    letter-spacing: 0;
-    text-transform: uppercase;
-  }
-
-  .cinder-timeline-item:before {
-    content: "";
-    position: absolute;
-    left: var(--_cinder-timeline-rail-center);
-    background: var(--cinder-border-muted);
-    width: 1px;
-    top: 1rem;
-    bottom: 0;
-  }
-
-  .cinder-timeline-item[data-cinder-connector-after="hidden"]:before {
-    display: none;
-  }
-
-  .cinder-timeline-item__marker {
-    position: relative;
-    z-index: 1;
-    width: var(--_cinder-timeline-marker-size);
-    height: var(--_cinder-timeline-marker-size);
-    margin-top: var(--cinder-space-1);
-    border-radius: var(--cinder-radius-full);
-    background: var(--cinder-surface-raised);
-    display: inline-flex;
-    border: 2px solid;
-    justify-content: center;
-    align-items:  center;
-  }
-
-  .cinder-timeline-item[data-cinder-tone="info"] .cinder-timeline-item__marker {
-    color: var(--cinder-info);
-  }
-
-  .cinder-timeline-item[data-cinder-tone="success"] .cinder-timeline-item__marker {
-    color: var(--cinder-success);
-  }
-
-  .cinder-timeline-item[data-cinder-tone="warning"] .cinder-timeline-item__marker {
-    color: var(--cinder-warning);
-  }
-
-  .cinder-timeline-item[data-cinder-tone="error"] .cinder-timeline-item__marker {
-    color: var(--cinder-danger);
-  }
-
-  .cinder-timeline-item__header {
-    display: flex;
-    align-items: baseline;
-    gap: var(--cinder-space-2);
-    flex-wrap: wrap;
-  }
-
-  .cinder-timeline-item__title {
-    font-size: var(--cinder-text-sm);
-    font-weight: var(--cinder-font-medium);
-    color: var(--cinder-text);
-  }
-
-  .cinder-timeline-item__time {
-    font-size: var(--cinder-text-xs);
-    color: var(--cinder-text-muted);
-    font-variant-numeric: tabular-nums;
-  }
-
-  .cinder-timeline-item__body {
-    margin-top: var(--cinder-space-1);
-    font-size: var(--cinder-text-sm);
-    color: var(--cinder-text-muted);
-  }
-
-  .cinder-timeline[data-cinder-orientation="horizontal"] .cinder-timeline-item {
-    min-inline-size: 12rem;
-    padding-block-end: 0;
-    padding-inline-end: var(--cinder-space-4);
-  }
-
-  .cinder-timeline[data-cinder-orientation="horizontal"] .cinder-timeline-item__event {
-    grid-template-columns: 1fr;
-    grid-template-rows: var(--_cinder-timeline-rail-size) auto;
-    gap: var(--cinder-space-2);
-  }
-
-  .cinder-timeline[data-cinder-orientation="horizontal"] .cinder-timeline__group-header {
-    margin: 0 0 var(--cinder-space-2);
-  }
-
-  .cinder-timeline[data-cinder-orientation="horizontal"] .cinder-timeline-item:before {
-    left: calc(var(--_cinder-timeline-marker-size) / 2);
-    right: calc(-1 * var(--cinder-space-4));
-    top: calc(var(--_cinder-timeline-marker-size) / 2 + var(--cinder-space-1));
-    width: auto;
-    height: 1px;
-    bottom: auto;
-  }
-}