snapshot-labs-theme 0.1.4 → 0.1.6

package/build/css/base/colors.css

@@ -0,0 +1,118 @@
+/**
+ * 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-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/dimensions.css

@@ -0,0 +1,76 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --space-0: 0rem;
+  --space-100: 0.25rem;
+  --space-150: 0.38rem;
+  --space-200: 0.50rem;
+  --space-300: 0.75rem;
+  --space-400: 1.00rem;
+  --space-500: 1.25rem;
+  --space-600: 1.50rem;
+  --space-800: 2.00rem;
+  --space-1000: 2.50rem;
+  --space-1200: 3.00rem;
+  --space-1600: 4.00rem;
+  --space-2000: 5.00rem;
+  --space-2400: 6.00rem;
+  --space-2800: 7.00rem;
+  --space-3200: 8.00rem;
+  --space-025: 0.06rem;
+  --space-050: 0.13rem;
+  --space-negative-25: -0.06rem;
+  --space-negative-50: -0.13rem;
+  --space-negative-100: -0.25rem;
+  --space-negative-150: -0.38rem;
+  --space-negative-200: -0.50rem;
+  --space-negative-300: -0.75rem;
+  --space-negative-400: -1.00rem;
+  --space-negative-500: -1.25rem;
+  --space-negative-600: -1.50rem;
+  --space-negative-800: -2.00rem;
+  --space-negative-1000: -2.50rem;
+  --space-negative-1200: -3.00rem;
+  --space-negative-1600: -4.00rem;
+  --space-negative-2000: -5.00rem;
+  --space-negative-2400: -6.00rem;
+  --space-negative-2800: -7.00rem;
+  --space-negative-3200: -1.25rem;
+  --size-0: 0rem;
+  --size-100: 0.25rem;
+  --size-150: 0.38rem;
+  --size-200: 0.50rem;
+  --size-300: 0.75rem;
+  --size-400: 1.00rem;
+  --size-500: 1.25rem;
+  --size-600: 1.50rem;
+  --size-700: 1.75rem;
+  --size-800: 2.00rem;
+  --size-900: 2.25rem;
+  --size-1000: 2.50rem;
+  --size-1200: 3.00rem;
+  --size-1400: 3.50rem;
+  --size-1600: 4.00rem;
+  --size-2000: 5.00rem;
+  --size-2400: 6.00rem;
+  --size-2800: 7.00rem;
+  --size-3200: 8.00rem;
+  --size-025: 0.06rem;
+  --size-050: 0.13rem;
+  --depth-0: 0px;
+  --depth-100: 4px;
+  --depth-200: 8px;
+  --depth-400: 16px;
+  --depth-800: 32px;
+  --depth-1200: 48px;
+  --depth-025: 1px;
+  --depth-negative-025: -1px;
+  --depth-negative-100: -4px;
+  --depth-negative-200: -8px;
+  --depth-negative-400: -16px;
+  --depth-negative-800: -32px;
+  --depth-negative-1200: -48px;
+  --blur-default: 4px;
+}

package/build/css/base/typography.css

@@ -0,0 +1,57 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --font-family-heading: 'EB Garamond';
+  --font-family-default: Gotham;
+  --font-size-275: 0.69rem;
+  --font-size-300: 0.75rem;
+  --font-size-325: 0.81rem;
+  --font-size-350: 0.88rem;
+  --font-size-400: 1.00rem;
+  --font-size-450: 1.13rem;
+  --font-size-500: 1.25rem;
+  --font-size-550: 1.38rem;
+  --font-size-600: 1.50rem;
+  --font-size-750: 1.88rem;
+  --font-size-800: 2.00rem;
+  --font-size-900: 2.25rem;
+  --font-size-1000: 2.50rem;
+  --font-size-1200: 3.00rem;
+  --font-size-1400: 3.50rem;
+  --font-size-1600: 4.00rem;
+  --font-size-2000: 5.00rem;
+  --font-size-2400: 6.00rem;
+  --font-size-2800: 7.00rem;
+  --font-size-3200: 8.00rem;
+  --font-line-height-300: 0.75rem;
+  --font-line-height-400: 1.00rem;
+  --font-line-height-500: 1.25rem;
+  --font-line-height-600: 1.50rem;
+  --font-line-height-700: 1.75rem;
+  --font-line-height-800: 2.00rem;
+  --font-line-height-1000: 2.50rem;
+  --font-line-height-1200: 3.00rem;
+  --font-line-height-1600: 4.00rem;
+  --font-line-height-2000: 5.00rem;
+  --font-line-height-2400: 6.00rem;
+  --font-line-height-2800: 7.00rem;
+  --font-line-height-3200: 8.00rem;
+  --font-letter-spacing-densest: -0.022em;
+  --font-letter-spacing-denser: -0.013em;
+  --font-letter-spacing-dense: -0.006em;
+  --font-letter-spacing-default: 0em;
+  --font-letter-spacing-loose: 0.006em;
+  --font-letter-spacing-relaxed: 0.013em;
+  --font-letter-spacing-wide: 0.022em;
+  --font-weight-thin: 100;
+  --font-weight-extra-light: 200;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semi-bold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extra-bold: 800;
+  --font-weight-black: 900;
+}

package/build/css/semantic/colors.css

@@ -0,0 +1,23 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --color-color: #ffffff;
+  --color-text-contrast: var(--color-neutral-900);
+  --color-text-default: var(--color-neutral-700);
+  --color-text-subtle: var(--color-neutral-500);
+  --color-text-accent: var(--color-blue-700);
+  --color-feedback-negative-text: var(--color-red-700);
+  --color-feedback-negative-icon: var(--color-red-500);
+  --color-feedback-negative-bg: var(--color-red-100);
+  --color-feedback-warning-text: var(--color-yellow-700);
+  --color-feedback-warning-icon: var(--color-yellow-500);
+  --color-feedback-warning-bg: var(--color-yellow-100);
+  --color-feedback-positive-text: var(--color-green-700);
+  --color-feedback-positive-icon: var(--color-green-500);
+  --color-feedback-positive-bg: var(--color-green-100);
+  --color-feedback-informative-text: var(--color-blue-800);
+  --color-feedback-informative-icon: var(--color-blue-600);
+  --color-feedback-informative-bg: var(--color-blue-100);
+}

package/build/css/semantic/colors.dark.css

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly
+ * Generated on Sat, 13 Sep 2025 10:12:16 GMT
+ */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+  --color-text-contrast: var(--color-neutral-00);
+  --color-text-default: var(--color-neutral-100);
+  --color-text-subtle: var(--color-neutral-300);
+  --color-text-accent: var(--color-blue-500);
+  --color-feedback-negative-text: var(--color-red-500);
+  --color-feedback-negative-icon: var(--color-red-400);
+  --color-feedback-negative-bg: var(--color-red-100);
+  --color-feedback-warning-text: var(--color-yellow-500);
+  --color-feedback-warning-icon: var(--color-yellow-300);
+  --color-feedback-warning-bg: var(--color-yellow-100);
+  --color-feedback-positive-text: var(--color-green-500);
+  --color-feedback-positive-icon: var(--color-green-400);
+  --color-feedback-positive-bg: var(--color-green-100);
+  --color-feedback-informative-text: var(--color-blue-600);
+  --color-feedback-informative-icon: var(--color-blue-500);
+  --color-feedback-informative-bg: var(--color-blue-100);
+  --color-color: var(--#ffffff);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "snapshot-labs-theme",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "scripts": {
     "build": "node build.js",
@@ -14,5 +14,8 @@
   "dependencies": {
     "chroma-js": "^3.1.2",
     "glob": "^11.0.3"
-  }
+  },
+  "files": [
+    "build/css"
+  ]
 }

