theme.css

@layer base {
  :root {
    --klerosUIComponentsPrimaryPurple: #4d00b4;
    --klerosUIComponentsSecondaryPurple: #9013fe;
    --klerosUIComponentsMediumPurple: #f8f1ff;
    --klerosUIComponentsLightPurple: #fbf9fe;
    --klerosUIComponentsPrimaryBlue: #009aff;
    --klerosUIComponentsSecondaryBlue: #7bcbff;
    --klerosUIComponentsMediumBlue: #f0f9ff;
    --klerosUIComponentsLightBlue: #fcfeff;
    --klerosUIComponentsPrimaryText: #333333;
    --klerosUIComponentsSecondaryText: #999999;
    --klerosUIComponentsStroke: #e5e5e5;
    --klerosUIComponentsLightGrey: #fafafa;

    --klerosUIComponentsWhiteBackground: #ffffff;
    --klerosUIComponentsLightBackground: #fafbfc;

    --klerosUIComponentsDefaultShadow: #00000002;
    --klerosUIComponentsHoveredShadow: #00000002;

    --klerosUIComponentsSuccess: #00c42b;
    --klerosUIComponentsSuccessLight: #f0fbf2;
    --klerosUIComponentsWarning: #ff9900;
    --klerosUIComponentsWarningLight: #fff9f0;
    --klerosUIComponentsError: #f60c36;
    --klerosUIComponentsErrorLight: #fef0f3;
    --klerosUIComponentsTint: #d14eff;
    --klerosUIComponentsTintMedium: #401d6c;
    --klerosUIComponentsTintPurple: #f4f0fa;

    --klerosUIComponentsTransitionSpeed: 0.25s;

    --klerosUIComponentsBaseRadius: 3px;
  }

  :root.dark {
    --klerosUIComponentsName: dark;
    --klerosUIComponentsPrimaryPurple: #7e1bd4;
    --klerosUIComponentsSecondaryPurple: #b45fff;
    --klerosUIComponentsMediumPurple: #390f6c;
    --klerosUIComponentsLightPurple: #fcfbff;
    --klerosUIComponentsPrimaryBlue: #6cc5ff;
    --klerosUIComponentsSecondaryBlue: #a5dbff;
    --klerosUIComponentsMediumBlue: #2e206c;
    --klerosUIComponentsLightBlue: #2a1260;
    --klerosUIComponentsPrimaryText: #daf0ff;
    --klerosUIComponentsSecondaryText: #becce5;
    --klerosUIComponentsStroke: #392c74;
    --klerosUIComponentsLightGrey: #2d1865;

    --klerosUIComponentsWhiteBackground: #220050;
    --klerosUIComponentsLightBackground: #1b003f;

    --klerosUIComponentsDefaultShadow: #00000000;
    --klerosUIComponentsHoveredShadow: #42498f80;

    --klerosUIComponentsSuccess: #65dc7f;
    --klerosUIComponentsSuccessLight: #32355b;
    --klerosUIComponentsWarning: #ffc46b;
    --klerosUIComponentsWarningLight: #451f54;
    --klerosUIComponentsError: #ff5a78;
    --klerosUIComponentsErrorLight: #360652;
    --klerosUIComponentsTint: #ddb6ff;
    --klerosUIComponentsTintMedium: #401d6c;
    --klerosUIComponentsTintPurple: #2f0960;

    --klerosUIComponentsTransitionSpeed: 0.25s;
  }
}

