@keenmate/pure-admin-core 1.0.0-rc01

package/src/scss/core-components/badges/_composite-badge-variants.scss

@@ -0,0 +1,396 @@
+/* ========================================
+   Composite Badge Variants
+   Color variations for composite badges
+   ======================================== */
+@use '../../variables' as *;
+@use "sass:color";
+
+.pa-composite-badge {
+  // Standard color variations - all sections match
+  &--primary {
+    .pa-composite-badge__icon {
+      background-color: $btn-primary-bg;
+      color: $btn-primary-text;
+    }
+    .pa-composite-badge__label {
+      background-color: $accent-light;
+      color: $btn-primary-bg;
+      &:hover {
+        background-color: $accent-hover;
+      }
+    }
+    .pa-composite-badge__button {
+      background-color: $btn-primary-bg;
+      color: $btn-primary-text;
+      &:hover {
+        background-color: $btn-primary-bg-hover;
+      }
+      &:focus {
+        box-shadow: 0 0 0 $focus-outline-width $accent-hover;
+      }
+    }
+  }
+
+  &--secondary {
+    .pa-composite-badge__icon {
+      background-color: $btn-secondary-bg;
+      color: $btn-secondary-text;
+    }
+    .pa-composite-badge__label {
+      background-color: $bg-secondary;
+      color: var(--pa-text-secondary);
+      &:hover {
+        background-color: $table-hover-bg;
+      }
+    }
+    .pa-composite-badge__button {
+      background-color: $btn-secondary-bg;
+      color: $btn-secondary-text;
+      &:hover {
+        background-color: $btn-secondary-bg-hover;
+      }
+      &:focus {
+        box-shadow: 0 0 0 $focus-outline-width $accent-hover;
+      }
+    }
+  }
+
+  &--success {
+    .pa-composite-badge__icon {
+      background-color: $btn-success-bg;
+      color: $btn-success-text;
+    }
+    .pa-composite-badge__label {
+      background-color: $badge-success-bg;
+      color: $badge-success-text;
+      &:hover {
+        background-color: color.adjust($badge-success-bg, $lightness: -5%);
+      }
+    }
+    .pa-composite-badge__button {
+      background-color: $btn-success-bg;
+      color: $btn-success-text;
+      &:hover {
+        background-color: $btn-success-bg-hover;
+      }
+      &:focus {
+        box-shadow: 0 0 0 $focus-outline-width $accent-hover;
+      }
+    }
+  }
+
+  &--danger {
+    .pa-composite-badge__icon {
+      background-color: $btn-danger-bg;
+      color: $btn-danger-text;
+    }
+    .pa-composite-badge__label {
+      background-color: $badge-danger-bg;
+      color: $badge-danger-text;
+      &:hover {
+        background-color: color.adjust($badge-danger-bg, $lightness: -5%);
+      }
+    }
+    .pa-composite-badge__button {
+      background-color: $btn-danger-bg;
+      color: $btn-danger-text;
+      &:hover {
+        background-color: $btn-danger-bg-hover;
+      }
+      &:focus {
+        box-shadow: 0 0 0 $focus-outline-width $accent-hover;
+      }
+    }
+  }
+
+  &--warning {
+    .pa-composite-badge__icon {
+      background-color: $btn-warning-bg;
+      color: $btn-warning-text;
+    }
+    .pa-composite-badge__label {
+      background-color: $badge-warning-bg;
+      color: $badge-warning-text;
+      &:hover {
+        background-color: color.adjust($badge-warning-bg, $lightness: -5%);
+      }
+    }
+    .pa-composite-badge__button {
+      background-color: $btn-warning-bg;
+      color: $btn-warning-text;
+      &:hover {
+        background-color: $btn-warning-bg-hover;
+      }
+      &:focus {
+        box-shadow: 0 0 0 $focus-outline-width $accent-hover;
+      }
+    }
+  }
+
+  &--info {
+    .pa-composite-badge__icon {
+      background-color: $btn-info-bg;
+      color: $btn-info-text;
+    }
+    .pa-composite-badge__label {
+      background-color: $badge-info-bg;
+      color: $badge-info-text;
+      &:hover {
+        background-color: color.adjust($badge-info-bg, $lightness: -5%);
+      }
+    }
+    .pa-composite-badge__button {
+      background-color: $btn-info-bg;
+      color: $btn-info-text;
+      &:hover {
+        background-color: $btn-info-bg-hover;
+      }
+      &:focus {
+        box-shadow: 0 0 0 $focus-outline-width $accent-hover;
+      }
+    }
+  }
+
+  &--light {
+    .pa-composite-badge__icon {
+      background-color: $btn-light-bg;
+      color: $btn-light-text;
+    }
+    .pa-composite-badge__label {
+      background-color: $header-bg;
+      color: $btn-light-text;
+      &:hover {
+        background-color: $btn-light-bg-hover;
+      }
+    }
+    .pa-composite-badge__button {
+      background-color: $btn-light-bg;
+      color: $btn-light-text;
+      &:hover {
+        background-color: $btn-light-bg-hover;
+      }
+      &:focus {
+        box-shadow: 0 0 0 $focus-outline-width $accent-hover;
+      }
+    }
+  }
+
+  &--dark {
+    .pa-composite-badge__icon {
+      background-color: $btn-dark-bg;
+      color: $btn-dark-text;
+    }
+    .pa-composite-badge__label {
+      background-color: $table-hover-bg;
+      color: var(--pa-text-primary);
+      &:hover {
+        background-color: $border-color;
+      }
+    }
+    .pa-composite-badge__button {
+      background-color: $btn-dark-bg;
+      color: $btn-dark-text;
+      &:hover {
+        background-color: $btn-dark-bg-hover;
+      }
+      &:focus {
+        box-shadow: 0 0 0 $focus-outline-width $accent-hover;
+      }
+    }
+  }
+
+  // Color variants for icon section only
+  &--primary &__icon {
+    background-color: $btn-primary-bg;
+  }
+
+  &--secondary &__icon {
+    background-color: $btn-secondary-bg;
+  }
+
+  &--success &__icon {
+    background-color: $btn-success-bg;
+  }
+
+  &--danger &__icon {
+    background-color: $btn-danger-bg;
+  }
+
+  &--warning &__icon {
+    background-color: $btn-warning-bg;
+    color: $btn-warning-color;
+  }
+
+  &--info &__icon {
+    background-color: $btn-info-bg;
+  }
+
+  &--light &__icon {
+    background-color: $btn-light-bg;
+    color: $btn-light-text;
+  }
+
+  &--dark &__icon {
+    background-color: $btn-dark-bg;
+  }
+
+  // Color variants for label section
+  &--label-primary &__label {
+    background-color: color.adjust($btn-primary-bg, $lightness: 40%);
+    color: color.adjust($btn-primary-bg, $lightness: -30%);
+
+    &:hover {
+      background-color: color.adjust($btn-primary-bg, $lightness: 35%);
+    }
+  }
+
+  &--label-secondary &__label {
+    background-color: color.adjust($btn-secondary-bg, $lightness: 35%);
+    color: $secondary-text;
+
+    &:hover {
+      background-color: color.adjust($btn-secondary-bg, $lightness: 30%);
+    }
+  }
+
+  &--label-success &__label {
+    background-color: $badge-success-bg;
+    color: $badge-success-text;
+
+    &:hover {
+      background-color: color.adjust($badge-success-bg, $lightness: -5%);
+    }
+  }
+
+  &--label-danger &__label {
+    background-color: $badge-danger-bg;
+    color: $badge-danger-text;
+
+    &:hover {
+      background-color: color.adjust($badge-danger-bg, $lightness: -5%);
+    }
+  }
+
+  &--label-warning &__label {
+    background-color: $badge-warning-bg;
+    color: $badge-warning-text;
+
+    &:hover {
+      background-color: color.adjust($badge-warning-bg, $lightness: -5%);
+    }
+  }
+
+  &--label-info &__label {
+    background-color: $badge-info-bg;
+    color: $badge-info-text;
+
+    &:hover {
+      background-color: color.adjust($badge-info-bg, $lightness: -5%);
+    }
+  }
+
+  &--label-light &__label {
+    background-color: color.adjust($btn-light-bg, $lightness: 2%);
+    color: $btn-light-text;
+
+    &:hover {
+      background-color: color.adjust($btn-secondary-bg, $lightness: 35%);
+    }
+  }
+
+  &--label-dark &__label {
+    background-color: color.adjust($btn-dark-bg, $lightness: 50%);
+    color: color.adjust($btn-dark-bg, $lightness: 5%);
+
+    &:hover {
+      background-color: color.adjust($btn-dark-bg, $lightness: 45%);
+    }
+  }
+
+  // Color variants for button section
+  &--btn-primary &__button {
+    background-color: $btn-primary-bg;
+
+    &:hover {
+      background-color: $btn-primary-bg-hover;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 $focus-outline-width rgba($btn-primary-bg, $btn-focus-ring-opacity);
+    }
+  }
+
+  &--btn-secondary &__button {
+    background-color: $btn-secondary-bg;
+
+    &:hover {
+      background-color: $btn-secondary-bg-hover;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 $focus-outline-width rgba($btn-secondary-bg, $btn-focus-ring-opacity);
+    }
+  }
+
+  &--btn-success &__button {
+    background-color: $btn-success-bg;
+
+    &:hover {
+      background-color: $btn-success-bg-hover;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 $focus-outline-width rgba($btn-success-bg, $btn-focus-ring-opacity);
+    }
+  }
+
+  &--btn-warning &__button {
+    background-color: $btn-warning-bg;
+    color: $btn-warning-color;
+
+    &:hover {
+      background-color: $btn-warning-bg-hover;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 $focus-outline-width rgba($btn-warning-bg, $btn-focus-ring-opacity);
+    }
+  }
+
+  &--btn-info &__button {
+    background-color: $btn-info-bg;
+
+    &:hover {
+      background-color: $btn-info-bg-hover;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 $focus-outline-width rgba($btn-info-bg, $btn-focus-ring-opacity);
+    }
+  }
+
+  &--btn-light &__button {
+    background-color: $btn-light-bg;
+    color: $btn-light-text;
+
+    &:hover {
+      background-color: $btn-light-bg-hover;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 $focus-outline-width rgba($btn-light-bg, $btn-focus-ring-opacity);
+    }
+  }
+
+  &--btn-dark &__button {
+    background-color: $btn-dark-bg;
+
+    &:hover {
+      background-color: $btn-dark-bg-hover;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 $focus-outline-width rgba($btn-dark-bg, $btn-focus-ring-opacity);
+    }
+  }
+}

