[WIP Tokens] Create a tokens file and transform it into css variables

src/_data/tokens.json

@@ -0,0 +1,79 @@
+{
+    "color": {
+        "neutral": {
+            "50": "#fafafa",
+            "100": "#f5f5f5",
+            "200": "#e5e5e5",
+            "300": "#d4d4d4",
+            "400": "#a3a3a3",
+            "500": "#737373",
+            "600": "#525252",
+            "700": "#404040",
+            "800": "#262626",
+            "900": "#171717",
+            "950": "#0a0a0a"
+        },
+        "asparagus": {
+            "50": "#f4f7ee",
+            "100": "#e6eed9",
+            "200": "#d0dfb7",
+            "300": "#b1c98d",
+            "400": "#95b368",
+            "500": "#77984a",
+            "DEFAULT": "#77984a",
+            "600": "#5c7838",
+            "700": "#485d2e",
+            "800": "#3b4b29",
+            "900": "#344126",
+            "950": "#1a2211"
+        },
+        "wedgewood": {
+            "50": "#f5f7fa",
+            "100": "#e9eff5",
+            "200": "#cedde9",
+            "300": "#a4bfd5",
+            "400": "#739ebd",
+            "500": "#4a7798",
+            "DEFAULT": "#4a7798",
+            "600": "#3e688b",
+            "700": "#335471",
+            "800": "#2d475f",
+            "900": "#2a3e50",
+            "950": "#1c2835"
+        },
+        "jewel": {
+            "50": "#f3faf4",
+            "100": "#e3f5e7",
+            "200": "#c8ead1",
+            "300": "#9cd9ac",
+            "400": "#69bf80",
+            "500": "#45a25e",
+            "600": "#34854a",
+            "700": "#2e6f40",
+            "DEFAULT": "#2e6f40",
+            "800": "#275434",
+            "900": "#21462c",
+            "950": "#0e2515"
+        }
+    },
+    "font": {
+        "DEFAULT": "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", sans-serif",
+        "size": "1.2rem",
+        "weight": {
+            "semibold": 700,
+            "bold": 900
+        }
+    },
+    "leading": 1.45,
+    "gutter": "clamp(1ch, 2.5vmax, 3ch)",
+    "stack": "clamp(1.25ex, 1ex + 2.5vmax, 1.75ex)",
+    "line-length": {
+        "DEFAULT": "75ch",
+        "small": "30ch",
+        "large": "115ch"
+    },
+    "border": {
+        "width": "1px",
+        "radius": "4px" 
+    }
+}

src/_includes/layouts/base.html

@@ -5,6 +5,7 @@
 
     {% css %}
       {% include "css/reset.css" %}
+      {% include "css/theme.css" %}
       {% include "css/variables.css" %}
       {% include "css/main.css" %}
 

src/css/theme.css

@@ -0,0 +1,58 @@
+:root {
+	--color-neutral-50: #fafafa;
+	--color-neutral-100: #f5f5f5;
+	--color-neutral-200: #e5e5e5;
+	--color-neutral-300: #d4d4d4;
+	--color-neutral-400: #a3a3a3;
+	--color-neutral-500: #737373;
+	--color-neutral-600: #525252;
+	--color-neutral-700: #404040;
+	--color-neutral-800: #262626;
+	--color-neutral-900: #171717;
+	--color-neutral-950: #0a0a0a;
+	--color-asparagus-50: #f4f7ee;
+	--color-asparagus-100: #e6eed9;
+	--color-asparagus-200: #d0dfb7;
+	--color-asparagus-300: #b1c98d;
+	--color-asparagus-400: #95b368;
+	--color-asparagus-500: #77984a;
+	--color-asparagus-600: #5c7838;
+	--color-asparagus-700: #485d2e;
+	--color-asparagus-800: #3b4b29;
+	--color-asparagus-900: #344126;
+	--color-asparagus-950: #1a2211;
+	--color-asparagus: #77984a;
+	--color-wedgewood-50: #f5f7fa;
+	--color-wedgewood-100: #e9eff5;
+	--color-wedgewood-200: #cedde9;
+	--color-wedgewood-300: #a4bfd5;
+	--color-wedgewood-400: #739ebd;
+	--color-wedgewood-500: #4a7798;
+	--color-wedgewood-600: #3e688b;
+	--color-wedgewood-700: #335471;
+	--color-wedgewood-800: #2d475f;
+	--color-wedgewood-900: #2a3e50;
+	--color-wedgewood-950: #1c2835;
+	--color-wedgewood: #4a7798;
+	--color-jewel-50: #f3faf4;
+	--color-jewel-100: #e3f5e7;
+	--color-jewel-200: #c8ead1;
+	--color-jewel-300: #9cd9ac;
+	--color-jewel-400: #69bf80;
+	--color-jewel-500: #45a25e;
+	--color-jewel-600: #34854a;
+	--color-jewel-700: #2e6f40;
+	--color-jewel-800: #275434;
+	--color-jewel-900: #21462c;
+	--color-jewel-950: #0e2515;
+	--color-jewel: #2e6f40;
+	--font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", sans-serif;
+	--font-size: 1.2rem;
+	--gutter: clamp(1ch, 2.5vmax, 3ch);
+	--stack: clamp(1.25ex, 1ex + 2.5vmax, 1.75ex);
+	--line-length: 75ch;
+	--line-length-small: 30ch;
+	--line-length-large: 115ch;
+	--border-width: 1px;
+	--border-radius: 4px;
+}