@keenmate/pure-admin-core 2.3.1 → 2.3.2

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

@@ -293,7 +293,7 @@ html.font-size-xlarge {
     margin-bottom: $spacing-sm;
     background-color: var(--pa-card-bg);
     border: $border-width-base solid var(--pa-border-color);
-    border-radius: $border-radius;
+    border-radius: var(--pa-border-radius);
 
     .user-name {
       font-weight: $font-weight-medium;

package/src/scss/core-components/_web-components-theme.scss

@@ -1,21 +1,21 @@
-/* Pure Admin - Web Components Theme Integration
- * Maps Pure Admin SCSS variables to web component CSS custom properties
- *
- * @keenmate/web-multiselect: Uses --base-* variables from _base-css-variables.scss
- * @keenmate/web-daterangepicker: Uses --base-* variables from _base-css-variables.scss
- *
- * NOTE: Both components use the --base-* CSS variable system with built-in fallback chains:
- *   1. External override: --ms-accent-color: #custom
- *   2. Theme base value: var(--base-accent-color)
- *   3. Hardcoded default: #3b82f6
- *
- * This means Pure Admin only needs to set --base-* variables (via the
- * output-base-css-variables mixin) and the components will automatically
- * pick up the theme colors.
- */
-
-/* Web Multiselect - Group label styling */
-web-multiselect {
-  --ms-group-label-color: var(--base-text-color-1);
-  --ms-group-label-font-weight: 600;
-}
+/* Pure Admin - Web Components Theme Integration
+ * Maps Pure Admin SCSS variables to web component CSS custom properties
+ *
+ * @keenmate/web-multiselect: Uses --base-* variables from _base-css-variables.scss
+ * @keenmate/web-daterangepicker: Uses --base-* variables from _base-css-variables.scss
+ *
+ * NOTE: Both components use the --base-* CSS variable system with built-in fallback chains:
+ *   1. External override: --ms-accent-color: #custom
+ *   2. Theme base value: var(--base-accent-color)
+ *   3. Hardcoded default: #3b82f6
+ *
+ * This means Pure Admin only needs to set --base-* variables (via the
+ * output-base-css-variables mixin) and the components will automatically
+ * pick up the theme colors.
+ */
+
+/* Web Multiselect - Group label styling */
+web-multiselect {
+  --ms-group-label-color: var(--base-text-color-1);
+  --ms-group-label-font-weight: 600;
+}

package/src/scss/core-components/badges/_badge-base.scss

@@ -1,121 +1,121 @@
-/* ========================================
-   Badge Base
-   Core badge component with sizes, colors, and modifiers
-   ======================================== */
-@use '../../variables' as *;
-
-// Badge Components
-.pa-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: $spacing-xs;
-  padding: $spacing-xs $spacing-sm;
-  background-color: var(--pa-btn-secondary-bg);
-  color: var(--pa-btn-secondary-text);
-  font-size: $font-size-xs;
-
-  line-height: 1;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  border-radius: $border-radius;
-  border: $border-width-base solid transparent;
-  transition: all $transition-fast $easing-snappy;
-
-  &__icon {
-    font-size: $font-size-2xs;
-    line-height: 1;
-  }
-
-  // Size variations
-  &--xs {
-    padding: 0.2rem 0.4rem;
-    font-size: $font-size-2xs;  // 1rem (10px)
-  }
-
-  &--sm {
-    padding: 0.25rem 0.5rem;
-    font-size: $font-size-xs;   // 1.2rem (12px)
-  }
-
-  &--lg {
-    padding: 0.5rem 1rem;
-    font-size: $font-size-sm;   // 1.4rem (14px)
-  }
-
-  &--xl {
-    padding: 0.6rem 1.2rem;
-    font-size: $font-size-base; // 1.6rem (16px)
-  }
-
-  // Shape variations
-  &--pill {
-    border-radius: $badge-pill-radius;
-  }
-
-  // Color variations
-  &--primary {
-    background-color: var(--pa-btn-primary-bg);
-    color: var(--pa-btn-primary-text);
-    border-color: var(--pa-btn-primary-bg);
-  }
-
-  &--secondary {
-    background-color: var(--pa-btn-secondary-bg);
-    color: var(--pa-btn-secondary-text);
-    border-color: var(--pa-btn-secondary-bg);
-  }
-
-  &--success {
-    background-color: var(--pa-btn-success-bg);
-    color: var(--pa-btn-success-text);
-    border-color: var(--pa-btn-success-bg);
-  }
-
-  &--warning {
-    background-color: var(--pa-btn-warning-bg);
-    color: var(--pa-btn-warning-text);
-    border-color: var(--pa-btn-warning-bg);
-  }
-
-  &--danger {
-    background-color: var(--pa-btn-danger-bg);
-    color: var(--pa-btn-danger-text);
-    border-color: var(--pa-btn-danger-bg);
-  }
-
-  &--info {
-    background-color: var(--pa-btn-info-bg);
-    color: var(--pa-btn-info-text);
-    border-color: var(--pa-btn-info-bg);
-  }
-
-  &--light {
-    background-color: var(--pa-btn-light-bg);
-    color: var(--pa-btn-light-text);
-    border-color: var(--pa-btn-light-bg);
-  }
-
-  &--dark {
-    background-color: var(--pa-btn-dark-bg);
-    color: var(--pa-btn-dark-text);
-    border-color: var(--pa-btn-dark-bg);
-  }
-
-  // When truncation is needed, switch from inline-flex to inline-block
-  // (text-overflow: ellipsis doesn't work on flex containers)
-  &.text-truncate {
-    display: inline-block;
-  }
-
-  // Start-side ellipsis for paths/hierarchies where end is important
-  &--ellipsis-start {
-    direction: rtl;
-    text-align: left;
-
-    [dir="rtl"] & {
-      direction: ltr;
-      text-align: right;
-    }
-  }
-}
+/* ========================================
+   Badge Base
+   Core badge component with sizes, colors, and modifiers
+   ======================================== */
+@use '../../variables' as *;
+
+// Badge Components
+.pa-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-xs;
+  padding: $spacing-xs $spacing-sm;
+  background-color: var(--pa-btn-secondary-bg);
+  color: var(--pa-btn-secondary-text);
+  font-size: $font-size-xs;
+
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: var(--pa-border-radius);
+  border: $border-width-base solid transparent;
+  transition: all $transition-fast $easing-snappy;
+
+  &__icon {
+    font-size: $font-size-2xs;
+    line-height: 1;
+  }
+
+  // Size variations
+  &--xs {
+    padding: 0.2rem 0.4rem;
+    font-size: $font-size-2xs;  // 1rem (10px)
+  }
+
+  &--sm {
+    padding: 0.25rem 0.5rem;
+    font-size: $font-size-xs;   // 1.2rem (12px)
+  }
+
+  &--lg {
+    padding: 0.5rem 1rem;
+    font-size: $font-size-sm;   // 1.4rem (14px)
+  }
+
+  &--xl {
+    padding: 0.6rem 1.2rem;
+    font-size: $font-size-base; // 1.6rem (16px)
+  }
+
+  // Shape variations
+  &--pill {
+    border-radius: 50rem;
+  }
+
+  // Color variations
+  &--primary {
+    background-color: var(--pa-btn-primary-bg);
+    color: var(--pa-btn-primary-text);
+    border-color: var(--pa-btn-primary-bg);
+  }
+
+  &--secondary {
+    background-color: var(--pa-btn-secondary-bg);
+    color: var(--pa-btn-secondary-text);
+    border-color: var(--pa-btn-secondary-bg);
+  }
+
+  &--success {
+    background-color: var(--pa-btn-success-bg);
+    color: var(--pa-btn-success-text);
+    border-color: var(--pa-btn-success-bg);
+  }
+
+  &--warning {
+    background-color: var(--pa-btn-warning-bg);
+    color: var(--pa-btn-warning-text);
+    border-color: var(--pa-btn-warning-bg);
+  }
+
+  &--danger {
+    background-color: var(--pa-btn-danger-bg);
+    color: var(--pa-btn-danger-text);
+    border-color: var(--pa-btn-danger-bg);
+  }
+
+  &--info {
+    background-color: var(--pa-btn-info-bg);
+    color: var(--pa-btn-info-text);
+    border-color: var(--pa-btn-info-bg);
+  }
+
+  &--light {
+    background-color: var(--pa-btn-light-bg);
+    color: var(--pa-btn-light-text);
+    border-color: var(--pa-btn-light-bg);
+  }
+
+  &--dark {
+    background-color: var(--pa-btn-dark-bg);
+    color: var(--pa-btn-dark-text);
+    border-color: var(--pa-btn-dark-bg);
+  }
+
+  // When truncation is needed, switch from inline-flex to inline-block
+  // (text-overflow: ellipsis doesn't work on flex containers)
+  &.text-truncate {
+    display: inline-block;
+  }
+
+  // Start-side ellipsis for paths/hierarchies where end is important
+  &--ellipsis-start {
+    direction: rtl;
+    text-align: left;
+
+    [dir="rtl"] & {
+      direction: ltr;
+      text-align: right;
+    }
+  }
+}

