@lumston/ds-angular 0.0.4 → 0.0.6

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

@@ -0,0 +1,274 @@
+/* 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/inputs/slider/slider.styles.css

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