@ivds/core 0.1.1

package/lib/components/_tag-mixin.scss

@@ -0,0 +1,261 @@
+// Tag component mixins and private styles
+// This file contains mixins for tag variants, sizes, and internal utilities
+
+@use '../../variables/variables' as vars;
+
+// Base tag mixin with common styles
+@mixin tag-base {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--fontFamily-sans, system-ui, -apple-system, sans-serif);
+  font-weight: var(--fontWeight-medium, 500);
+  line-height: var(--lineHeight-tight, 1.25);
+  border-radius: var(--borderRadius-md, 0.375rem);
+  border: var(--borderWidth-1, 1px) solid transparent;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: all 0.15s ease-in-out;
+  user-select: none;
+  
+  &:focus-within {
+    outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
+    outline-offset: 2px;
+  }
+}
+
+// Tag variant mixin
+@mixin tag-variant($bg-color, $text-color, $border-color: transparent, $hover-bg: null, $hover-border: null) {
+  background-color: $bg-color;
+  color: $text-color;
+  border-color: $border-color;
+  
+  @if $hover-bg {
+    &:hover {
+      background-color: $hover-bg;
+      
+      @if $hover-border {
+        border-color: $hover-border;
+      }
+    }
+  }
+}
+
+// Tag size mixin
+@mixin tag-size($padding-y, $padding-x, $font-size, $min-height: null) {
+  padding: $padding-y $padding-x;
+  font-size: $font-size;
+  
+  @if $min-height {
+    min-height: $min-height;
+  }
+}
+
+// Tag with icon mixin
+@mixin tag-with-icon($gap: var(--spacing-2, 0.5rem)) {
+  gap: $gap;
+  
+  .ivds-tag__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    
+    svg {
+      width: 1em;
+      height: 1em;
+      fill: currentcolor;
+    }
+  }
+}
+
+// Removable tag mixin
+@mixin tag-removable {
+  padding-right: var(--spacing-1, 0.25rem);
+  
+  .ivds-tag__remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: var(--spacing-2, 0.5rem);
+    padding: var(--spacing-1, 0.25rem);
+    background: transparent;
+    border: none;
+    border-radius: var(--borderRadius-sm, 0.25rem);
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.7;
+    transition: opacity 0.15s ease-in-out, background-color 0.15s ease-in-out;
+    
+    &:hover {
+      opacity: 1;
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+    
+    &:focus {
+      outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
+      outline-offset: 1px;
+      opacity: 1;
+    }
+    
+    &:active {
+      transform: scale(0.95);
+    }
+    
+    svg {
+      width: 0.875em;
+      height: 0.875em;
+      fill: currentcolor;
+    }
+  }
+}
+
+// Tag link mixin (for clickable tags)
+@mixin tag-link {
+  cursor: pointer;
+  text-decoration: none;
+  
+  &:hover {
+    text-decoration: none;
+  }
+  
+  &:focus {
+    outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
+    outline-offset: 2px;
+  }
+  
+  &:active {
+    transform: translateY(1px);
+  }
+}
+
+// Tag outlined variant mixin
+@mixin tag-outlined($border-color, $text-color, $hover-bg: null) {
+  background-color: transparent;
+  border-color: $border-color;
+  color: $text-color;
+  
+  @if $hover-bg {
+    &:hover {
+      background-color: $hover-bg;
+    }
+  }
+}
+
+// Tag solid variant mixin (for high contrast)
+@mixin tag-solid($bg-color, $text-color, $hover-bg: null) {
+  background-color: $bg-color;
+  color: $text-color;
+  border-color: $bg-color;
+  
+  @if $hover-bg {
+    &:hover {
+      background-color: $hover-bg;
+      border-color: $hover-bg;
+    }
+  }
+}
+
+// Tag group mixin
+@mixin tag-group($gap: var(--spacing-2, 0.5rem)) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $gap;
+  align-items: center;
+}
+
+// Tag size variants
+@mixin tag-small {
+  @include tag-size(var(--spacing-1, 0.25rem), var(--spacing-2, 0.5rem), var(--fontSize-xs, 0.75rem), 20px);
+  
+  .ivds-tag__icon svg {
+    width: 0.875em;
+    height: 0.875em;
+  }
+  
+  &.ivds-tag--removable {
+    .ivds-tag__remove {
+      margin-left: var(--spacing-1, 0.25rem);
+      padding: 2px;
+      
+      svg {
+        width: 0.75em;
+        height: 0.75em;
+      }
+    }
+  }
+}
+
+@mixin tag-large {
+  @include tag-size(var(--spacing-2, 0.5rem), var(--spacing-4, 1rem), var(--fontSize-base, 1rem), 32px);
+  
+  .ivds-tag__icon svg {
+    width: 1.125em;
+    height: 1.125em;
+  }
+  
+  &.ivds-tag--removable {
+    .ivds-tag__remove {
+      margin-left: var(--spacing-3, 0.75rem);
+      padding: var(--spacing-1, 0.25rem);
+      
+      svg {
+        width: 1em;
+        height: 1em;
+      }
+    }
+  }
+}
+
+// Tag status variants (for different semantic meanings)
+@mixin tag-status-new {
+  position: relative;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    width: 6px;
+    height: 6px;
+    background-color: var(--color-semantic-success-500, #22c55e);
+    border-radius: 50%;
+    border: 1px solid var(--color-semantic-neutral-50, #f8fafc);
+  }
+}
+
+@mixin tag-status-updated {
+  position: relative;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    width: 6px;
+    height: 6px;
+    background-color: var(--color-semantic-info-500, #3b82f6);
+    border-radius: 50%;
+    border: 1px solid var(--color-semantic-neutral-50, #f8fafc);
+  }
+}
+
+// Tag interactive states
+@mixin tag-interactive {
+  cursor: pointer;
+  
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+// Tag disabled state
+@mixin tag-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/lib/components/_text-input-mixin.scss

@@ -0,0 +1,203 @@
+// Text input component mixins and private styles
+// This file contains mixins for input variants, sizes, states, and internal utilities
+
+@use '../../variables/variables' as vars;
+
+// Base input mixin with common styles
+@mixin text-input-base {
+  display: block;
+  width: 100%;
+  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
+  border-radius: var(--borderRadius-md, 0.375rem);
+  font-family: var(--fontFamily-sans, system-ui, -apple-system, sans-serif);
+  line-height: var(--lineHeight-normal, 1.5);
+  color: var(--color-semantic-neutral-900, #0f172a);
+  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  
+  &::placeholder {
+    color: var(--color-semantic-neutral-500, #64748b);
+  }
+  
+  &:focus {
+    outline: none;
+    border-color: var(--color-brand-primary-500, #f97316);
+    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
+  }
+  
+  &:disabled {
+    background-color: var(--color-semantic-neutral-100, #f1f5f9);
+    color: var(--color-semantic-neutral-500, #64748b);
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}
+
+// Input size mixin
+@mixin text-input-size($padding-y, $padding-x, $font-size, $min-height: null) {
+  padding: $padding-y $padding-x;
+  font-size: $font-size;
+  
+  @if $min-height {
+    min-height: $min-height;
+  }
+}
+
+// Input state mixin
+@mixin text-input-state($border-color, $focus-border-color: null, $focus-shadow-color: null) {
+  border-color: $border-color;
+  
+  @if $focus-border-color {
+    &:focus {
+      border-color: $focus-border-color;
+      
+      @if $focus-shadow-color {
+        box-shadow: 0 0 0 3px $focus-shadow-color;
+      }
+    }
+  }
+}
+
+// Input wrapper mixin
+@mixin text-input-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2, 0.5rem);
+}
+
+// Input label mixin
+@mixin text-input-label {
+  display: block;
+  font-size: var(--fontSize-sm, 0.875rem);
+  font-weight: var(--fontWeight-medium, 500);
+  color: var(--color-semantic-neutral-700, #374151);
+  margin-bottom: var(--spacing-1, 0.25rem);
+}
+
+// Input helper text mixin
+@mixin text-input-helper {
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-neutral-600, #4b5563);
+  margin-top: var(--spacing-1, 0.25rem);
+}
+
+// Input error text mixin
+@mixin text-input-error {
+  font-size: var(--fontSize-sm, 0.875rem);
+  color: var(--color-semantic-error-600, #dc2626);
+  margin-top: var(--spacing-1, 0.25rem);
+  
+  &::before {
+    content: '⚠ ';
+    margin-right: var(--spacing-1, 0.25rem);
+  }
+}
+
+// Input with left icon mixin
+@mixin text-input-with-icon-left($icon-size: 20px, $padding-adjustment: 2.5rem) {
+  position: relative;
+  
+  .ivds-text-input {
+    padding-left: $padding-adjustment;
+  }
+  
+  .ivds-text-input__icon {
+    position: absolute;
+    top: 50%;
+    left: var(--spacing-3, 0.75rem);
+    transform: translateY(-50%);
+    width: $icon-size;
+    height: $icon-size;
+    color: var(--color-semantic-neutral-500, #64748b);
+    pointer-events: none;
+    
+    svg {
+      width: 100%;
+      height: 100%;
+      fill: currentcolor;
+    }
+  }
+}
+
+// Input with right icon mixin
+@mixin text-input-with-icon-right($icon-size: 20px, $padding-adjustment: 2.5rem) {
+  position: relative;
+  
+  .ivds-text-input {
+    padding-right: $padding-adjustment;
+  }
+  
+  .ivds-text-input__icon {
+    position: absolute;
+    top: 50%;
+    right: var(--spacing-3, 0.75rem);
+    transform: translateY(-50%);
+    width: $icon-size;
+    height: $icon-size;
+    color: var(--color-semantic-neutral-500, #64748b);
+    pointer-events: none;
+    
+    svg {
+      width: 100%;
+      height: 100%;
+      fill: currentcolor;
+    }
+  }
+}
+
+// Required field indicator mixin
+@mixin text-input-required {
+  &::after {
+    content: ' *';
+    color: var(--color-semantic-error-500, #ef4444);
+  }
+}
+
+// Input group mixin (for addons)
+@mixin text-input-group {
+  display: flex;
+  align-items: stretch;
+  
+  .ivds-text-input {
+    flex: 1;
+    border-radius: 0;
+    
+    &:first-child {
+      border-top-left-radius: var(--borderRadius-md, 0.375rem);
+      border-bottom-left-radius: var(--borderRadius-md, 0.375rem);
+    }
+    
+    &:last-child {
+      border-top-right-radius: var(--borderRadius-md, 0.375rem);
+      border-bottom-right-radius: var(--borderRadius-md, 0.375rem);
+    }
+    
+    &:not(:first-child) {
+      border-left: 0;
+    }
+  }
+  
+  .ivds-text-input__addon {
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-3, 0.75rem);
+    background-color: var(--color-semantic-neutral-100, #f1f5f9);
+    border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
+    color: var(--color-semantic-neutral-600, #4b5563);
+    font-size: var(--fontSize-sm, 0.875rem);
+    white-space: nowrap;
+    
+    &:first-child {
+      border-top-left-radius: var(--borderRadius-md, 0.375rem);
+      border-bottom-left-radius: var(--borderRadius-md, 0.375rem);
+      border-right: 0;
+    }
+    
+    &:last-child {
+      border-top-right-radius: var(--borderRadius-md, 0.375rem);
+      border-bottom-right-radius: var(--borderRadius-md, 0.375rem);
+      border-left: 0;
+    }
+  }
+}