@patternfly/design-tokens 1.14.6 → 1.14.7

package/tokens/default/{semantic.json → light/semantic.json}

@@ -3,6 +3,16 @@
   "global": {
     "background": {
       "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.",
@@ -145,6 +155,44 @@
             "type": "color",
             "value": "{global.background.color.500}"
           }
+        },
+        "loading": {
+          "skeleton": {
+            "default": {
+              "type": "color",
+              "value": "{global.background.color.600}"
+            },
+            "subtle": {
+              "type": "color",
+              "value": "{global.background.color.700}"
+            }
+          }
+        }
+      },
+      "filter": {
+        "glass": {
+          "blur": {
+            "primary": {
+              "type": "number",
+              "value": 0
+            },
+            "floating": {
+              "type": "number",
+              "value": 0
+            }
+          }
+        }
+      },
+      "opacity": {
+        "glass": {
+          "primary": {
+            "type": "number",
+            "value": 100
+          },
+          "floating": {
+            "type": "number",
+            "value": 100
+          }
         }
       }
     },
@@ -164,6 +212,40 @@
           "description": "Use as the clicked state for elements that have a brand background color",
           "type": "color",
           "value": "{global.color.brand.300}"
+        },
+        "accent": {
+          "default": {
+            "description": "Use this color for elements that you want to reinforce your brand",
+            "type": "color",
+            "value": "{global.color.brand.default}"
+          },
+          "hover": {
+            "description": "Use as the hover state for elements that have a branded background color",
+            "type": "color",
+            "value": "{global.color.brand.hover}"
+          },
+          "clicked": {
+            "description": "Use as the clicked state for elements that have a brand background color",
+            "type": "color",
+            "value": "{global.color.brand.clicked}"
+          }
+        },
+        "subtle": {
+          "default": {
+            "description": "Use this color for elements that you want to reinforce your brand",
+            "type": "color",
+            "value": "{global.color.brand.subtle.100}"
+          },
+          "hover": {
+            "description": "Use as the hover state for elements that have a branded background color",
+            "type": "color",
+            "value": "{global.color.brand.subtle.200}"
+          },
+          "clicked": {
+            "description": "Use as the clicked state for elements that have a brand background color",
+            "type": "color",
+            "value": "{global.color.brand.subtle.200}"
+          }
         }
       },
       "favorite": {
@@ -489,6 +571,23 @@
             "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.",
             "type": "color",
             "value": "{global.color.brand.clicked}"
+          },
+          "accent": {
+            "default": {
+              "description": "Use as the color for icons that convey your brand and/or are paired with branded text color.",
+              "type": "color",
+              "value": "{global.color.brand.accent.default}"
+            },
+            "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.color.brand.accent.hover}"
+            },
+            "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.color.brand.accent.clicked}"
+            }
           }
         },
         "on-brand": {
@@ -506,6 +605,40 @@
             "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.inverse}"
+          },
+          "accent": {
+            "default": {
+              "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.icon.color.inverse}"
+            },
+            "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.inverse}"
+            },
+            "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.inverse}"
+            }
+          },
+          "subtle": {
+            "default": {
+              "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.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}"
+            },
+            "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}"
+            }
           }
         },
         "favorite": {
@@ -962,15 +1095,15 @@
     "border": {
       "color": {
         "control": {
+          "default": {
+            "type": "color",
+            "value": "{global.border.color.300}"
+          },
           "read-only": {
             "type": "color",
-            "value": "{global.border.color.50}"
+            "value": "{global.border.color.100}"
           }
         },
-        "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.",
@@ -986,6 +1119,40 @@
             "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
             "type": "color",
             "value": "{global.color.brand.clicked}"
+          },
+          "accent": {
+            "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.default}"
+            },
+            "hover": {
+              "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
+              "type": "color",
+              "value": "{global.color.brand.accent.hover}"
+            },
+            "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.clicked}"
+            }
+          },
+          "subtle": {
+            "default": {
+              "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
+              "type": "color",
+              "value": "{global.color.brand.subtle.200}"
+            },
+            "hover": {
+              "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
+              "type": "color",
+              "value": "{global.color.brand.subtle.300}"
+            },
+            "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.subtle.300}"
+            }
           }
         },
         "status": {
@@ -1075,6 +1242,11 @@
             }
           }
         },
+        "high-contrast": {
+          "description": "Use as the default border color for elements like form inputs, menu toggles, cards, etc.",
+          "type": "color",
+          "value": "rgba(255, 255, 255, 0.0000)"
+        },
         "default": {
           "description": "Use as the default border color for elements like form inputs, menu toggles, cards, etc.",
           "type": "color",
@@ -1090,6 +1262,11 @@
           "type": "color",
           "value": "{global.color.brand.200}"
         },
