@lumston/ds-angular 0.0.6 → 0.0.7

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@lumston/ds-angular",
-    "version": "0.0.6",
-    "description": "Lumston Design System for Angular",
+    "version": "0.0.7",
+    "description": "Lumston Design System for Angular applications",
     "author": "tsanchez",
     "peerDependencies": {
         "@angular/common": ">=17.0.0",

package/styles/{styles/index.css → index.css}

@@ -2,7 +2,7 @@
 
 @import './_tokens.css';
 @import './_base.css';
-@import "./inputs/button/button.styles.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';

package/styles/data-display/badge/badge.styles.css

@@ -1,244 +0,0 @@
-/* Badge Component */
-
-/* === Host === */
-:host {
-  display: contents;
-}
-
-/* === Wrapper === */
-.badge-wrapper {
-  position: relative;
-  display: inline-flex;
-  vertical-align: middle;
-}
-
-/* === Badge Base === */
-.badge {
-  position: absolute;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.625rem;
-  font-weight: 600;
-  line-height: 1;
-  min-width: 20px;
-  height: 20px;
-  padding: 0 6px;
-  border-radius: var(--ls-border-radius-full);
-  white-space: nowrap;
-  z-index: 1;
-  pointer-events: none;
-  transition: transform var(--ls-transition-duration) ease;
-
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Variant — Solid
-   ══════════════════════════════════════════════════════════════════════ */
-
-.badge-solid {
-  color: #ffffff;
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Variant — Outlined
-   ══════════════════════════════════════════════════════════════════════ */
-
-.badge-outlined {
-  background-color: transparent;
-  border-width: 2px;
-  border-style: solid;
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Variant — Dot
-   ══════════════════════════════════════════════════════════════════════ */
-
-.badge-dot {
-  min-width: 10px;
-  width: 10px;
-  height: 10px;
-  padding: 0;
-  border-radius: 50%;
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Position Modifiers
-   ══════════════════════════════════════════════════════════════════════ */
-
-.badge-top-right {
-  top: 0;
-  right: 0;
-  transform: translate(50%, -50%);
-}
-
-.badge-top-left {
-  top: 0;
-  left: 0;
-  transform: translate(-50%, -50%);
-}
-
-.badge-bottom-right {
-  bottom: 0;
-  right: 0;
-  transform: translate(50%, 50%);
-}
-
-.badge-bottom-left {
-  bottom: 0;
-  left: 0;
-  transform: translate(-50%, 50%);
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Overlap — Circular (inward offset for round elements)
-   ══════════════════════════════════════════════════════════════════════ */
-
-.badge-overlap-circular.badge-top-right {
-  top: 8%;
-  right: 8%;
-}
-
-.badge-overlap-circular.badge-top-left {
-  top: 8%;
-  left: 8%;
-}
-
-.badge-overlap-circular.badge-bottom-right {
-  bottom: 8%;
-  right: 8%;
-}
-
-.badge-overlap-circular.badge-bottom-left {
-  bottom: 8%;
-  left: 8%;
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Severity Colors — Solid
-   ══════════════════════════════════════════════════════════════════════ */
-
-.badge-solid.badge-primary {
-  background-color: var(--ls-color-primary);
-}
-
-.badge-solid.badge-secondary {
-  background-color: var(--ls-color-secondary);
-}
-
-.badge-solid.badge-success {
-  background-color: var(--ls-color-success);
-}
-
-.badge-solid.badge-warning {
-  background-color: var(--ls-color-warning);
-}
-
-.badge-solid.badge-error {
-  background-color: var(--ls-color-danger);
-}
-
-.badge-solid.badge-info {
-  background-color: var(--ls-color-info);
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Severity Colors — Outlined
-   ══════════════════════════════════════════════════════════════════════ */
-
-.badge-outlined.badge-primary {
-  border-color: var(--ls-color-primary);
-  color: var(--ls-color-primary);
-}
-
-.badge-outlined.badge-secondary {
-  border-color: var(--ls-color-secondary);
-  color: var(--ls-color-secondary);
-}
-
-.badge-outlined.badge-success {
-  border-color: var(--ls-color-success);
-  color: var(--ls-color-success);
-}
-
-.badge-outlined.badge-warning {
-  border-color: var(--ls-color-warning);
-  color: var(--ls-color-warning);
-}
-
-.badge-outlined.badge-error {
-  border-color: var(--ls-color-danger);
-  color: var(--ls-color-danger);
-}
-
-.badge-outlined.badge-info {
-  border-color: var(--ls-color-info);
-  color: var(--ls-color-info);
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Severity Colors — Dot
-   ══════════════════════════════════════════════════════════════════════ */
-
-.badge-dot.badge-primary {
-  background-color: var(--ls-color-primary);
-}
-
-.badge-dot.badge-secondary {
-  background-color: var(--ls-color-secondary);
-}
-
-.badge-dot.badge-success {
-  background-color: var(--ls-color-success);
-}
-
-.badge-dot.badge-warning {
-  background-color: var(--ls-color-warning);
-}
-
-.badge-dot.badge-error {
-  background-color: var(--ls-color-danger);
-}
-
-.badge-dot.badge-info {
-  background-color: var(--ls-color-info);
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Dark Mode
-   ══════════════════════════════════════════════════════════════════════ */
-
-body.dark .badge-solid {
-  color: #ffffff;
-}
-
-body.dark .badge-outlined.badge-primary {
-  border-color: var(--ls-color-primary);
-  color: var(--ls-color-primary);
-}
-
-body.dark .badge-outlined.badge-secondary {
-  border-color: #9ca3af;
-  color: #9ca3af;
-}
-
-body.dark .badge-outlined.badge-success {
-  border-color: var(--ls-color-success);
-  color: var(--ls-color-success);
-}
-
-body.dark .badge-outlined.badge-warning {
-  border-color: var(--ls-color-warning);
-  color: var(--ls-color-warning);
-}
-
-body.dark .badge-outlined.badge-error {
-  border-color: var(--ls-color-danger);
-  color: var(--ls-color-danger);
-}
-
-body.dark .badge-outlined.badge-info {
-  border-color: var(--ls-color-info);
-  color: var(--ls-color-info);
-}

package/styles/data-display/chip/chip.styles.css

@@ -1,245 +0,0 @@
-:host {
-  display: contents;
-}
-
-/* Base */
-.chip {
-  display: inline-flex;
-  align-items: center;
-  border-radius: var(--ls-border-radius-full);
-  font-weight: 500;
-  white-space: nowrap;
-  vertical-align: middle;
-  outline: none;
-  transition:
-    background-color 150ms ease,
-    box-shadow 150ms ease;
-  user-select: none;
-}
-
-/* Sizes */
-.chip-medium {
-  height: 32px;
-  padding: 0 12px;
-  font-size: 0.8125rem;
-  line-height: 32px;
-  gap: 6px;
-}
-
-.chip-small {
-  height: 24px;
-  padding: 0 8px;
-  font-size: 0.75rem;
-  line-height: 24px;
-  gap: 4px;
-}
-
-/* Filled — default */
-.chip-filled.chip-default {
-  background-color: #e0e0e0;
-  color: rgba(0, 0, 0, 0.87);
-}
-
-/* Filled — semantic colors */
-.chip-filled.chip-primary {
-  background-color: var(--ls-color-primary);
-  color: #ffffff;
-}
-
-.chip-filled.chip-secondary {
-  background-color: var(--ls-color-secondary);
-  color: #ffffff;
-}
-
-.chip-filled.chip-success {
-  background-color: var(--ls-color-success);
-  color: #ffffff;
-}
-
-.chip-filled.chip-warning {
-  background-color: var(--ls-color-warning);
-  color: #ffffff;
-}
-
-.chip-filled.chip-error {
-  background-color: var(--ls-color-danger);
-  color: #ffffff;
-}
-
-.chip-filled.chip-info {
-  background-color: var(--ls-color-info);
-  color: #ffffff;
-}
-
-/* Outlined — default */
-.chip-outlined.chip-default {
-  background-color: transparent;
-  border: 1px solid #bdbdbd;
-  color: rgba(0, 0, 0, 0.87);
-}
-
-/* Outlined — semantic colors */
-.chip-outlined.chip-primary {
-  background-color: transparent;
-  border: 1px solid var(--ls-color-primary);
-  color: var(--ls-color-primary);
-}
-
-.chip-outlined.chip-secondary {
-  background-color: transparent;
-  border: 1px solid var(--ls-color-secondary);
-  color: var(--ls-color-secondary);
-}
-
-.chip-outlined.chip-success {
-  background-color: transparent;
-  border: 1px solid var(--ls-color-success);
-  color: var(--ls-color-success);
-}
-
-.chip-outlined.chip-warning {
-  background-color: transparent;
-  border: 1px solid var(--ls-color-warning);
-  color: var(--ls-color-warning);
-}
-
-.chip-outlined.chip-error {
-  background-color: transparent;
-  border: 1px solid var(--ls-color-danger);
-  color: var(--ls-color-danger);
-}
-
-.chip-outlined.chip-info {
-  background-color: transparent;
-  border: 1px solid var(--ls-color-info);
-  color: var(--ls-color-info);
-}
-
-/* Clickable */
-.chip-clickable {
-  cursor: pointer;
-}
-
-.chip-clickable:hover {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.chip-clickable.chip-filled.chip-default:hover {
-  background-color: #d5d5d5;
-}
-
-.chip-clickable.chip-filled.chip-primary:hover {
-  filter: brightness(0.9);
-}
-
-.chip-clickable.chip-filled.chip-secondary:hover {
-  filter: brightness(0.9);
-}
-
-.chip-clickable.chip-filled.chip-success:hover {
-  filter: brightness(0.9);
-}
-
-.chip-clickable.chip-filled.chip-warning:hover {
-  filter: brightness(0.9);
-}
-
-.chip-clickable.chip-filled.chip-error:hover {
-  filter: brightness(0.9);
-}
-
-.chip-clickable.chip-filled.chip-info:hover {
-  filter: brightness(0.9);
-}
-
-.chip-clickable.chip-outlined:hover {
-  background-color: rgba(0, 0, 0, 0.04);
-}
-
-/* Disabled */
-.chip-disabled {
-  opacity: 0.6;
-  pointer-events: none;
-  cursor: default;
-}
-
-/* Avatar */
-.chip-avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  object-fit: cover;
-  margin-left: -4px;
-}
-
-.chip-small .chip-avatar {
-  width: 18px;
-  height: 18px;
-  margin-left: -2px;
-}
-
-/* Icon */
-.chip-icon {
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.chip-icon > svg {
-  width: 18px;
-  height: 18px;
-}
-
-.chip-small .chip-icon > svg {
-  width: 16px;
-  height: 16px;
-}
-
-/* Delete button */
-.chip-delete {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  cursor: pointer;
-  border: none;
-  background: transparent;
-  color: inherit;
-  opacity: 0.7;
-  padding: 0;
-  margin-right: -4px;
-  transition: opacity 150ms ease;
-}
-
-.chip-delete:hover {
-  opacity: 1;
-}
-
-.chip-delete-svg {
-  width: 18px;
-  height: 18px;
-}
-
-.chip-small .chip-delete-svg {
-  width: 16px;
-  height: 16px;
-}
-
-/* Dark Mode */
-body.dark .chip-filled.chip-default {
-  background-color: #4a4a4a;
-  color: #e0e0e0;
-}
-
-body.dark .chip-clickable.chip-filled.chip-default:hover {
-  background-color: #5a5a5a;
-}
-
-body.dark .chip-outlined.chip-default {
-  border-color: #616161;
-  color: #e0e0e0;
-}
-
-body.dark .chip-clickable.chip-outlined:hover {
-  background-color: rgba(255, 255, 255, 0.08);
-}

package/styles/dropdown/dropdown.styles.css

@@ -1,14 +0,0 @@
-/* Dropdown Component — Pure CSS */
-
-:host {
-    display: block;
-}
-
-.dropdown {
-    position: relative;
-}
-
-.dropdown-content {
-    position: absolute;
-    z-index: 50;
-}