@patternfly/design-tokens 1.15.0 → 1.15.2

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
             }
           }
         }
@@ -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.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.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/light/semantic.motion.json

@@ -38,21 +38,21 @@
           "type": "number",
           "value": "{global.duration.600}"
         },
-        "fade": {
+        "slide-out": {
           "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.",
+            "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.sm}"
+            "value": "{global.motion.duration.lg}"
           },
           "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.",
+            "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.md}"
+            "value": "{global.motion.duration.xl}"
           },
           "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.",
+            "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.lg}"
+            "value": "{global.motion.duration.2xl}"
           }
         },
         "slide-in": {
@@ -72,21 +72,21 @@
             "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": {

package/tokens/{redhat/dark/redhat.color.dark.json → felt/dark/felt.color.dark.json}

@@ -9,15 +9,15 @@
             "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}"
-          },
           "clicked": {
             "description": "Use as the clicked state for elements that have a brand 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}"
           }
         }
       }
@@ -26,11 +26,6 @@
       "color": {
         "brand": {
           "accent": {
-            "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.400}"
-            },
             "hover": {
               "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
               "type": "color",
@@ -40,6 +35,11 @@
               "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.400}"
+            },
+            "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.400}"
             }
           }
         }
@@ -49,13 +49,13 @@
       "color": {
         "on-brand": {
           "accent": {
-            "hover": {
-              "description": "Use as the hover state 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}"
             },
-            "clicked": {
-              "description": "Use as the clicked state color for text placed on a brand-colored background.",
+            "hover": {
+              "description": "Use as the hover 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": {
-            "clicked": {
-              "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.",
+            "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.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}"
+            },
+            "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}"
             }
           }
         }

package/tokens/{redhat/glass/redhat.color.glass.json → felt/glass/felt.color.glass.json}

@@ -9,15 +9,15 @@
             "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}"
-          },
           "clicked": {
             "description": "Use as the clicked state for elements that have a brand 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}"
           }
         }
       }
@@ -26,11 +26,6 @@
       "color": {
         "brand": {
           "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.400}"
-            },
             "hover": {
               "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
               "type": "color",
@@ -40,6 +35,11 @@
               "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.400}"
+            },
+            "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.400}"
             }
           }
         }

package/tokens/{redhat/highcontrast/redhat.dimension.highcontrast.json → felt/glass/felt.dimension.glass.json}

@@ -3,6 +3,12 @@
   "global": {
     "border": {
       "radius": {
+        "control": {
+          "default": {
+            "type": "number",
+            "value": "{global.border.radius.pill}"
+          }
+        },
         "action": {
           "plain": {
             "default": {
@@ -10,12 +16,6 @@
               "value": "{global.border.radius.pill}"
             }
           }
-        },
-        "control": {
-          "default": {
-            "type": "number",
-            "value": "{global.border.radius.pill}"
-          }
         }
       }
     }