snapshot-labs-theme 0.1.2 → 0.1.3
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/.github/workflows/publish.yml +15 -1
- package/build/css/base/color.css +113 -113
- package/build/css/base/spacing.css +1 -1
- package/build.js +14 -4
- package/package.json +6 -2
- package/src/registerOklchTransform.js +41 -0
- package/src/tokens/base/spacing.json +1 -1
|
@@ -5,6 +5,9 @@ on:
|
|
|
5
5
|
branches:
|
|
6
6
|
- main
|
|
7
7
|
|
|
8
|
+
permissions:
|
|
9
|
+
contents: write
|
|
10
|
+
|
|
8
11
|
jobs:
|
|
9
12
|
publish:
|
|
10
13
|
runs-on: ubuntu-latest
|
|
@@ -20,8 +23,19 @@ jobs:
|
|
|
20
23
|
- name: Install dependencies
|
|
21
24
|
run: npm install
|
|
22
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
|
+
|
|
23
31
|
- name: Bump version
|
|
24
|
-
run: npm version patch
|
|
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
|
|
25
39
|
|
|
26
40
|
- name: Build
|
|
27
41
|
run: npm run build
|
package/build/css/base/color.css
CHANGED
|
@@ -3,117 +3,117 @@
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
:root {
|
|
6
|
-
--color-neutral-50:
|
|
7
|
-
--color-neutral-100:
|
|
8
|
-
--color-neutral-200:
|
|
9
|
-
--color-neutral-300:
|
|
10
|
-
--color-neutral-400:
|
|
11
|
-
--color-neutral-500:
|
|
12
|
-
--color-neutral-600:
|
|
13
|
-
--color-neutral-700:
|
|
14
|
-
--color-neutral-800:
|
|
15
|
-
--color-neutral-900:
|
|
16
|
-
--color-neutral-950:
|
|
17
|
-
--color-neutral-1000:
|
|
18
|
-
--color-neutral-00:
|
|
19
|
-
--color-purple-50:
|
|
20
|
-
--color-purple-100:
|
|
21
|
-
--color-purple-200:
|
|
22
|
-
--color-purple-300:
|
|
23
|
-
--color-purple-400:
|
|
24
|
-
--color-purple-500:
|
|
25
|
-
--color-purple-600:
|
|
26
|
-
--color-purple-700:
|
|
27
|
-
--color-purple-800:
|
|
28
|
-
--color-purple-900:
|
|
29
|
-
--color-purple-950:
|
|
30
|
-
--color-purple-300-4:
|
|
31
|
-
--color-magenta-50:
|
|
32
|
-
--color-magenta-100:
|
|
33
|
-
--color-magenta-200:
|
|
34
|
-
--color-magenta-300:
|
|
35
|
-
--color-magenta-400:
|
|
36
|
-
--color-magenta-500:
|
|
37
|
-
--color-magenta-600:
|
|
38
|
-
--color-magenta-700:
|
|
39
|
-
--color-magenta-800:
|
|
40
|
-
--color-magenta-900:
|
|
41
|
-
--color-magenta-950:
|
|
42
|
-
--color-red-50:
|
|
43
|
-
--color-red-100:
|
|
44
|
-
--color-red-200:
|
|
45
|
-
--color-red-300:
|
|
46
|
-
--color-red-400:
|
|
47
|
-
--color-red-500:
|
|
48
|
-
--color-red-600:
|
|
49
|
-
--color-red-700:
|
|
50
|
-
--color-red-800:
|
|
51
|
-
--color-red-900:
|
|
52
|
-
--color-red-950:
|
|
53
|
-
--color-orange-50:
|
|
54
|
-
--color-orange-100:
|
|
55
|
-
--color-orange-200:
|
|
56
|
-
--color-orange-300:
|
|
57
|
-
--color-orange-400:
|
|
58
|
-
--color-orange-500:
|
|
59
|
-
--color-orange-600:
|
|
60
|
-
--color-orange-700:
|
|
61
|
-
--color-orange-800:
|
|
62
|
-
--color-orange-900:
|
|
63
|
-
--color-orange-950:
|
|
64
|
-
--color-yellow-50:
|
|
65
|
-
--color-yellow-100:
|
|
66
|
-
--color-yellow-200:
|
|
67
|
-
--color-yellow-300:
|
|
68
|
-
--color-yellow-400:
|
|
69
|
-
--color-yellow-500:
|
|
70
|
-
--color-yellow-600:
|
|
71
|
-
--color-yellow-700:
|
|
72
|
-
--color-yellow-800:
|
|
73
|
-
--color-yellow-900:
|
|
74
|
-
--color-yellow-950:
|
|
75
|
-
--color-green-50:
|
|
76
|
-
--color-green-100:
|
|
77
|
-
--color-green-200:
|
|
78
|
-
--color-green-300:
|
|
79
|
-
--color-green-400:
|
|
80
|
-
--color-green-500:
|
|
81
|
-
--color-green-600:
|
|
82
|
-
--color-green-700:
|
|
83
|
-
--color-green-800:
|
|
84
|
-
--color-green-900:
|
|
85
|
-
--color-green-950:
|
|
86
|
-
--color-teal-50:
|
|
87
|
-
--color-teal-100:
|
|
88
|
-
--color-teal-200:
|
|
89
|
-
--color-teal-300:
|
|
90
|
-
--color-teal-400:
|
|
91
|
-
--color-teal-500:
|
|
92
|
-
--color-teal-600:
|
|
93
|
-
--color-teal-700:
|
|
94
|
-
--color-teal-800:
|
|
95
|
-
--color-teal-900:
|
|
96
|
-
--color-teal-950:
|
|
97
|
-
--color-cyan-50:
|
|
98
|
-
--color-cyan-100:
|
|
99
|
-
--color-cyan-200:
|
|
100
|
-
--color-cyan-300:
|
|
101
|
-
--color-cyan-400:
|
|
102
|
-
--color-cyan-500:
|
|
103
|
-
--color-cyan-600:
|
|
104
|
-
--color-cyan-700:
|
|
105
|
-
--color-cyan-800:
|
|
106
|
-
--color-cyan-900:
|
|
107
|
-
--color-cyan-950:
|
|
108
|
-
--color-blue-50:
|
|
109
|
-
--color-blue-100:
|
|
110
|
-
--color-blue-200:
|
|
111
|
-
--color-blue-300:
|
|
112
|
-
--color-blue-400:
|
|
113
|
-
--color-blue-500:
|
|
114
|
-
--color-blue-600:
|
|
115
|
-
--color-blue-700:
|
|
116
|
-
--color-blue-800:
|
|
117
|
-
--color-blue-900:
|
|
118
|
-
--color-blue-950:
|
|
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
119
|
}
|
package/build.js
CHANGED
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
import { globSync } from "glob";
|
|
2
2
|
import path from "path";
|
|
3
|
+
import StyleDictionary from "style-dictionary";
|
|
4
|
+
import { registerOklchTransform } from "./src/registerOklchTransform.js";
|
|
3
5
|
|
|
6
|
+
// Get all token files
|
|
4
7
|
const tokenFiles = globSync("src/tokens/**/*.json");
|
|
5
8
|
|
|
6
|
-
|
|
9
|
+
// Register custom transform and transform group
|
|
10
|
+
registerOklchTransform();
|
|
11
|
+
|
|
7
12
|
// Configure Style Dictionary
|
|
8
13
|
const myStyleDictionary = new StyleDictionary({
|
|
9
14
|
source: tokenFiles,
|
|
10
15
|
platforms: {
|
|
11
16
|
css: {
|
|
12
|
-
transformGroup: "css",
|
|
17
|
+
transformGroup: "custom/css",
|
|
13
18
|
buildPath: "build/css/",
|
|
14
19
|
files: tokenFiles.map((file) => {
|
|
15
20
|
const relativeFilePath = path
|
|
@@ -18,15 +23,20 @@ const myStyleDictionary = new StyleDictionary({
|
|
|
18
23
|
return {
|
|
19
24
|
destination: relativeFilePath.replace(".json", ".css"),
|
|
20
25
|
format: "css/variables",
|
|
21
|
-
filter: (token) =>
|
|
26
|
+
filter: (token) =>
|
|
27
|
+
token.filePath && token.filePath.endsWith(relativeFilePath),
|
|
22
28
|
options: {
|
|
23
|
-
outputReferences:
|
|
29
|
+
outputReferences: (() => {
|
|
30
|
+
const isSemanticTokenFile = file.includes("semantic");
|
|
31
|
+
return isSemanticTokenFile;
|
|
32
|
+
})(),
|
|
24
33
|
},
|
|
25
34
|
};
|
|
26
35
|
}),
|
|
27
36
|
},
|
|
28
37
|
},
|
|
29
38
|
});
|
|
39
|
+
|
|
30
40
|
// Build all platforms
|
|
31
41
|
myStyleDictionary.buildAllPlatforms();
|
|
32
42
|
console.log("Build completed!");
|
package/package.json
CHANGED
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "snapshot-labs-theme",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"scripts": {
|
|
6
|
-
"build": "node build.js"
|
|
6
|
+
"build": "node build.js",
|
|
7
|
+
"release": "standard-version"
|
|
7
8
|
},
|
|
8
9
|
"devDependencies": {
|
|
10
|
+
"@types/chroma-js": "^3.1.1",
|
|
11
|
+
"standard-version": "^9.5.0",
|
|
9
12
|
"style-dictionary": "^5.0.4"
|
|
10
13
|
},
|
|
11
14
|
"dependencies": {
|
|
15
|
+
"chroma-js": "^3.1.2",
|
|
12
16
|
"glob": "^11.0.3"
|
|
13
17
|
}
|
|
14
18
|
}
|
|
@@ -0,0 +1,41 @@
|
|
|
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
|
+
}
|