@carbon/styles 1.52.0 → 1.53.0-rc.0

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/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