material-theme-builder 3.2.0 → 3.3.0

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.
Files changed (13) hide show
  1. package/README.md +284 -236
  2. package/dist/cli.js +520 -105
  3. package/dist/index.d.ts +30 -1
  4. package/dist/index.js +120 -67
  5. package/dist/react.d.ts +69 -49
  6. package/dist/react.js +120 -67
  7. package/dist/registry-item.json +75 -0
  8. package/dist/shadcn.css +43 -0
  9. package/dist/tailwind-plugin.d.ts +73 -0
  10. package/dist/tailwind-plugin.js +135 -0
  11. package/dist/tailwind.css +47 -81
  12. package/package.json +31 -10
  13. package/src/tailwind.css +0 -179
package/dist/tailwind.css CHANGED
@@ -1,61 +1,73 @@
1
+ /*
2
+ * Generated by `scripts/generate.mjs` -- do not edit.
3
+ *
4
+ * Custom colors are not in here: they depend on your config, so they come from
5
+ * the plugin instead.
6
+ *
7
+ * @plugin "material-theme-builder/tailwind" {
8
+ * custom-colors: myCustomColor1, myCustomColor2;
9
+ * }
10
+ */
1
11
  @theme inline {
2
12
  --color-background: var(--md-sys-color-background);
3
- --color-on-background: var(--md-sys-color-on-background);
4
- --color-surface: var(--md-sys-color-surface);
5
- --color-surface-dim: var(--md-sys-color-surface-dim);
6
- --color-surface-bright: var(--md-sys-color-surface-bright);
7
- --color-surface-container-lowest: var(
8
- --md-sys-color-surface-container-lowest
9
- );
10
- --color-surface-container-low: var(--md-sys-color-surface-container-low);
11
- --color-surface-container: var(--md-sys-color-surface-container);
12
- --color-surface-container-high: var(--md-sys-color-surface-container-high);
13
- --color-surface-container-highest: var(
14
- --md-sys-color-surface-container-highest
15
- );
16
- --color-on-surface: var(--md-sys-color-on-surface);
17
- --color-on-surface-variant: var(--md-sys-color-on-surface-variant);
18
- --color-outline: var(--md-sys-color-outline);
19
- --color-outline-variant: var(--md-sys-color-outline-variant);
20
- --color-inverse-surface: var(--md-sys-color-inverse-surface);
13
+ --color-error: var(--md-sys-color-error);
14
+ --color-error-container: var(--md-sys-color-error-container);
21
15
  --color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
22
- --color-primary: var(--md-sys-color-primary);
16
+ --color-inverse-primary: var(--md-sys-color-inverse-primary);
17
+ --color-inverse-surface: var(--md-sys-color-inverse-surface);
18
+ --color-on-background: var(--md-sys-color-on-background);
19
+ --color-on-error: var(--md-sys-color-on-error);
20
+ --color-on-error-container: var(--md-sys-color-on-error-container);
23
21
  --color-on-primary: var(--md-sys-color-on-primary);
24
- --color-primary-container: var(--md-sys-color-primary-container);
25
22
  --color-on-primary-container: var(--md-sys-color-on-primary-container);
26
- --color-primary-fixed: var(--md-sys-color-primary-fixed);
27
- --color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
28
23
  --color-on-primary-fixed: var(--md-sys-color-on-primary-fixed);
29
24
  --color-on-primary-fixed-variant: var(
30
25
  --md-sys-color-on-primary-fixed-variant
31
26
  );
32
- --color-inverse-primary: var(--md-sys-color-inverse-primary);
33
- --color-secondary: var(--md-sys-color-secondary);
34
27
  --color-on-secondary: var(--md-sys-color-on-secondary);
35
- --color-secondary-container: var(--md-sys-color-secondary-container);
36
28
  --color-on-secondary-container: var(--md-sys-color-on-secondary-container);
37
- --color-secondary-fixed: var(--md-sys-color-secondary-fixed);
38
- --color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim);
39
29
  --color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed);
