@i-cell/ids-styles 0.0.2 → 0.0.3

package/dist/tag/tag.css

@@ -4,6 +4,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  border-style: solid;
+  box-sizing: border-box;
 }
 .ids-tag:focus {
   outline-offset: 2px;
@@ -23,85 +25,85 @@
   justify-content: center;
 }
 .ids-tag.ids-tag-compact {
-  gap: var(--ids-comp-size-tag-size-gap-compact);
-  height: var(--ids-comp-size-tag-size-height-compact);
-  padding: var(--ids-comp-size-tag-size-padding-y-compact) var(--ids-comp-size-tag-size-padding-x-compact);
-  border-radius: var(--ids-comp-size-tag-size-border-radius-compact);
-  border: var(--ids-comp-size-tag-size-border-compact) solid;
+  gap: var(--ids-comp-tag-size-gap-compact);
+  height: var(--ids-comp-tag-size-height-compact);
+  padding: var(--ids-comp-tag-size-padding-y-compact) var(--ids-comp-tag-size-padding-x-compact);
+  border-radius: var(--ids-comp-tag-size-border-radius-compact);
+  border: var(--ids-comp-tag-size-border-width-compact);
 }
 .ids-tag.ids-tag-compact > .ids-tag-label {
-  font-family: var(--ids-comp-size-tag-label-typography-font-family-compact);
-  font-size: var(--ids-comp-size-tag-label-typography-font-size-compact);
-  font-weight: var(--ids-comp-size-tag-label-typography-font-weight-compact);
-  letter-spacing: var(--ids-comp-size-tag-label-typography-letter-spacing-compact);
-  line-height: var(--ids-comp-size-tag-label-typography-line-height-compact);
+  font-family: var(--ids-comp-tag-label-typography-font-family-compact);
+  font-size: var(--ids-comp-tag-label-typography-font-size-compact);
+  font-weight: var(--ids-comp-tag-label-typography-font-weight-compact);
+  letter-spacing: var(--ids-comp-tag-label-typography-letter-spacing-compact);
+  line-height: var(--ids-comp-tag-label-typography-line-height-compact);
 }
 .ids-tag.ids-tag-compact *[icon-leading],
 .ids-tag.ids-tag-compact *[icon-trailing] {
-  width: var(--ids-comp-size-tag-size-icon-compact);
-  height: var(--ids-comp-size-tag-size-icon-compact);
+  width: var(--ids-comp-tag-size-icon-compact);
+  height: var(--ids-comp-tag-size-icon-compact);
 }
 .ids-tag.ids-tag-comfortable {
-  gap: var(--ids-comp-size-tag-size-gap-comfortable);
-  height: var(--ids-comp-size-tag-size-height-comfortable);
-  padding: var(--ids-comp-size-tag-size-padding-y-comfortable) var(--ids-comp-size-tag-size-padding-x-comfortable);
-  border-radius: var(--ids-comp-size-tag-size-border-radius-comfortable);
-  border: var(--ids-comp-size-tag-size-border-comfortable) solid;
+  gap: var(--ids-comp-tag-size-gap-comfortable);
+  height: var(--ids-comp-tag-size-height-comfortable);
+  padding: var(--ids-comp-tag-size-padding-y-comfortable) var(--ids-comp-tag-size-padding-x-comfortable);
+  border-radius: var(--ids-comp-tag-size-border-radius-comfortable);
+  border: var(--ids-comp-tag-size-border-width-comfortable);
 }
 .ids-tag.ids-tag-comfortable > .ids-tag-label {
-  font-family: var(--ids-comp-size-tag-label-typography-font-family-comfortable);
-  font-size: var(--ids-comp-size-tag-label-typography-font-size-comfortable);
-  font-weight: var(--ids-comp-size-tag-label-typography-font-weight-comfortable);
-  letter-spacing: var(--ids-comp-size-tag-label-typography-letter-spacing-comfortable);
-  line-height: var(--ids-comp-size-tag-label-typography-line-height-comfortable);
+  font-family: var(--ids-comp-tag-label-typography-font-family-comfortable);
+  font-size: var(--ids-comp-tag-label-typography-font-size-comfortable);
+  font-weight: var(--ids-comp-tag-label-typography-font-weight-comfortable);
+  letter-spacing: var(--ids-comp-tag-label-typography-letter-spacing-comfortable);
+  line-height: var(--ids-comp-tag-label-typography-line-height-comfortable);
 }
 .ids-tag.ids-tag-comfortable *[icon-leading],
 .ids-tag.ids-tag-comfortable *[icon-trailing] {
-  width: var(--ids-comp-size-tag-size-icon-comfortable);
-  height: var(--ids-comp-size-tag-size-icon-comfortable);
+  width: var(--ids-comp-tag-size-icon-comfortable);
+  height: var(--ids-comp-tag-size-icon-comfortable);
 }
 .ids-tag.ids-tag-spacious {
-  gap: var(--ids-comp-size-tag-size-gap-spacious);
-  height: var(--ids-comp-size-tag-size-height-spacious);
-  padding: var(--ids-comp-size-tag-size-padding-y-spacious) var(--ids-comp-size-tag-size-padding-x-spacious);
-  border-radius: var(--ids-comp-size-tag-size-border-radius-spacious);
-  border: var(--ids-comp-size-tag-size-border-spacious) solid;
+  gap: var(--ids-comp-tag-size-gap-spacious);
+  height: var(--ids-comp-tag-size-height-spacious);
+  padding: var(--ids-comp-tag-size-padding-y-spacious) var(--ids-comp-tag-size-padding-x-spacious);
+  border-radius: var(--ids-comp-tag-size-border-radius-spacious);
+  border: var(--ids-comp-tag-size-border-width-spacious);
 }
 .ids-tag.ids-tag-spacious > .ids-tag-label {
-  font-family: var(--ids-comp-size-tag-label-typography-font-family-spacious);
-  font-size: var(--ids-comp-size-tag-label-typography-font-size-spacious);
-  font-weight: var(--ids-comp-size-tag-label-typography-font-weight-spacious);
-  letter-spacing: var(--ids-comp-size-tag-label-typography-letter-spacing-spacious);
-  line-height: var(--ids-comp-size-tag-label-typography-line-height-spacious);
+  font-family: var(--ids-comp-tag-label-typography-font-family-spacious);
+  font-size: var(--ids-comp-tag-label-typography-font-size-spacious);
+  font-weight: var(--ids-comp-tag-label-typography-font-weight-spacious);
+  letter-spacing: var(--ids-comp-tag-label-typography-letter-spacing-spacious);
+  line-height: var(--ids-comp-tag-label-typography-line-height-spacious);
 }
 .ids-tag.ids-tag-spacious *[icon-leading],
 .ids-tag.ids-tag-spacious *[icon-trailing] {
-  width: var(--ids-comp-size-tag-size-icon-spacious);
-  height: var(--ids-comp-size-tag-size-icon-spacious);
+  width: var(--ids-comp-tag-size-icon-spacious);
+  height: var(--ids-comp-tag-size-icon-spacious);
 }
 .ids-tag.ids-tag-dense {
-  gap: var(--ids-comp-size-tag-size-gap-dense);
-  height: var(--ids-comp-size-tag-size-height-dense);
-  padding: var(--ids-comp-size-tag-size-padding-y-dense) var(--ids-comp-size-tag-size-padding-x-dense);
-  border-radius: var(--ids-comp-size-tag-size-border-radius-dense);
-  border: var(--ids-comp-size-tag-size-border-dense) solid;
+  gap: var(--ids-comp-tag-size-gap-dense);
+  height: var(--ids-comp-tag-size-height-dense);
+  padding: var(--ids-comp-tag-size-padding-y-dense) var(--ids-comp-tag-size-padding-x-dense);
+  border-radius: var(--ids-comp-tag-size-border-radius-dense);
+  border: var(--ids-comp-tag-size-border-width-dense);
 }
 .ids-tag.ids-tag-dense > .ids-tag-label {
-  font-family: var(--ids-comp-size-tag-label-typography-font-family-dense);
-  font-size: var(--ids-comp-size-tag-label-typography-font-size-dense);
-  font-weight: var(--ids-comp-size-tag-label-typography-font-weight-dense);
-  letter-spacing: var(--ids-comp-size-tag-label-typography-letter-spacing-dense);
-  line-height: var(--ids-comp-size-tag-label-typography-line-height-dense);
+  font-family: var(--ids-comp-tag-label-typography-font-family-dense);
+  font-size: var(--ids-comp-tag-label-typography-font-size-dense);
+  font-weight: var(--ids-comp-tag-label-typography-font-weight-dense);
+  letter-spacing: var(--ids-comp-tag-label-typography-letter-spacing-dense);
+  line-height: var(--ids-comp-tag-label-typography-line-height-dense);
 }
 .ids-tag.ids-tag-dense *[icon-leading],
 .ids-tag.ids-tag-dense *[icon-trailing] {
-  width: var(--ids-comp-size-tag-size-icon-dense);
-  height: var(--ids-comp-size-tag-size-icon-dense);
+  width: var(--ids-comp-tag-size-icon-dense);
+  height: var(--ids-comp-tag-size-icon-dense);
 }
 .ids-tag.ids-tag-filled.ids-tag-primary {
-  color: var(--ids-comp-tag-filled-color-fg-label-primary-enabled);
-  background: var(--ids-comp-tag-filled-color-bg-primary-enabled);
-  border-color: var(--ids-comp-tag-filled-color-border-primary-enabled);
+  color: var(--ids-comp-tag-filled-color-fg-label-primary-default);
+  background: var(--ids-comp-tag-filled-color-bg-primary-default);
+  border-color: var(--ids-comp-tag-filled-color-border-primary-default);
 }
 .ids-tag.ids-tag-filled.ids-tag-primary:hover {
   color: var(--ids-comp-tag-filled-color-fg-label-primary-hovered);
@@ -118,15 +120,10 @@
   background: var(--ids-comp-tag-filled-color-bg-primary-pressed);
   border-color: var(--ids-comp-tag-filled-color-border-primary-pressed);
 }
