npm - @patternfly/react-tokens - Versions diffs - 6.0.0-alpha.5 → 6.0.0-alpha.6 - Mend

@patternfly/react-tokens 6.0.0-alpha.5 → 6.0.0-alpha.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3590) hide show

package/dist/esm/c_switch.d.ts CHANGED Viewed

@@ -1,66 +1,52 @@
 export const c_switch: {
-  ".pf-v5-c-switch": {
+  ":root": {
     "c_switch_FontSize": {
       "name": "--pf-v5-c-switch--FontSize",
-      "value": "1rem",
+      "value": "14px",
       "values": [
-        "--pf-v5-global--FontSize--md",
-        "$pf-v5-global--FontSize--md",
-        "pf-font-prem(16px)",
-        "1rem"
-      ]
-    },
-    "c_switch__label_PaddingLeft": {
-      "name": "--pf-v5-c-switch__label--PaddingLeft",
-      "value": "1rem",
-      "values": [
-        "--pf-v5-global--spacer--md",
-        "$pf-v5-global--spacer--md",
-        "pf-size-prem(16px)",
-        "1rem"
+        "--pf-t--global--font--size--sm",
+        "--pf-t--global--font--size--200",
+        "14px"
       ]
     },
     "c_switch_ColumnGap": {
       "name": "--pf-v5-c-switch--ColumnGap",
-      "value": "1rem",
+      "value": "8px",
       "values": [
-        "--pf-v5-c-switch__label--PaddingLeft",
-        "--pf-v5-global--spacer--md",
-        "$pf-v5-global--spacer--md",
-        "pf-size-prem(16px)",
-        "1rem"
+        "--pf-t--global--spacer--sm",
+        "--pf-t--global--spacer--200",
+        "8px"
       ]
     },
     "c_switch__toggle_icon_FontSize": {
       "name": "--pf-v5-c-switch__toggle-icon--FontSize",
-      "value": "calc(1rem * .625)",
+      "value": "calc(14px * .625)",
       "values": [
         "calc(--pf-v5-c-switch--FontSize * .625)",
-        "calc(--pf-v5-global--FontSize--md * .625)",
-        "calc($pf-v5-global--FontSize--md * .625)",
-        "calc(pf-font-prem(16px) * .625)",
-        "calc(1rem * .625)"
+        "calc(--pf-t--global--font--size--sm * .625)",
+        "calc(--pf-t--global--font--size--200 * .625)",
+        "calc(14px * .625)"
       ]
     },
     "c_switch__toggle_icon_Color": {
       "name": "--pf-v5-c-switch__toggle-icon--Color",
       "value": "#fff",
       "values": [
-        "--pf-v5-global--Color--light-100",
-        "$pf-v5-global--Color--light-100",
-        "$pf-v5-color-white",
+        "--pf-t--global--icon--color--on-brand--default",
+        "--pf-t--global--icon--color--inverse",
+        "--pf-t--global--icon--color--300",
+        "--pf-t--color--white",
         "#fff"
       ]
     },
     "c_switch__toggle_icon_Left": {
       "name": "--pf-v5-c-switch__toggle-icon--Left",
-      "value": "calc(1rem * .4)",
+      "value": "calc(14px * .4)",
       "values": [
         "calc(--pf-v5-c-switch--FontSize * .4)",
-        "calc(--pf-v5-global--FontSize--md * .4)",
-        "calc($pf-v5-global--FontSize--md * .4)",
-        "calc(pf-font-prem(16px) * .4)",
-        "calc(1rem * .4)"
+        "calc(--pf-t--global--font--size--sm * .4)",
+        "calc(--pf-t--global--font--size--200 * .4)",
+        "calc(14px * .4)"
       ]
     },
     "c_switch__toggle_icon_Offset": {
@@ -69,19 +55,20 @@ export const c_switch: {
     },
     "c_switch__input_disabled__toggle_icon_Color": {
       "name": "--pf-v5-c-switch__input--disabled__toggle-icon--Color",
-      "value": "#f5f5f5",
+      "value": "#a3a3a3",
       "values": [
-        "--pf-v5-global--palette--black-150",
-        "$pf-v5-color-black-150",
-        "#f5f5f5"
+        "--pf-t--global--icon--color--disabled",
+        "--pf-t--global--color--disabled--100",
+        "--pf-t--color--gray--40",
+        "#a3a3a3"
       ]
     },
     "c_switch_LineHeight": {
       "name": "--pf-v5-c-switch--LineHeight",
       "value": "1.5",
       "values": [
-        "--pf-v5-global--LineHeight--md",
-        "$pf-v5-global--LineHeight--md",
+        "--pf-t--global--font--line-height--body",
+        "--pf-t--global--font--line-height--200",
         "1.5"
       ]
     },
@@ -93,9 +80,9 @@ export const c_switch: {
       "name": "--pf-v5-c-switch__input--checked__toggle--BackgroundColor",
       "value": "#06c",
       "values": [
-        "--pf-v5-global--primary-color--100",
-        "$pf-v5-global--primary-color--100",
-        "$pf-v5-color-blue-400",
+        "--pf-t--global--color--brand--default",
+        "--pf-t--global--color--brand--200",
+        "--pf-t--color--blue--50",
         "#06c"
       ]
     },
@@ -107,194 +94,197 @@ export const c_switch: {
         "calc(100% + 0.125rem)"
       ]
     },
+    "c_switch__input_checked__toggle_BorderWidth": {
+      "name": "--pf-v5-c-switch__input--checked__toggle--BorderWidth",
+      "value": "0"
+    },
     "c_switch__input_checked__label_Color": {
       "name": "--pf-v5-c-switch__input--checked__label--Color",
-      "value": "#151515",
+      "value": "#1f1f1f",
       "values": [
-        "--pf-v5-global--Color--dark-100",
-        "$pf-v5-global--Color--dark-100",
-        "$pf-v5-color-black-900",
-        "#151515"
+        "--pf-t--global--text--color--regular",
+        "--pf-t--global--text--color--100",
+        "--pf-t--color--gray--90",
+        "#1f1f1f"
       ]
     },
     "c_switch__input_not_checked__label_Color": {
       "name": "--pf-v5-c-switch__input--not-checked__label--Color",
-      "value": "#6a6e73",
+      "value": "#707070",
       "values": [
-        "--pf-v5-global--disabled-color--100",
-        "$pf-v5-global--disabled-color--100",
-        "$pf-v5-color-black-600",
-        "#6a6e73"
+        "--pf-t--global--text--color--subtle",
+        "--pf-t--global--text--color--200",
+        "--pf-t--color--gray--50",
+        "#707070"
       ]
     },
     "c_switch__input_disabled__label_Color": {
       "name": "--pf-v5-c-switch__input--disabled__label--Color",
-      "value": "#6a6e73",
+      "value": "#a3a3a3",
       "values": [
-        "--pf-v5-global--disabled-color--100",
-        "$pf-v5-global--disabled-color--100",
-        "$pf-v5-color-black-600",
-        "#6a6e73"
+        "--pf-t--global--text--color--disabled",
+        "--pf-t--global--color--disabled--100",
+        "--pf-t--color--gray--40",
+        "#a3a3a3"
       ]
     },
     "c_switch__input_disabled__toggle_BackgroundColor": {
       "name": "--pf-v5-c-switch__input--disabled__toggle--BackgroundColor",
-      "value": "#d2d2d2",
+      "value": "#a3a3a3",
+      "values": [
+        "--pf-t--global--background--color--disabled--default",
+        "--pf-t--global--color--disabled--100",
+        "--pf-t--color--gray--40",
+        "#a3a3a3"
+      ]
+    },
+    "c_switch__input_checked__toggle_before_BackgroundColor": {
+      "name": "--pf-v5-c-switch__input--checked__toggle--before--BackgroundColor",
+      "value": "#fff",
       "values": [
-        "--pf-v5-global--disabled-color--200",
-        "$pf-v5-global--disabled-color--200",
-        "$pf-v5-color-black-300",
-        "#d2d2d2"
+        "--pf-t--global--icon--color--inverse",
+        "--pf-t--global--icon--color--300",
+        "--pf-t--color--white",
+        "#fff"
+      ]
+    },
+    "c_switch__input_not_checked__toggle_before_BackgroundColor": {
+      "name": "--pf-v5-c-switch__input--not-checked__toggle--before--BackgroundColor",
+      "value": "#707070",
+      "values": [
+        "--pf-t--global--icon--color--subtle",
+        "--pf-t--global--icon--color--200",
+        "--pf-t--color--gray--50",
+        "#707070"
       ]
     },
     "c_switch__input_disabled__toggle_before_BackgroundColor": {
       "name": "--pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor",
-      "value": "#f5f5f5",
+      "value": "#4d4d4d",
       "values": [
-        "--pf-v5-global--palette--black-150",
-        "$pf-v5-color-black-150",
-        "#f5f5f5"
+        "--pf-t--global--icon--color--on-disabled",
+        "--pf-t--global--color--disabled--300",
+        "--pf-t--color--gray--60",
+        "#4d4d4d"
       ]
     },
     "c_switch__input_focus__toggle_OutlineWidth": {
       "name": "--pf-v5-c-switch__input--focus__toggle--OutlineWidth",
       "value": "2px",
       "values": [
-        "--pf-v5-global--BorderWidth--md",
-        "$pf-v5-global--BorderWidth--md",
+        "--pf-t--global--border--width--strong",
+        "--pf-t--global--border--width--200",
         "2px"
       ]
     },
     "c_switch__input_focus__toggle_OutlineOffset": {
       "name": "--pf-v5-c-switch__input--focus__toggle--OutlineOffset",
-      "value": "0.5rem",
+      "value": "4px",
       "values": [
-        "--pf-v5-global--spacer--sm",
-        "$pf-v5-global--spacer--sm",
-        "pf-size-prem(8px)",
-        "0.5rem"
+        "--pf-t--global--spacer--xs",
+        "--pf-t--global--spacer--100",
+        "4px"
       ]
     },
     "c_switch__input_focus__toggle_OutlineColor": {
       "name": "--pf-v5-c-switch__input--focus__toggle--OutlineColor",
       "value": "#06c",
       "values": [
-        "--pf-v5-global--primary-color--100",
-        "$pf-v5-global--primary-color--100",
-        "$pf-v5-color-blue-400",
+        "--pf-t--global--color--brand--default",
+        "--pf-t--global--color--brand--200",
+        "--pf-t--color--blue--50",
         "#06c"
       ]
     },
     "c_switch__toggle_Height": {
       "name": "--pf-v5-c-switch__toggle--Height",
-      "value": "calc(1rem * 1.5)",
+      "value": "calc(14px * 1.5)",
       "values": [
         "calc(--pf-v5-c-switch--FontSize * --pf-v5-c-switch--LineHeight)",
-        "calc(--pf-v5-global--FontSize--md * --pf-v5-global--LineHeight--md)",
-        "calc($pf-v5-global--FontSize--md * $pf-v5-global--LineHeight--md)",
-        "calc(pf-font-prem(16px) * 1.5)",
-        "calc(1rem * 1.5)"
+        "calc(--pf-t--global--font--size--sm * --pf-t--global--font--line-height--body)",
+        "calc(--pf-t--global--font--size--200 * --pf-t--global--font--line-height--200)",
+        "calc(14px * 1.5)"
       ]
     },
     "c_switch__toggle_BackgroundColor": {
       "name": "--pf-v5-c-switch__toggle--BackgroundColor",
-      "value": "#8a8d90",
+      "value": "#fff",
       "values": [
-        "--pf-v5-global--palette--black-500",
-        "$pf-v5-color-black-500",
-        "#8a8d90"
+        "--pf-t--global--background--color--control--default",
+        "--pf-t--global--background--color--primary--default",
+        "--pf-t--global--background--color--100",
+        "--pf-t--color--white",
+        "#fff"
+      ]
+    },
+    "c_switch__toggle_BorderColor": {
+      "name": "--pf-v5-c-switch__toggle--BorderColor",
+      "value": "#c7c7c7",
+      "values": [
+        "--pf-t--global--border--color--default",
+        "--pf-t--global--border--color--100",
+        "--pf-t--color--gray--30",
+        "#c7c7c7"
+      ]
+    },
+    "c_switch__toggle_BorderWidth": {
+      "name": "--pf-v5-c-switch__toggle--BorderWidth",
+      "value": "1px",
+      "values": [
+        "--pf-t--global--border--width--control--default",
+        "--pf-t--global--border--width--100",
+        "1px"
       ]
     },
     "c_switch__toggle_BorderRadius": {
       "name": "--pf-v5-c-switch__toggle--BorderRadius",
-      "value": "calc(1rem * 1.5)",
+      "value": "999px",
       "values": [
-        "--pf-v5-c-switch__toggle--Height",
-        "calc(--pf-v5-c-switch--FontSize * --pf-v5-c-switch--LineHeight)",
-        "calc(--pf-v5-global--FontSize--md * --pf-v5-global--LineHeight--md)",
-        "calc($pf-v5-global--FontSize--md * $pf-v5-global--LineHeight--md)",
-        "calc(pf-font-prem(16px) * 1.5)",
-        "calc(1rem * 1.5)"
+        "--pf-t--global--border--radius--pill",
+        "--pf-t--global--border--radius--500",
+        "999px"
       ]
     },
     "c_switch__toggle_before_Width": {
       "name": "--pf-v5-c-switch__toggle--before--Width",
-      "value": "calc(1rem - 0.125rem)",
+      "value": "calc(14px - 0.125rem)",
       "values": [
         "calc(--pf-v5-c-switch--FontSize - --pf-v5-c-switch__toggle-icon--Offset)",
-        "calc(--pf-v5-global--FontSize--md - 0.125rem)",
-        "calc($pf-v5-global--FontSize--md - 0.125rem)",
-        "calc(pf-font-prem(16px) - 0.125rem)",
-        "calc(1rem - 0.125rem)"
+        "calc(--pf-t--global--font--size--sm - 0.125rem)",
+        "calc(--pf-t--global--font--size--200 - 0.125rem)",
+        "calc(14px - 0.125rem)"
       ]
     },
     "c_switch__toggle_before_Height": {
       "name": "--pf-v5-c-switch__toggle--before--Height",
-      "value": "calc(1rem - 0.125rem)",
+      "value": "calc(14px - 0.125rem)",
       "values": [
         "--pf-v5-c-switch__toggle--before--Width",
         "calc(--pf-v5-c-switch--FontSize - --pf-v5-c-switch__toggle-icon--Offset)",
-        "calc(--pf-v5-global--FontSize--md - 0.125rem)",
-        "calc($pf-v5-global--FontSize--md - 0.125rem)",
-        "calc(pf-font-prem(16px) - 0.125rem)",
-        "calc(1rem - 0.125rem)"
-      ]
-    },
-    "c_switch__toggle_before_Top": {
-      "name": "--pf-v5-c-switch__toggle--before--Top",
-      "value": "calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)",
-      "values": [
-        "calc((--pf-v5-c-switch__toggle--Height - --pf-v5-c-switch__toggle--before--Height) / 2)",
-        "calc((calc(--pf-v5-c-switch--FontSize * --pf-v5-c-switch--LineHeight) - --pf-v5-c-switch__toggle--before--Width) / 2)",
-        "calc((calc(--pf-v5-global--FontSize--md * --pf-v5-global--LineHeight--md) - calc(--pf-v5-c-switch--FontSize - --pf-v5-c-switch__toggle-icon--Offset)) / 2)",
-        "calc((calc($pf-v5-global--FontSize--md * $pf-v5-global--LineHeight--md) - calc(--pf-v5-global--FontSize--md - 0.125rem)) / 2)",
-        "calc((calc($pf-v5-global--FontSize--md * $pf-v5-global--LineHeight--md) - calc($pf-v5-global--FontSize--md - 0.125rem)) / 2)",
-        "calc((calc(pf-font-prem(16px) * 1.5) - calc(pf-font-prem(16px) - 0.125rem)) / 2)",
-        "calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)"
+        "calc(--pf-t--global--font--size--sm - 0.125rem)",
+        "calc(--pf-t--global--font--size--200 - 0.125rem)",
+        "calc(14px - 0.125rem)"
       ]
     },
     "c_switch__toggle_before_Left": {
       "name": "--pf-v5-c-switch__toggle--before--Left",
-      "value": "calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)",
+      "value": "calc((calc(14px * 1.5) - calc(14px - 0.125rem)) / 2)",
       "values": [
-        "--pf-v5-c-switch__toggle--before--Top",
         "calc((--pf-v5-c-switch__toggle--Height - --pf-v5-c-switch__toggle--before--Height) / 2)",
         "calc((calc(--pf-v5-c-switch--FontSize * --pf-v5-c-switch--LineHeight) - --pf-v5-c-switch__toggle--before--Width) / 2)",
-        "calc((calc(--pf-v5-global--FontSize--md * --pf-v5-global--LineHeight--md) - calc(--pf-v5-c-switch--FontSize - --pf-v5-c-switch__toggle-icon--Offset)) / 2)",
-        "calc((calc($pf-v5-global--FontSize--md * $pf-v5-global--LineHeight--md) - calc(--pf-v5-global--FontSize--md - 0.125rem)) / 2)",
-        "calc((calc($pf-v5-global--FontSize--md * $pf-v5-global--LineHeight--md) - calc($pf-v5-global--FontSize--md - 0.125rem)) / 2)",
-        "calc((calc(pf-font-prem(16px) * 1.5) - calc(pf-font-prem(16px) - 0.125rem)) / 2)",
-        "calc((calc(1rem * 1.5) - calc(1rem - 0.125rem)) / 2)"
-      ]
-    },
-    "c_switch__toggle_before_BackgroundColor": {
-      "name": "--pf-v5-c-switch__toggle--before--BackgroundColor",
-      "value": "#fff",
-      "values": [
-        "--pf-v5-global--BackgroundColor--100",
-        "$pf-v5-global--BackgroundColor--100",
-        "$pf-v5-color-white",
-        "#fff"
+        "calc((calc(--pf-t--global--font--size--sm * --pf-t--global--font--line-height--body) - calc(--pf-v5-c-switch--FontSize - --pf-v5-c-switch__toggle-icon--Offset)) / 2)",
+        "calc((calc(--pf-t--global--font--size--200 * --pf-t--global--font--line-height--200) - calc(--pf-t--global--font--size--sm - 0.125rem)) / 2)",
+        "calc((calc(14px * 1.5) - calc(--pf-t--global--font--size--200 - 0.125rem)) / 2)",
+        "calc((calc(14px * 1.5) - calc(14px - 0.125rem)) / 2)"
       ]
     },
     "c_switch__toggle_before_BorderRadius": {
       "name": "--pf-v5-c-switch__toggle--before--BorderRadius",
-      "value": "30em",
+      "value": "24px",
       "values": [
-        "--pf-v5-global--BorderRadius--lg",
-        "$pf-v5-global--BorderRadius--lg",
-        "30em"
-      ]
-    },
-    "c_switch__toggle_before_BoxShadow": {
-      "name": "--pf-v5-c-switch__toggle--before--BoxShadow",
-      "value": "0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)",
-      "values": [
-        "--pf-v5-global--BoxShadow--md",
-        "$pf-v5-global--BoxShadow--md",
-        "0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-v5-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-v5-color-black-1000, .06)",
-        "0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba(#030303, .12), 0 0 pf-size-prem(4px) 0 rgba(#030303, .06)",
-        "0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)"
+        "--pf-t--global--border--radius--large",
+        "--pf-t--global--border--radius--400",
+        "24px"
       ]
     },
     "c_switch__toggle_before_Transition": {
@@ -303,36 +293,36 @@ export const c_switch: {
     },
     "c_switch__toggle_Width": {
       "name": "--pf-v5-c-switch__toggle--Width",
-      "value": "calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))",
+      "value": "calc(calc(14px * 1.5) + 0.125rem + calc(14px - 0.125rem))",
       "values": [
         "calc(--pf-v5-c-switch__toggle--Height + --pf-v5-c-switch__toggle-icon--Offset + --pf-v5-c-switch__toggle--before--Width)",
         "calc(calc(--pf-v5-c-switch--FontSize * --pf-v5-c-switch--LineHeight) + 0.125rem + calc(--pf-v5-c-switch--FontSize - --pf-v5-c-switch__toggle-icon--Offset))",
-        "calc(calc(--pf-v5-global--FontSize--md * --pf-v5-global--LineHeight--md) + 0.125rem + calc(--pf-v5-global--FontSize--md - 0.125rem))",
-        "calc(calc($pf-v5-global--FontSize--md * $pf-v5-global--LineHeight--md) + 0.125rem + calc($pf-v5-global--FontSize--md - 0.125rem))",
-        "calc(calc(pf-font-prem(16px) * 1.5) + 0.125rem + calc(pf-font-prem(16px) - 0.125rem))",
-        "calc(calc(1rem * 1.5) + 0.125rem + calc(1rem - 0.125rem))"
+        "calc(calc(--pf-t--global--font--size--sm * --pf-t--global--font--line-height--body) + 0.125rem + calc(--pf-t--global--font--size--sm - 0.125rem))",
+        "calc(calc(--pf-t--global--font--size--200 * --pf-t--global--font--line-height--200) + 0.125rem + calc(--pf-t--global--font--size--200 - 0.125rem))",
+        "calc(calc(14px * 1.5) + 0.125rem + calc(14px - 0.125rem))"
       ]
-    },
-    "c_switch__label_Color": {
-      "name": "--pf-v5-c-switch__label--Color",
-      "value": "#151515",
+    }
+  },
+  ".pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle": {
+    "c_switch__toggle_BorderWidth": {
+      "name": "--pf-v5-c-switch__toggle--BorderWidth",
+      "value": "0",
       "values": [
-        "--pf-v5-global--Color--dark-100",
-        "$pf-v5-global--Color--dark-100",
-        "$pf-v5-color-black-900",
-        "#151515"
+        "--pf-v5-c-switch__input--checked__toggle--BorderWidth",
+        "0"
       ]
     }
   },
   ".pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__toggle": {
     "c_switch__toggle_icon_Color": {
       "name": "--pf-v5-c-switch__toggle-icon--Color",
-      "value": "#f5f5f5",
+      "value": "#a3a3a3",
       "values": [
         "--pf-v5-c-switch__input--disabled__toggle-icon--Color",
-        "--pf-v5-global--palette--black-150",
-        "$pf-v5-color-black-150",
-        "#f5f5f5"
+        "--pf-t--global--icon--color--disabled",
+        "--pf-t--global--color--disabled--100",
+        "--pf-t--color--gray--40",
+        "#a3a3a3"
       ]
     }
   }