@patternfly/react-tokens 5.0.0-alpha.5 → 5.0.0-alpha.7

package/dist/js/c_card.d.ts

@@ -231,15 +231,42 @@ export const c_card: {
       "name": "--pf-c-card--m-expanded__header-toggle-icon--Rotate",
       "value": "90deg"
     },
-    "c_card_m_hoverable_hover_BoxShadow": {
-      "name": "--pf-c-card--m-hoverable--hover--BoxShadow",
-      "value": "0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)",
+    "c_card_m_selectable_BorderWidth": {
+      "name": "--pf-c-card--m-selectable--BorderWidth",
+      "value": "1px",
       "values": [
-        "--pf-global--BoxShadow--lg",
-        "$pf-global--BoxShadow--lg",
-        "0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba($pf-color-black-1000, .16), 0 0 pf-size-prem(6px) 0 rgba($pf-color-black-1000, .08)",
-        "0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba(#030303, .16), 0 0 pf-size-prem(6px) 0 rgba(#030303, .08)",
-        "0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)"
+        "--pf-global--BorderWidth--sm",
+        "$pf-global--BorderWidth--sm",
+        "1px"
+      ]
+    },
+    "c_card_m_selectable_m_selected_BackgroundColor": {
+      "name": "--pf-c-card--m-selectable--m-selected--BackgroundColor",
+      "value": "#f0f0f0",
+      "values": [
+        "--pf-global--BackgroundColor--200",
+        "$pf-global--BackgroundColor--200",
+        "$pf-color-black-200",
+        "#f0f0f0"
+      ]
+    },
+    "c_card_m_selectable_m_selected_BorderColor": {
+      "name": "--pf-c-card--m-selectable--m-selected--BorderColor",
+      "value": "#06c",
+      "values": [
+        "--pf-global--active-color--100",
+        "$pf-global--active-color--100",
+        "$pf-color-blue-400",
+        "#06c"
+      ]
+    },
+    "c_card_m_selectable_hover_BackgroundColor": {
+      "name": "--pf-c-card--m-selectable--hover--BackgroundColor",
+      "value": "#f5f5f5",
+      "values": [
+        "--pf-global--palette--black-150",
+        "$pf-color-black-150",
+        "#f5f5f5"
       ]
     },
     "c_card_m_selectable_hover_BoxShadow": {
@@ -253,50 +280,117 @@ export const c_card: {
         "0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)"
       ]
     },
-    "c_card_m_selectable_focus_BoxShadow": {
-      "name": "--pf-c-card--m-selectable--focus--BoxShadow",
-      "value": "0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)",
+    "c_card_m_selectable_focus_BackgroundColor": {
+      "name": "--pf-c-card--m-selectable--focus--BackgroundColor",
+      "value": "#bee1f4",
       "values": [
-        "--pf-global--BoxShadow--lg",
-        "$pf-global--BoxShadow--lg",
-        "0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba($pf-color-black-1000, .16), 0 0 pf-size-prem(6px) 0 rgba($pf-color-black-1000, .08)",
-        "0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba(#030303, .16), 0 0 pf-size-prem(6px) 0 rgba(#030303, .08)",
-        "0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)"
+        "--pf-global--palette--blue-100",
+        "$pf-color-blue-100",
+        "#bee1f4"
       ]
     },
-    "c_card_m_selectable_active_BoxShadow": {
-      "name": "--pf-c-card--m-selectable--active--BoxShadow",
-      "value": "0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)",
+    "c_card_m_selectable_focus_BorderColor": {
+      "name": "--pf-c-card--m-selectable--focus--BorderColor",
+      "value": "#06c",
       "values": [
-        "--pf-global--BoxShadow--lg",
-        "$pf-global--BoxShadow--lg",
-        "0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba($pf-color-black-1000, .16), 0 0 pf-size-prem(6px) 0 rgba($pf-color-black-1000, .08)",
-        "0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba(#030303, .16), 0 0 pf-size-prem(6px) 0 rgba(#030303, .08)",
-        "0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)"
+        "--pf-global--active-color--100",
+        "$pf-global--active-color--100",
+        "$pf-color-blue-400",
+        "#06c"
       ]
     },
-    "c_card_m_selectable_m_selected_BoxShadow": {
-      "name": "--pf-c-card--m-selectable--m-selected--BoxShadow",
-      "value": "0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)",
+    "c_card_m_selectable_m_selected_focus_BorderColor": {
+      "name": "--pf-c-card--m-selectable--m-selected--focus--BorderColor",
+      "value": "#06c",
       "values": [
-        "--pf-global--BoxShadow--lg",
-        "$pf-global--BoxShadow--lg",
-        "0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba($pf-color-black-1000, .16), 0 0 pf-size-prem(6px) 0 rgba($pf-color-black-1000, .08)",
-        "0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba(#030303, .16), 0 0 pf-size-prem(6px) 0 rgba(#030303, .08)",
-        "0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)"
+        "--pf-global--active-color--100",
+        "$pf-global--active-color--100",
+        "$pf-color-blue-400",
+        "#06c"
       ]
     },
-    "c_card_m_selectable_m_selected_before_Height": {
-      "name": "--pf-c-card--m-selectable--m-selected--before--Height",
-      "value": "3px",
+    "c_card_m_selectable_m_disabled_BackgroundColor": {
+      "name": "--pf-c-card--m-selectable--m-disabled--BackgroundColor",
+      "value": "#fafafa",
       "values": [
-        "--pf-global--BorderWidth--lg",
-        "$pf-global--BorderWidth--lg",
-        "3px"
+        "--pf-global--palette--black-100",
+        "$pf-color-black-100",
+        "#fafafa"
+      ]
+    },
+    "c_card_m_selectable_m_disabled_BorderColor": {
+      "name": "--pf-c-card--m-selectable--m-disabled--BorderColor",
+      "value": "#d2d2d2",
+      "values": [
+        "--pf-global--BorderColor--100",
+        "$pf-global--BorderColor--100",
+        "$pf-color-black-300",
+        "#d2d2d2"
+      ]
+    },
+    "c_card_m_selectable_m_disabled_BoxShadow": {
+      "name": "--pf-c-card--m-selectable--m-disabled--BoxShadow",
+      "value": "0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)",
+      "values": [
+        "--pf-global--BoxShadow--sm",
+        "$pf-global--BoxShadow--sm",
+        "0 pf-size-prem(1px) pf-size-prem(2px) 0 rgba($pf-color-black-1000, .12), 0 0 pf-size-prem(2px) 0 rgba($pf-color-black-1000, .06)",
+        "0 pf-size-prem(1px) pf-size-prem(2px) 0 rgba(#030303, .12), 0 0 pf-size-prem(2px) 0 rgba(#030303, .06)",
+        "0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)"
+      ]
+    },
+    "c_card_m_selectable_m_clickable_hover_BackgroundColor": {
+      "name": "--pf-c-card--m-selectable--m-clickable--hover--BackgroundColor",
+      "value": "#fff",
+      "values": [
+        "--pf-global--BackgroundColor--100",
+        "$pf-global--BackgroundColor--100",
+        "$pf-color-white",
+        "#fff"
+      ]
+    },
+    "c_card_m_selectable_m_clickable_hover_BoxShadow": {
+      "name": "--pf-c-card--m-selectable--m-clickable--hover--BoxShadow",
+      "value": "0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)",
+      "values": [
+        "--pf-global--BoxShadow--sm",
+        "$pf-global--BoxShadow--sm",
+        "0 pf-size-prem(1px) pf-size-prem(2px) 0 rgba($pf-color-black-1000, .12), 0 0 pf-size-prem(2px) 0 rgba($pf-color-black-1000, .06)",
+        "0 pf-size-prem(1px) pf-size-prem(2px) 0 rgba(#030303, .12), 0 0 pf-size-prem(2px) 0 rgba(#030303, .06)",
+        "0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)"
+      ]
+    },
+    "c_card_m_selectable_m_clickable_m_selected_BorderColor": {
+      "name": "--pf-c-card--m-selectable--m-clickable--m-selected--BorderColor",
+      "value": "#d2d2d2",
+      "values": [
+        "--pf-global--BorderColor--100",
+        "$pf-global--BorderColor--100",
+        "$pf-color-black-300",
+        "#d2d2d2"
+      ]
+    },
+    "c_card_m_selectable_m_clickable_m_selected_BackgroundColor": {
+      "name": "--pf-c-card--m-selectable--m-clickable--m-selected--BackgroundColor",
+      "value": "#fff",
+      "values": [
+        "--pf-global--BackgroundColor--100",
+        "$pf-global--BackgroundColor--100",
+        "$pf-color-white",
+        "#fff"
       ]
     },
-    "c_card_m_selectable_m_selected_before_BackgroundColor": {
-      "name": "--pf-c-card--m-selectable--m-selected--before--BackgroundColor",
+    "c_card_m_selectable_m_clickable_m_current_BackgroundColor": {
+      "name": "--pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor",
+      "value": "#f5f5f5",
+      "values": [
+        "--pf-global--palette--black-150",
+        "$pf-color-black-150",
+        "#f5f5f5"
+      ]
+    },
+    "c_card_m_selectable_m_clickable_m_current_BorderColor": {
+      "name": "--pf-c-card--m-selectable--m-clickable--m-current--BorderColor",
       "value": "#06c",
       "values": [
         "--pf-global--active-color--100",
@@ -803,6 +897,121 @@ export const c_card: {
       ]
     }
   },
+  ".pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible) ~ .pf-c-check__label": {
+    "c_card_BackgroundColor": {
+      "name": "--pf-c-card--BackgroundColor",
+      "value": "unset"
+    },
+    "c_card_BorderColor": {
+      "name": "--pf-c-card--BorderColor",
+      "value": "unset"
+    }
+  },
+  ".pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__input:where(:checked) ~ .pf-c-check__label": {
+    "c_card_BackgroundColor": {
+      "name": "--pf-c-card--BackgroundColor",
+      "value": "#fff",
+      "values": [
+        "--pf-c-card--m-selectable--m-clickable--m-selected--BackgroundColor",
+        "--pf-global--BackgroundColor--100",
+        "$pf-global--BackgroundColor--100",
+        "$pf-color-white",
+        "#fff"
+      ]
+    },
+    "c_card_BorderColor": {
+      "name": "--pf-c-card--BorderColor",
+      "value": "#d2d2d2",
+      "values": [
+        "--pf-c-card--m-selectable--m-clickable--m-selected--BorderColor",
+        "--pf-global--BorderColor--100",
+        "$pf-global--BorderColor--100",
+        "$pf-color-black-300",
+        "#d2d2d2"
+      ]
+    }
+  },
+  ".pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-current": {
+    "c_card_BackgroundColor": {
+      "name": "--pf-c-card--BackgroundColor",
+      "value": "#f5f5f5",
+      "values": [
+        "--pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor",
+        "--pf-global--palette--black-150",
+        "$pf-color-black-150",
+        "#f5f5f5"
+      ]
+    },
+    "c_card_BorderColor": {
+      "name": "--pf-c-card--BorderColor",
+      "value": "#06c",
+      "values": [
+        "--pf-c-card--m-selectable--m-clickable--m-current--BorderColor",
+        "--pf-global--active-color--100",
+        "$pf-global--active-color--100",
+        "$pf-color-blue-400",
+        "#06c"
+      ]
+    }
+  },
+  ".pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-current.pf-m-selected": {
+    "c_card_BackgroundColor": {
+      "name": "--pf-c-card--BackgroundColor",
+      "value": "#f5f5f5",
+      "values": [
+        "--pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor",
+        "--pf-global--palette--black-150",
+        "$pf-color-black-150",
+        "#f5f5f5"
+      ]
+    },
+    "c_card_BorderColor": {
+      "name": "--pf-c-card--BorderColor",
+      "value": "#06c",
+      "values": [
+        "--pf-c-card--m-selectable--m-clickable--m-current--BorderColor",
+        "--pf-global--active-color--100",
+        "$pf-global--active-color--100",
+        "$pf-color-blue-400",
+        "#06c"
+      ]
+    }
+  },
+  ".pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__input:where(:disabled) ~ .pf-c-check__label": {
+    "c_card_BackgroundColor": {
+      "name": "--pf-c-card--BackgroundColor",
+      "value": "#fafafa",
+      "values": [
+        "--pf-c-card--m-selectable--m-disabled--BackgroundColor",
+        "--pf-global--palette--black-100",
+        "$pf-color-black-100",
+        "#fafafa"
+      ]
+    },
+    "c_card_BorderColor": {
+      "name": "--pf-c-card--BorderColor",
+      "value": "#d2d2d2",
+      "values": [
+        "--pf-c-card--m-selectable--m-disabled--BorderColor",
+        "--pf-global--BorderColor--100",
+        "$pf-global--BorderColor--100",
+        "$pf-color-black-300",
+        "#d2d2d2"
+      ]
+    },
+    "c_card_BoxShadow": {
+      "name": "--pf-c-card--BoxShadow",
+      "value": "0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)",
+      "values": [
+        "--pf-c-card--m-selectable--m-disabled--BoxShadow",
+        "--pf-global--BoxShadow--sm",
+        "$pf-global--BoxShadow--sm",
+        "0 pf-size-prem(1px) pf-size-prem(2px) 0 rgba($pf-color-black-1000, .12), 0 0 pf-size-prem(2px) 0 rgba($pf-color-black-1000, .06)",
+        "0 pf-size-prem(1px) pf-size-prem(2px) 0 rgba(#030303, .12), 0 0 pf-size-prem(2px) 0 rgba(#030303, .06)",
+        "0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)"
+      ]
+    }
+  },
   ".pf-c-card.pf-m-hoverable-raised:hover": {
     "c_card_BoxShadow": {
       "name": "--pf-c-card--BoxShadow",
@@ -1283,6 +1492,125 @@ export const c_card: {
       "value": "0"
     }
   },
+  ".pf-c-card__selectable-actions .pf-c-check__label:hover": {
+    "c_card_BackgroundColor": {
+      "name": "--pf-c-card--BackgroundColor",
+      "value": "#f5f5f5",
+      "values": [
+        "--pf-c-card--m-selectable--hover--BackgroundColor",
+        "--pf-global--palette--black-150",
+        "$pf-color-black-150",
+        "#f5f5f5"
+      ]
+    },
+    "c_card_BoxShadow": {
+      "name": "--pf-c-card--BoxShadow",
+      "value": "0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)",
+      "values": [
+        "--pf-c-card--m-selectable--hover--BoxShadow",
+        "--pf-global--BoxShadow--lg",
+        "$pf-global--BoxShadow--lg",
+        "0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba($pf-color-black-1000, .16), 0 0 pf-size-prem(6px) 0 rgba($pf-color-black-1000, .08)",
+        "0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba(#030303, .16), 0 0 pf-size-prem(6px) 0 rgba(#030303, .08)",
+        "0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)"
+      ]
+    }
+  },
+  ".pf-c-card__selectable-actions .pf-c-check__input:where(:checked) ~ .pf-c-check__label": {
+    "c_card_BorderColor": {
+      "name": "--pf-c-card--BorderColor",
+      "value": "#06c",
+      "values": [
+        "--pf-c-card--m-selectable--m-selected--BorderColor",
+        "--pf-global--active-color--100",
+        "$pf-global--active-color--100",
+        "$pf-color-blue-400",
+        "#06c"
+      ]
+    },
+    "c_card_BackgroundColor": {
+      "name": "--pf-c-card--BackgroundColor",
+      "value": "#f0f0f0",
+      "values": [
+        "--pf-c-card--m-selectable--m-selected--BackgroundColor",
+        "--pf-global--BackgroundColor--200",
+        "$pf-global--BackgroundColor--200",
+        "$pf-color-black-200",
+        "#f0f0f0"
+      ]
+    }
+  },
+  ".pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible) ~ .pf-c-check__label": {
+    "c_card_BorderColor": {
+      "name": "--pf-c-card--BorderColor",
+      "value": "#06c",
+      "values": [
+        "--pf-c-card--m-selectable--focus--BorderColor",
+        "--pf-global--active-color--100",
+        "$pf-global--active-color--100",
+        "$pf-color-blue-400",
+        "#06c"
+      ]
+    },
+    "c_card_BackgroundColor": {
+      "name": "--pf-c-card--BackgroundColor",
+      "value": "#bee1f4",
+      "values": [
+        "--pf-c-card--m-selectable--focus--BackgroundColor",
+        "--pf-global--palette--blue-100",
+        "$pf-color-blue-100",
+        "#bee1f4"
+      ]
+    }
+  },
+  ".pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible):where(:checked) ~ .pf-c-check__label": {
+    "c_card_BorderColor": {
+      "name": "--pf-c-card--BorderColor",
+      "value": "#06c",
+      "values": [
+        "--pf-c-card--m-selectable--m-selected--focus--BorderColor",
+        "--pf-global--active-color--100",
+        "$pf-global--active-color--100",
+        "$pf-color-blue-400",
+        "#06c"
+      ]
+    }
+  },
+  ".pf-c-card__selectable-actions .pf-c-check__input:where(:disabled) ~ .pf-c-check__label": {
+    "c_card_BackgroundColor": {
+      "name": "--pf-c-card--BackgroundColor",
+      "value": "#fafafa",
+      "values": [
+        "--pf-c-card--m-selectable--m-disabled--BackgroundColor",
+        "--pf-global--palette--black-100",
+        "$pf-color-black-100",
+        "#fafafa"
+      ]
+    },
+    "c_card_BorderColor": {
+      "name": "--pf-c-card--BorderColor",
+      "value": "#d2d2d2",
+      "values": [
+        "--pf-c-card--m-selectable--m-disabled--BorderColor",
+        "--pf-global--BorderColor--100",
+        "$pf-global--BorderColor--100",
+        "$pf-color-black-300",
+        "#d2d2d2"
+      ]
+    },
+    "c_card_BoxShadow": {
+      "name": "--pf-c-card--BoxShadow",
+      "value": "0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)",
+      "values": [
+        "--pf-c-card--m-selectable--m-disabled--BoxShadow",
+        "--pf-global--BoxShadow--sm",
+        "$pf-global--BoxShadow--sm",
+        "0 pf-size-prem(1px) pf-size-prem(2px) 0 rgba($pf-color-black-1000, .12), 0 0 pf-size-prem(2px) 0 rgba($pf-color-black-1000, .06)",
+        "0 pf-size-prem(1px) pf-size-prem(2px) 0 rgba(#030303, .12), 0 0 pf-size-prem(2px) 0 rgba(#030303, .06)",
+        "0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)"
+      ]
+    }
+  },
   ".pf-c-card__expandable-content": {
     "c_card_first_child_PaddingTop": {
       "name": "--pf-c-card--first-child--PaddingTop",