feat(component): Add Tag component

.bundlewatch.config.json

@@ -6,7 +6,7 @@
     },
     {
       "path": "./dist/css/ouds-web-bootstrap.min.css",
-      "maxSize": "63.0 kB"
+      "maxSize": "63.25 kB"
     },
     {
       "path": "./dist/css/ouds-web-grid.css",

scss/_tag.scss

@@ -0,0 +1,189 @@
+.tag {
+  --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-default};
+  --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-default};
+  --#{$prefix}tag-color: #{$ouds-color-content-on-status-neutral-emphasized};
+  --#{$prefix}tag-border-width: 0px;
+  --#{$prefix}tag-background-color: #{$ouds-color-surface-status-neutral-emphasized};
+  --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-default};
+  --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-default};
+  --#{$prefix}tag-padding-asset: #{$ouds-tag-space-padding-inline-asset-default};
+  --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-default};
+  --#{$prefix}tag-asset-container-size: #{$ouds-tag-size-asset-default};
+  --#{$prefix}tag-asset-padding: #{$ouds-tag-space-inset-icon-default};
+  --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-default};
+  --#{$prefix}tag-asset-color: currentcolor;
+  --#{$prefix}tag-loading-dasharray: 92;
+  --#{$prefix}tag-loading-animation: 2.1875s infinite linear rotate1-indeterminate, 1.25s linear infinite rotate2-indeterminate;
+
+  position: relative;
+  display: inline-flex;
+  gap: var(--#{$prefix}tag-asset-gap);
+  align-items: center;
+  justify-content: center;
+  min-width: var(--#{$prefix}tag-min-width);
+  min-height: var(--#{$prefix}tag-min-height);
+  padding: subtract(var(--#{$prefix}tag-padding-y), var(--#{$prefix}tag-border-width)) subtract(var(--#{$prefix}tag-padding-end), var(--#{$prefix}tag-border-width)) subtract(var(--#{$prefix}tag-padding-y), var(--#{$prefix}tag-border-width)) subtract(var(--#{$prefix}tag-padding-start), var(--#{$prefix}tag-border-width));
+  margin: 0;
+  font-weight: 700;
+  color: var(--#{$prefix}tag-color);
+  white-space: nowrap;
+  vertical-align: text-bottom; // TODO alignment to check with text in <p>
+  background-color: var(--#{$prefix}tag-background-color);
+  @include get-font-size("label-medium");
+  @include border-radius($ouds-tag-border-radius);
+
+  &:has(.tag-asset-container) {
+    --#{$prefix}tag-padding-start: var(--#{$prefix}tag-padding-asset);
+  }
+}
+
+.tag-asset-container {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  width: var(--#{$prefix}tag-asset-container-size);
+  height: var(--#{$prefix}tag-asset-container-size);
+  padding: var(--#{$prefix}tag-asset-padding);
+
+  svg,
+  img,
+  .icon {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    line-height: 1;
+    color: var(--#{$prefix}tag-asset-color);
+  }
+
+  &:has(.tag-bullet) {
+    --#{$prefix}tag-asset-padding: #{$ouds-tag-space-inset-bullet-default};
+  }
+
+  &:has(.tag-loader) {
+    --#{$prefix}tag-asset-padding: #{$ouds-tag-space-inset-loader-default};
+  }
+}
+
+.tag-bullet {
+  width: 100%;
+  height: 100%;
+  background-color: var(--#{$prefix}tag-asset-color);
+  @include border-radius(#{$ouds-tag-border-radius});
+}
+
+.tag-loader { // TODO copied from button loader, should be factorized
+  --#{$prefix}tag-asset-color: currentcolor;
+
+  display: block;
+  margin: 0;
+  font-size: var(--#{$prefix}tag-asset-container-size);
+  transform: rotate(-90deg);
+
+  > .tag-loader-inner {
+    fill: none;
+    stroke: var(--#{$prefix}tag-asset-color);
+    stroke-dasharray: var(--#{$prefix}tag-loading-dasharray);
+    stroke-width: 8;
+    transform-origin: center;
+    animation: var(--#{$prefix}tag-loading-animation);
+  }
+}
+
+.tag-disabled { // TODO: [aria-disabled="true"] ?
+  --#{$prefix}tag-color: #{$ouds-color-content-on-action-disabled};
+  --#{$prefix}tag-background-color: #{$ouds-color-action-disabled};
+}
+
+.tag.text-bg-status-accent-muted {
+  --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-accent-emphasized};
+}
+
+.tag.text-bg-status-positive-muted {
+  --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-positive-emphasized};
+}
+
+.tag.text-bg-status-info-muted {
+  --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-info-emphasized};
+}
+
+.tag.text-bg-status-warning-muted {
+  --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-warning-emphasized};
+}
+
+.tag.text-bg-status-negative-muted {
+  --#{$prefix}tag-asset-color: #{$ouds-color-surface-status-negative-emphasized};
+}
+
+.tag-sm {
+  --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-small};
+  --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-small};
+  --#{$prefix}tag-padding-start-asset: #{$ouds-tag-space-padding-inline-asset-small};
+  --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-small};
+  --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-small};
+  --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-small};
+  --#{$prefix}tag-asset-container-size: #{$ouds-tag-size-asset-small};
+  --#{$prefix}tag-bullet-padding: #{$ouds-tag-space-inset-bullet-small};
+  --#{$prefix}tag-icon-padding: #{$ouds-tag-space-inset-icon-small};
+  --#{$prefix}tag-loader-padding: #{$ouds-tag-space-inset-loader-small};
+  --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-small};
+  @include get-font-size("label-small");
+}
+
+.tag-input {
+  --#{$prefix}tag-color: #{$ouds-tag-input-color-content-enabled};
+  --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-enabled};
+  --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-enabled};
+  --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default};
+  --#{$prefix}tag-padding-end: var(--#{$prefix}tag-padding-asset);
+
+  margin: calc(($ouds-tag-size-min-height-interactive-area - var(--#{$prefix}tag-min-height)) / 2) 0; // stylelint-disable-line function-disallowed-list
+  border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color);
+
+  &::before {
+    position: absolute;
+    top: calc(-.5 * ($ouds-tag-size-min-height-interactive-area - var(--bs-tag-min-height)) - var(--#{$prefix}tag-border-width)); // stylelint-disable-line function-disallowed-list
+    right: calc(-1 * var(--#{$prefix}tag-border-width)); // stylelint-disable-line function-disallowed-list
+    bottom: calc(-.5 * ($ouds-tag-size-min-height-interactive-area - var(--bs-tag-min-height)) - var(--#{$prefix}tag-border-width)); // stylelint-disable-line function-disallowed-list
+    left: calc(-1 * var(--#{$prefix}tag-border-width)); // stylelint-disable-line function-disallowed-list
+    content: "";
+  }
+
+  &::after {
+    width: var(--#{$prefix}tag-asset-container-size);
+    height: var(--#{$prefix}tag-asset-container-size);
+    content: "";
+    background-color: currentcolor;
+    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><path d='M500 83.333 416.667 0 250 166.667 83.333 0 0 83.333 166.667 250 0 416.667 83.333 500 250 333.333 416.667 500 500 416.667 333.333 250z' transform='translate(250 250)'/></svg>");
+  }
+
+  &:hover {
+    --#{$prefix}tag-color: #{$ouds-tag-input-color-content-hover};
+    --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-hover};
+    --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-hover};
+    --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction};
+  }
+
+  &:active {
+    --#{$prefix}tag-color: #{$ouds-tag-input-color-content-pressed};
+    --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-pressed};
+    --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-pressed};
+    --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction};
+  }
+
+  &:focus-visible {
+    --#{$prefix}tag-color: #{$ouds-tag-input-color-content-focus};
+    --#{$prefix}tag-background-color: #{$ouds-tag-input-color-bg-focus};
+    --#{$prefix}tag-border-color: #{$ouds-tag-input-color-border-focus};
+    --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default-interaction};
+  }
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    --#{$prefix}tag-color: #{$ouds-color-action-disabled};
+    --#{$prefix}tag-background-color: #{$ouds-color-content-on-action-disabled};
+    --#{$prefix}tag-border-color: #{$ouds-color-action-disabled};
+    --#{$prefix}tag-border-width: #{$ouds-tag-input-border-width-default};
+
+    pointer-events: none;
+  }
+}

scss/_variables.scss

@@ -2244,44 +2244,6 @@ $footer-gap:                              $spacer * .75 !default;
 $footer-gap-xl:                           $spacer * 1.7 !default;
 // scss-docs-end footer
 
-
-// Tags
-
-// scss-docs-start tag-variables
-$tag-color:                         var(--#{$prefix}body-color) !default;
-$tag-bg:                            var(--#{$prefix}body-bg) !default;
-
-$tag-gap:                           map-get($spacers, 1) !default;
-$tag-font-shift:                    $spacer * .1 !default;
-$tag-font-weight:                   $font-weight-bold !default;
-$tag-border-width:                  var(--#{$prefix}border-width) !default;
-$tag-border-radius:                 var(--#{$prefix}border-radius-pill) !default;
-
-$tag-padding-x:                     $spacer * .65 !default;
-$tag-padding-y:                     $spacer * .45 !default;
-$tag-icon-size:                     $spacer * 1.2 !default;
-$tag-icon-margin-start:             -$spacer * .35 !default;
-$tag-close-margin-end:              -$spacer * .3 !default;
-$tag-close-margin-start:            $spacer * .2 !default;
-$tag-font-size:                     $font-size-base !default;
-
-$tag-active-color:                  var(--#{$prefix}highlight-color) !default;
-$tag-disabled-color:                var(--#{$prefix}color-content-disabled) !default;
-$tag-border-color:                  var(--#{$prefix}color-border-default) !default;
-$tag-active-decoration-color:       var(--#{$prefix}highlight-bg) !default;
-// scss-docs-end tag-variables
-
-// scss-docs-start tag-sm-variables
-$tag-padding-x-sm:                  $spacer * .4 !default;
-$tag-padding-y-sm:                  $spacer * .25 !default;
-$tag-icon-size-sm:                  $spacer !default;
-$tag-icon-margin-start-sm:          -$spacer * .1 !default;
-$tag-close-margin-end-sm:           -$spacer * .25 !default;
-$tag-close-margin-start-sm:         0 !default;
-$tag-font-size-sm:                  $font-size-sm !default;
-// scss-docs-end tag-sm-variables
-
-
 // Local navigation
 
 // scss-docs-start local-nav-variables

scss/ouds-web.scss

@@ -39,7 +39,7 @@
 @import "breadcrumb";
 @import "pagination";
 @import "badge";
-@import "tags";
+@import "tag";
 @import "alert";
 @import "progress";
 @import "list-group";