@sandlada/material-design-css 2.1.0-20250827.a → 2.2.0-20250902.b

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.
package/README.md CHANGED
@@ -6,8 +6,7 @@
6
6
  ![NPM Version](https://img.shields.io/npm/v/%40sandlada%2Fmaterial-design-css?label=NPM%20Version&labelColor=%2300531f&color=%23a3f5aa)
7
7
  ![GitHub License](https://img.shields.io/github/license/sandlada/material-design-css?label=License&labelColor=%2300531f&color=%23a3f5aa)
8
8
 
9
-
10
- `@sandlada/material-design-css` is a CSS npm package for Material Design, styles include:
9
+ `@sandlada/material-design-css` is a CSS npm package for Material Design Tokens, styles include:
11
10
 
12
11
  - Color
13
12
  - Palette
@@ -15,6 +14,8 @@
15
14
  - Shape
16
15
  - Typography
17
16
 
17
+ It also **supports TailwindCSS v4**.
18
+
18
19
  ## Installation
19
20
 
20
21
  ```plaintext
@@ -23,18 +24,14 @@ npm i @sandlada/material-design-css
23
24
 
24
25
  ## Import
25
26
 
27
+ ### For CSS
28
+
26
29
  ```typescript
27
30
  // TypeScript File
28
31
  // If you are using Vite or Webpack.
29
32
 
30
- /**
31
- * This will import all styles.
32
- * Loading all styles will cause the style file to be too large, please load as needed.
33
- */
34
- import '@sandlada/material-design-css'
35
-
36
33
  // Load preset, if using color
37
- import '@sandlada/material-design-css/preset'
34
+ import '@sandlada/material-design-css/preset.css'
38
35
 
39
36
  // text-on-surface
40
37
  import '@sandlada/material-design-css/color/text-utilities.css'
@@ -49,16 +46,66 @@ import '@sandlada/material-design-css/palette/text-utilities.css'
49
46
  import '@sandlada/material-design-css/palette/bg-utilities.css'
50
47
 
51
48
  // display-large
52
- import '@sandlada/material-design-css/typography.css'
49
+ import '@sandlada/material-design-css/typography/typography.css'
53
50
 
54
51
  // shape-medium
55
- import '@sandlada/material-design-css/shape.css'
52
+ import '@sandlada/material-design-css/shape/shape.css'
56
53
 
57
54
  // animation-easing-expressive-fast-spatial
58
- import '@sandlada/material-design-css/animation-utilities.css'
55
+ import '@sandlada/material-design-css/motion/animation-utilities.css'
59
56
 
60
57
  // transition-easing-expressive-fast-spatial
61
- import '@sandlada/material-design-css/transition-utilities.css'
58
+ import '@sandlada/material-design-css/motion/transition-utilities.css'
59
+ ```
60
+
61
+ ### For TailwindCSS v4
62
+
63
+ ```css
64
+ @layer theme, base, components, utilities;
65
+
66
+ @import "tailwindcss";
67
+
68
+ /**
69
+ * bg-primary
70
+ * text-on-primary
71
+ */
72
+ @import "@sandlada/material-design-css/color/tailwind-theme.css";
73
+
74
+ /**
75
+ * bg-primary-90
76
+ * text-primary-10
77
+ */
78
+ @import "@sandlada/material-design-css/palette/tailwind-theme.css";
79
+
80
+ /* shape-medium */
81
+ @import "@sandlada/material-design-css/shape/tailwind-theme.css";
82
+
83
+ /*
84
+ * font-display-large
85
+ * text-display-large
86
+ * tracking-display-large
87
+ * leading-display-large
88
+ * font-weight-display-large
89
+ */
90
+ @import "@sandlada/material-design-css/typography/tailwind-theme.css";
91
+
92
+ /* display-large */
93
+ @import "@sandlada/material-design-css/typography/tailwind-utilities.css";
94
+
95
+ /**
96
+ * ease-emphasized
97
+ * duration-[var(--duration-medium1)]
98
+ */
99
+ @import "@sandlada/material-design-css/motion/tailwind-theme.css";
100
+
101
+ @layer base {
102
+ :root:not([dark]) {
103
+ color-scheme: light;
104
+ }
105
+ :root[dark] {
106
+ color-scheme: dark;
107
+ }
108
+ }
62
109
  ```
63
110
 
64
111
  ## Usage
@@ -66,7 +113,7 @@ import '@sandlada/material-design-css/transition-utilities.css'
66
113
  Copy this code into your configured project and you will see a button with color and rounded corners.
67
114
 
68
115
  ```html
69
- <button class="shape-medium bg-primary text-on-primary">
116
+ <button class="rounded-medium bg-primary text-on-primary px-4 py-2">
70
117
  A rounded button
71
118
  </button>
72
119
  ```
@@ -0,0 +1,56 @@
1
+ @theme inline {
2
+ --color-primary-palette-key-color : var(--md-sys-color-primary-palette-key-color, light-dark(#578400, #578400));
3
+ --color-secondary-palette-key-color : var(--md-sys-color-secondary-palette-key-color, light-dark(#697e4a, #697e4a));
4
+ --color-tertiary-palette-key-color : var(--md-sys-color-tertiary-palette-key-color, light-dark(#00885e, #00885e));
5
+ --color-neutral-palette-key-color : var(--md-sys-color-neutral-palette-key-color, light-dark(#75786c, #75786c));
6
+ --color-neutral-variant-palette-key-color: var(--md-sys-color-neutral-variant-palette-key-color, light-dark(#737966, #737966));
7
+ --color-background : var(--md-sys-color-background, light-dark(#f9fbec, #11140c));
8
+ --color-on-background : var(--md-sys-color-on-background, light-dark(#1a1d14, #e2e4d5));
9
+ --color-surface : var(--md-sys-color-surface, light-dark(#f9fbec, #11140c));
10
+ --color-surface-dim : var(--md-sys-color-surface-dim, light-dark(#d9dbcd, #11140c));
11
+ --color-surface-bright : var(--md-sys-color-surface-bright, light-dark(#f9fbec, #373a30));
12
+ --color-surface-container-lowest : var(--md-sys-color-surface-container-lowest, light-dark(#ffffff, #0c0f07));
13
+ --color-surface-container-low : var(--md-sys-color-surface-container-low, light-dark(#f3f5e6, #1a1d14));
14
+ --color-surface-container : var(--md-sys-color-surface-container, light-dark(#edefe1, #1e2118));
15
+ --color-surface-container-high : var(--md-sys-color-surface-container-high, light-dark(#e7e9db, #282b22));
16
+ --color-surface-container-highest : var(--md-sys-color-surface-container-highest, light-dark(#e2e4d5, #33362c));
17
+ --color-on-surface : var(--md-sys-color-on-surface, light-dark(#1a1d14, #e2e4d5));
18
+ --color-surface-variant : var(--md-sys-color-surface-variant, light-dark(#dfe5cf, #434938));
19
+ --color-on-surface-variant : var(--md-sys-color-on-surface-variant, light-dark(#434938, #c3c9b3));
20
+ --color-inverse-surface : var(--md-sys-color-inverse-surface, light-dark(#2e3228, #e2e4d5));
21
+ --color-inverse-on-surface : var(--md-sys-color-inverse-on-surface, light-dark(#f0f2e3, #2e3228));
22
+ --color-outline : var(--md-sys-color-outline, light-dark(#737967, #8d937f));
23
+ --color-outline-variant : var(--md-sys-color-outline-variant, light-dark(#c3c9b3, #434938));
24
+ --color-shadow : var(--md-sys-color-shadow, light-dark(#000000, #000000));
25
+ --color-scrim : var(--md-sys-color-scrim, light-dark(#000000, #000000));
26
+ --color-surface-tint : var(--md-sys-color-surface-tint, light-dark(#446900, #a3d656));
27
+ --color-primary : var(--md-sys-color-primary, light-dark(#000000, #ffffff));
28
+ --color-on-primary : var(--md-sys-color-on-primary, light-dark(#bef36f, #111f00));
29
+ --color-primary-container : var(--md-sys-color-primary-container, light-dark(#2a4200, #b0e563));
30
+ --color-on-primary-container : var(--md-sys-color-on-primary-container, light-dark(#ffffff, #000000));
31
+ --color-inverse-primary : var(--md-sys-color-inverse-primary, light-dark(#a3d656, #446900));
32
+ --color-secondary : var(--md-sys-color-secondary, light-dark(#516533, #b7cf93));
33
+ --color-on-secondary : var(--md-sys-color-on-secondary, light-dark(#ffffff, #111f00));
34
+ --color-secondary-container : var(--md-sys-color-secondary-container, light-dark(#c5dda0, #3a4d1e));
35
+ --color-on-secondary-container : var(--md-sys-color-on-secondary-container, light-dark(#111f00, #d3ebad));
36
+ --color-tertiary : var(--md-sys-color-tertiary, light-dark(#00452e, #8df7c5));
37
+ --color-on-tertiary : var(--md-sys-color-on-tertiary, light-dark(#8df7c5, #002114));
38
+ --color-tertiary-container : var(--md-sys-color-tertiary-container, light-dark(#00855c, #33a376));
39
+ --color-on-tertiary-container : var(--md-sys-color-on-tertiary-container, light-dark(#ffffff, #000000));
40
+ --color-error : var(--md-sys-color-error, light-dark(#ba1a1a, #ffb4ab));
41
+ --color-on-error : var(--md-sys-color-on-error, light-dark(#ffffff, #690005));
42
+ --color-error-container : var(--md-sys-color-error-container, light-dark(#ffdad6, #93000a));
43
+ --color-on-error-container : var(--md-sys-color-on-error-container, light-dark(#410002, #ffdad6));
44
+ --color-primary-fixed : var(--md-sys-color-primary-fixed, light-dark(#446900, #446900));
45
+ --color-primary-fixed-dim : var(--md-sys-color-primary-fixed-dim, light-dark(#324f00, #324f00));
46
+ --color-on-primary-fixed : var(--md-sys-color-on-primary-fixed, light-dark(#ffffff, #ffffff));
47
+ --color-on-primary-fixed-variant : var(--md-sys-color-on-primary-fixed-variant, light-dark(#bef36f, #bef36f));
48
+ --color-secondary-fixed : var(--md-sys-color-secondary-fixed, light-dark(#b7cf93, #b7cf93));
49
+ --color-secondary-fixed-dim : var(--md-sys-color-secondary-fixed-dim, light-dark(#9db37a, #9db37a));
50
+ --color-on-secondary-fixed : var(--md-sys-color-on-secondary-fixed, light-dark(#111f00, #111f00));
51
+ --color-on-secondary-fixed-variant : var(--md-sys-color-on-secondary-fixed-variant, light-dark(#2f4114, #2f4114));
52
+ --color-tertiary-fixed : var(--md-sys-color-tertiary-fixed, light-dark(#006c4a, #006c4a));
53
+ --color-tertiary-fixed-dim : var(--md-sys-color-tertiary-fixed-dim, light-dark(#005237, #005237));
54
+ --color-on-tertiary-fixed : var(--md-sys-color-on-tertiary-fixed, light-dark(#ffffff, #ffffff));
55
+ --color-on-tertiary-fixed-variant : var(--md-sys-color-on-tertiary-fixed-variant, light-dark(#8df7c5, #8df7c5));
56
+ }
@@ -0,0 +1,51 @@
1
+ @theme inline {
2
+ --ease-emphasized : var(--md-sys-motion-easing-emphasized ,cubic-bezier(0.2, 0.0, 0, 1.0));
3
+ --ease-emphasized-decelerate : var(--md-sys-motion-easing-emphasized-decelerate ,cubic-bezier(0.05, 0.7, 0.1, 1.0));
4
+ --ease-emphasized-accelerate : var(--md-sys-motion-easing-emphasized-accelerate ,cubic-bezier(0.3, 0.0, 0.8, 0.15));
5
+ --ease-standard : var(--md-sys-motion-easing-standard ,cubic-bezier(0.2, 0.0, 0, 1.0));
6
+ --ease-standard-decelerate : var(--md-sys-motion-easing-standard-decelerate ,cubic-bezier(0, 0, 0, 1));
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));
20
+ }
21
+
22
+ @theme static {
23
+ --duration-short1 : var(--md-sys-motion-duration-short1, 50ms);
24
+ --duration-short2 : var(--md-sys-motion-duration-short2, 100ms);
25
+ --duration-short3 : var(--md-sys-motion-duration-short3, 150ms);
26
+ --duration-short4 : var(--md-sys-motion-duration-short4, 200ms);
27
+ --duration-medium1 : var(--md-sys-motion-duration-medium1, 250ms);
28
+ --duration-medium2 : var(--md-sys-motion-duration-medium2, 300ms);
29
+ --duration-medium3 : var(--md-sys-motion-duration-medium3, 350ms);
30
+ --duration-medium4 : var(--md-sys-motion-duration-medium4, 400ms);
31
+ --duration-long1 : var(--md-sys-motion-duration-long1, 450ms);
32
+ --duration-long2 : var(--md-sys-motion-duration-long2, 500ms);
33
+ --duration-long3 : var(--md-sys-motion-duration-long3, 550ms);
34
+ --duration-long4 : var(--md-sys-motion-duration-long4, 600ms);
35
+ --duration-extra-long1 : var(--md-sys-motion-duration-extra-long1, 700ms);
36
+ --duration-extra-long2 : var(--md-sys-motion-duration-extra-long2, 800ms);
37
+ --duration-extra-long3 : var(--md-sys-motion-duration-extra-long3, 900ms);
38
+ --duration-extra-long4 : var(--md-sys-motion-duration-extra-long4, 1000ms);
39
+ --duration-expressive-fast-spatial : var(--md-sys-motion-duration-expressive-fast-spatial, 350ms);
40
+ --duration-expressive-default-spatial: var(--md-sys-motion-duration-expressive-default-spatial, 500ms);
41
+ --duration-expressive-slow-spatial : var(--md-sys-motion-duration-expressive-slow-spatial, 650ms);
42
+ --duration-expressive-fast-effects : var(--md-sys-motion-duration-expressive-fast-effects, 150ms);
43
+ --duration-expressive-default-effects: var(--md-sys-motion-duration-expressive-default-effects, 200ms);
44
+ --duration-expressive-slow-effects : var(--md-sys-motion-duration-expressive-slow-effects, 300ms);
45
+ --duration-standard-fast-spatial : var(--md-sys-motion-duration-standard-fast-spatial, 350ms);
46
+ --duration-standard-default-spatial : var(--md-sys-motion-duration-standard-default-spatial, 500ms);
47
+ --duration-standard-slow-spatial : var(--md-sys-motion-duration-standard-slow-spatial, 750ms);
48
+ --duration-standard-fast-effects : var(--md-sys-motion-duration-standard-fast-effects, 150ms);
49
+ --duration-standard-default-effects : var(--md-sys-motion-duration-standard-default-effects, 200ms);
50
+ --duration-standard-slow-effects : var(--md-sys-motion-duration-standard-slow-effects, 300ms);
51
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name" : "@sandlada/material-design-css",
3
- "version" : "2.1.0-20250827.a",
3
+ "version" : "2.2.0-20250902.b",
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",
@@ -23,32 +23,32 @@
23
23
  "motion",
24
24
  "typography",
25
25
  "color",
26
- "palette"
26
+ "palette",
27
+ "tailwindcss",
28
+ "tailwind-plugin"
27
29
  ],
28
30
  "exports": {
29
- ".": {
30
- "style": "./index.css"
31
- },
32
31
  "./*" : "./*",
33
- "./index.css" : "./index.css",
34
32
  "./preset.css" : "./preset.css",
33
+
35
34
  "./color/bg-utilities.css" : "./color/bg-utilities.css",
36
35
  "./color/text-utilities.css" : "./color/text-utilities.css",
36
+ "./color/tailwind-theme.css" : "./color/tailwind-theme.css",
37
+
37
38
  "./motion/transition-utilities.css": "./motion/transition-utilities.css",
38
39
  "./motion/animation-utilities.css" : "./motion/animation-utilities.css",
40
+ "./motion/tailwind-theme.css" : "./motion/tailwind-theme.css",
41
+
39
42
  "./palette/bg-utilities.css" : "./palette/bg-utilities.css",
40
43
  "./palette/text-utilities.css" : "./palette/text-utilities.css",
41
- "./shape.css" : "./shape.css",
42
- "./typography.css" : "./typography.css",
44
+ "./palette/tailwind-theme.css" : "./palette/tailwind-theme.css",
43
45
 
44
- "./tailwind-color/bg-utilities.css" : "./tailwind-color/bg-utilities.css",
45
- "./tailwind-color/text-utilities.css" : "./tailwind-color/text-utilities.css",
46
- "./tailwind-motion/transition-utilities.css" : "./tailwind-motion/transition-utilities.css",
47
- "./tailwind-motion/animation-utilities.css" : "./tailwind-motion/animation-utilities.css",
48
- "./tailwind-palette/bg-utilities.css" : "./tailwind-palette/bg-utilities.css",
49
- "./tailwind-palette/text-utilities.css" : "./tailwind-palette/text-utilities.css",
50
- "./tailwind-shape/shape-utilities.css" : "./tailwind-shape/shape-utilities.css",
51
- "./tailwind-typography/typography-utilities.css": "./tailwind-typography/typography-utilities.css",
46
+ "./shape/shape-utilities.css" : "./shape/shape-utilities.css",
47
+ "./shape/tailwind-theme.css" : "./shape/tailwind-theme.css",
48
+
49
+ "./typography/typography-utilities.css": "./typography/typography-utilities.css",
50
+ "./typography/tailwind-theme.css" : "./typography/tailwind-theme.css",
51
+ "./typography/tailwind-utilities.css" : "./typography/tailwind-utilities.css",
52
52
 
53
53
  "./prebuild-color/blue.css" : "./prebuild-color/blue.css",
54
54
  "./prebuild-color/green.css" : "./prebuild-color/green.css",
@@ -61,26 +61,24 @@
61
61
  "color/bg-utilities.css",
62
62
  "color/text-utilities.css",
63
63
  "color/classic-utilities.css",
64
+ "color/tailwind-theme.css",
64
65
  "motion/transition-utilities.css",
65
66
  "motion/animation-utilities.css",
67
+ "motion/tailwind-theme.css",
66
68
  "palette/bg-utilities.css",
67
69
  "palette/text-utilities.css",
70
+ "palette/tailwind-theme.css",
68
71
  "prebuild-color/blue.css",
69
72
  "prebuild-color/green.css",
70
73
  "prebuild-color/light-green.css",
71
74
  "prebuild-color/pink.css",
72
75
  "prebuild-color/yellow.css",
73
- "index.css",
74
76
  "preset.css",
75
- "shape.css",
76
- "typography.css",
77
- "tailwind-color/bg-utilities.css",
78
- "tailwind-color/text-utilities.css",
79
- "tailwind-motion/transition-utilities.css",
80
- "tailwind-motion/animation-utilities.css",
81
- "tailwind-palette/bg-utilities.css",
82
- "tailwind-palette/text-utilities.css",
83
- "tailwind-shape/shape-utilities.css",
84
- "tailwind-typography/typography-utilities.css"
77
+ "shape/shape-utilities.css",
78
+ "shape/tailwind-theme.css",
79
+ "typography/typography-utilities.css",
80
+ "typography/tailwind-theme.css",
81
+ "typography/tailwind-utilities.css"
82
+
85
83
  ]
86
84
  }