package/src/scss/core-components/badges/_composite-badge.scss

@@ -0,0 +1,70 @@
+/* ========================================
+   Composite Badge
+   Multi-part badge with [icon][label][button] structure
+   ======================================== */
+@use '../../variables' as *;
+@use "sass:color";
+
+// Composite Badge - [icon][label][button]
+.pa-composite-badge {
+  display: inline-flex;
+  align-items: center;
+  height: $composite-badge-height;
+  font-size: $font-size-xs;
+  font-weight: $font-weight-medium;
+  border-radius: $border-radius;
+  overflow: hidden;
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $composite-badge-icon-width;
+    height: 100%;
+    flex-shrink: 0;
+    background-color: var(--pa-composite-badge-icon-bg);
+    color: var(--pa-btn-primary-text);
+    font-size: $font-size-sm;
+  }
+
+  &__label {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 $composite-badge-label-padding;
+    background-color: var(--pa-composite-badge-label-bg);
+    color: var(--pa-composite-badge-label-text);
+    cursor: pointer;
+    transition: background-color $transition-normal ease;
+    user-select: none;
+    min-width: $stat-icon-size;
+
+    &:hover {
+      background-color: var(--pa-composite-badge-label-hover-bg);
+    }
+  }
+
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $composite-badge-button-width;
+    height: 100%;
+    flex-shrink: 0;
+    background-color: var(--pa-danger-bg);
+    color: var(--pa-btn-danger-text);
+    border: none;
+    cursor: pointer;
+    transition: background-color $transition-normal ease;
+    font-size: $font-size-xs;
+
+    &:hover {
+      background-color: var(--pa-danger-bg-hover);
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 $focus-outline-width rgba($danger-bg, $btn-focus-ring-opacity);
+    }
+  }
+}

