lupine.components 1.1.59 → 1.1.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.1.59",
+  "version": "1.1.61",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://github.com/uuware/lupine.js",

package/src/components/slide-page-component-demo.tsx

@@ -322,7 +322,7 @@ export const slidePageDemo: DemoStory<SlidePageProps> = {
           style={{
             padding: '12px 16px',
             borderRadius: '8px',
-            background: 'var(--bg-container, #f2f2f7)',
+            background: 'var(--secondary-bg-color, #f2f2f7)',
             fontSize: '13px',
             color: 'var(--text-secondary, #64748b)',
             lineHeight: '1.5',

package/src/demo/demo-container.tsx

@@ -28,7 +28,7 @@ export const DemoContainer = (props: DemoContainerProps) => {
       minHeight: '50px',
       maxHeight: '40%',
       overflowY: 'auto',
-      borderTop: '1px solid var(--border-color, #ccc)',
+      borderTop: '1px solid var(--secondary-border-color, #ccc)',
       padding: 'var(--space-m, 8px)',
     },
   };

package/src/frames/slider-frame.tsx

@@ -16,7 +16,7 @@ import { MediaQueryMaxWidth, VNode, stopPropagation } from 'lupine.components';
 import { SliderHelper, SliderHelperCloseProps } from './slider-helper';
 
 export type SliderFrameHookProps = {
-  load?: (children: VNode<any>) => void;
+  load?: (children: VNode<any>, addBottomSafearea?: boolean) => void;
   close?: (event: Event) => void;
   isOpened?: () => boolean;
 };
@@ -34,13 +34,13 @@ export const SliderFrame = (props: SliderFrameProps) => {
   let opened = false;
 
   if (props.hook) {
-    props.hook.load = (children) => {
+    props.hook.load = (children, addBottomSafearea) => {
       opened = true;
       SliderHelper.show({
         direction: props.direction || 'right',
         children,
         maxWidth: props.maxWidth,
-        addBottomSafearea: props.addBottomSafearea ?? false,
+        addBottomSafearea: typeof addBottomSafearea === 'boolean' ? addBottomSafearea : (props.addBottomSafearea ?? false),
         closeEvent: () => {
           opened = false;
           closeSlider = undefined;

package/src/lib/index.ts

@@ -18,6 +18,7 @@ export * from './dynamical-load';
 export * from './find-parent-tag';
 export * from './format-bytes';
 export * from './lite-dom';
+export * from './local-storage-wrapper'
 export * from './message-hub';
 export * from './observable';
 export * from './path-utils';

package/src/lib/local-storage-wrapper.ts

@@ -0,0 +1,47 @@
+export class LocalStorageWrapper {
+  private prefix: string;
+
+  /**
+   * Creates an instance of LocStorage.
+   * @param prefix - The prefix applied to all storage keys.
+   */
+  constructor(prefix: string) {
+    this.prefix = prefix;
+  }
+
+  set(key: string, value: string | null) {
+    if (typeof window === 'undefined') return;
+    if (value === null) {
+      window.localStorage.removeItem(this.makeKey(key));
+      return;
+    }
+    window.localStorage.setItem(this.makeKey(key), value);
+  }
+  get(key: string): string | null {
+    if (typeof window === 'undefined') return null;
+    return window.localStorage.getItem(this.makeKey(key));
+  }
+  setJson(key: string, value: object | null) {
+    if (typeof window === 'undefined') return;
+    if (value === null) {
+      window.localStorage.removeItem(this.makeKey(key));
+      return;
+    }
+    window.localStorage.setItem(this.makeKey(key), JSON.stringify(value));
+  }
+  getJson(key: string): object | null {
+    if (typeof window === 'undefined') return null;
+    const val = window.localStorage.getItem(this.makeKey(key));
+    try {
+      if (!val) return null;
+      return JSON.parse(val);
+    } catch (error) {
+      console.error(`[LocalStorage Error] Failed to get key "${key}":`, error);
+      return null;
+    }
+  }
+
+  private makeKey(key: string): string {
+    return `${this.prefix}${key}`;
+  }
+}

package/src/styles/compute-theme-vars.ts

@@ -0,0 +1,103 @@
+import { blendColor } from "lupine.web";
+
+export interface ComputedThemeVars {
+    '--primary-color': string;
+    '--primary-bg-color': string;
+    '--primary-border-color': string;
+    '--primary-border': string;
+    '--primary-color-disabled': string;
+    '--primary-disabled-opacity': string;
+    '--secondary-color': string;
+    '--secondary-bg-color': string;
+    '--secondary-border-color': string;
+    '--secondary-border': string;
+    '--activatable-color-normal': string;
+    '--activatable-bg-color-normal': string;
+    '--activatable-color-hover': string;
+    '--activatable-bg-color-hover': string;
+    '--activatable-color-selected': string;
+    '--activatable-bg-color-selected': string;
+}
+
+/**
+ * Computes a full set of global theme CSS variables from the theme mode,
+ * primary background color, and primary text color.
+ * 
+ * Design Specifications:
+ * - `--secondary-color` (Secondary / Muted Text):
+ *   - Dark mode: blendColor(primaryText, primaryBg, 0.38) (~62% text + 38% bg)
+ *   - Light mode: blendColor(primaryText, primaryBg, 0.42) (~58% text + 42% bg)
+ *   - Ensures soft readability while strictly meeting WCAG AA contrast standards (>= 4.5:1).
+ * - `--secondary-bg-color` (Surface / Card / Modal Background):
+ *   - Dark mode: blendColor(primaryBg, '#FFFFFF', 0.10) (elevated by +10% lightness)
+ *   - Light mode: blendColor(primaryBg, '#FFFFFF', 0.55) (elevated towards white by +55%)
+ * - `--primary-border-color` & `--secondary-border-color`:
+ *   - Balanced contrast border tints for cards, buttons, and dividers.
+ * - `--activatable-...`:
+ *   - Normal, hover, and selected states for buttons, tabs, pills, and menus.
+ */
+export function computeThemeVars(mode: 'light' | 'dark', primaryBg: string, primaryText: string): ComputedThemeVars {
+    const isDark = mode === 'dark';
+
+    // 1. Secondary Text
+    const secondaryColor = isDark
+        ? blendColor(primaryText, primaryBg, 0.38)
+        : blendColor(primaryText, primaryBg, 0.42);
+
+    // 2. Card / Surface Elevation Background
+    const secondaryBg = isDark
+        ? blendColor(primaryBg, '#FFFFFF', 0.10)
+        : blendColor(primaryBg, '#FFFFFF', 0.55);
+
+    // 3. Borders & Dividers
+    const primaryBorderColor = isDark
+        ? blendColor(primaryBg, primaryText, 0.35)
+        : blendColor(primaryBg, primaryText, 0.25);
+
+    const secondaryBorderColor = isDark
+        ? blendColor(primaryBg, primaryText, 0.18)
+        : blendColor(primaryBg, primaryText, 0.12);
+
+    // 4. Disabled Text
+    const primaryColorDisabled = isDark
+        ? blendColor(primaryText, primaryBg, 0.60)
+        : blendColor(primaryText, primaryBg, 0.65);
+
+    // 5. Activatable Hover State
+    const activatableBgHover = isDark
+        ? blendColor(primaryBg, '#FFFFFF', 0.16)
+        : blendColor(primaryBg, primaryText, 0.08);
+
+    const activatableColorHover = isDark ? '#FFFFFF' : primaryText;
+
+    // 6. Activatable Selected State
+    const activatableBgSelected = isDark
+        ? blendColor(primaryBg, '#FFFFFF', 0.22)
+        : blendColor(primaryBg, primaryText, 0.14);
+
+    const activatableColorSelected = isDark ? '#FFFFFF' : primaryText;
+
+    return {
+        // Primary Group
+        '--primary-color': primaryText,
+        '--primary-bg-color': primaryBg,
+        '--primary-border-color': primaryBorderColor,
+        '--primary-border': `1px solid ${primaryBorderColor}`,
+        '--primary-color-disabled': primaryColorDisabled,
+        '--primary-disabled-opacity': isDark ? '0.6' : '0.45',
+
+        // Secondary Group
+        '--secondary-color': secondaryColor,
+        '--secondary-bg-color': secondaryBg,
+        '--secondary-border-color': secondaryBorderColor,
+        '--secondary-border': `1px solid ${secondaryBorderColor}`,
+
+        // Activatable Group (Buttons, Pills, Tabs, Menus)
+        '--activatable-color-normal': primaryText,
+        '--activatable-bg-color-normal': secondaryBg,
+        '--activatable-color-hover': activatableColorHover,
+        '--activatable-bg-color-hover': activatableBgHover,
+        '--activatable-color-selected': activatableColorSelected,
+        '--activatable-bg-color-selected': activatableBgSelected,
+    };
+}

package/src/styles/index.ts

@@ -1,5 +1,6 @@
-export * from './media-query';
-export * from './shared-themes';
+export * from './base-themes';
+export * from './compute-theme-vars';
 export * from './dark-themes';
 export * from './light-themes';
-export * from './base-themes';
+export * from './media-query';
+export * from './shared-themes';