@scalewing/react 0.1.0 → 0.3.0

package/dist/components/Split.js

@@ -0,0 +1,117 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { spacingScale } from '@scalewing/tokens';
+import { useCallback, useId, useLayoutEffect, useRef, useState, } from 'react';
+import { cx } from '../class-names.js';
+import { applySplitDrag, applySplitKey, cssLengthToPx, effectiveSplitMax, readSplitMetrics, splitPercent, } from '../split-size.js';
+function metricsFrom(node) {
+    const styles = getComputedStyle(node);
+    const remPx = cssLengthToPx(getComputedStyle(document.documentElement).fontSize) || 16;
+    return readSplitMetrics((name) => styles.getPropertyValue(name), remPx);
+}
+export function Split({ children, className, collapsed: collapsedProp, label, onCollapsedChange, ...rest }) {
+    const paneId = useId();
+    const splitRef = useRef(null);
+    const handleRef = useRef(null);
+    const dragRef = useRef(null);
+    const [width, setWidth] = useState(null);
+    const [range, setRange] = useState(null);
+    const [collapsedUncontrolled, setCollapsedUncontrolled] = useState(false);
+    const collapsed = collapsedProp ?? collapsedUncontrolled;
+    const setCollapsed = useCallback((next) => {
+        onCollapsedChange?.(next);
+        if (collapsedProp === undefined) {
+            setCollapsedUncontrolled(next);
+        }
+    }, [collapsedProp, onCollapsedChange]);
+    useLayoutEffect(() => {
+        const node = splitRef.current;
+        if (!node) {
+            return;
+        }
+        const measured = metricsFrom(node);
+        setRange({ min: measured.min, max: measured.max });
+        setWidth((current) => current ?? measured.defaultWidth);
+    }, []);
+    function dragMetrics() {
+        const split = splitRef.current;
+        const handle = handleRef.current;
+        if (!split) {
+            return { min: 0, max: 0, step: 16, defaultWidth: 0 };
+        }
+        const measured = metricsFrom(split);
+        const parentWidth = split.parentElement?.getBoundingClientRect().width ?? 0;
+        const handleWidth = handle?.getBoundingClientRect().width ?? 0;
+        return {
+            ...measured,
+            max: effectiveSplitMax(measured.max, parentWidth, handleWidth, measured.min),
+        };
+    }
+    function currentSnapshot() {
+        const measured = dragMetrics();
+        return {
+            collapsed,
+            width: width ?? measured.defaultWidth,
+        };
+    }
+    function applySnapshot(next) {
+        setWidth(next.width);
+        if (next.collapsed !== collapsed) {
+            setCollapsed(next.collapsed);
+        }
+    }
+    function onPointerDown(event) {
+        if (event.button !== 0 || !splitRef.current) {
+            return;
+        }
+        event.preventDefault();
+        event.currentTarget.focus();
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        dragRef.current = {
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            snapshot: currentSnapshot(),
+            metrics: dragMetrics(),
+            moved: false,
+        };
+    }
+    function onPointerMove(event) {
+        const drag = dragRef.current;
+        if (!drag || event.pointerId !== drag.pointerId) {
+            return;
+        }
+        const delta = event.clientX - drag.startX;
+        if (Math.abs(delta) >= spacingScale[1]) {
+            drag.moved = true;
+        }
+        applySnapshot(applySplitDrag(drag.snapshot, delta, drag.metrics));
+    }
+    function endDrag(event) {
+        const drag = dragRef.current;
+        if (!drag || event.pointerId !== drag.pointerId) {
+            return;
+        }
+        dragRef.current = null;
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+        if (!drag.moved && drag.snapshot.collapsed) {
+            setCollapsed(false);
+        }
+    }
+    function onKeyDown(event) {
+        if (!splitRef.current) {
+            return;
+        }
+        const next = applySplitKey(event.key, currentSnapshot(), dragMetrics());
+        if (!next) {
+            return;
+        }
+        event.preventDefault();
+        applySnapshot(next);
+    }
+    const valueNow = collapsed
+        ? 0
+        : range && width !== null
+            ? splitPercent(width, range.min, range.max)
+            : 0;
+    return (_jsxs("div", { ...rest, ref: splitRef, className: cx('sw-split', className), "data-collapsed": collapsed ? '' : undefined, children: [_jsx("div", { className: "sw-split-pane", id: paneId, "aria-hidden": collapsed || undefined, style: width === null ? undefined : { width: `${width}px` }, children: children }), _jsx("div", { ref: handleRef, "aria-controls": paneId, "aria-label": collapsed ? `Show ${label}` : `Resize ${label}`, "aria-orientation": "vertical", "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": valueNow, className: "sw-split-handle", onKeyDown: onKeyDown, onPointerCancel: endDrag, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, role: "separator", tabIndex: 0, children: _jsx("span", { "aria-hidden": "true", className: "sw-split-grip" }) })] }));
+}

