From e754e406222d0f12123fdf1653b06450b8871fa2 Mon Sep 17 00:00:00 2001 From: aleidk Date: Mon, 16 Sep 2024 20:35:38 -0300 Subject: [PATCH] feat(core): add styles for vanilla form elements #1 --- bun.lockb | Bin 77816 -> 80360 bytes packages/components/.gitignore | 175 +++++++++++++++++ packages/components/README.md | 15 ++ packages/components/package.json | 12 ++ packages/components/src/components.scss | 8 + packages/components/tsconfig.json | 27 +++ packages/core/_variables.scss | 83 ++++++++ packages/core/src/_mixins.scss | 9 + packages/core/src/_reset.scss | 187 ++++++++++++++++++ packages/core/src/_tokens.scss | 80 ++++---- packages/core/src/_utils.scss | 142 +++++++------- packages/core/src/components/form.scss | 217 +++++++++++++++++++++ packages/core/src/style.scss | 60 +----- packages/website/package.json | 1 + packages/website/src/counter.ts | 9 - packages/website/src/main.ts | 24 +-- packages/website/src/render.ts | 11 ++ packages/website/src/templates/form.html | 127 ++++++++++++ packages/website/src/templates/layout.html | 1 + packages/website/src/typescript.svg | 1 - packages/website/src/vite-env.d.ts | 3 + packages/website/vite.config.ts | 26 +++ 22 files changed, 1034 insertions(+), 184 deletions(-) create mode 100644 packages/components/.gitignore create mode 100644 packages/components/README.md create mode 100644 packages/components/package.json create mode 100644 packages/components/src/components.scss create mode 100644 packages/components/tsconfig.json create mode 100644 packages/core/_variables.scss create mode 100644 packages/core/src/_reset.scss create mode 100644 packages/core/src/components/form.scss delete mode 100644 packages/website/src/counter.ts create mode 100644 packages/website/src/render.ts create mode 100644 packages/website/src/templates/form.html create mode 100644 packages/website/src/templates/layout.html delete mode 100644 packages/website/src/typescript.svg create mode 100644 packages/website/vite.config.ts diff --git a/bun.lockb b/bun.lockb index 2454e02a881907525e5f9eb060a050e849d16e82..74b89ee5e786f7d5853ae637dd256b0630573d6c 100755 GIT binary patch delta 12697 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 z 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 * { +.msp-flex-eq > * { flex: 100%; } -.flex-column { +.msp-flex-column { flex-direction: column !important; } -.flex-row { +.msp-flex-row { flex-direction: row !important; } @include mixins.responsive using($breakpoint, $size) { - .flex-#{$breakpoint}-column { + .msp-flex-#{$breakpoint}-column { flex-direction: column !important; } - .flex-#{$breakpoint}-row { + .msp-flex-#{$breakpoint}-row { flex-direction: row !important; } } -.hstack { +.msp-hstack { --prj-gap: var(--prj-spacing-3); display: flex; gap: var(--prj-gap); align-items: center; } -.hstack-reverse { +.msp-hstack-reverse { --prj-gap: var(--prj-spacing-3); display: flex; gap: var(--prj-gap); @@ -82,63 +82,63 @@ flex-direction: row-reverse; } -.vstack { +.msp-vstack { --prj-gap: var(--prj-spacing-3); display: flex; gap: var(--prj-gap); flex-direction: column; } -.vstack-reverse { +.msp-vstack-reverse { --prj-gap: var(--prj-spacing-3); display: flex; flex-direction: column-reverse; } -.flex-grow { +.msp-flex-grow { flex-grow: 1; } -.flex-wrap { +.msp-flex-wrap { flex-wrap: wrap; } -.flex-nowrap { +.msp-flex-nowrap { flex-wrap: nowrap; } @include mixins.responsive using($breakpoint, $size) { - .flex-#{$breakpoint}-wrap { + .msp-flex-#{$breakpoint}-wrap { flex-wrap: wrap; } - .flex-#{$breakpoint}-nowrap { + .msp-flex-#{$breakpoint}-nowrap { flex-wrap: nowrap; } } -.flex-center { +.msp-flex-center { display: flex; justify-content: center; align-items: center; } -.justify-content-center { +.msp-justify-content-center { justify-content: center !important; } -.justify-content-between { +.msp-justify-content-between { justify-content: space-between !important; } -.justify-content-around { +.msp-justify-content-around { justify-content: space-around !important; } -.align-items-center { +.msp-align-items-center { align-items: center !important; } -.grid { +.msp-grid { --prj-gap: var(--prj-spacing-3); --prj-columns: repeat(3, 1fr); --prj-min-col-width: 150px; @@ -152,81 +152,81 @@ } @for $i from 1 through 12 { - .grid-cols-#{$i} { + .msp-grid-cols-#{$i} { @include grid-cols($i); } } @include mixins.responsive-steps(1, 12) using ($breakpoint, $index) { - .grid-#{$breakpoint}-cols-#{$index} { + .msp-grid-#{$breakpoint}-cols-#{$index} { @include grid-cols($index); } } -.list-unstyle { +.msp-list-unstyle { list-style: none; } -.text-justify { +.msp-text-justify { text-align: justify; text-justify: inter-word; } -.text-start { +.msp-text-start { text-align: start; } -.text-center { +.msp-text-center { text-align: center; } -.text-end { +.msp-text-end { text-align: end; } -.align-start { +.msp-align-start { vertical-align: start; } -.align-center { +.msp-align-center { vertical-align: middle; } -.align-end { +.msp-align-end { vertical-align: end; } -.overflow-scroll { +.msp-overflow-scroll { overflow: scroll; } -.overflow-x-scroll { +.msp-overflow-x-scroll { overflow-x: scroll; } -.overflow-y-scroll { +.msp-overflow-y-scroll { overflow-y: scroll; } -.w-auto { +.msp-w-auto { width: auto; } -.h-auto { +.msp-h-auto { height: auto; } @for $i from 0 through 100 { - .w-#{$i} { + .msp-w-#{$i} { width: percentage(calc($i / 100)); } - .h-#{$i} { + .msp-h-#{$i} { height: percentage(calc($i / 100)); } } @include mixins.responsive-steps(0, 100) using ($breakpoint, $index) { - .w-#{$breakpoint}-#{$index} { + .msp-w-#{$breakpoint}-#{$index} { width: percentage(calc($index / 100)); } - .h-#{$breakpoint}-#{$index} { + .msp-h-#{$breakpoint}-#{$index} { height: percentage(calc($index / 100)); } } @@ -236,54 +236,54 @@ $name: "#{$breakpoint}-#{$name}"; } - .m-#{$name} { + .msp-m-#{$name} { margin: $value !important; } - .mx-#{$name} { + .msp-mx-#{$name} { margin-left: $value !important; margin-right: $value !important; } - .my-#{$name} { + .msp-my-#{$name} { margin-top: $value !important; margin-bottom: $value !important; } - .mt-#{$name} { + .msp-mt-#{$name} { margin-top: $value !important; } - .mb-#{$name} { + .msp-mb-#{$name} { margin-bottom: $value !important; } - .ml-#{$name} { + .msp-ml-#{$name} { margin-left: $value !important; } - .mr-#{$name} { + .msp-mr-#{$name} { margin-right: $value !important; } - .p-#{$name} { + .msp-p-#{$name} { padding: $value !important; } - .px-#{$name} { + .msp-px-#{$name} { padding-left: $value !important; padding-right: $value !important; } - .py-#{$name} { + .msp-py-#{$name} { padding-top: $value !important; padding-bottom: $value !important; } - .pt-#{$name} { + .msp-pt-#{$name} { padding-top: $value !important; } - .pb-#{$name} { + .msp-pb-#{$name} { padding-bottom: $value !important; } - .pl-#{$name} { + .msp-pl-#{$name} { padding-left: $value !important; } - .pr-#{$name} { + .msp-pr-#{$name} { padding-right: $value !important; } - .gap-#{$name} { + .msp-gap-#{$name} { --prj-gap: #{$value}; } } @@ -300,30 +300,30 @@ } } -.shadow-0 { +.msp-shadow-0 { box-shadow: none; } -.shadow-1 { +.msp-shadow-1 { box-shadow: 10px 10px 5px 0px var(--prj-shadow); } -.border-radius { +.msp-border-radius { border-radius: var(--prj-border-radius); } -.text-none { +.msp-text-none { text-transform: none; } -.text-capitalize { +.msp-text-capitalize { text-transform: capitalize; } -.text-uppercase { +.msp-text-uppercase { text-transform: uppercase; } -.text-uppercase { +.msp-text-uppercase { text-transform: uppercase; } -.text-lowercase { +.msp-text-lowercase { text-transform: lowercase; } diff --git a/packages/core/src/components/form.scss b/packages/core/src/components/form.scss new file mode 100644 index 0000000..1ad5205 --- /dev/null +++ b/packages/core/src/components/form.scss @@ -0,0 +1,217 @@ +@use "../tokens" as *; +@use "../mixins"; +@use "sass:color"; +@use "sass:string"; + +fieldset:not(.msp-fieldset-border) { + min-width: 0; + padding: 0; + margin: 0; + border: 0; +} + +fieldset.msp-fieldset-border { + padding: var(--msp-spacing-2); + margin: 0; + border-radius: var(--msp-border-radius); + border: var(--msp-border-width) var(--msp-border-style) var(--msp-color-text); +} + +label { + display: inline-block; + margin-bottom: var(--msp-spacing-1); +} + +select, +input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not( + [type="range"] + ) { + display: block; + border-radius: var(--msp-border-radius); + border: var(--msp-border-width) var(--msp-border-style) + var(--msp-border-color); + width: 100%; + background-color: var(--msp-color-bg-input); + color: var(--msp-color-text-input); + + padding: var(--msp-spacing-1); + font-size: 0.8rem; +} + +input[type="checkbox"] + label { + display: inline-block; + margin-bottom: initial; +} + +input[type="checkbox"] { + float: left; + background-color: var(--msp-color-bg-input); + + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + border-radius: var(--msp-border-radius); + border: var(--msp-border-width) var(--msp-border-style) + var(--msp-border-bg-input); + background-color: var(--msp-color-bg-input); + background-image: var(--msp-form-check-bg-image); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + $size: 0.75rem; + + width: $size; + height: $size; + + margin-top: 0.425rem; + margin-right: var(--msp-spacing-1); + + &:checked { + background-color: var(--msp-color-bg-checkbox); + border-color: var(--msp-color-bg-checkbox); + + $stroke-color: "%23#{string.slice(map-get($msp-colors, "--msp-color-text-checkbox"), 2, -1)}"; + --msp-form-check-bg-image: url('data:image/svg+xml,'); + } +} + +input[type="radio"] { + float: left; + background-color: var(--msp-color-bg-input); + + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + border-radius: 50%; + border: var(--msp-border-width) var(--msp-border-style) + var(--msp-border-bg-input); + background-color: var(--msp-color-bg-input); + background-image: var(--msp-form-check-bg-image); + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + $size: 0.75rem; + + width: $size; + height: $size; + + margin-top: 0.425rem; + margin-right: var(--msp-spacing-1); + + &:checked { + background-color: var(--msp-color-bg-checkbox); + border-color: var(--msp-color-bg-checkbox); + + $fill-color: "%23#{string.slice(map-get($msp-colors, "--msp-color-text-checkbox"), 2, -1)}"; + --msp-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='#{$fill-color}'/%3e%3c/svg%3e"); + } +} + +input[type="color"] { + display: block; + border-radius: var(--msp-border-radius); + border: var(--msp-border-width) var(--msp-border-style) + var(--msp-color-bg-input); + padding: var(--msp-spacing-1); + width: 3rem; + height: 2rem; + + background-color: var(--msp-color-bg-input); + + &::-moz-color-swatch { + padding: var(--msp-spacing-1); + border-radius: var(--msp-border-radius); + border: 0; + } +} + +input[type="range"] { + background-color: transparent; + + display: block; + width: 100%; + // color: var(--msp-color-text-input); + + border-color: transparent; + &::-moz-range-thumb { + background-color: var(--msp-color-text-range); + width: 1rem; + height: 1rem; + border-radius: 50%; + border: 0; + } + &::-moz-range-track { + background-color: var(--msp-color-bg-range); + color: transparent; + border-color: transparent; + width: 100%; + height: 0.5rem; + border-radius: var(--msp-border-radius); + } +} + +input:disabled::placeholder, +input::placeholder, +select:disabled, +option:disabled { + opacity: 1; + color: var(--msp-color-text-input-disabled); +} + +input:disabled { + background: var(--msp-color-bg-disabled); +} + +.form-control[type="file"] { + &:not(:disabled):not([readonly]) { + cursor: pointer; + } + + overflow: hidden; + + @include mixins.hover-darker; + + &.form-control::file-selector-button { + background-color: inherit; + padding-right: var(--msp-spacing-2); + margin-right: var(--msp-spacing-2); + pointer-events: none; + border-color: inherit; + border-style: solid; + border-width: 0; + border-inline-end-width: var(--msp-border-width); + border-radius: 0; + } +} + +.msp-form-text-help { + margin-top: var(--msp-spacing-1); + font-size: 0.875em; + color: var(--msp-color-text-disabled); +} + +[type="submit"]:not(:disabled), +button:not(:disabled) { + cursor: pointer; +} + +button { + display: inline-block; + padding: var(--msp-spacing-1) var(--msp-spacing-2); + background: var(--msp-color-bg-btn); + font-size: 1rem; + color: var(--msp-color-text-btn); + text-align: center; + text-decoration: none; + vertical-align: middle; + cursor: pointer; + border: var(--msp-border-width) var(--msp-border-style) + var(--msp-color-bg-btn); + border-radius: var(--msp-border-radius); + + @include mixins.hover-darker; +} diff --git a/packages/core/src/style.scss b/packages/core/src/style.scss index a1916b2..846c9ab 100644 --- a/packages/core/src/style.scss +++ b/packages/core/src/style.scss @@ -1,14 +1,16 @@ +@use "./reset"; @use "./tokens.scss" as *; @use "./utils.scss"; @use "./animations.scss"; @use "./mixins"; +@use "./components/form"; + // SASS variables are imported without namespace, but try to always use native // CSS variables when possible so they can be overrwritten by custom styles - html { - background-color: var(--msp-bg); - color: var(--msp-text); + background-color: var(--msp-color-bg); + color: var(--msp-color-text); /* Update font size based on screen width, source: https://matthewjamestaylor.com/responsive-font-size */ font-size: calc(15px + 0.390625vw); @@ -23,8 +25,8 @@ body > main { section:not(.clean) { /* outline: 1px solid var(--msp-accent-bg); */ padding: var(--msp-spacing-3); - background-color: var(--msp-surface-1); - box-shadow: 10px 10px 5px 0px var(--msp-shadow); + background-color: var(--msp-color-bg-surface-1); + box-shadow: 10px 10px 5px 0px var(--msp-color-shadow); border-radius: var(--msp-border-radius); } @@ -85,7 +87,7 @@ p:last-child { } a { - color: var(--msp-link-text); + color: var(--msp-color-text-link); } ul { @@ -123,49 +125,3 @@ video.respect-height { li:not(:last-child) { margin-bottom: var(--msp-spacing-1); } - -.btn { - padding: var(--msp-spacing-1); -} - -.btn-primary { - background-color: var(--msp--primary-bg); - color: var(--msp--primary-text); -} - -/* Lightgallery iframe fix */ -.lg-has-iframe { - position: absolute; - top: 0; - left: 0; - .lg-object { - width: 100% !important; - height: 100% !important; - } -} - -.bg-image { - background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), - var(--bg-image); - background-position: center; - background-size: cover; - color: var(--msp-text); - - padding: var(--msp-spacing-3); - - .text { - padding: var(--msp-spacing-2); - background-color: var(--msp-bg-transparent); - - border-radius: var(--msp-border-radius); - } -} - -a { - transition: text-shadow 0.2s; - --anim-shadow-color: var(--msp-accent-bg); - - &:not(.clean):hover { - text-shadow: 1px 1px 8px var(--anim-shadow-color); - } -} diff --git a/packages/website/package.json b/packages/website/package.json index e0e8177..2114401 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -14,6 +14,7 @@ "vite": "^5.4.1" }, "dependencies": { + "handlebars": "^4.7.8", "mini-strap-core": "workspace:*" } } diff --git a/packages/website/src/counter.ts b/packages/website/src/counter.ts deleted file mode 100644 index 09e5afd..0000000 --- a/packages/website/src/counter.ts +++ /dev/null @@ -1,9 +0,0 @@ -export function setupCounter(element: HTMLButtonElement) { - let counter = 0 - const setCounter = (count: number) => { - counter = count - element.innerHTML = `count is ${counter}` - } - element.addEventListener('click', () => setCounter(counter + 1)) - setCounter(0) -} diff --git a/packages/website/src/main.ts b/packages/website/src/main.ts index cc2bd2f..f5095bb 100644 --- a/packages/website/src/main.ts +++ b/packages/website/src/main.ts @@ -1,24 +1,12 @@ import "mini-strap-core"; -import typescriptLogo from "./typescript.svg"; -import viteLogo from "/vite.svg"; -import { setupCounter } from "./counter.ts"; +import render from "./render"; + +import layout from "./templates/form.html"; document.querySelector("#app")!.innerHTML = `
- - - - - - -

