@duskmoon-dev/core 1.4.0 → 1.6.0

package/dist/cjs/tailwind-plugin.cjs

@@ -0,0 +1,162 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// src/tailwind-plugin.ts
+var exports_tailwind_plugin = {};
+__export(exports_tailwind_plugin, {
+  duskmoonPlugin: () => duskmoonPlugin,
+  default: () => tailwind_plugin_default
+});
+module.exports = __toCommonJS(exports_tailwind_plugin);
+var import_plugin = __toESM(require("tailwindcss/plugin"));
+var themeColors = {
+  primary: "var(--color-primary)",
+  "on-primary": "var(--color-on-primary)",
+  "primary-container": "var(--color-primary-container)",
+  "on-primary-container": "var(--color-on-primary-container)",
+  secondary: "var(--color-secondary)",
+  "on-secondary": "var(--color-on-secondary)",
+  "secondary-container": "var(--color-secondary-container)",
+  "on-secondary-container": "var(--color-on-secondary-container)",
+  tertiary: "var(--color-tertiary)",
+  "on-tertiary": "var(--color-on-tertiary)",
+  "tertiary-container": "var(--color-tertiary-container)",
+  "on-tertiary-container": "var(--color-on-tertiary-container)",
+  error: "var(--color-error)",
+  "on-error": "var(--color-on-error)",
+  "error-container": "var(--color-error-container)",
+  "on-error-container": "var(--color-on-error-container)",
+  surface: "var(--color-surface)",
+  "on-surface": "var(--color-on-surface)",
+  "surface-variant": "var(--color-surface-variant)",
+  "on-surface-variant": "var(--color-on-surface-variant)",
+  "surface-container": "var(--color-surface-container)",
+  "surface-container-low": "var(--color-surface-container-low)",
+  "surface-container-lowest": "var(--color-surface-container-lowest)",
+  "surface-container-high": "var(--color-surface-container-high)",
+  "surface-container-highest": "var(--color-surface-container-highest)",
+  outline: "var(--color-outline)",
+  "outline-variant": "var(--color-outline-variant)",
+  "inverse-surface": "var(--color-inverse-surface)",
+  "inverse-on-surface": "var(--color-inverse-on-surface)",
+  "inverse-primary": "var(--color-inverse-primary)",
+  scrim: "var(--color-scrim)",
+  shadow: "var(--color-shadow)"
+};
+var duskmoonPlugin = import_plugin.default(({ addBase, matchUtilities, theme }) => {
+  addBase({
+    ':root, [data-theme="sunshine"]': {
+      "--color-primary": "oklch(0.55 0.2 260)",
+      "--color-on-primary": "oklch(1 0 0)",
+      "--color-primary-container": "oklch(0.9 0.05 260)",
+      "--color-on-primary-container": "oklch(0.25 0.1 260)",
+      "--color-secondary": "oklch(0.5 0.1 280)",
+      "--color-on-secondary": "oklch(1 0 0)",
+      "--color-secondary-container": "oklch(0.92 0.03 280)",
+      "--color-on-secondary-container": "oklch(0.25 0.05 280)",
+      "--color-tertiary": "oklch(0.55 0.15 30)",
+      "--color-on-tertiary": "oklch(1 0 0)",
+      "--color-tertiary-container": "oklch(0.92 0.04 30)",
+      "--color-on-tertiary-container": "oklch(0.3 0.08 30)",
+      "--color-error": "oklch(0.55 0.2 25)",
+      "--color-on-error": "oklch(1 0 0)",
+      "--color-error-container": "oklch(0.92 0.05 25)",
+      "--color-on-error-container": "oklch(0.3 0.1 25)",
+      "--color-surface": "oklch(0.99 0.005 260)",
+      "--color-on-surface": "oklch(0.2 0.02 260)",
+      "--color-surface-variant": "oklch(0.93 0.01 260)",
+      "--color-on-surface-variant": "oklch(0.45 0.03 260)",
+      "--color-surface-container": "oklch(0.96 0.008 260)",
+      "--color-surface-container-low": "oklch(0.97 0.006 260)",
+      "--color-surface-container-lowest": "oklch(1 0 0)",
+      "--color-surface-container-high": "oklch(0.94 0.01 260)",
+      "--color-surface-container-highest": "oklch(0.92 0.012 260)",
+      "--color-outline": "oklch(0.55 0.02 260)",
+      "--color-outline-variant": "oklch(0.8 0.015 260)",
+      "--color-inverse-surface": "oklch(0.25 0.02 260)",
+      "--color-inverse-on-surface": "oklch(0.95 0.005 260)",
+      "--color-inverse-primary": "oklch(0.8 0.12 260)",
+      "--color-scrim": "oklch(0 0 0)",
+      "--color-shadow": "oklch(0 0 0)"
+    },
+    '[data-theme="moonlight"]': {
+      "--color-primary": "oklch(0.8 0.12 260)",
+      "--color-on-primary": "oklch(0.3 0.15 260)",
+      "--color-primary-container": "oklch(0.35 0.15 260)",
+      "--color-on-primary-container": "oklch(0.9 0.05 260)",
+      "--color-secondary": "oklch(0.8 0.06 280)",
+      "--color-on-secondary": "oklch(0.3 0.08 280)",
+      "--color-secondary-container": "oklch(0.35 0.08 280)",
+      "--color-on-secondary-container": "oklch(0.92 0.03 280)",
+      "--color-tertiary": "oklch(0.8 0.1 30)",
+      "--color-on-tertiary": "oklch(0.35 0.12 30)",
+      "--color-tertiary-container": "oklch(0.4 0.1 30)",
+      "--color-on-tertiary-container": "oklch(0.92 0.04 30)",
+      "--color-error": "oklch(0.85 0.12 25)",
+      "--color-on-error": "oklch(0.35 0.15 25)",
+      "--color-error-container": "oklch(0.4 0.12 25)",
+      "--color-on-error-container": "oklch(0.92 0.05 25)",
+      "--color-surface": "oklch(0.2 0.015 260)",
+      "--color-on-surface": "oklch(0.93 0.01 260)",
+      "--color-surface-variant": "oklch(0.35 0.02 260)",
+      "--color-on-surface-variant": "oklch(0.8 0.02 260)",
+      "--color-surface-container": "oklch(0.22 0.018 260)",
+      "--color-surface-container-low": "oklch(0.18 0.012 260)",
+      "--color-surface-container-lowest": "oklch(0.15 0.01 260)",
+      "--color-surface-container-high": "oklch(0.25 0.02 260)",
+      "--color-surface-container-highest": "oklch(0.28 0.022 260)",
+      "--color-outline": "oklch(0.55 0.025 260)",
+      "--color-outline-variant": "oklch(0.35 0.02 260)",
+      "--color-inverse-surface": "oklch(0.93 0.01 260)",
+      "--color-inverse-on-surface": "oklch(0.25 0.02 260)",
+      "--color-inverse-primary": "oklch(0.55 0.2 260)",
+      "--color-scrim": "oklch(0 0 0)",
+      "--color-shadow": "oklch(0 0 0)"
+    }
+  });
+}, {
+  theme: {
+    extend: {
+      colors: themeColors
+    }
+  }
+});
+var tailwind_plugin_default = duskmoonPlugin;

