@patternfly/design-tokens 1.13.2 → 1.14.0

package/tokens/default/charts.json

@@ -270,6 +270,10 @@
           }
         }
       },
+      "letter-spacing": {
+        "type": "string",
+        "value": "normal"
+      },
       "FontSize": {
         "xs": {
           "type": "number",
@@ -288,14 +292,6 @@
           "value": 22
         }
       },
-      "letter-spacing": {
-        "type": "string",
-        "value": "normal"
-      },
-      "stroke-line-cap": {
-        "type": "string",
-        "value": "round"
-      },
       "label": {
         "padding": {
           "type": "number",
@@ -322,6 +318,10 @@
           "value": "{color.gray.90}"
         }
       },
+      "stroke-line-cap": {
+        "type": "string",
+        "value": "round"
+      },
       "layout": {
         "padding": {
           "type": "number",

package/tokens/default/palette.color.json

@@ -79,6 +79,10 @@
       "70": {
         "type": "color",
         "value": "#003366"
+      },
+      "80": {
+        "type": "color",
+        "value": "#002250"
       }
     },
     "teal": {
@@ -109,6 +113,10 @@
       "70": {
         "type": "color",
         "value": "#004d4d"
+      },
+      "80": {
+        "type": "color",
+        "value": "#003333"
       }
     },
     "yellow": {
@@ -139,6 +147,10 @@
       "70": {
         "type": "color",
         "value": "#73480b"
+      },
+      "80": {
+        "type": "color",
+        "value": "#54330b"
       }
     },
     "green": {
@@ -199,6 +211,10 @@
       "70": {
         "type": "color",
         "value": "#732e00"
+      },
+      "80": {
+        "type": "color",
+        "value": "#4d1f00"
       }
     },
     "red-orange": {
@@ -259,6 +275,10 @@
       "70": {
         "type": "color",
         "value": "#21134d"
+      },
+      "80": {
+        "type": "color",
+        "value": "#1b0d33"
       }
     },
     "red": {
@@ -289,6 +309,10 @@
       "70": {
         "type": "color",
         "value": "#5f0000"
+      },
+      "80": {
+        "type": "color",
+        "value": "#3f0000"
       }
     }
   }

package/tokens/default/semantic.dimension.json

@@ -359,24 +359,12 @@
           "type": "number",
           "value": "{global.icon.size.400}"
         },
+        "3xl": {
+          "description": "Use for triple extra large icons.",
+          "type": "number",
+          "value": "{global.icon.size.500}"
+        },
         "font": {
-          "body": {
-            "sm": {
-              "description": "Use for icons that are placed inline with small body text",
-              "type": "number",
-              "value": "{global.font.size.body.sm}"
-            },
-            "default": {
-              "description": "Use for icons that are placed inline with default body text",
-              "type": "number",
-              "value": "{global.font.size.body.default}"
-            },
-            "lg": {
-              "description": "Use for icons that are placed inline with large body text",
-              "type": "number",
-              "value": "{global.font.size.body.lg}"
-            }
-          },
           "heading": {
             "h1": {
               "description": "Use for icons that are placed inline with first level headings",
@@ -409,6 +397,23 @@
               "value": "{global.font.size.heading.h6}"
             }
           },
+          "body": {
+            "sm": {
+              "description": "Use for icons that are placed inline with small body text",
+              "type": "number",
+              "value": "{global.font.size.body.sm}"
+            },
+            "default": {
+              "description": "Use for icons that are placed inline with default body text",
+              "type": "number",
+              "value": "{global.font.size.body.default}"
+            },
+            "lg": {
+              "description": "Use for icons that are placed inline with large body text",
+              "type": "number",
+              "value": "{global.font.size.body.lg}"
+            }
+          },
           "xs": {
             "description": "Use for icons that are placed inline with font–size–xs text",
             "type": "number",
@@ -449,11 +454,6 @@
             "type": "number",
             "value": "{global.font.size.4xl}"
           }
-        },
-        "3xl": {
-          "description": "Use for triple extra large icons.",
-          "type": "number",
-          "value": "{global.icon.size.500}"
         }
       }
     },

package/tokens/default/semantic.json

@@ -967,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.",

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}"
           }
         }
       },