Merge branch 'feature/core-library'

.forgejo/workflows/publish.yaml

@@ -1,6 +1,8 @@
 name: Publish package
 on:
   push:
+    branches:
+      - main
   workflow_dispatch:
 env:
   NPM_TAG: ${{ github.ref == 'refs/heads/main' && 'latest' || 'next' }}
@@ -29,6 +31,9 @@ jobs:
         id: "setup_bun"
         uses: oven-sh/setup-bun@v2
 
+      - name: Install dependencies
+        run: "bun install"
+
       - name: Setup Cog
         uses: https://github.com/eshepelyuk/cocogitto-diya@v1
         with:

packages/core/package.json

@@ -1,15 +1,17 @@
 {
-  "name": "@mini-strap/core",
+	"name": "@mini-strap/core",
-  "version": "0.0.1",
+	"version": "0.0.1",
-  "module": "src/style.scss",
+	"module": "src/style.scss",
-  "type": "module",
+	"type": "module",
-  "scripts": {
+	"scripts": {
-    "ci:publish": "bun publish --production --frozen-lockfile --silent"
+		"build": "bun sass --style compressed src/style.scss dist/style.css",
-  },
+		"ci:publish": "bun run build && bun publish --production --frozen-lockfile --silent"
-  "devDependencies": {
+	},
-    "@types/bun": "latest"
+	"devDependencies": {
-  },
+		"@types/bun": "latest",
-  "peerDependencies": {
+		"sass": "^1.83.0"
-    "typescript": "^5.0.0"
+	},
-  }
+	"peerDependencies": {
+		"typescript": "^5.0.0"
+	}
 }

packages/core/src/_tokens.scss

@@ -1,12 +1,13 @@
 @use "sass:color";
+@use "sass:map";
 @use "colors";
 
 /* Using catppuccin for now, make a theme switcher later */
 @use "../themes/catppuccin/catppuccin";
 
 @function getColor($color) {
-  $ctp-theme: map-get(catppuccin.$palette, "macchiato");
+  $ctp-theme: map.get(catppuccin.$palette, "macchiato");
-  @return map-get($ctp-theme, $color);
+  @return map.get($ctp-theme, $color);
 }
 
 /*
@@ -50,7 +51,10 @@ $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-2": #{color.adjust(
+      getColor("surface0"),
+      $lightness: -2%
+    )},
   "--msp-color-bg-surface-3": #{getColor("surface1")},
 
   "--msp-color-bg-accent": #{getColor("teal")},

packages/core/src/_utils.scss

@@ -1,5 +1,6 @@
 @use "./tokens" as *;
 @use "./mixins";
+@use "sass:math";
 
 .msp-position-fixed {
   position: fixed;
@@ -214,20 +215,20 @@
 }
 @for $i from 0 through 100 {
   .msp-w-#{$i} {
-    width: percentage(calc($i / 100));
+    width: math.percentage(calc($i / 100));
   }
   .msp-h-#{$i} {
-    height: percentage(calc($i / 100));
+    height: math.percentage(calc($i / 100));
   }
 }
 
 @include mixins.responsive-steps(0, 100) using ($breakpoint, $index) {
   .msp-w-#{$breakpoint}-#{$index} {
-    width: percentage(calc($index / 100));
+    width: math.percentage(calc($index / 100));
   }
 
   .msp-h-#{$breakpoint}-#{$index} {
-    height: percentage(calc($index / 100));
+    height: math.percentage(calc($index / 100));
   }
 }
 

packages/core/src/components/form.scss

@@ -2,6 +2,7 @@
 @use "../mixins";
 @use "sass:color";
 @use "sass:string";
+@use "sass:map";
 
 fieldset:not(.msp-fieldset-border) {
   min-width: 0;
@@ -72,7 +73,7 @@ input[type="checkbox"] {
     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)}";
+    $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>');
   }
 }
@@ -106,7 +107,7 @@ input[type="radio"] {
     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)}";
+    $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");
   }
 }

packages/website/package.json

@@ -1,48 +1,45 @@
 {
-  "name": "website",
+	"name": "website",
-  "version": "0.0.0",
+	"version": "0.0.0",
-  "private": true,
+	"private": true,
-  "scripts": {
+	"scripts": {
-    "docusaurus": "docusaurus",
+		"docusaurus": "docusaurus",
-    "dev": "docusaurus start",
+		"dev": "docusaurus start",
-    "start": "docusaurus start",
+		"start": "docusaurus start",
-    "build": "docusaurus build",
+		"build": "docusaurus build",
-    "swizzle": "docusaurus swizzle",
+		"swizzle": "docusaurus swizzle",
-    "deploy": "docusaurus deploy",
+		"deploy": "docusaurus deploy",
-    "clear": "docusaurus clear",
+		"clear": "docusaurus clear",
-    "serve": "docusaurus serve",
+		"serve": "docusaurus serve",
-    "write-translations": "docusaurus write-translations",
+		"write-translations": "docusaurus write-translations",
-    "write-heading-ids": "docusaurus write-heading-ids",
+		"write-heading-ids": "docusaurus write-heading-ids",
-    "typecheck": "tsc"
+		"typecheck": "tsc",
-  },
+		"ci:publish": "docusaurus build"
-  "dependencies": {
+	},
-    "@docusaurus/core": "3.6.1",
+	"dependencies": {
-    "@docusaurus/preset-classic": "3.6.1",
+		"@docusaurus/core": "3.6.1",
-    "@mdx-js/react": "^3.0.0",
+		"@docusaurus/preset-classic": "3.6.1",
-    "clsx": "^2.0.0",
+		"@mdx-js/react": "^3.0.0",
-    "prism-react-renderer": "^2.3.0",
+		"clsx": "^2.0.0",
-    "react": "^18.0.0",
+		"prism-react-renderer": "^2.3.0",
-    "react-dom": "^18.0.0"
+		"react": "^18.0.0",
-  },
+		"react-dom": "^18.0.0"
-  "devDependencies": {
+	},
-    "@docusaurus/module-type-aliases": "3.6.1",
+	"devDependencies": {
-    "@docusaurus/tsconfig": "3.6.1",
+		"@docusaurus/module-type-aliases": "3.6.1",
-    "@docusaurus/types": "3.6.1",
+		"@docusaurus/tsconfig": "3.6.1",
-    "typescript": "~5.6.2"
+		"@docusaurus/types": "3.6.1",
-  },
+		"typescript": "~5.6.2"
-  "browserslist": {
+	},
-    "production": [
+	"browserslist": {
-      ">0.5%",
+		"production": [">0.5%", "not dead", "not op_mini all"],
-      "not dead",
+		"development": [
-      "not op_mini all"
+			"last 3 chrome version",
-    ],
+			"last 3 firefox version",
-    "development": [
+			"last 5 safari version"
-      "last 3 chrome version",
+		]
-      "last 3 firefox version",
+	},
-      "last 5 safari version"
+	"engines": {
-    ]
+		"node": ">=18.0"
-  },
+	}
-  "engines": {
-    "node": ">=18.0"
-  }
 }