@sanity/themer 0.8.1 → 0.9.0

package/dist/bundle.css

@@ -1,386 +1,129 @@
-.bgn4np2 {
-  view-transition-name: bgn4np0;
-  flex: none;
-}
-
-.bgn4np2[data-overlay="true"] {
-  width: auto;
-  position: absolute;
-  inset: 0;
-}
-
-.bgn4np3 {
-  position: relative;
-}
-
-.bgn4np4 {
-  container: bgn4np1 / inline-size;
-}
-
-.bgn4np5 {
-  z-index: 1;
-  cursor: col-resize;
-  touch-action: none;
-  width: 7px;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: -3px;
-}
-
-.bgn4np5:after {
-  content: "";
-  background: var(--card-focus-ring-color);
-  opacity: 0;
-  width: 3px;
-  transition: opacity .1s;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 2px;
-}
-
-.bgn4np5:focus {
-  outline: none;
-}
-
-.bgn4np5:hover:after, .bgn4np5:focus-visible:after, .bgn4np5[data-dragging="true"]:after {
-  opacity: 1;
+@keyframes pcwcs07 {
+  to {
+    opacity: 0;
+    filter: blur(12px);
+  }
 }
 
-@keyframes _1yq4ar7b {
+@keyframes pcwcs08 {
   from {
-    transform: translateX(-100%);
+    opacity: 0;
+    filter: blur(12px);
   }
 }
 
-@keyframes _1yq4ar7c {
-  to {
+@keyframes pcwcs0a {
+  from {
+    opacity: 0;
     transform: translateX(-100%);
   }
-}
 
-@keyframes _1yq4ar7d {
-  from {
-    transform: translateY(-100%);
+  25% {
+    opacity: 0;
   }
 }
 
-@keyframes _1yq4ar7e {
+@keyframes pcwcs0b {
   to {
-    transform: translateY(-100%);
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+
+  75% {
+    opacity: 0;
   }
 }
 
-@keyframes _1yq4ar7f {
+@keyframes pcwcs0c {
   from {
     transform: translateX(100%);
   }
 }
 
-@keyframes _1yq4ar7g {
+@keyframes pcwcs0e {
   to {
     transform: translateX(100%);
   }
 }
 
-._1yq4ar78 {
-  position: relative;
-}
-
-._1yq4ar79 {
-  color-scheme: light;
-}
-
-._1yq4ar7a {
-  color-scheme: dark;
-}
-
-::view-transition-group(._1yq4ar70) {
-  animation-duration: .32s;
-  animation-timing-function: cubic-bezier(.2, 0, 0, 1);
-}
-
-::view-transition-old(._1yq4ar70) {
-  animation-duration: .32s;
-  animation-timing-function: cubic-bezier(.2, 0, 0, 1);
-}
-
-::view-transition-new(._1yq4ar70) {
-  animation-duration: .32s;
-  animation-timing-function: cubic-bezier(.2, 0, 0, 1);
-}
-
-::view-transition-new(._1yq4ar72) {
-  animation-duration: .32s;
-  animation-timing-function: cubic-bezier(.2, 0, 0, 1);
-}
-
-::view-transition-old(._1yq4ar73) {
-  animation-duration: .32s;
-  animation-timing-function: cubic-bezier(.2, 0, 0, 1);
-}
-
-::view-transition-new(._1yq4ar74) {
-  animation-duration: .32s;
-  animation-timing-function: cubic-bezier(.2, 0, 0, 1);
-}
-
-::view-transition-old(._1yq4ar75) {
-  animation-duration: .32s;
-  animation-timing-function: cubic-bezier(.2, 0, 0, 1);
-}
-
-::view-transition-new(._1yq4ar76) {
-  animation-duration: .32s;
-  animation-timing-function: cubic-bezier(.2, 0, 0, 1);
-}
-
-::view-transition-old(._1yq4ar77) {
-  animation-duration: .32s;
-  animation-timing-function: cubic-bezier(.2, 0, 0, 1);
-}
-
-::view-transition-old(._1yq4ar71) {
-  animation-duration: .32s;
-  animation-timing-function: cubic-bezier(.2, 0, 0, 1);
-}
-
-::view-transition-new(._1yq4ar71) {
-  animation-duration: .32s;
-  animation-timing-function: cubic-bezier(.2, 0, 0, 1);
-}
-
-:root:active-view-transition-type(sanity-themer)::view-transition-group(*) {
-  animation-duration: .32s;
-  animation-timing-function: cubic-bezier(.2, 0, 0, 1);
-}
-
-:root:active-view-transition-type(sanity-themer)::view-transition-old(*) {
-  animation-duration: .32s;
-  animation-timing-function: cubic-bezier(.2, 0, 0, 1);
+::view-transition-new(.pcwcs05) {
+  animation: none;
 }
 
-:root:active-view-transition-type(sanity-themer)::view-transition-new(*) {
-  animation-duration: .32s;
-  animation-timing-function: cubic-bezier(.2, 0, 0, 1);
+::view-transition-old(.pcwcs05) {
+  display: none;
 }
 
-::view-transition-old(._1yq4ar70) {
+::view-transition-new(.pcwcs06) {
   object-fit: fill;
   block-size: 100%;
   inline-size: 100%;
 }
 
-::view-transition-new(._1yq4ar70) {
+::view-transition-old(.pcwcs06) {
   object-fit: fill;
   block-size: 100%;
   inline-size: 100%;
 }
 
-::view-transition-new(._1yq4ar72) {
-  animation-name: _1yq4ar7b;
-}
-
-::view-transition-old(._1yq4ar73) {
-  animation-name: _1yq4ar7c;
+::view-transition-new(.pcwcs09) {
+  object-fit: fill;
+  block-size: 100%;
+  inline-size: 100%;
+  animation-name: pcwcs08;
 }
 
-::view-transition-new(._1yq4ar74) {
-  animation-name: _1yq4ar7d;
+::view-transition-old(.pcwcs09) {
+  object-fit: fill;
+  block-size: 100%;
+  inline-size: 100%;
+  animation-name: pcwcs07;
 }
 
-::view-transition-old(._1yq4ar75) {
-  animation-name: _1yq4ar7e;
+::view-transition-new(.pcwcs0d) {
+  animation-name: pcwcs0c;
 }
 
-::view-transition-new(._1yq4ar76) {
-  animation-name: _1yq4ar7f;
+::view-transition-old(.pcwcs0f) {
+  animation-name: pcwcs0e;
 }
 
-::view-transition-old(._1yq4ar77) {
-  animation-name: _1yq4ar7g;
+::view-transition-new(.pcwcs0g) {
+  animation-name: pcwcs0a;
 }
 
-::view-transition-group(bgn4np0) {
-  z-index: 1;
+::view-transition-old(.pcwcs0h) {
+  animation-name: pcwcs0b;
 }
 
-::view-transition-group(bgn4np0) {
-  animation: none;
+:root:active-view-transition-type(sanity-themer)::view-transition-group(*) {
+  animation-duration: .32s;
+  animation-timing-function: cubic-bezier(.65, 0, .35, 1);
 }
 
-::view-transition-image-pair(bgn4np0) {
-  animation: none;
+:root:active-view-transition-type(pcwcs02)::view-transition-group(*) {
+  animation-duration: .48s;
 }
 
-::view-transition-old(bgn4np0) {
-  animation: none;
+:root:active-view-transition-type(pcwcs03)::view-transition-group(*) {
+  animation-duration: .48s;
 }
 
-::view-transition-new(bgn4np0) {
-  animation: none;
+.pcwcs0i {
+  position: relative;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  ::view-transition-group(._1yq4ar70) {
-    animation: none;
-  }
-
-  ::view-transition-group(._1yq4ar71) {
-    animation: none;
-  }
-
-  ::view-transition-group(._1yq4ar72) {
-    animation: none;
-  }
-
-  ::view-transition-group(._1yq4ar73) {
-    animation: none;
-  }
-
-  ::view-transition-group(._1yq4ar74) {
-    animation: none;
-  }
-
-  ::view-transition-group(._1yq4ar75) {
-    animation: none;
-  }
-
-  ::view-transition-group(._1yq4ar76) {
-    animation: none;
-  }
-
-  ::view-transition-group(._1yq4ar77) {
-    animation: none;
-  }
-
-  ::view-transition-group(bgn4np0) {
-    animation: none;
-  }
-
   :root:active-view-transition-type(sanity-themer)::view-transition-group(*) {
-    animation: none;
-  }
-
-  ::view-transition-image-pair(._1yq4ar70) {
-    animation: none;
-  }
-
-  ::view-transition-image-pair(._1yq4ar71) {
-    animation: none;
-  }
-
-  ::view-transition-image-pair(._1yq4ar72) {
-    animation: none;
-  }
-
-  ::view-transition-image-pair(._1yq4ar73) {
-    animation: none;
-  }
-
-  ::view-transition-image-pair(._1yq4ar74) {
-    animation: none;
-  }
-
-  ::view-transition-image-pair(._1yq4ar75) {
-    animation: none;
-  }
-
-  ::view-transition-image-pair(._1yq4ar76) {
-    animation: none;
-  }
-
-  ::view-transition-image-pair(._1yq4ar77) {
-    animation: none;
-  }
-
-  ::view-transition-image-pair(bgn4np0) {
-    animation: none;
-  }
-
-  :root:active-view-transition-type(sanity-themer)::view-transition-image-pair(*) {
-    animation: none;
-  }
-
-  ::view-transition-old(._1yq4ar70) {
-    animation: none;
-  }
-
-  ::view-transition-old(._1yq4ar71) {
-    animation: none;
-  }
-
-  ::view-transition-old(._1yq4ar72) {
-    animation: none;
-  }
-
-  ::view-transition-old(._1yq4ar73) {
-    animation: none;
-  }
-
-  ::view-transition-old(._1yq4ar74) {
-    animation: none;
-  }
-
-  ::view-transition-old(._1yq4ar75) {
-    animation: none;
-  }
-
-  ::view-transition-old(._1yq4ar76) {
-    animation: none;
-  }
-
-  ::view-transition-old(._1yq4ar77) {
-    animation: none;
-  }
-
-  ::view-transition-old(bgn4np0) {
-    animation: none;
+    animation: none !important;
   }
 
   :root:active-view-transition-type(sanity-themer)::view-transition-old(*) {
-    animation: none;
-  }
-
-  ::view-transition-new(._1yq4ar70) {
-    animation: none;
-  }
-
-  ::view-transition-new(._1yq4ar71) {
-    animation: none;
-  }
-
-  ::view-transition-new(._1yq4ar72) {
-    animation: none;
-  }
-
-  ::view-transition-new(._1yq4ar73) {
-    animation: none;
-  }
-
-  ::view-transition-new(._1yq4ar74) {
-    animation: none;
-  }
-
-  ::view-transition-new(._1yq4ar75) {
-    animation: none;
-  }
-
-  ::view-transition-new(._1yq4ar76) {
-    animation: none;
-  }
-
-  ::view-transition-new(._1yq4ar77) {
-    animation: none;
-  }
-
-  ::view-transition-new(bgn4np0) {
-    animation: none;
+    animation: none !important;
   }
 
   :root:active-view-transition-type(sanity-themer)::view-transition-new(*) {
-    animation: none;
+    animation: none !important;
   }
 }
 
@@ -722,24 +465,61 @@
   display: inline-block;
 }
 
+.bgn4np1 {
+  flex: none;
+}
+
+.bgn4np2 {
+  position: relative;
+}
+
+.bgn4np3 {
+  container: bgn4np0 / inline-size;
+}
+
+.bgn4np4 {
+  z-index: 1;
+  cursor: col-resize;
+  touch-action: none;
+  width: 7px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -3px;
+}
+
+.bgn4np4:after {
+  content: "";
+  background: var(--card-focus-ring-color);
+  opacity: 0;
+  width: 3px;
+  transition: opacity .1s;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 2px;
+}
+
+.bgn4np4:focus {
+  outline: none;
+}
+
+.bgn4np4:hover:after, .bgn4np4:focus-visible:after, .bgn4np4[data-dragging="true"]:after {
+  opacity: 1;
+}
+
 .twjqgh0 {
   grid-template-columns: minmax(0, 1fr);
   gap: 16px;
   display: grid;
 }
 
-@container bgn4np1 (width >= 260px) {
+@container bgn4np0 (width >= 260px) {
   .twjqgh0 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
-@container bgn4np1 (width >= 480px) {
-  .twjqgh0 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
 .c2pqej0 {
   min-width: 0;
 }

package/dist/index.d.ts

@@ -1,6 +1,71 @@
-import { n as SchemeThemeOptions, t as BuildThemeOptions } from "./options-CU-emn_p.js";
 import { ColorHueKey, ColorTintKey } from "@sanity/color";
 import { RootTheme, ThemeColorSchemeKey } from "@sanity/ui/theme";
+/**
+ * The colors of one color scheme, for {@link BuildThemeOptions}. Every color
+ * is a hex color (`#rgb` or `#rrggbb`), and everything is optional: omitted
+ * options fall back to the stock Studio colors, so an empty object reproduces
+ * the stock scheme exactly.
+ *
+ * @public
+ */
+interface SchemeThemeOptions {
+  /**
+   * The accent color — the brand color of the scheme. Replaces the `blue`
+   * scale of the palette, which Sanity UI uses for primary buttons, focus
+   * rings and links.
+   *
+   * The stock accent is `#556bfc` (`blue/500` of `@sanity/color`).
+   */
+  accent?: string;
+  /**
+   * The background of the scheme — every other color of the scheme is
+   * blended onto it. The dark scheme's background replaces `black` in the
+   * palette and the light scheme's replaces `white`.
+   *
+   * It is kept far enough from the text and accent colors to stay usable:
+   * a dark background is made darker until it has enough contrast with them
+   * (it can never be lighter than either), and a light background can never
+   * be darker than either.
+   *
+   * The stock backgrounds are `#0d0e12` (dark) and `#ffffff` (light).
+   */
+  background?: string;
+  /**
+   * How strongly text and borders separate from the accent color, between 15
+   * and 100. The default is 85, which uses the text color as-is. Above 85 the
+   * text scale loses its tint until it is fully neutral at 100 — a high
+   * contrast scheme with no mixing of the text and accent colors. Below 85
+   * more and more of the accent color mixes into the text scale, giving text
+   * and borders more color, until the scale fully adopts the accent hue and
+   * saturation at 15.
+   */
+  contrast?: number;
+  /**
+   * The text color. Replaces the `gray` scale of the palette, which Sanity UI
+   * uses for text, icons, borders and neutral surfaces. When omitted, it is
+   * derived from the accent color: a mostly desaturated version of it, the
+   * way the stock `gray` scale carries a hint of the stock blue.
+   *
+   * The stock text color is `#727892` (`gray/500` of `@sanity/color`).
+   */
+  text?: string;
+}
+/**
+ * Options for {@link buildTheme} and {@link buildPalette}: the colors of the
+ * dark and the light scheme, each with its own accent, text, background and
+ * contrast — so the two schemes can differ in more than their background.
+ * Both schemes are optional, and so is every color: whatever is omitted
+ * falls back to the stock Studio colors, so `buildTheme({})` matches
+ * `buildTheme()` from `@sanity/ui/theme` exactly.
+ *
+ * @public
+ */
+interface BuildThemeOptions {
+  /** The colors of the dark scheme */
+  dark?: SchemeThemeOptions;
+  /** The colors of the light scheme */
+  light?: SchemeThemeOptions;
+}
 /**
  * A color palette generated by {@link buildPalette}: the `palette` config of
  * `buildTheme` from `@sanity/ui/theme`, with every color as a hex string.

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/theme/buildPalette.ts","../src/theme/buildTheme.ts","../src/theme/presets.ts"],"mappings":";;;;;;;;;KA6CY;EAAyB;EAAe;IAAiB,OACnE,aACA,OAAO;;;;;;KAQG,yBAAyB,OAAO,qBAAqB;;;;;;;;;;;;;;;;;iBAkBjD,aAAa,UAAS,oBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCvB/C,WAAW,UAAS,oBAAyB;;;;;;;UC1C5C;EACf;EACA;;EAEA,SAAS;;;;;;;;;;;;;;;;;cA6BE,SAAS"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/theme/options.ts","../src/theme/buildPalette.ts","../src/theme/buildTheme.ts","../src/theme/presets.ts"],"mappings":";;;;;;;;;;UAciB;;;;;;;;EAQf;;;;;;;;;;;;;EAcA;;;;;;;;;;EAWA;;;;;;;;;EAUA;;;;;;;;;;;;UAae;;EAEf,OAAO;;EAEP,QAAQ;;;;;;;;KC7BE;EAAyB;EAAe;IAAiB,OACnE,aACA,OAAO;;;;;;KAQG,yBAAyB,OAAO,qBAAqB;;;;;;;;;;;;;;;;;iBAkBjD,aAAa,UAAS,oBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBCvB/C,WAAW,UAAS,oBAAyB;;;;;;;UC1C5C;EACf;EACA;;EAEA,SAAS;;;;;;;;;;;;;;;;;cA6BE,SAAS"}