@3fn/core 14.1.0 → 15.0.0

package/src/components/core/Button-Icon/platforms/web/ButtonIcon.web.css

@@ -1,600 +0,0 @@
-/**
- * Button-Icon Component Styles for Web Platform
- * 
- * Token-based styling using CSS custom properties from the mathematical token system.
- * All values reference semantic or primitive tokens - zero hard-coded values.
- * 
- * Stemma System Naming: [Family]-[Type] = Button-Icon
- * Component Type: Primitive (foundational component)
- * 
- * Key Design Decisions:
- * - Circular shape via radiusCircle token (border-radius: 50%)
- * - Self-contained focus ring buffer (4px on all sides)
- * - No disabled state by design (see Requirement 11.1)
- * - Secondary border shift prevention via box-shadow technique
- * 
- * @module Button-Icon/platforms/web/styles
- * @see Requirements: 1.1, 1.2, 1.3, 1.4, 2.1, 2.2, 2.3, 3.2, 4
- */
-
-/* ==========================================================================
-   CSS Custom Properties (Token References)
-   ========================================================================== */
-
-/**
- * Component-level custom properties for token consumption.
- * These map semantic tokens to component-specific usage.
- * 
- * Inset tokens are consumed from generated ComponentTokens.web.css:
- * - --buttonicon-inset-large: var(--space-150)
- * - --buttonicon-inset-medium: var(--space-125)
- * - --buttonicon-inset-small: var(--space-100)
- * 
- * Size and inset tokens use component-scoped naming (--_bi-*):
- * - --_bi-size-large: 48px (icon 24px + padding 12px × 2)
- * - --_bi-size-medium: 40px (icon 18px + padding 10px × 2, rounded for grid)
- * - --_bi-size-small: 32px (icon 13px + padding 8px × 2, rounded for grid)
- * 
- * @see Requirements 6.1, 6.2, 6.3 - Hard-coded value elimination
- */
-:host {
-  /* Focus ring tokens */
-  --_bi-focus-offset: var(--accessibility-focus-offset);
-  --_bi-focus-width: var(--accessibility-focus-width);
-  --_bi-focus-color: var(--accessibility-focus-color);
-  
-  /* Focus buffer calculation: offset + width = 4px total per side */
-  --_bi-focus-buffer: 4px;
-  
-  /* Circular shape token */
-  --_bi-radius: 50%;
-  
-  /* Semantic motion tokens for button press feedback */
-  /* Uses motion.buttonPress semantic token (150ms, accelerate easing) */
-  --_bi-transition-duration: var(--motion-button-press-duration);
-  --_bi-transition-easing: var(--motion-button-press-easing);
-  
-  /* Border tokens */
-  --_bi-border-default: var(--border-default);
-  --_bi-border-emphasis: var(--border-emphasis);
-  
-  /* Color tokens */
-  --_bi-color-primary: var(--color-action-primary);
-  --_bi-color-contrast: var(--color-contrast-on-action);
-  --_bi-color-bg-subtle: var(--color-background-primary-subtle);
-  
-  /* ─────────────────────────────────────────────────────────────────────────
-   * Size and Inset Tokens (Task 1.6 - Token-referenced sizing)
-   * 
-   * These use --_bi-* naming convention per task requirements.
-   * References generated component tokens from ComponentTokens.web.css.
-   * @see Requirements 6.1, 6.2, 6.3
-   * ───────────────────────────────────────────────────────────────────────── */
-  
-  /* Inset (padding) tokens - reference generated component tokens */
-  --_bi-inset-large: var(--buttonicon-inset-large);
-  --_bi-inset-medium: var(--buttonicon-inset-medium);
-  --_bi-inset-small: var(--buttonicon-inset-small);
-  
-  /* Size (width/height) tokens - reference generated component tokens */
-  /* These will be generated by the component token pipeline in future */
-  --_bi-size-large: var(--buttonicon-size-large);
-  --_bi-size-medium: var(--buttonicon-size-medium);
-  --_bi-size-small: var(--buttonicon-size-small);
-  
-  /* Touch target token reference */
-  --_bi-touch-target: var(--tap-area-recommended);
-}
-
-/* ==========================================================================
-   Base Button Styles
-   ========================================================================== */
-
-/**
- * Base button element styling.
- * 
- * - Flexbox layout for icon centering
- * - Token-based circular shape
- * - Semantic button element with proper cursor
- * - Smooth transitions for interaction states
- * - Self-contained focus buffer margin
- * 
- * @see Requirements 3.2, 4
- */
-.button-icon {
-  /* Reset browser defaults */
-  appearance: none;
-  border: none;
-  background: transparent;
-  padding: 0;
-  font: inherit;
-  
-  /* Interaction */
-  cursor: pointer;
-  user-select: none;
-  
-  /* Flexbox centering for icon */
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  
-  /* Circular shape via radiusCircle token (50%) */
-  /* @see Requirement 3.2 */
-  border-radius: var(--_bi-radius);
-  
-  /* Focus buffer margin on all sides (4px = focus.offset + focus.width) */
-  /* This ensures focus ring is contained within component bounds */
-  /* @see Requirement 1.4 */
-  margin: var(--_bi-focus-buffer);
-  
-  /* Transitions for smooth state changes */
-  /* Uses semantic motion.buttonPress token for consistent button feedback */
-  /* @see Requirement 12.1, Requirements 3.2, 3.3, 3.4 */
-  transition: background-color var(--_bi-transition-duration) var(--_bi-transition-easing),
-              border-color var(--_bi-transition-duration) var(--_bi-transition-easing),
-              color var(--_bi-transition-duration) var(--_bi-transition-easing),
-              box-shadow var(--_bi-transition-duration) var(--_bi-transition-easing),
-              transform var(--_bi-transition-duration) var(--_bi-transition-easing);
-  
-  /* Focus outline reset (custom focus ring implemented below) */
-  outline: none;
-  
-  /* Ensure button doesn't shrink in flex containers */
-  flex-shrink: 0;
-  
-  /* Position relative for pseudo-element touch target extension */
-  position: relative;
-}
-
-
-/* ==========================================================================
-   Size Variants
-   ========================================================================== */
-
-/**
- * Small button (32px visual circle, 40px total with buffer)
- * 
- * - Icon size: icon.size050 (13px) - handled by icon-base component
- * - Padding: buttonIcon.inset.small (8px)
- * - Visual circle: 13 + (8 × 2) = 29px (rounded to 32px for grid alignment)
- * - Total box: 32 + 8 = 40px (with focus buffer)
- * - Touch target: Extended to tapAreaRecommended (48px) via ::after pseudo-element
- * 
- * Note: Small size requires touch target extension because the total box (40px)
- * is less than tapAreaRecommended (48px). The ::after pseudo-element creates
- * an invisible 48px hit area centered on the 32px visual button.
- * 
- * @see Requirements 1.1, 5.3, 5.4, 5.5
- * @see Requirements 6.1, 6.2, 6.3 - Token-referenced sizing
- */
-.button-icon--small {
-  /* Padding using token reference */
-  /* @see Requirement 6.2 */
-  padding: var(--_bi-inset-small);
-  
-  /* Explicit sizing using token references for consistent circular shape */
-  /* @see Requirements 6.1, 6.3 */
-  width: var(--_bi-size-small);
-  height: var(--_bi-size-small);
-  min-width: var(--_bi-size-small);
-  min-height: var(--_bi-size-small);
-}
-
-/**
- * Medium button (40px visual circle, 48px total with buffer) - Default size
- * 
- * - Icon size: icon.size075 (18px) - handled by icon-base component
- * - Padding: buttonIcon.inset.medium (10px)
- * - Visual circle: 18 + (10 × 2) = 38px (rounded to 40px for grid alignment)
- * - Total box: 40 + 8 = 48px (with focus buffer)
- * - Touch target: Meets tapAreaRecommended (48px) exactly
- * 
- * Note: Medium size meets the 48px touch target requirement without extension
- * because the visual button (40px) plus focus buffer margin (4px each side)
- * equals exactly 48px total interactive area.
- * 
- * @see Requirements 1.2, 5.2
- * @see Requirements 6.1, 6.2, 6.3 - Token-referenced sizing
- */
-.button-icon--medium {
-  /* Padding using token reference */
-  /* @see Requirement 6.2 */
-  padding: var(--_bi-inset-medium);
-  
-  /* Explicit sizing using token references for consistent circular shape */
-  /* @see Requirements 6.1, 6.3 */
-  width: var(--_bi-size-medium);
-  height: var(--_bi-size-medium);
-  min-width: var(--_bi-size-medium);
-  min-height: var(--_bi-size-medium);
-}
-
-/**
- * Large button (48px visual circle, 56px total with buffer)
- * 
- * - Icon size: icon.size100 (24px) - handled by icon-base component
- * - Padding: buttonIcon.inset.large (12px)
- * - Visual circle: 24 + (12 × 2) = 48px
- * - Total box: 48 + 8 = 56px (with focus buffer)
- * - Touch target: Exceeds tapAreaRecommended (48px)
- * 
- * Note: Large size exceeds the 48px touch target requirement without extension
- * because the visual button alone (48px) already meets the minimum, and the
- * focus buffer margin adds an additional 8px (4px each side) for 56px total.
- * 
- * @see Requirements 1.3, 5.1
- * @see Requirements 6.1, 6.2, 6.3 - Token-referenced sizing
- */
-.button-icon--large {
-  /* Padding using token reference */
-  /* @see Requirement 6.2 */
-  padding: var(--_bi-inset-large);
-  
-  /* Explicit sizing using token references for consistent circular shape */
-  /* @see Requirements 6.1, 6.3 */
-  width: var(--_bi-size-large);
-  height: var(--_bi-size-large);
-  min-width: var(--_bi-size-large);
-  min-height: var(--_bi-size-large);
-}
-
-/* ==========================================================================
-   Style Variants
-   ========================================================================== */
-
-/**
- * Primary button style (filled background)
- * 
- * - Background: color.action.primary (cyan300 Standard / teal300 WCAG)
- * - Icon: color.contrast.onAction (black500 Standard / white100 WCAG)
- * - Border: none
- * - Highest visual emphasis
- * 
- * @see Requirement 2.1
- */
-.button-icon--primary {
-  background-color: var(--_bi-color-primary);
-  color: var(--_bi-color-contrast);
-  border: none;
-}
-
-/**
- * Secondary button style (outlined)
- * 
- * - Background: transparent
- * - Icon: color.primary (purple300)
- * - Border: borderDefault (1px) solid color.primary
- * - Medium visual emphasis
- * 
- * Border shift prevention technique:
- * - Reserve borderEmphasis (2px) space with transparent border
- * - Simulate borderDefault (1px) with inset box-shadow
- * - On hover/pressed, transition to actual border (no layout shift)
- * 
- * @see Requirements 2.2, 9.1, 9.2, 9.3
- */
-.button-icon--secondary {
-  background-color: transparent;
-  color: var(--_bi-color-primary);
-  
-  /* Reserve 2px border space (borderEmphasis) with transparent border */
-  border: var(--_bi-border-emphasis) solid transparent;
-  
-  /* Simulate 1px border (borderDefault) with inset box-shadow */
-  /* This prevents layout shift when border changes to 2px on hover */
-  box-shadow: inset 0 0 0 var(--_bi-border-default) var(--_bi-color-primary);
-}
-
-/**
- * Tertiary button style (text-only / ghost)
- * 
- * - Background: transparent
- * - Icon: color.primary (purple300)
- * - Border: none
- * - Lowest visual emphasis
- * 
- * @see Requirement 2.3
- */
-.button-icon--tertiary {
-  background-color: transparent;
-  color: var(--_bi-color-primary);
-  border: none;
-}
-
-/* ==========================================================================
-   Icon Container Styling
-   ========================================================================== */
-
-/**
- * Icon container styling.
- * 
- * - Flexbox for centering
- * - Inherits color from button variant
- * - Marked as decorative (aria-hidden) in HTML
- * 
- * @see Requirement 4.5
- */
-.button-icon__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: inherit;
-  
-  /* Ensure icon doesn't affect button sizing - use inherit to avoid typography detection */
-  line-height: inherit;
-}
-
-/* ==========================================================================
-   Interaction States - Hover
-   ========================================================================== */
-
-/**
- * Primary variant hover state.
- * 
- * Uses blend utility calculated color via CSS custom property.
- * Applies blend.hoverDarker (8% darker) to background.
- * 
- * @see Requirement 7.1
- * @see Requirements 1.1, 1.5, 1.6 - Blend utility adoption
- */
-.button-icon--primary:hover {
-  /* Apply blend utility calculated hover color */
-  /* Uses --_bi-hover-bg set by JavaScript blend utilities */
-  background-color: var(--_bi-hover-bg);
-}
-
-/**
- * Secondary variant hover state.
- * 
- * - Background: color.background.primary.subtle (purple100)
- * - Border: borderEmphasis (2px) with blend utility calculated color
- * - Icon: Uses blend utility calculated color
- * 
- * @see Requirement 7.2
- * @see Requirements 1.1, 1.5, 1.6 - Blend utility adoption
- */
-.button-icon--secondary:hover {
-  background-color: var(--_bi-color-bg-subtle);
-  
-  /* Transition from box-shadow to actual border (no layout shift) */
-  /* Use blend utility calculated color for border */
-  border-color: var(--_bi-hover-bg);
-  box-shadow: none;
-  
-  /* Apply blend utility calculated color to icon */
-  color: var(--_bi-hover-bg);
-}
-
-/**
- * Tertiary variant hover state.
- * 
- * Uses blend utility calculated color for icon.
- * Background remains transparent.
- * 
- * @see Requirement 7.3
- * @see Requirements 1.1, 1.5, 1.6 - Blend utility adoption
- */
-.button-icon--tertiary:hover {
-  /* Apply blend utility calculated color to icon */
-  color: var(--_bi-hover-bg);
-}
-
-/* ==========================================================================
-   Interaction States - Pressed/Active
-   ========================================================================== */
-
-/**
- * Primary variant pressed state.
- * 
- * Uses blend utility calculated color via CSS custom property.
- * Applies blend.pressedDarker (12% darker) to background.
- * 
- * @see Requirement 8.1
- * @see Requirements 1.2, 1.5, 1.6 - Blend utility adoption
- */
-.button-icon--primary:active {
-  /* Apply blend utility calculated pressed color */
-  /* Uses --_bi-pressed-bg set by JavaScript blend utilities */
-  background-color: var(--_bi-pressed-bg);
-}
-
-/**
- * Secondary variant pressed state.
- * 
- * - Background: color.background.primary.subtle (purple100)
- * - Border: borderEmphasis (2px) with blend utility calculated color
- * - Icon: Uses blend utility calculated color
- * 
- * @see Requirement 8.2
- * @see Requirements 1.2, 1.5, 1.6 - Blend utility adoption
- */
-.button-icon--secondary:active {
-  background-color: var(--_bi-color-bg-subtle);
-  
-  /* Maintain actual border (no box-shadow) */
-  /* Use blend utility calculated color for border */
-  border-color: var(--_bi-pressed-bg);
-  box-shadow: none;
-  
-  /* Apply blend utility calculated color to icon */
-  color: var(--_bi-pressed-bg);
-}
-
-/**
- * Tertiary variant pressed state.
- * 
- * Uses blend utility calculated color for icon.
- * Background remains transparent.
- * 
- * @see Requirement 8.3
- * @see Requirements 1.2, 1.5, 1.6 - Blend utility adoption
- */
-.button-icon--tertiary:active {
-  /* Apply blend utility calculated color to icon */
-  color: var(--_bi-pressed-bg);
-}
-
-/* ==========================================================================
-   Focus State
-   ========================================================================== */
-
-/**
- * Focus state (keyboard navigation only).
- * 
- * - Uses :focus-visible for keyboard-only focus indicators
- * - Outline: accessibility.focus.width (2px)
- * - Color: accessibility.focus.color (primary/purple300)
- * - Offset: accessibility.focus.offset (2px)
- * - Focus ring contained within focus buffer (no overflow)
- * - Meets WCAG 2.1 AA contrast requirements (3:1 minimum)
- * 
- * @see Requirements 6.1, 6.2, 6.3, 6.4, 6.5
- */
-.button-icon:focus-visible {
-  outline: var(--_bi-focus-width) solid var(--_bi-focus-color);
-  outline-offset: var(--_bi-focus-offset);
-}
-
-/**
- * Remove focus outline on mouse click.
- * 
- * :focus-visible handles this automatically in modern browsers,
- * but this provides fallback for older browsers.
- * 
- * @see Requirement 6.4
- */
-.button-icon:focus:not(:focus-visible) {
-  outline: none;
-}
-
-/* ==========================================================================
-   Touch Target Extension (Small Size)
-   ========================================================================== */
-
-/**
- * Touch target extension for small size.
- * 
- * Small size (32px visual + 8px buffer = 40px total) needs touch target
- * extended to tapAreaRecommended (48px) using invisible hit area.
- * 
- * Uses ::after pseudo-element to create transparent clickable area
- * that extends beyond the visual button bounds.
- * 
- * Calculation:
- * - Small visual button: 32px × 32px
- * - Focus buffer margin: 4px on each side (not part of button element)
- * - Total component box: 32px + 8px = 40px
- * - Required touch target: 48px (tapAreaRecommended)
- * - Extension needed: (48 - 32) / 2 = 8px per side beyond visual button
- * 
- * The pseudo-element is positioned relative to the button element (32px),
- * not the total component box, so we center a 48px area on the 32px button.
- * 
- * @see Requirements 5.3, 5.4, 5.5
- * @see Requirements 6.1, 6.3 - Token-referenced sizing
- */
-.button-icon--small::after {
-  content: '';
-  position: absolute;
-  
-  /* Center the touch target extension on the visual button */
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  
-  /* Extend to tapAreaRecommended using token reference */
-  /* This creates an invisible 48px × 48px hit area centered on the 32px button */
-  /* @see Requirements 6.1, 6.3 */
-  width: var(--_bi-touch-target);
-  height: var(--_bi-touch-target);
-  
-  /* Invisible but clickable - transparent background */
-  background: transparent;
-  
-  /* Circular shape to match button */
-  border-radius: 50%;
-  
-  /* Pointer events pass through to button - the pseudo-element extends */
-  /* the clickable area by being part of the button's box model */
-  /* No z-index needed as it's part of the button element */
-}
-
-/* ==========================================================================
-   Circular Shape Maintenance
-   ========================================================================== */
-
-/**
- * Ensure circular shape is maintained during all interaction states.
- * 
- * The border-radius: 50% creates a perfect circle when width equals height.
- * This rule ensures the circular shape is preserved during hover, pressed,
- * and focus states.
- * 
- * @see Requirements 7.4, 8.6
- */
-.button-icon:hover,
-.button-icon:active,
-.button-icon:focus,
-.button-icon:focus-visible {
-  border-radius: var(--_bi-radius);
-}
-
-/* ==========================================================================
-   High Contrast Mode Support
-   ========================================================================== */
-
-/**
- * Ensure buttons remain visible in Windows High Contrast Mode.
- * 
- * - Force borders for all button styles
- * - Ensure focus indicators are visible
- * - Use border.borderEmphasis (2px) and border.borderHeavy (4px) tokens
- */
-@media (prefers-contrast: high) {
-  .button-icon {
-    border: var(--_bi-border-emphasis) solid currentColor;
-  }
-  
-  .button-icon:focus-visible {
-    outline-width: 4px; /* border.borderHeavy equivalent */
-  }
-}
-
-/* ==========================================================================
-   Reduced Motion Support
-   ========================================================================== */
-
-/**
- * Respect user preference for reduced motion.
- * 
- * - Remove transitions and animations
- * - Maintain functionality without motion
- * 
- * @see Requirement 12.2
- */
-@media (prefers-reduced-motion: reduce) {
-  .button-icon {
-    transition: none;
-  }
-}
-
-/* ==========================================================================
-   Print Styles
-   ========================================================================== */
-
-/**
- * Optimize button appearance for print.
- * 
- * - Remove interactive states
- * - Ensure visibility with border
- * - Simplify visual styling
- */
-@media print {
-  .button-icon {
-    background-color: transparent !important;
-    color: var(--color-print-default) !important;
-    border: var(--_bi-border-default) solid var(--color-print-default) !important;
-    box-shadow: none !important;
-  }
-}