@opensourcekd/ng-common-libs 2.0.11 → 2.2.0

package/dist/styles/tokens.css

@@ -0,0 +1,311 @@
+/**
+ * @opensourcekd/ng-common-libs — Design Tokens
+ *
+ * CSS custom properties (variables) for consistent styling across all
+ * micro-frontends and applications that consume this library.
+ *
+ * Usage:
+ *   In your global stylesheet (e.g. styles.css / styles.scss), add:
+ *
+ *   @import '@opensourcekd/ng-common-libs/styles/tokens.css';
+ *
+ * All tokens are defined on :root so they are available globally.
+ */
+
+:root {
+  /* ─────────────────────────────────────────────────────────────────────────
+   * COLOR PALETTE
+   * ───────────────────────────────────────────────────────────────────────── */
+
+  /* Primary */
+  --color-primary-50:  #eff6ff;
+  --color-primary-100: #dbeafe;
+  --color-primary-200: #bfdbfe;
+  --color-primary-300: #93c5fd;
+  --color-primary-400: #60a5fa;
+  --color-primary-500: #3b82f6;
+  --color-primary-600: #2563eb;
+  --color-primary-700: #1d4ed8;
+  --color-primary-800: #1e40af;
+  --color-primary-900: #1e3a8a;
+  --color-primary-950: #172554;
+
+  /* Secondary / Neutral */
+  --color-neutral-0:   #ffffff;
+  --color-neutral-50:  #f8fafc;
+  --color-neutral-100: #f1f5f9;
+  --color-neutral-200: #e2e8f0;
+  --color-neutral-300: #cbd5e1;
+  --color-neutral-400: #94a3b8;
+  --color-neutral-500: #64748b;
+  --color-neutral-600: #475569;
+  --color-neutral-700: #334155;
+  --color-neutral-800: #1e293b;
+  --color-neutral-900: #0f172a;
+  --color-neutral-950: #020617;
+
+  /* Success */
+  --color-success-50:  #f0fdf4;
+  --color-success-100: #dcfce7;
+  --color-success-200: #bbf7d0;
+  --color-success-300: #86efac;
+  --color-success-400: #4ade80;
+  --color-success-500: #22c55e;
+  --color-success-600: #16a34a;
+  --color-success-700: #15803d;
+  --color-success-800: #166534;
+  --color-success-900: #14532d;
+
+  /* Warning */
+  --color-warning-50:  #fffbeb;
+  --color-warning-100: #fef3c7;
+  --color-warning-200: #fde68a;
+  --color-warning-300: #fcd34d;
+  --color-warning-400: #fbbf24;
+  --color-warning-500: #f59e0b;
+  --color-warning-600: #d97706;
+  --color-warning-700: #b45309;
+  --color-warning-800: #92400e;
+  --color-warning-900: #78350f;
+
+  /* Error / Danger */
+  --color-error-50:  #fef2f2;
+  --color-error-100: #fee2e2;
+  --color-error-200: #fecaca;
+  --color-error-300: #fca5a5;
+  --color-error-400: #f87171;
+  --color-error-500: #ef4444;
+  --color-error-600: #dc2626;
+  --color-error-700: #b91c1c;
+  --color-error-800: #991b1b;
+  --color-error-900: #7f1d1d;
+
+  /* Info */
+  --color-info-50:  #ecfeff;
+  --color-info-100: #cffafe;
+  --color-info-200: #a5f3fc;
+  --color-info-300: #67e8f9;
+  --color-info-400: #22d3ee;
+  --color-info-500: #06b6d4;
+  --color-info-600: #0891b2;
+  --color-info-700: #0e7490;
+  --color-info-800: #155e75;
+  --color-info-900: #164e63;
+
+  /* Semantic color aliases */
+  --color-brand:             var(--color-primary-600);
+  --color-brand-hover:       var(--color-primary-700);
+  --color-brand-active:      var(--color-primary-800);
+  --color-brand-subtle:      var(--color-primary-50);
+
+  --color-text-primary:      var(--color-neutral-900);
+  --color-text-secondary:    var(--color-neutral-600);
+  --color-text-disabled:     var(--color-neutral-400);
+  --color-text-inverse:      var(--color-neutral-0);
+  --color-text-on-brand:     var(--color-neutral-0);
+
+  --color-bg-page:           var(--color-neutral-50);
+  --color-bg-surface:        var(--color-neutral-0);
+  --color-bg-overlay:        var(--color-neutral-100);
+  --color-bg-disabled:       var(--color-neutral-200);
+
+  --color-border-default:    var(--color-neutral-200);
+  --color-border-strong:     var(--color-neutral-400);
+  --color-border-focus:      var(--color-primary-500);
+
+  /* ─────────────────────────────────────────────────────────────────────────
+   * TYPOGRAPHY
+   * ───────────────────────────────────────────────────────────────────────── */
+
+  /* Font families */
+  --font-family-sans:  ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-family-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  /* Base font */
+  --font-family-base:   var(--font-family-sans);
+  --font-family-code:   var(--font-family-mono);
+
+  /* Font sizes (rem) */
+  --font-size-xs:   0.75rem;   /*  12px */
+  --font-size-sm:   0.875rem;  /*  14px */
+  --font-size-md:   1rem;      /*  16px */
+  --font-size-lg:   1.125rem;  /*  18px */
+  --font-size-xl:   1.25rem;   /*  20px */
+  --font-size-2xl:  1.5rem;    /*  24px */
+  --font-size-3xl:  1.875rem;  /*  30px */
+  --font-size-4xl:  2.25rem;   /*  36px */
+  --font-size-5xl:  3rem;      /*  48px */
+  --font-size-6xl:  3.75rem;   /*  60px */
+
+  /* Font weights */
+  --font-weight-thin:       100;
+  --font-weight-extralight: 200;
+  --font-weight-light:      300;
+  --font-weight-normal:     400;
+  --font-weight-medium:     500;
+  --font-weight-semibold:   600;
+  --font-weight-bold:       700;
+  --font-weight-extrabold:  800;
+  --font-weight-black:      900;
+
+  /* Line heights */
+  --line-height-none:    1;
+  --line-height-tight:   1.25;
+  --line-height-snug:    1.375;
+  --line-height-normal:  1.5;
+  --line-height-relaxed: 1.625;
+  --line-height-loose:   2;
+
+  /* Letter spacing */
+  --letter-spacing-tighter: -0.05em;
+  --letter-spacing-tight:   -0.025em;
+  --letter-spacing-normal:   0em;
+  --letter-spacing-wide:     0.025em;
+  --letter-spacing-wider:    0.05em;
+  --letter-spacing-widest:   0.1em;
+
+  /* ─────────────────────────────────────────────────────────────────────────
+   * SPACING
+   * Follows a 4px base grid (0.25rem per unit).
+   * ───────────────────────────────────────────────────────────────────────── */
+
+  --space-0:    0;
+  --space-px:   1px;
+  --space-0-5:  0.125rem;   /*  2px */
+  --space-1:    0.25rem;    /*  4px */
+  --space-1-5:  0.375rem;   /*  6px */
+  --space-2:    0.5rem;     /*  8px */
+  --space-2-5:  0.625rem;   /* 10px */
+  --space-3:    0.75rem;    /* 12px */
+  --space-3-5:  0.875rem;   /* 14px */
+  --space-4:    1rem;       /* 16px */
+  --space-5:    1.25rem;    /* 20px */
+  --space-6:    1.5rem;     /* 24px */
+  --space-7:    1.75rem;    /* 28px */
+  --space-8:    2rem;       /* 32px */
+  --space-9:    2.25rem;    /* 36px */
+  --space-10:   2.5rem;     /* 40px */
+  --space-11:   2.75rem;    /* 44px */
+  --space-12:   3rem;       /* 48px */
+  --space-14:   3.5rem;     /* 56px */
+  --space-16:   4rem;       /* 64px */
+  --space-20:   5rem;       /* 80px */
+  --space-24:   6rem;       /* 96px */
+  --space-28:   7rem;       /* 112px */
+  --space-32:   8rem;       /* 128px */
+  --space-36:   9rem;       /* 144px */
+  --space-40:   10rem;      /* 160px */
+  --space-44:   11rem;      /* 176px */
+  --space-48:   12rem;      /* 192px */
+  --space-52:   13rem;      /* 208px */
+  --space-56:   14rem;      /* 224px */
+  --space-60:   15rem;      /* 240px */
+  --space-64:   16rem;      /* 256px */
+  --space-72:   18rem;      /* 288px */
+  --space-80:   20rem;      /* 320px */
+  --space-96:   24rem;      /* 384px */
+
+  /* ─────────────────────────────────────────────────────────────────────────
+   * BORDER RADIUS
+   * ───────────────────────────────────────────────────────────────────────── */
+
+  --radius-none:   0;
+  --radius-sm:     0.125rem;  /*  2px */
+  --radius-md:     0.375rem;  /*  6px */
+  --radius-lg:     0.5rem;    /*  8px */
+  --radius-xl:     0.75rem;   /* 12px */
+  --radius-2xl:    1rem;      /* 16px */
+  --radius-3xl:    1.5rem;    /* 24px */
+  --radius-full:   9999px;
+
+  /* ─────────────────────────────────────────────────────────────────────────
+   * SHADOWS
+   * ───────────────────────────────────────────────────────────────────────── */
+
+  --shadow-none: none;
+  --shadow-xs:   0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-sm:   0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
+  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
+  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);
+  --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);
+  --shadow-2xl:  0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --shadow-focus: 0 0 0 3px rgb(59 130 246 / 0.45);
+
+  /* ─────────────────────────────────────────────────────────────────────────
+   * Z-INDEX
+   * ───────────────────────────────────────────────────────────────────────── */
+
+  --z-index-hide:    -1;
+  --z-index-base:     0;
+  --z-index-raised:   1;
+  --z-index-dropdown: 1000;
+  --z-index-sticky:   1100;
+  --z-index-banner:   1200;
+  --z-index-overlay:  1300;
+  --z-index-modal:    1400;
+  --z-index-popover:  1500;
+  --z-index-toast:    1600;
+  --z-index-tooltip:  1700;
+
+  /* ─────────────────────────────────────────────────────────────────────────
+   * TRANSITIONS & ANIMATIONS
+   * ───────────────────────────────────────────────────────────────────────── */
+
+  /* Durations */
+  --duration-instant:  0ms;
+  --duration-fast:     100ms;
+  --duration-normal:   200ms;
+  --duration-slow:     300ms;
+  --duration-slower:   500ms;
+  --duration-slowest:  700ms;
+
+  /* Easing functions */
+  --easing-linear:       linear;
+  --easing-ease:         ease;
+  --easing-ease-in:      ease-in;
+  --easing-ease-out:     ease-out;
+  --easing-ease-in-out:  ease-in-out;
+  --easing-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* Shorthand transition presets */
+  --transition-fast:    all var(--duration-fast)   var(--easing-ease-in-out);
+  --transition-normal:  all var(--duration-normal) var(--easing-ease-in-out);
+  --transition-slow:    all var(--duration-slow)   var(--easing-ease-in-out);
+  --transition-colors:  color            var(--duration-normal) var(--easing-ease-in-out),
+                        background-color var(--duration-normal) var(--easing-ease-in-out),
+                        border-color     var(--duration-normal) var(--easing-ease-in-out);
+
+  /* ─────────────────────────────────────────────────────────────────────────
+   * BREAKPOINTS
+   * Note: CSS custom properties cannot be used in media query conditions.
+   * These are provided as reference values and for use in JS via getComputedStyle.
+   * ───────────────────────────────────────────────────────────────────────── */
+
+  --breakpoint-sm:  640px;
+  --breakpoint-md:  768px;
+  --breakpoint-lg:  1024px;
+  --breakpoint-xl:  1280px;
+  --breakpoint-2xl: 1536px;
+
+  /* ─────────────────────────────────────────────────────────────────────────
+   * OPACITY
+   * ───────────────────────────────────────────────────────────────────────── */
+
+  --opacity-0:    0;
+  --opacity-5:    0.05;
+  --opacity-10:   0.1;
+  --opacity-20:   0.2;
+  --opacity-25:   0.25;
+  --opacity-30:   0.3;
+  --opacity-40:   0.4;
+  --opacity-50:   0.5;
+  --opacity-60:   0.6;
+  --opacity-70:   0.7;
+  --opacity-75:   0.75;
+  --opacity-80:   0.8;
+  --opacity-90:   0.9;
+  --opacity-95:   0.95;
+  --opacity-100:  1;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@opensourcekd/ng-common-libs",
-    "version": "2.0.11",
+    "version": "2.2.0",
     "description": "Angular 18 shareable utility library with framework-agnostic core and Angular wrappers for event emitter, authorization, storage, and more",
     "keywords": [
         "angular",
@@ -31,14 +31,16 @@
             "import": "./dist/index.mjs",
             "require": "./dist/index.cjs",
             "types": "./dist/index.d.ts"
-        }
+        },
+        "./styles/tokens.css": "./dist/styles/tokens.css"
     },
     "files": [
         "dist"
     ],
     "scripts": {
         "clean": "rimraf dist",
-        "build": "npm run clean && rollup -c",
+        "copy:css": "node -e \"const{mkdirSync,copyFileSync}=require('fs');mkdirSync('dist/styles',{recursive:true});copyFileSync('src/styles/tokens.css','dist/styles/tokens.css');\"",
+        "build": "npm run clean && rollup -c && npm run copy:css",
         "lint": "eslint .",
         "test": "jest",
         "test:watch": "jest --watch",