beercss 3.13.2 → 4.0.0

package/src/cdn/helpers/typography.css

@@ -1,226 +1,227 @@
-html {
-  font-size: var(--size);
-}
-
-body {
-  font-family: var(--font);
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-  letter-spacing: 0.0313rem;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-weight: 400;
-  display: block;
-  align-items: center;
-  line-height: normal;
-}
-
-h1 {
-  font-size: 3.5625rem;
-}
-
-h2 {
-  font-size: 2.8125rem;
-}
-
-h3 {
-  font-size: 2.25rem;
-}
-
-h4 {
-  font-size: 2rem;
-}
-
-h5 {
-  font-size: 1.75rem;
-}
-
-h6 {
-  font-size: 1.5rem;
-}
-
-h1.small {
-  font-size: 3.0625rem;
-}
-
-h2.small {
-  font-size: 2.3125rem;
-}
-
-h3.small {
-  font-size: 1.75rem;
-}
-
-h4.small {
-  font-size: 1.5rem;
-}
-
-h5.small {
-  font-size: 1.25rem;
-}
-
-h6.small {
-  font-size: 1rem;
-}
-
-h1.large {
-  font-size: 4.0625rem;
-}
-
-h2.large {
-  font-size: 3.3125rem;
-}
-
-h3.large {
-  font-size: 2.75rem;
-}
-
-h4.large {
-  font-size: 2.5rem;
-}
-
-h5.large {
-  font-size: 2.25rem;
-}
-
-h6.large {
-  font-size: 2rem;
-}
-
-.link {
-  color: var(--primary) !important;
-}
-
-.inverse-link {
-  color: var(--inverse-primary) !important;
-}
-
-.truncate {
-  overflow: hidden;
-  white-space: nowrap !important;
-  text-overflow: ellipsis;
-  flex: inherit;
-}
-
-.truncate > * {
-  white-space: nowrap !important;
-}
-
-.small-text {
-  font-size: 0.75rem;
-}
-
-.medium-text {
-  font-size: 0.875rem;
-}
-
-.large-text {
-  font-size: 1rem;
-}
-
-.upper {
-  text-transform: uppercase;
-}
-
-.lower {
-  text-transform: lowercase;
-}
-
-.capitalize {
-  text-transform: capitalize;
-}
-
-.bold {
-  font-weight: bold;
-}
-
-.overline {
-  text-decoration: line-through;
-}
-
-.underline {
-  text-decoration: underline;
-}
-
-.italic {
-  font-style: italic;
-}
-
-p {
-  margin: 0.5rem 0;
-}
-
-.no-line {
-  line-height: normal;
-}
-
-.tiny-line {
-  line-height: 1.25rem;
-}
-
-.small-line {
-  line-height: 1.5rem;
-}
-
-.medium-line {
-  line-height: 1.75rem;
-}
-
-.large-line {
-  line-height: 2rem;
-}
-
-.extra-line {
-  line-height: 2.25rem;
-}
-
-pre {
-  border-radius: 0;
-  background-color: var(--surface-container);
-  white-space: pre-wrap;
-  padding: 1rem;
-  border-inline-start: 0.25rem solid var(--primary);
-  font-family: inherit;
-}
-
-blockquote {
-  border-radius: 0;
-  padding: 1rem;
-  border-inline-start: 0.25rem solid var(--primary);
-  font-family: inherit;
-}
-
-code {
-  border-radius: 0;
-  background-color: var(--surface-container);
-  white-space: pre-wrap;
-  padding: 0.25rem;
-}
-
-pre > code,
-blockquote > code {
-  padding: 0;
-}
-
-.scroll > code {
-  white-space: pre;
-}
-
-pre:has(> code){
-  direction: ltr;
-  text-align: start;
-}
-
-sub {
-  vertical-align: sub;
-}
-
-sup {
-  vertical-align: super;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  font-weight: 400;
+  display: block;
+  align-items: center;
+  line-height: normal;
+}
+
+h1,
+.h1 {
+  font-size: 3.5625rem;
+}
+
+h2,
+.h2 {
+  font-size: 2.8125rem;
+}
+
+h3,
+.h3 {
+  font-size: 2.25rem;
+}
+
+h4,
+.h4 {
+  font-size: 2rem;
+}
+
+h5,
+.h5 {
+  font-size: 1.75rem;
+}
+
+h6,
+.h6 {
+  font-size: 1.5rem;
+}
+
+:is(h1, .h1).small {
+  font-size: 3.0625rem;
+}
+
+:is(h2, .h2).small {
+  font-size: 2.3125rem;
+}
+
+:is(h3, .h3).small {
+  font-size: 1.75rem;
+}
+
+:is(h4, .h4).small {
+  font-size: 1.5rem;
+}
+
+:is(h5, .h5).small {
+  font-size: 1.25rem;
+}
+
+:is(h6, .h6).small {
+  font-size: 1rem;
+}
+
+:is(h1, .h1).large {
+  font-size: 4.0625rem;
+}
+
+:is(h2, .h2).large {
+  font-size: 3.3125rem;
+}
+
+:is(h3, .h3).large {
+  font-size: 2.75rem;
+}
+
+:is(h4, .h4).large {
+  font-size: 2.5rem;
+}
+
+:is(h5, .h5).large {
+  font-size: 2.25rem;
+}
+
+:is(h6, .h6).large {
+  font-size: 2rem;
+}
+
+.link {
+  color: var(--primary) !important;
+}
+
+.inverse-link {
+  color: var(--inverse-primary) !important;
+}
+
+.truncate {
+  overflow: hidden;
+  white-space: nowrap !important;
+  text-overflow: ellipsis;
+  flex: inherit;
+}
+
+.truncate > * {
+  white-space: nowrap !important;
+}
+
+.small-text {
+  font-size: 0.75rem;
+}
+
+.medium-text {
+  font-size: 0.875rem;
+}
+
+.large-text {
+  font-size: 1rem;
+}
+
+.upper {
+  text-transform: uppercase;
+}
+
+.lower {
+  text-transform: lowercase;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.overline {
+  text-decoration: line-through;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.italic {
+  font-style: italic;
+}
+
+p {
+  margin: 0.5rem 0;
+}
+
+.no-line {
+  line-height: normal;
+}
+
+.tiny-line {
+  line-height: 1.25rem;
+}
+
+.small-line {
+  line-height: 1.5rem;
+}
+
+.medium-line {
+  line-height: 1.75rem;
+}
+
+.large-line {
+  line-height: 2rem;
+}
+
+.extra-line {
+  line-height: 2.25rem;
+}
+
+pre {
+  border-radius: 0;
+  background-color: var(--surface-container);
+  white-space: pre-wrap;
+  padding: 1rem;
+  border-inline-start: 0.25rem solid var(--primary);
+  font-family: inherit;
+}
+
+blockquote {
+  border-radius: 0;
+  padding: 1rem;
+  border-inline-start: 0.25rem solid var(--primary);
+  font-family: inherit;
+}
+
+code {
+  border-radius: 0;
+  background-color: var(--surface-container);
+  white-space: pre-wrap;
+  padding: 0.25rem;
+}
+
+pre > code,
+blockquote > code {
+  padding: 0;
+}
+
+.scroll > code {
+  white-space: pre;
+}
+
+pre:has(> code){
+  direction: ltr;
+  text-align: start;
+}
+
+sub {
+  vertical-align: sub;
+}
+
+sup {
+  vertical-align: super;
 }

package/src/cdn/helpers/waves.css

@@ -1,43 +1,43 @@
-:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, nav.toolbar > a):not(.slow-ripple, .ripple, .fast-ripple)::after,
-nav:is(.left, .right, .bottom, .top).max > a::after,
-nav:is(.left, .right, .bottom, .top).max > :is(ol, ul) > li > a::after,
-nav:is(.left, .right, .bottom, .top):not(.max) > a > i::after,
-nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a > i::after  {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  border-radius: inherit;
-  inline-size: 100%;
-  block-size: 100%;
-  background-position: center;
-  background-image: radial-gradient(circle, currentColor 1%, transparent 1%);
-  opacity: 0;
-  transition: none;
-  pointer-events: none;
-}
-
-:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, nav.toolbar > a):not(.slow-ripple, .ripple, .fast-ripple):is(:focus-visible, :hover)::after,
-nav:is(.left, .right, .bottom, .top).max > a:not(.button, .chip):is(:focus-visible, :hover)::after,
-nav:is(.left, .right, .bottom, .top).max > :is(ol, ul) > li > a:not(.button, .chip):is(:focus-visible, :hover)::after,
-nav:is(.left, .right, .bottom, .top):not(.max) > a:not(.button, .chip):is(:focus-visible, :hover) > i::after,
-nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a:not(.button, .chip):is(:focus-visible, :hover) > i::after {
-  background-size: 22500%;
-  opacity: 0.1;
-  transition: background-size var(--speed2) linear;
-}
-
-:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, nav.toolbar > a, nav.max > a):not(.slow-ripple, .ripple, .fast-ripple):active::after,
-nav:is(.left, .right, .bottom, .top).max > a:active::after,
-nav:is(.left, .right, .bottom, .top).max > :is(ol, ul) > li > a:active::after,
-nav:is(.left, .right, .bottom, .top):not(.max) > a:active > i::after,
-nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a:active > i::after {
-  background-size: 0%;
-  opacity: 0;
-  transition: none;
-}
-
-.no-wave::after,
-.no-wave:is(:hover, :active)::after {
-  display: none;
-}
+:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, nav.toolbar > a):not(.slow-ripple, .ripple, .fast-ripple)::after,
+nav:is(.left, .right, .bottom, .top).max > a::after,
+nav:is(.left, .right, .bottom, .top).max > :is(ol, ul) > li > a::after,
+nav:is(.left, .right, .bottom, .top):not(.max) > a > i::after,
+nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a > i::after  {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  border-radius: inherit;
+  inline-size: 100%;
+  block-size: 100%;
+  background-position: center;
+  background-image: radial-gradient(circle, currentColor 1%, transparent 1%);
+  opacity: 0;
+  transition: none;
+  pointer-events: none;
+}
+
+:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, nav.toolbar > a):not(.slow-ripple, .ripple, .fast-ripple):is(:focus-visible, :hover)::after,
+nav:is(.left, .right, .bottom, .top).max > a:not(.button, .chip):is(:focus-visible, :hover)::after,
+nav:is(.left, .right, .bottom, .top).max > :is(ol, ul) > li > a:not(.button, .chip):is(:focus-visible, :hover)::after,
+nav:is(.left, .right, .bottom, .top):not(.max) > a:not(.button, .chip):is(:focus-visible, :hover) > i::after,
+nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a:not(.button, .chip):is(:focus-visible, :hover) > i::after {
+  background-size: 22500%;
+  opacity: 0.1;
+  transition: background-size var(--speed2) linear;
+}
+
+:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, nav.toolbar > a, nav.max > a):not(.slow-ripple, .ripple, .fast-ripple):active::after,
+nav:is(.left, .right, .bottom, .top).max > a:active::after,
+nav:is(.left, .right, .bottom, .top).max > :is(ol, ul) > li > a:active::after,
+nav:is(.left, .right, .bottom, .top):not(.max) > a:active > i::after,
+nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a:active > i::after {
+  background-size: 0%;
+  opacity: 0;
+  transition: none;
+}
+
+.no-wave::after,
+.no-wave:is(:hover, :active)::after {
+  display: none;
+}

