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

package/src/scss/variables/_base.scss

@@ -15,21 +15,23 @@
 // Primary brand/interactive color and its variants
 // =============================================================================
 
-$base-accent-color: #007bff !default;
-$base-accent-color-hover: color.adjust($base-accent-color, $lightness: 10%) !default;
-$base-accent-color-active: color.adjust($base-accent-color, $lightness: 20%) !default;
+// Default theme = pure-admin Corporate (sky-blue). Matches the canonical
+// --base-* contract in @keenmate/base-css-variables; a theme overrides these.
+$base-accent-color: #0ea5e9 !default;
+$base-accent-color-hover: #0284c7 !default;
+$base-accent-color-active: #0369a1 !default;
 $base-accent-color-light: rgba($base-accent-color, 0.05) !default;
-$base-accent-color-light-hover: rgba($base-accent-color, 0.12) !default;
+$base-accent-color-light-hover: rgba($base-accent-color, 0.08) !default;
 
 // =============================================================================
 // TEXT COLORS
 // Hierarchical text colors for different emphasis levels
 // =============================================================================
 
-$base-text-color-1: #2c3e50 !default;  // Primary text (strongest)
-$base-text-color-2: #6c757d !default;  // Secondary text (muted)
-$base-text-color-3: #7a8a99 !default;  // Tertiary text (lighter)
-$base-text-color-4: #a3b1bf !default;  // Quaternary text (lightest)
+$base-text-color-1: #334155 !default;  // Primary text (strongest) — Corporate slate-700
+$base-text-color-2: #64748b !default;  // Secondary text (muted) — slate-500
+$base-text-color-3: #94a3b8 !default;  // Tertiary text (lighter) — slate-400
+$base-text-color-4: #cbd5e1 !default;  // Quaternary text (lightest) — slate-300
 $base-text-color-on-accent: #ffffff !default;  // Text on accent backgrounds
 
 // =============================================================================
@@ -37,31 +39,51 @@ $base-text-color-on-accent: #ffffff !default;  // Text on accent backgrounds
 // Semantic background colors for different purposes
 // =============================================================================
 
-$base-main-bg: #ffffff !default;          // Primary background (cards, modals, content)
-$base-page-bg: #f8f9fa !default;          // Page background, subtle sections
-$base-subtle-bg: #e9ecef !default;        // Muted areas, dividers
+// SURFACE ELEVATION LADDER (static container backgrounds — one axis).
+// Keep this axis separate from the interaction-STATE tokens below (hover/
+// active/disabled) and from --base-border-color (dividers).
+$base-main-bg: #ffffff !default;          // Content surface (cards, modals, body) — the reference rung
+$base-page-bg: #f8f9fa !default;          // Canvas/backdrop the content sits on
+// Recessed / inset surface — the "sunken" rung BELOW main: code blocks, wells,
+// inset panels, pills, tiles. NOT a hover state (see $base-hover-bg) and NOT a
+// divider (see $base-border-color); one crisp job. Raised chrome (headers,
+// striped rows) uses $base-elevated-bg instead.
+$base-subtle-bg: #e9ecef !default;
 $base-inverse-bg: #2c3e50 !default;       // Inverse background (tooltips, dark elements)
 $base-overlay-bg: rgba(0, 0, 0, 0.5) !default;  // Modal/overlay background
 $base-shadow-color: rgba(0, 0, 0, 0.15) !default;  // Shadow color for elevation
 // Elevated surface (header rows, striped rows, popovers/toolbars). Defaults to
 // the page background so the default theme's header appearance is unchanged, but
 // themes can override it independently to create a distinct raised tone.
+// Defaults to the page bg so it tracks a theme's canvas (dark themes stay dark);
+// Corporate overrides it to slate-100 (#f1f5f9) for a distinct header tint.
 $base-elevated-bg: $base-page-bg !default;
 // Text on inverse/dark surfaces (web-component bridge: --base-text-inverted).
 $base-text-inverted: #ffffff !default;
 
-// Interactive state backgrounds
+// Interaction-STATE backgrounds (a separate axis from the elevation ladder).
+// These default to (derive from) $base-subtle-bg so unthemed hovers stay
+// sensible, but they are their OWN tokens: override them to decouple hover/
+// active from the recessed-surface tone. Components read --pc-hover-bg /
+// --pc-active-bg for :hover/:active fills — never --pc-subtle-bg.
 $base-hover-bg: $base-subtle-bg !default;         // Hover state background
 $base-active-bg: color.adjust($base-subtle-bg, $lightness: -5%) !default;  // Active/pressed state