-.ids-tag.ids-tag-filled.ids-tag-primary:disabled {
-  color: var(--ids-comp-tag-filled-color-fg-label-primary-disabled);
-  background: var(--ids-comp-tag-filled-color-bg-primary-disabled);
-  border-color: var(--ids-comp-tag-filled-color-border-primary-disabled);
-}
 .ids-tag.ids-tag-filled.ids-tag-secondary {
-  color: var(--ids-comp-tag-filled-color-fg-label-secondary-enabled);
-  background: var(--ids-comp-tag-filled-color-bg-secondary-enabled);
-  border-color: var(--ids-comp-tag-filled-color-border-secondary-enabled);
+  color: var(--ids-comp-tag-filled-color-fg-label-secondary-default);
+  background: var(--ids-comp-tag-filled-color-bg-secondary-default);
+  border-color: var(--ids-comp-tag-filled-color-border-secondary-default);
 }
 .ids-tag.ids-tag-filled.ids-tag-secondary:hover {
   color: var(--ids-comp-tag-filled-color-fg-label-secondary-hovered);
@@ -143,15 +140,10 @@
   background: var(--ids-comp-tag-filled-color-bg-secondary-pressed);
   border-color: var(--ids-comp-tag-filled-color-border-secondary-pressed);
 }
-.ids-tag.ids-tag-filled.ids-tag-secondary:disabled {
-  color: var(--ids-comp-tag-filled-color-fg-label-secondary-disabled);
-  background: var(--ids-comp-tag-filled-color-bg-secondary-disabled);
-  border-color: var(--ids-comp-tag-filled-color-border-secondary-disabled);
-}
 .ids-tag.ids-tag-filled.ids-tag-brand {
-  color: var(--ids-comp-tag-filled-color-fg-label-brand-enabled);
-  background: var(--ids-comp-tag-filled-color-bg-brand-enabled);
-  border-color: var(--ids-comp-tag-filled-color-border-brand-enabled);
+  color: var(--ids-comp-tag-filled-color-fg-label-brand-default);
+  background: var(--ids-comp-tag-filled-color-bg-brand-default);
+  border-color: var(--ids-comp-tag-filled-color-border-brand-default);
 }
 .ids-tag.ids-tag-filled.ids-tag-brand:hover {
   color: var(--ids-comp-tag-filled-color-fg-label-brand-hovered);
@@ -168,15 +160,10 @@
   background: var(--ids-comp-tag-filled-color-bg-brand-pressed);
   border-color: var(--ids-comp-tag-filled-color-border-brand-pressed);
 }
