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.
Files changed (67) hide show
  1. package/README.md +45 -35
  2. package/dist/cdn/beer.min.css +1 -1
  3. package/dist/cdn/beer.min.js +1 -1
  4. package/dist/cdn/material-symbols-outlined.woff2 +0 -0
  5. package/dist/cdn/roboto-flex-cyrillic-ext.woff2 +0 -0
  6. package/dist/cdn/roboto-flex-cyrillic.woff2 +0 -0
  7. package/dist/cdn/roboto-flex-greek.woff2 +0 -0
  8. package/dist/cdn/roboto-flex-latin-ext.woff2 +0 -0
  9. package/dist/cdn/roboto-flex-latin.woff2 +0 -0
  10. package/dist/cdn/roboto-flex-vietnamese.woff2 +0 -0
  11. package/index.js +10 -2
  12. package/package.json +17 -2
  13. package/src/cdn/beer.css +3 -2
  14. package/src/cdn/beer.ts +164 -166
  15. package/src/cdn/elements/badges.css +7 -7
  16. package/src/cdn/elements/buttons.css +24 -24
  17. package/src/cdn/elements/cards.css +7 -7
  18. package/src/cdn/elements/chips.css +14 -14
  19. package/src/cdn/elements/containers.css +30 -21
  20. package/src/cdn/elements/dropdowns.css +5 -5
  21. package/src/cdn/elements/expansions.css +9 -5
  22. package/src/cdn/elements/fields.css +70 -70
  23. package/src/cdn/elements/grids.css +31 -30
  24. package/src/cdn/elements/icons.css +18 -18
  25. package/src/cdn/elements/layouts.css +17 -17
  26. package/src/cdn/elements/loaders.css +45 -35
  27. package/src/cdn/elements/media.css +37 -37
  28. package/src/cdn/elements/modals.css +17 -17
  29. package/src/cdn/elements/navigations.css +33 -32
  30. package/src/cdn/elements/overlays.css +1 -1
  31. package/src/cdn/elements/pages.css +12 -9
  32. package/src/cdn/elements/progress.css +2 -2
  33. package/src/cdn/elements/selections.css +31 -30
  34. package/src/cdn/elements/tables.css +14 -14
  35. package/src/cdn/elements/tabs.css +21 -16
  36. package/src/cdn/elements/toasts.css +12 -12
  37. package/src/cdn/elements/tooltips.css +10 -10
  38. package/src/cdn/helpers/alignments.css +1 -1
  39. package/src/cdn/helpers/colors.css +215 -215
  40. package/src/cdn/helpers/directions.css +30 -0
  41. package/src/cdn/helpers/dividers.css +5 -5
  42. package/src/cdn/helpers/elevates.css +1 -1
  43. package/src/cdn/helpers/forms.css +21 -21
  44. package/src/cdn/helpers/margins.css +5 -5
  45. package/src/cdn/helpers/opacities.css +1 -1
  46. package/src/cdn/helpers/paddings.css +5 -5
  47. package/src/cdn/helpers/positions.css +1 -1
  48. package/src/cdn/helpers/reset.css +2 -2
  49. package/src/cdn/helpers/responsive.css +2 -1
  50. package/src/cdn/helpers/scrolls.css +1 -2
  51. package/src/cdn/helpers/shadows.css +1 -1
  52. package/src/cdn/helpers/sizes.css +7 -7
  53. package/src/cdn/helpers/spaces.css +5 -5
  54. package/src/cdn/helpers/theme.css +38 -38
  55. package/src/cdn/helpers/typography.css +63 -14
  56. package/src/cdn/helpers/waves.css +10 -10
  57. package/src/cdn/material-symbols-outlined.woff2 +0 -0
  58. package/src/cdn/roboto-flex-cyrillic-ext.woff2 +0 -0
  59. package/src/cdn/roboto-flex-cyrillic.woff2 +0 -0
  60. package/src/cdn/roboto-flex-greek.woff2 +0 -0
  61. package/src/cdn/roboto-flex-latin-ext.woff2 +0 -0
  62. package/src/cdn/roboto-flex-latin.woff2 +0 -0
  63. package/src/cdn/roboto-flex-vietnamese.woff2 +0 -0
  64. package/src/cdn/settings/dark.css +13 -14
  65. package/src/cdn/settings/fonts.css +206 -0
  66. package/src/cdn/settings/light.css +17 -18
  67. package/src/cdn/settings/urls.css +0 -1
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
- --body: #000000;
29
- --overlay: rgba(0,0,0,.5);
30
- --active: rgba(255,255,255,.2);
31
- --elevate1: 0 2rem 2rem 0 rgba(0, 0, 0, .14), 0 1rem 5rem 0 rgba(0, 0, 0, .12), 0 3rem 1rem -2rem rgba(0, 0, 0, .2);
32
- --elevate2: 0 6rem 10rem 0 rgba(0, 0, 0, .14), 0 1rem 18rem 0 rgba(0, 0, 0, .12), 0 3rem 5rem -1rem rgba(0, 0, 0, .3);
33
- --elevate3: 0 10rem 16rem 0 rgba(0, 0, 0, .14), 0 1rem 31rem 0 rgba(0, 0, 0, .12), 0 3rem 9rem 0rem rgba(0, 0, 0, .4);
34
- --size: 1px;
35
- --font: "Roboto", BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
36
- --speed1: .1s;
37
- --speed2: .2s;
38
- --speed3: .3s;
39
- --speed4: .4s;
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: #FFFFFF;
4
+ --on-primary: #FFF;
5
5
  --primary-container: #EADDFF;
6
6
  --on-primary-container: #21005E;
7
7
  --secondary: #625B71;
8
- --on-secondary: #FFFFFF;
8
+ --on-secondary: #FFF;
9
9
  --secondary-container: #E8DEF8;
10
10
  --on-secondary-container: #1E192B;
11
11
  --tertiary: #7D5260;
12
- --on-tertiary: #FFFFFF;
12
+ --on-tertiary: #FFF;
13
13
  --tertiary-container: #FFD8E4;
14
14
  --on-tertiary-container: #370B1E;
15
15
  --error: #B3261E;
16
- --on-error: #FFFFFF;
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
- --body: #ffffff;
30
- --overlay: rgba(0,0,0,.5);
31
- --active: rgba(0,0,0,.1);
32
- --elevate1: 0 2rem 2rem 0 rgba(0, 0, 0, .14), 0 1rem 5rem 0 rgba(0, 0, 0, .12), 0 3rem 1rem -2rem rgba(0, 0, 0, .2);
33
- --elevate2: 0 6rem 10rem 0 rgba(0, 0, 0, .14), 0 1rem 18rem 0 rgba(0, 0, 0, .12), 0 3rem 5rem -1rem rgba(0, 0, 0, .3);
34
- --elevate3: 0 10rem 16rem 0 rgba(0, 0, 0, .14), 0 1rem 31rem 0 rgba(0, 0, 0, .12), 0 3rem 9rem 0rem rgba(0, 0, 0, .4);
35
- --size: 1px;
36
- --font: "Roboto", BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
37
- --speed1: .1s;
38
- --speed2: .2s;
39
- --speed3: .3s;
40
- --speed4: .4s;
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");