@lumston/ds-angular 0.0.5 → 0.0.7

package/styles/components/inputs/radio-button/radio-button.styles.css

@@ -1,274 +0,0 @@
-/* Radio Button Component — Pure CSS */
-
-/* === Host === */
-:host {
-  display: inline-flex;
-}
-
-/* === Base === */
-.radio {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  position: relative;
-}
-
-/* === Indicator === */
-.radio-indicator {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 2px solid #c4c4c4;
-  border-radius: 50%;
-  background-color: transparent;
-  padding: 0;
-  cursor: pointer;
-  transition:
-    border-color var(--ls-transition-duration),
-    background-color var(--ls-transition-duration);
-  outline: none;
-  flex-shrink: 0;
-}
-
-.radio-indicator::after {
-  content: '';
-  position: absolute;
-  border-radius: 50%;
-  transform: scale(0);
-  transition: transform var(--ls-transition-duration);
-}
-
-.radio-checked .radio-indicator::after {
-  transform: scale(1);
-}
-
-/* === Label === */
-.radio-label {
-  user-select: none;
-  cursor: pointer;
-  font-size: 0.875rem;
-}
-
-/* ═══════════════════════════════════════════════════════
-   SIZES
-   ═══════════════════════════════════════════════════════ */
-
-/* Small */
-.radio-sm .radio-indicator {
-  width: 16px;
-  height: 16px;
-}
-
-.radio-sm .radio-indicator::after {
-  width: 8px;
-  height: 8px;
-}
-
-/* Medium */
-.radio-md .radio-indicator {
-  width: 20px;
-  height: 20px;
-}
-
-.radio-md .radio-indicator::after {
-  width: 10px;
-  height: 10px;
-}
-
-/* ═══════════════════════════════════════════════════════
-   COLORS — Checked state
-   ═══════════════════════════════════════════════════════ */
-
-.radio-checked.radio-color-inherit .radio-indicator {
-  border-color: inherit;
-}
-
-.radio-checked.radio-color-inherit .radio-indicator::after {
-  background-color: inherit;
-}
-
-.radio-checked.radio-color-primary .radio-indicator {
-  border-color: var(--ls-color-primary);
-}
-
-.radio-checked.radio-color-primary .radio-indicator::after {
-  background-color: var(--ls-color-primary);
-}
-
-.radio-checked.radio-color-secondary .radio-indicator {
-  border-color: var(--ls-color-secondary);
-}
-
-.radio-checked.radio-color-secondary .radio-indicator::after {
-  background-color: var(--ls-color-secondary);
-}
-
-.radio-checked.radio-color-success .radio-indicator {
-  border-color: var(--ls-color-success);
-}
-
-.radio-checked.radio-color-success .radio-indicator::after {
-  background-color: var(--ls-color-success);
-}
-
-.radio-checked.radio-color-error .radio-indicator {
-  border-color: var(--ls-color-error);
-}
-
-.radio-checked.radio-color-error .radio-indicator::after {
-  background-color: var(--ls-color-error);
-}
-
-.radio-checked.radio-color-info .radio-indicator {
-  border-color: var(--ls-color-info);
-}
-
-.radio-checked.radio-color-info .radio-indicator::after {
-  background-color: var(--ls-color-info);
-}
-
-.radio-checked.radio-color-warning .radio-indicator {
-  border-color: var(--ls-color-warning);
-}
-
-.radio-checked.radio-color-warning .radio-indicator::after {
-  background-color: var(--ls-color-warning);
-}
-
-/* ═══════════════════════════════════════════════════════
-   LABEL PLACEMENT
-   ═══════════════════════════════════════════════════════ */
-
-.radio-label-end {
-  flex-direction: row;
-}
-
-.radio-label-start {
-  flex-direction: row-reverse;
-}
-
-.radio-label-top {
-  flex-direction: column-reverse;
-  align-items: center;
-}
-
-.radio-label-bottom {
-  flex-direction: column;
-  align-items: center;
-}
-
-/* ═══════════════════════════════════════════════════════
-   DISABLED
-   ═══════════════════════════════════════════════════════ */
-
-.radio-disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.radio-disabled .radio-label {
-  cursor: not-allowed;
-}
-
-.radio-disabled .radio-indicator {
-  cursor: not-allowed;
-}
-
-/* ═══════════════════════════════════════════════════════
-   FOCUS
-   ═══════════════════════════════════════════════════════ */
-
-.radio-indicator:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-  border-radius: 50%;
-}
-
-/* ═══════════════════════════════════════════════════════
-   DARK MODE
-   ═══════════════════════════════════════════════════════ */
-
-body.dark .radio-indicator {
-  border-color: #555;
-}
-
-body.dark .radio-label {
-  color: #e0e6ed;
-}
-
-/* Dark mode — checked (maintains token colors) */
-
-body.dark
-  .radio-checked.radio-color-primary
-  .radio-indicator {
-  border-color: var(--ls-color-primary);
-}
-
-body.dark
-  .radio-checked.radio-color-primary
-  .radio-indicator::after {
-  background-color: var(--ls-color-primary);
-}
-
-body.dark
-  .radio-checked.radio-color-secondary
-  .radio-indicator {
-  border-color: var(--ls-color-secondary);
-}
-
-body.dark
-  .radio-checked.radio-color-secondary
-  .radio-indicator::after {
-  background-color: var(--ls-color-secondary);
-}
-
-body.dark
-  .radio-checked.radio-color-success
-  .radio-indicator {
-  border-color: var(--ls-color-success);
-}
-
-body.dark
-  .radio-checked.radio-color-success
-  .radio-indicator::after {
-  background-color: var(--ls-color-success);
-}
-
-body.dark
-  .radio-checked.radio-color-error
-  .radio-indicator {
-  border-color: var(--ls-color-error);
-}
-
-body.dark
-  .radio-checked.radio-color-error
-  .radio-indicator::after {
-  background-color: var(--ls-color-error);
-}
-
-body.dark
-  .radio-checked.radio-color-info
-  .radio-indicator {
-  border-color: var(--ls-color-info);
-}
-
-body.dark
-  .radio-checked.radio-color-info
-  .radio-indicator::after {
-  background-color: var(--ls-color-info);
-}
-
-body.dark
-  .radio-checked.radio-color-warning
-  .radio-indicator {
-  border-color: var(--ls-color-warning);
-}
-
-body.dark
-  .radio-checked.radio-color-warning
-  .radio-indicator::after {
-  background-color: var(--ls-color-warning);
-}

