@salutejs/plasma-new-hope 0.134.0-canary.1392.10603131302.0 → 0.134.0-canary.1403.10590022490.0

package/styled-components/cjs/examples/plasma_b2c/components/Segment/SegmentItem.config.js

@@ -13,21 +13,21 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemAdditionalColor, _Segment.segmentTokens.itemAdditionalColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.itemSelectedAdditionalColor, _Segment.segmentTokens.itemSelectedAdditionalColorHover, _Segment.segmentTokens.outlineFocusColor),
-      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemAdditionalColor, _Segment.segmentTokens.itemAdditionalColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.itemSelectedAdditionalColor, _Segment.segmentTokens.itemSelectedAdditionalColorHover, _Segment.segmentTokens.outlineFocusColor),
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-secondary);", ":var(--inverse-text-secondary);", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemAdditionalColor, _Segment.segmentTokens.itemAdditionalColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.itemSelectedAdditionalColor, _Segment.segmentTokens.itemSelectedAdditionalColorHover, _Segment.segmentTokens.outlineFocusColor)
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.outlineFocusColor),
+      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.outlineFocusColor),
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.outlineFocusColor)
     },
     size: {
-      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":2rem;", ":0.5rem 0.75rem;", ":0.0625rem 0.125rem;", ":0.125rem;", ":0;", ":var(--plasma-typo-body-xs-bold-font-family);", ":var(--plasma-typo-body-xs-bold-font-size);", ":var(--plasma-typo-body-xs-bold-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-bold-letter-spacing);", ":var(--plasma-typo-body-xs-bold-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemContentPadding, _Segment.segmentTokens.itemIconMargin, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0.5rem 1rem;", ":0.1875rem 0.125rem;", ":0.125rem;", ":0rem;", ":var(--plasma-typo-body-s-bold-font-family);", ":var(--plasma-typo-body-s-bold-font-size);", ":var(--plasma-typo-body-s-bold-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-bold-letter-spacing);", ":var(--plasma-typo-body-s-bold-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemContentPadding, _Segment.segmentTokens.itemIconMargin, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":3rem;", ":0.75rem 1.25rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":var(--plasma-typo-body-m-bold-font-family);", ":var(--plasma-typo-body-m-bold-font-size);", ":var(--plasma-typo-body-m-bold-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-bold-letter-spacing);", ":var(--plasma-typo-body-m-bold-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemContentPadding, _Segment.segmentTokens.itemIconMargin, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":auto;", ":3.5rem;", ":1rem 1.5rem;", ":0.0625rem 0.125rem;", ":0.375rem;", ":0;", ":var(--plasma-typo-body-l-bold-font-family);", ":var(--plasma-typo-body-l-bold-font-size);", ":var(--plasma-typo-body-l-bold-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-bold-letter-spacing);", ":var(--plasma-typo-body-l-bold-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemContentPadding, _Segment.segmentTokens.itemIconMargin, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight)
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":1.5rem;", ":0 0.625rem;", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":2rem;", ":0 0.75rem;", ":0.125rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0 0.875rem;", ":0.125rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":3rem;", ":0 1rem;", ":0.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight)
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Segment.segmentTokens.disabledOpacity)
     },
     pilled: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.75rem;"], _Segment.segmentTokens.itemPilledBorderRadius)
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;"], _Segment.segmentTokens.itemPilledBorderRadius)
     }
   }
 };

package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.config.js

