Skip to content

Commit

Permalink
Overhaul color variables. Improve gradient support on all types.
Browse files Browse the repository at this point in the history
  • Loading branch information
@HiroAgustin
HiroAgustin committed Jul 21, 2020
1 parent e13146a commit 567d6e8
Showing 1 changed file with 82 additions and 53 deletions.
135 changes: 82 additions & 53 deletions knopf.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
--knopf-saturation: 77%;
--knopf-luminosity: 37%;

--knopf-white: 0 0% 100%;

/* ==========================================================================
Sizes
========================================================================== */
Expand Down Expand Up @@ -44,7 +46,7 @@
--knopf-border-radius: 0.33em;
--knopf-border-style: solid;
--knopf-border-width: 1px;
--knopf-border-alpha: 33%;
--knopf-border-alpha: 0%;

/* Text */
--knopf-font-family: inherit;
Expand Down Expand Up @@ -85,19 +87,22 @@
--knopf-color-darker: var(--knopf-hue) var(--knopf-saturation) calc(var(--knopf-luminosity) - 15%);

/* Default */
--knopf-background-color: hsl(var(--knopf-color));
--knopf-border-color: transparent;
--knopf-text-color: white;
--knopf-background-alpha: 100%;
--knopf-background-color: var(--knopf-color);
--knopf-border-color: var(--knopf-color);
--knopf-text-color: var(--knopf-white);

/* Hover */
--knopf-hover-background-color: hsl(var(--knopf-color-dark));
--knopf-hover-border-color: transparent;
--knopf-hover-text-color: white;
--knopf-hover-background-alpha: 100%;
--knopf-hover-background-color: var(--knopf-color-dark);
--knopf-hover-border-color: var(--knopf-color-dark);
--knopf-hover-text-color: var(--knopf-white);

/* Active */
--knopf-active-background-color: hsl(var(--knopf-color-darker));
--knopf-active-border-color: transparent;
--knopf-active-text-color: white;
--knopf-active-background-alpha: 100%;
--knopf-active-background-color: var(--knopf-color-darker);
--knopf-active-border-color: var(--knopf-color-darker);
--knopf-active-text-color: var(--knopf-white);

/* Spacing */
--knopf-block-padding: var(--knopf-padding);
Expand All @@ -106,16 +111,17 @@
/* Properties */
all: unset;
align-items: center;
background-color: var(--knopf-background-color);
background-clip: padding-box;
background-color: hsl(var(--knopf-background-color) / var(--knopf-background-alpha));
background-image: var(--knopf-background-image);
border-color: var(--knopf-border-color);
border-color: hsl(var(--knopf-border-color) / var(--knopf-border-alpha));
border-radius: var(--knopf-border-radius);
border-style: var(--knopf-border-style);
border-width: var(--knopf-border-width);
box-shadow: var(--knopf-box-shadow);
box-sizing: border-box;
color: var(--knopf-text-color);
-webkit-text-fill-color: var(--knopf-text-color);
color: hsl(var(--knopf-text-color));
-webkit-text-fill-color: hsl(var(--knopf-text-color));
cursor: pointer;
display: var(--knopf-display);
flex-direction: var(--knopf-flex-direction);
Expand All @@ -142,44 +148,51 @@

.knopf.inverse {
/* base */
--knopf-background-color: transparent;
--knopf-text-color: hsl(var(--knopf-color));
--knopf-background-alpha: 0%;
--knopf-text-color: var(--knopf-color);

/* hover */
--knopf-hover-background-color: hsl(var(--knopf-color));
--knopf-hover-text-color: white;
--knopf-hover-background-alpha: 100%;
--knopf-hover-background-color: var(--knopf-color);
--knopf-hover-text-color: var(--knopf-white);

/* active */
--knopf-active-background-color: hsl(var(--knopf-color-dark));
--knopf-active-text-color: white;
--knopf-hover-background-alpha: 100%;
--knopf-active-background-color: var(--knopf-color-dark);
--knopf-active-text-color: var(--knopf-white);
}

.knopf.flat {
/* base */
--knopf-background-color: transparent;
--knopf-text-color: hsl(var(--knopf-color));
--knopf-background-alpha: 0;
--knopf-text-color: var(--knopf-color);

/* hover */
--knopf-hover-background-color: hsl(var(--knopf-color) / 15%);
--knopf-hover-text-color: hsl(var(--knopf-color-dark));
--knopf-hover-background-alpha: 15%;
--knopf-hover-background-color: var(--knopf-color);
--knopf-hover-text-color: var(--knopf-color-dark);

/* active */
--knopf-active-background-color: hsl(var(--knopf-color) / 25%);
--knopf-active-text-color: hsl(var(--knopf-color-darker));
--knopf-active-background-alpha: 25%;
--knopf-active-background-color: var(--knopf-color);
--knopf-active-text-color: var(--knopf-color-darker);
}

