material-theme-builder 2.1.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 (7) hide show
  1. package/README.md +249 -0
  2. package/dist/cli.js +828 -0
  3. package/dist/index.d.ts +191 -0
  4. package/dist/index.js +888 -0
  5. package/dist/tailwind.css +181 -0
  6. package/package.json +105 -0
  7. package/src/tailwind.css +181 -0
package/dist/tailwind.css ADDED
@@ -0,0 +1,181 @@
1
+ @import "tailwindcss";
2
+
3
+ @theme inline {
4
+ --color-background: var(--md-sys-color-background);
5
+ --color-on-background: var(--md-sys-color-on-background);
6
+ --color-surface: var(--md-sys-color-surface);
7
+ --color-surface-dim: var(--md-sys-color-surface-dim);
8
+ --color-surface-bright: var(--md-sys-color-surface-bright);
9
+ --color-surface-container-lowest: var(
10
+ --md-sys-color-surface-container-lowest
11
+ );
12
+ --color-surface-container-low: var(--md-sys-color-surface-container-low);
13
+ --color-surface-container: var(--md-sys-color-surface-container);
14
+ --color-surface-container-high: var(--md-sys-color-surface-container-high);
15
+ --color-surface-container-highest: var(
16
+ --md-sys-color-surface-container-highest
17
+ );
18
+ --color-on-surface: var(--md-sys-color-on-surface);
19
+ --color-on-surface-variant: var(--md-sys-color-on-surface-variant);
20
+ --color-outline: var(--md-sys-color-outline);
21
+ --color-outline-variant: var(--md-sys-color-outline-variant);
22
+ --color-inverse-surface: var(--md-sys-color-inverse-surface);
23
+ --color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
24
+ --color-primary: var(--md-sys-color-primary);
25
+ --color-on-primary: var(--md-sys-color-on-primary);
26
+ --color-primary-container: var(--md-sys-color-primary-container);
27
+ --color-on-primary-container: var(--md-sys-color-on-primary-container);
28
+ --color-primary-fixed: var(--md-sys-color-primary-fixed);
29
+ --color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
30
+ --color-on-primary-fixed: var(--md-sys-color-on-primary-fixed);
31
+ --color-on-primary-fixed-variant: var(
32
+ --md-sys-color-on-primary-fixed-variant
33
+ );
34
+ --color-inverse-primary: var(--md-sys-color-inverse-primary);
35
+ --color-secondary: var(--md-sys-color-secondary);
36
+ --color-on-secondary: var(--md-sys-color-on-secondary);
37
+ --color-secondary-container: var(--md-sys-color-secondary-container);
38
+ --color-on-secondary-container: var(--md-sys-color-on-secondary-container);
39
+ --color-secondary-fixed: var(--md-sys-color-secondary-fixed);
40
+ --color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim);
41
+ --color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed);
42
+ --color-on-secondary-fixed-variant: var(
43
+ --md-sys-color-on-secondary-fixed-variant
44
+ );
45
+ --color-tertiary: var(--md-sys-color-tertiary);
46
+ --color-on-tertiary: var(--md-sys-color-on-tertiary);
47
+ --color-tertiary-container: var(--md-sys-color-tertiary-container);
48
+ --color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
49
+ --color-tertiary-fixed: var(--md-sys-color-tertiary-fixed);
50
+ --color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim);
51
+ --color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed);
52
+ --color-on-tertiary-fixed-variant: var(
53
+ --md-sys-color-on-tertiary-fixed-variant
54
+ );
55
+ --color-error: var(--md-sys-color-error);
56
+ --color-on-error: var(--md-sys-color-on-error);
57
+ --color-error-container: var(--md-sys-color-error-container);
58
+ --color-on-error-container: var(--md-sys-color-on-error-container);
59
+ --color-scrim: var(--md-sys-color-scrim);
60
+ --color-shadow: var(--md-sys-color-shadow);
61
+
62
+ /* Shades */
63
+
64
+ --color-primary-50: var(--md-ref-palette-primary-95);
65
+ --color-primary-100: var(--md-ref-palette-primary-90);
66
+ --color-primary-200: var(--md-ref-palette-primary-80);
67
+ --color-primary-300: var(--md-ref-palette-primary-70);
68
+ --color-primary-400: var(--md-ref-palette-primary-60);
69
+ --color-primary-500: var(--md-ref-palette-primary-50);
70
+ --color-primary-600: var(--md-ref-palette-primary-40);
71
+ --color-primary-700: var(--md-ref-palette-primary-30);
72
+ --color-primary-800: var(--md-ref-palette-primary-20);
73
+ --color-primary-900: var(--md-ref-palette-primary-10);
74
+ --color-primary-950: var(--md-ref-palette-primary-5);
75
+
76
+ --color-secondary-50: var(--md-ref-palette-secondary-95);
77
+ --color-secondary-100: var(--md-ref-palette-secondary-90);
78
+ --color-secondary-200: var(--md-ref-palette-secondary-80);
79
+ --color-secondary-300: var(--md-ref-palette-secondary-70);
80
+ --color-secondary-400: var(--md-ref-palette-secondary-60);
81
+ --color-secondary-500: var(--md-ref-palette-secondary-50);
82
+ --color-secondary-600: var(--md-ref-palette-secondary-40);
83
+ --color-secondary-700: var(--md-ref-palette-secondary-30);
84
+ --color-secondary-800: var(--md-ref-palette-secondary-20);
85
+ --color-secondary-900: var(--md-ref-palette-secondary-10);
86
+ --color-secondary-950: var(--md-ref-palette-secondary-5);
87
+
88
+ --color-tertiary-50: var(--md-ref-palette-tertiary-95);
89
+ --color-tertiary-100: var(--md-ref-palette-tertiary-90);
90
+ --color-tertiary-200: var(--md-ref-palette-tertiary-80);
91
+ --color-tertiary-300: var(--md-ref-palette-tertiary-70);
92
+ --color-tertiary-400: var(--md-ref-palette-tertiary-60);
93
+ --color-tertiary-500: var(--md-ref-palette-tertiary-50);
94
+ --color-tertiary-600: var(--md-ref-palette-tertiary-40);
95
+ --color-tertiary-700: var(--md-ref-palette-tertiary-30);
96
+ --color-tertiary-800: var(--md-ref-palette-tertiary-20);
97
+ --color-tertiary-900: var(--md-ref-palette-tertiary-10);
98
+ --color-tertiary-950: var(--md-ref-palette-tertiary-5);
99
+
100
+ --color-error-50: var(--md-ref-palette-error-95);
101
+ --color-error-100: var(--md-ref-palette-error-90);
102
+ --color-error-200: var(--md-ref-palette-error-80);
103
+ --color-error-300: var(--md-ref-palette-error-70);
104
+ --color-error-400: var(--md-ref-palette-error-60);
105
+ --color-error-500: var(--md-ref-palette-error-50);
106
+ --color-error-600: var(--md-ref-palette-error-40);
107
+ --color-error-700: var(--md-ref-palette-error-30);
108
+ --color-error-800: var(--md-ref-palette-error-20);
109
+ --color-error-900: var(--md-ref-palette-error-10);
110
+ --color-error-950: var(--md-ref-palette-error-5);
111
+
112
+ --color-neutral-50: var(--md-ref-palette-neutral-95);
113
+ --color-neutral-100: var(--md-ref-palette-neutral-90);
114
+ --color-neutral-200: var(--md-ref-palette-neutral-80);
115
+ --color-neutral-300: var(--md-ref-palette-neutral-70);
116
+ --color-neutral-400: var(--md-ref-palette-neutral-60);
117
+ --color-neutral-500: var(--md-ref-palette-neutral-50);
118
+ --color-neutral-600: var(--md-ref-palette-neutral-40);
119
+ --color-neutral-700: var(--md-ref-palette-neutral-30);
120
+ --color-neutral-800: var(--md-ref-palette-neutral-20);
121
+ --color-neutral-900: var(--md-ref-palette-neutral-10);
122
+ --color-neutral-950: var(--md-ref-palette-neutral-5);
123
+
124
+ --color-neutral-variant-50: var(--md-ref-palette-neutral-variant-95);
125
+ --color-neutral-variant-100: var(--md-ref-palette-neutral-variant-90);
126
+ --color-neutral-variant-200: var(--md-ref-palette-neutral-variant-80);
127
+ --color-neutral-variant-300: var(--md-ref-palette-neutral-variant-70);
128
+ --color-neutral-variant-400: var(--md-ref-palette-neutral-variant-60);
129
+ --color-neutral-variant-500: var(--md-ref-palette-neutral-variant-50);
130
+ --color-neutral-variant-600: var(--md-ref-palette-neutral-variant-40);
131
+ --color-neutral-variant-700: var(--md-ref-palette-neutral-variant-30);
132
+ --color-neutral-variant-800: var(--md-ref-palette-neutral-variant-20);
133
+ --color-neutral-variant-900: var(--md-ref-palette-neutral-variant-10);
134
+ --color-neutral-variant-950: var(--md-ref-palette-neutral-variant-5);
135
+
136
+ /*
137
+ * Custom colors
138
+ */
139
+
140
+ --color-myCustomColor1: var(--md-sys-color-my-custom-color-1);
141
+ --color-on-myCustomColor1: var(--md-sys-color-on-my-custom-color-1);
142
+ --color-myCustomColor1-container: var(
143
+ --md-sys-color-my-custom-color-1-container
144
+ );
145
+ --color-on-myCustomColor1-container: var(
146
+ --md-sys-color-on-my-custom-color-1-container
147
+ );
148
+ /* Shades */
149
+ --color-myCustomColor1-50: var(--md-ref-palette-my-custom-color-1-95);
150
+ --color-myCustomColor1-100: var(--md-ref-palette-my-custom-color-1-90);
151
+ --color-myCustomColor1-200: var(--md-ref-palette-my-custom-color-1-80);
152
+ --color-myCustomColor1-300: var(--md-ref-palette-my-custom-color-1-70);
153
+ --color-myCustomColor1-400: var(--md-ref-palette-my-custom-color-1-60);
154
+ --color-myCustomColor1-500: var(--md-ref-palette-my-custom-color-1-50);
155
+ --color-myCustomColor1-600: var(--md-ref-palette-my-custom-color-1-40);
156
+ --color-myCustomColor1-700: var(--md-ref-palette-my-custom-color-1-30);
157
+ --color-myCustomColor1-800: var(--md-ref-palette-my-custom-color-1-20);
158
+ --color-myCustomColor1-900: var(--md-ref-palette-my-custom-color-1-10);
159
+ --color-myCustomColor1-950: var(--md-ref-palette-my-custom-color-1-5);
160
+
161
+ --color-myCustomColor2: var(--md-sys-color-my-custom-color-2);
162
+ --color-on-myCustomColor2: var(--md-sys-color-on-my-custom-color-2);
163
+ --color-myCustomColor2-container: var(
164
+ --md-sys-color-my-custom-color-2-container
165
+ );
166
+ --color-on-myCustomColor2-container: var(
167
+ --md-sys-color-on-my-custom-color-2-container
168
+ );
169
+ /* Shades */
170
+ --color-myCustomColor2-50: var(--md-ref-palette-my-custom-color-2-95);
171
+ --color-myCustomColor2-100: var(--md-ref-palette-my-custom-color-2-90);
172
+ --color-myCustomColor2-200: var(--md-ref-palette-my-custom-color-2-80);
173
+ --color-myCustomColor2-300: var(--md-ref-palette-my-custom-color-2-70);
174
+ --color-myCustomColor2-400: var(--md-ref-palette-my-custom-color-2-60);
175
+ --color-myCustomColor2-500: var(--md-ref-palette-my-custom-color-2-50);
176
+ --color-myCustomColor2-600: var(--md-ref-palette-my-custom-color-2-40);
177
+ --color-myCustomColor2-700: var(--md-ref-palette-my-custom-color-2-30);
178
+ --color-myCustomColor2-800: var(--md-ref-palette-my-custom-color-2-20);
179
+ --color-myCustomColor2-900: var(--md-ref-palette-my-custom-color-2-10);
180
+ --color-myCustomColor2-950: var(--md-ref-palette-my-custom-color-2-5);
181
+ }
package/package.json ADDED
@@ -0,0 +1,105 @@
1
+ {
2
+ "name": "material-theme-builder",
3
+ "version": "2.1.0",
4
+ "description": "m3 color-system for JS/TS ecosystem",
5
+ "keywords": [
6
+ "react",
7
+ "component",
8
+ "typescript"
9
+ ],
10
+ "exports": {
11
+ ".": {
12
+ "types": "./dist/index.d.ts",
13
+ "import": "./dist/index.js"
14
+ },
15
+ "./tailwind.css": "./dist/tailwind.css"
16
+ },
17
+ "homepage": "https://github.com/abernier/material-theme-builder",
18
+ "bugs": {
19
+ "url": "https://github.com/abernier/material-theme-builder/issues"
20
+ },
21
+ "author": "abernier",
22
+ "repository": {
23
+ "type": "git",
24
+ "url": "git+https://github.com/abernier/material-theme-builder.git"
25
+ },
26
+ "license": "MIT",
27
+ "files": [
28
+ "dist",
29
+ "src/tailwind.css"
30
+ ],
31
+ "bin": {
32
+ "material-theme-builder": "./dist/cli.js"
33
+ },
34
+ "type": "module",
35
+ "packageManager": "pnpm@10.27.0",
36
+ "devDependencies": {
37
+ "@arethetypeswrong/cli": "^0.18.2",
38
+ "@changesets/cli": "^2.27.7",
39
+ "@chromatic-com/storybook": "^5.0.0",
40
+ "@eslint/js": "^10.0.1",
41
+ "@storybook/addon-docs": "^10.1.11",
42
+ "@storybook/addon-themes": "^10.1.11",
43
+ "@storybook/react-vite": "^10.1.11",
44
+ "@tailwindcss/postcss": "^4.1.18",
45
+ "@testing-library/dom": "^10.4.1",
46
+ "@testing-library/react": "^16.3.1",
47
+ "@types/culori": "^4.0.1",
48
+ "@types/lodash-es": "^4.17.12",
49
+ "@types/react": "^19.2.7",
50
+ "@types/react-dom": "^19.2.3",
51
+ "@vitejs/plugin-react": "^5.1.2",
52
+ "ajv": "^8.18.0",
53
+ "ajv-formats": "^3.0.1",
54
+ "chromatic": "^15.1.1",
55
+ "class-variance-authority": "^0.7.1",
56
+ "clsx": "^2.1.1",
57
+ "culori": "^4.0.2",
58
+ "eslint": "^10.0.0",
59
+ "eslint-plugin-react-hooks": "^7.0.1",
60
+ "eslint-plugin-sonarjs": "^3.0.7",
61
+ "globals": "^17.3.0",
62
+ "husky": "^9.1.7",
63
+ "jsdom": "^28.1.0",
64
+ "lint-staged": "^16.2.7",
65
+ "postcss": "^8.5.6",
66
+ "prettier": "^3.3.3",
67
+ "prettier-plugin-organize-imports": "^4.3.0",
68
+ "react": "^19.2.3",
69
+ "react-dom": "^19.2.3",
70
+ "storybook": "^10.1.11",
71
+ "tailwind-merge": "^3.4.0",
72
+ "tailwindcss": "^4.1.18",
73
+ "tsup": "^8.2.4",
74
+ "typescript": "^5.5.4",
75
+ "typescript-eslint": "^8.55.0",
76
+ "vitest": "^4.0.16"
77
+ },
78
+ "scripts": {
79
+ "build": "tsup",
80
+ "lint": "eslint .",
81
+ "lgtm": "pnpm run build && pnpm run lint && pnpm run check-format && pnpm run check-exports && pnpm run typecheck && pnpm run test",
82
+ "typecheck": "tsc",
83
+ "test": "vitest run",
84
+ "pretest": "bash scripts/download-dtcg-schemas.sh",
85
+ "format": "prettier --write .",
86
+ "check-format": "prettier --check .",
87
+ "check-exports": "attw --pack . --ignore-rules cjs-resolves-to-esm no-resolution",
88
+ "release": "pnpm run build && changeset publish",
89
+ "local-release": "pnpm run lgtm && changeset version && changeset publish",
90
+ "storybook": "storybook dev -p 6006",
91
+ "build-storybook": "storybook build",
92
+ "chromatic": "chromatic --project-token $CHROMATIC_PROJECT_TOKEN",
93
+ "prepare": "pnpm run pretest && husky",
94
+ "changeset": "pnpm exec changeset"
95
+ },
96
+ "peerDependencies": {
97
+ "react": "^19.2.3",
98
+ "react-dom": "^19.2.3"
99
+ },
100
+ "dependencies": {
101
+ "@material/material-color-utilities": "^0.3.0",
102
+ "commander": "^14.0.3",
103
+ "lodash-es": "^4.17.22"
104
+ }
105
+ }
package/src/tailwind.css ADDED
@@ -0,0 +1,181 @@
1
+ @import "tailwindcss";
2
+
3
+ @theme inline {
4
+ --color-background: var(--md-sys-color-background);
5
+ --color-on-background: var(--md-sys-color-on-background);
6
+ --color-surface: var(--md-sys-color-surface);
7
+ --color-surface-dim: var(--md-sys-color-surface-dim);
8
+ --color-surface-bright: var(--md-sys-color-surface-bright);
9
+ --color-surface-container-lowest: var(
10
+ --md-sys-color-surface-container-lowest
11
+ );
12
+ --color-surface-container-low: var(--md-sys-color-surface-container-low);
13
+ --color-surface-container: var(--md-sys-color-surface-container);
14
+ --color-surface-container-high: var(--md-sys-color-surface-container-high);
15
+ --color-surface-container-highest: var(
16
+ --md-sys-color-surface-container-highest
17
+ );
18
+ --color-on-surface: var(--md-sys-color-on-surface);
19
+ --color-on-surface-variant: var(--md-sys-color-on-surface-variant);
20
+ --color-outline: var(--md-sys-color-outline);
21
+ --color-outline-variant: var(--md-sys-color-outline-variant);
22
+ --color-inverse-surface: var(--md-sys-color-inverse-surface);
23
+ --color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
24
+ --color-primary: var(--md-sys-color-primary);
25
+ --color-on-primary: var(--md-sys-color-on-primary);
26
+ --color-primary-container: var(--md-sys-color-primary-container);
27
+ --color-on-primary-container: var(--md-sys-color-on-primary-container);
28
+ --color-primary-fixed: var(--md-sys-color-primary-fixed);
29
+ --color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
30
+ --color-on-primary-fixed: var(--md-sys-color-on-primary-fixed);
31
+ --color-on-primary-fixed-variant: var(
32
+ --md-sys-color-on-primary-fixed-variant
33
+ );
34
+ --color-inverse-primary: var(--md-sys-color-inverse-primary);
35
+ --color-secondary: var(--md-sys-color-secondary);
36
+ --color-on-secondary: var(--md-sys-color-on-secondary);
37
+ --color-secondary-container: var(--md-sys-color-secondary-container);
38
+ --color-on-secondary-container: var(--md-sys-color-on-secondary-container);
39
+ --color-secondary-fixed: var(--md-sys-color-secondary-fixed);
40
+ --color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim);
41
+ --color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed);
42
+ --color-on-secondary-fixed-variant: var(
43
+ --md-sys-color-on-secondary-fixed-variant
44
+ );
45
+ --color-tertiary: var(--md-sys-color-tertiary);
46
+ --color-on-tertiary: var(--md-sys-color-on-tertiary);
47
+ --color-tertiary-container: var(--md-sys-color-tertiary-container);
48
+ --color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
49
+ --color-tertiary-fixed: var(--md-sys-color-tertiary-fixed);
50
+ --color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim);
51
+ --color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed);
52
+ --color-on-tertiary-fixed-variant: var(
53
+ --md-sys-color-on-tertiary-fixed-variant
54
+ );
55
+ --color-error: var(--md-sys-color-error);
56
+ --color-on-error: var(--md-sys-color-on-error);
57
+ --color-error-container: var(--md-sys-color-error-container);
58
+ --color-on-error-container: var(--md-sys-color-on-error-container);
59
+ --color-scrim: var(--md-sys-color-scrim);
60
+ --color-shadow: var(--md-sys-color-shadow);
61
+
62
+ /* Shades */
63
+
64
+ --color-primary-50: var(--md-ref-palette-primary-95);
65
+ --color-primary-100: var(--md-ref-palette-primary-90);
66
+ --color-primary-200: var(--md-ref-palette-primary-80);
67
+ --color-primary-300: var(--md-ref-palette-primary-70);
68
+ --color-primary-400: var(--md-ref-palette-primary-60);
69
+ --color-primary-500: var(--md-ref-palette-primary-50);
70
+ --color-primary-600: var(--md-ref-palette-primary-40);
71
+ --color-primary-700: var(--md-ref-palette-primary-30);
72
+ --color-primary-800: var(--md-ref-palette-primary-20);
73
+ --color-primary-900: var(--md-ref-palette-primary-10);
74
+ --color-primary-950: var(--md-ref-palette-primary-5);
75
+
76
+ --color-secondary-50: var(--md-ref-palette-secondary-95);
77
+ --color-secondary-100: var(--md-ref-palette-secondary-90);
78
+ --color-secondary-200: var(--md-ref-palette-secondary-80);
79
+ --color-secondary-300: var(--md-ref-palette-secondary-70);
80
+ --color-secondary-400: var(--md-ref-palette-secondary-60);
81
+ --color-secondary-500: var(--md-ref-palette-secondary-50);
82
+ --color-secondary-600: var(--md-ref-palette-secondary-40);
83
+ --color-secondary-700: var(--md-ref-palette-secondary-30);
84
+ --color-secondary-800: var(--md-ref-palette-secondary-20);
85
+ --color-secondary-900: var(--md-ref-palette-secondary-10);
86
+ --color-secondary-950: var(--md-ref-palette-secondary-5);
87
+
88
+ --color-tertiary-50: var(--md-ref-palette-tertiary-95);
89
+ --color-tertiary-100: var(--md-ref-palette-tertiary-90);
90
+ --color-tertiary-200: var(--md-ref-palette-tertiary-80);
91
+ --color-tertiary-300: var(--md-ref-palette-tertiary-70);
92
+ --color-tertiary-400: var(--md-ref-palette-tertiary-60);
93
+ --color-tertiary-500: var(--md-ref-palette-tertiary-50);
94
+ --color-tertiary-600: var(--md-ref-palette-tertiary-40);
95
+ --color-tertiary-700: var(--md-ref-palette-tertiary-30);
96
+ --color-tertiary-800: var(--md-ref-palette-tertiary-20);
97
+ --color-tertiary-900: var(--md-ref-palette-tertiary-10);
98
+ --color-tertiary-950: var(--md-ref-palette-tertiary-5);
99
+
100
+ --color-error-50: var(--md-ref-palette-error-95);
101
+ --color-error-100: var(--md-ref-palette-error-90);
102
+ --color-error-200: var(--md-ref-palette-error-80);
103
+ --color-error-300: var(--md-ref-palette-error-70);
104
+ --color-error-400: var(--md-ref-palette-error-60);
105
+ --color-error-500: var(--md-ref-palette-error-50);
106
+ --color-error-600: var(--md-ref-palette-error-40);
107
+ --color-error-700: var(--md-ref-palette-error-30);
108
+ --color-error-800: var(--md-ref-palette-error-20);
109
+ --color-error-900: var(--md-ref-palette-error-10);
110
+ --color-error-950: var(--md-ref-palette-error-5);
111
+
112
+ --color-neutral-50: var(--md-ref-palette-neutral-95);
113
+ --color-neutral-100: var(--md-ref-palette-neutral-90);
114
+ --color-neutral-200: var(--md-ref-palette-neutral-80);
115
+ --color-neutral-300: var(--md-ref-palette-neutral-70);
116
+ --color-neutral-400: var(--md-ref-palette-neutral-60);
117
+ --color-neutral-500: var(--md-ref-palette-neutral-50);
118
+ --color-neutral-600: var(--md-ref-palette-neutral-40);
119
+ --color-neutral-700: var(--md-ref-palette-neutral-30);
120
+ --color-neutral-800: var(--md-ref-palette-neutral-20);
121
+ --color-neutral-900: var(--md-ref-palette-neutral-10);
122
+ --color-neutral-950: var(--md-ref-palette-neutral-5);
123
+
124
+ --color-neutral-variant-50: var(--md-ref-palette-neutral-variant-95);
125
+ --color-neutral-variant-100: var(--md-ref-palette-neutral-variant-90);
126
+ --color-neutral-variant-200: var(--md-ref-palette-neutral-variant-80);
127
+ --color-neutral-variant-300: var(--md-ref-palette-neutral-variant-70);
128
+ --color-neutral-variant-400: var(--md-ref-palette-neutral-variant-60);
129
+ --color-neutral-variant-500: var(--md-ref-palette-neutral-variant-50);
130
+ --color-neutral-variant-600: var(--md-ref-palette-neutral-variant-40);
131
+ --color-neutral-variant-700: var(--md-ref-palette-neutral-variant-30);
132
+ --color-neutral-variant-800: var(--md-ref-palette-neutral-variant-20);
133
+ --color-neutral-variant-900: var(--md-ref-palette-neutral-variant-10);
134
+ --color-neutral-variant-950: var(--md-ref-palette-neutral-variant-5);
135
+
136
+ /*
137
+ * Custom colors
138
+ */
139
+
140
+ --color-myCustomColor1: var(--md-sys-color-my-custom-color-1);
141
+ --color-on-myCustomColor1: var(--md-sys-color-on-my-custom-color-1);
142
+ --color-myCustomColor1-container: var(
143
+ --md-sys-color-my-custom-color-1-container
144
+ );
145
+ --color-on-myCustomColor1-container: var(
146
+ --md-sys-color-on-my-custom-color-1-container
147
+ );
148
+ /* Shades */
149
+ --color-myCustomColor1-50: var(--md-ref-palette-my-custom-color-1-95);
150
+ --color-myCustomColor1-100: var(--md-ref-palette-my-custom-color-1-90);
151
+ --color-myCustomColor1-200: var(--md-ref-palette-my-custom-color-1-80);
152
+ --color-myCustomColor1-300: var(--md-ref-palette-my-custom-color-1-70);
153
+ --color-myCustomColor1-400: var(--md-ref-palette-my-custom-color-1-60);
154
+ --color-myCustomColor1-500: var(--md-ref-palette-my-custom-color-1-50);
155
+ --color-myCustomColor1-600: var(--md-ref-palette-my-custom-color-1-40);
156
+ --color-myCustomColor1-700: var(--md-ref-palette-my-custom-color-1-30);
157
+ --color-myCustomColor1-800: var(--md-ref-palette-my-custom-color-1-20);
158
+ --color-myCustomColor1-900: var(--md-ref-palette-my-custom-color-1-10);
159
+ --color-myCustomColor1-950: var(--md-ref-palette-my-custom-color-1-5);
160
+
161
+ --color-myCustomColor2: var(--md-sys-color-my-custom-color-2);
162
+ --color-on-myCustomColor2: var(--md-sys-color-on-my-custom-color-2);
163
+ --color-myCustomColor2-container: var(
164
+ --md-sys-color-my-custom-color-2-container
165
+ );
166
+ --color-on-myCustomColor2-container: var(
167
+ --md-sys-color-on-my-custom-color-2-container
168
+ );
169
+ /* Shades */
170
+ --color-myCustomColor2-50: var(--md-ref-palette-my-custom-color-2-95);
171
+ --color-myCustomColor2-100: var(--md-ref-palette-my-custom-color-2-90);
172
+ --color-myCustomColor2-200: var(--md-ref-palette-my-custom-color-2-80);
173
+ --color-myCustomColor2-300: var(--md-ref-palette-my-custom-color-2-70);
174
+ --color-myCustomColor2-400: var(--md-ref-palette-my-custom-color-2-60);
175
+ --color-myCustomColor2-500: var(--md-ref-palette-my-custom-color-2-50);
176
+ --color-myCustomColor2-600: var(--md-ref-palette-my-custom-color-2-40);
177
+ --color-myCustomColor2-700: var(--md-ref-palette-my-custom-color-2-30);
178
+ --color-myCustomColor2-800: var(--md-ref-palette-my-custom-color-2-20);
179
+ --color-myCustomColor2-900: var(--md-ref-palette-my-custom-color-2-10);
180
+ --color-myCustomColor2-950: var(--md-ref-palette-my-custom-color-2-5);
181
+ }