@keenmate/pure-admin-core 1.0.0-rc01

package/src/scss/_purecss-grid.scss

@@ -0,0 +1,58 @@
+/*!
+Pure v3.0.0 - Grid System Only (Minimal Extract)
+Copyright 2013 Yahoo!
+Licensed under the BSD License.
+https://github.com/pure-css/pure/blob/master/LICENSE
+*/
+
+/* Grid Container */
+.pure-g {
+  display: flex;
+  flex-flow: row wrap;
+  align-content: flex-start;
+}
+
+/* Base Grid Unit */
+.pure-u {
+  display: inline-block;
+  vertical-align: top;
+}
+
+/* Grid Units - All Widths */
+.pure-u-1, .pure-u-1-1, .pure-u-1-12, .pure-u-1-2, .pure-u-1-24, .pure-u-1-3, .pure-u-1-4, .pure-u-1-5, .pure-u-1-6, .pure-u-1-8, .pure-u-10-24, .pure-u-11-12, .pure-u-11-24, .pure-u-12-24, .pure-u-13-24, .pure-u-14-24, .pure-u-15-24, .pure-u-16-24, .pure-u-17-24, .pure-u-18-24, .pure-u-19-24, .pure-u-2-24, .pure-u-2-3, .pure-u-2-5, .pure-u-20-24, .pure-u-21-24, .pure-u-22-24, .pure-u-23-24, .pure-u-24-24, .pure-u-3-24, .pure-u-3-4, .pure-u-3-5, .pure-u-3-8, .pure-u-4-24, .pure-u-4-5, .pure-u-5-12, .pure-u-5-24, .pure-u-5-5, .pure-u-5-6, .pure-u-5-8, .pure-u-6-24, .pure-u-7-12, .pure-u-7-24, .pure-u-7-8, .pure-u-8-24, .pure-u-9-24 {
+  display: inline-block;
+  letter-spacing: normal;
+  word-spacing: normal;
+  vertical-align: top;
+  text-rendering: auto;
+}
+
+/* Width Classes */
+.pure-u-1-24 { width: 4.1667%; }
+.pure-u-1-12, .pure-u-2-24 { width: 8.3333%; }
+.pure-u-1-8, .pure-u-3-24 { width: 12.5%; }
+.pure-u-1-6, .pure-u-4-24 { width: 16.6667%; }
+.pure-u-1-5 { width: 20%; }
+.pure-u-5-24 { width: 20.8333%; }
+.pure-u-1-4, .pure-u-6-24 { width: 25%; }
+.pure-u-7-24 { width: 29.1667%; }
+.pure-u-1-3, .pure-u-8-24 { width: 33.3333%; }
+.pure-u-3-8, .pure-u-9-24 { width: 37.5%; }
+.pure-u-2-5 { width: 40%; }
+.pure-u-10-24, .pure-u-5-12 { width: 41.6667%; }
+.pure-u-11-24 { width: 45.8333%; }
+.pure-u-1-2, .pure-u-12-24 { width: 50%; }
+.pure-u-13-24 { width: 54.1667%; }
+.pure-u-14-24, .pure-u-7-12 { width: 58.3333%; }
+.pure-u-3-5 { width: 60%; }
+.pure-u-15-24, .pure-u-5-8 { width: 62.5%; }
+.pure-u-16-24, .pure-u-2-3 { width: 66.6667%; }
+.pure-u-17-24 { width: 70.8333%; }
+.pure-u-18-24, .pure-u-3-4 { width: 75%; }
+.pure-u-19-24 { width: 79.1667%; }
+.pure-u-4-5 { width: 80%; }
+.pure-u-20-24, .pure-u-5-6 { width: 83.3333%; }
+.pure-u-21-24, .pure-u-7-8 { width: 87.5%; }
+.pure-u-11-12, .pure-u-22-24 { width: 91.6667%; }
+.pure-u-23-24 { width: 95.8333%; }
+.pure-u-1, .pure-u-1-1, .pure-u-24-24, .pure-u-5-5 { width: 100%; }

package/src/scss/_variables.scss

@@ -0,0 +1,14 @@
+/* Pure Admin Visual Framework - SCSS Variables Only */
+/* NOTE: 10px rem base - all rem values are now in 10px units (1rem = 10px) */
+
+// ============================================================================
+// BACKWARD COMPATIBILITY AGGREGATOR
+// This file re-exports all variables from the modular variables/ directory.
+// For new code, prefer importing from variables/ directly:
+//   @use 'variables' as *;
+// or specific modules:
+//   @use 'variables/colors' as colors;
+//   @use 'variables/layout' as layout;
+// ============================================================================
+
+@forward 'variables/index';

