@canopy-iiif/app 1.5.10 → 1.5.12

package/ui/styles/index.css

@@ -64,7 +64,7 @@
   }
   .canopy-lead {
     font-size: 1.382rem;
-    color: var(--color-gray-700);
+    color: var(--color-gray-muted);
     margin: 0.5rem 0 2rem 0;
     line-height: 1.4;
   }
@@ -89,7 +89,7 @@ hr {
 blockquote {
   font-size: 1.222em;
   padding: 1.618rem 2.618rem;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
 }
 
 .markdown-table__frame {
@@ -166,14 +166,14 @@ section[data-footnotes] ul li,
   }
   .canopy-button--primary {
     background-color: var(--color-accent-default);
-    color: var(--color-gray-50);
+    color: var(--color-accent-50);
     box-shadow: 0 18px 32px -22px rgba(15, 23, 42, 0.55);
   }
   .canopy-button--primary:hover, .canopy-button--primary:focus-visible {
     background-color: var(--color-accent-600);
   }
   .canopy-button--secondary {
-    border: 1px solid color-mix(in srgb, var(--color-gray-300) 60%, transparent);
+    border: 1px solid var(--color-gray-200);
     color: color-mix(in srgb, var(--color-gray-900) 92%, transparent);
     background-color: var(--color-gray-50);
   }
@@ -182,19 +182,6 @@ section[data-footnotes] ul li,
     background-color: color-mix(in srgb, var(--color-accent-300) 25%, transparent);
     color: var(--color-accent-900);
   }
-  html[data-accent=amber] .canopy-button--primary,
-  html[data-accent=yellow] .canopy-button--primary,
-  html[data-accent=lime] .canopy-button--primary,
-  html[data-accent=mint] .canopy-button--primary,
-  html[data-accent=sky] .canopy-button--primary {
-    color: var(--color-gray-900);
-  }
-  html.dark .canopy-button--primary {
-    color: var(--color-gray-900);
-  }
-  html.dark[data-accent=amber] .canopy-button--primary, html.dark[data-accent=yellow] .canopy-button--primary, html.dark[data-accent=lime] .canopy-button--primary, html.dark[data-accent=mint] .canopy-button--primary, html.dark[data-accent=sky] .canopy-button--primary {
-    color: var(--color-gray-50);
-  }
   .canopy-button-group {
     display: flex;
     flex-direction: column;
@@ -265,7 +252,7 @@ section[data-footnotes] ul li,
   opacity: 0;
   transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
   background: var(--color-gray-100);
-  color: var(--color-gray-600);
+  color: var(--color-gray-muted);
   font-size: 83.333%;
 }
 .canopy-card[data-image-loaded=true] .canopy-card-media > img {
@@ -330,7 +317,7 @@ section[data-footnotes] ul li,
   flex-wrap: wrap;
   gap: 1.618rem;
   font-size: 0.8333rem;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
 }
 .canopy-article-card mark {
   background: color-mix(in srgb, var(--color-accent-500) 38.2%, transparent);
@@ -456,7 +443,12 @@ section[data-footnotes] ul li,
     margin: -0.25rem;
     display: inline-flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-end;
+    cursor: pointer;
+    flex-grow: 1;
+  }
+  .canopy-nav-tree__toggle:hover, .canopy-nav-tree__toggle:focus {
+    color: var(--color-accent-default);
   }
   .canopy-nav-tree__toggle:focus-visible {
     outline: 2px solid var(--color-accent-default);
@@ -505,7 +497,7 @@ section[data-footnotes] ul li,
 .referenced-items--empty {
   border-top: 1px solid var(--color-gray-200);
   padding: 1.5rem 0;
-  color: var(--color-gray-600);
+  color: var(--color-gray-muted);
   font-style: italic;
 }
 
@@ -525,7 +517,7 @@ section[data-footnotes] ul li,
   text-transform: uppercase;
   margin: 0;
   font-weight: 400;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
 }
 
 .references__item {
@@ -545,7 +537,7 @@ section[data-footnotes] ul li,
 }
 
 .references__empty {
-  color: var(--color-gray-600);
+  color: var(--color-gray-muted);
   font-style: italic;
 }
 
@@ -620,11 +612,10 @@ section[data-footnotes] ul li,
 .bibliography__note-label {
   font-variant-numeric: tabular-nums;
   font-weight: 600;
-  color: var(--color-gray-500);
+  color: var(--color-gray-muted);
 }
 
 .bibliography__note-body {
-  color: var(--color-gray-900);
   font-size: 0.95rem;
   line-height: 1.5;
 }
