lookbook 1.3.1 → 1.3.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d8d63d345b24ff10434b866d95f6aeb2a98a2b82418aba97efc83638fe560cc7
-  data.tar.gz: 0e3f8b21606a38b0e4cb8c02f890244c2a8654007cec0840b1a3cc74f9cdc225
+  metadata.gz: 6a75bef1487d9f1c5952ef77ae412f7c29164eb51e3afb416a0edcc7e2bd289c
+  data.tar.gz: 75700234c84897f13a04eedf97eb59f1974785428ceac2f24bb2bfe29b10a5f3
 SHA512:
-  metadata.gz: 16b46777b9533f0d210f463115eb72b5579ef5d0f74f970d9edec3888c57265168142e8d72e009c6baafe7f50023e4c15706cde0f3fe318bf9f77e9221441852
-  data.tar.gz: 940ddb7dc5f8370ab18f06a042aaf592c06a1466bf7cec291e80b33ddb91b091a779b73baf13b9a3d011f9ab2195b07ba39e95ae4156c6dda3ccf4431fa35ef5
+  metadata.gz: 7064ac9dc7e1cdf8f61fd4f26affcb0ddc5c0a16f78ce081d1628ab46139386813b09660ead2703aed8abb2117fde9516254a7cc448e3225875b6652e51dc9ee
+  data.tar.gz: 79ee84dc0ac3b2cc92281c6da717a37979881b24e7d36fe6c1a15844c5ec22b41a83f03e71a32e0b61aa89f829ed53ed3462178c9c007dadcf08062fb8d54e62

data/app/assets/lookbook/css/themes/blue.css

@@ -22,6 +22,7 @@
   --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-tooltip-bg: var(--lookbook-accent-500);
@@ -50,15 +51,16 @@
   --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-blank-slate-title: var(--lookbook-accent-600);
   --lookbook-branding-text: var(--lookbook-header-text);
-  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
 }

data/app/assets/lookbook/css/themes/indigo.css

@@ -22,6 +22,7 @@
   --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-tooltip-bg: var(--lookbook-accent-500);
@@ -50,15 +51,16 @@
   --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-blank-slate-title: var(--lookbook-accent-600);
   --lookbook-branding-text: var(--lookbook-header-text);
-  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
 }

data/app/assets/lookbook/css/themes/zinc.css

@@ -22,6 +22,7 @@
   --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-tooltip-bg: var(--lookbook-accent-500);
@@ -50,15 +51,16 @@
   --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-blank-slate-title: var(--lookbook-accent-600);
   --lookbook-branding-text: var(--lookbook-header-text);
-  --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
 }

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

