@patternfly/design-tokens 1.16.0 → 1.16.1

package/plugins/export-patternfly-tokens/src/ui.tsx

@@ -72,12 +72,12 @@ const saveVars = (text, setJsonFiles, setZipFile) => {
         saveFolderNames = ['default/glass-dark'];
         break;
       // Semantic color - high contrast
-      case '/* Default Semantic Color Tokens.Light - High Contrast (Beta).tokens.json */':
+      case '/* Default Semantic Color Tokens.Light - High Contrast.tokens.json */':
         saveFileName = 'semantic.highcontrast.json';
         saveFolderNames = ['default/highcontrast'];
         break;
       // Semantic color - high contrast - dark
-      case '/* Default Semantic Color Tokens.Dark - High Contrast (Beta).tokens.json */':
+      case '/* Default Semantic Color Tokens.Dark - High Contrast.tokens.json */':
         saveFileName = 'semantic.highcontrast.dark.json';
         saveFolderNames = ['default/highcontrast-dark'];
         break;
@@ -87,7 +87,7 @@ const saveVars = (text, setJsonFiles, setZipFile) => {
         saveFolderNames = ['default/light'];
         break;
       // Semantic dimension - high contrast
-      case '/* Default Semantic Dimension Tokens.High Contrast - Beta.tokens.json */':
+      case '/* Default Semantic Dimension Tokens.High Contrast.tokens.json */':
         saveFileName = 'semantic.dimension.highcontrast.json';
         saveFolderNames = ['default/highcontrast'];
         break;
@@ -113,12 +113,12 @@ const saveVars = (text, setJsonFiles, setZipFile) => {
         saveFolderNames = ['default/dark'];
         break;
       // Charts - high contrast - light
-      case '/* Charts.High Contrast - Light.tokens.json */':
+      case '/* Charts.Light - High Contrast.tokens.json */':
         saveFileName = 'charts.highcontrast.json';
         saveFolderNames = ['default/light'];
         break;
       // Charts - high contrast - dark
-      case '/* Charts.High Contrast - Dark.tokens.json */':
+      case '/* Charts.Dark - High Contrast.tokens.json */':
         saveFileName = 'charts.highcontrast.dark.json';
         saveFolderNames = ['default/dark'];
         break;
@@ -140,11 +140,11 @@ const saveVars = (text, setJsonFiles, setZipFile) => {
         saveFileName = 'felt.color.glass.dark.json';
         saveFolderNames = ['felt/glass-dark'];
         break;
-      case '/* Felt Color Tokens.Light - High Contrast (Beta).tokens.json */':
+      case '/* Felt Color Tokens.Light - High Contrast.tokens.json */':
         saveFileName = 'felt.color.highcontrast.json';
         saveFolderNames = ['felt/highcontrast'];
         break;
-      case '/* Felt Color Tokens.Dark - High Contrast (Beta).tokens.json */':
+      case '/* Felt Color Tokens.Dark - High Contrast.tokens.json */':
         saveFileName = 'felt.color.highcontrast.dark.json';
         saveFolderNames = ['felt/highcontrast-dark'];
         break;
@@ -157,7 +157,7 @@ const saveVars = (text, setJsonFiles, setZipFile) => {
         saveFileName = 'felt.dimension.glass.json';
         saveFolderNames = ['felt/glass'];
         break;
-      case '/* Felt Dimension Tokens.High Contrast - Beta.tokens.json */':
+      case '/* Felt Dimension Tokens.High Contrast.tokens.json */':
         saveFileName = 'felt.dimension.highcontrast.json';
         saveFolderNames = ['felt/highcontrast'];
         break;

package/tokens/default/dark/charts.dark.json

@@ -252,6 +252,12 @@
             "type": "color",
             "value": "{color.white}"
           }
+        },
+        "opacity": {
+          "area": {
+            "type": "number",
+            "value": 20
+          }
         }
       },
       "warning": {
@@ -332,12 +338,14 @@
           "value": "{color.white}"
         },
         "stroke": {
+          "color": {
+            "type": "string",
+            "value": "transparent"
+          },
           "width": {
             "type": "number",
             "value": 0
-          },
-          "type": "string",
-          "value": "transparent"
+          }
         }
       }
     },

