@raminy/css-config/tailwind.config.css

Tailwind CSS v4 configuration with predefined themes, semantic color tokens, and SCSS utilities for theme customization and generation.

/**
 * This file is generated. Do not edit manually.
 * Run 'pnpm generate:styles-css' to generate.
 */

@import "tailwindcss";

@keyframes shake-base {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

@utility animate-shake {
  animation: shake-base 0.5s ease-in-out infinite;
  transform-origin: center;

  @variant motion-reduce {
    animation: none;
  }
}

@theme {
  --spacing-none: 0;
  --spacing-hairline: 1px;
  --spacing-3xsmall: 0.125rem;
  --spacing-2xsmall: 0.25rem;
  --spacing-xsmall: 0.5rem;
  --spacing-small: 0.75rem;
  --spacing-base: 1rem;
  --spacing-large: 1.25rem;
  --spacing-xlarge: 1.5rem;
  --spacing-2xlarge: 2rem;
  --spacing-3xlarge: 2.5rem;
  --spacing-4xlarge: 3.5rem;
}

@theme {
  --color-primary: var(--theme-primary);
  --color-primary-hover: var(--theme-primary-hover);
  --color-primary-active: var(--theme-primary-active);
  --color-primary-inverted: var(--theme-primary-inverted);
  --color-primary-inverted-hover: var(--theme-primary-inverted-hover);
  --color-primary-inverted-active: var(--theme-primary-inverted-active);
  --color-on-primary: var(--theme-on-primary);
  --color-on-primary-inverted: var(--theme-on-primary-inverted);
  --color-primary-text: var(--theme-primary-text);
  --color-secondary: var(--theme-secondary);
  --color-secondary-hover: var(--theme-secondary-hover);
  --color-secondary-active: var(--theme-secondary-active);
  --color-secondary-inverted: var(--theme-secondary-inverted);
  --color-secondary-inverted-hover: var(--theme-secondary-inverted-hover);
  --color-secondary-inverted-active: var(--theme-secondary-inverted-active);
  --color-on-secondary: var(--theme-on-secondary);
  --color-on-secondary-inverted: var(--theme-on-secondary-inverted);
  --color-default: var(--theme-default);
  --color-on-default: var(--theme-on-default);
  --color-inverted: var(--theme-inverted);
  --color-on-inverted: var(--theme-on-inverted);
  --color-surface: var(--theme-surface);
  --color-surface-hover: var(--theme-surface-hover);
  --color-surface-active: var(--theme-surface-active);
  --color-surface-inverted: var(--theme-surface-inverted);
  --color-surface-inverted-hover: var(--theme-surface-inverted-hover);
  --color-surface-inverted-active: var(--theme-surface-inverted-active);
  --color-backdrop: var(--theme-backdrop);
  --color-overlay: var(--theme-overlay);
  --color-modal: var(--theme-modal);
  --color-skeleton: var(--theme-skeleton);
  --color-on-skeleton: var(--theme-on-skeleton);
  --color-muted: var(--theme-muted);
  --color-placeholder: var(--theme-placeholder);
  --color-disabled: var(--theme-disabled);
  --color-on-disabled: var(--theme-on-disabled);
  --color-disabled-subtle: var(--theme-disabled-subtle);
  --color-on-disabled-subtle: var(--theme-on-disabled-subtle);
  --color-divider: var(--theme-divider);
  --color-divider-hover: var(--theme-divider-hover);
  --color-divider-active: var(--theme-divider-active);
  --color-divider-disabled: var(--theme-divider-disabled);
  --color-focus-ring: var(--theme-focus-ring);
  --color-shadow: var(--theme-shadow);
  --color-error: var(--theme-error);
  --color-error-hover: var(--theme-error-hover);
  --color-error-active: var(--theme-error-active);
  --color-error-inverted: var(--theme-error-inverted);
  --color-error-inverted-hover: var(--theme-error-inverted-hover);
  --color-error-inverted-active: var(--theme-error-inverted-active);
  --color-error-subtle: var(--theme-error-subtle);
  --color-on-error: var(--theme-on-error);
  --color-on-error-inverted: var(--theme-on-error-inverted);
  --color-error-secondary: var(--theme-error-secondary);
  --color-error-secondary-hover: var(--theme-error-secondary-hover);
  --color-error-secondary-active: var(--theme-error-secondary-active);
  --color-on-error-secondary: var(--theme-on-error-secondary);
  --color-error-text: var(--theme-error-text);
  --color-success: var(--theme-success);
  --color-success-hover: var(--theme-success-hover);
  --color-success-active: var(--theme-success-active);
  --color-success-inverted: var(--theme-success-inverted);
  --color-success-inverted-hover: var(--theme-success-inverted-hover);
  --color-success-inverted-active: var(--theme-success-inverted-active);
  --color-on-success: var(--theme-on-success);
  --color-on-success-inverted: var(--theme-on-success-inverted);
  --color-success-secondary: var(--theme-success-secondary);
  --color-success-secondary-hover: var(--theme-success-secondary-hover);
  --color-success-secondary-active: var(--theme-success-secondary-active);
  --color-on-success-secondary: var(--theme-on-success-secondary);
  --color-success-text: var(--theme-success-text);
  --color-warning: var(--theme-warning);
  --color-on-warning: var(--theme-on-warning);
  --color-link: var(--theme-link);
  --color-link-hover: var(--theme-link-hover);
  --color-link-active: var(--theme-link-active);
}