package/.github/workflows/publish.yml

@@ -1,46 +0,0 @@
-name: Publish to NPM
-
-on:
-  push:
-    branches:
-      - main
-
-permissions:
-  contents: write
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "20"
-          registry-url: "https://registry.npmjs.org/"
-
-      - 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
-
-      - 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
-
-      - name: Publish to NPM
-        run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/build.js

@@ -1,42 +0,0 @@
-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");
-
-// Register custom transform and transform group
-registerOklchTransform();
-
-// Configure Style Dictionary
-const myStyleDictionary = new StyleDictionary({
-  source: tokenFiles,
-  platforms: {
-    css: {
-      transformGroup: "custom/css",
-      buildPath: "build/css/",
-      files: tokenFiles.map((file) => {
-        const relativeFilePath = path
-          .relative("src/tokens", file)
-          .replace(/\\/g, "/");
-        return {
-          destination: relativeFilePath.replace(".json", ".css"),
-          format: "css/variables",
-          filter: (token) =>
-            token.filePath && token.filePath.endsWith(relativeFilePath),
-          options: {
-            outputReferences: (() => {
-              const isSemanticTokenFile = file.includes("semantic");
-              return isSemanticTokenFile;
-            })(),
-          },
-        };
-      }),
-    },
-  },
-});
-
-// Build all platforms
-myStyleDictionary.buildAllPlatforms();
-console.log("Build completed!");

package/src/registerOklchTransform.js

@@ -1,41 +0,0 @@
-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"],
-  });
-}