@db-ux/core-foundations 4.5.4 → 4.6.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 (111) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/README.md +16 -69
  3. package/agent/_instructions.md +84 -0
  4. package/agent/tailwind/Variables.md +11 -9
  5. package/build/styles/bundle.css +4820 -0
  6. package/build/styles/{index.scss → bundle.scss} +5 -0
  7. package/build/styles/colors/_default-color-mappings.scss +3461 -3472
  8. package/build/styles/colors/_placeholder.scss +155 -159
  9. package/build/styles/colors/classes/all.css +2499 -2601
  10. package/build/styles/colors/classes/blue.css +147 -185
  11. package/build/styles/colors/classes/brand.css +147 -185
  12. package/build/styles/colors/classes/burgundy.css +147 -185
  13. package/build/styles/colors/classes/critical.css +147 -185
  14. package/build/styles/colors/classes/cyan.css +147 -185
  15. package/build/styles/colors/classes/green.css +147 -185
  16. package/build/styles/colors/classes/informational.css +147 -185
  17. package/build/styles/colors/classes/light-green.css +147 -185
  18. package/build/styles/colors/classes/neutral.css +147 -185
  19. package/build/styles/colors/classes/orange.css +147 -185
  20. package/build/styles/colors/classes/pink.css +147 -185
  21. package/build/styles/colors/classes/red.css +147 -185
  22. package/build/styles/colors/classes/successful.css +147 -185
  23. package/build/styles/colors/classes/turquoise.css +147 -185
  24. package/build/styles/colors/classes/violet.css +147 -185
  25. package/build/styles/colors/classes/warning.css +147 -185
  26. package/build/styles/colors/classes/yellow.css +147 -185
  27. package/build/styles/defaults/default-code.css +97 -97
  28. package/build/styles/defaults/default-container-properties.css +1 -0
  29. package/build/styles/defaults/default-container-variables.css +1 -0
  30. package/build/styles/defaults/default-elevation.css +1 -1
  31. package/build/styles/defaults/default-fonts.css +1 -1
  32. package/build/styles/defaults/default-icons.css +1 -1
  33. package/build/styles/defaults/default-properties.css +1 -0
  34. package/build/styles/defaults/default-required.css +1 -1
  35. package/build/styles/defaults/default-required.scss +13 -16
  36. package/build/styles/defaults/default-root.css +97 -97
  37. package/build/styles/defaults/default-variables.css +1 -0
  38. package/build/styles/density/_scaling-placeholder.scss +51 -54
  39. package/build/styles/density/_typography-placeholder.scss +54 -60
  40. package/build/styles/density/classes/all.css +759 -907
  41. package/build/styles/density/classes/expressive.css +255 -377
  42. package/build/styles/density/classes/functional.css +255 -377
  43. package/build/styles/density/classes/regular.css +255 -377
  44. package/build/styles/fonts/_font-sizes.scss +10 -16
  45. package/build/styles/fonts/absolute.scss +1 -1
  46. package/build/styles/fonts/classes/all.css +54 -214
  47. package/build/styles/fonts/classes/body/2xl.css +3 -95
  48. package/build/styles/fonts/classes/body/2xs.css +3 -95
  49. package/build/styles/fonts/classes/body/3xl.css +3 -95
  50. package/build/styles/fonts/classes/body/3xs.css +3 -95
  51. package/build/styles/fonts/classes/body/all.css +27 -151
  52. package/build/styles/fonts/classes/body/lg.css +3 -95
  53. package/build/styles/fonts/classes/body/md.css +3 -95
  54. package/build/styles/fonts/classes/body/sm.css +3 -95
  55. package/build/styles/fonts/classes/body/xl.css +3 -95
  56. package/build/styles/fonts/classes/body/xs.css +3 -95
  57. package/build/styles/fonts/classes/headline/2xl.css +3 -95
  58. package/build/styles/fonts/classes/headline/2xs.css +3 -95
  59. package/build/styles/fonts/classes/headline/3xl.css +3 -95
  60. package/build/styles/fonts/classes/headline/3xs.css +3 -95
  61. package/build/styles/fonts/classes/headline/all.css +27 -151
  62. package/build/styles/fonts/classes/headline/lg.css +3 -95
  63. package/build/styles/fonts/classes/headline/md.css +3 -95
  64. package/build/styles/fonts/classes/headline/sm.css +3 -95
  65. package/build/styles/fonts/classes/headline/xl.css +3 -95
  66. package/build/styles/fonts/classes/headline/xs.css +3 -95
  67. package/build/styles/fonts/relative.scss +1 -1
  68. package/build/styles/fonts/rollup.scss +1 -1
  69. package/build/styles/fonts/webpack.scss +1 -1
  70. package/build/styles/helpers/_index.scss +0 -1
  71. package/build/styles/helpers/classes/all.css +0 -34
  72. package/build/styles/helpers/classes/divider.css +0 -34
  73. package/build/styles/helpers/classes/focus.css +0 -34
  74. package/build/styles/icons/absolute.css +1 -1
  75. package/build/styles/icons/absolute.scss +1 -1
  76. package/build/styles/icons/relative.css +1 -1
  77. package/build/styles/icons/relative.scss +1 -1
  78. package/build/styles/icons/rollup.css +1 -1
  79. package/build/styles/icons/rollup.scss +1 -1
  80. package/build/styles/icons/webpack.css +1 -1
  81. package/build/styles/icons/webpack.scss +1 -1
  82. package/build/styles/theme/absolute.css +1 -0
  83. package/build/styles/theme/relative.css +1 -0
  84. package/build/styles/{defaults/default-theme.scss → theme/relative.scss} +3 -6
  85. package/build/styles/theme/rollup.css +1 -0
  86. package/build/styles/theme/webpack.css +1 -0
  87. package/build/tailwind/theme/colors.css +1 -2953
  88. package/build/tailwind/theme/colors.scss +1 -10
  89. package/build/tailwind/theme/dimensions.css +77 -160
  90. package/package.json +4 -4
  91. package/build/styles/absolute.css +0 -10635
  92. package/build/styles/defaults/default-theme.css +0 -97
  93. package/build/styles/helpers/_layer.scss +0 -1
  94. package/build/styles/index.css +0 -4907
  95. package/build/styles/relative.css +0 -10635
  96. package/build/styles/relative.scss +0 -4
  97. package/build/styles/rollup.css +0 -10635
  98. package/build/styles/webpack.css +0 -10635
  99. package/build/tailwind/theme/_variables.scss +0 -77
  100. package/build/tailwind/theme/dimensions.scss +0 -17
  101. /package/build/styles/defaults/{_default-container-properties.scss → default-container-properties.scss} +0 -0
  102. /package/build/styles/defaults/{_default-container-variables.scss → default-container-variables.scss} +0 -0
  103. /package/build/styles/defaults/{_default-properties.scss → default-properties.scss} +0 -0
  104. /package/build/styles/defaults/{_default-variables.scss → default-variables.scss} +0 -0
  105. /package/build/styles/{_absolute.assets-paths.scss → theme/_absolute.assets-paths.scss} +0 -0
  106. /package/build/styles/{_default.assets-paths.scss → theme/_default.assets-paths.scss} +0 -0
  107. /package/build/styles/{_rollup.assets-paths.scss → theme/_rollup.assets-paths.scss} +0 -0
  108. /package/build/styles/{_webpack.assets-paths.scss → theme/_webpack.assets-paths.scss} +0 -0
  109. /package/build/styles/{absolute.scss → theme/absolute.scss} +0 -0
  110. /package/build/styles/{rollup.scss → theme/rollup.scss} +0 -0
  111. /package/build/styles/{webpack.scss → theme/webpack.scss} +0 -0