@@ -712,7 +703,7 @@ section[data-footnotes] ul li,
   }
   .canopy-header__icon-button:hover,
   .canopy-header__icon-button:focus-visible {
-    color: var(--color-accent-700);
+    color: var(--color-accent-default);
     outline: none;
   }
   .canopy-header__search-icon {
@@ -843,7 +834,6 @@ section[data-footnotes] ul li,
     padding: 0;
     display: flex;
     flex-direction: column;
-    gap: 0.618rem;
   }
   .canopy-modal__nav-item {
     margin: 0;
@@ -876,7 +866,12 @@ section[data-footnotes] ul li,
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    color: var(--color-gray-700);
+    justify-content: flex-end;
+    cursor: pointer;
+    flex-grow: 1;
+  }
+  .canopy-modal__nav-toggle:hover, .canopy-modal__nav-toggle:focus {
+    color: var(--color-accent-default);
   }
   .canopy-modal__nav-toggle:focus-visible {
     outline: 2px solid var(--color-accent-default);
@@ -911,7 +906,7 @@ section[data-footnotes] ul li,
 @layer components {
   .canopy-footer {
     border-top: 1px solid var(--color-gray-200);
-    color: var(--color-gray-800);
+    color: var(--color-gray-muted);
   }
   .canopy-footer__inner {
     margin: 0 auto;
@@ -1005,7 +1000,7 @@ section[data-footnotes] ul li,
   }
   .canopy-modal__close:hover,
   .canopy-modal__close:focus-visible {
-    color: var(--color-accent-700);
+    color: var(--color-accent-default);
     outline: none;
   }
   .canopy-modal__close-icon {
@@ -1049,7 +1044,7 @@ section[data-footnotes] ul li,
   --hero-height: 520px;
   --hero-bg-start: var(--color-gray-50);
   --hero-bg-mid: var(--color-accent-100);
-  --hero-bg-end: var(--color-accent-100);
+  --hero-bg-end: var(--color-accent-200);
   --hero-dot-bg: var(--color-accent-300);
   --hero-dot-active-bg: var(--color-accent-default);
   background: linear-gradient(173deg, var(--hero-bg-start) 5rem, var(--hero-bg-mid) 61.8%, var(--hero-bg-end) 100%);
@@ -1155,7 +1150,7 @@ section[data-footnotes] ul li,
 .canopy-interstitial--hero-breadcrumb .canopy-interstitial__description {
   font-size: 0.9222rem;
   font-weight: 700;
-  color: var(--color-accent-700);
+  color: var(--color-accent-default);
   font-family: var(--font-mono);
 }
 .canopy-interstitial__breadcrumb {
@@ -1166,10 +1161,10 @@ section[data-footnotes] ul li,
 .canopy-interstitial__breadcrumb a {
   color: inherit;
   text-decoration: none;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
 }
 .canopy-interstitial__breadcrumb a:hover, .canopy-interstitial__breadcrumb a:focus-visible {
-  color: var(--color-accent-700);
+  color: var(--color-accent-default);
   outline: none;
 }
 .canopy-interstitial__breadcrumb-separator, .canopy-interstitial__breadcrumb-current {
@@ -1411,7 +1406,7 @@ section[data-footnotes] ul li,
 }
 .canopy-iiif-image__caption {
   margin: 0.75rem 0 0;
-  color: var(--color-gray-800);
+  color: var(--color-gray-muted);
   font-size: 0.875rem;
   line-height: 1.4;
 }
@@ -1598,7 +1593,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   gap: 0.5rem;
   border: 1px solid var(--color-gray-200);
   border-radius: 0.75rem;
-  color: var(--color-gray-800);
+  color: var(--color-gray-muted);
   box-shadow: var(--shadow-sm);
   transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard), background-color var(--duration-fast) var(--easing-standard);
 }
@@ -1670,7 +1665,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   margin-right: 1px;
   border: 0;
   background: var(--color-accent-default);
-  color: #fff;
+  color: var(--color-accent-50);
   font-weight: 300;
   font-size: 1rem;
   padding: 0.382rem 0.618rem;
@@ -1718,7 +1713,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   padding: 0.382rem 0.618rem;
   font-size: 1rem;
   cursor: pointer;
-  color: var(--color-gray-800);
+  color: var(--color-gray-muted);
   transition: all 0.2s ease-in-out;
 }
 .canopy-search-tabs button.active, .canopy-search-tabs button:hover {
@@ -1734,7 +1729,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   gap: 0.25rem;
   padding: 0.25rem 0.5rem;
   border: 1px solid var(--color-gray-200);
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
   background: var(--color-gray-100);
   border-radius: 6px;
   cursor: pointer;
@@ -1835,7 +1830,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   padding: 0.382rem 0.618rem;
   font-weight: 600;
   font-size: 0.8333rem;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
 }
 
 .canopy-search-teaser__item {
@@ -1889,7 +1884,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
 
 .canopy-search-teaser__meta {
   font-size: 0.78rem;
-  color: var(--color-gray-600);
+  color: var(--color-gray-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1903,7 +1898,6 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   .canopy-modal--filters .canopy-modal__panel {
     width: min(100%, 48rem);
     max-height: min(90vh, 720px);
-    background: var(--color-gray-100);
   }
   .canopy-modal--filters .canopy-modal__body--filters {
     display: flex;
@@ -1915,7 +1909,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
     margin: 0 0 0.75rem;
     font-size: var(--font-size-sm);
     line-height: var(--line-height-sm);
-    color: var(--color-gray-500);
+    color: var(--color-gray-muted);
   }
   .canopy-search-filters__body {
     display: grid;
@@ -1929,7 +1923,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   .canopy-search-filters__empty {
     font-size: var(--font-size-sm);
     line-height: var(--line-height-sm);
-    color: var(--color-gray-500);
+    color: var(--color-gray-muted);
   }
   .canopy-search-filters__facet {
     border: 1px solid var(--color-gray-200);
@@ -1937,9 +1931,6 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
     background: var(--color-gray-50);
     overflow: hidden;
   }
-  .canopy-search-filters__facet[open] {
-    background: var(--color-gray-100);
-  }
   .canopy-search-filters__facet-summary {
     display: flex;
     align-items: center;
@@ -1958,11 +1949,10 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   .canopy-search-filters__facet-count {
     font-size: var(--font-size-xs);
     font-weight: 400;
-    color: var(--color-gray-500);
+    color: var(--color-gray-muted);
   }
   .canopy-search-filters__facet-content {
     border-top: 1px solid var(--color-gray-200);
-    background: var(--color-gray-100);
     padding: 1rem;
     max-height: 15rem;
     overflow-y: auto;
@@ -1980,7 +1970,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
     border: 1px solid var(--color-gray-300);
     padding: 0.375rem 0.75rem;
     font-size: var(--font-size-sm);
-    color: var(--color-gray-700);
+    color: var(--color-gray-muted);
     transition: border-color var(--duration-fast) var(--easing-standard), box-shadow var(--duration-fast) var(--easing-standard);
   }
   .canopy-search-filters__quick-input:focus {
@@ -1993,7 +1983,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
     border: 1px solid var(--color-gray-200);
     padding: 0.25rem 0.5rem;
     font-size: var(--font-size-xs);
-    color: var(--color-gray-600);
+    color: var(--color-gray-muted);
     background: var(--color-gray-100);
     transition: background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard);
   }
@@ -2009,7 +1999,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
     flex-direction: column;
     gap: 0.5rem;
     font-size: var(--font-size-sm);
-    color: var(--color-gray-700);
+    color: var(--color-gray-muted);
   }
   .canopy-search-filters__facet-item {
     display: flex;
@@ -2033,7 +2023,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   }
   .canopy-search-filters__facet-empty {
     font-size: var(--font-size-sm);
-    color: var(--color-gray-500);
+    color: var(--color-gray-muted);
   }
   .canopy-search-filters__footer {
     display: flex;
@@ -2053,14 +2043,13 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
     border-radius: 9999px;
     padding: 0.5rem 1.25rem;
     font-size: var(--font-size-sm);
-    font-weight: 600;
     cursor: pointer;
     transition: background-color var(--duration-fast) var(--easing-standard), color var(--duration-fast) var(--easing-standard);
   }
   .canopy-search-filters__button--secondary {
     border: 1px solid var(--color-gray-300);
     background: transparent;
-    color: var(--color-gray-700);
+    color: var(--color-gray-muted);
   }
   .canopy-search-filters__button--secondary:hover,
   .canopy-search-filters__button--secondary:focus-visible {
@@ -2075,7 +2064,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   }
   .canopy-search-filters__button--primary:hover,
   .canopy-search-filters__button--primary:focus-visible {
-    background: var(--color-accent-700);
+    background: var(--color-accent-default);
     outline: none;
   }
   @media (max-width: 48rem) {
@@ -2166,13 +2155,14 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
 .canopy-sub-navigation__link,
 .canopy-sub-navigation__tree .canopy-nav-tree__link,
 .canopy-modal__section-nav .canopy-nav-tree__link {
-  display: block;
+  display: inline;
   padding: 0.382rem 0.618;
   border-radius: 0.382rem;
   color: inherit;
   text-decoration: none;
   cursor: pointer;
   transition: background-color 120ms ease, color 120ms ease;
+  flex-shrink: 1;
 }
 
 .canopy-sub-navigation__link:hover,
@@ -2185,14 +2175,14 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
 .canopy-sub-navigation__tree .canopy-nav-tree__link.is-label,
 .canopy-modal__section-nav .canopy-nav-tree__link.is-label {
   cursor: default;
-  color: var(--color-gray-600);
+  color: var(--color-gray-muted);
 }
 
 .canopy-sub-navigation__link.is-disabled,
 .canopy-sub-navigation__tree .canopy-nav-tree__link.is-disabled,
 .canopy-modal__section-nav .canopy-nav-tree__link.is-disabled {
   cursor: default;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
   font-style: italic;
 }
 
@@ -2209,7 +2199,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   z-index: 0;
   position: relative;
   background: var(--color-accent-200);
-  color: var(--color-accent-700);
+  color: var(--color-accent-default);
   font-family: var(--font-sans);
   padding: 0.175rem 0.175rem;
   top: -1px;
@@ -2274,7 +2264,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
 .canopy-content-navigation__toggle:focus-visible {
   border-color: color-mix(in srgb, var(--color-accent-400) 65%, transparent);
   background-color: color-mix(in srgb, var(--color-accent-200) 25%, transparent);
-  color: var(--color-accent-700);
+  color: var(--color-accent-default);
 }
 
 .canopy-layout__content-nav.is-collapsed .canopy-content-navigation {
@@ -2320,7 +2310,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   display: block;
   text-align: center;
   padding-bottom: 1.618rem;
-  color: var(--color-gray-800);
+  color: var(--color-gray-muted);
   font-weight: 300;
 }
 
@@ -2409,7 +2399,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
     text-transform: uppercase;
     margin: 0;
     font-weight: 400;
-    color: var(--color-gray-800);
+    color: var(--color-gray-muted);
   }
   body.canopy-type-work main dd {
     margin: 0;
@@ -2437,12 +2427,12 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
 .canopy-timeline__description {
   margin: 0;
   font-size: 0.9222rem;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
 }
 
 .canopy-timeline__range {
   margin: 0;
-  color: var(--color-accent-700);
+  color: var(--color-accent-default);
   font-size: 1.382rem;
   font-weight: 600;
 }
@@ -2494,7 +2484,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
 .canopy-timeline__step-label {
   font-size: 0.8333rem;
   font-weight: 300;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
   transform: translateX(0.5rem);
   margin-top: -0.618rem;
   margin-left: -0.382rem;
@@ -2539,7 +2529,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
 .canopy-timeline__group-point-date {
   font-size: 1.111rem;
   letter-spacing: 0.0125em;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
   font-weight: 300;
   margin-bottom: 0.382rem;
 }
@@ -2557,7 +2547,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
 .canopy-timeline__group-count {
   font-size: 0.9222rem;
   font-weight: 300;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
 }
 
 .canopy-timeline__connector {
@@ -2570,22 +2560,22 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   width: clamp(2.618rem, 6vw, 2.618rem);
   height: 0.125rem;
   border-radius: 999px;
-  background: var(--color-accent-700);
+  background: var(--color-accent-default);
 }
 
 .canopy-timeline__connector-dot {
   width: 0.618rem;
   height: 0.618rem;
   border-radius: 50%;
-  background: var(--color-accent-700);
-  border: 2px solid var(--color-accent-700);
+  background: var(--color-accent-default);
+  border: 2px solid var(--color-accent-default);
 }
 
 .canopy-timeline__connector-dot.is-active {
   width: 1rem;
   height: 1rem;
-  background: var(--color-accent-700);
-  border-color: var(--color-accent-700);
+  background: var(--color-accent-default);
+  border-color: var(--color-accent-default);
 }
 
 .canopy-timeline__resources {
@@ -2751,7 +2741,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   padding: 0;
   font-size: 0.9222rem;
   line-height: 1.4;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
 }
 .canopy-map__popup-link {
   display: inline-flex;
@@ -2770,7 +2760,7 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   font-weight: 600;
   letter-spacing: 0.05em;
   text-transform: uppercase;
-  color: var(--color-gray-600);
+  color: var(--color-gray-muted);
 }
 .canopy-map__popup-manifests-list {
   list-style: none;
@@ -2795,12 +2785,12 @@ html.dark .canopy-iiif-image .clover-iiif-image-openseadragon .clover-iiif-image
   color: var(--color-accent-600);
 }
 .canopy-map__popup-manifests-text {
-  color: var(--color-gray-800);
+  color: var(--color-gray-muted);
 }
 .canopy-map__popup-manifests-summary {
   margin: 0.125rem 0 0;
   font-size: 0.8125rem;
-  color: var(--color-gray-700);
+  color: var(--color-gray-muted);
 }
 .canopy-map .leaflet-marker-icon.canopy-map__marker {
   background: transparent;

package/ui/theme.js

@@ -30,9 +30,9 @@ const LEVELS = [
 ];
 const STEP_MAP = {
   50: 1,
-  100: 3,
-  200: 4,
-  300: 6,
+  100: 2,
+  200: 3,
+  300: 4,
   400: 7,
   500: 8,
   600: 9,
@@ -44,8 +44,8 @@ const STEP_MAP = {
 const AVAILABLE = new Set(
   Object.keys(radixColors).filter(
     (key) =>
-      /^[a-z]+$/.test(key) && radixColors[key] && radixColors[key][`${key}1`]
-  )
+      /^[a-z]+$/.test(key) && radixColors[key] && radixColors[key][`${key}1`],
+  ),
 );
 
 const APPEARANCES = new Set(["light", "dark"]);
@@ -114,7 +114,7 @@ function buildVariablesMap(brandScale, grayScale, options = {}) {
       const value = brandScale[lvl];
       if (value) vars[`--color-accent-${lvl}`] = value;
     }
-    if (brandScale["700"]) vars["--color-accent-default"] = brandScale["700"];
+    if (brandScale["800"]) vars["--color-accent-default"] = brandScale["800"];
   }
   if (grayScale) {
     for (const lvl of LEVELS) {
@@ -122,15 +122,15 @@ function buildVariablesMap(brandScale, grayScale, options = {}) {
       if (value) vars[`--color-gray-${lvl}`] = value;
     }
     if (grayScale["900"]) vars["--color-gray-default"] = grayScale["900"];
-    if (grayScale["600"]) vars["--color-gray-muted"] = grayScale["600"];
+    if (grayScale["800"]) vars["--color-gray-muted"] = grayScale["800"];
   }
   if (brandScale && grayScale) {
-    if (brandScale["700"])
-      vars["--colors-accent"] = `${brandScale["700"]} !important`;
     if (brandScale["800"])
-      vars["--colors-accentAlt"] = `${brandScale["800"]} !important`;
-    if (brandScale["400"])
-      vars["--colors-accentMuted"] = `${brandScale["400"]} !important`;
+      vars["--colors-accent"] = `${brandScale["800"]} !important`;
+    if (brandScale["900"])
+      vars["--colors-accentAlt"] = `${brandScale["900"]} !important`;
+    if (brandScale["600"])
+      vars["--colors-accentMuted"] = `${brandScale["600"]} !important`;
     if (grayScale["900"]) {
       const primary = `${grayScale["900"]} !important`;
       vars["--colors-primary"] = primary;
@@ -185,8 +185,6 @@ function loadCanopyTheme(options = {}) {
   let grayScale = grayName
     ? toTailwindScale(grayName, {
         appearance,
-        darken900Amount: 0.4,
-        saturate700: false,
       })
     : null;
   let grayFallback = false;
@@ -195,8 +193,6 @@ function loadCanopyTheme(options = {}) {
     grayName = DEFAULT_GRAY;
     grayScale = toTailwindScale(DEFAULT_GRAY, {
       appearance,
-      darken900Amount: 0.4,
-      saturate700: false,
     });
   }