@flowstack-ui/brick 0.1.9 → 0.1.12
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 +9 -6
- package/dist/agents/accordion.json +8 -2
- package/dist/agents/accordion.md +3 -1
- package/dist/agents/alert-dialog.json +111 -0
- package/dist/agents/alert-dialog.md +53 -0
- package/dist/agents/app-bar.json +5 -4
- package/dist/agents/app-bar.md +4 -3
- package/dist/agents/aspect-ratio.json +80 -0
- package/dist/agents/aspect-ratio.md +45 -0
- package/dist/agents/avatar.json +92 -0
- package/dist/agents/avatar.md +49 -0
- package/dist/agents/badge.json +26 -8
- package/dist/agents/badge.md +11 -6
- package/dist/agents/bleed.json +54 -0
- package/dist/agents/bleed.md +39 -0
- package/dist/agents/blockquote.json +68 -0
- package/dist/agents/blockquote.md +42 -0
- package/dist/agents/button.json +7 -2
- package/dist/agents/button.md +1 -1
- package/dist/agents/card.json +21 -1
- package/dist/agents/card.md +7 -1
- package/dist/agents/checkbox-group.json +108 -0
- package/dist/agents/checkbox-group.md +56 -0
- package/dist/agents/checkbox.json +6 -1
- package/dist/agents/chip.json +73 -0
- package/dist/agents/chip.md +44 -0
- package/dist/agents/code-block.json +92 -0
- package/dist/agents/code-block.md +52 -0
- package/dist/agents/code.json +67 -0
- package/dist/agents/code.md +42 -0
- package/dist/agents/collapsible.json +34 -3
- package/dist/agents/collapsible.md +10 -3
- package/dist/agents/color-picker.json +78 -0
- package/dist/agents/color-picker.md +46 -0
- package/dist/agents/color-swatch.json +51 -0
- package/dist/agents/color-swatch.md +36 -0
- package/dist/agents/combobox.json +95 -0
- package/dist/agents/combobox.md +51 -0
- package/dist/agents/context-menu.json +109 -0
- package/dist/agents/context-menu.md +54 -0
- package/dist/agents/coverage.json +25591 -0
- package/dist/agents/data-grid.json +127 -0
- package/dist/agents/data-grid.md +61 -0
- package/dist/agents/data-list.json +63 -0
- package/dist/agents/data-list.md +41 -0
- package/dist/agents/dialog.json +112 -0
- package/dist/agents/dialog.md +53 -0
- package/dist/agents/dropdown-menu.json +112 -0
- package/dist/agents/dropdown-menu.md +56 -0
- package/dist/agents/em.json +57 -0
- package/dist/agents/em.md +39 -0
- package/dist/agents/feed.json +84 -0
- package/dist/agents/feed.md +48 -0
- package/dist/agents/field.json +6 -1
- package/dist/agents/fieldset.json +6 -1
- package/dist/agents/file-upload.json +93 -0
- package/dist/agents/file-upload.md +50 -0
- package/dist/agents/form.json +11 -2
- package/dist/agents/form.md +2 -1
- package/dist/agents/grid.json +18 -1
- package/dist/agents/grid.md +6 -0
- package/dist/agents/group.json +77 -0
- package/dist/agents/group.md +48 -0
- package/dist/agents/hide.json +14 -0
- package/dist/agents/hide.md +3 -0
- package/dist/agents/highlight.json +73 -0
- package/dist/agents/highlight.md +43 -0
- package/dist/agents/hover-card.json +94 -0
- package/dist/agents/hover-card.md +51 -0
- package/dist/agents/icon-button.json +23 -12
- package/dist/agents/icon-button.md +12 -8
- package/dist/agents/image.json +33 -7
- package/dist/agents/image.md +11 -4
- package/dist/agents/input.json +7 -2
- package/dist/agents/input.md +1 -1
- package/dist/agents/interface-composition.json +224 -18
- package/dist/agents/interface-composition.md +10 -0
- package/dist/agents/kbd.json +62 -0
- package/dist/agents/kbd.md +40 -0
- package/dist/agents/layer-selection.json +1294 -11
- package/dist/agents/layer-selection.md +94 -1
- package/dist/agents/link-box.json +97 -0
- package/dist/agents/link-box.md +53 -0
- package/dist/agents/link.json +34 -5
- package/dist/agents/link.md +12 -2
- package/dist/agents/list.json +1 -1
- package/dist/agents/list.md +1 -1
- package/dist/agents/manifest.json +327 -2
- package/dist/agents/mark.json +56 -0
- package/dist/agents/mark.md +38 -0
- package/dist/agents/menubar.json +109 -0
- package/dist/agents/menubar.md +54 -0
- package/dist/agents/multi-select.json +93 -0
- package/dist/agents/multi-select.md +49 -0
- package/dist/agents/nav-list.json +15 -5
- package/dist/agents/nav-list.md +6 -4
- package/dist/agents/notification-badge.json +88 -0
- package/dist/agents/notification-badge.md +49 -0
- package/dist/agents/number-input.json +89 -0
- package/dist/agents/number-input.md +50 -0
- package/dist/agents/otp-field.json +87 -0
- package/dist/agents/otp-field.md +48 -0
- package/dist/agents/pagination.json +26 -5
- package/dist/agents/pagination.md +11 -4
- package/dist/agents/password-toggle-field.json +87 -0
- package/dist/agents/password-toggle-field.md +48 -0
- package/dist/agents/popover.json +114 -0
- package/dist/agents/popover.md +56 -0
- package/dist/agents/progress-circle.json +85 -0
- package/dist/agents/progress-circle.md +46 -0
- package/dist/agents/progress.json +91 -0
- package/dist/agents/progress.md +48 -0
- package/dist/agents/prose.json +82 -0
- package/dist/agents/prose.md +50 -0
- package/dist/agents/radio-group.json +92 -0
- package/dist/agents/radio-group.md +49 -0
- package/dist/agents/rating.json +91 -0
- package/dist/agents/rating.md +49 -0
- package/dist/agents/reorderable-list.json +74 -0
- package/dist/agents/reorderable-list.md +45 -0
- package/dist/agents/segment-group.json +62 -0
- package/dist/agents/segment-group.md +43 -0
- package/dist/agents/select.json +95 -0
- package/dist/agents/select.md +51 -0
- package/dist/agents/show.json +14 -0
- package/dist/agents/show.md +3 -0
- package/dist/agents/sidebar.json +16 -3
- package/dist/agents/sidebar.md +6 -1
- package/dist/agents/skeleton.json +73 -0
- package/dist/agents/skeleton.md +43 -0
- package/dist/agents/slider.json +88 -0
- package/dist/agents/slider.md +48 -0
- package/dist/agents/stack.json +19 -1
- package/dist/agents/stack.md +7 -0
- package/dist/agents/status.json +59 -0
- package/dist/agents/status.md +40 -0
- package/dist/agents/surface.json +32 -3
- package/dist/agents/surface.md +9 -2
- package/dist/agents/swipeable-item.json +93 -0
- package/dist/agents/swipeable-item.md +50 -0
- package/dist/agents/switch.json +92 -0
- package/dist/agents/switch.md +49 -0
- package/dist/agents/table.json +113 -0
- package/dist/agents/table.md +59 -0
- package/dist/agents/tabs.json +9 -2
- package/dist/agents/tabs.md +4 -1
- package/dist/agents/text.json +23 -8
- package/dist/agents/text.md +10 -7
- package/dist/agents/textarea.json +6 -1
- package/dist/agents/toast.json +91 -0
- package/dist/agents/toast.md +48 -0
- package/dist/agents/toggle-group.json +89 -0
- package/dist/agents/toggle-group.md +49 -0
- package/dist/agents/toggle.json +82 -0
- package/dist/agents/toggle.md +47 -0
- package/dist/agents/toolbar.json +11 -1
- package/dist/agents/toolbar.md +3 -1
- package/dist/agents/tooltip.json +96 -0
- package/dist/agents/tooltip.md +49 -0
- package/dist/agents/tree-grid.json +98 -0
- package/dist/agents/tree-grid.md +51 -0
- package/dist/agents/tree.json +94 -0
- package/dist/agents/tree.md +51 -0
- package/dist/agents/visually-hidden.json +70 -0
- package/dist/agents/visually-hidden.md +42 -0
- package/dist/agents/z-stack.json +21 -1
- package/dist/agents/z-stack.md +5 -0
- package/dist/bleed.d.ts +2 -0
- package/dist/bleed.d.ts.map +1 -0
- package/dist/bleed.js +2 -0
- package/dist/bleed.js.map +1 -0
- package/dist/blockquote.d.ts +2 -0
- package/dist/blockquote.d.ts.map +1 -0
- package/dist/blockquote.js +2 -0
- package/dist/blockquote.js.map +1 -0
- package/dist/color-picker.d.ts +2 -0
- package/dist/color-picker.d.ts.map +1 -0
- package/dist/color-picker.js +2 -0
- package/dist/color-picker.js.map +1 -0
- package/dist/color-swatch.d.ts +2 -0
- package/dist/color-swatch.d.ts.map +1 -0
- package/dist/color-swatch.js +2 -0
- package/dist/color-swatch.js.map +1 -0
- package/dist/components/_responsive-value/ResponsiveValue.d.ts.map +1 -1
- package/dist/components/_responsive-value/ResponsiveValue.js +3 -1
- package/dist/components/_responsive-value/ResponsiveValue.js.map +1 -1
- package/dist/components/_spacing-value/SpacingValue.d.ts +8 -0
- package/dist/components/_spacing-value/SpacingValue.d.ts.map +1 -0
- package/dist/components/_spacing-value/SpacingValue.js +46 -0
- package/dist/components/_spacing-value/SpacingValue.js.map +1 -0
- package/dist/components/accordion/Accordion.js +1 -1
- package/dist/components/app-bar/AppBar.d.ts +7 -3
- package/dist/components/app-bar/AppBar.d.ts.map +1 -1
- package/dist/components/app-bar/AppBar.js +2 -2
- package/dist/components/app-bar/AppBar.js.map +1 -1
- package/dist/components/app-bar/index.d.ts +1 -1
- package/dist/components/app-bar/index.d.ts.map +1 -1
- package/dist/components/app-bar/index.js.map +1 -1
- package/dist/components/avatar/Avatar.d.ts +1 -1
- package/dist/components/avatar/Avatar.d.ts.map +1 -1
- package/dist/components/avatar/Avatar.js.map +1 -1
- package/dist/components/badge/Badge.d.ts +2 -2
- package/dist/components/badge/Badge.d.ts.map +1 -1
- package/dist/components/bleed/Bleed.d.ts +28 -0
- package/dist/components/bleed/Bleed.d.ts.map +1 -0
- package/dist/components/bleed/Bleed.js +92 -0
- package/dist/components/bleed/Bleed.js.map +1 -0
- package/dist/components/bleed/index.d.ts +2 -0
- package/dist/components/bleed/index.d.ts.map +1 -0
- package/dist/components/bleed/index.js +2 -0
- package/dist/components/bleed/index.js.map +1 -0
- package/dist/components/blockquote/Blockquote.d.ts +33 -0
- package/dist/components/blockquote/Blockquote.d.ts.map +1 -0
- package/dist/components/blockquote/Blockquote.js +36 -0
- package/dist/components/blockquote/Blockquote.js.map +1 -0
- package/dist/components/blockquote/index.d.ts +2 -0
- package/dist/components/blockquote/index.d.ts.map +1 -0
- package/dist/components/blockquote/index.js +2 -0
- package/dist/components/blockquote/index.js.map +1 -0
- package/dist/components/code-block/CodeBlock.d.ts +33 -0
- package/dist/components/code-block/CodeBlock.d.ts.map +1 -1
- package/dist/components/code-block/CodeBlock.js +60 -6
- package/dist/components/code-block/CodeBlock.js.map +1 -1
- package/dist/components/code-block/context.d.ts +2 -0
- package/dist/components/code-block/context.d.ts.map +1 -1
- package/dist/components/code-block/context.js.map +1 -1
- package/dist/components/code-block/index.d.ts +1 -1
- package/dist/components/code-block/index.d.ts.map +1 -1
- package/dist/components/code-block/index.js +1 -1
- package/dist/components/code-block/index.js.map +1 -1
- package/dist/components/collapsible/Collapsible.d.ts +9 -3
- package/dist/components/collapsible/Collapsible.d.ts.map +1 -1
- package/dist/components/collapsible/Collapsible.js +3 -3
- package/dist/components/collapsible/Collapsible.js.map +1 -1
- package/dist/components/color-picker/ColorPicker.d.ts +42 -0
- package/dist/components/color-picker/ColorPicker.d.ts.map +1 -0
- package/dist/components/color-picker/ColorPicker.js +52 -0
- package/dist/components/color-picker/ColorPicker.js.map +1 -0
- package/dist/components/color-picker/index.d.ts +2 -0
- package/dist/components/color-picker/index.d.ts.map +1 -0
- package/dist/components/color-picker/index.js +2 -0
- package/dist/components/color-picker/index.js.map +1 -0
- package/dist/components/color-swatch/ColorSwatch.d.ts +21 -0
- package/dist/components/color-swatch/ColorSwatch.d.ts.map +1 -0
- package/dist/components/color-swatch/ColorSwatch.js +25 -0
- package/dist/components/color-swatch/ColorSwatch.js.map +1 -0
- package/dist/components/color-swatch/index.d.ts +2 -0
- package/dist/components/color-swatch/index.d.ts.map +1 -0
- package/dist/components/color-swatch/index.js +2 -0
- package/dist/components/color-swatch/index.js.map +1 -0
- package/dist/components/data-list/DataList.d.ts +48 -0
- package/dist/components/data-list/DataList.d.ts.map +1 -0
- package/dist/components/data-list/DataList.js +31 -0
- package/dist/components/data-list/DataList.js.map +1 -0
- package/dist/components/data-list/index.d.ts +2 -0
- package/dist/components/data-list/index.d.ts.map +1 -0
- package/dist/components/data-list/index.js +2 -0
- package/dist/components/data-list/index.js.map +1 -0
- package/dist/components/em/Em.d.ts +9 -0
- package/dist/components/em/Em.d.ts.map +1 -0
- package/dist/components/em/Em.js +10 -0
- package/dist/components/em/Em.js.map +1 -0
- package/dist/components/em/index.d.ts +2 -0
- package/dist/components/em/index.d.ts.map +1 -0
- package/dist/components/em/index.js +2 -0
- package/dist/components/em/index.js.map +1 -0
- package/dist/components/feed/Feed.d.ts +2 -0
- package/dist/components/feed/Feed.d.ts.map +1 -1
- package/dist/components/feed/Feed.js +2 -2
- package/dist/components/feed/Feed.js.map +1 -1
- package/dist/components/feed/index.d.ts +1 -1
- package/dist/components/feed/index.d.ts.map +1 -1
- package/dist/components/grid/Grid.d.ts +3 -1
- package/dist/components/grid/Grid.d.ts.map +1 -1
- package/dist/components/grid/Grid.js +11 -1
- package/dist/components/grid/Grid.js.map +1 -1
- package/dist/components/grid/index.d.ts +1 -1
- package/dist/components/grid/index.d.ts.map +1 -1
- package/dist/components/grid/index.js.map +1 -1
- package/dist/components/group/Group.d.ts +19 -0
- package/dist/components/group/Group.d.ts.map +1 -0
- package/dist/components/group/Group.js +23 -0
- package/dist/components/group/Group.js.map +1 -0
- package/dist/components/group/index.d.ts +2 -0
- package/dist/components/group/index.d.ts.map +1 -0
- package/dist/components/group/index.js +2 -0
- package/dist/components/group/index.js.map +1 -0
- package/dist/components/highlight/Highlight.d.ts +9 -0
- package/dist/components/highlight/Highlight.d.ts.map +1 -0
- package/dist/components/highlight/Highlight.js +10 -0
- package/dist/components/highlight/Highlight.js.map +1 -0
- package/dist/components/highlight/index.d.ts +2 -0
- package/dist/components/highlight/index.d.ts.map +1 -0
- package/dist/components/highlight/index.js +2 -0
- package/dist/components/highlight/index.js.map +1 -0
- package/dist/components/kbd/Kbd.d.ts +13 -0
- package/dist/components/kbd/Kbd.d.ts.map +1 -0
- package/dist/components/kbd/Kbd.js +8 -0
- package/dist/components/kbd/Kbd.js.map +1 -0
- package/dist/components/kbd/index.d.ts +2 -0
- package/dist/components/kbd/index.d.ts.map +1 -0
- package/dist/components/kbd/index.js +2 -0
- package/dist/components/kbd/index.js.map +1 -0
- package/dist/components/link/Link.d.ts +1 -1
- package/dist/components/link/Link.d.ts.map +1 -1
- package/dist/components/link/Link.js +1 -1
- package/dist/components/link/Link.js.map +1 -1
- package/dist/components/link-box/LinkBox.d.ts +22 -0
- package/dist/components/link-box/LinkBox.d.ts.map +1 -0
- package/dist/components/link-box/LinkBox.js +30 -0
- package/dist/components/link-box/LinkBox.js.map +1 -0
- package/dist/components/link-box/index.d.ts +2 -0
- package/dist/components/link-box/index.d.ts.map +1 -0
- package/dist/components/link-box/index.js +2 -0
- package/dist/components/link-box/index.js.map +1 -0
- package/dist/components/mark/Mark.d.ts +13 -0
- package/dist/components/mark/Mark.d.ts.map +1 -0
- package/dist/components/mark/Mark.js +8 -0
- package/dist/components/mark/Mark.js.map +1 -0
- package/dist/components/mark/index.d.ts +2 -0
- package/dist/components/mark/index.d.ts.map +1 -0
- package/dist/components/mark/index.js +2 -0
- package/dist/components/mark/index.js.map +1 -0
- package/dist/components/nav-list/NavList.d.ts +15 -2
- package/dist/components/nav-list/NavList.d.ts.map +1 -1
- package/dist/components/nav-list/NavList.js +4 -3
- package/dist/components/nav-list/NavList.js.map +1 -1
- package/dist/components/pagination/Pagination.d.ts +9 -6
- package/dist/components/pagination/Pagination.d.ts.map +1 -1
- package/dist/components/pagination/Pagination.js +2 -2
- package/dist/components/pagination/Pagination.js.map +1 -1
- package/dist/components/pagination/index.d.ts +1 -1
- package/dist/components/pagination/index.d.ts.map +1 -1
- package/dist/components/pagination/index.js.map +1 -1
- package/dist/components/popover/Popover.d.ts +3 -0
- package/dist/components/popover/Popover.d.ts.map +1 -1
- package/dist/components/popover/Popover.js +2 -2
- package/dist/components/popover/Popover.js.map +1 -1
- package/dist/components/popover/index.d.ts +1 -1
- package/dist/components/popover/index.d.ts.map +1 -1
- package/dist/components/popover/index.js.map +1 -1
- package/dist/components/prose/Prose.d.ts +12 -0
- package/dist/components/prose/Prose.d.ts.map +1 -0
- package/dist/components/prose/Prose.js +19 -0
- package/dist/components/prose/Prose.js.map +1 -0
- package/dist/components/prose/index.d.ts +2 -0
- package/dist/components/prose/index.d.ts.map +1 -0
- package/dist/components/prose/index.js +2 -0
- package/dist/components/prose/index.js.map +1 -0
- package/dist/components/rating/Rating.d.ts +37 -1
- package/dist/components/rating/Rating.d.ts.map +1 -1
- package/dist/components/rating/Rating.js +25 -2
- package/dist/components/rating/Rating.js.map +1 -1
- package/dist/components/rating/index.d.ts +1 -1
- package/dist/components/rating/index.d.ts.map +1 -1
- package/dist/components/rating/index.js +1 -1
- package/dist/components/rating/index.js.map +1 -1
- package/dist/components/reorderable-list/ReorderableList.d.ts +89 -0
- package/dist/components/reorderable-list/ReorderableList.d.ts.map +1 -0
- package/dist/components/reorderable-list/ReorderableList.js +54 -0
- package/dist/components/reorderable-list/ReorderableList.js.map +1 -0
- package/dist/components/reorderable-list/index.d.ts +2 -0
- package/dist/components/reorderable-list/index.d.ts.map +1 -0
- package/dist/components/reorderable-list/index.js +2 -0
- package/dist/components/reorderable-list/index.js.map +1 -0
- package/dist/components/segment-group/SegmentGroup.d.ts +30 -0
- package/dist/components/segment-group/SegmentGroup.d.ts.map +1 -0
- package/dist/components/segment-group/SegmentGroup.js +67 -0
- package/dist/components/segment-group/SegmentGroup.js.map +1 -0
- package/dist/components/segment-group/index.d.ts +2 -0
- package/dist/components/segment-group/index.d.ts.map +1 -0
- package/dist/components/segment-group/index.js +2 -0
- package/dist/components/segment-group/index.js.map +1 -0
- package/dist/components/show/Show.d.ts.map +1 -1
- package/dist/components/show/Show.js +7 -1
- package/dist/components/show/Show.js.map +1 -1
- package/dist/components/sidebar/Sidebar.d.ts +4 -0
- package/dist/components/sidebar/Sidebar.d.ts.map +1 -1
- package/dist/components/sidebar/Sidebar.js +3 -2
- package/dist/components/sidebar/Sidebar.js.map +1 -1
- package/dist/components/slider/Slider.d.ts.map +1 -1
- package/dist/components/slider/Slider.js +3 -1
- package/dist/components/slider/Slider.js.map +1 -1
- package/dist/components/stack/Stack.d.ts +3 -1
- package/dist/components/stack/Stack.d.ts.map +1 -1
- package/dist/components/stack/Stack.js +9 -1
- package/dist/components/stack/Stack.js.map +1 -1
- package/dist/components/stack/index.d.ts +1 -1
- package/dist/components/stack/index.d.ts.map +1 -1
- package/dist/components/stack/index.js.map +1 -1
- package/dist/components/status/Status.d.ts +22 -0
- package/dist/components/status/Status.d.ts.map +1 -0
- package/dist/components/status/Status.js +23 -0
- package/dist/components/status/Status.js.map +1 -0
- package/dist/components/status/index.d.ts +2 -0
- package/dist/components/status/index.d.ts.map +1 -0
- package/dist/components/status/index.js +2 -0
- package/dist/components/status/index.js.map +1 -0
- package/dist/components/surface/Surface.d.ts +5 -2
- package/dist/components/surface/Surface.d.ts.map +1 -1
- package/dist/components/surface/Surface.js +4 -2
- package/dist/components/surface/Surface.js.map +1 -1
- package/dist/components/surface/index.d.ts +1 -1
- package/dist/components/surface/index.d.ts.map +1 -1
- package/dist/components/surface/index.js.map +1 -1
- package/dist/components/text/Text.d.ts +25 -4
- package/dist/components/text/Text.d.ts.map +1 -1
- package/dist/components/text/Text.js +22 -3
- package/dist/components/text/Text.js.map +1 -1
- package/dist/components/text/index.d.ts +1 -1
- package/dist/components/text/index.d.ts.map +1 -1
- package/dist/components/text/index.js +1 -1
- package/dist/components/text/index.js.map +1 -1
- package/dist/components/toggle/Toggle.d.ts +5 -0
- package/dist/components/toggle/Toggle.d.ts.map +1 -1
- package/dist/components/toggle/Toggle.js +2 -2
- package/dist/components/toggle/Toggle.js.map +1 -1
- package/dist/components/toggle/index.d.ts +1 -1
- package/dist/components/toggle/index.d.ts.map +1 -1
- package/dist/components/toggle/index.js.map +1 -1
- package/dist/components/toggle-group/ToggleGroup.d.ts +3 -1
- package/dist/components/toggle-group/ToggleGroup.d.ts.map +1 -1
- package/dist/components/toggle-group/ToggleGroup.js +2 -1
- package/dist/components/toggle-group/ToggleGroup.js.map +1 -1
- package/dist/components/toolbar/Toolbar.d.ts +9 -2
- package/dist/components/toolbar/Toolbar.d.ts.map +1 -1
- package/dist/components/toolbar/Toolbar.js +2 -2
- package/dist/components/toolbar/Toolbar.js.map +1 -1
- package/dist/components/toolbar/index.d.ts +1 -1
- package/dist/components/toolbar/index.d.ts.map +1 -1
- package/dist/components/z-stack/ZStack.d.ts +7 -0
- package/dist/components/z-stack/ZStack.d.ts.map +1 -1
- package/dist/components/z-stack/ZStack.js +14 -3
- package/dist/components/z-stack/ZStack.js.map +1 -1
- package/dist/components/z-stack/index.d.ts +1 -1
- package/dist/components/z-stack/index.d.ts.map +1 -1
- package/dist/components/z-stack/index.js.map +1 -1
- package/dist/data-list.d.ts +2 -0
- package/dist/data-list.d.ts.map +1 -0
- package/dist/data-list.js +2 -0
- package/dist/data-list.js.map +1 -0
- package/dist/em.d.ts +2 -0
- package/dist/em.d.ts.map +1 -0
- package/dist/em.js +2 -0
- package/dist/em.js.map +1 -0
- package/dist/feed.d.ts +1 -1
- package/dist/feed.d.ts.map +1 -1
- package/dist/grid.d.ts +1 -1
- package/dist/grid.d.ts.map +1 -1
- package/dist/grid.js.map +1 -1
- package/dist/group.d.ts +2 -0
- package/dist/group.d.ts.map +1 -0
- package/dist/group.js +2 -0
- package/dist/group.js.map +1 -0
- package/dist/highlight.d.ts +2 -0
- package/dist/highlight.d.ts.map +1 -0
- package/dist/highlight.js +2 -0
- package/dist/highlight.js.map +1 -0
- package/dist/index.d.ts +25 -9
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +17 -2
- package/dist/index.js.map +1 -1
- package/dist/kbd.d.ts +2 -0
- package/dist/kbd.d.ts.map +1 -0
- package/dist/kbd.js +2 -0
- package/dist/kbd.js.map +1 -0
- package/dist/link-box.d.ts +2 -0
- package/dist/link-box.d.ts.map +1 -0
- package/dist/link-box.js +2 -0
- package/dist/link-box.js.map +1 -0
- package/dist/mark.d.ts +2 -0
- package/dist/mark.d.ts.map +1 -0
- package/dist/mark.js +2 -0
- package/dist/mark.js.map +1 -0
- package/dist/prose.d.ts +2 -0
- package/dist/prose.d.ts.map +1 -0
- package/dist/prose.js +2 -0
- package/dist/prose.js.map +1 -0
- package/dist/reorderable-list.d.ts +2 -0
- package/dist/reorderable-list.d.ts.map +1 -0
- package/dist/reorderable-list.js +2 -0
- package/dist/reorderable-list.js.map +1 -0
- package/dist/reset.css +1 -1
- package/dist/reset.css.map +1 -1
- package/dist/segment-group.d.ts +2 -0
- package/dist/segment-group.d.ts.map +1 -0
- package/dist/segment-group.js +2 -0
- package/dist/segment-group.js.map +1 -0
- package/dist/stack.d.ts +1 -1
- package/dist/stack.d.ts.map +1 -1
- package/dist/stack.js.map +1 -1
- package/dist/status.d.ts +2 -0
- package/dist/status.d.ts.map +1 -0
- package/dist/status.js +2 -0
- package/dist/status.js.map +1 -0
- package/dist/styles/accordion.css +1 -1
- package/dist/styles/accordion.css.map +1 -1
- package/dist/styles/alert-dialog.css +1 -1
- package/dist/styles/alert-dialog.css.map +1 -1
- package/dist/styles/app-bar.css +1 -1
- package/dist/styles/app-bar.css.map +1 -1
- package/dist/styles/avatar.css +1 -1
- package/dist/styles/avatar.css.map +1 -1
- package/dist/styles/badge.css +1 -1
- package/dist/styles/badge.css.map +1 -1
- package/dist/styles/bleed.css +2 -0
- package/dist/styles/bleed.css.map +1 -0
- package/dist/styles/blockquote.css +2 -0
- package/dist/styles/blockquote.css.map +1 -0
- package/dist/styles/bottom-navigation.css +1 -1
- package/dist/styles/bottom-navigation.css.map +1 -1
- package/dist/styles/button.css +1 -1
- package/dist/styles/button.css.map +1 -1
- package/dist/styles/card.css +1 -1
- package/dist/styles/card.css.map +1 -1
- package/dist/styles/checkbox-group.css +1 -1
- package/dist/styles/checkbox-group.css.map +1 -1
- package/dist/styles/checkbox.css +1 -1
- package/dist/styles/checkbox.css.map +1 -1
- package/dist/styles/code-block.css +1 -1
- package/dist/styles/code-block.css.map +1 -1
- package/dist/styles/collapsible.css +1 -1
- package/dist/styles/collapsible.css.map +1 -1
- package/dist/styles/color-picker.css +2 -0
- package/dist/styles/color-picker.css.map +1 -0
- package/dist/styles/color-swatch.css +2 -0
- package/dist/styles/color-swatch.css.map +1 -0
- package/dist/styles/combobox.css +1 -1
- package/dist/styles/combobox.css.map +1 -1
- package/dist/styles/context-menu.css +1 -1
- package/dist/styles/context-menu.css.map +1 -1
- package/dist/styles/core.css +1 -1
- package/dist/styles/core.css.map +1 -1
- package/dist/styles/data-grid.css +1 -1
- package/dist/styles/data-grid.css.map +1 -1
- package/dist/styles/data-list.css +2 -0
- package/dist/styles/data-list.css.map +1 -0
- package/dist/styles/dialog.css +1 -1
- package/dist/styles/dialog.css.map +1 -1
- package/dist/styles/divider.css +1 -1
- package/dist/styles/divider.css.map +1 -1
- package/dist/styles/drawer.css +1 -1
- package/dist/styles/drawer.css.map +1 -1
- package/dist/styles/dropdown-menu.css +1 -1
- package/dist/styles/dropdown-menu.css.map +1 -1
- package/dist/styles/em.css +2 -0
- package/dist/styles/em.css.map +1 -0
- package/dist/styles/feed.css +1 -1
- package/dist/styles/feed.css.map +1 -1
- package/dist/styles/grid.css +1 -1
- package/dist/styles/grid.css.map +1 -1
- package/dist/styles/group.css +2 -0
- package/dist/styles/group.css.map +1 -0
- package/dist/styles/hide.css +1 -1
- package/dist/styles/hide.css.map +1 -1
- package/dist/styles/highlight.css +2 -0
- package/dist/styles/highlight.css.map +1 -0
- package/dist/styles/icon-button.css +1 -1
- package/dist/styles/icon-button.css.map +1 -1
- package/dist/styles/input.css +1 -1
- package/dist/styles/input.css.map +1 -1
- package/dist/styles/kbd.css +2 -0
- package/dist/styles/kbd.css.map +1 -0
- package/dist/styles/link-box.css +2 -0
- package/dist/styles/link-box.css.map +1 -0
- package/dist/styles/link.css +1 -1
- package/dist/styles/link.css.map +1 -1
- package/dist/styles/list.css +1 -1
- package/dist/styles/list.css.map +1 -1
- package/dist/styles/mark.css +2 -0
- package/dist/styles/mark.css.map +1 -0
- package/dist/styles/menubar.css +1 -1
- package/dist/styles/menubar.css.map +1 -1
- package/dist/styles/multi-select.css +1 -1
- package/dist/styles/multi-select.css.map +1 -1
- package/dist/styles/nav-list.css +1 -1
- package/dist/styles/nav-list.css.map +1 -1
- package/dist/styles/navigation-menu.css +1 -1
- package/dist/styles/navigation-menu.css.map +1 -1
- package/dist/styles/pagination.css +1 -1
- package/dist/styles/pagination.css.map +1 -1
- package/dist/styles/password-toggle-field.css +1 -1
- package/dist/styles/password-toggle-field.css.map +1 -1
- package/dist/styles/popover.css +1 -1
- package/dist/styles/popover.css.map +1 -1
- package/dist/styles/prose.css +2 -0
- package/dist/styles/prose.css.map +1 -0
- package/dist/styles/rating.css +1 -1
- package/dist/styles/rating.css.map +1 -1
- package/dist/styles/reorderable-list.css +2 -0
- package/dist/styles/reorderable-list.css.map +1 -0
- package/dist/styles/segment-group.css +2 -0
- package/dist/styles/segment-group.css.map +1 -0
- package/dist/styles/select.css +1 -1
- package/dist/styles/select.css.map +1 -1
- package/dist/styles/show.css +1 -1
- package/dist/styles/show.css.map +1 -1
- package/dist/styles/sidebar.css +1 -1
- package/dist/styles/sidebar.css.map +1 -1
- package/dist/styles/skeleton.css +1 -1
- package/dist/styles/skeleton.css.map +1 -1
- package/dist/styles/slider.css +1 -1
- package/dist/styles/slider.css.map +1 -1
- package/dist/styles/stack.css +1 -1
- package/dist/styles/stack.css.map +1 -1
- package/dist/styles/status.css +2 -0
- package/dist/styles/status.css.map +1 -0
- package/dist/styles/surface.css +1 -1
- package/dist/styles/surface.css.map +1 -1
- package/dist/styles/table.css +1 -1
- package/dist/styles/table.css.map +1 -1
- package/dist/styles/tabs.css +1 -1
- package/dist/styles/tabs.css.map +1 -1
- package/dist/styles/text.css +1 -1
- package/dist/styles/text.css.map +1 -1
- package/dist/styles/toggle-group.css +1 -1
- package/dist/styles/toggle-group.css.map +1 -1
- package/dist/styles/toggle.css +1 -1
- package/dist/styles/toggle.css.map +1 -1
- package/dist/styles/toolbar.css +1 -1
- package/dist/styles/toolbar.css.map +1 -1
- package/dist/styles/z-stack.css +1 -1
- package/dist/styles/z-stack.css.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.css.map +1 -1
- package/dist/surface.d.ts +1 -1
- package/dist/surface.d.ts.map +1 -1
- package/dist/surface.js.map +1 -1
- package/dist/text.d.ts +1 -1
- package/dist/text.d.ts.map +1 -1
- package/dist/text.js +1 -1
- package/dist/text.js.map +1 -1
- package/dist/theme-contract.json +10519 -6018
- package/dist/toggle.d.ts +1 -1
- package/dist/toggle.d.ts.map +1 -1
- package/dist/toggle.js.map +1 -1
- package/dist/tokens.css +1 -1
- package/dist/tokens.css.map +1 -1
- package/dist/toolbar.d.ts +1 -1
- package/dist/toolbar.d.ts.map +1 -1
- package/docs/guides/agent-knowledge.md +19 -0
- package/docs/guides/appearance-and-tokens.md +5 -0
- package/docs/guides/browser-support.md +21 -0
- package/docs/guides/control-sizing.md +55 -0
- package/docs/guides/installation.md +5 -2
- package/docs/guides/theme-contract.md +26 -12
- package/package.json +79 -7
package/dist/styles/tabs.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer brick.tokens,flowstack.theme,brick.foundations;@layer brick.components{.brick-tabs{--brick-tabs-foreground:var(--brick-color-text-secondary);--brick-tabs-selected-foreground:var(--brick-color-accent-text);--brick-tabs-hover-background:var(--brick-color-surface-subtle);--brick-tabs-list-background:transparent;--brick-tabs-selected-background:transparent;--brick-tabs-border-color:var(--brick-color-border-default);--brick-tabs-indicator-color:var(--brick-color-accent-solid);--brick-tabs-focus-ring:var(--brick-color-focus-ring);--brick-tabs-gap:var(--brick-space-1);--brick-tabs-trigger-gap:var(--brick-space-2);--brick-tabs-trigger-height:2.75rem;--brick-tabs-trigger-padding:var(--brick-space-3);--brick-tabs-panel-padding:var(--brick-space-4);--brick-tabs-list-padding:max(var(--brick-space-1), calc(var(--brick-border-focus-width) + var(--brick-border-focus-offset)));--brick-tabs-radius:var(--brick-radius-control);--brick-tabs-font-family:var(--brick-typography-control-md-font-family);--brick-tabs-font-size:var(--brick-typography-control-md-font-size);--brick-tabs-font-weight:var(--brick-typography-control-md-font-weight);--brick-tabs-line-height:var(--brick-typography-control-md-line-height);flex-direction:column;min-inline-size:0;display:flex}.brick-tabs[data-size=sm]{--brick-tabs-trigger-height:2.25rem;--brick-tabs-trigger-padding:var(--brick-space-2);--brick-tabs-panel-padding:var(--brick-space-3);--brick-tabs-font-family:var(--brick-typography-control-sm-font-family);--brick-tabs-font-size:var(--brick-typography-control-sm-font-size);--brick-tabs-font-weight:var(--brick-typography-control-sm-font-weight);--brick-tabs-line-height:var(--brick-typography-control-sm-line-height)}.brick-tabs[data-size=lg]{--brick-tabs-trigger-height:3.25rem;--brick-tabs-trigger-padding:var(--brick-space-4);--brick-tabs-panel-padding:var(--brick-space-5);--brick-tabs-font-family:var(--brick-typography-control-lg-font-family);--brick-tabs-font-size:var(--brick-typography-control-lg-font-size);--brick-tabs-font-weight:var(--brick-typography-control-lg-font-weight);--brick-tabs-line-height:var(--brick-typography-control-lg-line-height)}.brick-tabs[data-orientation=vertical]{flex-direction:row;align-items:stretch}.brick-tabs[data-layout=stacked]{flex-direction:column}.brick-tabs[data-layout=side]{flex-direction:row;align-items:stretch}.brick-tabs-list{box-sizing:border-box;gap:var(--brick-tabs-gap);border-block-end:var(--brick-border-width) solid var(--brick-tabs-border-color);background:var(--brick-tabs-list-background);scrollbar-width:thin;flex:none;min-inline-size:0;max-inline-size:100%;display:flex;position:relative;overflow:auto hidden}.brick-tabs-list[data-orientation=vertical]{border-block-end:0;border-inline-end:var(--brick-border-width) solid var(--brick-tabs-border-color);flex-direction:column;min-inline-size:max-content;overflow:visible}.brick-tabs-list[data-columns]{--brick-tabs-list-columns:1;grid-template-columns:repeat(var(--brick-tabs-list-columns), minmax(0, 1fr));align-content:stretch;display:grid}.brick-tabs-list[data-columns="2"]{--brick-tabs-list-columns:2}.brick-tabs-list[data-columns="3"]{--brick-tabs-list-columns:3}.brick-tabs-list[data-columns="4"]{--brick-tabs-list-columns:4}.brick-tabs-list[data-columns]>.brick-tabs-trigger{white-space:normal;inline-size:100%;min-inline-size:0}.brick-tabs[data-layout=stacked]>.brick-tabs-list[data-orientation=vertical]{border-block-end:var(--brick-border-width) solid var(--brick-tabs-border-color);border-inline-end:0;inline-size:100%;min-inline-size:0}.brick-tabs[data-layout=side]>.brick-tabs-list[data-orientation=vertical]{border-block-end:0;border-inline-end:var(--brick-border-width) solid var(--brick-tabs-border-color);inline-size:auto;min-inline-size:max-content}.brick-tabs-trigger{box-sizing:border-box;min-block-size:var(--brick-tabs-trigger-height);justify-content:center;align-items:center;gap:var(--brick-tabs-trigger-gap);padding-inline:var(--brick-tabs-trigger-padding);border:var(--brick-border-width) solid transparent;border-radius:var(--brick-tabs-radius) var(--brick-tabs-radius) 0 0;color:var(--brick-tabs-foreground);font-family:var(--brick-tabs-font-family);font-size:var(--brick-tabs-font-size);font-weight:var(--brick-tabs-font-weight);line-height:var(--brick-tabs-line-height);white-space:nowrap;cursor:pointer;touch-action:manipulation;background:0 0;flex:none;display:inline-flex}.brick-tabs-trigger:hover:not(:disabled){background:var(--brick-tabs-hover-background);color:var(--brick-color-text-primary)}.brick-tabs-trigger[data-state=active]{color:var(--brick-tabs-selected-foreground)}.brick-tabs-trigger:focus-visible,.brick-tabs-content:focus-visible{outline:var(--brick-border-focus-width) solid var(--brick-tabs-focus-ring);outline-offset:var(--brick-border-focus-offset)}.brick-tabs-trigger:disabled{opacity:.55;cursor:not-allowed}.brick-tabs[data-full-width] .brick-tabs-list[data-orientation=horizontal]>.brick-tabs-trigger{flex:1 1 0}.brick-tabs-content{box-sizing:border-box;min-inline-size:0;padding:var(--brick-tabs-panel-padding);color:var(--brick-color-text-primary);flex:auto}.brick-tabs-content[data-inset=none]{padding:0}.brick-tabs-content[data-inset=sm]{padding:var(--brick-space-3)}.brick-tabs-content[data-inset=md]{padding:var(--brick-space-4)}.brick-tabs-content[data-inset=lg]{padding:var(--brick-space-5)}.brick-tabs-indicator{z-index:1;pointer-events:none;background:var(--brick-tabs-indicator-color);transition:translate var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), inline-size var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), block-size var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);position:absolute}.brick-tabs-indicator[data-orientation=horizontal]{inset-block-end:0;inline-size:var(--tabs-indicator-width);block-size:.125rem;translate:var(--tabs-indicator-left) 0;left:0}.brick-tabs-indicator[data-orientation=vertical]{inline-size:.125rem;block-size:var(--tabs-indicator-height);translate:0 var(--tabs-indicator-top);inset-block-start:0;inset-inline-end:0}.brick-tabs:not([data-variant=line]) .brick-tabs-indicator{display:none}.brick-tabs[data-variant=line] .brick-tabs-trigger[data-state=active]{border-block-end-color:var(--brick-tabs-indicator-color)}.brick-tabs[data-variant=line] .brick-tabs-list[data-orientation=vertical] .brick-tabs-trigger[data-state=active]{border-block-end-color:#0000;border-inline-end-color:var(--brick-tabs-indicator-color)}.brick-tabs[data-variant=solid]{--brick-tabs-list-background:var(--brick-color-surface-subtle);--brick-tabs-selected-background:var(--brick-color-surface-raised)}.brick-tabs[data-variant=soft]{--brick-tabs-selected-background:var(--brick-color-accent-soft)}.brick-tabs:is([data-variant=solid],[data-variant=soft]) .brick-tabs-list{padding:var(--brick-tabs-list-padding);border-radius:var(--brick-tabs-radius);border:0}.brick-tabs:is([data-variant=solid],[data-variant=soft]) .brick-tabs-trigger{border-radius:calc(var(--brick-tabs-radius) - var(--brick-space-1))}.brick-tabs:is([data-variant=solid],[data-variant=soft])>.brick-tabs-list[data-radius=none],.brick-tabs:is([data-variant=solid],[data-variant=soft])>.brick-tabs-list[data-radius=none]:not([data-trigger-radius=default])>.brick-tabs-trigger,.brick-tabs:is([data-variant=solid],[data-variant=soft])>.brick-tabs-list[data-trigger-radius=none]>.brick-tabs-trigger{border-radius:0}.brick-tabs:is([data-variant=solid],[data-variant=soft])>.brick-tabs-list[data-trigger-radius=default]>.brick-tabs-trigger{border-radius:calc(var(--brick-tabs-radius) - var(--brick-space-1))}.brick-tabs:is([data-variant=solid],[data-variant=soft]) .brick-tabs-trigger[data-state=active]{background:var(--brick-tabs-selected-background);box-shadow:var(--brick-shadow-sm)}.brick-tabs[data-variant=enclosed] .brick-tabs-list{gap:var(--brick-space-1)}.brick-tabs[data-variant=enclosed] .brick-tabs-trigger[data-state=active]{border-color:var(--brick-tabs-border-color);border-block-end-color:var(--brick-color-surface-base);background:var(--brick-color-surface-base);margin-block-end:calc(-1 * var(--brick-border-width))}.brick-tabs[data-variant=enclosed] .brick-tabs-content{border:var(--brick-border-width) solid var(--brick-tabs-border-color);border-radius:0 0 var(--brick-tabs-radius) var(--brick-tabs-radius);border-block-start:0}@media (prefers-reduced-motion:reduce){.brick-tabs-indicator{transition:none}}@media (width>=30rem){.brick-tabs-list[data-columns-sm="1"]{--brick-tabs-list-columns:1}.brick-tabs-list[data-columns-sm="2"]{--brick-tabs-list-columns:2}.brick-tabs-list[data-columns-sm="3"]{--brick-tabs-list-columns:3}.brick-tabs-list[data-columns-sm="4"]{--brick-tabs-list-columns:4}.brick-tabs[data-layout-sm=stacked]{flex-direction:column}.brick-tabs[data-layout-sm=side]{flex-direction:row;align-items:stretch}.brick-tabs[data-layout-sm=stacked]>.brick-tabs-list[data-orientation=vertical]{border-block-end:var(--brick-border-width) solid var(--brick-tabs-border-color);border-inline-end:0;inline-size:100%;min-inline-size:0}.brick-tabs[data-layout-sm=side]>.brick-tabs-list[data-orientation=vertical]{border-block-end:0;border-inline-end:var(--brick-border-width) solid var(--brick-tabs-border-color);inline-size:auto;min-inline-size:max-content}}@media (width>=48rem){.brick-tabs-list[data-columns-md="1"]{--brick-tabs-list-columns:1}.brick-tabs-list[data-columns-md="2"]{--brick-tabs-list-columns:2}.brick-tabs-list[data-columns-md="3"]{--brick-tabs-list-columns:3}.brick-tabs-list[data-columns-md="4"]{--brick-tabs-list-columns:4}.brick-tabs[data-layout-md=stacked]{flex-direction:column}.brick-tabs[data-layout-md=side]{flex-direction:row;align-items:stretch}.brick-tabs[data-layout-md=stacked]>.brick-tabs-list[data-orientation=vertical]{border-block-end:var(--brick-border-width) solid var(--brick-tabs-border-color);border-inline-end:0;inline-size:100%;min-inline-size:0}.brick-tabs[data-layout-md=side]>.brick-tabs-list[data-orientation=vertical]{border-block-end:0;border-inline-end:var(--brick-border-width) solid var(--brick-tabs-border-color);inline-size:auto;min-inline-size:max-content}}@media (width>=64rem){.brick-tabs-list[data-columns-lg="1"]{--brick-tabs-list-columns:1}.brick-tabs-list[data-columns-lg="2"]{--brick-tabs-list-columns:2}.brick-tabs-list[data-columns-lg="3"]{--brick-tabs-list-columns:3}.brick-tabs-list[data-columns-lg="4"]{--brick-tabs-list-columns:4}.brick-tabs[data-layout-lg=stacked]{flex-direction:column}.brick-tabs[data-layout-lg=side]{flex-direction:row;align-items:stretch}.brick-tabs[data-layout-lg=stacked]>.brick-tabs-list[data-orientation=vertical]{border-block-end:var(--brick-border-width) solid var(--brick-tabs-border-color);border-inline-end:0;inline-size:100%;min-inline-size:0}.brick-tabs[data-layout-lg=side]>.brick-tabs-list[data-orientation=vertical]{border-block-end:0;border-inline-end:var(--brick-border-width) solid var(--brick-tabs-border-color);inline-size:auto;min-inline-size:max-content}}@media (width>=80rem){.brick-tabs-list[data-columns-xl="1"]{--brick-tabs-list-columns:1}.brick-tabs-list[data-columns-xl="2"]{--brick-tabs-list-columns:2}.brick-tabs-list[data-columns-xl="3"]{--brick-tabs-list-columns:3}.brick-tabs-list[data-columns-xl="4"]{--brick-tabs-list-columns:4}.brick-tabs[data-layout-xl=stacked]{flex-direction:column}.brick-tabs[data-layout-xl=side]{flex-direction:row;align-items:stretch}.brick-tabs[data-layout-xl=stacked]>.brick-tabs-list[data-orientation=vertical]{border-block-end:var(--brick-border-width) solid var(--brick-tabs-border-color);border-inline-end:0;inline-size:100%;min-inline-size:0}.brick-tabs[data-layout-xl=side]>.brick-tabs-list[data-orientation=vertical]{border-block-end:0;border-inline-end:var(--brick-border-width) solid var(--brick-tabs-border-color);inline-size:auto;min-inline-size:max-content}}@media (forced-colors:active){.brick-tabs-list{border-color:canvastext}.brick-tabs-trigger{color:buttontext;forced-color-adjust:auto}.brick-tabs-trigger[data-state=active]{color:highlight;border-color:highlight;box-shadow:inset 0 -.125rem highlight}.brick-tabs-indicator{background:highlight}.brick-tabs-trigger:focus-visible,.brick-tabs-content:focus-visible{outline-color:highlight}}}@layer brick.utilities,brick.effects;
|
|
1
|
+
@layer brick.tokens,flowstack.theme,brick.foundations;@layer brick.components{.brick-tabs{--brick-tabs-foreground:var(--brick-color-text-secondary);--brick-tabs-selected-foreground:var(--brick-color-accent-text);--brick-tabs-hover-background:var(--brick-color-surface-subtle);--brick-tabs-list-background:transparent;--brick-tabs-selected-background:transparent;--brick-tabs-border-color:var(--brick-color-border-default);--brick-tabs-indicator-color:var(--brick-color-accent-solid);--brick-tabs-focus-ring:var(--brick-color-focus-ring);--brick-tabs-gap:var(--brick-space-1);--brick-tabs-trigger-gap:var(--brick-space-2);--brick-tabs-trigger-height:2.75rem;--brick-tabs-trigger-padding:var(--brick-space-3);--brick-tabs-panel-padding:var(--brick-space-4);--brick-tabs-list-padding:max(var(--brick-space-1), calc(var(--brick-border-focus-width) + var(--brick-border-focus-offset)));--brick-tabs-radius:var(--brick-radius-control);--brick-tabs-font-family:var(--brick-typography-control-md-font-family);--brick-tabs-font-size:var(--brick-typography-control-md-font-size);--brick-tabs-font-weight:var(--brick-typography-control-md-font-weight);--brick-tabs-line-height:var(--brick-typography-control-md-line-height);flex-direction:column;min-inline-size:0;display:flex}.brick-tabs[data-size=sm]{--brick-tabs-trigger-height:2.25rem;--brick-tabs-trigger-padding:var(--brick-space-2);--brick-tabs-panel-padding:var(--brick-space-3);--brick-tabs-font-family:var(--brick-typography-control-sm-font-family);--brick-tabs-font-size:var(--brick-typography-control-sm-font-size);--brick-tabs-font-weight:var(--brick-typography-control-sm-font-weight);--brick-tabs-line-height:var(--brick-typography-control-sm-line-height)}.brick-tabs[data-size=lg]{--brick-tabs-trigger-height:3.25rem;--brick-tabs-trigger-padding:var(--brick-space-4);--brick-tabs-panel-padding:var(--brick-space-5);--brick-tabs-font-family:var(--brick-typography-control-lg-font-family);--brick-tabs-font-size:var(--brick-typography-control-lg-font-size);--brick-tabs-font-weight:var(--brick-typography-control-lg-font-weight);--brick-tabs-line-height:var(--brick-typography-control-lg-line-height)}.brick-tabs[data-orientation=vertical]{flex-direction:row;align-items:stretch}.brick-tabs[data-layout=stacked]{flex-direction:column}.brick-tabs[data-layout=side]{flex-direction:row;align-items:stretch}.brick-tabs-list{box-sizing:border-box;gap:var(--brick-tabs-gap);border-block-end:var(--brick-border-width) solid var(--brick-tabs-border-color);background:var(--brick-tabs-list-background);scrollbar-width:thin;flex:none;min-inline-size:0;max-inline-size:100%;display:flex;position:relative;overflow:auto hidden}.brick-tabs-list[data-orientation=vertical]{border-block-end:0;border-inline-end:var(--brick-border-width) solid var(--brick-tabs-border-color);flex-direction:column;min-inline-size:max-content;overflow:visible}.brick-tabs-list[data-columns]{--brick-tabs-list-columns:1;grid-template-columns:repeat(var(--brick-tabs-list-columns), minmax(0, 1fr));align-content:stretch;display:grid}.brick-tabs-list[data-columns="2"]{--brick-tabs-list-columns:2}.brick-tabs-list[data-columns="3"]{--brick-tabs-list-columns:3}.brick-tabs-list[data-columns="4"]{--brick-tabs-list-columns:4}.brick-tabs-list[data-columns]>.brick-tabs-trigger{white-space:normal;inline-size:100%;min-inline-size:0}.brick-tabs[data-layout=stacked]>.brick-tabs-list[data-orientation=vertical]{border-block-end:var(--brick-border-width) solid var(--brick-tabs-border-color);border-inline-end:0;inline-size:100%;min-inline-size:0}.brick-tabs[data-layout=side]>.brick-tabs-list[data-orientation=vertical]{border-block-end:0;border-inline-end:var(--brick-border-width) solid var(--brick-tabs-border-color);inline-size:auto;min-inline-size:max-content}.brick-tabs-trigger{box-sizing:border-box;min-block-size:var(--brick-tabs-trigger-height);justify-content:center;align-items:center;gap:var(--brick-tabs-trigger-gap);padding-inline:var(--brick-tabs-trigger-padding);border:var(--brick-border-width) solid transparent;border-radius:var(--brick-tabs-radius) var(--brick-tabs-radius) 0 0;color:var(--brick-tabs-foreground);font-family:var(--brick-tabs-font-family);font-size:var(--brick-tabs-font-size);font-weight:var(--brick-tabs-font-weight);line-height:var(--brick-tabs-line-height);white-space:nowrap;cursor:pointer;touch-action:manipulation;background:0 0;flex:none;display:inline-flex}.brick-tabs-list[data-trigger-radius=none]>.brick-tabs-trigger{border-radius:0}.brick-tabs-trigger:hover:not(:disabled){background:var(--brick-tabs-hover-background);color:var(--brick-color-text-primary)}.brick-tabs-trigger[data-state=active]{color:var(--brick-tabs-selected-foreground)}.brick-tabs-trigger:focus-visible,.brick-tabs-content:focus-visible{outline:var(--brick-border-focus-width) solid var(--brick-tabs-focus-ring);outline-offset:var(--brick-border-focus-offset)}.brick-tabs-trigger:disabled{opacity:.55;cursor:not-allowed}.brick-tabs[data-full-width] .brick-tabs-list[data-orientation=horizontal]>.brick-tabs-trigger{flex:1 1 0}.brick-tabs-content{box-sizing:border-box;min-inline-size:0;padding:var(--brick-tabs-panel-padding);color:var(--brick-color-text-primary);flex:auto}.brick-tabs-content[data-inset=none]{padding:0}.brick-tabs-content[data-inset=sm]{padding:var(--brick-space-3)}.brick-tabs-content[data-inset=md]{padding:var(--brick-space-4)}.brick-tabs-content[data-inset=lg]{padding:var(--brick-space-5)}.brick-tabs-indicator{z-index:1;pointer-events:none;background:var(--brick-tabs-indicator-color);transition:translate var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), inline-size var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), block-size var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);position:absolute}.brick-tabs-indicator[data-orientation=horizontal]{inset-block-end:0;inline-size:var(--tabs-indicator-width);block-size:.125rem;translate:var(--tabs-indicator-left) 0;left:0}.brick-tabs-indicator[data-orientation=vertical]{inline-size:.125rem;block-size:var(--tabs-indicator-height);translate:0 var(--tabs-indicator-top);inset-block-start:0;inset-inline-end:0}.brick-tabs:not([data-variant=line]) .brick-tabs-indicator{display:none}.brick-tabs[data-variant=line] .brick-tabs-trigger[data-state=active]{border-block-end-color:var(--brick-tabs-indicator-color)}.brick-tabs[data-variant=line]{--brick-tabs-selected-foreground:var(--brick-color-text-primary)}.brick-tabs[data-variant=line] .brick-tabs-list[data-orientation=vertical] .brick-tabs-trigger[data-state=active]{border-block-end-color:#0000;border-inline-end-color:var(--brick-tabs-indicator-color)}.brick-tabs[data-variant=solid]{--brick-tabs-list-background:var(--brick-color-surface-subtle);--brick-tabs-selected-background:var(--brick-color-surface-raised)}.brick-tabs[data-variant=soft]{--brick-tabs-selected-background:var(--brick-color-accent-soft)}.brick-tabs:is([data-variant=solid],[data-variant=soft]) .brick-tabs-list{padding:var(--brick-tabs-list-padding);border-radius:var(--brick-tabs-radius);border:0}.brick-tabs:is([data-variant=solid],[data-variant=soft]) .brick-tabs-trigger{border-radius:calc(var(--brick-tabs-radius) - var(--brick-space-1))}.brick-tabs:is([data-variant=solid],[data-variant=soft])>.brick-tabs-list[data-radius=none],.brick-tabs:is([data-variant=solid],[data-variant=soft])>.brick-tabs-list[data-radius=none]:not([data-trigger-radius=default])>.brick-tabs-trigger{border-radius:0}.brick-tabs:is([data-variant=solid],[data-variant=soft])>.brick-tabs-list[data-trigger-radius=default]>.brick-tabs-trigger{border-radius:calc(var(--brick-tabs-radius) - var(--brick-space-1))}.brick-tabs:is([data-variant=solid],[data-variant=soft]) .brick-tabs-trigger[data-state=active]{background:var(--brick-tabs-selected-background);box-shadow:var(--brick-shadow-sm)}.brick-tabs[data-variant=enclosed] .brick-tabs-list{gap:var(--brick-space-1)}.brick-tabs[data-variant=enclosed] .brick-tabs-trigger[data-state=active]{border-color:var(--brick-tabs-border-color);border-block-end-color:var(--brick-color-surface-base);background:var(--brick-color-surface-base);margin-block-end:calc(-1 * var(--brick-border-width))}.brick-tabs[data-variant=enclosed] .brick-tabs-content{border:var(--brick-border-width) solid var(--brick-tabs-border-color);border-radius:0 0 var(--brick-tabs-radius) var(--brick-tabs-radius);border-block-start:0}@media (prefers-reduced-motion:reduce){.brick-tabs-indicator{transition:none}}@media (width>=30rem){.brick-tabs-list[data-columns-sm="1"]{--brick-tabs-list-columns:1}.brick-tabs-list[data-columns-sm="2"]{--brick-tabs-list-columns:2}.brick-tabs-list[data-columns-sm="3"]{--brick-tabs-list-columns:3}.brick-tabs-list[data-columns-sm="4"]{--brick-tabs-list-columns:4}.brick-tabs[data-layout-sm=stacked]{flex-direction:column}.brick-tabs[data-layout-sm=side]{flex-direction:row;align-items:stretch}.brick-tabs[data-layout-sm=stacked]>.brick-tabs-list[data-orientation=vertical]{border-block-end:var(--brick-border-width) solid var(--brick-tabs-border-color);border-inline-end:0;inline-size:100%;min-inline-size:0}.brick-tabs[data-layout-sm=side]>.brick-tabs-list[data-orientation=vertical]{border-block-end:0;border-inline-end:var(--brick-border-width) solid var(--brick-tabs-border-color);inline-size:auto;min-inline-size:max-content}}@media (width>=48rem){.brick-tabs-list[data-columns-md="1"]{--brick-tabs-list-columns:1}.brick-tabs-list[data-columns-md="2"]{--brick-tabs-list-columns:2}.brick-tabs-list[data-columns-md="3"]{--brick-tabs-list-columns:3}.brick-tabs-list[data-columns-md="4"]{--brick-tabs-list-columns:4}.brick-tabs[data-layout-md=stacked]{flex-direction:column}.brick-tabs[data-layout-md=side]{flex-direction:row;align-items:stretch}.brick-tabs[data-layout-md=stacked]>.brick-tabs-list[data-orientation=vertical]{border-block-end:var(--brick-border-width) solid var(--brick-tabs-border-color);border-inline-end:0;inline-size:100%;min-inline-size:0}.brick-tabs[data-layout-md=side]>.brick-tabs-list[data-orientation=vertical]{border-block-end:0;border-inline-end:var(--brick-border-width) solid var(--brick-tabs-border-color);inline-size:auto;min-inline-size:max-content}}@media (width>=64rem){.brick-tabs-list[data-columns-lg="1"]{--brick-tabs-list-columns:1}.brick-tabs-list[data-columns-lg="2"]{--brick-tabs-list-columns:2}.brick-tabs-list[data-columns-lg="3"]{--brick-tabs-list-columns:3}.brick-tabs-list[data-columns-lg="4"]{--brick-tabs-list-columns:4}.brick-tabs[data-layout-lg=stacked]{flex-direction:column}.brick-tabs[data-layout-lg=side]{flex-direction:row;align-items:stretch}.brick-tabs[data-layout-lg=stacked]>.brick-tabs-list[data-orientation=vertical]{border-block-end:var(--brick-border-width) solid var(--brick-tabs-border-color);border-inline-end:0;inline-size:100%;min-inline-size:0}.brick-tabs[data-layout-lg=side]>.brick-tabs-list[data-orientation=vertical]{border-block-end:0;border-inline-end:var(--brick-border-width) solid var(--brick-tabs-border-color);inline-size:auto;min-inline-size:max-content}}@media (width>=80rem){.brick-tabs-list[data-columns-xl="1"]{--brick-tabs-list-columns:1}.brick-tabs-list[data-columns-xl="2"]{--brick-tabs-list-columns:2}.brick-tabs-list[data-columns-xl="3"]{--brick-tabs-list-columns:3}.brick-tabs-list[data-columns-xl="4"]{--brick-tabs-list-columns:4}.brick-tabs[data-layout-xl=stacked]{flex-direction:column}.brick-tabs[data-layout-xl=side]{flex-direction:row;align-items:stretch}.brick-tabs[data-layout-xl=stacked]>.brick-tabs-list[data-orientation=vertical]{border-block-end:var(--brick-border-width) solid var(--brick-tabs-border-color);border-inline-end:0;inline-size:100%;min-inline-size:0}.brick-tabs[data-layout-xl=side]>.brick-tabs-list[data-orientation=vertical]{border-block-end:0;border-inline-end:var(--brick-border-width) solid var(--brick-tabs-border-color);inline-size:auto;min-inline-size:max-content}}@media (forced-colors:active){.brick-tabs-list{border-color:canvastext}.brick-tabs-trigger{color:buttontext;forced-color-adjust:auto}.brick-tabs-trigger[data-state=active]{color:highlight;border-color:highlight;box-shadow:inset 0 -.125rem highlight}.brick-tabs-indicator{background:highlight}.brick-tabs-trigger:focus-visible,.brick-tabs-content:focus-visible{outline-color:highlight}}}@layer brick.utilities,brick.effects;
|
|
2
2
|
/*# sourceMappingURL=tabs.css.map */
|
package/dist/styles/tabs.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACAA,sDAAA,wBCCE,oqCA6BA,4bACA,4bAEA,8EACA,uDACA,qEAEA,wTAeA,mNACA,2KAMA,+DACA,+DACA,+DACA,yGAKA,oNACA,2NAEA,8nBAsBA,6HACA,mFACA,+LACA,4DACA,0GAEA,oJACA,+CACA,gEACA,gEACA,gEAEA,mXACA,8KACA,0LACA,wEAEA,+HACA,yMAEA,kKACA,+FACA,iKACA,iJACA,uXAGA,+LACA,mLAEA,6EACA,8QACA,sNAEA,uCAA0C,uCAC1C,sBACE,kEACA,kEACA,kEACA,kEACA,0DACA,wEACA,uNACA,+NAEF,sBACE,kEACA,kEACA,kEACA,kEACA,0DACA,wEACA,uNACA,+NAEF,sBACE,kEACA,kEACA,kEACA,kEACA,0DACA,wEACA,uNACA,+NAEF,sBACE,kEACA,kEACA,kEACA,kEACA,0DACA,wEACA,uNACA,+NAEF,8BACE,yCACA,8DACA,oHACA,2CACA,8FD5KJ","sources":["home/runner/work/brick/brick/.brick-cache/production/tabs.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/tabs/tabs.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/tabs/tabs.css\";","@layer brick.tokens, flowstack.theme, brick.foundations, brick.components, brick.utilities, brick.effects;\n","@layer brick.components {\n .brick-tabs {\n --brick-tabs-foreground: var(--brick-color-text-secondary);\n --brick-tabs-selected-foreground: var(--brick-color-accent-text);\n --brick-tabs-hover-background: var(--brick-color-surface-subtle);\n --brick-tabs-list-background: transparent;\n --brick-tabs-selected-background: transparent;\n --brick-tabs-border-color: var(--brick-color-border-default);\n --brick-tabs-indicator-color: var(--brick-color-accent-solid);\n --brick-tabs-focus-ring: var(--brick-color-focus-ring);\n --brick-tabs-gap: var(--brick-space-1);\n --brick-tabs-trigger-gap: var(--brick-space-2);\n --brick-tabs-trigger-height: 2.75rem;\n --brick-tabs-trigger-padding: var(--brick-space-3);\n --brick-tabs-panel-padding: var(--brick-space-4);\n --brick-tabs-list-padding: max(\n var(--brick-space-1),\n calc(var(--brick-border-focus-width) + var(--brick-border-focus-offset))\n );\n --brick-tabs-radius: var(--brick-radius-control);\n --brick-tabs-font-family: var(--brick-typography-control-md-font-family);\n --brick-tabs-font-size: var(--brick-typography-control-md-font-size);\n --brick-tabs-font-weight: var(--brick-typography-control-md-font-weight);\n --brick-tabs-line-height: var(--brick-typography-control-md-line-height);\n\n display: flex;\n min-inline-size: 0;\n flex-direction: column;\n }\n\n .brick-tabs[data-size=\"sm\"] { --brick-tabs-trigger-height: 2.25rem; --brick-tabs-trigger-padding: var(--brick-space-2); --brick-tabs-panel-padding: var(--brick-space-3); --brick-tabs-font-family: var(--brick-typography-control-sm-font-family); --brick-tabs-font-size: var(--brick-typography-control-sm-font-size); --brick-tabs-font-weight: var(--brick-typography-control-sm-font-weight); --brick-tabs-line-height: var(--brick-typography-control-sm-line-height); }\n .brick-tabs[data-size=\"lg\"] { --brick-tabs-trigger-height: 3.25rem; --brick-tabs-trigger-padding: var(--brick-space-4); --brick-tabs-panel-padding: var(--brick-space-5); --brick-tabs-font-family: var(--brick-typography-control-lg-font-family); --brick-tabs-font-size: var(--brick-typography-control-lg-font-size); --brick-tabs-font-weight: var(--brick-typography-control-lg-font-weight); --brick-tabs-line-height: var(--brick-typography-control-lg-line-height); }\n\n .brick-tabs[data-orientation=\"vertical\"] { flex-direction: row; align-items: stretch; }\n .brick-tabs[data-layout=\"stacked\"] { flex-direction: column; }\n .brick-tabs[data-layout=\"side\"] { flex-direction: row; align-items: stretch; }\n\n .brick-tabs-list {\n position: relative;\n display: flex;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n flex: 0 0 auto;\n gap: var(--brick-tabs-gap);\n overflow-x: auto;\n overflow-y: hidden;\n border-block-end: var(--brick-border-width) solid var(--brick-tabs-border-color);\n background: var(--brick-tabs-list-background);\n scrollbar-width: thin;\n }\n\n .brick-tabs-list[data-orientation=\"vertical\"] { min-inline-size: max-content; flex-direction: column; overflow: visible; border-block-end: 0; border-inline-end: var(--brick-border-width) solid var(--brick-tabs-border-color); }\n .brick-tabs-list[data-columns] {\n --brick-tabs-list-columns: 1;\n display: grid;\n grid-template-columns: repeat(var(--brick-tabs-list-columns), minmax(0, 1fr));\n align-content: stretch;\n }\n .brick-tabs-list[data-columns=\"2\"] { --brick-tabs-list-columns: 2; }\n .brick-tabs-list[data-columns=\"3\"] { --brick-tabs-list-columns: 3; }\n .brick-tabs-list[data-columns=\"4\"] { --brick-tabs-list-columns: 4; }\n .brick-tabs-list[data-columns] > .brick-tabs-trigger {\n min-inline-size: 0;\n inline-size: 100%;\n white-space: normal;\n }\n .brick-tabs[data-layout=\"stacked\"] > .brick-tabs-list[data-orientation=\"vertical\"] { inline-size: 100%; min-inline-size: 0; border-block-end: var(--brick-border-width) solid var(--brick-tabs-border-color); border-inline-end: 0; }\n .brick-tabs[data-layout=\"side\"] > .brick-tabs-list[data-orientation=\"vertical\"] { inline-size: auto; min-inline-size: max-content; border-block-end: 0; border-inline-end: var(--brick-border-width) solid var(--brick-tabs-border-color); }\n\n .brick-tabs-trigger {\n display: inline-flex;\n box-sizing: border-box;\n min-block-size: var(--brick-tabs-trigger-height);\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n gap: var(--brick-tabs-trigger-gap);\n padding-inline: var(--brick-tabs-trigger-padding);\n border: var(--brick-border-width) solid transparent;\n border-radius: var(--brick-tabs-radius) var(--brick-tabs-radius) 0 0;\n background: transparent;\n color: var(--brick-tabs-foreground);\n font-family: var(--brick-tabs-font-family);\n font-size: var(--brick-tabs-font-size);\n font-weight: var(--brick-tabs-font-weight);\n line-height: var(--brick-tabs-line-height);\n white-space: nowrap;\n cursor: pointer;\n touch-action: manipulation;\n }\n\n .brick-tabs-trigger:hover:not(:disabled) { background: var(--brick-tabs-hover-background); color: var(--brick-color-text-primary); }\n .brick-tabs-trigger[data-state=\"active\"] { color: var(--brick-tabs-selected-foreground); }\n .brick-tabs-trigger:focus-visible, .brick-tabs-content:focus-visible { outline: var(--brick-border-focus-width) solid var(--brick-tabs-focus-ring); outline-offset: var(--brick-border-focus-offset); }\n .brick-tabs-trigger:disabled { opacity: 0.55; cursor: not-allowed; }\n .brick-tabs[data-full-width] .brick-tabs-list[data-orientation=\"horizontal\"] > .brick-tabs-trigger { flex: 1 1 0; }\n\n .brick-tabs-content { box-sizing: border-box; min-inline-size: 0; flex: 1 1 auto; padding: var(--brick-tabs-panel-padding); color: var(--brick-color-text-primary); }\n .brick-tabs-content[data-inset=\"none\"] { padding: 0; }\n .brick-tabs-content[data-inset=\"sm\"] { padding: var(--brick-space-3); }\n .brick-tabs-content[data-inset=\"md\"] { padding: var(--brick-space-4); }\n .brick-tabs-content[data-inset=\"lg\"] { padding: var(--brick-space-5); }\n\n .brick-tabs-indicator { position: absolute; z-index: 1; pointer-events: none; background: var(--brick-tabs-indicator-color); transition: translate var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), inline-size var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), block-size var(--brick-motion-duration-fast) var(--brick-motion-easing-standard); }\n .brick-tabs-indicator[data-orientation=\"horizontal\"] { inset-block-end: 0; left: 0; inline-size: var(--tabs-indicator-width); block-size: 0.125rem; translate: var(--tabs-indicator-left) 0; }\n .brick-tabs-indicator[data-orientation=\"vertical\"] { inset-block-start: 0; inset-inline-end: 0; inline-size: 0.125rem; block-size: var(--tabs-indicator-height); translate: 0 var(--tabs-indicator-top); }\n .brick-tabs:not([data-variant=\"line\"]) .brick-tabs-indicator { display: none; }\n\n .brick-tabs[data-variant=\"line\"] .brick-tabs-trigger[data-state=\"active\"] { border-block-end-color: var(--brick-tabs-indicator-color); }\n .brick-tabs[data-variant=\"line\"] .brick-tabs-list[data-orientation=\"vertical\"] .brick-tabs-trigger[data-state=\"active\"] { border-block-end-color: transparent; border-inline-end-color: var(--brick-tabs-indicator-color); }\n\n .brick-tabs[data-variant=\"solid\"] { --brick-tabs-list-background: var(--brick-color-surface-subtle); --brick-tabs-selected-background: var(--brick-color-surface-raised); }\n .brick-tabs[data-variant=\"soft\"] { --brick-tabs-selected-background: var(--brick-color-accent-soft); }\n .brick-tabs:is([data-variant=\"solid\"], [data-variant=\"soft\"]) .brick-tabs-list { padding: var(--brick-tabs-list-padding); border: 0; border-radius: var(--brick-tabs-radius); }\n .brick-tabs:is([data-variant=\"solid\"], [data-variant=\"soft\"]) .brick-tabs-trigger { border-radius: calc(var(--brick-tabs-radius) - var(--brick-space-1)); }\n .brick-tabs:is([data-variant=\"solid\"], [data-variant=\"soft\"]) > .brick-tabs-list[data-radius=\"none\"] { border-radius: 0; }\n .brick-tabs:is([data-variant=\"solid\"], [data-variant=\"soft\"]) > .brick-tabs-list[data-radius=\"none\"]:not([data-trigger-radius=\"default\"]) > .brick-tabs-trigger,\n .brick-tabs:is([data-variant=\"solid\"], [data-variant=\"soft\"]) > .brick-tabs-list[data-trigger-radius=\"none\"] > .brick-tabs-trigger { border-radius: 0; }\n .brick-tabs:is([data-variant=\"solid\"], [data-variant=\"soft\"]) > .brick-tabs-list[data-trigger-radius=\"default\"] > .brick-tabs-trigger { border-radius: calc(var(--brick-tabs-radius) - var(--brick-space-1)); }\n .brick-tabs:is([data-variant=\"solid\"], [data-variant=\"soft\"]) .brick-tabs-trigger[data-state=\"active\"] { background: var(--brick-tabs-selected-background); box-shadow: var(--brick-shadow-sm); }\n\n .brick-tabs[data-variant=\"enclosed\"] .brick-tabs-list { gap: var(--brick-space-1); }\n .brick-tabs[data-variant=\"enclosed\"] .brick-tabs-trigger[data-state=\"active\"] { border-color: var(--brick-tabs-border-color); border-block-end-color: var(--brick-color-surface-base); background: var(--brick-color-surface-base); margin-block-end: calc(-1 * var(--brick-border-width)); }\n .brick-tabs[data-variant=\"enclosed\"] .brick-tabs-content { border: var(--brick-border-width) solid var(--brick-tabs-border-color); border-block-start: 0; border-radius: 0 0 var(--brick-tabs-radius) var(--brick-tabs-radius); }\n\n @media (prefers-reduced-motion: reduce) { .brick-tabs-indicator { transition: none; } }\n @media (width >= 30rem) {\n .brick-tabs-list[data-columns-sm=\"1\"] { --brick-tabs-list-columns: 1; }\n .brick-tabs-list[data-columns-sm=\"2\"] { --brick-tabs-list-columns: 2; }\n .brick-tabs-list[data-columns-sm=\"3\"] { --brick-tabs-list-columns: 3; }\n .brick-tabs-list[data-columns-sm=\"4\"] { --brick-tabs-list-columns: 4; }\n .brick-tabs[data-layout-sm=\"stacked\"] { flex-direction: column; }\n .brick-tabs[data-layout-sm=\"side\"] { flex-direction: row; align-items: stretch; }\n .brick-tabs[data-layout-sm=\"stacked\"] > .brick-tabs-list[data-orientation=\"vertical\"] { inline-size: 100%; min-inline-size: 0; border-block-end: var(--brick-border-width) solid var(--brick-tabs-border-color); border-inline-end: 0; }\n .brick-tabs[data-layout-sm=\"side\"] > .brick-tabs-list[data-orientation=\"vertical\"] { inline-size: auto; min-inline-size: max-content; border-block-end: 0; border-inline-end: var(--brick-border-width) solid var(--brick-tabs-border-color); }\n }\n @media (width >= 48rem) {\n .brick-tabs-list[data-columns-md=\"1\"] { --brick-tabs-list-columns: 1; }\n .brick-tabs-list[data-columns-md=\"2\"] { --brick-tabs-list-columns: 2; }\n .brick-tabs-list[data-columns-md=\"3\"] { --brick-tabs-list-columns: 3; }\n .brick-tabs-list[data-columns-md=\"4\"] { --brick-tabs-list-columns: 4; }\n .brick-tabs[data-layout-md=\"stacked\"] { flex-direction: column; }\n .brick-tabs[data-layout-md=\"side\"] { flex-direction: row; align-items: stretch; }\n .brick-tabs[data-layout-md=\"stacked\"] > .brick-tabs-list[data-orientation=\"vertical\"] { inline-size: 100%; min-inline-size: 0; border-block-end: var(--brick-border-width) solid var(--brick-tabs-border-color); border-inline-end: 0; }\n .brick-tabs[data-layout-md=\"side\"] > .brick-tabs-list[data-orientation=\"vertical\"] { inline-size: auto; min-inline-size: max-content; border-block-end: 0; border-inline-end: var(--brick-border-width) solid var(--brick-tabs-border-color); }\n }\n @media (width >= 64rem) {\n .brick-tabs-list[data-columns-lg=\"1\"] { --brick-tabs-list-columns: 1; }\n .brick-tabs-list[data-columns-lg=\"2\"] { --brick-tabs-list-columns: 2; }\n .brick-tabs-list[data-columns-lg=\"3\"] { --brick-tabs-list-columns: 3; }\n .brick-tabs-list[data-columns-lg=\"4\"] { --brick-tabs-list-columns: 4; }\n .brick-tabs[data-layout-lg=\"stacked\"] { flex-direction: column; }\n .brick-tabs[data-layout-lg=\"side\"] { flex-direction: row; align-items: stretch; }\n .brick-tabs[data-layout-lg=\"stacked\"] > .brick-tabs-list[data-orientation=\"vertical\"] { inline-size: 100%; min-inline-size: 0; border-block-end: var(--brick-border-width) solid var(--brick-tabs-border-color); border-inline-end: 0; }\n .brick-tabs[data-layout-lg=\"side\"] > .brick-tabs-list[data-orientation=\"vertical\"] { inline-size: auto; min-inline-size: max-content; border-block-end: 0; border-inline-end: var(--brick-border-width) solid var(--brick-tabs-border-color); }\n }\n @media (width >= 80rem) {\n .brick-tabs-list[data-columns-xl=\"1\"] { --brick-tabs-list-columns: 1; }\n .brick-tabs-list[data-columns-xl=\"2\"] { --brick-tabs-list-columns: 2; }\n .brick-tabs-list[data-columns-xl=\"3\"] { --brick-tabs-list-columns: 3; }\n .brick-tabs-list[data-columns-xl=\"4\"] { --brick-tabs-list-columns: 4; }\n .brick-tabs[data-layout-xl=\"stacked\"] { flex-direction: column; }\n .brick-tabs[data-layout-xl=\"side\"] { flex-direction: row; align-items: stretch; }\n .brick-tabs[data-layout-xl=\"stacked\"] > .brick-tabs-list[data-orientation=\"vertical\"] { inline-size: 100%; min-inline-size: 0; border-block-end: var(--brick-border-width) solid var(--brick-tabs-border-color); border-inline-end: 0; }\n .brick-tabs[data-layout-xl=\"side\"] > .brick-tabs-list[data-orientation=\"vertical\"] { inline-size: auto; min-inline-size: max-content; border-block-end: 0; border-inline-end: var(--brick-border-width) solid var(--brick-tabs-border-color); }\n }\n @media (forced-colors: active) {\n .brick-tabs-list { border-color: CanvasText; }\n .brick-tabs-trigger { color: ButtonText; forced-color-adjust: auto; }\n .brick-tabs-trigger[data-state=\"active\"] { border-color: Highlight; color: Highlight; box-shadow: inset 0 -0.125rem 0 Highlight; }\n .brick-tabs-indicator { background: Highlight; }\n .brick-tabs-trigger:focus-visible, .brick-tabs-content:focus-visible { outline-color: Highlight; }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACAA,sDAAA,wBCCE,oqCA6BA,4bACA,4bAEA,8EACA,uDACA,qEAEA,wTAeA,mNACA,2KAMA,+DACA,+DACA,+DACA,yGAKA,oNACA,2NAEA,8nBAsBA,+EAEA,6HACA,mFACA,+LACA,4DACA,0GAEA,oJACA,+CACA,gEACA,gEACA,gEAEA,mXACA,8KACA,0LACA,wEAEA,+HACA,gGACA,yMAEA,kKACA,+FACA,iKACA,iJACA,+PAEA,+LACA,mLAEA,6EACA,8QACA,sNAEA,uCAA0C,uCAC1C,sBACE,kEACA,kEACA,kEACA,kEACA,0DACA,wEACA,uNACA,+NAEF,sBACE,kEACA,kEACA,kEACA,kEACA,0DACA,wEACA,uNACA,+NAEF,sBACE,kEACA,kEACA,kEACA,kEACA,0DACA,wEACA,uNACA,+NAEF,sBACE,kEACA,kEACA,kEACA,kEACA,0DACA,wEACA,uNACA,+NAEF,8BACE,yCACA,8DACA,oHACA,2CACA,8FD9KJ","sources":["home/runner/work/brick/brick/.brick-cache/production/tabs.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/tabs/tabs.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/tabs/tabs.css\";","@layer brick.tokens, flowstack.theme, brick.foundations, brick.components, brick.utilities, brick.effects;\n","@layer brick.components {\n .brick-tabs {\n --brick-tabs-foreground: var(--brick-color-text-secondary);\n --brick-tabs-selected-foreground: var(--brick-color-accent-text);\n --brick-tabs-hover-background: var(--brick-color-surface-subtle);\n --brick-tabs-list-background: transparent;\n --brick-tabs-selected-background: transparent;\n --brick-tabs-border-color: var(--brick-color-border-default);\n --brick-tabs-indicator-color: var(--brick-color-accent-solid);\n --brick-tabs-focus-ring: var(--brick-color-focus-ring);\n --brick-tabs-gap: var(--brick-space-1);\n --brick-tabs-trigger-gap: var(--brick-space-2);\n --brick-tabs-trigger-height: 2.75rem;\n --brick-tabs-trigger-padding: var(--brick-space-3);\n --brick-tabs-panel-padding: var(--brick-space-4);\n --brick-tabs-list-padding: max(\n var(--brick-space-1),\n calc(var(--brick-border-focus-width) + var(--brick-border-focus-offset))\n );\n --brick-tabs-radius: var(--brick-radius-control);\n --brick-tabs-font-family: var(--brick-typography-control-md-font-family);\n --brick-tabs-font-size: var(--brick-typography-control-md-font-size);\n --brick-tabs-font-weight: var(--brick-typography-control-md-font-weight);\n --brick-tabs-line-height: var(--brick-typography-control-md-line-height);\n\n display: flex;\n min-inline-size: 0;\n flex-direction: column;\n }\n\n .brick-tabs[data-size=\"sm\"] { --brick-tabs-trigger-height: 2.25rem; --brick-tabs-trigger-padding: var(--brick-space-2); --brick-tabs-panel-padding: var(--brick-space-3); --brick-tabs-font-family: var(--brick-typography-control-sm-font-family); --brick-tabs-font-size: var(--brick-typography-control-sm-font-size); --brick-tabs-font-weight: var(--brick-typography-control-sm-font-weight); --brick-tabs-line-height: var(--brick-typography-control-sm-line-height); }\n .brick-tabs[data-size=\"lg\"] { --brick-tabs-trigger-height: 3.25rem; --brick-tabs-trigger-padding: var(--brick-space-4); --brick-tabs-panel-padding: var(--brick-space-5); --brick-tabs-font-family: var(--brick-typography-control-lg-font-family); --brick-tabs-font-size: var(--brick-typography-control-lg-font-size); --brick-tabs-font-weight: var(--brick-typography-control-lg-font-weight); --brick-tabs-line-height: var(--brick-typography-control-lg-line-height); }\n\n .brick-tabs[data-orientation=\"vertical\"] { flex-direction: row; align-items: stretch; }\n .brick-tabs[data-layout=\"stacked\"] { flex-direction: column; }\n .brick-tabs[data-layout=\"side\"] { flex-direction: row; align-items: stretch; }\n\n .brick-tabs-list {\n position: relative;\n display: flex;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n flex: 0 0 auto;\n gap: var(--brick-tabs-gap);\n overflow-x: auto;\n overflow-y: hidden;\n border-block-end: var(--brick-border-width) solid var(--brick-tabs-border-color);\n background: var(--brick-tabs-list-background);\n scrollbar-width: thin;\n }\n\n .brick-tabs-list[data-orientation=\"vertical\"] { min-inline-size: max-content; flex-direction: column; overflow: visible; border-block-end: 0; border-inline-end: var(--brick-border-width) solid var(--brick-tabs-border-color); }\n .brick-tabs-list[data-columns] {\n --brick-tabs-list-columns: 1;\n display: grid;\n grid-template-columns: repeat(var(--brick-tabs-list-columns), minmax(0, 1fr));\n align-content: stretch;\n }\n .brick-tabs-list[data-columns=\"2\"] { --brick-tabs-list-columns: 2; }\n .brick-tabs-list[data-columns=\"3\"] { --brick-tabs-list-columns: 3; }\n .brick-tabs-list[data-columns=\"4\"] { --brick-tabs-list-columns: 4; }\n .brick-tabs-list[data-columns] > .brick-tabs-trigger {\n min-inline-size: 0;\n inline-size: 100%;\n white-space: normal;\n }\n .brick-tabs[data-layout=\"stacked\"] > .brick-tabs-list[data-orientation=\"vertical\"] { inline-size: 100%; min-inline-size: 0; border-block-end: var(--brick-border-width) solid var(--brick-tabs-border-color); border-inline-end: 0; }\n .brick-tabs[data-layout=\"side\"] > .brick-tabs-list[data-orientation=\"vertical\"] { inline-size: auto; min-inline-size: max-content; border-block-end: 0; border-inline-end: var(--brick-border-width) solid var(--brick-tabs-border-color); }\n\n .brick-tabs-trigger {\n display: inline-flex;\n box-sizing: border-box;\n min-block-size: var(--brick-tabs-trigger-height);\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n gap: var(--brick-tabs-trigger-gap);\n padding-inline: var(--brick-tabs-trigger-padding);\n border: var(--brick-border-width) solid transparent;\n border-radius: var(--brick-tabs-radius) var(--brick-tabs-radius) 0 0;\n background: transparent;\n color: var(--brick-tabs-foreground);\n font-family: var(--brick-tabs-font-family);\n font-size: var(--brick-tabs-font-size);\n font-weight: var(--brick-tabs-font-weight);\n line-height: var(--brick-tabs-line-height);\n white-space: nowrap;\n cursor: pointer;\n touch-action: manipulation;\n }\n\n .brick-tabs-list[data-trigger-radius=\"none\"] > .brick-tabs-trigger { border-radius: 0; }\n\n .brick-tabs-trigger:hover:not(:disabled) { background: var(--brick-tabs-hover-background); color: var(--brick-color-text-primary); }\n .brick-tabs-trigger[data-state=\"active\"] { color: var(--brick-tabs-selected-foreground); }\n .brick-tabs-trigger:focus-visible, .brick-tabs-content:focus-visible { outline: var(--brick-border-focus-width) solid var(--brick-tabs-focus-ring); outline-offset: var(--brick-border-focus-offset); }\n .brick-tabs-trigger:disabled { opacity: 0.55; cursor: not-allowed; }\n .brick-tabs[data-full-width] .brick-tabs-list[data-orientation=\"horizontal\"] > .brick-tabs-trigger { flex: 1 1 0; }\n\n .brick-tabs-content { box-sizing: border-box; min-inline-size: 0; flex: 1 1 auto; padding: var(--brick-tabs-panel-padding); color: var(--brick-color-text-primary); }\n .brick-tabs-content[data-inset=\"none\"] { padding: 0; }\n .brick-tabs-content[data-inset=\"sm\"] { padding: var(--brick-space-3); }\n .brick-tabs-content[data-inset=\"md\"] { padding: var(--brick-space-4); }\n .brick-tabs-content[data-inset=\"lg\"] { padding: var(--brick-space-5); }\n\n .brick-tabs-indicator { position: absolute; z-index: 1; pointer-events: none; background: var(--brick-tabs-indicator-color); transition: translate var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), inline-size var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), block-size var(--brick-motion-duration-fast) var(--brick-motion-easing-standard); }\n .brick-tabs-indicator[data-orientation=\"horizontal\"] { inset-block-end: 0; left: 0; inline-size: var(--tabs-indicator-width); block-size: 0.125rem; translate: var(--tabs-indicator-left) 0; }\n .brick-tabs-indicator[data-orientation=\"vertical\"] { inset-block-start: 0; inset-inline-end: 0; inline-size: 0.125rem; block-size: var(--tabs-indicator-height); translate: 0 var(--tabs-indicator-top); }\n .brick-tabs:not([data-variant=\"line\"]) .brick-tabs-indicator { display: none; }\n\n .brick-tabs[data-variant=\"line\"] .brick-tabs-trigger[data-state=\"active\"] { border-block-end-color: var(--brick-tabs-indicator-color); }\n .brick-tabs[data-variant=\"line\"] { --brick-tabs-selected-foreground: var(--brick-color-text-primary); }\n .brick-tabs[data-variant=\"line\"] .brick-tabs-list[data-orientation=\"vertical\"] .brick-tabs-trigger[data-state=\"active\"] { border-block-end-color: transparent; border-inline-end-color: var(--brick-tabs-indicator-color); }\n\n .brick-tabs[data-variant=\"solid\"] { --brick-tabs-list-background: var(--brick-color-surface-subtle); --brick-tabs-selected-background: var(--brick-color-surface-raised); }\n .brick-tabs[data-variant=\"soft\"] { --brick-tabs-selected-background: var(--brick-color-accent-soft); }\n .brick-tabs:is([data-variant=\"solid\"], [data-variant=\"soft\"]) .brick-tabs-list { padding: var(--brick-tabs-list-padding); border: 0; border-radius: var(--brick-tabs-radius); }\n .brick-tabs:is([data-variant=\"solid\"], [data-variant=\"soft\"]) .brick-tabs-trigger { border-radius: calc(var(--brick-tabs-radius) - var(--brick-space-1)); }\n .brick-tabs:is([data-variant=\"solid\"], [data-variant=\"soft\"]) > .brick-tabs-list[data-radius=\"none\"] { border-radius: 0; }\n .brick-tabs:is([data-variant=\"solid\"], [data-variant=\"soft\"]) > .brick-tabs-list[data-radius=\"none\"]:not([data-trigger-radius=\"default\"]) > .brick-tabs-trigger { border-radius: 0; }\n .brick-tabs:is([data-variant=\"solid\"], [data-variant=\"soft\"]) > .brick-tabs-list[data-trigger-radius=\"default\"] > .brick-tabs-trigger { border-radius: calc(var(--brick-tabs-radius) - var(--brick-space-1)); }\n .brick-tabs:is([data-variant=\"solid\"], [data-variant=\"soft\"]) .brick-tabs-trigger[data-state=\"active\"] { background: var(--brick-tabs-selected-background); box-shadow: var(--brick-shadow-sm); }\n\n .brick-tabs[data-variant=\"enclosed\"] .brick-tabs-list { gap: var(--brick-space-1); }\n .brick-tabs[data-variant=\"enclosed\"] .brick-tabs-trigger[data-state=\"active\"] { border-color: var(--brick-tabs-border-color); border-block-end-color: var(--brick-color-surface-base); background: var(--brick-color-surface-base); margin-block-end: calc(-1 * var(--brick-border-width)); }\n .brick-tabs[data-variant=\"enclosed\"] .brick-tabs-content { border: var(--brick-border-width) solid var(--brick-tabs-border-color); border-block-start: 0; border-radius: 0 0 var(--brick-tabs-radius) var(--brick-tabs-radius); }\n\n @media (prefers-reduced-motion: reduce) { .brick-tabs-indicator { transition: none; } }\n @media (width >= 30rem) {\n .brick-tabs-list[data-columns-sm=\"1\"] { --brick-tabs-list-columns: 1; }\n .brick-tabs-list[data-columns-sm=\"2\"] { --brick-tabs-list-columns: 2; }\n .brick-tabs-list[data-columns-sm=\"3\"] { --brick-tabs-list-columns: 3; }\n .brick-tabs-list[data-columns-sm=\"4\"] { --brick-tabs-list-columns: 4; }\n .brick-tabs[data-layout-sm=\"stacked\"] { flex-direction: column; }\n .brick-tabs[data-layout-sm=\"side\"] { flex-direction: row; align-items: stretch; }\n .brick-tabs[data-layout-sm=\"stacked\"] > .brick-tabs-list[data-orientation=\"vertical\"] { inline-size: 100%; min-inline-size: 0; border-block-end: var(--brick-border-width) solid var(--brick-tabs-border-color); border-inline-end: 0; }\n .brick-tabs[data-layout-sm=\"side\"] > .brick-tabs-list[data-orientation=\"vertical\"] { inline-size: auto; min-inline-size: max-content; border-block-end: 0; border-inline-end: var(--brick-border-width) solid var(--brick-tabs-border-color); }\n }\n @media (width >= 48rem) {\n .brick-tabs-list[data-columns-md=\"1\"] { --brick-tabs-list-columns: 1; }\n .brick-tabs-list[data-columns-md=\"2\"] { --brick-tabs-list-columns: 2; }\n .brick-tabs-list[data-columns-md=\"3\"] { --brick-tabs-list-columns: 3; }\n .brick-tabs-list[data-columns-md=\"4\"] { --brick-tabs-list-columns: 4; }\n .brick-tabs[data-layout-md=\"stacked\"] { flex-direction: column; }\n .brick-tabs[data-layout-md=\"side\"] { flex-direction: row; align-items: stretch; }\n .brick-tabs[data-layout-md=\"stacked\"] > .brick-tabs-list[data-orientation=\"vertical\"] { inline-size: 100%; min-inline-size: 0; border-block-end: var(--brick-border-width) solid var(--brick-tabs-border-color); border-inline-end: 0; }\n .brick-tabs[data-layout-md=\"side\"] > .brick-tabs-list[data-orientation=\"vertical\"] { inline-size: auto; min-inline-size: max-content; border-block-end: 0; border-inline-end: var(--brick-border-width) solid var(--brick-tabs-border-color); }\n }\n @media (width >= 64rem) {\n .brick-tabs-list[data-columns-lg=\"1\"] { --brick-tabs-list-columns: 1; }\n .brick-tabs-list[data-columns-lg=\"2\"] { --brick-tabs-list-columns: 2; }\n .brick-tabs-list[data-columns-lg=\"3\"] { --brick-tabs-list-columns: 3; }\n .brick-tabs-list[data-columns-lg=\"4\"] { --brick-tabs-list-columns: 4; }\n .brick-tabs[data-layout-lg=\"stacked\"] { flex-direction: column; }\n .brick-tabs[data-layout-lg=\"side\"] { flex-direction: row; align-items: stretch; }\n .brick-tabs[data-layout-lg=\"stacked\"] > .brick-tabs-list[data-orientation=\"vertical\"] { inline-size: 100%; min-inline-size: 0; border-block-end: var(--brick-border-width) solid var(--brick-tabs-border-color); border-inline-end: 0; }\n .brick-tabs[data-layout-lg=\"side\"] > .brick-tabs-list[data-orientation=\"vertical\"] { inline-size: auto; min-inline-size: max-content; border-block-end: 0; border-inline-end: var(--brick-border-width) solid var(--brick-tabs-border-color); }\n }\n @media (width >= 80rem) {\n .brick-tabs-list[data-columns-xl=\"1\"] { --brick-tabs-list-columns: 1; }\n .brick-tabs-list[data-columns-xl=\"2\"] { --brick-tabs-list-columns: 2; }\n .brick-tabs-list[data-columns-xl=\"3\"] { --brick-tabs-list-columns: 3; }\n .brick-tabs-list[data-columns-xl=\"4\"] { --brick-tabs-list-columns: 4; }\n .brick-tabs[data-layout-xl=\"stacked\"] { flex-direction: column; }\n .brick-tabs[data-layout-xl=\"side\"] { flex-direction: row; align-items: stretch; }\n .brick-tabs[data-layout-xl=\"stacked\"] > .brick-tabs-list[data-orientation=\"vertical\"] { inline-size: 100%; min-inline-size: 0; border-block-end: var(--brick-border-width) solid var(--brick-tabs-border-color); border-inline-end: 0; }\n .brick-tabs[data-layout-xl=\"side\"] > .brick-tabs-list[data-orientation=\"vertical\"] { inline-size: auto; min-inline-size: max-content; border-block-end: 0; border-inline-end: var(--brick-border-width) solid var(--brick-tabs-border-color); }\n }\n @media (forced-colors: active) {\n .brick-tabs-list { border-color: CanvasText; }\n .brick-tabs-trigger { color: ButtonText; forced-color-adjust: auto; }\n .brick-tabs-trigger[data-state=\"active\"] { border-color: Highlight; color: Highlight; box-shadow: inset 0 -0.125rem 0 Highlight; }\n .brick-tabs-indicator { background: Highlight; }\n .brick-tabs-trigger:focus-visible, .brick-tabs-content:focus-visible { outline-color: Highlight; }\n }\n}\n"],"names":[]}
|
package/dist/styles/text.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer brick.tokens,flowstack.theme,brick.foundations;@layer brick.components{.brick-text{--brick-text-font-family:var(--brick-typography-body-md-font-family);--brick-text-font-size:var(--brick-typography-body-md-font-size);--brick-text-font-weight:var(--brick-typography-body-md-font-weight);--brick-text-line-height:var(--brick-typography-body-md-line-height);--brick-text-letter-spacing:var(--brick-typography-body-md-letter-spacing);--brick-text-text-transform:none;--brick-text-foreground:var(--brick-color-text-primary);color:var(--brick-text-foreground);font-family:var(--brick-text-font-family);font-size:var(--brick-text-font-size);font-weight:var(--brick-text-font-weight);letter-spacing:var(--brick-text-letter-spacing);line-height:var(--brick-text-line-height);overflow-wrap:break-word;text-align:start;text-transform:var(--brick-text-text-transform);text-wrap:wrap;margin:0}.brick-text[data-variant=display]{--brick-text-font-family:var(--brick-typography-display-font-family);--brick-text-font-size:var(--brick-typography-display-font-size);--brick-text-font-weight:var(--brick-typography-display-font-weight);--brick-text-line-height:var(--brick-typography-display-line-height);--brick-text-letter-spacing:var(--brick-typography-display-letter-spacing)}.brick-text[data-variant=title-lg]{--brick-text-font-family:var(--brick-typography-title-lg-font-family);--brick-text-font-size:var(--brick-typography-title-lg-font-size);--brick-text-font-weight:var(--brick-typography-title-lg-font-weight);--brick-text-line-height:var(--brick-typography-title-lg-line-height);--brick-text-letter-spacing:var(--brick-typography-title-lg-letter-spacing)}.brick-text[data-variant=title-md]{--brick-text-font-family:var(--brick-typography-title-md-font-family);--brick-text-font-size:var(--brick-typography-title-md-font-size);--brick-text-font-weight:var(--brick-typography-title-md-font-weight);--brick-text-line-height:var(--brick-typography-title-md-line-height);--brick-text-letter-spacing:var(--brick-typography-title-md-letter-spacing)}.brick-text[data-variant=title-sm]{--brick-text-font-family:var(--brick-typography-title-sm-font-family);--brick-text-font-size:var(--brick-typography-title-sm-font-size);--brick-text-font-weight:var(--brick-typography-title-sm-font-weight);--brick-text-line-height:var(--brick-typography-title-sm-line-height);--brick-text-letter-spacing:var(--brick-typography-title-sm-letter-spacing)}.brick-text[data-variant=body-lg]{--brick-text-font-family:var(--brick-typography-body-lg-font-family);--brick-text-font-size:var(--brick-typography-body-lg-font-size);--brick-text-font-weight:var(--brick-typography-body-lg-font-weight);--brick-text-line-height:var(--brick-typography-body-lg-line-height);--brick-text-letter-spacing:var(--brick-typography-body-lg-letter-spacing)}.brick-text[data-variant=body-sm]{--brick-text-font-family:var(--brick-typography-body-sm-font-family);--brick-text-font-size:var(--brick-typography-body-sm-font-size);--brick-text-font-weight:var(--brick-typography-body-sm-font-weight);--brick-text-line-height:var(--brick-typography-body-sm-line-height);--brick-text-letter-spacing:var(--brick-typography-body-sm-letter-spacing)}.brick-text[data-variant=caption]{--brick-text-font-family:var(--brick-typography-caption-font-family);--brick-text-font-size:var(--brick-typography-caption-font-size);--brick-text-font-weight:var(--brick-typography-caption-font-weight);--brick-text-line-height:var(--brick-typography-caption-line-height);--brick-text-letter-spacing:var(--brick-typography-caption-letter-spacing)}.brick-text[data-variant=eyebrow]{--brick-text-font-family:var(--brick-typography-eyebrow-font-family);--brick-text-font-size:var(--brick-typography-eyebrow-font-size);--brick-text-font-weight:var(--brick-typography-eyebrow-font-weight);--brick-text-line-height:var(--brick-typography-eyebrow-line-height);--brick-text-letter-spacing:var(--brick-typography-eyebrow-letter-spacing);--brick-text-text-transform:uppercase}.brick-text[data-tone=inherit]{--brick-text-foreground:currentColor}.brick-text[data-tone=secondary]{--brick-text-foreground:var(--brick-color-text-secondary)}.brick-text[data-tone=muted]{--brick-text-foreground:var(--brick-color-text-muted)}.brick-text[data-tone=accent]{--brick-text-foreground:var(--brick-color-accent-text)}.brick-text[data-tone=info]{--brick-text-foreground:var(--brick-color-info-text)}.brick-text[data-tone=success]{--brick-text-foreground:var(--brick-color-success-text)}.brick-text[data-tone=warning]{--brick-text-foreground:var(--brick-color-warning-text)}.brick-text[data-tone=danger]{--brick-text-foreground:var(--brick-color-danger-text)}.brick-text[data-weight=inherit]{--brick-text-font-weight:inherit}.brick-text[data-weight=regular]{--brick-text-font-weight:var(--brick-font-weight-regular)}.brick-text[data-weight=medium]{--brick-text-font-weight:var(--brick-font-weight-medium)}.brick-text[data-weight=semibold]{--brick-text-font-weight:var(--brick-font-weight-semibold)}.brick-text[data-align=start]{text-align:start}.brick-text[data-align=center]{text-align:center}.brick-text[data-align=end]{text-align:end}.brick-text[data-wrap=nowrap]{text-wrap:nowrap}.brick-text[data-wrap=balance]{text-wrap:balance}.brick-text[data-wrap=pretty]{text-wrap:pretty}.brick-text[data-truncate]{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;display:block;overflow:hidden}.brick-text[data-line-clamp]{-webkit-box-orient:vertical;min-inline-size:0;display:-webkit-box;overflow:hidden}.brick-text[data-line-clamp="2"]{-webkit-line-clamp:2}.brick-text[data-line-clamp="3"]{-webkit-line-clamp:3}.brick-text[data-line-clamp="4"]{-webkit-line-clamp:4}.brick-text[data-line-clamp="5"]{-webkit-line-clamp:5}.brick-text[data-line-clamp="6"]{-webkit-line-clamp:6}@media (forced-colors:active){.brick-text:not([data-tone=inherit]){--brick-text-foreground:CanvasText}}}@layer brick.utilities,brick.effects;
|
|
1
|
+
@layer brick.tokens,flowstack.theme,brick.foundations;@layer brick.components{.brick-text{--brick-text-font-family:var(--brick-typography-body-md-font-family);--brick-text-font-size:var(--brick-typography-body-md-font-size);--brick-text-font-weight:var(--brick-typography-body-md-font-weight);--brick-text-line-height:var(--brick-typography-body-md-line-height);--brick-text-letter-spacing:var(--brick-typography-body-md-letter-spacing);--brick-text-text-transform:none;--brick-text-foreground:var(--brick-color-text-primary);color:var(--brick-text-foreground);font-family:var(--brick-text-font-family);font-size:var(--brick-text-font-size);font-weight:var(--brick-text-font-weight);letter-spacing:var(--brick-text-letter-spacing);line-height:var(--brick-text-line-height);overflow-wrap:break-word;text-align:start;text-transform:var(--brick-text-text-transform);text-wrap:wrap;margin:0}.brick-text[data-variant=display]{--brick-text-font-family:var(--brick-typography-display-font-family);--brick-text-font-size:var(--brick-typography-display-font-size);--brick-text-font-weight:var(--brick-typography-display-font-weight);--brick-text-line-height:var(--brick-typography-display-line-height);--brick-text-letter-spacing:var(--brick-typography-display-letter-spacing)}.brick-text[data-variant=display-sm]{--brick-text-font-family:var(--brick-typography-display-sm-font-family);--brick-text-font-size:var(--brick-typography-display-sm-font-size);--brick-text-font-weight:var(--brick-typography-display-sm-font-weight);--brick-text-line-height:var(--brick-typography-display-sm-line-height);--brick-text-letter-spacing:var(--brick-typography-display-sm-letter-spacing)}.brick-text[data-variant=display-md]{--brick-text-font-family:var(--brick-typography-display-md-font-family);--brick-text-font-size:var(--brick-typography-display-md-font-size);--brick-text-font-weight:var(--brick-typography-display-md-font-weight);--brick-text-line-height:var(--brick-typography-display-md-line-height);--brick-text-letter-spacing:var(--brick-typography-display-md-letter-spacing)}.brick-text[data-variant=display-lg]{--brick-text-font-family:var(--brick-typography-display-lg-font-family);--brick-text-font-size:var(--brick-typography-display-lg-font-size);--brick-text-font-weight:var(--brick-typography-display-lg-font-weight);--brick-text-line-height:var(--brick-typography-display-lg-line-height);--brick-text-letter-spacing:var(--brick-typography-display-lg-letter-spacing)}.brick-text[data-variant=title-lg]{--brick-text-font-family:var(--brick-typography-title-lg-font-family);--brick-text-font-size:var(--brick-typography-title-lg-font-size);--brick-text-font-weight:var(--brick-typography-title-lg-font-weight);--brick-text-line-height:var(--brick-typography-title-lg-line-height);--brick-text-letter-spacing:var(--brick-typography-title-lg-letter-spacing)}.brick-text[data-variant=title-md]{--brick-text-font-family:var(--brick-typography-title-md-font-family);--brick-text-font-size:var(--brick-typography-title-md-font-size);--brick-text-font-weight:var(--brick-typography-title-md-font-weight);--brick-text-line-height:var(--brick-typography-title-md-line-height);--brick-text-letter-spacing:var(--brick-typography-title-md-letter-spacing)}.brick-text[data-variant=title-sm]{--brick-text-font-family:var(--brick-typography-title-sm-font-family);--brick-text-font-size:var(--brick-typography-title-sm-font-size);--brick-text-font-weight:var(--brick-typography-title-sm-font-weight);--brick-text-line-height:var(--brick-typography-title-sm-line-height);--brick-text-letter-spacing:var(--brick-typography-title-sm-letter-spacing)}.brick-text[data-variant=body-lg]{--brick-text-font-family:var(--brick-typography-body-lg-font-family);--brick-text-font-size:var(--brick-typography-body-lg-font-size);--brick-text-font-weight:var(--brick-typography-body-lg-font-weight);--brick-text-line-height:var(--brick-typography-body-lg-line-height);--brick-text-letter-spacing:var(--brick-typography-body-lg-letter-spacing)}.brick-text[data-variant=body-sm]{--brick-text-font-family:var(--brick-typography-body-sm-font-family);--brick-text-font-size:var(--brick-typography-body-sm-font-size);--brick-text-font-weight:var(--brick-typography-body-sm-font-weight);--brick-text-line-height:var(--brick-typography-body-sm-line-height);--brick-text-letter-spacing:var(--brick-typography-body-sm-letter-spacing)}.brick-text[data-variant=caption]{--brick-text-font-family:var(--brick-typography-caption-font-family);--brick-text-font-size:var(--brick-typography-caption-font-size);--brick-text-font-weight:var(--brick-typography-caption-font-weight);--brick-text-line-height:var(--brick-typography-caption-line-height);--brick-text-letter-spacing:var(--brick-typography-caption-letter-spacing)}.brick-text[data-variant=eyebrow]{--brick-text-font-family:var(--brick-typography-eyebrow-font-family);--brick-text-font-size:var(--brick-typography-eyebrow-font-size);--brick-text-font-weight:var(--brick-typography-eyebrow-font-weight);--brick-text-line-height:var(--brick-typography-eyebrow-line-height);--brick-text-letter-spacing:var(--brick-typography-eyebrow-letter-spacing);--brick-text-text-transform:uppercase}@media (width>=30rem){.brick-text[data-variant-sm=display]{--brick-text-font-family:var(--brick-typography-display-font-family);--brick-text-font-size:var(--brick-typography-display-font-size);--brick-text-font-weight:var(--brick-typography-display-font-weight);--brick-text-line-height:var(--brick-typography-display-line-height);--brick-text-letter-spacing:var(--brick-typography-display-letter-spacing)}.brick-text[data-variant-sm=display-sm]{--brick-text-font-family:var(--brick-typography-display-sm-font-family);--brick-text-font-size:var(--brick-typography-display-sm-font-size);--brick-text-font-weight:var(--brick-typography-display-sm-font-weight);--brick-text-line-height:var(--brick-typography-display-sm-line-height);--brick-text-letter-spacing:var(--brick-typography-display-sm-letter-spacing)}.brick-text[data-variant-sm=display-md]{--brick-text-font-family:var(--brick-typography-display-md-font-family);--brick-text-font-size:var(--brick-typography-display-md-font-size);--brick-text-font-weight:var(--brick-typography-display-md-font-weight);--brick-text-line-height:var(--brick-typography-display-md-line-height);--brick-text-letter-spacing:var(--brick-typography-display-md-letter-spacing)}.brick-text[data-variant-sm=display-lg]{--brick-text-font-family:var(--brick-typography-display-lg-font-family);--brick-text-font-size:var(--brick-typography-display-lg-font-size);--brick-text-font-weight:var(--brick-typography-display-lg-font-weight);--brick-text-line-height:var(--brick-typography-display-lg-line-height);--brick-text-letter-spacing:var(--brick-typography-display-lg-letter-spacing)}.brick-text[data-variant-sm=title-lg]{--brick-text-font-family:var(--brick-typography-title-lg-font-family);--brick-text-font-size:var(--brick-typography-title-lg-font-size);--brick-text-font-weight:var(--brick-typography-title-lg-font-weight);--brick-text-line-height:var(--brick-typography-title-lg-line-height);--brick-text-letter-spacing:var(--brick-typography-title-lg-letter-spacing)}.brick-text[data-variant-sm=title-md]{--brick-text-font-family:var(--brick-typography-title-md-font-family);--brick-text-font-size:var(--brick-typography-title-md-font-size);--brick-text-font-weight:var(--brick-typography-title-md-font-weight);--brick-text-line-height:var(--brick-typography-title-md-line-height);--brick-text-letter-spacing:var(--brick-typography-title-md-letter-spacing)}.brick-text[data-variant-sm=title-sm]{--brick-text-font-family:var(--brick-typography-title-sm-font-family);--brick-text-font-size:var(--brick-typography-title-sm-font-size);--brick-text-font-weight:var(--brick-typography-title-sm-font-weight);--brick-text-line-height:var(--brick-typography-title-sm-line-height);--brick-text-letter-spacing:var(--brick-typography-title-sm-letter-spacing)}.brick-text[data-variant-sm=body-lg]{--brick-text-font-family:var(--brick-typography-body-lg-font-family);--brick-text-font-size:var(--brick-typography-body-lg-font-size);--brick-text-font-weight:var(--brick-typography-body-lg-font-weight);--brick-text-line-height:var(--brick-typography-body-lg-line-height);--brick-text-letter-spacing:var(--brick-typography-body-lg-letter-spacing)}.brick-text[data-variant-sm=body-md]{--brick-text-font-family:var(--brick-typography-body-md-font-family);--brick-text-font-size:var(--brick-typography-body-md-font-size);--brick-text-font-weight:var(--brick-typography-body-md-font-weight);--brick-text-line-height:var(--brick-typography-body-md-line-height);--brick-text-letter-spacing:var(--brick-typography-body-md-letter-spacing)}.brick-text[data-variant-sm=body-sm]{--brick-text-font-family:var(--brick-typography-body-sm-font-family);--brick-text-font-size:var(--brick-typography-body-sm-font-size);--brick-text-font-weight:var(--brick-typography-body-sm-font-weight);--brick-text-line-height:var(--brick-typography-body-sm-line-height);--brick-text-letter-spacing:var(--brick-typography-body-sm-letter-spacing)}.brick-text[data-variant-sm=caption]{--brick-text-font-family:var(--brick-typography-caption-font-family);--brick-text-font-size:var(--brick-typography-caption-font-size);--brick-text-font-weight:var(--brick-typography-caption-font-weight);--brick-text-line-height:var(--brick-typography-caption-line-height);--brick-text-letter-spacing:var(--brick-typography-caption-letter-spacing)}.brick-text[data-variant-sm=eyebrow]{--brick-text-font-family:var(--brick-typography-eyebrow-font-family);--brick-text-font-size:var(--brick-typography-eyebrow-font-size);--brick-text-font-weight:var(--brick-typography-eyebrow-font-weight);--brick-text-line-height:var(--brick-typography-eyebrow-line-height);--brick-text-letter-spacing:var(--brick-typography-eyebrow-letter-spacing);--brick-text-text-transform:uppercase}}@media (width>=48rem){.brick-text[data-variant-md=display]{--brick-text-font-family:var(--brick-typography-display-font-family);--brick-text-font-size:var(--brick-typography-display-font-size);--brick-text-font-weight:var(--brick-typography-display-font-weight);--brick-text-line-height:var(--brick-typography-display-line-height);--brick-text-letter-spacing:var(--brick-typography-display-letter-spacing)}.brick-text[data-variant-md=display-sm]{--brick-text-font-family:var(--brick-typography-display-sm-font-family);--brick-text-font-size:var(--brick-typography-display-sm-font-size);--brick-text-font-weight:var(--brick-typography-display-sm-font-weight);--brick-text-line-height:var(--brick-typography-display-sm-line-height);--brick-text-letter-spacing:var(--brick-typography-display-sm-letter-spacing)}.brick-text[data-variant-md=display-md]{--brick-text-font-family:var(--brick-typography-display-md-font-family);--brick-text-font-size:var(--brick-typography-display-md-font-size);--brick-text-font-weight:var(--brick-typography-display-md-font-weight);--brick-text-line-height:var(--brick-typography-display-md-line-height);--brick-text-letter-spacing:var(--brick-typography-display-md-letter-spacing)}.brick-text[data-variant-md=display-lg]{--brick-text-font-family:var(--brick-typography-display-lg-font-family);--brick-text-font-size:var(--brick-typography-display-lg-font-size);--brick-text-font-weight:var(--brick-typography-display-lg-font-weight);--brick-text-line-height:var(--brick-typography-display-lg-line-height);--brick-text-letter-spacing:var(--brick-typography-display-lg-letter-spacing)}.brick-text[data-variant-md=title-lg]{--brick-text-font-family:var(--brick-typography-title-lg-font-family);--brick-text-font-size:var(--brick-typography-title-lg-font-size);--brick-text-font-weight:var(--brick-typography-title-lg-font-weight);--brick-text-line-height:var(--brick-typography-title-lg-line-height);--brick-text-letter-spacing:var(--brick-typography-title-lg-letter-spacing)}.brick-text[data-variant-md=title-md]{--brick-text-font-family:var(--brick-typography-title-md-font-family);--brick-text-font-size:var(--brick-typography-title-md-font-size);--brick-text-font-weight:var(--brick-typography-title-md-font-weight);--brick-text-line-height:var(--brick-typography-title-md-line-height);--brick-text-letter-spacing:var(--brick-typography-title-md-letter-spacing)}.brick-text[data-variant-md=title-sm]{--brick-text-font-family:var(--brick-typography-title-sm-font-family);--brick-text-font-size:var(--brick-typography-title-sm-font-size);--brick-text-font-weight:var(--brick-typography-title-sm-font-weight);--brick-text-line-height:var(--brick-typography-title-sm-line-height);--brick-text-letter-spacing:var(--brick-typography-title-sm-letter-spacing)}.brick-text[data-variant-md=body-lg]{--brick-text-font-family:var(--brick-typography-body-lg-font-family);--brick-text-font-size:var(--brick-typography-body-lg-font-size);--brick-text-font-weight:var(--brick-typography-body-lg-font-weight);--brick-text-line-height:var(--brick-typography-body-lg-line-height);--brick-text-letter-spacing:var(--brick-typography-body-lg-letter-spacing)}.brick-text[data-variant-md=body-md]{--brick-text-font-family:var(--brick-typography-body-md-font-family);--brick-text-font-size:var(--brick-typography-body-md-font-size);--brick-text-font-weight:var(--brick-typography-body-md-font-weight);--brick-text-line-height:var(--brick-typography-body-md-line-height);--brick-text-letter-spacing:var(--brick-typography-body-md-letter-spacing)}.brick-text[data-variant-md=body-sm]{--brick-text-font-family:var(--brick-typography-body-sm-font-family);--brick-text-font-size:var(--brick-typography-body-sm-font-size);--brick-text-font-weight:var(--brick-typography-body-sm-font-weight);--brick-text-line-height:var(--brick-typography-body-sm-line-height);--brick-text-letter-spacing:var(--brick-typography-body-sm-letter-spacing)}.brick-text[data-variant-md=caption]{--brick-text-font-family:var(--brick-typography-caption-font-family);--brick-text-font-size:var(--brick-typography-caption-font-size);--brick-text-font-weight:var(--brick-typography-caption-font-weight);--brick-text-line-height:var(--brick-typography-caption-line-height);--brick-text-letter-spacing:var(--brick-typography-caption-letter-spacing)}.brick-text[data-variant-md=eyebrow]{--brick-text-font-family:var(--brick-typography-eyebrow-font-family);--brick-text-font-size:var(--brick-typography-eyebrow-font-size);--brick-text-font-weight:var(--brick-typography-eyebrow-font-weight);--brick-text-line-height:var(--brick-typography-eyebrow-line-height);--brick-text-letter-spacing:var(--brick-typography-eyebrow-letter-spacing);--brick-text-text-transform:uppercase}}@media (width>=64rem){.brick-text[data-variant-lg=display]{--brick-text-font-family:var(--brick-typography-display-font-family);--brick-text-font-size:var(--brick-typography-display-font-size);--brick-text-font-weight:var(--brick-typography-display-font-weight);--brick-text-line-height:var(--brick-typography-display-line-height);--brick-text-letter-spacing:var(--brick-typography-display-letter-spacing)}.brick-text[data-variant-lg=display-sm]{--brick-text-font-family:var(--brick-typography-display-sm-font-family);--brick-text-font-size:var(--brick-typography-display-sm-font-size);--brick-text-font-weight:var(--brick-typography-display-sm-font-weight);--brick-text-line-height:var(--brick-typography-display-sm-line-height);--brick-text-letter-spacing:var(--brick-typography-display-sm-letter-spacing)}.brick-text[data-variant-lg=display-md]{--brick-text-font-family:var(--brick-typography-display-md-font-family);--brick-text-font-size:var(--brick-typography-display-md-font-size);--brick-text-font-weight:var(--brick-typography-display-md-font-weight);--brick-text-line-height:var(--brick-typography-display-md-line-height);--brick-text-letter-spacing:var(--brick-typography-display-md-letter-spacing)}.brick-text[data-variant-lg=display-lg]{--brick-text-font-family:var(--brick-typography-display-lg-font-family);--brick-text-font-size:var(--brick-typography-display-lg-font-size);--brick-text-font-weight:var(--brick-typography-display-lg-font-weight);--brick-text-line-height:var(--brick-typography-display-lg-line-height);--brick-text-letter-spacing:var(--brick-typography-display-lg-letter-spacing)}.brick-text[data-variant-lg=title-lg]{--brick-text-font-family:var(--brick-typography-title-lg-font-family);--brick-text-font-size:var(--brick-typography-title-lg-font-size);--brick-text-font-weight:var(--brick-typography-title-lg-font-weight);--brick-text-line-height:var(--brick-typography-title-lg-line-height);--brick-text-letter-spacing:var(--brick-typography-title-lg-letter-spacing)}.brick-text[data-variant-lg=title-md]{--brick-text-font-family:var(--brick-typography-title-md-font-family);--brick-text-font-size:var(--brick-typography-title-md-font-size);--brick-text-font-weight:var(--brick-typography-title-md-font-weight);--brick-text-line-height:var(--brick-typography-title-md-line-height);--brick-text-letter-spacing:var(--brick-typography-title-md-letter-spacing)}.brick-text[data-variant-lg=title-sm]{--brick-text-font-family:var(--brick-typography-title-sm-font-family);--brick-text-font-size:var(--brick-typography-title-sm-font-size);--brick-text-font-weight:var(--brick-typography-title-sm-font-weight);--brick-text-line-height:var(--brick-typography-title-sm-line-height);--brick-text-letter-spacing:var(--brick-typography-title-sm-letter-spacing)}.brick-text[data-variant-lg=body-lg]{--brick-text-font-family:var(--brick-typography-body-lg-font-family);--brick-text-font-size:var(--brick-typography-body-lg-font-size);--brick-text-font-weight:var(--brick-typography-body-lg-font-weight);--brick-text-line-height:var(--brick-typography-body-lg-line-height);--brick-text-letter-spacing:var(--brick-typography-body-lg-letter-spacing)}.brick-text[data-variant-lg=body-md]{--brick-text-font-family:var(--brick-typography-body-md-font-family);--brick-text-font-size:var(--brick-typography-body-md-font-size);--brick-text-font-weight:var(--brick-typography-body-md-font-weight);--brick-text-line-height:var(--brick-typography-body-md-line-height);--brick-text-letter-spacing:var(--brick-typography-body-md-letter-spacing)}.brick-text[data-variant-lg=body-sm]{--brick-text-font-family:var(--brick-typography-body-sm-font-family);--brick-text-font-size:var(--brick-typography-body-sm-font-size);--brick-text-font-weight:var(--brick-typography-body-sm-font-weight);--brick-text-line-height:var(--brick-typography-body-sm-line-height);--brick-text-letter-spacing:var(--brick-typography-body-sm-letter-spacing)}.brick-text[data-variant-lg=caption]{--brick-text-font-family:var(--brick-typography-caption-font-family);--brick-text-font-size:var(--brick-typography-caption-font-size);--brick-text-font-weight:var(--brick-typography-caption-font-weight);--brick-text-line-height:var(--brick-typography-caption-line-height);--brick-text-letter-spacing:var(--brick-typography-caption-letter-spacing)}.brick-text[data-variant-lg=eyebrow]{--brick-text-font-family:var(--brick-typography-eyebrow-font-family);--brick-text-font-size:var(--brick-typography-eyebrow-font-size);--brick-text-font-weight:var(--brick-typography-eyebrow-font-weight);--brick-text-line-height:var(--brick-typography-eyebrow-line-height);--brick-text-letter-spacing:var(--brick-typography-eyebrow-letter-spacing);--brick-text-text-transform:uppercase}}@media (width>=80rem){.brick-text[data-variant-xl=display]{--brick-text-font-family:var(--brick-typography-display-font-family);--brick-text-font-size:var(--brick-typography-display-font-size);--brick-text-font-weight:var(--brick-typography-display-font-weight);--brick-text-line-height:var(--brick-typography-display-line-height);--brick-text-letter-spacing:var(--brick-typography-display-letter-spacing)}.brick-text[data-variant-xl=display-sm]{--brick-text-font-family:var(--brick-typography-display-sm-font-family);--brick-text-font-size:var(--brick-typography-display-sm-font-size);--brick-text-font-weight:var(--brick-typography-display-sm-font-weight);--brick-text-line-height:var(--brick-typography-display-sm-line-height);--brick-text-letter-spacing:var(--brick-typography-display-sm-letter-spacing)}.brick-text[data-variant-xl=display-md]{--brick-text-font-family:var(--brick-typography-display-md-font-family);--brick-text-font-size:var(--brick-typography-display-md-font-size);--brick-text-font-weight:var(--brick-typography-display-md-font-weight);--brick-text-line-height:var(--brick-typography-display-md-line-height);--brick-text-letter-spacing:var(--brick-typography-display-md-letter-spacing)}.brick-text[data-variant-xl=display-lg]{--brick-text-font-family:var(--brick-typography-display-lg-font-family);--brick-text-font-size:var(--brick-typography-display-lg-font-size);--brick-text-font-weight:var(--brick-typography-display-lg-font-weight);--brick-text-line-height:var(--brick-typography-display-lg-line-height);--brick-text-letter-spacing:var(--brick-typography-display-lg-letter-spacing)}.brick-text[data-variant-xl=title-lg]{--brick-text-font-family:var(--brick-typography-title-lg-font-family);--brick-text-font-size:var(--brick-typography-title-lg-font-size);--brick-text-font-weight:var(--brick-typography-title-lg-font-weight);--brick-text-line-height:var(--brick-typography-title-lg-line-height);--brick-text-letter-spacing:var(--brick-typography-title-lg-letter-spacing)}.brick-text[data-variant-xl=title-md]{--brick-text-font-family:var(--brick-typography-title-md-font-family);--brick-text-font-size:var(--brick-typography-title-md-font-size);--brick-text-font-weight:var(--brick-typography-title-md-font-weight);--brick-text-line-height:var(--brick-typography-title-md-line-height);--brick-text-letter-spacing:var(--brick-typography-title-md-letter-spacing)}.brick-text[data-variant-xl=title-sm]{--brick-text-font-family:var(--brick-typography-title-sm-font-family);--brick-text-font-size:var(--brick-typography-title-sm-font-size);--brick-text-font-weight:var(--brick-typography-title-sm-font-weight);--brick-text-line-height:var(--brick-typography-title-sm-line-height);--brick-text-letter-spacing:var(--brick-typography-title-sm-letter-spacing)}.brick-text[data-variant-xl=body-lg]{--brick-text-font-family:var(--brick-typography-body-lg-font-family);--brick-text-font-size:var(--brick-typography-body-lg-font-size);--brick-text-font-weight:var(--brick-typography-body-lg-font-weight);--brick-text-line-height:var(--brick-typography-body-lg-line-height);--brick-text-letter-spacing:var(--brick-typography-body-lg-letter-spacing)}.brick-text[data-variant-xl=body-md]{--brick-text-font-family:var(--brick-typography-body-md-font-family);--brick-text-font-size:var(--brick-typography-body-md-font-size);--brick-text-font-weight:var(--brick-typography-body-md-font-weight);--brick-text-line-height:var(--brick-typography-body-md-line-height);--brick-text-letter-spacing:var(--brick-typography-body-md-letter-spacing)}.brick-text[data-variant-xl=body-sm]{--brick-text-font-family:var(--brick-typography-body-sm-font-family);--brick-text-font-size:var(--brick-typography-body-sm-font-size);--brick-text-font-weight:var(--brick-typography-body-sm-font-weight);--brick-text-line-height:var(--brick-typography-body-sm-line-height);--brick-text-letter-spacing:var(--brick-typography-body-sm-letter-spacing)}.brick-text[data-variant-xl=caption]{--brick-text-font-family:var(--brick-typography-caption-font-family);--brick-text-font-size:var(--brick-typography-caption-font-size);--brick-text-font-weight:var(--brick-typography-caption-font-weight);--brick-text-line-height:var(--brick-typography-caption-line-height);--brick-text-letter-spacing:var(--brick-typography-caption-letter-spacing)}.brick-text[data-variant-xl=eyebrow]{--brick-text-font-family:var(--brick-typography-eyebrow-font-family);--brick-text-font-size:var(--brick-typography-eyebrow-font-size);--brick-text-font-weight:var(--brick-typography-eyebrow-font-weight);--brick-text-line-height:var(--brick-typography-eyebrow-line-height);--brick-text-letter-spacing:var(--brick-typography-eyebrow-letter-spacing);--brick-text-text-transform:uppercase}}@media (width>=30rem){.brick-text:is([data-variant-sm=display],[data-variant-sm=display-sm],[data-variant-sm=display-md],[data-variant-sm=display-lg],[data-variant-sm=title-lg],[data-variant-sm=title-md],[data-variant-sm=title-sm],[data-variant-sm=body-lg],[data-variant-sm=body-md],[data-variant-sm=body-sm],[data-variant-sm=caption]){--brick-text-text-transform:none}}@media (width>=48rem){.brick-text:is([data-variant-md=display],[data-variant-md=display-sm],[data-variant-md=display-md],[data-variant-md=display-lg],[data-variant-md=title-lg],[data-variant-md=title-md],[data-variant-md=title-sm],[data-variant-md=body-lg],[data-variant-md=body-md],[data-variant-md=body-sm],[data-variant-md=caption]){--brick-text-text-transform:none}}@media (width>=64rem){.brick-text:is([data-variant-lg=display],[data-variant-lg=display-sm],[data-variant-lg=display-md],[data-variant-lg=display-lg],[data-variant-lg=title-lg],[data-variant-lg=title-md],[data-variant-lg=title-sm],[data-variant-lg=body-lg],[data-variant-lg=body-md],[data-variant-lg=body-sm],[data-variant-lg=caption]){--brick-text-text-transform:none}}@media (width>=80rem){.brick-text:is([data-variant-xl=display],[data-variant-xl=display-sm],[data-variant-xl=display-md],[data-variant-xl=display-lg],[data-variant-xl=title-lg],[data-variant-xl=title-md],[data-variant-xl=title-sm],[data-variant-xl=body-lg],[data-variant-xl=body-md],[data-variant-xl=body-sm],[data-variant-xl=caption]){--brick-text-text-transform:none}}.brick-text[data-tone=inherit]{--brick-text-foreground:currentColor}.brick-text[data-tone=secondary]{--brick-text-foreground:var(--brick-color-text-secondary)}.brick-text[data-tone=muted]{--brick-text-foreground:var(--brick-color-text-muted)}.brick-text[data-tone=accent]{--brick-text-foreground:var(--brick-color-accent-text)}.brick-text[data-tone=info]{--brick-text-foreground:var(--brick-color-info-text)}.brick-text[data-tone=success]{--brick-text-foreground:var(--brick-color-success-text)}.brick-text[data-tone=warning]{--brick-text-foreground:var(--brick-color-warning-text)}.brick-text[data-tone=danger]{--brick-text-foreground:var(--brick-color-danger-text)}.brick-text[data-weight=inherit]{--brick-text-font-weight:inherit}.brick-text[data-weight=regular]{--brick-text-font-weight:var(--brick-font-weight-regular)}.brick-text[data-weight=medium]{--brick-text-font-weight:var(--brick-font-weight-medium)}.brick-text[data-weight=semibold]{--brick-text-font-weight:var(--brick-font-weight-semibold)}.brick-text[data-transform=none]{--brick-text-text-transform:none}.brick-text[data-transform=uppercase]{--brick-text-text-transform:uppercase}.brick-text[data-transform=lowercase]{--brick-text-text-transform:lowercase}.brick-text[data-transform=capitalize]{--brick-text-text-transform:capitalize}.brick-text[data-align=start]{text-align:start}.brick-text[data-align=center]{text-align:center}.brick-text[data-align=end]{text-align:end}@media (width>=30rem){.brick-text[data-align-sm=start]{text-align:start}.brick-text[data-align-sm=center]{text-align:center}.brick-text[data-align-sm=end]{text-align:end}}@media (width>=48rem){.brick-text[data-align-md=start]{text-align:start}.brick-text[data-align-md=center]{text-align:center}.brick-text[data-align-md=end]{text-align:end}}@media (width>=64rem){.brick-text[data-align-lg=start]{text-align:start}.brick-text[data-align-lg=center]{text-align:center}.brick-text[data-align-lg=end]{text-align:end}}@media (width>=80rem){.brick-text[data-align-xl=start]{text-align:start}.brick-text[data-align-xl=center]{text-align:center}.brick-text[data-align-xl=end]{text-align:end}}.brick-text[data-wrap=nowrap]{text-wrap:nowrap}.brick-text[data-wrap=balance]{text-wrap:balance}.brick-text[data-wrap=pretty]{text-wrap:pretty}.brick-text[data-truncate]{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;display:block;overflow:hidden}.brick-text[data-line-clamp]{-webkit-box-orient:vertical;min-inline-size:0;display:-webkit-box;overflow:hidden}.brick-text[data-line-clamp="2"]{-webkit-line-clamp:2}.brick-text[data-line-clamp="3"]{-webkit-line-clamp:3}.brick-text[data-line-clamp="4"]{-webkit-line-clamp:4}.brick-text[data-line-clamp="5"]{-webkit-line-clamp:5}.brick-text[data-line-clamp="6"]{-webkit-line-clamp:6}@media (forced-colors:active){.brick-text:not([data-tone=inherit]){--brick-text-foreground:CanvasText}}}@layer brick.utilities,brick.effects;
|
|
2
2
|
/*# sourceMappingURL=text.css.map */
|
package/dist/styles/text.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACAA,sDAAA,wBCCE,yyBAsBA,6XAQA,mYAQA,mYAQA,mYAQA,6XAQA,6XAQA,6XAQA,maASA,oEAIA,2FAIA,mFAIA,qFAIA,iFAIA,uFAIA,uFAIA,qFAIA,kEAIA,2FAIA,yFAIA,6FAIA,+CAIA,iDAIA,2CAIA,+CAIA,iDAIA,+CAIA,qHAQA,+GAOA,sDAIA,sDAIA,sDAIA,sDAIA,sDAIA,8BACE,0EDpMJ","sources":["home/runner/work/brick/brick/.brick-cache/production/text.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/text/text.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/text/text.css\";","@layer brick.tokens, flowstack.theme, brick.foundations, brick.components, brick.utilities, brick.effects;\n","@layer brick.components {\n .brick-text {\n --brick-text-font-family: var(--brick-typography-body-md-font-family);\n --brick-text-font-size: var(--brick-typography-body-md-font-size);\n --brick-text-font-weight: var(--brick-typography-body-md-font-weight);\n --brick-text-line-height: var(--brick-typography-body-md-line-height);\n --brick-text-letter-spacing: var(--brick-typography-body-md-letter-spacing);\n --brick-text-text-transform: none;\n --brick-text-foreground: var(--brick-color-text-primary);\n\n margin: 0;\n color: var(--brick-text-foreground);\n font-family: var(--brick-text-font-family);\n font-size: var(--brick-text-font-size);\n font-weight: var(--brick-text-font-weight);\n letter-spacing: var(--brick-text-letter-spacing);\n line-height: var(--brick-text-line-height);\n overflow-wrap: break-word;\n text-align: start;\n text-transform: var(--brick-text-text-transform);\n text-wrap: wrap;\n }\n\n .brick-text[data-variant=\"display\"] {\n --brick-text-font-family: var(--brick-typography-display-font-family);\n --brick-text-font-size: var(--brick-typography-display-font-size);\n --brick-text-font-weight: var(--brick-typography-display-font-weight);\n --brick-text-line-height: var(--brick-typography-display-line-height);\n --brick-text-letter-spacing: var(--brick-typography-display-letter-spacing);\n }\n\n .brick-text[data-variant=\"title-lg\"] {\n --brick-text-font-family: var(--brick-typography-title-lg-font-family);\n --brick-text-font-size: var(--brick-typography-title-lg-font-size);\n --brick-text-font-weight: var(--brick-typography-title-lg-font-weight);\n --brick-text-line-height: var(--brick-typography-title-lg-line-height);\n --brick-text-letter-spacing: var(--brick-typography-title-lg-letter-spacing);\n }\n\n .brick-text[data-variant=\"title-md\"] {\n --brick-text-font-family: var(--brick-typography-title-md-font-family);\n --brick-text-font-size: var(--brick-typography-title-md-font-size);\n --brick-text-font-weight: var(--brick-typography-title-md-font-weight);\n --brick-text-line-height: var(--brick-typography-title-md-line-height);\n --brick-text-letter-spacing: var(--brick-typography-title-md-letter-spacing);\n }\n\n .brick-text[data-variant=\"title-sm\"] {\n --brick-text-font-family: var(--brick-typography-title-sm-font-family);\n --brick-text-font-size: var(--brick-typography-title-sm-font-size);\n --brick-text-font-weight: var(--brick-typography-title-sm-font-weight);\n --brick-text-line-height: var(--brick-typography-title-sm-line-height);\n --brick-text-letter-spacing: var(--brick-typography-title-sm-letter-spacing);\n }\n\n .brick-text[data-variant=\"body-lg\"] {\n --brick-text-font-family: var(--brick-typography-body-lg-font-family);\n --brick-text-font-size: var(--brick-typography-body-lg-font-size);\n --brick-text-font-weight: var(--brick-typography-body-lg-font-weight);\n --brick-text-line-height: var(--brick-typography-body-lg-line-height);\n --brick-text-letter-spacing: var(--brick-typography-body-lg-letter-spacing);\n }\n\n .brick-text[data-variant=\"body-sm\"] {\n --brick-text-font-family: var(--brick-typography-body-sm-font-family);\n --brick-text-font-size: var(--brick-typography-body-sm-font-size);\n --brick-text-font-weight: var(--brick-typography-body-sm-font-weight);\n --brick-text-line-height: var(--brick-typography-body-sm-line-height);\n --brick-text-letter-spacing: var(--brick-typography-body-sm-letter-spacing);\n }\n\n .brick-text[data-variant=\"caption\"] {\n --brick-text-font-family: var(--brick-typography-caption-font-family);\n --brick-text-font-size: var(--brick-typography-caption-font-size);\n --brick-text-font-weight: var(--brick-typography-caption-font-weight);\n --brick-text-line-height: var(--brick-typography-caption-line-height);\n --brick-text-letter-spacing: var(--brick-typography-caption-letter-spacing);\n }\n\n .brick-text[data-variant=\"eyebrow\"] {\n --brick-text-font-family: var(--brick-typography-eyebrow-font-family);\n --brick-text-font-size: var(--brick-typography-eyebrow-font-size);\n --brick-text-font-weight: var(--brick-typography-eyebrow-font-weight);\n --brick-text-line-height: var(--brick-typography-eyebrow-line-height);\n --brick-text-letter-spacing: var(--brick-typography-eyebrow-letter-spacing);\n --brick-text-text-transform: uppercase;\n }\n\n .brick-text[data-tone=\"inherit\"] {\n --brick-text-foreground: currentColor;\n }\n\n .brick-text[data-tone=\"secondary\"] {\n --brick-text-foreground: var(--brick-color-text-secondary);\n }\n\n .brick-text[data-tone=\"muted\"] {\n --brick-text-foreground: var(--brick-color-text-muted);\n }\n\n .brick-text[data-tone=\"accent\"] {\n --brick-text-foreground: var(--brick-color-accent-text);\n }\n\n .brick-text[data-tone=\"info\"] {\n --brick-text-foreground: var(--brick-color-info-text);\n }\n\n .brick-text[data-tone=\"success\"] {\n --brick-text-foreground: var(--brick-color-success-text);\n }\n\n .brick-text[data-tone=\"warning\"] {\n --brick-text-foreground: var(--brick-color-warning-text);\n }\n\n .brick-text[data-tone=\"danger\"] {\n --brick-text-foreground: var(--brick-color-danger-text);\n }\n\n .brick-text[data-weight=\"inherit\"] {\n --brick-text-font-weight: inherit;\n }\n\n .brick-text[data-weight=\"regular\"] {\n --brick-text-font-weight: var(--brick-font-weight-regular);\n }\n\n .brick-text[data-weight=\"medium\"] {\n --brick-text-font-weight: var(--brick-font-weight-medium);\n }\n\n .brick-text[data-weight=\"semibold\"] {\n --brick-text-font-weight: var(--brick-font-weight-semibold);\n }\n\n .brick-text[data-align=\"start\"] {\n text-align: start;\n }\n\n .brick-text[data-align=\"center\"] {\n text-align: center;\n }\n\n .brick-text[data-align=\"end\"] {\n text-align: end;\n }\n\n .brick-text[data-wrap=\"nowrap\"] {\n text-wrap: nowrap;\n }\n\n .brick-text[data-wrap=\"balance\"] {\n text-wrap: balance;\n }\n\n .brick-text[data-wrap=\"pretty\"] {\n text-wrap: pretty;\n }\n\n .brick-text[data-truncate] {\n display: block;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .brick-text[data-line-clamp] {\n display: -webkit-box;\n min-inline-size: 0;\n overflow: hidden;\n -webkit-box-orient: vertical;\n }\n\n .brick-text[data-line-clamp=\"2\"] {\n -webkit-line-clamp: 2;\n }\n\n .brick-text[data-line-clamp=\"3\"] {\n -webkit-line-clamp: 3;\n }\n\n .brick-text[data-line-clamp=\"4\"] {\n -webkit-line-clamp: 4;\n }\n\n .brick-text[data-line-clamp=\"5\"] {\n -webkit-line-clamp: 5;\n }\n\n .brick-text[data-line-clamp=\"6\"] {\n -webkit-line-clamp: 6;\n }\n\n @media (forced-colors: active) {\n .brick-text:not([data-tone=\"inherit\"]) {\n --brick-text-foreground: CanvasText;\n }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACAA,sDAAA,wBCCE,yyBAsBA,6XAQA,+YAQA,+YAQA,+YAQA,mYAQA,mYAQA,mYAQA,6XAQA,6XAQA,6XAQA,maASA,sBACE,gYAQA,kZAQA,kZAQA,kZAQA,sYAQA,sYAQA,sYAQA,gYAQA,gYAQA,gYAQA,gYAQA,uaAUF,sBACE,gYAQA,kZAQA,kZAQA,kZAQA,sYAQA,sYAQA,sYAQA,gYAQA,gYAQA,gYAQA,gYAQA,uaAUF,sBACE,gYAQA,kZAQA,kZAQA,kZAQA,sYAQA,sYAQA,sYAQA,gYAQA,gYAQA,gYAQA,gYAQA,uaAUF,sBACE,gYAQA,kZAQA,kZAQA,kZAQA,sYAQA,sYAQA,sYAQA,gYAQA,gYAQA,gYAQA,gYAQA,uaAUF,sBACE,4VAKF,sBACE,4VAKF,sBACE,4VAKF,sBACE,4VAKF,oEAIA,2FAIA,mFAIA,qFAIA,iFAIA,uFAIA,uFAIA,qFAIA,kEAIA,2FAIA,yFAIA,6FAIA,kEAIA,4EAIA,4EAIA,8EAIA,+CAIA,iDAIA,2CAIA,sBACE,kDACA,oDACA,+CAGF,sBACE,kDACA,oDACA,+CAGF,sBACE,kDACA,oDACA,+CAGF,sBACE,kDACA,oDACA,+CAGF,+CAIA,iDAIA,+CAIA,qHAQA,+GAOA,sDAIA,sDAIA,sDAIA,sDAIA,sDAIA,8BACE,0EDxqBJ","sources":["home/runner/work/brick/brick/.brick-cache/production/text.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/text/text.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/text/text.css\";","@layer brick.tokens, flowstack.theme, brick.foundations, brick.components, brick.utilities, brick.effects;\n","@layer brick.components {\n .brick-text {\n --brick-text-font-family: var(--brick-typography-body-md-font-family);\n --brick-text-font-size: var(--brick-typography-body-md-font-size);\n --brick-text-font-weight: var(--brick-typography-body-md-font-weight);\n --brick-text-line-height: var(--brick-typography-body-md-line-height);\n --brick-text-letter-spacing: var(--brick-typography-body-md-letter-spacing);\n --brick-text-text-transform: none;\n --brick-text-foreground: var(--brick-color-text-primary);\n\n margin: 0;\n color: var(--brick-text-foreground);\n font-family: var(--brick-text-font-family);\n font-size: var(--brick-text-font-size);\n font-weight: var(--brick-text-font-weight);\n letter-spacing: var(--brick-text-letter-spacing);\n line-height: var(--brick-text-line-height);\n overflow-wrap: break-word;\n text-align: start;\n text-transform: var(--brick-text-text-transform);\n text-wrap: wrap;\n }\n\n .brick-text[data-variant=\"display\"] {\n --brick-text-font-family: var(--brick-typography-display-font-family);\n --brick-text-font-size: var(--brick-typography-display-font-size);\n --brick-text-font-weight: var(--brick-typography-display-font-weight);\n --brick-text-line-height: var(--brick-typography-display-line-height);\n --brick-text-letter-spacing: var(--brick-typography-display-letter-spacing);\n }\n\n .brick-text[data-variant=\"display-sm\"] {\n --brick-text-font-family: var(--brick-typography-display-sm-font-family);\n --brick-text-font-size: var(--brick-typography-display-sm-font-size);\n --brick-text-font-weight: var(--brick-typography-display-sm-font-weight);\n --brick-text-line-height: var(--brick-typography-display-sm-line-height);\n --brick-text-letter-spacing: var(--brick-typography-display-sm-letter-spacing);\n }\n\n .brick-text[data-variant=\"display-md\"] {\n --brick-text-font-family: var(--brick-typography-display-md-font-family);\n --brick-text-font-size: var(--brick-typography-display-md-font-size);\n --brick-text-font-weight: var(--brick-typography-display-md-font-weight);\n --brick-text-line-height: var(--brick-typography-display-md-line-height);\n --brick-text-letter-spacing: var(--brick-typography-display-md-letter-spacing);\n }\n\n .brick-text[data-variant=\"display-lg\"] {\n --brick-text-font-family: var(--brick-typography-display-lg-font-family);\n --brick-text-font-size: var(--brick-typography-display-lg-font-size);\n --brick-text-font-weight: var(--brick-typography-display-lg-font-weight);\n --brick-text-line-height: var(--brick-typography-display-lg-line-height);\n --brick-text-letter-spacing: var(--brick-typography-display-lg-letter-spacing);\n }\n\n .brick-text[data-variant=\"title-lg\"] {\n --brick-text-font-family: var(--brick-typography-title-lg-font-family);\n --brick-text-font-size: var(--brick-typography-title-lg-font-size);\n --brick-text-font-weight: var(--brick-typography-title-lg-font-weight);\n --brick-text-line-height: var(--brick-typography-title-lg-line-height);\n --brick-text-letter-spacing: var(--brick-typography-title-lg-letter-spacing);\n }\n\n .brick-text[data-variant=\"title-md\"] {\n --brick-text-font-family: var(--brick-typography-title-md-font-family);\n --brick-text-font-size: var(--brick-typography-title-md-font-size);\n --brick-text-font-weight: var(--brick-typography-title-md-font-weight);\n --brick-text-line-height: var(--brick-typography-title-md-line-height);\n --brick-text-letter-spacing: var(--brick-typography-title-md-letter-spacing);\n }\n\n .brick-text[data-variant=\"title-sm\"] {\n --brick-text-font-family: var(--brick-typography-title-sm-font-family);\n --brick-text-font-size: var(--brick-typography-title-sm-font-size);\n --brick-text-font-weight: var(--brick-typography-title-sm-font-weight);\n --brick-text-line-height: var(--brick-typography-title-sm-line-height);\n --brick-text-letter-spacing: var(--brick-typography-title-sm-letter-spacing);\n }\n\n .brick-text[data-variant=\"body-lg\"] {\n --brick-text-font-family: var(--brick-typography-body-lg-font-family);\n --brick-text-font-size: var(--brick-typography-body-lg-font-size);\n --brick-text-font-weight: var(--brick-typography-body-lg-font-weight);\n --brick-text-line-height: var(--brick-typography-body-lg-line-height);\n --brick-text-letter-spacing: var(--brick-typography-body-lg-letter-spacing);\n }\n\n .brick-text[data-variant=\"body-sm\"] {\n --brick-text-font-family: var(--brick-typography-body-sm-font-family);\n --brick-text-font-size: var(--brick-typography-body-sm-font-size);\n --brick-text-font-weight: var(--brick-typography-body-sm-font-weight);\n --brick-text-line-height: var(--brick-typography-body-sm-line-height);\n --brick-text-letter-spacing: var(--brick-typography-body-sm-letter-spacing);\n }\n\n .brick-text[data-variant=\"caption\"] {\n --brick-text-font-family: var(--brick-typography-caption-font-family);\n --brick-text-font-size: var(--brick-typography-caption-font-size);\n --brick-text-font-weight: var(--brick-typography-caption-font-weight);\n --brick-text-line-height: var(--brick-typography-caption-line-height);\n --brick-text-letter-spacing: var(--brick-typography-caption-letter-spacing);\n }\n\n .brick-text[data-variant=\"eyebrow\"] {\n --brick-text-font-family: var(--brick-typography-eyebrow-font-family);\n --brick-text-font-size: var(--brick-typography-eyebrow-font-size);\n --brick-text-font-weight: var(--brick-typography-eyebrow-font-weight);\n --brick-text-line-height: var(--brick-typography-eyebrow-line-height);\n --brick-text-letter-spacing: var(--brick-typography-eyebrow-letter-spacing);\n --brick-text-text-transform: uppercase;\n }\n\n @media (width >= 30rem) {\n .brick-text[data-variant-sm=\"display\"] {\n --brick-text-font-family: var(--brick-typography-display-font-family);\n --brick-text-font-size: var(--brick-typography-display-font-size);\n --brick-text-font-weight: var(--brick-typography-display-font-weight);\n --brick-text-line-height: var(--brick-typography-display-line-height);\n --brick-text-letter-spacing: var(--brick-typography-display-letter-spacing);\n }\n\n .brick-text[data-variant-sm=\"display-sm\"] {\n --brick-text-font-family: var(--brick-typography-display-sm-font-family);\n --brick-text-font-size: var(--brick-typography-display-sm-font-size);\n --brick-text-font-weight: var(--brick-typography-display-sm-font-weight);\n --brick-text-line-height: var(--brick-typography-display-sm-line-height);\n --brick-text-letter-spacing: var(--brick-typography-display-sm-letter-spacing);\n }\n\n .brick-text[data-variant-sm=\"display-md\"] {\n --brick-text-font-family: var(--brick-typography-display-md-font-family);\n --brick-text-font-size: var(--brick-typography-display-md-font-size);\n --brick-text-font-weight: var(--brick-typography-display-md-font-weight);\n --brick-text-line-height: var(--brick-typography-display-md-line-height);\n --brick-text-letter-spacing: var(--brick-typography-display-md-letter-spacing);\n }\n\n .brick-text[data-variant-sm=\"display-lg\"] {\n --brick-text-font-family: var(--brick-typography-display-lg-font-family);\n --brick-text-font-size: var(--brick-typography-display-lg-font-size);\n --brick-text-font-weight: var(--brick-typography-display-lg-font-weight);\n --brick-text-line-height: var(--brick-typography-display-lg-line-height);\n --brick-text-letter-spacing: var(--brick-typography-display-lg-letter-spacing);\n }\n\n .brick-text[data-variant-sm=\"title-lg\"] {\n --brick-text-font-family: var(--brick-typography-title-lg-font-family);\n --brick-text-font-size: var(--brick-typography-title-lg-font-size);\n --brick-text-font-weight: var(--brick-typography-title-lg-font-weight);\n --brick-text-line-height: var(--brick-typography-title-lg-line-height);\n --brick-text-letter-spacing: var(--brick-typography-title-lg-letter-spacing);\n }\n\n .brick-text[data-variant-sm=\"title-md\"] {\n --brick-text-font-family: var(--brick-typography-title-md-font-family);\n --brick-text-font-size: var(--brick-typography-title-md-font-size);\n --brick-text-font-weight: var(--brick-typography-title-md-font-weight);\n --brick-text-line-height: var(--brick-typography-title-md-line-height);\n --brick-text-letter-spacing: var(--brick-typography-title-md-letter-spacing);\n }\n\n .brick-text[data-variant-sm=\"title-sm\"] {\n --brick-text-font-family: var(--brick-typography-title-sm-font-family);\n --brick-text-font-size: var(--brick-typography-title-sm-font-size);\n --brick-text-font-weight: var(--brick-typography-title-sm-font-weight);\n --brick-text-line-height: var(--brick-typography-title-sm-line-height);\n --brick-text-letter-spacing: var(--brick-typography-title-sm-letter-spacing);\n }\n\n .brick-text[data-variant-sm=\"body-lg\"] {\n --brick-text-font-family: var(--brick-typography-body-lg-font-family);\n --brick-text-font-size: var(--brick-typography-body-lg-font-size);\n --brick-text-font-weight: var(--brick-typography-body-lg-font-weight);\n --brick-text-line-height: var(--brick-typography-body-lg-line-height);\n --brick-text-letter-spacing: var(--brick-typography-body-lg-letter-spacing);\n }\n\n .brick-text[data-variant-sm=\"body-md\"] {\n --brick-text-font-family: var(--brick-typography-body-md-font-family);\n --brick-text-font-size: var(--brick-typography-body-md-font-size);\n --brick-text-font-weight: var(--brick-typography-body-md-font-weight);\n --brick-text-line-height: var(--brick-typography-body-md-line-height);\n --brick-text-letter-spacing: var(--brick-typography-body-md-letter-spacing);\n }\n\n .brick-text[data-variant-sm=\"body-sm\"] {\n --brick-text-font-family: var(--brick-typography-body-sm-font-family);\n --brick-text-font-size: var(--brick-typography-body-sm-font-size);\n --brick-text-font-weight: var(--brick-typography-body-sm-font-weight);\n --brick-text-line-height: var(--brick-typography-body-sm-line-height);\n --brick-text-letter-spacing: var(--brick-typography-body-sm-letter-spacing);\n }\n\n .brick-text[data-variant-sm=\"caption\"] {\n --brick-text-font-family: var(--brick-typography-caption-font-family);\n --brick-text-font-size: var(--brick-typography-caption-font-size);\n --brick-text-font-weight: var(--brick-typography-caption-font-weight);\n --brick-text-line-height: var(--brick-typography-caption-line-height);\n --brick-text-letter-spacing: var(--brick-typography-caption-letter-spacing);\n }\n\n .brick-text[data-variant-sm=\"eyebrow\"] {\n --brick-text-font-family: var(--brick-typography-eyebrow-font-family);\n --brick-text-font-size: var(--brick-typography-eyebrow-font-size);\n --brick-text-font-weight: var(--brick-typography-eyebrow-font-weight);\n --brick-text-line-height: var(--brick-typography-eyebrow-line-height);\n --brick-text-letter-spacing: var(--brick-typography-eyebrow-letter-spacing);\n --brick-text-text-transform: uppercase;\n }\n }\n\n @media (width >= 48rem) {\n .brick-text[data-variant-md=\"display\"] {\n --brick-text-font-family: var(--brick-typography-display-font-family);\n --brick-text-font-size: var(--brick-typography-display-font-size);\n --brick-text-font-weight: var(--brick-typography-display-font-weight);\n --brick-text-line-height: var(--brick-typography-display-line-height);\n --brick-text-letter-spacing: var(--brick-typography-display-letter-spacing);\n }\n\n .brick-text[data-variant-md=\"display-sm\"] {\n --brick-text-font-family: var(--brick-typography-display-sm-font-family);\n --brick-text-font-size: var(--brick-typography-display-sm-font-size);\n --brick-text-font-weight: var(--brick-typography-display-sm-font-weight);\n --brick-text-line-height: var(--brick-typography-display-sm-line-height);\n --brick-text-letter-spacing: var(--brick-typography-display-sm-letter-spacing);\n }\n\n .brick-text[data-variant-md=\"display-md\"] {\n --brick-text-font-family: var(--brick-typography-display-md-font-family);\n --brick-text-font-size: var(--brick-typography-display-md-font-size);\n --brick-text-font-weight: var(--brick-typography-display-md-font-weight);\n --brick-text-line-height: var(--brick-typography-display-md-line-height);\n --brick-text-letter-spacing: var(--brick-typography-display-md-letter-spacing);\n }\n\n .brick-text[data-variant-md=\"display-lg\"] {\n --brick-text-font-family: var(--brick-typography-display-lg-font-family);\n --brick-text-font-size: var(--brick-typography-display-lg-font-size);\n --brick-text-font-weight: var(--brick-typography-display-lg-font-weight);\n --brick-text-line-height: var(--brick-typography-display-lg-line-height);\n --brick-text-letter-spacing: var(--brick-typography-display-lg-letter-spacing);\n }\n\n .brick-text[data-variant-md=\"title-lg\"] {\n --brick-text-font-family: var(--brick-typography-title-lg-font-family);\n --brick-text-font-size: var(--brick-typography-title-lg-font-size);\n --brick-text-font-weight: var(--brick-typography-title-lg-font-weight);\n --brick-text-line-height: var(--brick-typography-title-lg-line-height);\n --brick-text-letter-spacing: var(--brick-typography-title-lg-letter-spacing);\n }\n\n .brick-text[data-variant-md=\"title-md\"] {\n --brick-text-font-family: var(--brick-typography-title-md-font-family);\n --brick-text-font-size: var(--brick-typography-title-md-font-size);\n --brick-text-font-weight: var(--brick-typography-title-md-font-weight);\n --brick-text-line-height: var(--brick-typography-title-md-line-height);\n --brick-text-letter-spacing: var(--brick-typography-title-md-letter-spacing);\n }\n\n .brick-text[data-variant-md=\"title-sm\"] {\n --brick-text-font-family: var(--brick-typography-title-sm-font-family);\n --brick-text-font-size: var(--brick-typography-title-sm-font-size);\n --brick-text-font-weight: var(--brick-typography-title-sm-font-weight);\n --brick-text-line-height: var(--brick-typography-title-sm-line-height);\n --brick-text-letter-spacing: var(--brick-typography-title-sm-letter-spacing);\n }\n\n .brick-text[data-variant-md=\"body-lg\"] {\n --brick-text-font-family: var(--brick-typography-body-lg-font-family);\n --brick-text-font-size: var(--brick-typography-body-lg-font-size);\n --brick-text-font-weight: var(--brick-typography-body-lg-font-weight);\n --brick-text-line-height: var(--brick-typography-body-lg-line-height);\n --brick-text-letter-spacing: var(--brick-typography-body-lg-letter-spacing);\n }\n\n .brick-text[data-variant-md=\"body-md\"] {\n --brick-text-font-family: var(--brick-typography-body-md-font-family);\n --brick-text-font-size: var(--brick-typography-body-md-font-size);\n --brick-text-font-weight: var(--brick-typography-body-md-font-weight);\n --brick-text-line-height: var(--brick-typography-body-md-line-height);\n --brick-text-letter-spacing: var(--brick-typography-body-md-letter-spacing);\n }\n\n .brick-text[data-variant-md=\"body-sm\"] {\n --brick-text-font-family: var(--brick-typography-body-sm-font-family);\n --brick-text-font-size: var(--brick-typography-body-sm-font-size);\n --brick-text-font-weight: var(--brick-typography-body-sm-font-weight);\n --brick-text-line-height: var(--brick-typography-body-sm-line-height);\n --brick-text-letter-spacing: var(--brick-typography-body-sm-letter-spacing);\n }\n\n .brick-text[data-variant-md=\"caption\"] {\n --brick-text-font-family: var(--brick-typography-caption-font-family);\n --brick-text-font-size: var(--brick-typography-caption-font-size);\n --brick-text-font-weight: var(--brick-typography-caption-font-weight);\n --brick-text-line-height: var(--brick-typography-caption-line-height);\n --brick-text-letter-spacing: var(--brick-typography-caption-letter-spacing);\n }\n\n .brick-text[data-variant-md=\"eyebrow\"] {\n --brick-text-font-family: var(--brick-typography-eyebrow-font-family);\n --brick-text-font-size: var(--brick-typography-eyebrow-font-size);\n --brick-text-font-weight: var(--brick-typography-eyebrow-font-weight);\n --brick-text-line-height: var(--brick-typography-eyebrow-line-height);\n --brick-text-letter-spacing: var(--brick-typography-eyebrow-letter-spacing);\n --brick-text-text-transform: uppercase;\n }\n }\n\n @media (width >= 64rem) {\n .brick-text[data-variant-lg=\"display\"] {\n --brick-text-font-family: var(--brick-typography-display-font-family);\n --brick-text-font-size: var(--brick-typography-display-font-size);\n --brick-text-font-weight: var(--brick-typography-display-font-weight);\n --brick-text-line-height: var(--brick-typography-display-line-height);\n --brick-text-letter-spacing: var(--brick-typography-display-letter-spacing);\n }\n\n .brick-text[data-variant-lg=\"display-sm\"] {\n --brick-text-font-family: var(--brick-typography-display-sm-font-family);\n --brick-text-font-size: var(--brick-typography-display-sm-font-size);\n --brick-text-font-weight: var(--brick-typography-display-sm-font-weight);\n --brick-text-line-height: var(--brick-typography-display-sm-line-height);\n --brick-text-letter-spacing: var(--brick-typography-display-sm-letter-spacing);\n }\n\n .brick-text[data-variant-lg=\"display-md\"] {\n --brick-text-font-family: var(--brick-typography-display-md-font-family);\n --brick-text-font-size: var(--brick-typography-display-md-font-size);\n --brick-text-font-weight: var(--brick-typography-display-md-font-weight);\n --brick-text-line-height: var(--brick-typography-display-md-line-height);\n --brick-text-letter-spacing: var(--brick-typography-display-md-letter-spacing);\n }\n\n .brick-text[data-variant-lg=\"display-lg\"] {\n --brick-text-font-family: var(--brick-typography-display-lg-font-family);\n --brick-text-font-size: var(--brick-typography-display-lg-font-size);\n --brick-text-font-weight: var(--brick-typography-display-lg-font-weight);\n --brick-text-line-height: var(--brick-typography-display-lg-line-height);\n --brick-text-letter-spacing: var(--brick-typography-display-lg-letter-spacing);\n }\n\n .brick-text[data-variant-lg=\"title-lg\"] {\n --brick-text-font-family: var(--brick-typography-title-lg-font-family);\n --brick-text-font-size: var(--brick-typography-title-lg-font-size);\n --brick-text-font-weight: var(--brick-typography-title-lg-font-weight);\n --brick-text-line-height: var(--brick-typography-title-lg-line-height);\n --brick-text-letter-spacing: var(--brick-typography-title-lg-letter-spacing);\n }\n\n .brick-text[data-variant-lg=\"title-md\"] {\n --brick-text-font-family: var(--brick-typography-title-md-font-family);\n --brick-text-font-size: var(--brick-typography-title-md-font-size);\n --brick-text-font-weight: var(--brick-typography-title-md-font-weight);\n --brick-text-line-height: var(--brick-typography-title-md-line-height);\n --brick-text-letter-spacing: var(--brick-typography-title-md-letter-spacing);\n }\n\n .brick-text[data-variant-lg=\"title-sm\"] {\n --brick-text-font-family: var(--brick-typography-title-sm-font-family);\n --brick-text-font-size: var(--brick-typography-title-sm-font-size);\n --brick-text-font-weight: var(--brick-typography-title-sm-font-weight);\n --brick-text-line-height: var(--brick-typography-title-sm-line-height);\n --brick-text-letter-spacing: var(--brick-typography-title-sm-letter-spacing);\n }\n\n .brick-text[data-variant-lg=\"body-lg\"] {\n --brick-text-font-family: var(--brick-typography-body-lg-font-family);\n --brick-text-font-size: var(--brick-typography-body-lg-font-size);\n --brick-text-font-weight: var(--brick-typography-body-lg-font-weight);\n --brick-text-line-height: var(--brick-typography-body-lg-line-height);\n --brick-text-letter-spacing: var(--brick-typography-body-lg-letter-spacing);\n }\n\n .brick-text[data-variant-lg=\"body-md\"] {\n --brick-text-font-family: var(--brick-typography-body-md-font-family);\n --brick-text-font-size: var(--brick-typography-body-md-font-size);\n --brick-text-font-weight: var(--brick-typography-body-md-font-weight);\n --brick-text-line-height: var(--brick-typography-body-md-line-height);\n --brick-text-letter-spacing: var(--brick-typography-body-md-letter-spacing);\n }\n\n .brick-text[data-variant-lg=\"body-sm\"] {\n --brick-text-font-family: var(--brick-typography-body-sm-font-family);\n --brick-text-font-size: var(--brick-typography-body-sm-font-size);\n --brick-text-font-weight: var(--brick-typography-body-sm-font-weight);\n --brick-text-line-height: var(--brick-typography-body-sm-line-height);\n --brick-text-letter-spacing: var(--brick-typography-body-sm-letter-spacing);\n }\n\n .brick-text[data-variant-lg=\"caption\"] {\n --brick-text-font-family: var(--brick-typography-caption-font-family);\n --brick-text-font-size: var(--brick-typography-caption-font-size);\n --brick-text-font-weight: var(--brick-typography-caption-font-weight);\n --brick-text-line-height: var(--brick-typography-caption-line-height);\n --brick-text-letter-spacing: var(--brick-typography-caption-letter-spacing);\n }\n\n .brick-text[data-variant-lg=\"eyebrow\"] {\n --brick-text-font-family: var(--brick-typography-eyebrow-font-family);\n --brick-text-font-size: var(--brick-typography-eyebrow-font-size);\n --brick-text-font-weight: var(--brick-typography-eyebrow-font-weight);\n --brick-text-line-height: var(--brick-typography-eyebrow-line-height);\n --brick-text-letter-spacing: var(--brick-typography-eyebrow-letter-spacing);\n --brick-text-text-transform: uppercase;\n }\n }\n\n @media (width >= 80rem) {\n .brick-text[data-variant-xl=\"display\"] {\n --brick-text-font-family: var(--brick-typography-display-font-family);\n --brick-text-font-size: var(--brick-typography-display-font-size);\n --brick-text-font-weight: var(--brick-typography-display-font-weight);\n --brick-text-line-height: var(--brick-typography-display-line-height);\n --brick-text-letter-spacing: var(--brick-typography-display-letter-spacing);\n }\n\n .brick-text[data-variant-xl=\"display-sm\"] {\n --brick-text-font-family: var(--brick-typography-display-sm-font-family);\n --brick-text-font-size: var(--brick-typography-display-sm-font-size);\n --brick-text-font-weight: var(--brick-typography-display-sm-font-weight);\n --brick-text-line-height: var(--brick-typography-display-sm-line-height);\n --brick-text-letter-spacing: var(--brick-typography-display-sm-letter-spacing);\n }\n\n .brick-text[data-variant-xl=\"display-md\"] {\n --brick-text-font-family: var(--brick-typography-display-md-font-family);\n --brick-text-font-size: var(--brick-typography-display-md-font-size);\n --brick-text-font-weight: var(--brick-typography-display-md-font-weight);\n --brick-text-line-height: var(--brick-typography-display-md-line-height);\n --brick-text-letter-spacing: var(--brick-typography-display-md-letter-spacing);\n }\n\n .brick-text[data-variant-xl=\"display-lg\"] {\n --brick-text-font-family: var(--brick-typography-display-lg-font-family);\n --brick-text-font-size: var(--brick-typography-display-lg-font-size);\n --brick-text-font-weight: var(--brick-typography-display-lg-font-weight);\n --brick-text-line-height: var(--brick-typography-display-lg-line-height);\n --brick-text-letter-spacing: var(--brick-typography-display-lg-letter-spacing);\n }\n\n .brick-text[data-variant-xl=\"title-lg\"] {\n --brick-text-font-family: var(--brick-typography-title-lg-font-family);\n --brick-text-font-size: var(--brick-typography-title-lg-font-size);\n --brick-text-font-weight: var(--brick-typography-title-lg-font-weight);\n --brick-text-line-height: var(--brick-typography-title-lg-line-height);\n --brick-text-letter-spacing: var(--brick-typography-title-lg-letter-spacing);\n }\n\n .brick-text[data-variant-xl=\"title-md\"] {\n --brick-text-font-family: var(--brick-typography-title-md-font-family);\n --brick-text-font-size: var(--brick-typography-title-md-font-size);\n --brick-text-font-weight: var(--brick-typography-title-md-font-weight);\n --brick-text-line-height: var(--brick-typography-title-md-line-height);\n --brick-text-letter-spacing: var(--brick-typography-title-md-letter-spacing);\n }\n\n .brick-text[data-variant-xl=\"title-sm\"] {\n --brick-text-font-family: var(--brick-typography-title-sm-font-family);\n --brick-text-font-size: var(--brick-typography-title-sm-font-size);\n --brick-text-font-weight: var(--brick-typography-title-sm-font-weight);\n --brick-text-line-height: var(--brick-typography-title-sm-line-height);\n --brick-text-letter-spacing: var(--brick-typography-title-sm-letter-spacing);\n }\n\n .brick-text[data-variant-xl=\"body-lg\"] {\n --brick-text-font-family: var(--brick-typography-body-lg-font-family);\n --brick-text-font-size: var(--brick-typography-body-lg-font-size);\n --brick-text-font-weight: var(--brick-typography-body-lg-font-weight);\n --brick-text-line-height: var(--brick-typography-body-lg-line-height);\n --brick-text-letter-spacing: var(--brick-typography-body-lg-letter-spacing);\n }\n\n .brick-text[data-variant-xl=\"body-md\"] {\n --brick-text-font-family: var(--brick-typography-body-md-font-family);\n --brick-text-font-size: var(--brick-typography-body-md-font-size);\n --brick-text-font-weight: var(--brick-typography-body-md-font-weight);\n --brick-text-line-height: var(--brick-typography-body-md-line-height);\n --brick-text-letter-spacing: var(--brick-typography-body-md-letter-spacing);\n }\n\n .brick-text[data-variant-xl=\"body-sm\"] {\n --brick-text-font-family: var(--brick-typography-body-sm-font-family);\n --brick-text-font-size: var(--brick-typography-body-sm-font-size);\n --brick-text-font-weight: var(--brick-typography-body-sm-font-weight);\n --brick-text-line-height: var(--brick-typography-body-sm-line-height);\n --brick-text-letter-spacing: var(--brick-typography-body-sm-letter-spacing);\n }\n\n .brick-text[data-variant-xl=\"caption\"] {\n --brick-text-font-family: var(--brick-typography-caption-font-family);\n --brick-text-font-size: var(--brick-typography-caption-font-size);\n --brick-text-font-weight: var(--brick-typography-caption-font-weight);\n --brick-text-line-height: var(--brick-typography-caption-line-height);\n --brick-text-letter-spacing: var(--brick-typography-caption-letter-spacing);\n }\n\n .brick-text[data-variant-xl=\"eyebrow\"] {\n --brick-text-font-family: var(--brick-typography-eyebrow-font-family);\n --brick-text-font-size: var(--brick-typography-eyebrow-font-size);\n --brick-text-font-weight: var(--brick-typography-eyebrow-font-weight);\n --brick-text-line-height: var(--brick-typography-eyebrow-line-height);\n --brick-text-letter-spacing: var(--brick-typography-eyebrow-letter-spacing);\n --brick-text-text-transform: uppercase;\n }\n }\n\n @media (width >= 30rem) {\n .brick-text:is([data-variant-sm=\"display\"], [data-variant-sm=\"display-sm\"], [data-variant-sm=\"display-md\"], [data-variant-sm=\"display-lg\"], [data-variant-sm=\"title-lg\"], [data-variant-sm=\"title-md\"], [data-variant-sm=\"title-sm\"], [data-variant-sm=\"body-lg\"], [data-variant-sm=\"body-md\"], [data-variant-sm=\"body-sm\"], [data-variant-sm=\"caption\"]) {\n --brick-text-text-transform: none;\n }\n }\n\n @media (width >= 48rem) {\n .brick-text:is([data-variant-md=\"display\"], [data-variant-md=\"display-sm\"], [data-variant-md=\"display-md\"], [data-variant-md=\"display-lg\"], [data-variant-md=\"title-lg\"], [data-variant-md=\"title-md\"], [data-variant-md=\"title-sm\"], [data-variant-md=\"body-lg\"], [data-variant-md=\"body-md\"], [data-variant-md=\"body-sm\"], [data-variant-md=\"caption\"]) {\n --brick-text-text-transform: none;\n }\n }\n\n @media (width >= 64rem) {\n .brick-text:is([data-variant-lg=\"display\"], [data-variant-lg=\"display-sm\"], [data-variant-lg=\"display-md\"], [data-variant-lg=\"display-lg\"], [data-variant-lg=\"title-lg\"], [data-variant-lg=\"title-md\"], [data-variant-lg=\"title-sm\"], [data-variant-lg=\"body-lg\"], [data-variant-lg=\"body-md\"], [data-variant-lg=\"body-sm\"], [data-variant-lg=\"caption\"]) {\n --brick-text-text-transform: none;\n }\n }\n\n @media (width >= 80rem) {\n .brick-text:is([data-variant-xl=\"display\"], [data-variant-xl=\"display-sm\"], [data-variant-xl=\"display-md\"], [data-variant-xl=\"display-lg\"], [data-variant-xl=\"title-lg\"], [data-variant-xl=\"title-md\"], [data-variant-xl=\"title-sm\"], [data-variant-xl=\"body-lg\"], [data-variant-xl=\"body-md\"], [data-variant-xl=\"body-sm\"], [data-variant-xl=\"caption\"]) {\n --brick-text-text-transform: none;\n }\n }\n\n .brick-text[data-tone=\"inherit\"] {\n --brick-text-foreground: currentColor;\n }\n\n .brick-text[data-tone=\"secondary\"] {\n --brick-text-foreground: var(--brick-color-text-secondary);\n }\n\n .brick-text[data-tone=\"muted\"] {\n --brick-text-foreground: var(--brick-color-text-muted);\n }\n\n .brick-text[data-tone=\"accent\"] {\n --brick-text-foreground: var(--brick-color-accent-text);\n }\n\n .brick-text[data-tone=\"info\"] {\n --brick-text-foreground: var(--brick-color-info-text);\n }\n\n .brick-text[data-tone=\"success\"] {\n --brick-text-foreground: var(--brick-color-success-text);\n }\n\n .brick-text[data-tone=\"warning\"] {\n --brick-text-foreground: var(--brick-color-warning-text);\n }\n\n .brick-text[data-tone=\"danger\"] {\n --brick-text-foreground: var(--brick-color-danger-text);\n }\n\n .brick-text[data-weight=\"inherit\"] {\n --brick-text-font-weight: inherit;\n }\n\n .brick-text[data-weight=\"regular\"] {\n --brick-text-font-weight: var(--brick-font-weight-regular);\n }\n\n .brick-text[data-weight=\"medium\"] {\n --brick-text-font-weight: var(--brick-font-weight-medium);\n }\n\n .brick-text[data-weight=\"semibold\"] {\n --brick-text-font-weight: var(--brick-font-weight-semibold);\n }\n\n .brick-text[data-transform=\"none\"] {\n --brick-text-text-transform: none;\n }\n\n .brick-text[data-transform=\"uppercase\"] {\n --brick-text-text-transform: uppercase;\n }\n\n .brick-text[data-transform=\"lowercase\"] {\n --brick-text-text-transform: lowercase;\n }\n\n .brick-text[data-transform=\"capitalize\"] {\n --brick-text-text-transform: capitalize;\n }\n\n .brick-text[data-align=\"start\"] {\n text-align: start;\n }\n\n .brick-text[data-align=\"center\"] {\n text-align: center;\n }\n\n .brick-text[data-align=\"end\"] {\n text-align: end;\n }\n\n @media (width >= 30rem) {\n .brick-text[data-align-sm=\"start\"] { text-align: start; }\n .brick-text[data-align-sm=\"center\"] { text-align: center; }\n .brick-text[data-align-sm=\"end\"] { text-align: end; }\n }\n\n @media (width >= 48rem) {\n .brick-text[data-align-md=\"start\"] { text-align: start; }\n .brick-text[data-align-md=\"center\"] { text-align: center; }\n .brick-text[data-align-md=\"end\"] { text-align: end; }\n }\n\n @media (width >= 64rem) {\n .brick-text[data-align-lg=\"start\"] { text-align: start; }\n .brick-text[data-align-lg=\"center\"] { text-align: center; }\n .brick-text[data-align-lg=\"end\"] { text-align: end; }\n }\n\n @media (width >= 80rem) {\n .brick-text[data-align-xl=\"start\"] { text-align: start; }\n .brick-text[data-align-xl=\"center\"] { text-align: center; }\n .brick-text[data-align-xl=\"end\"] { text-align: end; }\n }\n\n .brick-text[data-wrap=\"nowrap\"] {\n text-wrap: nowrap;\n }\n\n .brick-text[data-wrap=\"balance\"] {\n text-wrap: balance;\n }\n\n .brick-text[data-wrap=\"pretty\"] {\n text-wrap: pretty;\n }\n\n .brick-text[data-truncate] {\n display: block;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .brick-text[data-line-clamp] {\n display: -webkit-box;\n min-inline-size: 0;\n overflow: hidden;\n -webkit-box-orient: vertical;\n }\n\n .brick-text[data-line-clamp=\"2\"] {\n -webkit-line-clamp: 2;\n }\n\n .brick-text[data-line-clamp=\"3\"] {\n -webkit-line-clamp: 3;\n }\n\n .brick-text[data-line-clamp=\"4\"] {\n -webkit-line-clamp: 4;\n }\n\n .brick-text[data-line-clamp=\"5\"] {\n -webkit-line-clamp: 5;\n }\n\n .brick-text[data-line-clamp=\"6\"] {\n -webkit-line-clamp: 6;\n }\n\n @media (forced-colors: active) {\n .brick-text:not([data-tone=\"inherit\"]) {\n --brick-text-foreground: CanvasText;\n }\n }\n}\n"],"names":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer brick.tokens,flowstack.theme,brick.foundations;@layer brick.components{:where(.brick-toggle,.brick-toggle-group-item){--brick-toggle-min-block-size:var(--brick-control-min-block-size-md);--brick-toggle-padding-inline:1rem;--brick-toggle-gap:.5rem;--brick-toggle-radius:var(--brick-radius-control);--brick-toggle-icon-size:1.125rem;box-sizing:border-box;min-inline-size:0;max-inline-size:100%;min-block-size:var(--brick-toggle-min-block-size);justify-content:center;align-items:center;gap:var(--brick-toggle-gap);padding-block:.375rem;padding-inline:var(--brick-toggle-padding-inline);border:var(--brick-border-width) solid transparent;border-radius:var(--brick-toggle-radius);appearance:none;background:var(--brick-color-surface-subtle);color:var(--brick-color-text-primary);font-family:var(--brick-typography-control-md-font-family);font-size:var(--brick-typography-control-md-font-size);font-weight:var(--brick-typography-control-md-font-weight);letter-spacing:var(--brick-typography-control-md-letter-spacing);line-height:var(--brick-typography-control-md-line-height);overflow-wrap:anywhere;text-align:center;-webkit-user-select:none;user-select:none;vertical-align:middle;transition:background-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), border-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);text-decoration:none;display:inline-flex}:where(.brick-toggle,.brick-toggle-group-item)>:where(svg,img){inline-size:var(--brick-toggle-icon-size);block-size:var(--brick-toggle-icon-size);flex:none}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]){cursor:pointer}:where(.brick-toggle,.brick-toggle-group-item):focus-visible{z-index:1;outline:var(--brick-border-focus-width) solid var(--brick-color-focus-ring);outline-offset:var(--brick-border-focus-offset)}:where(.brick-toggle,.brick-toggle-group-item)[data-state=on]{border-color:var(--brick-color-accent-border);background:var(--brick-color-accent-soft);color:var(--brick-color-accent-on-soft);box-shadow:inset 0 -.125rem 0 var(--brick-color-accent-solid)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]{border-color:var(--brick-color-accent-solid);background:var(--brick-color-accent-solid);color:var(--brick-color-accent-on-solid);box-shadow:none}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=outline]{border-color:var(--brick-color-border-default);background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=outline][data-state=on]{border-color:var(--brick-color-accent-border);color:var(--brick-color-accent-text);box-shadow:none;background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]{background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost][data-state=on]{background:var(--brick-color-accent-soft);box-shadow:none;border-color:#0000}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]):active{background:var(--brick-color-accent-soft-pressed)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]:not([data-disabled]):active{border-color:var(--brick-color-accent-solid-pressed);background:var(--brick-color-accent-solid-pressed)}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled]{border-color:var(--brick-color-border-subtle);background:var(--brick-color-surface-subtle);color:var(--brick-color-text-secondary);box-shadow:none;cursor:not-allowed;opacity:.65}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled][data-state=on]{border-color:var(--brick-color-border-strong);box-shadow:inset 0 -.125rem 0 var(--brick-color-text-secondary)}:where(.brick-toggle,.brick-toggle-group-item)[data-size=sm]{--brick-toggle-min-block-size:var(--brick-control-min-block-size-sm);--brick-toggle-padding-inline:.75rem;--brick-toggle-gap:.375rem;--brick-toggle-icon-size:1rem;font-size:var(--brick-typography-control-sm-font-size);padding-block:.25rem}:where(.brick-toggle,.brick-toggle-group-item)[data-size=lg]{--brick-toggle-min-block-size:var(--brick-control-min-block-size-lg);--brick-toggle-padding-inline:1.25rem;--brick-toggle-gap:.625rem;--brick-toggle-icon-size:1.25rem;font-size:var(--brick-typography-control-lg-font-size);padding-block:.5rem}:where(.brick-toggle,.brick-toggle-group-item)[data-shape=pill]{--brick-toggle-radius:var(--brick-radius-full)}:where(.brick-toggle,.brick-toggle-group-item)[data-icon-only]{inline-size:var(--brick-toggle-min-block-size);padding-inline:0}@media (hover:hover) and (pointer:fine){:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]):hover{background:var(--brick-color-surface-base)}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled])[data-state=on]:hover{background:var(--brick-color-accent-soft-hover)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]:not([data-disabled]):hover{border-color:var(--brick-color-accent-solid-hover);background:var(--brick-color-accent-solid-hover)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]:not([data-disabled]):hover{background:var(--brick-color-surface-subtle)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]:not([data-disabled])[data-state=on]:hover{background:var(--brick-color-accent-soft-hover)}}@media (prefers-reduced-motion:reduce){:where(.brick-toggle,.brick-toggle-group-item){transition-duration:0s}}@media (forced-colors:active){:where(.brick-toggle,.brick-toggle-group-item){color:buttontext;background:buttonface;border-color:buttontext}:where(.brick-toggle,.brick-toggle-group-item)[data-state=on]{color:buttontext;outline-offset:-.25rem;box-shadow:none;background:buttonface;border-color:highlight;outline:.125rem solid highlight}:where(.brick-toggle,.brick-toggle-group-item):focus-visible{outline-offset:var(--brick-border-focus-offset);outline-color:highlight}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled]{color:graytext;opacity:1;border-color:graytext}}.brick-toggle-group{--brick-toggle-group-gap:.5rem;box-sizing:border-box;align-items:stretch;gap:var(--brick-toggle-group-gap);min-inline-size:0;max-inline-size:100%;display:inline-flex}.brick-toggle-group[data-orientation=horizontal]{flex-flow:wrap}.brick-toggle-group[data-orientation=vertical]{flex-direction:column}.brick-toggle-group[data-full-width]{inline-size:100%;display:flex}.brick-toggle-group[data-full-width]>.brick-toggle-group-item{flex:1 1 0}.brick-toggle-group>.brick-toggle-group-item{--brick-toggle-min-block-size:var(--brick-control-min-block-size-md);--brick-toggle-padding-inline:1rem;--brick-toggle-gap:.5rem;--brick-toggle-icon-size:1.125rem}.brick-toggle-group[data-size=sm]>.brick-toggle-group-item{--brick-toggle-min-block-size:var(--brick-control-min-block-size-sm);--brick-toggle-padding-inline:.75rem;--brick-toggle-gap:.375rem;--brick-toggle-icon-size:1rem;font-size:var(--brick-typography-control-sm-font-size);padding-block:.25rem}.brick-toggle-group[data-size=lg]>.brick-toggle-group-item{--brick-toggle-min-block-size:var(--brick-control-min-block-size-lg);--brick-toggle-padding-inline:1.25rem;--brick-toggle-gap:.625rem;--brick-toggle-icon-size:1.25rem;font-size:var(--brick-typography-control-lg-font-size);padding-block:.5rem}.brick-toggle-group[data-shape=pill]>.brick-toggle-group-item{--brick-toggle-radius:var(--brick-radius-full)}.brick-toggle-group[data-variant=solid]>.brick-toggle-group-item[data-state=on]{border-color:var(--brick-color-accent-solid);background:var(--brick-color-accent-solid);color:var(--brick-color-accent-on-solid);box-shadow:none}.brick-toggle-group[data-variant=outline]>.brick-toggle-group-item{border-color:var(--brick-color-border-default);background:0 0}.brick-toggle-group[data-variant=outline]>.brick-toggle-group-item[data-state=on]{border-color:var(--brick-color-accent-border);color:var(--brick-color-accent-text);box-shadow:none;background:0 0}.brick-toggle-group[data-variant=ghost]>.brick-toggle-group-item{background:0 0}.brick-toggle-group[data-variant=ghost]>.brick-toggle-group-item[data-state=on]{background:var(--brick-color-accent-soft);box-shadow:none;border-color:#0000}.brick-toggle-group[data-variant=solid]>.brick-toggle-group-item[data-state=on]:not([data-disabled]):active{border-color:var(--brick-color-accent-solid-pressed);background:var(--brick-color-accent-solid-pressed)}.brick-toggle-group[data-attached=true]{--brick-toggle-group-gap:0;flex-wrap:nowrap}.brick-toggle-group[data-attached=true]>.brick-toggle-group-item{--brick-toggle-radius:0}.brick-toggle-group[data-attached=true][data-orientation=horizontal]>.brick-toggle-group-item+.brick-toggle-group-item{margin-inline-start:calc(-1 * var(--brick-border-width))}.brick-toggle-group[data-attached=true][data-orientation=vertical]>.brick-toggle-group-item+.brick-toggle-group-item{margin-block-start:calc(-1 * var(--brick-border-width))}.brick-toggle-group[data-attached=true][data-orientation=horizontal]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-control);border-end-start-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-orientation=horizontal]>.brick-toggle-group-item:last-child{border-start-end-radius:var(--brick-radius-control);border-end-end-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-orientation=vertical]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-control);border-start-end-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-orientation=vertical]>.brick-toggle-group-item:last-child{border-end-end-radius:var(--brick-radius-control);border-end-start-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=horizontal]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-full);border-end-start-radius:var(--brick-radius-full)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=horizontal]>.brick-toggle-group-item:last-child{border-start-end-radius:var(--brick-radius-full);border-end-end-radius:var(--brick-radius-full)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=vertical]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-full);border-start-end-radius:var(--brick-radius-full)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=vertical]>.brick-toggle-group-item:last-child{border-end-end-radius:var(--brick-radius-full);border-end-start-radius:var(--brick-radius-full)}@media (hover:hover) and (pointer:fine){.brick-toggle-group[data-variant=solid]>.brick-toggle-group-item[data-state=on]:not([data-disabled]):hover{border-color:var(--brick-color-accent-solid-hover);background:var(--brick-color-accent-solid-hover)}}}@layer brick.utilities,brick.effects;
|
|
1
|
+
@layer brick.tokens,flowstack.theme,brick.foundations;@layer brick.components{:where(.brick-toggle,.brick-toggle-group-item){--brick-toggle-min-block-size:var(--brick-control-min-block-size-md);--brick-toggle-padding-inline:1rem;--brick-toggle-gap:.5rem;--brick-toggle-radius:var(--brick-radius-control);--brick-toggle-icon-size:1.125rem;--brick-toggle-tone-solid:var(--brick-color-accent-solid);--brick-toggle-tone-solid-hover:var(--brick-color-accent-solid-hover);--brick-toggle-tone-solid-pressed:var(--brick-color-accent-solid-pressed);--brick-toggle-tone-on-solid:var(--brick-color-accent-on-solid);--brick-toggle-tone-soft:var(--brick-color-accent-soft);--brick-toggle-tone-soft-hover:var(--brick-color-accent-soft-hover);--brick-toggle-tone-soft-pressed:var(--brick-color-accent-soft-pressed);--brick-toggle-tone-on-soft:var(--brick-color-accent-on-soft);--brick-toggle-tone-border:var(--brick-color-accent-border);--brick-toggle-tone-text:var(--brick-color-accent-text);--brick-toggle-tone-outline-border:var(--brick-color-accent-solid);--brick-toggle-tone-outline-foreground:var(--brick-color-text-primary);box-sizing:border-box;min-inline-size:0;max-inline-size:100%;min-block-size:var(--brick-toggle-min-block-size);justify-content:center;align-items:center;gap:var(--brick-toggle-gap);padding-block:.375rem;padding-inline:var(--brick-toggle-padding-inline);border:var(--brick-border-width) solid transparent;border-radius:var(--brick-toggle-radius);appearance:none;background:var(--brick-color-surface-subtle);color:var(--brick-color-text-primary);font-family:var(--brick-typography-control-md-font-family);font-size:var(--brick-typography-control-md-font-size);font-weight:var(--brick-typography-control-md-font-weight);letter-spacing:var(--brick-typography-control-md-letter-spacing);line-height:var(--brick-typography-control-md-line-height);overflow-wrap:anywhere;text-align:center;-webkit-user-select:none;user-select:none;vertical-align:middle;transition:background-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), border-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);text-decoration:none;display:inline-flex}:where(.brick-toggle[data-tone=neutral],.brick-toggle-group[data-tone=neutral]>.brick-toggle-group-item){--brick-toggle-tone-solid:color-mix(in srgb, var(--brick-color-surface-subtle), var(--brick-color-text-primary) 16%);--brick-toggle-tone-solid-hover:color-mix(in srgb, var(--brick-color-surface-subtle), var(--brick-color-text-primary) 22%);--brick-toggle-tone-solid-pressed:color-mix(in srgb, var(--brick-color-surface-subtle), var(--brick-color-text-primary) 28%);--brick-toggle-tone-on-solid:var(--brick-color-text-primary);--brick-toggle-tone-soft:var(--brick-color-surface-subtle);--brick-toggle-tone-soft-hover:var(--brick-color-surface-base);--brick-toggle-tone-soft-pressed:var(--brick-color-border-subtle);--brick-toggle-tone-on-soft:var(--brick-color-text-primary);--brick-toggle-tone-border:var(--brick-color-border-strong);--brick-toggle-tone-text:var(--brick-color-text-primary);--brick-toggle-tone-outline-border:var(--brick-color-border-strong);--brick-toggle-tone-outline-foreground:var(--brick-color-text-primary)}:where(.brick-toggle,.brick-toggle-group-item)>:where(svg,img){inline-size:var(--brick-toggle-icon-size);block-size:var(--brick-toggle-icon-size);flex:none}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]){cursor:pointer}:where(.brick-toggle,.brick-toggle-group-item):focus-visible{z-index:1;outline:var(--brick-border-focus-width) solid var(--brick-color-focus-ring);outline-offset:var(--brick-border-focus-offset)}:where(.brick-toggle,.brick-toggle-group-item)[data-state=on]{border-color:var(--brick-toggle-tone-border);background:var(--brick-toggle-tone-soft);color:var(--brick-toggle-tone-on-soft);box-shadow:inset 0 -.125rem 0 var(--brick-toggle-tone-solid)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]{border-color:var(--brick-toggle-tone-solid);background:var(--brick-toggle-tone-solid);color:var(--brick-toggle-tone-on-solid);box-shadow:none}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=outline]{border-color:var(--brick-color-border-default);background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=outline][data-state=on]{border-color:var(--brick-toggle-tone-outline-border);color:var(--brick-toggle-tone-outline-foreground);box-shadow:none;background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]{background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost][data-state=on]{background:var(--brick-toggle-tone-soft);box-shadow:none;border-color:#0000}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]):active{background:var(--brick-toggle-tone-soft-pressed)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]:not([data-disabled]):active{border-color:var(--brick-toggle-tone-solid-pressed);background:var(--brick-toggle-tone-solid-pressed)}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled]{border-color:var(--brick-color-border-subtle);background:var(--brick-color-surface-subtle);color:var(--brick-color-text-disabled);box-shadow:none;cursor:not-allowed;opacity:.55}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled][data-state=on]{border-color:var(--brick-color-border-subtle);background:var(--brick-color-surface-base);box-shadow:none}:where(.brick-toggle,.brick-toggle-group-item)[data-size=sm]{--brick-toggle-min-block-size:var(--brick-control-min-block-size-sm);--brick-toggle-padding-inline:.75rem;--brick-toggle-gap:.375rem;--brick-toggle-icon-size:1rem;font-size:var(--brick-typography-control-sm-font-size);padding-block:.25rem}:where(.brick-toggle,.brick-toggle-group-item)[data-size=lg]{--brick-toggle-min-block-size:var(--brick-control-min-block-size-lg);--brick-toggle-padding-inline:1.25rem;--brick-toggle-gap:.625rem;--brick-toggle-icon-size:1.25rem;font-size:var(--brick-typography-control-lg-font-size);padding-block:.5rem}:where(.brick-toggle,.brick-toggle-group-item)[data-shape=pill]{--brick-toggle-radius:var(--brick-radius-full)}:where(.brick-toggle,.brick-toggle-group-item)[data-icon-only]{inline-size:var(--brick-toggle-min-block-size);padding-inline:0}@media (hover:hover) and (pointer:fine){:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]):hover{background:var(--brick-color-surface-base)}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled])[data-state=on]:hover{background:var(--brick-toggle-tone-soft-hover)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]:not([data-disabled]):hover{border-color:var(--brick-toggle-tone-solid-hover);background:var(--brick-toggle-tone-solid-hover)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]:not([data-disabled]):hover{background:var(--brick-color-surface-subtle)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]:not([data-disabled])[data-state=on]:hover{background:var(--brick-toggle-tone-soft-hover)}}@media (prefers-reduced-motion:reduce){:where(.brick-toggle,.brick-toggle-group-item){transition-duration:0s}}@media (forced-colors:active){:where(.brick-toggle,.brick-toggle-group-item){color:buttontext;background:buttonface;border-color:buttontext}:where(.brick-toggle,.brick-toggle-group-item)[data-state=on]{color:buttontext;outline-offset:-.25rem;box-shadow:none;background:buttonface;border-color:highlight;outline:.125rem solid highlight}:where(.brick-toggle,.brick-toggle-group-item):focus-visible{outline-offset:var(--brick-border-focus-offset);outline-color:highlight}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled]{color:graytext;opacity:1;border-color:graytext}}.brick-toggle-group{--brick-toggle-group-gap:.5rem;box-sizing:border-box;align-items:stretch;gap:var(--brick-toggle-group-gap);min-inline-size:0;max-inline-size:100%;display:inline-flex}.brick-toggle-group[data-orientation=horizontal]{flex-flow:wrap}.brick-toggle-group[data-orientation=vertical]{flex-direction:column}.brick-toggle-group[data-full-width]{inline-size:100%;display:flex}.brick-toggle-group[data-full-width]>.brick-toggle-group-item{flex:1 1 0}.brick-toggle-group>.brick-toggle-group-item{--brick-toggle-min-block-size:var(--brick-control-min-block-size-md);--brick-toggle-padding-inline:1rem;--brick-toggle-gap:.5rem;--brick-toggle-icon-size:1.125rem}.brick-toggle-group[data-size=sm]>.brick-toggle-group-item{--brick-toggle-min-block-size:var(--brick-control-min-block-size-sm);--brick-toggle-padding-inline:.75rem;--brick-toggle-gap:.375rem;--brick-toggle-icon-size:1rem;font-size:var(--brick-typography-control-sm-font-size);padding-block:.25rem}.brick-toggle-group[data-size=lg]>.brick-toggle-group-item{--brick-toggle-min-block-size:var(--brick-control-min-block-size-lg);--brick-toggle-padding-inline:1.25rem;--brick-toggle-gap:.625rem;--brick-toggle-icon-size:1.25rem;font-size:var(--brick-typography-control-lg-font-size);padding-block:.5rem}.brick-toggle-group[data-shape=pill]>.brick-toggle-group-item{--brick-toggle-radius:var(--brick-radius-full)}.brick-toggle-group[data-variant=solid]>.brick-toggle-group-item[data-state=on]{border-color:var(--brick-toggle-tone-solid);background:var(--brick-toggle-tone-solid);color:var(--brick-toggle-tone-on-solid);box-shadow:none}.brick-toggle-group[data-variant=outline]>.brick-toggle-group-item{border-color:var(--brick-color-border-default);background:0 0}.brick-toggle-group[data-variant=outline]>.brick-toggle-group-item[data-state=on]{border-color:var(--brick-toggle-tone-outline-border);color:var(--brick-toggle-tone-outline-foreground);box-shadow:none;background:0 0}.brick-toggle-group[data-variant=ghost]>.brick-toggle-group-item{background:0 0}.brick-toggle-group[data-variant=ghost]>.brick-toggle-group-item[data-state=on]{background:var(--brick-toggle-tone-soft);box-shadow:none;border-color:#0000}.brick-toggle-group[data-variant=solid]>.brick-toggle-group-item[data-state=on]:not([data-disabled]):active{border-color:var(--brick-toggle-tone-solid-pressed);background:var(--brick-toggle-tone-solid-pressed)}.brick-toggle-group[data-attached=true]{--brick-toggle-group-gap:0;flex-wrap:nowrap}.brick-toggle-group[data-attached=true]>.brick-toggle-group-item{--brick-toggle-radius:0}.brick-toggle-group[data-attached=true][data-orientation=horizontal]>.brick-toggle-group-item+.brick-toggle-group-item{margin-inline-start:calc(-1 * var(--brick-border-width))}.brick-toggle-group[data-attached=true][data-orientation=vertical]>.brick-toggle-group-item+.brick-toggle-group-item{margin-block-start:calc(-1 * var(--brick-border-width))}.brick-toggle-group[data-attached=true][data-orientation=horizontal]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-control);border-end-start-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-orientation=horizontal]>.brick-toggle-group-item:last-child{border-start-end-radius:var(--brick-radius-control);border-end-end-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-orientation=vertical]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-control);border-start-end-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-orientation=vertical]>.brick-toggle-group-item:last-child{border-end-end-radius:var(--brick-radius-control);border-end-start-radius:var(--brick-radius-control)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=horizontal]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-full);border-end-start-radius:var(--brick-radius-full)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=horizontal]>.brick-toggle-group-item:last-child{border-start-end-radius:var(--brick-radius-full);border-end-end-radius:var(--brick-radius-full)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=vertical]>.brick-toggle-group-item:first-child{border-start-start-radius:var(--brick-radius-full);border-start-end-radius:var(--brick-radius-full)}.brick-toggle-group[data-attached=true][data-shape=pill][data-orientation=vertical]>.brick-toggle-group-item:last-child{border-end-end-radius:var(--brick-radius-full);border-end-start-radius:var(--brick-radius-full)}@media (hover:hover) and (pointer:fine){.brick-toggle-group[data-variant=solid]>.brick-toggle-group-item[data-state=on]:not([data-disabled]):hover{border-color:var(--brick-toggle-tone-solid-hover);background:var(--brick-toggle-tone-solid-hover)}}}@layer brick.utilities,brick.effects;
|
|
2
2
|
/*# sourceMappingURL=toggle-group.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACAA,sDAAA,wBCCE,83CAsCA,4JAMA,mFAIA,mMAMA,4PAOA,mOAOA,mIAKA,sMAOA,kFAIA,+JAMA,6HAIA,sNAKA,gPASA,2LAKA,4SAUA,+SAUA,+GAIA,+HAKA,wCACE,qHAIA,yIAIA,iNAKA,2IAIA,8JAKF,uCACE,uEAKF,8BACE,8GAMA,mMASA,qIAKA,8GChMF,0LAWA,gEAIA,qEAIA,mEAKA,yEAIA,gNAOA,0SAUA,6SAUA,6GAIA,iOAOA,iIAKA,oMAOA,gFAIA,6JAMA,oNAKA,oFAMA,yFAIA,gLAIA,6KAIA,oNAKA,+MAKA,kNAKA,6MAKA,+NAKA,0NAKA,6NAKA,wNAKA,wCACE,iNFzJJ","sources":["home/runner/work/brick/brick/.brick-cache/production/toggle-group.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/toggle/toggle.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/toggle-group/toggle-group.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/toggle/toggle.css\";\n@import \"../../src/components/toggle-group/toggle-group.css\";","@layer brick.tokens, flowstack.theme, brick.foundations, brick.components, brick.utilities, brick.effects;\n","@layer brick.components {\n :where(.brick-toggle, .brick-toggle-group-item) {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-md);\n --brick-toggle-padding-inline: 1rem;\n --brick-toggle-gap: 0.5rem;\n --brick-toggle-radius: var(--brick-radius-control);\n --brick-toggle-icon-size: 1.125rem;\n\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n min-block-size: var(--brick-toggle-min-block-size);\n align-items: center;\n justify-content: center;\n gap: var(--brick-toggle-gap);\n padding-block: 0.375rem;\n padding-inline: var(--brick-toggle-padding-inline);\n border: var(--brick-border-width) solid transparent;\n border-radius: var(--brick-toggle-radius);\n appearance: none;\n background: var(--brick-color-surface-subtle);\n color: var(--brick-color-text-primary);\n font-family: var(--brick-typography-control-md-font-family);\n font-size: var(--brick-typography-control-md-font-size);\n font-weight: var(--brick-typography-control-md-font-weight);\n letter-spacing: var(--brick-typography-control-md-letter-spacing);\n line-height: var(--brick-typography-control-md-line-height);\n overflow-wrap: anywhere;\n text-align: center;\n text-decoration: none;\n user-select: none;\n vertical-align: middle;\n transition:\n background-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard),\n border-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard),\n color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item) > :where(svg, img) {\n flex: 0 0 auto;\n inline-size: var(--brick-toggle-icon-size);\n block-size: var(--brick-toggle-icon-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]) {\n cursor: pointer;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):focus-visible {\n z-index: 1;\n outline: var(--brick-border-focus-width) solid var(--brick-color-focus-ring);\n outline-offset: var(--brick-border-focus-offset);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-state=\"on\"] {\n border-color: var(--brick-color-accent-border);\n background: var(--brick-color-accent-soft);\n color: var(--brick-color-accent-on-soft);\n box-shadow: inset 0 -0.125rem 0 var(--brick-color-accent-solid);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"] {\n border-color: var(--brick-color-accent-solid);\n background: var(--brick-color-accent-solid);\n color: var(--brick-color-accent-on-solid);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"outline\"] {\n border-color: var(--brick-color-border-default);\n background: transparent;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"outline\"][data-state=\"on\"] {\n border-color: var(--brick-color-accent-border);\n background: transparent;\n color: var(--brick-color-accent-text);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"] {\n background: transparent;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"][data-state=\"on\"] {\n border-color: transparent;\n background: var(--brick-color-accent-soft);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]):active {\n background: var(--brick-color-accent-soft-pressed);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"]:not([data-disabled]):active {\n border-color: var(--brick-color-accent-solid-pressed);\n background: var(--brick-color-accent-solid-pressed);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled] {\n border-color: var(--brick-color-border-subtle);\n background: var(--brick-color-surface-subtle);\n color: var(--brick-color-text-secondary);\n box-shadow: none;\n cursor: not-allowed;\n opacity: 0.65;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled][data-state=\"on\"] {\n border-color: var(--brick-color-border-strong);\n box-shadow: inset 0 -0.125rem 0 var(--brick-color-text-secondary);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-size=\"sm\"] {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-sm);\n --brick-toggle-padding-inline: 0.75rem;\n --brick-toggle-gap: 0.375rem;\n --brick-toggle-icon-size: 1rem;\n\n padding-block: 0.25rem;\n font-size: var(--brick-typography-control-sm-font-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-size=\"lg\"] {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-lg);\n --brick-toggle-padding-inline: 1.25rem;\n --brick-toggle-gap: 0.625rem;\n --brick-toggle-icon-size: 1.25rem;\n\n padding-block: 0.5rem;\n font-size: var(--brick-typography-control-lg-font-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-shape=\"pill\"] {\n --brick-toggle-radius: var(--brick-radius-full);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-icon-only] {\n inline-size: var(--brick-toggle-min-block-size);\n padding-inline: 0;\n }\n\n @media (hover: hover) and (pointer: fine) {\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]):hover {\n background: var(--brick-color-surface-base);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled])[data-state=\"on\"]:hover {\n background: var(--brick-color-accent-soft-hover);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"]:not([data-disabled]):hover {\n border-color: var(--brick-color-accent-solid-hover);\n background: var(--brick-color-accent-solid-hover);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"]:not([data-disabled]):hover {\n background: var(--brick-color-surface-subtle);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"]:not([data-disabled])[data-state=\"on\"]:hover {\n background: var(--brick-color-accent-soft-hover);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n :where(.brick-toggle, .brick-toggle-group-item) {\n transition-duration: 0ms;\n }\n }\n\n @media (forced-colors: active) {\n :where(.brick-toggle, .brick-toggle-group-item) {\n border-color: ButtonText;\n background: ButtonFace;\n color: ButtonText;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-state=\"on\"] {\n border-color: Highlight;\n background: ButtonFace;\n color: ButtonText;\n outline: 0.125rem solid Highlight;\n outline-offset: -0.25rem;\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):focus-visible {\n outline-color: Highlight;\n outline-offset: var(--brick-border-focus-offset);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled] {\n border-color: GrayText;\n color: GrayText;\n opacity: 1;\n }\n }\n}\n","@layer brick.components {\n .brick-toggle-group {\n --brick-toggle-group-gap: 0.5rem;\n\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n align-items: stretch;\n gap: var(--brick-toggle-group-gap);\n }\n\n .brick-toggle-group[data-orientation=\"horizontal\"] {\n flex-flow: row wrap;\n }\n\n .brick-toggle-group[data-orientation=\"vertical\"] {\n flex-direction: column;\n }\n\n .brick-toggle-group[data-full-width] {\n display: flex;\n inline-size: 100%;\n }\n\n .brick-toggle-group[data-full-width] > .brick-toggle-group-item {\n flex: 1 1 0;\n }\n\n .brick-toggle-group > .brick-toggle-group-item {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-md);\n --brick-toggle-padding-inline: 1rem;\n --brick-toggle-gap: 0.5rem;\n --brick-toggle-icon-size: 1.125rem;\n }\n\n .brick-toggle-group[data-size=\"sm\"] > .brick-toggle-group-item {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-sm);\n --brick-toggle-padding-inline: 0.75rem;\n --brick-toggle-gap: 0.375rem;\n --brick-toggle-icon-size: 1rem;\n\n padding-block: 0.25rem;\n font-size: var(--brick-typography-control-sm-font-size);\n }\n\n .brick-toggle-group[data-size=\"lg\"] > .brick-toggle-group-item {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-lg);\n --brick-toggle-padding-inline: 1.25rem;\n --brick-toggle-gap: 0.625rem;\n --brick-toggle-icon-size: 1.25rem;\n\n padding-block: 0.5rem;\n font-size: var(--brick-typography-control-lg-font-size);\n }\n\n .brick-toggle-group[data-shape=\"pill\"] > .brick-toggle-group-item {\n --brick-toggle-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-variant=\"solid\"] > .brick-toggle-group-item[data-state=\"on\"] {\n border-color: var(--brick-color-accent-solid);\n background: var(--brick-color-accent-solid);\n color: var(--brick-color-accent-on-solid);\n box-shadow: none;\n }\n\n .brick-toggle-group[data-variant=\"outline\"] > .brick-toggle-group-item {\n border-color: var(--brick-color-border-default);\n background: transparent;\n }\n\n .brick-toggle-group[data-variant=\"outline\"] > .brick-toggle-group-item[data-state=\"on\"] {\n border-color: var(--brick-color-accent-border);\n background: transparent;\n color: var(--brick-color-accent-text);\n box-shadow: none;\n }\n\n .brick-toggle-group[data-variant=\"ghost\"] > .brick-toggle-group-item {\n background: transparent;\n }\n\n .brick-toggle-group[data-variant=\"ghost\"] > .brick-toggle-group-item[data-state=\"on\"] {\n border-color: transparent;\n background: var(--brick-color-accent-soft);\n box-shadow: none;\n }\n\n .brick-toggle-group[data-variant=\"solid\"] > .brick-toggle-group-item[data-state=\"on\"]:not([data-disabled]):active {\n border-color: var(--brick-color-accent-solid-pressed);\n background: var(--brick-color-accent-solid-pressed);\n }\n\n .brick-toggle-group[data-attached=\"true\"] {\n --brick-toggle-group-gap: 0;\n\n flex-wrap: nowrap;\n }\n\n .brick-toggle-group[data-attached=\"true\"] > .brick-toggle-group-item {\n --brick-toggle-radius: 0;\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item + .brick-toggle-group-item {\n margin-inline-start: calc(-1 * var(--brick-border-width));\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"vertical\"] > .brick-toggle-group-item + .brick-toggle-group-item {\n margin-block-start: calc(-1 * var(--brick-border-width));\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-control);\n border-end-start-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:last-child {\n border-start-end-radius: var(--brick-radius-control);\n border-end-end-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-control);\n border-start-end-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:last-child {\n border-end-start-radius: var(--brick-radius-control);\n border-end-end-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-full);\n border-end-start-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:last-child {\n border-start-end-radius: var(--brick-radius-full);\n border-end-end-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-full);\n border-start-end-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:last-child {\n border-end-start-radius: var(--brick-radius-full);\n border-end-end-radius: var(--brick-radius-full);\n }\n\n @media (hover: hover) and (pointer: fine) {\n .brick-toggle-group[data-variant=\"solid\"] > .brick-toggle-group-item[data-state=\"on\"]:not([data-disabled]):hover {\n border-color: var(--brick-color-accent-solid-hover);\n background: var(--brick-color-accent-solid-hover);\n }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACAA,sDAAA,wBCCE,woEAkDA,2gCA8BA,4JAMA,mFAIA,mMAMA,wPAOA,gOAOA,mIAKA,0NAOA,kFAIA,8JAMA,4HAIA,oNAKA,+OASA,sLAMA,4SAUA,+SAUA,+GAIA,+HAKA,wCACE,qHAIA,wIAIA,+MAKA,2IAIA,6JAKF,uCACE,uEAKF,8BACE,8GAMA,mMASA,qIAKA,8GC3OF,0LAWA,gEAIA,qEAIA,mEAKA,yEAIA,gNAOA,0SAUA,6SAUA,6GAIA,8NAOA,iIAKA,wNAOA,gFAIA,4JAMA,kNAKA,oFAMA,yFAIA,gLAIA,6KAIA,oNAKA,+MAKA,kNAKA,6MAKA,+NAKA,0NAKA,6NAKA,wNAKA,wCACE,+MFzJJ","sources":["home/runner/work/brick/brick/.brick-cache/production/toggle-group.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/toggle/toggle.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/toggle-group/toggle-group.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/toggle/toggle.css\";\n@import \"../../src/components/toggle-group/toggle-group.css\";","@layer brick.tokens, flowstack.theme, brick.foundations, brick.components, brick.utilities, brick.effects;\n","@layer brick.components {\n :where(.brick-toggle, .brick-toggle-group-item) {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-md);\n --brick-toggle-padding-inline: 1rem;\n --brick-toggle-gap: 0.5rem;\n --brick-toggle-radius: var(--brick-radius-control);\n --brick-toggle-icon-size: 1.125rem;\n --brick-toggle-tone-solid: var(--brick-color-accent-solid);\n --brick-toggle-tone-solid-hover: var(--brick-color-accent-solid-hover);\n --brick-toggle-tone-solid-pressed: var(--brick-color-accent-solid-pressed);\n --brick-toggle-tone-on-solid: var(--brick-color-accent-on-solid);\n --brick-toggle-tone-soft: var(--brick-color-accent-soft);\n --brick-toggle-tone-soft-hover: var(--brick-color-accent-soft-hover);\n --brick-toggle-tone-soft-pressed: var(--brick-color-accent-soft-pressed);\n --brick-toggle-tone-on-soft: var(--brick-color-accent-on-soft);\n --brick-toggle-tone-border: var(--brick-color-accent-border);\n --brick-toggle-tone-text: var(--brick-color-accent-text);\n --brick-toggle-tone-outline-border: var(--brick-color-accent-solid);\n --brick-toggle-tone-outline-foreground: var(--brick-color-text-primary);\n\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n min-block-size: var(--brick-toggle-min-block-size);\n align-items: center;\n justify-content: center;\n gap: var(--brick-toggle-gap);\n padding-block: 0.375rem;\n padding-inline: var(--brick-toggle-padding-inline);\n border: var(--brick-border-width) solid transparent;\n border-radius: var(--brick-toggle-radius);\n appearance: none;\n background: var(--brick-color-surface-subtle);\n color: var(--brick-color-text-primary);\n font-family: var(--brick-typography-control-md-font-family);\n font-size: var(--brick-typography-control-md-font-size);\n font-weight: var(--brick-typography-control-md-font-weight);\n letter-spacing: var(--brick-typography-control-md-letter-spacing);\n line-height: var(--brick-typography-control-md-line-height);\n overflow-wrap: anywhere;\n text-align: center;\n text-decoration: none;\n user-select: none;\n vertical-align: middle;\n transition:\n background-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard),\n border-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard),\n color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);\n }\n\n :where(\n .brick-toggle[data-tone=\"neutral\"],\n .brick-toggle-group[data-tone=\"neutral\"] > .brick-toggle-group-item\n ) {\n --brick-toggle-tone-solid: color-mix(\n in srgb,\n var(--brick-color-surface-subtle),\n var(--brick-color-text-primary) 16%\n );\n --brick-toggle-tone-solid-hover: color-mix(\n in srgb,\n var(--brick-color-surface-subtle),\n var(--brick-color-text-primary) 22%\n );\n --brick-toggle-tone-solid-pressed: color-mix(\n in srgb,\n var(--brick-color-surface-subtle),\n var(--brick-color-text-primary) 28%\n );\n --brick-toggle-tone-on-solid: var(--brick-color-text-primary);\n --brick-toggle-tone-soft: var(--brick-color-surface-subtle);\n --brick-toggle-tone-soft-hover: var(--brick-color-surface-base);\n --brick-toggle-tone-soft-pressed: var(--brick-color-border-subtle);\n --brick-toggle-tone-on-soft: var(--brick-color-text-primary);\n --brick-toggle-tone-border: var(--brick-color-border-strong);\n --brick-toggle-tone-text: var(--brick-color-text-primary);\n --brick-toggle-tone-outline-border: var(--brick-color-border-strong);\n --brick-toggle-tone-outline-foreground: var(--brick-color-text-primary);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item) > :where(svg, img) {\n flex: 0 0 auto;\n inline-size: var(--brick-toggle-icon-size);\n block-size: var(--brick-toggle-icon-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]) {\n cursor: pointer;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):focus-visible {\n z-index: 1;\n outline: var(--brick-border-focus-width) solid var(--brick-color-focus-ring);\n outline-offset: var(--brick-border-focus-offset);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-state=\"on\"] {\n border-color: var(--brick-toggle-tone-border);\n background: var(--brick-toggle-tone-soft);\n color: var(--brick-toggle-tone-on-soft);\n box-shadow: inset 0 -0.125rem 0 var(--brick-toggle-tone-solid);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"] {\n border-color: var(--brick-toggle-tone-solid);\n background: var(--brick-toggle-tone-solid);\n color: var(--brick-toggle-tone-on-solid);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"outline\"] {\n border-color: var(--brick-color-border-default);\n background: transparent;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"outline\"][data-state=\"on\"] {\n border-color: var(--brick-toggle-tone-outline-border);\n background: transparent;\n color: var(--brick-toggle-tone-outline-foreground);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"] {\n background: transparent;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"][data-state=\"on\"] {\n border-color: transparent;\n background: var(--brick-toggle-tone-soft);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]):active {\n background: var(--brick-toggle-tone-soft-pressed);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"]:not([data-disabled]):active {\n border-color: var(--brick-toggle-tone-solid-pressed);\n background: var(--brick-toggle-tone-solid-pressed);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled] {\n border-color: var(--brick-color-border-subtle);\n background: var(--brick-color-surface-subtle);\n color: var(--brick-color-text-disabled);\n box-shadow: none;\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled][data-state=\"on\"] {\n border-color: var(--brick-color-border-subtle);\n background: var(--brick-color-surface-base);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-size=\"sm\"] {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-sm);\n --brick-toggle-padding-inline: 0.75rem;\n --brick-toggle-gap: 0.375rem;\n --brick-toggle-icon-size: 1rem;\n\n padding-block: 0.25rem;\n font-size: var(--brick-typography-control-sm-font-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-size=\"lg\"] {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-lg);\n --brick-toggle-padding-inline: 1.25rem;\n --brick-toggle-gap: 0.625rem;\n --brick-toggle-icon-size: 1.25rem;\n\n padding-block: 0.5rem;\n font-size: var(--brick-typography-control-lg-font-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-shape=\"pill\"] {\n --brick-toggle-radius: var(--brick-radius-full);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-icon-only] {\n inline-size: var(--brick-toggle-min-block-size);\n padding-inline: 0;\n }\n\n @media (hover: hover) and (pointer: fine) {\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]):hover {\n background: var(--brick-color-surface-base);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled])[data-state=\"on\"]:hover {\n background: var(--brick-toggle-tone-soft-hover);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"]:not([data-disabled]):hover {\n border-color: var(--brick-toggle-tone-solid-hover);\n background: var(--brick-toggle-tone-solid-hover);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"]:not([data-disabled]):hover {\n background: var(--brick-color-surface-subtle);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"]:not([data-disabled])[data-state=\"on\"]:hover {\n background: var(--brick-toggle-tone-soft-hover);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n :where(.brick-toggle, .brick-toggle-group-item) {\n transition-duration: 0ms;\n }\n }\n\n @media (forced-colors: active) {\n :where(.brick-toggle, .brick-toggle-group-item) {\n border-color: ButtonText;\n background: ButtonFace;\n color: ButtonText;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-state=\"on\"] {\n border-color: Highlight;\n background: ButtonFace;\n color: ButtonText;\n outline: 0.125rem solid Highlight;\n outline-offset: -0.25rem;\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):focus-visible {\n outline-color: Highlight;\n outline-offset: var(--brick-border-focus-offset);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled] {\n border-color: GrayText;\n color: GrayText;\n opacity: 1;\n }\n }\n}\n","@layer brick.components {\n .brick-toggle-group {\n --brick-toggle-group-gap: 0.5rem;\n\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n align-items: stretch;\n gap: var(--brick-toggle-group-gap);\n }\n\n .brick-toggle-group[data-orientation=\"horizontal\"] {\n flex-flow: row wrap;\n }\n\n .brick-toggle-group[data-orientation=\"vertical\"] {\n flex-direction: column;\n }\n\n .brick-toggle-group[data-full-width] {\n display: flex;\n inline-size: 100%;\n }\n\n .brick-toggle-group[data-full-width] > .brick-toggle-group-item {\n flex: 1 1 0;\n }\n\n .brick-toggle-group > .brick-toggle-group-item {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-md);\n --brick-toggle-padding-inline: 1rem;\n --brick-toggle-gap: 0.5rem;\n --brick-toggle-icon-size: 1.125rem;\n }\n\n .brick-toggle-group[data-size=\"sm\"] > .brick-toggle-group-item {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-sm);\n --brick-toggle-padding-inline: 0.75rem;\n --brick-toggle-gap: 0.375rem;\n --brick-toggle-icon-size: 1rem;\n\n padding-block: 0.25rem;\n font-size: var(--brick-typography-control-sm-font-size);\n }\n\n .brick-toggle-group[data-size=\"lg\"] > .brick-toggle-group-item {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-lg);\n --brick-toggle-padding-inline: 1.25rem;\n --brick-toggle-gap: 0.625rem;\n --brick-toggle-icon-size: 1.25rem;\n\n padding-block: 0.5rem;\n font-size: var(--brick-typography-control-lg-font-size);\n }\n\n .brick-toggle-group[data-shape=\"pill\"] > .brick-toggle-group-item {\n --brick-toggle-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-variant=\"solid\"] > .brick-toggle-group-item[data-state=\"on\"] {\n border-color: var(--brick-toggle-tone-solid);\n background: var(--brick-toggle-tone-solid);\n color: var(--brick-toggle-tone-on-solid);\n box-shadow: none;\n }\n\n .brick-toggle-group[data-variant=\"outline\"] > .brick-toggle-group-item {\n border-color: var(--brick-color-border-default);\n background: transparent;\n }\n\n .brick-toggle-group[data-variant=\"outline\"] > .brick-toggle-group-item[data-state=\"on\"] {\n border-color: var(--brick-toggle-tone-outline-border);\n background: transparent;\n color: var(--brick-toggle-tone-outline-foreground);\n box-shadow: none;\n }\n\n .brick-toggle-group[data-variant=\"ghost\"] > .brick-toggle-group-item {\n background: transparent;\n }\n\n .brick-toggle-group[data-variant=\"ghost\"] > .brick-toggle-group-item[data-state=\"on\"] {\n border-color: transparent;\n background: var(--brick-toggle-tone-soft);\n box-shadow: none;\n }\n\n .brick-toggle-group[data-variant=\"solid\"] > .brick-toggle-group-item[data-state=\"on\"]:not([data-disabled]):active {\n border-color: var(--brick-toggle-tone-solid-pressed);\n background: var(--brick-toggle-tone-solid-pressed);\n }\n\n .brick-toggle-group[data-attached=\"true\"] {\n --brick-toggle-group-gap: 0;\n\n flex-wrap: nowrap;\n }\n\n .brick-toggle-group[data-attached=\"true\"] > .brick-toggle-group-item {\n --brick-toggle-radius: 0;\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item + .brick-toggle-group-item {\n margin-inline-start: calc(-1 * var(--brick-border-width));\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"vertical\"] > .brick-toggle-group-item + .brick-toggle-group-item {\n margin-block-start: calc(-1 * var(--brick-border-width));\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-control);\n border-end-start-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:last-child {\n border-start-end-radius: var(--brick-radius-control);\n border-end-end-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-control);\n border-start-end-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:last-child {\n border-end-start-radius: var(--brick-radius-control);\n border-end-end-radius: var(--brick-radius-control);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-full);\n border-end-start-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"horizontal\"] > .brick-toggle-group-item:last-child {\n border-start-end-radius: var(--brick-radius-full);\n border-end-end-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:first-child {\n border-start-start-radius: var(--brick-radius-full);\n border-start-end-radius: var(--brick-radius-full);\n }\n\n .brick-toggle-group[data-attached=\"true\"][data-shape=\"pill\"][data-orientation=\"vertical\"] > .brick-toggle-group-item:last-child {\n border-end-start-radius: var(--brick-radius-full);\n border-end-end-radius: var(--brick-radius-full);\n }\n\n @media (hover: hover) and (pointer: fine) {\n .brick-toggle-group[data-variant=\"solid\"] > .brick-toggle-group-item[data-state=\"on\"]:not([data-disabled]):hover {\n border-color: var(--brick-toggle-tone-solid-hover);\n background: var(--brick-toggle-tone-solid-hover);\n }\n }\n}\n"],"names":[]}
|
package/dist/styles/toggle.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer brick.tokens,flowstack.theme,brick.foundations;@layer brick.components{:where(.brick-toggle,.brick-toggle-group-item){--brick-toggle-min-block-size:var(--brick-control-min-block-size-md);--brick-toggle-padding-inline:1rem;--brick-toggle-gap:.5rem;--brick-toggle-radius:var(--brick-radius-control);--brick-toggle-icon-size:1.125rem;box-sizing:border-box;min-inline-size:0;max-inline-size:100%;min-block-size:var(--brick-toggle-min-block-size);justify-content:center;align-items:center;gap:var(--brick-toggle-gap);padding-block:.375rem;padding-inline:var(--brick-toggle-padding-inline);border:var(--brick-border-width) solid transparent;border-radius:var(--brick-toggle-radius);appearance:none;background:var(--brick-color-surface-subtle);color:var(--brick-color-text-primary);font-family:var(--brick-typography-control-md-font-family);font-size:var(--brick-typography-control-md-font-size);font-weight:var(--brick-typography-control-md-font-weight);letter-spacing:var(--brick-typography-control-md-letter-spacing);line-height:var(--brick-typography-control-md-line-height);overflow-wrap:anywhere;text-align:center;-webkit-user-select:none;user-select:none;vertical-align:middle;transition:background-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), border-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);text-decoration:none;display:inline-flex}:where(.brick-toggle,.brick-toggle-group-item)>:where(svg,img){inline-size:var(--brick-toggle-icon-size);block-size:var(--brick-toggle-icon-size);flex:none}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]){cursor:pointer}:where(.brick-toggle,.brick-toggle-group-item):focus-visible{z-index:1;outline:var(--brick-border-focus-width) solid var(--brick-color-focus-ring);outline-offset:var(--brick-border-focus-offset)}:where(.brick-toggle,.brick-toggle-group-item)[data-state=on]{border-color:var(--brick-
|
|
1
|
+
@layer brick.tokens,flowstack.theme,brick.foundations;@layer brick.components{:where(.brick-toggle,.brick-toggle-group-item){--brick-toggle-min-block-size:var(--brick-control-min-block-size-md);--brick-toggle-padding-inline:1rem;--brick-toggle-gap:.5rem;--brick-toggle-radius:var(--brick-radius-control);--brick-toggle-icon-size:1.125rem;--brick-toggle-tone-solid:var(--brick-color-accent-solid);--brick-toggle-tone-solid-hover:var(--brick-color-accent-solid-hover);--brick-toggle-tone-solid-pressed:var(--brick-color-accent-solid-pressed);--brick-toggle-tone-on-solid:var(--brick-color-accent-on-solid);--brick-toggle-tone-soft:var(--brick-color-accent-soft);--brick-toggle-tone-soft-hover:var(--brick-color-accent-soft-hover);--brick-toggle-tone-soft-pressed:var(--brick-color-accent-soft-pressed);--brick-toggle-tone-on-soft:var(--brick-color-accent-on-soft);--brick-toggle-tone-border:var(--brick-color-accent-border);--brick-toggle-tone-text:var(--brick-color-accent-text);--brick-toggle-tone-outline-border:var(--brick-color-accent-solid);--brick-toggle-tone-outline-foreground:var(--brick-color-text-primary);box-sizing:border-box;min-inline-size:0;max-inline-size:100%;min-block-size:var(--brick-toggle-min-block-size);justify-content:center;align-items:center;gap:var(--brick-toggle-gap);padding-block:.375rem;padding-inline:var(--brick-toggle-padding-inline);border:var(--brick-border-width) solid transparent;border-radius:var(--brick-toggle-radius);appearance:none;background:var(--brick-color-surface-subtle);color:var(--brick-color-text-primary);font-family:var(--brick-typography-control-md-font-family);font-size:var(--brick-typography-control-md-font-size);font-weight:var(--brick-typography-control-md-font-weight);letter-spacing:var(--brick-typography-control-md-letter-spacing);line-height:var(--brick-typography-control-md-line-height);overflow-wrap:anywhere;text-align:center;-webkit-user-select:none;user-select:none;vertical-align:middle;transition:background-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), border-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard), color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);text-decoration:none;display:inline-flex}:where(.brick-toggle[data-tone=neutral],.brick-toggle-group[data-tone=neutral]>.brick-toggle-group-item){--brick-toggle-tone-solid:color-mix(in srgb, var(--brick-color-surface-subtle), var(--brick-color-text-primary) 16%);--brick-toggle-tone-solid-hover:color-mix(in srgb, var(--brick-color-surface-subtle), var(--brick-color-text-primary) 22%);--brick-toggle-tone-solid-pressed:color-mix(in srgb, var(--brick-color-surface-subtle), var(--brick-color-text-primary) 28%);--brick-toggle-tone-on-solid:var(--brick-color-text-primary);--brick-toggle-tone-soft:var(--brick-color-surface-subtle);--brick-toggle-tone-soft-hover:var(--brick-color-surface-base);--brick-toggle-tone-soft-pressed:var(--brick-color-border-subtle);--brick-toggle-tone-on-soft:var(--brick-color-text-primary);--brick-toggle-tone-border:var(--brick-color-border-strong);--brick-toggle-tone-text:var(--brick-color-text-primary);--brick-toggle-tone-outline-border:var(--brick-color-border-strong);--brick-toggle-tone-outline-foreground:var(--brick-color-text-primary)}:where(.brick-toggle,.brick-toggle-group-item)>:where(svg,img){inline-size:var(--brick-toggle-icon-size);block-size:var(--brick-toggle-icon-size);flex:none}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]){cursor:pointer}:where(.brick-toggle,.brick-toggle-group-item):focus-visible{z-index:1;outline:var(--brick-border-focus-width) solid var(--brick-color-focus-ring);outline-offset:var(--brick-border-focus-offset)}:where(.brick-toggle,.brick-toggle-group-item)[data-state=on]{border-color:var(--brick-toggle-tone-border);background:var(--brick-toggle-tone-soft);color:var(--brick-toggle-tone-on-soft);box-shadow:inset 0 -.125rem 0 var(--brick-toggle-tone-solid)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]{border-color:var(--brick-toggle-tone-solid);background:var(--brick-toggle-tone-solid);color:var(--brick-toggle-tone-on-solid);box-shadow:none}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=outline]{border-color:var(--brick-color-border-default);background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=outline][data-state=on]{border-color:var(--brick-toggle-tone-outline-border);color:var(--brick-toggle-tone-outline-foreground);box-shadow:none;background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]{background:0 0}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost][data-state=on]{background:var(--brick-toggle-tone-soft);box-shadow:none;border-color:#0000}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]):active{background:var(--brick-toggle-tone-soft-pressed)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]:not([data-disabled]):active{border-color:var(--brick-toggle-tone-solid-pressed);background:var(--brick-toggle-tone-solid-pressed)}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled]{border-color:var(--brick-color-border-subtle);background:var(--brick-color-surface-subtle);color:var(--brick-color-text-disabled);box-shadow:none;cursor:not-allowed;opacity:.55}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled][data-state=on]{border-color:var(--brick-color-border-subtle);background:var(--brick-color-surface-base);box-shadow:none}:where(.brick-toggle,.brick-toggle-group-item)[data-size=sm]{--brick-toggle-min-block-size:var(--brick-control-min-block-size-sm);--brick-toggle-padding-inline:.75rem;--brick-toggle-gap:.375rem;--brick-toggle-icon-size:1rem;font-size:var(--brick-typography-control-sm-font-size);padding-block:.25rem}:where(.brick-toggle,.brick-toggle-group-item)[data-size=lg]{--brick-toggle-min-block-size:var(--brick-control-min-block-size-lg);--brick-toggle-padding-inline:1.25rem;--brick-toggle-gap:.625rem;--brick-toggle-icon-size:1.25rem;font-size:var(--brick-typography-control-lg-font-size);padding-block:.5rem}:where(.brick-toggle,.brick-toggle-group-item)[data-shape=pill]{--brick-toggle-radius:var(--brick-radius-full)}:where(.brick-toggle,.brick-toggle-group-item)[data-icon-only]{inline-size:var(--brick-toggle-min-block-size);padding-inline:0}@media (hover:hover) and (pointer:fine){:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled]):hover{background:var(--brick-color-surface-base)}:where(.brick-toggle,.brick-toggle-group-item):not([data-disabled])[data-state=on]:hover{background:var(--brick-toggle-tone-soft-hover)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=solid][data-state=on]:not([data-disabled]):hover{border-color:var(--brick-toggle-tone-solid-hover);background:var(--brick-toggle-tone-solid-hover)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]:not([data-disabled]):hover{background:var(--brick-color-surface-subtle)}:where(.brick-toggle,.brick-toggle-group-item)[data-variant=ghost]:not([data-disabled])[data-state=on]:hover{background:var(--brick-toggle-tone-soft-hover)}}@media (prefers-reduced-motion:reduce){:where(.brick-toggle,.brick-toggle-group-item){transition-duration:0s}}@media (forced-colors:active){:where(.brick-toggle,.brick-toggle-group-item){color:buttontext;background:buttonface;border-color:buttontext}:where(.brick-toggle,.brick-toggle-group-item)[data-state=on]{color:buttontext;outline-offset:-.25rem;box-shadow:none;background:buttonface;border-color:highlight;outline:.125rem solid highlight}:where(.brick-toggle,.brick-toggle-group-item):focus-visible{outline-offset:var(--brick-border-focus-offset);outline-color:highlight}:where(.brick-toggle,.brick-toggle-group-item)[data-disabled]{color:graytext;opacity:1;border-color:graytext}}}@layer brick.utilities,brick.effects;
|
|
2
2
|
/*# sourceMappingURL=toggle.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACAA,sDAAA,wBCCE,83CAsCA,4JAMA,mFAIA,mMAMA,4PAOA,mOAOA,mIAKA,sMAOA,kFAIA,+JAMA,6HAIA,sNAKA,gPASA,2LAKA,4SAUA,+SAUA,+GAIA,+HAKA,wCACE,qHAIA,yIAIA,iNAKA,2IAIA,8JAKF,uCACE,uEAKF,8BACE,8GAMA,mMASA,qIAKA,+GDjMJ","sources":["home/runner/work/brick/brick/.brick-cache/production/toggle.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/toggle/toggle.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/toggle/toggle.css\";","@layer brick.tokens, flowstack.theme, brick.foundations, brick.components, brick.utilities, brick.effects;\n","@layer brick.components {\n :where(.brick-toggle, .brick-toggle-group-item) {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-md);\n --brick-toggle-padding-inline: 1rem;\n --brick-toggle-gap: 0.5rem;\n --brick-toggle-radius: var(--brick-radius-control);\n --brick-toggle-icon-size: 1.125rem;\n\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n min-block-size: var(--brick-toggle-min-block-size);\n align-items: center;\n justify-content: center;\n gap: var(--brick-toggle-gap);\n padding-block: 0.375rem;\n padding-inline: var(--brick-toggle-padding-inline);\n border: var(--brick-border-width) solid transparent;\n border-radius: var(--brick-toggle-radius);\n appearance: none;\n background: var(--brick-color-surface-subtle);\n color: var(--brick-color-text-primary);\n font-family: var(--brick-typography-control-md-font-family);\n font-size: var(--brick-typography-control-md-font-size);\n font-weight: var(--brick-typography-control-md-font-weight);\n letter-spacing: var(--brick-typography-control-md-letter-spacing);\n line-height: var(--brick-typography-control-md-line-height);\n overflow-wrap: anywhere;\n text-align: center;\n text-decoration: none;\n user-select: none;\n vertical-align: middle;\n transition:\n background-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard),\n border-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard),\n color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item) > :where(svg, img) {\n flex: 0 0 auto;\n inline-size: var(--brick-toggle-icon-size);\n block-size: var(--brick-toggle-icon-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]) {\n cursor: pointer;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):focus-visible {\n z-index: 1;\n outline: var(--brick-border-focus-width) solid var(--brick-color-focus-ring);\n outline-offset: var(--brick-border-focus-offset);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-state=\"on\"] {\n border-color: var(--brick-color-accent-border);\n background: var(--brick-color-accent-soft);\n color: var(--brick-color-accent-on-soft);\n box-shadow: inset 0 -0.125rem 0 var(--brick-color-accent-solid);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"] {\n border-color: var(--brick-color-accent-solid);\n background: var(--brick-color-accent-solid);\n color: var(--brick-color-accent-on-solid);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"outline\"] {\n border-color: var(--brick-color-border-default);\n background: transparent;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"outline\"][data-state=\"on\"] {\n border-color: var(--brick-color-accent-border);\n background: transparent;\n color: var(--brick-color-accent-text);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"] {\n background: transparent;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"][data-state=\"on\"] {\n border-color: transparent;\n background: var(--brick-color-accent-soft);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]):active {\n background: var(--brick-color-accent-soft-pressed);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"]:not([data-disabled]):active {\n border-color: var(--brick-color-accent-solid-pressed);\n background: var(--brick-color-accent-solid-pressed);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled] {\n border-color: var(--brick-color-border-subtle);\n background: var(--brick-color-surface-subtle);\n color: var(--brick-color-text-secondary);\n box-shadow: none;\n cursor: not-allowed;\n opacity: 0.65;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled][data-state=\"on\"] {\n border-color: var(--brick-color-border-strong);\n box-shadow: inset 0 -0.125rem 0 var(--brick-color-text-secondary);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-size=\"sm\"] {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-sm);\n --brick-toggle-padding-inline: 0.75rem;\n --brick-toggle-gap: 0.375rem;\n --brick-toggle-icon-size: 1rem;\n\n padding-block: 0.25rem;\n font-size: var(--brick-typography-control-sm-font-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-size=\"lg\"] {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-lg);\n --brick-toggle-padding-inline: 1.25rem;\n --brick-toggle-gap: 0.625rem;\n --brick-toggle-icon-size: 1.25rem;\n\n padding-block: 0.5rem;\n font-size: var(--brick-typography-control-lg-font-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-shape=\"pill\"] {\n --brick-toggle-radius: var(--brick-radius-full);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-icon-only] {\n inline-size: var(--brick-toggle-min-block-size);\n padding-inline: 0;\n }\n\n @media (hover: hover) and (pointer: fine) {\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]):hover {\n background: var(--brick-color-surface-base);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled])[data-state=\"on\"]:hover {\n background: var(--brick-color-accent-soft-hover);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"]:not([data-disabled]):hover {\n border-color: var(--brick-color-accent-solid-hover);\n background: var(--brick-color-accent-solid-hover);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"]:not([data-disabled]):hover {\n background: var(--brick-color-surface-subtle);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"]:not([data-disabled])[data-state=\"on\"]:hover {\n background: var(--brick-color-accent-soft-hover);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n :where(.brick-toggle, .brick-toggle-group-item) {\n transition-duration: 0ms;\n }\n }\n\n @media (forced-colors: active) {\n :where(.brick-toggle, .brick-toggle-group-item) {\n border-color: ButtonText;\n background: ButtonFace;\n color: ButtonText;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-state=\"on\"] {\n border-color: Highlight;\n background: ButtonFace;\n color: ButtonText;\n outline: 0.125rem solid Highlight;\n outline-offset: -0.25rem;\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):focus-visible {\n outline-color: Highlight;\n outline-offset: var(--brick-border-focus-offset);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled] {\n border-color: GrayText;\n color: GrayText;\n opacity: 1;\n }\n }\n}\n"],"names":[]}
|
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACAA,sDAAA,wBCCE,woEAkDA,2gCA8BA,4JAMA,mFAIA,mMAMA,wPAOA,gOAOA,mIAKA,0NAOA,kFAIA,8JAMA,4HAIA,oNAKA,+OASA,sLAMA,4SAUA,+SAUA,+GAIA,+HAKA,wCACE,qHAIA,wIAIA,+MAKA,2IAIA,6JAKF,uCACE,uEAKF,8BACE,8GAMA,mMASA,qIAKA,+GD5OJ","sources":["home/runner/work/brick/brick/.brick-cache/production/toggle.source.css","home/runner/work/brick/brick/.brick-cache/production/../../src/styles/layers.css","home/runner/work/brick/brick/.brick-cache/production/../../src/components/toggle/toggle.css"],"sourcesContent":["@import \"../../src/styles/layers.css\";\n@import \"../../src/components/toggle/toggle.css\";","@layer brick.tokens, flowstack.theme, brick.foundations, brick.components, brick.utilities, brick.effects;\n","@layer brick.components {\n :where(.brick-toggle, .brick-toggle-group-item) {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-md);\n --brick-toggle-padding-inline: 1rem;\n --brick-toggle-gap: 0.5rem;\n --brick-toggle-radius: var(--brick-radius-control);\n --brick-toggle-icon-size: 1.125rem;\n --brick-toggle-tone-solid: var(--brick-color-accent-solid);\n --brick-toggle-tone-solid-hover: var(--brick-color-accent-solid-hover);\n --brick-toggle-tone-solid-pressed: var(--brick-color-accent-solid-pressed);\n --brick-toggle-tone-on-solid: var(--brick-color-accent-on-solid);\n --brick-toggle-tone-soft: var(--brick-color-accent-soft);\n --brick-toggle-tone-soft-hover: var(--brick-color-accent-soft-hover);\n --brick-toggle-tone-soft-pressed: var(--brick-color-accent-soft-pressed);\n --brick-toggle-tone-on-soft: var(--brick-color-accent-on-soft);\n --brick-toggle-tone-border: var(--brick-color-accent-border);\n --brick-toggle-tone-text: var(--brick-color-accent-text);\n --brick-toggle-tone-outline-border: var(--brick-color-accent-solid);\n --brick-toggle-tone-outline-foreground: var(--brick-color-text-primary);\n\n display: inline-flex;\n box-sizing: border-box;\n min-inline-size: 0;\n max-inline-size: 100%;\n min-block-size: var(--brick-toggle-min-block-size);\n align-items: center;\n justify-content: center;\n gap: var(--brick-toggle-gap);\n padding-block: 0.375rem;\n padding-inline: var(--brick-toggle-padding-inline);\n border: var(--brick-border-width) solid transparent;\n border-radius: var(--brick-toggle-radius);\n appearance: none;\n background: var(--brick-color-surface-subtle);\n color: var(--brick-color-text-primary);\n font-family: var(--brick-typography-control-md-font-family);\n font-size: var(--brick-typography-control-md-font-size);\n font-weight: var(--brick-typography-control-md-font-weight);\n letter-spacing: var(--brick-typography-control-md-letter-spacing);\n line-height: var(--brick-typography-control-md-line-height);\n overflow-wrap: anywhere;\n text-align: center;\n text-decoration: none;\n user-select: none;\n vertical-align: middle;\n transition:\n background-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard),\n border-color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard),\n color var(--brick-motion-duration-fast) var(--brick-motion-easing-standard);\n }\n\n :where(\n .brick-toggle[data-tone=\"neutral\"],\n .brick-toggle-group[data-tone=\"neutral\"] > .brick-toggle-group-item\n ) {\n --brick-toggle-tone-solid: color-mix(\n in srgb,\n var(--brick-color-surface-subtle),\n var(--brick-color-text-primary) 16%\n );\n --brick-toggle-tone-solid-hover: color-mix(\n in srgb,\n var(--brick-color-surface-subtle),\n var(--brick-color-text-primary) 22%\n );\n --brick-toggle-tone-solid-pressed: color-mix(\n in srgb,\n var(--brick-color-surface-subtle),\n var(--brick-color-text-primary) 28%\n );\n --brick-toggle-tone-on-solid: var(--brick-color-text-primary);\n --brick-toggle-tone-soft: var(--brick-color-surface-subtle);\n --brick-toggle-tone-soft-hover: var(--brick-color-surface-base);\n --brick-toggle-tone-soft-pressed: var(--brick-color-border-subtle);\n --brick-toggle-tone-on-soft: var(--brick-color-text-primary);\n --brick-toggle-tone-border: var(--brick-color-border-strong);\n --brick-toggle-tone-text: var(--brick-color-text-primary);\n --brick-toggle-tone-outline-border: var(--brick-color-border-strong);\n --brick-toggle-tone-outline-foreground: var(--brick-color-text-primary);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item) > :where(svg, img) {\n flex: 0 0 auto;\n inline-size: var(--brick-toggle-icon-size);\n block-size: var(--brick-toggle-icon-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]) {\n cursor: pointer;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):focus-visible {\n z-index: 1;\n outline: var(--brick-border-focus-width) solid var(--brick-color-focus-ring);\n outline-offset: var(--brick-border-focus-offset);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-state=\"on\"] {\n border-color: var(--brick-toggle-tone-border);\n background: var(--brick-toggle-tone-soft);\n color: var(--brick-toggle-tone-on-soft);\n box-shadow: inset 0 -0.125rem 0 var(--brick-toggle-tone-solid);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"] {\n border-color: var(--brick-toggle-tone-solid);\n background: var(--brick-toggle-tone-solid);\n color: var(--brick-toggle-tone-on-solid);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"outline\"] {\n border-color: var(--brick-color-border-default);\n background: transparent;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"outline\"][data-state=\"on\"] {\n border-color: var(--brick-toggle-tone-outline-border);\n background: transparent;\n color: var(--brick-toggle-tone-outline-foreground);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"] {\n background: transparent;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"][data-state=\"on\"] {\n border-color: transparent;\n background: var(--brick-toggle-tone-soft);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]):active {\n background: var(--brick-toggle-tone-soft-pressed);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"]:not([data-disabled]):active {\n border-color: var(--brick-toggle-tone-solid-pressed);\n background: var(--brick-toggle-tone-solid-pressed);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled] {\n border-color: var(--brick-color-border-subtle);\n background: var(--brick-color-surface-subtle);\n color: var(--brick-color-text-disabled);\n box-shadow: none;\n cursor: not-allowed;\n opacity: 0.55;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled][data-state=\"on\"] {\n border-color: var(--brick-color-border-subtle);\n background: var(--brick-color-surface-base);\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-size=\"sm\"] {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-sm);\n --brick-toggle-padding-inline: 0.75rem;\n --brick-toggle-gap: 0.375rem;\n --brick-toggle-icon-size: 1rem;\n\n padding-block: 0.25rem;\n font-size: var(--brick-typography-control-sm-font-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-size=\"lg\"] {\n --brick-toggle-min-block-size: var(--brick-control-min-block-size-lg);\n --brick-toggle-padding-inline: 1.25rem;\n --brick-toggle-gap: 0.625rem;\n --brick-toggle-icon-size: 1.25rem;\n\n padding-block: 0.5rem;\n font-size: var(--brick-typography-control-lg-font-size);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-shape=\"pill\"] {\n --brick-toggle-radius: var(--brick-radius-full);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-icon-only] {\n inline-size: var(--brick-toggle-min-block-size);\n padding-inline: 0;\n }\n\n @media (hover: hover) and (pointer: fine) {\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled]):hover {\n background: var(--brick-color-surface-base);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):not([data-disabled])[data-state=\"on\"]:hover {\n background: var(--brick-toggle-tone-soft-hover);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"solid\"][data-state=\"on\"]:not([data-disabled]):hover {\n border-color: var(--brick-toggle-tone-solid-hover);\n background: var(--brick-toggle-tone-solid-hover);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"]:not([data-disabled]):hover {\n background: var(--brick-color-surface-subtle);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-variant=\"ghost\"]:not([data-disabled])[data-state=\"on\"]:hover {\n background: var(--brick-toggle-tone-soft-hover);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n :where(.brick-toggle, .brick-toggle-group-item) {\n transition-duration: 0ms;\n }\n }\n\n @media (forced-colors: active) {\n :where(.brick-toggle, .brick-toggle-group-item) {\n border-color: ButtonText;\n background: ButtonFace;\n color: ButtonText;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-state=\"on\"] {\n border-color: Highlight;\n background: ButtonFace;\n color: ButtonText;\n outline: 0.125rem solid Highlight;\n outline-offset: -0.25rem;\n box-shadow: none;\n }\n\n :where(.brick-toggle, .brick-toggle-group-item):focus-visible {\n outline-color: Highlight;\n outline-offset: var(--brick-border-focus-offset);\n }\n\n :where(.brick-toggle, .brick-toggle-group-item)[data-disabled] {\n border-color: GrayText;\n color: GrayText;\n opacity: 1;\n }\n }\n}\n"],"names":[]}
|
package/dist/styles/toolbar.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer brick.tokens,flowstack.theme,brick.foundations;@layer brick.components{.brick-toolbar{--brick-toolbar-surface:var(--brick-color-surface-subtle);--brick-toolbar-border-color:transparent;--brick-toolbar-radius:var(--brick-radius-control);--brick-toolbar-gap:.25rem;--brick-toolbar-padding:.25rem;--brick-toolbar-item-size:var(--brick-control-min-block-size-md);--brick-toolbar-item-padding-inline:.75rem;--brick-toolbar-item-radius:calc(var(--brick-toolbar-radius) - .125rem);--brick-toolbar-item-background:transparent;--brick-toolbar-item-selected-background:var(--brick-
|
|
1
|
+
@layer brick.tokens,flowstack.theme,brick.foundations;@layer brick.components{.brick-toolbar{--brick-toolbar-surface:var(--brick-color-surface-subtle);--brick-toolbar-border-color:transparent;--brick-toolbar-radius:var(--brick-radius-control);--brick-toolbar-gap:.25rem;--brick-toolbar-padding:.25rem;--brick-toolbar-item-size:var(--brick-control-min-block-size-md);--brick-toolbar-item-padding-inline:.75rem;--brick-toolbar-item-radius:calc(var(--brick-toolbar-radius) - .125rem);--brick-toolbar-item-background:transparent;--brick-toolbar-item-selected-background:var(--brick-toolbar-toggle-tone-soft);--brick-toolbar-separator-color:var(--brick-color-border-default);box-sizing:border-box;align-items:center;gap:var(--brick-toolbar-gap);min-inline-size:0;max-inline-size:100%;padding:var(--brick-toolbar-padding);border:var(--brick-border-width) solid var(--brick-toolbar-border-color);border-radius:var(--brick-toolbar-radius);background:var(--brick-toolbar-surface);color:var(--brick-color-text-primary);scrollbar-width:thin;display:inline-flex;overflow:auto hidden}.brick-toolbar[data-orientation=vertical]{flex-direction:column;align-items:stretch;overflow:hidden auto}.brick-toolbar[data-variant=plain]{--brick-toolbar-surface:transparent;--brick-toolbar-padding:0}.brick-toolbar[data-variant=outline]{--brick-toolbar-surface:var(--brick-color-surface-base);--brick-toolbar-border-color:var(--brick-color-border-default)}.brick-toolbar[data-size=sm]{--brick-toolbar-item-size:var(--brick-control-min-block-size-sm);--brick-toolbar-item-padding-inline:.625rem}.brick-toolbar[data-size=lg]{--brick-toolbar-item-size:var(--brick-control-min-block-size-lg);--brick-toolbar-item-padding-inline:1rem}:where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item){box-sizing:border-box;min-block-size:var(--brick-toolbar-item-size);padding:.25rem var(--brick-toolbar-item-padding-inline);border:var(--brick-border-width) solid transparent;border-radius:var(--brick-toolbar-item-radius);appearance:none;background:var(--brick-toolbar-item-background);color:inherit;font:inherit;font-family:var(--brick-typography-control-md-font-family);font-weight:var(--brick-typography-control-md-font-weight);line-height:var(--brick-typography-control-md-line-height);white-space:nowrap;cursor:pointer;flex:none;justify-content:center;align-items:center;gap:.375rem;text-decoration:none;display:inline-flex}.brick-toolbar[data-size=sm] :where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item){font-size:var(--brick-typography-control-sm-font-size)}.brick-toolbar[data-size=lg] :where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item){font-size:var(--brick-typography-control-lg-font-size)}:where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item)>:where(svg,img){flex:none;block-size:1em;inline-size:1em}:where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item):focus-visible{z-index:1;outline:var(--brick-border-focus-width) solid var(--brick-color-focus-ring);outline-offset:calc(-1 * var(--brick-border-focus-width))}:where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item)[data-disabled]{color:var(--brick-color-text-disabled);box-shadow:none;cursor:not-allowed;opacity:.55;background:0 0;border-color:#0000}.brick-toolbar__toggle-group{--brick-toolbar-toggle-tone-solid:var(--brick-color-accent-solid);--brick-toolbar-toggle-tone-solid-hover:var(--brick-color-accent-solid-hover);--brick-toolbar-toggle-tone-solid-pressed:var(--brick-color-accent-solid-pressed);--brick-toolbar-toggle-tone-on-solid:var(--brick-color-accent-on-solid);--brick-toolbar-toggle-tone-soft:var(--brick-color-accent-soft);--brick-toolbar-toggle-tone-soft-hover:var(--brick-color-accent-soft-hover);--brick-toolbar-toggle-tone-soft-pressed:var(--brick-color-accent-soft-pressed);--brick-toolbar-toggle-tone-on-soft:var(--brick-color-accent-on-soft);--brick-toolbar-toggle-tone-border:var(--brick-color-accent-border);--brick-toolbar-toggle-tone-text:var(--brick-color-accent-text);display:contents}.brick-toolbar__toggle-group[data-tone=neutral]{--brick-toolbar-toggle-tone-solid:var(--lightningcss-light,var(--brick-color-surface-raised))var(--lightningcss-dark,color-mix(in srgb, var(--brick-color-surface-subtle), var(--brick-color-text-primary) 16%));--brick-toolbar-toggle-tone-solid-hover:var(--lightningcss-light,color-mix(in srgb, var(--brick-color-surface-raised) 80%, var(--brick-color-surface-subtle)))var(--lightningcss-dark,color-mix(in srgb, var(--brick-color-surface-subtle), var(--brick-color-text-primary) 22%));--brick-toolbar-toggle-tone-solid-pressed:var(--lightningcss-light,color-mix(in srgb, var(--brick-color-surface-raised) 60%, var(--brick-color-surface-subtle)))var(--lightningcss-dark,color-mix(in srgb, var(--brick-color-surface-subtle), var(--brick-color-text-primary) 28%));--brick-toolbar-toggle-tone-on-solid:var(--brick-color-text-primary);--brick-toolbar-toggle-tone-soft:var(--brick-color-surface-subtle);--brick-toolbar-toggle-tone-soft-hover:var(--brick-color-surface-base);--brick-toolbar-toggle-tone-soft-pressed:var(--brick-color-border-subtle);--brick-toolbar-toggle-tone-on-soft:var(--brick-color-text-primary);--brick-toolbar-toggle-tone-border:var(--brick-color-border-strong);--brick-toolbar-toggle-tone-text:var(--brick-color-text-primary)}.brick-toolbar__toggle-group[data-variant=soft]>.brick-toolbar__toggle-item[data-state=on]{border-color:var(--brick-toolbar-toggle-tone-border);background:var(--brick-toolbar-item-selected-background);color:var(--brick-toolbar-toggle-tone-on-soft);box-shadow:inset 0 -.125rem 0 var(--brick-toolbar-toggle-tone-solid)}.brick-toolbar__toggle-group[data-variant=solid]>.brick-toolbar__toggle-item[data-state=on]{border-color:var(--brick-toolbar-toggle-tone-solid);background:var(--brick-toolbar-toggle-tone-solid);color:var(--brick-toolbar-toggle-tone-on-solid)}.brick-toolbar__toggle-group[data-variant=outline]>.brick-toolbar__toggle-item{border-color:var(--brick-color-border-default);background:0 0}.brick-toolbar__toggle-group[data-variant=outline]>.brick-toolbar__toggle-item[data-state=on]{border-color:var(--brick-toolbar-toggle-tone-border);color:var(--brick-toolbar-toggle-tone-text)}.brick-toolbar__toggle-group[data-variant=ghost]>.brick-toolbar__toggle-item{background:0 0}.brick-toolbar__toggle-group[data-variant=ghost]>.brick-toolbar__toggle-item[data-state=on]{background:var(--brick-toolbar-toggle-tone-soft);color:var(--brick-toolbar-toggle-tone-on-soft);border-color:#0000}.brick-toolbar__toggle-group>.brick-toolbar__toggle-item[data-state=on]:not([data-disabled]):active{background:var(--brick-toolbar-toggle-tone-soft-pressed)}.brick-toolbar__toggle-group[data-variant=solid]>.brick-toolbar__toggle-item[data-state=on]:not([data-disabled]):active{border-color:var(--brick-toolbar-toggle-tone-solid-pressed);background:var(--brick-toolbar-toggle-tone-solid-pressed)}.brick-toolbar__toggle-group[data-variant]>.brick-toolbar__toggle-item[data-disabled][data-state]{color:var(--brick-color-text-disabled);box-shadow:none;background:0 0;border-color:#0000}.brick-toolbar__separator{inline-size:var(--brick-border-width);background:var(--brick-toolbar-separator-color);flex:none;align-self:stretch;min-block-size:1.25rem;margin:0 .125rem}.brick-toolbar__separator[data-orientation=horizontal]{min-block-size:0;inline-size:auto;block-size:var(--brick-border-width);min-inline-size:1.25rem;margin:.125rem 0}@media (hover:hover) and (pointer:fine){:where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item):not([data-disabled]):hover{background:var(--brick-color-surface-raised)}.brick-toolbar__toggle-group>.brick-toolbar__toggle-item[data-state=on]:not([data-disabled]):hover{background:var(--brick-toolbar-toggle-tone-soft-hover)}.brick-toolbar__toggle-group[data-variant=solid]>.brick-toolbar__toggle-item[data-state=on]:not([data-disabled]):hover{border-color:var(--brick-toolbar-toggle-tone-solid-hover);background:var(--brick-toolbar-toggle-tone-solid-hover)}.brick-toolbar__toggle-group[data-variant=outline]>.brick-toolbar__toggle-item[data-state=on]:not([data-disabled]):hover{background:var(--brick-color-surface-raised)}}@media (prefers-reduced-motion:reduce){:where(.brick-toolbar__button,.brick-toolbar__link,.brick-toolbar__toggle-item){transition:none}}@media (forced-colors:active){.brick-toolbar{border-color:canvastext}.brick-toolbar__toggle-item[data-state=on]{outline:2px solid highlight}}}@layer brick.utilities,brick.effects;
|
|
2
2
|
/*# sourceMappingURL=toolbar.css.map */
|