@sandlada/material-design-css 2.2.0-20250902.a → 2.3.0-20250927.a

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 (11) hide show
  1. package/README.md +3 -3
  2. package/color/bg-utilities.css +1 -1
  3. package/color/text-utilities.css +1 -1
  4. package/motion/animation-utilities.css +54 -63
  5. package/motion/tailwind-theme.css +12 -12
  6. package/motion/transition-utilities.css +54 -63
  7. package/package.json +1 -1
  8. package/shape/shape-utilities.css +82 -82
  9. package/typography/tailwind-theme.css +1 -1
  10. package/typography/typography-utilities.css +1 -1
  11. package/color/classic-utilities.css +0 -258
package/README.md CHANGED
@@ -46,10 +46,10 @@ import '@sandlada/material-design-css/palette/text-utilities.css'
46
46
  import '@sandlada/material-design-css/palette/bg-utilities.css'
47
47
 
48
48
  // display-large
49
- import '@sandlada/material-design-css/typography/typography.css'
49
+ import '@sandlada/material-design-css/typography/typography-utilities.css'
50
50
 
51
- // shape-medium
52
- import '@sandlada/material-design-css/shape/shape.css'
51
+ // rounded-medium
52
+ import '@sandlada/material-design-css/shape/shape-utilities.css'
53
53
 
54
54
  // animation-easing-expressive-fast-spatial
55
55
  import '@sandlada/material-design-css/motion/animation-utilities.css'
