paris 0.8.21 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # paris
 
+## 0.9.0
+
+### Minor Changes
+
+- a8941e5: Tabs: color and styling updates, kind `full`, `barStyle` thick or thin, `backgroundStyle` with glass option
+- ecd7deb: Theme: Revamped tokens and variables with updated structures, plus new materials and blurs
+- a8941e5: Theme: updated “materials” variables, added accent glows to “lighting”
+- a8941e5: Drawer: color and styling updates, new sizes `fullWithMargin` and `fullOnMobile` with tweaked `full` behavior, `bottomPanel` with glass material and removed padding, `additionalActions` available on paginated drawers, `overlayStyle` "greyed" renamed to "grey"
+- a8941e5: Dialog: color and styling updates, `overlayStyle` with default `blur` and option `grey`
+- a8941e5: Callout: color updates, default ArrowRight icon
+- a8941e5: Tag: color and styling updates, `shape` prop for `square` variant with `icon`, `corners` prop for border and radius, planned`and`void`kinds,`colorLevel` to adjust color background
+- a8941e5: Button: color updates, added `medium` size, `corners` prop for border-radius, removed `rounded` shape
+
+### Patch Changes
+
+- a8941e5: Accordion: color updates
+- a8941e5: Styled Link: color updates
+- a8941e5: Table: color and styling updates
+- a8941e5: Toast: color updates
+- a8941e5: Popover: color updates
+- a8941e5: Checkbox: color updates
+- a8941e5: Select: color and styling updates, fixed disabled states
+- a8941e5: Menu: color updates
+- a8941e5: TextArea: color updates, enhancer updates to match Input
+- a8941e5: Card: color updates
+- a8941e5: Avatar: color updates
+- a8941e5: Combobox: color and styling updates
+- a8941e5: Icon: `Check` and `ArrowRight`
+- a8941e5: Input: color and styling updates, enhancer color states
+
+## 0.8.22
+
+### Patch Changes
+
+- 0243ccb: fix(Field): Remove stopPropagation on Field component
+
 ## 0.8.21
 
 ### Patch Changes

package/package.json

@@ -2,7 +2,7 @@
   "name": "paris",
   "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
   "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
-  "version": "0.8.21",
+  "version": "0.9.0",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {
@@ -67,7 +67,7 @@
     "clsx": "^1.2.1",
     "font-color-contrast": "^11.1.0",
     "framer-motion": "^10.16.4",
-    "pte": "^0.4.9",
+    "pte": "^0.5.0",
     "react-hot-toast": "^2.4.1",
     "react-parallax-tilt": "^1.7.144",
     "react-tiny-popover": "^8.0.4",

package/src/helpers/useIsMounted.ts

@@ -0,0 +1,17 @@
+// Copied from https://usehooks-ts.com/react-hook/use-is-mounted
+
+import { useCallback, useEffect, useRef } from 'react';
+
+export function useIsMounted(): () => boolean {
+    const isMounted = useRef(false);
+
+    useEffect(() => {
+        isMounted.current = true;
+
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+
+    return useCallback(() => isMounted.current, []);
+}

package/src/helpers/useResizeObserver.ts

@@ -0,0 +1,97 @@
+// Copied from https://usehooks-ts.com/react-hook/use-resize-observer
+
+import { useEffect, useRef, useState } from 'react';
+
+import type { RefObject } from 'react';
+
+import { useIsMounted } from './useIsMounted';
+
+type Size = {
+    width: number | undefined
+    height: number | undefined
+};
+
+type UseResizeObserverOptions<T extends HTMLElement = HTMLElement> = {
+    ref: RefObject<T>
+    onResize?: (size: Size) => void
+    box?: 'border-box' | 'content-box' | 'device-pixel-content-box'
+};
+
+const initialSize: Size = {
+    width: undefined,
+    height: undefined,
+};
+
+export function useResizeObserver<T extends HTMLElement = HTMLElement>(
+    options: UseResizeObserverOptions<T>,
+): Size {
+    const { ref, box = 'content-box' } = options;
+    const [{ width, height }, setSize] = useState<Size>(initialSize);
+    const isMounted = useIsMounted();
+    const previousSize = useRef<Size>({ ...initialSize });
+    const onResize = useRef<((size: Size) => void) | undefined>(undefined);
+    onResize.current = options.onResize;
+
+    useEffect(() => {
+        if (!ref.current) return;
+
+        if (typeof window === 'undefined' || !('ResizeObserver' in window)) return;
+
+        const observer = new ResizeObserver(([entry]) => {
+            const boxProp = box === 'border-box'
+                ? 'borderBoxSize'
+                : box === 'device-pixel-content-box'
+                    ? 'devicePixelContentBoxSize'
+                    : 'contentBoxSize';
+
+            const newWidth = extractSize(entry, boxProp, 'inlineSize');
+            const newHeight = extractSize(entry, boxProp, 'blockSize');
+
+            const hasChanged = previousSize.current.width !== newWidth
+                || previousSize.current.height !== newHeight;
+
+            if (hasChanged) {
+                const newSize: Size = { width: newWidth, height: newHeight };
+                previousSize.current.width = newWidth;
+                previousSize.current.height = newHeight;
+
+                if (onResize.current) {
+                    onResize.current(newSize);
+                } else if (isMounted()) {
+                    setSize(newSize);
+                }
+            }
+        });
+
+        observer.observe(ref.current, { box });
+
+        return () => {
+            observer.disconnect();
+        };
+    }, [box, ref, isMounted]);
+
+    return { width, height };
+}
+
+type BoxSizesKey = keyof Pick<
+ResizeObserverEntry,
+'borderBoxSize' | 'contentBoxSize' | 'devicePixelContentBoxSize'
+>;
+
+function extractSize(
+    entry: ResizeObserverEntry,
+    box: BoxSizesKey,
+    sizeType: keyof ResizeObserverSize,
+): number | undefined {
+    if (!entry[box]) {
+        if (box === 'contentBoxSize') {
+            return entry.contentRect[sizeType === 'inlineSize' ? 'width' : 'height'];
+        }
+        return undefined;
+    }
+
+    return Array.isArray(entry[box])
+        ? entry[box][0][sizeType]
+        : // @ts-ignore Support Firefox's non-standard behavior
+        (entry[box][sizeType] as number);
+}

package/src/stories/accordion/Accordion.module.scss

@@ -1,6 +1,6 @@
 .container {
-    color: var(--pte-colors-contentPrimary);
-    border-bottom: 1px solid var(--pte-colors-borderOpaque);
+    color: var(--pte-new-colors-contentPrimary);
+    border-bottom: 1px solid var(--pte-new-colors-borderSubtle);
     cursor: pointer;
     transition: all var(--pte-animations-duration-relaxed) var(--pte-animations-timing-easeInOutExpo);
 
@@ -19,7 +19,7 @@
         border-bottom: 1px solid transparent;
         transition: border-bottom-color var(--pte-animations-duration-gradual) var(--pte-animations-timing-easeInOutExpo);
         &.open {
-            border-bottom-color: var(--pte-colors-borderOpaque);
+            border-bottom-color: var(--pte-new-colors-borderSubtle);
         }
     }
 
@@ -48,6 +48,6 @@
         display: flex;
         flex-direction: column;
         gap: 12px;
-        background-color: var(--pte-colors-backgroundSecondary);
+        background-color: var(--pte-new-colors-overlaySubtle);
     }
 }

package/src/stories/avatar/Avatar.module.scss

@@ -3,5 +3,5 @@
     aspect-ratio: 1;
     border: 1px solid var(--frame-color);
     overflow: clip;
-    box-shadow: var(--pte-lighting-subtlePopup);
+    box-shadow: var(--pte-new-lighting-subtlePopup);
 }

package/src/stories/avatar/Avatar.tsx

@@ -28,7 +28,7 @@ export type AvatarProps = {
  * @constructor
  */
 export const Avatar: FC<AvatarProps> = ({
-    frameColor = pvar('colors.borderOpaque'),
+    frameColor = pvar('new.colors.borderMedium'),
     width = 'fit-content',
     children,
     className,

package/src/stories/button/Button.module.scss

@@ -21,7 +21,7 @@
 
     &:hover {
         cursor: default;
-        background-color: var(--pte-colors-backgroundInverseTertiary);
+        background-color: var(--pte-new-colors-buttonFillHover);
     }
 
     &[aria-disabled=false]:active {
@@ -40,45 +40,47 @@
  */
 
 .primary {
-    color: var(--pte-colors-contentInversePrimary);
-    background-color: var(--pte-colors-backgroundInversePrimary);
-    border-color: var(--pte-colors-backgroundInversePrimary);
+    color: var(--pte-new-colors-contentInversePrimary);
+    background-color: var(--pte-new-colors-buttonFill);
+    border-color: var(--pte-new-colors-buttonFill);
 
     &:hover {
-        border-color: var(--pte-colors-backgroundInverseTertiary);
+        border-color: var(-pte-new-colors-buttonFillHover);
     }
 
     &[aria-disabled=true] {
-        color: var(--pte-colors-contentDisabled);
-        background-color: var(--pte-colors-backgroundTertiary);
-        border-color: var(--pte-colors-backgroundTertiary);
+        color: var(--pte-new-colors-contentDisabled);
+        background-color: var(--pte-new-colors-buttonFillDisabled);
+        border-color: var(--pte-new-colors-buttonFillDisabled);
     }
 }
 
 .secondary {
-    color: var(--pte-colors-contentPrimary);
+    color: var(--pte-new-colors-contentPrimary);
     background-color: transparent;
-    border-color: var(--pte-colors-contentPrimary);
+    border-color: var(--pte-new-colors-buttonBorder);
+
+    &:hover {
+        background-color: var(--pte-new-colors-overlayMedium);
+    }
 
     &[aria-disabled=true] {
-        color: var(--pte-colors-contentDisabled);
-        border-color: var(--pte-colors-contentDisabled);
+        color: var(--pte-new-colors-contentDisabled);
+        border-color: var(--pte-new-colors-buttonBorderDisabled);
     }
 }
 
 .tertiary {
-    color: var(--pte-colors-contentPrimary);
+    color: var(--pte-new-colors-contentPrimary);
     background-color: transparent;
     border-color: transparent;
-}
 
-.secondary, .tertiary {
     &:hover {
-        background-color: var(--pte-colors-backgroundTertiary);
+        background-color: var(--pte-new-colors-overlayMedium);
     }
 
     &[aria-disabled=true] {
-        color: var(--pte-colors-contentDisabled);
+        color: var(--pte-new-colors-contentDisabled);
     }
 }
 
@@ -92,6 +94,11 @@
     padding: 8px 15px;
 }
 
+.medium {
+    height: 28px;
+    padding: 6px 14px;
+}
+
 .small {
     height: 20px;
     padding: 4px 15px;
@@ -115,16 +122,26 @@
     border-radius: var(--pte-borders-radius-circle);
 }
 
-.rounded {
-    border-radius: var(--pte-borders-radius-rounded);
+.square, .rectangle {
+    &.sharp {
+        border-radius: var(--pte-borders-radius-rectangle);
+    }
 
-    &.small {
-        border-radius: var(--pte-borders-radius-roundedSmall);
+    &.rounded {
+        border-radius: var(--pte-borders-radius-rounded);
+
+        &.small {
+            border-radius: var(--pte-borders-radius-roundedSmall);
+        }
     }
-}
 
-.square, .rectangle {
-    border-radius: var(--pte-borders-radius-rectangle);
+    &.roundedXL {
+        border-radius: var(--pte-borders-radius-roundedLarge);
+
+        &.small {
+            border-radius: var(--pte-borders-radius-rounded);
+        }
+    }
 }
 
 .circle, .square {
@@ -133,6 +150,11 @@
         padding: 8px;
     }
 
+    &.medium {
+        width: 28px;
+        padding: 4px;
+    }
+
     &.small {
         width: 20px;
         padding: 4px;

package/src/stories/button/Button.stories.ts

@@ -57,3 +57,27 @@ export const WithEnhancer: Story = {
         }),
     },
 };
+
+export const Circle: Story = {
+    args: {
+        children: 'Button',
+        shape: 'circle',
+        kind: 'tertiary',
+        startEnhancer: ({ size }) => createElement(FontAwesomeIcon, {
+            icon: faPlus,
+            width: `${size}px`,
+        }),
+    },
+};
+
+export const Rounded: Story = {
+    args: {
+        children: 'Button',
+        shape: 'rectangle',
+        corners: 'rounded',
+        startEnhancer: ({ size }) => createElement(FontAwesomeIcon, {
+            icon: faPlus,
+            width: `${size}px`,
+        }),
+    },
+};

package/src/stories/button/Button.tsx

@@ -3,10 +3,12 @@
 import type {
     CSSProperties, FC, HTMLAttributeAnchorTarget, MouseEventHandler, ReactNode,
 } from 'react';
+import { useMemo } from 'react';
 import type { ButtonProps as AriaButtonProps } from '@ariakit/react';
 import { Button as AriaButton } from '@ariakit/react';
 import clsx from 'clsx';
 import fontColorContrast from 'font-color-contrast';
+import type { CSSLength } from '@ssh/csstypes';
 import styles from './Button.module.scss';
 import { Text } from '../text';
 import type { Enhancer } from '../../types/Enhancer';
@@ -17,22 +19,31 @@ import { NotificationDot } from '../icon/NotificationDot';
 
 const EnhancerSizes = {
     large: 13,
+    medium: 12,
     small: 11,
     xs: 9,
 };
 
+export const CornerPresets = ['sharp', 'rounded', 'roundedXL'] as const;
+
 export const ButtonThemes = {
     negative: {
-        primary: pvar('colors.contentNegative'),
-        secondary: pvar('colors.backgroundNegative'),
+        primary: pvar('new.colors.buttonBorderNegative'),
+        secondary: pvar('new.colors.buttonFillHoverNegative'),
+        primaryAlt: pvar('new.colors.contentNegative'),
+        secondaryAlt: pvar('new.colors.backgroundNegativeStrong'),
     },
     positive: {
-        primary: pvar('colors.contentPositive'),
-        secondary: pvar('colors.backgroundPositive'),
+        primary: pvar('new.colors.contentPositive'),
+        secondary: pvar('new.colors.backgroundPositive'),
+        primaryAlt: pvar('new.colors.contentPositive'),
+        secondaryAlt: pvar('new.colors.backgroundPositiveStrong'),
     },
     warning: {
-        primary: pvar('colors.contentWarning'),
-        secondary: pvar('colors.backgroundWarning'),
+        primary: pvar('new.colors.contentWarning'),
+        secondary: pvar('new.colors.backgroundWarning'),
+        primaryAlt: pvar('new.colors.contentWarning'),
+        secondaryAlt: pvar('new.colors.backgroundWarningStrong'),
     },
 } as const;
 
@@ -46,12 +57,19 @@ export type ButtonProps = {
      * The size of the Button.
      * @default large
      */
-    size?: 'large' | 'small' | 'xs';
+    size?: 'large' | 'medium' | 'small' | 'xs';
     /**
      * The shape of the Button.
      * @default pill
      */
-    shape?: 'pill' | 'circle' | 'rectangle' | 'square' | 'rounded';
+    shape?: 'pill' | 'circle' | 'rectangle' | 'square';
+    /**
+     * The radius of the corners for the `rectangle` and `square` Button shapes. Either a preset or a valid {@link CSSLength} string.
+     * `sharp` will have no rounding, `rounded` will have a slight rounding, and `roundedXL` will have a large rounding.
+     * @see CornerPresets
+     * @default rounded
+     */
+    corners?: typeof CornerPresets[number] | CSSLength;
     /**
      * A color to apply for the Button. Provide an object with `primary` and `secondary` properties to set the primary and hover colors.
      */
@@ -126,6 +144,7 @@ export const Button: FC<ButtonProps> = ({
     kind = 'primary',
     size = 'large',
     shape = 'pill',
+    corners = 'rounded',
     colors,
     theme,
     type = 'button',
@@ -139,66 +158,72 @@ export const Button: FC<ButtonProps> = ({
     displayNotificationDot = false,
     style,
     ...props
-}) => (
-    <AriaButton
-        {...props}
-        style={(theme || colors) ? {
-            '--pte-colors-contentInversePrimary': fontColorContrast(theme ? ButtonThemes[theme].primary : colors?.primary || pvar('colors.contentPrimary')),
-            '--pte-colors-backgroundInversePrimary': theme ? ButtonThemes[theme].primary : colors?.primary,
-            '--pte-colors-backgroundInverseTertiary': theme ? ButtonThemes[theme].secondary : colors?.secondary,
-            '--pte-colors-contentPrimary': theme ? ButtonThemes[theme].primary : colors?.primary,
-            '--pte-colors-backgroundTertiary': theme ? ButtonThemes[theme].secondary : colors?.secondary,
-            ...style,
-        } as CSSProperties : style}
-        className={clsx(
-            styles.button,
-            styles[kind],
-            styles[shape],
-            styles[size],
-            props?.className,
-        )}
-        aria-disabled={disabled ?? false}
-        type={type}
-        aria-details={typeof children === 'string' ? children : undefined}
-        onClick={!disabled && !href && !loading ? onClick : () => {}}
-        disabled={false}
-        {...href ? {
-            render: (properties) => (
-                // eslint-disable-next-line jsx-a11y/anchor-has-content
-                <a
-                    {...properties}
-                    href={href}
-                    target={props.hreftarget ?? '_self'}
-                    rel={props.hreftarget === '_self' ? undefined : 'noreferrer'}
+}) => {
+    const cornersIsPreset = useMemo(() => (CornerPresets as readonly string[]).includes(corners), [corners]);
+    return (
+        <AriaButton
+            {...props}
+            style={(theme || colors) ? {
+                '--pte-new-colors-contentInversePrimary': fontColorContrast(theme ? ButtonThemes[theme].primary : colors?.primary || pvar('new.colors.contentPrimary')), // text for primary
+                '--pte-new-colors-buttonFill': theme ? ButtonThemes[theme].primaryAlt : colors?.primary, // background for primary
+                '--pte-new-colors-buttonFillHover': theme ? ButtonThemes[theme].secondaryAlt : colors?.secondary, // hover background for primary
+                '--pte-new-colors-contentPrimary': theme ? ButtonThemes[theme].primary : colors?.primary, // text for secondary/tertiary
+                '--pte-new-colors-buttonBorder': theme ? ButtonThemes[theme].primary : colors?.primary, // border for secondary/tertiary
+                '--pte-new-colors-overlayMedium': theme ? ButtonThemes[theme].secondary : colors?.secondary, // hover background for secondary/tertiary
+                borderRadius: !cornersIsPreset ? corners : '',
+                ...style,
+            } as CSSProperties : ({ borderRadius: !cornersIsPreset ? corners : '', ...style })}
+            className={clsx(
+                styles.button,
+                styles[kind],
+                styles[shape],
+                styles[size],
+                cornersIsPreset && styles[corners],
+                props?.className,
+            )}
+            aria-disabled={disabled ?? false}
+            type={type}
+            aria-details={typeof children === 'string' ? children : undefined}
+            onClick={!disabled && !href && !loading ? onClick : () => {}}
+            disabled={false}
+            {...href ? {
+                render: (properties) => (
+                    // eslint-disable-next-line jsx-a11y/anchor-has-content
+                    <a
+                        {...properties}
+                        href={href}
+                        target={props.hreftarget ?? '_self'}
+                        rel={props.hreftarget === '_self' ? undefined : 'noreferrer'}
+                    />
+                ),
+            } : {}}
+        >
+            {!!startEnhancer && (
+                <MemoizedEnhancer
+                    enhancer={startEnhancer}
+                    size={EnhancerSizes[size]}
                 />
-            ),
-        } : {}}
-    >
-        {!!startEnhancer && (
-            <MemoizedEnhancer
-                enhancer={startEnhancer}
-                size={EnhancerSizes[size]}
-            />
-        )}
-        {!['circle', 'square'].includes(shape) && (
-            <Text kind="labelXSmall">
-                {!loading ? (
-                    children || 'Button'
-                ) : (
-                    <Spinner size={EnhancerSizes[size]} />
-                )}
-            </Text>
-        )}
-        {!!endEnhancer && (
-            <MemoizedEnhancer
-                enhancer={endEnhancer}
-                size={EnhancerSizes[size]}
-            />
-        )}
-        {!!displayNotificationDot && (
-            <div className="absolute top-0 right-0">
-                <NotificationDot size={8} />
-            </div>
-        )}
-    </AriaButton>
-);
+            )}
+            {!['circle', 'square'].includes(shape) && (
+                <Text kind="labelXSmall">
+                    {!loading ? (
+                        children || 'Button'
+                    ) : (
+                        <Spinner size={EnhancerSizes[size]} />
+                    )}
+                </Text>
+            )}
+            {!!endEnhancer && (
+                <MemoizedEnhancer
+                    enhancer={endEnhancer}
+                    size={EnhancerSizes[size]}
+                />
+            )}
+            {!!displayNotificationDot && (
+                <div className="absolute top-0 right-0">
+                    <NotificationDot size={8} />
+                </div>
+            )}
+        </AriaButton>
+    );
+};

package/src/stories/callout/Callout.module.scss

@@ -1,9 +1,9 @@
 .content {
-    background-color: var(--pte-colors-backgroundSecondary);
+    background-color: var(--pte-new-colors-overlayMedium);
     border-radius: 6px;
     width: 100%;
     padding: 8px 10px;
-    color: var(--pte-colors-contentTertiary);
+    color: var(--pte-new-colors-contentSecondary);
 
     display: flex;
     flex-direction: row;
@@ -26,18 +26,18 @@
     }
 
     &.warning {
-        background-color: var(--pte-colors-backgroundWarning);
-        color: var(--pte-colors-contentWarning);
+        background-color: var(--pte-new-colors-backgroundWarning);
+        color: var(--pte-new-colors-contentWarning);
     }
 
     &.negative {
-        background-color: var(--pte-colors-backgroundNegative);
-        color: var(--pte-colors-contentNegative);
+        background-color: var(--pte-new-colors-overlayRed);
+        color: var(--pte-new-colors-contentNegative);
     }
 
     &.positive {
         .icon {
-            color: var(--pte-colors-contentPositive);
+            color: var(--pte-new-colors-contentPositive);
         }
     }
 }

package/src/stories/callout/Callout.stories.ts

@@ -51,3 +51,11 @@ export const Positive: Story = {
         ),
     },
 };
+
+export const IconHidden: Story = {
+    args: {
+        variant: 'default',
+        children: 'Please upload a receipt',
+        icon: null,
+    },
+};

package/src/stories/callout/Callout.tsx

@@ -4,12 +4,13 @@ import type {
 import clsx from 'clsx';
 import styles from './Callout.module.scss';
 import { RemoveFromDOM, TextWhenString } from '../utility';
+import { Icon, ArrowRight } from '../icon';
 
 export type CalloutProps = {
     /** The variant of the Callout. */
     variant?: 'default' | 'warning' | 'positive' | 'negative';
-    /** An icon to display in the Callout. For best results, use an SVG icon with fill set to `currentColor`. */
-    icon?: ReactElement;
+    /** An icon to display in the Callout. To hide icon, set `icon={null}`. For best results, use an SVG icon with fill set to `currentColor`. */
+    icon?: ReactElement | null;
     /** The contents of the Callout. */
     children?: ReactNode;
 } & Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
@@ -28,7 +29,7 @@ export type CalloutProps = {
  */
 export const Callout: FC<CalloutProps> = ({
     variant = 'default',
-    icon,
+    icon = <Icon icon={ArrowRight} size={16} className={styles.icon} />,
     children,
     className,
     ...props