globuswebcomponents 0.3.5 → 0.3.7

package/dist/collection/components/gb-badges/gb-badges.css

@@ -75,10 +75,19 @@
     --success-900: #074d31;
     --success-950: #053321;
 
-    /* opacity color palette  */
+    /* ------------------------------------------opacity color palette--------------------------------------  */
+    /* 20% opacity */
     --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);
     --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);
 
+    /* 30% opacity */
+    --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);
+    --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);
+
+    /* 40% opacity */
+    --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);
+    --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);
+
 
     /* ------------------------------------------Secondary Color------------------------------------------- */
     /* blueLight color palete */
@@ -209,6 +218,14 @@
         --color-text-selected: var(--blue-300);
     }
 
+    [data-theme="light"] {
+        --color-text-danger-bold: var(--brandRed-800);
+    }
+
+    [data-theme="dark"] {
+        --color-text-danger-bold: var(--brandRed-100);
+    }
+
     [data-theme="light"] {
         --color-text-danger: var(--brandRed-700);
     }
@@ -217,6 +234,14 @@
         --color-text-danger: var(--brandRed-700);
     }
 
+     [data-theme="light"] {
+        --color-text-danger-subtle: var(--brandRed-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-danger-subtle: var(--brandRed-300);
+    }
+
     [data-theme="light"] {
         --color-text-danger-inverse: var(--base-white);
     }
@@ -226,11 +251,11 @@
     }
 
     [data-theme="light"] {
-        --color-text-danger-bold: var(--brandRed-800);
+        --color-text-warning-bold: var(--warning-800);
     }
 
     [data-theme="dark"] {
-        --color-text-danger-bold: var(--brandRed-100);
+        --color-text-warning-bold: var(--warning-100);
     }
 
     [data-theme="light"] {
@@ -242,36 +267,37 @@
         --color-text-warning: var(--warning-300);
     }
 
