Update loading gradient styles in light and dark theme token files for consistency and improved readability

Author: elizabetdev

src/components/Button/Button.tsx

@@ -119,13 +119,6 @@ const StyledButton = styled(BaseButton)<{
     pointer-events: none;
     background-size: ${({ $fillWidth }) => ($fillWidth ? "200% 100%" : "200px 100%")};
     opacity: 0;
-    z-index: 0;
-  }
-
-  /* Ensure content stays above shimmer */
-  > * {
-    position: relative;
-    z-index: 1;
   }
 
   ${({ $loading, $fillWidth, $styleType, theme }) => {
@@ -134,11 +127,13 @@ const StyledButton = styled(BaseButton)<{
     const shimmerGradient = theme.click.button.basic.color[$styleType].background.loading;
     const bgSize = $fillWidth ? "200% 100%" : "200px 100%";
     const shimmerAnimation = $fillWidth ? shimmerFullWidth : shimmerFixedWidth;
+    const bgRepeat = $fillWidth ? "repeat" : "no-repeat";
 
     return css`
       &::before {
         background: ${shimmerGradient};
         background-size: ${bgSize};
+        background-repeat: ${bgRepeat};
         animation: ${shimmerAnimation} 1.5s ease-in-out infinite;
         opacity: 1;
       }
@@ -190,15 +185,19 @@ const StyledButton = styled(BaseButton)<{
   }}
 
   /* Loading state styling */
-  ${({ $loading }) => {
+  ${({ $loading, $styleType }) => {
     if (!$loading) return "";
 
+    const isPrimary = $styleType === "primary";
+    const textOpacity = isPrimary ? 0.8 : 0.7;
+
     return css`
       cursor: not-allowed;
+      ${isPrimary ? "opacity: 0.6;" : ""}
 
-      /* Dim text and icons to 70% */
+      /* Dim text and icons */
       > * {
-        opacity: 0.7;
+        opacity: ${textOpacity};
       }
     `;
   }}

src/theme/tokens/variables.dark.json

@@ -173,7 +173,7 @@
               "hover": "rgb(98.6% 100% 58.8%)",
               "active": "rgb(90.7% 92.5% 38.1%)",
               "disabled": "#414141",
-              "loading": "linear-gradient(\n  90deg,\n  rgba(250, 255, 105, 0.8) 0%,\n  rgba(255, 255, 255, 0.5) 50%,\n  rgba(250, 255, 105, 0.8) 100%\n)"
+              "loading": "linear-gradient(90deg, rgb(230, 240, 93) 0%, rgba(255, 255, 255, 0.3) 50%, rgb(230, 240, 93) 100%)"
             },
             "stroke": {
               "default": "#FAFF69",
@@ -194,7 +194,7 @@
               "hover": "#282828",
               "active": "rgb(19.9% 19.9% 19.9%)",
               "disabled": "#414141",
-              "loading": "linear-gradient(\n  90deg,\n  rgb(31, 31, 28) 0%,\n  rgba(255, 255, 255, 0.2) 50%,\n  rgb(31, 31, 28) 100%\n)"
+              "loading": "linear-gradient(90deg, rgb(31, 31, 28) 0%, rgba(255, 255, 255, 0.2) 50%, rgb(31, 31, 28) 100%)"
             },
             "stroke": {
               "default": "#414141",
@@ -221,7 +221,7 @@
               "hover": "rgb(100% 13.7% 13.7% / 0.3)",
               "active": "rgb(100% 13.7% 13.7% / 0.45)",
               "disabled": "#414141",
-              "loading": "linear-gradient(\n  90deg,\n  rgb(76, 32, 29) 0%,\n  rgba(255, 255, 255, 0.25) 50%,\n  rgb(76, 32, 29) 100%\n)"
+              "loading": "linear-gradient(90deg, rgb(76, 32, 29) 0%, rgba(255, 255, 255, 0.25) 50%, rgb(76, 32, 29) 100%)"
             },
             "stroke": {
               "default": "rgb(100% 22.3% 22.3% / 0.1)",
@@ -242,7 +242,7 @@
               "hover": "#282828",
               "active": "rgba(0,0,0,0)",
               "disabled": "rgba(0,0,0,0)",
-              "loading": "linear-gradient(\n  90deg,\n  rgba(250, 255, 105, 0.1) 0%,\n  rgba(250, 255, 105, 0.3) 50%,\n  rgba(250, 255, 105, 0.1) 100%\n)"
+              "loading": "linear-gradient(90deg, rgba(250, 255, 105, 0.1) 0%, rgba(250, 255, 105, 0.3) 50%, rgba(250, 255, 105, 0.1) 100%)"
             },
             "stroke": {
               "default": "rgba(0,0,0,0)",
@@ -1889,4 +1889,4 @@
     }
   },
   "name": "dark"
-}
+}

src/theme/tokens/variables.json

@@ -399,7 +399,7 @@
               "hover": "lch(29.5 4.18 267)",
               "active": "#161517",
               "disabled": "#dfdfdf",
-              "loading": "linear-gradient(\n  90deg,\n  rgb(61, 59, 60) 0%,\n  rgba(255, 255, 255, 0.3) 50%,\n  rgb(61, 59, 60) 100%\n)"
+              "loading": "linear-gradient(90deg, rgb(61, 59, 60) 0%, rgba(255, 255, 255, 0.3) 50%, rgb(61, 59, 60) 100%)"
             },
             "stroke": {
               "default": "#302e32",
@@ -420,7 +420,7 @@
               "hover": "#f6f7fa",
               "active": "lch(95.3 1.54 272)",
               "disabled": "#dfdfdf",
-              "loading": "linear-gradient(\n  90deg,\n  rgb(232, 233, 235) 0%,\n  rgba(255, 255, 255, 0.95) 50%,\n  rgb(232, 233, 235) 100%\n)"
+              "loading": "linear-gradient(90deg, rgb(232, 233, 235) 0%, rgba(255, 255, 255, 0.95) 50%, rgb(232, 233, 235) 100%)"
             },
             "stroke": {
               "default": "#e6e7e9",
@@ -447,7 +447,7 @@
               "hover": "rgb(100% 13.7% 13.7% / 0.2)",
               "active": "rgb(100% 13.7% 13.7% / 0.3)",
               "disabled": "#dfdfdf",
-              "loading": "linear-gradient(\n  90deg,\n  rgba(255, 35, 35, 0.05) 0%,\n  rgba(255, 255, 255, 0.8) 50%,\n  rgba(255, 35, 35, 0.05) 100%\n)"
+              "loading": "linear-gradient(90deg, rgba(255, 35, 35, 0.05) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 35, 35, 0.05) 100%)"
             },
             "stroke": {
               "default": "rgb(100% 13.7% 13.7% / 0.1)",
@@ -468,7 +468,7 @@
               "hover": "#f6f7fa",
               "active": "rgba(0,0,0,0)",
               "disabled": "rgba(0,0,0,0)",
-              "loading": "linear-gradient(\n  90deg,\n  rgb(240, 242, 248) 0%,\n  rgba(255, 255, 255, 0.8) 50%,\n  rgb(240, 242, 248) 100%\n)"
+              "loading": "linear-gradient(90deg, rgb(240, 242, 248) 0%, rgba(255, 255, 255, 0.8) 50%, rgb(240, 242, 248) 100%)"
             },
             "stroke": {
               "default": "rgba(0,0,0,0)",

src/theme/tokens/variables.light.json

@@ -173,7 +173,7 @@
               "hover": "lch(29.5 4.18 267)",
               "active": "#161517",
               "disabled": "#dfdfdf",
-              "loading": "linear-gradient(\n  90deg,\n  rgb(61, 59, 60) 0%,\n  rgba(255, 255, 255, 0.3) 50%,\n  rgb(61, 59, 60) 100%\n)"
+              "loading": "linear-gradient(90deg, rgb(61, 59, 60) 0%, rgba(255, 255, 255, 0.3) 50%, rgb(61, 59, 60) 100%)"
             },
             "stroke": {
               "default": "#302e32",
@@ -194,7 +194,7 @@
               "hover": "#f6f7fa",
               "active": "lch(95.3 1.54 272)",
               "disabled": "#dfdfdf",
-              "loading": "linear-gradient(\n  90deg,\n  rgb(232, 233, 235) 0%,\n  rgba(255, 255, 255, 0.95) 50%,\n  rgb(232, 233, 235) 100%\n)"
+              "loading": "linear-gradient(90deg, rgb(232, 233, 235) 0%, rgba(255, 255, 255, 0.95) 50%, rgb(232, 233, 235) 100%)"
             },
             "stroke": {
               "default": "#e6e7e9",
@@ -221,7 +221,7 @@
               "hover": "rgb(100% 13.7% 13.7% / 0.2)",
               "active": "rgb(100% 13.7% 13.7% / 0.3)",
               "disabled": "#dfdfdf",
-              "loading": "linear-gradient(\n  90deg,\n  rgba(255, 35, 35, 0.05) 0%,\n  rgba(255, 255, 255, 0.8) 50%,\n  rgba(255, 35, 35, 0.05) 100%\n)"
+              "loading": "linear-gradient(90deg, rgba(255, 35, 35, 0.05) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 35, 35, 0.05) 100%)"
             },
             "stroke": {
               "default": "rgb(100% 13.7% 13.7% / 0.1)",
@@ -242,7 +242,7 @@
               "hover": "#f6f7fa",
               "active": "rgba(0,0,0,0)",
               "disabled": "rgba(0,0,0,0)",
-              "loading": "linear-gradient(\n  90deg,\n  rgb(240, 242, 248) 0%,\n  rgba(255, 255, 255, 0.8) 50%,\n  rgb(240, 242, 248) 100%\n)"
+              "loading": "linear-gradient(90deg, rgb(240, 242, 248) 0%, rgba(255, 255, 255, 0.8) 50%, rgb(240, 242, 248) 100%)"
             },
             "stroke": {
               "default": "rgba(0,0,0,0)",