npm - @gitbutler/design-core - Versions diffs - 3.1.0 → 3.2.1 - Mend

@gitbutler/design-core 3.1.0 → 3.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/package.json +1 -1
package/styles/reset.css +2 -0
package/styles/text.css +1 -1
package/tokens/json/semantic.tokens.json +763 -12
package/tokens/tokens.css +68 -1

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@gitbutler/design-core",
-	"version": "3.1.0",
+	"version": "3.2.1",
 	"type": "module",
 	"description": "Design tokens for GitButler applications",
 	"keywords": [

package/styles/reset.css CHANGED Viewed

@@ -24,6 +24,8 @@
 		overflow-x: hidden;
 		color: var(--text-1);
 		font-family: var(--fontfamily-base);
+		font-weight: var(--text-weight-regular);
+		line-height: var(--text-lineheight-default);
 	}
 	input,

package/styles/text.css CHANGED Viewed

@@ -56,7 +56,7 @@
 	}
 	.text-accent-head {
-		font-weight: var(--text-weight-bold);
+		font-weight: 400;
 		font-size: 3.875rem;
 		line-height: var(--text-lineheight-default);
 		font-family: var(--fontfamily-base);

package/tokens/json/semantic.tokens.json CHANGED Viewed

@@ -526,17 +526,6 @@
           }
         }
       },
-      "toast": {
-        "$type": "color",
-        "$value": "{core.clr.gray.5}",
-        "$description": "",
-        "$extensions": {
-          "mode": {
-            "light": "{core.clr.gray.5}",
-            "dark": "{core.clr.gray.95}"
-          }
-        }
-      },
       "warn": {
         "$type": "color",
         "$value": "{core.clr.warn.95}",
@@ -619,6 +608,768 @@
         }
       }
     },
