globuswebcomponents 0.3.6 → 0.3.8

package/dist/globuscomponents/assets/shuffle-square.svg

@@ -0,0 +1,6 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="shuffle-square">
+<path id="Accent" opacity="0.4" d="M4.16669 20C4.16669 12.5361 4.16669 8.80416 6.48542 6.48542C8.80416 4.16669 12.5361 4.16669 20 4.16669C27.4639 4.16669 31.1959 4.16669 33.5146 6.48542C35.8334 8.80416 35.8334 12.5361 35.8334 20C35.8334 27.4639 35.8334 31.1959 33.5146 33.5146C31.1959 35.8334 27.4639 35.8334 20 35.8334C12.5361 35.8334 8.80416 35.8334 6.48542 33.5146C4.16669 31.1959 4.16669 27.4639 4.16669 20Z" fill="white"/>
+<path id="Icon" d="M16.4236 16.5331L17.4423 15.8087L17.4423 15.8087L16.4236 16.5331ZM21.3542 23.4669L22.3729 22.7425L22.3729 22.7425L21.3542 23.4669ZM30 26.25L30.9491 27.0635C31.2668 26.6929 31.3396 26.1712 31.1357 25.7277C30.9317 25.2842 30.4882 25 30 25V26.25ZM26.5509 28.3532C26.1017 28.8774 26.1624 29.6665 26.6865 30.1158C27.2107 30.565 27.9998 30.5043 28.4491 29.9802L26.5509 28.3532ZM10 12.5C9.30966 12.5 8.75002 13.0597 8.75002 13.75C8.75002 14.4404 9.30966 15 10 15V12.5ZM23.5444 25.8803L24.105 24.763L24.105 24.763L23.5444 25.8803ZM14.2334 14.1198L13.6728 15.237L13.6728 15.237L14.2334 14.1198ZM30 13.75V15C30.4882 15 30.9317 14.7158 31.1357 14.2723C31.3396 13.8288 31.2668 13.3072 30.9491 12.9365L30 13.75ZM28.4491 10.0199C27.9998 9.49571 27.2107 9.43501 26.6865 9.88428C26.1624 10.3336 26.1017 11.1227 26.5509 11.6468L28.4491 10.0199ZM10 25C9.30966 25 8.75002 25.5597 8.75002 26.25C8.75002 26.9404 9.30966 27.5 10 27.5V25ZM20.3355 15.8087C19.9355 16.3713 20.0672 17.1518 20.6298 17.5518C21.1924 17.9519 21.9729 17.8202 22.3729 17.2575L20.3355 15.8087ZM23.5444 14.1198L24.105 15.237L24.105 15.237L23.5444 14.1198ZM17.4423 24.1913C17.8423 23.6287 17.7106 22.8483 17.148 22.4482C16.5854 22.0481 15.805 22.1799 15.4049 22.7425L17.4423 24.1913ZM14.2334 25.8803L13.6728 24.763L13.6728 24.763L14.2334 25.8803ZM20 34.5834C16.2327 34.5834 13.533 34.5807 11.4798 34.3047C9.46264 34.0335 8.25772 33.5191 7.36931 32.6307L5.60154 34.3985C7.03187 35.8288 8.8523 36.4739 11.1467 36.7824C13.4052 37.086 16.3034 37.0834 20 37.0834V34.5834ZM2.91669 20C2.91669 23.6966 2.91403 26.5948 3.21768 28.8533C3.52615 31.1477 4.17121 32.9682 5.60154 34.3985L7.36931 32.6307C6.4809 31.7423 5.96659 30.5374 5.69538 28.5202C5.41934 26.467 5.41669 23.7673 5.41669 20H2.91669ZM34.5834 20C34.5834 23.7673 34.5807 26.467 34.3047 28.5202C34.0335 30.5374 33.5191 31.7423 32.6307 32.6307L34.3985 34.3985C35.8288 32.9682 36.4739 31.1477 36.7824 28.8533C37.086 26.5948 37.0834 23.6966 37.0834 20H34.5834ZM20 37.0834C23.6966 37.0834 26.5948 37.086 28.8533 36.7824C31.1477 36.4739 32.9682 35.8288 34.3985 34.3985L32.6307 32.6307C31.7423 33.5191 30.5374 34.0335 28.5202 34.3047C26.467 34.5807 23.7673 34.5834 20 34.5834V37.0834ZM20 5.41669C23.7673 5.41669 26.467 5.41934 28.5202 5.69538C30.5374 5.96659 31.7423 6.4809 32.6307 7.36931L34.3985 5.60154C32.9682 4.17121 31.1477 3.52615 28.8533 3.21768C26.5948 2.91403 23.6966 2.91669 20 2.91669V5.41669ZM37.0834 20C37.0834 16.3034 37.086 13.4052 36.7824 11.1467C36.4739 8.8523 35.8288 7.03187 34.3985 5.60154L32.6307 7.36931C33.5191 8.25772 34.0335 9.46264 34.3047 11.4798C34.5807 13.533 34.5834 16.2327 34.5834 20H37.0834ZM20 2.91669C16.3034 2.91669 13.4052 2.91403 11.1467 3.21768C8.8523 3.52615 7.03187 4.17121 5.60154 5.60154L7.36931 7.36931C8.25772 6.4809 9.46264 5.96659 11.4798 5.69538C13.533 5.41934 16.2327 5.41669 20 5.41669V2.91669ZM5.41669 20C5.41669 16.2327 5.41934 13.533 5.69538 11.4798C5.96659 9.46264 6.4809 8.25772 7.36931 7.36931L5.60154 5.60154C4.17121 7.03187 3.52615 8.8523 3.21768 11.1467C2.91403 13.4052 2.91669 16.3034 2.91669 20H5.41669ZM15.4049 17.2575L20.3355 24.1913L22.3729 22.7425L17.4423 15.8087L15.4049 17.2575ZM29.0509 25.4365L26.5509 28.3532L28.4491 29.9802L30.9491 27.0635L29.0509 25.4365ZM26.9012 27.5H30V25H26.9012V27.5ZM10.8766 12.5H10V15H10.8766V12.5ZM20.3355 24.1913C21.2303 25.4495 21.9048 26.4561 22.9839 26.9975L24.105 24.763C23.7102 24.5649 23.4159 24.2091 22.3729 22.7425L20.3355 24.1913ZM26.9012 25C26.0065 25 25.415 24.9989 24.9531 24.9585C24.5142 24.9202 24.2824 24.852 24.105 24.763L22.9839 26.9975C23.5435 27.2783 24.1168 27.395 24.7354 27.449C25.3311 27.5011 26.0494 27.5 26.9012 27.5V25ZM17.4423 15.8087C16.5476 14.5505 15.8731 13.544 14.7939 13.0025L13.6728 15.237C14.0676 15.4351 14.362 15.791 15.4049 17.2575L17.4423 15.8087ZM10.8766 15C11.7713 15 12.3628 15.0011 12.8247 15.0415C13.2636 15.0799 13.4955 15.1481 13.6728 15.237L14.7939 13.0025C14.2343 12.7217 13.661 12.6051 13.0424 12.551C12.4468 12.4989 11.7284 12.5 10.8766 12.5V15ZM30.9491 12.9365L28.4491 10.0199L26.5509 11.6468L29.0509 14.5635L30.9491 12.9365ZM26.9012 15H30V12.5H26.9012V15ZM10.8766 25H10V27.5H10.8766V25ZM22.3729 17.2575C23.4159 15.791 23.7102 15.4351 24.105 15.237L22.9839 13.0025C21.9048 13.544 21.2303 14.5505 20.3355 15.8087L22.3729 17.2575ZM26.9012 12.5C26.0494 12.5 25.3311 12.4989 24.7354 12.551C24.1168 12.6051 23.5435 12.7217 22.9839 13.0025L24.105 15.237C24.2824 15.1481 24.5142 15.0799 24.9531 15.0415C25.415 15.0011 26.0065 15 26.9012 15V12.5ZM15.4049 22.7425C14.362 24.2091 14.0676 24.5649 13.6728 24.763L14.7939 26.9975C15.8731 26.4561 16.5476 25.4495 17.4423 24.1913L15.4049 22.7425ZM10.8766 27.5C11.7284 27.5 12.4468 27.5011 13.0424 27.4491C13.661 27.395 14.2343 27.2783 14.7939 26.9975L13.6728 24.763C13.4955 24.852 13.2636 24.9202 12.8247 24.9585C12.3628 24.9989 11.7713 25 10.8766 25V27.5Z" fill="white"/>
+</g>
+</svg>