package/src/scss/core-components/_alerts.scss

@@ -0,0 +1,212 @@
+/* ========================================
+   Alert Components
+   Alerts with variants, sizes, dismissible functionality
+   ======================================== */
+@use '../variables' as *;
+
+// Alerts
+.pa-alert {
+  position: relative;
+  padding: $card-footer-padding-v $card-footer-padding-h;
+  margin-bottom: $spacing-base;
+  border: $border-width-base solid transparent;
+  border-radius: $border-radius;
+  font-size: $font-size-sm;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+
+  // Remove margins when first/last child in card body
+  .pa-card__body &:first-child {
+    margin-top: 0;
+  }
+  .pa-card__body &:last-child {
+    margin-bottom: 0;
+  }
+  gap: $spacing-sm;
+
+  // Basic alert variants - using theme colors with subtle backgrounds
+  &--primary {
+    color: var(--pa-accent);
+    background-color: rgba($accent-color, $opacity-subtle);
+    border-color: rgba($accent-color, $opacity-border);
+  }
+
+  &--secondary {
+    color: var(--pa-text-secondary);
+    background-color: color-mix(in srgb, var(--pa-text-secondary) 15%, transparent);
+    border-color: var(--pa-border-color);
+  }
+
+  &--success {
+    color: var(--pa-alert-success-text);
+    background-color: var(--pa-alert-success-bg);
+    border-color: var(--pa-alert-success-border);
+  }
+
+  &--danger {
+    color: var(--pa-alert-danger-text);
+    background-color: var(--pa-alert-danger-bg);
+    border-color: var(--pa-alert-danger-border);
+    text-transform: $alert-danger-text-transform;
+  }
+
+  &--warning {
+    color: var(--pa-alert-warning-text);
+    background-color: var(--pa-alert-warning-bg);
+    border-color: var(--pa-alert-warning-border);
+  }
+
+  &--info {
+    color: var(--pa-alert-info-text);
+    background-color: var(--pa-alert-info-bg);
+    border-color: var(--pa-alert-info-border);
+  }
+
+  &--light {
+    color: var(--pa-text-primary);
+    background-color: color-mix(in srgb, var(--pa-text-primary) 5%, transparent);
+    border-color: var(--pa-border-color);
+  }
+
+  &--dark {
+    color: var(--pa-text-primary);
+    background-color: color-mix(in srgb, var(--pa-text-primary) 5%, transparent);
+    border-color: color-mix(in srgb, var(--pa-text-primary) 10%, transparent);
+  }
+
+  // Outline variants
+  &--outline-primary {
+    color: var(--pa-accent);
+    border-color: var(--pa-accent);
+    background-color: transparent;
+  }
+
+  &--outline-success {
+    color: var(--pa-success-bg);
+    border-color: var(--pa-success-bg);
+    background-color: transparent;
+  }
+
+  &--outline-danger {
+    color: var(--pa-danger-bg);
+    border-color: var(--pa-danger-bg);
+    background-color: transparent;
+  }
+
+  &--outline-warning {
+    color: var(--pa-warning-bg);
+    border-color: var(--pa-warning-bg);
+    background-color: transparent;
+  }
+
+  &--outline-info {
+    color: var(--pa-info-bg);
+    border-color: var(--pa-info-bg);
+    background-color: transparent;
+  }
+
+  // Alert sizes (size modifiers only change font-size, padding controlled by theme)
+  &--sm {
+    padding: $alert-padding-v $alert-padding-h;
+    font-size: $font-size-sm;
+  }
+
+  &--lg {
+    padding: $alert-padding-v $alert-padding-h;
+    font-size: $font-size-base;
+  }
+
+  // Dismissible alerts
+  &--dismissible {
+    padding-right: $alert-dismissible-padding-right;
+  }
+
+  // Alert components
+  &__icon {
+    flex-shrink: 0;
+    font-size: $font-size-base;
+    line-height: 1;
+  }
+
+  &__content {
+    flex: 1;
+  }
+
+  &__heading {
+    margin: 0 0 $spacing-sm 0;
+    color: inherit;
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+  }
+
+  &__list {
+    margin: $spacing-sm 0;
+    padding-left: $alert-list-padding-left;
+  }
+
+  &__actions {
+    margin-top: $alert-list-item-margin-top;
+    display: flex;
+    gap: $spacing-sm;
+  }
+
+  &__close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: $focus-outline-width;
+    padding: $card-footer-padding-v $card-footer-padding-h;
+    background: none;
+    border: none;
+    font-size: $font-size-xl;
+    line-height: 1;
+    color: inherit;
+    cursor: pointer;
+    opacity: $alert-close-opacity;
+    transition: opacity $transition-fast $easing-snappy;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:focus {
+      outline: none;
+      opacity: 1;
+    }
+  }
+
+  // Remove margin from last child
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  // Links styling
+  a {
+    color: inherit;
+    text-decoration: underline;
+    font-weight: $font-weight-semibold;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  // Headings inside alerts
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: inherit;
+  }
+
+  // Horizontal rule
+  hr {
+    margin: $spacing-sm 0;
+    border: 0;
+    border-top: $border-width-base solid rgba(0, 0, 0, $opacity-light);
+  }
+}
+

