@coreui/coreui 5.5.0 → 5.6.0

package/scss/_chip.scss

@@ -0,0 +1,261 @@
+@use "sass:map";
+@use "mixins/border-radius" as *;
+@use "mixins/chip" as *;
+@use "mixins/focus-ring" as *;
+@use "mixins/transition" as *;
+@use "variables" as *;
+
+// scss-docs-start chip-variables
+$chip-font-size:             .875rem !default;
+$chip-font-weight:           $font-weight-normal !default;
+$chip-height:                1.75rem !default;
+$chip-padding-x:             .625rem !default;
+$chip-gap:                   .3125rem !default;
+$chip-border-radius:         var(--#{$prefix}border-radius-pill) !default;
+$chip-icon-size:             1rem !default;
+$chip-img-size:              1.25rem !default;
+$chip-img-border-radius:     50% !default;
+$chip-remove-size:           1rem !default;
+$chip-remove-opacity:        .65 !default;
+$chip-remove-hover-opacity:  1 !default;
+$chip-transition:            background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, color .15s ease-in-out !default;
+
+$chip-color:                 var(--#{$prefix}body-color) !default;
+$chip-bg:                    var(--#{$prefix}secondary-bg) !default;
+$chip-border-width:          var(--#{$prefix}border-width) !default;
+$chip-border-color:          transparent !default;
+
+$chip-active-color:          rgba($white, .87) !default;
+$chip-active-bg:             var(--#{$prefix}primary) !default;
+$chip-active-border-color:   transparent !default;
+
+$chip-hover-color:           $chip-color !default;
+$chip-hover-bg:              color-mix(in srgb, var(--#{$prefix}secondary-bg) 95%, #000) !default;
+$chip-hover-border-color:    transparent !default;
+
+$chip-font-size-sm:          .75rem !default;
+$chip-height-sm:             1.5rem !default;
+$chip-padding-x-sm:          .625rem !default;
+$chip-gap-sm:                .25rem !default;
+$chip-icon-size-sm:          .875rem !default;
+$chip-img-size-sm:           1rem !default;
+$chip-remove-size-sm:        .875rem !default;
+
+$chip-font-size-lg:          1rem !default;
+$chip-height-lg:             2rem !default;
+$chip-padding-x-lg:          .75rem !default;
+$chip-gap-lg:                .375rem !default;
+$chip-icon-size-lg:          1.25rem !default;
+$chip-img-size-lg:           1.5rem !default;
+$chip-remove-size-lg:        1.25rem !default;
+// scss-docs-end chip-variables
+
+.chip {
+  // scss-docs-start chip-css-vars
+  --#{$prefix}chip-height: #{$chip-height};
+  --#{$prefix}chip-padding-x: #{$chip-padding-x};
+  --#{$prefix}chip-gap: #{$chip-gap};
+  --#{$prefix}chip-font-size: #{$chip-font-size};
+  --#{$prefix}chip-font-weight: #{$chip-font-weight};
+  --#{$prefix}chip-border-radius: #{$chip-border-radius};
+  --#{$prefix}chip-img-size: #{$chip-img-size};
+  --#{$prefix}chip-img-border-radius: #{$chip-img-border-radius};
+  --#{$prefix}chip-icon-size: #{$chip-icon-size};
+  --#{$prefix}chip-remove-size: #{$chip-remove-size};
+  --#{$prefix}chip-remove-opacity: #{$chip-remove-opacity};
+  --#{$prefix}chip-remove-hover-opacity: #{$chip-remove-hover-opacity};
+  --#{$prefix}chip-transition: #{$chip-transition};
+
+  --#{$prefix}chip-color: var(--#{$prefix}text-emphasis, #{$chip-color});
+  --#{$prefix}chip-bg: var(--#{$prefix}bg-subtle, #{$chip-bg});
+  --#{$prefix}chip-border-width: #{$chip-border-width};
+  --#{$prefix}chip-border-color: #{$chip-border-color};
+
+  --#{$prefix}chip-active-color: var(--#{$prefix}contrast, #{$chip-active-color});
+  --#{$prefix}chip-active-bg: var(--#{$prefix}color, #{$chip-active-bg});
+  --#{$prefix}chip-active-border-color: #{$chip-active-border-color};
+
+  --#{$prefix}chip-hover-color: var(--#{$prefix}contrast, #{$chip-hover-color});
+  --#{$prefix}chip-hover-bg: var(--#{$prefix}color, #{$chip-hover-bg});
+  --#{$prefix}chip-hover-border-color: #{$chip-hover-border-color};
+  // scss-docs-end chip-css-vars
+
+  display: inline-flex;
+  gap: var(--#{$prefix}chip-gap);
+  align-items: center;
+  height: var(--#{$prefix}chip-height);
+  padding-inline: var(--#{$prefix}chip-padding-x);
+  font-size: var(--#{$prefix}chip-font-size);
+  font-weight: var(--#{$prefix}chip-font-weight);
+  color: var(--#{$prefix}chip-color);
+  text-decoration: none;
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: var(--#{$prefix}chip-bg);
+  border: var(--#{$prefix}chip-border-width) solid var(--#{$prefix}chip-border-color);
+  @include border-radius(var(--#{$prefix}chip-border-radius));
+  @include transition(var(--#{$prefix}chip-transition));
+
+  &.active {
+    color: var(--#{$prefix}chip-active-color);
+    background-color: var(--#{$prefix}chip-active-bg);
+    border-color: var(--#{$prefix}chip-active-border-color);
+  }
+
+  &.disabled,
+  &:disabled {
+    pointer-events: none;
+    opacity: .65;
+  }
+
+  &:focus-visible {
+    @include focus-ring();
+  }
+
+  .avatar {
+    --#{$prefix}avatar-width: var(--#{$prefix}chip-img-size);
+    --#{$prefix}avatar-height: var(--#{$prefix}chip-img-size);
+
+    font-size: inherit;
+
+    &:first-child {
+      margin-inline-start: -.375rem;
+    }
+  }
+}
+
+.chip-outline {
+  // scss-docs-start chip-outline-css-vars
+  --#{$prefix}chip-color: var(--#{$prefix}color, var(--#{$prefix}body-color));
+  --#{$prefix}chip-bg: transparent;
+  --#{$prefix}chip-border-color: var(--#{$prefix}color, var(--#{$prefix}border-color));
+  --#{$prefix}chip-hover-bg: var(--#{$prefix}bg-subtle, #{$chip-hover-bg});
+  --#{$prefix}chip-hover-color: var(--#{$prefix}text-emphasis, #{$chip-color});
+  --#{$prefix}chip-hover-border-color: var(--#{$prefix}color, var(--#{$prefix}border-color));
+  --#{$prefix}chip-active-bg: var(--#{$prefix}color, #{$chip-active-bg});
+  --#{$prefix}chip-active-color: var(--#{$prefix}contrast, #{$chip-active-color});
+  // scss-docs-end chip-outline-css-vars
+}
+
+.chip-clickable {
+  cursor: pointer;
+
+  &:hover {
+    color: var(--#{$prefix}chip-hover-color);
+    background-color: var(--#{$prefix}chip-hover-bg);
+    border-color: var(--#{$prefix}chip-hover-border-color);
+  }
+
+  &.active:hover {
+    color: var(--#{$prefix}chip-active-color);
+    background-color: var(--#{$prefix}chip-active-bg);
+    opacity: .9;
+  }
+}
+
+.chip-img {
+  width: var(--#{$prefix}chip-img-size);
+  height: var(--#{$prefix}chip-img-size);
+  @include border-radius(var(--#{$prefix}chip-img-border-radius));
+
+  &:first-child {
+    margin-inline-start: -.375rem;
+  }
+}
+
+.chip-icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  margin-inline-start: calc(var(--#{$prefix}chip-gap) * -.25); // stylelint-disable-line function-disallowed-list
+
+  > svg {
+    display: block; // Prevents baseline alignment issues
+    width: var(--#{$prefix}chip-icon-size);
+    height: var(--#{$prefix}chip-icon-size);
+  }
+
+  > img {
+    width: var(--#{$prefix}chip-icon-size);
+    height: var(--#{$prefix}chip-icon-size);
+    object-fit: cover;
+    @include border-radius(var(--#{$prefix}chip-img-border-radius));
+  }
+}
+
+.chip-remove {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--#{$prefix}chip-min-height);
+  height: var(--#{$prefix}chip-min-height);
+  padding: 0;
+  margin-inline-end: calc(var(--#{$prefix}chip-padding-x) * -.25); // stylelint-disable-line function-disallowed-list
+  color: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  opacity: var(--#{$prefix}chip-remove-opacity);
+  @include transition(opacity .15s ease-in-out);
+
+  &:hover {
+    opacity: var(--#{$prefix}chip-remove-hover-opacity);
+  }
+
+  &:focus-visible {
+    outline: 0;
+    opacity: 1;
+    @include focus-ring();
+  }
+
+  > svg {
+    display: block; // Prevents baseline alignment issues
+    width: var(--#{$prefix}chip-remove-size);
+    height: var(--#{$prefix}chip-remove-size);
+  }
+}
+
+//
+// Chip sizes
+//
+
+.chip-lg,
+.chip-input-lg .chip {
+  @include chip-size(
+    $chip-height-lg,
+    $chip-padding-x-lg,
+    $chip-gap-lg,
+    $chip-font-size-lg,
+    $chip-icon-size-lg,
+    $chip-img-size-lg,
+    $chip-remove-size-lg
+  );
+}
+
+.chip-sm,
+.chip-input-sm .chip {
+  @include chip-size(
+    $chip-height-sm,
+    $chip-padding-x-sm,
+    $chip-gap-sm,
+    $chip-font-size-sm,
+    $chip-icon-size-sm,
+    $chip-img-size-sm,
+    $chip-remove-size-sm
+  );
+}
+
+// scss-docs-start chip-modifiers
+@each $state in map.keys($theme-colors) {
+  .chip-#{$state} {
+    --#{$prefix}bg-subtle: var(--#{$prefix}#{$state}-bg-subtle);
+    --#{$prefix}color: var(--#{$prefix}#{$state});
+    --#{$prefix}color-rgb: var(--#{$prefix}#{$state}-rgb);
+    --#{$prefix}contrast: var(--#{$prefix}#{$state}-contrast);
+    --#{$prefix}text-emphasis: var(--#{$prefix}#{$state}-text-emphasis);
+    --#{$prefix}focus-ring-color: rgba(var(--#{$prefix}#{$state}-rgb), var(--#{$prefix}focus-ring-opacity));
+  }
+}
+// scss-docs-end chip-modifiers

package/scss/_forms.scss

@@ -1,3 +1,4 @@
+@forward "forms/chip-input";
 @forward "forms/labels";
 @forward "forms/form-text";
 @forward "forms/form-control";

package/scss/_maps.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "functions/color" as *;
+@use "functions/color-contrast" as *;
 @use "functions/maps" as *;
 @use "functions/to-rgb" as *;
 @use "variables" as *;
@@ -52,6 +53,19 @@ $theme-colors-border-subtle: (
 ) !default;
 // scss-docs-end theme-border-subtle-map
 
+// scss-docs-start theme-contrast-map
+$theme-colors-contrast: (
+  "primary": color-contrast($primary),
+  "secondary": color-contrast($secondary),
+  "success": color-contrast($success),
+  "info": color-contrast($info),
+  "warning": color-contrast($warning),
+  "danger": color-contrast($danger),
+  "light": color-contrast($light),
+  "dark": color-contrast($dark),
+) !default;
+// scss-docs-end theme-contrast-map
+
 $theme-colors-rgb-dark: null !default;
 $theme-colors-text-dark: null !default;
 $theme-colors-bg-subtle-dark: null !default;

package/scss/_root.scss

@@ -43,6 +43,10 @@
     --#{$prefix}#{$color}-border-subtle: #{$value};
   }
 
+  @each $color, $value in $theme-colors-contrast {
+    --#{$prefix}#{$color}-contrast: #{$value};
+  }
+
   --#{$prefix}white-rgb: #{to-rgb($white)};
   --#{$prefix}black-rgb: #{to-rgb($black)};
 
@@ -154,6 +158,7 @@
   --#{$prefix}focus-ring-width: #{$focus-ring-width};
   --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
   --#{$prefix}focus-ring-color: #{$focus-ring-color};
+  --#{$prefix}focus-ring-blur: #{$focus-ring-blur};
   // scss-docs-end root-focus-variables
 
   // scss-docs-start root-form-validation-variables

package/scss/coreui.scss

@@ -39,6 +39,7 @@
 @forward "spinners";
 @forward "offcanvas";
 @forward "placeholders";
+@forward "chip";
 
 @forward "avatar";
 @forward "callout";

package/scss/forms/_chip-input.import.scss

@@ -0,0 +1 @@
+@forward "chip-input";

package/scss/forms/_chip-input.scss

@@ -0,0 +1,109 @@
+@use "../mixins/border-radius" as *;
+@use "../mixins/box-shadow" as *;
+@use "../mixins/focus-ring" as *;
+@use "../mixins/transition" as *;
+@use "../vendor/rfs" as *;
+@use "../variables" as *;
+
+// scss-docs-start chip-input-variables
+$chip-input-min-height:        $input-height !default;
+$chip-input-padding-y:         .25rem !default;
+$chip-input-padding-x:         .75rem !default;
+$chip-input-font-size:         $input-font-size !default;
+$chip-input-bg:                var(--#{$prefix}body-bg) !default;
+$chip-input-color:             var(--#{$prefix}body-color) !default;
+$chip-input-border-width:      var(--#{$prefix}border-width) !default;
+$chip-input-border-color:      var(--#{$prefix}border-color) !default;
+$chip-input-border-radius:     var(--#{$prefix}border-radius) !default;
+$chip-input-gap:               .375rem !default;
+$chip-input-transition:        $input-transition !default;
+
+$chip-input-min-height-sm:     $input-height-sm !default;
+$chip-input-padding-y-sm:      .125rem !default;
+$chip-input-padding-x-sm:      .5rem !default;
+$chip-input-font-size-sm:      $input-font-size-sm !default;
+$chip-input-border-radius-sm:  var(--#{$prefix}border-radius-sm) !default;
+$chip-input-gap-sm:            .125rem !default;
+
+$chip-input-min-height-lg:     $input-height-lg !default;
+$chip-input-padding-y-lg:      .375rem !default;
+$chip-input-padding-x-lg:      1rem !default;
+$chip-input-font-size-lg:      $input-font-size-lg !default;
+$chip-input-border-radius-lg:  var(--#{$prefix}border-radius-lg) !default;
+$chip-input-gap-lg:            .5rem !default;
+// scss-docs-end chip-input-variables
+
+.chip-input {
+  // scss-docs-start chip-input-css-vars
+  --#{$prefix}chip-input-min-height: #{$chip-input-min-height};
+  --#{$prefix}chip-input-padding-y: #{$chip-input-padding-y};
+  --#{$prefix}chip-input-padding-x: #{$chip-input-padding-x};
+  --#{$prefix}chip-input-font-size: #{$chip-input-font-size};
+  --#{$prefix}chip-input-bg: #{$chip-input-bg};
+  --#{$prefix}chip-input-color: #{$chip-input-color};
+  --#{$prefix}chip-input-border-width: #{$chip-input-border-width};
+  --#{$prefix}chip-input-border-color: #{$chip-input-border-color};
+  --#{$prefix}chip-input-border-radius: #{$chip-input-border-radius};
+  --#{$prefix}chip-input-gap: #{$chip-input-gap};
+  --#{$prefix}chip-input-transition: #{$chip-input-transition};
+  // scss-docs-end chip-input-css-vars
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--#{$prefix}chip-input-gap);
+  align-items: center;
+  min-height: var(--#{$prefix}chip-input-min-height);
+  padding: var(--#{$prefix}chip-input-padding-y) var(--#{$prefix}chip-input-padding-x);
+  @include font-size(var(--#{$prefix}chip-input-font-size));
+  color: var(--#{$prefix}chip-input-color);
+  background-color: var(--#{$prefix}chip-input-bg);
+  border: var(--#{$prefix}chip-input-border-width) solid var(--#{$prefix}chip-input-border-color);
+  @include border-radius(var(--#{$prefix}chip-input-border-radius), 0);
+  @include transition(var(--#{$prefix}chip-input-transition));
+
+  // Focus state when ghost input is focused
+  &:focus-within {
+    border-color: $input-focus-border-color;
+    @include focus-ring();
+  }
+
+  // Disabled state
+  &.disabled {
+    background-color: $input-disabled-bg;
+    opacity: 1;
+
+    > .chip {
+      opacity: .65;
+
+      .chip-dismiss {
+        pointer-events: none;
+      }
+    }
+  }
+}
+
+.chip-input-field {
+  flex: 1 1 auto;
+  margin: 0;
+  border: 0;
+  outline: 0;
+}
+
+// Sizing variants
+.chip-input-lg {
+  --#{$prefix}chip-input-min-height: #{$chip-input-min-height-lg};
+  --#{$prefix}chip-input-padding-y: #{$chip-input-padding-y-lg};
+  --#{$prefix}chip-input-padding-x: #{$chip-input-padding-x-lg};
+  --#{$prefix}chip-input-border-radius: #{$chip-input-border-radius-lg};
+  --#{$prefix}chip-input-font-size: #{$chip-input-font-size-lg};
+  --#{$prefix}chip-input-gap: #{$chip-input-gap-lg};
+}
+
+.chip-input-sm {
+  --#{$prefix}chip-input-min-height: #{$chip-input-min-height-sm};
+  --#{$prefix}chip-input-padding-y: #{$chip-input-padding-y-sm};
+  --#{$prefix}chip-input-padding-x: #{$chip-input-padding-x-sm};
+  --#{$prefix}chip-input-border-radius: #{$chip-input-border-radius-sm};
+  --#{$prefix}chip-input-font-size: #{$chip-input-font-size-sm};
+  --#{$prefix}chip-input-gap: #{$chip-input-gap-sm};
+}

package/scss/mixins/_chip.scss

@@ -0,0 +1,14 @@
+@use "../vendor/rfs" as *;
+@use "../variables" as *;
+
+// scss-docs-start chip-mixin
+@mixin chip-size($height, $padding-x, $chip-gap, $font-size, $img-size, $icon-size, $dismiss-size) {
+  --#{$prefix}chip-height: #{$height};
+  --#{$prefix}chip-padding-x: #{$padding-x};
+  --#{$prefix}chip-gap: #{$chip-gap};
+  @include rfs($font-size, --#{$prefix}chip-font-size);
+  --#{$prefix}chip-img-size: #{$img-size};
+  --#{$prefix}chip-icon-size: #{$icon-size};
+  --#{$prefix}chip-dismiss-size: #{$dismiss-size};
+}
+// scss-docs-end chip-mixin

package/scss/mixins/_focus-ring.scss

@@ -0,0 +1,9 @@
+@use "../variables" as *;
+
+@mixin focus-ring($color: null) {
+  @if $color != null {
+    --#{$prefix}focus-ring-color: #{$color};
+  }
+  outline: 0;
+  box-shadow: 0 0 var(--#{$prefix}focus-ring-blur) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
+}