Import progress from external project

#1

packages/core/.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/core/README.md

@@ -0,0 +1,15 @@
+# mini-strap-core
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run style.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/core/package.json

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

packages/core/src/_animations.scss

@@ -0,0 +1,60 @@
+@use "./mixins";
+
+@include mixins.responsive using ($breakpoint, $size) {
+  .anim-#{$breakpoint}-none {
+    animation: none !important;
+  }
+
+  .anim-group-#{$breakpoint}-none > * {
+    animation: none !important;
+  }
+}
+
+@keyframes hover {
+  from {
+    transform: translate(0, 0);
+  }
+  to {
+    transform: translate(0, var(--anim-translation-value));
+  }
+}
+
+$anim-base-offset: -1s;
+
+.anim-idle-hover {
+  --anim-translation-value: var(--prj-spacing-1);
+  --anim-offset: 0s;
+  animation: hover 1.5s ease-in-out var(--anim-offset) infinite alternate;
+}
+
+.anim-idle-hover-group {
+  & > * {
+    @extend .anim-idle-hover;
+  }
+
+  @for $index from 1 through 20 {
+    $anim-offset: $anim-base-offset * $index;
+    & > :nth-child(#{$index}n) {
+      --anim-offset: #{$anim-offset};
+    }
+  }
+}
+
+.anim-hover-zoom {
+  transition: scale 0.2s;
+  &:hover {
+    scale: 1.05;
+  }
+}
+
+.anim-hover-translate {
+  --anim-translation-value: -5px;
+  --anim-shadow-color: var(--prj-accent-bg);
+  transition: translate 0.2s;
+
+  &:hover {
+    translate: var(--anim-translation-value) var(--anim-translation-value);
+    box-shadow: calc(var(--anim-translation-value) * -1)
+      calc(var(--anim-translation-value) * -1) 0px 0px var(--anim-shadow-color);
+  }
+}

packages/core/src/_mixins.scss

@@ -0,0 +1,17 @@
+@use "./tokens" as *;
+
+@mixin responsive {
+  @each $breakpoint, $size in $msp-breakpoints {
+    @media screen and (min-width: $size) {
+      @content ($breakpoint, $size);
+    }
+  }
+}
+
+@mixin responsive-steps($from, $to) {
+  @include responsive using ($breakpoint, $size) {
+    @for $index from $from through $to {
+      @content ($breakpoint, $index);
+    }
+  }
+}

packages/core/src/_tokens.scss

@@ -0,0 +1,87 @@
+@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 ────────────────────────────────────────────
+
+/*
+* The token follow the following syntax: "prefix-group-property-value", where:
+* - prefix: always "msp" the project prefix to avoid clashes with other styles.
+* - group: the topic, Ex: "border", "color", "space".
+* - property: the property of the group we are modifying. Optional.
+* - value: depends of the property, but its the final modifier and the actual value.
+* */
+
+/* Taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
+$msp-breakpoints: (
+  "sm": 640px,
+  "md": 768px,
+  "lg": 1024px,
+  "xl": 1280px,
+  "2xl": 1536px,
+);
+
+$spacings: (
+  0 "--msp-spacing-0" 0,
+  1 "--msp-spacing-1" 0.25rem,
+  2 "--msp-spacing-2" 0.5rem,
+  3 "--msp-spacing-3" 1rem,
+  4 "--msp-spacing-4" 2rem,
+  5 "--msp-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 */
+  --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 $index, $variable, $value in $spacings {
+    #{$variable}: #{$value};
+  }
+
+  --msp-border-radius: #{$border-radius};
+}

packages/core/src/_utils.scss

