lookbook 1.2.1 → 1.4.5

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

@@ -10,7 +10,8 @@
 html {
   -webkit-text-size-adjust: 100%;
   tab-size: 4;
-  font-family: Nunito Sans, -apple-system, \.SFNSText-Regular, San Francisco, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-feature-settings: normal;
+  font-family: -apple-system, \.SFNSText-Regular, San Francisco, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
   line-height: 1.5;
 }
 
@@ -173,6 +174,10 @@ img, video {
   height: auto;
 }
 
+[hidden] {
+  display: none;
+}
+
 [type="text"], [type="email"], [type="url"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="search"], [type="tel"], [type="time"], [type="week"], [multiple], textarea, select {
   appearance: none;
   --tw-shadow: 0 0 #0000;
@@ -338,7 +343,7 @@ body {
   color: var(--lookbook-text);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-family: Nunito Sans, -apple-system, \.SFNSText-Regular, San Francisco, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-family: -apple-system, \.SFNSText-Regular, San Francisco, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
   font-size: .875rem;
   line-height: 1.25rem;
   overflow: hidden;
@@ -1031,24 +1036,24 @@ pre[class*="language-"] {
   padding-left: .428571em;
 }
 
-.prose-sm :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose-sm > ul > li p):not(:where([class~="not-prose"] *)) {
   margin-top: .571429em;
   margin-bottom: .571429em;
 }
 
-.prose-sm :where(.prose > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose-sm > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
   margin-top: 1.14286em;
 }
 
-.prose-sm :where(.prose > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose-sm > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
   margin-bottom: 1.14286em;
 }
 
-.prose-sm :where(.prose > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose-sm > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
   margin-top: 1.14286em;
 }
 
-.prose-sm :where(.prose > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose-sm > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
   margin-bottom: 1.14286em;
 }
 
@@ -1109,40 +1114,11 @@ pre[class*="language-"] {
   padding-right: 0;
 }
 
-.prose-sm :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose-sm > :first-child):not(:where([class~="not-prose"] *)) {
   margin-top: 0;
 }
 
-.prose-sm :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 0;
-}
-
-.prose-base :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
-  margin-top: .75em;
-  margin-bottom: .75em;
-}
-
-.prose-base :where(.prose > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.25em;
-}
-
-.prose-base :where(.prose > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 1.25em;
-}
-
-.prose-base :where(.prose > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.25em;
-}
-
-.prose-base :where(.prose > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 1.25em;
-}
-
-.prose-base :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-}
-
-.prose-base :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose-sm > :last-child):not(:where([class~="not-prose"] *)) {
   margin-bottom: 0;
 }
 
@@ -1268,24 +1244,24 @@ pre[class*="language-"] {
   padding-left: .444444em;
 }
 
-.prose-lg :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose-lg > ul > li p):not(:where([class~="not-prose"] *)) {
   margin-top: .888889em;
   margin-bottom: .888889em;
 }
 
-.prose-lg :where(.prose > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose-lg > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
   margin-top: 1.33333em;
 }
 
-.prose-lg :where(.prose > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose-lg > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
   margin-bottom: 1.33333em;
 }
 
-.prose-lg :where(.prose > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose-lg > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
   margin-top: 1.33333em;
 }
 
-.prose-lg :where(.prose > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose-lg > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
   margin-bottom: 1.33333em;
 }
 
@@ -1346,275 +1322,14 @@ pre[class*="language-"] {
   padding-right: 0;
 }
 
-.prose-lg :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-}
-
-.prose-lg :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 0;
-}
-
-.prose-xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
-  margin-top: .8em;
-  margin-bottom: .8em;
-}
-
-.prose-xl :where(.prose > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.2em;
-}
-
-.prose-xl :where(.prose > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 1.2em;
-}
-
-.prose-xl :where(.prose > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.2em;
-}
-
-.prose-xl :where(.prose > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 1.2em;
-}
-
-.prose-xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose-lg > :first-child):not(:where([class~="not-prose"] *)) {
   margin-top: 0;
 }
 
