@carbon/styles 1.52.0 → 1.53.0

package/scss/components/tag/_tag.scss

@@ -31,20 +31,20 @@
             xs: convert.to-rem(18px),
             sm: convert.to-rem(18px),
             md: convert.to-rem(24px),
+            lg: convert.to-rem(32px),
           ),
         ),
       )
     );
 
-    @include layout.use('size', $default: 'md', $min: 'sm', $max: 'md');
-
+    @include layout.use('size', $default: 'md', $min: 'sm', $max: 'lg');
     @include type-style('label-01');
     @include tag-theme($tag-background-gray, $tag-color-gray, $tag-hover-gray);
 
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: convert.to-rem(15px);
+    border-radius: convert.to-rem(16px);
     margin: $spacing-02;
     cursor: default;
     // restricts size of contained elements
@@ -56,20 +56,118 @@
     vertical-align: middle;
     word-break: break-word;
 
+    &.#{$prefix}--tag--lg {
+      padding-inline-start: $spacing-04;
+    }
+
+    &:has(.#{$prefix}--tag__custom-icon) {
+      padding-inline-start: $spacing-02;
+    }
+
+    &.#{$prefix}--tag--lg:not(.#{$prefix}--tag--filter) {
+      padding-inline: $spacing-04;
+    }
+
+    &.#{$prefix}--tag--lg:has(.#{$prefix}--tag__custom-icon) {
+      padding-inline-start: $spacing-03;
+    }
+
     &:not(:first-child) {
       margin-inline-start: 0;
     }
   }
 
+  .#{$prefix}--tag__label {
+    overflow: hidden;
+    max-inline-size: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .#{$prefix}--tag--interactive:focus {
+    box-shadow: inset 0 0 0 1px $focus;
+    outline: none;
+  }
+
+  .#{$prefix}--tag--interactive:hover {
+    cursor: pointer;
+  }
+
+  // tags used for filtering
+  .#{$prefix}--tag--filter {
+    cursor: pointer;
+    padding-block-end: 0;
+    padding-block-start: 0;
+    padding-inline-end: 0;
+
+    &:hover {
+      outline: none;
+    }
+  }
+
+  .#{$prefix}--interactive--tag-children {
+    display: inline-flex;
+    place-items: center;
+  }
+
+  .#{$prefix}--tag--selectable {
+    border: 1px solid $border-inverse;
+    background-color: $layer;
+    color: $text-primary;
+    cursor: pointer;
+
+    &:hover {
+      background-color: $layer-hover;
+      outline: none;
+    }
+
+    &:focus {
+      outline: 2px solid $focus;
+      outline-offset: 1px;
+    }
+  }
+
+  .#{$prefix}--tag--selectable-selected {
+    background-color: $layer-selected-inverse;
+    color: $text-inverse;
+
+    &:hover {
+      background-color: $layer-selected-inverse;
+    }
+  }
+
+  .#{$prefix}--tag--operational {
+    border: 1px solid $tag-border-gray;
+    background-color: $tag-background-gray;
+    color: $tag-color-gray;
+    cursor: pointer;
+
+    &:hover {
+      background-color: $tag-hover-gray;
+      outline: none;
+    }
+
+    &:focus {
+      outline: 2px solid $focus;
+      outline-offset: 1px;
+    }
+  }
+
   .#{$prefix}--tag--red {
-    @include tag-theme($tag-background-red, $tag-color-red, $tag-hover-red);
+    @include tag-theme(
+      $tag-background-red,
+      $tag-color-red,
+      $tag-hover-red,
+      $tag-border-red
+    );
   }
 
   .#{$prefix}--tag--magenta {
     @include tag-theme(
       $tag-background-magenta,
       $tag-color-magenta,
-      $tag-hover-magenta
+      $tag-hover-magenta,
+      $tag-border-magenta
     );
   }
 
@@ -77,39 +175,62 @@
     @include tag-theme(
       $tag-background-purple,
       $tag-color-purple,
-      $tag-hover-purple
+      $tag-hover-purple,
+      $tag-border-purple
     );
   }
 
   .#{$prefix}--tag--blue {
-    @include tag-theme($tag-background-blue, $tag-color-blue, $tag-hover-blue);
+    @include tag-theme(
+      $tag-background-blue,
+      $tag-color-blue,
+      $tag-hover-blue,
+      $tag-border-blue
+    );
   }
 
   .#{$prefix}--tag--cyan {
