@lumston/ds-angular 0.0.6 → 0.0.8

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

@@ -1,178 +0,0 @@
-/* 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/overlay/popover/popover.styles.css

@@ -1,112 +0,0 @@
-/* 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/overlay/tooltip/tooltip.styles.css

@@ -1,172 +0,0 @@
-/* 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/styles/index.css

@@ -1,28 +0,0 @@
-/* Lumston Design System — All Styles */
-
-@import './_tokens.css';
-@import './_base.css';
-@import "./inputs/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/typography/link/link.styles.css

@@ -1,93 +0,0 @@
-/* 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;
-}