40
30
  --color-on-secondary-fixed-variant: var(
41
31
  --md-sys-color-on-secondary-fixed-variant
42
32
  );
43
- --color-tertiary: var(--md-sys-color-tertiary);
33
+ --color-on-surface: var(--md-sys-color-on-surface);
34
+ --color-on-surface-variant: var(--md-sys-color-on-surface-variant);
44
35
  --color-on-tertiary: var(--md-sys-color-on-tertiary);
45
- --color-tertiary-container: var(--md-sys-color-tertiary-container);
46
36
  --color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
47
- --color-tertiary-fixed: var(--md-sys-color-tertiary-fixed);
48
- --color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim);
49
37
  --color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed);
50
38
  --color-on-tertiary-fixed-variant: var(
51
39
  --md-sys-color-on-tertiary-fixed-variant
52
40
  );
53
- --color-error: var(--md-sys-color-error);
54
- --color-on-error: var(--md-sys-color-on-error);
55
- --color-error-container: var(--md-sys-color-error-container);
56
- --color-on-error-container: var(--md-sys-color-on-error-container);
41
+ --color-outline: var(--md-sys-color-outline);
42
+ --color-outline-variant: var(--md-sys-color-outline-variant);
43
+ --color-primary: var(--md-sys-color-primary);
44
+ --color-primary-container: var(--md-sys-color-primary-container);
45
+ --color-primary-fixed: var(--md-sys-color-primary-fixed);
46
+ --color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
57
47
  --color-scrim: var(--md-sys-color-scrim);
48
+ --color-secondary: var(--md-sys-color-secondary);
49
+ --color-secondary-container: var(--md-sys-color-secondary-container);
50
+ --color-secondary-fixed: var(--md-sys-color-secondary-fixed);
51
+ --color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim);
58
52
  --color-shadow: var(--md-sys-color-shadow);
53
+ --color-surface: var(--md-sys-color-surface);
54
+ --color-surface-bright: var(--md-sys-color-surface-bright);
55
+ --color-surface-container: var(--md-sys-color-surface-container);
56
+ --color-surface-container-high: var(--md-sys-color-surface-container-high);
57
+ --color-surface-container-highest: var(
58
+ --md-sys-color-surface-container-highest
59
+ );
60
+ --color-surface-container-low: var(--md-sys-color-surface-container-low);
61
+ --color-surface-container-lowest: var(
62
+ --md-sys-color-surface-container-lowest
63
+ );
64
+ --color-surface-dim: var(--md-sys-color-surface-dim);
65
+ --color-surface-tint: var(--md-sys-color-surface-tint);
66
+ --color-surface-variant: var(--md-sys-color-surface-variant);
67
+ --color-tertiary: var(--md-sys-color-tertiary);
68
+ --color-tertiary-container: var(--md-sys-color-tertiary-container);
69
+ --color-tertiary-fixed: var(--md-sys-color-tertiary-fixed);
70
+ --color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim);
59
71
 
60
72
  /* Shades */
61
73
 
@@ -130,50 +142,4 @@
130
142
  --color-neutral-variant-800: var(--md-ref-palette-neutral-variant-20);
131
143
  --color-neutral-variant-900: var(--md-ref-palette-neutral-variant-10);
132
144
  --color-neutral-variant-950: var(--md-ref-palette-neutral-variant-5);