package/dist/components/Table.d.ts

@@ -0,0 +1,32 @@
+import { type HTMLAttributes, type TdHTMLAttributes, type ThHTMLAttributes } from 'react';
+export type TableDensity = 'comfortable' | 'compact';
+export type TableProps = HTMLAttributes<HTMLTableElement> & {
+    density?: TableDensity;
+    stickyHeader?: boolean;
+};
+export declare const Table: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableElement> & {
+    density?: TableDensity;
+    stickyHeader?: boolean;
+} & import("react").RefAttributes<HTMLTableElement>>;
+export type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;
+export declare const TableHeader: import("react").ForwardRefExoticComponent<TableHeaderProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+export type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
+export declare const TableBody: import("react").ForwardRefExoticComponent<TableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
+export type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
+    selected?: boolean;
+};
+export declare const TableRow: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & {
+    selected?: boolean;
+} & import("react").RefAttributes<HTMLTableRowElement>>;
+type TableCellAlign = 'start' | 'end';
+export type TableCellProps = ((TdHTMLAttributes<HTMLTableCellElement> & {
+    as?: 'td';
+}) | (ThHTMLAttributes<HTMLTableCellElement> & {
+    as: 'th';
+})) & {
+    align?: TableCellAlign;
+    numeric?: boolean;
+    truncate?: boolean;
+};
+export declare const TableCell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+export {};

package/dist/components/Table.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, } from 'react';
+import { cx } from '../class-names.js';
+export const Table = forwardRef(function Table({ children, className, density = 'comfortable', stickyHeader = true, ...rest }, ref) {
+    return (_jsx("div", { className: "sw-table-wrap", children: _jsx("table", { ref: ref, className: cx('sw-table', density === 'compact' && 'sw-table-compact', stickyHeader && 'sw-table-sticky', className), ...rest, children: children }) }));
+});
+export const TableHeader = forwardRef(function TableHeader({ className, ...rest }, ref) {
+    return _jsx("thead", { ref: ref, className: className, ...rest });
+});
+export const TableBody = forwardRef(function TableBody({ className, ...rest }, ref) {
+    return _jsx("tbody", { ref: ref, className: className, ...rest });
+});
+export const TableRow = forwardRef(function TableRow({ className, selected = false, ...rest }, ref) {
+    return (_jsx("tr", { ref: ref, "aria-selected": selected || undefined, className: cx(selected && 'sw-table-row-selected', className), ...rest }));
+});
+export const TableCell = forwardRef(function TableCell({ align = 'start', as = 'td', className, numeric = false, truncate = false, ...rest }, ref) {
+    const Component = as;
+    const alignmentClass = numeric
+        ? 'sw-table-numeric'
+        : align === 'end'
+            ? 'sw-table-end'
+            : undefined;
+    return (_jsx(Component, { ref: ref, className: cx(alignmentClass, truncate && 'sw-table-clip', className), ...rest }));
+});

package/dist/components/Text.d.ts

@@ -1,13 +1,13 @@
 import { type SemanticColorKey, type TypographyVariant } from '@scalewing/tokens';
-import { type HTMLAttributes } from 'react';
+import { type HTMLAttributes, type LabelHTMLAttributes } from 'react';
 export type TextElement = 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'label' | 'strong';
