Remove CSS Relative Colors usage (#1953)

Co-authored-by: Alice Cecile <[email protected]>

Author: doup

sass/_vars.scss

@@ -32,6 +32,23 @@ $mobile-menu-width: 300px;
 $content-top-margin: 30px;
 $border-radius: 10px;
 
+// Colors
+// If you're reading this in late 2025 (or later), check PR #1953 because these
+// changes probably can be reverted.
+//
+// These colors are *temporarily* defined as SASS variables. They should be
+// replaced with CSS variables once CSS Relative Colors support is *widely
+// available*. We define these as SASS variables so that they can be used with
+// the `sass:color` package to derive new colors. If a color is not going to be
+// used to derive a new color, then CSS vars should be used instead.
+//
+// See PR: https://github.com/bevyengine/bevy-website/pull/1953
+// See Relative Colors support: https://caniuse.com/css-relative-colors
+$color-neutral-17: #2c2c2d;
+$color-neutral-93: #ececec;
+$color-black: #000;
+$color-white: #fff;
+
 // CSS Vars
 :root {
   // Typography
@@ -42,7 +59,7 @@ $border-radius: 10px;
   --color-neutral-11: #1b1b1b;
   --color-neutral-13: #1e1e22;
   --color-neutral-14: #232326;
-  --color-neutral-17: #2c2c2d;
+  --color-neutral-17: #{$color-neutral-17};
   --color-neutral-18: #2b2c2f;
   --color-neutral-19: #2f3033;
   --color-neutral-22: #383838;
@@ -69,12 +86,12 @@ $border-radius: 10px;
   --color-neutral-78: #c8c8c8;
   --color-neutral-82: #d2d2d2;
   --color-neutral-88: #e1e1e1;
-  --color-neutral-93: #ececec;
+  --color-neutral-93: #{$color-neutral-93};
   --color-neutral-96: #f0effb;
   --color-neutral-97: #f7f7f7;
 
-  --color-black: #000;
-  --color-white: #fff;
+  --color-black: #{$color-black};
+  --color-white: #{$color-white};
 
   // Blues by lightness
   --color-blue-21: #2f2745;
@@ -113,7 +130,7 @@ $border-radius: 10px;
   --asset-card-img-bg-color: var(--color-neutral-11);
   --asset-card-tag-icon-color: var(--color-neutral-60);
   --asset-card-text-color: var(--color-neutral-93);
-  --asset-card-title-bg-color: #{unquote('rgb(from var(--color-black) r g b / 0.5)')};
+  --asset-card-title-bg-color: #{rgba($color-black, 0.5)};
   --asset-card-title-color: var(--color-neutral-93);
   --asset-card-tag-bg-color: var(--color-neutral-36);
   --asset-card-tag-text-color: var(--color-neutral-93);
@@ -148,7 +165,7 @@ $border-radius: 10px;
   --button-pink-bg-hover-color: #954c72;
   --button-pink-border-color: #ba789b;
   --button-pink-text-color: var(--color-neutral-93);
-  --button-square-bg-color: var(--color-neutral-93);
+  --button-square-bg-color: #{rgba($color-neutral-93, 0.05)};
 
   --callout-caution-accent-color: #e82f5a;
   --callout-caution-bg-color: #591626;
@@ -204,7 +221,7 @@ $border-radius: 10px;
   --code-yyy: #d19a66;
   --code-zzz: #d1af8f;
 
-  --details-bg-color: var(--color-neutral-93);
+  --details-bg-color: #{rgba($color-neutral-93, 0.1)};
   --details-text-shadow-color: var(--color-neutral-93);
 
   --docs-whats-a-bevy-filter: none;
@@ -215,7 +232,7 @@ $border-radius: 10px;
   --docs-footer-dir-hover-color: var(--color-neutral-60b);
   --docs-footer-edit-color: var(--color-neutral-55);
   --docs-footer-edit-hover-color: var(--color-neutral-75);
-  --docs-footer-hover-bg-color: #{unquote('rgb(from var(--color-neutral-93) r g b / 0.01)')};
+  --docs-footer-hover-bg-color: #{rgba($color-neutral-93, 0.01)};
   --docs-footer-hover-color: var(--color-neutral-93);
 
   --donate-text-color: var(--color-neutral-82);
@@ -271,11 +288,11 @@ $border-radius: 10px;
   --link-card-text-color: var(--color-neutral-93);
 
   --main-menu-active-color: var(--color-blue-85);
-  --main-menu-backdrop-color: #{unquote('rgb(from var(--color-black) r g b / 0.2)')};
-  --main-menu-link-hover-color: #{unquote('rgb(from var(--color-white) r g b / 0.05)')};
+  --main-menu-backdrop-color: #{rgba($color-black, 0.2)};
+  --main-menu-link-hover-color: #{rgba($color-white, 0.05)};
   --main-menu-link-outline: var(--focus-outline);
   --main-menu-mobile-bg-color: var(--color-neutral-13);
-  --main-menu-mobile-box-shadow-color: #{unquote('rgb(from var(--color-black) r g b / 0.3)')};
+  --main-menu-mobile-box-shadow-color: #{rgba($color-black, 0.3)};
   --main-menu-text-color: var(--color-neutral-93);
 
   --media-content-blockquote-bg-color: var(--color-neutral-18);
@@ -288,13 +305,13 @@ $border-radius: 10px;
   --media-content-link-color: var(--color-blue-link);
   --media-content-text-color: var(--color-neutral-82);
 
-  --menu-switch-bg-color: #{unquote('rgb(from var(--color-white) r g b / 0.05)')};
+  --menu-switch-bg-color: #{rgba($color-white, 0.05)};
   --menu-switch-option-active-bg-color: var(--color-neutral-13);
   --menu-switch-option-active-text-color: var(--color-white);
   --menu-switch-option-text-color: var(--color-neutral-61);
 
   --migration-guide-hr-color-legacy: var(--color-neutral-33b);
-  --migration-guide-hr-color: var(--color-white);
+  --migration-guide-hr-color: #{rgba($color-white, 0.05)};
   --migration-guide-legacy-area-tags-color: var(--color-neutral-50);
   --migration-guide-title-color: var(--color-neutral-93);
 
@@ -312,7 +329,7 @@ $border-radius: 10px;
   --people-role-maintainer-color: rgb(242, 103, 255);
   --people-role-sme-color: rgb(80, 200, 50);
 
-  --scrollbar-thumb-color: #{unquote('rgb(from var(--color-white) r g b / 0.2)')};
+  --scrollbar-thumb-color: #{rgba($color-white, 0.2)};
 
   --sponsors-name-color: var(--color-neutral-59);
   --sponsors-link-color: var(--color-blue-link);
@@ -325,17 +342,19 @@ $border-radius: 10px;
   --table-header-color: var(--color-neutral-82);
 
   --tabs-bg-color: var(--color-white);
+  --tabs-bg-hover-color: #{rgba($color-white, 0.05)};
+  --tabs-bg-active-color: #{rgba($color-white, 0.1)};
   --tabs-highlight-color: var(--color-blue-link);
 
   --todo-bg-color: rgba(191, 170, 64, 0.3);
   --todo-border-color: rgba(223, 191, 32, 0.5);
 
   --tree-menu-chevron-filter: brightness(70%);
-  --tree-menu-label-active-bg-color: #{unquote('rgb(from var(--color-neutral-93) r g b / 0.1)')};
+  --tree-menu-label-active-bg-color: #{rgba($color-neutral-93, 0.1)};
   --tree-menu-label-active-color: var(--color-neutral-93);
   --tree-menu-label-color: var(--color-neutral-61);
-  --tree-menu-toc-bg-color: #{unquote('rgb(from var(--color-black) r g b / 0.25)')};
-  --tree-menu-toggle-hover-color: #{unquote('rgb(from var(--color-neutral-93) r g b / 0.1)')};
+  --tree-menu-toc-bg-color: #{rgba($color-black, 0.25)};
+  --tree-menu-toggle-hover-color: #{rgba($color-neutral-93, 0.1)};
 
   --warning-color: #c8c864;
 
@@ -391,7 +410,7 @@ $border-radius: 10px;
     --code-yyy: #cd5d12;
     --code-zzz: #ce8c4e;
 
-    --details-bg-color: var(--color-neutral-17);
+    --details-bg-color: #{rgba($color-neutral-17, 0.1)};
     --details-text-shadow-color: var(--color-neutral-17);
 
     --docs-whats-a-bevy-filter: invert(85%);
@@ -402,7 +421,7 @@ $border-radius: 10px;
     --docs-footer-dir-hover-color: var(--color-neutral-33);
     --docs-footer-edit-color: var(--color-neutral-50);
     --docs-footer-edit-hover-color: var(--color-neutral-33);
-    --docs-footer-hover-bg-color: #{unquote('rgb(from var(--color-black) r g b / 0.01)')};
+    --docs-footer-hover-bg-color: #{rgba($color-black, 0.01)};
     --docs-footer-hover-color: var(--color-black);
 
     --focus-outline: solid var(--color-blue-57) 3px;
@@ -420,7 +439,7 @@ $border-radius: 10px;
 
     @media #{$bp-tablet-landscape-down} {
       --main-menu-active-color: var(--color-blue-57);
-      --main-menu-link-hover-color: #{unquote('rgb(from var(--color-black) r g b / 0.03)')};
+      --main-menu-link-hover-color: #{rgba($color-black, 0.03)};
       --main-menu-text-color: var(--color-neutral-33);
     }
 
@@ -440,15 +459,15 @@ $border-radius: 10px;
     --menu-switch-option-text-color: var(--color-neutral-33);
 
     --migration-guide-hr-color-legacy: var(--color-neutral-50);
-    --migration-guide-hr-color: var(--color-black);
+    --migration-guide-hr-color: #{rgba($color-black, 0.05)};
     --migration-guide-legacy-area-tags-color: var(--color-neutral-50);
     --migration-guide-title-color: var(--color-neutral-13);
 
     --on-this-page-color: var(--color-neutral-45);
     --on-this-page-hover-color: var(--color-black);
     --on-this-page-active-color: var(--color-black);
 
-    --scrollbar-thumb-color: #{unquote('rgb(from var(--color-black) r g b / 0.2)')};
+    --scrollbar-thumb-color: #{rgba($color-black, 0.2)};
 
     --table-border-color: var(--color-neutral-75);
     --table-header-bg-color: var(--color-neutral-82);

sass/components/_button-square.scss

@@ -9,9 +9,7 @@
       content: "";
       position: absolute;
       inset: 8px;
-      background-color: unquote(
-        "rgb(from var(--button-square-bg-color) r g b / 0.05)"
-      );
+      background-color: var(--button-square-bg-color);
       border-radius: $border-radius;
     }
   }

