@patternfly/react-tokens
Version:
This library provides access to the design tokens of PatternFly 4 from JavaScript
607 lines • 21.1 kB
JavaScript
export const c_panel = {
".pf-v6-c-panel": {
"c_panel_Width": {
"name": "--pf-v6-c-panel--Width",
"value": "auto"
},
"c_panel_MinWidth": {
"name": "--pf-v6-c-panel--MinWidth",
"value": "auto"
},
"c_panel_MaxWidth": {
"name": "--pf-v6-c-panel--MaxWidth",
"value": "none"
},
"c_panel_BackgroundColor": {
"name": "--pf-v6-c-panel--BackgroundColor",
"value": "#ffffff",
"values": [
"--pf-t--global--background--color--primary--default",
"--pf-t--global--background--color--100",
"--pf-t--color--white",
"#ffffff"
]
},
"c_panel_BoxShadow": {
"name": "--pf-v6-c-panel--BoxShadow",
"value": "none"
},
"c_panel_BorderRadius": {
"name": "--pf-v6-c-panel--BorderRadius",
"value": "16px",
"values": [
"--pf-t--global--border--radius--medium",
"--pf-t--global--border--radius--300",
"16px"
]
},
"c_panel_before_BorderWidth": {
"name": "--pf-v6-c-panel--before--BorderWidth",
"value": "0px",
"values": [
"--pf-t--global--border--width--high-contrast--regular",
"0px"
]
},
"c_panel_before_BorderColor": {
"name": "--pf-v6-c-panel--before--BorderColor",
"value": "rgb(255, 255, 255, 0.0000)",
"values": [
"--pf-t--global--border--color--high-contrast",
"rgb(255, 255, 255, 0.0000)"
]
},
"c_panel_m_secondary_BackgroundColor": {
"name": "--pf-v6-c-panel--m-secondary--BackgroundColor",
"value": "#f2f2f2",
"values": [
"--pf-t--global--background--color--secondary--default",
"--pf-t--global--background--color--200",
"--pf-t--color--gray--10",
"#f2f2f2"
]
},
"c_panel_m_secondary_before_BorderWidth": {
"name": "--pf-v6-c-panel--m-secondary--before--BorderWidth",
"value": "0px",
"values": [
"--pf-t--global--border--width--high-contrast--regular",
"0px"
]
},
"c_panel_m_bordered_before_BorderWidth": {
"name": "--pf-v6-c-panel--m-bordered--before--BorderWidth",
"value": "1px",
"values": [
"--pf-t--global--border--width--box--default",
"--pf-t--global--border--width--100",
"1px"
]
},
"c_panel_m_bordered_before_BorderColor": {
"name": "--pf-v6-c-panel--m-bordered--before--BorderColor",
"value": "#e0e0e0",
"values": [
"--pf-t--global--border--color--default",
"--pf-t--global--border--color--50",
"--pf-t--color--gray--20",
"#e0e0e0"
]
},
"c_panel_m_no_border_before_BorderWidth": {
"name": "--pf-v6-c-panel--m-no-border--before--BorderWidth",
"value": "0"
},
"c_panel_m_raised_BoxShadow": {
"name": "--pf-v6-c-panel--m-raised--BoxShadow",
"value": "0px\n 4px\n 10px\n 0px\n rgb(41, 41, 41, 0.1500)",
"values": [
"--pf-t--global--box-shadow--md",
"--pf-t--global--box-shadow--X--md--default\n --pf-t--global--box-shadow--Y--md--default\n --pf-t--global--box-shadow--blur--md\n --pf-t--global--box-shadow--spread--md--default\n --pf-t--global--box-shadow--color--md--default",
"--pf-t--global--box-shadow--X--400\n --pf-t--global--box-shadow--Y--600\n --pf-t--global--box-shadow--blur--200\n --pf-t--global--box-shadow--spread--100\n --pf-t--global--box-shadow--color--100",
"0px\n 4px\n 10px\n 0px\n rgb(41, 41, 41, 0.1500)"
]
},
"c_panel_m_raised_BackgroundColor": {
"name": "--pf-v6-c-panel--m-raised--BackgroundColor",
"value": "#ffffff",
"values": [
"--pf-t--global--background--color--floating--default",
"--pf-t--global--background--color--100",
"--pf-t--color--white",
"#ffffff"
]
},
"c_panel_m_raised_before_BorderWidth": {
"name": "--pf-v6-c-panel--m-raised--before--BorderWidth",
"value": "0px",
"values": [
"--pf-t--global--border--width--high-contrast--regular",
"0px"
]
},
"c_panel_m_raised_BorderRadius": {
"name": "--pf-v6-c-panel--m-raised--BorderRadius",
"value": "6px",
"values": [
"--pf-t--global--border--radius--small",
"--pf-t--global--border--radius--200",
"6px"
]
},
"c_panel__header_PaddingBlockStart": {
"name": "--pf-v6-c-panel__header--PaddingBlockStart",
"value": "1rem",
"values": [
"--pf-t--global--spacer--md",
"--pf-t--global--spacer--300",
"1rem"
]
},
"c_panel__header_PaddingInlineEnd": {
"name": "--pf-v6-c-panel__header--PaddingInlineEnd",
"value": "1.5rem",
"values": [
"--pf-t--global--spacer--lg",
"--pf-t--global--spacer--400",
"1.5rem"
]
},
"c_panel__header_PaddingBlockEnd": {
"name": "--pf-v6-c-panel__header--PaddingBlockEnd",
"value": "1rem",
"values": [
"--pf-t--global--spacer--md",
"--pf-t--global--spacer--300",
"1rem"
]
},
"c_panel__header_PaddingInlineStart": {
"name": "--pf-v6-c-panel__header--PaddingInlineStart",
"value": "1.5rem",
"values": [
"--pf-t--global--spacer--lg",
"--pf-t--global--spacer--400",
"1.5rem"
]
},
"c_panel__main_MaxHeight": {
"name": "--pf-v6-c-panel__main--MaxHeight",
"value": "none"
},
"c_panel__main_Overflow": {
"name": "--pf-v6-c-panel__main--Overflow",
"value": "visible"
},
"c_panel__main_body_PaddingBlockStart": {
"name": "--pf-v6-c-panel__main-body--PaddingBlockStart",
"value": "1.5rem",
"values": [
"--pf-t--global--spacer--lg",
"--pf-t--global--spacer--400",
"1.5rem"
]
},
"c_panel__main_body_PaddingInlineEnd": {
"name": "--pf-v6-c-panel__main-body--PaddingInlineEnd",
"value": "1.5rem",
"values": [
"--pf-t--global--spacer--lg",
"--pf-t--global--spacer--400",
"1.5rem"
]
},
"c_panel__main_body_PaddingBlockEnd": {
"name": "--pf-v6-c-panel__main-body--PaddingBlockEnd",
"value": "1.5rem",
"values": [
"--pf-t--global--spacer--lg",
"--pf-t--global--spacer--400",
"1.5rem"
]
},
"c_panel__main_body_PaddingInlineStart": {
"name": "--pf-v6-c-panel__main-body--PaddingInlineStart",
"value": "1.5rem",
"values": [
"--pf-t--global--spacer--lg",
"--pf-t--global--spacer--400",
"1.5rem"
]
},
"c_panel__footer_PaddingBlockStart": {
"name": "--pf-v6-c-panel__footer--PaddingBlockStart",
"value": "0.5rem",
"values": [
"--pf-t--global--spacer--sm",
"--pf-t--global--spacer--200",
"0.5rem"
]
},
"c_panel__footer_PaddingInlineEnd": {
"name": "--pf-v6-c-panel__footer--PaddingInlineEnd",
"value": "1.5rem",
"values": [
"--pf-t--global--spacer--lg",
"--pf-t--global--spacer--400",
"1.5rem"
]
},
"c_panel__footer_PaddingBlockEnd": {
"name": "--pf-v6-c-panel__footer--PaddingBlockEnd",
"value": "0.5rem",
"values": [
"--pf-t--global--spacer--sm",
"--pf-t--global--spacer--200",
"0.5rem"
]
},
"c_panel__footer_PaddingInlineStart": {
"name": "--pf-v6-c-panel__footer--PaddingInlineStart",
"value": "1.5rem",
"values": [
"--pf-t--global--spacer--lg",
"--pf-t--global--spacer--400",
"1.5rem"
]
},
"c_panel__footer_BoxShadow": {
"name": "--pf-v6-c-panel__footer--BoxShadow",
"value": "none"
},
"c_panel__footer_BorderColor": {
"name": "--pf-v6-c-panel__footer--BorderColor",
"value": "transparent"
},
"c_panel__footer_BorderWidth": {
"name": "--pf-v6-c-panel__footer--BorderWidth",
"value": "0"
},
"c_panel_m_pill_BorderRadius": {
"name": "--pf-v6-c-panel--m-pill--BorderRadius",
"value": "999px",
"values": [
"--pf-t--global--border--radius--pill",
"--pf-t--global--border--radius--500",
"999px"
]
},
"c_panel_m_scrollable__main_MaxHeight": {
"name": "--pf-v6-c-panel--m-scrollable__main--MaxHeight",
"value": "18.75rem"
},
"c_panel_m_scrollable__main_Overflow": {
"name": "--pf-v6-c-panel--m-scrollable__main--Overflow",
"value": "auto"
},
"c_panel_m_scrollable__footer_BoxShadow": {
"name": "--pf-v6-c-panel--m-scrollable__footer--BoxShadow",
"value": "0px\n -4px\n 6px\n -4px\n rgb(41, 41, 41, 0.2000)",
"values": [
"--pf-t--global--box-shadow--sm--top",
"--pf-t--global--box-shadow--X--sm--top\n --pf-t--global--box-shadow--Y--sm--top\n --pf-t--global--box-shadow--blur--sm\n --pf-t--global--box-shadow--spread--sm--directional\n --pf-t--global--box-shadow--color--sm--directional",
"--pf-t--global--box-shadow--X--400\n --pf-t--global--box-shadow--Y--200\n --pf-t--global--box-shadow--blur--100\n --pf-t--global--box-shadow--spread--200\n --pf-t--global--box-shadow--color--200",
"0px\n -4px\n 6px\n -4px\n rgb(41, 41, 41, 0.2000)"
]
},
"c_panel_m_scrollable__footer_PaddingBlockStart": {
"name": "--pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart",
"value": "1rem",
"values": [
"--pf-t--global--spacer--md",
"--pf-t--global--spacer--300",
"1rem"
]
},
"c_panel_m_scrollable__footer_PaddingBlockEnd": {
"name": "--pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd",
"value": "1rem",
"values": [
"--pf-t--global--spacer--md",
"--pf-t--global--spacer--300",
"1rem"
]
},
"c_panel_m_scrollable__footer_BorderColor": {
"name": "--pf-v6-c-panel--m-scrollable__footer--BorderColor",
"value": "rgb(255, 255, 255, 0.0000)",
"values": [
"--pf-t--global--border--color--high-contrast",
"rgb(255, 255, 255, 0.0000)"
]
},
"c_panel_m_scrollable__footer_BorderWidth": {
"name": "--pf-v6-c-panel--m-scrollable__footer--BorderWidth",
"value": "0px",
"values": [
"--pf-t--global--border--width--high-contrast--regular",
"0px"
]
},
"c_panel_m_glass_BackgroundColor": {
"name": "--pf-v6-c-panel--m-glass--BackgroundColor",
"value": "initial",
"values": [
"--pf-t--global--background--color--glass--primary--default",
"initial"
]
},
"c_panel_m_glass_before_BorderWidth": {
"name": "--pf-v6-c-panel--m-glass--before--BorderWidth",
"value": "initial",
"values": [
"--pf-t--global--border--width--glass--default",
"initial"
]
},
"c_panel_m_glass_before_BorderColor": {
"name": "--pf-v6-c-panel--m-glass--before--BorderColor",
"value": "initial",
"values": [
"--pf-t--global--border--color--glass--default",
"initial"
]
},
"c_panel_m_glass_BoxShadow": {
"name": "--pf-v6-c-panel--m-glass--BoxShadow",
"value": "0px\n 4px\n 10px\n 0px\n rgb(41, 41, 41, 0.1500)",
"values": [
"--pf-t--global--box-shadow--glass--default",
"--pf-t--global--box-shadow--md",
"--pf-t--global--box-shadow--X--md--default\n --pf-t--global--box-shadow--Y--md--default\n --pf-t--global--box-shadow--blur--md\n --pf-t--global--box-shadow--spread--md--default\n --pf-t--global--box-shadow--color--md--default",
"--pf-t--global--box-shadow--X--400\n --pf-t--global--box-shadow--Y--600\n --pf-t--global--box-shadow--blur--200\n --pf-t--global--box-shadow--spread--100\n --pf-t--global--box-shadow--color--100",
"0px\n 4px\n 10px\n 0px\n rgb(41, 41, 41, 0.1500)"
]
},
"c_panel_m_glass_BorderRadius": {
"name": "--pf-v6-c-panel--m-glass--BorderRadius",
"value": "initial",
"values": [
"--pf-t--global--border--radius--glass--default",
"initial"
]
},
"c_panel_m_glass_BackdropFilter": {
"name": "--pf-v6-c-panel--m-glass--BackdropFilter",
"value": "initial",
"values": [
"--pf-t--global--background--filter--glass--blur--primary",
"initial"
]
}
},
".pf-v6-c-panel.pf-m-bordered": {
"c_panel_before_BorderWidth": {
"name": "--pf-v6-c-panel--before--BorderWidth",
"value": "1px",
"values": [
"--pf-v6-c-panel--m-bordered--before--BorderWidth",
"--pf-t--global--border--width--box--default",
"--pf-t--global--border--width--100",
"1px"
]
},
"c_panel_before_BorderColor": {
"name": "--pf-v6-c-panel--before--BorderColor",
"value": "#e0e0e0",
"values": [
"--pf-v6-c-panel--m-bordered--before--BorderColor",
"--pf-t--global--border--color--default",
"--pf-t--global--border--color--50",
"--pf-t--color--gray--20",
"#e0e0e0"
]
}
},
".pf-v6-c-panel.pf-m-secondary": {
"c_panel_BackgroundColor": {
"name": "--pf-v6-c-panel--BackgroundColor",
"value": "#f2f2f2",
"values": [
"--pf-v6-c-panel--m-secondary--BackgroundColor",
"--pf-t--global--background--color--secondary--default",
"--pf-t--global--background--color--200",
"--pf-t--color--gray--10",
"#f2f2f2"
]
},
"c_panel_before_BorderWidth": {
"name": "--pf-v6-c-panel--before--BorderWidth",
"value": "0px",
"values": [
"--pf-v6-c-panel--m-secondary--before--BorderWidth",
"--pf-t--global--border--width--high-contrast--regular",
"0px"
]
}
},
".pf-v6-c-panel.pf-m-raised": {
"c_panel_BackgroundColor": {
"name": "--pf-v6-c-panel--BackgroundColor",
"value": "#ffffff",
"values": [
"--pf-v6-c-panel--m-raised--BackgroundColor",
"--pf-t--global--background--color--floating--default",
"--pf-t--global--background--color--100",
"--pf-t--color--white",
"#ffffff"
]
},
"c_panel_BoxShadow": {
"name": "--pf-v6-c-panel--BoxShadow",
"value": "0px\n 4px\n 10px\n 0px\n rgb(41, 41, 41, 0.1500)",
"values": [
"--pf-v6-c-panel--m-raised--BoxShadow",
"--pf-t--global--box-shadow--md",
"--pf-t--global--box-shadow--X--md--default\n --pf-t--global--box-shadow--Y--md--default\n --pf-t--global--box-shadow--blur--md\n --pf-t--global--box-shadow--spread--md--default\n --pf-t--global--box-shadow--color--md--default",
"--pf-t--global--box-shadow--X--400\n --pf-t--global--box-shadow--Y--600\n --pf-t--global--box-shadow--blur--200\n --pf-t--global--box-shadow--spread--100\n --pf-t--global--box-shadow--color--100",
"0px\n 4px\n 10px\n 0px\n rgb(41, 41, 41, 0.1500)"
]
},
"c_panel_before_BorderWidth": {
"name": "--pf-v6-c-panel--before--BorderWidth",
"value": "0px",
"values": [
"--pf-v6-c-panel--m-raised--before--BorderWidth",
"--pf-t--global--border--width--high-contrast--regular",
"0px"
]
},
"c_panel_BorderRadius": {
"name": "--pf-v6-c-panel--BorderRadius",
"value": "6px",
"values": [
"--pf-v6-c-panel--m-raised--BorderRadius",
"--pf-t--global--border--radius--small",
"--pf-t--global--border--radius--200",
"6px"
]
}
},
".pf-v6-c-panel.pf-m-scrollable": {
"c_panel__main_MaxHeight": {
"name": "--pf-v6-c-panel__main--MaxHeight",
"value": "18.75rem",
"values": [
"--pf-v6-c-panel--m-scrollable__main--MaxHeight",
"18.75rem"
]
},
"c_panel__main_Overflow": {
"name": "--pf-v6-c-panel__main--Overflow",
"value": "auto",
"values": [
"--pf-v6-c-panel--m-scrollable__main--Overflow",
"auto"
]
},
"c_panel__footer_BoxShadow": {
"name": "--pf-v6-c-panel__footer--BoxShadow",
"value": "0px\n -4px\n 6px\n -4px\n rgb(41, 41, 41, 0.2000)",
"values": [
"--pf-v6-c-panel--m-scrollable__footer--BoxShadow",
"--pf-t--global--box-shadow--sm--top",
"--pf-t--global--box-shadow--X--sm--top\n --pf-t--global--box-shadow--Y--sm--top\n --pf-t--global--box-shadow--blur--sm\n --pf-t--global--box-shadow--spread--sm--directional\n --pf-t--global--box-shadow--color--sm--directional",
"--pf-t--global--box-shadow--X--400\n --pf-t--global--box-shadow--Y--200\n --pf-t--global--box-shadow--blur--100\n --pf-t--global--box-shadow--spread--200\n --pf-t--global--box-shadow--color--200",
"0px\n -4px\n 6px\n -4px\n rgb(41, 41, 41, 0.2000)"
]
},
"c_panel__footer_PaddingBlockStart": {
"name": "--pf-v6-c-panel__footer--PaddingBlockStart",
"value": "1rem",
"values": [
"--pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart",
"--pf-t--global--spacer--md",
"--pf-t--global--spacer--300",
"1rem"
]
},
"c_panel__footer_PaddingBlockEnd": {
"name": "--pf-v6-c-panel__footer--PaddingBlockEnd",
"value": "1rem",
"values": [
"--pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd",
"--pf-t--global--spacer--md",
"--pf-t--global--spacer--300",
"1rem"
]
},
"c_panel__footer_BorderColor": {
"name": "--pf-v6-c-panel__footer--BorderColor",
"value": "rgb(255, 255, 255, 0.0000)",
"values": [
"--pf-v6-c-panel--m-scrollable__footer--BorderColor",
"--pf-t--global--border--color--high-contrast",
"rgb(255, 255, 255, 0.0000)"
]
},
"c_panel__footer_BorderWidth": {
"name": "--pf-v6-c-panel__footer--BorderWidth",
"value": "0px",
"values": [
"--pf-v6-c-panel--m-scrollable__footer--BorderWidth",
"--pf-t--global--border--width--high-contrast--regular",
"0px"
]
}
},
".pf-v6-c-panel.pf-m-scrollable-auto-height": {
"c_panel__main_MaxHeight": {
"name": "--pf-v6-c-panel__main--MaxHeight",
"value": "100%"
}
},
":where(.pf-v6-theme-glass) .pf-v6-c-panel.pf-m-glass": {
"c_panel_BackgroundColor": {
"name": "--pf-v6-c-panel--BackgroundColor",
"value": "initial",
"values": [
"--pf-v6-c-panel--m-glass--BackgroundColor",
"--pf-t--global--background--color--glass--primary--default",
"initial"
]
},
"c_panel_before_BorderWidth": {
"name": "--pf-v6-c-panel--before--BorderWidth",
"value": "initial",
"values": [
"--pf-v6-c-panel--m-glass--before--BorderWidth",
"--pf-t--global--border--width--glass--default",
"initial"
]
},
"c_panel_before_BorderColor": {
"name": "--pf-v6-c-panel--before--BorderColor",
"value": "initial",
"values": [
"--pf-v6-c-panel--m-glass--before--BorderColor",
"--pf-t--global--border--color--glass--default",
"initial"
]
},
"c_panel_BoxShadow": {
"name": "--pf-v6-c-panel--BoxShadow",
"value": "0px\n 4px\n 10px\n 0px\n rgb(41, 41, 41, 0.1500)",
"values": [
"--pf-v6-c-panel--m-glass--BoxShadow",
"--pf-t--global--box-shadow--glass--default",
"--pf-t--global--box-shadow--md",
"--pf-t--global--box-shadow--X--md--default\n --pf-t--global--box-shadow--Y--md--default\n --pf-t--global--box-shadow--blur--md\n --pf-t--global--box-shadow--spread--md--default\n --pf-t--global--box-shadow--color--md--default",
"--pf-t--global--box-shadow--X--400\n --pf-t--global--box-shadow--Y--600\n --pf-t--global--box-shadow--blur--200\n --pf-t--global--box-shadow--spread--100\n --pf-t--global--box-shadow--color--100",
"0px\n 4px\n 10px\n 0px\n rgb(41, 41, 41, 0.1500)"
]
},
"c_panel_BorderRadius": {
"name": "--pf-v6-c-panel--BorderRadius",
"value": "initial",
"values": [
"--pf-v6-c-panel--m-glass--BorderRadius",
"--pf-t--global--border--radius--glass--default",
"initial"
]
}
},
".pf-v6-c-panel.pf-m-no-border": {
"c_panel_before_BorderWidth": {
"name": "--pf-v6-c-panel--before--BorderWidth",
"value": "0",
"values": [
"--pf-v6-c-panel--m-no-border--before--BorderWidth",
"0"
]
}
},
".pf-v6-c-panel.pf-m-pill": {
"c_panel_BorderRadius": {
"name": "--pf-v6-c-panel--BorderRadius",
"value": "999px",
"values": [
"--pf-v6-c-panel--m-pill--BorderRadius",
"--pf-t--global--border--radius--pill",
"--pf-t--global--border--radius--500",
"999px"
]
}
}
};
export default c_panel;