@carbon/styles 1.98.0-rc.0 → 1.99.0-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/styles",
   "description": "Styles for the Carbon Design System",
-  "version": "1.98.0-rc.0",
+  "version": "1.99.0-rc.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -40,13 +40,13 @@
     }
   },
   "dependencies": {
-    "@carbon/colors": "^11.45.0-rc.0",
+    "@carbon/colors": "^11.46.0-rc.0",
     "@carbon/feature-flags": ">=0.32.0",
-    "@carbon/grid": "^11.48.0-rc.0",
-    "@carbon/layout": "^11.46.0-rc.0",
-    "@carbon/motion": "^11.39.0",
-    "@carbon/themes": "^11.66.0-rc.0",
-    "@carbon/type": "^11.52.0-rc.0",
+    "@carbon/grid": "^11.49.0-rc.0",
+    "@carbon/layout": "^11.47.0-rc.0",
+    "@carbon/motion": "^11.40.0-rc.0",
+    "@carbon/themes": "^11.67.0-rc.0",
+    "@carbon/type": "^11.53.0-rc.0",
     "@ibm/plex": "6.0.0-next.6",
     "@ibm/plex-mono": "1.1.0",
     "@ibm/plex-sans": "1.1.0",
@@ -59,7 +59,7 @@
     "@ibm/telemetry-js": "^1.5.0"
   },
   "devDependencies": {
-    "@carbon/test-utils": "^10.39.0-rc.0",
+    "@carbon/test-utils": "^10.39.0",
     "autoprefixer": "^10.4.7",
     "browserslist-config-carbon": "^11.2.0",
     "css": "^3.0.0",
@@ -75,5 +75,5 @@
     "scss/**/*.css",
     "css/**/*.css"
   ],
-  "gitHead": "8263c72357fc43c00e66c9030698f759ef7977ce"
+  "gitHead": "cbde6bd5df4774c2780411b3faa02ec3a0bb7585"
 }

package/scss/__tests__/carousel-test.js

@@ -0,0 +1,92 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+const { SassRenderer } = require('@carbon/test-utils/scss');
+
+const { render } = SassRenderer.create(__dirname);
+
+describe('scss/carousel', () => {
+  test('Public API', async () => {
+    const { unwrap } = await render(`
+      @use 'sass:map';
+      @use 'sass:meta';
+      @use '../_carbon-utilities' as carousel;
+
+      $_: get('carousel-mixin', meta.mixin-exists('carousel', 'carousel'));
+      $_: get('keyframes-mixin', meta.mixin-exists('keyframes', 'carousel'));
+      $_: get('viewBase-mixin', meta.mixin-exists('viewBase', 'carousel'));
+      $_: get('wrapperStyles-mixin', meta.mixin-exists('wrapperStyles', 'carousel'));
+      $_: get('viewStyles-mixin', meta.mixin-exists('viewStyles', 'carousel'));
+      $_: get('variables', map.keys(meta.module-variables('carousel')));
+    `);
+
+    expect(unwrap('carousel-mixin')).toBe(true);
+    expect(unwrap('keyframes-mixin')).toBe(true);
+    expect(unwrap('viewBase-mixin')).toBe(true);
+    expect(unwrap('wrapperStyles-mixin')).toBe(true);
+    expect(unwrap('viewStyles-mixin')).toBe(true);
+    expect(unwrap('variables')).toEqual(['prefix', 'animateTime']);
+  });
+
+  test('configuration - animateTime override', async () => {
+    const { unwrap } = await render(`
+      @use '../_carbon-utilities' as carousel with (
+        $animateTime: 500ms,
+      );
+      $_: get('animateTime', carousel.$animateTime);
+    `);
+    expect(unwrap('animateTime')).toBe('500ms');
+  });
+
+  test('carousel mixin can be included without errors', async () => {
+    await expect(
+      render(`
+        @use '../_carbon-utilities' as carousel;
+        
+        .test {
+          @include carousel.carousel;
+        }
+      `)
+    ).resolves.not.toThrow();
+  });
+
+  test('wrapperStyles mixin can be included without errors', async () => {
+    await expect(
+      render(`
+        @use '../_carbon-utilities' as carousel;
+        
+        @include carousel.wrapperStyles;
+      `)
+    ).resolves.not.toThrow();
+  });
+
+  test('viewStyles mixin can be included without errors', async () => {
+    await expect(
+      render(`
+        @use '../_carbon-utilities' as carousel;
+        
+        @include carousel.viewStyles;
+      `)
+    ).resolves.not.toThrow();
+  });
+
+  test('default variables have expected values', async () => {
+    const { unwrap } = await render(`
+      @use '../_carbon-utilities' as carousel;
+      
+    
+      $_: get('animateTime', carousel.$animateTime);
+    `);
+
+    // animateTime should be $duration-moderate-02 from @carbon/styles/scss/motion
+    expect(unwrap('animateTime')).toBeDefined();
+  });
+});

