Merge pull request #2938 from AlchemyCMS/use-custom-properties-for-color

Use custom properties for color variables
AlchemyCMS · Jun 25, 2024 · cb5841d · cb5841d
2 parents 5138585 + 7c73a9d
commit cb5841d
Show file tree

Hide file tree

Showing 32 changed files with 309 additions and 273 deletions.
diff --git a/app/assets/stylesheets/alchemy/_custom-properties.css b/app/assets/stylesheets/alchemy/_custom-properties.css
@@ -36,42 +36,39 @@
   --border-radius_medium: 3px;
 
   // Colors
-  --color-blue_very_light: hsl(203deg, 32%, 85%);
-  --color-blue_light: hsl(212deg, 51%, 50%);
+  --color-blue_very_light: hsl(203deg, 32%, 97%);
+  --color-blue_light: hsl(203deg, 32%, 85%);
   --color-blue_medium: hsl(212deg, 52%, 36%);
-  --color-blue_dark: hsl(212deg, 51%, 26%);
+  --color-blue_dark: hsl(212deg, 52%, 26%);
 
   --color-green_very_light: hsl(88deg, 47%, 88%);
   --color-green_light: hsl(127deg, 25%, 69%);
   --color-green_medium: hsl(127deg, 25%, 48%);
   --color-green_dark: hsl(128deg, 32%, 26%);
 
-  --color-yellow_light: hsl(60, 81%, 92%);
-  --color-yellow_medium: hsl(56, 68%, 85%);
-  --color-yellow_dark: hsl(56, 53%, 29%);
+  --color-yellow_light: hsl(60deg, 81%, 92%);
+  --color-yellow_medium: hsl(56deg, 68%, 85%);
+  --color-yellow_dark: hsl(56deg, 53%, 29%);
 
   --color-orange_medium: hsl(42deg, 100%, 74%);
   --color-orange_dark: hsl(28deg, 77%, 68%);
   --color-orange_very_dark: hsl(28deg, 77%, 48%);
 
-  --color-red_very_light: hsl(360deg, 47%, 88%);
-  --color-red_light: hsl(360deg, 25%, 69%);
-  --color-red_medium: hsl(360deg, 51%, 42%);
-  --color-red_dark: hsl(360deg, 51%, 25%);
+  --color-red_very_light: hsl(0deg, 47%, 88%);
+  --color-red_light: hsl(0deg, 25%, 69%);
+  --color-red_medium: hsl(0deg, 51%, 42%);
+  --color-red_dark: hsl(0deg, 51%, 25%);
 
-  --color-grey-blue_light: hsl(224deg, 23%, 60%);
-  --color-grey-blue_medium: hsl(224deg, 23%, 40%);
-  --color-grey-blue_dark: hsl(224deg, 23%, 26%);
-
-  --color-grey_light: hsl(0deg, 0%, 94%);
-  --color-grey_medium: hsl(0deg, 0%, 78%);
+  --color-grey_light: hsl(0deg, 0%, 97%);
+  --color-grey_medium: hsl(0deg, 0%, 94%);
   --color-grey_dark: hsl(0deg, 0%, 40%);
   --color-grey_very_dark: hsl(0deg, 0%, 20%);
 
   --color-white: hsl(0deg, 0%, 100%);
 