-$base-disabled-bg: $base-subtle-bg !default;      // Disabled element background
+// Disabled element background. Given its OWN lower-contrast default (an inert,
+// near-page tone) so it no longer collides with $base-hover-bg/$base-subtle-bg —
+// distinct purpose, distinct value. (WS7.3)
+$base-disabled-bg: #f1f3f5 !default;
 
 // =============================================================================
 // BORDER COLORS
 // Border colors and shorthand
 // =============================================================================
 
-$base-border-color: #e1e5e9 !default;
-$base-border: 1px solid $base-border-color !default;
+// Shared border width — the single knob the border shorthands compose from, so
+// a theme can retune stroke weight in one place (web-component bridge:
+// --base-border-width). (WS7.1)
+$base-border-width: 1px !default;
+$base-border-color: #e2e8f0 !default;  // Corporate slate-200
+$base-border: $base-border-width solid $base-border-color !default;
 // Checkbox/radio border (web-component bridge: --base-checkbox-border-color).
 $base-checkbox-border-color: $base-border-color !default;
 
@@ -71,14 +93,13 @@ $base-checkbox-border-color: $base-border-color !default;
 // =============================================================================
 
 $base-input-bg: $base-main-bg !default;
-$base-input-color: #495057 !default;
+$base-input-color: #334155 !default;  // Corporate slate-700
 // Input border as a colour (single source) + the 1px shorthand web components
-// read via --base-input-border. Note: pure-admin's own inputs currently border
-// off --base-border-color (#e1e5e9), not this (#ced4da) — a deliberate divergence
-// kept to preserve appearance; see _colors.scss $input-border.
-$base-input-border-color: #ced4da !default;
+// read via --base-input-border. Now equals --base-border-color (both Corporate
+// slate-200 #e2e8f0).
+$base-input-border-color: #e2e8f0 !default;  // = border-color (Corporate slate-200)
 $base-input-border: 1px solid $base-input-border-color !default;
-$base-input-border-hover: 1px solid #b8bfc6 !default;
+$base-input-border-hover: 1px solid $base-accent-color !default;  // Corporate: accent on hover
 $base-input-border-focus: 1px solid $base-accent-color !default;
 $base-input-placeholder-color: $base-text-color-4 !default;
 $base-input-bg-disabled: rgba($base-input-bg, 0.5) !default;
@@ -88,6 +109,8 @@ $base-input-clear-color: $base-text-color-3 !default;
 $base-input-clear-bg-hover: $base-hover-bg !default;
 
 // Input size heights (unitless multipliers for x10px base)
+// Neutral heights (Corporate bumps these +0.3 itself for its wider font — that's a
+// theme ergonomic tweak, not base identity, so the foundation default stays neutral).
 $base-input-size-xs-height: 3.1 !default;  // 31px
 $base-input-size-sm-height: 3.3 !default;  // 33px
 $base-input-size-md-height: 3.5 !default;  // 35px
@@ -116,9 +139,9 @@ $base-tooltip-text-color: #ffffff !default;
 // Success/positive semantic colors
 // =============================================================================
 
-$base-success-color: #22c55e !default;  // Tailwind green-500 — aligns with --pc-positive in the sentiment scale
+$base-success-color: #10b981 !default;  // Corporate emerald-500 — also --pa-positive in the sentiment scale
 $base-success-bg: $base-success-color !default;  // Solid role fill (web-component bridge: --base-success-bg)
-$base-success-color-hover: color.adjust($base-success-color, $lightness: -10%) !default;
+$base-success-color-hover: #059669 !default;  // Corporate emerald-600
 $base-success-bg-light: rgba($base-success-color, 0.1) !default;
 $base-success-bg-subtle: rgba($base-success-color, 0.08) !default;
 $base-success-border: rgba($base-success-color, 0.2) !default;
@@ -131,9 +154,9 @@ $base-text-on-success: #ffffff !default;
 // Danger/error semantic colors
 // =============================================================================
 
-$base-danger-color: #ef4444 !default;  // Tailwind red-500 — aligns with --pc-negative in the sentiment scale
+$base-danger-color: #ef4444 !default;  // Tailwind red-500 — aligns with --pa-negative in the sentiment scale
 $base-danger-bg: $base-danger-color !default;  // Solid role fill (web-component bridge: --base-danger-bg)
-$base-danger-color-hover: color.adjust($base-danger-color, $lightness: -10%) !default;
+$base-danger-color-hover: #dc2626 !default;  // Corporate red-600
 $base-danger-bg-light: rgba($base-danger-color, 0.1) !default;
 $base-danger-bg-subtle: rgba($base-danger-color, 0.08) !default;
 $base-danger-border: rgba($base-danger-color, 0.2) !default;
@@ -146,23 +169,24 @@ $base-text-on-danger: #ffffff !default;
 // Warning semantic colors
 // =============================================================================
 