@@ -20,7 +20,7 @@ var config = exports.config = {
       m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body1-font-family);", ":var(--plasma-typo-body1-font-style);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-line-height);", ":var(--plasma-typo-body1-font-size);", ":var(--plasma-typo-body1-letter-spacing);", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale, _Switch.switchTokens.labelOffset)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);", ":var(--surface-transparent-tertiary-active);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
     },
     labelPosition: {
       before: _before.labelPosition_Before,

package/styled-components/cjs/examples/plasma_web/components/Segment/Segment.stories.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 
@@ -7,8 +6,6 @@ import { segmentGroupConfig } from '../../../../components/Segment';
 import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 import { SegmentProvider } from '../../../../components/Segment/SegmentProvider';
-import { IconMic } from '../../../../components/_Icon';
-import { Counter } from '../Counter/Counter';
 
 import { config } from './SegmentGroup.config';
 import { SegmentItem, SegmentGroup } from './Segment';
@@ -22,39 +19,6 @@ type CustomStorySegmentProps = {
 
 type StorySegmentProps = ComponentProps<typeof SegmentGroup> & CustomStorySegmentProps;
 
-const sizes = ['xs', 's', 'm', 'l'] as const;
-
-type Size = typeof sizes[number];
-
-const contentLeftOptions = ['none', 'icon'];
-const contentRightOptions = ['none', 'text', 'counter', 'icon'];
-
-const getContentLeft = (contentLeftOption: string, size: Size) => {
-    const iconSize = size === 'xs' ? 'xs' : 's';
-    return contentLeftOption === 'icon' ? <IconMic size={iconSize} color="inherit" /> : undefined;
-};
-
-const getContentRight = (contentRightOption: string, size: Size) => {
-    const iconSize = size === 'xs' ? 'xs' : 's';
-
-    switch (contentRightOption) {
-        case 'icon':
-            return <IconMic size={iconSize} color="inherit" />;
-        case 'counter':
-            return <Counter size="s" count={1} view="positive" />;
-        case 'text':
-            return <div>Text</div>;
-        default:
-            return undefined;
-    }
-};
-
-const Column = styled.div`
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-`;
-
 const meta: Meta<StorySegmentProps> = {
     title: 'plasma_web/Segment',
     decorators: [WithTheme],
@@ -73,32 +37,12 @@ const meta: Meta<StorySegmentProps> = {
                 type: 'select',
             },
         },
-        contentLeft: {
-            options: contentLeftOptions,
-            control: {
-                type: 'select',
-            },
-        },
-        contentRight: {
-            options: contentRightOptions,
-            control: {
-                type: 'select',
-            },
-        },
     },
 };
 
 export default meta;
 
