@wizco/fenixds-core 1.5.2 → 1.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wizco/fenixds-core",
   "description": "Fenix design system é um produto da Wiz com ativos de design e código de front-end para ajudar as equipes na criação dos seus produtos.",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "private": false,
   "sideEffects": false,
   "author": "Raul Melo Fernandez",

package/styles/core.css

@@ -1270,6 +1270,130 @@ label.form-check, .form-check {
     --wco-checkbox-default-color-iconunchecked: var(--wco-color-danger-600);
     --wco-checkbox-default-color-iconchecked: var(--wco-color-danger-600); }
 
+.wco-form-switch {
+  --wco-switch-color-label: var(--wco-switch-custom-color-label, var(--wco-color-neutral-700));
+  --wco-switch-color-bg: var(--wco-switch-custom-color-bg, var(--wco-color-neutral-50));
+  --wco-switch-color-border-color: var(--wco-switch-custom-color-border, var(--wco-color-neutral-600));
+  --wco-switch-color-bullet: var(--wco-switch-custom-color-bullet, var(--wco-color-neutral-600));
+  --wco-switch-color-icon: var(--wco-switch-custom-color-icon, var(--wco-color-neutral-50));
+  --wco-switch-general-spacing: 8px;
+  --wco-switch-radius: calc(var(--wco-radius-md) * 2);
+  --wco-switch-size-max-w: 48px;
+  --wco-switch-size-max-h: 28px;
+  --wco-switch-size-bullet: 18px;
+  --wco-switch-checked-spaceInner: 3px;
+  display: flex;
+  align-items: center;
+  gap: var(--wco-spacing-nano); }
+  .wco-form-switch input[type="checkbox"] {
+    display: none; }
+  .wco-form-switch span.label {
+    color: var(--wco-switch-color-label);
+    font-size: var(--wco-font-size-xs);
+    font-family: var(--wco-font-family);
+    font-weight: 400;
+    letter-spacing: 0.4px; }
+  .wco-form-switch span.toggle {
+    display: inline-flex;
+    min-width: 40px;
+    align-items: center;
+    position: relative;
+    z-index: 1;
+    border-radius: var(--wco-switch-radius);
+    width: calc(var(--wco-switch-size-max-w, 48px) + 4px);
+    background-color: var(--wco-switch-color-bg, #f1f1f1);
+    height: var(--wco-switch-size-max-h, 28px);
+    border: 2px solid var(--wco-switch-color-border-color, #8d9399);
+    padding: var(--wco-switch-checked-spaceInner, 3px);
+    transform-origin: center center;
+    perspective: 1000px; }
+    .wco-form-switch span.toggle:before, .wco-form-switch span.toggle:after, .wco-form-switch span.toggle i {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      transition: all 300ms ease-in-out;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+      user-select: none;
+      left: var(--wco-switch-checked-position, 3px);
+      font-size: var(--wco-font-size-xxxs);
+      width: var(--wco-switch-size-bullet, 24px);
+      height: var(--wco-switch-size-bullet, 24px);
+      color: var(--wco-switch-color-icon, #8d9399);
+      line-height: var(--wco-switch-size-bullet, 24px); }
+    .wco-form-switch span.toggle:before, .wco-form-switch span.toggle:after {
+      content: '';
+      border-radius: 100%;
+      background-color: var(--wco-switch-color-bullet, #8d9399);
+      color: var(--wco-switch-color-bullet, #8d9399);
+      z-index: -1; }
+  .wco-form-switch:has(input[type="checkbox"]:checked) {
+    --wco-switch-custom-color-bg: var(--wco-color-primary-600);
+    --wco-switch-custom-color-border:  var(--wco-color-primary-600);
+    --wco-switch-custom-color-bullet: var(--wco-color-neutral-50);
+    --wco-switch-custom-color-icon: var(--wco-color-primary-600);
+    --wco-switch-checked-position: calc(100% - var(--wco-switch-size-bullet, 24px) - var(--wco-switch-checked-spaceInner, 3px)); }
+  .wco-form-switch:has(input[type="checkbox"]:not(:disabled)) {
+    cursor: pointer; }
+    .wco-form-switch:has(input[type="checkbox"]:not(:disabled)):has(input[type="checkbox"]:hover):has(input[type="checkbox"]:checked) span.toggle::before {
+      background-color: var(--wco-switch-custom-color-shadow, var(--wco-color-primary-500)); }
+    .wco-form-switch:has(input[type="checkbox"]:not(:disabled)):has(input[type="checkbox"]:hover) span.toggle:before {
+      transform: translateY(-50%) scale(1.8);
+      opacity: 0.3; }
+  .wco-form-switch.form--error {
+    --wco-switch-custom-color-border:  var(--wco-color-danger-600);
+    --wco-switch-custom-color-bullet: var(--wco-color-danger-600);
+    --wco-switch-custom-color-icon: var(--wco-color-danger-50);
+    --wco-switch-custom-color-label: var(--wco-color-danger-600); }
+    .wco-form-switch.form--error:has(input[type="checkbox"]:checked) {
+      --wco-switch-custom-color-border:  var(--wco-color-danger-600);
+      --wco-switch-custom-color-bullet: var(--wco-color-danger-600);
+      --wco-switch-custom-color-icon: var(--wco-color-danger-50);
+      --wco-switch-custom-color-bg: var(--wco-color-danger-50); }
+  .wco-form-switch.switch-secondary:has(input[type="checkbox"]:checked) {
+    --wco-switch-custom-color-shadow: var(--wco-color-secondary-500);
+    --wco-switch-custom-color-border:  var(--wco-color-secondary-600);
+    --wco-switch-custom-color-bullet: var(--wco-color-secondary-50);
+    --wco-switch-custom-color-icon: var(--wco-color-secondary-600);
+    --wco-switch-custom-color-bg: var(--wco-color-secondary-600); }
+  .wco-form-switch.switch-success:has(input[type="checkbox"]:checked) {
+    --wco-switch-custom-color-shadow: var(--wco-color-success-500);
+    --wco-switch-custom-color-border:  var(--wco-color-success-600);
+    --wco-switch-custom-color-bullet: var(--wco-color-success-50);
+    --wco-switch-custom-color-icon: var(--wco-color-success-600);
+    --wco-switch-custom-color-bg: var(--wco-color-success-600); }
+  .wco-form-switch.switch-info:has(input[type="checkbox"]:checked) {
+    --wco-switch-custom-color-bg: var(--wco-color-info-500);
+    --wco-switch-custom-color-shadow: var(--wco-color-info-500);
+    --wco-switch-custom-color-border:  var(--wco-color-info-600);
+    --wco-switch-custom-color-bullet: var(--wco-color-info-50);
+    --wco-switch-custom-color-icon: var(--wco-color-info-600);
+    --wco-switch-custom-color-bg: var(--wco-color-info-600); }
+  .wco-form-switch.switch-danger:has(input[type="checkbox"]:checked) {
+    --wco-switch-custom-color-bg: var(--wco-color-danger-500);
+    --wco-switch-custom-color-shadow: var(--wco-color-danger-500);
+    --wco-switch-custom-color-border:  var(--wco-color-danger-600);
+    --wco-switch-custom-color-bullet: var(--wco-color-danger-50);
+    --wco-switch-custom-color-icon: var(--wco-color-danger-600);
+    --wco-switch-custom-color-bg: var(--wco-color-danger-600); }
+  .wco-form-switch.switch-warning:has(input[type="checkbox"]:checked) {
+    --wco-switch-custom-color-shadow: var(--wco-color-warning-500);
+    --wco-switch-custom-color-border:  var(--wco-color-warning-600);
+    --wco-switch-custom-color-bullet: var(--wco-color-warning-50);
+    --wco-switch-custom-color-icon: var(--wco-color-warning-600);
+    --wco-switch-custom-color-bg: var(--wco-color-warning-600); }
+  .wco-form-switch:has(input[type="checkbox"]:disabled), .wco-form-switch.wco-form-disabled {
+    opacity: 0.3; }
+    .wco-form-switch:has(input[type="checkbox"]:disabled) span.toggle, .wco-form-switch.wco-form-disabled span.toggle {
+      filter: grayscale(1); }
+  .wco-form-switch.form--readonly {
+    pointer-events: none;
+    user-select: none; }
+    .wco-form-switch.form--readonly .label {
+      color: var(--wco-color-neutral-900); }
+
 .wco-form-upload {
   --wco-attachment-default-color-border: var(--wco-color-neutral-500);
   --wco-attachment-default-color-bg: var(--wco-color-neutral-50);
@@ -1292,7 +1416,8 @@ label.form-check, .form-check {
   transition: all 0.3s;
   container-type: inline-size;
   overflow: hidden;
-  min-width: max-content; }
+  min-width: max-content;
+  position: relative; }
   .wco-form-upload:has(input[type="file"]:not(:disabled)):not(.wco-form-disabled):hover {
     border-color: var(--wco-attachment-hover-color-border);
     background-color: var(--wco-attachment-hover-color-bg); }
@@ -1491,6 +1616,8 @@ label.form-check, .form-check {
   --wco-tag-border-radius: var(--wco-radius-lg, 24px);
   --wco-tag-border-color: var(--wco-color-neutral-700);
   --wco-tag-font-size: var(--wco-font-size-xxs, 14px);
+  --wco-tag-icon-size: var(--wco-icon-size-small);
+  --wco-tag-icon-color: var(--wco-color-neutral-700);
   font-size: var(--wco-tag-font-size, 14px);
   color: var(--wco-tag-color, #333);
   background-color: var(--wco-tag-background-color, #fff);
@@ -1512,10 +1639,34 @@ label.form-check, .form-check {
   text-wrap: nowrap; }
   .wco-tag span,
   .wco-tag i {
-    --wco-tag-icon-size: var(--wco-icon-size-small);
-    --wco-tag-icon-color: var(--wco-color-neutral-700);
     color: var(--wco-tag-icon-color);
-    font-size: var(--wco-tag-icon-size, 14px); }
+    font-size: var(--wco-tag-icon-size, 14px);
+    line-height: 150%; }
+  .wco-tag.tag-icon-toggle {
+    position: relative;
+    padding-inline-end: calc(var(--wco-spacing-xxxs) + 2px); }
+    .wco-tag.tag-icon-toggle > i, .wco-tag.tag-icon-toggle > span, .wco-tag.tag-icon-toggle > button {
+      position: absolute;
+      right: -4px;
+      height: 100%;
+      opacity: 0;
+      display: inline-flex;
+      align-items: center;
+      width: min-content;
+      visibility: hidden;
+      --wco-tag-icon-size: calc(var(--wco-tag-font-size) - 2px);
+      transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, right 0.2s ease-in-out; }
+    .wco-tag.tag-icon-toggle:has(button:last-child):hover > button {
+      cursor: pointer;
+      opacity: 1;
+      visibility: visible;
+      right: 2px; }
+    .wco-tag.tag-icon-toggle:is(button, a):not(:disabled) {
+      cursor: pointer; }
+      .wco-tag.tag-icon-toggle:is(button, a):not(:disabled):hover i, .wco-tag.tag-icon-toggle:is(button, a):not(:disabled):hover span {
+        opacity: 1;
+        visibility: visible;
+        right: 2px; }
 
 .tag-success {
   --wco-tag-color: var(--wco-color-success-700);
@@ -1558,6 +1709,23 @@ label.form-check, .form-check {
   .tag-disabled i {
     --wco-tag-icon-color: var(--wco-color-neutral-500); }
 
+.tag-basic {
+  --wco-tag-size: 28px;
+  --wco-tag-spacing: var(--wco-spacing-quark) var(--wco-spacing-xxxs);
+  --wco-tag-gap: var(--wco-spacing-quark, 4px);
+  --wco-tag-color: var(--wco-color-neutral-900);
+  --wco-tag-background-color: var(--wco-color-neutral-100);
+  --wco-tag-border-radius: var(--wco-radius-nano, 8px);
+  --wco-tag-border-color: transparent; }
+  .tag-basic span, .tag-basic i {
+    font-size: calc(var(--wco-tag-font-size) - 2px); }
+  .tag-basic:is(button):disabled {
+    --wco-tag-background-color: var(--wco-color-neutral-300); }
+  .tag-basic:not(.tag-icon-toggle):has(i:last-child) {
+    padding-right: var(--wco-spacing-quark); }
+  .tag-basic:not(.tag-icon-toggle):has(i:first-child) {
+    padding-left: var(--wco-spacing-quark); }
+
 .wco-group-tags {
   display: flex;
   flex-wrap: wrap;

package/styles/scss/forms.scss

@@ -426,9 +426,9 @@ label.form-radio, .form-radio
   }
 }
 
-
+///////////////
 /// Checkbox
-///////////
+///////////////
 label.wco-form-check, .wco-form-check,
 label.form-check, .form-check {
   --wco-checkbox-default-color-label: var(--wco-color-neutral-900);
@@ -577,12 +577,195 @@ label.form-check, .form-check {
   input[type="checkbox"]:checked:disabled ~ .label {
     color: var(--wco-checkbox-disabled-color-label);
   }
-     &.form--error,
-     &.form-field--error {
-       --wco-checkbox-default-color-label: var(--wco-color-danger-900);
-       --wco-checkbox-default-color-iconunchecked: var(--wco-color-danger-600);
-       --wco-checkbox-default-color-iconchecked: var(--wco-color-danger-600);
-     }
+    &.form--error,
+    &.form-field--error {
+      --wco-checkbox-default-color-label: var(--wco-color-danger-900);
+      --wco-checkbox-default-color-iconunchecked: var(--wco-color-danger-600);
+      --wco-checkbox-default-color-iconchecked: var(--wco-color-danger-600);
+    }
+}
+
+///////////////
+/// Switch
+///////////////
+.wco-form-switch {
+  --wco-switch-color-label: var(--wco-switch-custom-color-label, var(--wco-color-neutral-700)); // cor do label
+  --wco-switch-color-bg: var(--wco-switch-custom-color-bg, var(--wco-color-neutral-50)); // background do switch
+  --wco-switch-color-border-color: var(--wco-switch-custom-color-border, var(--wco-color-neutral-600)); // background do switch
+  --wco-switch-color-bullet: var(--wco-switch-custom-color-bullet, var(--wco-color-neutral-600)); // cor do circulo
+  --wco-switch-color-icon: var(--wco-switch-custom-color-icon, var(--wco-color-neutral-50));
+  --wco-switch-general-spacing: 8px;
+  --wco-switch-radius: calc(var(--wco-radius-md) * 2);
+  --wco-switch-size-max-w: 48px;
+  --wco-switch-size-max-h: 28px;
+  --wco-switch-size-bullet: 18px;
+  --wco-switch-checked-spaceInner: 3px;
+  display: flex;
+  align-items: center;
+  gap: var(--wco-spacing-nano);
+  // input oculto
+  input[type="checkbox"] {
+    display: none;
+  }
+
+  // text de apoio
+  span.label { 
+    color: var(--wco-switch-color-label);
+    font-size: var(--wco-font-size-xs);
+    font-family: var(--wco-font-family);
+    font-weight: 400;
+    letter-spacing: 0.4px;
+  }
+  // area do sinalizador
+  span.toggle {
+    display: inline-flex;
+    min-width: 40px;
+    align-items: center;
+    position: relative;
+    z-index: 1;
+    // tokens
+    border-radius: var(--wco-switch-radius);
+    width: calc(var(--wco-switch-size-max-w, 48px) + 4px);
+    background-color: var(--wco-switch-color-bg, #f1f1f1);
+    height: var(--wco-switch-size-max-h, 28px);
+    border: 2px solid var(--wco-switch-color-border-color, #8d9399);
+    padding: var(--wco-switch-checked-spaceInner, 3px);
+    transform-origin: center center;
+    perspective: 1000px;
+    // circulo e ícone
+    &:before, &:after, i {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      transition: all 300ms ease-in-out;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+      user-select: none;
+      // tokens
+      left: var(--wco-switch-checked-position, 3px);
+      font-size: var(--wco-font-size-xxxs);
+      width: var(--wco-switch-size-bullet, 24px);
+      height: var(--wco-switch-size-bullet, 24px);
+      color: var(--wco-switch-color-icon, #8d9399);
+      line-height: var(--wco-switch-size-bullet, 24px);
+    }
+    &:before, &:after { 
+      content: '';
+      border-radius: 100%;
+      background-color: var(--wco-switch-color-bullet, #8d9399);
+      color: var(--wco-switch-color-bullet, #8d9399);
+      z-index: -1;
+    }
+  }
+
+  &:has(input[type="checkbox"]:checked) {
+    --wco-switch-custom-color-bg: var(--wco-color-primary-600);
+    --wco-switch-custom-color-border:  var(--wco-color-primary-600);
+    --wco-switch-custom-color-bullet: var(--wco-color-neutral-50);
+    --wco-switch-custom-color-icon: var(--wco-color-primary-600);
+    --wco-switch-checked-position: calc(100% - var(--wco-switch-size-bullet, 24px) - var(--wco-switch-checked-spaceInner, 3px));
+  }
+
+  // SE O ESTADO NÃO ESTIVER DESABILITADO
+  &:has(input[type="checkbox"]:not(:disabled)) {
+    // Checked true
+    cursor: pointer;
+    &:has(input[type="checkbox"]:hover) {
+      // sombra do checkbox é diferente
+      &:has(input[type="checkbox"]:checked) span.toggle {
+        &::before { 
+          background-color: var(--wco-switch-custom-color-shadow, var(--wco-color-primary-500));
+        }
+      }
+      // sombra hover
+      span.toggle {
+        &:before {
+          transform: translateY(-50%) scale(1.8);
+          opacity: 0.3;
+        }
+      }   
+    }
+  }
+
+  // Themas 
+  &.form--error {
+    --wco-switch-custom-color-border:  var(--wco-color-danger-600);
+    --wco-switch-custom-color-bullet: var(--wco-color-danger-600);
+    --wco-switch-custom-color-icon: var(--wco-color-danger-50);
+    --wco-switch-custom-color-label: var(--wco-color-danger-600);
+    &:has(input[type="checkbox"]:checked) {
+      --wco-switch-custom-color-border:  var(--wco-color-danger-600);
+      --wco-switch-custom-color-bullet: var(--wco-color-danger-600);
+      --wco-switch-custom-color-icon: var(--wco-color-danger-50);
+      --wco-switch-custom-color-bg: var(--wco-color-danger-50);
+    }
+  }
+  &.switch-secondary {
+    &:has(input[type="checkbox"]:checked) {
+      --wco-switch-custom-color-shadow: var(--wco-color-secondary-500);
+      --wco-switch-custom-color-border:  var(--wco-color-secondary-600);
+      --wco-switch-custom-color-bullet: var(--wco-color-secondary-50);
+      --wco-switch-custom-color-icon: var(--wco-color-secondary-600);
+      --wco-switch-custom-color-bg: var(--wco-color-secondary-600);
+    }
+  }
+  &.switch-success {
+    &:has(input[type="checkbox"]:checked) {
+      --wco-switch-custom-color-shadow: var(--wco-color-success-500);
+      --wco-switch-custom-color-border:  var(--wco-color-success-600);
+      --wco-switch-custom-color-bullet: var(--wco-color-success-50);
+      --wco-switch-custom-color-icon: var(--wco-color-success-600);
+      --wco-switch-custom-color-bg: var(--wco-color-success-600);
+    }
+  }
+  &.switch-info {
+    &:has(input[type="checkbox"]:checked) {
+      --wco-switch-custom-color-bg: var(--wco-color-info-500);
+      --wco-switch-custom-color-shadow: var(--wco-color-info-500);
+      --wco-switch-custom-color-border:  var(--wco-color-info-600);
+      --wco-switch-custom-color-bullet: var(--wco-color-info-50);
+      --wco-switch-custom-color-icon: var(--wco-color-info-600);
+      --wco-switch-custom-color-bg: var(--wco-color-info-600);
+    }
+  }
+  &.switch-danger {
+    &:has(input[type="checkbox"]:checked) {
+      --wco-switch-custom-color-bg: var(--wco-color-danger-500);
+      --wco-switch-custom-color-shadow: var(--wco-color-danger-500);
+      --wco-switch-custom-color-border:  var(--wco-color-danger-600);
+      --wco-switch-custom-color-bullet: var(--wco-color-danger-50);
+      --wco-switch-custom-color-icon: var(--wco-color-danger-600);
+      --wco-switch-custom-color-bg: var(--wco-color-danger-600);
+    }
+  }
+  &.switch-warning {
+    &:has(input[type="checkbox"]:checked) {
+      --wco-switch-custom-color-shadow: var(--wco-color-warning-500);
+      --wco-switch-custom-color-border:  var(--wco-color-warning-600);
+      --wco-switch-custom-color-bullet: var(--wco-color-warning-50);
+      --wco-switch-custom-color-icon: var(--wco-color-warning-600);
+      --wco-switch-custom-color-bg: var(--wco-color-warning-600);
+    }
+  }
+
+  // SE O ESTADO ESTIVER DESABILITADO
+  &:has(input[type="checkbox"]:disabled),
+  &.wco-form-disabled {
+    opacity: 0.3;
+    span.toggle {
+      filter: grayscale(1);
+    }
+  }
+  // SE O ESTADO ESTIVER NO MODO LEITURA 
+  &.form--readonly {
+    pointer-events: none;
+    user-select: none;
+    .label { 
+      color: var(--wco-color-neutral-900);
+    }
+  }
 }
 
 
@@ -612,6 +795,7 @@ label.form-check, .form-check {
   container-type: inline-size;
   overflow: hidden;
   min-width: max-content;
+  position: relative;
   &:has(input[type="file"]:not(:disabled)) {
     &:not(.wco-form-disabled) {
       &:hover {

package/styles/scss/tags.scss

@@ -7,6 +7,8 @@
   --wco-tag-border-radius: var(--wco-radius-lg, 24px);
   --wco-tag-border-color: var(--wco-color-neutral-700);
   --wco-tag-font-size: var(--wco-font-size-xxs, 14px);
+  --wco-tag-icon-size: var(--wco-icon-size-small);
+  --wco-tag-icon-color: var(--wco-color-neutral-700);
   font-size: var(--wco-tag-font-size, 14px);
   color: var(--wco-tag-color, #333);
   background-color: var(--wco-tag-background-color, #fff);
@@ -28,14 +30,60 @@
   text-wrap: nowrap;
   span,
   i {
-    --wco-tag-icon-size: var(--wco-icon-size-small);
-    --wco-tag-icon-color: var(--wco-color-neutral-700);
     color: var(--wco-tag-icon-color);
     font-size: var(--wco-tag-icon-size, 14px);
+    line-height: 150%;
+  }
+
+
+
+  //////////////////////////////////////
+  /// Comportamento do ícone hiden/show
+  //////////////////////////////////////
+  &.tag-icon-toggle {
+    position: relative;
+    padding-inline-end: calc(var(--wco-spacing-xxxs) + 2px);
+    > i, > span, > button {
+      position: absolute;
+      right: -4px;
+      height: 100%;
+      opacity: 0;
+      display: inline-flex;
+      align-items: center;
+      width: min-content;
+      visibility: hidden;
+      --wco-tag-icon-size: calc(var(--wco-tag-font-size) - 2px);
+      transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, right 0.2s ease-in-out;
+    }
+    &:has(button:last-child) { 
+      &:hover {
+      > button {
+          cursor: pointer;
+          opacity: 1;
+          visibility: visible;
+          right: 2px;
+        }
+      }
+    }
+    &:is(button, a) { 
+      &:not(:disabled) {
+        cursor: pointer;
+        &:hover { 
+          i, span {
+            opacity: 1;
+            visibility: visible;
+            right: 2px;
+          }
+        }
+      }
+    }
   }
 }
 
 .tag {
+  //////////
+  // COLORS 
+  //////////
   &-success {
     --wco-tag-color: var(--wco-color-success-700);
     --wco-tag-border-color: var(--wco-color-success-700);
@@ -86,6 +134,35 @@
       --wco-tag-icon-color: var(--wco-color-neutral-500);
     }
   }
+
+  //////////
+  // SIZES
+  //////////
+  &-basic {
+    --wco-tag-size: 28px;
+    --wco-tag-spacing: var(--wco-spacing-quark) var(--wco-spacing-xxxs);
+    --wco-tag-gap: var(--wco-spacing-quark, 4px);
+    --wco-tag-color: var(--wco-color-neutral-900);
+    --wco-tag-background-color: var(--wco-color-neutral-100);
+    --wco-tag-border-radius: var(--wco-radius-nano, 8px);
+    --wco-tag-border-color: transparent;
+    span, i {
+      font-size: calc(var(--wco-tag-font-size) - 2px);
+    }
+    &:is(button) {
+      &:disabled {
+        --wco-tag-background-color: var(--wco-color-neutral-300);
+      }
+    }
+    &:not(.tag-icon-toggle){
+      &:has(i:last-child) {
+        padding-right: var(--wco-spacing-quark);
+      }
+      &:has(i:first-child) {
+        padding-left: var(--wco-spacing-quark);
+      }
+    }
+  }
 }
 
 .wco-group-tags {