@patternfly/design-tokens 1.15.0 → 1.15.2

package/tokens/default/highcontrast-dark/semantic.highcontrast.dark.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.dark.background.color.300}"
+          },
+          "secondary": {
+            "default": {
+              "type": "color",
+              "value": "{global.background.color.secondary.default}"
+            }
           }
         },
         "sticky": {
@@ -117,7 +121,7 @@
           },
           "read-only": {
             "type": "color",
-            "value": "{global.dark.background.color.300}"
+            "value": "{global.dark.background.color.100}"
           }
         },
         "highlight": {
@@ -163,6 +167,14 @@
             "value": "{global.dark.background.color.500}"
           }
         },
+        "striped": {
+          "row": {
+            "default": {
+              "type": "color",
+              "value": "rgba(21, 21, 21, 0.3000)"
+            }
+          }
+        },
         "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.dark.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.dark.icon.color.200}"
+        },
+        "inverse": {
+          "description": "Use as the color for icons that are placed on an inverse background color",
+          "type": "color",
+          "value": "{global.dark.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.dark.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.dark.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.dark.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.dark.icon.color.200}"
-        },
-        "inverse": {
-          "description": "Use as the color for icons that are placed on an inverse background color",
-          "type": "color",
-          "value": "{global.dark.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.dark.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.dark.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.dark.border.color.300}"
+        },
+        "hover": {
+          "description": "Use as the hover state border color for elements like form inputs, menu toggles, cards, etc.",
+          "type": "color",
+          "value": "{global.dark.color.brand.100}"
+        },
+        "clicked": {
+          "description": "Use as the clicked state border color for elements like form inputs, menu toggles, cards, etc.",
+          "type": "color",
+          "value": "{global.dark.color.brand.200}"
+        },
+        "subtle": {
+          "description": "Use as the default border color for elements like form inputs, menu toggles, cards, etc.",
+          "type": "color",
+          "value": "{global.dark.border.color.300}"
+        },
+        "disabled": {
+          "description": "Use as the disabled border color for elements like form inputs, menu toggles, cards, etc.",
+          "type": "color",
+          "value": "{global.dark.color.disabled.100}"
+        },
+        "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.dark.border.color.300}"
+        },
         "control": {
           "default": {
             "type": "color",
@@ -1119,17 +1167,17 @@
             "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.200}"
+              "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.dark.color.brand.accent.300}"
+              "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.dark.color.brand.accent.300}"
+              "value": "{global.color.brand.accent.clicked}"
             }
           },
           "subtle": {
@@ -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.dark.border.color.300}"
-        },
-        "hover": {
-          "description": "Use as the hover state border color for elements like form inputs, menu toggles, cards, etc.",
-          "type": "color",
-          "value": "{global.dark.color.brand.100}"
-        },
-        "clicked": {
-          "description": "Use as the clicked state border color for elements like form inputs, menu toggles, cards, etc.",
-          "type": "color",
-          "value": "{global.dark.color.brand.200}"
-        },
-        "subtle": {
-          "description": "Use as the default border color for elements like form inputs, menu toggles, cards, etc.",
-          "type": "color",
-          "value": "{global.dark.border.color.300}"
-        },
-        "disabled": {
-          "description": "Use as the disabled border color for elements like form inputs, menu toggles, cards, etc.",
-          "type": "color",
-          "value": "{global.dark.color.disabled.100}"
-        },
-        "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.dark.border.color.300}"
+        "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.dark.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.dark.text.color.200}"
+        },
+        "inverse": {
+          "description": "Use as the color of text that is placed on an inverse background color, like tooltips.",
+          "type": "color",
+          "value": "{global.dark.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.dark.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.dark.color.disabled.400}"
+        },
+        "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.dark.text.color.400}"
+        },
+        "on-highlight": {
+          "description": "Use as the color of text that is highlighted.",
+          "type": "color",
+          "value": "{global.dark.text.color.300}"
+        },
         "link": {
           "default": {
             "description": "Use as the default text color for links.",
@@ -1476,21 +1530,6 @@
             "value": "{global.dark.color.brand.300}"
           }
         },
-        "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.dark.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.dark.text.color.200}"
-        },
-        "inverse": {
-          "description": "Use as the color of text that is placed on an inverse background color, like tooltips.",
-          "type": "color",
-          "value": "{global.dark.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.dark.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.dark.color.disabled.400}"
-        },
-        "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.dark.text.color.400}"
-        },
-        "on-highlight": {
-          "description": "Use as the color of text that is highlighted.",
-          "type": "color",
-          "value": "{global.dark.text.color.300}"
-        },
         "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.dark.focus-ring.color.100}"
+          "value": "{global.dark.border.color.300}"
+        },
+        "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.dark.focus-ring.color.100}"
         }
       }
     }

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

@@ -110,6 +110,30 @@
       }
     },
     "font": {
+      "family": {
+        "100": {
+          "type": "string",
+          "value": "\"Red Hat Text\", \"RedHatText\", \"Noto Sans Arabic\", \"Noto Sans Hebrew\", \"Noto Sans JP\", \"Noto Sans KR\", \"Noto Sans Malayalam\", \"Noto Sans SC\", \"Noto Sans TC\", \"Noto Sans Thai\", Helvetica, Arial, sans-serif"
+        },
+        "200": {
+          "type": "string",
+          "value": "\"Red Hat Display\", \"RedHatDisplay\", \"Noto Sans Arabic\", \"Noto Sans Hebrew\", \"Noto Sans JP\", \"Noto Sans KR\", \"Noto Sans Malayalam\", \"Noto Sans SC\", \"Noto Sans TC\", \"Noto Sans Thai\", Helvetica, Arial, sans-serif"
+        },
+        "300": {
+          "type": "string",
+          "value": "\"Red Hat Mono\", \"RedHatMono\", \"Courier New\", Courier, monospace"
+        }
+      },
+      "line-height": {
+        "100": {
+          "type": "number",
+          "value": 1.2999999523162842
+        },
+        "200": {
+          "type": "number",
+          "value": 1.5
+        }
+      },
       "weight": {
         "100": {
           "type": "number",
@@ -128,16 +152,6 @@
           "value": 700
         }
       },
-      "line-height": {
-        "100": {
-          "type": "number",
-          "value": 1.2999999523162842
-        },
-        "200": {
-          "type": "number",
-          "value": 1.5
-        }
-      },
       "size": {
         "100": {
           "type": "number",
@@ -171,20 +185,6 @@
           "type": "number",
           "value": 36
         }
-      },
-      "family": {
-        "100": {
-          "type": "string",
-          "value": "\"Red Hat Text\", \"RedHatText\", \"Noto Sans Arabic\", \"Noto Sans Hebrew\", \"Noto Sans JP\", \"Noto Sans KR\", \"Noto Sans Malayalam\", \"Noto Sans SC\", \"Noto Sans TC\", \"Noto Sans Thai\", Helvetica, Arial, sans-serif"
-        },
-        "200": {
-          "type": "string",
-          "value": "\"Red Hat Display\", \"RedHatDisplay\", \"Noto Sans Arabic\", \"Noto Sans Hebrew\", \"Noto Sans JP\", \"Noto Sans KR\", \"Noto Sans Malayalam\", \"Noto Sans SC\", \"Noto Sans TC\", \"Noto Sans Thai\", Helvetica, Arial, sans-serif"
-        },
-        "300": {
-          "type": "string",
-          "value": "\"Red Hat Mono\", \"RedHatMono\", \"Courier New\", Courier, monospace"
-        }
       }
     },
     "z-index": {