-export type TextProps = HTMLAttributes<HTMLElement> & {
+export type TextProps = HTMLAttributes<HTMLElement> & Pick<LabelHTMLAttributes<HTMLLabelElement>, 'htmlFor'> & {
     as?: TextElement;
     color?: SemanticColorKey;
     truncate?: boolean;
     variant?: TypographyVariant;
 };
-export declare const Text: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+export declare const Text: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & Pick<LabelHTMLAttributes<HTMLLabelElement>, "htmlFor"> & {
     as?: TextElement;
     color?: SemanticColorKey;
     truncate?: boolean;

package/dist/components/Text.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, } from 'react';
 import { cx } from '../class-names.js';
 const defaultElement = {
     body: 'p',
     caption: 'span',
+    data: 'span',
     display: 'h1',
     heading: 'h2',
     label: 'span',

package/dist/components/Toast.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type ToastProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'popover'> & {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    timeoutMs?: number;
+    anchor?: Element | null;
+    target?: Element | null;
+    children: ReactNode;
+};
+export declare function Toast({ anchor, children, className, onOpenChange, open, target, timeoutMs, ...rest }: ToastProps): import("react").JSX.Element;

package/dist/components/Toast.js

@@ -0,0 +1,61 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useEffect, useRef, } from 'react';
+import { cx } from '../class-names.js';
+import { spacingClassNames } from '../spacing-classes.js';
+import { applyTravelVars, clearTravelVars, travelTranslate, } from '../toast-travel.js';
+const DEFAULT_TIMEOUT_MS = 800;
+function travels(anchor, target) {
+    return Boolean(anchor && target);
+}
+export function Toast({ anchor = null, children, className, onOpenChange, open, target = null, timeoutMs = DEFAULT_TIMEOUT_MS, ...rest }) {
+    const nodeRef = useRef(null);
+    const moving = travels(anchor, target);
+    useLayoutEffect(() => {
+        const node = nodeRef.current;
+        if (!node || typeof node.showPopover !== 'function') {
+            return;
+        }
+        if (!open) {
+            if (node.matches(':popover-open')) {
+                node.hidePopover();
+            }
+            clearTravelVars(node);
+            return;
+        }
+        if (moving && anchor && target) {
+            if (!node.matches(':popover-open')) {
+                node.showPopover();
+            }
+            applyTravelVars(node, travelTranslate(anchor.getBoundingClientRect(), target.getBoundingClientRect(), node.getBoundingClientRect()));
+            return;
+        }
+        clearTravelVars(node);
+        if (!node.matches(':popover-open')) {
+            node.showPopover();
+        }
+    }, [anchor, moving, open, target]);
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        const reducedMotion = typeof window.matchMedia === 'function' &&
+            window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (moving && !reducedMotion) {
+            return;
+        }
+        const timer = window.setTimeout(() => {
+            onOpenChange(false);
+        }, timeoutMs);
+        return () => {
+            window.clearTimeout(timer);
+        };
+    }, [moving, open, onOpenChange, timeoutMs]);
+    function onAnimationEnd(event) {
+        if (event.target !== event.currentTarget || !moving) {
+            return;
+        }
+        onOpenChange(false);
+    }
+    return (_jsx("div", { ...rest, ref: nodeRef, className: cx('sw-toast', moving && 'sw-toast-travel', ...spacingClassNames({ padding: 3 }), className), onAnimationEnd: onAnimationEnd, popover: "manual", role: "status", children: children }));
+}

package/dist/index.d.ts

@@ -1,6 +1,24 @@
+export { Accordion } from './components/Accordion.js';
+export type { AccordionProps } from './components/Accordion.js';
+export { AppHeader, type AppHeaderProps } from './components/AppHeader.js';
+export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, } from './components/Badge.js';
+export { BarChart, type BarChartItem, type BarChartProps, } from './components/BarChart.js';
+export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, } from './components/Button.js';
 export { Box, type BoxElement, type BoxProps } from './components/Box.js';
 export { Card, type CardProps, type CardVariant } from './components/Card.js';
