@splunk/themes 0.14.0 → 0.16.0

package/CHANGELOG.md

@@ -1,6 +1,28 @@
 Change Log
 ============
 
+0.16.0 - April 6, 2023
+----------
+New Features:
+* Added variables for supported font weights; the `typography` mixin's `weight` param supports these as keyword values (SUI-5344).
+
+Breaking Changes:
+* `typography` mixin's `weight` param now only accepts keyword values. Number values have been removed (SUI-5344).
+
+Bug Fixes:
+* `typography` mixin properly applies correct CSS for `weight` params (SUI-5344).
+
+
+0.15.0 - January 25, 2023
+----------
+New Features:
+* Added theme specific code in `typography` mixin for title variations (SUI-5272).
+
+Bug Fixes:
+* `mixins` now applies `color-scheme` (SUI-1926).
+    * This causes form controls, scrollbars, and other elements to respect the color scheme specified by `ThemeProvider`.
+* Fixes documentation typo in `typography` mixin where 'subtitle' and 'smallSubtitle' should be instead be named 'title6' and 'title7' respectively.
+
 0.14.0 - January 10, 2023
 ----------
 New Features:

package/enterprise/light.js

@@ -325,18 +325,32 @@ var borders = {
 };
 var sansFontFamily = "'Splunk Platform Sans', 'Proxima Nova', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif";
 /**
- * ## Fonts
+ * ## Font family
  *
  * @valueSet
  */
 