-$base-warning-color: #f97316 !default;  // Tailwind orange-500 — also serves as the off-target axis in KPI components
+$base-warning-color: #f59e0b !default;  // Corporate amber-500 — also the off-target axis in KPI components
 $base-warning-bg: $base-warning-color !default;  // Solid role fill (web-component bridge: --base-warning-bg)
-$base-warning-color-hover: color.adjust($base-warning-color, $lightness: -10%) !default;
+$base-warning-color-hover: #d97706 !default;  // Corporate amber-600
 $base-warning-bg-light: rgba($base-warning-color, 0.1) !default;
 $base-warning-bg-subtle: rgba($base-warning-color, 0.08) !default;
 $base-warning-border: rgba($base-warning-color, 0.2) !default;
 $base-warning-text: #856404 !default;
 $base-warning-text-light: #fff3cd !default;
-$base-text-on-warning: #212529 !default;  // Dark text for yellow backgrounds
+$base-text-on-warning: #ffffff !default;  // Corporate uses white on amber
 
 // =============================================================================
 // CONTEXTUAL COLORS - INFO
 // Info semantic colors
 // =============================================================================
 
-$base-info-color: #17a2b8 !default;
-$base-info-color-hover: color.adjust($base-info-color, $lightness: -10%) !default;
+$base-info-color: #06b6d4 !default;  // Corporate cyan-500
+$base-info-bg: $base-info-color !default;  // Solid role fill — role symmetry with success/danger/warning (WS7.4)
+$base-info-color-hover: #0891b2 !default;  // Corporate cyan-600
 $base-info-bg-light: rgba($base-info-color, 0.1) !default;
 $base-info-bg-subtle: rgba($base-info-color, 0.08) !default;
 $base-info-border: rgba($base-info-color, 0.2) !default;
@@ -170,10 +194,22 @@ $base-info-text: #0c5460 !default;
 $base-info-text-light: #d1ecf1 !default;
 $base-text-on-info: #ffffff !default;
 
+// =============================================================================
+// SECONDARY ROLE
+// Neutral/secondary role, promoted into the base contract so themes can retune
+// it like any other role instead of it being a hardcoded grey in _colors.scss.
+// (WS7.5) Fill + hover + text-on-fill; the derived $btn-secondary-*/$secondary-*
+// vocabulary in _colors.scss now traces to these.
+// =============================================================================
+
+$base-secondary-color: #6c757d !default;
+$base-secondary-color-hover: #545b62 !default;
+$base-text-on-secondary: #ffffff !default;
+
 // =============================================================================
 // SENTIMENT SCALE — 5-step direction-of-change
 // Used by KPI / data-display components to indicate movement direction.
-// `--pc-positive` and `--pc-negative` alias the role colours above; the
+// `--pa-positive` and `--pa-negative` alias the role colours above; the
 // outlier shades (`very-positive` / `very-negative`) are explicit darker
 // stops since they're not derivable cleanly via color.adjust.
 // =============================================================================
@@ -182,6 +218,33 @@ $base-very-positive: #16a34a !default;  // Tailwind green-600 — outlier positi
 $base-very-negative: #dc2626 !default;  // Tailwind red-600 — outlier negative
 $base-neutral:       #9ca3af !default;  // Tailwind gray-400 — "no meaningful change"
 
+// =============================================================================
+// THEME PALETTE SLOTS (1–9) + paired contrast text
+// Arbitrary branded / data-viz slots. These are the SOURCE for $color-1..9
+// (variables/_colors.scss derives `$color-N: $base-color-N`) and the emitted
+// --base-color-N / --pc-color-N, so the palette follows the same $base-* → $X
+// chain as every other token. Default = Corporate palette.
+// =============================================================================
+
+$base-color-1: #f59e0b !default;  // Amber
+$base-color-2: #ec4899 !default;  // Pink
+$base-color-3: #10b981 !default;  // Emerald
+$base-color-4: #0ea5e9 !default;  // Sky blue
+$base-color-5: #8b5cf6 !default;  // Violet
+$base-color-6: #6366f1 !default;  // Indigo
+$base-color-7: #64748b !default;  // Slate
+$base-color-8: #0284c7 !default;  // Corporate blue
+$base-color-9: #334155 !default;  // Dark slate
+$base-color-1-text: #1a1a1a !default;  // dark on amber
+$base-color-2-text: #ffffff !default;
+$base-color-3-text: #ffffff !default;
+$base-color-4-text: #ffffff !default;
+$base-color-5-text: #ffffff !default;
+$base-color-6-text: #ffffff !default;
+$base-color-7-text: #ffffff !default;
+$base-color-8-text: #ffffff !default;
+$base-color-9-text: #ffffff !default;
+
 // =============================================================================
 // INTERACTIVE STATES
 // Generic interaction feedback colors
