@ivds/core 0.1.1

package/src/components/tag/tag.scss

@@ -0,0 +1,244 @@
+// Tag component styles
+// Provides styling for the IVDS tag component with all variants, sizes, and removable functionality
+
+@use '_tag-mixin' as tag;
+
+// Tag Base
+.ivds-tag {
+  @include tag.tag-base;
+  @include tag.tag-size(var(--spacing-1, 0.25rem), var(--spacing-3, 0.75rem), var(--fontSize-sm, 0.875rem), 24px);
+  @include tag.tag-with-icon;
+  @include tag.tag-variant(
+    var(--color-semantic-neutral-100, #f1f5f9),
+    var(--color-semantic-neutral-700, #334155),
+    transparent,
+    var(--color-semantic-neutral-200, #e2e8f0)
+  );
+  
+  // Tag elements
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    
+    svg {
+      width: 1em;
+      height: 1em;
+      fill: currentcolor;
+    }
+  }
+  
+  &__text {
+    flex: 1;
+  }
+  
+  &__remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    
+    svg {
+      width: 0.875em;
+      height: 0.875em;
+      fill: currentcolor;
+    }
+  }
+}
+
+// Tag Color Variants
+.ivds-tag--primary {
+  @include tag.tag-variant(
+    var(--color-brand-primary-100, #ffedd5),
+    var(--color-brand-primary-700, #c2410c),
+    transparent,
+    var(--color-brand-primary-200, #fed7aa)
+  );
+}
+
+.ivds-tag--success {
+  @include tag.tag-variant(
+    var(--color-semantic-success-100, #dcfce7),
+    var(--color-semantic-success-700, #15803d),
+    transparent,
+    var(--color-semantic-success-200, #bbf7d0)
+  );
+}
+
+.ivds-tag--warning {
+  @include tag.tag-variant(
+    var(--color-semantic-warning-100, #fef3c7),
+    var(--color-semantic-warning-700, #b45309),
+    transparent,
+    var(--color-semantic-warning-200, #fed7aa)
+  );
+}
+
+.ivds-tag--error {
+  @include tag.tag-variant(
+    var(--color-semantic-error-100, #fee2e2),
+    var(--color-semantic-error-700, #b91c1c),
+    transparent,
+    var(--color-semantic-error-200, #fecaca)
+  );
+}
+
+.ivds-tag--info {
+  @include tag.tag-variant(
+    var(--color-semantic-info-100, #dbeafe),
+    var(--color-semantic-info-700, #1d4ed8),
+    transparent,
+    var(--color-semantic-info-200, #bfdbfe)
+  );
+}
+
+// Tag Style Variants
+.ivds-tag--outlined {
+  &.ivds-tag {
+    @include tag.tag-outlined(
+      var(--color-semantic-neutral-300, #cbd5e1),
+      var(--color-semantic-neutral-700, #334155),
+      var(--color-semantic-neutral-50, #f8fafc)
+    );
+  }
+  
+  &.ivds-tag--primary {
+    @include tag.tag-outlined(
+      var(--color-brand-primary-300, #fdba74),
+      var(--color-brand-primary-700, #c2410c),
+      var(--color-brand-primary-50, #fff7ed)
+    );
+  }
+  
+  &.ivds-tag--success {
+    @include tag.tag-outlined(
+      var(--color-semantic-success-300, #86efac),
+      var(--color-semantic-success-700, #15803d),
+      var(--color-semantic-success-50, #f0fdf4)
+    );
+  }
+  
+  &.ivds-tag--warning {
+    @include tag.tag-outlined(
+      var(--color-semantic-warning-300, #fcd34d),
+      var(--color-semantic-warning-700, #b45309),
+      var(--color-semantic-warning-50, #fffbeb)
+    );
+  }
+  
+  &.ivds-tag--error {
+    @include tag.tag-outlined(
+      var(--color-semantic-error-300, #fca5a5),
+      var(--color-semantic-error-700, #b91c1c),
+      var(--color-semantic-error-50, #fef2f2)
+    );
+  }
+  
+  &.ivds-tag--info {
+    @include tag.tag-outlined(
+      var(--color-semantic-info-300, #93c5fd),
+      var(--color-semantic-info-700, #1d4ed8),
+      var(--color-semantic-info-50, #eff6ff)
+    );
+  }
+}
+
+.ivds-tag--solid {
+  &.ivds-tag {
+    @include tag.tag-solid(
+      var(--color-semantic-neutral-600, #475569),
+      var(--color-semantic-neutral-50, #f8fafc),
+      var(--color-semantic-neutral-700, #334155)
+    );
+  }
+  
+  &.ivds-tag--primary {
+    @include tag.tag-solid(
+      var(--color-brand-primary-600, #ea580c),
+      var(--color-semantic-neutral-50, #fafafa),
+      var(--color-brand-primary-700, #c2410c)
+    );
+  }
+  
+  &.ivds-tag--success {
+    @include tag.tag-solid(
+      var(--color-semantic-success-600, #16a34a),
+      var(--color-semantic-neutral-50, #f8fafc),
+      var(--color-semantic-success-700, #15803d)
+    );
+  }
+  
+  &.ivds-tag--warning {
+    @include tag.tag-solid(
+      var(--color-semantic-warning-600, #d97706),
+      var(--color-semantic-neutral-50, #f8fafc),
+      var(--color-semantic-warning-700, #b45309)
+    );
+  }
+  
+  &.ivds-tag--error {
+    @include tag.tag-solid(
+      var(--color-semantic-error-600, #dc2626),
+      var(--color-semantic-neutral-50, #f8fafc),
+      var(--color-semantic-error-700, #b91c1c)
+    );
+  }
+  
+  &.ivds-tag--info {
+    @include tag.tag-solid(
+      var(--color-semantic-info-600, #2563eb),
+      var(--color-semantic-neutral-50, #f8fafc),
+      var(--color-semantic-info-700, #1d4ed8)
+    );
+  }
+}
+
+// Tag Size Variants
+.ivds-tag--small {
+  @include tag.tag-small;
+}
+
+.ivds-tag--large {
+  @include tag.tag-large;
+}
+
+// Tag Functionality Variants
+.ivds-tag--removable {
+  @include tag.tag-removable;
+}
+
+.ivds-tag--link {
+  @include tag.tag-link;
+}
+
+.ivds-tag--interactive {
+  @include tag.tag-interactive;
+}
+
+// Tag Status Variants
+.ivds-tag--new {
+  @include tag.tag-status-new;
+}
+
+.ivds-tag--updated {
+  @include tag.tag-status-updated;
+}
+
+// Tag State Variants
+.ivds-tag--disabled {
+  @include tag.tag-disabled;
+}
+
+// Tag Group
+.ivds-tag-group {
+  @include tag.tag-group;
+  
+  &--compact {
+    @include tag.tag-group(var(--spacing-1, 0.25rem));
+  }
+  
+  &--spacious {
+    @include tag.tag-group(var(--spacing-3, 0.75rem));
+  }
+}