@db-ux/core-foundations 2.0.0-0-custom-select-16b8cce → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (103) hide show
  1. package/build/ide/db.ide.css +10 -10
  2. package/build/styles/_screen-sizes.scss +62 -6
  3. package/build/styles/_variables.scss +9 -9
  4. package/build/styles/absolute.css +9015 -593
  5. package/build/styles/absolute.scss +1 -1
  6. package/build/styles/colors/_default-color-icons.scss +11 -0
  7. package/build/styles/colors/_default-color-mappings.scss +2944 -0
  8. package/build/styles/colors/_placeholder.scss +160 -153
  9. package/build/styles/colors/_variables.scss +20 -19
  10. package/build/styles/colors/classes/all.css +2205 -2115
  11. package/build/styles/colors/classes/blue.css +175 -141
  12. package/build/styles/colors/classes/brand.css +175 -141
  13. package/build/styles/colors/classes/critical.css +175 -141
  14. package/build/styles/colors/classes/cyan.css +175 -141
  15. package/build/styles/colors/classes/green.css +175 -141
  16. package/build/styles/colors/classes/informational.css +175 -141
  17. package/build/styles/colors/classes/neutral.css +175 -141
  18. package/build/styles/colors/classes/orange.css +175 -141
  19. package/build/styles/colors/classes/pink.css +175 -141
  20. package/build/styles/colors/classes/red.css +175 -141
  21. package/build/styles/colors/classes/successful.css +175 -141
  22. package/build/styles/colors/classes/turquoise.css +175 -141
  23. package/build/styles/colors/classes/violet.css +175 -141
  24. package/build/styles/colors/classes/warning.css +175 -141
  25. package/build/styles/colors/classes/yellow.css +175 -141
  26. package/build/styles/colors/speaking-colors/additional/_blue.speaking-colors.scss +9 -0
  27. package/build/styles/colors/speaking-colors/additional/_cyan.speaking-colors.scss +9 -0
  28. package/build/styles/colors/speaking-colors/additional/_green.speaking-colors.scss +9 -0
  29. package/build/styles/colors/speaking-colors/additional/_orange.speaking-colors.scss +9 -0
  30. package/build/styles/colors/speaking-colors/additional/_pink.speaking-colors.scss +9 -0
  31. package/build/styles/colors/speaking-colors/additional/_red.speaking-colors.scss +9 -0
  32. package/build/styles/colors/speaking-colors/additional/_turquoise.speaking-colors.scss +9 -0
  33. package/build/styles/colors/speaking-colors/additional/_violet.speaking-colors.scss +9 -0
  34. package/build/styles/colors/speaking-colors/additional/_yellow.speaking-colors.scss +9 -0
  35. package/build/styles/colors/speaking-colors/semantic/_brand.speaking-colors.scss +9 -0
  36. package/build/styles/colors/speaking-colors/semantic/_critical.speaking-colors.scss +9 -0
  37. package/build/styles/colors/speaking-colors/semantic/_informational.speaking-colors.scss +15 -0
  38. package/build/styles/colors/speaking-colors/semantic/_neutral.speaking-colors.scss +9 -0
  39. package/build/styles/colors/speaking-colors/semantic/_successful.speaking-colors.scss +9 -0
  40. package/build/styles/colors/speaking-colors/semantic/_warning.speaking-colors.scss +9 -0
  41. package/build/styles/colors/speaking-colors/vibrant.js +43 -0
  42. package/build/styles/defaults/_default-properties.scss +6770 -0
  43. package/build/styles/defaults/default-code.css +93 -93
  44. package/build/styles/defaults/default-code.scss +6 -4
  45. package/build/styles/defaults/default-elevation.css +1 -1
  46. package/build/styles/defaults/default-fonts.css +7 -7
  47. package/build/styles/defaults/default-fonts.scss +15 -18
  48. package/build/styles/defaults/default-icons.css +1 -1
  49. package/build/styles/defaults/default-required.css +1 -1
  50. package/build/styles/defaults/default-required.scss +33 -13
  51. package/build/styles/defaults/default-root.css +93 -93
  52. package/build/styles/defaults/default-theme.css +93 -93
  53. package/build/styles/defaults/default-theme.scss +9 -854
  54. package/build/styles/density/_scaling-placeholder.scss +57 -38
  55. package/build/styles/density/_typography-placeholder.scss +66 -42
  56. package/build/styles/density/classes/all.css +944 -951
  57. package/build/styles/density/classes/expressive.css +396 -327
  58. package/build/styles/density/classes/functional.css +396 -327
  59. package/build/styles/density/classes/regular.css +396 -327
  60. package/build/styles/fonts/_font-sizes.scss +18 -12
  61. package/build/styles/fonts/classes/all.css +236 -90
  62. package/build/styles/fonts/classes/body/2xl.css +100 -5
  63. package/build/styles/fonts/classes/body/2xs.css +100 -5
  64. package/build/styles/fonts/classes/body/3xl.css +100 -5
  65. package/build/styles/fonts/classes/body/3xs.css +100 -5
  66. package/build/styles/fonts/classes/body/all.css +164 -45
  67. package/build/styles/fonts/classes/body/lg.css +100 -5
  68. package/build/styles/fonts/classes/body/md.css +100 -5
  69. package/build/styles/fonts/classes/body/sm.css +100 -5
  70. package/build/styles/fonts/classes/body/xl.css +100 -5
  71. package/build/styles/fonts/classes/body/xs.css +100 -5
  72. package/build/styles/fonts/classes/headline/2xl.css +100 -5
  73. package/build/styles/fonts/classes/headline/2xs.css +100 -5
  74. package/build/styles/fonts/classes/headline/3xl.css +100 -5
  75. package/build/styles/fonts/classes/headline/3xs.css +100 -5
  76. package/build/styles/fonts/classes/headline/all.css +164 -45
  77. package/build/styles/fonts/classes/headline/lg.css +100 -5
  78. package/build/styles/fonts/classes/headline/md.css +100 -5
  79. package/build/styles/fonts/classes/headline/sm.css +100 -5
  80. package/build/styles/fonts/classes/headline/xl.css +100 -5
  81. package/build/styles/fonts/classes/headline/xs.css +100 -5
  82. package/build/styles/helpers/_divider.scss +5 -5
  83. package/build/styles/helpers/_focus.scss +3 -3
  84. package/build/styles/helpers/_index.scss +1 -0
  85. package/build/styles/helpers/_layer.scss +1 -0
  86. package/build/styles/helpers/classes/all.css +49 -19
  87. package/build/styles/helpers/classes/divider.css +46 -16
  88. package/build/styles/helpers/classes/focus.css +33 -3
  89. package/build/styles/icons/absolute.css +1 -1
  90. package/build/styles/icons/relative.css +1 -1
  91. package/build/styles/icons/rollup.css +1 -1
  92. package/build/styles/icons/webpack.css +1 -1
  93. package/build/styles/index.css +3570 -517
  94. package/build/styles/relative.css +7819 -5560
  95. package/build/styles/rollup.css +9015 -593
  96. package/build/styles/rollup.scss +1 -1
  97. package/build/styles/webpack.css +9015 -593
  98. package/build/styles/webpack.scss +1 -1
  99. package/build/tailwind/tailwind-tokens.json +10 -10
  100. package/build/tailwind/theme/index.css +10 -10
  101. package/package.json +4 -4
  102. package/build/styles/colors/_default-color-scheme.scss +0 -2961
  103. package/build/styles/colors/_default-palette.scss +0 -2523
