@ebrains/components 0.9.0-beta → 0.9.1-beta

package/dist/components/eds-tag2.js

@@ -1,24 +1,31 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { c as cva } from './index2.js';
 
-const edsTagCss = ".f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.py-1{padding-top:0.0625rem;padding-bottom:0.0625rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.border-2{border-width:2px}.rounded-pill{border-radius:100px}.border-default{border:2px solid var(--black)}.text-inverse{color:var(--white)}.bg-strongest{background-color:var(--black)}.text-\\[\\#0034CB\\]{--tw-text-opacity:1;color:rgb(0 52 203 / var(--tw-text-opacity))}.border-\\[\\#0034CB\\]{--tw-border-opacity:1;border:2px solid rgb(0 52 203 / var(--tw-border-opacity))}.text-light{color:var(--grey-700)}.bg-strongest-soft{background-color:rgba(0, 0, 0, .05)}.border-transparent{border-color:var(--transparent)}.border-inverse{border-color:var(--white)}.bg-inverse{background-color:var(--white)}.text-lighter{color:var(--grey-600)}";
+const edsTagCss = ".f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.py-1{padding-top:0.0625rem;padding-bottom:0.0625rem}.py-2{padding-top:0.125rem;padding-bottom:0.125rem}.py-3{padding-top:0.1875rem;padding-bottom:0.1875rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.px-2{padding-left:0.125rem;padding-right:0.125rem}.px-3{padding-left:0.1875rem;padding-right:0.1875rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.px-5{padding-left:0.3125rem;padding-right:0.3125rem}.px-6{padding-left:0.375rem;padding-right:0.375rem}.border-2{border-width:2px}.rounded-pill{border-radius:100px}.border-default{border:2px solid var(--black)}.text-inverse{color:var(--white)}.bg-accent{background-color:var(--green-500)}.bg-strongest{background-color:var(--black)}.text-\\[\\#0034CB\\]{--tw-text-opacity:1;color:rgb(0 52 203 / var(--tw-text-opacity))}.border-\\[\\#0034CB\\]{--tw-border-opacity:1;border:2px solid rgb(0 52 203 / var(--tw-border-opacity))}.text-light{color:var(--grey-700)}.bg-strongest-soft{background-color:rgba(0, 0, 0, .05)}.border-transparent{border-color:var(--transparent)}.border-inverse{border-color:var(--white)}.bg-inverse{background-color:var(--white)}.text-lighter{color:var(--grey-600)}";
 const EdsTagStyle0 = edsTagCss;
 
 // Define the CVA for the tag styles
-const tagStyles = cva(['f-ui-05 py-1 px-4 border-2 rounded-pill'], // Base classes
+const tagStyles = cva(['border-2 rounded-pill'], // Base classes
 {
     variants: {
         intent: {
+            primary: 'border-accent bg-accent',
             default: 'border-default',
             strong: 'text-inverse bg-strongest border-default',
             accent: 'text-[#0034CB] border-[#0034CB]',
             weak: 'text-light bg-strongest-soft border-transparent',
             inverse: 'border-inverse text-inverse',
             'inverse-strong': 'bg-inverse border-inverse text-lighter'
+        },
+        size: {
+            small: 'f-ui-05 py-2 px-4', // smaller padding
+            medium: 'f-ui-03 py-3 px-5', // moderate padding
+            large: 'f-ui-01 py-4 px-6' // larger padding
         }
     },
     defaultVariants: {
-        intent: 'default'
+        intent: 'default',
+        size: 'small'
     }
 });
 const EdsTag = /*@__PURE__*/ proxyCustomElement(class EdsTag extends HTMLElement {
@@ -28,15 +35,17 @@ const EdsTag = /*@__PURE__*/ proxyCustomElement(class EdsTag extends HTMLElement
         this.__attachShadow();
         this.label = undefined;
         this.intent = 'default';
+        this.size = 'small';
     }
     render() {
-        const classes = tagStyles({ intent: this.intent });
-        return h("span", { key: '55a6039b040436e5dded9aaf1007668b97091ba3', class: classes }, this.label);
+        const classes = tagStyles({ intent: this.intent, size: this.size });
+        return h("span", { key: '20ad2f289c8362346e28e42677b3bc3d626e154d', class: classes }, this.label);
     }
     static get style() { return EdsTagStyle0; }
 }, [1, "eds-tag", {
         "label": [1],
-        "intent": [1]
+        "intent": [1],
+        "size": [1]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {