Convert hex, rgb(a) color values to hsl(a) (#716)

* Convert hex, rgb(a) color values to hls(a) * Missed a couple of floats * Tweak color values to match existing colors * Tweak orange-800 * Tweak blue-600 lightness * Convert syntax highlighting colors to hsl * Apply even steps to black color scale * Convert all dark colors to hsl Co-authored-by: Aaron Shekey <[email protected]>
StackExchange · Aug 26, 2021 · ab8cd68 · ab8cd68
1 parent 30e2ef2
commit ab8cd68
Show file tree

Hide file tree

Showing 5 changed files with 229 additions and 212 deletions.
diff --git a/docs/assets/less/stacks-documentation.less b/docs/assets/less/stacks-documentation.less
@@ -54,7 +54,7 @@
 
 #stacks-internals #screen-md({
     .stacks-navigation-shadow {
-        box-shadow: 3px 0 3px 0 rgba(0, 0, 0, 0.02), 7px 0 6px 0 rgba(0, 0, 0, 0.03), 13px 0 11px 0 rgba(0, 0, 0, 0.04), 22px 0 20px 0 rgba(0, 0, 0, 0.04), 42px 0 37px 0 rgba(0, 0, 0, 0.05);
+        box-shadow: 3px 0 3px 0 hsla(0, 0, 0, 0.02), 7px 0 6px 0 hsla(0, 0, 0, 0.03), 13px 0 11px 0 hsla(0, 0, 0, 0.04), 22px 0 20px 0 hsla(0, 0, 0, 0.04), 42px 0 37px 0 hsla(0, 0, 0, 0.05);
     }
 }, @force-selector: true);
 
@@ -338,7 +338,7 @@
 
         .algolia-docsearch-suggestion--text {
             .algolia-docsearch-suggestion--highlight {
-                box-shadow: inset 0 -2px 0 0 rgba(68, 168, 179, 0.8);
+                box-shadow: inset 0 -2px 0 0 hsla(186, 45%, 48%, 0.8);
             }
         }
     }

diff --git a/lib/css/components/_stacks-buttons.less b/lib/css/components/_stacks-buttons.less
@@ -184,7 +184,7 @@
         color: var(--theme-button-filled-color);
         background-color: var(--theme-button-filled-background-color);
         border-color: var(--theme-button-filled-border-color);
-        box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
+        box-shadow: inset 0 1px 0 0 hsla(0, 0, 100%, 0.7);
 
         .dark-mode({ box-shadow: none; });
 
@@ -254,7 +254,7 @@
             color: @button-muted-filled-color;
             background-color: @button-muted-filled-background-color;
             border-color: transparent;
-            box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
+            box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
 
             .dark-mode({ box-shadow: none; });
 
@@ -331,7 +331,7 @@
             color: @button-danger-filled-color;
             background-color: @button-danger-filled-background-color;
             border-color: transparent;
-            box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
+            box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
 
             .dark-mode({ box-shadow: none; });
 
@@ -373,7 +373,7 @@
     .s-btn__primary {
         color: var(--theme-button-primary-color);
         background-color: var(--theme-button-primary-background-color);
-        box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
+        box-shadow: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
 
         .dark-mode({ box-shadow: none; });
 

diff --git a/lib/css/components/_stacks-popovers.less b/lib/css/components/_stacks-popovers.less
@@ -53,7 +53,7 @@
 
         &:after {
             bottom: 1px;
-            box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.07), 2px 2px 2px -1px rgba(0, 0, 0, 0.1);
+            box-shadow: 2px 2px 5px 0 hsla(0, 0, 0, 0.07), 2px 2px 2px -1px hsla(0, 0, 0, 0.1);
         }
     }
 
@@ -65,7 +65,7 @@
 
         &:after {
             top: 1px;
-            box-shadow: -1px -1px 1px 0 rgba(0, 0, 0, 0.12);
+            box-shadow: -1px -1px 1px 0 hsla(0, 0, 0, 0.12);
         }
     }
 
@@ -77,7 +77,7 @@
 
         &:after {
             right: 1px;
-            box-shadow: 2px -2px 5px 0 rgba(0, 0, 0, 0.07), 2px -2px 2px -1px rgba(0, 0, 0, 0.1);
+            box-shadow: 2px -2px 5px 0 hsla(0, 0, 0, 0.07), 2px -2px 2px -1px hsla(0, 0, 0, 0.1);
         }
     }
 
@@ -89,7 +89,7 @@
 
         &:after {
             left: 1px;
-            box-shadow: -2px 2px 5px 0 rgba(0, 0, 0, 0.07), -2px 2px 2px -1px rgba(0, 0, 0, 0.1);
+            box-shadow: -2px 2px 5px 0 hsla(0, 0, 0, 0.07), -2px 2px 2px -1px hsla(0, 0, 0, 0.1);
         }
     }
 

diff --git a/lib/css/components/_stacks-prose.less b/lib/css/components/_stacks-prose.less
@@ -402,11 +402,11 @@
         background-color: var(--black-075);
         border: 1px solid var(--black-300);
         border-radius: @br-sm;
-        box-shadow: 0 1px 1px rgba(12, 13, 14, 0.15), inset 0 1px 0 0 @white;
+        box-shadow: 0 1px 1px hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 @white;
         overflow-wrap: break-word;
 
         .dark-mode({
-            box-shadow: 0 1px 1px rgba(12, 13, 14, 0.8);
+            box-shadow: 0 1px 1px hsla(210, 8%, 5%, 0.8);
             border-color: transparent;
             border-top-color: @black-500;
         });