@carbon/styles 1.72.0 → 1.73.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.72.0",
+  "version": "1.73.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -45,7 +45,7 @@
     "@carbon/grid": "^11.30.0",
     "@carbon/layout": "^11.28.0",
     "@carbon/motion": "^11.24.0",
-    "@carbon/themes": "^11.44.0",
+    "@carbon/themes": "^11.45.0-rc.0",
     "@carbon/type": "^11.34.0",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/plex-mono": "0.0.3-alpha.0",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "97fc2e65d5d78f3bc191f036cb669b072db1d85f"
+  "gitHead": "e14e6577efb2a0231c1a9ba1d4cf5a6a544bd2f9"
 }

package/scss/_zone.scss

@@ -17,6 +17,7 @@
 @use './components/button/tokens' as button;
 @use './components/notification/tokens' as notification;
 @use './components/tag/tokens' as tag;
+@use './components/icon-indicator/tokens' as icon-indicator;
 
 /// Specify a Map of zones where the key will be used as part of the selector
 /// and the value will be a map used to emit CSS Custom Properties for all color
@@ -31,7 +32,8 @@ $zones: (
 $-components: (
   button.$button-tokens,
   notification.$notification-tokens,
-  tag.$tag-tokens
+  tag.$tag-tokens,
+  icon-indicator.$status-tokens
 );
 
 @each $name, $theme in $zones {

package/scss/components/_index.scss

@@ -38,6 +38,7 @@
 @use 'fluid-text-input';
 @use 'fluid-time-picker';
 @use 'form';
+@use 'icon-indicator';
 @use 'inline-loading';
 @use 'link';
 @use 'list';

package/scss/components/fluid-date-picker/_fluid-date-picker.scss

@@ -399,7 +399,11 @@
     border-inline-start-color: $border-subtle;
   }
 
-  // Slug styles
+  // AI Label styles
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-input__wrapper--decorator
+    .#{$prefix}--date-picker-input-inner-wrapper--decorator
+    > *,
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker-input__wrapper--slug
     .#{$prefix}--ai-label,
@@ -439,6 +443,15 @@
     border-block-end-color: $ai-border-strong;
   }
 
+  .#{$prefix}--date-picker--fluid
+    .#{$prefix}--date-picker-input__wrapper--decorator
+    .#{$prefix}--date-picker__input,
+  .#{$prefix}--date-picker--fluid--invalid
+    .#{$prefix}--date-picker-input__wrapper--decorator
+    .#{$prefix}--date-picker__input,
+  .#{$prefix}--date-picker--fluid--warn
+    .#{$prefix}--date-picker-input__wrapper--decorator
+    .#{$prefix}--date-picker__input,
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker-input__wrapper--slug
     .#{$prefix}--date-picker__input,

package/scss/components/icon-indicator/_icon-indicator.scss

@@ -0,0 +1,90 @@
+//
+// Copyright IBM Corp. 2016, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '../../theme' as *;
+@use '../../type' as *;
+@use '../../config' as *;
+@use '../../spacing' as *;
+@use '../../colors' as *;
+@use './tokens' as *;
+
+/// icon-indicator styles
+/// @access public
+/// @group tag
+@mixin icon-indicator {
+  .#{$prefix}--icon-indicator {
+    @include type-style('body-compact-01');
+
+    display: flex;
+    color: $text-secondary;
+  }
+
+  .#{$prefix}--icon-indicator svg {
+    align-self: center;
+    margin-inline-end: $spacing-03;
+  }
+
+  .#{$prefix}--icon-indicator--20 {
+    @include type-style('body-compact-02');
+  }
+
+  .#{$prefix}--icon-indicator--failed {
+    fill: $status-red;
+  }
+
+  .#{$prefix}--icon-indicator--caution-major {
+    fill: $status-orange;
+
+    path:first-of-type {
+      fill: $black;
+    }
+  }
+
+  .#{$prefix}--icon-indicator--caution-minor {
+    fill: $status-yellow;
+
+    path:first-of-type {
+      fill: $black;
+    }
+  }
+
+  .#{$prefix}--icon-indicator--undefined {
+    fill: $status-purple;
+  }
+
+  .#{$prefix}--icon-indicator--succeeded {
+    fill: $status-green;
+  }
+
+  .#{$prefix}--icon-indicator--normal {
+    fill: $status-blue;
+  }
+
+  .#{$prefix}--icon-indicator--in-progress {
+    fill: $status-blue;
+  }
+
+  .#{$prefix}--icon-indicator--incomplete {
+    fill: $status-blue;
+  }
+
+  .#{$prefix}--icon-indicator--not-started {
+    fill: $status-gray;
+  }
+
+  .#{$prefix}--icon-indicator--pending {
+    fill: $status-gray;
+  }
+
+  .#{$prefix}--icon-indicator--unknown {
+    fill: $status-gray;
+  }
+
+  .#{$prefix}--icon-indicator--informative {
+    fill: $status-blue;
+  }
+}

