/** * Gampil POS Design System v1.0 — Blacky Design Tokens Foundation * Theme: BLACKY (Dark Premium) * * Scoped strictly to plugin-owned containers (POS, Workspace, WP Admin). * Does NOT declare global :root or body styling. * * @package Gampil_POS * @subpackage Design_System * @version 1.0.0 */ /* ========================================================================== 1. BLACKY CANONICAL DESIGN TOKENS ========================================================================== */ #ada-pos-app[data-pos-theme="blacky"], #ada-pos-app[data-pos-theme="blacky"][data-pos-color-mode], #ada-pos-app[data-pos-theme="blacky"][data-pos-color-mode="dark"], #ada-pos-app[data-pos-theme="blacky"][data-pos-color-mode="light"], #gampil-workspace-app[data-gampil-theme="blacky"], #gampil-workspace-app[data-pos-theme="blacky"], body.gampil-admin-screen.gampil-theme-blacky, body.gampil-admin-screen.gampil-theme-blacky .gampil-admin-page, body.gampil-admin-screen.gampil-theme-blacky .wrap, body.gampil-admin-screen[data-gampil-theme="blacky"], body.gampil-admin-screen[data-gampil-theme="blacky"] .gampil-admin-page, body.gampil-admin-screen[data-gampil-theme="blacky"] .wrap, body.gampil-theme-blacky .gampil-admin-page { /* Core Approved Baseline */ --gampil-bg: #0F1319; --gampil-surface: #17202A; --gampil-surface-elevated: #1D2732; --gampil-primary: #35D2B3; --gampil-text-primary: #F5F7FA; --gampil-text-secondary: #AEBCCD; --gampil-border: #2C3A49; /* Semantic Surface Roles */ --gampil-surface-muted: #131A22; --gampil-surface-soft: #1D2732; --gampil-border-subtle: #1E2833; /* Primary Action Palette & States (Mint-Teal) */ --gampil-primary-hover: #4EE2C4; --gampil-primary-active: #29B397; --gampil-primary-soft: rgba(53, 210, 179, 0.15); --gampil-text-on-primary: #0F1319; --gampil-focus-ring: rgba(53, 210, 179, 0.35); /* Typography Supporting Colors */ --gampil-text-muted: #64748B; --gampil-text-inverse: #0F1319; /* Status & Semantic Feedback */ --gampil-success: #35D2B3; --gampil-success-soft: rgba(53, 210, 179, 0.12); --gampil-warning: #F59E0B; --gampil-warning-soft: rgba(245, 158, 11, 0.12); --gampil-danger: #F43F5E; --gampil-danger-soft: rgba(244, 63, 94, 0.12); --gampil-info: #38BDF8; --gampil-info-soft: rgba(56, 189, 248, 0.12); /* Disabled / Inactive States */ --gampil-disabled-bg: #18202A; --gampil-disabled-text: #526071; --gampil-disabled-border: #232E3A; /* Elevation & Shadows */ --gampil-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --gampil-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --gampil-shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.65); --gampil-elevation-overlay: rgba(0, 0, 0, 0.70); /* Shape, Spacing & Sizing */ --gampil-radius-xs: 4px; --gampil-radius-sm: 8px; --gampil-radius-md: 12px; --gampil-radius-lg: 16px; --gampil-radius-xl: 20px; --gampil-radius-modal: 20px; --gampil-radius-full: 9999px; --gampil-space-1: 2px; --gampil-space-2: 4px; --gampil-space-3: 6px; --gampil-space-4: 8px; --gampil-space-5: 12px; --gampil-space-6: 16px; --gampil-space-8: 24px; --gampil-control-height: 48px; --gampil-touch-target-min: 48px; /* MANDATORY INVARIANT: Pure White Canvas Frame for QRIS code */ --gampil-qris-frame-bg: #FFFFFF; --gampil-qris-frame-border: #E2E5E3; } /* ========================================================================== 2. LEGACY COMPATIBILITY BRIDGES (BLACKY) Maps existing consumers to canonical tokens without circular references. ========================================================================== */ #ada-pos-app[data-pos-theme="blacky"], #ada-pos-app[data-pos-theme="blacky"][data-pos-color-mode], #ada-pos-app[data-pos-theme="blacky"][data-pos-color-mode="dark"], #ada-pos-app[data-pos-theme="blacky"][data-pos-color-mode="light"], #gampil-workspace-app[data-gampil-theme="blacky"], #gampil-workspace-app[data-pos-theme="blacky"], body.gampil-admin-screen.gampil-theme-blacky, body.gampil-admin-screen.gampil-theme-blacky .gampil-admin-page, body.gampil-admin-screen.gampil-theme-blacky .wrap, body.gampil-admin-screen[data-gampil-theme="blacky"], body.gampil-admin-screen[data-gampil-theme="blacky"] .gampil-admin-page, body.gampil-admin-screen[data-gampil-theme="blacky"] .wrap, body.gampil-theme-blacky .gampil-admin-page { /* POS Legacy Consumers (--pos-*) */ --pos-bg: var(--gampil-bg); --pos-bg-gradient: var(--gampil-bg); --pos-surface: var(--gampil-surface); --pos-surface-muted: var(--gampil-surface-muted); --pos-surface-header: var(--gampil-surface); --pos-surface-elevated: var(--gampil-surface-elevated); --pos-surface-section: var(--gampil-surface-muted); --pos-control-bg: var(--gampil-surface); --pos-control-bg-hover: var(--gampil-surface-elevated); --pos-input-bg: var(--gampil-surface-muted); --pos-text-primary: var(--gampil-text-primary); --pos-text-secondary: var(--gampil-text-secondary); --pos-text-muted: var(--gampil-text-muted); --pos-text-control: var(--gampil-text-primary); --pos-text-inverse: var(--gampil-text-inverse); --pos-border: var(--gampil-border); --pos-border-subtle: var(--gampil-border-subtle); --pos-shadow-sm: var(--gampil-shadow-sm); --pos-shadow-md: var(--gampil-shadow-md); --pos-shadow-lg: var(--gampil-shadow-lg); --pos-primary: var(--gampil-primary); --pos-primary-hover: var(--gampil-primary-hover); --pos-primary-active: var(--gampil-primary-active); --pos-text-on-primary: var(--gampil-text-on-primary); --pos-control-height: var(--gampil-control-height); --pos-control-radius: var(--gampil-radius-md); --pos-control-border: var(--gampil-border); --pos-control-focus: var(--gampil-primary); --pos-focus-ring: var(--gampil-focus-ring); --pos-success: var(--gampil-success); --pos-warning: var(--gampil-warning); --pos-danger: var(--gampil-danger); --pos-info: var(--gampil-info); --pos-radius-xs: var(--gampil-radius-xs); --pos-radius-sm: var(--gampil-radius-sm); --pos-radius-md: var(--gampil-radius-md); --pos-radius-lg: var(--gampil-radius-lg); --pos-radius-xl: var(--gampil-radius-xl); --pos-radius-modal: var(--gampil-radius-modal); /* Workspace Legacy Consumers (--gw-*) */ --gw-bg: var(--gampil-bg); --gw-surface: var(--gampil-surface); --gw-surface-muted: var(--gampil-surface-muted); --gw-surface-soft: var(--gampil-surface-elevated); --gw-border: var(--gampil-border); --gw-border-subtle: var(--gampil-border-subtle); --gw-text: var(--gampil-text-primary); --gw-text-secondary: var(--gampil-text-secondary); --gw-text-muted: var(--gampil-text-secondary); --gw-text-light: var(--gampil-text-muted); --gw-accent: var(--gampil-primary); --gw-accent-hover: var(--gampil-primary-hover); --gw-accent-light: var(--gampil-primary-soft); --gw-primary: var(--gampil-primary); --gw-primary-soft: var(--gampil-primary-soft); --gw-on-primary: var(--gampil-text-on-primary); --gw-focus: var(--gampil-primary); --gw-success: var(--gampil-success); --gw-success-bg: var(--gampil-success-soft); --gw-success-border: var(--gampil-border); --gw-warning: var(--gampil-warning); --gw-warning-bg: var(--gampil-warning-soft); --gw-warning-border: var(--gampil-border); --gw-danger: var(--gampil-danger); --gw-danger-bg: var(--gampil-danger-soft); --gw-danger-border: var(--gampil-border); --gw-info: var(--gampil-info); --gw-info-bg: var(--gampil-info-soft); --gw-info-border: var(--gampil-border); --gw-shadow-sm: var(--gampil-shadow-sm); --gw-shadow: var(--gampil-shadow-md); --gw-shadow-lg: var(--gampil-shadow-lg); --gw-radius-sm: var(--gampil-radius-sm); --gw-radius: var(--gampil-radius-md); --gw-radius-lg: var(--gampil-radius-lg); --gw-control-height: var(--gampil-control-height); --gw-surface-card: var(--gampil-surface); --gw-surface-variant: var(--gampil-surface-elevated); --gw-backdrop: var(--gampil-elevation-overlay, rgba(15, 23, 42, 0.55)); --gw-radius-md: var(--gampil-radius-md); --gw-shadow-md: var(--gampil-shadow-md); /* WP Admin Legacy Consumers (--gampil-admin-*) */ --gampil-admin-bg: var(--gampil-bg); --gampil-admin-card: var(--gampil-surface); --gampil-admin-text: var(--gampil-text-primary); --gampil-admin-muted: var(--gampil-text-secondary); --gampil-admin-border: var(--gampil-border); --gampil-admin-primary: var(--gampil-primary); --gampil-admin-primary-hover: var(--gampil-primary-hover); --gampil-admin-ring: var(--gampil-focus-ring); --gampil-admin-shadow: var(--gampil-shadow-md); }