@splunk/themes 0.15.0 → 0.16.0

package/CHANGELOG.md

@@ -1,6 +1,18 @@
 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:

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

@@ -230,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
@@ -295,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splunk/themes",
-  "version": "0.15.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",

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`.
      */
@@ -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;