lookbook 2.0.0.beta.7 → 2.0.0.beta.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2aeae40db8c7d4b78350a2de8a0b95cdf2728e539bd7875a9c7562116db2bca4
-  data.tar.gz: a9167271b7ba9af1942b13ef871b045f76c5a71ff7dc6e1771c5fae94934abc0
+  metadata.gz: cfcdb2b51f339e4449f640d3dc59e1dcacee5f8c9e009627d7e7680bc75c4f5f
+  data.tar.gz: 27a547cf8a89a2b7bac979e20e5e25efb89863b29c7c362df6a118fb18773df4
 SHA512:
-  metadata.gz: 858c8effb4094dbd6aba5cb125b0e241e6c8f49959fb7437ce96bd1925afb9994d8d11cda03ef456823627f6af2732cfddbdf96e897e3bdb3fecc0081755e356
-  data.tar.gz: 66680a4c10c8be27d25a4cf790d3833a2d93b6ffcef1ca9c965f27f350962d4d000c668820b59ac02326b783db25c5f9499ca4994afe2fde0340e5c8d3df89bf
+  metadata.gz: 5de1e882509fedeef207ec7cf38c51e8e98470c34dfd08a1e6b27f6c6f4f3b56b72405bb4c138dcbf42effaebf79584ea48f23f3235cc46a81909b7ded762e1c
+  data.tar.gz: 0b27df206efbfc0469ea73026ea57055cbca2600939f350d238dce0f2bc758bb16353945f13d7bda196129b14a5e2c7355917a6d4d02a1a3ae9dac9b42d4c61a

data/README.md

@@ -54,6 +54,13 @@ Tests can be run using the `rake spec` or `bundle exec rspec` commands.
 
 The dummy app that the tests are being run against can be viewed by running the `bin/dummy` command and then browsing to http://localhost:9292/lookbook
 