package/build/styles/density/classes/expressive.css CHANGED
@@ -1,64 +1,4 @@
1
1
  /* Variants for adaptive components like input, select, notification, ... */
2
- @layer variables {}
3
-
4
- @layer variables {}
5
-
6
- @layer variables {}
7
-
8
- @layer variables {}
9
-
10
- @layer variables {}
11
-
12
- @layer variables {}
13
-
14
- @layer variables {}
15
-
16
- @layer variables {}
17
-
18
- @layer variables {}
19
-
20
- @layer variables {}
21
-
22
- @layer variables {}
23
-
24
- @layer variables {}
25
-
26
- @layer variables {}
27
-
28
- @layer variables {}
29
-
30
- @layer variables {}
31
-
32
- @layer variables {}
33
-
34
- @layer variables {}
35
-
36
- @layer variables {}
37
-
38
- @layer variables {}
39
-
40
- @layer variables {}
41
-
42
- @layer variables {}
43
-
44
- @layer variables {}
45
-
46
- @layer variables {}
47
-
48
- @layer variables {}
49
-
50
- @layer variables {}
51
-
52
- @layer variables {}
53
-
54
- @layer variables {}
55
-
56
- @layer variables {}
57
-
58
- @layer variables {}
59
-
60
- @layer variables {}
61
-
62
2
  .db-density-expressive,
