seblify 0.3.0 → 0.4.0

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

@@ -1,38 +1,133 @@
-const themeTokens = [
-    {
-        name: '--seblify-color-page',
+const toneTokenDescriptions = {
+    fill: 'Solid fill used by solid controls and selected states.',
+    'fill-hover': 'Hover fill used by solid controls.',
+    'fill-text': 'Text and foreground color placed on the solid fill.',
+    surface: 'Subtle tone surface used by soft controls, tags, and panels.',
+    'surface-hover': 'Hover surface used by soft, tint, outline, and plain controls.',
+    border: 'Tone border used with subtle tone surfaces.',
+    text: 'Text color used on subtle tone surfaces.',
+    'on-inverse-surface': 'Subtle tone surface used when the tone appears on an inverse surface.',
+    'on-inverse-surface-hover': 'Hover surface used when the tone appears on an inverse surface.',
+    'on-inverse-text': 'Text color used when the tone appears on an inverse surface.',
+    'on-inverse-border': 'Border used when the tone appears on an inverse surface.',
+};
+const toneTokenValues = {
+    primary: {
+        fill: '#b43f5a',
+        'fill-hover': '#9f334d',
+        'fill-text': '#fff4e7',
+        surface: '#fae8ed',
+        'surface-hover': '#f5d5dd',
+        border: '#e6a6b5',
+        text: '#8f2b43',
+        'on-inverse-surface': '#2a1218',
+        'on-inverse-surface-hover': '#3a1922',
+        'on-inverse-border': '#743044',
+        'on-inverse-text': '#e07088',
+    },
+    secondary: {
+        fill: '#6f3a55',
+        'fill-hover': '#5e2f47',
+        'fill-text': '#fff4e7',
+        surface: '#f4e5ee',
+        'surface-hover': '#ecd3e0',
+        border: '#d7a6bf',
+        text: '#6f3a55',
+        'on-inverse-surface': '#1d1519',
+        'on-inverse-surface-hover': '#2b1d25',
+        'on-inverse-border': '#6f3a55',
+        'on-inverse-text': '#d8a4bd',
+    },
+    neutral: {
+        fill: '#6f5f55',
+        'fill-hover': '#5b4d45',
+        'fill-text': '#fff4e7',
+        surface: 'var(--seblify-color-surface-muted)',
+        'surface-hover': 'var(--seblify-color-surface-hover)',
+        border: 'var(--seblify-color-border)',
+        text: 'var(--seblify-color-text-muted)',
+        'on-inverse-surface': 'color-mix(in srgb, var(--seblify-color-text-inverse) 10%, var(--seblify-color-surface-inverse) 90%)',
+        'on-inverse-surface-hover': 'color-mix(in srgb, var(--seblify-color-text-inverse) 16%, var(--seblify-color-surface-inverse) 84%)',
+        'on-inverse-border': 'var(--seblify-color-border-inverse)',
+        'on-inverse-text': 'var(--seblify-color-text-inverse)',
+    },
+    strong: {
+        fill: '#211916',
+        'fill-hover': '#080706',
+        'fill-text': '#fff4e7',
+        surface: 'var(--seblify-color-surface-raised)',
+        'surface-hover': 'var(--seblify-color-surface-muted)',
+        border: 'var(--seblify-color-border-strong)',
+        text: 'var(--seblify-color-text)',
+        'on-inverse-surface': 'color-mix(in srgb, var(--seblify-color-text-inverse) 14%, var(--seblify-color-surface-inverse) 86%)',
+        'on-inverse-surface-hover': 'color-mix(in srgb, var(--seblify-color-text-inverse) 22%, var(--seblify-color-surface-inverse) 78%)',
+        'on-inverse-border': 'color-mix(in srgb, var(--seblify-color-text-inverse) 42%, var(--seblify-color-border-inverse) 58%)',
+        'on-inverse-text': 'var(--seblify-color-text-inverse)',
+    },
+    success: {
+        fill: '#777447',
+        'fill-hover': '#66633c',
+        'fill-text': '#fff4e7',
+        surface: '#eeeddf',
+        'surface-hover': '#e1dfc4',
+        border: '#cbc790',
+        text: '#5d5b34',
+        'on-inverse-surface': '#1e1d13',
+        'on-inverse-surface-hover': '#2a2818',
+        'on-inverse-border': '#777447',
+        'on-inverse-text': '#c6c18a',
+    },
+    danger: {
+        fill: '#b83d45',
+        'fill-hover': '#9f3239',
+        'fill-text': '#fff4e7',
+        surface: '#fae7e8',
+        'surface-hover': '#f3d2d4',
+        border: '#e2a2a7',
+        text: '#923038',
+        'on-inverse-surface': '#2b1515',
+        'on-inverse-surface-hover': '#3a1d1d',
+        'on-inverse-border': '#873638',
+        'on-inverse-text': '#efa5a5',
+    },
+    warning: {
+        fill: '#9a6d24',
+        'fill-hover': '#805918',
+        'fill-text': '#fff4e7',
+        surface: '#f8edd8',
+        'surface-hover': '#efddbd',
+        border: '#d8b46c',
+        text: '#7a5418',
+        'on-inverse-surface': '#2a2115',
+        'on-inverse-surface-hover': '#382c1a',
+        'on-inverse-border': '#8a6c38',
+        'on-inverse-text': '#e4c382',
+    },
+    info: {
+        fill: '#a5664a',
+        'fill-hover': '#8f543b',
+        'fill-text': '#fff4e7',
+        surface: '#f6e6de',
+        'surface-hover': '#edd3c6',
+        border: '#d49d85',
+        text: '#844932',
+        'on-inverse-surface': '#251914',
+        'on-inverse-surface-hover': '#332119',
+        'on-inverse-border': '#784531',
+        'on-inverse-text': '#dfa085',
+    },
+};
+const foundationTokens = [
+    {
+        name: '--seblify-color-background',
         category: 'Surface',
-        value: '#f4f6f8',
+        value: '#faf7f2',
         description: 'Default page background behind component surfaces.',
     },
-    {
-        name: '--seblify-color-text',
-        category: 'Text',
-        value: '#172033',
-        description: 'Primary text color on page and surface backgrounds.',
-    },
-    {
-        name: '--seblify-color-text-muted',
-        category: 'Text',
-        value: '#516176',
-        description: 'Secondary text for descriptions, helper text, and metadata.',
-    },
-    {
-        name: '--seblify-color-text-subtle',
-        category: 'Text',
-        value: '#667085',
-        description: 'Lower-emphasis text for labels, separators, and quiet UI.',
-    },
-    {
-        name: '--seblify-color-text-inverse',
-        category: 'Text',
-        value: '#ffffff',
-        description: 'Text placed on inverse surfaces.',
-    },
     {
         name: '--seblify-color-surface',
         category: 'Surface',
-        value: '#ffffff',
+        value: '#fffdf9',
         description: 'Default component surface.',
     },
     {
@@ -44,193 +139,83 @@ const themeTokens = [
     {
         name: '--seblify-color-surface-muted',
         category: 'Surface',
-        value: '#d9e0e8',
+        value: '#f2ebe4',
         description: 'Muted surface for inactive controls and subtle areas.',
     },
     {
         name: '--seblify-color-surface-hover',
         category: 'Surface',
-        value: '#f1f4f9',
+        value: '#ebe1d8',
         description: 'Surface color for hover states on neutral controls.',
     },
-    {
-        name: '--seblify-color-surface-accent',
-        category: 'Surface',
-        value: '#f7fbfb',
-        description: 'Subtle accent surface for selected or filled areas.',
-    },
     {
         name: '--seblify-color-surface-inverse',
         category: 'Surface',
-        value: '#172033',
+        value: '#15110f',
         description: 'High-contrast inverse surface for sidebars and snackbars.',
     },
     {
         name: '--seblify-color-surface-inverse-hover',
         category: 'Surface',
-        value: '#263043',
+        value: '#241d19',
         description: 'Hover or active state on inverse surfaces.',
     },
     {
         name: '--seblify-color-border',
         category: 'Border',
-        value: '#c8d2df',
+        value: '#ded0c4',
         description: 'Default border for controls and containers.',
     },
     {
         name: '--seblify-color-border-strong',
         category: 'Border',
-        value: '#aab7c5',
+        value: '#c5afa0',
         description: 'Stronger border for interactive controls.',
     },
-    {
-        name: '--seblify-color-border-accent',
-        category: 'Border',
-        value: '#9ab7ba',
-        description: 'Accent border for selected or filled states.',
-    },
     {
         name: '--seblify-color-border-inverse',
         category: 'Border',
-        value: '#263043',
+        value: '#4a3b32',
         description: 'Border used on inverse surfaces.',
     },
     {
-        name: '--seblify-color-fill-accent',
-        category: 'Fill',
-        value: '#146a6f',
-        description: 'Solid accent fill for selected controls and primary states.',
-    },
-    {
-        name: '--seblify-color-fill-accent-hover',
-        category: 'Fill',
-        value: '#0d4d52',
-        description: 'Hover fill for accent controls.',
-    },
-    {
-        name: '--seblify-color-fill-accent-text',
-        category: 'Fill',
-        value: '#ffffff',
-        description: 'Text or foreground placed on accent fills.',
-    },
-    {
-        name: '--seblify-color-fill-secondary',
-        category: 'Fill',
-        value: '#5b5fc7',
-        description: 'Secondary accent fill for alternate selected states.',
-    },
-    {
-        name: '--seblify-color-fill-secondary-text',
-        category: 'Fill',
-        value: '#ffffff',
-        description: 'Text or foreground placed on secondary fills.',
-    },
-    {
-        name: '--seblify-color-fill-strong',
-        category: 'Fill',
-        value: '#172033',
-        description: 'Strong neutral fill for high-contrast emphasis.',
-    },
-    {
-        name: '--seblify-color-fill-strong-text',
-        category: 'Fill',
-        value: '#ffffff',
-        description: 'Text or foreground placed on strong neutral fills.',
-    },
-    {
-        name: '--seblify-color-info-surface',
-        category: 'Status',
-        value: '#eaf3ff',
-        description: 'Info status surface.',
-    },
-    {
-        name: '--seblify-color-info-border',
-        category: 'Status',
-        value: '#bfd1ea',
-        description: 'Info status border.',
-    },
-    {
-        name: '--seblify-color-info-text',
-        category: 'Status',
-        value: '#102f55',
-        description: 'Text on info status surfaces.',
-    },
-    {
-        name: '--seblify-color-secondary-surface',
-        category: 'Status',
-        value: '#f0efff',
-        description: 'Secondary tone surface.',
-    },
-    {
-        name: '--seblify-color-secondary-border',
-        category: 'Status',
-        value: '#c8c6f4',
-        description: 'Secondary tone border.',
-    },
-    {
-        name: '--seblify-color-secondary-text',
-        category: 'Status',
-        value: '#2f316f',
-        description: 'Text on secondary tone surfaces.',
-    },
-    {
-        name: '--seblify-color-success-surface',
-        category: 'Status',
-        value: '#e8f8ee',
-        description: 'Success status surface.',
-    },
-    {
-        name: '--seblify-color-success-border',
-        category: 'Status',
-        value: '#b8ddc7',
-        description: 'Success status border.',
-    },
-    {
-        name: '--seblify-color-success-text',
-        category: 'Status',
-        value: '#143d25',
-        description: 'Text on success status surfaces.',
-    },
-    {
-        name: '--seblify-color-warning-surface',
-        category: 'Status',
-        value: '#fff6d8',
-        description: 'Warning status surface.',
-    },
-    {
-        name: '--seblify-color-warning-border',
-        category: 'Status',
-        value: '#e8d28f',
-        description: 'Warning status border.',
-    },
-    {
-        name: '--seblify-color-warning-text',
-        category: 'Status',
-        value: '#4d3900',
-        description: 'Text on warning status surfaces.',
+        name: '--seblify-color-text',
+        category: 'Text',
+        value: '#211916',
+        description: 'Primary text color on page and surface backgrounds.',
     },
     {
-        name: '--seblify-color-error-surface',
-        category: 'Status',
-        value: '#fff0f0',
-        description: 'Error status surface.',
+        name: '--seblify-color-text-muted',
+        category: 'Text',
+        value: '#6f5f55',
+        description: 'Secondary text for descriptions, helper text, and metadata.',
     },
     {
-        name: '--seblify-color-error-border',
-        category: 'Status',
-        value: '#efb6b6',
-        description: 'Error status border.',
+        name: '--seblify-color-text-subtle',
+        category: 'Text',
+        value: '#8b7a70',
+        description: 'Lower-emphasis text for labels, separators, and quiet UI.',
     },
     {
-        name: '--seblify-color-error-text',
-        category: 'Status',
-        value: '#5a1717',
-        description: 'Text on error status surfaces.',
+        name: '--seblify-color-text-inverse',
+        category: 'Text',
+        value: '#fff4e7',
+        description: 'Text placed on inverse surfaces.',
     },
+];
+const toneTokens = Object.entries(toneTokenValues).flatMap(([tone, roles]) => Object.entries(roles).map(([role, value]) => ({
+    name: `--seblify-color-${tone}-${role}`,
+    category: 'Tone',
+    value,
+    description: `${tone} ${toneTokenDescriptions[role]}`,
+})));
+const themeTokens = [
+    ...foundationTokens,
+    ...toneTokens,
     {
         name: '--seblify-color-focus-ring',
         category: 'Focus',
-        value: '#9bd4d8',
+        value: '#b43f5a',
         description: 'Visible keyboard focus outline.',
     },
     {
@@ -242,19 +227,19 @@ const themeTokens = [
     {
         name: '--seblify-shadow-control',
         category: 'Shadow',
-        value: '0 1px 3px rgb(16 24 40 / 24%)',
+        value: '0 1px 3px rgb(33 25 22 / 18%)',
         description: 'Small control shadow, currently used by switch thumbs.',
     },
     {
         name: '--seblify-shadow-raised',
         category: 'Shadow',
-        value: '0 12px 28px rgb(23 32 51 / 22%)',
+        value: '0 12px 28px rgb(33 25 22 / 16%)',
         description: 'Raised shadow for floating UI.',
     },
     {
         name: '--seblify-shadow-status',
         category: 'Shadow',
-        value: '0 10px 24px rgb(20 61 37 / 14%)',
+        value: '0 10px 24px rgb(180 63 90 / 14%)',
         description: 'Soft shadow for status messages.',
     },
     {
@@ -263,5 +248,11 @@ const themeTokens = [
         value: '30',
         description: 'Layer for portaled tooltip bubbles.',
     },
+    {
+        name: '--seblify-z-index-floating-action-button',
+        category: 'Layer',
+        value: '30',
+        description: 'Layer for fixed floating action buttons.',
+    },
 ];
 export default themeTokens;

package/dist/index.d.ts

@@ -3,18 +3,23 @@ export { default as Accordion } from './components/display/typography/accordion/
 export { default as AccordionGroup } from './components/display/typography/accordion/AccordionGroup.svelte';
 export { default as Badge } from './components/display/annotation/badge/Badge.svelte';
 export { default as Banner } from './components/Banner.svelte';
-export { default as Button } from './components/Button.svelte';
+export { default as Button } from './components/action/button/button/Button.svelte';
+export { default as ButtonGroup } from './components/action/button/button-group/ButtonGroup.svelte';
 export { default as Breadcrumb } from './components/framework/navigation/context/breadcrumb/Breadcrumb.svelte';
 export { default as Checkbox } from './components/action/input/select/checkbox/Checkbox.svelte';
-export { createCheckboxRelations, type CheckboxRelations, type CheckboxRelationsConfig, type CheckboxRelationsGroupConfig, type CheckboxRelationsGroupState, type CheckboxRelationsId, type CheckboxRelationsItemConfig, type CheckboxRelationsItemState, type CheckboxRelationsVisualState, } from './components/action/input/select/checkbox/checkbox-relations.svelte';
+export { createCheckboxManager, type CheckboxRelations, type CheckboxRelationsConfig, type CheckboxRelationsGroupConfig, type CheckboxRelationsGroupState, type CheckboxRelationsId, type CheckboxRelationsItemConfig, type CheckboxRelationsItemState, type CheckboxRelationsVisualState, } from './components/action/input/select/checkbox/checkbox-relations.svelte';
 export { default as Cluster } from './components/framework/layout/alignment/cluster/Cluster.svelte';
 export { default as Collapse } from './components/display/motion/collapse/Collapse.svelte';
 export { default as CodeSnippet } from './components/display/typography/code-snippet/CodeSnippet.svelte';
+export { default as DateTimeValue } from './components/display/data-display/metric/date-time/DateTimeValue.svelte';
+export { default as DateValue } from './components/display/data-display/metric/date-time/DateValue.svelte';
 export { default as Duration } from './components/display/data-display/metric/duration/Duration.svelte';
 export { default as Eyebrow } from './components/display/typography/eyebrow/Eyebrow.svelte';
+export { default as FloatingActionButton } from './components/action/button/floating-action-button/FloatingActionButton.svelte';
 export { default as Grid } from './components/framework/layout/alignment/grid/Grid.svelte';
 export { default as Highlight } from './components/display/typography/highlight/Highlight.svelte';
 export { default as Icon } from './components/display/media/icon/Icon.svelte';
+export { default as IconButton } from './components/action/button/icon-button/IconButton.svelte';
 export { default as LoadingDots } from './components/display/feedback/loading/loading-dots/LoadingDots.svelte';
 export { default as Paper } from './components/framework/surface/paper/Paper.svelte';
 export { default as PageHeader } from './components/framework/layout/container/page-header/PageHeader.svelte';
@@ -32,13 +37,19 @@ export { default as Stack } from './components/framework/layout/alignment/stack/
 export { default as Switch } from './components/action/input/select/switch/Switch.svelte';
 export { default as Tag } from './components/display/annotation/tag/Tag.svelte';
 export { default as TagGroup } from './components/display/annotation/tag-group/TagGroup.svelte';
-export { default as ThemeSwitch } from './components/action/input/select/theme-switch/ThemeSwitch.svelte';
+export { default as ColorModeSwitch } from './components/action/input/select/color-mode-switch/ColorModeSwitch.svelte';
+export { default as TimestampCard } from './components/display/data-display/metric/timestamp-card/TimestampCard.svelte';
+export { default as TimeValue } from './components/display/data-display/metric/date-time/TimeValue.svelte';
 export { default as Timeline } from './components/display/data-display/visual/timeline/Timeline.svelte';
 export { default as TimelineItem } from './components/display/data-display/visual/timeline/TimelineItem.svelte';
+export { default as TimedButton } from './components/action/button/timed-button/TimedButton.svelte';
 export { default as Toast } from './components/Toast.svelte';
+export { default as ToggleButton } from './components/action/button/toggle-button/ToggleButton.svelte';
+export { default as ToggleButtonGroup } from './components/action/button/toggle-button-group/ToggleButtonGroup.svelte';
 export { default as Tooltip } from './components/framework/overlay/tooltip/Tooltip.svelte';
+export { formatDate, formatDateTime, formatTime, type DateTimeDateStyle, type DateTimeInput, type DateTimeLocaleOptions, type DateTimeTimeStyle, type FormatDateOptions, type FormatDateTimeOptions, type FormatTimeOptions, } from './components/utility/format/date-time/formatDateTime';
 export { formatDuration, type DurationFormat, type DurationRounding, type DurationStyle, type DurationUnit, type FormatDurationOptions, } from './components/utility/format/duration/formatDuration';
-export { formatRelativeTime, type FormatRelativeTimeOptions, type RelativeTimeDirection, type RelativeTimeInput, type RelativeTimeLabel, type RelativeTimeMode, type RelativeTimePresentation, type RelativeTimeState, type RelativeTimeStyle, type RelativeTimeUnit, type RelativeTimeUnitSteps, } from './components/utility/format/relative-time/formatRelativeTime';
+export { formatRelativeTime, type FormatRelativeTimeOptions, type RelativeTimeDirection, type RelativeTimeInput, type RelativeTimeLabel, type RelativeTimeMode, type RelativeTimePresentation, type RelativeTimeRounding, type RelativeTimeState, type RelativeTimeStyle, type RelativeTimeUnit, type RelativeTimeUnitSteps, } from './components/utility/format/relative-time/formatRelativeTime';
 export type { SidenavActionDetail, SidenavIconComponent, SidenavItemData, SidenavItemKind, } from './components/framework/navigation/sidebar/sidenav/sidenav';
 export type { ComponentDocExample, ComponentDocMetadata, ComponentStatus, DocPageMetadata, DocSectionMetadata, } from './components/component-doc';
 export type { SeblifyProps } from './design-system/reserved-props/type';

package/dist/index.js

@@ -3,18 +3,23 @@ export { default as Accordion } from './components/display/typography/accordion/
 export { default as AccordionGroup } from './components/display/typography/accordion/AccordionGroup.svelte';
 export { default as Badge } from './components/display/annotation/badge/Badge.svelte';
 export { default as Banner } from './components/Banner.svelte';
-export { default as Button } from './components/Button.svelte';
+export { default as Button } from './components/action/button/button/Button.svelte';
+export { default as ButtonGroup } from './components/action/button/button-group/ButtonGroup.svelte';
 export { default as Breadcrumb } from './components/framework/navigation/context/breadcrumb/Breadcrumb.svelte';
 export { default as Checkbox } from './components/action/input/select/checkbox/Checkbox.svelte';
-export { createCheckboxRelations, } from './components/action/input/select/checkbox/checkbox-relations.svelte';
+export { createCheckboxManager, } from './components/action/input/select/checkbox/checkbox-relations.svelte';
 export { default as Cluster } from './components/framework/layout/alignment/cluster/Cluster.svelte';
 export { default as Collapse } from './components/display/motion/collapse/Collapse.svelte';
 export { default as CodeSnippet } from './components/display/typography/code-snippet/CodeSnippet.svelte';
+export { default as DateTimeValue } from './components/display/data-display/metric/date-time/DateTimeValue.svelte';
+export { default as DateValue } from './components/display/data-display/metric/date-time/DateValue.svelte';
 export { default as Duration } from './components/display/data-display/metric/duration/Duration.svelte';
 export { default as Eyebrow } from './components/display/typography/eyebrow/Eyebrow.svelte';
+export { default as FloatingActionButton } from './components/action/button/floating-action-button/FloatingActionButton.svelte';
 export { default as Grid } from './components/framework/layout/alignment/grid/Grid.svelte';
 export { default as Highlight } from './components/display/typography/highlight/Highlight.svelte';
 export { default as Icon } from './components/display/media/icon/Icon.svelte';
+export { default as IconButton } from './components/action/button/icon-button/IconButton.svelte';
 export { default as LoadingDots } from './components/display/feedback/loading/loading-dots/LoadingDots.svelte';
 export { default as Paper } from './components/framework/surface/paper/Paper.svelte';
 export { default as PageHeader } from './components/framework/layout/container/page-header/PageHeader.svelte';
@@ -32,10 +37,16 @@ export { default as Stack } from './components/framework/layout/alignment/stack/
 export { default as Switch } from './components/action/input/select/switch/Switch.svelte';
 export { default as Tag } from './components/display/annotation/tag/Tag.svelte';
 export { default as TagGroup } from './components/display/annotation/tag-group/TagGroup.svelte';
-export { default as ThemeSwitch } from './components/action/input/select/theme-switch/ThemeSwitch.svelte';
+export { default as ColorModeSwitch } from './components/action/input/select/color-mode-switch/ColorModeSwitch.svelte';
+export { default as TimestampCard } from './components/display/data-display/metric/timestamp-card/TimestampCard.svelte';
+export { default as TimeValue } from './components/display/data-display/metric/date-time/TimeValue.svelte';
 export { default as Timeline } from './components/display/data-display/visual/timeline/Timeline.svelte';
 export { default as TimelineItem } from './components/display/data-display/visual/timeline/TimelineItem.svelte';
+export { default as TimedButton } from './components/action/button/timed-button/TimedButton.svelte';
 export { default as Toast } from './components/Toast.svelte';
+export { default as ToggleButton } from './components/action/button/toggle-button/ToggleButton.svelte';
+export { default as ToggleButtonGroup } from './components/action/button/toggle-button-group/ToggleButtonGroup.svelte';
 export { default as Tooltip } from './components/framework/overlay/tooltip/Tooltip.svelte';
+export { formatDate, formatDateTime, formatTime, } from './components/utility/format/date-time/formatDateTime';
 export { formatDuration, } from './components/utility/format/duration/formatDuration';
 export { formatRelativeTime, } from './components/utility/format/relative-time/formatRelativeTime';