-const StoryDefault = ({
-    contentItemsNumber,
-    selectionMode,
-    segmentItemView,
-    view,
-    contentLeft: contentLeftOption,
-    contentRight: contentRightOption,
-    ...args
-}: StorySegmentProps) => {
+const StoryDefault = ({ contentItemsNumber, selectionMode, segmentItemView, view, ...args }: StorySegmentProps) => {
     const contentItems = Array(contentItemsNumber).fill(0);
 
     return (
@@ -112,8 +56,6 @@ const StoryDefault = ({
                             label={`Label ${i}`}
                             value={`label_${i}`}
                             key={`label_${i}`}
-                            contentLeft={getContentLeft(contentLeftOption, args.size as Size)}
-                            contentRight={getContentRight(contentRightOption, args.size as Size)}
                             {...args}
                         />
                     ))}
@@ -122,20 +64,13 @@ const StoryDefault = ({
 
             <h3>Segment with fixed width</h3>
             <SegmentProvider>
-                <SegmentGroup
-                    view={view}
-                    style={{ width: '329px' /* , position: 'relative', background: 'lightblue'*/ }}
-                    selectionMode={selectionMode}
-                    {...args}
-                >
+                <SegmentGroup view={view} style={{ width: '28.5rem' }} selectionMode={selectionMode} {...args}>
                     {contentItems.map((_, i) => (
                         <SegmentItem
                             view={segmentItemView}
                             label={`Label ${i}`}
                             value={`label_${i}`}
                             key={`label_${i}`}
-                            contentLeft={getContentLeft(contentLeftOption, args.size as Size)}
-                            contentRight={getContentRight(contentRightOption, args.size as Size)}
                             {...args}
                         />
                     ))}
@@ -155,81 +90,6 @@ export const Default: StoryObj<StorySegmentProps> = {
         pilled: false,
         filledBackground: false,
         disabled: false,
-        vertical: false,
     },
     render: (args) => <StoryDefault {...args} />,
 };
-
-const StorySegmentItem = ({
-    contentItemsNumber,
-    selectionMode,
-    segmentItemView,
-    view,
-    contentLeft: contentLeftOption,
-    contentRight: contentRightOption,
-    ...args
-}: StorySegmentProps) => {
-    return (
-        <>
-            <h3>Items</h3>
-            <Column>
-                <SegmentProvider>
-                    <SegmentItem view={segmentItemView} size={args.size} label="Label" value="label_value" />
-                    <SegmentItem
-                        view={segmentItemView}
-                        label="Label"
-                        value="label_value"
-                        contentLeft={<IconMic color="inherit" />}
-                        {...args}
-                    />
-                    <SegmentItem
-                        view={segmentItemView}
-                        label="Label"
-                        value="label_value"
-                        contentRight={<IconMic color="inherit" />}
-                        {...args}
-                    />
-                    <SegmentItem
-                        view={segmentItemView}
-                        label="Label"
-                        value="label_value"
-                        contentLeft={<IconMic color="inherit" />}
-                        contentRight={<IconMic color="inherit" />}
-                        {...args}
-                    />
-                    <SegmentItem
-                        view={segmentItemView}
-                        label="Label"
-                        value="label_value"
-                        contentLeft={<IconMic color="inherit" />}
-                        contentRight="HelpText"
-                        {...args}
-                    />
-                    <SegmentItem
-                        view={segmentItemView}
-                        label="Label"
-                        value="label_value"
-                        contentLeft={getContentLeft(contentLeftOption, args.size as Size)}
-                        contentRight={getContentRight(contentRightOption, args.size as Size)}
-                        {...args}
-                    />
-                </SegmentProvider>
-            </Column>
-        </>
-    );
-};
-
-export const SegmentItemPage: StoryObj<StorySegmentProps> = {
-    args: {
-        view: 'clear',
-        size: 'xs',
-        segmentItemView: 'clear',
-        selectionMode: 'single',
-        contentItemsNumber: 11,
-        pilled: false,
-        filledBackground: false,
-        disabled: false,
-        vertical: false,
-    },
-    render: (args) => <StorySegmentItem {...args} />,
-};

package/styled-components/cjs/examples/plasma_web/components/Segment/SegmentGroup.config.js

@@ -17,10 +17,10 @@ var config = exports.config = {
       filled: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.arrowColor, _Segment.segmentTokens.groupBackgroundColor, _Segment.segmentTokens.outlineFocusColor)
     },
     size: {
-      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":auto;", ":11.25rem;", ":0.25rem 0.75rem;", ":0.75rem 0;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight, _Segment.segmentTokens.groupVerticalHeight, _Segment.segmentTokens.groupArrowPadding, _Segment.segmentTokens.groupVerticalArrowPadding),
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":auto;", ":11.25rem;", ":0.5rem 0.875rem;", ":0.875rem 0;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight, _Segment.segmentTokens.groupVerticalHeight, _Segment.segmentTokens.groupArrowPadding, _Segment.segmentTokens.groupVerticalArrowPadding),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":auto;", ":16.25rem;", ":0.75rem 1.25rem;", ":1.25rem 0;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight, _Segment.segmentTokens.groupVerticalHeight, _Segment.segmentTokens.groupArrowPadding, _Segment.segmentTokens.groupVerticalArrowPadding),
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":auto;", ":18.75rem;", ":1rem 1.375rem;", ":1.375rem 0;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight, _Segment.segmentTokens.groupVerticalHeight, _Segment.segmentTokens.groupArrowPadding, _Segment.segmentTokens.groupVerticalArrowPadding)
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight),
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":auto;"], _Segment.segmentTokens.groupBorderRadius, _Segment.segmentTokens.groupWidth, _Segment.segmentTokens.groupHeight)
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Segment.segmentTokens.disabledOpacity)
@@ -30,12 +30,6 @@ var config = exports.config = {
     },
     filledBackground: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-colors-surface-liquid02);"], _Segment.segmentTokens.groupFilledBackgroundColor)
-    },
-    stretch: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)([""])
-    },
-    vertical: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)([""])
     }
   }
 };

package/styled-components/cjs/examples/plasma_web/components/Segment/SegmentItem.config.js

