@helpwave/hightide/dist/css/uncompiled/globals.css

helpwave's component and theming library

@import 'tailwindcss';

/* variants */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
@custom-variant light (&:where([data-theme=light], [data-theme=light] *));

/* utilities */
@utility col {
  @apply flex flex-col gap-y-2;
}

@utility row {
  @apply flex flex-row gap-x-2;
}

@layer utilities {
  .animation-delay-0 {
    animation-delay: 0ms;
  }

  .animation-delay-100 {
    animation-delay: 100ms;
  }

  .animation-delay-200 {
    animation-delay: 200ms;
  }

  .animation-delay-300 {
    animation-delay: 300ms;
  }

  .animation-delay-400 {
    animation-delay: 400ms;
  }

  .animation-delay-500 {
    animation-delay: 500ms;
  }

  .animation-delay-1000 {
    animation-delay: 1000ms;
  }

  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes bigLeftUp {
    0%, 25% {
      stroke-dashoffset: 1000;
    }
    50%, 75%, 100% {
      stroke-dashoffset: 0;
    }
  }

  @keyframes bigRightDown {
    0%, 25%, 50% {
      stroke-dashoffset: 0;
    }
    75%, 100% {
      stroke-dashoffset: -1000;
    }
  }

  @keyframes smallLeftUp {
    0%, 25%, 50% {
      stroke-dashoffset: 1000;
    }
    75%, 100% {
      stroke-dashoffset: 0;
    }
  }

  @keyframes smallRightDown {
    0%, 25% {
      stroke-dashoffset: 0;
    }
    50%, 75%, 100% {
      stroke-dashoffset: -1000;
    }
  }

  .animate-fade {
    animation: fade-out 3s ease-in-out;
  }

  .animate-wave-big-left-up {
    animation: bigLeftUp 1.7s ease-in infinite normal;
  }

  .animate-wave-big-right-down {
    animation: bigRightDown 1.7s ease-in infinite reverse;
  }

  .animate-wave-small-left-up {
    animation: smallLeftUp 1.7s ease-in infinite normal;
  }

  .animate-wave-small-right-down {
    animation: smallRightDown 1.7s ease-in infinite reverse;
  }

  .animate-tooltip-fade-in {
    animation: fade-in 0.2s ease-in-out forwards;
  }

  .animate-tooltip-fade-out {
    animation: fade-in 0.2s ease-in-out forwards;
  }

  .shadow-around {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.02),
    0 -2px 2px 0 rgba(0, 0, 0, 0.02),
    2px 0 2px 0 rgba(0, 0, 0, 0.02),
    -2px 0 2px 0 rgba(0, 0, 0, 0.02);
  }

  .shadow-around-md {
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.02),
    0 -5px 5px 0 rgba(0, 0, 0, 0.02),
    5px 0 5px 0 rgba(0, 0, 0, 0.02),
    -5px 0 5px 0 rgba(0, 0, 0, 0.02);
  }

  .shadow-around-lg {
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.02),
    0 -10px 10px 0 rgba(0, 0, 0, 0.02),
    10px 0 10px 0 rgba(0, 0, 0, 0.02),
    -10px 0 10px 0 rgba(0, 0, 0, 0.02);
  }

  .shadow-around-xl {
    box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.02),
    0 -20px 20px 0 rgba(0, 0, 0, 0.02),
    20px 0 20px 0 rgba(0, 0, 0, 0.02),
    -20px 0 20px 0 rgba(0, 0, 0, 0.02);
  }
}

