beercss 3.13.2 → 4.0.0

package/src/cdn/settings/fonts.css

@@ -1,35 +1,35 @@
-/* outlined icons */
-@font-face {
-  font-family: "Material Symbols Outlined";
-  font-style: normal;
-  font-weight: 400;
-  font-display: block;
-  src: url(../fonts/material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.13.2/dist/cdn/material-symbols-outlined.woff2) format("woff2");
-}
-
-/* rounded icons */
-@font-face {
-  font-family: "Material Symbols Rounded";
-  font-style: normal;
-  font-weight: 400;
-  font-display: block;
-  src: url(../fonts/material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.13.2/dist/cdn/material-symbols-rounded.woff2) format("woff2");
-}
-
-/* sharp icons */
-@font-face {
-  font-family: "Material Symbols Sharp";
-  font-style: normal;
-  font-weight: 400;
-  font-display: block;
-  src: url(../fonts/material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.13.2/dist/cdn/material-symbols-sharp.woff2) format("woff2");
-}
-
-/* subset of only required icons */
-@font-face {
-  font-family: "Material Symbols Subset";
-  font-style: normal;
-  font-weight: 400;
-  font-display: block;
-  src: url(../fonts/material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.13.2/dist/cdn/material-symbols-subset.woff2) format("woff2");
-}
+/* outlined icons */
+@font-face {
+  font-family: "Material Symbols Outlined";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.0/dist/cdn/material-symbols-outlined.woff2) format("woff2");
+}
+
+/* rounded icons */
+@font-face {
+  font-family: "Material Symbols Rounded";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.0/dist/cdn/material-symbols-rounded.woff2) format("woff2");
+}
+
+/* sharp icons */
+@font-face {
+  font-family: "Material Symbols Sharp";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.0/dist/cdn/material-symbols-sharp.woff2) format("woff2");
+}
+
+/* subset of only required icons */
+@font-face {
+  font-family: "Material Symbols Subset";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.0/dist/cdn/material-symbols-subset.woff2) format("woff2");
+}

package/src/cdn/settings/globals.css

@@ -1,18 +1,55 @@
-:root {
-  --size: 1rem;
-  --font: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", "Noto Sans", Arial, sans-serif;
-  --font-icon: "Material Symbols Outlined";
-  --speed1: 0.1s;
-  --speed2: 0.2s;
-  --speed3: 0.3s;
-  --speed4: 0.4s;
-  --active: rgb(128 128 128 / 0.192);
-  --overlay: rgb(0 0 0 / 0.5);
-  --elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.32);
-  --elevate2: 0 0.25rem 0.5rem 0 rgb(0 0 0 / 0.4);
-  --elevate3: 0 0.375rem 0.75rem 0 rgb(0 0 0 / 0.48);
-  --top: env(safe-area-inset-top);
-  --bottom: env(safe-area-inset-bottom);
-  --left: env(safe-area-inset-left);
-  --right: env(safe-area-inset-right);
-}
+:root {
+  --size: 1rem;
+  --font: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", "Noto Sans", Arial, sans-serif;
+  --font-icon: "Material Symbols Outlined";
+  --speed1: 0.1s;
+  --speed2: 0.2s;
+  --speed3: 0.3s;
+  --speed4: 0.4s;
+  --active: rgb(128 128 128 / 0.192);
+  --overlay: rgb(0 0 0 / 0.5);
+  --elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.32);
+  --elevate2: 0 0.25rem 0.5rem 0 rgb(0 0 0 / 0.4);
+  --elevate3: 0 0.375rem 0.75rem 0 rgb(0 0 0 / 0.48);
+  --top: env(safe-area-inset-top);
+  --bottom: env(safe-area-inset-bottom);
+  --left: env(safe-area-inset-left);
+  --right: env(safe-area-inset-right);
+}
+
+html {
+  font-size: var(--size);
+}
+
+body {
+  color: var(--on-surface);
+  background-color: var(--surface);
+  overflow-x: hidden;
+  font-family: var(--font);
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  letter-spacing: 0.0313rem;
+}
+
+@media (pointer: fine) {
+  body ::-webkit-scrollbar,
+  body ::-webkit-scrollbar-thumb,
+  body ::-webkit-scrollbar-button {
+    background: none;
+    inline-size: 0.4rem;
+    block-size: 0.4rem;
+  }
+
+  body :is(:focus, :hover)::-webkit-scrollbar-thumb,
+  body :has(:focus, :hover)::-webkit-scrollbar-thumb {
+    background: var(--outline);
+    border-radius: 1rem;
+  }
+}
+
+@media (pointer: coarse) {
+  body:has(dialog[open], dialog.active),
+  body:has(input[type=range]:focus) {
+    overflow: hidden;
+  }
+}

