diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 73baad0be762..bf693319a3b3 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -67,7 +67,7 @@ jobs: run: yarn build --ignore '@carbon/sketch' - name: Check generated styles run: | - yarn carbon-cli check --ignore '**/@(node_modules|examples|components|react|fixtures)/**' 'packages/**/*.scss' + yarn carbon-cli check --ignore '**/@(node_modules|examples|components|react|fixtures|compat)/**' 'packages/**/*.scss' - name: Run tests run: yarn test --ci diff --git a/.yarn/cache/@es-joy-jsdoccomment-npm-0.10.2-99ab396701-5790d13b74.zip b/.yarn/cache/@es-joy-jsdoccomment-npm-0.10.2-99ab396701-5790d13b74.zip new file mode 100644 index 000000000000..28c11adab769 Binary files /dev/null and b/.yarn/cache/@es-joy-jsdoccomment-npm-0.10.2-99ab396701-5790d13b74.zip differ diff --git a/.yarn/cache/@es-joy-jsdoccomment-npm-0.8.0-alpha.2-d987641165-cb6b06a836.zip b/.yarn/cache/@es-joy-jsdoccomment-npm-0.8.0-alpha.2-d987641165-cb6b06a836.zip deleted file mode 100644 index 90bbf7a7139f..000000000000 Binary files a/.yarn/cache/@es-joy-jsdoccomment-npm-0.8.0-alpha.2-d987641165-cb6b06a836.zip and /dev/null differ diff --git a/.yarn/cache/comment-parser-npm-1.1.5-8a063d6f6a-e669d6328a.zip b/.yarn/cache/comment-parser-npm-1.1.5-8a063d6f6a-e669d6328a.zip deleted file mode 100644 index 5c447a7f7c27..000000000000 Binary files a/.yarn/cache/comment-parser-npm-1.1.5-8a063d6f6a-e669d6328a.zip and /dev/null differ diff --git a/.yarn/cache/comment-parser-npm-1.2.1-2743575765-3057a7304c.zip b/.yarn/cache/comment-parser-npm-1.2.1-2743575765-3057a7304c.zip new file mode 100644 index 000000000000..3c7abf77ad16 Binary files /dev/null and b/.yarn/cache/comment-parser-npm-1.2.1-2743575765-3057a7304c.zip differ diff --git a/.yarn/cache/eslint-plugin-jsdoc-npm-35.3.0-5a1b07e5aa-09141f7407.zip b/.yarn/cache/eslint-plugin-jsdoc-npm-35.3.0-5a1b07e5aa-09141f7407.zip deleted file mode 100644 index 1c55e145ea2f..000000000000 Binary files a/.yarn/cache/eslint-plugin-jsdoc-npm-35.3.0-5a1b07e5aa-09141f7407.zip and /dev/null differ diff --git a/.yarn/cache/eslint-plugin-jsdoc-npm-36.0.3-6a37308396-f15e1d2e1e.zip b/.yarn/cache/eslint-plugin-jsdoc-npm-36.0.3-6a37308396-f15e1d2e1e.zip new file mode 100644 index 000000000000..c65d44f747a7 Binary files /dev/null and b/.yarn/cache/eslint-plugin-jsdoc-npm-36.0.3-6a37308396-f15e1d2e1e.zip differ diff --git a/.yarn/cache/jsdoc-type-pratt-parser-npm-1.0.0-alpha.23-54067d727f-a174d04aee.zip b/.yarn/cache/jsdoc-type-pratt-parser-npm-1.0.0-alpha.23-54067d727f-a174d04aee.zip deleted file mode 100644 index 41a48842e658..000000000000 Binary files a/.yarn/cache/jsdoc-type-pratt-parser-npm-1.0.0-alpha.23-54067d727f-a174d04aee.zip and /dev/null differ diff --git a/.yarn/cache/jsdoc-type-pratt-parser-npm-1.0.4-d9563f414a-f80df71fc5.zip b/.yarn/cache/jsdoc-type-pratt-parser-npm-1.0.4-d9563f414a-f80df71fc5.zip new file mode 100644 index 000000000000..73b8002c3ffc Binary files /dev/null and b/.yarn/cache/jsdoc-type-pratt-parser-npm-1.0.4-d9563f414a-f80df71fc5.zip differ diff --git a/config/eslint-config-carbon/package.json b/config/eslint-config-carbon/package.json index e4e234dd1b4f..8b07935969d9 100644 --- a/config/eslint-config-carbon/package.json +++ b/config/eslint-config-carbon/package.json @@ -39,7 +39,7 @@ "eslint-plugin-cypress": "^2.11.3", "eslint-plugin-import": "^2.23.4", "eslint-plugin-jest": "^24.3.6", - "eslint-plugin-jsdoc": "^35.3.0", + "eslint-plugin-jsdoc": "^36.0.3", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-prettier": "^3.4.0", "eslint-plugin-react": "^7.24.0", diff --git a/docs/migration/11.x-color.md b/docs/migration/11.x-color.md new file mode 100644 index 000000000000..39949f8bb075 --- /dev/null +++ b/docs/migration/11.x-color.md @@ -0,0 +1,135 @@ +## Color tokens + + + +**Note:** The Carbon v11 release is currently in beta release. Be on the lookout +for the public preview release available in the coming months. + + + +**Status key:** + +**New:** a net new color token to the system in v11. It has no v10 counterpart. + +**Updated name:** the v10 name has been updated to in v11 to replace the number +ending with a usage adjective. It just a name change the role stays the same +between v10 and v11. + +**Split:** V10 token has been split into multiple v11 tokens for more specific +usage. + +**No change:** token name has no change between versions. + +**Depreciated:** v10 token was removed in v11 + +| **V10 token name** | **V11 token name** | **Status** | +| ------------------ | ------------------------- | ------------------- | +| visited-link | link-visited | Updated name | +| ui-background | background | Updated name | +| ui-05 | layer-selected-inverse | Updated name | +| ui-05 | border-inverse | Updated name | +| ui-04 | border-strong-01 | Split, Updated name | +| ui-04 | toggle-off | Split, Updated name | +| ui-03 | layer-accent-01 | Split, Updated name | +| ui-03 | border-subtle-01 | Split, Updated name | +| ui-02 | layer-02 | Updated name | +| ui-01 | layer-01 | Updated name | +| text-error | text-error | Updated name | +| text-05 | text-helper | Updated name | +| text-04 | text-on-color | Updated name | +| text-03 | text-placeholder | Updated name | +| text-02 | text-secondary | Updated name | +| text-01 | text-primary | Updated name | +| support-04 | support-info | Updated name | +| support-03 | support-warning | Updated name | +| support-02 | support-success | Updated name | +| support-01 | support-error | Updated name | +| skeleton-02 | skeleton-element | Updated name | +| skeleton-01 | skeleton-background | Updated name | +| selected-ui | background-selected | Split, Updated name | +| selected-ui | layer-selected-01 | Split, Updated name | +| selected-light-ui | layer-selected-02 | Updated name | +| overlay-01 | overlay | Updated name | +| link-02 | link-secondary | Updated name | +| link-01 | link-primary | Updated name | +| inverse-support-04 | support-info-inverse | Updated name | +| inverse-support-03 | support-warning-inverse | Updated name | +| inverse-support-02 | support-success-inverse | Updated name | +| inverse-support-01 | support-error-inverse | Updated name | +| inverse-link | link-inverse | Updated name | +| inverse-hover-ui | background-inverse-hover | Updated name | +| inverse-focus-ui | focus-inverse | Updated name | +| inverse-02 | background-inverse | Updated name | +| inverse-01 | text-inverse | Split, Updated name | +| inverse-01 | icon-inverse | Split, Updated name | +| inverse-01 | focus-inset | Split, Updated name | +| interactive-04 | interactive | Updated name | +| interactive-04 | border-interactive | Updated name | +| interactive-03 | button-tertiary | Updated name | +| interactive-02 | button-secondary | Updated name | +| interactive-01 | background-brand | Updated name | +| interactive-01 | button-primary | Updated name | +| icon-03 | icon-on-color | Updated name | +| icon-02 | icon-secondary | Updated name | +| icon-01 | icon-primary | Updated name | +| hover-ui | background-hover | Updated name | +| hover-ui | layer-hover-01 | Split, Updated name | +| hover-ui | field-hover-01 | Split, Updated name | +| hover-ui | field-hover-02 | Split, Updated name | +| hover-tertiary | button-tertiary-hover | Updated name | +| hover-selected-ui | background-selected-hover | Split, Updated name | +| hover-selected-ui | layer-selected-hover-01 | Split, Updated name | +| hover-selected-ui | layer-accent-hover-01 | Split, Updated name | +| hover-secondary | button-secondary-hover | Updated name | +| hover-primary-text | link-primary-hover | Updated name | +| hover-primary | button-primary-hover | Updated name | +| hover-light-ui | layer-hover-02 | Updated name | +| hover-danger | button-danger-hover | Updated name | +| highlight | highlight | No change | +| focus | focus | No change | +| field-02 | field-02 | No change | +| field-01 | field-01 | No change | +| disabled-03 | layer-selected-disabled | Split, Updated name | +| disabled-03 | text-on-color-disabled | Split, Updated name | +| disabled-03 | icon-on-color-disabled | Split, Updated name | +| disabled-02 | text-disabled | Split, Updated name | +| disabled-02 | icon-disabled | Split, Updated name | +| disabled-02 | button-disabled | Split, Updated name | +| disabled-01 | layer-disabled-01 | Split | +| disabled-01 | field-disabled-01 | Split | +| disabled-01 | border-disabled-01 | Split | +| disabled-01 | field-disabled-02 | Split | +| disabled-01 | border-disabled-03 | Split | +| decorative-01 | border-subtle-02 | Updated name | +| danger-02 | button-danger-secondary | Updated name | +| danger / danger-01 | button-danger-primary | Updated name | +| button-separator | button-separator | No change | +| active-ui | background-active | Split, Updated name | +| active-ui | layer-active-01 | Split, Updated name | +| active-ui | layer-accent-active-01 | Split, Updated name | +| active-ui | border-subtle-selected-01 | Split, Updated name | +| active-tertiary | button-tertiary-active | Updated name | +| active-secondary | button-secondary-active | Updated name | +| active-primary | button-primary-active | Updated name | +| active-light-ui | layer-active-02 | Updated name | +| active-danger | button-danger-active | Updated name | +| - | border-subtle-00 | New | +| - | layer-selected-hover-02 | New | +| - | layer-accent-02 | New | +| - | layer-accent-hover-02 | New | +| - | layer-accent-active-02 | New | +| - | border-strong-02 | New | +| - | border-subtle-selected-02 | New | +| - | layer-03 | New | +| - | layer-hover-03 | New | +| - | layer-active-03 | New | +| - | layer-selected-03 | New | +| - | layer-selected-hover-03 | New | +| - | layer-accent-03 | New | +| - | layer-accent-hover-03 | New | +| - | layer-accent-active-03 | New | +| - | field-03 | New | +| - | field-hover-03 | New | +| - | border-strong-03 | New | +| - | border-subtle-03 | New | +| - | border-subtle-selected-03 | New | diff --git a/packages/carbon-react/.storybook/Welcome/welcome.scss b/packages/carbon-react/.storybook/Welcome/welcome.scss index be2c6d62d9b3..8ae24175c9d9 100644 --- a/packages/carbon-react/.storybook/Welcome/welcome.scss +++ b/packages/carbon-react/.storybook/Welcome/welcome.scss @@ -1,5 +1,4 @@ -// @import '~carbon-components/scss/globals/scss/typography'; -@use '@carbon/styles/scss/theme' as *; +@use '@carbon/styles/scss/theme'; @use '@carbon/styles/scss/type'; .container-welcome { @@ -19,7 +18,7 @@ .welcome__heading { @include type.type-style('productive-heading-07'); - color: $text-inverse; + color: theme.$text-inverse; } .welcome__heading--subtitle { diff --git a/packages/carbon-react/src/components/ProgressBar/ProgressBar.stories.js b/packages/carbon-react/src/components/ProgressBar/ProgressBar.stories.js new file mode 100644 index 000000000000..2afc1805db69 --- /dev/null +++ b/packages/carbon-react/src/components/ProgressBar/ProgressBar.stories.js @@ -0,0 +1,69 @@ +/** + * Copyright IBM Corp. 2021 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React, { useState, useEffect } from 'react'; + +import { unstable_ProgressBar as ProgressBar } from 'carbon-components-react'; + +export default { + title: 'Experimental/unstable_ProgressBar', + + parameters: { + component: ProgressBar, + }, +}; + +export const _ProgressBar = () => ( + +); + +export const Indeterminate = () => ( + +); + +export const Example = () => { + const size = 728; + const [progress, setProgress] = useState(0); + + useEffect(() => { + setTimeout(() => { + const interval = setInterval(() => { + setProgress((currentProgress) => { + const advancement = Math.random() * 8; + if (currentProgress + advancement < size) { + return currentProgress + advancement; + } else { + clearInterval(interval); + return size; + } + }); + }, 50); + }, 3000); + }, []); + + const running = progress > 0; + + let helperText = running + ? `${progress.toFixed(1)}MB of ${size}MB` + : 'Fetching assets...'; + if (progress >= size) { + helperText = 'Done'; + } + + return ( + + ); +}; diff --git a/packages/carbon-react/src/components/ProgressBar/index.js b/packages/carbon-react/src/components/ProgressBar/index.js new file mode 100644 index 000000000000..9d7069e6c540 --- /dev/null +++ b/packages/carbon-react/src/components/ProgressBar/index.js @@ -0,0 +1,8 @@ +/** + * Copyright IBM Corp. 2016, 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. + */ + +export { ProgressBar } from 'carbon-components-react'; diff --git a/packages/cli/src/commands/ci-check.js b/packages/cli/src/commands/ci-check.js index fb4ba5ba12ed..465f551fa1da 100644 --- a/packages/cli/src/commands/ci-check.js +++ b/packages/cli/src/commands/ci-check.js @@ -21,7 +21,7 @@ async function check(args, env) { stdio: 'inherit', }; const tasks = [ - `yarn carbon-cli check --ignore '**/@(node_modules|examples|components|react|fixtures)/**' 'packages/**/*.scss'`, + `yarn carbon-cli check --ignore '**/@(node_modules|examples|components|react|fixtures|compat)/**' 'packages/**/*.scss'`, `cross-env BABEL_ENV=test yarn test --ci --maxWorkers 2 --reporters=default --reporters=jest-junit`, `cross-env BABEL_ENV=test yarn test:e2e --ci --maxWorkers 2 --reporters=default --reporters=jest-junit`, `cross-env PERCY_TOKEN=dd3392142006a6483c8f524697f39f052755fa9dc087ff4437cac3d64227abdd yarn run percy exec -- yarn workspace carbon-components-react test:e2e`, diff --git a/packages/components/src/components/data-table/_data-table-core.scss b/packages/components/src/components/data-table/_data-table-core.scss index b88c6507a9b6..600480642cbf 100644 --- a/packages/components/src/components/data-table/_data-table-core.scss +++ b/packages/components/src/components/data-table/_data-table-core.scss @@ -968,7 +968,8 @@ // ------------------- // with boolean column // ------------------- - .#{$prefix}--data-table .bx--form-item.bx--checkbox-wrapper:last-of-type { + .#{$prefix}--data-table + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type { margin: 0; } diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss index 64f58ceb9e7b..87d089e135fb 100644 --- a/packages/components/src/components/list-box/_list-box.scss +++ b/packages/components/src/components/list-box/_list-box.scss @@ -277,7 +277,7 @@ $list-box-menu-width: rem(300px); max-width: rem(480px); } - .#{$prefix}--dropdown--inline .bx--list-box__menu { + .#{$prefix}--dropdown--inline .#{$prefix}--list-box__menu { min-width: rem(288px); max-width: rem(480px); } diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss index 76c27b111e2d..98283795a1bd 100644 --- a/packages/components/src/components/modal/_modal.scss +++ b/packages/components/src/components/modal/_modal.scss @@ -55,7 +55,8 @@ .#{$prefix}--dropdown, .#{$prefix}--dropdown-list, .#{$prefix}--number input[type='number'], - .#{$prefix}--date-picker__input { + .#{$prefix}--date-picker__input, + .#{$prefix}--multi-select { background-color: $field-02; } } diff --git a/packages/components/src/components/number-input/_number-input.scss b/packages/components/src/components/number-input/_number-input.scss index cff9526be301..a6799ec2c67e 100644 --- a/packages/components/src/components/number-input/_number-input.scss +++ b/packages/components/src/components/number-input/_number-input.scss @@ -421,7 +421,9 @@ } //No label positioning adjustment - .#{$prefix}--number--nolabel .bx--label + .bx--form__helper-text { + .#{$prefix}--number--nolabel + .#{$prefix}--label + + .#{$prefix}--form__helper-text { margin-top: 0; } diff --git a/packages/components/src/components/progress-indicator/_progress-indicator.scss b/packages/components/src/components/progress-indicator/_progress-indicator.scss index 0dbf13cab671..45984be0a9bc 100644 --- a/packages/components/src/components/progress-indicator/_progress-indicator.scss +++ b/packages/components/src/components/progress-indicator/_progress-indicator.scss @@ -293,7 +293,9 @@ white-space: initial; } - .#{$prefix}--progress--vertical .#{$prefix}--progress-step .bx--tooltip { + .#{$prefix}--progress--vertical + .#{$prefix}--progress-step + .#{$prefix}--tooltip { margin-top: 0.5rem; } diff --git a/packages/components/src/components/select/_select.scss b/packages/components/src/components/select/_select.scss index 5f1c2e7a3fc9..d0d0c022f79a 100644 --- a/packages/components/src/components/select/_select.scss +++ b/packages/components/src/components/select/_select.scss @@ -211,7 +211,7 @@ padding-right: $spacing-07; padding-left: $carbon--spacing-03; border-bottom: none; - background-color: $ui-background; + background-color: transparent; color: $text-01; } diff --git a/packages/components/src/components/ui-shell/_side-nav.scss b/packages/components/src/components/ui-shell/_side-nav.scss index 22dee6e95ffa..5a35ebd382fa 100644 --- a/packages/components/src/components/ui-shell/_side-nav.scss +++ b/packages/components/src/components/ui-shell/_side-nav.scss @@ -110,7 +110,7 @@ width: 0; } - .#{$prefix}--side-nav.bx--side-nav--rail:not(.#{$prefix}--side-nav--fixed):hover, + .#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(.#{$prefix}--side-nav--fixed):hover, .#{$prefix}--side-nav--expanded { width: mini-units(32); } diff --git a/packages/react/src/components/Modal/Modal-story.js b/packages/react/src/components/Modal/Modal-story.js index 69cc41674d31..61351855588c 100644 --- a/packages/react/src/components/Modal/Modal-story.js +++ b/packages/react/src/components/Modal/Modal-story.js @@ -19,6 +19,8 @@ import { import Modal from '../Modal'; import Button from '../Button'; import Select from '../Select'; +import MultiSelect from '../MultiSelect'; +import Dropdown from '../Dropdown'; import SelectItem from '../SelectItem'; import TextInput from '../TextInput'; import mdx from './Modal.mdx'; @@ -161,6 +163,30 @@ export const Default = () => { + + (item ? item.text : '')} + /> ); }; diff --git a/packages/react/src/components/Modal/Modal.mdx b/packages/react/src/components/Modal/Modal.mdx index 4b41dcfd1014..99b0b9afcc70 100644 --- a/packages/react/src/components/Modal/Modal.mdx +++ b/packages/react/src/components/Modal/Modal.mdx @@ -214,17 +214,17 @@ With ``, you can control the buttons with the following code. kind="secondary" onClick={() => { (Run some action...) setOpen(false); }}> Another button - + ``` diff --git a/packages/styles/__tests__/compat-test.js b/packages/styles/__tests__/compat-test.js new file mode 100644 index 000000000000..b13b4d8c6642 --- /dev/null +++ b/packages/styles/__tests__/compat-test.js @@ -0,0 +1,67 @@ +/** + * 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. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('@carbon/styles/scss/compat', () => { + it('should export white, g10, g90, and g100 themes', async () => { + const { unwrap } = await render(` + @use 'sass:map'; + @use 'sass:meta'; + @use '../scss/compat/themes'; + + $_: get('variables', map.keys(meta.module-variables('themes'))); + `); + const themes = unwrap('variables').sort(); + expect(themes).toEqual(['white', 'g10', 'g90', 'g100'].sort()); + }); + + it('should export v10 tokens as Sass Variables', async () => { + const { unwrap } = await render(` + @use '../scss/config' with ( $prefix: 'cds' ); + @use '../scss/compat/themes'; + @use '../scss/compat/theme' with ( + $theme: themes.$white, + ); + + $_: get('theme', themes.$white); + $_: get('variable', theme.$interactive-01); + `); + const theme = unwrap('theme'); + const variable = unwrap('variable'); + + expect(variable).toEqual( + `var(--cds-interactive-01, ${theme['interactive-01']})` + ); + }); + + it('should export v11 tokens that match the fallback theme', async () => { + const { unwrap } = await render(` + @use '../scss/config' with ( $prefix: 'cds' ); + @use '../scss/themes'; + @use '../scss/compat/themes' as compat; + @use '../scss/compat/theme' with ( + $fallback: themes.$g100, + $theme: compat.$g100, + ); + + $_: get('theme', themes.$g100); + $_: get('variable', theme.$background); + `); + + const theme = unwrap('theme'); + const variable = unwrap('variable'); + + expect(variable).toEqual(`var(--cds-background, ${theme['background']})`); + }); +}); diff --git a/packages/styles/docs/sass.md b/packages/styles/docs/sass.md index 6e47147700bf..d9163303eec8 100644 --- a/packages/styles/docs/sass.md +++ b/packages/styles/docs/sass.md @@ -48,6 +48,7 @@ between version updates. | :------------------------------------- | :--------------------------------------------------------- | | [`scss/breakpoint`](#breakpoint) | Helper functions and mixins for working with breakpoints | | [`scss/colors`](#colors) | Access colors from every swatch in the IBM Design Language | +| [`scss/compat/`](#compatibility) | Helper themes and tokens for migrating from v10 to v11 | | [`scss/config`](#config) | Configure various options for the package | | [`scss/feature-flags`](#feature-flags) | Configure various feature flags for experiments | | [`scss/grid`](#grid) | Access and use the CSS Grid built-in to Carbon | @@ -331,6 +332,48 @@ like to see changed. For example, if you wanted to change the component token | :---------------------------------------------------- | :---------- | | `@use '@carbon/styles/scss/utilities/focus-outline';` | | +## Compatibility + +| Import | Filepath | +| :------------------------------------------ | :------------------------- | +| `@use '@carbon/styles/scss/compat/themes';` | `scss/compat/_themes.scss` | +| `@use '@carbon/styles/scss/compat/theme';` | `scss/compat/_theme.scss` | + +The compatibility entrypoints for themes and theme provide access to the v10 +tokens along with the v11 tokens. To make sure that the tokens that you're using +from v10 have the correct value in v11, you will need to include the theme that +you're using from `scss/compat/themes` and set that as your theme. + +```scss +@use '@carbon/styles/scss/compat/themes' as compat; +@use '@carbon/styles/scss/themes'; +@use '@carbon/styles/scss/compat/theme' with ( + $fallback: themes.$g100, + $theme: compat.$g100, +); +``` + +It's important that you specify the `$fallback` theme as a value from the +`scss/themes` entrypoint. This will guarantee that all tokens that you are using +from v11 will match the theme of the tokens that you are using from v10. + +You can directly reference a token from the `scss/compat/theme` entrypoint. This +entrypoint will also re-export all available v11 tokens and mixins from +`scss/theme`. + +```scss +@use '@carbon/styles/scss/compat/theme'; + +body { + // You can use both v10 and v11 tokens + background: theme.$background; + color: theme.$text-01; +} +``` + +_Note: all tokens from v10 are deprecated in v11. They will be removed in the +next major release of Carbon_ + ## Configuration You will need to configure Sass to be able to lookup packages from your diff --git a/packages/styles/scss/__tests__/theme-test.js b/packages/styles/scss/__tests__/theme-test.js index 04ff17dfef6d..244b21093666 100644 --- a/packages/styles/scss/__tests__/theme-test.js +++ b/packages/styles/scss/__tests__/theme-test.js @@ -36,7 +36,6 @@ describe('@carbon/styles/scss/theme', () => { Array [ "fallback", "theme", - "use-fallback-value", "background", "background-active", "background-selected", @@ -145,28 +144,6 @@ Array [ "border-subtle", "border-subtle-selected", "border-strong", - "interactive-01", - "interactive-04", - "decorative-01", - "hover-row", - "ui-01", - "ui-02", - "ui-05", - "disabled-01", - "disabled-02", - "hover-field", - "hover-ui", - "selected-ui", - "hover-selected-ui", - "hover-light-ui", - "active-light-ui", - "text-01", - "text-02", - "text-04", - "text-05", - "icon-01", - "icon-02", - "link-01", ] `); }); diff --git a/packages/styles/scss/_theme.scss b/packages/styles/scss/_theme.scss index 83537cd12da8..00df15b4efd3 100644 --- a/packages/styles/scss/_theme.scss +++ b/packages/styles/scss/_theme.scss @@ -9,9 +9,15 @@ @use '@carbon/themes/scss/modules/config' with ( $prefix: $prefix, ); -@use '@carbon/themes/scss/modules/tokens'; -@forward '@carbon/themes/scss/modules/theme'; +@use './compat/themes' as compat; +@use './themes'; + +@forward '@carbon/themes/scss/modules/theme' with ( + $fallback: themes.$white !default, + $theme: compat.$white !default, +); @forward '@carbon/themes/scss/modules/tokens'; +@use '@carbon/themes/scss/modules/tokens'; @use './utilities/custom-property'; @use './utilities/layer-set' with ( $layer-sets: ( @@ -99,27 +105,3 @@ $field-hover: custom-property.get-var('field-hover'); $border-subtle: custom-property.get-var('border-subtle'); $border-subtle-selected: custom-property.get-var('border-subtle-selected'); $border-strong: custom-property.get-var('border-strong'); - -// TODO remove -$interactive-01: #0f62fe; -$interactive-04: #0f62fe; -$decorative-01: #e0e0e0; -$hover-row: #636363; -$ui-01: #f4f4f4; -$ui-02: #ffffff; -$ui-05: #161616; -$disabled-01: #f4f4f4; -$disabled-02: #c6c6c6; -$hover-field: #e5e5e5; -$hover-ui: #e5e5e5; -$selected-ui: #e0e0e0; -$hover-selected-ui: #cacaca; -$hover-light-ui: #e5e5e5; -$active-light-ui: #c6c6c6; -$text-01: #161616; -$text-02: #525252; -$text-04: #ffffff; -$text-05: #6f6f6f; -$icon-01: #f4f4f4; -$icon-02: #525252; -$link-01: #0f62fe; diff --git a/packages/styles/scss/compat/_theme.scss b/packages/styles/scss/compat/_theme.scss new file mode 100644 index 000000000000..e8304438c5f5 --- /dev/null +++ b/packages/styles/scss/compat/_theme.scss @@ -0,0 +1,9 @@ +// +// 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 '../theme'; +@forward '@carbon/themes/scss/compat/tokens'; diff --git a/packages/styles/scss/compat/_themes.scss b/packages/styles/scss/compat/_themes.scss new file mode 100644 index 000000000000..49eeadca08f6 --- /dev/null +++ b/packages/styles/scss/compat/_themes.scss @@ -0,0 +1,8 @@ +// +// 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/themes/scss/compat/themes' show $white, $g10, $g90, $g100; diff --git a/packages/styles/scss/components/__tests__/progress-bar-test.js b/packages/styles/scss/components/__tests__/progress-bar-test.js new file mode 100644 index 000000000000..1e7b87fd852d --- /dev/null +++ b/packages/styles/scss/components/__tests__/progress-bar-test.js @@ -0,0 +1,26 @@ +/** + * 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. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/progress-bar', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../progress-bar'; + + $_: get('mixin', meta.mixin-exists('progress-bar', 'progress-bar')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/styles/scss/components/_index.scss b/packages/styles/scss/components/_index.scss index 35a6c7e67454..8740370dbd0c 100644 --- a/packages/styles/scss/components/_index.scss +++ b/packages/styles/scss/components/_index.scss @@ -42,6 +42,7 @@ @use 'pagination'; @use 'pagination-nav'; @use 'select'; +@use 'progress-bar'; @use 'progress-indicator'; @use 'tabs'; @use 'ui-shell'; diff --git a/packages/styles/scss/components/code-snippet/_code-snippet.scss b/packages/styles/scss/components/code-snippet/_code-snippet.scss index 5c7c849c4762..532c28d2fb1f 100644 --- a/packages/styles/scss/components/code-snippet/_code-snippet.scss +++ b/packages/styles/scss/components/code-snippet/_code-snippet.scss @@ -5,13 +5,12 @@ // LICENSE file in the root directory of this source tree. // -@use 'mixins' as *; -@use '../copy-button'; @use '../../config' as *; @use '../../motion' as *; @use '../../spacing' as *; -@use '../../theme' as *; +@use '../../compat/theme' as *; @use '../../type' as *; +@use '../copy-button'; @use '../../utilities/convert' as *; @use '../../utilities/focus-outline' as *; @use '../../utilities/high-contrast-mode' as *; @@ -19,6 +18,7 @@ @use '../../utilities/skeleton' as *; @use '../../utilities/tooltip' as *; @use '../../utilities/z-index' as *; +@use 'mixins' as *; /// @type Color /// @access public diff --git a/packages/styles/scss/components/data-table/_data-table.scss b/packages/styles/scss/components/data-table/_data-table.scss index 0820f9d42010..51788c49af54 100644 --- a/packages/styles/scss/components/data-table/_data-table.scss +++ b/packages/styles/scss/components/data-table/_data-table.scss @@ -969,7 +969,8 @@ // ------------------- // with boolean column // ------------------- - .#{$prefix}--data-table .bx--form-item.bx--checkbox-wrapper:last-of-type { + .#{$prefix}--data-table + .#{$prefix}--form-item.#{$prefix}--checkbox-wrapper:last-of-type { margin: 0; } diff --git a/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss b/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss index a8e24e51b32d..94da558cbeda 100644 --- a/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss +++ b/packages/styles/scss/components/data-table/expandable/_data-table-expandable.scss @@ -8,7 +8,7 @@ @use '../../../config' as *; @use '../../../motion' as *; @use '../../../spacing' as *; -@use '../../../theme' as *; +@use '../../../compat/theme' as *; @use '../../../utilities/button-reset'; @use '../../../utilities/convert' as *; @use '../../../utilities/focus-outline' as *; diff --git a/packages/styles/scss/components/date-picker/_date-picker.scss b/packages/styles/scss/components/date-picker/_date-picker.scss index 98eda3df8e6e..69e77bd38473 100644 --- a/packages/styles/scss/components/date-picker/_date-picker.scss +++ b/packages/styles/scss/components/date-picker/_date-picker.scss @@ -8,7 +8,7 @@ @use '../../colors' as *; @use '../../config' as *; @use '../../motion' as *; -@use '../../theme' as *; +@use '../../compat/theme' as *; @use '../../spacing' as *; @use '../../type' as *; @use '../form/form'; diff --git a/packages/styles/scss/components/date-picker/_flatpickr.scss b/packages/styles/scss/components/date-picker/_flatpickr.scss index aaa3b250771a..762db5edb616 100644 --- a/packages/styles/scss/components/date-picker/_flatpickr.scss +++ b/packages/styles/scss/components/date-picker/_flatpickr.scss @@ -7,7 +7,7 @@ // @use '../../config' as *; @use '../../motion' as *; -@use '../../theme' as *; +@use '../../compat/theme' as *; @use '../../spacing' as *; @use '../../type' as *; @use '../../utilities/box-shadow' as *; diff --git a/packages/styles/scss/components/dropdown/_dropdown.scss b/packages/styles/scss/components/dropdown/_dropdown.scss index 199665231dee..4cf3750c0338 100644 --- a/packages/styles/scss/components/dropdown/_dropdown.scss +++ b/packages/styles/scss/components/dropdown/_dropdown.scss @@ -9,7 +9,7 @@ @use '../../config' as *; @use '../../motion' as *; @use '../../spacing' as *; -@use '../../theme' as *; +@use '../../compat/theme' as *; @use '../../type' as *; @use '../../utilities/box-shadow' as *; @use '../../utilities/convert' as *; diff --git a/packages/styles/scss/components/list-box/_list-box.scss b/packages/styles/scss/components/list-box/_list-box.scss index 5d5c138218b8..797fa331cdec 100644 --- a/packages/styles/scss/components/list-box/_list-box.scss +++ b/packages/styles/scss/components/list-box/_list-box.scss @@ -11,7 +11,7 @@ @use '../tag/mixins' as *; @use '../../config' as *; @use '../../colors' as *; -@use '../../theme' as *; +@use '../../compat/theme' as *; @use '../../type' as *; @use '../../spacing' as *; @use '../../motion' as *; @@ -284,7 +284,7 @@ $list-box-menu-width: rem(300px); max-width: rem(480px); } - .#{$prefix}--dropdown--inline .bx--list-box__menu { + .#{$prefix}--dropdown--inline .#{$prefix}--list-box__menu { min-width: rem(288px); max-width: rem(480px); } diff --git a/packages/styles/scss/components/number-input/_number-input.scss b/packages/styles/scss/components/number-input/_number-input.scss index 5b9d2104cf99..ebef6a8d2736 100644 --- a/packages/styles/scss/components/number-input/_number-input.scss +++ b/packages/styles/scss/components/number-input/_number-input.scss @@ -9,7 +9,7 @@ @use '../../config' as *; @use '../../motion' as *; @use '../../spacing' as *; -@use '../../theme' as *; +@use '../../compat/theme' as *; @use '../../type' as *; @use '../../utilities/skeleton' as *; @use '../../utilities/button-reset'; @@ -437,7 +437,9 @@ } //No label positioning adjustment - .#{$prefix}--number--nolabel .bx--label + .bx--form__helper-text { + .#{$prefix}--number--nolabel + .#{$prefix}--label + + .#{$prefix}--form__helper-text { margin-top: 0; } diff --git a/packages/styles/scss/components/overflow-menu/_overflow-menu.scss b/packages/styles/scss/components/overflow-menu/_overflow-menu.scss index e9bb40f2f05b..f218a92b9029 100644 --- a/packages/styles/scss/components/overflow-menu/_overflow-menu.scss +++ b/packages/styles/scss/components/overflow-menu/_overflow-menu.scss @@ -8,7 +8,7 @@ @use '../../config' as *; @use '../../motion' as *; @use '../../spacing' as *; -@use '../../theme' as *; +@use '../../compat/theme' as *; @use '../../type' as *; @use '../button/tokens' as button; @use '../../utilities/box-shadow' as *; diff --git a/packages/styles/scss/components/progress-bar/_index.scss b/packages/styles/scss/components/progress-bar/_index.scss new file mode 100644 index 000000000000..e3521031b965 --- /dev/null +++ b/packages/styles/scss/components/progress-bar/_index.scss @@ -0,0 +1,11 @@ +// +// 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 'progress-bar'; +@use 'progress-bar'; + +@include progress-bar.progress-bar; diff --git a/packages/styles/scss/components/progress-bar/_progress-bar.scss b/packages/styles/scss/components/progress-bar/_progress-bar.scss new file mode 100644 index 000000000000..2e11cdbd5e28 --- /dev/null +++ b/packages/styles/scss/components/progress-bar/_progress-bar.scss @@ -0,0 +1,82 @@ +// +// Copyright IBM Corp. 2021 +// +// 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 '../../config' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../type' as *; +@use '../../utilities/convert' as *; + +/// Progress Bar styles +/// @access public +/// @group progress-bar +@mixin progress-bar { + .#{$prefix}--progress-bar__label { + @include type-style('body-short-01'); + + display: block; + margin-bottom: $spacing-03; + color: $text-primary; + } + + .#{$prefix}--progress-bar__track { + position: relative; + width: 100%; + height: rem(8px); + background-color: $layer; + } + + .#{$prefix}--progress-bar__bar { + display: block; + width: 100%; + height: 100%; + background-color: $interactive; + transform: scaleX(0); + transform-origin: 0 50%; + transition: transform $duration-fast-02 motion(standard, productive); + } + + .#{$prefix}--progress-bar--indeterminate + .#{$prefix}--progress-bar__track::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + animation-duration: 1400ms; + animation-iteration-count: infinite; + animation-name: progress-bar-indeterminate; + animation-timing-function: linear; + background-image: linear-gradient( + 90deg, + $interactive 12.5%, + transparent 12.5% + ); + background-position-x: 0%; + background-size: 200% 100%; + content: ''; + } + + .#{$prefix}--progress-bar__helper-text { + @include type-style('helper-text-01'); + + margin-top: $spacing-02; + color: $text-secondary; + } + + @keyframes progress-bar-indeterminate { + 0% { + background-position-x: 25%; + } + + 80%, + 100% { + background-position-x: -105%; + } + } +} diff --git a/packages/styles/scss/components/progress-indicator/_progress-indicator.scss b/packages/styles/scss/components/progress-indicator/_progress-indicator.scss index 146a2f2cd48b..0c406b22f91e 100644 --- a/packages/styles/scss/components/progress-indicator/_progress-indicator.scss +++ b/packages/styles/scss/components/progress-indicator/_progress-indicator.scss @@ -305,7 +305,9 @@ $progress-indicator-bar-width: 1px inset transparent !default; white-space: initial; } - .#{$prefix}--progress--vertical .#{$prefix}--progress-step .bx--tooltip { + .#{$prefix}--progress--vertical + .#{$prefix}--progress-step + .#{$prefix}--tooltip { margin-top: 0.5rem; } diff --git a/packages/styles/scss/components/radio-button/_radio-button.scss b/packages/styles/scss/components/radio-button/_radio-button.scss index 5182108af1e1..337b36b19213 100644 --- a/packages/styles/scss/components/radio-button/_radio-button.scss +++ b/packages/styles/scss/components/radio-button/_radio-button.scss @@ -9,7 +9,7 @@ // Radio //----------------------------- -@use '../../theme' as *; +@use '../../compat/theme' as *; @use '../../type'; @use '../form'; @use '../../utilities/focus-outline' as *; diff --git a/packages/styles/scss/components/search/_search.scss b/packages/styles/scss/components/search/_search.scss index 90c7669ab860..551ebbc9bc96 100644 --- a/packages/styles/scss/components/search/_search.scss +++ b/packages/styles/scss/components/search/_search.scss @@ -9,7 +9,7 @@ // Search //----------------------------- -@use '../../theme' as *; +@use '../../compat/theme' as *; @use '../../config' as *; @use '../../type'; @use '../../motion' as *; diff --git a/packages/styles/scss/components/structured-list/_structured-list.scss b/packages/styles/scss/components/structured-list/_structured-list.scss index da276b6a2a52..08a64f15cc9d 100644 --- a/packages/styles/scss/components/structured-list/_structured-list.scss +++ b/packages/styles/scss/components/structured-list/_structured-list.scss @@ -9,7 +9,7 @@ @use '../../feature-flags' as *; @use "../../type" as *; @use '../../motion'; -@use '../../theme' as *; +@use '../../compat/theme' as *; @use "../../utilities/focus-outline" as *; @use "../../utilities/skeleton" as *; @use "../../utilities/high-contrast-mode" as *; diff --git a/packages/styles/scss/components/tile/_tile.scss b/packages/styles/scss/components/tile/_tile.scss index 887487fee6f1..4f716bc06f9a 100644 --- a/packages/styles/scss/components/tile/_tile.scss +++ b/packages/styles/scss/components/tile/_tile.scss @@ -8,7 +8,7 @@ @use '../../config' as *; @use '../../motion' as *; @use '../../spacing' as *; -@use '../../theme' as *; +@use '../../compat/theme' as *; @use '../../type' as *; @use '../button/tokens' as button; @use '../../utilities/focus-outline' as *; diff --git a/packages/styles/scss/components/treeview/_treeview.scss b/packages/styles/scss/components/treeview/_treeview.scss index 2dc18a7d6612..509e9d9cb43c 100644 --- a/packages/styles/scss/components/treeview/_treeview.scss +++ b/packages/styles/scss/components/treeview/_treeview.scss @@ -8,7 +8,7 @@ @use '../../config' as *; @use '../../motion' as *; @use '../../spacing' as *; -@use '../../theme' as *; +@use '../../compat/theme' as *; @use '../../type' as *; @use '../../utilities/convert' as *; @use '../../utilities/focus-outline' as *; diff --git a/packages/styles/scss/components/ui-shell/header/_header.scss b/packages/styles/scss/components/ui-shell/header/_header.scss index ab75e8b3007d..3809b2602699 100644 --- a/packages/styles/scss/components/ui-shell/header/_header.scss +++ b/packages/styles/scss/components/ui-shell/header/_header.scss @@ -83,16 +83,16 @@ justify-content: center; } - .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.#{$prefix}--header__action + .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger.#{$prefix}--header__action svg { fill: $icon-secondary; } - .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.#{$prefix}--header__action:hover + .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger.#{$prefix}--header__action:hover svg, - .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.#{$prefix}--header__action:active + .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger.#{$prefix}--header__action:active svg, - .bx--btn.bx--btn--icon-only.bx--tooltip__trigger.#{$prefix}--header__action--active + .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger.#{$prefix}--header__action--active svg { fill: $icon-primary; } diff --git a/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss b/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss index cb3e46ebbea5..1d2ddbf6a0ba 100644 --- a/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss +++ b/packages/styles/scss/components/ui-shell/side-nav/_side-nav.scss @@ -68,7 +68,7 @@ width: 0; } - .#{$prefix}--side-nav.bx--side-nav--rail:not(.#{$prefix}--side-nav--fixed):hover, + .#{$prefix}--side-nav.#{$prefix}--side-nav--rail:not(.#{$prefix}--side-nav--fixed):hover, .#{$prefix}--side-nav--expanded { width: mini-units(32); } diff --git a/packages/themes/__tests__/module-test.js b/packages/themes/__tests__/module-test.js index a6ce24d2a39c..2f426fc540f0 100644 --- a/packages/themes/__tests__/module-test.js +++ b/packages/themes/__tests__/module-test.js @@ -129,12 +129,12 @@ describe('@carbon/themes/scss', () => { test('$use-fallback-value', async () => { const { unwrap } = await render(` @use '../' as themes with ( - $use-fallback-value: true, + $use-fallback-value: false, ); $_: get('background', themes.$background); `); - expect(unwrap('background')).toBe('var(--cds-background, #ffffff)'); + expect(unwrap('background')).toBe('var(--cds-background)'); }); // Set prefix for CSS Custom Properties @@ -146,7 +146,7 @@ describe('@carbon/themes/scss', () => { $_: get('background', themes.$background); `); - expect(unwrap('background')).toEqual('var(--test-background)'); + expect(unwrap('background')).toEqual('var(--test-background, #ffffff)'); }); }); }); diff --git a/packages/themes/docs/sass.md b/packages/themes/docs/sass.md index 09ea344a4342..55616e2ac421 100644 --- a/packages/themes/docs/sass.md +++ b/packages/themes/docs/sass.md @@ -27,6 +27,8 @@ There are several entrypoints that you can use with `@carbon/themes`, including: | `@use '@carbon/themes/scss/modules/themes';` | Theme definitions for white, g10, g90, and g100 | | `@use '@carbon/themes/scss/modules/theme';` | Set the current theme, get token values from the theme | | `@use '@carbon/themes/scss/modules/tokens';` | Access theme tokens | +| `@use '@carbon/themes/scss/compat/themes';` | v10 Theme definitions for white, g10, g90, and g100 | +| `@use '@carbon/themes/scss/compat/tokens';` | v10 theme tokens | _Note: the white, g10, g90, and g100 themes are only available in the `scss/modules/themes` file and are not re-exported in `@carbon/themes`. To learn diff --git a/packages/themes/package.json b/packages/themes/package.json index 1c1a64964d95..63fdb304b37d 100644 --- a/packages/themes/package.json +++ b/packages/themes/package.json @@ -24,7 +24,7 @@ "access": "public" }, "scripts": { - "ci-check": "carbon-cli check \"scss/**/*.scss\" -i \"**/generated/**\"", + "ci-check": "carbon-cli check \"scss/**/*.scss\" -i \"**/generated/**\" -i \"**/compat/**\"", "clean": "rimraf es lib umd scss/generated", "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonThemes && babel-node --presets '@babel/preset-env' tasks/build.js && carbon-cli check \"scss/*.scss\"" }, diff --git a/packages/themes/scss/compat/_themes.scss b/packages/themes/scss/compat/_themes.scss new file mode 100644 index 000000000000..4e9bcd947b07 --- /dev/null +++ b/packages/themes/scss/compat/_themes.scss @@ -0,0 +1,8 @@ +// +// 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 'generated/themes'; diff --git a/packages/themes/scss/compat/_tokens.scss b/packages/themes/scss/compat/_tokens.scss new file mode 100644 index 000000000000..ade2391ec944 --- /dev/null +++ b/packages/themes/scss/compat/_tokens.scss @@ -0,0 +1,8 @@ +// +// 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 'generated/tokens'; diff --git a/packages/themes/scss/modules/_config.scss b/packages/themes/scss/modules/_config.scss index 040069c9f4bb..83468f96381a 100644 --- a/packages/themes/scss/modules/_config.scss +++ b/packages/themes/scss/modules/_config.scss @@ -6,3 +6,6 @@ // $prefix: 'cds' !default; + +/// Specify if a fallback value should be provided for the CSS Custom Property +$use-fallback-value: true !default; diff --git a/packages/themes/scss/modules/_themes.scss b/packages/themes/scss/modules/_themes.scss index 70170fb0a071..4e9bcd947b07 100644 --- a/packages/themes/scss/modules/_themes.scss +++ b/packages/themes/scss/modules/_themes.scss @@ -6,4 +6,3 @@ // @forward 'generated/themes'; -@use 'generated/themes'; diff --git a/packages/themes/tasks/build.js b/packages/themes/tasks/build.js index 0ac9edf0ea9f..54d8084944cc 100644 --- a/packages/themes/tasks/build.js +++ b/packages/themes/tasks/build.js @@ -19,6 +19,8 @@ const yaml = require('js-yaml'); const { formatTokenName, themes, tokens } = require('../lib'); const buildTokensFile = require('./builders/tokens'); const buildThemesFile = require('./builders/themes'); +const buildCompatThemesFile = require('./builders/compat/themes'); +const buildCompatTokensFile = require('./builders/compat/tokens'); const buildModulesThemesFile = require('./builders/modules-themes'); const buildModulesTokensFile = require('./builders/modules-tokens'); const buildMixinsFile = require('./builders/mixins'); @@ -64,6 +66,30 @@ async function build() { ); }, }, + { + filepath: path.resolve( + SCSS_DIR, + '..', + 'compat', + 'generated', + '_themes.scss' + ), + builder() { + return buildCompatThemesFile(); + }, + }, + { + filepath: path.resolve( + SCSS_DIR, + '..', + 'compat', + 'generated', + '_tokens.scss' + ), + builder() { + return buildCompatTokensFile(); + }, + }, { filepath: path.resolve( SCSS_DIR, @@ -95,10 +121,9 @@ async function build() { }, ]; - await fs.ensureDir(SCSS_DIR); - await fs.ensureDir(path.resolve(SCSS_DIR, '..', 'modules', 'generated')); - for (const { filepath, builder } of files) { + await fs.ensureFile(filepath); + const { code } = generate(builder()); await fs.writeFile(filepath, code); } diff --git a/packages/themes/tasks/builders/compat/shared.js b/packages/themes/tasks/builders/compat/shared.js new file mode 100644 index 000000000000..ff48b5c3a1a0 --- /dev/null +++ b/packages/themes/tasks/builders/compat/shared.js @@ -0,0 +1,128 @@ +/** + * Copyright IBM Corp. 2015, 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. + */ + +'use strict'; + +const { TokenFormat, group } = require('../../../src/next'); + +const denylist = new Set([ + 'background', + 'layer', + 'layerAccent', + 'layerAccentHover', + 'layerAccentActive', + 'field', + 'backgroundInverse', + 'backgroundBrand', + 'interactive', + + 'borderSubtle', + 'borderStrong', + 'borderInverse', + 'borderInteractive', + + 'textPrimary', + 'textSecondary', + 'textPlaceholder', + 'textHelper', + 'textOnColor', + 'textInverse', + + 'linkPrimary', + 'linkSecondary', + 'linkVisited', + 'linkInverse', + + 'iconPrimary', + 'iconSecondary', + 'iconOnColor', + 'iconInverse', + + 'supportError', + 'supportSuccess', + 'supportWarning', + 'supportInfo', + 'supportErrorInverse', + 'supportSuccessInverse', + 'supportWarningInverse', + 'supportInfoInverse', + + 'overlay', + 'toggleOff', + + 'buttonPrimary', + 'buttonSecondary', + 'buttonTertiary', + 'buttonDangerPrimary', + 'buttonDangerSecondary', + + 'backgroundActive', + 'layerActive', + + 'buttonDangerActive', + 'buttonPrimaryActive', + 'buttonSecondaryActive', + 'buttonTertiaryActive', + + 'focusInset', + 'focusInverse', + + 'backgroundHover', + 'layerHover', + 'fieldHover', + 'backgroundInverseHover', + 'linkPrimaryHover', + 'buttonDangerHover', + 'buttonPrimaryHover', + 'buttonSecondaryHover', + 'buttonTertiaryHover', + + 'backgroundSelected', + 'backgroundSelectedHover', + 'layerSelected', + 'layerSelectedHover', + 'layerSelectedInverse', + 'borderSubtleSelected', + + 'layerDisabled', + 'fieldDisabled', + 'borderDisabled', + + 'textDisabled', + 'buttonDisabled', + 'iconDisabled', + + 'textOnColorDisabled', + 'iconOnColorDisabled', + 'layerSelectedDisabled', + + 'skeletonBackground', + 'skeletonElement', + + // Deprecated + 'brand01', + 'brand02', + 'brand03', + 'active01', + // 'hoverField', + 'danger', +]); + +function shouldIncludeToken(token) { + if (denylist.has(token)) { + return false; + } + const id = TokenFormat.convert({ + name: token, + format: TokenFormat.formats.scss, + }); + return !group.getToken(id); +} + +module.exports = { + shouldIncludeToken, +}; diff --git a/packages/themes/tasks/builders/compat/themes.js b/packages/themes/tasks/builders/compat/themes.js new file mode 100644 index 000000000000..f630561d2832 --- /dev/null +++ b/packages/themes/tasks/builders/compat/themes.js @@ -0,0 +1,54 @@ +/** + * Copyright IBM Corp. 2015, 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. + */ + +'use strict'; + +const { types: t } = require('@carbon/scss-generator'); +const { TokenFormat } = require('../../../src/next'); +const { white, g10, g90, g100, tokens } = require('../../../src'); +const { FILE_BANNER, primitive } = require('../shared'); +const { shouldIncludeToken } = require('./shared'); + +function buildCompatFile() { + const themes = { + white, + g10, + g90, + g100, + }; + const variables = Object.entries(themes).flatMap(([key, theme]) => { + return [ + t.Newline(), + t.Comment(`/ Token values for the ${key} theme`), + t.Assignment({ + id: t.Identifier(key), + init: t.SassMap({ + properties: Object.entries(theme) + .filter(([token]) => { + return tokens.colors.includes(token) && shouldIncludeToken(token); + }) + .map(([token, value]) => { + const id = TokenFormat.convert({ + name: token, + format: TokenFormat.formats.scss, + }); + return t.SassMapProperty(t.Identifier(id), primitive(value)); + }), + }), + default: true, + }), + ]; + }); + + return t.StyleSheet([ + // Preamble + FILE_BANNER, + ...variables, + ]); +} + +module.exports = buildCompatFile; diff --git a/packages/themes/tasks/builders/compat/tokens.js b/packages/themes/tasks/builders/compat/tokens.js new file mode 100644 index 000000000000..c21813e75748 --- /dev/null +++ b/packages/themes/tasks/builders/compat/tokens.js @@ -0,0 +1,80 @@ +/** + * Copyright IBM Corp. 2015, 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. + */ + +'use strict'; + +const { types: t } = require('@carbon/scss-generator'); +const { TokenFormat } = require('../../../src/next'); +const { tokens } = require('../../../src'); +const { FILE_BANNER } = require('../shared'); +const { shouldIncludeToken } = require('./shared'); + +function buildCompatFile() { + const variables = tokens.colors + .filter(shouldIncludeToken) + .flatMap((token) => { + const id = TokenFormat.convert({ + name: token, + format: TokenFormat.formats.scss, + }); + + return [ + t.Newline(), + t.Comment(`/ CSS Custom Property for the ${id} token`), + t.Assignment({ + id: t.Identifier(id), + init: t.SassFunctionCall({ + id: t.Identifier('_get'), + params: [t.SassString(id)], + }), + default: true, + }), + ]; + }); + + return t.StyleSheet([ + // Preamble + FILE_BANNER, + t.Newline(), + + // Modules + t.SassModule('sass:map'), + t.SassModule('../../modules/config'), + t.SassModule('../../modules/theme'), + t.Newline(), + + t.Comment('/ Internal helper for generating CSS Custom Properties'), + t.SassFunction({ + id: t.Identifier('_get'), + params: [t.Identifier('token')], + body: t.BlockStatement([ + t.IfStatement({ + test: t.LogicalExpression({ + left: t.SassValue('config.$use-fallback-value'), + operator: '==', + right: t.SassBoolean(false), + }), + consequent: t.BlockStatement([ + t.AtReturn(t.SassValue('var(--#{config.$prefix}-#{$token})')), + ]), + alternate: t.BlockStatement([ + t.AtReturn( + t.SassValue( + 'var(--#{config.$prefix}-#{$token}, #{theme.get($token)})' + ) + ), + ]), + }), + ]), + }), + + // Variables + ...variables, + ]); +} + +module.exports = buildCompatFile; diff --git a/packages/themes/tasks/builders/modules-themes.js b/packages/themes/tasks/builders/modules-themes.js index 33114457cda9..8b974726e745 100644 --- a/packages/themes/tasks/builders/modules-themes.js +++ b/packages/themes/tasks/builders/modules-themes.js @@ -58,7 +58,108 @@ function buildThemesFile() { ]; }); + const mappings = new Map(); + for (const [key, value] of Object.entries(tokenMappings)) { + if (!mappings.has(value)) { + mappings.set(value, []); + } + + mappings.set(value, [...mappings.get(value), key]); + } + return t.StyleSheet([FILE_BANNER, t.Newline(), ...imports, ...variables]); } +const tokenMappings = { + background: 'ui-background', + layer: 'ui-01', + 'layer-accent': 'ui-03', + field: 'field-01', + 'background-inverse': 'inverse-02', + 'background-brand': 'interactive-01', + interactive: 'interactive-04', + + 'border-subtle': 'ui-03', + 'border-strong': 'ui-04', + 'border-inverse': 'ui-05', + 'border-interactive': 'interactive-04', + + 'text-primary': 'text-01', + 'text-secondary': 'text-02', + 'text-placeholder': 'text-03', + 'text-helper': 'text-05', + 'text-on-color': 'text-04', + 'text-inverse': 'inverse-01', + + 'link-primary': 'link-01', + 'link-secondary': 'link-02', + 'link-visited': 'visited-link', + 'link-inverse': 'inverse-link', + + 'icon-primary': 'icon-01', + 'icon-secondary': 'icon-02', + 'icon-on-color': 'icon-03', + 'icon-inverse': 'inverse-01', + + 'support-error': 'support-01', + 'support-success': 'support-02', + 'support-warning': 'support-03', + 'support-info': 'support-04', + 'support-error-inverse': 'inverse-support-01', + 'support-success-inverse': 'inverse-support-02', + 'support-warning-inverse': 'inverse-support-03', + 'support-info-inverse': 'inverse-support-04', + + overlay: 'overlay-01', + 'toggle-off': 'ui-04', + + 'button-primary': 'interactive-01', + 'button-secondary': 'interactive-02', + 'button-tertiary': 'interactive-03', + 'button-danger-primary': 'danger-01', + 'button-danger-secondary': 'danger-02', + + 'background-active': 'active-ui', + 'layer-active': 'active-ui', + + 'button-danger-active': 'active-danger', + 'button-primary-active': 'active-primary', + 'button-secondary-active': 'active-secondary', + 'button-tertiary-active': 'active-tertiary', + + 'focus-inset': 'inverse-01', + 'focus-inverse': 'inverse-focus-ui', + + 'background-hover': 'hover-ui', + 'layer-hover': 'hover-ui', + 'field-hover': 'hover-ui', + 'background-inverse-hover': 'inverse-hover-ui', + 'link-primary-hover': 'hover-primary-text', + 'button-danger-hover': 'hover-danger', + 'button-primary-hover': 'hover-primary', + 'button-secondary-hover': 'hover-secondary', + 'button-tertiary-hover': 'hover-tertiary', + + 'background-selected': 'selected-ui', + 'background-selected-hover': 'hover-selected-ui', + 'layer-selected': 'selected-ui', + 'layer-selected-hover': 'hover-selected-ui', + 'layer-selected-inverse': 'ui-05', + 'border-subtle-selected': 'active-ui', + + 'layer-disabled': 'disabled-01', + 'field-disabled': 'disabled-01', + 'border-disabled': 'disabled-01', + + 'text-disabled': 'disabled-02', + 'button-disabled': 'disabled-02', + 'icon-disabled': 'disabled-02', + + 'text-on-color-disabled': 'disabled-03', + 'icon-on-color-disabled': 'disabled-03', + 'layer-selected-disabled': 'disabled-03', + + 'skeleton-background': 'skeleton-01', + 'skeleton-element': 'skeleton-02', +}; module.exports = buildThemesFile; diff --git a/packages/themes/tasks/builders/modules-tokens.js b/packages/themes/tasks/builders/modules-tokens.js index 31665b55af40..777b04b670af 100644 --- a/packages/themes/tasks/builders/modules-tokens.js +++ b/packages/themes/tasks/builders/modules-tokens.js @@ -40,17 +40,6 @@ function buildThemeTokens() { t.SassModule('../theme'), t.Newline(), - // Fallback - t.Comment( - '/ Specify if a fallback value should be provided for the CSS Custom Property' - ), - t.Assignment({ - id: t.Identifier('use-fallback-value'), - init: t.SassBoolean(false), - default: true, - }), - t.Newline(), - t.Comment('/ Internal helper for generating CSS Custom Properties'), t.SassFunction({ id: t.Identifier('_get'), @@ -58,7 +47,7 @@ function buildThemeTokens() { body: t.BlockStatement([ t.IfStatement({ test: t.LogicalExpression({ - left: t.Identifier('use-fallback-value'), + left: t.SassValue('config.$use-fallback-value'), operator: '==', right: t.SassBoolean(false), }), diff --git a/yarn.lock b/yarn.lock index b0f97aab3236..e0847a4d9591 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2624,14 +2624,14 @@ __metadata: languageName: node linkType: hard -"@es-joy/jsdoccomment@npm:^0.8.0-alpha.2": - version: 0.8.0-alpha.2 - resolution: "@es-joy/jsdoccomment@npm:0.8.0-alpha.2" +"@es-joy/jsdoccomment@npm:0.10.2": + version: 0.10.2 + resolution: "@es-joy/jsdoccomment@npm:0.10.2" dependencies: - comment-parser: ^1.1.5 + comment-parser: 1.2.1 esquery: ^1.4.0 - jsdoc-type-pratt-parser: 1.0.0-alpha.23 - checksum: cb6b06a8369f171f8dd5b9a3f74def4524e0d80a9c14a402246ff69a2a964a2ca3448c04e3cf5f99d6151aafa13272a96bd8b98d6857f9b217159c711fe09de1 + jsdoc-type-pratt-parser: 1.0.4 + checksum: 5790d13b74cdc647ea2e3e7df7b7c593ed69d86682aecf54db6da5644c82f360867961579e4e85fbf648d6ccf286279f4adb4cafb355996c93e2dd2839ccf0d8 languageName: node linkType: hard @@ -11592,10 +11592,10 @@ __metadata: languageName: node linkType: hard -"comment-parser@npm:1.1.5, comment-parser@npm:^1.1.5": - version: 1.1.5 - resolution: "comment-parser@npm:1.1.5" - checksum: e669d6328a1244a2d7db5ae077dcdd4ef6ddfda752aed9c29d6b4690672d80c0002a7e3ce4fadbb5008c27704adb3153169533312262592834f37ccb5e8eed7c +"comment-parser@npm:1.2.1": + version: 1.2.1 + resolution: "comment-parser@npm:1.2.1" + checksum: 3057a7304c6a06148e7aeae79db7b8dc326ba80c4caf1ed41ab30bdc2d55191d2d65a9c2b5370a6c86f89d95d502013c64a8c691d681b22860fc8a7fcb2d8a3a languageName: node linkType: hard @@ -14692,7 +14692,7 @@ __metadata: eslint-plugin-cypress: ^2.11.3 eslint-plugin-import: ^2.23.4 eslint-plugin-jest: ^24.3.6 - eslint-plugin-jsdoc: ^35.3.0 + eslint-plugin-jsdoc: ^36.0.3 eslint-plugin-jsx-a11y: ^6.4.1 eslint-plugin-prettier: ^3.4.0 eslint-plugin-react: ^7.24.0 @@ -14786,13 +14786,13 @@ __metadata: languageName: node linkType: hard -"eslint-plugin-jsdoc@npm:^35.3.0": - version: 35.3.0 - resolution: "eslint-plugin-jsdoc@npm:35.3.0" +"eslint-plugin-jsdoc@npm:^36.0.3": + version: 36.0.3 + resolution: "eslint-plugin-jsdoc@npm:36.0.3" dependencies: - "@es-joy/jsdoccomment": ^0.8.0-alpha.2 - comment-parser: 1.1.5 - debug: ^4.3.1 + "@es-joy/jsdoccomment": 0.10.2 + comment-parser: 1.2.1 + debug: ^4.3.2 esquery: ^1.4.0 jsdoc-type-pratt-parser: ^1.0.4 lodash: ^4.17.21 @@ -14801,7 +14801,7 @@ __metadata: spdx-expression-parse: ^3.0.1 peerDependencies: eslint: ^6.0.0 || ^7.0.0 - checksum: 09141f74078bb7a4e814d98b42ab9dc5f72f406ca3eea3a622d19f2f8286339b1d219bb849502803d95a9beb43c0667b2635304e5d5750923ae420367e2fee8d + checksum: f15e1d2e1e4b5e5e3c09597e2866976c3cb4e71329c8eed3522f4fbff430d89942b6a752b37875e4fc772ffddc87609e7090a5e92f9fcbcc8ed8dba8e76d06ed languageName: node linkType: hard @@ -21191,10 +21191,10 @@ __metadata: languageName: node linkType: hard -"jsdoc-type-pratt-parser@npm:1.0.0-alpha.23": - version: 1.0.0-alpha.23 - resolution: "jsdoc-type-pratt-parser@npm:1.0.0-alpha.23" - checksum: a174d04aeed52c621cb6075caf0a0efc8b0802346df915d5ac91cc1665b8b860daa0b9585cccd7430fcb50b6ccb1ba1d1328a306819819ab26dca18191686f7e +"jsdoc-type-pratt-parser@npm:1.0.4": + version: 1.0.4 + resolution: "jsdoc-type-pratt-parser@npm:1.0.4" + checksum: f80df71fc5d90714a035283136485c518dca74f1aa263e66d7ea79d563dd04fe73602156a6683f32a6218bc9d0d15d1a767a7d3e8b67227ec663183296250330 languageName: node linkType: hard