package/scss/_carbon-utilities.scss

@@ -0,0 +1,8 @@
+//
+// 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 '@carbon/utilities';

package/scss/components/notification/_actionable-notification.scss

@@ -22,42 +22,185 @@
 @use '../button/mixins' as button-mixins;
 @use '../button/vars' as button-vars;
 
-/// Actionable notification styles
+/// Actionable notification base styles
 /// @access public
 /// @group notification
-@mixin actionable-notification {
-  .#{$prefix}--actionable-notification {
-    @include reset;
+@mixin actionable-notification-base {
+  @include reset;
 
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    block-size: auto;
-    color: $text-inverse;
-    inline-size: 100%;
-    max-inline-size: convert.to-rem(288px);
-    min-block-size: convert.to-rem(48px);
-    min-inline-size: convert.to-rem(288px);
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  block-size: auto;
+  color: $text-inverse;
+  inline-size: 100%;
+  max-inline-size: convert.to-rem(288px);
+  min-block-size: convert.to-rem(48px);
+  min-inline-size: convert.to-rem(288px);
 
-    @include breakpoint(md) {
-      flex-wrap: nowrap;
-      max-inline-size: convert.to-rem(608px);
-    }
+  @include breakpoint(md) {
+    flex-wrap: nowrap;
+    max-inline-size: convert.to-rem(608px);
+  }
 
-    @include breakpoint(lg) {
-      max-inline-size: convert.to-rem(736px);
-    }
+  @include breakpoint(lg) {
+    max-inline-size: convert.to-rem(736px);
+  }
 
-    @include breakpoint(max) {
-      max-inline-size: convert.to-rem(832px);
-    }
+  @include breakpoint(max) {
+    max-inline-size: convert.to-rem(832px);
+  }
+}
+/// Actionable notification toast variant base styles
+/// @access public
+/// @group notification
+@mixin actionable-notification-toast-base {
+  flex-wrap: wrap;
+  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 20%);
+  max-inline-size: convert.to-rem(288px);
+  min-inline-size: convert.to-rem(288px);
+}
+
+/// Actionable notification low-contrast variant base styles
+/// @access public
+/// @group notification
+@mixin actionable-notification-low-contrast-base {
+  color: $text-primary;
+
+  .#{$prefix}--actionable-notification__subtitle,
+  .#{$prefix}--actionable-notification__caption {
+    color: $text-primary;
+  }
+
+  .#{$prefix}--actionable-notification__close-button
+    .#{$prefix}--actionable-notification__close-icon {
+    fill: $icon-primary;
+  }
+}
+
+/// Actionable notification error variant base styles
+/// @access public
+/// @group notification
+@mixin actionable-notification-error-base {
+  @include notification--experimental(
+    $support-error-inverse,
+    $background-inverse
+  );
+}
+
+/// Actionable notification success variant base styles
+/// @access public
+/// @group notification
+@mixin actionable-notification-success-base {
+  @include notification--experimental(
+    $support-success-inverse,
+    $background-inverse
+  );
+}
+
+/// Actionable notification info variant base styles
+/// @access public
+/// @group notification
+@mixin actionable-notification-info-base {
+  @include notification--experimental(
+    $support-info-inverse,
+    $background-inverse
+  );
+}
+
+/// Actionable notification warning variant base styles
+/// @access public
+/// @group notification
+@mixin actionable-notification-warning-base {
+  @include notification--experimental(
+    $support-warning-inverse,
+    $background-inverse
+  );
+}
+
+/// Actionable notification low-contrast error variant styles
+/// @access public
+/// @group notification
+@mixin actionable-notification-low-contrast-error {
+  @include notification--experimental(
+    $support-error,
+    $notification-background-error
+  );
+
+  &::before {
+    border-color: $support-error;
+  }
+}
+
+/// Actionable notification low-contrast success variant styles
+/// @access public
+/// @group notification
+@mixin actionable-notification-low-contrast-success {
+  @include notification--experimental(
+    $support-success,
+    $notification-background-success
+  );
+
+  &::before {
+    border-color: $support-success;
+  }
+}
+
+/// Actionable notification low-contrast info variant styles
+/// @access public
+/// @group notification
+@mixin actionable-notification-low-contrast-info {
+  @include notification--experimental(
+    $support-info,
+    $notification-background-info
+  );
+
+  &::before {
+    border-color: $support-info;
+  }
+}
+
+/// Actionable notification low-contrast warning variant styles
+/// @access public
+/// @group notification
+@mixin actionable-notification-low-contrast-warning {
+  @include notification--experimental(
+    $support-warning,
+    $notification-background-warning
+  );
+
+  &::before {
+    border-color: $support-warning;
+  }
+}
+
+/// Actionable notification low constrast inline ::before styles
+/// @access public
+/// @group notification
+@mixin actionable-notification-low-contrast-inline-before {
+  position: absolute;
+  box-sizing: border-box;
+  border-width: 1px 1px 1px 0;
+  border-style: solid;
+  block-size: 100%;
+  content: '';
+  filter: opacity(0.4);
+  inline-size: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  pointer-events: none;
+}
+
+/// Actionable notification styles
+/// @access public
+/// @group notification
+@mixin actionable-notification {
+  .#{$prefix}--actionable-notification {
+    @include actionable-notification-base;
   }
 
   .#{$prefix}--actionable-notification--toast {
