seblify 0.2.1 → 0.4.0

package/dist/components/utility/format/relative-time/formatRelativeTime.js

@@ -0,0 +1,530 @@
+import { formatDuration } from '../duration/formatDuration';
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const WEEK = 7 * DAY;
+const MONTH = 4 * WEEK;
+const YEAR = 12 * MONTH;
+const CALENDAR_TIME_THRESHOLD = 13 * HOUR;
+const MAX_TIMEOUT = 2_147_483_647;
+const DEFAULT_LABEL_THRESHOLD = SECOND - 1;
+const UNIT_MILLISECONDS = {
+    second: SECOND,
+    minute: MINUTE,
+    hour: HOUR,
+    day: DAY,
+    week: WEEK,
+    month: MONTH,
+    year: YEAR,
+};
+const UNIT_INDEX = {
+    second: 0,
+    minute: 1,
+    hour: 2,
+    day: 3,
+    week: 4,
+    month: 5,
+    year: 6,
+};
+export function formatRelativeTime(value, options = {}) {
+    const state = getRelativeTimeState(value, options);
+    if (state.label !== undefined) {
+        return state.label;
+    }
+    if (usesDurationFormatting(options)) {
+        const durationText = formatRelativeTimeDuration(state, options);
+        if (options.presentation === 'unit') {
+            return durationText;
+        }
+        return formatRelativeDuration(durationText, state, options);
+    }
+    if (options.presentation === 'unit') {
+        return new Intl.NumberFormat(options.locale, {
+            style: 'unit',
+            unit: state.unit,
+            unitDisplay: options.style ?? 'long',
+        }).format(state.amount);
+    }
+    const formatter = new Intl.RelativeTimeFormat(options.locale, {
+        numeric: state.direction === 'present' ? 'auto' : 'always',
+        style: options.style ?? 'long',
+    });
+    return formatter.format(state.signedAmount, state.unit);
+}
+export function getRelativeTimeState(value, options = {}) {
+    const targetTime = toTime(value, 'value');
+    const fromTime = options.from === undefined ? Date.now() : toTime(options.from, 'from');
+    const state = selectRelativeTimeState(targetTime, fromTime, options);
+    return {
+        amount: state.amount,
+        direction: state.direction,
+        label: state.label,
+        milliseconds: state.milliseconds,
+        signedAmount: state.signedAmount,
+        unit: state.unit,
+        updateInMilliseconds: getUpdateInterval(targetTime, fromTime, options, state),
+    };
+}
+function selectRelativeTimeState(targetTime, fromTime, options) {
+    const milliseconds = targetTime - fromTime;
+    const direction = getDirection(milliseconds);
+    const absoluteMilliseconds = Math.abs(milliseconds);
+    const unitSteps = options.unitSteps ?? 'detailed';
+    const selected = selectUnit(absoluteMilliseconds, unitSteps, options);
+    const labelSelection = selectLabel(milliseconds, options.labels);
+    const calendarLabel = selectCalendarLabel(targetTime, fromTime, milliseconds, options);
+    const label = labelSelection?.label ?? calendarLabel;
+    const signedAmount = direction === 'past' ? -selected.amount : selected.amount;
+    return {
+        amount: selected.amount,
+        direction,
+        label,
+        labelSelection,
+        milliseconds,
+        signedAmount,
+        unit: selected.unit,
+    };
+}
+function usesDurationFormatting(options) {
+    return ((options.maxUnits !== undefined && Math.floor(options.maxUnits) > 1) ||
+        (options.minUnits !== undefined && Math.floor(options.minUnits) > 1));
+}
+function formatRelativeTimeDuration(state, options) {
+    const minUnits = options.minUnits;
+    const maxUnits = options.maxUnits === undefined && minUnits !== undefined
+        ? minUnits
+        : options.maxUnits;
+    return formatDuration(Math.abs(state.milliseconds), {
+        largestUnit: getDurationLargestUnit(state.unit, options),
+        locale: options.locale,
+        maxUnits,
+        minUnits,
+        rounding: options.rounding,
+        smallestUnit: (options.smallestUnit ?? 'second'),
+        style: options.style,
+    });
+}
+function getDurationLargestUnit(selectedUnit, options) {
+    if (options.largestUnit !== undefined) {
+        return options.largestUnit;
+    }
+    const minUnits = getPositiveIntegerOption(options.minUnits);
+    if (minUnits === undefined || minUnits <= 1) {
+        return selectedUnit;
+    }
+    const smallestUnit = options.smallestUnit ?? 'second';
+    const smallestUnitIndex = UNIT_INDEX[smallestUnit];
+    if (smallestUnitIndex === undefined) {
+        throw new RangeError('Invalid relative time smallestUnit.');
+    }
+    const selectedUnitIndex = UNIT_INDEX[selectedUnit];
+    const inferredUnitIndex = Math.min(UNIT_INDEX.year, Math.max(selectedUnitIndex, smallestUnitIndex + minUnits - 1));
+    return unitFromIndex(inferredUnitIndex);
+}
+function getPositiveIntegerOption(value) {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (!Number.isFinite(value) || value < 1) {
+        throw new RangeError('Invalid relative time unit count.');
+    }
+    return Math.floor(value);
+}
+function unitFromIndex(index) {
+    const unit = Object.keys(UNIT_INDEX).find((candidate) => UNIT_INDEX[candidate] === index);
+    if (unit === undefined) {
+        throw new RangeError('Invalid relative time unit index.');
+    }
+    return unit;
+}
+function formatRelativeDuration(durationText, state, options) {
+    const formatter = new Intl.RelativeTimeFormat(options.locale, {
+        numeric: state.direction === 'present' ? 'auto' : 'always',
+        style: options.style ?? 'long',
+    });
+    if (state.direction === 'present') {
+        return formatter.format(0, 'second');
+    }
+    const sampleAmount = state.direction === 'past' ? -1 : 1;
+    const parts = formatter.formatToParts(sampleAmount, 'second');
+    const firstUnitPartIndex = parts.findIndex(isRelativeTimeNumberPart);
+    const lastUnitPartIndex = findLastRelativeTimeNumberPartIndex(parts);
+    if (firstUnitPartIndex === -1 || lastUnitPartIndex === -1) {
+        return formatter.format(sampleAmount, 'second');
+    }
+    const suffix = removeUnitText(parts
+        .slice(lastUnitPartIndex + 1)
+        .map((part) => part.value)
+        .join(''), options);
+    return [
+        ...parts.slice(0, firstUnitPartIndex).map((part) => part.value),
+        durationText,
+        suffix,
+    ].join('');
+}
+function findLastRelativeTimeNumberPartIndex(parts) {
+    for (let index = parts.length - 1; index >= 0; index -= 1) {
+        if (isRelativeTimeNumberPart(parts[index])) {
+            return index;
+        }
+    }
+    return -1;
+}
+function isRelativeTimeNumberPart(part) {
+    return (part.type === 'integer' ||
+        part.type === 'decimal' ||
+        part.type === 'fraction' ||
+        part.type === 'group');
+}
+function removeUnitText(text, options) {
+    const unitText = new Intl.NumberFormat(options.locale, {
+        style: 'unit',
+        unit: 'second',
+        unitDisplay: options.style ?? 'long',
+    })
+        .formatToParts(1)
+        .find((part) => part.type === 'unit')?.value;
+    if (unitText === undefined) {
+        return text;
+    }
+    const index = text.indexOf(unitText);
+    if (index === -1) {
+        return text;
+    }
+    const before = text.slice(0, index);
+    let after = text.slice(index + unitText.length);
+    if (after.startsWith('.') && (after.length === 1 || after[1] === ' ')) {
+        after = after.slice(1);
+    }
+    if (before.trim() === '') {
+        return after;
+    }
+    return `${before}${after}`;
+}
+export function relativeTimeDateTime(value) {
+    return new Date(toTime(value, 'value')).toISOString();
+}
+function toTime(value, optionName) {
+    const time = value instanceof Date ? value.getTime() : new Date(value).getTime();
+    if (!Number.isFinite(time)) {
+        throw new RangeError(`Invalid relative time ${optionName}.`);
+    }
+    return time;
+}
+function getDirection(milliseconds) {
+    if (Math.abs(milliseconds) < SECOND) {
+        return 'present';
+    }
+    return milliseconds < 0 ? 'past' : 'future';
+}
+function selectUnit(milliseconds, unitSteps, options) {
+    validateUnitRange(options.largestUnit, options.smallestUnit);
+    const selected = unitSteps === 'detailed'
+        ? selectDetailedUnit(milliseconds)
+        : unitSteps === 'compact'
+            ? selectCompactUnit(milliseconds)
+            : selectSimpleUnit(milliseconds);
+    const largestLimited = limitLargestUnit(milliseconds, selected, options.largestUnit);
+    return limitSmallestUnit(milliseconds, largestLimited, options.smallestUnit);
+}
+function validateUnitRange(largestUnit, smallestUnit) {
+    if (largestUnit !== undefined && !(largestUnit in UNIT_MILLISECONDS)) {
+        throw new RangeError('Invalid relative time largestUnit.');
+    }
+    if (smallestUnit !== undefined && !(smallestUnit in UNIT_MILLISECONDS)) {
+        throw new RangeError('Invalid relative time smallestUnit.');
+    }
+    if (largestUnit !== undefined &&
+        smallestUnit !== undefined &&
+        UNIT_INDEX[largestUnit] < UNIT_INDEX[smallestUnit]) {
+        throw new RangeError('Relative time largestUnit must be larger than smallestUnit.');
+    }
+}
+function limitLargestUnit(milliseconds, selected, largestUnit) {
+    if (largestUnit === undefined) {
+        return selected;
+    }
+    if (!(largestUnit in UNIT_MILLISECONDS)) {
+        throw new RangeError('Invalid relative time largestUnit.');
+    }
+    if (UNIT_INDEX[selected.unit] <= UNIT_INDEX[largestUnit]) {
+        return selected;
+    }
+    return {
+        amount: wholeUnit(milliseconds, UNIT_MILLISECONDS[largestUnit]),
+        unit: largestUnit,
+    };
+}
+function limitSmallestUnit(milliseconds, selected, smallestUnit) {
+    if (smallestUnit === undefined) {
+        return selected;
+    }
+    if (UNIT_INDEX[selected.unit] >= UNIT_INDEX[smallestUnit]) {
+        return selected;
+    }
+    return {
+        amount: wholeUnit(milliseconds, UNIT_MILLISECONDS[smallestUnit]),
+        unit: smallestUnit,
+    };
+}
+function selectLabel(milliseconds, labels) {
+    if (labels === undefined) {
+        return undefined;
+    }
+    let match;
+    for (const label of labels) {
+        const thresholds = label.threshold === undefined
+            ? [DEFAULT_LABEL_THRESHOLD, -DEFAULT_LABEL_THRESHOLD]
+            : [label.threshold];
+        for (const threshold of thresholds) {
+            const thresholdIsInvalid = !Number.isFinite(threshold) && Math.abs(threshold) !== Infinity;
+            if (thresholdIsInvalid) {
+                throw new RangeError('Invalid relative time label threshold.');
+            }
+            const matches = milliseconds >= 0
+                ? threshold >= 0 && milliseconds <= threshold
+                : threshold < 0 && milliseconds >= threshold;
+            if (!matches) {
+                continue;
+            }
+            if (match === undefined ||
+                Math.abs(threshold) < Math.abs(match.threshold)) {
+                match = {
+                    label: label.label,
+                    threshold,
+                };
+            }
+        }
+    }
+    return match;
+}
+function selectCalendarLabel(targetTime, fromTime, milliseconds, options) {
+    if (options.mode !== 'calendar' || options.presentation === 'unit') {
+        return undefined;
+    }
+    if (Math.abs(milliseconds) < CALENDAR_TIME_THRESHOLD) {
+        return undefined;
+    }
+    const dayDelta = localCalendarDayIndex(targetTime) - localCalendarDayIndex(fromTime);
+    if (Math.abs(dayDelta) <= 1) {
+        return formatRelativeCalendarUnit(dayDelta, 'day', options);
+    }
+    if (Math.abs(dayDelta) <= 6) {
+        return formatRelativeWeekday(targetTime, dayDelta, options.locale);
+    }
+    if (Math.abs(dayDelta) <= 13) {
+        return formatRelativeCalendarUnit(dayDelta > 0 ? 1 : -1, 'week', options);
+    }
+    return undefined;
+}
+function localCalendarDayIndex(time) {
+    const date = new Date(time);
+    return Math.floor(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) / DAY);
+}
+function formatRelativeCalendarUnit(amount, unit, options) {
+    return new Intl.RelativeTimeFormat(options.locale, {
+        numeric: 'auto',
+        style: options.style ?? 'long',
+    }).format(amount, unit);
+}
+function formatRelativeWeekday(targetTime, dayDelta, locale) {
+    const resolvedLocale = new Intl.DateTimeFormat(locale).resolvedOptions().locale;
+    const language = resolvedLocale.split('-')[0];
+    const relativeWord = relativeWeekdayWord(language, dayDelta);
+    if (relativeWord === undefined) {
+        return undefined;
+    }
+    const weekday = new Intl.DateTimeFormat(locale, {
+        weekday: 'long',
+    }).format(new Date(targetTime));
+    return `${relativeWord} ${weekday}`;
+}
+function relativeWeekdayWord(language, dayDelta) {
+    if (language === 'da') {
+        return dayDelta > 0 ? 'næste' : 'sidste';
+    }
+    if (language === 'en') {
+        return dayDelta > 0 ? 'next' : 'last';
+    }
+    return undefined;
+}
+function selectCompactUnit(milliseconds) {
+    const seconds = wholeUnit(milliseconds, SECOND);
+    if (seconds < 60) {
+        return { amount: seconds, unit: 'second' };
+    }
+    if (seconds < 90) {
+        return { amount: 1, unit: 'minute' };
+    }
+    if (seconds < 120) {
+        return { amount: 1.5, unit: 'minute' };
+    }
+    const minutes = wholeUnit(milliseconds, MINUTE);
+    if (minutes < 60) {
+        return { amount: minutes, unit: 'minute' };
+    }
+    if (minutes < 90) {
+        return { amount: 1, unit: 'hour' };
+    }
+    if (minutes < 120) {
+        return { amount: 1.5, unit: 'hour' };
+    }
+    const hours = wholeUnit(milliseconds, HOUR);
+    if (hours < 24) {
+        return { amount: hours, unit: 'hour' };
+    }
+    if (hours < 36) {
+        return { amount: 1, unit: 'day' };
+    }
+    if (hours < 48) {
+        return { amount: 1.5, unit: 'day' };
+    }
+    const days = wholeUnit(milliseconds, DAY);
+    if (days < 7) {
+        return { amount: days, unit: 'day' };
+    }
+    if (milliseconds < 1.5 * WEEK) {
+        return { amount: 1, unit: 'week' };
+    }
+    if (days < 14) {
+        return { amount: 1.5, unit: 'week' };
+    }
+    const weeks = wholeUnit(milliseconds, WEEK);
+    if (weeks < 4) {
+        return { amount: weeks, unit: 'week' };
+    }
+    if (weeks < 6) {
+        return { amount: 1, unit: 'month' };
+    }
+    if (weeks < 8) {
+        return { amount: 1.5, unit: 'month' };
+    }
+    const months = wholeUnit(milliseconds, MONTH);
+    if (months < 12) {
+        return { amount: months, unit: 'month' };
+    }
+    if (months < 18) {
+        return { amount: 1, unit: 'year' };
+    }
+    if (months < 24) {
+        return { amount: 1.5, unit: 'year' };
+    }
+    return { amount: Math.floor(months / 12), unit: 'year' };
+}
+function selectSimpleUnit(milliseconds) {
+    const seconds = wholeUnit(milliseconds, SECOND);
+    if (seconds < 60) {
+        return { amount: seconds, unit: 'second' };
+    }
+    const minutes = wholeUnit(milliseconds, MINUTE);
+    if (minutes < 60) {
+        return { amount: minutes, unit: 'minute' };
+    }
+    const hours = wholeUnit(milliseconds, HOUR);
+    if (hours < 24) {
+        return { amount: hours, unit: 'hour' };
+    }
+    const days = wholeUnit(milliseconds, DAY);
+    if (days < 7) {
+        return { amount: days, unit: 'day' };
+    }
+    const weeks = wholeUnit(milliseconds, WEEK);
+    if (weeks < 4) {
+        return { amount: weeks, unit: 'week' };
+    }
+    const months = wholeUnit(milliseconds, MONTH);
+    if (months < 12) {
+        return { amount: months, unit: 'month' };
+    }
+    return { amount: Math.floor(months / 12), unit: 'year' };
+}
+function selectDetailedUnit(milliseconds) {
+    const seconds = wholeUnit(milliseconds, SECOND);
+    if (seconds <= 99) {
+        return { amount: seconds, unit: 'second' };
+    }
+    if (seconds < 120) {
+        return { amount: 1.5, unit: 'minute' };
+    }
+    const minutes = wholeUnit(milliseconds, MINUTE);
+    if (minutes <= 99) {
+        return { amount: minutes, unit: 'minute' };
+    }
+    if (minutes < 120) {
+        return { amount: 1.5, unit: 'hour' };
+    }
+    const hours = wholeUnit(milliseconds, HOUR);
+    if (hours <= 35) {
+        return { amount: hours, unit: 'hour' };
+    }
+    if (hours < 48) {
+        return { amount: 1.5, unit: 'day' };
+    }
+    const days = wholeUnit(milliseconds, DAY);
+    if (days <= 13) {
+        return { amount: days, unit: 'day' };
+    }
+    const weeks = wholeUnit(milliseconds, WEEK);
+    if (weeks <= 7) {
+        return { amount: weeks, unit: 'week' };
+    }
+    const months = wholeUnit(milliseconds, MONTH);
+    if (months <= 11) {
+        return { amount: Math.max(2, months), unit: 'month' };
+    }
+    if (months <= 17) {
+        return { amount: 1, unit: 'year' };
+    }
+    if (months <= 23) {
+        return { amount: 1.5, unit: 'year' };
+    }
+    return { amount: Math.floor(months / 12), unit: 'year' };
+}
+function wholeUnit(milliseconds, unitMilliseconds) {
+    return Math.floor(milliseconds / unitMilliseconds);
+}
+function getUpdateInterval(targetTime, fromTime, options, current) {
+    let lower = 0;
+    let upper = 1;
+    while (upper < MAX_TIMEOUT) {
+        if (!matchesRelativeTimeState(targetTime, fromTime + upper, options, current)) {
+            break;
+        }
+        lower = upper;
+        upper *= 2;
+    }
+    if (upper >= MAX_TIMEOUT) {
+        return MAX_TIMEOUT;
+    }
+    while (upper - lower > 1) {
+        const middle = Math.floor((lower + upper) / 2);
+        if (matchesRelativeTimeState(targetTime, fromTime + middle, options, current)) {
+            lower = middle;
+        }
+        else {
+            upper = middle;
+        }
+    }
+    return Math.max(1, upper);
+}
+function matchesRelativeTimeState(targetTime, fromTime, options, current) {
+    const next = selectRelativeTimeState(targetTime, fromTime, options);
+    if (current.labelSelection?.label !== undefined ||
+        next.labelSelection?.label !== undefined) {
+        return current.labelSelection?.label === next.labelSelection?.label;
+    }
+    if (current.labelSelection?.threshold !== next.labelSelection?.threshold) {
+        return false;
+    }
+    if (current.label !== next.label) {
+        return false;
+    }
+    if (usesDurationFormatting(options)) {
+        return (formatRelativeTimeDuration(current, options) ===
+            formatRelativeTimeDuration(next, options));
+    }
+    return (current.amount === next.amount &&
+        current.direction === next.direction &&
+        current.unit === next.unit);
+}