133
-
134
- /*
135
- * Custom colors
136
- */
137
-
138
- --color-myCustomColor1: var(--md-sys-color-my-custom-color-1);
139
- --color-on-myCustomColor1: var(--md-sys-color-on-my-custom-color-1);
140
- --color-myCustomColor1-container: var(
141
- --md-sys-color-my-custom-color-1-container
142
- );
143
- --color-on-myCustomColor1-container: var(
144
- --md-sys-color-on-my-custom-color-1-container
145
- );
146
- /* Shades */
147
- --color-myCustomColor1-50: var(--md-ref-palette-my-custom-color-1-95);
148
- --color-myCustomColor1-100: var(--md-ref-palette-my-custom-color-1-90);
149
- --color-myCustomColor1-200: var(--md-ref-palette-my-custom-color-1-80);
150
- --color-myCustomColor1-300: var(--md-ref-palette-my-custom-color-1-70);
151
- --color-myCustomColor1-400: var(--md-ref-palette-my-custom-color-1-60);
152
- --color-myCustomColor1-500: var(--md-ref-palette-my-custom-color-1-50);
153
- --color-myCustomColor1-600: var(--md-ref-palette-my-custom-color-1-40);
154
- --color-myCustomColor1-700: var(--md-ref-palette-my-custom-color-1-30);
155
- --color-myCustomColor1-800: var(--md-ref-palette-my-custom-color-1-20);
156
- --color-myCustomColor1-900: var(--md-ref-palette-my-custom-color-1-10);
157
- --color-myCustomColor1-950: var(--md-ref-palette-my-custom-color-1-5);
158
-
159
- --color-myCustomColor2: var(--md-sys-color-my-custom-color-2);
160
- --color-on-myCustomColor2: var(--md-sys-color-on-my-custom-color-2);
161
- --color-myCustomColor2-container: var(
162
- --md-sys-color-my-custom-color-2-container
163
- );
164
- --color-on-myCustomColor2-container: var(
165
- --md-sys-color-on-my-custom-color-2-container
166
- );
167
- /* Shades */
168
- --color-myCustomColor2-50: var(--md-ref-palette-my-custom-color-2-95);
169
- --color-myCustomColor2-100: var(--md-ref-palette-my-custom-color-2-90);
170
- --color-myCustomColor2-200: var(--md-ref-palette-my-custom-color-2-80);
171
- --color-myCustomColor2-300: var(--md-ref-palette-my-custom-color-2-70);
172
- --color-myCustomColor2-400: var(--md-ref-palette-my-custom-color-2-60);
173
- --color-myCustomColor2-500: var(--md-ref-palette-my-custom-color-2-50);
174
- --color-myCustomColor2-600: var(--md-ref-palette-my-custom-color-2-40);
175
- --color-myCustomColor2-700: var(--md-ref-palette-my-custom-color-2-30);
176
- --color-myCustomColor2-800: var(--md-ref-palette-my-custom-color-2-20);
177
- --color-myCustomColor2-900: var(--md-ref-palette-my-custom-color-2-10);
178
- --color-myCustomColor2-950: var(--md-ref-palette-my-custom-color-2-5);
179
145
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "material-theme-builder",
3
- "version": "3.2.0",
3
+ "version": "3.3.0",
4
4
  "description": "m3 color-system for JS/TS ecosystem",
5
5
  "keywords": [
6
6
  "react",
@@ -16,7 +16,14 @@
16
16
  "types": "./dist/react.d.ts",
17
17
  "import": "./dist/react.js"
18
18
  },
19
- "./tailwind.css": "./dist/tailwind.css"
19
+ "./tailwind": {
20
+ "types": "./dist/tailwind-plugin.d.ts",
21
+ "import": "./dist/tailwind-plugin.js",
22
+ "default": "./dist/tailwind-plugin.js"
23
+ },
24
+ "./tailwind.css": "./dist/tailwind.css",
25
+ "./shadcn.css": "./dist/shadcn.css",
26
+ "./registry-item.json": "./dist/registry-item.json"
20
27
  },
21
28
  "homepage": "https://github.com/abernier/material-theme-builder",
22
29
  "bugs": {
@@ -29,29 +36,35 @@
29
36
  },
30
37
  "license": "MIT",
31
38
  "files": [
32
- "dist",
33
- "src/tailwind.css"
39
+ "dist"
34
40
  ],
