globuswebcomponents 0.3.4 → 0.3.6

package/dist/collection/components/gb-avatar-profile-photo/gb-avatar-profile-photo.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-avatar-profile-photo.js","sourceRoot":"","sources":["../../../src/components/gb-avatar-profile-photo/gb-avatar-profile-photo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAgB,MAAM,6BAA6B,CAAC;AAQ1E,MAAM,OAAO,oBAAoB;;2BACE,KAAK;oBACZ,KAAK;;wBAED,KAAK;oBAEV,MAAM;;IAE7B,eAAe;QACX,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAChB,KAAK,IAAI,CAAC,CAAC,OAAO,sBAAsB,CAAC;YACzC,KAAK,IAAI,CAAC,CAAC,OAAO,sBAAsB,CAAC;YACzC,KAAK,IAAI,CAAC,CAAC,OAAO,sBAAsB,CAAC;QAC7C,CAAC;IACL,CAAC;IAED,cAAc;QACV,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAChB,KAAK,IAAI,CAAC,CAAC,OAAO,YAAY,CAAC;YAC/B,KAAK,IAAI,CAAC,CAAC,OAAO,YAAY,CAAC;YAC/B,KAAK,IAAI,CAAC,CAAC,OAAO,YAAY,CAAC;QACnC,CAAC;IACL,CAAC;IAED,SAAS;QACL,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAChB,KAAK,IAAK,CAAC,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC;YACvC,KAAK,IAAK,CAAC,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC;YACvC,KAAK,IAAK,CAAC,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC;QAC7C,CAAC;IACL,CAAC;IAED,gBAAgB;QACZ,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAEpD,IAAI,eAAe,EAAE,CAAC;YAClB,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;QAC1D,CAAC;IACL,CAAC;IAED,MAAM;QACF,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE1C,OAAO,CACH,4DAAK,KAAK,EAAE,iBAAiB,WAAW,EAAE;YACtC,kEACA,IAAI,EAAE,WAAW,EACjB,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,iBACF,IAAI,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,EAC1C,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,EACxB,WAAW,EAAE,IAAI,CAAC,WAAW,IAExB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACV,YAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC1C,CAAC,CAAC,CAAC,CACA,YAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAQ,CAChD,CACO,CACV,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { BorderWeights, GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-avatar-profile-photo',\r\n    styleUrl: 'gb-avatar-profile-photo.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbAvatarProfilePhoto {\r\n    @Prop() placeholder: boolean = false;\r\n    @Prop() text: boolean = false;\r\n    @Prop() size: GeneralSizes;\r\n    @Prop() verified: boolean = false;\r\n    @Element() el: HTMLElement;\r\n    @Prop() icon: string = 'user';\r\n\r\n    getInitialsSize() {\r\n        switch (this.size) {\r\n            case 'lg': return 'display-xl-semi-bold';\r\n            case 'md': return 'display-md-semi-bold';\r\n            case 'sm': return 'display-sm-semi-bold';\r\n        }\r\n    }\r\n\r\n    getProfileSize() {\r\n        switch (this.size) {\r\n            case 'lg': return 'profile_lg';\r\n            case 'md': return 'profile_md';\r\n            case 'sm': return 'profile_sm';\r\n        }\r\n    }\r\n\r\n    setWeight() {\r\n        switch (this.size) {\r\n            case 'lg' : return BorderWeights.Heavy;\r\n            case 'md' : return BorderWeights.Heavy;\r\n            case 'sm' : return BorderWeights.Regular;\r\n        }\r\n    }\r\n\r\n    componentDidLoad() {\r\n        const slottedInitials = this.el.querySelector('h1');\r\n    \r\n        if (slottedInitials) {\r\n            slottedInitials.classList.add(this.getInitialsSize());\r\n        }\r\n    }\r\n\r\n    render() {\r\n        const profileSize = this.getProfileSize();\r\n\r\n        return (\r\n            <div class={`profile_photo ${profileSize}`}>\r\n                <gb-avatar\r\n                size={profileSize}\r\n                icon=\"user\"\r\n                text={this.text}\r\n                status-icon={this.verified && ('verified')}\r\n                weight={this.setWeight()}\r\n                placeholder={this.placeholder}\r\n                >\r\n                    {!this.text ? (\r\n                        <slot name=\"image\" slot=\"image\"></slot>\r\n                    ) : (\r\n                        <slot name=\"initials\" slot=\"initials\"></slot>\r\n                    )}\r\n                </gb-avatar>\r\n            </div>\r\n        );\r\n    }\r\n}"]}
+{"version":3,"file":"gb-avatar-profile-photo.js","sourceRoot":"","sources":["../../../src/components/gb-avatar-profile-photo/gb-avatar-profile-photo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAgB,MAAM,6BAA6B,CAAC;AAQ1E,MAAM,OAAO,oBAAoB;;2BACE,KAAK;oBACZ,KAAK;;wBAED,KAAK;oBAEV,MAAM;;IAE7B,eAAe;QACX,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAChB,KAAK,IAAI,CAAC,CAAC,OAAO,sBAAsB,CAAC;YACzC,KAAK,IAAI,CAAC,CAAC,OAAO,sBAAsB,CAAC;YACzC,KAAK,IAAI,CAAC,CAAC,OAAO,sBAAsB,CAAC;QAC7C,CAAC;IACL,CAAC;IAED,cAAc;QACV,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAChB,KAAK,IAAI,CAAC,CAAC,OAAO,YAAY,CAAC;YAC/B,KAAK,IAAI,CAAC,CAAC,OAAO,YAAY,CAAC;YAC/B,KAAK,IAAI,CAAC,CAAC,OAAO,YAAY,CAAC;QACnC,CAAC;IACL,CAAC;IAED,SAAS;QACL,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAChB,KAAK,IAAK,CAAC,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC;YACvC,KAAK,IAAK,CAAC,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC;YACvC,KAAK,IAAK,CAAC,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC;QAC7C,CAAC;IACL,CAAC;IAED,gBAAgB;QACZ,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;QAEpD,IAAI,eAAe,EAAE,CAAC;YAClB,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;QAC1D,CAAC;IACL,CAAC;IAED,MAAM;QACF,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;QAE1C,OAAO,CACH,4DAAK,KAAK,EAAE,iBAAiB,WAAW,EAAE;YACtC,kEACA,IAAI,EAAE,WAAW,EACjB,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,iBACF,IAAI,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,EAC1C,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE;gBAEnB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACV,YAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC1C,CAAC,CAAC,CAAC,CACA,YAAM,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,GAAQ,CAChD;gBACC,IAAI,CAAC,WAAW,IAAI,CACd,4DAAK,KAAK,EAAE,aAAa;oBACrB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,eAAe,IAAI,CAAC,IAAI,EAAE;wBAC5H,6DAAM,CAAC,EAAC,siBAAsiB,EAAC,IAAI,EAAC,SAAS,GAAE;wBAC/jB,6DAAM,CAAC,EAAC,sNAAsN,EAAC,IAAI,EAAC,SAAS,GAAE,CAC7O,CACJ,CACT,CACG,CACV,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { BorderWeights, GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-avatar-profile-photo',\r\n    styleUrl: 'gb-avatar-profile-photo.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbAvatarProfilePhoto {\r\n    @Prop() placeholder: boolean = false;\r\n    @Prop() text: boolean = false;\r\n    @Prop() size: GeneralSizes;\r\n    @Prop() verified: boolean = false;\r\n    @Element() el: HTMLElement;\r\n    @Prop() icon: string = 'user';\r\n\r\n    getInitialsSize() {\r\n        switch (this.size) {\r\n            case 'lg': return 'display-xl-semi-bold';\r\n            case 'md': return 'display-md-semi-bold';\r\n            case 'sm': return 'display-sm-semi-bold';\r\n        }\r\n    }\r\n\r\n    getProfileSize() {\r\n        switch (this.size) {\r\n            case 'lg': return 'profile_lg';\r\n            case 'md': return 'profile_md';\r\n            case 'sm': return 'profile_sm';\r\n        }\r\n    }\r\n\r\n    setWeight() {\r\n        switch (this.size) {\r\n            case 'lg' : return BorderWeights.Heavy;\r\n            case 'md' : return BorderWeights.Heavy;\r\n            case 'sm' : return BorderWeights.Regular;\r\n        }\r\n    }\r\n\r\n    componentDidLoad() {\r\n        const slottedInitials = this.el.querySelector('h1');\r\n    \r\n        if (slottedInitials) {\r\n            slottedInitials.classList.add(this.getInitialsSize());\r\n        }\r\n    }\r\n\r\n    render() {\r\n        const profileSize = this.getProfileSize();\r\n\r\n        return (\r\n            <div class={`profile_photo ${profileSize}`}>\r\n                <gb-avatar\r\n                size={profileSize}\r\n                icon=\"user\"\r\n                text={this.text}\r\n                status-icon={this.verified && ('verified')}\r\n                weight={this.setWeight()}\r\n                >\r\n                    {!this.text ? (\r\n                        <slot name=\"image\" slot=\"image\"></slot>\r\n                    ) : (\r\n                        <slot name=\"initials\" slot=\"initials\"></slot>\r\n                    )}\r\n                    { this.placeholder && (\r\n                            <div class={`placeholder`}>\r\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" class={`user_avatar ${this.size}`}>\r\n                                    <path d=\"M11.8706 9.89137C11.9482 9.93754 12.044 9.99158 12.1524 10.0528C12.6276 10.3209 13.3459 10.7261 13.8381 11.2078C14.1458 11.5091 14.4383 11.9061 14.4914 12.3924C14.548 12.9097 14.3223 13.395 13.8697 13.8263C13.0887 14.5703 12.1515 15.1666 10.9393 15.1666H5.06045C3.84825 15.1666 2.91106 14.5703 2.13009 13.8263C1.67741 13.395 1.45177 12.9097 1.50831 12.3924C1.56147 11.9061 1.85391 11.5091 2.16169 11.2078C2.6538 10.7261 3.37214 10.3209 3.84735 10.0528C3.95578 9.99158 4.05158 9.93754 4.12912 9.89137C6.49848 8.48055 9.50126 8.48055 11.8706 9.89137Z\" fill=\"#697586\"/>\r\n                                    <path d=\"M4.49987 4.33325C4.49987 2.40026 6.06688 0.833252 7.99987 0.833252C9.93287 0.833252 11.4999 2.40026 11.4999 4.33325C11.4999 6.26625 9.93287 7.83325 7.99987 7.83325C6.06688 7.83325 4.49987 6.26625 4.49987 4.33325Z\" fill=\"#697586\"/>\r\n                                </svg>\r\n                            </div>\r\n                        )}\r\n                </gb-avatar>\r\n            </div>\r\n        );\r\n    }\r\n}"]}

package/dist/collection/components/gb-badge-close/gb-badge-close.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 */
@@ -250,6 +259,14 @@
         --color-text-warning-bold: var(--warning-100);
     }
 
+    [data-theme="light"] {
+        --color-text-warning-subtle: var(--warning-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-warning-subtle: var(--warning-400);
+    }
+
     [data-theme="light"] {
         --color-text-sucess: var(--success-600);
     }
@@ -282,6 +299,14 @@
         --color-text-discovery-bold: 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"] {
         --color-text-information: var(--blue-600);
     }
@@ -298,6 +323,14 @@
         --color-text-information-bold: var(--blue-100);
     }
 
