@keenmate/pure-css 1.0.0-rc07 → 1.0.0-rc08

package/src/scss/variables/_colors.scss

@@ -1,237 +1,208 @@
-// ============================================================================
-// COLOR VARIABLES
-// Theme colors, button colors, contextual colors, component colors
-// These variables DERIVE from base variables for unified theming
-// ============================================================================
-
-@use 'sass:color';
-// NOTE: Base variables are available in global scope via @import in _index.scss
-// No @use 'base' needed since we use @import for proper !default cascading
-
-// =============================================================================
-// LAYOUT COLORS (derived from base)
-// =============================================================================
-
-// Surface tokens aligned with --base-*: main = the primary/raised surface (white),
-// page = the canvas behind it (grey), subtle = a muted tone. (Previously main was
-// wired to the page grey and subtle to white — an inversion vs --base-*.)
-$main-bg: $base-main-bg !default;
-$page-bg: $base-page-bg !default;
-$subtle-bg: $base-subtle-bg !default;
-$text-color-1: $base-text-color-1 !default;
-$text-color-2: $base-text-color-2 !default;
-$border-color: $base-border-color !default;
-
-// Navbar colors
-$navbar-bg: $base-main-bg !default;
-$navbar-border-color: $base-border-color !default;
-$navbar-text: $base-text-color-1 !default;
-$navbar-text-secondary: $base-text-color-2 !default;
-$navbar-profile-name-color: $base-text-color-1 !default;
-
-// Sidebar colors
-$sidebar-bg: $base-page-bg !default;
-$sidebar-text: $base-text-color-1 !default;
-$sidebar-text-secondary: $base-text-color-2 !default;
-$sidebar-submenu-bg: $base-subtle-bg !default;
-$sidebar-submenu-hover-bg: color.adjust($base-subtle-bg, $lightness: -5%) !default;
-$sidebar-submenu-active-bg: color.adjust($base-subtle-bg, $lightness: -10%) !default;
-$sidebar-submenu-active-text: $sidebar-text !default;
-
-// Footer colors
-$footer-bg: $base-main-bg !default;
-$footer-border-color: $base-border-color !default;
-
-// Accent colors (derived from base)
-$accent-color: $base-accent-color !default;
-$accent-hover: $base-accent-color-light-hover !default;
-$accent-light: $base-accent-color-light !default;
-
-// =============================================================================
-// CARD COLORS (derived from base surfaces)
-// =============================================================================
-
-// Body surfaces → main-bg; header/tab chrome → elevated-bg (defaults to page-bg,
-// so unchanged by default; themeable independently). Reconciled so these resolve
-// to the same base tokens the web components read.
-$card-bg: $base-main-bg !default;
-$card-header-bg: $base-elevated-bg !default;
-$card-footer-bg: $base-main-bg !default;
-$card-tabs-bg: $base-elevated-bg !default;
-
-// =============================================================================
-// INPUT COLORS (derived from base input vars)
-// =============================================================================
-
-$input-bg: $base-input-bg !default;
-$input-border: $base-input-border-color !default;  // single-sourced from base (was hardcoded #ced4da)
-$input-text: $base-input-color !default;
-
-// =============================================================================
-// TABLE COLORS (derived from base surfaces)
-// =============================================================================
-
-$table-stripe: $base-elevated-bg !default;   // striped/elevated rows → elevated-bg (= page-bg default)
-$table-bg: $base-main-bg !default;
-$table-header-bg: $base-elevated-bg !default;  // header chrome → elevated-bg (= page-bg default)
-$table-hover-bg: $base-hover-bg !default;     // RECONCILED: was page-bg; now the shared hover surface
-
-// Table row hover accent (border)
-$table-hover-accent-width: 0 !default;
-$table-hover-accent-color: $base-accent-color !default;
-$table-hover-accent-position: left !default;
-
-// =============================================================================
-// BUTTON COLORS (derived from base contextual colors)
-// =============================================================================
-
-// Primary button (uses accent)
-$btn-primary-bg: $base-accent-color !default;
-$btn-primary-bg-hover: $base-accent-color-hover !default;
-$btn-primary-text: $base-text-color-on-accent !default;
-
-// Secondary button
-$btn-secondary-bg: #6c757d !default;
-$btn-secondary-bg-hover: #545b62 !default;
-$btn-secondary-text: #ffffff !default;
-
-// Success button (derived from base success)
-$btn-success-bg: $base-success-color !default;
-$btn-success-bg-hover: $base-success-color-hover !default;
-$btn-success-text: $base-text-on-success !default;
-
-// Danger button (derived from base danger)
-$btn-danger-bg: $base-danger-color !default;
-$btn-danger-bg-hover: $base-danger-color-hover !default;
-$btn-danger-text: $base-text-on-danger !default;
-
-// Warning button (derived from base warning)
-$btn-warning-bg: $base-warning-color !default;
-$btn-warning-bg-hover: $base-warning-color-hover !default;
-$btn-warning-text: $base-text-on-warning !default;
-$btn-warning-color: $base-text-on-warning !default;
-
-// Info button (derived from base info)
-$btn-info-bg: $base-info-color !default;
-$btn-info-bg-hover: $base-info-color-hover !default;
-$btn-info-text: $base-text-on-info !default;
-
-// Light button
-$btn-light-bg: $base-page-bg !default;
-$btn-light-bg-hover: $base-subtle-bg !default;
-$btn-light-text: $base-text-color-1 !default;
-
-// Dark button
-$btn-dark-bg: #343a40 !default;
-$btn-dark-bg-hover: #1d2124 !default;
-$btn-dark-text: #ffffff !default;
-
-// =============================================================================
-// CONTEXTUAL COLORS (derived from base contextual)
-// =============================================================================
-
-// Success colors
-$success-bg: $base-success-color !default;
-$success-bg-hover: $base-success-color-hover !default;
-$success-bg-light: $base-success-bg-light !default;
-$success-bg-subtle: $base-success-bg-subtle !default;
-$success-border: $base-success-border !default;
-$success-text: $base-success-text !default;
-$success-text-light: $base-success-text-light !default;
-
-// Danger colors
-$danger-bg: $base-danger-color !default;
-$danger-bg-hover: $base-danger-color-hover !default;
-$danger-bg-light: $base-danger-bg-light !default;
-$danger-bg-subtle: $base-danger-bg-subtle !default;
-$danger-border: $base-danger-border !default;
-$danger-text: $base-danger-text !default;
-$danger-text-light: $base-danger-text-light !default;
-
-// Warning colors
-$warning-bg: $base-warning-color !default;
-$warning-bg-hover: $base-warning-color-hover !default;
-$warning-bg-light: $base-warning-bg-light !default;
-$warning-bg-subtle: $base-warning-bg-subtle !default;
-$warning-border: $base-warning-border !default;
-$warning-text: $base-warning-text !default;
-$warning-text-light: $base-warning-text-light !default;
-
-// Info colors
-$info-bg: $base-info-color !default;
-$info-bg-hover: $base-info-color-hover !default;
-$info-bg-light: $base-info-bg-light !default;
-$info-bg-subtle: $base-info-bg-subtle !default;
-$info-border: $base-info-border !default;
-$info-text: $base-info-text !default;
-$info-text-light: $base-info-text-light !default;
-
-// Secondary colors
-$secondary-bg: $btn-secondary-bg !default;
-$secondary-bg-hover: $btn-secondary-bg-hover !default;
-$secondary-text: #383d41 !default;
-$secondary-light-bg: $base-subtle-bg !default;
-$secondary-light-text: $base-text-color-1 !default;
-$secondary-lighter-bg: $base-subtle-bg !default;
-
-// =============================================================================
-// TOOLTIP & POPOVER COLORS (derived from base)
-// =============================================================================
-
-$tooltip-bg: $base-tooltip-bg !default;
-$tooltip-text: $base-tooltip-text-color !default;
-
-$popover-text-light: #ffffff !default;
-$popover-text-dark: #000000 !default;
-$popover-content-bg: $base-dropdown-bg !default;  // floating surface → dropdown-bg (= main-bg default)
-
-// =============================================================================
-// CODE LANGUAGE COLORS (standalone - not themed)
-// =============================================================================
-
-$code-language-json: #f59e0b !default;
-$code-language-javascript: #f0db4f !default;
-$code-language-html: #e34c26 !default;
-$code-language-css: #264de4 !default;
-$code-language-bash: #4eaa25 !default;
-$code-language-sql: #00758f !default;
-$code-language-python: #3776ab !default;
-$code-syntax-keyword: #0077aa !default;
-$code-syntax-string: #669900 !default;
-$code-syntax-number: #ff6600 !default;
-$code-syntax-function: #9933cc !default;
-$code-syntax-property: #dd4a68 !default;
-
-// =============================================================================
-// COMPARISON TABLE COLORS
-// =============================================================================
-
-$comparison-accent-pink: #ec4899 !default;
-$comparison-accent-orange: #f97316 !default;
-
-// =============================================================================
-// CUSTOM THEME COLOR SLOTS (1-9)
-// Themes can override these to provide additional branded colors
-// =============================================================================
-
-$color-1: transparent !default;
-$color-2: transparent !default;
-$color-3: transparent !default;
-$color-4: transparent !default;
-$color-5: transparent !default;
-$color-6: transparent !default;
-$color-7: transparent !default;
-$color-8: transparent !default;
-$color-9: transparent !default;
-
-// Theme color slots - text/contrast colors
-// These define the text color to use when color-N is used as a background
-$color-1-text: #ffffff !default;
-$color-2-text: #ffffff !default;
-$color-3-text: #ffffff !default;
-$color-4-text: #ffffff !default;
-$color-5-text: #ffffff !default;
-$color-6-text: #ffffff !default;
-$color-7-text: #ffffff !default;
-$color-8-text: #ffffff !default;
-$color-9-text: #ffffff !default;
+// ============================================================================
+// COLOR VARIABLES
+// Theme colors, button colors, contextual colors, component colors
+// These variables DERIVE from base variables for unified theming
+// ============================================================================
+
+@use 'sass:color';
+// NOTE: Base variables are available in global scope via @import in _index.scss
+// No @use 'base' needed since we use @import for proper !default cascading
+
+// =============================================================================
+// LAYOUT COLORS (derived from base)
+// =============================================================================
+
+// Surface tokens aligned with --base-*: main = the primary/raised surface (white),
+// page = the canvas behind it (grey), subtle = a muted tone. (Previously main was
+// wired to the page grey and subtle to white — an inversion vs --base-*.)
+$main-bg: $base-main-bg !default;
+$page-bg: $base-page-bg !default;
+$subtle-bg: $base-subtle-bg !default;
+$text-color-1: $base-text-color-1 !default;
+$text-color-2: $base-text-color-2 !default;
+$border-color: $base-border-color !default;
+
+// Navbar colors
+$navbar-bg: $base-main-bg !default;
+$navbar-border-color: $base-border-color !default;
+$navbar-text: $base-text-color-1 !default;
+$navbar-text-secondary: $base-text-color-2 !default;
+$navbar-profile-name-color: $base-text-color-1 !default;
+
+// Sidebar colors
+$sidebar-bg: $base-page-bg !default;
+$sidebar-text: $base-text-color-1 !default;
+$sidebar-text-secondary: $base-text-color-2 !default;
+$sidebar-submenu-bg: $base-subtle-bg !default;
+$sidebar-submenu-hover-bg: color.adjust($base-subtle-bg, $lightness: -5%) !default;
+$sidebar-submenu-active-bg: color.adjust($base-subtle-bg, $lightness: -10%) !default;
+$sidebar-submenu-active-text: $sidebar-text !default;
+
+// Footer colors
+$footer-bg: $base-main-bg !default;
+$footer-border-color: $base-border-color !default;
+
+// Accent colors (derived from base)
+$accent-color: $base-accent-color !default;
+$accent-hover: $base-accent-color-light-hover !default;
+$accent-light: $base-accent-color-light !default;
+
+// =============================================================================
+// CARD COLORS (derived from base surfaces)
+// =============================================================================
+
+// Body surfaces → main-bg; header/tab chrome → elevated-bg (defaults to page-bg,
+// so unchanged by default; themeable independently). Reconciled so these resolve
+// to the same base tokens the web components read.
+$card-bg: $base-main-bg !default;
+$card-header-bg: $base-elevated-bg !default;
+$card-footer-bg: $base-main-bg !default;
+$card-tabs-bg: $base-elevated-bg !default;
+
+// =============================================================================
+// INPUT COLORS (derived from base input vars)
+// =============================================================================
+
+$input-bg: $base-input-bg !default;
+$input-border: $base-input-border-color !default;  // single-sourced from base (was hardcoded #ced4da)
+$input-text: $base-input-color !default;
+
+// TABLE COLORS moved to pure-admin-core (variables/_components.scss): pure-css
+// renders no table CSS and tables aren't a universal primitive.
+
+// =============================================================================
+// BUTTON COLORS (derived from base contextual colors)
+// =============================================================================
+
+// Primary button (uses accent)
+$btn-primary-bg: $base-accent-color !default;
+$btn-primary-bg-hover: $base-accent-color-hover !default;
+$btn-primary-text: $base-text-color-on-accent !default;
+
+// Secondary button — now traces to the promoted $base-secondary-* role (WS7.5)
+$btn-secondary-bg: $base-secondary-color !default;
+$btn-secondary-bg-hover: $base-secondary-color-hover !default;
+$btn-secondary-text: $base-text-on-secondary !default;
+
+// Success button (derived from base success)
+$btn-success-bg: $base-success-color !default;
+$btn-success-bg-hover: $base-success-color-hover !default;
+$btn-success-text: $base-text-on-success !default;
+
+// Danger button (derived from base danger)
+$btn-danger-bg: $base-danger-color !default;
+$btn-danger-bg-hover: $base-danger-color-hover !default;
+$btn-danger-text: $base-text-on-danger !default;
+
+// Warning button (derived from base warning)
+$btn-warning-bg: $base-warning-color !default;
+$btn-warning-bg-hover: $base-warning-color-hover !default;
+$btn-warning-text: $base-text-on-warning !default;
+$btn-warning-color: $base-text-on-warning !default;
+
+// Info button (derived from base info)
+$btn-info-bg: $base-info-color !default;
+$btn-info-bg-hover: $base-info-color-hover !default;
+$btn-info-text: $base-text-on-info !default;
+
+// Light button
+$btn-light-bg: $base-page-bg !default;
+$btn-light-bg-hover: $base-subtle-bg !default;
+$btn-light-text: $base-text-color-1 !default;
+
+// Dark button
+$btn-dark-bg: #343a40 !default;
+$btn-dark-bg-hover: #1d2124 !default;
+$btn-dark-text: #ffffff !default;
+
+// =============================================================================
+// CONTEXTUAL COLORS (derived from base contextual)
+// =============================================================================
+
+// Success colors
+$success-bg: $base-success-color !default;
+$success-bg-hover: $base-success-color-hover !default;
+$success-bg-light: $base-success-bg-light !default;
+$success-bg-subtle: $base-success-bg-subtle !default;
+$success-border: $base-success-border !default;
+$success-text: $base-success-text !default;
+$success-text-light: $base-success-text-light !default;
+
+// Danger colors
+$danger-bg: $base-danger-color !default;
+$danger-bg-hover: $base-danger-color-hover !default;
+$danger-bg-light: $base-danger-bg-light !default;
+$danger-bg-subtle: $base-danger-bg-subtle !default;
+$danger-border: $base-danger-border !default;
+$danger-text: $base-danger-text !default;
+$danger-text-light: $base-danger-text-light !default;
+
+// Warning colors
+$warning-bg: $base-warning-color !default;
+$warning-bg-hover: $base-warning-color-hover !default;
+$warning-bg-light: $base-warning-bg-light !default;
+$warning-bg-subtle: $base-warning-bg-subtle !default;
+$warning-border: $base-warning-border !default;
+$warning-text: $base-warning-text !default;
+$warning-text-light: $base-warning-text-light !default;
+
+// Info colors
+$info-bg: $base-info-color !default;
+$info-bg-hover: $base-info-color-hover !default;
+$info-bg-light: $base-info-bg-light !default;
+$info-bg-subtle: $base-info-bg-subtle !default;
+$info-border: $base-info-border !default;
+$info-text: $base-info-text !default;
+$info-text-light: $base-info-text-light !default;
+
+// Secondary colors
+$secondary-bg: $btn-secondary-bg !default;
+$secondary-bg-hover: $btn-secondary-bg-hover !default;
+$secondary-text: #383d41 !default;
+$secondary-light-bg: $base-subtle-bg !default;
+$secondary-light-text: $base-text-color-1 !default;
+$secondary-lighter-bg: $base-subtle-bg !default;
+
+// =============================================================================
+// TOOLTIP & POPOVER COLORS (derived from base)
+// =============================================================================
+
+$tooltip-bg: $base-tooltip-bg !default;
+$tooltip-text: $base-tooltip-text-color !default;
+
+$popover-text-light: #ffffff !default;
+$popover-text-dark: #000000 !default;
+$popover-content-bg: $base-dropdown-bg !default;  // floating surface → dropdown-bg (= main-bg default)
+
+// CODE-LANGUAGE / CODE-SYNTAX and COMPARISON-TABLE colours moved to
+// pure-admin-core (variables/_components.scss): niche component palettes
+// (syntax highlighting, the comparison widget), not foundation primitives.
+
+// =============================================================================
+// CUSTOM THEME COLOR SLOTS (1-9)
+// Themes can override these to provide additional branded colors
+// =============================================================================
+
+// Derived from the $base-color-* source of truth (variables/_base.scss), like
+// every other token. A theme overrides $base-color-N (or $color-N directly).
+$color-1: $base-color-1 !default;
+$color-2: $base-color-2 !default;
+$color-3: $base-color-3 !default;
+$color-4: $base-color-4 !default;
+$color-5: $base-color-5 !default;
+$color-6: $base-color-6 !default;
+$color-7: $base-color-7 !default;
+$color-8: $base-color-8 !default;
+$color-9: $base-color-9 !default;
+
+// Theme color slots - text/contrast colors
+// These define the text color to use when color-N is used as a background
+$color-1-text: $base-color-1-text !default;
+$color-2-text: $base-color-2-text !default;
+$color-3-text: $base-color-3-text !default;
+$color-4-text: $base-color-4-text !default;
+$color-5-text: $base-color-5-text !default;
+$color-6-text: $base-color-6-text !default;
+$color-7-text: $base-color-7-text !default;
+$color-8-text: $base-color-8-text !default;
+$color-9-text: $base-color-9-text !default;