@@ -13,21 +13,21 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemAdditionalColor, _Segment.segmentTokens.itemAdditionalColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.itemSelectedAdditionalColor, _Segment.segmentTokens.itemSelectedAdditionalColorHover, _Segment.segmentTokens.outlineFocusColor),
-      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemAdditionalColor, _Segment.segmentTokens.itemAdditionalColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.itemSelectedAdditionalColor, _Segment.segmentTokens.itemSelectedAdditionalColorHover, _Segment.segmentTokens.outlineFocusColor),
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-secondary);", ":var(--inverse-text-secondary);", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemAdditionalColor, _Segment.segmentTokens.itemAdditionalColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.itemSelectedAdditionalColor, _Segment.segmentTokens.itemSelectedAdditionalColorHover, _Segment.segmentTokens.outlineFocusColor)
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.outlineFocusColor),
+      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--surface-solid-card);", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.outlineFocusColor),
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--plasma-colors-button-focused);"], _Segment.segmentTokens.itemColor, _Segment.segmentTokens.itemBackgroundColor, _Segment.segmentTokens.itemColorHover, _Segment.segmentTokens.itemBackgroundColorHover, _Segment.segmentTokens.itemSelectedColor, _Segment.segmentTokens.itemSelectedBackgroundColor, _Segment.segmentTokens.itemSelectedColorHover, _Segment.segmentTokens.itemSelectedBackgroundColorHover, _Segment.segmentTokens.outlineFocusColor)
     },
     size: {
-      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":2rem;", ":0.5rem 0.75rem;", ":0.0625rem 0.125rem;", ":0.125rem;", ":0;", ":var(--plasma-typo-body-xs-bold-font-family);", ":var(--plasma-typo-body-xs-bold-font-size);", ":var(--plasma-typo-body-xs-bold-font-style);", ":var(--plasma-typo-body-xs-bold-font-weight);", ":var(--plasma-typo-body-xs-bold-letter-spacing);", ":var(--plasma-typo-body-xs-bold-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemContentPadding, _Segment.segmentTokens.itemIconMargin, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
-      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0.5rem 1rem;", ":0.1875rem 0.125rem;", ":0.125rem;", ":0rem;", ":var(--plasma-typo-body-s-bold-font-family);", ":var(--plasma-typo-body-s-bold-font-size);", ":var(--plasma-typo-body-s-bold-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-bold-letter-spacing);", ":var(--plasma-typo-body-s-bold-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemContentPadding, _Segment.segmentTokens.itemIconMargin, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
-      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":3rem;", ":0.75rem 1.25rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":var(--plasma-typo-body-m-bold-font-family);", ":var(--plasma-typo-body-m-bold-font-size);", ":var(--plasma-typo-body-m-bold-font-style);", ":var(--plasma-typo-body-m-bold-font-weight);", ":var(--plasma-typo-body-m-bold-letter-spacing);", ":var(--plasma-typo-body-m-bold-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemContentPadding, _Segment.segmentTokens.itemIconMargin, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
-      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":auto;", ":3.5rem;", ":1rem 1.5rem;", ":0.0625rem 0.125rem;", ":0.375rem;", ":0;", ":var(--plasma-typo-body-l-bold-font-family);", ":var(--plasma-typo-body-l-bold-font-size);", ":var(--plasma-typo-body-l-bold-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-bold-letter-spacing);", ":var(--plasma-typo-body-l-bold-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemContentPadding, _Segment.segmentTokens.itemIconMargin, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight)
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":1.5rem;", ":0 0.625rem;", ":0.125rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":2rem;", ":0 0.75rem;", ":0.125rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0 0.875rem;", ":0.125rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight),
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":3rem;", ":0 1rem;", ":0.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _Segment.segmentTokens.itemBorderRadius, _Segment.segmentTokens.itemWidth, _Segment.segmentTokens.itemHeight, _Segment.segmentTokens.itemPadding, _Segment.segmentTokens.itemMarginLeft, _Segment.segmentTokens.fontFamily, _Segment.segmentTokens.fontSize, _Segment.segmentTokens.fontStyle, _Segment.segmentTokens.fontWeight, _Segment.segmentTokens.letterSpacing, _Segment.segmentTokens.lineHeight)
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Segment.segmentTokens.disabledOpacity)
     },
     pilled: {
-      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.75rem;"], _Segment.segmentTokens.itemPilledBorderRadius)
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;"], _Segment.segmentTokens.itemPilledBorderRadius)
     }
   }
 };

