@patternmode/swatch 0.4.1 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{.patternmode-swatch{--patternmode-swatch-size:2rem;--patternmode-swatch-fill:#e3e1dc;--patternmode-swatch-radius:999px;aspect-ratio:1;border-radius:var(--patternmode-swatch-radius);color:#fff;height:var(--patternmode-swatch-size);vertical-align:middle;min-inline-size:0;width:var(--patternmode-swatch-size);border:0;justify-content:center;align-items:center;margin:0;padding:0;transition:box-shadow .14s,opacity .14s,transform .14s;display:inline-flex;position:relative;box-shadow:0 1px 2px #1118271a}.patternmode-swatch[data-tone=light]{color:#1d1d1b}.patternmode-swatch[data-shape=pill]{--patternmode-swatch-radius:999px;aspect-ratio:auto;width:calc(var(--patternmode-swatch-size) * 3)}.patternmode-swatch[data-shape=square]{--patternmode-swatch-radius:7px}.patternmode-swatch[data-raised=true]{box-shadow:0 1px 2px #1118271a, 0 0 0 2px var(--surface,#fff)}.patternmode-swatch[data-selected=true][data-show-ring=true]{box-shadow:0 1px 2px #1118271a, 0 0 0 2px var(--surface,#fff), 0 0 0 4px var(--accent,#315c4b)}.patternmode-swatch[data-unavailable=true]{opacity:.5}.patternmode-swatch__fill,.patternmode-swatch__media,.patternmode-swatch__scrim{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.patternmode-swatch__fill{background:var(--patternmode-swatch-fill)}.patternmode-swatch__media>*{object-fit:inherit;object-position:inherit;width:100%;height:100%;display:block}.patternmode-swatch__scrim{pointer-events:none;background:linear-gradient(#0000 0%,#0003 100%)}.patternmode-swatch__icon{justify-content:center;align-items:center;display:inline-flex;position:absolute;inset:0}.patternmode-swatch__icon svg{stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.4px;width:48%;height:48%;display:block}.patternmode-swatch__slash{background:currentColor;border-radius:999px;width:112%;height:2px;position:absolute;transform:rotate(-45deg)}.patternmode-swatch__remove{color:var(--surface,#fff);cursor:pointer;opacity:0;background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;width:2.75rem;height:2.75rem;padding:0;transition:opacity .14s;display:inline-flex;position:absolute;top:-1.1rem;right:-1.1rem}.patternmode-swatch__remove:before{background:var(--ink,#1d1d1b);border-radius:inherit;content:"";width:1.25rem;height:1.25rem;transition:background .14s;position:absolute}.patternmode-swatch__remove:focus-visible{opacity:1}@media (hover:hover){.patternmode-swatch:hover .patternmode-swatch__remove{opacity:1}.patternmode-swatch__remove:hover:before{background:var(--accent,#315c4b)}}.patternmode-swatch__remove:focus-visible{outline:2px solid var(--accent,#315c4b);outline-offset:2px}.patternmode-swatch__remove svg{stroke:currentColor;stroke-linecap:round;stroke-width:2px;z-index:1;width:.8rem;height:.8rem}@media (prefers-reduced-motion:reduce){.patternmode-swatch,.patternmode-swatch__remove,.patternmode-swatch__remove:before{transition:none}}.patternmode-distribution-bar,.patternmode-distribution-display{min-inline-size:0;border:0;gap:10px;width:100%;margin:0;padding:0;display:grid}.patternmode-distribution-bar__track{width:100%;
|
|
1
|
+
@layer components{.patternmode-swatch{--patternmode-swatch-size:2rem;--patternmode-swatch-fill:#e3e1dc;--patternmode-swatch-radius:999px;aspect-ratio:1;border-radius:var(--patternmode-swatch-radius);color:#fff;height:var(--patternmode-swatch-size);vertical-align:middle;min-inline-size:0;width:var(--patternmode-swatch-size);border:0;justify-content:center;align-items:center;margin:0;padding:0;transition:box-shadow .14s,opacity .14s,transform .14s;display:inline-flex;position:relative;box-shadow:0 1px 2px #1118271a}.patternmode-swatch[data-tone=light]{color:#1d1d1b}.patternmode-swatch[data-shape=pill]{--patternmode-swatch-radius:999px;aspect-ratio:auto;width:calc(var(--patternmode-swatch-size) * 3)}.patternmode-swatch[data-shape=square]{--patternmode-swatch-radius:7px}.patternmode-swatch[data-raised=true]{box-shadow:0 1px 2px #1118271a, 0 0 0 2px var(--surface,#fff)}.patternmode-swatch[data-selected=true][data-show-ring=true]{box-shadow:0 1px 2px #1118271a, 0 0 0 2px var(--surface,#fff), 0 0 0 4px var(--accent,#315c4b)}.patternmode-swatch[data-unavailable=true]{opacity:.5}.patternmode-swatch__fill,.patternmode-swatch__media,.patternmode-swatch__scrim{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.patternmode-swatch__fill{background:var(--patternmode-swatch-fill)}.patternmode-swatch__media>*{object-fit:inherit;object-position:inherit;width:100%;height:100%;display:block}.patternmode-swatch__scrim{pointer-events:none;background:linear-gradient(#0000 0%,#0003 100%)}.patternmode-swatch__icon{justify-content:center;align-items:center;display:inline-flex;position:absolute;inset:0}.patternmode-swatch__icon svg{stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.4px;width:48%;height:48%;display:block}.patternmode-swatch__slash{background:currentColor;border-radius:999px;width:112%;height:2px;position:absolute;transform:rotate(-45deg)}.patternmode-swatch__remove{color:var(--surface,#fff);cursor:pointer;opacity:0;background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;width:2.75rem;height:2.75rem;padding:0;transition:opacity .14s;display:inline-flex;position:absolute;top:-1.1rem;right:-1.1rem}.patternmode-swatch__remove:before{background:var(--ink,#1d1d1b);border-radius:inherit;content:"";width:1.25rem;height:1.25rem;transition:background .14s;position:absolute}.patternmode-swatch__remove:focus-visible{opacity:1}@media (hover:hover){.patternmode-swatch:hover .patternmode-swatch__remove{opacity:1}.patternmode-swatch__remove:hover:before{background:var(--accent,#315c4b)}}.patternmode-swatch__remove:focus-visible{outline:2px solid var(--accent,#315c4b);outline-offset:2px}.patternmode-swatch__remove svg{stroke:currentColor;stroke-linecap:round;stroke-width:2px;z-index:1;width:.8rem;height:.8rem}@media (prefers-reduced-motion:reduce){.patternmode-swatch,.patternmode-swatch__remove,.patternmode-swatch__remove:before{transition:none}}.patternmode-distribution-bar,.patternmode-distribution-display{min-inline-size:0;border:0;gap:10px;width:100%;margin:0;padding:0;display:grid}.patternmode-distribution-bar__track{height:var(--patternmode-distribution-height,40px);width:100%;position:relative}.patternmode-distribution-bar .patternmode-distribution-bar__track{touch-action:none}.patternmode-distribution-bar__segments{border:1px solid var(--border-soft,#1118271f);border-radius:var(--patternmode-distribution-radius,999px);width:100%;height:100%;display:flex;overflow:hidden}.patternmode-distribution-bar__segment{background:var(--patternmode-distribution-segment-color);border:0;min-width:0;height:100%;margin:0;padding:0;transition:width .48s cubic-bezier(.2,0,0,1)}button.patternmode-distribution-bar__segment{cursor:pointer}button.patternmode-distribution-bar__segment:focus-visible{outline:2px solid var(--accent,#315c4b);outline-offset:-2px;z-index:2}.patternmode-distribution-bar__segment[data-selected=true]{box-shadow:inset 0 0 0 2px var(--accent,#315c4b);z-index:2}@media (prefers-reduced-motion:reduce){.patternmode-distribution-bar__segment{transition:none}}.patternmode-distribution-bar__segment--empty{background-color:var(--surface-soft,#f7f5f0);background-image:repeating-linear-gradient(45deg, transparent, transparent 3px, var(--border-soft,#1118271f) 3px, var(--border-soft,#1118271f) 4px)}.patternmode-distribution-bar__segment+.patternmode-distribution-bar__segment{box-shadow:inset 1px 0 #fff9}.patternmode-distribution-bar__handle{cursor:ew-resize;z-index:1;background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;width:2.75rem;height:2.75rem;padding:0;display:inline-flex;position:absolute;top:calc(50% - 1.375rem)}.patternmode-distribution-bar__handle:before{background:var(--surface,#fff);content:"";border-radius:999px;width:.62rem;height:.62rem;transition:box-shadow .12s,transform .12s;box-shadow:0 1px 4px #1118272e,0 0 0 1px #11182733}.patternmode-distribution-bar__handle:focus-visible{outline:2px solid var(--accent,#315c4b);outline-offset:-4px}@media (hover:hover){.patternmode-distribution-bar__handle:hover:before{transform:scale(1.15);box-shadow:0 5px 14px #1118274d,0 0 0 1px #11182738}}.patternmode-distribution-bar__legend{flex-wrap:wrap;gap:8px 14px;display:flex}.patternmode-distribution-bar__legend>span{color:var(--muted,#595853);align-items:center;gap:6px;font-size:.68rem;font-weight:500;display:inline-flex}.patternmode-distribution-bar__swatch{background:var(--patternmode-distribution-segment-color);border-radius:999px;width:.55rem;height:.55rem;display:inline-flex}.patternmode-distribution-bar__swatch--empty{background-color:var(--surface-soft,#f7f5f0);background-image:repeating-linear-gradient(45deg, transparent, transparent 2px, var(--border-soft,#1118271f) 2px, var(--border-soft,#1118271f) 3px);box-shadow:inset 0 0 0 1px var(--border-soft,#1118271f)}@media (prefers-reduced-motion:reduce){.patternmode-distribution-bar__handle:before{transition:none}}}
|