+export { Dialog } from './components/Dialog.js';
+export type { DialogProps } from './components/Dialog.js';
+export { Toast } from './components/Toast.js';
+export type { ToastProps } from './components/Toast.js';
+export { Field, type FieldProps, type FieldSize } from './components/Field.js';
 export { Inline, type InlineProps } from './components/Inline.js';
+export { Split } from './components/Split.js';
+export type { SplitProps } from './components/Split.js';
+export { Nav, type NavProps } from './components/Nav.js';
+export { SegmentedControl, type SegmentedControlProps, type SegmentedItem, } from './components/SegmentedControl.js';
+export { Select } from './components/Select.js';
+export type { SelectAction, SelectOption, SelectProps, } from './components/Select.js';
 export { Stack, type Align, type Justify, type StackProps, } from './components/Stack.js';
+export { Table, TableBody, TableCell, TableHeader, TableRow, type TableBodyProps, type TableCellProps, type TableDensity, type TableHeaderProps, type TableProps, type TableRowProps, } from './components/Table.js';
 export { Text, type TextElement, type TextProps } from './components/Text.js';
 export { ThemeProvider, useTheme, type ThemeProviderProps, } from './theme/ThemeProvider.js';

package/dist/index.js

@@ -1,6 +1,19 @@
+export { Accordion } from './components/Accordion.js';
+export { AppHeader } from './components/AppHeader.js';
+export { Badge, } from './components/Badge.js';
+export { BarChart, } from './components/BarChart.js';
+export { Button, } from './components/Button.js';
 export { Box } from './components/Box.js';
 export { Card } from './components/Card.js';
+export { Dialog } from './components/Dialog.js';
+export { Toast } from './components/Toast.js';
+export { Field } from './components/Field.js';
 export { Inline } from './components/Inline.js';
+export { Split } from './components/Split.js';
+export { Nav } from './components/Nav.js';
+export { SegmentedControl, } from './components/SegmentedControl.js';
+export { Select } from './components/Select.js';
 export { Stack, } from './components/Stack.js';
+export { Table, TableBody, TableCell, TableHeader, TableRow, } from './components/Table.js';
 export { Text } from './components/Text.js';
 export { ThemeProvider, useTheme, } from './theme/ThemeProvider.js';

package/dist/palette/amber.css

@@ -0,0 +1,21 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #B45309;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'] {
+  --sw-color-accent: #FCD34D;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(68, 61, 38, 0.72);
+  --sw-glass-border: rgba(254, 237, 184, 0.22);
+  --sw-glass-specular: rgba(254, 246, 219, 0.28);
+}

package/dist/palette/capri.css

@@ -0,0 +1,21 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #0077B6;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'] {
+  --sw-color-accent: #48CAE4;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(36, 59, 66, 0.72);
+  --sw-glass-border: rgba(182, 234, 244, 0.22);
+  --sw-glass-specular: rgba(218, 244, 250, 0.28);
+}

package/dist/palette/cerulean.css

@@ -0,0 +1,21 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #0066CC;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'] {
+  --sw-color-accent: #5AC8FA;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(39, 59, 70, 0.72);
+  --sw-glass-border: rgba(189, 233, 253, 0.22);
+  --sw-glass-specular: rgba(222, 244, 254, 0.28);
+}

package/dist/palette/cornflower.css

@@ -0,0 +1,21 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #4F6BED;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'] {
+  --sw-color-accent: #93A4FF;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(49, 52, 71, 0.72);
+  --sw-glass-border: rgba(212, 219, 255, 0.22);
+  --sw-glass-specular: rgba(233, 237, 255, 0.28);
+}

package/dist/palette/fuchsia.css

@@ -0,0 +1,21 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #C026D3;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'] {
+  --sw-color-accent: #E879F9;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(65, 45, 69, 0.72);
+  --sw-glass-border: rgba(246, 201, 253, 0.22);
+  --sw-glass-specular: rgba(250, 228, 254, 0.28);
+}

package/dist/palette/harvest.css

