feat(experimental): add Chip and Text

Add experimental theme and utils.

src/components/experimental/Chip/Chip.tsx

@@ -0,0 +1,91 @@
+import React, { type ComponentPropsWithoutRef, type ComponentType, type ReactElement } from 'react';
+import styled from 'styled-components';
+import { MarginProps } from 'styled-system';
+import { theme } from '../../../essentials/experimental/theme';
+import { get } from '../../../utils/experimental/themeGet';
+
+import { Text } from '../Text/Text';
+import PlusIcon from '../../../icons/actions/PlusIcon';
+import XCrossCircleIcon from '../../../icons/actions/XCrossCircleIcon';
+
+import type { IconProps } from '../../../icons';
+
+interface ChipProps extends ComponentPropsWithoutRef<'button'>, MarginProps {
+    /**
+     * The text
+     */
+    label: string;
+    /**
+     * Toggle active state
+     */
+    isActive?: boolean;
+    /**
+     * Icon to be shown on the start
+     */
+    Icon?: ComponentType<IconProps>;
+    /**
+     * Controls if the Chip can be dismissed
+     */
+    deletable: boolean;
+}
+//
+// const TextLabel = styled.span.attrs({ theme })`
+//     font-size: ${get('fontSizes.1')};
+//     font-weight: ${get('fontWeights.medium')};
+//     line-height: ${get('lineHeights.2')};
+// `;
+
+const Container = styled.div.attrs({ theme })<{ isActive: boolean }>`
+    display: inline-flex;
+    align-items: center;
+
+    cursor: pointer;
+
+    border-radius: ${get('radii.3')};
+    padding: ${get('space.2')}rem ${get('space.3')}rem;
+
+    color: ${
+        props =>
+            props.isActive
+                ? 'hsla(343, 70%, 22%, 1)' // --sys-color-on-interactive-container, #5F1127
+                : 'hsla(0, 6%, 11%, 1)' // --sys-color-on-surface, #1E1A1A
+    };
+    background-color: ${
+        props =>
+            props.isActive
+                ? 'hsla(350, 46%, 95%, 1)' // --sys-color-interactive-container
+                : 'hsla(0, 6%, 94%, 1)' // --sys-color-surface-container
+    };
+
+    &:hover {
+        background-color: ${
+            props =>
+                props.isActive
+                    ? 'hsla(343, 70%, 22%, 0.16)' // --sys-color-on-interactive-container, #5F1127
+                    : 'hsla(0, 6%, 11%, 0.16)' // --sys-color-on-surface, #1E1A1A;
+        };
+    }
+`;
+
+const Spacer = styled.div.attrs({ theme })`
+    display: inline-block;
+    margin-right: ${get('space.1')}rem;
+`;
+
+function Chip({ label, isActive = false, Icon = PlusIcon, deletable = false }: ChipProps): ReactElement {
+    return (
+        <Container isActive={isActive}>
+            <>
+                {Icon && <Icon size={20} />}
+                <Spacer />
+                <Text variant="label1">{label}</Text>
+                <Spacer />
+                {deletable && (
+                    <XCrossCircleIcon size={20} color={isActive ? 'hsl(343, 70%, 22%)' : 'hsl(0, 6%, 38%)'} />
+                )}
+            </>
+        </Container>
+    );
+}
+
+export { Chip, ChipProps };

