@starci/grammar 0.3.0 → 0.4.1

package/dist/core/styles.css

@@ -1,598 +1,169 @@
-@layer starci-grammar-core {
-    .starci-core-form-page {
-        display: flex;
-        min-height: 100dvh;
-        padding: 1.5rem 1rem;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-    }
-
-    .starci-core-form-scroll-viewport {
-        width: 100%;
-        max-height: calc(100dvh - 3rem);
-        overscroll-behavior: contain;
-    }
-
-    .starci-core-form-surface {
-        display: flex;
-        width: min(100%, var(--starci-core-form-measure, 30rem));
-        min-width: 0;
-        flex-direction: column;
-        gap: var(--starci-core-section-gap, 0.75rem);
-    }
-
-    .starci-core-form-surface--compact {
-        width: min(100%, var(--starci-core-form-compact-measure, 28rem));
-    }
-
-    .starci-core-form-surface > .card {
-        max-height: calc(100dvh - 3rem);
-        overflow: hidden !important;
-        padding: 0 !important;
-    }
-
-    .starci-core-form-field {
-        display: flex;
-        min-width: 0;
-        flex-direction: column;
-        gap: var(--starci-core-field-gap, 0.5rem);
-    }
-
-    .starci-core-form-label--screen-reader {
-        position: absolute;
-        width: 1px;
-        height: 1px;
-        padding: 0;
-        margin: -1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        white-space: nowrap;
-        border: 0;
-    }
-
-    .starci-core-horizontal-scroll-region {
-        width: 100%;
-        min-width: 0;
-        padding-block: 0.25rem;
-        overscroll-behavior-inline: contain;
-    }
-
-    .starci-core-horizontal-scroll-region > * {
-        width: max-content;
-        min-width: max-content;
-    }
-
-    @media (min-width: 40rem) {
-        .starci-core-form-page {
-            padding-block: 2.5rem;
-        }
-
-        .starci-core-form-scroll-viewport {
-            max-height: calc(100dvh - 5rem);
+@import "../common/styles.css";
+
+@layer starci-grammar-core {
+    /*
+     * StarCi visual DNA is opt-in through GrammarRoot. It supplies a complete,
+     * portable semantic theme while keeping product/UI laws out of CSS.
+     */
+    .grammar-common-root[data-grammar-family="core"] {
+        color-scheme: light;
+
+        --starci-core-accent: #7547ff;
+        --starci-core-accent-foreground: oklch(100% 0 0);
+        --starci-core-focus: #7248ff;
+        --starci-core-canvas: oklch(97.02% 0.0015 354.13);
+        --starci-core-surface: oklch(100% 0.0008 354.13);
+        --starci-core-surface-secondary: oklch(95.24% 0.0012 354.13);
+        --starci-core-foreground: oklch(21.03% 0.0015 354.13);
+        --starci-core-muted: oklch(55.17% 0.003 354.13);
+        --starci-core-border: oklch(90% 0.0015 354.13);
+        --starci-core-separator: oklch(92% 0.0015 354.13);
+        --starci-core-success: oklch(73.29% 0.1941 162.85);
+        --starci-core-success-foreground: oklch(21.03% 0.0059 162.85);
+        --starci-core-warning: oklch(78.19% 0.159 84.37);
+        --starci-core-warning-foreground: oklch(21.03% 0.0059 84.37);
+        --starci-core-danger: oklch(65.32% 0.2335 37.78);
+        --starci-core-danger-foreground: oklch(99.11% 0 0);
+        --starci-core-info: oklch(72% 0.17 250);
+        --starci-core-info-foreground: oklch(21.03% 0.0059 250);
+        --starci-core-page-measure: 80rem;
+        --starci-core-reading-measure: 72ch;
+        --starci-core-page-inset: var(--grammar-page-inset);
+        --starci-core-region-gap: var(--grammar-region-gap);
+        --starci-core-section-gap: var(--grammar-section-gap);
+        --starci-core-inline-gap: var(--grammar-inline-gap);
+        --starci-core-row-gap: var(--grammar-row-gap);
+        --starci-core-surface-radius: 1rem;
+        --starci-core-control-radius: 0.75rem;
+        --starci-core-pill-radius: 999px;
+        --starci-core-surface-shadow: 0 8px 28px oklch(21.03% 0.0059 354.13 / 0.07);
+        --starci-core-motion-duration: 180ms;
+        --starci-core-motion-easing: cubic-bezier(0.2, 0, 0, 1);
+
+        /* HeroUI and existing Grammar anatomy resolve through the same DNA. */
+        --accent: var(--starci-core-accent);
+        --accent-foreground: var(--starci-core-accent-foreground);
+        --focus: var(--starci-core-focus);
+        --background: var(--starci-core-canvas);
+        --foreground: var(--starci-core-foreground);
+        --surface: var(--starci-core-surface);
+        --surface-foreground: var(--starci-core-foreground);
+        --surface-secondary: var(--starci-core-surface-secondary);
+        --surface-secondary-foreground: var(--starci-core-foreground);
+        --muted: var(--starci-core-muted);
+        --border: var(--starci-core-border);
+        --separator: var(--starci-core-separator);
+        --success: var(--starci-core-success);
+        --success-foreground: var(--starci-core-success-foreground);
+        --warning: var(--starci-core-warning);
+        --warning-foreground: var(--starci-core-warning-foreground);
+        --danger: var(--starci-core-danger);
+        --danger-foreground: var(--starci-core-danger-foreground);
+        --info: var(--starci-core-info);
+        --info-foreground: var(--starci-core-info-foreground);
+        --field-background: var(--starci-core-surface);
+        --field-border: transparent;
+        --field-foreground: var(--starci-core-foreground);
+        --field-placeholder: var(--starci-core-muted);
+        --radius: var(--starci-core-control-radius);
+        --field-radius: var(--starci-core-control-radius);
+        --shadow-surface: var(--starci-core-surface-shadow);
+
+        min-width: 0;
+        background: var(--starci-core-canvas);
+        color: var(--starci-core-foreground);
+        font-family: var(--starci-font-sans, ui-sans-serif, system-ui, sans-serif);
+    }
+
+    .grammar-common-root[data-grammar-family="core"][data-grammar-theme="dark"] {
+        color-scheme: dark;
+        --starci-core-canvas: oklch(12% 0.0015 354.13);
+        --starci-core-surface: oklch(21.03% 0.003 354.13);
+        --starci-core-surface-secondary: oklch(25.7% 0.0023 354.13);
+        --starci-core-foreground: oklch(99.11% 0.0015 354.13);
+        --starci-core-muted: oklch(70.5% 0.003 354.13);
+        --starci-core-border: oklch(28% 0.0015 354.13);
+        --starci-core-separator: oklch(25% 0.0015 354.13);
+        --starci-core-success: oklch(73.29% 0.1941 162.85);
+        --starci-core-success-foreground: oklch(21.03% 0.0059 162.85);
+        --starci-core-warning: oklch(82.03% 0.1392 88.38);
+        --starci-core-warning-foreground: oklch(21.03% 0.0059 88.38);
+        --starci-core-danger: oklch(59.4% 0.1973 36.67);
+        --starci-core-danger-foreground: oklch(99.11% 0 0);
+        --starci-core-info: oklch(72% 0.17 250);
+        --starci-core-info-foreground: oklch(21.03% 0.0059 250);
+    }
+
+    /* StarCi labelled surfaces paint one material box around label and content. */
+    .grammar-common-root[data-grammar-family="core"]
+        .starci-core-surface-card[data-grammar-surface-labelled="true"][data-grammar-frame="bounded"] {
+        overflow: hidden;
+        border-radius: var(--starci-core-surface-radius, 1rem);
+        background: var(--starci-core-surface, var(--surface, Canvas));
+        box-shadow: var(--starci-core-surface-shadow, var(--shadow-surface, none));
+    }
+
+    .grammar-common-root[data-grammar-family="core"]
+        .starci-core-surface-card[data-grammar-surface-labelled="true"][data-grammar-frame="bounded"]
+        > [data-grammar-surface-label] {
+        padding: var(--starci-core-surface-inset, 1rem) var(--starci-core-surface-inset, 1rem) 0;
+    }
+
+    .grammar-common-root[data-grammar-family="core"]
+        .starci-core-surface-card[data-grammar-surface-labelled="true"][data-grammar-frame="bounded"]
+        > [data-grammar-frame="bounded"],
+    .grammar-common-root[data-grammar-family="core"]
+        .starci-core-surface-card[data-grammar-surface-labelled="true"][data-grammar-frame="bounded"]
+        > [data-grammar-highlight="true"]
+        > [data-grammar-frame="bounded"] {
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+        box-shadow: none;
+    }
+
+@media (prefers-color-scheme: dark) {
+        .grammar-common-root[data-grammar-family="core"][data-grammar-theme="system"] {
+            color-scheme: dark;
+            --starci-core-canvas: oklch(12% 0.0015 354.13);
+            --starci-core-surface: oklch(21.03% 0.003 354.13);
+            --starci-core-surface-secondary: oklch(25.7% 0.0023 354.13);
+            --starci-core-foreground: oklch(99.11% 0.0015 354.13);
+            --starci-core-muted: oklch(70.5% 0.003 354.13);
+            --starci-core-border: oklch(28% 0.0015 354.13);
+            --starci-core-separator: oklch(25% 0.0015 354.13);
+            --starci-core-success: oklch(73.29% 0.1941 162.85);
+            --starci-core-success-foreground: oklch(21.03% 0.0059 162.85);
+            --starci-core-warning: oklch(82.03% 0.1392 88.38);
+            --starci-core-warning-foreground: oklch(21.03% 0.0059 88.38);
+            --starci-core-danger: oklch(59.4% 0.1973 36.67);
+            --starci-core-danger-foreground: oklch(99.11% 0 0);
+            --starci-core-info: oklch(72% 0.17 250);
+            --starci-core-info-foreground: oklch(21.03% 0.0059 250);
         }
-
-        .starci-core-form-surface > .card {
-            max-height: calc(100dvh - 5rem);
-        }
-    }
-
-    .starci-core-surface-card,
-    .starci-core-surface-list,
-    .starci-core-surface-accordion-card {
-        container-name: starci-core-surface;
-        container-type: inline-size;
-        display: flex;
-        min-width: 0;
-        width: 100%;
-        flex-direction: column;
-        gap: var(--starci-core-section-gap, 0.75rem);
-    }
-
-    .starci-core-surface-label {
-        display: flex;
-        min-width: 0;
-        align-items: baseline;
-        justify-content: space-between;
-        gap: var(--starci-core-inline-gap, 0.5rem);
-    }
-
-    .starci-core-surface-label > :first-child {
-        min-width: 0;
-        margin: 0;
-    }
-
-    .starci-core-surface {
-        position: relative;
-        min-width: 0;
-        overflow: hidden;
-        border-radius: var(--starci-core-surface-radius, 1rem);
-        background: var(--surface, Canvas);
-        color: var(--surface-foreground, CanvasText);
-    }
-
-    .starci-core-surface[data-grammar-surface-depth="top"] {
-        border: 0;
-        box-shadow: var(--starci-core-surface-shadow, var(--shadow-surface, 0 1px 3px rgb(0 0 0 / 0.16)));
-    }
-
-    .starci-core-surface[data-grammar-surface-depth="nested"] {
-        border: 1px solid var(--border, GrayText);
-        box-shadow: none;
-    }
-
-    .starci-core-surface-content {
-        min-width: 0;
-        padding: var(--starci-core-surface-inset, 1rem);
-    }
-
-    .starci-core-surface.starci-core-frameless-surface {
-        position: relative;
-        min-width: 0;
-        overflow: visible;
-        border: 0;
-        border-radius: 0;
-        background: transparent;
-        box-shadow: none;
-        color: inherit;
-    }
-
-    .starci-core-frameless-surface > .starci-core-surface-content {
-        padding: 0;
-    }
-
-    [data-grammar-scroll="contained"] {
-        max-height: var(--starci-core-contained-max-height, calc(100dvh - 3rem));
-        overflow: hidden;
-    }
-
-    [data-grammar-scroll="contained"] > .scroll-shadow--vertical {
-        width: 100%;
-        max-height: inherit;
-        min-height: 0;
-        overscroll-behavior: contain;
-    }
-
-    [data-grammar-whole-action] {
-        position: absolute;
-        z-index: 1;
-        inset: 0;
-        border: 0;
-        border-radius: inherit;
-        background: transparent;
-        color: inherit;
-        cursor: pointer;
-    }
-
-    [data-grammar-whole-action]:focus-visible {
-        outline: 2px solid var(--focus, Highlight);
-        outline-offset: -2px;
-    }
-
-    [data-grammar-whole-action][aria-disabled="true"],
-    [data-grammar-whole-action]:disabled {
-        cursor: not-allowed;
-    }
-
-    [data-grammar-state="unavailable"] {
-        opacity: var(--starci-core-disabled-opacity, 0.55);
-    }
-
-    [data-grammar-state="pending"] {
-        cursor: progress;
-    }
-
-    .starci-core-leading-number {
-        display: inline-block;
-        flex: none;
-        min-width: 1.25rem;
-        color: var(--muted, GrayText);
-        font-size: 0.875rem;
-        font-variant-numeric: tabular-nums;
-        line-height: 1.25rem;
-        text-align: end;
-        white-space: nowrap;
-    }
-
-    .starci-core-list-shell {
-        padding: 0;
-    }
-
-    .starci-core-static-list {
-        display: flex;
-        margin: 0;
-        padding: 0;
-        flex-direction: column;
-        list-style: none;
-    }
-
-    .starci-core-owned-collection {
-        min-width: 0;
-    }
-
-    .starci-core-surface-footer {
-        min-width: 0;
-    }
-
-    .starci-core-static-row,
-    .starci-core-empty-row {
-        display: flex;
-        min-width: 0;
-        margin: 0;
-        align-items: flex-start;
-        gap: var(--starci-core-row-gap, 0.75rem);
-        padding: var(--starci-core-row-inset, 1rem);
-    }
-
-    .starci-core-static-row + .starci-core-static-row {
-        border-top: 1px solid var(--separator, var(--border, GrayText));
-    }
-
-    .starci-core-list-shell[data-grammar-hover="invariant"] .starci-core-static-row:hover {
-        background: transparent;
-        box-shadow: none;
-        color: inherit;
-        transform: none;
-    }
-
-    .starci-core-accordion-shell {
-        width: 100%;
-        min-width: 0;
-    }
-
-    .starci-core-accordion-shell-frameless {
-        overflow: visible;
-        border: 0;
-        border-radius: 0;
-        background: transparent;
-        box-shadow: none;
-    }
-
-    .starci-core-accordion-row {
-        width: 100%;
-        min-width: 0;
-    }
-
-    .starci-core-accordion-row + .starci-core-accordion-row {
-        border-top: 1px solid var(--separator, var(--border, GrayText));
-    }
-
-    .starci-core-accordion-heading {
-        margin: 0;
-    }
-
-    .starci-core-accordion-trigger {
-        display: block;
-        width: 100%;
-        min-width: 0;
-        min-height: 44px;
-        padding: var(--starci-core-row-inset, 1rem);
-        border: 0;
-        background: transparent;
-        box-shadow: none;
-        color: inherit;
-        cursor: pointer;
-        font: inherit;
-        text-align: left;
-        transform: none;
-    }
-
-    .starci-core-accordion-trigger:hover,
-    .starci-core-accordion-trigger[data-hovered="true"] {
-        background: transparent;
-        box-shadow: none;
-        color: inherit;
-        transform: none;
-    }
-
-    .starci-core-accordion-trigger:disabled {
-        cursor: default;
-    }
-
-    .starci-core-accordion-panel {
-        width: 100%;
-        min-width: 0;
-        padding: 0 var(--starci-core-row-inset, 1rem) var(--starci-core-row-inset, 1rem);
     }
 
-    .starci-core-markdown-article {
-        display: flex;
-        width: 100%;
-        min-width: 0;
-        flex-direction: column;
-        gap: 1rem;
-        color: inherit;
-        font-size: 0.875rem;
-        line-height: 1.65;
-        overflow-wrap: anywhere;
-    }
-
-    .starci-core-markdown-article[data-grammar-markdown-measure="compact"] {
-        max-width: 72ch;
-        gap: 0.75rem;
-    }
-
-    .starci-core-markdown-article > :first-child {
-        margin-top: 0;
-    }
-
-    .starci-core-markdown-article > :last-child {
-        margin-bottom: 0;
-    }
-
-    .starci-core-markdown-article :where(h1, h2, h3, h4) {
-        margin: 1.5rem 0 0.625rem;
-        color: inherit;
-        font-weight: 600;
-        line-height: 1.3;
-    }
-
-    .starci-core-markdown-article h1 { font-size: 1.5rem; }
-    .starci-core-markdown-article h2 { font-size: 1.25rem; }
-    .starci-core-markdown-article h3 { font-size: 1.125rem; }
-    .starci-core-markdown-article h4 { font-size: 1rem; }
-
-    .starci-core-markdown-article :where(p, ul, ol, blockquote, pre, table) {
-        margin: 0;
-    }
-
-    .starci-core-markdown-article :where(ul, ol) {
-        padding-inline-start: 1.5rem;
-    }
-
-    .starci-core-markdown-article ul { list-style: disc; }
-    .starci-core-markdown-article ol { list-style: decimal; }
-
-    .starci-core-markdown-article strong { font-weight: 600; }
-    .starci-core-markdown-article em { font-style: italic; }
-
-    .starci-core-markdown-article li + li {
-        margin-top: 0.375rem;
-    }
-
-    .starci-core-markdown-article :not(pre) > code {
-        display: inline;
-        padding: 0.125rem 0.375rem;
-        border: 1px solid var(--border, GrayText);
-        border-radius: 999px;
-        background: var(--muted-surface, color-mix(in srgb, CanvasText 7%, Canvas));
-        color: inherit;
-        font: 500 0.875rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
-        white-space: break-spaces;
-    }
-
-    .starci-core-markdown-article pre,
-    .starci-core-fenced-code-block pre {
-        max-width: 100%;
-        margin: 0;
-        padding: 1rem;
-        overflow-x: auto;
-        border: 1px solid var(--border, GrayText);
-        border-radius: 0.75rem;
-        background: var(--code-surface, color-mix(in srgb, CanvasText 6%, Canvas));
-        color: inherit;
-        overscroll-behavior-inline: contain;
-    }
-
-    .starci-core-markdown-article pre code,
-    .starci-core-fenced-code-block pre code {
-        padding: 0;
-        border: 0;
-        background: transparent;
-        color: inherit;
-        font: 400 0.875rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
-        white-space: pre;
-    }
-
-    .starci-core-fenced-code-block {
-        width: 100%;
-        min-width: 0;
-        margin: 0 0 1rem;
-    }
-
-    .starci-core-fenced-code-header {
-        display: flex;
-        min-width: 0;
-        align-items: center;
-        justify-content: space-between;
-        gap: 0.75rem;
-        padding: 0 0 0.5rem;
-        color: var(--muted, GrayText);
-    }
-
-    .starci-core-fenced-code-header :where(button) {
-        padding: 0;
-        border: 0;
-        background: transparent;
-        color: inherit;
-        cursor: pointer;
-        font: inherit;
-    }
-
-    [data-grammar-fenced-code-highlight="true"] {
-        width: 100%;
-        min-width: 0;
-        overflow-x: auto;
-        border: 1px solid var(--border, GrayText);
-        border-radius: 0.75rem;
-        background: var(--code-surface, color-mix(in srgb, CanvasText 6%, Canvas));
-        overscroll-behavior-inline: contain;
-    }
-
-    [data-grammar-fenced-code-highlight="true"] pre {
-        width: max-content;
-        min-width: 100%;
-        padding: 1rem;
-        border: 0;
-        border-radius: 0;
-        background: transparent !important;
-    }
-
-    .starci-core-markdown-article blockquote {
-        padding-inline-start: 1rem;
-        border-inline-start: 3px solid var(--border, GrayText);
-        color: var(--muted, GrayText);
-    }
-
-    .starci-core-markdown-article table,
-    .starci-core-markdown-table-frame {
-        display: block;
-        width: 100%;
-        max-width: 100%;
-        overflow-x: auto;
-        overscroll-behavior-inline: contain;
-    }
-
-    .starci-core-markdown-article table {
-        border-collapse: collapse;
-    }
-
-    .starci-core-markdown-table-frame {
-        min-width: 0;
-        border: 1px solid var(--border, GrayText);
-        border-radius: 0.75rem;
-        background: var(--code-surface, color-mix(in srgb, CanvasText 4%, Canvas));
-        box-shadow: none;
-    }
-
-    .starci-core-markdown-article hr {
-        width: 100%;
-        margin: 1rem 0;
-        border: 0;
-        border-top: 1px solid var(--separator, var(--border, GrayText));
-    }
-
-    .starci-core-markdown-article :where(th, td) {
-        min-width: 8rem;
-        padding: 0.625rem 0.75rem;
-        border-bottom: 1px solid var(--separator, var(--border, GrayText));
-        text-align: start;
-        vertical-align: top;
-    }
-
-    .starci-core-markdown-article a {
-        color: var(--link, LinkText);
-        text-decoration: underline;
-        text-underline-offset: 0.15em;
-    }
-
-    .starci-core-static-row-copy {
-        display: flex;
-        min-width: 0;
-        flex: 1;
-        flex-direction: column;
-        gap: var(--starci-core-copy-gap, 0.25rem);
-    }
-
-    .starci-core-static-row-copy > :last-child:not(:first-child) {
-        color: var(--muted, GrayText);
-    }
-
-    [data-grammar-state-mark="check"] {
-        width: 1.25rem;
-        height: 1.25rem;
-        flex: none;
-        color: var(--success, #15803d);
-    }
-
-    .starci-core-rail {
-        container-name: starci-core-rail;
-        container-type: inline-size;
-        width: 100%;
-        min-width: 0;
-    }
-
-    .starci-core-rail[data-grammar-rail-width="compact"] {
-        max-width: var(--starci-core-rail-compact, 16rem);
-    }
-
-    .starci-core-rail[data-grammar-collapse="collapsed"] {
-        max-width: var(--starci-core-rail-collapsed, 4rem);
-    }
-
-    .starci-core-rail[data-grammar-rail-width="standard"] {
-        max-width: var(--starci-core-rail-standard, 20rem);
-    }
-
-    .starci-core-rail[data-grammar-rail-width="wide"] {
-        max-width: var(--starci-core-rail-wide, 24rem);
-    }
-
-    .starci-core-rail-frame {
-        display: flex;
-        min-width: 0;
-        max-height: calc(100dvh - var(--starci-core-rail-offset, 5.5rem) - 1.5rem);
-        flex-direction: column;
-        gap: var(--starci-core-rail-gap, 1rem);
-    }
-
-    .starci-core-rail[data-grammar-rail-mode="sticky"] .starci-core-rail-frame {
-        position: sticky;
-        top: var(--starci-core-rail-offset, 5.5rem);
-    }
-
-    .starci-core-rail-body {
-        min-height: 0;
-        overflow-y: auto;
-        overscroll-behavior: contain;
-    }
-
-    .starci-core-rail[data-grammar-rail-height="fill"],
-    .starci-core-rail[data-grammar-rail-height="fill"] .starci-core-rail-frame,
-    .starci-core-rail[data-grammar-rail-height="fill"] .starci-core-rail-body {
-        height: 100%;
-        min-height: 0;
-    }
-
-    .starci-core-rail[data-grammar-rail-height="fill"] .starci-core-rail-frame {
-        max-height: none;
-    }
-
-    .starci-core-rail[data-grammar-rail-height="fill"] .starci-core-rail-body {
-        flex: 1 1 0%;
-        overflow: hidden;
-    }
-
-    .starci-core-rail-footer {
-        flex: none;
-    }
-
-    .starci-core-rail :where(button, [role="button"]) {
-        min-inline-size: 44px;
-        min-block-size: 44px;
-    }
-
-    @container starci-core-surface (max-width: 28rem) {
-        .starci-core-surface-label {
-            align-items: flex-start;
-            flex-direction: column;
-        }
-
-        .starci-core-static-row {
-            gap: var(--starci-core-row-gap-compact, 0.5rem);
-        }
-    }
-
-    @container starci-core-rail (max-width: 18rem) {
-        .starci-core-rail-frame {
-            gap: var(--starci-core-rail-gap-compact, 0.75rem);
-        }
-    }
-
-    @media (max-width: 47.999rem) {
-        .starci-core-rail[data-grammar-rail-mode="sticky"] .starci-core-rail-frame {
-            position: static;
-            max-height: none;
-        }
-
-        .starci-core-rail-body {
-            overflow-y: visible;
-        }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-        [data-grammar-motion="animated"] {
-            scroll-behavior: auto;
+    @media (forced-colors: active) {
+        .grammar-common-root[data-grammar-family="core"] {
+            --starci-core-accent: Highlight;
+            --starci-core-focus: Highlight;
+            --starci-core-canvas: Canvas;
+            --starci-core-surface: Canvas;
+            --starci-core-surface-secondary: Canvas;
+            --starci-core-foreground: CanvasText;
+            --starci-core-muted: GrayText;
+            --starci-core-border: CanvasText;
+            --starci-core-separator: CanvasText;
+            --starci-core-success: CanvasText;
+            --starci-core-success-foreground: Canvas;
+            --starci-core-warning: CanvasText;
+            --starci-core-warning-foreground: Canvas;
+            --starci-core-danger: CanvasText;
+            --starci-core-danger-foreground: Canvas;
+            --starci-core-info: CanvasText;
+            --starci-core-info-foreground: Canvas;
+            --starci-core-surface-shadow: none;
         }
     }
 }
+