@angular/material 18.2.0-next.1 → 18.2.0-next.2

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 (155) hide show
  1. package/button/_button-base.scss +0 -6
  2. package/checkbox/_checkbox-common.scss +38 -4
  3. package/checkbox/index.d.ts +6 -1
  4. package/core/_core.scss +15 -18
  5. package/core/m2/_typography.scss +129 -2
  6. package/core/style/_elevation.scss +116 -27
  7. package/core/tokens/_m3-tokens.scss +13 -13
  8. package/core/tokens/_token-utils.scss +65 -2
  9. package/core/tokens/m2/mat/_fab-small.scss +1 -2
  10. package/core/tokens/m2/mat/_fab.scss +1 -2
  11. package/core/tokens/m2/mat/_filled-button.scss +1 -2
  12. package/core/tokens/m2/mat/_form-field.scss +0 -2
  13. package/core/tokens/m2/mat/_protected-button.scss +1 -2
  14. package/core/tokens/m2/mdc/_checkbox.scss +1 -2
  15. package/core/tokens/m2/mdc/_filled-button.scss +1 -2
  16. package/core/tokens/m2/mdc/_protected-button.scss +1 -2
  17. package/core/tokens/m3/definitions/_index.scss +94 -0
  18. package/core/tokens/m3/definitions/_md-comp-checkbox.scss +120 -0
  19. package/core/tokens/m3/definitions/_md-comp-circular-progress-indicator.scss +27 -0
  20. package/core/tokens/m3/definitions/_md-comp-data-table.scss +90 -0
  21. package/core/tokens/m3/definitions/_md-comp-dialog.scss +123 -0
  22. package/core/tokens/m3/definitions/_md-comp-elevated-button.scss +87 -0
  23. package/core/tokens/m3/definitions/_md-comp-elevated-card.scss +53 -0
  24. package/core/tokens/m3/definitions/_md-comp-extended-fab-primary.scss +90 -0
  25. package/core/tokens/m3/definitions/_md-comp-extended-fab-secondary.scss +91 -0
  26. package/core/tokens/m3/definitions/_md-comp-extended-fab-tertiary.scss +91 -0
  27. package/core/tokens/m3/definitions/_md-comp-fab-primary-small.scss +59 -0
  28. package/core/tokens/m3/definitions/_md-comp-fab-primary.scss +59 -0
  29. package/core/tokens/m3/definitions/_md-comp-fab-secondary-small.scss +60 -0
  30. package/core/tokens/m3/definitions/_md-comp-fab-secondary.scss +60 -0
  31. package/core/tokens/m3/definitions/_md-comp-fab-tertiary-small.scss +60 -0
  32. package/core/tokens/m3/definitions/_md-comp-fab-tertiary.scss +60 -0
  33. package/core/tokens/m3/definitions/_md-comp-filled-button.scss +85 -0
  34. package/core/tokens/m3/definitions/_md-comp-filled-card.scss +52 -0
  35. package/core/tokens/m3/definitions/_md-comp-filled-icon-button.scss +73 -0
  36. package/core/tokens/m3/definitions/_md-comp-filled-text-field.scss +189 -0
  37. package/core/tokens/m3/definitions/_md-comp-icon-button.scss +64 -0
  38. package/core/tokens/m3/definitions/_md-comp-linear-progress-indicator.scss +29 -0
  39. package/core/tokens/m3/definitions/_md-comp-list.scss +252 -0
  40. package/core/tokens/m3/definitions/_md-comp-outlined-button.scss +80 -0
  41. package/core/tokens/m3/definitions/_md-comp-outlined-card.scss +59 -0
  42. package/core/tokens/m3/definitions/_md-comp-outlined-icon-button.scss +73 -0
  43. package/core/tokens/m3/definitions/_md-comp-outlined-text-field.scss +171 -0
  44. package/core/tokens/m3/definitions/_md-comp-plain-tooltip.scss +51 -0
  45. package/core/tokens/m3/definitions/_md-comp-radio-button.scss +62 -0
  46. package/core/tokens/m3/definitions/_md-comp-secondary-navigation-tab.scss +80 -0
  47. package/core/tokens/m3/definitions/_md-comp-slider.scss +110 -0
  48. package/core/tokens/m3/definitions/_md-comp-snackbar.scss +125 -0
  49. package/core/tokens/m3/definitions/_md-comp-switch.scss +130 -0
  50. package/core/tokens/m3/definitions/_md-comp-text-button.scss +73 -0
  51. package/core/tokens/m3/definitions/_md-ref-palette.scss +100 -0
  52. package/core/tokens/m3/definitions/_md-ref-typeface.scss +14 -0
  53. package/core/tokens/m3/definitions/_md-sys-color.scss +126 -0
  54. package/core/tokens/m3/definitions/_md-sys-elevation.scss +15 -0
  55. package/core/tokens/m3/definitions/_md-sys-motion.scss +46 -0
  56. package/core/tokens/m3/definitions/_md-sys-shape.scss +24 -0
  57. package/core/tokens/m3/definitions/_md-sys-state.scss +13 -0
  58. package/core/tokens/m3/definitions/_md-sys-typescale.scss +308 -0
  59. package/core/tokens/m3/definitions/unused/_md-comp-assist-chip.scss +105 -0
  60. package/core/tokens/m3/definitions/unused/_md-comp-badge.scss +54 -0
  61. package/core/tokens/m3/definitions/unused/_md-comp-banner.scss +71 -0
  62. package/core/tokens/m3/definitions/unused/_md-comp-bottom-app-bar.scss +29 -0
  63. package/core/tokens/m3/definitions/unused/_md-comp-carousel-item.scss +59 -0
  64. package/core/tokens/m3/definitions/unused/_md-comp-date-input-modal.scss +87 -0
  65. package/core/tokens/m3/definitions/unused/_md-comp-date-picker-docked.scss +248 -0
  66. package/core/tokens/m3/definitions/unused/_md-comp-date-picker-modal.scss +313 -0
  67. package/core/tokens/m3/definitions/unused/_md-comp-divider.scss +19 -0
  68. package/core/tokens/m3/definitions/unused/_md-comp-extended-fab-branded.scss +82 -0
  69. package/core/tokens/m3/definitions/unused/_md-comp-extended-fab-surface.scss +86 -0
  70. package/core/tokens/m3/definitions/unused/_md-comp-fab-branded-large.scss +54 -0
  71. package/core/tokens/m3/definitions/unused/_md-comp-fab-branded.scss +54 -0
  72. package/core/tokens/m3/definitions/unused/_md-comp-fab-primary-large.scss +59 -0
  73. package/core/tokens/m3/definitions/unused/_md-comp-fab-secondary-large.scss +60 -0
  74. package/core/tokens/m3/definitions/unused/_md-comp-fab-surface-large.scss +58 -0
  75. package/core/tokens/m3/definitions/unused/_md-comp-fab-surface-small.scss +58 -0
  76. package/core/tokens/m3/definitions/unused/_md-comp-fab-surface.scss +58 -0
  77. package/core/tokens/m3/definitions/unused/_md-comp-fab-tertiary-large.scss +60 -0
  78. package/core/tokens/m3/definitions/unused/_md-comp-filled-autocomplete.scss +269 -0
  79. package/core/tokens/m3/definitions/unused/_md-comp-filled-menu-button.scss +94 -0
  80. package/core/tokens/m3/definitions/unused/_md-comp-filled-select.scss +274 -0
  81. package/core/tokens/m3/definitions/unused/_md-comp-filled-tonal-button.scss +95 -0
  82. package/core/tokens/m3/definitions/unused/_md-comp-filled-tonal-icon-button.scss +80 -0
  83. package/core/tokens/m3/definitions/unused/_md-comp-filter-chip.scss +205 -0
  84. package/core/tokens/m3/definitions/unused/_md-comp-full-screen-dialog.scss +109 -0
  85. package/core/tokens/m3/definitions/unused/_md-comp-input-chip.scss +180 -0
  86. package/core/tokens/m3/definitions/unused/_md-comp-menu.scss +31 -0
  87. package/core/tokens/m3/definitions/unused/_md-comp-navigation-bar.scss +110 -0
  88. package/core/tokens/m3/definitions/unused/_md-comp-navigation-drawer.scss +162 -0
  89. package/core/tokens/m3/definitions/unused/_md-comp-navigation-rail.scss +127 -0
  90. package/core/tokens/m3/definitions/unused/_md-comp-outlined-autocomplete.scss +259 -0
  91. package/core/tokens/m3/definitions/unused/_md-comp-outlined-menu-button.scss +90 -0
  92. package/core/tokens/m3/definitions/unused/_md-comp-outlined-segmented-button.scss +108 -0
  93. package/core/tokens/m3/definitions/unused/_md-comp-outlined-select.scss +264 -0
  94. package/core/tokens/m3/definitions/unused/_md-comp-primary-navigation-tab.scss +117 -0
  95. package/core/tokens/m3/definitions/unused/_md-comp-rich-tooltip.scss +121 -0
  96. package/core/tokens/m3/definitions/unused/_md-comp-scrim.scss +19 -0
  97. package/core/tokens/m3/definitions/unused/_md-comp-search-bar.scss +97 -0
  98. package/core/tokens/m3/definitions/unused/_md-comp-search-view.scss +91 -0
  99. package/core/tokens/m3/definitions/unused/_md-comp-sheet-bottom.scss +39 -0
  100. package/core/tokens/m3/definitions/unused/_md-comp-sheet-floating.scss +28 -0
  101. package/core/tokens/m3/definitions/unused/_md-comp-sheet-side.scss +87 -0
  102. package/core/tokens/m3/definitions/unused/_md-comp-standard-menu-button.scss +94 -0
  103. package/core/tokens/m3/definitions/unused/_md-comp-suggestion-chip.scss +121 -0
  104. package/core/tokens/m3/definitions/unused/_md-comp-time-input.scss +222 -0
  105. package/core/tokens/m3/definitions/unused/_md-comp-time-picker.scss +268 -0
  106. package/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-large.scss +59 -0
  107. package/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-medium.scss +59 -0
  108. package/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-small-centered.scss +62 -0
  109. package/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-small.scss +60 -0
  110. package/esm2022/autocomplete/animations.mjs +1 -2
  111. package/esm2022/checkbox/checkbox-config.mjs +2 -1
  112. package/esm2022/checkbox/checkbox.mjs +11 -5
  113. package/esm2022/core/version.mjs +1 -1
  114. package/esm2022/dialog/dialog-container.mjs +1 -4
  115. package/esm2022/form-field/form-field.mjs +4 -1
  116. package/esm2022/input/input.mjs +36 -3
  117. package/esm2022/list/list-option.mjs +3 -3
  118. package/esm2022/list/testing/selection-list-harness.mjs +2 -2
  119. package/esm2022/tabs/testing/tab-harness.mjs +2 -2
  120. package/esm2022/tooltip/tooltip.mjs +4 -1
  121. package/fesm2022/autocomplete.mjs +0 -1
  122. package/fesm2022/autocomplete.mjs.map +1 -1
  123. package/fesm2022/checkbox.mjs +11 -4
  124. package/fesm2022/checkbox.mjs.map +1 -1
  125. package/fesm2022/core.mjs +1 -1
  126. package/fesm2022/core.mjs.map +1 -1
  127. package/fesm2022/dialog.mjs +0 -3
  128. package/fesm2022/dialog.mjs.map +1 -1
  129. package/fesm2022/form-field.mjs +3 -0
  130. package/fesm2022/form-field.mjs.map +1 -1
  131. package/fesm2022/input.mjs +35 -2
  132. package/fesm2022/input.mjs.map +1 -1
  133. package/fesm2022/list/testing.mjs +1 -1
  134. package/fesm2022/list/testing.mjs.map +1 -1
  135. package/fesm2022/list.mjs +2 -2
  136. package/fesm2022/list.mjs.map +1 -1
  137. package/fesm2022/tabs/testing.mjs +1 -1
  138. package/fesm2022/tabs/testing.mjs.map +1 -1
  139. package/fesm2022/tooltip.mjs +3 -0
  140. package/fesm2022/tooltip.mjs.map +1 -1
  141. package/form-field/_form-field-focus-overlay.scss +1 -1
  142. package/input/index.d.ts +13 -1
  143. package/list/testing/index.d.ts +1 -1
  144. package/package.json +3 -51
  145. package/prebuilt-themes/azure-blue.css +1 -1
  146. package/prebuilt-themes/cyan-orange.css +1 -1
  147. package/prebuilt-themes/magenta-violet.css +1 -1
  148. package/prebuilt-themes/rose-red.css +1 -1
  149. package/schematics/ng-add/index.js +1 -1
  150. package/schematics/ng-add/index.mjs +1 -1
  151. package/schematics/ng-generate/m3-theme/index_bundled.js +2 -2
  152. package/schematics/ng-update/index_bundled.js +31 -31
  153. package/tabs/testing/index.d.ts +1 -1
  154. package/tooltip/index.d.ts +5 -0
  155. package/core/mdc-helpers/_mdc-helpers.scss +0 -60
