feat(core): add styles for vanilla form elements

#1

packages/components/.gitignore

@@ -0,0 +1,175 @@
+# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
+
+# Logs
+
+logs
+_.log
+npm-debug.log_
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Caches
+
+.cache
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# Runtime data
+
+pids
+_.pid
+_.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+lib-cov
+
+# Coverage directory used by tools like istanbul
+
+coverage
+*.lcov
+
+# nyc test coverage
+
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+
+bower_components
+
+# node-waf configuration
+
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+
+build/Release
+
+# Dependency directories
+
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+
+web_modules/
+
+# TypeScript cache
+
+*.tsbuildinfo
+
+# Optional npm cache directory
+
+.npm
+
+# Optional eslint cache
+
+.eslintcache
+
+# Optional stylelint cache
+
+.stylelintcache
+
+# Microbundle cache
+
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+
+.node_repl_history
+
+# Output of 'npm pack'
+
+*.tgz
+
+# Yarn Integrity file
+
+.yarn-integrity
+
+# dotenv environment variable files
+
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+
+.parcel-cache
+
+# Next.js build output
+
+.next
+out
+
+# Nuxt.js build / generate output
+
+.nuxt
+dist
+
+# Gatsby files
+
+# Comment in the public line in if your project uses Gatsby and not Next.js
+
+# https://nextjs.org/blog/next-9-1#public-directory-support
+
+# public
+
+# vuepress build output
+
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+
+.temp
+
+# Docusaurus cache and generated files
+
+.docusaurus
+
+# Serverless directories
+
+.serverless/
+
+# FuseBox cache
+
+.fusebox/
+
+# DynamoDB Local files
+
+.dynamodb/
+
+# TernJS port file
+
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+
+.vscode-test
+
+# yarn v2
+
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store

packages/components/README.md