package/scss/components/icon-indicator/_index.scss

@@ -0,0 +1,16 @@
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'icon-indicator';
+@forward 'tokens';
+
+@use '../../theme';
+@use 'icon-indicator';
+@use 'tokens';
+
+@include theme.add-component-tokens(tokens.$status-tokens);
+@include icon-indicator.icon-indicator;

package/scss/components/icon-indicator/_tokens.scss

@@ -0,0 +1,196 @@
+//
+// Copyright IBM Corp. 2020
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:color';
+@use 'sass:map';
+@use '../../config';
+@use '../../colors';
+@use '../../themes';
+@use '../../theme' as *;
+@use '../../utilities/component-tokens';
+@use '@carbon/themes/scss/component-tokens' as status;
+
+// status-red
+$status-red: (
+  fallback: map.get(status.$status-red, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(status.$status-red, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(status.$status-red, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(status.$status-red, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(status.$status-red, g-100),
+    ),
+  ),
+) !default;
+
+// status-orange
+$status-orange: (
+  fallback: map.get(status.$status-orange, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(status.$status-orange, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(status.$status-orange, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(status.$status-orange, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(status.$status-orange, g-100),
+    ),
+  ),
+) !default;
+
+// status-yellow
+$status-yellow: (
+  fallback: map.get(status.$status-yellow, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(status.$status-yellow, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(status.$status-yellow, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(status.$status-yellow, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(status.$status-yellow, g-100),
+    ),
+  ),
+) !default;
+
+// status-green
+$status-green: (
+  fallback: map.get(status.$status-green, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(status.$status-green, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(status.$status-green, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(status.$status-green, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(status.$status-green, g-100),
+    ),
+  ),
+) !default;
+
+// status-blue
+$status-blue: (
+  fallback: map.get(status.$status-blue, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(status.$status-blue, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(status.$status-blue, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(status.$status-blue, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(status.$status-blue, g-100),
+    ),
+  ),
+) !default;
+
+// status-purple
+$status-purple: (
+  fallback: map.get(status.$status-purple, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(status.$status-purple, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(status.$status-purple, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(status.$status-purple, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(status.$status-purple, g-100),
+    ),
+  ),
+) !default;
+
+// status-gray
+$status-gray: (
+  fallback: map.get(status.$status-gray, white-theme),
+  values: (
+    (
+      theme: themes.$white,
+      value: map.get(status.$status-gray, white-theme),
+    ),
+    (
+      theme: themes.$g10,
+      value: map.get(status.$status-gray, g-10),
+    ),
+    (
+      theme: themes.$g90,
+      value: map.get(status.$status-gray, g-90),
+    ),
+    (
+      theme: themes.$g100,
+      value: map.get(status.$status-gray, g-100),
+    ),
+  ),
+) !default;
+
+// Add to $status-tokens map
+$status-tokens: (
+  status-red: $status-red,
+  status-orange: $status-orange,
+  status-yellow: $status-yellow,
+  status-green: $status-green,
+  status-blue: $status-blue,
+  status-purple: $status-purple,
+  status-gray: $status-gray,
+);
+
+// Generate CSS custom properties for each token
+$status-red: component-tokens.get-var($status-red, 'status-red');
+$status-orange: component-tokens.get-var($status-orange, 'status-orange');
+$status-yellow: component-tokens.get-var($status-yellow, 'status-yellow');
+$status-green: component-tokens.get-var($status-green, 'status-green');
+$status-blue: component-tokens.get-var($status-blue, 'status-blue');
+$status-purple: component-tokens.get-var($status-purple, 'status-purple');
+$status-gray: component-tokens.get-var($status-gray, 'status-gray');

package/scss/components/text-area/_text-area.scss

@@ -104,6 +104,12 @@
     inline-size: 1px;
   }
 
+  .#{$prefix}--form-item {
+    &:has(.#{$prefix}--text-area__wrapper--cols) {
+      inline-size: fit-content;
+    }
+  }
+
   //-----------------------------
   // Disabled
   //-----------------------------