Browse Source

fix(colors): fix small coloring issues

Also add a dark color scheme.
tags/v1.5.3
Dany Sluijk 2 months ago
parent
commit
40e975b595
Signed by: dsluijk GPG Key ID: EEEBA79CCB6729B0
11 changed files with 181 additions and 130 deletions
  1. +5
    -2
      example/src/pages/Home.tsx
  2. +13
    -8
      example/src/pages/Overview.tsx
  3. +62
    -57
      example/src/pages/components/Button.tsx
  4. +14
    -14
      src/base/style.scss
  5. +9
    -9
      src/button/style.scss
  6. +40
    -6
      src/card/card/style.scss
  7. +9
    -9
      src/card/hero/style.scss
  8. +8
    -8
      src/sidebar/item/style.scss
  9. +3
    -4
      src/sidebar/sidebar/style.scss
  10. +11
    -0
      theme/dark.scss
  11. +7
    -13
      theme/light.scss

+ 5
- 2
example/src/pages/Home.tsx View File

@@ -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.


+ 13
- 8
example/src/pages/Overview.tsx View File

@@ -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>
);

+ 62
- 57
example/src/pages/components/Button.tsx View File

@@ -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>
);

+ 14
- 14
src/base/style.scss View File

@@ -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;
}



+ 9
- 9
src/button/style.scss View File

@@ -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 {


+ 40
- 6
src/card/card/style.scss View File

@@ -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));
}
}

+ 9
- 9
src/card/hero/style.scss View File

@@ -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;
}
}

+ 8
- 8
src/sidebar/item/style.scss View File

@@ -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));
}
}

+ 3
- 4
src/sidebar/sidebar/style.scss View File

@@ -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);
}
}



+ 11
- 0
theme/dark.scss View File

@@ -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;
}

+ 7
- 13
theme/light.scss View File

@@ -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;
}

Loading…
Cancel
Save