@patternfly/design-tokens 1.13.1 → 1.14.0

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

@@ -28,13 +28,13 @@ const saveVars = (text, setJsonFiles, setZipFile) => {
         break;
       case '/* Base Color Tokens - Light.Value.tokens.json */':
         saveFileName = 'base.json';
-        saveFolderNames = ['default'];
+        saveFolderNames = ['default', 'highcontrast'];
         break;
       case '/* Color Palette.Mode 1.tokens.json */':
         saveFileName = 'palette.color.json';
-        saveFolderNames = ['default', 'dark'];
+        saveFolderNames = ['default', 'dark', 'highcontrast', 'highcontrast-dark'];
         break;
-      case '/* Semantic Dimension Tokens.Mode 1.tokens.json */':
+      case ('/* Semantic Dimension Tokens.Value.tokens.json */' || '/* Semantic Dimension Tokens.Mode 1.tokens.json */'):
         saveFileName = 'semantic.dimension.json';
         saveFolderNames = ['default'];
         break;
@@ -44,7 +44,7 @@ const saveVars = (text, setJsonFiles, setZipFile) => {
         break;
       case '/* Base Color Tokens - Dark.Mode 1.tokens.json */':
         saveFileName = 'base.dark.json';
-        saveFolderNames = ['dark'];
+        saveFolderNames = ['dark', 'highcontrast-dark'];
         break;
       case '/* Semantic Color Tokens.Dark.tokens.json */':
         saveFileName = 'semantic.dark.json';
@@ -66,6 +66,14 @@ const saveVars = (text, setJsonFiles, setZipFile) => {
         saveFileName = 'semantic.motion.json';
         saveFolderNames = ['default'];
         break;
+      case '/* Semantic Color Tokens.Light - High Contrast.tokens.json */':
+        saveFileName = 'semantic.highcontrast.json';
+        saveFolderNames = ['highcontrast'];
+        break;
+      case '/* Semantic Color Tokens.Dark - High Contrast.tokens.json */':
+        saveFileName = 'semantic.highcontrast.dark.json';
+        saveFolderNames = ['highcontrast-dark'];
+        break;
       default:
         saveFileName = splitFiles[i].split('\n', 1)[0];
         saveFolderNames = ['default'];

package/tokens/dark/base.dark.json

@@ -20,6 +20,10 @@
             "type": "color",
             "value": "{color.gray.10}"
           },
+          "450": {
+            "type": "color",
+            "value": "{color.gray.20}"
+          },
           "500": {
             "type": "color",
             "value": "rgba(21, 21, 21, 0.8000)"
@@ -67,6 +71,10 @@
           "300": {
             "type": "color",
             "value": "{color.gray.70}"
+          },
+          "400": {
+            "type": "color",
+            "value": "{color.gray.90}"
           }
         },
         "favorite": {
@@ -88,6 +96,10 @@
             "200": {
               "type": "color",
               "value": "{color.green.30}"
+            },
+            "300": {
+              "type": "color",
+              "value": "{color.green.20}"
             }
           },
           "warning": {
@@ -126,6 +138,10 @@
             "200": {
               "type": "color",
               "value": "{color.purple.20}"
+            },
+            "300": {
+              "type": "color",
+              "value": "{color.purple.10}"
             }
           },
           "custom": {
@@ -136,6 +152,10 @@
             "200": {
               "type": "color",
               "value": "{color.teal.30}"
+            },
+            "300": {
+              "type": "color",
+              "value": "{color.teal.20}"
             }
           }
         },
@@ -174,6 +194,10 @@
             "100": {
               "type": "color",
               "value": "{color.red-orange.50}"
+            },
+            "200": {
+              "type": "color",
+              "value": "{color.red-orange.40}"
             }
           }
         },
@@ -291,6 +315,10 @@
             }
           },
           "gray": {
+            "50": {
+              "type": "color",
+              "value": "{color.gray.70}"
+            },
             "100": {
               "type": "color",
               "value": "{color.gray.60}"
@@ -352,6 +380,10 @@
             "300": {
               "type": "color",
               "value": "{color.purple.30}"
+            },
+            "400": {
+              "type": "color",
+              "value": "{color.purple.20}"
             }
           }
         }
@@ -377,6 +409,10 @@
           "100": {
             "type": "color",
             "value": "rgba(0, 0, 0, 0.5000)"
+          },
+          "200": {
+            "type": "color",
+            "value": "rgba(0, 0, 0, 0.7000)"
           }
         }
       }

package/tokens/dark/charts.dark.json

@@ -270,6 +270,10 @@
           }
         }
       },
+      "letter-spacing": {
+        "type": "string",
+        "value": "normal"
+      },
       "FontSize": {
         "xs": {
           "type": "number",
@@ -288,14 +292,6 @@
           "value": 22
         }
       },
-      "letter-spacing": {
-        "type": "string",
-        "value": "normal"
-      },
-      "stroke-line-cap": {
-        "type": "string",
-        "value": "round"
-      },
       "label": {
         "padding": {
           "type": "number",
@@ -322,6 +318,10 @@
           "value": "{color.white}"
         }
       },
