@patternfly/design-tokens 1.15.0 → 1.15.2

package/tokens/default/highcontrast/semantic.highcontrast.json

@@ -46,12 +46,10 @@
         },
         "glass": {
           "primary": {
-            "type": "color",
-            "value": "{global.background.color.primary.default}"
-          },
-          "floating": {
-            "type": "color",
-            "value": "{global.background.color.floating.default}"
+            "default": {
+              "type": "color",
+              "value": "{global.background.color.primary.default}"
+            }
           }
         },
         "floating": {
@@ -69,6 +67,12 @@
             "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": {
@@ -163,6 +167,14 @@
             "value": "{global.background.color.500}"
           }
         },
+        "striped": {
+          "row": {
+            "default": {
+              "type": "color",
+              "value": "{global.background.color.700}"
+            }
+          }
+        },
         "loading": {
           "skeleton": {
             "default": {
@@ -182,10 +194,6 @@
             "primary": {
               "type": "number",
               "value": 0
-            },
-            "floating": {
-              "type": "number",
-              "value": 0
             }
           }
         }
@@ -551,6 +559,31 @@
     },
     "icon": {
       "color": {
+        "regular": {
+          "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text",
+          "type": "color",
+          "value": "{global.icon.color.100}"
+        },
+        "subtle": {
+          "description": "Use as the color for icons when you want the icon to have less emphasis and/or when paired with subtle-colored text",
+          "type": "color",
+          "value": "{global.icon.color.150}"
+        },
+        "inverse": {
+          "description": "Use as the color for icons that are placed on an inverse background color",
+          "type": "color",
+          "value": "{global.icon.color.300}"
+        },
+        "disabled": {
+          "description": "Use as the color for icons that show in disabled icon buttons and/or when paired with disabled-color text",
+          "type": "color",
+          "value": "{global.color.disabled.200}"
+        },
+        "on-disabled": {
+          "description": "Use as the color for icons that are placed on a disabled background color and/or are paired with on-disabled colored text.",
+          "type": "color",
+          "value": "{global.color.disabled.300}"
+        },
         "brand": {
           "default": {
             "description": "Use as the color for icons that convey your brand and/or are paired with branded text color.",
@@ -861,31 +894,6 @@
             }
           }
         },
-        "regular": {
-          "description": "Use as the default color for icons in icon buttons and/or when paired with regular-colored text",
-          "type": "color",
-          "value": "{global.icon.color.100}"
-        },
-        "subtle": {
-          "description": "Use as the color for icons when you want the icon to have less emphasis and/or when paired with subtle-colored text",
-          "type": "color",
-          "value": "{global.icon.color.150}"
-        },
-        "inverse": {
-          "description": "Use as the color for icons that are placed on an inverse background color",
-          "type": "color",
-          "value": "{global.icon.color.300}"
-        },
-        "disabled": {
-          "description": "Use as the color for icons that show in disabled icon buttons and/or when paired with disabled-color text",
-          "type": "color",
-          "value": "{global.color.disabled.200}"
-        },
-        "on-disabled": {
-          "description": "Use as the color for icons that are placed on a disabled background color and/or are paired with on-disabled colored text.",
-          "type": "color",
-          "value": "{global.color.disabled.300}"
-        },
         "severity": {
           "undefined": {
             "default": {
@@ -1089,6 +1097,46 @@
     },
     "border": {
       "color": {
+        "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",
+          "value": "{global.border.color.400}"
+        },
+        "hover": {
+          "description": "Use as the hover state border color for elements like form inputs, menu toggles, cards, etc.",
+          "type": "color",
+          "value": "{global.color.brand.300}"
+        },
+        "clicked": {
+          "description": "Use as the clicked state border color for elements like form inputs, menu toggles, cards, etc.",
+          "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",
+          "value": "{global.color.disabled.200}"
+        },
+        "alt": {
+          "description": "Use when border color needs to match the primary bkg color – helpful when you want a divider to look like negative space when shown on a colored bkg",
+          "type": "color",
+          "value": "{global.background.color.primary.default}"
+        },
+        "on-secondary": {
+          "description": "Use on borders/dividers that are placed on a secondary bkg color.",
+          "type": "color",
+          "value": "{global.border.color.400}"
+        },
         "control": {
           "default": {
             "type": "color",
@@ -1237,45 +1285,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",
-          "value": "{global.border.color.400}"
-        },
-        "hover": {
-          "description": "Use as the hover state border color for elements like form inputs, menu toggles, cards, etc.",
-          "type": "color",
-          "value": "{global.color.brand.300}"
-        },
-        "clicked": {
-          "description": "Use as the clicked state border color for elements like form inputs, menu toggles, cards, etc.",
-          "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",
-          "value": "{global.color.disabled.200}"
-        },
-        "alt": {
-          "description": "Use when border color needs to match the primary bkg color – helpful when you want a divider to look like negative space when shown on a colored bkg",
-          "type": "color",
-          "value": "{global.background.color.primary.default}"
-        },
-        "on-secondary": {
-          "description": "Use on borders/dividers that are placed on a secondary bkg color.",
-          "type": "color",
-          "value": "{global.border.color.400}"
+        "glass": {
+          "default": {
+            "type": "color",
+            "value": "{global.border.color.subtle}"
+          }
         },
         "nonstatus": {
           "red": {
@@ -1442,6 +1456,46 @@
     },
     "text": {
       "color": {
+        "regular": {
+          "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.",
+          "type": "color",
+          "value": "{global.text.color.100}"
+        },
+        "subtle": {
+          "description": "Use as a subtle text color for text in an element that is secondary or less important, like descriptions or inactive tab labels.",
+          "type": "color",
+          "value": "{global.text.color.250}"
+        },
+        "inverse": {
+          "description": "Use as the color of text that is placed on an inverse background color, like tooltips.",
+          "type": "color",
+          "value": "{global.text.color.300}"
+        },
+        "placeholder": {
+          "description": "Use as the color of text that serves as a placeholder, like within a search bar/input.",
+          "type": "color",
+          "value": "{global.text.color.subtle}"
+        },
+        "disabled": {
+          "description": "Use as the color of text on disabled elements, like disabled menu items.",
+          "type": "color",
+          "value": "{global.color.disabled.200}"
+        },
+        "on-disabled": {
+          "description": "Use as the color of text that is placed on a disabled background, like disabled menu toggles or tabs.",
+          "type": "color",
+          "value": "{global.color.disabled.300}"
+        },
+        "required": {
+          "description": "Use as the color of text that signals that action/information is required from users, like asterisks placed beside form fields or checkboxes.",
+          "type": "color",
+          "value": "{global.text.color.500}"
+        },
+        "on-highlight": {
+          "description": "Use as the color of text that is highlighted.",
+          "type": "color",
+          "value": "{global.text.color.100}"
+        },
         "link": {
           "default": {
             "description": "Use as the default text color for links.",
@@ -1476,21 +1530,6 @@
             "value": "{global.color.brand.500}"
           }
         },
-        "regular": {
-          "description": "Use as the primary color for standard text, like heading/body copy. Icons paired with regular text should inherit this color or should use global/icon/color/regular.",
-          "type": "color",
-          "value": "{global.text.color.100}"
-        },
-        "subtle": {
-          "description": "Use as a subtle text color for text in an element that is secondary or less important, like descriptions or inactive tab labels.",
-          "type": "color",
-          "value": "{global.text.color.250}"
-        },
-        "inverse": {
-          "description": "Use as the color of text that is placed on an inverse background color, like tooltips.",
-          "type": "color",
-          "value": "{global.text.color.300}"
-        },
         "on-brand": {
           "default": {
             "description": "Use as the default color for text placed on a brand-colored background.",
@@ -1542,31 +1581,6 @@
             }
           }
         },
-        "placeholder": {
-          "description": "Use as the color of text that serves as a placeholder, like within a search bar/input.",
-          "type": "color",
-          "value": "{global.text.color.subtle}"
-        },
-        "disabled": {
-          "description": "Use as the color of text on disabled elements, like disabled menu items.",
-          "type": "color",
-          "value": "{global.color.disabled.200}"
-        },
-        "on-disabled": {
-          "description": "Use as the color of text that is placed on a disabled background, like disabled menu toggles or tabs.",
-          "type": "color",
-          "value": "{global.color.disabled.300}"
-        },
-        "required": {
-          "description": "Use as the color of text that signals that action/information is required from users, like asterisks placed beside form fields or checkboxes.",
-          "type": "color",
-          "value": "{global.text.color.500}"
-        },
-        "on-highlight": {
-          "description": "Use as the color of text that is highlighted.",
-          "type": "color",
-          "value": "{global.text.color.100}"
-        },
         "status": {
           "success": {
             "default": {
@@ -1966,24 +1980,24 @@
         }
       }
     },
-    "focus-ring": {
+    "text-decoration": {
       "color": {
         "default": {
-          "description": "Use as color value for custom focus rings",
           "type": "color",
-          "value": "{global.focus-ring.color.200}"
+          "value": "{global.border.color.400}"
+        },
+        "hover": {
+          "type": "color",
+          "value": "{global.border.color.hover}"
         }
       }
     },
-    "text-decoration": {
+    "focus-ring": {
       "color": {
         "default": {
+          "description": "Use as color value for custom focus rings",
           "type": "color",
-          "value": "{global.border.color.default}"
-        },
-        "hover": {
-          "type": "color",
-          "value": "{global.border.color.hover}"
+          "value": "{global.focus-ring.color.200}"
         }
       }
     }

package/tokens/default/highcontrast-dark/base.dark.json

@@ -127,6 +127,48 @@
             "value": "{color.yellow.20}"
           }
         },
+        "severity": {
+          "undefined": {
+            "100": {
+              "type": "color",
+              "value": "{color.gray.40}"
+            }
+          },
+          "none": {
+            "100": {
+              "type": "color",
+              "value": "{color.blue.30}"
+            }
+          },
+          "minor": {
+            "100": {
+              "type": "color",
+              "value": "{color.gray.30}"
+            }
+          },
+          "moderate": {
+            "100": {
+              "type": "color",
+              "value": "{color.yellow.30}"
+            }
+          },
+          "important": {
+            "100": {
+              "type": "color",
+              "value": "{color.orange.40}"
+            }
+          },
+          "critical": {
+            "100": {
+              "type": "color",
+              "value": "{color.red-orange.50}"
+            },
+            "200": {
+              "type": "color",
+              "value": "{color.red-orange.40}"
+            }
+          }
+        },
         "status": {
           "success": {
             "100": {
@@ -199,48 +241,6 @@
             }
           }
         },
-        "severity": {
-          "undefined": {
-            "100": {
-              "type": "color",
-              "value": "{color.gray.40}"
-            }
-          },
-          "none": {
-            "100": {
-              "type": "color",
-              "value": "{color.blue.30}"
-            }
-          },
-          "minor": {
-            "100": {
-              "type": "color",
-              "value": "{color.gray.30}"
-            }
-          },
-          "moderate": {
-            "100": {
-              "type": "color",
-              "value": "{color.yellow.30}"
-            }
-          },
-          "important": {
-            "100": {
-              "type": "color",
-              "value": "{color.orange.40}"
-            }
-          },
-          "critical": {
-            "100": {
-              "type": "color",
-              "value": "{color.red-orange.50}"
-            },
-            "200": {
-              "type": "color",
-              "value": "{color.red-orange.40}"
-            }
-          }
-        },
         "nonstatus": {
           "red": {
             "100": {
@@ -378,11 +378,11 @@
         "color": {
           "50": {
             "type": "color",
-            "value": "{color.gray.60}"
+            "value": "{color.gray.70}"
           },
           "100": {
             "type": "color",
-            "value": "{color.gray.50}"
+            "value": "{color.gray.60}"
           },
           "200": {
             "type": "color",

package/tokens/default/highcontrast-dark/palette.color.json

@@ -5,6 +5,10 @@
       "type": "color",
       "value": "#ffffff"
     },
+    "black": {
+      "type": "color",
+      "value": "#000000"
+    },
     "gray": {
       "10": {
         "type": "color",
@@ -51,10 +55,6 @@
         "value": "#151515"
       }
     },
-    "black": {
-      "type": "color",
-      "value": "#000000"
-    },
     "blue": {
       "10": {
         "type": "color",