lookbook 2.0.0.beta.2 → 2.0.0.beta.4

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

@@ -1,3 +1,37 @@
+@font-face {
+  font-family: Inter var;
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("../Inter-roman.var.b695afbe.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Inter var;
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("../Inter-italic.var.69eb0fe1.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Source Code Variable;
+  font-weight: 200 900;
+  font-style: normal;
+  font-stretch: normal;
+  src: url("../SourceCodeVariable-Roman.ttf.118e9f22.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Source Code Variable;
+  font-weight: 200 900;
+  font-style: italic;
+  font-stretch: normal;
+  src: url("../SourceCodeVariable-Italic.ttf.09b4354a.woff2") format("woff2");
+}
+
 *, :before, :after {
   box-sizing: border-box;
   border: 0 solid #e5e7eb;
@@ -11,7 +45,7 @@ html {
   -webkit-text-size-adjust: 100%;
   tab-size: 4;
   font-feature-settings: normal;
-  font-family: -apple-system, \.SFNSText-Regular, San Francisco, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
   line-height: 1.5;
 }
 
@@ -47,7 +81,7 @@ b, strong {
 }
 
 code, kbd, samp, pre {
-  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
+  font-family: Source Code Variable, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
   font-size: 1em;
 }
 
@@ -345,7 +379,7 @@ body {
   color: var(--lookbook-text);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-family: -apple-system, \.SFNSText-Regular, San Francisco, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
   font-size: .875rem;
   line-height: 1.25rem;
   overflow: hidden;
@@ -1434,7 +1468,6 @@ pre[class*="language-"] {
   width: 100%;
   fill: #0000;
   stroke: currentColor;
-  stroke-width: 2px;
   stroke-linecap: round;
   stroke-linejoin: round;
 }
@@ -1444,6 +1477,76 @@ pre[class*="language-"] {
   padding: 1rem;
 }
 
+[data-component="message"] {
+  width: 100%;
+  border-width: 1px;
+  border-color: var(--lookbook-divider);
+  background-color: var(--lookbook-message-bg);
+  --tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px 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-radius: .25rem;
+  gap: 1.5rem;
+  padding: 1rem;
+  display: flex;
+}
+
+@media (min-width: 480px) {
+  [data-component="message"] {
+    padding: 1.5rem;
+  }
+}
+
+[data-component="message"].icon-right {
+  flex-direction: row-reverse;
+  align-items: center;
+}
+
+[data-component="message"].icon-left {
+  align-items: flex-start;
+}
+
+[data-component="message"] .message-title {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-transform: uppercase;
+  letter-spacing: .025em;
+  color: var(--lookbook-message-title);
+  margin-bottom: .5rem;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.5rem;
+  overflow: hidden;
+}
+
+[data-component="message"] .message-icon {
+  opacity: .3;
+  flex: none;
+  display: none;
+}
+
+@media (min-width: 480px) {
+  [data-component="message"] .message-icon {
+    display: block;
+  }
+}
+
+[data-component="message"].theme-error {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 202 202 / var(--tw-border-opacity));
+}
+
+[data-component="message"].theme-error .message-title {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity));
+}
+
+[data-component="message"].theme-error .message-icon {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity));
+  opacity: .5;
+}
+
 [data-component="nav"] .nav-action {
   width: 100%;
   cursor: pointer;
@@ -1486,7 +1589,7 @@ pre[class*="language-"] {
   text-align: left;
   vertical-align: middle;
   padding: 1rem;
-  font-weight: 700;
+  font-weight: 600;
 }
 
 [data-component="params-editor"] table:not(.linear) thead th.param-label {
@@ -1508,7 +1611,7 @@ pre[class*="language-"] {
 }
 
 [data-component="params-editor"] table:not(.linear) tbody td.param-label {
-  font-weight: 700;
+  font-weight: 600;
 }
 
 [data-component="params-editor"] table:not(.linear) tbody .param-input-wrapper {
@@ -1546,24 +1649,32 @@ pre[class*="language-"] {
 }
 
 [data-component="params-editor"] table.linear td.param-label {
-  font-weight: 700;
+  font-weight: 600;
 }
 
 [data-component="params-editor"] table.linear td.param-description-empty {
   display: none;
 }
 
+[data-component="prose"] {
+  letter-spacing: -.015em !important;
+}
+
 [data-component="prose"] [data-component="code"] {
   border-width: 1px;
   border-color: var(--lookbook-divider);
   border-radius: .375rem;
 }
 
-[data-component="prose"] [data-component="embed"], [data-component="prose"] [data-component="code"] {
+[data-component="prose"] [data-component="embed"], [data-component="prose"] [data-component="code"], [data-component="prose"] [data-lookbook-embed] {
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
 
+[data-component="prose"] [data-lookbook-embed] {
+  border-radius: .375rem;
+}
+
 [data-component="tabs-dropdown-tab"]:not(.hidden) {
   border-bottom-width: 1px;
   border-bottom-color: var(--lookbook-divider);
@@ -1751,10 +1862,6 @@ select.compact {
   position: relative;
 }
 
-.sticky {
-  position: sticky;
-}
-
 .-inset-px {
   inset: -1px;
 }
@@ -1873,6 +1980,10 @@ select.compact {
   margin-bottom: 1.5rem;
 }
 
+.mb-7 {
+  margin-bottom: 1.75rem;
+}
+
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -1921,14 +2032,6 @@ select.compact {
   margin-top: 3rem;
 }
 
-.mt-2 {
-  margin-top: .5rem;
-}
-
-.mt-3 {
-  margin-top: .75rem;
-}
-
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -2033,6 +2136,10 @@ select.compact {
   min-height: 0;
 }
 
+.min-h-\[50vh\] {
+  min-height: 50vh;
+}
+
 .w-11 {
   width: 2.75rem;
 }
@@ -2053,10 +2160,6 @@ select.compact {
   width: 1.25rem;
 }
 
-.w-\[140px\] {
-  width: 140px;
-}
-
 .w-\[320px\] {
   width: 320px;
 }
@@ -2093,10 +2196,6 @@ select.compact {
   max-width: 1024px;
 }
 
-.max-w-sm {
-  max-width: 24rem;
-}
-
 .flex-none {
   flex: none;
 }
@@ -2105,6 +2204,10 @@ select.compact {
   flex-shrink: 0;
 }
 
+.flex-grow {
+  flex-grow: 1;
+}
+
 .border-collapse {
   border-collapse: collapse;
 }
@@ -2595,8 +2698,8 @@ select.compact {
   padding-bottom: .75rem;
 }
 
-.pb-4 {
-  padding-bottom: 1rem;
+.pb-6 {
+  padding-bottom: 1.5rem;
 }
 
 .pl-0 {
@@ -2660,11 +2763,11 @@ select.compact {
 }
 
 .font-mono {
-  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
+  font-family: Source Code Variable, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 }
 
 .font-sans {
-  font-family: -apple-system, \.SFNSText-Regular, San Francisco, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
 .text-\[11px\] {
@@ -2704,6 +2807,10 @@ select.compact {
   font-weight: 700;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -2720,10 +2827,6 @@ select.compact {
   line-height: 1.25;
 }
 
-.tracking-wide {
-  letter-spacing: .025em;
-}
-
 .tracking-wider {
   letter-spacing: .05em;
 }
@@ -2756,10 +2859,6 @@ select.compact {
   color: rgb(22 163 74 / var(--tw-text-opacity));
 }
 
-.text-lookbook-blank-slate-title {
-  color: var(--lookbook-blank-slate-title);
-}
-
 .text-lookbook-branding-text {
   color: var(--lookbook-branding-text);
 }
@@ -2800,11 +2899,6 @@ select.compact {
   color: var(--lookbook-tabs-text-hover);
 }
 
-.text-red-300 {
-  --tw-text-opacity: 1;
-  color: rgb(252 165 165 / var(--tw-text-opacity));
-}
-
 .text-red-700 {
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity));
@@ -2930,6 +3024,10 @@ select.compact {
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
 
+.bg-checked {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23f3f3f3' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
+}
+
 .tippy-box[data-animation="fade"][data-state="hidden"] {
   opacity: 0;
 }
@@ -3299,7 +3397,6 @@ select.compact {
 
 .theme-github .highlight .err {
   color: var(--hl-error-fg);
-  background-color: var(--hl-error-bg);
 }
 
 .theme-github .highlight .g {
@@ -3308,7 +3405,7 @@ select.compact {
 
 .theme-github .highlight .k {
   color: var(--hl-keyword);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .l {
@@ -3321,7 +3418,7 @@ select.compact {
 
 .theme-github .highlight .o {
   color: var(--hl-operator);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .x {
@@ -3339,7 +3436,7 @@ select.compact {
 
 .theme-github .highlight .cp {
   color: var(--hl-comment-preproc);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .c1 {
@@ -3351,7 +3448,7 @@ select.compact {
   color: var(--hl-comment-special-fg);
   background-color: var(--hl-comment-special-bg);
   font-style: italic;
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .gd {
@@ -3387,12 +3484,12 @@ select.compact {
 
 .theme-github .highlight .gs {
   color: var(--hl-subtle-fg);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .gu {
   color: var(--hl-subheading);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .gt {
@@ -3401,12 +3498,12 @@ select.compact {
 
 .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;
+  font-weight: 600;
 }
 
 .theme-github .highlight .kt {
   color: var(--hl-keyword-subtle);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .ld {
@@ -3431,7 +3528,7 @@ select.compact {
 
 .theme-github .highlight .nc {
   color: var(--hl-class);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .no {
@@ -3448,12 +3545,12 @@ select.compact {
 
 .theme-github .highlight .ne {
   color: var(--hl-exception);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .nf {
   color: var(--hl-function);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .nl {
@@ -3478,7 +3575,7 @@ select.compact {
 
 .theme-github .highlight .ow {
   color: var(--hl-word);
-  font-weight: bold;
+  font-weight: 600;
 }
 
 .theme-github .highlight .w {
@@ -3530,6 +3627,216 @@ select.compact {
   background-color: #0000;
 }
 
+@media (min-width: 1024px) {
+  .lg\:prose-base {
+    font-size: 1rem;
+    line-height: 1.75;
+  }
+
+  .lg\:prose-base :where(p):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+  }
+
+  .lg\:prose-base :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.2em;
+    margin-bottom: 1.2em;
+    font-size: 1.25em;
+    line-height: 1.6;
+  }
+
+  .lg\:prose-base :where(blockquote):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.6em;
+    margin-bottom: 1.6em;
+    padding-left: 1em;
+  }
+
+  .lg\:prose-base :where(h1):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+    margin-bottom: .888889em;
+    font-size: 2.25em;
+    line-height: 1.11111;
+  }
+
+  .lg\:prose-base :where(h2):not(:where([class~="not-prose"] *)) {
+    margin-top: 2em;
+    margin-bottom: 1em;
+    font-size: 1.5em;
+    line-height: 1.33333;
+  }
+
+  .lg\:prose-base :where(h3):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.6em;
+    margin-bottom: .6em;
+    font-size: 1.25em;
+    line-height: 1.6;
+  }
+
+  .lg\:prose-base :where(h4):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.5em;
+    margin-bottom: .5em;
+    line-height: 1.5;
+  }
+
+  .lg\:prose-base :where(img):not(:where([class~="not-prose"] *)) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  .lg\:prose-base :where(video):not(:where([class~="not-prose"] *)) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  .lg\:prose-base :where(figure):not(:where([class~="not-prose"] *)) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+
+  .lg\:prose-base :where(figure > *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .lg\:prose-base :where(figcaption):not(:where([class~="not-prose"] *)) {
+    margin-top: .857143em;
+    font-size: .875em;
+    line-height: 1.42857;
+  }
+
+  .lg\:prose-base :where(code):not(:where([class~="not-prose"] *)) {
+    font-size: .875em;
+  }
+
+  .lg\:prose-base :where(h2 code):not(:where([class~="not-prose"] *)) {
+    font-size: .875em;
+  }
+
+  .lg\:prose-base :where(h3 code):not(:where([class~="not-prose"] *)) {
+    font-size: .9em;
+  }
+
+  .lg\:prose-base :where(pre):not(:where([class~="not-prose"] *)) {
+    border-radius: .375rem;
+    margin-top: 1.71429em;
+    margin-bottom: 1.71429em;
+    padding: .857143em 1.14286em;
+    font-size: .875em;
+    line-height: 1.71429;
+  }
+
+  .lg\:prose-base :where(ol):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+    padding-left: 1.625em;
+  }
+
+  .lg\:prose-base :where(ul):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+    padding-left: 1.625em;
+  }
+
+  .lg\:prose-base :where(li):not(:where([class~="not-prose"] *)) {
+    margin-top: .5em;
+    margin-bottom: .5em;
+  }
+
+  .lg\:prose-base :where(ol > li):not(:where([class~="not-prose"] *)) {
+    padding-left: .375em;
+  }
+
+  .lg\:prose-base :where(ul > li):not(:where([class~="not-prose"] *)) {
+    padding-left: .375em;
+  }
+
+  .lg\:prose-base :where(.lg\:prose-base > ul > li p):not(:where([class~="not-prose"] *)) {
+    margin-top: .75em;
+    margin-bottom: .75em;
+  }
+
+  .lg\:prose-base :where(.lg\:prose-base > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.25em;
+  }
+
+  .lg\:prose-base :where(.lg\:prose-base > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+    margin-bottom: 1.25em;
+  }
+
+  .lg\:prose-base :where(.lg\:prose-base > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.25em;
+  }
+
+  .lg\:prose-base :where(.lg\:prose-base > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+    margin-bottom: 1.25em;
+  }
+
+  .lg\:prose-base :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
+    margin-top: .75em;
+    margin-bottom: .75em;
+  }
+
+  .lg\:prose-base :where(hr):not(:where([class~="not-prose"] *)) {
+    margin-top: 3em;
+    margin-bottom: 3em;
+  }
+
+  .lg\:prose-base :where(hr + *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .lg\:prose-base :where(h2 + *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .lg\:prose-base :where(h3 + *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .lg\:prose-base :where(h4 + *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .lg\:prose-base :where(table):not(:where([class~="not-prose"] *)) {
+    font-size: .875em;
+    line-height: 1.71429;
+  }
+
+  .lg\:prose-base :where(thead th):not(:where([class~="not-prose"] *)) {
+    padding-bottom: .571429em;
+    padding-left: .571429em;
+    padding-right: .571429em;
+  }
+
+  .lg\:prose-base :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
+    padding-left: 0;
+  }
+
+  .lg\:prose-base :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
+    padding-right: 0;
+  }
+
+  .lg\:prose-base :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
+    padding: .571429em;
+  }
+
+  .lg\:prose-base :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
+    padding-left: 0;
+  }
+
+  .lg\:prose-base :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
+    padding-right: 0;
+  }
+
+  .lg\:prose-base :where(.lg\:prose-base > :first-child):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+
+  .lg\:prose-base :where(.lg\:prose-base > :last-child):not(:where([class~="not-prose"] *)) {
+    margin-bottom: 0;
+  }
+}
+
 .hover\:bg-lookbook-button-bg-hover:hover {
   background-color: var(--lookbook-button-bg-hover);
 }
@@ -3590,11 +3897,53 @@ select.compact {
   outline: 2px solid #0000;
 }
 
+.prose-headings\:font-semibold :where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"] *)) {
+  font-weight: 600;
+}
+
+.prose-h1\:font-bold :where(h1):not(:where([class~="not-prose"] *)) {
+  font-weight: 700;
+}
+
 .prose-a\:text-lookbook-prose-link :where(a):not(:where([class~="not-prose"] *)) {
   color: var(--lookbook-prose-link);
 }
 
+@media (min-width: 480px) {
+  .xs\:mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .xs\:w-auto {
+    width: auto;
+  }
+
+  .xs\:min-w-\[440px\] {
+    min-width: 440px;
+  }
+
+  .xs\:max-w-\[680px\] {
+    max-width: 680px;
+  }
+
+  .xs\:py-8 {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+}
+
+@media (min-width: 640px) {
+  .sm\:p-8 {
+    padding: 2rem;
+  }
+}
+
 @media (min-width: 768px) {
+  .md\:p-12 {
+    padding: 3rem;
+  }
+
   .md\:px-10 {
     padding-left: 2.5rem;
     padding-right: 2.5rem;
@@ -3605,4 +3954,14 @@ select.compact {
   }
 }
 
+@media (min-width: 1024px) {
+  .lg\:mb-9 {
+    margin-bottom: 2.25rem;
+  }
+
+  .lg\:pb-8 {
+    padding-bottom: 2rem;
+  }
+}
+
 /*# sourceMappingURL=lookbook.css.map */