63
3
  [data-density=expressive] {
64
4
  font: var(--db-type-body-md);
@@ -67,351 +7,289 @@
67
7
  .db-density-expressive,
68
8
  [data-density=expressive] {
69
9
  font: var(--db-type-body-md);
70
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
10
+ /* Those variables are only for components to calculate heights and change icons */
11
+ --db-icon-font-weight: var(--db-base-body-icon-weight-md);
12
+ --db-icon-font-size: var(--db-base-body-icon-font-size-md);
71
13
  }
72
- @layer variables {
73
- .db-density-expressive,
74
- [data-density=expressive] {
75
- /* Those variables are only for components to calculate heights and change icons */
76
- --db-icon-font-weight: var(--db-base-body-icon-weight-md);
77
- --db-icon-font-size: var(--db-base-body-icon-font-size-md);
78
- }
79
- }
80
-
81
- @layer variables {}
82
-
83
- @layer variables {}
84
-
85
- @layer variables {}
86
-
87
- @layer variables {}
88
-
89
- @layer variables {}
90
-
91
- @layer variables {}
92
-
93
- @layer variables {}
94
-
95
- @layer variables {}
96
-
97
- @layer variables {}
98
-
99
- @layer variables {}
100
-
101
- @layer variables {}
102
-
103
- @layer variables {}
104
-
105
- @layer variables {}
106
14
 
107
15
  .db-density-expressive,
108
16
  [data-density=expressive] {
109
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
17
+ --db-sizing-3xs: var(--db-sizing-expressive-3xs);
18
+ --db-sizing-2xs: var(--db-sizing-expressive-2xs);
19
+ --db-sizing-xs: var(--db-sizing-expressive-xs);
20
+ --db-sizing-sm: var(--db-sizing-expressive-sm);
21
+ --db-sizing-md: var(--db-sizing-expressive-md);
22
+ --db-sizing-lg: var(--db-sizing-expressive-lg);
23
+ --db-sizing-xl: var(--db-sizing-expressive-xl);
24
+ --db-sizing-2xl: var(--db-sizing-expressive-2xl);
25
+ --db-sizing-3xl: var(--db-sizing-expressive-3xl);
26
+ --db-spacing-fixed-3xs: var(--db-spacing-fixed-expressive-3xs);
27
+ --db-spacing-fixed-2xs: var(--db-spacing-fixed-expressive-2xs);
28
+ --db-spacing-fixed-xs: var(--db-spacing-fixed-expressive-xs);
29
+ --db-spacing-fixed-sm: var(--db-spacing-fixed-expressive-sm);
30
+ --db-spacing-fixed-md: var(--db-spacing-fixed-expressive-md);
31
+ --db-spacing-fixed-lg: var(--db-spacing-fixed-expressive-lg);
32
+ --db-spacing-fixed-xl: var(--db-spacing-fixed-expressive-xl);
33
+ --db-spacing-fixed-2xl: var(--db-spacing-fixed-expressive-2xl);
34
+ --db-spacing-fixed-3xl: var(--db-spacing-fixed-expressive-3xl);
35
+ /* stylelint-disable-next-line media-query-no-invalid */
36
+ /* stylelint-disable-next-line at-rule-empty-line-before */
37
+ /* stylelint-disable-next-line media-query-no-invalid */
38
+ /* stylelint-disable-next-line at-rule-empty-line-before */
39
+ /* stylelint-disable-next-line media-query-no-invalid */
40
+ /* stylelint-disable-next-line at-rule-empty-line-before */
110
41
  }
111
- @layer variables {
42
+ @media (width <= 48em) {
112
43
  .db-density-expressive,
113
44
  [data-density=expressive] {
114
- --db-sizing-3xs: var(--db-sizing-expressive-3xs);
115
- --db-sizing-2xs: var(--db-sizing-expressive-2xs);
116
- --db-sizing-xs: var(--db-sizing-expressive-xs);
117
- --db-sizing-sm: var(--db-sizing-expressive-sm);
118
- --db-sizing-md: var(--db-sizing-expressive-md);
119
- --db-sizing-lg: var(--db-sizing-expressive-lg);
120
- --db-sizing-xl: var(--db-sizing-expressive-xl);
121
- --db-sizing-2xl: var(--db-sizing-expressive-2xl);
122
- --db-sizing-3xl: var(--db-sizing-expressive-3xl);
123
- --db-spacing-fixed-3xs: var(--db-spacing-fixed-expressive-3xs);
124
- --db-spacing-fixed-2xs: var(--db-spacing-fixed-expressive-2xs);
125
- --db-spacing-fixed-xs: var(--db-spacing-fixed-expressive-xs);
126
- --db-spacing-fixed-sm: var(--db-spacing-fixed-expressive-sm);
127
- --db-spacing-fixed-md: var(--db-spacing-fixed-expressive-md);
128
- --db-spacing-fixed-lg: var(--db-spacing-fixed-expressive-lg);
129
- --db-spacing-fixed-xl: var(--db-spacing-fixed-expressive-xl);
130
- --db-spacing-fixed-2xl: var(--db-spacing-fixed-expressive-2xl);
131
- --db-spacing-fixed-3xl: var(--db-spacing-fixed-expressive-3xl);
132
- /* stylelint-disable-next-line media-query-no-invalid */
133
- /* stylelint-disable-next-line at-rule-empty-line-before */
134
- /* stylelint-disable-next-line media-query-no-invalid */
135
- /* stylelint-disable-next-line at-rule-empty-line-before */
136
- /* stylelint-disable-next-line media-query-no-invalid */
137
- /* stylelint-disable-next-line at-rule-empty-line-before */
45
+ --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-mobile-3xs);
46
+ --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-mobile-2xs);
47
+ --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-mobile-xs);
48
+ --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-mobile-sm);
49
+ --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-mobile-md);
50
+ --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-mobile-lg);
51
+ --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-mobile-xl);
52
+ --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-mobile-2xl);
53
+ --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-mobile-3xl);
138
54
  }
139
- @media (width <= 48em) {
140
- .db-density-expressive,
141
- [data-density=expressive] {
142
- --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-mobile-3xs);
143
- --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-mobile-2xs);
144
- --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-mobile-xs);
145
- --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-mobile-sm);
146
- --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-mobile-md);
147
- --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-mobile-lg);
148
- --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-mobile-xl);
149
- --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-mobile-2xl);
150
- --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-mobile-3xl);
151
- }
152
- }
153
- @media (48em < width <= 64em) {
154
- .db-density-expressive,
155
- [data-density=expressive] {
156
- --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-tablet-3xs);
157
- --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-tablet-2xs);
158
- --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-tablet-xs);
159
- --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-tablet-sm);
160
- --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-tablet-md);
161
- --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-tablet-lg);
162
- --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-tablet-xl);
163
- --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-tablet-2xl);
164
- --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-tablet-3xl);
165
- }
55
+ }
56
+ @media (48em < width <= 64em) {
57
+ .db-density-expressive,
58
+ [data-density=expressive] {
59
+ --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-tablet-3xs);
60
+ --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-tablet-2xs);
61
+ --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-tablet-xs);
62
+ --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-tablet-sm);
63
+ --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-tablet-md);
64
+ --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-tablet-lg);
65
+ --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-tablet-xl);
66
+ --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-tablet-2xl);
67
+ --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-tablet-3xl);
166
68
  }
