@jsswift/ui 1.0.41

package/dist/css/base.css

@@ -0,0 +1,621 @@
+/* JSswift UI base */
+/* =====================================================================
+   JSswift UI — Design Tokens v1 (PRO)
+   - Full color scales 50..950
+   - Semantic tokens for dev experience
+   - Light default + Dark via data-theme="dark"
+   - Brand skins via data-brand="*"
+   ===================================================================== */
+
+:root {
+  /* ======================
+     0) Meta / Layout tokens
+     ====================== */
+  --cms-brand: "JSswift";
+
+  --cms-space-1: 4px;
+  --cms-space-2: 8px;
+  --cms-space-3: 12px;
+  --cms-space-4: 16px;
+  --cms-space-5: 20px;
+  --cms-space-6: 24px;
+
+  /* ======================
+     1) Neutral scale (foundation)
+     ====================== */
+  --cms-gray-50: #f8fafc;
+  --cms-gray-100: #f1f5f9;
+  --cms-gray-200: #e2e8f0;
+  --cms-gray-300: #cbd5e1;
+  --cms-gray-400: #94a3b8;
+  --cms-gray-500: #64748b;
+  --cms-gray-600: #475569;
+  --cms-gray-700: #334155;
+  --cms-gray-800: #1f2937;
+  --cms-gray-900: #0f172a;
+  --cms-gray-950: #020617;
+
+  /* ======================
+     2) Primary scale (Swift Blue)
+     ====================== */
+  --cms-primary-50: #eef6ff;
+  --cms-primary-100: #dbeafe;
+  --cms-primary-200: #bfdbfe;
+  --cms-primary-300: #93c5fd;
+  --cms-primary-400: #60a5fa;
+  --cms-primary-500: #3b82f6;
+  --cms-primary-600: #3c78f7;
+  --cms-primary-700: #1d4ed8;
+  --cms-primary-800: #1e40af;
+  --cms-primary-900: #1e3a8a;
+  --cms-primary-950: #172554;
+
+  /* ======================
+     3) Accent scale (Aurora Teal)
+     ====================== */
+  --cms-accent-50: #ecfeff;
+  --cms-accent-100: #cffafe;
+  --cms-accent-200: #a5f3fc;
+  --cms-accent-300: #67e8f9;
+  --cms-accent-400: #22d3ee;
+  --cms-accent-500: #06b6d4;
+  --cms-accent-600: #0891b2;
+  --cms-accent-700: #0e7490;
+  --cms-accent-800: #155e75;
+  --cms-accent-900: #164e63;
+  --cms-accent-950: #083344;
+
+  /* ======================
+     4) Status scales
+     ====================== */
+  /* Success */
+  --cms-success-50: #f0fdf4;
+  --cms-success-100: #dcfce7;
+  --cms-success-200: #bbf7d0;
+  --cms-success-300: #86efac;
+  --cms-success-400: #4ade80;
+  --cms-success-500: #22c55e;
+  --cms-success-600: #16a34a;
+  --cms-success-700: #15803d;
+  --cms-success-800: #166534;
+  --cms-success-900: #14532d;
+  --cms-success-950: #052e16;
+
+  /* Warning */
+  --cms-warning-50: #fffbeb;
+  --cms-warning-100: #fef3c7;
+  --cms-warning-200: #fde68a;
+  --cms-warning-300: #fcd34d;
+  --cms-warning-400: #fbbf24;
+  --cms-warning-500: #f59e0b;
+  --cms-warning-600: #d97706;
+  --cms-warning-700: #b45309;
+  --cms-warning-800: #92400e;
+  --cms-warning-900: #78350f;
+  --cms-warning-950: #451a03;
+
+  /* Danger */
+  --cms-danger-50: #fef2f2;
+  --cms-danger-100: #fee2e2;
+  --cms-danger-200: #fecaca;
+  --cms-danger-300: #fca5a5;
+  --cms-danger-400: #f87171;
+  --cms-danger-500: #ef4444;
+  --cms-danger-600: #dc2626;
+  --cms-danger-700: #b91c1c;
+  --cms-danger-800: #991b1b;
+  --cms-danger-900: #7f1d1d;
+  --cms-danger-950: #450a0a;
+
+  /* Info */
+  --cms-info-50: #eef4ff;
+  --cms-info-100: #e0e7ff;
+  --cms-info-200: #c7d9fe;
+  --cms-info-300: #a5c9fc;
+  --cms-info-400: #819ff8;
+  --cms-info-500: #547dce;
+  --cms-info-600: #445fc1;
+  --cms-info-700: #3352b1;
+  --cms-info-800: #3051a3;
+  --cms-info-900: #2e3d81;
+  --cms-info-950: #1b264b;
+
+  /* ======================
+    5) Special scales (optional but “premium”)
+    - Violet (creative)
+    - Pink (marketing)
+    - Orange (energy)
+  ====================== */
+  --cms-violet-50: #f5f3ff;
+  --cms-violet-100: #ede9fe;
+  --cms-violet-200: #ddd6fe;
+  --cms-violet-300: #c4b5fd;
+  --cms-violet-400: #a78bfa;
+  --cms-violet-500: #8b5cf6;
+  --cms-violet-600: #7c3aed;
+  --cms-violet-700: #6d28d9;
+  --cms-violet-800: #5b21b6;
+  --cms-violet-900: #4c1d95;
+  --cms-violet-950: #2e1065;
+
+  --cms-pink-50: #fdf2f8;
+  --cms-pink-100: #fce7f3;
+  --cms-pink-200: #fbcfe8;
+  --cms-pink-300: #f9a8d4;
+  --cms-pink-400: #f472b6;
+  --cms-pink-500: #ec4899;
+  --cms-pink-600: #db2777;
+  --cms-pink-700: #be185d;
+  --cms-pink-800: #9d174d;
+  --cms-pink-900: #831843;
+  --cms-pink-950: #500724;
+
+  --cms-orange-50: #fff7ed;
+  --cms-orange-100: #ffedd5;
+  --cms-orange-200: #fed7aa;
+  --cms-orange-300: #fdba74;
+  --cms-orange-400: #fb923c;
+  --cms-orange-500: #f97316;
+  --cms-orange-600: #ea580c;
+  --cms-orange-700: #c2410c;
+  --cms-orange-800: #9a3412;
+  --cms-orange-900: #7c2d12;
+  --cms-orange-950: #431407;
+
+  /* ======================
+     6) Social / Brand colors
+     ====================== */
+  --cms-facebook: #1877f2;
+  --cms-twitter: #1da1f2;
+  --cms-x: #0b0f19;
+  --cms-linkedin: #0a66c2;
+  --cms-google: #ea4335;
+  --cms-youtube: #ff0000;
+  --cms-vimeo: #1ab7ea;
+  --cms-dribbble: #ea4c89;
+  --cms-github: #18181b;
+  --cms-instagram: #e1306c;
+  --cms-pinterest: #e60023;
+  --cms-rss: #f59e0b;
+
+  /* ======================
+     7) Alpha tokens (glass / overlay)
+     ====================== */
+  --cms-alpha-1: rgba(2, 6, 23, 0.04);
+  --cms-alpha-2: rgba(2, 6, 23, 0.08);
+  --cms-alpha-3: rgba(2, 6, 23, 0.12);
+  --cms-alpha-4: rgba(2, 6, 23, 0.18);
+  --cms-alpha-5: rgba(2, 6, 23, 0.26);
+
+  /* ======================
+     8) Shadows (premium)
+     ====================== */
+  --cms-shadow-sm: 0 1px 2px rgba(2, 6, 23, .30);
+  --cms-shadow-md: 0 10px 30px rgba(2, 6, 23, .50);
+  --cms-shadow-lg: 0 22px 60px rgba(2, 6, 23, .70);
+
+  /* =========================================================
+     SEMANTIC TOKENS (the real win)
+     ========================================================= */
+
+  /* Backgrounds & surfaces */
+  --cms-bg: var(--cms-gray-50);
+  --cms-bg-2: var(--cms-gray-100);
+  --cms-surface: var(--cms-gray-200);
+  --cms-surface-2: var(--cms-gray-300);
+  --cms-surface-3: var(--cms-gray-400);
+
+  /* Text */
+  --cms-text: var(--cms-gray-900);
+  --cms-text-2: var(--cms-gray-700);
+  --cms-text-3: var(--cms-gray-500);
+  --cms-text-inverse: #282828;
+
+  /* Borders */
+
+
+
+  /* Brand actions */
+  --cms-accent: var(--cms-accent-600);
+  --cms-accent-soft: var(--cms-accent-500);
+  --cms-accent-text: var(--cms-accent-800);
+
+  /* Focus ring */
+  --cms-ring: rgba(59, 130, 246, 0.45);
+  --cms-ring-strong: rgba(59, 130, 246, 0.65);
+
+  /* Components defaults */
+  --cms-card-bg: var(--cms-surface);
+  --cms-card-border: var(--cms-border-color);
+
+  --cms-btn-bg: var(--cms-primary);
+  --cms-btn-bg-hover: var(--cms-primary-hover);
+  --cms-btn-text: var(--cms-text-inverse);
+
+  --cms-input-bg: var(--cms-surface);
+  --cms-input-border: var(--cms-border-color);
+  --cms-input-text: var(--cms-text);
+  --cms-input-placeholder: var(--cms-text-3);
+
+  --cms-chip-bg: var(--cms-surface-2);
+  --cms-chip-text: var(--cms-text-2);
+  --cms-badge-bg: var(--cms-primary-soft);
+  --cms-badge-text: var(--cms-primary-text);
+
+
+  --cms-panel: #e9e9e9;
+  --cms-text: #434343;
+  --cms-muted: #5d5d5d;
+
+  --cms-border-color: rgba(93, 95, 100, 0.35);
+  --cms-border-color-2: var(--cms-gray-400);
+  --cms-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+  --cms-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.25);
+  --cms-icon-color: var(--cms-text);
+  --cms-icon-size-xxs: 8px;
+  --cms-icon-size-xs: 10px;
+  --cms-icon-size-sm: 14px;
+  --cms-icon-size-md: 18px;
+  --cms-icon-size-lg: 24px;
+  --cms-icon-size-xl: 32px;
+  --cms-icon-size-xxl: 42px;
+  --cms-icon-size-xxxl: 64px;
+  --cms-icon-stroke-width: 0.1rem;
+
+  --cms-size-xxs: 6px;
+  --cms-size-xs: 10px;
+  --cms-size-sm: 18px;
+  --cms-size-md: 26px;
+  --cms-size-lg: 32px;
+  --cms-size-xl: 48px;
+  --cms-size-xxl: 64px;
+  --cms-size-xxxl: 128px;
+
+  /* States */
+
+  --cms-primary: var(--cms-primary-600);
+  --cms-primary-hover: var(--cms-primary-400);
+  --cms-primary-active: var(--cms-primary-800);
+  --cms-primary-focus: var(--cms-primary-600);
+  --cms-primary-disabled: var(--cms-primary-300);
+  --cms-primary-soft: var(--cms-primary-500);
+  --cms-primary-text: var(--cms-primary-500);
+
+  --cms-secondary: var(--cms-gray-600);
+  --cms-secondary-hover: var(--cms-gray-400);
+  --cms-secondary-active: var(--cms-gray-800);
+  --cms-secondary-focus: var(--cms-gray-600);
+  --cms-secondary-disabled: var(--cms-gray-300);
+  --cms-secondary-soft: var(--cms-gray-500);
+  --cms-secondary-text: var(--cms-gray-500);
+
+  --cms-danger: var(--cms-danger-600);
+  --cms-danger-hover: var(--cms-danger-400);
+  --cms-danger-active: var(--cms-danger-800);
+  --cms-danger-focus: var(--cms-danger-600);
+  --cms-danger-disabled: var(--cms-danger-300);
+  --cms-danger-soft: var(--cms-danger-400);
+  --cms-danger-text: var(--cms-danger-500);
+
+  --cms-warning: var(--cms-warning-500);
+  --cms-warning-hover: var(--cms-warning-400);
+  --cms-warning-active: var(--cms-warning-400);
+  --cms-warning-focus: var(--cms-warning-600);
+  --cms-warning-disabled: var(--cms-warning-700);
+  --cms-warning-soft: var(--cms-warning-400);
+  --cms-warning-text: var(--cms-warning-500);
+
+  --cms-success: var(--cms-success-600);
+  --cms-success-hover: var(--cms-success-500);
+  --cms-success-active: var(--cms-success-800);
+  --cms-success-focus: var(--cms-success-600);
+  --cms-success-disabled: var(--cms-success-300);
+  --cms-success-soft: var(--cms-success-600);
+  --cms-success-text: var(--cms-success-500);
+
+  --cms-info: var(--cms-info-600);
+  --cms-info-hover: var(--cms-info-400);
+  --cms-info-active: var(--cms-info-800);
+  --cms-info-focus: var(--cms-info-600);
+  --cms-info-disabled: var(--cms-info-300);
+  --cms-info-soft: var(--cms-info-500);
+  --cms-info-text: var(--cms-info-500);
+
+  --cms-dark: var(--cms-gray-800);
+  --cms-dark-hover: var(--cms-gray-600);
+  --cms-dark-active: var(--cms-gray-700);
+  --cms-dark-focus: var(--cms-gray-700);
+  --cms-dark-disabled: var(--cms-gray-700);
+  --cms-dark-soft: var(--cms-gray-700);
+  --cms-dark-text: var(--cms-gray-100);
+
+  --cms-light: var(--cms-bg-2);
+  --cms-light-hover: var(--cms-surface);
+  --cms-light-active: var(--cms-surface-2);
+  --cms-light-focus: var(--cms-bg-2);
+  --cms-light-disabled: var(--cms-surface-2);
+  --cms-light-soft: var(--cms-gray-100);
+  --cms-light-text: var(--cms-gray-900);
+
+  --cms-font-size: 14px;
+  --cms-font-weight: 400;
+  --cms-font-family: "Nunito", sans-serif;
+  --set-icon-size: calc(var(--cms-font-size) + 4px);
+
+  --cms-font-size-xxs: 6px;
+  --cms-font-size-xs: 10px;
+  --cms-font-size-sm: 12px;
+  --cms-font-size-md: 14px;
+  --cms-font-size-lg: 18px;
+  --cms-font-size-xl: 24px;
+  --cms-font-size-xxl: 32px;
+  --cms-font-size-xxxl: 48px;
+
+  --cms-input-height-xxs: 16px;
+  --cms-input-height-xs: 20px;
+  --cms-input-height-sm: 24px;
+  --cms-input-height-md: 32px;
+  --cms-input-height-lg: 48px;
+  --cms-input-height-xl: 64px;
+  --cms-input-height-xxl: 80px;
+
+  --set-shadow: 0 3px 6px color-mix(in srgb, var(--cms-gray-600) 40%, transparent);
+  --set-color-0: var(--cms-gray-100);
+  --set-color-1: var(--cms-gray-300);
+  --set-color-2: var(--cms-gray-300);
+  --set-color-3: var(--cms-gray-500);
+  --set-color-4: var(--cms-gray-600);
+  --set-border-width: 1px;
+
+  --set-gradient-deg: 180deg;
+
+  --cms-b-radius-default: 4px;
+  --cms-input-height-default: var(--cms-input-height-md);
+  --cms-select-bg-default: var(--cms-panel);
+  --cms-bg-default: var(--cms-panel);
+
+  --cms-theme-color-1: #f8f9fa;
+  --cms-theme-color-2: #e9ecef;
+  --cms-theme-color-3: #dee2e6;
+  --cms-theme-color-4: #ced4da;
+  --cms-theme-color-5: #adb5bd;
+  --cms-theme-color-6: #868e96;
+  --cms-theme-color-7: #495057;
+  --cms-theme-color-8: #343a40;
+  --cms-theme-color-9: #212529;
+}
+
+/* =====================================================================
+   DARK THEME (high quality)
+   ===================================================================== */
+:root[data-theme="dark"] {
+  --cms-alpha-1: rgba(255, 255, 255, 0.04);
+  --cms-alpha-2: rgba(255, 255, 255, 0.08);
+  --cms-alpha-3: rgba(255, 255, 255, 0.12);
+  --cms-alpha-4: rgba(255, 255, 255, 0.18);
+  --cms-alpha-5: rgba(255, 255, 255, 0.26);
+
+  --cms-bg: #121212;
+  --cms-bg-2: #0b1020;
+  --cms-surface: #0f172a;
+  --cms-surface-2: #111c34;
+  --cms-surface-3: #16213f;
+
+  --cms-text: #e5e7eb;
+  --cms-text-2: #cbd5e1;
+  --cms-text-3: #94a3b8;
+  --cms-text-inverse: #0b1020;
+
+  --cms-panel: #10141e;
+  --cms-text: #cbcbcb;
+  --cms-muted: #6b6b6b;
+
+  --cms-border-color: rgba(148, 163, 184, 0.18);
+  --cms-border-color-2: rgba(148, 163, 184, 0.26);
+
+  --cms-accent: var(--cms-accent-400);
+  --cms-accent-soft: rgba(34, 211, 238, 0.12);
+  --cms-accent-text: var(--cms-accent-200);
+
+  --cms-ring: rgba(96, 165, 250, 0.45);
+  --cms-ring-strong: rgba(96, 165, 250, 0.65);
+
+  --cms-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
+  --cms-shadow-md: 0 10px 30px rgba(0, 0, 0, .40);
+  --cms-shadow-lg: 0 22px 60px rgba(0, 0, 0, .70);
+
+  --cms-card-bg: var(--cms-surface);
+  --cms-card-border: var(--cms-border-color);
+
+  --cms-input-bg: rgba(255, 255, 255, 0.02);
+  --cms-input-border: var(--cms-border-color);
+  --cms-input-text: var(--cms-text);
+
+  --cms-b-radius-default: 4px;
+  --cms-input-height-default: var(--cms-input-height-md);
+  --cms-select-bg-default: var(--cms-panel);
+  --cms-bg-default: var(--cms-panel);
+
+  --cms-theme-color-1: #212529;
+  --cms-theme-color-2: #343a40;
+  --cms-theme-color-3: #495057;
+  --cms-theme-color-4: #868e96;
+  --cms-theme-color-5: #adb5bd;
+  --cms-theme-color-6: #ced4da;
+  --cms-theme-color-7: #dee2e6;
+  --cms-theme-color-8: #e9ecef;
+  --cms-theme-color-9: #f8f9fa;
+
+}
+
+/* =====================================================================
+   BRAND SKINS (optional — 1 linea per cambiare “brand”)
+   ===================================================================== */
+
+/* Emerald brand */
+:root[data-brand="emerald"] {
+  --cms-primary-500: #10b981;
+  --cms-primary-600: #059669;
+  --cms-primary-700: #047857;
+
+  --cms-primary: var(--cms-primary-600);
+  --cms-primary-hover: var(--cms-primary-700);
+  --cms-ring: rgba(16, 185, 129, 0.45);
+}
+
+/* Violet brand */
+:root[data-brand="violet"] {
+  --cms-primary-500: #8b5cf6;
+  --cms-primary-600: #7c3aed;
+  --cms-primary-700: #6d28d9;
+
+  --cms-primary: var(--cms-primary-600);
+  --cms-primary-hover: var(--cms-primary-700);
+  --cms-ring: rgba(139, 92, 246, 0.45);
+}
+
+/* FONTS */
+@font-face {
+  font-family: "Nunito";
+  src: url("../fonts/Nunito-ExtraLight.ttf") format("truetype");
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Nunito";
+  src: url("../fonts/Nunito-ExtraLightItalic.ttf") format("truetype");
+  font-weight: 200;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Nunito";
+  src: url("../fonts/Nunito-Light.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Nunito";
+  src: url("../fonts/Nunito-LightItalic.ttf") format("truetype");
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Nunito";
+  src: url("../fonts/Nunito-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Nunito";
+  src: url("../fonts/Nunito-Italic.ttf") format("truetype");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Nunito";
+  src: url("../fonts/Nunito-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Nunito";
+  src: url("../fonts/Nunito-MediumItalic.ttf") format("truetype");
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Nunito";
+  src: url("../fonts/Nunito-SemiBold.ttf") format("truetype");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Nunito";
+  src: url("../fonts/Nunito-SemiBoldItalic.ttf") format("truetype");
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Nunito";
+  src: url("../fonts/Nunito-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Nunito";
+  src: url("../fonts/Nunito-BoldItalic.ttf") format("truetype");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Nunito";
+  src: url("../fonts/Nunito-ExtraBold.ttf") format("truetype");
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Nunito";
+  src: url("../fonts/Nunito-ExtraBoldItalic.ttf") format("truetype");
+  font-weight: 800;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Nunito";
+  src: url("../fonts/Nunito-Black.ttf") format("truetype");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "Nunito";
+  src: url("../fonts/Nunito-BlackItalic.ttf") format("truetype");
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Material Symbols Outlined';
+  font-style: normal;
+  font-weight: 100 700;
+  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v311/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2) format('woff2');
+}
+
+:root {
+  --cms-font: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+}
+
+*,
+*::before,
+*::after {
+  font-family: var(--cms-font);
+}