@react-fabric/core 1.0.0-beta.4 → 1.0.0-beta.41
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/{src/components/actionLabel/ActionLabel.module.css → css/components/_actionLabel.css} +4 -4
- package/{src/overlays/alert/Alert.module.css → css/components/_alert.css} +3 -3
- package/{src/components/animations/Animations.module.css → css/components/_animations.css} +9 -9
- package/{src/components/avatar/Avatar.module.css → css/components/_avatar.css} +11 -11
- package/{src/components/badge/Badge.module.css → css/components/_badge.css} +19 -17
- package/{src/components/breadcrumbs/Breadcrumbs.module.css → css/components/_breadcrumbs.css} +49 -44
- package/{src/components/button/Button.module.css → css/components/_button.css} +68 -78
- package/{src/components/card/Card.module.css → css/components/_card.css} +32 -28
- package/{src/components/chip/Chip.module.css → css/components/_chip.css} +15 -11
- package/{src/components/collapsable/Collapsable.module.css → css/components/_collapsable.css} +3 -3
- package/css/components/_divider.css +32 -0
- package/{src/components/dropdown/Dropdown.module.css → css/components/_dropdown.css} +2 -2
- package/{src/overlays/flyout/Flyout.module.css → css/components/_flyout.css} +6 -6
- package/{src/components/icon/Icon.module.css → css/components/_icon.css} +8 -5
- package/{src/components/media/Media.module.css → css/components/_media.css} +17 -17
- package/{src/components/menu/Menu.module.css → css/components/_menu.css} +15 -16
- package/{src/overlays/message/Message.module.css → css/components/_message.css} +2 -2
- package/{src/components/meter/Meter.module.css → css/components/_meter.css} +10 -10
- package/{src/overlays/modal/Modal.module.css → css/components/_modal.css} +6 -6
- package/{src/components/panel/Panel.module.css → css/components/_panel.css} +17 -17
- package/{src/components/progress/Progress.module.css → css/components/_progress.css} +7 -10
- package/{src/components/tabpanel/TabPanel.module.css → css/components/_tabPanel.css} +73 -84
- package/{src/overlays/toast/Toast.module.css → css/components/_toast.css} +2 -2
- package/css/components/_tooltip.css +29 -0
- package/{src/core/content/Content.module.css → css/components/index.css} +25 -18
- package/{src/core/aside/Aside.module.css → css/core/_aside.css} +42 -42
- package/{src/core/section/Section.module.css → css/core/_content.css} +5 -3
- package/{src/core/boundary/ErrorBoundary.module.css → css/core/_errorboundary.css} +9 -9
- package/{src/core/headfoot/HeadFoot.module.css → css/core/_headfoot.css} +4 -10
- package/{src/core/page/Page.module.css → css/core/_page.css} +10 -14
- package/{src/core/responsive/Responsive.module.css → css/core/_responsive.css} +10 -10
- package/css/core/_section.css +28 -0
- package/{src/core/theme/Theme.module.css → css/core/_theme.css} +3 -3
- package/{src/typography/Typography.module.css → css/core/_typography.css} +14 -12
- package/{src/core/viewport/Viewport.module.css → css/core/_viewport.css} +7 -3
- package/css/core/index.css +33 -0
- package/css/reset/_gradients.css +8 -8
- package/css/reset/_reset.css +41 -223
- package/css/reset/_text.css +14 -29
- package/css/reset/_theme.css +315 -32
- package/css/reset/index.css +4 -4
- package/css/styles.css +7 -6
- package/css/theme/_colors.css +320 -0
- package/css/theme/_utilities.css +530 -0
- package/css/theme/index.css +44 -0
- package/dist/cjs/components/actionLabel/ActionLabel.js +3 -3
- package/dist/cjs/components/animations/Animations.js +29 -18
- package/dist/cjs/components/avatar/Avatar.js +10 -13
- package/dist/cjs/components/avatar/AvatarGroup.js +3 -3
- package/dist/cjs/components/badge/Badge.js +5 -5
- package/dist/cjs/components/breadcrumbs/Breadcrumbs.js +10 -8
- package/dist/cjs/components/button/Button.js +18 -14
- package/dist/cjs/components/button/ButtonGroup.js +4 -3
- package/dist/cjs/components/button/ConfirmButton.js +7 -2
- package/dist/cjs/components/button/ToggleButtonGroup.js +3 -3
- package/dist/cjs/components/callout/Callout.js +15 -4
- package/dist/cjs/components/card/Card.js +8 -7
- package/dist/cjs/components/card/CardCover.js +10 -5
- package/dist/cjs/components/chip/Chip.js +11 -7
- package/dist/cjs/components/collapsable/Collapsable.js +5 -5
- package/dist/cjs/components/divider/Divider.js +10 -7
- package/dist/cjs/components/dropdown/Dropdown.js +5 -4
- package/dist/cjs/components/dropdown/DropdownTool.js +4 -3
- package/dist/cjs/components/empty/EmptyContent.js +6 -3
- package/dist/cjs/components/icon/Icon.js +15 -14
- package/dist/cjs/components/media/Media.js +116 -75
- package/dist/cjs/components/menu/ContextMenu.js +30 -10
- package/dist/cjs/components/menu/Menu.js +39 -20
- package/dist/cjs/components/menu/MenuItem.js +30 -16
- package/dist/cjs/components/meter/Meter.js +2 -3
- package/dist/cjs/components/navigator/Navigator.js +16 -9
- package/dist/cjs/components/panel/Panel.js +10 -9
- package/dist/cjs/components/panel/PanelGroup.js +1 -2
- package/dist/cjs/components/progress/ProgressBar.js +6 -5
- package/dist/cjs/components/progress/ProgressCircle.js +6 -4
- package/dist/cjs/components/tabpanel/Tab.js +58 -38
- package/dist/cjs/components/tabpanel/TabPanel.js +20 -16
- package/dist/cjs/core/aside/Aside.js +11 -10
- package/dist/cjs/core/boundary/ErrorBoundary.js +6 -7
- package/dist/cjs/core/boundary/ErrorIcon.js +1 -2
- package/dist/cjs/core/content/Content.js +9 -7
- package/dist/cjs/core/headfoot/HeadFoot.js +2 -20
- package/dist/cjs/core/page/Page.js +3 -3
- package/dist/cjs/core/responsive/Responsive.js +3 -4
- package/dist/cjs/core/section/Section.js +1 -2
- package/dist/cjs/core/theme/ThemeProvider.js +7 -8
- package/dist/cjs/core/viewport/Viewport.js +4 -2
- package/dist/cjs/hooks/useNavigator.js +6 -4
- package/dist/cjs/hotkeys/HotKeyLabel.js +1 -1
- package/dist/cjs/hotkeys/HotKeyWrapper.js +3 -1
- package/dist/cjs/index.js +6 -2
- package/dist/cjs/overlays/alert/Alert.js +19 -13
- package/dist/cjs/overlays/flyout/Flyout.js +49 -60
- package/dist/cjs/overlays/message/Message.js +6 -3
- package/dist/cjs/overlays/modal/Modal.js +11 -11
- package/dist/cjs/overlays/toast/Toast.js +17 -9
- package/dist/cjs/overlays/tooltip/Tooltip.js +20 -8
- package/dist/cjs/types/icons.js +4 -0
- package/dist/cjs/typography/Abbr.js +2 -3
- package/dist/cjs/typography/{Link.js → Anchor.js} +5 -4
- package/dist/cjs/typography/Mark.js +2 -3
- package/dist/cjs/typography/Text.js +3 -4
- package/dist/cjs/typography/Title.js +3 -3
- package/dist/cjs/utils/cloneElement.js +44 -0
- package/dist/cjs/utils/getColor.js +1 -18
- package/dist/esm/components/actionLabel/ActionLabel.js +3 -3
- package/dist/esm/components/animations/Animations.js +30 -19
- package/dist/esm/components/avatar/Avatar.js +11 -14
- package/dist/esm/components/avatar/AvatarGroup.js +3 -3
- package/dist/esm/components/badge/Badge.js +5 -5
- package/dist/esm/components/breadcrumbs/Breadcrumbs.js +10 -8
- package/dist/esm/components/button/Button.js +18 -14
- package/dist/esm/components/button/ButtonGroup.js +5 -4
- package/dist/esm/components/button/ConfirmButton.js +7 -2
- package/dist/esm/components/button/ToggleButtonGroup.js +4 -4
- package/dist/esm/components/callout/Callout.js +15 -4
- package/dist/esm/components/card/Card.js +8 -7
- package/dist/esm/components/card/CardCover.js +10 -5
- package/dist/esm/components/chip/Chip.js +12 -8
- package/dist/esm/components/collapsable/Collapsable.js +5 -5
- package/dist/esm/components/divider/Divider.js +11 -8
- package/dist/esm/components/dropdown/Dropdown.js +5 -4
- package/dist/esm/components/dropdown/DropdownTool.js +4 -3
- package/dist/esm/components/empty/EmptyContent.js +6 -3
- package/dist/esm/components/icon/Icon.js +15 -14
- package/dist/esm/components/media/Media.js +117 -76
- package/dist/esm/components/menu/ContextMenu.js +32 -12
- package/dist/esm/components/menu/Menu.js +41 -22
- package/dist/esm/components/menu/MenuItem.js +24 -10
- package/dist/esm/components/meter/Meter.js +2 -3
- package/dist/esm/components/navigator/Navigator.js +16 -9
- package/dist/esm/components/panel/Panel.js +10 -9
- package/dist/esm/components/panel/PanelGroup.js +1 -2
- package/dist/esm/components/progress/ProgressBar.js +6 -5
- package/dist/esm/components/progress/ProgressCircle.js +6 -4
- package/dist/esm/components/tabpanel/Tab.js +59 -39
- package/dist/esm/components/tabpanel/TabPanel.js +20 -16
- package/dist/esm/core/aside/Aside.js +11 -10
- package/dist/esm/core/boundary/ErrorBoundary.js +6 -7
- package/dist/esm/core/boundary/ErrorIcon.js +1 -2
- package/dist/esm/core/content/Content.js +9 -7
- package/dist/esm/core/headfoot/HeadFoot.js +2 -20
- package/dist/esm/core/page/Page.js +3 -3
- package/dist/esm/core/responsive/Responsive.js +3 -4
- package/dist/esm/core/section/Section.js +1 -2
- package/dist/esm/core/theme/ThemeProvider.js +7 -8
- package/dist/esm/core/viewport/Viewport.js +4 -2
- package/dist/esm/hooks/useNavigator.js +7 -5
- package/dist/esm/hotkeys/HotKeyLabel.js +1 -1
- package/dist/esm/hotkeys/HotKeyWrapper.js +3 -1
- package/dist/esm/index.js +3 -1
- package/dist/esm/overlays/alert/Alert.js +20 -14
- package/dist/esm/overlays/flyout/Flyout.js +52 -63
- package/dist/esm/overlays/message/Message.js +7 -4
- package/dist/esm/overlays/modal/Modal.js +12 -12
- package/dist/esm/overlays/toast/Toast.js +18 -10
- package/dist/esm/overlays/tooltip/Tooltip.js +20 -8
- package/dist/esm/types/icons.js +4 -0
- package/dist/esm/typography/Abbr.js +2 -3
- package/dist/esm/typography/{Link.js → Anchor.js} +6 -5
- package/dist/esm/typography/Mark.js +2 -3
- package/dist/esm/typography/Text.js +4 -5
- package/dist/esm/typography/Title.js +4 -4
- package/dist/esm/utils/cloneElement.js +44 -0
- package/dist/esm/utils/getColor.js +2 -16
- package/dist/types/components/actionLabel/ActionLabel.d.ts +2 -2
- package/dist/types/components/animations/Animations.d.ts +5 -5
- package/dist/types/components/avatar/Avatar.d.ts +3 -3
- package/dist/types/components/badge/Badge.d.ts +5 -1
- package/dist/types/components/breadcrumbs/Breadcrumbs.d.ts +2 -2
- package/dist/types/components/button/Button.d.ts +7 -5
- package/dist/types/components/button/ButtonGroup.d.ts +2 -2
- package/dist/types/components/button/ConfirmButton.d.ts +6 -1
- package/dist/types/components/callout/Callout.d.ts +2 -2
- package/dist/types/components/card/Card.d.ts +3 -3
- package/dist/types/components/chip/Chip.d.ts +3 -3
- package/dist/types/components/collapsable/Collapsable.d.ts +5 -1
- package/dist/types/components/divider/Divider.d.ts +7 -3
- package/dist/types/components/dropdown/DropdownTool.d.ts +2 -1
- package/dist/types/components/empty/EmptyContent.d.ts +6 -2
- package/dist/types/components/icon/Icon.d.ts +3 -3
- package/dist/types/components/media/Media.d.ts +2 -2
- package/dist/types/components/menu/ContextMenu.d.ts +2 -1
- package/dist/types/components/menu/MenuItem.d.ts +1 -1
- package/dist/types/components/menu/types.d.ts +2 -2
- package/dist/types/components/navigator/Navigator.d.ts +4 -4
- package/dist/types/components/progress/ProgressBar.d.ts +2 -2
- package/dist/types/components/progress/ProgressCircle.d.ts +2 -2
- package/dist/types/components/tabpanel/Tab.d.ts +5 -5
- package/dist/types/components/tabpanel/TabPanel.d.ts +10 -1
- package/dist/types/core/content/Content.d.ts +3 -2
- package/dist/types/core/headfoot/HeadFoot.d.ts +1 -9
- package/dist/types/core/responsive/Responsive.d.ts +1 -1
- package/dist/types/core/theme/ThemeProvider.d.ts +4 -4
- package/dist/types/hooks/useOverlayService.d.ts +3 -5
- package/dist/types/index.d.ts +3 -0
- package/dist/types/overlays/alert/Alert.d.ts +2 -2
- package/dist/types/overlays/flyout/Flyout.d.ts +3 -2
- package/dist/types/overlays/message/Message.d.ts +2 -2
- package/dist/types/overlays/modal/Modal.d.ts +4 -3
- package/dist/types/overlays/toast/Toast.d.ts +2 -2
- package/dist/types/overlays/tooltip/Tooltip.d.ts +1 -1
- package/dist/types/types/icons.d.ts +4 -0
- package/dist/types/types/index.d.ts +18 -6
- package/dist/types/typography/Abbr.d.ts +6 -2
- package/dist/types/typography/Anchor.d.ts +25 -0
- package/dist/types/typography/Mark.d.ts +2 -2
- package/dist/types/typography/index.d.ts +1 -1
- package/dist/types/utils/cloneElement.d.ts +2 -0
- package/dist/types/utils/getColor.d.ts +1 -4
- package/dist/types/utils/index.d.ts +1 -0
- package/package.json +7 -9
- package/src/components/actionLabel/ActionLabel.tsx +15 -6
- package/src/components/animations/Animations.tsx +29 -23
- package/src/components/avatar/Avatar.tsx +74 -88
- package/src/components/avatar/AvatarGroup.tsx +4 -4
- package/src/components/badge/Badge.tsx +11 -7
- package/src/components/breadcrumbs/Breadcrumbs.tsx +13 -9
- package/src/components/button/Button.tsx +27 -22
- package/src/components/button/ButtonGroup.tsx +7 -7
- package/src/components/button/ConfirmButton.tsx +15 -5
- package/src/components/button/ToggleButtonGroup.tsx +5 -5
- package/src/components/callout/Callout.tsx +26 -11
- package/src/components/card/Card.tsx +10 -7
- package/src/components/card/CardCover.tsx +11 -6
- package/src/components/chip/Chip.tsx +17 -13
- package/src/components/collapsable/Collapsable.tsx +9 -4
- package/src/components/divider/Divider.tsx +15 -10
- package/src/components/dropdown/Dropdown.tsx +5 -5
- package/src/components/dropdown/DropdownTool.tsx +5 -3
- package/src/components/empty/EmptyContent.tsx +17 -2
- package/src/components/icon/Icon.tsx +55 -67
- package/src/components/media/Media.tsx +141 -106
- package/src/components/menu/ContextMenu.tsx +36 -11
- package/src/components/menu/Menu.tsx +51 -30
- package/src/components/menu/MenuItem.tsx +19 -9
- package/src/components/menu/types.ts +2 -2
- package/src/components/meter/Meter.tsx +2 -3
- package/src/components/navigator/Navigator.tsx +19 -5
- package/src/components/panel/Panel.tsx +10 -9
- package/src/components/panel/PanelGroup.tsx +1 -2
- package/src/components/progress/ProgressBar.tsx +8 -9
- package/src/components/progress/ProgressCircle.tsx +6 -9
- package/src/components/tabpanel/Tab.tsx +81 -64
- package/src/components/tabpanel/TabPanel.tsx +34 -12
- package/src/core/aside/Aside.tsx +11 -10
- package/src/core/boundary/ErrorBoundary.tsx +8 -7
- package/src/core/boundary/ErrorIcon.tsx +1 -2
- package/src/core/content/Content.tsx +17 -12
- package/src/core/headfoot/HeadFoot.tsx +2 -35
- package/src/core/page/Page.tsx +3 -3
- package/src/core/responsive/Responsive.tsx +8 -7
- package/src/core/section/Section.tsx +1 -2
- package/src/core/theme/ThemeProvider.tsx +11 -12
- package/src/core/viewport/Viewport.tsx +1 -2
- package/src/hooks/useNavigator.tsx +10 -5
- package/src/hooks/useOverlayService.tsx +12 -6
- package/src/hotkeys/HotKeyLabel.tsx +1 -1
- package/src/hotkeys/HotKeyWrapper.tsx +3 -1
- package/src/index.ts +4 -0
- package/src/overlays/alert/Alert.tsx +25 -31
- package/src/overlays/flyout/Flyout.tsx +71 -84
- package/src/overlays/message/Message.tsx +10 -7
- package/src/overlays/modal/Modal.tsx +20 -15
- package/src/overlays/toast/Toast.tsx +18 -27
- package/src/overlays/tooltip/Tooltip.tsx +30 -9
- package/src/types/icons.ts +9 -0
- package/src/types/index.ts +251 -27
- package/src/typography/Abbr.tsx +15 -9
- package/src/typography/{Link.tsx → Anchor.tsx} +8 -13
- package/src/typography/Mark.tsx +4 -9
- package/src/typography/Text.tsx +4 -12
- package/src/typography/Title.tsx +2 -6
- package/src/typography/index.ts +1 -1
- package/src/utils/cloneElement.ts +44 -0
- package/src/utils/getColor.ts +1 -17
- package/src/utils/index.ts +1 -0
- package/css/index.js +0 -250
- package/css/tailwind/colors.ts +0 -158
- package/dist/cjs/components/actionLabel/ActionLabel.module.css +0 -1
- package/dist/cjs/components/animations/Animations.module.css +0 -1
- package/dist/cjs/components/avatar/Avatar.module.css +0 -1
- package/dist/cjs/components/badge/Badge.module.css +0 -1
- package/dist/cjs/components/breadcrumbs/Breadcrumbs.module.css +0 -1
- package/dist/cjs/components/button/Button.module.css +0 -1
- package/dist/cjs/components/card/Card.module.css +0 -1
- package/dist/cjs/components/chip/Chip.module.css +0 -1
- package/dist/cjs/components/collapsable/Collapsable.module.css +0 -1
- package/dist/cjs/components/dropdown/Dropdown.module.css +0 -1
- package/dist/cjs/components/icon/Icon.module.css +0 -1
- package/dist/cjs/components/media/Media.module.css +0 -1
- package/dist/cjs/components/menu/Menu.module.css +0 -1
- package/dist/cjs/components/meter/Meter.module.css +0 -1
- package/dist/cjs/components/panel/Panel.module.css +0 -1
- package/dist/cjs/components/progress/Progress.module.css +0 -1
- package/dist/cjs/components/tabpanel/TabPanel.module.css +0 -1
- package/dist/cjs/core/aside/Aside.module.css +0 -1
- package/dist/cjs/core/boundary/ErrorBoundary.module.css +0 -1
- package/dist/cjs/core/content/Content.module.css +0 -1
- package/dist/cjs/core/headfoot/HeadFoot.module.css +0 -1
- package/dist/cjs/core/page/Page.module.css +0 -1
- package/dist/cjs/core/responsive/Responsive.module.css +0 -1
- package/dist/cjs/core/section/Section.module.css +0 -1
- package/dist/cjs/core/theme/Theme.module.css +0 -1
- package/dist/cjs/core/viewport/Viewport.module.css +0 -1
- package/dist/cjs/overlays/alert/Alert.module.css +0 -1
- package/dist/cjs/overlays/flyout/Flyout.module.css +0 -1
- package/dist/cjs/overlays/message/Message.module.css +0 -1
- package/dist/cjs/overlays/modal/Modal.module.css +0 -1
- package/dist/cjs/overlays/toast/Toast.module.css +0 -1
- package/dist/cjs/overlays/tooltip/Tooltip.module.css +0 -1
- package/dist/cjs/typography/Typography.module.css +0 -1
- package/dist/esm/components/actionLabel/ActionLabel.module.css +0 -1
- package/dist/esm/components/animations/Animations.module.css +0 -1
- package/dist/esm/components/avatar/Avatar.module.css +0 -1
- package/dist/esm/components/badge/Badge.module.css +0 -1
- package/dist/esm/components/breadcrumbs/Breadcrumbs.module.css +0 -1
- package/dist/esm/components/button/Button.module.css +0 -1
- package/dist/esm/components/card/Card.module.css +0 -1
- package/dist/esm/components/chip/Chip.module.css +0 -1
- package/dist/esm/components/collapsable/Collapsable.module.css +0 -1
- package/dist/esm/components/dropdown/Dropdown.module.css +0 -1
- package/dist/esm/components/icon/Icon.module.css +0 -1
- package/dist/esm/components/media/Media.module.css +0 -1
- package/dist/esm/components/menu/Menu.module.css +0 -1
- package/dist/esm/components/meter/Meter.module.css +0 -1
- package/dist/esm/components/panel/Panel.module.css +0 -1
- package/dist/esm/components/progress/Progress.module.css +0 -1
- package/dist/esm/components/tabpanel/TabPanel.module.css +0 -1
- package/dist/esm/core/aside/Aside.module.css +0 -1
- package/dist/esm/core/boundary/ErrorBoundary.module.css +0 -1
- package/dist/esm/core/content/Content.module.css +0 -1
- package/dist/esm/core/headfoot/HeadFoot.module.css +0 -1
- package/dist/esm/core/page/Page.module.css +0 -1
- package/dist/esm/core/responsive/Responsive.module.css +0 -1
- package/dist/esm/core/section/Section.module.css +0 -1
- package/dist/esm/core/theme/Theme.module.css +0 -1
- package/dist/esm/core/viewport/Viewport.module.css +0 -1
- package/dist/esm/overlays/alert/Alert.module.css +0 -1
- package/dist/esm/overlays/flyout/Flyout.module.css +0 -1
- package/dist/esm/overlays/message/Message.module.css +0 -1
- package/dist/esm/overlays/modal/Modal.module.css +0 -1
- package/dist/esm/overlays/toast/Toast.module.css +0 -1
- package/dist/esm/overlays/tooltip/Tooltip.module.css +0 -1
- package/dist/esm/typography/Typography.module.css +0 -1
- package/dist/types/typography/Link.d.ts +0 -25
- package/src/overlays/tooltip/Tooltip.module.css +0 -53
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.breadcrumbOverflow,.breadcrumbs{--color:theme(colors.primary.DEFAULT);&[data-color=accent]{--color:theme(colors.accent.DEFAULT)}&[data-color=info]{--color:theme(colors.info.DEFAULT)}&[data-color=danger]{--color:theme(colors.danger.DEFAULT)}&[data-color=success]{--color:theme(colors.success.DEFAULT)}&[data-color=warning]{--color:theme(colors.warning.DEFAULT)}& :global(.link){padding:.25em .5em;text-decoration:none}}.breadcrumbOverflow,.breadcrumbs[data-variant=classic]{& :global(.link){color:color-mix(in lab,var(--color) 90%,var(--fabric-text))}& :global(.link):hover{background-color:theme(colors.tint.50/50%);color:color-mix(in lab,var(--color) 99%,var(--fabric-text));text-decoration:underline}& :global(.link):active{background-color:theme(colors.tint.50);color:color-mix(in lab,var(--color) 85%,var(--fabric-text))}}.breadcrumbs[data-variant=classic]{&>.breadcrumbLink{list-style:none;&:after{color:theme(colors.tint.300);content:attr(data-separator);display:inline-block;margin-inline:.125em}&:last-child:after{content:unset}}}[data-ref=viewport] .breadcrumbs{grid-area:crumbbar;padding:0 .25rem}}@layer var{.breadcrumbs[data-variant=classic]{&>:global(.link){max-width:24rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}&>.breadcrumbLink:last-child>:global(.link){color:theme(colors.tint.600);pointer-events:none}}.breadcrumbs[data-variant=modern]{&>.breadcrumbLink{--linkcolor:color-mix(in lab,var(--color) 50%,var(--fabric-bg));border-radius:var(--rounding);list-style:none;position:relative;&:last-child{--color:theme(colors.tint.500);pointer-events:none}&:first-child>:global(.link){border-end-start-radius:var(--rounding);border-start-start-radius:var(--rounding)}&:last-child>:global(.link){border-end-end-radius:var(--rounding);border-start-end-radius:var(--rounding)}&:not(:first-child){margin-inline-start:-1em;&:before{border:.625em solid transparent;border-block-color:var(--linkcolor);border-inline-end-color:var(--linkcolor);content:"";display:inline-block;vertical-align:middle}&>:global(.link){margin-inline-start:-.625em}}&:not(:last-child){&:after{border:.625em solid transparent;border-inline-start-color:var(--linkcolor);content:"";display:inline-block;vertical-align:middle}}&>:global(.link){background-color:var(--linkcolor);color:color-mix(in lab,var(--color) 50%,var(--fabric-text));display:inline-block;line-height:1;padding:.125em .5em;vertical-align:middle}&:hover{--linkcolor:color-mix(in lab,var(--color) 65%,var(--fabric-bg))}&:active{--linkcolor:color-mix(in lab,var(--color) 35%,var(--fabric-bg))}}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.buttonWrapper{--color:theme(colors.primary.500);border-radius:var(--rounding);font-size:1rem;& .button{background-color:var(--bg);background-image:var(--click-gradient);border-radius:inherit;color:var(--text);outline:1px solid var(--outline);&.spinOnHover:hover .buttonIcon{& :global{animation:spin 2s linear infinite}}&>*{pointer-events:none}&:not(:disabled) input[type=file]{pointer-events:auto;&::-webkit-file-upload-button{cursor:pointer;inset:0;position:absolute}}}& .rounded{border-radius:9999px}& .buttonLabel{line-height:1;order:1;padding:.5em 1em;&+.altIcon{margin-inline-start:-1em}}& .buttonChild{line-height:1;order:1;padding:.5em}& .buttonIcon{font-size:1.125em;padding:.3889em}& :global(.hotkey-label){align-self:center;order:3}& .altIcon{align-self:center;order:4;padding:.125em .5em}& [data-ref=badge]{align-self:center;margin-inline-end:.5em;order:2}}.buttonGroup{&>.buttonWrapper{flex:0 1 1em}&:not(.flex)+&:not(.flex){margin-inline-start:.5rem}}}@layer util{.buttonWrapper{&[data-size=xs]{font-size:.625rem}&[data-size=sm]{font-size:.875rem}&[data-size=md]{font-size:1.125rem}&[data-size=lg]{font-size:1.25rem}&[data-size=xl]{font-size:1.5rem}}.button{--bg:color-mix(in lab,var(--fabric-bg) 99%,var(--tint));--outline:color-mix(in lab,var(--bg) 90%,var(--fabric-text));--text:color-mix(in lab,var(--color) 80%,var(--fabric-text));--bg-hover:color-mix(in lab,var(--color) 18%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 25%,var(--fabric-bg));--bg-active:color-mix(in lab,var(--color) 36%,var(--fabric-bg));&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&[data-variant=outline]{--outline:var(--color)}&[data-variant=solid]{--outline:var(--color);--bg:color-mix(in lab,var(--color) 96%,var(--fabric-text));--text:theme(colors.white);--bg-hover:color-mix(in lab,var(--color) 90%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 80%,theme(colors.black));--bg-active:color-mix(in lab,var(--color) 70%,theme(colors.black));& :global(.hotkey-label){background-color:theme(backgroundColor.dark/30%);color:theme(colors.white/70%)}}&[data-variant=link]{--bg:transparent;--outline:transparent;background-image:none;box-shadow:none}&[data-color=invert]{--bg:theme(backgroundColor.invert);--text:color-mix(in lab,var(--color) 90%,theme(textColor.invert));--bg-hover:color-mix(in lab,var(--color) 15%,theme(backgroundColor.invert));--bg-click:color-mix(in lab,var(--color) 35%,theme(backgroundColor.invert))}}.buttonIcon[data-align=start]{order:0;&+.buttonLabel[data-colored-icon=false]{margin-inline-start:-1em}}.buttonIcon[data-align=end]{order:2;&~.buttonLabel[data-colored-icon=false]{margin-inline-end:-1em}}}@layer var{.buttonWrapper{height:unset;padding:unset;&[data-disabled=true]{cursor:not-allowed;& .button{background-image:var(--active-gradient);opacity:.5;pointer-events:none}}&[data-loading=true]{cursor:wait;& .button{background-image:var(--progress-gradient);background-size:1em 1em;pointer-events:none;& :global{animation:bgprogress .75s linear infinite}}& .button:not([data-variant=solid]){background-color:color-mix(in lab,var(--color) 15%,var(--fabric-bg))}}&:global(.btn-dashed)>.button{color:theme(colors.tint.600);outline:1px dashed theme(colors.tint.600);&[data-invalid=true]{background-color:theme(colors.danger.100);color:theme(colors.danger.600);outline:1px dashed theme(colors.danger.600)}}}.button{--tw-ring-color:var(--color);&:hover{background-color:var(--bg-hover)}&:active{background-color:var(--bg-click);background-image:var(--active-gradient);.buttonIcon,.buttonLabel{transform:translateY(1px)}}&[data-active=true],&[data-checked=true],&[data-dropdown-open=true]{background-color:var(--bg-active);background-image:none}&[data-active=true],&[data-dropdown-open=true]{pointer-events:none}}.buttonGroup{&>.buttonWrapper{margin:0;& .button[data-variant=link]{--outline:theme(backgroundColor.base)}}&:not(.vertical){&>:not(:first-child){&:before{border-inline-start:.5px solid theme(borderColor.base);content:"";inset-block:5%;inset-inline-start:-.5px;position:absolute}}&.separator>:not(:first-child){margin-inline-start:2px;&:before{inset-inline-start:-1.5px}}&>:not(:last-child) .button{border-end-end-radius:0;border-start-end-radius:0}&>:not(:first-child) .button{border-end-start-radius:0;border-start-start-radius:0}}&.vertical{&>:not(:first-child){&:before{border-block-start:.5px solid theme(borderColor.base);content:"";inset-block-start:-.5px;inset-inline:5%;position:absolute}}&.separator>:not(:first-child){margin-block-start:1px;&:before{inset-block-start:-1px}}&>:not(:last-child) .button{border-end-end-radius:0;border-end-start-radius:0}&>:not(:first-child) .button{border-start-end-radius:0;border-start-start-radius:0}}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.cardWrapper.selected{&:before{border-bottom:1rem solid transparent;border-inline-end:1rem solid transparent;border-inline-start:1rem solid theme(colors.accent.500);border-start-start-radius:var(--rounding-cap);border-top:1rem solid theme(colors.accent.500);content:""}&:after,&:before{inset-inline-start:-4px;position:absolute;top:-4px;z-index:5}&:after{color:theme(colors.white);content:"✓";line-height:1;padding:4px}}.card{background-color:var(--fabric-bg);box-shadow:0 0 0 1px theme(borderColor.muted);&>*{background-color:transparent}& .cardCover{&.dark>.cardCoverContent,&.inheritScheme:has([data-colorset=dark])>.cardCoverContent{background-image:linear-gradient(180deg,#0000 0,#0006);color:var(--white);text-shadow:0 0 2px var(--black)}&.inheritScheme:has([data-colorset=light])>.cardCoverContent,&.light>.cardCoverContent{background-image:linear-gradient(180deg,#fff0 0,#fff6);color:var(--black);text-shadow:0 0 2px var(--white)}}& .cardBody{padding:1rem}&.clickable{box-shadow:0 0 0 1px theme(borderColor.dimmed),0 1px 2px 0 var(--fabric-shadow);transition:box-shadow 0ms;&:has(.cardBody:hover):not(:has([data-inner-clickable=true]:hover)){box-shadow:0 0 0 1px theme(borderColor.dimmed),0 1px 4px 0 var(--fabric-shadow),0 8px 16px 0 color-mix(in lab,var(--fabric-shadow) 35%,#0000);transition-delay:.15s}&:has(.cardBody:active):not(:has([data-inner-clickable=true]:hover)){box-shadow:0 0 0 1px theme(borderColor.dimmed);transform:translateY(1px);transition-delay:0ms}& .cardBody{cursor:pointer;&:after{background-image:linear-gradient(175deg,hsla(0,0%,100%,.05),transparent 18%,transparent 72%,rgb(0 0 0/5%));content:"";inset:0;pointer-events:none;position:absolute;z-index:5}}}}}@layer util{.card{& .cardBody{&>*{background-color:transparent;grid-area:unset}}& .cardCover{&>[data-ref=image],&>[data-ref=video]{inset:0;position:absolute;z-index:0}& .cardCoverContent{&>*{flex:0 0 auto}}}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{padding:.25em .5em}&>.chipIcon{&+.chipLabel{margin-inline-start:-.5em}}&.clickable{background-image:var(--click-gradient);cursor:pointer;&.disabled{opacity:.5;pointer-events:none}}}}@layer var{.chip{background-color:color-mix(in lab,currentcolor 10%,var(--fabric-bg));height:unset;padding:unset;&[data-variant=outline]{box-shadow:0 0 2px color-mix(in lab,currentcolor 50%,var(--tint)) inset;outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg))}>*{color:color-mix(in lab,currentcolor 50%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 20%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 15%,var(--fabric-bg));background-image:var(--active-gradient)}&[data-dropdown-open=true]{pointer-events:none}}&[data-variant=solid]{background-color:color-mix(in lab,currentcolor 35%,var(--fabric-bg));outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg));&>*{color:color-mix(in lab,currentcolor 5%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 45%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 30%,var(--fabric-bg))}}}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.collapsable{&+&{border-top:1px solid theme(borderColor.base)}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer var{.dropdownBody{grid-template:1fr/1fr;& [data-ref=card],& [data-ref=panelGroup],& [data-ref=panel]{border-inline:0;border-top:0;box-shadow:none;grid-area:unset;outline:0}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.icon{height:1em;position:relative;vertical-align:-.125em;width:1em;&>i,&>img,&>svg{border-radius:inherit;display:block;height:1em;line-height:1;object-fit:cover;overflow:hidden;pointer-events:none;width:1em;fill:currentcolor}&>i:before{line-height:1}&[data-clickable=true]{opacity:.75;&:hover{background-color:theme(colors.text/10%);opacity:.9}&:active{opacity:.5}}}[dir=rtl] .icon[data-flip=true]{transform:scaleX(-1)}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.mediaContainer{&.mediaReel{&:after,&:before{background-image:linear-gradient(90deg,#222c 0,#222c .25rem,#fff8 0,#fff8 .75rem,#222c 0,#222c 1rem);background-position:50%;background-repeat:repeat-x;background-size:1rem;border:.125rem solid #222c;content:"";height:.5rem;inset-inline:0;position:absolute}&:before{top:0}&:after{bottom:0}}& .mediaControls{& [data-ref=button]{margin:0;&>:first-child{background-color:theme(colors.black/50%);color:#fff;&:hover{background-color:theme(colors.black/80%);color:theme(colors.primary.600)}}}& .mediaControlAction>:first-child{background-color:theme(colors.black/70%)}& .mediaControlAction+.mediaControlAction{margin-top:8px}}}}@layer util{& .mediaControls{&:hover{& .mediaControlPlaceholder{display:none}}&:not(:hover){& .mediaControlAction{display:none}}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.menuItem{--color:theme(colors.primary.DEFAULT);&[data-color=accent]{--color:theme(colors.accent.DEFAULT)}&[data-color=info]{--color:theme(colors.info.DEFAULT)}&[data-color=danger]{--color:theme(colors.danger.DEFAULT)}&[data-color=success]{--color:theme(colors.success.DEFAULT)}&[data-color=warning]{--color:theme(colors.warning.DEFAULT)}}}@layer var{.menuItem{color:color-mix(in lab,var(--color) 80%,var(--fabric-text));>*{pointer-events:none}&[data-focus=true]{background-color:color(from var(--color) srgb r g b/15%)}&:active{background-color:color(from var(--color) srgb r g b/35%)}&[data-open=true]{background-color:color(from var(--color) srgb r g b/10%)}&.active,&:global(.active){background-color:color(from var(--color) srgb r g b/20%);pointer-events:none;&>div{box-shadow:4px 0 0 var(--color) inset;:global([dir=rtl]) &{box-shadow:-4px 0 0 var(--color) inset}}}&.disabled{color:theme(textColor.tint.500);opacity:.5;pointer-events:none;&>label~*{display:none}}}.menuIcon{font-size:1.25em;padding:.3em;&.minimal{font-size:1.5em;font-weight:500;padding:.375em}}:global(.menu-list.hide-icons) .menuIcon{width:.125em}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.meter{& .meterBar{flex:1 1 1rem;height:.5em;line-height:1;max-width:12rem;min-width:1rem;&:after{width:var(--width)}}&>label{font-size:max(.75rem,.5em);line-height:1}& .meterBar[data-active=true]{&:first-child,&:nth-child(2),&:nth-child(3),&:nth-child(4),&:nth-child(5),&:nth-child(6){&:after{background-color:currentColor;opacity:.85}}&:first-child{color:#eb5e28}&:nth-child(2){color:#f9a03f}&:nth-child(3){color:#f3c053}&:nth-child(4){color:#a1c349}&:nth-child(5){color:#87a330}&:nth-child(6){color:#6a8532}}&[class*=text-accent] .meterBar[data-active=true],&[class*=text-danger] .meterBar[data-active=true],&[class*=text-info] .meterBar[data-active=true],&[class*=text-primary] .meterBar[data-active=true],&[class*=text-success] .meterBar[data-active=true],&[class*=text-warning] .meterBar[data-active=true]{color:currentColor;&:first-child:after{opacity:.2}&:nth-child(2):after{opacity:.35}&:nth-child(3):after{opacity:.5}&:nth-child(4):after{opacity:.65}&:nth-child(5):after{opacity:.8}&:nth-child(6):after{opacity:.95}}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.panel{background-color:theme(colors.bg);grid-template:"head" auto "content" 1fr/1fr;&>*{background-color:transparent}&:global(.fixed){box-shadow:0 0 18px theme(boxShadowColor.base)}& .panelHeader{background-color:theme(backgroundColor.dimmed)}& .panelAction{padding:.25rem}& .panelBody{grid-template:"head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}}@layer util{.panelGroup{&>.panel{&[data-collapsed=true]{flex:0 0 auto}&[data-collapsed=false]{flex:1 1 auto;min-height:15rem;[data-ref=panelCollapse]{color:var(--tint);opacity:.25;pointer-events:none}}}&>.panel:not(:first-child){border-start-end-radius:0;border-start-start-radius:0}&>.panel:not(:last-child){border-bottom:1px solid theme(backgroundColor.base);border-end-end-radius:0;border-end-start-radius:0}}[data-ref=asideBody]>.panelGroup>.panel{border-radius:0;outline:0}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.progressbar{box-shadow:inset 0 0 4px 0 theme(boxShadowColor.dimmed);height:1em;&>div:last-child{width:calc(var(--progress)*1%);&:after{color:var(--white);content:attr(data-label);font-size:.5em;inset-block:0;inset-inline-start:0;line-height:.5em;padding:.75em;position:absolute;text-align:center;vertical-align:middle;width:calc((100/var(--progress))*100%)}}.progressTrack{transition:width .5s;width:calc(var(--progress)*1%)}&>div:first-child{font-size:.5em;line-height:.5em;padding:.75em}}.progressAnimate{background-image:var(--progress-gradient);background-size:1rem 1rem;& :global{animation:progress .75s linear infinite}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.tabPanel{--color:theme(colors.primary.500);&>.tabList{grid-area:tablist;&>.tabButton{&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&:not(:global(.active)):hover{background-color:theme(colors.tint.100/50%);color:color-mix(in lab,var(--color) 65%,var(--fabric-text))}&:global(.active){--active-color:var(--color);color:color-mix(in lab,var(--color) 65%,var(--fabric-text));font-weight:500}}}&[data-variant=outline]{&>.tabList>.tabButton:global(.active){--active-color:theme(backgroundColor.base);--active-border:0 0 0 1px theme(borderColor.base) inset;background-color:theme(backgroundColor.base)}}&[data-variant=solid]{&>.tabList>.tabButton:global(.active){background-color:var(--color);color:theme(colors.white)}}&[data-variant=soft]{&>.tabList>.tabButton:global(.active){background-color:color-mix(in lab,var(--color) 20%,var(--fabric-bg))}}&[data-orientation=top]{grid-template:"tablist" auto "content" 1fr/1fr;padding-inline:2px;&[data-variant=outline]>.tabList,&[data-variant=soft]>.tabList,&[data-variant=solid]>.tabList{box-shadow:inset 0 -1px 0 theme(borderColor.dimmed)}}&[data-orientation=bottom]{grid-template:"content" 1fr "tablist" auto/1fr;padding-inline:2px;&[data-variant=outline]>.tabList,&[data-variant=soft]>.tabList,&[data-variant=solid]>.tabList{box-shadow:inset 0 1px 0 theme(borderColor.dimmed)}}&[data-orientation=start]{grid-template:"tablist content" 1fr/auto 1fr;padding-block:2px;&[data-variant=outline]>.tabList,&[data-variant=soft]>.tabList,&[data-variant=solid]>.tabList{box-shadow:inset -1px 0 0 theme(borderColor.dimmed)}}&[data-orientation=end]{grid-template:"content tablist" 1fr/1fr auto;padding-block:2px;&[data-variant=outline]>.tabList,&[data-variant=soft]>.tabList,&[data-variant=solid]>.tabList{box-shadow:inset 1px 0 0 theme(borderColor.dimmed)}}}}@layer util{.tabPanel{&>.tabList>.tabButton:global(.active){pointer-events:none}&[data-orientation=top]>.tabList{&>.tabButton:global(.active){box-shadow:0 -2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=bottom]>.tabList{&>.tabButton:global(.active){box-shadow:0 2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=start]>.tabList{&>.tabButton:global(.active){box-shadow:-2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=end]>.tabList{&>.tabButton:global(.active){box-shadow:2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=top]>.tabList>.tabButton{border-end-end-radius:0;border-end-start-radius:0;margin-top:2px;margin-inline:1px}&[data-orientation=bottom]>.tabList>.tabButton{border-start-end-radius:0;border-start-start-radius:0;margin-bottom:2px;margin-inline:1px}&[data-orientation=start]>.tabList>.tabButton{border-end-end-radius:0;border-start-end-radius:0;margin-block:1px;margin-inline-start:2px}&[data-orientation=end]>.tabList>.tabButton{border-end-start-radius:0;border-start-start-radius:0;margin-block:1px;margin-inline-end:2px}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.aside{--aside-bg:color-mix(in lab,var(--fabric-bg) 95%,var(--tint));--aside-border:color-mix(in lab,var(--fabric-bg) 75%,var(--tint));background-color:var(--aside-bg);&[data-align=start]{border-inline-end:1px solid var(--aside-border);grid-area:side-s;grid-template:"head resizer" auto "loader resizer" auto "content resizer" 1fr/1fr auto;& .asideHeader{grid-template-areas:"icon title actions collapse";grid-template-columns:auto 1fr auto auto}}&[data-align=end]{border-inline-start:1px solid var(--aside-border);grid-area:side-e;grid-template:"resizer head" auto "resizer loader" auto "resizer content" 1fr/auto 1fr;& .asideHeader{grid-template-areas:"collapse icon title actions";grid-template-columns:auto auto 1fr auto}& .asideCollapse{transform:scaleX(-1)}}& .asideBody{grid-area:content;grid-template:"head" auto "content" 1fr "foot" auto/1fr;&>[data-ref=content]{background-color:transparent}}& .asideHeader{color:theme(colors.primary.600);font-weight:500;&:not(:empty){border-bottom:1px solid var(--aside-border)}}& .asideTitle{grid-area:title}& .asideIcon{grid-area:icon}.asideActions{grid-area:actions}& .asideCollapse{grid-area:collapse;&:hover{background-color:color-mix(in lab,var(--fabric-text) 10%,#0000)}}& .asidePlaceholder{background-color:var(--aside-bg);grid-area:content;z-index:4}& .asideResizer{cursor:col-resize;grid-area:resizer;position:relative;width:.25rem;&:before{border:1px solid theme(colors.tint.700);border-width:0 1.5px;height:32px}&:active:before,&:hover:before{background-color:theme(colors.primary.600);border-color:theme(backgroundColor.base);border-width:0 1.25px;height:100%}}}}@layer util{.asideBody,.asideHeader{height:unset;margin:unset;width:unset}.asideBody{&>[data-ref=content]{background-color:transparent}}.aside[data-collapsed=true]{overflow:visible;position:relative;width:2rem;& .asideBody{background-color:var(--aside-bg);inset:0;position:absolute;transition:transform .15s cubic-bezier(.4,0,.2,1);z-index:-1}& .asideHeader{position:absolute;width:2rem;z-index:5}& .asideTitle{font-size:1rem;grid-area:unset;position:absolute;top:1rem}.asideIcon{margin-inline:2px}& .asideCollapse+.asideIcon,& .asideResizer{display:none}}[dir=ltr] .aside[data-align=start][data-collapsed=true],[dir=rtl] .aside[data-align=end][data-collapsed=true]{& .asideBody{grid-area:unset;right:unset;transform:translateX(-100%)}& .asideTitle{right:calc(2rem + 2px);transform:rotate(-90deg) translateY(2rem);transform-origin:100% 100%}& .asideCollapse{transform:scaleX(-1)}&[data-flyout=true] .asideBody{box-shadow:0 0 1rem 0 var(--fabric-shadow);transform:translateX(2rem);z-index:3}}[dir=ltr] .aside[data-align=end][data-collapsed=true],[dir=rtl] .aside[data-align=start][data-collapsed=true]{& .asideBody{grid-area:unset;left:unset;transform:translateX(100%)}& .asideTitle{left:calc(2rem + 2px);transform:rotate(90deg) translateY(2rem);transform-origin:0 100%}& .asideCollapse{transform:scaleX(1)}&[data-flyout=true] .asideBody{box-shadow:0 0 1rem 0 var(--fabric-shadow);transform:translateX(-2rem);z-index:3}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.errorBoundary{align-self:flex-start;background-color:theme(colors.danger.500);background-image:repeating-linear-gradient(135deg,hsla(0,0%,100%,.5) 0 4px,hsla(0,0%,100%,.2) 4px 8px);grid-area:inherit;margin:1rem;max-height:calc(100% - 2rem);& .boundaryContent{background-color:var(--fabric-bg);grid-template:"icon message" auto "detail detail" auto/auto 1fr}& .boundaryIcon{grid-area:icon}& .boundaryMessage{grid-area:message}& .boundaryDetail{grid-area:detail;grid-template-rows:auto 1fr}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.content{--fabric-content:color-mix(in lab,var(--fabric-bg) 97%,var(--tint));background-color:var(--fabric-content);overflow:auto;padding:1rem}}@layer util{.content{height:unset;margin:unset;width:unset}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.headfoot{.buttonWrapper+.buttonWrapper{margin-inline-start:.25rem}}}@layer util{.headfoot{height:unset;margin:unset;width:unset}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.page{--fabric-page:color-mix(in lab,var(--fabric-bg) 94%,var(--tint));--fabric-page-title:color-mix(in lab,var(--fabric-bg) 90%,var(--tint));background-color:var(--fabric-page);grid-template:"title title title" auto "head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto;.pageTitle{background-color:var(--fabric-page-title);color:theme(colors.primary.600);grid-area:title}}}@layer util{.pageTitle{height:unset;margin:unset;width:unset}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.row{margin:calc(var(--gutter)*-.5);&+.row{margin-top:calc(var(--gutter)*.5)}}.col{flex:0 0 auto;margin:calc(var(--gutter)*.5);max-width:calc(100% - var(--gutter, 0px));&.stretchContent>*{min-height:100%;min-width:100%}}[data-gutter="0"]{&.container,&.row{--gutter:0px}}[data-gutter=xs]{&.container,&.row{--gutter:2px}}[data-gutter=sm]{&.container,&.row{--gutter:0.25rem}}[data-gutter=md]{&.container,&.row{--gutter:0.75rem}}[data-gutter=lg]{&.container,&.row{--gutter:1rem}}[data-gutter=xl]{&.container,&.row{--gutter:1.5rem}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.section{grid-template:"head head head" auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.themeProvider{&>*{background-color:theme(backgroundColor.base)}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.viewport{--fabric-viewport:color-mix(in lab,var(--fabric-bg) 76%,var(--tint));background-color:var(--fabric-viewport);color:var(--fabric-text);grid-template:"head head head" auto "crumbbar crumbbar crumbbar" auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.alert{gap:.5rem 1rem;grid-template:"icon title" auto "icon message" auto "input input" auto "actions actions" auto/auto 1fr;margin-top:-100%;opacity:0;transition:margin .4s,opacity .3s .2s;z-index:var(--z-overlay);&[data-show=true]{margin-top:0;opacity:1}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.flyout{max-width:70vw;transition:margin .5s;width:32rem;z-index:var(--z-overlay);& .flyoutHeader{background-color:theme(backgroundColor.base);border-bottom:.5px solid theme(borderColor.dimmed)}& .flyoutBody{grid-template:"head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}&[data-align=start]{margin-inline-start:-100%}&[data-align=end]{margin-inline-end:-100%}&[data-show=true]{margin:0}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.message{margin-top:-100%;opacity:0;transition:margin .4s,opacity .3s .2s;&[data-show=true]{margin-top:0;opacity:1}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.modal{margin-top:-100%;max-height:90vh;max-width:90vw;opacity:0;transition:margin .4s,opacity .3s .2s;width:32rem;z-index:var(--z-overlay);&[data-show=true]{margin-top:0;opacity:1}& .modalHeader{background-color:theme(backgroundColor.base);border-bottom:.5px solid theme(borderColor.dimmed)}& .modalBody{grid-template:"head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.toast{margin-bottom:-100%;opacity:0;transition:margin .4s,opacity .3s .2s;&[data-show=true]{margin-bottom:0;opacity:1}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.tooltip{color:theme(backgroundColor.invert);z-index:var(--z-tooltip);&[data-color=primary]{color:theme(colors.primary.600)}&[data-color=accent]{color:theme(colors.accent.600)}&[data-color=info]{color:theme(colors.info.600)}&[data-color=danger]{color:theme(colors.danger.600)}&[data-color=success]{color:theme(colors.success.600)}&[data-color=warning]{color:theme(colors.warning.600)}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.title{line-height:1.125}.moreLink{margin:-.25rem 0 1rem;text-align:end;&>span{color:theme(colors.accent.700);cursor:pointer;font-size:.75rem;user-select:none;&:hover{color:theme(colors.accent.500);text-decoration:underline;text-underline-offset:2px}}}}@layer util{.text{-webkit-line-clamp:var(--text-clamp)}.abbr{--abbr-color:var(--accent);color:color-mix(in lab,var(--abbr-color) 50%,var(--fabric-text))}.mark{--mark-color:var(--accent);background-color:color-mix(in lab,var(--mark-color) 25%,var(--fabric-bg))}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.actionLabel{&>.actions{--width:4rem;width:0}&:not([data-disabled=true]):hover>.actions{transition:all .1s cubic-bezier(.215,.61,.355,1);transition-delay:.5s;width:var(--width)}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{@keyframes l2{0%,25%{background-position:0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);background-size:8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px}50%{background-position:0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);background-size:8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px}75%{background-position:0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% -2px,50% calc(100% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);background-size:8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px}95%,to{background-position:0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% -2px,50% calc(100% + 2px),100% 50%,100% -2px,100% calc(100% + 2px);background-size:8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px}}.bars{--c:linear-gradient(currentcolor 0 0);--r1:radial-gradient(farthest-side at bottom,currentcolor 93%,#0000);--r2:radial-gradient(farthest-side at top,currentcolor 93%,#0000);animation:l2 1s infinite alternate;aspect-ratio:1;background:var(--c),var(--r1),var(--r2),var(--c),var(--r1),var(--r2),var(--c),var(--r1),var(--r2);background-repeat:no-repeat}@keyframes l4{to{transform:rotate(1turn)}}.spinner{--b:8px;animation:l4 2s steps(10) infinite;aspect-ratio:1;background:conic-gradient(#0000 10%,currentcolor) content-box;border-radius:50%;mask:repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));mask-composite:destination-in;mask-composite:intersect}@keyframes loader{0%{transform:translateX(calc(-100%*var(--multiplier)))}to{transform:translateX(calc(100%*var(--multiplier)))}}.loader{--multiplier:1;&>div{height:calc(.125rem + 2px);&:after{animation:loader 1s cubic-bezier(.65,0,.45,1) infinite}}:global([dir=rtl]) &{--multiplier:-1}}@keyframes check-stroke{to{stroke-dashoffset:0}}@keyframes check-scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes check-fill{to{box-shadow:inset 0 0 0 1em currentcolor}}.checkAnimation{box-shadow:inset 0 0 0 currentcolor;color:theme(colors.primary.DEFAULT);height:1.5em;width:1.5em;fill:transparent;stroke-miterlimit:10;stroke-width:4px;animation:check-fill .4s ease-in-out .4s forwards,check-scale .3s ease-in-out .9s both;animation-delay:.75s;& .circlePart{fill:transparent;stroke:currentcolor;stroke-dasharray:166;stroke-dashoffset:166;stroke-miterlimit:10;stroke-width:8px;animation:check-stroke .6s cubic-bezier(.65,0,.45,1) forwards;animation-delay:.25s}& .iconPart{transform-origin:50% 50%;stroke:currentcolor;stroke-dasharray:48;stroke-dashoffset:48;animation:check-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation-delay:.75s}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.avatar{border-radius:var(--rounding);box-shadow:0 0 1px theme(borderColor.base);height:1em;vertical-align:-.125em;width:1em;&>i,&>img,&>svg{background-color:theme(backgroundColor.dimmed);border-radius:inherit;display:block;height:1em;line-height:1;object-fit:cover;overflow:hidden;pointer-events:none;width:1em;fill:currentcolor}&>i:before{line-height:1}&>.imagePlaceholder{z-index:-1}}.avatarGroup{&>.avatar{box-shadow:0 0 0 1px theme(borderColor.muted),0 0 0 .125em var(--fabric-bg);&:not(:first-child){margin-inline-start:-.125em}}& .avatarGroup--extra{border-radius:inherit;font-size:inherit;height:1em;width:1em}}}@layer util{.avatarGroup{&>.avatar{border-radius:inherit;font-size:inherit}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{@keyframes pinger{0%{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(3)}}.badge{--tw-bg-opacity:1;background-color:theme(colors.tint.200/var(--tw-bg-opacity));box-sizing:content-box;color:theme(textColor.base);outline:.5px solid theme(backgroundColor.base);&>span{font-size:.625em;font-weight:500;line-height:1;vertical-align:.125em}&[data-ping=true]{--translate:50%;&:before{animation:pinger 1s linear infinite;background-color:inherit;border-radius:999px;content:"";inset:0;position:absolute;z-index:-1}}&:not([data-ping=true]){--translate:0.75rem;min-width:1em}&[data-placement=top]{left:50%;top:0;transform:translate(-50%,-50%)}&[data-placement=top-start]{inset-inline-start:0;top:0;:global([dir=ltr]) &{transform:translate(calc(var(--translate)*-1),-50%)}:global([dir=rtl]) &{transform:translate(calc(var(--translate)*1),-50%)}}&[data-placement=top-end]{inset-inline-end:0;top:0;:global([dir=ltr]) &{transform:translate(calc(var(--translate)*1),-50%)}:global([dir=rtl]) &{transform:translate(calc(var(--translate)*-1),-50%)}}&[data-placement=bottom]{bottom:0;left:50%;transform:translate(-50%,50%)}&[data-placement=bottom-start]{bottom:0;inset-inline-start:0;:global([dir=ltr]) &{transform:translate(calc(var(--translate)*-1),-50%)}:global([dir=rtl]) &{transform:translate(calc(var(--translate)*1),-50%)}}&[data-placement=bottom-end]{bottom:0;inset-inline-end:0;:global([dir=ltr]) &{transform:translate(calc(var(--translate)*1),-50%)}:global([dir=rtl]) &{transform:translate(calc(var(--translate)*-1),-50%)}}&[data-placement=start]{inset-inline-start:0;top:50%;:global([dir=ltr]) &{transform:translate(-50%,-50%)}:global([dir=rtl]) &{transform:translate(50%,-50%)}}&[data-placement=end]{inset-inline-end:0;top:50%;:global([dir=ltr]) &{transform:translate(50%,-50%)}:global([dir=rtl]) &{transform:translate(-50%,-50%)}}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.breadcrumbOverflow,.breadcrumbs{--color:theme(colors.primary.DEFAULT);&[data-color=accent]{--color:theme(colors.accent.DEFAULT)}&[data-color=info]{--color:theme(colors.info.DEFAULT)}&[data-color=danger]{--color:theme(colors.danger.DEFAULT)}&[data-color=success]{--color:theme(colors.success.DEFAULT)}&[data-color=warning]{--color:theme(colors.warning.DEFAULT)}& :global(.link){padding:.25em .5em;text-decoration:none}}.breadcrumbOverflow,.breadcrumbs[data-variant=classic]{& :global(.link){color:color-mix(in lab,var(--color) 90%,var(--fabric-text))}& :global(.link):hover{background-color:theme(colors.tint.50/50%);color:color-mix(in lab,var(--color) 99%,var(--fabric-text));text-decoration:underline}& :global(.link):active{background-color:theme(colors.tint.50);color:color-mix(in lab,var(--color) 85%,var(--fabric-text))}}.breadcrumbs[data-variant=classic]{&>.breadcrumbLink{list-style:none;&:after{color:theme(colors.tint.300);content:attr(data-separator);display:inline-block;margin-inline:.125em}&:last-child:after{content:unset}}}[data-ref=viewport] .breadcrumbs{grid-area:crumbbar;padding:0 .25rem}}@layer var{.breadcrumbs[data-variant=classic]{&>:global(.link){max-width:24rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}&>.breadcrumbLink:last-child>:global(.link){color:theme(colors.tint.600);pointer-events:none}}.breadcrumbs[data-variant=modern]{&>.breadcrumbLink{--linkcolor:color-mix(in lab,var(--color) 50%,var(--fabric-bg));border-radius:var(--rounding);list-style:none;position:relative;&:last-child{--color:theme(colors.tint.500);pointer-events:none}&:first-child>:global(.link){border-end-start-radius:var(--rounding);border-start-start-radius:var(--rounding)}&:last-child>:global(.link){border-end-end-radius:var(--rounding);border-start-end-radius:var(--rounding)}&:not(:first-child){margin-inline-start:-1em;&:before{border:.625em solid transparent;border-block-color:var(--linkcolor);border-inline-end-color:var(--linkcolor);content:"";display:inline-block;vertical-align:middle}&>:global(.link){margin-inline-start:-.625em}}&:not(:last-child){&:after{border:.625em solid transparent;border-inline-start-color:var(--linkcolor);content:"";display:inline-block;vertical-align:middle}}&>:global(.link){background-color:var(--linkcolor);color:color-mix(in lab,var(--color) 50%,var(--fabric-text));display:inline-block;line-height:1;padding:.125em .5em;vertical-align:middle}&:hover{--linkcolor:color-mix(in lab,var(--color) 65%,var(--fabric-bg))}&:active{--linkcolor:color-mix(in lab,var(--color) 35%,var(--fabric-bg))}}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.buttonWrapper{--color:theme(colors.primary.500);border-radius:var(--rounding);font-size:1rem;& .button{background-color:var(--bg);background-image:var(--click-gradient);border-radius:inherit;color:var(--text);outline:1px solid var(--outline);&.spinOnHover:hover .buttonIcon{& :global{animation:spin 2s linear infinite}}&>*{pointer-events:none}&:not(:disabled) input[type=file]{pointer-events:auto;&::-webkit-file-upload-button{cursor:pointer;inset:0;position:absolute}}}& .rounded{border-radius:9999px}& .buttonLabel{line-height:1;order:1;padding:.5em 1em;&+.altIcon{margin-inline-start:-1em}}& .buttonChild{line-height:1;order:1;padding:.5em}& .buttonIcon{font-size:1.125em;padding:.3889em}& :global(.hotkey-label){align-self:center;order:3}& .altIcon{align-self:center;order:4;padding:.125em .5em}& [data-ref=badge]{align-self:center;margin-inline-end:.5em;order:2}}.buttonGroup{&>.buttonWrapper{flex:0 1 1em}&:not(.flex)+&:not(.flex){margin-inline-start:.5rem}}}@layer util{.buttonWrapper{&[data-size=xs]{font-size:.625rem}&[data-size=sm]{font-size:.875rem}&[data-size=md]{font-size:1.125rem}&[data-size=lg]{font-size:1.25rem}&[data-size=xl]{font-size:1.5rem}}.button{--bg:color-mix(in lab,var(--fabric-bg) 99%,var(--tint));--outline:color-mix(in lab,var(--bg) 90%,var(--fabric-text));--text:color-mix(in lab,var(--color) 80%,var(--fabric-text));--bg-hover:color-mix(in lab,var(--color) 18%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 25%,var(--fabric-bg));--bg-active:color-mix(in lab,var(--color) 36%,var(--fabric-bg));&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&[data-variant=outline]{--outline:var(--color)}&[data-variant=solid]{--outline:var(--color);--bg:color-mix(in lab,var(--color) 96%,var(--fabric-text));--text:theme(colors.white);--bg-hover:color-mix(in lab,var(--color) 90%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 80%,theme(colors.black));--bg-active:color-mix(in lab,var(--color) 70%,theme(colors.black));& :global(.hotkey-label){background-color:theme(backgroundColor.dark/30%);color:theme(colors.white/70%)}}&[data-variant=link]{--bg:transparent;--outline:transparent;background-image:none;box-shadow:none}&[data-color=invert]{--bg:theme(backgroundColor.invert);--text:color-mix(in lab,var(--color) 90%,theme(textColor.invert));--bg-hover:color-mix(in lab,var(--color) 15%,theme(backgroundColor.invert));--bg-click:color-mix(in lab,var(--color) 35%,theme(backgroundColor.invert))}}.buttonIcon[data-align=start]{order:0;&+.buttonLabel[data-colored-icon=false]{margin-inline-start:-1em}}.buttonIcon[data-align=end]{order:2;&~.buttonLabel[data-colored-icon=false]{margin-inline-end:-1em}}}@layer var{.buttonWrapper{height:unset;padding:unset;&[data-disabled=true]{cursor:not-allowed;& .button{background-image:var(--active-gradient);opacity:.5;pointer-events:none}}&[data-loading=true]{cursor:wait;& .button{background-image:var(--progress-gradient);background-size:1em 1em;pointer-events:none;& :global{animation:bgprogress .75s linear infinite}}& .button:not([data-variant=solid]){background-color:color-mix(in lab,var(--color) 15%,var(--fabric-bg))}}&:global(.btn-dashed)>.button{color:theme(colors.tint.600);outline:1px dashed theme(colors.tint.600);&[data-invalid=true]{background-color:theme(colors.danger.100);color:theme(colors.danger.600);outline:1px dashed theme(colors.danger.600)}}}.button{--tw-ring-color:var(--color);&:hover{background-color:var(--bg-hover)}&:active{background-color:var(--bg-click);background-image:var(--active-gradient);.buttonIcon,.buttonLabel{transform:translateY(1px)}}&[data-active=true],&[data-checked=true],&[data-dropdown-open=true]{background-color:var(--bg-active);background-image:none}&[data-active=true],&[data-dropdown-open=true]{pointer-events:none}}.buttonGroup{&>.buttonWrapper{margin:0;& .button[data-variant=link]{--outline:theme(backgroundColor.base)}}&:not(.vertical){&>:not(:first-child){&:before{border-inline-start:.5px solid theme(borderColor.base);content:"";inset-block:5%;inset-inline-start:-.5px;position:absolute}}&.separator>:not(:first-child){margin-inline-start:2px;&:before{inset-inline-start:-1.5px}}&>:not(:last-child) .button{border-end-end-radius:0;border-start-end-radius:0}&>:not(:first-child) .button{border-end-start-radius:0;border-start-start-radius:0}}&.vertical{&>:not(:first-child){&:before{border-block-start:.5px solid theme(borderColor.base);content:"";inset-block-start:-.5px;inset-inline:5%;position:absolute}}&.separator>:not(:first-child){margin-block-start:1px;&:before{inset-block-start:-1px}}&>:not(:last-child) .button{border-end-end-radius:0;border-end-start-radius:0}&>:not(:first-child) .button{border-start-end-radius:0;border-start-start-radius:0}}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.cardWrapper.selected{&:before{border-bottom:1rem solid transparent;border-inline-end:1rem solid transparent;border-inline-start:1rem solid theme(colors.accent.500);border-start-start-radius:var(--rounding-cap);border-top:1rem solid theme(colors.accent.500);content:""}&:after,&:before{inset-inline-start:-4px;position:absolute;top:-4px;z-index:5}&:after{color:theme(colors.white);content:"✓";line-height:1;padding:4px}}.card{background-color:var(--fabric-bg);box-shadow:0 0 0 1px theme(borderColor.muted);&>*{background-color:transparent}& .cardCover{&.dark>.cardCoverContent,&.inheritScheme:has([data-colorset=dark])>.cardCoverContent{background-image:linear-gradient(180deg,#0000 0,#0006);color:var(--white);text-shadow:0 0 2px var(--black)}&.inheritScheme:has([data-colorset=light])>.cardCoverContent,&.light>.cardCoverContent{background-image:linear-gradient(180deg,#fff0 0,#fff6);color:var(--black);text-shadow:0 0 2px var(--white)}}& .cardBody{padding:1rem}&.clickable{box-shadow:0 0 0 1px theme(borderColor.dimmed),0 1px 2px 0 var(--fabric-shadow);transition:box-shadow 0ms;&:has(.cardBody:hover):not(:has([data-inner-clickable=true]:hover)){box-shadow:0 0 0 1px theme(borderColor.dimmed),0 1px 4px 0 var(--fabric-shadow),0 8px 16px 0 color-mix(in lab,var(--fabric-shadow) 35%,#0000);transition-delay:.15s}&:has(.cardBody:active):not(:has([data-inner-clickable=true]:hover)){box-shadow:0 0 0 1px theme(borderColor.dimmed);transform:translateY(1px);transition-delay:0ms}& .cardBody{cursor:pointer;&:after{background-image:linear-gradient(175deg,hsla(0,0%,100%,.05),transparent 18%,transparent 72%,rgb(0 0 0/5%));content:"";inset:0;pointer-events:none;position:absolute;z-index:5}}}}}@layer util{.card{& .cardBody{&>*{background-color:transparent;grid-area:unset}}& .cardCover{&>[data-ref=image],&>[data-ref=video]{inset:0;position:absolute;z-index:0}& .cardCoverContent{&>*{flex:0 0 auto}}}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{padding:.25em .5em}&>.chipIcon{&+.chipLabel{margin-inline-start:-.5em}}&.clickable{background-image:var(--click-gradient);cursor:pointer;&.disabled{opacity:.5;pointer-events:none}}}}@layer var{.chip{background-color:color-mix(in lab,currentcolor 10%,var(--fabric-bg));height:unset;padding:unset;&[data-variant=outline]{box-shadow:0 0 2px color-mix(in lab,currentcolor 50%,var(--tint)) inset;outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg))}>*{color:color-mix(in lab,currentcolor 50%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 20%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 15%,var(--fabric-bg));background-image:var(--active-gradient)}&[data-dropdown-open=true]{pointer-events:none}}&[data-variant=solid]{background-color:color-mix(in lab,currentcolor 35%,var(--fabric-bg));outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg));&>*{color:color-mix(in lab,currentcolor 5%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 45%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 30%,var(--fabric-bg))}}}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.collapsable{&+&{border-top:1px solid theme(borderColor.base)}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer var{.dropdownBody{grid-template:1fr/1fr;& [data-ref=card],& [data-ref=panelGroup],& [data-ref=panel]{border-inline:0;border-top:0;box-shadow:none;grid-area:unset;outline:0}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.icon{height:1em;position:relative;vertical-align:-.125em;width:1em;&>i,&>img,&>svg{border-radius:inherit;display:block;height:1em;line-height:1;object-fit:cover;overflow:hidden;pointer-events:none;width:1em;fill:currentcolor}&>i:before{line-height:1}&[data-clickable=true]{opacity:.75;&:hover{background-color:theme(colors.text/10%);opacity:.9}&:active{opacity:.5}}}[dir=rtl] .icon[data-flip=true]{transform:scaleX(-1)}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.mediaContainer{&.mediaReel{&:after,&:before{background-image:linear-gradient(90deg,#222c 0,#222c .25rem,#fff8 0,#fff8 .75rem,#222c 0,#222c 1rem);background-position:50%;background-repeat:repeat-x;background-size:1rem;border:.125rem solid #222c;content:"";height:.5rem;inset-inline:0;position:absolute}&:before{top:0}&:after{bottom:0}}& .mediaControls{& [data-ref=button]{margin:0;&>:first-child{background-color:theme(colors.black/50%);color:#fff;&:hover{background-color:theme(colors.black/80%);color:theme(colors.primary.600)}}}& .mediaControlAction>:first-child{background-color:theme(colors.black/70%)}& .mediaControlAction+.mediaControlAction{margin-top:8px}}}}@layer util{& .mediaControls{&:hover{& .mediaControlPlaceholder{display:none}}&:not(:hover){& .mediaControlAction{display:none}}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.menuItem{--color:theme(colors.primary.DEFAULT);&[data-color=accent]{--color:theme(colors.accent.DEFAULT)}&[data-color=info]{--color:theme(colors.info.DEFAULT)}&[data-color=danger]{--color:theme(colors.danger.DEFAULT)}&[data-color=success]{--color:theme(colors.success.DEFAULT)}&[data-color=warning]{--color:theme(colors.warning.DEFAULT)}}}@layer var{.menuItem{color:color-mix(in lab,var(--color) 80%,var(--fabric-text));>*{pointer-events:none}&[data-focus=true]{background-color:color(from var(--color) srgb r g b/15%)}&:active{background-color:color(from var(--color) srgb r g b/35%)}&[data-open=true]{background-color:color(from var(--color) srgb r g b/10%)}&.active,&:global(.active){background-color:color(from var(--color) srgb r g b/20%);pointer-events:none;&>div{box-shadow:4px 0 0 var(--color) inset;:global([dir=rtl]) &{box-shadow:-4px 0 0 var(--color) inset}}}&.disabled{color:theme(textColor.tint.500);opacity:.5;pointer-events:none;&>label~*{display:none}}}.menuIcon{font-size:1.25em;padding:.3em;&.minimal{font-size:1.5em;font-weight:500;padding:.375em}}:global(.menu-list.hide-icons) .menuIcon{width:.125em}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.meter{& .meterBar{flex:1 1 1rem;height:.5em;line-height:1;max-width:12rem;min-width:1rem;&:after{width:var(--width)}}&>label{font-size:max(.75rem,.5em);line-height:1}& .meterBar[data-active=true]{&:first-child,&:nth-child(2),&:nth-child(3),&:nth-child(4),&:nth-child(5),&:nth-child(6){&:after{background-color:currentColor;opacity:.85}}&:first-child{color:#eb5e28}&:nth-child(2){color:#f9a03f}&:nth-child(3){color:#f3c053}&:nth-child(4){color:#a1c349}&:nth-child(5){color:#87a330}&:nth-child(6){color:#6a8532}}&[class*=text-accent] .meterBar[data-active=true],&[class*=text-danger] .meterBar[data-active=true],&[class*=text-info] .meterBar[data-active=true],&[class*=text-primary] .meterBar[data-active=true],&[class*=text-success] .meterBar[data-active=true],&[class*=text-warning] .meterBar[data-active=true]{color:currentColor;&:first-child:after{opacity:.2}&:nth-child(2):after{opacity:.35}&:nth-child(3):after{opacity:.5}&:nth-child(4):after{opacity:.65}&:nth-child(5):after{opacity:.8}&:nth-child(6):after{opacity:.95}}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.panel{background-color:theme(colors.bg);grid-template:"head" auto "content" 1fr/1fr;&>*{background-color:transparent}&:global(.fixed){box-shadow:0 0 18px theme(boxShadowColor.base)}& .panelHeader{background-color:theme(backgroundColor.dimmed)}& .panelAction{padding:.25rem}& .panelBody{grid-template:"head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}}@layer util{.panelGroup{&>.panel{&[data-collapsed=true]{flex:0 0 auto}&[data-collapsed=false]{flex:1 1 auto;min-height:15rem;[data-ref=panelCollapse]{color:var(--tint);opacity:.25;pointer-events:none}}}&>.panel:not(:first-child){border-start-end-radius:0;border-start-start-radius:0}&>.panel:not(:last-child){border-bottom:1px solid theme(backgroundColor.base);border-end-end-radius:0;border-end-start-radius:0}}[data-ref=asideBody]>.panelGroup>.panel{border-radius:0;outline:0}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.progressbar{box-shadow:inset 0 0 4px 0 theme(boxShadowColor.dimmed);height:1em;&>div:last-child{width:calc(var(--progress)*1%);&:after{color:var(--white);content:attr(data-label);font-size:.5em;inset-block:0;inset-inline-start:0;line-height:.5em;padding:.75em;position:absolute;text-align:center;vertical-align:middle;width:calc((100/var(--progress))*100%)}}.progressTrack{transition:width .5s;width:calc(var(--progress)*1%)}&>div:first-child{font-size:.5em;line-height:.5em;padding:.75em}}.progressAnimate{background-image:var(--progress-gradient);background-size:1rem 1rem;& :global{animation:progress .75s linear infinite}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.tabPanel{--color:theme(colors.primary.500);&>.tabList{grid-area:tablist;&>.tabButton{&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&:not(:global(.active)):hover{background-color:theme(colors.tint.100/50%);color:color-mix(in lab,var(--color) 65%,var(--fabric-text))}&:global(.active){--active-color:var(--color);color:color-mix(in lab,var(--color) 65%,var(--fabric-text));font-weight:500}}}&[data-variant=outline]{&>.tabList>.tabButton:global(.active){--active-color:theme(backgroundColor.base);--active-border:0 0 0 1px theme(borderColor.base) inset;background-color:theme(backgroundColor.base)}}&[data-variant=solid]{&>.tabList>.tabButton:global(.active){background-color:var(--color);color:theme(colors.white)}}&[data-variant=soft]{&>.tabList>.tabButton:global(.active){background-color:color-mix(in lab,var(--color) 20%,var(--fabric-bg))}}&[data-orientation=top]{grid-template:"tablist" auto "content" 1fr/1fr;padding-inline:2px;&[data-variant=outline]>.tabList,&[data-variant=soft]>.tabList,&[data-variant=solid]>.tabList{box-shadow:inset 0 -1px 0 theme(borderColor.dimmed)}}&[data-orientation=bottom]{grid-template:"content" 1fr "tablist" auto/1fr;padding-inline:2px;&[data-variant=outline]>.tabList,&[data-variant=soft]>.tabList,&[data-variant=solid]>.tabList{box-shadow:inset 0 1px 0 theme(borderColor.dimmed)}}&[data-orientation=start]{grid-template:"tablist content" 1fr/auto 1fr;padding-block:2px;&[data-variant=outline]>.tabList,&[data-variant=soft]>.tabList,&[data-variant=solid]>.tabList{box-shadow:inset -1px 0 0 theme(borderColor.dimmed)}}&[data-orientation=end]{grid-template:"content tablist" 1fr/1fr auto;padding-block:2px;&[data-variant=outline]>.tabList,&[data-variant=soft]>.tabList,&[data-variant=solid]>.tabList{box-shadow:inset 1px 0 0 theme(borderColor.dimmed)}}}}@layer util{.tabPanel{&>.tabList>.tabButton:global(.active){pointer-events:none}&[data-orientation=top]>.tabList{&>.tabButton:global(.active){box-shadow:0 -2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=bottom]>.tabList{&>.tabButton:global(.active){box-shadow:0 2px 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=start]>.tabList{&>.tabButton:global(.active){box-shadow:-2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=end]>.tabList{&>.tabButton:global(.active){box-shadow:2px 0 0 var(--active-color) inset,var(--active-border,0 0 0 transparent)}}&[data-orientation=top]>.tabList>.tabButton{border-end-end-radius:0;border-end-start-radius:0;margin-top:2px;margin-inline:1px}&[data-orientation=bottom]>.tabList>.tabButton{border-start-end-radius:0;border-start-start-radius:0;margin-bottom:2px;margin-inline:1px}&[data-orientation=start]>.tabList>.tabButton{border-end-end-radius:0;border-start-end-radius:0;margin-block:1px;margin-inline-start:2px}&[data-orientation=end]>.tabList>.tabButton{border-end-start-radius:0;border-start-start-radius:0;margin-block:1px;margin-inline-end:2px}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.aside{--aside-bg:color-mix(in lab,var(--fabric-bg) 95%,var(--tint));--aside-border:color-mix(in lab,var(--fabric-bg) 75%,var(--tint));background-color:var(--aside-bg);&[data-align=start]{border-inline-end:1px solid var(--aside-border);grid-area:side-s;grid-template:"head resizer" auto "loader resizer" auto "content resizer" 1fr/1fr auto;& .asideHeader{grid-template-areas:"icon title actions collapse";grid-template-columns:auto 1fr auto auto}}&[data-align=end]{border-inline-start:1px solid var(--aside-border);grid-area:side-e;grid-template:"resizer head" auto "resizer loader" auto "resizer content" 1fr/auto 1fr;& .asideHeader{grid-template-areas:"collapse icon title actions";grid-template-columns:auto auto 1fr auto}& .asideCollapse{transform:scaleX(-1)}}& .asideBody{grid-area:content;grid-template:"head" auto "content" 1fr "foot" auto/1fr;&>[data-ref=content]{background-color:transparent}}& .asideHeader{color:theme(colors.primary.600);font-weight:500;&:not(:empty){border-bottom:1px solid var(--aside-border)}}& .asideTitle{grid-area:title}& .asideIcon{grid-area:icon}.asideActions{grid-area:actions}& .asideCollapse{grid-area:collapse;&:hover{background-color:color-mix(in lab,var(--fabric-text) 10%,#0000)}}& .asidePlaceholder{background-color:var(--aside-bg);grid-area:content;z-index:4}& .asideResizer{cursor:col-resize;grid-area:resizer;position:relative;width:.25rem;&:before{border:1px solid theme(colors.tint.700);border-width:0 1.5px;height:32px}&:active:before,&:hover:before{background-color:theme(colors.primary.600);border-color:theme(backgroundColor.base);border-width:0 1.25px;height:100%}}}}@layer util{.asideBody,.asideHeader{height:unset;margin:unset;width:unset}.asideBody{&>[data-ref=content]{background-color:transparent}}.aside[data-collapsed=true]{overflow:visible;position:relative;width:2rem;& .asideBody{background-color:var(--aside-bg);inset:0;position:absolute;transition:transform .15s cubic-bezier(.4,0,.2,1);z-index:-1}& .asideHeader{position:absolute;width:2rem;z-index:5}& .asideTitle{font-size:1rem;grid-area:unset;position:absolute;top:1rem}.asideIcon{margin-inline:2px}& .asideCollapse+.asideIcon,& .asideResizer{display:none}}[dir=ltr] .aside[data-align=start][data-collapsed=true],[dir=rtl] .aside[data-align=end][data-collapsed=true]{& .asideBody{grid-area:unset;right:unset;transform:translateX(-100%)}& .asideTitle{right:calc(2rem + 2px);transform:rotate(-90deg) translateY(2rem);transform-origin:100% 100%}& .asideCollapse{transform:scaleX(-1)}&[data-flyout=true] .asideBody{box-shadow:0 0 1rem 0 var(--fabric-shadow);transform:translateX(2rem);z-index:3}}[dir=ltr] .aside[data-align=end][data-collapsed=true],[dir=rtl] .aside[data-align=start][data-collapsed=true]{& .asideBody{grid-area:unset;left:unset;transform:translateX(100%)}& .asideTitle{left:calc(2rem + 2px);transform:rotate(90deg) translateY(2rem);transform-origin:0 100%}& .asideCollapse{transform:scaleX(1)}&[data-flyout=true] .asideBody{box-shadow:0 0 1rem 0 var(--fabric-shadow);transform:translateX(-2rem);z-index:3}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.errorBoundary{align-self:flex-start;background-color:theme(colors.danger.500);background-image:repeating-linear-gradient(135deg,hsla(0,0%,100%,.5) 0 4px,hsla(0,0%,100%,.2) 4px 8px);grid-area:inherit;margin:1rem;max-height:calc(100% - 2rem);& .boundaryContent{background-color:var(--fabric-bg);grid-template:"icon message" auto "detail detail" auto/auto 1fr}& .boundaryIcon{grid-area:icon}& .boundaryMessage{grid-area:message}& .boundaryDetail{grid-area:detail;grid-template-rows:auto 1fr}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.content{--fabric-content:color-mix(in lab,var(--fabric-bg) 97%,var(--tint));background-color:var(--fabric-content);overflow:auto;padding:1rem}}@layer util{.content{height:unset;margin:unset;width:unset}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.headfoot{.buttonWrapper+.buttonWrapper{margin-inline-start:.25rem}}}@layer util{.headfoot{height:unset;margin:unset;width:unset}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.page{--fabric-page:color-mix(in lab,var(--fabric-bg) 94%,var(--tint));--fabric-page-title:color-mix(in lab,var(--fabric-bg) 90%,var(--tint));background-color:var(--fabric-page);grid-template:"title title title" auto "head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto;.pageTitle{background-color:var(--fabric-page-title);color:theme(colors.primary.600);grid-area:title}}}@layer util{.pageTitle{height:unset;margin:unset;width:unset}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.row{margin:calc(var(--gutter)*-.5);&+.row{margin-top:calc(var(--gutter)*.5)}}.col{flex:0 0 auto;margin:calc(var(--gutter)*.5);max-width:calc(100% - var(--gutter, 0px));&.stretchContent>*{min-height:100%;min-width:100%}}[data-gutter="0"]{&.container,&.row{--gutter:0px}}[data-gutter=xs]{&.container,&.row{--gutter:2px}}[data-gutter=sm]{&.container,&.row{--gutter:0.25rem}}[data-gutter=md]{&.container,&.row{--gutter:0.75rem}}[data-gutter=lg]{&.container,&.row{--gutter:1rem}}[data-gutter=xl]{&.container,&.row{--gutter:1.5rem}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.section{grid-template:"head head head" auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.themeProvider{&>*{background-color:theme(backgroundColor.base)}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.viewport{--fabric-viewport:color-mix(in lab,var(--fabric-bg) 76%,var(--tint));background-color:var(--fabric-viewport);color:var(--fabric-text);grid-template:"head head head" auto "crumbbar crumbbar crumbbar" auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.alert{gap:.5rem 1rem;grid-template:"icon title" auto "icon message" auto "input input" auto "actions actions" auto/auto 1fr;margin-top:-100%;opacity:0;transition:margin .4s,opacity .3s .2s;z-index:var(--z-overlay);&[data-show=true]{margin-top:0;opacity:1}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.flyout{max-width:70vw;transition:margin .5s;width:32rem;z-index:var(--z-overlay);& .flyoutHeader{background-color:theme(backgroundColor.base);border-bottom:.5px solid theme(borderColor.dimmed)}& .flyoutBody{grid-template:"head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}&[data-align=start]{margin-inline-start:-100%}&[data-align=end]{margin-inline-end:-100%}&[data-show=true]{margin:0}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.message{margin-top:-100%;opacity:0;transition:margin .4s,opacity .3s .2s;&[data-show=true]{margin-top:0;opacity:1}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.modal{margin-top:-100%;max-height:90vh;max-width:90vw;opacity:0;transition:margin .4s,opacity .3s .2s;width:32rem;z-index:var(--z-overlay);&[data-show=true]{margin-top:0;opacity:1}& .modalHeader{background-color:theme(backgroundColor.base);border-bottom:.5px solid theme(borderColor.dimmed)}& .modalBody{grid-template:"head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.toast{margin-bottom:-100%;opacity:0;transition:margin .4s,opacity .3s .2s;&[data-show=true]{margin-bottom:0;opacity:1}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.tooltip{color:theme(backgroundColor.invert);z-index:var(--z-tooltip);&[data-color=primary]{color:theme(colors.primary.600)}&[data-color=accent]{color:theme(colors.accent.600)}&[data-color=info]{color:theme(colors.info.600)}&[data-color=danger]{color:theme(colors.danger.600)}&[data-color=success]{color:theme(colors.success.600)}&[data-color=warning]{color:theme(colors.warning.600)}}}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer comp{.title{line-height:1.125}.moreLink{margin:-.25rem 0 1rem;text-align:end;&>span{color:theme(colors.accent.700);cursor:pointer;font-size:.75rem;user-select:none;&:hover{color:theme(colors.accent.500);text-decoration:underline;text-underline-offset:2px}}}}@layer util{.text{-webkit-line-clamp:var(--text-clamp)}.abbr{--abbr-color:var(--accent);color:color-mix(in lab,var(--abbr-color) 50%,var(--fabric-text))}.mark{--mark-color:var(--accent);background-color:color-mix(in lab,var(--mark-color) 25%,var(--fabric-bg))}}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { type MouseEventHandler } from "react";
|
|
2
|
-
import { type AriaProps, type ChildrenProp, type ColorType, type CssProp, type PolymorphicProps, type RefProp, type SizeType } from "../types";
|
|
3
|
-
export interface LinkProps extends ChildrenProp, CssProp, RefProp, AriaProps {
|
|
4
|
-
/**
|
|
5
|
-
* link background (CSS color / tailwind color)
|
|
6
|
-
*/
|
|
7
|
-
bg?: ColorType | string;
|
|
8
|
-
/**
|
|
9
|
-
* link color (CSS color / tailwind color)
|
|
10
|
-
*/
|
|
11
|
-
color?: ColorType | string;
|
|
12
|
-
/**
|
|
13
|
-
* link size
|
|
14
|
-
*/
|
|
15
|
-
size?: SizeType | number | string;
|
|
16
|
-
/**
|
|
17
|
-
* font family
|
|
18
|
-
*/
|
|
19
|
-
family?: "sans" | "serif" | "mono";
|
|
20
|
-
onClick?: MouseEventHandler;
|
|
21
|
-
}
|
|
22
|
-
/**
|
|
23
|
-
* Typography link component
|
|
24
|
-
*/
|
|
25
|
-
export declare const Link: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "a">({ ref, as, children, className, bg, color, family, size, ...aria }: LinkProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* React Fabric
|
|
3
|
-
* @version: 1.0.0
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* The MIT License (MIT)
|
|
7
|
-
* Copyright (c) 2024 Adarsh Pastakia
|
|
8
|
-
*
|
|
9
|
-
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software
|
|
10
|
-
* and associated documentation files (the "Software"), to deal in the Software without restriction,
|
|
11
|
-
* including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
|
|
12
|
-
* and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
|
|
13
|
-
* subject to the following conditions:
|
|
14
|
-
*
|
|
15
|
-
* The above copyright notice and this permission notice shall be included in all copies or substantial
|
|
16
|
-
* portions of the Software.
|
|
17
|
-
*
|
|
18
|
-
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
|
|
19
|
-
* TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
|
|
20
|
-
* THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
|
21
|
-
* TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
22
|
-
*/
|
|
23
|
-
|
|
24
|
-
@layer comp {
|
|
25
|
-
.tooltip {
|
|
26
|
-
z-index: var(--z-tooltip);
|
|
27
|
-
color: theme(backgroundColor.invert);
|
|
28
|
-
|
|
29
|
-
&[data-color="primary"] {
|
|
30
|
-
color: theme(colors.primary.600);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
&[data-color="accent"] {
|
|
34
|
-
color: theme(colors.accent.600);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
&[data-color="info"] {
|
|
38
|
-
color: theme(colors.info.600);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
&[data-color="danger"] {
|
|
42
|
-
color: theme(colors.danger.600);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
&[data-color="success"] {
|
|
46
|
-
color: theme(colors.success.600);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
&[data-color="warning"] {
|
|
50
|
-
color: theme(colors.warning.600);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
}
|