+        "subtle": {
+          "description": "Use as the default border color for elements like form inputs, menu toggles, cards, etc.",
+          "type": "color",
+          "value": "{global.border.color.50}"
+        },
         "disabled": {
           "description": "Use as the disabled border color for elements like form inputs, menu toggles, cards, etc.",
           "type": "color",
@@ -1105,12 +1282,6 @@
           "type": "color",
           "value": "{global.border.color.300}"
         },
-        "main": {
-          "default": {
-            "type": "color",
-            "value": "{global.background.color.primary.default}"
-          }
-        },
         "nonstatus": {
           "red": {
             "default": {
@@ -1265,6 +1436,12 @@
               "value": "{global.color.nonstatus.gray.300}"
             }
           }
+        },
+        "main": {
+          "default": {
+            "type": "color",
+            "value": "{global.background.color.primary.default}"
+          }
         }
       }
     },
@@ -1334,6 +1511,40 @@
             "description": "Use as the clicked state color for text placed on a brand-colored background.",
             "type": "color",
             "value": "{global.text.color.inverse}"
+          },
+          "accent": {
+            "default": {
+              "description": "Use as the default color for text placed on a brand-colored background.",
+              "type": "color",
+              "value": "{global.text.color.inverse}"
+            },
+            "hover": {
+              "description": "Use as the hover state color for text placed on a brand-colored background.",
+              "type": "color",
+              "value": "{global.text.color.inverse}"
+            },
+            "clicked": {
+              "description": "Use as the clicked state color for text placed on a brand-colored background.",
+              "type": "color",
+              "value": "{global.text.color.inverse}"
+            }
+          },
+          "subtle": {
+            "default": {
+              "description": "Use as the default color for text placed on a brand-colored background.",
+              "type": "color",
+              "value": "{global.text.color.regular}"
+            },
+            "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}"
+            }
           }
         },
         "placeholder": {
@@ -1760,10 +1971,22 @@
         }
       }
     },
+    "text-decoration": {
+      "color": {
+        "default": {
+          "type": "color",
+          "value": "{global.border.color.default}"
+        },
+        "hover": {
+          "type": "color",
+          "value": "{global.border.color.hover}"
+        }
+      }
+    },
     "focus-ring": {
       "color": {
         "default": {
-          "description": "This token is used to define the color value for custom focus rings.",
+          "description": "Use as color value for custom focus rings",
           "type": "color",
           "value": "{global.focus-ring.color.100}"
         }

package/tokens/default/{semantic.motion.json → light/semantic.motion.json}

@@ -38,38 +38,38 @@
           "type": "number",
           "value": "{global.duration.600}"
         },
-        "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}"
           }
         },
-        "icon": {
+        "slide-in": {
           "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 short duration of a slide-in animation, which moves an offscreen element into 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 for a default 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.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-in animation, which moves an offscreen element into the viewport.",
             "type": "number",
-            "value": "{global.motion.duration.md}"
+            "value": "{global.motion.duration.2xl}"
           }
         },
         "fade": {
@@ -89,19 +89,19 @@
             "value": "{global.motion.duration.lg}"
           }
         },
-        "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

@@ -0,0 +1,62 @@
+
+{
+  "global": {
+    "border": {
+      "color": {
+        "brand": {
+          "accent": {
+            "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}"
+            },
+            "hover": {
+              "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
+              "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.",
+              "type": "color",
+              "value": "{global.dark.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.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": {
+            "default": {
+              "description": "Use as the default color for text placed on a brand-colored background.",
+              "type": "color",
+              "value": "{global.text.color.regular}"
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,49 @@
+
+{
+  "global": {
+    "border": {
+      "color": {
+        "brand": {
+          "accent": {
+            "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}"
+            },
+            "hover": {
+              "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
+              "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.",
+              "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

@@ -0,0 +1,62 @@
+
+{
+  "global": {
+    "border": {
+      "color": {
+        "brand": {
+          "accent": {
+            "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}"
+            },
+            "hover": {
+              "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
+              "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.",
+              "type": "color",
+              "value": "{global.dark.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.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": {
+            "default": {
+              "description": "Use as the default color for text placed on a brand-colored background.",
+              "type": "color",
+              "value": "{global.text.color.regular}"
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,49 @@
+
+{
+  "global": {
+    "border": {
+      "color": {
+        "brand": {
+          "accent": {
+            "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}"
+            },
+            "hover": {
+              "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
+              "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.",
+              "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

@@ -0,0 +1,23 @@
+
+{
+  "global": {
+    "border": {
+      "radius": {
+        "control": {
+          "default": {
+            "type": "number",
+            "value": "{global.border.radius.pill}"
+          }
+        },
+        "action": {
+          "plain": {
+            "default": {
+              "type": "number",
+              "value": "{global.border.radius.pill}"
+            }
+          }
+        }
+      }
+    }
+  }
+}