@keenmate/pure-css 1.0.0-rc01

package/src/scss/variables/_base.scss

@@ -0,0 +1,232 @@
+// ============================================================================
+// BASE VARIABLES - Single Source of Truth for Theming
+// ============================================================================
+// These $base-* SCSS variables are the PRIMARY source for all theme colors.
+// Framework variables in _colors.scss, _typography.scss, etc. DERIVE from these.
+// Web components consume these via --base-* CSS custom properties.
+//
+// To create a theme: Override these variables, everything else auto-derives.
+// ============================================================================
+
+@use 'sass:color';
+
+// =============================================================================
+// ACCENT COLORS
+// 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;
+$base-accent-color-light: rgba($base-accent-color, 0.05) !default;
+$base-accent-color-light-hover: rgba($base-accent-color, 0.12) !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-on-accent: #ffffff !default;  // Text on accent backgrounds
+
+// =============================================================================
+// BACKGROUND COLORS
+// 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
+$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
+$base-elevated-bg: #f5f5f5 !default;  // Header row, striped rows, elevated surfaces
+
+// Interactive state backgrounds
+$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
+
+// =============================================================================
+// BORDER COLORS
+// Border colors and shorthand
+// =============================================================================
+
+$base-border-color: #e1e5e9 !default;
+$base-border: 1px solid $base-border-color !default;
+
+// =============================================================================
+// INPUT FIELDS
+// Input field styling and states
+// =============================================================================
+
+$base-input-bg: $base-main-bg !default;
+$base-input-color: #495057 !default;
+$base-input-border: 1px solid #ced4da !default;
+$base-input-border-hover: 1px solid #b8bfc6 !default;
+$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;
+
+// Input size heights (unitless multipliers for x10px base)
+$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
+$base-input-size-lg-height: 3.8 !default;  // 38px
+$base-input-size-xl-height: 4.1 !default;  // 41px
+
+// =============================================================================
+// DROPDOWN / POPOVER
+// Floating element styling
+// =============================================================================
+
+$base-dropdown-bg: $base-main-bg !default;
+$base-dropdown-border: 1px solid $base-border-color !default;
+$base-dropdown-box-shadow: 0 8px 16px $base-shadow-color !default;
+
+// =============================================================================
+// TOOLTIP
+// Tooltip styling
+// =============================================================================
+
+$base-tooltip-bg: $base-inverse-bg !default;
+$base-tooltip-text-color: #ffffff !default;
+
+// =============================================================================
+// CONTEXTUAL COLORS - SUCCESS
+// Success/positive semantic colors
+// =============================================================================
+
+$base-success-color: #22c55e !default;  // Tailwind green-500 — aligns with --pa-positive in the sentiment scale
+$base-success-color-hover: color.adjust($base-success-color, $lightness: -10%) !default;
+$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;
+$base-success-text: #155724 !default;
+$base-success-text-light: #d4edda !default;
+$base-text-on-success: #ffffff !default;
+
+// =============================================================================
+// CONTEXTUAL COLORS - DANGER
+// Danger/error semantic colors
+// =============================================================================
+
+$base-danger-color: #ef4444 !default;  // Tailwind red-500 — aligns with --pa-negative in the sentiment scale
+$base-danger-color-hover: color.adjust($base-danger-color, $lightness: -10%) !default;
+$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;
+$base-danger-text: #721c24 !default;
+$base-danger-text-light: #f8d7da !default;
+$base-text-on-danger: #ffffff !default;
+
+// =============================================================================
+// CONTEXTUAL COLORS - WARNING
+// Warning semantic colors
+// =============================================================================
+
+$base-warning-color: #f97316 !default;  // Tailwind orange-500 — also serves as the off-target axis in KPI components
+$base-warning-color-hover: color.adjust($base-warning-color, $lightness: -10%) !default;
+$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
+
+// =============================================================================
+// 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-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;
+$base-info-text: #0c5460 !default;
+$base-info-text-light: #d1ecf1 !default;
+$base-text-on-info: #ffffff !default;
+
+// =============================================================================
+// SENTIMENT SCALE — 5-step direction-of-change
+// Used by KPI / data-display components to indicate movement direction.
+// `--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.
+// =============================================================================
+
+$base-very-positive: #16a34a !default;  // Tailwind green-600 — outlier positive
+$base-very-negative: #dc2626 !default;  // Tailwind red-600 — outlier negative
+$base-neutral:       #9ca3af !default;  // Tailwind gray-400 — "no meaningful change"
+
+// =============================================================================
+// INTERACTIVE STATES
+// Generic interaction feedback colors
+// =============================================================================
+
+$base-hover-overlay: rgba(0, 0, 0, 0.04) !default;
+$base-active-overlay: rgba(0, 0, 0, 0.08) !default;
+$base-focus-ring-color: $base-accent-color !default;
+$base-focus-ring-width: 3px !default;
+
+// =============================================================================
+// TYPOGRAPHY
+// Font families, sizes, weights, and line heights
+// =============================================================================
+
+$base-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !default;
+$base-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
+
+// Font sizes (unitless multipliers for x10px base)
+$base-font-size-2xs: 1.0 !default;   // 10px
+$base-font-size-xs: 1.2 !default;    // 12px
+$base-font-size-sm: 1.4 !default;    // 14px
+$base-font-size-base: 1.6 !default;  // 16px
+$base-font-size-lg: 1.8 !default;    // 18px
+$base-font-size-xl: 2.0 !default;    // 20px
+$base-font-size-2xl: 2.4 !default;   // 24px
+
+// Font weights
+$base-font-weight-normal: 400 !default;
+$base-font-weight-medium: 500 !default;
+$base-font-weight-semibold: 600 !default;
+$base-font-weight-bold: 700 !default;
+
+// Line heights
+$base-line-height-tight: 1.25 !default;
+$base-line-height-normal: 1.5 !default;
+$base-line-height-relaxed: 1.75 !default;
+
+// =============================================================================
+// BORDER RADIUS
+// Border radius sizes (unitless multipliers for x10px base)
+// =============================================================================
+
+$base-border-radius-sm: 0.4 !default;  // 4px
+$base-border-radius-md: 0.6 !default;  // 6px
+$base-border-radius-lg: 0.8 !default;  // 8px
+
+// =============================================================================
+// 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;
+
+// =============================================================================
+// ALERT COLOR DERIVATION PARAMETERS
+// Used by color-mix() mixins to derive alert colors from semantic base colors
+// Themes can override these to customize alert appearance
+// =============================================================================
+
+$alert-bg-opacity-light: 15 !default;       // Light mode: subtle bg (%)
+$alert-bg-opacity-dark: 45 !default;        // Dark mode: punchy, vibrant bg (%)
+$alert-border-opacity-light: 30 !default;   // Light mode border (%)
+$alert-border-opacity-dark: 70 !default;    // Dark mode border - more visible (%)
+$alert-text-mix-light: 60% !default;        // Mix with black for dark text
+$alert-text-mix-dark: 80% !default;         // Mix with white for light text

