@helpwave/hightide 0.0.12 → 0.0.13

package/dist/css/uncompiled/globals.css

@@ -0,0 +1,488 @@
+@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;
+  }
+}

package/package.json

@@ -7,13 +7,14 @@
     "url": "git+https://github.com/helpwave/hightide.git"
   },
   "license": "MPL-2.0",
-  "version": "0.0.12",
-  "main": "index.js",
+  "version": "0.0.13",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "type": "module",
   "scripts": {
     "clean": "rm -rf dist",
     "build-css": "npx @tailwindcss/cli -i ./src/css/globals.css -o ./dist/css/globals.css",
-    "build": "npm run clean && tsc && npm run build-css",
+    "build": "npm run clean && tsc && npm run build-css && cp -R ./src/css/. ./dist/css/uncompiled/",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "lint": "tsc --noEmit && eslint ."
@@ -27,6 +28,7 @@
     "@tailwindcss/cli": "^4.1.7",
     "clsx": "^2.1.1",
     "lucide-react": "0.468.0",
+    "postcss": "^8.5.3",
     "prop-types": "15.8.1",
     "react-custom-scrollbars-2": "4.5.0",
     "simplebar-core": "1.3.0",