package/src/cdn/settings/light.css

@@ -1,39 +1,39 @@
-:root,
-body.light {
-  --primary: #6750a4;
-  --on-primary: #ffffff;
-  --primary-container: #e9ddff;
-  --on-primary-container: #22005d;
-  --secondary: #625b71;
-  --on-secondary: #ffffff;
-  --secondary-container: #e8def8;
-  --on-secondary-container: #1e192b;
-  --tertiary: #7e5260;
-  --on-tertiary: #ffffff;
-  --tertiary-container: #ffd9e3;
-  --on-tertiary-container: #31101d;
-  --error: #ba1a1a;
-  --on-error: #ffffff;
-  --error-container: #ffdad6;
-  --on-error-container: #410002;
-  --background: #fffbff;
-  --on-background: #1c1b1e;
-  --surface: #fdf8fd;
-  --on-surface: #1c1b1e;
-  --surface-variant: #e7e0eb;
-  --on-surface-variant: #49454e;
-  --outline: #7a757f;
-  --outline-variant: #cac4cf;
-  --shadow: #000000;
-  --scrim: #000000;
-  --inverse-surface: #313033;
-  --inverse-on-surface: #f4eff4;
-  --inverse-primary: #cfbcff;
-  --surface-dim: #ddd8dd;
-  --surface-bright: #fdf8fd;
-  --surface-container-lowest: #ffffff;
-  --surface-container-low: #f7f2f7;
-  --surface-container: #f2ecf1;
-  --surface-container-high: #ece7eb;
-  --surface-container-highest: #e6e1e6;
-}
+:root,
+body.light {
+  --primary: #6750a4;
+  --on-primary: #ffffff;
+  --primary-container: #e9ddff;
+  --on-primary-container: #22005d;
+  --secondary: #625b71;
+  --on-secondary: #ffffff;
+  --secondary-container: #e8def8;
+  --on-secondary-container: #1e192b;
+  --tertiary: #7e5260;
+  --on-tertiary: #ffffff;
+  --tertiary-container: #ffd9e3;
+  --on-tertiary-container: #31101d;
+  --error: #ba1a1a;
+  --on-error: #ffffff;
+  --error-container: #ffdad6;
+  --on-error-container: #410002;
+  --background: #fffbff;
+  --on-background: #1c1b1e;
+  --surface: #fdf8fd;
+  --on-surface: #1c1b1e;
+  --surface-variant: #e7e0eb;
+  --on-surface-variant: #49454e;
+  --outline: #7a757f;
+  --outline-variant: #cac4cf;
+  --shadow: #000000;
+  --scrim: #000000;
+  --inverse-surface: #313033;
+  --inverse-on-surface: #f4eff4;
+  --inverse-primary: #cfbcff;
+  --surface-dim: #ddd8dd;
+  --surface-bright: #fdf8fd;
+  --surface-container-lowest: #ffffff;
+  --surface-container-low: #f7f2f7;
+  --surface-container: #f2ecf1;
+  --surface-container-high: #ece7eb;
+  --surface-container-highest: #e6e1e6;
+}

package/src/cdn/{helpers → settings}/reset.css

