@tenerife.music/ui 1.0.8 → 1.0.13
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/README.md +12 -8
- package/dist/{tokens/colors.d.ts → colors-CVA7_16U.d.cts} +21 -19
- package/dist/colors-CVA7_16U.d.ts +289 -0
- package/dist/index-BgXvioll.d.cts +6845 -0
- package/dist/index-Bv4wWj9I.d.ts +6845 -0
- package/dist/index.cjs +16385 -2
- package/dist/index.d.cts +4020 -0
- package/dist/index.d.ts +4020 -39
- package/dist/index.mjs +14502 -6425
- package/dist/preset.cjs +1264 -2
- package/dist/preset.d.cts +21 -0
- package/dist/preset.d.ts +3 -1
- package/dist/preset.mjs +1165 -95
- package/dist/styles.cjs +2 -2
- package/dist/styles.css +87 -1
- package/dist/styles.d.cts +2 -0
- package/dist/styles.d.ts +2 -0
- package/dist/styles.mjs +1 -1
- package/dist/theme/index.cjs +2634 -2
- package/dist/theme/index.d.cts +453 -0
- package/dist/theme/index.d.ts +453 -8
- package/dist/theme/index.mjs +1601 -576
- package/dist/tokens/index.cjs +6203 -5
- package/dist/tokens/index.d.cts +2 -0
- package/dist/tokens/index.d.ts +2 -9
- package/dist/tokens/index.mjs +2601 -155
- package/package.json +10 -9
- package/dist/animation/index.d.ts +0 -8
- package/dist/animation/presets.d.ts +0 -301
- package/dist/animation/tas.d.ts +0 -24
- package/dist/animation/types.d.ts +0 -67
- package/dist/animation/useInView.d.ts +0 -36
- package/dist/animation/utils.d.ts +0 -6
- package/dist/brand-C5R2semX.js +0 -45
- package/dist/brand-DQb18Frh.cjs +0 -2
- package/dist/components/SectionBuilder.d.ts +0 -36
- package/dist/components/SectionBuilder.presets.d.ts +0 -228
- package/dist/components/SectionBuilder.types.d.ts +0 -326
- package/dist/components/admin/Dashboard.d.ts +0 -8
- package/dist/components/admin/UserManagement.d.ts +0 -8
- package/dist/components/auth/LoginForm.d.ts +0 -11
- package/dist/components/auth/ProfileCard.d.ts +0 -9
- package/dist/components/auth/RegisterForm.d.ts +0 -13
- package/dist/components/cards/ArtistCard/ArtistCard.d.ts +0 -22
- package/dist/components/cards/ArtistCard/ArtistCard.types.d.ts +0 -46
- package/dist/components/cards/ArtistCard/ArtistCard.variants.d.ts +0 -83
- package/dist/components/cards/ArtistCard/index.d.ts +0 -8
- package/dist/components/cards/CardBase/CardBase.d.ts +0 -45
- package/dist/components/cards/CardBase/CardBase.types.d.ts +0 -70
- package/dist/components/cards/CardBase/CardBase.variants.d.ts +0 -38
- package/dist/components/cards/CardBase/index.d.ts +0 -8
- package/dist/components/cards/CategoryCard/CategoryCard.d.ts +0 -18
- package/dist/components/cards/CategoryCard/CategoryCard.types.d.ts +0 -38
- package/dist/components/cards/CategoryCard/CategoryCard.variants.d.ts +0 -21
- package/dist/components/cards/CategoryCard/index.d.ts +0 -7
- package/dist/components/cards/EventCard/EventCard.d.ts +0 -19
- package/dist/components/cards/EventCard/EventCard.types.d.ts +0 -47
- package/dist/components/cards/EventCard/EventCard.variants.d.ts +0 -70
- package/dist/components/cards/EventCard/index.d.ts +0 -7
- package/dist/components/cards/PromoCard/PromoCard.d.ts +0 -20
- package/dist/components/cards/PromoCard/PromoCard.types.d.ts +0 -42
- package/dist/components/cards/PromoCard/PromoCard.variants.d.ts +0 -35
- package/dist/components/cards/PromoCard/index.d.ts +0 -7
- package/dist/components/cards/TicketCard/TicketCard.d.ts +0 -19
- package/dist/components/cards/TicketCard/TicketCard.types.d.ts +0 -55
- package/dist/components/cards/TicketCard/TicketCard.variants.d.ts +0 -71
- package/dist/components/cards/TicketCard/index.d.ts +0 -7
- package/dist/components/cards/VenueCard/VenueCard.d.ts +0 -21
- package/dist/components/cards/VenueCard/VenueCard.types.d.ts +0 -46
- package/dist/components/cards/VenueCard/VenueCard.variants.d.ts +0 -60
- package/dist/components/cards/VenueCard/index.d.ts +0 -8
- package/dist/components/cards/index.d.ts +0 -19
- package/dist/components/checkbox/Checkbox.d.ts +0 -22
- package/dist/components/checkbox/Checkbox.types.d.ts +0 -68
- package/dist/components/checkbox/checkbox-variants.d.ts +0 -13
- package/dist/components/checkbox/index.d.ts +0 -3
- package/dist/components/containers/Card.d.ts +0 -75
- package/dist/components/containers/Section.d.ts +0 -31
- package/dist/components/containers/Surface.d.ts +0 -28
- package/dist/components/containers/index.d.ts +0 -9
- package/dist/components/controls/LanguageSelector.d.ts +0 -17
- package/dist/components/data/List.d.ts +0 -12
- package/dist/components/data/Table.d.ts +0 -14
- package/dist/components/data/Timeline.d.ts +0 -13
- package/dist/components/data/data-list/DataList.d.ts +0 -29
- package/dist/components/data/data-list/DataList.types.d.ts +0 -43
- package/dist/components/data/data-list/DataListItem.d.ts +0 -20
- package/dist/components/data/data-list/DataListLabel.d.ts +0 -19
- package/dist/components/data/data-list/DataListValue.d.ts +0 -18
- package/dist/components/data/data-list/index.d.ts +0 -10
- package/dist/components/data/empty-state/EmptyState.d.ts +0 -31
- package/dist/components/data/empty-state/EmptyState.types.d.ts +0 -51
- package/dist/components/data/empty-state/EmptyStateAction.d.ts +0 -17
- package/dist/components/data/empty-state/EmptyStateDescription.d.ts +0 -17
- package/dist/components/data/empty-state/EmptyStateIcon.d.ts +0 -22
- package/dist/components/data/empty-state/EmptyStateTitle.d.ts +0 -17
- package/dist/components/data/empty-state/index.d.ts +0 -10
- package/dist/components/data/index.d.ts +0 -9
- package/dist/components/data/skeleton/Skeleton.d.ts +0 -24
- package/dist/components/data/skeleton/Skeleton.types.d.ts +0 -12
- package/dist/components/data/skeleton/index.d.ts +0 -6
- package/dist/components/data/table/Table.d.ts +0 -33
- package/dist/components/data/table/Table.types.d.ts +0 -264
- package/dist/components/data/table/TableBody.d.ts +0 -13
- package/dist/components/data/table/TableCell.d.ts +0 -13
- package/dist/components/data/table/TableEmpty.d.ts +0 -13
- package/dist/components/data/table/TableExpandableContent.d.ts +0 -14
- package/dist/components/data/table/TableHead.d.ts +0 -13
- package/dist/components/data/table/TableHeader.d.ts +0 -13
- package/dist/components/data/table/TableLoadingState.d.ts +0 -13
- package/dist/components/data/table/TableRow.d.ts +0 -13
- package/dist/components/data/table/TableSortIcon.d.ts +0 -14
- package/dist/components/data/table/index.d.ts +0 -17
- package/dist/components/drawer/Drawer.d.ts +0 -41
- package/dist/components/drawer/Drawer.types.d.ts +0 -75
- package/dist/components/drawer/drawer-variants.d.ts +0 -17
- package/dist/components/drawer/index.d.ts +0 -8
- package/dist/components/dropdown/Dropdown.d.ts +0 -38
- package/dist/components/dropdown/Dropdown.types.d.ts +0 -82
- package/dist/components/dropdown/dropdown-variants.d.ts +0 -33
- package/dist/components/feedback/ConsentBanner.d.ts +0 -8
- package/dist/components/feedback/Progress.d.ts +0 -8
- package/dist/components/feedback/Skeleton.d.ts +0 -6
- package/dist/components/filters/DateRangePicker.d.ts +0 -21
- package/dist/components/filters/FilterBar.d.ts +0 -55
- package/dist/components/filters/FilterSelect.d.ts +0 -23
- package/dist/components/filters/PriceRangeSlider.d.ts +0 -27
- package/dist/components/filters/SearchFilters.d.ts +0 -32
- package/dist/components/filters/SearchInput.d.ts +0 -16
- package/dist/components/filters/types.d.ts +0 -48
- package/dist/components/icon/Icon.d.ts +0 -32
- package/dist/components/icon/Icon.types.d.ts +0 -7
- package/dist/components/icon/index.d.ts +0 -4
- package/dist/components/icons/TrendingIcon.d.ts +0 -6
- package/dist/components/image/Image.d.ts +0 -48
- package/dist/components/input/Input.d.ts +0 -20
- package/dist/components/input/Input.types.d.ts +0 -38
- package/dist/components/input/index.d.ts +0 -3
- package/dist/components/input/input-variants.d.ts +0 -14
- package/dist/components/input/legacy/input.d.ts +0 -11
- package/dist/components/layout/Box.d.ts +0 -111
- package/dist/components/layout/Column.d.ts +0 -6
- package/dist/components/layout/Container.d.ts +0 -31
- package/dist/components/layout/Flex.d.ts +0 -50
- package/dist/components/layout/Footer.d.ts +0 -9
- package/dist/components/layout/Grid.d.ts +0 -60
- package/dist/components/layout/ModeHero.d.ts +0 -10
- package/dist/components/layout/Navbar.d.ts +0 -9
- package/dist/components/layout/Row.d.ts +0 -28
- package/dist/components/layout/Section.d.ts +0 -10
- package/dist/components/layout/Stack.d.ts +0 -38
- package/dist/components/layout/Surface.d.ts +0 -21
- package/dist/components/layout/index.d.ts +0 -22
- package/dist/components/layout/layout.types.d.ts +0 -107
- package/dist/components/menus/DropdownMenu.d.ts +0 -27
- package/dist/components/menus/NavigationMenu.d.ts +0 -12
- package/dist/components/menus/Tabs.d.ts +0 -7
- package/dist/components/menus/context-menu/ContextMenuContent.d.ts +0 -22
- package/dist/components/menus/context-menu/ContextMenuGroup.d.ts +0 -14
- package/dist/components/menus/context-menu/ContextMenuItem.d.ts +0 -14
- package/dist/components/menus/context-menu/ContextMenuLabel.d.ts +0 -14
- package/dist/components/menus/context-menu/ContextMenuRoot.d.ts +0 -47
- package/dist/components/menus/context-menu/ContextMenuSeparator.d.ts +0 -14
- package/dist/components/menus/context-menu/ContextMenuTrigger.d.ts +0 -16
- package/dist/components/menus/context-menu/index.d.ts +0 -12
- package/dist/components/menus/dropdown/DropdownMenuCheckItem.d.ts +0 -18
- package/dist/components/menus/dropdown/DropdownMenuContent.d.ts +0 -15
- package/dist/components/menus/dropdown/DropdownMenuGroup.d.ts +0 -12
- package/dist/components/menus/dropdown/DropdownMenuItem.d.ts +0 -30
- package/dist/components/menus/dropdown/DropdownMenuLabel.d.ts +0 -17
- package/dist/components/menus/dropdown/DropdownMenuRadioGroup.d.ts +0 -24
- package/dist/components/menus/dropdown/DropdownMenuRadioItem.d.ts +0 -18
- package/dist/components/menus/dropdown/DropdownMenuRoot.d.ts +0 -33
- package/dist/components/menus/dropdown/DropdownMenuSeparator.d.ts +0 -13
- package/dist/components/menus/dropdown/DropdownMenuSub.d.ts +0 -10
- package/dist/components/menus/dropdown/DropdownMenuSubContent.d.ts +0 -13
- package/dist/components/menus/dropdown/DropdownMenuSubTrigger.d.ts +0 -13
- package/dist/components/menus/dropdown/DropdownMenuTrigger.d.ts +0 -14
- package/dist/components/menus/dropdown/index.d.ts +0 -18
- package/dist/components/menus/hover-card/HoverCardContent.d.ts +0 -14
- package/dist/components/menus/hover-card/HoverCardRoot.d.ts +0 -20
- package/dist/components/menus/hover-card/HoverCardTrigger.d.ts +0 -13
- package/dist/components/menus/hover-card/index.d.ts +0 -8
- package/dist/components/menus/index.d.ts +0 -9
- package/dist/components/menus/popover/PopoverArrow.d.ts +0 -17
- package/dist/components/menus/popover/PopoverContent.d.ts +0 -24
- package/dist/components/menus/popover/PopoverRoot.d.ts +0 -43
- package/dist/components/menus/popover/PopoverTrigger.d.ts +0 -17
- package/dist/components/menus/popover/index.d.ts +0 -9
- package/dist/components/modal/Modal.d.ts +0 -70
- package/dist/components/modal/modal-variants.d.ts +0 -26
- package/dist/components/modals/ConfirmDialog.d.ts +0 -27
- package/dist/components/modals/CustomDialog.d.ts +0 -10
- package/dist/components/modals/Modal.d.ts +0 -19
- package/dist/components/modals/ModalProvider.d.ts +0 -16
- package/dist/components/modals/SimpleModal.d.ts +0 -11
- package/dist/components/navigation/Breadcrumbs.d.ts +0 -12
- package/dist/components/navigation/Pagination.d.ts +0 -10
- package/dist/components/navigation/breadcrumbs/Breadcrumbs.d.ts +0 -52
- package/dist/components/navigation/breadcrumbs/index.d.ts +0 -5
- package/dist/components/navigation/index.d.ts +0 -10
- package/dist/components/navigation/pagination/Pagination.d.ts +0 -60
- package/dist/components/navigation/pagination/index.d.ts +0 -5
- package/dist/components/navigation/segmented-control/SegmentedControl.d.ts +0 -43
- package/dist/components/navigation/segmented-control/index.d.ts +0 -5
- package/dist/components/navigation/stepper/Stepper.d.ts +0 -129
- package/dist/components/navigation/stepper/index.d.ts +0 -5
- package/dist/components/navigation/tabs/Tabs.d.ts +0 -73
- package/dist/components/navigation/tabs/index.d.ts +0 -5
- package/dist/components/notifications/NotificationCenter.DismissAll.d.ts +0 -21
- package/dist/components/notifications/NotificationCenter.GroupHeader.d.ts +0 -23
- package/dist/components/notifications/NotificationCenter.Item.d.ts +0 -24
- package/dist/components/notifications/NotificationCenter.List.d.ts +0 -22
- package/dist/components/notifications/NotificationCenter.Panel.d.ts +0 -32
- package/dist/components/notifications/NotificationCenter.Provider.d.ts +0 -31
- package/dist/components/notifications/NotificationCenter.Trigger.d.ts +0 -15
- package/dist/components/notifications/NotificationCenter.d.ts +0 -27
- package/dist/components/notifications/NotificationCenter.types.d.ts +0 -89
- package/dist/components/notifications/index.d.ts +0 -23
- package/dist/components/notifications/useNotificationCenter.d.ts +0 -47
- package/dist/components/overlays/Backdrop.d.ts +0 -24
- package/dist/components/overlays/Dialog.d.ts +0 -66
- package/dist/components/overlays/Modal.d.ts +0 -60
- package/dist/components/overlays/OverlayPortal.d.ts +0 -22
- package/dist/components/overlays/Popover.d.ts +0 -30
- package/dist/components/overlays/Portal.d.ts +0 -29
- package/dist/components/overlays/Toast.d.ts +0 -36
- package/dist/components/overlays/ToastProvider.d.ts +0 -58
- package/dist/components/overlays/ToastViewport.d.ts +0 -27
- package/dist/components/overlays/Tooltip.d.ts +0 -28
- package/dist/components/overlays/index.d.ts +0 -13
- package/dist/components/overlays/utils/FocusLock.d.ts +0 -30
- package/dist/components/overlays/utils/ScrollLock.d.ts +0 -11
- package/dist/components/overlays/utils/positioning.d.ts +0 -68
- package/dist/components/primitives/Badge.d.ts +0 -9
- package/dist/components/primitives/Button.d.ts +0 -1
- package/dist/components/primitives/Card.d.ts +0 -1
- package/dist/components/primitives/Divider.d.ts +0 -7
- package/dist/components/primitives/Input.d.ts +0 -4
- package/dist/components/primitives/Label.d.ts +0 -1
- package/dist/components/primitives/Link.d.ts +0 -13
- package/dist/components/primitives/ThemeSwitch.d.ts +0 -9
- package/dist/components/radio/Radio.d.ts +0 -23
- package/dist/components/radio/Radio.types.d.ts +0 -63
- package/dist/components/radio/RadioGroup.d.ts +0 -20
- package/dist/components/radio/RadioGroup.types.d.ts +0 -61
- package/dist/components/radio/index.d.ts +0 -5
- package/dist/components/radio/radio-variants.d.ts +0 -13
- package/dist/components/search/SearchBar.d.ts +0 -10
- package/dist/components/sections/ArticlesSection.d.ts +0 -25
- package/dist/components/sections/CTASection.d.ts +0 -37
- package/dist/components/sections/FeatureSection.d.ts +0 -33
- package/dist/components/sections/HeroSection.d.ts +0 -27
- package/dist/components/sections/TrendingSection.d.ts +0 -28
- package/dist/components/select/Select.d.ts +0 -38
- package/dist/components/select/Select.types.d.ts +0 -107
- package/dist/components/select/index.d.ts +0 -5
- package/dist/components/select/legacy/select.d.ts +0 -11
- package/dist/components/select/select-variants.d.ts +0 -32
- package/dist/components/skeletons/EventCardSkeleton.d.ts +0 -6
- package/dist/components/skeletons/VenueCardSkeleton.d.ts +0 -6
- package/dist/components/switch/Switch.d.ts +0 -24
- package/dist/components/switch/Switch.types.d.ts +0 -53
- package/dist/components/switch/index.d.ts +0 -3
- package/dist/components/switch/switch-variants.d.ts +0 -34
- package/dist/components/textarea/Textarea.d.ts +0 -21
- package/dist/components/textarea/Textarea.types.d.ts +0 -40
- package/dist/components/textarea/index.d.ts +0 -3
- package/dist/components/textarea/legacy/textarea.d.ts +0 -11
- package/dist/components/textarea/textarea-variants.d.ts +0 -14
- package/dist/components/toasts/Toast.d.ts +0 -12
- package/dist/components/toasts/ToastProvider.d.ts +0 -26
- package/dist/components/ui/alert.d.ts +0 -9
- package/dist/components/ui/body.d.ts +0 -12
- package/dist/components/ui/button.d.ts +0 -13
- package/dist/components/ui/caption.d.ts +0 -11
- package/dist/components/ui/card.d.ts +0 -8
- package/dist/components/ui/code.d.ts +0 -11
- package/dist/components/ui/dialog.d.ts +0 -19
- package/dist/components/ui/display.d.ts +0 -12
- package/dist/components/ui/field.d.ts +0 -45
- package/dist/components/ui/heading.d.ts +0 -12
- package/dist/components/ui/label.d.ts +0 -12
- package/dist/components/ui/lead.d.ts +0 -11
- package/dist/components/ui/text.d.ts +0 -18
- package/dist/components/ui/toast.d.ts +0 -15
- package/dist/components/ui/toaster.d.ts +0 -1
- package/dist/components/ui/tooltip.d.ts +0 -7
- package/dist/dark-Cvoy1uFT.js +0 -30
- package/dist/dark-OOhiqt1q.cjs +0 -2
- package/dist/default-BKgH1D9-.js +0 -8
- package/dist/default-Ddg7Haf2.cjs +0 -2
- package/dist/hooks/use-toast.d.ts +0 -44
- package/dist/hooks/useDebounce.d.ts +0 -19
- package/dist/hooks/useModal.d.ts +0 -19
- package/dist/hooks/useToast.d.ts +0 -26
- package/dist/icons/IconArrowRight.d.ts +0 -6
- package/dist/icons/IconCalendar.d.ts +0 -6
- package/dist/icons/IconCheck.d.ts +0 -6
- package/dist/icons/IconChevronDown.d.ts +0 -6
- package/dist/icons/IconChevronRight.d.ts +0 -6
- package/dist/icons/IconClose.d.ts +0 -6
- package/dist/icons/IconError.d.ts +0 -6
- package/dist/icons/IconInfo.d.ts +0 -6
- package/dist/icons/IconLocation.d.ts +0 -6
- package/dist/icons/IconMenu.d.ts +0 -6
- package/dist/icons/IconSearch.d.ts +0 -6
- package/dist/icons/IconSuccess.d.ts +0 -6
- package/dist/icons/IconWarning.d.ts +0 -6
- package/dist/icons/icon.types.d.ts +0 -25
- package/dist/icons/index.d.ts +0 -34
- package/dist/lib/a11y.d.ts +0 -15
- package/dist/lib/responsive-props.d.ts +0 -63
- package/dist/lib/utils.d.ts +0 -8
- package/dist/motion-CzQhSEqk.js +0 -738
- package/dist/motion-DJx1TbXJ.cjs +0 -2
- package/dist/theme/ThemeProvider.d.ts +0 -55
- package/dist/theme/applyMode.d.ts +0 -42
- package/dist/theme/colors.d.ts +0 -6
- package/dist/theme/loader.d.ts +0 -63
- package/dist/theme/motion/gestures.d.ts +0 -76
- package/dist/theme/motion/useReducedMotion.d.ts +0 -11
- package/dist/theme/motion.d.ts +0 -127
- package/dist/theme/registry.d.ts +0 -70
- package/dist/theme/schema.d.ts +0 -124
- package/dist/theme/spacing.d.ts +0 -34
- package/dist/theme/typography.d.ts +0 -45
- package/dist/themes/brand.d.ts +0 -6
- package/dist/themes/brand_engine.d.ts +0 -108
- package/dist/themes/dark.d.ts +0 -6
- package/dist/themes/default.d.ts +0 -6
- package/dist/themes/index.d.ts +0 -24
- package/dist/themes/minimal.d.ts +0 -6
- package/dist/themes/neon.d.ts +0 -6
- package/dist/themes/types.d.ts +0 -278
- package/dist/tokens/components/alert.d.ts +0 -74
- package/dist/tokens/components/button.d.ts +0 -130
- package/dist/tokens/components/card.d.ts +0 -91
- package/dist/tokens/components/checkbox.d.ts +0 -161
- package/dist/tokens/components/data.d.ts +0 -227
- package/dist/tokens/components/domain.d.ts +0 -379
- package/dist/tokens/components/dropdown.d.ts +0 -146
- package/dist/tokens/components/icon.d.ts +0 -57
- package/dist/tokens/components/index.d.ts +0 -31
- package/dist/tokens/components/input.d.ts +0 -284
- package/dist/tokens/components/menu.d.ts +0 -114
- package/dist/tokens/components/motion.d.ts +0 -103
- package/dist/tokens/components/navigation.d.ts +0 -181
- package/dist/tokens/components/notifications.d.ts +0 -159
- package/dist/tokens/components/overlay.d.ts +0 -227
- package/dist/tokens/components/popover.d.ts +0 -84
- package/dist/tokens/components/radio.d.ts +0 -149
- package/dist/tokens/components/section.d.ts +0 -41
- package/dist/tokens/components/surface.d.ts +0 -94
- package/dist/tokens/components/switch.d.ts +0 -208
- package/dist/tokens/components/text.d.ts +0 -68
- package/dist/tokens/components/toast.d.ts +0 -146
- package/dist/tokens/components/tooltip.d.ts +0 -52
- package/dist/tokens/css-variables.d.ts +0 -251
- package/dist/tokens/motion/v2.d.ts +0 -342
- package/dist/tokens/motion.d.ts +0 -485
- package/dist/tokens/opacity.d.ts +0 -22
- package/dist/tokens/radius.d.ts +0 -161
- package/dist/tokens/shadows.d.ts +0 -230
- package/dist/tokens/spacing.d.ts +0 -238
- package/dist/tokens/theme.d.ts +0 -119
- package/dist/tokens/typography.d.ts +0 -460
- package/dist/typography-C-Nb4y0o.cjs +0 -2
- package/dist/typography-DHym9KAP.js +0 -1196
package/dist/theme/index.mjs
CHANGED
|
@@ -1,9 +1,122 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __esm = (fn, res) => function __init() {
|
|
7
|
+
return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
|
|
8
|
+
};
|
|
9
|
+
var __export = (target, all) => {
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
// src/themes/brand.ts
|
|
15
|
+
var brand_exports = {};
|
|
16
|
+
__export(brand_exports, {
|
|
17
|
+
brandTheme: () => brandTheme
|
|
18
|
+
});
|
|
19
|
+
var brandTheme;
|
|
20
|
+
var init_brand = __esm({
|
|
21
|
+
"src/themes/brand.ts"() {
|
|
22
|
+
brandTheme = {
|
|
23
|
+
name: "brand",
|
|
24
|
+
description: "Brand-specific theme with custom color palette",
|
|
25
|
+
// Override primary colors - warmer blue tones for brand
|
|
26
|
+
primaryColors: {
|
|
27
|
+
500: "210 75% 45%",
|
|
28
|
+
// Brighter, warmer blue
|
|
29
|
+
600: "210 70% 40%",
|
|
30
|
+
700: "210 65% 35%"
|
|
31
|
+
},
|
|
32
|
+
// Override accent colors - vibrant purple-pink gradient
|
|
33
|
+
accentColors: {
|
|
34
|
+
400: "285 75% 65%",
|
|
35
|
+
// Softer purple
|
|
36
|
+
500: "285 80% 60%",
|
|
37
|
+
// Vibrant purple-pink
|
|
38
|
+
600: "285 75% 55%"
|
|
39
|
+
},
|
|
40
|
+
// Override secondary colors - teal accent for brand
|
|
41
|
+
secondaryColors: {
|
|
42
|
+
400: "170 85% 50%",
|
|
43
|
+
// Brighter teal
|
|
44
|
+
500: "170 90% 45%",
|
|
45
|
+
// Vibrant teal (#00d9b8)
|
|
46
|
+
600: "170 85% 40%"
|
|
47
|
+
},
|
|
48
|
+
// Override semantic colors for day mode - brand-aligned colors
|
|
49
|
+
semanticColorsDay: {
|
|
50
|
+
success: "145 75% 40%",
|
|
51
|
+
// Brand-aligned green
|
|
52
|
+
info: "210 75% 50%"
|
|
53
|
+
// Brand primary blue
|
|
54
|
+
},
|
|
55
|
+
// Override semantic colors for night mode
|
|
56
|
+
semanticColorsNight: {
|
|
57
|
+
success: "145 70% 48%",
|
|
58
|
+
// Brighter brand green
|
|
59
|
+
info: "210 75% 55%"
|
|
60
|
+
// Brighter brand blue
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
// src/themes/dark.ts
|
|
67
|
+
var dark_exports = {};
|
|
68
|
+
__export(dark_exports, {
|
|
69
|
+
darkTheme: () => darkTheme
|
|
70
|
+
});
|
|
71
|
+
var darkTheme;
|
|
72
|
+
var init_dark = __esm({
|
|
73
|
+
"src/themes/dark.ts"() {
|
|
74
|
+
darkTheme = {
|
|
75
|
+
name: "dark",
|
|
76
|
+
description: "Enhanced dark theme with deeper surfaces and higher contrast",
|
|
77
|
+
// Override surface colors for night mode - darker backgrounds
|
|
78
|
+
surfaceColorsNight: {
|
|
79
|
+
base: "240 10% 2%",
|
|
80
|
+
// Even darker base (#050508)
|
|
81
|
+
elevated1: "240 10% 3%",
|
|
82
|
+
// #08080a
|
|
83
|
+
elevated2: "240 10% 4%",
|
|
84
|
+
// #0a0a0c
|
|
85
|
+
elevated3: "240 10% 5%",
|
|
86
|
+
// #0c0c0e
|
|
87
|
+
overlay: "0 0% 0% / 0.85",
|
|
88
|
+
// Darker overlay for better contrast
|
|
89
|
+
glass: "240 10% 5% / 0.95"
|
|
90
|
+
// More opaque glass effect
|
|
91
|
+
},
|
|
92
|
+
// Override base colors for night mode - deeper backgrounds
|
|
93
|
+
baseColorsNight: {
|
|
94
|
+
background: "240 10% 2%",
|
|
95
|
+
// Match surface base
|
|
96
|
+
card: "240 10% 2%",
|
|
97
|
+
popover: "240 10% 3%"
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
// src/themes/default.ts
|
|
104
|
+
var default_exports = {};
|
|
105
|
+
__export(default_exports, {
|
|
106
|
+
defaultTheme: () => defaultTheme
|
|
107
|
+
});
|
|
108
|
+
var defaultTheme;
|
|
109
|
+
var init_default = __esm({
|
|
110
|
+
"src/themes/default.ts"() {
|
|
111
|
+
defaultTheme = {
|
|
112
|
+
name: "default",
|
|
113
|
+
description: "Default Tenerife UI theme with standard color palette"
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
// src/themes/minimal.ts
|
|
119
|
+
var minimalBrand = {
|
|
7
120
|
id: "minimal",
|
|
8
121
|
name: "Minimal",
|
|
9
122
|
description: "Clean, minimal brand theme with muted colors, light typography, and compact spacing",
|
|
@@ -347,7 +460,10 @@ const we = {
|
|
|
347
460
|
}
|
|
348
461
|
}
|
|
349
462
|
]
|
|
350
|
-
}
|
|
463
|
+
};
|
|
464
|
+
|
|
465
|
+
// src/themes/neon.ts
|
|
466
|
+
var neonBrand = {
|
|
351
467
|
id: "neon",
|
|
352
468
|
name: "Neon",
|
|
353
469
|
description: "Vibrant brand theme with high-saturation neon colors, bold typography, and enhanced visual effects",
|
|
@@ -698,396 +814,1208 @@ const we = {
|
|
|
698
814
|
}
|
|
699
815
|
}
|
|
700
816
|
]
|
|
701
|
-
}
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
817
|
+
};
|
|
818
|
+
|
|
819
|
+
// src/themes/brand_engine.ts
|
|
820
|
+
var brandRegistry = /* @__PURE__ */ new Map();
|
|
821
|
+
var activeBrand = null;
|
|
822
|
+
var activeNamespace = null;
|
|
823
|
+
var brandCache = /* @__PURE__ */ new Map();
|
|
824
|
+
function validateBrand(brand) {
|
|
825
|
+
const errors = [];
|
|
826
|
+
const warnings = [];
|
|
827
|
+
if (!brand || typeof brand !== "object") {
|
|
707
828
|
return {
|
|
708
|
-
valid:
|
|
829
|
+
valid: false,
|
|
709
830
|
errors: ["Brand must be an object"],
|
|
710
831
|
warnings: []
|
|
711
832
|
};
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
833
|
+
}
|
|
834
|
+
const brandObj = brand;
|
|
835
|
+
const requiredFields = ["id", "name", "namespace"];
|
|
836
|
+
for (const field of requiredFields) {
|
|
837
|
+
if (!(field in brandObj) || !brandObj[field]) {
|
|
838
|
+
errors.push(`Missing required field: ${field}`);
|
|
839
|
+
}
|
|
840
|
+
}
|
|
841
|
+
if (brandObj.id && typeof brandObj.id === "string") {
|
|
842
|
+
const idRegex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
|
|
843
|
+
if (!idRegex.test(brandObj.id)) {
|
|
844
|
+
errors.push(
|
|
845
|
+
`Invalid brand ID format: "${brandObj.id}". Must be kebab-case (e.g., "neon-brand")`
|
|
846
|
+
);
|
|
847
|
+
}
|
|
848
|
+
}
|
|
849
|
+
if (brandObj.namespace && typeof brandObj.namespace === "string") {
|
|
850
|
+
const namespaceRegex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
|
|
851
|
+
if (!namespaceRegex.test(brandObj.namespace)) {
|
|
852
|
+
errors.push(
|
|
853
|
+
`Invalid namespace format: "${brandObj.namespace}". Must be kebab-case (e.g., "neon")`
|
|
854
|
+
);
|
|
855
|
+
}
|
|
856
|
+
}
|
|
857
|
+
if (brandObj.themes) {
|
|
858
|
+
if (!Array.isArray(brandObj.themes)) {
|
|
859
|
+
errors.push("Brand themes must be an array");
|
|
860
|
+
} else {
|
|
861
|
+
const themes2 = brandObj.themes;
|
|
862
|
+
if (themes2.length === 0) {
|
|
863
|
+
warnings.push("Brand has no themes defined");
|
|
864
|
+
}
|
|
865
|
+
themes2.forEach((theme, index) => {
|
|
866
|
+
if (!theme || typeof theme !== "object") {
|
|
867
|
+
errors.push(`Theme at index ${index} must be an object`);
|
|
727
868
|
return;
|
|
728
869
|
}
|
|
729
|
-
const
|
|
730
|
-
(!
|
|
870
|
+
const themeObj = theme;
|
|
871
|
+
if (!themeObj.id || typeof themeObj.id !== "string") {
|
|
872
|
+
errors.push(`Theme at index ${index} is missing required field: id`);
|
|
873
|
+
}
|
|
874
|
+
if (!themeObj.name || typeof themeObj.name !== "string") {
|
|
875
|
+
errors.push(`Theme at index ${index} is missing required field: name`);
|
|
876
|
+
}
|
|
877
|
+
if (!themeObj.mode || !["day", "night"].includes(themeObj.mode)) {
|
|
878
|
+
errors.push(`Theme at index ${index} must have mode set to "day" or "night"`);
|
|
879
|
+
}
|
|
880
|
+
if (!themeObj.overrides || typeof themeObj.overrides !== "object") {
|
|
881
|
+
errors.push(`Theme at index ${index} is missing required field: overrides`);
|
|
882
|
+
}
|
|
731
883
|
});
|
|
732
884
|
}
|
|
733
|
-
else
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
(
|
|
740
|
-
|
|
741
|
-
|
|
885
|
+
} else {
|
|
886
|
+
errors.push("Brand must have at least one theme");
|
|
887
|
+
}
|
|
888
|
+
if (brandObj.version && typeof brandObj.version === "string") {
|
|
889
|
+
const semverRegex = /^\d+\.\d+\.\d+$/;
|
|
890
|
+
if (!semverRegex.test(brandObj.version)) {
|
|
891
|
+
warnings.push(
|
|
892
|
+
`Invalid version format: "${brandObj.version}". Should be semver (e.g., "1.0.0")`
|
|
893
|
+
);
|
|
894
|
+
}
|
|
895
|
+
}
|
|
896
|
+
if (brandObj.themes && Array.isArray(brandObj.themes)) {
|
|
897
|
+
const themeIds = brandObj.themes.map(
|
|
898
|
+
(theme) => theme?.id
|
|
899
|
+
);
|
|
900
|
+
const uniqueIds = new Set(themeIds);
|
|
901
|
+
if (themeIds.length !== uniqueIds.size) {
|
|
902
|
+
errors.push("Brand contains duplicate theme IDs");
|
|
903
|
+
}
|
|
742
904
|
}
|
|
743
905
|
return {
|
|
744
|
-
valid:
|
|
745
|
-
errors
|
|
746
|
-
warnings
|
|
906
|
+
valid: errors.length === 0,
|
|
907
|
+
errors,
|
|
908
|
+
warnings
|
|
747
909
|
};
|
|
748
910
|
}
|
|
749
|
-
function
|
|
750
|
-
const
|
|
751
|
-
if (!
|
|
752
|
-
throw new Error(`Invalid brand "${
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
911
|
+
function registerBrand(brand, options) {
|
|
912
|
+
const validation = validateBrand(brand);
|
|
913
|
+
if (!validation.valid) {
|
|
914
|
+
throw new Error(`Invalid brand "${brand.id}": ${validation.errors.join(", ")}`);
|
|
915
|
+
}
|
|
916
|
+
if (validation.warnings.length > 0) {
|
|
917
|
+
console.warn(`Brand "${brand.id}" validation warnings:`, validation.warnings.join(", "));
|
|
918
|
+
}
|
|
919
|
+
const existingEntry = brandRegistry.get(brand.id);
|
|
920
|
+
if (existingEntry && existingEntry.brand.namespace === brand.namespace) {
|
|
756
921
|
return;
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
922
|
+
}
|
|
923
|
+
if (brandRegistry.has(brand.id)) {
|
|
924
|
+
throw new Error(`Brand "${brand.id}" is already registered`);
|
|
925
|
+
}
|
|
926
|
+
const existingBrand = Array.from(brandRegistry.values()).find(
|
|
927
|
+
(entry) => entry.brand.namespace === brand.namespace
|
|
761
928
|
);
|
|
762
|
-
if (
|
|
929
|
+
if (existingBrand) {
|
|
763
930
|
throw new Error(
|
|
764
|
-
`Brand namespace "${
|
|
931
|
+
`Brand namespace "${brand.namespace}" is already used by brand "${existingBrand.brand.id}"`
|
|
765
932
|
);
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
933
|
+
}
|
|
934
|
+
brandRegistry.set(brand.id, {
|
|
935
|
+
brand,
|
|
936
|
+
enabled: options?.enabled !== false,
|
|
937
|
+
loader: options?.loader
|
|
770
938
|
});
|
|
771
939
|
}
|
|
772
|
-
async function
|
|
773
|
-
if (
|
|
774
|
-
return
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
if (
|
|
940
|
+
async function loadBrand(brandId) {
|
|
941
|
+
if (brandCache.has(brandId)) {
|
|
942
|
+
return brandCache.get(brandId);
|
|
943
|
+
}
|
|
944
|
+
const entry = brandRegistry.get(brandId);
|
|
945
|
+
if (!entry) {
|
|
946
|
+
throw new Error(`Brand "${brandId}" not found in registry`);
|
|
947
|
+
}
|
|
948
|
+
if (entry.enabled === false) {
|
|
949
|
+
throw new Error(`Brand "${brandId}" is disabled`);
|
|
950
|
+
}
|
|
951
|
+
if (entry.loader) {
|
|
781
952
|
try {
|
|
782
|
-
const
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
953
|
+
const module = await entry.loader();
|
|
954
|
+
const loadedBrand = module.default;
|
|
955
|
+
const validation = validateBrand(loadedBrand);
|
|
956
|
+
if (!validation.valid) {
|
|
957
|
+
throw new Error(`Invalid loaded brand "${brandId}": ${validation.errors.join(", ")}`);
|
|
958
|
+
}
|
|
959
|
+
brandCache.set(brandId, loadedBrand);
|
|
960
|
+
return loadedBrand;
|
|
961
|
+
} catch (error) {
|
|
787
962
|
throw new Error(
|
|
788
|
-
`Failed to load brand "${
|
|
963
|
+
`Failed to load brand "${brandId}": ${error instanceof Error ? error.message : String(error)}`
|
|
789
964
|
);
|
|
790
965
|
}
|
|
791
|
-
|
|
966
|
+
}
|
|
967
|
+
brandCache.set(brandId, entry.brand);
|
|
968
|
+
return entry.brand;
|
|
792
969
|
}
|
|
793
|
-
function
|
|
794
|
-
return
|
|
970
|
+
function getActiveBrand() {
|
|
971
|
+
return activeBrand;
|
|
795
972
|
}
|
|
796
|
-
function
|
|
797
|
-
|
|
973
|
+
function setActiveBrand(brand) {
|
|
974
|
+
activeBrand = brand;
|
|
975
|
+
activeNamespace = brand?.namespace || null;
|
|
798
976
|
}
|
|
799
|
-
function
|
|
800
|
-
|
|
977
|
+
function clearActiveBrand() {
|
|
978
|
+
activeBrand = null;
|
|
979
|
+
activeNamespace = null;
|
|
801
980
|
}
|
|
802
|
-
function
|
|
803
|
-
return
|
|
981
|
+
function getBrandTheme(brand, mode) {
|
|
982
|
+
return brand.themes.find((theme) => theme.mode === mode);
|
|
804
983
|
}
|
|
805
|
-
function
|
|
806
|
-
if (typeof document
|
|
807
|
-
const
|
|
808
|
-
if (!
|
|
809
|
-
console.warn(`Brand "${
|
|
984
|
+
function applyBrandOverrides(brand, mode) {
|
|
985
|
+
if (typeof document === "undefined") return;
|
|
986
|
+
const theme = getBrandTheme(brand, mode);
|
|
987
|
+
if (!theme) {
|
|
988
|
+
console.warn(`Brand "${brand.id}" has no theme for mode "${mode}"`);
|
|
810
989
|
return;
|
|
811
990
|
}
|
|
812
|
-
const
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
t.style.setProperty(`--brand-${n}-secondary-${i}`, a);
|
|
819
|
-
});
|
|
820
|
-
const m = e === "day" ? o.baseColorsDay : o.baseColorsNight;
|
|
821
|
-
if (m && Object.entries(m).forEach(([i, a]) => {
|
|
822
|
-
t.style.setProperty(`--brand-${n}-${i}`, a);
|
|
823
|
-
}), o.typography && (o.typography.fontFamily && Object.entries(o.typography.fontFamily).forEach(([i, a]) => {
|
|
824
|
-
t.style.setProperty(
|
|
825
|
-
`--brand-${n}-font-${i}`,
|
|
826
|
-
Array.isArray(a) ? a.join(", ") : a
|
|
827
|
-
);
|
|
828
|
-
}), o.typography.fontSize && Object.entries(o.typography.fontSize).forEach(([i, a]) => {
|
|
829
|
-
const c = typeof a == "string" ? a : a[0];
|
|
830
|
-
t.style.setProperty(`--brand-${n}-font-size-${i}`, c);
|
|
831
|
-
}), o.typography.fontWeight && Object.entries(o.typography.fontWeight).forEach(([i, a]) => {
|
|
832
|
-
t.style.setProperty(`--brand-${n}-font-weight-${i}`, a);
|
|
833
|
-
}), o.typography.lineHeight && Object.entries(o.typography.lineHeight).forEach(([i, a]) => {
|
|
834
|
-
t.style.setProperty(`--brand-${n}-line-height-${i}`, a);
|
|
835
|
-
}), o.typography.letterSpacing && Object.entries(o.typography.letterSpacing).forEach(([i, a]) => {
|
|
836
|
-
t.style.setProperty(`--brand-${n}-letter-spacing-${i}`, a);
|
|
837
|
-
})), o.spacing && (o.spacing.semanticSpacing && Object.entries(o.spacing.semanticSpacing).forEach(([i, a]) => {
|
|
838
|
-
t.style.setProperty(`--brand-${n}-spacing-${i}`, a);
|
|
839
|
-
}), o.spacing.layoutSpacing)) {
|
|
840
|
-
const i = o.spacing.layoutSpacing;
|
|
841
|
-
i.section && Object.entries(i.section).forEach(([a, c]) => {
|
|
842
|
-
typeof c == "string" && t.style.setProperty(`--brand-${n}-layout-section-${a}`, c);
|
|
843
|
-
}), i.container && Object.entries(i.container).forEach(([a, c]) => {
|
|
844
|
-
typeof c == "string" && t.style.setProperty(`--brand-${n}-layout-container-${a}`, c);
|
|
845
|
-
}), i.grid && Object.entries(i.grid).forEach(([a, c]) => {
|
|
846
|
-
typeof c == "string" && t.style.setProperty(`--brand-${n}-layout-grid-${a}`, c);
|
|
847
|
-
}), i.stack && Object.entries(i.stack).forEach(([a, c]) => {
|
|
848
|
-
typeof c == "string" && t.style.setProperty(`--brand-${n}-layout-stack-${a}`, c);
|
|
849
|
-
}), i.component && Object.entries(i.component).forEach(([a, c]) => {
|
|
850
|
-
typeof c == "string" && t.style.setProperty(`--brand-${n}-layout-component-${a}`, c);
|
|
991
|
+
const root = document.documentElement;
|
|
992
|
+
const { namespace } = brand;
|
|
993
|
+
const { overrides } = theme;
|
|
994
|
+
if (overrides.primaryColors) {
|
|
995
|
+
Object.entries(overrides.primaryColors).forEach(([key, value]) => {
|
|
996
|
+
root.style.setProperty(`--brand-${namespace}-primary-${key}`, value);
|
|
851
997
|
});
|
|
852
998
|
}
|
|
853
|
-
if (
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
t.style.setProperty(`--brand-${n}-shadow-primary-${i}`, a);
|
|
857
|
-
}), o.shadows.accentColoredShadows && Object.entries(o.shadows.accentColoredShadows).forEach(([i, a]) => {
|
|
858
|
-
t.style.setProperty(`--brand-${n}-shadow-accent-${i}`, a);
|
|
859
|
-
}), o.shadows.glowEffects && Object.entries(o.shadows.glowEffects).forEach(([i, a]) => {
|
|
860
|
-
t.style.setProperty(`--brand-${n}-glow-${i}`, a);
|
|
861
|
-
}), o.shadows.focusRings && Object.entries(o.shadows.focusRings).forEach(([i, a]) => {
|
|
862
|
-
t.style.setProperty(`--brand-${n}-focus-ring-${i}`, a);
|
|
863
|
-
})), o.radius && (o.radius.borderRadius && Object.entries(o.radius.borderRadius).forEach(([i, a]) => {
|
|
864
|
-
t.style.setProperty(`--brand-${n}-radius-${i}`, a);
|
|
865
|
-
}), o.radius.componentRadius)) {
|
|
866
|
-
const { componentRadius: i } = o.radius;
|
|
867
|
-
i.button && Object.entries(i.button).forEach(([a, c]) => {
|
|
868
|
-
t.style.setProperty(`--brand-${n}-radius-button-${a}`, c);
|
|
869
|
-
}), i.card && Object.entries(i.card).forEach(([a, c]) => {
|
|
870
|
-
t.style.setProperty(`--brand-${n}-radius-card-${a}`, c);
|
|
871
|
-
}), i.input && Object.entries(i.input).forEach(([a, c]) => {
|
|
872
|
-
t.style.setProperty(`--brand-${n}-radius-input-${a}`, c);
|
|
999
|
+
if (overrides.accentColors) {
|
|
1000
|
+
Object.entries(overrides.accentColors).forEach(([key, value]) => {
|
|
1001
|
+
root.style.setProperty(`--brand-${namespace}-accent-${key}`, value);
|
|
873
1002
|
});
|
|
874
1003
|
}
|
|
875
|
-
|
|
1004
|
+
if (overrides.secondaryColors) {
|
|
1005
|
+
Object.entries(overrides.secondaryColors).forEach(([key, value]) => {
|
|
1006
|
+
root.style.setProperty(`--brand-${namespace}-secondary-${key}`, value);
|
|
1007
|
+
});
|
|
1008
|
+
}
|
|
1009
|
+
const modeColors = mode === "day" ? overrides.baseColorsDay : overrides.baseColorsNight;
|
|
1010
|
+
if (modeColors) {
|
|
1011
|
+
Object.entries(modeColors).forEach(([key, value]) => {
|
|
1012
|
+
root.style.setProperty(`--brand-${namespace}-${key}`, value);
|
|
1013
|
+
});
|
|
1014
|
+
}
|
|
1015
|
+
if (overrides.typography) {
|
|
1016
|
+
if (overrides.typography.fontFamily) {
|
|
1017
|
+
Object.entries(overrides.typography.fontFamily).forEach(([key, value]) => {
|
|
1018
|
+
root.style.setProperty(
|
|
1019
|
+
`--brand-${namespace}-font-${key}`,
|
|
1020
|
+
Array.isArray(value) ? value.join(", ") : value
|
|
1021
|
+
);
|
|
1022
|
+
});
|
|
1023
|
+
}
|
|
1024
|
+
if (overrides.typography.fontSize) {
|
|
1025
|
+
Object.entries(overrides.typography.fontSize).forEach(([key, value]) => {
|
|
1026
|
+
const fontSizeValue = typeof value === "string" ? value : value[0];
|
|
1027
|
+
root.style.setProperty(`--brand-${namespace}-font-size-${key}`, fontSizeValue);
|
|
1028
|
+
});
|
|
1029
|
+
}
|
|
1030
|
+
if (overrides.typography.fontWeight) {
|
|
1031
|
+
Object.entries(overrides.typography.fontWeight).forEach(([key, value]) => {
|
|
1032
|
+
root.style.setProperty(`--brand-${namespace}-font-weight-${key}`, value);
|
|
1033
|
+
});
|
|
1034
|
+
}
|
|
1035
|
+
if (overrides.typography.lineHeight) {
|
|
1036
|
+
Object.entries(overrides.typography.lineHeight).forEach(([key, value]) => {
|
|
1037
|
+
root.style.setProperty(`--brand-${namespace}-line-height-${key}`, value);
|
|
1038
|
+
});
|
|
1039
|
+
}
|
|
1040
|
+
if (overrides.typography.letterSpacing) {
|
|
1041
|
+
Object.entries(overrides.typography.letterSpacing).forEach(([key, value]) => {
|
|
1042
|
+
root.style.setProperty(`--brand-${namespace}-letter-spacing-${key}`, value);
|
|
1043
|
+
});
|
|
1044
|
+
}
|
|
1045
|
+
}
|
|
1046
|
+
if (overrides.spacing) {
|
|
1047
|
+
if (overrides.spacing.semanticSpacing) {
|
|
1048
|
+
Object.entries(overrides.spacing.semanticSpacing).forEach(([key, value]) => {
|
|
1049
|
+
root.style.setProperty(`--brand-${namespace}-spacing-${key}`, value);
|
|
1050
|
+
});
|
|
1051
|
+
}
|
|
1052
|
+
if (overrides.spacing.layoutSpacing) {
|
|
1053
|
+
const layout = overrides.spacing.layoutSpacing;
|
|
1054
|
+
if (layout.section) {
|
|
1055
|
+
Object.entries(layout.section).forEach(([key, value]) => {
|
|
1056
|
+
if (typeof value === "string") {
|
|
1057
|
+
root.style.setProperty(`--brand-${namespace}-layout-section-${key}`, value);
|
|
1058
|
+
}
|
|
1059
|
+
});
|
|
1060
|
+
}
|
|
1061
|
+
if (layout.container) {
|
|
1062
|
+
Object.entries(layout.container).forEach(([key, value]) => {
|
|
1063
|
+
if (typeof value === "string") {
|
|
1064
|
+
root.style.setProperty(`--brand-${namespace}-layout-container-${key}`, value);
|
|
1065
|
+
}
|
|
1066
|
+
});
|
|
1067
|
+
}
|
|
1068
|
+
if (layout.grid) {
|
|
1069
|
+
Object.entries(layout.grid).forEach(([key, value]) => {
|
|
1070
|
+
if (typeof value === "string") {
|
|
1071
|
+
root.style.setProperty(`--brand-${namespace}-layout-grid-${key}`, value);
|
|
1072
|
+
}
|
|
1073
|
+
});
|
|
1074
|
+
}
|
|
1075
|
+
if (layout.stack) {
|
|
1076
|
+
Object.entries(layout.stack).forEach(([key, value]) => {
|
|
1077
|
+
if (typeof value === "string") {
|
|
1078
|
+
root.style.setProperty(`--brand-${namespace}-layout-stack-${key}`, value);
|
|
1079
|
+
}
|
|
1080
|
+
});
|
|
1081
|
+
}
|
|
1082
|
+
if (layout.component) {
|
|
1083
|
+
Object.entries(layout.component).forEach(([key, value]) => {
|
|
1084
|
+
if (typeof value === "string") {
|
|
1085
|
+
root.style.setProperty(`--brand-${namespace}-layout-component-${key}`, value);
|
|
1086
|
+
}
|
|
1087
|
+
});
|
|
1088
|
+
}
|
|
1089
|
+
}
|
|
1090
|
+
}
|
|
1091
|
+
if (overrides.shadows) {
|
|
1092
|
+
if (overrides.shadows.elevationShadows) {
|
|
1093
|
+
Object.entries(overrides.shadows.elevationShadows).forEach(([key, value]) => {
|
|
1094
|
+
root.style.setProperty(`--brand-${namespace}-shadow-${key}`, value);
|
|
1095
|
+
});
|
|
1096
|
+
}
|
|
1097
|
+
if (overrides.shadows.primaryColoredShadows) {
|
|
1098
|
+
Object.entries(overrides.shadows.primaryColoredShadows).forEach(([key, value]) => {
|
|
1099
|
+
root.style.setProperty(`--brand-${namespace}-shadow-primary-${key}`, value);
|
|
1100
|
+
});
|
|
1101
|
+
}
|
|
1102
|
+
if (overrides.shadows.accentColoredShadows) {
|
|
1103
|
+
Object.entries(overrides.shadows.accentColoredShadows).forEach(([key, value]) => {
|
|
1104
|
+
root.style.setProperty(`--brand-${namespace}-shadow-accent-${key}`, value);
|
|
1105
|
+
});
|
|
1106
|
+
}
|
|
1107
|
+
if (overrides.shadows.glowEffects) {
|
|
1108
|
+
Object.entries(overrides.shadows.glowEffects).forEach(([key, value]) => {
|
|
1109
|
+
root.style.setProperty(`--brand-${namespace}-glow-${key}`, value);
|
|
1110
|
+
});
|
|
1111
|
+
}
|
|
1112
|
+
if (overrides.shadows.focusRings) {
|
|
1113
|
+
Object.entries(overrides.shadows.focusRings).forEach(([key, value]) => {
|
|
1114
|
+
root.style.setProperty(`--brand-${namespace}-focus-ring-${key}`, value);
|
|
1115
|
+
});
|
|
1116
|
+
}
|
|
1117
|
+
}
|
|
1118
|
+
if (overrides.radius) {
|
|
1119
|
+
if (overrides.radius.borderRadius) {
|
|
1120
|
+
Object.entries(overrides.radius.borderRadius).forEach(([key, value]) => {
|
|
1121
|
+
root.style.setProperty(`--brand-${namespace}-radius-${key}`, value);
|
|
1122
|
+
});
|
|
1123
|
+
}
|
|
1124
|
+
if (overrides.radius.componentRadius) {
|
|
1125
|
+
const { componentRadius } = overrides.radius;
|
|
1126
|
+
if (componentRadius.button) {
|
|
1127
|
+
Object.entries(componentRadius.button).forEach(([key, value]) => {
|
|
1128
|
+
root.style.setProperty(`--brand-${namespace}-radius-button-${key}`, value);
|
|
1129
|
+
});
|
|
1130
|
+
}
|
|
1131
|
+
if (componentRadius.card) {
|
|
1132
|
+
Object.entries(componentRadius.card).forEach(([key, value]) => {
|
|
1133
|
+
root.style.setProperty(`--brand-${namespace}-radius-card-${key}`, value);
|
|
1134
|
+
});
|
|
1135
|
+
}
|
|
1136
|
+
if (componentRadius.input) {
|
|
1137
|
+
Object.entries(componentRadius.input).forEach(([key, value]) => {
|
|
1138
|
+
root.style.setProperty(`--brand-${namespace}-radius-input-${key}`, value);
|
|
1139
|
+
});
|
|
1140
|
+
}
|
|
1141
|
+
}
|
|
1142
|
+
}
|
|
1143
|
+
setActiveBrand(brand);
|
|
1144
|
+
root.setAttribute("data-brand", brand.id);
|
|
1145
|
+
root.setAttribute("data-brand-namespace", namespace);
|
|
876
1146
|
}
|
|
877
|
-
function
|
|
878
|
-
if (typeof document
|
|
879
|
-
const
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
1147
|
+
function removeBrandOverrides(namespace) {
|
|
1148
|
+
if (typeof document === "undefined") return;
|
|
1149
|
+
const root = document.documentElement;
|
|
1150
|
+
const { style } = root;
|
|
1151
|
+
const propsToRemove = [];
|
|
1152
|
+
for (let i = 0; i < style.length; i++) {
|
|
1153
|
+
const prop = style.item(i);
|
|
1154
|
+
if (prop && prop.startsWith(`--brand-${namespace}-`)) {
|
|
1155
|
+
propsToRemove.push(prop);
|
|
1156
|
+
}
|
|
1157
|
+
}
|
|
1158
|
+
propsToRemove.forEach((prop) => {
|
|
1159
|
+
style.removeProperty(prop);
|
|
1160
|
+
});
|
|
1161
|
+
root.removeAttribute("data-brand");
|
|
1162
|
+
root.removeAttribute("data-brand-namespace");
|
|
1163
|
+
if (activeNamespace === namespace) {
|
|
1164
|
+
clearActiveBrand();
|
|
1165
|
+
}
|
|
887
1166
|
}
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
1167
|
+
|
|
1168
|
+
// src/themes/index.ts
|
|
1169
|
+
var themes = {
|
|
1170
|
+
default: () => Promise.resolve().then(() => (init_default(), default_exports)).then((m) => m.defaultTheme),
|
|
1171
|
+
dark: () => Promise.resolve().then(() => (init_dark(), dark_exports)).then((m) => m.darkTheme),
|
|
1172
|
+
brand: () => Promise.resolve().then(() => (init_brand(), brand_exports)).then((m) => m.brandTheme)
|
|
892
1173
|
};
|
|
893
|
-
async function
|
|
894
|
-
const
|
|
895
|
-
if (!
|
|
896
|
-
throw new Error(`Theme "${
|
|
897
|
-
|
|
1174
|
+
async function getTheme(name) {
|
|
1175
|
+
const themeLoader = themes[name];
|
|
1176
|
+
if (!themeLoader) {
|
|
1177
|
+
throw new Error(`Theme "${name}" not found`);
|
|
1178
|
+
}
|
|
1179
|
+
return await themeLoader();
|
|
898
1180
|
}
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
1181
|
+
|
|
1182
|
+
// src/tokens/colors.ts
|
|
1183
|
+
var primaryColors = {
|
|
1184
|
+
50: "210 40% 98%",
|
|
1185
|
+
// Lightest blue
|
|
1186
|
+
100: "210 40% 96%",
|
|
1187
|
+
200: "217 32.6% 17.5%",
|
|
1188
|
+
300: "216 28% 26%",
|
|
1189
|
+
400: "215 25% 27%",
|
|
1190
|
+
500: "215 20% 35%",
|
|
1191
|
+
// Base primary
|
|
1192
|
+
600: "215 16% 47%",
|
|
1193
|
+
700: "216 12% 54%",
|
|
1194
|
+
800: "217 10% 62%",
|
|
1195
|
+
900: "222 47.4% 11.2%",
|
|
1196
|
+
950: "222 84% 4.9%"
|
|
1197
|
+
// Darkest blue
|
|
1198
|
+
};
|
|
1199
|
+
var accentColors = {
|
|
1200
|
+
50: "280 100% 98%",
|
|
1201
|
+
100: "280 65% 96%",
|
|
1202
|
+
200: "280 60% 85%",
|
|
1203
|
+
300: "280 55% 75%",
|
|
1204
|
+
400: "280 50% 65%",
|
|
1205
|
+
500: "280 70% 67%",
|
|
1206
|
+
// Base accent (night mode primary)
|
|
1207
|
+
600: "259 65% 58%",
|
|
1208
|
+
700: "259 60% 50%",
|
|
1209
|
+
800: "259 55% 45%",
|
|
1210
|
+
900: "259 50% 40%",
|
|
1211
|
+
950: "259 45% 30%"
|
|
1212
|
+
};
|
|
1213
|
+
var secondaryColors = {
|
|
1214
|
+
50: "173 100% 98%",
|
|
1215
|
+
100: "173 100% 95%",
|
|
1216
|
+
200: "173 100% 85%",
|
|
1217
|
+
300: "173 100% 70%",
|
|
1218
|
+
400: "173 100% 55%",
|
|
1219
|
+
500: "173 100% 37%",
|
|
1220
|
+
// Base secondary (Tenerife #00bfa6)
|
|
1221
|
+
600: "173 100% 32%",
|
|
1222
|
+
700: "173 95% 27%",
|
|
1223
|
+
800: "173 90% 22%",
|
|
1224
|
+
900: "173 85% 17%",
|
|
1225
|
+
950: "173 80% 12%"
|
|
1226
|
+
};
|
|
1227
|
+
var surfaceColors = {
|
|
1228
|
+
day: {
|
|
1229
|
+
base: "0 0% 100%",
|
|
1230
|
+
// White background
|
|
1231
|
+
elevated1: "0 0% 98%",
|
|
1232
|
+
// Slightly elevated
|
|
1233
|
+
elevated2: "0 0% 96%",
|
|
1234
|
+
// More elevated
|
|
1235
|
+
elevated3: "0 0% 94%",
|
|
1236
|
+
// Most elevated
|
|
1237
|
+
overlay: "0 0% 0% / 0.5",
|
|
1238
|
+
// Overlay backdrop
|
|
1239
|
+
glass: "0 0% 100% / 0.8"
|
|
1240
|
+
// Glass effect
|
|
1241
|
+
},
|
|
1242
|
+
night: {
|
|
1243
|
+
base: "240 10% 3.9%",
|
|
1244
|
+
// Dark background (#0b0b10)
|
|
1245
|
+
elevated1: "240 10% 5.1%",
|
|
1246
|
+
// #0e1016
|
|
1247
|
+
elevated2: "240 10% 6.3%",
|
|
1248
|
+
// Slightly lighter
|
|
1249
|
+
elevated3: "240 10% 7.5%",
|
|
1250
|
+
// Even lighter
|
|
1251
|
+
overlay: "0 0% 0% / 0.7",
|
|
1252
|
+
// Darker overlay
|
|
1253
|
+
glass: "240 10% 10% / 0.9"
|
|
1254
|
+
// Dark glass effect
|
|
1255
|
+
}
|
|
1256
|
+
};
|
|
1257
|
+
var semanticColors = {
|
|
1258
|
+
day: {
|
|
1259
|
+
success: "142 70% 28%",
|
|
1260
|
+
// Darker green for better contrast
|
|
1261
|
+
successForeground: "0 0% 100%",
|
|
1262
|
+
error: "0 80% 40%",
|
|
1263
|
+
// Richer red for contrast
|
|
1264
|
+
errorForeground: "0 0% 100%",
|
|
1265
|
+
warning: "38 92% 50%",
|
|
1266
|
+
// Orange
|
|
1267
|
+
warningForeground: "0 0% 9%",
|
|
1268
|
+
info: "199 89% 48%",
|
|
1269
|
+
// Blue
|
|
1270
|
+
infoForeground: "0 0% 100%"
|
|
1271
|
+
},
|
|
1272
|
+
night: {
|
|
1273
|
+
success: "142 70% 45%",
|
|
1274
|
+
successForeground: "0 0% 100%",
|
|
1275
|
+
error: "0 62.8% 30.6%",
|
|
1276
|
+
// Darker red
|
|
1277
|
+
errorForeground: "0 0% 98%",
|
|
1278
|
+
warning: "38 92% 33%",
|
|
1279
|
+
// Darker orange for WCAG AA contrast with white text
|
|
1280
|
+
warningForeground: "0 0% 100%",
|
|
1281
|
+
// Light foreground for dark theme readability
|
|
1282
|
+
info: "199 89% 35%",
|
|
1283
|
+
// Darker blue for WCAG AA contrast with white text
|
|
1284
|
+
infoForeground: "0 0% 100%"
|
|
1285
|
+
// Light foreground for dark theme readability
|
|
1286
|
+
}
|
|
1287
|
+
};
|
|
1288
|
+
var chartColors = {
|
|
1289
|
+
day: {
|
|
1290
|
+
chart1: "12 76% 61%",
|
|
1291
|
+
// Orange-red
|
|
1292
|
+
chart2: "173 58% 39%",
|
|
1293
|
+
// Teal-cyan
|
|
1294
|
+
chart3: "197 37% 24%",
|
|
1295
|
+
// Dark blue
|
|
1296
|
+
chart4: "43 74% 66%",
|
|
1297
|
+
// Yellow
|
|
1298
|
+
chart5: "27 87% 67%"
|
|
1299
|
+
// Orange
|
|
1300
|
+
},
|
|
1301
|
+
night: {
|
|
1302
|
+
chart1: "220 70% 50%",
|
|
1303
|
+
// Blue
|
|
1304
|
+
chart2: "160 60% 45%",
|
|
1305
|
+
// Teal
|
|
1306
|
+
chart3: "30 80% 55%",
|
|
1307
|
+
// Orange
|
|
1308
|
+
chart4: "280 65% 60%",
|
|
1309
|
+
// Purple
|
|
1310
|
+
chart5: "340 75% 55%"
|
|
1311
|
+
// Pink
|
|
1312
|
+
}
|
|
1313
|
+
};
|
|
1314
|
+
var textColors = {
|
|
1315
|
+
day: {
|
|
1316
|
+
primary: "0 0% 9%",
|
|
1317
|
+
// Almost black
|
|
1318
|
+
secondary: "0 0% 45%",
|
|
1319
|
+
// Medium gray
|
|
1320
|
+
tertiary: "0 0% 65%",
|
|
1321
|
+
// Light gray
|
|
1322
|
+
muted: "0 0% 38%",
|
|
1323
|
+
// Muted gray with stronger contrast
|
|
1324
|
+
inverse: "0 0% 100%"
|
|
1325
|
+
// White (for dark backgrounds)
|
|
1326
|
+
},
|
|
1327
|
+
night: {
|
|
1328
|
+
primary: "0 0% 89.8%",
|
|
1329
|
+
// Light gray (#e5e7eb)
|
|
1330
|
+
secondary: "240 5% 64.9%",
|
|
1331
|
+
// Medium gray
|
|
1332
|
+
tertiary: "240 5% 50%",
|
|
1333
|
+
// Darker gray
|
|
1334
|
+
muted: "240 5% 64.9%",
|
|
1335
|
+
// Muted gray
|
|
1336
|
+
inverse: "0 0% 9%"
|
|
1337
|
+
// Almost black (for light backgrounds)
|
|
1338
|
+
}
|
|
1339
|
+
};
|
|
1340
|
+
var baseColors = {
|
|
1341
|
+
day: {
|
|
1342
|
+
background: "0 0% 100%",
|
|
1343
|
+
foreground: "0 0% 9%",
|
|
1344
|
+
card: "0 0% 100%",
|
|
1345
|
+
cardForeground: "0 0% 9%",
|
|
1346
|
+
popover: "0 0% 100%",
|
|
1347
|
+
popoverForeground: "0 0% 9%",
|
|
1348
|
+
border: "0 0% 89.8%",
|
|
1349
|
+
input: "0 0% 89.8%",
|
|
1350
|
+
ring: "0 0% 3.9%"
|
|
1351
|
+
},
|
|
1352
|
+
night: {
|
|
1353
|
+
background: "240 10% 3.9%",
|
|
1354
|
+
// #0b0b10
|
|
1355
|
+
foreground: "0 0% 89.8%",
|
|
1356
|
+
// #e5e7eb
|
|
1357
|
+
card: "240 10% 3.9%",
|
|
1358
|
+
cardForeground: "0 0% 89.8%",
|
|
1359
|
+
popover: "240 10% 5.1%",
|
|
1360
|
+
// #0e1016
|
|
1361
|
+
popoverForeground: "0 0% 89.8%",
|
|
1362
|
+
border: "240 3.7% 15.9%",
|
|
1363
|
+
input: "240 3.7% 15.9%",
|
|
1364
|
+
ring: "240 4.9% 83.9%"
|
|
1365
|
+
}
|
|
1366
|
+
};
|
|
1367
|
+
var cssVariableColorTokens = {
|
|
1368
|
+
day: {
|
|
1369
|
+
...baseColors.day,
|
|
1370
|
+
primary: "hsl(var(--tm-primary))",
|
|
1371
|
+
primaryForeground: "hsl(var(--tm-primary-foreground))",
|
|
1372
|
+
secondary: "hsl(var(--tm-secondary))",
|
|
1373
|
+
secondaryForeground: "hsl(var(--tm-secondary-foreground))",
|
|
1374
|
+
muted: "hsl(var(--muted))",
|
|
1375
|
+
mutedForeground: "hsl(var(--muted-foreground))",
|
|
1376
|
+
accent: "hsl(var(--tm-accent))",
|
|
1377
|
+
accentForeground: "hsl(var(--tm-accent-foreground))",
|
|
1378
|
+
destructive: `hsl(${semanticColors.day.error})`,
|
|
1379
|
+
destructiveForeground: semanticColors.day.errorForeground,
|
|
1380
|
+
chart1: `hsl(${chartColors.day.chart1})`,
|
|
1381
|
+
chart2: `hsl(${chartColors.day.chart2})`,
|
|
1382
|
+
chart3: `hsl(${chartColors.day.chart3})`,
|
|
1383
|
+
chart4: `hsl(${chartColors.day.chart4})`,
|
|
1384
|
+
chart5: `hsl(${chartColors.day.chart5})`
|
|
1385
|
+
},
|
|
1386
|
+
night: {
|
|
1387
|
+
...baseColors.night,
|
|
1388
|
+
primary: "hsl(var(--tm-primary))",
|
|
1389
|
+
primaryForeground: "hsl(var(--tm-primary-foreground))",
|
|
1390
|
+
secondary: "hsl(var(--tm-secondary))",
|
|
1391
|
+
secondaryForeground: "hsl(var(--tm-secondary-foreground))",
|
|
1392
|
+
muted: "hsl(var(--muted))",
|
|
1393
|
+
mutedForeground: "hsl(var(--muted-foreground))",
|
|
1394
|
+
accent: "hsl(var(--tm-accent))",
|
|
1395
|
+
accentForeground: "hsl(var(--tm-accent-foreground))",
|
|
1396
|
+
destructive: `hsl(${semanticColors.night.error})`,
|
|
1397
|
+
destructiveForeground: semanticColors.night.errorForeground,
|
|
1398
|
+
chart1: `hsl(${chartColors.night.chart1})`,
|
|
1399
|
+
chart2: `hsl(${chartColors.night.chart2})`,
|
|
1400
|
+
chart3: `hsl(${chartColors.night.chart3})`,
|
|
1401
|
+
chart4: `hsl(${chartColors.night.chart4})`,
|
|
1402
|
+
chart5: `hsl(${chartColors.night.chart5})`
|
|
1403
|
+
}
|
|
1404
|
+
};
|
|
1405
|
+
({
|
|
1406
|
+
// Primary scale
|
|
1407
|
+
"--primary-50": primaryColors[50],
|
|
1408
|
+
"--primary-100": primaryColors[100],
|
|
1409
|
+
"--primary-200": primaryColors[200],
|
|
1410
|
+
"--primary-300": primaryColors[300],
|
|
1411
|
+
"--primary-400": primaryColors[400],
|
|
1412
|
+
"--primary-500": primaryColors[500],
|
|
1413
|
+
"--primary-600": primaryColors[600],
|
|
1414
|
+
"--primary-700": primaryColors[700],
|
|
1415
|
+
"--primary-800": primaryColors[800],
|
|
1416
|
+
"--primary-900": primaryColors[900],
|
|
1417
|
+
"--primary-950": primaryColors[950],
|
|
1418
|
+
// Accent scale
|
|
1419
|
+
"--accent-50": accentColors[50],
|
|
1420
|
+
"--accent-100": accentColors[100],
|
|
1421
|
+
"--accent-200": accentColors[200],
|
|
1422
|
+
"--accent-300": accentColors[300],
|
|
1423
|
+
"--accent-400": accentColors[400],
|
|
1424
|
+
"--accent-500": accentColors[500],
|
|
1425
|
+
"--accent-600": accentColors[600],
|
|
1426
|
+
"--accent-700": accentColors[700],
|
|
1427
|
+
"--accent-800": accentColors[800],
|
|
1428
|
+
"--accent-900": accentColors[900],
|
|
1429
|
+
"--accent-950": accentColors[950],
|
|
1430
|
+
// Secondary scale
|
|
1431
|
+
"--secondary-50": secondaryColors[50],
|
|
1432
|
+
"--secondary-100": secondaryColors[100],
|
|
1433
|
+
"--secondary-200": secondaryColors[200],
|
|
1434
|
+
"--secondary-300": secondaryColors[300],
|
|
1435
|
+
"--secondary-400": secondaryColors[400],
|
|
1436
|
+
"--secondary-500": secondaryColors[500],
|
|
1437
|
+
"--secondary-600": secondaryColors[600],
|
|
1438
|
+
"--secondary-700": secondaryColors[700],
|
|
1439
|
+
"--secondary-800": secondaryColors[800],
|
|
1440
|
+
"--secondary-900": secondaryColors[900],
|
|
1441
|
+
"--secondary-950": secondaryColors[950]
|
|
1442
|
+
// Surface colors (mode-dependent, set dynamically by theme system)
|
|
1443
|
+
// Note: These are set via updateCSSVariablesFromTokens() in applyMode.ts
|
|
1444
|
+
// Semantic colors (mode-dependent, set dynamically by theme system)
|
|
1445
|
+
// Note: These are set via updateCSSVariablesFromTokens() in applyMode.ts
|
|
1446
|
+
// Text colors (mode-dependent, set dynamically by theme system)
|
|
1447
|
+
// Note: These are set via updateCSSVariablesFromTokens() in applyMode.ts
|
|
1448
|
+
// Chart colors (mode-dependent, set dynamically by theme system)
|
|
1449
|
+
// Note: These are set via updateCSSVariablesFromTokens() in applyMode.ts
|
|
1450
|
+
});
|
|
1451
|
+
var tailwindThemeColors = {
|
|
1452
|
+
// Base colors
|
|
1453
|
+
background: "hsl(var(--background))",
|
|
1454
|
+
foreground: "hsl(var(--foreground))",
|
|
1455
|
+
// Card colors
|
|
1456
|
+
card: {
|
|
1457
|
+
DEFAULT: "hsl(var(--card))",
|
|
1458
|
+
foreground: "hsl(var(--card-foreground))"
|
|
1459
|
+
},
|
|
1460
|
+
// Popover colors
|
|
1461
|
+
popover: {
|
|
1462
|
+
DEFAULT: "hsl(var(--popover))",
|
|
1463
|
+
foreground: "hsl(var(--popover-foreground))"
|
|
1464
|
+
},
|
|
1465
|
+
// Primary colors (using CSS variables)
|
|
1466
|
+
primary: {
|
|
1467
|
+
DEFAULT: "hsl(var(--tm-primary))",
|
|
1468
|
+
foreground: "hsl(var(--tm-primary-foreground))",
|
|
1469
|
+
50: `hsl(var(--primary-50))`,
|
|
1470
|
+
100: `hsl(var(--primary-100))`,
|
|
1471
|
+
200: `hsl(var(--primary-200))`,
|
|
1472
|
+
300: `hsl(var(--primary-300))`,
|
|
1473
|
+
400: `hsl(var(--primary-400))`,
|
|
1474
|
+
500: `hsl(var(--primary-500))`,
|
|
1475
|
+
600: `hsl(var(--primary-600))`,
|
|
1476
|
+
700: `hsl(var(--primary-700))`,
|
|
1477
|
+
800: `hsl(var(--primary-800))`,
|
|
1478
|
+
900: `hsl(var(--primary-900))`,
|
|
1479
|
+
950: `hsl(var(--primary-950))`
|
|
1480
|
+
},
|
|
1481
|
+
// Secondary colors
|
|
1482
|
+
secondary: {
|
|
1483
|
+
DEFAULT: "hsl(var(--tm-secondary))",
|
|
1484
|
+
foreground: "hsl(var(--tm-secondary-foreground))",
|
|
1485
|
+
50: `hsl(var(--secondary-50))`,
|
|
1486
|
+
100: `hsl(var(--secondary-100))`,
|
|
1487
|
+
200: `hsl(var(--secondary-200))`,
|
|
1488
|
+
300: `hsl(var(--secondary-300))`,
|
|
1489
|
+
400: `hsl(var(--secondary-400))`,
|
|
1490
|
+
500: `hsl(var(--secondary-500))`,
|
|
1491
|
+
600: `hsl(var(--secondary-600))`,
|
|
1492
|
+
700: `hsl(var(--secondary-700))`,
|
|
1493
|
+
800: `hsl(var(--secondary-800))`,
|
|
1494
|
+
900: `hsl(var(--secondary-900))`,
|
|
1495
|
+
950: `hsl(var(--secondary-950))`
|
|
1496
|
+
},
|
|
1497
|
+
// Accent colors
|
|
1498
|
+
accent: {
|
|
1499
|
+
DEFAULT: "hsl(var(--tm-accent))",
|
|
1500
|
+
foreground: "hsl(var(--tm-accent-foreground))",
|
|
1501
|
+
50: `hsl(var(--accent-50))`,
|
|
1502
|
+
100: `hsl(var(--accent-100))`,
|
|
1503
|
+
200: `hsl(var(--accent-200))`,
|
|
1504
|
+
300: `hsl(var(--accent-300))`,
|
|
1505
|
+
400: `hsl(var(--accent-400))`,
|
|
1506
|
+
500: `hsl(var(--accent-500))`,
|
|
1507
|
+
600: `hsl(var(--accent-600))`,
|
|
1508
|
+
700: `hsl(var(--accent-700))`,
|
|
1509
|
+
800: `hsl(var(--accent-800))`,
|
|
1510
|
+
900: `hsl(var(--accent-900))`,
|
|
1511
|
+
950: `hsl(var(--accent-950))`
|
|
1512
|
+
},
|
|
1513
|
+
// Muted colors
|
|
1514
|
+
muted: {
|
|
1515
|
+
DEFAULT: "hsl(var(--muted))",
|
|
1516
|
+
foreground: "hsl(var(--muted-foreground))"
|
|
1517
|
+
},
|
|
1518
|
+
// Destructive colors (semantic error)
|
|
1519
|
+
destructive: {
|
|
1520
|
+
DEFAULT: "hsl(var(--destructive))",
|
|
1521
|
+
foreground: "hsl(var(--destructive-foreground))"
|
|
1522
|
+
},
|
|
1523
|
+
// Semantic colors
|
|
1524
|
+
success: {
|
|
1525
|
+
DEFAULT: `hsl(var(--semantic-success))`,
|
|
1526
|
+
foreground: `hsl(var(--semantic-success-foreground))`
|
|
1527
|
+
},
|
|
1528
|
+
error: {
|
|
1529
|
+
DEFAULT: `hsl(var(--semantic-error))`,
|
|
1530
|
+
foreground: `hsl(var(--semantic-error-foreground))`
|
|
1531
|
+
},
|
|
1532
|
+
warning: {
|
|
1533
|
+
DEFAULT: `hsl(var(--semantic-warning))`,
|
|
1534
|
+
foreground: `hsl(var(--semantic-warning-foreground))`
|
|
1535
|
+
},
|
|
1536
|
+
info: {
|
|
1537
|
+
DEFAULT: `hsl(var(--semantic-info))`,
|
|
1538
|
+
foreground: `hsl(var(--semantic-info-foreground))`
|
|
1539
|
+
},
|
|
1540
|
+
// Surface colors
|
|
1541
|
+
surface: {
|
|
1542
|
+
base: `hsl(var(--surface-base))`,
|
|
1543
|
+
elevated1: `hsl(var(--surface-elevated1))`,
|
|
1544
|
+
elevated2: `hsl(var(--surface-elevated2))`,
|
|
1545
|
+
elevated3: `hsl(var(--surface-elevated3))`,
|
|
1546
|
+
overlay: `hsl(var(--surface-overlay))`,
|
|
1547
|
+
glass: `hsl(var(--surface-glass))`
|
|
1548
|
+
},
|
|
1549
|
+
// Text colors
|
|
1550
|
+
text: {
|
|
1551
|
+
primary: `hsl(var(--text-primary))`,
|
|
1552
|
+
secondary: `hsl(var(--text-secondary))`,
|
|
1553
|
+
tertiary: `hsl(var(--text-tertiary))`,
|
|
1554
|
+
muted: `hsl(var(--text-muted))`,
|
|
1555
|
+
destructive: `hsl(var(--destructive))`,
|
|
1556
|
+
accent: `hsl(var(--tm-accent))`,
|
|
1557
|
+
inverse: `hsl(var(--text-inverse))`
|
|
1558
|
+
},
|
|
1559
|
+
// Border and input
|
|
1560
|
+
border: "hsl(var(--border))",
|
|
1561
|
+
input: "hsl(var(--input))",
|
|
1562
|
+
ring: "hsl(var(--ring))",
|
|
1563
|
+
// Chart colors (using CSS variables)
|
|
1564
|
+
chart: {
|
|
1565
|
+
1: `hsl(var(--chart-1))`,
|
|
1566
|
+
2: `hsl(var(--chart-2))`,
|
|
1567
|
+
3: `hsl(var(--chart-3))`,
|
|
1568
|
+
4: `hsl(var(--chart-4))`,
|
|
1569
|
+
5: `hsl(var(--chart-5))`
|
|
1570
|
+
}
|
|
1571
|
+
};
|
|
1572
|
+
|
|
1573
|
+
// src/tokens/motion.ts
|
|
1574
|
+
var durations = {
|
|
1575
|
+
instant: "0ms",
|
|
1576
|
+
fast: "150ms",
|
|
1577
|
+
// 1.5 × base (quick interactions)
|
|
1578
|
+
normal: "300ms",
|
|
1579
|
+
// 3 × base (default)
|
|
1580
|
+
slow: "500ms",
|
|
1581
|
+
// 5 × base (emphasized)
|
|
1582
|
+
slower: "700ms",
|
|
1583
|
+
// 7 × base (very emphasized)
|
|
1584
|
+
slowest: "1000ms",
|
|
1585
|
+
// 10 × base (maximum emphasis)
|
|
1586
|
+
// Additional granular durations
|
|
1587
|
+
"75": "75ms",
|
|
1588
|
+
// Ultra-fast
|
|
1589
|
+
"100": "100ms",
|
|
1590
|
+
// Base unit
|
|
1591
|
+
"200": "200ms",
|
|
1592
|
+
// Fast-normal
|
|
1593
|
+
"250": "250ms",
|
|
1594
|
+
// Between fast and normal
|
|
1595
|
+
"400": "400ms",
|
|
1596
|
+
// Between normal and slow
|
|
1597
|
+
"600": "600ms",
|
|
1598
|
+
// Between slow and slower
|
|
1599
|
+
"800": "800ms"
|
|
1600
|
+
// Between slower and slowest
|
|
1601
|
+
};
|
|
1602
|
+
var easings = {
|
|
1603
|
+
// Linear (no easing)
|
|
1604
|
+
linear: "linear",
|
|
1605
|
+
// Ease-in (accelerate) - cubic-bezier
|
|
1606
|
+
"ease-in": "cubic-bezier(0.4, 0, 1, 1)",
|
|
1607
|
+
// Ease-out (decelerate) - recommended for most UI - cubic-bezier
|
|
1608
|
+
"ease-out": "cubic-bezier(0, 0, 0.2, 1)",
|
|
1609
|
+
// Ease-in-out (accelerate and decelerate)
|
|
1610
|
+
"ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
1611
|
+
// Advanced easing functions
|
|
1612
|
+
bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
|
|
1613
|
+
elastic: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
|
|
1614
|
+
// Material Design easing
|
|
1615
|
+
"ease-out-cubic": "cubic-bezier(0.215, 0.61, 0.355, 1)",
|
|
1616
|
+
"ease-in-cubic": "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
|
|
1617
|
+
"ease-in-out-cubic": "cubic-bezier(0.645, 0.045, 0.355, 1)"
|
|
1618
|
+
};
|
|
1619
|
+
var transitions = {
|
|
1620
|
+
// Fast transitions (quick interactions)
|
|
1621
|
+
fast: `${durations.fast} ${easings["ease-out"]}`,
|
|
1622
|
+
"fast-in": `${durations.fast} ${easings["ease-in"]}`,
|
|
1623
|
+
"fast-out": `${durations.fast} ${easings["ease-out"]}`,
|
|
1624
|
+
"fast-in-out": `${durations.fast} ${easings["ease-in-out"]}`,
|
|
1625
|
+
// Normal transitions (default)
|
|
1626
|
+
normal: `${durations.normal} ${easings["ease-in-out"]}`,
|
|
1627
|
+
"normal-in": `${durations.normal} ${easings["ease-in"]}`,
|
|
1628
|
+
"normal-out": `${durations.normal} ${easings["ease-out"]}`,
|
|
1629
|
+
"normal-in-out": `${durations.normal} ${easings["ease-in-out"]}`,
|
|
1630
|
+
// Slow transitions (emphasized)
|
|
1631
|
+
slow: `${durations.slow} ${easings["ease-in-out"]}`,
|
|
1632
|
+
"slow-in": `${durations.slow} ${easings["ease-in"]}`,
|
|
1633
|
+
"slow-out": `${durations.slow} ${easings["ease-out"]}`,
|
|
1634
|
+
"slow-in-out": `${durations.slow} ${easings["ease-in-out"]}`,
|
|
1635
|
+
// Special transitions
|
|
1636
|
+
bounce: `${durations.normal} ${easings.bounce}`,
|
|
1637
|
+
elastic: `${durations.slow} ${easings.elastic}`,
|
|
1638
|
+
// Default (normal)
|
|
1639
|
+
DEFAULT: `${durations.normal} ${easings["ease-in-out"]}`
|
|
1640
|
+
};
|
|
1641
|
+
var motionCSSVariables = {
|
|
1642
|
+
// Durations
|
|
1643
|
+
"--duration-instant": durations.instant,
|
|
1644
|
+
"--duration-fast": durations.fast,
|
|
1645
|
+
"--duration-normal": durations.normal,
|
|
1646
|
+
"--duration-slow": durations.slow,
|
|
1647
|
+
"--duration-slower": durations.slower,
|
|
1648
|
+
"--duration-slowest": durations.slowest,
|
|
1649
|
+
// Additional granular durations
|
|
1650
|
+
"--duration-75": durations["75"],
|
|
1651
|
+
"--duration-100": durations["100"],
|
|
1652
|
+
"--duration-200": durations["200"],
|
|
1653
|
+
"--duration-250": durations["250"],
|
|
1654
|
+
"--duration-400": durations["400"],
|
|
1655
|
+
"--duration-600": durations["600"],
|
|
1656
|
+
"--duration-800": durations["800"],
|
|
1657
|
+
// Easings
|
|
1658
|
+
"--ease-linear": easings.linear,
|
|
1659
|
+
"--ease-in": easings["ease-in"],
|
|
1660
|
+
"--ease-out": easings["ease-out"],
|
|
1661
|
+
"--ease-in-out": easings["ease-in-out"],
|
|
1662
|
+
"--ease-bounce": easings.bounce,
|
|
1663
|
+
"--ease-elastic": easings.elastic,
|
|
1664
|
+
"--ease-out-cubic": easings["ease-out-cubic"],
|
|
1665
|
+
"--ease-in-cubic": easings["ease-in-cubic"],
|
|
1666
|
+
"--ease-in-out-cubic": easings["ease-in-out-cubic"],
|
|
1667
|
+
// Transitions
|
|
1668
|
+
"--transition-fast": transitions.fast,
|
|
1669
|
+
"--transition-normal": transitions.normal,
|
|
1670
|
+
"--transition-slow": transitions.slow,
|
|
1671
|
+
"--transition-default": transitions.DEFAULT,
|
|
1672
|
+
"--transition-fast-in": transitions["fast-in"],
|
|
1673
|
+
"--transition-fast-out": transitions["fast-out"],
|
|
1674
|
+
"--transition-fast-in-out": transitions["fast-in-out"],
|
|
1675
|
+
"--transition-normal-in": transitions["normal-in"],
|
|
1676
|
+
"--transition-normal-out": transitions["normal-out"],
|
|
1677
|
+
"--transition-normal-in-out": transitions["normal-in-out"],
|
|
1678
|
+
"--transition-slow-in": transitions["slow-in"],
|
|
1679
|
+
"--transition-slow-out": transitions["slow-out"],
|
|
1680
|
+
"--transition-slow-in-out": transitions["slow-in-out"],
|
|
1681
|
+
"--transition-bounce": transitions.bounce,
|
|
1682
|
+
"--transition-elastic": transitions.elastic
|
|
1683
|
+
};
|
|
1684
|
+
|
|
1685
|
+
// src/theme/applyMode.ts
|
|
1686
|
+
var MODE_ATTRIBUTE = "data-mode";
|
|
1687
|
+
var THEME_ATTRIBUTE = "data-theme-name";
|
|
1688
|
+
var MODE_THEME_ATTRIBUTE = "data-theme";
|
|
1689
|
+
var DARK_CLASS = "dark";
|
|
1690
|
+
function getInitialMode(defaultMode = "day", storageKey = "tm_mode", enableSystem = true) {
|
|
1691
|
+
if (typeof window === "undefined") return defaultMode;
|
|
1692
|
+
const root = document.documentElement;
|
|
1693
|
+
const attr = root.getAttribute(MODE_ATTRIBUTE);
|
|
1694
|
+
if (attr === "day" || attr === "night") {
|
|
1695
|
+
return attr;
|
|
1696
|
+
}
|
|
1697
|
+
const themeAttr = root.getAttribute(MODE_THEME_ATTRIBUTE);
|
|
1698
|
+
if (themeAttr === "day" || themeAttr === "night") {
|
|
1699
|
+
return themeAttr;
|
|
1700
|
+
}
|
|
908
1701
|
try {
|
|
909
|
-
const
|
|
910
|
-
if (
|
|
911
|
-
return
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
if (
|
|
1702
|
+
const stored = localStorage.getItem(storageKey);
|
|
1703
|
+
if (stored === "day" || stored === "night") {
|
|
1704
|
+
return stored;
|
|
1705
|
+
}
|
|
1706
|
+
const legacy = localStorage.getItem("theme");
|
|
1707
|
+
if (legacy === "dark") return "night";
|
|
1708
|
+
if (legacy === "light") return "day";
|
|
915
1709
|
} catch {
|
|
916
1710
|
}
|
|
917
|
-
|
|
1711
|
+
if (enableSystem && typeof window !== "undefined") {
|
|
1712
|
+
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
1713
|
+
return prefersDark ? "night" : "day";
|
|
1714
|
+
}
|
|
1715
|
+
return defaultMode;
|
|
918
1716
|
}
|
|
919
|
-
|
|
920
|
-
async function
|
|
921
|
-
if (
|
|
922
|
-
|
|
1717
|
+
var currentThemeOverride = null;
|
|
1718
|
+
async function loadThemeOverride(themeName) {
|
|
1719
|
+
if (themeName === "default") {
|
|
1720
|
+
currentThemeOverride = null;
|
|
1721
|
+
return null;
|
|
1722
|
+
}
|
|
923
1723
|
try {
|
|
924
|
-
const
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
1724
|
+
const theme = await getTheme(themeName);
|
|
1725
|
+
currentThemeOverride = theme;
|
|
1726
|
+
return theme;
|
|
1727
|
+
} catch (error) {
|
|
1728
|
+
console.warn(`Failed to load theme "${themeName}":`, error);
|
|
1729
|
+
currentThemeOverride = null;
|
|
1730
|
+
return null;
|
|
928
1731
|
}
|
|
929
1732
|
}
|
|
930
|
-
function
|
|
931
|
-
|
|
1733
|
+
function mergeColorScale(base, override) {
|
|
1734
|
+
if (!override) return base;
|
|
1735
|
+
return { ...base, ...override };
|
|
932
1736
|
}
|
|
933
|
-
function
|
|
934
|
-
|
|
1737
|
+
function mergeObject(base, override) {
|
|
1738
|
+
if (!override) return base;
|
|
1739
|
+
return { ...base, ...override };
|
|
935
1740
|
}
|
|
936
|
-
function
|
|
937
|
-
const
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
day:
|
|
951
|
-
night:
|
|
1741
|
+
function getMergedTokens(_mode) {
|
|
1742
|
+
const override = currentThemeOverride;
|
|
1743
|
+
const primaryColors2 = mergeColorScale(primaryColors, override?.primaryColors);
|
|
1744
|
+
const accentColors2 = mergeColorScale(accentColors, override?.accentColors);
|
|
1745
|
+
const secondaryColors2 = mergeColorScale(secondaryColors, override?.secondaryColors);
|
|
1746
|
+
const baseColors2 = {
|
|
1747
|
+
day: mergeObject(baseColors.day, override?.baseColorsDay),
|
|
1748
|
+
night: mergeObject(baseColors.night, override?.baseColorsNight)
|
|
1749
|
+
};
|
|
1750
|
+
const surfaceColors2 = {
|
|
1751
|
+
day: mergeObject(surfaceColors.day, override?.surfaceColorsDay),
|
|
1752
|
+
night: mergeObject(surfaceColors.night, override?.surfaceColorsNight)
|
|
1753
|
+
};
|
|
1754
|
+
const semanticColors2 = {
|
|
1755
|
+
day: mergeObject(semanticColors.day, override?.semanticColorsDay),
|
|
1756
|
+
night: mergeObject(semanticColors.night, override?.semanticColorsNight)
|
|
1757
|
+
};
|
|
1758
|
+
const textColors2 = {
|
|
1759
|
+
day: mergeObject(textColors.day, override?.textColorsDay),
|
|
1760
|
+
night: mergeObject(textColors.night, override?.textColorsNight)
|
|
1761
|
+
};
|
|
1762
|
+
const chartColors2 = {
|
|
1763
|
+
day: chartColors.day,
|
|
1764
|
+
night: chartColors.night
|
|
952
1765
|
};
|
|
953
1766
|
return {
|
|
954
|
-
primaryColors:
|
|
955
|
-
accentColors:
|
|
956
|
-
secondaryColors:
|
|
957
|
-
baseColors:
|
|
958
|
-
surfaceColors:
|
|
959
|
-
semanticColors:
|
|
960
|
-
textColors:
|
|
961
|
-
chartColors:
|
|
1767
|
+
primaryColors: primaryColors2,
|
|
1768
|
+
accentColors: accentColors2,
|
|
1769
|
+
secondaryColors: secondaryColors2,
|
|
1770
|
+
baseColors: baseColors2,
|
|
1771
|
+
surfaceColors: surfaceColors2,
|
|
1772
|
+
semanticColors: semanticColors2,
|
|
1773
|
+
textColors: textColors2,
|
|
1774
|
+
chartColors: chartColors2
|
|
962
1775
|
};
|
|
963
1776
|
}
|
|
964
|
-
function
|
|
965
|
-
if (typeof document
|
|
966
|
-
const
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
1777
|
+
function updateCSSVariablesFromTokens(mode) {
|
|
1778
|
+
if (typeof document === "undefined") return;
|
|
1779
|
+
const root = document.documentElement;
|
|
1780
|
+
const tokens = getMergedTokens();
|
|
1781
|
+
const {
|
|
1782
|
+
primaryColors: primaryColors2,
|
|
1783
|
+
accentColors: accentColors2,
|
|
1784
|
+
secondaryColors: secondaryColors2,
|
|
1785
|
+
baseColors: baseColors2,
|
|
1786
|
+
surfaceColors: surfaceColors2,
|
|
1787
|
+
semanticColors: semanticColors2,
|
|
1788
|
+
textColors: textColors2,
|
|
1789
|
+
chartColors: chartColors2
|
|
1790
|
+
} = tokens;
|
|
1791
|
+
const base = baseColors2[mode];
|
|
1792
|
+
root.style.setProperty("--background", base.background);
|
|
1793
|
+
root.style.setProperty("--foreground", base.foreground);
|
|
1794
|
+
root.style.setProperty("--card", base.card);
|
|
1795
|
+
root.style.setProperty("--card-foreground", base.cardForeground);
|
|
1796
|
+
root.style.setProperty("--popover", base.popover);
|
|
1797
|
+
root.style.setProperty("--popover-foreground", base.popoverForeground);
|
|
1798
|
+
root.style.setProperty("--border", base.border);
|
|
1799
|
+
root.style.setProperty("--input", base.input);
|
|
1800
|
+
root.style.setProperty("--ring", base.ring);
|
|
1801
|
+
const surface = surfaceColors2[mode];
|
|
1802
|
+
root.style.setProperty("--surface-base", surface.base);
|
|
1803
|
+
root.style.setProperty("--surface-elevated1", surface.elevated1);
|
|
1804
|
+
root.style.setProperty("--surface-elevated2", surface.elevated2);
|
|
1805
|
+
root.style.setProperty("--surface-elevated3", surface.elevated3);
|
|
1806
|
+
root.style.setProperty("--surface-overlay", surface.overlay);
|
|
1807
|
+
root.style.setProperty("--surface-glass", surface.glass);
|
|
1808
|
+
const semantic = semanticColors2[mode];
|
|
1809
|
+
root.style.setProperty("--semantic-success", semantic.success);
|
|
1810
|
+
root.style.setProperty("--semantic-success-foreground", semantic.successForeground);
|
|
1811
|
+
root.style.setProperty("--semantic-error", semantic.error);
|
|
1812
|
+
root.style.setProperty("--semantic-error-foreground", semantic.errorForeground);
|
|
1813
|
+
root.style.setProperty("--semantic-warning", semantic.warning);
|
|
1814
|
+
root.style.setProperty("--semantic-warning-foreground", semantic.warningForeground);
|
|
1815
|
+
root.style.setProperty("--semantic-info", semantic.info);
|
|
1816
|
+
root.style.setProperty("--semantic-info-foreground", semantic.infoForeground);
|
|
1817
|
+
const text = textColors2[mode];
|
|
1818
|
+
root.style.setProperty("--text-primary", text.primary);
|
|
1819
|
+
root.style.setProperty("--text-secondary", text.secondary);
|
|
1820
|
+
root.style.setProperty("--text-tertiary", text.tertiary);
|
|
1821
|
+
root.style.setProperty("--text-muted", text.muted);
|
|
1822
|
+
root.style.setProperty("--text-inverse", text.inverse);
|
|
1823
|
+
const chart = chartColors2[mode];
|
|
1824
|
+
root.style.setProperty("--chart-1", chart.chart1);
|
|
1825
|
+
root.style.setProperty("--chart-2", chart.chart2);
|
|
1826
|
+
root.style.setProperty("--chart-3", chart.chart3);
|
|
1827
|
+
root.style.setProperty("--chart-4", chart.chart4);
|
|
1828
|
+
root.style.setProperty("--chart-5", chart.chart5);
|
|
1829
|
+
root.style.setProperty("--primary-50", primaryColors2[50]);
|
|
1830
|
+
root.style.setProperty("--primary-100", primaryColors2[100]);
|
|
1831
|
+
root.style.setProperty("--primary-200", primaryColors2[200]);
|
|
1832
|
+
root.style.setProperty("--primary-300", primaryColors2[300]);
|
|
1833
|
+
root.style.setProperty("--primary-400", primaryColors2[400]);
|
|
1834
|
+
root.style.setProperty("--primary-500", primaryColors2[500]);
|
|
1835
|
+
root.style.setProperty("--primary-600", primaryColors2[600]);
|
|
1836
|
+
root.style.setProperty("--primary-700", primaryColors2[700]);
|
|
1837
|
+
root.style.setProperty("--primary-800", primaryColors2[800]);
|
|
1838
|
+
root.style.setProperty("--primary-900", primaryColors2[900]);
|
|
1839
|
+
root.style.setProperty("--primary-950", primaryColors2[950]);
|
|
1840
|
+
root.style.setProperty("--accent-50", accentColors2[50]);
|
|
1841
|
+
root.style.setProperty("--accent-100", accentColors2[100]);
|
|
1842
|
+
root.style.setProperty("--accent-200", accentColors2[200]);
|
|
1843
|
+
root.style.setProperty("--accent-300", accentColors2[300]);
|
|
1844
|
+
root.style.setProperty("--accent-400", accentColors2[400]);
|
|
1845
|
+
root.style.setProperty("--accent-500", accentColors2[500]);
|
|
1846
|
+
root.style.setProperty("--accent-600", accentColors2[600]);
|
|
1847
|
+
root.style.setProperty("--accent-700", accentColors2[700]);
|
|
1848
|
+
root.style.setProperty("--accent-800", accentColors2[800]);
|
|
1849
|
+
root.style.setProperty("--accent-900", accentColors2[900]);
|
|
1850
|
+
root.style.setProperty("--accent-950", accentColors2[950]);
|
|
1851
|
+
root.style.setProperty("--secondary-50", secondaryColors2[50]);
|
|
1852
|
+
root.style.setProperty("--secondary-100", secondaryColors2[100]);
|
|
1853
|
+
root.style.setProperty("--secondary-200", secondaryColors2[200]);
|
|
1854
|
+
root.style.setProperty("--secondary-300", secondaryColors2[300]);
|
|
1855
|
+
root.style.setProperty("--secondary-400", secondaryColors2[400]);
|
|
1856
|
+
root.style.setProperty("--secondary-500", secondaryColors2[500]);
|
|
1857
|
+
root.style.setProperty("--secondary-600", secondaryColors2[600]);
|
|
1858
|
+
root.style.setProperty("--secondary-700", secondaryColors2[700]);
|
|
1859
|
+
root.style.setProperty("--secondary-800", secondaryColors2[800]);
|
|
1860
|
+
root.style.setProperty("--secondary-900", secondaryColors2[900]);
|
|
1861
|
+
root.style.setProperty("--secondary-950", secondaryColors2[950]);
|
|
1862
|
+
if (mode === "day") {
|
|
1863
|
+
root.style.setProperty("--tm-primary", secondaryColors2[500]);
|
|
1864
|
+
root.style.setProperty("--tm-primary-foreground", "0 0% 100%");
|
|
1865
|
+
root.style.setProperty("--tm-secondary", "0 0% 95.7%");
|
|
1866
|
+
root.style.setProperty("--tm-secondary-foreground", "0 0% 6.7%");
|
|
1867
|
+
root.style.setProperty("--tm-accent", "0 0% 89.8%");
|
|
1868
|
+
root.style.setProperty("--tm-accent-foreground", "0 0% 6.7%");
|
|
1869
|
+
} else {
|
|
1870
|
+
root.style.setProperty("--tm-primary", accentColors2[600]);
|
|
1871
|
+
root.style.setProperty("--tm-primary-foreground", "0 0% 100%");
|
|
1872
|
+
root.style.setProperty("--tm-secondary", "240 10% 7%");
|
|
1873
|
+
root.style.setProperty("--tm-secondary-foreground", "0 0% 89.8%");
|
|
1874
|
+
root.style.setProperty("--tm-accent", "240 10% 10%");
|
|
1875
|
+
root.style.setProperty("--tm-accent-foreground", "0 0% 89.8%");
|
|
1876
|
+
}
|
|
1877
|
+
root.style.setProperty("--muted", base.card);
|
|
1878
|
+
root.style.setProperty("--muted-foreground", base.cardForeground);
|
|
1879
|
+
root.style.setProperty("--destructive", semantic.error);
|
|
1880
|
+
root.style.setProperty("--destructive-foreground", semantic.errorForeground);
|
|
1881
|
+
Object.entries(motionCSSVariables).forEach(([key, value]) => {
|
|
1882
|
+
root.style.setProperty(key, value);
|
|
986
1883
|
});
|
|
987
1884
|
}
|
|
988
|
-
async function
|
|
989
|
-
if (typeof document
|
|
990
|
-
await
|
|
991
|
-
const
|
|
992
|
-
if (
|
|
1885
|
+
async function applyDocumentTheme(mode, themeName = "default", brandId = null) {
|
|
1886
|
+
if (typeof document === "undefined") return;
|
|
1887
|
+
await loadThemeOverride(themeName);
|
|
1888
|
+
const currentBrand = getActiveBrand();
|
|
1889
|
+
if (currentBrand && (!brandId || currentBrand.id !== brandId)) {
|
|
1890
|
+
removeBrandOverrides(currentBrand.namespace);
|
|
1891
|
+
}
|
|
1892
|
+
if (brandId) {
|
|
993
1893
|
try {
|
|
994
|
-
const
|
|
995
|
-
|
|
996
|
-
} catch (
|
|
997
|
-
console.warn(`Failed to apply brand "${
|
|
1894
|
+
const brand = await loadBrand(brandId);
|
|
1895
|
+
applyBrandOverrides(brand, mode);
|
|
1896
|
+
} catch (error) {
|
|
1897
|
+
console.warn(`Failed to apply brand "${brandId}":`, error);
|
|
998
1898
|
}
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
}
|
|
1009
|
-
|
|
1899
|
+
}
|
|
1900
|
+
const { documentElement: root, body } = document;
|
|
1901
|
+
root.setAttribute(MODE_ATTRIBUTE, mode);
|
|
1902
|
+
root.setAttribute(MODE_THEME_ATTRIBUTE, mode);
|
|
1903
|
+
root.setAttribute(THEME_ATTRIBUTE, themeName);
|
|
1904
|
+
if (mode === "night") {
|
|
1905
|
+
root.classList.add(DARK_CLASS);
|
|
1906
|
+
} else {
|
|
1907
|
+
root.classList.remove(DARK_CLASS);
|
|
1908
|
+
}
|
|
1909
|
+
updateCSSVariablesFromTokens(mode);
|
|
1910
|
+
const tokens = getMergedTokens();
|
|
1911
|
+
const { background, foreground } = tokens.baseColors[mode];
|
|
1912
|
+
if (body) {
|
|
1913
|
+
body.dataset.mode = mode;
|
|
1914
|
+
body.dataset.theme = themeName;
|
|
1915
|
+
if (brandId) {
|
|
1916
|
+
body.dataset.brand = brandId;
|
|
1917
|
+
} else {
|
|
1918
|
+
body.removeAttribute("data-brand");
|
|
1919
|
+
}
|
|
1920
|
+
body.style.backgroundColor = `hsl(${background})`;
|
|
1921
|
+
body.style.color = `hsl(${foreground})`;
|
|
1922
|
+
}
|
|
1010
1923
|
}
|
|
1011
|
-
function
|
|
1012
|
-
if (typeof window
|
|
1013
|
-
const
|
|
1014
|
-
|
|
1015
|
-
|
|
1924
|
+
function getInitialTheme(defaultTheme2 = "default", storageKey = "tm_theme") {
|
|
1925
|
+
if (typeof window === "undefined") return defaultTheme2;
|
|
1926
|
+
const root = document.documentElement;
|
|
1927
|
+
const attr = root.getAttribute(THEME_ATTRIBUTE);
|
|
1928
|
+
if (attr === "default" || attr === "dark" || attr === "brand") {
|
|
1929
|
+
return attr;
|
|
1930
|
+
}
|
|
1016
1931
|
try {
|
|
1017
|
-
const
|
|
1018
|
-
if (
|
|
1019
|
-
return
|
|
1932
|
+
const stored = localStorage.getItem(storageKey);
|
|
1933
|
+
if (stored === "default" || stored === "dark" || stored === "brand") {
|
|
1934
|
+
return stored;
|
|
1935
|
+
}
|
|
1020
1936
|
} catch {
|
|
1021
1937
|
}
|
|
1022
|
-
return
|
|
1938
|
+
return defaultTheme2;
|
|
1023
1939
|
}
|
|
1024
|
-
function
|
|
1025
|
-
if (
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1940
|
+
function persistMode(mode, storageKey = "tm_mode") {
|
|
1941
|
+
if (typeof window === "undefined") return;
|
|
1942
|
+
try {
|
|
1943
|
+
localStorage.setItem(storageKey, mode);
|
|
1944
|
+
localStorage.setItem("theme", mode === "night" ? "dark" : "light");
|
|
1945
|
+
} catch {
|
|
1946
|
+
}
|
|
1030
1947
|
}
|
|
1031
|
-
function
|
|
1032
|
-
if (
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1948
|
+
function persistTheme(theme, storageKey = "tm_theme") {
|
|
1949
|
+
if (typeof window === "undefined") return;
|
|
1950
|
+
try {
|
|
1951
|
+
localStorage.setItem(storageKey, theme);
|
|
1952
|
+
} catch {
|
|
1953
|
+
}
|
|
1037
1954
|
}
|
|
1038
|
-
function
|
|
1039
|
-
if (typeof window
|
|
1040
|
-
const
|
|
1041
|
-
|
|
1042
|
-
|
|
1955
|
+
function getInitialBrand(defaultBrand = null, storageKey = "tm_brand") {
|
|
1956
|
+
if (typeof window === "undefined") return defaultBrand;
|
|
1957
|
+
const root = document.documentElement;
|
|
1958
|
+
const attr = root.getAttribute("data-brand");
|
|
1959
|
+
if (attr) {
|
|
1960
|
+
return attr;
|
|
1961
|
+
}
|
|
1043
1962
|
try {
|
|
1044
|
-
const
|
|
1045
|
-
if (
|
|
1046
|
-
return
|
|
1963
|
+
const stored = localStorage.getItem(storageKey);
|
|
1964
|
+
if (stored) {
|
|
1965
|
+
return stored;
|
|
1966
|
+
}
|
|
1047
1967
|
} catch {
|
|
1048
1968
|
}
|
|
1049
|
-
return
|
|
1969
|
+
return defaultBrand;
|
|
1050
1970
|
}
|
|
1051
|
-
function
|
|
1052
|
-
if (
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1971
|
+
function persistBrand(brandId, storageKey = "tm_brand") {
|
|
1972
|
+
if (typeof window === "undefined") return;
|
|
1973
|
+
try {
|
|
1974
|
+
if (brandId) {
|
|
1975
|
+
localStorage.setItem(storageKey, brandId);
|
|
1976
|
+
} else {
|
|
1977
|
+
localStorage.removeItem(storageKey);
|
|
1056
1978
|
}
|
|
1979
|
+
} catch {
|
|
1980
|
+
}
|
|
1057
1981
|
}
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1982
|
+
|
|
1983
|
+
// src/theme/registry.ts
|
|
1984
|
+
var themeRegistry = /* @__PURE__ */ new Map();
|
|
1985
|
+
function registerTheme(entry) {
|
|
1986
|
+
themeRegistry.set(entry.metadata.id, entry);
|
|
1061
1987
|
}
|
|
1062
|
-
function
|
|
1063
|
-
|
|
1064
|
-
return (e = S.get(r)) == null ? void 0 : e.metadata;
|
|
1988
|
+
function getThemeMetadata(id) {
|
|
1989
|
+
return themeRegistry.get(id)?.metadata;
|
|
1065
1990
|
}
|
|
1066
|
-
function
|
|
1067
|
-
return Array.from(
|
|
1991
|
+
function getAllThemes() {
|
|
1992
|
+
return Array.from(themeRegistry.values()).filter((entry) => entry.enabled !== false).map((entry) => entry.metadata);
|
|
1068
1993
|
}
|
|
1069
|
-
function
|
|
1070
|
-
return
|
|
1994
|
+
function getThemesByCategory(category) {
|
|
1995
|
+
return getAllThemes().filter((theme) => theme.category === category);
|
|
1071
1996
|
}
|
|
1072
|
-
function
|
|
1073
|
-
return
|
|
1997
|
+
function themeExists(id) {
|
|
1998
|
+
return themeRegistry.has(id);
|
|
1074
1999
|
}
|
|
1075
|
-
async function
|
|
1076
|
-
const
|
|
1077
|
-
if (!
|
|
1078
|
-
throw new Error(`Theme "${
|
|
1079
|
-
|
|
1080
|
-
|
|
2000
|
+
async function loadTheme(id) {
|
|
2001
|
+
const entry = themeRegistry.get(id);
|
|
2002
|
+
if (!entry) {
|
|
2003
|
+
throw new Error(`Theme "${id}" not found in registry`);
|
|
2004
|
+
}
|
|
2005
|
+
if (entry.enabled === false) {
|
|
2006
|
+
throw new Error(`Theme "${id}" is disabled`);
|
|
2007
|
+
}
|
|
1081
2008
|
try {
|
|
1082
|
-
|
|
1083
|
-
|
|
2009
|
+
const module = await entry.loader();
|
|
2010
|
+
return module.default;
|
|
2011
|
+
} catch (error) {
|
|
1084
2012
|
throw new Error(
|
|
1085
|
-
`Failed to load theme "${
|
|
2013
|
+
`Failed to load theme "${id}": ${error instanceof Error ? error.message : String(error)}`
|
|
1086
2014
|
);
|
|
1087
2015
|
}
|
|
1088
2016
|
}
|
|
1089
|
-
function
|
|
1090
|
-
|
|
2017
|
+
function initializeDefaultThemes() {
|
|
2018
|
+
registerTheme({
|
|
1091
2019
|
metadata: {
|
|
1092
2020
|
id: "default",
|
|
1093
2021
|
name: "Default",
|
|
@@ -1095,9 +2023,13 @@ function Re() {
|
|
|
1095
2023
|
category: "default",
|
|
1096
2024
|
version: "1.0.0"
|
|
1097
2025
|
},
|
|
1098
|
-
loader: async () =>
|
|
1099
|
-
|
|
1100
|
-
|
|
2026
|
+
loader: async () => {
|
|
2027
|
+
const m = await Promise.resolve().then(() => (init_default(), default_exports));
|
|
2028
|
+
return { default: { ...m.defaultTheme, id: "default", name: "Default" } };
|
|
2029
|
+
},
|
|
2030
|
+
enabled: true
|
|
2031
|
+
});
|
|
2032
|
+
registerTheme({
|
|
1101
2033
|
metadata: {
|
|
1102
2034
|
id: "dark",
|
|
1103
2035
|
name: "Dark",
|
|
@@ -1105,9 +2037,13 @@ function Re() {
|
|
|
1105
2037
|
category: "default",
|
|
1106
2038
|
version: "1.0.0"
|
|
1107
2039
|
},
|
|
1108
|
-
loader: async () =>
|
|
1109
|
-
|
|
1110
|
-
|
|
2040
|
+
loader: async () => {
|
|
2041
|
+
const m = await Promise.resolve().then(() => (init_dark(), dark_exports));
|
|
2042
|
+
return { default: { ...m.darkTheme, id: "dark", name: "Dark" } };
|
|
2043
|
+
},
|
|
2044
|
+
enabled: true
|
|
2045
|
+
});
|
|
2046
|
+
registerTheme({
|
|
1111
2047
|
metadata: {
|
|
1112
2048
|
id: "brand",
|
|
1113
2049
|
name: "Brand",
|
|
@@ -1115,35 +2051,57 @@ function Re() {
|
|
|
1115
2051
|
category: "brand",
|
|
1116
2052
|
version: "1.0.0"
|
|
1117
2053
|
},
|
|
1118
|
-
loader: async () =>
|
|
1119
|
-
|
|
2054
|
+
loader: async () => {
|
|
2055
|
+
const m = await Promise.resolve().then(() => (init_brand(), brand_exports));
|
|
2056
|
+
return { default: { ...m.brandTheme, id: "brand", name: "Brand" } };
|
|
2057
|
+
},
|
|
2058
|
+
enabled: true
|
|
1120
2059
|
});
|
|
1121
2060
|
}
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
2061
|
+
initializeDefaultThemes();
|
|
2062
|
+
|
|
2063
|
+
// src/theme/schema.ts
|
|
2064
|
+
var REQUIRED_FIELDS = ["id", "name"];
|
|
2065
|
+
function validateThemeSchema(theme) {
|
|
2066
|
+
const errors = [];
|
|
2067
|
+
const warnings = [];
|
|
2068
|
+
if (!theme || typeof theme !== "object") {
|
|
1127
2069
|
return {
|
|
1128
|
-
valid:
|
|
2070
|
+
valid: false,
|
|
1129
2071
|
errors: ["Theme must be an object"],
|
|
1130
2072
|
warnings: []
|
|
1131
2073
|
};
|
|
1132
|
-
const t = r;
|
|
1133
|
-
for (const o of Be)
|
|
1134
|
-
(!(o in t) || !t[o]) && e.push(`Missing required field: ${o}`);
|
|
1135
|
-
if (t.id && typeof t.id == "string" && (/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(t.id) || e.push(
|
|
1136
|
-
`Invalid theme ID format: "${t.id}". Must be kebab-case (e.g., "ocean-blue")`
|
|
1137
|
-
)), t.name && typeof t.name != "string" && e.push("Theme name must be a string"), t.category) {
|
|
1138
|
-
const o = ["default", "brand", "seasonal", "custom"];
|
|
1139
|
-
o.includes(t.category) || e.push(
|
|
1140
|
-
`Invalid category: "${t.category}". Must be one of: ${o.join(", ")}`
|
|
1141
|
-
);
|
|
1142
2074
|
}
|
|
1143
|
-
const
|
|
1144
|
-
for (const
|
|
1145
|
-
if (
|
|
1146
|
-
|
|
2075
|
+
const themeObj = theme;
|
|
2076
|
+
for (const field of REQUIRED_FIELDS) {
|
|
2077
|
+
if (!(field in themeObj) || !themeObj[field]) {
|
|
2078
|
+
errors.push(`Missing required field: ${field}`);
|
|
2079
|
+
}
|
|
2080
|
+
}
|
|
2081
|
+
if (themeObj.id && typeof themeObj.id === "string") {
|
|
2082
|
+
const idRegex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
|
|
2083
|
+
if (!idRegex.test(themeObj.id)) {
|
|
2084
|
+
errors.push(
|
|
2085
|
+
`Invalid theme ID format: "${themeObj.id}". Must be kebab-case (e.g., "ocean-blue")`
|
|
2086
|
+
);
|
|
2087
|
+
}
|
|
2088
|
+
}
|
|
2089
|
+
if (themeObj.name && typeof themeObj.name !== "string") {
|
|
2090
|
+
errors.push("Theme name must be a string");
|
|
2091
|
+
}
|
|
2092
|
+
if (themeObj.category) {
|
|
2093
|
+
const validCategories = ["default", "brand", "seasonal", "custom"];
|
|
2094
|
+
if (!validCategories.includes(themeObj.category)) {
|
|
2095
|
+
errors.push(
|
|
2096
|
+
`Invalid category: "${themeObj.category}". Must be one of: ${validCategories.join(", ")}`
|
|
2097
|
+
);
|
|
2098
|
+
}
|
|
2099
|
+
}
|
|
2100
|
+
const colorScaleFields = ["primaryColors", "accentColors", "secondaryColors"];
|
|
2101
|
+
for (const field of colorScaleFields) {
|
|
2102
|
+
if (themeObj[field]) {
|
|
2103
|
+
const scale = themeObj[field];
|
|
2104
|
+
const validKeys = [
|
|
1147
2105
|
"50",
|
|
1148
2106
|
"100",
|
|
1149
2107
|
"200",
|
|
@@ -1156,95 +2114,125 @@ function pe(r) {
|
|
|
1156
2114
|
"900",
|
|
1157
2115
|
"950"
|
|
1158
2116
|
];
|
|
1159
|
-
for (const
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
2117
|
+
for (const key of Object.keys(scale)) {
|
|
2118
|
+
if (!validKeys.includes(key)) {
|
|
2119
|
+
warnings.push(
|
|
2120
|
+
`Invalid color scale key in ${field}: ${key}. Valid keys: ${validKeys.join(", ")}`
|
|
2121
|
+
);
|
|
2122
|
+
}
|
|
2123
|
+
if (typeof scale[key] !== "string") {
|
|
2124
|
+
errors.push(`Color value in ${field}.${key} must be a string (HSL format)`);
|
|
2125
|
+
}
|
|
2126
|
+
}
|
|
1163
2127
|
}
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
2128
|
+
}
|
|
2129
|
+
if (themeObj.version && typeof themeObj.version === "string") {
|
|
2130
|
+
const semverRegex = /^\d+\.\d+\.\d+$/;
|
|
2131
|
+
if (!semverRegex.test(themeObj.version)) {
|
|
2132
|
+
warnings.push(
|
|
2133
|
+
`Invalid version format: "${themeObj.version}". Should be semver (e.g., "1.0.0")`
|
|
2134
|
+
);
|
|
2135
|
+
}
|
|
2136
|
+
}
|
|
2137
|
+
return {
|
|
2138
|
+
valid: errors.length === 0,
|
|
2139
|
+
errors,
|
|
2140
|
+
warnings
|
|
1170
2141
|
};
|
|
1171
2142
|
}
|
|
1172
|
-
function
|
|
1173
|
-
|
|
2143
|
+
function isThemeSchema(obj) {
|
|
2144
|
+
const validation = validateThemeSchema(obj);
|
|
2145
|
+
return validation.valid;
|
|
1174
2146
|
}
|
|
1175
|
-
function
|
|
2147
|
+
function createMinimalThemeSchema(id, name) {
|
|
1176
2148
|
return {
|
|
1177
|
-
id
|
|
1178
|
-
name
|
|
1179
|
-
description: `Custom theme: ${
|
|
2149
|
+
id,
|
|
2150
|
+
name,
|
|
2151
|
+
description: `Custom theme: ${name}`,
|
|
1180
2152
|
category: "custom",
|
|
1181
2153
|
version: "1.0.0"
|
|
1182
2154
|
};
|
|
1183
2155
|
}
|
|
1184
|
-
|
|
2156
|
+
|
|
2157
|
+
// src/theme/loader.ts
|
|
2158
|
+
var DEFAULT_OPTIONS = {
|
|
1185
2159
|
fallbackThemeId: "default",
|
|
1186
|
-
validate:
|
|
1187
|
-
throwOnError:
|
|
2160
|
+
validate: true,
|
|
2161
|
+
throwOnError: false
|
|
1188
2162
|
};
|
|
1189
|
-
async function
|
|
1190
|
-
const
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
2163
|
+
async function loadThemeSafe(themeId, options = {}) {
|
|
2164
|
+
const opts = { ...DEFAULT_OPTIONS, ...options };
|
|
2165
|
+
const warnings = [];
|
|
2166
|
+
if (!themeExists(themeId)) {
|
|
2167
|
+
if (opts.throwOnError) {
|
|
2168
|
+
throw new Error(`Theme "${themeId}" not found`);
|
|
2169
|
+
}
|
|
2170
|
+
if (opts.fallbackThemeId && themeExists(opts.fallbackThemeId)) {
|
|
2171
|
+
warnings.push(`Theme "${themeId}" not found, using fallback "${opts.fallbackThemeId}"`);
|
|
2172
|
+
return loadThemeSafe(opts.fallbackThemeId, { ...opts, throwOnError: false });
|
|
2173
|
+
}
|
|
2174
|
+
throw new Error(`Theme "${themeId}" not found and no fallback available`);
|
|
1197
2175
|
}
|
|
1198
2176
|
try {
|
|
1199
|
-
const
|
|
1200
|
-
if (
|
|
1201
|
-
const
|
|
1202
|
-
if (!
|
|
1203
|
-
if (
|
|
1204
|
-
throw new Error(`Theme "${
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
2177
|
+
const theme = await loadTheme(themeId);
|
|
2178
|
+
if (opts.validate) {
|
|
2179
|
+
const validation = validateThemeSchema(theme);
|
|
2180
|
+
if (!validation.valid) {
|
|
2181
|
+
if (opts.throwOnError) {
|
|
2182
|
+
throw new Error(`Theme "${themeId}" validation failed: ${validation.errors.join(", ")}`);
|
|
2183
|
+
}
|
|
2184
|
+
if (opts.fallbackThemeId && themeExists(opts.fallbackThemeId)) {
|
|
2185
|
+
warnings.push(
|
|
2186
|
+
`Theme "${themeId}" validation failed: ${validation.errors.join(", ")}. Using fallback "${opts.fallbackThemeId}"`
|
|
2187
|
+
);
|
|
2188
|
+
return loadThemeSafe(opts.fallbackThemeId, { ...opts, throwOnError: false });
|
|
2189
|
+
}
|
|
2190
|
+
throw new Error(`Theme "${themeId}" validation failed: ${validation.errors.join(", ")}`);
|
|
1210
2191
|
}
|
|
1211
|
-
|
|
2192
|
+
warnings.push(...validation.warnings);
|
|
1212
2193
|
}
|
|
1213
2194
|
return {
|
|
1214
|
-
theme
|
|
1215
|
-
usedFallback:
|
|
1216
|
-
warnings
|
|
2195
|
+
theme,
|
|
2196
|
+
usedFallback: false,
|
|
2197
|
+
warnings
|
|
1217
2198
|
};
|
|
1218
|
-
} catch (
|
|
1219
|
-
if (
|
|
1220
|
-
throw
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
|
|
2199
|
+
} catch (error) {
|
|
2200
|
+
if (opts.throwOnError) {
|
|
2201
|
+
throw error;
|
|
2202
|
+
}
|
|
2203
|
+
if (opts.fallbackThemeId && themeExists(opts.fallbackThemeId) && opts.fallbackThemeId !== themeId) {
|
|
2204
|
+
warnings.push(
|
|
2205
|
+
`Failed to load theme "${themeId}": ${error instanceof Error ? error.message : String(error)}. Using fallback "${opts.fallbackThemeId}"`
|
|
2206
|
+
);
|
|
2207
|
+
return loadThemeSafe(opts.fallbackThemeId, { ...opts, throwOnError: false });
|
|
2208
|
+
}
|
|
2209
|
+
throw error;
|
|
1226
2210
|
}
|
|
1227
2211
|
}
|
|
1228
|
-
async function
|
|
1229
|
-
const
|
|
1230
|
-
(
|
|
2212
|
+
async function preloadThemes(themeIds) {
|
|
2213
|
+
const loadPromises = themeIds.map(
|
|
2214
|
+
(id) => loadThemeSafe(id, { validate: false, throwOnError: false }).catch(() => {
|
|
1231
2215
|
})
|
|
1232
2216
|
);
|
|
1233
|
-
await Promise.all(
|
|
2217
|
+
await Promise.all(loadPromises);
|
|
1234
2218
|
}
|
|
1235
|
-
function
|
|
1236
|
-
return
|
|
2219
|
+
function getAvailableThemeIds() {
|
|
2220
|
+
return getAllThemes().map((theme) => theme.id);
|
|
1237
2221
|
}
|
|
1238
|
-
async function
|
|
1239
|
-
if (!
|
|
1240
|
-
return
|
|
2222
|
+
async function canLoadTheme(themeId) {
|
|
2223
|
+
if (!themeExists(themeId)) {
|
|
2224
|
+
return false;
|
|
2225
|
+
}
|
|
1241
2226
|
try {
|
|
1242
|
-
|
|
2227
|
+
await loadThemeSafe(themeId, { validate: false, throwOnError: true });
|
|
2228
|
+
return true;
|
|
1243
2229
|
} catch {
|
|
1244
|
-
return
|
|
2230
|
+
return false;
|
|
1245
2231
|
}
|
|
1246
2232
|
}
|
|
1247
|
-
|
|
2233
|
+
|
|
2234
|
+
// src/theme/spacing.ts
|
|
2235
|
+
var spacing = {
|
|
1248
2236
|
none: "0",
|
|
1249
2237
|
xs: "0.25rem",
|
|
1250
2238
|
// 4px
|
|
@@ -1264,7 +2252,8 @@ const Ve = {
|
|
|
1264
2252
|
// 64px
|
|
1265
2253
|
"5xl": "5rem"
|
|
1266
2254
|
// 80px
|
|
1267
|
-
}
|
|
2255
|
+
};
|
|
2256
|
+
var borderRadius = {
|
|
1268
2257
|
none: "0px",
|
|
1269
2258
|
sm: "0.125rem",
|
|
1270
2259
|
// 2px
|
|
@@ -1281,7 +2270,8 @@ const Ve = {
|
|
|
1281
2270
|
"3xl": "1.5rem",
|
|
1282
2271
|
// 24px
|
|
1283
2272
|
full: "9999px"
|
|
1284
|
-
}
|
|
2273
|
+
};
|
|
2274
|
+
var shadows = {
|
|
1285
2275
|
none: "none",
|
|
1286
2276
|
sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
|
|
1287
2277
|
base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
|
|
@@ -1290,174 +2280,241 @@ const Ve = {
|
|
|
1290
2280
|
xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
|
|
1291
2281
|
"2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
|
|
1292
2282
|
inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"
|
|
1293
|
-
}
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
if (
|
|
2283
|
+
};
|
|
2284
|
+
var ThemeContext = React.createContext(void 0);
|
|
2285
|
+
function getInitialReduceMotion(override) {
|
|
2286
|
+
if (override !== void 0) return override;
|
|
2287
|
+
if (typeof window === "undefined") return false;
|
|
1297
2288
|
try {
|
|
1298
2289
|
return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
1299
2290
|
} catch {
|
|
1300
|
-
return
|
|
2291
|
+
return false;
|
|
1301
2292
|
}
|
|
1302
2293
|
}
|
|
1303
|
-
function
|
|
1304
|
-
children
|
|
1305
|
-
defaultMode
|
|
1306
|
-
defaultTheme:
|
|
1307
|
-
defaultBrand
|
|
1308
|
-
storageKey
|
|
1309
|
-
themeStorageKey
|
|
1310
|
-
brandStorageKey
|
|
1311
|
-
attribute
|
|
1312
|
-
enableSystem
|
|
1313
|
-
reduceMotion:
|
|
1314
|
-
enableAnimations:
|
|
2294
|
+
function ThemeProvider({
|
|
2295
|
+
children,
|
|
2296
|
+
defaultMode = "day",
|
|
2297
|
+
defaultTheme: defaultTheme2 = "default",
|
|
2298
|
+
defaultBrand = null,
|
|
2299
|
+
storageKey = "tm_mode",
|
|
2300
|
+
themeStorageKey = "tm_theme",
|
|
2301
|
+
brandStorageKey = "tm_brand",
|
|
2302
|
+
attribute = "data-mode",
|
|
2303
|
+
enableSystem = true,
|
|
2304
|
+
reduceMotion: reduceMotionOverride,
|
|
2305
|
+
enableAnimations: enableAnimationsOverride = true
|
|
1315
2306
|
}) {
|
|
1316
|
-
|
|
2307
|
+
React.useEffect(() => {
|
|
1317
2308
|
try {
|
|
1318
|
-
|
|
1319
|
-
} catch (
|
|
1320
|
-
console.warn("Failed to register neon brand:",
|
|
2309
|
+
registerBrand(neonBrand);
|
|
2310
|
+
} catch (error) {
|
|
2311
|
+
console.warn("Failed to register neon brand:", error);
|
|
1321
2312
|
}
|
|
1322
2313
|
try {
|
|
1323
|
-
|
|
1324
|
-
} catch (
|
|
1325
|
-
console.warn("Failed to register minimal brand:",
|
|
2314
|
+
registerBrand(minimalBrand);
|
|
2315
|
+
} catch (error) {
|
|
2316
|
+
console.warn("Failed to register minimal brand:", error);
|
|
1326
2317
|
}
|
|
1327
2318
|
}, []);
|
|
1328
|
-
const [
|
|
1329
|
-
if (typeof window
|
|
1330
|
-
const
|
|
1331
|
-
|
|
1332
|
-
|
|
2319
|
+
const [mode, setModeState] = React.useState(() => {
|
|
2320
|
+
if (typeof window === "undefined") return defaultMode;
|
|
2321
|
+
const root = document.documentElement;
|
|
2322
|
+
const existingMode = root.getAttribute(attribute);
|
|
2323
|
+
if (existingMode === "day" || existingMode === "night") {
|
|
2324
|
+
return existingMode;
|
|
2325
|
+
}
|
|
1333
2326
|
try {
|
|
1334
|
-
const
|
|
1335
|
-
if (
|
|
1336
|
-
return
|
|
2327
|
+
const stored = localStorage.getItem(storageKey);
|
|
2328
|
+
if (stored === "day" || stored === "night") {
|
|
2329
|
+
return stored;
|
|
2330
|
+
}
|
|
1337
2331
|
} catch {
|
|
1338
2332
|
}
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
2333
|
+
if (enableSystem && typeof window !== "undefined") {
|
|
2334
|
+
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
2335
|
+
return prefersDark ? "night" : "day";
|
|
2336
|
+
}
|
|
2337
|
+
return defaultMode;
|
|
2338
|
+
});
|
|
2339
|
+
const [theme, setThemeState] = React.useState(() => {
|
|
2340
|
+
if (typeof window === "undefined") return defaultTheme2;
|
|
2341
|
+
return getInitialTheme(defaultTheme2, themeStorageKey);
|
|
2342
|
+
});
|
|
2343
|
+
const [brand, setBrandState] = React.useState(() => {
|
|
2344
|
+
if (typeof window === "undefined") return defaultBrand;
|
|
2345
|
+
return getInitialBrand(defaultBrand, brandStorageKey);
|
|
2346
|
+
});
|
|
2347
|
+
const [reduceMotion, setReduceMotionState] = React.useState(() => {
|
|
2348
|
+
return getInitialReduceMotion(reduceMotionOverride);
|
|
2349
|
+
});
|
|
2350
|
+
const [enableAnimations, setEnableAnimationsState] = React.useState(() => {
|
|
2351
|
+
return enableAnimationsOverride;
|
|
2352
|
+
});
|
|
2353
|
+
const setMode = React.useCallback(
|
|
2354
|
+
(newMode) => {
|
|
2355
|
+
setModeState(newMode);
|
|
2356
|
+
applyDocumentTheme(newMode, theme, brand);
|
|
2357
|
+
persistMode(newMode, storageKey);
|
|
1343
2358
|
},
|
|
1344
|
-
[
|
|
1345
|
-
)
|
|
1346
|
-
|
|
1347
|
-
|
|
2359
|
+
[theme, brand, storageKey]
|
|
2360
|
+
);
|
|
2361
|
+
const setTheme = React.useCallback(
|
|
2362
|
+
async (newTheme) => {
|
|
2363
|
+
setThemeState(newTheme);
|
|
2364
|
+
await applyDocumentTheme(mode, newTheme, brand);
|
|
2365
|
+
persistTheme(newTheme, themeStorageKey);
|
|
1348
2366
|
},
|
|
1349
|
-
[
|
|
1350
|
-
)
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
2367
|
+
[mode, brand, themeStorageKey]
|
|
2368
|
+
);
|
|
2369
|
+
const setBrand = React.useCallback(
|
|
2370
|
+
async (brandId) => {
|
|
2371
|
+
const currentBrand = getActiveBrand();
|
|
2372
|
+
if (currentBrand) {
|
|
2373
|
+
removeBrandOverrides(currentBrand.namespace);
|
|
2374
|
+
}
|
|
2375
|
+
setBrandState(brandId);
|
|
2376
|
+
persistBrand(brandId, brandStorageKey);
|
|
2377
|
+
if (brandId) {
|
|
1354
2378
|
try {
|
|
1355
|
-
const
|
|
1356
|
-
|
|
1357
|
-
} catch (
|
|
1358
|
-
console.error(`Failed to load brand "${
|
|
2379
|
+
const loadedBrand = await loadBrand(brandId);
|
|
2380
|
+
applyBrandOverrides(loadedBrand, mode);
|
|
2381
|
+
} catch (error) {
|
|
2382
|
+
console.error(`Failed to load brand "${brandId}":`, error);
|
|
2383
|
+
setActiveBrand(null);
|
|
1359
2384
|
}
|
|
1360
|
-
else
|
|
1361
|
-
|
|
1362
|
-
|
|
2385
|
+
} else {
|
|
2386
|
+
setActiveBrand(null);
|
|
2387
|
+
}
|
|
2388
|
+
await applyDocumentTheme(mode, theme, brandId);
|
|
1363
2389
|
},
|
|
1364
|
-
[
|
|
1365
|
-
)
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
2390
|
+
[mode, theme, brandStorageKey]
|
|
2391
|
+
);
|
|
2392
|
+
const toggleMode = React.useCallback(() => {
|
|
2393
|
+
setMode(mode === "night" ? "day" : "night");
|
|
2394
|
+
}, [mode, setMode]);
|
|
2395
|
+
const setReduceMotion = React.useCallback((reduce) => {
|
|
2396
|
+
setReduceMotionState(reduce);
|
|
1369
2397
|
try {
|
|
1370
|
-
localStorage.setItem("tm_reduce_motion",
|
|
2398
|
+
localStorage.setItem("tm_reduce_motion", reduce ? "true" : "false");
|
|
1371
2399
|
} catch {
|
|
1372
2400
|
}
|
|
1373
|
-
}, [])
|
|
1374
|
-
|
|
2401
|
+
}, []);
|
|
2402
|
+
const setEnableAnimations = React.useCallback((enable) => {
|
|
2403
|
+
setEnableAnimationsState(enable);
|
|
1375
2404
|
try {
|
|
1376
|
-
localStorage.setItem("tm_enable_animations",
|
|
2405
|
+
localStorage.setItem("tm_enable_animations", enable ? "true" : "false");
|
|
1377
2406
|
} catch {
|
|
1378
2407
|
}
|
|
1379
2408
|
}, []);
|
|
1380
|
-
|
|
1381
|
-
if (
|
|
1382
|
-
const
|
|
1383
|
-
|
|
2409
|
+
React.useEffect(() => {
|
|
2410
|
+
if (reduceMotionOverride !== void 0) return;
|
|
2411
|
+
const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
2412
|
+
const handleChange = (e) => {
|
|
2413
|
+
setReduceMotionState(e.matches);
|
|
1384
2414
|
};
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
2415
|
+
mediaQuery.addEventListener("change", handleChange);
|
|
2416
|
+
return () => mediaQuery.removeEventListener("change", handleChange);
|
|
2417
|
+
}, [reduceMotionOverride]);
|
|
2418
|
+
React.useEffect(() => {
|
|
2419
|
+
if (reduceMotionOverride === void 0) {
|
|
1388
2420
|
try {
|
|
1389
|
-
const
|
|
1390
|
-
(
|
|
2421
|
+
const storedReduceMotion = localStorage.getItem("tm_reduce_motion");
|
|
2422
|
+
if (storedReduceMotion === "true" || storedReduceMotion === "false") {
|
|
2423
|
+
setReduceMotionState(storedReduceMotion === "true");
|
|
2424
|
+
}
|
|
1391
2425
|
} catch {
|
|
1392
2426
|
}
|
|
1393
|
-
|
|
2427
|
+
}
|
|
2428
|
+
if (enableAnimationsOverride === void 0) {
|
|
1394
2429
|
try {
|
|
1395
|
-
const
|
|
1396
|
-
(
|
|
2430
|
+
const storedEnableAnimations = localStorage.getItem("tm_enable_animations");
|
|
2431
|
+
if (storedEnableAnimations === "true" || storedEnableAnimations === "false") {
|
|
2432
|
+
setEnableAnimationsState(storedEnableAnimations === "true");
|
|
2433
|
+
}
|
|
1397
2434
|
} catch {
|
|
1398
2435
|
}
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
2436
|
+
}
|
|
2437
|
+
}, [reduceMotionOverride, enableAnimationsOverride]);
|
|
2438
|
+
React.useEffect(() => {
|
|
2439
|
+
const initialMode = getInitialMode(defaultMode, storageKey, enableSystem);
|
|
2440
|
+
const initialTheme = getInitialTheme(defaultTheme2, themeStorageKey);
|
|
2441
|
+
const initialBrand = getInitialBrand(defaultBrand, brandStorageKey);
|
|
2442
|
+
setModeState(initialMode);
|
|
2443
|
+
setThemeState(initialTheme);
|
|
2444
|
+
setBrandState(initialBrand);
|
|
2445
|
+
applyDocumentTheme(initialMode, initialTheme, initialBrand);
|
|
2446
|
+
persistMode(initialMode, storageKey);
|
|
2447
|
+
persistTheme(initialTheme, themeStorageKey);
|
|
2448
|
+
persistBrand(initialBrand, brandStorageKey);
|
|
1402
2449
|
}, [
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
])
|
|
1411
|
-
|
|
1412
|
-
|
|
2450
|
+
defaultMode,
|
|
2451
|
+
defaultTheme2,
|
|
2452
|
+
defaultBrand,
|
|
2453
|
+
storageKey,
|
|
2454
|
+
themeStorageKey,
|
|
2455
|
+
brandStorageKey,
|
|
2456
|
+
enableSystem
|
|
2457
|
+
]);
|
|
2458
|
+
React.useEffect(() => {
|
|
2459
|
+
if (!enableSystem) return;
|
|
2460
|
+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
2461
|
+
const handleChange = (e) => {
|
|
1413
2462
|
try {
|
|
1414
|
-
localStorage.getItem(
|
|
2463
|
+
const stored = localStorage.getItem(storageKey);
|
|
2464
|
+
if (!stored) {
|
|
2465
|
+
setMode(e.matches ? "night" : "day");
|
|
2466
|
+
}
|
|
1415
2467
|
} catch {
|
|
1416
2468
|
}
|
|
1417
2469
|
};
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
2470
|
+
mediaQuery.addEventListener("change", handleChange);
|
|
2471
|
+
return () => mediaQuery.removeEventListener("change", handleChange);
|
|
2472
|
+
}, [enableSystem, storageKey, setMode]);
|
|
2473
|
+
React.useEffect(() => {
|
|
2474
|
+
applyDocumentTheme(mode, theme, brand);
|
|
2475
|
+
}, [mode, theme, brand]);
|
|
2476
|
+
const value = React.useMemo(
|
|
1423
2477
|
() => ({
|
|
1424
|
-
mode
|
|
1425
|
-
theme
|
|
1426
|
-
brand
|
|
1427
|
-
reduceMotion:
|
|
1428
|
-
enableAnimations:
|
|
1429
|
-
setMode
|
|
1430
|
-
setTheme
|
|
1431
|
-
setBrand
|
|
1432
|
-
toggleMode
|
|
1433
|
-
setReduceMotion
|
|
1434
|
-
setEnableAnimations
|
|
2478
|
+
mode,
|
|
2479
|
+
theme,
|
|
2480
|
+
brand,
|
|
2481
|
+
reduceMotion: reduceMotionOverride !== void 0 ? reduceMotionOverride : reduceMotion,
|
|
2482
|
+
enableAnimations: enableAnimationsOverride !== void 0 ? enableAnimationsOverride : enableAnimations,
|
|
2483
|
+
setMode,
|
|
2484
|
+
setTheme,
|
|
2485
|
+
setBrand,
|
|
2486
|
+
toggleMode,
|
|
2487
|
+
setReduceMotion,
|
|
2488
|
+
setEnableAnimations
|
|
1435
2489
|
}),
|
|
1436
2490
|
[
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
2491
|
+
mode,
|
|
2492
|
+
theme,
|
|
2493
|
+
brand,
|
|
2494
|
+
reduceMotion,
|
|
2495
|
+
enableAnimations,
|
|
2496
|
+
reduceMotionOverride,
|
|
2497
|
+
enableAnimationsOverride,
|
|
2498
|
+
setMode,
|
|
2499
|
+
setTheme,
|
|
2500
|
+
setBrand,
|
|
2501
|
+
toggleMode,
|
|
2502
|
+
setReduceMotion,
|
|
2503
|
+
setEnableAnimations
|
|
1450
2504
|
]
|
|
1451
2505
|
);
|
|
1452
|
-
return /* @__PURE__ */
|
|
2506
|
+
return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
|
|
1453
2507
|
}
|
|
1454
|
-
function
|
|
1455
|
-
const
|
|
1456
|
-
if (
|
|
2508
|
+
function useTheme() {
|
|
2509
|
+
const context = React.useContext(ThemeContext);
|
|
2510
|
+
if (context === void 0) {
|
|
1457
2511
|
throw new Error("useTheme must be used within a ThemeProvider");
|
|
1458
|
-
|
|
2512
|
+
}
|
|
2513
|
+
return context;
|
|
1459
2514
|
}
|
|
1460
|
-
|
|
2515
|
+
|
|
2516
|
+
// src/theme/typography.ts
|
|
2517
|
+
var fontFamilies = {
|
|
1461
2518
|
sans: [
|
|
1462
2519
|
"ui-sans-serif",
|
|
1463
2520
|
"system-ui",
|
|
@@ -1485,7 +2542,8 @@ const Ye = {
|
|
|
1485
2542
|
"Courier New",
|
|
1486
2543
|
"monospace"
|
|
1487
2544
|
].join(", ")
|
|
1488
|
-
}
|
|
2545
|
+
};
|
|
2546
|
+
var fontSizes = {
|
|
1489
2547
|
xs: "0.75rem",
|
|
1490
2548
|
// 12px
|
|
1491
2549
|
sm: "0.875rem",
|
|
@@ -1506,7 +2564,8 @@ const Ye = {
|
|
|
1506
2564
|
// 48px
|
|
1507
2565
|
"6xl": "3.75rem"
|
|
1508
2566
|
// 60px
|
|
1509
|
-
}
|
|
2567
|
+
};
|
|
2568
|
+
var fontWeights = {
|
|
1510
2569
|
thin: "100",
|
|
1511
2570
|
extralight: "200",
|
|
1512
2571
|
light: "300",
|
|
@@ -1516,14 +2575,16 @@ const Ye = {
|
|
|
1516
2575
|
bold: "700",
|
|
1517
2576
|
extrabold: "800",
|
|
1518
2577
|
black: "900"
|
|
1519
|
-
}
|
|
2578
|
+
};
|
|
2579
|
+
var lineHeights = {
|
|
1520
2580
|
none: "1",
|
|
1521
2581
|
tight: "1.25",
|
|
1522
2582
|
snug: "1.375",
|
|
1523
2583
|
normal: "1.5",
|
|
1524
2584
|
relaxed: "1.625",
|
|
1525
2585
|
loose: "2"
|
|
1526
|
-
}
|
|
2586
|
+
};
|
|
2587
|
+
var letterSpacings = {
|
|
1527
2588
|
tighter: "-0.05em",
|
|
1528
2589
|
tight: "-0.025em",
|
|
1529
2590
|
normal: "0em",
|
|
@@ -1531,41 +2592,5 @@ const Ye = {
|
|
|
1531
2592
|
wider: "0.05em",
|
|
1532
2593
|
widest: "0.1em"
|
|
1533
2594
|
};
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
He as applyDocumentMode,
|
|
1537
|
-
$ as applyDocumentTheme,
|
|
1538
|
-
Qe as borderRadius,
|
|
1539
|
-
qe as canLoadTheme,
|
|
1540
|
-
Le as createMinimalThemeSchema,
|
|
1541
|
-
nr as cssVariableColorTokens,
|
|
1542
|
-
Ye as fontFamilies,
|
|
1543
|
-
Ze as fontSizes,
|
|
1544
|
-
Ke as fontWeights,
|
|
1545
|
-
de as getAllThemes,
|
|
1546
|
-
We as getAvailableThemeIds,
|
|
1547
|
-
re as getInitialBrand,
|
|
1548
|
-
Se as getInitialMode,
|
|
1549
|
-
Z as getInitialTheme,
|
|
1550
|
-
_e as getThemeMetadata,
|
|
1551
|
-
Ne as getThemesByCategory,
|
|
1552
|
-
Re as initializeDefaultThemes,
|
|
1553
|
-
ze as isThemeSchema,
|
|
1554
|
-
rr as letterSpacings,
|
|
1555
|
-
er as lineHeights,
|
|
1556
|
-
je as loadTheme,
|
|
1557
|
-
Te as loadThemeOverride,
|
|
1558
|
-
E as loadThemeSafe,
|
|
1559
|
-
te as persistBrand,
|
|
1560
|
-
K as persistMode,
|
|
1561
|
-
ee as persistTheme,
|
|
1562
|
-
Ue as preloadThemes,
|
|
1563
|
-
D as registerTheme,
|
|
1564
|
-
Ge as shadows,
|
|
1565
|
-
Ve as spacing,
|
|
1566
|
-
sr as tailwindThemeColors,
|
|
1567
|
-
C as themeExists,
|
|
1568
|
-
S as themeRegistry,
|
|
1569
|
-
Xe as useTheme,
|
|
1570
|
-
pe as validateThemeSchema
|
|
1571
|
-
};
|
|
2595
|
+
|
|
2596
|
+
export { ThemeProvider, borderRadius, canLoadTheme, createMinimalThemeSchema, cssVariableColorTokens, fontFamilies, fontSizes, fontWeights, getAllThemes, getAvailableThemeIds, getInitialBrand, getInitialMode, getInitialTheme, getThemeMetadata, getThemesByCategory, initializeDefaultThemes, isThemeSchema, letterSpacings, lineHeights, loadTheme, loadThemeSafe, persistBrand, persistMode, persistTheme, preloadThemes, registerTheme, shadows, spacing, tailwindThemeColors, themeExists, themeRegistry, useTheme, validateThemeSchema };
|