mtrl 0.0.0

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 (121) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +251 -0
  3. package/index.js +10 -0
  4. package/package.json +17 -0
  5. package/src/components/button/api.js +54 -0
  6. package/src/components/button/button.js +81 -0
  7. package/src/components/button/config.js +8 -0
  8. package/src/components/button/constants.js +63 -0
  9. package/src/components/button/index.js +2 -0
  10. package/src/components/button/styles.scss +231 -0
  11. package/src/components/checkbox/api.js +45 -0
  12. package/src/components/checkbox/checkbox.js +95 -0
  13. package/src/components/checkbox/constants.js +88 -0
  14. package/src/components/checkbox/index.js +2 -0
  15. package/src/components/checkbox/styles.scss +183 -0
  16. package/src/components/container/api.js +42 -0
  17. package/src/components/container/container.js +45 -0
  18. package/src/components/container/index.js +2 -0
  19. package/src/components/container/styles.scss +59 -0
  20. package/src/components/list/constants.js +89 -0
  21. package/src/components/list/index.js +2 -0
  22. package/src/components/list/list-item.js +147 -0
  23. package/src/components/list/list.js +267 -0
  24. package/src/components/list/styles/_list-item.scss +142 -0
  25. package/src/components/list/styles/_list.scss +89 -0
  26. package/src/components/list/styles/_variables.scss +13 -0
  27. package/src/components/list/styles.scss +19 -0
  28. package/src/components/navigation/api.js +43 -0
  29. package/src/components/navigation/constants.js +235 -0
  30. package/src/components/navigation/features/items.js +192 -0
  31. package/src/components/navigation/index.js +2 -0
  32. package/src/components/navigation/nav-item.js +137 -0
  33. package/src/components/navigation/navigation.js +55 -0
  34. package/src/components/navigation/styles/_bar.scss +51 -0
  35. package/src/components/navigation/styles/_base.scss +129 -0
  36. package/src/components/navigation/styles/_drawer.scss +169 -0
  37. package/src/components/navigation/styles/_rail.scss +65 -0
  38. package/src/components/navigation/styles.scss +6 -0
  39. package/src/components/snackbar/api.js +125 -0
  40. package/src/components/snackbar/constants.js +41 -0
  41. package/src/components/snackbar/features.js +69 -0
  42. package/src/components/snackbar/index.js +2 -0
  43. package/src/components/snackbar/position.js +63 -0
  44. package/src/components/snackbar/queue.js +74 -0
  45. package/src/components/snackbar/snackbar.js +70 -0
  46. package/src/components/snackbar/styles.scss +182 -0
  47. package/src/components/switch/api.js +44 -0
  48. package/src/components/switch/constants.js +80 -0
  49. package/src/components/switch/index.js +2 -0
  50. package/src/components/switch/styles.scss +172 -0
  51. package/src/components/switch/switch.js +71 -0
  52. package/src/components/textfield/api.js +49 -0
  53. package/src/components/textfield/constants.js +81 -0
  54. package/src/components/textfield/index.js +2 -0
  55. package/src/components/textfield/styles/base.scss +107 -0
  56. package/src/components/textfield/styles/filled.scss +58 -0
  57. package/src/components/textfield/styles/outlined.scss +66 -0
  58. package/src/components/textfield/styles.scss +6 -0
  59. package/src/components/textfield/textfield.js +68 -0
  60. package/src/core/build/constants.js +51 -0
  61. package/src/core/build/icon.js +78 -0
  62. package/src/core/build/ripple.js +92 -0
  63. package/src/core/build/text.js +54 -0
  64. package/src/core/collection/adapters/base.js +26 -0
  65. package/src/core/collection/adapters/mongodb.js +232 -0
  66. package/src/core/collection/adapters/route.js +201 -0
  67. package/src/core/collection/collection.js +259 -0
  68. package/src/core/collection/list-manager.js +157 -0
  69. package/src/core/compose/base.js +8 -0
  70. package/src/core/compose/component.js +225 -0
  71. package/src/core/compose/features/checkable.js +114 -0
  72. package/src/core/compose/features/disabled.js +25 -0
  73. package/src/core/compose/features/events.js +48 -0
  74. package/src/core/compose/features/icon.js +33 -0
  75. package/src/core/compose/features/index.js +20 -0
  76. package/src/core/compose/features/input.js +92 -0
  77. package/src/core/compose/features/lifecycle.js +69 -0
  78. package/src/core/compose/features/position.js +60 -0
  79. package/src/core/compose/features/ripple.js +32 -0
  80. package/src/core/compose/features/size.js +9 -0
  81. package/src/core/compose/features/style.js +12 -0
  82. package/src/core/compose/features/text.js +17 -0
  83. package/src/core/compose/features/textinput.js +118 -0
  84. package/src/core/compose/features/textlabel.js +28 -0
  85. package/src/core/compose/features/track.js +49 -0
  86. package/src/core/compose/features/variant.js +9 -0
  87. package/src/core/compose/features/withEvents.js +67 -0
  88. package/src/core/compose/index.js +16 -0
  89. package/src/core/compose/pipe.js +69 -0
  90. package/src/core/config.js +140 -0
  91. package/src/core/dom/attributes.js +33 -0
  92. package/src/core/dom/classes.js +70 -0
  93. package/src/core/dom/create.js +133 -0
  94. package/src/core/dom/events.js +175 -0
  95. package/src/core/dom/index.js +5 -0
  96. package/src/core/dom/utils.js +22 -0
  97. package/src/core/index.js +23 -0
  98. package/src/core/layout/index.js +93 -0
  99. package/src/core/state/disabled.js +14 -0
  100. package/src/core/state/emitter.js +63 -0
  101. package/src/core/state/events.js +29 -0
  102. package/src/core/state/index.js +6 -0
  103. package/src/core/state/lifecycle.js +64 -0
  104. package/src/core/state/store.js +112 -0
  105. package/src/core/utils/index.js +39 -0
  106. package/src/core/utils/mobile.js +74 -0
  107. package/src/core/utils/object.js +22 -0
  108. package/src/core/utils/validate.js +37 -0
  109. package/src/index.js +11 -0
  110. package/src/styles/abstract/_base.scss +2 -0
  111. package/src/styles/abstract/_config.scss +28 -0
  112. package/src/styles/abstract/_functions.scss +124 -0
  113. package/src/styles/abstract/_mixins.scss +261 -0
  114. package/src/styles/abstract/_variables.scss +158 -0
  115. package/src/styles/main.scss +78 -0
  116. package/src/styles/themes/_base-theme.scss +49 -0
  117. package/src/styles/themes/_baseline.scss +90 -0
  118. package/src/styles/themes/_forest.scss +71 -0
  119. package/src/styles/themes/_index.scss +6 -0
  120. package/src/styles/themes/_ocean.scss +71 -0
  121. package/src/styles/themes/_sunset.scss +55 -0