package/src/scss/core-components/badges/_badge-group.scss

@@ -1,25 +1,25 @@
-/* ========================================
-   Badge Group
-   Container for grouped badges with visibility limits
-   ======================================== */
-@use '../../variables' as *;
-
-// Badge Group - limits visible badges and shows "more" indicator
-.pa-badge-group {
-  display: inline-flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: $badge-group-gap;
-
-  // Hide badges beyond the limit
-  .pa-badge:nth-child(n+#{$badge-group-visible-limit + 1}):not(:last-child) {
-    display: none;
-  }
-
-  // Show all badges without limit
-  &--show-all {
-    .pa-badge:nth-child(n+#{$badge-group-visible-limit + 1}):not(:last-child) {
-      display: inline-flex;
-    }
-  }
-}
+/* ========================================
+   Badge Group
+   Container for grouped badges with visibility limits
+   ======================================== */
+@use '../../variables' as *;
+
+// Badge Group - limits visible badges and shows "more" indicator
+.pa-badge-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: $badge-group-gap;
+
+  // Hide badges beyond the limit
+  .pa-badge:nth-child(n+#{$badge-group-visible-limit + 1}):not(:last-child) {
+    display: none;
+  }
+
+  // Show all badges without limit
+  &--show-all {
+    .pa-badge:nth-child(n+#{$badge-group-visible-limit + 1}):not(:last-child) {
+      display: inline-flex;
+    }
+  }
+}