+### Releases
+
+Lookbook uses [Release It!](https://github.com/release-it/release-it) to automate the release process.
+
+Running `npm run release` will start the process of publishing a new release and walks though all the steps from picking a version number to publishing the updated gem.
+
+Publishing a release requires write permissions for this repository (ViewComponent/lookbook) and 2FA publish permissions for Lookbook on RubyGems.
 
 ## Contributing
 

data/app/components/lookbook/page_tabs/component.html.erb

@@ -1,5 +1,5 @@
  <%= render_component_tag "x-data": "{ activeTab: null }" do %>
-  <div class="flex w-full border-b border-lookbook-divider mb-6">
+  <div class="flex w-full border-b border-lookbook-divider mb-6 lg:mb-8">
     <%= lookbook_render :tabs, theme: :page do |t| %>
       <% @tabs.each do |props| %>
         <%= t.with_tab **props %>
@@ -9,7 +9,7 @@
   <%= lookbook_render :tab_panels do |t| %>
     <% @tabs.each do |props| %>
       <% t.with_panel name: props[:name] do %>
-        <%= lookbook_render :prose, markdown: props[:markdown], class: "max-w-none flex-none" do %>
+        <%= lookbook_render :prose, size: :md, markdown: props[:markdown], class: "max-w-none flex-none" do %>
           <%== props[:tab_content] %>
         <% end %>
       <% end %>

data/app/components/lookbook/params/field/component.rb

@@ -17,7 +17,7 @@ module Lookbook
         escaped_value = json_escape(param.value.to_s)
         wrapper_attrs = {
           data: {"param-input": param.input},
-          "x-data": "paramsInputComponent({name: '#{param.name}', value: '#{escaped_value}'})"
+          "x-data": "paramsInputComponent({name: \"#{param.name}\", value: \"#{escaped_value}\"})"
         }
         @rendered_input = tag.div(**wrapper_attrs) { html.html_safe }
       end

data/app/components/lookbook/prose/component.css

@@ -1,6 +1,8 @@
 @layer components {
   [data-component="prose"] {
-    letter-spacing: -0.015em !important;
+    @apply font-prose;
+
+    /* letter-spacing: -0.015em !important; */
 
     [data-component="code"] {
       @apply border border-lookbook-divider rounded-md;

data/app/components/lookbook/prose/component.html.erb

@@ -3,6 +3,7 @@
     text-lookbook-prose-text bg-lookbook-prose-bg prose-a:text-lookbook-prose-link
     prose-headings:font-semibold
     prose-h1:font-bold
+    prose-h2:border-b prose-h2:border-lookbook-divider prose-h2:pb-3
   " do %>
   <%== rendered_content %>
 <% end %>

data/app/components/lookbook/split_layout/component.html.erb

@@ -2,10 +2,10 @@
   <% panes.each.with_index(1) do |pane, i| %>
     <%= pane %>
     <% if i < panes.size %>
-      <div class="bg-lookbook-divider relative z-50" x-init="registerGutter">
+      <div class="split-layout-gutter bg-lookbook-divider relative z-50" x-init="registerGutter">
         <div class="absolute z-10 bg-transparent hover:bg-lookbook-draggable-hint transition-all" :class="{
-          'w-[9px] h-full -translate-x-1/2 cursor-[col-resize]': vertical,
-          'h-[9px] w-full -translate-y-1/2 cursor-[row-resize]': horizontal
+          'w-[9px] h-full -translate-x-1/2 cursor-[col-resize] split-layout-gutter-vertical': vertical,
+          'h-[9px] w-full -translate-y-1/2 cursor-[row-resize] split-layout-gutter-horizontal': horizontal
         }"></div>
       </div>
     <% end %>

data/app/helpers/lookbook/application_helper.rb

@@ -1,7 +1,7 @@
 module Lookbook
   module ApplicationHelper
     def lookbook_asset_path(file, version: true)
-      path = "/lookbook-assets/#{file}".gsub("//", "/")
+      path = "#{Engine.host_config.relative_url_root}/lookbook-assets/#{file}".gsub("//", "/")
       version ? "#{path}?v=#{Lookbook::VERSION}" : path
     end
 

data/app/views/lookbook/errors/default.html.erb

@@ -5,7 +5,7 @@
     </header>
 
     <div class="px-8 py-6 mb-8 border-t border-b border-red-200 bg-red-100 text-base leading-relaxed">
-      <pre class="whitespace-pre-wrap font-sans leading-tight text-red-900"><%= @error.message %></pre>
+      <pre class="whitespace-pre-wrap font-ui leading-tight text-red-900"><%= @error.message %></pre>
     </div>
 
     <% if @error.file_path %>

data/app/views/lookbook/inspector/show.html.erb

@@ -1,5 +1,6 @@
 <main class="h-[calc(100vh_-_2.5rem)]">
   <%= lookbook_render :split_layout,
+    id: "inspector",
     alpine_data: "$store.layout.inspector",
     ":class": "($store.inspector.drawer.hidden || #{@drawer_panels.none?}) && '!grid-rows-[1fr] !grid-cols-[1fr]'",
     data: {

data/app/views/lookbook/pages/show.html.erb

@@ -3,86 +3,93 @@
   x-data="{}"
   @navigation:complete.window="$refs.scroller.scrollTop = 0">
   <div class="h-full bg-lookbook-page-bg relative">
-    <% unless @error %>
-
-      <div class="absolute top-0 right-0 pt-1 pr-0 pl-1 pb-1 rounded-bl-md">
-        <div class="bg-lookbook-page-bg opacity-90 absolute inset-0 w-full h-full z-0"></div>
-        <div class="relative z-10 flex items-center">
+    <div class="overflow-auto scroll-smooth w-full max-h-full pb-12" x-ref="scroller">
+      <div class="h-full flex flex-col">
+        <% if @page.header? %>
+          <header id="page-header"
+            class="px-4 md:px-10 mb-8 pt-8 md:pt-10 lg:pt-12 pb-6 lg:pb-8 lg:mb-9 bg-lookbook-page-header-bg border-b border-lookbook-page-header-border relative">
+            <div class="w-full max-w-screen-lg mx-auto">
+              <%= lookbook_render :prose, size: :md, markdown: false, class: "bg-transparent max-w-none flex-none" do %>
+                <h1 class="text-lookbook-page-header-text"><%= @page.title %></h1>
+              <% end %>
+            </div>
+            <% unless @error %>
+              <div class="absolute top-0 right-0 pt-1 pr-0 pl-1 pb-1 rounded-bl-md">
+                <div class="bg-transparent opacity-90 absolute inset-0 w-full h-full z-0"></div>
+                <div class="relative z-10 flex items-center scale-75 -mt-1 -mr-1.5 md:scale-100 md:mt-0 md:-mr-[2px]">
 
-        <% if @previous_page %>
-          <%= lookbook_render :icon_button,
-            size: :lg,
-            icon: :chevron_left,
-            tooltip: "Previous page",
-            href: lookbook_page_path(@previous_page.lookup_path),
-            class: "pr-0.5 bg-transparent" %>
-        <% else %>
-          <%= lookbook_render :icon_button,
-            size: :lg,
-            icon: :chevron_left,
-            disabled: true,
-            class: "opacity-50 !cursor-default pr-0.5 bg-transparent" %>
-        <% end %>
+                <% if @previous_page %>
+                  <%= lookbook_render :icon_button,
+                    size: :lg,
+                    icon: :chevron_left,
+                    tooltip: "Previous page",
+                    href: lookbook_page_path(@previous_page.lookup_path),
+                    class: "pr-0.5 bg-transparent" %>
+                <% else %>
+                  <%= lookbook_render :icon_button,
+                    size: :lg,
+                    icon: :chevron_left,
+                    disabled: true,
+                    class: "opacity-50 !cursor-default pr-0.5 bg-transparent" %>
+                <% end %>
 
-        <% if @next_page %>
-          <%= lookbook_render :icon_button,
-            size: :lg,
-            icon: :chevron_right,
-            tooltip: "Next page",
-            href: lookbook_page_path(@next_page.lookup_path),
-            class: "pl-0.5 bg-transparent" %>
-        <% else %>
-          <%= lookbook_render :icon_button,
-            size: :lg,
-            icon: :chevron_right,
-            disabled: true,
-            class: "opacity-50 !cursor-default pl-0.5 bg-transparent" %>
-        <% end %>
-        </div>
-      </div>
-    <% end %>
-
-    <div class="px-4 md:px-10 pt-8 md:pt-10 overflow-auto scroll-smooth w-full max-h-full pb-12" x-ref="scroller">
-      <div class="w-full max-w-screen-lg mx-auto h-full flex flex-col">
-        <% if @page.header? %>
-          <header id="page-header" class="mb-7 pb-6 lg:mb-9 lg:pb-8 border-b border-lookbook-divider">
-            <%= lookbook_render :prose, size: :md, markdown: false, class: "max-w-none flex-none" do %>
-              <h1><%= @page.title %></h1>
+                <% if @next_page %>
+                  <%= lookbook_render :icon_button,
+                    size: :lg,
+                    icon: :chevron_right,
+                    tooltip: "Next page",
+                    href: lookbook_page_path(@next_page.lookup_path),
+                    class: "pl-0.5 bg-transparent" %>
+                <% else %>
+                  <%= lookbook_render :icon_button,
+                    size: :lg,
+                    icon: :chevron_right,
+                    disabled: true,
+                    class: "opacity-50 !cursor-default pl-0.5 bg-transparent" %>
+                <% end %>
+                </div>
+              </div>
             <% end %>
           </header>
         <% end %>
 
-        <%= lookbook_render :prose, size: :md, id: "page-content", markdown: false, class: "max-w-none flex-none min-h-[50vh]" do %>
-          <%= @page_content %>
-        <% end %>
+        <div class="px-4 md:px-10 min-h-[calc(100vh_-_400px)]">
+          <div class="w-full max-w-screen-lg mx-auto">
+            <%= lookbook_render :prose, size: :md, id: "page-content", markdown: false, class: "max-w-none flex-none" do %>
+              <%= @page_content %>
+            <% end %>
 
-        <% if @page.sections.any? %>
-          <%= lookbook_render :page_tabs, id: "page-tabbed-sections", markdown: false, class: "mt-6" do |page_tabs| %>
-            <% @page.sections.each do |section| %>
-              <% page_tabs.with_tab name: "page-section-#{section.name}", label: section.label do %>
-                <%= page_controller.render_page(section) %>
+            <% if @page.sections.any? %>
+              <%= lookbook_render :page_tabs, id: "page-tabbed-sections", markdown: false, class: "mt-6 lg:mt-8" do |page_tabs| %>
+                <% @page.sections.each do |section| %>
+                  <% page_tabs.with_tab name: "page-section-#{section.name}", label: section.label do %>
+                    <%= page_controller.render_page(section) %>
+                  <% end %>
+                <% end %>
               <% end %>
             <% end %>
-          <% end %>
-        <% end %>
+          </div>
+        </div>
 
         <% if @page.footer? && @pages.many? %>
-          <footer id="page-footer" class="flex items-center justify-between border-t border-gray-300 mt-12 pt-8 pb-10 ">
+          <footer id="page-footer" class="mt-12 lg:mt-16 px-4 md:px-10">
+          <div class=" border-t border-gray-300 w-full max-w-screen-lg mx-auto pt-8 pb-10 flex items-center justify-between ">
             <% if @previous_page %>
               <a href="<%= lookbook_page_path @previous_page.lookup_path %>"
-                class="flex items-center flex-none">
+                class="flex items-center flex-none max-w-[40%] overflow-hidden">
                 <%= icon  :arrow_left, size: 4, class: "hover:text-indigo-800" %>
-                <span class="ml-2 underline"><%= @previous_page.title %></span>
+                <span class="ml-2 underline truncate"><%= @previous_page.title %></span>
               </a>
             <% end %>
 
             <% if @next_page %>
               <a href="<%= lookbook_page_path @next_page.lookup_path %>"
-                class="flex items-center flex-none ml-auto">
-                <span class="mr-2 underline"><%= @next_page.title %></span>
+                class="flex items-center flex-none ml-auto max-w-[40%] overflow-hidden">
+                <span class="mr-2 underline truncate"><%= @next_page.title %></span>
                 <%= icon  :arrow_right, size: 4, class: "hover:text-indigo-800" %>
               </a>
             <% end %>
+          </div>
           </footer>
         <% end %>
       </div>

data/assets/css/lookbook.css

@@ -19,7 +19,7 @@
   }
 
   body {
-    @apply text-lookbook-text font-sans text-sm antialiased overflow-hidden;
+    @apply text-lookbook-text font-ui text-sm overflow-hidden;
   }
 
   [x-cloak] {
@@ -142,4 +142,8 @@
     background-size: 1.2em 1.2em;
     background-position: right 0.4rem center;
   }
+
+  #inspector .split-layout-gutter-horizontal {
+    top: 4px;
+  }
 }

data/assets/css/themes/blue.css

@@ -71,6 +71,9 @@
   --lookbook-message-border: var(--lookbook-divider);
   --lookbook-message-title: var(--lookbook-base-600);
   --lookbook-message-text: var(--lookbook-text);
+  --lookbook-page-header-bg: var(--lookbook-base-50);
+  --lookbook-page-header-text: var(--lookbook-text);
+  --lookbook-page-header-border: var(--lookbook-divider);
   --lookbook-embed-title: var(--lookbook-text);
   --lookbook-branding-text: var(--lookbook-header-text);
 }

