@patternfly/design-tokens 1.12.0 → 1.13.1

package/tokens/dark/semantic.dark.json

@@ -90,6 +90,10 @@
             "description": "Use as the default background for control elements like form inputs and menu toggles.",
             "type": "color",
             "value": "{global.dark.background.color.300}"
+          },
+          "read-only": {
+            "type": "color",
+            "value": "{global.dark.background.color.300}"
           }
         },
         "highlight": {
@@ -922,17 +926,17 @@
             "default": {
               "description": "Use as the default color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.",
               "type": "color",
-              "value": "{global.icon.color.inverse}"
+              "value": "{global.icon.color.regular}"
             },
             "hover": {
               "description": "Use as the hover state color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.",
               "type": "color",
-              "value": "{global.icon.color.inverse}"
+              "value": "{global.icon.color.regular}"
             },
             "clicked": {
               "description": "Use as the clicked state color for icons that are placed on a nonstatus gray background color and/or are paired with on-gray colored text.",
               "type": "color",
-              "value": "{global.icon.color.inverse}"
+              "value": "{global.icon.color.regular}"
             }
           }
         }
@@ -940,6 +944,12 @@
     },
     "border": {
       "color": {
+        "control": {
+          "read-only": {
+            "type": "color",
+            "value": "{global.dark.border.color.50}"
+          }
+        },
         "brand": {
           "default": {
             "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",
@@ -1215,17 +1225,17 @@
             "default": {
               "description": "Use as the default border color for any element that does not convey status and that you always will want to be gray (i.e. color-coded labels)",
               "type": "color",
-              "value": "{global.dark.color.nonstatus.gray.100}"
+              "value": "{global.dark.color.nonstatus.gray.200}"
             },
             "hover": {
               "description": "Use as the hover state border color for any element that does not convey status and that you always will want to be gray (i.e. color-coded labels)",
               "type": "color",
-              "value": "{global.dark.color.nonstatus.gray.200}"
+              "value": "{global.dark.color.nonstatus.gray.300}"
             },
             "clicked": {
               "description": "Use as the clicked state border color for any element that does not convey status and that you always will want to be gray (i.e. color-coded labels)",
               "type": "color",
-              "value": "{global.dark.color.nonstatus.gray.200}"
+              "value": "{global.dark.color.nonstatus.gray.300}"
             }
           }
         }
@@ -1667,17 +1677,17 @@
             "default": {
               "description": "Use as the default color for text that is placed on a nonstatus gray background color.",
               "type": "color",
-              "value": "{global.text.color.inverse}"
+              "value": "{global.text.color.regular}"
             },
             "hover": {
               "description": "Use as the hover state color for text that is placed on a nonstatus gray background color.",
               "type": "color",
-              "value": "{global.text.color.inverse}"
+              "value": "{global.text.color.regular}"
             },
             "clicked": {
               "description": "Use as the clicked state color for text that is placed on a nonstatus gray background color.",
               "type": "color",
-              "value": "{global.text.color.inverse}"
+              "value": "{global.text.color.regular}"
             }
           }
         }

package/tokens/default/base.dimension.json

@@ -51,7 +51,7 @@
         },
         "300": {
           "type": "number",
-          "value": 22
+          "value": 24
         },
         "400": {
           "type": "number",
@@ -106,20 +106,6 @@
       }
     },
     "font": {
-      "family": {
-        "100": {
-          "type": "string",
-          "value": "Red Hat Text VF"
-        },
-        "200": {
-          "type": "string",
-          "value": "Red Hat Display VF"
-        },
-        "300": {
-          "type": "string",
-          "value": "Red Hat Mono VF"
-        }
-      },
       "weight": {
         "100": {
           "type": "number",
@@ -131,7 +117,7 @@
         },
         "300": {
           "type": "number",
-          "value": 700
+          "value": 500
         },
         "400": {
           "type": "number",
@@ -171,7 +157,7 @@
         },
         "600": {
           "type": "number",
-          "value": 22
+          "value": 24
         },
         "700": {
           "type": "number",
@@ -181,6 +167,20 @@
           "type": "number",
           "value": 36
         }
+      },
+      "family": {
+        "100": {
+          "type": "string",
+          "value": "\"Red Hat Text\", \"RedHatText\", \"Noto Sans Arabic\", \"Noto Sans Hebrew\", \"Noto Sans JP\", \"Noto Sans KR\", \"Noto Sans Malayalam\", \"Noto Sans SC\", \"Noto Sans TC\", \"Noto Sans Thai\", Helvetica, Arial, sans-serif"
+        },
+        "200": {
+          "type": "string",
+          "value": "\"Red Hat Display\", \"RedHatDisplay\", \"Noto Sans Arabic\", \"Noto Sans Hebrew\", \"Noto Sans JP\", \"Noto Sans KR\", \"Noto Sans Malayalam\", \"Noto Sans SC\", \"Noto Sans TC\", \"Noto Sans Thai\", Helvetica, Arial, sans-serif"
+        },
+        "300": {
+          "type": "string",
+          "value": "\"Red Hat Mono\", \"RedHatMono\", \"Courier New\", Courier, monospace"
+        }
       }
     },
     "z-index": {
@@ -328,6 +328,28 @@
         "type": "number",
         "value": 1450
       }
