lookbook 2.0.0.beta.6 → 2.0.0.beta.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bfe0ace7c0c83d2cb22ac89815ccb492dd5c8fc16ad4b33c905caae04f942fec
-  data.tar.gz: f8c0fd31b102ab2e6846c9990574f0b1404025eec8b9d5670e61404d0590a83d
+  metadata.gz: cfcdb2b51f339e4449f640d3dc59e1dcacee5f8c9e009627d7e7680bc75c4f5f
+  data.tar.gz: 27a547cf8a89a2b7bac979e20e5e25efb89863b29c7c362df6a118fb18773df4
 SHA512:
-  metadata.gz: 70b9c6dec1a29fbc3a2287377f9f69010c6fafac082478db74690b0ca1a746f617046f0f02b0edecc557d6aef7e8e572a73e03a9acd119f8ee3cfd7b5ba79f01
-  data.tar.gz: 6a1870ef7600be6280e7d26c4337c99bc60bc3ffd47998ee313386d6d259a14e0e00fcff6e85a232f6f7120cb3b2b6d6df5a6b0b1383d8154f4d46d195890013
+  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/fonts.css

@@ -0,0 +1,33 @@
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: "Regular";
+  src: url("../fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: "Italic";
+  src: url("../fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
+}
+
+@font-face {
+  font-family: "Source Code Variable";
+  font-weight: 200 900;
+  font-style: normal;
+  font-stretch: normal;
+  src: url("../fonts/SourceCodeVariable-Roman.ttf.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Source Code Variable";
+  font-weight: 200 900;
+  font-style: italic;
+  font-stretch: normal;
+  src: url("../fonts/SourceCodeVariable-Italic.ttf.woff2") format("woff2");
+}

data/assets/css/lookbook.css

@@ -0,0 +1,149 @@
+@import "./fonts.css";
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@import "./tooltip.css";
+
+@import-glob "../../app/components/lookbook/**/*/component.css";
+
+@layer base {
+  html {
+    @apply scroll-smooth h-screen;
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    html {
+      @apply scroll-auto;
+    }
+  }
+
+  body {
+    @apply text-lookbook-text font-ui text-sm overflow-hidden;
+  }
+
+  [x-cloak] {
+    @apply !hidden;
+  }
+
+  pre[class*="language-"] {
+    @apply !p-0 !m-0;
+  }
+
+  ::-webkit-scrollbar {
+    @apply w-1 h-1;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply transition-colors rounded-full	bg-clip-content bg-lookbook-scrollbar;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-lookbook-scrollbar-hover;
+  }
+}
+
+@layer utilities {
+  .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");
+  }
+}
+
+@layer components {
+  [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"],
+  textarea,
+  select {
+    @apply text-lookbook-input-text placeholder:text-lookbook-input-text-placeholder placeholder:italic;
+    @apply border-lookbook-input-border focus:ring-lookbook-input-border-focus focus:border-lookbook-input-border-focus;
+    @apply rounded-md text-sm w-full bg-lookbook-input-bg block;
+  }
+
+  input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+    width: 100%;
+  }
+
+  input[type="range"]:focus {
+    outline: none;
+  }
+
+  input[type="range"]::-webkit-slider-runnable-track {
+    @apply bg-lookbook-input-toggle;
+    border-radius: 0.5rem;
+    height: 0.5rem;
+  }
+
+  input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    @apply bg-lookbook-input-toggle-active;
+    margin-top: -4px;
+    border-radius: 0.5rem;
+    height: 1rem;
+    width: 1rem;
+  }
+
+  input[type="range"]::-moz-range-track {
+    @apply bg-lookbook-input-toggle;
+    border-radius: 0.5rem;
+    height: 0.5rem;
+  }
+
+  input[type="range"]::-moz-range-thumb {
+    @apply bg-lookbook-input-toggle-active;
+    border: none;
+    border-radius: 0.5rem;
+    height: 1rem;
+    width: 1rem;
+  }
+
+  input[type="range"]:focus::-webkit-slider-thumb,
+  input[type="range"]:focus::-moz-range-thumb {
+    @apply outline-1 outline-lookbook-input-toggle-active outline-offset-2;
+  }
+
+  input[type="color"] {
+    -webkit-appearance: none;
+    width: 46px;
+    @apply border border-lookbook-input-border rounded-lg cursor-pointer;
+  }
+
+  input[type="color"]::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  input[type="color"]::-webkit-color-swatch {
+    @apply border-0 rounded-lg;
+  }
+
+  select.compact {
+    font-size: 0.8rem;
+    line-height: 1.1rem;
+    border-radius: 0.375rem;
+    padding: 0.26rem 1.5rem 0.26rem 0.6rem;
+    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

@@ -0,0 +1,79 @@
+:root {
+  --lookbook-white: theme("colors.white");
+  --lookbook-accent-50: theme("colors.blue.50");
+  --lookbook-accent-100: theme("colors.blue.100");
+  --lookbook-accent-200: theme("colors.blue.200");
+  --lookbook-accent-300: theme("colors.blue.300");
+  --lookbook-accent-400: theme("colors.blue.400");
+  --lookbook-accent-500: theme("colors.blue.500");
+  --lookbook-accent-600: theme("colors.blue.600");
+  --lookbook-accent-700: theme("colors.blue.700");
+  --lookbook-accent-800: theme("colors.blue.800");
+  --lookbook-accent-900: theme("colors.blue.900");
+  --lookbook-base-50: theme("colors.zinc.50");
+  --lookbook-base-100: theme("colors.zinc.100");
+  --lookbook-base-200: theme("colors.zinc.200");
+  --lookbook-base-300: theme("colors.zinc.300");
+  --lookbook-base-400: theme("colors.zinc.400");
+  --lookbook-base-500: theme("colors.zinc.500");
+  --lookbook-base-600: theme("colors.zinc.600");
+  --lookbook-base-700: theme("colors.zinc.700");
+  --lookbook-base-800: theme("colors.zinc.800");
+  --lookbook-base-900: theme("colors.zinc.900");
+  --lookbook-text: var(--lookbook-base-800);
+  --lookbook-divider: var(--lookbook-base-300);
+  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
+  --lookbook-icon-button-stroke: var(--lookbook-base-400);
+  --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
+  --lookbook-button-bg: var(--lookbook-accent-500);
+  --lookbook-button-bg-hover: var(--lookbook-accent-600);
+  --lookbook-button-text: var(--lookbook-white);
+  --lookbook-tooltip-bg: var(--lookbook-accent-500);
+  --lookbook-tooltip-text: var(--lookbook-white);
+  --lookbook-dropdown-bg: var(--lookbook-toolbar-bg);
+  --lookbook-dropdown-text: var(--lookbook-text);
+  --lookbook-dropdown-divider: var(--lookbook-divider);
+  --lookbook-scrollbar: var(--lookbook-base-200);
+  --lookbook-scrollbar-hover: var(--lookbook-base-300);
+  --lookbook-toolbar-bg: var(--lookbook-white);
+  --lookbook-toolbar-divider: var(--lookbook-divider);
+  --lookbook-nav-text: var(--lookbook-text);
+  --lookbook-nav-toggle: var(--lookbook-base-500);
+  --lookbook-nav-icon-stroke: var(--lookbook-accent-500);
+  --lookbook-nav-item-hover: var(--lookbook-base-100);
+  --lookbook-nav-item-active: var(--lookbook-accent-50);
+  --lookbook-input-bg: var(--lookbook-white);
+  --lookbook-input-border: var(--lookbook-base-300);
+  --lookbook-input-border-focus: var(--lookbook-accent-200);
+  --lookbook-input-text: var(--lookbook-base-600);
+  --lookbook-input-text-placeholder: var(--lookbook-base-400);
+  --lookbook-input-toggle: var(--lookbook-base-300);
+  --lookbook-input-toggle-active: var(--lookbook-accent-500);
+  --lookbook-prose-bg: var(--lookbook-white);
+  --lookbook-prose-text: var(--lookbook-base-600);
+  --lookbook-prose-link: var(--lookbook-accent-900);
+  --lookbook-tabs-text: var(--lookbook-base-500);
+  --lookbook-tabs-text-hover: var(--lookbook-base-700);
+  --lookbook-tabs-text-disabled: var(--lookbook-base-300);
+  --lookbook-tabs-border-active: var(--lookbook-accent-400);
+  --lookbook-viewport-handle: var(--lookbook-white);
+  --lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
+  --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
+  --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
+  --lookbook-sidebar-bg: var(--lookbook-base-50);
+  --lookbook-page-bg: var(--lookbook-white);
+  --lookbook-drawer-bg: var(--lookbook-base-50);
+  --lookbook-params-editor-bg: var(--lookbook-white);
+  --lookbook-header-bg: var(--lookbook-accent-600);
+  --lookbook-header-text: var(--lookbook-white);
+  --lookbook-header-border: var(--lookbook-accent-700);
+  --lookbook-message-bg: var(--lookbook-white);
+  --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

@@ -0,0 +1,79 @@
+:root {
+  --lookbook-white: theme("colors.white");
+  --lookbook-accent-50: theme("colors.green.50");
+  --lookbook-accent-100: theme("colors.green.100");
+  --lookbook-accent-200: theme("colors.green.200");
+  --lookbook-accent-300: theme("colors.green.300");
+  --lookbook-accent-400: theme("colors.green.400");
+  --lookbook-accent-500: theme("colors.green.500");
+  --lookbook-accent-600: theme("colors.green.600");
+  --lookbook-accent-700: theme("colors.green.700");
+  --lookbook-accent-800: theme("colors.green.800");
+  --lookbook-accent-900: theme("colors.green.900");
+  --lookbook-base-50: theme("colors.zinc.50");
+  --lookbook-base-100: theme("colors.zinc.100");
+  --lookbook-base-200: theme("colors.zinc.200");
+  --lookbook-base-300: theme("colors.zinc.300");
+  --lookbook-base-400: theme("colors.zinc.400");
+  --lookbook-base-500: theme("colors.zinc.500");
+  --lookbook-base-600: theme("colors.zinc.600");
+  --lookbook-base-700: theme("colors.zinc.700");
+  --lookbook-base-800: theme("colors.zinc.800");
+  --lookbook-base-900: theme("colors.zinc.900");
+  --lookbook-text: var(--lookbook-base-800);
+  --lookbook-divider: var(--lookbook-base-300);
+  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
+  --lookbook-icon-button-stroke: var(--lookbook-base-400);
+  --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
+  --lookbook-button-bg: var(--lookbook-accent-500);
+  --lookbook-button-bg-hover: var(--lookbook-accent-600);
+  --lookbook-button-text: var(--lookbook-white);
+  --lookbook-tooltip-bg: var(--lookbook-accent-500);
+  --lookbook-tooltip-text: var(--lookbook-white);
+  --lookbook-dropdown-bg: var(--lookbook-toolbar-bg);
+  --lookbook-dropdown-text: var(--lookbook-text);
+  --lookbook-dropdown-divider: var(--lookbook-divider);
+  --lookbook-scrollbar: var(--lookbook-base-200);
+  --lookbook-scrollbar-hover: var(--lookbook-base-300);
+  --lookbook-toolbar-bg: var(--lookbook-white);
+  --lookbook-toolbar-divider: var(--lookbook-divider);
+  --lookbook-nav-text: var(--lookbook-text);
+  --lookbook-nav-toggle: var(--lookbook-base-500);
+  --lookbook-nav-icon-stroke: var(--lookbook-accent-500);
+  --lookbook-nav-item-hover: var(--lookbook-base-100);
+  --lookbook-nav-item-active: var(--lookbook-accent-50);
+  --lookbook-input-bg: var(--lookbook-white);
+  --lookbook-input-border: var(--lookbook-base-300);
+  --lookbook-input-border-focus: var(--lookbook-accent-200);
+  --lookbook-input-text: var(--lookbook-base-600);
+  --lookbook-input-text-placeholder: var(--lookbook-base-400);
+  --lookbook-input-toggle: var(--lookbook-base-300);
+  --lookbook-input-toggle-active: var(--lookbook-accent-500);
+  --lookbook-prose-bg: var(--lookbook-white);
+  --lookbook-prose-text: var(--lookbook-base-600);
+  --lookbook-prose-link: var(--lookbook-accent-900);
+  --lookbook-tabs-text: var(--lookbook-base-500);
+  --lookbook-tabs-text-hover: var(--lookbook-base-700);
+  --lookbook-tabs-text-disabled: var(--lookbook-base-300);
+  --lookbook-tabs-border-active: var(--lookbook-accent-400);
+  --lookbook-viewport-handle: var(--lookbook-white);
+  --lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
+  --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
+  --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
+  --lookbook-sidebar-bg: var(--lookbook-base-50);
+  --lookbook-page-bg: var(--lookbook-white);
+  --lookbook-drawer-bg: var(--lookbook-base-50);
+  --lookbook-params-editor-bg: var(--lookbook-white);
+  --lookbook-header-bg: var(--lookbook-accent-600);
+  --lookbook-header-text: var(--lookbook-white);
+  --lookbook-header-border: var(--lookbook-accent-700);
+  --lookbook-message-bg: var(--lookbook-white);
+  --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);
+}