@lumston/ds-angular 0.0.6 → 0.0.8

package/styles/inputs/switch/switch.styles.css

@@ -1,483 +0,0 @@
-/* Switch Component — Pure CSS */
-
-:host {
-  display: inline-flex;
-}
-
-.switch {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  position: relative;
-}
-
-/* ── Track ── */
-
-.switch-track {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  border: none;
-  border-radius: 999px;
-  padding: 2px;
-  cursor: pointer;
-  transition:
-    background-color var(--ls-transition-duration),
-    border-color var(--ls-transition-duration);
-  outline: none;
-  flex-shrink: 0;
-}
-
-/* ── Thumb ── */
-
-.switch-thumb {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background-color: #fff;
-  transition: transform var(--ls-transition-duration);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-
-/* ── Icon inside thumb ── */
-
-.switch-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 0;
-  color: #999;
-}
-
-.switch-icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-/* ── Label ── */
-
-.switch-label {
-  user-select: none;
-  cursor: pointer;
-  font-size: 0.875rem;
-}
-
-/* ═══════════════════════════════════════════════════════
-   SIZES
-   ═══════════════════════════════════════════════════════ */
-
-/* Small */
-
-.switch-sm .switch-track {
-  width: 34px;
-  height: 20px;
-}
-
-.switch-sm .switch-thumb {
-  width: 16px;
-  height: 16px;
-}
-
-.switch-sm .switch-icon {
-  width: 10px;
-  height: 10px;
-}
-
-.switch-sm.switch-checked .switch-thumb {
-  transform: translateX(14px);
-}
-
-/* Medium */
-
-.switch-md .switch-track {
-  width: 42px;
-  height: 24px;
-}
-
-.switch-md .switch-thumb {
-  width: 20px;
-  height: 20px;
-}
-
-.switch-md .switch-icon {
-  width: 12px;
-  height: 12px;
-}
-
-.switch-md.switch-checked .switch-thumb {
-  transform: translateX(18px);
-}
-
-/* ═══════════════════════════════════════════════════════
-   VARIANTS — Unchecked
-   ═══════════════════════════════════════════════════════ */
-
-/* Solid unchecked */
-
-.switch-solid .switch-track {
-  background-color: #c4c4c4;
-}
-
-/* Outlined unchecked */
-
-.switch-outlined .switch-track {
-  background-color: transparent;
-  border: 2px solid #999;
-}
-
-.switch-outlined .switch-track {
-  padding: 0;
-}
-
-.switch-outlined .switch-thumb {
-  background-color: #999;
-}
-
-.switch-outlined .switch-icon {
-  color: #fff;
-}
-
-/* ═══════════════════════════════════════════════════════
-   COLORS — Checked state
-   ═══════════════════════════════════════════════════════ */
-
-/* Solid checked */
-
-.switch-checked.switch-solid.switch-color-inherit
-  .switch-track {
-  background-color: inherit;
-}
-
-.switch-checked.switch-solid.switch-color-primary
-  .switch-track {
-  background-color: var(--ls-color-primary);
-}
-
-.switch-checked.switch-solid.switch-color-secondary
-  .switch-track {
-  background-color: var(--ls-color-secondary);
-}
-
-.switch-checked.switch-solid.switch-color-success
-  .switch-track {
-  background-color: var(--ls-color-success);
-}
-
-.switch-checked.switch-solid.switch-color-error
-  .switch-track {
-  background-color: var(--ls-color-danger);
-}
-
-.switch-checked.switch-solid.switch-color-info
-  .switch-track {
-  background-color: var(--ls-color-info);
-}
-
-.switch-checked.switch-solid.switch-color-warning
-  .switch-track {
-  background-color: var(--ls-color-warning);
-}
-
-/* Outlined checked */
-
-.switch-checked.switch-outlined.switch-color-inherit
-  .switch-track {
-  border-color: inherit;
-}
-
-.switch-checked.switch-outlined.switch-color-primary
-  .switch-track {
-  border-color: var(--ls-color-primary);
-}
-
-.switch-checked.switch-outlined.switch-color-secondary
-  .switch-track {
-  border-color: var(--ls-color-secondary);
-}
-
-.switch-checked.switch-outlined.switch-color-success
-  .switch-track {
-  border-color: var(--ls-color-success);
-}
-
-.switch-checked.switch-outlined.switch-color-error
-  .switch-track {
-  border-color: var(--ls-color-danger);
-}
-
-.switch-checked.switch-outlined.switch-color-info
-  .switch-track {
-  border-color: var(--ls-color-info);
-}
-
-.switch-checked.switch-outlined.switch-color-warning
-  .switch-track {
-  border-color: var(--ls-color-warning);
-}
-
-/* Outlined checked — thumb color */
-
-.switch-checked.switch-outlined.switch-color-inherit
-  .switch-thumb {
-  background-color: inherit;
-}
-
-.switch-checked.switch-outlined.switch-color-primary
-  .switch-thumb {
-  background-color: var(--ls-color-primary);
-}
-
-.switch-checked.switch-outlined.switch-color-secondary
-  .switch-thumb {
-  background-color: var(--ls-color-secondary);
-}
-
-.switch-checked.switch-outlined.switch-color-success
-  .switch-thumb {
-  background-color: var(--ls-color-success);
-}
-
-.switch-checked.switch-outlined.switch-color-error
-  .switch-thumb {
-  background-color: var(--ls-color-danger);
-}
-
-.switch-checked.switch-outlined.switch-color-info
-  .switch-thumb {
-  background-color: var(--ls-color-info);
-}
-
-.switch-checked.switch-outlined.switch-color-warning
-  .switch-thumb {
-  background-color: var(--ls-color-warning);
-}
-
-/* Outlined checked icon color — white for contrast */
-
-.switch-checked.switch-outlined .switch-icon {
-  color: #fff;
-}
-
-/* Solid checked icon color — color token for contrast on white thumb */
-
-.switch-checked.switch-solid .switch-icon {
-  color: var(--ls-color-primary);
-}
-
-.switch-checked.switch-solid.switch-color-secondary
-  .switch-icon {
-  color: var(--ls-color-secondary);
-}
-
-.switch-checked.switch-solid.switch-color-success
-  .switch-icon {
-  color: var(--ls-color-success);
-}
-
-.switch-checked.switch-solid.switch-color-error
-  .switch-icon {
-  color: var(--ls-color-danger);
-}
-
-.switch-checked.switch-solid.switch-color-info
-  .switch-icon {
-  color: var(--ls-color-info);
-}
-
-.switch-checked.switch-solid.switch-color-warning
-  .switch-icon {
-  color: var(--ls-color-warning);
-}
-
-.switch-checked.switch-solid.switch-color-inherit
-  .switch-icon {
-  color: inherit;
-}
-
-/* ═══════════════════════════════════════════════════════
-   LABEL PLACEMENT
-   ═══════════════════════════════════════════════════════ */
-
-.switch-label-end {
-  flex-direction: row;
-}
-
-.switch-label-start {
-  flex-direction: row-reverse;
-}
-
-.switch-label-top {
-  flex-direction: column-reverse;
-  align-items: center;
-}
-
-.switch-label-bottom {
-  flex-direction: column;
-  align-items: center;
-}
-
-/* ═══════════════════════════════════════════════════════
-   DISABLED
-   ═══════════════════════════════════════════════════════ */
-
-.switch-disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.switch-disabled .switch-label {
-  cursor: not-allowed;
-}
-
-.switch-disabled .switch-track {
-  cursor: not-allowed;
-}
-
-/* ═══════════════════════════════════════════════════════
-   FOCUS
-   ═══════════════════════════════════════════════════════ */
-
-.switch-track:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-  border-radius: 999px;
-}
-
-/* ═══════════════════════════════════════════════════════
-   DARK MODE
-   ═══════════════════════════════════════════════════════ */
-
-body.dark .switch-solid .switch-track {
-  background-color: #3b3f5c;
-}
-
-body.dark .switch-outlined .switch-track {
-  border-color: #555;
-}
-
-body.dark .switch-outlined .switch-thumb {
-  background-color: #888;
-}
-
-body.dark .switch-label {
-  color: #e0e6ed;
-}
-
-body.dark .switch-icon {
-  color: #bbb;
-}
-
-/* Dark mode — checked solid (overrides unchecked dark) */
-
-body.dark
-  .switch-checked.switch-solid.switch-color-primary
-  .switch-track {
-  background-color: var(--ls-color-primary);
-}
-
-body.dark
-  .switch-checked.switch-solid.switch-color-secondary
-  .switch-track {
-  background-color: var(--ls-color-secondary);
-}
-
-body.dark
-  .switch-checked.switch-solid.switch-color-success
-  .switch-track {
-  background-color: var(--ls-color-success);
-}
-
-body.dark
-  .switch-checked.switch-solid.switch-color-error
-  .switch-track {
-  background-color: var(--ls-color-danger);
-}
-
-body.dark
-  .switch-checked.switch-solid.switch-color-info
-  .switch-track {
-  background-color: var(--ls-color-info);
-}
-
-body.dark
-  .switch-checked.switch-solid.switch-color-warning
-  .switch-track {
-  background-color: var(--ls-color-warning);
-}
-
-/* Dark mode — checked outlined */
-
-body.dark
-  .switch-checked.switch-outlined.switch-color-primary
-  .switch-track {
-  border-color: var(--ls-color-primary);
-}
-
-body.dark
-  .switch-checked.switch-outlined.switch-color-secondary
-  .switch-track {
-  border-color: var(--ls-color-secondary);
-}
-
-body.dark
-  .switch-checked.switch-outlined.switch-color-success
-  .switch-track {
-  border-color: var(--ls-color-success);
-}
-
-body.dark
-  .switch-checked.switch-outlined.switch-color-error
-  .switch-track {
-  border-color: var(--ls-color-danger);
-}
-
-body.dark
-  .switch-checked.switch-outlined.switch-color-info
-  .switch-track {
-  border-color: var(--ls-color-info);
-}
-
-body.dark
-  .switch-checked.switch-outlined.switch-color-warning
-  .switch-track {
-  border-color: var(--ls-color-warning);
-}
-
-body.dark
-  .switch-checked.switch-outlined.switch-color-primary
-  .switch-thumb {
-  background-color: var(--ls-color-primary);
-}
-
-body.dark
-  .switch-checked.switch-outlined.switch-color-secondary
-  .switch-thumb {
-  background-color: var(--ls-color-secondary);
-}
-
-body.dark
-  .switch-checked.switch-outlined.switch-color-success
-  .switch-thumb {
-  background-color: var(--ls-color-success);
-}
-
-body.dark
-  .switch-checked.switch-outlined.switch-color-error
-  .switch-thumb {
-  background-color: var(--ls-color-danger);
-}
-
-body.dark
-  .switch-checked.switch-outlined.switch-color-info
-  .switch-thumb {
-  background-color: var(--ls-color-info);
-}
-
-body.dark
-  .switch-checked.switch-outlined.switch-color-warning
-  .switch-thumb {
-  background-color: var(--ls-color-warning);
-}

package/styles/media/avatar/avatar.styles.css

@@ -1,112 +0,0 @@
-/* Avatar Component — Pure CSS */
-
-/* === Host === */
-:host {
-    display: contents;
-}
-
-/* === Base === */
-.avatar {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    font-family: var(--ls-font-family);
-    font-weight: 600;
-    color: #fff;
-    user-select: none;
-    vertical-align: middle;
-}
-
-img.avatar {
-    object-fit: cover;
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Size Modifiers
-   ══════════════════════════════════════════════════════════════════════ */
-
-.avatar-small {
-    width: 2.25rem;
-    height: 2.25rem;
-    font-size: 0.75rem;
-}
-
-.avatar-medium {
-    width: 2.75rem;
-    height: 2.75rem;
-    font-size: 0.875rem;
-}
-
-.avatar-large {
-    width: 3.5rem;
-    height: 3.5rem;
-    font-size: 1.125rem;
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Variant Modifiers
-   ══════════════════════════════════════════════════════════════════════ */
-
-.avatar-circular {
-    border-radius: var(--ls-border-radius-full);
-}
-
-.avatar-rounded {
-    border-radius: var(--ls-border-radius-md);
-}
-
-.avatar-square {
-    border-radius: 0;
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Color Modifiers (text mode)
-   ══════════════════════════════════════════════════════════════════════ */
-
-.avatar-color-primary {
-    background-color: var(--ls-color-primary);
-}
-
-.avatar-color-secondary {
-    background-color: var(--ls-color-secondary);
-}
-
-.avatar-color-error {
-    background-color: var(--ls-color-error);
-}
-
-.avatar-color-info {
-    background-color: var(--ls-color-info);
-}
-
-.avatar-color-success {
-    background-color: var(--ls-color-success);
-}
-
-.avatar-color-warning {
-    background-color: var(--ls-color-warning);
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Fallback
-   ══════════════════════════════════════════════════════════════════════ */
-
-.avatar-fallback {
-    background-color: var(--ls-color-dark);
-}
-
-.avatar-icon {
-    width: 60%;
-    height: 60%;
-    fill: currentColor;
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Dark Mode
-   ══════════════════════════════════════════════════════════════════════ */
-
-body.dark .avatar-fallback {
-    background-color: #3b3f5c;
-    color: #e0e6ed;
-}

package/styles/media/avatar-group/avatar-group.styles.css

@@ -1,37 +0,0 @@
-/* AvatarGroup Component — Pure CSS */
-
-/* === Host === */
-:host {
-    display: contents;
-}
-
-/* === Base === */
-.avatar-group {
-    display: inline-flex;
-    align-items: center;
-}
-
-/* === Items === */
-.avatar-group-item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    margin-left: -0.5rem;
-}
-
-.avatar-group-item:first-child {
-    margin-left: 0;
-}
-
-/* === Border ring for stacking contrast === */
-.avatar-group-item .avatar {
-    border: 2px solid #fff;
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Dark Mode
-   ══════════════════════════════════════════════════════════════════════ */
-
-body.dark .avatar-group-item .avatar {
-    border-color: #1b2e4b;
-}

package/styles/media/logo/logo.styles.css

@@ -1,40 +0,0 @@
-/* Logo Component — Pure CSS */
-
-/* === Host === */
-:host {
-  display: contents;
-}
-
-/* === Base === */
-.logo {
-  display: block;
-  height: auto;
-  max-width: 100%;
-  object-fit: contain;
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Size Modifiers
-   ══════════════════════════════════════════════════════════════════════ */
-
-.logo-small {
-  height: 1.5rem;
-}
-
-.logo-medium {
-  height: 2rem;
-}
-
-.logo-large {
-  height: 2.5rem;
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Link Wrapper
-   ══════════════════════════════════════════════════════════════════════ */
-
-.logo-link {
-  display: inline-flex;
-  line-height: 0;
-  text-decoration: none;
-}