src/components/experimental/Chip/docs/Chip.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Chip } from '../Chip';
+import PlusIcon from '../../../../icons/actions/PlusIcon';
+import FilterIcon from '../../../../icons/actions/FilterIcon';
+
+const NoIcon = () => <></>;
+
+const meta: Meta = {
+    title: 'Experimental/Components/Chip',
+    component: Chip,
+    argTypes: {
+        icon: {
+            description: 'Icon',
+            control: 'select',
+            options: ['filterIcon', 'plusIcon'],
+            mapping: {
+                filterIcon: FilterIcon,
+                plusIcon: PlusIcon
+            }
+        }
+    },
+    args: {
+        label: 'Add one item',
+        icon: 'plusIcon'
+    }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Chip>;
+
+export const Default: Story = {};

src/components/experimental/Chip/docs/Chip.storybook.mdx

@@ -0,0 +1,15 @@
+import { ArgTypes, Meta, Primary, Unstyled } from '@storybook/blocks';
+import * as ChipStories from './Chip.stories';
+import { StyledSystemLinks } from '../../../../docs/StyledSystemLinks';
+
+<Meta of={ChipStories} />
+
+# Chip
+
+<Primary />
+
+<ArgTypes of={ChipStories} />
+
+<StyledSystemLinks component="Chip" supportedProps={['variant']} mt={2} />
+
+<Stories includePrimary={false} />

src/components/experimental/Text/Text.tsx

@@ -0,0 +1,121 @@
+import { ComponentPropsWithoutRef } from 'react';
+import styled from 'styled-components';
+import {
+    compose,
+    fontFamily,
+    FontFamilyProps,
+    FontSizeProps,
+    margin,
+    MarginProps,
+    ResponsiveValue,
+    textAlign,
+    TextAlignProps,
+    variant
+} from 'styled-system';
+import { theme } from '../../../essentials/experimental/theme';
+import { get } from '../../../utils/experimental/themeGet';
+// import { getSemanticValue } from '../../../utils';
+
+interface TextProps
+    extends ComponentPropsWithoutRef<'span'>,
+        MarginProps,
+        FontSizeProps,
+        FontFamilyProps,
+        TextAlignProps {
+    /**
+     * The font-weight property specifies the weight (or boldness) of the font.
+     * @default normal
+     */
+    // fontWeight?: ResponsiveValue<'normal' | 'semibold' | 'bold'>;
+    /**
+     * Enforce primary color
+     */
+    // primary?: boolean;
+    /**
+     * Adjust color to indicate secondary information
+     */
+    // secondary?: boolean;
+    /**
+     * Adjust color to display a disabled text element
+     */
+    // disabled?: boolean;
+
+    variant?: ResponsiveValue<'display' | 'headline' | 'title1' | 'title2' | 'body1' | 'body2' | 'label1' | 'label2'>;
+}
+
+const variantStyles = variant({
+    variants: {
+        label2: {
+            fontSize: theme.fontSizes[0],
+            fontWeight: theme.fontWeights.normal,
+            lineHeight: theme.lineHeights[0]
+        },
+        label1: {
+            fontSize: theme.fontSizes[1],
+            fontWeight: theme.fontWeights.medium,
+            lineHeight: theme.lineHeights[1]
+        },
+        body2: {
+            fontSize: theme.fontSizes[0],
+            fontWeight: theme.fontWeights.normal,
+            lineHeight: theme.lineHeights[0]
+        },
+        body1: {
+            fontSize: theme.fontSizes[1],
+            fontWeight: theme.fontWeights.normal,
+            lineHeight: theme.lineHeights[1]
+        },
+        title1: {
+            fontSize: theme.fontSizes[2],
+            fontWeight: theme.fontWeights.semibold,
+            lineHeight: theme.lineHeights[2]
+        },
+        title2: {
+            fontSize: theme.fontSizes[1],
+            fontWeight: theme.fontWeights.medium,
+            lineHeight: theme.lineHeights[1]
+        },
+        display: {
+            fontSize: theme.fontSizes[4],
+            fontWeight: theme.fontWeights.bold,
+            lineHeight: theme.lineHeights[4]
+        },
+        headline: {
+            fontSize: theme.fontSizes[3],
+            fontWeight: theme.fontWeights.bold,
+            lineHeight: theme.lineHeights[3]
+        }
+    }
+});
+
+// function determineTextColor(props: TextProps) {
+//     const { primary, secondary, disabled } = props;
+//
+//     if (disabled) {
+//         return getSemanticValue('foreground-disabled');
+//     }
+//
+//     if (secondary) {
+//         return getSemanticValue('foreground-neutral-emphasized');
+//     }
+//
+//     if (primary) {
+//         return getSemanticValue('foreground-primary');
+//     }
+//
+//     return 'inherit';
+// }
+
+const Text = styled.span.attrs({ theme })<TextProps>`
+    color: inherit;
+    font-family: ${get('fonts.normal')};
+    margin: 0;
+
+    ${compose(margin, variantStyles, fontFamily, textAlign)}
+`;
+
+Text.defaultProps = {
+    variant: 'body1'
+};
+
+export { Text, TextProps };

src/components/experimental/index.ts

@@ -0,0 +1,2 @@
+export { Chip } from './Chip/Chip';
+export { Text } from './Text/Text';