@aristobyte-ui/utils 1.0.25 → 1.0.26

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aristobyte-ui/utils",
   "description": "A collection of shared utility functions for AristoByte projects, designed to provide reusable helpers, streamline common operations, and ensure consistency across applications and packages.",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -35,7 +35,8 @@
     "aristobyte"
   ],
   "files": [
-    "dist"
+    "dist",
+    "styles"
   ],
   "publishConfig": {
     "access": "public"
@@ -62,8 +63,8 @@
     "tsup": "^8.5.0"
   },
   "devDependencies": {
-    "@aristobyte-ui/eslint-config": "^1.0.25",
-    "@aristobyte-ui/typescript-config": "^1.0.25",
+    "@aristobyte-ui/eslint-config": "^1.0.26",
+    "@aristobyte-ui/typescript-config": "^1.0.26",
     "@turbo/gen": "^2.5.0",
     "@types/node": "^24.3.0",
     "@types/react": "19.1.0",

package/styles/_settings.scss

@@ -0,0 +1,183 @@
+// =========================================== //
+//        AristoByte UI - Style Settings       //
+// =========================================== //
+
+// === Design Tokens — Color Palette === //
+
+// Base
+$white: #ffffff;
+$black: #000000;
+$transparent: transparent;
+
+// === Black Transparent Scale === //
+$black-transparent-100: rgba(0, 0, 0, 0.1);
+$black-transparent-200: rgba(0, 0, 0, 0.2);
+$black-transparent-300: rgba(0, 0, 0, 0.3);
+$black-transparent-400: rgba(0, 0, 0, 0.4);
+$black-transparent-500: rgba(0, 0, 0, 0.5);
+$black-transparent-600: rgba(0, 0, 0, 0.6);
+$black-transparent-700: rgba(0, 0, 0, 0.7);
+$black-transparent-800: rgba(0, 0, 0, 0.8);
+$black-transparent-900: rgba(0, 0, 0, 0.9);
+
+// === Black Transparent Scale === //
+$white-transparent-100: rgba(255, 255, 255, 0.1);
+$white-transparent-200: rgba(255, 255, 255, 0.2);
+$white-transparent-300: rgba(255, 255, 255, 0.3);
+$white-transparent-400: rgba(255, 255, 255, 0.4);
+$white-transparent-500: rgba(255, 255, 255, 0.5);
+$white-transparent-600: rgba(255, 255, 255, 0.6);
+$white-transparent-700: rgba(255, 255, 255, 0.7);
+$white-transparent-800: rgba(255, 255, 255, 0.8);
+$white-transparent-900: rgba(255, 255, 255, 0.9);
+
+// === Neutral Scale (Grey) === //
+$grey-50: #f9fafb;
+$grey-100: #f3f4f6;
+$grey-200: #e5e7eb;
+$grey-300: #d1d5db;
+$grey-400: #9ca3af;
+$grey-500: #6b7280;
+$grey-600: #4b5563;
+$grey-700: #374151;
+$grey-800: #1f2937;
+$grey-900: #111827;
+
+// === Primary Scale (Blue) === //
+$blue-50: #eff6ff;
+$blue-100: #dbeafe;
+$blue-200: #bfdbfe;
+$blue-300: #93c5fd;
+$blue-400: #60a5fa;
+$blue-500: #3b82f6;
+$blue-600: #2563eb; // Main
+$blue-700: #1d4ed8; // Hover
+$blue-800: #1e40af;
+$blue-900: #1e3a8a;
+
+// === Secondary Scale (Indigo) === //
+$indigo-50: #eef2ff;
+$indigo-100: #e0e7ff;
+$indigo-200: #c7d2fe;
+$indigo-300: #a5b4fc;
+$indigo-400: #818cf8;
+$indigo-500: #6366f1;
+$indigo-600: #4f46e5; // Main
+$indigo-700: #4338ca; // Hover
+
+// === Error Scale (Red) === //
+$red-50: #fef2f2;
+$red-100: #fee2e2;
+$red-200: #fecaca;
+$red-300: #fca5a5;
+$red-400: #f87171;
+$red-500: #ef4444;
+$red-600: #dc2626; // Main
+$red-700: #b91c1c; // Hover
+
+// === Success Scale (Green) === //
+$green-50: #f0fdf4;
+$green-100: #dcfce7;
+$green-200: #bbf7d0;
+$green-300: #86efac;
+$green-400: #4ade80;
+$green-500: #22c55e;
+$green-600: #16a34a; // Main
+$green-700: #15803d; // Hover
+
+// === Warning Scale (Amber) === //
+$amber-50: #fffbeb;
+$amber-100: #fef3c7;
+$amber-200: #fde68a;
+$amber-300: #fcd34d;
+$amber-400: #fbbf24;
+$amber-500: #f59e0b;
+$amber-600: #d97706; // Main
+$amber-700: #b45309; // Hover
+
+// === Semantic Tokens === //
+$color-default: $grey-800;
+$color-default-hover: $grey-900;
+$color-default-disabled: rgba($color-default, 0.5);
+
+$color-primary: $blue-600;
+$color-primary-hover: $blue-700;
+$color-primary-disabled: rgba($color-primary, 0.5);
+
+$color-secondary: $indigo-600;
+$color-secondary-hover: $indigo-700;
+$color-secondary-disabled: rgba($color-secondary, 0.5);
+
+$color-error: $red-600;
+$color-error-hover: $red-700;
+$color-error-disabled: rgba($color-error, 0.5);
+
+$color-success: $green-600;
+$color-success-hover: $green-700;
+$color-success-disabled: rgba($color-success, 0.5);
+
+$color-warning: $amber-600;
+$color-warning-hover: $amber-700;
+$color-warning-disabled: rgba($color-warning, 0.5);
+
+$text-color-white: $white;
+$text-color-black: $black;
+$text-color-white-disabled: rgba($white, 0.5);
+$text-color-black-disabled: rgba($black, 0.5);
+
+// === Shadows === //
+$shadow-sm: 0 1px 2px 0 rgba($black, 0.05);
+$shadow-md:
+  0 4px 6px -1px rgba($black, 0.1),
+  0 2px 4px -1px rgba($black, 0.06);
+$shadow-lg:
+  0 10px 15px -3px rgba($black, 0.1),
+  0 4px 6px -2px rgba($black, 0.05);
+
+// === Font families === //
+$font-family-sans: "Inter", sans-serif;
+$font-family-serif: "Georgia", serif;
+$font-family-mono: "Fira Code", monospace;
+
+// === Font weights === //
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+
+// === Line heights === //
+$line-height-tight: 1.2;
+$line-height-snug: 1.375;
+$line-height-normal: 1.5;
+$line-height-loose: 1.625;
+
+// === Font Sizes — Semantic Tokens === //
+
+// === Titles === //
+$font-size-hero: 3rem; // 48px
+$font-size-title-1: 2.25rem; // 36px
+$font-size-title-2: 1.875rem; // 30px
+$font-size-title-3: 1.5rem; // 24px
+
+// === Subtitles === //
+$font-size-subtitle-1: 1.25rem; // 20px
+$font-size-subtitle-2: 1.125rem; // 18px
+
+// === Body text === //
+$font-size-body-lg: 1rem; // 16px
+$font-size-body-md: 0.9375rem; // 15px
+$font-size-body-sm: 0.875rem; // 14px
+
+// === Captions / Descriptions === //
+$font-size-caption: 0.75rem; // 12px
+$font-size-footnote: 0.6875rem; // 11px
+
+// === Buttons === //
+$font-size-button-lg: 1rem; // 16px
+$font-size-button-md: 0.875rem; // 14px
+$font-size-button-sm: 0.75rem; // 12px
+
+// === Animations === //
+
+$cubic-bezier-primary: cubic-bezier(0.55, -0.19, 0.59, 0.95);
+$cubic-bezier-secondary: cubic-bezier(0.175, 0.885, 0.32, 1.275);