Feat: cube with sugarcube (static only)

package.json

@@ -1,8 +1,11 @@
 {
+  "type": "module",
   "scripts": {
+    "generate:styles": "sugarcube generate --watch",
     "css": "npx postcss src/css/*.css --dir dist/css",
     "clean": "rm -r -f dist && mkdir dist",
-    "start": "npm run clean && cp src/index.html dist/index.html && concurrently 'npx serve dist' 'npm run css -- --watch'"
+    "start": "npm run clean && cp src/index.html dist/index.html && concurrently \"npm run generate:styles\" \"npx serve dist\" \"npm run css -- --watch\"",
+    "validate:tokens": "sugarcube validate"
   },
   "keywords": [],
   "author": "",
@@ -14,9 +17,9 @@
     "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
-    "postcss-import-ext-glob": "^2.1.1",
-    "postcss-js": "^4.0.1",
-    "slugify": "^1.6.6",
-    "tailwindcss": "^3.3.5"
+    "postcss-import-ext-glob": "^2.1.1"
+  },
+  "devDependencies": {
+    "@sugarcube-sh/cli": "^0.1.6"
   }
 }

postcss.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('postcss-import-ext-glob'), require('postcss-import')]
+};

src/css/global.css

@@ -1,15 +1,14 @@
-@import 'tailwindcss/base';
+/* Generated variable CSS from sugarcube */
+@import 'global/variables.gen.css';
 
 @import 'global/reset.css';
 @import 'global/fonts.css';
-
-@import 'tailwindcss/components';
-
 @import 'global/variables.css';
 @import 'global/global-styles.css';
 
 @import-glob 'blocks/*.css';
 @import-glob 'compositions/*.css';
 @import-glob 'utilities/*.css';
 
-@import 'tailwindcss/utilities';
+/* Generated utility classes from sugarcube (optional). */
+@import 'utilities/utilities.gen.css';

src/design-tokens/colors.json

@@ -1,18 +1,15 @@
 {
-  "title": "Colors",
-  "description": "Hex color codes that can be shared, cross-platform. They can be converted at point of usage, such as HSL for web or CMYK for print.",
-  "items": [
-    {
-      "name": "Dark",
-      "value": "#030303"
+  "color": {
+    "$type": "color",
+    "$description": "Hex color codes that can be shared, cross-platform. They can be converted at point of usage, such as HSL for web or CMYK for print.",
+    "dark": {
+      "$value": "#030303"
     },
-    {
-      "name": "Light",
-      "value": "#ffffff"
+    "light": {
+      "$value": "#ffffff"
     },
-    {
-      "name": "Primary",
-      "value": "#02394A"
+    "primary": {
+      "$value": "#02394A"
     }
-  ]
+  }
 }

src/design-tokens/fonts.json

@@ -1,11 +1,10 @@
 {
-  "title": "Fonts",
-  "description": "Each array of fonts creates a priority-based order. The first font in the array should be the ideal font, followed by sensible, web-safe fallbacks",
-  "items": [
-    {
-      "name": "Base",
-      "description": "System fonts for body copy and globally set text.",
-      "value": ["Inter", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"]
+  "font": {
+    "$type": "fontFamily",
+    "$description": "Each array of fonts creates a priority-based order. The first font in the array should be the ideal font, followed by sensible, web-safe fallbacks.",
+    "base": {
+      "$value": ["Inter", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"],
+      "$description": "System fonts for body copy and globally set text."
     }
-  ]
+  }
 }