@nukleas/cyberdesign 0.1.0

package/src/css/components/button.css

@@ -0,0 +1,130 @@
+.cd-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 32px; /* enlarged for target size a11y (was 28px) */
+  padding: 0 12px;
+  border: 1px solid var(--cd-border);
+  border-radius: 0;
+  background: rgba(5, 6, 10, 0.55);
+  color: var(--cd-text-muted);
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-sm);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  transition: color 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
+}
+
+/* Corner pixel accent dot */
+.cd-btn::before {
+  content: '';
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 3px;
+  height: 3px;
+  background: currentColor;
+  opacity: 0.4;
+  transition: opacity 120ms ease;
+}
+
+.cd-btn:hover:not(:disabled) {
+  color: var(--cd-accent);
+  border-color: var(--cd-border-glow);
+  background: var(--cd-accent-subtle);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--cd-accent) 14%, transparent),
+    0 0 12px color-mix(in srgb, var(--cd-accent) 20%, transparent),
+    inset 0 -2px 0 color-mix(in srgb, var(--cd-accent) 20%, transparent);
+}
+
+.cd-btn:hover:not(:disabled)::before {
+  opacity: 1;
+}
+
+.cd-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.cd-btn:focus-visible:not(:disabled) {
+  color: var(--cd-accent);
+  border-color: var(--cd-accent);
+  box-shadow:
+    0 0 0 1px color-mix(in srgb, var(--cd-accent) 40%, transparent),
+    0 0 12px color-mix(in srgb, var(--cd-accent) 30%, transparent);
+}
+
+/* Primary variant */
+.cd-btn--primary {
+  background: var(--cd-accent-subtle);
+  border-color: color-mix(in srgb, var(--cd-accent) 60%, transparent);
+  color: var(--cd-accent);
+}
+
+.cd-btn--primary:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--cd-accent) 15%, transparent);
+  border-color: var(--cd-accent);
+  box-shadow:
+    0 0 12px color-mix(in srgb, var(--cd-accent) 30%, transparent),
+    0 0 24px color-mix(in srgb, var(--cd-accent) 15%, transparent),
+    3px 3px 0 color-mix(in srgb, var(--cd-accent-secondary) 30%, transparent);
+}
+
+.cd-btn--primary:focus-visible:not(:disabled) {
+  background: color-mix(in srgb, var(--cd-accent) 15%, transparent);
+  border-color: var(--cd-accent);
+  box-shadow:
+    0 0 12px color-mix(in srgb, var(--cd-accent) 30%, transparent),
+    0 0 24px color-mix(in srgb, var(--cd-accent) 15%, transparent),
+    3px 3px 0 color-mix(in srgb, var(--cd-accent-secondary) 30%, transparent);
+}
+
+/* Danger variant */
+.cd-btn--danger {
+  color: #ff456c;
+  border-color: rgba(255, 69, 108, 0.30);
+}
+
+.cd-btn--danger:hover:not(:disabled) {
+  color: #ff456c;
+  background: rgba(255, 69, 108, 0.10);
+  border-color: rgba(255, 69, 108, 0.60);
+  box-shadow:
+    0 0 12px rgba(255, 69, 108, 0.20),
+    inset 0 -2px 0 rgba(255, 69, 108, 0.20);
+}
+
+.cd-btn--danger:focus-visible:not(:disabled) {
+  color: #ff456c;
+  background: rgba(255, 69, 108, 0.10);
+  border-color: rgba(255, 69, 108, 0.60);
+  box-shadow:
+    0 0 12px rgba(255, 69, 108, 0.20),
+    inset 0 -2px 0 rgba(255, 69, 108, 0.20);
+}
+
+/* Small variant */
+.cd-btn--sm {
+  height: 26px; /* enlarged (was 22px) */
+  padding: 0 8px;
+  font-size: var(--cd-text-xs);
+}
+
+/* Icon-only variant */
+.cd-btn--icon {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+}
+
+.cd-btn--icon.cd-btn--sm {
+  width: 26px;
+  height: 26px;
+}

package/src/css/components/calendar.css

