@patternfly/react-tokens/dist/esm/c_modal_box.js

This library provides access to the design tokens of PatternFly 4 from JavaScript

export const c_modal_box = {
  ".pf-v6-c-modal-box": {
    "c_modal_box_BackgroundColor": {
      "name": "--pf-v6-c-modal-box--BackgroundColor",
      "value": "#ffffff",
      "values": [
        "--pf-t--global--background--color--floating--default",
        "--pf-t--global--background--color--100",
        "--pf-t--color--white",
        "#ffffff"
      ]
    },
    "c_modal_box_BorderRadius": {
      "name": "--pf-v6-c-modal-box--BorderRadius",
      "value": "24px",
      "values": [
        "--pf-t--global--border--radius--large",
        "--pf-t--global--border--radius--400",
        "24px"
      ]
    },
    "c_modal_box_BoxShadow": {
      "name": "--pf-v6-c-modal-box--BoxShadow",
      "value": "0px\n    10px\n    20px\n    0px\n    rgba(41, 41, 41, 0.1500)",
      "values": [
        "--pf-t--global--box-shadow--lg",
        "--pf-t--global--box-shadow--X--lg--default\n    --pf-t--global--box-shadow--Y--lg--default\n    --pf-t--global--box-shadow--blur--lg\n    --pf-t--global--box-shadow--spread--lg--default\n    --pf-t--global--box-shadow--color--lg--default",
        "--pf-t--global--box-shadow--X--400\n    --pf-t--global--box-shadow--Y--700\n    --pf-t--global--box-shadow--blur--300\n    --pf-t--global--box-shadow--spread--100\n    --pf-t--global--box-shadow--color--100",
        "0px\n    10px\n    20px\n    0px\n    rgba(41, 41, 41, 0.1500)"
      ]
    },
    "c_modal_box_ZIndex": {
      "name": "--pf-v6-c-modal-box--ZIndex",
      "value": "500",
      "values": [
        "--pf-t--global--z-index--xl",
        "--pf-t--global--z-index--500",
        "500"
      ]
    },
    "c_modal_box_Width": {
      "name": "--pf-v6-c-modal-box--Width",
      "value": "100%"
    },
    "c_modal_box_MaxWidth": {
      "name": "--pf-v6-c-modal-box--MaxWidth",
      "value": "calc(100% - 2rem)",
      "values": [
        "calc(100% - --pf-t--global--spacer--xl)",
        "calc(100% - --pf-t--global--spacer--500)",
        "calc(100% - 2rem)"
      ]
    },
    "c_modal_box_m_sm_sm_MaxWidth": {
      "name": "--pf-v6-c-modal-box--m-sm--sm--MaxWidth",
      "value": "35rem"
    },
    "c_modal_box_m_md_Width": {
      "name": "--pf-v6-c-modal-box--m-md--Width",
      "value": "52.5rem"
    },
    "c_modal_box_m_lg_lg_MaxWidth": {
      "name": "--pf-v6-c-modal-box--m-lg--lg--MaxWidth",
      "value": "70rem"
    },
    "c_modal_box_MaxHeight": {
      "name": "--pf-v6-c-modal-box--MaxHeight",
      "value": "calc(100% - 3rem)",
      "values": [
        "calc(100% - --pf-t--global--spacer--2xl)",
        "calc(100% - --pf-t--global--spacer--600)",
        "calc(100% - 3rem)"
      ]
    },
    "c_modal_box_m_align_top_spacer": {
      "name": "--pf-v6-c-modal-box--m-align-top--spacer",
      "value": "0.5rem",
      "values": [
        "--pf-t--global--spacer--sm",
        "--pf-t--global--spacer--200",
        "0.5rem"
      ]
    },
    "c_modal_box_m_align_top_xl_spacer": {
      "name": "--pf-v6-c-modal-box--m-align-top--xl--spacer",
      "value": "2rem",
      "values": [
        "--pf-t--global--spacer--xl",
        "--pf-t--global--spacer--500",
        "2rem"
      ]
    },
    "c_modal_box_m_align_top_InsetBlockStart": {
      "name": "--pf-v6-c-modal-box--m-align-top--InsetBlockStart",
      "value": "0.5rem",
      "values": [
        "--pf-v6-c-modal-box--m-align-top--spacer",
        "--pf-t--global--spacer--sm",
        "--pf-t--global--spacer--200",
        "0.5rem"
      ]
    },
    "c_modal_box_m_align_top_MaxHeight": {
      "name": "--pf-v6-c-modal-box--m-align-top--MaxHeight",
      "value": "calc(100% - min(0.5rem, 3rem) - 0.5rem)",
      "values": [
        "calc(100% - min(--pf-v6-c-modal-box--m-align-top--spacer, --pf-t--global--spacer--2xl) - --pf-v6-c-modal-box--m-align-top--spacer)",
        "calc(100% - min(--pf-t--global--spacer--sm, --pf-t--global--spacer--600) - --pf-t--global--spacer--sm)",
        "calc(100% - min(--pf-t--global--spacer--200, 3rem) - --pf-t--global--spacer--200)",
        "calc(100% - min(0.5rem, 3rem) - 0.5rem)"
      ]
    },
    "c_modal_box_m_align_top_MaxWidth": {
      "name": "--pf-v6-c-modal-box--m-align-top--MaxWidth",
      "value": "calc(100% - min(0.5rem * 2, 2rem))",
      "values": [
        "calc(100% - min(--pf-v6-c-modal-box--m-align-top--spacer * 2, --pf-t--global--spacer--xl))",
        "calc(100% - min(--pf-t--global--spacer--sm * 2, --pf-t--global--spacer--500))",
        "calc(100% - min(--pf-t--global--spacer--200 * 2, 2rem))",
        "calc(100% - min(0.5rem * 2, 2rem))"
      ]
    },
    "c_modal_box_m_danger__title_icon_Color": {
      "name": "--pf-v6-c-modal-box--m-danger__title-icon--Color",
      "value": "#b1380b",
      "values": [
        "--pf-t--global--icon--color--status--danger--default",
        "--pf-t--global--color--status--danger--default",
        "--pf-t--global--color--status--danger--100",
        "--pf-t--color--red-orange--60",
        "#b1380b"
      ]
    },
    "c_modal_box_m_warning__title_icon_Color": {
      "name": "--pf-v6-c-modal-box--m-warning__title-icon--Color",
      "value": "#dca614",
      "values": [
        "--pf-t--global--icon--color--status--warning--default",
        "--pf-t--global--color--status--warning--200",
        "--pf-t--color--yellow--40",
        "#dca614"
      ]
    },
    "c_modal_box_m_success__title_icon_Color": {
      "name": "--pf-v6-c-modal-box--m-success__title-icon--Color",
      "value": "#3d7317",
      "values": [
        "--pf-t--global--icon--color--status--success--default",
        "--pf-t--global--color--status--success--default",
        "--pf-t--global--color--status--success--100",
        "--pf-t--color--green--60",
        "#3d7317"
      ]
    },
    "c_modal_box_m_info__title_icon_Color": {
      "name": "--pf-v6-c-modal-box--m-info__title-icon--Color",
      "value": "#5e40be",
      "values": [
        "--pf-t--global--icon--color--status--info--default",
        "--pf-t--global--color--status--info--default",
        "--pf-t--global--color--status--info--100",
        "--pf-t--color--purple--50",
        "#5e40be"
      ]
    },
    "c_modal_box_m_custom__title_icon_Color": {
      "name": "--pf-v6-c-modal-box--m-custom__title-icon--Color",
      "value": "#147878",
      "values": [
        "--pf-t--global--icon--color--status--custom--default",
        "--pf-t--global--color--status--custom--default",
        "--pf-t--global--color--status--custom--100",
        "--pf-t--color--teal--60",
        "#147878"
      ]
    },
    "c_modal_box__header_PaddingBlockStart": {
      "name": "--pf-v6-c-modal-box__header--PaddingBlockStart",
      "value": "1.5rem",
      "values": [
        "--pf-t--global--spacer--lg",
        "--pf-t--global--spacer--400",
        "1.5rem"
      ]
    },
    "c_modal_box__header_PaddingBlockEnd": {
      "name": "--pf-v6-c-modal-box__header--PaddingBlockEnd",
      "value": "0.5rem",
      "values": [
        "--pf-t--global--spacer--sm",
        "--pf-t--global--spacer--200",
        "0.5rem"
      ]
    },
    "c_modal_box__header_PaddingInlineEnd": {
      "name": "--pf-v6-c-modal-box__header--PaddingInlineEnd",
      "value": "1.5rem",
      "values": [
        "--pf-t--global--spacer--lg",
        "--pf-t--global--spacer--400",
        "1.5rem"
      ]
    },
    "c_modal_box__header_PaddingInlineStart": {
      "name": "--pf-v6-c-modal-box__header--PaddingInlineStart",
      "value": "1.5rem",
      "values": [
        "--pf-t--global--spacer--lg",
        "--pf-t--global--spacer--400",
        "1.5rem"
      ]
    },
    "c_modal_box__header_Gap": {
      "name": "--pf-v6-c-modal-box__header--Gap",
      "value": "1rem",
      "values": [
        "--pf-t--global--spacer--md",
        "--pf-t--global--spacer--300",
        "1rem"
      ]
    },
    "c_modal_box__header_main_Gap": {
      "name": "--pf-v6-c-modal-box__header-main--Gap",
      "value": "1rem",
      "values": [
        "--pf-t--global--spacer--md",
        "--pf-t--global--spacer--300",
        "1rem"
      ]
    },
    "c_modal_box__header_main_PaddingBlockStart": {
      "name": "--pf-v6-c-modal-box__header-main--PaddingBlockStart",
      "value": "0.5rem",
      "values": [
        "--pf-t--global--spacer--control--vertical--default",
        "--pf-t--global--spacer--sm",
        "--pf-t--global--spacer--200",
        "0.5rem"
      ]
    },
    "c_modal_box__title_LineHeight": {
      "name": "--pf-v6-c-modal-box__title--LineHeight",
      "value": "1.3",
      "values": [
        "--pf-t--global--font--line-height--heading",
        "--pf-t--global--font--line-height--100",
        "1.3"
      ]
    },
    "c_modal_box__title_FontFamily": {
      "name": "--pf-v6-c-modal-box__title--FontFamily",
      "value": "\"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",
      "values": [
        "--pf-t--global--font--family--heading",
        "--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"
      ]
    },
    "c_modal_box__title_FontWeight": {
      "name": "--pf-v6-c-modal-box__title--FontWeight",
      "value": "500",
      "values": [
        "--pf-t--global--font--weight--heading--default",
        "--pf-t--global--font--weight--300",
        "500"
      ]
    },
    "c_modal_box__title_FontSize": {
      "name": "--pf-v6-c-modal-box__title--FontSize",
      "value": "1.25rem",
      "values": [
        "--pf-t--global--font--size--heading--md",
        "--pf-t--global--font--size--xl",
        "--pf-t--global--font--size--500",
        "1.25rem"
      ]
    },
    "c_modal_box__title_icon_MarginInlineEnd": {
      "name": "--pf-v6-c-modal-box__title-icon--MarginInlineEnd",
      "value": "0.5rem",
      "values": [
        "--pf-t--global--spacer--sm",
        "--pf-t--global--spacer--200",
        "0.5rem"
      ]
    },
    "c_modal_box__title_icon_Color": {
      "name": "--pf-v6-c-modal-box__title-icon--Color",
      "value": "#1f1f1f",
      "values": [
        "--pf-t--global--icon--color--regular",
        "--pf-t--global--icon--color--100",
        "--pf-t--color--gray--90",
        "#1f1f1f"
      ]
    },
    "c_modal_box__description_FontSize": {
      "name": "--pf-v6-c-modal-box__description--FontSize",
      "value": "0.75rem",
      "values": [
        "--pf-t--global--font--size--body--sm",
        "--pf-t--global--font--size--xs",
        "--pf-t--global--font--size--100",
        "0.75rem"
      ]
    },
    "c_modal_box__description_Color": {
      "name": "--pf-v6-c-modal-box__description--Color",
      "value": "#4d4d4d",
      "values": [
        "--pf-t--global--text--color--subtle",
        "--pf-t--global--text--color--200",
        "--pf-t--color--gray--60",
        "#4d4d4d"
      ]
    },
    "c_modal_box__body_MinHeight": {
      "name": "--pf-v6-c-modal-box__body--MinHeight",
      "value": "calc(0.875rem * 1.5)",
      "values": [
        "calc(--pf-t--global--font--size--body--default * --pf-t--global--font--line-height--body)",
        "calc(--pf-t--global--font--size--sm * --pf-t--global--font--line-height--200)",
        "calc(--pf-t--global--font--size--200 * 1.5)",
        "calc(0.875rem * 1.5)"
      ]
    },
    "c_modal_box__body_PaddingBlockStart": {
      "name": "--pf-v6-c-modal-box__body--PaddingBlockStart",
      "value": "1.5rem",
      "values": [
        "--pf-t--global--spacer--lg",
        "--pf-t--global--spacer--400",
        "1.5rem"
      ]
    },
    "c_modal_box__body_PaddingInlineEnd": {
      "name": "--pf-v6-c-modal-box__body--PaddingInlineEnd",
      "value": "1.5rem",
      "values": [
        "--pf-t--global--spacer--lg",
        "--pf-t--global--spacer--400",
        "1.5rem"
      ]
    },
    "c_modal_box__body_PaddingInlineStart": {
      "name": "--pf-v6-c-modal-box__body--PaddingInlineStart",
      "value": "1.5rem",
      "values": [
        "--pf-t--global--spacer--lg",
        "--pf-t--global--spacer--400",
        "1.5rem"
      ]
    },
    "c_modal_box__body_last_child_PaddingBlockEnd": {
      "name": "--pf-v6-c-modal-box__body--last-child--PaddingBlockEnd",
      "value": "1.5rem",
      "values": [
        "--pf-t--global--spacer--lg",
        "--pf-t--global--spacer--400",
        "1.5rem"
      ]
    },
    "c_modal_box__header_body_PaddingBlockStart": {
      "name": "--pf-v6-c-modal-box__header--body--PaddingBlockStart",
      "value": "0.5rem",
      "values": [
        "--pf-t--global--spacer--sm",
        "--pf-t--global--spacer--200",
        "0.5rem"
      ]
    },
    "c_modal_box__close_InsetBlockStart": {
      "name": "--pf-v6-c-modal-box__close--InsetBlockStart",
      "value": "1.5rem",
      "values": [
        "--pf-v6-c-modal-box__header--PaddingBlockStart",
        "--pf-t--global--spacer--lg",
        "--pf-t--global--spacer--400",
        "1.5rem"
      ]
    },
    "c_modal_box__close_InsetInlineEnd": {
      "name": "--pf-v6-c-modal-box__close--InsetInlineEnd",
      "value": "1.5rem",
      "values": [
        "--pf-v6-c-modal-box__header--PaddingInlineEnd",
        "--pf-t--global--spacer--lg",
        "--pf-t--global--spacer--400",
        "1.5rem"
      ]
    },
    "c_modal_box__close_sibling_MarginInlineEnd": {
      "name": "--pf-v6-c-modal-box__close--sibling--MarginInlineEnd",
      "value": "calc(2rem + 0.5rem)",
      "values": [
        "calc(--pf-t--global--spacer--xl + --pf-t--global--spacer--sm)",
        "calc(--pf-t--global--spacer--500 + --pf-t--global--spacer--200)",
        "calc(2rem + 0.5rem)"
      ]
    },
    "c_modal_box__footer_PaddingBlockStart": {
      "name": "--pf-v6-c-modal-box__footer--PaddingBlockStart",
      "value": "1.5rem",
      "values": [
        "--pf-t--global--spacer--lg",
        "--pf-t--global--spacer--400",
        "1.5rem"
      ]
    },
    "c_modal_box__footer_PaddingInlineEnd": {
      "name": "--pf-v6-c-modal-box__footer--PaddingInlineEnd",
      "value": "1.5rem",
      "values": [
        "--pf-t--global--spacer--lg",
        "--pf-t--global--spacer--400",
        "1.5rem"
      ]
    },
    "c_modal_box__footer_PaddingBlockEnd": {
      "name": "--pf-v6-c-modal-box__footer--PaddingBlockEnd",
      "value": "1.5rem",
      "values": [
        "--pf-t--global--spacer--lg",
        "--pf-t--global--spacer--400",
        "1.5rem"
      ]
    },
    "c_modal_box__footer_PaddingInlineStart": {
      "name": "--pf-v6-c-modal-box__footer--PaddingInlineStart",
      "value": "1.5rem",
      "values": [
        "--pf-t--global--spacer--lg",
        "--pf-t--global--spacer--400",
        "1.5rem"
      ]
    },
    "c_modal_box__footer_c_button_MarginInlineEnd": {
      "name": "--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd",
      "value": "1rem",
      "values": [
        "--pf-t--global--spacer--md",
        "--pf-t--global--spacer--300",
        "1rem"
      ]
    },
    "c_modal_box__footer_c_button_sm_MarginInlineEnd": {
      "name": "--pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd",
      "value": "calc(1rem / 2)",
      "values": [
        "calc(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd / 2)",
        "calc(--pf-t--global--spacer--md / 2)",
        "calc(--pf-t--global--spacer--300 / 2)",
        "calc(1rem / 2)"
      ]
    }
  },
  ".pf-v6-c-modal-box.pf-m-sm": {
    "c_modal_box_Width": {
      "name": "--pf-v6-c-modal-box--Width",
      "value": "35rem",
      "values": [
        "--pf-v6-c-modal-box--m-sm--sm--MaxWidth",
        "35rem"
      ]
    }
  },
  ".pf-v6-c-modal-box.pf-m-md": {
    "c_modal_box_Width": {
      "name": "--pf-v6-c-modal-box--Width",
      "value": "52.5rem",
      "values": [
        "--pf-v6-c-modal-box--m-md--Width",
        "52.5rem"
      ]
    }
  },
  ".pf-v6-c-modal-box.pf-m-lg": {
    "c_modal_box_Width": {
      "name": "--pf-v6-c-modal-box--Width",
      "value": "70rem",
      "values": [
        "--pf-v6-c-modal-box--m-lg--lg--MaxWidth",
        "70rem"
      ]
    }
  },
  ".pf-v6-c-modal-box__title.pf-m-danger": {
    "c_modal_box__title_icon_Color": {
      "name": "--pf-v6-c-modal-box__title-icon--Color",
      "value": "#b1380b",
      "values": [
        "--pf-v6-c-modal-box--m-danger__title-icon--Color",
        "--pf-t--global--icon--color--status--danger--default",
        "--pf-t--global--color--status--danger--default",
        "--pf-t--global--color--status--danger--100",
        "--pf-t--color--red-orange--60",
        "#b1380b"
      ]
    }
  },
  ".pf-v6-c-modal-box__title.pf-m-warning": {
    "c_modal_box__title_icon_Color": {
      "name": "--pf-v6-c-modal-box__title-icon--Color",
      "value": "#dca614",
      "values": [
        "--pf-v6-c-modal-box--m-warning__title-icon--Color",
        "--pf-t--global--icon--color--status--warning--default",
        "--pf-t--global--color--status--warning--200",
        "--pf-t--color--yellow--40",
        "#dca614"
      ]
    }
  },
  ".pf-v6-c-modal-box__title.pf-m-success": {
    "c_modal_box__title_icon_Color": {
      "name": "--pf-v6-c-modal-box__title-icon--Color",
      "value": "#3d7317",
      "values": [
        "--pf-v6-c-modal-box--m-success__title-icon--Color",
        "--pf-t--global--icon--color--status--success--default",
        "--pf-t--global--color--status--success--default",
        "--pf-t--global--color--status--success--100",
        "--pf-t--color--green--60",
        "#3d7317"
      ]
    }
  },
  ".pf-v6-c-modal-box__title.pf-m-custom": {
    "c_modal_box__title_icon_Color": {
      "name": "--pf-v6-c-modal-box__title-icon--Color",
      "value": "#147878",
      "values": [
        "--pf-v6-c-modal-box--m-custom__title-icon--Color",
        "--pf-t--global--icon--color--status--custom--default",
        "--pf-t--global--color--status--custom--default",
        "--pf-t--global--color--status--custom--100",
        "--pf-t--color--teal--60",
        "#147878"
      ]
    }
  },
  ".pf-v6-c-modal-box__title.pf-m-info": {
    "c_modal_box__title_icon_Color": {
      "name": "--pf-v6-c-modal-box__title-icon--Color",
      "value": "#5e40be",
      "values": [
        "--pf-v6-c-modal-box--m-info__title-icon--Color",
        "--pf-t--global--icon--color--status--info--default",
        "--pf-t--global--color--status--info--default",
        "--pf-t--global--color--status--info--100",
        "--pf-t--color--purple--50",
        "#5e40be"
      ]
    }
  },
  ".pf-v6-c-modal-box__header + .pf-v6-c-modal-box__body": {
    "c_modal_box__body_PaddingBlockStart": {
      "name": "--pf-v6-c-modal-box__body--PaddingBlockStart",
      "value": "0.5rem",
      "values": [
        "--pf-v6-c-modal-box__header--body--PaddingBlockStart",
        "--pf-t--global--spacer--sm",
        "--pf-t--global--spacer--200",
        "0.5rem"
      ]
    }
  }
};
export default c_modal_box;