-.ids-tag.ids-tag-filled.ids-tag-brand:disabled {
-  color: var(--ids-comp-tag-filled-color-fg-label-brand-disabled);
-  background: var(--ids-comp-tag-filled-color-bg-brand-disabled);
-  border-color: var(--ids-comp-tag-filled-color-border-brand-disabled);
-}
 .ids-tag.ids-tag-filled.ids-tag-error {
-  color: var(--ids-comp-tag-filled-color-fg-label-error-enabled);
-  background: var(--ids-comp-tag-filled-color-bg-error-enabled);
-  border-color: var(--ids-comp-tag-filled-color-border-error-enabled);
+  color: var(--ids-comp-tag-filled-color-fg-label-error-default);
+  background: var(--ids-comp-tag-filled-color-bg-error-default);
+  border-color: var(--ids-comp-tag-filled-color-border-error-default);
 }
 .ids-tag.ids-tag-filled.ids-tag-error:hover {
   color: var(--ids-comp-tag-filled-color-fg-label-error-hovered);
@@ -193,15 +180,10 @@
   background: var(--ids-comp-tag-filled-color-bg-error-pressed);
   border-color: var(--ids-comp-tag-filled-color-border-error-pressed);
 }
-.ids-tag.ids-tag-filled.ids-tag-error:disabled {
-  color: var(--ids-comp-tag-filled-color-fg-label-error-disabled);
-  background: var(--ids-comp-tag-filled-color-bg-error-disabled);
-  border-color: var(--ids-comp-tag-filled-color-border-error-disabled);
-}
 .ids-tag.ids-tag-filled.ids-tag-success {
-  color: var(--ids-comp-tag-filled-color-fg-label-success-enabled);
-  background: var(--ids-comp-tag-filled-color-bg-success-enabled);
-  border-color: var(--ids-comp-tag-filled-color-border-success-enabled);
+  color: var(--ids-comp-tag-filled-color-fg-label-success-default);
+  background: var(--ids-comp-tag-filled-color-bg-success-default);
+  border-color: var(--ids-comp-tag-filled-color-border-success-default);
 }
 .ids-tag.ids-tag-filled.ids-tag-success:hover {
   color: var(--ids-comp-tag-filled-color-fg-label-success-hovered);
@@ -218,15 +200,10 @@
   background: var(--ids-comp-tag-filled-color-bg-success-pressed);
   border-color: var(--ids-comp-tag-filled-color-border-success-pressed);
 }
-.ids-tag.ids-tag-filled.ids-tag-success:disabled {
-  color: var(--ids-comp-tag-filled-color-fg-label-success-disabled);
-  background: var(--ids-comp-tag-filled-color-bg-success-disabled);
-  border-color: var(--ids-comp-tag-filled-color-border-success-disabled);
-}
 .ids-tag.ids-tag-filled.ids-tag-warning {
-  color: var(--ids-comp-tag-filled-color-fg-label-warning-enabled);
-  background: var(--ids-comp-tag-filled-color-bg-warning-enabled);
-  border-color: var(--ids-comp-tag-filled-color-border-warning-enabled);
+  color: var(--ids-comp-tag-filled-color-fg-label-warning-default);
+  background: var(--ids-comp-tag-filled-color-bg-warning-default);
+  border-color: var(--ids-comp-tag-filled-color-border-warning-default);
 }
 .ids-tag.ids-tag-filled.ids-tag-warning:hover {
   color: var(--ids-comp-tag-filled-color-fg-label-warning-hovered);
@@ -243,15 +220,10 @@
   background: var(--ids-comp-tag-filled-color-bg-warning-pressed);
   border-color: var(--ids-comp-tag-filled-color-border-warning-pressed);
 }
-.ids-tag.ids-tag-filled.ids-tag-warning:disabled {
-  color: var(--ids-comp-tag-filled-color-fg-label-warning-disabled);
-  background: var(--ids-comp-tag-filled-color-bg-warning-disabled);
-  border-color: var(--ids-comp-tag-filled-color-border-warning-disabled);
-}
 .ids-tag.ids-tag-filled.ids-tag-light {
-  color: var(--ids-comp-tag-filled-color-fg-label-light-enabled);
-  background: var(--ids-comp-tag-filled-color-bg-light-enabled);
-  border-color: var(--ids-comp-tag-filled-color-border-light-enabled);
+  color: var(--ids-comp-tag-filled-color-fg-label-light-default);
+  background: var(--ids-comp-tag-filled-color-bg-light-default);
+  border-color: var(--ids-comp-tag-filled-color-border-light-default);
 }
 .ids-tag.ids-tag-filled.ids-tag-light:hover {
   color: var(--ids-comp-tag-filled-color-fg-label-light-hovered);
@@ -268,15 +240,10 @@
   background: var(--ids-comp-tag-filled-color-bg-light-pressed);
   border-color: var(--ids-comp-tag-filled-color-border-light-pressed);
 }
