(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
-
+
{ (Run some action...) setOpen(false); }}>
Secondary button
-
+
{ (Run some action...) setOpen(false); }}>
Priamry button
-
+
```
diff --git a/packages/react/src/components/MultiSelect/MultiSelect-story.js b/packages/react/src/components/MultiSelect/MultiSelect-story.js
index b1c532f34572..97303f5660ae 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect-story.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect-story.js
@@ -17,6 +17,7 @@ import {
import { withReadme } from 'storybook-readme';
import readme from './README.md';
import MultiSelect from '../MultiSelect';
+import FilterableMultiSelect from '../MultiSelect/FilterableMultiSelect';
import Checkbox from '../Checkbox';
import mdx from './MultiSelect.mdx';
@@ -116,7 +117,7 @@ export default {
page: mdx,
},
subcomponents: {
- 'MultiSelect.Filterable': MultiSelect.Filterable,
+ FilterableMultiSelect,
},
},
};
@@ -190,7 +191,7 @@ export const _Filterable = withReadme(readme, () => {
return (
- (item ? item.text : '')}
diff --git a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
index 61bb0707d19d..4c4474840704 100644
--- a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
@@ -7,7 +7,7 @@
import React from 'react';
import { mount } from 'enzyme';
-import MultiSelect from '../../MultiSelect';
+import FilterableMultiSelect from '../../MultiSelect/FilterableMultiSelect';
import {
assertMenuOpen,
assertMenuClosed,
@@ -21,10 +21,12 @@ const openMenu = (wrapper) => {
wrapper.find(`[role="combobox"]`).simulate('click');
};
-describe('MultiSelect.Filterable', () => {
+describe('FilterableMultiSelect', () => {
let mockProps;
beforeEach(() => {
+ // jest.mock('../../../internal/deprecateFieldOnObject');
+
mockProps = {
id: 'test-filterable-multiselect',
disabled: false,
@@ -37,23 +39,23 @@ describe('MultiSelect.Filterable', () => {
});
it('should render', () => {
- const wrapper = mount(
-
+
`;
diff --git a/packages/react/src/components/MultiSelect/index.js b/packages/react/src/components/MultiSelect/index.js
index 112c85925dc6..c61b45aec598 100644
--- a/packages/react/src/components/MultiSelect/index.js
+++ b/packages/react/src/components/MultiSelect/index.js
@@ -4,6 +4,7 @@
* 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 { deprecateFieldOnObject } from '../../internal/deprecateFieldOnObject';
import MultiSelect from './MultiSelect';
import FilterableMultiSelect from './FilterableMultiSelect';
@@ -11,4 +12,8 @@ import FilterableMultiSelect from './FilterableMultiSelect';
FilterableMultiSelect.displayName = 'MultiSelect.Filterable';
MultiSelect.Filterable = FilterableMultiSelect;
+if (__DEV__) {
+ deprecateFieldOnObject(MultiSelect, 'Filterable', FilterableMultiSelect);
+}
+
export default MultiSelect;
diff --git a/packages/react/src/components/PasswordInput/index.js b/packages/react/src/components/PasswordInput/index.js
new file mode 100644
index 000000000000..1f07aa31bc41
--- /dev/null
+++ b/packages/react/src/components/PasswordInput/index.js
@@ -0,0 +1,2 @@
+export ControlledPasswordInput from '../TextInput/ControlledPasswordInput';
+export PasswordInput from '../TextInput/PasswordInput';
diff --git a/packages/react/src/components/TextInput/TextInput-story.js b/packages/react/src/components/TextInput/TextInput-story.js
index 10b6f7610129..51b58a98d4b7 100644
--- a/packages/react/src/components/TextInput/TextInput-story.js
+++ b/packages/react/src/components/TextInput/TextInput-story.js
@@ -8,7 +8,7 @@
import React, { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
-import TextInput from '../TextInput';
+import { TextInput } from '../../index';
import TextInputSkeleton from '../TextInput/TextInput.Skeleton';
import FluidForm from '../FluidForm/FluidForm';
import mdx from './TextInput.mdx';
diff --git a/packages/react/src/components/TextInput/index.js b/packages/react/src/components/TextInput/index.js
index 58347c19513b..a4bad4443c14 100644
--- a/packages/react/src/components/TextInput/index.js
+++ b/packages/react/src/components/TextInput/index.js
@@ -4,8 +4,23 @@
* 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 { deprecateFieldOnObject } from '../../internal/deprecateFieldOnObject';
export * from './TextInput.Skeleton';
-export ControlledPasswordInput from './ControlledPasswordInput';
-export PasswordInput from './PasswordInput';
-export default from './TextInput';
+import ControlledPasswordInput from './ControlledPasswordInput';
+import PasswordInput from './PasswordInput';
+import TextInput from './TextInput';
+
+TextInput.ControlledPasswordInput = ControlledPasswordInput;
+TextInput.PasswordInput = PasswordInput;
+
+if (__DEV__) {
+ deprecateFieldOnObject(
+ TextInput,
+ 'ControlledPasswordInput',
+ ControlledPasswordInput
+ );
+ deprecateFieldOnObject(TextInput, 'PasswordInput', PasswordInput);
+}
+
+export default TextInput;
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
index 2f92fb3ff5a7..449904a87a84 100644
--- a/packages/react/src/index.js
+++ b/packages/react/src/index.js
@@ -4,7 +4,6 @@
* 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 Accordion from './components/Accordion';
export AccordionItem from './components/AccordionItem';
export { AspectRatio } from './components/AspectRatio';
@@ -86,6 +85,10 @@ export OverflowMenu from './components/OverflowMenu';
export OverflowMenuItem from './components/OverflowMenuItem';
export Pagination from './components/Pagination';
export PaginationNav from './components/PaginationNav';
+export {
+ ControlledPasswordInput,
+ PasswordInput,
+} from './components/PasswordInput';
export PrimaryButton from './components/PrimaryButton';
export {
ProgressIndicator,
diff --git a/packages/react/src/internal/__mocks__/deprecateFieldOnObject.js b/packages/react/src/internal/__mocks__/deprecateFieldOnObject.js
new file mode 100644
index 000000000000..a1888682b4a7
--- /dev/null
+++ b/packages/react/src/internal/__mocks__/deprecateFieldOnObject.js
@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+module.exports = {
+ deprecateFieldOnObject: jest.fn(),
+};
diff --git a/packages/react/src/internal/deprecateFieldOnObject.js b/packages/react/src/internal/deprecateFieldOnObject.js
new file mode 100644
index 000000000000..43090160295b
--- /dev/null
+++ b/packages/react/src/internal/deprecateFieldOnObject.js
@@ -0,0 +1,32 @@
+/**
+ * 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.
+ */
+import { warning } from '../internal/warning';
+
+const didWarnAboutDeprecation = {};
+
+function deprecateFieldOnObject(object, field, Component, message) {
+ Object.defineProperty(object, field, {
+ enumerable: true,
+ get() {
+ if (!didWarnAboutDeprecation[field]) {
+ warning(
+ false,
+ message ||
+ `The ${field} field has been deprecated on the ${object.displayName} object. ` +
+ `Please import and use ${
+ Component.displayName || Component.name || 'the field'
+ } directly.`
+ );
+ didWarnAboutDeprecation[field] = true;
+ }
+
+ return Component;
+ },
+ });
+}
+
+export { deprecateFieldOnObject };
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 ce116f897831..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 |
@@ -68,10 +69,25 @@ between version updates.
## Colors
+The colors package will give you access to each swatch from the IBM Design
+Language. You can refer to any color by its swatch and grade.
+
+```scss
+@use '@carbon/styles/scss/colors';
+
+.my-selector {
+ background-color: colors.$blue-50;
+}
+```
+
| Import | Filepath |
| :----------------------------------- | :------------------ |
| `@use '@carbon/styles/scss/colors';` | `scss/_colors.scss` |
+To see all the colors available to be imported, checkout our
+[colors](https://github.com/carbon-design-system/carbon/tree/main/packages/colors)
+docs.
+
## Config
| Import | Filepath |
@@ -154,10 +170,23 @@ grid, there are a few mixins that can be used.
## Motion
+The motion package provides helper functions, mixins, and duration tokens to add
+motion into your project.
+
+```scss
+@use '@carbon/styles/scss/motion' as *;
+
+.my-selector {
+ transition: transform $duration-fast-02 motion(standard, productive);
+}
+```
+
| Import | Filepath |
| :----------------------------------- | :------------------ |
| `@use '@carbon/styles/scss/motion';` | `scss/_motion.scss` |
+For more information, checkout our [motion](#todo) docs.
+
## Reset
| Import | Filepath |
@@ -252,10 +281,23 @@ options:
## Type
+The type package entrypoint allows you to specifically bring type tokens into
+your project. The type package includes various type tokens and mixins.
+
+```scss
+@use '@carbon/styles/scss/type';
+
+.my-selector {
+ @include type.style(type.$productive-heading-01);
+}
+```
+
| Import | Filepath |
| :--------------------------------- | :---------------- |
| `@use '@carbon/styles/scss/type';` | `scss/_type.scss` |
+For more information, check out our [type](#todo) docs.
+
## Components
All of the styles for the components in the Carbon Design System live in the
@@ -290,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__/combo-box-test.js b/packages/styles/scss/components/__tests__/combo-box-test.js
new file mode 100644
index 000000000000..185ae5b07a9b
--- /dev/null
+++ b/packages/styles/scss/components/__tests__/combo-box-test.js
@@ -0,0 +1,27 @@
+/**
+ * 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/combo-box', () => {
+ test('Public API', async () => {
+ const { unwrap } = await render(`
+ @use 'sass:map';
+ @use 'sass:meta';
+ @use '../combo-box';
+
+ $_: get('mixin', meta.mixin-exists('combo-box', 'combo-box'));
+ `);
+ expect(unwrap('mixin')).toBe(true);
+ });
+});
diff --git a/packages/styles/scss/components/__tests__/dropdown-test.js b/packages/styles/scss/components/__tests__/dropdown-test.js
new file mode 100644
index 000000000000..e392215303f2
--- /dev/null
+++ b/packages/styles/scss/components/__tests__/dropdown-test.js
@@ -0,0 +1,27 @@
+/**
+ * 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/dropdown', () => {
+ test('Public API', async () => {
+ const { unwrap } = await render(`
+ @use 'sass:map';
+ @use 'sass:meta';
+ @use '../dropdown';
+
+ $_: get('mixin', meta.mixin-exists('dropdown', 'dropdown'));
+ `);
+ expect(unwrap('mixin')).toBe(true);
+ });
+});
diff --git a/packages/styles/scss/components/__tests__/list-box-test.js b/packages/styles/scss/components/__tests__/list-box-test.js
new file mode 100644
index 000000000000..302aa57d14fe
--- /dev/null
+++ b/packages/styles/scss/components/__tests__/list-box-test.js
@@ -0,0 +1,36 @@
+/**
+ * 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/list-box', () => {
+ test('Public API', async () => {
+ const { unwrap } = await render(`
+ @use 'sass:map';
+ @use 'sass:meta';
+ @use '../list-box';
+
+ $_: get('mixin', meta.mixin-exists('list-box', 'list-box'));
+ $_: get('variables', map.keys(meta.module-variables('list-box')));
+ `);
+ expect(unwrap('mixin')).toBe(true);
+ expect(unwrap('variables')).toMatchInlineSnapshot(`
+ Array [
+ "list-box-width",
+ "list-box-height",
+ "list-box-inline-height",
+ "list-box-menu-width",
+ ]
+ `);
+ });
+});
diff --git a/packages/styles/scss/components/__tests__/multiselect-test.js b/packages/styles/scss/components/__tests__/multiselect-test.js
new file mode 100644
index 000000000000..9aff71f0a068
--- /dev/null
+++ b/packages/styles/scss/components/__tests__/multiselect-test.js
@@ -0,0 +1,27 @@
+/**
+ * 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/multiselect', () => {
+ test('Public API', async () => {
+ const { unwrap } = await render(`
+ @use 'sass:map';
+ @use 'sass:meta';
+ @use '../multiselect';
+
+ $_: get('mixin', meta.mixin-exists('multiselect', 'multiselect'));
+ `);
+ expect(unwrap('mixin')).toBe(true);
+ });
+});
diff --git a/packages/styles/scss/components/__tests__/tag-test.js b/packages/styles/scss/components/__tests__/tag-test.js
new file mode 100644
index 000000000000..e9a25d746089
--- /dev/null
+++ b/packages/styles/scss/components/__tests__/tag-test.js
@@ -0,0 +1,25 @@
+/**
+ * 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/tag', () => {
+ test('Public API', async () => {
+ const { unwrap } = await render(`
+ @use 'sass:meta';
+ @use '../tag/tag';
+ $_: get('mixin', meta.mixin-exists('tag', 'tag'));
+ `);
+ expect(unwrap('mixin')).toBe(true);
+ });
+});
diff --git a/packages/styles/scss/components/_index.scss b/packages/styles/scss/components/_index.scss
index b139ac1ed5bd..35a6c7e67454 100644
--- a/packages/styles/scss/components/_index.scss
+++ b/packages/styles/scss/components/_index.scss
@@ -28,6 +28,7 @@
@use 'data-table/expandable';
@use 'data-table/skeleton';
@use 'data-table/sort';
+@use 'tag';
@use "slider";
@use 'text-area';
@use 'text-input';
@@ -44,3 +45,7 @@
@use 'progress-indicator';
@use 'tabs';
@use 'ui-shell';
+@use 'list-box';
+@use 'combo-box';
+@use 'dropdown';
+@use 'multiselect';
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/combo-box/_combo-box.scss b/packages/styles/scss/components/combo-box/_combo-box.scss
new file mode 100644
index 000000000000..1ec82cc6b41f
--- /dev/null
+++ b/packages/styles/scss/components/combo-box/_combo-box.scss
@@ -0,0 +1,45 @@
+//
+// 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.
+//
+
+@use '../list-box';
+@use '../../config' as *;
+@use '../../theme' as *;
+
+/// Combo box styles
+/// @access public
+/// @group combo-box
+@mixin combo-box {
+ .#{$prefix}--combo-box:hover {
+ background-color: $field;
+ }
+
+ // V11: Possibly deprecate
+ .#{$prefix}--combo-box.#{$prefix}--list-box--light:hover {
+ background-color: $field-02;
+ }
+
+ .#{$prefix}--combo-box .#{$prefix}--text-input::-ms-clear {
+ display: none;
+ }
+
+ .#{$prefix}--combo-box.#{$prefix}--list-box--expanded
+ .#{$prefix}--text-input {
+ border-bottom-color: $border-subtle;
+ }
+
+ .#{$prefix}--combo-box .#{$prefix}--list-box__field,
+ .#{$prefix}--combo-box.#{$prefix}--list-box[data-invalid]
+ .#{$prefix}--list-box__field,
+ .#{$prefix}--combo-box.#{$prefix}--list-box--warning
+ .#{$prefix}--list-box__field,
+ .#{$prefix}--combo-box.#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid]
+ .#{$prefix}--list-box__field,
+ .#{$prefix}--combo-box.#{$prefix}--list-box--disabled.#{$prefix}--list-box--warning
+ .#{$prefix}--list-box__field {
+ padding: 0;
+ }
+}
diff --git a/packages/styles/scss/components/combo-box/_index.scss b/packages/styles/scss/components/combo-box/_index.scss
new file mode 100644
index 000000000000..944ed681931e
--- /dev/null
+++ b/packages/styles/scss/components/combo-box/_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 'combo-box';
+@use 'combo-box';
+
+@include combo-box.combo-box;
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
new file mode 100644
index 000000000000..4cf3750c0338
--- /dev/null
+++ b/packages/styles/scss/components/dropdown/_dropdown.scss
@@ -0,0 +1,493 @@
+//
+// 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.
+//
+
+@use '../list-box';
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../compat/theme' as *;
+@use '../../type' as *;
+@use '../../utilities/box-shadow' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+@use '../../utilities/high-contrast-mode' as *;
+@use '../../utilities/skeleton' as *;
+@use '../../utilities/z-index' as *;
+
+/// Dropdown styles
+/// @access public
+/// @group dropdown
+@mixin dropdown {
+ .#{$prefix}--dropdown__wrapper--inline {
+ display: inline-grid;
+ align-items: center;
+ grid-gap: rem(24px);
+ grid-template: auto auto / auto min-content;
+
+ .#{$prefix}--label {
+ @include type-style('body-short-01');
+ }
+
+ .#{$prefix}--label,
+ .#{$prefix}--form__helper-text,
+ .#{$prefix}--form-requirement {
+ margin: 0;
+ }
+
+ .#{$prefix}--form-requirement {
+ grid-column: 2;
+ }
+ }
+
+ .#{$prefix}--dropdown {
+ @include reset;
+ @include focus-outline('reset');
+
+ position: relative;
+ display: block;
+ width: 100%;
+ height: rem(40px);
+ border: none;
+ border-bottom: 1px solid $border-strong;
+ background-color: $field;
+ color: $text-primary;
+ cursor: pointer;
+ list-style: none;
+ outline: 2px solid transparent;
+ transition: background-color $duration-fast-01 motion(standard, productive);
+
+ &:hover {
+ background-color: $field-hover;
+ }
+ }
+
+ // Menu's triggering element updated to button with Downshift v5 upgrade
+ .#{$prefix}--dropdown .#{$prefix}--list-box__field {
+ text-align: left;
+ }
+
+ // TODO V11: Remove xl selector
+ .#{$prefix}--dropdown--xl,
+ .#{$prefix}--dropdown--lg {
+ height: rem(48px);
+ max-height: rem(48px);
+ }
+
+ // TODO V11: Remove xl selector
+ .#{$prefix}--dropdown--xl .#{$prefix}--dropdown__arrow,
+ .#{$prefix}--dropdown--lg .#{$prefix}--dropdown__arrow {
+ top: rem(16px);
+ }
+
+ .#{$prefix}--dropdown--sm {
+ height: rem(32px);
+ max-height: rem(32px);
+ }
+
+ .#{$prefix}--dropdown--sm .#{$prefix}--dropdown__arrow {
+ top: rem(8px);
+ }
+
+ .#{$prefix}--dropdown--open {
+ border-bottom-color: $border-subtle;
+ }
+
+ .#{$prefix}--dropdown--invalid {
+ @include focus-outline('invalid');
+
+ .#{$prefix}--dropdown-text {
+ padding-right: rem(56px);
+ }
+
+ + .#{$prefix}--form-requirement {
+ display: inline-block;
+ max-height: rem(200px);
+ color: $text-error;
+ }
+ }
+
+ .#{$prefix}--dropdown__invalid-icon {
+ position: absolute;
+ top: 50%;
+ right: $spacing-08;
+ fill: $support-error;
+ transform: translateY(-50%);
+ }
+
+ .#{$prefix}--dropdown--open:hover {
+ background-color: $field;
+ }
+
+ .#{$prefix}--dropdown--open:focus {
+ outline: 1px solid transparent;
+ }
+
+ .#{$prefix}--dropdown--open .#{$prefix}--dropdown-list {
+ @include box-shadow;
+
+ // 40px item height * 5.5 items shown
+ max-height: rem(220px);
+ transition: max-height $duration-fast-02 motion(entrance, productive);
+ }
+
+ // V11: Possibly deprecate
+ .#{$prefix}--dropdown--light {
+ background-color: $field-02;
+
+ &:hover {
+ background-color: $hover-light-ui;
+ }
+ }
+
+ .#{$prefix}--dropdown--up .#{$prefix}--dropdown-list {
+ bottom: 2rem;
+ }
+
+ .#{$prefix}--dropdown__arrow {
+ position: absolute;
+ top: rem(13px);
+ right: 1rem;
+ fill: $icon-primary;
+ pointer-events: none;
+ transform-origin: 50% 45%;
+ transition: transform $duration-fast-02 motion(standard, productive);
+ }
+
+ button.#{$prefix}--dropdown-text {
+ width: 100%;
+ border: none;
+ // button-reset mixin contradicts with bx--dropdown-text styles
+ background: none;
+ color: $text-primary;
+ text-align: left;
+
+ &:focus {
+ @include focus-outline('outline');
+ }
+ }
+
+ .#{$prefix}--dropdown-text {
+ @include type-style('body-short-01');
+
+ display: block;
+ overflow: hidden;
+ // Account for the border in `.bx--dropdown`
+ height: calc(100% + 1px);
+ // 2rem + SVG width
+ padding-right: rem(42px);
+ padding-left: $spacing-05;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .#{$prefix}--dropdown-list {
+ @include reset;
+ @include focus-outline('reset');
+ @include box-shadow;
+ @include type-style('body-short-01');
+
+ position: absolute;
+ z-index: z('dropdown');
+ display: flex;
+ width: 100%;
+ max-height: 0;
+ flex-direction: column;
+ background-color: $layer;
+ list-style: none;
+ // NOTE: IE, Edge, and Safari do not support two value `overflow` shorthand.
+ overflow-x: hidden;
+ overflow-y: auto;
+ transition: max-height $duration-fast-02 motion(standard, productive);
+ }
+
+ // V11: Possibly deprecate
+ .#{$prefix}--dropdown--light .#{$prefix}--dropdown-list {
+ background-color: $field-02;
+ }
+
+ .#{$prefix}--dropdown:not(.#{$prefix}--dropdown--open)
+ .#{$prefix}--dropdown-item {
+ visibility: hidden;
+ }
+
+ .#{$prefix}--dropdown-item {
+ position: relative;
+ opacity: 0;
+ transition: visibility $duration-fast-01 motion(standard, productive),
+ opacity $duration-fast-01 motion(standard, productive),
+ background-color $duration-fast-01 motion(standard, productive);
+ visibility: inherit;
+
+ &:hover {
+ background-color: $layer-hover;
+
+ + .#{$prefix}--dropdown-item .#{$prefix}--dropdown-link {
+ border-color: transparent;
+ }
+ }
+
+ &:active {
+ background-color: $layer-selected;
+ }
+
+ &:first-of-type .#{$prefix}--dropdown-link {
+ border-top-color: transparent;
+ }
+ }
+
+ .#{$prefix}--dropdown-item:last-of-type .#{$prefix}--dropdown-link {
+ border-bottom: none;
+ }
+
+ .#{$prefix}--dropdown-link {
+ @include focus-outline('reset');
+
+ display: block;
+ overflow: hidden;
+ height: rem(40px);
+ padding: rem(11px) 0;
+ border: 1px solid transparent;
+ border-top-color: $border-subtle;
+ margin: 0 $spacing-05;
+ color: $text-secondary;
+ font-weight: normal;
+ line-height: 1rem;
+ text-decoration: none;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ &:hover {
+ border-color: transparent;
+ color: $text-01;
+ }
+ }
+
+ // V11: Possibly deprecate
+ .#{$prefix}--dropdown--light .#{$prefix}--dropdown-link {
+ border-top-color: $decorative-01;
+ }
+
+ .#{$prefix}--dropdown--sm .#{$prefix}--dropdown-link {
+ height: rem(32px);
+ padding-top: rem(7px);
+ padding-bottom: rem(7px);
+ }
+
+ .#{$prefix}--dropdown--xl .#{$prefix}--dropdown-link {
+ height: rem(48px);
+ padding-top: rem(15px);
+ padding-bottom: rem(15px);
+ }
+
+ .#{$prefix}--dropdown--focused,
+ .#{$prefix}--dropdown-link:focus {
+ @include focus-outline('outline');
+
+ padding: rem(11px) rem(16px);
+ margin: 0;
+ }
+
+ // We don't want to apply focus styles via focus selector when using the aria-activedescendant structure
+ .#{$prefix}--dropdown-list[aria-activedescendant]
+ .#{$prefix}--dropdown-link:focus {
+ // Copied from .bx--dropdown-link styles
+ padding: rem(11px) 0;
+ margin: 0 $spacing-05;
+ outline: none;
+ }
+
+ // Need added weight for item that is :focused and .bx--dropdown--focused
+ .#{$prefix}--dropdown-list[aria-activedescendant]
+ .#{$prefix}--dropdown--focused:focus {
+ // copied from default focus styles
+ @include focus-outline('outline');
+
+ padding: rem(11px) rem(16px);
+ margin: 0;
+ }
+
+ // Don't want to allow multiple elements have a "selected" style. Not sure why active
+ // had unique styles initially but creating an overwrite for the latest HTML markup for
+ // backwards compatibility. For the next major release it would be possible to clean up
+ // the HTML structure to prevent the user of :active and :focus styles which is creating
+ // these duplicated styles in the list. The Carbon 10 version of dropdown is already
+ // supporting 2 very different HTML structures.
+ .#{$prefix}--dropdown-list[aria-activedescendant]
+ .#{$prefix}--dropdown-item:active {
+ background-color: inherit;
+ }
+
+ .#{$prefix}--dropdown-item:hover .#{$prefix}--dropdown-link {
+ border-bottom-color: $layer-hover;
+ }
+
+ .#{$prefix}--dropdown--open .#{$prefix}--dropdown__arrow {
+ transform: rotate(-180deg);
+ }
+
+ .#{$prefix}--dropdown--open.#{$prefix}--dropdown--xl
+ .#{$prefix}--dropdown-list {
+ // 48px item height * 5.5 items shown
+ max-height: rem(264px);
+ }
+
+ .#{$prefix}--dropdown--open.#{$prefix}--dropdown--sm
+ .#{$prefix}--dropdown-list {
+ // 32px item height * 5.5 items shown
+ max-height: rem(176px);
+ }
+
+ .#{$prefix}--dropdown--open .#{$prefix}--dropdown-item {
+ opacity: 1;
+ }
+
+ .#{$prefix}--dropdown--disabled {
+ border-bottom-color: transparent;
+
+ &:hover {
+ background-color: $field;
+ }
+
+ &:focus {
+ outline: none;
+ }
+
+ // TODO: remove in v11
+ .#{$prefix}--dropdown-text,
+ .#{$prefix}--list-box__label {
+ color: $text-disabled;
+ }
+
+ // TODO: remove in v11
+ .#{$prefix}--dropdown__arrow,
+ .#{$prefix}--list-box__menu-icon svg {
+ fill: $icon-disabled;
+ }
+
+ // V11: Possibly deprecate
+ &.#{$prefix}--dropdown--light:hover {
+ background-color: $field-02;
+ }
+ }
+
+ .#{$prefix}--dropdown--disabled .#{$prefix}--list-box__field,
+ .#{$prefix}--dropdown--disabled .#{$prefix}--list-box__menu-icon {
+ cursor: not-allowed;
+ }
+
+ .#{$prefix}--dropdown--auto-width {
+ width: auto;
+ max-width: rem(400px);
+ }
+
+ .#{$prefix}--dropdown--inline {
+ display: inline-block;
+ width: auto;
+ border-bottom-color: transparent;
+ background-color: transparent;
+ justify-self: start;
+ transition: background $duration-fast-01 motion(entrance, productive);
+
+ &:hover {
+ background-color: $field-hover;
+ }
+
+ &.#{$prefix}--dropdown--disabled {
+ background-color: transparent;
+ }
+
+ .#{$prefix}--dropdown__arrow {
+ top: rem(8px);
+ right: rem(8px);
+ }
+ }
+
+ .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--open {
+ background-color: transparent;
+ }
+
+ .#{$prefix}--dropdown--inline .#{$prefix}--dropdown-text {
+ display: inline-block;
+ overflow: visible;
+ height: rem(32px);
+ padding: rem(7px) $spacing-07 rem(7px) $spacing-04;
+ color: $text-primary;
+ }
+
+ .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--disabled
+ .#{$prefix}--dropdown-text {
+ color: $text-disabled;
+ }
+
+ .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--disabled:focus
+ .#{$prefix}--dropdown-text {
+ outline: 0;
+ }
+
+ .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--invalid
+ .#{$prefix}--dropdown__invalid-icon {
+ right: rem(32px);
+ }
+
+ .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--invalid
+ .#{$prefix}--dropdown-text {
+ padding-right: rem(56px);
+ }
+
+ .#{$prefix}--dropdown--inline.#{$prefix}--dropdown--open:focus
+ .#{$prefix}--dropdown-list {
+ @include box-shadow;
+ }
+
+ .#{$prefix}--dropdown--inline .#{$prefix}--dropdown-link {
+ font-weight: normal;
+ }
+
+ .#{$prefix}--dropdown--show-selected .#{$prefix}--dropdown--selected {
+ display: block;
+ background-color: $layer-hover;
+ color: $text-primary;
+
+ &:hover {
+ background-color: $layer-selected;
+ }
+
+ .#{$prefix}--dropdown-link {
+ border-top-color: transparent;
+ }
+
+ + .#{$prefix}--dropdown-item .#{$prefix}--dropdown-link {
+ border-top-color: transparent;
+ }
+
+ .#{$prefix}--list-box__menu-item__selected-icon {
+ display: block;
+ }
+ }
+
+ // Skeleton State
+ .#{$prefix}--dropdown-v2.#{$prefix}--skeleton,
+ .#{$prefix}--dropdown.#{$prefix}--skeleton {
+ @include skeleton;
+ }
+
+ // Windows HCM fix
+ // stylelint-disable-next-line no-duplicate-selectors
+ .#{$prefix}--dropdown .#{$prefix}--list-box__field {
+ @include high-contrast-mode('outline');
+ }
+
+ .#{$prefix}--list-box__menu-item__option {
+ @include high-contrast-mode {
+ outline: none;
+ }
+ }
+
+ .#{$prefix}--list-box__menu-item__selected-icon {
+ @include high-contrast-mode('icon-fill');
+ }
+}
diff --git a/packages/styles/scss/components/dropdown/_index.scss b/packages/styles/scss/components/dropdown/_index.scss
new file mode 100644
index 000000000000..933aadd8b218
--- /dev/null
+++ b/packages/styles/scss/components/dropdown/_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 'dropdown';
+@use 'dropdown';
+
+@include dropdown.dropdown;
diff --git a/packages/styles/scss/components/list-box/_index.scss b/packages/styles/scss/components/list-box/_index.scss
new file mode 100644
index 000000000000..2a19f693f111
--- /dev/null
+++ b/packages/styles/scss/components/list-box/_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 'list-box';
+@use 'list-box';
+
+@include list-box.list-box;
diff --git a/packages/styles/scss/components/list-box/_list-box.scss b/packages/styles/scss/components/list-box/_list-box.scss
new file mode 100644
index 000000000000..7708c724fb59
--- /dev/null
+++ b/packages/styles/scss/components/list-box/_list-box.scss
@@ -0,0 +1,821 @@
+//
+// 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.
+//
+
+@use '../button/tokens' as *;
+@use '../text-input';
+@use '../tag';
+@use '../tag/mixins' as *;
+@use '../../config' as *;
+@use '../../colors' as *;
+@use '../../compat/theme' as *;
+@use '../../type' as *;
+@use '../../spacing' as *;
+@use '../../motion' as *;
+@use '../../utilities/box-shadow' as *;
+@use '../../utilities/button-reset';
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+@use '../../utilities/high-contrast-mode' as *;
+@use '../../utilities/z-index' as *;
+
+/// @type Number
+/// @access public
+/// @group list-box
+$list-box-width: 100%;
+
+/// @type Number
+/// @access public
+/// @group list-box
+$list-box-height: rem(40px);
+
+/// @type Number
+/// @access public
+/// @group list-box
+$list-box-inline-height: $list-box-height;
+
+/// @type Number
+/// @access public
+/// @group list-box
+$list-box-menu-width: rem(300px);
+
+/// List box styles
+/// @access public
+/// @group list-box
+@mixin list-box {
+ // The overall container element for a `list-box`. Has two variants,
+ // `disabled` and `inline`.
+ .#{$prefix}--list-box__wrapper--inline {
+ display: inline-grid;
+ align-items: center;
+ grid-gap: rem(4px);
+ grid-template: auto auto / auto auto;
+
+ .#{$prefix}--label {
+ @include type-style('body-short-01');
+ }
+
+ .#{$prefix}--label,
+ .#{$prefix}--form__helper-text,
+ .#{$prefix}--form-requirement {
+ margin: 0;
+ }
+
+ .#{$prefix}--form__helper-text {
+ max-width: none;
+ }
+
+ .#{$prefix}--form-requirement {
+ grid-column: 2;
+ }
+ }
+
+ .#{$prefix}--list-box {
+ @include reset;
+
+ position: relative;
+ width: $list-box-width;
+ height: rem(40px);
+ max-height: rem(40px);
+ border: none;
+ border-bottom: 1px solid $border-strong;
+ background-color: $field;
+ color: $text-primary;
+ cursor: pointer;
+ transition: all $duration-fast-01 motion(standard, productive);
+
+ &:hover {
+ background-color: $field-hover;
+ }
+ }
+
+ // TODO V11: Remove xl selector
+ .#{$prefix}--list-box--xl,
+ .#{$prefix}--list-box--lg {
+ height: rem(48px);
+ max-height: rem(48px);
+ }
+
+ .#{$prefix}--list-box--sm {
+ height: rem(32px);
+ max-height: rem(32px);
+ }
+
+ .#{$prefix}--list-box--expanded {
+ border-bottom-color: $border-subtle;
+ }
+
+ .#{$prefix}--list-box--expanded:hover {
+ background-color: $field;
+ }
+
+ // V11: Possibly deprecate
+ .#{$prefix}--list-box--expanded:hover.#{$prefix}--list-box--light:hover {
+ background-color: $field-02;
+ }
+
+ .#{$prefix}--list-box .#{$prefix}--text-input {
+ min-width: 0;
+ height: 100%;
+ }
+
+ // invalid states
+ .#{$prefix}--list-box__invalid-icon {
+ position: absolute;
+ top: 50%;
+ right: $spacing-08;
+ fill: $support-error;
+ transform: translateY(-50%);
+ }
+
+ .#{$prefix}--list-box__invalid-icon--warning {
+ fill: $support-warning;
+ }
+
+ .#{$prefix}--list-box__invalid-icon--warning path[fill] {
+ fill: $black-100;
+ opacity: 1;
+ }
+
+ .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field,
+ .#{$prefix}--list-box.#{$prefix}--list-box--warning
+ .#{$prefix}--list-box__field {
+ padding-right: $spacing-10;
+ border-bottom: 0;
+ }
+
+ .#{$prefix}--list-box[data-invalid].#{$prefix}--list-box--inline
+ .#{$prefix}--list-box__field {
+ padding-right: rem(56px);
+ }
+
+ // V11: Possibly deprecate
+ // Light variation for 'list-box'
+ .#{$prefix}--list-box--light {
+ background-color: $field-02;
+
+ &:hover {
+ background-color: $hover-light-ui;
+ }
+ }
+
+ // V11: Possibly deprecate
+ .#{$prefix}--list-box--light .#{$prefix}--list-box__menu {
+ background: $field-02;
+ }
+
+ // V11: Possibly deprecate
+ .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item__option {
+ border-top-color: $decorative-01;
+ }
+
+ .#{$prefix}--list-box--light.#{$prefix}--list-box--expanded {
+ border-bottom-color: transparent;
+ }
+
+ // Disabled state for `list-box`
+ .#{$prefix}--list-box--disabled:hover {
+ background-color: $field;
+ }
+
+ // V11: Possibly deprecate
+ .#{$prefix}--list-box--light.#{$prefix}--list-box--disabled {
+ background-color: $field-02;
+ }
+
+ .#{$prefix}--list-box--disabled,
+ .#{$prefix}--list-box--disabled .#{$prefix}--list-box__field,
+ .#{$prefix}--list-box--disabled .#{$prefix}--list-box__field:focus {
+ border-bottom-color: transparent;
+ outline: none;
+ }
+
+ .#{$prefix}--list-box--disabled .#{$prefix}--list-box__label,
+ .#{$prefix}--list-box--disabled.#{$prefix}--list-box--inline
+ .#{$prefix}--list-box__label {
+ color: $text-disabled;
+ }
+
+ .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-icon > svg,
+ .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection > svg {
+ fill: $icon-disabled;
+ }
+
+ .#{$prefix}--list-box--disabled,
+ .#{$prefix}--list-box--disabled .#{$prefix}--list-box__field,
+ .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-icon {
+ cursor: not-allowed;
+ }
+
+ .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item,
+ .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item:hover,
+ .#{$prefix}--list-box--disabled
+ .#{$prefix}--list-box__menu-item--highlighted {
+ color: $text-disabled;
+ text-decoration: none;
+ }
+
+ .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection:hover {
+ cursor: not-allowed;
+ }
+
+ // disabled && invalid
+ .#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid]
+ .#{$prefix}--list-box__field {
+ padding-right: $spacing-09;
+ }
+
+ .#{$prefix}--list-box--disabled.#{$prefix}--list-box[data-invalid].#{$prefix}--list-box--inline
+ .#{$prefix}--list-box__field {
+ padding-right: $spacing-07;
+ }
+
+ // Inline variant for a `list-box`
+ .#{$prefix}--list-box.#{$prefix}--list-box--inline {
+ border-width: 0;
+ background-color: transparent;
+
+ &:hover {
+ background-color: $field-hover;
+ }
+ }
+
+ .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--expanded {
+ border-bottom-width: 0;
+ }
+
+ .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--expanded
+ .#{$prefix}--list-box__field[aria-expanded='true'] {
+ border-width: 0;
+ }
+
+ .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--expanded:hover,
+ .#{$prefix}--list-box.#{$prefix}--list-box--inline.#{$prefix}--list-box--disabled:hover {
+ background-color: transparent;
+ }
+
+ .#{$prefix}--list-box.#{$prefix}--list-box--inline
+ .#{$prefix}--list-box__field {
+ padding: 0 $spacing-07 0 $spacing-03;
+ }
+
+ .#{$prefix}--list-box.#{$prefix}--list-box--inline
+ .#{$prefix}--list-box__menu-icon {
+ right: $spacing-03;
+ }
+
+ .#{$prefix}--list-box.#{$prefix}--list-box--inline
+ .#{$prefix}--list-box__invalid-icon {
+ right: $spacing-07;
+ }
+
+ .#{$prefix}--list-box--inline .#{$prefix}--list-box__label {
+ color: $text-primary;
+ }
+
+ .#{$prefix}--list-box--inline .#{$prefix}--list-box__field {
+ height: 100%;
+ }
+
+ .#{$prefix}--dropdown--inline .#{$prefix}--list-box__field {
+ max-width: rem(480px);
+ }
+
+ .#{$prefix}--dropdown--inline .bx--list-box__menu {
+ min-width: rem(288px);
+ max-width: rem(480px);
+ }
+
+ // The field we use for input, showing selection, etc.
+ .#{$prefix}--list-box__field {
+ @include button-reset.reset;
+
+ position: relative;
+ display: inline-flex;
+ overflow: hidden;
+ // Account for the border in `.bx--list-box`
+ height: calc(100% + 1px);
+ align-items: center;
+ padding: 0 $spacing-09 0 $spacing-05;
+ cursor: pointer;
+ outline: none;
+ text-overflow: ellipsis;
+ vertical-align: top;
+ white-space: nowrap;
+ }
+
+ .#{$prefix}--list-box__field:focus {
+ @include focus-outline('outline');
+ }
+
+ .#{$prefix}--list-box__field[disabled] {
+ color: $text-disabled;
+ outline: none;
+ }
+
+ // populated input field
+ .#{$prefix}--list-box__field .#{$prefix}--text-input {
+ padding-right: rem(72px);
+ }
+
+ // invalid && populated input field
+ .#{$prefix}--list-box[data-invalid]
+ .#{$prefix}--list-box__field
+ .#{$prefix}--text-input,
+ .#{$prefix}--list-box--warning
+ .#{$prefix}--list-box__field
+ .#{$prefix}--text-input {
+ // to account for clear input button outline
+ padding-right: rem(98px);
+ }
+
+ .#{$prefix}--list-box[data-invalid]
+ .#{$prefix}--list-box__field
+ .#{$prefix}--text-input
+ + .#{$prefix}--list-box__invalid-icon,
+ .#{$prefix}--list-box--warning
+ .#{$prefix}--list-box__field
+ .#{$prefix}--text-input
+ + .#{$prefix}--list-box__invalid-icon {
+ // to account for clear input button outline
+ right: rem(66px);
+ }
+
+ // empty input field
+ .#{$prefix}--list-box__field .#{$prefix}--text-input--empty {
+ padding-right: $spacing-09;
+ }
+
+ // invalid && empty input field
+ .#{$prefix}--list-box[data-invalid]
+ .#{$prefix}--list-box__field
+ .#{$prefix}--text-input--empty,
+ .#{$prefix}--list-box--warning
+ .#{$prefix}--list-box__field
+ .#{$prefix}--text-input--empty {
+ padding-right: carbon--mini-units(9);
+ }
+
+ .#{$prefix}--list-box[data-invalid]
+ .#{$prefix}--list-box__field
+ .#{$prefix}--text-input--empty
+ + .#{$prefix}--list-box__invalid-icon,
+ .#{$prefix}--list-box--warning
+ .#{$prefix}--list-box__field
+ .#{$prefix}--text-input--empty
+ + .#{$prefix}--list-box__invalid-icon {
+ // to account for clear input button outline
+ right: rem(40px);
+ }
+
+ // Label for a `list-box__field`
+ .#{$prefix}--list-box__label {
+ @include type-style('body-short-01');
+
+ overflow: hidden;
+ color: $text-primary;
+ text-overflow: ellipsis;
+ user-select: none;
+ white-space: nowrap;
+ }
+
+ // Menu status inside of a `list-box__field`
+ .#{$prefix}--list-box__menu-icon {
+ @include button-reset.reset($width: false);
+
+ position: absolute;
+ right: $spacing-05;
+ display: flex;
+ width: rem(24px);
+ height: rem(24px);
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ outline: none;
+ transition: transform $duration-fast-01 motion(standard, productive);
+ }
+
+ .#{$prefix}--list-box__menu-icon > svg {
+ fill: $icon-primary;
+ }
+
+ .#{$prefix}--list-box__menu-icon--open {
+ width: rem(24px);
+ justify-content: center;
+ transform: rotate(180deg);
+ }
+
+ // Selection indicator for a `list-box__field`
+ .#{$prefix}--list-box__selection {
+ @include button-reset.reset($width: false);
+
+ position: absolute;
+ top: 50%;
+ /* to preserve .5rem space between icons according to spec top/transform used to center the combobox clear selection icon in IE11 */
+ right: rem(36px);
+ display: flex;
+ width: rem(24px);
+ height: rem(24px);
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ transform: translateY(-50%);
+ transition: background-color $duration-fast-01 motion(standard, productive);
+ user-select: none;
+
+ &:focus {
+ @include focus-outline('outline');
+
+ &:hover {
+ @include focus-outline('outline');
+ }
+ }
+ }
+
+ .#{$prefix}--list-box__selection > svg {
+ fill: $icon-primary;
+ }
+
+ .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection:focus {
+ outline: none;
+ }
+
+ // Modifier for a selection to show that multiple selections have been made
+ .#{$prefix}--list-box__selection--multi {
+ @include type-style('label-01');
+
+ position: static;
+ top: auto;
+ display: flex;
+ width: auto;
+ height: rem(24px);
+ align-items: center;
+ justify-content: space-between;
+ padding: rem(8px);
+ // Align with hover circle of X button
+ padding-right: rem(2px);
+ margin-right: rem(10px);
+ background-color: $background-inverse;
+ border-radius: rem(12px);
+ color: $text-inverse;
+ line-height: 0;
+ transform: none;
+ }
+
+ .#{$prefix}--list-box__selection--multi > svg {
+ width: rem(20px);
+ height: rem(20px);
+ padding: rem(2px);
+ margin-left: rem(4px);
+ fill: $icon-inverse;
+
+ &:hover {
+ background-color: $button-secondary-hover;
+ border-radius: 50%;
+ }
+ }
+
+ .#{$prefix}--list-box--disabled .#{$prefix}--list-box__selection--multi {
+ @include tag-theme($text-disabled, $field-disabled);
+
+ > svg {
+ fill: $icon-disabled;
+
+ &:hover {
+ background-color: initial;
+ }
+ }
+ }
+
+ .#{$prefix}--list-box__selection--multi:hover {
+ outline: none;
+ }
+
+ // Descendant of a `list-box` that displays a list of options to select
+ .#{$prefix}--list-box__menu {
+ @include box-shadow();
+
+ position: absolute;
+ z-index: z('dropdown');
+ right: 0;
+ left: 0;
+ width: $list-box-width;
+ background-color: $layer;
+ overflow-y: auto;
+ transition: max-height $duration-fast-02 motion(standard, productive);
+
+ &:focus {
+ // remove default browser focus in firefox
+ @include focus-outline('border');
+ }
+ }
+
+ .#{$prefix}--list-box
+ .#{$prefix}--list-box__field[aria-expanded='false']
+ + .#{$prefix}--list-box__menu {
+ max-height: 0;
+ }
+
+ .#{$prefix}--list-box--expanded .#{$prefix}--list-box__menu {
+ // 40px item height * 5.5 items shown
+ max-height: rem(220px);
+ }
+
+ // TODO V11: Remove xl selector
+ .#{$prefix}--list-box--expanded.#{$prefix}--list-box--xl
+ .#{$prefix}--list-box__menu,
+ .#{$prefix}--list-box--expanded.#{$prefix}--list-box--lg
+ .#{$prefix}--list-box__menu {
+ // 48px item height * 5.5 items shown
+ max-height: rem(264px);
+ }
+
+ .#{$prefix}--list-box--expanded.#{$prefix}--list-box--sm
+ .#{$prefix}--list-box__menu {
+ // 32px item height * 5.5 items shown
+ max-height: rem(176px);
+ }
+
+ // Descendant of a `list-box__menu` that represents a selection for a control
+ .#{$prefix}--list-box__menu-item {
+ @include type-style('body-short-01');
+
+ position: relative;
+ height: rem(40px);
+ color: $text-secondary;
+ cursor: pointer;
+ transition: background $duration-fast-01 motion(standard, productive);
+ user-select: none;
+
+ &:hover {
+ background-color: $layer-hover;
+ }
+
+ &:active {
+ background-color: $layer-selected;
+ }
+ }
+
+ // V11: Possibly deprecate
+ .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item:hover {
+ background-color: $hover-light-ui;
+ }
+
+ .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item {
+ height: rem(32px);
+ }
+
+ // TODO V11: Remove xl selector
+ .#{$prefix}--list-box--xl .#{$prefix}--list-box__menu-item,
+ .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item {
+ height: rem(48px);
+ }
+
+ .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item:hover {
+ background-color: transparent;
+ }
+
+ // V11: Possibly deprecate
+ .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item:active {
+ // To Do: What should this variable be?
+ // background-color: $selected-light-ui;
+ }
+
+ .#{$prefix}--list-box--disabled
+ .#{$prefix}--list-box__menu-item__option:hover {
+ border-top-color: $border-subtle;
+ }
+
+ .#{$prefix}--list-box__menu-item:first-of-type
+ .#{$prefix}--list-box__menu-item__option {
+ border-top-color: transparent;
+ }
+
+ .#{$prefix}--list-box__menu-item:hover
+ .#{$prefix}--list-box__menu-item__option {
+ color: $text-primary;
+ }
+
+ .#{$prefix}--list-box__menu-item:hover
+ + .#{$prefix}--list-box__menu-item
+ .#{$prefix}--list-box__menu-item__option {
+ border-top-color: transparent;
+ }
+
+ .#{$prefix}--list-box--disabled
+ .#{$prefix}--list-box__menu-item:hover
+ + .#{$prefix}--list-box__menu-item
+ .#{$prefix}--list-box__menu-item__option {
+ border-top-color: $border-subtle;
+ }
+
+ .#{$prefix}--list-box__menu-item__option {
+ @include focus-outline('reset');
+
+ display: block;
+ overflow: hidden;
+ height: rem(40px);
+ padding: rem(11px) 0;
+ padding-right: $spacing-06;
+ border-top: 1px solid transparent;
+ border-top-color: $border-subtle;
+ border-bottom: 1px solid transparent;
+ margin: 0 $spacing-05;
+ color: $text-secondary;
+ font-weight: normal;
+ line-height: 1rem;
+ text-decoration: none;
+ text-overflow: ellipsis;
+ transition: border-color $duration-fast-01 motion(standard, productive),
+ color $duration-fast-01 motion(standard, productive);
+ white-space: nowrap;
+
+ &:focus {
+ @include focus-outline('outline');
+
+ padding: rem(11px) rem(16px);
+ border-color: transparent;
+ margin: 0;
+ }
+
+ &:hover {
+ border-color: transparent;
+ color: $text-primary;
+ }
+ }
+
+ .#{$prefix}--list-box--sm .#{$prefix}--list-box__menu-item__option {
+ height: rem(32px);
+ padding-top: rem(7px);
+ padding-bottom: rem(7px);
+ }
+
+ // TODO V11: Remove xl selector
+ .#{$prefix}--list-box--xl .#{$prefix}--list-box__menu-item__option,
+ .#{$prefix}--list-box--lg .#{$prefix}--list-box__menu-item__option {
+ height: rem(48px);
+ padding-top: rem(15px);
+ padding-bottom: rem(15px);
+ }
+
+ .#{$prefix}--list-box--disabled
+ .#{$prefix}--list-box__menu-item:hover
+ .#{$prefix}--list-box__menu-item__option,
+ .#{$prefix}--list-box--disabled .#{$prefix}--list-box__menu-item__option {
+ color: $text-disabled;
+ }
+
+ .#{$prefix}--list-box.#{$prefix}--list-box--inline
+ .#{$prefix}--list-box__menu-item__option {
+ margin: 0 $spacing-03;
+
+ &:focus {
+ padding-right: $spacing-03;
+ padding-left: $spacing-03;
+ margin: 0;
+ }
+ }
+
+ .#{$prefix}--list-box__menu-item--highlighted {
+ border-color: transparent;
+ background-color: $layer-hover;
+ color: $text-primary;
+ }
+
+ .#{$prefix}--list-box__menu-item--highlighted
+ .#{$prefix}--list-box__menu-item__option,
+ .#{$prefix}--list-box__menu-item--highlighted
+ + .#{$prefix}--list-box__menu-item
+ .#{$prefix}--list-box__menu-item__option {
+ border-top-color: transparent;
+ }
+
+ .#{$prefix}--list-box__menu-item--highlighted
+ .#{$prefix}--list-box__menu-item__option {
+ color: $text-primary;
+ }
+
+ .#{$prefix}--list-box__menu-item--active {
+ border-bottom-color: $layer-selected;
+ background-color: $layer-selected;
+ color: $text-primary;
+ }
+
+ // V11: Possibly deprecate
+ .#{$prefix}--list-box--light .#{$prefix}--list-box__menu-item--active {
+ // To Do: What should this token be?
+ // border-bottom-color: $selected-light-ui;
+ // background-color: $selected-light-ui;
+ }
+
+ .#{$prefix}--list-box__menu-item--active:hover,
+ .#{$prefix}--list-box__menu-item--active.#{$prefix}--list-box__menu-item--highlighted {
+ border-bottom-color: $layer-selected;
+ background-color: $layer-selected;
+ }
+
+ .#{$prefix}--list-box__menu-item--active
+ .#{$prefix}--list-box__menu-item__option {
+ color: $text-primary;
+ }
+
+ // Hide top border if previous list item is selected
+ .#{$prefix}--list-box__menu-item--active
+ + .#{$prefix}--list-box__menu-item
+ > .#{$prefix}--list-box__menu-item__option {
+ border-top-color: transparent;
+ }
+
+ .#{$prefix}--list-box__menu-item__selected-icon {
+ position: absolute;
+ top: 50%;
+ right: rem(16px);
+ display: none;
+ fill: $icon-primary;
+ transform: translateY(-50%);
+ }
+
+ .#{$prefix}--list-box--inline
+ .#{$prefix}--list-box__menu-item__selected-icon {
+ right: rem(8px);
+ }
+
+ .#{$prefix}--list-box__menu-item--active
+ .#{$prefix}--list-box__menu-item__selected-icon {
+ display: block;
+ }
+
+ .#{$prefix}--list-box__menu-item .#{$prefix}--checkbox-label {
+ width: 100%;
+ }
+
+ .#{$prefix}--list-box__menu-item .#{$prefix}--checkbox-label-text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ // Dropdown top orientation modifiers
+ .#{$prefix}--list-box--up .#{$prefix}--list-box__menu {
+ bottom: 2.5rem;
+ }
+
+ .#{$prefix}--list-box--up.#{$prefix}--dropdown--sm
+ .#{$prefix}--list-box__menu,
+ .#{$prefix}--list-box--up.#{$prefix}--list-box--sm
+ .#{$prefix}--list-box__menu,
+ .#{$prefix}--list-box--up
+ .#{$prefix}--list-box--sm
+ .#{$prefix}--list-box__menu {
+ bottom: 2rem;
+ }
+
+ // TODO V11: Remove xl selector
+ .#{$prefix}--list-box--up.#{$prefix}--dropdown--xl
+ .#{$prefix}--list-box__menu,
+ .#{$prefix}--list-box--up.#{$prefix}--list-box--xl
+ .#{$prefix}--list-box__menu,
+ .#{$prefix}--list-box--up.#{$prefix}--dropdown--lg
+ .#{$prefix}--list-box__menu,
+ .#{$prefix}--list-box--up.#{$prefix}--list-box--lg
+ .#{$prefix}--list-box__menu,
+ .#{$prefix}--list-box--up
+ .#{$prefix}--list-box--lg
+ .#{$prefix}--list-box__menu {
+ bottom: 3rem;
+ }
+
+ // Tweaks for descendants
+ // When handling input, we need to target nodes that specifically opt-in to
+ // the type text in order to make sure the text input is styled
+ // correctly.
+ // TODO: remove [role='combobox'] in v11
+ .#{$prefix}--list-box input[role='combobox'],
+ .#{$prefix}--list-box input[type='text'] {
+ min-width: 0;
+ background-color: inherit;
+ }
+
+ // Windows HCM fix
+ .#{$prefix}--list-box__field,
+ .#{$prefix}--list-box__menu,
+ .#{$prefix}--multi-select .#{$prefix}--tag--filter {
+ @include high-contrast-mode('outline');
+ }
+
+ .#{$prefix}--list-box__field:focus,
+ .#{$prefix}--multi-select .#{$prefix}--tag__close-icon:focus,
+ .#{$prefix}--list-box__menu-item--highlighted
+ .#{$prefix}--list-box__menu-item__option {
+ @include high-contrast-mode('focus');
+ }
+
+ .#{$prefix}--list-box__menu-icon > svg,
+ .#{$prefix}--list-box__selection > svg,
+ .#{$prefix}--list-box__selection--multi > svg {
+ @include high-contrast-mode('icon-fill');
+ }
+}
diff --git a/packages/styles/scss/components/multiselect/_index.scss b/packages/styles/scss/components/multiselect/_index.scss
new file mode 100644
index 000000000000..cbeac0ee0bc5
--- /dev/null
+++ b/packages/styles/scss/components/multiselect/_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 'multiselect';
+@use 'multiselect';
+
+@include multiselect.multiselect;
diff --git a/packages/styles/scss/components/multiselect/_multiselect.scss b/packages/styles/scss/components/multiselect/_multiselect.scss
new file mode 100644
index 000000000000..978954ae00f4
--- /dev/null
+++ b/packages/styles/scss/components/multiselect/_multiselect.scss
@@ -0,0 +1,103 @@
+//
+// 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.
+//
+
+@use '../list-box';
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+
+/// Multi select styles
+/// @access public
+/// @group multi-select
+@mixin multiselect {
+ .#{$prefix}--multi-select .#{$prefix}--tag {
+ min-width: auto;
+ margin: 0 $spacing-03 0 0;
+ }
+
+ .#{$prefix}--multi-select--filterable .#{$prefix}--tag {
+ margin: 0 $spacing-03 0 $spacing-05;
+ }
+
+ .#{$prefix}--multi-select .#{$prefix}--list-box__menu {
+ min-width: auto;
+ }
+
+ .#{$prefix}--multi-select
+ .#{$prefix}--list-box__menu-item__option
+ .#{$prefix}--checkbox-wrapper {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ align-items: center;
+ }
+
+ .#{$prefix}--multi-select
+ .#{$prefix}--list-box__menu-item__option
+ .#{$prefix}--checkbox-label {
+ display: inline-block;
+ overflow: hidden;
+ width: 100%;
+ padding-left: rem(28px);
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .#{$prefix}--multi-select
+ .#{$prefix}--list-box__menu-item__option
+ > .#{$prefix}--form-item {
+ flex-direction: row;
+ margin: 0;
+ }
+
+ .#{$prefix}--multi-select
+ .#{$prefix}--list-box__menu-item
+ .#{$prefix}--checkbox:checked
+ ~ .#{$prefix}--checkbox-label-text {
+ color: $text-primary;
+ }
+
+ .#{$prefix}--multi-select--filterable {
+ transition: outline-color $duration-fast-01 motion(standard, productive);
+ }
+
+ .#{$prefix}--multi-select--filterable.#{$prefix}--combo-box
+ .#{$prefix}--text-input {
+ border: rem(2px) solid transparent;
+ background-clip: padding-box;
+ outline: none;
+ }
+
+ .#{$prefix}--multi-select--filterable--input-focused {
+ @include focus-outline('outline');
+ }
+
+ .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--selected
+ .#{$prefix}--text-input {
+ padding-left: 0;
+ }
+
+ .#{$prefix}--multi-select--filterable.#{$prefix}--list-box--disabled:hover
+ .#{$prefix}--text-input {
+ background-color: $field;
+ }
+
+ .#{$prefix}--multi-select--filterable
+ .#{$prefix}--list-box__selection--multi {
+ margin: 0 0 0 $spacing-05;
+ }
+
+ .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--inline,
+ .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--inline
+ .#{$prefix}--text-input {
+ border-bottom: 0;
+ background-color: transparent;
+ }
+}
diff --git a/packages/styles/scss/components/number-input/_number-input.scss b/packages/styles/scss/components/number-input/_number-input.scss
index 5b9d2104cf99..f2e709458ecf 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';
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/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/tag/_index.scss b/packages/styles/scss/components/tag/_index.scss
new file mode 100644
index 000000000000..30e0fc791dbd
--- /dev/null
+++ b/packages/styles/scss/components/tag/_index.scss
@@ -0,0 +1,12 @@
+//
+// 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 'tag';
+@forward 'tokens';
+@use 'tag';
+
+@include tag.tag;
diff --git a/packages/styles/scss/components/tag/_mixins.scss b/packages/styles/scss/components/tag/_mixins.scss
new file mode 100644
index 000000000000..3e292524143d
--- /dev/null
+++ b/packages/styles/scss/components/tag/_mixins.scss
@@ -0,0 +1,21 @@
+//
+// 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.
+//
+@use '../../config' as *;
+
+/// @access private
+/// @group tag
+@mixin tag-theme($bg-color, $text-color, $filter-hover-color: $bg-color) {
+ background-color: $bg-color;
+ color: $text-color;
+
+ &.#{$prefix}--tag--interactive,
+ .#{$prefix}--tag__close-icon {
+ &:hover {
+ background-color: $filter-hover-color;
+ }
+ }
+}
diff --git a/packages/styles/scss/components/tag/_tag.scss b/packages/styles/scss/components/tag/_tag.scss
new file mode 100644
index 000000000000..afae0067527d
--- /dev/null
+++ b/packages/styles/scss/components/tag/_tag.scss
@@ -0,0 +1,268 @@
+//
+// 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.
+//
+
+@use '../../theme' as *;
+@use '../../utilities/button-reset';
+@use '../../type' as *;
+@use '../../motion' as *;
+@use '../../config' as *;
+@use '../../utilities/component-tokens' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/high-contrast-mode' as *;
+@use '../../spacing' as *;
+@use './tokens' as *;
+@use './mixins' as *;
+@use '../../utilities/skeleton';
+
+/// Tag styles
+/// @access public
+/// @group tag
+@mixin tag {
+ .#{$prefix}--tag {
+ @include type-style('label-01');
+ @include tag-theme($tag-background-gray, $tag-color-gray, $tag-hover-gray);
+
+ display: inline-flex;
+ // ensures tag stays pill shaped;
+ min-width: rem(32px);
+ // restricts size of contained elements
+ max-width: 100%;
+ min-height: rem(24px);
+ align-items: center;
+ justify-content: center;
+ padding: $spacing-02 $spacing-03;
+ margin: $spacing-02;
+ border-radius: rem(15px);
+ cursor: default;
+ vertical-align: middle;
+ word-break: break-word;
+
+ &:not(:first-child) {
+ margin-left: 0;
+ }
+ }
+
+ .#{$prefix}--tag--red {
+ @include tag-theme($tag-background-red, $tag-color-red, $tag-hover-red);
+ }
+
+ .#{$prefix}--tag--magenta {
+ @include tag-theme(
+ $tag-background-magenta,
+ $tag-color-magenta,
+ $tag-hover-magenta
+ );
+ }
+
+ .#{$prefix}--tag--purple {
+ @include tag-theme(
+ $tag-background-purple,
+ $tag-color-purple,
+ $tag-hover-purple
+ );
+ }
+
+ .#{$prefix}--tag--blue {
+ @include tag-theme($tag-background-blue, $tag-color-blue, $tag-hover-blue);
+ }
+
+ .#{$prefix}--tag--cyan {
+ @include tag-theme($tag-background-cyan, $tag-color-cyan, $tag-hover-cyan);
+ }
+
+ .#{$prefix}--tag--teal {
+ @include tag-theme($tag-background-teal, $tag-color-teal, $tag-hover-teal);
+ }
+
+ .#{$prefix}--tag--green {
+ @include tag-theme(
+ $tag-background-green,
+ $tag-color-green,
+ $tag-hover-green
+ );
+ }
+
+ .#{$prefix}--tag--gray {
+ @include tag-theme($tag-background-gray, $tag-color-gray, $tag-hover-gray);
+ }
+
+ .#{$prefix}--tag--cool-gray {
+ @include tag-theme(
+ $tag-background-cool-gray,
+ $tag-color-cool-gray,
+ $tag-hover-cool-gray
+ );
+ }
+
+ .#{$prefix}--tag--warm-gray {
+ @include tag-theme(
+ $tag-background-warm-gray,
+ $tag-color-warm-gray,
+ $tag-hover-warm-gray
+ );
+ }
+
+ .#{$prefix}--tag--high-contrast {
+ @include tag-theme(
+ $background-inverse,
+ $text-inverse,
+ $background-inverse-hover
+ );
+ }
+
+ .#{$prefix}--tag--disabled,
+ .#{$prefix}--tag--filter.#{$prefix}--tag--disabled,
+ .#{$prefix}--tag--interactive.#{$prefix}--tag--disabled {
+ @include tag-theme($layer-disabled, $text-disabled);
+
+ &:hover {
+ cursor: not-allowed;
+ }
+ }
+
+ .#{$prefix}--tag__label {
+ overflow: hidden;
+ max-width: 100%;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ .#{$prefix}--tag--interactive:focus {
+ box-shadow: inset 0 0 0 1px $focus;
+ outline: none;
+ }
+
+ .#{$prefix}--tag--interactive:hover {
+ cursor: pointer;
+ }
+
+ // tags used for filtering
+ .#{$prefix}--tag--filter {
+ padding-top: 0;
+ padding-right: 0;
+ padding-bottom: 0;
+ cursor: pointer;
+
+ &:hover {
+ outline: none;
+ }
+ }
+
+ .#{$prefix}--tag--interactive {
+ transition: background-color $duration-fast-01 motion(entrance, productive);
+ }
+
+ .#{$prefix}--tag__close-icon {
+ display: flex;
+ width: rem(24px);
+ height: rem(24px);
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: center;
+ padding: 0;
+ border: 0;
+ margin: 0 0 0 rem(2px);
+ background-color: transparent;
+ border-radius: 50%;
+ color: currentColor;
+ cursor: pointer;
+ transition: background-color $duration-fast-01 motion(standard, productive),
+ box-shadow $duration-fast-01 motion(standard, productive);
+ svg {
+ fill: currentColor;
+ }
+ }
+
+ .#{$prefix}--tag__custom-icon {
+ width: rem(16px);
+ height: rem(16px);
+ flex-shrink: 0;
+ padding: 0;
+ border: 0;
+ margin-right: $spacing-02;
+ background-color: transparent;
+ color: currentColor;
+ outline: none;
+
+ svg {
+ fill: currentColor;
+ }
+ }
+
+ .#{$prefix}--tag--disabled .#{$prefix}--tag__close-icon {
+ cursor: not-allowed;
+ }
+
+ .#{$prefix}--tag__close-icon:focus {
+ border-radius: 50%;
+ box-shadow: inset 0 0 0 1px $focus;
+ outline: none;
+ }
+
+ .#{$prefix}--tag--high-contrast .#{$prefix}--tag__close-icon:focus {
+ box-shadow: inset 0 0 0 1px $focus-inverse;
+ }
+
+ .#{$prefix}--tag--filter.#{$prefix}--tag--disabled
+ .#{$prefix}--tag__close-icon:hover {
+ background-color: transparent;
+ }
+
+ .#{$prefix}--tag--filter.#{$prefix}--tag--disabled svg {
+ fill: $icon-disabled;
+ }
+
+ // small tags
+ .#{$prefix}--tag--sm {
+ min-height: rem(18px);
+ padding: 0 $spacing-03;
+ }
+
+ .#{$prefix}--tag--sm.#{$prefix}--tag--filter {
+ padding-right: 0;
+ }
+
+ .#{$prefix}--tag--sm .#{$prefix}--tag__close-icon {
+ width: rem(18px);
+ height: rem(18px);
+ margin-left: rem(5px);
+ }
+
+ // Skeleton state
+ .#{$prefix}--tag.#{$prefix}--skeleton {
+ @include tag-theme(
+ $bg-color: $skeleton-background,
+ $text-color: $text-primary
+ );
+
+ overflow: hidden;
+ width: rem(60px);
+
+ // Safari specific bug (#7672)
+ @media not all and (min-resolution: 0.001dpcm) {
+ @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+ transform: translateZ(0);
+ }
+ }
+ }
+
+ // Windows HCM fix
+ /* stylelint-disable */
+ .#{$prefix}--tag {
+ @include high-contrast-mode('outline');
+ }
+
+ .#{$prefix}--tag__close-icon svg,
+ .#{$prefix}--tag__custom-icon svg {
+ @include high-contrast-mode('icon-fill');
+ }
+
+ .#{$prefix}--tag__close-icon:focus {
+ @include high-contrast-mode('focus');
+ }
+ /* stylelint-enable */
+}
diff --git a/packages/styles/scss/components/tag/_tokens.scss b/packages/styles/scss/components/tag/_tokens.scss
new file mode 100644
index 000000000000..af569318c252
--- /dev/null
+++ b/packages/styles/scss/components/tag/_tokens.scss
@@ -0,0 +1,702 @@
+//
+// Copyright IBM Corp. 2020
+//
+// 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 'sass:color';
+@use '../../colors';
+@use '../../theme' as *;
+@use '../../themes';
+@use '../../utilities/component-tokens';
+@use '../../utilities/custom-property';
+
+// prettier-ignore
+$-tokens: (
+ // red
+ 'tag-background-red': (
+ fallback: colors.$red-20,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$red-20,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$red-20,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$red-80,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$red-80,
+ ),
+ ),
+ ),
+ 'tag-color-red': (
+ fallback: colors.$red-80,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$red-80,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$red-80,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$red-30,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$red-30,
+ ),
+ ),
+ ),
+ 'tag-hover-red': (
+ fallback: colors.$red-30,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$red-30,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$red-30,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$red-70,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$red-70,
+ ),
+ ),
+ ),
+
+ // magenta
+ 'tag-background-magenta': (
+ fallback: colors.$magenta-20,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$magenta-20,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$magenta-20,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$magenta-80,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$magenta-80,
+ ),
+ ),
+ ),
+ 'tag-color-magenta': (
+ fallback: colors.$magenta-80,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$magenta-80,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$magenta-80,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$magenta-30,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$magenta-30,
+ ),
+ ),
+ ),
+ 'tag-hover-magenta': (
+ fallback: colors.$magenta-30,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$magenta-30,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$magenta-30,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$magenta-70,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$magenta-70,
+ ),
+ ),
+ ),
+
+ // purple
+ 'tag-background-purple': (
+ fallback: colors.$purple-20,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$purple-20,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$purple-20,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$purple-80,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$purple-80,
+ ),
+ ),
+ ),
+ 'tag-color-purple': (
+ fallback: colors.$purple-80,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$purple-80,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$purple-80,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$purple-30,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$purple-30,
+ ),
+ ),
+ ),
+ 'tag-hover-purple': (
+ fallback: colors.$purple-30,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$purple-30,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$purple-30,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$purple-70,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$purple-70,
+ ),
+ ),
+ ),
+
+ // blue
+ 'tag-background-blue': (
+ fallback: colors.$blue-20,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$blue-20,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$blue-20,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$blue-80,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$blue-80,
+ ),
+ ),
+ ),
+ 'tag-color-blue': (
+ fallback: colors.$blue-80,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$blue-80,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$blue-80,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$blue-30,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$blue-30,
+ ),
+ ),
+ ),
+ 'tag-hover-blue': (
+ fallback: colors.$blue-30,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$blue-30,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$blue-30,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$blue-70,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$blue-70,
+ ),
+ ),
+ ),
+
+ // cyan
+ 'tag-background-cyan': (
+ fallback: colors.$cyan-20,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$cyan-20,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$cyan-20,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$cyan-80,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$cyan-80,
+ ),
+ ),
+ ),
+ 'tag-color-cyan': (
+ fallback: colors.$cyan-80,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$cyan-80,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$cyan-80,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$cyan-30,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$cyan-30,
+ ),
+ ),
+ ),
+ 'tag-hover-cyan': (
+ fallback: colors.$cyan-30,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$cyan-30,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$cyan-30,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$cyan-70,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$cyan-70,
+ ),
+ ),
+ ),
+
+ // teal
+ 'tag-background-teal': (
+ fallback: colors.$teal-20,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$teal-20,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$teal-20,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$teal-80,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$teal-80,
+ ),
+ ),
+ ),
+ 'tag-color-teal': (
+ fallback: colors.$teal-80,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$teal-80,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$teal-80,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$teal-30,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$teal-30,
+ ),
+ ),
+ ),
+ 'tag-hover-teal': (
+ fallback: colors.$teal-30,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$teal-30,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$teal-30,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$teal-70,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$teal-70,
+ ),
+ ),
+ ),
+
+ // green
+ 'tag-background-green': (
+ fallback: colors.$green-20,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$green-20,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$green-20,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$green-80,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$green-80,
+ ),
+ ),
+ ),
+ 'tag-color-green': (
+ fallback: colors.$green-80,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$green-80,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$green-80,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$green-30,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$green-30,
+ ),
+ ),
+ ),
+ 'tag-hover-green': (
+ fallback: colors.$green-30,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$green-30,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$green-30,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$green-70,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$green-70,
+ ),
+ ),
+ ),
+
+ // gray
+ 'tag-background-gray': (
+ fallback: colors.$gray-20,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$gray-20,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$gray-20,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$gray-80,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$gray-80,
+ ),
+ ),
+ ),
+ 'tag-color-gray': (
+ fallback: colors.$gray-80,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$gray-80,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$gray-80,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$gray-30,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$gray-30,
+ ),
+ ),
+ ),
+ 'tag-hover-gray': (
+ fallback: colors.$gray-30,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$gray-30,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$gray-30,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$gray-70,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$gray-70,
+ ),
+ ),
+ ),
+
+ // cool-gray
+ 'tag-background-cool-gray': (
+ fallback: colors.$cool-gray-20,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$cool-gray-20,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$cool-gray-20,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$cool-gray-80,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$cool-gray-80,
+ ),
+ ),
+ ),
+ 'tag-color-cool-gray': (
+ fallback: colors.$cool-gray-80,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$cool-gray-80,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$cool-gray-80,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$cool-gray-30,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$cool-gray-30,
+ ),
+ ),
+ ),
+ 'tag-hover-cool-gray': (
+ fallback: colors.$cool-gray-30,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$cool-gray-30,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$cool-gray-30,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$cool-gray-70,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$cool-gray-70,
+ ),
+ ),
+ ),
+
+ // warm-gray
+ 'tag-background-warm-gray': (
+ fallback: colors.$warm-gray-20,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$warm-gray-20,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$warm-gray-20,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$warm-gray-80,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$warm-gray-80,
+ ),
+ ),
+ ),
+ 'tag-color-warm-gray': (
+ fallback: colors.$warm-gray-80,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$warm-gray-80,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$warm-gray-80,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$warm-gray-30,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$warm-gray-30,
+ ),
+ ),
+ ),
+ 'tag-hover-warm-gray': (
+ fallback: colors.$warm-gray-30,
+ values: (
+ (
+ theme: themes.$white,
+ value: colors.$warm-gray-30,
+ ),
+ (
+ theme: themes.$g10,
+ value: colors.$warm-gray-30,
+ ),
+ (
+ theme: themes.$g90,
+ value: colors.$warm-gray-70,
+ ),
+ (
+ theme: themes.$g100,
+ value: colors.$warm-gray-70,
+ ),
+ ),
+ ),
+);
+
+$tag-background-red: custom-property.get-var('tag-background-red');
+$tag-color-red: custom-property.get-var('tag-color-red');
+$tag-hover-red: custom-property.get-var('tag-hover-red');
+$tag-background-magenta: custom-property.get-var('tag-background-magenta');
+$tag-color-magenta: custom-property.get-var('tag-color-magenta');
+$tag-hover-magenta: custom-property.get-var('tag-hover-magenta');
+$tag-background-purple: custom-property.get-var('tag-background-purple');
+$tag-color-purple: custom-property.get-var('tag-color-purple');
+$tag-hover-purple: custom-property.get-var('tag-hover-purple');
+$tag-background-blue: custom-property.get-var('tag-background-blue');
+$tag-color-blue: custom-property.get-var('tag-color-blue');
+$tag-hover-blue: custom-property.get-var('tag-hover-blue');
+$tag-background-cyan: custom-property.get-var('tag-background-cyan');
+$tag-color-cyan: custom-property.get-var('tag-color-cyan');
+$tag-hover-cyan: custom-property.get-var('tag-hover-cyan');
+$tag-background-teal: custom-property.get-var('tag-background-teal');
+$tag-color-teal: custom-property.get-var('tag-color-teal');
+$tag-hover-teal: custom-property.get-var('tag-hover-teal');
+$tag-background-green: custom-property.get-var('tag-background-green');
+$tag-color-green: custom-property.get-var('tag-color-green');
+$tag-hover-green: custom-property.get-var('tag-hover-green');
+$tag-background-gray: custom-property.get-var('tag-background-gray');
+$tag-color-gray: custom-property.get-var('tag-color-gray');
+$tag-hover-gray: custom-property.get-var('tag-hover-gray');
+$tag-background-cool-gray: custom-property.get-var('tag-background-cool-gray');
+$tag-color-cool-gray: custom-property.get-var('tag-color-cool-gray');
+$tag-hover-cool-gray: custom-property.get-var('tag-color-cool-gray');
+$tag-background-warm-gray: custom-property.get-var('tag-background-warm-gray');
+$tag-color-warm-gray: custom-property.get-var('tag-color-warm-gray');
+$tag-hover-warm-gray: custom-property.get-var('tag-hover-warm-gray');
+
+$white: component-tokens.get-tokens($-tokens, themes.$white);
+$g10: component-tokens.get-tokens($-tokens, themes.$g10);
+$g90: component-tokens.get-tokens($-tokens, themes.$g90);
+$g100: component-tokens.get-tokens($-tokens, themes.$g100);
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/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 a50bc57f0aa4..2d917befe727 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1792,10 +1792,14 @@ __metadata:
version: 0.0.0-use.local
resolution: "@carbon/feature-flags@workspace:packages/feature-flags"
dependencies:
+ "@babel/core": ^7.14.6
"@babel/generator": ^7.14.5
+ "@babel/preset-env": ^7.14.7
"@babel/template": ^7.14.5
"@babel/types": ^7.14.5
"@carbon/scss-generator": ^10.13.0
+ "@rollup/plugin-babel": ^5.3.0
+ "@rollup/plugin-node-resolve": ^13.0.0
change-case: ^4.1.2
fs-extra: ^9.0.1
js-yaml: ^3.14.0
@@ -2347,18 +2351,6 @@ __metadata:
languageName: node
linkType: hard
-"@cypress/listr-verbose-renderer@npm:^0.4.1":
- version: 0.4.1
- resolution: "@cypress/listr-verbose-renderer@npm:0.4.1"
- dependencies:
- chalk: ^1.1.3
- cli-cursor: ^1.0.2
- date-fns: ^1.27.2
- figures: ^1.7.0
- checksum: 0169c2b30fd4623a7b2ff8354fe72583fbecc774f36321cd45bb84fb30859426093cb298f95ab71cae707792dc04fe2fa77cd57e66cfbdba9c8006b6b888c4a3
- languageName: node
- linkType: hard
-
"@cypress/mount-utils@npm:1.0.1":
version: 1.0.1
resolution: "@cypress/mount-utils@npm:1.0.1"
@@ -2632,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
@@ -4674,6 +4666,22 @@ __metadata:
languageName: node
linkType: hard
+"@rollup/plugin-node-resolve@npm:^13.0.0":
+ version: 13.0.0
+ resolution: "@rollup/plugin-node-resolve@npm:13.0.0"
+ dependencies:
+ "@rollup/pluginutils": ^3.1.0
+ "@types/resolve": 1.17.1
+ builtin-modules: ^3.1.0
+ deepmerge: ^4.2.2
+ is-module: ^1.0.0
+ resolve: ^1.19.0
+ peerDependencies:
+ rollup: ^2.42.0
+ checksum: c0237e65f50d593efc176e07a2ddf734918bc7344f739fe2254a3bfaa4be37c6d4787d045ab79d741811d3658f7e8bbb1484e6aa25bbb9fe2a3c33472b3f371d
+ languageName: node
+ linkType: hard
+
"@rollup/plugin-replace@npm:^2.4.2":
version: 2.4.2
resolution: "@rollup/plugin-replace@npm:2.4.2"
@@ -7894,7 +7902,7 @@ __metadata:
languageName: node
linkType: hard
-"ansi-escapes@npm:^4.2.1, ansi-escapes@npm:^4.3.1":
+"ansi-escapes@npm:^4.2.1, ansi-escapes@npm:^4.3.0, ansi-escapes@npm:^4.3.1":
version: 4.3.2
resolution: "ansi-escapes@npm:4.3.2"
dependencies:
@@ -10342,7 +10350,7 @@ __metadata:
core-js: ^3.6.5
cross-env: ^5.2.0
css-loader: ^3.4.2
- cypress: ^7.2.0
+ cypress: ^8.0.0
cypress-real-events: ^1.3.0
downshift: 5.2.1
fast-sass-loader: ^1.5.0
@@ -11135,6 +11143,16 @@ __metadata:
languageName: node
linkType: hard
+"cli-truncate@npm:^2.1.0":
+ version: 2.1.0
+ resolution: "cli-truncate@npm:2.1.0"
+ dependencies:
+ slice-ansi: ^3.0.0
+ string-width: ^4.2.0
+ checksum: bf1e4e6195392dc718bf9cd71f317b6300dc4a9191d052f31046b8773230ece4fa09458813bf0e3455a5e68c0690d2ea2c197d14a8b85a7b5e01c97f4b5feb5d
+ languageName: node
+ linkType: hard
+
"cli-width@npm:^1.0.1":
version: 1.1.1
resolution: "cli-width@npm:1.1.1"
@@ -11574,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
@@ -12586,11 +12604,10 @@ __metadata:
languageName: node
linkType: hard
-"cypress@npm:^7.2.0":
- version: 7.2.0
- resolution: "cypress@npm:7.2.0"
+"cypress@npm:^8.0.0":
+ version: 8.0.0
+ resolution: "cypress@npm:8.0.0"
dependencies:
- "@cypress/listr-verbose-renderer": ^0.4.1
"@cypress/request": ^2.88.5
"@cypress/xvfb": ^1.2.4
"@types/node": ^14.14.31
@@ -12602,21 +12619,24 @@ __metadata:
cachedir: ^2.3.0
chalk: ^4.1.0
check-more-types: ^2.24.0
+ cli-cursor: ^3.1.0
cli-table3: ~0.6.0
commander: ^5.1.0
common-tags: ^1.8.0
dayjs: ^1.10.4
- debug: 4.3.2
+ debug: ^4.3.2
+ enquirer: ^2.3.6
eventemitter2: ^6.4.3
execa: 4.1.0
executable: ^4.1.1
- extract-zip: ^1.7.0
+ extract-zip: 2.0.1
+ figures: ^3.2.0
fs-extra: ^9.1.0
getos: ^3.2.1
is-ci: ^3.0.0
is-installed-globally: ~0.4.0
lazy-ass: ^1.6.0
- listr: ^0.14.3
+ listr2: ^3.8.3
lodash: ^4.17.21
log-symbols: ^4.0.0
minimist: ^1.2.5
@@ -12631,7 +12651,7 @@ __metadata:
yauzl: ^2.10.0
bin:
cypress: bin/cypress
- checksum: f2b66f1368893e9c6761fddd5823ea85a8e3110744282e41171a616a262a2f689e113978ce41b2166a7dca503f3aec53f33151e78e300d30c38050a3514756f3
+ checksum: 6f8444843de84fddca64d2dc09b20bad16edd578b61b830db9038793c0a8bf363b187abd9e35c55d1f12f76d7abb5adcc85a03d1556ff4178faa72d1a6a184e1
languageName: node
linkType: hard
@@ -12763,7 +12783,7 @@ __metadata:
languageName: node
linkType: hard
-"debug@npm:4, debug@npm:4.3.2, debug@npm:^4.0.0, debug@npm:^4.0.1, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1":
+"debug@npm:4, debug@npm:4.3.2, debug@npm:^4.0.0, debug@npm:^4.0.1, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2":
version: 4.3.2
resolution: "debug@npm:4.3.2"
dependencies:
@@ -14672,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
@@ -14766,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
@@ -14781,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
@@ -15511,21 +15531,7 @@ __metadata:
languageName: node
linkType: hard
-"extract-zip@npm:^1.6.6, extract-zip@npm:^1.6.7, extract-zip@npm:^1.7.0":
- version: 1.7.0
- resolution: "extract-zip@npm:1.7.0"
- dependencies:
- concat-stream: ^1.6.2
- debug: ^2.6.9
- mkdirp: ^0.5.4
- yauzl: ^2.10.0
- bin:
- extract-zip: cli.js
- checksum: 011bab660d738614555773d381a6ba4815d98c1cfcdcdf027e154ebcc9fc8c9ef637b3ea5c9b2144013100071ee41722ed041fc9aacc60f6198ef747cac0c073
- languageName: node
- linkType: hard
-
-"extract-zip@npm:^2.0.0, extract-zip@npm:^2.0.1":
+"extract-zip@npm:2.0.1, extract-zip@npm:^2.0.0, extract-zip@npm:^2.0.1":
version: 2.0.1
resolution: "extract-zip@npm:2.0.1"
dependencies:
@@ -15542,6 +15548,20 @@ __metadata:
languageName: node
linkType: hard
+"extract-zip@npm:^1.6.6, extract-zip@npm:^1.6.7":
+ version: 1.7.0
+ resolution: "extract-zip@npm:1.7.0"
+ dependencies:
+ concat-stream: ^1.6.2
+ debug: ^2.6.9
+ mkdirp: ^0.5.4
+ yauzl: ^2.10.0
+ bin:
+ extract-zip: cli.js
+ checksum: 011bab660d738614555773d381a6ba4815d98c1cfcdcdf027e154ebcc9fc8c9ef637b3ea5c9b2144013100071ee41722ed041fc9aacc60f6198ef747cac0c073
+ languageName: node
+ linkType: hard
+
"extsprintf@npm:1.3.0":
version: 1.3.0
resolution: "extsprintf@npm:1.3.0"
@@ -15780,12 +15800,12 @@ __metadata:
languageName: node
linkType: hard
-"figures@npm:^3.0.0":
- version: 3.1.0
- resolution: "figures@npm:3.1.0"
+"figures@npm:^3.0.0, figures@npm:^3.2.0":
+ version: 3.2.0
+ resolution: "figures@npm:3.2.0"
dependencies:
escape-string-regexp: ^1.0.5
- checksum: fcd7999c8328a939ae1b6b190701e4cbbe34a91968034df453ff0296dfcaa844d01561cb20253fb2f3fa64adcdf63f4c93420ff25cfbacc872a776c5ea739b68
+ checksum: 85a6ad29e9aca80b49b817e7c89ecc4716ff14e3779d9835af554db91bac41c0f289c418923519392a1e582b4d10482ad282021330cd045bb7b80c84152f2a2b
languageName: node
linkType: hard
@@ -21171,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
@@ -22158,6 +22178,23 @@ __metadata:
languageName: node
linkType: hard
+"listr2@npm:^3.8.3":
+ version: 3.10.0
+ resolution: "listr2@npm:3.10.0"
+ dependencies:
+ cli-truncate: ^2.1.0
+ colorette: ^1.2.2
+ log-update: ^4.0.0
+ p-map: ^4.0.0
+ rxjs: ^6.6.7
+ through: ^2.3.8
+ wrap-ansi: ^7.0.0
+ peerDependencies:
+ enquirer: ">= 2.3.0 < 3"
+ checksum: 9dc1a896972462642fe55817b946174b4f6d067cfe1d9a323517e235ed745773526797f20ef65b346d244356690f929c763d06243e511c4ba6abdcffeb009efc
+ languageName: node
+ linkType: hard
+
"listr@npm:0.14.3, listr@npm:^0.14.3":
version: 0.14.3
resolution: "listr@npm:0.14.3"
@@ -22789,6 +22826,18 @@ __metadata:
languageName: node
linkType: hard
+"log-update@npm:^4.0.0":
+ version: 4.0.0
+ resolution: "log-update@npm:4.0.0"
+ dependencies:
+ ansi-escapes: ^4.3.0
+ cli-cursor: ^3.1.0
+ slice-ansi: ^4.0.0
+ wrap-ansi: ^6.2.0
+ checksum: ae2f85bbabc1906034154fb7d4c4477c79b3e703d22d78adee8b3862fa913942772e7fa11713e3d96fb46de4e3cabefbf5d0a544344f03b58d3c4bff52aa9eb2
+ languageName: node
+ linkType: hard
+
"log-utils@npm:^0.2.1":
version: 0.2.1
resolution: "log-utils@npm:0.2.1"
@@ -29566,7 +29615,7 @@ resolve@^2.0.0-next.3:
languageName: node
linkType: hard
-"rxjs@npm:^6.3.3, rxjs@npm:^6.4.0, rxjs@npm:^6.6.0, rxjs@npm:^6.6.6":
+"rxjs@npm:^6.3.3, rxjs@npm:^6.4.0, rxjs@npm:^6.6.0, rxjs@npm:^6.6.6, rxjs@npm:^6.6.7":
version: 6.6.7
resolution: "rxjs@npm:6.6.7"
dependencies:
@@ -30540,6 +30589,17 @@ resolve@^2.0.0-next.3:
languageName: node
linkType: hard
+"slice-ansi@npm:^3.0.0":
+ version: 3.0.0
+ resolution: "slice-ansi@npm:3.0.0"
+ dependencies:
+ ansi-styles: ^4.0.0
+ astral-regex: ^2.0.0
+ is-fullwidth-code-point: ^3.0.0
+ checksum: 5ec6d022d12e016347e9e3e98a7eb2a592213a43a65f1b61b74d2c78288da0aded781f665807a9f3876b9daa9ad94f64f77d7633a0458876c3a4fdc4eb223f24
+ languageName: node
+ linkType: hard
+
"slice-ansi@npm:^4.0.0":
version: 4.0.0
resolution: "slice-ansi@npm:4.0.0"