@lumston/ds-angular 0.0.3 → 0.0.5

package/styles/components/overlay/modal/modal.styles.css

@@ -0,0 +1,178 @@
+/* Modal Component — Pure CSS */
+
+/* === Host === */
+:host {
+  display: contents;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Overlay (Backdrop)
+   ══════════════════════════════════════════════════════════════════════ */
+
+.modal-overlay {
+  align-items: center;
+  background-color: var(--ls-modal-backdrop-bg);
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  padding: 1rem;
+  position: fixed;
+  z-index: var(--ls-modal-z-index);
+}
+
+/* Scroll=body: backdrop is scrollable */
+.modal-overlay-body {
+  align-items: flex-start;
+  overflow-y: auto;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Panel
+   ══════════════════════════════════════════════════════════════════════ */
+
+.modal-panel {
+  background-color: var(--ls-color-white);
+  border-radius: var(--ls-border-radius-lg);
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 2rem);
+  outline: none;
+  position: relative;
+  width: 100%;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Size Modifiers (max-width)
+   ══════════════════════════════════════════════════════════════════════ */
+
+.modal-max-sm {
+  max-width: 24rem;
+}
+
+.modal-max-md {
+  max-width: 32rem;
+}
+
+.modal-max-lg {
+  max-width: 48rem;
+}
+
+.modal-max-xl {
+  max-width: 64rem;
+}
+
+.modal-max-full {
+  max-width: 100%;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Full Screen
+   ══════════════════════════════════════════════════════════════════════ */
+
+.modal-full-screen {
+  border-radius: 0;
+  height: 100vh;
+  max-height: 100vh;
+  max-width: 100vw;
+  width: 100vw;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Full Width
+   ══════════════════════════════════════════════════════════════════════ */
+
+.modal-full-width {
+  max-width: 100%;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Scroll Variants
+   ══════════════════════════════════════════════════════════════════════ */
+
+/* scroll=dialog: panel height is constrained, inner content scrolls */
+.modal-scroll-dialog {
+  max-height: calc(100vh - 2rem);
+  overflow: hidden;
+}
+
+/* scroll=body: panel grows to natural height, overlay scrolls */
+.modal-scroll-body {
+  max-height: none;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Close Button
+   ══════════════════════════════════════════════════════════════════════ */
+
+.modal-close-btn {
+  align-items: center;
+  background: transparent;
+  border: none;
+  border-radius: 0.25rem;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  padding: 0.25rem;
+  position: absolute;
+  right: 0.75rem;
+  top: 0.75rem;
+  transition: background-color 0.15s;
+}
+
+.modal-close-btn:hover {
+  background-color: var(--ls-color-dark-light);
+}
+
+/* Prevent title text from overlapping the close button */
+.modal-has-close-btn .modal-title {
+  padding-right: 3rem;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Subcomponent Areas
+   ══════════════════════════════════════════════════════════════════════ */
+
+.modal-title {
+  border-bottom: 1px solid var(--ls-color-dark-light);
+  font-family: var(--ls-font-family);
+  font-size: 1.125rem;
+  font-weight: 700;
+  padding: 1.25rem 1.5rem;
+}
+
+.modal-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+}
+
+.modal-actions {
+  border-top: 1px solid var(--ls-color-dark-light);
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+  padding: 1rem 1.5rem;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Dark Mode
+   ══════════════════════════════════════════════════════════════════════ */
+
+body.dark .modal-panel {
+  background-color: #1b2e4b;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+}
+
+body.dark .modal-title {
+  border-bottom-color: #253958;
+}
+
+body.dark .modal-actions {
+  border-top-color: #253958;
+}
+
+body.dark .modal-close-btn:hover {
+  background-color: #253958;
+}

package/styles/components/overlay/popover/popover.styles.css

@@ -0,0 +1,112 @@
+/* Popover Component -- Pure CSS */
+
+:host {
+  display: contents;
+}
+
+.popover-panel {
+  position: fixed;
+  top: var(--popover-top, 0);
+  left: var(--popover-left, 0);
+  z-index: 1050;
+  background: var(--ls-color-white, #fff);
+  border: 1px solid var(--ls-color-border, #e0e6ed);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  padding: 12px 16px;
+  animation-duration: 150ms;
+  animation-fill-mode: both;
+  animation-timing-function: ease-out;
+}
+
+/* Enter animation */
+.popover-enter {
+  animation-name: popoverFadeIn;
+}
+
+/* Exit animation */
+.popover-exit {
+  animation-name: popoverFadeOut;
+}
+
+@keyframes popoverFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes popoverFadeOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+/* Arrow */
+.popover-arrow {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: inherit;
+  border: inherit;
+  transform: rotate(45deg);
+  z-index: -1; /* Esto es clave: se mete detrás del panel */
+}
+
+.popover-arrow-top {
+  bottom: -6px; /* Ajuste fino de -5 a -6 */
+  left: 50%;
+  margin-left: -5px;
+  border-top: 0;
+  border-left: 0;
+}
+
+.popover-arrow-bottom {
+  top: -6px; /* Ajuste fino de -5 a -6 */
+  left: 50%;
+  margin-left: -5px;
+  border-bottom: 0;
+  border-right: 0;
+}
+
+/* AQUÍ ESTÁ EL CAMBIO IMPORTANTE */
+.popover-arrow-left {
+  right: -6px; /* Ajuste para que se esconda el rombo */
+  top: 50%;
+  margin-top: -5px;
+  border-bottom: 0; /* Cambiamos qué bordes ocultamos para laterales */
+  border-left: 0;
+}
+
+.popover-arrow-right {
+  left: -6px; /* Ajuste para que se esconda el rombo */
+  top: 50%;
+  margin-top: -5px;
+  border-top: 0; /* Cambiamos qué bordes ocultamos para laterales */
+  border-right: 0;
+}
+
+/* Dark mode */
+/* Opción A: La forma recomendada por Angular */
+:host-context(body.dark) .popover-panel {
+  background: #1b2e4b !important; /* Forzamos el color oscuro de fondo */
+  border-color: #253b5c !important;
+  color: #e0e6ed !important; /* Texto claro para que contraste */
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
+}
+
+/* Opción B: Si el body tiene la clase directamente */
+:host-context(.dark) .popover-panel {
+  background: #1b2e4b !important;
+  border-color: #253b5c !important;
+  color: #e0e6ed !important;
+}

package/styles/components/overlay/tooltip/tooltip.styles.css

@@ -0,0 +1,172 @@
+/* Tooltip Component — Pure CSS */
+
+/* === Host === */
+:host {
+    display: contents;
+}
+
+/* === Trigger === */
+.ls-tooltip-trigger {
+    position: relative;
+    display: inline-flex;
+}
+
+.ls-tooltip-disabled {
+    pointer-events: none;
+}
+
+/* === Tooltip Box === */
+.tooltip-box {
+    position: absolute;
+    z-index: 10;
+    padding: 2px 8px;
+    border-radius: 6px;
+    font-family: var(--ls-font-family);
+    font-size: 0.800rem;
+    font-weight: 500;
+    white-space: nowrap;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    pointer-events: none;
+    animation: tooltip-fade-in var(--ls-transition-duration) ease forwards;
+}
+
+/* === Animation === */
+@keyframes tooltip-fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Placement Modifiers
+   ══════════════════════════════════════════════════════════════════════ */
+
+.tooltip-top {
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.tooltip-bottom {
+    top: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.tooltip-left {
+    right: calc(100% + 8px);
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.tooltip-right {
+    left: calc(100% + 8px);
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Arrow
+   ══════════════════════════════════════════════════════════════════════ */
+
+.tooltip-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: 6px solid transparent;
+}
+
+/* Arrow for top placement — arrow at bottom */
+.tooltip-top .tooltip-arrow {
+    bottom: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-bottom: none;
+    border-top-color: inherit;
+}
+
+/* Arrow for bottom placement — arrow at top */
+.tooltip-bottom .tooltip-arrow {
+    top: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-top: none;
+    border-bottom-color: inherit;
+}
+
+/* Arrow for left placement — arrow at right */
+.tooltip-left .tooltip-arrow {
+    right: -6px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-right: none;
+    border-left-color: inherit;
+}
+
+/* Arrow for right placement — arrow at left */
+.tooltip-right .tooltip-arrow {
+    left: -6px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-left: none;
+    border-right-color: inherit;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Background Classes
+   ══════════════════════════════════════════════════════════════════════ */
+
+.tooltip-bg-primary {
+    background-color: var(--ls-color-primary);
+    color: #ffffff;
+    border-color: var(--ls-color-primary);
+}
+
+.tooltip-bg-success {
+    background-color: var(--ls-color-success);
+    color: #ffffff;
+    border-color: var(--ls-color-success);
+}
+
+.tooltip-bg-info {
+    background-color: var(--ls-color-info);
+    color: #ffffff;
+    border-color: var(--ls-color-info);
+}
+
+.tooltip-bg-danger {
+    background-color: var(--ls-color-danger);
+    color: #ffffff;
+    border-color: var(--ls-color-danger);
+}
+
+.tooltip-bg-warning {
+    background-color: var(--ls-color-warning);
+    color: #ffffff;
+    border-color: var(--ls-color-warning);
+}
+
+.tooltip-bg-secondary {
+    background-color: var(--ls-color-secondary);
+    color: #ffffff;
+    border-color: var(--ls-color-secondary);
+}
+
+.tooltip-bg-dark {
+    background-color: var(--ls-color-dark);
+    color: #ffffff;
+    border-color: var(--ls-color-dark);
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Dark Mode
+   ══════════════════════════════════════════════════════════════════════ */
+
+body.dark .tooltip-bg-dark {
+    background-color: #e0e6ed;
+    color: var(--ls-color-dark);
+    border-color: #e0e6ed;
+}

package/styles/components/styles/_base.css

@@ -0,0 +1,10 @@
+/* Lumston Design System — Base / Keyframes */
+
+@keyframes ls-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}

package/styles/components/styles/_tokens.css

@@ -0,0 +1,75 @@
+/* Lumston Design System — Design Tokens */
+
+:root {
+    /* Primary */
+    --ls-color-primary: #4361ee;
+    --ls-color-primary-light: #eaf1ff;
+    --ls-color-primary-dark-light: rgba(67, 97, 238, 0.15);
+
+    /* Secondary */
+    --ls-color-secondary: #805dca;
+    --ls-color-secondary-light: #ebe4f7;
+    --ls-color-secondary-dark-light: rgb(128 93 202 / 15%);
+
+    /* Success */
+    --ls-color-success: #00ab55;
+    --ls-color-success-light: #ddf5f0;
+    --ls-color-success-dark-light: rgba(0, 171, 85, 0.15);
+
+    /* Danger */
+    --ls-color-danger: #e7515a;
+    --ls-color-danger-light: #fff5f5;
+    --ls-color-danger-dark-light: rgba(231, 81, 90, 0.15);
+
+    /* Error (alias of Danger) */
+    --ls-color-error: #e7515a;
+    --ls-color-error-light: #fff5f5;
+    --ls-color-error-dark-light: rgba(231, 81, 90, 0.15);
+
+    /* Warning */
+    --ls-color-warning: #e2a03f;
+    --ls-color-warning-light: #fff9ed;
+    --ls-color-warning-dark-light: rgba(226, 160, 63, 0.15);
+
+    /* Info */
+    --ls-color-info: #2196f3;
+    --ls-color-info-light: #e7f7ff;
+    --ls-color-info-dark-light: rgba(33, 150, 243, 0.15);
+
+    /* Dark */
+    --ls-color-dark: #3b3f5c;
+    --ls-color-dark-light: #eaeaec;
+    --ls-color-dark-dark-light: rgba(59, 63, 92, 0.15);
+
+    /* Black */
+    --ls-color-black: #0e1726;
+    --ls-color-black-light: #e3e4eb;
+    --ls-color-black-dark-light: rgba(14, 23, 38, 0.15);
+
+    /* White */
+    --ls-color-white: #ffffff;
+    --ls-color-white-light: #e0e6ed;
+    --ls-color-white-dark: #888ea8;
+
+    /* Typography */
+    --ls-font-family: 'Nunito', sans-serif;
+
+    /* Transitions */
+    --ls-transition-duration: 300ms;
+
+    /* Border radius */
+    --ls-border-radius-md: 0.375rem;
+    --ls-border-radius-lg: 0.5rem;
+    --ls-border-radius-full: 9999px;
+
+    /* Modal */
+    --ls-modal-z-index: 1000;
+    --ls-modal-backdrop-bg: rgba(0, 0, 0, 0.5);
+
+    /* Menu */
+    --ls-menu-z-index: 1001;
+
+    /* Gradient */
+    --ls-gradient-start: #ef1262;
+    --ls-gradient-end: #4361ee;
+}

package/styles/components/styles/index.css

@@ -0,0 +1,28 @@
+/* Lumston Design System — All Styles */
+
+@import './_tokens.css';
+@import './_base.css';
+@import "./components/button/button.styles.css"
+/* @import '../inputs/button/button.styles.css';
+@import '../inputs/checkbox/checkbox.styles.css';
+@import '../inputs/icon-button/icon-button.styles.css';
+@import '../inputs/radio-button/radio-button.styles.css';
+@import '../inputs/slider/slider.styles.css';
+@import '../inputs/switch/switch.styles.css';
+@import '../typography/text/text.styles.css';
+@import '../typography/tag/tag.styles.css';
+@import '../typography/link/link.styles.css';
+@import '../feedback/loader/loader.styles.css';
+@import '../overlay/tooltip/tooltip.styles.css';
+@import '../media/avatar/avatar.styles.css';
+@import '../media/avatar-group/avatar-group.styles.css';
+@import '../media/logo/logo.styles.css';
+@import '../data-display/badge/badge.styles.css';
+@import '../data-display/chip/chip.styles.css';
+@import '../feedback/progress-bar/progress-bar.styles.css';
+@import '../feedback/alert/alert.styles.css';
+@import '../overlay/modal/modal.styles.css';
+@import '../overlay/popover/popover.styles.css';
+@import '../navigation/pagination/pagination.styles.css';
+@import '../navigation/breadcrumb/breadcrumb.styles.css';
+@import '../overlay/menu/menu.styles.css'; */

package/styles/components/typography/link/link.styles.css

@@ -0,0 +1,93 @@
+/* Link Component — Pure CSS */
+
+:host {
+  display: contents;
+}
+
+.link.text {
+  display: inline;
+  margin: 0;
+  cursor: pointer;
+  transition: color var(--ls-transition-duration),
+    text-decoration var(--ls-transition-duration);
+}
+
+/* ── Link colors ── */
+
+.link-color-inherit {
+  color: inherit;
+}
+
+.link-color-primary {
+  color: var(--ls-color-primary);
+}
+
+.link-color-secondary {
+  color: var(--ls-color-secondary);
+}
+
+.link-color-success {
+  color: var(--ls-color-success);
+}
+
+.link-color-error {
+  color: var(--ls-color-danger);
+}
+
+.link-color-info {
+  color: var(--ls-color-info);
+}
+
+.link-color-warning {
+  color: var(--ls-color-warning);
+}
+
+/* ── Hover states ── */
+
+.link-color-primary:hover {
+  opacity: 0.8;
+}
+
+.link-color-secondary:hover {
+  opacity: 0.8;
+}
+
+.link-color-success:hover {
+  opacity: 0.8;
+}
+
+.link-color-error:hover {
+  opacity: 0.8;
+}
+
+.link-color-info:hover {
+  opacity: 0.8;
+}
+
+.link-color-warning:hover {
+  opacity: 0.8;
+}
+
+/* ── Underline styles ── */
+
+.link-underline-always {
+  text-decoration: underline;
+}
+
+.link-underline-hover {
+  text-decoration: none;
+}
+
+.link-underline-hover:hover {
+  text-decoration: underline;
+}
+
+.link-underline-none {
+  text-decoration: none;
+}
+
+/* ── Dark mode ── */
+
+body.dark .link-color-inherit {
+  color: #e0e6ed;
+}