@@ -1,95 +1,77 @@
-* {
-  -webkit-tap-highlight-color: transparent;
-  position: relative;
-  vertical-align: middle;
-  color: inherit;
-  margin: 0;
-  padding: 0;
-  border-radius: inherit;
-  box-sizing: border-box;
-}
-
-*::after,
-*::before {
-  all: unset;
-}
-
-body {
-  color: var(--on-surface);
-  background-color: var(--surface);
-  overflow-x: hidden;
-}
-
-label {
-  font-size: 0.75rem;
-  vertical-align: baseline;
-}
-
-a,
-b,
-i,
-span,
-strong,
-em,
-code {
-  vertical-align: baseline;
-}
-
-a,
-button,
-.button {
-  cursor: pointer;
-  text-decoration: none;
-  display: inline-flex;
-  align-items: center;
-  border: none;
-  font-family: inherit;
-  outline: inherit;
-  justify-content: center;
-}
-
-:is(nav, .tabs, .field) > a,
-button,
-.button,
-.chip,
-i,
-label {
-  user-select: none;
-}
-
-@media (pointer: fine) {
-  body ::-webkit-scrollbar,
-  body ::-webkit-scrollbar-thumb,
-  body ::-webkit-scrollbar-button {
-    background: none;
-    inline-size: 0.4rem;
-    block-size: 0.4rem;
-  }
-
-  body :is(:focus, :hover)::-webkit-scrollbar-thumb,
-  body :has(:focus, :hover)::-webkit-scrollbar-thumb {
-    background: var(--outline);
-    border-radius: 1rem;
-  }
-}
-
-:not(.grid, nav, .row) > :not(progress.max) + :is(address, article, blockquote, code, .field, fieldset, form, .grid, h1, h2, h3, h4, h5, h6, nav, ol, p, pre, .row, section, aside, table, .tabs, ul):not([class*='margin'], .right, .left, .top, .bottom) {
-  margin-block-start: 1rem;
-}
-
-:has(> [class*='margin']) {
-  padding: 0.1px;
-}
-
-:is(a, button, .button, .chip):focus-visible {
-  outline: 0.125rem solid var(--primary);
-  outline-offset: 0.25rem;
-}
-
-:is(nav, .row, li).group > :focus-visible {
-  z-index: 1;
-}
-
-:is(button, .button, .chip) > :is(span, i, img, svg) {
-  pointer-events: none;
+* {
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+  vertical-align: middle;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+  border-radius: inherit;
+  box-sizing: border-box;
+}
+
+*::after,
+*::before {
+  all: unset;
+}
+
+label {
+  font-size: 0.75rem;
+  vertical-align: baseline;
+}
+
+a,
+b,
+i,
+span,
+strong,
+em,
+code {
+  vertical-align: baseline;
+}
+
+a,
+button,
+.button {
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  border: none;
+  font-family: inherit;
+  outline: inherit;
+  justify-content: center;
+}
+
+:is(nav, .tabs, .field) > a,
+button,
+.button,
+.chip,
+i,
+label {
+  user-select: none;
+}
+
+:not(.grid, nav, .row) > :not(progress.max) + :is(address, article, blockquote, code, .field, fieldset, form, .grid, h1, h2, h3, h4, h5, h6, nav, ol, p, pre, .row, section, aside, table, .tabs, ul):not([class*='margin'], .right, .left, .top, .bottom) {
+  margin-block-start: 1rem;
+}
+
+:has(> [class*='margin']) {
+  padding: 0.1px;
+}
+
+:is(a, button, .button, .chip, summary):focus-visible {
+  outline: 0.125rem solid var(--primary);
+  outline-offset: 0.25rem;
+}
+
+:is(nav, .row, li).group > :focus-visible {
+  z-index: 1;
+}
+
+:is(button, .button, .chip) > :is(span, i, img, svg) {
+  pointer-events: none;
+}
+
+div:is(:not([class]), [class=active]):has(> :not(.responsive) ~ :is(menu, .tooltip, input)) {
+  display: inline-flex;
 }