167
- @media (64em < width) {
168
- .db-density-expressive,
169
- [data-density=expressive] {
170
- --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-desktop-3xs);
171
- --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-desktop-2xs);
172
- --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-desktop-xs);
173
- --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-desktop-sm);
174
- --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-desktop-md);
175
- --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-desktop-lg);
176
- --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-desktop-xl);
177
- --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-desktop-2xl);
178
- --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-desktop-3xl);
179
- }
69
+ }
70
+ @media (64em < width) {
71
+ .db-density-expressive,
72
+ [data-density=expressive] {
73
+ --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-desktop-3xs);
74
+ --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-desktop-2xs);
75
+ --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-desktop-xs);
76
+ --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-desktop-sm);
77
+ --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-desktop-md);
78
+ --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-desktop-lg);
79
+ --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-desktop-xl);
80
+ --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-desktop-2xl);
81
+ --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-desktop-3xl);
180
82
  }
181
83
  }
182
84
 
183
- @layer variables {}
184
-
185
- @layer variables {}
186
-
187
85
  .db-density-expressive,
188
86
  [data-density=expressive] {
189
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
87
+ /* stylelint-disable-next-line media-query-no-invalid */
88
+ /* stylelint-disable-next-line at-rule-empty-line-before */
89
+ /* stylelint-disable-next-line media-query-no-invalid */
90
+ /* stylelint-disable-next-line at-rule-empty-line-before */
91
+ /* stylelint-disable-next-line media-query-no-invalid */
92
+ /* stylelint-disable-next-line at-rule-empty-line-before */
190
93
  }
191
- @layer variables {
94
+ @media (width <= 48em) {
192
95
  .db-density-expressive,
193
96
  [data-density=expressive] {
194
- /* stylelint-disable-next-line media-query-no-invalid */
195
- /* stylelint-disable-next-line at-rule-empty-line-before */
196
- /* stylelint-disable-next-line media-query-no-invalid */
197
- /* stylelint-disable-next-line at-rule-empty-line-before */
198
- /* stylelint-disable-next-line media-query-no-invalid */
199
- /* stylelint-disable-next-line at-rule-empty-line-before */
97
+ --db-type-headline-3xs: var(--db-typography-expressive-mobile-headline-3xs);
98
+ --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-headline-3xs);
99
+ --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-headline-3xs);
100
+ --db-type-headline-2xs: var(--db-typography-expressive-mobile-headline-2xs);
101
+ --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-headline-2xs);
102
+ --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-headline-2xs);
103
+ --db-type-headline-xs: var(--db-typography-expressive-mobile-headline-xs);
104
+ --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-headline-xs);
105
+ --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-headline-xs);
106
+ --db-type-headline-sm: var(--db-typography-expressive-mobile-headline-sm);
107
+ --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-headline-sm);
108
+ --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-headline-sm);
109
+ --db-type-headline-md: var(--db-typography-expressive-mobile-headline-md);
110
+ --db-base-headline-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-headline-md);
111
+ --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-headline-md);
112
+ --db-type-headline-lg: var(--db-typography-expressive-mobile-headline-lg);
113
+ --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-headline-lg);
114
+ --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-headline-lg);
115
+ --db-type-headline-xl: var(--db-typography-expressive-mobile-headline-xl);
116
+ --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-headline-xl);
117
+ --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-headline-xl);
118
+ --db-type-headline-2xl: var(--db-typography-expressive-mobile-headline-2xl);
119
+ --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-expressive-mobile-headline-2xl);
120
+ --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-mobile-headline-2xl);
121
+ --db-type-headline-3xl: var(--db-typography-expressive-mobile-headline-3xl);
122
+ --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-expressive-mobile-headline-3xl);
123
+ --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-headline-3xl);
200
124
  }
