@patternfly/patternfly 6.5.0-prerelease.8 → 6.5.0-prerelease.81
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 +2 -2
- package/assets/fontawesome/_variables.scss +2 -1
- package/assets/images/Felt-Bkg-Generic-Dark.svg +82 -0
- package/assets/images/Felt-Bkg-Generic-Light.svg +82 -0
- package/assets/images/PF-Bkg-Generic-Dark.svg +76 -0
- package/assets/images/PF-Bkg-Generic-Light.svg +74 -0
- package/assets/images/RHAiExperienceIcon.svg +27 -0
- package/assets/images/RHAutomationsLogo.svg +96 -0
- package/assets/images/RHServerStackIcon.svg +16 -0
- package/assets/images/compass--hero-bg.png +0 -0
- package/assets/images/compass--rh-wallpaper-dark.png +0 -0
- package/assets/images/compass--rh-wallpaper-light.png +0 -0
- package/assets/images/compass--wallpaper-dark.jpg +0 -0
- package/assets/images/compass--wallpaper-dark.png +0 -0
- package/assets/images/compass--wallpaper-light.jpg +0 -0
- package/assets/images/compass--wallpaper-light.png +0 -0
- package/assets/images/glass-brand-dark.jpg +0 -0
- package/assets/images/glass-brand-dark.png +0 -0
- package/assets/images/glass-brand-light.jpg +0 -0
- package/assets/images/glass-brand-light.png +0 -0
- package/base/normalize.scss +7 -0
- package/base/patternfly-common.css +50 -0
- package/base/patternfly-common.scss +59 -0
- package/base/patternfly-svg-icons.css +17 -0
- package/base/patternfly-svg-icons.scss +20 -0
- package/base/patternfly-variables.css +926 -513
- package/base/patternfly-variables.scss +46 -4
- package/base/tokens/tokens-dark.scss +56 -8
- package/base/tokens/tokens-default.scss +69 -14
- package/base/tokens/tokens-glass-dark.scss +26 -0
- package/base/tokens/tokens-glass.scss +22 -0
- package/base/tokens/tokens-local.scss +17 -0
- package/base/tokens/tokens-palette.scss +3 -1
- package/base/tokens/tokens-redhat-dark.scss +21 -0
- package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
- package/base/tokens/tokens-redhat-glass.scss +30 -0
- package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
- package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
- package/base/tokens/tokens-redhat.scss +15 -0
- package/components/AboutModalBox/about-modal-box.css +36 -26
- package/components/Accordion/accordion.css +26 -14
- package/components/Accordion/accordion.scss +12 -2
- package/components/ActionList/action-list.css +2 -0
- package/components/ActionList/action-list.scss +2 -0
- package/components/Alert/alert.css +7 -5
- package/components/Alert/alert.scss +2 -1
- package/components/Avatar/avatar.css +12 -4
- package/components/BackgroundImage/background-image.css +6 -3
- package/components/Banner/banner.css +12 -6
- package/components/Banner/banner.scss +7 -0
- package/components/Brand/brand.css +3 -1
- package/components/Breadcrumb/breadcrumb.css +10 -5
- package/components/Breadcrumb/breadcrumb.scss +6 -2
- package/components/Button/button.css +173 -71
- package/components/Button/button.scss +188 -72
- package/components/CalendarMonth/calendar-month.css +4 -3
- package/components/Card/card.css +51 -15
- package/components/Card/card.scss +65 -9
- package/components/ClipboardCopy/clipboard-copy.css +14 -7
- package/components/ClipboardCopy/clipboard-copy.scss +13 -4
- package/components/CodeEditor/code-editor.css +2 -2
- package/components/CodeEditor/code-editor.scss +2 -2
- package/components/Compass/compass.css +399 -0
- package/components/Compass/compass.scss +413 -0
- package/components/DataList/data-list.css +30 -23
- package/components/DataList/data-list.scss +3 -2
- package/components/DescriptionList/description-list-order.scss +5 -1
- package/components/DescriptionList/description-list.css +7 -5
- package/components/DescriptionList/description-list.scss +5 -1
- package/components/Divider/divider.css +7 -5
- package/components/Drawer/drawer.css +224 -75
- package/components/Drawer/drawer.scss +194 -27
- package/components/DualListSelector/dual-list-selector.css +18 -12
- package/components/DualListSelector/dual-list-selector.scss +1 -1
- package/components/ExpandableSection/expandable-section.css +21 -16
- package/components/ExpandableSection/expandable-section.scss +6 -3
- package/components/Form/form.css +2 -2
- package/components/Form/form.scss +2 -2
- package/components/FormControl/form-control.css +3 -3
- package/components/FormControl/form-control.scss +3 -3
- package/components/Hero/hero.css +74 -0
- package/components/Hero/hero.scss +86 -0
- package/components/JumpLinks/jump-links.css +16 -5
- package/components/JumpLinks/jump-links.scss +17 -3
- package/components/Label/label-group.css +2 -2
- package/components/Label/label-group.scss +2 -2
- package/components/Label/label.css +4 -3
- package/components/Login/login.css +58 -40
- package/components/Login/login.scss +7 -3
- package/components/Masthead/masthead.css +111 -16
- package/components/Masthead/masthead.scss +111 -1
- package/components/Menu/menu.css +49 -33
- package/components/Menu/menu.scss +26 -19
- package/components/MenuToggle/menu-toggle.css +35 -8
- package/components/MenuToggle/menu-toggle.scss +42 -8
- package/components/ModalBox/modal-box.css +9 -7
- package/components/ModalBox/modal-box.scss +2 -2
- package/components/Nav/nav.css +82 -11
- package/components/Nav/nav.scss +85 -5
- package/components/NotificationDrawer/notification-drawer.css +19 -9
- package/components/NotificationDrawer/notification-drawer.scss +14 -5
- package/components/OverflowMenu/overflow-menu.css +16 -0
- package/components/OverflowMenu/overflow-menu.scss +20 -1
- package/components/Page/page.css +421 -32
- package/components/Page/page.scss +397 -15
- package/components/Pagination/pagination.css +56 -4
- package/components/Pagination/pagination.scss +71 -6
- package/components/Panel/panel.css +41 -3
- package/components/Panel/panel.scss +56 -3
- package/components/Progress/progress.css +3 -1
- package/components/Progress/progress.scss +3 -1
- package/components/ProgressStepper/progress-stepper.scss +5 -1
- package/components/Sidebar/sidebar.css +1 -1
- package/components/Sidebar/sidebar.scss +7 -3
- package/components/Skeleton/skeleton.css +16 -15
- package/components/Slider/slider.css +32 -18
- package/components/Switch/switch.css +4 -2
- package/components/Switch/switch.scss +1 -1
- package/components/Table/table-grid.css +28 -36
- package/components/Table/table-grid.scss +4 -4
- package/components/Table/table-scrollable.css +1 -1
- package/components/Table/table-scrollable.scss +1 -1
- package/components/Table/table-tree-view.css +4 -2
- package/components/Table/table.css +104 -57
- package/components/Table/table.scss +92 -37
- package/components/Tabs/tabs.css +39 -33
- package/components/Tabs/tabs.scss +38 -26
- package/components/TextInputGroup/text-input-group.css +2 -2
- package/components/TextInputGroup/text-input-group.scss +2 -2
- package/components/ToggleGroup/toggle-group.css +44 -19
- package/components/ToggleGroup/toggle-group.scss +51 -22
- package/components/Toolbar/toolbar.css +195 -16
- package/components/Toolbar/toolbar.scss +89 -9
- package/components/TreeView/tree-view.css +45 -14
- package/components/TreeView/tree-view.scss +32 -1
- package/components/Wizard/wizard.css +41 -19
- package/components/Wizard/wizard.scss +26 -6
- package/components/_index.css +2740 -829
- package/components/_index.scss +3 -1
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
- package/docs/components/Accordion/examples/Accordion.md +392 -30
- package/docs/components/ActionList/examples/ActionList.md +143 -11
- package/docs/components/Alert/examples/Alert.md +678 -54
- package/docs/components/Avatar/examples/Avatar.md +4 -4
- package/docs/components/BackToTop/examples/BackToTop.md +13 -1
- package/docs/components/Banner/examples/Banner.md +196 -5
- package/docs/components/Brand/examples/Brand.md +2 -2
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +313 -26
- package/docs/components/Button/examples/Button.md +2829 -333
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +156 -12
- package/docs/components/Card/examples/Card.md +335 -12
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +293 -28
- package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
- package/docs/components/CodeEditor/examples/CodeEditor.md +234 -18
- package/docs/components/Compass/examples/Compass.css +8 -0
- package/docs/components/Compass/examples/Compass.md +109 -0
- package/docs/components/DataList/examples/DataList.md +468 -78
- package/docs/components/DatePicker/examples/DatePicker.md +78 -6
- package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
- package/docs/components/Divider/examples/Divider.md +2 -2
- package/docs/components/DragDrop/examples/DragDrop.css +1 -1
- package/docs/components/Drawer/examples/Drawer.md +415 -35
- package/docs/components/DualListSelector/examples/DualListSelector.md +1247 -161
- package/docs/components/EmptyState/examples/EmptyState.md +78 -6
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
- package/docs/components/Form/examples/Form.md +78 -6
- package/docs/components/Hero/examples/Hero.md +25 -0
- package/docs/components/Hint/examples/Hint.md +39 -3
- package/docs/components/Icon/examples/Icon.md +105 -9
- package/docs/components/InlineEdit/examples/InlineEdit.md +338 -26
- package/docs/components/InputGroup/examples/InputGroup.md +40 -4
- package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
- package/docs/components/Label/examples/Label.md +2834 -218
- package/docs/components/Login/examples/Login.md +39 -3
- package/docs/components/Masthead/examples/masthead.md +80 -1
- package/docs/components/Menu/examples/Menu.md +1679 -133
- package/docs/components/MenuToggle/examples/MenuToggle.md +1514 -118
- package/docs/components/ModalBox/examples/ModalBox.md +289 -25
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
- package/docs/components/Nav/examples/Navigation.md +898 -62
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +1079 -83
- package/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
- package/docs/components/OverflowMenu/examples/overflow-menu.md +164 -11
- package/docs/components/Page/examples/Page.md +211 -25
- package/docs/components/Pagination/examples/Pagination.md +1291 -80
- package/docs/components/Panel/examples/Panel.css +3 -0
- package/docs/components/Panel/examples/Panel.md +71 -4
- package/docs/components/Popover/examples/Popover.md +286 -22
- package/docs/components/Progress/examples/Progress.md +91 -7
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
- package/docs/components/Sidebar/examples/Sidebar.md +1 -1
- package/docs/components/Slider/examples/Slider.md +52 -4
- package/docs/components/Table/examples/Table.css +2 -1
- package/docs/components/Table/examples/Table.md +7543 -653
- package/docs/components/Tabs/examples/Tabs.md +5734 -471
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
- package/docs/components/ToggleGroup/examples/toggle-group.md +261 -15
- package/docs/components/Toolbar/examples/Toolbar.css +1 -1
- package/docs/components/Toolbar/examples/Toolbar.md +1145 -88
- package/docs/components/TreeView/examples/TreeView.md +1390 -130
- package/docs/components/Wizard/examples/Wizard.md +828 -73
- package/docs/demos/AboutModal/examples/AboutModal.md +158 -53
- package/docs/demos/Alert/examples/Alert.md +539 -164
- package/docs/demos/BackToTop/examples/BackToTop.md +158 -53
- package/docs/demos/Banner/examples/Banner.md +290 -104
- package/docs/demos/Button/examples/Button.md +13 -1
- package/docs/demos/Card/examples/Card.md +1041 -134
- package/docs/demos/CardView/examples/CardView.md +570 -171
- package/docs/demos/Compass/examples/Compass.md +10005 -0
- package/docs/demos/Dashboard/examples/Dashboard.md +745 -177
- package/docs/demos/DataList/examples/DataList.md +1301 -292
- package/docs/demos/DescriptionList/examples/DescriptionList.md +472 -160
- package/docs/demos/Drawer/examples/Drawer.md +718 -262
- package/docs/demos/Form/examples/BasicForms.md +273 -21
- package/docs/demos/JumpLinks/examples/JumpLinks.md +862 -319
- package/docs/demos/Masthead/examples/Masthead.md +1119 -489
- package/docs/demos/Modal/examples/Modal.md +948 -321
- package/docs/demos/Nav/examples/Nav.md +3449 -499
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +2418 -405
- package/docs/demos/Page/examples/Page.md +2137 -773
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1913 -504
- package/docs/demos/Skeleton/examples/Skeleton.md +145 -52
- package/docs/demos/Table/examples/Table.md +11807 -2275
- package/docs/demos/Tabs/examples/Tabs.md +1117 -337
- package/docs/demos/Toolbar/examples/Toolbar.md +1818 -286
- package/docs/demos/Wizard/examples/Wizard.md +1705 -526
- package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
- package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
- package/docs/layouts/Flex/examples/Flex.css +3 -3
- package/docs/layouts/Flex/examples/Flex.md +3 -2
- package/docs/layouts/Gallery/examples/Gallery.css +2 -2
- package/docs/layouts/Gallery/examples/Gallery.md +4 -3
- package/docs/layouts/Grid/examples/Grid.css +1 -1
- package/docs/layouts/Grid/examples/Grid.md +6 -5
- package/docs/layouts/Level/examples/Level.css +3 -3
- package/docs/layouts/Level/examples/Level.md +2 -1
- package/docs/layouts/Split/examples/Split.css +1 -1
- package/docs/layouts/Split/examples/Split.md +2 -1
- package/docs/layouts/Stack/examples/Stack.css +3 -3
- package/docs/layouts/Stack/examples/Stack.md +2 -1
- package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
- package/docs/utilities/Alignment/examples/Alignment.css +4 -4
- package/docs/utilities/Alignment/examples/Alignment.md +3 -2
- package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
- package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
- package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
- package/docs/utilities/Display/examples/Display.css +1 -1
- package/docs/utilities/Display/examples/Display.md +3 -2
- package/docs/utilities/Flex/examples/Flex.css +7 -7
- package/docs/utilities/Flex/examples/Flex.md +3 -2
- package/docs/utilities/Float/examples/Float.css +2 -2
- package/docs/utilities/Float/examples/Float.md +3 -2
- package/docs/utilities/Sizing/examples/Sizing.md +8 -7
- package/docs/utilities/Spacing/examples/Spacing.css +2 -2
- package/docs/utilities/Spacing/examples/Spacing.md +3 -2
- package/docs/utilities/Text/examples/Text.md +5 -4
- package/icons/PfIcons/add-circle-o.svg +4 -0
- package/icons/PfIcons/ansible-tower.svg +4 -0
- package/icons/PfIcons/applications.svg +4 -0
- package/icons/PfIcons/arrow.svg +4 -0
- package/icons/PfIcons/asleep.svg +4 -0
- package/icons/PfIcons/attention-bell.svg +4 -0
- package/icons/PfIcons/automation.svg +4 -0
- package/icons/PfIcons/bell.svg +4 -0
- package/icons/PfIcons/blueprint.svg +4 -0
- package/icons/PfIcons/build.svg +4 -0
- package/icons/PfIcons/builder-image.svg +4 -0
- package/icons/PfIcons/bundle.svg +4 -0
- package/icons/PfIcons/catalog.svg +4 -0
- package/icons/PfIcons/chat.svg +4 -0
- package/icons/PfIcons/close.svg +4 -0
- package/icons/PfIcons/cloud-security.svg +4 -0
- package/icons/PfIcons/cloud-tenant.svg +4 -0
- package/icons/PfIcons/cluster.svg +4 -0
- package/icons/PfIcons/connected.svg +4 -0
- package/icons/PfIcons/container-node.svg +4 -0
- package/icons/PfIcons/cpu.svg +4 -0
- package/icons/PfIcons/critical-risk.svg +4 -0
- package/icons/PfIcons/data-processor.svg +4 -0
- package/icons/PfIcons/data-sink.svg +4 -0
- package/icons/PfIcons/data-source.svg +4 -0
- package/icons/PfIcons/degraded.svg +4 -0
- package/icons/PfIcons/disconnected.svg +4 -0
- package/icons/PfIcons/domain.svg +4 -0
- package/icons/PfIcons/edit.svg +4 -0
- package/icons/PfIcons/enhancement.svg +4 -0
- package/icons/PfIcons/enterprise.svg +4 -0
- package/icons/PfIcons/equalizer.svg +4 -0
- package/icons/PfIcons/error-circle-o.svg +4 -0
- package/icons/PfIcons/export.svg +4 -0
- package/icons/PfIcons/filter.svg +4 -0
- package/icons/PfIcons/flavor.svg +4 -0
- package/icons/PfIcons/folder-close.svg +4 -0
- package/icons/PfIcons/folder-open.svg +4 -0
- package/icons/PfIcons/globe-route.svg +4 -0
- package/icons/PfIcons/help.svg +4 -0
- package/icons/PfIcons/history.svg +4 -0
- package/icons/PfIcons/home.svg +4 -0
- package/icons/PfIcons/import.svg +4 -0
- package/icons/PfIcons/in-progress.svg +4 -0
- package/icons/PfIcons/info.svg +4 -0
- package/icons/PfIcons/infrastructure.svg +4 -0
- package/icons/PfIcons/integration.svg +4 -0
- package/icons/PfIcons/key.svg +4 -0
- package/icons/PfIcons/locked.svg +4 -0
- package/icons/PfIcons/maintenance.svg +4 -0
- package/icons/PfIcons/memory.svg +4 -0
- package/icons/PfIcons/messages.svg +4 -0
- package/icons/PfIcons/middleware.svg +4 -0
- package/icons/PfIcons/migration.svg +4 -0
- package/icons/PfIcons/module.svg +4 -0
- package/icons/PfIcons/monitoring.svg +4 -0
- package/icons/PfIcons/multicluster.svg +4 -0
- package/icons/PfIcons/namespaces.svg +4 -0
- package/icons/PfIcons/network.svg +4 -0
- package/icons/PfIcons/new-process.svg +4 -0
- package/icons/PfIcons/not-started.svg +4 -0
- package/icons/PfIcons/off.svg +4 -0
- package/icons/PfIcons/ok.svg +4 -0
- package/icons/PfIcons/on-running.svg +4 -0
- package/icons/PfIcons/on.svg +4 -0
- package/icons/PfIcons/open-drawer-right.svg +4 -0
- package/icons/PfIcons/openshift.svg +4 -0
- package/icons/PfIcons/openstack.svg +4 -0
- package/icons/PfIcons/optimize.svg +4 -0
- package/icons/PfIcons/orders.svg +4 -0
- package/icons/PfIcons/os-image.svg +4 -0
- package/icons/PfIcons/package.svg +4 -0
- package/icons/PfIcons/panel-close.svg +4 -0
- package/icons/PfIcons/panel-open.svg +4 -0
- package/icons/PfIcons/paused.svg +4 -0
- package/icons/PfIcons/pending.svg +4 -0
- package/icons/PfIcons/pficon-dragdrop.svg +4 -0
- package/icons/PfIcons/pficon-history.svg +4 -0
- package/icons/PfIcons/pficon-network-range.svg +4 -0
- package/icons/PfIcons/pficon-satellite.svg +4 -0
- package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
- package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
- package/icons/PfIcons/pficon-template.svg +4 -0
- package/icons/PfIcons/pficon-vcenter.svg +4 -0
- package/icons/PfIcons/plugged.svg +4 -0
- package/icons/PfIcons/port.svg +4 -0
- package/icons/PfIcons/print.svg +4 -0
- package/icons/PfIcons/private.svg +4 -0
- package/icons/PfIcons/process-automation.svg +4 -0
- package/icons/PfIcons/project.svg +4 -0
- package/icons/PfIcons/rebalance.svg +4 -0
- package/icons/PfIcons/rebooting.svg +4 -0
- package/icons/PfIcons/regions.svg +4 -0
- package/icons/PfIcons/registry.svg +4 -0
- package/icons/PfIcons/remove2.svg +4 -0
- package/icons/PfIcons/replicator.svg +4 -0
- package/icons/PfIcons/repository.svg +4 -0
- package/icons/PfIcons/resource-pool.svg +4 -0
- package/icons/PfIcons/resources-almost-empty.svg +4 -0
- package/icons/PfIcons/resources-almost-full.svg +4 -0
- package/icons/PfIcons/resources-empty.svg +4 -0
- package/icons/PfIcons/resources-full.svg +4 -0
- package/icons/PfIcons/running.svg +4 -0
- package/icons/PfIcons/save.svg +4 -0
- package/icons/PfIcons/screen.svg +4 -0
- package/icons/PfIcons/security.svg +4 -0
- package/icons/PfIcons/server-group.svg +4 -0
- package/icons/PfIcons/server.svg +4 -0
- package/icons/PfIcons/service-catalog.svg +4 -0
- package/icons/PfIcons/service.svg +4 -0
- package/icons/PfIcons/services.svg +4 -0
- package/icons/PfIcons/severity-critical.svg +4 -0
- package/icons/PfIcons/severity-important.svg +4 -0
- package/icons/PfIcons/severity-minor.svg +4 -0
- package/icons/PfIcons/severity-moderate.svg +4 -0
- package/icons/PfIcons/severity-none.svg +4 -0
- package/icons/PfIcons/severity-undefined.svg +4 -0
- package/icons/PfIcons/spinner.svg +4 -0
- package/icons/PfIcons/spinner2.svg +4 -0
- package/icons/PfIcons/storage-domain.svg +4 -0
- package/icons/PfIcons/task.svg +4 -0
- package/icons/PfIcons/tenant.svg +4 -0
- package/icons/PfIcons/thumb-tack.svg +4 -0
- package/icons/PfIcons/topology.svg +4 -0
- package/icons/PfIcons/treeview.svg +4 -0
- package/icons/PfIcons/trend-down.svg +4 -0
- package/icons/PfIcons/trend-up.svg +4 -0
- package/icons/PfIcons/unknown.svg +4 -0
- package/icons/PfIcons/unlocked.svg +4 -0
- package/icons/PfIcons/unplugged.svg +4 -0
- package/icons/PfIcons/user.svg +4 -0
- package/icons/PfIcons/users.svg +4 -0
- package/icons/PfIcons/virtual-machine.svg +4 -0
- package/icons/PfIcons/volume.svg +4 -0
- package/icons/PfIcons/warning-triangle.svg +4 -0
- package/icons/PfIcons/zone.svg +4 -0
- package/layouts/Flex/flex.scss +83 -19
- package/layouts/Gallery/gallery.css +6 -2
- package/layouts/_index.css +6 -2
- package/package.json +55 -17
- package/patternfly-base-no-globals.css +969 -489
- package/patternfly-base.css +976 -489
- package/patternfly-charts.css +3 -3
- package/patternfly-no-globals.css +3623 -1194
- package/patternfly.css +3630 -1194
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/patternfly.scss +48 -0
- package/sass-utilities/functions.scss +32 -25
- package/sass-utilities/mixins.scss +54 -23
- package/sass-utilities/namespaces-components.scss +6 -0
- package/sass-utilities/scss-variables.scss +3 -0
|
@@ -5,6 +5,14 @@
|
|
|
5
5
|
@use "./tokens/tokens-highcontrast" as highcontrast;
|
|
6
6
|
@use "./tokens/tokens-highcontrast-dark" as highcontrast-dark;
|
|
7
7
|
@use "./tokens/tokens-local" as local;
|
|
8
|
+
@use "./tokens/tokens-glass" as glass;
|
|
9
|
+
@use "./tokens/tokens-glass-dark" as glass-dark;
|
|
10
|
+
@use "./tokens/tokens-redhat" as redhat;
|
|
11
|
+
@use "./tokens/tokens-redhat-dark" as redhat-dark;
|
|
12
|
+
@use "./tokens/tokens-redhat-highcontrast" as redhat-highcontrast;
|
|
13
|
+
@use "./tokens/tokens-redhat-highcontrast-dark" as redhat-highcontrast-dark;
|
|
14
|
+
@use "./tokens/tokens-redhat-glass" as redhat-glass;
|
|
15
|
+
@use "./tokens/tokens-redhat-glass-dark" as redhat-glass-dark;
|
|
8
16
|
|
|
9
17
|
:root {
|
|
10
18
|
@include pf-v6-set-inverse(false);
|
|
@@ -13,16 +21,50 @@
|
|
|
13
21
|
@include local.pf-v6-tokens;
|
|
14
22
|
}
|
|
15
23
|
|
|
24
|
+
// Default
|
|
25
|
+
:root:where(.pf-v6-theme-high-contrast) {
|
|
26
|
+
@include highcontrast.pf-v6-tokens;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
:root:where(.pf-v6-theme-glass) {
|
|
30
|
+
@include glass.pf-v6-tokens;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
:root:where(.pf-v6-theme-redhat) {
|
|
34
|
+
@include redhat.pf-v6-tokens;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
:root:where(.pf-v6-theme-redhat.pf-v6-theme-high-contrast) {
|
|
38
|
+
@include redhat-highcontrast.pf-v6-tokens;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
:root:where(.pf-v6-theme-redhat.pf-v6-theme-glass) {
|
|
42
|
+
@include redhat-glass.pf-v6-tokens;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// Dark
|
|
16
46
|
:root:where(.pf-v6-theme-dark) {
|
|
17
47
|
@include dark.pf-v6-tokens;
|
|
18
48
|
}
|
|
19
49
|
|
|
20
|
-
:root:where(.pf-v6-theme-high-contrast) {
|
|
21
|
-
@include highcontrast.pf-v6-tokens;
|
|
50
|
+
:root:where(.pf-v6-theme-dark.pf-v6-theme-high-contrast) {
|
|
51
|
+
@include highcontrast-dark.pf-v6-tokens;
|
|
22
52
|
}
|
|
23
53
|
|
|
24
|
-
:root:where(.pf-v6-theme-
|
|
25
|
-
@include
|
|
54
|
+
:root:where(.pf-v6-theme-dark.pf-v6-theme-glass) {
|
|
55
|
+
@include glass-dark.pf-v6-tokens;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
:root:where(.pf-v6-theme-dark.pf-v6-theme-redhat) {
|
|
59
|
+
@include redhat-dark.pf-v6-tokens;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
:root:where(.pf-v6-theme-dark.pf-v6-theme-redhat.pf-v6-theme-high-contrast) {
|
|
63
|
+
@include redhat-highcontrast-dark.pf-v6-tokens;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
:root:where(.pf-v6-theme-dark.pf-v6-theme-redhat.pf-v6-theme-glass) {
|
|
67
|
+
@include redhat-glass-dark.pf-v6-tokens;
|
|
26
68
|
}
|
|
27
69
|
|
|
28
70
|
@include pf-v6-rtl(false) {
|
|
@@ -1,22 +1,27 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Mon, 23 Mar 2026 14:56:21 GMT
|
|
4
4
|
|
|
5
5
|
@mixin pf-v6-tokens {
|
|
6
6
|
--pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
|
|
7
|
+
--pf-t--global--background--color--striped--row--default: rgba(21, 21, 21, 0.3000);
|
|
8
|
+
--pf-t--global--background--filter--glass--blur--primary: initial;
|
|
7
9
|
--pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
|
|
8
10
|
--pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000);
|
|
9
11
|
--pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
|
|
12
|
+
--pf-t--global--dark--background--color--700: rgba(199, 199, 199, 0.2500);
|
|
10
13
|
--pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
|
|
11
|
-
--pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.
|
|
14
|
+
--pf-t--global--dark--box-shadow--color--200: rgba(0, 0, 0, 0.6000);
|
|
12
15
|
--pf-t--global--background--color--action--plain--clicked: var(--pf-t--global--dark--background--color--600);
|
|
13
16
|
--pf-t--global--background--color--action--plain--hover: var(--pf-t--global--dark--background--color--600);
|
|
14
17
|
--pf-t--global--background--color--backdrop--default: var(--pf-t--global--dark--background--color--500);
|
|
18
|
+
--pf-t--global--background--color--loading--skeleton--default: var(--pf-t--global--dark--background--color--700);
|
|
19
|
+
--pf-t--global--background--color--loading--skeleton--subtle: var(--pf-t--global--dark--background--color--600);
|
|
15
20
|
--pf-t--global--background--color--tertiary--default: var(--pf-t--global--dark--background--color--600);
|
|
16
21
|
--pf-t--global--box-shadow--color--lg--default: var(--pf-t--global--dark--box-shadow--color--100);
|
|
17
22
|
--pf-t--global--box-shadow--color--lg--directional: var(--pf-t--global--dark--box-shadow--color--200);
|
|
18
23
|
--pf-t--global--box-shadow--color--md--default: var(--pf-t--global--dark--box-shadow--color--100);
|
|
19
|
-
--pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--
|
|
24
|
+
--pf-t--global--box-shadow--color--md--directional: var(--pf-t--global--dark--box-shadow--color--100);
|
|
20
25
|
--pf-t--global--box-shadow--color--sm--default: var(--pf-t--global--dark--box-shadow--color--100);
|
|
21
26
|
--pf-t--global--box-shadow--color--sm--directional: var(--pf-t--global--dark--box-shadow--color--200);
|
|
22
27
|
--pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95);
|
|
@@ -26,13 +31,21 @@
|
|
|
26
31
|
--pf-t--global--dark--background--color--450: var(--pf-t--color--gray--20);
|
|
27
32
|
--pf-t--global--dark--background--color--highlight--100: var(--pf-t--color--yellow--20);
|
|
28
33
|
--pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30);
|
|
29
|
-
--pf-t--global--dark--border--color--100: var(--pf-t--color--gray--
|
|
34
|
+
--pf-t--global--dark--border--color--100: var(--pf-t--color--gray--60);
|
|
30
35
|
--pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
|
|
31
36
|
--pf-t--global--dark--border--color--300: var(--pf-t--color--gray--30);
|
|
32
|
-
--pf-t--global--dark--border--color--50: var(--pf-t--color--gray--
|
|
37
|
+
--pf-t--global--dark--border--color--50: var(--pf-t--color--gray--70);
|
|
33
38
|
--pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30);
|
|
34
39
|
--pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20);
|
|
35
40
|
--pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10);
|
|
41
|
+
--pf-t--global--dark--color--brand--accent--100: var(--pf-t--color--red--50);
|
|
42
|
+
--pf-t--global--dark--color--brand--accent--200: var(--pf-t--color--red--60);
|
|
43
|
+
--pf-t--global--dark--color--brand--accent--300: var(--pf-t--color--red--40);
|
|
44
|
+
--pf-t--global--dark--color--brand--accent--350: var(--pf-t--color--gray--20);
|
|
45
|
+
--pf-t--global--dark--color--brand--accent--400: var(--pf-t--color--white);
|
|
46
|
+
--pf-t--global--dark--color--brand--subtle--100: var(--pf-t--color--blue--70);
|
|
47
|
+
--pf-t--global--dark--color--brand--subtle--200: var(--pf-t--color--blue--60);
|
|
48
|
+
--pf-t--global--dark--color--brand--subtle--300: var(--pf-t--color--blue--30);
|
|
36
49
|
--pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40);
|
|
37
50
|
--pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50);
|
|
38
51
|
--pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
|
|
@@ -104,7 +117,7 @@
|
|
|
104
117
|
--pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--dark--background--color--200);
|
|
105
118
|
--pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--dark--background--color--200);
|
|
106
119
|
--pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--300);
|
|
107
|
-
--pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--
|
|
120
|
+
--pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--200);
|
|
108
121
|
--pf-t--global--background--color--disabled--default: var(--pf-t--global--dark--color--disabled--100);
|
|
109
122
|
--pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--200);
|
|
110
123
|
--pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--300);
|
|
@@ -120,9 +133,14 @@
|
|
|
120
133
|
--pf-t--global--background--color--secondary--clicked: var(--pf-t--global--dark--background--color--200);
|
|
121
134
|
--pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
|
|
122
135
|
--pf-t--global--background--color--secondary--hover: var(--pf-t--global--dark--background--color--200);
|
|
136
|
+
--pf-t--global--background--color--sticky--default: var(--pf-t--global--dark--background--color--200);
|
|
137
|
+
--pf-t--global--border--color--brand--subtle--clicked: var(--pf-t--global--dark--color--brand--subtle--300);
|
|
138
|
+
--pf-t--global--border--color--brand--subtle--default: var(--pf-t--global--dark--color--brand--subtle--200);
|
|
139
|
+
--pf-t--global--border--color--brand--subtle--hover: var(--pf-t--global--dark--color--brand--subtle--300);
|
|
123
140
|
--pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
|
|
124
|
-
--pf-t--global--border--color--control--
|
|
125
|
-
--pf-t--global--border--color--
|
|
141
|
+
--pf-t--global--border--color--control--default: var(--pf-t--global--dark--border--color--200);
|
|
142
|
+
--pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--100);
|
|
143
|
+
--pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--100);
|
|
126
144
|
--pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
|
|
127
145
|
--pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
|
|
128
146
|
--pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
|
|
@@ -153,9 +171,13 @@
|
|
|
153
171
|
--pf-t--global--border--color--nonstatus--yellow--default: var(--pf-t--global--dark--color--nonstatus--yellow--100);
|
|
154
172
|
--pf-t--global--border--color--nonstatus--yellow--hover: var(--pf-t--global--dark--color--nonstatus--yellow--200);
|
|
155
173
|
--pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
|
|
174
|
+
--pf-t--global--border--color--subtle: var(--pf-t--global--dark--border--color--100);
|
|
156
175
|
--pf-t--global--color--brand--clicked: var(--pf-t--global--dark--color--brand--200);
|
|
157
176
|
--pf-t--global--color--brand--default: var(--pf-t--global--dark--color--brand--100);
|
|
158
177
|
--pf-t--global--color--brand--hover: var(--pf-t--global--dark--color--brand--200);
|
|
178
|
+
--pf-t--global--color--brand--subtle--clicked: var(--pf-t--global--dark--color--brand--subtle--200);
|
|
179
|
+
--pf-t--global--color--brand--subtle--default: var(--pf-t--global--dark--color--brand--subtle--100);
|
|
180
|
+
--pf-t--global--color--brand--subtle--hover: var(--pf-t--global--dark--color--brand--subtle--200);
|
|
159
181
|
--pf-t--global--color--favorite--clicked: var(--pf-t--global--dark--color--favorite--200);
|
|
160
182
|
--pf-t--global--color--favorite--default: var(--pf-t--global--dark--color--favorite--100);
|
|
161
183
|
--pf-t--global--color--favorite--hover: var(--pf-t--global--dark--color--favorite--200);
|
|
@@ -232,10 +254,14 @@
|
|
|
232
254
|
--pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--250);
|
|
233
255
|
--pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
|
|
234
256
|
--pf-t--global--text--color--subtle: var(--pf-t--global--dark--text--color--200);
|
|
257
|
+
--pf-t--global--text-decoration--color--default: var(--pf-t--global--dark--border--color--200);
|
|
258
|
+
--pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--secondary--default);
|
|
259
|
+
--pf-t--global--background--color--glass--primary--default: initial;
|
|
235
260
|
--pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
|
|
236
261
|
--pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
|
|
237
262
|
--pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
|
|
238
263
|
--pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
|
|
264
|
+
--pf-t--global--border--color--glass--default: initial;
|
|
239
265
|
--pf-t--global--border--color--main--default: var(--pf-t--global--background--color--primary--default);
|
|
240
266
|
--pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
|
|
241
267
|
--pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
|
|
@@ -252,6 +278,9 @@
|
|
|
252
278
|
--pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
|
|
253
279
|
--pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
|
|
254
280
|
--pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
|
|
281
|
+
--pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--clicked);
|
|
282
|
+
--pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--default);
|
|
283
|
+
--pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--hover);
|
|
255
284
|
--pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
|
|
256
285
|
--pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
|
|
257
286
|
--pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
|
|
@@ -290,9 +319,15 @@
|
|
|
290
319
|
--pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--inverse);
|
|
291
320
|
--pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--inverse);
|
|
292
321
|
--pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--inverse);
|
|
322
|
+
--pf-t--global--icon--color--on-brand--accent--clicked: var(--pf-t--global--icon--color--inverse);
|
|
323
|
+
--pf-t--global--icon--color--on-brand--accent--default: var(--pf-t--global--icon--color--inverse);
|
|
324
|
+
--pf-t--global--icon--color--on-brand--accent--hover: var(--pf-t--global--icon--color--inverse);
|
|
293
325
|
--pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
|
|
294
326
|
--pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
|
|
295
327
|
--pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
|
|
328
|
+
--pf-t--global--icon--color--on-brand--subtle--clicked: var(--pf-t--global--icon--color--regular);
|
|
329
|
+
--pf-t--global--icon--color--on-brand--subtle--default: var(--pf-t--global--icon--color--regular);
|
|
330
|
+
--pf-t--global--icon--color--on-brand--subtle--hover: var(--pf-t--global--icon--color--regular);
|
|
296
331
|
--pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
|
|
297
332
|
--pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
|
|
298
333
|
--pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
|
|
@@ -356,9 +391,15 @@
|
|
|
356
391
|
--pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--inverse);
|
|
357
392
|
--pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--inverse);
|
|
358
393
|
--pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--inverse);
|
|
394
|
+
--pf-t--global--text--color--on-brand--accent--clicked: var(--pf-t--global--text--color--inverse);
|
|
395
|
+
--pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--inverse);
|
|
396
|
+
--pf-t--global--text--color--on-brand--accent--hover: var(--pf-t--global--text--color--inverse);
|
|
359
397
|
--pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
|
|
360
398
|
--pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
|
|
361
399
|
--pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
|
|
400
|
+
--pf-t--global--text--color--on-brand--subtle--clicked: var(--pf-t--global--text--color--regular);
|
|
401
|
+
--pf-t--global--text--color--on-brand--subtle--default: var(--pf-t--global--text--color--regular);
|
|
402
|
+
--pf-t--global--text--color--on-brand--subtle--hover: var(--pf-t--global--text--color--regular);
|
|
362
403
|
--pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
|
|
363
404
|
--pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
|
|
364
405
|
--pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
|
|
@@ -393,4 +434,11 @@
|
|
|
393
434
|
--pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked);
|
|
394
435
|
--pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--default);
|
|
395
436
|
--pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover);
|
|
437
|
+
--pf-t--global--text-decoration--color--hover: var(--pf-t--global--border--color--hover);
|
|
438
|
+
--pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--clicked);
|
|
439
|
+
--pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--default);
|
|
440
|
+
--pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--hover);
|
|
441
|
+
--pf-t--global--icon--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--clicked);
|
|
442
|
+
--pf-t--global--icon--color--brand--accent--default: var(--pf-t--global--color--brand--accent--default);
|
|
443
|
+
--pf-t--global--icon--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--hover);
|
|
396
444
|
}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Mon, 23 Mar 2026 14:56:21 GMT
|
|
4
4
|
|
|
5
5
|
@mixin pf-v6-tokens {
|
|
6
|
-
--pf-t--global--background--color--500: rgba(21, 21, 21, 0.
|
|
6
|
+
--pf-t--global--background--color--500: rgba(21, 21, 21, 0.4000);
|
|
7
7
|
--pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
|
|
8
|
+
--pf-t--global--background--color--700: rgba(199, 199, 199, 0.1000);
|
|
8
9
|
--pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
|
|
10
|
+
--pf-t--global--background--filter--glass--blur--primary: initial;
|
|
9
11
|
--pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000);
|
|
10
12
|
--pf-t--global--border--radius--0: 0px;
|
|
11
13
|
--pf-t--global--border--radius--100: 4px;
|
|
@@ -25,10 +27,10 @@
|
|
|
25
27
|
--pf-t--global--border--width--high-contrast--strong: 0px;
|
|
26
28
|
--pf-t--global--box-shadow--X--100: -10px;
|
|
27
29
|
--pf-t--global--box-shadow--X--200: -4px;
|
|
28
|
-
--pf-t--global--box-shadow--X--300: -
|
|
30
|
+
--pf-t--global--box-shadow--X--300: -2px;
|
|
29
31
|
--pf-t--global--box-shadow--X--400: 0px;
|
|
30
32
|
--pf-t--global--box-shadow--X--50: -20px;
|
|
31
|
-
--pf-t--global--box-shadow--X--500:
|
|
33
|
+
--pf-t--global--box-shadow--X--500: 2px;
|
|
32
34
|
--pf-t--global--box-shadow--X--600: 4px;
|
|
33
35
|
--pf-t--global--box-shadow--X--700: 10px;
|
|
34
36
|
--pf-t--global--box-shadow--X--800: 20px;
|
|
@@ -41,8 +43,8 @@
|
|
|
41
43
|
--pf-t--global--box-shadow--Y--600: 4px;
|
|
42
44
|
--pf-t--global--box-shadow--Y--700: 10px;
|
|
43
45
|
--pf-t--global--box-shadow--Y--800: 20px;
|
|
44
|
-
--pf-t--global--box-shadow--blur--100:
|
|
45
|
-
--pf-t--global--box-shadow--blur--200:
|
|
46
|
+
--pf-t--global--box-shadow--blur--100: 6px;
|
|
47
|
+
--pf-t--global--box-shadow--blur--200: 10px;
|
|
46
48
|
--pf-t--global--box-shadow--blur--300: 20px;
|
|
47
49
|
--pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500);
|
|
48
50
|
--pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000);
|
|
@@ -130,10 +132,13 @@
|
|
|
130
132
|
--pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--500);
|
|
131
133
|
--pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--30);
|
|
132
134
|
--pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40);
|
|
135
|
+
--pf-t--global--background--color--loading--skeleton--default: var(--pf-t--global--background--color--600);
|
|
136
|
+
--pf-t--global--background--color--loading--skeleton--subtle: var(--pf-t--global--background--color--700);
|
|
137
|
+
--pf-t--global--background--color--striped--row--default: var(--pf-t--global--background--color--700);
|
|
133
138
|
--pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600);
|
|
134
139
|
--pf-t--global--border--color--100: var(--pf-t--color--gray--30);
|
|
135
140
|
--pf-t--global--border--color--200: var(--pf-t--color--gray--40);
|
|
136
|
-
--pf-t--global--border--color--300: var(--pf-t--color--gray--
|
|
141
|
+
--pf-t--global--border--color--300: var(--pf-t--color--gray--45);
|
|
137
142
|
--pf-t--global--border--color--400: var(--pf-t--color--gray--60);
|
|
138
143
|
--pf-t--global--border--color--50: var(--pf-t--color--gray--20);
|
|
139
144
|
--pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
|
|
@@ -145,9 +150,9 @@
|
|
|
145
150
|
--pf-t--global--border--width--action--clicked: var(--pf-t--global--border--width--200);
|
|
146
151
|
--pf-t--global--border--width--action--default: var(--pf-t--global--border--width--100);
|
|
147
152
|
--pf-t--global--border--width--action--hover: var(--pf-t--global--border--width--200);
|
|
148
|
-
--pf-t--global--border--width--box--clicked: var(--pf-t--global--border--width--
|
|
153
|
+
--pf-t--global--border--width--box--clicked: var(--pf-t--global--border--width--300);
|
|
149
154
|
--pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100);
|
|
150
|
-
--pf-t--global--border--width--box--hover: var(--pf-t--global--border--width--
|
|
155
|
+
--pf-t--global--border--width--box--hover: var(--pf-t--global--border--width--200);
|
|
151
156
|
--pf-t--global--border--width--box--status--default: var(--pf-t--global--border--width--200);
|
|
152
157
|
--pf-t--global--border--width--box--status--read: var(--pf-t--global--border--width--100);
|
|
153
158
|
--pf-t--global--border--width--control--clicked: var(--pf-t--global--border--width--200);
|
|
@@ -221,9 +226,17 @@
|
|
|
221
226
|
--pf-t--global--color--brand--300: var(--pf-t--color--blue--60);
|
|
222
227
|
--pf-t--global--color--brand--400: var(--pf-t--color--blue--70);
|
|
223
228
|
--pf-t--global--color--brand--500: var(--pf-t--color--blue--80);
|
|
229
|
+
--pf-t--global--color--brand--accent--100: var(--pf-t--color--red--50);
|
|
230
|
+
--pf-t--global--color--brand--accent--200: var(--pf-t--color--red--60);
|
|
231
|
+
--pf-t--global--color--brand--accent--300: var(--pf-t--color--gray--60);
|
|
232
|
+
--pf-t--global--color--brand--accent--400: var(--pf-t--color--black);
|
|
233
|
+
--pf-t--global--color--brand--subtle--100: var(--pf-t--color--blue--10);
|
|
234
|
+
--pf-t--global--color--brand--subtle--200: var(--pf-t--color--blue--20);
|
|
235
|
+
--pf-t--global--color--brand--subtle--300: var(--pf-t--color--blue--40);
|
|
236
|
+
--pf-t--global--color--brand--subtle--400: var(--pf-t--color--blue--50);
|
|
224
237
|
--pf-t--global--color--disabled--100: var(--pf-t--color--gray--30);
|
|
225
238
|
--pf-t--global--color--disabled--200: var(--pf-t--color--gray--40);
|
|
226
|
-
--pf-t--global--color--disabled--300: var(--pf-t--color--gray--
|
|
239
|
+
--pf-t--global--color--disabled--300: var(--pf-t--color--gray--50);
|
|
227
240
|
--pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30);
|
|
228
241
|
--pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40);
|
|
229
242
|
--pf-t--global--color--favorite--300: var(--pf-t--color--yellow--70);
|
|
@@ -289,7 +302,7 @@
|
|
|
289
302
|
--pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80);
|
|
290
303
|
--pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
|
|
291
304
|
--pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70);
|
|
292
|
-
--pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--
|
|
305
|
+
--pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--70);
|
|
293
306
|
--pf-t--global--color--status--info--100: var(--pf-t--color--purple--50);
|
|
294
307
|
--pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
|
|
295
308
|
--pf-t--global--color--status--info--300: var(--pf-t--color--purple--70);
|
|
@@ -374,8 +387,8 @@
|
|
|
374
387
|
--pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200);
|
|
375
388
|
--pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--line--200);
|
|
376
389
|
--pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--line--200);
|
|
377
|
-
--pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--
|
|
378
|
-
--pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--
|
|
390
|
+
--pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
|
|
391
|
+
--pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
|
|
379
392
|
--pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600);
|
|
380
393
|
--pf-t--global--z-index--lg: var(--pf-t--global--z-index--400);
|
|
381
394
|
--pf-t--global--z-index--md: var(--pf-t--global--z-index--300);
|
|
@@ -400,8 +413,13 @@
|
|
|
400
413
|
--pf-t--global--background--color--secondary--clicked: var(--pf-t--global--background--color--300);
|
|
401
414
|
--pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
|
|
402
415
|
--pf-t--global--background--color--secondary--hover: var(--pf-t--global--background--color--300);
|
|
416
|
+
--pf-t--global--background--color--sticky--default: var(--pf-t--global--background--color--100);
|
|
417
|
+
--pf-t--global--border--color--brand--subtle--clicked: var(--pf-t--global--color--brand--subtle--300);
|
|
418
|
+
--pf-t--global--border--color--brand--subtle--default: var(--pf-t--global--color--brand--subtle--200);
|
|
419
|
+
--pf-t--global--border--color--brand--subtle--hover: var(--pf-t--global--color--brand--subtle--300);
|
|
403
420
|
--pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
|
|
404
|
-
--pf-t--global--border--color--control--
|
|
421
|
+
--pf-t--global--border--color--control--default: var(--pf-t--global--border--color--300);
|
|
422
|
+
--pf-t--global--border--color--control--read-only: var(--pf-t--global--border--color--100);
|
|
405
423
|
--pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
|
|
406
424
|
--pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
|
|
407
425
|
--pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
|
|
@@ -436,9 +454,19 @@
|
|
|
436
454
|
--pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
|
|
437
455
|
--pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
|
|
438
456
|
--pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
|
|
457
|
+
--pf-t--global--border--color--subtle: var(--pf-t--global--border--color--50);
|
|
458
|
+
--pf-t--global--border--radius--action--default: var(--pf-t--global--border--radius--pill);
|
|
459
|
+
--pf-t--global--border--radius--action--plain--default: var(--pf-t--global--border--radius--small);
|
|
460
|
+
--pf-t--global--border--radius--control--default: var(--pf-t--global--border--radius--small);
|
|
461
|
+
--pf-t--global--border--radius--control--form-element: var(--pf-t--global--border--radius--small);
|
|
462
|
+
--pf-t--global--border--radius--glass--default: initial;
|
|
463
|
+
--pf-t--global--border--width--glass--default: initial;
|
|
439
464
|
--pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--300);
|
|
440
465
|
--pf-t--global--color--brand--default: var(--pf-t--global--color--brand--200);
|
|
441
466
|
--pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--300);
|
|
467
|
+
--pf-t--global--color--brand--subtle--clicked: var(--pf-t--global--color--brand--subtle--200);
|
|
468
|
+
--pf-t--global--color--brand--subtle--default: var(--pf-t--global--color--brand--subtle--100);
|
|
469
|
+
--pf-t--global--color--brand--subtle--hover: var(--pf-t--global--color--brand--subtle--200);
|
|
442
470
|
--pf-t--global--color--favorite--clicked: var(--pf-t--global--color--favorite--200);
|
|
443
471
|
--pf-t--global--color--favorite--default: var(--pf-t--global--color--favorite--100);
|
|
444
472
|
--pf-t--global--color--favorite--hover: var(--pf-t--global--color--favorite--200);
|
|
@@ -567,13 +595,18 @@
|
|
|
567
595
|
--pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
|
|
568
596
|
--pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
|
|
569
597
|
--pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200);
|
|
598
|
+
--pf-t--global--text-decoration--color--default: var(--pf-t--global--border--color--300);
|
|
570
599
|
--pf-t--global--text-decoration--offset--default: var(--pf-t--global--spacer--xs);
|
|
571
600
|
--pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular);
|
|
601
|
+
--pf-t--global--text-decoration--width--hover: var(--pf-t--global--border--width--strong);
|
|
572
602
|
--pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
|
|
603
|
+
--pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--secondary--default);
|
|
604
|
+
--pf-t--global--background--color--glass--primary--default: initial;
|
|
573
605
|
--pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
|
|
574
606
|
--pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked);
|
|
575
607
|
--pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default);
|
|
576
608
|
--pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover);
|
|
609
|
+
--pf-t--global--border--color--glass--default: initial;
|
|
577
610
|
--pf-t--global--border--color--main--default: var(--pf-t--global--background--color--primary--default);
|
|
578
611
|
--pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
|
|
579
612
|
--pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
|
|
@@ -587,6 +620,9 @@
|
|
|
587
620
|
--pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked);
|
|
588
621
|
--pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--default);
|
|
589
622
|
--pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--hover);
|
|
623
|
+
--pf-t--global--color--brand--accent--clicked: var(--pf-t--global--color--brand--clicked);
|
|
624
|
+
--pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--default);
|
|
625
|
+
--pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--hover);
|
|
590
626
|
--pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
|
|
591
627
|
--pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
|
|
592
628
|
--pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
|
|
@@ -627,9 +663,15 @@
|
|
|
627
663
|
--pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--regular);
|
|
628
664
|
--pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--regular);
|
|
629
665
|
--pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--regular);
|
|
666
|
+
--pf-t--global--icon--color--on-brand--accent--clicked: var(--pf-t--global--icon--color--inverse);
|
|
667
|
+
--pf-t--global--icon--color--on-brand--accent--default: var(--pf-t--global--icon--color--inverse);
|
|
668
|
+
--pf-t--global--icon--color--on-brand--accent--hover: var(--pf-t--global--icon--color--inverse);
|
|
630
669
|
--pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse);
|
|
631
670
|
--pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
|
|
632
671
|
--pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse);
|
|
672
|
+
--pf-t--global--icon--color--on-brand--subtle--clicked: var(--pf-t--global--icon--color--regular);
|
|
673
|
+
--pf-t--global--icon--color--on-brand--subtle--default: var(--pf-t--global--icon--color--regular);
|
|
674
|
+
--pf-t--global--icon--color--on-brand--subtle--hover: var(--pf-t--global--icon--color--regular);
|
|
633
675
|
--pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
|
|
634
676
|
--pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
|
|
635
677
|
--pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
|
|
@@ -702,9 +744,15 @@
|
|
|
702
744
|
--pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--regular);
|
|
703
745
|
--pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--regular);
|
|
704
746
|
--pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--regular);
|
|
747
|
+
--pf-t--global--text--color--on-brand--accent--clicked: var(--pf-t--global--text--color--inverse);
|
|
748
|
+
--pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--inverse);
|
|
749
|
+
--pf-t--global--text--color--on-brand--accent--hover: var(--pf-t--global--text--color--inverse);
|
|
705
750
|
--pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse);
|
|
706
751
|
--pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
|
|
707
752
|
--pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
|
|
753
|
+
--pf-t--global--text--color--on-brand--subtle--clicked: var(--pf-t--global--text--color--regular);
|
|
754
|
+
--pf-t--global--text--color--on-brand--subtle--default: var(--pf-t--global--text--color--regular);
|
|
755
|
+
--pf-t--global--text--color--on-brand--subtle--hover: var(--pf-t--global--text--color--regular);
|
|
708
756
|
--pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle);
|
|
709
757
|
--pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
|
|
710
758
|
--pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
|
|
@@ -739,5 +787,12 @@
|
|
|
739
787
|
--pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse);
|
|
740
788
|
--pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
|
|
741
789
|
--pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
|
|
790
|
+
--pf-t--global--text-decoration--color--hover: var(--pf-t--global--border--color--hover);
|
|
791
|
+
--pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--clicked);
|
|
792
|
+
--pf-t--global--border--color--brand--accent--default: var(--pf-t--global--color--brand--accent--default);
|
|
793
|
+
--pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--hover);
|
|
742
794
|
--pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
|
|
795
|
+
--pf-t--global--icon--color--brand--accent--clicked: var(--pf-t--global--color--brand--accent--clicked);
|
|
796
|
+
--pf-t--global--icon--color--brand--accent--default: var(--pf-t--global--color--brand--accent--default);
|
|
797
|
+
--pf-t--global--icon--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--hover);
|
|
743
798
|
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly
|
|
3
|
+
// Generated on Mon, 23 Mar 2026 14:56:21 GMT
|
|
4
|
+
|
|
5
|
+
// Only tokens that differ from base theme (19 tokens)
|
|
6
|
+
@mixin pf-v6-tokens {
|
|
7
|
+
--pf-t--global--background--color--glass--primary--default: rgba(41, 41, 41, 0.5000);
|
|
8
|
+
--pf-t--global--background--color--primary--clicked: rgba(56, 56, 56, 0.5000);
|
|
9
|
+
--pf-t--global--background--color--primary--default: rgba(41, 41, 41, 0.5000);
|
|
10
|
+
--pf-t--global--background--color--primary--hover: rgba(56, 56, 56, 0.5000);
|
|
11
|
+
--pf-t--global--background--color--secondary--clicked: rgba(41, 41, 41, 0.6000);
|
|
12
|
+
--pf-t--global--background--color--secondary--default: rgba(21, 21, 21, 0.6000);
|
|
13
|
+
--pf-t--global--background--color--secondary--hover: rgba(41, 41, 41, 0.6000);
|
|
14
|
+
--pf-t--global--background--filter--glass--blur--primary: blur(16px);
|
|
15
|
+
--pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--500);
|
|
16
|
+
--pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--500);
|
|
17
|
+
--pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--action--plain--clicked);
|
|
18
|
+
--pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--action--plain--hover);
|
|
19
|
+
--pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--300);
|
|
20
|
+
--pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--200);
|
|
21
|
+
--pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--300);
|
|
22
|
+
--pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50);
|
|
23
|
+
--pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
|
|
24
|
+
--pf-t--global--border--color--subtle: var(--pf-t--global--dark--border--color--50);
|
|
25
|
+
--pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
|
|
26
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly
|
|
3
|
+
// Generated on Mon, 23 Mar 2026 14:56:21 GMT
|
|
4
|
+
|
|
5
|
+
// Only tokens that differ from base theme (15 tokens)
|
|
6
|
+
@mixin pf-v6-tokens {
|
|
7
|
+
--pf-t--global--background--color--glass--primary--default: rgba(255, 255, 255, 0.5000);
|
|
8
|
+
--pf-t--global--background--color--primary--clicked: rgba(199, 199, 199, 0.3000);
|
|
9
|
+
--pf-t--global--background--color--primary--default: rgba(255, 255, 255, 0.6000);
|
|
10
|
+
--pf-t--global--background--color--primary--hover: rgba(199, 199, 199, 0.3000);
|
|
11
|
+
--pf-t--global--background--color--secondary--clicked: rgba(163, 163, 163, 0.3000);
|
|
12
|
+
--pf-t--global--background--color--secondary--default: rgba(199, 199, 199, 0.3000);
|
|
13
|
+
--pf-t--global--background--color--secondary--hover: rgba(163, 163, 163, 0.3000);
|
|
14
|
+
--pf-t--global--background--filter--glass--blur--primary: blur(16px);
|
|
15
|
+
--pf-t--global--border--width--main--default: var(--pf-t--global--border--width--100);
|
|
16
|
+
--pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--action--plain--clicked);
|
|
17
|
+
--pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--action--plain--hover);
|
|
18
|
+
--pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
|
|
19
|
+
--pf-t--global--border--radius--glass--default: var(--pf-t--global--border--radius--medium);
|
|
20
|
+
--pf-t--global--border--width--glass--default: var(--pf-t--global--border--width--regular);
|
|
21
|
+
--pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
|
|
22
|
+
}
|
|
@@ -1,6 +1,18 @@
|
|
|
1
|
+
@use '../../sass-utilities/init' as *;
|
|
2
|
+
|
|
1
3
|
// LOCAL TOKENS
|
|
2
4
|
|
|
3
5
|
@mixin pf-v6-tokens {
|
|
6
|
+
// temporary until we have updates from design
|
|
7
|
+
// new
|
|
8
|
+
--pf-t--global--text-decoration--color--default: var(--pf-t--global--border--color--default);
|
|
9
|
+
--pf-t--global--text-decoration--color--hover: currentcolor; // could also use var(--pf-t--global--text--color--link--hover);
|
|
10
|
+
--pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
|
|
11
|
+
|
|
12
|
+
// changed
|
|
13
|
+
--pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
|
|
14
|
+
--pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
|
|
15
|
+
|
|
4
16
|
// TODO Maintaining these in addition to the h1-h6 sizes
|
|
5
17
|
--pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
|
|
6
18
|
--pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
|
|
@@ -123,5 +135,10 @@
|
|
|
123
135
|
|
|
124
136
|
// stylelint-disable custom-property-pattern
|
|
125
137
|
--pf-t--temp--dev--tbd: #BC11E0;
|
|
138
|
+
// stylelint-enable
|
|
126
139
|
|
|
140
|
+
// Glass theme tokens
|
|
141
|
+
&:where(.pf-v6-theme-glass) {
|
|
142
|
+
--pf-t--global--box-shadow--glass--default: var(--pf-t--global--box-shadow--md);
|
|
143
|
+
}
|
|
127
144
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
// Do not edit directly
|
|
3
|
-
// Generated on
|
|
3
|
+
// Generated on Mon, 23 Mar 2026 14:56:21 GMT
|
|
4
4
|
|
|
5
5
|
@mixin pf-v6-tokens {
|
|
6
6
|
--pf-t--color--black: #000000;
|
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
--pf-t--color--gray--20: #e0e0e0;
|
|
17
17
|
--pf-t--color--gray--30: #c7c7c7;
|
|
18
18
|
--pf-t--color--gray--40: #a3a3a3;
|
|
19
|
+
--pf-t--color--gray--45: #8c8c8c;
|
|
19
20
|
--pf-t--color--gray--50: #707070;
|
|
20
21
|
--pf-t--color--gray--60: #4d4d4d;
|
|
21
22
|
--pf-t--color--gray--70: #383838;
|
|
@@ -46,6 +47,7 @@
|
|
|
46
47
|
--pf-t--color--purple--60: #3d2785;
|
|
47
48
|
--pf-t--color--purple--70: #21134d;
|
|
48
49
|
--pf-t--color--purple--80: #1b0d33;
|
|
50
|
+
--pf-t--color--red--05: #fef0f0;
|
|
49
51
|
--pf-t--color--red--10: #fce3e3;
|
|
50
52
|
--pf-t--color--red--20: #fbc5c5;
|
|
51
53
|
--pf-t--color--red--30: #f9a8a8;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly
|
|
3
|
+
// Generated on Mon, 23 Mar 2026 14:56:21 GMT
|
|
4
|
+
|
|
5
|
+
// Only tokens that differ from base theme (14 tokens)
|
|
6
|
+
@mixin pf-v6-tokens {
|
|
7
|
+
--pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--400);
|
|
8
|
+
--pf-t--global--border--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--400);
|
|
9
|
+
--pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--400);
|
|
10
|
+
--pf-t--global--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--200);
|
|
11
|
+
--pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--100);
|
|
12
|
+
--pf-t--global--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--200);
|
|
13
|
+
--pf-t--global--icon--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--300);
|
|
14
|
+
--pf-t--global--icon--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--300);
|
|
15
|
+
--pf-t--global--icon--color--on-brand--accent--clicked: var(--pf-t--global--icon--color--regular);
|
|
16
|
+
--pf-t--global--icon--color--on-brand--accent--default: var(--pf-t--global--icon--color--regular);
|
|
17
|
+
--pf-t--global--icon--color--on-brand--accent--hover: var(--pf-t--global--icon--color--regular);
|
|
18
|
+
--pf-t--global--text--color--on-brand--accent--clicked: var(--pf-t--global--text--color--regular);
|
|
19
|
+
--pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--regular);
|
|
20
|
+
--pf-t--global--text--color--on-brand--accent--hover: var(--pf-t--global--text--color--regular);
|
|
21
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
|
|
2
|
+
// Do not edit directly
|
|
3
|
+
// Generated on Mon, 23 Mar 2026 14:56:21 GMT
|
|
4
|
+
|
|
5
|
+
// Only tokens that differ from base theme (33 tokens)
|
|
6
|
+
@mixin pf-v6-tokens {
|
|
7
|
+
--pf-t--global--background--color--glass--primary--default: rgba(41, 41, 41, 0.5000);
|
|
8
|
+
--pf-t--global--background--color--primary--clicked: rgba(56, 56, 56, 0.5000);
|
|
9
|
+
--pf-t--global--background--color--primary--default: rgba(41, 41, 41, 0.5000);
|
|
10
|
+
--pf-t--global--background--color--primary--hover: rgba(56, 56, 56, 0.5000);
|
|
11
|
+
--pf-t--global--background--color--secondary--clicked: rgba(41, 41, 41, 0.6000);
|
|
12
|
+
--pf-t--global--background--color--secondary--default: rgba(21, 21, 21, 0.6000);
|
|
13
|
+
--pf-t--global--background--color--secondary--hover: rgba(41, 41, 41, 0.6000);
|
|
14
|
+
--pf-t--global--background--filter--glass--blur--primary: blur(16px);
|
|
15
|
+
--pf-t--global--background--color--control--default: var(--pf-t--global--dark--background--color--500);
|
|
16
|
+
--pf-t--global--background--color--control--read-only: var(--pf-t--global--dark--background--color--500);
|
|
17
|
+
--pf-t--global--background--color--action--plain--alt--clicked: var(--pf-t--global--background--color--action--plain--clicked);
|
|
18
|
+
--pf-t--global--background--color--action--plain--alt--hover: var(--pf-t--global--background--color--action--plain--hover);
|
|
19
|
+
--pf-t--global--background--color--floating--clicked: var(--pf-t--global--dark--background--color--300);
|
|
20
|
+
--pf-t--global--background--color--floating--default: var(--pf-t--global--dark--background--color--200);
|
|
21
|
+
--pf-t--global--background--color--floating--hover: var(--pf-t--global--dark--background--color--300);
|
|
22
|
+
--pf-t--global--border--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--400);
|
|
23
|
+
--pf-t--global--border--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--400);
|
|
24
|
+
--pf-t--global--border--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--400);
|
|
25
|
+
--pf-t--global--border--color--control--read-only: var(--pf-t--global--dark--border--color--50);
|
|
26
|
+
--pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
|
|
27
|
+
--pf-t--global--border--color--subtle: var(--pf-t--global--dark--border--color--50);
|
|
28
|
+
--pf-t--global--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--200);
|
|
29
|
+
--pf-t--global--color--brand--accent--default: var(--pf-t--global--dark--color--brand--accent--100);
|
|
30
|
+
--pf-t--global--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--200);
|
|
31
|
+
--pf-t--global--icon--color--brand--accent--clicked: var(--pf-t--global--dark--color--brand--accent--300);
|
|
32
|
+
--pf-t--global--icon--color--brand--accent--hover: var(--pf-t--global--dark--color--brand--accent--300);
|
|
33
|
+
--pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
|
|
34
|
+
--pf-t--global--icon--color--on-brand--accent--clicked: var(--pf-t--global--icon--color--regular);
|
|
35
|
+
--pf-t--global--icon--color--on-brand--accent--default: var(--pf-t--global--icon--color--regular);
|
|
36
|
+
--pf-t--global--icon--color--on-brand--accent--hover: var(--pf-t--global--icon--color--regular);
|
|
37
|
+
--pf-t--global--text--color--on-brand--accent--clicked: var(--pf-t--global--text--color--regular);
|
|
38
|
+
--pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--regular);
|
|
39
|
+
--pf-t--global--text--color--on-brand--accent--hover: var(--pf-t--global--text--color--regular);
|
|
40
|
+
}
|