snapshot-labs-theme 0.1.4 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/css/base/color.css +119 -0
- package/build/css/base/spacing.css +11 -0
- package/build/css/semantic/colors.css +7 -0
- package/package.json +5 -2
- package/.github/workflows/publish.yml +0 -46
- package/build.js +0 -42
- package/src/registerOklchTransform.js +0 -41
- package/src/tokens/base/color.json +0 -476
- package/src/tokens/base/spacing.json +0 -24
- package/src/tokens/semantic/colors.json +0 -8
- package/src/tokens.json +0 -1875
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
--color-neutral-50: oklch(0.96 0 0);
|
|
7
|
+
--color-neutral-100: oklch(0.92 0 0);
|
|
8
|
+
--color-neutral-200: oklch(0.89 0 0);
|
|
9
|
+
--color-neutral-300: oklch(0.8 0 0);
|
|
10
|
+
--color-neutral-400: oklch(0.67 0 0);
|
|
11
|
+
--color-neutral-500: oklch(0.57 0 0);
|
|
12
|
+
--color-neutral-600: oklch(0.54 0 0);
|
|
13
|
+
--color-neutral-700: oklch(0.44 0 0);
|
|
14
|
+
--color-neutral-800: oklch(0.39 0 0);
|
|
15
|
+
--color-neutral-900: oklch(0.36 0 0);
|
|
16
|
+
--color-neutral-950: oklch(0.28 0 0);
|
|
17
|
+
--color-neutral-1000: oklch(0.18 0 0);
|
|
18
|
+
--color-neutral-00: oklch(1 0 0);
|
|
19
|
+
--color-purple-50: oklch(0.98 0.01 313.38);
|
|
20
|
+
--color-purple-100: oklch(0.95 0.03 314.04);
|
|
21
|
+
--color-purple-200: oklch(0.92 0.04 313.35);
|
|
22
|
+
--color-purple-300: oklch(0.85 0.08 313.63);
|
|
23
|
+
--color-purple-400: oklch(0.75 0.14 314.07);
|
|
24
|
+
--color-purple-500: oklch(0.7 0.16 314.31);
|
|
25
|
+
--color-purple-600: oklch(0.59 0.21 313.97);
|
|
26
|
+
--color-purple-700: oklch(0.52 0.2 313.80);
|
|
27
|
+
--color-purple-800: oklch(0.46 0.16 315.01);
|
|
28
|
+
--color-purple-900: oklch(0.4 0.14 315.34);
|
|
29
|
+
--color-purple-950: oklch(0.25 0.09 315.66);
|
|
30
|
+
--color-purple-300-4: oklch(0.8 0 0);
|
|
31
|
+
--color-magenta-50: oklch(0.97 0.02 328.91);
|
|
32
|
+
--color-magenta-100: oklch(0.94 0.04 325.94);
|
|
33
|
+
--color-magenta-200: oklch(0.91 0.06 328.70);
|
|
34
|
+
--color-magenta-300: oklch(0.84 0.1 329.77);
|
|
35
|
+
--color-magenta-400: oklch(0.72 0.18 331.85);
|
|
36
|
+
--color-magenta-500: oklch(0.66 0.2 332.22);
|
|
37
|
+
--color-magenta-600: oklch(0.57 0.2 334.60);
|
|
38
|
+
--color-magenta-700: oklch(0.49 0.17 335.12);
|
|
39
|
+
--color-magenta-800: oklch(0.43 0.14 335.82);
|
|
40
|
+
--color-magenta-900: oklch(0.38 0.11 337.25);
|
|
41
|
+
--color-magenta-950: oklch(0.26 0.09 337.02);
|
|
42
|
+
--color-red-50: oklch(0.97 0.01 23.84);
|
|
43
|
+
--color-red-100: oklch(0.94 0.03 20.47);
|
|
44
|
+
--color-red-200: oklch(0.89 0.05 21.05);
|
|
45
|
+
--color-red-300: oklch(0.82 0.09 22.55);
|
|
46
|
+
--color-red-400: oklch(0.72 0.15 24.45);
|
|
47
|
+
--color-red-500: oklch(0.65 0.19 26.48);
|
|
48
|
+
--color-red-600: oklch(0.58 0.2 28.22);
|
|
49
|
+
--color-red-700: oklch(0.51 0.18 28.40);
|
|
50
|
+
--color-red-800: oklch(0.45 0.15 27.78);
|
|
51
|
+
--color-red-900: oklch(0.4 0.12 26.96);
|
|
52
|
+
--color-red-950: oklch(0.26 0.08 26.97);
|
|
53
|
+
--color-orange-50: oklch(0.98 0.02 73.68);
|
|
54
|
+
--color-orange-100: oklch(0.95 0.04 72.89);
|
|
55
|
+
--color-orange-200: oklch(0.9 0.07 68.16);
|
|
56
|
+
--color-orange-300: oklch(0.83 0.11 63.98);
|
|
57
|
+
--color-orange-400: oklch(0.73 0.16 52.91);
|
|
58
|
+
--color-orange-500: oklch(0.69 0.18 46.45);
|
|
59
|
+
--color-orange-600: oklch(0.63 0.19 40.37);
|
|
60
|
+
--color-orange-700: oklch(0.54 0.17 37.64);
|
|
61
|
+
--color-orange-800: oklch(0.46 0.14 36.30);
|
|
62
|
+
--color-orange-900: oklch(0.4 0.11 36.86);
|
|
63
|
+
--color-orange-950: oklch(0.3 0.07 51.64);
|
|
64
|
+
--color-yellow-50: oklch(0.99 0.02 106.77);
|
|
65
|
+
--color-yellow-100: oklch(0.97 0.06 106.57);
|
|
66
|
+
--color-yellow-200: oklch(0.94 0.12 105.23);
|
|
67
|
+
--color-yellow-300: oklch(0.89 0.17 102.86);
|
|
68
|
+
--color-yellow-400: oklch(0.85 0.17 98.73);
|
|
69
|
+
--color-yellow-500: oklch(0.79 0.16 94.59);
|
|
70
|
+
--color-yellow-600: oklch(0.67 0.13 85.33);
|
|
71
|
+
--color-yellow-700: oklch(0.55 0.11 76.48);
|
|
72
|
+
--color-yellow-800: oklch(0.48 0.09 71.32);
|
|
73
|
+
--color-yellow-900: oklch(0.42 0.08 65.89);
|
|
74
|
+
--color-yellow-950: oklch(0.29 0.05 62.21);
|
|
75
|
+
--color-green-50: oklch(0.98 0.02 162.98);
|
|
76
|
+
--color-green-100: oklch(0.95 0.05 160.63);
|
|
77
|
+
--color-green-200: oklch(0.9 0.09 161.43);
|
|
78
|
+
--color-green-300: oklch(0.84 0.13 162.18);
|
|
79
|
+
--color-green-400: oklch(0.77 0.16 159.45);
|
|
80
|
+
--color-green-500: oklch(0.69 0.16 159.04);
|
|
81
|
+
--color-green-600: oklch(0.59 0.13 159.46);
|
|
82
|
+
--color-green-700: oklch(0.51 0.11 161.83);
|
|
83
|
+
--color-green-800: oklch(0.43 0.09 162.83);
|
|
84
|
+
--color-green-900: oklch(0.38 0.08 164.78);
|
|
85
|
+
--color-green-950: oklch(0.26 0.05 168.89);
|
|
86
|
+
--color-teal-50: oklch(0.98 0.02 181.79);
|
|
87
|
+
--color-teal-100: oklch(0.95 0.04 180.81);
|
|
88
|
+
--color-teal-200: oklch(0.9 0.08 178.88);
|
|
89
|
+
--color-teal-300: oklch(0.83 0.11 180.49);
|
|
90
|
+
--color-teal-400: oklch(0.75 0.12 182.10);
|
|
91
|
+
--color-teal-500: oklch(0.67 0.11 182.97);
|
|
92
|
+
--color-teal-600: oklch(0.58 0.1 184.08);
|
|
93
|
+
--color-teal-700: oklch(0.49 0.08 185.71);
|
|
94
|
+
--color-teal-800: oklch(0.43 0.07 187.77);
|
|
95
|
+
--color-teal-900: oklch(0.37 0.05 187.84);
|
|
96
|
+
--color-teal-950: oklch(0.27 0.04 192.37);
|
|
97
|
+
--color-cyan-50: oklch(0.98 0.01 207.76);
|
|
98
|
+
--color-cyan-100: oklch(0.95 0.04 209.77);
|
|
99
|
+
--color-cyan-200: oklch(0.9 0.06 208.64);
|
|
100
|
+
--color-cyan-300: oklch(0.83 0.1 211.25);
|
|
101
|
+
--color-cyan-400: oklch(0.77 0.11 213.88);
|
|
102
|
+
--color-cyan-500: oklch(0.66 0.11 218.66);
|
|
103
|
+
--color-cyan-600: oklch(0.57 0.1 224.12);
|
|
104
|
+
--color-cyan-700: oklch(0.49 0.08 226.05);
|
|
105
|
+
--color-cyan-800: oklch(0.43 0.07 227.75);
|
|
106
|
+
--color-cyan-900: oklch(0.38 0.06 229.34);
|
|
107
|
+
--color-cyan-950: oklch(0.29 0.05 232.43);
|
|
108
|
+
--color-blue-50: oklch(0.97 0.01 267.41);
|
|
109
|
+
--color-blue-100: oklch(0.93 0.02 267.95);
|
|
110
|
+
--color-blue-200: oklch(0.87 0.05 267.41);
|
|
111
|
+
--color-blue-300: oklch(0.79 0.08 263.99);
|
|
112
|
+
--color-blue-400: oklch(0.67 0.12 265.55);
|
|
113
|
+
--color-blue-500: oklch(0.6 0.16 269.67);
|
|
114
|
+
--color-blue-600: oklch(0.51 0.19 270.43);
|
|
115
|
+
--color-blue-700: oklch(0.46 0.18 272.75);
|
|
116
|
+
--color-blue-800: oklch(0.41 0.14 274.66);
|
|
117
|
+
--color-blue-900: oklch(0.38 0.09 276.25);
|
|
118
|
+
--color-blue-950: oklch(0.29 0.05 278.06);
|
|
119
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "snapshot-labs-theme",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "node build.js",
|
|
@@ -14,5 +14,8 @@
|
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"chroma-js": "^3.1.2",
|
|
16
16
|
"glob": "^11.0.3"
|
|
17
|
-
}
|
|
17
|
+
},
|
|
18
|
+
"files": [
|
|
19
|
+
"build/css"
|
|
20
|
+
]
|
|
18
21
|
}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
name: Publish to NPM
|
|
2
|
-
|
|
3
|
-
on:
|
|
4
|
-
push:
|
|
5
|
-
branches:
|
|
6
|
-
- main
|
|
7
|
-
|
|
8
|
-
permissions:
|
|
9
|
-
contents: write
|
|
10
|
-
|
|
11
|
-
jobs:
|
|
12
|
-
publish:
|
|
13
|
-
runs-on: ubuntu-latest
|
|
14
|
-
steps:
|
|
15
|
-
- uses: actions/checkout@v4
|
|
16
|
-
|
|
17
|
-
- name: Set up Node.js
|
|
18
|
-
uses: actions/setup-node@v4
|
|
19
|
-
with:
|
|
20
|
-
node-version: "20"
|
|
21
|
-
registry-url: "https://registry.npmjs.org/"
|
|
22
|
-
|
|
23
|
-
- name: Install dependencies
|
|
24
|
-
run: npm install
|
|
25
|
-
|
|
26
|
-
- name: Configure git user
|
|
27
|
-
run: |
|
|
28
|
-
git config --local user.name "github-actions[bot]"
|
|
29
|
-
git config --local user.email "github-actions[bot]@users.noreply.github.com"
|
|
30
|
-
|
|
31
|
-
- name: Bump version
|
|
32
|
-
run: npm version patch
|
|
33
|
-
|
|
34
|
-
- name: Push version bump and tags
|
|
35
|
-
run: |
|
|
36
|
-
git config user.name "github-actions[bot]"
|
|
37
|
-
git config user.email "github-actions[bot]@users.noreply.github.com"
|
|
38
|
-
git push --follow-tags origin main
|
|
39
|
-
|
|
40
|
-
- name: Build
|
|
41
|
-
run: npm run build
|
|
42
|
-
|
|
43
|
-
- name: Publish to NPM
|
|
44
|
-
run: npm publish --access public
|
|
45
|
-
env:
|
|
46
|
-
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
package/build.js
DELETED
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { globSync } from "glob";
|
|
2
|
-
import path from "path";
|
|
3
|
-
import StyleDictionary from "style-dictionary";
|
|
4
|
-
import { registerOklchTransform } from "./src/registerOklchTransform.js";
|
|
5
|
-
|
|
6
|
-
// Get all token files
|
|
7
|
-
const tokenFiles = globSync("src/tokens/**/*.json");
|
|
8
|
-
|
|
9
|
-
// Register custom transform and transform group
|
|
10
|
-
registerOklchTransform();
|
|
11
|
-
|
|
12
|
-
// Configure Style Dictionary
|
|
13
|
-
const myStyleDictionary = new StyleDictionary({
|
|
14
|
-
source: tokenFiles,
|
|
15
|
-
platforms: {
|
|
16
|
-
css: {
|
|
17
|
-
transformGroup: "custom/css",
|
|
18
|
-
buildPath: "build/css/",
|
|
19
|
-
files: tokenFiles.map((file) => {
|
|
20
|
-
const relativeFilePath = path
|
|
21
|
-
.relative("src/tokens", file)
|
|
22
|
-
.replace(/\\/g, "/");
|
|
23
|
-
return {
|
|
24
|
-
destination: relativeFilePath.replace(".json", ".css"),
|
|
25
|
-
format: "css/variables",
|
|
26
|
-
filter: (token) =>
|
|
27
|
-
token.filePath && token.filePath.endsWith(relativeFilePath),
|
|
28
|
-
options: {
|
|
29
|
-
outputReferences: (() => {
|
|
30
|
-
const isSemanticTokenFile = file.includes("semantic");
|
|
31
|
-
return isSemanticTokenFile;
|
|
32
|
-
})(),
|
|
33
|
-
},
|
|
34
|
-
};
|
|
35
|
-
}),
|
|
36
|
-
},
|
|
37
|
-
},
|
|
38
|
-
});
|
|
39
|
-
|
|
40
|
-
// Build all platforms
|
|
41
|
-
myStyleDictionary.buildAllPlatforms();
|
|
42
|
-
console.log("Build completed!");
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import StyleDictionary from "style-dictionary";
|
|
2
|
-
import chroma from "chroma-js";
|
|
3
|
-
|
|
4
|
-
export function registerOklchTransform() {
|
|
5
|
-
StyleDictionary.registerTransform({
|
|
6
|
-
// Unique name for the transform
|
|
7
|
-
name: "color/hexToOklch",
|
|
8
|
-
|
|
9
|
-
// This transform modifies the token's value
|
|
10
|
-
type: "value",
|
|
11
|
-
|
|
12
|
-
// Applies only to tokens of type "color"
|
|
13
|
-
filter: (token) => token.$type === "color",
|
|
14
|
-
|
|
15
|
-
// Convert hex to oklch
|
|
16
|
-
transform: (token) => {
|
|
17
|
-
const color = chroma(token.$value);
|
|
18
|
-
const oklch = color.oklch();
|
|
19
|
-
|
|
20
|
-
const l = parseFloat(oklch[0].toFixed(2));
|
|
21
|
-
const c = parseFloat(oklch[1].toFixed(2));
|
|
22
|
-
// Handle potential NaN values for hue
|
|
23
|
-
let h;
|
|
24
|
-
// If hue is NaN or 0, set it to 0
|
|
25
|
-
if (oklch[2] === 0 || isNaN(oklch[2])) {
|
|
26
|
-
h = 0;
|
|
27
|
-
} else {
|
|
28
|
-
// Otherwise, round hue to two decimal places
|
|
29
|
-
h = parseFloat(oklch[2] || 0).toFixed(2);
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
// Return the color in a valid oklch() format
|
|
33
|
-
return `oklch(${l} ${c} ${h})`;
|
|
34
|
-
},
|
|
35
|
-
});
|
|
36
|
-
|
|
37
|
-
StyleDictionary.registerTransformGroup({
|
|
38
|
-
name: "custom/css",
|
|
39
|
-
transforms: ["attribute/cti", "name/kebab", "color/hexToOklch"],
|
|
40
|
-
});
|
|
41
|
-
}
|