@theme {
  --breakpoint-lg: 56.25rem;
  --color-klerosUIComponentsPrimaryPurple: var(
    --klerosUIComponentsPrimaryPurple
  );
  --color-klerosUIComponentsSecondaryPurple: var(
    --klerosUIComponentsSecondaryPurple
  );
  --color-klerosUIComponentsMediumPurple: var(--klerosUIComponentsMediumPurple);
  --color-klerosUIComponentsLightPurple: var(--klerosUIComponentsLightPurple);
  --color-klerosUIComponentsPrimaryBlue: var(--klerosUIComponentsPrimaryBlue);
  --color-klerosUIComponentsSecondaryBlue: var(
    --klerosUIComponentsSecondaryBlue
  );
  --color-klerosUIComponentsMediumBlue: var(--klerosUIComponentsMediumBlue);
  --color-klerosUIComponentsLightBlue: var(--klerosUIComponentsLightBlue);
  --color-klerosUIComponentsPrimaryText: var(--klerosUIComponentsPrimaryText);
  --color-klerosUIComponentsSecondaryText: var(
    --klerosUIComponentsSecondaryText
  );
  --color-klerosUIComponentsStroke: var(--klerosUIComponentsStroke);
  --color-klerosUIComponentsLightGrey: var(--klerosUIComponentsLightGrey);

  --color-klerosUIComponentsWhiteBackground: var(
    --klerosUIComponentsWhiteBackground
  );
  --color-klerosUIComponentsLightBackground: var(
    --klerosUIComponentsLightBackground
  );
  --color-klerosUIComponentsDefaultShadow: var(
    --klerosUIComponentsDefaultShadow
  );
  --color-klerosUIComponentsHoveredShadow: var(
    --klerosUIComponentsHoveredShadow
  );
  --color-klerosUIComponentsSuccess: var(--klerosUIComponentsSuccess);
  --color-klerosUIComponentsSuccessLight: var(--klerosUIComponentsSuccessLight);
  --color-klerosUIComponentsWarning: var(--klerosUIComponentsWarning);
  --color-klerosUIComponentsWarningLight: var(--klerosUIComponentsWarningLight);
  --color-klerosUIComponentsError: var(--klerosUIComponentsError);
  --color-klerosUIComponentsErrorLight: var(--klerosUIComponentsErrorLight);
  --color-klerosUIComponentsTint: var(--klerosUIComponentsTint);
  --color-klerosUIComponentsTintMedium: var(--klerosUIComponentsTintMedium);
  --color-klerosUIComponentsTintPurple: var(--klerosUIComponentsTintPurple);
  --color-klerosUIComponentsTransitionSpeed: var(
    --klerosUIComponentsTransitionSpeed
  );

  --radius-base: var(--klerosUIComponentsBaseRadius);

  --default-transition-duration: var(--klerosUIComponentsTransitionSpeed);

  /* Animations */
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }
  --animate-fade-in: fadeIn 0.3s ease-in-out;

  @keyframes fadeOut {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 0;
    }
  }
  --animate-fade-out: fadeOut 0.3s ease-in-out;

  @keyframes bounceIn {
    0% {
      transform: translateY(100%);
    }
    50% {
      transform: translateY(-5px);
    }
    100% {
      transform: translateY(0);
    }
  }
  --animate-bounce-in: bounceIn 0.2s ease-out;

  @keyframes scaleIn {
    0% {
      transform: scaleY(0);
    }

    100% {
      transform: scaleY(1);
    }
  }
  --animate-scale-in: scaleIn var(--klerosUIComponentsTransitionSpeed) ease;

  @keyframes scaleOut {
    0% {
      transform: scaleY(1);
    }

    100% {
      transform: scaleY(0);
    }
  }
  --animate-scale-out: slideOut var(--klerosUIComponentsTransitionSpeed) ease;

  @keyframes progressFill {
    0% {
      stroke-dasharray: 0 200%;
    }
  }
  --animate-progress-fill: progressFill 1s ease-out forwards;

  @keyframes breathe {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.3);
    }
    100% {
      transform: scale(1);
    }
  }
  --animate-breathing: breathe 2s ease-out infinite normal;

  @keyframes loading {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }
  --animate-loading: loading 2s ease-in-out infinite normal;

  --ease-ease: cubic-bezier(0.25, 0.1, 0.25, 1);

  --shadow-default: 0px 2px 3px var(--klerosUIComponentsDefaultShadow);
  --shadow-input: 0px 0px 6px var(--klerosUIComponentsPrimaryBlue);
}