Vite + TypeScript

-
- -
-

- Click on the Vite and TypeScript logos to learn more -

+
+ ${render(layout, { name: "ale" })} +
`; - -setupCounter(document.querySelector("#counter")!); diff --git a/packages/website/src/render.ts b/packages/website/src/render.ts new file mode 100644 index 0000000..23684e4 --- /dev/null +++ b/packages/website/src/render.ts @@ -0,0 +1,11 @@ +import Handlebars from "handlebars"; + +export default function (template: string, data: Record) { + const engine = Handlebars.compile(template); + + return engine(data); +} + +export function mapRender(items: string[]) { + return items.join("\n"); +} diff --git a/packages/website/src/templates/form.html b/packages/website/src/templates/form.html new file mode 100644 index 0000000..50fedf6 --- /dev/null +++ b/packages/website/src/templates/form.html @@ -0,0 +1,127 @@ +
+
+
+ + +
+ We'll never share your email with anyone else. +
+
+
+ + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+ +
+ +
+
+ Disabled fieldset example +
+ + +
+
+ + +
+
+
+ + +
+
+ +
+
diff --git a/packages/website/src/templates/layout.html b/packages/website/src/templates/layout.html new file mode 100644 index 0000000..f0b8800 --- /dev/null +++ b/packages/website/src/templates/layout.html @@ -0,0 +1 @@ +
{{name}}
diff --git a/packages/website/src/typescript.svg b/packages/website/src/typescript.svg deleted file mode 100644 index d91c910..0000000 --- a/packages/website/src/typescript.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/website/src/vite-env.d.ts b/packages/website/src/vite-env.d.ts index 11f02fe..0dc7f4a 100644 --- a/packages/website/src/vite-env.d.ts +++ b/packages/website/src/vite-env.d.ts @@ -1 +1,4 @@ /// + +declare module "*.html"; +declare module "*.md"; diff --git a/packages/website/vite.config.ts b/packages/website/vite.config.ts new file mode 100644 index 0000000..f38a931 --- /dev/null +++ b/packages/website/vite.config.ts @@ -0,0 +1,26 @@ +import { defineConfig } from "vite"; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + // Custom plugin to load markdown files + { + name: "markdown-loader", + transform(code, id) { + if (id.slice(-3) === ".md") { + // For .md files, get the raw content + return `export default ${JSON.stringify(code)};`; + } + }, + }, + { + name: "html-loader", + transform(code, id) { + if (id.slice(-5) === ".html") { + // For .md files, get the raw content + return `export default ${JSON.stringify(code)};`; + } + }, + }, + ], +});