+    "scale": {
+      "gray": {
+        "0": {
+          "$type": "color",
+          "$value": "{core.clr.gray.0}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.gray.0}",
+              "dark": "{core.clr.gray.100}"
+            }
+          }
+        },
+        "5": {
+          "$type": "color",
+          "$value": "{core.clr.gray.5}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.gray.5}",
+              "dark": "{core.clr.gray.95}"
+            }
+          }
+        },
+        "10": {
+          "$type": "color",
+          "$value": "{core.clr.gray.10}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.gray.10}",
+              "dark": "{core.clr.gray.90}"
+            }
+          }
+        },
+        "20": {
+          "$type": "color",
+          "$value": "{core.clr.gray.20}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.gray.20}",
+              "dark": "{core.clr.gray.80}"
+            }
+          }
+        },
+        "30": {
+          "$type": "color",
+          "$value": "{core.clr.gray.30}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.gray.30}",
+              "dark": "{core.clr.gray.70}"
+            }
+          }
+        },
+        "40": {
+          "$type": "color",
+          "$value": "{core.clr.gray.40}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.gray.40}",
+              "dark": "{core.clr.gray.60}"
+            }
+          }
+        },
+        "50": {
+          "$type": "color",
+          "$value": "{core.clr.gray.50}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.gray.50}",
+              "dark": "{core.clr.gray.50}"
+            }
+          }
+        },
+        "60": {
+          "$type": "color",
+          "$value": "{core.clr.gray.60}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.gray.60}",
+              "dark": "{core.clr.gray.40}"
+            }
+          }
+        },
+        "70": {
+          "$type": "color",
+          "$value": "{core.clr.gray.70}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.gray.70}",
+              "dark": "{core.clr.gray.30}"
+            }
+          }
+        },
+        "80": {
+          "$type": "color",
+          "$value": "{core.clr.gray.80}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.gray.80}",
+              "dark": "{core.clr.gray.20}"
+            }
+          }
+        },
+        "90": {
+          "$type": "color",
+          "$value": "{core.clr.gray.90}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.gray.90}",
+              "dark": "{core.clr.gray.10}"
+            }
+          }
+        },
+        "95": {
+          "$type": "color",
+          "$value": "{core.clr.gray.95}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.gray.95}",
+              "dark": "{core.clr.gray.5}"
+            }
+          }
+        },
+        "100": {
+          "$type": "color",
+          "$value": "{core.clr.gray.100}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.gray.100}",
+              "dark": "{core.clr.gray.0}"
+            }
+          }
+        }
+      },
+      "purple": {
+        "5": {
+          "$type": "color",
+          "$value": "{core.clr.purple.5}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.purple.5}",
+              "dark": "{core.clr.purple.95}"
+            }
+          }
+        },
+        "10": {
+          "$type": "color",
+          "$value": "{core.clr.purple.10}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.purple.10}",
+              "dark": "{core.clr.purple.90}"
+            }
+          }
+        },
+        "20": {
+          "$type": "color",
+          "$value": "{core.clr.purple.20}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.purple.20}",
+              "dark": "{core.clr.purple.80}"
+            }
+          }
+        },
+        "30": {
+          "$type": "color",
+          "$value": "{core.clr.purple.30}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.purple.30}",
+              "dark": "{core.clr.purple.70}"
+            }
+          }
+        },
+        "40": {
+          "$type": "color",
+          "$value": "{core.clr.purple.40}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.purple.40}",
+              "dark": "{core.clr.purple.60}"
+            }
+          }
+        },
+        "50": {
+          "$type": "color",
+          "$value": "{core.clr.purple.50}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.purple.50}",
+              "dark": "{core.clr.purple.50}"
+            }
+          }
+        },
+        "60": {
+          "$type": "color",
+          "$value": "{core.clr.purple.60}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.purple.60}",
+              "dark": "{core.clr.purple.40}"
+            }
+          }
+        },
+        "70": {
+          "$type": "color",
+          "$value": "{core.clr.purple.70}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.purple.70}",
+              "dark": "{core.clr.purple.30}"
+            }
+          }
+        },
+        "80": {
+          "$type": "color",
+          "$value": "{core.clr.purple.80}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.purple.80}",
+              "dark": "{core.clr.purple.20}"
+            }
+          }
+        },
+        "90": {
+          "$type": "color",
+          "$value": "{core.clr.purple.90}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.purple.90}",
+              "dark": "{core.clr.purple.10}"
+            }
+          }
+        },
+        "95": {
+          "$type": "color",
+          "$value": "{core.clr.purple.95}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.purple.95}",
+              "dark": "{core.clr.purple.5}"
+            }
+          }
+        }
+      },
+      "pop": {
+        "5": {
+          "$type": "color",
+          "$value": "{core.clr.pop.5}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.pop.5}",
+              "dark": "{core.clr.pop.95}"
+            }
+          }
+        },
+        "10": {
+          "$type": "color",
+          "$value": "{core.clr.pop.10}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.pop.10}",
+              "dark": "{core.clr.pop.90}"
+            }
+          }
+        },
+        "20": {
+          "$type": "color",
+          "$value": "{core.clr.pop.20}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.pop.20}",
+              "dark": "{core.clr.pop.80}"
+            }
+          }
+        },
+        "30": {
+          "$type": "color",
+          "$value": "{core.clr.pop.30}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.pop.30}",
+              "dark": "{core.clr.pop.70}"
+            }
+          }
+        },
+        "40": {
+          "$type": "color",
+          "$value": "{core.clr.pop.40}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.pop.40}",
+              "dark": "{core.clr.pop.60}"
+            }
+          }
+        },
+        "50": {
+          "$type": "color",
+          "$value": "{core.clr.pop.50}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.pop.50}",
+              "dark": "{core.clr.pop.50}"
+            }
+          }
+        },
+        "60": {
+          "$type": "color",
+          "$value": "{core.clr.pop.60}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.pop.60}",
+              "dark": "{core.clr.pop.40}"
+            }
+          }
+        },
+        "70": {
+          "$type": "color",
+          "$value": "{core.clr.pop.70}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.pop.70}",
+              "dark": "{core.clr.pop.30}"
+            }
+          }
+        },
+        "80": {
+          "$type": "color",
+          "$value": "{core.clr.pop.80}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.pop.80}",
+              "dark": "{core.clr.pop.20}"
+            }
+          }
+        },
+        "90": {
+          "$type": "color",
+          "$value": "{core.clr.pop.90}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.pop.90}",
+              "dark": "{core.clr.pop.10}"
+            }
+          }
+        },
+        "95": {
+          "$type": "color",
+          "$value": "{core.clr.pop.95}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.pop.95}",
+              "dark": "{core.clr.pop.5}"
+            }
+          }
+        }
+      },
+      "safe": {
+        "5": {
+          "$type": "color",
+          "$value": "{core.clr.safe.5}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.safe.5}",
+              "dark": "{core.clr.safe.95}"
+            }
+          }
+        },
+        "10": {
+          "$type": "color",
+          "$value": "{core.clr.safe.10}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.safe.10}",
+              "dark": "{core.clr.safe.90}"
+            }
+          }
+        },
+        "20": {
+          "$type": "color",
+          "$value": "{core.clr.safe.20}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.safe.20}",
+              "dark": "{core.clr.safe.80}"
+            }
+          }
+        },
+        "30": {
+          "$type": "color",
+          "$value": "{core.clr.safe.30}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.safe.30}",
+              "dark": "{core.clr.safe.70}"
+            }
+          }
+        },
+        "40": {
+          "$type": "color",
+          "$value": "{core.clr.safe.40}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.safe.40}",
+              "dark": "{core.clr.safe.60}"
+            }
+          }
+        },
+        "50": {
+          "$type": "color",
+          "$value": "{core.clr.safe.50}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.safe.50}",
+              "dark": "{core.clr.safe.50}"
+            }
+          }
+        },
+        "60": {
+          "$type": "color",
+          "$value": "{core.clr.safe.60}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.safe.60}",
+              "dark": "{core.clr.safe.40}"
+            }
+          }
+        },
+        "70": {
+          "$type": "color",
+          "$value": "{core.clr.safe.70}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.safe.70}",
+              "dark": "{core.clr.safe.30}"
+            }
+          }
+        },
+        "80": {
+          "$type": "color",
+          "$value": "{core.clr.safe.80}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.safe.80}",
+              "dark": "{core.clr.safe.20}"
+            }
+          }
+        },
+        "90": {
+          "$type": "color",
+          "$value": "{core.clr.safe.90}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.safe.90}",
+              "dark": "{core.clr.safe.10}"
+            }
+          }
+        },
+        "95": {
+          "$type": "color",
+          "$value": "{core.clr.safe.95}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.safe.95}",
+              "dark": "{core.clr.safe.5}"
+            }
+          }
+        }
+      },
+      "warn": {
+        "5": {
+          "$type": "color",
+          "$value": "{core.clr.warn.5}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.warn.5}",
+              "dark": "{core.clr.warn.95}"
+            }
+          }
+        },
+        "10": {
+          "$type": "color",
+          "$value": "{core.clr.warn.10}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.warn.10}",
+              "dark": "{core.clr.warn.90}"
+            }
+          }
+        },
+        "20": {
+          "$type": "color",
+          "$value": "{core.clr.warn.20}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.warn.20}",
+              "dark": "{core.clr.warn.80}"
+            }
+          }
+        },
+        "30": {
+          "$type": "color",
+          "$value": "{core.clr.warn.30}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.warn.30}",
+              "dark": "{core.clr.warn.70}"
+            }
+          }
+        },
+        "40": {
+          "$type": "color",
+          "$value": "{core.clr.warn.40}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.warn.40}",
+              "dark": "{core.clr.warn.60}"
+            }
+          }
+        },
+        "50": {
+          "$type": "color",
+          "$value": "{core.clr.warn.50}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.warn.50}",
+              "dark": "{core.clr.warn.50}"
+            }
+          }
+        },
+        "60": {
+          "$type": "color",
+          "$value": "{core.clr.warn.60}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.warn.60}",
+              "dark": "{core.clr.warn.40}"
+            }
+          }
+        },
+        "70": {
+          "$type": "color",
+          "$value": "{core.clr.warn.70}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.warn.70}",
+              "dark": "{core.clr.warn.30}"
+            }
+          }
+        },
+        "80": {
+          "$type": "color",
+          "$value": "{core.clr.warn.80}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.warn.80}",
+              "dark": "{core.clr.warn.20}"
+            }
+          }
+        },
+        "90": {
+          "$type": "color",
+          "$value": "{core.clr.warn.90}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.warn.90}",
+              "dark": "{core.clr.warn.10}"
+            }
+          }
+        },
+        "95": {
+          "$type": "color",
+          "$value": "{core.clr.warn.95}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.warn.95}",
+              "dark": "{core.clr.warn.5}"
+            }
+          }
+        }
+      },
+      "danger": {
+        "5": {
+          "$type": "color",
+          "$value": "{core.clr.danger.5}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.danger.5}",
+              "dark": "{core.clr.danger.95}"
+            }
+          }
+        },
+        "10": {
+          "$type": "color",
+          "$value": "{core.clr.danger.10}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.danger.10}",
+              "dark": "{core.clr.danger.90}"
+            }
+          }
+        },
+        "20": {
+          "$type": "color",
+          "$value": "{core.clr.danger.20}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.danger.20}",
+              "dark": "{core.clr.danger.80}"
+            }
+          }
+        },
+        "30": {
+          "$type": "color",
+          "$value": "{core.clr.danger.30}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.danger.30}",
+              "dark": "{core.clr.danger.70}"
+            }
+          }
+        },
+        "40": {
+          "$type": "color",
+          "$value": "{core.clr.danger.40}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.danger.40}",
+              "dark": "{core.clr.danger.60}"
+            }
+          }
+        },
+        "50": {
+          "$type": "color",
+          "$value": "{core.clr.danger.50}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.danger.50}",
+              "dark": "{core.clr.danger.50}"
+            }
+          }
+        },
+        "60": {
+          "$type": "color",
+          "$value": "{core.clr.danger.60}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.danger.60}",
+              "dark": "{core.clr.danger.40}"
+            }
+          }
+        },
+        "70": {
+          "$type": "color",
+          "$value": "{core.clr.danger.70}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.danger.70}",
+              "dark": "{core.clr.danger.30}"
+            }
+          }
+        },
+        "80": {
+          "$type": "color",
+          "$value": "{core.clr.danger.80}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.danger.80}",
+              "dark": "{core.clr.danger.20}"
+            }
+          }
+        },
+        "90": {
+          "$type": "color",
+          "$value": "{core.clr.danger.90}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.danger.90}",
+              "dark": "{core.clr.danger.10}"
+            }
+          }
+        },
+        "95": {
+          "$type": "color",
+          "$value": "{core.clr.danger.95}",
+          "$description": "",
+          "$extensions": {
+            "mode": {
+              "light": "{core.clr.danger.95}",
+              "dark": "{core.clr.danger.5}"
+            }
+          }
+        }
+      }
+    },
     "$extensions": {
       "tokens-bruecke-meta": {
         "useDTCGKeys": true,
@@ -627,7 +1378,7 @@
           "core",
           "semantic"
         ],
-        "createdAt": "2026-05-05T21:29:24.973Z"
+        "createdAt": "2026-05-06T00:07:50.195Z"
       }
     }
   }

