diff --git a/packages/core/.gitignore b/packages/core/.gitignore new file mode 100644 index 0000000..9b1ee42 --- /dev/null +++ b/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 diff --git a/packages/core/README.md b/packages/core/README.md new file mode 100644 index 0000000..26e57a5 --- /dev/null +++ b/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. diff --git a/packages/core/package.json b/packages/core/package.json new file mode 100644 index 0000000..dce323a --- /dev/null +++ b/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" + } +} + diff --git a/packages/core/src/_animations.scss b/packages/core/src/_animations.scss new file mode 100644 index 0000000..74efca8 --- /dev/null +++ b/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); + } +} diff --git a/packages/core/src/_mixins.scss b/packages/core/src/_mixins.scss new file mode 100644 index 0000000..e5abe23 --- /dev/null +++ b/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); + } + } +} diff --git a/packages/core/src/_tokens.scss b/packages/core/src/_tokens.scss new file mode 100644 index 0000000..460d536 --- /dev/null +++ b/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}; +} diff --git a/packages/core/src/_utils.scss b/packages/core/src/_utils.scss new file mode 100644 index 0000000..16045d5 --- /dev/null +++ b/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; +} diff --git a/packages/core/src/style.scss b/packages/core/src/style.scss new file mode 100644 index 0000000..a1916b2 --- /dev/null +++ b/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); + } +} diff --git a/packages/core/themes/catppuccin/_catppuccin.scss b/packages/core/themes/catppuccin/_catppuccin.scss new file mode 100644 index 0000000..4b09a04 --- /dev/null +++ b/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, + ), +); diff --git a/packages/core/themes/catppuccin/_frappe.scss b/packages/core/themes/catppuccin/_frappe.scss new file mode 100644 index 0000000..49485fc --- /dev/null +++ b/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; diff --git a/packages/core/themes/catppuccin/_latte.scss b/packages/core/themes/catppuccin/_latte.scss new file mode 100644 index 0000000..96487a1 --- /dev/null +++ b/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; diff --git a/packages/core/themes/catppuccin/_macchiato.scss b/packages/core/themes/catppuccin/_macchiato.scss new file mode 100644 index 0000000..9355e38 --- /dev/null +++ b/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; diff --git a/packages/core/themes/catppuccin/_mocha.scss b/packages/core/themes/catppuccin/_mocha.scss new file mode 100644 index 0000000..728949d --- /dev/null +++ b/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; diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json new file mode 100644 index 0000000..238655f --- /dev/null +++ b/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 + } +} diff --git a/packages/website/.gitignore b/packages/website/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/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? diff --git a/packages/website/index.html b/packages/website/index.html new file mode 100644 index 0000000..44a9335 --- /dev/null +++ b/packages/website/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + TS + + +
+ + + diff --git a/packages/website/package.json b/packages/website/package.json new file mode 100644 index 0000000..e0e8177 --- /dev/null +++ b/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:*" + } +} diff --git a/packages/website/public/vite.svg b/packages/website/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/packages/website/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/website/src/counter.ts b/packages/website/src/counter.ts new file mode 100644 index 0000000..09e5afd --- /dev/null +++ b/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) +} diff --git a/packages/website/src/main.ts b/packages/website/src/main.ts new file mode 100644 index 0000000..cc2bd2f --- /dev/null +++ b/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("#app")!.innerHTML = ` +
+ + + + + + +

Vite + TypeScript

+
+ +
+

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

+
+`; + +setupCounter(document.querySelector("#counter")!); diff --git a/packages/website/src/typescript.svg b/packages/website/src/typescript.svg new file mode 100644 index 0000000..d91c910 --- /dev/null +++ b/packages/website/src/typescript.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/website/src/vite-env.d.ts b/packages/website/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/packages/website/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/packages/website/tsconfig.json b/packages/website/tsconfig.json new file mode 100644 index 0000000..0511b9f --- /dev/null +++ b/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"] +}