@@ -0,0 +1,15 @@
+# mini-strap-components
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run components.scss
+```
+
+This project was created using `bun init` in bun v1.1.27. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.

packages/components/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "mini-strap-components",
+  "module": "src/components.scss",
+  "type": "module",
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5.0.0"
+  }
+}
+

packages/components/src/components.scss

@@ -0,0 +1,8 @@
+.btn {
+  padding: var(--msp-spacing-1);
+}
+
+.btn-primary {
+  background-color: var(--msp--primary-bg);
+  color: var(--msp--primary-text);
+}

packages/components/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}

packages/core/_variables.scss

@@ -0,0 +1,83 @@
+@use "sass:color";
+
+/* Using catppuccin for now, make a theme switcher later */
+@use "./themes/catppuccin/catppuccin";
+
+@function getColor($color) {
+  $ctp-theme: map-get(catppuccin.$palette, "macchiato");
+  @return map-get($ctp-theme, $color);
+}
+
+/*
+*  ╭───────────────────────────────────────────────────────────╮
+*  │                 Mini-Strap Design Tokens                  │
+*  ╰───────────────────────────────────────────────────────────╯
+* */
+
+// ── Structure and convention ────────────────────────────────────────────
+
+/*
+*
+* */
+
+/* Taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
+$screen-sizes: (
+  "sm": 640px,
+  "md": 768px,
+  "lg": 1024px,
+  "xl": 1280px,
+  "2xl": 1536px,
+);
+
+$spacings: (
+  0 "--prj-spacing-0" 0,
+  1 "--prj-spacing-1" 0.25rem,
+  2 "--prj-spacing-2" 0.5rem,
+  3 "--prj-spacing-3" 1rem,
+  4 "--prj-spacing-4" 2rem,
+  5 "--prj-spacing-5" 3rem
+);
+
+$border-radius: 0.5rem;
+
+// Native CSS Variables to allow overridings and usage in external stylesheets
+:root {
+  /* Variables prefixed with prj to avoid collisions */
+
+  /* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */
+  --prj-bg: #{getColor("mantle")};
+  --prj-bg-transparent: #{color.scale(getColor("mantle"), $alpha: -10%)};
+  --prj-shadow: #{getColor("crust")};
+  --prj-text: #{getColor("text")};
+
+  --prj-surface-1: #{getColor("base")};
+  --prj-surface-2: #{darken(getColor("surface0"), 2%)};
+  --prj-surface-3: #{getColor("surface1")};
+  --prj-surface-text: #{getColor("text")};
+
+  --prj-link-text: #{getColor("teal")};
+
+  --prj-accent-bg: #{getColor("teal")};
+  --prj-accent-text: #{getColor("base")};
+
+  --prj-primary: #{getColor("teal")};
+  --prj-primary-text: #{getColor("base")};
+
+  --prj-secondary: #{getColor("mauve")};
+  --prj-secondary-text: #{getColor("base")};
+
+  --prj-danger: #{getColor("red")};
+  --prj-danger-text: #{getColor("base")};
+
+  --prj-disabled: #{getColor("red")};
+  --prj-disabled-text: rgba(#{getColor("raw")}, 0.5);
+
+  --prj-input: #{getColor("text")};
+  --prj-input-text: #{getColor("base")};
+
+  @each $index, $variable, $value in $spacings {
+    #{$variable}: #{$value};
+  }
+
+  --prj-border-radius: #{$border-radius};
+}

packages/core/src/_mixins.scss

@@ -15,3 +15,12 @@
     }
   }
 }
+
+@mixin hover-darker() {
+  transition: filter 0.15s ease-in-out;
+  filter: brightness(1);
+
+  &:hover {
+    filter: brightness(0.9);
+  }
+}

packages/core/src/_reset.scss

@@ -0,0 +1,187 @@
+/*
+ * ╭─────────────────────────────────────────────────────────────────╮
+ * │ Reset borrowed from https://github.com/kkrishguptaa/reseter.css │
+ * ╰─────────────────────────────────────────────────────────────────╯
+*/
+
+//  ── Global ──────────────────────────────────────────────────────────────
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+  background-clip: inherit;
+  padding: 0;
+  margin: 0;
+}
+
+:where(:root) {
+  box-sizing: border-box;
+  background-clip: padding-box;
+  line-height: 1.5;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+:where(main) {
+  display: block;
+}
+
+:where(h1) {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+:where(p + p) {
+  margin-top: 1rem;
+}
+
+// ── Forms ───────────────────────────────────────────────────────────────
+:where(button, input, optgroup, select, textarea) {
+  line-height: inherit;
+  border: 1px solid currentColor;
+}
+
+:where(button) {
+  overflow: visible;
+  text-transform: none;
+}
+
+:where(button, [type="button"], [type="reset"], [type="submit"]) {
+  -webkit-appearance: button;
+  padding: 1px 6px;
+  &:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+:where(input) {
+  overflow: visible;
+}
+
+:where(input, textarea) {
+  padding: 1px;
+}
+
+:where(fieldset) {
+  border: 1px solid currentColor;
+  margin: 0 2px;
+}
+
+:where(legend) {
+  color: inherit;
+  display: table;
+  max-width: 100%;
+  white-space: normal;
+}
+
+:where(progress) {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+:where(select) {
+  text-transform: none;
+}
+
+:where(textarea) {
+  overflow: auto;
+  vertical-align: top;
+}
+
+:where([type="search"]) {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+:where([type="color"]) {
+  background: inherit;
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.5;
+}
+
+::-webkit-search-decoration,
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+
+::-moz-focus-inner {
+  border: 0;
+}
+
+:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+// ── Text ────────────────────────────────────────────────────────────────
+
+:where(a) {
+  background-color: transparent;
+}
+
+:where(abbr[title]) {
+  text-decoration: underline dotted;
+}
+
+:where(code, kbd, samp, pre) {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+:where(sub, sup) {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+:where(sub) {
+  bottom: -0.25em;
+}
+
+:where(sup) {
+  top: -0.5em;
+}
+
+// ── Other ───────────────────────────────────────────────────────────────
+
+:where(a) {
+  background-color: transparent;
+}
+
+:where(abbr[title]) {
+  text-decoration: underline dotted;
+}
+
+:where(code, kbd, samp, pre) {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+:where(sub, sup) {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+:where(sub) {
+  bottom: -0.25em;
+}
+
+:where(sup) {
+  top: -0.5em;
+}

packages/core/src/_tokens.scss

@@ -44,44 +44,58 @@ $spacings: (
 
 $border-radius: 0.5rem;
 
+/* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */
+$msp-colors: (
+  "--msp-color-bg": #{getColor("mantle")},
+  "--msp-color-bg-transparent": #{color.scale(getColor("mantle"), $alpha: -10%)},
+  "--msp-color-bg-surface-1": #{getColor("base")},
+  "--msp-color-bg-surface-2": #{darken(getColor("surface0"), 2%)},
+  "--msp-color-bg-surface-3": #{getColor("surface1")},
+
+  "--msp-color-bg-accent": #{getColor("teal")},
+  "--msp-color-bg-primary": #{getColor("teal")},
+  "--msp-color-bg-secondary": #{getColor("mauve")},
+  "--msp-color-bg-danger": #{getColor("red")},
+  "--msp-color-bg-disabled": #{getColor("red")},
+  "--msp-color-bg-input": #{getColor("text")},
+  "--msp-color-bg-checkbox": #{getColor("teal")},
+  "--msp-color-bg-range": #{getColor("surface1")},
+  "--msp-color-bg-btn": #{getColor("teal")},
+
+  "--msp-color-text": #{getColor("text")},
+  "--msp-color-text-surface": #{getColor("text")},
+  "--msp-color-text-link": #{getColor("teal")},
+  "--msp-color-text-accent": #{getColor("base")},
+  "--msp-color-text-primary": #{getColor("base")},
+  "--msp-color-text-secondary": #{getColor("base")},
+  "--msp-color-text-danger": #{getColor("base")},
+  "--msp-color-text-disabled": #{color.scale(getColor("text"), $alpha: -30%)},
+  "--msp-color-text-input": #{getColor("base")},
+  "--msp-color-text-input-disabled": #{color.scale(
+      getColor("base"),
+      $alpha: -30%
+    )},
+  "--msp-color-text-checkbox": #{getColor("surface1")},
+  "--msp-color-text-range": #{getColor("teal")},
+  "--msp-color-text-btn": #{getColor("base")},
+
+  "--msp-color-shadow": #{getColor("crust")},
+  "--msp-color-transparent": transparent,
+);
+
 // Native CSS Variables to allow overridings and usage in external stylesheets
 :root {
-  /* Variables prefixed with prj to avoid collisions */
-
-  /* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */
-  --msp-bg: #{getColor("mantle")};
-  --msp-bg-transparent: #{color.scale(getColor("mantle"), $alpha: -10%)};
-  --msp-shadow: #{getColor("crust")};
-  --msp-text: #{getColor("text")};
-
-  --msp-surface-1: #{getColor("base")};
-  --msp-surface-2: #{darken(getColor("surface0"), 2%)};
-  --msp-surface-3: #{getColor("surface1")};
-  --msp-surface-text: #{getColor("text")};
-
-  --msp-link-text: #{getColor("teal")};
-
-  --msp-accent-bg: #{getColor("teal")};
-  --msp-accent-text: #{getColor("base")};
-
-  --msp-primary: #{getColor("teal")};
-  --msp-primary-text: #{getColor("base")};
-
-  --msp-secondary: #{getColor("mauve")};
-  --msp-secondary-text: #{getColor("base")};
-
-  --msp-danger: #{getColor("red")};
-  --msp-danger-text: #{getColor("base")};
-
-  --msp-disabled: #{getColor("red")};
-  --msp-disabled-text: rgba(#{getColor("raw")}, 0.5);
-
-  --msp-input: #{getColor("text")};
-  --msp-input-text: #{getColor("base")};
+  @each $variable, $value in $msp-colors {
+    #{$variable}: #{$value};
+  }
 
   @each $index, $variable, $value in $spacings {
     #{$variable}: #{$value};
   }
 
-  --msp-border-radius: #{$border-radius};
+  // ── Borders ─────────────────────────────────────────────────────────────
+  --msp-border-width: 1px;
+  --msp-border-color: var(--msp-color-bg-transparent);
+  --msp-border-style: solid;
+  --msp-border-radius: 0.2rem;
 }

packages/core/src/_utils.scss

@@ -1,33 +1,33 @@
 @use "./tokens" as *;
 @use "./mixins";
 
-.position-fixed {
+.msp-position-fixed {
   position: fixed;
   left: 0;
   top: 0;
   z-index: 2;
 }
 
-.position-sticky {
+.msp-position-sticky {
   position: sticky;
   left: 0;
   top: 0;
   z-index: 2;
 }
 
-.d-none {
+.msp-d-none {
   display: none;
 }
 
-.d-block {
+.msp-d-block {
   display: block;
 }
 
-.d-flex {
+.msp-d-flex {
   display: flex;
 }
 
-.visually-hidden {
+.msp-visually-hidden {
   height: 0;
   width: 0;
   position: absolute;
@@ -35,46 +35,46 @@
 }
 
 @include mixins.responsive using($breakpoint, $size) {
-  .d-#{$breakpoint}-none {
+  .msp-d-#{$breakpoint}-none {
     display: none;
   }
-  .d-#{$breakpoint}-block {
+  .msp-d-#{$breakpoint}-block {
     display: block;
   }
 
-  .d-#{$breakpoint}-flex {
+  .msp-d-#{$breakpoint}-flex {
     display: flex;
   }
 }
 
-.flex-eq > * {
+.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;
 }

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,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="none" stroke="#{$stroke-color}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m6 10 3 3 6-6"/></svg>');
+  }
+}
+
+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;
+}

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);
-  }
-}

packages/website/package.json

@@ -14,6 +14,7 @@
     "vite": "^5.4.1"
   },
   "dependencies": {
+    "handlebars": "^4.7.8",
     "mini-strap-core": "workspace:*"
   }
 }

packages/website/src/counter.ts

@@ -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)
-}

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<HTMLDivElement>("#app")!.innerHTML = `
   <main class="msp-container">