data/assets/css/themes/green.css

@@ -71,6 +71,9 @@
   --lookbook-message-border: var(--lookbook-divider);
   --lookbook-message-title: var(--lookbook-base-600);
   --lookbook-message-text: var(--lookbook-text);
+  --lookbook-page-header-bg: var(--lookbook-base-50);
+  --lookbook-page-header-text: var(--lookbook-text);
+  --lookbook-page-header-border: var(--lookbook-divider);
   --lookbook-embed-title: var(--lookbook-text);
   --lookbook-branding-text: var(--lookbook-header-text);
 }

data/assets/css/themes/indigo.css

@@ -71,6 +71,9 @@
   --lookbook-message-border: var(--lookbook-divider);
   --lookbook-message-title: var(--lookbook-base-600);
   --lookbook-message-text: var(--lookbook-text);
+  --lookbook-page-header-bg: var(--lookbook-base-50);
+  --lookbook-page-header-text: var(--lookbook-text);
+  --lookbook-page-header-border: var(--lookbook-divider);
   --lookbook-embed-title: var(--lookbook-text);
   --lookbook-branding-text: var(--lookbook-header-text);
 }

data/assets/css/themes/rose.css

@@ -71,6 +71,9 @@
   --lookbook-message-border: var(--lookbook-divider);
   --lookbook-message-title: var(--lookbook-base-600);
   --lookbook-message-text: var(--lookbook-text);
