@splunk/themes - npm Package Compare versions

Comparing version 0.4.1 to 0.4.2

CHANGELOG.md

 Change Log
 ============
 
+0.4.2 - February 5, 2020
+----------
+New Features:
+* Added `screenReaderContent` mixin.
+
 0.4.1 - October 14, 2019
@@ -5,0 +10,0 @@ ----------

enterprise.js

@@ -47,3 +47,4 @@ "use strict";
     printNoBackground: _mixins.printNoBackground,
-    printWrapAll: _mixins.printWrapAll
+    printWrapAll: _mixins.printWrapAll,
+    screenReaderContent: _mixins.screenReaderContent
   }
@@ -50,0 +51,0 @@ });

lite.js

@@ -47,3 +47,4 @@ "use strict";
     printNoBackground: _mixins.printNoBackground,
-    printWrapAll: _mixins.printWrapAll
+    printWrapAll: _mixins.printWrapAll,
+    screenReaderContent: _mixins.screenReaderContent
   }
@@ -50,0 +51,0 @@ });

mixins.js

@@ -13,2 +13,3 @@ "use strict";
 exports.printWrapAll = printWrapAll;
+exports.screenReaderContent = screenReaderContent;
 
@@ -23,5 +24,2 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
  * DOM CSS properties, for example: `{ display: …, fontFamily: … }`.
- *
- * `@splunk/css-loader` automatically makes these mixins available for use but converts their name
- * to kebab-case (to achive backwards compatability). For example: `printHide` can be used as `print-hide`.
  */
@@ -112,13 +110,6 @@ // Markdown examples in this file have to prepend a zero width joiner character before each @
    *
-   *  ##### Example (@splunk/css-loader)
-   *  ```css
-   *  .myButton {
-   *      ‍@mixin reset inline-block;
-   *  }
-   *  ```
-   *
    *  ##### Example (styled-components)
    *  ```css
    *  .myButton {
-   *      ‍${props => props.theme.mixins.reset('inline-block')};
+   *      ${props => props.theme.mixins.reset('inline-block')};
    *  }
@@ -129,4 +120,4 @@ *  ```
    * @param {string} [display=inline] Set the `display` property (block, inline-block, …)
