globuswebcomponents 0.3.5 → 0.3.7

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

@@ -1,3 +1,4 @@
+
 :root {
     /* --------------------------------------Primary Colors--------------------------------------------- */
     /* base color palette */
@@ -75,10 +76,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 +219,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 +235,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 +252,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 +268,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 +310,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 +334,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 +357,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 +469,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 +485,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 +525,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 +557,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 +573,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 +589,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 +601,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 +687,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 +767,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 +973,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 +1335,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 +1366,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 +1396,6 @@
     [data-theme="dark"] {
         --color-surface-pressed: var(--gray-700);
     }
-
- 
-
 }
 
 /* -----------------Shadow and Blur----------------- */
@@ -1563,6 +1667,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;
@@ -1573,23 +1678,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';
@@ -2466,6 +2573,106 @@
     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;
+}
+
 .tooltip_container {
   position: relative;
   display: inline-block;

package/dist/collection/components/gb-tooltip/gb-tooltip.js

@@ -19,7 +19,7 @@ export class GbTooltip {
         return this.showArrow ? `arrow ${this.arrow}` : '';
     }
     render() {
-        return (h("div", { key: 'b48671b8a30be85019abde6f6f13470a30b287f5', class: "tooltip_container" }, h("div", { key: '49569ca7fe0f6391cd36c5bbeb0b0844a83feadd', class: "tooltip" }, h("div", { key: 'b76cd3ed681c5322ca41d760ec9584e9bc31f837', class: this.getArrowClass() }), h("div", { key: '5353b69fbc2809171b29105e4ac7f442b8f7891a', class: "tooltip_content" }, h("slot", { key: '0c0356475d93ca850884aa73d167cad3065974d2', name: "label" }), this.showSupportingText && h("slot", { key: '8a365d4d442da9bada7b3cf948fb8a18fc56680e', name: "supporting_text" })))));
+        return (h("div", { key: 'd04bf74efb9e3e2cfaf19f692b46148da4876517', class: "tooltip_container" }, h("div", { key: 'ce28321de15a536fe08bf7b2e12f609eeca74534', class: "tooltip" }, h("div", { key: '06e036b5bebb38bed110eca260cec1342f314481', class: this.getArrowClass() }), h("div", { key: '230fec0cbf9c6186b5d7d059032abbff5d556e77', class: "tooltip_content" }, h("slot", { key: 'fa4ce3507e2ac68234a6a632517e7ae3f9a3f5b9', name: "label" }), this.showSupportingText && h("slot", { key: '2b445ed50f05492fffc3bb99b586b91d776f9d18', name: "supporting_text" })))));
     }
     static get is() { return "gb-tooltip"; }
     static get encapsulation() { return "shadow"; }