201
- @media (width <= 48em) {
202
- .db-density-expressive,
203
- [data-density=expressive] {
204
- --db-type-headline-3xs: var(--db-typography-expressive-mobile-headline-3xs);
205
- --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-headline-3xs);
206
- --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-headline-3xs);
207
- --db-type-headline-2xs: var(--db-typography-expressive-mobile-headline-2xs);
208
- --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-headline-2xs);
209
- --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-headline-2xs);
210
- --db-type-headline-xs: var(--db-typography-expressive-mobile-headline-xs);
211
- --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-headline-xs);
212
- --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-headline-xs);
213
- --db-type-headline-sm: var(--db-typography-expressive-mobile-headline-sm);
214
- --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-headline-sm);
215
- --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-headline-sm);
216
- --db-type-headline-md: var(--db-typography-expressive-mobile-headline-md);
217
- --db-base-headline-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-headline-md);
218
- --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-headline-md);
219
- --db-type-headline-lg: var(--db-typography-expressive-mobile-headline-lg);
220
- --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-headline-lg);
221
- --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-headline-lg);
222
- --db-type-headline-xl: var(--db-typography-expressive-mobile-headline-xl);
223
- --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-headline-xl);
224
- --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-headline-xl);
225
- --db-type-headline-2xl: var(--db-typography-expressive-mobile-headline-2xl);
226
- --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-expressive-mobile-headline-2xl);
227
- --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-mobile-headline-2xl);
228
- --db-type-headline-3xl: var(--db-typography-expressive-mobile-headline-3xl);
229
- --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-expressive-mobile-headline-3xl);
230
- --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-headline-3xl);
231
- }
232
- }
233
- @media (48em < width <= 64em) {
234
- .db-density-expressive,
235
- [data-density=expressive] {
236
- --db-type-headline-3xs: var(--db-typography-expressive-tablet-headline-3xs);
237
- --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-expressive-tablet-headline-3xs);
238
- --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-tablet-headline-3xs);
239
- --db-type-headline-2xs: var(--db-typography-expressive-tablet-headline-2xs);
240
- --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-expressive-tablet-headline-2xs);
241
- --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-tablet-headline-2xs);
242
- --db-type-headline-xs: var(--db-typography-expressive-tablet-headline-xs);
243
- --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-expressive-tablet-headline-xs);
244
- --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-expressive-tablet-headline-xs);
245
- --db-type-headline-sm: var(--db-typography-expressive-tablet-headline-sm);
246
- --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-expressive-tablet-headline-sm);
247
- --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-expressive-tablet-headline-sm);
248
- --db-type-headline-md: var(--db-typography-expressive-tablet-headline-md);
249
- --db-base-headline-icon-weight-md: var(--db-base-icon-weight-expressive-tablet-headline-md);
250
- --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-expressive-tablet-headline-md);
251
- --db-type-headline-lg: var(--db-typography-expressive-tablet-headline-lg);
252
- --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-expressive-tablet-headline-lg);
253
- --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-expressive-tablet-headline-lg);
254
- --db-type-headline-xl: var(--db-typography-expressive-tablet-headline-xl);
255
- --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-expressive-tablet-headline-xl);
256
- --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-expressive-tablet-headline-xl);
257
- --db-type-headline-2xl: var(--db-typography-expressive-tablet-headline-2xl);
258
- --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-expressive-tablet-headline-2xl);
259
- --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-tablet-headline-2xl);
260
- --db-type-headline-3xl: var(--db-typography-expressive-tablet-headline-3xl);
261
- --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-expressive-tablet-headline-3xl);
262
- --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-tablet-headline-3xl);
263
- }
125
+ }
126
+ @media (48em < width <= 64em) {
127
+ .db-density-expressive,
128
+ [data-density=expressive] {
129
+ --db-type-headline-3xs: var(--db-typography-expressive-tablet-headline-3xs);
130
+ --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-expressive-tablet-headline-3xs);
131
+ --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-tablet-headline-3xs);
132
+ --db-type-headline-2xs: var(--db-typography-expressive-tablet-headline-2xs);
133
+ --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-expressive-tablet-headline-2xs);
134
+ --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-tablet-headline-2xs);
135
+ --db-type-headline-xs: var(--db-typography-expressive-tablet-headline-xs);
136
+ --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-expressive-tablet-headline-xs);
137
+ --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-expressive-tablet-headline-xs);
138
+ --db-type-headline-sm: var(--db-typography-expressive-tablet-headline-sm);
139
+ --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-expressive-tablet-headline-sm);
140
+ --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-expressive-tablet-headline-sm);
141
+ --db-type-headline-md: var(--db-typography-expressive-tablet-headline-md);
142
+ --db-base-headline-icon-weight-md: var(--db-base-icon-weight-expressive-tablet-headline-md);
143
+ --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-expressive-tablet-headline-md);
144
+ --db-type-headline-lg: var(--db-typography-expressive-tablet-headline-lg);
145
+ --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-expressive-tablet-headline-lg);
146
+ --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-expressive-tablet-headline-lg);
147
+ --db-type-headline-xl: var(--db-typography-expressive-tablet-headline-xl);
148
+ --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-expressive-tablet-headline-xl);
149
+ --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-expressive-tablet-headline-xl);
150
+ --db-type-headline-2xl: var(--db-typography-expressive-tablet-headline-2xl);
151
+ --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-expressive-tablet-headline-2xl);
152
+ --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-tablet-headline-2xl);
153
+ --db-type-headline-3xl: var(--db-typography-expressive-tablet-headline-3xl);
154
+ --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-expressive-tablet-headline-3xl);
155
+ --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-tablet-headline-3xl);
264
156
  }
