@splunk/themes 1.0.0-rc.1 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +122 -0
- package/README.md +1 -1
- package/enterprise/dark.js +3 -3
- package/enterprise/light.js +8 -8
- package/package.json +8 -7
- package/prisma/dark.js +6 -6
- package/prisma/light.js +6 -6
- package/CHANGELOG.v1.md +0 -113
- package/mixins/tests/prose.unit.js +0 -49
- package/mixins/tests/typography.unit.js +0 -247
- package/mixins/tests/utilityMixins.unit.js +0 -97
- package/storybook-addon-splunk-themes/tests/util.unit.js +0 -62
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,128 @@
|
|
|
1
1
|
Change Log
|
|
2
2
|
============
|
|
3
3
|
|
|
4
|
+
1.0.0 - June 3, 2025
|
|
5
|
+
----------
|
|
6
|
+
* Includes all changes from `1.0.0-beta` and `1.0.0-rc` releases.
|
|
7
|
+
|
|
8
|
+
Bug fixes:
|
|
9
|
+
* Color variables `backgroundColorPage`, `backgroundColorNavigation`,`backgroundColorSideBar`,`neutral50`,`neutral100` and `neutral200` in Enterprise light have been updated to align better with Prisma themes (SUI-7584).
|
|
10
|
+
* `@types/react` peer dependency now includes `^16 | ^17` and no longer blocks installation using `npm` in React 16 or 17 environments (SUI-7838).
|
|
11
|
+
* Color variables for `actionColorBorderSecondary*`, `actionColorBackgroundSecondary*`, and `interactiveColorBorderDisabled` have been updated to align with both Prisma and Enterprise themes (SUI-7839).
|
|
12
|
+
|
|
13
|
+
1.0.0-rc.2 - May 28, 2025
|
|
14
|
+
----------
|
|
15
|
+
* Release candidate 2
|
|
16
|
+
|
|
17
|
+
1.0.0-rc.1 - May 14, 2025
|
|
18
|
+
----------
|
|
19
|
+
API Changes:
|
|
20
|
+
* `SplunkThemeProvider`'s default `density` has been changed from `"comfortable"` to `"compact"` (SUI-5709).
|
|
21
|
+
|
|
22
|
+
1.0.0-beta.5 - May 7, 2025
|
|
23
|
+
----------
|
|
24
|
+
New Features:
|
|
25
|
+
* New `interactiveColorAccentErrorWeak` variable (SUI-7757).
|
|
26
|
+
* `typography` has reintroduced the `withReset` prop, which defaults to `false`. When set to `true`, it removes all browser-default styles and applies theme-specific defaults (SUI-7638).
|
|
27
|
+
|
|
28
|
+
1.0.0-beta.4 - April 22, 2025
|
|
29
|
+
----------
|
|
30
|
+
New Features:
|
|
31
|
+
* New `inputBorderWidth` variable (SUI-7384).
|
|
32
|
+
|
|
33
|
+
Bug Fixes:
|
|
34
|
+
* Fixes broken CSS for Splunk Magnetic's `backgroundColorNavigation` override (SUI-7653).
|
|
35
|
+
|
|
36
|
+
Deprecations:
|
|
37
|
+
* `statusColor*`s have been deprecated. Instead use the appropriate `notificationColor*` or `severityColor*`(SUI-7303)
|
|
38
|
+
|
|
39
|
+
API Changes:
|
|
40
|
+
* `typescript` version is now `^5.8.3` (SUI-7601).
|
|
41
|
+
* `borderActiveColor` has been deprecated. (SUI-7633).
|
|
42
|
+
* Use `interactiveColorBorderActive` for Data Entry components or `actionColorBorderSecondaryActive` for Buttons.
|
|
43
|
+
* `backgroundColorHover` have been deprecated. (SUI-7633).
|
|
44
|
+
* Use `interactiveColorOverlayHover` for Data Entry components or `actionColorBackgroundSecondaryHover` for Buttons.
|
|
45
|
+
* `hoverShadow` has been deprecated. See notes on `backgroundColorHover` for hover affordances. (SUI-7621)
|
|
46
|
+
|
|
47
|
+
1.0.0-beta.3 - April 2, 2025
|
|
48
|
+
----------
|
|
49
|
+
New Features:
|
|
50
|
+
* New `neutral50` variable (SUI-7384).
|
|
51
|
+
* New `notificationColor` variables (SUI-7303).
|
|
52
|
+
* New `severityColor` variables (SUI-7303).
|
|
53
|
+
|
|
54
|
+
Bug Fixes:
|
|
55
|
+
* Updates `interactiveColorBackground` and `interactiveColorBackgroundDisabled` to be transparent in all themes (SUI-7347).
|
|
56
|
+
* The `@types/react` peer dependency is now correctly set to `^18.2.0` (SUI-7548).
|
|
57
|
+
|
|
58
|
+
Deprecations:
|
|
59
|
+
* `interactiveColorPrimary` has been deprecated (SUI-3568).
|
|
60
|
+
|
|
61
|
+
1.0.0-beta.2 - March 5, 2025
|
|
62
|
+
----------
|
|
63
|
+
New Features:
|
|
64
|
+
* New `contentColorLink` variable (SUI-3568).
|
|
65
|
+
* The data-viz variables are supported in all themes (SUI-3568).
|
|
66
|
+
|
|
67
|
+
Deprecations:
|
|
68
|
+
* `linkColor` and `linkColorHover` have been deprecated. Instead use `contentColorLink` (SUI-3568).
|
|
69
|
+
|
|
70
|
+
API Changes:
|
|
71
|
+
* `accentColor` variable has been removed from Prisma themes (SUI-3568).
|
|
72
|
+
* `borderColor`, `borderColorStrong`, and `borderColorWeak` have had alpha removed from their values (SUI-7340).
|
|
73
|
+
* `embossShadow`, `overlayShadow`, `dragShadow`, and `modalShadow` variables have been updated in Enterprise themes to match Prisma (SUI-7334).
|
|
74
|
+
* Enterprise only tokens have been deprecated: `brandColor*`, `gray*`, `accentColor*`, `errorColor*`, `alertColor*`, `warningColor*`, `successColor*`, `infoColor*`, `diverging*Color*`, and `cat*Color*`.
|
|
75
|
+
|
|
76
|
+
1.0.0-beta.1 - February 20, 2025
|
|
77
|
+
----------
|
|
78
|
+
New Features:
|
|
79
|
+
* Enterprise themes now support the `interactiveColorOverlayHover` Prisma alias (SUI-6289).
|
|
80
|
+
* All themes now support color variable `interactiveColorAccent` (SUI-6304).
|
|
81
|
+
* All themes now support color variable `interactiveColorAccentError` (SUI-6395).
|
|
82
|
+
* Enterprise themes now support the `interactiveColorOverlaySelected` Prisma alias.
|
|
83
|
+
* All themes now support color variable `contentBackgroundColorNegativeWeak` (SUI-6395).
|
|
84
|
+
* Enterprise themes now support color variable `contentColorInverted` (SUI-6530).
|
|
85
|
+
* All themes now support color variable `contentColorNegative` (SUI-6408).
|
|
86
|
+
* Prisma themes now support color variable `accentColor` (SUI-6657).
|
|
87
|
+
* All themes now support new `actionColor` tokens (SUI-6616).
|
|
88
|
+
* All themes now support color variable `contentColorAccent` (SUI-6711).
|
|
89
|
+
* All themes now support color variables `contentColorInfo`, `contentColorPositive`, and `contentColorWarning` (SUI-6830).
|
|
90
|
+
* Enterprise themes now support the `interactiveColorOverlayActive` (SUI-6870).
|
|
91
|
+
* All themes now support color variable `interactiveColorAccentErrorStrong` (SUI-6869).
|
|
92
|
+
* All themes now support color variable `interactiveColorBackground` (SUI-6983).
|
|
93
|
+
* New `layout` mixin (SUI-6678).
|
|
94
|
+
* Enterprise themes now support color variable `backgroundColorSidebar` (SUI-7102).
|
|
95
|
+
|
|
96
|
+
Deprecations:
|
|
97
|
+
* Enterprise theme tokens `textColor`, `textGray`, and `textDisabledColor` have been deprecated (SUI-6160).
|
|
98
|
+
* Enterprise theme token `backgroundColor` has been deprecated (SUI-6656).
|
|
99
|
+
* `accentColorPositive`, `accentColorWarning`, `accentColorAlert`, and `accentColorNegative` have been deprecated (SUI-3658).
|
|
100
|
+
|
|
101
|
+
API Changes:
|
|
102
|
+
* `react` and `react-dom` peer dependencies are now `"^16.8.0 || ^17.0.0 || ^18.0.0"`.
|
|
103
|
+
* `px` sizing for `variables.fontSize*` and `mixins.typography` have been replaced with `rem` sizing (SUI-5509).
|
|
104
|
+
* This results in minor differences in text sizing; but is required to meet WCAG 1.4.4 and WCAG 1.4.10.
|
|
105
|
+
* `typography` `size` param no longer supports `56` `36` `32` and `10`.
|
|
106
|
+
* `variables.lineHeight` is no longer defined in `px` to improve readability of font at all scales (SUI-5509).
|
|
107
|
+
* `typography`'s mixin for `Title5`'s has been updated to text color `variables.contentColorActive` in Prisma theme (SUI-5685).
|
|
108
|
+
* This change affects `Heading` and `Typography` components.
|
|
109
|
+
* The font size and line height no longer change with density. The default font-size in Enterprise Compact now is 14px (SUI-5508).
|
|
110
|
+
* `typography`'s `line-height`, `size`, and `font-weight` values have been consolidated between Enterprise and Prisma themes (SUI-5684).
|
|
111
|
+
* `typography`'s `withReset` prop has been removed (SUI-5686).
|
|
112
|
+
* `variables.activeBorder` has been removed (SUI-6362).
|
|
113
|
+
* Spacing variables in Enterprise themes are now aligned with Prisma themes (SUI-6530).
|
|
114
|
+
* `spacingXSmall`, `spacingSmall`, `spacingMedium`, `spacingLarge`, `spacingXLarge`, `spacingXXLarge`, `spacingXXXLarge` have been updated to match Prisma themes.
|
|
115
|
+
* `spacingQuarter`, `spacingHalf`, and `spacing` are deprecated and should not be used.
|
|
116
|
+
* Enterprise theme `statusColor*` variables have been shifted to align brightness values with Prisma themes (SUI-6348).
|
|
117
|
+
* Enterprise theme's `focusShadow` variable has been updated to match Prisma (SUI-6481).
|
|
118
|
+
* Enterprise theme's `focusShadowInset` variable has been updated to match Prisma (SUI-6487).
|
|
119
|
+
* `typography` supports a new scale for line-height that uses unitless values (SUI-6593).
|
|
120
|
+
* `typography` no longer support pixel values for line-height (SUI-6593).
|
|
121
|
+
* `typography` no longer supports the `title7` and `footnote` variants (SUI-6593).
|
|
122
|
+
* `typography` parameters now supports `family: "title"`.
|
|
123
|
+
* `fontSizeXLarge` size has been changed (SUI-6593).
|
|
124
|
+
* Enterprise themes support the `contentColorActive`, `contentColorDefault`, `contentColorDisabled`, `contentColorInverted`, and `contentColorMuted` tokens (SUI-6160).
|
|
125
|
+
|
|
4
126
|
0.24.0 - May 6, 2025
|
|
5
127
|
----------
|
|
6
128
|
Bug Fixes:
|
package/README.md
CHANGED
|
@@ -15,7 +15,7 @@ npm install @splunk/themes
|
|
|
15
15
|
|
|
16
16
|
```
|
|
17
17
|
|
|
18
|
-
`react@^
|
|
18
|
+
`react@^18` and `styled-components@^5"` are required peer dependencies for all capabilities except `getTheme()`.
|
|
19
19
|
|
|
20
20
|
## React Usage
|
|
21
21
|
A theme context is created at the root of the application using `SplunkThemeProvider`.
|
package/enterprise/dark.js
CHANGED
|
@@ -77,7 +77,7 @@ var actionColors = {
|
|
|
77
77
|
actionColorBackgroundPrimaryDisabled: '#163b1b',
|
|
78
78
|
actionColorBackgroundPrimaryHover: '#6eba78',
|
|
79
79
|
actionColorBackgroundSecondary: 'transparent',
|
|
80
|
-
actionColorBackgroundSecondaryActive: 'rgba(
|
|
80
|
+
actionColorBackgroundSecondaryActive: 'rgba(0, 0, 0, 0.2)',
|
|
81
81
|
actionColorBackgroundSecondaryDisabled: 'transparent',
|
|
82
82
|
actionColorBackgroundSecondaryHover: 'rgba(255, 255, 255, 0.05)',
|
|
83
83
|
actionColorBackgroundSubtle: 'transparent',
|
|
@@ -94,7 +94,7 @@ var actionColors = {
|
|
|
94
94
|
actionColorBackgroundDestructiveSecondaryHover: '#47221f',
|
|
95
95
|
actionColorBorderSecondary: _light["default"].gray60,
|
|
96
96
|
actionColorBorderSecondaryActive: _light["default"].gray60,
|
|
97
|
-
actionColorBorderSecondaryDisabled:
|
|
97
|
+
actionColorBorderSecondaryDisabled: 'rgba(255, 255, 255, 0.3)',
|
|
98
98
|
actionColorBorderSecondaryHover: 'rgba(255, 255, 255, 0.7)',
|
|
99
99
|
actionColorBorderDestructiveSecondary: '#ff776b',
|
|
100
100
|
actionColorBorderDestructiveSecondaryActive: '#ff8a80',
|
|
@@ -105,7 +105,7 @@ var interactiveColors = {
|
|
|
105
105
|
interactiveColorBorder: _light["default"].gray60,
|
|
106
106
|
interactiveColorBorderActive: _light["default"].gray60,
|
|
107
107
|
interactiveColorBorderHover: 'rgba(255, 255, 255, 0.7)',
|
|
108
|
-
interactiveColorBorderDisabled:
|
|
108
|
+
interactiveColorBorderDisabled: 'rgba(255, 255, 255, 0.3)',
|
|
109
109
|
interactiveColorOverlaySelected: 'rgba(255, 255, 255, 0.1)',
|
|
110
110
|
interactiveColorOverlayHover: 'rgba(255, 255, 255, 0.05)',
|
|
111
111
|
interactiveColorOverlayActive: 'rgba(0, 0, 0, 0.2)',
|
package/enterprise/light.js
CHANGED
|
@@ -49,9 +49,9 @@ var deprecatedEnterpriseColors = {
|
|
|
49
49
|
};
|
|
50
50
|
var neutralColors = {
|
|
51
51
|
white: '#ffffff',
|
|
52
|
-
neutral50: '#
|
|
53
|
-
neutral100:
|
|
54
|
-
neutral200:
|
|
52
|
+
neutral50: '#e8ebee',
|
|
53
|
+
neutral100: '#e1e5ea',
|
|
54
|
+
neutral200: '#dae0e7',
|
|
55
55
|
neutral300: deprecatedEnterpriseColors.gray92,
|
|
56
56
|
neutral400: _tinycolor["default"].mix(deprecatedEnterpriseColors.gray92, deprecatedEnterpriseColors.gray80).toRgbString(),
|
|
57
57
|
neutral500: deprecatedEnterpriseColors.gray80,
|
|
@@ -109,12 +109,12 @@ var syntaxColors = {
|
|
|
109
109
|
var backgroundColors = {
|
|
110
110
|
backgroundColorDialog: neutralColors.white,
|
|
111
111
|
backgroundColorFloating: neutralColors.black,
|
|
112
|
-
backgroundColorNavigation:
|
|
113
|
-
backgroundColorPage:
|
|
112
|
+
backgroundColorNavigation: '#e4e8ec',
|
|
113
|
+
backgroundColorPage: '#f2f4f5',
|
|
114
114
|
backgroundColorPopup: neutralColors.white,
|
|
115
115
|
backgroundColorScrim: "rgba(255, 255, 255, 0.75)",
|
|
116
116
|
backgroundColorSection: neutralColors.white,
|
|
117
|
-
backgroundColorSidebar:
|
|
117
|
+
backgroundColorSidebar: '#eaedf1'
|
|
118
118
|
};
|
|
119
119
|
var shadows = {
|
|
120
120
|
focusShadow: "0 0 0 2px ".concat(backgroundColors.backgroundColorPage, ", 0 0 0 5px ").concat(usageColors.focusColor),
|
|
@@ -160,7 +160,7 @@ var actionColors = {
|
|
|
160
160
|
actionColorBackgroundDestructiveSecondaryHover: '#fad6d1',
|
|
161
161
|
actionColorBorderSecondary: deprecatedEnterpriseColors.gray60,
|
|
162
162
|
actionColorBorderSecondaryActive: deprecatedEnterpriseColors.gray45,
|
|
163
|
-
actionColorBorderSecondaryDisabled:
|
|
163
|
+
actionColorBorderSecondaryDisabled: 'rgba(0, 0, 0, 0.3)',
|
|
164
164
|
actionColorBorderSecondaryHover: 'rgba(0, 0, 0, 0.6)',
|
|
165
165
|
actionColorBorderDestructiveSecondary: '#c84535',
|
|
166
166
|
actionColorBorderDestructiveSecondaryActive: '#a1382b',
|
|
@@ -171,7 +171,7 @@ var interactiveColors = {
|
|
|
171
171
|
interactiveColorBorder: deprecatedEnterpriseColors.gray60,
|
|
172
172
|
interactiveColorBorderActive: deprecatedEnterpriseColors.gray45,
|
|
173
173
|
interactiveColorBorderHover: 'rgba(0, 0, 0, 0.6)',
|
|
174
|
-
interactiveColorBorderDisabled:
|
|
174
|
+
interactiveColorBorderDisabled: 'rgba(0, 0, 0, 0.3)',
|
|
175
175
|
interactiveColorOverlaySelected: 'rgba(0, 0, 0, 0.04)',
|
|
176
176
|
interactiveColorOverlayHover: 'rgba(0, 0, 0, 0.03)',
|
|
177
177
|
interactiveColorOverlayActive: 'rgba(0, 0, 0, 0.07)',
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@splunk/themes",
|
|
3
|
-
"version": "1.0.0
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "Theme variables and mixins for the Splunk design language",
|
|
5
5
|
"main": "./index.js",
|
|
6
6
|
"types": "./types/index.d.ts",
|
|
7
7
|
"scripts": {
|
|
8
|
-
"babel": "babel src -d . --ignore src/babel-plugin-base64-png,src
|
|
8
|
+
"babel": "babel src -d . --ignore src/babel-plugin-base64-png,src/**/tests --ignore \"**/docs\" --extensions .js,.ts,.tsx",
|
|
9
9
|
"build": "cross-env NODE_ENV=production yarn babel && yarn types:build",
|
|
10
10
|
"docs": "NODE_ENV=production webpack --config docs.gen.webpack.config.js",
|
|
11
11
|
"docs:publish": "eval $(splunk-docs-package docs) && artifact-ci publish generic $DOCS_GEN_OUTPUT_NAME $DOCS_GEN_REMOTE_PATH",
|
|
@@ -16,7 +16,6 @@
|
|
|
16
16
|
"lint:ci": "yarn run lint -- -f junit -o test-reports/lint-results.xml",
|
|
17
17
|
"start": "yarn babel --watch",
|
|
18
18
|
"test": "jest",
|
|
19
|
-
"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",
|
|
20
19
|
"test:watch": "jest --watch",
|
|
21
20
|
"pretypes:build": "rm -rf ./types",
|
|
22
21
|
"types:build": "tsc --emitDeclarationOnly --declaration",
|
|
@@ -29,7 +28,7 @@
|
|
|
29
28
|
"@storybook/react": ">= 7.x",
|
|
30
29
|
"@storybook/theming": ">= 7.x",
|
|
31
30
|
"@types/lodash": "^4.14.156",
|
|
32
|
-
"@types/react": "^18.2.0",
|
|
31
|
+
"@types/react": "^16 | ^17 | 18.2.0",
|
|
33
32
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
34
33
|
"styled-components": "^5.3.10"
|
|
35
34
|
},
|
|
@@ -79,8 +78,9 @@
|
|
|
79
78
|
"@storybook/manager-api": "^7.6.17",
|
|
80
79
|
"@storybook/react": "^7.6.17",
|
|
81
80
|
"@storybook/theming": "^7.6.17",
|
|
82
|
-
"@testing-library/
|
|
83
|
-
"@testing-library/
|
|
81
|
+
"@testing-library/dom": "^10.4.0",
|
|
82
|
+
"@testing-library/jest-dom": "^6.6.3",
|
|
83
|
+
"@testing-library/react": "^16.3.0",
|
|
84
84
|
"@types/react": "^18.2.0",
|
|
85
85
|
"@types/tinycolor2": "^1.4.2",
|
|
86
86
|
"@typescript-eslint/eslint-plugin": "^8.29.1",
|
|
@@ -95,7 +95,8 @@
|
|
|
95
95
|
"eslint-plugin-jsx-a11y": "^6.10.0",
|
|
96
96
|
"eslint-plugin-react": "^7.36.1",
|
|
97
97
|
"eslint-plugin-react-hooks": "^4.6.2",
|
|
98
|
-
"jest": "^
|
|
98
|
+
"jest": "^29.7.0",
|
|
99
|
+
"jest-environment-jsdom": "^29.7.0",
|
|
99
100
|
"jest-styled-components": "^7.0.8",
|
|
100
101
|
"react": "^18.2.0",
|
|
101
102
|
"styled-components": "^5.3.10",
|
package/prisma/dark.js
CHANGED
|
@@ -50,9 +50,9 @@ var actionColors = {
|
|
|
50
50
|
actionColorBackgroundPrimaryDisabled: '#103460',
|
|
51
51
|
actionColorBackgroundPrimaryHover: '#6baeff',
|
|
52
52
|
actionColorBackgroundSecondary: 'transparent',
|
|
53
|
-
actionColorBackgroundSecondaryActive: '
|
|
53
|
+
actionColorBackgroundSecondaryActive: 'rgba(0, 0, 0, 0.2)',
|
|
54
54
|
actionColorBackgroundSecondaryDisabled: 'transparent',
|
|
55
|
-
actionColorBackgroundSecondaryHover: '
|
|
55
|
+
actionColorBackgroundSecondaryHover: 'rgba(255, 255, 255, 0.05)',
|
|
56
56
|
actionColorBackgroundSubtle: 'transparent',
|
|
57
57
|
actionColorBackgroundSubtleActive: '#0a2f5c',
|
|
58
58
|
actionColorBackgroundSubtleDisabled: 'transparent',
|
|
@@ -65,10 +65,10 @@ var actionColors = {
|
|
|
65
65
|
actionColorBackgroundDestructiveSecondaryActive: '#471f1f',
|
|
66
66
|
actionColorBackgroundDestructiveSecondaryDisabled: 'transparent',
|
|
67
67
|
actionColorBackgroundDestructiveSecondaryHover: '#471f1f',
|
|
68
|
-
actionColorBorderSecondary: '
|
|
69
|
-
actionColorBorderSecondaryActive: '
|
|
70
|
-
actionColorBorderSecondaryDisabled: '
|
|
71
|
-
actionColorBorderSecondaryHover: '
|
|
68
|
+
actionColorBorderSecondary: 'rgba(255, 255, 255, 0.5)',
|
|
69
|
+
actionColorBorderSecondaryActive: 'rgba(255, 255, 255, 0.5)',
|
|
70
|
+
actionColorBorderSecondaryDisabled: 'rgba(255, 255, 255, 0.3)',
|
|
71
|
+
actionColorBorderSecondaryHover: 'rgba(255, 255, 255, 0.7)',
|
|
72
72
|
actionColorBorderDestructiveSecondary: '#ff4242',
|
|
73
73
|
actionColorBorderDestructiveSecondaryActive: '#ff6b6b',
|
|
74
74
|
actionColorBorderDestructiveSecondaryDisabled: '#561a1a',
|
package/prisma/light.js
CHANGED
|
@@ -50,9 +50,9 @@ var actionColors = {
|
|
|
50
50
|
actionColorBackgroundPrimaryDisabled: '#72b2fe',
|
|
51
51
|
actionColorBackgroundPrimaryHover: '#024ba2',
|
|
52
52
|
actionColorBackgroundSubtle: 'transparent',
|
|
53
|
-
actionColorBackgroundSecondaryActive: '
|
|
53
|
+
actionColorBackgroundSecondaryActive: 'rgba(0, 0, 0, 0.07)',
|
|
54
54
|
actionColorBackgroundSubtleDisabled: 'transparent',
|
|
55
|
-
actionColorBackgroundSecondaryHover: '
|
|
55
|
+
actionColorBackgroundSecondaryHover: 'rgba(0, 0, 0, 0.03)',
|
|
56
56
|
actionColorBackgroundSecondary: 'transparent',
|
|
57
57
|
actionColorBackgroundSubtleActive: '#cce3ff',
|
|
58
58
|
actionColorBackgroundSecondaryDisabled: 'transparent',
|
|
@@ -65,10 +65,10 @@ var actionColors = {
|
|
|
65
65
|
actionColorBackgroundDestructiveSecondaryActive: '#ffcccc',
|
|
66
66
|
actionColorBackgroundDestructiveSecondaryDisabled: 'transparent',
|
|
67
67
|
actionColorBackgroundDestructiveSecondaryHover: '#ffcccc',
|
|
68
|
-
actionColorBorderSecondary: '
|
|
69
|
-
actionColorBorderSecondaryActive: '
|
|
70
|
-
actionColorBorderSecondaryDisabled: '
|
|
71
|
-
actionColorBorderSecondaryHover: '
|
|
68
|
+
actionColorBorderSecondary: 'rgba(0, 0, 0, 0.48)',
|
|
69
|
+
actionColorBorderSecondaryActive: 'rgba(0, 0, 0, 0.5)',
|
|
70
|
+
actionColorBorderSecondaryDisabled: 'rgba(0, 0, 0, 0.3)',
|
|
71
|
+
actionColorBorderSecondaryHover: 'rgba(0, 0, 0, 0.6)',
|
|
72
72
|
actionColorBorderDestructiveSecondary: '#e00000',
|
|
73
73
|
actionColorBorderDestructiveSecondaryActive: '#a30000',
|
|
74
74
|
actionColorBorderDestructiveSecondaryDisabled: '#ff9999',
|
package/CHANGELOG.v1.md
DELETED
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
Change Log
|
|
2
|
-
============
|
|
3
|
-
|
|
4
|
-
1.0.0-rc.1 - May 14, 2025
|
|
5
|
-
----------
|
|
6
|
-
API Changes:
|
|
7
|
-
* `SplunkThemeProvider`'s default `density` has been changed from `"comfortable"` to `"compact"` (SUI-5709).
|
|
8
|
-
|
|
9
|
-
1.0.0-beta.5 - May 7, 2025
|
|
10
|
-
----------
|
|
11
|
-
New Features:
|
|
12
|
-
* New `interactiveColorAccentErrorWeak` variable (SUI-7757).
|
|
13
|
-
* `typography` has reintroduced the `withReset` prop, which defaults to `false`. When set to `true`, it removes all browser-default styles and applies theme-specific defaults (SUI-7638).
|
|
14
|
-
|
|
15
|
-
1.0.0-beta.4 - April 22, 2025
|
|
16
|
-
----------
|
|
17
|
-
New Features:
|
|
18
|
-
* New `inputBorderWidth` variable (SUI-7384).
|
|
19
|
-
|
|
20
|
-
Bug Fixes:
|
|
21
|
-
* Fixes broken CSS for Splunk Magnetic's `backgroundColorNavigation` override (SUI-7653).
|
|
22
|
-
|
|
23
|
-
Deprecations:
|
|
24
|
-
* `statusColor*`s have been deprecated. Instead use the appropriate `notificationColor*` or `severityColor*`(SUI-7303)
|
|
25
|
-
|
|
26
|
-
API Changes:
|
|
27
|
-
* `typescript` version is now `^5.8.3` (SUI-7601).
|
|
28
|
-
* `borderActiveColor` has been deprecated. (SUI-7633).
|
|
29
|
-
* Use `interactiveColorBorderActive` for Data Entry components or `actionColorBorderSecondaryActive` for Buttons.
|
|
30
|
-
* `backgroundColorHover` have been deprecated. (SUI-7633).
|
|
31
|
-
* Use `interactiveColorOverlayHover` for Data Entry components or `actionColorBackgroundSecondaryHover` for Buttons.
|
|
32
|
-
* `hoverShadow` has been deprecated. See notes on `backgroundColorHover` for hover affordances. (SUI-7621)
|
|
33
|
-
|
|
34
|
-
1.0.0-beta.3 - April 2, 2025
|
|
35
|
-
----------
|
|
36
|
-
New Features:
|
|
37
|
-
* New `neutral50` variable (SUI-7384).
|
|
38
|
-
* New `notificationColor` variables (SUI-7303).
|
|
39
|
-
* New `severityColor` variables (SUI-7303).
|
|
40
|
-
|
|
41
|
-
Bug Fixes:
|
|
42
|
-
* Updates `interactiveColorBackground` and `interactiveColorBackgroundDisabled` to be transparent in all themes (SUI-7347).
|
|
43
|
-
* The `@types/react` peer dependency is now correctly set to `^18.2.0` (SUI-7548).
|
|
44
|
-
|
|
45
|
-
Deprecations:
|
|
46
|
-
* `interactiveColorPrimary` has been deprecated (SUI-3568).
|
|
47
|
-
|
|
48
|
-
1.0.0-beta.2 - March 5, 2025
|
|
49
|
-
----------
|
|
50
|
-
New Features:
|
|
51
|
-
* New `contentColorLink` variable (SUI-3568).
|
|
52
|
-
* The data-viz variables are supported in all themes (SUI-3568).
|
|
53
|
-
|
|
54
|
-
Deprecations:
|
|
55
|
-
* `linkColor` and `linkColorHover` have been deprecated. Instead use `contentColorLink` (SUI-3568).
|
|
56
|
-
|
|
57
|
-
API Changes:
|
|
58
|
-
* `accentColor` variable has been removed from Prisma themes (SUI-3568).
|
|
59
|
-
* `borderColor`, `borderColorStrong`, and `borderColorWeak` have had alpha removed from their values (SUI-7340).
|
|
60
|
-
* `embossShadow`, `overlayShadow`, `dragShadow`, and `modalShadow` variables have been updated in Enterprise themes to match Prisma (SUI-7334).
|
|
61
|
-
* Enterprise only tokens have been deprecated: `brandColor*`, `gray*`, `accentColor*`, `errorColor*`, `alertColor*`, `warningColor*`, `successColor*`, `infoColor*`, `diverging*Color*`, and `cat*Color*`.
|
|
62
|
-
|
|
63
|
-
1.0.0-beta.1 - February 20, 2025
|
|
64
|
-
----------
|
|
65
|
-
New Features:
|
|
66
|
-
* Enterprise themes now support the `interactiveColorOverlayHover` Prisma alias (SUI-6289).
|
|
67
|
-
* All themes now support color variable `interactiveColorAccent` (SUI-6304).
|
|
68
|
-
* All themes now support color variable `interactiveColorAccentError` (SUI-6395).
|
|
69
|
-
* Enterprise themes now support the `interactiveColorOverlaySelected` Prisma alias.
|
|
70
|
-
* All themes now support color variable `contentBackgroundColorNegativeWeak` (SUI-6395).
|
|
71
|
-
* Enterprise themes now support color variable `contentColorInverted` (SUI-6530).
|
|
72
|
-
* All themes now support color variable `contentColorNegative` (SUI-6408).
|
|
73
|
-
* Prisma themes now support color variable `accentColor` (SUI-6657).
|
|
74
|
-
* All themes now support new `actionColor` tokens (SUI-6616).
|
|
75
|
-
* All themes now support color variable `contentColorAccent` (SUI-6711).
|
|
76
|
-
* All themes now support color variables `contentColorInfo`, `contentColorPositive`, and `contentColorWarning` (SUI-6830).
|
|
77
|
-
* Enterprise themes now support the `interactiveColorOverlayActive` (SUI-6870).
|
|
78
|
-
* All themes now support color variable `interactiveColorAccentErrorStrong` (SUI-6869).
|
|
79
|
-
* All themes now support color variable `interactiveColorBackground` (SUI-6983).
|
|
80
|
-
* New `layout` mixin (SUI-6678).
|
|
81
|
-
* Enterprise themes now support color variable `backgroundColorSidebar` (SUI-7102).
|
|
82
|
-
|
|
83
|
-
Deprecations:
|
|
84
|
-
* Enterprise theme tokens `textColor`, `textGray`, and `textDisabledColor` have been deprecated (SUI-6160).
|
|
85
|
-
* Enterprise theme token `backgroundColor` has been deprecated (SUI-6656).
|
|
86
|
-
* `accentColorPositive`, `accentColorWarning`, `accentColorAlert`, and `accentColorNegative` have been deprecated (SUI-3658).
|
|
87
|
-
|
|
88
|
-
API Changes:
|
|
89
|
-
* `react` and `react-dom` peer dependencies are now `"^16.8.0 || ^17.0.0 || ^18.0.0"`.
|
|
90
|
-
* `px` sizing for `variables.fontSize*` and `mixins.typography` have been replaced with `rem` sizing (SUI-5509).
|
|
91
|
-
* This results in minor differences in text sizing; but is required to meet WCAG 1.4.4 and WCAG 1.4.10.
|
|
92
|
-
* `typography` `size` param no longer supports `56` `36` `32` and `10`.
|
|
93
|
-
* `variables.lineHeight` is no longer defined in `px` to improve readability of font at all scales (SUI-5509).
|
|
94
|
-
* `typography`'s mixin for `Title5`'s has been updated to text color `variables.contentColorActive` in Prisma theme (SUI-5685).
|
|
95
|
-
* This change affects `Heading` and `Typography` components.
|
|
96
|
-
* The font size and line height no longer change with density. The default font-size in Enterprise Compact now is 14px (SUI-5508).
|
|
97
|
-
* `typography`'s `line-height`, `size`, and `font-weight` values have been consolidated between Enterprise and Prisma themes (SUI-5684).
|
|
98
|
-
* `typography`'s `withReset` prop has been removed (SUI-5686).
|
|
99
|
-
* `variables.activeBorder` has been removed (SUI-6362).
|
|
100
|
-
* Spacing variables in Enterprise themes are now aligned with Prisma themes (SUI-6530).
|
|
101
|
-
* `spacingXSmall`, `spacingSmall`, `spacingMedium`, `spacingLarge`, `spacingXLarge`, `spacingXXLarge`, `spacingXXXLarge` have been updated to match Prisma themes.
|
|
102
|
-
* `spacingQuarter`, `spacingHalf`, and `spacing` are deprecated and should not be used.
|
|
103
|
-
* Enterprise theme `statusColor*` variables have been shifted to align brightness values with Prisma themes (SUI-6348).
|
|
104
|
-
* Enterprise theme's `focusShadow` variable has been updated to match Prisma (SUI-6481).
|
|
105
|
-
* Enterprise theme's `focusShadowInset` variable has been updated to match Prisma (SUI-6487).
|
|
106
|
-
* `typography` supports a new scale for line-height that uses unitless values (SUI-6593).
|
|
107
|
-
* `typography` no longer support pixel values for line-height (SUI-6593).
|
|
108
|
-
* `typography` no longer supports the `title7` and `footnote` variants (SUI-6593).
|
|
109
|
-
* `typography` parameters now supports `family: "title"`.
|
|
110
|
-
* `fontSizeXLarge` size has been changed (SUI-6593).
|
|
111
|
-
* Enterprise themes support the `contentColorActive`, `contentColorDefault`, `contentColorDisabled`, `contentColorInverted`, and `contentColorMuted` tokens (SUI-6160).
|
|
112
|
-
|
|
113
|
-
----------
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _react = _interopRequireDefault(require("react"));
|
|
4
|
-
var _react2 = require("@testing-library/react");
|
|
5
|
-
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
6
|
-
require("jest-styled-components");
|
|
7
|
-
var _prose = _interopRequireDefault(require("../prose"));
|
|
8
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
9
|
-
function _templateObject2() {
|
|
10
|
-
var data = _taggedTemplateLiteral(["\n ", "\n "]);
|
|
11
|
-
_templateObject2 = function _templateObject2() {
|
|
12
|
-
return data;
|
|
13
|
-
};
|
|
14
|
-
return data;
|
|
15
|
-
}
|
|
16
|
-
function _templateObject() {
|
|
17
|
-
var data = _taggedTemplateLiteral(["\n ", "\n "]);
|
|
18
|
-
_templateObject = function _templateObject() {
|
|
19
|
-
return data;
|
|
20
|
-
};
|
|
21
|
-
return data;
|
|
22
|
-
}
|
|
23
|
-
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); } /* eslint-env jest */
|
|
24
|
-
describe('prose', function () {
|
|
25
|
-
it('selects html tags by default', function () {
|
|
26
|
-
var Component = _styledComponents["default"].p(_templateObject(), (0, _prose["default"])());
|
|
27
|
-
var _render = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null)),
|
|
28
|
-
container = _render.container;
|
|
29
|
-
expect(container.firstChild).toMatchInlineSnapshot("\n .c0 {\n min-width: 34ch;\n max-width: 80ch;\n }\n\n .c0 *:is(h1,h2,h3,h4,h5,h6,ul,ol,dl,p,figure,img,pre,table,fieldset,hr,blockquote):not(:last-child) {\n margin-block-end: 1lh;\n }\n\n .c0 h1:where(h1):not(:first-child) {\n margin-block-start: 1lh;\n }\n\n .c0 h2:where(h2):not(:first-child) {\n margin-block-start: 1lh;\n }\n\n .c0 img:where(img) {\n max-width: 100%;\n }\n\n .c0 ol:where(ol),\n .c0 ul:where(ul) {\n padding-inline-start: 2rem;\n }\n\n <p\n class=\"c0\"\n />\n ");
|
|
30
|
-
});
|
|
31
|
-
it('supports custom element selectors', function () {
|
|
32
|
-
var Component = _styledComponents["default"].p(_templateObject2(), (0, _prose["default"])({
|
|
33
|
-
elementSelectors: {
|
|
34
|
-
h1: '.foo'
|
|
35
|
-
}
|
|
36
|
-
}));
|
|
37
|
-
var _render2 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null)),
|
|
38
|
-
container = _render2.container;
|
|
39
|
-
expect(container.firstChild).toMatchInlineSnapshot("\n .c0 {\n min-width: 34ch;\n max-width: 80ch;\n }\n\n .c0 *:is(.foo,h2,h3,h4,h5,h6,ul,ol,dl,p,figure,img,pre,table,fieldset,hr,blockquote):not(:last-child) {\n margin-block-end: 1lh;\n }\n\n .c0 .foo:where(h1):not(:first-child) {\n margin-block-start: 1lh;\n }\n\n .c0 h2:where(h2):not(:first-child) {\n margin-block-start: 1lh;\n }\n\n .c0 img:where(img) {\n max-width: 100%;\n }\n\n .c0 ol:where(ol),\n .c0 ul:where(ul) {\n padding-inline-start: 2rem;\n }\n\n <p\n class=\"c0\"\n />\n ");
|
|
40
|
-
});
|
|
41
|
-
it.skip('passes TS verification', function () {
|
|
42
|
-
(0, _prose["default"])();
|
|
43
|
-
(0, _prose["default"])({
|
|
44
|
-
elementSelectors: {
|
|
45
|
-
h1: '.foo'
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
});
|
|
49
|
-
});
|
|
@@ -1,247 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
-
var _react = _interopRequireDefault(require("react"));
|
|
5
|
-
var _react2 = require("@testing-library/react");
|
|
6
|
-
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
7
|
-
var _SplunkThemeProvider = _interopRequireDefault(require("@splunk/themes/SplunkThemeProvider"));
|
|
8
|
-
require("jest-styled-components");
|
|
9
|
-
var _typography = _interopRequireWildcard(require("../typography"));
|
|
10
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
11
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n["default"] = e, t && t.set(e, n), n; }
|
|
12
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
13
|
-
function _templateObject9() {
|
|
14
|
-
var data = _taggedTemplateLiteral(["\n ", "\n ", ";\n ", ";\n "]);
|
|
15
|
-
_templateObject9 = function _templateObject9() {
|
|
16
|
-
return data;
|
|
17
|
-
};
|
|
18
|
-
return data;
|
|
19
|
-
}
|
|
20
|
-
function _templateObject8() {
|
|
21
|
-
var data = _taggedTemplateLiteral(["\n position: relative;\n\n ", "\n "]);
|
|
22
|
-
_templateObject8 = function _templateObject8() {
|
|
23
|
-
return data;
|
|
24
|
-
};
|
|
25
|
-
return data;
|
|
26
|
-
}
|
|
27
|
-
function _templateObject7() {
|
|
28
|
-
var data = _taggedTemplateLiteral(["\n margin: 8px;\n padding: 12px;\n\n ", "\n "]);
|
|
29
|
-
_templateObject7 = function _templateObject7() {
|
|
30
|
-
return data;
|
|
31
|
-
};
|
|
32
|
-
return data;
|
|
33
|
-
}
|
|
34
|
-
function _templateObject6() {
|
|
35
|
-
var data = _taggedTemplateLiteral(["\n ", "\n "]);
|
|
36
|
-
_templateObject6 = function _templateObject6() {
|
|
37
|
-
return data;
|
|
38
|
-
};
|
|
39
|
-
return data;
|
|
40
|
-
}
|
|
41
|
-
function _templateObject5() {
|
|
42
|
-
var data = _taggedTemplateLiteral(["\n ", "\n "]);
|
|
43
|
-
_templateObject5 = function _templateObject5() {
|
|
44
|
-
return data;
|
|
45
|
-
};
|
|
46
|
-
return data;
|
|
47
|
-
}
|
|
48
|
-
function _templateObject4() {
|
|
49
|
-
var data = _taggedTemplateLiteral(["\n ", "\n "]);
|
|
50
|
-
_templateObject4 = function _templateObject4() {
|
|
51
|
-
return data;
|
|
52
|
-
};
|
|
53
|
-
return data;
|
|
54
|
-
}
|
|
55
|
-
function _templateObject3() {
|
|
56
|
-
var data = _taggedTemplateLiteral(["\n ", "\n "]);
|
|
57
|
-
_templateObject3 = function _templateObject3() {
|
|
58
|
-
return data;
|
|
59
|
-
};
|
|
60
|
-
return data;
|
|
61
|
-
}
|
|
62
|
-
function _templateObject2() {
|
|
63
|
-
var data = _taggedTemplateLiteral(["\n ", "\n "]);
|
|
64
|
-
_templateObject2 = function _templateObject2() {
|
|
65
|
-
return data;
|
|
66
|
-
};
|
|
67
|
-
return data;
|
|
68
|
-
}
|
|
69
|
-
function _templateObject() {
|
|
70
|
-
var data = _taggedTemplateLiteral(["\n ", "\n "]);
|
|
71
|
-
_templateObject = function _templateObject() {
|
|
72
|
-
return data;
|
|
73
|
-
};
|
|
74
|
-
return data;
|
|
75
|
-
}
|
|
76
|
-
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); } /* eslint-env jest */
|
|
77
|
-
describe('typography', function () {
|
|
78
|
-
function ThemeSettingsList(_ref) {
|
|
79
|
-
var family = _ref.family,
|
|
80
|
-
Component = _ref.component;
|
|
81
|
-
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_SplunkThemeProvider["default"], {
|
|
82
|
-
family: family,
|
|
83
|
-
colorScheme: "dark",
|
|
84
|
-
density: "comfortable"
|
|
85
|
-
}, /*#__PURE__*/_react["default"].createElement(Component, null, family, " dark comfortable")), /*#__PURE__*/_react["default"].createElement(_SplunkThemeProvider["default"], {
|
|
86
|
-
family: family,
|
|
87
|
-
colorScheme: "light",
|
|
88
|
-
density: "comfortable"
|
|
89
|
-
}, /*#__PURE__*/_react["default"].createElement(Component, null, family, " light comfortable")), /*#__PURE__*/_react["default"].createElement(_SplunkThemeProvider["default"], {
|
|
90
|
-
family: family,
|
|
91
|
-
colorScheme: "dark",
|
|
92
|
-
density: "compact"
|
|
93
|
-
}, /*#__PURE__*/_react["default"].createElement(Component, null, family, " dark compact")), /*#__PURE__*/_react["default"].createElement(_SplunkThemeProvider["default"], {
|
|
94
|
-
family: family,
|
|
95
|
-
colorScheme: "light",
|
|
96
|
-
density: "compact"
|
|
97
|
-
}, /*#__PURE__*/_react["default"].createElement(Component, null, family, " light compact")));
|
|
98
|
-
}
|
|
99
|
-
describe('uses default values based on theme family', function () {
|
|
100
|
-
var Component = _styledComponents["default"].p(_templateObject(), (0, _typography["default"])());
|
|
101
|
-
it('prisma', function () {
|
|
102
|
-
var _render = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(ThemeSettingsList, {
|
|
103
|
-
family: "prisma",
|
|
104
|
-
component: Component
|
|
105
|
-
})),
|
|
106
|
-
container = _render.container;
|
|
107
|
-
expect(container).toMatchInlineSnapshot("\n .c0 {\n color: #b5b5b5;\n font-family: 'Splunk Platform Sans','Splunk Data Sans',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.429;\n }\n\n .c1 {\n color: #4d4d4d;\n font-family: 'Splunk Platform Sans','Splunk Data Sans',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.429;\n }\n\n <div>\n <p\n class=\"c0\"\n >\n prisma\n dark comfortable\n </p>\n <p\n class=\"c1\"\n >\n prisma\n light comfortable\n </p>\n <p\n class=\"c0\"\n >\n prisma\n dark compact\n </p>\n <p\n class=\"c1\"\n >\n prisma\n light compact\n </p>\n </div>\n ");
|
|
108
|
-
});
|
|
109
|
-
it('enterprise', function () {
|
|
110
|
-
var _render2 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(ThemeSettingsList, {
|
|
111
|
-
family: "enterprise",
|
|
112
|
-
component: Component
|
|
113
|
-
})),
|
|
114
|
-
container = _render2.container;
|
|
115
|
-
expect(container).toMatchInlineSnapshot("\n .c0 {\n color: #e1e6eb;\n font-family: 'Splunk Platform Sans','Proxima Nova',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.429;\n }\n\n .c1 {\n color: #5c6773;\n font-family: 'Splunk Platform Sans','Proxima Nova',Roboto,Droid,'Helvetica Neue',Helvetica,Arial,sans-serif;\n font-size: 0.875rem;\n font-weight: 400;\n line-height: 1.429;\n }\n\n <div>\n <p\n class=\"c0\"\n >\n enterprise\n dark comfortable\n </p>\n <p\n class=\"c1\"\n >\n enterprise\n light comfortable\n </p>\n <p\n class=\"c0\"\n >\n enterprise\n dark compact\n </p>\n <p\n class=\"c1\"\n >\n enterprise\n light compact\n </p>\n </div>\n ");
|
|
116
|
-
});
|
|
117
|
-
});
|
|
118
|
-
describe('support variants in each theme', function () {
|
|
119
|
-
function testTypographyVariantForThemeFamily(variant, family) {
|
|
120
|
-
it("".concat(variant), function () {
|
|
121
|
-
var Component = _styledComponents["default"].p(_templateObject2(), (0, _typography["default"])(variant));
|
|
122
|
-
var _render3 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(ThemeSettingsList, {
|
|
123
|
-
family: family,
|
|
124
|
-
component: Component
|
|
125
|
-
})),
|
|
126
|
-
container = _render3.container;
|
|
127
|
-
expect(container).toMatchSnapshot();
|
|
128
|
-
});
|
|
129
|
-
}
|
|
130
|
-
describe('prisma', function () {
|
|
131
|
-
_typography.typographyVariants.forEach(function (variant) {
|
|
132
|
-
return testTypographyVariantForThemeFamily(variant, 'prisma');
|
|
133
|
-
});
|
|
134
|
-
});
|
|
135
|
-
describe('enterprise', function () {
|
|
136
|
-
_typography.typographyVariants.forEach(function (variant) {
|
|
137
|
-
return testTypographyVariantForThemeFamily(variant, 'enterprise');
|
|
138
|
-
});
|
|
139
|
-
});
|
|
140
|
-
});
|
|
141
|
-
it('merges parameters with variant values', function () {
|
|
142
|
-
var Component = _styledComponents["default"].p(_templateObject3(), (0, _typography["default"])('body', {
|
|
143
|
-
color: 'muted',
|
|
144
|
-
family: 'monospace'
|
|
145
|
-
}));
|
|
146
|
-
var _render4 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null)),
|
|
147
|
-
container = _render4.container;
|
|
148
|
-
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: 0.875rem;\n font-weight: 400;\n line-height: 1.429;\n }\n\n <p\n class=\"c0\"\n />\n ");
|
|
149
|
-
});
|
|
150
|
-
it('allows a variants values to be overridden', function () {
|
|
151
|
-
var Component = _styledComponents["default"].p(_templateObject4(), (0, _typography["default"])('body', {
|
|
152
|
-
color: 'muted',
|
|
153
|
-
family: 'monospace',
|
|
154
|
-
lineHeight: 'single',
|
|
155
|
-
size: 24,
|
|
156
|
-
weight: 'extraBold'
|
|
157
|
-
}));
|
|
158
|
-
var _render5 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null)),
|
|
159
|
-
container = _render5.container;
|
|
160
|
-
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: 1.5rem;\n font-weight: 900;\n line-height: 1;\n }\n\n <p\n class=\"c0\"\n />\n ");
|
|
161
|
-
});
|
|
162
|
-
it('allows default values to be overridden with params', function () {
|
|
163
|
-
var Component = _styledComponents["default"].p(_templateObject5(), (0, _typography["default"])({
|
|
164
|
-
color: 'muted',
|
|
165
|
-
family: 'monospace',
|
|
166
|
-
lineHeight: 'single',
|
|
167
|
-
size: 24,
|
|
168
|
-
weight: 'extraBold'
|
|
169
|
-
}));
|
|
170
|
-
var _render6 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null)),
|
|
171
|
-
container = _render6.container;
|
|
172
|
-
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: 1.5rem;\n font-weight: 900;\n line-height: 1;\n }\n\n <p\n class=\"c0\"\n />\n ");
|
|
173
|
-
});
|
|
174
|
-
it('transforms params that are shorthand properly to CSS', function () {
|
|
175
|
-
var Component = _styledComponents["default"].p(_templateObject6(), (0, _typography["default"])({
|
|
176
|
-
color: 'muted',
|
|
177
|
-
family: 'monospace',
|
|
178
|
-
lineHeight: 'single',
|
|
179
|
-
size: 24,
|
|
180
|
-
weight: 'extraBold'
|
|
181
|
-
}));
|
|
182
|
-
var _render7 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null)),
|
|
183
|
-
container = _render7.container;
|
|
184
|
-
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: 1.5rem;\n font-weight: 900;\n line-height: 1;\n }\n\n <p\n class=\"c0\"\n />\n ");
|
|
185
|
-
});
|
|
186
|
-
describe('withReset parameter', function () {
|
|
187
|
-
it('applies reset when `withReset` is true', function () {
|
|
188
|
-
var Component = _styledComponents["default"].p(_templateObject7(), (0, _typography["default"])({
|
|
189
|
-
withReset: true
|
|
190
|
-
}));
|
|
191
|
-
var _render8 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null, "hello")),
|
|
192
|
-
container = _render8.container;
|
|
193
|
-
var node = container.firstChild;
|
|
194
|
-
expect(node).toHaveStyleRule('margin', '0');
|
|
195
|
-
expect(node).toHaveStyleRule('padding', '0');
|
|
196
|
-
});
|
|
197
|
-
it('preserves existing style when `withReset` is false', function () {
|
|
198
|
-
var Component = _styledComponents["default"].p(_templateObject8(), (0, _typography["default"])({
|
|
199
|
-
withReset: false
|
|
200
|
-
}));
|
|
201
|
-
var _render9 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(Component, null, "hello")),
|
|
202
|
-
container = _render9.container;
|
|
203
|
-
var node = container.firstChild;
|
|
204
|
-
expect(node).toHaveStyleRule('position', 'relative');
|
|
205
|
-
});
|
|
206
|
-
});
|
|
207
|
-
it.skip('passes TS verification', function () {
|
|
208
|
-
(0, _typography["default"])();
|
|
209
|
-
(0, _typography["default"])({});
|
|
210
|
-
(0, _typography["default"])('title1');
|
|
211
|
-
(0, _typography["default"])('title1', {
|
|
212
|
-
color: 'disabled'
|
|
213
|
-
});
|
|
214
|
-
(0, _typography["default"])({
|
|
215
|
-
family: 'monospace'
|
|
216
|
-
});
|
|
217
|
-
|
|
218
|
-
// @ts-expect-error
|
|
219
|
-
(0, _typography["default"])('foo');
|
|
220
|
-
// @ts-expect-error
|
|
221
|
-
(0, _typography["default"])({
|
|
222
|
-
family: 'monospace'
|
|
223
|
-
}, true);
|
|
224
|
-
// @ts-expect-error
|
|
225
|
-
(0, _typography["default"])({
|
|
226
|
-
family: 'monospace'
|
|
227
|
-
}, {
|
|
228
|
-
color: 'disabled'
|
|
229
|
-
});
|
|
230
|
-
// @ts-expect-error
|
|
231
|
-
(0, _typography["default"])('');
|
|
232
|
-
// @ts-expect-error
|
|
233
|
-
(0, _typography["default"])({
|
|
234
|
-
variant: 'title1'
|
|
235
|
-
});
|
|
236
|
-
});
|
|
237
|
-
});
|
|
238
|
-
describe('passes TS verification', function () {
|
|
239
|
-
it.skip('allows mixins in styled-components css', function () {
|
|
240
|
-
/* eslint-disable-next-line @typescript-eslint/no-unused-expressions */
|
|
241
|
-
(0, _styledComponents.css)(_templateObject9(), (0, _typography["default"])('title1'), (0, _typography["default"])('title1', {
|
|
242
|
-
color: 'disabled'
|
|
243
|
-
}), (0, _typography["default"])({
|
|
244
|
-
family: 'monospace'
|
|
245
|
-
}));
|
|
246
|
-
});
|
|
247
|
-
});
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _styledComponents = require("styled-components");
|
|
4
|
-
var _variables = _interopRequireDefault(require("../../variables"));
|
|
5
|
-
var _utilityMixins = require("../utilityMixins");
|
|
6
|
-
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
7
|
-
function _templateObject() {
|
|
8
|
-
var data = _taggedTemplateLiteral(["\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", ";\n ", "\n ", "\n ", ";\n "]);
|
|
9
|
-
_templateObject = function _templateObject() {
|
|
10
|
-
return data;
|
|
11
|
-
};
|
|
12
|
-
return data;
|
|
13
|
-
}
|
|
14
|
-
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); } /* eslint-env jest */
|
|
15
|
-
describe('colorWithAlpha', function () {
|
|
16
|
-
var defaultProps = {};
|
|
17
|
-
var enterpriseLightProps = {
|
|
18
|
-
theme: {
|
|
19
|
-
splunkThemeV1: {
|
|
20
|
-
family: 'enterprise',
|
|
21
|
-
colorScheme: 'light'
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
it('sets alpha on a string value', function () {
|
|
26
|
-
var result = (0, _utilityMixins.colorWithAlpha)('#70f', 0.5)(defaultProps);
|
|
27
|
-
expect(result).toBe('rgba(119, 0, 255, 0.5)');
|
|
28
|
-
var result2 = (0, _utilityMixins.colorWithAlpha)('#1700f3', 0.5)(defaultProps);
|
|
29
|
-
expect(result2).toBe('rgba(23, 0, 243, 0.5)');
|
|
30
|
-
var result3 = (0, _utilityMixins.colorWithAlpha)('rgb(51, 162, 212)', 0.2)(defaultProps);
|
|
31
|
-
expect(result3).toBe('rgba(51, 162, 212, 0.2)');
|
|
32
|
-
var result4 = (0, _utilityMixins.colorWithAlpha)('rgba(255, 255, 255, 0.7)', 0.2)(defaultProps);
|
|
33
|
-
expect(result4).toBe('rgba(255, 255, 255, 0.2)');
|
|
34
|
-
});
|
|
35
|
-
it('sets alpha on a variable', function () {
|
|
36
|
-
var result = (0, _utilityMixins.colorWithAlpha)(_variables["default"].white, 0.5)(defaultProps);
|
|
37
|
-
expect(result).toBe('rgba(255, 255, 255, 0.5)');
|
|
38
|
-
var result2 = (0, _utilityMixins.colorWithAlpha)(_variables["default"].contentColorDefault, 0.2)(defaultProps);
|
|
39
|
-
expect(result2).toBe('rgba(181, 181, 181, 0.2)');
|
|
40
|
-
var result3 = (0, _utilityMixins.colorWithAlpha)(_variables["default"].contentColorDefault, 0.3)(enterpriseLightProps);
|
|
41
|
-
expect(result3).toBe('rgba(92, 103, 115, 0.3)');
|
|
42
|
-
var result4 = (0, _utilityMixins.colorWithAlpha)(_variables["default"].brandColor, 0.3)(enterpriseLightProps);
|
|
43
|
-
expect(result4).toBe('rgba(92, 192, 92, 0.3)');
|
|
44
|
-
});
|
|
45
|
-
it('defaults to black for undefined variable', function () {
|
|
46
|
-
var consoleWarn = jest.spyOn(console, 'warn').mockImplementation();
|
|
47
|
-
var result = (0, _utilityMixins.colorWithAlpha)(_variables["default"].brandColor, 0.3)(defaultProps);
|
|
48
|
-
expect(result).toBe('rgba(0, 0, 0, 0.3)');
|
|
49
|
-
expect(consoleWarn).toHaveBeenCalled();
|
|
50
|
-
expect(consoleWarn).toHaveBeenCalledWith("The variable 'brandColor' does not exist in the theme 'prisma dark compact'.");
|
|
51
|
-
consoleWarn.mockRestore();
|
|
52
|
-
});
|
|
53
|
-
it('warns developers of invalid alpha prop at runtime', function () {
|
|
54
|
-
var consoleWarn = jest.spyOn(console, 'warn').mockImplementation();
|
|
55
|
-
(0, _utilityMixins.colorWithAlpha)(_variables["default"].white, 1.1)(defaultProps);
|
|
56
|
-
expect(consoleWarn).toHaveBeenCalled();
|
|
57
|
-
expect(consoleWarn).toHaveBeenCalledWith('The alpha value "1.1" is not within acceptable 0-1 range.');
|
|
58
|
-
consoleWarn.mockRestore();
|
|
59
|
-
});
|
|
60
|
-
});
|
|
61
|
-
describe('overlayColors', function () {
|
|
62
|
-
var defaultProps = {};
|
|
63
|
-
it('overlays two string values', function () {
|
|
64
|
-
var result = (0, _utilityMixins.overlayColors)('#f0f', 'rgba(255, 255, 128, 0.5)')(defaultProps);
|
|
65
|
-
expect(result).toBe('rgb(255, 128, 192)');
|
|
66
|
-
});
|
|
67
|
-
it('overlays a solid color', function () {
|
|
68
|
-
var result = (0, _utilityMixins.overlayColors)('#f39', _variables["default"].black)(defaultProps);
|
|
69
|
-
expect(result).toBe('rgb(0, 0, 0)');
|
|
70
|
-
});
|
|
71
|
-
it('uses default theme variables', function () {
|
|
72
|
-
var result = (0, _utilityMixins.overlayColors)(_variables["default"].interactiveColorAccent, _variables["default"].interactiveColorOverlayHover)(defaultProps);
|
|
73
|
-
expect(result).toBe('rgb(67, 152, 255)');
|
|
74
|
-
});
|
|
75
|
-
var enterpriseLightProps = {
|
|
76
|
-
theme: {
|
|
77
|
-
splunkThemeV1: {
|
|
78
|
-
family: 'enterprise',
|
|
79
|
-
colorScheme: 'light'
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
};
|
|
83
|
-
it('uses Enterprise variables', function () {
|
|
84
|
-
var result = (0, _utilityMixins.overlayColors)(_variables["default"].brandColor, 'rgba(255, 255, 255, 0.5)')(enterpriseLightProps);
|
|
85
|
-
expect(result).toBe('rgb(174, 224, 174)');
|
|
86
|
-
});
|
|
87
|
-
it('defaults to black for undefined colors', function () {
|
|
88
|
-
var result = (0, _utilityMixins.overlayColors)(_variables["default"].brandColor, 'rgba(255, 255, 255, 0.5)')(defaultProps);
|
|
89
|
-
expect(result).toBe('rgb(128, 128, 128)');
|
|
90
|
-
});
|
|
91
|
-
});
|
|
92
|
-
describe('passes TS verification', function () {
|
|
93
|
-
it.skip('allows mixins in styled-components css', function () {
|
|
94
|
-
/* eslint-disable-next-line @typescript-eslint/no-unused-expressions */
|
|
95
|
-
(0, _styledComponents.css)(_templateObject(), _utilityMixins.clearfix, (0, _utilityMixins.colorWithAlpha)('foo', 0.5), _utilityMixins.ellipsis, (0, _utilityMixins.overlayColors)('foo', 'bar'), _utilityMixins.printHide, _utilityMixins.printNoBackground, _utilityMixins.printWidth100Percent, _utilityMixins.printWrapAll, (0, _utilityMixins.reset)(), (0, _utilityMixins.reset)('block'), _utilityMixins.screenReaderContent);
|
|
96
|
-
});
|
|
97
|
-
});
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _util = require("../util");
|
|
4
|
-
describe('getMergedTheme', function () {
|
|
5
|
-
// Storybook will set "null" for "globalsTheme" in some situtations so we need to validate that this doesn't throw
|
|
6
|
-
it('should not throw if globalsTheme is null', function () {
|
|
7
|
-
expect((0, _util.getMergedTheme)(null, {})).toStrictEqual({});
|
|
8
|
-
});
|
|
9
|
-
it('should merge two different keys correctly', function () {
|
|
10
|
-
expect((0, _util.getMergedTheme)({
|
|
11
|
-
density: 'compact'
|
|
12
|
-
}, {
|
|
13
|
-
colorScheme: 'dark'
|
|
14
|
-
})).toStrictEqual({
|
|
15
|
-
colorScheme: 'dark',
|
|
16
|
-
density: 'compact'
|
|
17
|
-
});
|
|
18
|
-
});
|
|
19
|
-
it('should merge the same key correctly', function () {
|
|
20
|
-
expect((0, _util.getMergedTheme)({
|
|
21
|
-
density: 'compact'
|
|
22
|
-
}, {
|
|
23
|
-
density: 'comfortable'
|
|
24
|
-
})).toStrictEqual({
|
|
25
|
-
density: 'comfortable'
|
|
26
|
-
});
|
|
27
|
-
});
|
|
28
|
-
it('should pass through properties that only exist on one side of the merge', function () {
|
|
29
|
-
expect((0, _util.getMergedTheme)({
|
|
30
|
-
density: 'compact'
|
|
31
|
-
}, {
|
|
32
|
-
colorScheme: 'dark',
|
|
33
|
-
density: 'comfortable'
|
|
34
|
-
})).toStrictEqual({
|
|
35
|
-
colorScheme: 'dark',
|
|
36
|
-
density: 'comfortable'
|
|
37
|
-
});
|
|
38
|
-
});
|
|
39
|
-
it('should pass through "both"', function () {
|
|
40
|
-
expect((0, _util.getMergedTheme)({
|
|
41
|
-
density: 'compact'
|
|
42
|
-
}, {
|
|
43
|
-
colorScheme: 'both',
|
|
44
|
-
density: 'comfortable'
|
|
45
|
-
})).toStrictEqual({
|
|
46
|
-
colorScheme: 'both',
|
|
47
|
-
density: 'comfortable'
|
|
48
|
-
});
|
|
49
|
-
});
|
|
50
|
-
it('should reset values "both" in globalsTheme to its default if the new theme has "both"', function () {
|
|
51
|
-
expect((0, _util.getMergedTheme)({
|
|
52
|
-
density: 'both',
|
|
53
|
-
family: 'prisma'
|
|
54
|
-
}, {
|
|
55
|
-
colorScheme: 'both'
|
|
56
|
-
})).toStrictEqual({
|
|
57
|
-
colorScheme: 'both',
|
|
58
|
-
density: 'compact',
|
|
59
|
-
family: 'prisma'
|
|
60
|
-
});
|
|
61
|
-
});
|
|
62
|
-
});
|