@carbon/ibm-products 1.0.0-rc.2 → 1.0.0

package/README.md

@@ -1,12 +1,12 @@
-# @carbon/ibm-cloud-cognitive
+# @carbon/ibm-products
 
 > Carbon for IBM Products is an open-source implementation of the closed source
 > [Carbon for Cloud & Cognitive pattern asset library (PAL)](https://pages.github.ibm.com/cdai-design/pal/).
 > These PAL designs build on the foundation of IBM's open source Carbon Design
 > System and React implementation to offer components and patterns beyond the
 > typical component library. Carbon for IBM Products was previously known as
-> Carbon for IBM Cloud and Cognitive, and this name can still be encountered in
-> various places and historical logs.
+> Carbon for IBM Cloud and Cognitive (@carbon/ibm-cloud-cognitive), and this
+> name can still be encountered in various places and historical logs.
 
 [![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#contributors-)
 [![Licensed under the Apache License, Version 2.0](https://img.shields.io/badge/license-Apache--2.0-blue.svg)](https://github.com/carbon-design-system/ibm-cloud-cognitive/blob/master/LICENSE)
@@ -25,27 +25,26 @@ a look at [our Storybook](https://ibm-cloud-cognitive.netlify.app).
 ## 📦 Installing Carbon for IBM Products
 
 To use Carbon for IBM Products components, all you need to do is install the
-`@carbon/ibm-cloud-cognitive` package.
+`@carbon/ibm-products` package.
 
 ```shell
-$ yarn add @carbon/ibm-cloud-cognitive
+$ yarn add @carbon/ibm-products
 
 # or
 
-$ npm install @carbon/ibm-cloud-cognitive
+$ npm install @carbon/ibm-products
 ```
 
 Then you can import the component styles in your `index.js`.
 
 ```js
-import '@carbon/ibm-cloud-cognitive/css/index.min.css';
+import '@carbon/ibm-products/css/index.min.css';
 ```
 
 ### Carbon Components (Peer dependencies)
 
-@carbon/ibm-cloud-cognitive is built on top of Carbon components and has a
-number of dependencies which need to be installed. Follow the package
-instructions for:
+@carbon/ibm-products is built on top of Carbon components and has a number of
+dependencies which need to be installed. Follow the package instructions for:
 
 -. Install carbon-components-react as per that packages instructions
 <https://www.npmjs.com/package/carbon-components-react> -. Install
@@ -76,7 +75,7 @@ You can find example projects using the components in the
 To start using the components
 
 ```jsx
-import { AboutModal } from '@carbon/ibm-cloud-cognitive';
+import { AboutModal } from '@carbon/ibm-products';
 
 const App = () => {
   return <AboutModal />;
@@ -92,7 +91,7 @@ to be canary and require the consumer to enable via a feature flag in a
 For example, create a `config.js` in your `src` directory:
 
 ```js
-import { pkg } from '@carbon/ibm-cloud-cognitive';
+import { pkg } from '@carbon/ibm-products';
 
 // Enable 'canary' (not yet reviewed/released) components
 // that we want to make use of

package/css/index-full-carbon.css

@@ -18902,6 +18902,16 @@ a.bx--side-nav__link--current::before {
     background-color: var(--to-color);
   }
 }
+@keyframes background-and-shadow-appear {
+  from {
+    background-color: var(--from-color);
+    box-shadow: 0 1px 0 var(--from-color);
+  }
+  to {
+    background-color: var(--to-color);
+    box-shadow: 0 1px 0 var(--to-color-shadow);
+  }
+}
 .c4p--page-header.c4p--page-header {
   /* Bleed class for the background */
   position: sticky;
@@ -18929,16 +18939,16 @@ a.bx--side-nav__link--current::before {
 .c4p--page-header::before {
   --from-color: var(--cds-ui-background, #ffffff);
   --to-color: var(--cds-ui-01, #f4f4f4);
+  --to-color-shadow: var(--cds-ui-03, #e0e0e0);
   position: absolute;
   top: 0;
   left: 0;
   display: block;
   width: 100%;
   height: 100%;
-  animation: background-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
+  animation: background-and-shadow-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
   content: "";
   z-index: -1;
-  box-shadow: 0 1px 0 var(--cds-ui-03, #e0e0e0);
 }
 .c4p--page-header .c4p--page-header--width--xl {
   padding-right: var(--cds-spacing-07, 2rem);
@@ -19068,6 +19078,7 @@ a.bx--side-nav__link--current::before {
 .c4p--page-header .c4p--page-header__action-bar-column--background::before {
   --from-color: var(--cds-ui-background, #ffffff);
   --to-color: var(--cds-ui-01, #f4f4f4);
+  --to-color-shadow: var(--cds-ui-03, #e0e0e0);
   position: absolute;
   top: 0;
   left: 0;
@@ -19238,6 +19249,7 @@ a.bx--side-nav__link--current::before {
 .c4p--page-header .c4p--page-header__title-row .c4p--page-header__page-actions::before {
   --from-color: var(--cds-ui-background, #ffffff);
   --to-color: var(--cds-ui-01, #f4f4f4);
+  --to-color-shadow: var(--cds-ui-03, #e0e0e0);
   position: absolute;
   top: 0;
   left: 0;
@@ -19247,6 +19259,11 @@ a.bx--side-nav__link--current::before {
   animation: background-appear 1000ms calc(-1000ms * var(--c4p--page-header--background-opacity)) linear paused forwards;
   content: "";
 }
+.c4p--page-header .c4p--page-header__page-actions-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
 .c4p--page-header .c4p--page-header__title-row .c4p--page-header__page-actions--in-breadcrumb {
   opacity: 0;
   visibility: hidden;
@@ -19268,10 +19285,10 @@ a.bx--side-nav__link--current::before {
   height: var(--cds-spacing-05, 1rem);
 }
 .c4p--page-header .c4p--page-header__subtitle {
-  font-size: var(--cds-body-long-02-font-size, 1rem);
-  font-weight: var(--cds-body-long-02-font-weight, 400);
-  line-height: var(--cds-body-long-02-line-height, 1.5);
-  letter-spacing: var(--cds-body-long-02-letter-spacing, 0);
+  font-size: var(--cds-body-long-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-long-01-font-weight, 400);
+  line-height: var(--cds-body-long-01-line-height, 1.42857);
+  letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
 }
 .c4p--page-header .c4p--page-header__available-row {
   font-size: var(--cds-body-long-01-font-size, 0.875rem);