265
- @media (64em < width) {
266
- .db-density-expressive,
267
- [data-density=expressive] {
268
- --db-type-headline-3xs: var(--db-typography-expressive-desktop-headline-3xs);
269
- --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-expressive-desktop-headline-3xs);
270
- --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-desktop-headline-3xs);
271
- --db-type-headline-2xs: var(--db-typography-expressive-desktop-headline-2xs);
272
- --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-expressive-desktop-headline-2xs);
273
- --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-desktop-headline-2xs);
274
- --db-type-headline-xs: var(--db-typography-expressive-desktop-headline-xs);
275
- --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-expressive-desktop-headline-xs);
276
- --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-expressive-desktop-headline-xs);
277
- --db-type-headline-sm: var(--db-typography-expressive-desktop-headline-sm);
278
- --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-expressive-desktop-headline-sm);
279
- --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-expressive-desktop-headline-sm);
280
- --db-type-headline-md: var(--db-typography-expressive-desktop-headline-md);
281
- --db-base-headline-icon-weight-md: var(--db-base-icon-weight-expressive-desktop-headline-md);
282
- --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-expressive-desktop-headline-md);
283
- --db-type-headline-lg: var(--db-typography-expressive-desktop-headline-lg);
284
- --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-expressive-desktop-headline-lg);
285
- --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-expressive-desktop-headline-lg);
286
- --db-type-headline-xl: var(--db-typography-expressive-desktop-headline-xl);
287
- --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-expressive-desktop-headline-xl);
288
- --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-expressive-desktop-headline-xl);
289
- --db-type-headline-2xl: var(--db-typography-expressive-desktop-headline-2xl);
290
- --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-expressive-desktop-headline-2xl);
291
- --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-desktop-headline-2xl);
292
- --db-type-headline-3xl: var(--db-typography-expressive-desktop-headline-3xl);
293
- --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-expressive-desktop-headline-3xl);
294
- --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-desktop-headline-3xl);
295
- }
157
+ }
158
+ @media (64em < width) {
159
+ .db-density-expressive,
160
+ [data-density=expressive] {
161
+ --db-type-headline-3xs: var(--db-typography-expressive-desktop-headline-3xs);
162
+ --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-expressive-desktop-headline-3xs);
163
+ --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-desktop-headline-3xs);
164
+ --db-type-headline-2xs: var(--db-typography-expressive-desktop-headline-2xs);
165
+ --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-expressive-desktop-headline-2xs);
166
+ --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-desktop-headline-2xs);
167
+ --db-type-headline-xs: var(--db-typography-expressive-desktop-headline-xs);
168
+ --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-expressive-desktop-headline-xs);
169
+ --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-expressive-desktop-headline-xs);
170
+ --db-type-headline-sm: var(--db-typography-expressive-desktop-headline-sm);
171
+ --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-expressive-desktop-headline-sm);
172
+ --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-expressive-desktop-headline-sm);
173
+ --db-type-headline-md: var(--db-typography-expressive-desktop-headline-md);
174
+ --db-base-headline-icon-weight-md: var(--db-base-icon-weight-expressive-desktop-headline-md);
175
+ --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-expressive-desktop-headline-md);
176
+ --db-type-headline-lg: var(--db-typography-expressive-desktop-headline-lg);
177
+ --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-expressive-desktop-headline-lg);
178
+ --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-expressive-desktop-headline-lg);
179
+ --db-type-headline-xl: var(--db-typography-expressive-desktop-headline-xl);
180
+ --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-expressive-desktop-headline-xl);
181
+ --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-expressive-desktop-headline-xl);
182
+ --db-type-headline-2xl: var(--db-typography-expressive-desktop-headline-2xl);
183
+ --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-expressive-desktop-headline-2xl);
184
+ --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-desktop-headline-2xl);
185
+ --db-type-headline-3xl: var(--db-typography-expressive-desktop-headline-3xl);
186
+ --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-expressive-desktop-headline-3xl);
187
+ --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-desktop-headline-3xl);
296
188
  }
297
189
  }
298
190
 
299
191
  .db-density-expressive,
300
192
  [data-density=expressive] {
301
- /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
193
+ /* stylelint-disable-next-line media-query-no-invalid */
194
+ /* stylelint-disable-next-line at-rule-empty-line-before */
195
+ /* stylelint-disable-next-line media-query-no-invalid */
196
+ /* stylelint-disable-next-line at-rule-empty-line-before */
197
+ /* stylelint-disable-next-line media-query-no-invalid */
198
+ /* stylelint-disable-next-line at-rule-empty-line-before */
302
199
  }
303
- @layer variables {
200
+ @media (width <= 48em) {
304
201
  .db-density-expressive,
305
202
  [data-density=expressive] {
306
- /* stylelint-disable-next-line media-query-no-invalid */
307
- /* stylelint-disable-next-line at-rule-empty-line-before */
308
- /* stylelint-disable-next-line media-query-no-invalid */
309
- /* stylelint-disable-next-line at-rule-empty-line-before */
310
- /* stylelint-disable-next-line media-query-no-invalid */
311
- /* stylelint-disable-next-line at-rule-empty-line-before */
203
+ --db-type-body-3xs: var(--db-typography-expressive-mobile-body-3xs);
204
+ --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-body-3xs);
205
+ --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-body-3xs);
206
+ --db-type-body-2xs: var(--db-typography-expressive-mobile-body-2xs);
207
+ --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-body-2xs);
208
+ --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-body-2xs);
209
+ --db-type-body-xs: var(--db-typography-expressive-mobile-body-xs);
210
+ --db-base-body-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-body-xs);
211
+ --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-body-xs);
212
+ --db-type-body-sm: var(--db-typography-expressive-mobile-body-sm);
213
+ --db-base-body-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-body-sm);
214
+ --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-body-sm);
215
+ --db-type-body-md: var(--db-typography-expressive-mobile-body-md);
216
+ --db-base-body-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-body-md);
217
+ --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-body-md);
218
+ --db-type-body-lg: var(--db-typography-expressive-mobile-body-lg);
219
+ --db-base-body-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-body-lg);
220
+ --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-body-lg);
221
+ --db-type-body-xl: var(--db-typography-expressive-mobile-body-xl);
222
+ --db-base-body-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-body-xl);
223
+ --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-body-xl);
224
+ --db-type-body-2xl: var(--db-typography-expressive-mobile-body-2xl);
225
+ --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-expressive-mobile-body-2xl);
226
+ --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-mobile-body-2xl);
227
+ --db-type-body-3xl: var(--db-typography-expressive-mobile-body-3xl);
228
+ --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-expressive-mobile-body-3xl);
229
+ --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-body-3xl);
312
230
  }
