@patternfly/design-tokens 1.15.0 → 1.15.1

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

@@ -33,6 +33,12 @@
           "type": "number",
           "value": "{global.border.radius.500}"
         },
+        "glass": {
+          "default": {
+            "type": "number",
+            "value": "{global.border.radius.medium}"
+          }
+        },
         "control": {
           "default": {
             "type": "number",
@@ -57,6 +63,11 @@
         }
       },
       "width": {
+        "regular": {
+          "description": "Use as the default border width for elements.",
+          "type": "number",
+          "value": "{global.border.width.100}"
+        },
         "divider": {
           "default": {
             "description": "Use as the default border width for dividers.",
@@ -74,11 +85,6 @@
             "value": "{global.border.width.100}"
           }
         },
-        "regular": {
-          "description": "Use as the default border width for elements.",
-          "type": "number",
-          "value": "{global.border.width.100}"
-        },
         "strong": {
           "description": "Use as a stronger/wider border width for elements.",
           "type": "number",
@@ -89,6 +95,12 @@
           "type": "number",
           "value": "{global.border.width.300}"
         },
+        "glass": {
+          "default": {
+            "type": "number",
+            "value": "{global.border.width.regular}"
+          }
+        },
         "box": {
           "default": {
             "description": "Use as the default border width for containers like cards, panels, code editors, etc.",
@@ -421,23 +433,6 @@
           "value": "{global.icon.size.400}"
         },
         "font": {
-          "body": {
-            "sm": {
-              "description": "Use for icons that are placed inline with small body text",
-              "type": "number",
-              "value": "{global.font.size.body.sm}"
-            },
-            "default": {
-              "description": "Use for icons that are placed inline with default body text",
-              "type": "number",
-              "value": "{global.font.size.body.default}"
-            },
-            "lg": {
-              "description": "Use for icons that are placed inline with large body text",
-              "type": "number",
-              "value": "{global.font.size.body.lg}"
-            }
-          },
           "heading": {
             "h1": {
               "description": "Use for icons that are placed inline with first level headings",
@@ -470,6 +465,23 @@
               "value": "{global.font.size.heading.h6}"
             }
           },
+          "body": {
+            "sm": {
+              "description": "Use for icons that are placed inline with small body text",
+              "type": "number",
+              "value": "{global.font.size.body.sm}"
+            },
+            "default": {
+              "description": "Use for icons that are placed inline with default body text",
+              "type": "number",
+              "value": "{global.font.size.body.default}"
+            },
+            "lg": {
+              "description": "Use for icons that are placed inline with large body text",
+              "type": "number",
+              "value": "{global.font.size.body.lg}"
+            }
+          },
           "xs": {
             "description": "Use for icons that are placed inline with font–size–xs text",
             "type": "number",
@@ -519,6 +531,18 @@
       }
     },
     "font": {
+      "line-height": {
+        "body": {
+          "description": "Use to define the line height for body text",
+          "type": "number",
+          "value": "{global.font.line-height.200}"
+        },
+        "heading": {
+          "description": "Use to define the line height for heading text",
+          "type": "number",
+          "value": "{global.font.line-height.100}"
+        }
+      },
       "weight": {
         "body": {
           "default": {
@@ -545,18 +569,6 @@
           }
         }
       },
-      "line-height": {
-        "body": {
-          "description": "Use to define the line height for body text",
-          "type": "number",
-          "value": "{global.font.line-height.200}"
-        },
-        "heading": {
-          "description": "Use to define the line height for heading text",
-          "type": "number",
-          "value": "{global.font.line-height.100}"
-        }
-      },
       "family": {
         "body": {
           "description": "Use to define the font family for body text",

package/tokens/default/light/semantic.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
             }
           }
         }
@@ -1277,6 +1285,12 @@
           "type": "color",
           "value": "{global.border.color.300}"
         },
+        "glass": {
+          "default": {
+            "type": "color",
+            "value": "{global.border.color.subtle}"
+          }
+        },
         "nonstatus": {
           "red": {
             "default": {

package/tokens/default/light/semantic.motion.json

@@ -38,55 +38,38 @@
           "type": "number",
           "value": "{global.duration.600}"
         },
-        "fade": {
-          "short": {
-            "description": "Use a short/quick fade to transition color and/or opacity. Useful for fading in one or more elements. Short fades are used for small elements traveling short distances. Used in small interactions like buttons.",
-            "type": "number",
-            "value": "{global.motion.duration.sm}"
-          },
-          "default": {
-            "description": "Use a default fade to transition color and/or opacity. Useful for fading in one or more elements. Default fades are used for medium sized elements traveling medium distances. Used on alerts.",
-            "type": "number",
-            "value": "{global.motion.duration.md}"
-          },
-          "long": {
-            "description": "Use a long fade to transition color and/or opacity. Useful for fading in one or more elements. Long fades are used for large elements traveling long distances.",
-            "type": "number",
-            "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}"
           }
         },
-        "slide-out": {
+        "fade": {
           "short": {
-            "description": "Use for a shorter duration of a slide-out animation, which moves an element out of the viewport.",
+            "description": "Use a short/quick fade to transition color and/or opacity. Useful for fading in one or more elements. Short fades are used for small elements traveling short distances. Used in small interactions like buttons.",
             "type": "number",
-            "value": "{global.motion.duration.lg}"
+            "value": "{global.motion.duration.sm}"
           },
           "default": {
-            "description": "Use as the default duration of a slide-out animation, which moves an element out of the viewport.",
+            "description": "Use a default fade to transition color and/or opacity. Useful for fading in one or more elements. Default fades are used for medium sized elements traveling medium distances. Used on alerts.",
             "type": "number",
-            "value": "{global.motion.duration.xl}"
+            "value": "{global.motion.duration.md}"
           },
           "long": {
-            "description": "Use for a longer duration of a slide-out animation, which moves an element out of the viewport.",
+            "description": "Use a long fade to transition color and/or opacity. Useful for fading in one or more elements. Long fades are used for large elements traveling long distances.",
             "type": "number",
-            "value": "{global.motion.duration.2xl}"
+            "value": "{global.motion.duration.lg}"
           }
         },
         "icon": {
@@ -105,6 +88,23 @@
             "type": "number",
             "value": "{global.motion.duration.md}"
           }
+        },
+        "slide-in": {
+          "short": {
+            "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.lg}"
+          },
+          "default": {
+            "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.xl}"
+          },
+          "long": {
+            "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.2xl}"
+          }
         }
       },
       "delay": {

package/tokens/redhat/dark/redhat.color.dark.json

@@ -4,16 +4,16 @@
     "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}"
-          },
           "default": {
             "description": "Use this color for elements that you want to reinforce your brand",
             "type": "color",
             "value": "{global.dark.color.brand.accent.100}"
           },
+          "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",
@@ -54,13 +54,13 @@
               "type": "color",
               "value": "{global.text.color.regular}"
             },
-            "clicked": {
-              "description": "Use as the clicked state color for text placed on a brand-colored background.",
+            "default": {
+              "description": "Use as the default color for text placed on a brand-colored background.",
               "type": "color",
               "value": "{global.text.color.regular}"
             },
-            "default": {
-              "description": "Use as the default color for text placed on a brand-colored background.",
+            "clicked": {
+              "description": "Use as the clicked state color for text placed on a brand-colored background.",
               "type": "color",
               "value": "{global.text.color.regular}"
             }
@@ -70,36 +70,36 @@
     },
     "icon": {
       "color": {
-        "on-brand": {
+        "brand": {
           "accent": {
             "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.",
+              "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.icon.color.regular}"
+              "value": "{global.dark.color.brand.accent.300}"
             },
             "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}"
-            },
-            "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.",
+              "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.",
               "type": "color",
-              "value": "{global.icon.color.regular}"
+              "value": "{global.dark.color.brand.accent.300}"
             }
           }
         },
-        "brand": {
+        "on-brand": {
           "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.regular}"
+            },
             "clicked": {
-              "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.",
+              "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.dark.color.brand.accent.300}"
+              "value": "{global.icon.color.regular}"
             },
             "hover": {
-              "description": "Use as the hover state color for icons that convey your brand and/or are paired with branded text color.",
+              "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.dark.color.brand.accent.300}"
+              "value": "{global.icon.color.regular}"
             }
           }
         }

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

@@ -4,16 +4,16 @@
     "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}"
-          },
           "default": {
             "description": "Use this color for elements that you want to reinforce your brand",
             "type": "color",
             "value": "{global.color.brand.accent.100}"
           },