@@ -0,0 +1,329 @@
+@use "./tokens" as *;
+@use "./mixins";
+
+.position-fixed {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.position-sticky {
+  position: sticky;
+  left: 0;
+  top: 0;
+  z-index: 2;
+}
+
+.d-none {
+  display: none;
+}
+
+.d-block {
+  display: block;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.visually-hidden {
+  height: 0;
+  width: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+@include mixins.responsive using($breakpoint, $size) {
+  .d-#{$breakpoint}-none {
+    display: none;
+  }
+  .d-#{$breakpoint}-block {
+    display: block;
+  }
+
+  .d-#{$breakpoint}-flex {
+    display: flex;
+  }
+}
+
+.flex-eq > * {
+  flex: 100%;
+}
+
+.flex-column {
+  flex-direction: column !important;
+}
+.flex-row {
+  flex-direction: row !important;
+}
+
+@include mixins.responsive using($breakpoint, $size) {
+  .flex-#{$breakpoint}-column {
+    flex-direction: column !important;
+  }
+  .flex-#{$breakpoint}-row {
+    flex-direction: row !important;
+  }
+}
+
+.hstack {
+  --prj-gap: var(--prj-spacing-3);
+  display: flex;
+  gap: var(--prj-gap);
+  align-items: center;
+}
+
+.hstack-reverse {
+  --prj-gap: var(--prj-spacing-3);
+  display: flex;
+  gap: var(--prj-gap);
+  align-items: center;
+  flex-direction: row-reverse;
+}
+
+.vstack {
+  --prj-gap: var(--prj-spacing-3);
+  display: flex;
+  gap: var(--prj-gap);
+  flex-direction: column;
+}
+
+.vstack-reverse {
+  --prj-gap: var(--prj-spacing-3);
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.flex-grow {
+  flex-grow: 1;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+@include mixins.responsive using($breakpoint, $size) {
+  .flex-#{$breakpoint}-wrap {
+    flex-wrap: wrap;
+  }
+
+  .flex-#{$breakpoint}-nowrap {
+    flex-wrap: nowrap;
+  }
+}
+
+.flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.justify-content-center {
+  justify-content: center !important;
+}
+
+.justify-content-between {
+  justify-content: space-between !important;
+}
+
+.justify-content-around {
+  justify-content: space-around !important;
+}
+
+.align-items-center {
+  align-items: center !important;
+}
+
+.grid {
+  --prj-gap: var(--prj-spacing-3);
+  --prj-columns: repeat(3, 1fr);
+  --prj-min-col-width: 150px;
+  display: grid;
+  grid-template-columns: var(--prj-columns);
+  gap: var(--prj-gap);
+}
+
+@mixin grid-cols($amount) {
+  --prj-columns: repeat(#{$amount}, minmax(var(--prj-min-col-width), 1fr));
+}
+
+@for $i from 1 through 12 {
+  .grid-cols-#{$i} {
+    @include grid-cols($i);
+  }
+}
+
+@include mixins.responsive-steps(1, 12) using ($breakpoint, $index) {
+  .grid-#{$breakpoint}-cols-#{$index} {
+    @include grid-cols($index);
+  }
+}
+
+.list-unstyle {
+  list-style: none;
+}
+
+.text-justify {
+  text-align: justify;
+  text-justify: inter-word;
+}
+
+.text-start {
+  text-align: start;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-end {
+  text-align: end;
+}
+
+.align-start {
+  vertical-align: start;
+}
+
+.align-center {
+  vertical-align: middle;
+}
+
+.align-end {
+  vertical-align: end;
+}
+
+.overflow-scroll {
+  overflow: scroll;
+}
+.overflow-x-scroll {
+  overflow-x: scroll;
+}
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
+.w-auto {
+  width: auto;
+}
+.h-auto {
+  height: auto;
+}
+@for $i from 0 through 100 {
+  .w-#{$i} {
+    width: percentage(calc($i / 100));
+  }
+  .h-#{$i} {
+    height: percentage(calc($i / 100));
+  }
+}
+
+@include mixins.responsive-steps(0, 100) using ($breakpoint, $index) {
+  .w-#{$breakpoint}-#{$index} {
+    width: percentage(calc($index / 100));
+  }
+
+  .h-#{$breakpoint}-#{$index} {
+    height: percentage(calc($index / 100));
+  }
+}
+
+@mixin spacing-utils($name, $value, $breakpoint: false) {
+  @if $breakpoint {
+    $name: "#{$breakpoint}-#{$name}";
+  }
+
+  .m-#{$name} {
+    margin: $value !important;
+  }
+  .mx-#{$name} {
+    margin-left: $value !important;
+    margin-right: $value !important;
+  }
+  .my-#{$name} {
+    margin-top: $value !important;
+    margin-bottom: $value !important;
+  }
+  .mt-#{$name} {
+    margin-top: $value !important;
+  }
+  .mb-#{$name} {
+    margin-bottom: $value !important;
+  }
+  .ml-#{$name} {
+    margin-left: $value !important;
+  }
+  .mr-#{$name} {
+    margin-right: $value !important;
+  }
+  .p-#{$name} {
+    padding: $value !important;
+  }
+  .px-#{$name} {
+    padding-left: $value !important;
+    padding-right: $value !important;
+  }
+  .py-#{$name} {
+    padding-top: $value !important;
+    padding-bottom: $value !important;
+  }
+  .pt-#{$name} {
+    padding-top: $value !important;
+  }
+  .pb-#{$name} {
+    padding-bottom: $value !important;
+  }
+  .pl-#{$name} {
+    padding-left: $value !important;
+  }
+  .pr-#{$name} {
+    padding-right: $value !important;
+  }
+
+  .gap-#{$name} {
+    --prj-gap: #{$value};
+  }
+}
+
+@include spacing-utils(auto, auto);
+@include mixins.responsive using($breakpoint, $size) {
+  @include spacing-utils(auto, auto);
+}
+
+@each $index, $variable, $value in $spacings {
+  @include spacing-utils($index, var(#{$variable}));
+  @include mixins.responsive using($breakpoint, $size) {
+    @include spacing-utils($index, var(#{$variable}), $breakpoint);
+  }
+}
+
+.shadow-0 {
+  box-shadow: none;
+}
+
+.shadow-1 {
+  box-shadow: 10px 10px 5px 0px var(--prj-shadow);
+}
+
+.border-radius {
+  border-radius: var(--prj-border-radius);
+}
+
+.text-none {
+  text-transform: none;
+}
+.text-capitalize {
+  text-transform: capitalize;
+}
+.text-uppercase {
+  text-transform: uppercase;
+}
+.text-uppercase {
+  text-transform: uppercase;
+}
+.text-lowercase {
+  text-transform: lowercase;
+}

packages/core/src/style.scss

@@ -0,0 +1,171 @@
+@use "./tokens.scss" as *;
+@use "./utils.scss";
+@use "./animations.scss";
+@use "./mixins";
+
+// 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);
+
+  /* Update font size based on screen width, source: https://matthewjamestaylor.com/responsive-font-size */
+  font-size: calc(15px + 0.390625vw);
+}
+
+body > main {
+  max-width: 95vw; /* leave some space in the end by default */
+  margin: auto;
+  padding: 15px 0;
+}
+
+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);
+  border-radius: var(--msp-border-radius);
+}
+
+section:not(:first-of-type) {
+  margin-top: var(--msp-spacing-4);
+}
+
+h1,
+.fs-1 {
+  font-size: 3rem !important;
+  margin-top: 0;
+  margin-bottom: var(--msp-spacing-3);
+}
+h2,
+.fs-2 {
+  font-size: 2.5rem !important;
+  margin-bottom: var(--msp-spacing-3);
+}
+h3,
+.fs-3 {
+  font-size: 2rem !important;
+  margin-bottom: var(--msp-spacing-2);
+}
+h4,
+.fs-4 {
+  font-size: 1.5rem !important;
+  margin-bottom: var(--msp-spacing-2);
+}
+h5,
+.fs-5 {
+  font-size: 1.25rem !important;
+  margin-bottom: var(--msp-spacing-1);
+}
+h6,
+.fs-6 {
+  font-size: 1rem !important;
+  margin-bottom: var(--msp-spacing-1);
+}
+
+p {
+  margin-bottom: var(--msp-spacing-2);
+}
+
+p:last-child {
+  margin-bottom: 0;
+}
+
+.msp-container {
+  max-width: 100%;
+}
+
+/* Main content fix width, taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
+@include mixins.responsive using($breakpoint, $size) {
+  .msp-container {
+    margin: auto;
+    max-width: $size;
+  }
+}
+
+a {
+  color: var(--msp-link-text);
+}
+
+ul {
+  /* Make the marker position is inside the container */
+  list-style-position: inside;
+  margin: 0;
+
+  ul {
+    margin-left: var(--msp-spacing-3);
+  }
+}
+
+.list-unstyle {
+  list-style: none;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+img.respect-width,
+video.respect-width {
+  max-width: 100%;
+  height: auto;
+}
+
+img.respect-height,
+video.respect-height {
+  max-height: 100%;
+  width: auto;
+}
+
+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/core/themes/catppuccin/_catppuccin.scss

@@ -0,0 +1,114 @@
+$palette: (
+  'latte': (
+    'rosewater': #dc8a78,
+    'flamingo': #dd7878,
+    'pink': #ea76cb,
+    'mauve': #8839ef,
+    'red': #d20f39,
+    'maroon': #e64553,
+    'peach': #fe640b,
+    'yellow': #df8e1d,
+    'green': #40a02b,
+    'teal': #179299,
+    'sky': #04a5e5,
+    'sapphire': #209fb5,
+    'blue': #1e66f5,
+    'lavender': #7287fd,
+    'text': #4c4f69,
+    'subtext1': #5c5f77,
+    'subtext0': #6c6f85,
+    'overlay2': #7c7f93,
+    'overlay1': #8c8fa1,
+    'overlay0': #9ca0b0,
+    'surface2': #acb0be,
+    'surface1': #bcc0cc,
+    'surface0': #ccd0da,
+    'base': #eff1f5,
+    'mantle': #e6e9ef,
+    'crust': #dce0e8,
+  ),
+  'frappe': (
+    'rosewater': #f2d5cf,
+    'flamingo': #eebebe,
+    'pink': #f4b8e4,
+    'mauve': #ca9ee6,
+    'red': #e78284,
+    'maroon': #ea999c,
+    'peach': #ef9f76,
+    'yellow': #e5c890,
+    'green': #a6d189,
+    'teal': #81c8be,
+    'sky': #99d1db,
+    'sapphire': #85c1dc,
+    'blue': #8caaee,
+    'lavender': #babbf1,
+    'text': #c6d0f5,
+    'subtext1': #b5bfe2,
+    'subtext0': #a5adce,
+    'overlay2': #949cbb,
+    'overlay1': #838ba7,
+    'overlay0': #737994,
+    'surface2': #626880,
+    'surface1': #51576d,
+    'surface0': #414559,
+    'base': #303446,
+    'mantle': #292c3c,
+    'crust': #232634,
+  ),
+  'macchiato': (
+    'rosewater': #f4dbd6,
+    'flamingo': #f0c6c6,
+    'pink': #f5bde6,
+    'mauve': #c6a0f6,
+    'red': #ed8796,
+    'maroon': #ee99a0,
+    'peach': #f5a97f,
+    'yellow': #eed49f,
+    'green': #a6da95,
+    'teal': #8bd5ca,
+    'sky': #91d7e3,
+    'sapphire': #7dc4e4,
+    'blue': #8aadf4,
+    'lavender': #b7bdf8,
+    'text': #cad3f5,
+    'subtext1': #b8c0e0,
+    'subtext0': #a5adcb,
+    'overlay2': #939ab7,
+    'overlay1': #8087a2,
+    'overlay0': #6e738d,
+    'surface2': #5b6078,
+    'surface1': #494d64,
+    'surface0': #363a4f,
+    'base': #24273a,
+    'mantle': #1e2030,
+    'crust': #181926,
+  ),
+  'mocha': (
+    'rosewater': #f5e0dc,
+    'flamingo': #f2cdcd,
+    'pink': #f5c2e7,
+    'mauve': #cba6f7,
+    'red': #f38ba8,
+    'maroon': #eba0ac,
+    'peach': #fab387,
+    'yellow': #f9e2af,
+    'green': #a6e3a1,
+    'teal': #94e2d5,
+    'sky': #89dceb,
+    'sapphire': #74c7ec,
+    'blue': #89b4fa,
+    'lavender': #b4befe,
+    'text': #cdd6f4,
+    'subtext1': #bac2de,
+    'subtext0': #a6adc8,
+    'overlay2': #9399b2,
+    'overlay1': #7f849c,
+    'overlay0': #6c7086,
+    'surface2': #585b70,
+    'surface1': #45475a,
+    'surface0': #313244,
+    'base': #1e1e2e,
+    'mantle': #181825,
+    'crust': #11111b,
+  ),
+);

packages/core/themes/catppuccin/_frappe.scss

@@ -0,0 +1,26 @@
+$rosewater: #f2d5cf;
+$flamingo: #eebebe;
+$pink: #f4b8e4;
+$mauve: #ca9ee6;
+$red: #e78284;
+$maroon: #ea999c;
+$peach: #ef9f76;
+$yellow: #e5c890;
+$green: #a6d189;
+$teal: #81c8be;
+$sky: #99d1db;
+$sapphire: #85c1dc;
+$blue: #8caaee;
+$lavender: #babbf1;
+$text: #c6d0f5;
+$subtext1: #b5bfe2;
+$subtext0: #a5adce;
+$overlay2: #949cbb;
+$overlay1: #838ba7;
+$overlay0: #737994;
+$surface2: #626880;
+$surface1: #51576d;
+$surface0: #414559;
+$base: #303446;
+$mantle: #292c3c;
+$crust: #232634;

packages/core/themes/catppuccin/_latte.scss

@@ -0,0 +1,26 @@
+$rosewater: #dc8a78;
+$flamingo: #dd7878;
+$pink: #ea76cb;
+$mauve: #8839ef;
+$red: #d20f39;
+$maroon: #e64553;
+$peach: #fe640b;
+$yellow: #df8e1d;
+$green: #40a02b;
+$teal: #179299;
+$sky: #04a5e5;
+$sapphire: #209fb5;
+$blue: #1e66f5;
+$lavender: #7287fd;
+$text: #4c4f69;
+$subtext1: #5c5f77;
+$subtext0: #6c6f85;
+$overlay2: #7c7f93;
+$overlay1: #8c8fa1;
+$overlay0: #9ca0b0;
+$surface2: #acb0be;
+$surface1: #bcc0cc;
+$surface0: #ccd0da;
+$base: #eff1f5;
+$mantle: #e6e9ef;
+$crust: #dce0e8;

packages/core/themes/catppuccin/_macchiato.scss

@@ -0,0 +1,26 @@
+$rosewater: #f4dbd6;
+$flamingo: #f0c6c6;
+$pink: #f5bde6;
+$mauve: #c6a0f6;
+$red: #ed8796;
+$maroon: #ee99a0;
+$peach: #f5a97f;
+$yellow: #eed49f;
+$green: #a6da95;
+$teal: #8bd5ca;
+$sky: #91d7e3;
+$sapphire: #7dc4e4;
+$blue: #8aadf4;
+$lavender: #b7bdf8;
+$text: #cad3f5;
+$subtext1: #b8c0e0;
+$subtext0: #a5adcb;
+$overlay2: #939ab7;
+$overlay1: #8087a2;
+$overlay0: #6e738d;
+$surface2: #5b6078;
+$surface1: #494d64;
+$surface0: #363a4f;
+$base: #24273a;
+$mantle: #1e2030;
+$crust: #181926;

packages/core/themes/catppuccin/_mocha.scss

@@ -0,0 +1,26 @@
+$rosewater: #f5e0dc;
+$flamingo: #f2cdcd;
+$pink: #f5c2e7;
+$mauve: #cba6f7;
+$red: #f38ba8;
+$maroon: #eba0ac;
+$peach: #fab387;
+$yellow: #f9e2af;
+$green: #a6e3a1;
+$teal: #94e2d5;
+$sky: #89dceb;
+$sapphire: #74c7ec;
+$blue: #89b4fa;
+$lavender: #b4befe;
+$text: #cdd6f4;
+$subtext1: #bac2de;
+$subtext0: #a6adc8;
+$overlay2: #9399b2;
+$overlay1: #7f849c;
+$overlay0: #6c7086;
+$surface2: #585b70;
+$surface1: #45475a;
+$surface0: #313244;
+$base: #1e1e2e;
+$mantle: #181825;
+$crust: #11111b;

packages/core/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/website/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/website/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

packages/website/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "mini-strap-website",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 3000",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "sass-embedded": "^1.78.0",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.1"
+  },
+  "dependencies": {
+    "mini-strap-core": "workspace:*"
+  }
+}

packages/website/public/vite.svg

@@ -0,0 +1 @@
+<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="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

packages/website/src/counter.ts

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,24 @@
+import "mini-strap-core";
+import typescriptLogo from "./typescript.svg";
+import viteLogo from "/vite.svg";
+import { setupCounter } from "./counter.ts";
+
+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>
+  </main>
+`;
+
+setupCounter(document.querySelector<HTMLButtonElement>("#counter")!);

packages/website/src/typescript.svg

@@ -0,0 +1 @@
+<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

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/website/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}