313
- @media (width <= 48em) {
314
- .db-density-expressive,
315
- [data-density=expressive] {
316
- --db-type-body-3xs: var(--db-typography-expressive-mobile-body-3xs);
317
- --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-body-3xs);
318
- --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-body-3xs);
319
- --db-type-body-2xs: var(--db-typography-expressive-mobile-body-2xs);
320
- --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-body-2xs);
321
- --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-body-2xs);
322
- --db-type-body-xs: var(--db-typography-expressive-mobile-body-xs);
323
- --db-base-body-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-body-xs);
324
- --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-body-xs);
325
- --db-type-body-sm: var(--db-typography-expressive-mobile-body-sm);
326
- --db-base-body-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-body-sm);
327
- --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-body-sm);
328
- --db-type-body-md: var(--db-typography-expressive-mobile-body-md);
329
- --db-base-body-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-body-md);
330
- --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-body-md);
331
- --db-type-body-lg: var(--db-typography-expressive-mobile-body-lg);
332
- --db-base-body-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-body-lg);
333
- --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-body-lg);
334
- --db-type-body-xl: var(--db-typography-expressive-mobile-body-xl);
335
- --db-base-body-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-body-xl);
336
- --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-body-xl);
337
- --db-type-body-2xl: var(--db-typography-expressive-mobile-body-2xl);
338
- --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-expressive-mobile-body-2xl);
339
- --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-mobile-body-2xl);
340
- --db-type-body-3xl: var(--db-typography-expressive-mobile-body-3xl);
341
- --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-expressive-mobile-body-3xl);
342
- --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-body-3xl);
343
- }
344
- }
345
- @media (48em < width <= 64em) {
346
- .db-density-expressive,
347
- [data-density=expressive] {
348
- --db-type-body-3xs: var(--db-typography-expressive-tablet-body-3xs);
349
- --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-expressive-tablet-body-3xs);
350
- --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-tablet-body-3xs);
351
- --db-type-body-2xs: var(--db-typography-expressive-tablet-body-2xs);
352
- --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-expressive-tablet-body-2xs);
353
- --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-tablet-body-2xs);
354
- --db-type-body-xs: var(--db-typography-expressive-tablet-body-xs);
355
- --db-base-body-icon-weight-xs: var(--db-base-icon-weight-expressive-tablet-body-xs);
356
- --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-expressive-tablet-body-xs);
357
- --db-type-body-sm: var(--db-typography-expressive-tablet-body-sm);
358
- --db-base-body-icon-weight-sm: var(--db-base-icon-weight-expressive-tablet-body-sm);
359
- --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-expressive-tablet-body-sm);
360
- --db-type-body-md: var(--db-typography-expressive-tablet-body-md);
361
- --db-base-body-icon-weight-md: var(--db-base-icon-weight-expressive-tablet-body-md);
362
- --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-expressive-tablet-body-md);
363
- --db-type-body-lg: var(--db-typography-expressive-tablet-body-lg);
364
- --db-base-body-icon-weight-lg: var(--db-base-icon-weight-expressive-tablet-body-lg);
365
- --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-expressive-tablet-body-lg);
366
- --db-type-body-xl: var(--db-typography-expressive-tablet-body-xl);
367
- --db-base-body-icon-weight-xl: var(--db-base-icon-weight-expressive-tablet-body-xl);
368
- --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-expressive-tablet-body-xl);
369
- --db-type-body-2xl: var(--db-typography-expressive-tablet-body-2xl);
370
- --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-expressive-tablet-body-2xl);
371
- --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-tablet-body-2xl);
372
- --db-type-body-3xl: var(--db-typography-expressive-tablet-body-3xl);
373
- --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-expressive-tablet-body-3xl);
374
- --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-tablet-body-3xl);
375
- }
231
+ }
232
+ @media (48em < width <= 64em) {
233
+ .db-density-expressive,
234
+ [data-density=expressive] {
235
+ --db-type-body-3xs: var(--db-typography-expressive-tablet-body-3xs);
236
+ --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-expressive-tablet-body-3xs);
237
+ --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-tablet-body-3xs);
238
+ --db-type-body-2xs: var(--db-typography-expressive-tablet-body-2xs);
239
+ --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-expressive-tablet-body-2xs);
240
+ --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-tablet-body-2xs);
241
+ --db-type-body-xs: var(--db-typography-expressive-tablet-body-xs);
242
+ --db-base-body-icon-weight-xs: var(--db-base-icon-weight-expressive-tablet-body-xs);
243
+ --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-expressive-tablet-body-xs);
244
+ --db-type-body-sm: var(--db-typography-expressive-tablet-body-sm);
245
+ --db-base-body-icon-weight-sm: var(--db-base-icon-weight-expressive-tablet-body-sm);
246
+ --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-expressive-tablet-body-sm);
247
+ --db-type-body-md: var(--db-typography-expressive-tablet-body-md);
248
+ --db-base-body-icon-weight-md: var(--db-base-icon-weight-expressive-tablet-body-md);
249
+ --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-expressive-tablet-body-md);
250
+ --db-type-body-lg: var(--db-typography-expressive-tablet-body-lg);
251
+ --db-base-body-icon-weight-lg: var(--db-base-icon-weight-expressive-tablet-body-lg);
252
+ --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-expressive-tablet-body-lg);
253
+ --db-type-body-xl: var(--db-typography-expressive-tablet-body-xl);
254
+ --db-base-body-icon-weight-xl: var(--db-base-icon-weight-expressive-tablet-body-xl);
255
+ --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-expressive-tablet-body-xl);
256
+ --db-type-body-2xl: var(--db-typography-expressive-tablet-body-2xl);
257
+ --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-expressive-tablet-body-2xl);
258
+ --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-tablet-body-2xl);
259
+ --db-type-body-3xl: var(--db-typography-expressive-tablet-body-3xl);
260
+ --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-expressive-tablet-body-3xl);
261
+ --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-tablet-body-3xl);
376
262
  }
