@lumx/react 3.9.5 → 3.9.6-alpha.0

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.9.5",
-        "@lumx/icons": "^3.9.5",
+        "@lumx/core": "^3.9.6-alpha.0",
+        "@lumx/icons": "^3.9.6-alpha.0",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -111,5 +111,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.9.5"
+    "version": "3.9.6-alpha.0"
 }

package/src/components/button/Button.stories.tsx

@@ -1,29 +1,53 @@
 import React from 'react';
-import { Button, ButtonSize, Emphasis, Size, Text } from '@lumx/react';
+import omit from 'lodash/omit';
+import pick from 'lodash/pick';
+
+import { Button, ButtonSize, Emphasis, GridColumn, Size, Text, Theme } from '@lumx/react';
+import { mdiAccountBox } from '@lumx/icons';
+
 import { iconArgType } from '@lumx/react/stories/controls/icons';
 import { colorArgType } from '@lumx/react/stories/controls/color';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
-import { mdiAccountBox } from '@lumx/icons';
+import { disableArgTypes } from '@lumx/react/stories/utils/disableArgTypes';
+import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
+import { loremIpsum } from '@lumx/react/stories/utils/lorem';
+import { withThemedBackground } from '@lumx/react/stories/decorators/withThemedBackground';
+import { withTheming } from '@lumx/react/stories/utils/theming';
+import { DESIGN_TOKENS } from '@lumx/core/js/constants/design-tokens';
 
 const buttonSizes = [Size.m, Size.s];
-const buttonEmphasis = [Emphasis.low, Emphasis.medium, Emphasis.high];
+const buttonEmphasis = [Emphasis.high, Emphasis.medium, Emphasis.low];
+
+// Combination of props that should be avoided
+const excludeCombination = ({ isSelected, emphasis, hasBackground }: any) => {
+    // isSelected is only supported in medium emphasis
+    if (isSelected && emphasis && emphasis !== 'medium') return true;
+    // hasBackground is only supported in low emphasis
+    if (hasBackground && emphasis && emphasis !== 'low') return true;
+    return false;
+};
 
 export default {
     title: 'LumX components/button/Button',
     component: Button,
     argTypes: {
-        isSelected: { control: 'boolean' },
+        isSelected: { control: 'boolean', if: { arg: 'emphasis', eq: 'medium' } },
         isDisabled: { control: 'boolean' },
-        hasBackground: { control: 'boolean' },
+        hasBackground: { control: 'boolean', if: { arg: 'emphasis', eq: 'low' } },
         emphasis: getSelectArgType(buttonEmphasis),
         size: getSelectArgType<ButtonSize>(buttonSizes),
         rightIcon: iconArgType,
         leftIcon: iconArgType,
         color: colorArgType,
-        onClick: { action: true },
+        ref: { table: { disable: true } },
+        onClick: { action: true, table: { disable: true } },
+        linkAs: { table: { disable: true } },
+        className: { table: { disable: true } },
+        target: { if: { arg: 'href', exists: true }, control: { type: 'inline-radio' } },
+        type: { if: { arg: 'href', exists: false }, control: { type: 'inline-radio' } },
     },
-    args: Button.defaultProps,
+    args: omit(Button.defaultProps, ['theme']),
 };
 
 /**
@@ -36,35 +60,27 @@ export const Default = {
 };
 
 /**
- * Disabled button
- */
-export const Disabled = {
-    args: {
-        isDisabled: true,
-        children: 'Default button (disabled)',
-    },
-};
-
-/**
- * All combinations of size, emphasis and hasBackground
+ * All combinations of size and emphasis
  */
