diff --git a/.husky/pre-commit b/.husky/pre-commit index d24fdfc601..2312dc587f 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1 @@ -#!/usr/bin/env sh -. "$(dirname -- "$0")/_/husky.sh" - npx lint-staged diff --git a/examples/carbon-for-ibm-products/APIKeyModal/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/APIKeyModal/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/APIKeyModal/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/APIKeyModal/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/APIKeyModal/src/index.scss b/examples/carbon-for-ibm-products/APIKeyModal/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/APIKeyModal/src/index.scss +++ b/examples/carbon-for-ibm-products/APIKeyModal/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/AboutModal/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/AboutModal/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/AboutModal/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/AboutModal/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/AboutModal/src/index.scss b/examples/carbon-for-ibm-products/AboutModal/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/AboutModal/src/index.scss +++ b/examples/carbon-for-ibm-products/AboutModal/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/BigNumbers/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/BigNumbers/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/BigNumbers/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/BigNumbers/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/BigNumbers/src/index.scss b/examples/carbon-for-ibm-products/BigNumbers/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/BigNumbers/src/index.scss +++ b/examples/carbon-for-ibm-products/BigNumbers/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/Cascade/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/Cascade/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/Cascade/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/Cascade/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/Cascade/src/index.scss b/examples/carbon-for-ibm-products/Cascade/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/Cascade/src/index.scss +++ b/examples/carbon-for-ibm-products/Cascade/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/Coachmark/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/Coachmark/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/Coachmark/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/Coachmark/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/Coachmark/src/index.scss b/examples/carbon-for-ibm-products/Coachmark/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/Coachmark/src/index.scss +++ b/examples/carbon-for-ibm-products/Coachmark/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/CoachmarkBeacon/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CoachmarkBeacon/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/CoachmarkBeacon/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/CoachmarkBeacon/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/CoachmarkBeacon/src/index.scss b/examples/carbon-for-ibm-products/CoachmarkBeacon/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/CoachmarkBeacon/src/index.scss +++ b/examples/carbon-for-ibm-products/CoachmarkBeacon/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/CoachmarkButton/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CoachmarkButton/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/CoachmarkButton/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/CoachmarkButton/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/CoachmarkButton/src/index.scss b/examples/carbon-for-ibm-products/CoachmarkButton/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/CoachmarkButton/src/index.scss +++ b/examples/carbon-for-ibm-products/CoachmarkButton/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/CoachmarkFixed/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CoachmarkFixed/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/CoachmarkFixed/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/CoachmarkFixed/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/CoachmarkFixed/src/index.scss b/examples/carbon-for-ibm-products/CoachmarkFixed/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/CoachmarkFixed/src/index.scss +++ b/examples/carbon-for-ibm-products/CoachmarkFixed/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/CoachmarkOverlayElement/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CoachmarkOverlayElement/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/CoachmarkOverlayElement/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/CoachmarkOverlayElement/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/CoachmarkOverlayElement/src/index.scss b/examples/carbon-for-ibm-products/CoachmarkOverlayElement/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/CoachmarkOverlayElement/src/index.scss +++ b/examples/carbon-for-ibm-products/CoachmarkOverlayElement/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/CoachmarkOverlayElements/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CoachmarkOverlayElements/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/CoachmarkOverlayElements/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/CoachmarkOverlayElements/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/CoachmarkOverlayElements/src/index.scss b/examples/carbon-for-ibm-products/CoachmarkOverlayElements/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/CoachmarkOverlayElements/src/index.scss +++ b/examples/carbon-for-ibm-products/CoachmarkOverlayElements/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/CoachmarkStack/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CoachmarkStack/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/CoachmarkStack/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/CoachmarkStack/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/CoachmarkStack/src/index.scss b/examples/carbon-for-ibm-products/CoachmarkStack/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/CoachmarkStack/src/index.scss +++ b/examples/carbon-for-ibm-products/CoachmarkStack/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/ConditionBuilder/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/ConditionBuilder/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/ConditionBuilder/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/ConditionBuilder/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/ConditionBuilder/src/index.scss b/examples/carbon-for-ibm-products/ConditionBuilder/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/ConditionBuilder/src/index.scss +++ b/examples/carbon-for-ibm-products/ConditionBuilder/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/CreateFullPage/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CreateFullPage/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/CreateFullPage/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/CreateFullPage/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/CreateFullPage/src/index.scss b/examples/carbon-for-ibm-products/CreateFullPage/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/CreateFullPage/src/index.scss +++ b/examples/carbon-for-ibm-products/CreateFullPage/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/CreateModal/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CreateModal/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/CreateModal/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/CreateModal/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/CreateModal/src/index.scss b/examples/carbon-for-ibm-products/CreateModal/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/CreateModal/src/index.scss +++ b/examples/carbon-for-ibm-products/CreateModal/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/CreateSidePanel/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CreateSidePanel/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/CreateSidePanel/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/CreateSidePanel/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/CreateSidePanel/src/index.scss b/examples/carbon-for-ibm-products/CreateSidePanel/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/CreateSidePanel/src/index.scss +++ b/examples/carbon-for-ibm-products/CreateSidePanel/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/CreateTearsheet/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CreateTearsheet/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/CreateTearsheet/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/CreateTearsheet/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/CreateTearsheet/src/index.scss b/examples/carbon-for-ibm-products/CreateTearsheet/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/CreateTearsheet/src/index.scss +++ b/examples/carbon-for-ibm-products/CreateTearsheet/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/CreateTearsheetNarrow/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/CreateTearsheetNarrow/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/CreateTearsheetNarrow/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/CreateTearsheetNarrow/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/CreateTearsheetNarrow/src/index.scss b/examples/carbon-for-ibm-products/CreateTearsheetNarrow/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/CreateTearsheetNarrow/src/index.scss +++ b/examples/carbon-for-ibm-products/CreateTearsheetNarrow/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/DataSpreadsheet/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/DataSpreadsheet/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/DataSpreadsheet/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/DataSpreadsheet/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/DataSpreadsheet/src/index.scss b/examples/carbon-for-ibm-products/DataSpreadsheet/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/DataSpreadsheet/src/index.scss +++ b/examples/carbon-for-ibm-products/DataSpreadsheet/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/Datagrid/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/Datagrid/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/Datagrid/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/Datagrid/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/Datagrid/src/index.scss b/examples/carbon-for-ibm-products/Datagrid/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/Datagrid/src/index.scss +++ b/examples/carbon-for-ibm-products/Datagrid/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/Decorator/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/Decorator/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/Decorator/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/Decorator/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/Decorator/src/index.scss b/examples/carbon-for-ibm-products/Decorator/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/Decorator/src/index.scss +++ b/examples/carbon-for-ibm-products/Decorator/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/DelimitedList/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/DelimitedList/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/DelimitedList/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/DelimitedList/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/DelimitedList/src/index.scss b/examples/carbon-for-ibm-products/DelimitedList/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/DelimitedList/src/index.scss +++ b/examples/carbon-for-ibm-products/DelimitedList/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/DescriptionList/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/DescriptionList/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/DescriptionList/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/DescriptionList/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/DescriptionList/src/index.scss b/examples/carbon-for-ibm-products/DescriptionList/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/DescriptionList/src/index.scss +++ b/examples/carbon-for-ibm-products/DescriptionList/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/EditInPlace/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/EditInPlace/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/EditInPlace/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/EditInPlace/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/EditInPlace/src/index.scss b/examples/carbon-for-ibm-products/EditInPlace/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/EditInPlace/src/index.scss +++ b/examples/carbon-for-ibm-products/EditInPlace/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/EmptyStates/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/EmptyStates/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/EmptyStates/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/EmptyStates/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/EmptyStates/src/index.scss b/examples/carbon-for-ibm-products/EmptyStates/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/EmptyStates/src/index.scss +++ b/examples/carbon-for-ibm-products/EmptyStates/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/ExportModal/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/ExportModal/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/ExportModal/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/ExportModal/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/ExportModal/src/index.scss b/examples/carbon-for-ibm-products/ExportModal/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/ExportModal/src/index.scss +++ b/examples/carbon-for-ibm-products/ExportModal/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/ExpressiveCard/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/ExpressiveCard/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/ExpressiveCard/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/ExpressiveCard/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/ExpressiveCard/src/index.scss b/examples/carbon-for-ibm-products/ExpressiveCard/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/ExpressiveCard/src/index.scss +++ b/examples/carbon-for-ibm-products/ExpressiveCard/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/FilterPanel/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/FilterPanel/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/FilterPanel/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/FilterPanel/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/FilterPanel/src/index.scss b/examples/carbon-for-ibm-products/FilterPanel/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/FilterPanel/src/index.scss +++ b/examples/carbon-for-ibm-products/FilterPanel/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/FullPageError/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/FullPageError/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/FullPageError/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/FullPageError/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/FullPageError/src/index.scss b/examples/carbon-for-ibm-products/FullPageError/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/FullPageError/src/index.scss +++ b/examples/carbon-for-ibm-products/FullPageError/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/GetStartedCard/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/GetStartedCard/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/GetStartedCard/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/GetStartedCard/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/GetStartedCard/src/index.scss b/examples/carbon-for-ibm-products/GetStartedCard/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/GetStartedCard/src/index.scss +++ b/examples/carbon-for-ibm-products/GetStartedCard/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/HTTPErrors/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/HTTPErrors/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/HTTPErrors/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/HTTPErrors/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/HTTPErrors/src/index.scss b/examples/carbon-for-ibm-products/HTTPErrors/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/HTTPErrors/src/index.scss +++ b/examples/carbon-for-ibm-products/HTTPErrors/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/ImportModal/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/ImportModal/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/ImportModal/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/ImportModal/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/ImportModal/src/index.scss b/examples/carbon-for-ibm-products/ImportModal/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/ImportModal/src/index.scss +++ b/examples/carbon-for-ibm-products/ImportModal/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/InterstitialScreen/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/InterstitialScreen/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreen/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/InterstitialScreen/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/InterstitialScreen/src/index.scss b/examples/carbon-for-ibm-products/InterstitialScreen/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreen/src/index.scss +++ b/examples/carbon-for-ibm-products/InterstitialScreen/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/InterstitialScreenView/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/InterstitialScreenView/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreenView/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/InterstitialScreenView/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/InterstitialScreenView/src/index.scss b/examples/carbon-for-ibm-products/InterstitialScreenView/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreenView/src/index.scss +++ b/examples/carbon-for-ibm-products/InterstitialScreenView/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/InterstitialScreenViewModule/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/InterstitialScreenViewModule/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreenViewModule/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/InterstitialScreenViewModule/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/InterstitialScreenViewModule/src/index.scss b/examples/carbon-for-ibm-products/InterstitialScreenViewModule/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/InterstitialScreenViewModule/src/index.scss +++ b/examples/carbon-for-ibm-products/InterstitialScreenViewModule/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/Nav/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/Nav/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/Nav/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/Nav/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/Nav/src/index.scss b/examples/carbon-for-ibm-products/Nav/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/Nav/src/index.scss +++ b/examples/carbon-for-ibm-products/Nav/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/NotificationsPanel/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/NotificationsPanel/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/NotificationsPanel/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/NotificationsPanel/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/NotificationsPanel/src/index.scss b/examples/carbon-for-ibm-products/NotificationsPanel/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/NotificationsPanel/src/index.scss +++ b/examples/carbon-for-ibm-products/NotificationsPanel/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/OptionsTile/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/OptionsTile/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/OptionsTile/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/OptionsTile/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/OptionsTile/src/index.scss b/examples/carbon-for-ibm-products/OptionsTile/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/OptionsTile/src/index.scss +++ b/examples/carbon-for-ibm-products/OptionsTile/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/PageHeader/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/PageHeader/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/PageHeader/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/PageHeader/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/PageHeader/src/index.scss b/examples/carbon-for-ibm-products/PageHeader/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/PageHeader/src/index.scss +++ b/examples/carbon-for-ibm-products/PageHeader/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/ProductiveCard/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/ProductiveCard/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/ProductiveCard/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/ProductiveCard/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/ProductiveCard/src/index.scss b/examples/carbon-for-ibm-products/ProductiveCard/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/ProductiveCard/src/index.scss +++ b/examples/carbon-for-ibm-products/ProductiveCard/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/RemoveModal/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/RemoveModal/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/RemoveModal/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/RemoveModal/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/RemoveModal/src/index.scss b/examples/carbon-for-ibm-products/RemoveModal/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/RemoveModal/src/index.scss +++ b/examples/carbon-for-ibm-products/RemoveModal/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/Saving/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/Saving/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/Saving/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/Saving/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/Saving/src/index.scss b/examples/carbon-for-ibm-products/Saving/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/Saving/src/index.scss +++ b/examples/carbon-for-ibm-products/Saving/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/ScrollGradient/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/ScrollGradient/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/ScrollGradient/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/ScrollGradient/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/ScrollGradient/src/index.scss b/examples/carbon-for-ibm-products/ScrollGradient/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/ScrollGradient/src/index.scss +++ b/examples/carbon-for-ibm-products/ScrollGradient/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/SearchBar/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/SearchBar/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/SearchBar/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/SearchBar/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/SearchBar/src/index.scss b/examples/carbon-for-ibm-products/SearchBar/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/SearchBar/src/index.scss +++ b/examples/carbon-for-ibm-products/SearchBar/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/SidePanel/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/SidePanel/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/SidePanel/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/SidePanel/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/SidePanel/src/index.scss b/examples/carbon-for-ibm-products/SidePanel/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/SidePanel/src/index.scss +++ b/examples/carbon-for-ibm-products/SidePanel/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/StatusIcon/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/StatusIcon/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/StatusIcon/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/StatusIcon/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/StatusIcon/src/index.scss b/examples/carbon-for-ibm-products/StatusIcon/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/StatusIcon/src/index.scss +++ b/examples/carbon-for-ibm-products/StatusIcon/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/StatusIndicator/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/StatusIndicator/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/StatusIndicator/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/StatusIndicator/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/StatusIndicator/src/index.scss b/examples/carbon-for-ibm-products/StatusIndicator/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/StatusIndicator/src/index.scss +++ b/examples/carbon-for-ibm-products/StatusIndicator/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/StringFormatter/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/StringFormatter/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/StringFormatter/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/StringFormatter/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/StringFormatter/src/index.scss b/examples/carbon-for-ibm-products/StringFormatter/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/StringFormatter/src/index.scss +++ b/examples/carbon-for-ibm-products/StringFormatter/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/TagOverflow/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/TagOverflow/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/TagOverflow/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/TagOverflow/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/TagOverflow/src/index.scss b/examples/carbon-for-ibm-products/TagOverflow/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/TagOverflow/src/index.scss +++ b/examples/carbon-for-ibm-products/TagOverflow/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/TagSet/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/TagSet/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/TagSet/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/TagSet/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/TagSet/src/index.scss b/examples/carbon-for-ibm-products/TagSet/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/TagSet/src/index.scss +++ b/examples/carbon-for-ibm-products/TagSet/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/Tearsheet/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/Tearsheet/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/Tearsheet/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/Tearsheet/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/Tearsheet/src/index.scss b/examples/carbon-for-ibm-products/Tearsheet/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/Tearsheet/src/index.scss +++ b/examples/carbon-for-ibm-products/Tearsheet/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/TruncatedList/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/TruncatedList/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/TruncatedList/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/TruncatedList/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/TruncatedList/src/index.scss b/examples/carbon-for-ibm-products/TruncatedList/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/TruncatedList/src/index.scss +++ b/examples/carbon-for-ibm-products/TruncatedList/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/UserAvatar/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/UserAvatar/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/UserAvatar/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/UserAvatar/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/UserAvatar/src/index.scss b/examples/carbon-for-ibm-products/UserAvatar/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/UserAvatar/src/index.scss +++ b/examples/carbon-for-ibm-products/UserAvatar/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/UserProfileImage/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/UserProfileImage/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/UserProfileImage/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/UserProfileImage/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/UserProfileImage/src/index.scss b/examples/carbon-for-ibm-products/UserProfileImage/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/UserProfileImage/src/index.scss +++ b/examples/carbon-for-ibm-products/UserProfileImage/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/WebTerminal/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/WebTerminal/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/WebTerminal/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/WebTerminal/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/WebTerminal/src/index.scss b/examples/carbon-for-ibm-products/WebTerminal/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/WebTerminal/src/index.scss +++ b/examples/carbon-for-ibm-products/WebTerminal/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/example-gallery/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/example-gallery/src/ThemeSelector/_theme-dropdown.scss index a9c6b9015c..2194eb607b 100644 --- a/examples/carbon-for-ibm-products/example-gallery/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/example-gallery/src/ThemeSelector/_theme-dropdown.scss @@ -1,7 +1,7 @@ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; .carbon-theme--white { @include theme(themes.$white, true); diff --git a/examples/carbon-for-ibm-products/example-gallery/src/_storybook-styles.scss b/examples/carbon-for-ibm-products/example-gallery/src/_storybook-styles.scss index 6051f2150e..4bb352e5c3 100644 --- a/examples/carbon-for-ibm-products/example-gallery/src/_storybook-styles.scss +++ b/examples/carbon-for-ibm-products/example-gallery/src/_storybook-styles.scss @@ -1,6 +1,4 @@ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; // @use '@carbon/ibm-products/css/index'; @use './components/_Gallery'; @use './components/_GalleryCard'; diff --git a/examples/carbon-for-ibm-products/example-gallery/src/index.scss b/examples/carbon-for-ibm-products/example-gallery/src/index.scss index 603100b1c9..d7393e26f6 100644 --- a/examples/carbon-for-ibm-products/example-gallery/src/index.scss +++ b/examples/carbon-for-ibm-products/example-gallery/src/index.scss @@ -1,4 +1,2 @@ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/prefix-example/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/prefix-example/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/prefix-example/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/prefix-example/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/prefix-example/src/index.scss b/examples/carbon-for-ibm-products/prefix-example/src/index.scss index f5e1f035ea..89afaef5df 100644 --- a/examples/carbon-for-ibm-products/prefix-example/src/index.scss +++ b/examples/carbon-for-ibm-products/prefix-example/src/index.scss @@ -5,9 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; /* You can @use the css but that does not permit setting of a prefix * @use '@carbon/ibm-products/css/index'; * diff --git a/examples/carbon-for-ibm-products/react-16-example/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/react-16-example/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/react-16-example/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/react-16-example/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/react-16-example/src/index.scss b/examples/carbon-for-ibm-products/react-16-example/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/react-16-example/src/index.scss +++ b/examples/carbon-for-ibm-products/react-16-example/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/examples/carbon-for-ibm-products/react-17-example/src/ThemeSelector/_theme-dropdown.scss b/examples/carbon-for-ibm-products/react-17-example/src/ThemeSelector/_theme-dropdown.scss index 45eb4ab6e6..1aad3549d4 100644 --- a/examples/carbon-for-ibm-products/react-17-example/src/ThemeSelector/_theme-dropdown.scss +++ b/examples/carbon-for-ibm-products/react-17-example/src/ThemeSelector/_theme-dropdown.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/config'; // Best to stick with user preference - DARK @media (prefers-color-scheme: dark) { diff --git a/examples/carbon-for-ibm-products/react-17-example/src/index.scss b/examples/carbon-for-ibm-products/react-17-example/src/index.scss index b008a957c7..2823fb349e 100644 --- a/examples/carbon-for-ibm-products/react-17-example/src/index.scss +++ b/examples/carbon-for-ibm-products/react-17-example/src/index.scss @@ -5,7 +5,5 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); +@use '@carbon/react'; @use '@carbon/ibm-products/css/index'; diff --git a/package.json b/package.json index 529b9e5776..013cd6ecd7 100644 --- a/package.json +++ b/package.json @@ -34,9 +34,9 @@ "coverage": "echo 'you can pass a name argument to specify which tests are ran such as `yarn coverage decorator` and then view the results with `yarn coverage:report`'; yarn test:c4p --coverage", "coverage:report": "open ./packages/ibm-products/coverage/index.html", "format": "run-p -s 'format:*'", - "format:config": "prettier ./*.{js,jsx,tsx,ts,md,scss} --write --ignore-unknown", - "format:packages": "prettier ./packages/**/*.{js,jsx,tsx,ts,md,scss} --write --ignore-unknown", - "format:e2e": "prettier ./e2e/**/*.js --write --ignore-unknown", + "format:config": "prettier './*.{js,jsx,tsx,ts,md,scss}' --write --ignore-unknown", + "format:packages": "prettier './packages/**/*.{js,jsx,tsx,ts,md,scss}' --write --ignore-unknown", + "format:e2e": "prettier './e2e/**/*.js' --write --ignore-unknown", "format:diff": "prettier --list-different '**/*.{js,jsx,md,scss,ts,tsx}' '*.{js,jsx,md,scss,ts,tsx}' '!**/{build,es,lib,storybook,ts,umd}/**' '!examples/**/*' '!scripts/**/*'", "generate": "lerna run generate --loglevel success --scope \"@carbon/ibm-products\" --", "lint": "run-p -s 'lint:*'", @@ -85,10 +85,10 @@ "@typescript-eslint/parser": "^8.20.0", "accessibility-checker": "^3.1.79", "cheerio": "^1.0.0", - "commander": "^13.0.0", + "commander": "^12.0.0", "copyfiles": "^2.4.1", "cspell": "^8.17.2", - "eslint": "^9.18.0", + "eslint": "^8.56.0", "eslint-config-carbon": "3.17.1", "eslint-plugin-ssr-friendly": "^1.3.0", "gitignore-to-glob": "^0.3.0", diff --git a/packages/core/.storybook/Annotation/_annotation.scss b/packages/core/.storybook/Annotation/_annotation.scss index fa26fd930b..a19b5b0314 100644 --- a/packages/core/.storybook/Annotation/_annotation.scss +++ b/packages/core/.storybook/Annotation/_annotation.scss @@ -1,10 +1,10 @@ @use 'sass:map'; -@use '@carbon/styles/scss/colors'; -@use '@carbon/styles/scss/theme'; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/components/tag'; +@use '@carbon/react/scss/colors'; +@use '@carbon/react/scss/theme'; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/components/tag'; @use '../../../ibm-products-styles/src/global/styles/project-settings' as *; diff --git a/packages/core/.storybook/index.scss b/packages/core/.storybook/index.scss index 24482a01ce..a08f9b8c9b 100644 --- a/packages/core/.storybook/index.scss +++ b/packages/core/.storybook/index.scss @@ -5,24 +5,16 @@ // LICENSE file in the root directory of this source tree. // -// We need to specify the $font-path first otherwise the config -// is specified by components forwarded from index-without-carbon.scss -// and can't be changed again. This will result in plex 404s when -// running storybook. -@use '@carbon/styles/scss/config' with ( - $font-path: '@ibm/plex' -); - // Load the C&CS styles first, excluding Carbon styles. We will then load full // Carbon styles at the end -- this is to obtain a "worst case" for our own CSS, // to ensure we are resilient against different CSS loading orders and our // styles have the specificity necessary to override Carbon styles when needed. -@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings; // loads config.css or config-dev.scss from ibm-prodcuts/src (see main.js) -@use '../../ibm-products-styles/src/index-without-carbon.scss'; +@use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings; // loads config.css or config-dev.scss from ibm-products/src (see main.js) +@use '../../ibm-products-styles/src/index-without-carbon'; // Load all Carbon styles now -@use '@carbon/styles' as styles; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/react' as styles; +@use '@carbon/react/scss/theme' as *; @use '@carbon/react/scss/spacing' as *; @use './Annotation/annotation'; diff --git a/packages/core/package.json b/packages/core/package.json index 15eb290ce6..a0167accbd 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -19,8 +19,8 @@ ], "scripts": { "build": "run-s build:carbon build:storybook", - "build:carbon": "sass --style=expanded --load-path ../ibm-products/node_modules --load-path ../../node_modules --load-path node_modules .storybook/carbon.scss:css/carbon.css", - "build:storybook": "yarn dlx cross-env \"NODE_OPTIONS=--max_old_space_size=8192\" && storybook build", + "build:carbon": "sass -q --quiet-deps --style=expanded --load-path ../ibm-products/node_modules --load-path ../../node_modules --load-path node_modules .storybook/carbon.scss:css/carbon.css", + "build:storybook": "yarn dlx cross-env \"NODE_OPTIONS=--max_old_space_size=8192\" && storybook build --quiet", "clean": "yarn dlx rimraf storybook-static css", "start": "run-s build:carbon start:storybook", "start:storybook": "storybook dev ./public -p 3000", diff --git a/packages/core/src/welcome/_storybook-styles.scss b/packages/core/src/welcome/_storybook-styles.scss index b45ddae6ac..d32a54033e 100644 --- a/packages/core/src/welcome/_storybook-styles.scss +++ b/packages/core/src/welcome/_storybook-styles.scss @@ -6,12 +6,10 @@ // @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings; -@use '@carbon/react' with ( - $font-path: '@ibm/plex' -); -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/colors'; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/colors'; +@use '@carbon/react/scss/spacing' as *; body { @include type.reset(); diff --git a/packages/ibm-products-styles/package.json b/packages/ibm-products-styles/package.json index 6999008b4d..dcee2e92d7 100644 --- a/packages/ibm-products-styles/package.json +++ b/packages/ibm-products-styles/package.json @@ -37,8 +37,8 @@ "build": "run-s clean build-first build-all build-css-update-maps", "build-all": "run-p 'build:*'", "build-first": "copyfiles 'src/**/*.scss' scss -u 1", - "build:css-dev": "sass --style=expanded --load-path node_modules --load-path ../../node_modules scss:css", - "build:css-min": "sass --style=compressed --load-path node_modules --load-path ../../node_modules scss/index.scss:css/index.min.css scss/index-full-carbon.scss:css/index-full-carbon.min.css scss/index-without-carbon.scss:css/index-without-carbon.min.css scss/index-without-carbon-released-only.scss:css/index-without-carbon-released-only.min.css", + "build:css-dev": "sass -q --quiet-deps --style=expanded --load-path node_modules --load-path ../../node_modules scss:css", + "build:css-min": "sass -q --quiet-deps --style=compressed --load-path node_modules --load-path ../../node_modules scss/index.scss:css/index.min.css scss/index-full-carbon.scss:css/index-full-carbon.min.css scss/index-without-carbon.scss:css/index-without-carbon.min.css scss/index-without-carbon-released-only.scss:css/index-without-carbon-released-only.min.css", "build-css-update-maps": "node ../../scripts/updateSourceMaps.js", "clean": "rimraf css scss", "postinstall": "ibmtelemetry --config=telemetry.yml", diff --git a/packages/ibm-products-styles/src/components/APIKeyModal/_api-key-modal.scss b/packages/ibm-products-styles/src/components/APIKeyModal/_api-key-modal.scss index 8b0cf5202d..7bc864c386 100644 --- a/packages/ibm-products-styles/src/components/APIKeyModal/_api-key-modal.scss +++ b/packages/ibm-products-styles/src/components/APIKeyModal/_api-key-modal.scss @@ -6,10 +6,10 @@ // // Standard imports. -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/components/button/tokens' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/components/button/tokens' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type'; @use '../../global/styles/project-settings' as c4p-settings; $block-class: #{c4p-settings.$pkg-prefix}--apikey-modal; diff --git a/packages/ibm-products-styles/src/components/AboutModal/_about-modal.scss b/packages/ibm-products-styles/src/components/AboutModal/_about-modal.scss index 5075cd2778..213dd565ac 100644 --- a/packages/ibm-products-styles/src/components/AboutModal/_about-modal.scss +++ b/packages/ibm-products-styles/src/components/AboutModal/_about-modal.scss @@ -5,9 +5,9 @@ // LICENSE file in the root directory of this source tree. // -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type'; @use '@carbon/type/scss/font-family' as *; // Standard imports. diff --git a/packages/ibm-products-styles/src/components/ActionBar/_action-bar.scss b/packages/ibm-products-styles/src/components/ActionBar/_action-bar.scss index 8474e4b704..062ff85dd3 100644 --- a/packages/ibm-products-styles/src/components/ActionBar/_action-bar.scss +++ b/packages/ibm-products-styles/src/components/ActionBar/_action-bar.scss @@ -6,7 +6,7 @@ // // Standard imports. -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/spacing' as *; @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins' as *; diff --git a/packages/ibm-products-styles/src/components/ActionSet/_action-set.scss b/packages/ibm-products-styles/src/components/ActionSet/_action-set.scss index a2adaeaed2..81be2b301b 100644 --- a/packages/ibm-products-styles/src/components/ActionSet/_action-set.scss +++ b/packages/ibm-products-styles/src/components/ActionSet/_action-set.scss @@ -7,9 +7,9 @@ @use '@carbon/layout/scss/convert' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/spacing' as *; @use '../../global/styles/project-settings' as c4p-settings; diff --git a/packages/ibm-products-styles/src/components/AddSelect/_add-select.scss b/packages/ibm-products-styles/src/components/AddSelect/_add-select.scss index e471889060..99ec62f59e 100644 --- a/packages/ibm-products-styles/src/components/AddSelect/_add-select.scss +++ b/packages/ibm-products-styles/src/components/AddSelect/_add-select.scss @@ -6,9 +6,9 @@ // // Standard imports. -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type'; @use '@carbon/type/scss/font-family' as *; // Standard imports. diff --git a/packages/ibm-products-styles/src/components/BigNumbers/_big-numbers.scss b/packages/ibm-products-styles/src/components/BigNumbers/_big-numbers.scss index 3ce0b0dbdc..72ee9c635c 100644 --- a/packages/ibm-products-styles/src/components/BigNumbers/_big-numbers.scss +++ b/packages/ibm-products-styles/src/components/BigNumbers/_big-numbers.scss @@ -7,14 +7,14 @@ // Standard imports. @use '../../global/styles/project-settings' as c4p-settings; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/type' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/type' as *; @use '../../global/styles/mixins'; @use '@carbon/react/scss/spacing' as *; -@use '@carbon/styles/scss/utilities'; +@use '@carbon/react/scss/utilities'; // Other Carbon settings if needed -// TODO: @use '@carbon/styles/scss/grid'; +// TODO: @use '@carbon/react/scss/grid'; // or // TODO: @use '@carbon/react/scss/grid'; // BigNumbers uses the following Carbon for IBM Products components: diff --git a/packages/ibm-products-styles/src/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss b/packages/ibm-products-styles/src/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss index f861452698..24d0612f23 100644 --- a/packages/ibm-products-styles/src/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +++ b/packages/ibm-products-styles/src/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss @@ -6,9 +6,9 @@ // // Standard imports. -@use '@carbon/styles/scss/breakpoint' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/utilities'; +@use '@carbon/react/scss/breakpoint' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/utilities'; @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins' as *; diff --git a/packages/ibm-products-styles/src/components/ButtonMenu/_button-menu.scss b/packages/ibm-products-styles/src/components/ButtonMenu/_button-menu.scss index b5c7da6d3e..90589b3232 100644 --- a/packages/ibm-products-styles/src/components/ButtonMenu/_button-menu.scss +++ b/packages/ibm-products-styles/src/components/ButtonMenu/_button-menu.scss @@ -6,11 +6,11 @@ // // Standard imports. -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/components/button/tokens' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/components/button/tokens' as *; @use '../../global/styles/project-settings' as c4p-settings; @use '@carbon/react/scss/theme' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/type'; // TODO: @use(s) of Carbon settings and component styles and other // related component styles used by ButtonMenu diff --git a/packages/ibm-products-styles/src/components/Card/_card.scss b/packages/ibm-products-styles/src/components/Card/_card.scss index 7be0074587..854aa68c03 100644 --- a/packages/ibm-products-styles/src/components/Card/_card.scss +++ b/packages/ibm-products-styles/src/components/Card/_card.scss @@ -8,12 +8,12 @@ // NOTE: Please do not remove the duplicate `slug` and `decorator` classes. We need both until slug is fully deprecated // Standard imports. -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type' as *; -@use '@carbon/styles/scss/motion' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type' as *; +@use '@carbon/react/scss/motion' as *; @use '../../global/styles/project-settings' as c4p-settings; -@use '@carbon/styles/scss/utilities'; +@use '@carbon/react/scss/utilities'; $block-class: #{c4p-settings.$pkg-prefix}--card; @@ -194,7 +194,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--card; @include utilities.ai-popover-gradient('default', 0, 'layer'); border: 1px solid transparent; - box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow, + box-shadow: + inset 0 -80px 70px -65px $ai-inner-shadow, 0 4px 10px 2px $ai-drop-shadow; } diff --git a/packages/ibm-products-styles/src/components/Carousel/_carousel.scss b/packages/ibm-products-styles/src/components/Carousel/_carousel.scss index ebded7b26a..55f252ee4b 100644 --- a/packages/ibm-products-styles/src/components/Carousel/_carousel.scss +++ b/packages/ibm-products-styles/src/components/Carousel/_carousel.scss @@ -8,11 +8,11 @@ // Standard imports. @use '@carbon/layout/scss/convert' as *; @use '@carbon/react/scss/colors' as *; -@use '@carbon/styles/scss/motion' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type' as *; +@use '@carbon/react/scss/motion' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type' as *; @use '../../global/styles/project-settings' as c4p-settings; // The block part of our conventional BEM class names (blockClass__E--M). diff --git a/packages/ibm-products-styles/src/components/Checklist/_checklist.scss b/packages/ibm-products-styles/src/components/Checklist/_checklist.scss index 385b069975..590ec4f175 100644 --- a/packages/ibm-products-styles/src/components/Checklist/_checklist.scss +++ b/packages/ibm-products-styles/src/components/Checklist/_checklist.scss @@ -7,10 +7,10 @@ // Standard imports. @use '@carbon/layout/scss/convert' as *; -@use '@carbon/styles/scss/motion' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/type' as *; +@use '@carbon/react/scss/motion' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/type' as *; @use '../../global/styles/project-settings' as c4p-settings; @mixin ellipsis-2-lines { diff --git a/packages/ibm-products-styles/src/components/Coachmark/_coachmark-overlay.scss b/packages/ibm-products-styles/src/components/Coachmark/_coachmark-overlay.scss index d276980ebd..c7c83fce90 100644 --- a/packages/ibm-products-styles/src/components/Coachmark/_coachmark-overlay.scss +++ b/packages/ibm-products-styles/src/components/Coachmark/_coachmark-overlay.scss @@ -15,12 +15,12 @@ @use '@carbon/layout/scss/convert' as *; @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins'; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/spacing' as *; @use '@carbon/react/scss/theme' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/type'; @use '@carbon/react/scss/colors' as *; -@use '@carbon/styles/scss/components/button/tokens' as *; -@use '@carbon/styles/scss/motion' as *; +@use '@carbon/react/scss/components/button/tokens' as *; +@use '@carbon/react/scss/motion' as *; // Define all component styles in a mixin which is then exported using // the Carbon import-once mechanism. @@ -269,7 +269,8 @@ $draghandle-btn-class: #{$block-class}__handle; } &:focus { - box-shadow: inset 0 0 0 1px $background-inverse, + box-shadow: + inset 0 0 0 1px $background-inverse, inset 0 0 0 $spacing-01 $white-0; } } @@ -292,7 +293,8 @@ $draghandle-btn-class: #{$block-class}__handle; } &:focus { - box-shadow: inset 0 0 0 1px $background-inverse, + box-shadow: + inset 0 0 0 1px $background-inverse, inset 0 0 0 $spacing-01 $white-0; } } @@ -320,7 +322,8 @@ $draghandle-btn-class: #{$block-class}__handle; .#{c4p-settings.$carbon-prefix}--btn--primary { &:focus { background-color: $button-primary-active; - box-shadow: inset 0 0 0 $spacing-01 $button-primary, + box-shadow: + inset 0 0 0 $spacing-01 $button-primary, inset 0 0 0 to-rem(3px) $button-tertiary; } } @@ -337,7 +340,9 @@ $draghandle-btn-class: #{$block-class}__handle; } &:focus { - box-shadow: inset 0 0 0 1px $blue-60, inset 0 0 0 $spacing-01 $white-0; + box-shadow: + inset 0 0 0 1px $blue-60, + inset 0 0 0 $spacing-01 $white-0; } } } @@ -353,7 +358,9 @@ $draghandle-btn-class: #{$block-class}__handle; border-color: transparent; &:focus { - box-shadow: inset 0 0 0 1px $blue-60, inset 0 0 0 $spacing-01 $white-0; + box-shadow: + inset 0 0 0 1px $blue-60, + inset 0 0 0 $spacing-01 $white-0; } &:active { diff --git a/packages/ibm-products-styles/src/components/Coachmark/_coachmark-tagline.scss b/packages/ibm-products-styles/src/components/Coachmark/_coachmark-tagline.scss index ee0aac5b19..8642413a88 100644 --- a/packages/ibm-products-styles/src/components/Coachmark/_coachmark-tagline.scss +++ b/packages/ibm-products-styles/src/components/Coachmark/_coachmark-tagline.scss @@ -12,12 +12,12 @@ // Standard imports. @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins'; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/spacing' as *; @use '@carbon/react/scss/motion' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/type'; @use '@carbon/react/scss/colors' as *; @use '@carbon/react/scss/theme' as *; -@use '@carbon/styles/scss/components/button/tokens' as *; +@use '@carbon/react/scss/components/button/tokens' as *; // Define all component styles in a mixin which is then exported using // the Carbon import-once mechanism. @@ -91,7 +91,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-tagline; @include type.type-style('body-short-01'); &:focus { - box-shadow: inset 0 0 0 3px $purple-70, inset 0 0 0 $spacing-02 $white-0; + box-shadow: + inset 0 0 0 3px $purple-70, + inset 0 0 0 $spacing-02 $white-0; outline: 1px solid transparent; } @@ -124,7 +126,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--coachmark-tagline; } &:focus { - box-shadow: inset 0 0 0 1px $background-inverse, + box-shadow: + inset 0 0 0 1px $background-inverse, inset 0 0 0 $spacing-01 $white-0 !important; } diff --git a/packages/ibm-products-styles/src/components/Coachmark/_coachmark.scss b/packages/ibm-products-styles/src/components/Coachmark/_coachmark.scss index a63a47d294..2d89dfd005 100644 --- a/packages/ibm-products-styles/src/components/Coachmark/_coachmark.scss +++ b/packages/ibm-products-styles/src/components/Coachmark/_coachmark.scss @@ -8,7 +8,7 @@ // Standard imports. @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins'; -@use '@carbon/styles/scss/config'; +@use '@carbon/react/scss/config'; @use './coachmark-dragbar'; @use './coachmark-header'; @@ -16,7 +16,7 @@ @use './coachmark-tagline'; // Other Carbon settings if needed -// TODO: @use '@carbon/styles/scss/grid'; +// TODO: @use '@carbon/react/scss/grid'; // or // TODO: @use '@carbon/react/scss/grid'; diff --git a/packages/ibm-products-styles/src/components/CoachmarkBeacon/_coachmark-beacon.scss b/packages/ibm-products-styles/src/components/CoachmarkBeacon/_coachmark-beacon.scss index 52f9ab0df9..4cde2730c7 100644 --- a/packages/ibm-products-styles/src/components/CoachmarkBeacon/_coachmark-beacon.scss +++ b/packages/ibm-products-styles/src/components/CoachmarkBeacon/_coachmark-beacon.scss @@ -11,14 +11,14 @@ // Standard imports. @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins'; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/spacing' as *; @use '@carbon/react/scss/colors' as *; @use '@carbon/react/scss/theme' as *; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/components/button/tokens' as *; -@use '@carbon/styles/scss/motion' as *; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/components/button/tokens' as *; +@use '@carbon/react/scss/motion' as *; // Other Carbon settings if needed -// TODO: @use '@carbon/styles/scss/grid'; +// TODO: @use '@carbon/react/scss/grid'; // or // TODO: @use '@carbon/react/scss/grid'; diff --git a/packages/ibm-products-styles/src/components/CoachmarkButton/_coachmark-button.scss b/packages/ibm-products-styles/src/components/CoachmarkButton/_coachmark-button.scss index 82e807bb70..ed8cd7100a 100644 --- a/packages/ibm-products-styles/src/components/CoachmarkButton/_coachmark-button.scss +++ b/packages/ibm-products-styles/src/components/CoachmarkButton/_coachmark-button.scss @@ -10,7 +10,7 @@ @use '../../global/styles/mixins'; // Other Carbon settings if needed -// TODO: @use '@carbon/styles/scss/grid'; +// TODO: @use '@carbon/react/scss/grid'; // or // TODO: @use '@carbon/react/scss/grid'; diff --git a/packages/ibm-products-styles/src/components/CoachmarkFixed/_coachmark-fixed.scss b/packages/ibm-products-styles/src/components/CoachmarkFixed/_coachmark-fixed.scss index 2f974a714b..3d5ae827e1 100644 --- a/packages/ibm-products-styles/src/components/CoachmarkFixed/_coachmark-fixed.scss +++ b/packages/ibm-products-styles/src/components/CoachmarkFixed/_coachmark-fixed.scss @@ -10,7 +10,7 @@ @use '../../global/styles/mixins'; // Other Carbon settings if needed -// TODO: @use '@carbon/styles/scss/grid'; +// TODO: @use '@carbon/react/scss/grid'; // or // TODO: @use '@carbon/react/scss/grid'; diff --git a/packages/ibm-products-styles/src/components/CoachmarkOverlayElement/_coachmark-overlay-element.scss b/packages/ibm-products-styles/src/components/CoachmarkOverlayElement/_coachmark-overlay-element.scss index ec233247b0..52c2f38a7d 100644 --- a/packages/ibm-products-styles/src/components/CoachmarkOverlayElement/_coachmark-overlay-element.scss +++ b/packages/ibm-products-styles/src/components/CoachmarkOverlayElement/_coachmark-overlay-element.scss @@ -9,10 +9,10 @@ // Standard imports. @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins'; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/spacing' as *; @use '@carbon/react/scss/type' as *; // Other Carbon settings if needed -// TODO: @use '@carbon/styles/scss/grid'; +// TODO: @use '@carbon/react/scss/grid'; // or // TODO: @use '@carbon/react/scss/grid'; diff --git a/packages/ibm-products-styles/src/components/CoachmarkOverlayElements/_coachmark-overlay-elements.scss b/packages/ibm-products-styles/src/components/CoachmarkOverlayElements/_coachmark-overlay-elements.scss index d229205cd7..9bc37d1ed6 100644 --- a/packages/ibm-products-styles/src/components/CoachmarkOverlayElements/_coachmark-overlay-elements.scss +++ b/packages/ibm-products-styles/src/components/CoachmarkOverlayElements/_coachmark-overlay-elements.scss @@ -11,11 +11,11 @@ @use '../../global/styles/mixins'; @use '@carbon/layout/scss/convert' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/spacing' as *; // Other Carbon settings if needed -// TODO: @use '@carbon/styles/scss/grid'; +// TODO: @use '@carbon/react/scss/grid'; // or // TODO: @use '@carbon/react/scss/grid'; diff --git a/packages/ibm-products-styles/src/components/CoachmarkStack/_coachmark-stack.scss b/packages/ibm-products-styles/src/components/CoachmarkStack/_coachmark-stack.scss index afc8c185eb..cdce5cca7f 100644 --- a/packages/ibm-products-styles/src/components/CoachmarkStack/_coachmark-stack.scss +++ b/packages/ibm-products-styles/src/components/CoachmarkStack/_coachmark-stack.scss @@ -10,14 +10,14 @@ // Standard imports. @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins'; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/spacing' as *; @use '@carbon/react/scss/motion' as *; @use '@carbon/react/scss/colors' as *; @use '@carbon/react/scss/theme' as *; @use '@carbon/layout/scss/convert'; -@use '@carbon/styles/scss/components/button/tokens' as *; +@use '@carbon/react/scss/components/button/tokens' as *; // Other Carbon settings if needed -// TODO: @use '@carbon/styles/scss/grid'; +// TODO: @use '@carbon/react/scss/grid'; // or // TODO: @use '@carbon/react/scss/grid'; diff --git a/packages/ibm-products-styles/src/components/ComboButton/_carbon-imports.scss b/packages/ibm-products-styles/src/components/ComboButton/_carbon-imports.scss index 323cd103c5..f1f41a5314 100644 --- a/packages/ibm-products-styles/src/components/ComboButton/_carbon-imports.scss +++ b/packages/ibm-products-styles/src/components/ComboButton/_carbon-imports.scss @@ -7,5 +7,5 @@ // ComboButton uses the following Carbon components: // Button, OverflowMenu -@use '@carbon/styles/scss/components/button'; -@use '@carbon/styles/scss/components/overflow-menu'; +@use '@carbon/react/scss/components/button'; +@use '@carbon/react/scss/components/overflow-menu'; diff --git a/packages/ibm-products-styles/src/components/ComboButton/_combo-button.scss b/packages/ibm-products-styles/src/components/ComboButton/_combo-button.scss index d85d9b91d7..85a627d0a6 100644 --- a/packages/ibm-products-styles/src/components/ComboButton/_combo-button.scss +++ b/packages/ibm-products-styles/src/components/ComboButton/_combo-button.scss @@ -5,9 +5,9 @@ // LICENSE file in the root directory of this source tree. // -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/components/button/tokens' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/components/button/tokens' as *; @use '../../global/styles/project-settings' as c4p-settings; .#{c4p-settings.$pkg-prefix}--combo-button { diff --git a/packages/ibm-products-styles/src/components/ConditionBuilder/_condition-builder.scss b/packages/ibm-products-styles/src/components/ConditionBuilder/_condition-builder.scss index ef02c1ffc6..8d174da8ac 100644 --- a/packages/ibm-products-styles/src/components/ConditionBuilder/_condition-builder.scss +++ b/packages/ibm-products-styles/src/components/ConditionBuilder/_condition-builder.scss @@ -14,7 +14,7 @@ @use './styles/index'; // Other Carbon settings if needed -// TODO: @use '@carbon/styles/scss/grid'; +// TODO: @use '@carbon/react/scss/grid'; // or // TODO: @use '@carbon/react/scss/grid'; diff --git a/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderCondition.scss b/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderCondition.scss index 42afda3f3a..1207c13e06 100644 --- a/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderCondition.scss +++ b/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderCondition.scss @@ -8,11 +8,11 @@ @use '@carbon/react/scss/theme' as *; @use '@carbon/react/scss/spacing' as *; @use '@carbon/react/scss/motion' as *; -@use '@carbon/styles/scss/components/tag' as *; -@use '@carbon/styles/scss/utilities/focus-outline'; +@use '@carbon/react/scss/components/tag' as *; +@use '@carbon/react/scss/utilities/focus-outline'; @use '../../../global/styles/project-settings' as c4p-settings; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/type' as *; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/type' as *; @use '@carbon/react/scss/utilities'; $block-class: #{c4p-settings.$pkg-prefix}--condition-builder; diff --git a/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss b/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss index 0d018a6872..281f684677 100644 --- a/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss +++ b/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss @@ -1,3 +1,4 @@ +// stylelint-disable carbon/theme-use, declaration-empty-line-before /** * Copyright IBM Corp. 2024 * @@ -10,14 +11,14 @@ @use 'sass:string'; @use '@carbon/react/scss/theme' as *; @use '../../../global/styles/project-settings' as c4p-settings; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/type'; @use '@carbon/react/scss/spacing' as *; @use '@carbon/react/scss/utilities'; @use '@carbon/react/scss/motion' as *; @use '@carbon/react/scss/utilities/focus-outline'; -@use '@carbon/styles/scss/components/tag'; +@use '@carbon/react/scss/components/tag'; -@use '@carbon/styles/scss/type' as *; +@use '@carbon/react/scss/type' as *; @use '@carbon/react/scss/colors' as *; $block-class: #{c4p-settings.$pkg-prefix}--condition-builder; @@ -204,24 +205,20 @@ $colors: ( //this is to select and add color to the new group preview .#{$block-class}__group-preview[data-color-index='#{($i%list.length($colors))}'] button { - /* stylelint-disable-next-line carbon/theme-use */ $next-group-color: list.nth($colors, (($i%list.length($colors)) + 1)); - /* stylelint-disable-next-line carbon/theme-use */ box-shadow: inset 0 #{$spacing-01} 0 0 list.nth($next-group-color, 1); } //we need to select the group color from the $colors array and need to repeat the colors after $colors.length subgroups @for $el-index from 1 through 50 { $item-index: $el-index; - /* stylelint-disable-next-line carbon/theme-use */ $item-index: ((($item-index - 1) % $group-colors-length) + 1); #{$selector} { @if $item-index != 1 { - /* stylelint-disable-next-line carbon/theme-use */ --#{$block-class}__condition-wrapper-color: #{list.nth( $group-colors, $item-index - )}; // stylelint-disable-line carbon/theme-use + )}; } } @@ -248,8 +245,8 @@ $colors: ( .#{$block-class}__add-button, .#{$block-class}__add-condition-sub-group ) { - /* stylelint-disable-next-line carbon/theme-use */ - box-shadow: inset 0 #{$spacing-01} 0 0 var(--#{$block-class}__condition-wrapper-color); + box-shadow: inset 0 #{$spacing-01} 0 0 + var(--#{$block-class}__condition-wrapper-color); } } diff --git a/packages/ibm-products-styles/src/components/CreateFullPage/_create-full-page.scss b/packages/ibm-products-styles/src/components/CreateFullPage/_create-full-page.scss index fca2991111..e7c39380f9 100644 --- a/packages/ibm-products-styles/src/components/CreateFullPage/_create-full-page.scss +++ b/packages/ibm-products-styles/src/components/CreateFullPage/_create-full-page.scss @@ -6,9 +6,9 @@ // // Standard imports. -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type'; @use '../../global/styles/project-settings' as c4p-settings; // CreateFullPage uses the following IBM Products components: diff --git a/packages/ibm-products-styles/src/components/CreateInfluencer/_create-influencer.scss b/packages/ibm-products-styles/src/components/CreateInfluencer/_create-influencer.scss index 4848180e0a..df53929e78 100644 --- a/packages/ibm-products-styles/src/components/CreateInfluencer/_create-influencer.scss +++ b/packages/ibm-products-styles/src/components/CreateInfluencer/_create-influencer.scss @@ -5,10 +5,10 @@ // LICENSE file in the root directory of this source tree. // -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/motion' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/motion' as *; @use '../../global/styles/project-settings' as c4p-settings; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/type'; $influencer-block-class: #{c4p-settings.$pkg-prefix}--create-influencer; $create-tearsheet-block-class: #{c4p-settings.$pkg-prefix}--tearsheet-create; diff --git a/packages/ibm-products-styles/src/components/CreateModal/_create-modal.scss b/packages/ibm-products-styles/src/components/CreateModal/_create-modal.scss index e0f8055599..eb1518fbce 100644 --- a/packages/ibm-products-styles/src/components/CreateModal/_create-modal.scss +++ b/packages/ibm-products-styles/src/components/CreateModal/_create-modal.scss @@ -6,10 +6,10 @@ // // Standard imports. -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/breakpoint' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/breakpoint' as *; +@use '@carbon/react/scss/type'; @use '../../global/styles/project-settings' as c4p-settings; .#{c4p-settings.$pkg-prefix}--create-modal diff --git a/packages/ibm-products-styles/src/components/CreateSidePanel/_create-side-panel.scss b/packages/ibm-products-styles/src/components/CreateSidePanel/_create-side-panel.scss index a235d605d7..4c984932d7 100644 --- a/packages/ibm-products-styles/src/components/CreateSidePanel/_create-side-panel.scss +++ b/packages/ibm-products-styles/src/components/CreateSidePanel/_create-side-panel.scss @@ -6,9 +6,9 @@ // // Standard imports. -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type'; @use '../../global/styles/project-settings' as c4p-settings; @use '../SidePanel/side-panel-variables' as side-panel-vars; diff --git a/packages/ibm-products-styles/src/components/CreateTearsheet/_create-tearsheet.scss b/packages/ibm-products-styles/src/components/CreateTearsheet/_create-tearsheet.scss index fcb5efe462..3db918f77a 100644 --- a/packages/ibm-products-styles/src/components/CreateTearsheet/_create-tearsheet.scss +++ b/packages/ibm-products-styles/src/components/CreateTearsheet/_create-tearsheet.scss @@ -6,12 +6,12 @@ // // Other Carbon settings. -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/react/scss/theme' as *; @use '@carbon/react/scss/components/button/tokens' as *; @use '@carbon/react/scss/grid' as *; -@use '@carbon/styles/scss/motion' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/motion' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type'; // Standard imports. @use '../../global/styles/project-settings' as c4p-settings; diff --git a/packages/ibm-products-styles/src/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss b/packages/ibm-products-styles/src/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss index a272a9018f..8b3c907f55 100644 --- a/packages/ibm-products-styles/src/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss +++ b/packages/ibm-products-styles/src/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss @@ -6,9 +6,9 @@ // // Standard imports. -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type'; @use '../../global/styles/project-settings' as c4p-settings; // CreateTearsheetNarrow uses the following IBM Products components: diff --git a/packages/ibm-products-styles/src/components/DataSpreadsheet/_data-spreadsheet.scss b/packages/ibm-products-styles/src/components/DataSpreadsheet/_data-spreadsheet.scss index 56e51fd0cc..c9ff8ac274 100644 --- a/packages/ibm-products-styles/src/components/DataSpreadsheet/_data-spreadsheet.scss +++ b/packages/ibm-products-styles/src/components/DataSpreadsheet/_data-spreadsheet.scss @@ -6,11 +6,11 @@ // // Standard imports. -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type'; @use '@carbon/type/scss/font-family'; -@use '@carbon/styles/scss/utilities'; +@use '@carbon/react/scss/utilities'; @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins' as *; diff --git a/packages/ibm-products-styles/src/components/Datagrid/_datagrid.scss b/packages/ibm-products-styles/src/components/Datagrid/_datagrid.scss index fe8df49059..26496926f0 100644 --- a/packages/ibm-products-styles/src/components/Datagrid/_datagrid.scss +++ b/packages/ibm-products-styles/src/components/Datagrid/_datagrid.scss @@ -6,8 +6,8 @@ // // Standard imports. -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins'; diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss index 5361f14a25..4ac689ce1b 100644 --- a/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss +++ b/packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss @@ -5,13 +5,13 @@ // LICENSE file in the root directory of this source tree. // -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/utilities' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/utilities' as *; @use '@carbon/layout/scss/convert' as *; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/spacing' as *; @use '@carbon/react/scss/components/button/tokens' as *; @use '../../../global/styles/project-settings' as c4p-settings; -@use '@carbon/styles/scss/breakpoint'; +@use '@carbon/react/scss/breakpoint'; @use './variables' as *; .#{$block-class}__table-toolbar > section { diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/_draggableElement.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/_draggableElement.scss index c21f826a26..4b9f5369a3 100644 --- a/packages/ibm-products-styles/src/components/Datagrid/styles/_draggableElement.scss +++ b/packages/ibm-products-styles/src/components/Datagrid/styles/_draggableElement.scss @@ -5,10 +5,10 @@ // LICENSE file in the root directory of this source tree. // -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/colors'; -@use '@carbon/styles/scss/motion' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/colors'; +@use '@carbon/react/scss/motion' as *; @use './variables'; .#{variables.$block-class}__draggable-handleStyle { diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/_useActionsColumn.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/_useActionsColumn.scss index fcbe141c44..868899b55c 100644 --- a/packages/ibm-products-styles/src/components/Datagrid/styles/_useActionsColumn.scss +++ b/packages/ibm-products-styles/src/components/Datagrid/styles/_useActionsColumn.scss @@ -5,8 +5,8 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme'; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme'; @use './variables'; .#{variables.$block-class}__actions-column-cell { diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/_useExpandedRow.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/_useExpandedRow.scss index cd7407f3f9..115a3ba240 100644 --- a/packages/ibm-products-styles/src/components/Datagrid/styles/_useExpandedRow.scss +++ b/packages/ibm-products-styles/src/components/Datagrid/styles/_useExpandedRow.scss @@ -6,8 +6,8 @@ */ @use '../../../global/styles/project-settings' as c4p-settings; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; @use './variables'; @mixin shared-pseudo-styles() { diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/_useInlineEdit.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/_useInlineEdit.scss index 04c5a23263..458574c301 100644 --- a/packages/ibm-products-styles/src/components/Datagrid/styles/_useInlineEdit.scss +++ b/packages/ibm-products-styles/src/components/Datagrid/styles/_useInlineEdit.scss @@ -6,9 +6,9 @@ */ @use '../../../global/styles/project-settings' as c4p-settings; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/components/button/tokens' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/components/button/tokens' as *; @use '@carbon/type' as *; @use './variables'; diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/_useNestedRows.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/_useNestedRows.scss index a30c98229c..5fb2a2bde1 100644 --- a/packages/ibm-products-styles/src/components/Datagrid/styles/_useNestedRows.scss +++ b/packages/ibm-products-styles/src/components/Datagrid/styles/_useNestedRows.scss @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; @use '../../../global/styles/project-settings' as c4p-settings; -@use '@carbon/styles/scss/motion' as *; +@use '@carbon/react/scss/motion' as *; @use './variables' as *; .#{c4p-settings.$carbon-prefix}--data-table diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/_useNestedTable.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/_useNestedTable.scss index ddebc242dc..360d87f41b 100644 --- a/packages/ibm-products-styles/src/components/Datagrid/styles/_useNestedTable.scss +++ b/packages/ibm-products-styles/src/components/Datagrid/styles/_useNestedTable.scss @@ -5,8 +5,8 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; @use '../../../global/styles/project-settings' as c4p-settings; @use './variables'; diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/_useSelectAllToggle.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/_useSelectAllToggle.scss index e758ba9d10..08655abcd0 100644 --- a/packages/ibm-products-styles/src/components/Datagrid/styles/_useSelectAllToggle.scss +++ b/packages/ibm-products-styles/src/components/Datagrid/styles/_useSelectAllToggle.scss @@ -5,8 +5,8 @@ // LICENSE file in the root directory of this source tree. // -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; @use './variables'; @use '../../../global/styles/project-settings' as c4p-settings; diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/_useSortableColumns.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/_useSortableColumns.scss index 2629215966..d8fc1d7207 100644 --- a/packages/ibm-products-styles/src/components/Datagrid/styles/_useSortableColumns.scss +++ b/packages/ibm-products-styles/src/components/Datagrid/styles/_useSortableColumns.scss @@ -5,9 +5,9 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/react/scss/theme' as *; @use '../../../global/styles/project-settings' as c4p-settings; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/spacing' as *; @use './variables' as *; .#{$block-class}__sortableColumn { diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/_useStickyColumn.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/_useStickyColumn.scss index 65b5a7bcde..0dc87d5d3b 100644 --- a/packages/ibm-products-styles/src/components/Datagrid/styles/_useStickyColumn.scss +++ b/packages/ibm-products-styles/src/components/Datagrid/styles/_useStickyColumn.scss @@ -5,8 +5,8 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; @use './variables'; .#{variables.$block-class}__right-sticky-column-cell { diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss index 2f0ef9024f..0ff2065141 100644 --- a/packages/ibm-products-styles/src/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss +++ b/packages/ibm-products-styles/src/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss @@ -7,9 +7,9 @@ // stylelint-disable carbon/layout-use -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing'; -@use '@carbon/styles/scss/type' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing'; +@use '@carbon/react/scss/type' as *; @use '@carbon/type/scss/font-family'; @use '@carbon/layout' as *; @use '@carbon/layout/scss/convert'; diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/addons/_FilterFlyout.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/addons/_FilterFlyout.scss index db4e45fc90..44f1f1dba7 100644 --- a/packages/ibm-products-styles/src/components/Datagrid/styles/addons/_FilterFlyout.scss +++ b/packages/ibm-products-styles/src/components/Datagrid/styles/addons/_FilterFlyout.scss @@ -7,10 +7,10 @@ // stylelint-disable carbon/layout-use -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/react/scss/theme' as *; @use '@carbon/layout/scss/convert' as *; -@use '@carbon/styles/scss/spacing'; -@use '@carbon/styles/scss/type' as *; +@use '@carbon/react/scss/spacing'; +@use '@carbon/react/scss/type' as *; @use '@carbon/layout' as *; @use '../../../../global/styles/project-settings' as c4p-settings; diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/addons/_FilterPanel.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/addons/_FilterPanel.scss index 5bcc4eaa82..347f1560f2 100644 --- a/packages/ibm-products-styles/src/components/Datagrid/styles/addons/_FilterPanel.scss +++ b/packages/ibm-products-styles/src/components/Datagrid/styles/addons/_FilterPanel.scss @@ -6,10 +6,10 @@ // @use '../variables' as *; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/react/scss/theme' as *; @use '@carbon/layout/scss/convert' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type' as *; @use '../../../../global/styles/project-settings' as c4p-settings; .#{$block-class}-filter-panel__container { diff --git a/packages/ibm-products-styles/src/components/Datagrid/styles/addons/_RowSizeDropdown.scss b/packages/ibm-products-styles/src/components/Datagrid/styles/addons/_RowSizeDropdown.scss index 5abd202a9f..8ebc03dac5 100644 --- a/packages/ibm-products-styles/src/components/Datagrid/styles/addons/_RowSizeDropdown.scss +++ b/packages/ibm-products-styles/src/components/Datagrid/styles/addons/_RowSizeDropdown.scss @@ -5,15 +5,17 @@ * LICENSE file in the root directory of this source tree. */ -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; @use '../../../../global/styles/project-settings' as c4p-settings; @use '../variables'; .#{variables.$block-class} .#{variables.$block-class}__row-size-toggle-tip-content { background-color: $layer-02; - box-shadow: 1px 4px 8px -3px $overlay, -1px 6px 8px -5px $overlay; + box-shadow: + 1px 4px 8px -3px $overlay, + -1px 6px 8px -5px $overlay; } .#{variables.$block-class} diff --git a/packages/ibm-products-styles/src/components/DecoratorBase/_decorator-base-mixins.scss b/packages/ibm-products-styles/src/components/DecoratorBase/_decorator-base-mixins.scss index a6b6764559..9471388ac9 100644 --- a/packages/ibm-products-styles/src/components/DecoratorBase/_decorator-base-mixins.scss +++ b/packages/ibm-products-styles/src/components/DecoratorBase/_decorator-base-mixins.scss @@ -7,7 +7,7 @@ /* stylelint-disable carbon/layout-use */ -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/react/scss/theme' as *; // Use value-divider() by default for the component's dividing line. @mixin value-divider($top: 0, $bottom: 0, $left: 0, $color: $border-subtle-02) { diff --git a/packages/ibm-products-styles/src/components/DecoratorBase/_decorator-base.scss b/packages/ibm-products-styles/src/components/DecoratorBase/_decorator-base.scss index 261d3a4c2b..fb09dea51f 100644 --- a/packages/ibm-products-styles/src/components/DecoratorBase/_decorator-base.scss +++ b/packages/ibm-products-styles/src/components/DecoratorBase/_decorator-base.scss @@ -17,10 +17,10 @@ // DecoratorBase uses the following Carbon for IBM Products components: @use '@carbon/layout/scss/convert' as *; @use '@carbon/react/scss/colors' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; // The block part of our conventional BEM class names (blockClass__E--M). $block-class: #{c4p-settings.$pkg-prefix}--decorator; diff --git a/packages/ibm-products-styles/src/components/DecoratorDualButton/_decorator-dual-button.scss b/packages/ibm-products-styles/src/components/DecoratorDualButton/_decorator-dual-button.scss index 498fc60557..ffc8b2d323 100644 --- a/packages/ibm-products-styles/src/components/DecoratorDualButton/_decorator-dual-button.scss +++ b/packages/ibm-products-styles/src/components/DecoratorDualButton/_decorator-dual-button.scss @@ -16,9 +16,9 @@ // DecoratorDualButton uses the following Carbon for IBM Products components: @use '@carbon/layout/scss/convert' as *; -@use '@carbon/styles/scss/colors' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/colors' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/type'; // The block part of our conventional BEM class names (blockClass__E--M). $block-class: #{c4p-settings.$pkg-prefix}--decorator; diff --git a/packages/ibm-products-styles/src/components/DecoratorLink/_decorator-link.scss b/packages/ibm-products-styles/src/components/DecoratorLink/_decorator-link.scss index 5288b096f8..9906a72acd 100644 --- a/packages/ibm-products-styles/src/components/DecoratorLink/_decorator-link.scss +++ b/packages/ibm-products-styles/src/components/DecoratorLink/_decorator-link.scss @@ -13,9 +13,9 @@ @use '../DecoratorBase/decorator-base'; // DecoratorLink uses the following Carbon for IBM Products components: -@use '@carbon/styles/scss/colors' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/colors' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/type'; // The block part of our conventional BEM class names (blockClass__E--M). $block-class: #{c4p-settings.$pkg-prefix}--decorator; diff --git a/packages/ibm-products-styles/src/components/DecoratorSingleButton/_decorator-single-button.scss b/packages/ibm-products-styles/src/components/DecoratorSingleButton/_decorator-single-button.scss index 478d2aafec..3db14622d7 100644 --- a/packages/ibm-products-styles/src/components/DecoratorSingleButton/_decorator-single-button.scss +++ b/packages/ibm-products-styles/src/components/DecoratorSingleButton/_decorator-single-button.scss @@ -17,9 +17,9 @@ // DecoratorSingleButton uses the following Carbon for IBM Products components: @use '@carbon/layout/scss/convert' as *; -@use '@carbon/styles/scss/colors' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/colors' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/type'; // The block part of our conventional BEM class names (blockClass__E--M). $block-class: #{c4p-settings.$pkg-prefix}--decorator; diff --git a/packages/ibm-products-styles/src/components/DelimitedList/_delimited-list.scss b/packages/ibm-products-styles/src/components/DelimitedList/_delimited-list.scss index 524c0f2b89..f70bb39e45 100644 --- a/packages/ibm-products-styles/src/components/DelimitedList/_delimited-list.scss +++ b/packages/ibm-products-styles/src/components/DelimitedList/_delimited-list.scss @@ -10,7 +10,7 @@ @use '../../global/styles/mixins'; // Other Carbon settings if needed -// TODO: @use '@carbon/styles/scss/grid'; +// TODO: @use '@carbon/react/scss/grid'; // or // TODO: @use '@carbon/react/scss/grid'; diff --git a/packages/ibm-products-styles/src/components/DescriptionList/_description-list.scss b/packages/ibm-products-styles/src/components/DescriptionList/_description-list.scss index 4fa4e38c50..e6675944a4 100644 --- a/packages/ibm-products-styles/src/components/DescriptionList/_description-list.scss +++ b/packages/ibm-products-styles/src/components/DescriptionList/_description-list.scss @@ -8,7 +8,7 @@ // Standard imports. @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins'; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/spacing' as *; @use '@carbon/react/scss/type' as *; @use '@carbon/react/scss/theme' as *; diff --git a/packages/ibm-products-styles/src/components/EditInPlace/_edit-in-place.scss b/packages/ibm-products-styles/src/components/EditInPlace/_edit-in-place.scss index 5b8539482f..f2b39cf6cd 100644 --- a/packages/ibm-products-styles/src/components/EditInPlace/_edit-in-place.scss +++ b/packages/ibm-products-styles/src/components/EditInPlace/_edit-in-place.scss @@ -6,11 +6,11 @@ // // Standard imports. -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; @use '../../global/styles/project-settings' as *; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/motion' as *; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/motion' as *; $block-class: #{$pkg-prefix}--edit-in-place; $carbon-input: #{$carbon-prefix}--text-input; diff --git a/packages/ibm-products-styles/src/components/EditSidePanel/_edit-side-panel.scss b/packages/ibm-products-styles/src/components/EditSidePanel/_edit-side-panel.scss index a35c77038c..8880e2edc6 100644 --- a/packages/ibm-products-styles/src/components/EditSidePanel/_edit-side-panel.scss +++ b/packages/ibm-products-styles/src/components/EditSidePanel/_edit-side-panel.scss @@ -6,8 +6,8 @@ // // Standard imports. -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type'; @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins' as *; diff --git a/packages/ibm-products-styles/src/components/EditTearsheet/_edit-tearsheet.scss b/packages/ibm-products-styles/src/components/EditTearsheet/_edit-tearsheet.scss index 897161f761..59ef63b3f9 100644 --- a/packages/ibm-products-styles/src/components/EditTearsheet/_edit-tearsheet.scss +++ b/packages/ibm-products-styles/src/components/EditTearsheet/_edit-tearsheet.scss @@ -5,11 +5,11 @@ // LICENSE file in the root directory of this source tree. // -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; @use '@carbon/react/scss/components/button/tokens' as *; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/motion'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/motion'; // Standard imports. @use '../../global/styles/project-settings' as c4p-settings; diff --git a/packages/ibm-products-styles/src/components/EmptyStates/_empty-state.scss b/packages/ibm-products-styles/src/components/EmptyStates/_empty-state.scss index 4faa03c04b..1bc53dda48 100644 --- a/packages/ibm-products-styles/src/components/EmptyStates/_empty-state.scss +++ b/packages/ibm-products-styles/src/components/EmptyStates/_empty-state.scss @@ -6,9 +6,9 @@ // // Standard imports. -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type'; @use '../../global/styles/project-settings' as c4p-settings; $block-class: #{c4p-settings.$pkg-prefix}--empty-state; diff --git a/packages/ibm-products-styles/src/components/ExampleComponent/_example-component.scss b/packages/ibm-products-styles/src/components/ExampleComponent/_example-component.scss index 0e8a4fd5a2..58e718d158 100644 --- a/packages/ibm-products-styles/src/components/ExampleComponent/_example-component.scss +++ b/packages/ibm-products-styles/src/components/ExampleComponent/_example-component.scss @@ -5,7 +5,7 @@ // LICENSE file in the root directory of this source tree. // -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/spacing' as *; // Standard imports. @use '../../global/styles/project-settings' as c4p-settings; diff --git a/packages/ibm-products-styles/src/components/ExportModal/_export-modal.scss b/packages/ibm-products-styles/src/components/ExportModal/_export-modal.scss index 63e5a04a48..76d952d420 100644 --- a/packages/ibm-products-styles/src/components/ExportModal/_export-modal.scss +++ b/packages/ibm-products-styles/src/components/ExportModal/_export-modal.scss @@ -7,7 +7,7 @@ // Standard imports. @use '@carbon/react/scss/components/button/tokens' as *; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/spacing' as *; @use '../../global/styles/project-settings' as c4p-settings; $block-class: #{c4p-settings.$pkg-prefix}--export-modal; diff --git a/packages/ibm-products-styles/src/components/ExpressiveCard/_expressive-card.scss b/packages/ibm-products-styles/src/components/ExpressiveCard/_expressive-card.scss index fb7ffef17b..f38fed6167 100644 --- a/packages/ibm-products-styles/src/components/ExpressiveCard/_expressive-card.scss +++ b/packages/ibm-products-styles/src/components/ExpressiveCard/_expressive-card.scss @@ -9,7 +9,7 @@ // Card @use '../Card/card' as *; @use '../../global/styles/project-settings' as c4p-settings; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/type'; $block-class: #{c4p-settings.$pkg-prefix}--card; diff --git a/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-accordion-item.scss b/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-accordion-item.scss index b1eb0c58d1..54ba4e24db 100644 --- a/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-accordion-item.scss +++ b/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-accordion-item.scss @@ -12,8 +12,8 @@ @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins'; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type'; // The block part of our conventional BEM class names (blockClass__E--M). $block-class: #{c4p-settings.$pkg-prefix}--filter-panel-accordion-item; diff --git a/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-checkbox-with-overflow.scss b/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-checkbox-with-overflow.scss index e2797a09a9..84f9a85c7b 100644 --- a/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-checkbox-with-overflow.scss +++ b/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-checkbox-with-overflow.scss @@ -12,8 +12,8 @@ @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins'; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; // The block part of our conventional BEM class names (blockClass__E--M). $block-class: #{c4p-settings.$pkg-prefix}--filter-panel-checkbox-with-overflow; diff --git a/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-checkbox.scss b/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-checkbox.scss index 2476aaec0f..7e21d8d2a3 100644 --- a/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-checkbox.scss +++ b/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-checkbox.scss @@ -11,8 +11,8 @@ @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins'; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type'; // The block part of our conventional BEM class names (blockClass__E--M). $block-class: #{c4p-settings.$pkg-prefix}--filter-panel-checkbox; diff --git a/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-group.scss b/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-group.scss index cee9f384c4..61cf5ea456 100644 --- a/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-group.scss +++ b/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-group.scss @@ -13,9 +13,9 @@ @use '../../global/styles/mixins'; @use '@carbon/layout/scss/convert' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/type'; // FilterPanel uses the following Carbon for IBM Products components: // TODO: @use(s) of IBM Products component styles used by FilterPanel diff --git a/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-label.scss b/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-label.scss index de18146cf4..2eb14fd888 100644 --- a/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-label.scss +++ b/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-label.scss @@ -11,9 +11,9 @@ @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins'; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/type'; // FilterPanel uses the following Carbon for IBM Products components: // TODO: @use(s) of IBM Products component styles used by FilterPanel diff --git a/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-search.scss b/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-search.scss index 85ff047643..fe16b3e6df 100644 --- a/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-search.scss +++ b/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel-search.scss @@ -9,9 +9,9 @@ @use '../../global/styles/project-settings' as c4p-settings; @use '@carbon/layout/scss/convert' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/utilities'; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/utilities'; // FilterPanel uses the following Carbon for IBM Products components: // TODO: @use(s) of IBM Products component styles used by FilterPanel diff --git a/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel.scss b/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel.scss index 2fee4c4a3c..b9b26560cb 100644 --- a/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel.scss +++ b/packages/ibm-products-styles/src/components/FilterPanel/_filter-panel.scss @@ -11,9 +11,9 @@ @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins'; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/type'; // FilterPanel uses the following Carbon for IBM Products components: // TODO: @use(s) of IBM Products component styles used by FilterPanel diff --git a/packages/ibm-products-styles/src/components/FilterSummary/_filter-summary.scss b/packages/ibm-products-styles/src/components/FilterSummary/_filter-summary.scss index f697a51042..7409e91127 100644 --- a/packages/ibm-products-styles/src/components/FilterSummary/_filter-summary.scss +++ b/packages/ibm-products-styles/src/components/FilterSummary/_filter-summary.scss @@ -6,9 +6,9 @@ // @use '../../global/styles/project-settings' as *; @use '@carbon/layout/scss/convert' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/motion' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/motion' as *; $block-class: #{$pkg-prefix}--filter-summary; diff --git a/packages/ibm-products-styles/src/components/GetStartedCard/_get-started-card.scss b/packages/ibm-products-styles/src/components/GetStartedCard/_get-started-card.scss index 947df1de3d..e6df8b481e 100644 --- a/packages/ibm-products-styles/src/components/GetStartedCard/_get-started-card.scss +++ b/packages/ibm-products-styles/src/components/GetStartedCard/_get-started-card.scss @@ -10,12 +10,12 @@ // Standard imports. @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins'; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type' as *; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type' as *; +@use '@carbon/react/scss/theme' as *; @use '@carbon/react/scss/colors' as *; @use '@carbon/layout/scss/convert' as *; -@use '@carbon/styles/scss/breakpoint' as *; +@use '@carbon/react/scss/breakpoint' as *; $block-class: #{c4p-settings.$pkg-prefix}--card; diff --git a/packages/ibm-products-styles/src/components/Guidebanner/_guidebanner.scss b/packages/ibm-products-styles/src/components/Guidebanner/_guidebanner.scss index 62b61321a8..b852c857fe 100644 --- a/packages/ibm-products-styles/src/components/Guidebanner/_guidebanner.scss +++ b/packages/ibm-products-styles/src/components/Guidebanner/_guidebanner.scss @@ -25,11 +25,11 @@ // Standard imports. @use '@carbon/layout/scss/convert' as *; @use '@carbon/react/scss/colors' as *; -@use '@carbon/styles/scss/motion' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type' as *; +@use '@carbon/react/scss/motion' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type' as *; @use '../../global/styles/project-settings' as c4p-settings; // Guidebanner uses the following Carbon for IBM Products components: @@ -125,7 +125,8 @@ $purple-3: #7433e3; margin: $spacing-05 0 0 0; opacity: 1; scroll-snap-align: start; - transition: max-height 50ms motion(exit, productive), + transition: + max-height 50ms motion(exit, productive), margin-top 50ms motion(exit, productive), opacity 300ms motion(exit, productive); diff --git a/packages/ibm-products-styles/src/components/HTTPErrors/_http-errors.scss b/packages/ibm-products-styles/src/components/HTTPErrors/_http-errors.scss index ceba24db55..6e4cce064c 100644 --- a/packages/ibm-products-styles/src/components/HTTPErrors/_http-errors.scss +++ b/packages/ibm-products-styles/src/components/HTTPErrors/_http-errors.scss @@ -6,10 +6,10 @@ // // Standard imports. -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/breakpoint' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/breakpoint' as *; @use '../../global/styles/project-settings' as c4p-settings; $block-class: #{c4p-settings.$pkg-prefix}--http-errors; diff --git a/packages/ibm-products-styles/src/components/ImportModal/_import-modal.scss b/packages/ibm-products-styles/src/components/ImportModal/_import-modal.scss index 8db26f3596..b660b7b1ef 100644 --- a/packages/ibm-products-styles/src/components/ImportModal/_import-modal.scss +++ b/packages/ibm-products-styles/src/components/ImportModal/_import-modal.scss @@ -6,9 +6,9 @@ // // Standard imports. -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type'; @use '../../global/styles/project-settings' as c4p-settings; $block-class: #{c4p-settings.$pkg-prefix}--import-modal; diff --git a/packages/ibm-products-styles/src/components/InlineTip/_inline-tip.scss b/packages/ibm-products-styles/src/components/InlineTip/_inline-tip.scss index 03b7bd21b1..df9f91abba 100644 --- a/packages/ibm-products-styles/src/components/InlineTip/_inline-tip.scss +++ b/packages/ibm-products-styles/src/components/InlineTip/_inline-tip.scss @@ -25,9 +25,9 @@ @use '../../global/styles/project-settings' as c4p-settings; @use '@carbon/react/scss/colors' as *; @use '@carbon/layout/scss/convert' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/type' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/type' as *; $block-class: #{c4p-settings.$pkg-prefix}--inline-tip; // Images and animation are the same fixed size diff --git a/packages/ibm-products-styles/src/components/InterstitialScreen/_interstitial-screen.scss b/packages/ibm-products-styles/src/components/InterstitialScreen/_interstitial-screen.scss index c22b912532..6fd178caa5 100644 --- a/packages/ibm-products-styles/src/components/InterstitialScreen/_interstitial-screen.scss +++ b/packages/ibm-products-styles/src/components/InterstitialScreen/_interstitial-screen.scss @@ -11,11 +11,11 @@ // Standard imports. @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins'; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/breakpoint' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/breakpoint' as *; @use '@carbon/react/scss/colors' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/type'; // InterstitialScreen uses the following Carbon for IBM Products components: @use '../Carousel/carousel'; diff --git a/packages/ibm-products-styles/src/components/InterstitialScreenView/_interstitial-screen-view.scss b/packages/ibm-products-styles/src/components/InterstitialScreenView/_interstitial-screen-view.scss index c4987f5788..3756a130b1 100644 --- a/packages/ibm-products-styles/src/components/InterstitialScreenView/_interstitial-screen-view.scss +++ b/packages/ibm-products-styles/src/components/InterstitialScreenView/_interstitial-screen-view.scss @@ -10,7 +10,7 @@ @use '../../global/styles/mixins'; // Other Carbon settings if needed -// TODO: @use '@carbon/styles/scss/grid'; +// TODO: @use '@carbon/react/scss/grid'; // or // TODO: @use '@carbon/react/scss/grid'; diff --git a/packages/ibm-products-styles/src/components/InterstitialScreenViewModule/_interstitial-screen-view-module.scss b/packages/ibm-products-styles/src/components/InterstitialScreenViewModule/_interstitial-screen-view-module.scss index 1318b16c08..b3679c62e7 100644 --- a/packages/ibm-products-styles/src/components/InterstitialScreenViewModule/_interstitial-screen-view-module.scss +++ b/packages/ibm-products-styles/src/components/InterstitialScreenViewModule/_interstitial-screen-view-module.scss @@ -10,12 +10,12 @@ // Standard imports. @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/breakpoint' as *; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/breakpoint' as *; // Other Carbon settings if needed -// TODO: @use '@carbon/styles/scss/grid'; +// TODO: @use '@carbon/react/scss/grid'; // or // TODO: @use '@carbon/react/scss/grid'; diff --git a/packages/ibm-products-styles/src/components/Nav/_nav.scss b/packages/ibm-products-styles/src/components/Nav/_nav.scss index c9e1685c63..fad13bc468 100644 --- a/packages/ibm-products-styles/src/components/Nav/_nav.scss +++ b/packages/ibm-products-styles/src/components/Nav/_nav.scss @@ -6,15 +6,15 @@ // // Standard imports. -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/react/scss/theme' as *; @use '@carbon/layout/scss/convert' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/motion' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/motion' as *; +@use '@carbon/react/scss/type'; @use '@carbon/type/scss/font-family'; @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins'; -@use '@carbon/styles/scss/utilities'; +@use '@carbon/react/scss/utilities'; $block-class: #{c4p-settings.$pkg-prefix}--nav; $nav-list-block-class: #{c4p-settings.$pkg-prefix}--nav-list; diff --git a/packages/ibm-products-styles/src/components/NonLinearReading/_non-linear-reading.scss b/packages/ibm-products-styles/src/components/NonLinearReading/_non-linear-reading.scss index c886808b16..d09c8acbdc 100644 --- a/packages/ibm-products-styles/src/components/NonLinearReading/_non-linear-reading.scss +++ b/packages/ibm-products-styles/src/components/NonLinearReading/_non-linear-reading.scss @@ -11,11 +11,11 @@ // Standard imports. @use '@carbon/layout/scss/convert' as *; @use '@carbon/react/scss/colors' as *; -@use '@carbon/styles/scss/components/button/tokens' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/components/button/tokens' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; @use '../../global/styles/project-settings' as c4p-settings; @keyframes fade { @@ -65,7 +65,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--non-linear-reading; .#{$block-class} .#{$block-class}__keyword:focus { border-color: $text-inverse; background-color: $button-tertiary; - box-shadow: 0 0 0 1px $text-inverse, 0 0 0 3px $button-tertiary; + box-shadow: + 0 0 0 1px $text-inverse, + 0 0 0 3px $button-tertiary; color: $text-inverse; } // The "up" chevron @@ -88,7 +90,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--non-linear-reading; .#{$block-class} .#{$block-class}__keyword-open:focus { border-color: $text-inverse; background-color: transparent; - box-shadow: inset 0 0 0 1px $button-tertiary, 0 0 0 1px $text-inverse, + box-shadow: + inset 0 0 0 1px $button-tertiary, + 0 0 0 1px $text-inverse, 0 0 0 3px $button-tertiary; color: $button-tertiary; } diff --git a/packages/ibm-products-styles/src/components/NotificationsPanel/_notifications-panel.scss b/packages/ibm-products-styles/src/components/NotificationsPanel/_notifications-panel.scss index a310801225..59cd76d4b4 100644 --- a/packages/ibm-products-styles/src/components/NotificationsPanel/_notifications-panel.scss +++ b/packages/ibm-products-styles/src/components/NotificationsPanel/_notifications-panel.scss @@ -6,14 +6,14 @@ // // Standard imports. -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/motion' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/motion' as *; +@use '@carbon/react/scss/type'; @use '@carbon/type/scss/font-family' as *; @use '../../global/styles/project-settings' as c4p-settings; -@use '@carbon/styles/scss/utilities'; +@use '@carbon/react/scss/utilities'; // NotificationsPanel uses the following IBM Products components: // NotificationsEmptyState @@ -108,7 +108,9 @@ $block-class: #{c4p-settings.$pkg-prefix}--notifications-panel; } .#{$block-class}__notification:focus { border-color: $focus; - box-shadow: inset 0 0 0 2px $focus, inset 0 0 0 2px $background; + box-shadow: + inset 0 0 0 2px $focus, + inset 0 0 0 2px $background; outline: 0; } .#{$block-class}__notification { diff --git a/packages/ibm-products-styles/src/components/OptionsTile/_options-tile.scss b/packages/ibm-products-styles/src/components/OptionsTile/_options-tile.scss index 9858189cbb..c3fb3dacb6 100644 --- a/packages/ibm-products-styles/src/components/OptionsTile/_options-tile.scss +++ b/packages/ibm-products-styles/src/components/OptionsTile/_options-tile.scss @@ -6,16 +6,16 @@ // // Standard imports. -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/motion' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/motion' as *; @use '@carbon/react/scss/colors' as *; @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins' as *; // Other Carbon settings. -@use '@carbon/styles/scss/utilities' as *; +@use '@carbon/react/scss/utilities' as *; // The block part of our conventional BEM class names (blockClass__E--M). $block-class: #{c4p-settings.$pkg-prefix}--options-tile; diff --git a/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss b/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss index e2878df4b0..cbe3f8b034 100644 --- a/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss +++ b/packages/ibm-products-styles/src/components/PageHeader/_page-header.scss @@ -6,13 +6,13 @@ // // Other Carbon settings. -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/breakpoint' as *; -@use '@carbon/styles/scss/grid/flexbox'; -@use '@carbon/styles/scss/motion' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/utilities'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/breakpoint' as *; +@use '@carbon/react/scss/grid/flexbox'; +@use '@carbon/react/scss/motion' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/utilities'; // Standard imports. @use '../../global/styles/project-settings' as *; @@ -179,9 +179,11 @@ $right-section-alt-width: 100% - $left-section-alt-width; min-width: calc( 100% + ( - var(--#{$block-class}--width-px) - - var(--#{$block-class}--breadcrumb-row-width-px) - ) / 2 + var(--#{$block-class}--width-px) - var( + --#{$block-class}--breadcrumb-row-width-px + ) + ) / + 2 ); } .#{$block-class}__breadcrumb-row::after { @@ -192,7 +194,9 @@ $right-section-alt-width: 100% - $left-section-alt-width; width: 50vw; height: 1px; /* creates a full width box shadow without causing scroll */ - box-shadow: 0 1px 0 0 $layer-accent-01, 0 1px 0 0 $layer-accent-01; + box-shadow: + 0 1px 0 0 $layer-accent-01, + 0 1px 0 0 $layer-accent-01; content: ''; opacity: 0; transform: translateX(-50%) scaleX(1); @@ -205,7 +209,9 @@ $right-section-alt-width: 100% - $left-section-alt-width; )::after, .#{$block-class}__breadcrumb-row--has-action-bar::after { /* creates a full width box shadow without causing scroll */ - box-shadow: 25vw 1px 0 0 $layer-accent-01, -25vw 1px 0 0 $layer-accent-01; + box-shadow: + 25vw 1px 0 0 $layer-accent-01, + -25vw 1px 0 0 $layer-accent-01; opacity: 1; } diff --git a/packages/ibm-products-styles/src/components/ProductiveCard/_productive-card.scss b/packages/ibm-products-styles/src/components/ProductiveCard/_productive-card.scss index 29efad8e3f..c1130f49f5 100644 --- a/packages/ibm-products-styles/src/components/ProductiveCard/_productive-card.scss +++ b/packages/ibm-products-styles/src/components/ProductiveCard/_productive-card.scss @@ -8,9 +8,9 @@ // ProductiveCard uses the following IBM Products components: // Card @use '../Card/card' as *; -@use '@carbon/styles/scss/theme'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/theme'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/spacing' as *; @use '../../global/styles/project-settings' as c4p-settings; $block-class: #{c4p-settings.$pkg-prefix}--card; diff --git a/packages/ibm-products-styles/src/components/RemoveModal/_remove-modal.scss b/packages/ibm-products-styles/src/components/RemoveModal/_remove-modal.scss index 5befb8b35b..5817f433b9 100644 --- a/packages/ibm-products-styles/src/components/RemoveModal/_remove-modal.scss +++ b/packages/ibm-products-styles/src/components/RemoveModal/_remove-modal.scss @@ -6,7 +6,7 @@ // // Standard imports. -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/spacing' as *; @use '../../global/styles/project-settings' as c4p-settings; $block-class: #{c4p-settings.$pkg-prefix}--remove-modal; diff --git a/packages/ibm-products-styles/src/components/Saving/_saving.scss b/packages/ibm-products-styles/src/components/Saving/_saving.scss index 15f0b36ccf..c0252297cc 100644 --- a/packages/ibm-products-styles/src/components/Saving/_saving.scss +++ b/packages/ibm-products-styles/src/components/Saving/_saving.scss @@ -6,9 +6,9 @@ // // Standard imports. -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/type'; @use '@carbon/react/scss/components/button/tokens' as *; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/spacing' as *; @use '../../global/styles/project-settings' as c4p-settings; $block-class: #{c4p-settings.$pkg-prefix}--saving; diff --git a/packages/ibm-products-styles/src/components/ScrollGradient/_scroll-gradient.scss b/packages/ibm-products-styles/src/components/ScrollGradient/_scroll-gradient.scss index f10f107329..cc0dd3f8a6 100644 --- a/packages/ibm-products-styles/src/components/ScrollGradient/_scroll-gradient.scss +++ b/packages/ibm-products-styles/src/components/ScrollGradient/_scroll-gradient.scss @@ -8,8 +8,8 @@ // Standard imports. @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins'; -@use '@carbon/styles/scss/motion' as *; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/motion' as *; +@use '@carbon/react/scss/spacing' as *; $block-class: #{c4p-settings.$pkg-prefix}--scroll-gradient; diff --git a/packages/ibm-products-styles/src/components/SearchBar/_search-bar.scss b/packages/ibm-products-styles/src/components/SearchBar/_search-bar.scss index ecf8278f19..8a68d51a51 100644 --- a/packages/ibm-products-styles/src/components/SearchBar/_search-bar.scss +++ b/packages/ibm-products-styles/src/components/SearchBar/_search-bar.scss @@ -9,7 +9,7 @@ @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins'; -@use '@carbon/styles/scss/utilities' as *; +@use '@carbon/react/scss/utilities' as *; // The block part of our conventional BEM class names (blockClass__E--M). $block-class: #{c4p-settings.$pkg-prefix}--search-bar; diff --git a/packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss b/packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss index 6f53924328..82075c5971 100644 --- a/packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss +++ b/packages/ibm-products-styles/src/components/SidePanel/_side-panel.scss @@ -9,13 +9,13 @@ @use 'sass:map'; // Other Carbon settings. -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/grid' as *; -@use '@carbon/styles/scss/motion' as *; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/breakpoint' as *; -@use '@carbon/styles/scss/utilities'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/grid' as *; +@use '@carbon/react/scss/motion' as *; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/breakpoint' as *; +@use '@carbon/react/scss/utilities'; // Standard imports. @use '../../global/styles/project-settings' as c4p-settings; @@ -115,7 +115,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set; &.#{$block-class}.#{$block-class}--has-ai-label, &.#{$block-class}.#{$block-class}--has-decorator { border-color: transparent; - box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow, + box-shadow: + inset 0 -80px 70px -65px $ai-inner-shadow, 0 4px 10px 2px $ai-drop-shadow; } @@ -320,7 +321,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set; &.#{$block-class}--has-decorator .#{$block-class}--scrolls { @include utilities.ai-popover-gradient('default', 0, 'layer'); - box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow, + box-shadow: + inset 0 -80px 70px -65px $ai-inner-shadow, 0 4px 10px 2px $ai-drop-shadow; } diff --git a/packages/ibm-products-styles/src/components/SimpleHeader/_carbon-imports.scss b/packages/ibm-products-styles/src/components/SimpleHeader/_carbon-imports.scss index 145a9ce003..e842d118d7 100644 --- a/packages/ibm-products-styles/src/components/SimpleHeader/_carbon-imports.scss +++ b/packages/ibm-products-styles/src/components/SimpleHeader/_carbon-imports.scss @@ -8,4 +8,4 @@ // SimpleHeader uses the following Carbon components: // Breadcrumb, BreadcrumbItem -@use '@carbon/styles/scss/components/breadcrumb'; +@use '@carbon/react/scss/components/breadcrumb'; diff --git a/packages/ibm-products-styles/src/components/SimpleHeader/_simple-header.scss b/packages/ibm-products-styles/src/components/SimpleHeader/_simple-header.scss index 55b93e5076..22d311882b 100644 --- a/packages/ibm-products-styles/src/components/SimpleHeader/_simple-header.scss +++ b/packages/ibm-products-styles/src/components/SimpleHeader/_simple-header.scss @@ -5,9 +5,9 @@ // LICENSE file in the root directory of this source tree. // -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/type'; @use '../../global/styles/project-settings' as *; diff --git a/packages/ibm-products-styles/src/components/StatusIndicator/_status-indicator.scss b/packages/ibm-products-styles/src/components/StatusIndicator/_status-indicator.scss index 06fc474a26..cdd3a9173d 100644 --- a/packages/ibm-products-styles/src/components/StatusIndicator/_status-indicator.scss +++ b/packages/ibm-products-styles/src/components/StatusIndicator/_status-indicator.scss @@ -14,11 +14,11 @@ // Other Carbon settings if needed @use '@carbon/layout/scss/convert' as *; -@use '@carbon/styles/scss/type' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/themes'; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/type' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/themes'; +@use '@carbon/react/scss/type'; // The block part of our conventional BEM class names (blockClass__E--M). $block-class: #{c4p-settings.$pkg-prefix}--status-indicator; diff --git a/packages/ibm-products-styles/src/components/StringFormatter/_string-formatter.scss b/packages/ibm-products-styles/src/components/StringFormatter/_string-formatter.scss index 35cd21515e..2da94f5f3e 100644 --- a/packages/ibm-products-styles/src/components/StringFormatter/_string-formatter.scss +++ b/packages/ibm-products-styles/src/components/StringFormatter/_string-formatter.scss @@ -8,10 +8,10 @@ // Standard imports. @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/spacing' as *; // Other Carbon settings if needed -// TODO: @use '@carbon/styles/scss/grid'; +// TODO: @use '@carbon/react/scss/grid'; // or // TODO: @use '@carbon/react/scss/grid'; diff --git a/packages/ibm-products-styles/src/components/TagOverflow/_tag-overflow.scss b/packages/ibm-products-styles/src/components/TagOverflow/_tag-overflow.scss index 897310cc29..bd3f6239f2 100644 --- a/packages/ibm-products-styles/src/components/TagOverflow/_tag-overflow.scss +++ b/packages/ibm-products-styles/src/components/TagOverflow/_tag-overflow.scss @@ -8,13 +8,13 @@ // Standard imports. @use '../../global/styles/project-settings' as c4p-settings; @use '../../global/styles/mixins'; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/breakpoint' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/breakpoint' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/type'; // Other Carbon settings if needed -// TODO: @use '@carbon/styles/scss/grid'; +// TODO: @use '@carbon/react/scss/grid'; // or // TODO: @use '@carbon/react/scss/grid'; diff --git a/packages/ibm-products-styles/src/components/TagSet/_tag-set.scss b/packages/ibm-products-styles/src/components/TagSet/_tag-set.scss index 671a0b564a..574ea1cafc 100644 --- a/packages/ibm-products-styles/src/components/TagSet/_tag-set.scss +++ b/packages/ibm-products-styles/src/components/TagSet/_tag-set.scss @@ -6,10 +6,10 @@ // // Standard imports. -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/breakpoint' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/breakpoint' as *; +@use '@carbon/react/scss/type'; @use '../../global/styles/project-settings' as *; @use '../../global/styles/mixins' as *; diff --git a/packages/ibm-products-styles/src/components/Tearsheet/_tearsheet.scss b/packages/ibm-products-styles/src/components/Tearsheet/_tearsheet.scss index eb5375a4f5..82a42d5c66 100644 --- a/packages/ibm-products-styles/src/components/Tearsheet/_tearsheet.scss +++ b/packages/ibm-products-styles/src/components/Tearsheet/_tearsheet.scss @@ -1,3 +1,5 @@ +// stylelint-disable carbon/motion-duration-use, carbon/motion-easing-use + // // Copyright IBM Corp. 2020, 2023 // @@ -6,13 +8,13 @@ // // Standard imports. -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/colors' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/motion' as *; -@use '@carbon/styles/scss/breakpoint' as *; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/utilities'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/colors' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/motion' as *; +@use '@carbon/react/scss/breakpoint' as *; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/utilities'; @use '../../global/styles/project-settings' as *; @use '../../global/styles/mixins' as *; @@ -38,7 +40,8 @@ $motion-duration: $duration-moderate-02; inset: 0; opacity: var(--overlay-opacity); - transition: background-color $motion-duration motion(exit, expressive), + transition: + background-color $motion-duration motion(exit, expressive), opacity $motion-duration motion(exit, expressive); @media (prefers-reduced-motion: reduce) { @@ -54,8 +57,8 @@ $motion-duration: $duration-moderate-02; z-index: utilities.z('modal') + 1; align-items: flex-end; color: $text-primary; - // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use - transition: visibility 0s linear $motion-duration, + transition: + visibility 0s linear $motion-duration, background-color $motion-duration motion(exit, expressive), opacity $motion-duration motion(exit, expressive); --#{$block-class}--stacking-scale-factor-single: 0.95; @@ -65,8 +68,8 @@ $motion-duration: $duration-moderate-02; &.is-visible { z-index: utilities.z('modal'); align-items: flex-end; - // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use - transition: visibility 0s linear, + transition: + visibility 0s linear, background-color $motion-duration motion(entrance, expressive), opacity $motion-duration motion(entrance, expressive); @media (prefers-reduced-motion: reduce) { @@ -117,8 +120,8 @@ $motion-duration: $duration-moderate-02; border-bottom: 0; /* override carbon ai removing background gradient */ - background: linear-gradient(to top, var(--cds-layer), var(--cds-layer)) - padding-box, + background: + linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient( to bottom, var(--cds-ai-border-start, #78a9ff), @@ -131,7 +134,8 @@ $motion-duration: $duration-moderate-02; // extra specificity to ensure this transition overrides the carbon default &.#{$block-class}.#{$block-class} .#{$block-class}__container { - transition: transform $motion-duration motion(entrance, expressive), + transition: + transform $motion-duration motion(entrance, expressive), max-height $motion-duration motion(entrance, expressive); } diff --git a/packages/ibm-products-styles/src/components/Toolbar/_toolbar.scss b/packages/ibm-products-styles/src/components/Toolbar/_toolbar.scss index 3c7be98628..9e53d999de 100644 --- a/packages/ibm-products-styles/src/components/Toolbar/_toolbar.scss +++ b/packages/ibm-products-styles/src/components/Toolbar/_toolbar.scss @@ -5,9 +5,9 @@ // LICENSE file in the root directory of this source tree. // -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/breakpoint' as *; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/breakpoint' as *; +@use '@carbon/react/scss/spacing' as *; @use '../../global/styles/project-settings' as *; $block-class: #{$pkg-prefix}--toolbar; diff --git a/packages/ibm-products-styles/src/components/TooltipTrigger/_tooltip-trigger.scss b/packages/ibm-products-styles/src/components/TooltipTrigger/_tooltip-trigger.scss index 74281477b1..96b52ca0f1 100644 --- a/packages/ibm-products-styles/src/components/TooltipTrigger/_tooltip-trigger.scss +++ b/packages/ibm-products-styles/src/components/TooltipTrigger/_tooltip-trigger.scss @@ -5,7 +5,7 @@ // LICENSE file in the root directory of this source tree. // -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/spacing' as *; // Standard imports. @use '../../global/styles/project-settings' as c4p-settings; diff --git a/packages/ibm-products-styles/src/components/TruncatedList/_truncated-list.scss b/packages/ibm-products-styles/src/components/TruncatedList/_truncated-list.scss index 6681c926ae..620b8ad5bb 100644 --- a/packages/ibm-products-styles/src/components/TruncatedList/_truncated-list.scss +++ b/packages/ibm-products-styles/src/components/TruncatedList/_truncated-list.scss @@ -10,8 +10,8 @@ @use '../../global/styles/mixins'; // Other Carbon settings if needed -@use '@carbon/styles/scss/motion' as *; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/motion' as *; +@use '@carbon/react/scss/spacing' as *; // The block part of our conventional BEM class names (blockClass__E--M). $block-class: #{c4p-settings.$pkg-prefix}--truncated-list; diff --git a/packages/ibm-products-styles/src/components/UserAvatar/_user-avatar.scss b/packages/ibm-products-styles/src/components/UserAvatar/_user-avatar.scss index b97008d239..e4811900bc 100644 --- a/packages/ibm-products-styles/src/components/UserAvatar/_user-avatar.scss +++ b/packages/ibm-products-styles/src/components/UserAvatar/_user-avatar.scss @@ -11,12 +11,12 @@ @use '../../global/styles/project-settings' as *; @use '../../global/styles/mixins'; @use '@carbon/colors' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type'; // Other Carbon settings if needed -// TODO: @use '@carbon/styles/scss/grid'; +// TODO: @use '@carbon/react/scss/grid'; // or // TODO: @use '@carbon/react/scss/grid'; diff --git a/packages/ibm-products-styles/src/components/UserProfileImage/_user-profile-image.scss b/packages/ibm-products-styles/src/components/UserProfileImage/_user-profile-image.scss index ff9d32b5da..bff5a4dae8 100644 --- a/packages/ibm-products-styles/src/components/UserProfileImage/_user-profile-image.scss +++ b/packages/ibm-products-styles/src/components/UserProfileImage/_user-profile-image.scss @@ -8,9 +8,9 @@ @use 'sass:map'; // Standard imports. -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type'; @use '@carbon/type/scss/font-family'; @use '../../global/styles/project-settings' as *; @use './color-map' as *; diff --git a/packages/ibm-products-styles/src/components/WebTerminal/_web-terminal.scss b/packages/ibm-products-styles/src/components/WebTerminal/_web-terminal.scss index 466458d27f..f6422258db 100644 --- a/packages/ibm-products-styles/src/components/WebTerminal/_web-terminal.scss +++ b/packages/ibm-products-styles/src/components/WebTerminal/_web-terminal.scss @@ -6,10 +6,10 @@ // // Standard imports. -@use '@carbon/styles/scss/colors' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/themes' as *; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/react/scss/colors' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/themes' as *; +@use '@carbon/react/scss/theme' as *; @use '../../global/styles/project-settings' as *; $web-terminal-width: 40rem; // 640px diff --git a/packages/ibm-products-styles/src/components/_Canary/_carbon-imports.scss b/packages/ibm-products-styles/src/components/_Canary/_carbon-imports.scss index 955e4c1f03..6fae34fd8a 100644 --- a/packages/ibm-products-styles/src/components/_Canary/_carbon-imports.scss +++ b/packages/ibm-products-styles/src/components/_Canary/_carbon-imports.scss @@ -4,4 +4,4 @@ // 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 '@carbon/styles/scss/components/code-snippet'; +@use '@carbon/react/scss/components/code-snippet'; diff --git a/packages/ibm-products-web-components/.storybook/_container.scss b/packages/ibm-products-web-components/.storybook/_container.scss index 8c3d7ac866..6eafe84efa 100644 --- a/packages/ibm-products-web-components/.storybook/_container.scss +++ b/packages/ibm-products-web-components/.storybook/_container.scss @@ -7,17 +7,15 @@ // LICENSE file in the root directory of this source tree. // -@use '@carbon/styles' with ( - $font-path: '@ibm/plex' -); -@use '@carbon/styles/scss/config' as *; +@use '@carbon/styles'; +@use '@carbon/react/scss/config' as *; @use '@carbon/themes/scss/themes'; -@use '@carbon/styles/scss/theme'; +@use '@carbon/react/scss/theme'; @use '@carbon/grid'; -@use '@carbon/styles/scss/components/button/tokens' as button-tokens; -@use '@carbon/styles/scss/components/notification/tokens' as notification-tokens; -@use '@carbon/styles/scss/components/tag/tokens' as tag-tokens; +@use '@carbon/react/scss/components/button/tokens' as button-tokens; +@use '@carbon/react/scss/components/notification/tokens' as notification-tokens; +@use '@carbon/react/scss/components/tag/tokens' as tag-tokens; @include theme.add-component-tokens(button-tokens.$button-tokens); @include theme.add-component-tokens(notification-tokens.$notification-tokens); @include theme.add-component-tokens(tag-tokens.$tag-tokens); @@ -64,10 +62,12 @@ body { #main-content { position: relative; + /* stylelint-disable-next-line carbon/layout-use */ padding: 42px; } .#{$prefix}--content.#{$prefix}-ce-demo-devenv--ui-shell-content { + /* stylelint-disable-next-line carbon/layout-use */ padding: 2rem; margin: 0; block-size: 100vh; diff --git a/packages/ibm-products-web-components/.storybook/templates/with-layer.scss b/packages/ibm-products-web-components/.storybook/templates/with-layer.scss index fa1ea5b5eb..b46f8b7af8 100644 --- a/packages/ibm-products-web-components/.storybook/templates/with-layer.scss +++ b/packages/ibm-products-web-components/.storybook/templates/with-layer.scss @@ -5,20 +5,22 @@ // LICENSE file in the root directory of this source tree. // -@use '@carbon/styles/scss/colors'; -@use '@carbon/styles/scss/theme'; -@use '@carbon/styles/scss/spacing'; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/components/tag'; +@use '@carbon/react/scss/colors'; +@use '@carbon/react/scss/theme'; +@use '@carbon/react/scss/spacing'; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/components/tag'; -@use '@carbon/styles/scss/config' as *; +@use '@carbon/react/scss/config' as *; .#{$prefix}--with-layer__layer { position: relative; + /* stylelint-disable-next-line carbon/theme-use */ border: 1px dashed colors.$purple-50; } .#{$prefix}--with-layer__layer .#{$prefix}--with-layer__layer { + /* stylelint-disable-next-line carbon/theme-use */ background-color: theme.$layer; margin-block-start: spacing.$spacing-07; } @@ -28,7 +30,9 @@ display: inline-flex; padding: spacing.$spacing-02; + /* stylelint-disable-next-line carbon/theme-use */ background-color: tag.$tag-background-purple; + /* stylelint-disable-next-line carbon/theme-use */ color: tag.$tag-color-purple; column-gap: spacing.$spacing-02; } diff --git a/packages/ibm-products-web-components/package.json b/packages/ibm-products-web-components/package.json index 992a206d42..8255c3e57c 100644 --- a/packages/ibm-products-web-components/package.json +++ b/packages/ibm-products-web-components/package.json @@ -40,7 +40,7 @@ ], "scripts": { "build": "node tasks/build.js && yarn wca", - "build:storybook": "storybook build", + "build:storybook": "storybook build --quiet", "clean": "rimraf es lib scss dist storybook-static", "preview": "vite preview", "storybook": "storybook dev -p 3000", @@ -78,7 +78,7 @@ "@vitest/ui": "latest", "autoprefixer": "^10.4.20", "cssnano": "^7.0.6", - "eslint": "^9.11.1", + "eslint": "^8.56.0", "eslint-config-carbon": "3.18.0", "globby": "^14.0.2", "happy-dom": "^15.11.6", diff --git a/packages/ibm-products-web-components/src/components/side-panel/side-panel.scss b/packages/ibm-products-web-components/src/components/side-panel/side-panel.scss index 4f22ea0780..9ff0478db1 100644 --- a/packages/ibm-products-web-components/src/components/side-panel/side-panel.scss +++ b/packages/ibm-products-web-components/src/components/side-panel/side-panel.scss @@ -9,13 +9,13 @@ $css--plex: true !default; @use 'sass:map'; /* Other Carbon settings. */ -@use '@carbon/styles/scss/reset'; -@use '@carbon/styles/scss/config' as *; -@use '@carbon/styles/scss/motion' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/utilities/ai-gradient' as *; -@use '@carbon/styles/scss/utilities/convert' as *; +@use '@carbon/react/scss/reset'; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/motion' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/utilities/ai-gradient' as *; +@use '@carbon/react/scss/utilities/convert' as *; $prefix: 'c4p'; $carbon-prefix: 'cds'; diff --git a/packages/ibm-products-web-components/src/components/side-panel/side-panel.test.ts b/packages/ibm-products-web-components/src/components/side-panel/side-panel.test.ts index 2869ab074f..ee38621d81 100644 --- a/packages/ibm-products-web-components/src/components/side-panel/side-panel.test.ts +++ b/packages/ibm-products-web-components/src/components/side-panel/side-panel.test.ts @@ -23,24 +23,23 @@ const defaultProps = { title: 'Side panel title', }; -const template = (props = defaultProps) => - html` - - content - - `; +const template = (props = defaultProps) => html` + + content + +`; describe('c4p-side-panel', () => { it('should render a side panel', async () => { diff --git a/packages/ibm-products-web-components/src/components/side-panel/story-styles.scss b/packages/ibm-products-web-components/src/components/side-panel/story-styles.scss index 41b9ccc288..6ec536017d 100644 --- a/packages/ibm-products-web-components/src/components/side-panel/story-styles.scss +++ b/packages/ibm-products-web-components/src/components/side-panel/story-styles.scss @@ -4,8 +4,8 @@ * 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 '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; $story-prefix: 'side-panel-stories__'; diff --git a/packages/ibm-products-web-components/src/components/tearsheet/story-styles.scss b/packages/ibm-products-web-components/src/components/tearsheet/story-styles.scss index cb6899d0d2..f5cd7398e8 100644 --- a/packages/ibm-products-web-components/src/components/tearsheet/story-styles.scss +++ b/packages/ibm-products-web-components/src/components/tearsheet/story-styles.scss @@ -4,8 +4,8 @@ * 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 '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/config' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/config' as *; $story-prefix: 'tearsheet-stories'; diff --git a/packages/ibm-products-web-components/src/components/tearsheet/tearsheet.scss b/packages/ibm-products-web-components/src/components/tearsheet/tearsheet.scss index 82e6ba5be3..1be12fe2bc 100644 --- a/packages/ibm-products-web-components/src/components/tearsheet/tearsheet.scss +++ b/packages/ibm-products-web-components/src/components/tearsheet/tearsheet.scss @@ -8,17 +8,17 @@ $css--plex: true !default; /* Other Carbon settings. */ -@use '@carbon/styles/scss/reset'; -@use '@carbon/styles/scss/breakpoint' as *; -@use '@carbon/styles/scss/config' as *; -@use '@carbon/styles/scss/motion' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/type'; -@use '@carbon/styles/scss/utilities'; -@use '@carbon/styles/scss/utilities/ai-gradient' as *; -@use '@carbon/styles/scss/components/modal' as *; -@use '@carbon/styles/scss/utilities/convert' as *; +@use '@carbon/react/scss/reset'; +@use '@carbon/react/scss/breakpoint' as *; +@use '@carbon/react/scss/config' as *; +@use '@carbon/react/scss/motion' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/type'; +@use '@carbon/react/scss/utilities'; +@use '@carbon/react/scss/utilities/ai-gradient' as *; +@use '@carbon/react/scss/components/modal' as *; +@use '@carbon/react/scss/utilities/convert' as *; @use 'sass:map'; $prefix: 'c4p'; @@ -140,7 +140,8 @@ $motion-duration: $duration-moderate-02; inset: 0; opacity: var(--overlay-opacity); - transition: background-color $motion-duration motion(exit, expressive), + transition: + background-color $motion-duration motion(exit, expressive), opacity $motion-duration motion(exit, expressive); @media (prefers-reduced-motion: reduce) { @@ -177,8 +178,8 @@ $motion-duration: $duration-moderate-02; border: 1px solid transparent; /* override carbon ai removing background gradient */ - background: linear-gradient(to top, var(--cds-layer), var(--cds-layer)) - padding-box, + background: + linear-gradient(to top, var(--cds-layer), var(--cds-layer)) padding-box, linear-gradient( to bottom, var(--cds-ai-border-start, #78a9ff), diff --git a/packages/ibm-products-web-components/src/components/tearsheet/tearsheet.stories.ts b/packages/ibm-products-web-components/src/components/tearsheet/tearsheet.stories.ts index 3fcd7fd55d..d2eabed7a1 100644 --- a/packages/ibm-products-web-components/src/components/tearsheet/tearsheet.stories.ts +++ b/packages/ibm-products-web-components/src/components/tearsheet/tearsheet.stories.ts @@ -213,9 +213,10 @@ const getActionToolbarItems = (index) => { case 1: return html` ${['option 1', 'option 2', 'option 3', 'option 4'].map( - (option) => html` ${option}` + (option) => + html` ${option}` )} `; case 2: diff --git a/packages/ibm-products-web-components/src/components/tearsheet/tearsheet.test.ts b/packages/ibm-products-web-components/src/components/tearsheet/tearsheet.test.ts index b0e3c90b4a..918d7dae8f 100644 --- a/packages/ibm-products-web-components/src/components/tearsheet/tearsheet.test.ts +++ b/packages/ibm-products-web-components/src/components/tearsheet/tearsheet.test.ts @@ -67,46 +67,45 @@ const defaultProps = { headerNavigation: '', }; -const template = (props = defaultProps) => - html` - - - ${props.content} +const template = (props = defaultProps) => html` + + + ${props.content} - - ${props.label} + + ${props.label} - - ${props.title ? html`${props.title}` : ''} + + ${props.title ? html`${props.title}` : ''} - - ${props.description - ? html`${props.description}` - : ''} + + ${props.description + ? html`${props.description}` + : ''} - - ${props.headerActions} + + ${props.headerActions} - - ${props.actionItems} + + ${props.actionItems} - - ${props.slug} + + ${props.slug} - - ${props.headerNavigation} + + ${props.headerNavigation} - - ${props.influencer} - - `; + + ${props.influencer} + +`; describe('c4p-tearsheet', () => { it('should render a tearsheet', async () => { diff --git a/packages/ibm-products/config.js b/packages/ibm-products/config.js index cbddcf679d..d2c701558a 100644 --- a/packages/ibm-products/config.js +++ b/packages/ibm-products/config.js @@ -13,8 +13,8 @@ export const getStorybookPrefix = (pkg, componentName) => { return pkg.isComponentEnabled(componentName, true) ? storybookPrefixReleased : pkg.isComponentPublic(componentName, true) - ? storybookPrefixCanary - : storybookPrefixInternal; + ? storybookPrefixCanary + : storybookPrefixInternal; }; /** @@ -35,8 +35,8 @@ export const getStorybookSlug = (pkg, componentName, scenario, folders) => { const state = pkg.isComponentEnabled(componentName, true) ? 'released' : pkg.isComponentPublic(componentName, true) - ? 'canary' - : 'internal'; + ? 'canary' + : 'internal'; return `cloud-cognitive-${state}-${hFolders}${lcName}--${scenario}`; }; diff --git a/packages/ibm-products/scripts/generate/index.js b/packages/ibm-products/scripts/generate/index.js index fcf52dfc41..e46c3378c9 100644 --- a/packages/ibm-products/scripts/generate/index.js +++ b/packages/ibm-products/scripts/generate/index.js @@ -9,7 +9,7 @@ const fs = require('fs'); const { green, red } = require('chalk'); const { outputFileSync, readFileSync } = require('fs-extra'); const { sync } = require('glob'); -const { camelCase, paramCase, pascalCase, headerCase } = require('change-case'); +const { camelCase, kebabCase, pascalCase, headerCase } = require('change-case'); const { join, relative, resolve } = require('path'); // https://www.npmjs.com/package/yargs#usage @@ -31,7 +31,7 @@ const substitutions = { DISPLAY_NAME: pascalCase(name), FULL_YEAR: new Date().getFullYear(), CAMEL_NAME: camelCase(name), - STYLE_NAME: paramCase(name), + STYLE_NAME: kebabCase(name), TITLE_NAME: headerCase(name), }; diff --git a/packages/ibm-products/scripts/generate/templates/_STYLE_NAME.scss b/packages/ibm-products/scripts/generate/templates/_STYLE_NAME.scss index f5e0a9c386..1bbc203cd7 100644 --- a/packages/ibm-products/scripts/generate/templates/_STYLE_NAME.scss +++ b/packages/ibm-products/scripts/generate/templates/_STYLE_NAME.scss @@ -10,7 +10,7 @@ @use '../../global/styles/mixins'; // Other Carbon settings if needed -// TODO: @use '@carbon/styles/scss/grid'; +// TODO: @use '@carbon/react/scss/grid'; // or // TODO: @use '@carbon/react/scss/grid'; diff --git a/packages/ibm-products/src/components/APIKeyModal/_storybook-styles.scss b/packages/ibm-products/src/components/APIKeyModal/_storybook-styles.scss index eea5bea73c..53202453d4 100644 --- a/packages/ibm-products/src/components/APIKeyModal/_storybook-styles.scss +++ b/packages/ibm-products/src/components/APIKeyModal/_storybook-styles.scss @@ -6,8 +6,8 @@ // @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings; -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; $block-class: #{c4p-settings.$pkg-prefix}--apikey-modal; diff --git a/packages/ibm-products/src/components/AboutModal/_storybook-styles.scss b/packages/ibm-products/src/components/AboutModal/_storybook-styles.scss index 38bcdeecbe..d5ae03d6e7 100644 --- a/packages/ibm-products/src/components/AboutModal/_storybook-styles.scss +++ b/packages/ibm-products/src/components/AboutModal/_storybook-styles.scss @@ -5,9 +5,9 @@ // LICENSE file in the root directory of this source tree. // -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; -@use '@carbon/styles/scss/type'; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; +@use '@carbon/react/scss/type'; @use 'ALIAS_STORY_STYLE_CONFIG' as c4p-settings; // The block part of our conventional BEM class names (blockClass__E--M). diff --git a/packages/ibm-products/src/components/ActionBar/ActionBar.tsx b/packages/ibm-products/src/components/ActionBar/ActionBar.tsx index 71959e6659..66e0acb634 100644 --- a/packages/ibm-products/src/components/ActionBar/ActionBar.tsx +++ b/packages/ibm-products/src/components/ActionBar/ActionBar.tsx @@ -13,6 +13,7 @@ import React, { PropsWithChildren, Ref, ForwardedRef, + JSX, } from 'react'; // Other standard imports. diff --git a/packages/ibm-products/src/components/ActionSet/ActionSet.tsx b/packages/ibm-products/src/components/ActionSet/ActionSet.tsx index e1a1bc63f2..2c5d994f55 100644 --- a/packages/ibm-products/src/components/ActionSet/ActionSet.tsx +++ b/packages/ibm-products/src/components/ActionSet/ActionSet.tsx @@ -158,7 +158,7 @@ export const ActionSet = React.forwardRef( 'danger--ghost': 2, danger: 4, primary: 5, - }[kind] ?? 3); + })[kind] ?? 3; // order the actions with ghost/ghost-danger buttons first and primary/danger buttons last // (or the opposite way if we're stacking) @@ -243,39 +243,44 @@ ActionSet.validateActions = const ghostActions = countActions('ghost') + countActions('danger--ghost'); - stacking && - actions > 3 && + if (stacking && actions > 3) { problems.push( `you cannot have more than three actions in this size of ${componentName}` ); + } - actions > 4 && + if (actions > 4) { problems.push( `you cannot have more than four actions in a ${componentName}` ); + } - primaryActions > 1 && + if (primaryActions > 1) { problems.push( `you cannot have more than one 'primary' action in a ${componentName}` ); + } - ghostActions > 1 && + if (ghostActions > 1) { problems.push( `you cannot have more than one 'ghost' action in a ${componentName}` ); + } - stacking && - actions > 1 && - ghostActions > 0 && + if (stacking && actions > 1 && ghostActions > 0) { problems.push( `you cannot have a 'ghost' button in conjunction with other action types in this size of ${componentName}` ); + } - actions > - primaryActions + secondaryActions + dangerActions + ghostActions && + if ( + actions > + primaryActions + secondaryActions + dangerActions + ghostActions + ) { problems.push( `you can only have 'primary', 'danger', 'secondary', 'ghost' and 'danger--ghost' buttons in a ${componentName}` ); + } } return problems.length > 0 diff --git a/packages/ibm-products/src/components/AddSelect/AddSelect.tsx b/packages/ibm-products/src/components/AddSelect/AddSelect.tsx index 474ac88a1f..49cfb01ec0 100644 --- a/packages/ibm-products/src/components/AddSelect/AddSelect.tsx +++ b/packages/ibm-products/src/components/AddSelect/AddSelect.tsx @@ -5,7 +5,7 @@ // LICENSE file in the root directory of this source tree. // -import React, { ForwardedRef, forwardRef } from 'react'; +import React, { forwardRef } from 'react'; import PropTypes from 'prop-types'; import { AddSelectBody } from './AddSelectBody'; import { normalize, getGlobalFilterValues } from './add-select-utils'; @@ -54,11 +54,8 @@ export interface AddSelectProps { title: string; } -export const AddSelect = forwardRef( - ( - { items, globalFilters, ...props }: AddSelectProps, - ref: ForwardedRef - ) => { +export const AddSelect = forwardRef( + ({ items = { entries: [] }, globalFilters, ...props }, ref) => { const useNormalizedItems = !!items.entries.find((item) => item.children); const normalizedItems = useNormalizedItems ? normalize(items) : null; const globalFilterOpts = @@ -179,22 +176,4 @@ AddSelect.propTypes = { title: PropTypes.string.isRequired, }; -AddSelect.defaultProps = { - closeIconDescription: '', - description: '', - itemsLabel: '', - items: { - entries: [], - }, - multi: false, - noResultsDescription: '', - noResultsTitle: '', - onClose: () => {}, - onCloseButtonText: '', - onSubmit: () => {}, - onSubmitButtonText: '', - open: false, - title: '', -}; - AddSelect.displayName = componentName; diff --git a/packages/ibm-products/src/components/Carousel/Carousel.tsx b/packages/ibm-products/src/components/Carousel/Carousel.tsx index 44e47b6094..16a2888edd 100644 --- a/packages/ibm-products/src/components/Carousel/Carousel.tsx +++ b/packages/ibm-products/src/components/Carousel/Carousel.tsx @@ -7,6 +7,7 @@ import React, { ReactNode, + RefObject, useCallback, useEffect, useImperativeHandle, @@ -20,6 +21,13 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools'; import { pkg } from '../../settings'; import { useIsomorphicEffect } from '../../global/js/hooks'; +type Handle = { + scrollNext?: () => void; + scrollPrev?: () => void; + scrollReset?: () => void; + scrollToView?: (n: number) => void; +}; + export interface CarouselProps { /** * Provide the contents of the Carousel. @@ -87,8 +95,8 @@ const defaults = { * the left-most item should again be left-aligned. */ const Carousel = React.forwardRef( - ( - { + (props, ref) => { + const { children, className, disableArrowScroll = defaults.disableArrowScroll, @@ -96,9 +104,7 @@ const Carousel = React.forwardRef( onChangeIsScrollable = defaults.onChangeIsScrollable, onScroll = defaults.onScroll, ...rest - }, - ref - ) => { + } = props; const carouselRef = useRef(null); const scrollRef = useRef(null); const leftFadedEdgeRef = useRef(null); @@ -311,7 +317,7 @@ const Carousel = React.forwardRef( // Enable external function calls useImperativeHandle( - ref as React.RefObject, + ref as RefObject, () => ({ scrollNext() { handleScrollNext(); @@ -360,7 +366,9 @@ const Carousel = React.forwardRef( return ( (childElementsRef.current[index] = element)} + ref={(element) => { + childElementsRef.current[index] = element; + }} > {child} diff --git a/packages/ibm-products/src/components/Cascade/Cascade.tsx b/packages/ibm-products/src/components/Cascade/Cascade.tsx index 192814cc15..e87a8e3f5f 100644 --- a/packages/ibm-products/src/components/Cascade/Cascade.tsx +++ b/packages/ibm-products/src/components/Cascade/Cascade.tsx @@ -5,7 +5,7 @@ // LICENSE file in the root directory of this source tree. // -import React, { PropsWithChildren, ReactNode, forwardRef } from 'react'; +import React, { ReactNode, forwardRef } from 'react'; import { Grid } from '@carbon/react'; import PropTypes from 'prop-types'; @@ -35,6 +35,11 @@ const defaults = { grid: false, }; +type EnrichedChildren = { + children?: ReactNode; + className?: string; +}; + /** This pattern is intended for use with cards, tiles, or similarly styled @@ -44,39 +49,28 @@ the page. It should not be used on a page if it is the secondary focus of the page as that will distract the user. */ -export let Cascade = forwardRef( - ( - { - // The component props, in alphabetical order (for consistency). - - children, - className, - grid = defaults.grid, +export let Cascade = forwardRef((props, ref) => { + const { children, className, grid = defaults.grid, ...rest } = props; + const childProps = { + ...rest, + className: cx(blockClass, className), + ref, + ...getDevtoolsProps(componentName), + }; + const modifyChildren = (child) => { + const className = cx(child.props.className, `${blockClass}__element`); + return React.cloneElement(child, { className }); + }; + const getModifiedChildren = () => { + return React.Children.map(children, (child) => modifyChildren(child)); + }; - // Collect any other property values passed in. - ...rest - }: PropsWithChildren, - ref: React.Ref - ) => { - const props = { - ...rest, - className: cx(blockClass, className), - ref, - ...getDevtoolsProps(componentName), - }; - const modifyChildren = (child) => { - const className = cx(child.props.className, `${blockClass}__element`); - return React.cloneElement(child, { className }); - }; - const getModifiedChildren = () => { - return React.Children.map(children, (child) => modifyChildren(child)); - }; - - if (grid) { - let colIdx = 0; - const gridElm = React.Children.map(children, (row) => { - if (React.isValidElement(row)) { - const cols = React.Children.map(row?.props.children, (col) => { + if (grid) { + let colIdx = 0; + const gridElm = React.Children.map(children, (row) => { + if (React.isValidElement(row)) { + const cols = React.Children.map(row?.props.children, (col) => { + if (React.isValidElement(col)) { colIdx = colIdx + 1; const colClassnames = cx( col.props.className, @@ -84,23 +78,23 @@ export let Cascade = forwardRef( `${blockClass}__col-${colIdx}` ); return React.cloneElement(col, { className: colClassnames }); - }); - return React.cloneElement(row as React.ReactElement, { - children: cols, - }); - } - return children; - }); - return ( -
- {gridElm} -
- ); - } - - return
{getModifiedChildren()}
; + } + }); + return React.cloneElement(row, { + children: cols, + }); + } + return children; + }); + return ( +
+ {gridElm} +
+ ); } -); + + return
{getModifiedChildren()}
; +}); Cascade = pkg.checkComponentEnabled(Cascade, componentName); diff --git a/packages/ibm-products/src/components/Cascade/_storybook-styles.scss b/packages/ibm-products/src/components/Cascade/_storybook-styles.scss index 8966d8f9e7..b0121fa98f 100644 --- a/packages/ibm-products/src/components/Cascade/_storybook-styles.scss +++ b/packages/ibm-products/src/components/Cascade/_storybook-styles.scss @@ -5,8 +5,8 @@ // LICENSE file in the root directory of this source tree. // -@use '@carbon/styles/scss/theme' as *; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/theme' as *; +@use '@carbon/react/scss/spacing' as *; #storybook-docs .docs-story { /* stylelint-disable-next-line carbon/layout-use */ diff --git a/packages/ibm-products/src/components/Checklist/_storybook-styles.scss b/packages/ibm-products/src/components/Checklist/_storybook-styles.scss index cc5ffa9066..d81b4be51d 100644 --- a/packages/ibm-products/src/components/Checklist/_storybook-styles.scss +++ b/packages/ibm-products/src/components/Checklist/_storybook-styles.scss @@ -5,7 +5,7 @@ // LICENSE file in the root directory of this source tree. // -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/spacing' as *; .checklist-stories__viewport { min-width: calc(2 * $spacing-13); // 320px diff --git a/packages/ibm-products/src/components/Coachmark/Coachmark.tsx b/packages/ibm-products/src/components/Coachmark/Coachmark.tsx index 56796d415d..b6c83bbfaf 100644 --- a/packages/ibm-products/src/components/Coachmark/Coachmark.tsx +++ b/packages/ibm-products/src/components/Coachmark/Coachmark.tsx @@ -164,8 +164,8 @@ export let Coachmark = forwardRef( useIsomorphicEffect(() => { portalNode.current = portalTarget - ? document?.querySelector(portalTarget) ?? - document?.querySelector('body') + ? (document?.querySelector(portalTarget) ?? + document?.querySelector('body')) : document?.querySelector('body'); }, [portalTarget]); diff --git a/packages/ibm-products/src/components/Coachmark/_storybook-styles.scss b/packages/ibm-products/src/components/Coachmark/_storybook-styles.scss index c3af5bad2b..d233a904fd 100644 --- a/packages/ibm-products/src/components/Coachmark/_storybook-styles.scss +++ b/packages/ibm-products/src/components/Coachmark/_storybook-styles.scss @@ -6,7 +6,7 @@ // @use '../../../../ibm-products-styles/src/global/styles/project-settings'; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/spacing' as *; .CoachmarkBaseExampleUsage { position: relative; diff --git a/packages/ibm-products/src/components/CoachmarkBeacon/_storybook-styles.scss b/packages/ibm-products/src/components/CoachmarkBeacon/_storybook-styles.scss index c3af5bad2b..d233a904fd 100644 --- a/packages/ibm-products/src/components/CoachmarkBeacon/_storybook-styles.scss +++ b/packages/ibm-products/src/components/CoachmarkBeacon/_storybook-styles.scss @@ -6,7 +6,7 @@ // @use '../../../../ibm-products-styles/src/global/styles/project-settings'; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/spacing' as *; .CoachmarkBaseExampleUsage { position: relative; diff --git a/packages/ibm-products/src/components/CoachmarkButton/_storybook-styles.scss b/packages/ibm-products/src/components/CoachmarkButton/_storybook-styles.scss index 85df407349..154dfee383 100644 --- a/packages/ibm-products/src/components/CoachmarkButton/_storybook-styles.scss +++ b/packages/ibm-products/src/components/CoachmarkButton/_storybook-styles.scss @@ -6,7 +6,7 @@ // @use '../../../../ibm-products-styles/src/global/styles/project-settings'; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/spacing' as *; // TODO: add any additional styles used by CoachmarkButton.stories.js .CoachmarkBaseExampleUsage { diff --git a/packages/ibm-products/src/components/CoachmarkFixed/CoachmarkFixed.tsx b/packages/ibm-products/src/components/CoachmarkFixed/CoachmarkFixed.tsx index d58f5c3672..d3c97d390a 100644 --- a/packages/ibm-products/src/components/CoachmarkFixed/CoachmarkFixed.tsx +++ b/packages/ibm-products/src/components/CoachmarkFixed/CoachmarkFixed.tsx @@ -110,8 +110,8 @@ export let CoachmarkFixed = React.forwardRef< useIsomorphicEffect(() => { portalNode.current = portalTarget - ? document?.querySelector(portalTarget) ?? - document?.querySelector('body') + ? (document?.querySelector(portalTarget) ?? + document?.querySelector('body')) : document?.querySelector('body'); }, [portalTarget]); diff --git a/packages/ibm-products/src/components/CoachmarkOverlayElement/_storybook-styles.scss b/packages/ibm-products/src/components/CoachmarkOverlayElement/_storybook-styles.scss index dfa4afc760..60b445f8ab 100644 --- a/packages/ibm-products/src/components/CoachmarkOverlayElement/_storybook-styles.scss +++ b/packages/ibm-products/src/components/CoachmarkOverlayElement/_storybook-styles.scss @@ -6,7 +6,7 @@ // @use '../../../../ibm-products-styles/src/global/styles/project-settings'; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/spacing' as *; // TODO: add any additional styles used by CoachmarkOverlayElement.stories.js .CoachmarkBaseExampleUsage { diff --git a/packages/ibm-products/src/components/CoachmarkOverlayElements/_storybook-styles.scss b/packages/ibm-products/src/components/CoachmarkOverlayElements/_storybook-styles.scss index 6c1acdcd9b..d3b6ecc9ea 100644 --- a/packages/ibm-products/src/components/CoachmarkOverlayElements/_storybook-styles.scss +++ b/packages/ibm-products/src/components/CoachmarkOverlayElements/_storybook-styles.scss @@ -6,7 +6,7 @@ // @use '../../../../ibm-products-styles/src/global/styles/project-settings'; -@use '@carbon/styles/scss/spacing' as *; +@use '@carbon/react/scss/spacing' as *; // TODO: add any additional styles used by CoachmarkOverlayElements.stories.js .CoachmarkBaseExampleUsage { diff --git a/packages/ibm-products/src/components/CoachmarkStack/CoachmarkStack.tsx b/packages/ibm-products/src/components/CoachmarkStack/CoachmarkStack.tsx index 50e724f7d8..06ef5e05cf 100644 --- a/packages/ibm-products/src/components/CoachmarkStack/CoachmarkStack.tsx +++ b/packages/ibm-products/src/components/CoachmarkStack/CoachmarkStack.tsx @@ -146,8 +146,8 @@ export let CoachmarkStack = React.forwardRef< useIsomorphicEffect(() => { portalNode.current = portalTarget - ? document?.querySelector(portalTarget) ?? - document?.querySelector('body') + ? (document?.querySelector(portalTarget) ?? + document?.querySelector('body')) : document?.querySelector('body'); }, [portalTarget]); @@ -192,7 +192,11 @@ export let CoachmarkStack = React.forwardRef< const escFunction = useCallback( (event) => { if (event.key === 'Escape') { - selectedItemNumber === 0 ? handleClose(true) : handleClose(false); + if (selectedItemNumber === 0) { + handleClose(true); + } else { + handleClose(false); + } } }, [handleClose, selectedItemNumber] @@ -269,9 +273,9 @@ export let CoachmarkStack = React.forwardRef< return ( - (stackedCoachmarkRefs.current[idx] = ref as HTMLDivElement) - } + ref={(ref) => { + stackedCoachmarkRefs.current[idx] = ref as HTMLDivElement; + }} kind={COACHMARK_OVERLAY_KIND.STACKED} onClose={() => handleClose(false)} theme={theme} diff --git a/packages/ibm-products/src/components/CoachmarkStack/CoachmarkStackHome.tsx b/packages/ibm-products/src/components/CoachmarkStack/CoachmarkStackHome.tsx index 6f69e96ae6..2bb3d7494f 100644 --- a/packages/ibm-products/src/components/CoachmarkStack/CoachmarkStackHome.tsx +++ b/packages/ibm-products/src/components/CoachmarkStack/CoachmarkStackHome.tsx @@ -147,8 +147,8 @@ export let CoachmarkStackHome = forwardRef< useIsomorphicEffect(() => { portalNode.current = portalTarget - ? document?.querySelector(portalTarget) ?? - document?.querySelector('body') + ? (document?.querySelector(portalTarget) ?? + document?.querySelector('body')) : document?.querySelector('body'); }, [portalTarget]); diff --git a/packages/ibm-products/src/components/ComboButton/ComboButton.tsx b/packages/ibm-products/src/components/ComboButton/ComboButton.tsx index bece3a60e3..6d9abcf973 100644 --- a/packages/ibm-products/src/components/ComboButton/ComboButton.tsx +++ b/packages/ibm-products/src/components/ComboButton/ComboButton.tsx @@ -6,11 +6,10 @@ */ import { Button, OverflowMenu, OverflowMenuItem } from '@carbon/react'; -import { ChevronDown, ChevronUp } from '@carbon/react/icons'; +import { ChevronDown, ChevronUp, CarbonIconType } from '@carbon/react/icons'; import React, { Children, ComponentProps, - PropsWithChildren, ReactNode, createElement, forwardRef, @@ -63,30 +62,24 @@ export interface ComboButtonProps extends ComponentProps<'div'> { }; } +type EnrichedChildren = { + children?: ReactNode; + renderIcon?: CarbonIconType; +}; + /** * The combo button consolidates similar actions, while exposing the most commonly used one. */ -const ComboButton = forwardRef( - ( - { - // The component props, in alphabetical order (for consistency). - - children, - className, - overflowMenu, - - // Collect any other property values passed in. - ...rest - }: PropsWithChildren, - ref: React.Ref - ) => { +const ComboButton = forwardRef( + (props, ref) => { + const { children, className, overflowMenu, ...rest } = props; const { current: instanceId } = useRef(uuidv4()); const [isOpen, setIsOpen] = useState(false); - const [primaryAction, ...restActions] = Children.toArray(children) + const actions = Children.toArray(children) .filter(Boolean) .map((child) => { - if (React.isValidElement(child)) { + if (React.isValidElement(child)) { const { props } = child; return { ...props, @@ -94,7 +87,9 @@ const ComboButton = forwardRef( }; } return null; - }); + }) as EnrichedChildren[]; + const primaryAction = actions.slice(0, 1); + const secondaryActions = actions.slice(1); return (