Organise Tag css variables (#506)

# Motivation

Currently, neither the CSS variable names nor the values are in sync
with Design for the Tag component.

# Changes

- Rename `--text-text` and `--text-light` to be more Tag related (they
are used in the Tag component only).
- Add separate variables for the default Tag color and background to
match the structure in Figma. This changes the default Tag colors, so
they now match the design.

# Screenshots

## Tag default colour changes

| Before | After |
|--------|--------|
| <img width="291" alt="image"
src="https://github.com/user-attachments/assets/a6cffea7-58a5-49da-85cb-c8f43e43f766">
| <img width="314" alt="image"
src="https://github.com/user-attachments/assets/ea431802-4b1f-4100-98c2-de3ba8057ae5">
|
| <img width="198" alt="image"
src="https://github.com/user-attachments/assets/e011aedb-6745-4229-b50a-77400ee683fc">
| <img width="181" alt="image"
src="https://github.com/user-attachments/assets/a2d2e69e-10b8-42b9-971e-0170b2c9d78c">
|

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

src/lib/components/Tag.svelte

@@ -15,22 +15,22 @@
 <style lang="scss">
   .tag {
     // "info" intent is the default
-    background-color: var(--elements-divider);
-    color: var(--text-description);
+    background-color: var(--tag-background);
+    color: var(--tag-text);
 
     &.success {
       background-color: var(--positive-emphasis);
-      color: var(--text-light);
+      color: var(--tag-text-light);
     }
 
     &.warning {
       background-color: var(--warning-emphasis);
-      color: var(--text-text);
+      color: var(--tag-text-dark);
     }
 
     &.error {
       background-color: var(--negative-emphasis);
-      color: var(--text-light);
+      color: var(--tag-text-light);
     }
   }
 </style>

src/lib/styles/themes/dark.scss

@@ -9,8 +9,12 @@
   --elements-badges-inactive: var(--cp-dark-100);
   --text-description: var(--cp-dark-200);
   --text-description-tint: var(--cp-dark-100);
-  --text-light: var(--cp-light-50);
-  --text-text: var(--cp-light-900);
+
+  --tag-background: var(--cp-dark-400);
+  --tag-text: var(--cp-dark-200);
+  --tag-text-light: var(--cp-light-50);
+  --tag-text-dark: var(--cp-light-900);
+
   --input-focus-background: var(--cp-dark-450);
   --button-primary: var(--cp-dark-accent);
   --table-background: var(--cp-dark-500);

src/lib/styles/themes/light.scss

@@ -10,8 +10,12 @@
     --elements-badges-inactive: var(--cp-light-250);
     --text-description: var(--cp-light-600);
     --text-description-tint: var(--cp-light-250);
-    --text-light: var(--cp-light-50);
-    --text-text: var(--cp-light-900);
+
+    --tag-background: var(--cp-light-125);
+    --tag-text: var(--cp-light-600);
+    --tag-text-light: var(--cp-light-50);
+    --tag-text-dark: var(--cp-light-900);
+
     --input-focus-background: var(--cp-light-75);
     --button-primary: var(--cp-light-accent);
     --table-background: var(--cp-light-75);