@@ -1,4 +1,4 @@
-@import "./highlight_github_light.css";
+@import "./highlight_github.css";
 
 @layer components {
   [data-component="code"] {
@@ -25,7 +25,7 @@
 
       & .line-numbers {
         width: min-content;
-        @apply bg-white border-r border-dashed border-lookbook-divider z-10 h-full p-3 select-none text-gray-400 text-right;
+        @apply border-r border-dashed z-10 h-full p-3 select-none text-right;
       }
 
       & .line-number {

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

@@ -3,7 +3,8 @@
     {
       "numbered": numbered?,
       "focussed": focussed?,
-      "h-full": full_height?
+      "h-full": full_height?,
+      "dark": is_dark?
     } 
   ] do %>
   <%= Lookbook::CodeHighlighter.call(source, **@highlight_opts) %>

data/app/components/lookbook/code/component.rb

@@ -9,7 +9,8 @@ module Lookbook
       highlight_lines: [],
       start_line: 1,
       wrap: false,
-      theme: :github_light,
+      theme: nil,
+      dark: false,
       full_height: false,
       **html_attrs
     )
@@ -23,6 +24,7 @@ module Lookbook
       @highlight_lines = highlight_lines
       @wrap = wrap
       @theme = theme
+      @dark = dark
       @full_height = full_height
       super(**html_attrs)
     end
@@ -44,7 +46,16 @@ module Lookbook
     end
 
     def full_height?
-      @full_height == true
+      @full_height
+    end
+
+    def is_dark?
+      @dark
+    end
+
+    def before_render
+      @theme ||= (config.highlighter_options && config.highlighter_options[:theme]&.to_sym) || :github
+      @dark ||= ActiveModel::Type::Boolean.new.cast((config.highlighter_options && config.highlighter_options[:dark]) || false)
     end
 
     protected

data/app/components/lookbook/code/highlight_github.css

@@ -0,0 +1,406 @@
+.theme-github {
+  --dark-bg: #111111;
+  --dark-gray-1: #404040;
+  --dark-gray-2: #d0d0d0;
+  --dark-gray-3: #cccccc;
+  --dark-gray-4: #777777;
+  --dark-gray-5: #aaaaaa;
+  --dark-gray-6: #bbbbbb;
+  --dark-gray-7: #666666;
+  --dark-blue-1: #3677a9;
+  --dark-blue-2: #24909d;
+  --dark-blue-3: #447fcf;
+  --dark-blue-4: #009988;
+  --dark-red-1: #a61717;
+  --dark-red-2: #331111;
+  --dark-red-3: #e50808;
+  --dark-red-4: #520000;
+  --dark-red-5: #d22323;
+  --dark-red-6: #cd2828;
+  --dark-yellow-1: #e9b96e;
+  --dark-yellow-2: #ffa500;
+  --dark-orange: #d2691e;
+  --dark-white: #ffffff;
+  --dark-green-1: #589819;
+  --dark-green-2: #6ab825;
+  --dark-green-3: #44ccaa;
+
+  --light-bg: #ffffff;
+  --light-gray-1: #f8f8f8;
+  --light-gray-2: #27272a;
+  --light-gray-3: #cccccc;
+  --light-gray-4: #888888;
+  --light-gray-5: #999999;
+  --light-gray-6: #555555;
+  --light-gray-7: #bbbbbb;
+  --light-yellow-1: #999988;
+  --light-red-1: #a61717;
+  --light-red-2: #e3d2d2;
+  --light-red-3: #dd1144;
+  --light-red-4: #ffdddd;
+  --light-red-5: #aa0000;
+  --light-red-6: #990000;
+  --light-purple-1: #800080;
+  --light-purple-2: #990073;
+  --light-black: #000000;
+  --light-green-1: #ddffdd;
+  --light-green-2: #009926;
+  --light-blue-1: #445588;
+  --light-blue-2: #009999;
+  --light-blue-3: #008080;
+  --light-blue-4: #0086b3;
+  --light-blue-5: #3c5d5d;
+  --light-blue-6: #000080;
+
+  --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);
+
+  &.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);
+
+  .line-numbers {
+    background-color: var(--hl-bg);
+    border-color: var(--hl-border);
+    color: var(--hl-line-number);
+  }
+
+  .highlight {
+    .hll {
+      background-color: var(--hl-hll-bg);
+    }
+    .c {
+      color: var(--hl-comment);
+      font-style: italic;
+    } /* Comment */
+    .err {
+      color: var(--hl-error-fg);
+      background-color: var(--hl-error-bg);
+    } /* Error */
+    .g {
+      color: var(--hl-subtle-fg);
+    } /* Generic */
+    .k {
+      color: var(--hl-keyword);
+      font-weight: bold;
+    } /* Keyword; catches prefixes and css3 */
+    .l {
+      color: var(--hl-subtle-fg);
+    } /* Literal */
+    .n,
+    .h {
+      color: var(--hl-keyword);
+    } /* Name */
+    .o {
+      color: var(--hl-operator);
+      font-weight: bold;
+    } /* Operator */
+    .x {
+      color: var(--hl-subtle-fg);
+    } /* Other */
+    .p {
+      color: var(--hl-punctuation);
+    } /* Punctuation */
+    .cm {
+      color: var(--hl-comment);
+      font-style: italic;
+    } /* Comment.Multiline */
+    .cp {
+      color: var(--hl-comment-preproc);
+      font-weight: bold;
+    } /* Comment.Preproc */
+    .c1 {
+      color: var(--hl-comment);
+      font-style: italic;
+    } /* Comment.Single */
+    .cs {
+      color: var(--hl-comment-special-fg);
+      background-color: var(--hl-comment-special-bg);
+      font-weight: bold;
+      font-style: italic;
+    } /* Comment.Special */
+    .gd {
+      color: var(--hl-deleted-fg);
+      background-color: var(--hl-deleted-bg);
+    } /* Generic.Deleted */
+    .ge {
+      color: var(--hl-subtle-fg);
+      font-style: italic;
+    } /* Generic.Emph */
+    .gr {
+      color: var(--hl-danger);
+    } /* Generic.Error */
+    .gh {
+      color: var(--hl-heading);
+    } /* Generic.Heading */
+    .gi {
+      color: var(--hl-inserted-fg);
+      background-color: var(--hl-inserted-bg);
+    } /* Generic.Inserted */
+    .go {
+      color: var(--hl-output);
+    } /* Generic.Output */
+    .gp {
+      color: var(--hl-prompt);
+    } /* Generic.Prompt */
+    .gs {
+      color: var(--hl-subtle-fg);
+      font-weight: bold;
+    } /* Generic.Strong */
+    .gu {
+      color: var(--hl-subheading);
+      font-weight: bold;
+    } /* Generic.Subheading */
+    .gt {
+      color: var(--hl-danger);
+    } /* Generic.Traceback */
+    .kc {
+      color: var(--hl-keyword-crude);
+      font-weight: bold;
+    } /* Keyword.Constant */
+    .kd {
+      color: var(--hl-keyword-crude);
+      font-weight: bold;
+    } /* Keyword.Declaration */
+    .kn {
+      color: var(--hl-keyword-crude);
+      font-weight: bold;
+    } /* Keyword.Namespace */
+    .kp {
+      color: var(--hl-keyword-crude);
+      font-weight: bold;
+    } /* Keyword.Pseudo */
+    .kr {
+      color: var(--hl-keyword-crude);
+      font-weight: bold;
+    } /* Keyword.Reserved */
+    .kt {
+      color: var(--hl-keyword-subtle);
+      font-weight: bold;
+    } /* Keyword.Type */
+    .ld {
+      color: var(--hl-subtle-fg);
+    } /* Literal.Date */
+    .m {
+      color: var(--hl-number);
+    } /* Literal.Number */
+    .s {
+      color: var(--hl-string);
+    } /* Literal.String */
+    .na {
+      color: var(--hl-attribute);
+    } /* Name.Attribute */
+    .nb {
+      color: var(--hl-builtin);
+    } /* Name.Builtin */
+    .nc {
+      color: var(--hl-class);
+      font-weight: bold;
+    } /* Name.Class */
+    .no {
+      color: var(--hl-variable);
+    } /* Name.Constant */
+    .nd {
+      color: var(--hl-decorator);
+    } /* Name.Decorator */
+    .ni {
+      color: var(--hl-entity);
+    } /* Name.Entity */
+    .ne {
+      color: var(--hl-exception);
+      font-weight: bold;
+    } /* Name.Exception */
+    .nf {
+      color: var(--hl-function);
+      font-weight: bold;
+    } /* Name.Function */
+    .nl {
+      color: var(--hl-subtle-fg);
+    } /* Name.Label */
+    .nn {
+      color: var(--hl-namespace);
+    } /* Name.Namespace */
+    .nx {
+      color: var(--hl-subtle-fg);
+    } /* Name.Other */
+    .py {
+      color: var(--hl-subtle-fg);
+    } /* Name.Property */
+    .nt {
+      color: var(--hl-tag);
+    } /* Name.Tag */
+    .nv {
+      color: var(--hl-variable);
+    } /* Name.Variable */
+    .ow {
+      color: var(--hl-word);
+      font-weight: bold;
+    } /* Operator.Word */
+    .w {
+      color: var(--hl-whitespace);
+    } /* Text.Whitespace */
+    .mf {
+      color: var(--hl-number);
+    } /* Literal.Number.Float */
+    .mh {
+      color: var(--hl-number);
+    } /* Literal.Number.Hex */
+    .mi {
+      color: var(--hl-number);
+    } /* Literal.Number.Integer */
+    .mo {
+      color: var(--hl-number);
+    } /* Literal.Number.Oct */
+    .sb {
+      color: var(--hl-string);
+    } /* Literal.String.Backtick */
+    .sc {
+      color: var(--hl-string);
+    } /* Literal.String.Char */
+    .sd {
+      color: var(--hl-string);
+    } /* Literal.String.Doc */
+    .s2 {
+      color: var(--hl-string);
+    } /* Literal.String.Double */
+    .se {
+      color: var(--hl-string);
+    } /* Literal.String.Escape */
+    .sh {
+      color: var(--hl-string);
+    } /* Literal.String.Heredoc */
+    .si {
+      color: var(--hl-string);
+    } /* Literal.String.Interpol */
+    .sx {
+      color: var(--hl-string-other);
+    } /* Literal.String.Other */
+    .sr {
+      color: var(--hl-string-regex);
+    } /* Literal.String.Regex */
+    .s1 {
+      color: var(--hl-string);
+    } /* Literal.String.Single */
+    .ss {
+      color: var(--hl-string-symbol);
+    } /* Literal.String.Symbol */
+    .bp {
+      color: var(--hl-builtin-pseudo);
+    } /* Name.Builtin.Pseudo */
+    .vc {
+      color: var(--hl-variable);
+    } /* Name.Variable.Class */
+    .vg {
+      color: var(--hl-variable);
+    } /* Name.Variable.Global */
+    .vi {
+      color: var(--hl-variable);
+    } /* Name.Variable.Instance */
+    .il {
+      color: var(--hl-number);
+    } /* Literal.Number.Integer.Long */
+
+    /* Make line numbers unselectable: excludes line numbers from copy-paste user ops */
+    .line-number {
+      -webkit-user-select: none;
+      -moz-user-select: none;
+    }
+
+    /* Mozilla specific */
+    .line-number::-moz-selection {
+      background-color: transparent;
+    }
+
+    /* Other major browsers */
+    .line-number::selection {
+      background-color: transparent;
+    }
+  }
+}

