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