@dryui/ui 3.0.0 → 4.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion/accordion-root.svelte +1 -1
- package/dist/adjust/adjust.svelte +12 -8
- package/dist/alpha-slider/alpha-slider-input.svelte +14 -13
- package/dist/app-frame/app-frame.svelte +4 -1
- package/dist/aspect-ratio/aspect-ratio.svelte +7 -6
- package/dist/aurora/aurora.svelte +144 -81
- package/dist/avatar/avatar.svelte +22 -15
- package/dist/badge/badge.svelte +8 -16
- package/dist/beam/beam.svelte +20 -21
- package/dist/button/button.svelte +45 -24
- package/dist/button/button.svelte.d.ts +14 -0
- package/dist/button-group/button-group.svelte +4 -5
- package/dist/calendar/calendar-button-grid.svelte +11 -4
- package/dist/calendar/calendar-button-grid.svelte.d.ts +2 -2
- package/dist/calendar/calendar-event-legend.svelte +63 -0
- package/dist/calendar/calendar-event-legend.svelte.d.ts +6 -0
- package/dist/calendar/calendar-header.svelte +3 -1
- package/dist/calendar/calendar-heading.svelte +21 -9
- package/dist/calendar/calendar-nav-button.svelte +15 -2
- package/dist/calendar/calendar-root.svelte +94 -11
- package/dist/calendar/calendar-root.svelte.d.ts +10 -1
- package/dist/calendar/calendar-week.svelte +515 -0
- package/dist/calendar/calendar-week.svelte.d.ts +12 -0
- package/dist/calendar/calendar.meta.js +2 -2
- package/dist/calendar/context.svelte.d.ts +19 -0
- package/dist/calendar/index.d.ts +11 -1
- package/dist/calendar/index.js +5 -1
- package/dist/calendar/types.d.ts +32 -0
- package/dist/calendar/types.js +1 -0
- package/dist/calendar/week-utils.d.ts +12 -0
- package/dist/calendar/week-utils.js +133 -0
- package/dist/carousel/carousel-button-dots.svelte +12 -6
- package/dist/carousel/carousel-root.svelte +201 -17
- package/dist/carousel/carousel-root.svelte.d.ts +1 -1
- package/dist/carousel/carousel-viewport.svelte +19 -1
- package/dist/chart/chart-bars.svelte +43 -19
- package/dist/chart/chart-donut.svelte +50 -23
- package/dist/chart/chart-root.svelte +19 -4
- package/dist/chart/chart-stacked-bar.svelte +3 -2
- package/dist/chart/series-color.d.ts +7 -0
- package/dist/chart/series-color.js +11 -0
- package/dist/chat-thread/chat-thread.svelte +15 -126
- package/dist/chat-thread/chat-thread.svelte.d.ts +4 -7
- package/dist/chat-thread/index.d.ts +4 -7
- package/dist/checkbox/checkbox-input.svelte +48 -41
- package/dist/chip/chip-button.svelte +14 -17
- package/dist/chip/chip-button.svelte.d.ts +2 -3
- package/dist/chip-group/chip-group-root.svelte +6 -4
- package/dist/chromatic-aberration/chromatic-aberration.svelte +9 -6
- package/dist/chromatic-shift/chromatic-shift.svelte +7 -8
- package/dist/code-block/code-block-button.svelte +72 -40
- package/dist/color-picker/color-picker-area.svelte +20 -25
- package/dist/color-picker/color-picker-input-hue-slider.svelte +12 -9
- package/dist/color-picker/color-picker-root.svelte +18 -17
- package/dist/color-picker/color-picker-swatch.svelte +17 -16
- package/dist/combobox/combobox-content.svelte +4 -14
- package/dist/combobox/combobox-input-root.svelte +6 -3
- package/dist/combobox/combobox-input-root.svelte.d.ts +2 -1
- package/dist/combobox/combobox-input.svelte +13 -10
- package/dist/combobox/combobox-item.svelte +9 -4
- package/dist/command-palette/command-palette-dialog-root.svelte +1 -0
- package/dist/command-palette/command-palette-item.svelte +7 -4
- package/dist/context-menu/context-menu-content.svelte +7 -15
- package/dist/data-grid/data-grid-button-input-column.svelte +2 -2
- package/dist/data-grid/data-grid-cell.svelte +1 -1
- package/dist/data-grid/data-grid-input-select-all.svelte +1 -1
- package/dist/data-grid/data-grid-input-select-cell.svelte +1 -1
- package/dist/date-field/date-field-segment.svelte +10 -12
- package/dist/date-picker/datepicker-button-calendar.svelte +2 -2
- package/dist/date-picker/datepicker-button-calendar.svelte.d.ts +2 -2
- package/dist/date-picker/index.d.ts +4 -1
- package/dist/date-range-picker/date-range-picker-button-calendar.svelte +2 -2
- package/dist/date-range-picker/date-range-picker-button-calendar.svelte.d.ts +2 -2
- package/dist/date-range-picker/date-range-picker-button-trigger.svelte +151 -40
- package/dist/date-range-picker/date-range-picker-button-trigger.svelte.d.ts +1 -0
- package/dist/date-range-picker/index.d.ts +4 -1
- package/dist/diagram/edge-routing.js +18 -7
- package/dist/diagram/layout.js +31 -16
- package/dist/displacement/displacement.svelte +29 -43
- package/dist/drag-and-drop/drag-and-drop-root.svelte +17 -5
- package/dist/drag-and-drop/index.d.ts +14 -1
- package/dist/drop-zone/drop-zone.svelte +7 -4
- package/dist/dropdown-menu/dropdown-menu-content.svelte +15 -16
- package/dist/field/field-description.svelte +6 -9
- package/dist/field/field-error.svelte +6 -10
- package/dist/file-select/file-select-root.svelte +13 -18
- package/dist/file-select/file-select-root.svelte.d.ts +2 -1
- package/dist/file-upload/file-upload-dropzone.svelte +21 -21
- package/dist/file-upload/file-upload-item.svelte +1 -1
- package/dist/file-upload/file-upload-list.svelte +1 -1
- package/dist/flip-card/flip-card-root.svelte +2 -2
- package/dist/float-button/context.svelte.d.ts +2 -0
- package/dist/float-button/float-button-action.svelte +41 -11
- package/dist/float-button/float-button-root.svelte +52 -13
- package/dist/float-button/float-button-trigger.svelte +25 -12
- package/dist/format-bytes/format-bytes.svelte +2 -5
- package/dist/format-date/format-date.svelte +2 -6
- package/dist/format-number/format-number.svelte +2 -6
- package/dist/gauge/gauge.svelte +9 -2
- package/dist/glass/glass.svelte +4 -3
- package/dist/glow/glow.svelte +0 -5
- package/dist/god-rays/god-rays.svelte +6 -6
- package/dist/gradient-mesh/gradient-mesh.svelte +52 -44
- package/dist/halftone/halftone.svelte +17 -28
- package/dist/heading/heading.svelte +0 -6
- package/dist/hover-card/hover-card-content.svelte +8 -5
- package/dist/hover-card/hover-card.meta.js +2 -2
- package/dist/icon/icon.svelte +24 -13
- package/dist/icon/icon.svelte.d.ts +2 -2
- package/dist/icon-swap/icon-swap.svelte +4 -3
- package/dist/icon-swap/icon-swap.svelte.d.ts +2 -1
- package/dist/image/image.svelte +5 -13
- package/dist/image-comparison/image-comparison.svelte +39 -45
- package/dist/index.d.ts +3 -5
- package/dist/index.js +1 -2
- package/dist/input/input.svelte +88 -9
- package/dist/input/input.svelte.d.ts +24 -1
- package/dist/internal/anchored-overlay-content.svelte.d.ts +12 -6
- package/dist/internal/anchored-overlay-content.svelte.js +13 -16
- package/dist/internal/calendar-event-layout.d.ts +53 -0
- package/dist/internal/calendar-event-layout.js +191 -0
- package/dist/internal/calendar-grid-button.svelte +618 -76
- package/dist/internal/calendar-grid-button.svelte.d.ts +2 -2
- package/dist/internal/calendar-grid-utils.d.ts +3 -0
- package/dist/internal/calendar-grid-utils.js +24 -0
- package/dist/internal/form-control-wrapper-attrs.d.ts +9 -0
- package/dist/internal/form-control-wrapper-attrs.js +1 -0
- package/dist/internal/menu-item.svelte +1 -0
- package/dist/internal/modal-content.svelte +2 -4
- package/dist/internal/motion.d.ts +1 -1
- package/dist/internal/motion.js +5 -2
- package/dist/internal/picker-popover-content.svelte +15 -16
- package/dist/link/link.svelte +8 -5
- package/dist/link-preview/link-preview-content.svelte +12 -15
- package/dist/link-preview/link-preview-trigger.svelte +2 -5
- package/dist/listbox/listbox-item.svelte +13 -18
- package/dist/listbox/listbox-root.svelte +4 -9
- package/dist/logo-mark/logo-mark.svelte +31 -31
- package/dist/map/map-marker.svelte +2 -2
- package/dist/map/map-root.svelte +11 -2
- package/dist/markdown-renderer/markdown-renderer.svelte +141 -164
- package/dist/marquee/marquee.svelte +12 -13
- package/dist/mask-reveal/mask-reveal.svelte +14 -27
- package/dist/mega-menu/mega-menu-column.svelte +1 -1
- package/dist/mega-menu/mega-menu-link.svelte +7 -7
- package/dist/mega-menu/mega-menu-panel.svelte +18 -32
- package/dist/menubar/menubar-content.svelte +18 -19
- package/dist/menubar/menubar-item.svelte +1 -0
- package/dist/menubar/menubar-menu.svelte +1 -2
- package/dist/menubar/menubar-root.svelte +1 -11
- package/dist/motion/enter.svelte +15 -14
- package/dist/motion/enter.svelte.d.ts +2 -1
- package/dist/motion/exit.svelte +6 -5
- package/dist/motion/exit.svelte.d.ts +2 -1
- package/dist/motion/stagger.svelte +10 -9
- package/dist/motion/stagger.svelte.d.ts +2 -1
- package/dist/multi-select-combobox/multi-select-combobox-content.svelte +4 -14
- package/dist/multi-select-combobox/multi-select-combobox-input.svelte +6 -5
- package/dist/multi-select-combobox/multi-select-combobox-item.svelte +25 -31
- package/dist/multi-select-combobox/multi-select-combobox-root-input.svelte +12 -16
- package/dist/noise/noise.svelte +20 -19
- package/dist/notification-center/notification-center-item.svelte +1 -1
- package/dist/notification-center/notification-center-panel.svelte +17 -19
- package/dist/number-input/number-input-button.svelte +78 -12
- package/dist/number-input/number-input-button.svelte.d.ts +15 -1
- package/dist/numeric/numeric.svelte +27 -12
- package/dist/numeric/numeric.svelte.d.ts +2 -1
- package/dist/option-picker/option-picker-item.svelte +8 -15
- package/dist/option-picker/option-picker-preview.svelte +34 -23
- package/dist/pagination/pagination-root.svelte +7 -0
- package/dist/pin-input/pin-input-root.svelte +2 -11
- package/dist/popover/popover-content.svelte +7 -4
- package/dist/progress/progress.svelte +2 -2
- package/dist/prompt-input/prompt-input-button-textarea.svelte +2 -10
- package/dist/qr-code/qr-code.svelte +78 -38
- package/dist/qr-code/qr-code.svelte.d.ts +1 -1
- package/dist/radio-group/radio-group-item-input.svelte +60 -14
- package/dist/radio-group/radio-group-item-input.svelte.d.ts +9 -2
- package/dist/range-calendar/index.d.ts +4 -1
- package/dist/range-calendar/range-calendar-grid-button.svelte +2 -2
- package/dist/range-calendar/range-calendar-grid-button.svelte.d.ts +2 -2
- package/dist/relative-time/relative-time.svelte +15 -15
- package/dist/reveal/reveal.svelte +12 -24
- package/dist/rich-text-editor/rich-text-editor-content.svelte +0 -3
- package/dist/scroll-to-top/scroll-to-top-button.svelte +5 -3
- package/dist/scroll-to-top/scroll-to-top-button.svelte.d.ts +2 -2
- package/dist/segmented-control/segmented-control-root.svelte +0 -3
- package/dist/select/select-content.svelte +15 -16
- package/dist/select/select-item.svelte +1 -0
- package/dist/select/select-root-input.svelte +5 -4
- package/dist/select/select-root-input.svelte.d.ts +2 -2
- package/dist/select/select-trigger-button.svelte +122 -16
- package/dist/select/select-trigger-button.svelte.d.ts +2 -2
- package/dist/shader-canvas/shader-canvas.svelte +11 -20
- package/dist/shimmer/shimmer.svelte +28 -25
- package/dist/skeleton/skeleton.svelte +18 -23
- package/dist/slider/slider-input.svelte +8 -7
- package/dist/sparkline/sparkline.svelte +1 -1
- package/dist/splitter/splitter-handle.svelte +3 -3
- package/dist/splitter/splitter-root.svelte +13 -12
- package/dist/spotlight/spotlight.svelte +30 -62
- package/dist/star-rating/star-rating-root.svelte +3 -4
- package/dist/stepper/stepper-step-button.svelte +2 -2
- package/dist/table-of-contents/table-of-contents-root.svelte +5 -16
- package/dist/tabs/tabs-content.svelte +7 -1
- package/dist/tag/tag-button.svelte +70 -64
- package/dist/tags-input/tags-input-root.svelte +2 -9
- package/dist/text/index.d.ts +2 -3
- package/dist/text/text.svelte +6 -12
- package/dist/text/text.svelte.d.ts +2 -3
- package/dist/textarea/textarea.svelte +91 -16
- package/dist/textarea/textarea.svelte.d.ts +20 -1
- package/dist/themes/aurora.css +106 -112
- package/dist/themes/component-defaults.css +47 -0
- package/dist/themes/dark.css +49 -223
- package/dist/themes/default.css +45 -175
- package/dist/themes/midnight.css +50 -65
- package/dist/themes/terminal.css +40 -74
- package/dist/time-input/time-input.svelte +5 -3
- package/dist/time-input/time-input.svelte.d.ts +2 -2
- package/dist/timeline/timeline-title.svelte +0 -6
- package/dist/toast/toast-root.svelte +10 -9
- package/dist/toggle/toggle-button.svelte +17 -6
- package/dist/toggle-group/toggle-group-root.svelte +3 -3
- package/dist/token-scope/index.d.ts +6 -0
- package/dist/token-scope/index.js +1 -0
- package/dist/token-scope/token-scope.meta.js +7 -0
- package/dist/toolbar/toolbar-root.svelte +4 -4
- package/dist/tooltip/tooltip-content.svelte +24 -13
- package/dist/tour/tour-root.css +6 -2
- package/dist/transfer/transfer-list-input.svelte +1 -2
- package/dist/transfer/transfer-root.svelte +0 -10
- package/dist/tree/tree-root.svelte +7 -4
- package/dist/typography/blockquote.svelte +2 -2
- package/dist/typography/code.svelte +2 -2
- package/dist/typography/heading.svelte +2 -2
- package/dist/typography/index.d.ts +0 -1
- package/dist/typography/text.svelte +2 -13
- package/dist/video-embed/video-embed-button.svelte +9 -9
- package/package.json +11 -10
- package/src/accordion/accordion-button-trigger.svelte +60 -0
- package/src/accordion/accordion-content.svelte +37 -0
- package/src/accordion/accordion-item.svelte +62 -0
- package/src/accordion/accordion-root.svelte +61 -0
- package/src/accordion/accordion.meta.ts +7 -0
- package/src/accordion/context.svelte.ts +19 -0
- package/src/accordion/index.ts +41 -0
- package/src/adjust/adjust.meta.ts +7 -0
- package/src/adjust/adjust.svelte +71 -0
- package/src/adjust/index.ts +20 -0
- package/src/alert/alert.meta.ts +7 -0
- package/src/alert/alert.svelte +174 -0
- package/src/alert/index.ts +18 -0
- package/src/alert-dialog/alert-dialog-body.svelte +23 -0
- package/src/alert-dialog/alert-dialog-button-action.svelte +15 -0
- package/src/alert-dialog/alert-dialog-button-cancel.svelte +18 -0
- package/src/alert-dialog/alert-dialog-content.svelte +26 -0
- package/src/alert-dialog/alert-dialog-footer.svelte +29 -0
- package/src/alert-dialog/alert-dialog-header.svelte +26 -0
- package/src/alert-dialog/alert-dialog-overlay.svelte +34 -0
- package/src/alert-dialog/alert-dialog-root.svelte +31 -0
- package/src/alert-dialog/alert-dialog-trigger.svelte +56 -0
- package/src/alert-dialog/alert-dialog.meta.ts +7 -0
- package/src/alert-dialog/context.svelte.ts +11 -0
- package/src/alert-dialog/index.ts +43 -0
- package/src/alpha-slider/alpha-slider-input.svelte +165 -0
- package/src/alpha-slider/alpha-slider.meta.ts +7 -0
- package/src/alpha-slider/index.ts +10 -0
- package/src/app-frame/app-frame.meta.ts +8 -0
- package/src/app-frame/app-frame.svelte +141 -0
- package/src/app-frame/index.ts +10 -0
- package/src/aspect-ratio/aspect-ratio.meta.ts +7 -0
- package/src/aspect-ratio/aspect-ratio.svelte +29 -0
- package/src/aspect-ratio/index.ts +9 -0
- package/src/aurora/aurora.meta.ts +8 -0
- package/src/aurora/aurora.svelte +526 -0
- package/src/aurora/index.ts +24 -0
- package/src/avatar/avatar.meta.ts +7 -0
- package/src/avatar/avatar.svelte +213 -0
- package/src/avatar/index.ts +15 -0
- package/src/backdrop/backdrop.meta.ts +7 -0
- package/src/backdrop/backdrop.svelte +51 -0
- package/src/backdrop/index.ts +3 -0
- package/src/badge/badge.meta.ts +7 -0
- package/src/badge/badge.svelte +338 -0
- package/src/badge/index.ts +12 -0
- package/src/beam/beam.meta.ts +8 -0
- package/src/beam/beam.svelte +118 -0
- package/src/beam/index.ts +17 -0
- package/src/border-beam/border-beam.meta.ts +8 -0
- package/src/border-beam/border-beam.svelte +42 -0
- package/src/border-beam/index.ts +10 -0
- package/src/breadcrumb/breadcrumb-item.svelte +23 -0
- package/src/breadcrumb/breadcrumb-link.svelte +60 -0
- package/src/breadcrumb/breadcrumb-list.svelte +28 -0
- package/src/breadcrumb/breadcrumb-root.svelte +14 -0
- package/src/breadcrumb/breadcrumb-separator.svelte +25 -0
- package/src/breadcrumb/breadcrumb.meta.ts +7 -0
- package/src/breadcrumb/index.ts +44 -0
- package/src/button/button.meta.ts +7 -0
- package/src/button/button.svelte +675 -0
- package/src/button/index.ts +29 -0
- package/src/button-group/button-group.meta.ts +7 -0
- package/src/button-group/button-group.svelte +61 -0
- package/src/button-group/context.svelte.ts +15 -0
- package/src/button-group/index.ts +7 -0
- package/src/calendar/calendar-button-grid.svelte +58 -0
- package/src/calendar/calendar-button-next.svelte +13 -0
- package/src/calendar/calendar-button-prev.svelte +13 -0
- package/src/calendar/calendar-event-legend.svelte +63 -0
- package/src/calendar/calendar-header.svelte +28 -0
- package/src/calendar/calendar-heading.svelte +42 -0
- package/src/calendar/calendar-nav-button.svelte +39 -0
- package/src/calendar/calendar-root.svelte +211 -0
- package/src/calendar/calendar-week.svelte +515 -0
- package/src/calendar/calendar.meta.ts +7 -0
- package/src/calendar/context.svelte.ts +43 -0
- package/src/calendar/index.ts +57 -0
- package/src/calendar/types.ts +39 -0
- package/src/calendar/week-utils.ts +175 -0
- package/src/carousel/carousel-button-dots.svelte +74 -0
- package/src/carousel/carousel-button-next.svelte +13 -0
- package/src/carousel/carousel-button-prev.svelte +13 -0
- package/src/carousel/carousel-button-thumbnails.svelte +82 -0
- package/src/carousel/carousel-nav-button.svelte +31 -0
- package/src/carousel/carousel-root.svelte +432 -0
- package/src/carousel/carousel-slide.svelte +39 -0
- package/src/carousel/carousel-viewport.svelte +91 -0
- package/src/carousel/carousel.meta.ts +7 -0
- package/src/carousel/context.svelte.ts +22 -0
- package/src/carousel/index.ts +35 -0
- package/src/chart/chart-area.svelte +76 -0
- package/src/chart/chart-bars.svelte +102 -0
- package/src/chart/chart-donut.svelte +145 -0
- package/src/chart/chart-horizontal-bar.svelte +67 -0
- package/src/chart/chart-line.svelte +66 -0
- package/src/chart/chart-root.svelte +257 -0
- package/src/chart/chart-stacked-bar.svelte +77 -0
- package/src/chart/chart-x-axis.svelte +50 -0
- package/src/chart/chart-y-axis.svelte +71 -0
- package/src/chart/chart.meta.ts +7 -0
- package/src/chart/context.svelte.ts +29 -0
- package/src/chart/index.ts +86 -0
- package/src/chart/series-color.ts +12 -0
- package/src/chat-thread/chat-thread.meta.ts +7 -0
- package/src/chat-thread/chat-thread.svelte +97 -0
- package/src/chat-thread/index.ts +10 -0
- package/src/checkbox/checkbox-input.svelte +259 -0
- package/src/checkbox/checkbox.meta.ts +7 -0
- package/src/checkbox/index.ts +7 -0
- package/src/chip/chip-button.svelte +170 -0
- package/src/chip/chip.meta.ts +7 -0
- package/src/chip/index.ts +29 -0
- package/src/chip-group/chip-group-button-item.svelte +36 -0
- package/src/chip-group/chip-group-label.svelte +26 -0
- package/src/chip-group/chip-group-root.svelte +129 -0
- package/src/chip-group/chip-group.meta.ts +19 -0
- package/src/chip-group/context.svelte.ts +11 -0
- package/src/chip-group/index.ts +26 -0
- package/src/chromatic-aberration/chromatic-aberration.meta.ts +7 -0
- package/src/chromatic-aberration/chromatic-aberration.svelte +75 -0
- package/src/chromatic-aberration/index.ts +10 -0
- package/src/chromatic-shift/chromatic-shift.meta.ts +7 -0
- package/src/chromatic-shift/chromatic-shift.svelte +226 -0
- package/src/chromatic-shift/index.ts +5 -0
- package/src/clipboard/clipboard.meta.ts +7 -0
- package/src/clipboard/clipboard.svelte +38 -0
- package/src/clipboard/index.ts +3 -0
- package/src/code-block/code-block-button.svelte +371 -0
- package/src/code-block/code-block.meta.ts +7 -0
- package/src/code-block/highlighter/css.ts +387 -0
- package/src/code-block/highlighter/generic.ts +24 -0
- package/src/code-block/highlighter/index.ts +30 -0
- package/src/code-block/highlighter/svelte.ts +597 -0
- package/src/code-block/highlighter/types.ts +7 -0
- package/src/code-block/index.ts +11 -0
- package/src/collapsible/collapsible-button-trigger.svelte +50 -0
- package/src/collapsible/collapsible-content.svelte +57 -0
- package/src/collapsible/collapsible-root.svelte +48 -0
- package/src/collapsible/collapsible.meta.ts +7 -0
- package/src/collapsible/context.svelte.ts +10 -0
- package/src/collapsible/index.ts +30 -0
- package/src/color-picker/color-picker-area.svelte +181 -0
- package/src/color-picker/color-picker-button-eyedropper.svelte +61 -0
- package/src/color-picker/color-picker-channel-input.svelte +85 -0
- package/src/color-picker/color-picker-input-alpha-slider.svelte +144 -0
- package/src/color-picker/color-picker-input-hue-slider.svelte +146 -0
- package/src/color-picker/color-picker-input.svelte +129 -0
- package/src/color-picker/color-picker-root.svelte +185 -0
- package/src/color-picker/color-picker-swatch.svelte +116 -0
- package/src/color-picker/color-picker.meta.ts +7 -0
- package/src/color-picker/context.svelte.ts +19 -0
- package/src/color-picker/index.ts +45 -0
- package/src/combobox/combobox-content.svelte +124 -0
- package/src/combobox/combobox-empty.svelte +23 -0
- package/src/combobox/combobox-group.svelte +35 -0
- package/src/combobox/combobox-input-root.svelte +109 -0
- package/src/combobox/combobox-input.svelte +348 -0
- package/src/combobox/combobox-item.svelte +150 -0
- package/src/combobox/combobox.meta.ts +7 -0
- package/src/combobox/context.svelte.ts +22 -0
- package/src/combobox/index.ts +44 -0
- package/src/command-palette/command-palette-dialog-root.svelte +184 -0
- package/src/command-palette/command-palette-empty.svelte +30 -0
- package/src/command-palette/command-palette-group.svelte +37 -0
- package/src/command-palette/command-palette-input.svelte +91 -0
- package/src/command-palette/command-palette-item.svelte +100 -0
- package/src/command-palette/command-palette-list.svelte +52 -0
- package/src/command-palette/command-palette-separator.svelte +17 -0
- package/src/command-palette/command-palette.meta.ts +7 -0
- package/src/command-palette/context.svelte.ts +19 -0
- package/src/command-palette/index.ts +35 -0
- package/src/container/container.meta.ts +7 -0
- package/src/container/container.svelte +66 -0
- package/src/container/index.ts +10 -0
- package/src/context-menu/context-menu-content.svelte +114 -0
- package/src/context-menu/context-menu-group.svelte +15 -0
- package/src/context-menu/context-menu-item.svelte +27 -0
- package/src/context-menu/context-menu-label.svelte +15 -0
- package/src/context-menu/context-menu-root.svelte +26 -0
- package/src/context-menu/context-menu-separator.svelte +10 -0
- package/src/context-menu/context-menu-trigger.svelte +35 -0
- package/src/context-menu/context-menu.meta.ts +7 -0
- package/src/context-menu/context.svelte.ts +7 -0
- package/src/context-menu/index.ts +35 -0
- package/src/data-grid/context.svelte.ts +28 -0
- package/src/data-grid/data-grid-body.svelte +17 -0
- package/src/data-grid/data-grid-button-expand-trigger.svelte +45 -0
- package/src/data-grid/data-grid-button-input-column.svelte +263 -0
- package/src/data-grid/data-grid-button-pagination.svelte +130 -0
- package/src/data-grid/data-grid-cell.svelte +37 -0
- package/src/data-grid/data-grid-expandable-row.svelte +58 -0
- package/src/data-grid/data-grid-header.svelte +21 -0
- package/src/data-grid/data-grid-input-select-all.svelte +52 -0
- package/src/data-grid/data-grid-input-select-cell.svelte +40 -0
- package/src/data-grid/data-grid-root.svelte +229 -0
- package/src/data-grid/data-grid-row.svelte +38 -0
- package/src/data-grid/data-grid-table.svelte +21 -0
- package/src/data-grid/data-grid.meta.ts +7 -0
- package/src/data-grid/index.ts +75 -0
- package/src/date-field/context.svelte.ts +50 -0
- package/src/date-field/date-field-input-root.svelte +284 -0
- package/src/date-field/date-field-segment.svelte +180 -0
- package/src/date-field/date-field-separator.svelte +25 -0
- package/src/date-field/date-field.meta.ts +7 -0
- package/src/date-field/index.ts +23 -0
- package/src/date-picker/context.svelte.ts +27 -0
- package/src/date-picker/date-picker.meta.ts +7 -0
- package/src/date-picker/datepicker-button-calendar.svelte +58 -0
- package/src/date-picker/datepicker-button-trigger.svelte +72 -0
- package/src/date-picker/datepicker-content.svelte +35 -0
- package/src/date-picker/datepicker-input-root.svelte +137 -0
- package/src/date-picker/index.ts +27 -0
- package/src/date-range-picker/context.svelte.ts +30 -0
- package/src/date-range-picker/date-range-picker-button-calendar.svelte +96 -0
- package/src/date-range-picker/date-range-picker-button-preset.svelte +25 -0
- package/src/date-range-picker/date-range-picker-button-trigger.svelte +188 -0
- package/src/date-range-picker/date-range-picker-content.svelte +35 -0
- package/src/date-range-picker/date-range-picker-root.svelte +155 -0
- package/src/date-range-picker/date-range-picker.meta.ts +7 -0
- package/src/date-range-picker/index.ts +30 -0
- package/src/date-time-input/date-time-input.meta.ts +7 -0
- package/src/date-time-input/date-time-input.svelte +104 -0
- package/src/date-time-input/index.ts +7 -0
- package/src/description-list/description-list-description.svelte +23 -0
- package/src/description-list/description-list-item.svelte +34 -0
- package/src/description-list/description-list-root.svelte +22 -0
- package/src/description-list/description-list-term.svelte +23 -0
- package/src/description-list/description-list.meta.ts +7 -0
- package/src/description-list/index.ts +35 -0
- package/src/diagram/diagram.meta.ts +8 -0
- package/src/diagram/diagram.svelte +966 -0
- package/src/diagram/edge-routing.ts +782 -0
- package/src/diagram/index.ts +23 -0
- package/src/diagram/layout.ts +2024 -0
- package/src/diagram/types.ts +262 -0
- package/src/dialog/context.svelte.ts +10 -0
- package/src/dialog/dialog-body.svelte +23 -0
- package/src/dialog/dialog-close.svelte +18 -0
- package/src/dialog/dialog-content.svelte +18 -0
- package/src/dialog/dialog-footer.svelte +35 -0
- package/src/dialog/dialog-header.svelte +26 -0
- package/src/dialog/dialog-overlay.svelte +28 -0
- package/src/dialog/dialog-root.svelte +31 -0
- package/src/dialog/dialog-trigger.svelte +56 -0
- package/src/dialog/dialog.meta.ts +7 -0
- package/src/dialog/index.ts +39 -0
- package/src/displacement/displacement.meta.ts +7 -0
- package/src/displacement/displacement.svelte +139 -0
- package/src/displacement/index.ts +5 -0
- package/src/drag-and-drop/context.svelte.ts +21 -0
- package/src/drag-and-drop/drag-and-drop-group.svelte +37 -0
- package/src/drag-and-drop/drag-and-drop-handle.svelte +106 -0
- package/src/drag-and-drop/drag-and-drop-item.svelte +151 -0
- package/src/drag-and-drop/drag-and-drop-root.svelte +876 -0
- package/src/drag-and-drop/drag-and-drop.meta.ts +7 -0
- package/src/drag-and-drop/group-context.svelte.ts +20 -0
- package/src/drag-and-drop/index.ts +34 -0
- package/src/drawer/context.svelte.ts +11 -0
- package/src/drawer/drawer-body.svelte +33 -0
- package/src/drawer/drawer-close.svelte +18 -0
- package/src/drawer/drawer-dialog-content.svelte +18 -0
- package/src/drawer/drawer-footer.svelte +27 -0
- package/{dist/card/card-footer.svelte → src/drawer/drawer-header.svelte} +8 -10
- package/src/drawer/drawer-overlay.svelte +34 -0
- package/src/drawer/drawer-root.svelte +35 -0
- package/src/drawer/drawer-trigger.svelte +56 -0
- package/src/drawer/drawer.meta.ts +7 -0
- package/src/drawer/index.ts +43 -0
- package/src/drop-zone/drop-zone.meta.ts +7 -0
- package/src/drop-zone/drop-zone.svelte +95 -0
- package/src/drop-zone/index.ts +6 -0
- package/src/dropdown-menu/context.svelte.ts +7 -0
- package/src/dropdown-menu/dropdown-menu-content.svelte +137 -0
- package/src/dropdown-menu/dropdown-menu-group.svelte +15 -0
- package/src/dropdown-menu/dropdown-menu-item.svelte +27 -0
- package/src/dropdown-menu/dropdown-menu-label.svelte +15 -0
- package/src/dropdown-menu/dropdown-menu-root.svelte +26 -0
- package/src/dropdown-menu/dropdown-menu-separator.svelte +10 -0
- package/src/dropdown-menu/dropdown-menu-trigger.svelte +65 -0
- package/src/dropdown-menu/dropdown-menu.meta.ts +7 -0
- package/src/dropdown-menu/index.ts +35 -0
- package/src/enter/enter.meta.ts +8 -0
- package/src/enter/index.ts +1 -0
- package/src/exit/exit.meta.ts +8 -0
- package/src/exit/index.ts +1 -0
- package/src/field/field-description.svelte +38 -0
- package/src/field/field-error.svelte +40 -0
- package/src/field/field-root.svelte +98 -0
- package/src/field/field.meta.ts +7 -0
- package/src/field/index.ts +15 -0
- package/src/fieldset/fieldset-content.svelte +21 -0
- package/src/fieldset/fieldset-description.svelte +26 -0
- package/src/fieldset/fieldset-legend.svelte +26 -0
- package/src/fieldset/fieldset-root.svelte +27 -0
- package/src/fieldset/fieldset.meta.ts +7 -0
- package/src/fieldset/index.ts +35 -0
- package/src/file-select/context.svelte.ts +10 -0
- package/src/file-select/file-select-button-clear.svelte +37 -0
- package/src/file-select/file-select-button-trigger.svelte +26 -0
- package/src/file-select/file-select-root.svelte +168 -0
- package/src/file-select/file-select-value.svelte +43 -0
- package/src/file-select/file-select.meta.ts +7 -0
- package/src/file-select/index.ts +29 -0
- package/src/file-upload/context.svelte.ts +17 -0
- package/src/file-upload/file-upload-button-item-delete.svelte +36 -0
- package/src/file-upload/file-upload-button-trigger.svelte +31 -0
- package/src/file-upload/file-upload-dropzone.svelte +145 -0
- package/src/file-upload/file-upload-input-root.svelte +144 -0
- package/src/file-upload/file-upload-item.svelte +63 -0
- package/src/file-upload/file-upload-list.svelte +37 -0
- package/src/file-upload/file-upload.meta.ts +7 -0
- package/src/file-upload/index.ts +52 -0
- package/src/flip-card/context.svelte.ts +8 -0
- package/src/flip-card/flip-card-back.svelte +34 -0
- package/src/flip-card/flip-card-front.svelte +25 -0
- package/src/flip-card/flip-card-root.svelte +116 -0
- package/src/flip-card/flip-card.meta.ts +7 -0
- package/src/flip-card/index.ts +15 -0
- package/src/float-button/context.svelte.ts +10 -0
- package/src/float-button/float-button-action.svelte +56 -0
- package/src/float-button/float-button-root.svelte +102 -0
- package/src/float-button/float-button-trigger.svelte +43 -0
- package/src/float-button/float-button.meta.ts +7 -0
- package/src/float-button/index.ts +29 -0
- package/src/focus-trap/focus-trap.meta.ts +7 -0
- package/src/focus-trap/focus-trap.svelte +16 -0
- package/src/focus-trap/index.ts +3 -0
- package/src/format-bytes/format-bytes.meta.ts +7 -0
- package/src/format-bytes/format-bytes.svelte +60 -0
- package/src/format-bytes/index.ts +3 -0
- package/src/format-date/format-date.meta.ts +7 -0
- package/src/format-date/format-date.svelte +80 -0
- package/src/format-date/index.ts +3 -0
- package/src/format-number/format-number.meta.ts +7 -0
- package/src/format-number/format-number.svelte +59 -0
- package/src/format-number/index.ts +3 -0
- package/src/gauge/gauge.meta.ts +7 -0
- package/src/gauge/gauge.svelte +143 -0
- package/src/gauge/index.ts +2 -0
- package/src/glass/glass.meta.ts +7 -0
- package/src/glass/glass.svelte +49 -0
- package/src/glass/index.ts +11 -0
- package/src/glow/glow.meta.ts +7 -0
- package/src/glow/glow.svelte +60 -0
- package/src/glow/index.ts +15 -0
- package/src/god-rays/god-rays.meta.ts +8 -0
- package/src/god-rays/god-rays.svelte +132 -0
- package/src/god-rays/index.ts +17 -0
- package/src/gradient-mesh/gradient-mesh.meta.ts +7 -0
- package/src/gradient-mesh/gradient-mesh.svelte +302 -0
- package/src/gradient-mesh/index.ts +5 -0
- package/src/halftone/halftone.meta.ts +7 -0
- package/src/halftone/halftone.svelte +93 -0
- package/src/halftone/index.ts +14 -0
- package/src/heading/heading.meta.ts +7 -0
- package/src/heading/heading.svelte +120 -0
- package/src/heading/index.ts +17 -0
- package/src/hotkey/hotkey.meta.ts +7 -0
- package/src/hotkey/index.ts +2 -0
- package/src/hover-card/context.svelte.ts +1 -0
- package/src/hover-card/hover-card-content.svelte +121 -0
- package/src/hover-card/hover-card-root.svelte +11 -0
- package/src/hover-card/hover-card-trigger.svelte +109 -0
- package/src/hover-card/hover-card.meta.ts +7 -0
- package/src/hover-card/index.ts +19 -0
- package/src/icon/icon.meta.ts +7 -0
- package/src/icon/icon.svelte +92 -0
- package/src/icon/index.ts +11 -0
- package/src/icon-swap/icon-swap.meta.ts +7 -0
- package/src/icon-swap/icon-swap.svelte +48 -0
- package/src/icon-swap/index.ts +1 -0
- package/src/image/image.meta.ts +7 -0
- package/src/image/image.svelte +73 -0
- package/src/image/index.ts +3 -0
- package/src/image-comparison/image-comparison.meta.ts +7 -0
- package/src/image-comparison/image-comparison.svelte +272 -0
- package/src/image-comparison/index.ts +3 -0
- package/src/index.ts +863 -0
- package/src/infinite-scroll/index.ts +3 -0
- package/src/infinite-scroll/infinite-scroll.meta.ts +7 -0
- package/src/infinite-scroll/infinite-scroll.svelte +109 -0
- package/src/input/index.ts +8 -0
- package/src/input/input.meta.ts +7 -0
- package/src/input/input.svelte +261 -0
- package/src/input-group/context.svelte.ts +9 -0
- package/src/input-group/index.ts +45 -0
- package/src/input-group/input-group-action-button.svelte +29 -0
- package/src/input-group/input-group-input.svelte +57 -0
- package/src/input-group/input-group-prefix.svelte +43 -0
- package/src/input-group/input-group-root.svelte +108 -0
- package/src/input-group/input-group-select.svelte +70 -0
- package/src/input-group/input-group-separator.svelte +38 -0
- package/src/input-group/input-group-suffix.svelte +43 -0
- package/src/input-group/input-group.meta.ts +8 -0
- package/src/internal/anchored-overlay-content.svelte.ts +42 -0
- package/src/internal/calendar-event-layout.ts +294 -0
- package/src/internal/calendar-grid-button.svelte +805 -0
- package/src/internal/calendar-grid-utils.ts +123 -0
- package/src/internal/close-button-base.svelte +35 -0
- package/src/internal/color-aliases.ts +37 -0
- package/src/internal/date-family-controller.svelte.ts +165 -0
- package/src/internal/form-control-wrapper-attrs.ts +20 -0
- package/src/internal/menu-group.svelte +15 -0
- package/src/internal/menu-item.svelte +89 -0
- package/src/internal/menu-label.svelte +24 -0
- package/src/internal/menu-root-state.svelte.ts +73 -0
- package/src/internal/menu-separator.svelte +19 -0
- package/src/internal/modal-content.svelte +351 -0
- package/src/internal/motion.ts +85 -0
- package/src/internal/nav-arrow-button.svelte +42 -0
- package/src/internal/picker-popover-content.svelte +111 -0
- package/src/kbd/index.ts +9 -0
- package/src/kbd/kbd.meta.ts +7 -0
- package/src/kbd/kbd.svelte +56 -0
- package/src/label/index.ts +7 -0
- package/src/label/label.meta.ts +7 -0
- package/src/label/label.svelte +74 -0
- package/src/link/index.ts +7 -0
- package/src/link/link.meta.ts +7 -0
- package/src/link/link.svelte +104 -0
- package/src/link-preview/context.svelte.ts +15 -0
- package/src/link-preview/index.ts +19 -0
- package/src/link-preview/link-preview-content.svelte +87 -0
- package/src/link-preview/link-preview-root.svelte +72 -0
- package/src/link-preview/link-preview-trigger.svelte +61 -0
- package/src/link-preview/link-preview.meta.ts +7 -0
- package/src/list/context.svelte.ts +7 -0
- package/src/list/index.ts +27 -0
- package/src/list/list-item-icon.svelte +22 -0
- package/src/list/list-item-text.svelte +42 -0
- package/src/list/list-item.svelte +116 -0
- package/src/list/list-root.svelte +71 -0
- package/src/list/list-subheader.svelte +25 -0
- package/src/list/list.meta.ts +7 -0
- package/src/listbox/context.svelte.ts +10 -0
- package/src/listbox/index.ts +12 -0
- package/src/listbox/listbox-item.svelte +90 -0
- package/src/listbox/listbox-root.svelte +115 -0
- package/src/listbox/listbox.meta.ts +7 -0
- package/src/logo-mark/index.ts +12 -0
- package/src/logo-mark/logo-mark.meta.ts +7 -0
- package/src/logo-mark/logo-mark.svelte +154 -0
- package/src/map/context.svelte.ts +19 -0
- package/src/map/index.ts +77 -0
- package/src/map/map-controls.svelte +68 -0
- package/src/map/map-layer.svelte +101 -0
- package/src/map/map-marker.svelte +83 -0
- package/src/map/map-popup.svelte +71 -0
- package/src/map/map-root.svelte +244 -0
- package/src/map/map.meta.ts +7 -0
- package/src/markdown-renderer/index.ts +4 -0
- package/src/markdown-renderer/markdown-renderer.meta.ts +7 -0
- package/src/markdown-renderer/markdown-renderer.svelte +202 -0
- package/src/marquee/index.ts +3 -0
- package/src/marquee/marquee.meta.ts +7 -0
- package/src/marquee/marquee.svelte +218 -0
- package/src/mask-reveal/index.ts +5 -0
- package/src/mask-reveal/mask-reveal.meta.ts +7 -0
- package/src/mask-reveal/mask-reveal.svelte +214 -0
- package/src/mega-menu/context.svelte.ts +17 -0
- package/src/mega-menu/index.ts +31 -0
- package/src/mega-menu/mega-menu-button-trigger.svelte +37 -0
- package/src/mega-menu/mega-menu-column.svelte +34 -0
- package/src/mega-menu/mega-menu-item.svelte +51 -0
- package/src/mega-menu/mega-menu-link.svelte +137 -0
- package/src/mega-menu/mega-menu-panel.svelte +134 -0
- package/src/mega-menu/mega-menu-root.svelte +98 -0
- package/src/mega-menu/mega-menu.meta.ts +7 -0
- package/src/menubar/context.svelte.ts +24 -0
- package/src/menubar/index.ts +35 -0
- package/src/menubar/menubar-button-trigger.svelte +75 -0
- package/src/menubar/menubar-content.svelte +147 -0
- package/src/menubar/menubar-item.svelte +96 -0
- package/{dist/card/card-header.svelte → src/menubar/menubar-label.svelte} +6 -10
- package/src/menubar/menubar-menu.svelte +32 -0
- package/src/menubar/menubar-root.svelte +78 -0
- package/src/menubar/menubar-separator.svelte +17 -0
- package/src/menubar/menubar.meta.ts +7 -0
- package/src/motion/enter.svelte +29 -0
- package/src/motion/enter.ts +46 -0
- package/src/motion/exit.svelte +21 -0
- package/src/motion/index.ts +7 -0
- package/src/motion/leave.ts +41 -0
- package/src/motion/motion.meta.ts +8 -0
- package/src/motion/stagger.svelte +30 -0
- package/src/multi-select-combobox/context.svelte.ts +31 -0
- package/src/multi-select-combobox/index.ts +43 -0
- package/src/multi-select-combobox/multi-select-combobox-content.svelte +118 -0
- package/src/multi-select-combobox/multi-select-combobox-empty.svelte +28 -0
- package/src/multi-select-combobox/multi-select-combobox-group.svelte +33 -0
- package/src/multi-select-combobox/multi-select-combobox-input.svelte +161 -0
- package/src/multi-select-combobox/multi-select-combobox-item.svelte +140 -0
- package/src/multi-select-combobox/multi-select-combobox-root-input.svelte +286 -0
- package/src/multi-select-combobox/multi-select-combobox-selection-item.svelte +63 -0
- package/src/multi-select-combobox/multi-select-combobox-selection-list.svelte +29 -0
- package/src/multi-select-combobox/multi-select-combobox-selection-remove-button.svelte +36 -0
- package/src/multi-select-combobox/multi-select-combobox.meta.ts +7 -0
- package/src/navigation-menu/context.svelte.ts +18 -0
- package/src/navigation-menu/index.ts +50 -0
- package/src/navigation-menu/navigation-menu-content.svelte +55 -0
- package/src/navigation-menu/navigation-menu-item.svelte +35 -0
- package/src/navigation-menu/navigation-menu-link.svelte +49 -0
- package/src/navigation-menu/navigation-menu-list.svelte +47 -0
- package/src/navigation-menu/navigation-menu-root.svelte +46 -0
- package/src/navigation-menu/navigation-menu-trigger-button.svelte +62 -0
- package/src/navigation-menu/navigation-menu.meta.ts +7 -0
- package/src/noise/index.ts +15 -0
- package/src/noise/noise.meta.ts +7 -0
- package/src/noise/noise.svelte +179 -0
- package/src/notification-center/context.svelte.ts +24 -0
- package/src/notification-center/index.ts +28 -0
- package/src/notification-center/notification-center-group.svelte +30 -0
- package/src/notification-center/notification-center-item.svelte +70 -0
- package/src/notification-center/notification-center-panel.svelte +162 -0
- package/src/notification-center/notification-center-root.svelte +73 -0
- package/src/notification-center/notification-center-trigger-button.svelte +28 -0
- package/src/notification-center/notification-center.meta.ts +7 -0
- package/src/number-input/index.ts +7 -0
- package/src/number-input/number-input-button.svelte +222 -0
- package/src/number-input/number-input.meta.ts +7 -0
- package/src/numeric/index.ts +1 -0
- package/src/numeric/numeric.meta.ts +7 -0
- package/src/numeric/numeric.svelte +64 -0
- package/src/option-picker/context.svelte.ts +11 -0
- package/src/option-picker/index.ts +52 -0
- package/src/option-picker/option-picker-description.svelte +25 -0
- package/src/option-picker/option-picker-item.svelte +242 -0
- package/src/option-picker/option-picker-label.svelte +24 -0
- package/src/option-picker/option-picker-meta.svelte +24 -0
- package/src/option-picker/option-picker-preview.svelte +155 -0
- package/src/option-picker/option-picker-root.svelte +82 -0
- package/src/option-picker/option-picker.meta.ts +8 -0
- package/src/pagination/context.svelte.ts +12 -0
- package/src/pagination/index.ts +35 -0
- package/src/pagination/pagination-content.svelte +27 -0
- package/src/pagination/pagination-ellipsis.svelte +19 -0
- package/src/pagination/pagination-item.svelte +14 -0
- package/src/pagination/pagination-link-button.svelte +28 -0
- package/src/pagination/pagination-nav-button.svelte +28 -0
- package/src/pagination/pagination-next-button.svelte +13 -0
- package/src/pagination/pagination-previous-button.svelte +13 -0
- package/src/pagination/pagination-root.svelte +48 -0
- package/src/pagination/pagination.meta.ts +7 -0
- package/src/phone-input/index.ts +9 -0
- package/src/phone-input/phone-input-select.svelte +286 -0
- package/src/phone-input/phone-input.meta.ts +7 -0
- package/src/pin-input/context.svelte.ts +18 -0
- package/src/pin-input/index.ts +31 -0
- package/src/pin-input/pin-input-cell.svelte +117 -0
- package/src/pin-input/pin-input-group.svelte +24 -0
- package/src/pin-input/pin-input-root.svelte +315 -0
- package/src/pin-input/pin-input-separator.svelte +28 -0
- package/src/pin-input/pin-input.meta.ts +7 -0
- package/src/popover/context.svelte.ts +13 -0
- package/src/popover/index.ts +15 -0
- package/src/popover/popover-content.svelte +112 -0
- package/src/popover/popover-root.svelte +39 -0
- package/src/popover/popover-trigger.svelte +62 -0
- package/src/popover/popover.meta.ts +7 -0
- package/src/portal/index.ts +3 -0
- package/src/portal/portal.meta.ts +7 -0
- package/src/portal/portal.svelte +14 -0
- package/src/progress/index.ts +14 -0
- package/src/progress/progress.meta.ts +7 -0
- package/src/progress/progress.svelte +302 -0
- package/src/progress-ring/index.ts +8 -0
- package/src/progress-ring/progress-ring.meta.ts +7 -0
- package/src/progress-ring/progress-ring.svelte +169 -0
- package/src/prompt-input/index.ts +16 -0
- package/src/prompt-input/prompt-input-button-textarea.svelte +171 -0
- package/src/prompt-input/prompt-input.meta.ts +7 -0
- package/src/qr-code/index.ts +3 -0
- package/src/qr-code/qr-code.meta.ts +7 -0
- package/src/qr-code/qr-code.svelte +149 -0
- package/src/radio-group/context.svelte.ts +10 -0
- package/src/radio-group/index.ts +12 -0
- package/src/radio-group/radio-group-item-input.svelte +197 -0
- package/src/radio-group/radio-group.meta.ts +7 -0
- package/src/radio-group/radio-group.svelte +117 -0
- package/src/range-calendar/context.svelte.ts +22 -0
- package/src/range-calendar/index.ts +16 -0
- package/src/range-calendar/range-calendar-grid-button.svelte +77 -0
- package/src/range-calendar/range-calendar-root.svelte +146 -0
- package/src/range-calendar/range-calendar.meta.ts +7 -0
- package/src/rating/index.ts +7 -0
- package/src/rating/rating-button-input.svelte +265 -0
- package/src/rating/rating.meta.ts +7 -0
- package/src/relative-time/index.ts +3 -0
- package/src/relative-time/relative-time.meta.ts +7 -0
- package/src/relative-time/relative-time.svelte +71 -0
- package/src/reveal/index.ts +7 -0
- package/src/reveal/reveal.meta.ts +8 -0
- package/src/reveal/reveal.svelte +190 -0
- package/src/rich-text-editor/index.ts +19 -0
- package/src/rich-text-editor/rich-text-editor-content.svelte +184 -0
- package/src/rich-text-editor/rich-text-editor-root.svelte +213 -0
- package/src/rich-text-editor/rich-text-editor-toolbar-button-input.svelte +541 -0
- package/src/rich-text-editor/rich-text-editor.meta.ts +7 -0
- package/src/scroll-area/index.ts +3 -0
- package/src/scroll-area/scroll-area.meta.ts +7 -0
- package/src/scroll-area/scroll-area.svelte +85 -0
- package/src/scroll-to-top/index.ts +8 -0
- package/src/scroll-to-top/scroll-to-top-button.svelte +89 -0
- package/src/scroll-to-top/scroll-to-top.meta.ts +7 -0
- package/src/segmented-control/context.svelte.ts +10 -0
- package/src/segmented-control/index.ts +12 -0
- package/src/segmented-control/segmented-control-item-button.svelte +37 -0
- package/src/segmented-control/segmented-control-root.svelte +125 -0
- package/src/segmented-control/segmented-control.meta.ts +7 -0
- package/src/select/context.svelte.ts +17 -0
- package/src/select/index.ts +27 -0
- package/src/select/select-content.svelte +202 -0
- package/src/select/select-item.svelte +118 -0
- package/src/select/select-root-input.svelte +105 -0
- package/src/select/select-trigger-button.svelte +183 -0
- package/src/select/select-value.svelte +27 -0
- package/src/select/select.meta.ts +7 -0
- package/src/separator/index.ts +9 -0
- package/src/separator/separator.meta.ts +7 -0
- package/src/separator/separator.svelte +70 -0
- package/src/shader-canvas/index.ts +28 -0
- package/src/shader-canvas/presets.ts +212 -0
- package/src/shader-canvas/shader-canvas.meta.ts +7 -0
- package/src/shader-canvas/shader-canvas.svelte +115 -0
- package/src/shimmer/index.ts +10 -0
- package/src/shimmer/shimmer.meta.ts +7 -0
- package/src/shimmer/shimmer.svelte +125 -0
- package/src/sidebar/context.svelte.ts +10 -0
- package/src/sidebar/index.ts +66 -0
- package/src/sidebar/sidebar-content.svelte +43 -0
- package/src/sidebar/sidebar-footer.svelte +28 -0
- package/src/sidebar/sidebar-group-label.svelte +45 -0
- package/src/sidebar/sidebar-group.svelte +29 -0
- package/src/sidebar/sidebar-header.svelte +34 -0
- package/src/sidebar/sidebar-item.svelte +57 -0
- package/src/sidebar/sidebar-root.svelte +76 -0
- package/src/sidebar/sidebar-trigger-button.svelte +29 -0
- package/src/sidebar/sidebar.meta.ts +7 -0
- package/src/skeleton/index.ts +9 -0
- package/src/skeleton/skeleton.meta.ts +7 -0
- package/src/skeleton/skeleton.svelte +97 -0
- package/src/slider/index.ts +12 -0
- package/src/slider/slider-input.svelte +277 -0
- package/src/slider/slider.meta.ts +7 -0
- package/src/spacer/index.ts +8 -0
- package/src/spacer/spacer.meta.ts +7 -0
- package/src/spacer/spacer.svelte +84 -0
- package/src/sparkline/index.ts +3 -0
- package/src/sparkline/sparkline.meta.ts +7 -0
- package/src/sparkline/sparkline.svelte +113 -0
- package/src/spinner/index.ts +9 -0
- package/src/spinner/spinner.meta.ts +7 -0
- package/src/spinner/spinner.svelte +110 -0
- package/src/splitter/context.svelte.ts +11 -0
- package/src/splitter/index.ts +15 -0
- package/src/splitter/splitter-handle.svelte +171 -0
- package/src/splitter/splitter-panel.svelte +28 -0
- package/src/splitter/splitter-root.svelte +128 -0
- package/src/splitter/splitter.meta.ts +7 -0
- package/src/spotlight/index.ts +5 -0
- package/src/spotlight/spotlight.meta.ts +8 -0
- package/src/spotlight/spotlight.svelte +249 -0
- package/src/stagger/index.ts +1 -0
- package/src/stagger/stagger.meta.ts +8 -0
- package/src/star-rating/index.ts +16 -0
- package/src/star-rating/star-rating-root.svelte +109 -0
- package/src/star-rating/star-rating.meta.ts +7 -0
- package/src/stepper/context.svelte.ts +9 -0
- package/src/stepper/index.ts +23 -0
- package/src/stepper/stepper-list.svelte +37 -0
- package/src/stepper/stepper-root.svelte +51 -0
- package/src/stepper/stepper-separator.svelte +45 -0
- package/src/stepper/stepper-step-button.svelte +113 -0
- package/src/stepper/stepper.meta.ts +7 -0
- package/src/svg/index.ts +5 -0
- package/src/svg/svg.meta.ts +7 -0
- package/src/svg/svg.svelte +19 -0
- package/src/table/index.ts +39 -0
- package/src/table/table-body.svelte +14 -0
- package/src/table/table-caption.svelte +25 -0
- package/src/table/table-cell.svelte +24 -0
- package/src/table/table-footer.svelte +21 -0
- package/src/table/table-head.svelte +26 -0
- package/src/table/table-header.svelte +21 -0
- package/src/table/table-root.svelte +64 -0
- package/src/table/table-row.svelte +28 -0
- package/src/table/table.meta.ts +7 -0
- package/src/table-of-contents/context.svelte.ts +14 -0
- package/src/table-of-contents/index.ts +20 -0
- package/src/table-of-contents/table-of-contents-item.svelte +86 -0
- package/src/table-of-contents/table-of-contents-list.svelte +87 -0
- package/src/table-of-contents/table-of-contents-root.svelte +88 -0
- package/src/table-of-contents/table-of-contents.meta.ts +7 -0
- package/src/tabs/context.svelte.ts +16 -0
- package/src/tabs/index.ts +43 -0
- package/src/tabs/tabs-content.svelte +42 -0
- package/src/tabs/tabs-list.svelte +102 -0
- package/src/tabs/tabs-root.svelte +59 -0
- package/src/tabs/tabs-trigger-button.svelte +41 -0
- package/src/tabs/tabs.meta.ts +7 -0
- package/src/tag/index.ts +12 -0
- package/src/tag/tag-button.svelte +254 -0
- package/src/tag/tag.meta.ts +7 -0
- package/src/tags-input/context.svelte.ts +13 -0
- package/src/tags-input/index.ts +32 -0
- package/src/tags-input/tags-input-input.svelte +85 -0
- package/src/tags-input/tags-input-list.svelte +20 -0
- package/src/tags-input/tags-input-root.svelte +136 -0
- package/src/tags-input/tags-input-tag-delete-button.svelte +31 -0
- package/src/tags-input/tags-input-tag.svelte +61 -0
- package/src/tags-input/tags-input.meta.ts +7 -0
- package/src/text/index.ts +20 -0
- package/src/text/text.meta.ts +7 -0
- package/src/text/text.svelte +150 -0
- package/src/textarea/index.ts +7 -0
- package/src/textarea/textarea.meta.ts +7 -0
- package/src/textarea/textarea.svelte +210 -0
- package/src/theme-toggle/index.ts +30 -0
- package/src/theme-toggle/theme-controller.svelte.ts +171 -0
- package/src/theme-toggle/theme-flash.ts +39 -0
- package/src/theme-toggle/theme-toggle.meta.ts +7 -0
- package/src/theme-toggle/theme-toggle.svelte +199 -0
- package/src/themes/aurora.css +243 -0
- package/src/themes/component-defaults.css +47 -0
- package/src/themes/dark.css +317 -0
- package/src/themes/default.css +618 -0
- package/src/themes/midnight.css +147 -0
- package/src/themes/terminal.css +161 -0
- package/src/themes/token-scope.ts +1 -0
- package/src/time-input/index.ts +10 -0
- package/src/time-input/time-input.meta.ts +7 -0
- package/src/time-input/time-input.svelte +157 -0
- package/src/timeline/index.ts +40 -0
- package/src/timeline/timeline-content.svelte +22 -0
- package/src/timeline/timeline-description.svelte +22 -0
- package/src/timeline/timeline-icon.svelte +41 -0
- package/src/timeline/timeline-item.svelte +57 -0
- package/src/timeline/timeline-root.svelte +43 -0
- package/src/timeline/timeline-time.svelte +22 -0
- package/src/timeline/timeline-title.svelte +55 -0
- package/src/timeline/timeline.meta.ts +7 -0
- package/src/toast/context.svelte.ts +7 -0
- package/src/toast/index.ts +33 -0
- package/src/toast/toast-action-button.svelte +16 -0
- package/src/toast/toast-close-button.svelte +35 -0
- package/src/toast/toast-description.svelte +24 -0
- package/src/toast/toast-provider.svelte +120 -0
- package/src/toast/toast-root.svelte +169 -0
- package/src/toast/toast-title.svelte +25 -0
- package/src/toast/toast.meta.ts +7 -0
- package/src/toggle/index.ts +9 -0
- package/src/toggle/toggle-button.svelte +218 -0
- package/src/toggle/toggle.meta.ts +7 -0
- package/src/toggle-group/context.svelte.ts +12 -0
- package/src/toggle-group/index.ts +18 -0
- package/src/toggle-group/toggle-group-item-button.svelte +36 -0
- package/src/toggle-group/toggle-group-root.svelte +106 -0
- package/src/toggle-group/toggle-group.meta.ts +7 -0
- package/src/token-scope/index.ts +8 -0
- package/src/token-scope/token-scope.meta.ts +7 -0
- package/src/toolbar/context.svelte.ts +6 -0
- package/src/toolbar/index.ts +23 -0
- package/src/toolbar/toolbar-button.svelte +16 -0
- package/src/toolbar/toolbar-link.svelte +46 -0
- package/src/toolbar/toolbar-root.svelte +100 -0
- package/src/toolbar/toolbar-separator.svelte +33 -0
- package/src/toolbar/toolbar.meta.ts +7 -0
- package/src/tooltip/context.svelte.ts +14 -0
- package/src/tooltip/index.ts +15 -0
- package/src/tooltip/tooltip-content.svelte +106 -0
- package/src/tooltip/tooltip-root.svelte +73 -0
- package/src/tooltip/tooltip-trigger.svelte +74 -0
- package/src/tooltip/tooltip.meta.ts +7 -0
- package/src/tour/index.ts +12 -0
- package/src/tour/tour-root.css +215 -0
- package/src/tour/tour-root.css.d.ts +2 -0
- package/src/tour/tour-root.svelte +19 -0
- package/src/tour/tour-tooltip-button.svelte +48 -0
- package/src/tour/tour.meta.ts +7 -0
- package/src/transfer/context.svelte.ts +31 -0
- package/src/transfer/index.ts +29 -0
- package/src/transfer/transfer-actions-button.svelte +91 -0
- package/src/transfer/transfer-item.svelte +35 -0
- package/src/transfer/transfer-list-input.svelte +204 -0
- package/src/transfer/transfer-root.svelte +145 -0
- package/src/transfer/transfer.meta.ts +7 -0
- package/src/tree/context.svelte.ts +24 -0
- package/src/tree/index.ts +23 -0
- package/src/tree/tree-item-children.svelte +51 -0
- package/src/tree/tree-item-label.svelte +56 -0
- package/src/tree/tree-item.svelte +63 -0
- package/src/tree/tree-root.svelte +246 -0
- package/src/tree/tree.meta.ts +7 -0
- package/src/typing-indicator/index.ts +5 -0
- package/src/typing-indicator/typing-indicator.meta.ts +7 -0
- package/src/typing-indicator/typing-indicator.svelte +72 -0
- package/src/typography/blockquote.svelte +24 -0
- package/src/typography/code.svelte +25 -0
- package/src/typography/heading.svelte +17 -0
- package/src/typography/index.ts +30 -0
- package/src/typography/text.svelte +25 -0
- package/src/typography/typography.meta.ts +7 -0
- package/src/video-embed/index.ts +3 -0
- package/src/video-embed/video-embed-button.svelte +177 -0
- package/src/video-embed/video-embed.meta.ts +7 -0
- package/src/virtual-list/index.ts +3 -0
- package/src/virtual-list/virtual-list.meta.ts +7 -0
- package/src/virtual-list/virtual-list.svelte +239 -0
- package/src/visually-hidden/index.ts +8 -0
- package/src/visually-hidden/visually-hidden.meta.ts +7 -0
- package/src/visually-hidden/visually-hidden.svelte +28 -0
- package/dist/card/card-content.svelte +0 -32
- package/dist/card/card-content.svelte.d.ts +0 -9
- package/dist/card/card-footer.svelte.d.ts +0 -8
- package/dist/card/card-header.svelte.d.ts +0 -8
- package/dist/card/card-root.svelte +0 -184
- package/dist/card/card-root.svelte.d.ts +0 -15
- package/dist/card/card.meta.js +0 -7
- package/dist/card/index.d.ts +0 -31
- package/dist/card/index.js +0 -10
- package/skills/dryui/SKILL.md +0 -306
- package/skills/dryui/agents/openai.yaml +0 -10
- package/skills/dryui/rules/accessibility.md +0 -215
- package/skills/dryui/rules/composition.md +0 -500
- package/skills/dryui/rules/compound-components.md +0 -312
- package/skills/dryui/rules/native-web-transitions.md +0 -99
- package/skills/dryui/rules/svelte.md +0 -234
- package/skills/dryui/rules/theming.md +0 -305
- /package/dist/{card/card.meta.d.ts → token-scope/token-scope.meta.d.ts} +0 -0
package/dist/themes/default.css
CHANGED
|
@@ -1,59 +1,46 @@
|
|
|
1
|
+
/* Tokens + motion utilities components depend on. Host page decides paint. */
|
|
1
2
|
*,
|
|
2
3
|
*::before,
|
|
3
4
|
*::after {
|
|
5
|
+
/* Components are authored against border-box sizing math. */
|
|
4
6
|
box-sizing: border-box;
|
|
5
|
-
margin: 0;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
html {
|
|
9
|
-
font-family: var(--dry-font-sans);
|
|
10
|
-
color: var(--dry-color-text-strong);
|
|
11
|
-
background: var(--dry-color-bg-base);
|
|
12
|
-
-webkit-font-smoothing: antialiased;
|
|
13
|
-
-moz-osx-font-smoothing: grayscale;
|
|
14
|
-
text-rendering: optimizeLegibility;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
body {
|
|
18
|
-
margin: 0;
|
|
19
|
-
min-height: 100dvh;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
:where(h1, h2, h3, h4, h5, h6) {
|
|
23
|
-
text-wrap: balance;
|
|
24
|
-
}
|
|
25
|
-
:where(p) {
|
|
26
|
-
text-wrap: pretty;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
code,
|
|
30
|
-
pre,
|
|
31
|
-
kbd,
|
|
32
|
-
samp {
|
|
33
|
-
font-family: var(--dry-font-mono);
|
|
34
7
|
}
|
|
35
8
|
|
|
36
9
|
:root {
|
|
10
|
+
/* ─── Public aliases (Tier 2, documented) ──────────────────────────
|
|
11
|
+
Override at `:root` to retheme. Tier 3 tokens below derive via
|
|
12
|
+
`var(--alias)` so overrides cascade. See skills/dryui-build/SKILL.md. */
|
|
13
|
+
--dry-color-primary: hsl(230, 64%, 57%);
|
|
14
|
+
--dry-color-primary-hover: hsl(230, 64%, 49%);
|
|
15
|
+
--dry-color-text: hsla(230, 100%, 7%, 0.9);
|
|
16
|
+
--dry-color-text-secondary: hsla(230, 100%, 10%, 0.65);
|
|
17
|
+
--dry-color-foreground: var(--dry-color-text);
|
|
18
|
+
--dry-color-muted: hsla(230, 100%, 20%, 0.1);
|
|
19
|
+
--dry-color-warning: hsl(40, 80%, 50%);
|
|
20
|
+
--dry-color-success: hsl(145, 60%, 45%);
|
|
21
|
+
--dry-color-danger: hsl(0, 70%, 50%);
|
|
22
|
+
--dry-color-border: hsla(230, 100%, 20%, 0.1);
|
|
23
|
+
--dry-color-border-hover: hsla(230, 100%, 15%, 0.45);
|
|
24
|
+
|
|
37
25
|
/* ─── Neutral ─────────────────────────────────────────────────── */
|
|
38
|
-
--dry-color-text-strong:
|
|
39
|
-
--dry-color-text-weak:
|
|
26
|
+
--dry-color-text-strong: var(--dry-color-text);
|
|
27
|
+
--dry-color-text-weak: var(--dry-color-text-secondary);
|
|
40
28
|
--dry-color-icon: hsla(230, 100%, 15%, 0.7);
|
|
41
|
-
--dry-color-stroke-strong:
|
|
42
|
-
--dry-color-stroke-weak:
|
|
29
|
+
--dry-color-stroke-strong: var(--dry-color-border-hover);
|
|
30
|
+
--dry-color-stroke-weak: var(--dry-color-border);
|
|
43
31
|
--dry-color-fill: hsla(230, 100%, 25%, 0.04);
|
|
44
32
|
--dry-color-fill-hover: hsla(230, 100%, 25%, 0.04);
|
|
45
33
|
--dry-color-fill-active: hsla(230, 100%, 25%, 0.12);
|
|
46
34
|
|
|
47
35
|
/* ─── Brand (hue 230) ─────────────────────────────────────────── */
|
|
48
|
-
--dry-color-brand:
|
|
49
|
-
--dry-color-text-brand:
|
|
50
|
-
--dry-color-fill-brand:
|
|
51
|
-
--dry-color-fill-brand-hover:
|
|
36
|
+
--dry-color-brand: var(--dry-color-primary);
|
|
37
|
+
--dry-color-text-brand: var(--dry-color-primary);
|
|
38
|
+
--dry-color-fill-brand: var(--dry-color-primary);
|
|
39
|
+
--dry-color-fill-brand-hover: var(--dry-color-primary-hover);
|
|
52
40
|
--dry-color-fill-brand-active: hsl(230, 64%, 43%);
|
|
53
41
|
--dry-color-fill-brand-weak: hsla(230, 100%, 67%, 0.05);
|
|
54
42
|
--dry-color-stroke-brand: hsla(230, 64%, 57%, 0.5);
|
|
55
43
|
--dry-color-stroke-brand-strong: hsla(230, 64%, 57%, 0.8);
|
|
56
|
-
--dry-color-stroke-brand-weak: hsla(230, 64%, 57%, 0.2);
|
|
57
44
|
--dry-color-on-brand: #ffffff;
|
|
58
45
|
--dry-color-focus-ring: hsla(230, 64%, 57%, 0.4);
|
|
59
46
|
|
|
@@ -63,43 +50,32 @@ samp {
|
|
|
63
50
|
--dry-color-bg-overlay: #f1f3f5;
|
|
64
51
|
|
|
65
52
|
/* ─── Semantic parity extensions ──────────────────────────────── */
|
|
66
|
-
--dry-color-text-disabled: var(--dry-color-
|
|
53
|
+
--dry-color-text-disabled: var(--dry-color-muted);
|
|
67
54
|
--dry-color-text-inverse: hsla(0, 0%, 100%, 1);
|
|
68
55
|
--dry-color-text-inverse-weak: hsla(0, 0%, 100%, 0.78);
|
|
69
56
|
--dry-color-text-inverse-disabled: hsla(0, 0%, 100%, 0.12);
|
|
70
57
|
|
|
71
|
-
--dry-color-icon-brand: var(--dry-color-stroke-brand-strong);
|
|
72
|
-
--dry-color-icon-disabled: var(--dry-color-stroke-weak);
|
|
73
|
-
--dry-color-icon-inverse: var(--dry-color-stroke-inverse);
|
|
74
|
-
--dry-color-icon-inverse-strong: var(--dry-color-text-inverse);
|
|
75
|
-
--dry-color-icon-inverse-weak: var(--dry-color-text-inverse-weak);
|
|
76
|
-
--dry-color-icon-inverse-disabled: var(--dry-color-text-inverse-disabled);
|
|
77
|
-
|
|
78
58
|
--dry-color-stroke-focus: var(--dry-color-brand);
|
|
79
59
|
--dry-color-stroke-selected: var(--dry-color-brand);
|
|
80
60
|
--dry-color-stroke-disabled: var(--dry-color-stroke-weak);
|
|
81
61
|
--dry-color-stroke-inverse: hsla(0, 0%, 100%, 0.6);
|
|
82
62
|
--dry-color-stroke-inverse-weak: hsla(0, 0%, 100%, 0.12);
|
|
83
63
|
|
|
84
|
-
--dry-color-fill-strong: var(--dry-color-text-strong);
|
|
85
64
|
--dry-color-fill-weak: var(--dry-color-fill);
|
|
86
65
|
--dry-color-fill-weaker: hsla(230, 100%, 25%, 0.02);
|
|
87
66
|
--dry-color-fill-selected: var(--dry-color-fill-brand);
|
|
88
67
|
--dry-color-fill-disabled: var(--dry-color-stroke-weak);
|
|
89
|
-
--dry-color-fill-overlay: var(--dry-color-stroke-strong);
|
|
90
68
|
--dry-color-fill-inverse: var(--dry-color-text-inverse);
|
|
91
69
|
--dry-color-fill-inverse-weak: hsla(0, 0%, 100%, 0.06);
|
|
92
|
-
--dry-color-fill-inverse-hover: var(--dry-color-fill-inverse-weak);
|
|
93
|
-
--dry-color-fill-inverse-active: hsla(0, 0%, 100%, 0.12);
|
|
94
|
-
--dry-color-fill-inverse-disabled: #ffffff1f;
|
|
95
|
-
--dry-color-fill-white: #ffffff;
|
|
96
70
|
--dry-color-fill-yellow: #fec62e;
|
|
97
71
|
|
|
98
72
|
--dry-color-bg-sunken: #f5f6fa;
|
|
99
73
|
--dry-color-bg-alternate: var(--dry-color-bg-sunken);
|
|
100
|
-
--dry-color-bg-brand: var(--dry-color-fill-brand);
|
|
101
74
|
--dry-color-bg-inverse: hsl(233, 18%, 9%);
|
|
102
75
|
|
|
76
|
+
/* Resolves at use-time so it tracks the active theme. */
|
|
77
|
+
--dry-color-bg: var(--dry-color-bg-base);
|
|
78
|
+
|
|
103
79
|
/* ─── Image edge ring ────────────────────────────────────────────
|
|
104
80
|
Subtle 1px outline for image surfaces (avatars, images, image
|
|
105
81
|
skeletons). Prevents image edges from reading as surface
|
|
@@ -110,17 +86,15 @@ samp {
|
|
|
110
86
|
Derived from semantic tokens so brand overrides (e.g. a consumer
|
|
111
87
|
retheming --dry-color-fill-brand) flow through to toggles too.
|
|
112
88
|
Thumb bg is intentionally a neutral literal — it's a surface knob,
|
|
113
|
-
not a brand-tinted element.
|
|
89
|
+
not a brand-tinted element. Mirrored in `component-defaults.css`
|
|
90
|
+
for consumers who want to import the component layer alone. */
|
|
114
91
|
--dry-toggle-track-bg: var(--dry-color-fill-brand-weak);
|
|
115
92
|
--dry-toggle-track-stroke: var(--dry-color-stroke-strong);
|
|
116
93
|
--dry-toggle-selected-bg: var(--dry-color-fill-brand);
|
|
117
94
|
--dry-toggle-selected-stroke: var(--dry-color-fill-brand);
|
|
118
95
|
--dry-toggle-thumb-bg: #ffffff;
|
|
119
|
-
--dry-toggle-hover-bg: var(--dry-color-fill-brand-weak);
|
|
120
|
-
--dry-toggle-press-bg: var(--dry-color-fill-active);
|
|
121
96
|
--dry-toggle-disabled-fill: var(--dry-color-stroke-weak);
|
|
122
97
|
--dry-toggle-disabled-stroke: var(--dry-color-stroke-weak);
|
|
123
|
-
--dry-toggle-focus-ring: var(--dry-color-fill-brand);
|
|
124
98
|
--dry-toggle-label-color: var(--dry-color-text-strong);
|
|
125
99
|
--dry-toggle-label-disabled-color: var(--dry-color-text-disabled);
|
|
126
100
|
|
|
@@ -129,59 +103,50 @@ samp {
|
|
|
129
103
|
|
|
130
104
|
/* ─── Status: Error (hue 0) ───────────────────────────────────── */
|
|
131
105
|
--dry-color-text-error: hsl(0, 70%, 35%);
|
|
132
|
-
--dry-color-fill-error:
|
|
106
|
+
--dry-color-fill-error: var(--dry-color-danger);
|
|
133
107
|
--dry-color-fill-error-hover: hsl(0, 70%, 42%);
|
|
134
108
|
--dry-color-fill-error-weak: hsla(0, 70%, 50%, 0.1);
|
|
135
109
|
--dry-color-stroke-error: hsl(0, 50%, 70%);
|
|
136
110
|
--dry-color-stroke-error-strong: hsla(0, 70%, 50%, 0.8);
|
|
137
|
-
--dry-color-icon-error: var(--dry-color-stroke-error-strong);
|
|
138
111
|
--dry-color-on-error: #ffffff;
|
|
139
112
|
|
|
140
113
|
/* ─── Status: Warning (hue 40) ────────────────────────────────── */
|
|
141
114
|
--dry-color-text-warning: hsl(40, 80%, 30%);
|
|
142
|
-
--dry-color-fill-warning:
|
|
143
|
-
--dry-color-fill-warning-hover: hsl(40, 80%, 42%);
|
|
115
|
+
--dry-color-fill-warning: var(--dry-color-warning);
|
|
144
116
|
--dry-color-fill-warning-weak: hsla(40, 80%, 50%, 0.1);
|
|
145
117
|
--dry-color-stroke-warning: hsl(40, 60%, 65%);
|
|
146
118
|
--dry-color-stroke-warning-strong: hsla(40, 80%, 50%, 0.8);
|
|
147
|
-
--dry-color-icon-warning: var(--dry-color-stroke-warning-strong);
|
|
148
119
|
--dry-color-on-warning: hsl(40, 80%, 15%);
|
|
149
120
|
|
|
150
121
|
/* ─── Status: Success (hue 145) ───────────────────────────────── */
|
|
151
122
|
--dry-color-text-success: hsl(145, 60%, 30%);
|
|
152
|
-
--dry-color-fill-success:
|
|
153
|
-
--dry-color-fill-success-hover: hsl(145, 60%, 37%);
|
|
123
|
+
--dry-color-fill-success: var(--dry-color-success);
|
|
154
124
|
--dry-color-fill-success-weak: hsla(145, 60%, 45%, 0.1);
|
|
155
125
|
--dry-color-stroke-success: hsl(145, 50%, 65%);
|
|
156
126
|
--dry-color-stroke-success-strong: hsla(145, 60%, 45%, 0.8);
|
|
157
|
-
--dry-color-icon-success: var(--dry-color-stroke-success-strong);
|
|
158
127
|
--dry-color-on-success: #ffffff;
|
|
159
128
|
|
|
160
129
|
/* ─── Status: Info (hue 210) ──────────────────────────────────── */
|
|
161
130
|
--dry-color-text-info: hsl(210, 70%, 35%);
|
|
162
131
|
--dry-color-fill-info: hsl(210, 70%, 50%);
|
|
163
|
-
--dry-color-fill-info-hover: hsl(210, 70%, 42%);
|
|
164
132
|
--dry-color-fill-info-weak: hsla(210, 70%, 50%, 0.1);
|
|
165
133
|
--dry-color-stroke-info: hsl(210, 50%, 70%);
|
|
166
134
|
--dry-color-stroke-info-strong: hsla(210, 70%, 50%, 0.8);
|
|
167
|
-
--dry-color-icon-info: var(--dry-color-stroke-info-strong);
|
|
168
|
-
--dry-color-on-info: #ffffff;
|
|
169
135
|
|
|
170
136
|
/* ─── Accent tone (warm counterpoint to brand) ───────────────── */
|
|
171
|
-
--dry-color-accent: hsl(25, 90%, 58%);
|
|
172
|
-
--dry-color-text-accent: hsl(25, 80%, 38%);
|
|
173
137
|
--dry-color-fill-accent: hsl(25, 90%, 58%);
|
|
174
|
-
--dry-color-fill-accent-hover: hsl(25, 90%, 50%);
|
|
175
|
-
--dry-color-fill-accent-active: hsl(25, 90%, 44%);
|
|
176
138
|
--dry-color-fill-accent-weak: hsla(25, 90%, 58%, 0.08);
|
|
177
139
|
--dry-color-stroke-accent: hsla(25, 90%, 58%, 0.5);
|
|
178
140
|
--dry-color-stroke-accent-strong: hsla(25, 90%, 58%, 0.8);
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
--dry-color-
|
|
141
|
+
|
|
142
|
+
/* ─── Purple semantic palette (badge / tag purple variants) ───── */
|
|
143
|
+
--dry-color-text-purple: hsl(280, 60%, 38%);
|
|
144
|
+
--dry-color-fill-purple: hsl(280, 65%, 55%);
|
|
145
|
+
--dry-color-fill-purple-weak: hsla(280, 65%, 55%, 0.1);
|
|
146
|
+
--dry-color-stroke-purple: hsla(280, 65%, 55%, 0.5);
|
|
147
|
+
--dry-color-on-purple: #ffffff;
|
|
182
148
|
|
|
183
149
|
/* ─── Extended surface depth ──────────────────────────────────── */
|
|
184
|
-
--dry-color-bg-elevated: #eceef2;
|
|
185
150
|
--dry-color-bg-floating: #ffffff;
|
|
186
151
|
|
|
187
152
|
/* ─── Semantic shadows ────────────────────────────────────────── */
|
|
@@ -190,8 +155,6 @@ samp {
|
|
|
190
155
|
--dry-shadow-sunken: inset 0 1px 4px rgba(0, 0, 0, 0.08);
|
|
191
156
|
|
|
192
157
|
/* ─── Tinted shadows ──────────────────────────────────────────── */
|
|
193
|
-
--dry-shadow-brand: 0 4px 14px hsla(230, 64%, 57%, 0.2), 0 2px 6px hsla(230, 64%, 57%, 0.12);
|
|
194
|
-
--dry-shadow-accent: 0 4px 14px hsla(25, 90%, 58%, 0.2), 0 2px 6px hsla(25, 90%, 58%, 0.12);
|
|
195
158
|
|
|
196
159
|
/* ─── Overlay backdrops ───────────────────────────────────────── */
|
|
197
160
|
--dry-color-overlay-backdrop: hsla(0, 0%, 0%, 0.4);
|
|
@@ -216,20 +179,8 @@ samp {
|
|
|
216
179
|
--dry-space-12: 3rem;
|
|
217
180
|
--dry-space-14: 3.5rem;
|
|
218
181
|
--dry-space-16: 4rem;
|
|
219
|
-
--dry-space-20: 5rem;
|
|
220
|
-
--dry-space-24: 6rem;
|
|
221
|
-
--dry-space-32: 8rem;
|
|
222
|
-
--dry-space-40: 2.5rem;
|
|
223
|
-
--dry-space-56: 3.5rem;
|
|
224
|
-
--dry-space-64: 4rem;
|
|
225
|
-
--dry-space-80: 5rem;
|
|
226
|
-
--dry-space-96: 6rem;
|
|
227
|
-
--dry-space-128: 8rem;
|
|
228
|
-
--dry-space-192: 12rem;
|
|
229
|
-
--dry-space-256: 16rem;
|
|
230
182
|
|
|
231
183
|
/* ─── Radius ──────────────────────────────────────────────────── */
|
|
232
|
-
--dry-radius-none: 0;
|
|
233
184
|
--dry-radius-xs: 2px;
|
|
234
185
|
--dry-radius-sm: 4px;
|
|
235
186
|
--dry-radius-md: 8px;
|
|
@@ -248,7 +199,7 @@ samp {
|
|
|
248
199
|
--dry-radius-popover: var(--dry-radius-xl);
|
|
249
200
|
--dry-radius-sheet: var(--dry-radius-2xl);
|
|
250
201
|
--dry-radius-toast: var(--dry-radius-lg);
|
|
251
|
-
--dry-radius-tooltip: var(--dry-radius-md);
|
|
202
|
+
--dry-radius-tooltip: calc(var(--dry-radius-md) - var(--dry-radius-xs));
|
|
252
203
|
|
|
253
204
|
--dry-padding-card: var(--dry-space-8);
|
|
254
205
|
--dry-padding-dialog: var(--dry-space-6);
|
|
@@ -258,10 +209,6 @@ samp {
|
|
|
258
209
|
--dry-padding-tooltip: var(--dry-space-2);
|
|
259
210
|
--dry-padding-field: var(--dry-space-4);
|
|
260
211
|
|
|
261
|
-
--dry-radius-nested-card: max(
|
|
262
|
-
var(--dry-radius-sm),
|
|
263
|
-
calc(var(--dry-radius-card) - var(--dry-padding-card))
|
|
264
|
-
);
|
|
265
212
|
--dry-radius-nested-dialog: max(
|
|
266
213
|
var(--dry-radius-sm),
|
|
267
214
|
calc(var(--dry-radius-dialog) - var(--dry-padding-dialog))
|
|
@@ -270,10 +217,6 @@ samp {
|
|
|
270
217
|
var(--dry-radius-xs),
|
|
271
218
|
calc(var(--dry-radius-popover) - var(--dry-padding-popover))
|
|
272
219
|
);
|
|
273
|
-
--dry-radius-nested-sheet: max(
|
|
274
|
-
var(--dry-radius-sm),
|
|
275
|
-
calc(var(--dry-radius-sheet) - var(--dry-padding-sheet))
|
|
276
|
-
);
|
|
277
220
|
--dry-radius-nested-toast: max(
|
|
278
221
|
var(--dry-radius-xs),
|
|
279
222
|
calc(var(--dry-radius-toast) - var(--dry-padding-toast))
|
|
@@ -297,11 +240,7 @@ samp {
|
|
|
297
240
|
--dry-font-display: var(--dry-font-sans);
|
|
298
241
|
|
|
299
242
|
/* ─── Font weights ────────────────────────────────────────────── */
|
|
300
|
-
--dry-font-weight-light: 300;
|
|
301
|
-
--dry-font-weight-normal: 400;
|
|
302
243
|
--dry-font-weight-medium: 500;
|
|
303
|
-
--dry-font-weight-semibold: 600;
|
|
304
|
-
--dry-font-weight-bold: 700;
|
|
305
244
|
|
|
306
245
|
/* Practical UI-style named scale tokens */
|
|
307
246
|
--dry-type-display-size: 3.5rem;
|
|
@@ -319,7 +258,6 @@ samp {
|
|
|
319
258
|
--dry-type-tiny-size: 0.875rem;
|
|
320
259
|
--dry-type-tiny-leading: 1.25rem;
|
|
321
260
|
--dry-type-xs-size: 0.625rem;
|
|
322
|
-
--dry-type-2xs-size: 0.5625rem;
|
|
323
261
|
|
|
324
262
|
/* Semantic UI typography aliases derived from the Practical UI scale */
|
|
325
263
|
--dry-type-ui-caption-size: calc(var(--dry-type-tiny-size) * 0.8571428571);
|
|
@@ -327,7 +265,6 @@ samp {
|
|
|
327
265
|
--dry-type-ui-control-size: var(--dry-type-tiny-size);
|
|
328
266
|
--dry-type-ui-control-leading: var(--dry-type-tiny-leading);
|
|
329
267
|
--dry-type-ui-body-size: var(--dry-type-small-size);
|
|
330
|
-
--dry-type-ui-body-leading: var(--dry-type-small-leading);
|
|
331
268
|
--dry-type-ui-body-strong-size: calc(
|
|
332
269
|
(var(--dry-type-small-size) + var(--dry-type-heading-4-size)) / 2
|
|
333
270
|
);
|
|
@@ -356,10 +293,8 @@ samp {
|
|
|
356
293
|
/* Legacy text ladder kept as a compatibility bridge onto the named scale */
|
|
357
294
|
--dry-text-xs-size: var(--dry-type-ui-caption-size);
|
|
358
295
|
--dry-text-xs-leading: var(--dry-type-ui-caption-leading);
|
|
359
|
-
--dry-text-xs-tracking: 0.02em;
|
|
360
296
|
--dry-text-sm-size: var(--dry-type-ui-control-size);
|
|
361
297
|
--dry-text-sm-leading: var(--dry-type-ui-control-leading);
|
|
362
|
-
--dry-text-sm-tracking: 0.01em;
|
|
363
298
|
--dry-text-base-size: var(--dry-type-ui-body-strong-size);
|
|
364
299
|
--dry-text-base-leading: var(--dry-type-ui-body-strong-leading);
|
|
365
300
|
--dry-text-lg-size: var(--dry-type-ui-title-size);
|
|
@@ -367,12 +302,8 @@ samp {
|
|
|
367
302
|
--dry-text-xl-size: var(--dry-type-ui-title-strong-size);
|
|
368
303
|
--dry-text-xl-leading: var(--dry-type-ui-title-strong-leading);
|
|
369
304
|
--dry-text-2xl-size: var(--dry-type-ui-section-size);
|
|
370
|
-
--dry-text-2xl-leading: var(--dry-type-ui-section-leading);
|
|
371
|
-
--dry-text-2xl-tracking: -0.01em;
|
|
372
305
|
--dry-text-3xl-size: var(--dry-type-ui-section-strong-size);
|
|
373
|
-
--dry-text-3xl-leading: var(--dry-type-ui-section-strong-leading);
|
|
374
306
|
--dry-text-4xl-size: var(--dry-type-ui-display-size);
|
|
375
|
-
--dry-text-4xl-leading: var(--dry-type-ui-display-leading);
|
|
376
307
|
|
|
377
308
|
/* ─── State ───────────────────────────────────────────────────────
|
|
378
309
|
Shared shorthands for focus / disabled state. Consumers can
|
|
@@ -386,7 +317,7 @@ samp {
|
|
|
386
317
|
|
|
387
318
|
/* ─── Form control shared tokens ──────────────────────────────────
|
|
388
319
|
Consumed by input, textarea, combobox-input, and color-picker-input.
|
|
389
|
-
Per-component `--dry-<name>-*` overrides still work
|
|
320
|
+
Per-component `--dry-<name>-*` overrides still work; they now
|
|
390
321
|
resolve through this shared family by default, so consumers can
|
|
391
322
|
restyle all form controls with one change at :root.
|
|
392
323
|
Intentionally excluded (pre-existing divergence):
|
|
@@ -448,15 +379,6 @@ samp {
|
|
|
448
379
|
--dry-enter-stagger-letter: 40ms;
|
|
449
380
|
--dry-enter-stagger-max: 16;
|
|
450
381
|
|
|
451
|
-
/* ─── Exit motion ──────────────────────────────────────────────
|
|
452
|
-
Subtle dismissal — small fixed offset, not full container
|
|
453
|
-
travel. Consumed by the `leave` Svelte transition and any
|
|
454
|
-
overlay primitive using `out:leave`. */
|
|
455
|
-
--dry-exit-translate: 12px;
|
|
456
|
-
--dry-exit-blur: 4px;
|
|
457
|
-
--dry-exit-duration: var(--dry-duration-slow);
|
|
458
|
-
--dry-exit-ease: var(--dry-ease-out);
|
|
459
|
-
|
|
460
382
|
/* ─── Icon swap ────────────────────────────────────────────────
|
|
461
383
|
Motion for `<IconSwap>` when one icon replaces another
|
|
462
384
|
(copy ↔ check, play ↔ pause). Uses the same retarget-friendly
|
|
@@ -480,63 +402,20 @@ samp {
|
|
|
480
402
|
|
|
481
403
|
/* ─── Glass surface ───────────────────────────────────────────── */
|
|
482
404
|
--dry-glass-blur: 12px;
|
|
483
|
-
--dry-glass-tint: var(--dry-color-bg-raised);
|
|
484
|
-
--dry-glass-
|
|
405
|
+
--dry-color-glass-tint: var(--dry-color-bg-raised);
|
|
406
|
+
--dry-glass-tint: var(--dry-color-glass-tint);
|
|
485
407
|
--dry-glass-saturation: 180%;
|
|
486
|
-
--dry-glass-border: hsla(0, 0%, 100%, 0.08);
|
|
487
|
-
--dry-glass-border-strong: hsla(0, 0%, 100%, 0.15);
|
|
488
408
|
|
|
489
409
|
/* ─── Glow ────────────────────────────────────────────────────── */
|
|
490
410
|
--dry-glow-color: var(--dry-color-fill-brand);
|
|
491
|
-
--dry-glow-blur: 24px;
|
|
492
|
-
--dry-glow-spread: 48px;
|
|
493
|
-
--dry-glow-ring: 0 0 0 1px var(--dry-color-fill-brand), 0 0 12px 2px hsla(230, 64%, 57%, 0.25);
|
|
494
|
-
--dry-glow-ring-accent:
|
|
495
|
-
0 0 0 1px var(--dry-color-fill-accent), 0 0 12px 2px hsla(25, 90%, 58%, 0.25);
|
|
496
|
-
--dry-glow-ambient: hsla(230, 64%, 57%, 0.06);
|
|
497
|
-
--dry-glow-ambient-accent: hsla(25, 90%, 58%, 0.06);
|
|
498
411
|
|
|
499
412
|
/* ─── Gradient palette ────────────────────────────────────────── */
|
|
500
|
-
--dry-gradient-warm: linear-gradient(
|
|
501
|
-
135deg,
|
|
502
|
-
hsl(25, 90%, 65%) 0%,
|
|
503
|
-
hsl(350, 70%, 60%) 50%,
|
|
504
|
-
hsl(280, 60%, 55%) 100%
|
|
505
|
-
);
|
|
506
|
-
--dry-gradient-cool: linear-gradient(
|
|
507
|
-
135deg,
|
|
508
|
-
hsl(210, 80%, 60%) 0%,
|
|
509
|
-
hsl(250, 70%, 55%) 50%,
|
|
510
|
-
hsl(280, 50%, 50%) 100%
|
|
511
|
-
);
|
|
512
|
-
--dry-gradient-sunset: linear-gradient(
|
|
513
|
-
135deg,
|
|
514
|
-
hsl(40, 95%, 60%) 0%,
|
|
515
|
-
hsl(15, 90%, 58%) 40%,
|
|
516
|
-
hsl(340, 75%, 55%) 100%
|
|
517
|
-
);
|
|
518
|
-
--dry-gradient-ocean: linear-gradient(
|
|
519
|
-
135deg,
|
|
520
|
-
hsl(195, 80%, 50%) 0%,
|
|
521
|
-
hsl(220, 85%, 55%) 50%,
|
|
522
|
-
hsl(250, 70%, 60%) 100%
|
|
523
|
-
);
|
|
524
|
-
--dry-gradient-surface: linear-gradient(
|
|
525
|
-
180deg,
|
|
526
|
-
var(--dry-color-bg-base) 0%,
|
|
527
|
-
var(--dry-color-bg-raised) 100%
|
|
528
|
-
);
|
|
529
413
|
|
|
530
414
|
/* ─── Grain / noise texture ───────────────────────────────────── */
|
|
531
415
|
--dry-grain-opacity: 0.04;
|
|
532
|
-
--dry-grain-size: 0.65;
|
|
533
|
-
--dry-grain-blend: overlay;
|
|
534
416
|
|
|
535
417
|
/* ─── Typography extras ───────────────────────────────────────── */
|
|
536
|
-
--dry-tracking-tight: -0.025em;
|
|
537
418
|
--dry-tracking-normal: 0;
|
|
538
|
-
--dry-tracking-wide: 0.05em;
|
|
539
|
-
--dry-tracking-wider: 0.1em;
|
|
540
419
|
|
|
541
420
|
/* ─── Utility shadows — three-layer shadow-as-border recipe ──────
|
|
542
421
|
Edge + close contact + ambient, so a raised surface reads as
|
|
@@ -555,12 +434,6 @@ samp {
|
|
|
555
434
|
--dry-shadow-xl:
|
|
556
435
|
0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 8px 16px -4px rgba(0, 0, 0, 0.1),
|
|
557
436
|
0px 20px 40px -8px rgba(0, 0, 0, 0.08);
|
|
558
|
-
--dry-shadow-sm-hover:
|
|
559
|
-
0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px -1px rgba(0, 0, 0, 0.08),
|
|
560
|
-
0px 2px 4px 0px rgba(0, 0, 0, 0.06);
|
|
561
|
-
--dry-shadow-md-hover:
|
|
562
|
-
0px 0px 0px 1px rgba(0, 0, 0, 0.09), 0px 2px 4px -1px rgba(0, 0, 0, 0.1),
|
|
563
|
-
0px 4px 8px -2px rgba(0, 0, 0, 0.06);
|
|
564
437
|
|
|
565
438
|
/* ─── Layers ──────────────────────────────────────────────────── */
|
|
566
439
|
--dry-layer-overlay: 50;
|
|
@@ -630,9 +503,6 @@ samp {
|
|
|
630
503
|
--dry-enter-stagger-section: 0ms;
|
|
631
504
|
--dry-enter-stagger-word: 0ms;
|
|
632
505
|
--dry-enter-stagger-letter: 0ms;
|
|
633
|
-
--dry-exit-translate: 0px;
|
|
634
|
-
--dry-exit-blur: 0px;
|
|
635
|
-
--dry-exit-duration: 1ms;
|
|
636
506
|
--dry-icon-swap-duration: 0ms;
|
|
637
507
|
--dry-icon-swap-scale-out: 1;
|
|
638
508
|
--dry-icon-swap-blur-out: 0px;
|
package/dist/themes/midnight.css
CHANGED
|
@@ -12,48 +12,78 @@
|
|
|
12
12
|
|
|
13
13
|
[data-theme='midnight'],
|
|
14
14
|
.theme-midnight {
|
|
15
|
+
/* ─── Public aliases (midnight) ───────────────────────────────── */
|
|
16
|
+
--dry-color-primary: hsl(250, 70%, 75%);
|
|
17
|
+
--dry-color-primary-hover: hsl(250, 70%, 67%);
|
|
18
|
+
--dry-color-text: hsla(240, 20%, 98%, 1);
|
|
19
|
+
--dry-color-text-secondary: hsla(240, 15%, 90%, 0.7);
|
|
20
|
+
--dry-color-muted: hsla(240, 15%, 80%, 0.1);
|
|
21
|
+
--dry-color-warning: hsl(38, 75%, 55%);
|
|
22
|
+
--dry-color-success: hsl(150, 55%, 50%);
|
|
23
|
+
--dry-color-danger: hsl(355, 70%, 60%);
|
|
24
|
+
--dry-color-border: hsla(240, 15%, 80%, 0.1);
|
|
25
|
+
--dry-color-border-hover: hsla(240, 15%, 85%, 0.5);
|
|
26
|
+
|
|
15
27
|
/* ─── Brand — soft lavender ───────────────────────────────────── */
|
|
16
|
-
--dry-color-brand: hsl(250, 70%, 75%);
|
|
17
|
-
--dry-color-text-brand: hsl(250, 70%, 75%);
|
|
18
|
-
--dry-color-fill-brand: hsl(250, 70%, 75%);
|
|
19
|
-
--dry-color-fill-brand-hover: hsl(250, 70%, 67%);
|
|
20
28
|
--dry-color-fill-brand-active: hsl(250, 70%, 62%);
|
|
21
29
|
--dry-color-fill-brand-weak: hsla(250, 70%, 75%, 0.08);
|
|
22
30
|
--dry-color-stroke-brand: hsla(250, 70%, 75%, 0.45);
|
|
23
31
|
--dry-color-stroke-brand-strong: hsla(250, 70%, 75%, 0.75);
|
|
24
|
-
--dry-color-stroke-brand-weak: hsla(250, 70%, 75%, 0.18);
|
|
25
32
|
--dry-color-on-brand: hsl(250, 30%, 8%);
|
|
26
33
|
--dry-color-focus-ring: hsla(250, 70%, 75%, 0.35);
|
|
27
34
|
|
|
28
35
|
/* ─── Accent — soft rose (the avatar ring glow) ───────────────── */
|
|
29
|
-
--dry-color-accent: hsl(350, 60%, 70%);
|
|
30
|
-
--dry-color-text-accent: hsl(350, 60%, 70%);
|
|
31
36
|
--dry-color-fill-accent: hsl(350, 60%, 70%);
|
|
32
|
-
--dry-color-fill-accent-hover: hsl(350, 60%, 62%);
|
|
33
|
-
--dry-color-fill-accent-active: hsl(350, 60%, 56%);
|
|
34
37
|
--dry-color-fill-accent-weak: hsla(350, 60%, 70%, 0.08);
|
|
35
38
|
--dry-color-stroke-accent: hsla(350, 60%, 70%, 0.45);
|
|
36
39
|
--dry-color-stroke-accent-strong: hsla(350, 60%, 70%, 0.75);
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
--dry-color-
|
|
40
|
+
|
|
41
|
+
/* ─── Status: Error ───────────────────────────────────────────── */
|
|
42
|
+
--dry-color-text-error: hsl(355, 70%, 72%);
|
|
43
|
+
--dry-color-fill-error-hover: hsl(355, 70%, 52%);
|
|
44
|
+
--dry-color-fill-error-weak: hsla(355, 70%, 60%, 0.12);
|
|
45
|
+
--dry-color-stroke-error: hsl(355, 50%, 55%);
|
|
46
|
+
--dry-color-stroke-error-strong: hsla(355, 70%, 60%, 0.8);
|
|
47
|
+
--dry-color-on-error: hsl(355, 30%, 8%);
|
|
48
|
+
|
|
49
|
+
/* ─── Status: Warning ─────────────────────────────────────────── */
|
|
50
|
+
--dry-color-text-warning: hsl(38, 80%, 68%);
|
|
51
|
+
--dry-color-fill-warning-weak: hsla(38, 75%, 55%, 0.12);
|
|
52
|
+
--dry-color-stroke-warning: hsl(38, 55%, 55%);
|
|
53
|
+
--dry-color-stroke-warning-strong: hsla(38, 75%, 55%, 0.8);
|
|
54
|
+
--dry-color-on-warning: hsl(38, 30%, 10%);
|
|
55
|
+
|
|
56
|
+
/* ─── Status: Success ─────────────────────────────────────────── */
|
|
57
|
+
--dry-color-text-success: hsl(150, 55%, 68%);
|
|
58
|
+
--dry-color-fill-success-weak: hsla(150, 55%, 50%, 0.12);
|
|
59
|
+
--dry-color-stroke-success: hsl(150, 45%, 55%);
|
|
60
|
+
--dry-color-stroke-success-strong: hsla(150, 55%, 50%, 0.8);
|
|
61
|
+
--dry-color-on-success: hsl(150, 30%, 8%);
|
|
62
|
+
|
|
63
|
+
/* ─── Status: Info ────────────────────────────────────────────── */
|
|
64
|
+
--dry-color-text-info: hsl(215, 70%, 72%);
|
|
65
|
+
--dry-color-fill-info: hsl(215, 65%, 60%);
|
|
66
|
+
--dry-color-fill-info-weak: hsla(215, 65%, 60%, 0.12);
|
|
67
|
+
--dry-color-stroke-info: hsl(215, 45%, 55%);
|
|
68
|
+
--dry-color-stroke-info-strong: hsla(215, 65%, 60%, 0.8);
|
|
69
|
+
|
|
70
|
+
/* ─── Purple semantic palette (badge / tag purple variants) ───── */
|
|
71
|
+
--dry-color-text-purple: hsl(285, 70%, 78%);
|
|
72
|
+
--dry-color-fill-purple: hsl(285, 70%, 70%);
|
|
73
|
+
--dry-color-fill-purple-weak: hsla(285, 70%, 70%, 0.12);
|
|
74
|
+
--dry-color-stroke-purple: hsla(285, 70%, 70%, 0.5);
|
|
75
|
+
--dry-color-on-purple: hsl(285, 30%, 8%);
|
|
40
76
|
|
|
41
77
|
/* ─── Backgrounds — deep layered dark ─────────────────────────── */
|
|
42
78
|
--dry-color-bg-base: hsl(240, 20%, 6%);
|
|
43
79
|
--dry-color-bg-raised: hsl(240, 15%, 10%);
|
|
44
80
|
--dry-color-bg-overlay: hsl(240, 12%, 14%);
|
|
45
|
-
--dry-color-bg-elevated: hsl(240, 10%, 18%);
|
|
46
81
|
--dry-color-bg-floating: hsl(240, 8%, 22%);
|
|
47
82
|
--dry-color-bg-sunken: hsl(240, 22%, 4%);
|
|
48
|
-
--dry-color-bg-brand: var(--dry-color-fill-brand);
|
|
49
83
|
--dry-color-bg-inverse: hsl(240, 10%, 95%);
|
|
50
84
|
|
|
51
85
|
/* ─── Neutrals — cool silver white ────────────────────────────── */
|
|
52
|
-
--dry-color-text-strong: hsla(240, 20%, 98%, 1);
|
|
53
|
-
--dry-color-text-weak: hsla(240, 15%, 90%, 0.7);
|
|
54
86
|
--dry-color-icon: hsla(240, 15%, 88%, 0.78);
|
|
55
|
-
--dry-color-stroke-strong: hsla(240, 15%, 85%, 0.5);
|
|
56
|
-
--dry-color-stroke-weak: hsla(240, 15%, 80%, 0.1);
|
|
57
87
|
--dry-color-fill: hsla(240, 15%, 85%, 0.05);
|
|
58
88
|
--dry-color-fill-hover: hsla(240, 15%, 85%, 0.08);
|
|
59
89
|
--dry-color-fill-active: hsla(240, 15%, 85%, 0.13);
|
|
@@ -62,8 +92,6 @@
|
|
|
62
92
|
--dry-shadow-raised: 0 1px 4px hsla(240, 40%, 3%, 0.5), 0 1px 2px hsla(240, 40%, 3%, 0.4);
|
|
63
93
|
--dry-shadow-overlay: 0 8px 32px hsla(240, 40%, 3%, 0.6), 0 2px 8px hsla(240, 40%, 3%, 0.45);
|
|
64
94
|
--dry-shadow-sunken: inset 0 1px 4px hsla(240, 40%, 3%, 0.4);
|
|
65
|
-
--dry-shadow-brand: 0 4px 20px hsla(250, 70%, 75%, 0.12), 0 2px 8px hsla(250, 70%, 75%, 0.08);
|
|
66
|
-
--dry-shadow-accent: 0 4px 20px hsla(350, 60%, 70%, 0.12), 0 2px 8px hsla(350, 60%, 70%, 0.08);
|
|
67
95
|
|
|
68
96
|
/* ─── Utility shadows — dark edge + deep ink layers ─────────────── */
|
|
69
97
|
--dry-shadow-sm:
|
|
@@ -78,60 +106,20 @@
|
|
|
78
106
|
--dry-shadow-xl:
|
|
79
107
|
0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 8px 16px -4px hsla(240, 40%, 3%, 0.6),
|
|
80
108
|
0px 20px 40px -8px hsla(240, 40%, 3%, 0.55);
|
|
81
|
-
--dry-shadow-sm-hover:
|
|
82
|
-
0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 1px 2px -1px hsla(240, 40%, 3%, 0.55),
|
|
83
|
-
0px 2px 4px 0px hsla(240, 40%, 3%, 0.45);
|
|
84
|
-
--dry-shadow-md-hover:
|
|
85
|
-
0px 0px 0px 1px rgba(255, 255, 255, 0.1), 0px 2px 4px -1px hsla(240, 40%, 3%, 0.6),
|
|
86
|
-
0px 4px 8px -2px hsla(240, 40%, 3%, 0.45);
|
|
87
109
|
|
|
88
110
|
/* ─── Glass — the hero feature of this theme ──────────────────── */
|
|
89
111
|
--dry-glass-blur: 16px;
|
|
90
|
-
--dry-glass-tint: hsla(240, 15%, 10%, 0.65);
|
|
91
|
-
--dry-glass-
|
|
112
|
+
--dry-color-glass-tint: hsla(240, 15%, 10%, 0.65);
|
|
113
|
+
--dry-glass-tint: var(--dry-color-glass-tint);
|
|
92
114
|
--dry-glass-saturation: 150%;
|
|
93
|
-
--dry-glass-border: hsla(240, 20%, 90%, 0.06);
|
|
94
|
-
--dry-glass-border-strong: hsla(240, 20%, 90%, 0.12);
|
|
95
115
|
|
|
96
116
|
/* ─── Glow — ethereal halos ───────────────────────────────────── */
|
|
97
117
|
--dry-glow-color: var(--dry-color-fill-brand);
|
|
98
|
-
--dry-glow-blur: 32px;
|
|
99
|
-
--dry-glow-spread: 64px;
|
|
100
|
-
--dry-glow-ring: 0 0 0 1px hsla(250, 70%, 75%, 0.2), 0 0 20px 4px hsla(250, 70%, 75%, 0.1);
|
|
101
|
-
--dry-glow-ring-accent: 0 0 0 1px hsla(350, 60%, 70%, 0.2), 0 0 20px 4px hsla(350, 60%, 70%, 0.1);
|
|
102
|
-
--dry-glow-ambient: hsla(250, 70%, 75%, 0.03);
|
|
103
|
-
--dry-glow-ambient-accent: hsla(350, 60%, 70%, 0.03);
|
|
104
118
|
|
|
105
119
|
/* ─── Gradient palette — cool ethereal ────────────────────────── */
|
|
106
|
-
--dry-gradient-warm: linear-gradient(
|
|
107
|
-
135deg,
|
|
108
|
-
hsl(350, 55%, 65%) 0%,
|
|
109
|
-
hsl(280, 50%, 60%) 50%,
|
|
110
|
-
hsl(250, 60%, 65%) 100%
|
|
111
|
-
);
|
|
112
|
-
--dry-gradient-cool: linear-gradient(
|
|
113
|
-
135deg,
|
|
114
|
-
hsl(220, 70%, 65%) 0%,
|
|
115
|
-
hsl(260, 60%, 60%) 50%,
|
|
116
|
-
hsl(290, 40%, 58%) 100%
|
|
117
|
-
);
|
|
118
|
-
--dry-gradient-sunset: linear-gradient(
|
|
119
|
-
135deg,
|
|
120
|
-
hsl(350, 65%, 68%) 0%,
|
|
121
|
-
hsl(310, 50%, 58%) 40%,
|
|
122
|
-
hsl(260, 55%, 55%) 100%
|
|
123
|
-
);
|
|
124
|
-
--dry-gradient-ocean: linear-gradient(
|
|
125
|
-
135deg,
|
|
126
|
-
hsl(210, 65%, 60%) 0%,
|
|
127
|
-
hsl(240, 60%, 58%) 50%,
|
|
128
|
-
hsl(270, 50%, 55%) 100%
|
|
129
|
-
);
|
|
130
|
-
--dry-gradient-surface: linear-gradient(180deg, hsl(240, 20%, 6%) 0%, hsl(240, 15%, 10%) 100%);
|
|
131
120
|
|
|
132
121
|
/* ─── Grain — subtle texture ──────────────────────────────────── */
|
|
133
122
|
--dry-grain-opacity: 0.05;
|
|
134
|
-
--dry-grain-blend: soft-light;
|
|
135
123
|
|
|
136
124
|
/* ─── Motion — slightly slower, dreamier ──────────────────────── */
|
|
137
125
|
--dry-duration-normal: 260ms;
|
|
@@ -156,7 +144,4 @@
|
|
|
156
144
|
--dry-toggle-selected-bg: hsl(350, 60%, 70%);
|
|
157
145
|
--dry-toggle-selected-stroke: hsl(350, 60%, 70%);
|
|
158
146
|
--dry-toggle-thumb-bg: hsl(240, 20%, 8%);
|
|
159
|
-
--dry-toggle-hover-bg: hsla(240, 15%, 85%, 0.08);
|
|
160
|
-
--dry-toggle-press-bg: hsla(240, 15%, 85%, 0.12);
|
|
161
|
-
--dry-toggle-focus-ring: hsl(350, 60%, 70%);
|
|
162
147
|
}
|