@youngonesworks/ui 0.1.125 → 0.1.128

package/dist/styles/index.d.ts

@@ -8,4 +8,7 @@ export declare const CSS_PATHS: {
     readonly tailwind: "./tailwind.css";
     readonly globals: "../globals.css";
     readonly editor: "./editor.css";
+    readonly typography: "./typography.css";
+    readonly animations: "./animations.css";
+    readonly base: "./base.css";
 };

package/dist/styles/utilities.css

@@ -1,207 +1,75 @@
 /**
  * Custom Utilities
- * Additional utility classes for the YoungOnes B2B Dashboard
+ * Additional utility classes for the YoungOnes UI Design System
  */
 
-/* Custom utilities */
+/* Custom utility */
 @utility transition-max-height {
   transition: max-height 0.3s ease-in-out;
 }
 
-@layer utilities {
-  /* Animation utility classes */
-  .animate-spin-slow {
-    animation: spin 2s linear infinite;
-  }
-  .animate-spin-once {
-    animation: spin 2s linear forwards;
-  }
-
-  /* Duration utility classes */
-  .duration-sidebar {
-    transition-duration: var(--transition-duration-sidebar);
-  }
-
-  .duration-1000 {
-    transition-duration: 1000ms;
-  }
-
-  .duration-700 {
-    transition-duration: 700ms;
-  }
-
-  /* Gradient background utility classes */
-  .bg-linear-gradient-y {
-    background-image: var(--color-linear-gradient-y);
-  }
-  .bg-linear-gradient-x {
-    background-image: var(--color-linear-gradient-x);
-  }
-  .bg-gradient-blue-secondary {
-    background-image: var(--color-linear-gradient-x) !important;
-  }
-  .bg-gradient-blue-green-y {
-    background-image: var(--color-gradient-blue-green-y);
-  }
-  .bg-gradient-blue-green-x {
-    background-image: var(--color-gradient-blue-green-x);
-  }
-  .bg-gradient-calendar {
-    background-image: var(--color-gradient-calendar);
-  }
-  .hover\:bg-gradient-calendar:hover {
-    background-image: var(--color-gradient-calendar);
-  }
-  @media (min-width: 768px) {
-    .md\:hover\:bg-gradient-calendar:hover {
-      background-image: var(--color-gradient-calendar);
-    }
-  }
-  .bg-nav-gradient {
-    background-image: var(--color-nav-gradient);
-  }
-  .bg-nav-gradient-mobile {
-    background-image: var(--color-nav-gradient-mobile);
-  }
-
-  /* Toast notification colors */
-  :root {
-    --toastify-color-info: #2a67f6;
-    --toastify-color-success: #10d1bb;
-    --toastify-color-warning: #f8ec5b;
-    --toastify-color-error: #ed3f55;
-  }
-
-  /* Base element styles */
-  * {
-    box-sizing: inherit;
-  }
-
-  html {
-    box-sizing: border-box;
-    -ms-overflow-style: scrollbar;
-    -webkit-tap-highlight-color: rgba(#000, 0);
-    font-family: var(--font-family-sans);
-    @reference min-h-screen;
-    @reference overflow-y-scroll;
-    @reference text-base;
-  }
-
-  body {
-    @reference m-0;
-    @reference bg-ultra-light-blue;
-  }
-
-  /* Focus styles */
-  button:focus-visible {
-    @reference focus:outline-hidden;
-    @reference focus:ring-2;
-    @reference focus:ring-offset-2;
-  }
-
-  /* Link styles */
-  a {
-    font-size: 0.75rem;
-    font-weight: 500;
-    color: var(--color-accent-blue);
-  }
+.duration-sidebar {
+  transition-duration: var(--transition-duration-sidebar);
+}
 
-  a:hover {
-    text-decoration: underline;
-  }
+.duration-700 {
+  transition-duration: 700ms;
+}
 
-  /* Base layer styles */
-  @layer base {
-    button:not(:disabled),
-    [role="button"]:not(:disabled) {
-      cursor: pointer;
-    }
-  }
+.duration-1000 {
+  transition-duration: 1000ms;
+}
 
-  /* Heading styles */
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    @reference m-0;
-  }
+.bg-gradient-blue-turquoise {
+  background-image: var(--color-gradient-blue-turquoise);
+}
 
-  /* Editor styles */
-  .is-editor-empty:first-of-type::before {
-    color: var(--color-gray-900);
-    opacity: 0.5;
-    content: attr(data-placeholder);
-    float: left;
-    height: 0;
-    pointer-events: none;
-  }
+.bg-linear-gradient-y {
+  background-image: var(--color-linear-gradient-y);
+}
 
-  /* List styles */
-  ul {
-    @reference list-disc;
-  }
+.bg-linear-gradient-x {
+  background-image: var(--color-linear-gradient-x);
+}
 
-  ol {
-    @reference list-decimal;
-  }
+.bg-gradient-blue-purple {
+  background-image: var(--color-linear-gradient-x) !important;
 }
 
-/* Table animations */
-.table-animation-exit {
-  opacity: 1;
-  transition: opacity 300ms ease-out;
+.bg-gradient-blue-green-y {
+  background-image: var(--color-gradient-blue-green-y);
 }
-.table-animation-exit-active {
-  opacity: 0;
-  transition: opacity 300ms ease-out;
+
+.bg-gradient-blue-green-x {
+  background-image: var(--color-gradient-blue-green-x);
 }
-.table-animation-enter {
-  opacity: 0;
-  transition: opacity 300ms ease-in;
+
+.bg-gradient-calendar {
+  background-image: var(--color-gradient-calendar);
 }
-.table-animation-enter-active {
-  opacity: 1;
-  transition: opacity 300ms ease-in;
+
+.hover\:bg-gradient-calendar:hover {
+  background-image: var(--color-gradient-calendar);
 }
 
-/* Spin animation keyframes */
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
+@media (min-width: 768px) {
+  .md\:hover\:bg-gradient-calendar:hover {
+    background-image: var(--color-gradient-calendar);
   }
 }
 
-/* Loader component */
-.loader {
-  border: 4px solid rgba(0, 0, 0, 0.1);
-  border-left-color: #00c6b9;
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  animation: spin 1.5s linear infinite;
+.bg-nav-gradient {
+  background: var(--color-nav-gradient);
 }
 
-/* Gig description component */
-.gig-description {
-  ul {
-    margin-left: 40px;
-    margin-bottom: 20px;
-    margin-top: 10px;
-  }
+.bg-nav-gradient-mobile {
+  background: var(--color-nav-gradient-mobile);
 }
 
-/* Telephone input component */
-.react-tel-input,
-.react-tel-input input {
-  width: 100% !important;
-  height: 40px !important;
+.bg-nav-gradient-agency {
+  background: var(--color-nav-gradient-agency);
 }
 
-.react-tel-input input {
-  background-color: #f8f8f8 !important;
+.bg-nav-gradient-mobile-agency {
+  background: var(--color-nav-gradient-mobile-agency);
 }

package/dist/styles/variables.css

@@ -1,27 +1,29 @@
 /**
  * Theme Variables
- * Design tokens for the YoungOnes B2B Dashboard
+ * Design tokens for the YoungOnes UI Design System
  */
 
 @theme {
   /* Base colors */
   --color-primary: #10d1bb;
-  --color-black: #1b1c1e;
+  --color-black: #000024;
   --color-navy-blue: #000440;
   --color-light-blue: #26295c;
   --color-white: #ffffff;
-  --color-ultra-light-blue: #fafcff;
+  --color-ultra-light-blue: #f1f1f8;
   --color-ultra-light-gray: #fbfbfb;
 
   /* Functional colors */
   --color-light-blue-disabled: #bdbeca;
   --color-green: #1d9856;
   --color-green-light: #ecfdf3;
-  --color-secondary: #bd0a0a;
-  --color-secondary-light: #f8dada;
+  --color-secondary: var(--color-red-500);
+  --color-secondary-light: var(--color-red-50);
+  --color-accent-purple: #8249fd;
   --color-purple: #420089;
   --color-purple-light: #f2e6ff;
   --color-accent-blue: #0066cc;
+  --color-accent-blue-grey: #dbdbed;
   --color-accent-blue-light: #e7f0f9;
   --color-orange: #e86427;
   --color-orange-light: #fff3eb;
@@ -115,7 +117,7 @@
   --color-red-200: #e6777a;
   --color-red-300: #e26064;
   --color-red-400: #dd494d;
-  --color-red-500: #d51c21;
+  --color-red-500: #bd1818;
   --color-red-600: #c0191e;
   --color-red-700: #aa161a;
   --color-red-800: #951417;
@@ -157,8 +159,6 @@
   --animation-spin-once: spin 2s linear;
 
   /* Transitions */
-  --transition-property-max-height: max-height;
-  --transition-timing-function-custom-cubic: cubic-bezier(0, 1, 0, 1);
   --transition-duration-700: 700ms;
   --transition-duration-1000: 1000ms;
   --transition-duration-sidebar: 200ms;
@@ -170,18 +170,25 @@
   --spacing-sidebar-expanded: 221px;
 
   /* Gradients */
-  /* Light blue → Primary → secondary gradients */
+  --color-gradient-blue-turquoise: linear-gradient(
+    90deg,
+    var(--color-navy-blue) 0%,
+    var(--color-primary) 50%,
+    var(--color-navy-blue) 100%
+  );
+  /* Light blue → Primary → accent purple gradients */
   --color-linear-gradient-y: linear-gradient(
     180deg,
     var(--color-light-blue) 0%,
     var(--color-primary) 50.52%,
-    var(--color-secondary) 100%
+    var(--color-accent-purple) 100%
   );
+
   --color-linear-gradient-x: linear-gradient(
     90deg,
     var(--color-light-blue) 0%,
     var(--color-primary) 50.52%,
-    var(--color-secondary) 100%
+    var(--color-accent-purple) 100%
   );
 
   /* Navy blue → Primary gradients */
@@ -190,36 +197,37 @@
     var(--color-navy-blue) 1.57%,
     var(--color-primary) 98.28%
   );
+
   --color-gradient-blue-green-x: linear-gradient(
     88.05deg,
     var(--color-navy-blue) 1.57%,
     var(--color-primary) 98.28%
   );
-  --color-gradient-calendar: linear-gradient(
-    51.61deg,
-    #000440 14.79%,
-    #10d1bb 167.63%
-  );
-  --color-nav-gradient: linear-gradient(
-    179.94deg,
-    var(--color-navy-blue) 65.65%,
-    var(--color-primary) 128%
-  );
-  --color-nav-gradient-agency: linear-gradient(
-    179.94deg,
-    var(--color-navy-blue) 65.65%,
-    var(--color-secondary) 128%
-  );
-  --color-nav-gradient-mobile: linear-gradient(
-    88.05deg,
-    var(--color-navy-blue) 54.46%,
-    var(--color-primary) 149.24%
-  );
-  --color-nav-gradient-mobile-agency: linear-gradient(
-    88.05deg,
-    var(--color-navy-blue) 54.46%,
-    var(--color-secondary) 149.24%
-  );
+  --color-nav-gradient:
+    radial-gradient(circle at 20% 20%, #0d1148 0%, transparent 65%),
+    radial-gradient(circle at 65% 40%, #09b7a3 0%, transparent 75%),
+    radial-gradient(circle at 75% 85%, #0a0f3d 0%, transparent 70%), #051748;
+  --color-nav-gradient-agency:
+    radial-gradient(circle at 20% 20%, #0d1148 0%, transparent 65%),
+    radial-gradient(
+      circle at 65% 40%,
+      var(--color-accent-purple) 0%,
+      transparent 75%
+    ),
+    radial-gradient(circle at 75% 85%, #0a0f3d 0%, transparent 70%), #051748;
+  --color-nav-gradient-mobile:
+    radial-gradient(circle at 85% 50%, #0d1148 0%, transparent 65%),
+    radial-gradient(circle at 72% 28%, #09b7a3 0%, transparent 75%),
+    radial-gradient(circle at 15% 50%, #0a0f3d 0%, transparent 70%), #051748;
+
+  --color-nav-gradient-mobile-agency:
+    radial-gradient(circle at 85% 50%, #0d1148 0%, transparent 65%),
+    radial-gradient(
+      circle at 72% 28%,
+      var(--color-accent-purple) 0%,
+      transparent 75%
+    ),
+    radial-gradient(circle at 15% 50%, #0a0f3d 0%, transparent 70%), #051748;
   --color-gradient-calendar: linear-gradient(
     51.61deg,
     var(--color-navy-blue) 14.79%,
@@ -227,17 +235,20 @@
   );
 
   /* Font families */
-  --font-app-sans: "Work Sans";
+  --font-app-sans: "Work Sans", ui-sans-serif, system-ui, sans-serif;
   --font-family-sans:
     var(--font-app-sans), ui-sans-serif, system-ui, -apple-system,
     BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-family-serif:
-    ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-  --font-family-mono:
-    ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo,
-    monospace;
 }
 
-/* Change this path to be relative to where this CSS file ends up after packaging this library. */
+/* GLOBAL CSS VARIABLES (not theme tokens) */
+
+:root {
+  --toastify-color-info: var(--color-accent-blue);
+  --toastify-color-success: var(--color-primary);
+  --toastify-color-warning: var(--color-yellow);
+  --toastify-color-error: var(--color-red-500);
+}
+
 @source "../../dist";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youngonesworks/ui",
-  "version": "0.1.125",
+  "version": "0.1.128",
   "description": "A Youngones UI component library",
   "type": "module",
   "main": "dist/index.cjs",

package/dist/theme/index.d.ts

@@ -1,4 +0,0 @@
-/**
- * Theme exports for YoungOnes UI Package
- */
-export * from './variables';

package/dist/theme/variables.d.ts

@@ -1,62 +0,0 @@
-/**
- * CSS Variables Type Definitions
- * TypeScript interfaces for YoungOnes UI CSS custom properties
- */
-export interface BaseColors {
-    '--color-primary': string;
-    '--color-primary-light': string;
-    '--color-primary-dark': string;
-    '--color-black': string;
-    '--color-navy-blue': string;
-    '--color-white': string;
-    '--color-accent-blue': string;
-    '--color-ultra-light-blue': string;
-}
-export interface FunctionalColors {
-    '--color-green': string;
-    '--color-green-light': string;
-    '--color-secondary': string;
-    '--color-purple': string;
-    '--color-orange': string;
-    '--color-warning': string;
-    '--color-warning-light': string;
-    '--color-warning-dark': string;
-}
-export interface TypographySystem {
-    '--font-xs-size': string;
-    '--font-sm-size': string;
-    '--font-base-size': string;
-    '--font-lg-size': string;
-    '--font-xl-size': string;
-    '--font-2xl-size': string;
-    '--font-3xl-size': string;
-    '--font-4xl-size': string;
-    '--font-5xl-size': string;
-    '--font-6xl-size': string;
-    '--font-7xl-size': string;
-    '--font-8xl-size': string;
-    '--font-9xl-size': string;
-}
-export interface CSSVariables extends BaseColors, FunctionalColors, TypographySystem {
-    '--color-linear-gradient-y': string;
-    '--color-linear-gradient-x': string;
-    '--color-gradient-blue-green-y': string;
-    '--color-gradient-blue-green-x': string;
-    '--color-gradient-calendar': string;
-    '--color-nav-gradient': string;
-    '--color-nav-gradient-mobile': string;
-    '--shadow-dropdown': string;
-    '--shadow-calendar': string;
-    '--shadow-topbar': string;
-    '--animation-spin': string;
-    '--animation-spin-slow': string;
-    '--transition-duration-sidebar': string;
-    '--transition-default': string;
-    '--transition-fast': string;
-    '--transition-slow': string;
-    '--max-height-sidebar': string;
-    '--spacing-sidebar': string;
-}
-export declare const CSS_VARIABLE_KEYS: (keyof CSSVariables)[];
-export declare const getCSSVariable: (variable: keyof CSSVariables) => string;
-export declare const setCSSVariable: (variable: keyof CSSVariables, value: string) => void;