package/dist/components/appbar.css

@@ -14,6 +14,12 @@
     padding: 0 1rem;
     background-color: var(--color-surface);
     color: var(--color-on-surface);
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  }
+
+  /* Static App Bar (default) */
+  .appbar-static {
+    position: static;
   }
 
   /* Fixed App Bar */
@@ -32,19 +38,47 @@
     z-index: 1000;
   }
 
-  /* App Bar with Shadow */
+  /* Top App Bar (default) */
+  .appbar-top {
+    top: 0;
+  }
+
+  /* Bottom App Bar */
+  .appbar-bottom {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: auto;
+    z-index: 1000;
+  }
+
+  /* App Bar with Shadow (elevated) */
   .appbar-elevated {
     box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   }
 
+  /* Flat App Bar (no shadow) */
+  .appbar-flat {
+    box-shadow: none;
+  }
+
   /* App Bar with Border */
   .appbar-bordered {
     border-bottom: 1px solid var(--color-outline-variant);
+    box-shadow: none;
   }
 
   /* Transparent App Bar */
   .appbar-transparent {
     background-color: transparent;
+    box-shadow: none;
+  }
+
+  /* Backdrop Blur */
+  .appbar-blur {
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
   }
 
   /* App Bar Navigation Icon */
@@ -167,6 +201,114 @@
     font-size: 1.5rem;
   }
 
