mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 15:31:16 +08:00
Minor cleanup
This commit is contained in:
domyen
parent
3e447a824d
commit
48b86ceafc
@ -9,12 +9,14 @@ Storybook's manager UI is theme-able! You can change theme variables using [addo
|
||||
|
||||
You can do this in an decorator, addon or in `.storybook/config.js`. Changing theme at runtime is supported!
|
||||
|
||||
First, create or modify `.storybook/addons.js` to include registering addon-options:
|
||||
First, create or modify `.storybook/addons.js` to include registering addon-options:
|
||||
|
||||
```js
|
||||
import '@storybook/addon-options/register';
|
||||
```
|
||||
|
||||
Then, modify `.storybook/config.js` to include your new options:
|
||||
Then, modify `.storybook/config.js` to include your new options:
|
||||
|
||||
```js
|
||||
import { addParameters, configure } from '@storybook/react';
|
||||
|
||||
@ -52,26 +54,39 @@ addParameters({
|
||||
|
||||
```
|
||||
|
||||
// TODO: update this with .color. changes
|
||||
// Storybook-specific color palette
|
||||
colorPrimary: primary color, // Storybook pink
|
||||
colorSecondary: secondary color, // Blue
|
||||
|
||||
// UI
|
||||
appBg: background.app,
|
||||
appBorderColor: color.border,
|
||||
appBorderRadius: 4,
|
||||
|
||||
// Fonts
|
||||
fontBase: typography.fonts.base,
|
||||
fontCode: typography.fonts.mono,
|
||||
|
||||
// Text colors
|
||||
textColor: color.darkest,
|
||||
textInverseColor: color.lightest,
|
||||
|
||||
// Toolbar default and active colors
|
||||
barTextColor: color.mediumdark,
|
||||
barSelectedColor: color.secondary,
|
||||
barBgColor: color.lightest,
|
||||
|
||||
// Form colors
|
||||
inputBg: color.lightest,
|
||||
inputBorder: color.border,
|
||||
inputTextColor: color.darkest,
|
||||
inputBorderRadius: 4,
|
||||
|
||||
// Brand logo/text
|
||||
brand: null,
|
||||
|
||||
|
||||
|
||||
mainBackground: applied to root `background`, // 'linear-gradient(to bottom right, black, gray'
|
||||
mainBorder: applied to panels `border`, // '1px solid rgba(0,0,0,0.1)'
|
||||
mainBorderColor: applied for most borders, // 'rgba(0,0,0,0.1)'
|
||||
mainBorderRadius: applied to panels, buttons, inputs // 4
|
||||
mainFill: applied to panels `background`, // 'rgba(255,255,255,0.89)'
|
||||
barFill: applied to TabsBar `background`, // 'rgba(255,255,255,1)'
|
||||
inputFill: applied to Input `background`, // 'rgba(0,0,0,0.05)'
|
||||
mainTextFace: applied to root `font-family`,
|
||||
mainTextColor: applied to root & buttons & input `color`, // black
|
||||
mainTextSize: applied to root, // 13
|
||||
dimmedTextColor: applied in less important text, // 'rgba(0,0,0,0.4)'
|
||||
highlightColor: applied to indicate selection, // '#9fdaff'
|
||||
successColor: applied to indicate positive, // '#0edf62'
|
||||
failColor: applied to indicate negative, // '#ff3f3f'
|
||||
warnColor: applied to indicate ow-ow, // 'orange'
|
||||
monoTextFace: applied to pre,
|
||||
layoutMargin: applied to space panels, // 10
|
||||
overlayBackground: applied to overlay `background`, // 'linear-gradient(to bottom right, rgba(233, 233, 233, 0.6), rgba(255, 255, 255, 0.8))'
|
||||
```
|
||||
|
||||
### Deep theming components
|
||||
@ -164,7 +179,7 @@ The styles provided here support everything [emotion](https://emotion.sh/) does.
|
||||
|
||||
## Adding more theme variables for addons
|
||||
|
||||
If addons have a need for specific theme variables, the user has to add them.
|
||||
If addons have a need for specific theme variables, the user has to add them.
|
||||
We advise addons to reuse the variables listed above as much as possible.
|
||||
|
||||
Addon actions uses [react-inspector](https://github.com/xyc/react-inspector/blob/master/src/styles/themes/chromeLight.js) which has themes of it's own. If you want to theme it (our themes do) you can add needs the following additional theme variables:
|
||||
|
||||
@ -1769,14 +1769,6 @@ exports[`Storyshots Core|Events Force re-render 1`] = `
|
||||
box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
|
||||
}
|
||||
|
||||
.emotion-0:focus {
|
||||
box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-0:focus:hover {
|
||||
box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-0 > span {
|
||||
-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
-ms-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
@ -1855,14 +1847,6 @@ exports[`Storyshots Core|Events Force re-render 1`] = `
|
||||
box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
|
||||
}
|
||||
|
||||
.emotion-0:focus {
|
||||
box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-0:focus:hover {
|
||||
box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-0 > span {
|
||||
-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
-ms-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
@ -3035,6 +3019,7 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
|
||||
color: #333333;
|
||||
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
|
||||
display: inline;
|
||||
border-radius: 4px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
@ -3059,14 +3044,6 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
|
||||
box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
|
||||
}
|
||||
|
||||
.emotion-88:focus {
|
||||
box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-88:focus:hover {
|
||||
box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-88 > span {
|
||||
-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
-ms-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
@ -3549,6 +3526,7 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
|
||||
color: #333333;
|
||||
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
|
||||
display: inline;
|
||||
border-radius: 4px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
@ -3573,14 +3551,6 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
|
||||
box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
|
||||
}
|
||||
|
||||
.emotion-88:focus {
|
||||
box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-88:focus:hover {
|
||||
box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-88 > span {
|
||||
-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
-ms-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
@ -4582,14 +4552,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
|
||||
box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
|
||||
}
|
||||
|
||||
.emotion-5:focus {
|
||||
box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-5:focus:hover {
|
||||
box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-5 > span {
|
||||
-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
-ms-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
@ -4636,14 +4598,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.emotion-5:focus {
|
||||
box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-5:focus:hover {
|
||||
box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-8 {
|
||||
display: block;
|
||||
width: 0;
|
||||
@ -5033,14 +4987,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
|
||||
box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
|
||||
}
|
||||
|
||||
.emotion-5:focus {
|
||||
box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-5:focus:hover {
|
||||
box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-5 > span {
|
||||
-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
-ms-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
@ -5087,14 +5033,6 @@ exports[`Storyshots UI|Sidebar/Sidebar loading 1`] = `
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.emotion-5:focus {
|
||||
box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-5:focus:hover {
|
||||
box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-8 {
|
||||
display: block;
|
||||
width: 0;
|
||||
@ -5878,14 +5816,6 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
|
||||
}
|
||||
|
||||
.emotion-5:focus {
|
||||
box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-5:focus:hover {
|
||||
box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-5 > span {
|
||||
-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
-ms-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
@ -5932,14 +5862,6 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.emotion-5:focus {
|
||||
box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-5:focus:hover {
|
||||
box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-14 {
|
||||
-webkit-transition: all 150ms ease-out;
|
||||
transition: all 150ms ease-out;
|
||||
@ -6450,14 +6372,6 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
|
||||
}
|
||||
|
||||
.emotion-5:focus {
|
||||
box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-5:focus:hover {
|
||||
box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-5 > span {
|
||||
-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
-ms-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
@ -6504,14 +6418,6 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.emotion-5:focus {
|
||||
box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-5:focus:hover {
|
||||
box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-14 {
|
||||
-webkit-transition: all 150ms ease-out;
|
||||
transition: all 150ms ease-out;
|
||||
@ -7253,14 +7159,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading customBrand 1`] = `
|
||||
box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
|
||||
}
|
||||
|
||||
.emotion-3:focus {
|
||||
box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-3:focus:hover {
|
||||
box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-3 > span {
|
||||
-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
-ms-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
@ -7307,14 +7205,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading customBrand 1`] = `
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.emotion-3:focus {
|
||||
box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-3:focus:hover {
|
||||
box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-5 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -7409,14 +7299,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading customBrand 1`] = `
|
||||
box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
|
||||
}
|
||||
|
||||
.emotion-3:focus {
|
||||
box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-3:focus:hover {
|
||||
box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-3 > span {
|
||||
-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
-ms-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
@ -7463,14 +7345,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading customBrand 1`] = `
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.emotion-3:focus {
|
||||
box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-3:focus:hover {
|
||||
box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-5 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -7639,14 +7513,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading menuHighlighted 1`] = `
|
||||
box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
|
||||
}
|
||||
|
||||
.emotion-5:focus {
|
||||
box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-5:focus:hover {
|
||||
box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-5 > span {
|
||||
-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
-ms-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
@ -7693,14 +7559,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading menuHighlighted 1`] = `
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.emotion-5:focus {
|
||||
box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-5:focus:hover {
|
||||
box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-5:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -7836,14 +7694,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading menuHighlighted 1`] = `
|
||||
box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
|
||||
}
|
||||
|
||||
.emotion-5:focus {
|
||||
box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-5:focus:hover {
|
||||
box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-5 > span {
|
||||
-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
-ms-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
@ -7890,14 +7740,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading menuHighlighted 1`] = `
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.emotion-5:focus {
|
||||
box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-5:focus:hover {
|
||||
box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-5:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -8093,14 +7935,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading simple 1`] = `
|
||||
box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
|
||||
}
|
||||
|
||||
.emotion-5:focus {
|
||||
box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-5:focus:hover {
|
||||
box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-5 > span {
|
||||
-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
-ms-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
@ -8147,14 +7981,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading simple 1`] = `
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.emotion-5:focus {
|
||||
box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-5:focus:hover {
|
||||
box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-7 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -8279,14 +8105,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading simple 1`] = `
|
||||
box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
|
||||
}
|
||||
|
||||
.emotion-5:focus {
|
||||
box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-5:focus:hover {
|
||||
box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-5 > span {
|
||||
-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
-ms-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
@ -8333,14 +8151,6 @@ exports[`Storyshots UI|Sidebar/SidebarHeading simple 1`] = `
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.emotion-5:focus {
|
||||
box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-5:focus:hover {
|
||||
box-shadow: #DDDDDD 0 0 0 1px inset,rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-7 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
|
||||
@ -46,6 +46,7 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
|
||||
color: #333333;
|
||||
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
|
||||
display: inline;
|
||||
border-radius: 4px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
@ -70,14 +71,6 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
|
||||
box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
|
||||
}
|
||||
|
||||
.emotion-0:focus {
|
||||
box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-0:focus:hover {
|
||||
box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-0 > span {
|
||||
-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
-ms-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
@ -177,6 +170,7 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
border-radius: 4px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
@ -201,14 +195,6 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
|
||||
box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
|
||||
}
|
||||
|
||||
.emotion-2:focus {
|
||||
box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-2:focus:hover {
|
||||
box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-2 > span {
|
||||
-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
-ms-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
@ -299,6 +285,7 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
|
||||
color: #333333;
|
||||
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
@ -323,14 +310,6 @@ exports[`Storyshots Basics|Form/Button sizes 1`] = `
|
||||
box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
|
||||
}
|
||||
|
||||
.emotion-4:focus {
|
||||
box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-4:focus:hover {
|
||||
box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-4 > span {
|
||||
-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
-ms-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
@ -470,6 +449,7 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
|
||||
color: #333333;
|
||||
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
@ -494,14 +474,6 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
|
||||
box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
|
||||
}
|
||||
|
||||
.emotion-6:focus {
|
||||
box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-6:focus:hover {
|
||||
box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-6 > span {
|
||||
-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
-ms-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
@ -593,6 +565,7 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
|
||||
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
|
||||
width: 100%;
|
||||
box-shadow: #FF4400 0 0 0 1px inset !important;
|
||||
border-radius: 4px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
@ -617,14 +590,6 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
|
||||
box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
|
||||
}
|
||||
|
||||
.emotion-0:focus {
|
||||
box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-0:focus:hover {
|
||||
box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-0 > span {
|
||||
-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
-ms-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
@ -716,6 +681,7 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
|
||||
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
|
||||
width: 100%;
|
||||
box-shadow: #E69D00 0 0 0 1px inset;
|
||||
border-radius: 4px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
@ -740,14 +706,6 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
|
||||
box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
|
||||
}
|
||||
|
||||
.emotion-2:focus {
|
||||
box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-2:focus:hover {
|
||||
box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-2 > span {
|
||||
-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
-ms-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
@ -839,6 +797,7 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
|
||||
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
|
||||
width: 100%;
|
||||
box-shadow: #66BF3C 0 0 0 1px inset !important;
|
||||
border-radius: 4px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
@ -863,14 +822,6 @@ exports[`Storyshots Basics|Form/Button validations 1`] = `
|
||||
box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;
|
||||
}
|
||||
|
||||
.emotion-4:focus {
|
||||
box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
|
||||
}
|
||||
|
||||
.emotion-4:focus:hover {
|
||||
box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
|
||||
}
|
||||
|
||||
.emotion-4 > span {
|
||||
-webkit-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
-ms-transform: scale3d(1,1,1) translate3d(0,0,0);
|
||||
|
||||
@ -112,15 +112,20 @@ export const Textarea = styled(TextareaAutoResize)(styles, sizes, alignment, val
|
||||
Textarea.displayName = 'Textarea';
|
||||
|
||||
export const Button = withProps({ tertiary: true, small: true, inForm: true })(
|
||||
styled(StyledButton)(sizes, validation, ({ theme }) => ({ borderRadius: theme.borderRadius }), {
|
||||
userSelect: 'none',
|
||||
overflow: 'visible',
|
||||
zIndex: 2,
|
||||
styled(StyledButton)(
|
||||
sizes,
|
||||
validation,
|
||||
({ theme }) => ({ borderRadius: theme.appBorderRadius }),
|
||||
{
|
||||
userSelect: 'none',
|
||||
overflow: 'visible',
|
||||
zIndex: 2,
|
||||
|
||||
// overrides the default hover from Button
|
||||
'&:hover': {
|
||||
transform: 'none',
|
||||
},
|
||||
})
|
||||
// overrides the default hover from Button
|
||||
'&:hover': {
|
||||
transform: 'none',
|
||||
},
|
||||
}
|
||||
)
|
||||
);
|
||||
Button.displayName = 'Button';
|
||||
|
||||
@ -1,20 +1,19 @@
|
||||
export { StorybookLogo } from './brand/StorybookLogo';
|
||||
export { StorybookIcon } from './brand/StorybookIcon';
|
||||
export { default as Badge } from './Badge/Badge';
|
||||
export { default as Button } from './Button/Button';
|
||||
|
||||
// Typography
|
||||
export { default as Link } from './typography/link/link';
|
||||
export { default as DocumentFormatting } from './typography/DocumentFormatting';
|
||||
|
||||
export { Spaced } from './spaced/Spaced';
|
||||
|
||||
export { default as Form } from './form/index';
|
||||
|
||||
export SyntaxHighlighter from './syntaxhighlighter/syntaxhighlighter';
|
||||
|
||||
// UI
|
||||
export { ActionBar } from './ActionBar/ActionBar';
|
||||
export { Spaced } from './spaced/Spaced';
|
||||
export { Placeholder } from './placeholder/placeholder';
|
||||
|
||||
// Forms
|
||||
export { default as Button } from './Button/Button';
|
||||
export { default as Form } from './form/index';
|
||||
|
||||
// Tooltips
|
||||
export { default as WithTooltip } from './tooltip/WithTooltip';
|
||||
export { default as TooltipMessage } from './tooltip/TooltipMessage';
|
||||
export { default as TooltipNote } from './tooltip/TooltipNote';
|
||||
@ -26,4 +25,7 @@ export { IconButton, TabButton } from './bar/button';
|
||||
export { Separator, interleaveSeparators } from './bar/separator';
|
||||
export { Bar, FlexBar } from './bar/bar';
|
||||
|
||||
// Graphics
|
||||
export { default as Icons } from './icon/icon';
|
||||
export { StorybookLogo } from './brand/StorybookLogo';
|
||||
export { StorybookIcon } from './brand/StorybookIcon';
|
||||
|
||||
@ -95,7 +95,7 @@ export const createGlobal = memoize(1)(
|
||||
...resetStyles,
|
||||
body: {
|
||||
...resetStyles.body,
|
||||
color: color.darkest,
|
||||
color: color.defaultText,
|
||||
background: background.app,
|
||||
},
|
||||
|
||||
|
||||
@ -6,8 +6,6 @@ export default create({
|
||||
// Storybook-specific color palette
|
||||
colorPrimary: '#FF4785', // coral
|
||||
colorSecondary: '#1EA7FD', // ocean
|
||||
colorTertiary: '#FAFBFC', // neutral buttons
|
||||
colorAncillary: '#22a699', // for code
|
||||
|
||||
// UI
|
||||
appBg: background.app,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user