From 567d6e886ec1265b4592f3146beec306d802d304 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20D=C3=ADaz?= <me@adiaz.uy>
Date: Tue, 21 Jul 2020 11:52:56 +0200
Subject: [PATCH] Overhaul color variables. Improve gradient support on all
 types.

---
 knopf.css | 135 +++++++++++++++++++++++++++++++++---------------------
 1 file changed, 82 insertions(+), 53 deletions(-)

diff --git a/knopf.css b/knopf.css
index 890152c..7bd61fc 100644
--- a/knopf.css
+++ b/knopf.css
@@ -9,6 +9,8 @@
   --knopf-saturation: 77%;
   --knopf-luminosity: 37%;
 
+  --knopf-white: 0 0% 100%;
+
   /* ==========================================================================
      Sizes
      ========================================================================== */
@@ -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;
@@ -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);
@@ -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);
@@ -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);
 }
 
 /* ==========================================================================
@@ -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);
 }
@@ -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);
 }
@@ -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%;
 }
 
 /* ==========================================================================
@@ -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 */
@@ -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);
 }
 
 /* ==========================================================================