sass/components/_tabs.scss

@@ -19,11 +19,11 @@
     border-radius: 8px;
 
     &:hover {
-      background-color: unquote("rgb(from var(--tabs-bg-color) r g b / 0.05)");
+      background-color: var(--tabs-bg-hover-color);
     }
 
     &:active {
-      background-color: unquote("rgb(from var(--tabs-bg-color) r g b / 0.1)");
+      background-color: var(--tabs-bg-active-color);
     }
 
     &:after {

sass/elements/_details.scss

@@ -3,7 +3,7 @@ details {
   border-radius: $border-radius;
   padding: 0 $h-padding;
   margin-block: 1em;
-  background-color: unquote("rgb(from var(--details-bg-color) r g b / 0.1)");
+  background-color: var(--details-bg-color);
   overflow: hidden; // prevent clobbering corner radii
 
   & h1,

sass/pages/_migration_guide.scss

@@ -29,11 +29,9 @@
   }
 
   hr {
-    $color: "rgb(from var(--migration-guide-hr-color) r g b / 0.05)";
-
     height: 1px;
-    color: unquote($color);
-    background: unquote($color);
+    color: var(--migration-guide-hr-color);
+    background: var(--migration-guide-hr-color);
     font-size: 0;
     border: 0;
     margin-block: 2rem;