package/build/styles/density/classes/expressive.css CHANGED
@@ -1,361 +1,430 @@
1
+ /* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
2
+ /* Use fixed spacings for all kind of distances (margin, padding, ...) */
3
+ /* The primary use-case for responsive spacings are
4
+ paddings/gaps in an application e.g. the <main> should have a responsive padding. */
5
+ /* Elevation */
6
+ /* Border */
7
+ /* Transitions */
8
+ /* Variants for adaptive components like input, select, notification, ... */
9
+ @layer variables {}
10
+
11
+ @layer variables {}
12
+
13
+ @layer variables {}
14
+
15
+ @layer variables {}
16
+
17
+ @layer variables {}
18
+
19
+ @layer variables {}
20
+
21
+ @layer variables {}
22
+
23
+ @layer variables {}
24
+
25
+ @layer variables {}
26
+
27
+ @layer variables {}
28
+
29
+ @layer variables {}
30
+
31
+ @layer variables {}
32
+
33
+ @layer variables {}
34
+
35
+ @layer variables {}
36
+
37
+ @layer variables {}
38
+
1
39
  /**
2
40
  Generates 3 types of placeholders, e.g:
3
41
  - %db-component-variables-md
4
42
  - %db-font-size-md
5
43
  - %db-overwrite-font-size-md
6
44
  */
45
+ @layer variables {}
46
+
47
+ @layer variables {}
48
+
49
+ @layer variables {}
50
+
51
+ @layer variables {}
52
+
53
+ @layer variables {}
54
+
55
+ @layer variables {}
56
+
57
+ @layer variables {}
58
+
59
+ @layer variables {}
60
+
61
+ @layer variables {}
62
+
63
+ @layer variables {}
64
+
65
+ @layer variables {}
66
+
67
+ @layer variables {}
68
+
69
+ @layer variables {}
70
+
7
71
  .db-density-expressive,
8
72
  [data-density=expressive] {
9
- line-height: var(--db-type-body-line-height-md);
10
- font-size: var(--db-type-body-font-size-md);
73
+ font: var(--db-type-body-md);
11
74
  }
12
75
 
13
76
  .db-density-expressive,
14
77
  [data-density=expressive] {
15
- /* Those variables are only for components to calculate heights and change icons */
16
- --db-icon-font-weight: var(--db-base-body-icon-weight-md);
17
- --db-icon-font-size: var(--db-base-body-icon-font-size-md);
18
- line-height: var(--db-type-body-line-height-md);
19
- font-size: var(--db-type-body-font-size-md);
78
+ font: var(--db-type-body-md);
79
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
80
+ }
81
+ @layer variables {
82
+ .db-density-expressive,
83
+ [data-density=expressive] {
84
+ /* Those variables are only for components to calculate heights and change icons */
85
+ --db-icon-font-weight: var(--db-base-body-icon-weight-md);
86
+ --db-icon-font-size: var(--db-base-body-icon-font-size-md);
87
+ }
20
88
  }
21
89
 
22
- /* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
23
- /* Use fixed spacings for all kind of distances (margin, padding, ...) */
24
- /* The primary use-case for responsive spacings are
25
- paddings/gaps in an application e.g. the <main> should have a responsive padding. */
26
- /* Elevation */
27
- /* Border */
28
- /* Transitions */
29
- /* Variants for adaptive components like input, select, notification, ... */
90
+ @layer variables {}
91
+
92
+ @layer variables {}
93
+
94
+ @layer variables {}
95
+
96
+ @layer variables {}
97
+
98
+ @layer variables {}
99
+
100
+ @layer variables {}
101
+
102
+ @layer variables {}
103
+
104
+ @layer variables {}
105
+
106
+ @layer variables {}
107
+
108
+ @layer variables {}
109
+
110
+ @layer variables {}
111
+
112
+ @layer variables {}
113
+
114
+ @layer variables {}
115
+
116
+ /**
117
+ * @mixin screen-min-max
118
+ * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
119
+ */
30
120
  .db-density-expressive,
31
121
  [data-density=expressive] {
32
- --db-sizing-3xs: var(--db-sizing-expressive-3xs);
33
- --db-sizing-2xs: var(--db-sizing-expressive-2xs);
34
- --db-sizing-xs: var(--db-sizing-expressive-xs);
35
- --db-sizing-sm: var(--db-sizing-expressive-sm);
36
- --db-sizing-md: var(--db-sizing-expressive-md);
37
- --db-sizing-lg: var(--db-sizing-expressive-lg);
38
- --db-sizing-xl: var(--db-sizing-expressive-xl);
39
- --db-sizing-2xl: var(--db-sizing-expressive-2xl);
40
- --db-sizing-3xl: var(--db-sizing-expressive-3xl);
41
- --db-spacing-fixed-3xs: var(--db-spacing-fixed-expressive-3xs);
42
- --db-spacing-fixed-2xs: var(--db-spacing-fixed-expressive-2xs);
43
- --db-spacing-fixed-xs: var(--db-spacing-fixed-expressive-xs);
44
- --db-spacing-fixed-sm: var(--db-spacing-fixed-expressive-sm);
45
- --db-spacing-fixed-md: var(--db-spacing-fixed-expressive-md);
46
- --db-spacing-fixed-lg: var(--db-spacing-fixed-expressive-lg);
47
- --db-spacing-fixed-xl: var(--db-spacing-fixed-expressive-xl);
48
- --db-spacing-fixed-2xl: var(--db-spacing-fixed-expressive-2xl);
49
- --db-spacing-fixed-3xl: var(--db-spacing-fixed-expressive-3xl);
50
- --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-mobile-3xs);
51
- --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-mobile-2xs);
52
- --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-mobile-xs);
53
- --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-mobile-sm);
54
- --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-mobile-md);
55
- --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-mobile-lg);
56
- --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-mobile-xl);
57
- --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-mobile-2xl);
58
- --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-mobile-3xl);
59
- /* stylelint-disable at-rule-empty-line-before */
60
- /* stylelint-enable at-rule-empty-line-before */
61
- /* stylelint-disable-next-line media-query-no-invalid */
62
- /* stylelint-disable-next-line at-rule-empty-line-before */
63
- /* stylelint-disable at-rule-empty-line-before */
64
- /* stylelint-enable at-rule-empty-line-before */
65
- /* stylelint-disable-next-line media-query-no-invalid */
66
- /* stylelint-disable-next-line at-rule-empty-line-before */
122
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
67
123
  }