-.ids-tag.ids-tag-filled.ids-tag-light:disabled {
-  color: var(--ids-comp-tag-filled-color-fg-label-light-disabled);
-  background: var(--ids-comp-tag-filled-color-bg-light-disabled);
-  border-color: var(--ids-comp-tag-filled-color-border-light-disabled);
-}
 .ids-tag.ids-tag-filled.ids-tag-dark {
-  color: var(--ids-comp-tag-filled-color-fg-label-dark-enabled);
-  background: var(--ids-comp-tag-filled-color-bg-dark-enabled);
-  border-color: var(--ids-comp-tag-filled-color-border-dark-enabled);
+  color: var(--ids-comp-tag-filled-color-fg-label-dark-default);
+  background: var(--ids-comp-tag-filled-color-bg-dark-default);
+  border-color: var(--ids-comp-tag-filled-color-border-dark-default);
 }
 .ids-tag.ids-tag-filled.ids-tag-dark:hover {
   color: var(--ids-comp-tag-filled-color-fg-label-dark-hovered);
@@ -293,15 +260,10 @@
   background: var(--ids-comp-tag-filled-color-bg-dark-pressed);
   border-color: var(--ids-comp-tag-filled-color-border-dark-pressed);
 }
-.ids-tag.ids-tag-filled.ids-tag-dark:disabled {
-  color: var(--ids-comp-tag-filled-color-fg-label-dark-disabled);
-  background: var(--ids-comp-tag-filled-color-bg-dark-disabled);
-  border-color: var(--ids-comp-tag-filled-color-border-dark-disabled);
-}
 .ids-tag.ids-tag-filled.ids-tag-surface {
-  color: var(--ids-comp-tag-filled-color-fg-label-surface-enabled);
-  background: var(--ids-comp-tag-filled-color-bg-surface-enabled);
-  border-color: var(--ids-comp-tag-filled-color-border-surface-enabled);
+  color: var(--ids-comp-tag-filled-color-fg-label-surface-default);
+  background: var(--ids-comp-tag-filled-color-bg-surface-default);
+  border-color: var(--ids-comp-tag-filled-color-border-surface-default);
 }
 .ids-tag.ids-tag-filled.ids-tag-surface:hover {
   color: var(--ids-comp-tag-filled-color-fg-label-surface-hovered);
@@ -318,15 +280,10 @@
   background: var(--ids-comp-tag-filled-color-bg-surface-pressed);
   border-color: var(--ids-comp-tag-filled-color-border-surface-pressed);
 }
-.ids-tag.ids-tag-filled.ids-tag-surface:disabled {
-  color: var(--ids-comp-tag-filled-color-fg-label-surface-disabled);
-  background: var(--ids-comp-tag-filled-color-bg-surface-disabled);
-  border-color: var(--ids-comp-tag-filled-color-border-surface-disabled);
-}
 .ids-tag.ids-tag-outlined.ids-tag-primary {
-  color: var(--ids-comp-tag-outlined-color-fg-label-primary-enabled);
-  background: var(--ids-comp-tag-outlined-color-bg-primary-enabled);
-  border-color: var(--ids-comp-tag-outlined-color-border-primary-enabled);
+  color: var(--ids-comp-tag-outlined-color-fg-label-primary-default);
+  background: var(--ids-comp-tag-outlined-color-bg-primary-default);
+  border-color: var(--ids-comp-tag-outlined-color-border-primary-default);
 }
 .ids-tag.ids-tag-outlined.ids-tag-primary:hover {
   color: var(--ids-comp-tag-outlined-color-fg-label-primary-hovered);
@@ -343,15 +300,10 @@
   background: var(--ids-comp-tag-outlined-color-bg-primary-pressed);
   border-color: var(--ids-comp-tag-outlined-color-border-primary-pressed);
 }
-.ids-tag.ids-tag-outlined.ids-tag-primary:disabled {
-  color: var(--ids-comp-tag-outlined-color-fg-label-primary-disabled);
-  background: var(--ids-comp-tag-outlined-color-bg-primary-disabled);
-  border-color: var(--ids-comp-tag-outlined-color-border-primary-disabled);
-}
 .ids-tag.ids-tag-outlined.ids-tag-secondary {
-  color: var(--ids-comp-tag-outlined-color-fg-label-secondary-enabled);
-  background: var(--ids-comp-tag-outlined-color-bg-secondary-enabled);
-  border-color: var(--ids-comp-tag-outlined-color-border-secondary-enabled);
+  color: var(--ids-comp-tag-outlined-color-fg-label-secondary-default);
+  background: var(--ids-comp-tag-outlined-color-bg-secondary-default);
+  border-color: var(--ids-comp-tag-outlined-color-border-secondary-default);
 }
 .ids-tag.ids-tag-outlined.ids-tag-secondary:hover {
   color: var(--ids-comp-tag-outlined-color-fg-label-secondary-hovered);
@@ -368,15 +320,10 @@
   background: var(--ids-comp-tag-outlined-color-bg-secondary-pressed);
   border-color: var(--ids-comp-tag-outlined-color-border-secondary-pressed);
 }