+    },
+    "text-decoration": {
+      "line": {
+        "100": {
+          "type": "string",
+          "value": "none"
+        },
+        "200": {
+          "type": "string",
+          "value": "underline"
+        }
+      },
+      "style": {
+        "100": {
+          "type": "string",
+          "value": "solid"
+        },
+        "200": {
+          "type": "string",
+          "value": "dashed"
+        }
+      }
     }
   }
 }

package/tokens/default/base.json

@@ -307,6 +307,10 @@
     },
     "border": {
       "color": {
+        "50": {
+          "type": "color",
+          "value": "{color.gray.20}"
+        },
         "100": {
           "type": "color",
           "value": "{color.gray.30}"

package/tokens/default/semantic.dimension.json

@@ -35,11 +35,6 @@
         }
       },
       "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.",
@@ -57,6 +52,11 @@
             "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",
@@ -186,9 +186,14 @@
             "value": "{global.spacer.xs}"
           },
           "plain": {
-            "description": "Use to set the vertical padding inside of plain controls, like in plain menu toggles.",
+            "description": "Use to set the vertical padding inside of plain controls, like in plain menu toggles and plain buttons.",
             "type": "number",
             "value": "{global.spacer.sm}"
+          },
+          "spacious": {
+            "description": "Use to set the vertical padding inside a large/display controls. This is used across buttons, text inputs, menu toggles, etc.",
+            "type": "number",
+            "value": "{global.spacer.md}"
           }
         },
         "horizontal": {
@@ -214,12 +219,48 @@
           }
         }
       },
+      "action": {
+        "horizontal": {
+          "default": {
+            "description": "Use to set the horizontal padding inside a default action, like buttons.",
+            "type": "number",
+            "value": "{global.spacer.lg}"
+          },
+          "plain": {
+            "default": {
+              "description": "Use to set the horizontal padding inside a plain action, like plain buttons.",
+              "type": "number",
+              "value": "{global.spacer.sm}"
+            },
+            "compact": {
+              "description": "Use to set the horizontal padding inside a compact, plain action/button.",
+              "type": "number",
+              "value": "{global.spacer.xs}"
+            }
+          },
+          "compact": {
+            "description": "Use to set the horizontal padding inside a compact action, like compact buttons.",
+            "type": "number",
+            "value": "{global.spacer.md}"
+          },
+          "spacious": {
+            "description": "Use to set the horizontal padding inside a large/display action, like CTAs.",
+            "type": "number",
+            "value": "{global.spacer.xl}"
+          }
+        }
+      },
       "gap": {
         "text-to-element": {
           "default": {
             "description": "Use to space an element, like an icon or badge, inline with text",
             "type": "number",
             "value": "{global.spacer.sm}"
+          },
+          "compact": {
+            "description": "Use to space an element, like an icon or badge, inline with text",
+            "type": "number",
+            "value": "{global.spacer.xs}"
           }
         },
         "control-to-control": {
@@ -243,14 +284,26 @@
         },
         "group-to-group": {
           "horizontal": {
-            "description": "Use to set the horizontal space between groups of elements, like between multiple action groups or forms groups placed in a horizontal layout.",
-            "type": "number",
-            "value": "{global.spacer.2xl}"
+            "default": {
+              "description": "Use to set the horizontal space between groups of elements, like between multiple action groups or forms groups placed in a horizontal layout.",
+              "type": "number",
+              "value": "{global.spacer.2xl}"
+            },
+            "compact": {
+              "type": "number",
+              "value": "{global.spacer.sm}"
+            }
           },
           "vertical": {
-            "description": "Use to set the vertical space between groups of elements, like between stacked form groups.",
-            "type": "number",
-            "value": "{global.spacer.lg}"
+            "default": {
+              "description": "Use to set the vertical space between groups of elements, like between stacked form groups.",
+              "type": "number",
+              "value": "{global.spacer.lg}"
+            },
+            "compact": {
+              "type": "number",
+              "value": "{global.spacer.md}"
+            }
           }
         },
         "action-to-action": {
@@ -266,45 +319,16 @@
           }
         }
       },