68
- @media screen and (min-width: 45em) {
69
- .db-density-expressive:not([data-force-mobile]),
70
- [data-density=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-density-expressive,
71
- [data-force-mobile=false][data-density=expressive] {
72
- --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-tablet-3xs);
73
- --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-tablet-2xs);
74
- --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-tablet-xs);
75
- --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-tablet-sm);
76
- --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-tablet-md);
77
- --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-tablet-lg);
78
- --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-tablet-xl);
79
- --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-tablet-2xl);
80
- --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-tablet-3xl);
124
+ @layer variables {
125
+ .db-density-expressive,
126
+ [data-density=expressive] {
127
+ --db-sizing-3xs: var(--db-sizing-expressive-3xs);
128
+ --db-sizing-2xs: var(--db-sizing-expressive-2xs);
129
+ --db-sizing-xs: var(--db-sizing-expressive-xs);
130
+ --db-sizing-sm: var(--db-sizing-expressive-sm);
131
+ --db-sizing-md: var(--db-sizing-expressive-md);
132
+ --db-sizing-lg: var(--db-sizing-expressive-lg);
133
+ --db-sizing-xl: var(--db-sizing-expressive-xl);
134
+ --db-sizing-2xl: var(--db-sizing-expressive-2xl);
135
+ --db-sizing-3xl: var(--db-sizing-expressive-3xl);
136
+ --db-spacing-fixed-3xs: var(--db-spacing-fixed-expressive-3xs);
137
+ --db-spacing-fixed-2xs: var(--db-spacing-fixed-expressive-2xs);
138
+ --db-spacing-fixed-xs: var(--db-spacing-fixed-expressive-xs);
139
+ --db-spacing-fixed-sm: var(--db-spacing-fixed-expressive-sm);
140
+ --db-spacing-fixed-md: var(--db-spacing-fixed-expressive-md);
141
+ --db-spacing-fixed-lg: var(--db-spacing-fixed-expressive-lg);
142
+ --db-spacing-fixed-xl: var(--db-spacing-fixed-expressive-xl);
143
+ --db-spacing-fixed-2xl: var(--db-spacing-fixed-expressive-2xl);
144
+ --db-spacing-fixed-3xl: var(--db-spacing-fixed-expressive-3xl);
145
+ /* stylelint-disable-next-line media-query-no-invalid */
146
+ /* stylelint-disable-next-line at-rule-empty-line-before */
147
+ /* stylelint-disable-next-line media-query-no-invalid */
148
+ /* stylelint-disable-next-line at-rule-empty-line-before */
149
+ /* stylelint-disable-next-line media-query-no-invalid */
150
+ /* stylelint-disable-next-line at-rule-empty-line-before */
81
151
  }
82
- }
83
- @media screen and (min-width: 64em) {
84
- .db-density-expressive:not([data-force-mobile]),
85
- [data-density=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-density-expressive,
86
- [data-force-mobile=false][data-density=expressive] {
87
- --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-desktop-3xs);
88
- --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-desktop-2xs);
89
- --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-desktop-xs);
90
- --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-desktop-sm);
91
- --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-desktop-md);
92
- --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-desktop-lg);
93
- --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-desktop-xl);
94
- --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-desktop-2xl);
95
- --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-desktop-3xl);
152
+ @media screen and (width <= 45em) {
153
+ .db-density-expressive,
154
+ [data-density=expressive] {
155
+ --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-mobile-3xs);
156
+ --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-mobile-2xs);
157
+ --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-mobile-xs);
158
+ --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-mobile-sm);
159
+ --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-mobile-md);
160
+ --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-mobile-lg);
161
+ --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-mobile-xl);
162
+ --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-mobile-2xl);
163
+ --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-mobile-3xl);
164
+ }
165
+ }
166
+ @media screen and (45em < width <= 64em) {
167
+ .db-density-expressive,
168
+ [data-density=expressive] {
169
+ --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-tablet-3xs);
170
+ --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-tablet-2xs);
171
+ --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-tablet-xs);
172
+ --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-tablet-sm);
173
+ --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-tablet-md);
174
+ --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-tablet-lg);
175
+ --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-tablet-xl);
176
+ --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-tablet-2xl);
177
+ --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-tablet-3xl);
178
+ }
179
+ }
180
+ @media screen and (64em < width) {
181
+ .db-density-expressive,
182
+ [data-density=expressive] {
183
+ --db-spacing-responsive-3xs: var(--db-spacing-responsive-expressive-desktop-3xs);
184
+ --db-spacing-responsive-2xs: var(--db-spacing-responsive-expressive-desktop-2xs);
185
+ --db-spacing-responsive-xs: var(--db-spacing-responsive-expressive-desktop-xs);
186
+ --db-spacing-responsive-sm: var(--db-spacing-responsive-expressive-desktop-sm);
187
+ --db-spacing-responsive-md: var(--db-spacing-responsive-expressive-desktop-md);
188
+ --db-spacing-responsive-lg: var(--db-spacing-responsive-expressive-desktop-lg);
189
+ --db-spacing-responsive-xl: var(--db-spacing-responsive-expressive-desktop-xl);
190
+ --db-spacing-responsive-2xl: var(--db-spacing-responsive-expressive-desktop-2xl);
191
+ --db-spacing-responsive-3xl: var(--db-spacing-responsive-expressive-desktop-3xl);
192
+ }
96
193
  }
97
194
  }
98
195
 
196
+ @layer variables {}
197
+
198
+ @layer variables {}
199
+
99
200
  .db-density-expressive,
