lookbook 1.5.3 → 2.0.0.beta.0

data/public/lookbook-assets/css/lookbook.css

@@ -27,7 +27,6 @@ hr {
 }
 
 abbr:where([title]) {
-  -webkit-text-decoration: underline dotted;
   text-decoration: underline dotted;
 }
 
@@ -38,7 +37,6 @@ h1, h2, h3, h4, h5, h6 {
 
 a {
   color: inherit;
-  -webkit-text-decoration: inherit;
   text-decoration: inherit;
 }
 
@@ -373,7 +371,7 @@ pre[class*="language-"] {
   background-color: var(--lookbook-scrollbar);
   background-clip: content-box;
   border-radius: 9999px;
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
@@ -1403,29 +1401,27 @@ pre[class*="language-"] {
   background-color: rgb(254 252 232 / var(--tw-bg-opacity));
 }
 
-[data-component="display-options-field"] [type="text"], [data-component="display-options-field"] [type="email"], [data-component="display-options-field"] [type="url"], [data-component="display-options-field"] [type="password"], [data-component="display-options-field"] [type="number"], [data-component="display-options-field"] [type="date"], [data-component="display-options-field"] [type="datetime-local"], [data-component="display-options-field"] [type="month"], [data-component="display-options-field"] [type="search"], [data-component="display-options-field"] [type="tel"], [data-component="display-options-field"] [type="time"], [data-component="display-options-field"] [type="week"], [data-component="display-options-field"] textarea, [data-component="display-options-field"] select {
-  padding: .26rem .6rem;
-  font-size: .8rem;
-  line-height: 1.1rem;
-}
-
 [data-component="display-options-field"] label {
   cursor: pointer;
   color: var(--lookbook-input-text);
   font-size: .82rem;
 }
 
-[data-component="display-options-field"] select {
-  background-position: right .4rem center;
-  background-size: 1.2em 1.2em;
-  border-radius: .375rem;
-  padding-right: 1.5rem;
+[data-component="embed-code-dropdown"] [data-component="code"] {
+  padding: 0;
+}
+
+[data-component="embed-code-dropdown"] pre.code.highlight {
+  white-space: normal;
+  padding: 0;
+  font-size: 11px;
+  overflow: hidden;
 }
 
 [data-component="icon"] {
   flex: none;
   line-height: 1;
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
   display: block;
@@ -1455,7 +1451,7 @@ pre[class*="language-"] {
   align-items: center;
   padding-top: .25rem;
   padding-bottom: .25rem;
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
   display: flex;
@@ -1620,7 +1616,7 @@ pre[class*="language-"] {
   -webkit-user-select: none;
   user-select: none;
   color: var(--lookbook-viewport-handle-icon-stroke);
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
@@ -1720,6 +1716,15 @@ input[type="color"]::-webkit-color-swatch {
   border-radius: .5rem;
 }
 
+select.compact {
+  background-position: right .4rem center;
+  background-size: 1.2em 1.2em;
+  border-radius: .375rem;
+  padding: .26rem 1.5rem .26rem .6rem;
+  font-size: .8rem;
+  line-height: 1.1rem;
+}
+
 .pointer-events-none {
   pointer-events: none;
 }
@@ -1748,32 +1753,36 @@ input[type="color"]::-webkit-color-swatch {
   position: sticky;
 }
 
-.-inset-px {
-  inset: -1px;
-}
-
 .inset-0 {
   inset: 0;
 }
 
-.-bottom-px {
-  bottom: -1px;
+.-inset-px {
+  inset: -1px;
 }
 
-.-left-px {
-  left: -1px;
+.top-0 {
+  top: 0;
 }
 
-.-top-px {
-  top: -1px;
+.right-0 {
+  right: 0;
 }
 
 .bottom-0 {
   bottom: 0;
 }
 
-.right-0 {
-  right: 0;
+.top-\[40px\] {
+  top: 40px;
+}
+
+.top-\[39px\] {
+  top: 39px;
+}
+
+.top-1\/2 {
+  top: 50%;
 }
 
 .right-3 {
@@ -1784,44 +1793,49 @@ input[type="color"]::-webkit-color-swatch {
   right: 18px;
 }
 
-.top-0 {
-  top: 0;
+.-top-px {
+  top: -1px;
 }
 
-.top-1\/2 {
-  top: 50%;
+.-left-px {
+  left: -1px;
+}
+
+.top-\[-1px\] {
+  top: -1px;
 }
 
 .top-\[2px\] {
   top: 2px;
 }
 
-.top-\[39px\] {
-  top: 39px;
+.-bottom-px {
+  bottom: -1px;
 }
 
-.top-\[40px\] {
-  top: 40px;
+.z-50 {
+  z-index: 50;
 }
 
-.\!z-40 {
-  z-index: 40 !important;
+.z-\[-1\] {
+  z-index: -1;
 }
 
-.z-0 {
-  z-index: 0;
+.\!z-40 {
+  z-index: 40 !important;
 }
 
 .z-10 {
   z-index: 10;
 }
 
-.z-50 {
-  z-index: 50;
+.z-0 {
+  z-index: 0;
 }
 
-.z-\[-1\] {
-  z-index: -1;
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .mx-8 {
@@ -1829,33 +1843,32 @@ input[type="color"]::-webkit-color-swatch {
   margin-right: 2rem;
 }
 
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
+.mt-3 {
+  margin-top: .75rem;
 }
 
-.-ml-3 {
-  margin-left: -.75rem;
+.mt-2 {
+  margin-top: .5rem;
 }
 
-.mb-2 {
-  margin-bottom: .5rem;
+.mb-8 {
+  margin-bottom: 2rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
+.mb-2 {
+  margin-bottom: .5rem;
 }
 
-.mb-6 {
-  margin-bottom: 1.5rem;
+.mt-8 {
+  margin-top: 2rem;
 }
 
-.mb-8 {
-  margin-bottom: 2rem;
+.mt-6 {
+  margin-top: 1.5rem;
 }
 
-.mb-\[-2px\] {
-  margin-bottom: -2px;
+.mt-12 {
+  margin-top: 3rem;
 }
 
 .ml-2 {
@@ -1866,56 +1879,64 @@ input[type="color"]::-webkit-color-swatch {
   margin-left: auto;
 }
 
-.mr-0 {
-  margin-right: 0;
+.mr-2 {
+  margin-right: .5rem;
 }
 
-.mr-0\.5 {
-  margin-right: .125rem;
+.mb-4 {
+  margin-bottom: 1rem;
 }
 
 .mr-1 {
   margin-right: .25rem;
 }
 
-.mr-1\.5 {
-  margin-right: .375rem;
+.mr-6 {
+  margin-right: 1.5rem;
 }
 
-.mr-2 {
-  margin-right: .5rem;
+.mb-3 {
+  margin-bottom: .75rem;
 }
 
-.mr-6 {
-  margin-right: 1.5rem;
+.mt-\[-2px\] {
+  margin-top: -2px;
 }
 
-.mr-auto {
-  margin-right: auto;
+.-mt-px {
+  margin-top: -1px;
 }
 
-.mt-1 {
-  margin-top: .25rem;
+.mb-6 {
+  margin-bottom: 1.5rem;
 }
 
-.mt-12 {
-  margin-top: 3rem;
+.-ml-3 {
+  margin-left: -.75rem;
 }
 
-.mt-2 {
-  margin-top: .5rem;
+.mr-auto {
+  margin-right: auto;
 }
 
-.mt-3 {
-  margin-top: .75rem;
+.\!ml-2 {
+  margin-left: .5rem !important;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
+.mb-\[-2px\] {
+  margin-bottom: -2px;
 }
 
-.mt-8 {
-  margin-top: 2rem;
+.mr-1\.5 {
+  margin-right: .375rem;
+}
+
+.mr-0\.5 {
+  margin-right: .125rem;
+}
+
+.mr-0 {
+  margin-right: 0;
 }
 
 .\!block {
@@ -1958,56 +1979,52 @@ input[type="color"]::-webkit-color-swatch {
   display: none;
 }
 
-.\!h-auto {
-  height: auto !important;
-}
-
-.h-10 {
-  height: 2.5rem;
+.h-screen {
+  height: 100vh;
 }
 
-.h-3 {
-  height: .75rem;
+.h-full {
+  height: 100%;
 }
 
-.h-3\.5 {
-  height: .875rem;
+.h-\[calc\(100\%_-_40px\)\] {
+  height: calc(100% - 40px);
 }
 
-.h-4 {
-  height: 1rem;
+.h-\[calc\(100vh_-_2\.5rem\)\] {
+  height: calc(100vh - 2.5rem);
 }
 
-.h-5 {
-  height: 1.25rem;
+.h-\[calc\(100vh_-_40px\)\] {
+  height: calc(100vh - 40px);
 }
 
 .h-6 {
   height: 1.5rem;
 }
 
-.h-\[9px\] {
-  height: 9px;
+.h-5 {
+  height: 1.25rem;
 }
 
-.h-\[calc\(100\%_-_40px\)\] {
-  height: calc(100% - 40px);
+.h-3\.5 {
+  height: .875rem;
 }
 
-.h-\[calc\(100vh_-_2\.5rem\)\] {
-  height: calc(100vh - 2.5rem);
+.h-3 {
+  height: .75rem;
 }
 
-.h-\[calc\(100vh_-_40px\)\] {
-  height: calc(100vh - 40px);
+.h-\[9px\] {
+  height: 9px;
 }
 
-.h-full {
-  height: 100%;
+.h-10 {
+  height: 2.5rem;
 }
 
-.h-screen {
-  height: 100vh;
+.h-4 {
+  height: 1rem;
 }
 
 .max-h-full {
@@ -2018,68 +2035,68 @@ input[type="color"]::-webkit-color-swatch {
   min-height: 0;
 }
 
-.w-11 {
-  width: 2.75rem;
+.w-full {
+  width: 100%;
 }
 
-.w-3 {
-  width: .75rem;
+.w-\[140px\] {
+  width: 140px;
 }
 
-.w-3\.5 {
-  width: .875rem;
+.w-screen {
+  width: 100vw;
 }
 
-.w-4 {
-  width: 1rem;
+.w-11 {
+  width: 2.75rem;
 }
 
 .w-5 {
   width: 1.25rem;
 }
 
-.w-\[140px\] {
-  width: 140px;
+.w-\[320px\] {
+  width: 320px;
 }
 
-.w-\[9px\] {
-  width: 9px;
+.w-3\.5 {
+  width: .875rem;
 }
 
-.w-full {
-  width: 100%;
+.w-3 {
+  width: .75rem;
 }
 
-.w-screen {
-  width: 100vw;
+.w-\[9px\] {
+  width: 9px;
 }
 
-.min-w-0 {
-  min-width: 0;
+.w-4 {
+  width: 1rem;
 }
 
 .min-w-\[180px\] {
   min-width: 180px;
 }
 
-.max-w-\[420px\] {
-  max-width: 420px;
+.min-w-0 {
+  min-width: 0;
 }
 
-.max-w-none {
-  max-width: none;
+.max-w-sm {
+  max-width: 24rem;
 }
 
 .max-w-screen-lg {
   max-width: 1024px;
 }
 
-.max-w-sm {
-  max-width: 24rem;
+.max-w-\[420px\] {
+  max-width: 420px;
 }
 
-.max-w-xs {
-  max-width: 20rem;
+.max-w-none {
+  max-width: none;
 }
 
 .flex-none {
@@ -2094,28 +2111,28 @@ input[type="color"]::-webkit-color-swatch {
   border-collapse: collapse;
 }
 
-.-translate-x-1\/2 {
-  --tw-translate-x: -50%;
+.translate-x-0 {
+  --tw-translate-x: 0px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-translate-y-1\/2 {
-  --tw-translate-y: -50%;
+.translate-x-full {
+  --tw-translate-x: 100%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.translate-x-0 {
-  --tw-translate-x: 0px;
+.translate-x-5 {
+  --tw-translate-x: 1.25rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.translate-x-5 {
-  --tw-translate-x: 1.25rem;
+.-translate-y-1\/2 {
+  --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.translate-x-full {
-  --tw-translate-x: 100%;
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
@@ -2124,13 +2141,13 @@ input[type="color"]::-webkit-color-swatch {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.rotate-45 {
-  --tw-rotate: 45deg;
+.rotate-90 {
+  --tw-rotate: 90deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.rotate-90 {
-  --tw-rotate: 90deg;
+.rotate-45 {
+  --tw-rotate: 45deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
@@ -2144,32 +2161,36 @@ input[type="color"]::-webkit-color-swatch {
   animation: 1s linear infinite spin;
 }
 
+.\!cursor-not-allowed {
+  cursor: not-allowed !important;
+}
+
 .\!cursor-default {
   cursor: default !important;
 }
 
-.cursor-\[col-resize\] {
-  cursor: col-resize;
+.cursor-pointer {
+  cursor: pointer;
 }
 
 .cursor-\[not-allowed\] {
   cursor: not-allowed;
 }
 
-.cursor-\[nwse-resize\] {
-  cursor: nwse-resize;
+.cursor-\[col-resize\] {
+  cursor: col-resize;
 }
 
 .cursor-\[row-resize\] {
   cursor: row-resize;
 }
 
-.cursor-help {
-  cursor: help;
+.cursor-\[nwse-resize\] {
+  cursor: nwse-resize;
 }
 
-.cursor-pointer {
-  cursor: pointer;
+.cursor-help {
+  cursor: help;
 }
 
 .select-none {
@@ -2193,6 +2214,10 @@ input[type="color"]::-webkit-color-swatch {
   grid-template-columns: 1fr 17px;
 }
 
+.grid-rows-\[40px_1fr\] {
+  grid-template-rows: 40px 1fr;
+}
+
 .\!grid-rows-\[1fr\] {
   grid-template-rows: 1fr !important;
 }
@@ -2201,10 +2226,6 @@ input[type="color"]::-webkit-color-swatch {
   grid-template-rows: 1fr 17px;
 }
 
-.grid-rows-\[40px_1fr\] {
-  grid-template-rows: 40px 1fr;
-}
-
 .flex-col {
   flex-direction: column;
 }
@@ -2225,16 +2246,10 @@ input[type="color"]::-webkit-color-swatch {
   justify-content: space-between;
 }
 
-.space-x-1 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(.25rem * var(--tw-space-x-reverse));
-  margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(.375rem * var(--tw-space-x-reverse));
-  margin-left: calc(.375rem * calc(1 - var(--tw-space-x-reverse)));
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(.5rem * var(--tw-space-y-reverse));
 }
 
 .space-x-2 > :not([hidden]) ~ :not([hidden]) {
@@ -2243,10 +2258,10 @@ input[type="color"]::-webkit-color-swatch {
   margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.space-x-3 > :not([hidden]) ~ :not([hidden]) {
+.space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
-  margin-right: calc(.75rem * var(--tw-space-x-reverse));
-  margin-left: calc(.75rem * calc(1 - var(--tw-space-x-reverse)));
+  margin-right: calc(.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
 .space-x-6 > :not([hidden]) ~ :not([hidden]) {
@@ -2255,10 +2270,10 @@ input[type="color"]::-webkit-color-swatch {
   margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.space-y-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(.5rem * var(--tw-space-y-reverse));
+.space-x-3 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(.75rem * var(--tw-space-x-reverse));
+  margin-left: calc(.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
 .space-y-3 > :not([hidden]) ~ :not([hidden]) {
@@ -2267,6 +2282,12 @@ input[type="color"]::-webkit-color-swatch {
   margin-bottom: calc(.75rem * var(--tw-space-y-reverse));
 }
 
+.space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(.375rem * var(--tw-space-x-reverse));
+  margin-left: calc(.375rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -2327,10 +2348,6 @@ input[type="color"]::-webkit-color-swatch {
   border-radius: .375rem;
 }
 
-.rounded-sm {
-  border-radius: .125rem;
-}
-
 .rounded-bl-md {
   border-bottom-left-radius: .375rem;
 }
@@ -2347,49 +2364,41 @@ input[type="color"]::-webkit-color-swatch {
   border-width: 2px;
 }
 
-.border-b {
-  border-bottom-width: 1px;
-}
-
-.border-b-0 {
-  border-bottom-width: 0;
+.border-t {
+  border-top-width: 1px;
 }
 
-.border-b-2 {
-  border-bottom-width: 2px;
+.border-b {
+  border-bottom-width: 1px;
 }
 
 .border-l {
   border-left-width: 1px;
 }
 
-.border-l-2 {
-  border-left-width: 2px;
-}
-
 .border-r {
   border-right-width: 1px;
 }
 
-.border-t {
-  border-top-width: 1px;
+.border-b-0 {
+  border-bottom-width: 0;
 }
 
-.border-t-0 {
-  border-top-width: 0;
+.border-l-2 {
+  border-left-width: 2px;
 }
 
-.border-dashed {
-  border-style: dashed;
+.border-b-2 {
+  border-bottom-width: 2px;
 }
 
-.\!border-lookbook-header-border {
-  border-color: var(--lookbook-header-border) !important;
+.border-red-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 202 202 / var(--tw-border-opacity));
 }
 
-.border-gray-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+.border-lookbook-divider {
+  border-color: var(--lookbook-divider);
 }
 
 .border-gray-300 {
@@ -2397,29 +2406,39 @@ input[type="color"]::-webkit-color-swatch {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.border-lookbook-divider {
-  border-color: var(--lookbook-divider);
+.border-transparent {
+  border-color: #0000;
+}
+
+.border-lookbook-dropdown-divider {
+  border-color: var(--lookbook-dropdown-divider);
+}
+
+.\!border-lookbook-header-border {
+  border-color: var(--lookbook-header-border) !important;
 }
 
 .border-lookbook-tabs-border-active {
   border-color: var(--lookbook-tabs-border-active);
 }
 
-.border-red-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 202 202 / var(--tw-border-opacity));
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.border-transparent {
-  border-color: #0000;
+.bg-red-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
 }
 
-.\!bg-lookbook-header-bg {
-  background-color: var(--lookbook-header-bg) !important;
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
 }
 
-.\!bg-lookbook-nav-item-active {
-  background-color: var(--lookbook-nav-item-active) !important;
+.bg-lookbook-sidebar-bg {
+  background-color: var(--lookbook-sidebar-bg);
 }
 
 .bg-black {
@@ -2427,68 +2446,73 @@ input[type="color"]::-webkit-color-swatch {
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 
-.bg-gray-100\/80 {
-  background-color: #f3f4f6cc;
+.bg-lookbook-drawer-bg {
+  background-color: var(--lookbook-drawer-bg);
 }
 
-.bg-lookbook-divider {
-  background-color: var(--lookbook-divider);
+.bg-lookbook-page-bg {
+  background-color: var(--lookbook-page-bg);
 }
 
-.bg-lookbook-drawer-bg {
-  background-color: var(--lookbook-drawer-bg);
+.bg-transparent {
+  background-color: #0000;
+}
+
+.bg-lookbook-input-toggle-active {
+  background-color: var(--lookbook-input-toggle-active);
 }
 
 .bg-lookbook-input-toggle {
   background-color: var(--lookbook-input-toggle);
 }
 
-.bg-lookbook-input-toggle-active {
-  background-color: var(--lookbook-input-toggle-active);
+.bg-lookbook-prose-bg {
+  background-color: var(--lookbook-prose-bg);
 }
 
-.bg-lookbook-page-bg {
-  background-color: var(--lookbook-page-bg);
+.bg-zinc-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
 }
 
-.bg-lookbook-params-editor-bg {
-  background-color: var(--lookbook-params-editor-bg);
+.\!bg-lookbook-header-bg {
+  background-color: var(--lookbook-header-bg) !important;
 }
 
-.bg-lookbook-prose-bg {
-  background-color: var(--lookbook-prose-bg);
+.bg-lookbook-divider {
+  background-color: var(--lookbook-divider);
 }
 
-.bg-lookbook-sidebar-bg {
-  background-color: var(--lookbook-sidebar-bg);
+.bg-lookbook-button-bg {
+  background-color: var(--lookbook-button-bg);
+}
+
+.bg-lookbook-button-bg-hover {
+  background-color: var(--lookbook-button-bg-hover);
 }
 
 .bg-lookbook-toolbar-bg {
   background-color: var(--lookbook-toolbar-bg);
 }
 
-.bg-red-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+.bg-gray-100\/80 {
+  background-color: #f3f4f6cc;
 }
 
-.bg-red-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
+.\!bg-lookbook-nav-item-active {
+  background-color: var(--lookbook-nav-item-active) !important;
 }
 
-.bg-transparent {
-  background-color: #0000;
+.bg-lookbook-params-editor-bg {
+  background-color: var(--lookbook-params-editor-bg);
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+.p-4 {
+  padding: 1rem;
 }
 
-.bg-zinc-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
+.p-3 {
+  padding: .75rem;
 }
 
 .p-1 {
@@ -2499,25 +2523,24 @@ input[type="color"]::-webkit-color-swatch {
   padding: .5rem;
 }
 
-.p-3 {
-  padding: .75rem;
-}
-
-.p-4 {
-  padding: 1rem;
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 
-.p-6 {
-  padding: 1.5rem;
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
 }
 
-.p-8 {
-  padding: 2rem;
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
 }
 
-.px-1 {
-  padding-left: .25rem;
-  padding-right: .25rem;
+.py-2 {
+  padding-top: .5rem;
+  padding-bottom: .5rem;
 }
 
 .px-2 {
@@ -2530,101 +2553,104 @@ input[type="color"]::-webkit-color-swatch {
   padding-right: .75rem;
 }
 
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
+.py-3 {
+  padding-top: .75rem;
+  padding-bottom: .75rem;
 }
 
-.px-8 {
-  padding-left: 2rem;
-  padding-right: 2rem;
+.py-1\.5 {
+  padding-top: .375rem;
+  padding-bottom: .375rem;
 }
 
-.py-2 {
-  padding-top: .5rem;
-  padding-bottom: .5rem;
+.py-1 {
+  padding-top: .25rem;
+  padding-bottom: .25rem;
 }
 
-.py-3 {
-  padding-top: .75rem;
-  padding-bottom: .75rem;
+.px-1 {
+  padding-left: .25rem;
+  padding-right: .25rem;
 }
 
-.py-6 {
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem;
+.pb-10 {
+  padding-bottom: 2.5rem;
 }
 
-.pb-0 {
-  padding-bottom: 0;
+.pb-4 {
+  padding-bottom: 1rem;
 }
 
-.pb-1 {
-  padding-bottom: .25rem;
+.pt-1 {
+  padding-top: .25rem;
 }
 
-.pb-1\.5 {
-  padding-bottom: .375rem;
+.pr-0 {
+  padding-right: 0;
 }
 
-.pb-10 {
-  padding-bottom: 2.5rem;
+.pl-1 {
+  padding-left: .25rem;
 }
 
-.pb-12 {
-  padding-bottom: 3rem;
+.pb-1 {
+  padding-bottom: .25rem;
 }
 
-.pb-4 {
-  padding-bottom: 1rem;
+.pr-0\.5 {
+  padding-right: .125rem;
+}
+
+.pl-0\.5 {
+  padding-left: .125rem;
 }
 
 .pl-0 {
   padding-left: 0;
 }
 
-.pl-0\.5 {
-  padding-left: .125rem;
+.pt-8 {
+  padding-top: 2rem;
 }
 
-.pl-1 {
-  padding-left: .25rem;
+.pb-12 {
+  padding-bottom: 3rem;
 }
 
-.pl-2 {
-  padding-left: .5rem;
+.pt-2 {
+  padding-top: .5rem;
 }
 
-.pr-0 {
-  padding-right: 0;
+.pt-3 {
+  padding-top: .75rem;
 }
 
-.pr-0\.5 {
-  padding-right: .125rem;
+.pb-3 {
+  padding-bottom: .75rem;
+}
+
+.pb-0 {
+  padding-bottom: 0;
 }
 
 .pr-1 {
   padding-right: .25rem;
 }
 
-.pt-1 {
-  padding-top: .25rem;
+.pl-2 {
+  padding-left: .5rem;
 }
 
 .pt-1\.5 {
   padding-top: .375rem;
 }
 
-.pt-2 {
-  padding-top: .5rem;
-}
-
 .pt-2\.5 {
   padding-top: .625rem;
 }
 
-.pt-8 {
-  padding-top: 2rem;
+.pb-1\.5 {
+  padding-bottom: .375rem;
 }
 
 .text-left {
@@ -2648,11 +2674,6 @@ input[type="color"]::-webkit-color-swatch {
   line-height: 1.5rem;
 }
 
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
 .text-sm {
   font-size: .875rem;
   line-height: 1.25rem;
@@ -2668,14 +2689,23 @@ input[type="color"]::-webkit-color-swatch {
   line-height: 1rem;
 }
 
-.font-black {
-  font-weight: 900;
+.text-\[11px\] {
+  font-size: 11px;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
 }
 
 .font-bold {
   font-weight: 700;
 }
 
+.font-black {
+  font-weight: 900;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -2700,12 +2730,19 @@ input[type="color"]::-webkit-color-swatch {
   letter-spacing: .05em;
 }
 
-.\!text-lookbook-header-text {
-  color: var(--lookbook-header-text) !important;
+.text-red-300 {
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity));
 }
 
-.\!text-lookbook-tabs-text-disabled {
-  color: var(--lookbook-tabs-text-disabled) !important;
+.text-red-700 {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity));
+}
+
+.text-red-900 {
+  --tw-text-opacity: 1;
+  color: rgb(127 29 29 / var(--tw-text-opacity));
 }
 
 .text-gray-400 {
@@ -2713,6 +2750,10 @@ input[type="color"]::-webkit-color-swatch {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
+.text-lookbook-blank-slate-title {
+  color: var(--lookbook-blank-slate-title);
+}
+
 .text-green-500 {
   --tw-text-opacity: 1;
   color: rgb(34 197 94 / var(--tw-text-opacity));
@@ -2723,8 +2764,17 @@ input[type="color"]::-webkit-color-swatch {
   color: rgb(22 163 74 / var(--tw-text-opacity));
 }
 
-.text-lookbook-blank-slate-title {
-  color: var(--lookbook-blank-slate-title);
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+.text-lookbook-icon-button-stroke {
+  color: var(--lookbook-icon-button-stroke);
+}
+
+.\!text-lookbook-header-text {
+  color: var(--lookbook-header-text) !important;
 }
 
 .text-lookbook-branding-text {
@@ -2735,91 +2785,84 @@ input[type="color"]::-webkit-color-swatch {
   color: var(--lookbook-header-text);
 }
 
-.text-lookbook-icon-button-stroke {
-  color: var(--lookbook-icon-button-stroke);
-}
-
 .text-lookbook-icon-button-stroke-hover {
   color: var(--lookbook-icon-button-stroke-hover);
 }
 
-.text-lookbook-nav-icon-stroke {
-  color: var(--lookbook-nav-icon-stroke);
-}
-
 .text-lookbook-prose-text {
   color: var(--lookbook-prose-text);
 }
 
-.text-lookbook-tabs-text {
-  color: var(--lookbook-tabs-text);
+.text-lookbook-button-text {
+  color: var(--lookbook-button-text);
 }
 
-.text-lookbook-tabs-text-hover {
-  color: var(--lookbook-tabs-text-hover);
+.text-lookbook-embed-title {
+  color: var(--lookbook-embed-title);
 }
 
-.text-red-300 {
-  --tw-text-opacity: 1;
-  color: rgb(252 165 165 / var(--tw-text-opacity));
+.text-lookbook-nav-icon-stroke {
+  color: var(--lookbook-nav-icon-stroke);
 }
 
-.text-red-700 {
-  --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
+.text-lookbook-tabs-text {
+  color: var(--lookbook-tabs-text);
 }
 
-.text-red-900 {
-  --tw-text-opacity: 1;
-  color: rgb(127 29 29 / var(--tw-text-opacity));
+.text-lookbook-tabs-text-hover {
+  color: var(--lookbook-tabs-text-hover);
+}
+
+.\!text-lookbook-tabs-text-disabled {
+  color: var(--lookbook-tabs-text-disabled) !important;
 }
 
 .underline {
   text-decoration-line: underline;
 }
 
-.\!opacity-100 {
-  opacity: 1 !important;
+.opacity-50 {
+  opacity: .5;
 }
 
-.\!opacity-30 {
-  opacity: .3 !important;
+.opacity-60 {
+  opacity: .6;
 }
 
 .opacity-0 {
   opacity: 0;
 }
 
-.opacity-25 {
-  opacity: .25;
+.\!opacity-30 {
+  opacity: .3 !important;
 }
 
-.opacity-40 {
-  opacity: .4;
+.opacity-90 {
+  opacity: .9;
 }
 
-.opacity-50 {
-  opacity: .5;
+.opacity-40 {
+  opacity: .4;
 }
 
-.opacity-60 {
-  opacity: .6;
+.opacity-80 {
+  opacity: .8;
 }
 
 .opacity-70 {
   opacity: .7;
 }
 
-.opacity-75 {
-  opacity: .75;
+.\!opacity-100 {
+  opacity: 1 !important;
 }
 
-.opacity-80 {
-  opacity: .8;
+.opacity-25 {
+  opacity: .25;
 }
 
-.opacity-90 {
-  opacity: .9;
+.opacity-75 {
+  opacity: .75;
 }
 
 .shadow {
@@ -2843,26 +2886,32 @@ input[type="color"]::-webkit-color-swatch {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-duration: .15s;
+  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
 .transition {
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
 
-.transition-all {
-  transition-property: all;
+.transition-opacity {
+  transition-property: opacity;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
 
-.transition-colors {
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+.transition-all {
+  transition-property: all;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
 
-.transition-opacity {
-  transition-property: opacity;
+.transition-\[height\] {
+  transition-property: height;
   transition-duration: .15s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
@@ -2875,6 +2924,10 @@ input[type="color"]::-webkit-color-swatch {
   transition-duration: .2s;
 }
 
+.duration-150 {
+  transition-duration: .15s;
+}
+
 .ease-in-out {
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
@@ -3053,14 +3106,13 @@ input[type="color"]::-webkit-color-swatch {
 }
 
 .tippy-box[data-theme~="menu"] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
   --tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  border: 1px solid #d1d5db;
+  border: 1px solid var(--lookbook-dropdown-divider);
+  color: var(--lookbook-dropdown-text);
+  background: var(--lookbook-dropdown-bg);
+  max-width: none !important;
 }
 
 .tippy-box[data-theme~="menu"] > .tippy-content {
@@ -3070,19 +3122,19 @@ input[type="color"]::-webkit-color-swatch {
 }
 
 .tippy-box[data-theme~="menu"][data-placement^="top"] > .tippy-arrow:before {
-  border-top-color: #fff;
+  border-top-color: var(--lookbook-dropdown-bg);
 }
 
 .tippy-box[data-theme~="menu"][data-placement^="bottom"] > .tippy-arrow:before {
-  border-bottom-color: #fff;
+  border-bottom-color: var(--lookbook-dropdown-bg);
 }
 
 .tippy-box[data-theme~="menu"][data-placement^="left"] > .tippy-arrow:before {
-  border-left-color: #fff;
+  border-left-color: var(--lookbook-dropdown-bg);
 }
 
 .tippy-box[data-theme~="menu"][data-placement^="right"] > .tippy-arrow:before {
-  border-right-color: #fff;
+  border-right-color: var(--lookbook-dropdown-bg);
 }
 
 .theme-github {
@@ -3484,6 +3536,10 @@ input[type="color"]::-webkit-color-swatch {
   background-color: var(--lookbook-draggable-hint);
 }
 
+.hover\:bg-lookbook-button-bg-hover:hover {
+  background-color: var(--lookbook-button-bg-hover);
+}
+
 .hover\:text-gray-900:hover {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -3515,15 +3571,15 @@ input[type="color"]::-webkit-color-swatch {
   outline: 2px solid #0000;
 }
 
-.focus\:ring-0:focus {
+.focus\:ring-2:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:ring-2:focus {
+.focus\:ring-0:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }