@sandlada/material-design-css 1.1.0 → 2.0.0-nightly.20250809a

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 (17) hide show
  1. package/README.md +32 -4
  2. package/color/bg-utilities.css +276 -0
  3. package/color/classic-utilities.css +258 -0
  4. package/color/text-utilities.css +276 -0
  5. package/index.css +11 -2
  6. package/motion/animation-utilities.css +210 -0
  7. package/motion/transition-utilities.css +210 -0
  8. package/package.json +34 -10
  9. package/preset.css +9 -0
  10. package/shape.css +1 -1
  11. package/typography.css +1 -1
  12. package/color.css +0 -703
  13. package/motion.css +0 -272
  14. package/prebuild-color-blue.css +0 -58
  15. package/prebuild-color-green.css +0 -58
  16. package/prebuild-color-pink.css +0 -58
  17. package/prebuild-color-yellow.css +0 -58
package/motion/transition-utilities.css ADDED
@@ -0,0 +1,210 @@
1
+ @layer material-design-system.motion.transition.duration {
2
+ :root {
3
+ --_transition-duration-short1 : var(--md-sys-motion-duration-short1, 50ms);
4
+ --_transition-duration-short2 : var(--md-sys-motion-duration-short2, 100ms);
5
+ --_transition-duration-short3 : var(--md-sys-motion-duration-short3, 150ms);
6
+ --_transition-duration-short4 : var(--md-sys-motion-duration-short4, 200ms);
7
+ --_transition-duration-medium1 : var(--md-sys-motion-duration-medium1, 250ms);
8
+ --_transition-duration-medium2 : var(--md-sys-motion-duration-medium2, 300ms);
9
+ --_transition-duration-medium3 : var(--md-sys-motion-duration-medium3, 350ms);
10
+ --_transition-duration-medium4 : var(--md-sys-motion-duration-medium4, 400ms);
11
+ --_transition-duration-long1 : var(--md-sys-motion-duration-long1, 450ms);
12
+ --_transition-duration-long2 : var(--md-sys-motion-duration-long2, 500ms);
13
+ --_transition-duration-long3 : var(--md-sys-motion-duration-long3, 550ms);
14
+ --_transition-duration-long4 : var(--md-sys-motion-duration-long4, 600ms);
15
+ --_transition-duration-extra-long1: var(--md-sys-motion-duration-extra-long1, 700ms);
16
+ --_transition-duration-extra-long2: var(--md-sys-motion-duration-extra-long2, 800ms);
17
+ --_transition-duration-extra-long3: var(--md-sys-motion-duration-extra-long3, 900ms);
18
+ --_transition-duration-extra-long4: var(--md-sys-motion-duration-extra-long4, 1000ms);
19
+ }
20
+ }
21
+
22
+ @layer material-design-system.motion.transition.duration {
23
+ .transition-duration-short1 {
24
+ transition-duration: var(--_transition-duration-short1);
25
+ }
26
+ .transition-duration-short2 {
27
+ transition-duration: var(--_transition-duration-short2);
28
+ }
29
+ .transition-duration-short3 {
30
+ transition-duration: var(--_transition-duration-short3);
31
+ }
32
+ .transition-duration-short4 {
33
+ transition-duration: var(--_transition-duration-short4);
34
+ }
35
+ .transition-duration-medium1 {
36
+ transition-duration: var(--_transition-duration-medium1);
37
+ }
38
+ .transition-duration-medium2 {
39
+ transition-duration: var(--_transition-duration-medium2);
40
+ }
41
+ .transition-duration-medium3 {
42
+ transition-duration: var(--_transition-duration-medium3);
43
+ }
44
+ .transition-duration-medium4 {
45
+ transition-duration: var(--_transition-duration-medium4);
46
+ }
47
+ .transition-duration-long1 {
48
+ transition-duration: var(--_transition-duration-long1);
49
+ }
50
+ .transition-duration-long2 {
51
+ transition-duration: var(--_transition-duration-long2);
52
+ }
53
+ .transition-duration-long3 {
54
+ transition-duration: var(--_transition-duration-long3);
55
+ }
56
+ .transition-duration-long4 {
57
+ transition-duration: var(--_transition-duration-long4);
58
+ }
59
+ .transition-duration-extra-long1 {
60
+ transition-duration: var(--_transition-duration-extra-long1);
61
+ }
62
+ .transition-duration-extra-long2 {
63
+ transition-duration: var(--_transition-duration-extra-long2);
64
+ }
65
+ .transition-duration-extra-long3 {
66
+ transition-duration: var(--_transition-duration-extra-long3);
67
+ }
68
+ .transition-duration-extra-long4 {
69
+ transition-duration: var(--_transition-duration-extra-long4);
70
+ }
71
+ }
72
+
73
+ @layer material-design-system.motion.transition.easing {
74
+ :root {
75
+ --_transition-emphasized: var(--md-sys-motion-easing-emphasized ,cubic-bezier(0.2, 0.0, 0, 1.0));
76
+ --_transition-emphasized-decelerate: var(--md-sys-motion-easing-emphasized-decelerate ,cubic-bezier(0.05, 0.7, 0.1, 1.0));
77
+ --_transition-emphasized-accelerate: var(--md-sys-motion-easing-emphasized-accelerate ,cubic-bezier(0.3, 0.0, 0.8, 0.15));
78
+ --_transition-standard: var(--md-sys-motion-easing-standard ,cubic-bezier(0.2, 0.0, 0, 1.0));
79
+ --_transition-standard-decelerate: var(--md-sys-motion-easing-standard-decelerate ,cubic-bezier(0, 0, 0, 1));
80
+ --_transition-standard-accelerate: var(--md-sys-motion-easing-standard-accelerate ,cubic-bezier(0.3, 0, 1, 1));
81
+ }
82
+ }
83
+
84
+ @layer material-design-system.motion.transition.easing {
85
+ .transition-easing-emphasized {
86
+ transition-timing-function: var(--_transition-emphasized);
87
+ }
88
+ .transition-easing-emphasized-decelerate {
89
+ transition-timing-function: var(--_transition-emphasized-decelerate);
90
+ }
91
+ .transition-easing-emphasized-accelerate {
92
+ transition-timing-function: var(--_transition-emphasized-accelerate);
93
+ }
94
+ .transition-easing-standard {
95
+ transition-timing-function: var(--_transition-standard);
96
+ }
97
+ .transition-easing-standard-decelerate {
98
+ transition-timing-function: var(--_transition-standard-decelerate);
99
+ }
100
+ .transition-easing-standard-accelerate {
101
+ transition-timing-function: var(--_transition-standard-accelerate);
102
+ }
103
+ }
104
+
105
+ @layer material-design-system.motion.transition.springs {
106
+ :root {
107
+ --_transition-easing-expressive-fast-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.90);
108
+ --_transition-easing-expressive-default-spatial: cubic-bezier(0.38, 1.21, 0.22, 1.00);
109
+ --_transition-easing-expressive-slow-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);
110
+ --_transition-easing-expressive-fast-effects: cubic-bezier(0.31, 0.94, 0.34, 1.00);
111
+ --_transition-easing-expressive-default-effects: cubic-bezier(0.34, 0.80, 0.34, 1.00);
112
+ --_transition-easing-expressive-slow-effects: cubic-bezier(0.34, 0.88, 0.34, 1.00);
113
+ --_transition-easing-standard-fast-spatial: cubic-bezier(0.27, 1.06, 0.18, 1.00);
114
+ --_transition-easing-standard-default-spatial: cubic-bezier(0.27, 1.06, 0.18, 1.00);
115
+ --_transition-easing-standard-slow-spatial: cubic-bezier(0.27, 1.06, 0.18, 1.00);
116
+ --_transition-easing-standard-fast-effects: cubic-bezier(0.31, 0.94, 0.34, 1.00);
117
+ --_transition-easing-standard-default-effects: cubic-bezier(0.34, 0.80, 0.34, 1.00);
118
+ --_transition-easing-standard-slow-effects: cubic-bezier(0.34, 0.88, 0.34, 1.00);
119
+ --_transition-duration-expressive-fast-spatial: 350ms;
120
+ --_transition-duration-expressive-default-spatial: 500ms;
121
+ --_transition-duration-expressive-slow-spatial: 650ms;
122
+ --_transition-duration-expressive-fast-effects: 150ms;
123
+ --_transition-duration-expressive-default-effects: 200ms;
124
+ --_transition-duration-expressive-slow-effects: 300ms;
125
+ --_transition-duration-standard-fast-spatial: 350ms;
126
+ --_transition-duration-standard-default-spatial: 500ms;
127
+ --_transition-duration-standard-slow-spatial: 750ms;
128
+ --_transition-duration-standard-fast-effects: 150ms;
129
+ --_transition-duration-standard-default-effects: 200ms;
130
+ --_transition-duration-standard-slow-effects: 300ms;
131
+ }
132
+ }
133
+
134
+ @layer material-design-system.motion.transition.springs.easing {
135
+ .transition-easing-expressive-fast-spatial {
136
+ transition-timing-function: var(--_transition-easing-expressive-fast-spatial);
137
+ }
138
+ .transition-easing-expressive-default-spatial {
139
+ transition-timing-function: var(--_transition-easing-expressive-default-spatial);
140
+ }
141
+ .transition-easing-expressive-slow-spatial {
142
+ transition-timing-function: var(--_transition-easing-expressive-slow-spatial);
143
+ }
144
+ .transition-easing-expressive-fast-effects {
145
+ transition-timing-function: var(--_transition-easing-expressive-fast-effects);
146
+ }
147
+ .transition-easing-expressive-default-effects {
148
+ transition-timing-function: var(--_transition-easing-expressive-default-effects);
149
+ }
150
+ .transition-easing-expressive-slow-effects {
151
+ transition-timing-function: var(--_transition-easing-expressive-slow-effects);
152
+ }
153
+ .transition-easing-standard-fast-spatial {
154
+ transition-timing-function: var(--_transition-easing-standard-fast-spatial);
155
+ }
156
+ .transition-easing-standard-default-spatial {
157
+ transition-timing-function: var(--_transition-easing-standard-default-spatial);
158
+ }
159
+ .transition-easing-standard-slow-spatial {
160
+ transition-timing-function: var(--_transition-easing-standard-slow-spatial);
161
+ }
162
+ .transition-easing-standard-fast-effects {
163
+ transition-timing-function: var(--_transition-easing-standard-fast-effects);
164
+ }
165
+ .transition-easing-standard-default-effects {
166
+ transition-timing-function: var(--_transition-easing-standard-default-effects);
167
+ }
168
+ .transition-easing-standard-slow-effects {
169
+ transition-timing-function: var(--_transition-easing-standard-slow-effects);
170
+ }
171
+ }
172
+
173
+ @layer material-design-system.motion.transition.springs.duration {
174
+ .transition-duration-expressive-fast-spatial {
175
+ transition-duration: var(--_transition-duration-expressive-fast-spatial);
176
+ }
177
+ .transition-duration-expressive-default-spatial {
178
+ transition-duration: var(--_transition-duration-expressive-default-spatial);
179
+ }
180
+ .transition-duration-expressive-slow-spatial {
181
+ transition-duration: var(--_transition-duration-expressive-slow-spatial);
182
+ }
183
+ .transition-duration-expressive-fast-effects {
184
+ transition-duration: var(--_transition-duration-expressive-fast-effects);
185
+ }
186
+ .transition-duration-expressive-default-effects {
187
+ transition-duration: var(--_transition-duration-expressive-default-effects);
188
+ }
189
+ .transition-duration-expressive-slow-effects {
190
+ transition-duration: var(--_transition-duration-expressive-slow-effects);
191
+ }
192
+ .transition-duration-standard-fast-spatial {
193
+ transition-duration: var(--_transition-duration-standard-fast-spatial);
194
+ }
195
+ .transition-duration-standard-default-spatial {
196
+ transition-duration: var(--_transition-duration-standard-default-spatial);
197
+ }
198
+ .transition-duration-standard-slow-spatial {
199
+ transition-duration: var(--_transition-duration-standard-slow-spatial);
200
+ }
201
+ .transition-duration-standard-fast-effects {
202
+ transition-duration: var(--_transition-duration-standard-fast-effects);
203
+ }
204
+ .transition-duration-standard-default-effects {
205
+ transition-duration: var(--_transition-duration-standard-default-effects);
206
+ }
207
+ .transition-duration-standard-slow-effects {
208
+ transition-duration: var(--_transition-duration-standard-slow-effects);
209
+ }
210
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sandlada/material-design-css",
3
- "version": "1.1.0",
3
+ "version": "2.0.0-nightly.20250809a",
4
4
  "description": "A ready-made npm package for a collection of css styles in the material design style.",
5
5
  "license": "MIT",
6
6
  "author": "Sandlada & Kai-Orion",
@@ -11,19 +11,36 @@
11
11
  },
