/* PatternFly v6 Design Tokens using light-dark() for theme-aware values */ :root { --pf-v6-global--inverse--multiplier: 1; /* Base Color Palette - Fixed values (same in light and dark) */ --pf-t--color--black: #000000; --pf-t--color--white: #ffffff; --pf-t--color--blue--10: #e0f0ff; --pf-t--color--blue--20: #b9dafc; --pf-t--color--blue--30: #92c5f9; --pf-t--color--blue--40: #4394e5; --pf-t--color--blue--50: #0066cc; --pf-t--color--blue--60: #004d99; --pf-t--color--blue--70: #003366; --pf-t--color--blue--80: #032142; --pf-t--color--gray--10: #f2f2f2; --pf-t--color--gray--20: #e0e0e0; --pf-t--color--gray--30: #c7c7c7; --pf-t--color--gray--40: #a3a3a3; --pf-t--color--gray--50: #707070; --pf-t--color--gray--60: #4d4d4d; --pf-t--color--gray--70: #383838; --pf-t--color--gray--80: #292929; --pf-t--color--gray--90: #1f1f1f; --pf-t--color--gray--95: #151515; --pf-t--color--green--10: #e9f7df; --pf-t--color--green--20: #d1f1bb; --pf-t--color--green--30: #afdc8f; --pf-t--color--green--40: #87bb62; --pf-t--color--green--50: #63993d; --pf-t--color--green--60: #3d7317; --pf-t--color--green--70: #204d00; --pf-t--color--green--80: #183301; --pf-t--color--orange--10: #ffe8cc; --pf-t--color--orange--20: #fccb8f; --pf-t--color--orange--30: #f8ae54; --pf-t--color--orange--40: #f5921b; --pf-t--color--orange--50: #ca6c0f; --pf-t--color--orange--60: #9e4a06; --pf-t--color--orange--70: #732e00; --pf-t--color--orange--80: #4d1f00; --pf-t--color--purple--10: #ece6ff; --pf-t--color--purple--20: #d0c5f4; --pf-t--color--purple--30: #b6a6e9; --pf-t--color--purple--40: #876fd4; --pf-t--color--purple--50: #5e40be; --pf-t--color--purple--60: #3d2785; --pf-t--color--purple--70: #21134d; --pf-t--color--purple--80: #1b0d33; --pf-t--color--red--10: #fce3e3; --pf-t--color--red--20: #fbc5c5; --pf-t--color--red--30: #f9a8a8; --pf-t--color--red--40: #f56e6e; --pf-t--color--red--50: #ee0000; --pf-t--color--red--60: #a60000; --pf-t--color--red--70: #5f0000; --pf-t--color--red--80: #3f0000; --pf-t--color--red-orange--10: #ffe3d9; --pf-t--color--red-orange--20: #fbbea8; --pf-t--color--red-orange--30: #f89b78; --pf-t--color--red-orange--40: #f4784a; --pf-t--color--red-orange--50: #f0561d; --pf-t--color--red-orange--60: #b1380b; --pf-t--color--red-orange--70: #731f00; --pf-t--color--red-orange--80: #4c1405; --pf-t--color--teal--10: #daf2f2; --pf-t--color--teal--20: #b9e5e5; --pf-t--color--teal--30: #9ad8d8; --pf-t--color--teal--40: #63bdbd; --pf-t--color--teal--50: #37a3a3; --pf-t--color--teal--60: #147878; --pf-t--color--teal--70: #004d4d; --pf-t--color--teal--80: #003333; --pf-t--color--yellow--10: #fff4cc; --pf-t--color--yellow--20: #ffe072; --pf-t--color--yellow--30: #ffcc17; --pf-t--color--yellow--40: #dca614; --pf-t--color--yellow--50: #b98412; --pf-t--color--yellow--60: #96640f; --pf-t--color--yellow--70: #73480b; --pf-t--color--yellow--80: #54330b; /* Fixed semantic colors and values */ --pf-t--global--background--color--100: var(--pf-t--color--white); --pf-t--global--background--color--200: var(--pf-t--color--gray--10); --pf-t--global--background--color--300: var(--pf-t--color--gray--20); --pf-t--global--background--color--400: var(--pf-t--color--gray--80); --pf-t--global--background--color--450: var(--pf-t--color--gray--70); --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000); --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500); --pf-t--global--background--color--highlight--100: var(--pf-t--color--yellow--30); --pf-t--global--background--color--highlight--200: var(--pf-t--color--yellow--40); --pf-t--global--background--color--tertiary--default: var(--pf-t--global--background--color--600); --pf-t--global--border--color--high-contrast: rgba(255, 255, 255, 0.0000); /* Border Radius */ --pf-t--global--border--radius--0: 0px; --pf-t--global--border--radius--100: 4px; --pf-t--global--border--radius--200: 6px; --pf-t--global--border--radius--300: 16px; --pf-t--global--border--radius--400: 24px; --pf-t--global--border--radius--500: 999px; --pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400); --pf-t--global--border--radius--medium: var(--pf-t--global--border--radius--300); --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--500); --pf-t--global--border--radius--sharp: var(--pf-t--global--border--radius--0); --pf-t--global--border--radius--small: var(--pf-t--global--border--radius--200); --pf-t--global--border--radius--tiny: var(--pf-t--global--border--radius--100); /* Border Width */ --pf-t--global--border--width--100: 1px; --pf-t--global--border--width--200: 2px; --pf-t--global--border--width--300: 3px; --pf-t--global--border--width--400: 4px; --pf-t--global--border--width--action--clicked: var(--pf-t--global--border--width--200); --pf-t--global--border--width--action--default: var(--pf-t--global--border--width--100); --pf-t--global--border--width--action--hover: var(--pf-t--global--border--width--200); --pf-t--global--border--width--action--plain--clicked: 0px; --pf-t--global--border--width--action--plain--default: 0px; --pf-t--global--border--width--action--plain--hover: 0px; --pf-t--global--border--width--box--clicked: var(--pf-t--global--border--width--200); --pf-t--global--border--width--box--default: var(--pf-t--global--border--width--100); --pf-t--global--border--width--box--hover: var(--pf-t--global--border--width--100); --pf-t--global--border--width--box--status--default: var(--pf-t--global--border--width--200); --pf-t--global--border--width--box--status--read: var(--pf-t--global--border--width--100); --pf-t--global--border--width--control--clicked: var(--pf-t--global--border--width--200); --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100); --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--100); --pf-t--global--border--width--divider--clicked: var(--pf-t--global--border--width--100); --pf-t--global--border--width--divider--default: var(--pf-t--global--border--width--100); --pf-t--global--border--width--divider--hover: var(--pf-t--global--border--width--100); --pf-t--global--border--width--extra-strong: var(--pf-t--global--border--width--300); --pf-t--global--border--width--high-contrast--extra-strong: 0px; --pf-t--global--border--width--high-contrast--regular: 0px; --pf-t--global--border--width--high-contrast--strong: 0px; --pf-t--global--border--width--main--default: var(--pf-t--global--border--width--400); --pf-t--global--border--width--regular: var(--pf-t--global--border--width--100); --pf-t--global--border--width--strong: var(--pf-t--global--border--width--200); /* Box Shadow */ --pf-t--global--box-shadow--X--50: -20px; --pf-t--global--box-shadow--X--100: -10px; --pf-t--global--box-shadow--X--200: -4px; --pf-t--global--box-shadow--X--300: -1px; --pf-t--global--box-shadow--X--400: 0px; --pf-t--global--box-shadow--X--500: 1px; --pf-t--global--box-shadow--X--600: 4px; --pf-t--global--box-shadow--X--700: 10px; --pf-t--global--box-shadow--X--800: 20px; --pf-t--global--box-shadow--Y--50: -20px; --pf-t--global--box-shadow--Y--100: -10px; --pf-t--global--box-shadow--Y--200: -4px; --pf-t--global--box-shadow--Y--300: -1px; --pf-t--global--box-shadow--Y--400: 0px; --pf-t--global--box-shadow--Y--500: 1px; --pf-t--global--box-shadow--Y--600: 4px; --pf-t--global--box-shadow--Y--700: 10px; --pf-t--global--box-shadow--Y--800: 20px; --pf-t--global--box-shadow--blur--100: 4px; --pf-t--global--box-shadow--blur--200: 9px; --pf-t--global--box-shadow--blur--300: 20px; --pf-t--global--box-shadow--color--100: rgba(41, 41, 41, 0.1500); --pf-t--global--box-shadow--color--200: rgba(41, 41, 41, 0.2000); --pf-t--global--box-shadow--spread--100: 0px; --pf-t--global--box-shadow--spread--200: -4px; --pf-t--global--box-shadow--spread--300: -8px; --pf-t--global--box-shadow--spread--400: -20px; --pf-t--global--box-shadow--sm: var(--pf-t--global--box-shadow--X--sm--default) var(--pf-t--global--box-shadow--Y--sm--default) var(--pf-t--global--box-shadow--blur--sm) var(--pf-t--global--box-shadow--spread--sm--default) var(--pf-t--global--box-shadow--color--sm--default); --pf-t--global--box-shadow--md: var(--pf-t--global--box-shadow--X--md--default) var(--pf-t--global--box-shadow--Y--md--default) var(--pf-t--global--box-shadow--blur--md) var(--pf-t--global--box-shadow--spread--md--default) var(--pf-t--global--box-shadow--color--md--default); --pf-t--global--box-shadow--lg: var(--pf-t--global--box-shadow--X--lg--default) var(--pf-t--global--box-shadow--Y--lg--default) var(--pf-t--global--box-shadow--blur--lg) var(--pf-t--global--box-shadow--spread--lg--default) var(--pf-t--global--box-shadow--color--lg--default); /* Breakpoints */ --pf-t--global--breakpoint--100: 0rem; --pf-t--global--breakpoint--200: 36rem; --pf-t--global--breakpoint--250: 40rem; --pf-t--global--breakpoint--300: 48rem; --pf-t--global--breakpoint--350: 60rem; --pf-t--global--breakpoint--400: 62rem; --pf-t--global--breakpoint--500: 75rem; --pf-t--global--breakpoint--550: 80rem; --pf-t--global--breakpoint--600: 90.625rem; --pf-t--global--breakpoint--xs: var(--pf-t--global--breakpoint--100); --pf-t--global--breakpoint--sm: var(--pf-t--global--breakpoint--200); --pf-t--global--breakpoint--md: var(--pf-t--global--breakpoint--300); --pf-t--global--breakpoint--lg: var(--pf-t--global--breakpoint--400); --pf-t--global--breakpoint--xl: var(--pf-t--global--breakpoint--500); --pf-t--global--breakpoint--2xl: var(--pf-t--global--breakpoint--600); /* Status Colors - Fixed */ --pf-t--global--color--status--success--100: var(--pf-t--color--green--60); --pf-t--global--color--status--success--150: #3d7019; --pf-t--global--color--status--success--200: var(--pf-t--color--green--70); --pf-t--global--color--status--success--300: var(--pf-t--color--green--80); --pf-t--global--color--status--warning--100: var(--pf-t--color--yellow--30); --pf-t--global--color--status--warning--200: var(--pf-t--color--yellow--40); --pf-t--global--color--status--warning--300: var(--pf-t--color--yellow--50); --pf-t--global--color--status--warning--400: var(--pf-t--color--yellow--60); --pf-t--global--color--status--warning--500: var(--pf-t--color--yellow--70); --pf-t--global--color--status--warning--600: var(--pf-t--color--yellow--80); --pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60); --pf-t--global--color--status--danger--200: var(--pf-t--color--red-orange--70); --pf-t--global--color--status--danger--300: var(--pf-t--color--red-orange--80); --pf-t--global--color--status--info--100: var(--pf-t--color--purple--50); --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60); --pf-t--global--color--status--info--300: var(--pf-t--color--purple--70); --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60); --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70); --pf-t--global--color--status--custom--300: var(--pf-t--color--teal--80); /* Nonstatus Colors - Fixed (light mode) */ --pf-t--global--color--nonstatus--green--400: #3d7019; --pf-t--global--color--nonstatus--blue--100: var(--pf-t--color--blue--20); --pf-t--global--color--nonstatus--blue--200: var(--pf-t--color--blue--30); --pf-t--global--color--nonstatus--blue--300: var(--pf-t--color--blue--40); --pf-t--global--color--nonstatus--blue--400: var(--pf-t--color--blue--60); --pf-t--global--color--nonstatus--blue--500: var(--pf-t--color--blue--70); --pf-t--global--color--nonstatus--gray--50: var(--pf-t--color--gray--10); --pf-t--global--color--nonstatus--gray--100: var(--pf-t--color--gray--20); --pf-t--global--color--nonstatus--gray--200: var(--pf-t--color--gray--30); --pf-t--global--color--nonstatus--gray--300: var(--pf-t--color--gray--40); --pf-t--global--color--nonstatus--gray--400: var(--pf-t--color--gray--60); --pf-t--global--color--nonstatus--gray--500: var(--pf-t--color--gray--70); --pf-t--global--color--nonstatus--green--100: var(--pf-t--color--green--20); --pf-t--global--color--nonstatus--green--200: var(--pf-t--color--green--30); --pf-t--global--color--nonstatus--green--300: var(--pf-t--color--green--40); --pf-t--global--color--nonstatus--green--500: var(--pf-t--color--green--70); --pf-t--global--color--nonstatus--orange--100: var(--pf-t--color--orange--20); --pf-t--global--color--nonstatus--orange--200: var(--pf-t--color--orange--30); --pf-t--global--color--nonstatus--orange--300: var(--pf-t--color--orange--40); --pf-t--global--color--nonstatus--orange--400: var(--pf-t--color--orange--60); --pf-t--global--color--nonstatus--orange--500: var(--pf-t--color--orange--70); --pf-t--global--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--20); --pf-t--global--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--30); --pf-t--global--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--40); --pf-t--global--color--nonstatus--orangered--400: var(--pf-t--color--red-orange--60); --pf-t--global--color--nonstatus--orangered--500: var(--pf-t--color--red-orange--70); --pf-t--global--color--nonstatus--purple--100: var(--pf-t--color--purple--20); --pf-t--global--color--nonstatus--purple--200: var(--pf-t--color--purple--30); --pf-t--global--color--nonstatus--purple--300: var(--pf-t--color--purple--40); --pf-t--global--color--nonstatus--purple--400: var(--pf-t--color--purple--50); --pf-t--global--color--nonstatus--purple--500: var(--pf-t--color--purple--60); --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20); --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30); --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40); --pf-t--global--color--nonstatus--red--400: var(--pf-t--color--red--60); --pf-t--global--color--nonstatus--red--500: var(--pf-t--color--red--70); --pf-t--global--color--nonstatus--teal--100: var(--pf-t--color--teal--20); --pf-t--global--color--nonstatus--teal--200: var(--pf-t--color--teal--30); --pf-t--global--color--nonstatus--teal--300: var(--pf-t--color--teal--40); --pf-t--global--color--nonstatus--teal--400: var(--pf-t--color--teal--70); --pf-t--global--color--nonstatus--teal--500: var(--pf-t--color--teal--80); --pf-t--global--color--nonstatus--yellow--100: var(--pf-t--color--yellow--20); --pf-t--global--color--nonstatus--yellow--200: var(--pf-t--color--yellow--30); --pf-t--global--color--nonstatus--yellow--300: var(--pf-t--color--yellow--40); --pf-t--global--color--nonstatus--yellow--400: var(--pf-t--color--yellow--70); --pf-t--global--color--nonstatus--yellow--500: var(--pf-t--color--yellow--80); /* Disabled Colors - Fixed */ --pf-t--global--color--disabled--100: var(--pf-t--color--gray--30); --pf-t--global--color--disabled--200: var(--pf-t--color--gray--40); --pf-t--global--color--disabled--300: var(--pf-t--color--gray--60); /* Favorite Colors - Fixed */ --pf-t--global--color--favorite--100: var(--pf-t--color--yellow--30); --pf-t--global--color--favorite--200: var(--pf-t--color--yellow--40); --pf-t--global--color--favorite--300: var(--pf-t--color--yellow--70); --pf-t--global--color--favorite--400: var(--pf-t--color--yellow--80); /* Severity Colors - Fixed */ --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60); --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50); --pf-t--global--color--severity--important--200: var(--pf-t--color--orange--60); --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50); --pf-t--global--color--severity--minor--200: var(--pf-t--color--gray--80); --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40); --pf-t--global--color--severity--moderate--200: var(--pf-t--color--yellow--70); --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40); --pf-t--global--color--severity--none--200: var(--pf-t--color--blue--60); --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30); --pf-t--global--color--severity--undefined--200: var(--pf-t--color--gray--60); /* Brand Colors - Fixed */ --pf-t--global--color--brand--100: var(--pf-t--color--blue--40); --pf-t--global--color--brand--200: var(--pf-t--color--blue--50); --pf-t--global--color--brand--300: var(--pf-t--color--blue--60); --pf-t--global--color--brand--400: var(--pf-t--color--blue--70); --pf-t--global--color--brand--500: var(--pf-t--color--blue--80); --pf-t--global--color--brand--clicked: var(--pf-t--global--color--brand--300); --pf-t--global--color--brand--default: var(--pf-t--global--color--brand--200); --pf-t--global--color--brand--hover: var(--pf-t--global--color--brand--300); /* Adaptive colors using light-dark() */ --pf-t--global--color--brand--clicked: light-dark(var(--pf-t--global--color--brand--300), var(--pf-t--color--blue--20)); --pf-t--global--color--brand--default: light-dark(var(--pf-t--global--color--brand--200), var(--pf-t--color--blue--30)); --pf-t--global--color--brand--hover: light-dark(var(--pf-t--global--color--brand--300), var(--pf-t--color--blue--20)); --pf-t--global--color--favorite--clicked: light-dark(var(--pf-t--global--color--favorite--200), var(--pf-t--color--yellow--20)); --pf-t--global--color--favorite--default: light-dark(var(--pf-t--global--color--favorite--100), var(--pf-t--color--yellow--30)); --pf-t--global--color--favorite--hover: light-dark(var(--pf-t--global--color--favorite--200), var(--pf-t--color--yellow--20)); --pf-t--global--color--nonstatus--blue--clicked: light-dark(var(--pf-t--global--color--nonstatus--blue--200), var(--pf-t--color--blue--20)); --pf-t--global--color--nonstatus--blue--default: light-dark(var(--pf-t--global--color--nonstatus--blue--100), var(--pf-t--color--blue--30)); --pf-t--global--color--nonstatus--blue--hover: light-dark(var(--pf-t--global--color--nonstatus--blue--200), var(--pf-t--color--blue--20)); --pf-t--global--color--nonstatus--gray--clicked: light-dark(var(--pf-t--global--color--nonstatus--gray--200), var(--pf-t--color--gray--50)); --pf-t--global--color--nonstatus--gray--default: light-dark(var(--pf-t--global--color--nonstatus--gray--100), var(--pf-t--color--gray--60)); --pf-t--global--color--nonstatus--gray--hover: light-dark(var(--pf-t--global--color--nonstatus--gray--200), var(--pf-t--color--gray--50)); --pf-t--global--color--nonstatus--green--clicked: light-dark(var(--pf-t--global--color--nonstatus--green--200), var(--pf-t--color--green--20)); --pf-t--global--color--nonstatus--green--default: light-dark(var(--pf-t--global--color--nonstatus--green--100), var(--pf-t--color--green--30)); --pf-t--global--color--nonstatus--green--hover: light-dark(var(--pf-t--global--color--nonstatus--green--200), var(--pf-t--color--green--20)); --pf-t--global--color--nonstatus--orange--clicked: light-dark(var(--pf-t--global--color--nonstatus--orange--200), var(--pf-t--color--orange--20)); --pf-t--global--color--nonstatus--orange--default: light-dark(var(--pf-t--global--color--nonstatus--orange--100), var(--pf-t--color--orange--30)); --pf-t--global--color--nonstatus--orange--hover: light-dark(var(--pf-t--global--color--nonstatus--orange--200), var(--pf-t--color--orange--20)); --pf-t--global--color--nonstatus--orangered--clicked: light-dark(var(--pf-t--global--color--nonstatus--orangered--200), var(--pf-t--color--red-orange--20)); --pf-t--global--color--nonstatus--orangered--default: light-dark(var(--pf-t--global--color--nonstatus--orangered--100), var(--pf-t--color--red-orange--30)); --pf-t--global--color--nonstatus--orangered--hover: light-dark(var(--pf-t--global--color--nonstatus--orangered--200), var(--pf-t--color--red-orange--20)); --pf-t--global--color--nonstatus--purple--clicked: light-dark(var(--pf-t--global--color--nonstatus--purple--200), var(--pf-t--color--purple--20)); --pf-t--global--color--nonstatus--purple--default: light-dark(var(--pf-t--global--color--nonstatus--purple--100), var(--pf-t--color--purple--30)); --pf-t--global--color--nonstatus--purple--hover: light-dark(var(--pf-t--global--color--nonstatus--purple--200), var(--pf-t--color--purple--20)); --pf-t--global--color--nonstatus--red--clicked: light-dark(var(--pf-t--global--color--nonstatus--red--200), var(--pf-t--color--red--20)); --pf-t--global--color--nonstatus--red--default: light-dark(var(--pf-t--global--color--nonstatus--red--100), var(--pf-t--color--red--30)); --pf-t--global--color--nonstatus--red--hover: light-dark(var(--pf-t--global--color--nonstatus--red--200), var(--pf-t--color--red--20)); --pf-t--global--color--nonstatus--teal--clicked: light-dark(var(--pf-t--global--color--nonstatus--teal--200), var(--pf-t--color--teal--20)); --pf-t--global--color--nonstatus--teal--default: light-dark(var(--pf-t--global--color--nonstatus--teal--100), var(--pf-t--color--teal--30)); --pf-t--global--color--nonstatus--teal--hover: light-dark(var(--pf-t--global--color--nonstatus--teal--200), var(--pf-t--color--teal--20)); --pf-t--global--color--nonstatus--yellow--clicked: light-dark(var(--pf-t--global--color--nonstatus--yellow--200), var(--pf-t--color--yellow--20)); --pf-t--global--color--nonstatus--yellow--default: light-dark(var(--pf-t--global--color--nonstatus--yellow--100), var(--pf-t--color--yellow--30)); --pf-t--global--color--nonstatus--yellow--hover: light-dark(var(--pf-t--global--color--nonstatus--yellow--200), var(--pf-t--color--yellow--20)); --pf-t--global--color--status--custom--clicked: light-dark(var(--pf-t--global--color--status--custom--200), var(--pf-t--color--teal--30)); --pf-t--global--color--status--custom--default: light-dark(var(--pf-t--global--color--status--custom--100), var(--pf-t--color--teal--40)); --pf-t--global--color--status--custom--hover: light-dark(var(--pf-t--global--color--status--custom--200), var(--pf-t--color--teal--30)); --pf-t--global--color--status--danger--clicked: light-dark(var(--pf-t--global--color--status--danger--200), var(--pf-t--color--red-orange--40)); --pf-t--global--color--status--danger--default: light-dark(var(--pf-t--global--color--status--danger--100), var(--pf-t--color--red-orange--50)); --pf-t--global--color--status--danger--hover: light-dark(var(--pf-t--global--color--status--danger--200), var(--pf-t--color--red-orange--40)); --pf-t--global--color--status--info--clicked: light-dark(var(--pf-t--global--color--status--info--200), var(--pf-t--color--purple--20)); --pf-t--global--color--status--info--default: light-dark(var(--pf-t--global--color--status--info--100), var(--pf-t--color--purple--30)); --pf-t--global--color--status--info--hover: light-dark(var(--pf-t--global--color--status--info--200), var(--pf-t--color--purple--20)); --pf-t--global--color--status--success--clicked: light-dark(var(--pf-t--global--color--status--success--200), var(--pf-t--color--green--30)); --pf-t--global--color--status--success--default: light-dark(var(--pf-t--global--color--status--success--100), var(--pf-t--color--green--40)); --pf-t--global--color--status--success--hover: light-dark(var(--pf-t--global--color--status--success--200), var(--pf-t--color--green--30)); --pf-t--global--color--status--warning--clicked: light-dark(var(--pf-t--global--color--status--warning--200), var(--pf-t--color--yellow--20)); --pf-t--global--color--status--warning--default: light-dark(var(--pf-t--global--color--status--warning--100), var(--pf-t--color--yellow--30)); --pf-t--global--color--status--warning--hover: light-dark(var(--pf-t--global--color--status--warning--200), var(--pf-t--color--yellow--20)); --pf-t--global--focus-ring--color--default: light-dark(var(--pf-t--global--focus-ring--color--100), var(--pf-t--color--blue--30)); /* status text colors */ --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle); --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default); --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked); --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--default); --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default); --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover); --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default); --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover); --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse); /* Motion */ --pf-t--global--delay--100: 0ms; --pf-t--global--delay--200: 50ms; --pf-t--global--delay--300: 100ms; --pf-t--global--delay--400: 7000ms; --pf-t--global--duration--50: 50ms; --pf-t--global--duration--100: 100ms; --pf-t--global--duration--200: 200ms; --pf-t--global--duration--300: 300ms; --pf-t--global--duration--400: 400ms; --pf-t--global--duration--500: 500ms; --pf-t--global--duration--600: 600ms; --pf-t--global--timing-function--100: cubic-bezier(.4, 0, .7, .2); --pf-t--global--timing-function--200: cubic-bezier(.4, 0, .2, 1); --pf-t--global--timing-function--300: cubic-bezier(0, 0, .2, 1); --pf-t--global--motion--timing-function--accelerate: var(--pf-t--global--timing-function--100); --pf-t--global--motion--timing-function--decelerate: var(--pf-t--global--timing-function--300); --pf-t--global--motion--timing-function--default: var(--pf-t--global--timing-function--200); --pf-t--global--motion--duration--xs: var(--pf-t--global--duration--50); --pf-t--global--motion--duration--sm: var(--pf-t--global--duration--100); --pf-t--global--motion--duration--md: var(--pf-t--global--duration--200); --pf-t--global--motion--duration--lg: var(--pf-t--global--duration--300); --pf-t--global--motion--duration--xl: var(--pf-t--global--duration--400); --pf-t--global--motion--duration--2xl: var(--pf-t--global--duration--500); --pf-t--global--motion--duration--3xl: var(--pf-t--global--duration--600); --pf-t--global--motion--duration--fade--short: var(--pf-t--global--motion--duration--sm); --pf-t--global--motion--duration--fade--default: var(--pf-t--global--motion--duration--md); --pf-t--global--motion--duration--fade--long: var(--pf-t--global--motion--duration--lg); --pf-t--global--motion--duration--icon--short: var(--pf-t--global--motion--duration--xs); --pf-t--global--motion--duration--icon--default: var(--pf-t--global--motion--duration--sm); --pf-t--global--motion--duration--icon--long: var(--pf-t--global--motion--duration--md); /* Typography */ --pf-t--global--font--family--100: "Red Hat Text", "RedHatText", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif; --pf-t--global--font--family--200: "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif; --pf-t--global--font--family--300: "Red Hat Mono", "RedHatMono", "Courier New", Courier, monospace; --pf-t--global--font--family--body: var(--pf-t--global--font--family--100); --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200); --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300); --pf-t--global--font--line-height--100: 1.3; --pf-t--global--font--line-height--200: 1.5; --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200); --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100); --pf-t--global--font--size--100: 0.75rem; --pf-t--global--font--size--200: 0.875rem; --pf-t--global--font--size--300: 1rem; --pf-t--global--font--size--400: 1.125rem; --pf-t--global--font--size--500: 1.25rem; --pf-t--global--font--size--600: 1.5rem; --pf-t--global--font--size--700: 1.75rem; --pf-t--global--font--size--800: 2.25rem; --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100); --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200); --pf-t--global--font--size--md: var(--pf-t--global--font--size--300); --pf-t--global--font--size--lg: var(--pf-t--global--font--size--400); --pf-t--global--font--size--xl: var(--pf-t--global--font--size--500); --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600); --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700); --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800); --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--xs); --pf-t--global--font--size--body--default: var(--pf-t--global--font--size--sm); --pf-t--global--font--size--body--lg: var(--pf-t--global--font--size--md); --pf-t--global--font--weight--100: 400; --pf-t--global--font--weight--200: 500; --pf-t--global--font--weight--300: 500; --pf-t--global--font--weight--400: 700; --pf-t--global--font--weight--body--default: var(--pf-t--global--font--weight--100); --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200); --pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300); --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400); --pf-t--global--font--size--heading--h1: var(--pf-t--global--font--size--2xl); --pf-t--global--font--size--heading--h2: var(--pf-t--global--font--size--xl); --pf-t--global--font--size--heading--h3: var(--pf-t--global--font--size--lg); --pf-t--global--font--size--heading--h4: var(--pf-t--global--font--size--md); --pf-t--global--font--size--heading--h5: var(--pf-t--global--font--size--md); --pf-t--global--font--size--heading--h6: var(--pf-t--global--font--size--md); --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md); --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg); --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl); --pf-t--global--font--size--heading--lg: var(--pf-t--global--font--size--2xl); --pf-t--global--font--size--heading--xl: var(--pf-t--global--font--size--3xl); --pf-t--global--font--size--heading--2xl: var(--pf-t--global--font--size--4xl); /* Icon Sizes */ --pf-t--global--icon--size--100: 0.75rem; --pf-t--global--icon--size--200: 0.875rem; --pf-t--global--icon--size--250: 1rem; --pf-t--global--icon--size--300: 1.5rem; --pf-t--global--icon--size--400: 3.5rem; --pf-t--global--icon--size--500: 6rem; --pf-t--global--icon--size--sm: var(--pf-t--global--icon--size--100); --pf-t--global--icon--size--md: var(--pf-t--global--icon--size--200); --pf-t--global--icon--size--lg: var(--pf-t--global--icon--size--250); --pf-t--global--icon--size--xl: var(--pf-t--global--icon--size--300); --pf-t--global--icon--size--2xl: var(--pf-t--global--icon--size--400); --pf-t--global--icon--size--3xl: var(--pf-t--global--icon--size--500); --pf-t--global--icon--size--font--body--default: var(--pf-t--global--font--size--body--default); --pf-t--global--icon--size--font--body--lg: var(--pf-t--global--font--size--body--lg); --pf-t--global--icon--size--font--body--sm: var(--pf-t--global--font--size--body--sm); --pf-t--global--icon--size--font--heading--h1: var(--pf-t--global--font--size--heading--h1); --pf-t--global--icon--size--font--heading--h2: var(--pf-t--global--font--size--heading--h2); --pf-t--global--icon--size--font--heading--h3: var(--pf-t--global--font--size--heading--h3); --pf-t--global--icon--size--font--heading--h4: var(--pf-t--global--font--size--heading--h4); --pf-t--global--icon--size--font--heading--h5: var(--pf-t--global--font--size--heading--h5); --pf-t--global--icon--size--font--heading--h6: var(--pf-t--global--font--size--heading--h6); /* Spacing */ --pf-t--global--spacer--100: 0.25rem; --pf-t--global--spacer--200: 0.5rem; --pf-t--global--spacer--300: 1rem; --pf-t--global--spacer--400: 1.5rem; --pf-t--global--spacer--500: 2rem; --pf-t--global--spacer--600: 3rem; --pf-t--global--spacer--700: 4rem; --pf-t--global--spacer--800: 5rem; --pf-t--global--spacer--xs: var(--pf-t--global--spacer--100); --pf-t--global--spacer--sm: var(--pf-t--global--spacer--200); --pf-t--global--spacer--md: var(--pf-t--global--spacer--300); --pf-t--global--spacer--lg: var(--pf-t--global--spacer--400); --pf-t--global--spacer--xl: var(--pf-t--global--spacer--500); --pf-t--global--spacer--2xl: var(--pf-t--global--spacer--600); --pf-t--global--spacer--3xl: var(--pf-t--global--spacer--700); --pf-t--global--spacer--4xl: var(--pf-t--global--spacer--800); --pf-t--global--spacer--control--vertical--compact: var(--pf-t--global--spacer--xs); --pf-t--global--spacer--control--vertical--default: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--control--vertical--spacious: var(--pf-t--global--spacer--md); --pf-t--global--spacer--control--horizontal--compact: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--control--horizontal--default: var(--pf-t--global--spacer--md); --pf-t--global--spacer--control--horizontal--spacious: var(--pf-t--global--spacer--lg); --pf-t--global--spacer--action--horizontal--compact: var(--pf-t--global--spacer--md); --pf-t--global--spacer--action--horizontal--default: var(--pf-t--global--spacer--lg); --pf-t--global--spacer--action--horizontal--spacious: var(--pf-t--global--spacer--xl); --pf-t--global--spacer--action--horizontal--plain--compact: var(--pf-t--global--spacer--xs); --pf-t--global--spacer--action--horizontal--plain--default: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--action--horizontal--plain--spacious: var(--pf-t--global--spacer--md); --pf-t--global--spacer--control--vertical--plain: var(--pf-t--global--spacer--xs); --pf-t--global--spacer--control--horizontal--plain: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--gap--text-to-element--compact: var(--pf-t--global--spacer--xs); --pf-t--global--spacer--gap--text-to-element--default: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--gap--text-to-element--spacious: var(--pf-t--global--spacer--md); --pf-t--global--spacer--gap--group--vertical: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--gap--group--horizontal: var(--pf-t--global--spacer--md); --pf-t--global--spacer--gap--group-to-group--vertical--default: var(--pf-t--global--spacer--md); --pf-t--global--spacer--gap--group-to-group--horizontal--default: var(--pf-t--global--spacer--md); --pf-t--global--spacer--gap--group-to-group--vertical--compact: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--gap--group-to-group--horizontal--compact: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--gap--control-to-control--compact: var(--pf-t--global--spacer--xs); --pf-t--global--spacer--gap--control-to-control--default: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--gap--control-to-control--spacious: var(--pf-t--global--spacer--md); --pf-t--global--spacer--gap--action-to-action--compact: var(--pf-t--global--spacer--xs); --pf-t--global--spacer--gap--action-to-action--default: var(--pf-t--global--spacer--sm); --pf-t--global--spacer--gap--action-to-action--spacious: var(--pf-t--global--spacer--md); --pf-t--global--spacer--gap--action-to-action--plain: var(--pf-t--global--spacer--xs); /* Theme-dependent background colors using light-dark() */ --pf-t--global--background--color--100: light-dark(var(--pf-t--color--white), var(--pf-t--color--gray--95)); --pf-t--global--background--color--200: light-dark(var(--pf-t--color--gray--10), var(--pf-t--color--gray--80)); --pf-t--global--background--color--300: light-dark(var(--pf-t--color--gray--20), var(--pf-t--color--gray--70)); --pf-t--global--background--color--400: light-dark(var(--pf-t--color--gray--80), var(--pf-t--color--gray--10)); --pf-t--global--background--color--450: light-dark(var(--pf-t--color--gray--70), var(--pf-t--color--gray--20)); --pf-t--global--background--color--action--plain--default: light-dark(rgba(255, 255, 255, 0.0000), rgba(0, 0, 0, 0.0000)); --pf-t--global--background--color--action--plain--clicked: light-dark(var(--pf-t--global--background--color--600), var(--pf-t--global--dark--background--color--600)); --pf-t--global--background--color--action--plain--hover: light-dark(var(--pf-t--global--background--color--600), var(--pf-t--global--dark--background--color--600)); --pf-t--global--background--color--action--plain--alt--clicked: light-dark(var(--pf-t--global--background--color--100), var(--pf-t--global--dark--background--color--200)); --pf-t--global--background--color--action--plain--alt--hover: light-dark(var(--pf-t--global--background--color--100), var(--pf-t--global--dark--background--color--200)); --pf-t--global--background--color--backdrop--default: light-dark(var(--pf-t--global--background--color--500), var(--pf-t--global--dark--background--color--500)); --pf-t--global--background--color--primary--default: light-dark(var(--pf-t--global--background--color--100), var(--pf-t--global--dark--background--color--200)); --pf-t--global--background--color--primary--clicked: light-dark(var(--pf-t--global--background--color--200), var(--pf-t--global--dark--background--color--300)); --pf-t--global--background--color--primary--hover: light-dark(var(--pf-t--global--background--color--200), var(--pf-t--global--dark--background--color--300)); --pf-t--global--background--color--secondary--default: light-dark(var(--pf-t--global--background--color--200), var(--pf-t--global--dark--background--color--100)); --pf-t--global--background--color--secondary--clicked: light-dark(var(--pf-t--global--background--color--300), var(--pf-t--global--dark--background--color--200)); --pf-t--global--background--color--secondary--hover: light-dark(var(--pf-t--global--background--color--300), var(--pf-t--global--dark--background--color--200)); --pf-t--global--background--color--disabled--default: light-dark(var(--pf-t--color--gray--30), var(--pf-t--color--gray--60)); --pf-t--global--background--color--floating--default: light-dark(var(--pf-t--global--background--color--100), var(--pf-t--global--dark--background--color--300)); --pf-t--global--background--color--floating--clicked: light-dark(var(--pf-t--global--background--color--200), var(--pf-t--global--dark--background--color--200)); --pf-t--global--background--color--floating--hover: light-dark(var(--pf-t--global--background--color--200), var(--pf-t--global--dark--background--color--200)); --pf-t--global--background--color--control--default: light-dark(var(--pf-t--global--background--color--primary--default), var(--pf-t--global--dark--background--color--300)); --pf-t--global--background--color--control--read-only: light-dark(var(--pf-t--global--background--color--200), var(--pf-t--global--dark--background--color--300)); --pf-t--global--background--color--highlight--default: light-dark(var(--pf-t--global--background--color--highlight--100), var(--pf-t--global--dark--background--color--highlight--100)); --pf-t--global--background--color--highlight--clicked: light-dark(var(--pf-t--global--background--color--highlight--200), var(--pf-t--global--dark--background--color--highlight--200)); --pf-t--global--background--color--inverse--default: light-dark(var(--pf-t--global--background--color--400), var(--pf-t--global--dark--background--color--400)); --pf-t--global--background--color--inverse--clicked: light-dark(var(--pf-t--global--background--color--450), var(--pf-t--global--dark--background--color--450)); --pf-t--global--background--color--inverse--hover: light-dark(var(--pf-t--global--background--color--450), var(--pf-t--global--dark--background--color--450)); /* Theme-dependent border colors using light-dark() */ --pf-t--global--border--color--50: light-dark(var(--pf-t--color--gray--20), var(--pf-t--color--gray--60)); --pf-t--global--border--color--100: light-dark(var(--pf-t--color--gray--30), var(--pf-t--color--gray--50)); --pf-t--global--border--color--200: light-dark(var(--pf-t--color--gray--40), var(--pf-t--color--gray--40)); --pf-t--global--border--color--300: light-dark(var(--pf-t--color--gray--50), var(--pf-t--color--gray--30)); --pf-t--global--border--color--400: light-dark(var(--pf-t--color--gray--60), var(--pf-t--color--gray--20)); --pf-t--global--border--color--clicked: light-dark(var(--pf-t--global--color--brand--200), var(--pf-t--global--dark--color--brand--200)); --pf-t--global--border--color--default: light-dark(var(--pf-t--global--border--color--100), var(--pf-t--global--dark--border--color--200)); --pf-t--global--border--color--disabled: light-dark(var(--pf-t--color--gray--40), var(--pf-t--color--gray--50)); --pf-t--global--border--color--hover: light-dark(var(--pf-t--global--color--brand--100), var(--pf-t--global--dark--color--brand--100)); --pf-t--global--border--color--control--read-only: light-dark(var(--pf-t--global--border--color--50), var(--pf-t--global--dark--border--color--50)); --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked); --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default); --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover); --pf-t--global--border--color--nonstatus--blue--clicked: light-dark(var(--pf-t--global--color--nonstatus--blue--300), var(--pf-t--global--dark--color--nonstatus--blue--200)); --pf-t--global--border--color--nonstatus--blue--default: light-dark(var(--pf-t--global--color--nonstatus--blue--200), var(--pf-t--global--dark--color--nonstatus--blue--100)); --pf-t--global--border--color--nonstatus--blue--hover: light-dark(var(--pf-t--global--color--nonstatus--blue--300), var(--pf-t--global--dark--color--nonstatus--blue--200)); --pf-t--global--border--color--nonstatus--gray--clicked: light-dark(var(--pf-t--global--color--nonstatus--gray--300), var(--pf-t--global--dark--color--nonstatus--gray--300)); --pf-t--global--border--color--nonstatus--gray--default: light-dark(var(--pf-t--global--color--nonstatus--gray--200), var(--pf-t--global--dark--color--nonstatus--gray--200)); --pf-t--global--border--color--nonstatus--gray--hover: light-dark(var(--pf-t--global--color--nonstatus--gray--300), var(--pf-t--global--dark--color--nonstatus--gray--300)); --pf-t--global--border--color--nonstatus--green--clicked: light-dark(var(--pf-t--global--color--nonstatus--green--300), var(--pf-t--global--dark--color--nonstatus--green--200)); --pf-t--global--border--color--nonstatus--green--default: light-dark(var(--pf-t--global--color--nonstatus--green--200), var(--pf-t--global--dark--color--nonstatus--green--100)); --pf-t--global--border--color--nonstatus--green--hover: light-dark(var(--pf-t--global--color--nonstatus--green--300), var(--pf-t--global--dark--color--nonstatus--green--200)); --pf-t--global--border--color--nonstatus--orange--clicked: light-dark(var(--pf-t--global--color--nonstatus--orange--300), var(--pf-t--global--dark--color--nonstatus--orange--200)); --pf-t--global--border--color--nonstatus--orange--default: light-dark(var(--pf-t--global--color--nonstatus--orange--200), var(--pf-t--global--dark--color--nonstatus--orange--100)); --pf-t--global--border--color--nonstatus--orange--hover: light-dark(var(--pf-t--global--color--nonstatus--orange--300), var(--pf-t--global--dark--color--nonstatus--orange--200)); --pf-t--global--border--color--nonstatus--orangered--clicked: light-dark(var(--pf-t--global--color--nonstatus--orangered--300), var(--pf-t--global--dark--color--nonstatus--orangered--200)); --pf-t--global--border--color--nonstatus--orangered--default: light-dark(var(--pf-t--global--color--nonstatus--orangered--200), var(--pf-t--global--dark--color--nonstatus--orangered--100)); --pf-t--global--border--color--nonstatus--orangered--hover: light-dark(var(--pf-t--global--color--nonstatus--orangered--300), var(--pf-t--global--dark--color--nonstatus--orangered--200)); --pf-t--global--border--color--nonstatus--purple--clicked: light-dark(var(--pf-t--global--color--nonstatus--purple--300), var(--pf-t--global--dark--color--nonstatus--purple--200)); --pf-t--global--border--color--nonstatus--purple--default: light-dark(var(--pf-t--global--color--nonstatus--purple--200), var(--pf-t--global--dark--color--nonstatus--purple--100)); --pf-t--global--border--color--nonstatus--purple--hover: light-dark(var(--pf-t--global--color--nonstatus--purple--300), var(--pf-t--global--dark--color--nonstatus--purple--200)); --pf-t--global--border--color--nonstatus--red--clicked: light-dark(var(--pf-t--global--color--nonstatus--red--300), var(--pf-t--global--dark--color--nonstatus--red--200)); --pf-t--global--border--color--nonstatus--red--default: light-dark(var(--pf-t--global--color--nonstatus--red--200), var(--pf-t--global--dark--color--nonstatus--red--100)); --pf-t--global--border--color--nonstatus--red--hover: light-dark(var(--pf-t--global--color--nonstatus--red--300), var(--pf-t--global--dark--color--nonstatus--red--200)); --pf-t--global--border--color--nonstatus--teal--clicked: light-dark(var(--pf-t--global--color--nonstatus--teal--300), var(--pf-t--global--dark--color--nonstatus--teal--200)); --pf-t--global--border--color--nonstatus--teal--default: light-dark(var(--pf-t--global--color--nonstatus--teal--200), var(--pf-t--global--dark--color--nonstatus--teal--100)); --pf-t--global--border--color--nonstatus--teal--hover: light-dark(var(--pf-t--global--color--nonstatus--teal--300), var(--pf-t--global--dark--color--nonstatus--teal--200)); --pf-t--global--border--color--nonstatus--yellow--clicked: light-dark(var(--pf-t--global--color--nonstatus--yellow--300), var(--pf-t--global--dark--color--nonstatus--yellow--200)); --pf-t--global--border--color--nonstatus--yellow--default: light-dark(var(--pf-t--global--color--nonstatus--yellow--200), var(--pf-t--global--dark--color--nonstatus--yellow--100)); --pf-t--global--border--color--nonstatus--yellow--hover: light-dark(var(--pf-t--global--color--nonstatus--yellow--300), var(--pf-t--global--dark--color--nonstatus--yellow--200)); --pf-t--global--border--color--on-secondary: light-dark(var(--pf-t--global--border--color--300), var(--pf-t--global--dark--border--color--200)); --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default); --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); --pf-t--global--border--color--status--danger--clicked: var(--pf-t--global--color--status--danger--clicked); --pf-t--global--border--color--status--danger--default: var(--pf-t--global--color--status--danger--default); --pf-t--global--border--color--status--danger--hover: var(--pf-t--global--color--status--danger--hover); --pf-t--global--border--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); --pf-t--global--border--color--status--info--default: var(--pf-t--global--color--status--info--default); --pf-t--global--border--color--status--info--hover: var(--pf-t--global--color--status--info--hover); --pf-t--global--border--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); --pf-t--global--border--color--status--success--default: var(--pf-t--global--color--status--success--default); --pf-t--global--border--color--status--success--hover: var(--pf-t--global--color--status--success--hover); --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--clicked); --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--default); --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--hover); --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default); --pf-t--global--border--color--brand--clicked: var(--pf-t--global--color--brand--clicked); --pf-t--global--border--color--brand--default: var(--pf-t--global--color--brand--default); --pf-t--global--border--color--brand--hover: var(--pf-t--global--color--brand--hover); --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default); --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default); --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked); --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default); --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover); --pf-t--global--color--status--unread--clicked: var(--pf-t--global--color--brand--clicked); --pf-t--global--color--status--unread--default: var(--pf-t--global--color--brand--default); --pf-t--global--color--status--unread--hover: var(--pf-t--global--color--brand--hover); /* Theme-dependent text colors using light-dark() */ --pf-t--global--text--color--100: light-dark(var(--pf-t--color--gray--95), var(--pf-t--color--white)); --pf-t--global--text--color--200: light-dark(var(--pf-t--color--gray--60), var(--pf-t--color--gray--30)); --pf-t--global--text--color--250: light-dark(var(--pf-t--color--gray--70), var(--pf-t--color--gray--20)); --pf-t--global--text--color--300: var(--pf-t--color--white); --pf-t--global--text--color--regular: var(--pf-t--global--text--color--100); --pf-t--global--text--color--subtle: var(--pf-t--global--text--color--200); --pf-t--global--text--color--disabled: light-dark(var(--pf-t--color--gray--40), var(--pf-t--color--gray--50)); --pf-t--global--text--color--on-disabled: light-dark(var(--pf-t--color--gray--60), var(--pf-t--color--gray--40)); --pf-t--global--text--color--inverse: light-dark(var(--pf-t--global--text--color--300), var(--pf-t--global--dark--text--color--300)); --pf-t--global--icon--color--inverse: light-dark(var(--pf-t--global--icon--color--300), var(--pf-t--global--dark--icon--color--300)); --pf-t--global--text--color--brand--clicked: var(--pf-t--global--color--brand--clicked); --pf-t--global--text--color--brand--default: var(--pf-t--global--color--brand--default); --pf-t--global--text--color--brand--hover: var(--pf-t--global--color--brand--hover); --pf-t--global--text--color--on-brand--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--color--status--danger--200); --pf-t--global--text--color--status--danger--default: var(--pf-t--global--color--status--danger--100); --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--color--status--danger--200); --pf-t--global--text--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--text--color--status--on-danger--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-danger--hover: var(--pf-t--global--text--color--inverse); /* status text colors */ --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orange--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orange--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orange--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orangered--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orangered--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-orangered--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-purple--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-purple--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-purple--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-red--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-red--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-red--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-teal--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-teal--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-teal--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-yellow--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-yellow--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--nonstatus--on-yellow--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--placeholder: var(--pf-t--global--text--color--subtle); --pf-t--global--text--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); --pf-t--global--text--color--status--custom--default: var(--pf-t--global--color--status--custom--default); --pf-t--global--text--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); --pf-t--global--text--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); --pf-t--global--text--color--status--info--default: var(--pf-t--global--color--status--info--default); --pf-t--global--text--color--status--info--hover: var(--pf-t--global--color--status--info--hover); --pf-t--global--text--color--status--on-custom--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-custom--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-custom--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-info--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-info--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-info--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-success--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-success--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-success--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--on-warning--clicked: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--status--on-warning--default: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--status--on-warning--hover: var(--pf-t--global--text--color--regular); --pf-t--global--text--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); --pf-t--global--text--color--status--success--default: var(--pf-t--global--color--status--success--default); --pf-t--global--text--color--status--success--hover: var(--pf-t--global--color--status--success--hover); --pf-t--global--text--color--status--unread--on-attention--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-attention--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-attention--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-default--clicked: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse); --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300); --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200); --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300); /* Theme-dependent icon colors using light-dark() */ --pf-t--global--icon--color--100: light-dark(var(--pf-t--color--gray--90), var(--pf-t--color--gray--20)); --pf-t--global--icon--color--150: light-dark(var(--pf-t--color--gray--60), var(--pf-t--color--gray--40)); --pf-t--global--icon--color--200: light-dark(var(--pf-t--color--gray--50), var(--pf-t--color--gray--50)); --pf-t--global--icon--color--300: var(--pf-t--color--white); --pf-t--global--icon--color--regular: var(--pf-t--global--icon--color--100); --pf-t--global--icon--color--subtle: var(--pf-t--global--icon--color--200); --pf-t--global--icon--color--disabled: light-dark(var(--pf-t--color--gray--40), var(--pf-t--color--gray--50)); --pf-t--global--icon--color--on-disabled: light-dark(var(--pf-t--color--gray--60), var(--pf-t--color--gray--40)); --pf-t--global--icon--color--brand--clicked: var(--pf-t--global--color--brand--clicked); --pf-t--global--icon--color--brand--default: var(--pf-t--global--color--brand--default); --pf-t--global--icon--color--brand--hover: var(--pf-t--global--color--brand--hover); --pf-t--global--icon--color--on-brand--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--on-brand--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--danger--clicked: var(--pf-t--global--color--status--danger--200); --pf-t--global--icon--color--status--danger--default: var(--pf-t--global--color--status--danger--100); --pf-t--global--icon--color--status--danger--hover: var(--pf-t--global--color--status--danger--200); --pf-t--global--icon--color--status--on-danger--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-danger--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-danger--hover: var(--pf-t--global--icon--color--inverse); /* status icon colors */ --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-orange--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-orange--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-orange--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-orangered--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-orangered--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-orangered--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-purple--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-purple--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-purple--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-red--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-red--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-red--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-teal--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-teal--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-teal--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-yellow--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-yellow--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--nonstatus--on-yellow--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked); --pf-t--global--icon--color--status--custom--default: var(--pf-t--global--color--status--custom--default); --pf-t--global--icon--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover); --pf-t--global--icon--color--status--info--clicked: var(--pf-t--global--color--status--info--clicked); --pf-t--global--icon--color--status--info--default: var(--pf-t--global--color--status--info--default); --pf-t--global--icon--color--status--info--hover: var(--pf-t--global--color--status--info--hover); --pf-t--global--icon--color--status--on-custom--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-custom--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-custom--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-info--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-info--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-info--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-success--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-success--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-success--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--on-warning--clicked: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--status--on-warning--default: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--status--on-warning--hover: var(--pf-t--global--icon--color--regular); --pf-t--global--icon--color--status--success--clicked: var(--pf-t--global--color--status--success--clicked); --pf-t--global--icon--color--status--success--default: var(--pf-t--global--color--status--success--default); --pf-t--global--icon--color--status--success--hover: var(--pf-t--global--color--status--success--hover); --pf-t--global--icon--color--status--unread--on-attention--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-attention--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-attention--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-default--clicked: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-default--default: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--unread--on-default--hover: var(--pf-t--global--icon--color--inverse); --pf-t--global--icon--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300); --pf-t--global--icon--color--status--warning--default: var(--pf-t--global--color--status--warning--200); --pf-t--global--icon--color--status--warning--hover: var(--pf-t--global--color--status--warning--300); --pf-t--global--icon--color--favorite--clicked: var(--pf-t--global--color--favorite--clicked); --pf-t--global--icon--color--favorite--default: var(--pf-t--global--color--favorite--default); --pf-t--global--icon--color--favorite--hover: var(--pf-t--global--color--favorite--hover); --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--color--severity--critical--100); --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--100); --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--100); --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--100); --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--100); --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--100); --pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95); --pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80); --pf-t--global--dark--background--color--300: var(--pf-t--color--gray--70); --pf-t--global--dark--background--color--400: var(--pf-t--color--gray--10); --pf-t--global--dark--background--color--450: var(--pf-t--color--gray--20); --pf-t--global--dark--background--color--500: rgba(21, 21, 21, 0.8000); --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500); --pf-t--global--dark--background--color--highlight--100: var(--pf-t--color--yellow--20); --pf-t--global--dark--background--color--highlight--200: var(--pf-t--color--yellow--30); --pf-t--global--dark--border--color--100: var(--pf-t--color--gray--50); --pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40); --pf-t--global--dark--border--color--300: var(--pf-t--color--gray--30); --pf-t--global--dark--border--color--50: var(--pf-t--color--gray--60); --pf-t--global--dark--color--brand--100: var(--pf-t--color--blue--30); --pf-t--global--dark--color--brand--200: var(--pf-t--color--blue--20); --pf-t--global--dark--color--brand--300: var(--pf-t--color--blue--10); --pf-t--global--dark--color--disabled--100: var(--pf-t--color--gray--40); --pf-t--global--dark--color--disabled--200: var(--pf-t--color--gray--50); --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70); --pf-t--global--dark--color--disabled--400: var(--pf-t--color--gray--90); --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30); --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20); --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30); --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20); --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10); --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60); --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50); --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40); --pf-t--global--dark--color--nonstatus--gray--50: var(--pf-t--color--gray--70); --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30); --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20); --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10); --pf-t--global--dark--color--nonstatus--orange--100: var(--pf-t--color--orange--30); --pf-t--global--dark--color--nonstatus--orange--200: var(--pf-t--color--orange--20); --pf-t--global--dark--color--nonstatus--orange--300: var(--pf-t--color--orange--10); --pf-t--global--dark--color--nonstatus--orangered--100: var(--pf-t--color--red-orange--30); --pf-t--global--dark--color--nonstatus--orangered--200: var(--pf-t--color--red-orange--20); --pf-t--global--dark--color--nonstatus--orangered--300: var(--pf-t--color--red-orange--10); --pf-t--global--dark--color--nonstatus--purple--100: var(--pf-t--color--purple--30); --pf-t--global--dark--color--nonstatus--purple--200: var(--pf-t--color--purple--20); --pf-t--global--dark--color--nonstatus--purple--300: var(--pf-t--color--purple--10); --pf-t--global--dark--color--nonstatus--red--100: var(--pf-t--color--red--30); --pf-t--global--dark--color--nonstatus--red--200: var(--pf-t--color--red--20); --pf-t--global--dark--color--nonstatus--red--300: var(--pf-t--color--red--10); --pf-t--global--dark--color--nonstatus--teal--100: var(--pf-t--color--teal--30); --pf-t--global--dark--color--nonstatus--teal--200: var(--pf-t--color--teal--20); --pf-t--global--dark--color--nonstatus--teal--300: var(--pf-t--color--teal--10); --pf-t--global--dark--color--nonstatus--yellow--100: var(--pf-t--color--yellow--30); --pf-t--global--dark--color--nonstatus--yellow--200: var(--pf-t--color--yellow--20); --pf-t--global--dark--color--nonstatus--yellow--300: var(--pf-t--color--yellow--10); --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50); --pf-t--global--dark--color--severity--critical--200: var(--pf-t--color--red-orange--40); --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40); --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30); --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30); --pf-t--global--dark--color--severity--none--100: var(--pf-t--color--blue--30); --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40); --pf-t--global--dark--color--status--custom--100: var(--pf-t--color--teal--40); --pf-t--global--dark--color--status--custom--200: var(--pf-t--color--teal--30); --pf-t--global--dark--color--status--custom--300: var(--pf-t--color--teal--20); --pf-t--global--dark--color--status--danger--100: var(--pf-t--color--red-orange--50); --pf-t--global--dark--color--status--danger--200: var(--pf-t--color--red-orange--40); --pf-t--global--dark--color--status--danger--250: var(--pf-t--color--red-orange--30); --pf-t--global--dark--color--status--danger--300: var(--pf-t--color--red-orange--20); --pf-t--global--dark--color--status--info--100: var(--pf-t--color--purple--30); --pf-t--global--dark--color--status--info--200: var(--pf-t--color--purple--20); --pf-t--global--dark--color--status--info--300: var(--pf-t--color--purple--10); --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40); --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30); --pf-t--global--dark--color--status--success--300: var(--pf-t--color--green--20); --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30); --pf-t--global--dark--color--status--warning--200: var(--pf-t--color--yellow--20); --pf-t--global--dark--focus-ring--color--100: var(--pf-t--color--blue--30); --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10); --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40); --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90); --pf-t--global--dark--text--color--100: var(--pf-t--color--white); --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30); --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90); --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30); --pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20); --pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--10); --pf-t--global--dark--text--color--link--300: var(--pf-t--color--purple--30); --pf-t--global--dark--text--color--link--400: var(--pf-t--color--purple--20); /* Focus Ring */ --pf-t--global--focus-ring--color--100: var(--pf-t--color--blue--50); --pf-t--global--focus-ring--color--200: var(--pf-t--color--blue--60); --pf-t--global--focus-ring--position--inset: -4px; --pf-t--global--focus-ring--position--offset: 2px; --pf-t--global--focus-ring--width--inset: 3px; --pf-t--global--focus-ring--width--offset: 2px; /* Z-Index */ --pf-t--global--z-index--100: 100; --pf-t--global--z-index--200: 200; --pf-t--global--z-index--300: 300; --pf-t--global--z-index--400: 400; --pf-t--global--z-index--500: 500; --pf-t--global--z-index--600: 600; --pf-t--global--z-index--xs: var(--pf-t--global--z-index--100); --pf-t--global--z-index--sm: var(--pf-t--global--z-index--200); --pf-t--global--z-index--md: var(--pf-t--global--z-index--300); --pf-t--global--z-index--lg: var(--pf-t--global--z-index--400); --pf-t--global--z-index--xl: var(--pf-t--global--z-index--500); --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600); /* Additional box shadow variants */ --pf-t--global--box-shadow--X--lg--bottom: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--lg--default: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--lg--left: var(--pf-t--global--box-shadow--X--50); --pf-t--global--box-shadow--X--lg--right: var(--pf-t--global--box-shadow--X--800); --pf-t--global--box-shadow--X--lg--top: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--md--bottom: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--md--default: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--md--left: var(--pf-t--global--box-shadow--X--100); --pf-t--global--box-shadow--X--md--right: var(--pf-t--global--box-shadow--X--700); --pf-t--global--box-shadow--X--md--top: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--X--sm--left: var(--pf-t--global--box-shadow--X--200); --pf-t--global--box-shadow--X--sm--right: var(--pf-t--global--box-shadow--X--600); --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400); --pf-t--global--box-shadow--Y--lg--bottom: var(--pf-t--global--box-shadow--Y--800); --pf-t--global--box-shadow--Y--lg--default: var(--pf-t--global--box-shadow--Y--700); --pf-t--global--box-shadow--Y--lg--left: var(--pf-t--global--box-shadow--Y--400); --pf-t--global--box-shadow--Y--lg--right: var(--pf-t--global--box-shadow--Y--400); --pf-t--global--box-shadow--Y--lg--top: var(--pf-t--global--box-shadow--Y--50); --pf-t--global--box-shadow--Y--md--bottom: var(--pf-t--global--box-shadow--Y--700); --pf-t--global--box-shadow--Y--md--default: var(--pf-t--global--box-shadow--Y--600); --pf-t--global--box-shadow--Y--md--left: var(--pf-t--global--box-shadow--Y--400); --pf-t--global--box-shadow--Y--md--right: var(--pf-t--global--box-shadow--Y--400); --pf-t--global--box-shadow--Y--md--top: var(--pf-t--global--box-shadow--Y--100); --pf-t--global--box-shadow--Y--sm--bottom: var(--pf-t--global--box-shadow--Y--600); --pf-t--global--box-shadow--Y--sm--default: var(--pf-t--global--box-shadow--Y--500); --pf-t--global--box-shadow--Y--sm--left: var(--pf-t--global--box-shadow--Y--400); --pf-t--global--box-shadow--Y--sm--right: var(--pf-t--global--box-shadow--Y--400); --pf-t--global--box-shadow--Y--sm--top: var(--pf-t--global--box-shadow--Y--200); --pf-t--global--box-shadow--blur--lg: var(--pf-t--global--box-shadow--blur--300); --pf-t--global--box-shadow--blur--md: var(--pf-t--global--box-shadow--blur--200); --pf-t--global--box-shadow--blur--sm: var(--pf-t--global--box-shadow--blur--100); --pf-t--global--box-shadow--color--lg--default: light-dark(var(--pf-t--global--box-shadow--color--100), rgba(0, 0, 0, 0.5000)); --pf-t--global--box-shadow--color--lg--directional: light-dark(var(--pf-t--global--box-shadow--color--200), rgba(0, 0, 0, 0.7000)); --pf-t--global--box-shadow--color--md--default: light-dark(var(--pf-t--global--box-shadow--color--100), rgba(0, 0, 0, 0.5000)); --pf-t--global--box-shadow--color--md--directional: light-dark(var(--pf-t--global--box-shadow--color--100), rgba(0, 0, 0, 0.7000)); --pf-t--global--box-shadow--color--sm--default: light-dark(var(--pf-t--global--box-shadow--color--100), rgba(0, 0, 0, 0.5000)); --pf-t--global--box-shadow--color--sm--directional: light-dark(var(--pf-t--global--box-shadow--color--200), rgba(0, 0, 0, 0.7000)); --pf-t--global--box-shadow--spread--lg--default: var(--pf-t--global--box-shadow--spread--100); --pf-t--global--box-shadow--spread--lg--directional: var(--pf-t--global--box-shadow--spread--400); --pf-t--global--box-shadow--spread--md--default: var(--pf-t--global--box-shadow--spread--100); --pf-t--global--box-shadow--spread--md--directional: var(--pf-t--global--box-shadow--spread--300); --pf-t--global--box-shadow--spread--sm--default: var(--pf-t--global--box-shadow--spread--100); --pf-t--global--box-shadow--spread--sm--directional: var(--pf-t--global--box-shadow--spread--200); /* Directional box shadows */ --pf-t--global--box-shadow--sm--bottom: var(--pf-t--global--box-shadow--X--sm--bottom) var(--pf-t--global--box-shadow--Y--sm--bottom) var(--pf-t--global--box-shadow--blur--sm) var(--pf-t--global--box-shadow--spread--sm--directional) var(--pf-t--global--box-shadow--color--sm--directional); --pf-t--global--box-shadow--sm--left: var(--pf-t--global--box-shadow--X--sm--left) var(--pf-t--global--box-shadow--Y--sm--left) var(--pf-t--global--box-shadow--blur--sm) var(--pf-t--global--box-shadow--spread--sm--directional) var(--pf-t--global--box-shadow--color--sm--directional); --pf-t--global--box-shadow--sm--right: var(--pf-t--global--box-shadow--X--sm--right) var(--pf-t--global--box-shadow--Y--sm--right) var(--pf-t--global--box-shadow--blur--sm) var(--pf-t--global--box-shadow--spread--sm--directional) var(--pf-t--global--box-shadow--color--sm--directional); --pf-t--global--box-shadow--sm--top: var(--pf-t--global--box-shadow--X--sm--top) var(--pf-t--global--box-shadow--Y--sm--top) var(--pf-t--global--box-shadow--blur--sm) var(--pf-t--global--box-shadow--spread--sm--directional) var(--pf-t--global--box-shadow--color--sm--directional); --pf-t--global--box-shadow--md--bottom: var(--pf-t--global--box-shadow--X--md--bottom) var(--pf-t--global--box-shadow--Y--md--bottom) var(--pf-t--global--box-shadow--blur--md) var(--pf-t--global--box-shadow--spread--md--directional) var(--pf-t--global--box-shadow--color--md--directional); --pf-t--global--box-shadow--md--left: var(--pf-t--global--box-shadow--X--md--left) var(--pf-t--global--box-shadow--Y--md--left) var(--pf-t--global--box-shadow--blur--md) var(--pf-t--global--box-shadow--spread--md--directional) var(--pf-t--global--box-shadow--color--md--directional); --pf-t--global--box-shadow--md--right: var(--pf-t--global--box-shadow--X--md--right) var(--pf-t--global--box-shadow--Y--md--right) var(--pf-t--global--box-shadow--blur--md) var(--pf-t--global--box-shadow--spread--md--directional) var(--pf-t--global--box-shadow--color--md--directional); --pf-t--global--box-shadow--md--top: var(--pf-t--global--box-shadow--X--md--top) var(--pf-t--global--box-shadow--Y--md--top) var(--pf-t--global--box-shadow--blur--md) var(--pf-t--global--box-shadow--spread--md--directional) var(--pf-t--global--box-shadow--color--md--directional); --pf-t--global--box-shadow--lg--bottom: var(--pf-t--global--box-shadow--X--lg--bottom) var(--pf-t--global--box-shadow--Y--lg--bottom) var(--pf-t--global--box-shadow--blur--lg) var(--pf-t--global--box-shadow--spread--lg--directional) var(--pf-t--global--box-shadow--color--lg--directional); --pf-t--global--box-shadow--lg--left: var(--pf-t--global--box-shadow--X--lg--left) var(--pf-t--global--box-shadow--Y--lg--left) var(--pf-t--global--box-shadow--blur--lg) var(--pf-t--global--box-shadow--spread--lg--directional) var(--pf-t--global--box-shadow--color--lg--directional); --pf-t--global--box-shadow--lg--right: var(--pf-t--global--box-shadow--X--lg--right) var(--pf-t--global--box-shadow--Y--lg--right) var(--pf-t--global--box-shadow--blur--lg) var(--pf-t--global--box-shadow--spread--lg--directional) var(--pf-t--global--box-shadow--color--lg--directional); --pf-t--global--box-shadow--lg--top: var(--pf-t--global--box-shadow--X--lg--top) var(--pf-t--global--box-shadow--Y--lg--top) var(--pf-t--global--box-shadow--blur--lg) var(--pf-t--global--box-shadow--spread--lg--directional) var(--pf-t--global--box-shadow--color--lg--directional); /* Page Component Tokens */ --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default); --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome); --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md); /* Page Sidebar Tokens */ --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm); --pf-v6-c-page__sidebar--Width--base: 18.125rem; --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base); --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base); --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default); --pf-v6-c-page__sidebar--BoxShadow: var(--pf-t--global--box-shadow--md--right); --pf-v6-c-page__sidebar--TransitionProperty: opacity; --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default); --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate); --pf-v6-c-page__sidebar--TranslateX: -100%; --pf-v6-c-page__sidebar--Opacity: 0; --pf-v6-c-page__sidebar--m-expanded--Opacity: 1; --pf-v6-c-page__sidebar--xl--Opacity: 1; --pf-v6-c-page__sidebar--TranslateZ: 0; --pf-v6-c-page__sidebar--m-expanded--TranslateX: 0; --pf-v6-c-page__sidebar--xl--TranslateX: 0; --pf-v6-c-page__sidebar--MarginInlineEnd: calc(var(--pf-t--global--spacer--inset--page-chrome) / 2); --pf-v6-c-page__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg); --pf-v6-c-page__sidebar--PaddingInlineStart: 0; --pf-v6-c-page__sidebar--PaddingInlineEnd: 0; --pf-v6-c-page__sidebar--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-page__sidebar--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-page__sidebar-body--PaddingInlineEnd: calc(var(--pf-t--global--spacer--inset--page-chrome) / 2); --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome); /* Page Main Container Tokens */ --pf-v6-c-page__main-container--ZIndex: var(--pf-t--global--z-index--xs); --pf-v6-c-page__main-container--GridArea: main; --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg)); --pf-v6-c-page__main-container--AlignSelf: start; --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset); --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset); --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium); --pf-v6-c-page__main-container--BorderBlockStartWidth: var(--pf-t--global--border--width--main--default); --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-t--global--border--width--main--default); --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-t--global--border--width--main--default); --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-t--global--border--width--main--default); --pf-v6-c-page__main-container--BorderColor: var(--pf-t--global--border--color--main--default); /* Masthead Tokens */ --pf-v6-c-masthead--RowGap: var(--pf-t--global--spacer--sm); --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--gutter--default); --pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default); --pf-v6-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md); --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--lg); --pf-v6-c-masthead--BorderColor: var(--pf-t--global--border--color--default); --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default); --pf-v6-c-masthead__main--ColumnGap: var(--pf-t--global--spacer--md); --pf-v6-c-masthead__logo--MaxHeight: 2.375rem; --pf-v6-c-masthead__logo--Width: 11.8125rem; --pf-v6-c-masthead__toggle--Size: var(--pf-t--global--icon--size--xl); --pf-v6-c-masthead__content--ColumnGap: var(--pf-t--global--spacer--md); --pf-v6-c-masthead--m-display-stack--ColumnGap: var(--pf-t--global--spacer--gutter--default); --pf-v6-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr; --pf-v6-c-masthead--m-display-stack__toggle--GridColumn: 1; --pf-v6-c-masthead--m-display-stack__brand--GridColumn: -1 / 1; --pf-v6-c-masthead--m-display-stack__brand--Order: -1; --pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--RowGap); --pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor); --pf-v6-c-masthead--m-display-stack__content--GridColumn: 2; --pf-v6-c-masthead--m-display-stack__content--Order: 1; --pf-v6-c-masthead--m-display-stack__main--Display: contents; --pf-v6-c-masthead--m-display-stack__main--ColumnGap: unset; --pf-v6-c-masthead--m-display-inline--ColumnGap: 0; --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr; --pf-v6-c-masthead--m-display-inline__toggle--GridColumn: initial; --pf-v6-c-masthead--m-display-inline__brand--GridColumn: initial; --pf-v6-c-masthead--m-display-inline__brand--Order: initial; --pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd: 0; --pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd: 0; --pf-v6-c-masthead--m-display-inline__main--GridColumn: 1; --pf-v6-c-masthead--m-display-inline__content--GridColumn: 2; --pf-v6-c-masthead--m-display-inline__content--Order: 0; --pf-v6-c-masthead--m-display-inline__main--Display: flex; --pf-v6-c-masthead--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md); /* Masthead Toolbar Integration */ --pf-v6-c-masthead--c-toolbar--Width: 100%; --pf-v6-c-masthead--c-toolbar--PaddingBlockEnd: 0; --pf-v6-c-masthead--c-toolbar__content--MinWidth: 0; --pf-v6-c-masthead--c-toolbar__content--PaddingInlineStart: 0; --pf-v6-c-masthead--c-toolbar__content--PaddingInlineEnd: 0; --pf-v6-c-masthead--c-toolbar__content-section--FlexWrap: nowrap; /* Toolbar Tokens */ --pf-v6-c-toolbar--RowGap: var(--pf-t--global--spacer--md); --pf-v6-c-toolbar--PaddingBlockStart: 0; --pf-v6-c-toolbar--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-toolbar--PaddingInlineStart: 0; --pf-v6-c-toolbar--PaddingInlineEnd: 0; --pf-v6-c-toolbar--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-toolbar--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-toolbar--BackgroundColor: transparent; --pf-v6-c-toolbar--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-toolbar--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default); --pf-v6-c-toolbar--m-no-background--BackgroundColor: transparent; --pf-v6-c-toolbar__item--Width: auto; --pf-v6-c-toolbar__item--MinWidth: auto; --pf-v6-c-toolbar__item--RowGap: var(--pf-t--global--spacer--gap--group--vertical); --pf-v6-c-toolbar__item--ColumnGap: var(--pf-t--global--spacer--gap--group--horizontal); --pf-v6-c-toolbar__item--m-overflow-container--MinWidth: 0; --pf-v6-c-toolbar__group--RowGap: var(--pf-t--global--spacer--gap--group--vertical); --pf-v6-c-toolbar__group--ColumnGap: var(--pf-t--global--spacer--gap--group--horizontal); --pf-v6-c-toolbar__group--m-overflow-container--MinWidth: 0; --pf-v6-c-toolbar__content--RowGap: var(--pf-t--global--spacer--md); --pf-v6-c-toolbar__content--PaddingInlineStart: 0; --pf-v6-c-toolbar__content--PaddingInlineEnd: 0; --pf-v6-c-toolbar__content-section--RowGap: var(--pf-t--global--spacer--gap--group--vertical); --pf-v6-c-toolbar__content-section--ColumnGap: var(--pf-t--global--spacer--gap--group--horizontal); --pf-v6-c-toolbar__expandable-content--ZIndex: var(--pf-t--global--z-index--sm); --pf-v6-c-toolbar__expandable-content--RowGap: var(--pf-t--global--spacer--gap--group--vertical); --pf-v6-c-toolbar__expandable-content--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-toolbar__expandable-content--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-toolbar__expandable-content--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-toolbar__expandable-content--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-toolbar__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom); --pf-v6-c-toolbar__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default); --pf-v6-c-toolbar__expandable-content--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-toolbar__expandable-content--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--z-index--xs); --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md); --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md); --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom); --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default); --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast); --pf-v6-c-toolbar__expand-all-icon--Rotate: 0; --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default); --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default); --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg; --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default); --pf-v6-c-toolbar__item--m-label--FontWeight: var(--pf-t--global--font--weight--body--bold); --pf-v6-c-toolbar__group--m-label-group--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default); --pf-v6-c-toolbar__group--m-action-group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default); --pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain); --pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default); /* Toggle Group Tokens */ --pf-v6-c-toggle-group__button--PaddingBlockStart: var(--pf-t--global--spacer--sm); --pf-v6-c-toggle-group__button--PaddingInlineEnd: var(--pf-t--global--spacer--md); --pf-v6-c-toggle-group__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-toggle-group__button--PaddingInlineStart: var(--pf-t--global--spacer--md); --pf-v6-c-toggle-group__button--FontSize: var(--pf-t--global--font--size--body--default); --pf-v6-c-toggle-group__button--LineHeight: var(--pf-t--global--font--line-height--body); --pf-v6-c-toggle-group__button--Color: var(--pf-t--global--text--color--regular); --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default); --pf-v6-c-toggle-group__button--ZIndex: auto; --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover); --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs); --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default); --pf-v6-c-toggle-group__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular); --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default); --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default); --pf-v6-c-toggle-group__button--after--BorderWidth: 0; --pf-v6-c-toggle-group__button--after--BorderColor: transparent; --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default)); --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--tiny); --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--tiny); --pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--tiny); --pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--tiny); --pf-v6-c-toggle-group__icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-toggle-group__text--icon--MarginInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default); --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default); --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked); --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--alt); --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs); --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong); --pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default); --pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled); --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled); --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled); --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs); --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0; --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm); --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: 0; --pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart: var(--pf-t--global--spacer--sm); --pf-v6-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default); /* Spacer tokens */ --pf-t--global--spacer--inset--page-chrome: var(--pf-t--global--spacer--lg); --pf-t--global--spacer--gutter--default: var(--pf-t--global--spacer--md); --pf-t--global--border--color--main--default: var(--pf-t--global--background--color--primary--default); }