Skip to content
This repository has been archived by the owner on Sep 1, 2024. It is now read-only.

Commit

Permalink
side bar branding
Browse files Browse the repository at this point in the history
  • Loading branch information
@benjokoren-ow
benjokoren-ow committed Jul 10, 2024
1 parent 271a314 commit 75c3536
Show file tree
Hide file tree
Showing 8 changed files with 134 additions and 202 deletions.
2 changes: 0 additions & 2 deletions src/css/navbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,6 @@

.navbar-sidebar__items {
height: calc(100% - 80px);
// background: var(--color-grey-light-2);

.navbar-sidebar__item {
width: 100%;
Expand Down Expand Up @@ -238,7 +237,6 @@
}
}


}

div[class^="toggle"] {
Expand Down
2 changes: 1 addition & 1 deletion src/css/overide.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
aside {
border-right: 1px solid var(--color-600);
border-right: 1px solid var(--color-border-tertiary);

nav.menu {
&::-webkit-scrollbar {
Expand Down
19 changes: 1 addition & 18 deletions src/css/search-box.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,20 +39,11 @@ div[class^="searchBox"] {
color: var(--color-neutral-112);
transition: all 150ms ease;
width: 16px;

@media (max-width: 760px) {
// color: white;
}
}

&:hover {
box-shadow: unset;
background: rgba(0, 0, 0, 0.16);

.DocSearch-Search-Icon {
// color: white;

}
}
}

Expand All @@ -63,8 +54,6 @@ div[class^="searchBox"] {
.DocSearch-Button-Placeholder {
font-size: var(--font-size-400);
padding: 0 0 0 8px;
// position: relative;
// top: -1px;
}
}

Expand All @@ -75,20 +64,14 @@ div[class^="searchBox"] {
.DocSearch-Form {
border-radius: 0;
box-shadow: unset;
border: 2px solid var(--color-800);

.DocSearch-MagnifierLabel, .DocSearch-Reset {
color: var(--color-bg);
}
}
}

.DocSearch-Screen-Icon svg {
margin: auto;
color: var(--color-bg);
}

.DocSearch-Cancel {
color: var(--color-primary);
color: var(--color-neutral-112);
}
}
4 changes: 0 additions & 4 deletions src/css/style-dark.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,6 @@ html[data-theme="dark"]{
background-color: black;
}

aside {
border-right: 1px solid var(--color-300);
}

article {

a {
Expand Down
114 changes: 57 additions & 57 deletions src/css/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,59 @@
--color-alfa-success-64: rgba(1, 137, 1, 0.64);
--color-alfa-info-16: rgba(0, 116, 199, 0.16);
--color-alfa-info-64: rgba(0, 116, 199, 0.64);


// Surface colors
--color-surface-primary: var(--color-neutral-8);
--color-surface-secondary: var(--color-neutral-16);
--color-surface-tertiary: var(--color-neutral-24);
--color-surface-quaternary: var(--color-neutral-48);
--color-surface-invert: var(--color-neutral-128);
--color-surface-brand-ow: var(--color-brand-ow);
--color-surface-critical: var(--color-functional-critical-dark);
--color-surface-warning: var(--color-functional-warning-dark);
--color-surface-success: var(--color-functional-success-dark);
--color-surface-info: var(--color-functional-info-dark);
--color-surface-focus-brand-ow: var(--color-alfa-brand);
--color-hover-on-focus-brand-ow: var(--color-alfa-brand);
--color-hover-on-surface: var(--color-alfa-dark-12);
--color-surface-note-regular: var(--color-alfa-dark-16);
--color-surface-note-critical: var(--color-alfa-critical-16);
--color-surface-note-warning: var(--color-alfa-warning-16);
--color-surface-note-success: var(--color-alfa-success-16);
--color-surface-note-info: var(--color-alfa-info-16);

// Text colors
--color-text-invert: var(--color-neutral-0);
--color-text-tertiary: var(--color-neutral-80);
--color-text-cta-ow: var(--color-neutral-128);
--color-text-brand-ow: var(--color-brand-ow);
--color-text-hover-brand-ow: var(--color-hover-brand-ow);
--color-text-critical: var(--color-functional-critical-light);
--color-text-warning: var(--color-functional-warning-light);
--color-text-success: var(--color-functional-success-light);
--color-text-info: var(--color-functional-info-light);

// Icon colors
--color-icon-secondary: var(--color-neutral-80);
--color-icon-primary: var(--color-neutral-112);
--color-icon-pure: var(--color-neutral-128);
--color-icon-cta-ow-surface: var(--color-neutral-128);
--color-icon-brand-ow: var(--color-brand-ow);
--color-icon-critical: var(--color-functional-critical-light);
--color-icon-warning: var(--color-functional-warning-light);
--color-icon-success: var(--color-functional-success-light);
--color-icon-info: var(--color-functional-info-light);

// Border colors
--color-border-secondary: var(--color-neutral-80);
--color-border-primary: var(--color-neutral-112);
--color-border-quaternary: var(--color-alfa-dark-16);
--color-border-note: var(--color-alfa-dark-32);
--color-border-critical: var(--color-alfa-critical-64);
--color-border-warning: var(--color-alfa-warning-64);
--color-border-success: var(--color-alfa-success-64);
--color-border-info: var(--color-alfa-info-64);

// Core Spaces
--space-0: 0px;
--space-50: 2px;
Expand All @@ -130,7 +182,6 @@
--space-5600: 224px;
--space-6400: 256px;


/* old brand 2021 colors dark */
--color-100: #101010;
--color-120: #1a1a1a;
Expand Down Expand Up @@ -203,69 +254,18 @@

html[data-theme="light"] {
--color-text-pure: #000000;
--color-surface-pure: #FFFFFF;
--color-text-primary: #202020;
--color-text-secondary: #404040;
--color-surface-pure: #FFFFFF;
--color-border-tertiary: #BFBFBF;
}

html[data-theme="dark"] {

// Surface colors
--color-surface-pure: var(--color-neutral-0);
--color-surface-primary: var(--color-neutral-8);
--color-surface-secondary: var(--color-neutral-16);
--color-surface-tertiary: var(--color-neutral-24);
--color-surface-quaternary: var(--color-neutral-48);
--color-surface-invert: var(--color-neutral-128);
--color-surface-brand-ow: var(--color-brand-ow);
--color-surface-critical: var(--color-functional-critical-dark);
--color-surface-warning: var(--color-functional-warning-dark);
--color-surface-success: var(--color-functional-success-dark);
--color-surface-info: var(--color-functional-info-dark);
--color-surface-focus-brand-ow: var(--color-alfa-brand);
--color-hover-on-focus-brand-ow: var(--color-alfa-brand);
--color-hover-on-surface: var(--color-alfa-dark-12);
--color-surface-note-regular: var(--color-alfa-dark-16);
--color-surface-note-critical: var(--color-alfa-critical-16);
--color-surface-note-warning: var(--color-alfa-warning-16);
--color-surface-note-success: var(--color-alfa-success-16);
--color-surface-note-info: var(--color-alfa-info-16);

// Text colors
--color-text-invert: var(--color-neutral-0);
--color-text-tertiary: var(--color-neutral-80);
--color-text-pure: var(--color-neutral-128);
--color-text-secondary: var(--color-neutral-96);
--color-text-primary: var(--color-neutral-112);
--color-text-pure: var(--color-neutral-128);
--color-text-cta-ow: var(--color-neutral-128);
--color-text-brand-ow: var(--color-brand-ow);
--color-text-hover-brand-ow: var(--color-hover-brand-ow);
--color-text-critical: var(--color-functional-critical-light);
--color-text-warning: var(--color-functional-warning-light);
--color-text-success: var(--color-functional-success-light);
--color-text-info: var(--color-functional-info-light);

// Icon colors
--color-icon-secondary: var(--color-neutral-80);
--color-icon-primary: var(--color-neutral-112);
--color-icon-pure: var(--color-neutral-128);
--color-icon-cta-ow-surface: var(--color-neutral-128);
--color-icon-brand-ow: var(--color-brand-ow);
--color-icon-critical: var(--color-functional-critical-light);
--color-icon-warning: var(--color-functional-warning-light);
--color-icon-success: var(--color-functional-success-light);
--color-icon-info: var(--color-functional-info-light);

// Border colors
--color-border-tertiary: var(--color-neutral-32);
--color-border-secondary: var(--color-neutral-80);
--color-border-primary: var(--color-neutral-112);
--color-border-quaternary: var(--color-alfa-dark-16);
--color-border-note: var(--color-alfa-dark-32);
--color-border-critical: var(--color-alfa-critical-64);
--color-border-warning: var(--color-alfa-warning-64);
--color-border-success: var(--color-alfa-success-64);
--color-border-info: var(--color-alfa-info-64);

}

*,
Expand Down
4 changes: 2 additions & 2 deletions src/theme/OWSidebar/assets/collapse.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/theme/OWSidebar/assets/expand.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 75c3536

Please sign in to comment.