[design-system] nitpick on button hover opacity and graph summary gap

Author: Arthur Desaintjan

packages/gephi-lite/src/components/GraphSummary.tsx

@@ -181,7 +181,7 @@ export const GraphSummary: FC<{ className?: string }> = ({ className }) => {
     <div className={cx("graph-summary d-flex flex-column gl-gap-2", className)}>
       <GraphTitleEditable title={metadata.title} save={saveTitle} />
       <div className="gl-px-2 gl-gap-x-2 d-flex flex-column position-relative">
-        <div className="d-flex flex-row flex-wrap gl-gap-x-2 gl-gap-y-3" style={{ lineHeight: 1.2 }}>
+        <div className="d-flex flex-row flex-wrap gl-gap-x-3 gl-gap-y-3" style={{ lineHeight: 1.2 }}>
           <GraphStat type="nodes" current={filteredGraph.order} total={fullGraph.order} />
           <GraphStat type="edges" current={filteredGraph.size} total={fullGraph.size} />
         </div>

packages/gephi-lite/src/designSystem/Buttons.mdx

@@ -248,8 +248,8 @@ For exemple :
 
 The opacity of each states are defined as gl variables:
 
-- `$gl-sys-proportion-component-hover-color-mix: $gl-ref-proportion-12; //12%`
-- `$gl-sys-proportion-component-focus-color-mix: $gl-ref-proportion-12; //12%`
+- `$gl-sys-proportion-component-hover-color-mix: $gl-ref-proportion-8; //8%`
+- `$gl-sys-proportion-component-focus-color-mix: $gl-ref-proportion-8; //8%`
 - `$gl-sys-proportion-component-active-color-mix: $gl-ref-proportion-24; //24%`
 - `$gl-sys-proportion-component-disabled-color-mix: $gl-ref-proportion-16; //16%`
 

packages/gephi-lite/src/styles/gl/_variables.scss

@@ -86,8 +86,8 @@ $gl-sys-color-dark-onComponentBg: $gl-ref-color-neutral-80;
 
 //----Color Mix Proportion
 //----Components
-$gl-sys-proportion-component-hover-color-mix: $gl-ref-proportion-12; //12%
-$gl-sys-proportion-component-focus-color-mix: $gl-ref-proportion-12; //12%
+$gl-sys-proportion-component-hover-color-mix: $gl-ref-proportion-8; //8%
+$gl-sys-proportion-component-focus-color-mix: $gl-ref-proportion-8; //8%
 $gl-sys-proportion-component-active-color-mix: $gl-ref-proportion-24; //24%
 $gl-sys-proportion-component-disabled-color-mix: $gl-ref-proportion-16; //16%
 $gl-sys-proportion-component-border-active-color-mix: $gl-ref-proportion-64; //64%