-      "action": {
-        "horizontal": {
-          "default": {
-            "description": "Use to set the horizontal padding inside a default action, like buttons.",
-            "type": "number",
-            "value": "{global.spacer.lg}"
-          },
-          "plain": {
-            "description": "Use to set the horizontal padding inside a plain action, like plain buttons.",
-            "type": "number",
-            "value": "{global.spacer.sm}",
-            "compact": {
-              "description": "Use to set the horizontal padding inside a compact, plain action/button.",
-              "type": "number",
-              "value": "{global.spacer.xs}"
-            }
-          },
-          "compact": {
-            "description": "Use to set the horizontal padding inside a compact action, like compact buttons.",
-            "type": "number",
-            "value": "{global.spacer.md}"
-          },
-          "spacious": {
-            "description": "Use to set the horizontal padding inside a large/display action, like CTAs.",
-            "type": "number",
-            "value": "{global.spacer.xl}"
-          }
-        },
-        "vertical": {
-          "compact": {
-            "description": "Use to set the vertical padding inside a compact action, like compact buttons.",
-            "type": "number",
-            "value": "{global.spacer.xs}"
-          },
-          "spacious": {
-            "description": "Use to set the vertical padding inside a large/display action, like CTAs.",
-            "type": "number",
-            "value": "{global.spacer.md}"
-          }
+      "inset": {
+        "page-chrome": {
+          "type": "number",
+          "value": "{global.spacer.lg}"
+        }
+      },
+      "gutter": {
+        "default": {
+          "type": "number",
+          "value": "{global.spacer.md}"
         }
       }
     },
@@ -335,12 +359,24 @@
           "type": "number",
           "value": "{global.icon.size.400}"
         },
-        "3xl": {
-          "description": "Use for triple extra large icons.",
-          "type": "number",
-          "value": "{global.icon.size.500}"
-        },
         "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",
@@ -373,23 +409,6 @@
               "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",
@@ -430,15 +449,34 @@
             "type": "number",
             "value": "{global.font.size.4xl}"
           }
+        },
+        "3xl": {
+          "description": "Use for triple extra large icons.",
+          "type": "number",
+          "value": "{global.icon.size.500}"
         }
       }
     },
     "font": {
-      "weight": {
+      "line-height": {
         "body": {
-          "description": "Use to define the default weight for body text",
+          "description": "Use to define the line height for body text",
           "type": "number",
-          "value": "{global.font.weight.100}",
+          "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": {
+            "description": "Use to define the default weight for body text",
+            "type": "number",
+            "value": "{global.font.weight.100}"
+          },
           "bold": {
             "description": "Use to define the bold weight for body text, often used to field labels or to add emphasis.",
             "type": "number",
@@ -446,9 +484,11 @@
           }
         },
         "heading": {
-          "description": "Use to define the default weight for heading text",
-          "type": "number",
-          "value": "{global.font.weight.300}",
+          "default": {
+            "description": "Use to define the default weight for heading text",
+            "type": "number",
+            "value": "{global.font.weight.300}"
+          },
           "bold": {
             "description": "Use to define the bold weight for heading text, often used to add emphasis.",
             "type": "number",
@@ -456,18 +496,6 @@
           }
         }
       },
-      "line-height": {
-        "body": {
-          "description": "Use to define the line height for body text",
-          "type": "number",
-          "value": "{global.font.line-height.100}"
-        },
-        "heading": {
-          "description": "Use to define the line height for heading text",
-          "type": "number",
-          "value": "{global.font.line-height.200}"
-        }
-      },
       "family": {
         "body": {
           "description": "Use to define the font family for body text",
@@ -578,26 +606,32 @@
     },
     "z-index": {
       "xs": {
+        "description": "Use to set an extra small z-index, to display an element below other elements with a larger z-index. Use for smaller parts of a component that need to overlap adjacent elements, like box shadows of hovered elements.",
         "type": "number",
         "value": "{global.z-index.100}"
       },
       "sm": {
+        "description": "Use to set a small z-index, to display an element above other elements with smaller z-indexes. Use for components that need to appear above surrounding elements, like menus/dropdowns.",
         "type": "number",
         "value": "{global.z-index.200}"
       },
       "md": {
+        "description": "Use to set a medium z-index, to display an element above other elements with smaller z-indexes Use for sticky elements, like banners and page sections.",
         "type": "number",
         "value": "{global.z-index.300}"
       },
       "lg": {
+        "description": "Use to set a large z-index, to display an element above other elements with smaller z-indexes Use for the backdrop component, which appears beneath an open modal.",
         "type": "number",
         "value": "{global.z-index.400}"
       },
       "xl": {
+        "description": "Use to set an extra large z-index, to display an element above other elements with smaller z-indexes. Use for modals.",
         "type": "number",
         "value": "{global.z-index.500}"
       },
       "2xl": {
+        "description": "Use to set a double extra large z-index, to display an element above all other page elements. Use for elements that should appear on top of all others, like toast alert groups.",
         "type": "number",
         "value": "{global.z-index.600}"
       }
@@ -862,6 +896,86 @@
           "value": "{global.breakpoint.550}"
         }
       }
+    },
+    "text-decoration": {
+      "width": {
+        "default": {
+          "type": "number",
+          "value": "{global.border.width.regular}"
+        }
+      },
+      "offset": {
+        "default": {
+          "type": "number",
+          "value": "{global.spacer.xs}"
+        }
+      },
+      "editable-text": {
+        "line": {
+          "default": {
+            "type": "number",
+            "value": "{global.text-decoration.line.200}"
+          },
+          "hover": {
+            "type": "number",
+            "value": "{global.text-decoration.line.200}"
+          }
+        },
+        "style": {
+          "default": {
+            "type": "number",
+            "value": "{global.text-decoration.style.200}"
+          },
+          "hover": {
+            "type": "number",
+            "value": "{global.text-decoration.style.200}"
+          }
+        }
+      },
+      "link": {
+        "line": {
+          "default": {
+            "type": "number",
+            "value": "{global.text-decoration.line.200}"
+          },
+          "hover": {
+            "type": "number",
+            "value": "{global.text-decoration.line.200}"
+          }
+        },
+        "style": {
+          "default": {
+            "type": "number",
+            "value": "{global.text-decoration.style.100}"
+          },
+          "hover": {
+            "type": "number",
+            "value": "{global.text-decoration.style.100}"
+          }
+        }
+      },
+      "help-text": {
+        "line": {
+          "default": {
+            "type": "number",
+            "value": "{global.text-decoration.line.200}"
+          },
+          "hover": {
+            "type": "number",
+            "value": "{global.text-decoration.line.200}"
+          }
+        },
+        "style": {
+          "default": {
+            "type": "number",
+            "value": "{global.text-decoration.style.200}"
+          },
+          "hover": {
+            "type": "number",
+            "value": "{global.text-decoration.style.200}"
+          }
+        }
+      }
     }
   }
 }

