@patternfly/design-tokens 1.13.1 → 1.14.0

package/tokens/default/semantic.json

@@ -37,6 +37,13 @@
             "value": "{global.background.color.300}"
           }
         },
+        "tertiary": {
+          "default": {
+            "description": "Use as the tertiary background color. This is primarily used for containers that can be placed on secondary backgrounds.",
+            "type": "color",
+            "value": "{global.background.color.600}"
+          }
+        },
         "floating": {
           "default": {
             "description": "Use as the background color for components that appear over other content, such as toast alerts, menus, modals, overlay drawers, etc.",
@@ -113,6 +120,16 @@
             "description": "Use as the background color components with inversed backgrounds like tooltips.",
             "type": "color",
             "value": "{global.background.color.400}"
+          },
+          "hover": {
+            "description": "Use as the hover color for interactive components with inversed backgrounds.",
+            "type": "color",
+            "value": "{global.background.color.450}"
+          },
+          "clicked": {
+            "description": "Use as the clicked color for interactive components with inversed backgrounds.",
+            "type": "color",
+            "value": "{global.background.color.450}"
           }
         },
         "disabled": {
@@ -950,6 +967,10 @@
             "value": "{global.border.color.50}"
           }
         },
+        "high-contrast": {
+          "type": "color",
+          "value": "rgba(255, 255, 255, 0.0000)"
+        },
         "brand": {
           "default": {
             "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
@@ -1696,19 +1717,40 @@
     "box-shadow": {
       "color": {
         "sm": {
-          "description": "Use as the color of small box-shadows.",
-          "type": "color",
-          "value": "{global.box-shadow.color.100}"
+          "default": {
+            "description": "Use as the color of small box-shadows.",
+            "type": "color",
+            "value": "{global.box-shadow.color.100}"
+          },
+          "directional": {
+            "description": "Use as the color of small box-shadows.",
+            "type": "color",
+            "value": "{global.box-shadow.color.200}"
+          }
         },
         "md": {
-          "description": "Use as the color of medium box-shadows.",
-          "type": "color",
-          "value": "{global.box-shadow.color.200}"
+          "default": {
+            "description": "Use as the color of medium box-shadows.",
+            "type": "color",
+            "value": "{global.box-shadow.color.100}"
+          },
+          "directional": {
+            "description": "Use as the color of medium box-shadows.",
+            "type": "color",
+            "value": "{global.box-shadow.color.100}"
+          }
         },
         "lg": {
-          "description": "Use as the color of large box-shadows.",
-          "type": "color",
-          "value": "{global.box-shadow.color.200}"
+          "default": {
+            "description": "Use as the color of large box-shadows.",
+            "type": "color",
+            "value": "{global.box-shadow.color.100}"
+          },
+          "directional": {
+            "description": "Use as the color of large box-shadows.",
+            "type": "color",
+            "value": "{global.box-shadow.color.200}"
+          }
         }
       }
     }

package/tokens/default/semantic.motion.json

@@ -38,72 +38,72 @@
           "type": "number",
           "value": "{global.duration.600}"
         },
-        "fade": {
+        "slide-in": {
           "short": {
-            "description": "Use a short/quick fade to transition color and/or opacity. Useful for fading in one or more elements. Short fades are used for small elements traveling short distances. Used in small interactions like buttons.",
+            "description": "Use for a short duration of a slide-in animation, which moves an offscreen element into the viewport.",
             "type": "number",
-            "value": "{global.motion.duration.sm}"
+            "value": "{global.motion.duration.lg}"
           },
           "default": {
-            "description": "Use a default fade to transition color and/or opacity. Useful for fading in one or more elements. Default fades are used for medium sized elements traveling medium distances. Used on alerts.",
+            "description": "Use for a default duration of a slide-in animation, which moves an offscreen element into the viewport.",
             "type": "number",
-            "value": "{global.motion.duration.md}"
+            "value": "{global.motion.duration.xl}"
           },
           "long": {
-            "description": "Use a long fade to transition color and/or opacity. Useful for fading in one or more elements. Long fades are used for large elements traveling long distances.",
+            "description": "Use for a longer duration of a slide-in animation, which moves an offscreen element into the viewport.",
             "type": "number",
-            "value": "{global.motion.duration.lg}"
+            "value": "{global.motion.duration.2xl}"
           }
         },
-        "slide-out": {
+        "icon": {
           "short": {
-            "description": "Use for a shorter duration of a slide-out animation, which moves an element out of the viewport.",
+            "description": "Use a short duration on an icon that requires a fast/snappy transition. Used to define the speed at which an icon may animate. Used on a notification badge(stateful button).",
             "type": "number",
-            "value": "{global.motion.duration.lg}"
+            "value": "{global.motion.duration.xs}"
           },
           "default": {
-            "description": "Use as the default duration of a slide-out animation, which moves an element out of the viewport.",
+            "description": "Use a default duration on an icon that requires a moderately timed transition. Used to define the speed at which an icon may animate. Used on a favoriting star(icon button).",
             "type": "number",
-            "value": "{global.motion.duration.xl}"
+            "value": "{global.motion.duration.sm}"
           },
           "long": {
-            "description": "Use for a longer duration of a slide-out animation, which moves an element out of the viewport.",
+            "description": "Use a long duration on an icon that requires a slow transition. Used to define the speed at which an icon may animate. Used on the settings cog icon(plain menu toggle).",
             "type": "number",
-            "value": "{global.motion.duration.2xl}"
+            "value": "{global.motion.duration.md}"
           }
         },
-        "slide-in": {
+        "fade": {
           "short": {
-            "description": "Use for a short duration of a slide-in animation, which moves an offscreen element into the viewport.",
+            "description": "Use a short/quick fade to transition color and/or opacity. Useful for fading in one or more elements. Short fades are used for small elements traveling short distances. Used in small interactions like buttons.",
             "type": "number",
-            "value": "{global.motion.duration.lg}"
+            "value": "{global.motion.duration.sm}"
           },
           "default": {
-            "description": "Use for a default duration of a slide-in animation, which moves an offscreen element into the viewport.",
+            "description": "Use a default fade to transition color and/or opacity. Useful for fading in one or more elements. Default fades are used for medium sized elements traveling medium distances. Used on alerts.",
             "type": "number",
-            "value": "{global.motion.duration.xl}"
+            "value": "{global.motion.duration.md}"
           },
           "long": {
-            "description": "Use for a longer duration of a slide-in animation, which moves an offscreen element into the viewport.",
+            "description": "Use a long fade to transition color and/or opacity. Useful for fading in one or more elements. Long fades are used for large elements traveling long distances.",
             "type": "number",
-            "value": "{global.motion.duration.2xl}"
+            "value": "{global.motion.duration.lg}"
           }
         },
-        "icon": {
+        "slide-out": {
           "short": {
-            "description": "Use a short duration on an icon that requires a fast/snappy transition. Used to define the speed at which an icon may animate. Used on a notification badge(stateful button).",
+            "description": "Use for a shorter duration of a slide-out animation, which moves an element out of the viewport.",
             "type": "number",
-            "value": "{global.motion.duration.xs}"
+            "value": "{global.motion.duration.lg}"
           },
           "default": {
-            "description": "Use a default duration on an icon that requires a moderately timed transition. Used to define the speed at which an icon may animate. Used on a favoriting star(icon button).",
+            "description": "Use as the default duration of a slide-out animation, which moves an element out of the viewport.",
             "type": "number",
-            "value": "{global.motion.duration.sm}"
+            "value": "{global.motion.duration.xl}"
           },
           "long": {
-            "description": "Use a long duration on an icon that requires a slow transition. Used to define the speed at which an icon may animate. Used on the settings cog icon(plain menu toggle).",
+            "description": "Use for a longer duration of a slide-out animation, which moves an element out of the viewport.",
             "type": "number",
-            "value": "{global.motion.duration.md}"
+            "value": "{global.motion.duration.2xl}"
           }
         }
       },