beercss 3.13.2 → 3.13.3

package/src/cdn/helpers/theme.css

@@ -1,186 +1,186 @@
-.transparent {
-  background-color: transparent !important;
-  box-shadow: none !important;
-  color: inherit !important;
-}
-
-.primary {
-  background-color: var(--primary) !important;
-  color: var(--on-primary) !important;
-}
-
-.primary-text {
-  color: var(--primary) !important;
-}
-
-.primary-border {
-  border-color: var(--primary) !important;
-}
-
-.primary-container {
-  background-color: var(--primary-container) !important;
-  color: var(--on-primary-container) !important;
-}
-
-.secondary {
-  background-color: var(--secondary) !important;
-  color: var(--on-secondary) !important;
-}
-
-.secondary-text {
-  color: var(--secondary) !important;
-}
-
-.secondary-border {
-  border-color: var(--secondary) !important;
-}
-
-.secondary-container {
-  background-color: var(--secondary-container) !important;
-  color: var(--on-secondary-container) !important;
-}
-
-.tertiary {
-  background-color: var(--tertiary) !important;
-  color: var(--on-tertiary) !important;
-}
-
-.tertiary-text {
-  color: var(--tertiary) !important;
-}
-
-.tertiary-border {
-  border-color: var(--tertiary) !important;
-}
-
-.tertiary-container {
-  background-color: var(--tertiary-container) !important;
-  color: var(--on-tertiary-container) !important;
-}
-
-.error {
-  background-color: var(--error) !important;
-  color: var(--on-error) !important;
-}
-
-.error-text {
-  color: var(--error) !important;
-}
-
-.error-border {
-  border-color: var(--error) !important;
-}
-
-.error-container {
-  background-color: var(--error-container) !important;
-  color: var(--on-error-container) !important;
-}
-
-.background {
-  background-color: var(--background) !important;
-  color: var(--on-background) !important;
-}
-
-.surface,
-.surface-dim,
-.surface-bright,
-.surface-container-lowest,
-.surface-container-low,
-.surface-container,
-.surface-container-high,
-.surface-container-highest {
-  background-color: var(--surface) !important;
-  color: var(--on-surface) !important;
-}
-
-.surface-variant {
-  background-color: var(--surface-variant) !important;
-  color: var(--on-surface-variant) !important;
-}
-
-.inverse-surface {
-  background-color: var(--inverse-surface);
-  color: var(--inverse-on-surface);
-}
-
-.inverse-primary {
-  background-color: var(--inverse-primary);
-  color: var(--primary);
-}
-
-.inverse-primary-text {
-  color: var(--inverse-primary) !important;
-}
-
-.inverse-primary-border {
-  border-color: var(--inverse-primary) !important;
-}
-
-.surface-dim {
-  background-color: var(--surface-dim) !important;
-}
-
-.surface-bright {
-  background-color: var(--surface-bright) !important;
-}
-
-.surface-container-lowest {
-  background-color: var(--surface-container-lowest) !important;
-}
-
-.surface-container-low {
-  background-color: var(--surface-container-low) !important;
-}
-
-.surface-container {
-  background-color: var(--surface-container) !important;
-}
-
-.surface-container-high {
-  background-color: var(--surface-container-high) !important;
-}
-
-.surface-container-highest {
-  background-color: var(--surface-container-highest) !important;
-}
-
-.surface-container-low {
-  background-color: var(--surface-container-low) !important;
-}
-
-.black {
-  background-color: #000 !important;
-}
-
-.black-border {
-  border-color: #000 !important;
-}
-
-.black-text {
-  color: #000 !important;
-}
-
-.white {
-  background-color: #FFF !important;
-}
-
-.white-border {
-  border-color: #FFF !important;
-}
-
-.white-text {
-  color: #FFF !important;
-}
-
-.transparent-border {
-  border-color: transparent !important;
-}
-
-.transparent-text {
-  color: transparent !important;
-}
-
-.fill:not(i) {
-  background-color: var(--surface-variant) !important;
-  color: var(--on-surface-variant) !important;
-}
+.transparent {
+  background-color: transparent !important;
+  box-shadow: none !important;
+  color: inherit !important;
+}
+
+.primary {
+  background-color: var(--primary) !important;
+  color: var(--on-primary) !important;
+}
+
+.primary-text {
+  color: var(--primary) !important;
+}
+
+.primary-border {
+  border-color: var(--primary) !important;
+}
+
+.primary-container {
+  background-color: var(--primary-container) !important;
+  color: var(--on-primary-container) !important;
+}
+
+.secondary {
+  background-color: var(--secondary) !important;
+  color: var(--on-secondary) !important;
+}
+
+.secondary-text {
+  color: var(--secondary) !important;
+}
+
+.secondary-border {
+  border-color: var(--secondary) !important;
+}
+
+.secondary-container {
+  background-color: var(--secondary-container) !important;
+  color: var(--on-secondary-container) !important;
+}
+
+.tertiary {
+  background-color: var(--tertiary) !important;
+  color: var(--on-tertiary) !important;
+}
+
+.tertiary-text {
+  color: var(--tertiary) !important;
+}
+
+.tertiary-border {
+  border-color: var(--tertiary) !important;
+}
+
+.tertiary-container {
+  background-color: var(--tertiary-container) !important;
+  color: var(--on-tertiary-container) !important;
+}
+
+.error {
+  background-color: var(--error) !important;
+  color: var(--on-error) !important;
+}
+
+.error-text {
+  color: var(--error) !important;
+}
+
+.error-border {
+  border-color: var(--error) !important;
+}
+
+.error-container {
+  background-color: var(--error-container) !important;
+  color: var(--on-error-container) !important;
+}
+
+.background {
+  background-color: var(--background) !important;
+  color: var(--on-background) !important;
+}
+
+.surface,
+.surface-dim,
+.surface-bright,
+.surface-container-lowest,
+.surface-container-low,
+.surface-container,
+.surface-container-high,
+.surface-container-highest {
+  background-color: var(--surface) !important;
+  color: var(--on-surface) !important;
+}
+
+.surface-variant {
+  background-color: var(--surface-variant) !important;
+  color: var(--on-surface-variant) !important;
+}
+
+.inverse-surface {
+  background-color: var(--inverse-surface);
+  color: var(--inverse-on-surface);
+}
+
+.inverse-primary {
+  background-color: var(--inverse-primary);
+  color: var(--primary);
+}
+
+.inverse-primary-text {
+  color: var(--inverse-primary) !important;
+}
+
+.inverse-primary-border {
+  border-color: var(--inverse-primary) !important;
+}
+
+.surface-dim {
+  background-color: var(--surface-dim) !important;
+}
+
+.surface-bright {
+  background-color: var(--surface-bright) !important;
+}
+
+.surface-container-lowest {
+  background-color: var(--surface-container-lowest) !important;
+}
+
+.surface-container-low {
+  background-color: var(--surface-container-low) !important;
+}
+
+.surface-container {
+  background-color: var(--surface-container) !important;
+}
+
+.surface-container-high {
+  background-color: var(--surface-container-high) !important;
+}
+
+.surface-container-highest {
+  background-color: var(--surface-container-highest) !important;
+}
+
+.surface-container-low {
+  background-color: var(--surface-container-low) !important;
+}
+
+.black {
+  background-color: #000 !important;
+}
+
+.black-border {
+  border-color: #000 !important;
+}
+
+.black-text {
+  color: #000 !important;
+}
+
+.white {
+  background-color: #FFF !important;
+}
+
+.white-border {
+  border-color: #FFF !important;
+}
+
+.white-text {
+  color: #FFF !important;
+}
+
+.transparent-border {
+  border-color: transparent !important;
+}
+
+.transparent-text {
+  color: transparent !important;
+}
+
+.fill:not(i) {
+  background-color: var(--surface-variant) !important;
+  color: var(--on-surface-variant) !important;
+}