package/dist/design-system/inheritance/tokens.js

@@ -11,6 +11,12 @@ const inheritanceTokens = [
         value: 'ambient fill text color',
         description: 'Resolved readable foreground color for content placed on the current tone fill. Use when a child can render a solid tone surface.',
     },
+    {
+        name: '--seblify-current-tone-fill-hover',
+        category: 'Tone',
+        value: 'ambient fill hover color',
+        description: 'Resolved hover color for the current tone fill. Use when a child renders a solid interactive tone surface.',
+    },
     {
         name: '--seblify-current-tone-text',
         category: 'Tone',

package/dist/design-system/reserved-props/allowed-options.d.ts

@@ -1,15 +1,16 @@
 import type { Snippet } from 'svelte';
 import { CustomCssSize } from './complex-types';
 type SizeKeys = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-type ToneOptions = 'neutral' | 'primary' | 'success' | 'danger' | 'warning' | 'info' | 'inverse';
-type PlacementOptions = 'top-start' | 'top' | 'top-end' | 'end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'start';
-type VariantOptions = 'solid' | 'soft' | 'tint' | 'plain';
+type ToneOptions = 'neutral' | 'strong' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+type SurfaceOptions = 'default' | 'inverse';
+type PlacementOptions = 'top-start' | 'top' | 'top-end' | 'end-top' | 'end' | 'end-bottom' | 'bottom-end' | 'bottom' | 'bottom-start' | 'start-bottom' | 'start' | 'start-top';
+type VariantOptions = 'solid' | 'soft' | 'tint' | 'outline' | 'plain' | 'blank' | 'inset' | 'overflow';
 type BorderOptions = 'none' | 'solid' | 'dash';
 type ShapeOptions = 'pill' | 'dot' | 'floating' | 'line' | 'slim' | 'long' | 'flat';
 type AlignOptions = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
 type JustifyOptions = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
 type DirOptions = 'ltr' | 'rtl' | 'auto';
-type AnimationOptions = 'none' | 'smooth' | 'snappy' | 'bouncy';
+type AnimationOptions = 'none' | 'smooth' | 'snappy' | 'bouncy' | 'fade' | 'scale' | 'bump' | 'pop' | 'draw' | 'rise' | 'bounce';
 type OrientationOptions = 'horizontal' | 'vertical';
 export type SeblifyReservedPropOptions = {
     class: string;
@@ -28,14 +29,18 @@ export type SeblifyReservedPropOptions = {
     step: number;
     length: number;
     open: boolean;
+    visible: boolean;
+    expanded: boolean;
     checked: boolean;
     disabled: boolean;
+    multiple: boolean;
     wrap: boolean;
     border: BorderOptions & {};
     radius: ((SizeKeys | 'none' | 'full') & {}) | CustomCssSize;
     shape: ShapeOptions & {};
     tone: ToneOptions & {};
     variant: VariantOptions & {};
+    surface: SurfaceOptions & {};
     size: (SizeKeys & {}) | CustomCssSize;
     padding: ((SizeKeys | 'none') & {}) | CustomCssSize;
     animation: AnimationOptions & {};

package/dist/design-system/theme/tokens.d.ts

@@ -1,7 +1,77 @@
-declare const themeTokens: {
+declare const themeTokens: ({
+    readonly name: "--seblify-color-background";
+    readonly category: "Surface";
+    readonly value: "#faf7f2";
+    readonly description: "Default page background behind component surfaces.";
+} | {
+    readonly name: "--seblify-color-surface";
+    readonly category: "Surface";
+    readonly value: "#fffdf9";
+    readonly description: "Default component surface.";
+} | {
+    readonly name: "--seblify-color-surface-raised";
+    readonly category: "Surface";
+    readonly value: "#ffffff";
+    readonly description: "Raised surface for panels, popovers, and elevated UI.";
+} | {
+    readonly name: "--seblify-color-surface-muted";
+    readonly category: "Surface";
+    readonly value: "#f2ebe4";
+    readonly description: "Muted surface for inactive controls and subtle areas.";
+} | {
+    readonly name: "--seblify-color-surface-hover";
+    readonly category: "Surface";
+    readonly value: "#ebe1d8";
+    readonly description: "Surface color for hover states on neutral controls.";
+} | {
+    readonly name: "--seblify-color-surface-inverse";
+    readonly category: "Surface";
+    readonly value: "#15110f";
+    readonly description: "High-contrast inverse surface for sidebars and snackbars.";
+} | {
+    readonly name: "--seblify-color-surface-inverse-hover";
+    readonly category: "Surface";
+    readonly value: "#241d19";
+    readonly description: "Hover or active state on inverse surfaces.";
+} | {
+    readonly name: "--seblify-color-border";
+    readonly category: "Border";
+    readonly value: "#ded0c4";
+    readonly description: "Default border for controls and containers.";
+} | {
+    readonly name: "--seblify-color-border-strong";
+    readonly category: "Border";
+    readonly value: "#c5afa0";
+    readonly description: "Stronger border for interactive controls.";
+} | {
+    readonly name: "--seblify-color-border-inverse";
+    readonly category: "Border";
+    readonly value: "#4a3b32";
+    readonly description: "Border used on inverse surfaces.";
+} | {
+    readonly name: "--seblify-color-text";
+    readonly category: "Text";
+    readonly value: "#211916";
+    readonly description: "Primary text color on page and surface backgrounds.";
+} | {
+    readonly name: "--seblify-color-text-muted";
+    readonly category: "Text";
+    readonly value: "#6f5f55";
+    readonly description: "Secondary text for descriptions, helper text, and metadata.";
+} | {
+    readonly name: "--seblify-color-text-subtle";
+    readonly category: "Text";
+    readonly value: "#8b7a70";
+    readonly description: "Lower-emphasis text for labels, separators, and quiet UI.";
+} | {
+    readonly name: "--seblify-color-text-inverse";
+    readonly category: "Text";
+    readonly value: "#fff4e7";
+    readonly description: "Text placed on inverse surfaces.";
+} | {
     name: string;
     category: string;
     value: string;
     description: string;
-}[];
+})[];
 export default themeTokens;