-  --color-text: hsla(224, 22.7%, 25.9%, 0.8);
-  --color-icon: hsla(224, 22.7%, 25.9%, 0.75);
+  --color-text: hsla(224deg, 23%, 26%, 0.8);
+  --color-text_muted: hsla(224deg, 23%, 26%, 0.5);
+  --color-icon: hsla(224deg, 23%, 26%, 0.75);
 }
 
 .alchemy-light {
@@ -81,11 +78,11 @@
   --font-color_default: var(--color-text);
 
   --tabs_indicator-color: var(--color-orange_dark);
-  --tabs_track-color: var(--color-grey_light);
+  --tabs_track-color: var(--color-grey_medium);
   --sl-input-label-color: var(--color-text);
 
   --file-upload_background-color: hsla(0deg, 0%, 80%, 0.8);
-  --file-upload_single-upload-background-color: var(--color-grey_light);
+  --file-upload_single-upload-background-color: var(--color-grey_medium);
   --file-upload_progress-track-color: var(--color-blue_very_light);
   --file-upload_progress-indicator-color: var(--color-blue_dark);
 

diff --git a/app/assets/stylesheets/alchemy/_deprecated_variables.scss b/app/assets/stylesheets/alchemy/_deprecated_variables.scss
@@ -2,3 +2,40 @@
 
 @include alchemy-deprecated-variable("$default-padding", "var(--spacing-1)");
 @include alchemy-deprecated-variable("$default-margin", "var(--spacing-1)");
+@include alchemy-deprecated-variable("$text-color", "var(--color-text)");
+@include alchemy-deprecated-variable(
+  "$muted-text-color",
+  "var(--color-text_muted)"
+);
+@include alchemy-deprecated-variable("$icon-color", "var(--color-icon)");
+@include alchemy-deprecated-variable("$light-gray", "var(--color-grey_light)");
+@include alchemy-deprecated-variable(
+  "$medium-gray",
+  "var(--color-grey_medium)"
+);
+@include alchemy-deprecated-variable("$dark-gray", "var(--color-grey_dark)");
+@include alchemy-deprecated-variable(
+  "$very-dark-gray",
+  "var(--color-grey_very_dark)"
+);
+@include alchemy-deprecated-variable(
+  "$light_yellow",
+  "var(--color-yellow_light)"
+);
+@include alchemy-deprecated-variable("$orange", "var(--color-orange_medium)");
+@include alchemy-deprecated-variable(
+  "$dark-orange",
+  "var(--color-orange_dark)"
+);
+@include alchemy-deprecated-variable(
+  "$very-dark-orange",
+  "var(--color-orange_very_dark)"
+);
+@include alchemy-deprecated-variable(
+  "$very-light-blue",
+  "var(--color-blue_very_light)"
+);
+@include alchemy-deprecated-variable("$light-blue", "var(--color-blue_light)");
+@include alchemy-deprecated-variable("$blue", "var(--color-blue_medium)");
+@include alchemy-deprecated-variable("$dark-blue", "var(--color-blue_dark)");
+@include alchemy-deprecated-variable("$white", "var(--color-white)");
diff --git a/app/assets/stylesheets/alchemy/_mixins.scss b/app/assets/stylesheets/alchemy/_mixins.scss
@@ -71,7 +71,7 @@
   &[disabled]:active,
   &.disabled:hover,
   &[disabled]:hover {
-    background-color: transparentize($button-bg-color, 0.5);
+    background-color: hsla(0deg, 0%, 100%, 0.5);
     cursor: not-allowed;
     box-shadow: none;
   }
@@ -106,8 +106,8 @@
 }
 
 @mixin form-hint(
-  $background-color: $light_yellow,
-  $border-color: $medium-gray
+  $background-color: var(--color-yellow_light),
+  $border-color: var(--color-grey_medium)
 ) {
   font-size: $small-font-size;
   line-height: 1.5em;
@@ -138,7 +138,7 @@
 }
 
 @mixin drop-shadow {
-  $shadow: 0px 0px 4px $dark-gray;
+  $shadow: 0px 0px 4px var(--color-grey_dark);
   -webkit-box-shadow: $shadow;
   -moz-box-shadow: $shadow;
   -ms-box-shadow: $shadow;
@@ -156,11 +156,11 @@
   vertical-align: middle;
   padding: $padding;
   margin: $margin;
-  background-color: $medium-gray;
+  background-color: var(--color-grey_medium);
   overflow: hidden;
   position: relative;
   border-radius: $default-border-radius;
-  color: $text-color;
+  color: var(--color-text);
 }
 
 @mixin tag-base(
@@ -172,9 +172,7 @@
   &:before {
     display: inline-flex;
     flex-shrink: 0;
-    content: "";
-    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{$icon-color}"><path d="M10.9042 2.10025L20.8037 3.51446L22.2179 13.414L13.0255 22.6063C12.635 22.9969 12.0019 22.9969 11.6113 22.6063L1.71184 12.7069C1.32131 12.3163 1.32131 11.6832 1.71184 11.2926L10.9042 2.10025ZM11.6113 4.22157L3.83316 11.9997L12.3184 20.485L20.0966 12.7069L19.036 5.28223L11.6113 4.22157ZM13.7327 10.5855C12.9516 9.80448 12.9516 8.53815 13.7327 7.7571C14.5137 6.97606 15.78 6.97606 16.5611 7.7571C17.3421 8.53815 17.3421 9.80448 16.5611 10.5855C15.78 11.3666 14.5137 11.3666 13.7327 10.5855Z"></path></svg>')
-      no-repeat center;
+    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="hsla(224deg, 23%, 26%, 0.75)"><path d="M10.9042 2.10025L20.8037 3.51446L22.2179 13.414L13.0255 22.6063C12.635 22.9969 12.0019 22.9969 11.6113 22.6063L1.71184 12.7069C1.32131 12.3163 1.32131 11.6832 1.71184 11.2926L10.9042 2.10025ZM11.6113 4.22157L3.83316 11.9997L12.3184 20.485L20.0966 12.7069L19.036 5.28223L11.6113 4.22157ZM13.7327 10.5855C12.9516 9.80448 12.9516 8.53815 13.7327 7.7571C14.5137 6.97606 15.78 6.97606 16.5611 7.7571C17.3421 8.53815 17.3421 9.80448 16.5611 10.5855C15.78 11.3666 14.5137 11.3666 13.7327 10.5855Z"></path></svg>');
     width: 1rem;
     height: 1rem;
   }