From d7017719560148b7cd9f3571903540a860a7abf1 Mon Sep 17 00:00:00 2001 From: Michaelyin Date: Tue, 28 May 2024 15:49:48 +0800 Subject: [PATCH] chore --- frontend/src/styles/index.scss | 4 + frontend/src/styles/lookbook/_base.scss | 93 +++++++++++++++++++ frontend/src/styles/lookbook/_lookbook.scss | 99 +++++++++++++++++++++ frontend/src/styles/lookbook/_params.scss | 82 +++++++++++++++++ frontend/src/styles/lookbook/_toolbar.scss | 7 ++ tailwind.config.js | 11 +++ 6 files changed, 296 insertions(+) create mode 100644 frontend/src/styles/lookbook/_base.scss create mode 100644 frontend/src/styles/lookbook/_lookbook.scss create mode 100644 frontend/src/styles/lookbook/_params.scss create mode 100644 frontend/src/styles/lookbook/_toolbar.scss diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss index 76fcadc..5005246 100644 --- a/frontend/src/styles/index.scss +++ b/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"; diff --git a/frontend/src/styles/lookbook/_base.scss b/frontend/src/styles/lookbook/_base.scss new file mode 100644 index 0000000..a9a19df --- /dev/null +++ b/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; + } + +} diff --git a/frontend/src/styles/lookbook/_lookbook.scss b/frontend/src/styles/lookbook/_lookbook.scss new file mode 100644 index 0000000..df2a07e --- /dev/null +++ b/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 */ diff --git a/frontend/src/styles/lookbook/_params.scss b/frontend/src/styles/lookbook/_params.scss new file mode 100644 index 0000000..828b68d --- /dev/null +++ b/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 */ diff --git a/frontend/src/styles/lookbook/_toolbar.scss b/frontend/src/styles/lookbook/_toolbar.scss new file mode 100644 index 0000000..931c532 --- /dev/null +++ b/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; + } + } +} diff --git a/tailwind.config.js b/tailwind.config.js index 51a0446..607c387 100644 --- a/tailwind.config.js +++ b/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: {