+      "stroke-line-cap": {
+        "type": "string",
+        "value": "round"
+      },
       "layout": {
         "padding": {
           "type": "number",

package/tokens/dark/palette.color.json

@@ -79,6 +79,10 @@
       "70": {
         "type": "color",
         "value": "#003366"
+      },
+      "80": {
+        "type": "color",
+        "value": "#002250"
       }
     },
     "teal": {
@@ -109,6 +113,10 @@
       "70": {
         "type": "color",
         "value": "#004d4d"
+      },
+      "80": {
+        "type": "color",
+        "value": "#003333"
       }
     },
     "yellow": {
@@ -139,6 +147,10 @@
       "70": {
         "type": "color",
         "value": "#73480b"
+      },
+      "80": {
+        "type": "color",
+        "value": "#54330b"
       }
     },
     "green": {
@@ -199,6 +211,10 @@
       "70": {
         "type": "color",
         "value": "#732e00"
+      },
+      "80": {
+        "type": "color",
+        "value": "#4d1f00"
       }
     },
     "red-orange": {
@@ -259,6 +275,10 @@
       "70": {
         "type": "color",
         "value": "#21134d"
+      },
+      "80": {
+        "type": "color",
+        "value": "#1b0d33"
       }
     },
     "red": {
@@ -289,6 +309,10 @@
       "70": {
         "type": "color",
         "value": "#5f0000"
+      },
+      "80": {
+        "type": "color",
+        "value": "#3f0000"
       }
     }
   }

package/tokens/dark/semantic.dark.json

@@ -37,6 +37,13 @@
             "value": "{global.dark.background.color.200}"
           }
         },
+        "tertiary": {
+          "default": {
+            "description": "Use as the tertiary background color. This is primarily used for containers that can be placed on secondary backgrounds.",
+            "type": "color",
+            "value": "{global.dark.background.color.600}"
+          }
+        },
         "floating": {
           "default": {
             "description": "Use as the background color for components that appear over other content, such as toast alerts, menus, modals, overlay drawers, etc.",
@@ -113,6 +120,16 @@
             "description": "Use as the background color components with inversed backgrounds like tooltips.",
             "type": "color",
             "value": "{global.dark.background.color.400}"
+          },
+          "hover": {
+            "description": "Use as the hover color for interactive components with inversed backgrounds.",
+            "type": "color",
+            "value": "{global.dark.background.color.450}"
+          },
+          "clicked": {
+            "description": "Use as the clicked color for interactive components with inversed backgrounds.",
+            "type": "color",
+            "value": "{global.dark.background.color.450}"
           }
         },
         "disabled": {
@@ -950,6 +967,10 @@
             "value": "{global.dark.border.color.50}"
           }
         },
+        "high-contrast": {
+          "type": "color",
+          "value": "rgba(255, 255, 255, 0.0000)"
+        },
         "brand": {
           "default": {
             "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
@@ -1696,19 +1717,40 @@
     "box-shadow": {
       "color": {
         "sm": {
-          "description": "Use as the color of small box-shadows.",
-          "type": "color",
-          "value": "{global.dark.box-shadow.color.100}"
+          "default": {
+            "description": "Use as the color of small box-shadows.",
+            "type": "color",
+            "value": "{global.dark.box-shadow.color.100}"
+          },
+          "directional": {
+            "description": "Use as the color of small box-shadows.",
+            "type": "color",
+            "value": "{global.dark.box-shadow.color.200}"
+          }
         },
         "md": {
-          "description": "Use as the color of medium box-shadows.",
-          "type": "color",
-          "value": "{global.dark.box-shadow.color.100}"
+          "default": {
+            "description": "Use as the color of medium box-shadows.",
+            "type": "color",
+            "value": "{global.dark.box-shadow.color.100}"
+          },
+          "directional": {
+            "description": "Use as the color of medium box-shadows.",
+            "type": "color",
+            "value": "{global.dark.box-shadow.color.200}"
+          }
         },
         "lg": {
-          "description": "Use as the color of large box-shadows.",
-          "type": "color",
-          "value": "{global.dark.box-shadow.color.100}"
+          "default": {
+            "description": "Use as the color of large box-shadows.",
+            "type": "color",
+            "value": "{global.dark.box-shadow.color.100}"
+          },
+          "directional": {
+            "description": "Use as the color of large box-shadows.",
+            "type": "color",
+            "value": "{global.dark.box-shadow.color.200}"
+          }
         }
       }
     }

package/tokens/default/base.dimension.json

@@ -76,6 +76,10 @@
         "300": {
           "type": "number",
           "value": 3
+        },
+        "400": {
+          "type": "number",
+          "value": 4
         }
       },
       "radius": {
@@ -211,9 +215,13 @@
     },
     "box-shadow": {
       "X": {
+        "50": {
+          "type": "number",
+          "value": -20
+        },
         "100": {
           "type": "number",
-          "value": -8
+          "value": -10
         },
         "200": {
           "type": "number",
@@ -237,13 +245,21 @@
         },
         "700": {
           "type": "number",
-          "value": 8
+          "value": 10
+        },
+        "800": {
+          "type": "number",
+          "value": 20
         }
       },
       "Y": {
+        "50": {
+          "type": "number",
+          "value": -20
+        },
         "100": {
           "type": "number",
-          "value": -8
+          "value": -10
         },
         "200": {
           "type": "number",
@@ -267,7 +283,11 @@
         },
         "700": {
           "type": "number",
-          "value": 8
+          "value": 10
+        },
+        "800": {
+          "type": "number",
+          "value": 20
         }
       },
       "blur": {
@@ -277,17 +297,29 @@
         },
         "200": {
           "type": "number",
-          "value": 8
+          "value": 9
         },
         "300": {
           "type": "number",
-          "value": 24
+          "value": 20
         }
       },
       "spread": {
         "100": {
           "type": "number",
           "value": 0
+        },
+        "200": {
+          "type": "number",
+          "value": -4
+        },
+        "300": {
+          "type": "number",
+          "value": -8
+        },
+        "400": {
+          "type": "number",
+          "value": -20
         }
       }
     },