package/src/cdn/helpers/theme.ts

@@ -1,84 +1,84 @@
-import { type IBeerCssTheme } from "../interfaces";
-import { isDark } from "../utils";
-
-const _lastTheme: IBeerCssTheme = {
-  light: "",
-  dark: "",
-};
-
-function getMode() {
-  return document?.body?.classList.contains("dark") ? "dark" : "light";
-}
-
-function lastTheme(): IBeerCssTheme {
-  if (_lastTheme.light && _lastTheme.dark) return _lastTheme;
-  const body = document.body;
-
-  const light = document.createElement("body");
-  light.className = "light";
-  body.appendChild(light);
-
-  const dark = document.createElement("body");
-  dark.className = "dark";
-  body.appendChild(dark);
-
-  const fromLight = getComputedStyle(light);
-  const fromDark = getComputedStyle(dark);
-  const variables = ["--primary", "--on-primary", "--primary-container", "--on-primary-container", "--secondary", "--on-secondary", "--secondary-container", "--on-secondary-container", "--tertiary", "--on-tertiary", "--tertiary-container", "--on-tertiary-container", "--error", "--on-error", "--error-container", "--on-error-container", "--background", "--on-background", "--surface", "--on-surface", "--surface-variant", "--on-surface-variant", "--outline", "--outline-variant", "--shadow", "--scrim", "--inverse-surface", "--inverse-on-surface", "--inverse-primary", "--surface-dim", "--surface-bright", "--surface-container-lowest", "--surface-container-low", "--surface-container", "--surface-container-high", "--surface-container-highest"];
-  for (let i = 0, n = variables.length; i < n; i++) {
-    _lastTheme.light += variables[i] + ":" + fromLight.getPropertyValue(variables[i]) + ";";
-    _lastTheme.dark += variables[i] + ":" + fromDark.getPropertyValue(variables[i]) + ";";
-  }
-
-  body.removeChild(light);
-  body.removeChild(dark);
-  return _lastTheme;
-}
-
-export function updateTheme(source?: IBeerCssTheme | any): IBeerCssTheme | Promise<IBeerCssTheme> {
-  const context = globalThis as any;
-  const body = document.body;
-  if (!source || !context.materialDynamicColors) return lastTheme();
-
-  const mode = getMode();
-  if (source.light && source.dark) {
-    _lastTheme.light = source.light;
-    _lastTheme.dark = source.dark;
-    body.setAttribute("style", source[mode]);
-    return source;
-  }
-
-  return context.materialDynamicColors(source).then((theme: IBeerCssTheme) => {
-    const toCss = (data: any) => {
-      let style = "";
-      for (let i = 0, keys = Object.keys(data), n = keys.length; i < n; i++) {
-        const key = keys[i];
-        const value = data[key] as string;
-        const kebabCase = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-        style += "--" + kebabCase + ":" + value + ";";
-      }
-      return style;
-    };
-
-    _lastTheme.light = toCss(theme.light);
-    _lastTheme.dark = toCss(theme.dark);
-    body.setAttribute("style", _lastTheme[mode]);
-    return _lastTheme;
-  });
-}
-
-export function updateMode(value: string): string {
-  const context = (globalThis as any);
-  const body = document.body;
-
-  if (!body) return value;
-  if (!value) return getMode();
-  if (value === "auto") value = isDark() ? "dark" : "light";
-  
-  body.classList.remove("light", "dark");
-  body.classList.add(value);
-  
-  const lastThemeStyle = value === "light" ? _lastTheme.light : _lastTheme.dark;
-  if (context.materialDynamicColors) body.setAttribute("style", lastThemeStyle);
-  return getMode();
+import { type IBeerCssTheme } from "../interfaces";
+import { isDark } from "../utils";
+
+const _lastTheme: IBeerCssTheme = {
+  light: "",
+  dark: "",
+};
+
+function getMode() {
+  return document?.body?.classList.contains("dark") ? "dark" : "light";
+}
+
+function lastTheme(): IBeerCssTheme {
+  if (_lastTheme.light && _lastTheme.dark) return _lastTheme;
+  const body = document.body;
+
+  const light = document.createElement("body");
+  light.className = "light";
+  body.appendChild(light);
+
+  const dark = document.createElement("body");
+  dark.className = "dark";
+  body.appendChild(dark);
+
+  const fromLight = getComputedStyle(light);
+  const fromDark = getComputedStyle(dark);
+  const variables = ["--primary", "--on-primary", "--primary-container", "--on-primary-container", "--secondary", "--on-secondary", "--secondary-container", "--on-secondary-container", "--tertiary", "--on-tertiary", "--tertiary-container", "--on-tertiary-container", "--error", "--on-error", "--error-container", "--on-error-container", "--background", "--on-background", "--surface", "--on-surface", "--surface-variant", "--on-surface-variant", "--outline", "--outline-variant", "--shadow", "--scrim", "--inverse-surface", "--inverse-on-surface", "--inverse-primary", "--surface-dim", "--surface-bright", "--surface-container-lowest", "--surface-container-low", "--surface-container", "--surface-container-high", "--surface-container-highest"];
+  for (let i = 0, n = variables.length; i < n; i++) {
+    _lastTheme.light += variables[i] + ":" + fromLight.getPropertyValue(variables[i]) + ";";
+    _lastTheme.dark += variables[i] + ":" + fromDark.getPropertyValue(variables[i]) + ";";
+  }
+
+  body.removeChild(light);
+  body.removeChild(dark);
+  return _lastTheme;
+}
+
+export async function updateTheme(source?: IBeerCssTheme | any): Promise<IBeerCssTheme> {
+  const context = globalThis as any;
+  const body = document.body;
+  if (!source || !context.materialDynamicColors) return lastTheme();
+
+  const mode = getMode();
+  if (source.light && source.dark) {
+    _lastTheme.light = source.light;
+    _lastTheme.dark = source.dark;
+    body.setAttribute("style", source[mode]);
+    return source;
+  }
+
+  return context.materialDynamicColors(source).then((theme: IBeerCssTheme) => {
+    const toCss = (data: any) => {
+      let style = "";
+      for (let i = 0, keys = Object.keys(data), n = keys.length; i < n; i++) {
+        const key = keys[i];
+        const value = data[key] as string;
+        const kebabCase = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+        style += "--" + kebabCase + ":" + value + ";";
+      }
+      return style;
+    };
+
+    _lastTheme.light = toCss(theme.light);
+    _lastTheme.dark = toCss(theme.dark);
+    body.setAttribute("style", _lastTheme[mode]);
+    return _lastTheme;
+  });
+}
+
+export function updateMode(value: string): string {
+  const context = (globalThis as any);
+  const body = document.body;
+
+  if (!body) return value;
+  if (!value) return getMode();
+  if (value === "auto") value = isDark() ? "dark" : "light";
+  
+  body.classList.remove("light", "dark");
+  body.classList.add(value);
+  
+  const lastThemeStyle = value === "light" ? _lastTheme.light : _lastTheme.dark;
+  if (context.materialDynamicColors) body.setAttribute("style", lastThemeStyle);
+  return getMode();
 }