@patternfly/design-tokens 1.14.6 → 1.14.7

package/tokens/{highcontrast → default/highcontrast}/semantic.highcontrast.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.400}"
+        },
+        "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": {
@@ -478,17 +560,34 @@
           "default": {
             "description": "Use as the color for icons that convey your brand and/or are paired with branded text color.",
             "type": "color",
-            "value": "{color.blue.60}"
+            "value": "{global.color.brand.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": "{color.blue.70}"
+            "value": "{global.color.brand.400}"
           },
           "clicked": {
             "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.",
             "type": "color",
-            "value": "{color.blue.70}"
+            "value": "{global.color.brand.400}"
+          },
+          "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": {
@@ -530,17 +663,17 @@
             "default": {
               "description": "Use as the default color for text that communicates a success status.",
               "type": "color",
-              "value": "{global.color.status.success.150}"
+              "value": "{global.color.status.success.default}"
             },
             "hover": {
               "description": "Use as the hover state color for text that communicates a success status.",
               "type": "color",
-              "value": "{global.color.status.success.200}"
+              "value": "{global.color.status.success.hover}"
             },
             "clicked": {
               "description": "Use as the clicked state color for text that communicates a success status.",
               "type": "color",
-              "value": "{global.color.status.success.200}"
+              "value": "{global.color.status.success.clicked}"
             }
           },
           "on-success": {
@@ -962,15 +1095,15 @@
     "border": {
       "color": {
         "control": {
+          "default": {
+            "type": "color",
+            "value": "{global.border.color.400}"
+          },
           "read-only": {
             "type": "color",
-            "value": "{global.border.color.50}"
+            "value": "{global.border.color.100}"
           }
         },
-        "high-contrast": {
-          "type": "color",
-          "value": "{global.border.color.default}"
-        },
         "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.400}"
+            },
+            "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.400}"
+            }
           }
         },
         "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": "{global.border.color.default}"
+        },
         "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.400}"
         },
+        "subtle": {
+          "description": "Use as the default border color for elements like form inputs, menu toggles, cards, etc.",
+          "type": "color",
+          "value": "{global.border.color.400}"
+        },
         "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.400}"
         },
-        "main": {
-          "default": {
-            "type": "color",
-            "value": "{global.border.color.default}"
-          }
-        },
         "nonstatus": {
           "red": {
             "default": {
@@ -1265,6 +1436,12 @@
               "value": "{global.color.nonstatus.gray.500}"
             }
           }
+        },
+        "main": {
+          "default": {
+            "type": "color",
+            "value": "{global.border.color.default}"
+          }
         }
       }
     },
@@ -1291,17 +1468,17 @@
           "default": {
             "description": "Use as the default color for branded text.",
             "type": "color",
-            "value": "{color.blue.70}"
+            "value": "{global.color.brand.400}"
           },
           "hover": {
             "description": "Use as the hover state color for branded text.",
             "type": "color",
-            "value": "{color.blue.80}"
+            "value": "{global.color.brand.500}"
           },
           "clicked": {
             "description": "Use as the clicked state color for branded text.",
             "type": "color",
-            "value": "{color.blue.80}"
+            "value": "{global.color.brand.500}"
           }
         },
         "regular": {
@@ -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": {
@@ -1369,11 +1580,11 @@
             },
             "hover": {
               "type": "color",
-              "value": "{global.color.status.success.200}"
+              "value": "{global.color.status.success.300}"
             },
             "clicked": {
               "type": "color",
-              "value": "{global.color.status.success.200}"
+              "value": "{global.color.status.success.300}"
             }
           },
           "on-success": {
@@ -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.200}"
         }