package/color/bg-utilities.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer material-design-system.color {
1
+ @layer material-design-system.variable.bg-color {
2
2
  :root {
3
3
  --_bg-color-primary-palette-key-color : var(--md-sys-color-primary-palette-key-color, light-dark(#578400, #578400));
4
4
  --_bg-color-secondary-palette-key-color : var(--md-sys-color-secondary-palette-key-color, light-dark(#697e4a, #697e4a));
package/color/text-utilities.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer material-design-system.color {
1
+ @layer material-design-system.variable.text-color {
2
2
  :root {
3
3
  --_text-color-primary-palette-key-color : var(--md-sys-color-primary-palette-key-color, light-dark(#578400, #578400));
4
4
  --_text-color-secondary-palette-key-color : var(--md-sys-color-secondary-palette-key-color, light-dark(#697e4a, #697e4a));
package/motion/animation-utilities.css CHANGED
@@ -1,21 +1,52 @@
1
- @layer material-design-system.motion.animation.duration {
1
+ @layer material-design-system.variable.motion {
2
2
  :root {
3
- --_animation-duration-short1 : var(--md-sys-motion-duration-short1, 50ms);
4
- --_animation-duration-short2 : var(--md-sys-motion-duration-short2, 100ms);
5
- --_animation-duration-short3 : var(--md-sys-motion-duration-short3, 150ms);
6
- --_animation-duration-short4 : var(--md-sys-motion-duration-short4, 200ms);
7
- --_animation-duration-medium1 : var(--md-sys-motion-duration-medium1, 250ms);
8
- --_animation-duration-medium2 : var(--md-sys-motion-duration-medium2, 300ms);
9
- --_animation-duration-medium3 : var(--md-sys-motion-duration-medium3, 350ms);
10
- --_animation-duration-medium4 : var(--md-sys-motion-duration-medium4, 400ms);
11
- --_animation-duration-long1 : var(--md-sys-motion-duration-long1, 450ms);
12
- --_animation-duration-long2 : var(--md-sys-motion-duration-long2, 500ms);
13
- --_animation-duration-long3 : var(--md-sys-motion-duration-long3, 550ms);
14
- --_animation-duration-long4 : var(--md-sys-motion-duration-long4, 600ms);
15
- --_animation-duration-extra-long1: var(--md-sys-motion-duration-extra-long1, 700ms);
16
- --_animation-duration-extra-long2: var(--md-sys-motion-duration-extra-long2, 800ms);
17
- --_animation-duration-extra-long3: var(--md-sys-motion-duration-extra-long3, 900ms);
18
- --_animation-duration-extra-long4: var(--md-sys-motion-duration-extra-long4, 1000ms);
3
+ --_animation-easing-emphasized : var(--md-sys-motion-easing-emphasized ,cubic-bezier(0.2, 0.0, 0, 1.0));
4
+ --_animation-easing-emphasized-decelerate : var(--md-sys-motion-easing-emphasized-decelerate ,cubic-bezier(0.05, 0.7, 0.1, 1.0));
5
+ --_animation-easing-emphasized-accelerate : var(--md-sys-motion-easing-emphasized-accelerate ,cubic-bezier(0.3, 0.0, 0.8, 0.15));
6
+ --_animation-easing-standard : var(--md-sys-motion-easing-standard ,cubic-bezier(0.2, 0.0, 0, 1.0));
7
+ --_animation-easing-standard-decelerate : var(--md-sys-motion-easing-standard-decelerate ,cubic-bezier(0, 0, 0, 1));
8
+ --_animation-easing-standard-accelerate : var(--md-sys-motion-easing-standard-accelerate ,cubic-bezier(0.3, 0, 1, 1));
9
+ --_animation-easing-expressive-fast-spatial : var(--md-sys-motion-easing-expressive-fast-spatial, cubic-bezier(0.42, 1.67, 0.21, 0.90));
10
+ --_animation-easing-expressive-default-spatial: var(--md-sys-motion-easing-expressive-default-spatial, cubic-bezier(0.38, 1.21, 0.22, 1.00));
11
+ --_animation-easing-expressive-slow-spatial : var(--md-sys-motion-easing-expressive-slow-spatial, cubic-bezier(0.39, 1.29, 0.35, 0.98));
12
+ --_animation-easing-expressive-fast-effects : var(--md-sys-motion-easing-expressive-fast-effects, cubic-bezier(0.31, 0.94, 0.34, 1.00));
13
+ --_animation-easing-expressive-default-effects: var(--md-sys-motion-easing-expressive-default-effects, cubic-bezier(0.34, 0.80, 0.34, 1.00));
14
+ --_animation-easing-expressive-slow-effects : var(--md-sys-motion-easing-expressive-slow-effects, cubic-bezier(0.34, 0.88, 0.34, 1.00));
15
+ --_animation-easing-standard-fast-spatial : var(--md-sys-motion-easing-standard-fast-spatial, cubic-bezier(0.27, 1.06, 0.18, 1.00));
16
+ --_animation-easing-standard-default-spatial : var(--md-sys-motion-easing-standard-default-spatial, cubic-bezier(0.27, 1.06, 0.18, 1.00));
17
+ --_animation-easing-standard-slow-spatial : var(--md-sys-motion-easing-standard-slow-spatial, cubic-bezier(0.27, 1.06, 0.18, 1.00));
18
+ --_animation-easing-standard-fast-effects : var(--md-sys-motion-easing-standard-fast-effects, cubic-bezier(0.31, 0.94, 0.34, 1.00));
19
+ --_animation-easing-standard-default-effects : var(--md-sys-motion-easing-standard-default-effects, cubic-bezier(0.34, 0.80, 0.34, 1.00));
20
+ --_animation-easing-standard-slow-effects : var(--md-sys-motion-easing-standard-slow-effects, cubic-bezier(0.34, 0.88, 0.34, 1.00));
21
+
22
+ --_animation-duration-short1 : var(--md-sys-motion-duration-short1, 50ms);
23
+ --_animation-duration-short2 : var(--md-sys-motion-duration-short2, 100ms);
24
+ --_animation-duration-short3 : var(--md-sys-motion-duration-short3, 150ms);
25
+ --_animation-duration-short4 : var(--md-sys-motion-duration-short4, 200ms);
26
+ --_animation-duration-medium1 : var(--md-sys-motion-duration-medium1, 250ms);
27
+ --_animation-duration-medium2 : var(--md-sys-motion-duration-medium2, 300ms);
28
+ --_animation-duration-medium3 : var(--md-sys-motion-duration-medium3, 350ms);
29
+ --_animation-duration-medium4 : var(--md-sys-motion-duration-medium4, 400ms);
30
+ --_animation-duration-long1 : var(--md-sys-motion-duration-long1, 450ms);
31
+ --_animation-duration-long2 : var(--md-sys-motion-duration-long2, 500ms);
32
+ --_animation-duration-long3 : var(--md-sys-motion-duration-long3, 550ms);
33
+ --_animation-duration-long4 : var(--md-sys-motion-duration-long4, 600ms);
34
+ --_animation-duration-extra-long1 : var(--md-sys-motion-duration-extra-long1, 700ms);
35
+ --_animation-duration-extra-long2 : var(--md-sys-motion-duration-extra-long2, 800ms);
36
+ --_animation-duration-extra-long3 : var(--md-sys-motion-duration-extra-long3, 900ms);
37
+ --_animation-duration-extra-long4 : var(--md-sys-motion-duration-extra-long4, 1000ms);
38
+ --_animation-duration-expressive-fast-spatial : var(--md-sys-motion-duration-expressive-fast-spatial, 350ms);
39
+ --_animation-duration-expressive-default-spatial: var(--md-sys-motion-duration-expressive-default-spatial, 500ms);
40
+ --_animation-duration-expressive-slow-spatial : var(--md-sys-motion-duration-expressive-slow-spatial, 650ms);
41
+ --_animation-duration-expressive-fast-effects : var(--md-sys-motion-duration-expressive-fast-effects, 150ms);
42
+ --_animation-duration-expressive-default-effects: var(--md-sys-motion-duration-expressive-default-effects, 200ms);
43
+ --_animation-duration-expressive-slow-effects : var(--md-sys-motion-duration-expressive-slow-effects, 300ms);
44
+ --_animation-duration-standard-fast-spatial : var(--md-sys-motion-duration-standard-fast-spatial, 350ms);
45
+ --_animation-duration-standard-default-spatial : var(--md-sys-motion-duration-standard-default-spatial, 500ms);
46
+ --_animation-duration-standard-slow-spatial : var(--md-sys-motion-duration-standard-slow-spatial, 750ms);
47
+ --_animation-duration-standard-fast-effects : var(--md-sys-motion-duration-standard-fast-effects, 150ms);
48
+ --_animation-duration-standard-default-effects : var(--md-sys-motion-duration-standard-default-effects, 200ms);
49
+ --_animation-duration-standard-slow-effects : var(--md-sys-motion-duration-standard-slow-effects, 300ms);
19
50
  }
20
51
  }
21
52
 
@@ -70,64 +101,24 @@
70
101
  }
71
102
  }
72
103
 
73
- @layer material-design-system.motion.animation.easing {
74
- :root {
75
- --_animation-emphasized: var(--md-sys-motion-easing-emphasized ,cubic-bezier(0.2, 0.0, 0, 1.0));
76
- --_animation-emphasized-decelerate: var(--md-sys-motion-easing-emphasized-decelerate ,cubic-bezier(0.05, 0.7, 0.1, 1.0));
77
- --_animation-emphasized-accelerate: var(--md-sys-motion-easing-emphasized-accelerate ,cubic-bezier(0.3, 0.0, 0.8, 0.15));
78
- --_animation-standard: var(--md-sys-motion-easing-standard ,cubic-bezier(0.2, 0.0, 0, 1.0));
79
- --_animation-standard-decelerate: var(--md-sys-motion-easing-standard-decelerate ,cubic-bezier(0, 0, 0, 1));
80
- --_animation-standard-accelerate: var(--md-sys-motion-easing-standard-accelerate ,cubic-bezier(0.3, 0, 1, 1));
81
- }
82
- }
83
-
84
104
  @layer material-design-system.motion.animation.easing {
85
105
  .animation-easing-emphasized {
86
- animation-timing-function: var(--_animation-emphasized);
106
+ animation-timing-function: var(--_animation-easing-emphasized);
87
107
  }
88
108
  .animation-easing-emphasized-decelerate {
89
- animation-timing-function: var(--_animation-emphasized-decelerate);
109
+ animation-timing-function: var(--_animation-easing-emphasized-decelerate);
90
110
  }
91
111
  .animation-easing-emphasized-accelerate {
92
- animation-timing-function: var(--_animation-emphasized-accelerate);
112
+ animation-timing-function: var(--_animation-easing-emphasized-accelerate);
93
113
  }
94
114
  .animation-easing-standard {
95
- animation-timing-function: var(--_animation-standard);
115
+ animation-timing-function: var(--_animation-easing-standard);
96
116
  }
97
117
  .animation-easing-standard-decelerate {
98
- animation-timing-function: var(--_animation-standard-decelerate);
118
+ animation-timing-function: var(--_animation-easing-standard-decelerate);
99
119
  }
100
120
  .animation-easing-standard-accelerate {
101
- animation-timing-function: var(--_animation-standard-accelerate);
102
- }
103
- }
104
-
105
- @layer material-design-system.motion.animation.springs {
106
- :root {
107
- --_animation-easing-expressive-fast-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.90);
108
- --_animation-easing-expressive-default-spatial: cubic-bezier(0.38, 1.21, 0.22, 1.00);
109
- --_animation-easing-expressive-slow-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);
110
- --_animation-easing-expressive-fast-effects: cubic-bezier(0.31, 0.94, 0.34, 1.00);
111
- --_animation-easing-expressive-default-effects: cubic-bezier(0.34, 0.80, 0.34, 1.00);
112
- --_animation-easing-expressive-slow-effects: cubic-bezier(0.34, 0.88, 0.34, 1.00);
113
- --_animation-easing-standard-fast-spatial: cubic-bezier(0.27, 1.06, 0.18, 1.00);
114
- --_animation-easing-standard-default-spatial: cubic-bezier(0.27, 1.06, 0.18, 1.00);
115
- --_animation-easing-standard-slow-spatial: cubic-bezier(0.27, 1.06, 0.18, 1.00);
116
- --_animation-easing-standard-fast-effects: cubic-bezier(0.31, 0.94, 0.34, 1.00);
117
- --_animation-easing-standard-default-effects: cubic-bezier(0.34, 0.80, 0.34, 1.00);
118
- --_animation-easing-standard-slow-effects: cubic-bezier(0.34, 0.88, 0.34, 1.00);
119
- --_animation-duration-expressive-fast-spatial: 350ms;
120
- --_animation-duration-expressive-default-spatial: 500ms;
121
- --_animation-duration-expressive-slow-spatial: 650ms;
122
- --_animation-duration-expressive-fast-effects: 150ms;
123
- --_animation-duration-expressive-default-effects: 200ms;
124
- --_animation-duration-expressive-slow-effects: 300ms;
125
- --_animation-duration-standard-fast-spatial: 350ms;
126
- --_animation-duration-standard-default-spatial: 500ms;
127
- --_animation-duration-standard-slow-spatial: 750ms;
128
- --_animation-duration-standard-fast-effects: 150ms;
129
- --_animation-duration-standard-default-effects: 200ms;
130
- --_animation-duration-standard-slow-effects: 300ms;
121
+ animation-timing-function: var(--_animation-easing-standard-accelerate);
131
122
  }
132
123
  }
133
124
 
package/motion/tailwind-theme.css CHANGED
@@ -5,18 +5,18 @@
5
5
  --ease-standard : var(--md-sys-motion-easing-standard ,cubic-bezier(0.2, 0.0, 0, 1.0));
6
6
  --ease-standard-decelerate : var(--md-sys-motion-easing-standard-decelerate ,cubic-bezier(0, 0, 0, 1));
7
7
  --ease-standard-accelerate : var(--md-sys-motion-easing-standard-accelerate ,cubic-bezier(0.3, 0, 1, 1));
8
- --easing-expressive-fast-spatial : var(--md-sys-motion-easing-expressive-fast-spatial, cubic-bezier(0.42, 1.67, 0.21, 0.90));
9
- --easing-expressive-default-spatial: var(--md-sys-motion-easing-expressive-default-spatial, cubic-bezier(0.38, 1.21, 0.22, 1.00));
10
- --easing-expressive-slow-spatial : var(--md-sys-motion-easing-expressive-slow-spatial, cubic-bezier(0.39, 1.29, 0.35, 0.98));
11
- --easing-expressive-fast-effects : var(--md-sys-motion-easing-expressive-fast-effects, cubic-bezier(0.31, 0.94, 0.34, 1.00));
12
- --easing-expressive-default-effects: var(--md-sys-motion-easing-expressive-default-effects, cubic-bezier(0.34, 0.80, 0.34, 1.00));
13
- --easing-expressive-slow-effects : var(--md-sys-motion-easing-expressive-slow-effects, cubic-bezier(0.34, 0.88, 0.34, 1.00));
14
- --easing-standard-fast-spatial : var(--md-sys-motion-easing-standard-fast-spatial, cubic-bezier(0.27, 1.06, 0.18, 1.00));
15
- --easing-standard-default-spatial : var(--md-sys-motion-easing-standard-default-spatial, cubic-bezier(0.27, 1.06, 0.18, 1.00));
16
- --easing-standard-slow-spatial : var(--md-sys-motion-easing-standard-slow-spatial, cubic-bezier(0.27, 1.06, 0.18, 1.00));
17
- --easing-standard-fast-effects : var(--md-sys-motion-easing-standard-fast-effects, cubic-bezier(0.31, 0.94, 0.34, 1.00));
18
- --easing-standard-default-effects : var(--md-sys-motion-easing-standard-default-effects, cubic-bezier(0.34, 0.80, 0.34, 1.00));
19
- --easing-standard-slow-effects : var(--md-sys-motion-easing-standard-slow-effects, cubic-bezier(0.34, 0.88, 0.34, 1.00));
8
+ --ease-expressive-fast-spatial : var(--md-sys-motion-easing-expressive-fast-spatial, cubic-bezier(0.42, 1.67, 0.21, 0.90));
9
+ --ease-expressive-default-spatial: var(--md-sys-motion-easing-expressive-default-spatial, cubic-bezier(0.38, 1.21, 0.22, 1.00));
10
+ --ease-expressive-slow-spatial : var(--md-sys-motion-easing-expressive-slow-spatial, cubic-bezier(0.39, 1.29, 0.35, 0.98));
11
+ --ease-expressive-fast-effects : var(--md-sys-motion-easing-expressive-fast-effects, cubic-bezier(0.31, 0.94, 0.34, 1.00));
12
+ --ease-expressive-default-effects: var(--md-sys-motion-easing-expressive-default-effects, cubic-bezier(0.34, 0.80, 0.34, 1.00));
13
+ --ease-expressive-slow-effects : var(--md-sys-motion-easing-expressive-slow-effects, cubic-bezier(0.34, 0.88, 0.34, 1.00));
14
+ --ease-standard-fast-spatial : var(--md-sys-motion-easing-standard-fast-spatial, cubic-bezier(0.27, 1.06, 0.18, 1.00));
15
+ --ease-standard-default-spatial : var(--md-sys-motion-easing-standard-default-spatial, cubic-bezier(0.27, 1.06, 0.18, 1.00));
16
+ --ease-standard-slow-spatial : var(--md-sys-motion-easing-standard-slow-spatial, cubic-bezier(0.27, 1.06, 0.18, 1.00));
17
+ --ease-standard-fast-effects : var(--md-sys-motion-easing-standard-fast-effects, cubic-bezier(0.31, 0.94, 0.34, 1.00));
18
+ --ease-standard-default-effects : var(--md-sys-motion-easing-standard-default-effects, cubic-bezier(0.34, 0.80, 0.34, 1.00));
19
+ --ease-standard-slow-effects : var(--md-sys-motion-easing-standard-slow-effects, cubic-bezier(0.34, 0.88, 0.34, 1.00));
20
20
  }
21
21
 
22
22
  @theme static {
package/motion/transition-utilities.css CHANGED
@@ -1,21 +1,52 @@
1
- @layer material-design-system.motion.transition.duration {
1
+ @layer material-design-system.variable.motion {
2
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);
3
+ --_transition-easing-emphasized : var(--md-sys-motion-easing-emphasized ,cubic-bezier(0.2, 0.0, 0, 1.0));
4
+ --_transition-easing-emphasized-decelerate : var(--md-sys-motion-easing-emphasized-decelerate ,cubic-bezier(0.05, 0.7, 0.1, 1.0));
5
+ --_transition-easing-emphasized-accelerate : var(--md-sys-motion-easing-emphasized-accelerate ,cubic-bezier(0.3, 0.0, 0.8, 0.15));
6
+ --_transition-easing-standard : var(--md-sys-motion-easing-standard ,cubic-bezier(0.2, 0.0, 0, 1.0));
7
+ --_transition-easing-standard-decelerate : var(--md-sys-motion-easing-standard-decelerate ,cubic-bezier(0, 0, 0, 1));
8
+ --_transition-easing-standard-accelerate : var(--md-sys-motion-easing-standard-accelerate ,cubic-bezier(0.3, 0, 1, 1));
9
+ --_transition-easing-expressive-fast-spatial : var(--md-sys-motion-easing-expressive-fast-spatial, cubic-bezier(0.42, 1.67, 0.21, 0.90));
10
+ --_transition-easing-expressive-default-spatial: var(--md-sys-motion-easing-expressive-default-spatial, cubic-bezier(0.38, 1.21, 0.22, 1.00));
11
+ --_transition-easing-expressive-slow-spatial : var(--md-sys-motion-easing-expressive-slow-spatial, cubic-bezier(0.39, 1.29, 0.35, 0.98));
12
+ --_transition-easing-expressive-fast-effects : var(--md-sys-motion-easing-expressive-fast-effects, cubic-bezier(0.31, 0.94, 0.34, 1.00));
13
+ --_transition-easing-expressive-default-effects: var(--md-sys-motion-easing-expressive-default-effects, cubic-bezier(0.34, 0.80, 0.34, 1.00));
14
+ --_transition-easing-expressive-slow-effects : var(--md-sys-motion-easing-expressive-slow-effects, cubic-bezier(0.34, 0.88, 0.34, 1.00));
15
+ --_transition-easing-standard-fast-spatial : var(--md-sys-motion-easing-standard-fast-spatial, cubic-bezier(0.27, 1.06, 0.18, 1.00));
16
+ --_transition-easing-standard-default-spatial : var(--md-sys-motion-easing-standard-default-spatial, cubic-bezier(0.27, 1.06, 0.18, 1.00));
17
+ --_transition-easing-standard-slow-spatial : var(--md-sys-motion-easing-standard-slow-spatial, cubic-bezier(0.27, 1.06, 0.18, 1.00));
18
+ --_transition-easing-standard-fast-effects : var(--md-sys-motion-easing-standard-fast-effects, cubic-bezier(0.31, 0.94, 0.34, 1.00));
19
+ --_transition-easing-standard-default-effects : var(--md-sys-motion-easing-standard-default-effects, cubic-bezier(0.34, 0.80, 0.34, 1.00));
20
+ --_transition-easing-standard-slow-effects : var(--md-sys-motion-easing-standard-slow-effects, cubic-bezier(0.34, 0.88, 0.34, 1.00));
21
+
22
+ --_transition-duration-short1 : var(--md-sys-motion-duration-short1, 50ms);
23
+ --_transition-duration-short2 : var(--md-sys-motion-duration-short2, 100ms);
24
+ --_transition-duration-short3 : var(--md-sys-motion-duration-short3, 150ms);
25
+ --_transition-duration-short4 : var(--md-sys-motion-duration-short4, 200ms);
26
+ --_transition-duration-medium1 : var(--md-sys-motion-duration-medium1, 250ms);
27
+ --_transition-duration-medium2 : var(--md-sys-motion-duration-medium2, 300ms);
28
+ --_transition-duration-medium3 : var(--md-sys-motion-duration-medium3, 350ms);
29
+ --_transition-duration-medium4 : var(--md-sys-motion-duration-medium4, 400ms);
30
+ --_transition-duration-long1 : var(--md-sys-motion-duration-long1, 450ms);
31
+ --_transition-duration-long2 : var(--md-sys-motion-duration-long2, 500ms);
32
+ --_transition-duration-long3 : var(--md-sys-motion-duration-long3, 550ms);
33
+ --_transition-duration-long4 : var(--md-sys-motion-duration-long4, 600ms);
34
+ --_transition-duration-extra-long1 : var(--md-sys-motion-duration-extra-long1, 700ms);
35
+ --_transition-duration-extra-long2 : var(--md-sys-motion-duration-extra-long2, 800ms);
36
+ --_transition-duration-extra-long3 : var(--md-sys-motion-duration-extra-long3, 900ms);
37
+ --_transition-duration-extra-long4 : var(--md-sys-motion-duration-extra-long4, 1000ms);
38
+ --_transition-duration-expressive-fast-spatial : var(--md-sys-motion-duration-expressive-fast-spatial, 350ms);
39
+ --_transition-duration-expressive-default-spatial: var(--md-sys-motion-duration-expressive-default-spatial, 500ms);
40
+ --_transition-duration-expressive-slow-spatial : var(--md-sys-motion-duration-expressive-slow-spatial, 650ms);
41
+ --_transition-duration-expressive-fast-effects : var(--md-sys-motion-duration-expressive-fast-effects, 150ms);
42
+ --_transition-duration-expressive-default-effects: var(--md-sys-motion-duration-expressive-default-effects, 200ms);
43
+ --_transition-duration-expressive-slow-effects : var(--md-sys-motion-duration-expressive-slow-effects, 300ms);
44
+ --_transition-duration-standard-fast-spatial : var(--md-sys-motion-duration-standard-fast-spatial, 350ms);
45
+ --_transition-duration-standard-default-spatial : var(--md-sys-motion-duration-standard-default-spatial, 500ms);
46
+ --_transition-duration-standard-slow-spatial : var(--md-sys-motion-duration-standard-slow-spatial, 750ms);
47
+ --_transition-duration-standard-fast-effects : var(--md-sys-motion-duration-standard-fast-effects, 150ms);
48
+ --_transition-duration-standard-default-effects : var(--md-sys-motion-duration-standard-default-effects, 200ms);
49
+ --_transition-duration-standard-slow-effects : var(--md-sys-motion-duration-standard-slow-effects, 300ms);
19
50
  }
20
51
  }
21
52
 
@@ -70,64 +101,24 @@
70
101
  }
71
102
  }
72
103
 
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
104
  @layer material-design-system.motion.transition.easing {
85
105
  .transition-easing-emphasized {
86
- transition-timing-function: var(--_transition-emphasized);
106
+ transition-timing-function: var(--_transition-easing-emphasized);
87
107
  }
88
108
  .transition-easing-emphasized-decelerate {
89
- transition-timing-function: var(--_transition-emphasized-decelerate);
109
+ transition-timing-function: var(--_transition-easing-emphasized-decelerate);
90
110
  }
91
111
  .transition-easing-emphasized-accelerate {
92
- transition-timing-function: var(--_transition-emphasized-accelerate);
112
+ transition-timing-function: var(--_transition-easing-emphasized-accelerate);
93
113
  }
94
114
  .transition-easing-standard {
95
- transition-timing-function: var(--_transition-standard);
115
+ transition-timing-function: var(--_transition-easing-standard);
96
116
  }
97
117
  .transition-easing-standard-decelerate {
98
- transition-timing-function: var(--_transition-standard-decelerate);
118
+ transition-timing-function: var(--_transition-easing-standard-decelerate);
99
119
  }
100
120
  .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;
121
+ transition-timing-function: var(--_transition-easing-standard-accelerate);
131
122
  }
132
123
  }
133
124
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name" : "@sandlada/material-design-css",
3
- "version" : "2.2.0-20250902.a",
3
+ "version" : "2.3.0-20250927.a",
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",
package/shape/shape-utilities.css CHANGED
@@ -1,4 +1,4 @@
1
- @layer material-design-system.shape.corner {
1
+ @layer material-design-system.variable.shape {
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);
@@ -13,391 +13,391 @@
13
13
  }
14
14
 
15
15
  @layer material-design-system.shape.corner {
16
- .shape-none {
16
+ .rounded-none {
17
17
  border-start-start-radius: var(--_none);
18
18
  border-start-end-radius: var(--_none);
19
19
  border-end-start-radius: var(--_none);
20
20
  border-end-end-radius: var(--_none);
21
21
  }
22
22
 
23
- .shape-extra-small {
23
+ .rounded-extra-small {
24
24
  border-start-start-radius: var(--_extra-small);
25
25
  border-start-end-radius: var(--_extra-small);
26
26
  border-end-start-radius: var(--_extra-small);
27
27
  border-end-end-radius: var(--_extra-small);
28
28
  }
29
29
 
30
- .shape-small {
30
+ .rounded-small {
31
31
  border-start-start-radius: var(--_small);
32
32
  border-start-end-radius: var(--_small);
33
33
  border-end-start-radius: var(--_small);
34
34
  border-end-end-radius: var(--_small);
35
35
  }
36
36
 
37
- .shape-medium {
37
+ .rounded-medium {
38
38
  border-start-start-radius: var(--_medium);
39
39
  border-start-end-radius: var(--_medium);
40
40
  border-end-start-radius: var(--_medium);
41
41
  border-end-end-radius: var(--_medium);
42
42
  }
43
43
 
44
- .shape-large {
44
+ .rounded-large {
45
45
  border-start-start-radius: var(--_large);
46
46
  border-start-end-radius: var(--_large);
47
47
  border-end-start-radius: var(--_large);
48
48
  border-end-end-radius: var(--_large);
49
49
  }
50
50
 
51
- .shape-large-increased {
51
+ .rounded-large-increased {
52
52
  border-start-start-radius: var(--_large-increased);
53
53
  border-start-end-radius: var(--_large-increased);
54
54
  border-end-start-radius: var(--_large-increased);
55
55
  border-end-end-radius: var(--_large-increased);
56
56
  }
57
57
 
58
- .shape-extra-large {
58
+ .rounded-extra-large {
59
59
  border-start-start-radius: var(--_extra-large);
60
60
  border-start-end-radius: var(--_extra-large);
61
61
  border-end-start-radius: var(--_extra-large);
62
62
  border-end-end-radius: var(--_extra-large);
63
63
  }
64
64
 
65
- .shape-extra-large-increased {
65
+ .rounded-extra-large-increased {
66
66
  border-start-start-radius: var(--_extra-large-increased);
67
67
  border-start-end-radius: var(--_extra-large-increased);
68
68
  border-end-start-radius: var(--_extra-large-increased);
69
69
  border-end-end-radius: var(--_extra-large-increased);
70
70
  }
71
71
 
72
- .shape-extra-extra-large {
72
+ .rounded-extra-extra-large {
73
73
  border-start-start-radius: var(--_extra-extra-large);
74
74
  border-start-end-radius: var(--_extra-extra-large);
75
75
  border-end-start-radius: var(--_extra-extra-large);
76
76
  border-end-end-radius: var(--_extra-extra-large);
77
77
  }
78
78
 
79
- .shape-none-t {
79
+ .rounded-none-t {
80
80
  border-start-start-radius: var(--_none);
81
81
  border-start-end-radius: var(--_none);
82
82
  }
83
83
 
84
- .shape-none-r {
84
+ .rounded-none-r {
85
85
  border-start-end-radius: var(--_none);
86
86
  border-end-end-radius: var(--_none);
87
87
  }
88
88
 
89
- .shape-none-b {
89
+ .rounded-none-b {
90
90
  border-end-start-radius: var(--_none);
91
91
  border-end-end-radius: var(--_none);
92
92
  }
93
93
 
94
- .shape-none-l {
94
+ .rounded-none-l {
95
95
  border-start-start-radius: var(--_none);
96
96
  border-end-start-radius: var(--_none);
97
97
  }
98
98
 
99
- .shape-none-tl {
99
+ .rounded-none-tl {
100
100
  border-start-start-radius: var(--_none);
101
101
  }
102
102
 
103
- .shape-none-tr {
103
+ .rounded-none-tr {
104
104
  border-start-end-radius: var(--_none);
105
105
  }
106
106
 
107
- .shape-none-bl {
107
+ .rounded-none-bl {
108
108
  border-end-start-radius: var(--_none);
109
109
  }
110
110
 
111
- .shape-none-br {
111
+ .rounded-none-br {
112
112
  border-end-end-radius: var(--_none);
113
113
  }
114
114
 
115
115
 
116
- .shape-extra-small-t {
116
+ .rounded-extra-small-t {
117
117
  border-start-start-radius: var(--_extra-small);
118
118
  border-start-end-radius: var(--_extra-small);
119
119
  }
120
120
 
121
- .shape-extra-small-r {
121
+ .rounded-extra-small-r {
122
122
  border-start-end-radius: var(--_extra-small);
123
123
  border-end-end-radius: var(--_extra-small);
124
124
  }
125
125
 
126
- .shape-extra-small-b {
126
+ .rounded-extra-small-b {
127
127
  border-end-start-radius: var(--_extra-small);
128
128
  border-end-end-radius: var(--_extra-small);
129
129
  }
130
130
 
131
- .shape-extra-small-l {
131
+ .rounded-extra-small-l {
132
132
  border-start-start-radius: var(--_extra-small);
133
133
  border-end-start-radius: var(--_extra-small);
134
134
  }
135
135
 
136
- .shape-extra-small-tl {
136
+ .rounded-extra-small-tl {
137
137
  border-start-start-radius: var(--_extra-small);
138
138
  }
139
139
 
140
- .shape-extra-small-tr {
140
+ .rounded-extra-small-tr {
141
141
  border-start-end-radius: var(--_extra-small);
142
142
  }
143
143
 
144
- .shape-extra-small-bl {
144
+ .rounded-extra-small-bl {
145
145
  border-end-start-radius: var(--_extra-small);
146
146
  }
147
147
 
148
- .shape-extra-small-br {
148
+ .rounded-extra-small-br {
149
149
  border-end-end-radius: var(--_extra-small);
150
150
  }
151
151
 
152
- .shape-small-t {
152
+ .rounded-small-t {
153
153
  border-start-start-radius: var(--_small);
154
154
  border-start-end-radius: var(--_small);
155
155
  }
156
156
 
157
- .shape-small-r {
157
+ .rounded-small-r {
158
158
  border-start-end-radius: var(--_small);
159
159
  border-end-end-radius: var(--_small);
160
160
  }
161
161
 
162
- .shape-small-b {
162
+ .rounded-small-b {
163
163
  border-end-start-radius: var(--_small);
164
164
  border-end-end-radius: var(--_small);
165
165
  }
166
166
 
167
- .shape-small-l {
167
+ .rounded-small-l {
168
168
  border-start-start-radius: var(--_small);
169
169
  border-end-start-radius: var(--_small);
170
170
  }
171
171
 
172
- .shape-small-tl {
172
+ .rounded-small-tl {
173
173
  border-start-start-radius: var(--_small);
174
174
  }
175
175
 
176
- .shape-small-tr {
176
+ .rounded-small-tr {
177
177
  border-start-end-radius: var(--_small);
178
178
  }
179
179
 
180
- .shape-small-bl {
180
+ .rounded-small-bl {
181
181
  border-end-start-radius: var(--_small);
182
182
  }
183
183
 
184
- .shape-small-br {
184
+ .rounded-small-br {
185
185
  border-end-end-radius: var(--_small);
186
186
  }
187
187
 
188
- .shape-medium-t {
188
+ .rounded-medium-t {
189
189
  border-start-start-radius: var(--_medium);
190
190
  border-start-end-radius: var(--_medium);
191
191
  }
192
192
 
193
- .shape-medium-r {
193
+ .rounded-medium-r {
194
194
  border-start-end-radius: var(--_medium);
195
195
  border-end-end-radius: var(--_medium);
196
196
  }
197
197
 
198
- .shape-medium-b {
198
+ .rounded-medium-b {
199
199
  border-end-start-radius: var(--_medium);
200
200
  border-end-end-radius: var(--_medium);
201
201
  }
202
202
 
203
- .shape-medium-l {
203
+ .rounded-medium-l {
204
204
  border-start-start-radius: var(--_medium);
205
205
  border-end-start-radius: var(--_medium);
206
206
  }
207
207
 
208
- .shape-medium-tl {
208
+ .rounded-medium-tl {
209
209
  border-start-start-radius: var(--_medium);
210
210
  }
211
211
 
212
- .shape-medium-tr {
212
+ .rounded-medium-tr {
213
213
  border-start-end-radius: var(--_medium);
214
214
  }
215
215
 
216
- .shape-medium-bl {
216
+ .rounded-medium-bl {
217
217
  border-end-start-radius: var(--_medium);
218
218
  }
219
219
 
220
- .shape-medium-br {
220
+ .rounded-medium-br {
221
221
  border-end-end-radius: var(--_medium);
222
222
  }
223
223
 
224
- .shape-large-t {
224
+ .rounded-large-t {
225
225
  border-start-start-radius: var(--_large);
226
226
  border-start-end-radius: var(--_large);
227
227
  }
228
228
 
229
- .shape-large-r {
229
+ .rounded-large-r {
230
230
  border-start-end-radius: var(--_large);
231
231
  border-end-end-radius: var(--_large);
232
232
  }
233
233
 
234
- .shape-large-b {
234
+ .rounded-large-b {
235
235
  border-end-start-radius: var(--_large);
236
236
  border-end-end-radius: var(--_large);
237
237
  }
238
238
 
239
- .shape-large-l {
239
+ .rounded-large-l {
240
240
  border-start-start-radius: var(--_large);
241
241
  border-end-start-radius: var(--_large);
242
242
  }
243
243
 
244
- .shape-large-tl {
244
+ .rounded-large-tl {
245
245
  border-start-start-radius: var(--_large);
246
246
  }
247
247
 
248
- .shape-large-tr {
248
+ .rounded-large-tr {
249
249
  border-start-end-radius: var(--_large);
250
250
  }
251
251
 
252
- .shape-large-bl {
252
+ .rounded-large-bl {
253
253
  border-end-start-radius: var(--_large);
254
254
  }
255
255
 
256
- .shape-large-br {
256
+ .rounded-large-br {
257
257
  border-end-end-radius: var(--_large);
258
258
  }
259
259
 
260
- .shape-large-increased-t {
260
+ .rounded-large-increased-t {
261
261
  border-start-start-radius: var(--_large-increased);
262
262
  border-start-end-radius: var(--_large-increased);
263
263
  }
264
264
 
265
- .shape-large-increased-r {
265
+ .rounded-large-increased-r {
266
266
  border-start-end-radius: var(--_large-increased);
267
267
  border-end-end-radius: var(--_large-increased);
268
268
  }
269
269
 
270
- .shape-large-increased-b {
270
+ .rounded-large-increased-b {
271
271
  border-end-start-radius: var(--_large-increased);
272
272
  border-end-end-radius: var(--_large-increased);
273
273
  }
274
274
 
275
- .shape-large-increased-l {
275
+ .rounded-large-increased-l {
276
276
  border-start-start-radius: var(--_large-increased);
277
277
  border-end-start-radius: var(--_large-increased);
278
278
  }
279
279
 
280
- .shape-large-increased-tl {
280
+ .rounded-large-increased-tl {
281
281
  border-start-start-radius: var(--_large-increased);
282
282
  }
283
283
 
284
- .shape-large-increased-tr {
284
+ .rounded-large-increased-tr {
285
285
  border-start-end-radius: var(--_large-increased);
286
286
  }
287
287
 
288
- .shape-large-increased-bl {
288
+ .rounded-large-increased-bl {
289
289
  border-end-start-radius: var(--_large-increased);
290
290
  }
291
291
 
292
- .shape-large-increased-br {
292
+ .rounded-large-increased-br {
293
293
  border-end-end-radius: var(--_large-increased);
294
294
  }
295
295
 
296
- .shape-extra-large-t {
296
+ .rounded-extra-large-t {
297
297
  border-start-start-radius: var(--_extra-large);
298
298
  border-start-end-radius: var(--_extra-large);
299
299
  }
300
300
 
301
- .shape-extra-large-r {
301
+ .rounded-extra-large-r {
302
302
  border-start-end-radius: var(--_extra-large);
303
303
  border-end-end-radius: var(--_extra-large);
304
304
  }
305
305
 
306
- .shape-extra-large-b {
306
+ .rounded-extra-large-b {
307
307
  border-end-start-radius: var(--_extra-large);
308
308
  border-end-end-radius: var(--_extra-large);
309
309
  }
310
310
 
311
- .shape-extra-large-l {
311
+ .rounded-extra-large-l {
312
312
  border-start-start-radius: var(--_extra-large);
313
313
  border-end-start-radius: var(--_extra-large);
314
314
  }
315
315
 
316
- .shape-extra-large-tl {
316
+ .rounded-extra-large-tl {
317
317
  border-start-start-radius: var(--_extra-large);
318
318
  }
319
319
 
320
- .shape-extra-large-tr {
320
+ .rounded-extra-large-tr {
321
321
  border-start-end-radius: var(--_extra-large);
322
322
  }
323
323
 
324
- .shape-extra-large-bl {
324
+ .rounded-extra-large-bl {
325
325
  border-end-start-radius: var(--_extra-large);
326
326
  }
327
327
 
328
- .shape-extra-large-br {
328
+ .rounded-extra-large-br {
329
329
  border-end-end-radius: var(--_extra-large);
330
330
  }
331
331
 
332
- .shape-extra-large-increased-t {
332
+ .rounded-extra-large-increased-t {
333
333
  border-start-start-radius: var(--_extra-large-increased);
334
334
  border-start-end-radius: var(--_extra-large-increased);
335
335
  }
336
336
 
337
- .shape-extra-large-increased-r {
337
+ .rounded-extra-large-increased-r {
338
338
  border-start-end-radius: var(--_extra-large-increased);
339
339
  border-end-end-radius: var(--_extra-large-increased);
340
340
  }
341
341
 
342
- .shape-extra-large-increased-b {
342
+ .rounded-extra-large-increased-b {
343
343
  border-end-start-radius: var(--_extra-large-increased);
344
344
  border-end-end-radius: var(--_extra-large-increased);
345
345
  }
346
346
 
347
- .shape-extra-large-increased-l {
347
+ .rounded-extra-large-increased-l {
348
348
  border-start-start-radius: var(--_extra-large-increased);
349
349
  border-end-start-radius: var(--_extra-large-increased);
350
350
  }
351
351
 
352
- .shape-extra-large-increased-tl {
352
+ .rounded-extra-large-increased-tl {
353
353
  border-start-start-radius: var(--_extra-large-increased);
354
354
  }
355
355
 
356
- .shape-extra-large-increased-tr {
356
+ .rounded-extra-large-increased-tr {
357
357
  border-start-end-radius: var(--_extra-large-increased);
358
358
  }
359
359
 
360
- .shape-extra-large-increased-bl {
360
+ .rounded-extra-large-increased-bl {
361
361
  border-end-start-radius: var(--_extra-large-increased);
362
362
  }
363
363
 
364
- .shape-extra-large-increased-br {
364
+ .rounded-extra-large-increased-br {
365
365
  border-end-end-radius: var(--_extra-large-increased);
366
366
  }
367
367
 
368
- .shape-extra-extra-large-t {
368
+ .rounded-extra-extra-large-t {
369
369
  border-start-start-radius: var(--_extra-extra-large);
370
370
  border-start-end-radius: var(--_extra-extra-large);
371
371
  }
372
372
 
373
- .shape-extra-extra-large-r {
373
+ .rounded-extra-extra-large-r {
374
374
  border-start-end-radius: var(--_extra-extra-large);
375
375
  border-end-end-radius: var(--_extra-extra-large);
376
376
  }
377
377
 
378
- .shape-extra-extra-large-b {
378
+ .rounded-extra-extra-large-b {
379
379
  border-end-start-radius: var(--_extra-extra-large);
380
380
  border-end-end-radius: var(--_extra-extra-large);
381
381
  }
382
382
 
383
- .shape-extra-extra-large-l {
383
+ .rounded-extra-extra-large-l {
384
384
  border-start-start-radius: var(--_extra-extra-large);
385
385
  border-end-start-radius: var(--_extra-extra-large);
386
386
  }
387
387
 
388
- .shape-extra-extra-large-tl {
388
+ .rounded-extra-extra-large-tl {
389
389
  border-start-start-radius: var(--_extra-extra-large);
390
390
  }
391
391
 
392
- .shape-extra-extra-large-tr {
392
+ .rounded-extra-extra-large-tr {
393
393
  border-start-end-radius: var(--_extra-extra-large);
394
394
  }
395
395
 
396
- .shape-extra-extra-large-bl {
396
+ .rounded-extra-extra-large-bl {
397
397
  border-end-start-radius: var(--_extra-extra-large);
398
398
  }
399
399
 
400
- .shape-extra-extra-large-br {
400
+ .rounded-extra-extra-large-br {
401
401
  border-end-end-radius: var(--_extra-extra-large);
402
402
  }
403
403
  }
package/typography/tailwind-theme.css CHANGED
@@ -1,4 +1,4 @@
1
- @theme inline {
1
+ @theme static inline {
2
2
  --font-display-large : var(--md-sys-typescale-display-large-font, var(--md-ref-typeface-brand, "Roboto"));
3
3
  --text-display-large : var(--md-sys-typescale-display-large-size, 57px);
4
4
  --tracking-display-large : var(--md-sys-typescale-display-large-tracking, -0.25px);
package/typography/typography-utilities.css CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- @layer material-design-system.typography {
2
+ @layer material-design-system.variable.typography {
3
3
  :root {
4
4
 
5
5
  --_display-large-font: var(--md-sys-typescale-display-large-font, var(--md-ref-typeface-brand, "Roboto"));
package/color/classic-utilities.css DELETED
@@ -1,258 +0,0 @@
1
- @layer material-design-system.color {
2
- :root {
3
- --_color-primary-palette-key-color : var(--md-sys-color-primary-palette-key-color, light-dark(#578400, #578400));
4
- --_color-secondary-palette-key-color : var(--md-sys-color-secondary-palette-key-color, light-dark(#697e4a, #697e4a));
5
- --_color-tertiary-palette-key-color : var(--md-sys-color-tertiary-palette-key-color, light-dark(#00885e, #00885e));
6
- --_color-neutral-palette-key-color : var(--md-sys-color-neutral-palette-key-color, light-dark(#75786c, #75786c));
7
- --_color-neutral-variant-palette-key-color: var(--md-sys-color-neutral-variant-palette-key-color, light-dark(#737966, #737966));
8
- --_color-background : var(--md-sys-color-background, light-dark(#f9fbec, #11140c));
9
- --_color-on-background : var(--md-sys-color-on-background, light-dark(#1a1d14, #e2e4d5));
10
- --_color-surface : var(--md-sys-color-surface, light-dark(#f9fbec, #11140c));
11
- --_color-surface-dim : var(--md-sys-color-surface-dim, light-dark(#d9dbcd, #11140c));
12
- --_color-surface-bright : var(--md-sys-color-surface-bright, light-dark(#f9fbec, #373a30));
13
- --_color-surface-container-lowest : var(--md-sys-color-surface-container-lowest, light-dark(#ffffff, #0c0f07));
14
- --_color-surface-container-low : var(--md-sys-color-surface-container-low, light-dark(#f3f5e6, #1a1d14));
15
- --_color-surface-container : var(--md-sys-color-surface-container, light-dark(#edefe1, #1e2118));
16
- --_color-surface-container-high : var(--md-sys-color-surface-container-high, light-dark(#e7e9db, #282b22));
17
- --_color-surface-container-highest : var(--md-sys-color-surface-container-highest, light-dark(#e2e4d5, #33362c));
18
- --_color-on-surface : var(--md-sys-color-on-surface, light-dark(#1a1d14, #e2e4d5));
19
- --_color-surface-variant : var(--md-sys-color-surface-variant, light-dark(#dfe5cf, #434938));
20
- --_color-on-surface-variant : var(--md-sys-color-on-surface-variant, light-dark(#434938, #c3c9b3));
21
- --_color-inverse-surface : var(--md-sys-color-inverse-surface, light-dark(#2e3228, #e2e4d5));
22
- --_color-inverse-on-surface : var(--md-sys-color-inverse-on-surface, light-dark(#f0f2e3, #2e3228));
23
- --_color-outline : var(--md-sys-color-outline, light-dark(#737967, #8d937f));
24
- --_color-outline-variant : var(--md-sys-color-outline-variant, light-dark(#c3c9b3, #434938));
25
- --_color-shadow : var(--md-sys-color-shadow, light-dark(#000000, #000000));
26
- --_color-scrim : var(--md-sys-color-scrim, light-dark(#000000, #000000));
27
- --_color-surface-tint : var(--md-sys-color-surface-tint, light-dark(#446900, #a3d656));
28
- --_color-primary : var(--md-sys-color-primary, light-dark(#000000, #ffffff));
29
- --_color-on-primary : var(--md-sys-color-on-primary, light-dark(#bef36f, #111f00));
30
- --_color-primary-container : var(--md-sys-color-primary-container, light-dark(#2a4200, #b0e563));
31
- --_color-on-primary-container : var(--md-sys-color-on-primary-container, light-dark(#ffffff, #000000));
32
- --_color-inverse-primary : var(--md-sys-color-inverse-primary, light-dark(#a3d656, #446900));
33
- --_color-secondary : var(--md-sys-color-secondary, light-dark(#516533, #b7cf93));
34
- --_color-on-secondary : var(--md-sys-color-on-secondary, light-dark(#ffffff, #111f00));
35
- --_color-secondary-container : var(--md-sys-color-secondary-container, light-dark(#c5dda0, #3a4d1e));
36
- --_color-on-secondary-container : var(--md-sys-color-on-secondary-container, light-dark(#111f00, #d3ebad));
37
- --_color-tertiary : var(--md-sys-color-tertiary, light-dark(#00452e, #8df7c5));
38
- --_color-on-tertiary : var(--md-sys-color-on-tertiary, light-dark(#8df7c5, #002114));
39
- --_color-tertiary-container : var(--md-sys-color-tertiary-container, light-dark(#00855c, #33a376));
40
- --_color-on-tertiary-container : var(--md-sys-color-on-tertiary-container, light-dark(#ffffff, #000000));
41
- --_color-error : var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab));
42
- --_color-on-error : var(--md-sys-color-on-error, light-dark(#ffffff, #690005));
43
- --_color-error-container : var(--md-sys-color-error-container, light-dark(#ffdad6, #93000a));
44
- --_color-on-error-container : var(--md-sys-color-on-error-container, light-dark(#410002, #ffdad6));
45
- --_color-primary-fixed : var(--md-sys-color-primary-fixed, light-dark(#446900, #446900));
46
- --_color-primary-fixed-dim : var(--md-sys-color-primary-fixed-dim, light-dark(#324f00, #324f00));
47
- --_color-on-primary-fixed : var(--md-sys-color-on-primary-fixed, light-dark(#ffffff, #ffffff));
48
- --_color-on-primary-fixed-variant : var(--md-sys-color-on-primary-fixed-variant, light-dark(#bef36f, #bef36f));
49
- --_color-secondary-fixed : var(--md-sys-color-secondary-fixed, light-dark(#b7cf93, #b7cf93));
50
- --_color-secondary-fixed-dim : var(--md-sys-color-secondary-fixed-dim, light-dark(#9db37a, #9db37a));
51
- --_color-on-secondary-fixed : var(--md-sys-color-on-secondary-fixed, light-dark(#111f00, #111f00));
52
- --_color-on-secondary-fixed-variant : var(--md-sys-color-on-secondary-fixed-variant, light-dark(#2f4114, #2f4114));
53
- --_color-tertiary-fixed : var(--md-sys-color-tertiary-fixed, light-dark(#006c4a, #006c4a));
54
- --_color-tertiary-fixed-dim : var(--md-sys-color-tertiary-fixed-dim, light-dark(#005237, #005237));
55
- --_color-on-tertiary-fixed : var(--md-sys-color-on-tertiary-fixed, light-dark(#ffffff, #ffffff));
56
- --_color-on-tertiary-fixed-variant : var(--md-sys-color-on-tertiary-fixed-variant, light-dark(#8df7c5, #8df7c5));
57
- }
58
- }
59
-
60
- @layer material-design-system.utilities.classic {
61
- .background {
62
- background: var(--_color-background);
63
- }
64
-
65
- .on-background {
66
- color: var(--_color-on-background);
67
- }
68
-
69
- .surface {
70
- background: var(--_color-surface);
71
- }
72
-
73
- .surface-dim {
74
- background: var(--_color-surface-dim);
75
- }
76
-
77
- .surface-bright {
78
- background: var(--_color-surface-bright);
79
- }
80
-
81
- .surface-container-lowest {
82
- background: var(--_color-surface-container-lowest);
83
- }
84
-
85
- .surface-container-low {
86
- background: var(--_color-surface-container-low);
87
- }
88
-
89
- .surface-container {
90
- background: var(--_color-surface-container);
91
- }
92
-
93
- .surface-container-high {
94
- background: var(--_color-surface-container-high);
95
- }
96
-
97
- .surface-container-highest {
98
- background: var(--_color-surface-container-highest);
99
- }
100
-
101
- .on-surface {
102
- color: var(--_color-on-surface);
103
- }
104
-
105
- .surface-variant {
106
- background: var(--_color-surface-variant);
107
- }
108
-
109
- .on-surface-variant {
110
- color: var(--_color-on-surface-variant);
111
- }
112
-
113
- .inverse-surface {
114
- background: var(--_color-inverse-surface);
115
- }
116
-
117
- .inverse-on-surface {
118
- color: var(--_color-inverse-on-surface);
119
- }
120
-
121
- .outline {
122
- outline-color: var(--_color-outline);
123
- border-color: var(--_color-outline);
124
- }
125
-
126
- .outline-variant {
127
- outline-color: var(--_color-outline-variant);
128
- border-color: var(--_color-outline-variant);
129
- }
130
-
131
- .shadow {
132
- background: var(--_color-shadow);
133
- }
134
-
135
- .scrim {
136
- background: var(--_color-scrim);
137
- }
138
-
139
- .surface-tint {
140
- background: var(--_color-surface-tint);
141
- }
142
-
143
- .primary {
144
- background: var(--_color-primary);
145
- }
146
-
147
- .on-primary {
148
- color: var(--_color-on-primary);
149
- }
150
-
151
- .primary-container {
152
- background: var(--_color-primary-container);
153
- }
154
-
155
- .on-primary-container {
156
- color: var(--_color-on-primary-container);
157
- }
158
-
159
- .inverse-primary {
160
- background: var(--_color-inverse-primary);
161
- }
162
-
163
- .secondary {
164
- background: var(--_color-secondary);
165
- }
166
-
167
- .on-secondary {
168
- color: var(--_color-on-secondary);
169
- }
170
-
171
- .secondary-container {
172
- background: var(--_color-secondary-container);
173
- }
174
-
175
- .on-secondary-container {
176
- color: var(--_color-on-secondary-container);
177
- }
178
-
179
- .tertiary {
180
- background: var(--_color-tertiary);
181
- }
182
-
183
- .on-tertiary {
184
- color: var(--_color-on-tertiary);
185
- }
186
-
187
- .tertiary-container {
188
- background: var(--_color-tertiary-container);
189
- }
190
-
191
- .on-tertiary-container {
192
- color: var(--_color-on-tertiary-container);
193
- }
194
-
195
- .error {
196
- background: var(--_color-error);
197
- }
198
-
199
- .on-error {
200
- color: var(--_color-on-error);
201
- }
202
-
203
- .error-container {
204
- background: var(--_color-error-container);
205
- }
206
-
207
- .on-error-container {
208
- color: var(--_color-on-error-container);
209
- }
210
-
211
- .primary-fixed {
212
- background: var(--_color-primary-fixed);
213
- }
214
-
215
- .primary-fixed-dim {
216
- background: var(--_color-primary-fixed-dim);
217
- }
218
-
219
- .on-primary-fixed {
220
- color: var(--_color-on-primary-fixed);
221
- }
222
-
223
- .on-primary-fixed-variant {
224
- color: var(--_color-on-primary-fixed-variant);
225
- }
226
-
227
- .secondary-fixed {
228
- background: var(--_color-secondary-fixed);
229
- }
230
-
231
- .secondary-fixed-dim {
232
- background: var(--_color-secondary-fixed-dim);
233
- }
234
-
235
- .on-secondary-fixed {
236
- color: var(--_color-on-secondary-fixed);
237
- }
238
-
239
- .on-secondary-fixed-variant {
240
- color: var(--_color-on-secondary-fixed-variant);
241
- }
242
-
243
- .tertiary-fixed {
244
- background: var(--_color-tertiary-fixed);
245
- }
246
-
247
- .tertiary-fixed-dim {
248
- background: var(--_color-tertiary-fixed-dim);
249
- }
250
-
251
- .on-tertiary-fixed {
252
- color: var(--_color-on-tertiary-fixed);
253
- }
254
-
255
- .on-tertiary-fixed-variant {
256
- color: var(--_color-on-tertiary-fixed-variant);
257
- }
258
- }