Skip to content

✨ enhance(global): modified default theme of storybook. #212

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: rebrand-storybook
Choose a base branch
from
+140 −11
Open

✨ enhance(global): modified default theme of storybook. #212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5100029
✨ enhance(global): modified default theme of storybook.
creador-dev May 3, 2022
125a7a8
✨ enhance(global): modified default theme of storybook.
creador-dev May 3, 2022
a835ac7
✨ enhance(global): removed unused css.
creador-dev May 3, 2022
b8d2911
✨ enhance(global): removed border between canvas and actions.
creador-dev May 13, 2022
7061c25
✨ enhance(global): added design fixes which breaks new storybook.
creador-dev May 13, 2022
84b0430
✨ enhance(global): removed extra spacing in stories link.
creador-dev May 16, 2022
904a02d
resolved conflicts
creador-dev Sep 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 0 additions & 11 deletions .storybook/manager-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,10 +79,6 @@
display: none;
}

#storybook-explorer-menu svg {
display: none;
}

#storybook-explorer-menu .sidebar-item {
color: hsl(0, 0%, 100%);
font-size: 14px;
Expand Down Expand Up @@ -121,13 +117,6 @@
color: hsl(214, 84%, 56%);
}

#storybook-explorer-menu .sidebar-item[aria-expanded="false"]:hover,
#storybook-explorer-menu .sidebar-item[aria-expanded="true"] {
box-shadow: inset 3px 0 0 0 hsl(214, 84%, 56%);
-moz-box-shadow: inset 3px 0 0 0 hsl(214, 84%, 56%);
-webkit-box-shadow: inset 3px 0 0 0 hsl(214, 84%, 56%);
}

#storybook-explorer-menu .sidebar-item:not([data-selected="true"])[data-nodetype="group"],
#storybook-explorer-menu .sidebar-item:not([data-selected="true"])[data-nodetype="component"] {
background: transparent;
Expand Down
1 change: 1 addition & 0 deletions .storybook/manager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { addons } from '@storybook/addons';
import { create } from '@storybook/theming/create';
import logo from './logo.png';
import '../assets/global.css';

const customTheme = create({
// Base theme.
Expand Down
139 changes: 139 additions & 0 deletions assets/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* color variables */
:root {
--color-white: #fff;
--color-blue: #2F80ED;
--color-light-blue: #82B3F4;
--color-light: rgba(255, 255, 255, 0.8);
--color-faded: rgba(255, 255, 255, 0.2);
}

.os-content .sidebar-header button,
.os-content button.sidebar-subheading-action,
.os-content .sidebar-item + a,
.os-content .sidebar-subheading button > span {
display: none;
}

#root > div > div:last-child > div > div:last-child {
border-top: none;
border-left: none;
}

#storybook-explorer-menu {
margin: 16px 17px 0;
}

#storybook-explorer-menu a {
margin-left: -16px;
}

.os-content .sidebar-header img {
max-height: 40px;
}

.os-content .sidebar-subheading button {
padding-left: 0;
pointer-events: none;
}

.os-content .sidebar-item {
font: 500 14px/22px Roboto,Arial,sans-serif;
color: var(--color-white);
}

.os-content .sidebar-item > span {
order: 3;
margin-left: auto;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 8px solid var(--color-light-blue);
}

.os-content .sidebar-subheading,
.os-content .search-result-recentlyOpened {
font: 500 14px/22px Roboto,Arial,sans-serif;
letter-spacing: normal;
color: var(--color-light-blue);
margin-left: 3px;
margin-right: 3px;
}

.os-content .search-result-recentlyOpened {
margin-left: -14px;
padding: 0;
}

.os-content ol {
margin-left: 0;
}

.os-content .sidebar-item {
background: unset !important;
}

.os-content .sidebar-item svg,
.os-content .search-result-item svg {
width: 14px;
height: 14px;
color: var(--color-blue);
}

.os-content .search-field input {
font: 400 14px/20px Roboto,Arial,sans-serif;
height: auto;
background: var(--color-faded);
border-radius: 4px;
color: var(--color-white);
border: unset;
padding: 10px 10px 10px 35px;
}

.os-content .search-result-item--label {
font-size: 14px;
line-height: 16px;
color: var(--color-white);
}

.os-content .search-field svg {
width: 17px;
height: 17px;
position: absolute;
top: 11px;
color: var(--color-light) !important;
}

.os-content .search-result-item > *,
.os-content .search-result-back,
.os-content .search-result-clearHistory {
padding-left: 3px;
}

.os-content .search-result-item svg {
margin-top: 1px;
}

.os-content .search-result-item,
.os-content .search-result-back,
.os-content .search-result-clearHistory {
background: unset !important;
}

.os-content .search-result-item--label span,
.os-content .search-result-back *,
.os-content .search-result-clearHistory *,
.os-content .search-field input::placeholder {
color: var(--color-light);
}

.os-content .sidebar-item[data-selected="true"],
.os-content .sidebar-item[data-selected="true"] svg,
.os-content .sidebar-item:hover,
.os-content .sidebar-item:focus,
.os-content .search-result-item:hover *,
.os-content .search-result-back:hover *,
.os-content .search-result-clearHistory:hover * {
font-weight: 500;
color: var(--color-blue);
}