package/styles/components/inputs/slider/slider.styles.css

@@ -1,228 +0,0 @@
-/* Slider Component -- Pure CSS */
-
-:host {
-  display: block;
-}
-
-/* ── Base ── */
-
-.ls-slider {
-  position: relative;
-  height: 38px;
-  cursor: pointer;
-  padding: 15px 0;
-  touch-action: none;
-  user-select: none;
-}
-
-.ls-slider__rail {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  width: 100%;
-  border-radius: 9999px;
-  background: #e0e6ed;
-  transform: translateY(-50%);
-}
-
-.ls-slider__track {
-  position: absolute;
-  top: 50%;
-  border-radius: 9999px;
-  background: var(--ls-slider-main-color);
-  transform: translateY(-50%);
-}
-
-.ls-slider__thumb {
-  position: absolute;
-  top: 50%;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background: var(--ls-slider-main-color);
-  box-shadow:
-    0 1px 3px rgba(0, 0, 0, 0.2),
-    0 0 0 0 transparent;
-  cursor: grab;
-  transform: translate(-50%, -50%);
-  transition:
-    box-shadow 150ms ease,
-    width 150ms ease,
-    height 150ms ease;
-}
-
-.ls-slider__thumb:hover {
-  box-shadow:
-    0 1px 3px rgba(0, 0, 0, 0.2),
-    0 0 0 8px
-      color-mix(
-        in srgb,
-        var(--ls-slider-main-color) 16%,
-        transparent
-      );
-}
-
-.ls-slider__thumb:focus-visible {
-  outline: 2px solid var(--ls-slider-main-color);
-  outline-offset: 2px;
-}
-
-.ls-slider__thumb--active {
-  cursor: grabbing;
-  box-shadow:
-    0 1px 3px rgba(0, 0, 0, 0.2),
-    0 0 0 12px
-      color-mix(
-        in srgb,
-        var(--ls-slider-main-color) 24%,
-        transparent
-      );
-}
-
-.ls-slider__value-label {
-  position: absolute;
-  bottom: calc(100% + 6px);
-  left: 50%;
-  padding: 2px 8px;
-  border-radius: 4px;
-  background: var(--ls-color-dark, #3b3f5c);
-  color: #fff;
-  font-size: 12px;
-  font-weight: 600;
-  line-height: 1.4;
-  white-space: nowrap;
-  transform: translateX(-50%);
-  pointer-events: none;
-}
-
-.ls-slider__mark {
-  position: absolute;
-  top: 50%;
-  border-radius: 50%;
-  background: #bfc9d4;
-  transform: translate(-50%, -50%);
-}
-
-.ls-slider__mark--active {
-  background: var(--ls-slider-main-color);
-}
-
-.ls-slider__mark-label {
-  position: absolute;
-  top: calc(50% + 14px);
-  color: #888ea8;
-  font-size: 11px;
-  white-space: nowrap;
-  transform: translateX(-50%);
-}
-
-/* ── Size: medium (default) ── */
-
-.ls-slider--medium .ls-slider__rail {
-  height: 4px;
-}
-
-.ls-slider--medium .ls-slider__track {
-  height: 4px;
-}
-
-.ls-slider--medium .ls-slider__thumb {
-  width: 20px;
-  height: 20px;
-}
-
-.ls-slider--medium .ls-slider__mark {
-  width: 4px;
-  height: 4px;
-}
-
-.ls-slider--medium .ls-slider__value-label {
-  font-size: 12px;
-}
-
-/* ── Size: small ── */
-
-.ls-slider--small .ls-slider__rail {
-  height: 2px;
-}
-
-.ls-slider--small .ls-slider__track {
-  height: 2px;
-}
-
-.ls-slider--small .ls-slider__thumb {
-  width: 12px;
-  height: 12px;
-}
-
-.ls-slider--small .ls-slider__mark {
-  width: 3px;
-  height: 3px;
-}
-
-.ls-slider--small .ls-slider__value-label {
-  font-size: 10px;
-}
-
-/* ── Color variants ── */
-
-.ls-slider--primary {
-  --ls-slider-main-color: var(--ls-color-primary);
-}
-
-.ls-slider--secondary {
-  --ls-slider-main-color: var(--ls-color-secondary);
-}
-
-.ls-slider--success {
-  --ls-slider-main-color: var(--ls-color-success);
-}
-
-.ls-slider--error {
-  --ls-slider-main-color: var(--ls-color-error);
-}
-
-.ls-slider--info {
-  --ls-slider-main-color: var(--ls-color-info);
-}
-
-.ls-slider--warning {
-  --ls-slider-main-color: var(--ls-color-warning);
-}
-
-/* ── States ── */
-
-.ls-slider--disabled {
-  opacity: 0.5;
-  cursor: default;
-  pointer-events: none;
-}
-
-.ls-slider--active {
-  cursor: grabbing;
-}
-
-/* ── Dark mode ── */
-
-body.dark .ls-slider__rail {
-  background: rgba(255, 255, 255, 0.15);
-}
-
-body.dark .ls-slider__mark {
-  background: rgba(255, 255, 255, 0.3);
-}
-
-body.dark .ls-slider__mark--active {
-  background: var(--ls-slider-main-color);
-}
-
-body.dark .ls-slider__mark-label {
-  color: #888ea8;
-}
-
-body.dark .ls-slider__value-label {
-  background: #1b2e4b;
-  color: #e0e6ed;
-}