package/src/scss/variables/_colors.scss

@@ -0,0 +1,231 @@
+// ============================================================================
+// 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)
+// =============================================================================
+
+$main-bg: $base-page-bg !default;
+$page-bg: $base-page-bg !default;
+$subtle-bg: $base-main-bg !default;
+$text-color-1: $base-text-color-1 !default;
+$text-color-2: $base-text-color-2 !default;
+$border-color: $base-border-color !default;
+
+// Header colors
+$header-bg: $base-main-bg !default;
+$header-border-color: $base-border-color !default;
+$header-text: $base-text-color-1 !default;
+$header-text-secondary: $base-text-color-2 !default;
+$header-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)
+// =============================================================================
+
+$card-bg: $base-main-bg !default;
+$card-header-bg: $base-page-bg !default;
+$card-footer-bg: $base-main-bg !default;
+$card-tabs-bg: $base-page-bg !default;
+
+// =============================================================================
+// INPUT COLORS (derived from base input vars)
+// =============================================================================
+
+$input-bg: $base-input-bg !default;
+$input-border: #ced4da !default;  // Extracted from base-input-border
+$input-text: $base-input-color !default;
+
+// =============================================================================
+// TABLE COLORS (derived from base surfaces)
+// =============================================================================
+
+$table-stripe: $base-page-bg !default;
+$table-bg: $base-main-bg !default;
+$table-header-bg: $base-page-bg !default;
+$table-hover-bg: $base-page-bg !default;
+
+// 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-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;