@casoon/dragonfly/tokens/transitions.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Transition Tokens
 * 
 * @property definitions for smooth theme transitions and animations.
 * These properties enable smooth interpolation between theme values.
 * 
 * @layer tokens
 */

@layer tokens {
  /* Transition Duration Properties */
  @property --transition-fast {
    inherits: true;
    initial-value: 150ms;
    syntax: '<time>';
  }
  
  @property --transition-normal {
    inherits: true;
    initial-value: 250ms;
    syntax: '<time>';
  }
  
  @property --transition-slow {
    inherits: true;
    initial-value: 400ms;
    syntax: '<time>';
  }

  /* Extended Duration Properties (für Kompatibilität) */
  @property --transition-duration-fast {
    inherits: true;
    initial-value: 150ms;
    syntax: '<time>';
  }
  
  @property --transition-duration-normal {
    inherits: true;
    initial-value: 250ms;
    syntax: '<time>';
  }
  
  @property --transition-duration-slow {
    inherits: true;
    initial-value: 400ms;
    syntax: '<time>';
  }
  
  /* Transition Easing Properties */
  @property --transition-ease-out {
    inherits: true;
    initial-value: cubic-bezier(0, 0, 0.2, 1);
    syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';
  }
  
  @property --transition-ease-in {
    inherits: true;
    initial-value: cubic-bezier(0.4, 0, 1, 1);
    syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';
  }
  
  @property --transition-ease-in-out {
    inherits: true;
    initial-value: cubic-bezier(0.4, 0, 0.2, 1);
    syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';
  }

  /* Timing Function Aliases */
  @property --transition-timing-ease {
    inherits: true;
    initial-value: cubic-bezier(0.4, 0, 0.2, 1);
    syntax: '<custom-ident> | ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end';
  }
  
  /* Animatable Color Properties for Theme Transitions */
  @property --transition-bg {
    inherits: true;
    initial-value: #fff;
    syntax: '<color>';
  }
  
  @property --transition-fg {
    inherits: true;
    initial-value: #1f2937;
    syntax: '<color>';
  }
  
  @property --transition-border {
    inherits: true;
    initial-value: #e5e7eb;
    syntax: '<color>';
  }
  
  @property --transition-surface {
    inherits: true;
    initial-value: #f9fafb;
    syntax: '<color>';
  }
  
  @property --transition-accent {
    inherits: true;
    initial-value: #3b82f6;
    syntax: '<color>';
  }
  
  @property --transition-shadow-opacity {
    inherits: true;
    initial-value: 0.1;
    syntax: '<number>';
  }
  
  /* Component-Specific Transition Properties */
  @property --transition-colors {
    inherits: true;
    initial-value: background-color 250ms var(--transition-ease-out), color 250ms var(--transition-ease-out), border-color 250ms var(--transition-ease-out);
    syntax: '*';
  }
  
  @property --transition-transform {
    inherits: true;
    initial-value: transform 200ms var(--transition-ease-out);
    syntax: '*';
  }
  
  @property --transition-opacity {
    inherits: true;
    initial-value: opacity 200ms var(--transition-ease-out);
    syntax: '*';
  }
  
  @property --transition-shadow {
    inherits: true;
    initial-value: box-shadow 200ms var(--transition-ease-out);
    syntax: '*';
  }
  
  @property --transition-all {
    inherits: true;
    initial-value: all 250ms var(--transition-ease-out);
    syntax: '*';
  }
}

/* Fallback Values für Transition-Tokens */
:root {
  /* Duration Tokens */
  --transition-fast: 150ms;
  --transition-normal: 250ms;
  --transition-slow: 400ms;
  --transition-duration-fast: var(--transition-fast);
  --transition-duration-normal: var(--transition-normal);
  --transition-duration-slow: var(--transition-slow);
  
  /* Timing Functions */
  --transition-ease-out: ease-out;
  --transition-ease-in: ease-in;
  --transition-ease-in-out: ease-in-out;
  --transition-timing-ease: var(--transition-ease-in-out);
  
  /* Combined Transition Properties */
  --transition-colors: background-color var(--transition-normal) var(--transition-ease-out), 
                      color var(--transition-normal) var(--transition-ease-out), 
                      border-color var(--transition-normal) var(--transition-ease-out);
  --transition-transform: transform 200ms var(--transition-ease-out);
  --transition-opacity: opacity 200ms var(--transition-ease-out);
  --transition-shadow: box-shadow 200ms var(--transition-ease-out);
  --transition-all: all var(--transition-normal) var(--transition-ease-out);
}