100
201
  [data-density=expressive] {
101
- --db-type-headline-font-size-3xs: var(--db-typography-expressive-mobile-headline-3xs-font-size);
102
- --db-type-headline-line-height-3xs: var(--db-typography-expressive-mobile-headline-3xs-line-height);
103
- --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-headline-3xs);
104
- --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-headline-3xs);
105
- --db-type-headline-font-size-2xs: var(--db-typography-expressive-mobile-headline-2xs-font-size);
106
- --db-type-headline-line-height-2xs: var(--db-typography-expressive-mobile-headline-2xs-line-height);
107
- --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-headline-2xs);
108
- --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-headline-2xs);
109
- --db-type-headline-font-size-xs: var(--db-typography-expressive-mobile-headline-xs-font-size);
110
- --db-type-headline-line-height-xs: var(--db-typography-expressive-mobile-headline-xs-line-height);
111
- --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-headline-xs);
112
- --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-headline-xs);
113
- --db-type-headline-font-size-sm: var(--db-typography-expressive-mobile-headline-sm-font-size);
114
- --db-type-headline-line-height-sm: var(--db-typography-expressive-mobile-headline-sm-line-height);
115
- --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-headline-sm);
116
- --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-headline-sm);
117
- --db-type-headline-font-size-md: var(--db-typography-expressive-mobile-headline-md-font-size);
118
- --db-type-headline-line-height-md: var(--db-typography-expressive-mobile-headline-md-line-height);
119
- --db-base-headline-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-headline-md);
120
- --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-headline-md);
121
- --db-type-headline-font-size-lg: var(--db-typography-expressive-mobile-headline-lg-font-size);
122
- --db-type-headline-line-height-lg: var(--db-typography-expressive-mobile-headline-lg-line-height);
123
- --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-headline-lg);
124
- --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-headline-lg);
125
- --db-type-headline-font-size-xl: var(--db-typography-expressive-mobile-headline-xl-font-size);
126
- --db-type-headline-line-height-xl: var(--db-typography-expressive-mobile-headline-xl-line-height);
127
- --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-headline-xl);
128
- --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-headline-xl);
129
- --db-type-headline-font-size-2xl: var(--db-typography-expressive-mobile-headline-2xl-font-size);
130
- --db-type-headline-line-height-2xl: var(--db-typography-expressive-mobile-headline-2xl-line-height);
131
- --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-expressive-mobile-headline-2xl);
132
- --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-mobile-headline-2xl);
133
- --db-type-headline-font-size-3xl: var(--db-typography-expressive-mobile-headline-3xl-font-size);
134
- --db-type-headline-line-height-3xl: var(--db-typography-expressive-mobile-headline-3xl-line-height);
135
- --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-expressive-mobile-headline-3xl);
136
- --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-headline-3xl);
137
- /* stylelint-disable at-rule-empty-line-before */
138
- /* stylelint-enable at-rule-empty-line-before */
139
- /* stylelint-disable-next-line media-query-no-invalid */
140
- /* stylelint-disable-next-line at-rule-empty-line-before */
141
- /* stylelint-disable at-rule-empty-line-before */
142
- /* stylelint-enable at-rule-empty-line-before */
143
- /* stylelint-disable-next-line media-query-no-invalid */
144
- /* stylelint-disable-next-line at-rule-empty-line-before */
202
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
145
203
  }
