@sandlada/material-design-css 2.0.0 → 2.1.0-20250827.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 (12) hide show
  1. package/package.json +48 -40
  2. package/palette/bg-utilities.css +608 -0
  3. package/palette/text-utilities.css +608 -0
  4. package/preset.css +5 -7
  5. package/tailwind-color/bg-utilities.css +111 -0
  6. package/tailwind-color/text-utilities.css +111 -0
  7. package/tailwind-motion/animation-utilities.css +196 -0
  8. package/tailwind-motion/transition-utilities.css +196 -0
  9. package/tailwind-palette/bg-utilities.css +606 -0
  10. package/tailwind-palette/text-utilities.css +606 -0
  11. package/tailwind-shape/shape-utilities.css +399 -0
  12. package/tailwind-typography/typography-utilities.css +422 -0
package/tailwind-color/bg-utilities.css ADDED
@@ -0,0 +1,111 @@
1
+ @theme {
2
+ --_bg-color-primary-palette-key-color : var(--md-sys-color-primary-palette-key-color, light-dark(#578400, #578400));
3
+ --_bg-color-secondary-palette-key-color : var(--md-sys-color-secondary-palette-key-color, light-dark(#697e4a, #697e4a));
4
+ --_bg-color-tertiary-palette-key-color : var(--md-sys-color-tertiary-palette-key-color, light-dark(#00885e, #00885e));
5
+ --_bg-color-neutral-palette-key-color : var(--md-sys-color-neutral-palette-key-color, light-dark(#75786c, #75786c));
6
+ --_bg-color-neutral-variant-palette-key-color: var(--md-sys-color-neutral-variant-palette-key-color, light-dark(#737966, #737966));
7
+ --_bg-color-background : var(--md-sys-color-background, light-dark(#f9fbec, #11140c));
8
+ --_bg-color-on-background : var(--md-sys-color-on-background, light-dark(#1a1d14, #e2e4d5));
9
+ --_bg-color-surface : var(--md-sys-color-surface, light-dark(#f9fbec, #11140c));
10
+ --_bg-color-surface-dim : var(--md-sys-color-surface-dim, light-dark(#d9dbcd, #11140c));
11
+ --_bg-color-surface-bright : var(--md-sys-color-surface-bright, light-dark(#f9fbec, #373a30));
12
+ --_bg-color-surface-container-lowest : var(--md-sys-color-surface-container-lowest, light-dark(#ffffff, #0c0f07));
13
+ --_bg-color-surface-container-low : var(--md-sys-color-surface-container-low, light-dark(#f3f5e6, #1a1d14));
14
+ --_bg-color-surface-container : var(--md-sys-color-surface-container, light-dark(#edefe1, #1e2118));
15
+ --_bg-color-surface-container-high : var(--md-sys-color-surface-container-high, light-dark(#e7e9db, #282b22));
16
+ --_bg-color-surface-container-highest : var(--md-sys-color-surface-container-highest, light-dark(#e2e4d5, #33362c));
17
+ --_bg-color-on-surface : var(--md-sys-color-on-surface, light-dark(#1a1d14, #e2e4d5));
18
+ --_bg-color-surface-variant : var(--md-sys-color-surface-variant, light-dark(#dfe5cf, #434938));
19
+ --_bg-color-on-surface-variant : var(--md-sys-color-on-surface-variant, light-dark(#434938, #c3c9b3));
20
+ --_bg-color-inverse-surface : var(--md-sys-color-inverse-surface, light-dark(#2e3228, #e2e4d5));
21
+ --_bg-color-inverse-on-surface : var(--md-sys-color-inverse-on-surface, light-dark(#f0f2e3, #2e3228));
22
+ --_bg-color-outline : var(--md-sys-color-outline, light-dark(#737967, #8d937f));
23
+ --_bg-color-outline-variant : var(--md-sys-color-outline-variant, light-dark(#c3c9b3, #434938));
24
+ --_bg-color-shadow : var(--md-sys-color-shadow, light-dark(#000000, #000000));
25
+ --_bg-color-scrim : var(--md-sys-color-scrim, light-dark(#000000, #000000));
26
+ --_bg-color-surface-tint : var(--md-sys-color-surface-tint, light-dark(#446900, #a3d656));
27
+ --_bg-color-primary : var(--md-sys-color-primary, light-dark(#000000, #ffffff));
28
+ --_bg-color-on-primary : var(--md-sys-color-on-primary, light-dark(#bef36f, #111f00));
29
+ --_bg-color-primary-container : var(--md-sys-color-primary-container, light-dark(#2a4200, #b0e563));
30
+ --_bg-color-on-primary-container : var(--md-sys-color-on-primary-container, light-dark(#ffffff, #000000));
31
+ --_bg-color-inverse-primary : var(--md-sys-color-inverse-primary, light-dark(#a3d656, #446900));
32
+ --_bg-color-secondary : var(--md-sys-color-secondary, light-dark(#516533, #b7cf93));
33
+ --_bg-color-on-secondary : var(--md-sys-color-on-secondary, light-dark(#ffffff, #111f00));
34
+ --_bg-color-secondary-container : var(--md-sys-color-secondary-container, light-dark(#c5dda0, #3a4d1e));
35
+ --_bg-color-on-secondary-container : var(--md-sys-color-on-secondary-container, light-dark(#111f00, #d3ebad));
36
+ --_bg-color-tertiary : var(--md-sys-color-tertiary, light-dark(#00452e, #8df7c5));
37
+ --_bg-color-on-tertiary : var(--md-sys-color-on-tertiary, light-dark(#8df7c5, #002114));
38
+ --_bg-color-tertiary-container : var(--md-sys-color-tertiary-container, light-dark(#00855c, #33a376));
39
+ --_bg-color-on-tertiary-container : var(--md-sys-color-on-tertiary-container, light-dark(#ffffff, #000000));
40
+ --_bg-color-error : var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab));
41
+ --_bg-color-on-error : var(--md-sys-color-on-error, light-dark(#ffffff, #690005));
42
+ --_bg-color-error-container : var(--md-sys-color-error-container, light-dark(#ffdad6, #93000a));
43
+ --_bg-color-on-error-container : var(--md-sys-color-on-error-container, light-dark(#410002, #ffdad6));
44
+ --_bg-color-primary-fixed : var(--md-sys-color-primary-fixed, light-dark(#446900, #446900));
45
+ --_bg-color-primary-fixed-dim : var(--md-sys-color-primary-fixed-dim, light-dark(#324f00, #324f00));
46
+ --_bg-color-on-primary-fixed : var(--md-sys-color-on-primary-fixed, light-dark(#ffffff, #ffffff));
47
+ --_bg-color-on-primary-fixed-variant : var(--md-sys-color-on-primary-fixed-variant, light-dark(#bef36f, #bef36f));
48
+ --_bg-color-secondary-fixed : var(--md-sys-color-secondary-fixed, light-dark(#b7cf93, #b7cf93));
49
+ --_bg-color-secondary-fixed-dim : var(--md-sys-color-secondary-fixed-dim, light-dark(#9db37a, #9db37a));
50
+ --_bg-color-on-secondary-fixed : var(--md-sys-color-on-secondary-fixed, light-dark(#111f00, #111f00));
51
+ --_bg-color-on-secondary-fixed-variant : var(--md-sys-color-on-secondary-fixed-variant, light-dark(#2f4114, #2f4114));
52
+ --_bg-color-tertiary-fixed : var(--md-sys-color-tertiary-fixed, light-dark(#006c4a, #006c4a));
53
+ --_bg-color-tertiary-fixed-dim : var(--md-sys-color-tertiary-fixed-dim, light-dark(#005237, #005237));
54
+ --_bg-color-on-tertiary-fixed : var(--md-sys-color-on-tertiary-fixed, light-dark(#ffffff, #ffffff));
55
+ --_bg-color-on-tertiary-fixed-variant : var(--md-sys-color-on-tertiary-fixed-variant, light-dark(#8df7c5, #8df7c5));
56
+ }
57
+
58
+ @utility bg-primary-palette-key-color {background: var(--_bg-color-primary-palette-key-color);}
59
+ @utility bg-secondary-palette-key-color {background: var(--_bg-color-secondary-palette-key-color);}
60
+ @utility bg-tertiary-palette-key-color {background: var(--_bg-color-tertiary-palette-key-color);}
61
+ @utility bg-neutral-palette-key-color {background: var(--_bg-color-neutral-palette-key-color);}
62
+ @utility bg-neutral-variant-palette-key-color {background: var(--_bg-color-neutral-variant-palette-key-color);}
63
+ @utility bg-background {background: var(--_bg-color-background);}
64
+ @utility bg-on-background {background: var(--_bg-color-on-background);}
65
+ @utility bg-surface {background: var(--_bg-color-surface);}
66
+ @utility bg-surface-dim {background: var(--_bg-color-surface-dim);}
67
+ @utility bg-surface-bright {background: var(--_bg-color-surface-bright);}
68
+ @utility bg-surface-container-lowest {background: var(--_bg-color-surface-container-lowest);}
69
+ @utility bg-surface-container-low {background: var(--_bg-color-surface-container-low);}
70
+ @utility bg-surface-container {background: var(--_bg-color-surface-container);}
71
+ @utility bg-surface-container-high {background: var(--_bg-color-surface-container-high);}
72
+ @utility bg-surface-container-highest {background: var(--_bg-color-surface-container-highest);}
73
+ @utility bg-on-surface {background: var(--_bg-color-on-surface);}
74
+ @utility bg-surface-variant {background: var(--_bg-color-surface-variant);}
75
+ @utility bg-on-surface-variant {background: var(--_bg-color-on-surface-variant);}
76
+ @utility bg-inverse-surface {background: var(--_bg-color-inverse-surface);}
77
+ @utility bg-inverse-on-surface {background: var(--_bg-color-inverse-on-surface);}
78
+ @utility bg-outline {background: var(--_bg-color-outline);}
79
+ @utility bg-outline-variant {background: var(--_bg-color-outline-variant);}
80
+ @utility bg-shadow {background: var(--_bg-color-shadow);}
81
+ @utility bg-scrim {background: var(--_bg-color-scrim);}
82
+ @utility bg-surface-tint {background: var(--_bg-color-surface-tint);}
83
+ @utility bg-primary {background: var(--_bg-color-primary);}
84
+ @utility bg-on-primary {background: var(--_bg-color-on-primary);}
85
+ @utility bg-primary-container {background: var(--_bg-color-primary-container);}
86
+ @utility bg-on-primary-container {background: var(--_bg-color-on-primary-container);}
87
+ @utility bg-inverse-primary {background: var(--_bg-color-inverse-primary);}
88
+ @utility bg-secondary {background: var(--_bg-color-secondary);}
89
+ @utility bg-on-secondary {background: var(--_bg-color-on-secondary);}
90
+ @utility bg-secondary-container {background: var(--_bg-color-secondary-container);}
91
+ @utility bg-on-secondary-container {background: var(--_bg-color-on-secondary-container);}
92
+ @utility bg-tertiary {background: var(--_bg-color-tertiary);}
93
+ @utility bg-on-tertiary {background: var(--_bg-color-on-tertiary);}
94
+ @utility bg-tertiary-container {background: var(--_bg-color-tertiary-container);}
95
+ @utility bg-on-tertiary-container {background: var(--_bg-color-on-tertiary-container);}
96
+ @utility bg-error {background: var(--_bg-color-error);}
97
+ @utility bg-on-error {background: var(--_bg-color-on-error);}
98
+ @utility bg-error-container {background: var(--_bg-color-error-container);}
99
+ @utility bg-on-error-container {background: var(--_bg-color-on-error-container);}
100
+ @utility bg-primary-fixed {background: var(--_bg-color-primary-fixed);}
101
+ @utility bg-primary-fixed-dim {background: var(--_bg-color-primary-fixed-dim);}
102
+ @utility bg-on-primary-fixed {background: var(--_bg-color-on-primary-fixed);}
103
+ @utility bg-on-primary-fixed-variant {background: var(--_bg-color-on-primary-fixed-variant);}
104
+ @utility bg-secondary-fixed {background: var(--_bg-color-secondary-fixed);}
105
+ @utility bg-secondary-fixed-dim {background: var(--_bg-color-secondary-fixed-dim);}
106
+ @utility bg-on-secondary-fixed {background: var(--_bg-color-on-secondary-fixed);}
107
+ @utility bg-on-secondary-fixed-variant {background: var(--_bg-color-on-secondary-fixed-variant);}
108
+ @utility bg-tertiary-fixed {background: var(--_bg-color-tertiary-fixed);}
109
+ @utility bg-tertiary-fixed-dim {background: var(--_bg-color-tertiary-fixed-dim);}
110
+ @utility bg-on-tertiary-fixed {background: var(--_bg-color-on-tertiary-fixed);}
111
+ @utility bg-on-tertiary-fixed-variant {background: var(--_bg-color-on-tertiary-fixed-variant);}
package/tailwind-color/text-utilities.css ADDED
@@ -0,0 +1,111 @@
1
+ @theme {
2
+ --_text-color-primary-palette-key-color : var(--md-sys-color-primary-palette-key-color, light-dark(#578400, #578400));
3
+ --_text-color-secondary-palette-key-color : var(--md-sys-color-secondary-palette-key-color, light-dark(#697e4a, #697e4a));
4
+ --_text-color-tertiary-palette-key-color : var(--md-sys-color-tertiary-palette-key-color, light-dark(#00885e, #00885e));
5
+ --_text-color-neutral-palette-key-color : var(--md-sys-color-neutral-palette-key-color, light-dark(#75786c, #75786c));
6
+ --_text-color-neutral-variant-palette-key-color: var(--md-sys-color-neutral-variant-palette-key-color, light-dark(#737966, #737966));
7
+ --_text-color-background : var(--md-sys-color-background, light-dark(#f9fbec, #11140c));
8
+ --_text-color-on-background : var(--md-sys-color-on-background, light-dark(#1a1d14, #e2e4d5));
9
+ --_text-color-surface : var(--md-sys-color-surface, light-dark(#f9fbec, #11140c));
10
+ --_text-color-surface-dim : var(--md-sys-color-surface-dim, light-dark(#d9dbcd, #11140c));
11
+ --_text-color-surface-bright : var(--md-sys-color-surface-bright, light-dark(#f9fbec, #373a30));
12
+ --_text-color-surface-container-lowest : var(--md-sys-color-surface-container-lowest, light-dark(#ffffff, #0c0f07));
13
+ --_text-color-surface-container-low : var(--md-sys-color-surface-container-low, light-dark(#f3f5e6, #1a1d14));
14
+ --_text-color-surface-container : var(--md-sys-color-surface-container, light-dark(#edefe1, #1e2118));
15
+ --_text-color-surface-container-high : var(--md-sys-color-surface-container-high, light-dark(#e7e9db, #282b22));
16
+ --_text-color-surface-container-highest : var(--md-sys-color-surface-container-highest, light-dark(#e2e4d5, #33362c));
17
+ --_text-color-on-surface : var(--md-sys-color-on-surface, light-dark(#1a1d14, #e2e4d5));
18
+ --_text-color-surface-variant : var(--md-sys-color-surface-variant, light-dark(#dfe5cf, #434938));
19
+ --_text-color-on-surface-variant : var(--md-sys-color-on-surface-variant, light-dark(#434938, #c3c9b3));
20
+ --_text-color-inverse-surface : var(--md-sys-color-inverse-surface, light-dark(#2e3228, #e2e4d5));
21
+ --_text-color-inverse-on-surface : var(--md-sys-color-inverse-on-surface, light-dark(#f0f2e3, #2e3228));
22
+ --_text-color-outline : var(--md-sys-color-outline, light-dark(#737967, #8d937f));
23
+ --_text-color-outline-variant : var(--md-sys-color-outline-variant, light-dark(#c3c9b3, #434938));
24
+ --_text-color-shadow : var(--md-sys-color-shadow, light-dark(#000000, #000000));
25
+ --_text-color-scrim : var(--md-sys-color-scrim, light-dark(#000000, #000000));
26
+ --_text-color-surface-tint : var(--md-sys-color-surface-tint, light-dark(#446900, #a3d656));
27
+ --_text-color-primary : var(--md-sys-color-primary, light-dark(#000000, #ffffff));
28
+ --_text-color-on-primary : var(--md-sys-color-on-primary, light-dark(#bef36f, #111f00));
29
+ --_text-color-primary-container : var(--md-sys-color-primary-container, light-dark(#2a4200, #b0e563));
30
+ --_text-color-on-primary-container : var(--md-sys-color-on-primary-container, light-dark(#ffffff, #000000));
31
+ --_text-color-inverse-primary : var(--md-sys-color-inverse-primary, light-dark(#a3d656, #446900));
32
+ --_text-color-secondary : var(--md-sys-color-secondary, light-dark(#516533, #b7cf93));
33
+ --_text-color-on-secondary : var(--md-sys-color-on-secondary, light-dark(#ffffff, #111f00));
34
+ --_text-color-secondary-container : var(--md-sys-color-secondary-container, light-dark(#c5dda0, #3a4d1e));
35
+ --_text-color-on-secondary-container : var(--md-sys-color-on-secondary-container, light-dark(#111f00, #d3ebad));
36
+ --_text-color-tertiary : var(--md-sys-color-tertiary, light-dark(#00452e, #8df7c5));
37
+ --_text-color-on-tertiary : var(--md-sys-color-on-tertiary, light-dark(#8df7c5, #002114));
38
+ --_text-color-tertiary-container : var(--md-sys-color-tertiary-container, light-dark(#00855c, #33a376));
39
+ --_text-color-on-tertiary-container : var(--md-sys-color-on-tertiary-container, light-dark(#ffffff, #000000));
40
+ --_text-color-error : var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab));
41
+ --_text-color-on-error : var(--md-sys-color-on-error, light-dark(#ffffff, #690005));
42
+ --_text-color-error-container : var(--md-sys-color-error-container, light-dark(#ffdad6, #93000a));
43
+ --_text-color-on-error-container : var(--md-sys-color-on-error-container, light-dark(#410002, #ffdad6));
44
+ --_text-color-primary-fixed : var(--md-sys-color-primary-fixed, light-dark(#446900, #446900));
45
+ --_text-color-primary-fixed-dim : var(--md-sys-color-primary-fixed-dim, light-dark(#324f00, #324f00));
46
+ --_text-color-on-primary-fixed : var(--md-sys-color-on-primary-fixed, light-dark(#ffffff, #ffffff));
47
+ --_text-color-on-primary-fixed-variant : var(--md-sys-color-on-primary-fixed-variant, light-dark(#bef36f, #bef36f));
48
+ --_text-color-secondary-fixed : var(--md-sys-color-secondary-fixed, light-dark(#b7cf93, #b7cf93));
49
+ --_text-color-secondary-fixed-dim : var(--md-sys-color-secondary-fixed-dim, light-dark(#9db37a, #9db37a));
50
+ --_text-color-on-secondary-fixed : var(--md-sys-color-on-secondary-fixed, light-dark(#111f00, #111f00));
51
+ --_text-color-on-secondary-fixed-variant : var(--md-sys-color-on-secondary-fixed-variant, light-dark(#2f4114, #2f4114));
52
+ --_text-color-tertiary-fixed : var(--md-sys-color-tertiary-fixed, light-dark(#006c4a, #006c4a));
53
+ --_text-color-tertiary-fixed-dim : var(--md-sys-color-tertiary-fixed-dim, light-dark(#005237, #005237));
54
+ --_text-color-on-tertiary-fixed : var(--md-sys-color-on-tertiary-fixed, light-dark(#ffffff, #ffffff));
55
+ --_text-color-on-tertiary-fixed-variant : var(--md-sys-color-on-tertiary-fixed-variant, light-dark(#8df7c5, #8df7c5));
56
+ }
57
+
58
+ @utility text-primary-palette-key-color { color: var(--_text-color-primary-palette-key-color); }
59
+ @utility text-secondary-palette-key-color { color: var(--_text-color-secondary-palette-key-color); }
60
+ @utility text-tertiary-palette-key-color { color: var(--_text-color-tertiary-palette-key-color); }
61
+ @utility text-neutral-palette-key-color { color: var(--_text-color-neutral-palette-key-color); }
62
+ @utility text-neutral-variant-palette-key-color { color: var(--_text-color-neutral-variant-palette-key-color); }
63
+ @utility text-background { color: var(--_text-color-background); }
64
+ @utility text-on-background { color: var(--_text-color-on-background); }
65
+ @utility text-surface { color: var(--_text-color-surface); }
66
+ @utility text-surface-dim { color: var(--_text-color-surface-dim); }
67
+ @utility text-surface-bright { color: var(--_text-color-surface-bright); }
68
+ @utility text-surface-container-lowest { color: var(--_text-color-surface-container-lowest); }
69
+ @utility text-surface-container-low { color: var(--_text-color-surface-container-low); }
70
+ @utility text-surface-container { color: var(--_text-color-surface-container); }
71
+ @utility text-surface-container-high { color: var(--_text-color-surface-container-high); }
72
+ @utility text-surface-container-highest { color: var(--_text-color-surface-container-highest); }
73
+ @utility text-on-surface { color: var(--_text-color-on-surface); }
74
+ @utility text-surface-variant { color: var(--_text-color-surface-variant); }
75
+ @utility text-on-surface-variant { color: var(--_text-color-on-surface-variant); }
76
+ @utility text-inverse-surface { color: var(--_text-color-inverse-surface); }
77
+ @utility text-inverse-on-surface { color: var(--_text-color-inverse-on-surface); }
78
+ @utility text-outline { color: var(--_text-color-outline); }
79
+ @utility text-outline-variant { color: var(--_text-color-outline-variant); }
80
+ @utility text-shadow { color: var(--_text-color-shadow); }
81
+ @utility text-scrim { color: var(--_text-color-scrim); }
82
+ @utility text-surface-tint { color: var(--_text-color-surface-tint); }
83
+ @utility text-primary { color: var(--_text-color-primary); }
84
+ @utility text-on-primary { color: var(--_text-color-on-primary); }
85
+ @utility text-primary-container { color: var(--_text-color-primary-container); }
86
+ @utility text-on-primary-container { color: var(--_text-color-on-primary-container); }
87
+ @utility text-inverse-primary { color: var(--_text-color-inverse-primary); }
88
+ @utility text-secondary { color: var(--_text-color-secondary); }
89
+ @utility text-on-secondary { color: var(--_text-color-on-secondary); }
90
+ @utility text-secondary-container { color: var(--_text-color-secondary-container); }
91
+ @utility text-on-secondary-container { color: var(--_text-color-on-secondary-container); }
92
+ @utility text-tertiary { color: var(--_text-color-tertiary); }
93
+ @utility text-on-tertiary { color: var(--_text-color-on-tertiary); }
94
+ @utility text-tertiary-container { color: var(--_text-color-tertiary-container); }
95
+ @utility text-on-tertiary-container { color: var(--_text-color-on-tertiary-container); }
96
+ @utility text-error { color: var(--_text-color-error); }
97
+ @utility text-on-error { color: var(--_text-color-on-error); }
98
+ @utility text-error-container { color: var(--_text-color-error-container); }
99
+ @utility text-on-error-container { color: var(--_text-color-on-error-container); }
100
+ @utility text-primary-fixed { color: var(--_text-color-primary-fixed); }
101
+ @utility text-primary-fixed-dim { color: var(--_text-color-primary-fixed-dim); }
102
+ @utility text-on-primary-fixed { color: var(--_text-color-on-primary-fixed); }
103
+ @utility text-on-primary-fixed-variant { color: var(--_text-color-on-primary-fixed-variant); }
104
+ @utility text-secondary-fixed { color: var(--_text-color-secondary-fixed); }
105
+ @utility text-secondary-fixed-dim { color: var(--_text-color-secondary-fixed-dim); }
106
+ @utility text-on-secondary-fixed { color: var(--_text-color-on-secondary-fixed); }
107
+ @utility text-on-secondary-fixed-variant { color: var(--_text-color-on-secondary-fixed-variant); }
108
+ @utility text-tertiary-fixed { color: var(--_text-color-tertiary-fixed); }
109
+ @utility text-tertiary-fixed-dim { color: var(--_text-color-tertiary-fixed-dim); }
110
+ @utility text-on-tertiary-fixed { color: var(--_text-color-on-tertiary-fixed); }
111
+ @utility text-on-tertiary-fixed-variant { color: var(--_text-color-on-tertiary-fixed-variant); }
package/tailwind-motion/animation-utilities.css ADDED
@@ -0,0 +1,196 @@
1
+ @theme {
2
+ --_animation-duration-short1 : var(--md-sys-motion-duration-short1, 50ms);
3
+ --_animation-duration-short2 : var(--md-sys-motion-duration-short2, 100ms);
4
+ --_animation-duration-short3 : var(--md-sys-motion-duration-short3, 150ms);
5
+ --_animation-duration-short4 : var(--md-sys-motion-duration-short4, 200ms);
6
+ --_animation-duration-medium1 : var(--md-sys-motion-duration-medium1, 250ms);
7
+ --_animation-duration-medium2 : var(--md-sys-motion-duration-medium2, 300ms);
8
+ --_animation-duration-medium3 : var(--md-sys-motion-duration-medium3, 350ms);
9
+ --_animation-duration-medium4 : var(--md-sys-motion-duration-medium4, 400ms);
10
+ --_animation-duration-long1 : var(--md-sys-motion-duration-long1, 450ms);
11
+ --_animation-duration-long2 : var(--md-sys-motion-duration-long2, 500ms);
12
+ --_animation-duration-long3 : var(--md-sys-motion-duration-long3, 550ms);
13
+ --_animation-duration-long4 : var(--md-sys-motion-duration-long4, 600ms);
14
+ --_animation-duration-extra-long1: var(--md-sys-motion-duration-extra-long1, 700ms);
15
+ --_animation-duration-extra-long2: var(--md-sys-motion-duration-extra-long2, 800ms);
16
+ --_animation-duration-extra-long3: var(--md-sys-motion-duration-extra-long3, 900ms);
17
+ --_animation-duration-extra-long4: var(--md-sys-motion-duration-extra-long4, 1000ms);
18
+ }
19
+
20
+ @utility animation-duration-short1 {
21
+ animation-duration: var(--_animation-duration-short1);
22
+ }
23
+ @utility animation-duration-short2 {
24
+ animation-duration: var(--_animation-duration-short2);
25
+ }
26
+ @utility animation-duration-short3 {
27
+ animation-duration: var(--_animation-duration-short3);
28
+ }
29
+ @utility animation-duration-short4 {
30
+ animation-duration: var(--_animation-duration-short4);
31
+ }
32
+ @utility animation-duration-medium1 {
33
+ animation-duration: var(--_animation-duration-medium1);
34
+ }
35
+ @utility animation-duration-medium2 {
36
+ animation-duration: var(--_animation-duration-medium2);
37
+ }
38
+ @utility animation-duration-medium3 {
39
+ animation-duration: var(--_animation-duration-medium3);
40
+ }
41
+ @utility animation-duration-medium4 {
42
+ animation-duration: var(--_animation-duration-medium4);
43
+ }
44
+ @utility animation-duration-long1 {
45
+ animation-duration: var(--_animation-duration-long1);
46
+ }
47
+ @utility animation-duration-long2 {
48
+ animation-duration: var(--_animation-duration-long2);
49
+ }
50
+ @utility animation-duration-long3 {
51
+ animation-duration: var(--_animation-duration-long3);
52
+ }
53
+ @utility animation-duration-long4 {
54
+ animation-duration: var(--_animation-duration-long4);
55
+ }
56
+ @utility animation-duration-extra-long1 {
57
+ animation-duration: var(--_animation-duration-extra-long1);
58
+ }
59
+ @utility animation-duration-extra-long2 {
60
+ animation-duration: var(--_animation-duration-extra-long2);
61
+ }
62
+ @utility animation-duration-extra-long3 {
63
+ animation-duration: var(--_animation-duration-extra-long3);
64
+ }
65
+ @utility animation-duration-extra-long4 {
66
+ animation-duration: var(--_animation-duration-extra-long4);
67
+ }
68
+
69
+ @theme {
70
+ --_animation-emphasized: var(--md-sys-motion-easing-emphasized ,cubic-bezier(0.2, 0.0, 0, 1.0));
71
+ --_animation-emphasized-decelerate: var(--md-sys-motion-easing-emphasized-decelerate ,cubic-bezier(0.05, 0.7, 0.1, 1.0));
72
+ --_animation-emphasized-accelerate: var(--md-sys-motion-easing-emphasized-accelerate ,cubic-bezier(0.3, 0.0, 0.8, 0.15));
73
+ --_animation-standard: var(--md-sys-motion-easing-standard ,cubic-bezier(0.2, 0.0, 0, 1.0));
74
+ --_animation-standard-decelerate: var(--md-sys-motion-easing-standard-decelerate ,cubic-bezier(0, 0, 0, 1));
75
+ --_animation-standard-accelerate: var(--md-sys-motion-easing-standard-accelerate ,cubic-bezier(0.3, 0, 1, 1));
76
+ }
77
+
78
+ @utility animation-easing-emphasized {
79
+ animation-timing-function: var(--_animation-emphasized);
80
+ }
81
+ @utility animation-easing-emphasized-decelerate {
82
+ animation-timing-function: var(--_animation-emphasized-decelerate);
83
+ }
84
+ @utility animation-easing-emphasized-accelerate {
85
+ animation-timing-function: var(--_animation-emphasized-accelerate);
86
+ }
87
+ @utility animation-easing-standard {
88
+ animation-timing-function: var(--_animation-standard);
89
+ }
90
+ @utility animation-easing-standard-decelerate {
91
+ animation-timing-function: var(--_animation-standard-decelerate);
92
+ }
93
+ @utility animation-easing-standard-accelerate {
94
+ animation-timing-function: var(--_animation-standard-accelerate);
95
+ }
96
+
97
+ @theme {
98
+ --_animation-easing-expressive-fast-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.90);
99
+ --_animation-easing-expressive-default-spatial: cubic-bezier(0.38, 1.21, 0.22, 1.00);
100
+ --_animation-easing-expressive-slow-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);
101
+ --_animation-easing-expressive-fast-effects: cubic-bezier(0.31, 0.94, 0.34, 1.00);
102
+ --_animation-easing-expressive-default-effects: cubic-bezier(0.34, 0.80, 0.34, 1.00);
103
+ --_animation-easing-expressive-slow-effects: cubic-bezier(0.34, 0.88, 0.34, 1.00);
104
+ --_animation-easing-standard-fast-spatial: cubic-bezier(0.27, 1.06, 0.18, 1.00);
105
+ --_animation-easing-standard-default-spatial: cubic-bezier(0.27, 1.06, 0.18, 1.00);
106
+ --_animation-easing-standard-slow-spatial: cubic-bezier(0.27, 1.06, 0.18, 1.00);
107
+ --_animation-easing-standard-fast-effects: cubic-bezier(0.31, 0.94, 0.34, 1.00);
108
+ --_animation-easing-standard-default-effects: cubic-bezier(0.34, 0.80, 0.34, 1.00);
109
+ --_animation-easing-standard-slow-effects: cubic-bezier(0.34, 0.88, 0.34, 1.00);
110
+ --_animation-duration-expressive-fast-spatial: 350ms;
111
+ --_animation-duration-expressive-default-spatial: 500ms;
112
+ --_animation-duration-expressive-slow-spatial: 650ms;
113
+ --_animation-duration-expressive-fast-effects: 150ms;
114
+ --_animation-duration-expressive-default-effects: 200ms;
115
+ --_animation-duration-expressive-slow-effects: 300ms;
116
+ --_animation-duration-standard-fast-spatial: 350ms;
117
+ --_animation-duration-standard-default-spatial: 500ms;
118
+ --_animation-duration-standard-slow-spatial: 750ms;
119
+ --_animation-duration-standard-fast-effects: 150ms;
120
+ --_animation-duration-standard-default-effects: 200ms;
121
+ --_animation-duration-standard-slow-effects: 300ms;
122
+ }
123
+
124
+ @utility animation-easing-expressive-fast-spatial {
125
+ animation-timing-function: var(--_animation-easing-expressive-fast-spatial);
126
+ }
127
+ @utility animation-easing-expressive-default-spatial {
128
+ animation-timing-function: var(--_animation-easing-expressive-default-spatial);
129
+ }
130
+ @utility animation-easing-expressive-slow-spatial {
131
+ animation-timing-function: var(--_animation-easing-expressive-slow-spatial);
132
+ }
133
+ @utility animation-easing-expressive-fast-effects {
134
+ animation-timing-function: var(--_animation-easing-expressive-fast-effects);
135
+ }
136
+ @utility animation-easing-expressive-default-effects {
137
+ animation-timing-function: var(--_animation-easing-expressive-default-effects);
138
+ }
139
+ @utility animation-easing-expressive-slow-effects {
140
+ animation-timing-function: var(--_animation-easing-expressive-slow-effects);
141
+ }
142
+ @utility animation-easing-standard-fast-spatial {
143
+ animation-timing-function: var(--_animation-easing-standard-fast-spatial);
144
+ }
145
+ @utility animation-easing-standard-default-spatial {
146
+ animation-timing-function: var(--_animation-easing-standard-default-spatial);
147
+ }
148
+ @utility animation-easing-standard-slow-spatial {
149
+ animation-timing-function: var(--_animation-easing-standard-slow-spatial);
150
+ }
151
+ @utility animation-easing-standard-fast-effects {
152
+ animation-timing-function: var(--_animation-easing-standard-fast-effects);
153
+ }
154
+ @utility animation-easing-standard-default-effects {
155
+ animation-timing-function: var(--_animation-easing-standard-default-effects);
156
+ }
157
+ @utility animation-easing-standard-slow-effects {
158
+ animation-timing-function: var(--_animation-easing-standard-slow-effects);
159
+ }
160
+
161
+ @utility animation-duration-expressive-fast-spatial {
162
+ animation-duration: var(--_animation-duration-expressive-fast-spatial);
163
+ }
164
+ @utility animation-duration-expressive-default-spatial {
165
+ animation-duration: var(--_animation-duration-expressive-default-spatial);
166
+ }
167
+ @utility animation-duration-expressive-slow-spatial {
168
+ animation-duration: var(--_animation-duration-expressive-slow-spatial);
169
+ }
170
+ @utility animation-duration-expressive-fast-effects {
171
+ animation-duration: var(--_animation-duration-expressive-fast-effects);
172
+ }
173
+ @utility animation-duration-expressive-default-effects {
174
+ animation-duration: var(--_animation-duration-expressive-default-effects);
175
+ }
176
+ @utility animation-duration-expressive-slow-effects {
177
+ animation-duration: var(--_animation-duration-expressive-slow-effects);
178
+ }
179
+ @utility animation-duration-standard-fast-spatial {
180
+ animation-duration: var(--_animation-duration-standard-fast-spatial);
181
+ }
182
+ @utility animation-duration-standard-default-spatial {
183
+ animation-duration: var(--_animation-duration-standard-default-spatial);
184
+ }
185
+ @utility animation-duration-standard-slow-spatial {
186
+ animation-duration: var(--_animation-duration-standard-slow-spatial);
187
+ }
188
+ @utility animation-duration-standard-fast-effects {
189
+ animation-duration: var(--_animation-duration-standard-fast-effects);
190
+ }
191
+ @utility animation-duration-standard-default-effects {
192
+ animation-duration: var(--_animation-duration-standard-default-effects);
193
+ }
194
+ @utility animation-duration-standard-slow-effects {
195
+ animation-duration: var(--_animation-duration-standard-slow-effects);
196
+ }
package/tailwind-motion/transition-utilities.css ADDED
@@ -0,0 +1,196 @@
1
+ @theme {
2
+ --_transition-duration-short1 : var(--md-sys-motion-duration-short1, 50ms);
3
+ --_transition-duration-short2 : var(--md-sys-motion-duration-short2, 100ms);
4
+ --_transition-duration-short3 : var(--md-sys-motion-duration-short3, 150ms);
5
+ --_transition-duration-short4 : var(--md-sys-motion-duration-short4, 200ms);
6
+ --_transition-duration-medium1 : var(--md-sys-motion-duration-medium1, 250ms);
7
+ --_transition-duration-medium2 : var(--md-sys-motion-duration-medium2, 300ms);
8
+ --_transition-duration-medium3 : var(--md-sys-motion-duration-medium3, 350ms);
9
+ --_transition-duration-medium4 : var(--md-sys-motion-duration-medium4, 400ms);
10
+ --_transition-duration-long1 : var(--md-sys-motion-duration-long1, 450ms);
11
+ --_transition-duration-long2 : var(--md-sys-motion-duration-long2, 500ms);
12
+ --_transition-duration-long3 : var(--md-sys-motion-duration-long3, 550ms);
13
+ --_transition-duration-long4 : var(--md-sys-motion-duration-long4, 600ms);
14
+ --_transition-duration-extra-long1: var(--md-sys-motion-duration-extra-long1, 700ms);
15
+ --_transition-duration-extra-long2: var(--md-sys-motion-duration-extra-long2, 800ms);
16
+ --_transition-duration-extra-long3: var(--md-sys-motion-duration-extra-long3, 900ms);
17
+ --_transition-duration-extra-long4: var(--md-sys-motion-duration-extra-long4, 1000ms);
18
+ }
19
+
20
+ @utility transition-duration-short1 {
21
+ transition-duration: var(--_transition-duration-short1);
22
+ }
23
+ @utility transition-duration-short2 {
24
+ transition-duration: var(--_transition-duration-short2);
25
+ }
26
+ @utility transition-duration-short3 {
27
+ transition-duration: var(--_transition-duration-short3);
28
+ }
29
+ @utility transition-duration-short4 {
30
+ transition-duration: var(--_transition-duration-short4);
31
+ }
32
+ @utility transition-duration-medium1 {
33
+ transition-duration: var(--_transition-duration-medium1);
34
+ }
35
+ @utility transition-duration-medium2 {
36
+ transition-duration: var(--_transition-duration-medium2);
37
+ }
38
+ @utility transition-duration-medium3 {
39
+ transition-duration: var(--_transition-duration-medium3);
40
+ }
41
+ @utility transition-duration-medium4 {
42
+ transition-duration: var(--_transition-duration-medium4);
43
+ }
44
+ @utility transition-duration-long1 {
45
+ transition-duration: var(--_transition-duration-long1);
46
+ }
47
+ @utility transition-duration-long2 {
48
+ transition-duration: var(--_transition-duration-long2);
49
+ }
50
+ @utility transition-duration-long3 {
51
+ transition-duration: var(--_transition-duration-long3);
52
+ }
53
+ @utility transition-duration-long4 {
54
+ transition-duration: var(--_transition-duration-long4);
55
+ }
56
+ @utility transition-duration-extra-long1 {
57
+ transition-duration: var(--_transition-duration-extra-long1);
58
+ }
59
+ @utility transition-duration-extra-long2 {
60
+ transition-duration: var(--_transition-duration-extra-long2);
61
+ }
62
+ @utility transition-duration-extra-long3 {
63
+ transition-duration: var(--_transition-duration-extra-long3);
64
+ }
65
+ @utility transition-duration-extra-long4 {
66
+ transition-duration: var(--_transition-duration-extra-long4);
67
+ }
68
+
69
+ @theme {
70
+ --_transition-emphasized: var(--md-sys-motion-easing-emphasized ,cubic-bezier(0.2, 0.0, 0, 1.0));
71
+ --_transition-emphasized-decelerate: var(--md-sys-motion-easing-emphasized-decelerate ,cubic-bezier(0.05, 0.7, 0.1, 1.0));
72
+ --_transition-emphasized-accelerate: var(--md-sys-motion-easing-emphasized-accelerate ,cubic-bezier(0.3, 0.0, 0.8, 0.15));
73
+ --_transition-standard: var(--md-sys-motion-easing-standard ,cubic-bezier(0.2, 0.0, 0, 1.0));
74
+ --_transition-standard-decelerate: var(--md-sys-motion-easing-standard-decelerate ,cubic-bezier(0, 0, 0, 1));
75
+ --_transition-standard-accelerate: var(--md-sys-motion-easing-standard-accelerate ,cubic-bezier(0.3, 0, 1, 1));
76
+ }
77
+
78
+ @utility transition-easing-emphasized {
79
+ transition-timing-function: var(--_transition-emphasized);
80
+ }
81
+ @utility transition-easing-emphasized-decelerate {
82
+ transition-timing-function: var(--_transition-emphasized-decelerate);
83
+ }
84
+ @utility transition-easing-emphasized-accelerate {
85
+ transition-timing-function: var(--_transition-emphasized-accelerate);
86
+ }
87
+ @utility transition-easing-standard {
88
+ transition-timing-function: var(--_transition-standard);
89
+ }
90
+ @utility transition-easing-standard-decelerate {
91
+ transition-timing-function: var(--_transition-standard-decelerate);
92
+ }
93
+ @utility transition-easing-standard-accelerate {
94
+ transition-timing-function: var(--_transition-standard-accelerate);
95
+ }
96
+
97
+ @theme {
98
+ --_transition-easing-expressive-fast-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.90);
99
+ --_transition-easing-expressive-default-spatial: cubic-bezier(0.38, 1.21, 0.22, 1.00);
100
+ --_transition-easing-expressive-slow-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);
101
+ --_transition-easing-expressive-fast-effects: cubic-bezier(0.31, 0.94, 0.34, 1.00);
102
+ --_transition-easing-expressive-default-effects: cubic-bezier(0.34, 0.80, 0.34, 1.00);
103
+ --_transition-easing-expressive-slow-effects: cubic-bezier(0.34, 0.88, 0.34, 1.00);
104
+ --_transition-easing-standard-fast-spatial: cubic-bezier(0.27, 1.06, 0.18, 1.00);
105
+ --_transition-easing-standard-default-spatial: cubic-bezier(0.27, 1.06, 0.18, 1.00);
106
+ --_transition-easing-standard-slow-spatial: cubic-bezier(0.27, 1.06, 0.18, 1.00);
107
+ --_transition-easing-standard-fast-effects: cubic-bezier(0.31, 0.94, 0.34, 1.00);
108
+ --_transition-easing-standard-default-effects: cubic-bezier(0.34, 0.80, 0.34, 1.00);
109
+ --_transition-easing-standard-slow-effects: cubic-bezier(0.34, 0.88, 0.34, 1.00);
110
+ --_transition-duration-expressive-fast-spatial: 350ms;
111
+ --_transition-duration-expressive-default-spatial: 500ms;
112
+ --_transition-duration-expressive-slow-spatial: 650ms;
113
+ --_transition-duration-expressive-fast-effects: 150ms;
114
+ --_transition-duration-expressive-default-effects: 200ms;
115
+ --_transition-duration-expressive-slow-effects: 300ms;
116
+ --_transition-duration-standard-fast-spatial: 350ms;
117
+ --_transition-duration-standard-default-spatial: 500ms;
118
+ --_transition-duration-standard-slow-spatial: 750ms;
119
+ --_transition-duration-standard-fast-effects: 150ms;
120
+ --_transition-duration-standard-default-effects: 200ms;
121
+ --_transition-duration-standard-slow-effects: 300ms;
122
+ }
123
+
124
+ @utility transition-easing-expressive-fast-spatial {
125
+ transition-timing-function: var(--_transition-easing-expressive-fast-spatial);
126
+ }
127
+ @utility transition-easing-expressive-default-spatial {
128
+ transition-timing-function: var(--_transition-easing-expressive-default-spatial);
129
+ }
130
+ @utility transition-easing-expressive-slow-spatial {
131
+ transition-timing-function: var(--_transition-easing-expressive-slow-spatial);
132
+ }
133
+ @utility transition-easing-expressive-fast-effects {
134
+ transition-timing-function: var(--_transition-easing-expressive-fast-effects);
135
+ }
136
+ @utility transition-easing-expressive-default-effects {
137
+ transition-timing-function: var(--_transition-easing-expressive-default-effects);
138
+ }
139
+ @utility transition-easing-expressive-slow-effects {
140
+ transition-timing-function: var(--_transition-easing-expressive-slow-effects);
141
+ }
142
+ @utility transition-easing-standard-fast-spatial {
143
+ transition-timing-function: var(--_transition-easing-standard-fast-spatial);
144
+ }
145
+ @utility transition-easing-standard-default-spatial {
146
+ transition-timing-function: var(--_transition-easing-standard-default-spatial);
147
+ }
148
+ @utility transition-easing-standard-slow-spatial {
149
+ transition-timing-function: var(--_transition-easing-standard-slow-spatial);
150
+ }
151
+ @utility transition-easing-standard-fast-effects {
152
+ transition-timing-function: var(--_transition-easing-standard-fast-effects);
153
+ }
154
+ @utility transition-easing-standard-default-effects {
155
+ transition-timing-function: var(--_transition-easing-standard-default-effects);
156
+ }
157
+ @utility transition-easing-standard-slow-effects {
158
+ transition-timing-function: var(--_transition-easing-standard-slow-effects);
159
+ }
160
+
161
+ @utility transition-duration-expressive-fast-spatial {
162
+ transition-duration: var(--_transition-duration-expressive-fast-spatial);
163
+ }
164
+ @utility transition-duration-expressive-default-spatial {
165
+ transition-duration: var(--_transition-duration-expressive-default-spatial);
166
+ }
167
+ @utility transition-duration-expressive-slow-spatial {
168
+ transition-duration: var(--_transition-duration-expressive-slow-spatial);
169
+ }
170
+ @utility transition-duration-expressive-fast-effects {
171
+ transition-duration: var(--_transition-duration-expressive-fast-effects);
172
+ }
173
+ @utility transition-duration-expressive-default-effects {
174
+ transition-duration: var(--_transition-duration-expressive-default-effects);
175
+ }
176
+ @utility transition-duration-expressive-slow-effects {
177
+ transition-duration: var(--_transition-duration-expressive-slow-effects);
178
+ }
179
+ @utility transition-duration-standard-fast-spatial {
180
+ transition-duration: var(--_transition-duration-standard-fast-spatial);
181
+ }
182
+ @utility transition-duration-standard-default-spatial {
183
+ transition-duration: var(--_transition-duration-standard-default-spatial);
184
+ }
185
+ @utility transition-duration-standard-slow-spatial {
186
+ transition-duration: var(--_transition-duration-standard-slow-spatial);
187
+ }
188
+ @utility transition-duration-standard-fast-effects {
189
+ transition-duration: var(--_transition-duration-standard-fast-effects);
190
+ }
191
+ @utility transition-duration-standard-default-effects {
192
+ transition-duration: var(--_transition-duration-standard-default-effects);
193
+ }
194
+ @utility transition-duration-standard-slow-effects {
195
+ transition-duration: var(--_transition-duration-standard-slow-effects);
196
+ }