package/tokens/default/dark/charts.highcontrast.dark.json

@@ -252,6 +252,12 @@
             "type": "color",
             "value": "{color.white}"
           }
+        },
+        "opacity": {
+          "area": {
+            "type": "number",
+            "value": 20
+          }
         }
       },
       "warning": {
@@ -332,12 +338,14 @@
           "value": "{color.white}"
         },
         "stroke": {
+          "color": {
+            "type": "string",
+            "value": "transparent"
+          },
           "width": {
             "type": "number",
             "value": 0
-          },
-          "type": "string",
-          "value": "transparent"
+          }
         }
       }
     },

package/tokens/default/light/charts.highcontrast.json

@@ -252,6 +252,12 @@
             "type": "color",
             "value": "{color.white}"
           }
+        },
+        "opacity": {
+          "area": {
+            "type": "number",
+            "value": 10
+          }
         }
       },
       "warning": {
@@ -332,12 +338,14 @@
           "value": "{color.gray.90}"
         },
         "stroke": {
+          "color": {
+            "type": "string",
+            "value": "transparent"
+          },
           "width": {
             "type": "number",
             "value": 0
-          },
-          "type": "string",
-          "value": "transparent"
+          }
         }
       }
     },

package/tokens/default/light/charts.json

@@ -252,6 +252,12 @@
             "type": "color",
             "value": "{color.white}"
           }
+        },
+        "opacity": {
+          "area": {
+            "type": "number",
+            "value": 30
+          }
         }
       },
       "warning": {
@@ -332,12 +338,14 @@
           "value": "{color.gray.90}"
         },
         "stroke": {
+          "color": {
+            "type": "string",
+            "value": "transparent"
+          },
           "width": {
             "type": "number",
             "value": 0
-          },
-          "type": "string",
-          "value": "transparent"
+          }
         }
       }
     },

package/tokens/felt/dark/felt.color.dark.json

@@ -4,6 +4,11 @@
     "color": {
       "brand": {
         "accent": {
+          "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",
@@ -13,33 +18,42 @@
             "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}"
           }
         }
       }
     },