+
     [data-theme="light"] {
-        --color-text-warning-bold: var(--warning-800);
+        --color-text-warning-subtle: var(--warning-500);
     }
 
     [data-theme="dark"] {
-        --color-text-warning-bold: var(--warning-100);
+        --color-text-warning-subtle: var(--warning-400);
     }
 
     [data-theme="light"] {
-        --color-text-sucess: var(--success-600);
+        --color-text-success-bold: var(--success-800);
     }
 
     [data-theme="dark"] {
-        --color-text-sucess: var(--success-300);
+        --color-text-success-bold: var(--success-100);
     }
 
     [data-theme="light"] {
-        --color-text-sucess-bold: var(--success-800);
+        --color-text-success: var(--success-600);
     }
 
     [data-theme="dark"] {
-        --color-text-sucess-bold: var(--success-100);
+        --color-text-success: var(--success-300);
     }
 
     [data-theme="light"] {
-        --color-text-discovery: var(--blueLight-800);
+        --color-text-success-subtle: var(--success-600);
     }
 
     [data-theme="dark"] {
-        --color-text-discovery: var(--blueLight-100);
+        --color-text-success-subtle: var(--success-300);
     }
 
     [data-theme="light"] {
@@ -283,11 +309,19 @@
     }
 
     [data-theme="light"] {
-        --color-text-information: var(--blue-600);
+        --color-text-discovery: var(--blueLight-800);
     }
 
     [data-theme="dark"] {
-        --color-text-information: var(--blue-300);
+        --color-text-discovery: var(--blueLight-100);
+    }
+
+    [data-theme="light"] {
+        --color-text-discovery-subtle: var(--blueLight-400);
+    }
+
+    [data-theme="dark"] {
+        --color-text-discovery-subtle: var(--blueLight-100);
     }
 
     [data-theme="light"] {
@@ -299,11 +333,19 @@
     }
 
     [data-theme="light"] {
-        --color-text-purple: var(--purple-600);
+        --color-text-information: var(--blue-600);
     }
 
     [data-theme="dark"] {
-        --color-text-purple: var(--purple-300);
+        --color-text-information: var(--blue-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-information-subtle: var(--blue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-information-subtle: var(--blue-400);
     }
 
     [data-theme="light"] {
@@ -314,6 +356,46 @@
         --color-text-purple-bold: var(--purple-100);
     }
 
+    [data-theme="light"] {
+        --color-text-purple: var(--purple-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-purple: var(--purple-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-purple-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-purple-subtle: var(--purple-400);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink-bold: var(--pink-800);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink-bold: var(--pink-100);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink: var(--pink-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink: var(--pink-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink-subtle: var(--pink-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink-subtle: var(--pink-400);
+    }
+
 
     /* --------------Link color--------------- */
 
@@ -386,11 +468,11 @@
     }
 
     [data-theme="light"] {
-        --color-icon-darkBlue: var(--brandDarkBlue-500);
+        --color-icon-brandDarkBlue: var(--brandDarkBlue-500);
     }
 
     [data-theme="dark"] {
-        --color-icon-darkBlue: var(--brandDarkBlue-200);
+        --color-icon-brandDarkBlue: var(--brandDarkBlue-200);
     }
 
     [data-theme="light"] {
@@ -402,35 +484,35 @@
     }
 
     [data-theme="light"] {
-        --color-icon-danger: var(--brandRed-700);
+        --color-icon-selected: var(--blue-500);
     }
 
     [data-theme="dark"] {
-        --color-icon-danger: var(--brandRed-200);
+        --color-icon-selected: var(--blue-300);
     }
 
     [data-theme="light"] {
-        --color-icon-danger-inverse: var(--base-white);
+        --color-icon-danger-bold: var(--brandRed-800);
     }
 
     [data-theme="dark"] {
-        --color-icon-danger-inverse: var(--brandRed-950);
+        --color-icon-danger-bold: var(--brandRed-100);
     }
 
     [data-theme="light"] {
-        --color-icon-danger-bold: var(--brandRed-800);
+        --color-icon-danger: var(--brandRed-700);
     }
 
     [data-theme="dark"] {
-        --color-icon-danger-bold: var(--brandRed-100);
+        --color-icon-danger: var(--brandRed-200);
     }
 
     [data-theme="light"] {
-        --color-icon-warning: var(--warning-600);
+        --color-icon-danger-inverse: var(--base-white);
     }
 
     [data-theme="dark"] {
-        --color-icon-warning: var(--warning-300);
+        --color-icon-danger-inverse: var(--brandRed-950);
     }
 
     [data-theme="light"] {
@@ -442,27 +524,27 @@
     }
 
     [data-theme="light"] {
-        --color-icon-sucess: var(--success-600);
+        --color-icon-warning: var(--warning-600);
     }
 
     [data-theme="dark"] {
-        --color-icon-sucess: var(--success-300);
+        --color-icon-warning: var(--warning-300);
     }
 
     [data-theme="light"] {
-        --color-icon-sucess-bold: var(--success-800);
+        --color-icon-success-bold: var(--success-800);
     }
 
     [data-theme="dark"] {
-        --color-icon-sucess-bold: var(--success-100);
+        --color-icon-success-bold: var(--success-100);
     }
 
     [data-theme="light"] {
-        --color-icon-discovery: var(--blueLight-600);
+        --color-icon-success: var(--success-600);
     }
 
     [data-theme="dark"] {
-        --color-icon-discovery: var(--blueLight-300);
+        --color-icon-success: var(--success-300);
     }
 
     [data-theme="light"] {
@@ -474,11 +556,11 @@
     }
 
     [data-theme="light"] {
-        --color-icon-information: var(--blue-600);
+        --color-icon-discovery: var(--blueLight-600);
     }
 
     [data-theme="dark"] {
-        --color-icon-information: var(--blue-300);
+        --color-icon-discovery: var(--blueLight-300);
     }
 
     [data-theme="light"] {
@@ -490,11 +572,11 @@
     }
 
     [data-theme="light"] {
-        --color-icon-purple: var(--purple-600);
+        --color-icon-information: var(--blue-600);
     }
 
     [data-theme="dark"] {
-        --color-icon-purple: var(--purple-300);
+        --color-icon-information: var(--blue-300);
     }
 
     [data-theme="light"] {
@@ -506,11 +588,11 @@
     }
 
     [data-theme="light"] {
-        --color-icon-pink: var(--pink-600);
+        --color-icon-purple: var(--purple-600);
     }
 
     [data-theme="dark"] {
-        --color-icon-pink: var(--pink-300);
+        --color-icon-purple: var(--purple-300);
     }
 
     [data-theme="light"] {
@@ -518,7 +600,15 @@
     }
 
     [data-theme="dark"] {
-        --color-icon-pink: var(--pink-100);
+        --color-icon-pink-bold: var(--pink-100);
+    }
+
+    [data-theme="light"] {
+        --color-icon-pink: var(--pink-600);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-pink: var(--pink-300);
     }
 
     /* ----------------Border Color --------------- */
@@ -596,11 +686,11 @@
     }
 
     [data-theme="light"] {
-        --color-border-darkBlue: var(--brandDarkBlue-500);
+        --color-border-brandDarkBlue: var(--brandDarkBlue-500);
     }
 
     [data-theme="dark"] {
-        --color-border-darkBlue: var(--brandDarkBlue-200);
+        --color-border-brandDarkBlue: var(--brandDarkBlue-200);
     }
 
     [data-theme="light"] {
@@ -676,35 +766,35 @@
     }
 
     [data-theme="light"] {
-        --color-border-sucess-bold: var(--success-800);
+        --color-border-success-bold: var(--success-800);
     }
 
     [data-theme="dark"] {
-        --color-border-sucess-bold: var(--success-100);
+        --color-border-success-bold: var(--success-100);
     }
 
     [data-theme="light"] {
-        --color-border-sucess: var(--success-600);
+        --color-border-success: var(--success-600);
     }
 
     [data-theme="dark"] {
-        --color-border-sucess: var(--success-300);
+        --color-border-success: var(--success-300);
     }
 
     [data-theme="light"] {
-        --color-border-sucess-subtle: var(--success-200);
+        --color-border-success-subtle: var(--success-200);
     }
 
     [data-theme="dark"] {
-        --color-border-sucess-subtle: var(--success-800);
+        --color-border-success-subtle: var(--success-800);
     }
 
     [data-theme="light"] {
-        --color-border-sucess-subtler: var(--success-100);
+        --color-border-success-subtler: var(--success-100);
     }
 
     [data-theme="dark"] {
-        --color-border-sucess-subtler: var(--success-900);
+        --color-border-success-subtler: var(--success-900);
     }
 
     [data-theme="light"] {
@@ -882,11 +972,11 @@
     }
 
     [data-theme="light"] {
-        --color-background-darkblue: var(--brandDarkBlue-500);
+        --color-background-brandDarkblue: var(--brandDarkBlue-500);
     }
 
     [data-theme="dark"] {
-        --color-background-darkblue: var(--brandDarkBlue-200);
+        --color-background-brandDarkblue: var(--brandDarkBlue-200);
     }
 
     [data-theme="light"] {
@@ -1244,6 +1334,22 @@
         --color-blanket: var(--darkBlue200-opacity20);
     }
 
+    [data-theme="light"] {
+        --color-blanket-subtle: var(--darkBlue500-opacity30);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtle: var(--darkBlue200-opacity30);
+    }
+
+    [data-theme="light"] {
+        --color-blanket-subtler: var(--darkBlue500-opacity40);
+    }
+
+    [data-theme="dark"] {
+        --color-blanket-subtler: var(--darkBlue200-opacity40);
+    }
+
 
 
     /* ----------------Skeleton Color --------------- */
@@ -1259,11 +1365,11 @@
 
     /* ----------------Surface Color --------------- */
     [data-theme="light"] {
-        --color-surface-secondary: var(--gray-50);
+        --color-surface-bold: var(--gray-25);
     }
 
     [data-theme="dark"] {
-        --color-surface-secondary: var(--gray-950);
+        --color-surface-bold: var(--gray-950);
     }
 
     [data-theme="light"] {
@@ -1289,9 +1395,6 @@
     [data-theme="dark"] {
         --color-surface-pressed: var(--gray-700);
     }
-
- 
-
 }
 
 /* -----------------Shadow and Blur----------------- */
@@ -1550,502 +1653,6 @@
 }
 @import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');
 
-:root {
-    --font-family: 'Sora';
-    --font-family-sans: sans-serif;
-    --font-style: normal;
-
-    /* ------------------base font sizes---------------- */
-    /* Display 2xl */
-    --display-2xl-bold-font-size: 4.5rem;
-    --display-2xl-bold-font-weight: 700;
-    --display-2xl-bold-line-height: 5rem;
-    --display-2xl-bold-letter-spacing: -0.09rem;
-
-    --display-2xl-semiBold-font-size: 4.5rem;
-    --display-2xl-semiBold-font-weight: 600;
-    --display-2xl-semiBold-line-height: 5rem;
-    --dispay-2xl-semiBold-letter-spacing: -0.09rem;
-
-    /* Display xl */
-    --display-xl-bold-font-size: 3.75rem;
-    --display-xl-bold-font-weight: 700;
-    --display-xl-bold-line-height: 4.25rem;
-    --display-xl-bold-letter-spacing: -0.075rem;
-
-    --display-xl-semiBold-font-size: 3.75rem;
-    --display-xl-semiBold-font-weight: 600;
-    --display-xl-semiBold-line-height: 4.25rem;
-    --display-xl-semiBold-letter-spacing: -0.075rem;
-
-    /* Display lg */
-    --display-lg-bold-font-size: 3rem;
-    --display-lg-bold-font-weight: 700;
-    --display-lg-bold-line-height: 4.25rem;
-    --display-lg-bold-letter-spacing: -0.075rem;
-
-    --display-lg-semiBold-font-size: 3rem;
-    --display-lg-semiBold-font-weight: 600;
-    --display-lg-semiBold-line-height: 4.25rem;
-    --display-lg-semiBold-letter-spacing: -0.075rem;
-
-    /* Display sm */
-    --display-sm-bold-font-size: 1.875rem;
-    --display-sm-bold-font-weight: 700;
-    --display-sm-bold-line-height: 2.375rem;
-    --display-sm-bold-letter-spacing: 0rem;
-
-    --display-sm-semiBold-font-size: 1.875rem;
-    --display-sm-semiBold-font-weight: 600;
-    --display-sm-semiBold-line-height: 2.375rem;
-    --display-sm-semiBold-letter-spacing: 0rem;
-
-    /* Display xs */
-    --display-xs-bold-font-size: 1.5rem;
-    --display-xs-bold-font-weight: 700;
-    --display-xs-bold-line-height: 2rem;
-    --display-xs-bold-letter-spacing: 0rem;
-
-    --display-xs-semiBold-font-size: 1.5rem;
-    --display-xs-semiBold-font-weight: 600;
-    --display-xs-semiBold-line-height: 2rem;
-    --display-xs-semiBold-letter-spacing: 0rem;
-
-    /* Text xl */
-    --text-xl-bold-font-size: 1.25rem;
-    --text-xl-bold-font-weight: 700;
-    --text-xl-bold-line-height: 1.875rem;
-
-    --text-xl-semiBold-font-size: 1.25rem;
-    --text-xl-semiBold-font-weight: 600;
-    --text-xl-semiBold-line-height: 1.875rem;
-
-    --text-xl-medium-font-size: 1.25rem;
-    --text-xl-medium-font-weight: 500;
-    --text-xl-medium-line-height: 1.875rem;
-
-    --text-xl-regular-font-size: 1.25rem;
-    --text-xl-regular-font-weight: 400;
-    --text-xl-regular-line-height: 1.875rem;
-
-    /* Text lg */
-    --text-lg-bold-font-size: 1.125rem;
-    --text-lg-bold-font-weight: 700;
-    --text-lg-bold-line-height: 1.75rem;
-
-    --text-lg-semiBold-font-size: 1.125rem;
-    --text-lg-semiBold-font-weight: 600;
-    --text-lg-semiBold-line-height: 1.75rem;
-
-    --text-lg-medium-font-size: 1.125rem;
-    --text-lg-medium-font-weight: 500;
-    --text-lg-medium-line-height: 1.75rem;
-
-    --text-lg-regular-font-size: 1.125rem;
-    --text-lg-regular-font-weight: 400;
-    --text-lg-regular-line-height: 1.75rem;
-
-    /* Text md */
-    --text-md-bold-font-size: 1rem;
-    --text-md-bold-font-weight: 700;
-    --text-md-bold-line-height: 1.5rem;
-
-    --text-md-semiBold-font-size: 1rem;
-    --text-md-semiBold-font-weight: 600;
-    --text-md-semiBold-line-height: 1.5rem;
-
-    --text-md-medium-font-size: 1rem;
-    --text-md-medium-font-weight: 500;
-    --text-md-medium-line-height: 1.5rem;
-
-    --text-md-regular-font-size: 1rem;
-    --text-md-regular-font-weight: 400;
-    --text-md-regular-line-height: 1.5rem;
-
-    /* Text sm */
-    --text-sm-bold-font-size: 0.875rem;
-    --text-sm-bold-font-weight: 700;
-    --text-sm-bold-line-height: 1.25rem;
-
-    --text-sm-semiBold-font-size: 0.875rem;
-    --text-sm-semiBold-font-weight: 600;
-    --text-sm-semiBold-line-height: 1.25rem;
-
-    --text-sm-medium-font-size: 0.875rem;
-    --text-sm-medium-font-weight: 500;
-    --text-sm-medium-line-height: 1.25rem;
-
-    --text-sm-regular-font-size: 0.875rem;
-    --text-sm-regular-font-weight: 400;
-    --text-sm-regular-line-height: 1.25rem;
-
-    /* Text xs */
-    --text-xs-bold-font-size: 0.75rem;
-    --text-xs-bold-font-weight: 700;
-    --text-xs-bold-line-height: 1.125rem;
-
-    --text-xs-semiBold-font-size: 0.75rem;
-    --text-xs-semiBold-font-weight: 600;
-    --text-xs-semiBold-line-height: 1.125rem;
-
-    --text-xs-medium-font-size: 0.75rem;
-    --text-xs-medium-font-weight: 500;
-    --text-xs-medium-line-height: 1.125rem;
-
-    --text-xs-regular-font-size: 0.75rem;
-    --text-xs-regular-font-weight: 400;
-    --text-xs-regular-line-height: 1.125rem;
-}
-
-/* ------------------Responsive adjustments---------------- */
-/* Medium screens */
-@media (max-width: 1199px){
-    :root{
-        /* Display 2xl */
-        --display-2xl-bold-font-size: 3.75rem;
-        --display-2xl-bold-font-weight: 700;
-        --display-2xl-bold-line-height: 4.25rem;
-        --display-2xl-bold-letter-spacing: -0.075rem;
-
-        --display-2xl-semiBold-font-size: 3.75rem;
-        --display-2xl-semiBold-font-weight: 600;
-        --display-2xl-semiBold-line-height: 4.25rem;
-        --display-2xl-semiBold-letter-spacing: -0.075rem;
-
-        /* Display xl */   
-        --display-xl-bold-font-size: 3.5rem;
-        --display-xl-bold-font-weight: 700;
-        --display-xl-bold-line-height: 3.75rem;
-        --display-xl-bold-letter-spacing: -0.065rem; 
-
-        --display-xl-semiBold-font-size: 3.5rem;
-        --display-xl-semiBold-font-weight: 600;
-        --display-xl-semiBold-line-height: 3.75rem;
-        --display-xl-semiBold-letter-spacing: -0.065rem; 
-
-        /* Display lg */   
-        --display-lg-bold-font-size: 2.75rem;
-        --display-lg-bold-font-weight: 700;
-        --display-lg-bold-line-height: 2.4375rem;
-        --display-lg-bold-letter-spacing: -0.045rem; 
-
-        --display-lg-semiBold-font-size: 2.75rem;
-        --display-lg-semiBold-font-weight: 600;
-        --display-lg-semiBold-line-height: 2.4375rem;
-        --display-lg-semiBold-letter-spacing: -0.045rem; 
-
-        /* Display md */   
-        --display-md-bold-font-size: 2.25rem;
-        --display-md-bold-font-weight: 700;
-        --display-md-bold-line-height: 2.75rem;
-        --display-md-bold-letter-spacing: -0.045rem; 
-
-        --display-md-semiBold-font-size: 2.25rem;
-        --display-md-semiBold-font-weight: 600;
-        --display-md-semiBold-line-height: 2.75rem;
-        --display-md-semiBold-letter-spacing: -0.045rem; 
-
-        /* Display sm */   
-        --display-sm-bold-font-size: 1.875rem;
-        --display-sm-bold-font-weight: 700;
-        --display-sm-bold-line-height: 2.375rem;
-        --display-sm-bold-letter-spacing: 0rem; 
-
-        --display-sm-semiBold-font-size: 1.875rem;
-        --display-sm-semiBold-font-weight: 600;
-        --display-sm-semiBold-line-height: 2.375rem;
-        --display-sm-semiBold-letter-spacing: 0rem; 
-
-        /* Display xs */   
-        --display-xs-bold-font-size: 1.5rem;
-        --display-xs-bold-font-weight: 700;
-        --display-xs-bold-line-height: 2rem;
-        --display-xs-bold-letter-spacing: 0rem; 
-
-        --display-xs-semiBold-font-size: 1.5rem;
-        --display-xs-semiBold-font-weight: 600;
-        --display-xs-semiBold-line-height: 2rem;
-        --display-xs-semiBold-letter-spacing: 0rem;
-    }
-}
-
-/* Small screens */
-@media (max-width: 743px){
-    :root{
-         /* Display 2xl */
-        --display-2xl-bold-font-size: 3rem;
-        --display-2xl-bold-font-weight: 700;
-        --display-2xl-bold-line-height: 3.375rem;
-        --display-2xl-bold-letter-spacing: -0.06rem;
-
-        --display-2xl-semiBold-font-size: 3.75rem;
-        --display-2xl-semiBold-font-weight: 600;
-        --display-2xl-semiBold-line-height: 3.375rem;
-        --display-2xl-semiBold-letter-spacing: -0.06rem;
-
-         /* Display xl */
-        --display-xl-bold-font-size: 2.5rem;
-        --display-xl-bold-font-weight: 700;
-        --display-xl-bold-line-height: 2.875rem;
-        --display-xl-bold-letter-spacing: -0.05rem;
-
-        --display-xl-semiBold-font-size: 2.5rem;
-        --display-xl-semiBold-font-weight: 600;
-        --display-xl-semiBold-line-height: 2.875rem;
-        --display-xl-semiBold-letter-spacing: -0.05rem;
-
-         /* Display lg */
-        --display-lg-bold-font-size: 2rem;
-        --display-lg-bold-font-weight: 700;
-        --display-lg-bold-line-height: 2.5rem;
-        --display-lg-bold-letter-spacing: -0.045rem;
-
-        --display-lg-semiBold-font-size: 2rem;
-        --display-lg-semiBold-font-weight: 600;
-        --display-lg-semiBold-line-height: 2.5rem;
-        --display-lg-semiBold-letter-spacing: -0.045rem;
-
-         /* Display md */
-        --display-md-bold-font-size: 1.75rem;
-        --display-md-bold-font-weight: 700;
-        --display-md-bold-line-height: 2.1375rem;
-        --display-md-bold-letter-spacing: 0rem;
-
-        --display-md-semiBold-font-size: 1.75rem;
-        --display-md-semiBold-font-weight: 600;
-        --display-md-semiBold-line-height: 2.1375rem;
-        --display-md-semiBold-letter-spacing: 0rem;
-
-         /* Display sm */
-        --display-sm-bold-font-size: 1.5rem;
-        --display-sm-bold-font-weight: 700;
-        --display-sm-bold-line-height: 2rem;
-        --display-sm-bold-letter-spacing: 0rem;
-
-        --display-sm-semiBold-font-size: 1.5rem;
-        --display-sm-semiBold-font-weight: 600;
-        --display-sm-semiBold-line-height: 2rem;
-        --display-sm-semiBold-letter-spacing: 0rem;
-
-         /* Display xs */
-        --display-xs-bold-font-size: 1.25rem;
-        --display-xs-bold-font-weight: 700;
-        --display-xs-bold-line-height: 1.75rem;
-        --display-xs-bold-letter-spacing: 0rem;
-
-        --display-xs-semiBold-font-size: 1.25rem;
-        --display-xs-semiBold-font-weight: 600;
-        --display-xs-semiBold-line-height: 1.75rem;
-        --display-xs-semiBold-letter-spacing: 0rem;
-    }
-}
-
-
-.display-2xl-bold{
-    font-size: var(--display-2xl-bold-font-size);
-    font-weight: var(--display-2xl-bold-font-weight);
-    line-height: var(--display-2xl-bold-line-height);
-    letter-spacing: var(--display-2xl-bold-letter-spacing);
-}
-
-.display-2xl-semiBold{
-    font-size: var(--display-2xl-semiBold-font-size);
-    font-weight: var(--display-2xl-semiBold-font-weight);
-    line-height: var(--display-2xl-semiBold-line-height);
-    letter-spacing: var(--display-2xl-semiBold-letter-spacing);
-}
-
-.display-xl-bold{
-    font-size: var(--display-xl-bold-font-size);
-    font-weight: var(--display-xl-bold-font-weight);
-    line-height: var(--display-xl-bold-line-height);
-    letter-spacing: var(--display-xl-bold-letter-spacing);
-}
-
-.display-xl-semiBold{
-    font-size: var(--display-xl-semiBold-font-size);
-    font-weight: var(--display-xl-semiBold-font-weight);
-    line-height: var(--display-xl-semiBold-line-height);
-    letter-spacing: var(--display-xl-semiBold-letter-spacing);
-}
-
-.display-lg-bold{
-    font-size: var(--display-lg-bold-font-size);
-    font-weight: var(--display-lg-bold-font-weight);
-    line-height: var(--display-lg-bold-line-height);
-    letter-spacing: var(--display-lg-bold-letter-spacing);
-}
-
-.display-lg-semiBold{
-    font-size: var(--display-lg-semiBold-font-size);
-    font-weight: var(--display-lg-semiBold-font-weight);
-    line-height: var(--display-lg-semiBold-line-height);
-    letter-spacing: var(--display-lg-semiBold-letter-spacing);
-}
-
-.display-md-bold{
-    font-size: var(--display-md-bold-font-size);
-    font-weight: var(--display-md-bold-font-weight);
-    line-height: var(--display-md-bold-line-height);
-    letter-spacing: var(--display-md-bold-letter-spacing);
-}
-
-.display-md-semiBold{
-    font-size: var(--display-md-semiBold-font-size);
-    font-weight: var(--display-md-semiBold-font-weight);
-    line-height: var(--display-md-semiBold-line-height);
-    letter-spacing: var(--display-md-semiBold-letter-spacing);
-}
-
-.display-sm-bold{
-    font-size: var(--display-sm-bold-font-size);
-    font-weight: var(--display-sm-bold-font-weight);
-    line-height: var(--display-sm-bold-line-height);
-    letter-spacing: var(--display-sm-bold-letter-spacing);
-}
-
-.display-sm-semiBold{
-    font-size: var(--display-sm-semiBold-font-size);
-    font-weight: var(--display-sm-semiBold-font-weight);
-    line-height: var(--display-sm-semiBold-line-height);
-    letter-spacing: var(--display-sm-semiBold-letter-spacing);
-}
-
-.display-xs-bold{
-    font-size: var(--display-xs-bold-font-size);
-    font-weight: var(--display-xs-bold-font-weight);
-    line-height: var(--display-xs-bold-line-height);
-    letter-spacing: var(--display-xs-bold-letter-spacing);
-}
-
-.display-xs-semiBold{
-    font-size: var(--display-xs-semiBold-font-size);
-    font-weight: var(--display-xs-semiBold-font-weight);
-    line-height: var(--display-xs-semiBold-line-height);
-    letter-spacing: var(--display-xs-semiBold-letter-spacing);
-}
-
-.text-xl-bold{
-    font-size: var(--text-xl-bold-font-size);
-    font-weight: var(--text-xl-bold-font-weight);
-    line-height: var(--text-xl-bold-line-height);
-}
-
-.text-xl-semiBold{
-    font-size: var(--text-xl-semiBold-font-size);
-    font-weight: var(--text-xl-semiBold-font-weight);
-    line-height: var(--text-xl-semiBold-line-height);
-}
-
-.text-xl-medium{
-    font-size: var(--text-xl-medium-font-size);
-    font-weight: var(--text-xl-medium-font-weight);
-    line-height: var(--text-xl-medium-line-height);
-}
-
-.text-xl-regular{
-    font-size: var(--text-xl-regular-font-size);
-    font-weight: var(--text-xl-regular-font-weight);
-    line-height: var(--text-xl-regular-line-height);
-}
-
-.text-lg-bold{
-    font-size: var(--text-lg-bold-font-size);
-    font-weight: var(--text-lg-bold-font-weight);
-    line-height: var(--text-lg-bold-line-height);
-}
-
-.text-lg-semiBold{
-    font-size: var(--text-lg-semiBold-font-size);
-    font-weight: var(--text-lg-semiBold-font-weight);
-    line-height: var(--text-lg-semiBold-line-height);
-}
-
-.text-lg-medium{
-    font-size: var(--text-lg-medium-font-size);
-    font-weight: var(--text-lg-medium-font-weight);
-    line-height: var(--text-lg-medium-line-height);
-}
-
-.text-lg-regular{
-    font-size: var(--text-lg-regular-font-size);
-    font-weight: var(--text-lg-regular-font-weight);
-    line-height: var(--text-lg-regular-line-height);
-}
-
-.text-md-bold{
-    font-size: var(--text-md-bold-font-size);
-    font-weight: var(--text-md-bold-font-weight);
-    line-height: var(--text-md-bold-line-height);
-}
-
-.text-md-semiBold{
-    font-size: var(--text-md-semiBold-font-size);
-    font-weight: var(--text-md-semiBold-font-weight);
-    line-height: var(--text-md-semiBold-line-height);
-}
-
-.text-md-medium{
-    font-size: var(--text-md-medium-font-size);
-    font-weight: var(--text-md-medium-font-weight);
-    line-height: var(--text-md-medium-line-height);
-}
-
-.text-md-regular{
-    font-size: var(--text-md-regular-font-size);
-    font-weight: var(--text-md-regular-font-weight);
-    line-height: var(--text-md-regular-line-height);
-}
-
-.text-sm-bold{
-    font-size: var(--text-sm-bold-font-size);
-    font-weight: var(--text-sm-bold-font-weight);
-    line-height: var(--text-sm-bold-line-height);
-}
-
-.text-sm-semiBold{
-    font-size: var(--text-sm-semiBold-font-size);
-    font-weight: var(--text-sm-semiBold-font-weight);
-    line-height: var(--text-sm-semiBold-line-height);
-}
-
-.text-sm-medium{
-    font-size: var(--text-sm-medium-font-size);
-    font-weight: var(--text-sm-medium-font-weight);
-    line-height: var(--text-sm-medium-line-height);
-}
-
-.text-sm-regular{
-    font-size: var(--text-sm-regular-font-size);
-    font-weight: var(--text-sm-regular-font-weight);
-    line-height: var(--text-sm-regular-line-height);
-}
-
-.text-xs-bold{
-    font-size: var(--text-xs-bold-font-size);
-    font-weight: var(--text-xs-bold-font-weight);
-    line-height: var(--text-xs-bold-line-height);
-}
-
-.text-xs-semiBold{
-    font-size: var(--text-xs-semiBold-font-size);
-    font-weight: var(--text-xs-semiBold-font-weight);
-    line-height: var(--text-xs-semiBold-line-height);
-}
-
-.text-xs-medium{
-    font-size: var(--text-xs-medium-font-size);
-    font-weight: var(--text-xs-medium-font-weight);
-    line-height: var(--text-xs-medium-line-height);
-}
-
-.text-xs-regular{
-    font-size: var(--text-xs-regular-font-size);
-    font-weight: var(--text-xs-regular-font-weight);
-    line-height: var(--text-xs-regular-line-height);
-}
-@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');
-
 :root{
     /* Font Sizes */
     --font-size-d-2xl: 4.5rem;
@@ -2059,6 +1666,7 @@
     --font-size-t-md: 1rem;
     --font-size-t-sm: 0.875rem;
     --font-size-t-xs: 0.75rem;
+    --font-size-t-xxs: 0.625rem;
 
     /* Font Weights */
     --font-weight-bold: 700;
@@ -2069,23 +1677,25 @@
     /* Line Heights */
     --font-line-height-d-2xl: 5rem;
     --font-line-height-d-xl: 4.25rem;
-    --font-line-height-d-lg: 4.25rem; /**/
+    --font-line-height-d-lg: 3.75rem;
     --font-line-height-d-md: 2.75rem;
     --font-line-height-d-sm: 2.375rem;   
     --font-line-height-d-xs: 2rem;   
     --font-line-height-t-xl: 1.875rem;
-    --font-line-height-t-lg: 1.75rem;
+    --font-line-height-t-lg: 1.688rem;
     --font-line-height-t-md: 1.5rem;
-    --font-line-height-t-sm: 1.25rem;
+    --font-line-height-t-sm: 1.313rem;
     --font-line-height-t-xs: 1.125rem;
+    --font-line-height-t-xxs: 0.938rem;
 
     /* Letter Spacings */
     --font-letter-spacing-d-2xl: -0.09rem;
     --font-letter-spacing-d-xl: -0.075rem;
     --font-letter-spacing-d-lg: -0.075rem;
     --font-letter-spacing-d-md: -0.045rem;
-    --font-letter-spacing-d-sm: 0rem;
-    --font-letter-spacing-d-xs: 0rem;
+    --font-letter-spacing-d-sm: 0;
+    --font-letter-spacing-d-xs: 0;
+    --font-letter-spacing-d-xxs: 0;
 
     /* Font Families */
     --font-family-title: 'Sora';
@@ -2962,20 +2572,121 @@
     margin-top: -0.396em;
 }
 
+.text-xxs-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xxs);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-t-xxs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xxs-bold::before,
+.text-xxs-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-xxs-bold::before{
+    margin-bottom: -0.291em;
+}
+
+.text-xxs-bold::after{
+    margin-top: -0.416em;
+}
+
+.text-xxs-semi-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xxs);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-t-xxs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xxs-semi-bold::before,
+.text-xxs-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-xxs-semi-bold::before{
+    margin-bottom: -0.291em;
+}
+
+.text-xxs-semi-bold::after{
+    margin-top: -0.416em;
+}
+
+.text-xxs-medium{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xxs);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--font-line-height-t-xxs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xxs-medium::before,
+.text-xxs-medium::after{
+    content: "";
+    display: table;
+}
+
+.text-xxs-medium::before{
+    margin-bottom: -0.291em;
+}
+
+.text-xxs-medium::after{
+    margin-top: -0.416em;
+}
+
+.text-xxs-regular{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xxs);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--font-line-height-t-xxs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xxs-regular::before,
+.text-xxs-regular::after{
+    content: "";
+    display: table;
+}
+
+.text-xxs-regular::before{
+    margin-bottom: -0.291em;
+}
+
+.text-xxs-regular::after{
+    margin-top: -0.416em;
+}
+
+:host{
+    display: flex;
+    align-items: center;
+    width: fit-content;
+}
+
 div{
     display: inline-flex;
-    padding: var(--spacing-none) var(--spacing-1);
     align-items: center;
-    gap: var(--spacing-none);
+    gap: 0px;
     flex-shrink: 0;
     text-align: center;
-    font-style: normal;
-    font-weight: var(--font-weight-medium, 500);
-    letter-spacing: 0.5px;
 }
 
 .label {
-    font-family: var(--font-family-body);
     padding: 2px;
 }
 
@@ -2987,26 +2698,22 @@ div{
 div.sm{
     height: 22px;
     min-height: 22px;
-    font-family: sans-serif;
-    font-size: var(--text-xs-medium-font-size, 12px);
-    line-height: var(--text-xs-medium-line-height, 18px); 
+    gap: 0.25rem;
+    padding: var(--spacing-none) var(--spacing-2);
 }
 
 div.md {
     height: var(--spacing-6);
     min-height: var(--spacing-6);
-    font-family: sans-serif;
-    font-size: var(--text-sm-medium-font-size, 14px);
-    line-height: var(--text-sm-medium-line-height, 20px); 
+    padding: var(--spacing-none) var(--spacing-2);
+    gap: 0.38rem;
 }
 
 div.lg {
     height: 28px;
     min-height: 28px;
+    gap: 0.38rem;
     padding: var(--spacing-none) var(--spacing-2);
-    font-family: sans-serif;
-    font-size: var(--text-sm-medium-font-size, 14px);
-    line-height: var(--text-sm-medium-line-height, 1.25rem);
 }
 
 div.pill_color {
@@ -3015,65 +2722,65 @@ div.pill_color {
 
 div.pill_color.gray,
 .badge_color.gray {
-    border: 1px solid #E3E8EF /*var(--color-boarder-subtler)*/;
-    background: #EEF2F6 /*var(--color-background-gray-subtler)*/;
-    color: #4B5565;
+    border: 1px solid var(--color-boarder-subtler, #E3E8EF);
+    background: var(--color-background-gray-subtler, #EEF2F6 );
+    color: var(--color-text, #4B5565);
 }
 
 .pill_color.primary,
 .badge_color.primary {
     border: 1px solid #C8E0F9 /*Color/Border/border-information-subtler*/;
-    background: #E4F0FC /*var(--color-background-information-subtlest)*/;
-    color: #212C65;
+    background: var(--color-background-information-subtlest, #E4F0FC); 
+    color: var(--color-text-brandDarkBlue, #212C65);
 }
 
 .pill_color.error,
 .badge_color.error {
-    border: 1px solid #FDE3E5 /*var(--color-border-danger-subtler)*/;
-    background: #FEF1F2 /*var(--color-background-danger-subtlest)*/;
-    color: #B51726;
+    border: 1px solid var(--color-border-danger-subtler, #FDE3E5);
+    background: var(--color-background-danger-subtlest, #FEF1F2 );
+    color: var(--color-text-danger, #B51726);
 }
 
 .pill_color.warning,
 .badge_color.warning {
-    border: 1px solid #FEF0C7;
-    background: #FFFAEB;
-    color: #DC6803;
+    border: 1px solid var(--color-border-warning-subtler, #FEF0C7);
+    background: var(--color-background-warning-subtlest, #FFFAEB);
+    color: var(--color-text-warning, #DC6803);
 }
 
 .pill_color.success,
 .badge_color.success {
-    border: 1px solid #DCFAE6;
-    background: #ECFDF3;
-    color: #079455;
+    border: 1px solid var(--color-border-success-subtler, #DCFAE6);
+    background: var(--color-background-success-subtlest, #ECFDF3);
+    color: var(--color-text-success, #079455);
 }
 
 .pill_color.discovery,
 .badge_color.discovery {
-    border: 1px solid #E0F2FE;
-    background: #F0F9FF;
-    color: #0086C9;
+    border: 1px solid var(--color-border-discovery-subtler, #E0F2FE);
+    background: var(--color-background-discovery-subtlest,#F0F9FF);
+    color: var(--color-text-discovery, #0086C9);
 }
 
 .pill_color.information,
 .badge_color.information {
     border: 1px solid #C8E0F9 /*Color/Border/border-information-subtler*/;
-    background: #E4F0FC /*var(--color-background-information-subtlest)*/;
-    color: #064E94;
+    background: var(--color-background-information-subtlest, #E4F0FC);
+    color: var(--color-text-information, #064E94);
 }
 
 .pill_color.pink,
 .badge_color.pink {
-    border: 1px solid #FCE7F6;
-    background: #FDF2FA;
-    color: #DD2590;
+    border: 1px solid var(--color-border-pink-subtler, #FCE7F6);
+    background: var(--color-background-pink-subtlest, #FDF2FA);
+    color: var(--color-text-pink, #DD2590);
 }
 
 .pill_color.purple,
 .badge_color.purple {
-    border: 1px solid #EBE9FE;
-    background: #F4F3FF;
-    color: #6938EF;
+    border: 1px solid var(--color-border-purple-subtler, #EBE9FE);
+    background: var(--color-background-purple-subtlest, #F4F3FF);
+    color: var(--color-text-purple, #6938EF);
 }
 
 .pill_color svg,
@@ -3084,33 +2791,31 @@ div.pill_color.gray,
     height: var(--spacing-2);
     display: flex;
     align-items: center;
-    fill: currentColor; /* Use the current text color */
-    stroke: currentColor;
 }
 
 .gray svg path {
-    fill: #4B5565;
-    stroke:  #4B5565 /*var(--color-icon)*/;
+    fill: var(--color-text, #4B5565);
+    stroke:  var(--color-text, #4B5565) /*var(--color-icon)*/;
 }
 
 .primary svg path {
-    fill: #212C65;
-    stroke: #212C65;
+    fill: var(--color-text-brandDarkBlue, #212C65);
+    stroke: var(--color-text-brandDarkBlue, #212C65);
 }
 
 .error svg path {
-    fill: #B51726;
-    stroke: #B51726;
+    fill: var(--color-text-danger, #B51726);
+    stroke: var(--color-text-danger, #B51726);
 }
 
 .warning svg path {
-    fill: #DC6803;
-    stroke: #DC6803;
+    fill: var(--color-text-warning, #DC6803);
+    stroke: var(--color-text-warning, #DC6803);
 }
 
 .success svg path{
-    fill: #079455;
-    stroke: #079455;
+    fill: var(--color-text-success, #079455);
+    stroke: var(--color-text-success, #079455);
 }
 
 .discovery svg path {
@@ -3119,18 +2824,18 @@ div.pill_color.gray,
 }
 
 .information svg path {
-    fill: #064E94;
-    stroke: #064E94;
+    fill: var(--color-text-information, #064E94);
+    stroke: var(--color-text-information, #064E94);
 }
 
 .pink svg path{
-    fill: #DD2590;
-    stroke: #DD2590;
+    fill: var(--color-text-pink, #DD2590);
+    stroke: var(--color-text-pink, #DD2590);
 }
 
 .purple svg path {
-    fill: #6938EF;
-    stroke: #6938EF;
+    fill: var(--color-text-purple, #6938EF);
+    stroke: var(--color-text-purple, #6938EF);
 }
 
 .pill_outline {
@@ -3138,48 +2843,48 @@ div.pill_color.gray,
 }
 
 .pill_outline.gray {
-    border: 1.5px solid #4B5565;
-    color: #4B5565;
+    border: 1.5px solid var(--color-text, #4B5565);
+    color: var(--color-text, #4B5565);
 }
 
 .pill_outline.primary {
-    border: 1.5px solid #212C65;
-    color:#212C65;
+    border: 1.5px solid var(--color-text-brandDarkBlue, #212C65);
+    color:var(--color-text-brandDarkBlue, #212C65);
 }
 
 .pill_outline.error {
-    border: 1.5px solid #B51726;
-    color:#B51726;
+    border: 1.5px solid var(--color-text-danger, #B51726);
+    color:var(--color-text-danger, #B51726);
 }
 
 .pill_outline.warning {
-    border: 1.5px solid #DC6803;
-    color:#DC6803;
+    border: 1.5px solid var(--color-text-warning, #DC6803);
+    color:var(--color-text-warning, #DC6803);
 }
 
 .pill_outline.success {
-    border: 1.5px solid #079455;
-    color:#079455;
+    border: 1.5px solid var(--color-text-success, #079455);
+    color:var(--color-text-success, #079455);
 }
 
 .pill_outline.discovery {
-    border: 1.5px solid #0086C9;
-    color: #0086C9;
+    border: 1.5px solid var(--color-text-discovery, #0086C9);
+    color: var(--color-text-discovery, #0086C9);
 }
 
 .pill_outline.information {
-    border: 1.5px solid #064E94;
-    color: #064E94;
+    border: 1.5px solid var(--color-text-information, #064E94);
+    color: var(--color-text-information, #064E94);
 }
 
 .pill_outline.pink {
-    border: 1.5px solid #DD2590;
-    color: #DD2590;
+    border: 1.5px solid var(--color-text-pink, #DD2590);
+    color: var(--color-text-pink, #DD2590);
 }
 
 .pill_outline.purple {
-    border: 1.5px solid #6938EF;
-    color: #6938EF;
+    border: 1.5px solid var(--color-text-purple, #6938EF);
+    color: var(--color-text-purple, #6938EF);
 }
 
 .badge_color {
@@ -3188,60 +2893,35 @@ div.pill_color.gray,
 
 .badge_modern {
     border-radius: var(--rounded-xs);
-    border: 1px solid #E3E8EF;
-
-    /* Shadow/xs */
+    border: 1px solid var(--color-boarder-subtler, #E3E8EF);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
-    color: #4B5565;
+    color: var(--color-text, #4B5565);
+}
+
+.badge_modern svg path {
+    stroke: inherit; /* Inherit color from the parent, but set in the component */
+    fill: inherit;
 }
 
-.icon img {
+.icon svg {
     width: var(--spacing-4);
     height: var(--spacing-4);
+    margin-top: -2px;
     fill: currentColor;
-    stroke: currentColor;
-    /* Color handling for SVGs */
-}
-
-.icon.left-icon img,
-.icon.right-icon img {
-    color: currentColor; /* Ensures that the image color uses currentColor */
-}
-
-.gray .icon img {
-    color: #4B5565;
-}
-
-.primary .icon img {
-    color: #212C65;
-}
-
-.error .icon img {
-    color: #B51726;
-}
-
-.warning .icon img {
-    color: #DC6803;
-}
-
-.success .icon img {
-    color: #079455;
-}
-
-.discovery .icon img {
-    color: #0BA5EC;
 }
 
-.information .icon img {
-    color: #064E94;
+.icon svg path {
+    fill: currentColor;
+    stroke: currentColor;
 }
 
-.pink .icon img {
-    color: #DD2590;
+#icon-only svg {
+    width: var(--spacing-3);
+    height: var(--spacing-3);
 }
 
-.purple .icon img {
-    color: #6938EF;
+div.md #icon-only svg {
+    padding: 2px;
 }
 
 #icon-only {
@@ -3250,8 +2930,6 @@ div.pill_color.gray,
     justify-content: center;
     align-items: center;
     gap: var(--spacing-1);
-    width: var(--spacing-4);
-    height: var(--spacing-4);
     flex-shrink: 0;
     border-radius: var(--rounded-full);
 }