Skip to content

Commit

Permalink
Revert "feat(AsideHeader): change default decoration, item background…
Browse files Browse the repository at this point in the history 
… colors (#238)" (#246)

This reverts commit cf75f1f.
  • Loading branch information
@Lunory
Lunory authored May 27, 2024
1 parent 62e52ac commit 1f99e7b
Show file tree
Hide file tree
Showing 5 changed files with 26 additions and 69 deletions.
36 changes: 19 additions & 17 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,25 +75,27 @@ export const Aside: FC = () => {
import {AsideHeader} from '@gravity-ui/navigation';
```

## CSS API AsideHeader
## CSS variables

Used for themization Navigation's components

| Name | Description |
| :-------------------------------------------------------- | :------------------------------------------------------------ |
| `--gn-aside-header-decoration-collapsed-background-color` | Decoration color for collapsed navigation |
| `--gn-aside-header-decoration-expanded-background-color` | Decoration color for expanded navigation |
| `--gn-aside-header-background-color` | Navigation background color |
| `--gn-aside-header-divider-horizontal-color` | All horizontal divider line color |
| `--gn-aside-header-divider-vertical-color` | Vertical divider line color between `AsideHeader` and content |
| `--gn-aside-top-panel-height` | **Read only**.`AsideHeader` top alert height |
### AsideHeader vars

| Name | Description | Default |
| :-------------------------------------------------------- | :------------------------------------------------------------ | :----------------------------: |
| `--gn-aside-header-decoration-collapsed-background-color` | Decoration color for collapsed navigation | `--g-color-base-warning-light` |
| `--gn-aside-header-decoration-expanded-background-color` | Decoration color for expanded navigation | `--g-color-base-warning-light` |
| `--gn-aside-header-background-color` | Navigation background color | `--g-color-base-background` |
| `--gn-aside-header-divider-horizontal-color` | All horizontal divider line color | `--g-color-line-generic` |
| `--gn-aside-header-divider-vertical-color` | Vertical divider line color between `AsideHeader` and content | `--g-color-line-generic` |
| `--gn-aside-top-panel-height` | **Read only**.`AsideHeader` top alert height | 0px |
| Item |
| `--gn-aside-header-general-item-icon-color` | Icon color for Subheader and Footer items |
| `--gn-aside-header-item-icon-color` | Icon color for CompositeBar items |
| `--gn-aside-header-item-text-color` | |
| `--gn-aside-header-item-background-color-hover` | |
| `--gn-aside-header-general-item-icon-color` | Icon color for Subheader and Footer items | `--g-color-text-primary` |
| `--gn-aside-header-item-icon-color` | Icon color for CompositeBar items | `--g-color-text-misc` |
| `--gn-aside-header-item-text-color` | | `--g-color-text-primary` |
| `--gn-aside-header-item-background-color-hover` | | `--g-color-base-simple-hover` |
| Current Item |
| `--gn-aside-header-item-current-background-color` | |
| `--gn-aside-header-item-current-icon-color` | |
| `--gn-aside-header-item-current-text-color` | |
| `--gn-aside-header-item-current-background-color-hover` | |
| `--gn-aside-header-item-current-background-color` | | `--g-color-base-selection` |
| `--gn-aside-header-item-current-icon-color` | | |
| `--gn-aside-header-item-current-text-color` | | `--g-color-text-primary` |
| `--gn-aside-header-item-current-background-color-hover` | | |
24 changes: 3 additions & 21 deletions src/components/AsideHeader/AsideHeader.scss
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,19 @@
@use '../variables';

@import '../../../styles/themes';

$block: '.#{variables.$ns}aside-header';

.g-root {
--gn-aside-top-panel-height: 0px;

&_theme_light {
@include gn-theme-light();
}

&_theme_light-hc {
@include gn-theme-light-hc();
}

&_theme_dark {
@include gn-theme-dark();
}

&_theme_dark-hc {
@include gn-theme-dark-hc();
}
}

#{$block} {
$class: &;
--gn-aside-header-min-width: 56px;

--_--item-icon-background-size: 38px;
--_--background-color: var(--gn-ah-background-color);
--_--decoration-collapsed-background-color: var(--gn-ah-decoration-background-color);
--_--decoration-expanded-background-color: var(--gn-ah-decoration-background-color);
--_--background-color: var(--g-color-base-background);
--_--decoration-collapsed-background-color: var(--g-color-base-warning-light);
--_--decoration-expanded-background-color: var(--g-color-base-warning-light);
--_--vertical-divider-line-color: var(--g-color-line-generic);
--_--horizontal-divider-line-color: var(--g-color-line-generic);

Expand Down
2 changes: 1 addition & 1 deletion src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ export const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps> = ({
}}
headerDecoration={
headerDecoration === undefined
? addonHeaderDecoration === BOOLEAN_OPTIONS.No
? addonHeaderDecoration === BOOLEAN_OPTIONS.Yes
: headerDecoration
}
onMenuItemsChanged={setMenuItems}
Expand Down
6 changes: 3 additions & 3 deletions src/components/CompositeBar/Item/Item.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ $block: '.#{variables.$ns}composite-bar-item';
--gn-composite-bar-item-action-size: 36px;
--_--horizontal-divider-line-color: var(--g-color-line-generic);

--_--item-background-color-hover: var(--gn-ah-hovered-item-background-color);
--_--item-background-color-hover: var(--g-color-base-simple-hover);

--_--item-general-icon-color: var(--g-color-text-primary);
--_--item-icon-color: var(--g-color-text-complementary);
--_--item-icon-color: var(--g-color-text-misc);
--_--item-text-color: var(--g-color-text-primary);

// selected item
--_--item-selected-text-color: var(--g-color-text-primary);
--_--item-selected-background-color-active: var(--gn-ah-selected-item-background-color);
--_--item-selected-background-color-active: var(--g-color-base-selection);

display: flex;
width: 100%;
Expand Down
27 changes: 0 additions & 27 deletions styles/themes.scss
View file

This file was deleted.

0 comments on commit 1f99e7b

Please sign in to comment.