-.prose-xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose-lg > :last-child):not(:where([class~="not-prose"] *)) {
   margin-bottom: 0;
 }
 
-.prose-2xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
-  margin-top: .833333em;
-  margin-bottom: .833333em;
-}
-
-.prose-2xl :where(.prose > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.33333em;
-}
-
-.prose-2xl :where(.prose > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 1.33333em;
-}
-
-.prose-2xl :where(.prose > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.33333em;
-}
-
-.prose-2xl :where(.prose > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 1.33333em;
-}
-
-.prose-2xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-}
-
-.prose-2xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 0;
-}
-
-.theme-github-light {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
-.theme-github-light .highlight .hll {
-  background-color: #f8f8f8;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-  padding: 6px 10px;
-}
-
-.theme-github-light .highlight .c {
-  color: #998;
-  font-style: italic;
-}
-
-.theme-github-light .highlight .k, .theme-github-light .highlight .o {
-  font-weight: bold;
-}
-
-.theme-github-light .highlight .cm {
-  color: #998;
-  font-style: italic;
-}
-
-.theme-github-light .highlight .cp {
-  color: #999;
-  font-weight: bold;
-}
-
-.theme-github-light .highlight .c1 {
-  color: #998;
-  font-style: italic;
-}
-
-.theme-github-light .highlight .cs {
-  color: #999;
-  font-style: italic;
-  font-weight: bold;
-}
-
-.theme-github-light .highlight .gd {
-  color: #000;
-  background-color: #fdd;
-}
-
-.theme-github-light .highlight .gd .x {
-  color: #000;
-  background-color: #faa;
-}
-
-.theme-github-light .highlight .ge {
-  font-style: italic;
-}
-
-.theme-github-light .highlight .gr {
-  color: #a00;
-}
-
-.theme-github-light .highlight .gh {
-  color: #999;
-}
-
-.theme-github-light .highlight .gi {
-  color: #000;
-  background-color: #dfd;
-}
-
-.theme-github-light .highlight .gi .x {
-  color: #000;
-  background-color: #afa;
-}
-
-.theme-github-light .highlight .go {
-  color: #888;
-}
-
-.theme-github-light .highlight .gp {
-  color: #555;
-}
-
-.theme-github-light .highlight .gs {
-  font-weight: bold;
-}
-
-.theme-github-light .highlight .gu {
-  color: purple;
-  font-weight: bold;
-}
-
-.theme-github-light .highlight .gt {
-  color: #a00;
-}
-
-.theme-github-light .highlight .kc, .theme-github-light .highlight .kd, .theme-github-light .highlight .kn, .theme-github-light .highlight .kp, .theme-github-light .highlight .kr {
-  font-weight: bold;
-}
-
-.theme-github-light .highlight .kt {
-  color: #458;
-  font-weight: bold;
-}
-
-.theme-github-light .highlight .m {
-  color: #099;
-}
-
-.theme-github-light .highlight .s {
-  color: #d14;
-}
-
-.theme-github-light .highlight .\!s {
-  color: #d14 !important;
-}
-
-.theme-github-light .highlight .n {
-  color: #333;
-}
-
-.theme-github-light .highlight .na {
-  color: teal;
-}
-
-.theme-github-light .highlight .nb {
-  color: #0086b3;
-}
-
-.theme-github-light .highlight .nc {
-  color: #458;
-  font-weight: bold;
-}
-
-.theme-github-light .highlight .no {
-  color: teal;
-}
-
-.theme-github-light .highlight .ni {
-  color: purple;
-}
-
-.theme-github-light .highlight .ne, .theme-github-light .highlight .nf {
-  color: #900;
-  font-weight: bold;
-}
-
-.theme-github-light .highlight .nn {
-  color: #555;
-}
-
-.theme-github-light .highlight .nt {
-  color: navy;
-}
-
-.theme-github-light .highlight .nv {
-  color: teal;
-}
-
-.theme-github-light .highlight .ow {
-  font-weight: bold;
-}
-
-.theme-github-light .highlight .w {
-  color: #bbb;
-}
-
-.theme-github-light .highlight .mf, .theme-github-light .highlight .mh, .theme-github-light .highlight .mi, .theme-github-light .highlight .mo {
-  color: #099;
-}
-
-.theme-github-light .highlight .sb, .theme-github-light .highlight .sc, .theme-github-light .highlight .sd, .theme-github-light .highlight .s2, .theme-github-light .highlight .se, .theme-github-light .highlight .sh, .theme-github-light .highlight .si, .theme-github-light .highlight .sx {
-  color: #d14;
-}
-
-.theme-github-light .highlight .sr {
-  color: #009926;
-}
-
-.theme-github-light .highlight .s1 {
-  color: #d14;
-}
-
-.theme-github-light .highlight .ss {
-  color: #990073;
-}
-
-.theme-github-light .highlight .bp {
-  color: #999;
-}
-
-.theme-github-light .highlight .vc, .theme-github-light .highlight .vg, .theme-github-light .highlight .vi {
-  color: teal;
-}
-
-.theme-github-light .highlight .il {
-  color: #099;
-}
-
-.theme-github-light .highlight .gc {
-  color: #999;
-  background-color: #eaf2f5;
-}
-
 [data-component="code"] {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1653,14 +1368,9 @@ pre[class*="language-"] {
   height: 100%;
   -webkit-user-select: none;
   user-select: none;
+  text-align: right;
   border-style: dashed;
   border-right-width: 1px;
-  border-color: var(--lookbook-divider);
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  text-align: right;
-  --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
   padding: .75rem;
 }
 
@@ -1734,10 +1444,42 @@ pre[class*="language-"] {
   padding: 1rem;
 }
 
+[data-component="nav"] .nav-action {
+  width: 100%;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  color: var(--lookbook-nav-text);
+  align-items: center;
+  padding-top: .25rem;
+  padding-bottom: .25rem;
+  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;
+}
+
+[data-component="nav"] .nav-action:hover {
+  background-color: var(--lookbook-nav-item-hover);
+}
+
+[data-component="nav"] .nav-action-inner {
+  width: 100%;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+
+[data-component="nav"] .nav-toggle-icon {
+  color: var(--lookbook-nav-toggle);
+  margin-right: .25rem;
+  position: absolute;
+  left: -1rem;
+}
+
 [data-component="params-editor"] table:not(.linear) thead tr {
-  --tw-border-opacity: 1;
   border-bottom-width: 1px;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+  border-color: var(--lookbook-divider);
 }
 
 [data-component="params-editor"] table:not(.linear) thead th {
@@ -1756,9 +1498,8 @@ pre[class*="language-"] {
 }
 
 [data-component="params-editor"] table:not(.linear) tbody tr + tr td {
-  --tw-border-opacity: 1;
   border-top-width: 1px;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+  border-color: var(--lookbook-divider);
 }
 
 [data-component="params-editor"] table:not(.linear) tbody td {
@@ -1783,14 +1524,13 @@ pre[class*="language-"] {
 }
 
 [data-component="params-editor"] table.linear tr:not(:last-child) {
-  --tw-border-opacity: 1;
   border-bottom-width: 1px;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity));
+  border-color: var(--lookbook-divider);
 }
 
 [data-component="params-editor"] table.linear tr > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
-  margin-top: calc(.75rem * calc(1 - var(--tw-space-y-reverse)) );
+  margin-top: calc(.75rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(.75rem * var(--tw-space-y-reverse));
 }
 
@@ -1869,7 +1609,7 @@ pre[class*="language-"] {
 }
 
 [data-component="viewport"] .resize-handle:hover {
-  background-color: var(--lookbook-draggable-hint);
+  background-color: var(--lookbook-viewport-handle-hover);
   --tw-bg-opacity: .2;
 }
 
@@ -2054,10 +1794,6 @@ input[type="color"]::-webkit-color-swatch {
   left: -1px;
 }
 
-.-left-4 {
-  left: -1rem;
-}
-
 .top-\[2px\] {
   top: 2px;
 }
@@ -2164,10 +1900,6 @@ input[type="color"]::-webkit-color-swatch {
   margin-left: -.75rem;
 }
 
-.-mb-px {
-  margin-bottom: -1px;
-}
-
 .mr-auto {
   margin-right: auto;
 }
@@ -2288,6 +2020,10 @@ input[type="color"]::-webkit-color-swatch {
   width: 100%;
 }
 
+.w-\[140px\] {
+  width: 140px;
+}
+
 .w-screen {
   width: 100vw;
 }
@@ -2489,49 +2225,49 @@ input[type="color"]::-webkit-color-swatch {
 
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
-  margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)) );
+  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]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)) );
+  margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
 .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)) );