/* The theme variables */
@theme {
  /* Colors for with default values of the light theme */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-gray-25: #F8F8F8;
  --color-gray-50: #F2F2F2;
  --color-gray-100: #E6E6E6;
  --color-gray-200: #CCCCCC;
  --color-gray-300: #B3B3B3;
  --color-gray-400: #999999;
  --color-gray-500: #888888;
  --color-gray-600: #666666;
  --color-gray-700: #4D4D4D;
  --color-gray-800: #333333;
  --color-gray-900: #1A1A1A;
  --color-gray-950: #0D0D0D;

  --color-green-100: #D1EFD8;
  --color-green-500: #69CB81;
  --color-green-900: #2C5536;

  --color-orange-100: #FBECD9;
  --color-orange-200: #F7D8B3;
  --color-orange-500: #EA9E40;

  --color-purple-50: #EFE6FD;
  --color-purple-100: #CEB0FA;
  --color-purple-400: #8470c5;
  --color-purple-500: #694BB4;

  --color-blue-50: #F6FAFF;
  --color-blue-100: #D6E3F9;
  --color-blue-200: #99B9EF;
  --color-blue-500: #3272DF;
  --color-blue-600: #285BB2;
  --color-blue-800: #1A4080;

  --color-red-50: #FFF9F9;
  --color-red-100: #FBE0E2;
  --color-red-200: #F7C2C5;
  --color-red-300: #F4A3A7;
  --color-red-400: #E3798A;
  --color-red-500: #DC576D;
  --color-red-900: #5C252E;

  --color-primary: var(--color-purple-500);
  --color-on-primary: #FFFFFF;
  --color-secondary: #11243E;
  --color-on-secondary: #FFFFFF;
  --color-warning: #EA9E40;
  --color-on-warning: #FFFFFF;
  --color-positive: #69CB81;
  --color-on-positive: #FFFFFF;
  --color-negative: #DC576D;
  --color-on-negative: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-on-surface: #1A1A1A;
  --color-surface-variant: #F8F8F8;
  --color-surface-warning: #FBECD9;
  --color-highlight: #3272DF;
  --color-background: #EEEEEE;
  --color-on-background: #1A1A1A;

  --color-female: #E3798A;
  --color-female-outline: #F4A3A7;
  --color-female-surface: #FBE0E2;
  --color-female-background: #FFF9F9;

  --color-male: #3272DF;
  --color-male-outline: #99B9EF;
  --color-male-surface: #D6E3F9;
  --color-male-background: #F6FAFF;

  --color-neutral: #4D4D4D;
  --color-neutral-outline: #B3B3B3;
  --color-neutral-surface: #E6E6E6;
  --color-neutral-background: #F8F8F8;

  --color-text-primary: #1A1A1A;
  --color-text-secondary: #666666;
  --color-text-tertiary: #B3B3B3;
  --color-text-highlight: #3272DF;
  --color-icon-primary: #1A1A1A;
  --color-icon-secondary: #666666;
  --color-icon-highlight: #3272DF;
  --color-divider: #E6E6E6;
  --color-description: #555555;
  --color-outline: #E6E6E6;
  --color-outline-variant: #CCCCCC;
  --color-disabled-background: #BBBBBB;
  --color-disabled-text: #555555;
  --color-disabled-icon: #555555;
  --color-disabled-outline: #555555;

  --color-button-solid-primary-background: var(--color-purple-500);
  --color-button-solid-primary-text: #FFFFFF;
  --color-button-solid-primary-icon: #FFFFFF;
  --color-button-solid-secondary-background: #EFE6FD;
  --color-button-solid-secondary-text: var(--color-purple-500);
  --color-button-solid-secondary-icon: var(--color-purple-500);
  --color-button-solid-tertiary-background: #F2F2F2;
  --color-button-solid-tertiary-icon: #888888;
  --color-button-solid-tertiary-text: #888888;
  --color-button-outline-primary-outline: var(--color-purple-500);
  --color-button-outline-primary-icon: var(--color-purple-500);
  --color-button-outline-primary-text: var(--color-purple-500);
  --color-button-solid-positive-background: #69CB81;
  --color-button-solid-positive-icon: #FFFFFF;
  --color-button-solid-positive-text: #FFFFFF;
  --color-button-solid-warning-background: #EA9E40;
  --color-button-solid-warning-icon: #FFFFFF;
  --color-button-solid-warning-text: #FFFFFF;
  --color-button-solid-negative-background: #DC576D;
  --color-button-solid-negative-icon: #FFFFFF;
  --color-button-solid-negative-text: #FFFFFF;

  --color-button-text-hover-background: #E1E1E1;
  --color-button-text-neutral-text: #333333;
  --color-button-text-neutral-icon: #333333;
  --color-button-text-negative-text: #DC576D;
  --color-button-text-negative-icon: #DC576D;

  --color-menu-background: #FFFFFF;
  --color-menu-text: #1A1A1A;
  --color-menu-border: #999999;

  --color-tag-default-background: #F6FAFF;
  --color-tag-default-text: #1A4080;
  --color-tag-default-icon: #1A4080;
  --color-tag-dark-background: #333333;
  --color-tag-dark-text: #FFFFFF;
  --color-tag-dark-icon: #FFFFFF;
  --color-tag-green-background: #E2E9DB;
  --color-tag-green-text: #7A977E;
  --color-tag-green-icon: #7A977E;
  --color-tag-yellow-background: #FEEACB;
  --color-tag-yellow-text: #C79345;
  --color-tag-yellow-icon: #C79345;
  --color-tag-red-background: #FEE0DD;
  --color-tag-red-text: #D67268;
  --color-tag-red-icon: #D67268;
  --color-tag-blue-background: #F6FAFF;
  --color-tag-blue-text: #1A4080;
  --color-tag-blue-icon: #1A4080;
  --color-tag-pink-background: #CEA3B8;
  --color-tag-pink-text: #CE75A0;
  --color-tag-pink-icon: #CE75A0;

  --color-tabel-header-background: #F6FAFF;

  --color-text-image-primary-background: var(--color-purple-500);
  --color-text-image-primary-text: #FFFFFF;
  --color-text-image-secondary-background: #3171DE;
  --color-text-image-secondary-text: #FFFFFF;
  --color-text-image-dark-background: #11243E;
  --color-text-image-dark-text: #FFFFFF;

  /* breakpoints */
  --breakpoint-tablet: 48rem; /* 768px for 16px font-size */
  --breakpoint-desktop: 64rem; /* 1024px for 16px font-size*/
  /* fonts */
  --font-inter: 'Inter', sans-serif;
  --font-space: 'Space Grotesk', sans-serif;
}

