globuswebcomponents 0.3.6 → 0.3.8

package/dist/collection/components/gb-tab-button-base/gb-tab-button-base.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----------------- */
@@ -1636,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;
@@ -1646,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';
@@ -2539,6 +2572,111 @@
     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;
+}
+
 .tab_button_div{
     cursor: pointer;
 }
@@ -2552,6 +2690,13 @@
     border-radius: var(--rounded-xs);
 }
 
+.rounded_button_white{
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--rounded-full);
+}
+
 .underline,
 .underline_filled,
 .line{
@@ -2575,6 +2720,7 @@
 .button_primary,
 .button_gray,
 .button_white,
+.rounded_button_white,
 .underline_filled,
 .line{
     gap: var(--spacing-2);
@@ -2588,6 +2734,7 @@
 .tab_button_div.button_primary,
 .tab_button_div.button_gray,
 .tab_button_div.button_white,
+.tab_button_div.rounded_button_white,
 .tab_button_div.underline_filled,
 .tab_button_div.line{
     background: transparent;
@@ -2606,13 +2753,15 @@
 }
 
 .tab_button_div.button_gray:hover,
-.tab_button_div.button_white:hover{
+.tab_button_div.button_white:hover,
+.tab_button_div.rounded_button_white:hover{
     background: var(--color-background-gray-subtler, #EEF2F6);
     color: var(--color-text, #4B5565);
 }
 
 .tab_button_div.button_gray:active,
-.tab_button_div.button_white:active{
+.tab_button_div.button_white:active,
+.tab_button_div.rounded_button_white:active{
     background: transparent;
     color: var(--color-text, #4B5565);
 }
@@ -2652,7 +2801,8 @@
 }
 
 .tab_button_div.button_gray.current:hover,
-.tab_button_div.button_white.current:hover{
+.tab_button_div.button_white.current:hover,
+.tab_button_div.rounded_button_white.current:hover{
     background: var(--color-background-gray-subtler, #EEF2F6);
     color: var(--color-text-bold, #202939);
 }
@@ -2662,7 +2812,8 @@
     color: var(--color-text-bold, #202939);
 }
 
-.tab_button_div.button_white.current:active{
+.tab_button_div.button_white.current:active,
+.tab_button_div.rounded_button_white.current:active{
     background: var(--color-background-card, #FFFFFF);
     color: var(--color-text-bold, #202939);
 }
@@ -2716,7 +2867,8 @@
     color: var(--color-text-bold, #202939);
 }
 
-.tab_button_div.button_white.current{
+.tab_button_div.button_white.current,
+.tab_button_div.rounded_button_white.current{
     background: var(--color-background-card, #FFFFFF);
     color: var(--color-text-bold, #202939);
 }
@@ -2743,6 +2895,7 @@
 .button_primary.sm,
 .button_gray.sm,
 .button_white.sm,
+.rounded_button_white.sm,
 .underline.sm{
     height: 2.375rem;
     padding: var(--spacing-none) var(--spacing-4);
@@ -2757,6 +2910,7 @@
 .button_primary.md,
 .button_gray.md,
 .button_white.md,
+.rounded_button_white.md,
 .underline.md,
 .underline_filled.md,
 .line.md{
@@ -2766,35 +2920,32 @@
 
 .button_primary.full_width.sm,
 .button_gray.full_width.sm,
-.button_white.full_width.sm{
-    width: 20rem;
+.button_white.full_width.sm,
+.rounded_button_white.full_width.sm{
+    width: 100%;
     height: 2.375rem;
     padding: var(--spacing-none) var(--spacing-3);
 }
 
 .underline.full_width.sm,
 .underline_filled.full_width.sm{
-    width: 15rem;
+    width: 100%;
     height: 2.375rem;
     padding: var(--spacing-none) var(--spacing-3);
 }
 
 .button_primary.full_width.md,
 .button_gray.full_width.md,
-.button_white.full_width.md{
-    width: 20rem;
+.button_white.full_width.md,
+.rounded_button_white.full_width.md{
+    width: 100%;
     height: 2.25rem;
     padding: var(--spacing-none) var(--spacing-3);
 }
 
 .underline.full_width.md,
 .underline_filled.full_width.md{
-    width: 15rem;
+    width: 100%;
     height: 2.25rem;
     padding: var(--spacing-none) var(--spacing-3);
-}
-
-/* Count Div Styles */
-/* .count_div.button_primary{
-    
-} */
+}