data/app/components/lookbook/nav/item/component.html.erb

@@ -8,7 +8,7 @@
   cloak: true do %>
   <%= lookbook_tag href.present? ? :a : :button,
     href: href,
-    class: "flex items-center py-1 select-none cursor-pointer text-lookbook-nav-text hover:bg-lookbook-nav-item-hover transition",
+    class: "flex w-full items-center py-1 select-none cursor-pointer text-lookbook-nav-text hover:bg-lookbook-nav-item-hover transition",
     style: "padding-left: #{left_pad}px",
     "x-bind": "bindings.#{href.present? ? "link" : "toggle"}" do %>
     <div class="relative flex items-center w-full">

data/app/components/lookbook/params/editor/component.html.erb

@@ -1,5 +1,5 @@
-<%= render_component_tag class: "p-4 overflow-hidden" do %>
-  <div class="bg-white border border-lookbook-divider rounded-md overflow-x-auto">
+<%= render_component_tag class: "overflow-hidden" do %>
+  <div class="bg-lookbook-params-editor-bg border border-lookbook-divider rounded-md overflow-x-auto">
     <table class="border-collapse w-full" :class="narrow && 'linear'">
       <thead>
         <tr>

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

@@ -3,7 +3,7 @@
     table:not(.linear) {
       thead {
         tr {
-          @apply border-b border-gray-300;
+          @apply border-b border-lookbook-divider;
         }
 
         th {
@@ -21,7 +21,7 @@
 
       tbody {
         tr + tr td {
-          @apply border-t border-gray-200;
+          @apply border-t border-lookbook-divider;
         }
 
         td {
@@ -53,7 +53,7 @@
       }
 
       tr:not(:last-child) {
-        @apply border-b border-gray-200;
+        @apply border-b border-lookbook-divider;
       }
 
       tr {

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

@@ -2,7 +2,7 @@
   <% panes.each.with_index(1) do |pane, i| %>
     <%= pane %>
     <% if i < panes.size %>
-      <div class="bg-lookbook-divider relative" x-init="registerGutter">
+      <div class="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

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

@@ -4,7 +4,7 @@
     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");
 
     .resize-handle {
-      @apply flex items-center justify-center h-full w-full border-lookbook-divider bg-lookbook-viewport-handle hover:bg-lookbook-draggable-hint hover:bg-opacity-20;
+      @apply flex items-center justify-center h-full w-full border-lookbook-divider bg-lookbook-viewport-handle hover:bg-lookbook-viewport-handle-hover hover:bg-opacity-20;
       @apply text-lookbook-viewport-handle-icon-stroke hover:text-lookbook-viewport-handle-icon-stroke-hover transition select-none touch-none;
     }
   }

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

@@ -27,7 +27,7 @@
       style="width: calc(100% + 2px); height: calc(100% + 1px); <%= "max-height: #{@max_height}px;" if @max_height.present? %>">
       <iframe seamless<%= " id=#{@iframe_id}" if @iframe_id.present? %>
         x-ref="iframe"
-        class="h-full w-full border border-lookbook-divider"
+        class="bg-lookbook-page-bg h-full w-full border border-lookbook-divider"
         :class="{ 'pointer-events-none': reflowing }"
         style="<%= "max-height: #{@max_height}px;" if @max_height.present? %>"
         src="<%= @src %>"

data/app/views/lookbook/inspector/panels/_notes.html.erb

@@ -2,7 +2,7 @@
 <% if items.many? %>
   <div class="divide-y divide-dashed divide-lookbook-divider bg-lookbook-prose-bg h-full w-full">
     <% items.each do |item| %>
-      <div class="px-4 py-6 relative">
+      <div class="p-4 relative">
         <h6 class="italic font-mono mb-4 opacity-40">
           # <%= item.label %>
         </h6>
@@ -11,7 +11,7 @@
     <% end %>
   </div>
 <% else %>
-  <div class="px-4 py-6 bg-lookbook-prose-bg w-full h-full">
+  <div class="p-4 w-full h-full bg-lookbook-prose-bg">
     <%= lookbook_render :prose do %>
       <%== items.any? ? items.first.notes : "<em class='opacity-50'>No notes provided.</em>" %>
     <% end %>

data/app/views/lookbook/inspector/panels/_params.html.erb

@@ -5,7 +5,7 @@
     <% end %>
   </div>
 <% else %>
-  <div class="h-full overflow-x-hidden">
+  <div class="p-4 w-full h-full overflow-x-hidden">
     <%= lookbook_render "params/editor" do |editor| %>
       <% @params.each do |param| %>
         <% editor.field param: param %>

data/config/app.yml

@@ -17,6 +17,9 @@ shared:
     highlight: true
     with_toc_data: true
     lax_spacing: true
+  highlighter_options:
+    theme: github
+    dark: false
   sort_examples: false
   preview_paths: []
   preview_display_options: {}

data/lib/lookbook/stores/config_store.rb

@@ -43,6 +43,10 @@ module Lookbook
       store[:markdown_options].merge!(options.to_h)
     end
 
+    def highlighter_options=(options = nil)
+      store[:highlighter_options].merge!(options.to_h)
+    end
+
     def ui_theme=(name)
       name = name.to_s
       if Theme.valid_theme?(name)