146
- @media screen and (min-width: 45em) {
147
- .db-density-expressive:not([data-force-mobile]),
148
- [data-density=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-density-expressive,
149
- [data-force-mobile=false][data-density=expressive] {
150
- --db-type-headline-font-size-3xs: var(--db-typography-expressive-tablet-headline-3xs-font-size);
151
- --db-type-headline-line-height-3xs: var(--db-typography-expressive-tablet-headline-3xs-line-height);
152
- --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-expressive-tablet-headline-3xs);
153
- --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-tablet-headline-3xs);
154
- --db-type-headline-font-size-2xs: var(--db-typography-expressive-tablet-headline-2xs-font-size);
155
- --db-type-headline-line-height-2xs: var(--db-typography-expressive-tablet-headline-2xs-line-height);
156
- --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-expressive-tablet-headline-2xs);
157
- --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-tablet-headline-2xs);
158
- --db-type-headline-font-size-xs: var(--db-typography-expressive-tablet-headline-xs-font-size);
159
- --db-type-headline-line-height-xs: var(--db-typography-expressive-tablet-headline-xs-line-height);
160
- --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-expressive-tablet-headline-xs);
161
- --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-expressive-tablet-headline-xs);
162
- --db-type-headline-font-size-sm: var(--db-typography-expressive-tablet-headline-sm-font-size);
163
- --db-type-headline-line-height-sm: var(--db-typography-expressive-tablet-headline-sm-line-height);
164
- --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-expressive-tablet-headline-sm);
165
- --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-expressive-tablet-headline-sm);
166
- --db-type-headline-font-size-md: var(--db-typography-expressive-tablet-headline-md-font-size);
167
- --db-type-headline-line-height-md: var(--db-typography-expressive-tablet-headline-md-line-height);
168
- --db-base-headline-icon-weight-md: var(--db-base-icon-weight-expressive-tablet-headline-md);
169
- --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-expressive-tablet-headline-md);
170
- --db-type-headline-font-size-lg: var(--db-typography-expressive-tablet-headline-lg-font-size);
171
- --db-type-headline-line-height-lg: var(--db-typography-expressive-tablet-headline-lg-line-height);
172
- --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-expressive-tablet-headline-lg);
173
- --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-expressive-tablet-headline-lg);
174
- --db-type-headline-font-size-xl: var(--db-typography-expressive-tablet-headline-xl-font-size);
175
- --db-type-headline-line-height-xl: var(--db-typography-expressive-tablet-headline-xl-line-height);
176
- --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-expressive-tablet-headline-xl);
177
- --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-expressive-tablet-headline-xl);
178
- --db-type-headline-font-size-2xl: var(--db-typography-expressive-tablet-headline-2xl-font-size);
179
- --db-type-headline-line-height-2xl: var(--db-typography-expressive-tablet-headline-2xl-line-height);
180
- --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-expressive-tablet-headline-2xl);
181
- --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-tablet-headline-2xl);
182
- --db-type-headline-font-size-3xl: var(--db-typography-expressive-tablet-headline-3xl-font-size);
183
- --db-type-headline-line-height-3xl: var(--db-typography-expressive-tablet-headline-3xl-line-height);
184
- --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-expressive-tablet-headline-3xl);
185
- --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-tablet-headline-3xl);
204
+ @layer variables {
205
+ .db-density-expressive,
206
+ [data-density=expressive] {
207
+ /* stylelint-disable-next-line media-query-no-invalid */
208
+ /* stylelint-disable-next-line at-rule-empty-line-before */
209
+ /* stylelint-disable-next-line media-query-no-invalid */
210
+ /* stylelint-disable-next-line at-rule-empty-line-before */
211
+ /* stylelint-disable-next-line media-query-no-invalid */
212
+ /* stylelint-disable-next-line at-rule-empty-line-before */
186
213
  }
187
- }
188
- @media screen and (min-width: 64em) {
189
- .db-density-expressive:not([data-force-mobile]),
190
- [data-density=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-density-expressive,
191
- [data-force-mobile=false][data-density=expressive] {
192
- --db-type-headline-font-size-3xs: var(--db-typography-expressive-desktop-headline-3xs-font-size);
193
- --db-type-headline-line-height-3xs: var(--db-typography-expressive-desktop-headline-3xs-line-height);
194
- --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-expressive-desktop-headline-3xs);
195
- --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-desktop-headline-3xs);
196
- --db-type-headline-font-size-2xs: var(--db-typography-expressive-desktop-headline-2xs-font-size);
197
- --db-type-headline-line-height-2xs: var(--db-typography-expressive-desktop-headline-2xs-line-height);
198
- --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-expressive-desktop-headline-2xs);
199
- --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-desktop-headline-2xs);
200
- --db-type-headline-font-size-xs: var(--db-typography-expressive-desktop-headline-xs-font-size);
201
- --db-type-headline-line-height-xs: var(--db-typography-expressive-desktop-headline-xs-line-height);
202
- --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-expressive-desktop-headline-xs);
203
- --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-expressive-desktop-headline-xs);
204
- --db-type-headline-font-size-sm: var(--db-typography-expressive-desktop-headline-sm-font-size);
205
- --db-type-headline-line-height-sm: var(--db-typography-expressive-desktop-headline-sm-line-height);
206
- --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-expressive-desktop-headline-sm);
207
- --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-expressive-desktop-headline-sm);
208
- --db-type-headline-font-size-md: var(--db-typography-expressive-desktop-headline-md-font-size);
209
- --db-type-headline-line-height-md: var(--db-typography-expressive-desktop-headline-md-line-height);
210
- --db-base-headline-icon-weight-md: var(--db-base-icon-weight-expressive-desktop-headline-md);
211
- --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-expressive-desktop-headline-md);
212
- --db-type-headline-font-size-lg: var(--db-typography-expressive-desktop-headline-lg-font-size);
213
- --db-type-headline-line-height-lg: var(--db-typography-expressive-desktop-headline-lg-line-height);
214
- --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-expressive-desktop-headline-lg);
215
- --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-expressive-desktop-headline-lg);
216
- --db-type-headline-font-size-xl: var(--db-typography-expressive-desktop-headline-xl-font-size);
217
- --db-type-headline-line-height-xl: var(--db-typography-expressive-desktop-headline-xl-line-height);
218
- --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-expressive-desktop-headline-xl);
219
- --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-expressive-desktop-headline-xl);
220
- --db-type-headline-font-size-2xl: var(--db-typography-expressive-desktop-headline-2xl-font-size);
221
- --db-type-headline-line-height-2xl: var(--db-typography-expressive-desktop-headline-2xl-line-height);
222
- --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-expressive-desktop-headline-2xl);
223
- --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-desktop-headline-2xl);
224
- --db-type-headline-font-size-3xl: var(--db-typography-expressive-desktop-headline-3xl-font-size);
225
- --db-type-headline-line-height-3xl: var(--db-typography-expressive-desktop-headline-3xl-line-height);
226
- --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-expressive-desktop-headline-3xl);
227
- --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-desktop-headline-3xl);
214
+ @media screen and (width <= 45em) {
215
+ .db-density-expressive,
216
+ [data-density=expressive] {
217
+ --db-type-headline-3xs: var(--db-typography-expressive-mobile-headline-3xs);
218
+ --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-headline-3xs);
219
+ --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-headline-3xs);
220
+ --db-type-headline-2xs: var(--db-typography-expressive-mobile-headline-2xs);
221
+ --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-headline-2xs);
222
+ --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-headline-2xs);
223
+ --db-type-headline-xs: var(--db-typography-expressive-mobile-headline-xs);
224
+ --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-headline-xs);
225
+ --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-headline-xs);
226
+ --db-type-headline-sm: var(--db-typography-expressive-mobile-headline-sm);
227
+ --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-headline-sm);
228
+ --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-headline-sm);
229
+ --db-type-headline-md: var(--db-typography-expressive-mobile-headline-md);
230
+ --db-base-headline-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-headline-md);
231
+ --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-headline-md);
232
+ --db-type-headline-lg: var(--db-typography-expressive-mobile-headline-lg);
233
+ --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-headline-lg);
234
+ --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-headline-lg);
235
+ --db-type-headline-xl: var(--db-typography-expressive-mobile-headline-xl);
236
+ --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-headline-xl);
237
+ --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-headline-xl);
238
+ --db-type-headline-2xl: var(--db-typography-expressive-mobile-headline-2xl);
239
+ --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-expressive-mobile-headline-2xl);
240
+ --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-mobile-headline-2xl);
241
+ --db-type-headline-3xl: var(--db-typography-expressive-mobile-headline-3xl);
242
+ --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-expressive-mobile-headline-3xl);
243
+ --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-headline-3xl);
244
+ }
245
+ }
246
+ @media screen and (45em < width <= 64em) {
247
+ .db-density-expressive,
248
+ [data-density=expressive] {
249
+ --db-type-headline-3xs: var(--db-typography-expressive-tablet-headline-3xs);
250
+ --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-expressive-tablet-headline-3xs);
251
+ --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-tablet-headline-3xs);
252
+ --db-type-headline-2xs: var(--db-typography-expressive-tablet-headline-2xs);
253
+ --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-expressive-tablet-headline-2xs);
254
+ --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-tablet-headline-2xs);
255
+ --db-type-headline-xs: var(--db-typography-expressive-tablet-headline-xs);
256
+ --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-expressive-tablet-headline-xs);
257
+ --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-expressive-tablet-headline-xs);
258
+ --db-type-headline-sm: var(--db-typography-expressive-tablet-headline-sm);
259
+ --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-expressive-tablet-headline-sm);
260
+ --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-expressive-tablet-headline-sm);
261
+ --db-type-headline-md: var(--db-typography-expressive-tablet-headline-md);
262
+ --db-base-headline-icon-weight-md: var(--db-base-icon-weight-expressive-tablet-headline-md);
263
+ --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-expressive-tablet-headline-md);
264
+ --db-type-headline-lg: var(--db-typography-expressive-tablet-headline-lg);
265
+ --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-expressive-tablet-headline-lg);
266
+ --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-expressive-tablet-headline-lg);
267
+ --db-type-headline-xl: var(--db-typography-expressive-tablet-headline-xl);
268
+ --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-expressive-tablet-headline-xl);
269
+ --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-expressive-tablet-headline-xl);
270
+ --db-type-headline-2xl: var(--db-typography-expressive-tablet-headline-2xl);
271
+ --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-expressive-tablet-headline-2xl);
272
+ --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-tablet-headline-2xl);
273
+ --db-type-headline-3xl: var(--db-typography-expressive-tablet-headline-3xl);
274
+ --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-expressive-tablet-headline-3xl);
275
+ --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-tablet-headline-3xl);
276
+ }
277
+ }
278
+ @media screen and (64em < width) {
279
+ .db-density-expressive,
280
+ [data-density=expressive] {
281
+ --db-type-headline-3xs: var(--db-typography-expressive-desktop-headline-3xs);
282
+ --db-base-headline-icon-weight-3xs: var(--db-base-icon-weight-expressive-desktop-headline-3xs);
283
+ --db-base-headline-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-desktop-headline-3xs);
284
+ --db-type-headline-2xs: var(--db-typography-expressive-desktop-headline-2xs);
285
+ --db-base-headline-icon-weight-2xs: var(--db-base-icon-weight-expressive-desktop-headline-2xs);
286
+ --db-base-headline-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-desktop-headline-2xs);
287
+ --db-type-headline-xs: var(--db-typography-expressive-desktop-headline-xs);
288
+ --db-base-headline-icon-weight-xs: var(--db-base-icon-weight-expressive-desktop-headline-xs);
289
+ --db-base-headline-icon-font-size-xs: var(--db-base-icon-font-size-expressive-desktop-headline-xs);
290
+ --db-type-headline-sm: var(--db-typography-expressive-desktop-headline-sm);
291
+ --db-base-headline-icon-weight-sm: var(--db-base-icon-weight-expressive-desktop-headline-sm);
292
+ --db-base-headline-icon-font-size-sm: var(--db-base-icon-font-size-expressive-desktop-headline-sm);
293
+ --db-type-headline-md: var(--db-typography-expressive-desktop-headline-md);
294
+ --db-base-headline-icon-weight-md: var(--db-base-icon-weight-expressive-desktop-headline-md);
295
+ --db-base-headline-icon-font-size-md: var(--db-base-icon-font-size-expressive-desktop-headline-md);
296
+ --db-type-headline-lg: var(--db-typography-expressive-desktop-headline-lg);
297
+ --db-base-headline-icon-weight-lg: var(--db-base-icon-weight-expressive-desktop-headline-lg);
298
+ --db-base-headline-icon-font-size-lg: var(--db-base-icon-font-size-expressive-desktop-headline-lg);
299
+ --db-type-headline-xl: var(--db-typography-expressive-desktop-headline-xl);
300
+ --db-base-headline-icon-weight-xl: var(--db-base-icon-weight-expressive-desktop-headline-xl);
301
+ --db-base-headline-icon-font-size-xl: var(--db-base-icon-font-size-expressive-desktop-headline-xl);
302
+ --db-type-headline-2xl: var(--db-typography-expressive-desktop-headline-2xl);
303
+ --db-base-headline-icon-weight-2xl: var(--db-base-icon-weight-expressive-desktop-headline-2xl);
304
+ --db-base-headline-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-desktop-headline-2xl);
305
+ --db-type-headline-3xl: var(--db-typography-expressive-desktop-headline-3xl);
306
+ --db-base-headline-icon-weight-3xl: var(--db-base-icon-weight-expressive-desktop-headline-3xl);
307
+ --db-base-headline-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-desktop-headline-3xl);
308
+ }
228
309
  }