+  /* Compact Size */
+  .appbar-compact {
+    min-height: 3rem;
+    padding: 0 0.75rem;
+  }
+
+  .appbar-compact .appbar-title,
+  .appbar-compact .appbar-heading {
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+
+  .appbar-compact .appbar-nav,
+  .appbar-compact .appbar-action,
+  .appbar-compact .appbar-back {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  /* Comfortable Size */
+  .appbar-comfortable {
+    min-height: 5rem;
+    padding: 0 1.5rem;
+  }
+
+  .appbar-comfortable .appbar-title,
+  .appbar-comfortable .appbar-heading {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  /* Section Classes */
+  .appbar-leading {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex-shrink: 0;
+  }
+
+  .appbar-trailing {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    flex-shrink: 0;
+    margin-left: auto;
+  }
+
+  /* Heading Text */
+  .appbar-heading {
+    font-size: 1.25rem;
+    font-weight: 500;
+    line-height: 1.75rem;
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Back Button */
+  .appbar-back {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    color: var(--color-on-surface);
+    background-color: transparent;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background-color 150ms ease-in-out;
+    flex-shrink: 0;
+  }
+
+  .appbar-back:hover {
+    background-color: var(--color-surface-container);
+  }
+
+  .appbar-back:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
+  /* Search Input (direct on element) */
+  .appbar .appbar-search,
+  input.appbar-search {
+    flex: 1;
+    max-width: 32rem;
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    color: var(--color-on-surface);
+    background-color: var(--color-surface-container);
+    border: none;
+    border-radius: 9999px;
+    transition: background-color 150ms ease-in-out;
+  }
+
+  .appbar .appbar-search:focus,
+  input.appbar-search:focus {
+    outline: none;
+    background-color: var(--color-surface-container-high);
+  }
+
+  .appbar .appbar-search::placeholder,
+  input.appbar-search::placeholder {
+    color: var(--color-on-surface-variant);
+  }
+
   /* Color Variants */
   .appbar-primary {
     background-color: var(--color-primary);
@@ -205,10 +347,53 @@
     color: var(--color-on-secondary-container);
   }
 
+  .appbar-secondary .appbar-subtitle {
+    color: var(--color-on-secondary);
+    opacity: 0.8;
+  }
+
+  .appbar-tertiary {
+    background-color: var(--color-tertiary);
+    color: var(--color-on-tertiary);
+  }
+
+  .appbar-tertiary .appbar-nav,
+  .appbar-tertiary .appbar-action {
+    color: var(--color-on-tertiary);
+  }
+
+  .appbar-tertiary .appbar-nav:hover,
+  .appbar-tertiary .appbar-action:hover {
+    background-color: var(--color-tertiary-container);
+    color: var(--color-on-tertiary-container);
+  }
+
+  .appbar-tertiary .appbar-subtitle {
+    color: var(--color-on-tertiary);
+    opacity: 0.8;
+  }
+
+  /* Surface Variants */
   .appbar-surface {
+    background-color: var(--color-surface);
+  }
+
+  .appbar-surface-container {
     background-color: var(--color-surface-container);
   }
 
+  .appbar-surface-container-low {
+    background-color: var(--color-surface-container-low);
+  }
+
+  .appbar-surface-container-high {
+    background-color: var(--color-surface-container-high);
+  }
+
+  .appbar-surface-container-highest {
+    background-color: var(--color-surface-container-highest);
+  }
+
   /* Center Title */
   .appbar-center {
     justify-content: space-between;