35
41
  "bin": {
36
42
  "material-theme-builder": "./dist/cli.js"
37
43
  },
38
44
  "type": "module",
39
45
  "devDependencies": {
40
- "@abernier/radix-list": "^1.0.2",
41
46
  "@arethetypeswrong/cli": "^0.18.2",
47
+ "@base-ui/react": "^1.7.0",
42
48
  "@changesets/cli": "^2.27.7",
43
49
  "@chromatic-com/storybook": "^5.0.0",
50
+ "@dnd-kit/core": "^6.3.1",
51
+ "@dnd-kit/modifiers": "^9.0.0",
52
+ "@dnd-kit/sortable": "^10.0.0",
53
+ "@dnd-kit/utilities": "^3.2.2",
44
54
  "@eslint/js": "^10.0.1",
45
55
  "@figma/plugin-typings": "^1.123.0",
56
+ "@fontsource-variable/inter": "^5.3.0",
46
57
  "@storybook/addon-docs": "^10.1.11",
47
58
  "@storybook/addon-themes": "^10.1.11",
48
59
  "@storybook/react-vite": "^10.1.11",
49
60
  "@tailwindcss/postcss": "^4.1.18",
61
+ "@tanstack/react-table": "^9.1.2",
50
62
  "@testing-library/dom": "^10.4.1",
51
63
  "@testing-library/react": "^16.3.1",
52
64
  "@types/culori": "^4.0.1",
53
65
  "@types/d3": "^7.4.3",
54
66
  "@types/lodash-es": "^4.17.12",
67
+ "@types/node": "^24.13.3",
55
68
  "@types/react": "^19.2.7",
56
69
  "@types/react-dom": "^19.2.3",
57
70
  "@types/seedrandom": "^3.0.8",
@@ -71,16 +84,18 @@
71
84
  "husky": "^9.1.7",
72
85
  "jsdom": "^28.1.0",
73
86
  "lint-staged": "^16.2.7",
74
- "lucide-react": "^0.576.0",
87
+ "lucide-react": "^1.31.0",
88
+ "next-themes": "^0.4.6",
75
89
  "postcss": "^8.5.6",
76
90
  "prettier": "^3.3.3",
77
91
  "prettier-plugin-organize-imports": "^4.3.0",
78
- "radix-ui": "^1.4.3",
79
92
  "react": "^19.2.3",
80
93
  "react-dom": "^19.2.3",
94
+ "recharts": "3.8.0",
81
95
  "seedrandom": "^3.0.5",
82
- "shadcn": "^3.8.5",
96
+ "shadcn": "^4.18.0",
83
97
  "simplex-noise": "^4.0.3",
98
+ "sonner": "^2.0.8",
84
99
  "storybook": "^10.1.11",
85
100
  "tailwind-merge": "^3.4.0",
86
101
  "tailwindcss": "^4.1.18",
@@ -96,7 +111,13 @@
96
111
  },
97
112
  "peerDependencies": {
98
113
  "react": "^19.2.3",
99
- "react-dom": "^19.2.3"
114
+ "react-dom": "^19.2.3",
115
+ "tailwindcss": "^4.0.0"
116
+ },
117
+ "peerDependenciesMeta": {
118
+ "tailwindcss": {
119
+ "optional": true
120
+ }
100
121
  },
