@sandlada/material-design-css 1.0.3 → 1.1.1

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 (5) hide show
  1. package/package.json +15 -3
  2. package/prebuild-color-blue.css +58 -0
  3. package/prebuild-color-light-green.css +58 -0
  4. package/prebuild-color-pink.css +58 -0
  5. package/prebuild-color-yellow.css +58 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sandlada/material-design-css",
3
- "version": "1.0.3",
3
+ "version": "1.1.1",
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",
@@ -28,8 +28,16 @@
28
28
  "./shape": "./shape.css",
29
29
  "./typography.css": "./typography.css",
30
30
  "./typography": "./typography.css",
31
+ "./prebuild-color-blue.css": "./prebuild-color-blue.css",
32
+ "./prebuild-color-blue": "./prebuild-color-blue.css",
31
33
  "./prebuild-color-green.css": "./prebuild-color-green.css",
32
- "./prebuild-color-green": "./prebuild-color-green.css"
34
+ "./prebuild-color-green": "./prebuild-color-green.css",
35
+ "./prebuild-color-light-green.css": "./prebuild-color-light-green.css",
36
+ "./prebuild-color-light-green": "./prebuild-color-light-green.css",
37
+ "./prebuild-color-pink.css": "./prebuild-color-pink.css",
38
+ "./prebuild-color-pink": "./prebuild-color-pink.css",
39
+ "./prebuild-color-yellow.css": "./prebuild-color-yellow.css",
40
+ "./prebuild-color-yellow": "./prebuild-color-yellow.css"
33
41
  },
34
42
  "style": "index.css",
35
43
  "files": [
@@ -38,6 +46,10 @@
38
46
  "motion.css",
39
47
  "shape.css",
40
48
  "typography.css",
41
- "prebuild-color-green.css"
49
+ "prebuild-color-blue.css",
50
+ "prebuild-color-green.css",
51
+ "prebuild-color-light-green.css",
52
+ "prebuild-color-pink.css",
53
+ "prebuild-color-yellow.css"
42
54
  ]
43
55
  }