-    @include tag-theme($tag-background-cyan, $tag-color-cyan, $tag-hover-cyan);
+    @include tag-theme(
+      $tag-background-cyan,
+      $tag-color-cyan,
+      $tag-hover-cyan,
+      $tag-border-cyan
+    );
   }
 
   .#{$prefix}--tag--teal {
-    @include tag-theme($tag-background-teal, $tag-color-teal, $tag-hover-teal);
+    @include tag-theme(
+      $tag-background-teal,
+      $tag-color-teal,
+      $tag-hover-teal,
+      $tag-border-teal
+    );
   }
 
   .#{$prefix}--tag--green {
     @include tag-theme(
       $tag-background-green,
       $tag-color-green,
-      $tag-hover-green
+      $tag-hover-green,
+      $tag-border-green
     );
   }
 
   .#{$prefix}--tag--gray {
-    @include tag-theme($tag-background-gray, $tag-color-gray, $tag-hover-gray);
+    @include tag-theme(
+      $tag-background-gray,
+      $tag-color-gray,
+      $tag-hover-gray,
+      $tag-border-gray
+    );
   }
 
   .#{$prefix}--tag--cool-gray {
     @include tag-theme(
       $tag-background-cool-gray,
       $tag-color-cool-gray,
-      $tag-hover-cool-gray
+      $tag-hover-cool-gray,
+      $tag-border-cool-gray
     );
   }
 
@@ -117,11 +238,12 @@
     @include tag-theme(
       $tag-background-warm-gray,
       $tag-color-warm-gray,
-      $tag-hover-warm-gray
+      $tag-hover-warm-gray,
+      $tag-border-warm-gray
     );
   }
 
-  .#{$prefix}--tag--high-contrast {
+  .#{$prefix}--tag--high-contrast:not(.#{$prefix}--tag--operational) {
     @include tag-theme(
       $background-inverse,
       $text-inverse,
@@ -129,10 +251,11 @@
     );
   }
 
-  .#{$prefix}--tag--outline {
+  .#{$prefix}--tag--outline:not(.#{$prefix}--tag--operational) {
     @include tag-theme($background, $text-primary, $layer-hover);
 
-    box-shadow: 0 0 0 1px $background-inverse;
+    outline: 1px solid $background-inverse;
+    outline-offset: -1px;
   }
 
   .#{$prefix}--tag--disabled,
@@ -147,31 +270,15 @@
     }
   }
 
-  .#{$prefix}--tag__label {
-    overflow: hidden;
-    max-inline-size: 100%;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .#{$prefix}--tag--interactive:focus {
-    box-shadow: inset 0 0 0 1px $focus;
-    outline: none;
-  }
-
-  .#{$prefix}--tag--interactive:hover {
-    cursor: pointer;
-  }
-
-  // tags used for filtering
-  .#{$prefix}--tag--filter {
-    cursor: pointer;
-    padding-block-end: 0;
-    padding-block-start: 0;
-    padding-inline-end: 0;
+  .#{$prefix}--tag--selectable.#{$prefix}--tag--disabled,
+  .#{$prefix}--tag--operational.#{$prefix}--tag--disabled {
+    border: 1px solid $border-disabled;
+    background-color: $layer;
+    color: $text-disabled;
 
     &:hover {
-      outline: none;
+      background-color: $layer;
+      cursor: not-allowed;
     }
   }
 
@@ -222,6 +329,7 @@
   }
 
   .#{$prefix}--tag__close-icon:focus {
+    z-index: 99999;
     border-radius: 50%;
     box-shadow: inset 0 0 0 1px $focus;
     outline: none;

package/scss/components/tag/_tokens.scss

@@ -617,6 +617,226 @@ $tag-hover-cool-gray: (
   ),
 ) !default;
 