package/src/styles/themes/_index.scss ADDED
@@ -0,0 +1,6 @@
1
+ // src/styles/themes/_index.scss
2
+ @forward 'base-theme';
3
+ @forward 'baseline';
4
+ @forward 'ocean';
5
+ @forward 'forest';
6
+ @forward 'sunset';
package/src/styles/themes/_ocean.scss ADDED
@@ -0,0 +1,71 @@
1
+ // src/styles/themes/_ocean.scss
2
+ @use '../abstract/base' as *;
3
+ @use 'base-theme' as *;
4
+
5
+ @include create-theme('ocean') {
6
+ // Key colors generated from seed color #006C9C
7
+ --#{$prefix}-sys-color-primary: #006493;
8
+ --#{$prefix}-sys-color-on-primary: #FFFFFF;
9
+ --#{$prefix}-sys-color-primary-container: #CCE5FF;
10
+ --#{$prefix}-sys-color-on-primary-container: #001E30;
11
+
12
+ --#{$prefix}-sys-color-secondary: #4F616E;
13
+ --#{$prefix}-sys-color-on-secondary: #FFFFFF;
14
+ --#{$prefix}-sys-color-secondary-container: #D2E5F5;
15
+ --#{$prefix}-sys-color-on-secondary-container: #0B1D29;
16
+
17
+ --#{$prefix}-sys-color-tertiary: #625B71;
18
+ --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
19
+ --#{$prefix}-sys-color-tertiary-container: #E9DEFA;
20
+ --#{$prefix}-sys-color-on-tertiary-container: #1E192C;
21
+
22
+ // Neutral colors
23
+ --#{$prefix}-sys-color-surface: #F8FDFF;
24
+ --#{$prefix}-sys-color-surface-dim: #D8E5ED;
25
+ --#{$prefix}-sys-color-surface-bright: #F8FDFF;
26
+ --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
27
+ --#{$prefix}-sys-color-surface-container-low: #F3F8FC;
28
+ --#{$prefix}-sys-color-surface-container: #EDF3F7;
29
+ --#{$prefix}-sys-color-surface-container-high: #E7EDF2;
30
+ --#{$prefix}-sys-color-surface-container-highest: #E1E7EC;
31
+
32
+ --#{$prefix}-sys-color-on-surface: #191C1E;
33
+ --#{$prefix}-sys-color-on-surface-variant: #41484D;
34
+
35
+ --#{$prefix}-sys-color-outline: #71787D;
36
+ --#{$prefix}-sys-color-outline-variant: #C1C8CD;
37
+
38
+ &[data-theme-mode="dark"] {
39
+ // Key colors
40
+ --#{$prefix}-sys-color-primary: #8DCDFF;
41
+ --#{$prefix}-sys-color-on-primary: #003351;
42
+ --#{$prefix}-sys-color-primary-container: #004B74;
43
+ --#{$prefix}-sys-color-on-primary-container: #CCE5FF;
44
+
45
+ --#{$prefix}-sys-color-secondary: #B6C9D8;
46
+ --#{$prefix}-sys-color-on-secondary: #21323E;
47
+ --#{$prefix}-sys-color-secondary-container: #374956;
48
+ --#{$prefix}-sys-color-on-secondary-container: #D2E5F5;
49
+
50
+ --#{$prefix}-sys-color-tertiary: #CCC2DC;
51
+ --#{$prefix}-sys-color-on-tertiary: #332D41;
52
+ --#{$prefix}-sys-color-tertiary-container: #4A4458;
53
+ --#{$prefix}-sys-color-on-tertiary-container: #E9DEFA;
54
+
55
+ // Neutral colors
56
+ --#{$prefix}-sys-color-surface: #191C1E;
57
+ --#{$prefix}-sys-color-surface-dim: #101416;
58
+ --#{$prefix}-sys-color-surface-bright: #373B3D;
59
+ --#{$prefix}-sys-color-surface-container-lowest: #0C0E10;
60
+ --#{$prefix}-sys-color-surface-container-low: #191C1E;
61
+ --#{$prefix}-sys-color-surface-container: #1D2022;
62
+ --#{$prefix}-sys-color-surface-container-high: #272A2C;
63
+ --#{$prefix}-sys-color-surface-container-highest: #323536;
64
+
65
+ --#{$prefix}-sys-color-on-surface: #E1E3E4;
66
+ --#{$prefix}-sys-color-on-surface-variant: #C1C8CD;
67
+
68
+ --#{$prefix}-sys-color-outline: #8B9297;
69
+ --#{$prefix}-sys-color-outline-variant: #41484D;
70
+ }
71
+ }
package/src/styles/themes/_sunset.scss ADDED
@@ -0,0 +1,55 @@
1
+ // src/styles/themes/_sunset.scss
2
+ @use '../abstract/base' as *;
3
+ @use 'base-theme' as *;
4
+
5
+ @include create-theme('sunset') {
6
+ // Key colors generated from seed color #D35400
7
+ --#{$prefix}-sys-color-primary: #B34700;
8
+ --#{$prefix}-sys-color-on-primary: #FFFFFF;
9
+ --#{$prefix}-sys-color-primary-container: #FFDBC8;
10
+ --#{$prefix}-sys-color-on-primary-container: #3A1500;
11
+
12
+ --#{$prefix}-sys-color-secondary: #775648;
13
+ --#{$prefix}-sys-color-on-secondary: #FFFFFF;
14
+ --#{$prefix}-sys-color-secondary-container: #FFDBD0;
15
+ --#{$prefix}-sys-color-on-secondary-container: #2C160C;
16
+
17
+ --#{$prefix}-sys-color-tertiary: #705C2E;
18
+ --#{$prefix}-sys-color-on-tertiary: #FFFFFF;
19
+ --#{$prefix}-sys-color-tertiary-container: #FCDFAA;
20
+ --#{$prefix}-sys-color-on-tertiary-container: #261A00;
21
+
22
+ // Neutral colors
23
+ --#{$prefix}-sys-color-surface: #FFFBFF;
24
+ --#{$prefix}-sys-color-surface-dim: #E5E1E6;
25
+ --#{$prefix}-sys-color-surface-bright: #FFFBFF;
26
+ --#{$prefix}-sys-color-surface-container-lowest: #FFFFFF;
27
+ --#{$prefix}-sys-color-surface-container-low: #FBF1F2;
28
+ --#{$prefix}-sys-color-surface-container: #F3EBE7;
29
+ --#{$prefix}-sys-color-surface-container-high: #EDE5E1;
30
+ --#{$prefix}-sys-color-surface-container-highest: #E7DFDB;
31
+
32
+ --#{$prefix}-sys-color-on-surface: #201A18;
33
+ --#{$prefix}-sys-color-on-surface-variant: #53433E;
34
+
35
+ --#{$prefix}-sys-color-outline: #85736D;
36
+ --#{$prefix}-sys-color-outline-variant: #D8C2BB;
37
+
38
+ &[data-theme-mode="dark"] {
39
+ --#{$prefix}-sys-color-primary: #FFB686;
40
+ --#{$prefix}-sys-color-on-primary: #5C2800;
41
+ --#{$prefix}-sys-color-primary-container: #833B00;
42
+ --#{$prefix}-sys-color-on-primary-container: #FFE0CC;
43
+
44
+ --#{$prefix}-sys-color-secondary: #FFB98C;
45
+ --#{$prefix}-sys-color-on-secondary: #492900;
46
+ --#{$prefix}-sys-color-secondary-container: #663D00;
47
+ --#{$prefix}-sys-color-on-secondary-container: #FFE5D0;
48
+
49
+ --#{$prefix}-sys-color-surface: #201210;
50
+ --#{$prefix}-sys-color-on-surface: #FFD9C7;
51
+ --#{$prefix}-sys-color-surface-container: #2B1714;
52
+
53
+ --#{$prefix}-sys-color-outline: #B89784;
54
+ }
55
+ }