@bspk/ui 1.0.1 → 1.1.12

package/src/ToggleOption.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import './toggle-option.scss';
 import { ReactElement } from 'react';
 
 export type ToggleOptionProps = {
@@ -23,7 +23,7 @@ export type ToggleOptionProps = {
  */
 function ToggleOption({ label, description, children, size }: ToggleOptionProps) {
     return (
-        <label css={style} data-size={size} data-toggle-option="">
+        <label data-bspk="toggle-option" data-size={size}>
             <span data-control>{children}</span>
             <span data-content>
                 <span data-label>{label}</span>
@@ -37,81 +37,4 @@ ToggleOption.bspkName = 'ToggleOption';
 
 export { ToggleOption };
 
-export const style = css`
-    display: flex;
-    width: 100%;
-    box-sizing: border-box;
-    flex-direction: row;
-    padding: 0 var(--spacing-sizing-01) 0 0;
-    gap: var(--spacing-sizing-02);
-    user-select: none;
-    background: unset;
-    border: unset;
-    cursor: pointer;
-    min-height: var(--spacing-sizing-08);
-    align-items: center;
-
-    &:has([data-description]) {
-        align-items: unset;
-    }
-
-    @media (any-pointer: coarse) {
-        min-height: var(--spacing-sizing-12);
-    }
-
-    [data-content] {
-        display: flex;
-        flex-direction: column;
-        padding: 2px 0;
-    }
-
-    [data-label] {
-        color: var(--foreground-neutral-on-surface);
-        font: var(--labels-base);
-    }
-
-    [data-description] {
-        font: var(--body-small);
-        color: var(--foreground-neutral-on-surface-variant-01);
-    }
-
-    &[data-size='small'] {
-        [data-label] {
-            font: var(--labels-small);
-        }
-
-        [data-description] {
-            font: var(--body-x-small);
-        }
-    }
-
-    &[data-size='large'] {
-        [data-label] {
-            font: var(--labels-large);
-        }
-
-        [data-description] {
-            font: var(--body-base);
-        }
-    }
-
-    &:not(:has(:disabled)) {
-        [data-pseudo='focus'] &,
-        &:focus-visible,
-        &:has(*:focus-visible) {
-            outline: var(--stroke-neutral-focus) 2px solid;
-        }
-    }
-
-    &:has(:disabled) {
-        [data-label] {
-            color: var(--foreground-neutral-disabled-on-surface);
-        }
-
-        [data-description] {
-            color: var(--foreground-neutral-disabled-on-surface);
-        }
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Tooltip.tsx

@@ -1,5 +1,5 @@
-import { css } from '@emotion/react';
-import { cloneElement, ReactElement, useId, useMemo, useRef, useState } from 'react';
+import './tooltip.scss';
+import { ReactElement, cloneElement, useId, useMemo, useRef, useState } from 'react';
 
 import { Portal } from './Portal';
 import { Placement, useFloating } from './hooks/useFloating';
@@ -69,9 +69,8 @@ function Tooltip({ placement = 'top', label, children, disabled = false, tail =
             {label && (
                 <Portal>
                     <div
-                        css={style}
+                        data-bspk="tooltip"
                         data-placement={middlewareData?.offset?.placement}
-                        data-tooltip=""
                         id={id}
                         ref={(node) => {
                             elements.setFloating(node);
@@ -105,66 +104,4 @@ Tooltip.bspkName = 'Tooltip';
 
 export { Tooltip };
 
-export const style = css`
-    position: fixed;
-    pointer-events: none;
-    z-index: var(--z-index-tooltip-popover);
-
-    [data-text] {
-        display: block;
-        z-index: 2;
-        position: relative;
-        background-color: var(--surface-neutral-inverse);
-        border-radius: var(--radius-small);
-        color: var(--foreground-neutral-on-inverse-surface);
-        box-shadow: var(--drop-shadow-float);
-        font: var(--labels-small);
-        padding: var(--spacing-sizing-01) var(--spacing-sizing-02);
-        border: none;
-        transition: opacity 0.2s ease-in-out;
-        width: max-content;
-    }
-
-    --arrow-size: var(--spacing-sizing-01);
-    --arrow-offset: calc(var(--arrow-size) * -2);
-
-    [data-arrow] {
-        display: block;
-        z-index: 1;
-        position: absolute;
-        width: 0;
-        height: 0;
-        border-style: solid;
-        border-width: var(--arrow-size) var(--arrow-size) var(--arrow-size) var(--arrow-size);
-        border-color: transparent transparent transparent transparent;
-    }
-
-    &[data-placement^='bottom'] {
-        [data-arrow] {
-            top: var(--arrow-offset);
-            border-bottom-color: var(--surface-neutral-inverse);
-        }
-    }
-
-    &[data-placement^='top'] {
-        [data-arrow] {
-            border-top-color: var(--surface-neutral-inverse);
-        }
-    }
-
-    &[data-placement^='right'] {
-        [data-arrow] {
-            margin-left: var(--arrow-offset);
-            border-right-color: var(--surface-neutral-inverse);
-        }
-    }
-
-    &[data-placement^='left'] {
-        [data-arrow] {
-            right: var(--arrow-offset);
-            border-left-color: var(--surface-neutral-inverse);
-        }
-    }
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/TopNavigation.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import './top-navigation.scss';
 
 export type TopNavigationProps = {
     /** The content of the top navigation. */
@@ -11,19 +11,11 @@ export type TopNavigationProps = {
  * @name TopNavigation
  */
 function TopNavigation({ children }: TopNavigationProps) {
-    return (
-        <div css={style} data-top-navigation>
-            {children}
-        </div>
-    );
+    return <div data-bspk="top-navigation">{children}</div>;
 }
 
 TopNavigation.bspkName = 'TopNavigation';
 
 export { TopNavigation };
 
-export const style = css`
-    display: flex;
-`;
-
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/Txt.tsx

@@ -1,4 +1,3 @@
-import { css } from '@emotion/react';
 import { ElementType } from 'react';
 
 import { TxtVariant } from './utils/txtVariants';
@@ -49,14 +48,7 @@ function Txt<As extends ElementType = 'span'>({
     const As: ElementType = as || 'span';
 
     return (
-        <As
-            {...containerProps}
-            css={css`
-                font: var(--${variant});
-            `}
-            data-txt
-            style={styleProp}
-        >
+        <As {...containerProps} data-bspk="txt" style={{ ...styleProp, font: `var(--${variant})` }}>
             {content}
         </As>
     );

package/src/avatar.scss

@@ -0,0 +1,74 @@
+[data-bspk='avatar'] {
+    --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%;
+    }
+
+    &[data-size='x-small'] {
+        --height: var(--spacing-sizing-06);
+        --font: var(--labels-x-small);
+    }
+
+    &[data-size='small'] {
+        --height: var(--spacing-sizing-08);
+        --font: var(--labels-small);
+    }
+
+    &[data-size='medium'] {
+        --height: var(--spacing-sizing-10);
+        --font: var(--labels-base);
+    }
+
+    &[data-size='large'] {
+        --height: var(--spacing-sizing-12);
+        --font: var(--labels-large);
+    }
+
+    &[data-size='x-large'] {
+        --height: var(--spacing-sizing-14);
+        --font: var(--subheader-x-large);
+    }
+
+    &[data-size='xx-large'] {
+        --height: var(--spacing-sizing-17);
+        --font: var(--subheader-xx-large);
+    }
+
+    &[data-size='xxx-large'] {
+        --height: var(--spacing-sizing-19);
+        --font: var(--display-regular-small);
+    }
+
+    &[data-size='xxxx-large'] {
+        --height: var(--spacing-sizing-21);
+        --font: var(--display-regular-medium);
+    }
+
+    &[data-size='xxxxx-large'] {
+        --height: var(--spacing-sizing-23);
+        --font: var(--display-regular-large);
+    }
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/badge.scss

@@ -0,0 +1,28 @@
+[data-bspk='badge'] {
+    --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/{BannerAlert.js → src/banner-alert.scss}

@@ -1,24 +1,7 @@
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-import { SvgCheckCircleFill } from '@bspk/icons/CheckCircleFill';
-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';
-
-/**
- * A visual and contextual message used to communicate an important message or notification to users relating to a
- * status or the body content of a page.
- *
- * @name BannerAlert
- */
-function BannerAlert({ variant = 'informational', onClose, header, callToAction, children, elevated = false, }) {
-    return (jsxs("article", { css: style, "data-banner-alert": true, "data-elevated": elevated || undefined, "data-variant": variant, children: [jsxs("div", { "data-icon-bar": true, children: [variant === 'error' && jsx(SvgErrorFill, {}), variant === 'informational' && jsx(SvgInfoFill, {}), variant === 'success' && jsx(SvgCheckCircleFill, {}), variant === 'warning' && jsx(SvgWarningFill, {})] }), jsxs("div", { "data-content": true, children: [(header || onClose) && (jsxs("header", { children: [jsx("span", { children: header }), typeof onClose === 'function' && (jsx("button", { "aria-label": "Close", onClick: onClose, type: "button", children: jsx(SvgClose, {}) }))] })), jsxs("div", { "data-body": true, children: [jsx("span", { children: children }), callToAction?.label && callToAction?.onClick && (jsx("button", { onClick: callToAction.onClick, children: callToAction.label }))] })] })] }));
-}
-BannerAlert.bspkName = 'BannerAlert';
-const style = css `
+[data-bspk='banner-alert'] {
     --color: var(--status-information);
     --on-color: var(--status-on-information);
+
     display: flex;
     flex-direction: row;
     border: 2px solid var(--color);
@@ -51,6 +34,7 @@ const style = css `
         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);
@@ -90,7 +74,6 @@ const style = css `
                 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);
 
@@ -127,7 +110,6 @@ const style = css `
             }
         }
     }
-`;
+}
 
-export { BannerAlert, style };
-//# sourceMappingURL=BannerAlert.js.map
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/{styles/base.css → base.scss}

@@ -1,5 +1,4 @@
 /**
-
   * Base Styles
   * This file is not generated or distributed through @bspk/styles.
   * If not using a StylesProvider (recommended), this file should be imported first in the main stylesheet .
@@ -9,6 +8,8 @@
   * This file will NOT contain any classes
 */
 
+@use './colors';
+
 :root {
     --z-index-tooltip-popover: 1100;
     --z-index-dialog: 1000;
@@ -86,7 +87,7 @@ a[data-subtle-inverse] {
 
     &:disabled {
         pointer-events: none;
-        color: var(--foreground-link-text-subtle-inverse-disabled);
+        color: var(--foreground-link-text-subtle-inversed-disabled);
     }
 }
 
@@ -116,6 +117,7 @@ select:-internal-autofill-selected {
 
 ol {
     list-style-type: decimal;
+
     li {
         list-style-type: decimal;
         margin-left: var(--spacing-sizing-05);
@@ -124,6 +126,7 @@ ol {
 
 ul {
     list-style-type: disc;
+
     li {
         list-style-type: disc;
         margin-left: var(--spacing-sizing-05);
@@ -135,7 +138,6 @@ ul {
     touch-action: manipulation;
     -webkit-tap-highlight-color: transparent;
     -webkit-touch-callout: none;
-    -webkit-user-select: none;
     user-select: none;
     position: absolute;
     z-index: 1;

package/src/button.scss

@@ -0,0 +1,218 @@
+[data-bspk='button'] {
+    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.scss

@@ -0,0 +1,23 @@
+[data-bspk='card'] {
+    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 */