beercss 3.1.3 → 3.2.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 (40) hide show
  1. package/README.md +12 -32
  2. package/dist/cdn/beer.min.css +1 -1
  3. package/dist/cdn/beer.min.js +1 -1
  4. package/index.js +0 -6
  5. package/package.json +1 -1
  6. package/src/cdn/beer.css +2 -2
  7. package/src/cdn/beer.ts +46 -35
  8. package/src/cdn/elements/badges.css +10 -6
  9. package/src/cdn/elements/buttons.css +9 -1
  10. package/src/cdn/elements/chips.css +13 -0
  11. package/src/cdn/elements/{modals.css → dialogs.css} +31 -25
  12. package/src/cdn/elements/fields.css +24 -1
  13. package/src/cdn/elements/layouts.css +3 -3
  14. package/src/cdn/elements/{dropdowns.css → menus.css} +15 -34
  15. package/src/cdn/elements/navigations.css +7 -7
  16. package/src/cdn/elements/pages.css +1 -1
  17. package/src/cdn/elements/toasts.css +6 -2
  18. package/src/cdn/elements/tooltips.css +19 -9
  19. package/src/cdn/helpers/blurs.css +1 -1
  20. package/src/cdn/helpers/forms.css +16 -2
  21. package/src/cdn/helpers/margins.css +1 -1
  22. package/src/cdn/helpers/sizes.css +1 -1
  23. package/src/cdn/helpers/theme.css +13 -0
  24. package/src/cdn/helpers/typography.css +4 -0
  25. package/src/cdn/settings/dark.css +2 -0
  26. package/src/cdn/settings/fonts.css +0 -198
  27. package/src/cdn/settings/globals.css +2 -2
  28. package/src/cdn/settings/light.css +2 -0
  29. package/dist/cdn/roboto-flex-cyrillic-ext.woff2 +0 -0
  30. package/dist/cdn/roboto-flex-cyrillic.woff2 +0 -0
  31. package/dist/cdn/roboto-flex-greek.woff2 +0 -0
  32. package/dist/cdn/roboto-flex-latin-ext.woff2 +0 -0
  33. package/dist/cdn/roboto-flex-latin.woff2 +0 -0
  34. package/dist/cdn/roboto-flex-vietnamese.woff2 +0 -0
  35. package/src/cdn/roboto-flex-cyrillic-ext.woff2 +0 -0
  36. package/src/cdn/roboto-flex-cyrillic.woff2 +0 -0
  37. package/src/cdn/roboto-flex-greek.woff2 +0 -0
  38. package/src/cdn/roboto-flex-latin-ext.woff2 +0 -0
  39. package/src/cdn/roboto-flex-latin.woff2 +0 -0
  40. package/src/cdn/roboto-flex-vietnamese.woff2 +0 -0
package/src/cdn/elements/toasts.css CHANGED
@@ -12,8 +12,8 @@
12
12
  visibility: hidden;
13
13
  display: flex;
14
14
  box-shadow: var(--elevate2);
15
- color: var(--on-error);
16
- background-color: var(--error-background);
15
+ color: var(--inverse-on-surface);
16
+ background-color: var(--inverse-surface);
17
17
  padding: 1rem;
18
18
  opacity: 1;
19
19
  cursor: pointer;
@@ -38,6 +38,10 @@
38
38
  ---transform: translate(-50%, -1rem);
39
39
  }
40
40
 