package/tokens/tokens.css CHANGED Viewed

@@ -18,7 +18,6 @@
   --bg-pop: light-dark(var(--clr-pop-95), var(--clr-pop-5));
   --bg-purple: light-dark(var(--clr-purple-95), var(--clr-purple-5));
   --bg-safe: light-dark(var(--clr-safe-95), var(--clr-safe-5));
-  --bg-toast: light-dark(var(--clr-gray-5), var(--clr-gray-95));
   --bg-warn: light-dark(var(--clr-warn-95), var(--clr-warn-5));
   --border-1: light-dark(var(--clr-gray-60), var(--clr-gray-40));
   --border-2: light-dark(var(--clr-gray-70), var(--clr-gray-30));
@@ -129,6 +128,74 @@
   --radius-m: 0.5rem;
   --radius-ml: 0.625rem;
   --radius-s: 0.25rem;
+  --scale-danger-5: light-dark(var(--clr-danger-5), var(--clr-danger-95));
+  --scale-danger-10: light-dark(var(--clr-danger-10), var(--clr-danger-90));
+  --scale-danger-20: light-dark(var(--clr-danger-20), var(--clr-danger-80));
+  --scale-danger-30: light-dark(var(--clr-danger-30), var(--clr-danger-70));
+  --scale-danger-40: light-dark(var(--clr-danger-40), var(--clr-danger-60));
+  --scale-danger-50: var(--clr-danger-50);
+  --scale-danger-60: light-dark(var(--clr-danger-60), var(--clr-danger-40));
+  --scale-danger-70: light-dark(var(--clr-danger-70), var(--clr-danger-30));
+  --scale-danger-80: light-dark(var(--clr-danger-80), var(--clr-danger-20));
+  --scale-danger-90: light-dark(var(--clr-danger-90), var(--clr-danger-10));
+  --scale-danger-95: light-dark(var(--clr-danger-95), var(--clr-danger-5));
+  --scale-gray-0: light-dark(var(--clr-gray-0), var(--clr-gray-100));
+  --scale-gray-5: light-dark(var(--clr-gray-5), var(--clr-gray-95));
+  --scale-gray-10: light-dark(var(--clr-gray-10), var(--clr-gray-90));
+  --scale-gray-20: light-dark(var(--clr-gray-20), var(--clr-gray-80));
+  --scale-gray-30: light-dark(var(--clr-gray-30), var(--clr-gray-70));
+  --scale-gray-40: light-dark(var(--clr-gray-40), var(--clr-gray-60));
+  --scale-gray-50: var(--clr-gray-50);
+  --scale-gray-60: light-dark(var(--clr-gray-60), var(--clr-gray-40));
+  --scale-gray-70: light-dark(var(--clr-gray-70), var(--clr-gray-30));
+  --scale-gray-80: light-dark(var(--clr-gray-80), var(--clr-gray-20));
+  --scale-gray-90: light-dark(var(--clr-gray-90), var(--clr-gray-10));
+  --scale-gray-95: light-dark(var(--clr-gray-95), var(--clr-gray-5));
+  --scale-gray-100: light-dark(var(--clr-gray-100), var(--clr-gray-0));
+  --scale-pop-5: light-dark(var(--clr-pop-5), var(--clr-pop-95));
+  --scale-pop-10: light-dark(var(--clr-pop-10), var(--clr-pop-90));
+  --scale-pop-20: light-dark(var(--clr-pop-20), var(--clr-pop-80));
+  --scale-pop-30: light-dark(var(--clr-pop-30), var(--clr-pop-70));
+  --scale-pop-40: light-dark(var(--clr-pop-40), var(--clr-pop-60));
+  --scale-pop-50: var(--clr-pop-50);
+  --scale-pop-60: light-dark(var(--clr-pop-60), var(--clr-pop-40));
+  --scale-pop-70: light-dark(var(--clr-pop-70), var(--clr-pop-30));
+  --scale-pop-80: light-dark(var(--clr-pop-80), var(--clr-pop-20));
+  --scale-pop-90: light-dark(var(--clr-pop-90), var(--clr-pop-10));
+  --scale-pop-95: light-dark(var(--clr-pop-95), var(--clr-pop-5));
+  --scale-purple-5: light-dark(var(--clr-purple-5), var(--clr-purple-95));
+  --scale-purple-10: light-dark(var(--clr-purple-10), var(--clr-purple-90));
+  --scale-purple-20: light-dark(var(--clr-purple-20), var(--clr-purple-80));
+  --scale-purple-30: light-dark(var(--clr-purple-30), var(--clr-purple-70));
+  --scale-purple-40: light-dark(var(--clr-purple-40), var(--clr-purple-60));
+  --scale-purple-50: var(--clr-purple-50);
+  --scale-purple-60: light-dark(var(--clr-purple-60), var(--clr-purple-40));
+  --scale-purple-70: light-dark(var(--clr-purple-70), var(--clr-purple-30));
+  --scale-purple-80: light-dark(var(--clr-purple-80), var(--clr-purple-20));
+  --scale-purple-90: light-dark(var(--clr-purple-90), var(--clr-purple-10));
+  --scale-purple-95: light-dark(var(--clr-purple-95), var(--clr-purple-5));
+  --scale-safe-5: light-dark(var(--clr-safe-5), var(--clr-safe-95));
+  --scale-safe-10: light-dark(var(--clr-safe-10), var(--clr-safe-90));
+  --scale-safe-20: light-dark(var(--clr-safe-20), var(--clr-safe-80));
+  --scale-safe-30: light-dark(var(--clr-safe-30), var(--clr-safe-70));
+  --scale-safe-40: light-dark(var(--clr-safe-40), var(--clr-safe-60));
+  --scale-safe-50: var(--clr-safe-50);
+  --scale-safe-60: light-dark(var(--clr-safe-60), var(--clr-safe-40));
+  --scale-safe-70: light-dark(var(--clr-safe-70), var(--clr-safe-30));
+  --scale-safe-80: light-dark(var(--clr-safe-80), var(--clr-safe-20));
+  --scale-safe-90: light-dark(var(--clr-safe-90), var(--clr-safe-10));
+  --scale-safe-95: light-dark(var(--clr-safe-95), var(--clr-safe-5));
+  --scale-warn-5: light-dark(var(--clr-warn-5), var(--clr-warn-95));
+  --scale-warn-10: light-dark(var(--clr-warn-10), var(--clr-warn-90));
+  --scale-warn-20: light-dark(var(--clr-warn-20), var(--clr-warn-80));
+  --scale-warn-30: light-dark(var(--clr-warn-30), var(--clr-warn-70));
+  --scale-warn-40: light-dark(var(--clr-warn-40), var(--clr-warn-60));
+  --scale-warn-50: var(--clr-warn-50);
+  --scale-warn-60: light-dark(var(--clr-warn-60), var(--clr-warn-40));
+  --scale-warn-70: light-dark(var(--clr-warn-70), var(--clr-warn-30));
+  --scale-warn-80: light-dark(var(--clr-warn-80), var(--clr-warn-20));
+  --scale-warn-90: light-dark(var(--clr-warn-90), var(--clr-warn-10));
+  --scale-warn-95: light-dark(var(--clr-warn-95), var(--clr-warn-5));
   --shadow-clr: light-dark(hsl(0 0.0% 0.0% / 0.1), hsl(0 0.0% 0.0% / 0.5));
   --size-button: 1.75rem;
   --size-cta: 2rem;