package/dist/globuscomponents/gb-button.css

@@ -147,6 +147,7 @@ button.link_gray {
   background-color: transparent;
   --icon-color: var(--color-icon, #4B5565);
   color: var(--color-text, #4B5565);
+  padding: var(--spacing-none);
   height: fit-content;
 }
 

package/dist/globuscomponents/global/global.css

@@ -218,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);
     }
@@ -226,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);
     }
@@ -235,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"] {
@@ -251,52 +267,53 @@
         --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-warning-subtle: var(--warning-500);
+        --color-text-success-bold: var(--success-800);
     }
 
     [data-theme="dark"] {
-        --color-text-warning-subtle: var(--warning-400);
+        --color-text-success-bold: var(--success-100);
     }
 
     [data-theme="light"] {
-        --color-text-sucess: var(--success-600);
+        --color-text-success: var(--success-600);
     }
 
     [data-theme="dark"] {
-        --color-text-sucess: var(--success-300);
+        --color-text-success: var(--success-300);
     }
 
     [data-theme="light"] {
-        --color-text-sucess-bold: var(--success-800);
+        --color-text-success-subtle: var(--success-600);
     }
 
     [data-theme="dark"] {
-        --color-text-sucess-bold: var(--success-100);
+        --color-text-success-subtle: var(--success-300);
     }
 
     [data-theme="light"] {
-        --color-text-discovery: var(--blueLight-800);
+        --color-text-discovery-bold: var(--blueLight-800);
     }
 
     [data-theme="dark"] {
-        --color-text-discovery: var(--blueLight-100);
+        --color-text-discovery-bold: var(--blueLight-100);
     }
 
     [data-theme="light"] {
-        --color-text-discovery-bold: var(--blueLight-800);
+        --color-text-discovery: var(--blueLight-800);
     }
 
     [data-theme="dark"] {
-        --color-text-discovery-bold: var(--blueLight-100);
+        --color-text-discovery: var(--blueLight-100);
     }
 
     [data-theme="light"] {
@@ -308,19 +325,19 @@
     }
 
     [data-theme="light"] {
-        --color-text-information: var(--blue-600);
+        --color-text-information-bold: var(--blue-800);
     }
 
     [data-theme="dark"] {
-        --color-text-information: var(--blue-300);
+        --color-text-information-bold: var(--blue-100);
     }
 
     [data-theme="light"] {
-        --color-text-information-bold: var(--blue-800);
+        --color-text-information: var(--blue-600);
     }
 
     [data-theme="dark"] {
-        --color-text-information-bold: var(--blue-100);
+        --color-text-information: var(--blue-300);
     }
 
     [data-theme="light"] {
@@ -332,19 +349,19 @@
     }
 
     [data-theme="light"] {
-        --color-text-purple: var(--purple-600);
+        --color-text-purple-bold: var(--purple-800);
     }
 
     [data-theme="dark"] {
-        --color-text-purple: var(--purple-300);
+        --color-text-purple-bold: var(--purple-100);
     }
 
     [data-theme="light"] {
-        --color-text-purple-bold: var(--purple-800);
+        --color-text-purple: var(--purple-600);
     }
 
     [data-theme="dark"] {
-        --color-text-purple-bold: var(--purple-100);
+        --color-text-purple: var(--purple-300);
     }
 
     [data-theme="light"] {
@@ -356,19 +373,27 @@
     }
 
     [data-theme="light"] {
-        --color-text-pink: var(--purple-600);
+        --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(--purple-300);
+        --color-text-pink: var(--pink-300);
     }
 
     [data-theme="light"] {
-        --color-text-pink-subtle: var(--purple-500);
+        --color-text-pink-subtle: var(--pink-500);
     }
 
     [data-theme="dark"] {
-        --color-text-pink-subtle: var(--purple-400);
+        --color-text-pink-subtle: var(--pink-400);
     }
 
 
@@ -443,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"] {
@@ -459,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"] {
@@ -499,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"] {
@@ -531,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"] {
@@ -547,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"] {
@@ -563,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"] {
@@ -575,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 --------------- */
@@ -653,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"] {
@@ -733,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"] {
@@ -939,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"] {
@@ -1332,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"] {
@@ -1362,9 +1395,6 @@
     [data-theme="dark"] {
         --color-surface-pressed: var(--gray-700);
     }
-
- 
-
 }
 
 /* -----------------Shadow and Blur----------------- */

package/dist/globuscomponents/global/typography.css

@@ -13,6 +13,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;
@@ -23,23 +24,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';
@@ -914,4 +917,104 @@
 
 .text-xs-regular::after{
     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;
 }