@sanity/themer 0.5.0 → 0.7.0

package/README.md

@@ -53,7 +53,7 @@ const theme = buildTheme(verdant.options)
 
 ## Studio tool
 
-`@sanity/themer/tool` adds a themer sidebar to the Studio for these themes. It lists the configured theme, the presets and your own themes, each previewed as a tiny Studio in both color schemes, and picking one applies it live to the whole Studio while you browse around — in the appearance the Studio is set to or, with the split-screen toggle in the sidebar header, twice side by side: light on the left, dark on the right. Your own themes are edited scheme by scheme — a light mode and a dark mode card with accent/text/background pickers and a contrast slider each, the one the Studio is showing marked as active — add one from scratch, duplicate a preset to start from it, or take the colors from an image: its palette is read on device (the image is drawn onto a canvas and its vibrant and muted colors extracted right there, nothing is uploaded), the vibrant color becomes the accent (adjusted until a button label reads on it), the muted one the text color and the light and dark muted colors tint the backgrounds, and a row of variants previews the theme built around each swatch instead — with an "I'm feeling lucky" button that picks an interesting one. Themes can be removed and restored, and a dialog shows the `buildTheme` snippet that makes the applied theme permanent:
+`@sanity/themer/tool` adds a themer sidebar to the Studio for these themes. It lists the configured theme, the presets and your own themes, each previewed as a tiny Studio in both color schemes, and picking one applies it live to the whole Studio while you browse around — in the appearance the Studio is set to or, with the split-screen toggle in the sidebar header, twice: the Studio next to the sidebar keeps the appearance it is set to, and a copy in the opposite scheme slides in from off screen on the far side (or on top, on small screens, where the sidebar covers the Studio instead of standing next to it), through React's `ViewTransition` — which is why the tool requires React 19.3. The cards drag into any order (or move from their menu), which sticks between sessions, and a theme's menu copies it as a short code to share — paste a code into the list, or add it through the paste button, to get the theme in another Studio. Your own themes are edited scheme by scheme — a light mode and a dark mode card with accent/text/background pickers and a contrast slider each, the one the Studio is showing marked as active — add one from scratch, duplicate a preset to start from it, or take the colors from an image: its palette is read on device (the image is drawn onto a canvas and its vibrant and muted colors extracted right there, nothing is uploaded), the vibrant color becomes the accent (adjusted until a button label reads on it), the muted one the text color and the light and dark muted colors tint the backgrounds, and a row of variants previews the theme built around each swatch instead — with an "I'm feeling lucky" button that picks an interesting one. Themes can be removed and restored, and a dialog shows the `buildTheme` snippet that makes the applied theme permanent:
 
 ```ts
 import {themerTool} from '@sanity/themer/tool'
@@ -67,6 +67,8 @@ export default defineConfig({
 
 If the Studio already uses a `buildTheme` theme, pass the same options so the tool starts editing from them: `themerTool({config: {light: {accent: '#1cb485'}}})`.
 
+The tool's styles are a stylesheet, `@sanity/themer/bundle.css`, that `@sanity/themer/tool` imports itself — the Studio's bundler picks it up, nothing to add to the config. The sidebar slides in from the edge (and closing it ends the split preview), its header takes the height of the Studio navbar so the two line up, and with `prefers-reduced-motion` the sidebar and the split preview switch layouts without animating.
+
 ## Migrating from themer.sanity.build
 
 The npm migration path off the hosted Themer service ([themer.sanity.build](https://themer.sanity.build)) is [`@sanity/themer-legacy`](https://www.npmjs.com/package/@sanity/themer-legacy): the exact same generator, running locally.

package/dist/bundle-css.d.ts

@@ -0,0 +1,2 @@
+// Type declarations for `bundle.css` and its no-op JS shim.
+export {}

package/dist/bundle-css.js

@@ -0,0 +1,4 @@
+// No-op shim for `bundle.css`, resolved by the `node`/`default` conditions of the
+// conditional CSS export so the self-referential import is harmless in runtimes that cannot
+// load `.css` files. Intentionally has no JS syntax: it parses as both CommonJS and an ES
+// module, regardless of the package `type`.

package/dist/bundle.css

@@ -0,0 +1 @@
+._1o50s7t0{scrollbar-gutter:stable}._1aa9huua{aspect-ratio:16/9;position:relative;overflow:hidden}._1aa9huub{background:var(--_1aa9huu0);flex-direction:column;display:flex;position:absolute;inset:0}._1aa9huud{clip-path:polygon(58% 0,100% 0,100% 100%,42% 100%)}._1aa9huue{border-bottom:1px solid var(--_1aa9huu3);flex:none;align-items:center;gap:5px;height:18%;padding:0 5%;display:flex}._1aa9huuf{background:var(--_1aa9huu4);border-radius:2px;flex:none;width:8px;height:8px}._1aa9huug{flex:1}._1aa9huuh{background:var(--_1aa9huu5);border-radius:50%;flex:none;width:8px;height:8px}._1aa9huui{flex:1;min-height:0;display:flex}._1aa9huuj{border-right:1px solid var(--_1aa9huu3);flex-direction:column;flex:none;width:36%;display:flex}._1aa9huuk{flex:none;align-items:center;height:18%;padding:0 9%;display:flex}._1aa9huuk[data-selected=true]{background:var(--_1aa9huu6)}._1aa9huul{flex-direction:column;flex:1;min-width:0;display:flex}._1aa9huum{flex-direction:column;flex:1;gap:7px;min-height:0;padding:9% 8% 0;display:flex;overflow:hidden}._1aa9huun{flex-direction:column;flex:none;gap:3px;display:flex}._1aa9huuo{background:var(--_1aa9huu8);height:12px;box-shadow:inset 0 0 0 1px var(--_1aa9huu9);border-radius:3px}._1aa9huup{border-top:1px solid var(--_1aa9huu3);flex:none;justify-content:flex-end;align-items:center;height:20%;padding:0 8%;display:flex}._1aa9huuq{background:var(--_1aa9huu4);border-radius:3px;width:32%;height:50%}._1aa9huur{border-radius:2px;flex:none;height:4px}._1aa9huus{background:var(--_1aa9huu1)}._1aa9huut{background:var(--_1aa9huu2)}._1aa9huuu{background:var(--_1aa9huu7)}._1vdkp0v0{opacity:.6}._17s80v42{grid-template-columns:repeat(3,24px);grid-auto-rows:24px;gap:4px;display:grid}._17s80v42[data-with-image=true]{grid-template-columns:52px repeat(3,24px)}._17s80v43{object-fit:cover;width:52px;height:52px;box-shadow:inset 0 0 0 1px var(--card-border-color);border-radius:3px;grid-row:span 2;display:block}._17s80v44{box-shadow:inset 0 0 0 1px var(--card-border-color);border-radius:3px;display:block}._17s80v44[data-empty=true]{background:repeating-linear-gradient(-45deg, transparent 0 3px, var(--card-border-color) 3px 4px)}._17s80v45{scroll-snap-type:x mandatory;scrollbar-width:thin;gap:8px;margin:0 -12px;padding:0 12px;scroll-padding-left:12px;display:flex;overflow-x:auto}._17s80v46{appearance:none;box-sizing:border-box;width:calc(var(--_17s80v40) + 8px);color:inherit;font:inherit;text-align:center;cursor:pointer;scroll-snap-align:start;background:0 0;border:0;flex:none;margin:0;padding:0;display:block}._17s80v46:focus{outline:none}._17s80v47{box-sizing:border-box;width:calc(var(--_17s80v40) + 8px);height:calc(var(--_17s80v40) * 9 / 16 + 8px);border-radius:7px;padding:4px;transition:box-shadow .1s;display:block;overflow:hidden}._17s80v46:hover ._17s80v47{box-shadow:inset 0 0 0 2px var(--card-border-color)}._17s80v46[aria-pressed=true] ._17s80v47{box-shadow:inset 0 0 0 2px var(--card-focus-ring-color)}._17s80v46:focus-visible ._17s80v47{outline:2px solid var(--card-focus-ring-color);outline-offset:-2px}._17s80v48{width:144px;transform:scale(var(--_17s80v41));transform-origin:0 0;display:block}.os3rj0{box-sizing:border-box;border:1px solid var(--card-border-color);cursor:pointer;background:0 0;border-radius:4px;flex:none;width:33px;height:33px;padding:0}.os3rj0::-webkit-color-swatch-wrapper{padding:0}.os3rj0::-webkit-color-swatch{border:none;border-radius:3px}.os3rj0::-moz-color-swatch{border:none;border-radius:3px}.os3rj1{width:100%;accent-color:var(--card-focus-ring-color);margin:0;display:block}.os3rj2{min-width:0}._1wsn7880{position:relative}._1wsn7881{appearance:none;box-sizing:border-box;width:100%;color:inherit;font:inherit;text-align:center;cursor:pointer;background:0 0;border:0;margin:0;padding:0;display:block}._1wsn7881:focus{outline:none}._1wsn7882{border-radius:10px;padding:4px;transition:box-shadow .1s;display:block}._1wsn7881:hover ._1wsn7882{box-shadow:inset 0 0 0 2px var(--card-border-color)}._1wsn7881[aria-pressed=true] ._1wsn7882{box-shadow:inset 0 0 0 2px var(--card-focus-ring-color)}._1wsn7881:focus-visible ._1wsn7882{outline:2px solid var(--card-focus-ring-color);outline-offset:-2px}._1wsn7883{opacity:0;transition:opacity .1s;position:absolute;top:10px;right:10px}._1wsn7880:hover ._1wsn7883,._1wsn7880:focus-within ._1wsn7883,._1wsn7883[data-visible=true]{opacity:1}._1wsn7884{display:inline-block}.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}.twjqgh0{grid-template-columns:minmax(0,1fr);gap:16px;display:grid}@container bgn4np1 (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}@keyframes _1yq4ar7b{0%{transform:translate(-100%)}}@keyframes _1yq4ar7c{to{transform:translate(-100%)}}@keyframes _1yq4ar7d{0%{transform:translateY(-100%)}}@keyframes _1yq4ar7e{to{transform:translateY(-100%)}}@keyframes _1yq4ar7f{0%{transform:translate(100%)}}@keyframes _1yq4ar7g{to{transform:translate(100%)}}._1yq4ar78{position:relative}._1yq4ar79{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}._1yq4ar7a{--lightningcss-light: ;--lightningcss-dark:initial;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)}::view-transition-old(._1yq4ar70){object-fit:fill;block-size:100%;inline-size:100%}::view-transition-new(._1yq4ar70){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(._1yq4ar74){animation-name:_1yq4ar7d}::view-transition-old(._1yq4ar75){animation-name:_1yq4ar7e}::view-transition-new(._1yq4ar76){animation-name:_1yq4ar7f}::view-transition-old(._1yq4ar77){animation-name:_1yq4ar7g}::view-transition-group(bgn4np0){z-index:1}::view-transition-group(bgn4np0){animation:none}::view-transition-image-pair(bgn4np0){animation:none}::view-transition-old(bgn4np0){animation:none}::view-transition-new(bgn4np0){animation:none}@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}::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}::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}::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}}