@albi_scando/as-design-system-lib 1.4.0 → 1.5.1

package/dist/styles/themes/colors.scss

@@ -0,0 +1,19 @@
+@use 'colors/dark.scss';
+@use 'colors/dark-purple.scss';
+@use 'colors/ferrari.scss';
+@use 'colors/light.scss';
+@use 'colors/light-blue.scss';
+
+:root {
+  /* Neutral Colors (used across all themes) */
+  --color-neutral-50: #f9fafb;
+  --color-neutral-100: #f3f4f6;
+  --color-neutral-200: #e5e7eb;
+  --color-neutral-300: #d1d5db;
+  --color-neutral-400: #9ca3af;
+  --color-neutral-500: #6b7280;
+  --color-neutral-600: #4b5563;
+  --color-neutral-700: #373737;
+  --color-neutral-800: #1f2937;
+  --color-neutral-900: #111827;
+}

package/dist/styles/themes/components-styles.scss

@@ -0,0 +1,8 @@
+/* Import all component styles */
+@use '../web-components/buttons/base-button/component.scss' as base-button;
+@use '../web-components/buttons/undo-button/component.scss' as undo-button;
+@use '../web-components/buttons/confirm-button/component.scss' as confirm-button;
+@use '../web-components/dialogs/base-dialog/component.scss' as base-dialog;
+@use '../web-components/dialogs/confirmation-dialog/component.scss' as
+  confirmation-dialog;
+@use '../web-components/menus/bar-menu/component.scss' as game-menu;

package/dist/styles/themes/dark-purple.scss