-export const SizeEmphasisAndBackground = {
+export const SizeAndEmphasis = {
     args: {
         children: 'Button',
     },
+    argTypes: {
+        // Disable props that are used in the combinations
+        ...disableArgTypes(['emphasis', 'size']),
+    },
     decorators: [
+        withThemedBackground(),
         withCombinations({
-            tableStyle: { background: 'lightgray' },
             cellStyle: { padding: '10px' },
             combinations: {
+                sections: { key: 'theme', options: Object.values(Theme) },
                 rows: { medium: { size: Size.m }, small: { size: Size.s } },
                 cols: { key: 'emphasis', options: buttonEmphasis },
-                sections: {
-                    'hasBackground: false': { hasBackground: false },
-                    'hasBackground: true': { hasBackground: true },
-                },
             },
         }),
+        withWrapper({ maxColumns: 3, itemMinWidth: 350 }, GridColumn),
     ],
 };
 
@@ -76,62 +92,75 @@ export const LinkButton = {
         href: 'https://example.com',
         children: 'Link button',
     },
+    decorators: [
+        withCombinations({
+            combinations: {
+                cols: {
+                    Default: {},
+                    Disabled: { isDisabled: true },
+                },
+            },
+        }),
+    ],
 };
 
 /**
- * Setting a href to transform the button into a link.
- */
-export const LinkButtonDisabled = {
-    args: {
-        href: 'https://example.com',
-        children: 'Link button (disabled)',
-        isDisabled: true,
-    },
-};
-
-/**
- * Full width button
- */
-export const FullWidth = {
-    args: {
-        fullWidth: true,
-        children: 'Full width button',
-    },
-};
-
-/**
- * Full width button with long text truncated
+ * Demo content sizing
  */
