@unopsitg/ux 21.0.2

package/assets/tailwind.css

@@ -0,0 +1,679 @@
+@import "tailwindcss";
+
+@plugin 'tailwindcss-primeui';
+
+@custom-variant dark (&:where([class*="app-dark"], [class*="app-dark"] *));
+
+/*
+  Default border color (Tailwind v4 migration note) + app-dark: use Prime content border
+  so implicit borders on dark surfaces are not left as light gray-200.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+
+  :where([class*="app-dark"], [class*="app-dark"] *) {
+    border-color: var(--p-content-border-color, currentcolor);
+  }
+}
+
+@theme {
+
+  --font-sans: "Noto Sans", sans-serif;
+  
+  --text-xs: var(--font-size-xs);
+  --text-sm: var(--font-size-sm);
+  --text-base: var(--font-size-base);
+  --text-lg: var(--font-size-lg);
+  --text-xl: var(--font-size-xl);
+  --text-2xl: var(--font-size-2xl);
+  --text-3xl: var(--font-size-3xl);
+  --text-4xl: var(--font-size-4xl);
+
+  --color-*: initial;
+
+  --radius-circle: 50%;
+
+  --breakpoint-sm: 576px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 992px;
+  --breakpoint-xl: 1200px;
+  --breakpoint-2xl: 1920px;
+
+  --animate-infinite-scroll: infinite-scroll 25s linear infinite;
+  --animate-float: float 3.5s ease-in-out infinite;
+  --animate-wiggle: wiggle 3.5s ease-in-out infinite;
+
+  @keyframes infinite-scroll {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(-100%);
+    }
+  }
+  @keyframes float {
+    0%,
+    100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-6px) scale(1.005);
+    }
+  }
+  @keyframes wiggle {
+    0%,
+    30%,
+    100% {
+      transform: rotate(0deg);
+    }
+    10%,
+    20% {
+      transform: rotate(-1deg);
+    }
+    15%,
+    25% {
+      transform: rotate(1deg);
+    }
+  }
+
+  --animate-fade-in: fade-in 0.35s ease-out both;
+  --animate-fade-in-up: fade-in-up 0.4s ease-out both;
+  --animate-fade-in-down: fade-in-down 0.35s ease-out both;
+  --animate-scale-in-subtle: scale-in-subtle 0.35s ease-out both;
+  --animate-slide-in-right: slide-in-right 0.4s ease-out both;
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes fade-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes fade-in-down {
+    from {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes scale-in-subtle {
+    from {
+      opacity: 0;
+      transform: scale(0.97);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  @keyframes slide-in-right {
+    from {
+      opacity: 0;
+      transform: translateX(16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  /* Smooth, liquid settle-in (opacity + drift + de-blur) */
+  --animate-enter-liquid: enter-liquid 0.8s cubic-bezier(0.2, 0.85, 0.15, 1) both;
+  @keyframes enter-liquid {
+    0% {
+      opacity: 0;
+      filter: blur(5px);
+      transform: translateY(14px) scale(0.99);
+    }
+    45% {
+      opacity: 1;
+      filter: blur(0.5px);
+    }
+    100% {
+      opacity: 1;
+      filter: blur(0);
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  /* Child panel: gentle vertical reveal when expanding in place */
+  --animate-enter-liquid-reveal: enter-liquid-reveal 0.55s cubic-bezier(0.2, 0.85, 0.2, 1) both;
+  @keyframes enter-liquid-reveal {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* AI card ambient background (optional Tailwind hooks; `ux-ai-card-bg` also defines scoped motion) */
+  --animate-ai-bg-move: ai-bg-move 6s ease-in-out infinite;
+  --animate-ai-fg-move: ai-fg-move 6s ease-in-out infinite;
+  @keyframes ai-bg-move {
+    0%,
+    100% {
+      background-color: #cce5ff;
+    }
+    50% {
+      background-color: #ffedf8;
+    }
+  }
+  @keyframes ai-fg-move {
+    0%,
+    100% {
+      fill: #d0eeff;
+    }
+    50% {
+      fill: #e6c7d9;
+    }
+  }
+}
+
+@theme static {
+  --color-black: #000;
+  --color-white: #fff;
+
+  --color-deepsea-50: #c3c7cb;
+  --color-deepsea-100: #9ea5ac;
+  --color-deepsea-200: #7a838d;
+  --color-deepsea-300: #56626d;
+  --color-deepsea-400: #31404e;
+  --color-deepsea-500: #0d1e2f;
+  --color-deepsea-600: #0b1a28;
+  --color-deepsea-700: #091521;
+  --color-deepsea-800: #07111a;
+  --color-deepsea-900: #050c13;
+  --color-deepsea-950: #03080c;
+
+  --color-gray-50: #f0f3f4;
+  --color-gray-100: #ECF0F5;
+  --color-gray-200: #d8dadf;
+  --color-gray-300: #b9bac1;
+  --color-gray-400: #858c99;
+  --color-gray-500: #808393;
+  --color-gray-600: #808284;
+  --color-gray-700: #6a6b6d;
+  --color-gray-800: #535455;
+  --color-gray-900: #3c3d3e;
+  --color-gray-950: #262627;
+
+  --color-red-50: #f6cac6;
+  --color-red-100: #f0a9a4;
+  --color-red-200: #eb8982;
+  --color-red-300: #e56960;
+  --color-red-400: #e0493e;
+  --color-red-500: #da291c;
+  --color-red-600: #b92318;
+  --color-red-700: #991d14;
+  --color-red-800: #78170f;
+  --color-red-900: #57100b;
+  --color-red-950: #370a07;
+
+  --color-orange-50: #f9d6c3;
+  --color-orange-100: #f6be9f;
+  --color-orange-200: #f2a57a;
+  --color-orange-300: #ef8d56;
+  --color-orange-400: #eb7432;
+  --color-orange-500: #e85c0e;
+  --color-orange-600: #c54e0c;
+  --color-orange-700: #a2400a;
+  --color-orange-800: #803308;
+  --color-orange-900: #5d2506;
+  --color-orange-950: #3a1704;
+
+  --color-yellow-50: #fff0c5;
+  --color-yellow-100: #ffe7a1;
+  --color-yellow-200: #ffdd7e;
+  --color-yellow-300: #ffd45b;
+  --color-yellow-400: #ffcb38;
+  --color-yellow-500: #ffc215;
+  --color-yellow-600: #d9a512;
+  --color-yellow-700: #b3880f;
+  --color-yellow-800: #8c6b0c;
+  --color-yellow-900: #664e08;
+  --color-yellow-950: #403105;
+
+  --color-lemon-50: #fdfad0;
+  --color-lemon-100: #fcf7b4;
+  --color-lemon-200: #fbf398;
+  --color-lemon-300: #faf07c;
+  --color-lemon-400: #f9ed60;
+  --color-lemon-500: #f8ea44;
+  --color-lemon-600: #d3c73a;
+  --color-lemon-700: #aea430;
+  --color-lemon-800: #888125;
+  --color-lemon-900: #635e1b;
+  --color-lemon-950: #3e3b11;
+
+  --color-lime-50: #f0f5bf;
+  --color-lime-100: #e7ef99;
+  --color-lime-200: #dfe873;
+  --color-lime-300: #d6e24d;
+  --color-lime-400: #cddc26;
+  --color-lime-500: #c4d600;
+  --color-lime-600: #a7b600;
+  --color-lime-700: #899600;
+  --color-lime-800: #6c7600;
+  --color-lime-900: #4e5600;
+  --color-lime-950: #313600;
+
+  --color-babygreen-50: #e5f2cf;
+  --color-babygreen-100: #d5e9b1;
+  --color-babygreen-200: #c5e194;
+  --color-babygreen-300: #b6d977;
+  --color-babygreen-400: #a6d15a;
+  --color-babygreen-500: #96c93d;
+  --color-babygreen-600: #80ab34;
+  --color-babygreen-700: #698d2b;
+  --color-babygreen-800: #536f22;
+  --color-babygreen-900: #3c5018;
+  --color-babygreen-950: #26320f;
+
+  --color-green-50: #d2e7cd;
+  --color-green-100: #b7d9af;
+  --color-green-200: #9dca92;
+  --color-green-300: #82bc74;
+  --color-green-400: #67ad56;
+  --color-green-500: #4c9f38;
+  --color-green-600: #418730;
+  --color-green-700: #356f27;
+  --color-green-800: #2a571f;
+  --color-green-900: #1e4016;
+  --color-green-950: #13280e;
+
+  --color-olive-50: #d1e0d5;
+  --color-olive-100: #b5cdbc;
+  --color-olive-200: #99baa3;
+  --color-olive-300: #7da889;
+  --color-olive-400: #619570;
+  --color-olive-500: #458257;
+  --color-olive-600: #3b6f4a;
+  --color-olive-700: #305b3d;
+  --color-olive-800: #264830;
+  --color-olive-900: #1c3423;
+  --color-olive-950: #112116;
+
+  --color-teal-50: #bfeae5;
+  --color-teal-100: #99ddd5;
+  --color-teal-200: #73d0c6;
+  --color-teal-300: #4dc3b6;
+  --color-teal-400: #26b6a7;
+  --color-teal-500: #00a997;
+  --color-teal-600: #009080;
+  --color-teal-700: #00766a;
+  --color-teal-800: #005d53;
+  --color-teal-900: #00443c;
+  --color-teal-950: #002a26;
+
+  --color-ocean-50: #d3f0f7;
+  --color-ocean-100: #b8e7f3;
+  --color-ocean-200: #9edeee;
+  --color-ocean-300: #83d5e9;
+  --color-ocean-400: #69cce5;
+  --color-ocean-500: #4ec3e0;
+  --color-ocean-600: #42a6be;
+  --color-ocean-700: #37899d;
+  --color-ocean-800: #2b6b7b;
+  --color-ocean-900: #1f4e5a;
+  --color-ocean-950: #143138;
+
+  --color-blue-50: #DEEFFF;
+  --color-blue-100: #C9E8FF;
+  --color-blue-150: #99D3ED;
+  --color-blue-200: #73c3e6;
+  --color-blue-300: #4db3df;
+  --color-blue-400: #26a2d8;
+  --color-blue-500: #0092d1;
+  --color-blue-600: #007cb2;
+  --color-blue-700: #006692;
+  --color-blue-800: #005073;
+  --color-blue-900: #003a54;
+  --color-blue-950: #002534;
+
+  --color-darkblue-50: #D0EEFF;
+  --color-darkblue-100: #B7E2F9;
+  --color-darkblue-200: #73abc7;
+  --color-darkblue-300: #4d94b8;
+  --color-darkblue-400: #267da9;
+  --color-darkblue-500: #00669a;
+  --color-darkblue-600: #005783;
+  --color-darkblue-700: #00476c;
+  --color-darkblue-800: #003855;
+  --color-darkblue-900: #00293e;
+  --color-darkblue-950: #001a27;
+
+  --color-midnight-50: #bfd2dd;
+  --color-midnight-100: #99b6c8;
+  --color-midnight-200: #739bb4;
+  --color-midnight-300: #4d809f;
+  --color-midnight-400: #26648b;
+  --color-midnight-500: #004976;
+  --color-midnight-600: #003e64;
+  --color-midnight-700: #003353;
+  --color-midnight-800: #002841;
+  --color-midnight-850: #001E31;
+  --color-midnight-900: #001d2f;
+  --color-midnight-950: #00121e;
+
+  --color-cherry-50: #e6c7d9;
+  --color-cherry-100: #d6a5c2;
+  --color-cherry-200: #c783ab;
+  --color-cherry-300: #b86294;
+  --color-cherry-400: #a8407d;
+  --color-cherry-500: #991e66;
+  --color-cherry-600: #821a57;
+  --color-cherry-700: #6b1547;
+  --color-cherry-800: #541138;
+  --color-cherry-900: #3d0c29;
+  --color-cherry-950: #26081a;
+}
+
+@utility landing-container {
+  @apply px-6 w-full max-w-248 mx-auto;
+  @media (width >= theme(--breakpoint-md)) {
+    @apply max-w-280;
+  }
+  @media (width >= theme(--breakpoint-xl)) {
+    @apply max-w-340;
+  }
+}
+
+@utility title-h1 {
+  @apply text-2xl font-semibold text-surface-900 dark:text-surface-0 text-center leading-tight;
+  font-family: "Noto Sans", sans-serif;
+  font-feature-settings:
+    "cv01" on,
+    "cv02" on,
+    "cv03" on,
+    "cv04" on,
+    "cv07" on,
+    "cv09" on,
+    "cv05" on,
+    "cv10" on,
+    "cv11" on;
+}
+
+@utility title-h2 {
+  @apply font-semibold text-surface-950 dark:text-surface-0 text-center leading-none;
+  font-size: var(--font-size-4xl);
+  font-family: "Noto Sans", sans-serif;
+}
+
+@utility title-h3 {
+  @apply font-semibold text-surface-900 dark:text-surface-0 leading-tight text-center;
+  font-size: var(--font-size-2xl); 
+  font-family: "Noto Sans", sans-serif;
+  font-feature-settings:
+    "cv07" on,
+    "cv01" on,
+    "cv02" on,
+    "cv03" on,
+    "cv04" on,
+    "cv09" on,
+    "cv05" on,
+    "cv10" on,
+    "cv11" on;
+}
+
+@utility title-h4 {
+  @apply font-semibold text-surface-900 dark:text-surface-0 leading-tight text-center;
+  font-size: var(--font-size-xl); 
+  font-family: "Noto Sans", sans-serif;
+  font-feature-settings:
+    "cv01" on,
+    "cv02" on,
+    "cv03" on,
+    "cv04" on,
+    "cv07" on,
+    "cv09" on,
+    "cv05" on,
+    "cv10" on,
+    "cv11" on;
+}
+
+@utility title-h5 {
+  @apply text-base text-center font-medium text-surface-950 dark:text-surface-0 leading-snug;
+  font-family: "Noto Sans", sans-serif;
+  font-feature-settings:
+    "cv01" on,
+    "cv02" on,
+    "cv03" on,
+    "cv04" on,
+    "cv07" on,
+    "cv09" on,
+    "cv05" on,
+    "cv10" on,
+    "cv11" on;
+}
+
+@utility title-h6 {
+  @apply text-base text-center font-medium text-surface-950 dark:text-surface-0;
+  font-family: "Noto Sans", sans-serif;
+  font-feature-settings:
+    "cv01" on,
+    "cv02" on,
+    "cv03" on,
+    "cv04" on,
+    "cv07" on,
+    "cv09" on,
+    "cv05" on,
+    "cv10" on,
+    "cv11" on;
+}
+
+@utility title-h7 {
+  @apply text-base text-center font-medium text-surface-950 dark:text-surface-0;
+  font-family: "Noto Sans", sans-serif;
+  font-feature-settings:
+    "cv09" on,
+    "cv03" on,
+    "cv02" on,
+    "dlig" on,
+    "cv06" on,
+    "cv01" on,
+    "liga" off,
+    "calt" off;
+}
+
+@utility body-large {
+  @apply text-xl text-center text-surface-700 dark:text-surface-200;
+  font-family: "Noto Sans", sans-serif;
+  font-feature-settings:
+    "cv09" on,
+    "cv03" on,
+    "cv02" on,
+    "dlig" on,
+    "cv06" on,
+    "cv01" on,
+    "liga" off,
+    "calt" off;
+}
+
+@utility body-medium {
+  @apply text-lg text-center text-surface-700 dark:text-surface-200;
+  font-family: "Noto Sans", sans-serif;
+  font-feature-settings:
+    "cv09" on,
+    "cv03" on,
+    "cv02" on,
+    "dlig" on,
+    "cv06" on,
+    "cv01" on,
+    "liga" off,
+    "calt" off;
+}
+
+@utility body-small {
+  @apply text-base text-center text-surface-700 dark:text-surface-200;
+  font-family: "Noto Sans", sans-serif;
+  font-feature-settings:
+    "cv09" on,
+    "cv03" on,
+    "cv02" on,
+    "dlig" on,
+    "cv06" on,
+    "cv01" on,
+    "liga" off,
+    "calt" off;
+}
+
+@utility body-xsmall {
+  @apply text-sm text-center text-surface-700 dark:text-surface-200;
+  font-family: "Noto Sans", sans-serif;
+  font-feature-settings:
+    "cv09" on,
+    "cv03" on,
+    "cv02" on,
+    "dlig" on,
+    "cv06" on,
+    "cv01" on,
+    "liga" off,
+    "calt" off;
+}
+
+@utility label-large {
+  @apply text-surface-950 dark:text-surface-0 font-medium text-xl;
+  font-family: "Noto Sans", sans-serif;
+  font-feature-settings:
+    "cv01" on,
+    "cv02" on,
+    "cv05" on,
+    "cv04" on,
+    "cv03" on,
+    "cv07" on,
+    "cv09" on,
+    "cv10" on,
+    "cv11" on;
+}
+
+@utility label-medium {
+  @apply text-surface-950 dark:text-surface-0 font-medium text-lg;
+  font-family: "Noto Sans", sans-serif;
+  font-feature-settings:
+    "cv11" on,
+    "cv10" on,
+    "cv09" on,
+    "cv07" on,
+    "cv05" on,
+    "cv04" on,
+    "cv03" on,
+    "cv02" on,
+    "cv01" on;
+}
+
+@utility label-small {
+  @apply text-surface-700 dark:text-surface-200 font-medium text-sm text-center;
+  font-family: "Noto Sans", sans-serif;
+  font-feature-settings:
+    "cv11" on,
+    "cv10" on,
+    "cv09" on,
+    "cv07" on,
+    "cv05" on,
+    "cv04" on,
+    "cv03" on,
+    "cv02" on,
+    "cv01" on;
+}
+
+@utility label-xsmall {
+  @apply text-surface-700 dark:text-surface-200 font-medium text-xs text-center;
+  font-family: "Noto Sans", sans-serif;
+  font-feature-settings:
+    "cv01" on,
+    "cv02" on,
+    "cv03" on,
+    "cv04" on,
+    "cv07" on,
+    "cv11" on,
+    "cv09" on,
+    "cv10" on,
+    "cv05" on;
+}
+
+@utility paragraph-xsmall {
+  @apply text-xs text-center;
+  font-family: "Noto Sans", sans-serif;
+  font-feature-settings:
+    "ss11" on,
+    "cv09" on,
+    "liga" off,
+    "calt" off;
+}
+
+@utility badge {
+  @apply mx-auto body-small leading-normal text-surface-950 dark:text-surface-0 px-3.5 py-1 border border-surface-200 dark:border-surface-800 rounded-full w-fit;
+}
+
+@utility body-button {
+  @apply py-2 px-3.5 rounded-lg bg-primary-600 hover:bg-primary-700 text-surface-0 font-normal text-center transition-all;
+  width: 8.5rem;
+  font-feature-settings:
+    "cv11" on,
+    "cv10" on,
+    "cv09" on,
+    "cv07" on,
+    "cv05" on,
+    "cv04" on,
+    "cv03" on,
+    "cv02" on,
+    "cv01" on;
+}
+
+@utility social-button {
+  @apply w-full py-2 flex items-center justify-center gap-2 rounded-lg border border-surface-200 dark:border-surface-800 hover:bg-surface-100 dark:hover:bg-surface-800 transition-all text-center text-surface-700 dark:text-surface-200 font-medium leading-normal;
+  font-family: "Noto Sans", sans-serif;
+  font-feature-settings:
+    "cv08" on,
+    "cv09" on,
+    "cv03" on,
+    "cv02" on,
+    "dlig" on,
+    "cv06" on,
+    "cv01" on,
+    "liga" off,
+    "calt" off;
+  box-shadow: 0px 1px 2px 0px rgba(18, 18, 23, 0.05);
+}
+
+@utility stagger-1 {
+  animation-delay: 50ms;
+}
+@utility stagger-2 {
+  animation-delay: 100ms;
+}
+@utility stagger-3 {
+  animation-delay: 150ms;
+}
+@utility stagger-4 {
+  animation-delay: 200ms;
+}
+@utility stagger-5 {
+  animation-delay: 250ms;
+}
+@utility stagger-6 {
+  animation-delay: 300ms;
+}

package/assets/variables/_common.scss

@@ -0,0 +1,21 @@
+:root {
+    --primary-color: var(--p-primary-color);
+    --primary-contrast-color: var(--p-primary-contrast-color);
+    --text-color: var(--p-text-color);
+    --text-muted-color: var(--p-text-muted-color);
+    --surface-border: var(--p-content-border-color);
+    --surface-hover: var(--p-content-hover-background);
+    --surface-overlay: var(--p-overlay-popover-background);
+    --transition-duration: var(--p-transition-duration);
+    --border-radius: var(--p-content-border-radius);
+    --border-radius-circle: 50%;
+    --focus-ring-shadow: var(--p-focus-ring-shadow);
+        --font-size-xs:   clamp(0.7rem,   0.65rem + 0.25vw, 0.75rem);
+        --font-size-sm:   clamp(0.8rem,   0.75rem + 0.25vw, 0.875rem);
+        --font-size-base: clamp(0.9rem,   0.85rem + 0.25vw, 1rem);
+        --font-size-lg:   clamp(1rem,     0.925rem + 0.35vw, 1.125rem);
+        --font-size-xl:   clamp(1.1rem,   1rem + 0.5vw, 1.25rem);
+        --font-size-2xl:  clamp(1.3rem,   1.1rem + 0.75vw, 1.5rem);
+        --font-size-3xl:  clamp(1.6rem,   1.3rem + 1vw, 1.875rem);
+        --font-size-4xl:  clamp(1.9rem,   1.5rem + 1.25vw, 2.25rem);
+}

package/assets/variables/_dark.scss

@@ -0,0 +1,13 @@
+:root[class*='app-dark'] {
+    --surface-ground: var(--p-surface-950);
+    --surface-card: var(--p-surface-900);
+    --popover-background: var(--p-surface-900);
+    --popover-border-color: var(--surface-border);
+    --popover-item-active-background-color: var(--p-surface-800);
+    --popover-item-hover-background-color: var(--p-content-hover-background);
+    --popover-item-text-color: var(--p-surface-200);
+    --popover-item-active-text-color: var(--p-surface-200);
+    --popover-item-active-route-text-color: var(--p-surface-0);
+    --menu-bg-color: color-mix(in srgb, var(--p-primary-500), transparent 95%);
+    --menu-bg-color-alt: var(--p-surface-950);
+}

package/assets/variables/_light.scss

@@ -0,0 +1,13 @@
+:root {
+    --surface-ground: #ffffff;
+    --surface-card: var(--p-surface-50);
+    --popover-background: #ffffff;
+    --popover-border-color: var(--surface-border);
+    --popover-item-active-background-color: var(--p-surface-100);
+    --popover-item-hover-background-color: var(--p-content-hover-background);
+    --popover-item-text-color: var(--p-surface-700);
+    --popover-item-active-text-color: var(--p-surface-700);
+    --popover-item-active-route-text-color: var(--p-surface-950);
+    --menu-bg-color: var(--p-primary-700);
+    --menu-bg-color-alt: var(--p-primary-900);
+}