@@ -0,0 +1,135 @@
+/* ── Calendar / Date grid ──────────────────────────────────────────────────── */
+
+.cd-calendar {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+  background: var(--cd-bg-panel);
+  border: 1px solid color-mix(in srgb, var(--cd-accent) 28%, transparent);
+  font-family: var(--cd-font-mono);
+  color: var(--cd-text);
+  user-select: none;
+  min-width: 260px;
+}
+
+.cd-calendar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.cd-calendar__title {
+  font-size: var(--cd-text-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--cd-accent);
+}
+
+.cd-calendar__nav {
+  display: flex;
+  gap: 4px;
+}
+
+.cd-calendar__nav-btn {
+  width: 26px;
+  height: 26px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--cd-border);
+  background: rgba(5, 6, 10, 0.55);
+  color: var(--cd-text-muted);
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-sm);
+  cursor: pointer;
+}
+
+.cd-calendar__nav-btn:hover {
+  color: var(--cd-accent);
+  border-color: color-mix(in srgb, var(--cd-accent) 45%, transparent);
+}
+
+.cd-calendar__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+.cd-calendar__weekday {
+  text-align: center;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--cd-text-dim);
+  padding: 4px 0;
+}
+
+.cd-calendar__day {
+  aspect-ratio: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--cd-text-secondary);
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-xs);
+  cursor: pointer;
+  min-width: 32px;
+  min-height: 32px;
+}
+
+.cd-calendar__day:hover:not(:disabled):not(.is-outside) {
+  border-color: color-mix(in srgb, var(--cd-accent) 35%, transparent);
+  color: var(--cd-accent);
+}
+
+.cd-calendar__day.is-outside {
+  color: var(--cd-text-dim);
+  opacity: 0.45;
+}
+
+.cd-calendar__day.is-today {
+  border-color: color-mix(in srgb, var(--cd-accent) 40%, transparent);
+}
+
+.cd-calendar__day.is-selected {
+  background: var(--cd-accent-subtle);
+  border-color: color-mix(in srgb, var(--cd-accent) 55%, transparent);
+  color: var(--cd-accent);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--cd-accent) 20%, transparent);
+}
+
+.cd-calendar__day:disabled {
+  opacity: 0.25;
+  cursor: not-allowed;
+}
+
+/* Date picker shell */
+.cd-date-picker {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  max-width: 280px;
+}
+
+.cd-date-picker__panel {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 600;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-4px);
+  transition: opacity 0.12s ease, transform 0.12s ease;
+}
+
+.cd-date-picker.is-open > .cd-date-picker__panel {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}

package/src/css/components/card.css

@@ -0,0 +1,68 @@
+/* ── Card (structured surface — Header / Title / Description / Content / Footer) ─ */
+
+.cd-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  background: var(--cd-bg-panel);
+  border: 1px solid var(--cd-border);
+  color: var(--cd-text);
+  font-family: var(--cd-font-mono);
+  box-shadow: var(--cd-panel-shadow, none);
+}
+
+.cd-card--glow {
+  border-color: color-mix(in srgb, var(--cd-accent) 30%, transparent);
+  box-shadow:
+    0 0 8px color-mix(in srgb, var(--cd-accent) 12%, transparent),
+    inset 0 0 0 1px color-mix(in srgb, var(--cd-accent) 6%, transparent);
+}
+
+.cd-card__header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 14px 16px 10px;
+  border-bottom: 1px solid var(--cd-border-dim);
+}
+
+.cd-card__header--row {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.cd-card__title {
+  margin: 0;
+  font-size: var(--cd-text-sm);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--cd-accent);
+}
+
+.cd-card__description {
+  margin: 0;
+  font-size: var(--cd-text-xs);
+  color: var(--cd-text-muted);
+  letter-spacing: 0.04em;
+  line-height: 1.5;
+}
+
+.cd-card__content {
+  padding: 14px 16px;
+  flex: 1;
+}
+
+.cd-card__footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px 14px;
+  border-top: 1px solid var(--cd-border-dim);
+}
+
+.cd-card__footer--end {
+  justify-content: flex-end;
+}

package/src/css/components/carousel.css

@@ -0,0 +1,69 @@
+/* ── Carousel ──────────────────────────────────────────────────────────────── */
+
+.cd-carousel {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  font-family: var(--cd-font-mono);
+}
+
+.cd-carousel__viewport {
+  overflow: hidden;
+  width: 100%;
+}
+
+.cd-carousel__track {
+  display: flex;
+  transition: transform 0.28s ease;
+}
+
+.cd-carousel__slide {
+  flex: 0 0 100%;
+  min-width: 0;
+  padding: 4px;
+  box-sizing: border-box;
+}
+
+.cd-carousel__slide-inner {
+  min-height: 140px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--cd-bg-panel);
+  border: 1px solid color-mix(in srgb, var(--cd-accent) 22%, transparent);
+  color: var(--cd-text);
+  padding: 20px;
+}
+
+.cd-carousel__controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.cd-carousel__dots {
+  display: flex;
+  gap: 6px;
+  justify-content: center;
+  flex: 1;
+}
+
+.cd-carousel__dot {
+  width: 8px;
+  height: 8px;
+  border: 1px solid color-mix(in srgb, var(--cd-accent) 40%, transparent);
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+}
+
+.cd-carousel__dot.is-active {
+  background: var(--cd-accent);
+  box-shadow: 0 0 8px color-mix(in srgb, var(--cd-accent) 40%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cd-carousel__track { transition: none; }
+}