+  --lookbook-page-header-bg: var(--lookbook-base-50);
+  --lookbook-page-header-text: var(--lookbook-text);
+  --lookbook-page-header-border: var(--lookbook-divider);
   --lookbook-embed-title: var(--lookbook-text);
   --lookbook-branding-text: var(--lookbook-header-text);
 }

data/assets/css/themes/zinc.css

@@ -71,6 +71,9 @@
   --lookbook-message-border: var(--lookbook-divider);
   --lookbook-message-title: var(--lookbook-base-600);
   --lookbook-message-text: var(--lookbook-text);
+  --lookbook-page-header-bg: var(--lookbook-base-50);
+  --lookbook-page-header-text: var(--lookbook-text);
+  --lookbook-page-header-border: var(--lookbook-divider);
   --lookbook-embed-title: var(--lookbook-text);
   --lookbook-branding-text: var(--lookbook-header-text);
 }

data/lib/lookbook/engine.rb

@@ -37,8 +37,20 @@ module Lookbook
         vc_config = Engine.host_config.view_component
 
         opts.preview_paths += vc_config.preview_paths
-        opts.preview_controller = vc_config.preview_controller
-        opts.preview_layout = vc_config.default_preview_layout
+
+        # sync preview controller and layout setting between Lookbook and ViewComponent
+        if opts.preview_controller == "Lookbook::PreviewController" ||
+            vc_config.preview_controller != ViewComponent::Config.defaults.preview_controller
+          opts.preview_controller = vc_config.preview_controller
+        else
+          vc_config.preview_controller = opts.preview_controller
+        end
+
+        if opts.preview_layout.nil? || vc_config.default_preview_layout.present?
+          opts.preview_layout = vc_config.default_preview_layout
+        else
+          vc_config.default_preview_layout = opts.preview_layout
+        end
 
         vc_config.show_previews = true
 

data/lib/lookbook/version.rb

@@ -1,3 +1,3 @@
 module Lookbook
-  VERSION = "2.0.0.beta.7"
+  VERSION = "2.0.0.beta.8"
 end

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

@@ -45,7 +45,7 @@ html {
   -webkit-text-size-adjust: 100%;
   tab-size: 4;
   font-feature-settings: normal;
-  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-family: 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;
 }
 