+    [data-theme="light"] {
+        --color-text-information-subtle: var(--blue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-information-subtle: var(--blue-400);
+    }
+
     [data-theme="light"] {
         --color-text-purple: var(--purple-600);
     }
@@ -314,6 +347,30 @@
         --color-text-purple-bold: var(--purple-100);
     }
 
+    [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: var(--purple-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink: var(--purple-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink-subtle: var(--purple-400);
+    }
+
 
     /* --------------Link color--------------- */
 
@@ -1244,6 +1301,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 --------------- */

package/dist/collection/components/gb-badge-close/gb-badge-close.js

@@ -5,7 +5,7 @@ export class BadgeClose {
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: '1c2e67f34fda23ae54bee1faaa6b166c20bdcca3', class: `${this.color} ${this.type}` }, h("svg", { key: '67334fe023b77cfcd308ccd542e03c19510ccedf', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: 'd6b5e5b15902affac0673a4267bfdc79bd2acfbb', d: "M9.50024 2.5L2.50024 9.5M2.50024 2.5L9.50024 9.5", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
+        return (h("div", { key: '2b7c3979aa50a795454010af023f639be2d7c775', class: `${this.color} ${this.type}` }, h("svg", { key: '35878fa8c734e324a66e24631e00cbd3b90d424c', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" }, h("path", { key: '49a152fc422a7a352ec79a1b3e9216ce205b7add', d: "M9.50024 2.5L2.50024 9.5M2.50024 2.5L9.50024 9.5", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
     }
     static get is() { return "gb-badge-close"; }
     static get encapsulation() { return "shadow"; }

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 */
@@ -250,6 +259,14 @@
         --color-text-warning-bold: var(--warning-100);
     }
 
+    [data-theme="light"] {
+        --color-text-warning-subtle: var(--warning-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-warning-subtle: var(--warning-400);
+    }
+
     [data-theme="light"] {
         --color-text-sucess: var(--success-600);
     }
@@ -282,6 +299,14 @@
         --color-text-discovery-bold: 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"] {
         --color-text-information: var(--blue-600);
     }
@@ -298,6 +323,14 @@
         --color-text-information-bold: var(--blue-100);
     }
 
+    [data-theme="light"] {
+        --color-text-information-subtle: var(--blue-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-information-subtle: var(--blue-400);
+    }
+
     [data-theme="light"] {
         --color-text-purple: var(--purple-600);
     }
@@ -314,6 +347,30 @@
         --color-text-purple-bold: var(--purple-100);
     }
 
+    [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: var(--purple-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink: var(--purple-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink-subtle: var(--purple-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink-subtle: var(--purple-400);
+    }
+
 
     /* --------------Link color--------------- */
 
@@ -1244,6 +1301,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 --------------- */
@@ -2966,16 +3039,16 @@ 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-family: var(--Font-Family-Body, Sora);
     font-style: normal;
-    font-weight: var(--font-weight-medium, 500);
-    letter-spacing: 0.5px;
+    font-weight: var(--Font-Weight-Medium, 500);
+    letter-spacing: var(--Font-Letter-spacing-T-xs, 0rem);
 }
 
 .label {
-    font-family: var(--font-family-body);
     padding: 2px;
 }
 
@@ -2987,26 +3060,20 @@ 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;
 }
 
 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); 
+    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 +3082,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 +3151,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 +3184,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 +3203,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 +3253,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);
 }
 
-.icon img {
+.badge_modern svg path {
+    stroke: inherit; /* Inherit color from the parent, but set in the component */
+    fill: inherit;
+}
+
+.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 +3290,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);
 }