package/src/scss/variables/_index.scss

@@ -1,23 +1,27 @@
-// ============================================================================
-// VARIABLES INDEX
-// Central import point for all variable modules
-// ============================================================================
-
-// IMPORTANT: Order matters for dependencies!
-// 1. Base variables are the SOURCE OF TRUTH (standalone, no imports)
-// 2. All other modules can import from base and derive their values
-//
-// NOTE: We use @import (not @forward) to ensure variables share the global
-// scope. This allows themes to set variables BEFORE importing, and the
-// !default flags will skip already-defined variables.
-
-// Base variables FIRST - single source of truth for theming
-@import 'base';
-
-// Derived framework variables (can use base values)
-@import 'typography';
-@import 'spacing';
-@import 'colors';
-@import 'layout';
-@import 'system';
-@import 'components';
+// ============================================================================
+// VARIABLES INDEX
+// Central import point for all variable modules
+// ============================================================================
+
+// IMPORTANT: Order matters for dependencies!
+// 1. Base variables are the SOURCE OF TRUTH (standalone, no imports)
+// 2. All other modules can import from base and derive their values
+//
+// NOTE: We use @import (not @forward) to ensure variables share the global
+// scope. This allows themes to set variables BEFORE importing, and the
+// !default flags will skip already-defined variables.
+
+// Base variables FIRST - single source of truth for theming
+@import 'base';
+
+// Derived framework variables (can use base values)
+@import 'typography';
+@import 'spacing';
+@import 'colors';
+@import 'layout';
+@import 'system';
+// NOTE: pure-admin's COMPONENT vocabulary (badge/card/table/modal/tabs/stats/
+// timeline/dataviz/command-palette/… — formerly variables/_components.scss) now
+// lives in pure-admin-core, next to the component CSS that consumes it. pure-css
+// ships only the foundation. The $base-* source of truth stays here, so core's
+// component vars still derive from it (no drift).

package/src/scss/variables/_system.scss

@@ -11,14 +11,17 @@
 // inside a `.pc-mode-dark` block) take precedence via the cascade.
 $theme-color-scheme: light !default;
 
-// Z-index scale (increments of 1000 for easy adjustment)
+// Z-index scale (increments of 1000 for easy adjustment).
+// The generic stacking tiers stay here as a shared foundation contract so the
+// shell (navbar/sidebar) and pure-admin overlays coordinate against one scale.
+// App-specific panel tiers ($z-index-detail-panel-card / -profile-panel /
+// -command-palette / -settings-panel) moved to pure-admin-core
+// (variables/_components.scss) — pure-css renders none of those surfaces.
 $z-index-base: 0 !default;
 $z-index-content: 1000 !default;
 $z-index-sidebar: 2000 !default;
 $z-index-sidebar-fixed: 3000 !default;
-$z-index-detail-panel-card: 3500 !default;  // Card overlay detail panel (below navbar)
 $z-index-navbar: 4000 !default;
-$z-index-profile-panel: 5000 !default;
 $z-index-modal-backdrop: 6000 !default;
 $z-index-modal: 7000 !default;
 $z-index-toast: 8000 !default;
@@ -28,8 +31,6 @@ $z-index-tooltip: 9000 !default;
 $z-index-dropdown: 7500 !default;
 $z-index-popover: 7600 !default;
 $z-index-loader: 10 !default;
-$z-index-command-palette: 10500 !default;
-$z-index-settings-panel: 10000 !default;
 
 // Transitions & Animation
 $transition-speed: 1 !default;
@@ -51,13 +52,11 @@ $opacity-border: 0.2 !default;
 $opacity-shadow: 0.12 !default;
 $opacity-shadow-md: 0.15 !default;
 
-// Component-specific opacities
-$alert-secondary-bg-opacity: 0.05 !default;
-$alert-light-bg-opacity: 0.03 !default;
-$card-tab-hover-opacity: 0.05 !default;
-$bg-pattern-opacity: 0.03 !default;
-$popover-code-bg-opacity: 0.1 !default;
-$modal-warning-hover-bg-opacity: $opacity-light !default;
+// Component-specific opacities moved to pure-admin-core (variables/
+// _components.scss): $alert-secondary-bg-opacity, $alert-light-bg-opacity,
+// $card-tab-hover-opacity, $bg-pattern-opacity, $popover-code-bg-opacity,
+// $modal-warning-hover-bg-opacity — niche one-offs for pure-admin components,
+// not a generic scale. The generic $opacity-* set above stays foundation.
 
 // Shadow system
 $shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1) !default;
@@ -67,23 +66,20 @@ $shadow-xl: 0 0 60px rgba(0, 0, 0, 0.12) !default;
 $shadow-2xl: 0 0 80px rgba(0, 0, 0, 0.15) !default;
 $shadow-sidebar: -2px 2px 10px rgba(0, 0, 0, 0.1) !default;
 $shadow-sidebar-open: -5px 0 20px rgba(0, 0, 0, 0.1) !default;