-    flex-wrap: wrap;
-    box-shadow: 0 2px 6px 0 rgb(0 0 0 / 20%);
-    max-inline-size: convert.to-rem(288px);
-    min-inline-size: convert.to-rem(288px);
+    @include actionable-notification-toast-base;
   }
 
   .#{$prefix}--actionable-notification:not(
@@ -85,99 +228,49 @@
   }
 
   .#{$prefix}--actionable-notification--low-contrast {
-    color: $text-primary;
+    @include actionable-notification-low-contrast-base;
   }
 
   .#{$prefix}--actionable-notification--low-contrast:not(
       .#{$prefix}--actionable-notification--toast
     )::before {
-    position: absolute;
-    box-sizing: border-box;
-    border-width: 1px 1px 1px 0;
-    border-style: solid;
-    block-size: 100%;
-    content: '';
-    filter: opacity(0.4);
-    inline-size: 100%;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    pointer-events: none;
+    @include actionable-notification-low-contrast-inline-before;
   }
 
   .#{$prefix}--actionable-notification--error {
-    @include notification--experimental(
-      $support-error-inverse,
-      $background-inverse
-    );
+    @include actionable-notification-error-base;
   }
 
   .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--error {
-    @include notification--experimental(
-      $support-error,
-      $notification-background-error
-    );
-
-    &::before {
-      border-color: $support-error;
-    }
+    @include actionable-notification-low-contrast-error;
   }
 
   .#{$prefix}--actionable-notification--success {
-    @include notification--experimental(
-      $support-success-inverse,
-      $background-inverse
-    );
+    @include actionable-notification-success-base;
   }
 
   .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--success {
-    @include notification--experimental(
-      $support-success,
-      $notification-background-success
-    );
-
-    &::before {
-      border-color: $support-success;
-    }
+    @include actionable-notification-low-contrast-success;
   }
 
   .#{$prefix}--actionable-notification--info,
   .#{$prefix}--actionable-notification--info-square {
-    @include notification--experimental(
-      $support-info-inverse,
-      $background-inverse
-    );
+    @include actionable-notification-info-base;
   }
 
   .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--info,
   .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--info-square {
-    @include notification--experimental(
-      $support-info,
-      $notification-background-info
-    );
-
-    &::before {
-      border-color: $support-info;
-    }
+    @include actionable-notification-low-contrast-info;
   }
 
   .#{$prefix}--actionable-notification--warning,
   .#{$prefix}--actionable-notification--warning-alt {
-    @include notification--experimental(
-      $support-warning-inverse,
-      $background-inverse
-    );
+    @include actionable-notification-warning-base;
   }
 
   .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--warning,
   .#{$prefix}--actionable-notification--low-contrast.#{$prefix}--actionable-notification--warning-alt {
-    @include notification--experimental(
-      $support-warning,
-      $notification-background-warning
-    );
-
-    &::before {
-      border-color: $support-warning;
-    }
+    @include actionable-notification-low-contrast-warning;
   }
 
   .#{$prefix}--actionable-notification--warning
@@ -276,11 +369,6 @@
     word-break: break-word;
   }
 
-  .#{$prefix}--actionable-notification--low-contrast
-    .#{$prefix}--actionable-notification__subtitle {
-    color: $text-primary;
-  }
-
   .#{$prefix}--actionable-notification__caption {
     @include type-style('body-compact-01');
 
@@ -288,11 +376,6 @@
     padding-block-start: $spacing-06;
   }
 
-  .#{$prefix}--actionable-notification--low-contrast
-    .#{$prefix}--actionable-notification__caption {
-    color: $text-primary;
-  }
-
   /* Ghost action button when inline */
   .#{$prefix}--actionable-notification__action-button.#{$prefix}--btn--ghost {
     block-size: convert.to-rem(32px);
@@ -483,12 +566,6 @@
     @include focus-outline('outline');
   }
 
-  .#{$prefix}--actionable-notification--low-contrast
-    .#{$prefix}--actionable-notification__close-button
-    .#{$prefix}--actionable-notification__close-icon {
-    fill: $icon-primary;
-  }
-
   // Windows HCM fix
 
   .#{$prefix}--actionable-notification {