package/prebuild-color-blue.css ADDED
@@ -0,0 +1,58 @@
1
+ @layer material-design-system.color.variable {
2
+ :root {
3
+ --md-sys-color-primary-palette-key-color: light-dark(#377f9d, #377f9d);
4
+ --md-sys-color-secondary-palette-key-color: light-dark(#667a85, #667a85);
5
+ --md-sys-color-tertiary-palette-key-color: light-dark(#777397, #777397);
6
+ --md-sys-color-neutral-palette-key-color: light-dark(#73787b, #73787b);
7
+ --md-sys-color-neutral-variant-palette-key-color: light-dark(#70787d, #70787d);
8
+ --md-sys-color-background: light-dark(#f6fafe, #0f1417);
9
+ --md-sys-color-on-background: light-dark(#171c1f, #dfe3e7);
10
+ --md-sys-color-surface: light-dark(#f6fafe, #0f1417);
11
+ --md-sys-color-surface-dim: light-dark(#d6dbde, #0f1417);
12
+ --md-sys-color-surface-bright: light-dark(#f6fafe, #353a3d);
13
+ --md-sys-color-surface-container-lowest: light-dark(#ffffff, #0a0f12);
14
+ --md-sys-color-surface-container-low: light-dark(#f0f4f8, #171c1f);
15
+ --md-sys-color-surface-container: light-dark(#eaeef2, #1b2023);
16
+ --md-sys-color-surface-container-high: light-dark(#e4e9ec, #262b2e);
17
+ --md-sys-color-surface-container-highest: light-dark(#dfe3e7, #303538);
18
+ --md-sys-color-on-surface: light-dark(#171c1f, #dfe3e7);
19
+ --md-sys-color-surface-variant: light-dark(#dce3e9, #40484c);
20
+ --md-sys-color-on-surface-variant: light-dark(#40484c, #c0c8cd);
21
+ --md-sys-color-inverse-surface: light-dark(#2c3134, #dfe3e7);
22
+ --md-sys-color-inverse-on-surface: light-dark(#edf1f5, #2c3134);
23
+ --md-sys-color-outline: light-dark(#70787d, #8a9297);
24
+ --md-sys-color-outline-variant: light-dark(#c0c8cd, #40484c);
25
+ --md-sys-color-shadow: light-dark(#000000, #000000);
26
+ --md-sys-color-scrim: light-dark(#000000, #000000);
27
+ --md-sys-color-surface-tint: light-dark(#146683, #8ccff0);
28
+ --md-sys-color-primary: light-dark(#146683, #8ccff0);
29
+ --md-sys-color-on-primary: light-dark(#ffffff, #003547);
30
+ --md-sys-color-primary-container: light-dark(#bfe9ff, #004d65);
31
+ --md-sys-color-on-primary-container: light-dark(#004d65, #bfe9ff);
32
+ --md-sys-color-inverse-primary: light-dark(#8ccff0, #146683);
33
+ --md-sys-color-secondary: light-dark(#4d616c, #b4cad6);
34
+ --md-sys-color-on-secondary: light-dark(#ffffff, #1f333d);
35
+ --md-sys-color-secondary-container: light-dark(#d0e6f2, #364954);
36
+ --md-sys-color-on-secondary-container: light-dark(#364954, #d0e6f2);
37
+ --md-sys-color-tertiary: light-dark(#5e5b7d, #c7c2ea);
38
+ --md-sys-color-on-tertiary: light-dark(#ffffff, #2f2d4c);
39
+ --md-sys-color-tertiary-container: light-dark(#e4dfff, #464364);
40
+ --md-sys-color-on-tertiary-container: light-dark(#464364, #e4dfff);
41
+ --md-sys-color-error: light-dark(#ba1a1a, #ffb4ab);
42
+ --md-sys-color-on-error: light-dark(#ffffff, #690005);
43
+ --md-sys-color-error-container: light-dark(#ffdad6, #93000a);
44
+ --md-sys-color-on-error-container: light-dark(#93000a, #ffdad6);
45
+ --md-sys-color-primary-fixed: light-dark(#bfe9ff, #bfe9ff);
46
+ --md-sys-color-primary-fixed-dim: light-dark(#8ccff0, #8ccff0);
47
+ --md-sys-color-on-primary-fixed: light-dark(#001f2a, #001f2a);
48
+ --md-sys-color-on-primary-fixed-variant: light-dark(#004d65, #004d65);
49
+ --md-sys-color-secondary-fixed: light-dark(#d0e6f2, #d0e6f2);
50
+ --md-sys-color-secondary-fixed-dim: light-dark(#b4cad6, #b4cad6);
51
+ --md-sys-color-on-secondary-fixed: light-dark(#081e27, #081e27);
52
+ --md-sys-color-on-secondary-fixed-variant: light-dark(#364954, #364954);
53
+ --md-sys-color-tertiary-fixed: light-dark(#e4dfff, #e4dfff);
54
+ --md-sys-color-tertiary-fixed-dim: light-dark(#c7c2ea, #c7c2ea);
55
+ --md-sys-color-on-tertiary-fixed: light-dark(#1a1836, #1a1836);
56
+ --md-sys-color-on-tertiary-fixed-variant: light-dark(#464364, #464364);
57
+ }
58
+ }
package/prebuild-color-light-green.css ADDED
@@ -0,0 +1,58 @@
1
+ @layer material-design-system.color.variable {
2
+ :root {
3
+ --md-sys-color-primary-palette-key-color: light-dark(#388647, #388647);
4
+ --md-sys-color-secondary-palette-key-color: light-dark(#697c68, #697c68);
5
+ --md-sys-color-tertiary-palette-key-color: light-dark(#527e86, #527e86);
6
+ --md-sys-color-neutral-palette-key-color: light-dark(#777777, #777777);
7
+ --md-sys-color-neutral-variant-palette-key-color: light-dark(#777777, #777777);
8
+ --md-sys-color-background: light-dark(#f9f9f9, #131313);
9
+ --md-sys-color-on-background: light-dark(#1b1b1b, #e2e2e2);
10
+ --md-sys-color-surface: light-dark(#f9f9f9, #131313);
11
+ --md-sys-color-surface-dim: light-dark(#dadada, #131313);
12
+ --md-sys-color-surface-bright: light-dark(#f9f9f9, #393939);
13
+ --md-sys-color-surface-container-lowest: light-dark(#ffffff, #0e0e0e);
14
+ --md-sys-color-surface-container-low: light-dark(#f3f3f3, #1b1b1b);
15
+ --md-sys-color-surface-container: light-dark(#eeeeee, #1f1f1f);
16
+ --md-sys-color-surface-container-high: light-dark(#e8e8e8, #2a2a2a);
17
+ --md-sys-color-surface-container-highest: light-dark(#e2e2e2, #353535);
18
+ --md-sys-color-on-surface: light-dark(#1b1b1b, #e2e2e2);
19
+ --md-sys-color-surface-variant: light-dark(#e2e2e2, #474747);
20
+ --md-sys-color-on-surface-variant: light-dark(#474747, #c6c6c6);
21
+ --md-sys-color-inverse-surface: light-dark(#303030, #e2e2e2);
22
+ --md-sys-color-inverse-on-surface: light-dark(#f1f1f1, #303030);
23
+ --md-sys-color-outline: light-dark(#777777, #919191);
24
+ --md-sys-color-outline-variant: light-dark(#c6c6c6, #474747);
25
+ --md-sys-color-shadow: light-dark(#000000, #000000);
26
+ --md-sys-color-scrim: light-dark(#000000, #000000);
27
+ --md-sys-color-surface-tint: light-dark(#1a6c31, #88d990);
28
+ --md-sys-color-primary: light-dark(#1a6c31, #88d990);
29
+ --md-sys-color-on-primary: light-dark(#ffffff, #003913);
30
+ --md-sys-color-primary-container: light-dark(#a3f5aa, #00531f);
31
+ --md-sys-color-on-primary-container: light-dark(#00531f, #a3f5aa);
32
+ --md-sys-color-inverse-primary: light-dark(#88d990, #1a6c31);
33
+ --md-sys-color-secondary: light-dark(#516351, #b8ccb5);
34
+ --md-sys-color-on-secondary: light-dark(#ffffff, #243425);
35
+ --md-sys-color-secondary-container: light-dark(#d4e8d1, #3a4b3a);
36
+ --md-sys-color-on-secondary-container: light-dark(#3a4b3a, #d4e8d1);
37
+ --md-sys-color-tertiary: light-dark(#39656c, #a1ced6);
38
+ --md-sys-color-on-tertiary: light-dark(#ffffff, #00363d);
39
+ --md-sys-color-tertiary-container: light-dark(#bdeaf3, #1f4d54);
40
+ --md-sys-color-on-tertiary-container: light-dark(#1f4d54, #bdeaf3);
41
+ --md-sys-color-error: light-dark(#ba1a1a, #ffb4ab);
42
+ --md-sys-color-on-error: light-dark(#ffffff, #690005);
43
+ --md-sys-color-error-container: light-dark(#ffdad6, #93000a);
44
+ --md-sys-color-on-error-container: light-dark(#93000a, #ffdad6);
45
+ --md-sys-color-primary-fixed: light-dark(#a3f5aa, #a3f5aa);
46
+ --md-sys-color-primary-fixed-dim: light-dark(#88d990, #88d990);
47
+ --md-sys-color-on-primary-fixed: light-dark(#002108, #002108);
48
+ --md-sys-color-on-primary-fixed-variant: light-dark(#00531f, #00531f);
49
+ --md-sys-color-secondary-fixed: light-dark(#d4e8d1, #d4e8d1);
50
+ --md-sys-color-secondary-fixed-dim: light-dark(#b8ccb5, #b8ccb5);
51
+ --md-sys-color-on-secondary-fixed: light-dark(#0f1f11, #0f1f11);
52
+ --md-sys-color-on-secondary-fixed-variant: light-dark(#3a4b3a, #3a4b3a);
53
+ --md-sys-color-tertiary-fixed: light-dark(#bdeaf3, #bdeaf3);
54
+ --md-sys-color-tertiary-fixed-dim: light-dark(#a1ced6, #a1ced6);
55
+ --md-sys-color-on-tertiary-fixed: light-dark(#001f24, #001f24);
56
+ --md-sys-color-on-tertiary-fixed-variant: light-dark(#1f4d54, #1f4d54);
57
+ }
58
+ }
package/prebuild-color-pink.css ADDED
@@ -0,0 +1,58 @@
1
+ @layer material-design-system.color.variable {
2
+ :root {
3
+ --md-sys-color-primary-palette-key-color: light-dark(#ab616d, #ab616d);
4
+ --md-sys-color-secondary-palette-key-color: light-dark(#906e72, #906e72);
5
+ --md-sys-color-tertiary-palette-key-color: light-dark(#947047, #947047);
6
+ --md-sys-color-neutral-palette-key-color: light-dark(#817475, #817475);
7
+ --md-sys-color-neutral-variant-palette-key-color: light-dark(#847374, #847374);
8
+ --md-sys-color-background: light-dark(#fff8f7, #1a1112);
9
+ --md-sys-color-on-background: light-dark(#22191a, #f0dedf);
10
+ --md-sys-color-surface: light-dark(#fff8f7, #1a1112);
11
+ --md-sys-color-surface-dim: light-dark(#e7d6d7, #1a1112);
12
+ --md-sys-color-surface-bright: light-dark(#fff8f7, #413738);
13
+ --md-sys-color-surface-container-lowest: light-dark(#ffffff, #140c0d);
14
+ --md-sys-color-surface-container-low: light-dark(#fff0f1, #22191a);
15
+ --md-sys-color-surface-container: light-dark(#fbeaeb, #261d1e);
16
+ --md-sys-color-surface-container-high: light-dark(#f6e4e5, #312829);
17
+ --md-sys-color-surface-container-highest: light-dark(#f0dedf, #3d3233);
18
+ --md-sys-color-on-surface: light-dark(#22191a, #f0dedf);
19
+ --md-sys-color-surface-variant: light-dark(#f3dddf, #524345);
20
+ --md-sys-color-on-surface-variant: light-dark(#524345, #d7c1c3);
21
+ --md-sys-color-inverse-surface: light-dark(#382e2f, #f0dedf);
22
+ --md-sys-color-inverse-on-surface: light-dark(#feeded, #382e2f);
23
+ --md-sys-color-outline: light-dark(#847374, #9f8c8e);
24
+ --md-sys-color-outline-variant: light-dark(#d7c1c3, #524345);
25
+ --md-sys-color-shadow: light-dark(#000000, #000000);
26
+ --md-sys-color-scrim: light-dark(#000000, #000000);
27
+ --md-sys-color-surface-tint: light-dark(#8e4955, #ffb2bc);
28
+ --md-sys-color-primary: light-dark(#8e4955, #ffb2bc);
29
+ --md-sys-color-on-primary: light-dark(#ffffff, #561d29);
30
+ --md-sys-color-primary-container: light-dark(#ffd9dd, #72333e);
31
+ --md-sys-color-on-primary-container: light-dark(#72333e, #ffd9dd);
32
+ --md-sys-color-inverse-primary: light-dark(#ffb2bc, #8e4955);
33
+ --md-sys-color-secondary: light-dark(#76565a, #e5bdc1);
34
+ --md-sys-color-on-secondary: light-dark(#ffffff, #43292d);
35
+ --md-sys-color-secondary-container: light-dark(#ffd9dd, #5c3f43);
36
+ --md-sys-color-on-secondary-container: light-dark(#5c3f43, #ffd9dd);
37
+ --md-sys-color-tertiary: light-dark(#795831, #eabf8f);
38
+ --md-sys-color-on-tertiary: light-dark(#ffffff, #452b07);
39
+ --md-sys-color-tertiary-container: light-dark(#ffddb9, #5e411c);
40
+ --md-sys-color-on-tertiary-container: light-dark(#5e411c, #ffddb9);
41
+ --md-sys-color-error: light-dark(#ba1a1a, #ffb4ab);
42
+ --md-sys-color-on-error: light-dark(#ffffff, #690005);
43
+ --md-sys-color-error-container: light-dark(#ffdad6, #93000a);
44
+ --md-sys-color-on-error-container: light-dark(#93000a, #ffdad6);
45
+ --md-sys-color-primary-fixed: light-dark(#ffd9dd, #ffd9dd);
46
+ --md-sys-color-primary-fixed-dim: light-dark(#ffb2bc, #ffb2bc);
47
+ --md-sys-color-on-primary-fixed: light-dark(#3b0714, #3b0714);
48
+ --md-sys-color-on-primary-fixed-variant: light-dark(#72333e, #72333e);
49
+ --md-sys-color-secondary-fixed: light-dark(#ffd9dd, #ffd9dd);
50
+ --md-sys-color-secondary-fixed-dim: light-dark(#e5bdc1, #e5bdc1);
51
+ --md-sys-color-on-secondary-fixed: light-dark(#2c1518, #2c1518);
52
+ --md-sys-color-on-secondary-fixed-variant: light-dark(#5c3f43, #5c3f43);
53
+ --md-sys-color-tertiary-fixed: light-dark(#ffddb9, #ffddb9);
54
+ --md-sys-color-tertiary-fixed-dim: light-dark(#eabf8f, #eabf8f);
55
+ --md-sys-color-on-tertiary-fixed: light-dark(#2b1700, #2b1700);
56
+ --md-sys-color-on-tertiary-fixed-variant: light-dark(#5e411c, #5e411c);
57
+ }
58
+ }
package/prebuild-color-yellow.css ADDED
@@ -0,0 +1,58 @@
1
+ @layer material-design-system.color.variable {
2
+ :root {
3
+ --md-sys-color-primary-palette-key-color: light-dark(#a46a32, #a46a32);
4
+ --md-sys-color-secondary-palette-key-color: light-dark(#8e725a, #8e725a);
5
+ --md-sys-color-tertiary-palette-key-color: light-dark(#737b4e, #737b4e);
6
+ --md-sys-color-neutral-palette-key-color: light-dark(#81756d, #81756d);
7
+ --md-sys-color-neutral-variant-palette-key-color: light-dark(#837469, #837469);
8
+ --md-sys-color-background: light-dark(#fff8f5, #19120c);
9
+ --md-sys-color-on-background: light-dark(#221a14, #efe0d5);
10
+ --md-sys-color-surface: light-dark(#fff8f5, #19120c);
11
+ --md-sys-color-surface-dim: light-dark(#e6d7cd, #19120c);
12
+ --md-sys-color-surface-bright: light-dark(#fff8f5, #413730);
13
+ --md-sys-color-surface-container-lowest: light-dark(#ffffff, #130d08);
14
+ --md-sys-color-surface-container-low: light-dark(#fff1e8, #221a14);
15
+ --md-sys-color-surface-container: light-dark(#fbebe1, #261e18);
16
+ --md-sys-color-surface-container-high: light-dark(#f5e5db, #312822);
17
+ --md-sys-color-surface-container-highest: light-dark(#efe0d5, #3c332c);
18
+ --md-sys-color-on-surface: light-dark(#221a14, #efe0d5);
19
+ --md-sys-color-surface-variant: light-dark(#f2dfd1, #51443a);
20
+ --md-sys-color-on-surface-variant: light-dark(#51443a, #d6c3b6);
21
+ --md-sys-color-inverse-surface: light-dark(#372f28, #efe0d5);
22
+ --md-sys-color-inverse-on-surface: light-dark(#feeee3, #372f28);
23
+ --md-sys-color-outline: light-dark(#837469, #9e8e82);
24
+ --md-sys-color-outline-variant: light-dark(#d6c3b6, #51443a);
25
+ --md-sys-color-shadow: light-dark(#000000, #000000);
26
+ --md-sys-color-scrim: light-dark(#000000, #000000);
27
+ --md-sys-color-surface-tint: light-dark(#87521c, #ffb778);
28
+ --md-sys-color-primary: light-dark(#87521c, #ffb778);
29
+ --md-sys-color-on-primary: light-dark(#ffffff, #4c2700);
30
+ --md-sys-color-primary-container: light-dark(#ffdcc1, #6b3b04);
31
+ --md-sys-color-on-primary-container: light-dark(#6b3b04, #ffdcc1);
32
+ --md-sys-color-inverse-primary: light-dark(#ffb778, #87521c);
33
+ --md-sys-color-secondary: light-dark(#735943, #e2c0a5);
34
+ --md-sys-color-on-secondary: light-dark(#ffffff, #412c19);
35
+ --md-sys-color-secondary-container: light-dark(#ffdcc1, #5a422d);
36
+ --md-sys-color-on-secondary-container: light-dark(#5a422d, #ffdcc1);
37
+ --md-sys-color-tertiary: light-dark(#5b6238, #c3cb98);
38
+ --md-sys-color-on-tertiary: light-dark(#ffffff, #2d330e);
39
+ --md-sys-color-tertiary-container: light-dark(#dfe7b2, #434a22);
40
+ --md-sys-color-on-tertiary-container: light-dark(#434a22, #dfe7b2);
41
+ --md-sys-color-error: light-dark(#ba1a1a, #ffb4ab);
42
+ --md-sys-color-on-error: light-dark(#ffffff, #690005);
43
+ --md-sys-color-error-container: light-dark(#ffdad6, #93000a);
44
+ --md-sys-color-on-error-container: light-dark(#93000a, #ffdad6);
45
+ --md-sys-color-primary-fixed: light-dark(#ffdcc1, #ffdcc1);
46
+ --md-sys-color-primary-fixed-dim: light-dark(#ffb778, #ffb778);
47
+ --md-sys-color-on-primary-fixed: light-dark(#2e1500, #2e1500);
48
+ --md-sys-color-on-primary-fixed-variant: light-dark(#6b3b04, #6b3b04);
49
+ --md-sys-color-secondary-fixed: light-dark(#ffdcc1, #ffdcc1);
50
+ --md-sys-color-secondary-fixed-dim: light-dark(#e2c0a5, #e2c0a5);
51
+ --md-sys-color-on-secondary-fixed: light-dark(#2a1706, #2a1706);
52
+ --md-sys-color-on-secondary-fixed-variant: light-dark(#5a422d, #5a422d);
53
+ --md-sys-color-tertiary-fixed: light-dark(#dfe7b2, #dfe7b2);
54
+ --md-sys-color-tertiary-fixed-dim: light-dark(#c3cb98, #c3cb98);
55
+ --md-sys-color-on-tertiary-fixed: light-dark(#181e00, #181e00);
56
+ --md-sys-color-on-tertiary-fixed-variant: light-dark(#434a22, #434a22);
57
+ }
58
+ }