package/tokens/default/semantic.json

@@ -90,6 +90,10 @@
             "description": "Use as the default background for control elements like form inputs and menu toggles.",
             "type": "color",
             "value": "{global.background.color.primary.default}"
+          },
+          "read-only": {
+            "type": "color",
+            "value": "{global.background.color.200}"
           }
         },
         "highlight": {
@@ -940,6 +944,12 @@
     },
     "border": {
       "color": {
+        "control": {
+          "read-only": {
+            "type": "color",
+            "value": "{global.border.color.50}"
+          }
+        },
         "brand": {
           "default": {
             "description": "Use as the default border color for any branded element, like color-coded labels, banners, etc.",

package/build-js-for-docs.js

@@ -1,41 +0,0 @@
-const fs = require('fs');
-const fse = require('fs-extra');
-const path = require('path');
-
-const charts_scss = path.join(__dirname, 'build/css/tokens-charts.scss');
-const charts_dark_scss = path.join(__dirname, 'build/css/tokens-charts-dark.scss');
-const dark_scss = path.join(__dirname, 'build/css/tokens-dark.scss');
-const default_scss = path.join(__dirname, 'build/css/tokens-default.scss');
-const palette_scss = path.join(__dirname, 'build/css/tokens-palette.scss');
-
-const chartsFileContents = fs.readFileSync(charts_scss, 'utf-8');
-const chartsDarkFileContents = fs.readFileSync(charts_dark_scss, 'utf-8');
-const darkFileContents = fs.readFileSync(dark_scss, 'utf-8');
-const defaultFileContents = fs.readFileSync(default_scss, 'utf-8');
-const paletteFileContents = fs.readFileSync(palette_scss, 'utf-8');
-
-const scssAsJson = {}
-
-const addToMap = (line) => {
-  const trimmedLine = line.trimStart();
-  if (trimmedLine.startsWith("--")) {
-    const varName = trimmedLine.substring(0, trimmedLine.indexOf(':'));
-
-    // value should have var( ) stripped from it, so it's just the variable name
-    // if no var ( ) then just the value should be stored in the map
-    let value = trimmedLine.substring(trimmedLine.indexOf(':')+1, trimmedLine.indexOf(';')).trimStart();
-    if (value.startsWith('var(')) {
-      value = value.substring(value.indexOf('(')+1, value.indexOf(')'));
-    }
-    scssAsJson[varName] = value
-  }
-}
-
-paletteFileContents.split(/\r?\n/).forEach(line => addToMap(line));
-defaultFileContents.split(/\r?\n/).forEach(line => addToMap(line));
-darkFileContents.split(/\r?\n/).forEach(line => addToMap(line));
-chartsFileContents.split(/\r?\n/).forEach(line => addToMap(line));
-chartsDarkFileContents.split(/\r?\n/).forEach(line => addToMap(line));
-
-fse.writeJson(path.join(__dirname, 'patternfly-docs/scssAsJson.json'), scssAsJson);
-