@ivds/core 0.1.1 → 1.0.0

package/lib/components/_radio-button-mixin.scss

@@ -1,207 +0,0 @@
-// Radio button component mixins and private styles
-// This file contains mixins for radio button variants, sizes, states, and internal utilities
-
-@use '../../variables/variables' as vars;
-
-// Base radio button mixin with common styles
-@mixin radio-button-base {
-  position: relative;
-  display: inline-flex;
-  align-items: flex-start;
-  cursor: pointer;
-  user-select: none;
-  
-  &:hover .ivds-radio-button__circle {
-    border-color: var(--color-brand-primary-400, #38bdf8);
-  }
-}
-
-// Hidden input mixin
-@mixin radio-button-input {
-  position: absolute;
-  opacity: 0;
-  width: 1px;
-  height: 1px;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  overflow: hidden;
-}
-
-// Radio button circle mixin
-@mixin radio-button-circle($size: 18px) {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: $size;
-  height: $size;
-  min-width: $size;
-  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
-  border-radius: 50%;
-  background-color: var(--color-semantic-neutral-50, #f8fafc);
-  transition: all 0.15s ease-in-out;
-  
-  &::after {
-    content: '';
-    position: absolute;
-    width: calc($size * 0.5);
-    height: calc($size * 0.5);
-    border-radius: 50%;
-    background-color: transparent;
-    transform: scale(0);
-    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
-  }
-}
-
-// Radio button label mixin
-@mixin radio-button-label($font-size: var(--fontSize-base, 1rem), $gap: var(--spacing-3, 0.75rem)) {
-  margin-left: $gap;
-  font-size: $font-size;
-  color: var(--color-semantic-neutral-900, #0f172a);
-  line-height: var(--lineHeight-normal, 1.5);
-}
-
-// Radio button checked state mixin
-@mixin radio-button-checked($bg-color: var(--color-brand-primary-500, #0ea5e9), $border-color: var(--color-brand-primary-500, #0ea5e9)) {
-  background-color: $bg-color;
-  border-color: $border-color;
-  
-  &::after {
-    background-color: var(--color-semantic-neutral-50, #f8fafc);
-    transform: scale(1);
-  }
-}
-
-// Radio button focus state mixin
-@mixin radio-button-focus {
-  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
-  outline-offset: 2px;
-}
-
-// Radio button disabled state mixin
-@mixin radio-button-disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-  
-  .ivds-radio-button__circle {
-    background-color: var(--color-semantic-neutral-100, #f1f5f9);
-    border-color: var(--color-semantic-neutral-200, #e2e8f0);
-    cursor: not-allowed;
-  }
-  
-  .ivds-radio-button__label {
-    color: var(--color-semantic-neutral-500, #64748b);
-    cursor: not-allowed;
-  }
-}
-
-// Radio button error state mixin
-@mixin radio-button-error {
-  .ivds-radio-button__circle {
-    border-color: var(--color-semantic-error-500, #ef4444);
-  }
-  
-  &:hover .ivds-radio-button__circle {
-    border-color: var(--color-semantic-error-600, #dc2626);
-  }
-  
-  .ivds-radio-button__input:checked + .ivds-radio-button__circle {
-    background-color: var(--color-semantic-error-500, #ef4444);
-    border-color: var(--color-semantic-error-500, #ef4444);
-  }
-  
-  .ivds-radio-button__input:focus + .ivds-radio-button__circle {
-    outline-color: var(--color-semantic-error-500, #ef4444);
-  }
-}
-
-// Radio button success state mixin
-@mixin radio-button-success {
-  .ivds-radio-button__circle {
-    border-color: var(--color-semantic-success-500, #10b981);
-  }
-  
-  &:hover .ivds-radio-button__circle {
-    border-color: var(--color-semantic-success-600, #059669);
-  }
-  
-  .ivds-radio-button__input:checked + .ivds-radio-button__circle {
-    background-color: var(--color-semantic-success-500, #10b981);
-    border-color: var(--color-semantic-success-500, #10b981);
-  }
-  
-  .ivds-radio-button__input:focus + .ivds-radio-button__circle {
-    outline-color: var(--color-semantic-success-500, #10b981);
-  }
-}
-
-// Radio button size variants
-@mixin radio-button-small {
-  .ivds-radio-button__circle {
-    @include radio-button-circle(14px);
-  }
-  
-  .ivds-radio-button__label {
-    @include radio-button-label(var(--fontSize-sm, 0.875rem), var(--spacing-2, 0.5rem));
-  }
-}
-
-@mixin radio-button-large {
-  .ivds-radio-button__circle {
-    @include radio-button-circle(22px);
-  }
-  
-  .ivds-radio-button__label {
-    @include radio-button-label(var(--fontSize-lg, 1.125rem), var(--spacing-4, 1rem));
-  }
-}
-
-// Radio button group mixin
-@mixin radio-button-group($gap: var(--spacing-3, 0.75rem)) {
-  display: flex;
-  flex-direction: column;
-  gap: $gap;
-  
-  &--horizontal {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: var(--spacing-6, 1.5rem);
-  }
-}
-
-// Radio button description mixin
-@mixin radio-button-description {
-  margin-top: var(--spacing-1, 0.25rem);
-  margin-left: calc(18px + var(--spacing-3, 0.75rem));
-  font-size: var(--fontSize-sm, 0.875rem);
-  color: var(--color-semantic-neutral-600, #4b5563);
-  line-height: var(--lineHeight-relaxed, 1.625);
-}
-
-// Radio button card variant mixin
-@mixin radio-button-card {
-  padding: var(--spacing-4, 1rem);
-  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-200, #e2e8f0);
-  border-radius: var(--borderRadius-md, 0.375rem);
-  background-color: var(--color-semantic-neutral-50, #f8fafc);
-  transition: all 0.15s ease-in-out;
-  
-  &:hover {
-    border-color: var(--color-brand-primary-300, #7dd3fc);
-    background-color: var(--color-brand-primary-50, #eff6ff);
-  }
-}
-
-// Radio button card checked state mixin
-@mixin radio-button-card-checked {
-  border-color: var(--color-brand-primary-500, #0ea5e9);
-  background-color: var(--color-brand-primary-50, #eff6ff);
-}
-
-// Radio button card focus state mixin
-@mixin radio-button-card-focus {
-  outline: 2px solid var(--color-brand-primary-500, #0ea5e9);
-  outline-offset: 2px;
-}

package/lib/components/_tag-mixin.scss

@@ -1,261 +0,0 @@
-// 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

@@ -1,203 +0,0 @@
-// 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;
-    }
-  }
-}