@keenmate/pure-admin-core 1.0.0-rc01

package/src/scss/utilities.scss

@@ -0,0 +1,481 @@
+// Pure Admin Visual - Utility Classes
+// Spacing utilities similar to Bootstrap/Tailwind
+// Based on rem units: 0, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 4, 5
+
+// Spacing scale
+$spacers: (
+  0: 0,
+  1: 0.25rem,  // 4px
+  2: 0.5rem,   // 8px
+  3: 0.75rem,  // 12px
+  4: 1rem,     // 16px
+  5: 1.25rem,  // 20px
+  6: 1.5rem,   // 24px
+  8: 2rem,     // 32px
+  10: 2.5rem,  // 40px
+  12: 3rem,    // 48px
+  16: 4rem,    // 64px
+  20: 5rem     // 80px
+);
+
+// Margin utilities
+@each $name, $value in $spacers {
+  // All sides
+  .m-#{$name} {
+    margin: #{$value} !important;
+  }
+
+  // Top
+  .mt-#{$name} {
+    margin-top: #{$value} !important;
+  }
+
+  // Right
+  .mr-#{$name} {
+    margin-right: #{$value} !important;
+  }
+
+  // Bottom
+  .mb-#{$name} {
+    margin-bottom: #{$value} !important;
+  }
+
+  // Left
+  .ml-#{$name} {
+    margin-left: #{$value} !important;
+  }
+
+  // X-axis (left + right)
+  .mx-#{$name} {
+    margin-left: #{$value} !important;
+    margin-right: #{$value} !important;
+  }
+
+  // Y-axis (top + bottom)
+  .my-#{$name} {
+    margin-top: #{$value} !important;
+    margin-bottom: #{$value} !important;
+  }
+}
+
+// Padding utilities
+@each $name, $value in $spacers {
+  // All sides
+  .p-#{$name} {
+    padding: #{$value} !important;
+  }
+
+  // Top
+  .pt-#{$name} {
+    padding-top: #{$value} !important;
+  }
+
+  // Right
+  .pr-#{$name} {
+    padding-right: #{$value} !important;
+  }
+
+  // Bottom
+  .pb-#{$name} {
+    padding-bottom: #{$value} !important;
+  }
+
+  // Left
+  .pl-#{$name} {
+    padding-left: #{$value} !important;
+  }
+
+  // X-axis (left + right)
+  .px-#{$name} {
+    padding-left: #{$value} !important;
+    padding-right: #{$value} !important;
+  }
+
+  // Y-axis (top + bottom)
+  .py-#{$name} {
+    padding-top: #{$value} !important;
+    padding-bottom: #{$value} !important;
+  }
+}
+
+// Auto margin utilities
+.m-auto {
+  margin: auto !important;
+}
+
+.mt-auto {
+  margin-top: auto !important;
+}
+
+.mr-auto {
+  margin-right: auto !important;
+}
+
+.mb-auto {
+  margin-bottom: auto !important;
+}
+
+.ml-auto {
+  margin-left: auto !important;
+}
+
+.mx-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.my-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+
+// Display utilities
+.d-none {
+  display: none !important;
+}
+
+.d-inline {
+  display: inline !important;
+}
+
+.d-inline-block {
+  display: inline-block !important;
+}
+
+.d-block {
+  display: block !important;
+}
+
+.d-flex {
+  display: flex !important;
+}
+
+.d-inline-flex {
+  display: inline-flex !important;
+}
+
+// Flexbox utilities
+.flex-row {
+  flex-direction: row !important;
+}
+
+.flex-column {
+  flex-direction: column !important;
+}
+
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+
+.flex-nowrap {
+  flex-wrap: nowrap !important;
+}
+
+.justify-content-start {
+  justify-content: flex-start !important;
+}
+
+.justify-content-end {
+  justify-content: flex-end !important;
+}
+
+.justify-content-center {
+  justify-content: center !important;
+}
+
+.justify-content-between {
+  justify-content: space-between !important;
+}
+
+.justify-content-around {
+  justify-content: space-around !important;
+}
+
+.align-items-start {
+  align-items: flex-start !important;
+}
+
+.align-items-end {
+  align-items: flex-end !important;
+}
+
+.align-items-center {
+  align-items: center !important;
+}
+
+.align-items-baseline {
+  align-items: baseline !important;
+}
+
+.align-items-stretch {
+  align-items: stretch !important;
+}
+
+.flex-fill {
+  flex: 1 1 auto !important;
+}
+
+.flex-grow-0 {
+  flex-grow: 0 !important;
+}
+
+.flex-grow-1 {
+  flex-grow: 1 !important;
+}
+
+.flex-shrink-0 {
+  flex-shrink: 0 !important;
+}
+
+.flex-shrink-1 {
+  flex-shrink: 1 !important;
+}
+
+// Text utilities
+.text-left {
+  text-align: left !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-right {
+  text-align: right !important;
+}
+
+.text-nowrap {
+  white-space: nowrap !important;
+}
+
+.text-truncate {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+// Width utilities
+.w-25 {
+  width: 25% !important;
+}
+
+.w-33 {
+  width: 33.333333% !important;
+}
+
+.w-50 {
+  width: 50% !important;
+}
+
+.w-66 {
+  width: 66.666667% !important;
+}
+
+.w-75 {
+  width: 75% !important;
+}
+
+.w-100 {
+  width: 100% !important;
+}
+
+.w-auto {
+  width: auto !important;
+}
+
+// Min-width utilities
+.mw-25 {
+  min-width: 25% !important;
+}
+
+.mw-33 {
+  min-width: 33.333333% !important;
+}
+
+.mw-50 {
+  min-width: 50% !important;
+}
+
+.mw-66 {
+  min-width: 66.666667% !important;
+}
+
+.mw-75 {
+  min-width: 75% !important;
+}
+
+.mw-100 {
+  min-width: 100% !important;
+}
+
+.mw-auto {
+  min-width: auto !important;
+}
+
+// Fixed width utilities (min-width + width locked)
+.w-25-fixed {
+  min-width: 25% !important;
+  width: 25% !important;
+}
+
+.w-33-fixed {
+  min-width: 33.333333% !important;
+  width: 33.333333% !important;
+}
+
+.w-50-fixed {
+  min-width: 50% !important;
+  width: 50% !important;
+}
+
+.w-66-fixed {
+  min-width: 66.666667% !important;
+  width: 66.666667% !important;
+}
+
+.w-75-fixed {
+  min-width: 75% !important;
+  width: 75% !important;
+}
+
+.w-100-fixed {
+  min-width: 100% !important;
+  width: 100% !important;
+}
+
+// Height utilities
+.h-25 {
+  height: 25% !important;
+}
+
+.h-50 {
+  height: 50% !important;
+}
+
+.h-75 {
+  height: 75% !important;
+}
+
+.h-100 {
+  height: 100% !important;
+}
+
+.h-auto {
+  height: auto !important;
+}
+
+// Position utilities
+.position-static {
+  position: static !important;
+}
+
+.position-relative {
+  position: relative !important;
+}
+
+.position-absolute {
+  position: absolute !important;
+}
+
+.position-fixed {
+  position: fixed !important;
+}
+
+.position-sticky {
+  position: sticky !important;
+}
+
+// Border utilities
+.border {
+  border: 1px solid var(--border-color) !important;
+}
+
+.border-top {
+  border-top: 1px solid var(--border-color) !important;
+}
+
+.border-right {
+  border-right: 1px solid var(--border-color) !important;
+}
+
+.border-bottom {
+  border-bottom: 1px solid var(--border-color) !important;
+}
+
+.border-left {
+  border-left: 1px solid var(--border-color) !important;
+}
+
+.border-0 {
+  border: 0 !important;
+}
+
+.border-top-0 {
+  border-top: 0 !important;
+}
+
+.border-right-0 {
+  border-right: 0 !important;
+}
+
+.border-bottom-0 {
+  border-bottom: 0 !important;
+}
+
+.border-left-0 {
+  border-left: 0 !important;
+}
+
+// Rounded utilities
+.rounded {
+  border-radius: var(--border-radius) !important;
+}
+
+.rounded-lg {
+  border-radius: var(--border-radius-lg) !important;
+}
+
+.rounded-circle {
+  border-radius: 50% !important;
+}
+
+.rounded-0 {
+  border-radius: 0 !important;
+}
+
+.rounded-top {
+  border-top-left-radius: var(--border-radius) !important;
+  border-top-right-radius: var(--border-radius) !important;
+}
+
+.rounded-bottom {
+  border-bottom-left-radius: var(--border-radius) !important;
+  border-bottom-right-radius: var(--border-radius) !important;
+}
+
+.rounded-left {
+  border-top-left-radius: var(--border-radius) !important;
+  border-bottom-left-radius: var(--border-radius) !important;
+}
+
+.rounded-right {
+  border-top-right-radius: var(--border-radius) !important;
+  border-bottom-right-radius: var(--border-radius) !important;
+}
+
+// Shadow utilities
+.shadow-none {
+  box-shadow: none !important;
+}
+
+.shadow-sm {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) !important;
+}
+
+.shadow {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+}
+
+.shadow-lg {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
+}

package/src/scss/variables/_base.scss

@@ -0,0 +1,81 @@
+// ============================================================================
+// BASE CSS VARIABLES - Source of Truth for Web Components
+// ============================================================================
+// These $base-* SCSS variables are converted to --base-* CSS custom properties
+// by the output-base-css-variables mixin in themes. Web components like
+// web-daterangepicker and web-multiselect consume these via fallback chains.
+// ============================================================================
+
+@use 'sass:color';
+@use 'layout' as *;
+@use 'typography' as *;
+@use 'spacing' as *;
+@use 'colors' as *;
+@use 'system' as *;
+@use 'components' as *;
+
+// --- Colors ---
+$base-accent-color: $accent-color !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: $accent-light !default;  // Light variant for badge backgrounds
+$base-accent-color-light-hover: rgba($base-accent-color, 0.12) !default;  // Slightly more opaque on hover
+$base-primary-bg: $card-bg !default;
+$base-primary-bg-hover: color.adjust($base-primary-bg, $lightness: -5%) !default;
+$base-text-color-1: $text-primary !default;
+$base-text-color-2: $text-secondary !default;
+$base-text-color-3: color.mix($text-primary, $card-bg, 60%) !default;
+$base-text-color-4: color.mix($text-primary, $card-bg, 40%) !default;
+$base-text-color-on-accent: #ffffff !default;
+$base-border-color: $border-color !default;
+// Generic border (full shorthand)
+$base-border: 1px solid $base-border-color !default;
+
+// --- Input Fields ---
+$base-input-bg: $input-bg !default;
+$base-input-color: $input-text !default;
+$base-input-border: 1px solid $input-border !default;
+$base-input-border-hover: 1px solid color.adjust($input-border, $lightness: -10%) !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($input-bg, 0.5) !default;
+
+// --- Input Size Heights (unitless multipliers × 10px) ---
+$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
+
+// Command palette input height (must be after $base-input-size-* variables)
+$command-palette-input-height: #{$base-input-size-lg-height}rem !default;  // 38px (lg size)
+
+// --- Dropdown/Popover ---
+$base-dropdown-bg: $card-bg !default;
+$base-dropdown-border: 1px solid $border-color !default;
+$base-dropdown-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !default;
+
+// --- Tooltip ---
+$base-tooltip-bg: $tooltip-bg !default;
+$base-tooltip-text-color: $tooltip-text !default;
+
+// --- Typography (unitless multipliers for × 10px base) ---
+$base-font-family: $body-font-family !default;
+$base-font-size-2xs: 1.0 !default;   // × 10px = 10px
+$base-font-size-xs: 1.2 !default;    // × 10px = 12px
+$base-font-size-sm: 1.4 !default;    // × 10px = 14px
+$base-font-size-base: 1.6 !default;  // × 10px = 16px
+$base-font-size-lg: 1.8 !default;    // × 10px = 18px
+$base-font-size-xl: 2.0 !default;    // × 10px = 20px
+$base-font-size-2xl: 2.4 !default;   // × 10px = 24px
+$base-font-weight-normal: $font-weight-normal !default;
+$base-font-weight-medium: $font-weight-medium !default;
+$base-font-weight-semibold: $font-weight-semibold !default;
+$base-line-height-tight: $line-height-tight !default;
+$base-line-height-normal: $line-height-base !default;
+$base-line-height-relaxed: $line-height-relaxed !default;
+
+// --- Border Radius (unitless multipliers for × 10px base) ---
+$base-border-radius-sm: 0.4 !default;  // × 10px = 4px
+$base-border-radius-md: 0.6 !default;  // × 10px = 6px
+$base-border-radius-lg: 0.8 !default;  // × 10px = 8px

package/src/scss/variables/_colors.scss

@@ -0,0 +1,148 @@
+// ============================================================================
+// COLOR VARIABLES
+// Theme colors, button colors, contextual colors, component colors
+// ============================================================================
+
+// Default theme colors (will be overridden by themes)
+$primary-bg: #f8f9fa !default;
+$bg-secondary: #f8f9fa !default;
+$text-primary: #2c3e50 !default;
+$text-secondary: #6c757d !default;
+$border-color: #e1e5e9 !default;
+$header-bg: #ffffff !default;
+$header-border-color: #e1e5e9 !default;
+$header-text: $text-primary !default;
+$header-text-secondary: $text-secondary !default;
+$header-profile-name-color: $text-primary !default;
+$sidebar-bg: #f1f3f4 !default;
+$sidebar-text: $text-primary !default;
+$sidebar-text-secondary: $text-secondary !default;
+$sidebar-submenu-bg: #e8e8e8 !default;
+$sidebar-submenu-hover-bg: #d0d0d0 !default;
+$sidebar-submenu-active-bg: #c0c0c0 !default;
+$footer-bg: #ffffff !default;
+$footer-border-color: #e1e5e9 !default;
+$accent-color: #007bff !default;
+$accent-hover: rgba(0, 123, 255, 0.1) !default;
+$accent-light: rgba(0, 123, 255, 0.05) !default;
+$content-background-color: #ffffff !default;
+
+// Card colors
+$card-bg: #ffffff !default;
+$card-header-bg: #f8f9fa !default;
+$card-footer-bg: #ffffff !default;
+$card-tabs-bg: #f8f9fa !default;
+
+// Input colors
+$input-bg: #ffffff !default;
+$input-border: #ced4da !default;
+$input-text: #495057 !default;
+
+// Table colors
+$table-stripe: #f2f2f2 !default;
+$table-bg: #ffffff !default;
+$table-header-bg: #f8f9fa !default;
+$table-hover-bg: #f8f9fa !default;
+
+// Table row hover accent (border)
+$table-hover-accent-width: 0 !default;
+$table-hover-accent-color: $accent-color !default;
+$table-hover-accent-position: left !default;
+
+// Button colors
+$btn-primary-bg: #007bff !default;
+$btn-primary-bg-hover: #0056b3 !default;
+$btn-primary-text: #ffffff !default;
+$btn-secondary-bg: #6c757d !default;
+$btn-secondary-bg-hover: #545b62 !default;
+$btn-secondary-text: #ffffff !default;
+$btn-success-bg: #28a745 !default;
+$btn-success-bg-hover: #1e7e34 !default;
+$btn-success-text: #ffffff !default;
+$btn-danger-bg: #dc3545 !default;
+$btn-danger-bg-hover: #c82333 !default;
+$btn-danger-text: #ffffff !default;
+$btn-warning-bg: #ffc107 !default;
+$btn-warning-bg-hover: #e0a800 !default;
+$btn-warning-text: #212529 !default;
+$btn-warning-color: #212529 !default;
+$btn-info-bg: #17a2b8 !default;
+$btn-info-bg-hover: #117a8b !default;
+$btn-info-text: #ffffff !default;
+$btn-light-bg: #f8f9fa !default;
+$btn-light-bg-hover: #e2e6ea !default;
+$btn-light-text: #495057 !default;
+$btn-dark-bg: #343a40 !default;
+$btn-dark-bg-hover: #1d2124 !default;
+$btn-dark-text: #ffffff !default;
+
+// Contextual color system - Success (green)
+$success-bg: $btn-success-bg !default;
+$success-bg-hover: $btn-success-bg-hover !default;
+$success-bg-light: rgba(40, 167, 69, 0.1) !default;
+$success-bg-subtle: rgba(40, 167, 69, 0.08) !default;
+$success-border: rgba(40, 167, 69, 0.2) !default;
+$success-text: #155724 !default;
+$success-text-light: #d4edda !default;
+
+// Contextual color system - Danger (red)
+$danger-bg: $btn-danger-bg !default;
+$danger-bg-hover: $btn-danger-bg-hover !default;
+$danger-bg-light: rgba(220, 53, 69, 0.1) !default;
+$danger-bg-subtle: rgba(220, 53, 69, 0.08) !default;
+$danger-border: rgba(220, 53, 69, 0.2) !default;
+$danger-text: #721c24 !default;
+$danger-text-light: #f8d7da !default;
+
+// Contextual color system - Warning (yellow)
+$warning-bg: $btn-warning-bg !default;
+$warning-bg-hover: $btn-warning-bg-hover !default;
+$warning-bg-light: rgba(255, 193, 7, 0.1) !default;
+$warning-bg-subtle: rgba(255, 193, 7, 0.08) !default;
+$warning-border: rgba(255, 193, 7, 0.2) !default;
+$warning-text: #856404 !default;
+$warning-text-light: #fff3cd !default;
+
+// Contextual color system - Info (cyan)
+$info-bg: $btn-info-bg !default;
+$info-bg-hover: $btn-info-bg-hover !default;
+$info-bg-light: rgba(23, 162, 184, 0.1) !default;
+$info-bg-subtle: rgba(23, 162, 184, 0.08) !default;
+$info-border: rgba(23, 162, 184, 0.2) !default;
+$info-text: #0c5460 !default;
+$info-text-light: #d1ecf1 !default;
+
+// Contextual color system - Secondary (gray)
+$secondary-bg: $btn-secondary-bg !default;
+$secondary-bg-hover: $btn-secondary-bg-hover !default;
+$secondary-text: #383d41 !default;
+$secondary-light-bg: #e9ecef !default;
+$secondary-light-text: #495057 !default;
+$secondary-lighter-bg: #dee2e6 !default;
+
+// Tooltip colors
+$tooltip-bg: #2c3e50 !default;
+$tooltip-text: #ffffff !default;
+
+// Popover colors
+$popover-text-light: #ffffff !default;
+$popover-text-dark: #000000 !default;
+$popover-content-bg: #ffffff !default;
+
+// Code language colors
+$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
+$comparison-accent-pink: #ec4899 !default;
+$comparison-accent-orange: #f97316 !default;