@@ -0,0 +1,31 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-background: #E3DCC8;
+  --sw-color-surface: #EBE6D6;
+  --sw-color-text: #1D1D1F;
+  --sw-color-muted: #5C5346;
+  --sw-color-accent: #3E3E24;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-color-border: #C9C2AE;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'] {
+  --sw-color-background: #263E24;
+  --sw-color-surface: #2F4A2C;
+  --sw-color-text: #E3DCC8;
+  --sw-color-muted: #B8B090;
+  --sw-color-accent: #CEA453;
+  --sw-color-onAccent: #101214;
+  --sw-color-border: #3D5238;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(60, 52, 40, 0.72);
+  --sw-glass-border: rgba(235, 219, 186, 0.22);
+  --sw-glass-specular: rgba(245, 237, 221, 0.28);
+}

package/dist/palette/ink.css

@@ -0,0 +1,21 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #1D1D1F;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'] {
+  --sw-color-accent: #F5F5F7;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(67, 67, 69, 0.72);
+  --sw-glass-border: rgba(251, 251, 252, 0.22);
+  --sw-glass-specular: rgba(253, 253, 253, 0.28);
+}

package/dist/palette/mocha.css

@@ -0,0 +1,31 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-background: #F3E3C3;
+  --sw-color-surface: #F8EEE0;
+  --sw-color-text: #473333;
+  --sw-color-muted: #6B5348;
+  --sw-color-accent: #473333;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-color-border: #E0CBA8;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'] {
+  --sw-color-background: #473333;
+  --sw-color-surface: #5A4242;
+  --sw-color-text: #F3E3C3;
+  --sw-color-muted: #D4C4A8;
+  --sw-color-accent: #E8C69F;
+  --sw-color-onAccent: #101214;
+  --sw-color-border: #6B5353;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(65, 59, 53, 0.72);
+  --sw-glass-border: rgba(246, 232, 217, 0.22);
+  --sw-glass-specular: rgba(250, 244, 236, 0.28);
+}

package/dist/palette/navy.css

@@ -0,0 +1,21 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #0A2540;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'] {
+  --sw-color-accent: #7EB8FF;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(46, 56, 71, 0.72);
+  --sw-glass-border: rgba(203, 227, 255, 0.22);
+  --sw-glass-specular: rgba(229, 241, 255, 0.28);
+}

package/dist/palette/postcard.css

@@ -0,0 +1,31 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-background: #E4E4CC;
+  --sw-color-surface: #EEEEDD;
+  --sw-color-text: #1B2130;
+  --sw-color-muted: #5C5346;
+  --sw-color-accent: #A33B2B;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-color-border: #D0D0B8;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'] {
+  --sw-color-background: #1B2130;
+  --sw-color-surface: #252B40;
+  --sw-color-text: #E4E4CC;
+  --sw-color-muted: #B8B49A;
+  --sw-color-accent: #EEAF90;
+  --sw-color-onAccent: #101214;
+  --sw-color-border: #3A4158;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(66, 54, 51, 0.72);
+  --sw-glass-border: rgba(248, 223, 211, 0.22);
+  --sw-glass-specular: rgba(252, 239, 233, 0.28);
+}

package/dist/palette/raspberry.css

@@ -0,0 +1,21 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #DB2777;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'] {
+  --sw-color-accent: #F472B6;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(67, 43, 57, 0.72);
+  --sw-glass-border: rgba(251, 199, 226, 0.22);
+  --sw-glass-specular: rgba(253, 227, 240, 0.28);
+}

package/dist/palette/sky.css

@@ -0,0 +1,21 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #0369A1;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'] {
+  --sw-color-accent: #38BDF8;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(33, 57, 69, 0.72);
+  --sw-glass-border: rgba(175, 229, 252, 0.22);
+  --sw-glass-specular: rgba(215, 242, 254, 0.28);
+}

package/dist/palette/soft-blue.css

@@ -0,0 +1,21 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #3B6FD4;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'] {
+  --sw-color-accent: #8BB8FF;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(48, 56, 71, 0.72);
+  --sw-glass-border: rgba(209, 227, 255, 0.22);
+  --sw-glass-specular: rgba(232, 241, 255, 0.28);
+}