@expressivecss/expressive 0.1.0-alpha.3 → 0.1.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 (152) hide show
  1. package/LICENSE +82 -2
  2. package/README.md +153 -43
  3. package/dist/css/expressive.css +7066 -9658
  4. package/dist/css/expressive.css.map +1 -0
  5. package/dist/css/expressive.min.css +1 -1
  6. package/dist/css/expressive.min.css.map +1 -0
  7. package/dist/js/expressive.cjs +7451 -0
  8. package/dist/js/expressive.cjs.map +7 -0
  9. package/dist/js/expressive.js +7313 -8099
  10. package/dist/js/expressive.js.map +7 -1
  11. package/dist/js/expressive.min.js +75 -1
  12. package/dist/js/expressive.min.js.map +7 -1
  13. package/dist/js/expressive.mjs +7222 -7998
  14. package/dist/js/expressive.mjs.map +7 -1
  15. package/dist/{js → types}/components/autocomplete.d.ts +10 -1
  16. package/dist/{js → types}/components/buttons.d.ts +11 -1
  17. package/dist/{js → types}/components/cards.d.ts +10 -1
  18. package/dist/{js → types}/components/carousel.d.ts +4 -5
  19. package/dist/{js/forms/character-counter.d.ts → types/components/characterCounter.d.ts} +1 -1
  20. package/dist/{js → types}/components/chips.d.ts +1 -1
  21. package/dist/{js → types}/components/collapsible.d.ts +1 -1
  22. package/dist/{js → types}/components/datepicker.d.ts +63 -2
  23. package/dist/{js → types}/components/dropdown.d.ts +3 -3
  24. package/dist/types/components/index.d.ts +23 -0
  25. package/dist/{js/components/materialbox.d.ts → types/components/lightbox.d.ts} +21 -21
  26. package/dist/{js → types}/components/modal.d.ts +1 -1
  27. package/dist/{js → types}/components/parallax.d.ts +11 -5
  28. package/dist/{js → types}/components/pushpin.d.ts +1 -1
  29. package/dist/{js/forms → types/components}/range.d.ts +3 -3
  30. package/dist/types/components/registry.d.ts +107 -0
  31. package/dist/{js → types}/components/scrollspy.d.ts +6 -9
  32. package/dist/{js/forms → types/components}/select.d.ts +11 -2
  33. package/dist/{js → types}/components/sidenav.d.ts +1 -1
  34. package/dist/{js → types}/components/slider.d.ts +3 -2
  35. package/dist/{js → types}/components/tabs.d.ts +3 -2
  36. package/dist/{js/components/tap-target.d.ts → types/components/tapTarget.d.ts} +2 -2
  37. package/dist/{js → types}/components/timepicker.d.ts +13 -5
  38. package/dist/{js/components/toast.d.ts → types/components/toasts.d.ts} +28 -4
  39. package/dist/{js → types}/components/tooltip.d.ts +2 -2
  40. package/dist/types/core/bounding.d.ts +6 -0
  41. package/dist/{js/foundation → types/core}/component.d.ts +1 -1
  42. package/dist/types/core/edges.d.ts +6 -0
  43. package/dist/{js/foundation → types/core}/utils.d.ts +21 -14
  44. package/dist/types/index.d.ts +6 -0
  45. package/dist/{js/plugins/docked-display.d.ts → types/plugins/dockedDisplayPlugin.d.ts} +7 -0
  46. package/package.json +60 -36
  47. package/src/sass/README.md +200 -0
  48. package/src/sass/abstracts/_breakpoints.scss +69 -0
  49. package/src/sass/abstracts/_elevation.scss +34 -0
  50. package/src/sass/abstracts/_index.scss +7 -0
  51. package/src/sass/abstracts/_mixins.scss +171 -0
  52. package/src/sass/abstracts/_variables.scss +57 -0
  53. package/src/{scss/layout/_table.scss → sass/base/_global.scss} +64 -2
  54. package/src/{scss/layout → sass/base}/_grid.scss +6 -6
  55. package/src/sass/base/_index.scss +6 -0
  56. package/src/{scss/foundation → sass/base}/_normalize.scss +51 -139
  57. package/src/sass/base/_typography.scss +90 -0
  58. package/src/sass/components/_badges.scss +77 -0
  59. package/src/{scss → sass}/components/_breadcrumb.scss +2 -0
  60. package/src/sass/components/_buttons.scss +407 -0
  61. package/src/sass/components/_cards.scss +328 -0
  62. package/src/{scss → sass}/components/_carousel.scss +5 -3
  63. package/src/sass/components/_chips.scss +140 -0
  64. package/src/sass/components/_collapsible.scss +81 -0
  65. package/src/{scss → sass}/components/_collection.scss +2 -2
  66. package/src/{scss/components/_date-picker.scss → sass/components/_datepicker.scss} +51 -44
  67. package/src/sass/components/_docked-display.scss +11 -0
  68. package/src/sass/components/_dropdown.scss +129 -0
  69. package/src/{scss/components/_material-icons.scss → sass/components/_icons-material-design.scss} +2 -0
  70. package/src/sass/components/_index.scss +35 -0
  71. package/src/{scss/components/_material-box.scss → sass/components/_lightbox.scss} +6 -4
  72. package/src/sass/components/_modal.scss +144 -0
  73. package/src/sass/components/_navbar.scss +345 -0
  74. package/src/{scss/layout/_footer.scss → sass/components/_page-footer.scss} +7 -6
  75. package/src/{scss → sass}/components/_pagination.scss +4 -3
  76. package/src/{scss → sass}/components/_parallax.scss +4 -1
  77. package/src/{scss → sass}/components/_preloader.scss +19 -97
  78. package/src/{scss → sass}/components/_pulse.scss +2 -0
  79. package/src/sass/components/_pushpin.scss +11 -0
  80. package/src/{scss → sass}/components/_sidenav.scss +99 -82
  81. package/src/{scss → sass}/components/_slider.scss +3 -1
  82. package/src/{scss/components/_table-of-contents.scss → sass/components/_table_of_contents.scss} +2 -0
  83. package/src/sass/components/_tabs.scss +232 -0
  84. package/src/{scss/components/_tap-target.scss → sass/components/_tapTarget.scss} +24 -22
  85. package/src/{scss/components/_time-picker.scss → sass/components/_timepicker.scss} +56 -56
  86. package/src/sass/components/_toast.scss +260 -0
  87. package/src/sass/components/_toolbar.scss +192 -0
  88. package/src/sass/components/_tooltip.scss +166 -0
  89. package/src/{scss → sass}/components/_transitions.scss +4 -4
  90. package/src/sass/components/forms/_checkboxes.scss +288 -0
  91. package/src/sass/components/forms/_fieldset.scss +128 -0
  92. package/src/{scss → sass/components}/forms/_file-input.scss +11 -9
  93. package/src/{scss → sass/components}/forms/_index.scss +2 -0
  94. package/src/sass/components/forms/_input-fields.scss +326 -0
  95. package/src/sass/components/forms/_radio-buttons.scss +190 -0
  96. package/src/sass/components/forms/_range.scss +310 -0
  97. package/src/sass/components/forms/_select.scss +103 -0
  98. package/src/sass/components/forms/_switches.scss +239 -0
  99. package/src/sass/expressive.scss +60 -0
  100. package/src/sass/tokens/_index.scss +4 -0
  101. package/src/sass/tokens/_reference.scss +265 -0
  102. package/src/sass/tokens/_theme.scss +49 -0
  103. package/src/{scss → sass}/utilities/_helpers.scss +33 -30
  104. package/src/sass/utilities/_index.scss +8 -0
  105. package/src/{scss → sass}/utilities/_spacing.scss +4 -3
  106. package/src/sass/utilities/_typescale.scss +45 -0
  107. package/src/sass/utilities/_visibility.scss +63 -0
  108. package/src/sass/utilities/_z-depth.scss +18 -0
  109. package/dist/js/components/index.d.ts +0 -21
  110. package/dist/js/forms/index.d.ts +0 -4
  111. package/dist/js/foundation/index.d.ts +0 -2
  112. package/dist/js/index.d.ts +0 -52
  113. package/dist/js/plugins/index.d.ts +0 -1
  114. package/src/scss/components/_appbar.scss +0 -454
  115. package/src/scss/components/_badges.scss +0 -77
  116. package/src/scss/components/_buttons.scss +0 -412
  117. package/src/scss/components/_cards.scss +0 -267
  118. package/src/scss/components/_chips.scss +0 -147
  119. package/src/scss/components/_collapsible.scss +0 -84
  120. package/src/scss/components/_dropdown.scss +0 -98
  121. package/src/scss/components/_index.scss +0 -28
  122. package/src/scss/components/_modal.scss +0 -84
  123. package/src/scss/components/_tabs.scss +0 -176
  124. package/src/scss/components/_toast.scss +0 -70
  125. package/src/scss/components/_tooltip.scss +0 -49
  126. package/src/scss/components/_video.scss +0 -15
  127. package/src/scss/expressive.scss +0 -7
  128. package/src/scss/forms/_checkboxes.scss +0 -199
  129. package/src/scss/forms/_input-fields.scss +0 -360
  130. package/src/scss/forms/_radio-buttons.scss +0 -114
  131. package/src/scss/forms/_range.scss +0 -148
  132. package/src/scss/forms/_select.scss +0 -108
  133. package/src/scss/forms/_switches.scss +0 -127
  134. package/src/scss/foundation/_base.scss +0 -71
  135. package/src/scss/foundation/_color-palette.scss +0 -402
  136. package/src/scss/foundation/_index.scss +0 -10
  137. package/src/scss/foundation/_mixins.scss +0 -198
  138. package/src/scss/foundation/_motion.scss +0 -70
  139. package/src/scss/foundation/_shape.scss +0 -30
  140. package/src/scss/foundation/_state-layers.scss +0 -68
  141. package/src/scss/foundation/_theme.scss +0 -238
  142. package/src/scss/foundation/_tokens.scss +0 -511
  143. package/src/scss/foundation/_variables.scss +0 -57
  144. package/src/scss/layout/_index.scss +0 -3
  145. package/src/scss/utilities/_a11y.scss +0 -77
  146. package/src/scss/utilities/_elevation.scss +0 -63
  147. package/src/scss/utilities/_index.scss +0 -7
  148. package/src/scss/utilities/_responsive.scss +0 -62
  149. package/src/scss/utilities/_typography.scss +0 -115
  150. /package/dist/{js/forms → types/behaviors}/forms.d.ts +0 -0
  151. /package/dist/{js/components → types/behaviors}/waves.d.ts +0 -0
  152. /package/src/{scss → sass}/utilities/_colors.scss +0 -0
