New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@splunk/themes

Package Overview
Dependencies
Maintainers
2
Versions
29
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@splunk/themes - npm Package Compare versions

Comparing version

0.6.1
to
0.7.0

enterprise/comfortable.js
enterprise/compact.js
enterprise/dark.js
enterprise/index.js
enterprise/light.js
enterprise/prismaAliases.js
getSettingsFromThemedProps.d.ts
getSettingsFromThemedProps.js
getTheme.d.ts
getTheme.js
index.d.ts
index.js
mixins.d.ts
pick.d.ts
pick.js
pickVariant.d.ts
pickVariant.js
prisma/base.js
prisma/comfortable.js
prisma/compact.js
prisma/dark.js
prisma/index.js
prisma/light.js
SplunkThemeProvider.d.ts
SplunkThemeProvider.js
stubs-assets.d.ts
stubs-splunkui.d.ts
types.js
types/babel-plugin-base64-png/index.d.ts
types/enterprise/comfortable.d.ts
types/enterprise/compact.d.ts
types/enterprise/dark.d.ts
types/enterprise/index.d.ts
types/enterprise/light.d.ts
types/enterprise/prismaAliases.d.ts
types/getSettingsFromThemedProps.d.ts
types/getTheme.d.ts
types/index.d.ts
types/mixins.d.ts
types/pick.d.ts
types/pickVariant.d.ts
types/prisma/base.d.ts
types/prisma/comfortable.d.ts
types/prisma/compact.d.ts
types/prisma/dark.d.ts
types/prisma/index.d.ts
types/prisma/light.d.ts
types/SplunkThemeProvider.d.ts
types/tests/getSettingsFromThemedProps.unit.d.ts
types/tests/getTheme.unit.d.ts
types/tests/mixins.unit.d.ts
types/tests/pick.unit.d.ts
types/tests/pickVariant.unit.d.ts
types/tests/SplunkThemeProvider.unit.d.ts
types/tests/useSplunkTheme.unit.d.ts
types/tests/variables.unit.d.ts
types/tests/withSplunkTheme.unit.d.ts
types/types.d.ts
types/useSplunkTheme.d.ts
types/utils.d.ts
types/variables.d.ts
types/withSplunkTheme.d.ts
useSplunkTheme.d.ts
useSplunkTheme.js
utils.js
variables.d.ts
variables.js
withSplunkTheme.d.ts
withSplunkTheme.js

27

CHANGELOG.md
Change Log
============
0.7.0 - February 4, 2021
----------
0.7.0 is a major departure from previous versions of this library. It has been optimized to work with React and styled-components,
but variables can still be used for other use cases.
New Features:
* `overlayColors` mixin supports nested template functions.
* `compact` variables.
API Changes:
* `scp` theme renamed to `prisma`.
* `prisma` `dark` is the default theme.
* `lite` theme removed. That is, the orange theme for the Splunk Light product was removed.
* New `SplunkThemeProvider`.
* New `pick()` function for switching css blocks and variables in styled-components templates.
* Individual themes are no longer exported directly.
* Use `useSplunkTheme()` for variables in React components;
* Use `variables` for variables in styled-components templates;
* Use `getTheme()` should you need a full list of theme variables for use outside of React and styled-components;
* Consuming packages no longer need to export their themes.
* Deprecated variables have been removed from `prisma`.
* `mixins` are no longer theme-specific – they are theme-aware. That is, one set of mixins work in all themes.
* `mixins` cannot be used outside of `styled-components`.
* `reset` mixin no longer supports the `full` and `all` parameters.
* Enterprise theme `backgroundColor` variable changed to improve contrast ratios for primary `Button`s (SUI-2441).
0.6.1 - August 31, 2020

@@ -5,0 +32,0 @@ ----------

335

mixins.js

@@ -6,3 +6,2 @@ "use strict";

});
exports.createReset = createReset;
exports.clearfix = clearfix;

@@ -16,15 +15,29 @@ exports.ellipsis = ellipsis;