+  margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
 .space-x-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1.5rem * var(--tw-space-x-reverse));
-  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)) );
+  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-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)) );
+  margin-left: calc(.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
 .space-y-3 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
-  margin-top: calc(.75rem * calc(1 - var(--tw-space-y-reverse)) );
+  margin-top: calc(.75rem * calc(1 - var(--tw-space-y-reverse)));
   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)) );
+  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)) );
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
@@ -2563,10 +2299,6 @@ input[type="color"]::-webkit-color-swatch {
   overflow-x: hidden;
 }
 
-.overflow-y-hidden {
-  overflow-y: hidden;
-}
-
 .scroll-smooth {
   scroll-behavior: smooth;
 }
@@ -2625,14 +2357,14 @@ input[type="color"]::-webkit-color-swatch {
   border-left-width: 1px;
 }
 
-.border-r {
-  border-right-width: 1px;
-}
-
 .border-b-0 {
   border-bottom-width: 0;
 }
 
+.border-r {
+  border-right-width: 1px;
+}
+
 .border-l-2 {
   border-left-width: 2px;
 }
@@ -2745,10 +2477,6 @@ input[type="color"]::-webkit-color-swatch {
   background-color: var(--lookbook-toolbar-bg);
 }
 
-.bg-lookbook-viewport-handle {
-  background-color: var(--lookbook-viewport-handle);
-}
-
 .bg-gray-100\/80 {
   background-color: #f3f4f6cc;
 }
