@spaced-out/ui-design-system 0.3.2 → 0.3.4
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/.cspell/custom-words.txt +2 -0
- package/.github/workflows/pages.yml +3 -3
- package/.github/workflows/publish_to_npm.yml +1 -1
- package/.storybook/main.js +44 -43
- package/.storybook/manager-head.html +30 -0
- package/.storybook/preview.js +3 -0
- package/.vscode/extensions.json +2 -1
- package/.vscode/settings.json +21 -1
- package/CHANGELOG.md +20 -0
- package/design-tokens/color/app-color.json +4 -1
- package/lib/components/Menu/Menu.module.css +8 -3
- package/lib/components/SideMenuLink/SideMenuLink.js +1 -1
- package/lib/components/SideMenuLink/SideMenuLink.js.flow +1 -1
- package/lib/styles/index.css +2 -0
- package/lib/styles/index.js +5 -3
- package/lib/styles/index.js.flow +2 -0
- package/lib/styles/variables/_color.css +2 -0
- package/lib/styles/variables/_color.js +4 -2
- package/lib/styles/variables/_color.js.flow +2 -0
- package/package.json +16 -15
package/.cspell/custom-words.txt
CHANGED
|
@@ -7,7 +7,7 @@ name: Publish Genesis Design System Storybook to Github Pages
|
|
|
7
7
|
on:
|
|
8
8
|
# Runs on pushes targeting the default branch
|
|
9
9
|
push:
|
|
10
|
-
branches: [
|
|
10
|
+
branches: ['master']
|
|
11
11
|
|
|
12
12
|
# Allows you to run this workflow manually from the Actions tab
|
|
13
13
|
workflow_dispatch:
|
|
@@ -20,7 +20,7 @@ permissions:
|
|
|
20
20
|
|
|
21
21
|
# Allow one concurrent deployment
|
|
22
22
|
concurrency:
|
|
23
|
-
group:
|
|
23
|
+
group: 'pages'
|
|
24
24
|
cancel-in-progress: true
|
|
25
25
|
|
|
26
26
|
jobs:
|
|
@@ -35,7 +35,7 @@ jobs:
|
|
|
35
35
|
uses: actions/checkout@v3
|
|
36
36
|
- uses: actions/setup-node@v3
|
|
37
37
|
with:
|
|
38
|
-
node-version:
|
|
38
|
+
node-version: '18.20.5'
|
|
39
39
|
- name: Install and Build 🔧
|
|
40
40
|
# Install npm packages and build the Storybook files
|
|
41
41
|
run: |
|
package/.storybook/main.js
CHANGED
|
@@ -1,58 +1,52 @@
|
|
|
1
1
|
const path = require('path');
|
|
2
2
|
module.exports = {
|
|
3
|
-
stories: ['../src/**/*.
|
|
3
|
+
stories: ['../src/**/*.mdx', '../src/**/*.stories.jsx'],
|
|
4
|
+
|
|
4
5
|
features: {
|
|
5
6
|
buildStoriesJson: true,
|
|
6
|
-
storyStoreV7: false, // 👈 Opt out of on-demand story loading
|
|
7
7
|
},
|
|
8
|
+
|
|
8
9
|
// Add any Storybook addons you want here: https://storybook.js.org/addons/
|
|
9
|
-
addons: [
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
transcludeMarkdown: true,
|
|
17
|
-
},
|
|
10
|
+
addons: [{
|
|
11
|
+
name: '@storybook/addon-docs',
|
|
12
|
+
options: {
|
|
13
|
+
configureJSX: true,
|
|
14
|
+
babelOptions: {},
|
|
15
|
+
sourceLoaderOptions: null,
|
|
16
|
+
transcludeMarkdown: true,
|
|
18
17
|
},
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
'@storybook/addon-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
overrides: [
|
|
38
|
-
{
|
|
39
|
-
files: ['*.js', '*.jsx'],
|
|
40
|
-
options: {
|
|
41
|
-
parser: 'babel-flow',
|
|
42
|
-
},
|
|
18
|
+
}, 'storybook-css-modules', '@storybook/addon-a11y', '@storybook/addon-essentials', // 'storybook-vscode-component/register', This is not supported in storybook 7
|
|
19
|
+
'@storybook/testing-react', '@storybook/addon-mdx-gfm', {
|
|
20
|
+
name: '@storybook/addon-storysource',
|
|
21
|
+
options: {
|
|
22
|
+
loaderOptions: {
|
|
23
|
+
injectStoryParameters: false,
|
|
24
|
+
prettierConfig: {
|
|
25
|
+
singleQuote: true,
|
|
26
|
+
trailingComma: 'all',
|
|
27
|
+
printWidth: 80,
|
|
28
|
+
tabWidth: 2,
|
|
29
|
+
bracketSpacing: false,
|
|
30
|
+
endOfLine: 'lf',
|
|
31
|
+
overrides: [
|
|
32
|
+
{
|
|
33
|
+
files: ['*.js', '*.jsx'],
|
|
34
|
+
options: {
|
|
35
|
+
parser: 'babel-flow',
|
|
43
36
|
},
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
files: ['*.css'],
|
|
40
|
+
options: {
|
|
41
|
+
parser: 'css',
|
|
49
42
|
},
|
|
50
|
-
|
|
51
|
-
|
|
43
|
+
},
|
|
44
|
+
],
|
|
52
45
|
},
|
|
53
46
|
},
|
|
54
47
|
},
|
|
55
|
-
],
|
|
48
|
+
}, '@storybook/addon-webpack5-compiler-babel', '@chromatic-com/storybook'],
|
|
49
|
+
|
|
56
50
|
babel: async (options) => ({
|
|
57
51
|
...options,
|
|
58
52
|
sourceType: 'unambiguous',
|
|
@@ -74,6 +68,7 @@ module.exports = {
|
|
|
74
68
|
],
|
|
75
69
|
plugins: ['macros'],
|
|
76
70
|
}),
|
|
71
|
+
|
|
77
72
|
webpackFinal: async (config) => {
|
|
78
73
|
config.module.rules = config.module.rules.map((rule) => {
|
|
79
74
|
if (rule.test && rule.test.toString().includes('woff')) {
|
|
@@ -108,9 +103,15 @@ module.exports = {
|
|
|
108
103
|
config.resolve.extensions.push('.js', '.jsx');
|
|
109
104
|
return config;
|
|
110
105
|
},
|
|
106
|
+
|
|
111
107
|
staticDirs: ['public', '../design-tokens'],
|
|
108
|
+
|
|
112
109
|
framework: {
|
|
113
110
|
name: '@storybook/react-webpack5',
|
|
114
111
|
options: {},
|
|
115
112
|
},
|
|
113
|
+
|
|
114
|
+
typescript: {
|
|
115
|
+
reactDocgen: 'react-docgen-typescript'
|
|
116
|
+
}
|
|
116
117
|
};
|
|
@@ -73,4 +73,34 @@
|
|
|
73
73
|
.sidebar-item svg {
|
|
74
74
|
color: #b4a2e8;
|
|
75
75
|
}
|
|
76
|
+
|
|
77
|
+
.sidebar-item svg path {
|
|
78
|
+
fill: #f4f4f4;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.search-field {
|
|
82
|
+
background-color: #f4f4f4;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.sidebar-subheading {
|
|
86
|
+
color: #f4f4f4 !important;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.sidebar-subheading svg path {
|
|
90
|
+
fill: #f4f4f4;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
button[title='Tag filters'] {
|
|
94
|
+
display: none;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
#storybook-explorer-searchfield + code + div {
|
|
98
|
+
/* Filter button */
|
|
99
|
+
display: none;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.search-field + div {
|
|
103
|
+
/* add story ui button immediately following the search bar */
|
|
104
|
+
display: none;
|
|
105
|
+
}
|
|
76
106
|
</style>
|
package/.storybook/preview.js
CHANGED
package/.vscode/extensions.json
CHANGED
package/.vscode/settings.json
CHANGED
|
@@ -2,5 +2,25 @@
|
|
|
2
2
|
"eslint.validate": ["javascript", "javascriptreact"],
|
|
3
3
|
"editor.codeActionsOnSave": {
|
|
4
4
|
"source.fixAll.eslint": "explicit"
|
|
5
|
-
}
|
|
5
|
+
},
|
|
6
|
+
"workbench.colorCustomizations": {
|
|
7
|
+
"activityBar.activeBackground": "#65c89b",
|
|
8
|
+
"activityBar.background": "#65c89b",
|
|
9
|
+
"activityBar.foreground": "#15202b",
|
|
10
|
+
"activityBar.inactiveForeground": "#15202b99",
|
|
11
|
+
"activityBarBadge.background": "#945bc4",
|
|
12
|
+
"activityBarBadge.foreground": "#e7e7e7",
|
|
13
|
+
"commandCenter.border": "#15202b99",
|
|
14
|
+
"sash.hoverBorder": "#65c89b",
|
|
15
|
+
"statusBar.background": "#42b883",
|
|
16
|
+
"statusBar.foreground": "#15202b",
|
|
17
|
+
"statusBarItem.hoverBackground": "#359268",
|
|
18
|
+
"statusBarItem.remoteBackground": "#42b883",
|
|
19
|
+
"statusBarItem.remoteForeground": "#15202b",
|
|
20
|
+
"titleBar.activeBackground": "#42b883",
|
|
21
|
+
"titleBar.activeForeground": "#15202b",
|
|
22
|
+
"titleBar.inactiveBackground": "#42b88399",
|
|
23
|
+
"titleBar.inactiveForeground": "#15202b99"
|
|
24
|
+
},
|
|
25
|
+
"peacock.color": "#42b883"
|
|
6
26
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,26 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
### [0.3.4](https://github.com/spaced-out/ui-design-system/compare/v0.3.3...v0.3.4) (2024-11-22)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* ♳ Storybook upgrade ([#289](https://github.com/spaced-out/ui-design-system/issues/289)) ([3aebe22](https://github.com/spaced-out/ui-design-system/commit/3aebe22fbeae528d17bed1c33bb84113e77a4396))
|
|
11
|
+
* introducing new focus states for menu and its derivatives ([#291](https://github.com/spaced-out/ui-design-system/issues/291)) ([69f702d](https://github.com/spaced-out/ui-design-system/commit/69f702d3870bbaa4d8a9bf2be10168f3f7c939ef))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### Bug Fixes
|
|
15
|
+
|
|
16
|
+
* bumps node versions in github workflows ([716c753](https://github.com/spaced-out/ui-design-system/commit/716c753070cbce82d129972920170e03c7a2ebd2))
|
|
17
|
+
|
|
18
|
+
### [0.3.3](https://github.com/spaced-out/ui-design-system/compare/v0.3.2...v0.3.3) (2024-11-13)
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
### Bug Fixes
|
|
22
|
+
|
|
23
|
+
* support status in expanded case for sub menu ([#288](https://github.com/spaced-out/ui-design-system/issues/288)) ([3f9f158](https://github.com/spaced-out/ui-design-system/commit/3f9f158c317d609e71a0f40c548c95a22b442fab))
|
|
24
|
+
|
|
5
25
|
### [0.3.2](https://github.com/spaced-out/ui-design-system/compare/v0.3.1...v0.3.2) (2024-11-12)
|
|
6
26
|
|
|
7
27
|
|
|
@@ -75,6 +75,9 @@
|
|
|
75
75
|
"primary": {
|
|
76
76
|
"value": "{baseColor.purple.100.value}"
|
|
77
77
|
},
|
|
78
|
+
"secondary": {
|
|
79
|
+
"value": "{baseColor.purple.500.value}"
|
|
80
|
+
},
|
|
78
81
|
"danger": {
|
|
79
82
|
"value": "{baseColor.red.100.value}"
|
|
80
83
|
}
|
|
@@ -195,7 +198,7 @@
|
|
|
195
198
|
"value": "{baseColor.white.100.value}"
|
|
196
199
|
}
|
|
197
200
|
},
|
|
198
|
-
"account-bar":{
|
|
201
|
+
"account-bar": {
|
|
199
202
|
"fill": {
|
|
200
203
|
"value": "{baseColor.indigo.920.value}"
|
|
201
204
|
}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
@value (
|
|
2
2
|
borderWidthPrimary,
|
|
3
|
+
borderWidthNone,
|
|
4
|
+
borderWidthTertiary,
|
|
3
5
|
borderRadiusMedium,
|
|
4
6
|
borderRadiusSmall
|
|
5
7
|
) from '../../styles/variables/_border.css';
|
|
@@ -11,7 +13,8 @@
|
|
|
11
13
|
colorTextPrimary,
|
|
12
14
|
colorTextSecondary,
|
|
13
15
|
colorTextTertiary,
|
|
14
|
-
colorBackgroundTertiary
|
|
16
|
+
colorBackgroundTertiary,
|
|
17
|
+
colorFocusSecondary
|
|
15
18
|
) from '../../styles/variables/_color.css';
|
|
16
19
|
|
|
17
20
|
@value (
|
|
@@ -177,15 +180,17 @@
|
|
|
177
180
|
}
|
|
178
181
|
|
|
179
182
|
.option:focus {
|
|
180
|
-
background: colorFillSecondary;
|
|
181
183
|
outline: none;
|
|
182
184
|
color: colorTextPrimary;
|
|
185
|
+
box-shadow: inset borderWidthNone borderWidthNone borderWidthNone
|
|
186
|
+
borderWidthTertiary colorFocusSecondary;
|
|
183
187
|
}
|
|
184
188
|
|
|
185
189
|
.option:focus-within {
|
|
186
|
-
background: colorFillSecondary;
|
|
187
190
|
outline: none;
|
|
188
191
|
color: colorTextPrimary;
|
|
192
|
+
box-shadow: inset borderWidthNone borderWidthNone borderWidthNone
|
|
193
|
+
borderWidthTertiary colorFocusSecondary;
|
|
189
194
|
}
|
|
190
195
|
|
|
191
196
|
.option.selected {
|
|
@@ -250,7 +250,7 @@ const SideMenuLink = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
250
250
|
key: pageNameKey
|
|
251
251
|
}), pageNameKey && MENU_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement("div", {
|
|
252
252
|
className: _SideMenuLinkModule.default.iconContainer
|
|
253
|
-
},
|
|
253
|
+
}, status && /*#__PURE__*/React.createElement(_StatusIndicator.StatusIndicator, {
|
|
254
254
|
status: status,
|
|
255
255
|
classNames: {
|
|
256
256
|
wrapper: _SideMenuLinkModule.default.statusIndicatorBlock
|
|
@@ -295,7 +295,7 @@ export const SideMenuLink: React$AbstractComponent<
|
|
|
295
295
|
>
|
|
296
296
|
{pageNameKey && MENU_NAME_LIST[pageNameKey] ? (
|
|
297
297
|
<div className={css.iconContainer}>
|
|
298
|
-
{
|
|
298
|
+
{status && (
|
|
299
299
|
<StatusIndicator
|
|
300
300
|
status={status}
|
|
301
301
|
classNames={{
|
package/lib/styles/index.css
CHANGED
package/lib/styles/index.js
CHANGED
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
7
|
-
exports.
|
|
8
|
-
exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size800 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size44 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size200 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = void 0;
|
|
6
|
+
exports.colorTextInformation = exports.colorTextFavorite = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorSideMenuBackgroundSelected = exports.colorSideMenuBackgroundHovered = exports.colorSideMenuBackgroundDefault = exports.colorSideMenuAccountBarFill = exports.colorScoreBarLevel5 = exports.colorScoreBarLevel4 = exports.colorScoreBarLevel3 = exports.colorScoreBarLevel2 = exports.colorScoreBarLevel1 = exports.colorScoreBarInactive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGroupMenuTextDefault = exports.colorGroupMenuBackgroundSelected = exports.colorGroupMenuBackgroundHovered = exports.colorGroupMenuBackgroundDefault = exports.colorGrayLightest = exports.colorFocusSecondary = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = exports.borderWidthTertiary = exports.borderWidthSecondary = exports.borderWidthPrimary = exports.borderWidthNone = exports.borderRadiusXSmall = exports.borderRadiusXLarge = exports.borderRadiusSmall = exports.borderRadiusRadioButton = exports.borderRadiusNone = exports.borderRadiusMedium = exports.borderRadiusLarge = exports.borderRadiusCircle = void 0;
|
|
7
|
+
exports.size12 = exports.size110 = exports.size100 = exports.size10 = exports.shadowBoxShadow4Y = exports.shadowBoxShadow4X = exports.shadowBoxShadow4Type = exports.shadowBoxShadow4Spread = exports.shadowBoxShadow4Color = exports.shadowBoxShadow4Blur = exports.shadowBoxShadow3Y = exports.shadowBoxShadow3X = exports.shadowBoxShadow3Type = exports.shadowBoxShadow3Spread = exports.shadowBoxShadow3Color = exports.shadowBoxShadow3Blur = exports.shadowBoxShadow2Y = exports.shadowBoxShadow2X = exports.shadowBoxShadow2Type = exports.shadowBoxShadow2Spread = exports.shadowBoxShadow2Color = exports.shadowBoxShadow2Blur = exports.shadowBoxShadow1Y = exports.shadowBoxShadow1X = exports.shadowBoxShadow1Type = exports.shadowBoxShadow1Spread = exports.shadowBoxShadow1Color = exports.shadowBoxShadow1Blur = exports.opacity95 = exports.opacity90 = exports.opacity85 = exports.opacity80 = exports.opacity70 = exports.opacity60 = exports.opacity50 = exports.opacity5 = exports.opacity40 = exports.opacity30 = exports.opacity20 = exports.opacity15 = exports.opacity100 = exports.opacity10 = exports.opacity0 = exports.motionEaseInEaseOut = exports.motionDurationSlowest = exports.motionDurationSlower = exports.motionDurationSlow = exports.motionDurationNormal = exports.motionDurationFast = exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize36 = exports.fontSize26 = exports.fontSize24 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight125 = exports.fontLineHeight120 = exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus3 = exports.fontLetterSpacingMinus2 = exports.fontLetterSpacingMinus1 = exports.fontLetterSpacing4 = exports.fontLetterSpacing2 = exports.fontLetterSpacing1 = exports.fontLetterSpacing0 = exports.fontFamilyCentra = exports.elevationTooltip = exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = void 0;
|
|
8
|
+
exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size880 = exports.size800 = exports.size8 = exports.size720 = exports.size70 = exports.size660 = exports.size66 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size540 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size44 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size32 = exports.size300 = exports.size30 = exports.size28 = exports.size276 = exports.size260 = exports.size26 = exports.size252 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size200 = exports.size20 = exports.size2 = exports.size180 = exports.size18 = exports.size160 = exports.size140 = exports.size1280 = exports.size125 = void 0;
|
|
9
9
|
|
|
10
10
|
const borderWidthNone = '0px';
|
|
11
11
|
exports.borderWidthNone = borderWidthNone;
|
|
@@ -75,6 +75,8 @@ const colorBackgroundTertiary = '#ffffff';
|
|
|
75
75
|
exports.colorBackgroundTertiary = colorBackgroundTertiary;
|
|
76
76
|
const colorFocusPrimary = '#ccc0f0';
|
|
77
77
|
exports.colorFocusPrimary = colorFocusPrimary;
|
|
78
|
+
const colorFocusSecondary = '#5c34cd';
|
|
79
|
+
exports.colorFocusSecondary = colorFocusSecondary;
|
|
78
80
|
const colorFocusDanger = '#f6b9c8';
|
|
79
81
|
exports.colorFocusDanger = colorFocusDanger;
|
|
80
82
|
const colorFillPrimary = '#5c34cd';
|
package/lib/styles/index.js.flow
CHANGED
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
7
|
-
exports.colorWarningLightest = void 0;
|
|
6
|
+
exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextFavorite = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuStar = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorSideMenuBackgroundSelected = exports.colorSideMenuBackgroundHovered = exports.colorSideMenuBackgroundDefault = exports.colorSideMenuAccountBarFill = exports.colorScoreBarLevel5 = exports.colorScoreBarLevel4 = exports.colorScoreBarLevel3 = exports.colorScoreBarLevel2 = exports.colorScoreBarLevel1 = exports.colorScoreBarInactive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGroupMenuTextDefault = exports.colorGroupMenuBackgroundSelected = exports.colorGroupMenuBackgroundHovered = exports.colorGroupMenuBackgroundDefault = exports.colorGrayLightest = exports.colorFocusSecondary = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDataViz8 = exports.colorDataViz7 = exports.colorDataViz6 = exports.colorDataViz5 = exports.colorDataViz4 = exports.colorDataViz3 = exports.colorDataViz2 = exports.colorDataViz1 = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillTableActionPressed = exports.colorButtonFillTableActionHovered = exports.colorButtonFillTableActionEnabled = exports.colorButtonFillTableActionBorder = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = void 0;
|
|
7
|
+
exports.colorWarningLightest = exports.colorWarningLight = void 0;
|
|
8
8
|
|
|
9
9
|
const colorTextPrimary = '#17172A';
|
|
10
10
|
exports.colorTextPrimary = colorTextPrimary;
|
|
@@ -50,6 +50,8 @@ const colorBackgroundTertiary = '#ffffff';
|
|
|
50
50
|
exports.colorBackgroundTertiary = colorBackgroundTertiary;
|
|
51
51
|
const colorFocusPrimary = '#ccc0f0';
|
|
52
52
|
exports.colorFocusPrimary = colorFocusPrimary;
|
|
53
|
+
const colorFocusSecondary = '#5c34cd';
|
|
54
|
+
exports.colorFocusSecondary = colorFocusSecondary;
|
|
53
55
|
const colorFocusDanger = '#f6b9c8';
|
|
54
56
|
exports.colorFocusDanger = colorFocusDanger;
|
|
55
57
|
const colorFillPrimary = '#5c34cd';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spaced-out/ui-design-system",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.4",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"description": "Sense UI components library",
|
|
6
6
|
"author": {
|
|
@@ -63,16 +63,18 @@
|
|
|
63
63
|
"@babel/preset-react": "^7.18.6",
|
|
64
64
|
"@commitlint/cli": "^17.1.2",
|
|
65
65
|
"@commitlint/config-conventional": "^17.1.0",
|
|
66
|
-
"@storybook/addon-a11y": "^
|
|
67
|
-
"@storybook/addon-essentials": "^
|
|
68
|
-
"@storybook/addon-mdx-gfm": "^
|
|
69
|
-
"@storybook/addon-storysource": "^
|
|
70
|
-
"@storybook/
|
|
71
|
-
"@storybook/
|
|
72
|
-
"@storybook/
|
|
73
|
-
"@storybook/
|
|
74
|
-
"@storybook/
|
|
75
|
-
"@storybook/
|
|
66
|
+
"@storybook/addon-a11y": "^8.4.2",
|
|
67
|
+
"@storybook/addon-essentials": "^8.4.2",
|
|
68
|
+
"@storybook/addon-mdx-gfm": "^8.4.2",
|
|
69
|
+
"@storybook/addon-storysource": "^8.4.2",
|
|
70
|
+
"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
|
|
71
|
+
"@storybook/addons": "^7.6.17",
|
|
72
|
+
"@storybook/blocks": "^8.4.2",
|
|
73
|
+
"@storybook/react": "^8.4.2",
|
|
74
|
+
"@storybook/react-webpack5": "^8.4.2",
|
|
75
|
+
"@storybook/test-runner": "^0.19.1",
|
|
76
|
+
"@storybook/testing-react": "^2.0.1",
|
|
77
|
+
"@storybook/theming": "^8.4.2",
|
|
76
78
|
"@testing-library/react": "^11.2.7",
|
|
77
79
|
"all-contributors-cli": "^6.20.0",
|
|
78
80
|
"babel-eslint": "^10.1.0",
|
|
@@ -90,7 +92,7 @@
|
|
|
90
92
|
"eslint-plugin-react": "^7.30.1",
|
|
91
93
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
92
94
|
"eslint-plugin-simple-import-sort": "^8.0.0",
|
|
93
|
-
"eslint-plugin-storybook": "^0.
|
|
95
|
+
"eslint-plugin-storybook": "^0.11.0",
|
|
94
96
|
"eslint-plugin-unused-imports": "^2.0.0",
|
|
95
97
|
"flow-bin": "^0.184.0",
|
|
96
98
|
"gulp": "^4.0.2",
|
|
@@ -101,7 +103,6 @@
|
|
|
101
103
|
"invariant": "^2.2.4",
|
|
102
104
|
"jest": "^29.3.1",
|
|
103
105
|
"lint-staged": "^10.5.1",
|
|
104
|
-
"node-sass": "^7.0.0",
|
|
105
106
|
"paths.macro": "^3.0.1",
|
|
106
107
|
"prettier": "^2.5.1",
|
|
107
108
|
"react": "17.0.2",
|
|
@@ -109,7 +110,7 @@
|
|
|
109
110
|
"rimraf": "^3.0.2",
|
|
110
111
|
"simple-git": "^3.12.0",
|
|
111
112
|
"standard-version": "^9.5.0",
|
|
112
|
-
"storybook": "^
|
|
113
|
+
"storybook": "^8.4.2",
|
|
113
114
|
"storybook-css-modules": "^1.0.8",
|
|
114
115
|
"storybook-vscode-component": "^1.0.9",
|
|
115
116
|
"style-dictionary": "^3.7.1"
|
|
@@ -129,7 +130,7 @@
|
|
|
129
130
|
}
|
|
130
131
|
},
|
|
131
132
|
"volta": {
|
|
132
|
-
"node": "
|
|
133
|
+
"node": "18.20.5",
|
|
133
134
|
"yarn": "1.22.19"
|
|
134
135
|
}
|
|
135
136
|
}
|