-    <a href="https://vitejs.dev" target="_blank">
-      <img src="${viteLogo}" class="logo" alt="Vite logo" />
-    </a>
-    <a href="https://www.typescriptlang.org/" target="_blank">
-      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
-    </a>
-    <h1>Vite + TypeScript</h1>
-    <div class="card">
-      <button id="counter" type="button"></button>
-    </div>
-    <p class="read-the-docs">
-      Click on the Vite and TypeScript logos to learn more
-    </p>
+    <section>
+      ${render(layout, { name: "ale" })}
+    </section>
   </main>
 `;
-
-setupCounter(document.querySelector<HTMLButtonElement>("#counter")!);

packages/website/src/render.ts

@@ -0,0 +1,11 @@
+import Handlebars from "handlebars";
+
+export default function (template: string, data: Record<string, unknown>) {
+  const engine = Handlebars.compile(template);
+
+  return engine(data);
+}
+
+export function mapRender(items: string[]) {
+  return items.join("\n");
+}

packages/website/src/templates/form.html

@@ -0,0 +1,127 @@
+<form>
+  <fieldset>
+    <div class="msp-mb-3">
+      <label for="exampleInputEmail1" class="">Email address</label>
+      <input
+        type="email"
+        class=""
+        id="exampleInputEmail1"
+        aria-describedby="emailHelp"
+        placeholder="user@email.com"
+      />
+      <div id="emailHelp" class="">
+        We'll never share your email with anyone else.
+      </div>
+    </div>
+    <div class="msp-mb-3">
+      <label for="exampleInputPassword1" class="">Password</label>
+      <input
+        type="password"
+        class=""
+        id="exampleInputPassword1"
+        placeholder="Secret..."
+      />
+    </div>
+    <div class="msp-mb-3">
+      <input type="checkbox" class="" id="exampleCheck1" />
+      <label class="" for="exampleCheck1">Check me out</label>
+    </div>
+
+    <div class="msp-mb-3">
+      <input
+        class="form-check-input"
+        type="radio"
+        name="flexRadioDefault"
+        id="flexRadioDefault1"
+      />
+      <label class="form-check-label" for="flexRadioDefault1">
+        Default radio
+      </label>
+    </div>
+
+    <div class="msp-mb-3">
+      <label class="form-check-label" for="flexRadioDefault1">
+        Default range
+      </label>
+      <input
+        class="form-check-input"
+        type="range"
+        name="flexRadioDefault"
+        id="flexRadioDefault1"
+      />
+    </div>
+
+    <div class="msp-mb-3">
+      <label class="" for="example-select">Select</label>
+      <select
+        id="example-select"
+        class="form-select"
+        aria-label="Default select example"
+      >
+        <option selected disabled hidden>Open this select menu</option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </select>
+    </div>
+
+    <div class="msp-mb-3">
+      <label for="formFile" class="form-label"
+        >Default file input example</label
+      >
+      <input class="form-control" type="file" id="formFile" />
+    </div>
+
+    <div class="msp-mb-3">
+      <label for="exampleColorInput" class="form-label">Color picker</label>
+      <input
+        type="color"
+        class="form-control form-control-color"
+        id="exampleColorInput"
+        value="#563d7c"
+        title="Choose your color"
+      />
+    </div>
+
+    <button type="submit" class="">Submit</button>
+  </fieldset>
+</form>
+
+<br />
+
+<form>
+  <fieldset disabled class="msp-fieldset-border">
+    <legend>Disabled fieldset example</legend>
+    <div class="msp-mb-3">
+      <label for="disabledTextInput" class="form-label">Disabled input</label>
+      <input
+        type="text"
+        id="disabledTextInput"
+        class="form-control"
+        placeholder="Disabled input"
+      />
+    </div>
+    <div class="msp-mb-3">
+      <label for="disabledSelect" class="form-label"
+        >Disabled select menu</label
+      >
+      <select id="disabledSelect" class="form-select">
+        <option>Disabled select</option>
+      </select>
+    </div>
+    <div class="msp-mb-3">
+      <div class="form-check">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          id="disabledFieldsetCheck"
+          disabled
+        />
+        <label class="form-check-label" for="disabledFieldsetCheck">
+          Can't check this
+        </label>
+      </div>
+    </div>
+    <button type="submit" class="btn btn-primary">Submit</button>
+  </fieldset>
+</form>

packages/website/src/templates/layout.html

@@ -0,0 +1 @@
+<section>{{name}}</section>

packages/website/src/typescript.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>

packages/website/src/vite-env.d.ts

@@ -1 +1,4 @@
 /// <reference types="vite/client" />
+
+declare module "*.html";
+declare module "*.md";

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)};`;
+        }
+      },
+    },
+  ],
+});