+$tag-border-gray: (
+  fallback: map.get(tag.$tag-border-gray, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(tag.$tag-border-gray, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(tag.$tag-border-gray, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(tag.$tag-border-gray, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(tag.$tag-border-gray, g-100),
+    ),
+  ),
+) !default;
+
+$tag-border-red: (
+  fallback: map.get(tag.$tag-border-red, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(tag.$tag-border-red, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(tag.$tag-border-red, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(tag.$tag-border-red, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(tag.$tag-border-red, g-100),
+    ),
+  ),
+) !default;
+
+$tag-border-blue: (
+  fallback: map.get(tag.$tag-border-blue, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(tag.$tag-border-blue, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(tag.$tag-border-blue, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(tag.$tag-border-blue, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(tag.$tag-border-blue, g-100),
+    ),
+  ),
+) !default;
+
+$tag-border-cyan: (
+  fallback: map.get(tag.$tag-border-cyan, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(tag.$tag-border-cyan, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(tag.$tag-border-cyan, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(tag.$tag-border-cyan, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(tag.$tag-border-cyan, g-100),
+    ),
+  ),
+) !default;
+
+$tag-border-teal: (
+  fallback: map.get(tag.$tag-border-teal, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(tag.$tag-border-teal, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(tag.$tag-border-teal, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(tag.$tag-border-teal, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(tag.$tag-border-teal, g-100),
+    ),
+  ),
+) !default;
+
+$tag-border-green: (
+  fallback: map.get(tag.$tag-border-green, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(tag.$tag-border-green, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(tag.$tag-border-green, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(tag.$tag-border-green, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(tag.$tag-border-green, g-100),
+    ),
+  ),
+) !default;
+
+$tag-border-magenta: (
+  fallback: map.get(tag.$tag-border-magenta, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(tag.$tag-border-magenta, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(tag.$tag-border-magenta, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(tag.$tag-border-magenta, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(tag.$tag-border-magenta, g-100),
+    ),
+  ),
+) !default;
+
+$tag-border-purple: (
+  fallback: map.get(tag.$tag-border-purple, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(tag.$tag-border-purple, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(tag.$tag-border-purple, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(tag.$tag-border-purple, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(tag.$tag-border-purple, g-100),
+    ),
+  ),
+) !default;
+
+$tag-border-cool-gray: (
+  fallback: map.get(tag.$tag-border-cool-gray, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(tag.$tag-border-cool-gray, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(tag.$tag-border-cool-gray, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(tag.$tag-border-cool-gray, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(tag.$tag-border-cool-gray, g-100),
+    ),
+  ),
+) !default;
+
+$tag-border-warm-gray: (
+  fallback: map.get(tag.$tag-border-warm-gray, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(tag.$tag-border-warm-gray, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(tag.$tag-border-warm-gray, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(tag.$tag-border-warm-gray, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(tag.$tag-border-warm-gray, g-100),
+    ),
+  ),
+) !default;
+
 // warm-gray
 $tag-background-warm-gray: (
   fallback: map.get(tag.$tag-background-warm-gray, white-theme),
@@ -709,6 +929,16 @@ $tag-tokens: (
   tag-background-gray: $tag-background-gray,
   tag-color-gray: $tag-color-gray,
   tag-hover-gray: $tag-hover-gray,
+  tag-border-red: $tag-border-red,
+  tag-border-blue: $tag-border-blue,
+  tag-border-cyan: $tag-border-cyan,
+  tag-border-teal: $tag-border-teal,
+  tag-border-green: $tag-border-green,
+  tag-border-magenta: $tag-border-magenta,
+  tag-border-purple: $tag-border-purple,
+  tag-border-gray: $tag-border-gray,
+  tag-border-cool-gray: $tag-border-cool-gray,
+  tag-border-warm-gray: $tag-border-warm-gray,
   tag-background-cool-gray: $tag-background-cool-gray,
   tag-color-cool-gray: $tag-color-cool-gray,
   tag-hover-cool-gray: $tag-hover-cool-gray,
@@ -801,6 +1031,41 @@ $tag-color-gray: component-tokens.get-var($tag-color-gray, 'tag-color-gray');
 
 $tag-hover-gray: component-tokens.get-var($tag-hover-gray, 'tag-hover-gray');
 
+$tag-border-red: component-tokens.get-var($tag-border-red, 'tag-border-red');
+
+$tag-border-blue: component-tokens.get-var($tag-border-blue, 'tag-border-blue');
+
+$tag-border-cyan: component-tokens.get-var($tag-border-cyan, 'tag-border-cyan');
+
+$tag-border-teal: component-tokens.get-var($tag-border-teal, 'tag-border-teal');
+
+$tag-border-green: component-tokens.get-var(
+  $tag-border-green,
+  'tag-border-green'
+);
+
+$tag-border-magenta: component-tokens.get-var(
+  $tag-border-magenta,
+  'tag-border-magenta'
+);
+
+$tag-border-purple: component-tokens.get-var(
+  $tag-border-purple,
+  'tag-border-purple'
+);
+
+$tag-border-gray: component-tokens.get-var($tag-border-gray, 'tag-border-gray');
+
+$tag-border-cool-gray: component-tokens.get-var(
+  $tag-border-cool-gray,
+  'tag-border-cool-gray'
+);
+
+$tag-border-warm-gray: component-tokens.get-var(
+  $tag-border-warm-gray,
+  'tag-border-warm-gray'
+);
+
 $tag-background-cool-gray: component-tokens.get-var(
   $tag-background-cool-gray,
   'tag-background-cool-gray'

package/scss/components/tile/_tile.scss

@@ -27,7 +27,10 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 /// Tile styles
 /// @access public
 /// @group tile
-@mixin tile($enable-experimental-tile-contrast: false) {
+@mixin tile(
+  $enable-experimental-tile-contrast: false,
+  $enable-v12-tile-radio-icons: false
+) {
   .#{$prefix}--tile-group {
     @include reset;
   }
@@ -163,9 +166,17 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
     block-size: 1rem;
     inset-block-start: layout.density('padding-inline');
     inset-inline-end: layout.density('padding-inline');
-    opacity: 0;
     transition: $duration-fast-02 motion(standard, productive);
 
+    @if (
+      enabled('enable-v12-tile-radio-icons') or
+        $enable-experimental-tile-contrast
+    ) {
+      opacity: 1;
+    } @else {
+      opacity: 0;
+    }
+
     svg {
       border-radius: 50%;
       fill: $icon-secondary;
@@ -383,7 +394,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile {
-    @include callout-gradient('default', 0, 'layer');
+    @include ai-popover-gradient('default', 0, 'layer');
 
     border: 1px solid transparent;
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
@@ -391,7 +402,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--expandable:hover {
-    @include callout-gradient('default', 0, 'layer');
+    @include ai-popover-gradient('default', 0, 'layer');
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
@@ -410,7 +421,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::before,
   .#{$prefix}--tile--slug.#{$prefix}--tile--clickable::before {
-    @include callout-gradient('hover', 0, 'layer');
+    @include ai-popover-gradient('hover', 0, 'layer');
 
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
   }
@@ -421,7 +432,7 @@ $-icon-container-size: calc(#{layout.density('padding-inline')} * 2 + 1rem);
   }
 
   .#{$prefix}--tile--slug.#{$prefix}--tile--selectable::after {
-    @include callout-gradient('selected', 0, 'layer');
+    @include ai-popover-gradient('selected', 0, 'layer');
 
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
   }

package/scss/components/toggletip/_toggletip.scss

@@ -63,6 +63,10 @@
       'link-hover-text-color',
       theme.$link-inverse
     );
+    @include custom-property.declaration(
+      'link-visited-text-color',
+      theme.$link-inverse
+    );
     @include custom-property.declaration(
       'link-focus-text-color',
       theme.$focus-inverse

package/scss/utilities/_ai-gradient.scss

@@ -68,12 +68,12 @@
 /// Experimental - name and structure subject to change. Use at your own risk!
 /// Adds callout gradient styles to a component
 /// @access private
-/// @example @include callout-gradient();
+/// @example @include ai-popover-gradient();
 /// @param {String} $type  - Type of gradient, either 'default', 'selected' or 'hover'
 /// @param {Number} $offset  - specify a pixel offset the callout should start from the bottom
 /// @param {String} $background  - specify the token to be used as the background
 /// @group utilities
-@mixin callout-gradient(
+@mixin ai-popover-gradient(
   $type: 'default',
   $offset: 0,
   $background: 'background'

package/telemetry.yml

@@ -0,0 +1,7 @@
+# yaml-language-server: $schema=https://unpkg.com/@ibm/telemetry-config-schema@v1/dist/config.schema.json
+version: 1
+projectId: d2574dfc-6ec7-4d1a-9c7a-b22cc16dc747
+endpoint: https://collector-prod.1am6wm210aow.us-south.codeengine.appdomain.cloud/v1/metrics
+collect:
+  npm:
+    dependencies: null