GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 23:01:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Start theming dark mode

Browse Source
This commit is contained in:
domyen 2019-02-08 19:06:43 -05:00
parent 0cb3196403
commit 07e933ff95
19 changed files with 306 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
addons/a11y/src/components/Tabs.js
View File

@ -11,7 +11,7 @@ const Container = styled.div({
const List = styled.div(({ theme }) => ({
boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`,
background: '#f8f8fc',
background: 'rgba(0,0,0,.05)',
flexWrap: 'wrap',
display: 'flex',
}));

4
addons/knobs/src/components/__tests__/__snapshots__/Panel.js.snap
View File

@ -29,7 +29,7 @@ Array [
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
border-bottom: 1px solid rgba(0,0,0,.1);
border-bottom: 1px solid rgba(255,255,255,.1);
margin: 0 15px;
padding: 8px 0;
}
@ -124,7 +124,7 @@ Array [
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
border-bottom: 1px solid rgba(0,0,0,.1);
border-bottom: 1px solid rgba(255,255,255,.1);
margin: 0 15px;
padding: 8px 0;
}

18
examples/official-storybook/stories/__snapshots__/addon-a11y.stories.storyshot
View File

@ -86,7 +86,7 @@ exports[`Storyshots Addons|A11y/Form With label 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
border-bottom: 1px solid rgba(0,0,0,.1);
border-bottom: 1px solid rgba(255,255,255,.1);
margin: 0 15px;
padding: 8px 0;
}
@ -122,13 +122,13 @@ exports[`Storyshots Addons|A11y/Form With label 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -189,7 +189,7 @@ exports[`Storyshots Addons|A11y/Form With placeholder 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
border-bottom: 1px solid rgba(0,0,0,.1);
border-bottom: 1px solid rgba(255,255,255,.1);
margin: 0 15px;
padding: 8px 0;
}
@ -206,13 +206,13 @@ exports[`Storyshots Addons|A11y/Form With placeholder 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -267,7 +267,7 @@ exports[`Storyshots Addons|A11y/Form Without Label 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
border-bottom: 1px solid rgba(0,0,0,.1);
border-bottom: 1px solid rgba(255,255,255,.1);
margin: 0 15px;
padding: 8px 0;
}
@ -284,13 +284,13 @@ exports[`Storyshots Addons|A11y/Form Without Label 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;

176
examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap
View File

@ -10,6 +10,7 @@ exports[`Storyshots Basics|ActionBar manyItems 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
background: #333333;
}
.emotion-0 {
@ -24,22 +25,23 @@ exports[`Storyshots Basics|ActionBar manyItems 1`] = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #666666;
color: #FFFFFF;
background: #333333;
font-size: 12px;
line-height: 16px;
font-weight: 700;
border-top: 1px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
border-left: 1px solid rgba(255,255,255,.1);
margin-left: -1px;
border-radius: 4px 0 0 0;
}
.emotion-0:not(:last-child) {
border-right: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(255,255,255,.1);
}
.emotion-0 + * {
border-left: 1px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(255,255,255,.1);
border-radius: 0;
}
@ -57,6 +59,7 @@ exports[`Storyshots Basics|ActionBar manyItems 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
background: #333333;
}
.emotion-0 {
@ -71,22 +74,23 @@ exports[`Storyshots Basics|ActionBar manyItems 1`] = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #666666;
color: #FFFFFF;
background: #333333;
font-size: 12px;
line-height: 16px;
font-weight: 700;
border-top: 1px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
border-left: 1px solid rgba(255,255,255,.1);
margin-left: -1px;
border-radius: 4px 0 0 0;
}
.emotion-0:not(:last-child) {
border-right: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(255,255,255,.1);
}
.emotion-0 + * {
border-left: 1px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(255,255,255,.1);
border-radius: 0;
}
@ -132,6 +136,7 @@ exports[`Storyshots Basics|ActionBar singleItem 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
background: #333333;
}
.emotion-0 {
@ -146,22 +151,23 @@ exports[`Storyshots Basics|ActionBar singleItem 1`] = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #666666;
color: #FFFFFF;
background: #333333;
font-size: 12px;
line-height: 16px;
font-weight: 700;
border-top: 1px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
border-left: 1px solid rgba(255,255,255,.1);
margin-left: -1px;
border-radius: 4px 0 0 0;
}
.emotion-0:not(:last-child) {
border-right: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(255,255,255,.1);
}
.emotion-0 + * {
border-left: 1px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(255,255,255,.1);
border-radius: 0;
}
@ -179,6 +185,7 @@ exports[`Storyshots Basics|ActionBar singleItem 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
background: #333333;
}
.emotion-0 {
@ -193,22 +200,23 @@ exports[`Storyshots Basics|ActionBar singleItem 1`] = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #666666;
color: #FFFFFF;
background: #333333;
font-size: 12px;
line-height: 16px;
font-weight: 700;
border-top: 1px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
border-left: 1px solid rgba(255,255,255,.1);
margin-left: -1px;
border-radius: 4px 0 0 0;
}
.emotion-0:not(:last-child) {
border-right: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(255,255,255,.1);
}
.emotion-0 + * {
border-left: 1px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(255,255,255,.1);
border-radius: 0;
}
@ -245,7 +253,7 @@ exports[`Storyshots Basics|DocumentFormatting sampleDocument 1`] = `
.emotion-0 h2 {
font-size: 24px;
border-bottom: 1px solid rgba(0,0,0,.1);
border-bottom: 1px solid rgba(255,255,255,.1);
}
.emotion-0 h3 {
@ -409,7 +417,7 @@ exports[`Storyshots Basics|DocumentFormatting sampleDocument 1`] = `
.emotion-0 hr {
border: 0 none;
color: rgba(0,0,0,.1);
color: rgba(255,255,255,.1);
height: 4px;
padding: 0;
}
@ -532,7 +540,7 @@ exports[`Storyshots Basics|DocumentFormatting sampleDocument 1`] = `
}
.emotion-0 table tr {
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
background-color: white;
margin: 0;
padding: 0;
@ -544,14 +552,14 @@ exports[`Storyshots Basics|DocumentFormatting sampleDocument 1`] = `
.emotion-0 table tr th {
font-weight: bold;
border: 1px solid rgba(0,0,0,.1);
border: 1px solid rgba(255,255,255,.1);
text-align: left;
margin: 0;
padding: 6px 13px;
}
.emotion-0 table tr td {
border: 1px solid rgba(0,0,0,.1);
border: 1px solid rgba(255,255,255,.1);
text-align: left;
margin: 0;
padding: 6px 13px;
@ -681,7 +689,7 @@ exports[`Storyshots Basics|DocumentFormatting sampleDocument 1`] = `
.emotion-0 h2 {
font-size: 24px;
border-bottom: 1px solid rgba(0,0,0,.1);
border-bottom: 1px solid rgba(255,255,255,.1);
}
.emotion-0 h3 {
@ -845,7 +853,7 @@ exports[`Storyshots Basics|DocumentFormatting sampleDocument 1`] = `
.emotion-0 hr {
border: 0 none;
color: rgba(0,0,0,.1);
color: rgba(255,255,255,.1);
height: 4px;
padding: 0;
}
@ -968,7 +976,7 @@ exports[`Storyshots Basics|DocumentFormatting sampleDocument 1`] = `
}
.emotion-0 table tr {
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
background-color: white;
margin: 0;
padding: 0;
@ -980,14 +988,14 @@ exports[`Storyshots Basics|DocumentFormatting sampleDocument 1`] = `
.emotion-0 table tr th {
font-weight: bold;
border: 1px solid rgba(0,0,0,.1);
border: 1px solid rgba(255,255,255,.1);
text-align: left;
margin: 0;
padding: 6px 13px;
}
.emotion-0 table tr td {
border: 1px solid rgba(0,0,0,.1);
border: 1px solid rgba(255,255,255,.1);
text-align: left;
margin: 0;
padding: 6px 13px;
@ -1643,7 +1651,7 @@ exports[`Storyshots Basics|Placeholder singleChild 1`] = `
.emotion-1 {
padding: 30px;
text-align: center;
color: #666666;
color: #FFFFFF;
font-size: 13px;
}
@ -1654,7 +1662,7 @@ exports[`Storyshots Basics|Placeholder singleChild 1`] = `
.emotion-1 {
padding: 30px;
text-align: center;
color: #666666;
color: #FFFFFF;
font-size: 13px;
}
@ -1677,7 +1685,7 @@ exports[`Storyshots Basics|Placeholder twoChildren 1`] = `
.emotion-2 {
padding: 30px;
text-align: center;
color: #666666;
color: #FFFFFF;
font-size: 13px;
}
@ -1688,7 +1696,7 @@ exports[`Storyshots Basics|Placeholder twoChildren 1`] = `
.emotion-2 {
padding: 30px;
text-align: center;
color: #666666;
color: #FFFFFF;
font-size: 13px;
}
@ -2388,7 +2396,7 @@ exports[`Storyshots UI|Settings/SettingsFooter basic 1`] = `
display: flex;
padding-top: 20px;
margin-top: 20px;
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
font-weight: 700;
}
@ -2472,7 +2480,7 @@ exports[`Storyshots UI|Settings/SettingsFooter basic 1`] = `
display: flex;
padding-top: 20px;
margin-top: 20px;
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
font-weight: 700;
}
@ -2612,14 +2620,14 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
background: #FFFFFF;
background: #333333;
color: #999999;
height: 40px;
position: relative;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
background: #333333 linear-gradient(to bottom,transparent calc(100% - 1px),rgba(255,255,255,.1) calc(100% - 1px));
}
.emotion-2 {
@ -2758,7 +2766,7 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
display: flex;
padding-top: 20px;
margin-top: 20px;
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
font-weight: 700;
}
@ -2888,7 +2896,7 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
.emotion-16 {
padding: 6px 0;
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
display: grid;
grid-template-columns: 1fr 1fr 0px;
}
@ -2907,13 +2915,13 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -3119,14 +3127,14 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
background: #FFFFFF;
background: #333333;
color: #999999;
height: 40px;
position: relative;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
background: #333333 linear-gradient(to bottom,transparent calc(100% - 1px),rgba(255,255,255,.1) calc(100% - 1px));
}
.emotion-2 {
@ -3265,7 +3273,7 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
display: flex;
padding-top: 20px;
margin-top: 20px;
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
font-weight: 700;
}
@ -3395,7 +3403,7 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
.emotion-16 {
padding: 6px 0;
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
display: grid;
grid-template-columns: 1fr 1fr 0px;
}
@ -3414,13 +3422,13 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -4132,7 +4140,7 @@ exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
}
.emotion-5 + .emotion-5 {
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
}
.emotion-5 > * + * {
@ -4221,7 +4229,7 @@ exports[`Storyshots UI|Sidebar/ListItemIcon all 1`] = `
}
.emotion-5 + .emotion-5 {
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
}
.emotion-5 > * + * {
@ -5890,7 +5898,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
-webkit-transition: all 150ms ease-out;
transition: all 150ms ease-out;
border-bottom: 1px solid transparent;
border-bottom-color: rgba(0,0,0,0.2);
border-bottom-color: rgba(255,255,255,0.2);
outline: 0;
position: relative;
margin: 0 20px 1rem;
@ -5970,7 +5978,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
padding: 4px;
-webkit-text-decoration: none;
text-decoration: none;
background: rgba(0,0,0,.1);
background: rgba(255,255,255,.1);
border-radius: 1em;
cursor: pointer;
opacity: 1;
@ -5994,7 +6002,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
}
.emotion-13:hover {
background: rgba(0,0,0,0.2);
background: rgba(255,255,255,0.2);
}
.emotion-13:hover > svg {
@ -6454,7 +6462,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
-webkit-transition: all 150ms ease-out;
transition: all 150ms ease-out;
border-bottom: 1px solid transparent;
border-bottom-color: rgba(0,0,0,0.2);
border-bottom-color: rgba(255,255,255,0.2);
outline: 0;
position: relative;
margin: 0 20px 1rem;
@ -6534,7 +6542,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
padding: 4px;
-webkit-text-decoration: none;
text-decoration: none;
background: rgba(0,0,0,.1);
background: rgba(255,255,255,.1);
border-radius: 1em;
cursor: pointer;
opacity: 1;
@ -6558,7 +6566,7 @@ exports[`Storyshots UI|Sidebar/Sidebar simple 1`] = `
}
.emotion-13:hover {
background: rgba(0,0,0,0.2);
background: rgba(255,255,255,0.2);
}
.emotion-13:hover > svg {
@ -10071,7 +10079,7 @@ exports[`Storyshots UI|Sidebar/SidebarSearch filledIn 1`] = `
padding: 4px;
-webkit-text-decoration: none;
text-decoration: none;
background: rgba(0,0,0,.1);
background: rgba(255,255,255,.1);
border-radius: 1em;
cursor: pointer;
opacity: 1;
@ -10095,7 +10103,7 @@ exports[`Storyshots UI|Sidebar/SidebarSearch filledIn 1`] = `
}
.emotion-5:hover {
background: rgba(0,0,0,0.2);
background: rgba(255,255,255,0.2);
}
.emotion-5:hover > svg {
@ -10197,7 +10205,7 @@ exports[`Storyshots UI|Sidebar/SidebarSearch filledIn 1`] = `
padding: 4px;
-webkit-text-decoration: none;
text-decoration: none;
background: rgba(0,0,0,.1);
background: rgba(255,255,255,.1);
border-radius: 1em;
cursor: pointer;
opacity: 1;
@ -10221,7 +10229,7 @@ exports[`Storyshots UI|Sidebar/SidebarSearch filledIn 1`] = `
}
.emotion-5:hover {
background: rgba(0,0,0,0.2);
background: rgba(255,255,255,0.2);
}
.emotion-5:hover > svg {
@ -10366,7 +10374,7 @@ exports[`Storyshots UI|Sidebar/SidebarSearch focussed 1`] = `
padding: 4px;
-webkit-text-decoration: none;
text-decoration: none;
background: rgba(0,0,0,.1);
background: rgba(255,255,255,.1);
border-radius: 1em;
cursor: pointer;
opacity: 1;
@ -10390,7 +10398,7 @@ exports[`Storyshots UI|Sidebar/SidebarSearch focussed 1`] = `
}
.emotion-5:hover {
background: rgba(0,0,0,0.2);
background: rgba(255,255,255,0.2);
}
.emotion-5:hover > svg {
@ -10492,7 +10500,7 @@ exports[`Storyshots UI|Sidebar/SidebarSearch focussed 1`] = `
padding: 4px;
-webkit-text-decoration: none;
text-decoration: none;
background: rgba(0,0,0,.1);
background: rgba(255,255,255,.1);
border-radius: 1em;
cursor: pointer;
opacity: 1;
@ -10516,7 +10524,7 @@ exports[`Storyshots UI|Sidebar/SidebarSearch focussed 1`] = `
}
.emotion-5:hover {
background: rgba(0,0,0,0.2);
background: rgba(255,255,255,0.2);
}
.emotion-5:hover > svg {
@ -10660,7 +10668,7 @@ exports[`Storyshots UI|Sidebar/SidebarSearch simple 1`] = `
padding: 4px;
-webkit-text-decoration: none;
text-decoration: none;
background: rgba(0,0,0,.1);
background: rgba(255,255,255,.1);
border-radius: 1em;
cursor: pointer;
opacity: 1;
@ -10684,7 +10692,7 @@ exports[`Storyshots UI|Sidebar/SidebarSearch simple 1`] = `
}
.emotion-5:hover {
background: rgba(0,0,0,0.2);
background: rgba(255,255,255,0.2);
}
.emotion-5:hover > svg {
@ -10695,7 +10703,7 @@ exports[`Storyshots UI|Sidebar/SidebarSearch simple 1`] = `
-webkit-transition: all 150ms ease-out;
transition: all 150ms ease-out;
border-bottom: 1px solid transparent;
border-bottom-color: rgba(0,0,0,0.2);
border-bottom-color: rgba(255,255,255,0.2);
outline: 0;
position: relative;
}
@ -10786,7 +10794,7 @@ exports[`Storyshots UI|Sidebar/SidebarSearch simple 1`] = `
padding: 4px;
-webkit-text-decoration: none;
text-decoration: none;
background: rgba(0,0,0,.1);
background: rgba(255,255,255,.1);
border-radius: 1em;
cursor: pointer;
opacity: 1;
@ -10810,7 +10818,7 @@ exports[`Storyshots UI|Sidebar/SidebarSearch simple 1`] = `
}
.emotion-5:hover {
background: rgba(0,0,0,0.2);
background: rgba(255,255,255,0.2);
}
.emotion-5:hover > svg {
@ -10821,7 +10829,7 @@ exports[`Storyshots UI|Sidebar/SidebarSearch simple 1`] = `
-webkit-transition: all 150ms ease-out;
transition: all 150ms ease-out;
border-bottom: 1px solid transparent;
border-bottom-color: rgba(0,0,0,0.2);
border-bottom-color: rgba(255,255,255,0.2);
outline: 0;
position: relative;
}
@ -10900,7 +10908,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories empty 1`] = `
.emotion-4 {
padding: 30px;
text-align: center;
color: #666666;
color: #FFFFFF;
font-size: 13px;
}
@ -10967,7 +10975,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories empty 1`] = `
.emotion-4 {
padding: 30px;
text-align: center;
color: #666666;
color: #FFFFFF;
font-size: 13px;
}
@ -11857,7 +11865,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
-webkit-transition: all 150ms ease-out;
transition: all 150ms ease-out;
border-bottom: 1px solid transparent;
border-bottom-color: rgba(0,0,0,0.2);
border-bottom-color: rgba(255,255,255,0.2);
outline: 0;
position: relative;
margin: 0 20px 1rem;
@ -11937,7 +11945,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
padding: 4px;
-webkit-text-decoration: none;
text-decoration: none;
background: rgba(0,0,0,.1);
background: rgba(255,255,255,.1);
border-radius: 1em;
cursor: pointer;
opacity: 1;
@ -11961,7 +11969,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
}
.emotion-5:hover {
background: rgba(0,0,0,0.2);
background: rgba(255,255,255,0.2);
}
.emotion-5:hover > svg {
@ -12225,7 +12233,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
-webkit-transition: all 150ms ease-out;
transition: all 150ms ease-out;
border-bottom: 1px solid transparent;
border-bottom-color: rgba(0,0,0,0.2);
border-bottom-color: rgba(255,255,255,0.2);
outline: 0;
position: relative;
margin: 0 20px 1rem;
@ -12305,7 +12313,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
padding: 4px;
-webkit-text-decoration: none;
text-decoration: none;
background: rgba(0,0,0,.1);
background: rgba(255,255,255,.1);
border-radius: 1em;
cursor: pointer;
opacity: 1;
@ -12329,7 +12337,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories noRoot 1`] = `
}
.emotion-5:hover {
background: rgba(0,0,0,0.2);
background: rgba(255,255,255,0.2);
}
.emotion-5:hover > svg {
@ -12810,7 +12818,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
-webkit-transition: all 150ms ease-out;
transition: all 150ms ease-out;
border-bottom: 1px solid transparent;
border-bottom-color: rgba(0,0,0,0.2);
border-bottom-color: rgba(255,255,255,0.2);
outline: 0;
position: relative;
margin: 0 20px 1rem;
@ -12890,7 +12898,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
padding: 4px;
-webkit-text-decoration: none;
text-decoration: none;
background: rgba(0,0,0,.1);
background: rgba(255,255,255,.1);
border-radius: 1em;
cursor: pointer;
opacity: 1;
@ -12914,7 +12922,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
}
.emotion-5:hover {
background: rgba(0,0,0,0.2);
background: rgba(255,255,255,0.2);
}
.emotion-5:hover > svg {
@ -13163,7 +13171,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
-webkit-transition: all 150ms ease-out;
transition: all 150ms ease-out;
border-bottom: 1px solid transparent;
border-bottom-color: rgba(0,0,0,0.2);
border-bottom-color: rgba(255,255,255,0.2);
outline: 0;
position: relative;
margin: 0 20px 1rem;
@ -13243,7 +13251,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
padding: 4px;
-webkit-text-decoration: none;
text-decoration: none;
background: rgba(0,0,0,.1);
background: rgba(255,255,255,.1);
border-radius: 1em;
cursor: pointer;
opacity: 1;
@ -13267,7 +13275,7 @@ exports[`Storyshots UI|Sidebar/SidebarStories withRoot 1`] = `
}
.emotion-5:hover {
background: rgba(0,0,0,0.2);
background: rgba(255,255,255,0.2);
}
.emotion-5:hover > svg {

6
lib/components/src/ActionBar/ActionBar.js
View File

@ -9,7 +9,7 @@ const Container = styled.div(({ theme }) => ({
right: 0,
maxWidth: '100%',
display: 'flex',
background: theme.background.bar,
background: theme.background.content,
}));
export const ActionButton = styled.button(({ theme }) => ({
@ -19,8 +19,8 @@ export const ActionButton = styled.button(({ theme }) => ({
display: 'flex',
alignItems: 'center',
color: theme.color.dark,
background: theme.background.bar,
color: theme.color.defaultText,
background: theme.background.content,
fontSize: 12,
lineHeight: '16px',

2
lib/components/src/bar/button.js
View File

@ -41,7 +41,7 @@ export const TabButton = styled.button(
borderBottomColor: theme.barSelectedColor,
}
: {
opacity: 0.4,
color: 'inherit',
borderBottomColor: 'transparent',
}
);

114
lib/components/src/form/__snapshots__/form.stories.storyshot
View File

@ -923,7 +923,7 @@ exports[`Storyshots Basics|Form/Field field 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
border-bottom: 1px solid rgba(0,0,0,.1);
border-bottom: 1px solid rgba(255,255,255,.1);
margin: 0 15px;
padding: 8px 0;
}
@ -959,13 +959,13 @@ exports[`Storyshots Basics|Form/Field field 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -1068,13 +1068,13 @@ exports[`Storyshots Basics|Form/Input alignment 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -1120,13 +1120,13 @@ exports[`Storyshots Basics|Form/Input alignment 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -1172,13 +1172,13 @@ exports[`Storyshots Basics|Form/Input alignment 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -1270,13 +1270,13 @@ exports[`Storyshots Basics|Form/Input sizes 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -1322,13 +1322,13 @@ exports[`Storyshots Basics|Form/Input sizes 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -1376,13 +1376,13 @@ exports[`Storyshots Basics|Form/Input sizes 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -1474,13 +1474,13 @@ exports[`Storyshots Basics|Form/Input validations 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -1526,13 +1526,13 @@ exports[`Storyshots Basics|Form/Input validations 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -1579,13 +1579,13 @@ exports[`Storyshots Basics|Form/Input validations 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -1632,13 +1632,13 @@ exports[`Storyshots Basics|Form/Input validations 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -1732,13 +1732,13 @@ exports[`Storyshots Basics|Form/Select sizes 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -1798,13 +1798,13 @@ exports[`Storyshots Basics|Form/Select sizes 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -1859,13 +1859,13 @@ exports[`Storyshots Basics|Form/Select sizes 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -2005,13 +2005,13 @@ exports[`Storyshots Basics|Form/Select validations 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -2064,13 +2064,13 @@ exports[`Storyshots Basics|Form/Select validations 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -2124,13 +2124,13 @@ exports[`Storyshots Basics|Form/Select validations 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -2184,13 +2184,13 @@ exports[`Storyshots Basics|Form/Select validations 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -2369,13 +2369,13 @@ exports[`Storyshots Basics|Form/Textarea alignment 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -2421,13 +2421,13 @@ exports[`Storyshots Basics|Form/Textarea alignment 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -2473,13 +2473,13 @@ exports[`Storyshots Basics|Form/Textarea alignment 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -2580,13 +2580,13 @@ exports[`Storyshots Basics|Form/Textarea sizes 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -2632,13 +2632,13 @@ exports[`Storyshots Basics|Form/Textarea sizes 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -2686,13 +2686,13 @@ exports[`Storyshots Basics|Form/Textarea sizes 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -2790,13 +2790,13 @@ exports[`Storyshots Basics|Form/Textarea validations 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -2842,13 +2842,13 @@ exports[`Storyshots Basics|Form/Textarea validations 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -2895,13 +2895,13 @@ exports[`Storyshots Basics|Form/Textarea validations 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;
@ -2948,13 +2948,13 @@ exports[`Storyshots Basics|Form/Textarea validations 1`] = `
box-sizing: inherit;
display: block;
margin: 0;
background: #FFFFFF;
background: #303030;
padding: .42em 1em;
font-size: 13px;
position: relative;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
color: #333333;
color: #FFFFFF;
box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
border-radius: 4px;
line-height: 20px;

2
lib/components/src/placeholder/placeholder.js
View File

@ -11,7 +11,7 @@ const Desc = styled.div``;
const Message = styled.div`
padding: 30px;
text-align: center;
color: ${props => props.theme.color.dark};
color: ${props => props.theme.color.defaultText};
font-size: ${props => props.theme.typography.size.s2 - 1}px;
`;

14
lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot
View File

@ -217,7 +217,7 @@ exports[`Storyshots Basics|SyntaxHighlighter bordered & copy-able 1`] = `
.emotion-5 {
position: relative;
overflow: hidden;
border: 1px solid rgba(0,0,0,.1);
border: 1px solid rgba(255,255,255,.1);
}
.emotion-2 {
@ -405,6 +405,7 @@ exports[`Storyshots Basics|SyntaxHighlighter bordered & copy-able 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
background: #333333;
}
.emotion-3 {
@ -419,22 +420,23 @@ exports[`Storyshots Basics|SyntaxHighlighter bordered & copy-able 1`] = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #666666;
color: #FFFFFF;
background: #333333;
font-size: 12px;
line-height: 16px;
font-weight: 700;
border-top: 1px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
border-left: 1px solid rgba(255,255,255,.1);
margin-left: -1px;
border-radius: 4px 0 0 0;
}
.emotion-3:not(:last-child) {
border-right: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(255,255,255,.1);
}
.emotion-3 + * {
border-left: 1px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(255,255,255,.1);
border-radius: 0;
}

50
lib/components/src/tabs/__snapshots__/tabs.stories.storyshot
View File

@ -10,14 +10,14 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
background: #FFFFFF;
background: #333333;
color: #999999;
height: 40px;
position: relative;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
background: #333333 linear-gradient(to bottom,transparent calc(100% - 1px),rgba(255,255,255,.1) calc(100% - 1px));
}
.emotion-7 {
@ -78,7 +78,7 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
border-bottom: 3px solid transparent;
font-weight: bold;
font-size: 13px;
opacity: 0.4;
color: inherit;
border-bottom-color: transparent;
}
@ -291,14 +291,14 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
background: #FFFFFF;
background: #333333;
color: #999999;
height: 40px;
position: relative;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
background: #333333 linear-gradient(to bottom,transparent calc(100% - 1px),rgba(255,255,255,.1) calc(100% - 1px));
}
.emotion-7 {
@ -359,7 +359,7 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
border-bottom: 3px solid transparent;
font-weight: bold;
font-size: 13px;
opacity: 0.4;
color: inherit;
border-bottom-color: transparent;
}
@ -528,14 +528,14 @@ exports[`Storyshots Basics|Tabs stateful - static 1`] = `
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
background: #FFFFFF;
background: #333333;
color: #999999;
height: 40px;
position: relative;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
background: #333333 linear-gradient(to bottom,transparent calc(100% - 1px),rgba(255,255,255,.1) calc(100% - 1px));
}
.emotion-3 {
@ -596,7 +596,7 @@ exports[`Storyshots Basics|Tabs stateful - static 1`] = `
border-bottom: 3px solid transparent;
font-weight: bold;
font-size: 13px;
opacity: 0.4;
color: inherit;
border-bottom-color: transparent;
}
@ -723,14 +723,14 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
background: #FFFFFF;
background: #333333;
color: #999999;
height: 40px;
position: relative;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
background: #333333 linear-gradient(to bottom,transparent calc(100% - 1px),rgba(255,255,255,.1) calc(100% - 1px));
}
.emotion-7 {
@ -791,7 +791,7 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
border-bottom: 3px solid transparent;
font-weight: bold;
font-size: 13px;
opacity: 0.4;
color: inherit;
border-bottom-color: transparent;
}
@ -867,7 +867,7 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
.emotion-11 {
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.1);
border: 1px solid rgba(255,255,255,.1);
width: 100%;
height: 100%;
box-sizing: border-box;
@ -1021,14 +1021,14 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
background: #FFFFFF;
background: #333333;
color: #999999;
height: 40px;
position: relative;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
background: #333333 linear-gradient(to bottom,transparent calc(100% - 1px),rgba(255,255,255,.1) calc(100% - 1px));
}
.emotion-7 {
@ -1089,7 +1089,7 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
border-bottom: 3px solid transparent;
font-weight: bold;
font-size: 13px;
opacity: 0.4;
color: inherit;
border-bottom-color: transparent;
}
@ -1159,7 +1159,7 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
.emotion-11 {
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.1);
border: 1px solid rgba(255,255,255,.1);
display: block;
}
@ -1298,7 +1298,7 @@ exports[`Storyshots Basics|Tabs stateless - empty 1`] = `
.emotion-1 {
padding: 30px;
text-align: center;
color: #666666;
color: #FFFFFF;
font-size: 13px;
}
@ -1380,7 +1380,7 @@ exports[`Storyshots Basics|Tabs stateless - no scrolling 1`] = `
border-bottom: 3px solid transparent;
font-weight: bold;
font-size: 13px;
opacity: 0.4;
color: inherit;
border-bottom-color: transparent;
}
@ -1450,7 +1450,7 @@ exports[`Storyshots Basics|Tabs stateless - no scrolling 1`] = `
.emotion-11 {
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.1);
border: 1px solid rgba(255,255,255,.1);
display: block;
}
@ -1463,14 +1463,14 @@ exports[`Storyshots Basics|Tabs stateless - no scrolling 1`] = `
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
background: #FFFFFF;
background: #333333;
color: #999999;
height: 40px;
position: relative;
overflow: auto;
overflow-x: auto;
overflow-y: hidden;
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
background: #333333 linear-gradient(to bottom,transparent calc(100% - 1px),rgba(255,255,255,.1) calc(100% - 1px));
}
<div
@ -1614,14 +1614,14 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
background: #FFFFFF;
background: #333333;
color: #999999;
height: 40px;
position: relative;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
background: #333333 linear-gradient(to bottom,transparent calc(100% - 1px),rgba(255,255,255,.1) calc(100% - 1px));
}
.emotion-7 {
@ -1682,7 +1682,7 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
border-bottom: 3px solid transparent;
font-weight: bold;
font-size: 13px;
opacity: 0.4;
color: inherit;
border-bottom-color: transparent;
}

2
lib/components/src/tooltip/Tooltip.js
View File

@ -83,7 +83,7 @@ const Wrapper = styled.div(
drop-shadow(0px 5px 5px rgba(0,0,0,0.05))
drop-shadow(0 1px 3px rgba(0,0,0,0.1))
`,
borderRadius: theme.borderRadius,
borderRadius: theme.appBorderRadius,
fontSize: theme.typography.size.s1,
}
: {

18
lib/components/src/tooltip/__snapshots__/ListItem.stories.storyshot
View File

@ -38,7 +38,7 @@ exports[`Storyshots basics|Tooltip/ListItem active icon 1`] = `
}
.emotion-5 + .emotion-5 {
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
}
.emotion-5 > * + * {
@ -211,7 +211,7 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
}
.emotion-2 + .emotion-2 {
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
}
.emotion-2 > * + * {
@ -344,7 +344,7 @@ exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
}
.emotion-37 + .emotion-37 {
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
}
.emotion-37 > * + * {
@ -581,7 +581,7 @@ exports[`Storyshots basics|Tooltip/ListItem default 1`] = `
}
.emotion-2 + .emotion-2 {
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
}
.emotion-2 > * + * {
@ -668,7 +668,7 @@ exports[`Storyshots basics|Tooltip/ListItem default icon 1`] = `
}
.emotion-5 + .emotion-5 {
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
}
.emotion-5 > * + * {
@ -800,7 +800,7 @@ exports[`Storyshots basics|Tooltip/ListItem disabled 1`] = `
}
.emotion-5 + .emotion-5 {
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
}
.emotion-5 > * + * {
@ -939,7 +939,7 @@ exports[`Storyshots basics|Tooltip/ListItem loading 1`] = `
}
.emotion-2 + .emotion-2 {
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
}
.emotion-2 > * + * {
@ -1021,7 +1021,7 @@ exports[`Storyshots basics|Tooltip/ListItem w/positions 1`] = `
}
.emotion-5 + .emotion-5 {
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
}
.emotion-5 > * + * {
@ -1132,7 +1132,7 @@ exports[`Storyshots basics|Tooltip/ListItem w/positions active 1`] = `
}
.emotion-5 + .emotion-5 {
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
}
.emotion-5 > * + * {

4
lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot
View File

@ -11,6 +11,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default 1`] = `
background: #DDDDDD;
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
border-radius: 4px;
font-size: 12px;
}
@ -79,6 +80,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, bottom 1`] = `
background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
border-radius: 4px;
font-size: 12px;
}
@ -137,6 +139,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, left 1`] = `
background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
border-radius: 4px;
font-size: 12px;
}
@ -195,6 +198,7 @@ exports[`Storyshots basics/Tooltip/Tooltip basic, default, right 1`] = `
background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
border-radius: 4px;
font-size: 12px;
}

1
lib/components/src/tooltip/__snapshots__/WithTooltip.stories.storyshot
View File

@ -192,6 +192,7 @@ exports[`Storyshots basics/Tooltip/WithTooltip simple click start open 1`] = `
background: linear-gradient( -1deg, rgba(248,248,248,0.97) 0%, rgba(255,255,255,0.97) 100% );
-webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
border-radius: 4px;
font-size: 12px;
}

54
lib/theming/src/themes/light.ts
View File

@ -2,15 +2,49 @@ import { create } from '../create';
import { color, typography, background } from '../base';
// export default create({
// // Storybook-specific color palette
// colorPrimary: '#FF4785', // coral
// colorSecondary: '#1EA7FD', // ocean
//
// // UI
// appBg: background.app,
// appContentBg: color.lightest,
// 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,
// barBg: color.lightest,
//
// // Form colors
// inputBg: color.lightest,
// inputBorder: color.border,
// inputTextColor: color.darkest,
// inputBorderRadius: 4,
//
// // Brand logo/text
// brand: null,
// });
export default create({
// Storybook-specific color palette
colorPrimary: '#FF4785', // coral
colorSecondary: '#1EA7FD', // ocean
// UI
appBg: background.app,
appContentBg: color.lightest,
appBorderColor: color.border,
appBg: '#222222',
appContentBg: color.darkest,
appBorderColor: 'rgba(255,255,255,.1)',
appBorderRadius: 4,
// Fonts
@ -18,18 +52,18 @@ export default create({
fontCode: typography.fonts.mono,
// Text colors
textColor: color.darkest,
textInverseColor: color.lightest,
textColor: color.lightest,
textInverseColor: color.darkest,
// Toolbar default and active colors
barTextColor: color.mediumdark,
barTextColor: '#999999',
barSelectedColor: color.secondary,
barBg: color.lightest,
barBg: color.darkest,
// Form colors
inputBg: color.lightest,
inputBorder: color.border,
inputTextColor: color.darkest,
inputBg: '#303030',
inputBorder: 'rgba(0,0,0,.1)',
inputTextColor: color.lightest,
inputBorderRadius: 4,
// Brand logo/text

8
lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot
View File

@ -313,7 +313,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 1`] = `
border-bottom: 3px solid transparent;
font-weight: bold;
font-size: 13px;
opacity: 0.4;
color: inherit;
border-bottom-color: transparent;
}
@ -611,7 +611,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 1 1`] = `
border-bottom: 3px solid transparent;
font-weight: bold;
font-size: 13px;
opacity: 0.4;
color: inherit;
border-bottom-color: transparent;
}
@ -903,7 +903,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 2 1`] = `
border-bottom: 3px solid transparent;
font-weight: bold;
font-size: 13px;
opacity: 0.4;
color: inherit;
border-bottom-color: transparent;
}
@ -1201,7 +1201,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) page 1`] = `
border-bottom: 3px solid transparent;
font-weight: bold;
font-size: 13px;
opacity: 0.4;
color: inherit;
border-bottom-color: transparent;
}

8
lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot
View File

@ -23,14 +23,14 @@ exports[`Storyshots UI|Panel default 1`] = `
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
background: #FFFFFF;
background: #333333;
color: #999999;
height: 40px;
position: relative;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
background: #333333 linear-gradient(to bottom,transparent calc(100% - 1px),rgba(255,255,255,.1) calc(100% - 1px));
}
.emotion-3 {
@ -91,7 +91,7 @@ exports[`Storyshots UI|Panel default 1`] = `
border-bottom: 3px solid transparent;
font-weight: bold;
font-size: 13px;
opacity: 0.4;
color: inherit;
border-bottom-color: transparent;
}
@ -290,7 +290,7 @@ exports[`Storyshots UI|Panel no panels 1`] = `
.emotion-1 {
padding: 30px;
text-align: center;
color: #666666;
color: #FFFFFF;
font-size: 13px;
}

18
lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot
View File

@ -71,14 +71,14 @@ Array [
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
background: #FFFFFF;
background: #333333;
color: #999999;
height: 40px;
position: relative;
overflow: auto;
overflow-x: auto;
overflow-y: hidden;
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
background: #333333 linear-gradient(to bottom,transparent calc(100% - 1px),rgba(255,255,255,.1) calc(100% - 1px));
position: absolute;
left: 0;
right: 0;
@ -93,7 +93,7 @@ Array [
.emotion-9 {
width: 1px;
height: 24px;
background: rgba(0,0,0,.1);
background: rgba(255,255,255,.1);
margin-top: 8px;
}
@ -231,7 +231,7 @@ Array [
height: 100%;
-webkit-transition: background .1s linear;
transition: background .1s linear;
background: #FFFFFF;
background: #333333;
}
.emotion-0 {
@ -343,7 +343,7 @@ Array [
border-bottom: 3px solid transparent;
font-weight: bold;
font-size: 13px;
opacity: 0.4;
color: inherit;
border-bottom-color: transparent;
}
@ -456,14 +456,14 @@ Array [
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
background: #FFFFFF;
background: #333333;
color: #999999;
height: 40px;
position: relative;
overflow: auto;
overflow-x: auto;
overflow-y: hidden;
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
background: #333333 linear-gradient(to bottom,transparent calc(100% - 1px),rgba(255,255,255,.1) calc(100% - 1px));
position: absolute;
left: 0;
right: 0;
@ -478,7 +478,7 @@ Array [
.emotion-5 {
width: 1px;
height: 24px;
background: rgba(0,0,0,.1);
background: rgba(255,255,255,.1);
margin-top: 8px;
}
@ -650,7 +650,7 @@ Array [
height: 100%;
-webkit-transition: background .1s linear;
transition: background .1s linear;
background: #FFFFFF;
background: #333333;
}
.emotion-0 {

60
lib/ui/src/settings/__snapshots__/about.stories.storyshot
View File

@ -23,14 +23,14 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
background: #FFFFFF;
background: #333333;
color: #999999;
height: 40px;
position: relative;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
background: #333333 linear-gradient(to bottom,transparent calc(100% - 1px),rgba(255,255,255,.1) calc(100% - 1px));
}
.emotion-2 {
@ -217,7 +217,7 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
display: flex;
padding-top: 20px;
margin-top: 20px;
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
font-weight: 700;
}
@ -340,7 +340,7 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
height: 40px;
padding: 10px 20px;
margin-bottom: 24px;
border: 1px solid rgba(0,0,0,.1);
border: 1px solid rgba(255,255,255,.1);
text-align: center;
}
@ -526,14 +526,14 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
background: #FFFFFF;
background: #333333;
color: #999999;
height: 40px;
position: relative;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
background: #333333 linear-gradient(to bottom,transparent calc(100% - 1px),rgba(255,255,255,.1) calc(100% - 1px));
}
.emotion-2 {
@ -672,7 +672,7 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
display: flex;
padding-top: 20px;
margin-top: 20px;
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
font-weight: 700;
}
@ -893,7 +893,7 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
.emotion-16 h2 {
font-size: 24px;
border-bottom: 1px solid rgba(0,0,0,.1);
border-bottom: 1px solid rgba(255,255,255,.1);
}
.emotion-16 h3 {
@ -1057,7 +1057,7 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
.emotion-16 hr {
border: 0 none;
color: rgba(0,0,0,.1);
color: rgba(255,255,255,.1);
height: 4px;
padding: 0;
}
@ -1180,7 +1180,7 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
}
.emotion-16 table tr {
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
background-color: white;
margin: 0;
padding: 0;
@ -1192,14 +1192,14 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
.emotion-16 table tr th {
font-weight: bold;
border: 1px solid rgba(0,0,0,.1);
border: 1px solid rgba(255,255,255,.1);
text-align: left;
margin: 0;
padding: 6px 13px;
}
.emotion-16 table tr td {
border: 1px solid rgba(0,0,0,.1);
border: 1px solid rgba(255,255,255,.1);
text-align: left;
margin: 0;
padding: 6px 13px;
@ -1324,20 +1324,20 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
height: 40px;
padding: 10px 20px;
margin-bottom: 24px;
border: 1px solid rgba(0,0,0,.1);
border: 1px solid rgba(255,255,255,.1);
text-align: center;
}
.emotion-30 {
margin-top: 20px;
padding-bottom: 20px;
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
}
.emotion-22 {
position: relative;
overflow: hidden;
border: 1px solid rgba(0,0,0,.1);
border: 1px solid rgba(255,255,255,.1);
}
.emotion-19 {
@ -1525,6 +1525,7 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
background: #333333;
}
.emotion-20 {
@ -1539,22 +1540,23 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #666666;
color: #FFFFFF;
background: #333333;
font-size: 12px;
line-height: 16px;
font-weight: 700;
border-top: 1px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
border-left: 1px solid rgba(255,255,255,.1);
margin-left: -1px;
border-radius: 4px 0 0 0;
}
.emotion-20:not(:last-child) {
border-right: 1px solid rgba(0,0,0,.1);
border-right: 1px solid rgba(255,255,255,.1);
}
.emotion-20 + * {
border-left: 1px solid rgba(0,0,0,.1);
border-left: 1px solid rgba(255,255,255,.1);
border-radius: 0;
}
@ -1846,14 +1848,14 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
background: #FFFFFF;
background: #333333;
color: #999999;
height: 40px;
position: relative;
overflow: visible;
overflow-x: visible;
overflow-y: visible;
background: #FFFFFF linear-gradient(to bottom,transparent calc(100% - 1px),rgba(0,0,0,.1) calc(100% - 1px));
background: #333333 linear-gradient(to bottom,transparent calc(100% - 1px),rgba(255,255,255,.1) calc(100% - 1px));
}
.emotion-2 {
@ -1992,7 +1994,7 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
display: flex;
padding-top: 20px;
margin-top: 20px;
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
font-weight: 700;
}
@ -2106,7 +2108,7 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
height: 40px;
padding: 10px 20px;
margin-bottom: 24px;
border: 1px solid rgba(0,0,0,.1);
border: 1px solid rgba(255,255,255,.1);
text-align: center;
}
@ -2224,7 +2226,7 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
.emotion-16 h2 {
font-size: 24px;
border-bottom: 1px solid rgba(0,0,0,.1);
border-bottom: 1px solid rgba(255,255,255,.1);
}
.emotion-16 h3 {
@ -2388,7 +2390,7 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
.emotion-16 hr {
border: 0 none;
color: rgba(0,0,0,.1);
color: rgba(255,255,255,.1);
height: 4px;
padding: 0;
}
@ -2511,7 +2513,7 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
}
.emotion-16 table tr {
border-top: 1px solid rgba(0,0,0,.1);
border-top: 1px solid rgba(255,255,255,.1);
background-color: white;
margin: 0;
padding: 0;
@ -2523,14 +2525,14 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
.emotion-16 table tr th {
font-weight: bold;
border: 1px solid rgba(0,0,0,.1);
border: 1px solid rgba(255,255,255,.1);
text-align: left;
margin: 0;
padding: 6px 13px;
}
.emotion-16 table tr td {
border: 1px solid rgba(0,0,0,.1);
border: 1px solid rgba(255,255,255,.1);
text-align: left;
margin: 0;
padding: 6px 13px;