beercss 2.2.11 → 3.0.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.
- package/README.md +45 -35
- package/dist/cdn/beer.min.css +1 -1
- package/dist/cdn/beer.min.js +1 -1
- package/dist/cdn/material-symbols-outlined.woff2 +0 -0
- package/dist/cdn/roboto-flex-cyrillic-ext.woff2 +0 -0
- package/dist/cdn/roboto-flex-cyrillic.woff2 +0 -0
- package/dist/cdn/roboto-flex-greek.woff2 +0 -0
- package/dist/cdn/roboto-flex-latin-ext.woff2 +0 -0
- package/dist/cdn/roboto-flex-latin.woff2 +0 -0
- package/dist/cdn/roboto-flex-vietnamese.woff2 +0 -0
- package/index.js +10 -2
- package/package.json +17 -2
- package/src/cdn/beer.css +3 -2
- package/src/cdn/beer.ts +164 -166
- package/src/cdn/elements/badges.css +7 -7
- package/src/cdn/elements/buttons.css +24 -24
- package/src/cdn/elements/cards.css +7 -7
- package/src/cdn/elements/chips.css +14 -14
- package/src/cdn/elements/containers.css +30 -21
- package/src/cdn/elements/dropdowns.css +5 -5
- package/src/cdn/elements/expansions.css +9 -5
- package/src/cdn/elements/fields.css +70 -70
- package/src/cdn/elements/grids.css +31 -30
- package/src/cdn/elements/icons.css +18 -18
- package/src/cdn/elements/layouts.css +17 -17
- package/src/cdn/elements/loaders.css +45 -35
- package/src/cdn/elements/media.css +37 -37
- package/src/cdn/elements/modals.css +17 -17
- package/src/cdn/elements/navigations.css +33 -32
- package/src/cdn/elements/overlays.css +1 -1
- package/src/cdn/elements/pages.css +12 -9
- package/src/cdn/elements/progress.css +2 -2
- package/src/cdn/elements/selections.css +31 -30
- package/src/cdn/elements/tables.css +14 -14
- package/src/cdn/elements/tabs.css +21 -16
- package/src/cdn/elements/toasts.css +12 -12
- package/src/cdn/elements/tooltips.css +10 -10
- package/src/cdn/helpers/alignments.css +1 -1
- package/src/cdn/helpers/colors.css +215 -215
- package/src/cdn/helpers/directions.css +30 -0
- package/src/cdn/helpers/dividers.css +5 -5
- package/src/cdn/helpers/elevates.css +1 -1
- package/src/cdn/helpers/forms.css +21 -21
- package/src/cdn/helpers/margins.css +5 -5
- package/src/cdn/helpers/opacities.css +1 -1
- package/src/cdn/helpers/paddings.css +5 -5
- package/src/cdn/helpers/positions.css +1 -1
- package/src/cdn/helpers/reset.css +2 -2
- package/src/cdn/helpers/responsive.css +2 -1
- package/src/cdn/helpers/scrolls.css +1 -2
- package/src/cdn/helpers/shadows.css +1 -1
- package/src/cdn/helpers/sizes.css +7 -7
- package/src/cdn/helpers/spaces.css +5 -5
- package/src/cdn/helpers/theme.css +38 -38
- package/src/cdn/helpers/typography.css +63 -14
- package/src/cdn/helpers/waves.css +10 -10
- package/src/cdn/material-symbols-outlined.woff2 +0 -0
- package/src/cdn/roboto-flex-cyrillic-ext.woff2 +0 -0
- package/src/cdn/roboto-flex-cyrillic.woff2 +0 -0
- package/src/cdn/roboto-flex-greek.woff2 +0 -0
- package/src/cdn/roboto-flex-latin-ext.woff2 +0 -0
- package/src/cdn/roboto-flex-latin.woff2 +0 -0
- package/src/cdn/roboto-flex-vietnamese.woff2 +0 -0
- package/src/cdn/settings/dark.css +13 -14
- package/src/cdn/settings/fonts.css +206 -0
- package/src/cdn/settings/light.css +17 -18
- package/src/cdn/settings/urls.css +0 -1
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -24,17 +24,16 @@ body.dark {
|
|
|
24
24
|
--on-surface-variant: #CAC4D0;
|
|
25
25
|
--inverse-surface: #E6E1E5;
|
|
26
26
|
--inverse-on-surface: #313033;
|
|
27
|
-
|
|
28
|
-
--
|
|
29
|
-
--
|
|
30
|
-
--
|
|
31
|
-
--
|
|
32
|
-
--
|
|
33
|
-
--
|
|
34
|
-
--
|
|
35
|
-
--
|
|
36
|
-
--
|
|
37
|
-
--
|
|
38
|
-
--
|
|
39
|
-
|
|
40
|
-
}
|
|
27
|
+
--body: #000;
|
|
28
|
+
--overlay: rgb(0 0 0 / 0.5);
|
|
29
|
+
--active: rgb(255 255 255 / 0.2);
|
|
30
|
+
--elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.14), 0 0.0625rem 0.3125rem 0 rgb(0 0 0 / 0.12), 0 0.1875rem 0.0625rem -0.125rem rgb(0 0 0 / 0.2);
|
|
31
|
+
--elevate2: 0 0.375rem 0.625rem 0 rgb(0 0 0 / 0.14), 0 0.0625rem 1.125rem 0 rgb(0 0 0 / 0.12), 0 0.1875rem 0.3125rem -0.0625rem rgb(0 0 0 / 0.3);
|
|
32
|
+
--elevate3: 0 0.625rem 1rem 0 rgb(0 0 0 / 0.14), 0 0.0625rem 1.9375rem 0 rgb(0 0 0 / 0.12), 0 0.1875rem 0.5625rem 0 rgb(0 0 0 / 0.4);
|
|
33
|
+
--size: 16px;
|
|
34
|
+
--font: "Roboto Flex", "Roboto", sans-serif, system-ui, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial";
|
|
35
|
+
--speed1: 0.1s;
|
|
36
|
+
--speed2: 0.2s;
|
|
37
|
+
--speed3: 0.3s;
|
|
38
|
+
--speed4: 0.4s;
|
|
39
|
+
}
|
|
@@ -0,0 +1,206 @@
|
|
|
1
|
+
/* fallback */
|
|
2
|
+
@font-face {
|
|
3
|
+
font-family: "Material Symbols Outlined";
|
|
4
|
+
font-style: normal;
|
|
5
|
+
font-weight: 400;
|
|
6
|
+
font-display: swap;
|
|
7
|
+
src: url("../material-symbols-outlined.woff2") format("woff2");
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
/* cyrillic-ext */
|
|
11
|
+
@font-face {
|
|
12
|
+
font-family: "Roboto Flex";
|
|
13
|
+
font-style: normal;
|
|
14
|
+
font-weight: 300;
|
|
15
|
+
font-stretch: 100%;
|
|
16
|
+
font-display: swap;
|
|
17
|
+
src: url("../roboto-flex-cyrillic-ext.woff2") format("woff2");
|
|
18
|
+
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* cyrillic */
|
|
22
|
+
@font-face {
|
|
23
|
+
font-family: "Roboto Flex";
|
|
24
|
+
font-style: normal;
|
|
25
|
+
font-weight: 300;
|
|
26
|
+
font-stretch: 100%;
|
|
27
|
+
font-display: swap;
|
|
28
|
+
src: url("../roboto-flex-cyrillic.woff2") format("woff2");
|
|
29
|
+
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* greek */
|
|
33
|
+
@font-face {
|
|
34
|
+
font-family: "Roboto Flex";
|
|
35
|
+
font-style: normal;
|
|
36
|
+
font-weight: 300;
|
|
37
|
+
font-stretch: 100%;
|
|
38
|
+
font-display: swap;
|
|
39
|
+
src: url("../roboto-flex-greek.woff2") format("woff2");
|
|
40
|
+
unicode-range: U+0370-03FF;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* vietnamese */
|
|
44
|
+
@font-face {
|
|
45
|
+
font-family: "Roboto Flex";
|
|
46
|
+
font-style: normal;
|
|
47
|
+
font-weight: 300;
|
|
48
|
+
font-stretch: 100%;
|
|
49
|
+
font-display: swap;
|
|
50
|
+
src: url("../roboto-flex-vietnamese.woff2") format("woff2");
|
|
51
|
+
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;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* latin-ext */
|
|
55
|
+
@font-face {
|
|
56
|
+
font-family: "Roboto Flex";
|
|
57
|
+
font-style: normal;
|
|
58
|
+
font-weight: 300;
|
|
59
|
+
font-stretch: 100%;
|
|
60
|
+
font-display: swap;
|
|
61
|
+
src: url("../roboto-flex-latin-ext.woff2") format("woff2");
|
|
62
|
+
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;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* latin */
|
|
66
|
+
@font-face {
|
|
67
|
+
font-family: "Roboto Flex";
|
|
68
|
+
font-style: normal;
|
|
69
|
+
font-weight: 300;
|
|
70
|
+
font-stretch: 100%;
|
|
71
|
+
font-display: swap;
|
|
72
|
+
src: url("../roboto-flex-latin.woff2") format("woff2");
|
|
73
|
+
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;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/* cyrillic-ext */
|
|
77
|
+
@font-face {
|
|
78
|
+
font-family: "Roboto Flex";
|
|
79
|
+
font-style: normal;
|
|
80
|
+
font-weight: 400;
|
|
81
|
+
font-stretch: 100%;
|
|
82
|
+
font-display: swap;
|
|
83
|
+
src: url("../roboto-flex-cyrillic-ext.woff2") format("woff2");
|
|
84
|
+
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/* cyrillic */
|
|
88
|
+
@font-face {
|
|
89
|
+
font-family: "Roboto Flex";
|
|
90
|
+
font-style: normal;
|
|
91
|
+
font-weight: 400;
|
|
92
|
+
font-stretch: 100%;
|
|
93
|
+
font-display: swap;
|
|
94
|
+
src: url("../roboto-flex-cyrillic.woff2") format("woff2");
|
|
95
|
+
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* greek */
|
|
99
|
+
@font-face {
|
|
100
|
+
font-family: "Roboto Flex";
|
|
101
|
+
font-style: normal;
|
|
102
|
+
font-weight: 400;
|
|
103
|
+
font-stretch: 100%;
|
|
104
|
+
font-display: swap;
|
|
105
|
+
src: url("../roboto-flex-greek.woff2") format("woff2");
|
|
106
|
+
unicode-range: U+0370-03FF;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* vietnamese */
|
|
110
|
+
@font-face {
|
|
111
|
+
font-family: "Roboto Flex";
|
|
112
|
+
font-style: normal;
|
|
113
|
+
font-weight: 400;
|
|
114
|
+
font-stretch: 100%;
|
|
115
|
+
font-display: swap;
|
|
116
|
+
src: url("../roboto-flex-vietnamese.woff2") format("woff2");
|
|
117
|
+
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;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* latin-ext */
|
|
121
|
+
@font-face {
|
|
122
|
+
font-family: "Roboto Flex";
|
|
123
|
+
font-style: normal;
|
|
124
|
+
font-weight: 400;
|
|
125
|
+
font-stretch: 100%;
|
|
126
|
+
font-display: swap;
|
|
127
|
+
src: url("../roboto-flex-latin-ext.woff2") format("woff2");
|
|
128
|
+
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;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* latin */
|
|
132
|
+
@font-face {
|
|
133
|
+
font-family: "Roboto Flex";
|
|
134
|
+
font-style: normal;
|
|
135
|
+
font-weight: 400;
|
|
136
|
+
font-stretch: 100%;
|
|
137
|
+
font-display: swap;
|
|
138
|
+
src: url("../roboto-flex-latin.woff2") format("woff2");
|
|
139
|
+
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;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* cyrillic-ext */
|
|
143
|
+
@font-face {
|
|
144
|
+
font-family: "Roboto Flex";
|
|
145
|
+
font-style: normal;
|
|
146
|
+
font-weight: 500;
|
|
147
|
+
font-stretch: 100%;
|
|
148
|
+
font-display: swap;
|
|
149
|
+
src: url("../roboto-flex-cyrillic-ext.woff2") format("woff2");
|
|
150
|
+
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
/* cyrillic */
|
|
154
|
+
@font-face {
|
|
155
|
+
font-family: "Roboto Flex";
|
|
156
|
+
font-style: normal;
|
|
157
|
+
font-weight: 500;
|
|
158
|
+
font-stretch: 100%;
|
|
159
|
+
font-display: swap;
|
|
160
|
+
src: url("../roboto-flex-cyrillic.woff2") format("woff2");
|
|
161
|
+
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
/* greek */
|
|
165
|
+
@font-face {
|
|
166
|
+
font-family: "Roboto Flex";
|
|
167
|
+
font-style: normal;
|
|
168
|
+
font-weight: 500;
|
|
169
|
+
font-stretch: 100%;
|
|
170
|
+
font-display: swap;
|
|
171
|
+
src: url("../roboto-flex-greek.woff2") format("woff2");
|
|
172
|
+
unicode-range: U+0370-03FF;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
/* vietnamese */
|
|
176
|
+
@font-face {
|
|
177
|
+
font-family: "Roboto Flex";
|
|
178
|
+
font-style: normal;
|
|
179
|
+
font-weight: 500;
|
|
180
|
+
font-stretch: 100%;
|
|
181
|
+
font-display: swap;
|
|
182
|
+
src: url("../roboto-flex-vietnamese.woff2") format("woff2");
|
|
183
|
+
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;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
/* latin-ext */
|
|
187
|
+
@font-face {
|
|
188
|
+
font-family: "Roboto Flex";
|
|
189
|
+
font-style: normal;
|
|
190
|
+
font-weight: 500;
|
|
191
|
+
font-stretch: 100%;
|
|
192
|
+
font-display: swap;
|
|
193
|
+
src: url("../roboto-flex-latin-ext.woff2") format("woff2");
|
|
194
|
+
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;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/* latin */
|
|
198
|
+
@font-face {
|
|
199
|
+
font-family: "Roboto Flex";
|
|
200
|
+
font-style: normal;
|
|
201
|
+
font-weight: 500;
|
|
202
|
+
font-stretch: 100%;
|
|
203
|
+
font-display: swap;
|
|
204
|
+
src: url("../roboto-flex-latin.woff2") format("woff2");
|
|
205
|
+
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;
|
|
206
|
+
}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
:root,
|
|
2
2
|
body.light {
|
|
3
3
|
--primary: #6750A4;
|
|
4
|
-
--on-primary: #
|
|
4
|
+
--on-primary: #FFF;
|
|
5
5
|
--primary-container: #EADDFF;
|
|
6
6
|
--on-primary-container: #21005E;
|
|
7
7
|
--secondary: #625B71;
|
|
8
|
-
--on-secondary: #
|
|
8
|
+
--on-secondary: #FFF;
|
|
9
9
|
--secondary-container: #E8DEF8;
|
|
10
10
|
--on-secondary-container: #1E192B;
|
|
11
11
|
--tertiary: #7D5260;
|
|
12
|
-
--on-tertiary: #
|
|
12
|
+
--on-tertiary: #FFF;
|
|
13
13
|
--tertiary-container: #FFD8E4;
|
|
14
14
|
--on-tertiary-container: #370B1E;
|
|
15
15
|
--error: #B3261E;
|
|
16
|
-
--on-error: #
|
|
16
|
+
--on-error: #FFF;
|
|
17
17
|
--error-container: #F9DEDC;
|
|
18
18
|
--on-error-container: #370B1E;
|
|
19
19
|
--background: #FFFBFE;
|
|
@@ -25,17 +25,16 @@ body.light {
|
|
|
25
25
|
--on-surface-variant: #49454E;
|
|
26
26
|
--inverse-surface: #313033;
|
|
27
27
|
--inverse-on-surface: #F4EFF4;
|
|
28
|
-
|
|
29
|
-
--
|
|
30
|
-
--
|
|
31
|
-
--
|
|
32
|
-
--
|
|
33
|
-
--
|
|
34
|
-
--
|
|
35
|
-
--
|
|
36
|
-
--
|
|
37
|
-
--
|
|
38
|
-
--
|
|
39
|
-
--
|
|
40
|
-
|
|
41
|
-
}
|
|
28
|
+
--body: #FFF;
|
|
29
|
+
--overlay: rgb(0 0 0 / 0.5);
|
|
30
|
+
--active: rgb(0 0 0 / 0.1);
|
|
31
|
+
--elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.14), 0 0.0625rem 0.3125rem 0 rgb(0 0 0 / 0.12), 0 0.1875rem 0.0625rem -0.125rem rgb(0 0 0 / 0.2);
|
|
32
|
+
--elevate2: 0 0.375rem 0.625rem 0 rgb(0 0 0 / 0.14), 0 0.0625rem 1.125rem 0 rgb(0 0 0 / 0.12), 0 0.1875rem 0.3125rem -0.0625rem rgb(0 0 0 / 0.3);
|
|
33
|
+
--elevate3: 0 0.625rem 1rem 0 rgb(0 0 0 / 0.14), 0 0.0625rem 1.9375rem 0 rgb(0 0 0 / 0.12), 0 0.1875rem 0.5625rem 0 rgb(0 0 0 / 0.4);
|
|
34
|
+
--size: 16px;
|
|
35
|
+
--font: "Roboto Flex", "Roboto", sans-serif, system-ui, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial";
|
|
36
|
+
--speed1: 0.1s;
|
|
37
|
+
--speed2: 0.2s;
|
|
38
|
+
--speed3: 0.3s;
|
|
39
|
+
--speed4: 0.4s;
|
|
40
|
+
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&family=Roboto:wght@300;400;500&display=swap");
|