diff --git a/docs/migration/11.x-color.md b/docs/migration/11.x-color.md deleted file mode 100644 index 3597b0d56392..000000000000 --- a/docs/migration/11.x-color.md +++ /dev/null @@ -1,132 +0,0 @@ -# Color - -> **Note:** The Carbon v11 release is currently in beta release. Be on the -> lookout for the public preview release available in the coming months. - -## Color tokens - -**Status key:** - -- **No change:** Token name has no change between versions. -- **Updated:** From v10 to V11 the number suffix has been replaced with an - adjective that reflects it's usage. This is just a name change, the role - remains the same between v10 and v11. -- **Split:** V10 token has been split into multiple new v11 tokens for more - specific usage. -- **New:** A net new color token to the system in v11. It has no v10 - counterpart. -- **Deprecated:** v10 token was removed in v11. - -| V10 token name | V11 token name | V11 Contextual token | Status | -| ------------------ | ------------------------- | ---------------------- | ---------- | -| active-danger | button-danger-active | — | Updated | -| active-light-ui | layer-active-02 | layer-active | Updated | -| active-primary | button-primary-active | — | Updated | -| active-secondary | button-secondary-active | — | Updated | -| active-tertiary | button-tertiary-active | — | Updated | -| active-ui | layer-active-01 | layer-active | Split | -| active-ui | background-active | — | Split | -| active-ui | layer-accent-active-01 | layer-accent-active | Split | -| active-ui | border-subtle-selected-01 | border-sublte-selected | Split | -| button-separator | button-separator | — | No change | -| danger | button-danger-primary | — | Deprecated | -| danger-01 | button-danger-primary | — | Updated | -| danger-02 | button-danger-secondary | — | Updated | -| decorative-01 | border-subtle-02 | border-subtle | Updated | -| disabled-01 | — | — | Deprecated | -| disabled-02 | text-disabled | — | Split | -| disabled-02 | icon-disabled | — | Split | -| disabled-02 | button-disabled | — | Split | -| disabled-02 | border-disabled | border-disabled | Split | -| disabled-03 | icon-on-color-disabled | — | Split | -| disabled-03 | layer-selected-disabled | — | Split | -| disabled-03 | text-on-color-disabled | — | Split | -| field-01 | field-01 | field | No change | -| field-02 | field-02 | field | No change | -| focus | focus | — | No change | -| highlight | highlight | — | No change | -| hover-danger | button-danger-hover | — | Updated | -| hover-light-ui | layer-hover-02 | — | Updated | -| hover-primary | button-primary-hover | — | Updated | -| hover-primary-text | link-primary-hover | — | Updated | -| hover-secondary | button-secondary-hover | — | Updated | -| hover-selected-ui | background-selected-hover | — | Split | -| hover-selected-ui | layer-accent-hover-01 | layer-accent-hover | Split | -| hover-selected-ui | layer-selected-hover-01 | layer-selected-hover | Split | -| hover-tertiary | button-tertiary-hover | — | Updated | -| hover-ui | background-hover | — | Updated | -| hover-ui | layer-hover-01 | layer-hover | Split | -| hover-ui | field-hover-01 | field-hover | Split | -| hover-ui | field-hover-02 | field-hover | Split | -| icon-01 | icon-primary | — | Updated | -| icon-02 | icon-secondary | — | Updated | -| icon-03 | icon-on-color | — | Updated | -| interactive-01 | button-primary | — | Updated | -| interactive-01 | background-brand | — | Updated | -| interactive-02 | button-secondary | — | Updated | -| interactive-03 | button-tertiary | — | Updated | -| interactive-04 | border-interactive | — | Split | -| interactive-04 | interactive | — | Split | -| inverse-01 | icon-inverse | — | Split | -| inverse-01 | focus-inset | — | Split | -| inverse-01 | text-inverse | — | Split | -| inverse-02 | "background-inverse " | — | Updated | -| inverse-focus-ui | focus-inverse | — | Updated | -| inverse-hover-ui | background-inverse-hover | — | Updated | -| inverse-link | link-inverse | — | Updated | -| inverse-support-01 | support-error-inverse | — | Updated | -| inverse-support-02 | support-success-inverse | — | Updated | -| inverse-support-03 | support-warning-inverse | — | Updated | -| inverse-support-04 | support-info-inverse | — | Updated | -| link-01 | link-primary | — | Updated | -| link-02 | link-secondary | — | Updated | -| overlay-01 | overlay | — | Updated | -| selected-light-ui | layer-selected-02 | — | Updated | -| selected-ui | layer-selected-01 | layer-selected | Split | -| selected-ui | background-selected | — | Split | -| skeleton-01 | skeleton-background | — | Updated | -| skeleton-02 | skeleton-element | — | Updated | -| support-01 | support-error | — | Updated | -| support-02 | support-success | — | Updated | -| support-03 | support-warning | — | Updated | -| support-04 | support-info | — | Updated | -| text-01 | text-primary | — | Updated | -| text-02 | text-secondary | — | Updated | -| text-03 | text-placeholder | — | Updated | -| text-04 | text-on-color | — | Updated | -| text-05 | text-helper | — | Updated | -| text-error | text-error | — | Updated | -| hover-row | layer-hover-01 | layer-hover | Deprecated | -| ui-01 | layer-01 | layer | Updated | -| ui-02 | layer-02 | layer | Updated | -| ui-03 | layer-accent-01 | layer-accent | Split | -| ui-03 | border-subtle-01 | border-subtle | Split | -| ui-04 | toggle-off | — | Split | -| ui-04 | border-strong-01 | border-strong | Split | -| ui-05 | border-inverse | — | Updated | -| ui-05 | layer-selected-inverse | — | Updated | -| ui-background | background | — | Updated | -| visited-link | link-visited | — | Updated | -| brand-01 | — | — | Deprecated | -| brand-02 | — | — | Deprecated | -| brand-03 | — | — | Deprecated | -| — | border-strong-02 | border-strong | New | -| — | border-strong-03 | border-strong | New | -| — | border-subtle-00 | border-subtle | New | -| — | border-subtle-03 | border-subtle | New | -| — | border-subtle-selected-02 | border-subtle-selected | New | -| — | border-subtle-selected-03 | border-subtle-selected | New | -| — | field-03 | field | New | -| — | field-hover-03 | field-hover | New | -| — | layer-03 | layer | New | -| — | layer-active-03 | layer-active | New | -| — | layer-hover-03 | layer-hover | New | -| — | layer-selected-03 | layer-selected | New | -| — | layer-selected-hover-02 | layer-selected-hover | New | -| — | layer-selected-hover-03 | layer-selected-hover | New | -| — | layer-accent-02 | layer-accent | New | -| — | layer-accent-03 | layer-accent | New | -| — | layer-accent-active-02 | layer-accent-active | New | -| — | layer-accent-active-03 | layer-accent-active | New | -| — | layer-accent-hover-02 | layer-accent-hover | New | -| — | layer-accent-hover-03 | layer-accent-hover | New | diff --git a/docs/migration/v11.md b/docs/migration/v11.md index 945f54ca142b..63adca7f7c41 100644 --- a/docs/migration/v11.md +++ b/docs/migration/v11.md @@ -55,6 +55,7 @@ of packages below. - [@carbon/grid](#carbongrid) - [@carbon/layout](#carbonlayout) - [@carbon/motion](#carbonmotion) + - [@carbon/pictograms](#carbonpictograms) - [@carbon/pictograms-react](#carbonpictograms-react) - [@carbon/themes](#carbonthemes) @@ -1219,14 +1220,7 @@ const iconTypes = { ## @carbon/colors -| v10 | v11 | -| :-------------------------------------- | :----------------------------------- | -| `@import '@carbon/colors/scss/index';` | `@use '@carbon/colors';` | -| `@import '@carbon/colors/scss/colors';` | `@use '@carbon/colors';` | -| (alias) | `@use '@carbon/styles/scss/colors';` | -| (alias) | `@use '@carbon/react/scss/colors';` | - -**Changes** +**Breaking changes** - This package now requires Dart Sass and uses Sass Modules - The `scss` folder is no longer needed, you can import `@carbon/colors` @@ -1234,6 +1228,19 @@ const iconTypes = { - Variables and mixins with the `ibm--` prefix have been removed - Variables and mixins with the `carbon--` prefix have been removed +**Imports** + +| v10 | v11 | +| :-------------------------------------- | :----------------------------------- | +| `@import '@carbon/colors/scss/index';` | `@use '@carbon/colors';` | +| | `@use '@carbon/react/scss/colors';` | +| | `@use '@carbon/styles/scss/colors';` | +| `@import '@carbon/colors/scss/colors';` | `@use '@carbon/colors';` | +| | `@use '@carbon/react/scss/colors';` | +| | `@use '@carbon/styles/scss/colors';` | + +**Sass API** + | v10 | v11 | | :------------------------------------------------------ | :---------------------------------------- | | `$-`, for example `$blue-50` | No changes | @@ -1246,10 +1253,39 @@ const iconTypes = { | `@mixin carbon--colors` | Removed | For full Sass API documentation, visit the -[Sass Documentation](../../packages/colors/docs/sass.md) for the package. +[Sass Documentation](../../packages/colors/docs/sass.md) for this package. ## @carbon/elements +**Breaking changes** + +- This package now requires Dart Sass and uses Sass Modules +- The `scss` folder is no longer needed, you can import `@carbon/elements` + directly in Sass + +**Imports** + +| v10 | v11 | +| :------------------------------------------ | :------------------------- | +| `@import '@carbon/elements/scss/index';` | `@use '@carbon/elements';` | +| `@import '@carbon/elements/scss/elements';` | `@use '@carbon/elements';` | + +**Sass API** + +This package re-exports from other packages that make up the IBM Design +Language. For more information about exports, refer to the individual package +documentation to see what has changed. These packages include: + +- [@carbon/colors](#carboncolors) +- [@carbon/grid](#carbongrid) +- [@carbon/layout](#carbonlayout) +- [@carbon/motion](#carbonmotion) +- [@carbon/themes](#carbonthemes) +- [@carbon/type](#carbontype) + +For full Sass API documentation, visit the +[Sass Documentation](../../packages/elements/docs/sass.md) for this package. + ## @carbon/grid | v10 | v11 | @@ -1277,102 +1313,113 @@ For full Sass API documentation, visit the ## @carbon/layout +**Breaking changes** + +- This package now requires Dart Sass and uses Sass Modules +- Variables, mixins, and functions using the `carbon--` prefix has been renamed +- The layout scale has been replaced with steps in the spacing scale +- Breaking and grid functions, mixins, and variables have been moved to the + `@carbon/grid` package + +**Imports** + | v10 | v11 | | :-------------------------------------- | :------------------------------------ | | `@import '@carbon/layout/scss/layout';` | `@use '@carbon/layout';` | +| | `@use '@carbon/styles/scss/spacing';` | +| | `@use '@carbon/react/scss/spacing';` | | `@import '@carbon/layout/scss/index';` | `@use '@carbon/layout';` | -| (alias) | `@use '@carbon/styles/scss/spacing';` | -| (alias) | `@use '@carbon/react/scss/spacing';` | +| | `@use '@carbon/styles/scss/spacing';` | +| | `@use '@carbon/react/scss/spacing';` | **Changes** -| Filename | v10 | v11 | -| :---------------------- | :------------------------------------------ | :--------------------------------- | -| `scss/_breakpoint.scss` | `$carbon--grid-gutter` | | -| | `$carbon--grid-gutter--condensed` | | -| | `$carbon--grid-breakpoints` | | -| | `@function carbon--breakpoint-next` | | -| | `@function carbon--breakpoint-prev` | | -| | `@function carbon--is-smallest-breakpoint` | | -| | `@function carbon--largest-breakpoint-name` | | -| | `@function carbon--breakpoint-infix` | | -| | `@function carbon--breakpoint-up` | | -| | `@function carbon--breakpoint-down` | | -| | `@function carbon--breakpoint-between` | | -| | `@function carbon--largest-breakpoint` | | -| | `@function carbon--breakpoint` | | -| `scss/_convert.scss` | `$carbon--base-font-size` | | -| | `carbon--rem` | | -| | `carbon--em` | | -| `scss/_key-height.scss` | `@function carbon--get-column-width` | | -| | `$carbon--key-height-scales` | | -| | `@function carbon--key-height` | | -| `scss/_mini-unit.scss` | `$carbon--mini-unit-size` | | -| | `@function carbon--mini-units` | | -| `scss/_spacing.scss` | `$carbon--spacing-01` | | -| | `$carbon--spacing-02` | | -| | `$carbon--spacing-03` | | -| | `$carbon--spacing-04` | | -| | `$carbon--spacing-05` | | -| | `$carbon--spacing-06` | | -| | `$carbon--spacing-07` | | -| | `$carbon--spacing-08` | | -| | `$carbon--spacing-09` | | -| | `$carbon--spacing-10` | | -| | `$carbon--spacing-11` | | -| | `$carbon--spacing-12` | | -| | `$carbon--spacing-13` | | -| | `$carbon--spacing` | | -| | `$spacing-01` | | -| | `$spacing-02` | | -| | `$spacing-03` | | -| | `$spacing-04` | | -| | `$spacing-05` | | -| | `$spacing-06` | | -| | `$spacing-07` | | -| | `$spacing-08` | | -| | `$spacing-09` | | -| | `$spacing-10` | | -| | `$spacing-11` | | -| | `$spacing-12` | | -| | `$spacing-13` | | -| | `$carbon--layout-01` | Removed, use `$spacing-05` instead | -| | `$carbon--layout-02` | Removed, use `$spacing-06` instead | -| | `$carbon--layout-03` | Removed, use `$spacing-07` instead | -| | `$carbon--layout-04` | Removed, use `$spacing-09` instead | -| | `$carbon--layout-05` | Removed, use `$spacing-10` instead | -| | `$carbon--layout-06` | Removed, use `$spacing-12` instead | -| | `$carbon--layout-07` | Removed, use `$spacing-13` instead | -| | `$carbon--layout` | Removed | -| | `$layout-01` | Removed, use `$spacing-05` instead | -| | `$layout-02` | Removed, use `$spacing-06` instead | -| | `$layout-03` | Removed, use `$spacing-07` instead | -| | `$layout-04` | Removed, use `$spacing-09` instead | -| | `$layout-05` | Removed, use `$spacing-10` instead | -| | `$layout-06` | Removed, use `$spacing-12` instead | -| | `$layout-07` | Removed, use `$spacing-13` instead | -| | `$carbon--fluid-spacing-01` | | -| | `$carbon--fluid-spacing-02` | | -| | `$carbon--fluid-spacing-03` | | -| | `$carbon--fluid-spacing-04` | | -| | `$carbon--fluid-spacing` | | -| | `$fluid-spacing-01` | | -| | `$fluid-spacing-02` | | -| | `$fluid-spacing-03` | | -| | `$fluid-spacing-04` | | +| Filename | v10 | v11 | +| :---------------------- | :----------------------------------- | :------------------------------------------------------------------------------------------------------------------------ | +| `scss/_breakpoint.scss` | | Removed, use `@carbon/styles/scss/breakpoint`, `@carbon/react/scss/breakpoint`, or `@carbon/grid/scss/breakpoint` instead | +| `scss/_convert.scss` | `$carbon--base-font-size` | Renamed to `$base-font-size` | +| | `@function carbon--rem` | Renamed to `@function rem` | +| | `@function carbon--em` | Renamed to `@function em` | +| `scss/_key-height.scss` | `@function carbon--get-column-width` | Removed | +| | `$carbon--key-height-scales` | Removed | +| | `@function carbon--key-height` | Removed | +| `scss/_mini-unit.scss` | `$carbon--mini-unit-size` | Removed | +| | `@function carbon--mini-units` | Removed | +| `scss/_spacing.scss` | `$carbon--spacing-01` | Removed, use `$spacing-01` instead | +| | `$carbon--spacing-02` | Removed, use `$spacing-02` instead | +| | `$carbon--spacing-03` | Removed, use `$spacing-03` instead | +| | `$carbon--spacing-04` | Removed, use `$spacing-04` instead | +| | `$carbon--spacing-05` | Removed, use `$spacing-05` instead | +| | `$carbon--spacing-06` | Removed, use `$spacing-06` instead | +| | `$carbon--spacing-07` | Removed, use `$spacing-07` instead | +| | `$carbon--spacing-08` | Removed, use `$spacing-08` instead | +| | `$carbon--spacing-09` | Removed, use `$spacing-09` instead | +| | `$carbon--spacing-10` | Removed, use `$spacing-10` instead | +| | `$carbon--spacing-11` | Removed, use `$spacing-11` instead | +| | `$carbon--spacing-12` | Removed, use `$spacing-12` instead | +| | `$carbon--spacing-13` | Removed, use `$spacing-13` instead | +| | `$carbon--spacing` | Removed, use `$spacing` instead | +| | `$spacing-01` | No changes | +| | `$spacing-02` | No changes | +| | `$spacing-03` | No changes | +| | `$spacing-04` | No changes | +| | `$spacing-05` | No changes | +| | `$spacing-06` | No changes | +| | `$spacing-07` | No changes | +| | `$spacing-08` | No changes | +| | `$spacing-09` | No changes | +| | `$spacing-10` | No changes | +| | `$spacing-11` | No changes | +| | `$spacing-12` | No changes | +| | `$spacing-13` | No changes | +| | `$carbon--layout-01` | Removed, use `$spacing-05` instead | +| | `$carbon--layout-02` | Removed, use `$spacing-06` instead | +| | `$carbon--layout-03` | Removed, use `$spacing-07` instead | +| | `$carbon--layout-04` | Removed, use `$spacing-09` instead | +| | `$carbon--layout-05` | Removed, use `$spacing-10` instead | +| | `$carbon--layout-06` | Removed, use `$spacing-12` instead | +| | `$carbon--layout-07` | Removed, use `$spacing-13` instead | +| | `$carbon--layout` | Removed | +| | `$layout-01` | Removed, use `$spacing-05` instead | +| | `$layout-02` | Removed, use `$spacing-06` instead | +| | `$layout-03` | Removed, use `$spacing-07` instead | +| | `$layout-04` | Removed, use `$spacing-09` instead | +| | `$layout-05` | Removed, use `$spacing-10` instead | +| | `$layout-06` | Removed, use `$spacing-12` instead | +| | `$layout-07` | Removed, use `$spacing-13` instead | +| | `$carbon--fluid-spacing-01` | Removed, use `$fluid-spacing-01` instead | +| | `$carbon--fluid-spacing-02` | Removed, use `$fluid-spacing-02` instead | +| | `$carbon--fluid-spacing-03` | Removed, use `$fluid-spacing-03` instead | +| | `$carbon--fluid-spacing-04` | Removed, use `$fluid-spacing-04` instead | +| | `$carbon--fluid-spacing` | Removed, use `$fluid-spacing` instead | +| | `$fluid-spacing-01` | No changes | +| | `$fluid-spacing-02` | No changes | +| | `$fluid-spacing-03` | No changes | +| | `$fluid-spacing-04` | No changes | +| | `$fluid-spacing` | No changes | ## @carbon/motion +**Breaking changes** + +- This package now requires Dart Sass and uses Sass Modules +- The `scss` folder is no longer needed, you can import `@carbon/motion` + directly in Sass +- Variables, mixins, and functions using the `carbon--` prefix has been renamed +- Duration variables now have a `duration-` prefix + +**Imports** + | v10 | v11 | | :-------------------------------------- | :----------------------------------- | | `@import '@carbon/motion/scss/motion';` | `@use '@carbon/motion';` | +| | `@use '@carbon/styles/scss/motion';` | +| | `@use '@carbon/react/scss/motion';` | | `@import '@carbon/motion/scss/index';` | `@use '@carbon/motion';` | -| (alias) | `@use '@carbon/styles/scss/motion';` | -| (alias) | `@use '@carbon/react/scss/motion';` | +| | `@use '@carbon/styles/scss/motion';` | +| | `@use '@carbon/react/scss/motion';` | -**Changes** - -- This package now requires Dart Sass and uses Sass Modules +**Sass API** | v10 | v11 | | -------------------------- | ---------------------------------- | @@ -1505,33 +1552,46 @@ For full documentation, visit the ## @carbon/themes -| v10 | v11 | -| :------------------------------------- | :---------------------------------- | -| `@import '@carbon/theme/scss/themes';` | `@use '@carbon/themes';` | -| `@import '@carbon/theme/scss/index';` | `@use '@carbon/themes';` | -| (alias) | `@use '@carbon/styles/scss/theme';` | -| (alias) | `@use '@carbon/react/scss/theme';` | - -**Changes** +**Breaking changes** - This package now requires Dart Sass and uses Sass Modules - Variables, mixins, and functions with the `carbon--` prefix have been renamed +- Design Tokens have been changed, however you can use the + [compatability guide](#todo) to use v10 tokens along with v11 tokens +- The `theme` mixin now emits CSS Custom Properties by default for the given + theme, `$emit-custom-properties` and `$emit-difference` are no longer needed + +**Imports** + +| v10 | v11 | +| :------------------------------------------ | :----------------------------------- | +| `@import '@carbon/themes/scss/themes';` | `@use '@carbon/themes';` | +| | `@use '@carbon/styles';` | +| | `@use '@carbon/react/scss/themes';` | +| `@import '@carbon/themes/scss/index';` | `@use '@carbon/themes';` | +| | `@use '@carbon/styles/scss/theme';` | +| | `@use '@carbon/react/scss/theme';` | +| `@import '@carbon/themes/scss/theme-maps';` | `@use '@carbon/themes/scss/themes';` | +| | `@use '@carbon/styles/scss/themes';` | +| | `@use '@carbon/react/scss/themes';` | + +**Sass API** | Filename | v10 | v11 | | ----------------------- | ----------------------- | -------------------------------------------------------------------------------------------------- | -| `scss/_mixins.scss` | | Removed, use `_theme.scss` instead | +| `scss/_mixins.scss` | | Moved to `scss/theme` | | | `@mixin carbon--theme` | Renamed to `@mixin theme` | -| `scss/_theme-maps.scss` | | Removed, use `scss/_themes.scss` instead | -| | `$carbon--theme--white` | `$white` | -| | `$carbon--theme--g10` | `$g10` | -| | `$carbon--theme--g90` | `$g90` | -| | `$carbon--theme--g100` | `$g100` | +| `scss/_theme-maps.scss` | | Moved to `scss/themes` | +| | `$carbon--theme--white` | Renamed to `$white` | +| | `$carbon--theme--g10` | Renamed to `$g10` | +| | `$carbon--theme--g90` | Renamed to`$g90` | +| | `$carbon--theme--g100` | Renamed `$g100` | | `scss/_tokens.scss` | | Tokens have been changed, use the compatability theme or switch to the [new tokens](#designtokens) | -| `scss/_config.scss` | | New | -| `scss/_theme.scss` | | New | -| `scss/_themes.scss` | | New | -| `scss/themes.scss` | | Moved to `index.scss` | -| `scss/index.scss` | | Moved to `index.scss` | +| `scss/themes.scss` | | Moved to `@carbon/themes` | +| `scss/index.scss` | | Moved to `@carbon/themes` | + +For full Sass API documentation, visit the +[Sass Documentation](../../packages/themes/docs/sass.md) for this package. ### Design Tokens @@ -1547,148 +1607,190 @@ For full documentation, visit the counterpart. - **Deprecated:** v10 token was removed in v11. -| v10 token name | v11 token name | v11 contextual token | Status | -| :----------------- | :------------------------ | :--------------------- | :-------- | -| visited-link | link-visited | | Updated | -| ui-background | background | | Updated | -| ui-05 | layer-selected-inverse | | Split | -| ui-05 | border-inverse | | Split | -| ui-04 | border-strong-01 | border-strong | Split | -| ui-04 | toggle-off | | Split | -| ui-03 | layer-accent-01 | layer-accent | Split | -| ui-03 | border-subtle-01 | border-sublte | Split | -| ui-02 | layer-02 | layer | Updated | -| ui-01 | layer-01 | layer | Updated | -| text-error | text-error | | Updated | -| text-05 | text-helper | | Updated | -| text-04 | text-on-color | | Updated | -| text-03 | text-placeholder | | Updated | -| text-02 | text-secondary | | Updated | -| text-01 | text-primary | | Updated | -| support-04 | support-info | | Updated | -| support-03 | support-warning | | Updated | -| support-02 | support-success | | Updated | -| support-01 | support-error | | Updated | -| skeleton-02 | skeleton-element | | Updated | -| skeleton-01 | skeleton-background | | Updated | -| selected-ui | background-selected | | Split | -| selected-ui | layer-selected-01 | layer-selected | Split | -| selected-light-ui | layer-selected-02 | layer-selected | Updated | -| overlay-01 | overlay | | Updated | -| link-02 | link-secondary | | Updated | -| link-01 | link-primary | | Updated | -| inverse-support-04 | support-info-inverse | | Updated | -| inverse-support-03 | support-warning-inverse | | Updated | -| inverse-support-02 | support-success-inverse | | Updated | -| inverse-support-01 | support-error-inverse | | Updated | -| inverse-link | link-inverse | | Updated | -| inverse-hover-ui | background-inverse-hover | | Updated | -| inverse-focus-ui | focus-inverse | | Updated | -| inverse-02 | background-inverse | | Updated | -| inverse-01 | text-inverse | | Split | -| inverse-01 | icon-inverse | | Split | -| inverse-01 | focus-inset | | Split | -| interactive-04 | interactive | | Updated | -| interactive-04 | border-interactive | | Updated | -| interactive-03 | button-tertiary | | Updated | -| interactive-02 | button-secondary | | Updated | -| interactive-01 | background-brand | | Updated | -| interactive-01 | button-primary | | Updated | -| icon-03 | icon-on-color | | Updated | -| icon-02 | icon-secondary | | Updated | -| icon-01 | icon-primary | | Updated | -| hover-ui | background-hover | | Updated | -| hover-ui | layer-hover-01 | layer-hover | Split | -| hover-ui | field-hover-01 | field-hover | Split | -| hover-ui | field-hover-02 | field-hover | Split | -| hover-tertiary | button-tertiary-hover | | Updated | -| hover-selected-ui | background-selected-hover | | Split | -| hover-selected-ui | layer-selected-hover-01 | layer-selected-hover | Split | -| hover-selected-ui | layer-accent-hover-01 | layer-accent-hover | Split | -| hover-secondary | button-secondary-hover | | Updated | -| hover-row | background-hover | | Split | -| hover-row | layer-hover-01 | | Split | -| hover-primary-text | link-primary-hover | | Updated | -| hover-primary | button-primary-hover | | Updated | -| hover-light-ui | layer-hover-02 | layer-hover | Updated | -| hover-danger | button-danger-hover | | Updated | -| highlight | highlight | | No change | -| focus | focus | | No change | -| field-02 | field-02 | field | No change | -| field-01 | field-01 | field | No change | -| disabled-03 | layer-selected-disabled | | Split | -| disabled-03 | text-on-color-disabled | | Split | -| disabled-03 | icon-on-color-disabled | | Split | -| disabled-02 | text-disabled | | Split | -| disabled-02 | icon-disabled | | Split | -| disabled-02 | button-disabled | | Split | -| disabled-01 | border-disabled-01 | | Split | -| disabled-01 | border-disabled-03 | | Split | -| decorative-01 | border-subtle-02 | border-subtle | Updated | -| danger-02 | button-danger-secondary | | Updated | -| danger / danger-01 | button-danger-primary | | Updated | -| button-separator | button-separator | | No change | -| active-ui | background-active | | Split | -| active-ui | layer-active-01 | layer-active | Split | -| active-ui | layer-accent-active-01 | layer-accent-active | Split | -| active-ui | border-subtle-selected-01 | border-subtle-selected | Split | -| active-tertiary | button-tertiary-active | | Updated | -| active-secondary | button-secondary-active | | Updated | -| active-primary | button-primary-active | | Updated | -| active-light-ui | layer-active-02 | layer-active | Updated | -| active-danger | button-danger-active | | Updated | -| | border-subtle-00 | border-subtle | New | -| | layer-selected-hover-02 | layer-selected-hover | New | -| | layer-accent-02 | layer-accent | New | -| | layer-accent-hover-02 | layer-accent-hover | New | -| | layer-accent-active-02 | layer-accent-active | New | -| | border-strong-02 | border-strong | New | -| | border-subtle-selected-02 | border-subtle-selected | New | -| | layer-03 | layer | New | -| | layer-hover-03 | layer-hover | New | -| | layer-active-03 | layer-active | New | -| | layer-selected-03 | layer-selected | New | -| | layer-selected-hover-03 | layer-selected-hover | New | -| | layer-accent-03 | layer-accent | New | -| | layer-accent-hover-03 | layer-accent-hover | New | -| | layer-accent-active-03 | layer-accent-active | New | -| | field-03 | field | New | -| | field-hover-03 | field-hover | New | -| | border-strong-03 | border-strong | New | -| | border-subtle-03 | border-subtle | New | -| | border-subtle-selected-03 | border-subtle-selected | New | +| V10 token name | V11 token name | V11 Contextual token | Status | +| ------------------ | ------------------------- | ---------------------- | ---------- | +| active-danger | button-danger-active | — | Updated | +| active-light-ui | layer-active-02 | layer-active | Updated | +| active-primary | button-primary-active | — | Updated | +| active-secondary | button-secondary-active | — | Updated | +| active-tertiary | button-tertiary-active | — | Updated | +| active-ui | layer-active-01 | layer-active | Split | +| active-ui | background-active | — | Split | +| active-ui | layer-accent-active-01 | layer-accent-active | Split | +| active-ui | border-subtle-selected-01 | border-sublte-selected | Split | +| button-separator | button-separator | — | No change | +| danger | button-danger-primary | — | Deprecated | +| danger-01 | button-danger-primary | — | Updated | +| danger-02 | button-danger-secondary | — | Updated | +| decorative-01 | border-subtle-02 | border-subtle | Updated | +| disabled-01 | — | — | Deprecated | +| disabled-02 | text-disabled | — | Split | +| disabled-02 | icon-disabled | — | Split | +| disabled-02 | button-disabled | — | Split | +| disabled-02 | border-disabled | border-disabled | Split | +| disabled-03 | icon-on-color-disabled | — | Split | +| disabled-03 | layer-selected-disabled | — | Split | +| disabled-03 | text-on-color-disabled | — | Split | +| field-01 | field-01 | field | No change | +| field-02 | field-02 | field | No change | +| focus | focus | — | No change | +| highlight | highlight | — | No change | +| hover-danger | button-danger-hover | — | Updated | +| hover-light-ui | layer-hover-02 | — | Updated | +| hover-primary | button-primary-hover | — | Updated | +| hover-primary-text | link-primary-hover | — | Updated | +| hover-secondary | button-secondary-hover | — | Updated | +| hover-selected-ui | background-selected-hover | — | Split | +| hover-selected-ui | layer-accent-hover-01 | layer-accent-hover | Split | +| hover-selected-ui | layer-selected-hover-01 | layer-selected-hover | Split | +| hover-tertiary | button-tertiary-hover | — | Updated | +| hover-ui | background-hover | — | Updated | +| hover-ui | layer-hover-01 | layer-hover | Split | +| hover-ui | field-hover-01 | field-hover | Split | +| hover-ui | field-hover-02 | field-hover | Split | +| icon-01 | icon-primary | — | Updated | +| icon-02 | icon-secondary | — | Updated | +| icon-03 | icon-on-color | — | Updated | +| interactive-01 | button-primary | — | Updated | +| interactive-01 | background-brand | — | Updated | +| interactive-02 | button-secondary | — | Updated | +| interactive-03 | button-tertiary | — | Updated | +| interactive-04 | border-interactive | — | Split | +| interactive-04 | interactive | — | Split | +| inverse-01 | icon-inverse | — | Split | +| inverse-01 | focus-inset | — | Split | +| inverse-01 | text-inverse | — | Split | +| inverse-02 | "background-inverse " | — | Updated | +| inverse-focus-ui | focus-inverse | — | Updated | +| inverse-hover-ui | background-inverse-hover | — | Updated | +| inverse-link | link-inverse | — | Updated | +| inverse-support-01 | support-error-inverse | — | Updated | +| inverse-support-02 | support-success-inverse | — | Updated | +| inverse-support-03 | support-warning-inverse | — | Updated | +| inverse-support-04 | support-info-inverse | — | Updated | +| link-01 | link-primary | — | Updated | +| link-02 | link-secondary | — | Updated | +| overlay-01 | overlay | — | Updated | +| selected-light-ui | layer-selected-02 | — | Updated | +| selected-ui | layer-selected-01 | layer-selected | Split | +| selected-ui | background-selected | — | Split | +| skeleton-01 | skeleton-background | — | Updated | +| skeleton-02 | skeleton-element | — | Updated | +| support-01 | support-error | — | Updated | +| support-02 | support-success | — | Updated | +| support-03 | support-warning | — | Updated | +| support-04 | support-info | — | Updated | +| text-01 | text-primary | — | Updated | +| text-02 | text-secondary | — | Updated | +| text-03 | text-placeholder | — | Updated | +| text-04 | text-on-color | — | Updated | +| text-05 | text-helper | — | Updated | +| text-error | text-error | — | Updated | +| hover-row | layer-hover-01 | layer-hover | Deprecated | +| ui-01 | layer-01 | layer | Updated | +| ui-02 | layer-02 | layer | Updated | +| ui-03 | layer-accent-01 | layer-accent | Split | +| ui-03 | border-subtle-01 | border-subtle | Split | +| ui-04 | toggle-off | — | Split | +| ui-04 | border-strong-01 | border-strong | Split | +| ui-05 | border-inverse | — | Updated | +| ui-05 | layer-selected-inverse | — | Updated | +| ui-background | background | — | Updated | +| visited-link | link-visited | — | Updated | +| brand-01 | — | — | Deprecated | +| brand-02 | — | — | Deprecated | +| brand-03 | — | — | Deprecated | +| — | border-strong-02 | border-strong | New | +| — | border-strong-03 | border-strong | New | +| — | border-subtle-00 | border-subtle | New | +| — | border-subtle-03 | border-subtle | New | +| — | border-subtle-selected-02 | border-subtle-selected | New | +| — | border-subtle-selected-03 | border-subtle-selected | New | +| — | field-03 | field | New | +| — | field-hover-03 | field-hover | New | +| — | layer-03 | layer | New | +| — | layer-active-03 | layer-active | New | +| — | layer-hover-03 | layer-hover | New | +| — | layer-selected-03 | layer-selected | New | +| — | layer-selected-hover-02 | layer-selected-hover | New | +| — | layer-selected-hover-03 | layer-selected-hover | New | +| — | layer-accent-02 | layer-accent | New | +| — | layer-accent-03 | layer-accent | New | +| — | layer-accent-active-02 | layer-accent-active | New | +| — | layer-accent-active-03 | layer-accent-active | New | +| — | layer-accent-hover-02 | layer-accent-hover | New | +| — | layer-accent-hover-03 | layer-accent-hover | New | + +### Compatability + +To make it easier to move between v10 and v11 of Carbon, we've introduced a +compatability theme that includes the tokens from v10 and v11 so that you can +incrementally update your project. + +You can use a "compatability theme" by setting the `$fallback` to a value from +`scss/compat/themes`. For example: -## @carbon/type +```scss +@use '@carbon/themes/scss/compat/themes' as compat; +@use '@carbon/themes/scss/themes'; +@use '@carbon/themes/scss/theme' with ( + $fallback: compat.$g100, + $theme: themes.$g100, +); +``` -| v10 | v11 | -| :------------------------------------ | :--------------------------------- | -| `@import '@carbon/type/scss/styles';` | `@use '@carbon/type';` | -| (alias) | `@use '@carbon/styles/scss/type';` | -| (alias) | `@use '@carbon/react/scss/type';` | +In this code snippet, we set the current theme to `$g100` and include the +compatability theme for `$g100` as the `$fallback. -**Changes** +## @carbon/type + +**Breaking changes** - This package now requires Dart Sass and uses Sass Modules +- The `scss` folder is no longer needed, you can import `@carbon/type` directly + in Sass - Variables, mixins, and functions with the `carbon--` prefix have been renamed -| Filename | v10 | v11 | -| ------------------------ | --------------------------------- | --------------------------------- | -| `index.scss` | | New | -| `scss/_scale.scss` | `@function carbon--get-type-size` | Removed, use `type-scale` instead | -| | `$carbon--type-scale` | `$type-scale` | -| | `@function carbon--type-scale` | `@function type-scale` | -| | `@mixin carbon--type-scale` | `@mixin type-scale` | -| | `@mixin carbon--font-size` | `@mixin font-size` | -| `scss/_font-family.scss` | `$carbon--font-families` | `$font-families` | -| | `@function carbon--font-family` | `font-family` | -| | `@mixin carbon--font-family` | `font-family` | -| | `$carbon--font-weights` | `$font-weights` | -| | `@function carbon--font-weight` | `font-weight` | -| | `@mixin carbon--font-weight` | `font-weight` | -| `scss/_prefix.scss` | | No Changes | -| `scss/_styles.scss` | `@mixin carbon--type-style` | `@mixin type-style` | -| `scss/_reset.scss` | `@mixin carbon--default-type` | `@mixin default-type` | -| | `@mixin carbon--type-reset` | `@mixin type-reset` | -| `scss/_classes.scss` | `@mixin carbon--type-classes` | `@mixin type-classes` | +**Imports** + +All imports in v11 have been replaced by `@carbon/type`. For example, if you +were importing `@carbon/type/scss/styles` in v10 you would now only import +`@carbon/type` and use exports from that module directly. + +| v10 | v11 | +| :------------------------------- | :--------------------------------- | +| `@import '@carbon/type/scss/*';` | `@use '@carbon/type';` | +| | `@use '@carbon/styles/scss/type';` | +| | `@use '@carbon/react/scss/type';` | + +**Sass API** + +| Filename | v10 | v11 | +| ------------------------------------- | ------------------------------------ | ------------------------------------ | +| `scss/index.scss` | | Removed, use `@carbon/type` directly | +| `scss/type.scss` | | Removed, use `@carbon/type` directly | +| `scss/_classes.scss` | `@mixin carbon--type-classes` | Renamed to `@mixin type-classes` | +| `scss/font-face/_mono.scss` | `@mixin carbon--font-face-mono` | TODO | +| `scss/font-face/_sans-condensed.scss` | `@mixin carbon--font-face-condensed` | TODO | +| `scss/font-face/_sans.scss` | `@mixin carbon--font-face-sans` | TODO | +| `scss/font-face/_serif.scss` | `@mixin carbon--font-face-serif` | TODO | +| `scss/font-face/_settings.scss` | `$carbon--font-display` | TODO | +| `scss/_font-family.scss` | `$carbon--font-families` | Renamed to `$font-families` | +| | `@function carbon--font-family` | Renamed to `@function font-family` | +| | `@mixin carbon--font-family` | Renamed to `@mixin font-family` | +| | `$carbon--font-weights` | Renamed to `$font-weights` | +| | `@function carbon--font-weight` | Renamed to `@function font-weight` | +| | `@mixin carbon--font-weight` | Renamed to `@mixin font-weight` | +| `scss/_prefix.scss` | | No Changes | +| `scss/_reset.scss` | `@mixin carbon--default-type` | Renamed to `@mixin default-type` | +| | `@mixin carbon--type-reset` | Renamed to `@mixin type-reset` | +| `scss/_scale.scss` | `@function carbon--get-type-size` | Removed, use `type-scale` instead | +| | `$carbon--type-scale` | Renamed to `$type-scale` | +| | `@function carbon--type-scale` | Renamed to `@function type-scale` | +| | `@mixin carbon--type-scale` | Renamed to `@mixin type-scale` | +| | `@mixin carbon--font-size` | Renamed to `@mixin font-size` | +| `scss/_styles.scss` | `@mixin carbon--type-style` | Renamed to `@mixin type-style` | +| `scss/_styles.scss` | `$caption-01` | Removed | +| | `$caption-02` | Removed | ## FAQ diff --git a/packages/colors/docs/sass.md b/packages/colors/docs/sass.md index 8e3f76190226..828b2aa8d5e3 100644 --- a/packages/colors/docs/sass.md +++ b/packages/colors/docs/sass.md @@ -32,11 +32,28 @@ the IBM Design Language using the `$colors` variable. } ``` -Each key in the `$colors` map is the name of a swatch. The value of each entry -is a `Map` where the keys are the grade and the values are the color values for -the swatch at that grade. +Each key in the `$colors` map is the name of a group of colors, also known as a +swatch. The value of each entry is a `Map` where the keys are the color grade +and the values are the hex codes for the color at that grade. For example: -## Exports +```scss +$colors: ( + blue: ( + 10: #edf5ff, + 20: #d0e2ff, + 30: #a6c8ff, + 40: #78a9ff, + 50: #4589ff, + 60: #0f62fe, + 70: #0043ce, + 80: #002d9c, + 90: #001d6c, + 100: #001141, + ), +); +``` + +## API | Name | Type | | :--------------------- | :---- | diff --git a/packages/elements/docs/sass.md b/packages/elements/docs/sass.md new file mode 100644 index 000000000000..ae6f4520d0ad --- /dev/null +++ b/packages/elements/docs/sass.md @@ -0,0 +1,30 @@ +# Sass + +> Sass documentation for `@carbon/elements` + +## Usage + +The `@carbon/elements` package re-exports from other packages that make up the +IBM Design Language. You can import and use this package by writing the +following: + +```scss +@use '@carbon/elements'; + +.selector { + background: elements.$blue-50; +} +``` + +For more information about what is re-exported, view the documentation for the +individual packages. Each public export from these packages will be available in +`@carbon/elements`. + +| Package | README | Sass | +| :--------------- | :----------------------------- | :-------------------------------- | +| `@carbon/colors` | [Link](../../colors/README.md) | [Link](../../colors/docs/sass.md) | +| `@carbon/grid` | [Link](../../grid/README.md) | [Link](../../grid/docs/sass.md) | +| `@carbon/layout` | [Link](../../layout/README.md) | [Link](../../layout/docs/sass.md) | +| `@carbon/motion` | [Link](../../motion/README.md) | [Link](../../motion/docs/sass.md) | +| `@carbon/themes` | [Link](../../themes/README.md) | [Link](../../themes/docs/sass.md) | +| `@carbon/type` | [Link](../../type/README.md) | [Link](../../type/docs/sass.md) | diff --git a/packages/elements/index.scss b/packages/elements/index.scss new file mode 100644 index 000000000000..38d56df07e63 --- /dev/null +++ b/packages/elements/index.scss @@ -0,0 +1,13 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward '@carbon/colors'; +@forward '@carbon/themes'; +@forward '@carbon/layout'; +@forward '@carbon/grid' hide $prefix; +@forward '@carbon/type' hide $prefix; +@forward '@carbon/motion'; diff --git a/packages/layout/docs/sass.md b/packages/layout/docs/sass.md new file mode 100644 index 000000000000..857c74698b24 --- /dev/null +++ b/packages/layout/docs/sass.md @@ -0,0 +1,58 @@ +# Sass + +> Sass documentation for `@carbon/layout` + +## Usage + +The `@carbon/layout` package provides spacing tokens and conversion utilities +for the Carbon Design System. You can access these tokens and helpers by writing +the following: + +```scss +@use '@carbon/layout'; + +.selector { + margin-bottom: layout.$spacing-05; + width: layout.rem(24px); + height: layout.rem(24px); +} +``` + +## API + +| Export | Description | !default | +| :------------------ | :---------- | :------- | +| `$spacing-01` | | ✅ | +| `$spacing-02` | | ✅ | +| `$spacing-03` | | ✅ | +| `$spacing-04` | | ✅ | +| `$spacing-05` | | ✅ | +| `$spacing-06` | | ✅ | +| `$spacing-07` | | ✅ | +| `$spacing-08` | | ✅ | +| `$spacing-09` | | ✅ | +| `$spacing-10` | | ✅ | +| `$spacing-11` | | ✅ | +| `$spacing-12` | | ✅ | +| `$spacing-13` | | ✅ | +| `$spacing ` | | | +| `$fluid-spacing-01` | | ✅ | +| `$fluid-spacing-02` | | ✅ | +| `$fluid-spacing-03` | | ✅ | +| `$fluid-spacing-04` | | ✅ | +| `$fluid-spacing ` | | | +| `@function em` | | | +| `@function rem` | | | +| `$base-font-size` | | ✅ | + +### Configuration + +You can configure parts of the `@carbon/layout` package that are `!default` with +Sass Modules. For example, you can change the `$base-font-size` by writing the +following: + +```scss +@use '@carbon/layout' with ( + $base-font-size: 18px +); +``` diff --git a/packages/layout/index.scss b/packages/layout/index.scss index aba783cac8b9..a0489f9f66c4 100644 --- a/packages/layout/index.scss +++ b/packages/layout/index.scss @@ -5,8 +5,5 @@ // LICENSE file in the root directory of this source tree. // -@forward 'scss/modules/breakpoint'; @forward 'scss/modules/convert'; @forward 'scss/modules/spacing'; -// TODO: should these be public? -@forward 'scss/modules/utilities'; diff --git a/packages/layout/scss/modules/_breakpoint.scss b/packages/layout/scss/modules/_breakpoint.scss deleted file mode 100644 index e10967e39c7d..000000000000 --- a/packages/layout/scss/modules/_breakpoint.scss +++ /dev/null @@ -1,232 +0,0 @@ -// -// Copyright IBM Corp. 2018, 2018 -// -// This source code is licensed under the Apache-2.0 license found in the -// LICENSE file in the root directory of this source tree. -// - -// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss -@use 'sass:list'; -@use 'sass:map'; -@use 'sass:meta'; -@use 'convert'; -@use 'utilities'; - -/// Carbon gutter size in rem -/// @type Number -/// @access public -/// @group @carbon/layout -$grid-gutter: convert.rem(32px); - -/// Carbon condensed gutter size in rem -/// @type Number -/// @access public -/// @group @carbon/layout -$grid-gutter--condensed: convert.rem(1px); - -// Initial map of our breakpoints and their values -/// @type Map -/// @access public -/// @group @carbon/layout -$grid-breakpoints: ( - sm: ( - columns: 4, - margin: 0, - width: convert.rem(320px), - ), - md: ( - columns: 8, - margin: convert.rem(16px), - width: convert.rem(672px), - ), - lg: ( - columns: 16, - margin: convert.rem(16px), - width: convert.rem(1056px), - ), - xlg: ( - columns: 16, - margin: convert.rem(16px), - width: convert.rem(1312px), - ), - max: ( - columns: 16, - margin: convert.rem(24px), - width: convert.rem(1584px), - ), -) !default; - -/// Get the value of the next breakpoint, or null for the last breakpoint -/// @param {String} $name - The name of the breakpoint -/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint -/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map -/// @return {String} -/// @access public -/// @group @carbon/layout -@function breakpoint-next( - $name, - $breakpoints: $grid-breakpoints, - $breakpoint-names: map.keys($breakpoints) -) { - $n: list.index($breakpoint-names, $name); - @if $n != null and $n < list.length($breakpoint-names) { - @return list.nth($breakpoint-names, $n + 1); - } - @return null; -} - -/// Get the value of the previous breakpoint, or null for the first breakpoint -/// @param {String} $name - The name of the breakpoint -/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint -/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map -/// @return {String} -/// @access public -/// @group @carbon/layout -@function breakpoint-prev( - $name, - $breakpoints: $grid-breakpoints, - $breakpoint-names: map.keys($breakpoints) -) { - $n: list.index($breakpoint-names, $name); - @if $n != null and $n > 1 { - @return list.nth($breakpoint-names, $n - 1); - } - @return null; -} - -/// Check to see if the given breakpoint name -/// @param {String} $name - The name of the breakpoint -/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint -/// @return {Bool} -/// @access public -/// @group @carbon/layout -@function is-smallest-breakpoint($name, $breakpoints: $grid-breakpoints) { - @return list.index(map.keys($breakpoints), $name) == 1; -} - -/// Returns the largest breakpoint name -/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name -/// @return {String} -/// @access public -/// @group @carbon/layout -@function largest-breakpoint-name($breakpoints: $grid-breakpoints) { - $total-breakpoints: list.length($breakpoints); - @return key-by-index($breakpoints, $total-breakpoints); -} - -/// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`. -/// @param {String} $name - The name of the breakpoint -/// @return {String} -/// @access public -/// @group @carbon/layout -@function breakpoint-infix($name) { - @return '-#{$name}'; -} - -/// Generate a media query from the width of the given breakpoint to infinity -/// @param {String | Number} $name -/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name -/// @content -/// @access public -/// @group @carbon/layout -@mixin breakpoint-up($name, $breakpoints: $grid-breakpoints) { - @if meta.type-of($name) == 'number' { - @media (min-width: $name) { - @content; - } - } @else if map.has-key($breakpoints, $name) { - $breakpoint: map.get($breakpoints, $name); - $width: map.get($breakpoint, width); - @if is-smallest-breakpoint($name, $breakpoints) { - @content; - } @else { - @media (min-width: $width) { - @content; - } - } - } @else { - @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})'; - } -} - -/// Generate a media query for the maximum width of the given styles -/// @param {String | Number} $name -/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name -/// @content -/// @access public -/// @group @carbon/layout -@mixin breakpoint-down($name, $breakpoints: $grid-breakpoints) { - @if meta.type-of($name) == 'number' { - @media (max-width: $name) { - @content; - } - } @else if map.has-key($breakpoints, $name) { - // We borrow this logic from bootstrap for specifying the value of the - // max-width. The maximum width is calculated by finding the breakpoint and - // subtracting .02 from its value. This value is used instead of .01 to - // avoid rounding issues in Safari - // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46 - $breakpoint: map.get($breakpoints, $name); - $width: map.get($breakpoint, width) - 0.02; - @media (max-width: $width) { - @content; - } - } @else { - @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})'; - } -} - -/// Generate a media query for the range between the lower and upper breakpoints -/// @param {String | Number} $lower -/// @param {String | Number} $upper -/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name -/// @content -/// @access public -/// @group @carbon/layout -@mixin breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { - $is-number-lower: meta.type-of($lower) == 'number'; - $is-number-upper: meta.type-of($upper) == 'number'; - $min: if($is-number-lower, $lower, map.get($breakpoints, $lower)); - $max: if($is-number-upper, $upper, map.get($breakpoints, $upper)); - - @if $min and $max { - $min-width: if(not $is-number-lower and $min, map.get($min, width), $min); - $max-width: if(not $is-number-upper and $max, map.get($max, width), $max); - @media (min-width: $min-width) and (max-width: $max-width) { - @content; - } - } @else if $min != null and $max == null { - @include breakpoint-up($lower) { - @content; - } - } @else if $min == null and $max != null { - @include breakpoint-down($upper) { - @content; - } - } @else { - @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map.keys($breakpoints)}).'; - } -} - -/// Generate media query for the largest breakpoint -/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name -/// @content -/// @access public -/// @group @carbon/layout -@mixin largest-breakpoint($breakpoints: $grid-breakpoints) { - @include breakpoint(largest-breakpoint-name()) { - @content; - } -} - -/// Generate a media query for a given breakpoint -/// @param {String | Number} $name -/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name -/// @content -/// @access public -/// @group @carbon/layout -@mixin breakpoint($name, $breakpoints: $grid-breakpoints) { - @include breakpoint-up($name, $breakpoints) { - @content; - } -} diff --git a/packages/motion/docs/sass.md b/packages/motion/docs/sass.md index 64f37f0f210a..faba7944f0d1 100644 --- a/packages/motion/docs/sass.md +++ b/packages/motion/docs/sass.md @@ -23,7 +23,7 @@ from the package by writing the following: } ``` -## Exports +## API | Name | Type | | :---------------------- | :------- | @@ -33,6 +33,6 @@ from the package by writing the following: | `$duration-moderate-02` | Duration | | `$duration-slow-01` | Duration | | `$duration-slow-02` | Duration | -| `$easings` | Duration | +| `$easings` | Map | | `@mixin motion` | Mixin | | `@function motion` | Mixin | diff --git a/packages/themes/docs/sass.md b/packages/themes/docs/sass.md index 55616e2ac421..cf168754a7a3 100644 --- a/packages/themes/docs/sass.md +++ b/packages/themes/docs/sass.md @@ -1,21 +1,11 @@ # `@carbon/themes` +> Sass documentation for `@carbon/themes` + _Note: this documentation is used with the next version of `@carbon/themes` which uses Sass Modules. It will not work in the current stable version of this package_ - - - -## Table of Contents - -- [Usage](#usage) -- [FAQ](#faq) - - [Why are the themes not exported in `@carbon/themes`?](#why-are-the-themes-not-exported-in-carbonthemes) - - - - ## Usage There are several entrypoints that you can use with `@carbon/themes`, including: @@ -74,9 +64,114 @@ You can also extend the theme with your own custom tokens: ); ``` -## Tokens - -TODO +## API + +| Import | Export | Description | !default | +| :--------------------------- | :--------------------------- | :------------------------------------------------------------------------------------ | :------- | +| `@carbon/themes/scss/themes` | | | | +| | `$white` | | ✅ | +| | `$g10` | | ✅ | +| | `$g90` | | ✅ | +| | `$g100` | | ✅ | +| `@carbon/themes` | | The default entrypoint which re-exports values from all other modules in this package | | +| | `$fallback` | | ✅ | +| | `$theme` | | ✅ | +| | `$background` | | ✅ | +| | `$background-active` | | ✅ | +| | `$background-selected` | | ✅ | +| | `$background-selected-hover` | | ✅ | +| | `$background-hover` | | ✅ | +| | `$background-brand` | | ✅ | +| | `$background-inverse` | | ✅ | +| | `$background-inverse-hover` | | ✅ | +| | `$layer-01` | | ✅ | +| | `$layer-active-01` | | ✅ | +| | `$layer-hover-01` | | ✅ | +| | `$layer-selected-01` | | ✅ | +| | `$layer-selected-hover-01` | | ✅ | +| | `$layer-02` | | ✅ | +| | `$layer-active-02` | | ✅ | +| | `$layer-hover-02` | | ✅ | +| | `$layer-selected-02` | | ✅ | +| | `$layer-selected-hover-02` | | ✅ | +| | `$layer-03` | | ✅ | +| | `$layer-active-03` | | ✅ | +| | `$layer-hover-03` | | ✅ | +| | `$layer-selected-03` | | ✅ | +| | `$layer-selected-hover-03` | | ✅ | +| | `$layer-selected-inverse` | | ✅ | +| | `$layer-selected-disabled` | | ✅ | +| | `$layer-accent-01` | | ✅ | +| | `$layer-accent-active-01` | | ✅ | +| | `$layer-accent-hover-01` | | ✅ | +| | `$layer-accent-02` | | ✅ | +| | `$layer-accent-active-02` | | ✅ | +| | `$layer-accent-hover-02` | | ✅ | +| | `$layer-accent-03` | | ✅ | +| | `$layer-accent-active-03` | | ✅ | +| | `$layer-accent-hover-03` | | ✅ | +| | `$field-01` | | ✅ | +| | `$field-hover-01` | | ✅ | +| | `$field-02` | | ✅ | +| | `$field-hover-02` | | ✅ | +| | `$field-03` | | ✅ | +| | `$field-hover-03` | | ✅ | +| | `$interactive` | | ✅ | +| | `$border-subtle-00` | | ✅ | +| | `$border-subtle-01` | | ✅ | +| | `$border-subtle-selected-01` | | ✅ | +| | `$border-subtle-02` | | ✅ | +| | `$border-subtle-selected-02` | | ✅ | +| | `$border-subtle-03` | | ✅ | +| | `$border-subtle-selected-03` | | ✅ | +| | `$border-strong-01` | | ✅ | +| | `$border-strong-02` | | ✅ | +| | `$border-strong-03` | | ✅ | +| | `$border-inverse` | | ✅ | +| | `$border-interactive` | | ✅ | +| | `$border-disabled` | | ✅ | +| | `$text-primary` | | ✅ | +| | `$text-secondary` | | ✅ | +| | `$text-placeholder` | | ✅ | +| | `$text-helper` | | ✅ | +| | `$text-error` | | ✅ | +| | `$text-inverse` | | ✅ | +| | `$text-on-color` | | ✅ | +| | `$text-on-color-disabled` | | ✅ | +| | `$text-disabled` | | ✅ | +| | `$link-primary` | | ✅ | +| | `$link-primary-hover` | | ✅ | +| | `$link-secondary` | | ✅ | +| | `$link-inverse` | | ✅ | +| | `$link-visited` | | ✅ | +| | `$icon-primary` | | ✅ | +| | `$icon-secondary` | | ✅ | +| | `$icon-inverse` | | ✅ | +| | `$icon-on-color` | | ✅ | +| | `$icon-on-color-disabled` | | ✅ | +| | `$icon-disabled` | | ✅ | +| | `$support-error` | | ✅ | +| | `$support-success` | | ✅ | +| | `$support-warning` | | ✅ | +| | `$support-info` | | ✅ | +| | `$support-error-inverse` | | ✅ | +| | `$support-success-inverse` | | ✅ | +| | `$support-warning-inverse` | | ✅ | +| | `$support-info-inverse` | | ✅ | +| | `$support-caution-major` | | ✅ | +| | `$support-caution-minor` | | ✅ | +| | `$support-caution-undefined` | | ✅ | +| | `$highlight` | | ✅ | +| | `$overlay` | | ✅ | +| | `$toggle-off` | | ✅ | +| | `$shadow` | | ✅ | +| | `$focus` | | ✅ | +| | `$focus-inset` | | ✅ | +| | `$focus-inverse` | | ✅ | +| | `$skeleton-background` | | ✅ | +| | `$skeleton-element` | | ✅ | + +### Configuration ## FAQ diff --git a/packages/type/docs/sass.md b/packages/type/docs/sass.md new file mode 100644 index 000000000000..e2a40f12a51b --- /dev/null +++ b/packages/type/docs/sass.md @@ -0,0 +1,123 @@ +# Sass + +> Sass documentation for `@carbon/type` + +## Usage + +The `@carbon/type` package enables you to use typography from the IBM Design +Language, including the type scale and fonts, along with typography design +tokens from the Carbon Design System. It also comes with opinionated defaults +for type styles on common elements like `h1`, `h2`, `p`, etc. + +You can use this package by writing the following: + +```scss +@use '@carbon/type'; + +// Include type reset +@include type.reset(); + +// Include default type styles, targets h1, h2, h3, etc +@include type.default-type(); + +// Include utility classes for type-related properties +@include type.type-classes(); + +.selector { + // Include a type style + @include type.style('productive-heading-01'); +} +``` + +### Type classes + +The `type-classes` mixin will output a collection of utility CSS that you can +use to style a given HTML element with type-related styles. + +In particular, you can use the following classes: + +| Class | Description | +| :------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `.cds--type-{font-family}` | Set the `font-family` property for the given font. This can include `mono`, `sans`, `sans-condensed`, `sans-arabic`, `sans-devanagari`, `sans-hebrew`, `sans-jp`, `sans-kr`, `sans-thai-looped`, `sans-thai`, `serif` | +| `.cds--type-{font-weight}` | Set the `font-weight` property | +| `.cds--type-italic` | Set the `font-style` property to `italic` | +| `.cds--type-{token}` | Style the HTML element with the given type token | + +## API + +| Export | Description | Link | !default | +| :------------------------- | :---------------------------------------------------------------- | :--- | :------- | +| `@mixin type-classes` | A mixin used to emit utility type classes in CSS | | | +| `@mixin reset` | A mixin used to emit base styles for the Carbon Design System | | | +| `@mixin default-type` | A mixin used to emit default styles for typographic HTML elements | | | +| `@mixin type-style` | A mixin used to emit all declarations for a type token | | | +| `$label-01` | | | ✅ | +| `$legal-02` | | | ✅ | +| `$helper-text-01` | | | ✅ | +| `$body-short-01` | | | ✅ | +| `$body-compact-01` | | | ✅ | +| `$body-long-01` | | | ✅ | +| `$body-01` | | | ✅ | +| `$body-short-02` | | | ✅ | +| `$body-compact-02` | | | ✅ | +| `$body-long-02` | | | ✅ | +| `$body-02` | | | ✅ | +| `$code-01` | | | ✅ | +| `$code-02` | | | ✅ | +| `$heading-01` | | | ✅ | +| `$productive-heading-01` | | | ✅ | +| `$heading-compact-01` | | | ✅ | +| `$heading-02` | | | ✅ | +| `$productive-heading-02` | | | ✅ | +| `$heading-compact-02` | | | ✅ | +| `$productive-heading-03` | | | ✅ | +| `$heading-03` | | | ✅ | +| `$productive-heading-04` | | | ✅ | +| `$heading-04` | | | ✅ | +| `$productive-heading-05` | | | ✅ | +| `$heading-05` | | | ✅ | +| `$productive-heading-06` | | | ✅ | +| `$heading-06` | | | ✅ | +| `$productive-heading-07` | | | ✅ | +| `$heading-07` | | | ✅ | +| `$expressive-heading-01` | | | ✅ | +| `$expressive-heading-02` | | | ✅ | +| `$expressive-heading-03` | | | ✅ | +| `$fluid-heading-03` | | | ✅ | +| `$expressive-heading-04` | | | ✅ | +| `$fluid-heading-04` | | | ✅ | +| `$expressive-heading-05` | | | ✅ | +| `$fluid-heading-05` | | | ✅ | +| `$expressive-heading-06` | | | ✅ | +| `$fluid-heading-06` | | | ✅ | +| `$expressive-paragraph-01` | | | ✅ | +| `$fluid-paragraph-01` | | | ✅ | +| `$quotation-01` | | | ✅ | +| `$fluid-quotation-01` | | | ✅ | +| `$quotation-02` | | | ✅ | +| `$fluid-quotation-02` | | | ✅ | +| `$display-01` | | | ✅ | +| `$fluid-display-01` | | | ✅ | +| `$display-02` | | | ✅ | +| `$fluid-display-02` | | | ✅ | +| `$display-03` | | | ✅ | +| `$fluid-display-03` | | | ✅ | +| `$display-04` | | | ✅ | +| `$fluid-display-04` | | | ✅ | + +### Configuration + +You can configure parts of the `@carbon/type` package with Sass Modules. For +example, you can change the `$prefix` used by writing the following: + +```scss +@use '@carbon/type' with ( + $prefix: 'custom-prefix', +); +``` + +For a full list of options that you can configure, check out the table below. + +| Option | Description | Default | +| :-------- | :---------------------------------------------------------------- | :------ | +| `$prefix` | The prefix that is used in selectors, CSS Custom Properties, etc. | `'cds'` | diff --git a/packages/type/package.json b/packages/type/package.json index 58767bd1f276..09968df28fc0 100644 --- a/packages/type/package.json +++ b/packages/type/package.json @@ -37,8 +37,8 @@ "clean": "rimraf css es lib umd scss/_inlined scss/vendor" }, "dependencies": { - "@carbon/import-once": "^10.6.0", - "@carbon/layout": "^10.36.0" + "@carbon/grid": "^10.41.0", + "@carbon/import-once": "^10.6.0" }, "devDependencies": { "@carbon/cli": "^10.33.0", diff --git a/packages/type/scss/modules/_styles.scss b/packages/type/scss/modules/_styles.scss index 874e6d61d612..b3ca5c41b248 100644 --- a/packages/type/scss/modules/_styles.scss +++ b/packages/type/scss/modules/_styles.scss @@ -9,7 +9,7 @@ @use 'sass:map'; @use 'sass:math'; -@use '@carbon/layout'; +@use '@carbon/grid/scss/modules/breakpoint' as grid; @use 'font-family'; @use 'scale'; @@ -716,7 +716,7 @@ $tokens: ( /// @param {Map} $breakpoints [$grid-breakpoints] - Custom breakpoints to use /// @access public /// @group @carbon/type -@mixin fluid-type($type-styles, $breakpoints: layout.$grid-breakpoints) { +@mixin fluid-type($type-styles, $breakpoints: grid.$grid-breakpoints) { // Include the initial styles for the given token by default without any // media query guard. This includes `font-size` as a fallback in the case // that a browser does not support `calc()` @@ -729,7 +729,7 @@ $tokens: ( // token and apply the properties and fluid type size for that given // breakpoint @each $name, $values in map.get($type-styles, breakpoints) { - @include layout.breakpoint($name) { + @include grid.breakpoint($name) { @include properties($values); @include fluid-type-size($type-styles, $name, $breakpoints); } @@ -745,7 +745,7 @@ $tokens: ( @mixin fluid-type-size( $type-styles, $name, - $breakpoints: layout.$grid-breakpoints + $breakpoints: grid.$grid-breakpoints ) { // Get the information about the breakpoint we're currently working in. Useful // for getting initial width information @@ -776,7 +776,7 @@ $tokens: ( // We can use `breakpoint-next` to see if there is another breakpoint we can // use to update `max-font-size` and `max-vw` with larger values - $next-breakpoint-available: layout.breakpoint-next($name, $breakpoints); + $next-breakpoint-available: grid.breakpoint-next($name, $breakpoints); $next-fluid-breakpoint-name: null; // We need to figure out what the next available fluid breakpoint is for our @@ -788,7 +788,7 @@ $tokens: ( $next-fluid-breakpoint-name: $next-breakpoint-available; $next-breakpoint-available: null; } @else { - $next-breakpoint-available: layout.breakpoint-next( + $next-breakpoint-available: grid.breakpoint-next( $next-breakpoint-available, $breakpoints ); @@ -846,11 +846,7 @@ $custom-property-prefix: 'cds' !default; /// @param {Map} $breakpoints [$grid-breakpoints] - Provide a custom breakpoint map to use /// @access public /// @group @carbon/type -@mixin type-style( - $name, - $fluid: false, - $breakpoints: layout.$grid-breakpoints -) { +@mixin type-style($name, $fluid: false, $breakpoints: grid.$grid-breakpoints) { @if not map.has-key($tokens, $name) { @error 'Unable to find a token with the name: `#{$name}`'; } diff --git a/yarn.lock b/yarn.lock index 0d1d3d3fafd2..0ac8928eb830 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2258,8 +2258,8 @@ __metadata: resolution: "@carbon/type@workspace:packages/type" dependencies: "@carbon/cli": ^10.33.0 + "@carbon/grid": ^10.41.0 "@carbon/import-once": ^10.6.0 - "@carbon/layout": ^10.36.0 "@carbon/test-utils": ^10.21.0 change-case: ^4.1.1 rimraf: ^3.0.0