@patternfly/design-tokens 1.15.0 → 1.15.2

package/tokens/default/glass/semantic.glass.json

@@ -7,17 +7,17 @@
           "default": {
             "description": "Use as the primary background color for UI content such as cards, page sections, and other content areas.",
             "type": "color",
-            "value": "rgba(255, 255, 255, 0.8000)"
+            "value": "rgba(255, 255, 255, 0.6000)"
           },
           "hover": {
             "description": "Use as the hover state for primary backgrounds",
             "type": "color",
-            "value": "rgba(242, 242, 242, 0.8000)"
+            "value": "rgba(199, 199, 199, 0.3000)"
           },
           "clicked": {
             "description": "Use as the clicked state for primary backgrounds",
             "type": "color",
-            "value": "rgba(242, 242, 242, 0.8000)"
+            "value": "rgba(199, 199, 199, 0.3000)"
           }
         },
         "secondary": {
@@ -46,12 +46,10 @@
         },
         "glass": {
           "primary": {
-            "type": "color",
-            "value": "rgba(255, 255, 255, 0.5000)"
-          },
-          "floating": {
-            "type": "color",
-            "value": "{global.background.color.floating.default}"
+            "default": {
+              "type": "color",
+              "value": "rgba(255, 255, 255, 0.5000)"
+            }
           }
         },
         "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.floating.default}"
+            }
           }
         },
         "sticky": {
@@ -99,12 +103,12 @@
               "hover": {
                 "description": "Use as the hover state for components that use the plain action default background but are placed on a secondary background color (like left nav, horizontal nav, etc.)",
                 "type": "color",
-                "value": "{global.background.color.100}"
+                "value": "{global.background.color.action.plain.hover}"
               },
               "clicked": {
                 "description": "Use as the active/pressed state for components that use the plain action default background but are placed on a secondary background color (like left nav, horizontal nav, etc.)",
                 "type": "color",
-                "value": "{global.background.color.100}"
+                "value": "{global.background.color.action.plain.clicked}"
               }
             }
           }
@@ -163,6 +167,14 @@
             "value": "{global.background.color.500}"
           }
         },
+        "striped": {
+          "row": {
+            "default": {
+              "type": "color",
+              "value": "{global.background.color.700}"
+            }
+          }
+        },
         "loading": {
           "skeleton": {
             "default": {
@@ -181,11 +193,7 @@
           "blur": {
             "primary": {
               "type": "number",
-              "value": 12.5
-            },
-            "floating": {
-              "type": "number",
-              "value": 0
+              "value": 16
             }
           }
         }
@@ -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.200}"
+        },
+        "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.200}"
-        },
-        "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": "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",
+          "value": "{global.border.color.50}"
+        },
+        "hover": {
+          "description": "Use as the hover state border color for elements like form inputs, menu toggles, cards, etc.",
+          "type": "color",
+          "value": "{global.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.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",
+          "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.300}"
+        },
         "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": "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",
-          "value": "{global.border.color.100}"
-        },
-        "hover": {
-          "description": "Use as the hover state border color for elements like form inputs, menu toggles, cards, etc.",
-          "type": "color",
-          "value": "{global.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.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",
-          "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.300}"
+        "glass": {
+          "default": {
+            "type": "color",
+            "value": "{global.border.color.alt}"
+          }
         },
         "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.200}"
+        },
+        "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.400}"
+        },
+        "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.clicked}"
           }
         },
-        "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.200}"
-        },
-        "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.400}"
-        },
-        "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.100}"
+          "value": "{global.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.focus-ring.color.100}"
         }
       }
     }

package/tokens/default/glass-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/glass-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",