package/src/cdn/helpers/zoom.css

@@ -1,20 +1,20 @@
-.zoom,
-.tiny-zoom {
-  zoom: 2;
-}
-
-.small-zoom {
-  zoom: 3;
-}
-
-.medium-zoom {
-  zoom: 4;
-}
-
-.large-zoom {
-  zoom: 5;
-}
-
-.extra-zoom {
-  zoom: 6;
+.zoom,
+.tiny-zoom {
+  zoom: 2;
+}
+
+.small-zoom {
+  zoom: 3;
+}
+
+.medium-zoom {
+  zoom: 4;
+}
+
+.large-zoom {
+  zoom: 5;
+}
+
+.extra-zoom {
+  zoom: 6;
 }

package/src/cdn/interfaces.ts

@@ -1,4 +1,4 @@
-export interface IBeerCssTheme {
-  dark: string,
-  light: string,
+export interface IBeerCssTheme {
+  dark: string,
+  light: string,
 }

package/src/cdn/settings/dark.css

@@ -1,38 +1,38 @@
-body.dark {
-  --primary: #cfbcff;
-  --on-primary: #381e72;
-  --primary-container: #4f378a;
-  --on-primary-container: #e9ddff;
-  --secondary: #cbc2db;
-  --on-secondary: #332d41;
-  --secondary-container: #4a4458;
-  --on-secondary-container: #e8def8;
-  --tertiary: #efb8c8;
-  --on-tertiary: #4a2532;
-  --tertiary-container: #633b48;
-  --on-tertiary-container: #ffd9e3;
-  --error: #ffb4ab;
-  --on-error: #690005;
-  --error-container: #93000a;
-  --on-error-container: #ffb4ab;
-  --background: #1c1b1e;
-  --on-background: #e6e1e6;
-  --surface: #141316;
-  --on-surface: #e6e1e6;
-  --surface-variant: #49454e;
-  --on-surface-variant: #cac4cf;
-  --outline: #948f99;
-  --outline-variant: #49454e;
-  --shadow: #000000;
-  --scrim: #000000;
-  --inverse-surface: #e6e1e6;
-  --inverse-on-surface: #313033;
-  --inverse-primary: #6750a4;
-  --surface-dim: #141316;
-  --surface-bright: #3a383c;
-  --surface-container-lowest: #0f0e11;
-  --surface-container-low: #1c1b1e;
-  --surface-container: #201f22;
-  --surface-container-high: #2b292d;
-  --surface-container-highest: #363438;
-}
+body.dark {
+  --primary: #cfbcff;
+  --on-primary: #381e72;
+  --primary-container: #4f378a;
+  --on-primary-container: #e9ddff;
+  --secondary: #cbc2db;
+  --on-secondary: #332d41;
+  --secondary-container: #4a4458;
+  --on-secondary-container: #e8def8;
+  --tertiary: #efb8c8;
+  --on-tertiary: #4a2532;
+  --tertiary-container: #633b48;
+  --on-tertiary-container: #ffd9e3;
+  --error: #ffb4ab;
+  --on-error: #690005;
+  --error-container: #93000a;
+  --on-error-container: #ffb4ab;
+  --background: #1c1b1e;
+  --on-background: #e6e1e6;
+  --surface: #141316;
+  --on-surface: #e6e1e6;
+  --surface-variant: #49454e;
+  --on-surface-variant: #cac4cf;
+  --outline: #948f99;
+  --outline-variant: #49454e;
+  --shadow: #000000;
+  --scrim: #000000;
+  --inverse-surface: #e6e1e6;
+  --inverse-on-surface: #313033;
+  --inverse-primary: #6750a4;
+  --surface-dim: #141316;
+  --surface-bright: #3a383c;
+  --surface-container-lowest: #0f0e11;
+  --surface-container-low: #1c1b1e;
+  --surface-container: #201f22;
+  --surface-container-high: #2b292d;
+  --surface-container-highest: #363438;
+}