graphics: main optimizations

Author: ChrisUser

.gitignore

@@ -1,4 +1,5 @@
 node_modules/
+docs-build/
 coverage/
 build/
 debug.log

src/UsageBarDark.stories.tsx

@@ -31,40 +31,42 @@ const items = [
   },
 ]
 
+const mainDarkModeContainerStyle = { backgroundColor: "#212121", padding: 16 }
+
 export const darkMode = () => (
-  <div style={{ backgroundColor: "#212121" }}>
+  <div style={mainDarkModeContainerStyle}>
     <UsageBar darkMode items={items} total={100} />
   </div>
 )
 
 export const darkModeWithoutLabels = () => (
-  <div style={{ backgroundColor: "#212121" }}>
+  <div style={mainDarkModeContainerStyle}>
     <UsageBar removeLabels darkMode items={items} total={100} />
   </div>
 )
 
 export const darkModeWithPercentages = () => (
-  <div style={{ backgroundColor: "#212121" }}>
+  <div style={mainDarkModeContainerStyle}>
     <UsageBar showPercentage darkMode items={items} total={100} />
   </div>
 )
 
 export const darkModeCompact = () => (
-  <div style={{ backgroundColor: "#212121" }}>
+  <div style={mainDarkModeContainerStyle}>
     <UsageBar showPercentage compactLayout darkMode items={items} total={100} />
   </div>
 )
 
 export const darkModeCompactWithoutLabels = () => (
-  <div style={{ backgroundColor: "#212121" }}>
+  <div style={mainDarkModeContainerStyle}>
     <UsageBar removeLabels compactLayout darkMode items={items} total={100} />
   </div>
 )
 
 export const error = () => (
   <>
     <p>If sum of values exceeds total.</p>
-    <div style={{ backgroundColor: "#212121" }}>
+    <div style={mainDarkModeContainerStyle}>
       <UsageBar items={items} total={50} />
     </div>
   </>

src/index.css

@@ -20,13 +20,11 @@
 .u-UsageBar-dark {
   --text-color: hsl(0, 0%, 13%);
   --background-tooltip-color: hsl(0, 0%, 100%);
-  --background-bar-color: hsl(0, 0%, 30%);
+  --background-bar-color: hsl(0, 0%, 25%);
 }
 
 .c-UsageBar {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   display: flex;
@@ -37,7 +35,6 @@
   background-color: inherit;
   color: inherit;
   font-size: 1em;
-  padding: 8pt;
   position: relative;
   height: 60pt;
   width: 100%;
@@ -127,24 +124,23 @@
 .o-UsageBar__compact__bar {
   max-width: 500px;
 }
+.o-UsageBar__bar__elements__labels__container,
+.o-UsageBar__bar__elements__label {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: row;
+}
 .o-UsageBar__bar__elements__labels__container {
   margin-top: 12pt;
   position: relative;
   width: 100%;
   max-width: 480px;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  flex-direction: row;
   flex-wrap: wrap;
   gap: 12pt;
   font-size: 0.9em;
 }
 .o-UsageBar__bar__elements__label {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  flex-direction: row;
   flex-wrap: nowrap;
 }
 .o-UsageBar__bar__elements__label > span,