@patternfly/react-tokens
Version:
This library provides access to the design tokens of PatternFly 4 from JavaScript
519 lines • 17.7 kB
TypeScript
export const c_toggle_group: {
".pf-v6-c-toggle-group": {
"c_toggle_group__button_PaddingBlockStart": {
"name": "--pf-v6-c-toggle-group__button--PaddingBlockStart",
"value": "0.5rem",
"values": [
"--pf-t--global--spacer--sm",
"--pf-t--global--spacer--200",
"0.5rem"
]
},
"c_toggle_group__button_PaddingInlineEnd": {
"name": "--pf-v6-c-toggle-group__button--PaddingInlineEnd",
"value": "1rem",
"values": [
"--pf-t--global--spacer--md",
"--pf-t--global--spacer--300",
"1rem"
]
},
"c_toggle_group__button_PaddingBlockEnd": {
"name": "--pf-v6-c-toggle-group__button--PaddingBlockEnd",
"value": "0.5rem",
"values": [
"--pf-t--global--spacer--sm",
"--pf-t--global--spacer--200",
"0.5rem"
]
},
"c_toggle_group__button_PaddingInlineStart": {
"name": "--pf-v6-c-toggle-group__button--PaddingInlineStart",
"value": "1rem",
"values": [
"--pf-t--global--spacer--md",
"--pf-t--global--spacer--300",
"1rem"
]
},
"c_toggle_group__button_FontSize": {
"name": "--pf-v6-c-toggle-group__button--FontSize",
"value": "0.875rem",
"values": [
"--pf-t--global--font--size--body--default",
"--pf-t--global--font--size--sm",
"--pf-t--global--font--size--200",
"0.875rem"
]
},
"c_toggle_group__button_LineHeight": {
"name": "--pf-v6-c-toggle-group__button--LineHeight",
"value": "1.5",
"values": [
"--pf-t--global--font--line-height--body",
"--pf-t--global--font--line-height--200",
"1.5"
]
},
"c_toggle_group__button_Color": {
"name": "--pf-v6-c-toggle-group__button--Color",
"value": "#151515",
"values": [
"--pf-t--global--text--color--regular",
"--pf-t--global--text--color--100",
"--pf-t--color--gray--95",
"#151515"
]
},
"c_toggle_group__button_BackgroundColor": {
"name": "--pf-v6-c-toggle-group__button--BackgroundColor",
"value": "rgba(255, 255, 255, 0.0000)",
"values": [
"--pf-t--global--background--color--action--plain--default",
"rgba(255, 255, 255, 0.0000)"
]
},
"c_toggle_group__button_ZIndex": {
"name": "--pf-v6-c-toggle-group__button--ZIndex",
"value": "auto"
},
"c_toggle_group__button_hover_BackgroundColor": {
"name": "--pf-v6-c-toggle-group__button--hover--BackgroundColor",
"value": "#f2f2f2",
"values": [
"--pf-t--global--background--color--primary--hover",
"--pf-t--global--background--color--200",
"--pf-t--color--gray--10",
"#f2f2f2"
]
},
"c_toggle_group__button_hover_ZIndex": {
"name": "--pf-v6-c-toggle-group__button--hover--ZIndex",
"value": "100",
"values": [
"--pf-t--global--z-index--xs",
"--pf-t--global--z-index--100",
"100"
]
},
"c_toggle_group__button_hover_before_BorderColor": {
"name": "--pf-v6-c-toggle-group__button--hover--before--BorderColor",
"value": "#c7c7c7",
"values": [
"--pf-t--global--border--color--default",
"--pf-t--global--border--color--100",
"--pf-t--color--gray--30",
"#c7c7c7"
]
},
"c_toggle_group__button_before_BorderWidth": {
"name": "--pf-v6-c-toggle-group__button--before--BorderWidth",
"value": "1px",
"values": [
"--pf-t--global--border--width--control--default",
"--pf-t--global--border--width--100",
"1px"
]
},
"c_toggle_group__button_before_BorderColor": {
"name": "--pf-v6-c-toggle-group__button--before--BorderColor",
"value": "#c7c7c7",
"values": [
"--pf-t--global--border--color--default",
"--pf-t--global--border--color--100",
"--pf-t--color--gray--30",
"#c7c7c7"
]
},
"c_toggle_group__item_item_MarginInlineStart": {
"name": "--pf-v6-c-toggle-group__item--item--MarginInlineStart",
"value": "calc(-1 * 1px)",
"values": [
"calc(-1 * --pf-t--global--border--width--control--default)",
"calc(-1 * --pf-t--global--border--width--100)",
"calc(-1 * 1px)"
]
},
"c_toggle_group__item_first_child__button_BorderStartStartRadius": {
"name": "--pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius",
"value": "4px",
"values": [
"--pf-t--global--border--radius--tiny",
"--pf-t--global--border--radius--100",
"4px"
]
},
"c_toggle_group__item_first_child__button_BorderEndStartRadius": {
"name": "--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius",
"value": "4px",
"values": [
"--pf-t--global--border--radius--tiny",
"--pf-t--global--border--radius--100",
"4px"
]
},
"c_toggle_group__item_last_child__button_BorderStartEndRadius": {
"name": "--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius",
"value": "4px",
"values": [
"--pf-t--global--border--radius--tiny",
"--pf-t--global--border--radius--100",
"4px"
]
},
"c_toggle_group__item_last_child__button_BorderEndEndRadius": {
"name": "--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius",
"value": "4px",
"values": [
"--pf-t--global--border--radius--tiny",
"--pf-t--global--border--radius--100",
"4px"
]
},
"c_toggle_group__icon_text_MarginInlineStart": {
"name": "--pf-v6-c-toggle-group__icon--text--MarginInlineStart",
"value": "0.5rem",
"values": [
"--pf-t--global--spacer--sm",
"--pf-t--global--spacer--200",
"0.5rem"
]
},
"c_toggle_group__button_m_selected_BackgroundColor": {
"name": "--pf-v6-c-toggle-group__button--m-selected--BackgroundColor",
"value": "#0066cc",
"values": [
"--pf-t--global--color--brand--default",
"--pf-t--global--color--brand--200",
"--pf-t--color--blue--50",
"#0066cc"
]
},
"c_toggle_group__button_m_selected_Color": {
"name": "--pf-v6-c-toggle-group__button--m-selected--Color",
"value": "#ffffff",
"values": [
"--pf-t--global--text--color--on-brand--default",
"--pf-t--global--text--color--inverse",
"--pf-t--global--text--color--300",
"--pf-t--color--white",
"#ffffff"
]
},
"c_toggle_group__button_m_selected_before_BorderColor": {
"name": "--pf-v6-c-toggle-group__button--m-selected--before--BorderColor",
"value": "#0066cc",
"values": [
"--pf-t--global--border--color--clicked",
"--pf-t--global--color--brand--200",
"--pf-t--color--blue--50",
"#0066cc"
]
},
"c_toggle_group__button_m_selected_selected_before_BorderInlineStartColor": {
"name": "--pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor",
"value": "#c7c7c7",
"values": [
"--pf-t--global--border--color--default",
"--pf-t--global--border--color--100",
"--pf-t--color--gray--30",
"#c7c7c7"
]
},
"c_toggle_group__button_m_selected_ZIndex": {
"name": "--pf-v6-c-toggle-group__button--m-selected--ZIndex",
"value": "100",
"values": [
"--pf-t--global--z-index--xs",
"--pf-t--global--z-index--100",
"100"
]
},
"c_toggle_group__button_disabled_BackgroundColor": {
"name": "--pf-v6-c-toggle-group__button--disabled--BackgroundColor",
"value": "#c7c7c7",
"values": [
"--pf-t--global--background--color--disabled--default",
"--pf-t--global--color--disabled--100",
"--pf-t--color--gray--30",
"#c7c7c7"
]
},
"c_toggle_group__button_disabled_Color": {
"name": "--pf-v6-c-toggle-group__button--disabled--Color",
"value": "#4d4d4d",
"values": [
"--pf-t--global--text--color--on-disabled",
"--pf-t--global--color--disabled--300",
"--pf-t--color--gray--60",
"#4d4d4d"
]
},
"c_toggle_group__button_disabled_before_BorderColor": {
"name": "--pf-v6-c-toggle-group__button--disabled--before--BorderColor",
"value": "#a3a3a3",
"values": [
"--pf-t--global--border--color--disabled",
"--pf-t--global--color--disabled--200",
"--pf-t--color--gray--40",
"#a3a3a3"
]
},
"c_toggle_group__button_disabled_disabled_before_BorderInlineStartColor": {
"name": "--pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor",
"value": "#c7c7c7",
"values": [
"--pf-t--global--border--color--default",
"--pf-t--global--border--color--100",
"--pf-t--color--gray--30",
"#c7c7c7"
]
},
"c_toggle_group__button_disabled_ZIndex": {
"name": "--pf-v6-c-toggle-group__button--disabled--ZIndex",
"value": "100",
"values": [
"--pf-t--global--z-index--xs",
"--pf-t--global--z-index--100",
"100"
]
},
"c_toggle_group_m_compact__button_PaddingBlockStart": {
"name": "--pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart",
"value": "0"
},
"c_toggle_group_m_compact__button_PaddingInlineEnd": {
"name": "--pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd",
"value": "0.5rem",
"values": [
"--pf-t--global--spacer--sm",
"--pf-t--global--spacer--200",
"0.5rem"
]
},
"c_toggle_group_m_compact__button_PaddingBlockEnd": {
"name": "--pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd",
"value": "0"
},
"c_toggle_group_m_compact__button_PaddingInlineStart": {
"name": "--pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart",
"value": "0.5rem",
"values": [
"--pf-t--global--spacer--sm",
"--pf-t--global--spacer--200",
"0.5rem"
]
},
"c_toggle_group_m_compact__button_FontSize": {
"name": "--pf-v6-c-toggle-group--m-compact__button--FontSize",
"value": "0.875rem",
"values": [
"--pf-t--global--font--size--body--default",
"--pf-t--global--font--size--sm",
"--pf-t--global--font--size--200",
"0.875rem"
]
}
},
".pf-v6-c-toggle-group.pf-m-compact": {
"c_toggle_group__button_PaddingBlockStart": {
"name": "--pf-v6-c-toggle-group__button--PaddingBlockStart",
"value": "0",
"values": [
"--pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart",
"0"
]
},
"c_toggle_group__button_PaddingInlineEnd": {
"name": "--pf-v6-c-toggle-group__button--PaddingInlineEnd",
"value": "0.5rem",
"values": [
"--pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd",
"--pf-t--global--spacer--sm",
"--pf-t--global--spacer--200",
"0.5rem"
]
},
"c_toggle_group__button_PaddingBlockEnd": {
"name": "--pf-v6-c-toggle-group__button--PaddingBlockEnd",
"value": "0",
"values": [
"--pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd",
"0"
]
},
"c_toggle_group__button_PaddingInlineStart": {
"name": "--pf-v6-c-toggle-group__button--PaddingInlineStart",
"value": "0.5rem",
"values": [
"--pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart",
"--pf-t--global--spacer--sm",
"--pf-t--global--spacer--200",
"0.5rem"
]
},
"c_toggle_group__button_FontSize": {
"name": "--pf-v6-c-toggle-group__button--FontSize",
"value": "0.875rem",
"values": [
"--pf-v6-c-toggle-group--m-compact__button--FontSize",
"--pf-t--global--font--size--body--default",
"--pf-t--global--font--size--sm",
"--pf-t--global--font--size--200",
"0.875rem"
]
}
},
".pf-v6-c-toggle-group__button:is(:hover, :focus)": {
"c_toggle_group__button_BackgroundColor": {
"name": "--pf-v6-c-toggle-group__button--BackgroundColor",
"value": "#f2f2f2",
"values": [
"--pf-v6-c-toggle-group__button--hover--BackgroundColor",
"--pf-t--global--background--color--primary--hover",
"--pf-t--global--background--color--200",
"--pf-t--color--gray--10",
"#f2f2f2"
]
},
"c_toggle_group__button_ZIndex": {
"name": "--pf-v6-c-toggle-group__button--ZIndex",
"value": "100",
"values": [
"--pf-v6-c-toggle-group__button--hover--ZIndex",
"--pf-t--global--z-index--xs",
"--pf-t--global--z-index--100",
"100"
]
},
"c_toggle_group__button_before_BorderColor": {
"name": "--pf-v6-c-toggle-group__button--before--BorderColor",
"value": "#c7c7c7",
"values": [
"--pf-v6-c-toggle-group__button--hover--before--BorderColor",
"--pf-t--global--border--color--default",
"--pf-t--global--border--color--100",
"--pf-t--color--gray--30",
"#c7c7c7"
]
}
},
".pf-v6-c-toggle-group__button.pf-m-selected": {
"c_toggle_group__button_BackgroundColor": {
"name": "--pf-v6-c-toggle-group__button--BackgroundColor",
"value": "#0066cc",
"values": [
"--pf-v6-c-toggle-group__button--m-selected--BackgroundColor",
"--pf-t--global--color--brand--default",
"--pf-t--global--color--brand--200",
"--pf-t--color--blue--50",
"#0066cc"
]
},
"c_toggle_group__button_Color": {
"name": "--pf-v6-c-toggle-group__button--Color",
"value": "#ffffff, inherit",
"values": [
"var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit)",
"--pf-t--global--text--color--on-brand--default, inherit",
"--pf-t--global--text--color--inverse, inherit",
"--pf-t--global--text--color--300, inherit",
"--pf-t--color--white, inherit",
"#ffffff, inherit"
]
},
"c_toggle_group__button_ZIndex": {
"name": "--pf-v6-c-toggle-group__button--ZIndex",
"value": "100",
"values": [
"--pf-v6-c-toggle-group__button--m-selected--ZIndex",
"--pf-t--global--z-index--xs",
"--pf-t--global--z-index--100",
"100"
]
},
"c_toggle_group__button_before_BorderColor": {
"name": "--pf-v6-c-toggle-group__button--before--BorderColor",
"value": "#0066cc",
"values": [
"--pf-v6-c-toggle-group__button--m-selected--before--BorderColor",
"--pf-t--global--border--color--clicked",
"--pf-t--global--color--brand--200",
"--pf-t--color--blue--50",
"#0066cc"
]
}
},
".pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled)": {
"c_toggle_group__button_BackgroundColor": {
"name": "--pf-v6-c-toggle-group__button--BackgroundColor",
"value": "#c7c7c7",
"values": [
"--pf-v6-c-toggle-group__button--disabled--BackgroundColor",
"--pf-t--global--background--color--disabled--default",
"--pf-t--global--color--disabled--100",
"--pf-t--color--gray--30",
"#c7c7c7"
]
},
"c_toggle_group__button_Color": {
"name": "--pf-v6-c-toggle-group__button--Color",
"value": "#4d4d4d",
"values": [
"--pf-v6-c-toggle-group__button--disabled--Color",
"--pf-t--global--text--color--on-disabled",
"--pf-t--global--color--disabled--300",
"--pf-t--color--gray--60",
"#4d4d4d"
]
},
"c_toggle_group__button_ZIndex": {
"name": "--pf-v6-c-toggle-group__button--ZIndex",
"value": "100",
"values": [
"--pf-v6-c-toggle-group__button--disabled--ZIndex",
"--pf-t--global--z-index--xs",
"--pf-t--global--z-index--100",
"100"
]
},
"c_toggle_group__button_before_BorderColor": {
"name": "--pf-v6-c-toggle-group__button--before--BorderColor",
"value": "#a3a3a3",
"values": [
"--pf-v6-c-toggle-group__button--disabled--before--BorderColor",
"--pf-t--global--border--color--disabled",
"--pf-t--global--color--disabled--200",
"--pf-t--color--gray--40",
"#a3a3a3"
]
}
},
".pf-v6-c-toggle-group__item:has(.pf-m-selected) + .pf-v6-c-toggle-group__item:has(.pf-m-selected)": {
"c_toggle_group__button_before_BorderInlineStartColor": {
"name": "--pf-v6-c-toggle-group__button--before--BorderInlineStartColor",
"value": "#c7c7c7",
"values": [
"--pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor",
"--pf-t--global--border--color--default",
"--pf-t--global--border--color--100",
"--pf-t--color--gray--30",
"#c7c7c7"
]
}
},
".pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled)": {
"c_toggle_group__button_before_BorderInlineStartColor": {
"name": "--pf-v6-c-toggle-group__button--before--BorderInlineStartColor",
"value": "#c7c7c7",
"values": [
"--pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor",
"--pf-t--global--border--color--default",
"--pf-t--global--border--color--100",
"--pf-t--color--gray--30",
"#c7c7c7"
]
}
}
};
export default c_toggle_group;