Import progress from external project

#1

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