fix(AsideHeader): panel border in High Contrast themes (#37)

* fix(AsideHeader): panel border in hc-themes * chore: add divider for story moc
gravity-ui · Feb 16, 2023 · 340f9bb · 340f9bb
1 parent 44ab5a2
commit 340f9bb
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -22,8 +22,10 @@ export const globalTypes = {
         defaultValue: 'light',
         toolbar: {
             items: [
-                {value: 'light', icon: 'circle', title: 'Light'},
-                {value: 'dark', icon: 'circlehollow', title: 'Dark'},
+                {value: 'light', right: '☼', title: 'Light'},
+                {value: 'dark', right: '☾', title: 'Dark'},
+                {value: 'light-hc', right: '☼', title: 'High Contrast Light'},
+                {value: 'dark-hc', right: '☾', title: 'High Contrast Dark'},
             ],
         },
     },

diff --git a/src/components/AsideHeader/AsideHeader.scss b/src/components/AsideHeader/AsideHeader.scss
@@ -9,14 +9,16 @@ $block: '.#{variables.$ns}aside-header';
     );
 }
 
-.yc-root_theme_light {
+.yc-root_theme_light,
+.yc-root_theme_light-hc {
     --aside-header-divider-line-color: transparent;
     --aside-header-header-divider-line-color: var(--yc-color-line-generic);
 }
 
-.yc-root_theme_dark {
-    --aside-header-divider-line-color: var(--yc-color-base-light-simple-hover);
-    --aside-header-header-divider-line-color: var(--yc-color-base-light-simple-hover);
+.yc-root_theme_dark,
+.yc-root_theme_dark-hc {
+    --aside-header-divider-line-color: var(--yc-color-line-solid);
+    --aside-header-header-divider-line-color: var(--yc-color-line-solid);
 }
 
 #{$block} {

diff --git a/src/components/CompositeBar/__stories__/moc.tsx b/src/components/CompositeBar/__stories__/moc.tsx
@@ -52,6 +52,11 @@ export const menuItemsShowcase: MenuItem[] = [
             alert(JSON.stringify({id, title, current}));
         },
     },
+    {
+        id: 'divider2',
+        title: '-',
+        type: 'divider',
+    },
     {
         id: 'id1',
         title: 'Objects',