@lumston/ds-angular 0.0.4 → 0.0.6

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

@@ -0,0 +1,483 @@
+/* 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

@@ -0,0 +1,112 @@
+/* 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

@@ -0,0 +1,37 @@
+/* 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

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