package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.config.js

@@ -20,7 +20,7 @@ var config = exports.config = {
       m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body1-font-family);", ":var(--plasma-typo-body1-font-style);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-font-weight);", ":var(--plasma-typo-body1-line-height);", ":var(--plasma-typo-body1-font-size);", ":var(--plasma-typo-body1-letter-spacing);", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale, _Switch.switchTokens.labelOffset)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);", ":var(--surface-transparent-tertiary-active);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
     },
     labelPosition: {
       before: _before.labelPosition_Before,

package/styled-components/cjs/examples/sds_engineer/components/Segment/Segment.stories.tsx

@@ -64,12 +64,7 @@ const StoryDefault = ({ contentItemsNumber, selectionMode, segmentItemView, view
 
             <h3>Segment with fixed width</h3>
             <SegmentProvider>
-                <SegmentGroup
-                    view={view}
-                    style={{ width: args.vertical ? 'auto' : '28.5rem' }}
-                    selectionMode={selectionMode}
-                    {...args}
-                >
+                <SegmentGroup view={view} style={{ width: '28.5rem' }} selectionMode={selectionMode} {...args}>
                     {contentItems.map((_, i) => (
                         <SegmentItem
                             view={segmentItemView}

package/styled-components/es/components/Segment/tokens.js

@@ -2,11 +2,7 @@ export var classes = {
   selectedSegmentItem: 'selected-segment-item',
   segmentPilled: 'segment-pilled',
   segmentGroupFilledBackground: 'segment-group-filled-background',
-  segmentStretch: 'segment-stretched',
-  segmentVertical: 'segment-vertical',
-  segmentArrowPadding: 'segment-arrow-padding',
-  segmentGroupClipScroll: 'segment-group-clip-scroll',
-  segmentGroupClipShowAll: 'segment-group-clip-show-all'
+  segmentStretch: 'segment-stretched'
 };
 export var tokens = {
   fontFamily: '--plasma-segment-item-font-family',
@@ -21,9 +17,6 @@ export var tokens = {
   groupPilledBorderRadius: '--plasma-segment-group-pilled-border-radius',
   groupWidth: '--plasma-segment-group-width',
   groupHeight: '--plasma-segment-group-height',
-  groupVerticalHeight: '--plasma-segment-group-vertical-height',
-  groupArrowPadding: '--plasma-segment-group-arrow-padding',
-  groupVerticalArrowPadding: '--plasma-segment-group-vertical-arrow-padding',
   groupBackgroundColor: '--plasma-segment-group-background-color',
   groupFilledBackgroundColor: '--plasma-segment-group-filled-background-color',
   itemBorderRadius: '--plasma-segment-item-border-radius',
@@ -32,19 +25,13 @@ export var tokens = {
   itemHeight: '--plasma-segment-item-height',
   itemPadding: '--plasma-segment-item-padding',
   itemMarginLeft: '--plasma-segment-item-margin-left',
-  itemContentPadding: '--plasma-segment-item-content-padding',
-  itemIconMargin: '--plasma-segment-item-content-icon-margin',
   itemColor: '--plasma-segment-item-color',
   itemBackgroundColor: '--plasma-segment-item-background-color',
   itemColorHover: '--plasma-segment-item-color-hover',
   itemBackgroundColorHover: '--plasma-segment-item-background-color-hover',
-  itemAdditionalColor: '--plasma-segment-item-additional-color',
-  itemAdditionalColorHover: '--plasma-segment-item-additional-color-hover',
   itemSelectedColor: '--plasma-segment-item-selected-color',
   itemSelectedBackgroundColor: '--plasma-segment-item-selected-background-color',
   itemSelectedColorHover: '--plasma-segment-item-selected-color-hover',
   itemSelectedBackgroundColorHover: '--plasma-segment-item-selected-background-color-hover',
-  itemSelectedAdditionalColor: '--plasma-segment-item-selected-additional-color',
-  itemSelectedAdditionalColorHover: '--plasma-segment-item-selected-additional-color-hover',
   disabledOpacity: '--plasma-segment-disabled-opacity'
 };