229
310
  }
230
311
 
231
312
  .db-density-expressive,
232
313
  [data-density=expressive] {
233
- --db-type-body-font-size-3xs: var(--db-typography-expressive-mobile-body-3xs-font-size);
234
- --db-type-body-line-height-3xs: var(--db-typography-expressive-mobile-body-3xs-line-height);
235
- --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-body-3xs);
236
- --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-body-3xs);
237
- --db-type-body-font-size-2xs: var(--db-typography-expressive-mobile-body-2xs-font-size);
238
- --db-type-body-line-height-2xs: var(--db-typography-expressive-mobile-body-2xs-line-height);
239
- --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-body-2xs);
240
- --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-body-2xs);
241
- --db-type-body-font-size-xs: var(--db-typography-expressive-mobile-body-xs-font-size);
242
- --db-type-body-line-height-xs: var(--db-typography-expressive-mobile-body-xs-line-height);
243
- --db-base-body-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-body-xs);
244
- --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-body-xs);
245
- --db-type-body-font-size-sm: var(--db-typography-expressive-mobile-body-sm-font-size);
246
- --db-type-body-line-height-sm: var(--db-typography-expressive-mobile-body-sm-line-height);
247
- --db-base-body-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-body-sm);
248
- --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-body-sm);
249
- --db-type-body-font-size-md: var(--db-typography-expressive-mobile-body-md-font-size);
250
- --db-type-body-line-height-md: var(--db-typography-expressive-mobile-body-md-line-height);
251
- --db-base-body-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-body-md);
252
- --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-body-md);
253
- --db-type-body-font-size-lg: var(--db-typography-expressive-mobile-body-lg-font-size);
254
- --db-type-body-line-height-lg: var(--db-typography-expressive-mobile-body-lg-line-height);
255
- --db-base-body-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-body-lg);
256
- --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-body-lg);
257
- --db-type-body-font-size-xl: var(--db-typography-expressive-mobile-body-xl-font-size);
258
- --db-type-body-line-height-xl: var(--db-typography-expressive-mobile-body-xl-line-height);
259
- --db-base-body-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-body-xl);
260
- --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-body-xl);
261
- --db-type-body-font-size-2xl: var(--db-typography-expressive-mobile-body-2xl-font-size);
262
- --db-type-body-line-height-2xl: var(--db-typography-expressive-mobile-body-2xl-line-height);
263
- --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-expressive-mobile-body-2xl);
264
- --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-mobile-body-2xl);
265
- --db-type-body-font-size-3xl: var(--db-typography-expressive-mobile-body-3xl-font-size);
266
- --db-type-body-line-height-3xl: var(--db-typography-expressive-mobile-body-3xl-line-height);
267
- --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-expressive-mobile-body-3xl);
268
- --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-body-3xl);
269
- /* stylelint-disable at-rule-empty-line-before */
270
- /* stylelint-enable at-rule-empty-line-before */
271
- /* stylelint-disable-next-line media-query-no-invalid */
272
- /* stylelint-disable-next-line at-rule-empty-line-before */
273
- /* stylelint-disable at-rule-empty-line-before */
274
- /* stylelint-enable at-rule-empty-line-before */
275
- /* stylelint-disable-next-line media-query-no-invalid */
276
- /* stylelint-disable-next-line at-rule-empty-line-before */
314
+ /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
277
315
  }