-.ids-tag.ids-tag-outlined.ids-tag-secondary:disabled {
-  color: var(--ids-comp-tag-outlined-color-fg-label-secondary-disabled);
-  background: var(--ids-comp-tag-outlined-color-bg-secondary-disabled);
-  border-color: var(--ids-comp-tag-outlined-color-border-secondary-disabled);
-}
 .ids-tag.ids-tag-outlined.ids-tag-brand {
-  color: var(--ids-comp-tag-outlined-color-fg-label-brand-enabled);
-  background: var(--ids-comp-tag-outlined-color-bg-brand-enabled);
-  border-color: var(--ids-comp-tag-outlined-color-border-brand-enabled);
+  color: var(--ids-comp-tag-outlined-color-fg-label-brand-default);
+  background: var(--ids-comp-tag-outlined-color-bg-brand-default);
+  border-color: var(--ids-comp-tag-outlined-color-border-brand-default);
 }
 .ids-tag.ids-tag-outlined.ids-tag-brand:hover {
   color: var(--ids-comp-tag-outlined-color-fg-label-brand-hovered);
@@ -393,15 +340,10 @@
   background: var(--ids-comp-tag-outlined-color-bg-brand-pressed);
   border-color: var(--ids-comp-tag-outlined-color-border-brand-pressed);
 }
-.ids-tag.ids-tag-outlined.ids-tag-brand:disabled {
-  color: var(--ids-comp-tag-outlined-color-fg-label-brand-disabled);
-  background: var(--ids-comp-tag-outlined-color-bg-brand-disabled);
-  border-color: var(--ids-comp-tag-outlined-color-border-brand-disabled);
-}
 .ids-tag.ids-tag-outlined.ids-tag-error {
-  color: var(--ids-comp-tag-outlined-color-fg-label-error-enabled);
-  background: var(--ids-comp-tag-outlined-color-bg-error-enabled);
-  border-color: var(--ids-comp-tag-outlined-color-border-error-enabled);
+  color: var(--ids-comp-tag-outlined-color-fg-label-error-default);
+  background: var(--ids-comp-tag-outlined-color-bg-error-default);
+  border-color: var(--ids-comp-tag-outlined-color-border-error-default);
 }
 .ids-tag.ids-tag-outlined.ids-tag-error:hover {
   color: var(--ids-comp-tag-outlined-color-fg-label-error-hovered);
@@ -418,15 +360,10 @@
   background: var(--ids-comp-tag-outlined-color-bg-error-pressed);
   border-color: var(--ids-comp-tag-outlined-color-border-error-pressed);
 }
-.ids-tag.ids-tag-outlined.ids-tag-error:disabled {
-  color: var(--ids-comp-tag-outlined-color-fg-label-error-disabled);
-  background: var(--ids-comp-tag-outlined-color-bg-error-disabled);
-  border-color: var(--ids-comp-tag-outlined-color-border-error-disabled);
-}
 .ids-tag.ids-tag-outlined.ids-tag-success {
-  color: var(--ids-comp-tag-outlined-color-fg-label-success-enabled);
-  background: var(--ids-comp-tag-outlined-color-bg-success-enabled);
-  border-color: var(--ids-comp-tag-outlined-color-border-success-enabled);
+  color: var(--ids-comp-tag-outlined-color-fg-label-success-default);
+  background: var(--ids-comp-tag-outlined-color-bg-success-default);
+  border-color: var(--ids-comp-tag-outlined-color-border-success-default);
 }
 .ids-tag.ids-tag-outlined.ids-tag-success:hover {
   color: var(--ids-comp-tag-outlined-color-fg-label-success-hovered);
@@ -443,15 +380,10 @@
   background: var(--ids-comp-tag-outlined-color-bg-success-pressed);
   border-color: var(--ids-comp-tag-outlined-color-border-success-pressed);
 }
-.ids-tag.ids-tag-outlined.ids-tag-success:disabled {
-  color: var(--ids-comp-tag-outlined-color-fg-label-success-disabled);
-  background: var(--ids-comp-tag-outlined-color-bg-success-disabled);
-  border-color: var(--ids-comp-tag-outlined-color-border-success-disabled);
-}
 .ids-tag.ids-tag-outlined.ids-tag-warning {
-  color: var(--ids-comp-tag-outlined-color-fg-label-warning-enabled);
-  background: var(--ids-comp-tag-outlined-color-bg-warning-enabled);
-  border-color: var(--ids-comp-tag-outlined-color-border-warning-enabled);
+  color: var(--ids-comp-tag-outlined-color-fg-label-warning-default);
+  background: var(--ids-comp-tag-outlined-color-bg-warning-default);
+  border-color: var(--ids-comp-tag-outlined-color-border-warning-default);
 }
 .ids-tag.ids-tag-outlined.ids-tag-warning:hover {
   color: var(--ids-comp-tag-outlined-color-fg-label-warning-hovered);
@@ -468,15 +400,10 @@
   background: var(--ids-comp-tag-outlined-color-bg-warning-pressed);
   border-color: var(--ids-comp-tag-outlined-color-border-warning-pressed);
 }
-.ids-tag.ids-tag-outlined.ids-tag-warning:disabled {
-  color: var(--ids-comp-tag-outlined-color-fg-label-warning-disabled);
-  background: var(--ids-comp-tag-outlined-color-bg-warning-disabled);
-  border-color: var(--ids-comp-tag-outlined-color-border-warning-disabled);
-}
 .ids-tag.ids-tag-outlined.ids-tag-light {
-  color: var(--ids-comp-tag-outlined-color-fg-label-light-enabled);
-  background: var(--ids-comp-tag-outlined-color-bg-light-enabled);
-  border-color: var(--ids-comp-tag-outlined-color-border-light-enabled);
+  color: var(--ids-comp-tag-outlined-color-fg-label-light-default);
+  background: var(--ids-comp-tag-outlined-color-bg-light-default);
+  border-color: var(--ids-comp-tag-outlined-color-border-light-default);
 }
 .ids-tag.ids-tag-outlined.ids-tag-light:hover {
   color: var(--ids-comp-tag-outlined-color-fg-label-light-hovered);
@@ -493,15 +420,10 @@
   background: var(--ids-comp-tag-outlined-color-bg-light-pressed);
   border-color: var(--ids-comp-tag-outlined-color-border-light-pressed);
 }
