@scattered-light/loomiere-mojave 0.2.0 → 0.4.0

package/dist/exports/shadcn.css

@@ -3,8 +3,8 @@
    @import "<theme>/exports/shadcn.css";
    Replaces everything after the imports in shadcn's globals.css. Every variable
    points at a --sl- concept, so dark mode, contrast modes and color vision themes come
-   along. Dark mode is data-theme="dark" on <html> (next-themes: attribute="data-theme"), or the
-   system setting. With the Loomiere Tailwind theme as well, import this after it: text-xs to
+   along. Dark mode is data-theme="dark" or "dark-high-contrast" on <html> (next-themes:
+   attribute="data-theme"), or the system setting. With the Loomiere Tailwind theme as well, import this after it: text-xs to
    text-lg come back for shadcn's components, sized by the text tiers. */
 @import "../tokens.css";
 
@@ -45,11 +45,11 @@
 }
 
 @custom-variant dark {
-  &:where([data-theme='dark'], [data-theme='dark'] *) {
+  &:where([data-theme='dark'], [data-theme='dark-high-contrast'], :is([data-theme='dark'], [data-theme='dark-high-contrast']) *) {
     @slot;
   }
   @media (prefers-color-scheme: dark) {
-    &:where(:root:not([data-theme='light']), :root:not([data-theme='light']) *) {
+    &:where(:root:not([data-theme='light'], [data-theme='light-high-contrast'], [data-theme='deuteranopia'], [data-theme='protanopia'], [data-theme='tritanopia'], [data-theme='achromatopsia']), :root:not([data-theme='light'], [data-theme='light-high-contrast'], [data-theme='deuteranopia'], [data-theme='protanopia'], [data-theme='tritanopia'], [data-theme='achromatopsia']) *) {
       @slot;
     }
   }
@@ -90,14 +90,14 @@
   --color-sidebar-ring: var(--sidebar-ring);
   --font-sans: var(--sl-font-family-body);
   --font-mono: var(--sl-font-family-mono);
-  --text-xs: var(--sl-font-minimize-font-size);
-  --text-xs--line-height: var(--sl-font-minimize-line-height);
-  --text-sm: var(--sl-font-condense-font-size);
-  --text-sm--line-height: var(--sl-font-condense-line-height);
-  --text-base: var(--sl-font-base-font-size);
-  --text-base--line-height: var(--sl-font-base-line-height);
-  --text-lg: var(--sl-font-magnify-font-size);
-  --text-lg--line-height: var(--sl-font-magnify-line-height);
+  --text-xs: var(--sl-font-body-minimize-font-size);
+  --text-xs--line-height: var(--sl-font-body-minimize-line-height);
+  --text-sm: var(--sl-font-body-condense-font-size);
+  --text-sm--line-height: var(--sl-font-body-condense-line-height);
+  --text-base: var(--sl-font-body-base-font-size);
+  --text-base--line-height: var(--sl-font-body-base-line-height);
+  --text-lg: var(--sl-font-body-magnify-font-size);
+  --text-lg--line-height: var(--sl-font-body-magnify-line-height);
 }
 
 /* shadcn's own base styles, kept so this file can stand in for globals.css. */

package/dist/exports/tailwind.css

@@ -630,248 +630,224 @@
 }
 
 @custom-variant dark {
-  &:where([data-theme='dark'], [data-theme='dark'] *) {
+  &:where([data-theme='dark'], [data-theme='dark-high-contrast'], :is([data-theme='dark'], [data-theme='dark-high-contrast']) *) {
     @slot;
   }
   @media (prefers-color-scheme: dark) {
-    &:where(:root:not([data-theme='light']), :root:not([data-theme='light']) *) {
+    &:where(:root:not([data-theme='light'], [data-theme='light-high-contrast'], [data-theme='deuteranopia'], [data-theme='protanopia'], [data-theme='tritanopia'], [data-theme='achromatopsia']), :root:not([data-theme='light'], [data-theme='light-high-contrast'], [data-theme='deuteranopia'], [data-theme='protanopia'], [data-theme='tritanopia'], [data-theme='achromatopsia']) *) {
       @slot;
     }
   }
 }
 
-@utility text-base {
-  font-family: var(--sl-font-base-font-family);
-  font-size: var(--sl-font-base-font-size);
-  font-weight: var(--sl-font-base-font-weight);
-  line-height: var(--sl-font-base-line-height);
-  letter-spacing: var(--sl-font-base-letter-spacing);
+@utility text-body-base {
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
 }
 
-@utility text-base-selected {
-  font-family: var(--sl-font-base-selected-font-family);
-  font-size: var(--sl-font-base-selected-font-size);
-  font-weight: var(--sl-font-base-selected-font-weight);
-  line-height: var(--sl-font-base-selected-line-height);
-  letter-spacing: var(--sl-font-base-selected-letter-spacing);
+@utility text-selected-base {
+  font-family: var(--sl-font-selected-base-font-family);
+  font-size: var(--sl-font-selected-base-font-size);
+  font-weight: var(--sl-font-selected-base-font-weight);
+  line-height: var(--sl-font-selected-base-line-height);
+  letter-spacing: var(--sl-font-selected-base-letter-spacing);
 }
 
-@utility text-base-label {
-  font-family: var(--sl-font-base-label-font-family);
-  font-size: var(--sl-font-base-label-font-size);
-  font-weight: var(--sl-font-base-label-font-weight);
-  line-height: var(--sl-font-base-label-line-height);
-  letter-spacing: var(--sl-font-base-label-letter-spacing);
+@utility text-label-base {
+  font-family: var(--sl-font-label-base-font-family);
+  font-size: var(--sl-font-label-base-font-size);
+  font-weight: var(--sl-font-label-base-font-weight);
+  line-height: var(--sl-font-label-base-line-height);
+  letter-spacing: var(--sl-font-label-base-letter-spacing);
 }
 
-@utility text-base-link {
-  font-family: var(--sl-font-base-link-font-family);
-  font-size: var(--sl-font-base-link-font-size);
-  font-weight: var(--sl-font-base-link-font-weight);
-  line-height: var(--sl-font-base-link-line-height);
-  letter-spacing: var(--sl-font-base-link-letter-spacing);
+@utility text-link-base {
+  font-family: var(--sl-font-link-base-font-family);
+  font-size: var(--sl-font-link-base-font-size);
+  font-weight: var(--sl-font-link-base-font-weight);
+  line-height: var(--sl-font-link-base-line-height);
+  letter-spacing: var(--sl-font-link-base-letter-spacing);
 }
 
-@utility text-base-subtitle {
-  font-family: var(--sl-font-base-subtitle-font-family);
-  font-size: var(--sl-font-base-subtitle-font-size);
-  font-weight: var(--sl-font-base-subtitle-font-weight);
-  line-height: var(--sl-font-base-subtitle-line-height);
-  letter-spacing: var(--sl-font-base-subtitle-letter-spacing);
+@utility text-subtitle-base {
+  font-family: var(--sl-font-subtitle-base-font-family);
+  font-size: var(--sl-font-subtitle-base-font-size);
+  font-weight: var(--sl-font-subtitle-base-font-weight);
+  line-height: var(--sl-font-subtitle-base-line-height);
+  letter-spacing: var(--sl-font-subtitle-base-letter-spacing);
 }
 
-@utility text-base-trigger {
-  font-family: var(--sl-font-base-trigger-font-family);
-  font-size: var(--sl-font-base-trigger-font-size);
-  font-weight: var(--sl-font-base-trigger-font-weight);
-  line-height: var(--sl-font-base-trigger-line-height);
-  letter-spacing: var(--sl-font-base-trigger-letter-spacing);
+@utility text-trigger-base {
+  font-family: var(--sl-font-trigger-base-font-family);
+  font-size: var(--sl-font-trigger-base-font-size);
+  font-weight: var(--sl-font-trigger-base-font-weight);
+  line-height: var(--sl-font-trigger-base-line-height);
+  letter-spacing: var(--sl-font-trigger-base-letter-spacing);
 }
 
-@utility text-code {
-  font-family: var(--sl-font-code-font-family);
-  font-size: var(--sl-font-code-font-size);
-  font-weight: var(--sl-font-code-font-weight);
-  line-height: var(--sl-font-code-line-height);
-  letter-spacing: var(--sl-font-code-letter-spacing);
+@utility text-title-base {
+  font-family: var(--sl-font-title-base-font-family);
+  font-size: var(--sl-font-title-base-font-size);
+  font-weight: var(--sl-font-title-base-font-weight);
+  line-height: var(--sl-font-title-base-line-height);
+  letter-spacing: var(--sl-font-title-base-letter-spacing);
 }
 
-@utility text-condense {
-  font-family: var(--sl-font-condense-font-family);
-  font-size: var(--sl-font-condense-font-size);
-  font-weight: var(--sl-font-condense-font-weight);
-  line-height: var(--sl-font-condense-line-height);
-  letter-spacing: var(--sl-font-condense-letter-spacing);
+@utility text-code-condense {
+  font-family: var(--sl-font-code-condense-font-family);
+  font-size: var(--sl-font-code-condense-font-size);
+  font-weight: var(--sl-font-code-condense-font-weight);
+  line-height: var(--sl-font-code-condense-line-height);
+  letter-spacing: var(--sl-font-code-condense-letter-spacing);
 }
 
-@utility text-condense-trigger {
-  font-family: var(--sl-font-condense-trigger-font-family);
-  font-size: var(--sl-font-condense-trigger-font-size);
-  font-weight: var(--sl-font-condense-trigger-font-weight);
-  line-height: var(--sl-font-condense-trigger-line-height);
-  letter-spacing: var(--sl-font-condense-trigger-letter-spacing);
+@utility text-body-condense {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
 }
 
-@utility text-condense-selected {
-  font-family: var(--sl-font-condense-selected-font-family);
-  font-size: var(--sl-font-condense-selected-font-size);
-  font-weight: var(--sl-font-condense-selected-font-weight);
-  line-height: var(--sl-font-condense-selected-line-height);
-  letter-spacing: var(--sl-font-condense-selected-letter-spacing);
+@utility text-trigger-condense {
+  font-family: var(--sl-font-trigger-condense-font-family);
+  font-size: var(--sl-font-trigger-condense-font-size);
+  font-weight: var(--sl-font-trigger-condense-font-weight);
+  line-height: var(--sl-font-trigger-condense-line-height);
+  letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
 }
 
-@utility text-condense-link {
-  font-family: var(--sl-font-condense-link-font-family);
-  font-size: var(--sl-font-condense-link-font-size);
-  font-weight: var(--sl-font-condense-link-font-weight);
-  line-height: var(--sl-font-condense-link-line-height);
-  letter-spacing: var(--sl-font-condense-link-letter-spacing);
+@utility text-selected-condense {
+  font-family: var(--sl-font-selected-condense-font-family);
+  font-size: var(--sl-font-selected-condense-font-size);
+  font-weight: var(--sl-font-selected-condense-font-weight);
+  line-height: var(--sl-font-selected-condense-line-height);
+  letter-spacing: var(--sl-font-selected-condense-letter-spacing);
 }
 
-@utility text-condense-subtitle {
-  font-family: var(--sl-font-condense-subtitle-font-family);
-  font-size: var(--sl-font-condense-subtitle-font-size);
-  font-weight: var(--sl-font-condense-subtitle-font-weight);
-  line-height: var(--sl-font-condense-subtitle-line-height);
-  letter-spacing: var(--sl-font-condense-subtitle-letter-spacing);
+@utility text-link-condense {
+  font-family: var(--sl-font-link-condense-font-family);
+  font-size: var(--sl-font-link-condense-font-size);
+  font-weight: var(--sl-font-link-condense-font-weight);
+  line-height: var(--sl-font-link-condense-line-height);
+  letter-spacing: var(--sl-font-link-condense-letter-spacing);
 }
 
-@utility text-condense-subtitle-label {
-  font-family: var(--sl-font-condense-subtitle-label-font-family);
-  font-size: var(--sl-font-condense-subtitle-label-font-size);
-  font-weight: var(--sl-font-condense-subtitle-label-font-weight);
-  line-height: var(--sl-font-condense-subtitle-label-line-height);
-  letter-spacing: var(--sl-font-condense-subtitle-label-letter-spacing);
-  text-transform: var(--sl-font-condense-subtitle-label-text-transform);
+@utility text-subtitle-condense {
+  font-family: var(--sl-font-subtitle-condense-font-family);
+  font-size: var(--sl-font-subtitle-condense-font-size);
+  font-weight: var(--sl-font-subtitle-condense-font-weight);
+  line-height: var(--sl-font-subtitle-condense-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
 }
 
-@utility text-magnify {
-  font-family: var(--sl-font-magnify-font-family);
-  font-size: var(--sl-font-magnify-font-size);
-  font-weight: var(--sl-font-magnify-font-weight);
-  line-height: var(--sl-font-magnify-line-height);
-  letter-spacing: var(--sl-font-magnify-letter-spacing);
+@utility text-eyebrow-condense {
+  font-family: var(--sl-font-eyebrow-condense-font-family);
+  font-size: var(--sl-font-eyebrow-condense-font-size);
+  font-weight: var(--sl-font-eyebrow-condense-font-weight);
+  line-height: var(--sl-font-eyebrow-condense-line-height);
+  letter-spacing: var(--sl-font-eyebrow-condense-letter-spacing);
+  text-transform: var(--sl-font-eyebrow-condense-text-transform);
 }
 
-@utility text-magnify-trigger {
-  font-family: var(--sl-font-magnify-trigger-font-family);
-  font-size: var(--sl-font-magnify-trigger-font-size);
-  font-weight: var(--sl-font-magnify-trigger-font-weight);
-  line-height: var(--sl-font-magnify-trigger-line-height);
-  letter-spacing: var(--sl-font-magnify-trigger-letter-spacing);
+@utility text-title-condense {
+  font-family: var(--sl-font-title-condense-font-family);
+  font-size: var(--sl-font-title-condense-font-size);
+  font-weight: var(--sl-font-title-condense-font-weight);
+  line-height: var(--sl-font-title-condense-line-height);
+  letter-spacing: var(--sl-font-title-condense-letter-spacing);
 }
 
-@utility text-minimize {
-  font-family: var(--sl-font-minimize-font-family);
-  font-size: var(--sl-font-minimize-font-size);
-  font-weight: var(--sl-font-minimize-font-weight);
-  line-height: var(--sl-font-minimize-line-height);
-  letter-spacing: var(--sl-font-minimize-letter-spacing);
+@utility text-body-magnify {
+  font-family: var(--sl-font-body-magnify-font-family);
+  font-size: var(--sl-font-body-magnify-font-size);
+  font-weight: var(--sl-font-body-magnify-font-weight);
+  line-height: var(--sl-font-body-magnify-line-height);
+  letter-spacing: var(--sl-font-body-magnify-letter-spacing);
 }
 
-@utility text-minimize-trigger {
-  font-family: var(--sl-font-minimize-trigger-font-family);
-  font-size: var(--sl-font-minimize-trigger-font-size);
-  font-weight: var(--sl-font-minimize-trigger-font-weight);
-  line-height: var(--sl-font-minimize-trigger-line-height);
-  letter-spacing: var(--sl-font-minimize-trigger-letter-spacing);
+@utility text-trigger-magnify {
+  font-family: var(--sl-font-trigger-magnify-font-family);
+  font-size: var(--sl-font-trigger-magnify-font-size);
+  font-weight: var(--sl-font-trigger-magnify-font-weight);
+  line-height: var(--sl-font-trigger-magnify-line-height);
+  letter-spacing: var(--sl-font-trigger-magnify-letter-spacing);
 }
 
-@utility text-minimize-selected {
-  font-family: var(--sl-font-minimize-selected-font-family);
-  font-size: var(--sl-font-minimize-selected-font-size);
-  font-weight: var(--sl-font-minimize-selected-font-weight);
-  line-height: var(--sl-font-minimize-selected-line-height);
-  letter-spacing: var(--sl-font-minimize-selected-letter-spacing);
+@utility text-title-magnify {
+  font-family: var(--sl-font-title-magnify-font-family);
+  font-size: var(--sl-font-title-magnify-font-size);
+  font-weight: var(--sl-font-title-magnify-font-weight);
+  line-height: var(--sl-font-title-magnify-line-height);
+  letter-spacing: var(--sl-font-title-magnify-letter-spacing);
 }
 
-@utility text-minimize-link {
-  font-family: var(--sl-font-minimize-link-font-family);
-  font-size: var(--sl-font-minimize-link-font-size);
-  font-weight: var(--sl-font-minimize-link-font-weight);
-  line-height: var(--sl-font-minimize-link-line-height);
-  letter-spacing: var(--sl-font-minimize-link-letter-spacing);
+@utility text-body-minimize {
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
 }
 
-@utility text-minimize-subtitle {
-  font-family: var(--sl-font-minimize-subtitle-font-family);
-  font-size: var(--sl-font-minimize-subtitle-font-size);
-  font-weight: var(--sl-font-minimize-subtitle-font-weight);
-  line-height: var(--sl-font-minimize-subtitle-line-height);
-  letter-spacing: var(--sl-font-minimize-subtitle-letter-spacing);
+@utility text-trigger-minimize {
+  font-family: var(--sl-font-trigger-minimize-font-family);
+  font-size: var(--sl-font-trigger-minimize-font-size);
+  font-weight: var(--sl-font-trigger-minimize-font-weight);
+  line-height: var(--sl-font-trigger-minimize-line-height);
+  letter-spacing: var(--sl-font-trigger-minimize-letter-spacing);
 }
 
-@utility text-minimize-subtitle-label {
-  font-family: var(--sl-font-minimize-subtitle-label-font-family);
-  font-size: var(--sl-font-minimize-subtitle-label-font-size);
-  font-weight: var(--sl-font-minimize-subtitle-label-font-weight);
-  line-height: var(--sl-font-minimize-subtitle-label-line-height);
-  letter-spacing: var(--sl-font-minimize-subtitle-label-letter-spacing);
-  text-transform: var(--sl-font-minimize-subtitle-label-text-transform);
+@utility text-selected-minimize {
+  font-family: var(--sl-font-selected-minimize-font-family);
+  font-size: var(--sl-font-selected-minimize-font-size);
+  font-weight: var(--sl-font-selected-minimize-font-weight);
+  line-height: var(--sl-font-selected-minimize-line-height);
+  letter-spacing: var(--sl-font-selected-minimize-letter-spacing);
 }
 
-@utility text-maximize-2xl {
-  font-family: var(--sl-font-maximize-2xl-font-family);
-  font-size: var(--sl-font-maximize-2xl-font-size);
-  font-weight: var(--sl-font-maximize-2xl-font-weight);
-  line-height: var(--sl-font-maximize-2xl-line-height);
-  letter-spacing: var(--sl-font-maximize-2xl-letter-spacing);
+@utility text-link-minimize {
+  font-family: var(--sl-font-link-minimize-font-family);
+  font-size: var(--sl-font-link-minimize-font-size);
+  font-weight: var(--sl-font-link-minimize-font-weight);
+  line-height: var(--sl-font-link-minimize-line-height);
+  letter-spacing: var(--sl-font-link-minimize-letter-spacing);
 }
 
-@utility text-maximize-3xl {
-  font-family: var(--sl-font-maximize-3xl-font-family);
-  font-size: var(--sl-font-maximize-3xl-font-size);
-  font-weight: var(--sl-font-maximize-3xl-font-weight);
-  line-height: var(--sl-font-maximize-3xl-line-height);
-  letter-spacing: var(--sl-font-maximize-3xl-letter-spacing);
+@utility text-subtitle-minimize {
+  font-family: var(--sl-font-subtitle-minimize-font-family);
+  font-size: var(--sl-font-subtitle-minimize-font-size);
+  font-weight: var(--sl-font-subtitle-minimize-font-weight);
+  line-height: var(--sl-font-subtitle-minimize-line-height);
+  letter-spacing: var(--sl-font-subtitle-minimize-letter-spacing);
 }
 
-@utility text-maximize-4xl {
-  font-family: var(--sl-font-maximize-4xl-font-family);
-  font-size: var(--sl-font-maximize-4xl-font-size);
-  font-weight: var(--sl-font-maximize-4xl-font-weight);
-  line-height: var(--sl-font-maximize-4xl-line-height);
-  letter-spacing: var(--sl-font-maximize-4xl-letter-spacing);
+@utility text-eyebrow-minimize {
+  font-family: var(--sl-font-eyebrow-minimize-font-family);
+  font-size: var(--sl-font-eyebrow-minimize-font-size);
+  font-weight: var(--sl-font-eyebrow-minimize-font-weight);
+  line-height: var(--sl-font-eyebrow-minimize-line-height);
+  letter-spacing: var(--sl-font-eyebrow-minimize-letter-spacing);
+  text-transform: var(--sl-font-eyebrow-minimize-text-transform);
 }
 
-@utility text-maximize-lg {
-  font-family: var(--sl-font-maximize-lg-font-family);
-  font-size: var(--sl-font-maximize-lg-font-size);
-  font-weight: var(--sl-font-maximize-lg-font-weight);
-  line-height: var(--sl-font-maximize-lg-line-height);
-  letter-spacing: var(--sl-font-maximize-lg-letter-spacing);
+@utility text-title-amplify {
+  font-family: var(--sl-font-title-amplify-font-family);
+  font-size: var(--sl-font-title-amplify-font-size);
+  font-weight: var(--sl-font-title-amplify-font-weight);
+  line-height: var(--sl-font-title-amplify-line-height);
+  letter-spacing: var(--sl-font-title-amplify-letter-spacing);
 }
 
-@utility text-maximize-md {
-  font-family: var(--sl-font-maximize-md-font-family);
-  font-size: var(--sl-font-maximize-md-font-size);
-  font-weight: var(--sl-font-maximize-md-font-weight);
-  line-height: var(--sl-font-maximize-md-line-height);
-  letter-spacing: var(--sl-font-maximize-md-letter-spacing);
-}
-
-@utility text-maximize-sm {
-  font-family: var(--sl-font-maximize-sm-font-family);
-  font-size: var(--sl-font-maximize-sm-font-size);
-  font-weight: var(--sl-font-maximize-sm-font-weight);
-  line-height: var(--sl-font-maximize-sm-line-height);
-  letter-spacing: var(--sl-font-maximize-sm-letter-spacing);
-}
-
-@utility text-maximize-xl {
-  font-family: var(--sl-font-maximize-xl-font-family);
-  font-size: var(--sl-font-maximize-xl-font-size);
-  font-weight: var(--sl-font-maximize-xl-font-weight);
-  line-height: var(--sl-font-maximize-xl-line-height);
-  letter-spacing: var(--sl-font-maximize-xl-letter-spacing);
-}
-
-@utility text-maximize-xs {
-  font-family: var(--sl-font-maximize-xs-font-family);
-  font-size: var(--sl-font-maximize-xs-font-size);
-  font-weight: var(--sl-font-maximize-xs-font-weight);
-  line-height: var(--sl-font-maximize-xs-line-height);
-  letter-spacing: var(--sl-font-maximize-xs-letter-spacing);
+@utility text-title-maximize {
+  font-family: var(--sl-font-title-maximize-font-family);
+  font-size: var(--sl-font-title-maximize-font-size);
+  font-weight: var(--sl-font-title-maximize-font-weight);
+  line-height: var(--sl-font-title-maximize-line-height);
+  letter-spacing: var(--sl-font-title-maximize-letter-spacing);
 }
 
 @utility z-hide {
@@ -1364,6 +1340,7 @@
   --sl-scope-fg: var(--sl-scope-neutral-fg);
   --sl-scope-fg-secondary: var(--sl-scope-neutral-fg-secondary);
   --sl-scope-fg-tertiary: var(--sl-scope-neutral-fg-tertiary);
+  --sl-scope-fg-disabled: var(--sl-scope-neutral-fg-disabled);
   --sl-scope-focus: var(--sl-scope-neutral-focus);
   --sl-scope-canvas: var(--sl-scope-neutral-canvas);
   --sl-scope-raised: var(--sl-scope-neutral-raised);
@@ -1555,6 +1532,7 @@
   --sl-scope-fg: var(--sl-scope-chrome-fg);
   --sl-scope-fg-secondary: var(--sl-scope-chrome-fg-secondary);
   --sl-scope-fg-tertiary: var(--sl-scope-chrome-fg-tertiary);
+  --sl-scope-fg-disabled: var(--sl-scope-chrome-fg-disabled);
   --sl-scope-focus: var(--sl-scope-chrome-focus);
   --sl-scope-canvas: var(--sl-scope-chrome-canvas);
   --sl-scope-raised: var(--sl-scope-chrome-raised);