@patternfly/design-tokens 1.14.8 → 1.15.0

package/tokens/default/light/charts.json

@@ -292,24 +292,6 @@
           "value": 22
         }
       },
-      "stroke-line-cap": {
-        "type": "string",
-        "value": "round"
-      },
-      "layout": {
-        "padding": {
-          "type": "number",
-          "value": 50
-        },
-        "height": {
-          "type": "number",
-          "value": 300
-        },
-        "width": {
-          "type": "number",
-          "value": 450
-        }
-      },
       "label": {
         "padding": {
           "type": "number",
@@ -336,6 +318,24 @@
           "value": "{color.gray.90}"
         }
       },
+      "layout": {
+        "padding": {
+          "type": "number",
+          "value": 50
+        },
+        "height": {
+          "type": "number",
+          "value": 300
+        },
+        "width": {
+          "type": "number",
+          "value": 450
+        }
+      },
+      "stroke-line-cap": {
+        "type": "string",
+        "value": "round"
+      },
       "stroke-line-join": {
         "type": "string",
         "value": "round"

package/tokens/default/light/semantic.dimension.json

@@ -420,11 +420,6 @@
           "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": {
@@ -515,6 +510,11 @@
             "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/light/semantic.json

@@ -2,31 +2,7 @@
 {
   "global": {
     "background": {
-      "filter": {
-        "glass": {
-          "blur": {
-            "primary": {
-              "type": "number",
-              "value": 0
-            },
-            "floating": {
-              "type": "number",
-              "value": 0
-            }
-          }
-        }
-      },
       "color": {
-        "glass": {
-          "primary": {
-            "type": "color",
-            "value": "{global.background.color.primary.default}"
-          },
-          "floating": {
-            "type": "color",
-            "value": "{global.background.color.floating.default}"
-          }
-        },
         "primary": {
           "default": {
             "description": "Use as the primary background color for UI content such as cards, page sections, and other content areas.",
@@ -68,6 +44,16 @@
             "value": "{global.background.color.600}"
           }
         },
+        "glass": {
+          "primary": {
+            "type": "color",
+            "value": "{global.background.color.primary.default}"
+          },
+          "floating": {
+            "type": "color",
+            "value": "{global.background.color.floating.default}"
+          }
+        },
         "floating": {
           "default": {
             "description": "Use as the background color for components that appear over other content, such as toast alerts, menus, modals, overlay drawers, etc.",
@@ -85,6 +71,13 @@
             "value": "{global.background.color.200}"
           }
         },
+        "sticky": {
+          "default": {
+            "description": "Use as the background color for components that appear over other content, such as toast alerts, menus, modals, overlay drawers, etc.",
+            "type": "color",
+            "value": "{global.background.color.100}"
+          }
+        },
         "action": {
           "plain": {
             "default": {
@@ -183,15 +176,17 @@
           }
         }
       },
-      "opacity": {
+      "filter": {
         "glass": {
-          "primary": {
-            "type": "number",
-            "value": 100
-          },
-          "floating": {
-            "type": "number",
-            "value": 100
+          "blur": {
+            "primary": {
+              "type": "number",
+              "value": 0
+            },
+            "floating": {
+              "type": "number",
+              "value": 0
+            }
           }
         }
       }

package/tokens/default/light/semantic.motion.json

@@ -55,36 +55,36 @@
             "value": "{global.motion.duration.lg}"
           }
         },
-        "slide-out": {
+        "slide-in": {
           "short": {
-            "description": "Use for a shorter duration of a slide-out animation, which moves an element out of the viewport.",
+            "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.lg}"
           },
           "default": {
-            "description": "Use as the default duration of a slide-out animation, which moves an element out of the viewport.",
+            "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.xl}"
           },
           "long": {
-            "description": "Use for a longer duration of a slide-out animation, which moves an element out of the viewport.",
+            "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.2xl}"
           }
         },
-        "slide-in": {
+        "slide-out": {
           "short": {
-            "description": "Use for a short duration of a slide-in animation, which moves an offscreen element into the viewport.",
+            "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.lg}"
           },
           "default": {
-            "description": "Use for a default duration of a slide-in animation, which moves an offscreen element into the viewport.",
+            "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.xl}"
           },
           "long": {
-            "description": "Use for a longer duration of a slide-in animation, which moves an offscreen element into the viewport.",
+            "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.2xl}"
           }

package/tokens/redhat/dark/redhat.color.dark.json

@@ -1,12 +1,33 @@
 
 {
   "global": {
+    "color": {
+      "brand": {
+        "accent": {
+          "hover": {
+            "description": "Use as the hover state for elements that have a branded background color",
+            "type": "color",
+            "value": "{global.dark.color.brand.accent.200}"
+          },
+          "default": {
+            "description": "Use this color for elements that you want to reinforce your brand",
+            "type": "color",
+            "value": "{global.dark.color.brand.accent.100}"
+          },
+          "clicked": {
+            "description": "Use as the clicked state for elements that have a brand background color",
+            "type": "color",
+            "value": "{global.dark.color.brand.accent.200}"
+          }
+        }
+      }
+    },
     "border": {
       "color": {
         "brand": {
           "accent": {
-            "clicked": {
-              "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
+            "default": {
+              "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
               "type": "color",
               "value": "{global.dark.color.brand.accent.400}"
             },
@@ -15,8 +36,8 @@
               "type": "color",
               "value": "{global.dark.color.brand.accent.400}"
             },
-            "default": {
-              "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
+            "clicked": {
+              "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
               "type": "color",
               "value": "{global.dark.color.brand.accent.400}"
             }
@@ -24,35 +45,61 @@
         }
       }
     },
-    "color": {
-      "brand": {
-        "accent": {
-          "hover": {
-            "description": "Use as the hover state for elements that have a branded background color",
-            "type": "color",
-            "value": "{global.dark.color.brand.accent.200}"
-          },
-          "clicked": {
-            "description": "Use as the clicked state for elements that have a brand background color",
-            "type": "color",
-            "value": "{global.dark.color.brand.accent.200}"
-          },
-          "default": {
-            "description": "Use this color for elements that you want to reinforce your brand",
-            "type": "color",
-            "value": "{global.dark.color.brand.accent.100}"
+    "text": {
+      "color": {
+        "on-brand": {
+          "accent": {
+            "hover": {
+              "description": "Use as the hover state color for text placed on a brand-colored background.",
+              "type": "color",
+              "value": "{global.text.color.regular}"
+            },
+            "clicked": {
+              "description": "Use as the clicked state color for text placed on a brand-colored background.",
+              "type": "color",
+              "value": "{global.text.color.regular}"
+            },
+            "default": {
+              "description": "Use as the default color for text placed on a brand-colored background.",
+              "type": "color",
+              "value": "{global.text.color.regular}"
+            }
           }
         }
       }
     },
-    "text": {
+    "icon": {
       "color": {
         "on-brand": {
           "accent": {
+            "hover": {
+              "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.",
+              "type": "color",
+              "value": "{global.icon.color.regular}"
+            },
+            "clicked": {
+              "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.",
+              "type": "color",
+              "value": "{global.icon.color.regular}"
+            },
             "default": {
-              "description": "Use as the default color for text placed on a brand-colored background.",
+              "description": "Use as the default color for icons that are placed on a brand background color and/or are paired with on-brand colored text.",
               "type": "color",
-              "value": "{global.text.color.regular}"
+              "value": "{global.icon.color.regular}"
+            }
+          }
+        },
+        "brand": {
+          "accent": {
+            "clicked": {
+              "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.",
+              "type": "color",
+              "value": "{global.dark.color.brand.accent.300}"
+            },
+            "hover": {
+              "description": "Use as the hover state color for icons that convey your brand and/or are paired with branded text color.",
+              "type": "color",
+              "value": "{global.dark.color.brand.accent.300}"
             }
           }
         }

package/tokens/redhat/glass/redhat.color.glass.json

@@ -1,12 +1,33 @@
 
 {
   "global": {
+    "color": {
+      "brand": {
+        "accent": {
+          "hover": {
+            "description": "Use as the hover state for elements that have a branded background color",
+            "type": "color",
+            "value": "{global.color.brand.accent.200}"
+          },
+          "default": {
+            "description": "Use this color for elements that you want to reinforce your brand",
+            "type": "color",
+            "value": "{global.color.brand.accent.100}"
+          },
+          "clicked": {
+            "description": "Use as the clicked state for elements that have a brand background color",
+            "type": "color",
+            "value": "{global.color.brand.accent.200}"
+          }
+        }
+      }
+    },
     "border": {
       "color": {
         "brand": {
           "accent": {
-            "clicked": {
-              "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
+            "default": {
+              "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
               "type": "color",
               "value": "{global.color.brand.accent.400}"
             },
@@ -15,35 +36,14 @@
               "type": "color",
               "value": "{global.color.brand.accent.400}"
             },
-            "default": {
-              "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
+            "clicked": {
+              "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
               "type": "color",
               "value": "{global.color.brand.accent.400}"
             }
           }
         }
       }
-    },
-    "color": {
-      "brand": {
-        "accent": {
-          "hover": {
-            "description": "Use as the hover state for elements that have a branded background color",
-            "type": "color",
-            "value": "{global.color.brand.accent.200}"
-          },
-          "clicked": {
-            "description": "Use as the clicked state for elements that have a brand background color",
-            "type": "color",
-            "value": "{global.color.brand.accent.200}"
-          },
-          "default": {
-            "description": "Use this color for elements that you want to reinforce your brand",
-            "type": "color",
-            "value": "{global.color.brand.accent.100}"
-          }
-        }
-      }
     }
   }
 }

package/tokens/redhat/glass-dark/redhat.color.glass.dark.json

@@ -1,12 +1,33 @@
 
 {
   "global": {
+    "color": {
+      "brand": {
+        "accent": {
+          "hover": {
+            "description": "Use as the hover state for elements that have a branded background color",
+            "type": "color",
+            "value": "{global.dark.color.brand.accent.200}"
+          },
+          "default": {
+            "description": "Use this color for elements that you want to reinforce your brand",
+            "type": "color",
+            "value": "{global.dark.color.brand.accent.100}"
+          },
+          "clicked": {
+            "description": "Use as the clicked state for elements that have a brand background color",
+            "type": "color",
+            "value": "{global.dark.color.brand.accent.200}"
+          }
+        }
+      }
+    },
     "border": {
       "color": {
         "brand": {
           "accent": {
-            "clicked": {
-              "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
+            "default": {
+              "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
               "type": "color",
               "value": "{global.dark.color.brand.accent.400}"
             },
@@ -15,8 +36,8 @@
               "type": "color",
               "value": "{global.dark.color.brand.accent.400}"
             },
-            "default": {
-              "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
+            "clicked": {
+              "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
               "type": "color",
               "value": "{global.dark.color.brand.accent.400}"
             }
@@ -24,31 +45,20 @@
         }
       }
     },
-    "color": {
-      "brand": {
-        "accent": {
-          "hover": {
-            "description": "Use as the hover state for elements that have a branded background color",
-            "type": "color",
-            "value": "{global.dark.color.brand.accent.200}"
-          },
-          "clicked": {
-            "description": "Use as the clicked state for elements that have a brand background color",
-            "type": "color",
-            "value": "{global.dark.color.brand.accent.200}"
-          },
-          "default": {
-            "description": "Use this color for elements that you want to reinforce your brand",
-            "type": "color",
-            "value": "{global.dark.color.brand.accent.100}"
-          }
-        }
-      }
-    },
     "text": {
       "color": {
         "on-brand": {
           "accent": {
+            "hover": {
+              "description": "Use as the hover state color for text placed on a brand-colored background.",
+              "type": "color",
+              "value": "{global.text.color.regular}"
+            },
+            "clicked": {
+              "description": "Use as the clicked state color for text placed on a brand-colored background.",
+              "type": "color",
+              "value": "{global.text.color.regular}"
+            },
             "default": {
               "description": "Use as the default color for text placed on a brand-colored background.",
               "type": "color",
@@ -57,6 +67,38 @@
           }
         }
       }
+    },
+    "icon": {
+      "color": {
+        "on-brand": {
+          "accent": {
+            "hover": {
+              "description": "Use as the hover state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.",
+              "type": "color",
+              "value": "{global.icon.color.regular}"
+            },
+            "clicked": {
+              "description": "Use as the clicked state color for icons that are placed on a brand background color and/or are paired with on-brand colored text.",
+              "type": "color",
+              "value": "{global.icon.color.regular}"
+            }
+          }
+        },
+        "brand": {
+          "accent": {
+            "clicked": {
+              "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.",
+              "type": "color",
+              "value": "{global.dark.color.brand.accent.300}"
+            },
+            "hover": {
+              "description": "Use as the hover state color for icons that convey your brand and/or are paired with branded text color.",
+              "type": "color",
+              "value": "{global.dark.color.brand.accent.300}"
+            }
+          }
+        }
+      }
     }
   }
 }

package/tokens/redhat/highcontrast/redhat.color.highcontrast.json

@@ -1,12 +1,33 @@
 
 {
   "global": {
+    "color": {
+      "brand": {
+        "accent": {
+          "hover": {
+            "description": "Use as the hover state for elements that have a branded background color",
+            "type": "color",
+            "value": "{global.color.brand.accent.300}"
+          },
+          "default": {
+            "description": "Use this color for elements that you want to reinforce your brand",
+            "type": "color",
+            "value": "{global.color.brand.accent.400}"
+          },
+          "clicked": {
+            "description": "Use as the clicked state for elements that have a brand background color",
+            "type": "color",
+            "value": "{global.color.brand.accent.300}"
+          }
+        }
+      }
+    },
     "border": {
       "color": {
         "brand": {
           "accent": {
-            "clicked": {
-              "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
+            "default": {
+              "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
               "type": "color",
               "value": "{global.color.brand.accent.400}"
             },
@@ -15,35 +36,14 @@
               "type": "color",
               "value": "{global.color.brand.accent.400}"
             },
-            "default": {
-              "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
+            "clicked": {
+              "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
               "type": "color",
               "value": "{global.color.brand.accent.400}"
             }
           }
         }
       }
-    },
-    "color": {
-      "brand": {
-        "accent": {
-          "hover": {
-            "description": "Use as the hover state for elements that have a branded background color",
-            "type": "color",
-            "value": "{global.color.brand.accent.300}"
-          },
-          "clicked": {
-            "description": "Use as the clicked state for elements that have a brand background color",
-            "type": "color",
-            "value": "{global.color.brand.accent.300}"
-          },
-          "default": {
-            "description": "Use this color for elements that you want to reinforce your brand",
-            "type": "color",
-            "value": "{global.color.brand.accent.200}"
-          }
-        }
-      }
     }
   }
 }

package/tokens/redhat/highcontrast/redhat.dimension.highcontrast.json

@@ -3,12 +3,6 @@
   "global": {
     "border": {
       "radius": {
-        "control": {
-          "default": {
-            "type": "number",
-            "value": "{global.border.radius.pill}"
-          }
-        },
         "action": {
           "plain": {
             "default": {
@@ -16,6 +10,12 @@
               "value": "{global.border.radius.pill}"
             }
           }
+        },
+        "control": {
+          "default": {
+            "type": "number",
+            "value": "{global.border.radius.pill}"
+          }
         }
       }
     }