chore

frontend/src/styles/index.scss

@@ -1,3 +1,7 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
+@import "lookbook/base";
+@import "lookbook/lookbook";
+@import "lookbook/params";
+@import "lookbook/toolbar";

frontend/src/styles/lookbook/_base.scss

@@ -0,0 +1,93 @@
+@layer base {
+  [data-theme="dark"] body {
+    @apply bg-gray-800;
+  }
+
+  [data-theme="light"] body {
+    @apply bg-white;
+  }
+}
+
+@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 rounded-md text-sm w-full block;
+  }
+
+  input[type="range"] {
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+    width: 100%;
+  }
+
+  input[type="range"]:focus {
+    outline: none;
+  }
+
+  input[type="range"]::-webkit-slider-runnable-track {
+    border-radius: 0.5rem;
+    height: 0.5rem;
+  }
+
+  input[type="range"]::-webkit-slider-thumb {
+    appearance: none;
+    margin-top: -4px;
+    border-radius: 0.5rem;
+    height: 1rem;
+    width: 1rem;
+  }
+
+  input[type="range"]::-moz-range-track {
+    border-radius: 0.5rem;
+    height: 0.5rem;
+  }
+
+  input[type="range"]::-moz-range-thumb {
+    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-offset-2;
+  }
+
+  input[type="color"] {
+    width: 46px;
+
+    @apply 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;
+  }
+
+}

frontend/src/styles/lookbook/_lookbook.scss

@@ -0,0 +1,99 @@
+/* stylelint-disable no-descending-specificity */
+
+[data-component="icon"] {
+  flex: none;
+  line-height: 1;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
+  transition-duration: .15s;
+  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+  display: block;
+}
+
+[data-component="icon"] svg {
+  fill: #0000;
+  stroke: currentcolor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  width: 100%;
+  height: 100%;
+}
+
+[data-component="icon"].icon-stroke-2 svg {
+  stroke-width: 2px;
+}
+
+[data-component="icon"].icon-stroke-1 svg {
+  stroke-width: 1px;
+}
+
+[data-component="lookbook-icon"] {
+  flex: none;
+  line-height: 1;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
+  transition-duration: .15s;
+  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+  display: block;
+}
+
+[data-component="lookbook-icon"] svg {
+  fill: #0000;
+  stroke: currentcolor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  width: 100%;
+  height: 100%;
+}
+
+[data-component="lookbook-icon"].hidden {
+  display: none;
+}
+
+[data-component="lookbook-icon"].icon-stroke-2 svg {
+  stroke-width: 2px;
+}
+
+[data-component="lookbook-icon"].icon-stroke-1 svg {
+  stroke-width: 1px;
+}
+
+[data-controller="lookbook-sidebar-link"] {
+  @apply hover:bg-gray-100;
+}
+
+[data-controller="lookbook-sidebar-link"].active {
+  @apply bg-blue-100;
+}
+
+.lookbook-pre {
+  @apply h-full;
+
+  code {
+    @apply h-full;
+  }
+}
+
+/* for block of numbers */
+.hljs-ln {
+  border-collapse: collapse
+}
+
+.hljs-ln-n::before {
+  content: attr(data-line-number)
+}
+
+.hljs-ln-numbers {
+  -webkit-touch-callout: none;
+  user-select: none;
+  text-align: center;
+  color: #ccc;
+  border-right: 1px solid #CCC;
+  vertical-align: top;
+  padding-right: 5px;
+}
+
+/* for block of code */
+.hljs-ln-code {
+  padding-left: 10px;
+}
+
+/* stylelint-enable no-descending-specificity */

frontend/src/styles/lookbook/_params.scss

@@ -0,0 +1,82 @@
+/* stylelint-disable no-descending-specificity */
+/* stylelint-disable no-duplicate-selectors */
+
+@layer components {
+  [data-component="params-editor"] {
+    table:not(.linear) {
+      thead {
+        tr {
+          @apply border-b;
+        }
+
+        th {
+          @apply font-semibold py-4 px-4 align-middle text-left;
+        }
+
+        th.param-label {
+          width: 18%;
+        }
+
+        th.param-input {
+          width: 45%;
+        }
+      }
+
+      tbody {
+        tr + tr td {
+          @apply border-t ;
+        }
+
+        td {
+          @apply py-4 px-4 align-middle;
+        }
+
+        td.param-label {
+          @apply font-semibold;
+        }
+
+        .param-input-wrapper {
+          min-height: 38px;
+        }
+      }
+    }
+  }
+
+  [data-component="params-editor"] {
+    table.linear {
+      table,
+      tr,
+      td {
+        display: block;
+      }
+
+      thead,
+      th {
+        display: none;
+      }
+
+      tr:not(:last-child) {
+        @apply border-b ;
+      }
+
+      tr {
+        @apply space-y-3 py-4;
+      }
+
+      td {
+        @apply px-4 align-middle;
+      }
+
+      td.param-label {
+        @apply font-semibold;
+      }
+
+      td.param-description-empty {
+        @apply hidden;
+      }
+    }
+  }
+}
+
+/* stylelint-enable no-descending-specificity */
+/* stylelint-enable no-duplicate-selectors */

frontend/src/styles/lookbook/_toolbar.scss

@@ -0,0 +1,7 @@
+@layer components {
+  [data-component="toolbar"] {
+    & .toolbar-sections > * {
+      @apply h-10 flex items-center whitespace-nowrap;
+    }
+  }
+}

tailwind.config.js

@@ -1,5 +1,6 @@
 const Path = require("path");
 const pwd = process.env.PWD;
+const colors = require("tailwindcss/colors");
 const defaultTheme = require("tailwindcss/defaultTheme");
 
 // We can add current project paths here
@@ -13,6 +14,15 @@ const projectPaths = [
 const contentPaths = [...projectPaths];
 console.log(`tailwindcss will scan ${contentPaths}`);
 
+// We can add some alias here
+const newColors = {
+  ...colors,
+  primary: colors.blue,
+  secondary: colors.green,
+  success: colors.green,
+  danger: colors.red,
+};
+
 module.exports = {
   content: contentPaths,
   theme: {
@@ -21,6 +31,7 @@ module.exports = {
       serif: [...defaultTheme.fontFamily.serif],
       mono: [...defaultTheme.fontFamily.mono],
     },
+    colors: newColors,
     extend: {
       typography: (theme) => ({
         DEFAULT: {