@@ -0,0 +1,32 @@
+.dark-purple {
+  --color-bg-primary: #222222;
+  --color-bg-secondary: linear-gradient(135deg, #852392 0%, #090920 100%);
+  --color-bg-tertiary: #121130;
+
+  --color-hover-bg-primary: #090920;
+  --color-hover-bg-secondary: linear-gradient(135deg, #a828b9 0%, #2f0035 100%);
+  --color-hover-bg-tertiary: #3b0077;
+
+  --color-text-primary: #f1e5fe;
+  --color-text-secondary: #ddd6fe;
+  --color-text-tertiary: #c4b5fd;
+
+  --color-border-primary: #000000;
+  --color-border-secondary: #8c0095;
+  --color-border-tertiary: #a5b4fc;
+
+  --color-hover-border-primary: #000000;
+  --color-hover-border-secondary: #8c0095;
+  --color-hover-border-tertiary: #3b0077;
+
+  --color-primary: #6366f1;
+  --color-primary-light: #818cf8;
+  --color-primary-dark: #4f46e5;
+
+  --color-success: linear-gradient(135deg, #337642 0%, #084c00 100%);
+  --color-warning: linear-gradient(135deg, #ffcc37 0%, #c76a00 100%);
+  --color-error: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
+  --color-info: linear-gradient(135deg, #a78bfa 0%, #06b6d4 100%);
+
+  --window-backdrop: #000000b3;
+}

package/dist/styles/themes/dark.scss

@@ -0,0 +1,32 @@
+.dark {
+  --color-bg-primary: #313131;
+  --color-bg-secondary: #1f1f1f;
+  --color-bg-tertiary: #121130;
+
+  --color-hover-bg-primary: #090920;
+  --color-hover-bg-secondary: #141414;
+  --color-hover-bg-tertiary: #3b0077;
+
+  --color-text-primary: #eeeeee;
+  --color-text-secondary: #ddd6fe;
+  --color-text-tertiary: #c4b5fd;
+
+  --color-border-primary: #7a7a7a;
+  --color-border-secondary: #696969;
+  --color-border-tertiary: #a5b4fc;
+
+  --color-hover-border-primary: #000000;
+  --color-hover-border-secondary: #979797;
+  --color-hover-border-tertiary: #3b0077;
+
+  --color-primary: #6366f1;
+  --color-primary-light: #818cf8;
+  --color-primary-dark: #4f46e5;
+
+  --color-success: #00811a;
+  --color-warning: #e68200;
+  --color-error: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
+  --color-info: linear-gradient(135deg, #a78bfa 0%, #06b6d4 100%);
+
+  --window-backdrop: #000000b3;
+}

package/dist/styles/themes/ferrari.scss

@@ -0,0 +1,32 @@
+.ferrari {
+  --color-bg-primary: #ff2800;
+  --color-bg-secondary: #0096d6;
+  --color-bg-tertiary: #121130;
+
+  --color-hover-bg-primary: #090920;
+  --color-hover-bg-secondary: #0282cd;
+  --color-hover-bg-tertiary: #3b0077;
+
+  --color-text-primary: #ffffff;
+  --color-text-secondary: #ddd6fe;
+  --color-text-tertiary: #c4b5fd;
+
+  --color-border-primary: #ffffff;
+  --color-border-secondary: #ddebf7;
+  --color-border-tertiary: #a5b4fc;
+
+  --color-hover-border-primary: #000000;
+  --color-hover-border-secondary: #bedcff;
+  --color-hover-border-tertiary: #3b0077;
+
+  --color-primary: #6366f1;
+  --color-primary-light: #818cf8;
+  --color-primary-dark: #4f46e5;
+
+  --color-success: #0e8d00;
+  --color-warning: #fd9712;
+  --color-error: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
+  --color-info: linear-gradient(135deg, #a78bfa 0%, #06b6d4 100%);
+
+  --window-backdrop: rgba(255, 188, 183, 0.5);
+}

package/dist/styles/themes/index.scss

@@ -0,0 +1,5 @@
+/* Design System - Single Entry Point */
+/* Includes all design tokens and component styles */
+
+@use './themes.scss';
+@use './components-styles.scss';

package/dist/styles/themes/light-blue.scss

@@ -0,0 +1,32 @@
+.light-blue {
+  --color-bg-primary: #f7f7f7;
+  --color-bg-secondary: linear-gradient(135deg, #d6ebff 0%, #76bdff 100%);
+  --color-bg-tertiary: #121130;
+
+  --color-hover-bg-primary: #090920;
+  --color-hover-bg-secondary: linear-gradient(135deg, #bee7ff 0%, #56a7ee 100%);
+  --color-hover-bg-tertiary: #3b0077;
+
+  --color-text-primary: #2b2b2b;
+  --color-text-secondary: #ddd6fe;
+  --color-text-tertiary: #c4b5fd;
+
+  --color-border-primary: #d8d8d8;
+  --color-border-secondary: #ddebf7;
+  --color-border-tertiary: #a5b4fc;
+
+  --color-hover-border-primary: #000000;
+  --color-hover-border-secondary: #bedcff;
+  --color-hover-border-tertiary: #3b0077;
+
+  --color-primary: #6366f1;
+  --color-primary-light: #818cf8;
+  --color-primary-dark: #4f46e5;
+
+  --color-success: linear-gradient(135deg, #c3ffd5 0%, #7fe083 100%);
+  --color-warning: linear-gradient(135deg, #ffe38e 0%, #ffd970 100%);
+  --color-error: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
+  --color-info: linear-gradient(135deg, #a78bfa 0%, #06b6d4 100%);
+
+  --window-backdrop: #c9e6ffb3;
+}

package/dist/styles/themes/light.scss

@@ -0,0 +1,32 @@
+.light {
+  --color-bg-primary: #fbfbfb;
+  --color-bg-secondary: #f7f7f7;
+  --color-bg-tertiary: #121130;
+
+  --color-hover-bg-primary: #090920;
+  --color-hover-bg-secondary: #ededed;
+  --color-hover-bg-tertiary: #3b0077;
+
+  --color-text-primary: #141414;
+  --color-text-secondary: #ddd6fe;
+  --color-text-tertiary: #c4b5fd;
+
+  --color-border-primary: #d8d8d8;
+  --color-border-secondary: #f3f3f3;
+  --color-border-tertiary: #a5b4fc;
+
+  --color-hover-border-primary: #000000;
+  --color-hover-border-secondary: #cecece;
+  --color-hover-border-tertiary: #3b0077;
+
+  --color-primary: #6366f1;
+  --color-primary-light: #818cf8;
+  --color-primary-dark: #4f46e5;
+
+  --color-success: #97e9a8;
+  --color-warning: #ffe586;
+  --color-error: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
+  --color-info: linear-gradient(135deg, #a78bfa 0%, #06b6d4 100%);
+
+  --window-backdrop: #f7f7f7b3;
+}

package/dist/styles/themes/spacing.scss

@@ -0,0 +1,72 @@
+/* Spacing Design Tokens */
+
+:root {
+  /* Base spacing unit: 4px */
+  --spacing-0: 0;
+  --spacing-1: 0.25rem; /* 4px */
+  --spacing-2: 0.5rem; /* 8px */
+  --spacing-3: 0.75rem; /* 12px */
+  --spacing-4: 1rem; /* 16px */
+  --spacing-5: 1.25rem; /* 20px */
+  --spacing-6: 1.5rem; /* 24px */
+  --spacing-8: 2rem; /* 32px */
+  --spacing-10: 2.5rem; /* 40px */
+  --spacing-12: 3rem; /* 48px */
+  --spacing-16: 4rem; /* 64px */
+  --spacing-20: 5rem; /* 80px */
+  --spacing-24: 6rem; /* 96px */
+
+  /* Button Spacing */
+  --button-padding-block-sm: var(--spacing-1);
+  --button-padding-block-md: var(--spacing-2);
+  --button-padding-block-lg: var(--spacing-3);
+
+  --button-padding-inline-sm: var(--spacing-3);
+  --button-padding-inline-md: var(--spacing-4);
+  --button-padding-inline-lg: var(--spacing-6);
+
+  /* Component Gap */
+  --gap-xs: 0.25rem;
+  --gap-sm: 0.5rem;
+  --gap-md: 1rem;
+  --gap-lg: 1.5rem;
+  --gap-xl: 2rem;
+
+  /* Border Radius - Modern & Accessible */
+  --border-radius-none: 0;
+  --border-radius-sm: 0.25rem; /* 4px */
+  --border-radius-md: 0.5rem; /* 8px */
+  --border-radius-lg: 0.75rem; /* 12px */
+  --border-radius-xl: 1rem; /* 16px */
+  --border-radius-2xl: 1.5rem; /* 24px */
+  --border-radius-full: 9999px;
+
+  /* Border Width */
+  --border-width-0: 0;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --border-width-4: 4px;
+
+  /* Shadow System - Depth & Elevation */
+  --shadow-none: none;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-xl:
+    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+
+  /* Transition & Animation */
+  --transition-fast: 150ms;
+  --transition-base: 300ms;
+  --transition-slow: 500ms;
+
+  /* Z-Index Scale */
+  --z-index-dropdown: 1000;
+  --z-index-modal-backdrop: 1040;
+  --z-index-modal: 1050;
+  --z-index-popover: 1060;
+  --z-index-tooltip: 1070;
+}

package/dist/styles/themes/themes.scss

@@ -0,0 +1,11 @@
+/* Design System - Main Entry Point */
+
+/* Include Design Tokens */
+@use './tokens/typography.scss';
+@use './tokens/colors.scss';
+@use './tokens/spacing.scss';
+
+/* 
+  Note: Component styles are included in components-styles.scss separately.
+  They automatically inherit the CSS custom properties defined above.
+*/

package/dist/styles/themes/typography.scss

@@ -0,0 +1,44 @@
+/* Typography Design Tokens */
+
+:root {
+  /* Font Family Stack - Professional & Modern */
+  --font-family-sans:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto,
+    'Helvetica Neue', Oxygen, Ubuntu, Cantarell, sans-serif;
+  --font-family-mono: 'Courier New', Courier, monospace;
+  --font-family-base: var(--font-family-sans);
+
+  /* Font Sizes - Refined Scale */
+  --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-xxl: 2.25rem; /* 36px */
+
+  /* Font Weights - Semantic Usage */
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+
+  /* Line Heights - Improved Readability */
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+  --line-height-loose: 2;
+
+  /* Letter Spacing - Refined */
+  --letter-spacing-tight: -0.02em;
+  --letter-spacing-normal: 0em;
+  --letter-spacing-wide: 0.02em;
+
+  /* Text Transform */
+  --text-transform-none: none;
+  --text-transform-uppercase: uppercase;
+  --text-transform-capitalize: capitalize;
+}

package/dist/styles/web-components/component.scss

@@ -0,0 +1,25 @@
+dialog header[part='header'] {
+  border-bottom: var(--border-width-1) solid var(--color-neutral-600);
+  padding-bottom: var(--spacing-4);
+
+  &:empty {
+    display: none;
+  }
+}
+
+dialog div[part='body'] {
+  padding: var(--spacing-4) 0;
+
+  &:empty {
+    display: none;
+  }
+}
+
+dialog footer[part='footer'] {
+  border-top: var(--border-width-1) solid var(--color-neutral-600);
+  padding-top: var(--spacing-4);
+
+  &:empty {
+    display: none;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@albi_scando/as-design-system-lib",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "description": "A library of reusable, strongly typed Web Components built with TypeScript, designed for creating consistent and maintainable user interfaces.",
   "type": "module",
   "files": [
@@ -19,6 +19,15 @@
   "main": "./dist/as-design-system-lib.umd.js",
   "module": "./dist/as-design-system-lib.es.js",
   "typings": "./dist/types/main.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/as-design-system-lib.es.js",
+      "require": "./dist/as-design-system-lib.umd.js",
+      "types": "./dist/types/main.d.ts"
+    },
+    "./styles": "./dist/styles/themes/index.scss",
+    "./styles/*": "./dist/styles/*"
+  },
   "scripts": {
     "build": "tsc && vite build",
     "commit": "cz",