-$shadow-profile-panel: -4px 0 20px rgba(0, 0, 0, 0.15) !default;
+// $shadow-profile-panel moved to pure-admin-core (variables/_components.scss) —
+// a pure-admin panel shadow, not a foundation surface.
 
 // Focus outline
 $focus-outline-width: 2px !default;
 $focus-outline-offset: 2px !default;
 $focus-ring-width: 3px !default;
 
-// Background pattern (for body background)
-$bg-pattern-circle-1-x: 20% !default;
-$bg-pattern-circle-1-y: 80% !default;
-$bg-pattern-circle-2-x: 80% !default;
-$bg-pattern-circle-2-y: 20% !default;
-$bg-pattern-gradient-start: 0% !default;
-$bg-pattern-gradient-stop: 50% !default;
+// Background-pattern geometry ($bg-pattern-circle-* / $bg-pattern-gradient-*)
+// moved to pure-admin-core (variables/_components.scss): decorative geometry for
+// a specific pure-admin backdrop, not a foundation primitive.
 
 // Animation
 $animation-spin-duration: 1s !default;
-$ripple-color: rgba(255, 255, 255, 0.3) !default;
-$ripple-transition-duration: 0.6s !default;
-$ripple-size: 300px !default;
+// Ripple effect ($ripple-color / -transition-duration / -size) moved to
+// pure-admin-core (variables/_components.scss) — a pure-admin interaction
+// effect, not a foundation primitive.