41
+ .toast > .max {
42
+ flex: auto;
43
+ }
44
+
41
45
  @keyframes to-toast {
42
46
  0% {
43
47
  opacity: 0;
package/src/cdn/elements/tooltips.css CHANGED
@@ -1,13 +1,13 @@
1
1
  .tooltip {
2
- ---space: 0;
2
+ ---space: -0.5rem;
3
3
 
4
4
  visibility: hidden;
5
5
  display: flex;
6
6
  align-items: center;
7
7
  justify-content: center;
8
8
  gap: 0.5rem;
9
- background-color: rgb(0 0 0 / 0.9);
10
- color: #FFF;
9
+ background-color: var(--inverse-surface);
10
+ color: var(--inverse-on-surface);
11
11
  font-size: 0.75rem;
12
12
  text-align: center;
13
13
  border-radius: 0.25rem;
@@ -83,9 +83,8 @@
83
83
  transform: translate(-50%, 100%) scale(1);
84
84
  }
85
85
 
86
- .tooltip.small-space,
87
- .tooltip.space {
88
- ---space: -0.5rem;
86
+ .tooltip.no-space {
87
+ ---space: 0rem;
89
88
  }
90
89
 
91
90
  .tooltip.medium-space {
@@ -112,9 +111,9 @@
112
111
  margin-bottom: var(---space) !important;
113
112
  }
114
113
 
115
- .dropdown:active ~ .tooltip,
116
- :is(button, .button):focus > .dropdown ~ .tooltip,
117
- .field > :focus ~ .dropdown ~ .tooltip {
114
+ menu:active ~ .tooltip,
115
+ :is(button, .button):focus > menu ~ .tooltip,
116
+ .field > :focus ~ menu ~ .tooltip {
118
117
  visibility: hidden;
119
118
  }
120
119
 
@@ -149,3 +148,14 @@
149
148
  .slider.vertical > .tooltip:is(.left, .right) {
150
149
  ---space: -0.5rem;
151
150
  }
151
+
152
+ .tooltip.max {
153
+ display: block;
154
+ font-size: inherit;
155
+ white-space: normal;
156
+ text-align: left;
157
+ width: 20rem;
158
+ border-radius: 0.5rem;
159
+ padding: 1rem;
160
+ box-shadow: var(--elevate2);
161
+ }
package/src/cdn/helpers/blurs.css CHANGED
@@ -18,4 +18,4 @@
18
18
 
19
19
  .large-blur {
20
20
  ---blur: 1.5rem;
21
- }
21
+ }
package/src/cdn/helpers/forms.css CHANGED
@@ -1,8 +1,18 @@
1
- .round:not(i, img, video, svg) {
1
+ .medium-round:not(i, img, video, svg),
2
+ .round:not(i, img, video, svg, button, .button, .chip, .field) {
2
3
  border-radius: 2rem !important;
3
4
  }
4
5
 
5
- .no-round {
6
+ .small-round:not(i, img, video, svg) {
7
+ border-radius: 0.5rem !important;
8
+ }
9
+
10
+ .large-round:not(i, img, video, svg) {
11
+ border-radius: 3.5rem !important;
12
+ }
13
+
14
+ .no-round,
15
+ .square {
6
16
  border-radius: 0 !important;
7
17
  }
8
18
 
@@ -81,3 +91,7 @@
81
91
  background-color: transparent;
82
92
  box-shadow: none;
83
93
  }
94
+
95
+ .badge.square {
96
+ border-radius: 0;
97
+ }
package/src/cdn/helpers/margins.css CHANGED
@@ -3,7 +3,7 @@
3
3
  }
4
4
 
5
5
  .tiny-margin {
6
- padding: 0.25rem !important;
6
+ margin: 0.25rem !important;
7
7
  }
8
8
 
9
9
  .small-margin {
package/src/cdn/helpers/sizes.css CHANGED
@@ -30,7 +30,7 @@
30
30
  white-space: normal;
31
31
  }
32
32
 
33
- .no-wrap:not(.dropdown) {
33
+ .no-wrap:not(menu) {
34
34
  display: flex;
35
35
  white-space: nowrap;
36
36
  }
package/src/cdn/helpers/theme.css CHANGED
@@ -90,6 +90,19 @@
90
90
  color: var(--inverse-on-surface);
91
91
  }
92
92
 
93
+ .inverse-primary {
94
+ background-color: var(--inverse-primary);
95
+ color: var(--inverse-on-primary);
96
+ }
97
+
98
+ .inverse-primary-text {
99
+ color: var(--inverse-primary) !important;
100
+ }
101
+
102
+ .inverse-primary-border {
103
+ border-color: var(--inverse-primary) !important;
104
+ }
105
+
93
106
  .black {
94
107
  background-color: #000 !important;
95
108
  }
package/src/cdn/helpers/typography.css CHANGED
@@ -106,6 +106,10 @@ h6.large {
106
106
  color: var(--primary) !important;
107
107
  }
108
108
 
109
+ .inverse-link {
110
+ color: var(--inverse-primary) !important;
111
+ }
112
+
109
113
  .truncate {
110
114
  overflow: hidden;
111
115
  white-space: nowrap !important;
package/src/cdn/settings/dark.css CHANGED
@@ -24,6 +24,8 @@ body.dark {
24
24
  --on-surface-variant: #CAC4D0;
25
25
  --inverse-surface: #E6E1E5;
26
26
  --inverse-on-surface: #313033;
27
+ --inverse-primary: #6750A4;
28
+ --inverse-on-primary: #FFF;
27
29
  --body: #000;
28
30
  --overlay: rgb(0 0 0 / 0.5);
29
31
  --active: rgb(255 255 255 / 0.2);
package/src/cdn/settings/fonts.css CHANGED
@@ -24,201 +24,3 @@
24
24
  font-display: swap;
25
25
  src: url("../material-symbols-sharp.woff2") format("woff2");
26
26
  }
27
-
28
- /* cyrillic-ext */
29
- @font-face {
30
- font-family: "Roboto Flex";
31
- font-style: normal;
32
- font-weight: 300;
33
- font-stretch: 100%;
34
- font-display: swap;
35
- src: url("../roboto-flex-cyrillic-ext.woff2") format("woff2");
36
- unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
37
- }
38
-
39
- /* cyrillic */
40
- @font-face {
41
- font-family: "Roboto Flex";
42
- font-style: normal;
43
- font-weight: 300;
44
- font-stretch: 100%;
45
- font-display: swap;
46
- src: url("../roboto-flex-cyrillic.woff2") format("woff2");
47
- unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
48
- }
49
-
50
- /* greek */
51
- @font-face {
52
- font-family: "Roboto Flex";
53
- font-style: normal;
54
- font-weight: 300;
55
- font-stretch: 100%;
56
- font-display: swap;
57
- src: url("../roboto-flex-greek.woff2") format("woff2");
58
- unicode-range: U+0370-03FF;
59
- }
60
-
61
- /* vietnamese */
62
- @font-face {
63
- font-family: "Roboto Flex";
64
- font-style: normal;
65
- font-weight: 300;
66
- font-stretch: 100%;
67
- font-display: swap;
68
- src: url("../roboto-flex-vietnamese.woff2") format("woff2");
69
- unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
70
- }
71
-
72
- /* latin-ext */
73
- @font-face {
74
- font-family: "Roboto Flex";
75
- font-style: normal;
76
- font-weight: 300;
77
- font-stretch: 100%;
78
- font-display: swap;
79
- src: url("../roboto-flex-latin-ext.woff2") format("woff2");
80
- unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
81
- }
82
-
83
- /* latin */
84
- @font-face {
85
- font-family: "Roboto Flex";
86
- font-style: normal;
87
- font-weight: 300;
88
- font-stretch: 100%;
89
- font-display: swap;
90
- src: url("../roboto-flex-latin.woff2") format("woff2");
91
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
92
- }
93
-
94
- /* cyrillic-ext */
95
- @font-face {
96
- font-family: "Roboto Flex";
97
- font-style: normal;
98
- font-weight: 400;
99
- font-stretch: 100%;
100
- font-display: swap;
101
- src: url("../roboto-flex-cyrillic-ext.woff2") format("woff2");
102
- unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
103
- }
104
-
105
- /* cyrillic */
106
- @font-face {
107
- font-family: "Roboto Flex";
108
- font-style: normal;
109
- font-weight: 400;
110
- font-stretch: 100%;
111
- font-display: swap;
112
- src: url("../roboto-flex-cyrillic.woff2") format("woff2");
113
- unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
114
- }
115
-
116
- /* greek */
117
- @font-face {
118
- font-family: "Roboto Flex";
119
- font-style: normal;
120
- font-weight: 400;
121
- font-stretch: 100%;
122
- font-display: swap;
123
- src: url("../roboto-flex-greek.woff2") format("woff2");
124
- unicode-range: U+0370-03FF;
125
- }
126
-
127
- /* vietnamese */
128
- @font-face {
129
- font-family: "Roboto Flex";
130
- font-style: normal;
131
- font-weight: 400;
132
- font-stretch: 100%;
133
- font-display: swap;
134
- src: url("../roboto-flex-vietnamese.woff2") format("woff2");
135
- unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
136
- }
137
-
138
- /* latin-ext */
139
- @font-face {
140
- font-family: "Roboto Flex";
141
- font-style: normal;
142
- font-weight: 400;
143
- font-stretch: 100%;
144
- font-display: swap;
145
- src: url("../roboto-flex-latin-ext.woff2") format("woff2");
146
- unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
147
- }
148
-
149
- /* latin */
150
- @font-face {
151
- font-family: "Roboto Flex";
152
- font-style: normal;
153
- font-weight: 400;
154
- font-stretch: 100%;
155
- font-display: swap;
156
- src: url("../roboto-flex-latin.woff2") format("woff2");
157
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
158
- }
159
-
160
- /* cyrillic-ext */
161
- @font-face {
162
- font-family: "Roboto Flex";
163
- font-style: normal;
164
- font-weight: 500;
165
- font-stretch: 100%;
166
- font-display: swap;
167
- src: url("../roboto-flex-cyrillic-ext.woff2") format("woff2");
168
- unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
169
- }
170
-
171
- /* cyrillic */
172
- @font-face {
173
- font-family: "Roboto Flex";
174
- font-style: normal;
175
- font-weight: 500;
176
- font-stretch: 100%;
177
- font-display: swap;
178
- src: url("../roboto-flex-cyrillic.woff2") format("woff2");
179
- unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
180
- }
181
-
182
- /* greek */
183
- @font-face {
184
- font-family: "Roboto Flex";
185
- font-style: normal;
186
- font-weight: 500;
187
- font-stretch: 100%;
188
- font-display: swap;
189
- src: url("../roboto-flex-greek.woff2") format("woff2");
190
- unicode-range: U+0370-03FF;
191
- }
192
-
193
- /* vietnamese */
194
- @font-face {
195
- font-family: "Roboto Flex";
196
- font-style: normal;
197
- font-weight: 500;
198
- font-stretch: 100%;
199
- font-display: swap;
200
- src: url("../roboto-flex-vietnamese.woff2") format("woff2");
201
- unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
202
- }
203
-
204
- /* latin-ext */
205
- @font-face {
206
- font-family: "Roboto Flex";
207
- font-style: normal;
208
- font-weight: 500;
209
- font-stretch: 100%;
210
- font-display: swap;
211
- src: url("../roboto-flex-latin-ext.woff2") format("woff2");
212
- unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
213
- }
214
-
215
- /* latin */
216
- @font-face {
217
- font-family: "Roboto Flex";
218
- font-style: normal;
219
- font-weight: 500;
220
- font-stretch: 100%;
221
- font-display: swap;
222
- src: url("../roboto-flex-latin.woff2") format("woff2");
223
- unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
224
- }
package/src/cdn/settings/globals.css CHANGED
@@ -1,9 +1,9 @@
1
1
  :root {
2
2
  --size: 16px;
3
- --font: "Roboto Flex", "Roboto", sans-serif, system-ui, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial";
3
+ --font: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
4
4
  --font-icon: "Material Symbols Outlined";
5
5
  --speed1: 0.1s;
6
6
  --speed2: 0.2s;
7
7
  --speed3: 0.3s;
8
8
  --speed4: 0.4s;
9
- }
9
+ }
package/src/cdn/settings/light.css CHANGED
@@ -25,6 +25,8 @@ body.light {
25
25
  --on-surface-variant: #49454E;
26
26
  --inverse-surface: #313033;
27
27
  --inverse-on-surface: #F4EFF4;
28
+ --inverse-primary: #D0BCFF;
29
+ --inverse-on-primary: #371E73;
28
30
  --body: #FFF;
29
31
  --overlay: rgb(0 0 0 / 0.5);
30
32
  --active: rgb(0 0 0 / 0.1);
package/dist/cdn/roboto-flex-cyrillic.woff2 DELETED
Binary file
package/dist/cdn/roboto-flex-greek.woff2 DELETED
Binary file
package/dist/cdn/roboto-flex-latin.woff2 DELETED
Binary file
package/src/cdn/roboto-flex-cyrillic.woff2 DELETED
Binary file
package/src/cdn/roboto-flex-greek.woff2 DELETED
Binary file
package/src/cdn/roboto-flex-latin-ext.woff2 DELETED
Binary file
package/src/cdn/roboto-flex-latin.woff2 DELETED
Binary file