exports.overlayColors = overlayColors;
exports.colorWithAlpha = colorWithAlpha;
exports["default"] = exports.reset = void 0;
var _tinycolor = _interopRequireDefault(require("tinycolor2"));
var _styledComponents = require("styled-components");
var _colorBlend = require("color-blend");
var _variables = _interopRequireDefault(require("./variables"));
var _pick = _interopRequireDefault(require("./pick"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
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 "]);
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
_templateObject = function _templateObject() {
return data;
};
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
return data;
}
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
/**

@@ -35,119 +48,30 @@ * @file

*/
// Markdown examples in this file have to prepend a zero width joiner character before each @
// to prevent jsdoc from interpreting something like @mixin as a tag, see:
// https://github.com/jsdoc3/jsdoc/issues/821
function createReset(variables) {
var fullReset = {
animation: 'none 0s ease 0s 1 normal none running',
backfaceVisibility: 'visible',
background: 'transparent none repeat 0 0 / auto auto padding-box border-box scroll',
border: 'medium none currentColor',
borderCollapse: 'separate',
borderImage: 'none',
borderRadius: 0,
borderSpacing: 0,
bottom: 'auto',
boxShadow: 'none',
captionSide: 'top',
clear: 'none',
clip: 'auto',
columns: 'auto',
columnCount: 'auto',
columnFill: 'balance',
columnGap: 'normal',
columnRule: 'medium none currentColor',
columnSpan: 1,
columnWidth: 'auto',
content: 'normal',
counterIncrement: 'none',
counterReset: 'none',
emptyCells: 'show',
"float": 'none',
fontStyle: 'normal',
fontVariant: 'normal',
fontWeight: 'normal',
fontStretch: 'normal',
height: 'auto',
hyphens: 'none',
left: 'auto',
letterSpacing: 'normal',
listStyle: 'disc outside none',
margin: 0,
maxHeight: 'none',
maxWidth: 'none',
minHeight: 0,
minWidth: 0,
opacity: 1,
orphans: 2,
overflow: 'visible',
overflowX: 'visible',
overflowY: 'visible',
padding: 0,
pageBreakAfter: 'auto',
pageBreakBefore: 'auto',
pageBreakInside: 'auto',
perspective: 'none',
perspectiveOrigin: '50% 50%',
pointerEvents: 'auto',
position: 'static',
right: 'auto',
tabSize: 8,
tableLayout: 'auto',
textAlign: 'left',
textAlignLast: 'auto',
textDecoration: 'none',
textIndent: 0,
textShadow: 'none',
textTransform: 'none',
top: 'auto',
transform: 'none',
transformOrigin: '50% 50% 0',
transformStyle: 'flat',
transition: 'none 0s ease 0s',
userSelect: 'auto',
verticalAlign: 'baseline',
whiteSpace: 'normal',
widows: 2,
width: 'auto',
wordSpacing: 'normal',
zIndex: 'auto'
};
/**
* The `reset` mixin resets all css properties to their browser defaults, plus many to
* theme-specific values. This ensures an element is not inheriting any inappropriate styles.
*
* ##### Example (styled-components)
* ```css
* .myButton {
* ${props => props.theme.mixins.reset('inline-block')};
* }
* ```
* @name reset
* @kind function
* @param {string} [display=inline] Set the `display` property (block, inline-block, …)
* @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
*/
/**
* The `reset` mixin resets css properties to their browser defaults, plus many to
* theme-specific values. This ensures an element is not inheriting inappropriate styles.
*
* ##### Example
* ```js
* import styled from 'styled-components';
* import { reset } from '@splunk/themes/mixins';
*
* const myBlock = styled.div`
* ${reset('block')};
* `
* ```
* @name reset
* @kind function
* @param {string} [display=inline] Set the `display` property (block, inline-block, …)
* @public
*/
var reset = function reset() {
var display = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'inline';
return function () {
var display = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'inline';
var full = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var all = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
return _objectSpread(_objectSpread(_objectSpread({}, full ? fullReset : {}), all ? {
all: all
} : {}), {
borderWidth: '1px',
boxSizing: 'border-box',
color: variables.textColor,
cursor: 'inherit',
display: display,
fontFamily: variables.fontFamily,
fontSize: variables.fontSize,
lineHeight: variables.lineHeight,
outline: "medium none ".concat(variables.focusColor),
visibility: 'inherit'
});
return (0, _styledComponents.css)(_templateObject(), (0, _pick["default"])({
enterprise: _variables["default"].textColor,
prisma: _variables["default"].contentColorDefault
}), display, _variables["default"].fontFamily, _variables["default"].fontSize, _variables["default"].lineHeight, _variables["default"].focusColor);
};
}
};
/**

@@ -157,7 +81,10 @@ * `clearfix` is used on a container to ensure its height is at least as tall as any floating

*
* ##### Example (styled-components)
* ``` css
* .myContainer {
* ${props => props.theme.mixins.clearfix()};
* }
* ##### Example
* ```js
* import styled from 'styled-components';
* import { clearfix } from '@splunk/themes/mixins';
*
* const myBlock = styled.div`
* ${clearfix()};
* `
* ```

@@ -168,2 +95,4 @@ * @public

exports.reset = reset;
function clearfix() {

@@ -181,8 +110,11 @@ return {

*
* ##### Example (styled-components)
* ``` css
* .myButton {
* ${props => props.theme.mixins.ellipsis()};
* display: inline-block;
* }
* ##### Example
* ```js
* import styled from 'styled-components';
* import { ellipsis } from '@splunk/themes/mixins';
*
* const myBlock = styled.div`
* ${clearfix()};
* width: 300px;
* `
* ```

@@ -203,9 +135,15 @@ * @public

*
* ##### Example (styled-components)
* ```css
* ‍@media print {
* .myElement {
* ${props => props.theme.mixins.printWidth100Percent()};
* ##### Example
* ```js
* import styled from 'styled-components';
* import { printWidth100Percent } from '@splunk/themes/mixins';
*
* const myBlock = styled.div`
* @media print {
* .myElement {
* ${printWidth100Percent()};
* }
* }
* }
* `
* ```

@@ -226,7 +164,12 @@ * @public

*
* ##### Example (styled-components)
* ```css
* ‍@media print {
* .myElement {
* ${props => props.theme.mixins.printHide()};
* ##### Example
* ```js
* import styled from 'styled-components';
* import { printHide } from '@splunk/themes/mixins';
*
* const myBlock = styled.div`
* @media print {
* .myElement {
* ${printHide()};
* }
* }

@@ -247,7 +190,12 @@ * }

*
* ##### Example (styled-components)
* ```css
* ‍@media print {
* .myElement {
* ${props => props.theme.mixins.printNoBackground()};
* ##### Example
* ```js
* import styled from 'styled-components';
* import { printNoBackground } from '@splunk/themes/mixins';
*
* const myBlock = styled.div`
* @media print {
* .myElement {
* ${printNoBackground()};
* }
* }

@@ -268,7 +216,12 @@ * }

*
* ##### Example (styled-components)
* ```css
* ‍@media print {
* .myElement {
* ${props => props.theme.mixins.printWrapAll()};
* ##### Example
* ```js
* import styled from 'styled-components';
* import { printWrapAll } from '@splunk/themes/mixins';
*
* const myBlock = styled.div`
* @media print {
* .myElement {
* ${printWrapAll()};
* }
* }

@@ -282,2 +235,3 @@ * }

function printWrapAll() {
// TS: have to assert as CSSObject because csstype doesn't allow !important
return {

@@ -293,4 +247,6 @@ wordBreak: 'break-all !important',

*
* ##### Example (styled-components)
* ``` css
* ##### Example
* ``` js
* import screenReaderContent from '@splunk/themes/mixins';
*
* .myElement {

@@ -316,22 +272,77 @@ * ${props => props.theme.mixins.screenReaderContent()};

}
/**
* Calculates how one color would appear over another using a normal blend mode.
* Colors can either be strings or functions, such as variable functions.
*
* ##### Example (styled-components)
* ```css
* .myButton {
* ${props => props.theme.mixins.overlayColors('#fff', 'rgba(0,0,0,0.5'))};
* }
* ##### Example
* ```js
* import styled from 'styled-components';
* import { overlayColors } from '@splunk/themes/mixins';
* import { interactiveColorPrimary, interactiveColorOverlaySelected } from '@splunk/themes/variables';
*
* const myButton = styled.button`
* background: ${overlayColors(interactiveColorPrimary, interactiveColorOverlaySelected)};
* `
* ```
* @name overlayColors
* @kind function
* @param {string} background
* @param {string} foreground The color to overlay over the background.
* @param {string|function} background
* @param {string|function} foreground The color to overlay over the background.
* @public
*/
function overlayColors(c1, c2) {
return function (props) {
var c1Value = typeof c1 === 'function' ? c1(props) : c1;
var c2Value = typeof c2 === 'function' ? c2(props) : c2;
var c3 = (0, _colorBlend.normal)((0, _tinycolor["default"])(c1Value).toRgb(), (0, _tinycolor["default"])(c2Value).toRgb());
return (0, _tinycolor["default"])(c3).toRgbString();
};
}
/**
* Sets the alpha value on a given color.
*
* ##### Example
* ```js
* import styled from 'styled-components';
* import { colorWithAlpha } from '@splunk/themes/mixins';
* import { interactiveColorPrimary } from '@splunk/themes/variables';
*
* const myButton = styled.button`
* background: ${colorWithAlpha(interactiveColorPrimary, 0.5)};
* `
* ```
* @name colorWithAlpha
* @kind function
* @param {string|function} color
* @param {number} alpha The alpha value accepts range between 0-1.
* @public
*/
function overlayColors(c1, c2) {
var c3 = (0, _colorBlend.normal)((0, _tinycolor["default"])(c1).toRgb(), (0, _tinycolor["default"])(c2).toRgb());
return (0, _tinycolor["default"])(c3).toRgbString();
}
function colorWithAlpha(color, alpha) {
return function (props) {
var colorValue = typeof color === 'function' ? color(props) : color;
if (false && (alpha < 0 || alpha > 1)) {
// eslint-disable-next-line no-console
console.warn("The alpha value \"".concat(alpha, "\" is not within acceptable 0-1 range."));
}
return (0, _tinycolor["default"])(colorValue).setAlpha(alpha).toRgbString();
};
}
var _default = {
reset: reset,
clearfix: clearfix,
ellipsis: ellipsis,
printWidth100Percent: printWidth100Percent,
printHide: printHide,
printNoBackground: printNoBackground,
printWrapAll: printWrapAll,
screenReaderContent: screenReaderContent,
colorWithAlpha: colorWithAlpha,
overlayColors: overlayColors
};
exports["default"] = _default;

42

package.json
{
"name": "@splunk/themes",
"version": "0.6.1",
"version": "0.7.0",
"description": "Theme variables and mixins for the Splunk design language",
"scripts": {
"build": "babel src -d . --ignore src/babel-plugin-base64-png",
"lint": "eslint src ",
"build": "cross-env NODE_ENV=production babel src -d . --ignore src/babel-plugin-base64-png,src/tests --extensions .js,.ts,.tsx && yarn types:build",
"lint": "eslint src --ext \".ts,.tsx,.js,.jsx\"",
"lint:ci": "yarn run lint -- -f junit -o test-reports/lint-results.xml",
"start": "babel src -d . --watch --ignore src/babel-plugin-base64-png"
"start": "babel src -d . --watch --ignore src/babel-plugin-base64-png,src/tests --extensions .js,.ts,.tsx",
"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=json",
"test:watch": "jest --watch",
"types:build": "tsc",
"types:start": "yarn types:build --watch"
},
"peerDependencies": {
"react": "^16.8",
"styled-components": "^5.1"
},
"peerDependenciesMeta": {
"react": {
"optional": true
},
"styled-components": {
"optional": true
}
},
"license": "Apache-2.0",
"author": "Splunk Inc.",
"dependencies": {
"@types/lodash": "^4.14.156",
"@types/react": "^16.9.38",
"@types/styled-components": "^5.1.0",
"@types/tinycolor2": "^1.4.2",
"color-blend": "^2.0.9",
"lodash": "^4.17.14",
"tinycolor2": "^1.4.1"

@@ -22,4 +44,10 @@ },

"@splunk/eslint-config": "^4.0.0",
"@typescript-eslint/eslint-plugin": "^3.4.0",
"@typescript-eslint/parser": "^3.4.0",
"babel-eslint": "^10.1.0",
"babel-plugin-transform-define": "^2.0.0",
"chai": "^3.5.0",
"cross-env": "^6.0.3",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint": "^7.4.0",

@@ -31,3 +59,7 @@ "eslint-config-airbnb": "^18.2.0",

"eslint-plugin-react": "^7.20.3",
"eslint-plugin-react-hooks": "^4.0.5"
"eslint-plugin-react-hooks": "^4.0.5",
"jest": "^25.1.0",
"react": "^16.12.0",
"styled-components": "^5.1.1",
"typescript": "^4.0.5"
},

@@ -34,0 +66,0 @@ "engines": {

79

README.md
# @splunk/themes
A collection of Splunk software theme variables and mixins. This package is framework-agnostic. Themes consist
of plain objects containing primitives such as strings and numbers. Functions are used for mixins.
A collection of Splunk software theme variables and mixins. This package provides functions that can be useful in React, styled-components and other frameworks.
Themes consist of plain objects containing primitives such as strings and numbers. Functions are used for mixins.

@@ -9,57 +9,52 @@ ## Install

Install the package:
```
```bash
yarn add @splunk/themes
-or-
npm install @splunk/themes
```
## Usage
`react@^16.8` and `styled-components@^5.1"` are required peer dependencies for all capabilities except `getTheme()`.
Every theme is delivered as a single module exporting an object.
## React Usage
A theme context is created at the root of the application using `SplunkThemeProvider`.
```js
import themeEnterprise from '@splunk/themes/enterprise';
import themeEnterpriseDark from '@splunk/themes/enterpriseDark';
import themeLite from '@splunk/themes/lite';
import themeScp from '@splunk/themes/scp';
import themeScpLight from '@splunk/themes/scpLight';
import SplunkThemeProvider from '@splunk/themes/SplunkThemeProvider';
<SplunkThemeProvider family="prisma" density="compact" colorScheme="light">
...
</SplunkThemeProvider>;
```
Avoid hardcoding theme choices into an application or a component. Higher-level packages handle
theme selection automatically. Manually determining the active theme depends on the environment.
For example, recent versions of Splunk Enterprise provide `window.$C.SPLUNK_UI_THEME`.
## Styled Components Usage
## Structure
Components are themed using `pick()`, `variables`, `mixins`.
```js
import { pick, variables, mixins } from '@splunk/themes';
import styled from 'styled-components';
Theme modules contain variables following a `name: string|number` scheme:
```js
{
brandColor: '#5cc05c',
mixins: { [...] }
overlayShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
zindexModal: 1050,
}
const Wrapper = styled.div`
${mixins.reset()};
color: ${pick({
enterprise: variables.textColor,
prisma: variables.contentColorDefault
})};
`;
```
Each theme includes meta data:
## Generic Usage
Theme variables are also available outside of React and styled-components.
```js
{
meta: {
id: 'scpLight', // enterprise, enterpriseDark, lite, scp, scpLight
name: 'SCP • Light', // display name
family: 'scp', // scp or enterprise
type: 'light', // light or dark
},
[...]
}
```
import getTheme from '@splunk/themes/getTheme';
`mixins` is a nested object. Mixins are always functions:
```js
{
mixins: {
reset: function(display),
clearfix: function(),
},
[...]
}
const baseTheme = getTheme({family: 'prisma', colorScheme: 'light', density: 'compact' });
console.log(baseTheme.family, baseTheme.focusColor);
```
base.js
enterprise.js
enterpriseDark.js
lite.js
scp.js
scpBase.js
scpLight.js