12
12
  "bugs": "https://github.com/sandlada/material-design-css/issues",
13
13
  "homepage": "https://material-design-css.sandlada.com",
14
- "publishConfig": {
15
- "access": "public"
16
- },
14
+
15
+ "keywords": [
16
+ "material-design",
17
+ "css-library",
18
+ "material-tokens",
19
+ "material-design-tokens",
20
+ "shape",
21
+ "motion",
22
+ "typography",
23
+ "color",
24
+ "palette"
25
+ ],
17
26
  "exports": {
18
27
  ".": {
19
28
  "style": "./index.css"
20
29
  },
21
30
  "./index.css": "./index.css",
22
31
  "./index": "./index.css",
23
- "./color.css": "./color.css",
24
- "./color": "./color.css",
25
- "./motion.css": "./motion.css",
26
- "./motion": "./motion.css",
32
+ "./preset.css": "./preset.css",
33
+ "./preset": "./preset.css",
34
+ "./color/bg-utilities.css": "./color/bg-utilities.css",
35
+ "./color/bg-utilities": "./color/bg-utilities.css",
36
+ "./color/text-utilities.css": "./color/text-utilities.css",
37
+ "./color/text-utilities": "./color/text-utilities.css",
38
+ "./color/classic-utilities.css": "./color/classic-utilities.css",
39
+ "./color/classic-utilities": "./color/classic-utilities.css",
40
+ "./motion/transition-utilities.css": "./motion/transition-utilities.css",
41
+ "./motion/transition-utilities": "./motion/transition-utilities.css",
42
+ "./motion/animation-utilities.css": "./motion/animation-utilities.css",
43
+ "./motion/animation-utilities": "./motion/animation-utilities.css",
27
44
  "./shape.css": "./shape.css",
28
45
  "./shape": "./shape.css",
29
46
  "./typography.css": "./typography.css",
@@ -32,6 +49,8 @@
32
49
  "./prebuild-color-blue": "./prebuild-color-blue.css",
33
50
  "./prebuild-color-green.css": "./prebuild-color-green.css",
34
51
  "./prebuild-color-green": "./prebuild-color-green.css",
52
+ "./prebuild-color-light-green.css": "./prebuild-color-light-green.css",
53
+ "./prebuild-color-light-green": "./prebuild-color-light-green.css",
35
54
  "./prebuild-color-pink.css": "./prebuild-color-pink.css",
36
55
  "./prebuild-color-pink": "./prebuild-color-pink.css",
37
56
  "./prebuild-color-yellow.css": "./prebuild-color-yellow.css",
@@ -40,12 +59,17 @@
40
59
  "style": "index.css",
41
60
  "files": [
42
61
  "index.css",
43
- "color.css",
44
- "motion.css",
62
+ "preset.css",
63
+ "color/bg-utilities.css",
64
+ "color/text-utilities.css",
65
+ "color/classic-utilities.css",
66
+ "motion/transition-utilities.css",
67
+ "motion/animation-utilities.css",
45
68
  "shape.css",
46
69
  "typography.css",
47
70
  "prebuild-color-blue.css",
48
71
  "prebuild-color-green.css",
72
+ "prebuild-color-light-green.css",
49
73
  "prebuild-color-pink.css",
50
74
  "prebuild-color-yellow.css"
51
75
  ]
package/preset.css ADDED
@@ -0,0 +1,9 @@
1
+ @layer material-design-system.preset {
2
+ :root:not([dark]) {
3
+ color-scheme: light;
4
+ }
5
+
6
+ :root[dark] {
7
+ color-scheme: dark;
8
+ }
9
+ }
package/shape.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer material-design-system.shape.corner.variable {
1
+ @layer material-design-system.shape.corner {
2
2
  :root {
3
3
  --_none: var(--md-sys-shape-corner-value-none, 0px);
4
4
  --_extra-small: var(--md-sys-shape-corner-value-extra-small, 4px);
package/typography.css CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- @layer material-design-system.typography.variable {
2
+ @layer material-design-system.typography {
3
3
  :root {
4
4
 
5
5
  --_display-large-font: var(--md-sys-typescale-display-large-font, var(--md-ref-typeface-brand, "Roboto"));