snapshot-labs-theme 0.1.1 → 0.1.3

package/.github/workflows/publish.yml

@@ -5,6 +5,9 @@ on:
     branches:
       - main
 
+permissions:
+  contents: write
+
 jobs:
   publish:
     runs-on: ubuntu-latest
@@ -20,8 +23,19 @@ jobs:
       - name: Install dependencies
         run: npm install
 
+      - name: Configure git user
+        run: |
+          git config --local user.name "github-actions[bot]"
+          git config --local user.email "github-actions[bot]@users.noreply.github.com"
+
       - name: Bump version
-        run: npm version patch --no-git-tag-version
+        run: npm version patch
+
+      - name: Push version bump and tags
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git push --follow-tags origin main
 
       - name: Build
         run: npm run build

package/build/css/base/color.css

@@ -0,0 +1,119 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --color-neutral-50: oklch(0.96 0 0);
+  --color-neutral-100: oklch(0.92 0 0);
+  --color-neutral-200: oklch(0.89 0 0);
+  --color-neutral-300: oklch(0.8 0 0);
+  --color-neutral-400: oklch(0.67 0 0);
+  --color-neutral-500: oklch(0.57 0 0);
+  --color-neutral-600: oklch(0.54 0 0);
+  --color-neutral-700: oklch(0.44 0 0);
+  --color-neutral-800: oklch(0.39 0 0);
+  --color-neutral-900: oklch(0.36 0 0);
+  --color-neutral-950: oklch(0.28 0 0);
+  --color-neutral-1000: oklch(0.18 0 0);
+  --color-neutral-00: oklch(1 0 0);
+  --color-purple-50: oklch(0.98 0.01 313.38);
+  --color-purple-100: oklch(0.95 0.03 314.04);
+  --color-purple-200: oklch(0.92 0.04 313.35);
+  --color-purple-300: oklch(0.85 0.08 313.63);
+  --color-purple-400: oklch(0.75 0.14 314.07);
+  --color-purple-500: oklch(0.7 0.16 314.31);
+  --color-purple-600: oklch(0.59 0.21 313.97);
+  --color-purple-700: oklch(0.52 0.2 313.80);
+  --color-purple-800: oklch(0.46 0.16 315.01);
+  --color-purple-900: oklch(0.4 0.14 315.34);
+  --color-purple-950: oklch(0.25 0.09 315.66);
+  --color-purple-300-4: oklch(0.8 0 0);
+  --color-magenta-50: oklch(0.97 0.02 328.91);
+  --color-magenta-100: oklch(0.94 0.04 325.94);
+  --color-magenta-200: oklch(0.91 0.06 328.70);
+  --color-magenta-300: oklch(0.84 0.1 329.77);
+  --color-magenta-400: oklch(0.72 0.18 331.85);
+  --color-magenta-500: oklch(0.66 0.2 332.22);
+  --color-magenta-600: oklch(0.57 0.2 334.60);
+  --color-magenta-700: oklch(0.49 0.17 335.12);
+  --color-magenta-800: oklch(0.43 0.14 335.82);
+  --color-magenta-900: oklch(0.38 0.11 337.25);
+  --color-magenta-950: oklch(0.26 0.09 337.02);
+  --color-red-50: oklch(0.97 0.01 23.84);
+  --color-red-100: oklch(0.94 0.03 20.47);
+  --color-red-200: oklch(0.89 0.05 21.05);
+  --color-red-300: oklch(0.82 0.09 22.55);
+  --color-red-400: oklch(0.72 0.15 24.45);
+  --color-red-500: oklch(0.65 0.19 26.48);
+  --color-red-600: oklch(0.58 0.2 28.22);
+  --color-red-700: oklch(0.51 0.18 28.40);
+  --color-red-800: oklch(0.45 0.15 27.78);
+  --color-red-900: oklch(0.4 0.12 26.96);
+  --color-red-950: oklch(0.26 0.08 26.97);
+  --color-orange-50: oklch(0.98 0.02 73.68);
+  --color-orange-100: oklch(0.95 0.04 72.89);
+  --color-orange-200: oklch(0.9 0.07 68.16);
+  --color-orange-300: oklch(0.83 0.11 63.98);
+  --color-orange-400: oklch(0.73 0.16 52.91);
+  --color-orange-500: oklch(0.69 0.18 46.45);
+  --color-orange-600: oklch(0.63 0.19 40.37);
+  --color-orange-700: oklch(0.54 0.17 37.64);
+  --color-orange-800: oklch(0.46 0.14 36.30);
+  --color-orange-900: oklch(0.4 0.11 36.86);
+  --color-orange-950: oklch(0.3 0.07 51.64);
+  --color-yellow-50: oklch(0.99 0.02 106.77);
+  --color-yellow-100: oklch(0.97 0.06 106.57);
+  --color-yellow-200: oklch(0.94 0.12 105.23);
+  --color-yellow-300: oklch(0.89 0.17 102.86);
+  --color-yellow-400: oklch(0.85 0.17 98.73);
+  --color-yellow-500: oklch(0.79 0.16 94.59);
+  --color-yellow-600: oklch(0.67 0.13 85.33);
+  --color-yellow-700: oklch(0.55 0.11 76.48);
+  --color-yellow-800: oklch(0.48 0.09 71.32);
+  --color-yellow-900: oklch(0.42 0.08 65.89);
+  --color-yellow-950: oklch(0.29 0.05 62.21);
+  --color-green-50: oklch(0.98 0.02 162.98);
+  --color-green-100: oklch(0.95 0.05 160.63);
+  --color-green-200: oklch(0.9 0.09 161.43);
+  --color-green-300: oklch(0.84 0.13 162.18);
+  --color-green-400: oklch(0.77 0.16 159.45);
+  --color-green-500: oklch(0.69 0.16 159.04);
+  --color-green-600: oklch(0.59 0.13 159.46);
+  --color-green-700: oklch(0.51 0.11 161.83);
+  --color-green-800: oklch(0.43 0.09 162.83);
+  --color-green-900: oklch(0.38 0.08 164.78);
+  --color-green-950: oklch(0.26 0.05 168.89);
+  --color-teal-50: oklch(0.98 0.02 181.79);
+  --color-teal-100: oklch(0.95 0.04 180.81);
+  --color-teal-200: oklch(0.9 0.08 178.88);
+  --color-teal-300: oklch(0.83 0.11 180.49);
+  --color-teal-400: oklch(0.75 0.12 182.10);
+  --color-teal-500: oklch(0.67 0.11 182.97);
+  --color-teal-600: oklch(0.58 0.1 184.08);
+  --color-teal-700: oklch(0.49 0.08 185.71);
+  --color-teal-800: oklch(0.43 0.07 187.77);
+  --color-teal-900: oklch(0.37 0.05 187.84);
+  --color-teal-950: oklch(0.27 0.04 192.37);
+  --color-cyan-50: oklch(0.98 0.01 207.76);
+  --color-cyan-100: oklch(0.95 0.04 209.77);
+  --color-cyan-200: oklch(0.9 0.06 208.64);
+  --color-cyan-300: oklch(0.83 0.1 211.25);
+  --color-cyan-400: oklch(0.77 0.11 213.88);
+  --color-cyan-500: oklch(0.66 0.11 218.66);
+  --color-cyan-600: oklch(0.57 0.1 224.12);
+  --color-cyan-700: oklch(0.49 0.08 226.05);
+  --color-cyan-800: oklch(0.43 0.07 227.75);
+  --color-cyan-900: oklch(0.38 0.06 229.34);
+  --color-cyan-950: oklch(0.29 0.05 232.43);
+  --color-blue-50: oklch(0.97 0.01 267.41);
+  --color-blue-100: oklch(0.93 0.02 267.95);
+  --color-blue-200: oklch(0.87 0.05 267.41);
+  --color-blue-300: oklch(0.79 0.08 263.99);
+  --color-blue-400: oklch(0.67 0.12 265.55);
+  --color-blue-500: oklch(0.6 0.16 269.67);
+  --color-blue-600: oklch(0.51 0.19 270.43);
+  --color-blue-700: oklch(0.46 0.18 272.75);
+  --color-blue-800: oklch(0.41 0.14 274.66);
+  --color-blue-900: oklch(0.38 0.09 276.25);
+  --color-blue-950: oklch(0.29 0.05 278.06);
+}