@@ -377,8 +377,6 @@ html {
 
 body {
   color: var(--lookbook-text);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
   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;
@@ -1677,7 +1675,7 @@ pre[class*="language-"] {
 }
 
 [data-component="prose"] {
-  letter-spacing: -.015em !important;
+  font-family: system-ui, sans-serif;
 }
 
 [data-component="prose"] [data-component="code"] {
@@ -1858,6 +1856,10 @@ select.compact {
   line-height: 1.1rem;
 }
 
+#inspector .split-layout-gutter-horizontal {
+  top: 4px;
+}
+
 .pointer-events-none {
   pointer-events: none;
 }
@@ -1980,6 +1982,18 @@ select.compact {
   margin-left: -.75rem;
 }
 
+.-mr-1 {
+  margin-right: -.25rem;
+}
+
+.-mr-1\.5 {
+  margin-right: -.375rem;
+}
+
+.-mt-1 {
+  margin-top: -.25rem;
+}
+
 .-mt-px {
   margin-top: -1px;
 }
@@ -2000,10 +2014,6 @@ select.compact {
   margin-bottom: 1.5rem;
 }
 
-.mb-7 {
-  margin-bottom: 1.75rem;
-}
-
 .mb-8 {
   margin-bottom: 2rem;
 }
@@ -2156,8 +2166,8 @@ select.compact {
   min-height: 0;
 }
 
-.min-h-\[50vh\] {
-  min-height: 50vh;
+.min-h-\[calc\(100vh_-_400px\)\] {
+  min-height: calc(100vh - 400px);
 }
 
 .w-11 {
@@ -2204,6 +2214,10 @@ select.compact {
   min-width: 180px;
 }
 
+.max-w-\[40\%\] {
+  max-width: 40%;
+}
+
 .max-w-\[420px\] {
   max-width: 420px;
 }
@@ -2272,6 +2286,12 @@ select.compact {
   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));
 }
 
+.scale-75 {
+  --tw-scale-x: .75;
+  --tw-scale-y: .75;
+  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));
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -2534,6 +2554,10 @@ select.compact {
   border-color: var(--lookbook-dropdown-divider);
 }
 
+.border-lookbook-page-header-border {
+  border-color: var(--lookbook-page-header-border);
+}
+
 .border-lookbook-tabs-border-active {
   border-color: var(--lookbook-tabs-border-active);
 }
@@ -2622,6 +2646,10 @@ select.compact {
   background-color: var(--lookbook-page-bg);
 }
 
+.bg-lookbook-page-header-bg {
+  background-color: var(--lookbook-page-header-bg);
+}
+
 .bg-lookbook-params-editor-bg {
   background-color: var(--lookbook-params-editor-bg);
 }
@@ -2847,7 +2875,7 @@ select.compact {
   font-family: Source Code Variable, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
 }
 
-.font-sans {
+.font-ui {
   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;
 }
 
@@ -2968,6 +2996,10 @@ select.compact {
   color: var(--lookbook-nav-icon-stroke);
 }
 
+.text-lookbook-page-header-text {
+  color: var(--lookbook-page-header-text);
+}
+
 .text-lookbook-prose-text {
   color: var(--lookbook-prose-text);
 }
@@ -4024,6 +4056,18 @@ select.compact {
   font-weight: 700;
 }
 
+.prose-h2\:border-b :where(h2):not(:where([class~="not-prose"] *)) {
+  border-bottom-width: 1px;
+}
+
+.prose-h2\:border-lookbook-divider :where(h2):not(:where([class~="not-prose"] *)) {
+  border-color: var(--lookbook-divider);
+}
+
+.prose-h2\:pb-3 :where(h2):not(:where([class~="not-prose"] *)) {
+  padding-bottom: .75rem;
+}
+
 .prose-a\:text-lookbook-prose-link :where(a):not(:where([class~="not-prose"] *)) {
   color: var(--lookbook-prose-link);
 }
@@ -4059,6 +4103,20 @@ select.compact {
 }
 
 @media (min-width: 768px) {
+  .md\:-mr-\[2px\] {
+    margin-right: -2px;
+  }
+
+  .md\:mt-0 {
+    margin-top: 0;
+  }
+
+  .md\:scale-100 {
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    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));
+  }
+
   .md\:p-12 {
     padding: 3rem;
   }
@@ -4074,13 +4132,29 @@ select.compact {
 }
 
 @media (min-width: 1024px) {
+  .lg\:mb-8 {
+    margin-bottom: 2rem;
+  }
+
   .lg\:mb-9 {
     margin-bottom: 2.25rem;
   }
 
+  .lg\:mt-16 {
+    margin-top: 4rem;
+  }
+
+  .lg\:mt-8 {
+    margin-top: 2rem;
+  }
+
   .lg\:pb-8 {
     padding-bottom: 2rem;
   }
+
+  .lg\:pt-12 {
+    padding-top: 3rem;
+  }
 }
 
 /*# sourceMappingURL=lookbook.css.map */

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

@@ -1 +1 @@
-{"mappings":"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;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;;AAOA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;;AAMA;;;;;;AAMA;;;;;;AAMA;;;;;;AAMA;;;;;;AAMA;;;;;;AAMA;;;;;;AAMA;;;;;;AAMA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;;AAMA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;;;AAMA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;AAIA;;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;;AAMA;;;;;AAKA;;;;AAIA;;;;;;AAMA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;AAIA;;;;;;AAMA;;;;;;AAMA;;;;;;AAMA;;;;;;AAMA;;;;;;AAMA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAEA;;;;AAEA;;;;;;;;;;;;AAEA;;;;AAEA;;;;;;;;AAEA;;;;AAEA;;;;;;;;AAEA;;;;AAEA;;;;;;;AAEA;;;;AAEA;;;;;;;AAEA;;;;AAEA;;;;;;AAEA;;;;;;;AAEA;;;;;;AAEA;;;;AAEA;;;;;;;AAEA;;;;;;;AAEA;;;;;;;AAEA;;;;;;;AAEA;;;;AAEA;;;;AAEA;;;;AAEA;;;;AAEA;;;;AAEA;;;;;;;;AAEA;;;;;;;;AASA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;;;;;;AAWA;;;;;;AAMA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA;;;;AAIA;;;;;;AAMA;;;;AAIA;;;;;AAOA;;;;AAMA;;;;AAMA;;;;;AAOA;;;;AAMA;;;;AAOA;;;;;AAOA;;;;AAMA;;;;AAMA;;;;;AAOA;;;;;AAOA;;;;;AAOA;;;;;;;AASA;;;;;AAOA;;;;;AAOA;;;;AAMA;;;;AAMA;;;;;AAOA;;;;AAMA;;;;AAMA;;;;;AAOA;;;;;AAOA;;;;AAMA;;;;;AAmCA;;;;;AAOA;;;;AAMA;;;;AAMA;;;;AAMA;;;;AAMA;;;;AAMA;;;;;AAOA;;;;AAMA;;;;AAMA;;;;AAMA;;;;;AAOA;;;;;AAOA;;;;AAMA;;;;AAMA;;;;AAYA;;;;AAMA;;;;AAMA;;;;;AAOA;;;;AAMA;;;;AAwBA;;;;AA0CA;;;;AAMA;;;;AAMA;;;;AAMA;;;;AAMA;;;;AAMA;;;;AAkBA;;;;AAQA;;;;;AAOA;;;;AAUA;EAEE;;;;;EAKA;;;;;EAKA;;;;;;;EAOA;;;;;;EAMA;;;;;;;EAOA;;;;;;;EAOA;;;;;;;EAOA;;;;;;EAMA;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;;EAMA;;;;EAIA;;;;EAIA;;;;EAIA;;;;;;;;;EAYA;;;;;;EAMA;;;;;;EAMA;;;;;EAKA;;;;EAIA;;;;EAIA;;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;;EAKA;;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;;EAKA;;;;;;EAMA;;;;EAIA;;;;EAIA;;;;EAOA;;;;EAIA;;;;EAIA;;;;EAIA;;;;;AAKF;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;;AAMA;;;;;;AAMA;;;;AAIA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;EAEE;;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAIA;;;;;;AAMF;EAEE;;;;;AAKF;EAEE;;;;EAIA;;;;;EAKA;;;;;AAKF;EAEE;;;;EAIA","sources":["assets/css/lookbook.css"],"sourcesContent":["@import \"./fonts.css\";\n@import \"tailwindcss/base\";\n@import \"tailwindcss/components\";\n@import \"tailwindcss/utilities\";\n\n@import \"./tooltip.css\";\n\n@import-glob \"../../app/components/lookbook/**/*/component.css\";\n\n@layer base {\n  html {\n    @apply scroll-smooth h-screen;\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    html {\n      @apply scroll-auto;\n    }\n  }\n\n  body {\n    @apply text-lookbook-text font-sans text-sm antialiased overflow-hidden;\n  }\n\n  [x-cloak] {\n    @apply !hidden;\n  }\n\n  pre[class*=\"language-\"] {\n    @apply !p-0 !m-0;\n  }\n\n  ::-webkit-scrollbar {\n    @apply w-1 h-1;\n  }\n\n  ::-webkit-scrollbar-track {\n    @apply bg-transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    @apply transition-colors rounded-full\tbg-clip-content bg-lookbook-scrollbar;\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    @apply bg-lookbook-scrollbar-hover;\n  }\n}\n\n@layer utilities {\n  .bg-checked {\n    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\");\n  }\n}\n\n@layer components {\n  [type=\"text\"],\n  [type=\"email\"],\n  [type=\"url\"],\n  [type=\"password\"],\n  [type=\"number\"],\n  [type=\"date\"],\n  [type=\"datetime-local\"],\n  [type=\"month\"],\n  [type=\"search\"],\n  [type=\"tel\"],\n  [type=\"time\"],\n  [type=\"week\"],\n  textarea,\n  select {\n    @apply text-lookbook-input-text placeholder:text-lookbook-input-text-placeholder placeholder:italic;\n    @apply border-lookbook-input-border focus:ring-lookbook-input-border-focus focus:border-lookbook-input-border-focus;\n    @apply rounded-md text-sm w-full bg-lookbook-input-bg block;\n  }\n\n  input[type=\"range\"] {\n    -webkit-appearance: none;\n    appearance: none;\n    background: transparent;\n    cursor: pointer;\n    width: 100%;\n  }\n\n  input[type=\"range\"]:focus {\n    outline: none;\n  }\n\n  input[type=\"range\"]::-webkit-slider-runnable-track {\n    @apply bg-lookbook-input-toggle;\n    border-radius: 0.5rem;\n    height: 0.5rem;\n  }\n\n  input[type=\"range\"]::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    @apply bg-lookbook-input-toggle-active;\n    margin-top: -4px;\n    border-radius: 0.5rem;\n    height: 1rem;\n    width: 1rem;\n  }\n\n  input[type=\"range\"]::-moz-range-track {\n    @apply bg-lookbook-input-toggle;\n    border-radius: 0.5rem;\n    height: 0.5rem;\n  }\n\n  input[type=\"range\"]::-moz-range-thumb {\n    @apply bg-lookbook-input-toggle-active;\n    border: none;\n    border-radius: 0.5rem;\n    height: 1rem;\n    width: 1rem;\n  }\n\n  input[type=\"range\"]:focus::-webkit-slider-thumb,\n  input[type=\"range\"]:focus::-moz-range-thumb {\n    @apply outline-1 outline-lookbook-input-toggle-active outline-offset-2;\n  }\n\n  input[type=\"color\"] {\n    -webkit-appearance: none;\n    width: 46px;\n    @apply border border-lookbook-input-border rounded-lg cursor-pointer;\n  }\n\n  input[type=\"color\"]::-webkit-color-swatch-wrapper {\n    padding: 0;\n  }\n\n  input[type=\"color\"]::-webkit-color-swatch {\n    @apply border-0 rounded-lg;\n  }\n\n  select.compact {\n    font-size: 0.8rem;\n    line-height: 1.1rem;\n    border-radius: 0.375rem;\n    padding: 0.26rem 1.5rem 0.26rem 0.6rem;\n    background-size: 1.2em 1.2em;\n    background-position: right 0.4rem center;\n  }\n}\n"],"names":[],"version":3,"file":"lookbook.css.map"}
+{"mappings":"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;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;;AAMA;;;;;;AAOA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;;AAMA;;;;;;AAMA;;;;;;AAMA;;;;;;AAMA;;;;;;AAMA;;;;;;AAMA;;;;;;AAMA;;;;;;AAMA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;;AAMA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;;;AAMA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;AAIA;;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;;AAMA;;;;;AAKA;;;;AAIA;;;;;;AAMA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;AAIA;;;;;;AAMA;;;;;;AAMA;;;;;;AAMA;;;;;;AAMA;;;;;;AAMA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAEA;;;;AAEA;;;;;;;;;;;;AAEA;;;;AAEA;;;;;;;;AAEA;;;;AAEA;;;;;;;;AAEA;;;;AAEA;;;;;;;AAEA;;;;AAEA;;;;;;;AAEA;;;;AAEA;;;;;;AAEA;;;;;;;AAEA;;;;;;AAEA;;;;AAEA;;;;;;;AAEA;;;;;;;AAEA;;;;;;;AAEA;;;;;;;AAEA;;;;AAEA;;;;AAEA;;;;AAEA;;;;AAEA;;;;AAEA;;;;;;;;AAEA;;;;;;;;AASA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;;;;;;AAWA;;;;;;AAMA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA;;;;AAIA;;;;;;AAMA;;;;AAIA;;;;;AAOA;;;;AAMA;;;;AAMA;;;;;AAOA;;;;AAMA;;;;AAOA;;;;;AAOA;;;;AAMA;;;;AAMA;;;;;AAOA;;;;;AAOA;;;;;AAOA;;;;;;;AASA;;;;;AAOA;;;;;AAOA;;;;AAMA;;;;AAMA;;;;;AAOA;;;;AAMA;;;;AAMA;;;;;AAOA;;;;;AAOA;;;;AAMA;;;;;AAmCA;;;;;AAOA;;;;AAMA;;;;AAMA;;;;AAMA;;;;AAMA;;;;AAMA;;;;;AAOA;;;;AAMA;;;;AAMA;;;;AAMA;;;;;AAOA;;;;;AAOA;;;;AAMA;;;;AAMA;;;;AAYA;;;;AAMA;;;;AAMA;;;;;AAOA;;;;AAMA;;;;AAwBA;;;;AA0CA;;;;AAMA;;;;AAMA;;;;AAMA;;;;AAMA;;;;AAMA;;;;AAkBA;;;;AAQA;;;;;AAOA;;;;AAUA;EAEE;;;;;EAKA;;;;;EAKA;;;;;;;EAOA;;;;;;EAMA;;;;;;;EAOA;;;;;;;EAOA;;;;;;;EAOA;;;;;;EAMA;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;;EAMA;;;;EAIA;;;;EAIA;;;;EAIA;;;;;;;;;EAYA;;;;;;EAMA;;;;;;EAMA;;;;;EAKA;;;;EAIA;;;;EAIA;;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;;EAKA;;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;;EAKA;;;;;;EAMA;;;;EAIA;;;;EAIA;;;;EAOA;;;;EAIA;;;;EAIA;;;;EAIA;;;;;AAKF;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;;;AAMA;;;;;;AAMA;;;;AAIA;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;EAEE;;;;;EAKA;;;;EAIA;;;;EAIA;;;;EAIA;;;;;;AAMF;EAEE;;;;;AAKF;EAEE;;;;EAIA;;;;EAIA;;;;;;EAMA;;;;EAIA;;;;;EAKA;;;;;AAKF;EAEE;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA;;;;EAIA","sources":["assets/css/lookbook.css"],"sourcesContent":["@import \"./fonts.css\";\n@import \"tailwindcss/base\";\n@import \"tailwindcss/components\";\n@import \"tailwindcss/utilities\";\n\n@import \"./tooltip.css\";\n\n@import-glob \"../../app/components/lookbook/**/*/component.css\";\n\n@layer base {\n  html {\n    @apply scroll-smooth h-screen;\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    html {\n      @apply scroll-auto;\n    }\n  }\n\n  body {\n    @apply text-lookbook-text font-ui text-sm overflow-hidden;\n  }\n\n  [x-cloak] {\n    @apply !hidden;\n  }\n\n  pre[class*=\"language-\"] {\n    @apply !p-0 !m-0;\n  }\n\n  ::-webkit-scrollbar {\n    @apply w-1 h-1;\n  }\n\n  ::-webkit-scrollbar-track {\n    @apply bg-transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    @apply transition-colors rounded-full\tbg-clip-content bg-lookbook-scrollbar;\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    @apply bg-lookbook-scrollbar-hover;\n  }\n}\n\n@layer utilities {\n  .bg-checked {\n    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\");\n  }\n}\n\n@layer components {\n  [type=\"text\"],\n  [type=\"email\"],\n  [type=\"url\"],\n  [type=\"password\"],\n  [type=\"number\"],\n  [type=\"date\"],\n  [type=\"datetime-local\"],\n  [type=\"month\"],\n  [type=\"search\"],\n  [type=\"tel\"],\n  [type=\"time\"],\n  [type=\"week\"],\n  textarea,\n  select {\n    @apply text-lookbook-input-text placeholder:text-lookbook-input-text-placeholder placeholder:italic;\n    @apply border-lookbook-input-border focus:ring-lookbook-input-border-focus focus:border-lookbook-input-border-focus;\n    @apply rounded-md text-sm w-full bg-lookbook-input-bg block;\n  }\n\n  input[type=\"range\"] {\n    -webkit-appearance: none;\n    appearance: none;\n    background: transparent;\n    cursor: pointer;\n    width: 100%;\n  }\n\n  input[type=\"range\"]:focus {\n    outline: none;\n  }\n\n  input[type=\"range\"]::-webkit-slider-runnable-track {\n    @apply bg-lookbook-input-toggle;\n    border-radius: 0.5rem;\n    height: 0.5rem;\n  }\n\n  input[type=\"range\"]::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    @apply bg-lookbook-input-toggle-active;\n    margin-top: -4px;\n    border-radius: 0.5rem;\n    height: 1rem;\n    width: 1rem;\n  }\n\n  input[type=\"range\"]::-moz-range-track {\n    @apply bg-lookbook-input-toggle;\n    border-radius: 0.5rem;\n    height: 0.5rem;\n  }\n\n  input[type=\"range\"]::-moz-range-thumb {\n    @apply bg-lookbook-input-toggle-active;\n    border: none;\n    border-radius: 0.5rem;\n    height: 1rem;\n    width: 1rem;\n  }\n\n  input[type=\"range\"]:focus::-webkit-slider-thumb,\n  input[type=\"range\"]:focus::-moz-range-thumb {\n    @apply outline-1 outline-lookbook-input-toggle-active outline-offset-2;\n  }\n\n  input[type=\"color\"] {\n    -webkit-appearance: none;\n    width: 46px;\n    @apply border border-lookbook-input-border rounded-lg cursor-pointer;\n  }\n\n  input[type=\"color\"]::-webkit-color-swatch-wrapper {\n    padding: 0;\n  }\n\n  input[type=\"color\"]::-webkit-color-swatch {\n    @apply border-0 rounded-lg;\n  }\n\n  select.compact {\n    font-size: 0.8rem;\n    line-height: 1.1rem;\n    border-radius: 0.375rem;\n    padding: 0.26rem 1.5rem 0.26rem 0.6rem;\n    background-size: 1.2em 1.2em;\n    background-position: right 0.4rem center;\n  }\n\n  #inspector .split-layout-gutter-horizontal {\n    top: 4px;\n  }\n}\n"],"names":[],"version":3,"file":"lookbook.css.map"}

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

@@ -71,6 +71,9 @@
   --lookbook-message-border: var(--lookbook-divider);
   --lookbook-message-title: var(--lookbook-base-600);
   --lookbook-message-text: var(--lookbook-text);
+  --lookbook-page-header-bg: var(--lookbook-base-50);
+  --lookbook-page-header-text: var(--lookbook-text);
+  --lookbook-page-header-border: var(--lookbook-divider);
   --lookbook-embed-title: var(--lookbook-text);
   --lookbook-branding-text: var(--lookbook-header-text);
 }