@splunk/themes 0.13.1 → 0.15.0

package/CHANGELOG.md

@@ -1,6 +1,21 @@
 Change Log
 ============
 
+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:
+* Added `inherit` option for `color` prop in `typography` mixin.
+
 0.13.1 - December 6, 2022
 ----------
 * Optimizes bundle sizes of consumers by reducing footprint of "lodash" (SUI-5090).

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':
@@ -177,7 +224,8 @@ var colorPropToVariableMap = {
   "default": _variables["default"].contentColorDefault,
   disabled: _variables["default"].contentColorDisabled,
   inverted: _variables["default"].contentColorInverted,
-  muted: _variables["default"].contentColorMuted
+  muted: _variables["default"].contentColorMuted,
+  inherit: 'inherit'
 };
 var familyPropToVariableMap = {
   sansSerif: _variables["default"].sansFontFamily,
@@ -217,8 +265,8 @@ var familyPropToVariableMap = {
  *  `'title3'`,
  *  `'title4'`,
  *  `'title5'`,
- *  `'subtitle'`,
- *  `'smallSubtitle'`,
+ *  `'title6'`,
+ *  `'title7'`,
  *  `'largeBody'`,
  *  `'smallBody'`,
  *  `'footnote'`,

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.13.1",
+  "version": "0.15.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/types/mixins/typography.d.ts

@@ -17,7 +17,7 @@ interface TypographyParams {
     /**
      * Set the color to a system-standard color: e.g. `active` for `@splunk/themes/variables.contentColorActive`.
      */
-    color?: 'active' | 'default' | 'disabled' | 'inverted' | 'muted';
+    color?: 'active' | 'default' | 'disabled' | 'inverted' | 'muted' | 'inherit';
     /**
      * Set the font-weight to a system-standard value.
      *
@@ -64,8 +64,8 @@ interface TypographyParams {
  *  `'title3'`,
  *  `'title4'`,
  *  `'title5'`,
- *  `'subtitle'`,
- *  `'smallSubtitle'`,
+ *  `'title6'`,
+ *  `'title7'`,
  *  `'largeBody'`,
  *  `'smallBody'`,
  *  `'footnote'`,