101
122
  "dependencies": {
102
123
  "@material/material-color-utilities": "^0.3.0",
@@ -117,7 +138,7 @@
117
138
  "release": "pnpm run build && changeset publish",
118
139
  "local-release": "pnpm run lgtm && changeset version && changeset publish",
119
140
  "storybook": "storybook dev -p 6006",
120
- "build-storybook": "storybook build",
141
+ "build-storybook": "pnpm run build && storybook build",
121
142
  "build-figma": "vite build --config figma-plugin/vite.config.ts && tsup --config figma-plugin/tsup.config.ts",
122
143
  "chromatic": "chromatic --project-token $CHROMATIC_PROJECT_TOKEN",
123
144
  "changeset": "pnpm exec changeset"
package/src/tailwind.css DELETED
@@ -1,179 +0,0 @@
1
- @theme inline {
2
- --color-background: var(--md-sys-color-background);
3
- --color-on-background: var(--md-sys-color-on-background);
4
- --color-surface: var(--md-sys-color-surface);
5
- --color-surface-dim: var(--md-sys-color-surface-dim);
6
- --color-surface-bright: var(--md-sys-color-surface-bright);
7
- --color-surface-container-lowest: var(
8
- --md-sys-color-surface-container-lowest
9
- );
10
- --color-surface-container-low: var(--md-sys-color-surface-container-low);
11
- --color-surface-container: var(--md-sys-color-surface-container);
12
- --color-surface-container-high: var(--md-sys-color-surface-container-high);
13
- --color-surface-container-highest: var(
14
- --md-sys-color-surface-container-highest
15
- );
16
- --color-on-surface: var(--md-sys-color-on-surface);
17
- --color-on-surface-variant: var(--md-sys-color-on-surface-variant);
18
- --color-outline: var(--md-sys-color-outline);
19
- --color-outline-variant: var(--md-sys-color-outline-variant);
20
- --color-inverse-surface: var(--md-sys-color-inverse-surface);
21
- --color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
22
- --color-primary: var(--md-sys-color-primary);
23
- --color-on-primary: var(--md-sys-color-on-primary);
24
- --color-primary-container: var(--md-sys-color-primary-container);
25
- --color-on-primary-container: var(--md-sys-color-on-primary-container);
26
- --color-primary-fixed: var(--md-sys-color-primary-fixed);
27
- --color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
28
- --color-on-primary-fixed: var(--md-sys-color-on-primary-fixed);
29
- --color-on-primary-fixed-variant: var(
30
- --md-sys-color-on-primary-fixed-variant
31
- );
32
- --color-inverse-primary: var(--md-sys-color-inverse-primary);
33
- --color-secondary: var(--md-sys-color-secondary);
34
- --color-on-secondary: var(--md-sys-color-on-secondary);
35
- --color-secondary-container: var(--md-sys-color-secondary-container);
36
- --color-on-secondary-container: var(--md-sys-color-on-secondary-container);
37
- --color-secondary-fixed: var(--md-sys-color-secondary-fixed);
38
- --color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim);
39
- --color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed);
40
- --color-on-secondary-fixed-variant: var(
41
- --md-sys-color-on-secondary-fixed-variant
42
- );
43
- --color-tertiary: var(--md-sys-color-tertiary);
44
- --color-on-tertiary: var(--md-sys-color-on-tertiary);
45
- --color-tertiary-container: var(--md-sys-color-tertiary-container);
46
- --color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
47
- --color-tertiary-fixed: var(--md-sys-color-tertiary-fixed);
48
- --color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim);
49
- --color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed);
50
- --color-on-tertiary-fixed-variant: var(
51
- --md-sys-color-on-tertiary-fixed-variant
52
- );
53
- --color-error: var(--md-sys-color-error);
54
- --color-on-error: var(--md-sys-color-on-error);
55
- --color-error-container: var(--md-sys-color-error-container);
56
- --color-on-error-container: var(--md-sys-color-on-error-container);
57
- --color-scrim: var(--md-sys-color-scrim);
58
- --color-shadow: var(--md-sys-color-shadow);
59
-
60
- /* Shades */
61
-
62
- --color-primary-50: var(--md-ref-palette-primary-95);
63
- --color-primary-100: var(--md-ref-palette-primary-90);
64
- --color-primary-200: var(--md-ref-palette-primary-80);
65
- --color-primary-300: var(--md-ref-palette-primary-70);
66
- --color-primary-400: var(--md-ref-palette-primary-60);
67
- --color-primary-500: var(--md-ref-palette-primary-50);
68
- --color-primary-600: var(--md-ref-palette-primary-40);
69
- --color-primary-700: var(--md-ref-palette-primary-30);
70
- --color-primary-800: var(--md-ref-palette-primary-20);
71
- --color-primary-900: var(--md-ref-palette-primary-10);
72
- --color-primary-950: var(--md-ref-palette-primary-5);
73
-
74
- --color-secondary-50: var(--md-ref-palette-secondary-95);
75
- --color-secondary-100: var(--md-ref-palette-secondary-90);
76
- --color-secondary-200: var(--md-ref-palette-secondary-80);
77
- --color-secondary-300: var(--md-ref-palette-secondary-70);
78
- --color-secondary-400: var(--md-ref-palette-secondary-60);
79
- --color-secondary-500: var(--md-ref-palette-secondary-50);
80
- --color-secondary-600: var(--md-ref-palette-secondary-40);
81
- --color-secondary-700: var(--md-ref-palette-secondary-30);
82
- --color-secondary-800: var(--md-ref-palette-secondary-20);
83
- --color-secondary-900: var(--md-ref-palette-secondary-10);
84
- --color-secondary-950: var(--md-ref-palette-secondary-5);
85
-
86
- --color-tertiary-50: var(--md-ref-palette-tertiary-95);
87
- --color-tertiary-100: var(--md-ref-palette-tertiary-90);
88
- --color-tertiary-200: var(--md-ref-palette-tertiary-80);
89
- --color-tertiary-300: var(--md-ref-palette-tertiary-70);
90
- --color-tertiary-400: var(--md-ref-palette-tertiary-60);
91
- --color-tertiary-500: var(--md-ref-palette-tertiary-50);
92
- --color-tertiary-600: var(--md-ref-palette-tertiary-40);
93
- --color-tertiary-700: var(--md-ref-palette-tertiary-30);
94
- --color-tertiary-800: var(--md-ref-palette-tertiary-20);
95
- --color-tertiary-900: var(--md-ref-palette-tertiary-10);
96
- --color-tertiary-950: var(--md-ref-palette-tertiary-5);
97
-
98
- --color-error-50: var(--md-ref-palette-error-95);
99
- --color-error-100: var(--md-ref-palette-error-90);
100
- --color-error-200: var(--md-ref-palette-error-80);
101
- --color-error-300: var(--md-ref-palette-error-70);
102
- --color-error-400: var(--md-ref-palette-error-60);
103
- --color-error-500: var(--md-ref-palette-error-50);
104
- --color-error-600: var(--md-ref-palette-error-40);
105
- --color-error-700: var(--md-ref-palette-error-30);
106
- --color-error-800: var(--md-ref-palette-error-20);
107
- --color-error-900: var(--md-ref-palette-error-10);
108
- --color-error-950: var(--md-ref-palette-error-5);
109
-
110
- --color-neutral-50: var(--md-ref-palette-neutral-95);
111
- --color-neutral-100: var(--md-ref-palette-neutral-90);
112
- --color-neutral-200: var(--md-ref-palette-neutral-80);
113
- --color-neutral-300: var(--md-ref-palette-neutral-70);
114
- --color-neutral-400: var(--md-ref-palette-neutral-60);
115
- --color-neutral-500: var(--md-ref-palette-neutral-50);
116
- --color-neutral-600: var(--md-ref-palette-neutral-40);
117
- --color-neutral-700: var(--md-ref-palette-neutral-30);
118
- --color-neutral-800: var(--md-ref-palette-neutral-20);
119
- --color-neutral-900: var(--md-ref-palette-neutral-10);
120
- --color-neutral-950: var(--md-ref-palette-neutral-5);
121
-
122
- --color-neutral-variant-50: var(--md-ref-palette-neutral-variant-95);
123
- --color-neutral-variant-100: var(--md-ref-palette-neutral-variant-90);
124
- --color-neutral-variant-200: var(--md-ref-palette-neutral-variant-80);
125
- --color-neutral-variant-300: var(--md-ref-palette-neutral-variant-70);
126
- --color-neutral-variant-400: var(--md-ref-palette-neutral-variant-60);
127
- --color-neutral-variant-500: var(--md-ref-palette-neutral-variant-50);
128
- --color-neutral-variant-600: var(--md-ref-palette-neutral-variant-40);
129
- --color-neutral-variant-700: var(--md-ref-palette-neutral-variant-30);
130
- --color-neutral-variant-800: var(--md-ref-palette-neutral-variant-20);
131
- --color-neutral-variant-900: var(--md-ref-palette-neutral-variant-10);
132
- --color-neutral-variant-950: var(--md-ref-palette-neutral-variant-5);
133
-
134
- /*
135
- * Custom colors
136
- */
137
-
138
- --color-myCustomColor1: var(--md-sys-color-my-custom-color-1);
139
- --color-on-myCustomColor1: var(--md-sys-color-on-my-custom-color-1);
140
- --color-myCustomColor1-container: var(
141
- --md-sys-color-my-custom-color-1-container
142
- );
143
- --color-on-myCustomColor1-container: var(
144
- --md-sys-color-on-my-custom-color-1-container
145
- );
146
- /* Shades */
147
- --color-myCustomColor1-50: var(--md-ref-palette-my-custom-color-1-95);
148
- --color-myCustomColor1-100: var(--md-ref-palette-my-custom-color-1-90);
149
- --color-myCustomColor1-200: var(--md-ref-palette-my-custom-color-1-80);
150
- --color-myCustomColor1-300: var(--md-ref-palette-my-custom-color-1-70);
151
- --color-myCustomColor1-400: var(--md-ref-palette-my-custom-color-1-60);
152
- --color-myCustomColor1-500: var(--md-ref-palette-my-custom-color-1-50);
153
- --color-myCustomColor1-600: var(--md-ref-palette-my-custom-color-1-40);
154
- --color-myCustomColor1-700: var(--md-ref-palette-my-custom-color-1-30);
155
- --color-myCustomColor1-800: var(--md-ref-palette-my-custom-color-1-20);
156
- --color-myCustomColor1-900: var(--md-ref-palette-my-custom-color-1-10);
157
- --color-myCustomColor1-950: var(--md-ref-palette-my-custom-color-1-5);
158
-
159
- --color-myCustomColor2: var(--md-sys-color-my-custom-color-2);
160
- --color-on-myCustomColor2: var(--md-sys-color-on-my-custom-color-2);
161
- --color-myCustomColor2-container: var(
162
- --md-sys-color-my-custom-color-2-container
163
- );
164
- --color-on-myCustomColor2-container: var(
165
- --md-sys-color-on-my-custom-color-2-container
166
- );
167
- /* Shades */
168
- --color-myCustomColor2-50: var(--md-ref-palette-my-custom-color-2-95);
169
- --color-myCustomColor2-100: var(--md-ref-palette-my-custom-color-2-90);
170
- --color-myCustomColor2-200: var(--md-ref-palette-my-custom-color-2-80);
171
- --color-myCustomColor2-300: var(--md-ref-palette-my-custom-color-2-70);
172
- --color-myCustomColor2-400: var(--md-ref-palette-my-custom-color-2-60);
173
- --color-myCustomColor2-500: var(--md-ref-palette-my-custom-color-2-50);
174
- --color-myCustomColor2-600: var(--md-ref-palette-my-custom-color-2-40);
175
- --color-myCustomColor2-700: var(--md-ref-palette-my-custom-color-2-30);
176
- --color-myCustomColor2-800: var(--md-ref-palette-my-custom-color-2-20);
177
- --color-myCustomColor2-900: var(--md-ref-palette-my-custom-color-2-10);
178
- --color-myCustomColor2-950: var(--md-ref-palette-my-custom-color-2-5);
179
- }