-.ids-tag.ids-tag-outlined.ids-tag-light:disabled {
-  color: var(--ids-comp-tag-outlined-color-fg-label-light-disabled);
-  background: var(--ids-comp-tag-outlined-color-bg-light-disabled);
-  border-color: var(--ids-comp-tag-outlined-color-border-light-disabled);
-}
 .ids-tag.ids-tag-outlined.ids-tag-dark {
-  color: var(--ids-comp-tag-outlined-color-fg-label-dark-enabled);
-  background: var(--ids-comp-tag-outlined-color-bg-dark-enabled);
-  border-color: var(--ids-comp-tag-outlined-color-border-dark-enabled);
+  color: var(--ids-comp-tag-outlined-color-fg-label-dark-default);
+  background: var(--ids-comp-tag-outlined-color-bg-dark-default);
+  border-color: var(--ids-comp-tag-outlined-color-border-dark-default);
 }
 .ids-tag.ids-tag-outlined.ids-tag-dark:hover {
   color: var(--ids-comp-tag-outlined-color-fg-label-dark-hovered);
@@ -518,15 +440,10 @@
   background: var(--ids-comp-tag-outlined-color-bg-dark-pressed);
   border-color: var(--ids-comp-tag-outlined-color-border-dark-pressed);
 }
-.ids-tag.ids-tag-outlined.ids-tag-dark:disabled {
-  color: var(--ids-comp-tag-outlined-color-fg-label-dark-disabled);
-  background: var(--ids-comp-tag-outlined-color-bg-dark-disabled);
-  border-color: var(--ids-comp-tag-outlined-color-border-dark-disabled);
-}
 .ids-tag.ids-tag-outlined.ids-tag-surface {
-  color: var(--ids-comp-tag-outlined-color-fg-label-surface-enabled);
-  background: var(--ids-comp-tag-outlined-color-bg-surface-enabled);
-  border-color: var(--ids-comp-tag-outlined-color-border-surface-enabled);
+  color: var(--ids-comp-tag-outlined-color-fg-label-surface-default);
+  background: var(--ids-comp-tag-outlined-color-bg-surface-default);
+  border-color: var(--ids-comp-tag-outlined-color-border-surface-default);
 }
 .ids-tag.ids-tag-outlined.ids-tag-surface:hover {
   color: var(--ids-comp-tag-outlined-color-fg-label-surface-hovered);
@@ -542,234 +459,4 @@
   color: var(--ids-comp-tag-outlined-color-fg-label-surface-pressed);
   background: var(--ids-comp-tag-outlined-color-bg-surface-pressed);
   border-color: var(--ids-comp-tag-outlined-color-border-surface-pressed);
-}
-.ids-tag.ids-tag-outlined.ids-tag-surface:disabled {
-  color: var(--ids-comp-tag-outlined-color-fg-label-surface-disabled);
-  background: var(--ids-comp-tag-outlined-color-bg-surface-disabled);
-  border-color: var(--ids-comp-tag-outlined-color-border-surface-disabled);
-}
-.ids-tag.ids-tag-text.ids-tag-primary {
-  color: var(--ids-comp-tag-text-color-fg-label-primary-enabled);
-  background: var(--ids-comp-tag-text-color-bg-primary-enabled);
-  border-color: var(--ids-comp-tag-text-color-border-primary-enabled);
-}
-.ids-tag.ids-tag-text.ids-tag-primary:hover {
-  color: var(--ids-comp-tag-text-color-fg-label-primary-hovered);
-  background: var(--ids-comp-tag-text-color-bg-primary-hovered);
-  border-color: var(--ids-comp-tag-text-color-border-primary-hovered);
-}
-.ids-tag.ids-tag-text.ids-tag-primary:focus {
-  color: var(--ids-comp-tag-text-color-fg-label-primary-focused);
-  background: var(--ids-comp-tag-text-color-bg-primary-focused);
-  border-color: var(--ids-comp-tag-text-color-border-primary-focused);
-}
-.ids-tag.ids-tag-text.ids-tag-primary:active {
-  color: var(--ids-comp-tag-text-color-fg-label-primary-pressed);
-  background: var(--ids-comp-tag-text-color-bg-primary-pressed);
-  border-color: var(--ids-comp-tag-text-color-border-primary-pressed);
-}
-.ids-tag.ids-tag-text.ids-tag-primary:disabled {
-  color: var(--ids-comp-tag-text-color-fg-label-primary-disabled);
-  background: var(--ids-comp-tag-text-color-bg-primary-disabled);
-  border-color: var(--ids-comp-tag-text-color-border-primary-disabled);
-}
-.ids-tag.ids-tag-text.ids-tag-secondary {
-  color: var(--ids-comp-tag-text-color-fg-label-secondary-enabled);
-  background: var(--ids-comp-tag-text-color-bg-secondary-enabled);
-  border-color: var(--ids-comp-tag-text-color-border-secondary-enabled);
-}
-.ids-tag.ids-tag-text.ids-tag-secondary:hover {
-  color: var(--ids-comp-tag-text-color-fg-label-secondary-hovered);
-  background: var(--ids-comp-tag-text-color-bg-secondary-hovered);
-  border-color: var(--ids-comp-tag-text-color-border-secondary-hovered);
-}
-.ids-tag.ids-tag-text.ids-tag-secondary:focus {
-  color: var(--ids-comp-tag-text-color-fg-label-secondary-focused);
-  background: var(--ids-comp-tag-text-color-bg-secondary-focused);
-  border-color: var(--ids-comp-tag-text-color-border-secondary-focused);
-}
-.ids-tag.ids-tag-text.ids-tag-secondary:active {
-  color: var(--ids-comp-tag-text-color-fg-label-secondary-pressed);
-  background: var(--ids-comp-tag-text-color-bg-secondary-pressed);
-  border-color: var(--ids-comp-tag-text-color-border-secondary-pressed);
-}
-.ids-tag.ids-tag-text.ids-tag-secondary:disabled {
-  color: var(--ids-comp-tag-text-color-fg-label-secondary-disabled);
-  background: var(--ids-comp-tag-text-color-bg-secondary-disabled);
-  border-color: var(--ids-comp-tag-text-color-border-secondary-disabled);
-}
-.ids-tag.ids-tag-text.ids-tag-brand {
-  color: var(--ids-comp-tag-text-color-fg-label-brand-enabled);
-  background: var(--ids-comp-tag-text-color-bg-brand-enabled);
-  border-color: var(--ids-comp-tag-text-color-border-brand-enabled);
-}
-.ids-tag.ids-tag-text.ids-tag-brand:hover {
-  color: var(--ids-comp-tag-text-color-fg-label-brand-hovered);
-  background: var(--ids-comp-tag-text-color-bg-brand-hovered);
-  border-color: var(--ids-comp-tag-text-color-border-brand-hovered);
-}
-.ids-tag.ids-tag-text.ids-tag-brand:focus {
-  color: var(--ids-comp-tag-text-color-fg-label-brand-focused);
-  background: var(--ids-comp-tag-text-color-bg-brand-focused);
-  border-color: var(--ids-comp-tag-text-color-border-brand-focused);
-}
-.ids-tag.ids-tag-text.ids-tag-brand:active {
-  color: var(--ids-comp-tag-text-color-fg-label-brand-pressed);
-  background: var(--ids-comp-tag-text-color-bg-brand-pressed);
-  border-color: var(--ids-comp-tag-text-color-border-brand-pressed);
-}
-.ids-tag.ids-tag-text.ids-tag-brand:disabled {
-  color: var(--ids-comp-tag-text-color-fg-label-brand-disabled);
-  background: var(--ids-comp-tag-text-color-bg-brand-disabled);
-  border-color: var(--ids-comp-tag-text-color-border-brand-disabled);
-}
-.ids-tag.ids-tag-text.ids-tag-error {
-  color: var(--ids-comp-tag-text-color-fg-label-error-enabled);
-  background: var(--ids-comp-tag-text-color-bg-error-enabled);
-  border-color: var(--ids-comp-tag-text-color-border-error-enabled);
-}
-.ids-tag.ids-tag-text.ids-tag-error:hover {
-  color: var(--ids-comp-tag-text-color-fg-label-error-hovered);
-  background: var(--ids-comp-tag-text-color-bg-error-hovered);
-  border-color: var(--ids-comp-tag-text-color-border-error-hovered);
-}
-.ids-tag.ids-tag-text.ids-tag-error:focus {
-  color: var(--ids-comp-tag-text-color-fg-label-error-focused);
-  background: var(--ids-comp-tag-text-color-bg-error-focused);
-  border-color: var(--ids-comp-tag-text-color-border-error-focused);
-}
-.ids-tag.ids-tag-text.ids-tag-error:active {
-  color: var(--ids-comp-tag-text-color-fg-label-error-pressed);
-  background: var(--ids-comp-tag-text-color-bg-error-pressed);
-  border-color: var(--ids-comp-tag-text-color-border-error-pressed);
-}
-.ids-tag.ids-tag-text.ids-tag-error:disabled {
-  color: var(--ids-comp-tag-text-color-fg-label-error-disabled);
-  background: var(--ids-comp-tag-text-color-bg-error-disabled);
-  border-color: var(--ids-comp-tag-text-color-border-error-disabled);
-}
-.ids-tag.ids-tag-text.ids-tag-success {
-  color: var(--ids-comp-tag-text-color-fg-label-success-enabled);
-  background: var(--ids-comp-tag-text-color-bg-success-enabled);
-  border-color: var(--ids-comp-tag-text-color-border-success-enabled);
-}
-.ids-tag.ids-tag-text.ids-tag-success:hover {
-  color: var(--ids-comp-tag-text-color-fg-label-success-hovered);
-  background: var(--ids-comp-tag-text-color-bg-success-hovered);
-  border-color: var(--ids-comp-tag-text-color-border-success-hovered);
-}
-.ids-tag.ids-tag-text.ids-tag-success:focus {
-  color: var(--ids-comp-tag-text-color-fg-label-success-focused);
-  background: var(--ids-comp-tag-text-color-bg-success-focused);
-  border-color: var(--ids-comp-tag-text-color-border-success-focused);
-}
-.ids-tag.ids-tag-text.ids-tag-success:active {
-  color: var(--ids-comp-tag-text-color-fg-label-success-pressed);
-  background: var(--ids-comp-tag-text-color-bg-success-pressed);
-  border-color: var(--ids-comp-tag-text-color-border-success-pressed);
-}
-.ids-tag.ids-tag-text.ids-tag-success:disabled {
-  color: var(--ids-comp-tag-text-color-fg-label-success-disabled);
-  background: var(--ids-comp-tag-text-color-bg-success-disabled);
-  border-color: var(--ids-comp-tag-text-color-border-success-disabled);
-}
-.ids-tag.ids-tag-text.ids-tag-warning {
-  color: var(--ids-comp-tag-text-color-fg-label-warning-enabled);
-  background: var(--ids-comp-tag-text-color-bg-warning-enabled);
-  border-color: var(--ids-comp-tag-text-color-border-warning-enabled);
-}
-.ids-tag.ids-tag-text.ids-tag-warning:hover {
-  color: var(--ids-comp-tag-text-color-fg-label-warning-hovered);
-  background: var(--ids-comp-tag-text-color-bg-warning-hovered);
-  border-color: var(--ids-comp-tag-text-color-border-warning-hovered);
-}
-.ids-tag.ids-tag-text.ids-tag-warning:focus {
-  color: var(--ids-comp-tag-text-color-fg-label-warning-focused);
-  background: var(--ids-comp-tag-text-color-bg-warning-focused);
-  border-color: var(--ids-comp-tag-text-color-border-warning-focused);
-}
-.ids-tag.ids-tag-text.ids-tag-warning:active {
-  color: var(--ids-comp-tag-text-color-fg-label-warning-pressed);
-  background: var(--ids-comp-tag-text-color-bg-warning-pressed);
-  border-color: var(--ids-comp-tag-text-color-border-warning-pressed);
-}
-.ids-tag.ids-tag-text.ids-tag-warning:disabled {
-  color: var(--ids-comp-tag-text-color-fg-label-warning-disabled);
-  background: var(--ids-comp-tag-text-color-bg-warning-disabled);
-  border-color: var(--ids-comp-tag-text-color-border-warning-disabled);
-}
-.ids-tag.ids-tag-text.ids-tag-light {
-  color: var(--ids-comp-tag-text-color-fg-label-light-enabled);
-  background: var(--ids-comp-tag-text-color-bg-light-enabled);
-  border-color: var(--ids-comp-tag-text-color-border-light-enabled);
-}
-.ids-tag.ids-tag-text.ids-tag-light:hover {
-  color: var(--ids-comp-tag-text-color-fg-label-light-hovered);
-  background: var(--ids-comp-tag-text-color-bg-light-hovered);
-  border-color: var(--ids-comp-tag-text-color-border-light-hovered);
-}
-.ids-tag.ids-tag-text.ids-tag-light:focus {
-  color: var(--ids-comp-tag-text-color-fg-label-light-focused);
-  background: var(--ids-comp-tag-text-color-bg-light-focused);
-  border-color: var(--ids-comp-tag-text-color-border-light-focused);
-}
-.ids-tag.ids-tag-text.ids-tag-light:active {
-  color: var(--ids-comp-tag-text-color-fg-label-light-pressed);
-  background: var(--ids-comp-tag-text-color-bg-light-pressed);
-  border-color: var(--ids-comp-tag-text-color-border-light-pressed);
-}
-.ids-tag.ids-tag-text.ids-tag-light:disabled {
-  color: var(--ids-comp-tag-text-color-fg-label-light-disabled);
-  background: var(--ids-comp-tag-text-color-bg-light-disabled);
-  border-color: var(--ids-comp-tag-text-color-border-light-disabled);
-}
-.ids-tag.ids-tag-text.ids-tag-dark {
-  color: var(--ids-comp-tag-text-color-fg-label-dark-enabled);
-  background: var(--ids-comp-tag-text-color-bg-dark-enabled);
-  border-color: var(--ids-comp-tag-text-color-border-dark-enabled);
-}
-.ids-tag.ids-tag-text.ids-tag-dark:hover {
-  color: var(--ids-comp-tag-text-color-fg-label-dark-hovered);
-  background: var(--ids-comp-tag-text-color-bg-dark-hovered);
-  border-color: var(--ids-comp-tag-text-color-border-dark-hovered);
-}
-.ids-tag.ids-tag-text.ids-tag-dark:focus {
-  color: var(--ids-comp-tag-text-color-fg-label-dark-focused);
-  background: var(--ids-comp-tag-text-color-bg-dark-focused);
-  border-color: var(--ids-comp-tag-text-color-border-dark-focused);
-}
-.ids-tag.ids-tag-text.ids-tag-dark:active {
-  color: var(--ids-comp-tag-text-color-fg-label-dark-pressed);
-  background: var(--ids-comp-tag-text-color-bg-dark-pressed);
-  border-color: var(--ids-comp-tag-text-color-border-dark-pressed);
-}
-.ids-tag.ids-tag-text.ids-tag-dark:disabled {
-  color: var(--ids-comp-tag-text-color-fg-label-dark-disabled);
-  background: var(--ids-comp-tag-text-color-bg-dark-disabled);
-  border-color: var(--ids-comp-tag-text-color-border-dark-disabled);
-}
-.ids-tag.ids-tag-text.ids-tag-surface {
-  color: var(--ids-comp-tag-text-color-fg-label-surface-enabled);
-  background: var(--ids-comp-tag-text-color-bg-surface-enabled);
-  border-color: var(--ids-comp-tag-text-color-border-surface-enabled);
-}
-.ids-tag.ids-tag-text.ids-tag-surface:hover {
-  color: var(--ids-comp-tag-text-color-fg-label-surface-hovered);
-  background: var(--ids-comp-tag-text-color-bg-surface-hovered);
-  border-color: var(--ids-comp-tag-text-color-border-surface-hovered);
-}
-.ids-tag.ids-tag-text.ids-tag-surface:focus {
-  color: var(--ids-comp-tag-text-color-fg-label-surface-focused);
-  background: var(--ids-comp-tag-text-color-bg-surface-focused);
-  border-color: var(--ids-comp-tag-text-color-border-surface-focused);
-}
-.ids-tag.ids-tag-text.ids-tag-surface:active {
-  color: var(--ids-comp-tag-text-color-fg-label-surface-pressed);
-  background: var(--ids-comp-tag-text-color-bg-surface-pressed);
-  border-color: var(--ids-comp-tag-text-color-border-surface-pressed);
-}
-.ids-tag.ids-tag-text.ids-tag-surface:disabled {
-  color: var(--ids-comp-tag-text-color-fg-label-surface-disabled);
-  background: var(--ids-comp-tag-text-color-bg-surface-disabled);
-  border-color: var(--ids-comp-tag-text-color-border-surface-disabled);
 }