.knopf.pale {
/* base */
--knopf-background-color: hsl(var(--knopf-color) / 10%);
--knopf-text-color: hsl(var(--knopf-color));
--knopf-background-alpha: 10%;
--knopf-background-color: var(--knopf-color);
--knopf-text-color: var(--knopf-color);

/* hover */
--knopf-hover-background-color: hsl(var(--knopf-color) / 20%);
--knopf-hover-text-color: hsl(var(--knopf-color-dark));
--knopf-hover-background-alpha: 20%;
--knopf-hover-background-color: var(--knopf-color);
--knopf-hover-text-color: var(--knopf-color-dark);

/* active */
--knopf-active-background-color: hsl(var(--knopf-color) / 30%);
--knopf-active-text-color: hsl(var(--knopf-color-darker));
--knopf-active-background-alpha: 30%;
--knopf-active-background-color: var(--knopf-color);
--knopf-active-text-color: var(--knopf-color-darker);
}

/* ==========================================================================
Expand All @@ -202,8 +215,11 @@
/* Hover */
.knopf.knopf:hover,
.knopf.knopf:active {
--knopf-background-alpha: var(--knopf-hover-background-alpha);
--knopf-background-color: var(--knopf-hover-background-color);
--knopf-border-color: var(--knopf-hover-border-color);
--knopf-gradient-from: var(--knopf-hover-gradient-from);
--knopf-gradient-to: var(--knopf-hover-gradient-to);
--knopf-text-color: var(--knopf-hover-text-color);
--knopf-text-decoration-color: var(--knopf-hover-text-decoration-color);
}
Expand All @@ -218,8 +234,11 @@

/* Active */
.knopf.active {
--knopf-background-alpha: var(--knopf-active-background-alpha);
--knopf-background-color: var(--knopf-active-background-color);
--knopf-border-color: var(--knopf-active-border-color);
--knopf-gradient-from: var(--knopf-active-gradient-from);
--knopf-gradient-to: var(--knopf-active-gradient-to);
--knopf-text-color: var(--knopf-active-text-color);
--knopf-text-decoration-color: var(--knopf-active-text-decoration-color);
}
Expand Down Expand Up @@ -252,21 +271,15 @@

.knopf.traced,
.knopf.outlined {
--knopf-border-color: hsl(var(--knopf-color) / var(--knopf-border-alpha));
--knopf-hover-border-color: hsl(var(--knopf-color) / var(--knopf-border-alpha));
--knopf-active-border-color: hsl(var(--knopf-color) / var(--knopf-border-alpha));
}

.knopf.outlined {
--knopf-border-alpha: 1;
--knopf-border-color: var(--knopf-color);
}

.knopf.gradient {
--knopf-background-image: linear-gradient(hsl(var(--knopf-color-light)), hsl(var(--knopf-color-dark)));
.knopf.traced {
--knopf-border-alpha: 33%;
}

.knopf.gradient:hover {
--knopf-background-image: linear-gradient(hsl(var(--knopf-color-lighter)), hsl(var(--knopf-color)));
.knopf.outlined {
--knopf-border-alpha: 100%;
}

/* ==========================================================================
Expand Down Expand Up @@ -319,10 +332,26 @@
Other
========================================================================== */

.knopf.gradient {
--knopf-background-color: var(--knopf-white);
--knopf-hover-background-color: var(--knopf-white);
--knopf-active-background-color: var(--knopf-white);

--knopf-gradient-from: var(--knopf-color-light);
--knopf-gradient-to: var(--knopf-color-dark);

--knopf-hover-gradient-from: var(--knopf-color-lighter);
--knopf-hover-gradient-to: var(--knopf-color);

--knopf-active-gradient-from: var(--knopf-color);
--knopf-active-gradient-to: var(--knopf-color-darker);

--knopf-background-image: linear-gradient(hsl(var(--knopf-gradient-from) / var(--knopf-background-alpha)), hsl(var(--knopf-gradient-to) / var(--knopf-background-alpha)));
}

.knopf.link {
--knopf-border-width: 0;
--knopf-border-radius: 0;
--knopf-font-size: 1em;
--knopf-padding: 0;

/* Text decoration */
Expand All @@ -332,19 +361,19 @@
--knopf-active-text-decoration-color: hsl(var(--knopf-color-darker));

/* base */
--knopf-background-color: transparent;
--knopf-border-color: transparent;
--knopf-text-color: hsl(var(--knopf-color));
--knopf-background-alpha: 0;
--knopf-border-alpha: 0;
--knopf-text-color: var(--knopf-color);

/* hover */
--knopf-hover-background-color: transparent;
--knopf-hover-border-color: transparent;
--knopf-hover-text-color: hsl(var(--knopf-color-dark));
--knopf-hover-background-alpha: 0;
--knopf-hover-border-alpha: 0;
--knopf-hover-text-color: var(--knopf-color-dark);

/* active */
--knopf-active-background-color: transparent;
--knopf-active-border-color: transparent;
--knopf-active-text-color: hsl(var(--knopf-color-darker));
--knopf-active-background-alpha: 0;
--knopf-active-border-alpha: 0;
--knopf-active-text-color: var(--knopf-color-darker);
}

/* ==========================================================================
Expand Down

0 comments on commit 567d6e8

Please sign in to comment.