@patternfly/react-tokens
Version:
This library provides access to the design tokens of PatternFly 4 from JavaScript
330 lines • 12 kB
TypeScript
export const c_switch: {
".pf-v6-c-switch": {
"c_switch_FontSize": {
"name": "--pf-v6-c-switch--FontSize",
"value": "0.875rem",
"values": [
"--pf-t--global--font--size--sm",
"--pf-t--global--font--size--200",
"0.875rem"
]
},
"c_switch_ColumnGap": {
"name": "--pf-v6-c-switch--ColumnGap",
"value": "0.5rem",
"values": [
"--pf-t--global--spacer--sm",
"--pf-t--global--spacer--200",
"0.5rem"
]
},
"c_switch__toggle_icon_FontSize": {
"name": "--pf-v6-c-switch__toggle-icon--FontSize",
"value": "calc(0.875rem * .625)",
"values": [
"calc(--pf-v6-c-switch--FontSize * .625)",
"calc(--pf-t--global--font--size--sm * .625)",
"calc(--pf-t--global--font--size--200 * .625)",
"calc(0.875rem * .625)"
]
},
"c_switch__toggle_icon_Color": {
"name": "--pf-v6-c-switch__toggle-icon--Color",
"value": "#ffffff",
"values": [
"--pf-t--global--icon--color--on-brand--default",
"--pf-t--global--icon--color--inverse",
"--pf-t--global--icon--color--300",
"--pf-t--color--white",
"#ffffff"
]
},
"c_switch__toggle_icon_InsetInlineStart": {
"name": "--pf-v6-c-switch__toggle-icon--InsetInlineStart",
"value": "calc(0.875rem * .4)",
"values": [
"calc(--pf-v6-c-switch--FontSize * .4)",
"calc(--pf-t--global--font--size--sm * .4)",
"calc(--pf-t--global--font--size--200 * .4)",
"calc(0.875rem * .4)"
]
},
"c_switch__toggle_icon_Offset": {
"name": "--pf-v6-c-switch__toggle-icon--Offset",
"value": "0.125rem"
},
"c_switch__input_disabled__toggle_icon_Color": {
"name": "--pf-v6-c-switch__input--disabled__toggle-icon--Color",
"value": "#a3a3a3",
"values": [
"--pf-t--global--icon--color--disabled",
"--pf-t--global--color--disabled--200",
"--pf-t--color--gray--40",
"#a3a3a3"
]
},
"c_switch_LineHeight": {
"name": "--pf-v6-c-switch--LineHeight",
"value": "1.5",
"values": [
"--pf-t--global--font--line-height--body",
"--pf-t--global--font--line-height--200",
"1.5"
]
},
"c_switch_Height": {
"name": "--pf-v6-c-switch--Height",
"value": "auto"
},
"c_switch__input_checked__toggle_BackgroundColor": {
"name": "--pf-v6-c-switch__input--checked__toggle--BackgroundColor",
"value": "#0066cc",
"values": [
"--pf-t--global--color--brand--default",
"--pf-t--global--color--brand--200",
"--pf-t--color--blue--50",
"#0066cc"
]
},
"c_switch__input_checked__toggle_before_TranslateX": {
"name": "--pf-v6-c-switch__input--checked__toggle--before--TranslateX",
"value": "calc(100% + 0.125rem)",
"values": [
"calc(100% + --pf-v6-c-switch__toggle-icon--Offset)",
"calc(100% + 0.125rem)"
]
},
"c_switch__input_checked__toggle_BorderWidth": {
"name": "--pf-v6-c-switch__input--checked__toggle--BorderWidth",
"value": "0"
},
"c_switch__input_checked__label_Color": {
"name": "--pf-v6-c-switch__input--checked__label--Color",
"value": "#151515",
"values": [
"--pf-t--global--text--color--regular",
"--pf-t--global--text--color--100",
"--pf-t--color--gray--95",
"#151515"
]
},
"c_switch__input_not_checked__label_Color": {
"name": "--pf-v6-c-switch__input--not-checked__label--Color",
"value": "#4d4d4d",
"values": [
"--pf-t--global--text--color--subtle",
"--pf-t--global--text--color--200",
"--pf-t--color--gray--60",
"#4d4d4d"
]
},
"c_switch__input_disabled__label_Color": {
"name": "--pf-v6-c-switch__input--disabled__label--Color",
"value": "#a3a3a3",
"values": [
"--pf-t--global--text--color--disabled",
"--pf-t--global--color--disabled--200",
"--pf-t--color--gray--40",
"#a3a3a3"
]
},
"c_switch__input_disabled__toggle_BackgroundColor": {
"name": "--pf-v6-c-switch__input--disabled__toggle--BackgroundColor",
"value": "#c7c7c7",
"values": [
"--pf-t--global--background--color--disabled--default",
"--pf-t--global--color--disabled--100",
"--pf-t--color--gray--30",
"#c7c7c7"
]
},
"c_switch__input_checked__toggle_before_BackgroundColor": {
"name": "--pf-v6-c-switch__input--checked__toggle--before--BackgroundColor",
"value": "#ffffff",
"values": [
"--pf-t--global--icon--color--inverse",
"--pf-t--global--icon--color--300",
"--pf-t--color--white",
"#ffffff"
]
},
"c_switch__input_not_checked__toggle_before_BackgroundColor": {
"name": "--pf-v6-c-switch__input--not-checked__toggle--before--BackgroundColor",
"value": "#707070",
"values": [
"--pf-t--global--icon--color--subtle",
"--pf-t--global--icon--color--200",
"--pf-t--color--gray--50",
"#707070"
]
},
"c_switch__input_disabled__toggle_before_BackgroundColor": {
"name": "--pf-v6-c-switch__input--disabled__toggle--before--BackgroundColor",
"value": "#4d4d4d",
"values": [
"--pf-t--global--icon--color--on-disabled",
"--pf-t--global--color--disabled--300",
"--pf-t--color--gray--60",
"#4d4d4d"
]
},
"c_switch__input_focus__toggle_OutlineWidth": {
"name": "--pf-v6-c-switch__input--focus__toggle--OutlineWidth",
"value": "2px",
"values": [
"--pf-t--global--border--width--strong",
"--pf-t--global--border--width--200",
"2px"
]
},
"c_switch__input_focus__toggle_OutlineOffset": {
"name": "--pf-v6-c-switch__input--focus__toggle--OutlineOffset",
"value": "0.25rem",
"values": [
"--pf-t--global--spacer--xs",
"--pf-t--global--spacer--100",
"0.25rem"
]
},
"c_switch__input_focus__toggle_OutlineColor": {
"name": "--pf-v6-c-switch__input--focus__toggle--OutlineColor",
"value": "#0066cc",
"values": [
"--pf-t--global--color--brand--default",
"--pf-t--global--color--brand--200",
"--pf-t--color--blue--50",
"#0066cc"
]
},
"c_switch__toggle_Height": {
"name": "--pf-v6-c-switch__toggle--Height",
"value": "calc(0.875rem * 1.5)",
"values": [
"calc(--pf-v6-c-switch--FontSize * --pf-v6-c-switch--LineHeight)",
"calc(--pf-t--global--font--size--sm * --pf-t--global--font--line-height--body)",
"calc(--pf-t--global--font--size--200 * --pf-t--global--font--line-height--200)",
"calc(0.875rem * 1.5)"
]
},
"c_switch__toggle_BackgroundColor": {
"name": "--pf-v6-c-switch__toggle--BackgroundColor",
"value": "#ffffff",
"values": [
"--pf-t--global--background--color--control--default",
"--pf-t--global--background--color--primary--default",
"--pf-t--global--background--color--100",
"--pf-t--color--white",
"#ffffff"
]
},
"c_switch__toggle_BorderColor": {
"name": "--pf-v6-c-switch__toggle--BorderColor",
"value": "#c7c7c7",
"values": [
"--pf-t--global--border--color--default",
"--pf-t--global--border--color--100",
"--pf-t--color--gray--30",
"#c7c7c7"
]
},
"c_switch__toggle_BorderWidth": {
"name": "--pf-v6-c-switch__toggle--BorderWidth",
"value": "1px",
"values": [
"--pf-t--global--border--width--control--default",
"--pf-t--global--border--width--100",
"1px"
]
},
"c_switch__toggle_BorderRadius": {
"name": "--pf-v6-c-switch__toggle--BorderRadius",
"value": "999px",
"values": [
"--pf-t--global--border--radius--pill",
"--pf-t--global--border--radius--500",
"999px"
]
},
"c_switch__toggle_before_Width": {
"name": "--pf-v6-c-switch__toggle--before--Width",
"value": "calc(0.875rem - 0.125rem)",
"values": [
"calc(--pf-v6-c-switch--FontSize - --pf-v6-c-switch__toggle-icon--Offset)",
"calc(--pf-t--global--font--size--sm - 0.125rem)",
"calc(--pf-t--global--font--size--200 - 0.125rem)",
"calc(0.875rem - 0.125rem)"
]
},
"c_switch__toggle_before_Height": {
"name": "--pf-v6-c-switch__toggle--before--Height",
"value": "calc(0.875rem - 0.125rem)",
"values": [
"--pf-v6-c-switch__toggle--before--Width",
"calc(--pf-v6-c-switch--FontSize - --pf-v6-c-switch__toggle-icon--Offset)",
"calc(--pf-t--global--font--size--sm - 0.125rem)",
"calc(--pf-t--global--font--size--200 - 0.125rem)",
"calc(0.875rem - 0.125rem)"
]
},
"c_switch__toggle_before_InsetInlineStart": {
"name": "--pf-v6-c-switch__toggle--before--InsetInlineStart",
"value": "calc((calc(0.875rem * 1.5) - calc(0.875rem - 0.125rem)) / 2)",
"values": [
"calc((--pf-v6-c-switch__toggle--Height - --pf-v6-c-switch__toggle--before--Height) / 2)",
"calc((calc(--pf-v6-c-switch--FontSize * --pf-v6-c-switch--LineHeight) - --pf-v6-c-switch__toggle--before--Width) / 2)",
"calc((calc(--pf-t--global--font--size--sm * --pf-t--global--font--line-height--body) - calc(--pf-v6-c-switch--FontSize - --pf-v6-c-switch__toggle-icon--Offset)) / 2)",
"calc((calc(--pf-t--global--font--size--200 * --pf-t--global--font--line-height--200) - calc(--pf-t--global--font--size--sm - 0.125rem)) / 2)",
"calc((calc(0.875rem * 1.5) - calc(--pf-t--global--font--size--200 - 0.125rem)) / 2)",
"calc((calc(0.875rem * 1.5) - calc(0.875rem - 0.125rem)) / 2)"
]
},
"c_switch__toggle_before_BorderRadius": {
"name": "--pf-v6-c-switch__toggle--before--BorderRadius",
"value": "24px",
"values": [
"--pf-t--global--border--radius--large",
"--pf-t--global--border--radius--400",
"24px"
]
},
"c_switch__toggle_before_Transition": {
"name": "--pf-v6-c-switch__toggle--before--Transition",
"value": "transform .25s ease 0s"
},
"c_switch__toggle_Width": {
"name": "--pf-v6-c-switch__toggle--Width",
"value": "calc(calc(0.875rem * 1.5) + 0.125rem + calc(0.875rem - 0.125rem))",
"values": [
"calc(--pf-v6-c-switch__toggle--Height + --pf-v6-c-switch__toggle-icon--Offset + --pf-v6-c-switch__toggle--before--Width)",
"calc(calc(--pf-v6-c-switch--FontSize * --pf-v6-c-switch--LineHeight) + 0.125rem + calc(--pf-v6-c-switch--FontSize - --pf-v6-c-switch__toggle-icon--Offset))",
"calc(calc(--pf-t--global--font--size--sm * --pf-t--global--font--line-height--body) + 0.125rem + calc(--pf-t--global--font--size--sm - 0.125rem))",
"calc(calc(--pf-t--global--font--size--200 * --pf-t--global--font--line-height--200) + 0.125rem + calc(--pf-t--global--font--size--200 - 0.125rem))",
"calc(calc(0.875rem * 1.5) + 0.125rem + calc(0.875rem - 0.125rem))"
]
}
},
".pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle": {
"c_switch__toggle_BorderWidth": {
"name": "--pf-v6-c-switch__toggle--BorderWidth",
"value": "0",
"values": [
"--pf-v6-c-switch__input--checked__toggle--BorderWidth",
"0"
]
}
},
".pf-v6-c-switch__input:disabled ~ .pf-v6-c-switch__toggle": {
"c_switch__toggle_icon_Color": {
"name": "--pf-v6-c-switch__toggle-icon--Color",
"value": "#a3a3a3",
"values": [
"--pf-v6-c-switch__input--disabled__toggle-icon--Color",
"--pf-t--global--icon--color--disabled",
"--pf-t--global--color--disabled--200",
"--pf-t--color--gray--40",
"#a3a3a3"
]
}
}
};
export default c_switch;