+          "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",

package/tokens/redhat/glass/redhat.dimension.glass.json

@@ -0,0 +1,2 @@
+
+{}

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

@@ -4,16 +4,16 @@
     "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}"
-          },
           "default": {
             "description": "Use this color for elements that you want to reinforce your brand",
             "type": "color",
             "value": "{global.dark.color.brand.accent.100}"
           },
+          "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",
@@ -54,13 +54,13 @@
               "type": "color",
               "value": "{global.text.color.regular}"
             },
-            "clicked": {
-              "description": "Use as the clicked state color for text placed on a brand-colored background.",
+            "default": {
+              "description": "Use as the default color for text placed on a brand-colored background.",
               "type": "color",
               "value": "{global.text.color.regular}"
             },
-            "default": {
-              "description": "Use as the default color for text placed on a brand-colored background.",
+            "clicked": {
+              "description": "Use as the clicked state color for text placed on a brand-colored background.",
               "type": "color",
               "value": "{global.text.color.regular}"
             }
@@ -70,31 +70,31 @@
     },
     "icon": {
       "color": {
-        "on-brand": {
+        "brand": {
           "accent": {
             "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.",
+              "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.icon.color.regular}"
+              "value": "{global.dark.color.brand.accent.300}"
             },
             "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.",
+              "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.",
               "type": "color",
-              "value": "{global.icon.color.regular}"
+              "value": "{global.dark.color.brand.accent.300}"
             }
           }
         },
-        "brand": {
+        "on-brand": {
           "accent": {
             "clicked": {
-              "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.",
+              "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.dark.color.brand.accent.300}"
+              "value": "{global.icon.color.regular}"
             },
             "hover": {
-              "description": "Use as the hover state color for icons that convey your brand and/or are paired with branded text color.",
+              "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.dark.color.brand.accent.300}"
+              "value": "{global.icon.color.regular}"
             }
           }
         }

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

@@ -4,16 +4,16 @@
     "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}"
-          },
           "default": {
             "description": "Use this color for elements that you want to reinforce your brand",
             "type": "color",
             "value": "{global.color.brand.accent.400}"
           },
+          "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",

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

@@ -4,16 +4,16 @@
     "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.350}"
-          },
           "default": {
             "description": "Use this color for elements that you want to reinforce your brand",
             "type": "color",
             "value": "{global.dark.color.brand.accent.400}"
           },
+          "hover": {
+            "description": "Use as the hover state for elements that have a branded background color",
+            "type": "color",
+            "value": "{global.dark.color.brand.accent.350}"
+          },
           "clicked": {
             "description": "Use as the clicked state for elements that have a brand background color",
             "type": "color",

package/tokens/redhat/light/redhat.color.json

@@ -4,16 +4,16 @@
     "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}"
-          },
           "default": {
             "description": "Use this color for elements that you want to reinforce your brand",
             "type": "color",
             "value": "{global.color.brand.accent.100}"
           },
+          "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",