@@ -234,13 +297,62 @@ $base-border-radius-lg: 0.8 !default;  // 8px
 // `html { font-size: 10px }` (reboot), so `1rem` tracks that base adaptively.
 $base-rem: 1rem !default;
 
-// =============================================================================
-// COMPONENT-SPECIFIC DERIVED VALUES
-// Variables that components need, derived from base
-// =============================================================================
-
-// Command palette input height (must be after $base-input-size-* variables)
-$command-palette-input-height: #{$base-input-size-lg-height}rem !default;
+// $command-palette-input-height moved to pure-admin-core (variables/
+// _components.scss) — a niche component dimension, not a foundation primitive.
+
+// =============================================================================
+// ICONS
+// Mask-friendly SVG glyphs for the shared UI affordances, so every consumer
+// (pure-css shell, pure-admin components, the web/svelte components) can render
+// the SAME toggle/close marks and a theme can swap the icon set in ONE place.
+// Rendered via `mask` + `background: currentColor`, so the glyph inherits text
+// colour and needs no fill/stroke theming. Values are percent-encoded data-URIs
+// (no raw `#`, so Sass never mistakes it for interpolation). Defaults are Lucide.
+//   - chevron:    thin STROKED angle bracket, DIRECTIONAL/rotatable — expanders,
+//                 nav, submenus ("more this way"). Resting glyph points RIGHT
+//                 (LTR); consumers rotate it 90deg to point down when open. This
+//                 is the ROTATE-one-glyph disclosure model (cf. expand/collapse).
+//   - caret-up /
+//     caret-down: small SOLID triangles, STATIC — the dropdown/select affordance
+//                 (down = "a menu opens below") and its sort-direction / upward-
+//                 dropdown counterpart (up). A component SWAPS up/down; a caret
+//                 never rotates (that's the chevron's job).
+//   - close:      the ✕ — dismiss a transient SURFACE (dialog, panel, popover,
+//                 toast). NOT the same as remove / delete below.
+//   - clear:      clear-a-FIELD ✕ — distinct purpose, same glyph; follows
+//                 --base-icon-close at runtime (override alone to diverge).
+//   - remove:     take an ITEM out of a collection (chip / tag / selected row) —
+//                 non-destructive, reversible. ✕ glyph, follows close (own knob).
+//   - expand/collapse: the +/− pair for the SWAP-two-glyphs disclosure model
+//                 (tree nodes, accordions) — distinct from `chevron`, the
+//                 ROTATE-one-glyph model. Shows `expand` (+) collapsed, `collapse`
+//                 (−) open, swapping on state (no rotation). Lucide plus / minus.
+//
+// Action icons — CRUD verbs with distinct glyphs so they read as actions, NOT as
+// dismiss/disclosure affordances:
+//   - add:        + — create / insert (row, tag, item). Same + shape as `expand`
+//                 but an INDEPENDENT knob (create ≠ disclosure).
+//   - edit:       pencil — modify.
+//   - delete:     trash can — DESTROY permanently (destructive). Deliberately a
+//                 bin, not an ✕, so it never reads like close / remove.
+//
+// Utility:
+//   - search:     magnifying glass — search inputs, filter fields, command palette.
+// =============================================================================
+
+$base-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m9 18 6-6-6-6%22/%3E%3C/svg%3E") !default;
+$base-icon-caret-down: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23000%22 d=%22M12 15 6 9h12z%22/%3E%3C/svg%3E") !default;
+$base-icon-caret-up: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath fill=%22%23000%22 d=%22M12 9 6 15h12z%22/%3E%3C/svg%3E") !default;
+$base-icon-close: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M18 6 6 18%22/%3E%3Cpath d=%22m6 6 12 12%22/%3E%3C/svg%3E") !default;
+// expand = "+" (shown when collapsed, invites expand); collapse = "−" (shown when open).
+$base-icon-expand: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3Cpath d=%22M12 5v14%22/%3E%3C/svg%3E") !default;
+$base-icon-collapse: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3C/svg%3E") !default;
+// Action icons (CRUD). `add` shares the + shape with `expand` but is its own knob.
+$base-icon-add: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22/%3E%3Cpath d=%22M12 5v14%22/%3E%3C/svg%3E") !default;
+$base-icon-edit: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z%22/%3E%3C/svg%3E") !default;
+$base-icon-delete: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 6h18%22/%3E%3Cpath d=%22M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2%22/%3E%3Cpath d=%22M10 11v6%22/%3E%3Cpath d=%22M14 11v6%22/%3E%3C/svg%3E") !default;
+// Utility: magnifying glass (Lucide search).
+$base-icon-search: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%228%22/%3E%3Cpath d=%22m21 21-4.3-4.3%22/%3E%3C/svg%3E") !default;
 
 // =============================================================================
 // ALERT COLOR DERIVATION PARAMETERS