278
- @media screen and (min-width: 45em) {
279
- .db-density-expressive:not([data-force-mobile]),
280
- [data-density=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-density-expressive,
281
- [data-force-mobile=false][data-density=expressive] {
282
- --db-type-body-font-size-3xs: var(--db-typography-expressive-tablet-body-3xs-font-size);
283
- --db-type-body-line-height-3xs: var(--db-typography-expressive-tablet-body-3xs-line-height);
284
- --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-body-3xs);
285
- --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-body-3xs);
286
- --db-type-body-font-size-2xs: var(--db-typography-expressive-tablet-body-2xs-font-size);
287
- --db-type-body-line-height-2xs: var(--db-typography-expressive-tablet-body-2xs-line-height);
288
- --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-body-2xs);
289
- --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-body-2xs);
290
- --db-type-body-font-size-xs: var(--db-typography-expressive-tablet-body-xs-font-size);
291
- --db-type-body-line-height-xs: var(--db-typography-expressive-tablet-body-xs-line-height);
292
- --db-base-body-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-body-xs);
293
- --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-body-xs);
294
- --db-type-body-font-size-sm: var(--db-typography-expressive-tablet-body-sm-font-size);
295
- --db-type-body-line-height-sm: var(--db-typography-expressive-tablet-body-sm-line-height);
296
- --db-base-body-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-body-sm);
297
- --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-body-sm);
298
- --db-type-body-font-size-md: var(--db-typography-expressive-tablet-body-md-font-size);
299
- --db-type-body-line-height-md: var(--db-typography-expressive-tablet-body-md-line-height);
300
- --db-base-body-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-body-md);
301
- --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-body-md);
302
- --db-type-body-font-size-lg: var(--db-typography-expressive-tablet-body-lg-font-size);
303
- --db-type-body-line-height-lg: var(--db-typography-expressive-tablet-body-lg-line-height);
304
- --db-base-body-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-body-lg);
305
- --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-body-lg);
306
- --db-type-body-font-size-xl: var(--db-typography-expressive-tablet-body-xl-font-size);
307
- --db-type-body-line-height-xl: var(--db-typography-expressive-tablet-body-xl-line-height);
308
- --db-base-body-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-body-xl);
309
- --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-body-xl);
310
- --db-type-body-font-size-2xl: var(--db-typography-expressive-tablet-body-2xl-font-size);
311
- --db-type-body-line-height-2xl: var(--db-typography-expressive-tablet-body-2xl-line-height);
312
- --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-expressive-mobile-body-2xl);
313
- --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-mobile-body-2xl);
314
- --db-type-body-font-size-3xl: var(--db-typography-expressive-tablet-body-3xl-font-size);
315
- --db-type-body-line-height-3xl: var(--db-typography-expressive-tablet-body-3xl-line-height);
316
- --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-expressive-mobile-body-3xl);
317
- --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-body-3xl);
316
+ @layer variables {
317
+ .db-density-expressive,
318
+ [data-density=expressive] {
319
+ /* stylelint-disable-next-line media-query-no-invalid */
320
+ /* stylelint-disable-next-line at-rule-empty-line-before */
321
+ /* stylelint-disable-next-line media-query-no-invalid */
322
+ /* stylelint-disable-next-line at-rule-empty-line-before */
323
+ /* stylelint-disable-next-line media-query-no-invalid */
324
+ /* stylelint-disable-next-line at-rule-empty-line-before */
318
325
  }
319
- }
320
- @media screen and (min-width: 64em) {
321
- .db-density-expressive:not([data-force-mobile]),
322
- [data-density=expressive]:not([data-force-mobile]), [data-force-mobile=false].db-density-expressive,
323
- [data-force-mobile=false][data-density=expressive] {
324
- --db-type-body-font-size-3xs: var(--db-typography-expressive-desktop-body-3xs-font-size);
325
- --db-type-body-line-height-3xs: var(--db-typography-expressive-desktop-body-3xs-line-height);
326
- --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-body-3xs);
327
- --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-body-3xs);
328
- --db-type-body-font-size-2xs: var(--db-typography-expressive-desktop-body-2xs-font-size);
329
- --db-type-body-line-height-2xs: var(--db-typography-expressive-desktop-body-2xs-line-height);
330
- --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-body-2xs);
331
- --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-body-2xs);
332
- --db-type-body-font-size-xs: var(--db-typography-expressive-desktop-body-xs-font-size);
333
- --db-type-body-line-height-xs: var(--db-typography-expressive-desktop-body-xs-line-height);
334
- --db-base-body-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-body-xs);
335
- --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-body-xs);
336
- --db-type-body-font-size-sm: var(--db-typography-expressive-desktop-body-sm-font-size);
337
- --db-type-body-line-height-sm: var(--db-typography-expressive-desktop-body-sm-line-height);
338
- --db-base-body-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-body-sm);
339
- --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-body-sm);
340
- --db-type-body-font-size-md: var(--db-typography-expressive-desktop-body-md-font-size);
341
- --db-type-body-line-height-md: var(--db-typography-expressive-desktop-body-md-line-height);
342
- --db-base-body-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-body-md);
343
- --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-body-md);
344
- --db-type-body-font-size-lg: var(--db-typography-expressive-desktop-body-lg-font-size);
345
- --db-type-body-line-height-lg: var(--db-typography-expressive-desktop-body-lg-line-height);
346
- --db-base-body-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-body-lg);
347
- --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-body-lg);
348
- --db-type-body-font-size-xl: var(--db-typography-expressive-desktop-body-xl-font-size);
349
- --db-type-body-line-height-xl: var(--db-typography-expressive-desktop-body-xl-line-height);
350
- --db-base-body-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-body-xl);
351
- --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-body-xl);
352
- --db-type-body-font-size-2xl: var(--db-typography-expressive-desktop-body-2xl-font-size);
353
- --db-type-body-line-height-2xl: var(--db-typography-expressive-desktop-body-2xl-line-height);
354
- --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-expressive-mobile-body-2xl);
355
- --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-mobile-body-2xl);
356
- --db-type-body-font-size-3xl: var(--db-typography-expressive-desktop-body-3xl-font-size);
357
- --db-type-body-line-height-3xl: var(--db-typography-expressive-desktop-body-3xl-line-height);
358
- --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-expressive-mobile-body-3xl);
359
- --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-body-3xl);
326
+ @media screen and (width <= 45em) {
327
+ .db-density-expressive,
328
+ [data-density=expressive] {
329
+ --db-type-body-3xs: var(--db-typography-expressive-mobile-body-3xs);
330
+ --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-expressive-mobile-body-3xs);
331
+ --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-mobile-body-3xs);
332
+ --db-type-body-2xs: var(--db-typography-expressive-mobile-body-2xs);
333
+ --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-expressive-mobile-body-2xs);
334
+ --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-mobile-body-2xs);
335
+ --db-type-body-xs: var(--db-typography-expressive-mobile-body-xs);
336
+ --db-base-body-icon-weight-xs: var(--db-base-icon-weight-expressive-mobile-body-xs);
337
+ --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-expressive-mobile-body-xs);
338
+ --db-type-body-sm: var(--db-typography-expressive-mobile-body-sm);
339
+ --db-base-body-icon-weight-sm: var(--db-base-icon-weight-expressive-mobile-body-sm);
340
+ --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-expressive-mobile-body-sm);
341
+ --db-type-body-md: var(--db-typography-expressive-mobile-body-md);
342
+ --db-base-body-icon-weight-md: var(--db-base-icon-weight-expressive-mobile-body-md);
343
+ --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-expressive-mobile-body-md);
344
+ --db-type-body-lg: var(--db-typography-expressive-mobile-body-lg);
345
+ --db-base-body-icon-weight-lg: var(--db-base-icon-weight-expressive-mobile-body-lg);
346
+ --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-expressive-mobile-body-lg);
347
+ --db-type-body-xl: var(--db-typography-expressive-mobile-body-xl);
348
+ --db-base-body-icon-weight-xl: var(--db-base-icon-weight-expressive-mobile-body-xl);
349
+ --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-expressive-mobile-body-xl);
350
+ --db-type-body-2xl: var(--db-typography-expressive-mobile-body-2xl);
351
+ --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-expressive-mobile-body-2xl);
352
+ --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-mobile-body-2xl);
353
+ --db-type-body-3xl: var(--db-typography-expressive-mobile-body-3xl);
354
+ --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-expressive-mobile-body-3xl);
355
+ --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-mobile-body-3xl);
356
+ }
357
+ }
358
+ @media screen and (45em < width <= 64em) {
359
+ .db-density-expressive,
360
+ [data-density=expressive] {
361
+ --db-type-body-3xs: var(--db-typography-expressive-tablet-body-3xs);
362
+ --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-expressive-tablet-body-3xs);
363
+ --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-tablet-body-3xs);
364
+ --db-type-body-2xs: var(--db-typography-expressive-tablet-body-2xs);
365
+ --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-expressive-tablet-body-2xs);
366
+ --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-tablet-body-2xs);
367
+ --db-type-body-xs: var(--db-typography-expressive-tablet-body-xs);
368
+ --db-base-body-icon-weight-xs: var(--db-base-icon-weight-expressive-tablet-body-xs);
369
+ --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-expressive-tablet-body-xs);
370
+ --db-type-body-sm: var(--db-typography-expressive-tablet-body-sm);
371
+ --db-base-body-icon-weight-sm: var(--db-base-icon-weight-expressive-tablet-body-sm);
372
+ --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-expressive-tablet-body-sm);
373
+ --db-type-body-md: var(--db-typography-expressive-tablet-body-md);
374
+ --db-base-body-icon-weight-md: var(--db-base-icon-weight-expressive-tablet-body-md);
375
+ --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-expressive-tablet-body-md);
376
+ --db-type-body-lg: var(--db-typography-expressive-tablet-body-lg);
377
+ --db-base-body-icon-weight-lg: var(--db-base-icon-weight-expressive-tablet-body-lg);
378
+ --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-expressive-tablet-body-lg);
379
+ --db-type-body-xl: var(--db-typography-expressive-tablet-body-xl);
380
+ --db-base-body-icon-weight-xl: var(--db-base-icon-weight-expressive-tablet-body-xl);
381
+ --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-expressive-tablet-body-xl);
382
+ --db-type-body-2xl: var(--db-typography-expressive-tablet-body-2xl);
383
+ --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-expressive-tablet-body-2xl);
384
+ --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-tablet-body-2xl);
385
+ --db-type-body-3xl: var(--db-typography-expressive-tablet-body-3xl);
386
+ --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-expressive-tablet-body-3xl);
387
+ --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-tablet-body-3xl);
388
+ }
389
+ }
390
+ @media screen and (64em < width) {
391
+ .db-density-expressive,
392
+ [data-density=expressive] {
393
+ --db-type-body-3xs: var(--db-typography-expressive-desktop-body-3xs);
394
+ --db-base-body-icon-weight-3xs: var(--db-base-icon-weight-expressive-desktop-body-3xs);
395
+ --db-base-body-icon-font-size-3xs: var(--db-base-icon-font-size-expressive-desktop-body-3xs);
396
+ --db-type-body-2xs: var(--db-typography-expressive-desktop-body-2xs);
397
+ --db-base-body-icon-weight-2xs: var(--db-base-icon-weight-expressive-desktop-body-2xs);
398
+ --db-base-body-icon-font-size-2xs: var(--db-base-icon-font-size-expressive-desktop-body-2xs);
399
+ --db-type-body-xs: var(--db-typography-expressive-desktop-body-xs);
400
+ --db-base-body-icon-weight-xs: var(--db-base-icon-weight-expressive-desktop-body-xs);
401
+ --db-base-body-icon-font-size-xs: var(--db-base-icon-font-size-expressive-desktop-body-xs);
402
+ --db-type-body-sm: var(--db-typography-expressive-desktop-body-sm);
403
+ --db-base-body-icon-weight-sm: var(--db-base-icon-weight-expressive-desktop-body-sm);
404
+ --db-base-body-icon-font-size-sm: var(--db-base-icon-font-size-expressive-desktop-body-sm);
405
+ --db-type-body-md: var(--db-typography-expressive-desktop-body-md);
406
+ --db-base-body-icon-weight-md: var(--db-base-icon-weight-expressive-desktop-body-md);
407
+ --db-base-body-icon-font-size-md: var(--db-base-icon-font-size-expressive-desktop-body-md);
408
+ --db-type-body-lg: var(--db-typography-expressive-desktop-body-lg);
409
+ --db-base-body-icon-weight-lg: var(--db-base-icon-weight-expressive-desktop-body-lg);
410
+ --db-base-body-icon-font-size-lg: var(--db-base-icon-font-size-expressive-desktop-body-lg);
411
+ --db-type-body-xl: var(--db-typography-expressive-desktop-body-xl);
412
+ --db-base-body-icon-weight-xl: var(--db-base-icon-weight-expressive-desktop-body-xl);
413
+ --db-base-body-icon-font-size-xl: var(--db-base-icon-font-size-expressive-desktop-body-xl);
414
+ --db-type-body-2xl: var(--db-typography-expressive-desktop-body-2xl);
415
+ --db-base-body-icon-weight-2xl: var(--db-base-icon-weight-expressive-desktop-body-2xl);
416
+ --db-base-body-icon-font-size-2xl: var(--db-base-icon-font-size-expressive-desktop-body-2xl);
417
+ --db-type-body-3xl: var(--db-typography-expressive-desktop-body-3xl);
418
+ --db-base-body-icon-weight-3xl: var(--db-base-icon-weight-expressive-desktop-body-3xl);
419
+ --db-base-body-icon-font-size-3xl: var(--db-base-icon-font-size-expressive-desktop-body-3xl);
420
+ }
360
421
  }
361
422
  }
423
+
424
+ @layer variables {}
425
+
426
+ @layer variables {}
427
+
428
+ @layer variables {}
429
+
430
+ @layer variables {}