package/build/css/base/spacing.css

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 32px;
+  --spacing-xl: 80px;
+}

package/build/css/semantic/colors.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --color-warning: var(--color-red-600);
+}

package/build.js

@@ -1,15 +1,20 @@
 import { globSync } from "glob";
 import path from "path";
+import StyleDictionary from "style-dictionary";
+import { registerOklchTransform } from "./src/registerOklchTransform.js";
 
+// Get all token files
 const tokenFiles = globSync("src/tokens/**/*.json");
 
-import StyleDictionary from "style-dictionary";
+// Register custom transform and transform group
+registerOklchTransform();
+
 // Configure Style Dictionary
 const myStyleDictionary = new StyleDictionary({
   source: tokenFiles,
   platforms: {
     css: {
-      transformGroup: "css",
+      transformGroup: "custom/css",
       buildPath: "build/css/",
       files: tokenFiles.map((file) => {
         const relativeFilePath = path
@@ -18,15 +23,20 @@ const myStyleDictionary = new StyleDictionary({
         return {
           destination: relativeFilePath.replace(".json", ".css"),
           format: "css/variables",
-          filter: (token) => token.filePath.endsWith(relativeFilePath),
+          filter: (token) =>
+            token.filePath && token.filePath.endsWith(relativeFilePath),
           options: {
-            outputReferences: file.includes("semantic"),
+            outputReferences: (() => {
+              const isSemanticTokenFile = file.includes("semantic");
+              return isSemanticTokenFile;
+            })(),
           },
         };
       }),
     },
   },
 });
+
 // Build all platforms
 myStyleDictionary.buildAllPlatforms();
 console.log("Build completed!");

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "snapshot-labs-theme",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "scripts": {
-    "build": "node build.js"
+    "build": "node build.js",
+    "release": "standard-version"
   },
   "devDependencies": {
+    "@types/chroma-js": "^3.1.1",
+    "standard-version": "^9.5.0",
     "style-dictionary": "^5.0.4"
   },
   "dependencies": {
+    "chroma-js": "^3.1.2",
     "glob": "^11.0.3"
   }
 }

package/src/registerOklchTransform.js

@@ -0,0 +1,41 @@
+import StyleDictionary from "style-dictionary";
+import chroma from "chroma-js";
+
+export function registerOklchTransform() {
+  StyleDictionary.registerTransform({
+    // Unique name for the transform
+    name: "color/hexToOklch",
+
+    // This transform modifies the token's value
+    type: "value",
+
+    // Applies only to tokens of type "color"
+    filter: (token) => token.$type === "color",
+
+    // Convert hex to oklch
+    transform: (token) => {
+      const color = chroma(token.$value);
+      const oklch = color.oklch();
+
+      const l = parseFloat(oklch[0].toFixed(2));
+      const c = parseFloat(oklch[1].toFixed(2));
+      // Handle potential NaN values for hue
+      let h;
+      // If hue is NaN or 0, set it to 0
+      if (oklch[2] === 0 || isNaN(oklch[2])) {
+        h = 0;
+      } else {
+        // Otherwise, round hue to two decimal places
+        h = parseFloat(oklch[2] || 0).toFixed(2);
+      }
+
+      // Return the color in a valid oklch() format
+      return `oklch(${l} ${c} ${h})`;
+    },
+  });
+
+  StyleDictionary.registerTransformGroup({
+    name: "custom/css",
+    transforms: ["attribute/cti", "name/kebab", "color/hexToOklch"],
+  });
+}

package/src/tokens/base/spacing.json

@@ -17,7 +17,7 @@
       "$type": "dimension"
     },
     "xl": {
-      "$value": "64px",
+      "$value": "80px",
       "$type": "dimension"
     }
   }