/* Overrides of the dark theme */
@layer base {
  /* Here are overrides for the light theme */
  @variant dark {
    --color-primary: var(--color-purple-400);

    --color-surface: #333333;
    --color-on-surface: #EEEEEE;
    --color-surface-variant: #494949;
    --color-surface-warning: #FBECD9;
    --color-highlight: #3272DF;
    --color-background: #1A1A1A;
    --color-on-background: #EEEEEE;

    --color-neutral: #4D4D4D;
    --color-neutral-outline: #B3B3B3;
    --color-neutral-surface: #E6E6E6;
    --color-neutral-background: #F8F8F8;

    --color-text-primary: #EEEEEE;
    --color-text-secondary: #666666;
    --color-text-tertiary: #B3B3B3;
    --color-text-highlight: #3272DF;
    --color-icon-primary: #EEEEEE;
    --color-icon-secondary: #666666;
    --color-icon-highlight: #3272DF;
    --color-description: #999999;

    --color-disabled-background: #555555;
    --color-disabled-text: #888888;

    --color-button-text-hover-background: #383838;
    --color-button-text-neutral-text: #EEEEEE;
    --color-button-text-neutral-icon: #EEEEEE;

    --color-menu-background: #333333;
    --color-menu-text: #EEEEEE;
    --color-menu-border: #999999;

    --color-tabel-header-background: #F6FAFF;
  }
}

/* Styles that can be overwritten by utils */
@layer components {
  .btn-sm {
    @apply row items-center justify-center gap-x-1 px-[0.625rem] py-[0.25rem] rounded-[0.375rem];
  }

  .btn-md {
    @apply row items-center justify-center gap-x-2 px-[0.75rem] py-[0.5rem] rounded-[0.375rem];
  }

  .btn-lg {
    @apply row items-center justify-center gap-x-2 px-[1rem] py-[0.675rem] rounded-[0.375rem];
  }

  .card-sm {
    @apply col gap-y-2 bg-surface text-on-surface px-2 py-1 rounded;
  }

  .card-md {
    @apply col gap-y-2 bg-surface text-on-surface px-4 py-2 rounded-md;
  }

  .card-lg {
    @apply col gap-y-2 bg-surface text-on-surface px-8 py-4 rounded-lg;
  }

  .chip {
    @apply row gap-x-1 items-center justify-center px-2 py-1 rounded-md;
  }

  .chip-full {
    @apply row gap-x-1 items-center justify-center px-2 py-1 rounded-full;
  }

  .section-padding-x {
    @apply px-6 tablet:px-12 desktop:px-24;
  }

  .section-padding-y {
    @apply py-16;
  }

  .section-padding {
    @apply px-6 tablet:px-12 desktop:px-24 py-16;
  }
}

@layer components {
  html, main {
    @apply bg-background text-on-background;
  }

  button {
    @apply cursor-pointer;
  }

  .textstyle-title-3xl {
    @apply text-5xl font-space font-bold;
  }

  .textstyle-title-2xl {
    @apply text-4xl font-space font-bold;
  }

  .textstyle-title-xl {
    @apply text-3xl font-space font-bold;
  }

  .textstyle-title-lg {
    @apply text-2xl font-space font-bold;
  }

  .textstyle-title-md {
    @apply text-xl font-space font-bold;
  }

  .textstyle-title-normal {
    @apply text-lg font-semibold;
  }

  .textstyle-title-sm {
    @apply font-space font-bold;
  }

  .textstyle-accent {
    @apply text-sm text-gray-600 font-bold;
  }

  .textstyle-description {
    @apply text-gray-400;
  }

  .textstyle-label-lg {
    @apply text-gray-700 text-lg font-semibold;
  }

  .textstyle-label-md {
    @apply text-gray-700 font-semibold;
  }

  .textstyle-label-sm {
    @apply text-sm text-gray-700 font-semibold;
  }

  .textstyle-table-name {
    @apply text-lg font-space font-medium;
  }

  .textstyle-table-header {
    @apply text-gray-600 font-bold;
  }

  .textstyle-navigation-item {
    @apply font-bold font-space;
  }

  .textstyle-form-error {
    @apply text-negative text-sm;
  }

  .textstyle-form-description {
    @apply text-gray-500 text-sm;
  }
}