diff --git a/packages/carbon-react/.storybook/styles.scss b/packages/carbon-react/.storybook/styles.scss
index 57ceb93e2e68..cb2c6a9b733c 100644
--- a/packages/carbon-react/.storybook/styles.scss
+++ b/packages/carbon-react/.storybook/styles.scss
@@ -15,6 +15,7 @@ $feature-flags: (
@use '../index.scss' as styles;
@use '../scss/components/button';
+@use '../scss/components/tag';
// For now, including all weights for testing
@include arabic.all;
@@ -22,19 +23,19 @@ $feature-flags: (
@include mono.all;
:root {
- @include styles.theme(styles.$white, button.$white);
+ @include styles.theme(styles.$white, button.$white, tag.$white);
}
[data-carbon-theme='g10'] {
- @include styles.theme(styles.$g10, button.$g10);
+ @include styles.theme(styles.$g10, button.$g10, tag.$g10);
}
[data-carbon-theme='g90'] {
- @include styles.theme(styles.$g90, button.$g90);
+ @include styles.theme(styles.$g90, button.$g90, tag.$g90);
}
[data-carbon-theme='g100'] {
- @include styles.theme(styles.$g100, button.$g100);
+ @include styles.theme(styles.$g100, button.$g100, tag.$g100);
}
html[lang='en'] body {
diff --git a/packages/carbon-react/scss/components/_tag.scss b/packages/carbon-react/scss/components/_tag.scss
new file mode 100644
index 000000000000..eb889113ae5a
--- /dev/null
+++ b/packages/carbon-react/scss/components/_tag.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/styles/scss/components/tag';
diff --git a/packages/carbon-react/src/components/Tag/Tag.stories.js b/packages/carbon-react/src/components/Tag/Tag.stories.js
new file mode 100644
index 000000000000..210cb6c976b6
--- /dev/null
+++ b/packages/carbon-react/src/components/Tag/Tag.stories.js
@@ -0,0 +1,47 @@
+/**
+ * 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 React from 'react';
+import { Tag } from 'carbon-components-react';
+
+export default {
+ title: 'Components/Tag',
+ parameters: {
+ component: Tag,
+ },
+};
+
+export const Default = () => {
+ return (
+ <>
+
+ {'Tag content'}
+
+
+ {'Tag content'}
+
+
+ {'Tag content'}
+
+
+ {'Tag content'}
+
+
+ {'Tag content'}
+
+
+ {'Tag content'}
+
+
+ {'Tag content'}
+
+
+ {'Tag content'}
+
+
+ );
+};
diff --git a/packages/carbon-react/src/components/Tag/index.js b/packages/carbon-react/src/components/Tag/index.js
new file mode 100644
index 000000000000..5cf3e720b86f
--- /dev/null
+++ b/packages/carbon-react/src/components/Tag/index.js
@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { Tag } from 'carbon-components-react';
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..e775bf6ac8e7 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';
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);