-export const FullWidthTruncated = {
-    argTypes: {
-        children: { control: false },
-    },
-    args: {
-        fullWidth: true,
-        children: (
-            <Text as="span" truncate>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-                dolore magna aliqua. Potenti nullam ac tortor vitae. Lorem ipsum dolor sit amet. Diam sollicitudin
-                tempor id eu nisl nunc mi ipsum. Elementum facilisis leo vel fringilla est ullamcorper eget nulla.
-                Mollis aliquam ut porttitor leo a diam sollicitudin tempor. Ultrices tincidunt arcu non sodales neque
-                sodales.
-            </Text>
-        ),
-    },
+export const ContentSizing = {
+    decorators: [
+        withCombinations({
+            colStyle: { width: '50%' },
+            cellStyle: { maxWidth: '400px', overflow: 'hidden' },
+            combinations: {
+                rows: {
+                    Default: {},
+                    FullWidth: { fullWidth: true },
+                },
+                cols: {
+                    'Short text': {
+                        children: 'Short text',
+                    },
+                    'Long text': {
+                        children: (
+                            <Text as="span" truncate>
+                                {loremIpsum('long')}
+                            </Text>
+                        ),
+                    },
+                },
+            },
+        }),
+    ],
 };
 
 /**
  * Check button style variations (color, states, emphasis, etc.)
  */
-export const ButtonVariations = {
+export const StateVariations = {
     args: {
         children: 'Button',
         rightIcon: mdiAccountBox,
     },
+    argTypes: {
+        ...disableArgTypes([
+            'emphasis',
+            'hasBackground',
+            'isSelected',
+            'isDisabled',
+            'color',
+            'fullWidth',
+            'type',
+            'name',
+            'href',
+        ]),
+    },
     decorators: [
+        withThemedBackground(),
         withCombinations({
-            tableStyle: { background: 'lightgray', width: '100%' },
+            tableStyle: { width: '100%' },
             firstColStyle: { whiteSpace: 'nowrap', width: '1%' },
+            excludeCombination,
             combinations: {
                 // Colors
                 rows: {
@@ -139,14 +168,15 @@ export const ButtonVariations = {
                     'Color: red': { color: 'red' },
                     'Theme: dark': { theme: 'dark' },
                     'Theme: dark & color: green': { theme: 'dark', color: 'green' },
+                    Selected: { isSelected: true },
+                    'Selected & theme dark': { isSelected: true, theme: 'dark' },
                 },
                 // States
                 cols: {
                     'Default state': {},
-                    Selected: { isSelected: true },
                     Hovered: { isHovered: true },
-                    Focused: { isFocused: true },
                     Active: { isActive: true },
+                    Focused: { isFocused: true },
                     Disabled: { isDisabled: true },
                 },
                 // Emphasis/Background
@@ -155,10 +185,169 @@ export const ButtonVariations = {
                     'Emphasis medium': { emphasis: 'medium' },
                     'Emphasis low': { emphasis: 'low' },
                     'Full width': { fullWidth: true },
-                    'Has background (emphasis low)': { emphasis: 'low', hasBackground: true },
-                    'Has background + Full width': { emphasis: 'low', hasBackground: true, fullWidth: true },
+                    'Emphasis low + has background': { emphasis: 'low', hasBackground: true },
                 },
             },
         }),
     ],
 };
+
+/**
+ * Demo button LumX CSS theming variable
+ */
+export const Theming = {
+    args: { children: 'Label' },
+    argTypes: {
+        ...disableArgTypes(['isDisabled', 'href', 'name', 'type', 'emphasis']),
+    },
+    decorators: [
+        withThemedBackground(),
+        withCombinations({
+            excludeCombination,
+            combinations: {
+                // States
+                cols: {
+                    Default: {},
+                    Hovered: { isHovered: true },
+                    Active: { isActive: true },
+                    Focused: { isFocused: true },
+                    Disabled: { isDisabled: true },
+                },
+                rows: {
+                    Default: {},
+                    Selected: { isSelected: true },
+                    'Has background': { hasBackground: true },
+                },
+            },
+        }),
+        withTheming({
+            properties: pick(DESIGN_TOKENS, ['button']),
+            values: `
+            --lumx-button-height: 50px;
+            --lumx-button-border-radius: 2px;
+
+            /////////////
+            --lumx-button-emphasis-high-state-default-padding-horizontal: 10px;
+            --lumx-button-emphasis-high-state-default-border-width: 2px;
+            --lumx-button-emphasis-high-state-hover-padding-horizontal: 15px;
+            --lumx-button-emphasis-high-state-hover-border-width: 4px;
+            --lumx-button-emphasis-high-state-active-padding-horizontal: 20px;
+            --lumx-button-emphasis-high-state-active-border-width: 6px;
+
+            --lumx-button-emphasis-high-state-default-theme-light-background-color: darkred;
+            --lumx-button-emphasis-high-state-default-theme-light-color: green;
+            --lumx-button-emphasis-high-state-default-theme-light-border-color: green;
+            --lumx-button-emphasis-high-state-hover-theme-light-background-color: rebeccapurple;
+            --lumx-button-emphasis-high-state-hover-theme-light-color: yellow;
+            --lumx-button-emphasis-high-state-hover-theme-light-border-color: yellow;
+            --lumx-button-emphasis-high-state-active-theme-light-background-color: black;
+            --lumx-button-emphasis-high-state-active-theme-light-color: blue;
+            --lumx-button-emphasis-high-state-active-theme-light-border-color: blue;
+
+            --lumx-button-emphasis-high-state-default-theme-dark-background-color: rebeccapurple;
+            --lumx-button-emphasis-high-state-default-theme-dark-color: hotpink;
+            --lumx-button-emphasis-high-state-default-theme-dark-border-color: hotpink;
+            --lumx-button-emphasis-high-state-hover-theme-dark-background-color: yellow;
+            --lumx-button-emphasis-high-state-hover-theme-dark-color: blue;
+            --lumx-button-emphasis-high-state-hover-theme-dark-border-color: blue;
+            --lumx-button-emphasis-high-state-active-theme-dark-background-color: green;
+            --lumx-button-emphasis-high-state-active-theme-dark-color: red;
+            --lumx-button-emphasis-high-state-active-theme-dark-border-color: red;
+
+            /////////////
+            --lumx-button-emphasis-medium-state-default-padding-horizontal: 5px;
+            --lumx-button-emphasis-medium-state-default-border-width: 6px;
+            --lumx-button-emphasis-medium-state-hover-padding-horizontal: 10px;
+            --lumx-button-emphasis-medium-state-hover-border-width: 4px;
+            --lumx-button-emphasis-medium-state-active-padding-horizontal: 2px;
+            --lumx-button-emphasis-medium-state-active-border-width: 2px;
+
+            --lumx-button-emphasis-medium-state-default-theme-light-background-color: lightblue;
+            --lumx-button-emphasis-medium-state-default-theme-light-color: hotpink;
+            --lumx-button-emphasis-medium-state-default-theme-light-border-color: hotpink;
+            --lumx-button-emphasis-medium-state-hover-theme-light-background-color: red;
+            --lumx-button-emphasis-medium-state-hover-theme-light-color: rebeccapurple;
+            --lumx-button-emphasis-medium-state-hover-theme-light-border-color: rebeccapurple;
+            --lumx-button-emphasis-medium-state-active-theme-light-background-color: lightseagreen;
+            --lumx-button-emphasis-medium-state-active-theme-light-color: maroon;
+            --lumx-button-emphasis-medium-state-active-theme-light-border-color: maroon;
+
+            --lumx-button-emphasis-medium-state-default-theme-dark-background-color: mediumorchid;
+            --lumx-button-emphasis-medium-state-default-theme-dark-color: midnightblue;
+            --lumx-button-emphasis-medium-state-default-theme-dark-border-color: midnightblue;
+            --lumx-button-emphasis-medium-state-hover-theme-dark-background-color: olive;
+            --lumx-button-emphasis-medium-state-hover-theme-dark-color: orangered;
+            --lumx-button-emphasis-medium-state-hover-theme-dark-border-color: orangered;
+            --lumx-button-emphasis-medium-state-active-theme-dark-background-color: salmon;
+            --lumx-button-emphasis-medium-state-active-theme-dark-color: seagreen;
+            --lumx-button-emphasis-medium-state-active-theme-dark-border-color: seagreen;
+
+            /////////////
+            --lumx-button-emphasis-selected-state-default-padding-horizontal: 5px;
+            --lumx-button-emphasis-selected-state-default-border-width: 1px;
+            --lumx-button-emphasis-selected-state-hover-padding-horizontal: 2px;
+            --lumx-button-emphasis-selected-state-hover-border-width: 2px;
+            --lumx-button-emphasis-selected-state-active-padding-horizontal: 10px;
+            --lumx-button-emphasis-selected-state-active-border-width: 3px;
+
+            --lumx-button-emphasis-selected-state-default-theme-light-background-color: yellowgreen;
+            --lumx-button-emphasis-selected-state-default-theme-light-color: bisque;
+            --lumx-button-emphasis-selected-state-default-theme-light-border-color: bisque;
+            --lumx-button-emphasis-selected-state-hover-theme-light-background-color: cadetblue;
+            --lumx-button-emphasis-selected-state-hover-theme-light-color: coral;
+            --lumx-button-emphasis-selected-state-hover-theme-light-border-color: coral;
+            --lumx-button-emphasis-selected-state-active-theme-light-background-color: darkgoldenrod;
+            --lumx-button-emphasis-selected-state-active-theme-light-color: darkslategrey;
+            --lumx-button-emphasis-selected-state-active-theme-light-border-color: darkslategrey;
+
+            --lumx-button-emphasis-selected-state-default-theme-dark-background-color: gold;
+            --lumx-button-emphasis-selected-state-default-theme-dark-color: ghostwhite;
+            --lumx-button-emphasis-selected-state-default-theme-dark-border-color: ghostwhite;
+            --lumx-button-emphasis-selected-state-hover-theme-dark-background-color: lightcoral;
+            --lumx-button-emphasis-selected-state-hover-theme-dark-color: magenta;
+            --lumx-button-emphasis-selected-state-hover-theme-dark-border-color: magenta;
+            --lumx-button-emphasis-selected-state-active-theme-dark-background-color: mediumslateblue;
+            --lumx-button-emphasis-selected-state-active-theme-dark-color: mistyrose;
+            --lumx-button-emphasis-selected-state-active-theme-dark-border-color: mistyrose;
+
+            /////////////
+            --lumx-button-emphasis-low-state-default-padding-horizontal: 1px;
+            --lumx-button-emphasis-low-state-default-border-width: 10px;
+            --lumx-button-emphasis-low-state-hover-padding-horizontal: 2px;
+            --lumx-button-emphasis-low-state-hover-border-width: 5px;
+            --lumx-button-emphasis-low-state-active-padding-horizontal: 3px;
+            --lumx-button-emphasis-low-state-active-border-width: 2px;
+
+            --lumx-button-emphasis-low-state-default-theme-light-background-color: rgb(from lightcyan r g b / 50%);
+            --lumx-button-emphasis-low-state-default-theme-light-color: rgb(from goldenrod r g b / 50%);
+            --lumx-button-emphasis-low-state-default-theme-light-border-color: rgb(from goldenrod r g b / 50%);
+            --lumx-button-emphasis-low-state-hover-theme-light-background-color: rgb(from darkslategray r g b / 50%);
+            --lumx-button-emphasis-low-state-hover-theme-light-color: rgb(from crimson r g b / 50%);
+            --lumx-button-emphasis-low-state-hover-theme-light-border-color: rgb(from crimson r g b / 50%);
+            --lumx-button-emphasis-low-state-active-theme-light-background-color: rgb(from blanchedalmond r g b / 50%);
+            --lumx-button-emphasis-low-state-active-theme-light-color: rgb(from firebrick r g b / 50%);
+            --lumx-button-emphasis-low-state-active-theme-light-border-color: rgb(from firebrick r g b / 50%);
+
+            --lumx-button-emphasis-low-state-default-theme-dark-background-color: rgb(from blueviolet r g b / 50%);
+            --lumx-button-emphasis-low-state-default-theme-dark-color: rgb(from chartreuse r g b / 50%);
+            --lumx-button-emphasis-low-state-default-theme-dark-border-color: rgb(from chartreuse r g b / 50%);
+            --lumx-button-emphasis-low-state-hover-theme-dark-background-color: rgb(from darkturquoise r g b / 50%);
+            --lumx-button-emphasis-low-state-hover-theme-dark-color: rgb(from goldenrod r g b / 50%);
+            --lumx-button-emphasis-low-state-hover-theme-dark-border-color: rgb(from goldenrod r g b / 50%);
+            --lumx-button-emphasis-low-state-active-theme-dark-background-color: rgb(from magenta r g b / 50%);
+            --lumx-button-emphasis-low-state-active-theme-dark-color: rgb(from lightsteelblue r g b / 50%);
+            --lumx-button-emphasis-low-state-active-theme-dark-border-color: rgb(from lightsteelblue r g b / 50%);
+        `,
+        }),
+        withCombinations({
+            combinations: {
+                sections: { key: 'emphasis', options: buttonEmphasis },
+            },
+        }),
+        withCombinations({
+            combinations: {
+                sections: { 'Theme light': { theme: 'light' }, 'Theme dark': { theme: 'dark' } },
+            },
+        }),
+    ],
+};

package/src/components/button/IconButton.stories.tsx

@@ -4,7 +4,7 @@ import { iconArgType } from '@lumx/react/stories/controls/icons';
 import { colorArgType } from '@lumx/react/stories/controls/color';
 import { SQUARE_IMAGES, squareImageArgType } from '@lumx/react/stories/controls/image';
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
-import { ButtonVariations } from './Button.stories';
+import { StateVariations } from './Button.stories';
 
 export default {
     title: 'LumX components/button/IconButton',
@@ -17,6 +17,12 @@ export default {
         size: getSelectArgType<ButtonSize>([Size.s, Size.m]),
         icon: iconArgType,
         color: colorArgType,
+        ref: { table: { disable: true } },
+        onClick: { action: true, table: { disable: true } },
+        linkAs: { table: { disable: true } },
+        className: { table: { disable: true } },
+        target: { if: { arg: 'href', exists: true }, control: { type: 'inline-radio' } },
+        type: { if: { arg: 'href', exists: false }, control: { type: 'inline-radio' } },
     },
     args: IconButton.defaultProps,
 };
@@ -25,7 +31,7 @@ export default {
  * Default IconButton
  */
 export const Default = {
-    args: { icon: mdiSend },
+    args: { icon: mdiSend, label: 'Button label' },
 };
 
 /**
@@ -36,17 +42,11 @@ export const WithImage = {
     args: { image: SQUARE_IMAGES.square1 },
 };
 
-/**
- * IconButton using a tooltip
- */
-export const WithTooltip = {
-    args: { icon: mdiSend, label: 'Send a message' },
-};
-
 /**
  * Check icon button style variations (color, states, emphasis, etc.)
  */
-export const IconButtonVariations = {
+export const IconStateVariations = {
     ...Default,
-    decorators: ButtonVariations.decorators,
+    argTypes: { ...Default.args, ...StateVariations.argTypes },
+    decorators: StateVariations.decorators,
 };

package/src/components/chip/Chip.stories.tsx

@@ -1,17 +1,22 @@
 import React from 'react';
 
+import omit from 'lodash/omit';
 import { mdiClose, mdiViewList } from '@lumx/icons';
-import { Chip, ChipProps, ColorPalette, GridColumn, Icon, Size } from '@lumx/react';
+import { Chip, ChipProps, ColorPalette, Icon, Size, Theme } from '@lumx/react';
+
 import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 import { withUndefined } from '@lumx/react/stories/controls/withUndefined';
-import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
+import { withTheming } from '@lumx/react/stories/utils/theming';
+import { DESIGN_TOKENS } from '@lumx/core/src/js/constants/design-tokens';
+import pick from 'lodash/pick';
+import { withThemedBackground } from '@lumx/react/stories/decorators/withThemedBackground';
 
 const chipSizes = [Size.m, Size.s];
 export default {
     title: 'LumX components/chip/Chip',
     component: Chip,
-    args: Chip.defaultProps,
+    args: omit(Chip.defaultProps, ['theme']),
     argTypes: {
         size: getSelectArgType<ChipProps['size']>(chipSizes),
         before: { control: false },
@@ -64,20 +69,81 @@ export const WithAfterAndBefore = {
 /**
  * All combinations of color, size and states.
  */
-export const Variants = {
+export const ColorVariants = {
     ...WithAfterAndBefore,
     decorators: [
         withCombinations({
             combinations: {
                 rows: { key: 'color', options: withUndefined(ColorPalette) },
-                cols: { key: 'size', options: chipSizes },
-                sections: {
+                sections: { key: 'size', options: chipSizes },
+                cols: {
+                    Default: {},
+                    Hover: { 'data-lumx-hover': true },
+                    Active: { 'data-lumx-active': true },
+                    Disabled: { isDisabled: true },
+                    Focused: { 'data-focus-visible-added': true },
+                },
+            },
+        }),
+    ],
+};
+
+/**
+ * All combinations of color, size and states.
+ */
+export const SelectedVariants = {
+    ...WithAfterAndBefore,
+    decorators: [
+        withThemedBackground(),
+        withCombinations({
+            combinations: {
+                sections: { 'Size m': {}, 'Size s': { size: 's' } },
+                rows: {
+                    'theme=light': { theme: Theme.light },
+                    'Selected & theme=light': { isSelected: true, theme: Theme.light },
+                    'theme=dark': { theme: Theme.dark },
+                    'Selected & theme=dark': { isSelected: true, theme: Theme.dark },
+                },
+                cols: {
                     Default: {},
+                    Hover: { 'data-lumx-hover': true },
+                    Active: { 'data-lumx-active': true },
                     Disabled: { isDisabled: true },
-                    Highlighted: { isHighlighted: true },
+                    Focused: { 'data-focus-visible-added': true },
                 },
             },
         }),
-        withWrapper({ maxColumns: 3, itemMinWidth: 350 }, GridColumn),
+    ],
+};
+
+/**
+ * Test chip CSS variable theming
+ */
+export const Theming = {
+    ...SelectedVariants,
+    decorators: [
+        ...SelectedVariants.decorators,
+        withTheming({
+            properties: pick(DESIGN_TOKENS, ['chip']),
+            values: `
+            --lumx-chip-emphasis-selected-state-default-border-width: 2px;
+            --lumx-chip-emphasis-selected-state-default-theme-light-border-color: red;
+            --lumx-chip-emphasis-selected-state-default-theme-light-background-color: blue;
+            --lumx-chip-emphasis-selected-state-default-theme-dark-border-color: blue;
+            --lumx-chip-emphasis-selected-state-default-theme-dark-background-color: red;
+
+            --lumx-chip-emphasis-selected-state-hover-border-width: 3px;
+            --lumx-chip-emphasis-selected-state-hover-theme-light-border-color: green;
+            --lumx-chip-emphasis-selected-state-hover-theme-light-background-color: violet;
+            --lumx-chip-emphasis-selected-state-hover-theme-dark-border-color: violet;
+            --lumx-chip-emphasis-selected-state-hover-theme-dark-background-color: green;
+
+            --lumx-chip-emphasis-selected-state-active-border-width: 4px;
+            --lumx-chip-emphasis-selected-state-active-theme-light-border-color: orange;
+            --lumx-chip-emphasis-selected-state-active-theme-light-background-color: pink;
+            --lumx-chip-emphasis-selected-state-active-theme-dark-border-color: pink;
+            --lumx-chip-emphasis-selected-state-active-theme-dark-background-color: orange;
+            `,
+        }),
     ],
 };