-    "border": {
+    "icon": {
       "color": {
-        "brand": {
+        "on-brand": {
           "accent": {
             "hover": {
-              "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
+              "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.400}"
+              "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.",
+              "type": "color",
+              "value": "{global.icon.color.regular}"
             },
             "clicked": {
-              "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
+              "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.400}"
+              "value": "{global.icon.color.regular}"
+            }
+          }
+        },
+        "brand": {
+          "accent": {
+            "clicked": {
+              "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.",
+              "type": "color",
+              "value": "{global.dark.color.brand.accent.300}"
             },
-            "default": {
-              "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
+            "hover": {
+              "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.dark.color.brand.accent.400}"
+              "value": "{global.dark.color.brand.accent.300}"
             }
           }
         }
@@ -49,11 +63,6 @@
       "color": {
         "on-brand": {
           "accent": {
-            "clicked": {
-              "description": "Use as the clicked state color for text placed on a brand-colored background.",
-              "type": "color",
-              "value": "{global.text.color.regular}"
-            },
             "hover": {
               "description": "Use as the hover state color for text placed on a brand-colored background.",
               "type": "color",
@@ -63,43 +72,34 @@
               "description": "Use as the default 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.",
+              "type": "color",
+              "value": "{global.text.color.regular}"
             }
           }
         }
       }
     },
-    "icon": {
+    "border": {
       "color": {
         "brand": {
           "accent": {
-            "hover": {
-              "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.dark.color.brand.accent.300}"
-            },
             "clicked": {
-              "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.",
-              "type": "color",
-              "value": "{global.dark.color.brand.accent.300}"
-            }
-          }
-        },
-        "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.",
+              "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
               "type": "color",
-              "value": "{global.icon.color.regular}"
+              "value": "{global.dark.color.brand.accent.400}"
             },
             "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 border color for any branded element, like color-coded labels, banners, etc.",
               "type": "color",
-              "value": "{global.icon.color.regular}"
+              "value": "{global.dark.color.brand.accent.400}"
             },
-            "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.",
+            "default": {
+              "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
               "type": "color",
-              "value": "{global.icon.color.regular}"
+              "value": "{global.dark.color.brand.accent.400}"
             }
           }
         }

package/tokens/felt/glass/felt.color.glass.json

@@ -4,6 +4,11 @@
     "color": {
       "brand": {
         "accent": {
+          "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",
@@ -13,11 +18,6 @@
             "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,13 +26,13 @@
       "color": {
         "brand": {
           "accent": {
-            "hover": {
-              "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
+            "clicked": {
+              "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}"
             },
-            "clicked": {
-              "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
+            "hover": {
+              "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
               "type": "color",
               "value": "{global.color.brand.accent.400}"
             },

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

@@ -4,6 +4,11 @@
     "color": {
       "brand": {
         "accent": {
+          "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",
@@ -13,33 +18,42 @@
             "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}"
           }
         }
       }
     },
-    "border": {
+    "icon": {
       "color": {
-        "brand": {
+        "on-brand": {
           "accent": {
             "hover": {
-              "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
+              "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.400}"
+              "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.",
+              "type": "color",
+              "value": "{global.icon.color.regular}"
             },
             "clicked": {
-              "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
+              "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.400}"
+              "value": "{global.icon.color.regular}"
+            }
+          }
+        },
+        "brand": {
+          "accent": {
+            "clicked": {
+              "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.",
+              "type": "color",
+              "value": "{global.dark.color.brand.accent.300}"
             },
-            "default": {
-              "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
+            "hover": {
+              "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.dark.color.brand.accent.400}"
+              "value": "{global.dark.color.brand.accent.300}"
             }
           }
         }
@@ -49,11 +63,6 @@
       "color": {
         "on-brand": {
           "accent": {
-            "clicked": {
-              "description": "Use as the clicked state color for text placed on a brand-colored background.",
-              "type": "color",
-              "value": "{global.text.color.regular}"
-            },
             "hover": {
               "description": "Use as the hover state color for text placed on a brand-colored background.",
               "type": "color",
@@ -63,43 +72,34 @@
               "description": "Use as the default 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.",
+              "type": "color",
+              "value": "{global.text.color.regular}"
             }
           }
         }
       }
     },
-    "icon": {
+    "border": {
       "color": {
         "brand": {
           "accent": {
-            "hover": {
-              "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.dark.color.brand.accent.300}"
-            },
             "clicked": {
-              "description": "Use as the clicked state for icons that convey your brand and/or are paired with branded text color.",
-              "type": "color",
-              "value": "{global.dark.color.brand.accent.300}"
-            }
-          }
-        },
-        "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.",
+              "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
               "type": "color",
-              "value": "{global.icon.color.regular}"
+              "value": "{global.dark.color.brand.accent.400}"
             },
             "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 border color for any branded element, like color-coded labels, banners, etc.",
               "type": "color",
-              "value": "{global.icon.color.regular}"
+              "value": "{global.dark.color.brand.accent.400}"
             },
-            "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.",
+            "default": {
+              "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
               "type": "color",
-              "value": "{global.icon.color.regular}"
+              "value": "{global.dark.color.brand.accent.400}"
             }
           }
         }

package/tokens/felt/highcontrast/felt.color.highcontrast.json

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

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

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

package/tokens/felt/light/felt.color.json

@@ -4,6 +4,11 @@
     "color": {
       "brand": {
         "accent": {
+          "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",
@@ -13,11 +18,6 @@
             "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,13 +26,13 @@
       "color": {
         "brand": {
           "accent": {
-            "hover": {
-              "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
+            "clicked": {
+              "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}"
             },
-            "clicked": {
-              "description": "Use as the clicked state border color for any branded element, like color-coded labels, banners, etc.",
+            "hover": {
+              "description": "Use as the hover state border color for any branded element, like color-coded labels, banners, etc.",
               "type": "color",
               "value": "{global.color.brand.accent.400}"
             },