@@ -2757,12 +2485,8 @@ input[type="color"]::-webkit-color-swatch {
   background-color: var(--lookbook-nav-item-active) !important;
 }
 
-.stroke-current {
-  stroke: currentColor;
-}
-
-.stroke-2 {
-  stroke-width: 2px;
+.bg-lookbook-params-editor-bg {
+  background-color: var(--lookbook-params-editor-bg);
 }
 
 .p-4 {
@@ -2777,14 +2501,14 @@ input[type="color"]::-webkit-color-swatch {
   padding: .5rem;
 }
 
-.p-3 {
-  padding: .75rem;
-}
-
 .p-6 {
   padding: 1.5rem;
 }
 
+.p-3 {
+  padding: .75rem;
+}
+
 .p-8 {
   padding: 2rem;
 }
@@ -2824,16 +2548,6 @@ input[type="color"]::-webkit-color-swatch {
   padding-bottom: .75rem;
 }
 
-.py-1 {
-  padding-top: .25rem;
-  padding-bottom: .25rem;
-}
-
-.py-4 {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
 .px-1 {
   padding-left: .25rem;
   padding-right: .25rem;
@@ -2843,6 +2557,10 @@ input[type="color"]::-webkit-color-swatch {
   padding-bottom: 2.5rem;
 }
 
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
 .pt-1 {
   padding-top: .25rem;
 }
@@ -2883,10 +2601,6 @@ input[type="color"]::-webkit-color-swatch {
   padding-top: .5rem;
 }
 
-.pt-\[4px\] {
-  padding-top: 4px;
-}
-
 .pb-0 {
   padding-bottom: 0;
 }
@@ -2919,16 +2633,12 @@ input[type="color"]::-webkit-color-swatch {
   text-align: center;
 }
 
-.align-middle {
-  vertical-align: middle;
-}
-
 .font-mono {
   font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
 }
 
 .font-sans {
-  font-family: Nunito Sans, -apple-system, \.SFNSText-Regular, San Francisco, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-family: -apple-system, \.SFNSText-Regular, San Francisco, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
 }
 
 .text-base {
@@ -2951,10 +2661,6 @@ input[type="color"]::-webkit-color-swatch {
   line-height: 1rem;
 }
 
-.text-\[0\.82rem\] {
-  font-size: .82rem;
-}
-
 .text-lg {
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -2984,6 +2690,10 @@ input[type="color"]::-webkit-color-swatch {
   line-height: 1.25;
 }
 
+.tracking-wide {
+  letter-spacing: .025em;
+}
+
 .tracking-wider {
   letter-spacing: .05em;
 }
@@ -3046,31 +2756,10 @@ input[type="color"]::-webkit-color-swatch {
   color: var(--lookbook-prose-text);
 }
 
-.text-lookbook-viewport-handle-icon-stroke {
-  color: var(--lookbook-viewport-handle-icon-stroke);
-}
-
-.text-lookbook-input-text {
-  color: var(--lookbook-input-text);
-}
-
-.text-lookbook-nav-text {
-  color: var(--lookbook-nav-text);
-}
-
-.text-lookbook-nav-toggle {
-  color: var(--lookbook-nav-toggle);
-}
-
 .text-lookbook-nav-icon-stroke {
   color: var(--lookbook-nav-icon-stroke);
 }
 
-.text-red-500 {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
-}
-
 .text-lookbook-tabs-text {
   color: var(--lookbook-tabs-text);
 }
@@ -3394,12 +3083,403 @@ input[type="color"]::-webkit-color-swatch {
   border-right-color: #fff;
 }
 
-.hover\:bg-lookbook-draggable-hint:hover {
-  background-color: var(--lookbook-draggable-hint);
+.theme-github {
+  --dark-bg: #111;
+  --dark-gray-1: #404040;
+  --dark-gray-2: #d0d0d0;
+  --dark-gray-3: #ccc;
+  --dark-gray-4: #777;
+  --dark-gray-5: #aaa;
+  --dark-gray-6: #bbb;
+  --dark-gray-7: #666;
+  --dark-blue-1: #3677a9;
+  --dark-blue-2: #24909d;
+  --dark-blue-3: #447fcf;
+  --dark-blue-4: #098;
+  --dark-red-1: #a61717;
+  --dark-red-2: #311;
+  --dark-red-3: #e50808;
+  --dark-red-4: #520000;
+  --dark-red-5: #d22323;
+  --dark-red-6: #cd2828;
+  --dark-yellow-1: #e9b96e;
+  --dark-yellow-2: orange;
+  --dark-orange: #d2691e;
+  --dark-white: #fff;
+  --dark-green-1: #589819;
+  --dark-green-2: #6ab825;
+  --dark-green-3: #4ca;
+  --light-bg: #fff;
+  --light-gray-1: #f8f8f8;
+  --light-gray-2: #27272a;
+  --light-gray-3: #ccc;
+  --light-gray-4: #888;
+  --light-gray-5: #999;
+  --light-gray-6: #555;
+  --light-gray-7: #bbb;
+  --light-yellow-1: #998;
+  --light-red-1: #a61717;
+  --light-red-2: #e3d2d2;
+  --light-red-3: #d14;
+  --light-red-4: #fdd;
+  --light-red-5: #a00;
+  --light-red-6: #900;
+  --light-purple-1: purple;
+  --light-purple-2: #990073;
+  --light-black: #000;
+  --light-green-1: #dfd;
+  --light-green-2: #009926;
+  --light-blue-1: #458;
+  --light-blue-2: #099;
+  --light-blue-3: teal;
+  --light-blue-4: #0086b3;
+  --light-blue-5: #3c5d5d;
+  --light-blue-6: navy;
+  --hl-bg: var(--light-bg);
+  --hl-hll-bg: var(--light-gray-1);
+  --hl-border: var(--light-gray-3);
+  --hl-line-number: var(--light-gray-2);
+  --hl-comment: var(--light-yellow-1);
+  --hl-comment-preproc: var(--light-gray-5);
+  --hl-comment-special-fg: var(--light-gray-5);
+  --hl-comment-special-bg: transparent;
+  --hl-error-fg: var(--light-red-1);
+  --hl-error-bg: var(--light-red-2);
+  --hl-subtle-fg: var(--light-gray-2);
+  --hl-entity: var(--light-purple-1);
+  --hl-keyword: var(--light-black);
+  --hl-output: var(--light-gray-4);
+  --hl-operator: var(--light-black);
+  --hl-punctuation: var(--light-gray-6);
+  --hl-string: var(--light-red-3);
+  --hl-string-other: var(--light-red-3);
+  --hl-string-regex: var(--light-green-2);
+  --hl-string-symbol: var(--light-purple-2);
+  --hl-deleted-fg: var(--light-black);
+  --hl-deleted-bg: var(--light-red-4);
+  --hl-danger: var(--light-red-5);
+  --hl-heading: var(--light-gray-5);
+  --hl-inserted-fg: var(--light-black);
+  --hl-inserted-bg: var(--light-green-1);
+  --hl-prompt: var(--light-gray-6);
+  --hl-subheading: var(--light-purple-1);
+  --hl-keyword-crude: var(--light-black);
+  --hl-keyword-subtle: var(--light-blue-1);
+  --hl-number: var(--light-blue-2);
+  --hl-attribute: var(--light-blue-3);
+  --hl-builtin: var(--light-blue-4);
+  --hl-builtin-pseudo: var(--light-gray-5);
+  --hl-class: var(--light-blue-1);
+  --hl-variable: var(--light-blue-3);
+  --hl-decorator: var(--light-blue-5);
+  --hl-exception: var(--light-red-6);
+  --hl-function: var(--light-red-6);
+  --hl-namespace: var(--light-gray-6);
+  --hl-tag: var(--light-blue-6);
+  --hl-word: var(--light-black);
+  --hl-whitespace: var(--light-gray-7);
+}
+
+.theme-github.dark {
+  --hl-bg: var(--dark-bg);
+  --hl-hll-bg: var(--dark-gray-1);
+  --hl-border: var(--dark-gray-4);
+  --hl-line-number: var(--dark-gray-2);
+  --hl-comment: var(--dark-blue-1);
+  --hl-comment-preproc: var(--dark-orange);
+  --hl-comment-special-fg: var(--dark-red-3);
+  --hl-comment-special-bg: var(--dark-red-4);
+  --hl-error-fg: var(--dark-red-1);
+  --hl-error-bg: var(--dark-red-2);
+  --hl-subtle-fg: var(--dark-gray-2);
+  --hl-entity: var(--dark-gray-2);
+  --hl-keyword: var(--dark-gray-3);
+  --hl-output: var(--dark-gray-3);
+  --hl-operator: var(--dark-gray-4);
+  --hl-punctuation: var(--dark-yellow-1);
+  --hl-string: var(--dark-orange);
+  --hl-string-other: var(--dark-yellow-2);
+  --hl-string-regex: var(--dark-red-6);
+  --hl-string-symbol: var(--dark-orange);
+  --hl-deleted-fg: var(--dark-red-5);
+  --hl-deleted-bg: transparent;
+  --hl-danger: var(--dark-red-5);
+  --hl-heading: var(--dark-white);
+  --hl-inserted-fg: var(--dark-green-1);
+  --hl-inserted-bg: transparent;
+  --hl-prompt: var(--dark-gray-5);
+  --hl-subheading: var(--dark-white);
+  --hl-keyword-crude: var(--dark-green-2);
+  --hl-keyword-subtle: var(--dark-green-2);
+  --hl-number: var(--dark-red-6);
+  --hl-attribute: var(--dark-gray-6);
+  --hl-builtin: var(--dark-blue-2);
+  --hl-builtin-pseudo: var(--dark-blue-2);
+  --hl-class: var(--dark-blue-3);
+  --hl-variable: var(--dark-green-3);
+  --hl-decorator: var(--dark-yellow-2);
+  --hl-exception: var(--dark-gray-6);
+  --hl-function: var(--dark-blue-4);
+  --hl-namespace: var(--dark-blue-3);
+  --hl-tag: var(--dark-green-2);
+  --hl-word: var(--dark-green-2);
+  --hl-whitespace: var(--dark-gray-7);
+}
+
+.theme-github {
+  background-color: var(--hl-bg);
+}
+
+.theme-github .line-numbers {
+  background-color: var(--hl-bg);
+  border-color: var(--hl-border);
+  color: var(--hl-line-number);
+}
+
+.theme-github .highlight .hll {
+  background-color: var(--hl-hll-bg);
+}
+
+.theme-github .highlight .c {
+  color: var(--hl-comment);
+  font-style: italic;
 }
 
-.hover\:bg-lookbook-nav-item-hover:hover {
-  background-color: var(--lookbook-nav-item-hover);
+.theme-github .highlight .err {
+  color: var(--hl-error-fg);
+  background-color: var(--hl-error-bg);
+}
+
+.theme-github .highlight .g {
+  color: var(--hl-subtle-fg);
+}
+
+.theme-github .highlight .k {
+  color: var(--hl-keyword);
+  font-weight: bold;
+}
+
+.theme-github .highlight .l {
+  color: var(--hl-subtle-fg);
+}
+
+.theme-github .highlight .n, .theme-github .highlight .h {
+  color: var(--hl-keyword);
+}
+
+.theme-github .highlight .o {
+  color: var(--hl-operator);
+  font-weight: bold;
+}
+
+.theme-github .highlight .x {
+  color: var(--hl-subtle-fg);
+}
+
+.theme-github .highlight .p {
+  color: var(--hl-punctuation);
+}
+
+.theme-github .highlight .cm {
+  color: var(--hl-comment);
+  font-style: italic;
+}
+
+.theme-github .highlight .cp {
+  color: var(--hl-comment-preproc);
+  font-weight: bold;
+}
+
+.theme-github .highlight .c1 {
+  color: var(--hl-comment);
+  font-style: italic;
+}
+
+.theme-github .highlight .cs {
+  color: var(--hl-comment-special-fg);
+  background-color: var(--hl-comment-special-bg);
+  font-style: italic;
+  font-weight: bold;
+}
+
+.theme-github .highlight .gd {
+  color: var(--hl-deleted-fg);
+  background-color: var(--hl-deleted-bg);
+}
+
+.theme-github .highlight .ge {
+  color: var(--hl-subtle-fg);
+  font-style: italic;
+}
+
+.theme-github .highlight .gr {
+  color: var(--hl-danger);
+}
+
+.theme-github .highlight .gh {
+  color: var(--hl-heading);
+}
+
+.theme-github .highlight .gi {
+  color: var(--hl-inserted-fg);
+  background-color: var(--hl-inserted-bg);
+}
+
+.theme-github .highlight .go {
+  color: var(--hl-output);
+}
+
+.theme-github .highlight .gp {
+  color: var(--hl-prompt);
+}
+
+.theme-github .highlight .gs {
+  color: var(--hl-subtle-fg);
+  font-weight: bold;
+}
+
+.theme-github .highlight .gu {
+  color: var(--hl-subheading);
+  font-weight: bold;
+}
+
+.theme-github .highlight .gt {
+  color: var(--hl-danger);
+}
+
+.theme-github .highlight .kc, .theme-github .highlight .kd, .theme-github .highlight .kn, .theme-github .highlight .kp, .theme-github .highlight .kr {
+  color: var(--hl-keyword-crude);
+  font-weight: bold;
+}
+
+.theme-github .highlight .kt {
+  color: var(--hl-keyword-subtle);
+  font-weight: bold;
+}
+
+.theme-github .highlight .ld {
+  color: var(--hl-subtle-fg);
+}
+
+.theme-github .highlight .m {
+  color: var(--hl-number);
+}
+
+.theme-github .highlight .s {
+  color: var(--hl-string);
+}
+
+.theme-github .highlight .na {
+  color: var(--hl-attribute);
+}
+
+.theme-github .highlight .nb {
+  color: var(--hl-builtin);
+}
+
+.theme-github .highlight .nc {
+  color: var(--hl-class);
+  font-weight: bold;
+}
+
+.theme-github .highlight .no {
+  color: var(--hl-variable);
+}
+
+.theme-github .highlight .nd {
+  color: var(--hl-decorator);
+}
+
+.theme-github .highlight .ni {
+  color: var(--hl-entity);
+}
+
+.theme-github .highlight .ne {
+  color: var(--hl-exception);
+  font-weight: bold;
+}
+
+.theme-github .highlight .nf {
+  color: var(--hl-function);
+  font-weight: bold;
+}
+
+.theme-github .highlight .nl {
+  color: var(--hl-subtle-fg);
+}
+
+.theme-github .highlight .nn {
+  color: var(--hl-namespace);
+}
+
+.theme-github .highlight .nx, .theme-github .highlight .py {
+  color: var(--hl-subtle-fg);
+}
+
+.theme-github .highlight .nt {
+  color: var(--hl-tag);
+}
+
+.theme-github .highlight .nv {
+  color: var(--hl-variable);
+}
+
+.theme-github .highlight .ow {
+  color: var(--hl-word);
+  font-weight: bold;
+}
+
+.theme-github .highlight .w {
+  color: var(--hl-whitespace);
+}
+
+.theme-github .highlight .mf, .theme-github .highlight .mh, .theme-github .highlight .mi, .theme-github .highlight .mo {
+  color: var(--hl-number);
+}
+
+.theme-github .highlight .sb, .theme-github .highlight .sc, .theme-github .highlight .sd, .theme-github .highlight .s2, .theme-github .highlight .se, .theme-github .highlight .sh, .theme-github .highlight .si {
+  color: var(--hl-string);
+}
+
+.theme-github .highlight .sx {
+  color: var(--hl-string-other);
+}
+
+.theme-github .highlight .sr {
+  color: var(--hl-string-regex);
+}
+
+.theme-github .highlight .s1 {
+  color: var(--hl-string);
+}
+
+.theme-github .highlight .ss {
+  color: var(--hl-string-symbol);
+}
+
+.theme-github .highlight .bp {
+  color: var(--hl-builtin-pseudo);
+}
+
+.theme-github .highlight .vc, .theme-github .highlight .vg, .theme-github .highlight .vi {
+  color: var(--hl-variable);
+}
+
+.theme-github .highlight .il {
+  color: var(--hl-number);
+}
+
+.theme-github .highlight .line-number {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+}
+
+.theme-github .highlight .line-number::selection {
+  background-color: #0000;
+}
+
+.hover\:bg-lookbook-draggable-hint:hover {
+  background-color: var(--lookbook-draggable-hint);
 }
 
 .hover\:text-gray-900:hover {
@@ -3416,10 +3496,6 @@ input[type="color"]::-webkit-color-swatch {
   color: var(--lookbook-icon-button-stroke-hover);
 }
 
-.hover\:text-lookbook-viewport-handle-icon-stroke-hover:hover {
-  color: var(--lookbook-viewport-handle-icon-stroke-hover);
-}
-
 .hover\:text-lookbook-tabs-text-hover:hover {
   color: var(--lookbook-tabs-text-hover);
 }
@@ -3458,7 +3534,7 @@ input[type="color"]::-webkit-color-swatch {
   outline: 2px solid #0000;
 }
 
-.prose-a\:text-lookbook-prose-link :is(:where(a):not(:where([class~="not-prose"] *))) {
+.prose-a\:text-lookbook-prose-link :where(a):not(:where([class~="not-prose"] *)) {
   color: var(--lookbook-prose-link);
 }