package/src/scss/core-components/_badges.scss

@@ -0,0 +1,16 @@
+/* ========================================
+   Badge Components
+   Standard badges, composite badges, and label components
+   ======================================== */
+
+// ============================================================================
+// BACKWARD COMPATIBILITY AGGREGATOR
+// This file re-exports all badge components from the modular badges/ directory.
+// For new code, prefer importing from badges/ directly:
+//   @use 'badges' as *;
+// or specific modules:
+//   @use 'badges/badge-base';
+//   @use 'badges/composite-badge';
+// ============================================================================
+
+@forward 'badges/index';

package/src/scss/core-components/_base.scss

@@ -0,0 +1,124 @@
+/* ========================================
+   Reset and Base Styles
+   ======================================== */
+@use '../variables' as *;
+
+// 10px rem base for intuitive sizing (1rem = 10px)
+// This makes calculations simple: 1.5rem = 15px, 3.5rem = 35px
+html {
+  font-size: 10px;
+}
+
+// Reset and base styles
+* {
+  box-sizing: border-box;
+}
+
+// Standard HTML element spacing (using framework variables)
+// Headings
+h1, h2, h3, h4, h5, h6 {
+  margin: $heading-margin-top 0 $heading-margin-bottom 0;
+  padding: 0;
+}
+
+// Paragraphs
+p {
+  margin: $paragraph-margin-top 0 $paragraph-margin-bottom 0;
+  padding: 0;
+}
+
+// Lists - styled lists (default browser styling)
+ul, ol {
+  margin: $list-margin-top 0 $list-margin-bottom 0;
+  padding: 0 0 0 $list-padding-left;
+
+  li {
+    margin-bottom: $list-item-margin-bottom;
+  }
+}
+
+// Lists - unstyled (for navigation, etc.)
+ul.unstyled, ol.unstyled {
+  list-style: none;
+  padding-left: 0;
+
+  li {
+    margin-bottom: 0;
+  }
+}
+
+// Definition lists
+dl {
+  margin: $list-margin-top 0 $list-margin-bottom 0;
+  padding: 0;
+}
+
+dd {
+  margin: 0;
+  padding: 0;
+}
+
+// Blockquote
+blockquote {
+  margin: $blockquote-margin-top 0 $blockquote-margin-bottom 0;
+  padding: 0 0 0 $blockquote-padding-left;
+}
+
+// Pre/Code blocks
+pre {
+  overflow-x: auto;
+}
+
+// Horizontal rule
+hr {
+  margin: $hr-margin-top 0 $hr-margin-bottom 0;
+}
+
+// Figure
+figure {
+  margin: $figure-margin-top 0 $figure-margin-bottom 0;
+  padding: 0;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: $body-font-family;
+  font-size: 1.6rem; // 16px default text (with 10px rem base)
+  color: var(--pa-text-primary);
+  background-color: var(--pa-primary-bg);
+  line-height: $line-height-base;
+  overflow-x: hidden; // Hide horizontal scrollbar when sidebar slides out on mobile
+  overflow-y: scroll; // Always show vertical scrollbar gutter to prevent layout shift
+
+  // Background pattern for constrained layouts
+  &::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background:
+      radial-gradient(circle at $bg-pattern-circle-1-x $bg-pattern-circle-1-y, rgba($accent-color, $bg-pattern-opacity) $bg-pattern-gradient-start, transparent $bg-pattern-gradient-stop),
+      radial-gradient(circle at $bg-pattern-circle-2-x $bg-pattern-circle-2-y, rgba($accent-color, $bg-pattern-opacity) $bg-pattern-gradient-start, transparent $bg-pattern-gradient-stop);
+    pointer-events: none;
+    z-index: -1;
+  }
+}
+
+// Sticky sidebar mode: Prevent body scroll, let containers handle it
+body.sidebar-sticky {
+  overflow: hidden;
+  height: 100vh;
+}
+
+// Ensure form elements and labels inherit theme font and size instead of browser defaults
+button,
+input,
+select,
+textarea,
+label {
+  font-family: inherit;
+  font-size: inherit;
+}