-var fonts = {
+var fontFamily = {
   sansFontFamily: sansFontFamily,
   serifFontFamily: "Georgia, 'Times New Roman', Times, serif",
   monoFontFamily: "'Splunk Platform Mono', Inconsolata, Consolas, 'Droid Sans Mono', Monaco, 'Courier New', Courier, monospace",
-  fontFamily: sansFontFamily,
-  fontWeightBold: '700',
-  fontWeightSemiBold: '500'
+  fontFamily: sansFontFamily
+};
+/**
+ * ## Font weights
+ *
+ * Based on [common weight name mappings](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping)
+ *
+ * @valueSet
+ */
+
+var fontWeights = {
+  fontWeightLight: 300,
+  fontWeightNormal: 400,
+  fontWeightSemiBold: 500,
+  fontWeightBold: 700,
+  fontWeightHeavy: 800,
+  fontWeightExtraBold: 900
 };
 /**
  * ## Layers
@@ -354,7 +368,7 @@ var zindexes = {
   zindexToastMessages: 2000
 };
 
-var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, brandColors), grays), accentColors), errorColors), alertColors), warningColors), successColors), infoColors), categoricalColors), divergingColors), syntaxColors), fonts), usageColors), backgrounds), shadows), borders), zindexes);
+var theme = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, brandColors), grays), accentColors), errorColors), alertColors), warningColors), successColors), infoColors), categoricalColors), divergingColors), syntaxColors), fontFamily), fontWeights), usageColors), backgrounds), shadows), borders), zindexes);
 
 var _default = theme;
 exports["default"] = _default;

package/mixins/tests/typography.unit.js

@@ -20,9 +20,19 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _templateObject6() {
+function _templateObject7() {
   var data = _taggedTemplateLiteral(["\n            ", "\n            ", ";\n            ", ";\n        "]);
 
+  _templateObject7 = function _templateObject7() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject6() {
+  var data = _taggedTemplateLiteral(["\n            ", "\n        "]);
+
   _templateObject6 = function _templateObject6() {
     return data;
   };
@@ -177,7 +187,7 @@ describe('typography', function () {
     var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(Component, null)),
         container = _render5.container;
 
-    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              color: #909090;\n              font-family: 'Splunk Platform Mono','Roboto Mono',Consolas,'Droid Sans Mono',Monaco,'Courier New',Courier,monospace;\n              font-size: 56px;\n              font-weight: extraBold;\n              line-height: 64px;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
+    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              color: #909090;\n              font-family: 'Splunk Platform Mono','Roboto Mono',Consolas,'Droid Sans Mono',Monaco,'Courier New',Courier,monospace;\n              font-size: 56px;\n              font-weight: 900;\n              line-height: 64px;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
   });
   it('allows default values to be overridden with params', function () {
     var Component = _styledComponents["default"].p(_templateObject5(), (0, _typography["default"])({
@@ -192,7 +202,22 @@ describe('typography', function () {
     var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(Component, null)),
         container = _render6.container;
 
-    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              color: #909090;\n              font-family: 'Splunk Platform Mono','Roboto Mono',Consolas,'Droid Sans Mono',Monaco,'Courier New',Courier,monospace;\n              font-size: 56px;\n              font-weight: extraBold;\n              line-height: 64px;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
+    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              color: #909090;\n              font-family: 'Splunk Platform Mono','Roboto Mono',Consolas,'Droid Sans Mono',Monaco,'Courier New',Courier,monospace;\n              font-size: 56px;\n              font-weight: 900;\n              line-height: 64px;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
+  });
+  it('transforms params that are shorthand properly to CSS', function () {
+    var Component = _styledComponents["default"].p(_templateObject6(), (0, _typography["default"])({
+      color: 'muted',
+      family: 'monospace',
+      lineHeight: 64,
+      size: 56,
+      weight: 'extraBold',
+      withReset: false
+    }));
+
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(Component, null)),
+        container = _render7.container;
+
+    expect(container.firstChild).toMatchInlineSnapshot("\n            .c0 {\n              color: #909090;\n              font-family: 'Splunk Platform Mono','Roboto Mono',Consolas,'Droid Sans Mono',Monaco,'Courier New',Courier,monospace;\n              font-size: 56px;\n              font-weight: 900;\n              line-height: 64px;\n            }\n\n            <p\n              class=\"c0\"\n            />\n        ");
   });
   it.skip('passes TS verification', function () {
     (0, _typography["default"])();
@@ -227,7 +252,7 @@ describe('typography', function () {
 describe('passes TS verification', function () {
   it.skip('allows mixins in styled-components css', function () {
     /* eslint-disable-next-line @typescript-eslint/no-unused-expressions */
-    (0, _styledComponents.css)(_templateObject6(), (0, _typography["default"])('title1'), (0, _typography["default"])('title1', {
+    (0, _styledComponents.css)(_templateObject7(), (0, _typography["default"])('title1'), (0, _typography["default"])('title1', {
       color: 'disabled'
     }), (0, _typography["default"])({
       family: 'monospace'

package/mixins/typography.js

@@ -11,6 +11,8 @@ var _merge = _interopRequireDefault(require("lodash/merge"));
 
 var _variables = _interopRequireDefault(require("../variables"));
 
+var _pick = _interopRequireDefault(require("../pick"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _templateObject2() {
@@ -60,42 +62,87 @@ function getStylesForVariant(variant) {
   var lineHeight = _variables["default"].lineHeight; // eslint-disable-line prefer-destructuring
 
   var size = _variables["default"].fontSize;
-  var weight = 'normal';
+  var weight = 'normal'; // TODO: After sections are removed from Heading update HeadingStyles accordingly to preserve section styles as typography variants SUI-5268
 
   switch (variant) {
     case 'title1':
       color = _variables["default"].contentColorActive;
-      lineHeight = '40px';
-      size = '36px';
-      weight = _variables["default"].fontWeightBold;
+      lineHeight = (0, _pick["default"])({
+        enterprise: '20px',
+        prisma: '48px'
+      });
+      size = (0, _pick["default"])({
+        enterprise: '24px',
+        prisma: '36px'
+      });
+      weight = (0, _pick["default"])({
+        enterprise: '500',
+        prisma: _variables["default"].fontWeightBold
+      });
       break;
 
     case 'title2':
       color = _variables["default"].contentColorActive;
-      lineHeight = '48px';
-      size = _variables["default"].fontSizeXXLarge;
-      weight = _variables["default"].fontWeightBold;
+      lineHeight = (0, _pick["default"])({
+        enterprise: '20px',
+        prisma: '24px'
+      });
+      size = (0, _pick["default"])({
+        enterprise: '18px',
+        prisma: '24px'
+      });
+      weight = (0, _pick["default"])({
+        enterprise: '500',
+        prisma: _variables["default"].fontWeightBold
+      });
       break;
 
     case 'title3':
       color = _variables["default"].contentColorActive;
-      lineHeight = '24px';
-      size = '20px';
-      weight = _variables["default"].fontWeightBold;
+      lineHeight = (0, _pick["default"])({
+        enterprise: '20px',
+        prisma: '24px'
+      });
+      size = (0, _pick["default"])({
+        enterprise: '16px',
+        prisma: '20px'
+      });
+      weight = (0, _pick["default"])({
+        enterprise: '500',
+        prisma: _variables["default"].fontWeightBold
+      });
       break;
 
     case 'title4':
       color = _variables["default"].contentColorActive;
-      lineHeight = '22px';
-      size = _variables["default"].fontSizeLarge;
+      lineHeight = (0, _pick["default"])({
+        enterprise: '20px',
+        prisma: '24px'
+      });
+      size = (0, _pick["default"])({
+        enterprise: '12px',
+        prisma: '16px'
+      });
       weight = _variables["default"].fontWeightBold;
       break;
 
     case 'title5':
-      color = _variables["default"].contentColorActive;
-      lineHeight = _variables["default"].lineHeight;
-      size = _variables["default"].fontSize;
-      weight = _variables["default"].fontWeightBold;
+      color = (0, _pick["default"])({
+        enterprise: _variables["default"].contentColorActive,
+        prisma: 'default'
+      });
+      lineHeight = (0, _pick["default"])({
+        enterprise: _variables["default"].lineHeight,
+        prisma: '16px'
+      });
+      size = (0, _pick["default"])({
+        enterprise: '12px',
+        prisma: '13px'
+      });
+      weight = (0, _pick["default"])({
+        enterprise: '500',
+        prisma: _variables["default"].fontWeightBold
+      });
       break;
 
     case 'title6':
@@ -183,6 +230,15 @@ var colorPropToVariableMap = {
 var familyPropToVariableMap = {
   sansSerif: _variables["default"].sansFontFamily,
   monospace: _variables["default"].monoFontFamily
+}; // As defined by [font-weight | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping)
+
+var weightPropToValueMap = {
+  light: _variables["default"].fontWeightLight,
+  normal: _variables["default"].fontWeightNormal,
+  semiBold: _variables["default"].fontWeightSemiBold,
+  bold: _variables["default"].fontWeightBold,
+  extraBold: _variables["default"].fontWeightExtraBold,
+  heavy: _variables["default"].fontWeightHeavy
 };
 /**
  * A mixin for styling text content using predefined typography variants
@@ -218,8 +274,8 @@ var familyPropToVariableMap = {
  *  `'title3'`,
  *  `'title4'`,
  *  `'title5'`,
- *  `'subtitle'`,
- *  `'smallSubtitle'`,
+ *  `'title6'`,
+ *  `'title7'`,
  *  `'largeBody'`,
  *  `'smallBody'`,
  *  `'footnote'`,
@@ -248,7 +304,8 @@ function typography(variantOrParams, additionalParams) {
     size: params.size ? "".concat(params.size, "px") : undefined,
     lineHeight: params.lineHeight ? "".concat(params.lineHeight, "px") : undefined,
     color: params.color ? colorPropToVariableMap[params.color] : undefined,
-    family: params.family ? familyPropToVariableMap[params.family] : undefined
+    family: params.family ? familyPropToVariableMap[params.family] : undefined,
+    weight: params.weight ? weightPropToValueMap[params.weight] : undefined
   });
 
   var defaultTypographyParams = {

package/mixins/utilityMixins.js

@@ -27,7 +27,7 @@ var _pick = _interopRequireDefault(require("../pick"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n        /* Generic resets */\n        animation: none 0s ease 0s 1 normal none running;\n        backface-visibility: visible;\n        background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;\n        border: medium none currentColor;\n        border-collapse: separate;\n        border-image: none;\n        border-radius: 0;\n        border-spacing: 0;\n        bottom: auto;\n        box-shadow: none;\n        caption-side: top;\n        clear: none;\n        clip: auto;\n        columns: auto;\n        column-count: auto;\n        column-fill: balance;\n        column-gap: normal;\n        column-rule: medium none currentColor;\n        column-span: 1;\n        column-width: auto;\n        content: normal;\n        counter-increment: none;\n        counter-reset: none;\n        empty-cells: show;\n        float: none;\n        font-style: normal;\n        font-variant: normal;\n        font-weight: normal;\n        font-stretch: normal;\n        height: auto;\n        hyphens: none;\n        left: auto;\n        letter-spacing: normal;\n        list-style: disc outside none;\n        margin: 0;\n        max-height: none;\n        max-width: none;\n        min-height: 0;\n        min-width: 0;\n        opacity: 1;\n        orphans: 2;\n        overflow: visible;\n        overflow-x: visible;\n        overflow-y: visible;\n        padding: 0;\n        page-break-after: auto;\n        page-break-before: auto;\n        page-break-inside: auto;\n        perspective: none;\n        perspective-origin: 50% 50%;\n        pointer-events: auto;\n        position: static;\n        right: auto;\n        tab-size: 8;\n        table-layout: auto;\n        text-align: left;\n        text-align-last: auto;\n        text-decoration: none;\n        text-indent: 0;\n        text-shadow: none;\n        text-transform: none;\n        top: auto;\n        transform: none;\n        transform-origin: 50% 50% 0;\n        transform-style: flat;\n        transition: none 0s ease 0s;\n        user-select: auto;\n        vertical-align: baseline;\n        white-space: normal;\n        widows: 2;\n        width: auto;\n        word-spacing: normal;\n        z-index: auto;\n        /* Splunk-specific resets */\n        border-width: 1px;\n        box-sizing: border-box;\n        color: ", ";\n        cursor: inherit;\n        display: ", ";\n        font-family: ", ";\n        font-size: ", ";\n        line-height: ", ";\n        outline: medium none ", ";\n        visibility: inherit;\n    "]);
+  var data = _taggedTemplateLiteral(["\n        /* Generic resets */\n        animation: none 0s ease 0s 1 normal none running;\n        backface-visibility: visible;\n        background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;\n        border: medium none currentColor;\n        border-collapse: separate;\n        border-image: none;\n        border-radius: 0;\n        border-spacing: 0;\n        bottom: auto;\n        box-shadow: none;\n        caption-side: top;\n        clear: none;\n        clip: auto;\n        color-scheme: ", ";\n        columns: auto;\n        column-count: auto;\n        column-fill: balance;\n        column-gap: normal;\n        column-rule: medium none currentColor;\n        column-span: 1;\n        column-width: auto;\n        content: normal;\n        counter-increment: none;\n        counter-reset: none;\n        empty-cells: show;\n        float: none;\n        font-style: normal;\n        font-variant: normal;\n        font-weight: normal;\n        font-stretch: normal;\n        height: auto;\n        hyphens: none;\n        left: auto;\n        letter-spacing: normal;\n        list-style: disc outside none;\n        margin: 0;\n        max-height: none;\n        max-width: none;\n        min-height: 0;\n        min-width: 0;\n        opacity: 1;\n        orphans: 2;\n        overflow: visible;\n        overflow-x: visible;\n        overflow-y: visible;\n        padding: 0;\n        page-break-after: auto;\n        page-break-before: auto;\n        page-break-inside: auto;\n        perspective: none;\n        perspective-origin: 50% 50%;\n        pointer-events: auto;\n        position: static;\n        right: auto;\n        tab-size: 8;\n        table-layout: auto;\n        text-align: left;\n        text-align-last: auto;\n        text-decoration: none;\n        text-indent: 0;\n        text-shadow: none;\n        text-transform: none;\n        top: auto;\n        transform: none;\n        transform-origin: 50% 50% 0;\n        transform-style: flat;\n        transition: none 0s ease 0s;\n        user-select: auto;\n        vertical-align: baseline;\n        white-space: normal;\n        widows: 2;\n        width: auto;\n        word-spacing: normal;\n        z-index: auto;\n        /* Splunk-specific resets */\n        border-width: 1px;\n        box-sizing: border-box;\n        color: ", ";\n        cursor: inherit;\n        display: ", ";\n        font-family: ", ";\n        font-size: ", ";\n        line-height: ", ";\n        outline: medium none ", ";\n        visibility: inherit;\n    "]);
 
   _templateObject = function _templateObject() {
     return data;
@@ -66,6 +66,14 @@ var reset = function reset() {
   var display = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'inline';
   return function () {
     return (0, _styledComponents.css)(_templateObject(), (0, _pick["default"])({
+      /*
+          use pick() rather than relying on variables.colorScheme
+          because there's no guarantee that variables.colorScheme
+          has to match the css color-scheme prop
+      */
+      dark: 'dark',
+      light: 'light'
+    }), (0, _pick["default"])({
       enterprise: _variables["default"].textColor,
       prisma: _variables["default"].contentColorDefault
     }), display, _variables["default"].fontFamily, _variables["default"].fontSize, _variables["default"].lineHeight, _variables["default"].focusColor);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/themes",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "Theme variables and mixins for the Splunk design language",
   "scripts": {
     "babel": "babel src -d . --ignore src/babel-plugin-base64-png,src/tests --ignore \"**/docs\" --extensions .js,.ts,.tsx",
@@ -16,6 +16,7 @@
     "test": "jest",
     "test:ci": "JEST_JUNIT_OUTPUT_DIR=./test-reports JEST_JUNIT_OUTPUT_NAME=unit-results.xml JEST_JUNIT_CLASSNAME=unit yarn run test --ci --reporters=default jest-junit --coverage --coverageDirectory=coverage_report/coverage_maps_unit --coverageReporters=cobertura",
     "test:watch": "jest --watch",
+    "pretypes:build": "rm -rf ./types",
     "types:build": "tsc --emitDeclarationOnly --declaration",
     "types:start": "yarn types:build --watch"
   },

package/prisma/base.js

@@ -62,18 +62,32 @@ function createPrismaBase(_ref) {
   };
   var sansFontFamily = "'Splunk Platform Sans', 'Splunk Data Sans', Roboto, Droid, 'Helvetica Neue', Helvetica, Arial, sans-serif";
   /**
-   * ## Fonts
+   * ## Font family
    *
    * @valueSet
    */
 
-  var fonts = {
+  var fontFamily = {
     sansFontFamily: sansFontFamily,
     serifFontFamily: "Georgia, 'Times New Roman', Times, serif",
     monoFontFamily: "'Splunk Platform Mono', 'Roboto Mono', Consolas, 'Droid Sans Mono', Monaco, 'Courier New', Courier, monospace",
-    fontFamily: sansFontFamily,
-    fontWeightBold: '700',
-    fontWeightSemiBold: '500'
+    fontFamily: sansFontFamily
+  };
+  /**
+   * ## Font weights
+   *
+   * Based on [common weight name mappings](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#common_weight_name_mapping)
+   *
+   * @valueSet
+   */
+
+  var fontWeights = {
+    fontWeightLight: 300,
+    fontWeightNormal: 400,
+    fontWeightSemiBold: 500,
+    fontWeightBold: 700,
+    fontWeightHeavy: 800,
+    fontWeightExtraBold: 900
   };
   /**
    * ## Layers
@@ -90,7 +104,7 @@ function createPrismaBase(_ref) {
     zindexPopover: 1060,
     zindexToastMessages: 2000
   };
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, fonts), usageColors), _dataViz["default"]), shadows), backgrounds), zindexes);
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, fontFamily), fontWeights), usageColors), _dataViz["default"]), shadows), backgrounds), zindexes);
 }
 
 var _default = createPrismaBase;

package/types/enterprise/dark.d.ts

@@ -25,12 +25,16 @@ declare const theme: {
     overlayShadow: string;
     focusColor: string;
     transparent: string;
+    fontWeightLight: number;
+    fontWeightNormal: number;
+    fontWeightSemiBold: number;
+    fontWeightBold: number;
+    fontWeightHeavy: number;
+    fontWeightExtraBold: number;
     sansFontFamily: string;
     serifFontFamily: string;
     monoFontFamily: string;
     fontFamily: string;
-    fontWeightBold: string;
-    fontWeightSemiBold: string;
     syntaxBlue: string;
     syntaxBlueLight: string;
     syntaxBrown: string;

package/types/enterprise/light.d.ts

@@ -22,12 +22,16 @@ declare const theme: {
     backgroundColorHover: string;
     backgroundColor: string;
     transparent: string;
+    fontWeightLight: number;
+    fontWeightNormal: number;
+    fontWeightSemiBold: number;
+    fontWeightBold: number;
+    fontWeightHeavy: number;
+    fontWeightExtraBold: number;
     sansFontFamily: string;
     serifFontFamily: string;
     monoFontFamily: string;
     fontFamily: string;
-    fontWeightBold: string;
-    fontWeightSemiBold: string;
     syntaxBlue: string;
     syntaxBlueLight: string;
     syntaxBrown: string;

package/types/mixins/typography.d.ts

@@ -1,6 +1,7 @@
 import { AnyTheme, Interpolation, ThemedProps } from '../types';
 declare const typographyVariants: readonly ["body", "title1", "title2", "title3", "title4", "title5", "title6", "title7", "largeBody", "smallBody", "footnote", "monoBody", "monoSmallBody"];
 declare type TypographyVariant = typeof typographyVariants[number];
+declare type TypographyTitleVariant = Extract<TypographyVariant, 'title1' | 'title2' | 'title3' | 'title4' | 'title5' | 'title6' | 'title7'>;
 interface TypographyParams {
     /**
      * Set the font-family to sans-serif or monospace based on current theme.
@@ -20,11 +21,8 @@ interface TypographyParams {
     color?: 'active' | 'default' | 'disabled' | 'inverted' | 'muted' | 'inherit';
     /**
      * Set the font-weight to a system-standard value.
-     *
-     * Number or equivalent string can be used.
-     * See: [font-weight | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
      */
-    weight?: 300 | 400 | 500 | 600 | 700 | 800 | 900 | 'light' | 'normal' | 'semiBold' | 'bold' | 'extraBold' | 'heavy';
+    weight?: 'light' | 'normal' | 'semiBold' | 'bold' | 'extraBold' | 'heavy';
     /**
      * Apply a reset to the element's margin and padding. This defaults to true if using a `variant`.
      */
@@ -64,8 +62,8 @@ interface TypographyParams {
  *  `'title3'`,
  *  `'title4'`,
  *  `'title5'`,
- *  `'subtitle'`,
- *  `'smallSubtitle'`,
+ *  `'title6'`,
+ *  `'title7'`,
  *  `'largeBody'`,
  *  `'smallBody'`,
  *  `'footnote'`,
@@ -80,4 +78,4 @@ declare function typography<T extends AnyTheme, A extends ThemedProps>(variant:
 declare function typography<T extends AnyTheme, A extends ThemedProps>({ family, size, lineHeight, color, weight, withReset, }: TypographyParams): Interpolation<T, A>;
 declare function typography<T extends AnyTheme, A extends ThemedProps>(variant: TypographyVariant, additionalParams: TypographyParams): Interpolation<T, A>;
 export default typography;
-export { typographyVariants, TypographyVariant, TypographyParams };
+export { typographyVariants, TypographyTitleVariant, TypographyVariant, TypographyParams };

package/types/prisma/base.d.ts

@@ -229,12 +229,16 @@ declare function createPrismaBase({ colorScheme }: {
     focusColor: string;
     transparent: string;
     linkColor: string;
+    fontWeightLight: number;
+    fontWeightNormal: number;
+    fontWeightSemiBold: number;
+    fontWeightBold: number;
+    fontWeightHeavy: number;
+    fontWeightExtraBold: number;
     sansFontFamily: string;
     serifFontFamily: string;
     monoFontFamily: string;
     fontFamily: string;
-    fontWeightBold: string;
-    fontWeightSemiBold: string;
 };
 declare type PrismaBase = ReturnType<typeof createPrismaBase>;
 export default createPrismaBase;