377
- @media (64em < width) {
378
- .db-density-expressive,
379
- [data-density=expressive] {
380
- --db-type-body-3xs: var(--db-typography-expressive-desktop-body-3xs);
381
- --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-expressive-desktop-body-3xs);
382
- --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-desktop-body-3xs);
383
- --db-type-body-2xs: var(--db-typography-expressive-desktop-body-2xs);
384
- --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-expressive-desktop-body-2xs);
385
- --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-desktop-body-2xs);
386
- --db-type-body-xs: var(--db-typography-expressive-desktop-body-xs);
387
- --db-base-body-icon-weight-xs: var(--db-base-icon-weight-expressive-desktop-body-xs);
388
- --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-expressive-desktop-body-xs);
389
- --db-type-body-sm: var(--db-typography-expressive-desktop-body-sm);
390
- --db-base-body-icon-weight-sm: var(--db-base-icon-weight-expressive-desktop-body-sm);
391
- --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-expressive-desktop-body-sm);
392
- --db-type-body-md: var(--db-typography-expressive-desktop-body-md);
393
- --db-base-body-icon-weight-md: var(--db-base-icon-weight-expressive-desktop-body-md);
394
- --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-expressive-desktop-body-md);
395
- --db-type-body-lg: var(--db-typography-expressive-desktop-body-lg);
396
- --db-base-body-icon-weight-lg: var(--db-base-icon-weight-expressive-desktop-body-lg);
397
- --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-expressive-desktop-body-lg);
398
- --db-type-body-xl: var(--db-typography-expressive-desktop-body-xl);
399
- --db-base-body-icon-weight-xl: var(--db-base-icon-weight-expressive-desktop-body-xl);
400
- --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-expressive-desktop-body-xl);
401
- --db-type-body-2xl: var(--db-typography-expressive-desktop-body-2xl);
402
- --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-expressive-desktop-body-2xl);
403
- --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-desktop-body-2xl);
404
- --db-type-body-3xl: var(--db-typography-expressive-desktop-body-3xl);
405
- --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-expressive-desktop-body-3xl);
406
- --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-desktop-body-3xl);
407
- }
263
+ }
264
+ @media (64em < width) {
265
+ .db-density-expressive,
266
+ [data-density=expressive] {
267
+ --db-type-body-3xs: var(--db-typography-expressive-desktop-body-3xs);
268
+ --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-expressive-desktop-body-3xs);
269
+ --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-desktop-body-3xs);
270
+ --db-type-body-2xs: var(--db-typography-expressive-desktop-body-2xs);
271
+ --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-expressive-desktop-body-2xs);
272
+ --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-desktop-body-2xs);
273
+ --db-type-body-xs: var(--db-typography-expressive-desktop-body-xs);
274
+ --db-base-body-icon-weight-xs: var(--db-base-icon-weight-expressive-desktop-body-xs);
275
+ --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-expressive-desktop-body-xs);
276
+ --db-type-body-sm: var(--db-typography-expressive-desktop-body-sm);
277
+ --db-base-body-icon-weight-sm: var(--db-base-icon-weight-expressive-desktop-body-sm);
278
+ --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-expressive-desktop-body-sm);
279
+ --db-type-body-md: var(--db-typography-expressive-desktop-body-md);
280
+ --db-base-body-icon-weight-md: var(--db-base-icon-weight-expressive-desktop-body-md);
281
+ --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-expressive-desktop-body-md);
282
+ --db-type-body-lg: var(--db-typography-expressive-desktop-body-lg);
283
+ --db-base-body-icon-weight-lg: var(--db-base-icon-weight-expressive-desktop-body-lg);
284
+ --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-expressive-desktop-body-lg);
285
+ --db-type-body-xl: var(--db-typography-expressive-desktop-body-xl);
286
+ --db-base-body-icon-weight-xl: var(--db-base-icon-weight-expressive-desktop-body-xl);
287
+ --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-expressive-desktop-body-xl);
288
+ --db-type-body-2xl: var(--db-typography-expressive-desktop-body-2xl);
289
+ --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-expressive-desktop-body-2xl);
290
+ --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-desktop-body-2xl);
291
+ --db-type-body-3xl: var(--db-typography-expressive-desktop-body-3xl);
292
+ --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-expressive-desktop-body-3xl);
293
+ --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-desktop-body-3xl);
408
294
  }
409
295
  }
410
-
411
- @layer variables {}
412
-
413
- @layer variables {}
414
-
415
- @layer variables {}
416
-
417
- @layer variables {}