package/src/scss/core-components/badges/_index.scss

@@ -0,0 +1,10 @@
+/* ========================================
+   Badges Index
+   Central import point for all badge component modules
+   ======================================== */
+
+@forward 'badge-base';
+@forward 'composite-badge';
+@forward 'composite-badge-variants';
+@forward 'badge-group';
+@forward 'labels';

package/src/scss/core-components/badges/_labels.scss

@@ -0,0 +1,155 @@
+/* ========================================
+   Label Components
+   Tag-like labels with colors and sizes
+   ======================================== */
+@use '../../variables' as *;
+
+// Label Components
+.pa-label {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-xs;
+  padding: 0.4rem 0.8rem;         // Match badge default
+  background-color: var(--pa-accent-light);
+  color: var(--pa-text-primary);
+  font-size: $font-size-xs;       // 1.2rem (12px) - match badge default
+  font-weight: $font-weight-medium;
+  line-height: $line-height-tight;
+  text-decoration: none;
+  border-radius: $border-radius;
+  border: $border-width-base solid var(--pa-border-color);
+  transition: all $transition-fast $easing-snappy;
+
+  &:hover {
+    background-color: var(--pa-accent-hover);
+    text-decoration: none;
+  }
+
+  // Size variations (matching badge scale)
+  &--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)
+  }
+
+  // Style variations
+  &--outline {
+    background-color: transparent;
+    border: $border-width-base solid var(--pa-border-color);
+
+    &:hover {
+      background-color: var(--pa-accent-light);
+    }
+  }
+
+  // Color variations
+  &--primary {
+    background-color: var(--pa-accent-light);
+    color: var(--pa-accent);
+    border-color: var(--pa-accent);
+
+    &.pa-label--outline {
+      background-color: transparent;
+      color: var(--pa-accent);
+      border-color: var(--pa-accent);
+
+      &:hover {
+        background-color: var(--pa-accent-light);
+      }
+    }
+  }
+
+  &--secondary {
+    background-color: rgba($secondary-bg, $opacity-light);
+    color: $secondary-bg;
+    border-color: $secondary-bg;
+
+    &.pa-label--outline {
+      background-color: transparent;
+      color: $secondary-bg;
+      border-color: $secondary-bg;
+
+      &:hover {
+        background-color: rgba($secondary-bg, $opacity-light);
+      }
+    }
+  }
+
+  &--success {
+    background-color: var(--pa-success-bg-light);
+    color: var(--pa-success-bg);
+    border-color: var(--pa-success-bg);
+
+    &.pa-label--outline {
+      background-color: transparent;
+      color: var(--pa-success-bg);
+      border-color: var(--pa-success-bg);
+
+      &:hover {
+        background-color: var(--pa-success-bg-light);
+      }
+    }
+  }
+
+  &--warning {
+    background-color: var(--pa-warning-bg-light);
+    color: var(--pa-warning-bg);
+    border-color: var(--pa-warning-bg);
+
+    &.pa-label--outline {
+      background-color: transparent;
+      color: var(--pa-warning-bg);
+      border-color: var(--pa-warning-bg);
+
+      &:hover {
+        background-color: var(--pa-warning-bg-light);
+      }
+    }
+  }
+
+  &--danger {
+    background-color: var(--pa-danger-bg-light);
+    color: var(--pa-danger-bg);
+    border-color: var(--pa-danger-bg);
+
+    &.pa-label--outline {
+      background-color: transparent;
+      color: var(--pa-danger-bg);
+      border-color: var(--pa-danger-bg);
+
+      &:hover {
+        background-color: var(--pa-danger-bg-light);
+      }
+    }
+  }
+
+  &--info {
+    background-color: var(--pa-info-bg-light);
+    color: var(--pa-info-bg);
+    border-color: var(--pa-info-bg);
+
+    &.pa-label--outline {
+      background-color: transparent;
+      color: var(--pa-info-bg);
+      border-color: var(--pa-info-bg);
+
+      &:hover {
+        background-color: var(--pa-info-bg-light);
+      }
+    }
+  }
+}