@patternfly/react-tokens
Version:
This library provides access to the design tokens of PatternFly 4 from JavaScript
558 lines • 20.8 kB
JavaScript
export const c_slider = {
".pf-v6-c-slider": {
"c_slider_value": {
"name": "--pf-v6-c-slider--value",
"value": "0"
},
"c_slider__step_InsetInlineStart": {
"name": "--pf-v6-c-slider__step--InsetInlineStart",
"value": "0"
},
"c_slider__rail_PaddingBlockStart": {
"name": "--pf-v6-c-slider__rail--PaddingBlockStart",
"value": "1rem",
"values": [
"--pf-t--global--spacer--md",
"--pf-t--global--spacer--300",
"1rem"
]
},
"c_slider__rail_PaddingBlockEnd": {
"name": "--pf-v6-c-slider__rail--PaddingBlockEnd",
"value": "1rem",
"values": [
"--pf-t--global--spacer--md",
"--pf-t--global--spacer--300",
"1rem"
]
},
"c_slider__rail_track_Height": {
"name": "--pf-v6-c-slider__rail-track--Height",
"value": "0.25rem"
},
"c_slider__rail_track_before_base_BackgroundColor": {
"name": "--pf-v6-c-slider__rail-track--before--base--BackgroundColor",
"value": "#e0e0e0",
"values": [
"--pf-t--global--color--nonstatus--gray--default",
"--pf-t--global--color--nonstatus--gray--100",
"--pf-t--color--gray--20",
"#e0e0e0"
]
},
"c_slider__rail_track_before_fill_BackgroundColor": {
"name": "--pf-v6-c-slider__rail-track--before--fill--BackgroundColor",
"value": "#4394e5",
"values": [
"--pf-t--global--border--color--hover",
"--pf-t--global--color--brand--100",
"--pf-t--color--blue--40",
"#4394e5"
]
},
"c_slider__rail_track_before_BorderRadius": {
"name": "--pf-v6-c-slider__rail-track--before--BorderRadius",
"value": "4px",
"values": [
"--pf-t--global--border--radius--tiny",
"--pf-t--global--border--radius--100",
"4px"
]
},
"c_slider__rail_track_before_fill_BackgroundColor_gradient_stop": {
"name": "--pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop",
"value": "0",
"values": [
"--pf-v6-c-slider--value",
"0"
]
},
"c_slider__steps_FontSize": {
"name": "--pf-v6-c-slider__steps--FontSize",
"value": "0.875rem",
"values": [
"--pf-t--global--font--size--sm",
"--pf-t--global--font--size--200",
"0.875rem"
]
},
"c_slider__steps_Height": {
"name": "--pf-v6-c-slider__steps--Height",
"value": "0.875rem",
"values": [
"--pf-v6-c-slider__steps--FontSize",
"--pf-t--global--font--size--sm",
"--pf-t--global--font--size--200",
"0.875rem"
]
},
"c_slider__step_tick_InsetBlockStart": {
"name": "--pf-v6-c-slider__step-tick--InsetBlockStart",
"value": "1rem",
"values": [
"--pf-t--global--spacer--md",
"--pf-t--global--spacer--300",
"1rem"
]
},
"c_slider__step_tick_Width": {
"name": "--pf-v6-c-slider__step-tick--Width",
"value": "0.15rem"
},
"c_slider__step_tick_Height": {
"name": "--pf-v6-c-slider__step-tick--Height",
"value": "0.25rem"
},
"c_slider__step_tick_BackgroundColor": {
"name": "--pf-v6-c-slider__step-tick--BackgroundColor",
"value": "#1f1f1f",
"values": [
"--pf-t--global--icon--color--nonstatus--on-gray--default",
"--pf-t--global--icon--color--regular",
"--pf-t--global--icon--color--100",
"--pf-t--color--gray--90",
"#1f1f1f"
]
},
"c_slider__step_tick_TranslateX": {
"name": "--pf-v6-c-slider__step-tick--TranslateX",
"value": "-50%"
},
"c_slider__step_tick_BorderRadius": {
"name": "--pf-v6-c-slider__step-tick--BorderRadius",
"value": "0px",
"values": [
"--pf-t--global--border--radius--sharp",
"--pf-t--global--border--radius--0",
"0px"
]
},
"c_slider__step_m_active__slider_tick_BackgroundColor": {
"name": "--pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor",
"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_slider__step_first_child__step_tick_TranslateX": {
"name": "--pf-v6-c-slider__step--first-child__step-tick--TranslateX",
"value": "0"
},
"c_slider__step_last_child__step_tick_TranslateX": {
"name": "--pf-v6-c-slider__step--last-child__step-tick--TranslateX",
"value": "-100%"
},
"c_slider__step_label_TranslateX": {
"name": "--pf-v6-c-slider__step-label--TranslateX",
"value": "-50%"
},
"c_slider__step_label_InsetBlockStart": {
"name": "--pf-v6-c-slider__step-label--InsetBlockStart",
"value": "calc(2rem + 0.25rem)",
"values": [
"calc(--pf-t--global--spacer--xl + --pf-v6-c-slider__rail-track--Height)",
"calc(--pf-t--global--spacer--500 + 0.25rem)",
"calc(2rem + 0.25rem)"
]
},
"c_slider__step_first_child__step_label_TranslateX": {
"name": "--pf-v6-c-slider__step--first-child__step-label--TranslateX",
"value": "0"
},
"c_slider__step_last_child__step_label_TranslateX": {
"name": "--pf-v6-c-slider__step--last-child__step-label--TranslateX",
"value": "-100%"
},
"c_slider__thumb_InsetBlockStart": {
"name": "--pf-v6-c-slider__thumb--InsetBlockStart",
"value": "calc(0.25rem / 2 + 1rem)",
"values": [
"calc(--pf-v6-c-slider__rail-track--Height / 2 + --pf-t--global--spacer--md)",
"calc(0.25rem / 2 + --pf-t--global--spacer--300)",
"calc(0.25rem / 2 + 1rem)"
]
},
"c_slider__thumb_Width": {
"name": "--pf-v6-c-slider__thumb--Width",
"value": "1rem"
},
"c_slider__thumb_Height": {
"name": "--pf-v6-c-slider__thumb--Height",
"value": "1rem"
},
"c_slider__thumb_InsetInlineStart": {
"name": "--pf-v6-c-slider__thumb--InsetInlineStart",
"value": "0",
"values": [
"--pf-v6-c-slider--value",
"0"
]
},
"c_slider__thumb_BackgroundColor": {
"name": "--pf-v6-c-slider__thumb--BackgroundColor",
"value": "#0066cc",
"values": [
"--pf-t--global--color--brand--default",
"--pf-t--global--color--brand--200",
"--pf-t--color--blue--50",
"#0066cc"
]
},
"c_slider__thumb_TranslateX": {
"name": "--pf-v6-c-slider__thumb--TranslateX",
"value": "-50%"
},
"c_slider__thumb_TranslateY": {
"name": "--pf-v6-c-slider__thumb--TranslateY",
"value": "-50%"
},
"c_slider__thumb_BorderRadius": {
"name": "--pf-v6-c-slider__thumb--BorderRadius",
"value": "24px",
"values": [
"--pf-t--global--border--radius--large",
"--pf-t--global--border--radius--400",
"24px"
]
},
"c_slider__thumb_BoxShadow_base": {
"name": "--pf-v6-c-slider__thumb--BoxShadow--base",
"value": "0 0 0 2px #ffffff,\n 0 0 0 3px #0066cc",
"values": [
"0 0 0 2px --pf-t--global--background--color--primary--default,\n 0 0 0 3px --pf-t--global--color--brand--default",
"0 0 0 2px --pf-t--global--background--color--100,\n 0 0 0 3px --pf-t--global--color--brand--200",
"0 0 0 2px --pf-t--color--white,\n 0 0 0 3px --pf-t--color--blue--50",
"0 0 0 2px #ffffff,\n 0 0 0 3px #0066cc"
]
},
"c_slider__thumb_hover_BoxShadow": {
"name": "--pf-v6-c-slider__thumb--hover--BoxShadow",
"value": "0 0 0 2px #ffffff,\n 0 0 0 3px #0066cc",
"values": [
"--pf-v6-c-slider__thumb--BoxShadow--base",
"0 0 0 2px --pf-t--global--background--color--primary--default,\n 0 0 0 3px --pf-t--global--color--brand--default",
"0 0 0 2px --pf-t--global--background--color--100,\n 0 0 0 3px --pf-t--global--color--brand--200",
"0 0 0 2px --pf-t--color--white,\n 0 0 0 3px --pf-t--color--blue--50",
"0 0 0 2px #ffffff,\n 0 0 0 3px #0066cc"
]
},
"c_slider__thumb_focus_BoxShadow": {
"name": "--pf-v6-c-slider__thumb--focus--BoxShadow",
"value": "0 0 0 2px #ffffff,\n 0 0 0 3px #0066cc",
"values": [
"--pf-v6-c-slider__thumb--BoxShadow--base",
"0 0 0 2px --pf-t--global--background--color--primary--default,\n 0 0 0 3px --pf-t--global--color--brand--default",
"0 0 0 2px --pf-t--global--background--color--100,\n 0 0 0 3px --pf-t--global--color--brand--200",
"0 0 0 2px --pf-t--color--white,\n 0 0 0 3px --pf-t--color--blue--50",
"0 0 0 2px #ffffff,\n 0 0 0 3px #0066cc"
]
},
"c_slider__thumb_active_BoxShadow": {
"name": "--pf-v6-c-slider__thumb--active--BoxShadow",
"value": "0 0 0 2px #ffffff,\n 0 0 0 3px #0066cc,\n 0 0 2px 5px #92c5f9",
"values": [
"--pf-v6-c-slider__thumb--BoxShadow--base,\n 0 0 2px 5px --pf-t--global--color--nonstatus--blue--clicked",
"0 0 0 2px --pf-t--global--background--color--primary--default,\n 0 0 0 3px --pf-t--global--color--brand--default,\n 0 0 2px 5px --pf-t--global--color--nonstatus--blue--200",
"0 0 0 2px --pf-t--global--background--color--100,\n 0 0 0 3px --pf-t--global--color--brand--200,\n 0 0 2px 5px --pf-t--color--blue--30",
"0 0 0 2px --pf-t--color--white,\n 0 0 0 3px --pf-t--color--blue--50,\n 0 0 2px 5px #92c5f9",
"0 0 0 2px #ffffff,\n 0 0 0 3px #0066cc,\n 0 0 2px 5px #92c5f9"
]
},
"c_slider__thumb_before_Width": {
"name": "--pf-v6-c-slider__thumb--before--Width",
"value": "44px"
},
"c_slider__thumb_before_Height": {
"name": "--pf-v6-c-slider__thumb--before--Height",
"value": "44px",
"values": [
"--pf-v6-c-slider__thumb--before--Width",
"44px"
]
},
"c_slider__thumb_before_BorderRadius": {
"name": "--pf-v6-c-slider__thumb--before--BorderRadius",
"value": "24px",
"values": [
"--pf-t--global--border--radius--large",
"--pf-t--global--border--radius--400",
"24px"
]
},
"c_slider__thumb_before_TranslateX": {
"name": "--pf-v6-c-slider__thumb--before--TranslateX",
"value": "-50%"
},
"c_slider__thumb_before_TranslateY": {
"name": "--pf-v6-c-slider__thumb--before--TranslateY",
"value": "-50%"
},
"c_slider__value_MarginInlineStart": {
"name": "--pf-v6-c-slider__value--MarginInlineStart",
"value": "1rem",
"values": [
"--pf-t--global--spacer--md",
"--pf-t--global--spacer--300",
"1rem"
]
},
"c_slider__value_c_form_control_width_base": {
"name": "--pf-v6-c-slider__value--c-form-control--width-base",
"value": "calc(1rem + 1rem + 1.25rem)",
"values": [
"calc(--pf-t--global--spacer--control--horizontal--default + --pf-t--global--spacer--control--horizontal--default + 1.25rem)",
"calc(--pf-t--global--spacer--md + --pf-t--global--spacer--md + 1.25rem)",
"calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--300 + 1.25rem)",
"calc(1rem + 1rem + 1.25rem)"
]
},
"c_slider__value_c_form_control_width_chars": {
"name": "--pf-v6-c-slider__value--c-form-control--width-chars",
"value": "3"
},
"c_slider__value_c_form_control_Width": {
"name": "--pf-v6-c-slider__value--c-form-control--Width",
"value": "calc(calc(1rem + 1rem + 1.25rem) + 3 * 1ch)",
"values": [
"calc(--pf-v6-c-slider__value--c-form-control--width-base + --pf-v6-c-slider__value--c-form-control--width-chars * 1ch)",
"calc(calc(--pf-t--global--spacer--control--horizontal--default + --pf-t--global--spacer--control--horizontal--default + 1.25rem) + 3 * 1ch)",
"calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--md + 1.25rem) + 3 * 1ch)",
"calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--300 + 1.25rem) + 3 * 1ch)",
"calc(calc(1rem + 1rem + 1.25rem) + 3 * 1ch)"
]
},
"c_slider__value_m_floating_TranslateX": {
"name": "--pf-v6-c-slider__value--m-floating--TranslateX",
"value": "-50%"
},
"c_slider__value_m_floating_TranslateY": {
"name": "--pf-v6-c-slider__value--m-floating--TranslateY",
"value": "-100%"
},
"c_slider__value_m_floating_InsetInlineStart": {
"name": "--pf-v6-c-slider__value--m-floating--InsetInlineStart",
"value": "0",
"values": [
"--pf-v6-c-slider--value",
"0"
]
},
"c_slider__value_m_floating_ZIndex": {
"name": "--pf-v6-c-slider__value--m-floating--ZIndex",
"value": "200",
"values": [
"--pf-t--global--z-index--sm",
"--pf-t--global--z-index--200",
"200"
]
},
"c_slider__actions_MarginInlineEnd": {
"name": "--pf-v6-c-slider__actions--MarginInlineEnd",
"value": "0.5rem",
"values": [
"--pf-t--global--spacer--sm",
"--pf-t--global--spacer--200",
"0.5rem"
]
},
"c_slider__main_actions_MarginInlineStart": {
"name": "--pf-v6-c-slider__main--actions--MarginInlineStart",
"value": "0.5rem",
"values": [
"--pf-t--global--spacer--sm",
"--pf-t--global--spacer--200",
"0.5rem"
]
},
"c_slider_m_disabled__rail_track_before_fill_BackgroundColor": {
"name": "--pf-v6-c-slider--m-disabled__rail-track--before--fill--BackgroundColor",
"value": "#c7c7c7",
"values": [
"--pf-t--global--background--color--disabled--default",
"--pf-t--global--color--disabled--100",
"--pf-t--color--gray--30",
"#c7c7c7"
]
},
"c_slider_m_disabled__step_m_active__slider_tick_BackgroundColor": {
"name": "--pf-v6-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor",
"value": "#a3a3a3",
"values": [
"--pf-t--global--icon--color--disabled",
"--pf-t--global--color--disabled--200",
"--pf-t--color--gray--40",
"#a3a3a3"
]
},
"c_slider_m_disabled__thumb_BackgroundColor": {
"name": "--pf-v6-c-slider--m-disabled__thumb--BackgroundColor",
"value": "#c7c7c7",
"values": [
"--pf-t--global--background--color--disabled--default",
"--pf-t--global--color--disabled--100",
"--pf-t--color--gray--30",
"#c7c7c7"
]
},
"c_slider__rail_track_before_fill_direction": {
"name": "--pf-v6-c-slider__rail-track--before--fill--direction",
"value": "right"
}
},
":where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider": {
"c_slider__rail_track_before_fill_direction": {
"name": "--pf-v6-c-slider__rail-track--before--fill--direction",
"value": "left"
}
},
".pf-v6-c-slider.pf-m-disabled": {
"c_slider__rail_track_before_fill_BackgroundColor": {
"name": "--pf-v6-c-slider__rail-track--before--fill--BackgroundColor",
"value": "#c7c7c7",
"values": [
"--pf-v6-c-slider--m-disabled__rail-track--before--fill--BackgroundColor",
"--pf-t--global--background--color--disabled--default",
"--pf-t--global--color--disabled--100",
"--pf-t--color--gray--30",
"#c7c7c7"
]
},
"c_slider__step_m_active__slider_tick_BackgroundColor": {
"name": "--pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor",
"value": "#a3a3a3",
"values": [
"--pf-v6-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor",
"--pf-t--global--icon--color--disabled",
"--pf-t--global--color--disabled--200",
"--pf-t--color--gray--40",
"#a3a3a3"
]
},
"c_slider__thumb_BackgroundColor": {
"name": "--pf-v6-c-slider__thumb--BackgroundColor",
"value": "#c7c7c7",
"values": [
"--pf-v6-c-slider--m-disabled__thumb--BackgroundColor",
"--pf-t--global--background--color--disabled--default",
"--pf-t--global--color--disabled--100",
"--pf-t--color--gray--30",
"#c7c7c7"
]
}
},
".pf-v6-c-slider.pf-m-disabled .pf-v6-c-slider__thumb": {
"c_slider__thumb_BoxShadow": {
"name": "--pf-v6-c-slider__thumb--BoxShadow",
"value": "none"
}
},
".pf-v6-c-slider__step.pf-m-active": {
"c_slider__step_tick_BackgroundColor": {
"name": "--pf-v6-c-slider__step-tick--BackgroundColor",
"value": "#ffffff",
"values": [
"--pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor",
"--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"
]
}
},
".pf-v6-c-slider__step:first-child": {
"c_slider__step_tick_TranslateX": {
"name": "--pf-v6-c-slider__step-tick--TranslateX",
"value": "0",
"values": [
"--pf-v6-c-slider__step--first-child__step-tick--TranslateX",
"0"
]
},
"c_slider__step_label_TranslateX": {
"name": "--pf-v6-c-slider__step-label--TranslateX",
"value": "0",
"values": [
"--pf-v6-c-slider__step--first-child__step-label--TranslateX",
"0"
]
}
},
".pf-v6-c-slider__step:last-child": {
"c_slider__step_tick_TranslateX": {
"name": "--pf-v6-c-slider__step-tick--TranslateX",
"value": "-100%",
"values": [
"--pf-v6-c-slider__step--last-child__step-tick--TranslateX",
"-100%"
]
},
"c_slider__step_label_TranslateX": {
"name": "--pf-v6-c-slider__step-label--TranslateX",
"value": "-100%",
"values": [
"--pf-v6-c-slider__step--last-child__step-label--TranslateX",
"-100%"
]
}
},
".pf-v6-c-slider__thumb:hover": {
"c_slider__thumb_BoxShadow": {
"name": "--pf-v6-c-slider__thumb--BoxShadow",
"value": "0 0 0 2px #ffffff,\n 0 0 0 3px #0066cc",
"values": [
"--pf-v6-c-slider__thumb--hover--BoxShadow",
"--pf-v6-c-slider__thumb--BoxShadow--base",
"0 0 0 2px --pf-t--global--background--color--primary--default,\n 0 0 0 3px --pf-t--global--color--brand--default",
"0 0 0 2px --pf-t--global--background--color--100,\n 0 0 0 3px --pf-t--global--color--brand--200",
"0 0 0 2px --pf-t--color--white,\n 0 0 0 3px --pf-t--color--blue--50",
"0 0 0 2px #ffffff,\n 0 0 0 3px #0066cc"
]
}
},
".pf-v6-c-slider__thumb:focus": {
"c_slider__thumb_BoxShadow": {
"name": "--pf-v6-c-slider__thumb--BoxShadow",
"value": "0 0 0 2px #ffffff,\n 0 0 0 3px #0066cc",
"values": [
"--pf-v6-c-slider__thumb--focus--BoxShadow",
"--pf-v6-c-slider__thumb--BoxShadow--base",
"0 0 0 2px --pf-t--global--background--color--primary--default,\n 0 0 0 3px --pf-t--global--color--brand--default",
"0 0 0 2px --pf-t--global--background--color--100,\n 0 0 0 3px --pf-t--global--color--brand--200",
"0 0 0 2px --pf-t--color--white,\n 0 0 0 3px --pf-t--color--blue--50",
"0 0 0 2px #ffffff,\n 0 0 0 3px #0066cc"
]
}
},
".pf-v6-c-slider__thumb:active": {
"c_slider__thumb_BoxShadow": {
"name": "--pf-v6-c-slider__thumb--BoxShadow",
"value": "0 0 0 2px #ffffff,\n 0 0 0 3px #0066cc,\n 0 0 2px 5px #92c5f9",
"values": [
"--pf-v6-c-slider__thumb--active--BoxShadow",
"--pf-v6-c-slider__thumb--BoxShadow--base,\n 0 0 2px 5px --pf-t--global--color--nonstatus--blue--clicked",
"0 0 0 2px --pf-t--global--background--color--primary--default,\n 0 0 0 3px --pf-t--global--color--brand--default,\n 0 0 2px 5px --pf-t--global--color--nonstatus--blue--200",
"0 0 0 2px --pf-t--global--background--color--100,\n 0 0 0 3px --pf-t--global--color--brand--200,\n 0 0 2px 5px --pf-t--color--blue--30",
"0 0 0 2px --pf-t--color--white,\n 0 0 0 3px --pf-t--color--blue--50,\n 0 0 2px 5px #92c5f9",
"0 0 0 2px #ffffff,\n 0 0 0 3px #0066cc,\n 0 0 2px 5px #92c5f9"
]
}
},
".pf-v6-c-slider__value.pf-m-floating": {
"c_slider__value_MarginInlineStart": {
"name": "--pf-v6-c-slider__value--MarginInlineStart",
"value": "0"
}
},
".pf-v6-c-slider__main ~ .pf-v6-c-slider__actions": {
"c_slider__actions_MarginInlineEnd": {
"name": "--pf-v6-c-slider__actions--MarginInlineEnd",
"value": "0"
}
}
};
export default c_slider;