@bspk/ui 1.0.1 → 1.1.12

package/src/Avatar.tsx

@@ -1,7 +1,7 @@
-import { css } from '@emotion/react';
+import './avatar.scss';
 import { ReactNode, useMemo } from 'react';
 
-import { COLOR_VARIABLES, ColorVariant } from './utils/colorVariants';
+import { ColorVariant } from './utils/colorVariants';
 
 import { CommonProps } from '.';
 
@@ -16,18 +16,6 @@ export type SizeVariant =
     | 'xxxx-large'
     | 'xxxxx-large';
 
-const SIZE_VARIANTS: Record<SizeVariant, { height: string; font: string }> = {
-    'x-small': { font: '--labels-x-small', height: '--spacing-sizing-06' }, // 24
-    small: { font: '--labels-small', height: '--spacing-sizing-08' }, // 32,
-    medium: { font: '--labels-base', height: '--spacing-sizing-10' }, // 40
-    large: { font: '--labels-large', height: '--spacing-sizing-12' }, //48,
-    'x-large': { font: '--subheader-x-large', height: '--spacing-sizing-14' }, // 56,
-    'xx-large': { font: '--subheader-xx-large', height: '--spacing-sizing-17' }, // 72,
-    'xxx-large': { font: '--display-regular-small', height: '--spacing-sizing-19' }, //96,
-    'xxxx-large': { font: '--display-regular-medium', height: '--spacing-sizing-21' }, // 120,
-    'xxxxx-large': { font: '--display-regular-large', height: '--spacing-sizing-23' }, //144,
-};
-
 export type AvatarProps = CommonProps<'aria-label'> & {
     /**
      * The size of the avatar.
@@ -77,7 +65,7 @@ function Avatar({
     return (
         <>
             {children && (
-                <div aria-label={ariaLabel} css={style} data-avatar="" data-color={color} data-size={size}>
+                <div aria-label={ariaLabel} data-bspk="avatar" data-color={color} data-size={size}>
                     {children}
                 </div>
             )}
@@ -89,50 +77,4 @@ Avatar.bspkName = 'Avatar';
 
 export { Avatar };
 
-export const style = css`
-    --height: var(--spacing-sizing-10);
-    --font: var(--labels-base);
-    --foreground: var(--foreground-neutral-on-surface);
-    --background: var(--surface-neutral-t3-low);
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-    height: var(--height);
-    width: var(--height);
-    aspect-ratio: 1 / 1;
-    border-radius: 999px;
-    background-color: var(--background);
-    color: var(--foreground);
-    font: var(--font);
-
-    &:has(img) {
-        overflow: hidden;
-    }
-
-    img {
-        max-width: 100%;
-    }
-
-    ${Object.entries(SIZE_VARIANTS).map(
-        ([variant, { height, font }]) => css`
-            &[data-size='${variant}'] {
-                --height: var(${height});
-                --font: var(${font});
-            }
-        `,
-    )}
-
-    ${Object.entries(COLOR_VARIABLES).map(
-        ([variant, { foreground, surface }]) => css`
-            &[data-color='${variant}'] {
-                --foreground: var(${foreground});
-                --background: var(${surface});
-            }
-        `,
-    )};
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Badge.tsx

@@ -1,5 +1,4 @@
-import { css } from '@emotion/react';
-
+import './badge.scss';
 import { tryIntParse } from './utils/tryIntPsrse';
 
 export type BadgeProps = {
@@ -34,7 +33,7 @@ function Badge({ count: countProp, size = 'small', variant = 'primary' }: BadgeP
 
     return (
         count !== null && (
-            <div css={style} data-badge data-size={size} data-variant={variant}>
+            <div data-bspk="badge" data-size={size} data-variant={variant}>
                 {count > 99 ? '99+' : count}
             </div>
         )
@@ -45,31 +44,4 @@ Badge.bspkName = 'Badge';
 
 export { Badge };
 
-export const style = css`
-    --size: var(--spacing-sizing-06);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--radius-circular);
-    height: var(--size);
-    min-width: var(--size);
-    padding: 0 var(--spacing-sizing-02);
-
-    &[data-size='x-small'] {
-        --size: var(--spacing-sizing-05);
-        padding: 2px var(--spacing-sizing-01);
-    }
-
-    font: var(--labels-x-small);
-
-    color: var(--foreground-brand-on-primary);
-    background: var(--surface-brand-primary);
-
-    &[data-variant='secondary'] {
-        color: var(--foreground-brand-on-secondary);
-        background: var(--surface-brand-secondary);
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/BannerAlert.tsx

@@ -3,8 +3,8 @@ import { SvgClose } from '@bspk/icons/Close';
 import { SvgErrorFill } from '@bspk/icons/ErrorFill';
 import { SvgInfoFill } from '@bspk/icons/InfoFill';
 import { SvgWarningFill } from '@bspk/icons/WarningFill';
-import { css } from '@emotion/react';
 
+import './banner-alert.scss';
 import { ElementProps, AlertVariant, CallToActionButton } from './';
 
 export type BannerAlertProps = {
@@ -27,12 +27,12 @@ export type BannerAlertProps = {
      */
     header: string;
     /**
-     * The children of the banner alert.
+     * The body of the banner alert.
      *
      * @type multiline
      * @required
      */
-    children: string;
+    body: string;
     /**
      * This property may be undefined or an object containing required CallToActionButton properties.
      *
@@ -58,11 +58,11 @@ function BannerAlert({
     onClose,
     header,
     callToAction,
-    children,
+    body,
     elevated = false,
 }: ElementProps<BannerAlertProps, 'div'>) {
     return (
-        <article css={style} data-banner-alert data-elevated={elevated || undefined} data-variant={variant}>
+        <article data-bspk="banner-alert" data-elevated={elevated || undefined} data-variant={variant}>
             <div data-icon-bar>
                 {variant === 'error' && <SvgErrorFill />}
                 {variant === 'informational' && <SvgInfoFill />}
@@ -81,7 +81,7 @@ function BannerAlert({
                     </header>
                 )}
                 <div data-body>
-                    <span>{children}</span>
+                    <span>{body}</span>
                     {callToAction?.label && callToAction?.onClick && (
                         <button onClick={callToAction.onClick}>{callToAction.label}</button>
                     )}
@@ -95,117 +95,4 @@ BannerAlert.bspkName = 'BannerAlert';
 
 export { BannerAlert };
 
-export const style = css`
-    --color: var(--status-information);
-    --on-color: var(--status-on-information);
-    display: flex;
-    flex-direction: row;
-    border: 2px solid var(--color);
-    border-radius: var(--radius-medium);
-    box-sizing: border-box;
-    background-color: var(--surface-neutral-t1-base);
-    width: 100%;
-
-    &[data-variant='error'] {
-        --color: var(--status-error);
-        --on-color: var(--status-on-error);
-    }
-
-    &[data-variant='success'] {
-        --color: var(--status-success);
-        --on-color: var(--status-on-success);
-    }
-
-    &[data-variant='warning'] {
-        --color: var(--status-warning);
-        --on-color: var(--status-on-warning);
-    }
-
-    &[data-elevated] {
-        box-shadow: var(--drop-shadow-raise);
-    }
-
-    [data-icon-bar] {
-        flex: 1;
-        padding: var(--spacing-sizing-04) var(--spacing-sizing-03);
-        background: var(--color);
-        color: var(--on-color);
-        svg {
-            width: var(--spacing-sizing-06);
-            height: var(--spacing-sizing-06);
-        }
-    }
-
-    [data-content] {
-        flex: 100%;
-        display: flex;
-        flex-direction: column;
-        padding: var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-04);
-
-        header {
-            display: flex;
-            flex-direction: row;
-            gap: var(--spacing-sizing-03);
-            height: var(--spacing-sizing-12);
-            align-items: center;
-
-            span {
-                flex: 1;
-                display: flex;
-                align-items: center;
-                color: var(--foreground-neutral-on-surface);
-                font: var(--heading-h6);
-
-                @media (any-pointer: coarse) {
-                    font: var(--heading-h6);
-                }
-            }
-
-            // close button
-            button {
-                background: none;
-                border: none;
-                cursor: pointer;
-                padding: 0;
-                margin: 0 0 0 auto;
-                color: var(--foreground-neutral-on-surface-variant-01);
-
-                height: var(--spacing-sizing-08);
-                width: var(--spacing-sizing-08);
-
-                @media (any-pointer: coarse) {
-                    height: var(--spacing-sizing-12);
-                    width: var(--spacing-sizing-12);
-                }
-
-                svg {
-                    width: var(--spacing-sizing-04);
-                    height: var(--spacing-sizing-04);
-                }
-            }
-        }
-
-        [data-body] {
-            display: flex;
-            flex-direction: column;
-            gap: var(--spacing-sizing-02);
-            padding: 0 var(--spacing-sizing-02) var(--spacing-sizing-02) 0;
-
-            span {
-                font: var(--body-base);
-            }
-
-            button {
-                margin-left: auto;
-                background: none;
-                border: none;
-                cursor: pointer;
-                padding: 0 var(--spacing-sizing-03);
-                height: var(--spacing-sizing-12);
-                font: var(--labels-small);
-            }
-        }
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Button.tsx

@@ -1,5 +1,5 @@
-import { css } from '@emotion/react';
-import { ElementType, isValidElement, ReactNode } from 'react';
+import './button.scss';
+import { ElementType, ReactNode, isValidElement } from 'react';
 
 import { Tooltip } from './Tooltip';
 import { isValidIcon } from './utils/children';
@@ -96,8 +96,7 @@ function Button<As extends ElementType = 'button'>(props: ElementProps<ButtonPro
         <As
             {...containerProps}
             aria-label={label}
-            css={style}
-            data-button=""
+            data-bspk="button"
             data-destructive={destructive || undefined}
             data-size={size}
             data-variant={variant}
@@ -131,228 +130,4 @@ Button.bspkName = 'Button';
 
 export { Button };
 
-export const style = css`
-    &,
-    &:is(a) {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        gap: var(--spacing-sizing-02);
-        border: none;
-        cursor: pointer;
-        box-sizing: border-box;
-        background: transparent;
-        text-decoration: none;
-        width: fit-content;
-        position: relative;
-
-        [data-touch-target] {
-            min-width: var(--spacing-sizing-12);
-            min-height: var(--spacing-sizing-12);
-        }
-
-        &[data-width='hug'] {
-            width: fit-content;
-        }
-
-        &[data-width='fill'] {
-            width: 100%;
-        }
-
-        &[data-size='x-small'] {
-            font-size: var(--typography-size-xs);
-            line-height: var(--typography-line-height-lh-1);
-            height: var(--spacing-sizing-06);
-            min-width: var(--spacing-sizing-06);
-            gap: var(--spacing-sizing-02);
-
-            &:has([data-button-label]),
-            &[data-override] {
-                padding: 0 var(--spacing-sizing-02);
-            }
-
-            > [data-button-icon] {
-                width: var(--spacing-sizing-04);
-                height: var(--spacing-sizing-04);
-            }
-        }
-
-        &[data-size='small'] {
-            font-size: var(--typography-size-sm);
-            line-height: var(--typography-line-height-lh-2);
-            height: var(--spacing-sizing-08);
-            min-width: var(--spacing-sizing-08);
-
-            &:has([data-button-label]),
-            &[data-override] {
-                padding: 6px var(--spacing-sizing-04);
-            }
-
-            > [data-button-icon] {
-                width: var(--spacing-sizing-05);
-                height: var(--spacing-sizing-05);
-            }
-        }
-
-        &[data-size='medium'] {
-            font-size: var(--typography-size-base);
-            line-height: var(--typography-line-height-lh-2);
-            height: var(--spacing-sizing-10);
-            min-width: var(--spacing-sizing-10);
-
-            &:has([data-button-label]),
-            &[data-override] {
-                padding: var(--spacing-sizing-02) var(--spacing-sizing-04);
-            }
-
-            > [data-button-icon] {
-                width: var(--spacing-sizing-05);
-                height: var(--spacing-sizing-05);
-            }
-        }
-        &[data-size='large'] {
-            font-size: var(--typography-size-bp-md);
-            line-height: var(--typography-line-height-lh-4);
-            height: var(--spacing-sizing-12);
-            min-width: var(--spacing-sizing-12);
-
-            &:has([data-button-label]),
-            &[data-override] {
-                padding: var(--spacing-sizing-03) var(--spacing-sizing-04);
-            }
-
-            > [data-button-icon] {
-                width: var(--spacing-sizing-06);
-                height: var(--spacing-sizing-06);
-            }
-        }
-
-        &[disabled] {
-            cursor: not-allowed;
-        }
-
-        > [data-button-icon] {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-
-        > [data-button-label] {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-        }
-
-        &[data-variant='primary'] {
-            --primary-background: var(--surface-brand-primary);
-
-            background: linear-gradient(var(--primary-background), var(--primary-background));
-            color: var(--foreground-brand-on-primary);
-            border-radius: var(--radius-small);
-
-            &[disabled] {
-                color: var(--foreground-neutral-disabled-on-surface);
-                background: var(--interactions-disabled-opacity);
-            }
-
-            &:not([disabled]) {
-                [data-pseudo='hover'] > &,
-                &:hover {
-                    background:
-                        linear-gradient(
-                            var(--interactions-brand-hover-opacity),
-                            var(--interactions-brand-hover-opacity)
-                        ),
-                        linear-gradient(var(--primary-background), var(--primary-background));
-                }
-
-                [data-pseudo='active'] > &,
-                &:active {
-                    background:
-                        linear-gradient(
-                            var(--interactions-brand-press-opacity),
-                            var(--interactions-brand-press-opacity)
-                        ),
-                        linear-gradient(var(--primary-background), var(--primary-background));
-                }
-
-                [data-pseudo='focus'] > &,
-                &:focus-visible {
-                    outline: solid 2px var(--stroke-neutral-focus);
-                }
-            }
-
-            &[data-destructive] {
-                --primary-background: var(--status-error);
-                color: var(--foreground-brand-on-primary);
-            }
-        }
-
-        &[data-variant='secondary'] {
-            border: solid 1px var(--stroke-neutral-base);
-            border-radius: var(--radius-small);
-            color: var(--foreground-neutral-on-surface-variant-01);
-
-            &[disabled] {
-                color: var(--foreground-neutral-disabled-on-surface);
-                border: solid 1px var(--stroke-neutral-disabled-light);
-            }
-
-            &:not([disabled]) {
-                [data-pseudo='hover'] > &,
-                &:hover {
-                    background-color: var(--interactions-neutral-hover-opacity);
-                }
-
-                [data-pseudo='active'] > &,
-                &:active {
-                    background-color: var(--interactions-neutral-press-opacity);
-                }
-
-                [data-pseudo='focus'] > &,
-                &:focus-visible {
-                    outline: solid 2px var(--stroke-neutral-focus);
-                }
-            }
-
-            &[data-destructive] {
-                background: transparent;
-                color: var(--status-error);
-                border: solid 1px var(--status-error);
-            }
-        }
-
-        &[data-variant='tertiary'] {
-            background: transparent;
-            color: var(--foreground-neutral-on-surface-variant-01);
-
-            &[disabled] {
-                color: var(--foreground-neutral-disabled-on-surface);
-            }
-
-            &:not([disabled]) {
-                [data-pseudo='hover'] > &,
-                &:hover {
-                    background: var(--interactions-neutral-hover-opacity);
-                }
-
-                [data-pseudo='active'] > &,
-                &:active {
-                    background: var(--interactions-neutral-press-opacity);
-                }
-
-                [data-pseudo='focus'] > &,
-                &:focus-visible {
-                    outline: solid 2px var(--stroke-neutral-focus);
-                }
-            }
-
-            &[data-destructive] {
-                color: var(--status-error);
-            }
-        }
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Card.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import './card.scss';
 import { ReactNode } from 'react';
 
 export type CardProps = {
@@ -33,7 +33,7 @@ export type CardProps = {
  */
 function Card({ children, showPadding, variant = 'elevated' }: CardProps) {
     return (
-        <div css={style} data-card data-hide-padding={showPadding === false || undefined} data-variant={variant}>
+        <div data-bspk="card" data-hide-padding={showPadding === false || undefined} data-variant={variant}>
             {children}
         </div>
     );
@@ -43,24 +43,4 @@ Card.bspkName = 'Card';
 
 export { Card };
 
-export const style = css`
-    display: block;
-    background: var(--surface-neutral-t1-base);
-    padding: var(--spacing-sizing-03);
-    border-radius: var(--radius-medium);
-    overflow: hidden;
-
-    &[data-hide-padding] {
-        padding: 0;
-    }
-    &[data-variant='outlined'] {
-        border: solid 1px var(--stroke-neutral-low);
-    }
-    &[data-variant='elevated'] {
-        box-shadow:
-            0 1px 2px 0 var(--shadow-32),
-            0 1px 3px 1px var(--shadow-15);
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Checkbox.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import './checkbox.scss';
 import { useEffect, useRef } from 'react';
 
 import { ToggleControlProps, ElementProps } from './';
@@ -41,9 +41,8 @@ function Checkbox({
 
     return (
         <span
-            css={style}
             //
-            data-checkbox
+            data-bspk="checkbox"
         >
             <input
                 {...props}
@@ -80,95 +79,4 @@ Checkbox.bspkName = 'Checkbox';
 
 export { Checkbox };
 
-export const style = css`
-    display: block;
-    position: relative;
-    width: var(--spacing-sizing-06);
-    aspect-ratio: 1/1;
-    padding: 2px;
-
-    input[type='checkbox'] {
-        position: absolute;
-        opacity: 0;
-        z-index: 2;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        cursor: pointer;
-    }
-
-    span {
-        --stroke: var(--stroke-neutral-base);
-        --inner: none;
-        --background: none;
-        --color: var(--foreground-brand-on-primary);
-
-        box-sizing: border-box;
-        display: flex;
-        width: 20px;
-        aspect-ratio: 1/1;
-        cursor: pointer;
-        border-radius: 2px;
-        border: 2px solid var(--stroke);
-        align-items: center;
-        flex-direction: column;
-        justify-content: center;
-        position: relative;
-        background: var(--background);
-
-        svg[data-checked] {
-            width: 14px;
-            display: none;
-        }
-        svg[data-indeterminate] {
-            width: 12px;
-            display: none;
-        }
-        color: var(--color);
-    }
-
-    input[type='checkbox']:not(:checked, :indeterminate, :disabled) {
-        &:hover + span {
-            background-color: var(--interactions-neutral-hover-opacity);
-        }
-        &:active + span {
-            background-color: var(--interactions-neutral-press-opacity);
-        }
-    }
-
-    input[type='checkbox']:checked + span svg[data-checked],
-    input[type='checkbox']:indeterminate + span svg[data-indeterminate] {
-        display: block;
-    }
-
-    input[type='checkbox']:checked + span,
-    input[type='checkbox']:indeterminate + span {
-        --stroke: var(--stroke-brand-primary);
-        --background: var(--surface-brand-primary);
-    }
-
-    input[type='checkbox']:disabled {
-        pointer-events: none;
-        & + span {
-            --stroke: var(--stroke-neutral-interactions-disabled-light);
-        }
-        &:is(:checked, :indeterminate) + span {
-            --stroke: transparent;
-            --background: var(--interactions-disabled-opacity);
-            --color: var(--foreground-neutral-disabled-on-surface);
-        }
-    }
-
-    input[type='checkbox'][aria-invalid]:not(:disabled) {
-        &:checked + span,
-        &:indeterminate + span {
-            --background: var(--status-error);
-        }
-        & + span {
-            --stroke: var(--status-error);
-        }
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */