fix(colors): fix small coloring issues

Also add a dark color scheme.

example/src/pages/Home.tsx

@@ -33,7 +33,7 @@ export const Home: FunctionalComponent = () => (
         </p>
       </Card>
     </Grid>
-    <Grid size="6" desktopSize="7" mobileSize="12">
+    <Grid size="6" desktopSize="5" mobileSize="12">
       <Card>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla congue
@@ -60,10 +60,12 @@ export const Home: FunctionalComponent = () => (
         </p>
       </Card>
     </Grid>
-    <Grid size="6" desktopSize="5" mobileSize="12">
+    <Grid size="6" desktopSize="7" mobileSize="12">
       <Container direction="column">
         <Grid size="12" mobileSize="12">
           <Card primary>
+            <h1>Primary</h1>
+            <h2>With different colors!</h2>
             <p>
               Quisque quis convallis ex. Nulla blandit sollicitudin urna, non
               elementum sem egestas nec. Nam tristique, justo volutpat auctor
@@ -81,6 +83,7 @@ export const Home: FunctionalComponent = () => (
         </Grid>
         <Grid size="12" mobileSize="12">
           <Card secondary>
+            <h1>Secondary</h1>
             <p>
               Cras non mauris facilisis dui ornare efficitur et sodales augue.
               Vivamus eu pulvinar leo. Nullam laoreet imperdiet nisl ut sodales.

example/src/pages/Overview.tsx

@@ -1,14 +1,19 @@
 import { h, FunctionalComponent } from "preact";
-import { card } from "teenyui";
+import { card, layout } from "teenyui";
 
 const { Card } = card;
+const { Container, Grid } = layout;
 
 export const Overview: FunctionalComponent = () => (
-  <Card>
-    <h1>Overview</h1>
-    <p>
-      There should be a general overview of all components here, but this has
-      not been done yet.
-    </p>
-  </Card>
+  <Container direction="column">
+    <Grid size="12">
+      <Card>
+        <h1>Overview</h1>
+        <p>
+          There should be a general overview of all components here, but this
+          has not been done yet.
+        </p>
+      </Card>
+    </Grid>
+  </Container>
 );

example/src/pages/components/Button.tsx

@@ -5,66 +5,71 @@ import {
   faInfinity,
   faBars,
 } from "@fortawesome/free-solid-svg-icons";
-import { Button as ButtonComp, card, Icon } from "teenyui";
+import { Button as ButtonComp, card, Icon, layout } from "teenyui";
 import { timeout } from "~utils";
 
 const { Card } = card;
+const { Container, Grid } = layout;
 
 export const Button: FunctionalComponent = () => (
-  <Card>
-    <h1>Button</h1>
-    <h4>Clicky buttons are fun!</h4>
-    <ButtonComp
-      onClick={async () => {
-        await timeout(5000);
-        alert("You clicked me!");
-      }}
-    >
-      Delayed Hello!
-    </ButtonComp>
-    <ButtonComp secondary>Secondary Button</ButtonComp>
-    <ButtonComp
-      ghost
-      onClick={async () => {
-        await timeout(3000);
-        alert("Hello world!");
-      }}
-    >
-      Ghost Button
-    </ButtonComp>
-    <ButtonComp>
-      <Icon icon={faBalanceScale} />
-      With Icon!
-    </ButtonComp>
-    <ButtonComp>
-      <Icon icon={faBolt} />
-    </ButtonComp>
-    <ButtonComp secondary>
-      <Icon icon={faInfinity} />
-    </ButtonComp>
-    <ButtonComp ghost>
-      <Icon icon={faBars} />
-    </ButtonComp>
-    <ButtonComp round>
-      <Icon icon={faBalanceScale} />
-    </ButtonComp>
-    <ButtonComp round secondary>
-      <Icon icon={faBolt} />
-    </ButtonComp>
-    <ButtonComp round ghost>
-      <Icon icon={faInfinity} />
-    </ButtonComp>
-    <ButtonComp full>
-      <Icon icon={faInfinity} />
-      Full width!
-    </ButtonComp>
-    <ButtonComp full secondary>
-      <Icon icon={faInfinity} />
-      Full secondary!
-    </ButtonComp>
-    <ButtonComp full ghost>
-      <Icon icon={faInfinity} />
-      Full ghost!
-    </ButtonComp>
-  </Card>
+  <Container direction="column">
+    <Grid size="12">
+      <Card>
+        <h1>Button</h1>
+        <h4>Clicky buttons are fun!</h4>
+        <ButtonComp
+          onClick={async () => {
+            await timeout(5000);
+            alert("You clicked me!");
+          }}
+        >
+          Delayed Hello!
+        </ButtonComp>
+        <ButtonComp secondary>Secondary Button</ButtonComp>
+        <ButtonComp
+          ghost
+          onClick={async () => {
+            await timeout(3000);
+            alert("Hello world!");
+          }}
+        >
+          Ghost Button
+        </ButtonComp>
+        <ButtonComp>
+          <Icon icon={faBalanceScale} />
+          With Icon!
+        </ButtonComp>
+        <ButtonComp>
+          <Icon icon={faBolt} />
+        </ButtonComp>
+        <ButtonComp secondary>
+          <Icon icon={faInfinity} />
+        </ButtonComp>
+        <ButtonComp ghost>
+          <Icon icon={faBars} />
+        </ButtonComp>
+        <ButtonComp round>
+          <Icon icon={faBalanceScale} />
+        </ButtonComp>
+        <ButtonComp round secondary>
+          <Icon icon={faBolt} />
+        </ButtonComp>
+        <ButtonComp round ghost>
+          <Icon icon={faInfinity} />
+        </ButtonComp>
+        <ButtonComp full>
+          <Icon icon={faInfinity} />
+          Full width!
+        </ButtonComp>
+        <ButtonComp full secondary>
+          <Icon icon={faInfinity} />
+          Full secondary!
+        </ButtonComp>
+        <ButtonComp full ghost>
+          <Icon icon={faInfinity} />
+          Full ghost!
+        </ButtonComp>
+      </Card>
+    </Grid>
+  </Container>
 );

src/base/style.scss

@@ -5,30 +5,30 @@
   min-height: 100%;
   font-size: 16px;
   letter-spacing: 0.5px;
-  background: var(--background);
-  color: var(--text-color);
+  color: rgb(var(--text));
+  background: rgb(var(--background-secondary));
   font-family: var(--font);
 
   h1 {
-    font-size: 2.8em;
+    font-size: 2em;
     font-weight: 250;
     letter-spacing: -1.2px;
   }
 
   h2 {
-    font-size: 2.4em;
+    font-size: 1.6em;
     font-weight: 250;
     letter-spacing: -1.2px;
   }
 
   h3 {
-    font-size: 1.8em;
+    font-size: 1.3em;
     font-weight: normal;
     letter-spacing: 0;
   }
 
   h4 {
-    font-size: 1.4em;
+    font-size: 1.2em;
     font-weight: normal;
     letter-spacing: 0.25px;
   }
@@ -46,25 +46,25 @@
   }
 
   h1,
-  h2,
+  h3,
   h5 {
-    margin: 0 0 2px;
-    color: var(--text-color-header);
+    margin: 4px 0;
+    color: rgba(var(--text), 0.9);
   }
 
-  h3,
+  h2,
   h4,
   h6 {
-    margin: 0 0 4px;
-    color: var(--text-color-subheader);
+    margin: 4px 0;
+    color: rgba(var(--text), 0.75);
   }
 
   p {
     margin: 0 0 8px;
   }
 
-  :not(nav) > a {
-    color: var(--text-color-header);
+  a {
+    color: rgba(var(--text), 0.85);
     text-decoration: underline;
   }
 

src/button/style.scss

@@ -5,11 +5,11 @@
   align-items: center;
   min-width: 20px;
 
-  border: 2px solid var(--primary-color);
+  border: 2px solid rgb(var(--primary));
   border-radius: 0.3em;
 
-  color: var(--primary-color-text);
-  background: rgba(var(--primary-color-rgb), 0.8);
+  color: rgb(var(--primary-text));
+  background: rgba(var(--primary), 0.8);
   backdrop-filter: blur(16px);
   cursor: pointer;
 
@@ -29,15 +29,15 @@
 }
 
 .secondary {
-  color: var(--secondary-color-text);
-  background: rgba(var(--secondary-color-rgb), 0.8);
-  border: 2px solid var(--secondary-color);
+  color: rgb(var(--secondary-text));
+  border: 2px solid rgb(var(--secondary));
+  background: rgba(var(--secondary), 0.8);
 }
 
 .ghost {
-  color: var(--text-color-header);
-  background: rgba(var(--background-rgb), 0.1);
-  border: 2px solid var(--text-color-header);
+  color: rgb(var(--text));
+  border: 2px solid rgb(var(--text));
+  background: rgba(var(--background), 0.125);
   font-weight: 500;
 
   &:disabled {

src/card/card/style.scss

@@ -3,16 +3,50 @@
   margin: 8px 6px;
   padding: 12px;
   border-radius: 0.3em;
-  box-shadow: 0 2px 4px 0 var(--background-border);
-  background-color: var(--background-secondary);
+  background: rgba(var(--background), 0.2);
+  box-shadow: 0 1px 4px 0 rgba(var(--background), 0.75);
 }
 
 .primary {
-  color: var(--primary-color-text);
-  background-color: var(--primary-color);
+  background: rgb(var(--primary));
+  box-shadow: 0 2px 4px 0 rgb(var(--primary));
+  color: rgb(var(--primary-text));
+
+  h1,
+  h3,
+  h5 {
+    color: rgba(var(--primary-text), 0.7);
+  }
+
+  h2,
+  h4,
+  h6 {
+    color: rgba(var(--primary-text), 0.5);
+  }
+
+  a {
+    color: rgb(var(--primary-text));
+  }
 }
 
 .secondary {
-  color: var(--secondary-color-text);
-  background-color: var(--secondary-color);
+  background: rgb(var(--secondary));
+  box-shadow: 0 2px 4px 0 rgb(var(--secondary));
+  color: rgb(var(--secondary-text));
+
+  h1,
+  h3,
+  h5 {
+    color: rgba(var(--secondary-text), 0.7);
+  }
+
+  h2,
+  h4,
+  h6 {
+    color: rgba(var(--secondary-text), 0.5);
+  }
+
+  a {
+    color: rgb(var(--secondary-text));
+  }
 }

src/card/hero/style.scss

@@ -1,11 +1,17 @@
+@import "../../mixins";
+
 .hero {
   width: 100%;
   position: relative;
   overflow: hidden;
   z-index: 100;
-  min-height: 36vh;
+  height: 36vh;
   border-radius: 6px;
   margin: 8px 6px;
+
+  @include breakpoint(max, medium) {
+    height: 28vh;
+  }
 }
 
 .image {
@@ -20,17 +26,11 @@
   position: absolute;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-end;
   text-align: center;
   padding-top: 0.6em;
   top: 0;
-  bottom: 0;
+  bottom: 20%;
   left: 0;
   right: 0;
-
-  img {
-    max-height: 6em;
-    max-width: 80%;
-    padding-bottom: 1.2em;
-  }
 }

src/sidebar/item/style.scss

@@ -4,26 +4,26 @@
   border-radius: 6px;
   display: flex;
   align-items: center;
-  color: var(--text-color);
-  text-decoration: none;
+  text-decoration: none !important;
+  color: rgb(var(--text));
 
   svg {
-    color: var(--text-color-header);
+    color: rgba(var(--text), 0.85);
     width: 2em;
     margin-right: 4px;
   }
 
   &:hover:not(.active) {
-    color: var(--text-color-header);
-    background: var(--background-secondary);
+    color: rgba(var(--text), 0.85);
+    background: rgba(var(--background), 0.2);
   }
 }
 
 .active {
-  background: rgba(var(--primary-color-rgb), 0.25);
-  color: rgba(var(--primary-color-rgb), 0.95);
+  background: rgba(var(--primary), 0.25);
+  color: rgba(var(--primary), 0.95);
 
   svg {
-    color: var(--primary-color);
+    color: rgb(var(--primary));
   }
 }

src/sidebar/sidebar/style.scss

@@ -9,10 +9,10 @@
   flex: 0 0 100vw;
   z-index: 1001;
   backdrop-filter: blur(24px);
-  background: rgba(var(--background-rgb), 0.6);
+  background: rgba(var(--background-secondary), 0.85);
 
   @supports not (backdrop-filter: blur(12px)) {
-    background: var(--background);
+    background: rgb(var(--background));
   }
 
   @include breakpoint(min, small) {
@@ -43,8 +43,7 @@
     font-weight: lighter;
     font-size: 0.7em;
     text-transform: uppercase;
-    color: var(--text-color-header);
-    font-family: var(--font);
+    color: rgba(var(--text), 0.85);
   }
 }
 

theme/dark.scss

@@ -0,0 +1,11 @@
+html {
+  --text: 240, 243, 245;
+  --primary: 85, 110, 230;
+  --primary-text: 233, 236, 252;
+  --secondary: 230, 104, 104;
+  --secondary-text: 245, 247, 255;
+  --background: 52, 65, 75;
+  --background-secondary: 21, 26, 30;
+
+  --font: "Open Sans", Arial, Helvetica, sans-serif;
+}

theme/light.scss

@@ -1,17 +1,11 @@
 html {
-  --primary-color: #272ab0;
-  --primary-color-rgb: 39, 42, 176;
-  --primary-color-text: #f1f3ff;
-  --secondary-color: #e04e15;
-  --secondary-color-rgb: 224, 78, 21;
-  --secondary-color-text: #ffffdb;
-  --text-color: #585757;
-  --text-color-header: #1c1c1c;
-  --text-color-subheader: #969696;
-  --background: #f7f7f7;
-  --background-rgb: 247, 247, 247;
-  --background-secondary: #fff;
-  --background-border: #d6d6d6;
+  --text: 10, 36, 38;
+  --primary: 39, 42, 176;
+  --primary-text: 241, 243, 255;
+  --secondary: 224, 78, 21;
+  --secondary-text: 255, 255, 219;
+  --background: 195, 203, 203;
+  --background-secondary: 255, 255, 255;
 
   --font: "Open Sans", Arial, Helvetica, sans-serif;
 }