@@ -0,0 +1,313 @@
1
+ //
2
+ // Design system display name: Material 3
3
+ // Design system version: v0.161
4
+ //
5
+
6
+ @use 'sass:map';
7
+
8
+ @use './md-sys-color';
9
+
10
+ @use './md-sys-elevation';
11
+
12
+ @use './md-sys-shape';
13
+
14
+ @use './md-sys-state';
15
+
16
+ @use './md-sys-typescale';
17
+
18
+ $_default: (
19
+ 'md-sys-color': md-sys-color.values-light(),
20
+ 'md-sys-elevation': md-sys-elevation.values(),
21
+ 'md-sys-shape': md-sys-shape.values(),
22
+ 'md-sys-state': md-sys-state.values(),
23
+ 'md-sys-typescale': md-sys-typescale.values(),
24
+ );
25
+
26
+ @function values($deps: $_default, $exclude-hardcoded-values: false) {
27
+ @return (
28
+ 'container-color': map.get($deps, 'md-sys-color', 'surface'),
29
+ 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),
30
+ 'container-height': if($exclude-hardcoded-values, null, 568px),
31
+ 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),
32
+ 'container-surface-tint-layer-color':
33
+ map.get($deps, 'md-sys-color', 'surface-tint'),
34
+ 'container-width': if($exclude-hardcoded-values, null, 360px),
35
+ 'date-container-height': if($exclude-hardcoded-values, null, 40px),
36
+ 'date-container-shape': map.get($deps, 'md-sys-shape', 'corner-full'),
37
+ 'date-container-width': if($exclude-hardcoded-values, null, 40px),
38
+ 'date-focus-state-layer-opacity':
39
+ map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),
40
+ 'date-hover-state-layer-opacity':
41
+ map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),
42
+ 'date-label-text-font':
43
+ map.get($deps, 'md-sys-typescale', 'body-large-font'),
44
+ 'date-label-text-line-height':
45
+ map.get($deps, 'md-sys-typescale', 'body-large-line-height'),
46
+ 'date-label-text-size':
47
+ map.get($deps, 'md-sys-typescale', 'body-large-size'),
48
+ 'date-label-text-tracking':
49
+ map.get($deps, 'md-sys-typescale', 'body-large-tracking'),
50
+ // Warning: risk of reduced fidelity from using this composite typography token.
51
+ // Tokens md.comp.date-picker.modal.date.label-text.tracking cannot be represented in
52
+ // the "font" property shorthand. Consider using the discrete properties instead.
53
+ 'date-label-text-type':
54
+ if(
55
+ $exclude-hardcoded-values,
56
+ null,
57
+ map.get($deps, 'md-sys-typescale', 'body-large-weight')
58
+ map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(
59
+ $deps,
60
+ 'md-sys-typescale',
61
+ 'body-large-line-height'
62
+ ) map.get($deps, 'md-sys-typescale', 'body-large-font')
63
+ ),
64
+ 'date-label-text-weight':
65
+ map.get($deps, 'md-sys-typescale', 'body-large-weight'),
66
+ 'date-pressed-state-layer-opacity':
67
+ map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),
68
+ 'date-selected-container-color': map.get($deps, 'md-sys-color', 'primary'),
69
+ 'date-selected-focus-state-layer-color':
70
+ map.get($deps, 'md-sys-color', 'on-primary'),
71
+ 'date-selected-hover-state-layer-color':
72
+ map.get($deps, 'md-sys-color', 'on-primary'),
73
+ 'date-selected-label-text-color':
74
+ map.get($deps, 'md-sys-color', 'on-primary'),
75
+ 'date-selected-pressed-state-layer-color':
76
+ map.get($deps, 'md-sys-color', 'on-primary'),
77
+ 'date-state-layer-height': if($exclude-hardcoded-values, null, 40px),
78
+ 'date-state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'),
79
+ 'date-state-layer-width': if($exclude-hardcoded-values, null, 40px),
80
+ 'date-today-container-outline-color':
81
+ map.get($deps, 'md-sys-color', 'primary'),
82
+ 'date-today-container-outline-width':
83
+ if($exclude-hardcoded-values, null, 1px),
84
+ 'date-today-focus-state-layer-color':
85
+ map.get($deps, 'md-sys-color', 'primary'),
86
+ 'date-today-hover-state-layer-color':
87
+ map.get($deps, 'md-sys-color', 'primary'),
88
+ 'date-today-label-text-color': map.get($deps, 'md-sys-color', 'primary'),
89
+ 'date-today-pressed-state-layer-color':
90
+ map.get($deps, 'md-sys-color', 'primary'),
91
+ 'date-unselected-focus-state-layer-color':
92
+ map.get($deps, 'md-sys-color', 'on-surface-variant'),
93
+ 'date-unselected-hover-state-layer-color':
94
+ map.get($deps, 'md-sys-color', 'on-surface-variant'),
95
+ 'date-unselected-label-text-color':
96
+ map.get($deps, 'md-sys-color', 'on-surface'),
97
+ 'date-unselected-pressed-state-layer-color':
98
+ map.get($deps, 'md-sys-color', 'on-surface-variant'),
99
+ 'header-container-height': if($exclude-hardcoded-values, null, 120px),
100
+ 'header-container-width': if($exclude-hardcoded-values, null, 360px),
101
+ 'header-headline-color':
102
+ map.get($deps, 'md-sys-color', 'on-surface-variant'),
103
+ 'header-headline-font':
104
+ map.get($deps, 'md-sys-typescale', 'headline-large-font'),
105
+ 'header-headline-line-height':
106
+ map.get($deps, 'md-sys-typescale', 'headline-large-line-height'),
107
+ 'header-headline-size':
108
+ map.get($deps, 'md-sys-typescale', 'headline-large-size'),
109
+ 'header-headline-tracking':
110
+ map.get($deps, 'md-sys-typescale', 'headline-large-tracking'),
111
+ // Warning: risk of reduced fidelity from using this composite typography token.
112
+ // Tokens md.comp.date-picker.modal.header.headline.tracking cannot be represented in
113
+ // the "font" property shorthand. Consider using the discrete properties instead.
114
+ 'header-headline-type':
115
+ if(
116
+ $exclude-hardcoded-values,
117
+ null,
118
+ map.get($deps, 'md-sys-typescale', 'headline-large-weight')
119
+ map.get($deps, 'md-sys-typescale', 'headline-large-size') #{'/'} map.get(
120
+ $deps,
121
+ 'md-sys-typescale',
122
+ 'headline-large-line-height'
123
+ ) map.get($deps, 'md-sys-typescale', 'headline-large-font')
124
+ ),
125
+ 'header-headline-weight':
126
+ map.get($deps, 'md-sys-typescale', 'headline-large-weight'),
127
+ 'header-supporting-text-color':
128
+ map.get($deps, 'md-sys-color', 'on-surface-variant'),
129
+ 'header-supporting-text-font':
130
+ map.get($deps, 'md-sys-typescale', 'label-large-font'),
131
+ 'header-supporting-text-line-height':
132
+ map.get($deps, 'md-sys-typescale', 'label-large-line-height'),
133
+ 'header-supporting-text-size':
134
+ map.get($deps, 'md-sys-typescale', 'label-large-size'),
135
+ 'header-supporting-text-tracking':
136
+ map.get($deps, 'md-sys-typescale', 'label-large-tracking'),
137
+ // Warning: risk of reduced fidelity from using this composite typography token.
138
+ // Tokens md.comp.date-picker.modal.header.supporting-text.tracking cannot be represented
139
+ // in the "font" property shorthand. Consider using the discrete properties instead.
140
+ 'header-supporting-text-type':
141
+ if(
142
+ $exclude-hardcoded-values,
143
+ null,
144
+ map.get($deps, 'md-sys-typescale', 'label-large-weight')
145
+ map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(
146
+ $deps,
147
+ 'md-sys-typescale',
148
+ 'label-large-line-height'
149
+ ) map.get($deps, 'md-sys-typescale', 'label-large-font')
150
+ ),
151
+ 'header-supporting-text-weight':
152
+ map.get($deps, 'md-sys-typescale', 'label-large-weight'),
153
+ 'range-selection-active-indicator-container-color':
154
+ map.get($deps, 'md-sys-color', 'secondary-container'),
155
+ 'range-selection-active-indicator-container-height':
156
+ if($exclude-hardcoded-values, null, 40px),
157
+ 'range-selection-active-indicator-container-shape':
158
+ map.get($deps, 'md-sys-shape', 'corner-full'),
159
+ 'range-selection-container-elevation':
160
+ map.get($deps, 'md-sys-elevation', 'level0'),
161
+ 'range-selection-container-shape':
162
+ map.get($deps, 'md-sys-shape', 'corner-none'),
163
+ 'range-selection-date-in-range-focus-state-layer-color':
164
+ map.get($deps, 'md-sys-color', 'on-primary-container'),
165
+ 'range-selection-date-in-range-focus-state-layer-opacity':
166
+ map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),
167
+ 'range-selection-date-in-range-hover-state-layer-color':
168
+ map.get($deps, 'md-sys-color', 'on-primary-container'),
169
+ 'range-selection-date-in-range-hover-state-layer-opacity':
170
+ map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),
171
+ 'range-selection-date-in-range-label-text-color':
172
+ map.get($deps, 'md-sys-color', 'on-secondary-container'),
173
+ 'range-selection-date-in-range-pressed-state-layer-color':
174
+ map.get($deps, 'md-sys-color', 'on-primary-container'),
175
+ 'range-selection-date-in-range-pressed-state-layer-opacity':
176
+ map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),
177
+ 'range-selection-header-container-height':
178
+ if($exclude-hardcoded-values, null, 128px),
179
+ 'range-selection-header-headline-font':
180
+ map.get($deps, 'md-sys-typescale', 'title-large-font'),
181
+ 'range-selection-header-headline-line-height':
182
+ map.get($deps, 'md-sys-typescale', 'title-large-line-height'),
183
+ 'range-selection-header-headline-size':
184
+ map.get($deps, 'md-sys-typescale', 'title-large-size'),
185
+ 'range-selection-header-headline-tracking':
186
+ map.get($deps, 'md-sys-typescale', 'title-large-tracking'),
187
+ // Warning: risk of reduced fidelity from using this composite typography token.
188
+ // Tokens md.comp.date-picker.modal.range-selection.header.headline.tracking cannot be
189
+ // represented in the "font" property shorthand. Consider using the discrete properties instead.
190
+ 'range-selection-header-headline-type':
191
+ if(
192
+ $exclude-hardcoded-values,
193
+ null,
194
+ map.get($deps, 'md-sys-typescale', 'title-large-weight')
195
+ map.get($deps, 'md-sys-typescale', 'title-large-size') #{'/'} map.get(
196
+ $deps,
197
+ 'md-sys-typescale',
198
+ 'title-large-line-height'
199
+ ) map.get($deps, 'md-sys-typescale', 'title-large-font')
200
+ ),
201
+ 'range-selection-header-headline-weight':
202
+ map.get($deps, 'md-sys-typescale', 'title-large-weight'),
203
+ 'range-selection-month-subhead-color':
204
+ map.get($deps, 'md-sys-color', 'on-surface-variant'),
205
+ 'range-selection-month-subhead-font':
206
+ map.get($deps, 'md-sys-typescale', 'title-small-font'),
207
+ 'range-selection-month-subhead-line-height':
208
+ map.get($deps, 'md-sys-typescale', 'title-small-line-height'),
209
+ 'range-selection-month-subhead-size':
210
+ map.get($deps, 'md-sys-typescale', 'title-small-size'),
211
+ 'range-selection-month-subhead-tracking':
212
+ map.get($deps, 'md-sys-typescale', 'title-small-tracking'),
213
+ // Warning: risk of reduced fidelity from using this composite typography token.
214
+ // Tokens md.comp.date-picker.modal.range-selection.month.subhead.tracking cannot be
215
+ // represented in the "font" property shorthand. Consider using the discrete properties instead.
216
+ 'range-selection-month-subhead-type':
217
+ if(
218
+ $exclude-hardcoded-values,
219
+ null,
220
+ map.get($deps, 'md-sys-typescale', 'title-small-weight')
221
+ map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get(
222
+ $deps,
223
+ 'md-sys-typescale',
224
+ 'title-small-line-height'
225
+ ) map.get($deps, 'md-sys-typescale', 'title-small-font')
226
+ ),
227
+ 'range-selection-month-subhead-weight':
228
+ map.get($deps, 'md-sys-typescale', 'title-small-weight'),
229
+ 'weekdays-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),
230
+ 'weekdays-label-text-font':
231
+ map.get($deps, 'md-sys-typescale', 'body-large-font'),
232
+ 'weekdays-label-text-line-height':
233
+ map.get($deps, 'md-sys-typescale', 'body-large-line-height'),
234
+ 'weekdays-label-text-size':
235
+ map.get($deps, 'md-sys-typescale', 'body-large-size'),
236
+ 'weekdays-label-text-tracking':
237
+ map.get($deps, 'md-sys-typescale', 'body-large-tracking'),
238
+ // Warning: risk of reduced fidelity from using this composite typography token.
239
+ // Tokens md.comp.date-picker.modal.weekdays.label-text.tracking cannot be represented in
240
+ // the "font" property shorthand. Consider using the discrete properties instead.
241
+ 'weekdays-label-text-type':
242
+ if(
243
+ $exclude-hardcoded-values,
244
+ null,
245
+ map.get($deps, 'md-sys-typescale', 'body-large-weight')
246
+ map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(
247
+ $deps,
248
+ 'md-sys-typescale',
249
+ 'body-large-line-height'
250
+ ) map.get($deps, 'md-sys-typescale', 'body-large-font')
251
+ ),
252
+ 'weekdays-label-text-weight':
253
+ map.get($deps, 'md-sys-typescale', 'body-large-weight'),
254
+ 'year-selection-year-container-height':
255
+ if($exclude-hardcoded-values, null, 36px),
256
+ 'year-selection-year-container-width':
257
+ if($exclude-hardcoded-values, null, 72px),
258
+ 'year-selection-year-focus-state-layer-opacity':
259
+ map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),
260
+ 'year-selection-year-hover-state-layer-opacity':
261
+ map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),
262
+ 'year-selection-year-label-text-font':
263
+ map.get($deps, 'md-sys-typescale', 'body-large-font'),
264
+ 'year-selection-year-label-text-line-height':
265
+ map.get($deps, 'md-sys-typescale', 'body-large-line-height'),
266
+ 'year-selection-year-label-text-size':
267
+ map.get($deps, 'md-sys-typescale', 'body-large-size'),
268
+ 'year-selection-year-label-text-tracking':
269
+ map.get($deps, 'md-sys-typescale', 'body-large-tracking'),
270
+ // Warning: risk of reduced fidelity from using this composite typography token.
271
+ // Tokens md.comp.date-picker.modal.year-selection.year.label-text.tracking cannot be
272
+ // represented in the "font" property shorthand. Consider using the discrete properties instead.
273
+ 'year-selection-year-label-text-type':
274
+ if(
275
+ $exclude-hardcoded-values,
276
+ null,
277
+ map.get($deps, 'md-sys-typescale', 'body-large-weight')
278
+ map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get(
279
+ $deps,
280
+ 'md-sys-typescale',
281
+ 'body-large-line-height'
282
+ ) map.get($deps, 'md-sys-typescale', 'body-large-font')
283
+ ),
284
+ 'year-selection-year-label-text-weight':
285
+ map.get($deps, 'md-sys-typescale', 'body-large-weight'),
286
+ 'year-selection-year-pressed-state-layer-opacity':
287
+ map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'),
288
+ 'year-selection-year-selected-container-color':
289
+ map.get($deps, 'md-sys-color', 'primary'),
290
+ 'year-selection-year-selected-focus-state-layer-color':
291
+ map.get($deps, 'md-sys-color', 'on-primary'),
292
+ 'year-selection-year-selected-hover-state-layer-color':
293
+ map.get($deps, 'md-sys-color', 'on-primary'),
294
+ 'year-selection-year-selected-label-text-color':
295
+ map.get($deps, 'md-sys-color', 'on-primary'),
296
+ 'year-selection-year-selected-pressed-state-layer-color':
297
+ map.get($deps, 'md-sys-color', 'on-primary'),
298
+ 'year-selection-year-state-layer-height':
299
+ if($exclude-hardcoded-values, null, 36px),
300
+ 'year-selection-year-state-layer-shape':
301
+ map.get($deps, 'md-sys-shape', 'corner-full'),
302
+ 'year-selection-year-state-layer-width':
303
+ if($exclude-hardcoded-values, null, 72px),
304
+ 'year-selection-year-unselected-focus-state-layer-color':
305
+ map.get($deps, 'md-sys-color', 'on-surface-variant'),
306
+ 'year-selection-year-unselected-hover-state-layer-color':
307
+ map.get($deps, 'md-sys-color', 'on-surface-variant'),
308
+ 'year-selection-year-unselected-label-text-color':
309
+ map.get($deps, 'md-sys-color', 'on-surface-variant'),
310
+ 'year-selection-year-unselected-pressed-state-layer-color':
311
+ map.get($deps, 'md-sys-color', 'on-surface-variant')
312
+ );
313
+ }
@@ -0,0 +1,19 @@
1
+ //
2
+ // Design system display name: Material 3
3
+ // Design system version: v0.161
4
+ //
5
+
6
+ @use 'sass:map';
7
+
8
+ @use './md-sys-color';
9
+
10
+ $_default: (
11
+ 'md-sys-color': md-sys-color.values-light(),
12
+ );
13
+
14
+ @function values($deps: $_default, $exclude-hardcoded-values: false) {
15
+ @return (
16
+ 'color': map.get($deps, 'md-sys-color', 'outline-variant'),
17
+ 'thickness': if($exclude-hardcoded-values, null, 1px)
18
+ );
19
+ }
@@ -0,0 +1,82 @@
1
+ //
2
+ // Design system display name: Material 3
3
+ // Design system version: v0.161
4
+ //
5
+
6
+ @use 'sass:map';
7
+
8
+ @use './md-sys-color';
9
+
10
+ @use './md-sys-elevation';
11
+
12
+ @use './md-sys-shape';
13
+
14
+ @use './md-sys-state';
15
+
16
+ @use './md-sys-typescale';
17
+
18
+ $_default: (
19
+ 'md-sys-color': md-sys-color.values-light(),
20
+ 'md-sys-elevation': md-sys-elevation.values(),
21
+ 'md-sys-shape': md-sys-shape.values(),
22
+ 'md-sys-state': md-sys-state.values(),
23
+ 'md-sys-typescale': md-sys-typescale.values(),
24
+ );
25
+
26
+ @function values($deps: $_default, $exclude-hardcoded-values: false) {
27
+ @return (
28
+ 'container-color': map.get($deps, 'md-sys-color', 'surface'),
29
+ 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),
30
+ 'container-height': if($exclude-hardcoded-values, null, 56px),
31
+ 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),
32
+ 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),
33
+ 'container-surface-tint-layer-color':
34
+ map.get($deps, 'md-sys-color', 'surface-tint'),
35
+ 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),
36
+ 'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),
37
+ 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),
38
+ 'focus-state-layer-opacity':
39
+ map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),
40
+ 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),
41
+ 'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'),
42
+ 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),
43
+ 'hover-state-layer-opacity':
44
+ map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),
45
+ 'icon-size': if($exclude-hardcoded-values, null, 36px),
46
+ 'label-text-color': map.get($deps, 'md-sys-color', 'on-surface'),
47
+ 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),
48
+ 'label-text-line-height':
49
+ map.get($deps, 'md-sys-typescale', 'label-large-line-height'),
50
+ 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),
51
+ 'label-text-tracking':
52
+ map.get($deps, 'md-sys-typescale', 'label-large-tracking'),
53
+ // Warning: risk of reduced fidelity from using this composite typography token.
54
+ // Tokens md.comp.extended-fab.branded.label-text.tracking cannot be represented in the
55
+ // "font" property shorthand. Consider using the discrete properties instead.
56
+ 'label-text-type':
57
+ if(
58
+ $exclude-hardcoded-values,
59
+ null,
60
+ map.get($deps, 'md-sys-typescale', 'label-large-weight')
61
+ map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(
62
+ $deps,
63
+ 'md-sys-typescale',
64
+ 'label-large-line-height'
65
+ ) map.get($deps, 'md-sys-typescale', 'label-large-font')
66
+ ),
67
+ 'label-text-weight':
68
+ map.get($deps, 'md-sys-typescale', 'label-large-weight'),
69
+ 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),
70
+ 'lowered-focus-container-elevation':
71
+ map.get($deps, 'md-sys-elevation', 'level1'),
72
+ 'lowered-hover-container-elevation':
73
+ map.get($deps, 'md-sys-elevation', 'level2'),
74
+ 'lowered-pressed-container-elevation':
75
+ map.get($deps, 'md-sys-elevation', 'level1'),
76
+ 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),
77
+ 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'),
78
+ 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),
79
+ 'pressed-state-layer-opacity':
80
+ map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')
81
+ );
82
+ }
@@ -0,0 +1,86 @@
1
+ //
2
+ // Design system display name: Material 3
3
+ // Design system version: v0.161
4
+ //
5
+
6
+ @use 'sass:map';
7
+
8
+ @use './md-sys-color';
9
+
10
+ @use './md-sys-elevation';
11
+
12
+ @use './md-sys-shape';
13
+
14
+ @use './md-sys-state';
15
+
16
+ @use './md-sys-typescale';
17
+
18
+ $_default: (
19
+ 'md-sys-color': md-sys-color.values-light(),
20
+ 'md-sys-elevation': md-sys-elevation.values(),
21
+ 'md-sys-shape': md-sys-shape.values(),
22
+ 'md-sys-state': md-sys-state.values(),
23
+ 'md-sys-typescale': md-sys-typescale.values(),
24
+ );
25
+
26
+ @function values($deps: $_default, $exclude-hardcoded-values: false) {
27
+ @return (
28
+ 'container-color': map.get($deps, 'md-sys-color', 'surface'),
29
+ 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),
30
+ 'container-height': if($exclude-hardcoded-values, null, 56px),
31
+ 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),
32
+ 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),
33
+ 'container-surface-tint-layer-color':
34
+ map.get($deps, 'md-sys-color', 'surface-tint'),
35
+ 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),
36
+ 'focus-icon-color': map.get($deps, 'md-sys-color', 'primary'),
37
+ 'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'),
38
+ 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),
39
+ 'focus-state-layer-opacity':
40
+ map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),
41
+ 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),
42
+ 'hover-icon-color': map.get($deps, 'md-sys-color', 'primary'),
43
+ 'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'),
44
+ 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),
45
+ 'hover-state-layer-opacity':
46
+ map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),
47
+ 'icon-color': map.get($deps, 'md-sys-color', 'primary'),
48
+ 'icon-size': if($exclude-hardcoded-values, null, 24px),
49
+ 'label-text-color': map.get($deps, 'md-sys-color', 'primary'),
50
+ 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'),
51
+ 'label-text-line-height':
52
+ map.get($deps, 'md-sys-typescale', 'label-large-line-height'),
53
+ 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'),
54
+ 'label-text-tracking':
55
+ map.get($deps, 'md-sys-typescale', 'label-large-tracking'),
56
+ // Warning: risk of reduced fidelity from using this composite typography token.
57
+ // Tokens md.comp.extended-fab.surface.label-text.tracking cannot be represented in
58
+ // the "font" property shorthand. Consider using the discrete properties instead.
59
+ 'label-text-type':
60
+ if(
61
+ $exclude-hardcoded-values,
62
+ null,
63
+ map.get($deps, 'md-sys-typescale', 'label-large-weight')
64
+ map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get(
65
+ $deps,
66
+ 'md-sys-typescale',
67
+ 'label-large-line-height'
68
+ ) map.get($deps, 'md-sys-typescale', 'label-large-font')
69
+ ),
70
+ 'label-text-weight':
71
+ map.get($deps, 'md-sys-typescale', 'label-large-weight'),
72
+ 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),
73
+ 'lowered-focus-container-elevation':
74
+ map.get($deps, 'md-sys-elevation', 'level1'),
75
+ 'lowered-hover-container-elevation':
76
+ map.get($deps, 'md-sys-elevation', 'level2'),
77
+ 'lowered-pressed-container-elevation':
78
+ map.get($deps, 'md-sys-elevation', 'level1'),
79
+ 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),
80
+ 'pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'),
81
+ 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'),
82
+ 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),
83
+ 'pressed-state-layer-opacity':
84
+ map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')
85
+ );
86
+ }
@@ -0,0 +1,54 @@
1
+ //
2
+ // Design system display name: Material 3
3
+ // Design system version: v0.161
4
+ //
5
+
6
+ @use 'sass:map';
7
+
8
+ @use './md-sys-color';
9
+
10
+ @use './md-sys-elevation';
11
+
12
+ @use './md-sys-shape';
13
+
14
+ @use './md-sys-state';
15
+
16
+ $_default: (
17
+ 'md-sys-color': md-sys-color.values-light(),
18
+ 'md-sys-elevation': md-sys-elevation.values(),
19
+ 'md-sys-shape': md-sys-shape.values(),
20
+ 'md-sys-state': md-sys-state.values(),
21
+ );
22
+
23
+ @function values($deps: $_default, $exclude-hardcoded-values: false) {
24
+ @return (
25
+ 'container-color': map.get($deps, 'md-sys-color', 'surface'),
26
+ 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),
27
+ 'container-height': if($exclude-hardcoded-values, null, 96px),
28
+ 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),
29
+ 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'),
30
+ 'container-surface-tint-layer-color':
31
+ map.get($deps, 'md-sys-color', 'surface-tint'),
32
+ 'container-width': if($exclude-hardcoded-values, null, 96px),
33
+ 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),
34
+ 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),
35
+ 'focus-state-layer-opacity':
36
+ map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),
37
+ 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),
38
+ 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),
39
+ 'hover-state-layer-opacity':
40
+ map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),
41
+ 'icon-size': if($exclude-hardcoded-values, null, 48px),
42
+ 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),
43
+ 'lowered-focus-container-elevation':
44
+ map.get($deps, 'md-sys-elevation', 'level1'),
45
+ 'lowered-hover-container-elevation':
46
+ map.get($deps, 'md-sys-elevation', 'level2'),
47
+ 'lowered-pressed-container-elevation':
48
+ map.get($deps, 'md-sys-elevation', 'level1'),
49
+ 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),
50
+ 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),
51
+ 'pressed-state-layer-opacity':
52
+ map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')
53
+ );
54
+ }
@@ -0,0 +1,54 @@
1
+ //
2
+ // Design system display name: Material 3
3
+ // Design system version: v0.161
4
+ //
5
+
6
+ @use 'sass:map';
7
+
8
+ @use './md-sys-color';
9
+
10
+ @use './md-sys-elevation';
11
+
12
+ @use './md-sys-shape';
13
+
14
+ @use './md-sys-state';
15
+
16
+ $_default: (
17
+ 'md-sys-color': md-sys-color.values-light(),
18
+ 'md-sys-elevation': md-sys-elevation.values(),
19
+ 'md-sys-shape': md-sys-shape.values(),
20
+ 'md-sys-state': md-sys-state.values(),
21
+ );
22
+
23
+ @function values($deps: $_default, $exclude-hardcoded-values: false) {
24
+ @return (
25
+ 'container-color': map.get($deps, 'md-sys-color', 'surface'),
26
+ 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),
27
+ 'container-height': if($exclude-hardcoded-values, null, 56px),
28
+ 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'),
29
+ 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'),
30
+ 'container-surface-tint-layer-color':
31
+ map.get($deps, 'md-sys-color', 'surface-tint'),
32
+ 'container-width': if($exclude-hardcoded-values, null, 56px),
33
+ 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),
34
+ 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),
35
+ 'focus-state-layer-opacity':
36
+ map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'),
37
+ 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'),
38
+ 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),
39
+ 'hover-state-layer-opacity':
40
+ map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'),
41
+ 'icon-size': if($exclude-hardcoded-values, null, 36px),
42
+ 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'),
43
+ 'lowered-focus-container-elevation':
44
+ map.get($deps, 'md-sys-elevation', 'level1'),
45
+ 'lowered-hover-container-elevation':
46
+ map.get($deps, 'md-sys-elevation', 'level2'),
47
+ 'lowered-pressed-container-elevation':
48
+ map.get($deps, 'md-sys-elevation', 'level1'),
49
+ 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'),
50
+ 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'),
51
+ 'pressed-state-layer-opacity':
52
+ map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity')
53
+ );
54
+ }