@patternfly/design-tokens 1.14.9 → 1.15.1

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,14 @@
             "value": "{global.background.color.600}"
           }
         },
+        "glass": {
+          "primary": {
+            "default": {
+              "type": "color",
+              "value": "{global.background.color.primary.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.",
@@ -83,6 +67,19 @@
             "description": "Use as the clicked state for floating backgrounds",
             "type": "color",
             "value": "{global.background.color.200}"
+          },
+          "secondary": {
+            "default": {
+              "type": "color",
+              "value": "{global.background.color.secondary.default}"
+            }
+          }
+        },
+        "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": {
@@ -170,6 +167,14 @@
             "value": "{global.background.color.500}"
           }
         },
+        "striped": {
+          "row": {
+            "default": {
+              "type": "color",
+              "value": "{global.background.color.700}"
+            }
+          }
+        },
         "loading": {
           "skeleton": {
             "default": {
@@ -183,15 +188,13 @@
           }
         }
       },
-      "opacity": {
+      "filter": {
         "glass": {
-          "primary": {
-            "type": "number",
-            "value": 100
-          },
-          "floating": {
-            "type": "number",
-            "value": 100
+          "blur": {
+            "primary": {
+              "type": "number",
+              "value": 0
+            }
           }
         }
       }
@@ -1282,6 +1285,12 @@
           "type": "color",
           "value": "{global.border.color.300}"
         },
+        "glass": {
+          "default": {
+            "type": "color",
+            "value": "{global.border.color.subtle}"
+          }
+        },
         "nonstatus": {
           "red": {
             "default": {

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

@@ -38,23 +38,6 @@
           "type": "number",
           "value": "{global.duration.600}"
         },
-        "fade": {
-          "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.",
-            "type": "number",
-            "value": "{global.motion.duration.sm}"
-          },
-          "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.",
-            "type": "number",
-            "value": "{global.motion.duration.md}"
-          },
-          "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.",
-            "type": "number",
-            "value": "{global.motion.duration.lg}"
-          }
-        },
         "slide-out": {
           "short": {
             "description": "Use for a shorter duration of a slide-out animation, which moves an element out of the viewport.",
@@ -72,21 +55,21 @@
             "value": "{global.motion.duration.2xl}"
           }
         },
-        "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": {
@@ -105,6 +88,23 @@
             "type": "number",
             "value": "{global.motion.duration.md}"
           }
+        },
+        "slide-in": {
+          "short": {
+            "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 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-in animation, which moves an offscreen element into the viewport.",
+            "type": "number",
+            "value": "{global.motion.duration.2xl}"
+          }
         }
       },
       "delay": {

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

@@ -1,12 +1,33 @@
 
 {
   "global": {
+    "color": {
+      "brand": {
+        "accent": {
+          "default": {
+            "description": "Use this color for elements that you want to reinforce your brand",
+            "type": "color",
+            "value": "{global.dark.color.brand.accent.100}"
+          },
+          "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}"
+          }
+        }
+      }
+    },
     "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}"
+            },
+            "default": {
+              "description": "Use as the default 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}"
+            }
           }
         }
       }
     },
-    "text": {
+    "icon": {
       "color": {
+        "brand": {
+          "accent": {
+            "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}"
+            },
+            "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}"
+            }
+          }
+        },
         "on-brand": {
           "accent": {
             "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}"
+            },
+            "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}"
+            },
+            "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}"
             }
           }
         }

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

@@ -1,12 +1,33 @@
 
 {
   "global": {
+    "color": {
+      "brand": {
+        "accent": {
+          "default": {
+            "description": "Use this color for elements that you want to reinforce your brand",
+            "type": "color",
+            "value": "{global.color.brand.accent.100}"
+          },
+          "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}"
+          }
+        }
+      }
+    },
     "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/redhat.dimension.glass.json

@@ -0,0 +1,2 @@
+
+{}

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

@@ -1,12 +1,33 @@
 
 {
   "global": {
+    "color": {
+      "brand": {
+        "accent": {
+          "default": {
+            "description": "Use this color for elements that you want to reinforce your brand",
+            "type": "color",
+            "value": "{global.dark.color.brand.accent.100}"
+          },
+          "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}"
+          }
+        }
+      }
+    },
     "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,56 @@
         }
       }
     },
-    "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}"
+            },
             "default": {
               "description": "Use as the default 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}"
+            }
+          }
+        }
+      }
+    },
+    "icon": {
+      "color": {
+        "brand": {
+          "accent": {
+            "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}"
+            },
+            "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}"
+            }
+          }
+        },
+        "on-brand": {
+          "accent": {
+            "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}"
+            },
+            "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}"
             }
           }
         }

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

@@ -1,12 +1,33 @@
 
 {
   "global": {
+    "color": {
+      "brand": {
+        "accent": {
+          "default": {
+            "description": "Use this color for elements that you want to reinforce your brand",
+            "type": "color",
+            "value": "{global.color.brand.accent.400}"
+          },
+          "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}"
+          }
+        }
+      }
+    },
     "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}"
+          }
         }
       }
     }