package/src/scss/foundation/_state-layers.scss DELETED
@@ -1,68 +0,0 @@
1
- // State Layer System
2
- // Generates ::before pseudo-element overlays for interactive state feedback.
3
- // M3 Expressive uses opacity-based state layers rather than color-mix for hover/focus/pressed.
4
-
5
- @mixin state-layer($color: currentColor) {
6
- position: relative;
7
- overflow: hidden;
8
-
9
- &::before {
10
- content: "";
11
- position: absolute;
12
- inset: 0;
13
- border-radius: inherit;
14
- background-color: $color;
15
- opacity: 0;
16
- pointer-events: none;
17
- transition: opacity var(--md-sys-motion-duration-short2, 100ms)
18
- var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
19
- }
20
-
21
- &:hover::before {
22
- opacity: var(--md-sys-state-hover-opacity);
23
- }
24
-
25
- &:focus-visible::before {
26
- opacity: var(--md-sys-state-focus-opacity);
27
- }
28
-
29
- &:active::before {
30
- opacity: var(--md-sys-state-pressed-opacity);
31
- }
32
- }
33
-
34
- @mixin state-layer-dragged($color: currentColor) {
35
- &::before {
36
- background-color: $color;
37
- opacity: var(--md-sys-state-dragged-opacity);
38
- }
39
- }
40
-
41
- // Disabled state helper
42
- @mixin state-disabled(
43
- $container-opacity: 0.12,
44
- $content-opacity: 0.38
45
- ) {
46
- opacity: 1; // Reset parent opacity
47
- pointer-events: none;
48
- cursor: default;
49
-
50
- &::before {
51
- opacity: 0;
52
- }
53
-
54
- // Container
55
- background-color: color-mix(
56
- in srgb,
57
- transparent,
58
- var(--md-sys-color-on-surface) #{$container-opacity * 100}%
59
- );
60
-
61
- // Content
62
- color: color-mix(
63
- in srgb,
64
- transparent,
65
- var(--md-sys-color-on-surface) #{$content-opacity * 100}%
66
- );
67
- box-shadow: none;
68
- }
package/src/scss/foundation/_theme.scss DELETED
@@ -1,238 +0,0 @@
1
- /* System Defaults — Light theme */
2
- :root, :host {
3
- color-scheme: light;
4
-
5
- /* Core colors */
6
- --md-sys-color-primary: var(--md-sys-color-primary-light);
7
- --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
8
- --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
9
- --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
10
- --md-sys-color-secondary: var(--md-sys-color-secondary-light);
11
- --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
12
- --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
13
- --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
14
- --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
15
- --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
16
- --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
17
- --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
18
- --md-sys-color-error: var(--md-sys-color-error-light);
19
- --md-sys-color-on-error: var(--md-sys-color-on-error-light);
20
- --md-sys-color-error-container: var(--md-sys-color-error-container-light);
21
- --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
22
-
23
- /* Surface colors */
24
- --md-sys-color-background: var(--md-sys-color-background-light);
25
- --md-sys-color-on-background: var(--md-sys-color-on-background-light);
26
- --md-sys-color-surface: var(--md-sys-color-surface-light);
27
- --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
28
- --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
29
- --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
30
- --md-sys-color-surface-bright: var(--md-sys-color-surface-bright-light);
31
- --md-sys-color-surface-dim: var(--md-sys-color-surface-dim-light);
32
- --md-sys-color-surface-container-lowest: var(--md-sys-color-surface-container-lowest-light);
33
- --md-sys-color-surface-container-low: var(--md-sys-color-surface-container-low-light);
34
- --md-sys-color-surface-container: var(--md-sys-color-surface-container-light);
35
- --md-sys-color-surface-container-high: var(--md-sys-color-surface-container-high-light);
36
- --md-sys-color-surface-container-highest: var(--md-sys-color-surface-container-highest-light);
37
-
38
- /* Utility colors */
39
- --md-sys-color-outline: var(--md-sys-color-outline-light);
40
- --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
41
- --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
42
- --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
43
- --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
44
- --md-sys-color-shadow: var(--md-sys-color-shadow-light);
45
- --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
46
- --md-sys-color-scrim: var(--md-sys-color-scrim-light);
47
-
48
- /* Fixed colors */
49
- --md-sys-color-primary-fixed: var(--md-sys-color-primary-fixed-light);
50
- --md-sys-color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim-light);
51
- --md-sys-color-on-primary-fixed: var(--md-sys-color-on-primary-fixed-light);
52
- --md-sys-color-on-primary-fixed-variant: var(--md-sys-color-on-primary-fixed-variant-light);
53
- --md-sys-color-secondary-fixed: var(--md-sys-color-secondary-fixed-light);
54
- --md-sys-color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim-light);
55
- --md-sys-color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed-light);
56
- --md-sys-color-on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant-light);
57
- --md-sys-color-tertiary-fixed: var(--md-sys-color-tertiary-fixed-light);
58
- --md-sys-color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim-light);
59
- --md-sys-color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed-light);
60
- --md-sys-color-on-tertiary-fixed-variant: var(--md-sys-color-on-tertiary-fixed-variant-light);
61
- }
62
-
63
- /* ===================================================================== Dark theme (system preference) */
64
-
65
- @media (prefers-color-scheme: dark) {
66
- :root, :host {
67
- color-scheme: dark;
68
-
69
- /* Core colors */
70
- --md-sys-color-primary: var(--md-sys-color-primary-dark);
71
- --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
72
- --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
73
- --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
74
- --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
75
- --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
76
- --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
77
- --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
78
- --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
79
- --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
80
- --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
81
- --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
82
- --md-sys-color-error: var(--md-sys-color-error-dark);
83
- --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
84
- --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
85
- --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
86
-
87
- /* Surface colors */
88
- --md-sys-color-background: var(--md-sys-color-background-dark);
89
- --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
90
- --md-sys-color-surface: var(--md-sys-color-surface-dark);
91
- --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
92
- --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
93
- --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
94
- --md-sys-color-surface-bright: var(--md-sys-color-surface-bright-dark);
95
- --md-sys-color-surface-dim: var(--md-sys-color-surface-dim-dark);
96
- --md-sys-color-surface-container-lowest: var(--md-sys-color-surface-container-lowest-dark);
97
- --md-sys-color-surface-container-low: var(--md-sys-color-surface-container-low-dark);
98
- --md-sys-color-surface-container: var(--md-sys-color-surface-container-dark);
99
- --md-sys-color-surface-container-high: var(--md-sys-color-surface-container-high-dark);
100
- --md-sys-color-surface-container-highest: var(--md-sys-color-surface-container-highest-dark);
101
-
102
- /* Utility colors */
103
- --md-sys-color-outline: var(--md-sys-color-outline-dark);
104
- --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
105
- --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
106
- --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
107
- --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
108
- --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
109
- --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
110
- --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
111
-
112
- /* Fixed colors */
113
- --md-sys-color-primary-fixed: var(--md-sys-color-primary-fixed-dark);
114
- --md-sys-color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim-dark);
115
- --md-sys-color-on-primary-fixed: var(--md-sys-color-on-primary-fixed-dark);
116
- --md-sys-color-on-primary-fixed-variant: var(--md-sys-color-on-primary-fixed-variant-dark);
117
- --md-sys-color-secondary-fixed: var(--md-sys-color-secondary-fixed-dark);
118
- --md-sys-color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim-dark);
119
- --md-sys-color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed-dark);
120
- --md-sys-color-on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant-dark);
121
- --md-sys-color-tertiary-fixed: var(--md-sys-color-tertiary-fixed-dark);
122
- --md-sys-color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim-dark);
123
- --md-sys-color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed-dark);
124
- --md-sys-color-on-tertiary-fixed-variant: var(--md-sys-color-on-tertiary-fixed-variant-dark);
125
- }
126
- }
127
-
128
- /* ===================================================================== Explicit theme overrides */
129
-
130
- :root[data-theme="light"],
131
- :root[theme="light"] {
132
- color-scheme: light;
133
-
134
- --md-sys-color-primary: var(--md-sys-color-primary-light);
135
- --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
136
- --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
137
- --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
138
- --md-sys-color-secondary: var(--md-sys-color-secondary-light);
139
- --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light);
140
- --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light);
141
- --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light);
142
- --md-sys-color-tertiary: var(--md-sys-color-tertiary-light);
143
- --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-light);
144
- --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-light);
145
- --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-light);
146
- --md-sys-color-error: var(--md-sys-color-error-light);
147
- --md-sys-color-on-error: var(--md-sys-color-on-error-light);
148
- --md-sys-color-error-container: var(--md-sys-color-error-container-light);
149
- --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-light);
150
- --md-sys-color-outline: var(--md-sys-color-outline-light);
151
- --md-sys-color-background: var(--md-sys-color-background-light);
152
- --md-sys-color-on-background: var(--md-sys-color-on-background-light);
153
- --md-sys-color-surface: var(--md-sys-color-surface-light);
154
- --md-sys-color-on-surface: var(--md-sys-color-on-surface-light);
155
- --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-light);
156
- --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-light);
157
- --md-sys-color-surface-bright: var(--md-sys-color-surface-bright-light);
158
- --md-sys-color-surface-dim: var(--md-sys-color-surface-dim-light);
159
- --md-sys-color-surface-container-lowest: var(--md-sys-color-surface-container-lowest-light);
160
- --md-sys-color-surface-container-low: var(--md-sys-color-surface-container-low-light);
161
- --md-sys-color-surface-container: var(--md-sys-color-surface-container-light);
162
- --md-sys-color-surface-container-high: var(--md-sys-color-surface-container-high-light);
163
- --md-sys-color-surface-container-highest: var(--md-sys-color-surface-container-highest-light);
164
- --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-light);
165
- --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-light);
166
- --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-light);
167
- --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-light);
168
- --md-sys-color-shadow: var(--md-sys-color-shadow-light);
169
- --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-light);
170
- --md-sys-color-scrim: var(--md-sys-color-scrim-light);
171
- --md-sys-color-primary-fixed: var(--md-sys-color-primary-fixed-light);
172
- --md-sys-color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim-light);
173
- --md-sys-color-on-primary-fixed: var(--md-sys-color-on-primary-fixed-light);
174
- --md-sys-color-on-primary-fixed-variant: var(--md-sys-color-on-primary-fixed-variant-light);
175
- --md-sys-color-secondary-fixed: var(--md-sys-color-secondary-fixed-light);
176
- --md-sys-color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim-light);
177
- --md-sys-color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed-light);
178
- --md-sys-color-on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant-light);
179
- --md-sys-color-tertiary-fixed: var(--md-sys-color-tertiary-fixed-light);
180
- --md-sys-color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim-light);
181
- --md-sys-color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed-light);
182
- --md-sys-color-on-tertiary-fixed-variant: var(--md-sys-color-on-tertiary-fixed-variant-light);
183
- }
184
-
185
- :root[data-theme="dark"],
186
- :root[theme="dark"] {
187
- color-scheme: dark;
188
-
189
- --md-sys-color-primary: var(--md-sys-color-primary-dark);
190
- --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
191
- --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
192
- --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
193
- --md-sys-color-secondary: var(--md-sys-color-secondary-dark);
194
- --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark);
195
- --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark);
196
- --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark);
197
- --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark);
198
- --md-sys-color-on-tertiary: var(--md-sys-color-on-tertiary-dark);
199
- --md-sys-color-tertiary-container: var(--md-sys-color-tertiary-container-dark);
200
- --md-sys-color-on-tertiary-container: var(--md-sys-color-on-tertiary-container-dark);
201
- --md-sys-color-error: var(--md-sys-color-error-dark);
202
- --md-sys-color-on-error: var(--md-sys-color-on-error-dark);
203
- --md-sys-color-error-container: var(--md-sys-color-error-container-dark);
204
- --md-sys-color-on-error-container: var(--md-sys-color-on-error-container-dark);
205
- --md-sys-color-outline: var(--md-sys-color-outline-dark);
206
- --md-sys-color-background: var(--md-sys-color-background-dark);
207
- --md-sys-color-on-background: var(--md-sys-color-on-background-dark);
208
- --md-sys-color-surface: var(--md-sys-color-surface-dark);
209
- --md-sys-color-on-surface: var(--md-sys-color-on-surface-dark);
210
- --md-sys-color-surface-variant: var(--md-sys-color-surface-variant-dark);
211
- --md-sys-color-on-surface-variant: var(--md-sys-color-on-surface-variant-dark);
212
- --md-sys-color-surface-bright: var(--md-sys-color-surface-bright-dark);
213
- --md-sys-color-surface-dim: var(--md-sys-color-surface-dim-dark);
214
- --md-sys-color-surface-container-lowest: var(--md-sys-color-surface-container-lowest-dark);
215
- --md-sys-color-surface-container-low: var(--md-sys-color-surface-container-low-dark);
216
- --md-sys-color-surface-container: var(--md-sys-color-surface-container-dark);
217
- --md-sys-color-surface-container-high: var(--md-sys-color-surface-container-high-dark);
218
- --md-sys-color-surface-container-highest: var(--md-sys-color-surface-container-highest-dark);
219
- --md-sys-color-outline-variant: var(--md-sys-color-outline-variant-dark);
220
- --md-sys-color-inverse-surface: var(--md-sys-color-inverse-surface-dark);
221
- --md-sys-color-inverse-on-surface: var(--md-sys-color-inverse-on-surface-dark);
222
- --md-sys-color-inverse-primary: var(--md-sys-color-inverse-primary-dark);
223
- --md-sys-color-shadow: var(--md-sys-color-shadow-dark);
224
- --md-sys-color-surface-tint: var(--md-sys-color-surface-tint-dark);
225
- --md-sys-color-scrim: var(--md-sys-color-scrim-dark);
226
- --md-sys-color-primary-fixed: var(--md-sys-color-primary-fixed-dark);
227
- --md-sys-color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim-dark);
228
- --md-sys-color-on-primary-fixed: var(--md-sys-color-on-primary-fixed-dark);
229
- --md-sys-color-on-primary-fixed-variant: var(--md-sys-color-on-primary-fixed-variant-dark);
230
- --md-sys-color-secondary-fixed: var(--md-sys-color-secondary-fixed-dark);
231
- --md-sys-color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim-dark);
232
- --md-sys-color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed-dark);
233
- --md-sys-color-on-secondary-fixed-variant: var(--md-sys-color-on-secondary-fixed-variant-dark);
234
- --md-sys-color-tertiary-fixed: var(--md-sys-color-tertiary-fixed-dark);
235
- --md-sys-color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim-dark);
236
- --md-sys-color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed-dark);
237
- --md-sys-color-on-tertiary-fixed-variant: var(--md-sys-color-on-tertiary-fixed-variant-dark);
238
- }