-   * @param {bool} [full=true] Reset all properies (for browsers that don't support `all`)
-   * @param {string} [all=false] Reset all properies if specified (by setting `all` to the given value, e.g. `initial`)
+   * @param {bool} [full=true] Reset all properties (for browsers that don't support `all`)
+   * @param {string} [all=false] Reset all properties if specified (by setting `all` to the given value, e.g. `initial`)
    * @public
@@ -158,15 +149,8 @@ */
  *
- *  ##### Example (@splunk/css-loader)
+ *  ##### Example (styled-components)
  *  ``` css
- *  .container {
- *      ‍@mixin clearfix;
+ *  .myContainer {
+ *      ${props => props.theme.mixins.clearfix()};
  *  }
  *  ```
- *
- *  ##### Example (styled-components)
- *  ``` css
- *  .myButton {
- *      ‍${props => props.theme.mixins.clearfix()};
- *   }
- *  ```
  * @public
@@ -188,17 +172,9 @@ */
  *
- *  ##### Example (@splunk/css-loader)
+ *  ##### Example (styled-components)
  *  ``` css
  *  .myButton {
- *      ‍@mixin ellipsis;
+ *      ${props => props.theme.mixins.ellipsis()};
  *      display: inline-block;
  *  }
  *  ```
- *
- *  ##### Example (styled-components)
- *  ``` css
- *  .myButton {
- *      ‍${props => props.theme.mixins.ellipsis()};
- *      display: inline-block;
- *   }
- *  ```
  * @public
@@ -218,17 +194,10 @@ */
  *
- *  ##### Example (@splunk/css-loader)
+ *  ##### Example (styled-components)
  *  ```css
  *  ‍@media print {
- *      .container {
- *          ‍@mixin print-width-100-percent;
+ *      .myElement {
+ *          ${props => props.theme.mixins.printWidth100Percent()};
  *      }
  *  }
  *  ```
- *
- *  ##### Example (styled-components)
- *  ```css
- *  ‍@media print {
- *      ‍${props => props.theme.mixins.printWidth100Percent()};
- *  }
- *  ```
  *  @public
@@ -248,17 +217,10 @@ */
  *
- *  ##### Example (@splunk/css-loader)
+ *  ##### Example (styled-components)
  *  ```css
  *  ‍@media print {
- *      .interactiveElement {
- *          ‍@mixin print-hide;
+ *      .myElement {
+ *          ${props => props.theme.mixins.printHide()};
  *      }
  *  }
  *  ```
- *
- *  ##### Example (styled-components)
- *  ```css
- *  ‍@media print {
- *      ‍${props => props.theme.mixins.printHide()};
- *  }
- *  ```
  * @public
@@ -276,17 +238,10 @@ */
  *
- *  ##### Example (@splunk/css-loader)
+ *  ##### Example (styled-components)
  *  ```css
  *  ‍@media print {
- *      .interactiveElement {
- *          ‍@mixin print-no-background;
+ *      .myElement {
+ *          ${props => props.theme.mixins.printNoBackground()};
  *      }
  *  }
  *  ```
- *
- *  ##### Example (styled-components)
- *  ```css
- *  ‍@media print {
- *      ‍${props => props.theme.mixins.printNoBackground()};
- *  }
- *  ```
  * @public
@@ -304,17 +259,10 @@ */
  *
- *  ##### Example (@splunk/css-loader)
+ *  ##### Example (styled-components)
  *  ```css
  *  ‍@media print {
- *      .interactiveElement {
- *          ‍@mixin print-wrap-all;
+ *      .myElement {
+ *          ${props => props.theme.mixins.printWrapAll()};
  *      }
  *  }
  *  ```
- *
- *  ##### Example (styled-components)
- *  ```css
- *  ‍@media print {
- *      ‍${props => props.theme.mixins.printWrapAll()};
- *  }
- *  ```
  * @public
@@ -331,2 +279,27 @@ */
   };
+}
+/**
+ * Visually hide content. Typically used to target content for assistive technologies.
+ *
+ *  ##### Example (styled-components)
+ *  ``` css
+ *  .myElement {
+ *      ${props => props.theme.mixins.screenReaderContent()};
+ *  }
+ *  ```
+ * @public
+ */
+
+
+function screenReaderContent() {
+  return {
+    position: 'absolute',
+    overflow: 'hidden',
+    clip: 'rect(0 0 0 0)',
+    height: '1px',
+    width: '1px',
+    margin: '-1px',
+    padding: 0,
+    border: 0
+  };
 }

package.json

 {
   "name": "@splunk/themes",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Theme variables and mixins for the Splunk design language",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -25,5 +25,4 @@ # @splunk/themes
 Hardcoding theme choices into an application/component must be avoided. Higher-level packages
-(such as `@splunk/css-loader`) handle theme selection automatically. Manually determining the
-active theme depends on the environment. For example, recent versions of Splunk Enterprise/Lite
-provide `window.$C.SPLUNK_UI_THEME`.
+typically handle theme selection automatically. Manually determining the active theme depends
+on the environment. For example, recent versions of Splunk Enterprise/Lite provide `window.$C.SPLUNK_UI_THEME`.
 
@@ -30,0 +29,0 @@ ## Structure

scp.js

@@ -320,3 +320,4 @@ "use strict";
     printNoBackground: _mixins.printNoBackground,
-    printWrapAll: _mixins.printWrapAll
+    printWrapAll: _mixins.printWrapAll,
+    screenReaderContent: _mixins.screenReaderContent
   }
@@ -323,0 +324,0 @@ });

No alert changes

Worsened metrics

Total package byte prevSize

46529

decreased by-0.85%

Lines of code

1039

decreased by-2.44%

Number of lines in readme file

48

decreased by-2.04%

No dependency changes