cybercore-css 0.2.0

package/src/scss/components/_buttons.scss

@@ -0,0 +1,180 @@
+// ============================================================
+// Buttons Component
+// .cyber-btn with variants and effects
+// ============================================================
+
+@layer components {
+  .cyber-btn {
+    // Custom properties for easy theming
+    --btn-color: var(--cyber-cyan-500);
+    --btn-bg: transparent;
+    --btn-glow: var(--glow-cyan);
+
+    // Position & Display
+    position: relative;
+    display: inline-flex;
+    gap: var(--space-xs);
+    align-items: center;
+    justify-content: center;
+
+    // Box Model
+    padding: var(--space-xs) var(--space-md);
+    border: var(--border-medium) solid var(--btn-color);
+    border-radius: var(--radius-cyber);
+    overflow: hidden;
+
+    // Typography
+    font-family: var(--font-display);
+    font-size: var(--text-sm);
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+
+    // Visual
+    color: var(--btn-color);
+    background: var(--btn-bg);
+
+    // Animation - specific properties for better performance
+    transition:
+      color var(--duration-fast) var(--ease-cyber),
+      background-color var(--duration-fast) var(--ease-cyber),
+      border-color var(--duration-fast) var(--ease-cyber),
+      box-shadow var(--duration-fast) var(--ease-cyber);
+    cursor: pointer;
+    isolation: isolate;
+
+    // Hover fill animation - slides in from left
+    &::before {
+      content: "";
+      position: absolute;
+      z-index: -1;
+      background: var(--btn-color);
+      transform: translateX(-101%);
+      transition: transform var(--duration-normal) var(--ease-cyber);
+      inset: 0;
+    }
+
+    &:hover::before,
+    &:focus-visible::before {
+      transform: translateX(0);
+    }
+
+    // Hover and focus states
+    &:hover,
+    &:focus-visible {
+      color: var(--cyber-void-500);
+      box-shadow: var(--btn-glow);
+    }
+
+    // Cyber corner cut-off triangle effect
+    &::after {
+      content: "";
+      position: absolute;
+      right: -2px;
+      bottom: -2px;
+      width: 12px;
+      height: 12px;
+      border: var(--border-medium) solid var(--btn-color);
+      border-top: none;
+      border-left: none;
+      background: var(--color-bg-primary);
+      clip-path: polygon(100% 0, 100% 100%, 0 100%);
+    }
+
+    // Focus visible outline
+    &:focus-visible {
+      outline: 2px solid var(--btn-color);
+      outline-offset: 4px;
+    }
+
+    // Disabled state
+    &:disabled,
+    &[disabled] {
+      opacity: 40%;
+      cursor: not-allowed;
+      pointer-events: none;
+      filter: grayscale(50%);
+    }
+
+    // Touch devices: disable hover fill effect to prevent stuck states
+    @media (hover: none) {
+      &::before {
+        display: none;
+      }
+
+      &:hover {
+        color: var(--btn-color);
+        box-shadow: none;
+      }
+
+      &:active {
+        color: var(--cyber-void-500);
+        background: var(--btn-color);
+        box-shadow: var(--btn-glow);
+      }
+    }
+
+    // --------------------------------------------------------
+    // Color Variants
+    // --------------------------------------------------------
+
+    &--magenta {
+      --btn-color: var(--cyber-magenta-500);
+      --btn-glow: var(--glow-magenta);
+    }
+
+    &--yellow {
+      --btn-color: var(--cyber-yellow-500);
+      --btn-glow: var(--glow-yellow);
+    }
+
+    &--green {
+      --btn-color: var(--cyber-green-500);
+      --btn-glow: var(--glow-green);
+    }
+
+    // --------------------------------------------------------
+    // Style Variants
+    // --------------------------------------------------------
+
+    &--ghost {
+      border-style: dashed;
+    }
+
+    &--filled {
+      color: var(--cyber-void-500);
+      background: var(--btn-color);
+
+      &::before {
+        background: var(--cyber-void-500);
+      }
+
+      &:hover {
+        color: var(--btn-color);
+      }
+    }
+
+    // --------------------------------------------------------
+    // Size Variants
+    // --------------------------------------------------------
+
+    &--sm {
+      padding: var(--space-3xs) var(--space-sm);
+      font-size: var(--text-xs);
+    }
+
+    &--lg {
+      padding: var(--space-sm) var(--space-lg);
+      font-size: var(--text-lg);
+    }
+  }
+
+  // Reduced motion support
+  @media (prefers-reduced-motion: reduce) {
+    .cyber-btn {
+      &::before {
+        transition: none;
+      }
+    }
+  }
+}

package/src/scss/components/_cards.scss

@@ -0,0 +1,178 @@
+// ============================================================
+// Cards Component
+// .cyber-card with cut corners, bracket decorations, and variants
+// ============================================================
+
+@layer components {
+  .cyber-card {
+    --card-accent: var(--cyber-cyan-500);
+
+    position: relative;
+    padding: var(--space-md);
+    border: 1px solid var(--color-border-default);
+    background: var(--color-bg-secondary);
+    clip-path: polygon(
+      0 0,
+      calc(100% - 20px) 0,
+      100% 20px,
+      100% 100%,
+      20px 100%,
+      0 calc(100% - 20px)
+    );
+
+    // Corner bracket decorations (30px, 2px border)
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      width: 30px;
+      height: 30px;
+      border: 2px solid var(--card-accent);
+      pointer-events: none;
+    }
+
+    &::before {
+      top: -1px;
+      left: -1px;
+      border-right: none;
+      border-bottom: none;
+    }
+
+    &::after {
+      right: -1px;
+      bottom: -1px;
+      border-top: none;
+      border-left: none;
+    }
+
+    // --------------------------------------------------------
+    // Sub-components
+    // --------------------------------------------------------
+
+    &__header {
+      display: flex;
+      gap: var(--space-sm);
+      align-items: center;
+      margin-bottom: var(--space-md);
+      padding-bottom: var(--space-sm);
+      border-bottom: 1px solid var(--color-border-default);
+    }
+
+    &__icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      border: 1px solid var(--card-accent);
+      font-size: var(--text-lg);
+      color: var(--card-accent);
+      background: color-mix(in srgb, var(--card-accent) 15%, transparent);
+    }
+
+    &__title {
+      font-family: var(--font-display);
+      font-size: var(--text-lg);
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--card-accent);
+    }
+
+    &__badge {
+      margin-left: auto;
+      padding: var(--space-3xs) var(--space-xs);
+      font-family: var(--font-mono);
+      font-size: var(--text-xs);
+      font-weight: 700;
+      color: var(--cyber-void-500);
+      background: var(--card-accent);
+    }
+
+    // --------------------------------------------------------
+    // Interactive variant
+    // --------------------------------------------------------
+
+    &--interactive {
+      transition: all var(--duration-normal);
+      cursor: pointer;
+
+      &:hover {
+        box-shadow:
+          inset 0 0 30px color-mix(in srgb, var(--card-accent) 10%, transparent),
+          0 0 30px color-mix(in srgb, var(--card-accent) 30%, transparent);
+        transform: translateY(-2px);
+      }
+    }
+
+    // --------------------------------------------------------
+    // Holographic variant - animated gradient background
+    // --------------------------------------------------------
+
+    &--holo {
+      background: linear-gradient(
+        135deg,
+        var(--color-bg-secondary) 0%,
+        color-mix(in srgb, var(--cyber-cyan-500) 5%, var(--color-bg-secondary)) 25%,
+        color-mix(in srgb, var(--cyber-magenta-500) 5%, var(--color-bg-secondary)) 50%,
+        color-mix(in srgb, var(--cyber-green-500) 5%, var(--color-bg-secondary)) 75%,
+        var(--color-bg-secondary) 100%
+      );
+      background-size: 400% 400%;
+      animation: holo-shift 8s ease infinite;
+    }
+
+    // --------------------------------------------------------
+    // Color variants
+    // --------------------------------------------------------
+
+    &--magenta {
+      --card-accent: var(--cyber-magenta-500);
+    }
+
+    &--yellow {
+      --card-accent: var(--cyber-yellow-500);
+    }
+
+    &--green {
+      --card-accent: var(--cyber-green-500);
+    }
+  }
+
+  // Holographic shift animation
+  @keyframes holo-shift {
+    0%,
+    100% {
+      background-position: 0% 50%;
+    }
+
+    25% {
+      background-position: 100% 50%;
+    }
+
+    50% {
+      background-position: 100% 100%;
+    }
+
+    75% {
+      background-position: 0% 100%;
+    }
+  }
+
+  // --------------------------------------------------------
+  // Reduced motion support
+  // --------------------------------------------------------
+
+  @media (prefers-reduced-motion: reduce) {
+    .cyber-card--holo {
+      animation: none;
+    }
+
+    .cyber-card--interactive {
+      transition: none;
+
+      &:hover {
+        transform: none;
+      }
+    }
+  }
+}

package/src/scss/components/_dropdown.scss

@@ -0,0 +1,213 @@
+// ============================================================
+// Dropdown Component
+// Accessible dropdown menu with cyberpunk styling
+// ============================================================
+
+@layer components {
+  .cyber-dropdown {
+    position: relative;
+    display: inline-block;
+
+    // Dropdown trigger button
+    &__trigger {
+      display: inline-flex;
+      gap: var(--space-xs);
+      align-items: center;
+      padding: var(--space-xs) var(--space-sm);
+      border: var(--border-thin) solid var(--color-border-default);
+      border-radius: var(--radius-sm);
+      font-family: var(--font-display);
+      font-size: var(--text-sm);
+      font-weight: 600;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--color-text-primary);
+      background: var(--color-bg-tertiary);
+      transition:
+        color var(--duration-fast),
+        background-color var(--duration-fast),
+        border-color var(--duration-fast);
+      cursor: pointer;
+
+      &:hover {
+        border-color: var(--cyber-cyan-500);
+        background: var(--color-bg-elevated);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--cyber-cyan-500);
+        outline-offset: 2px;
+      }
+
+      // Arrow icon
+      &::after {
+        content: "";
+        width: 0;
+        height: 0;
+        border-top: 5px solid currentcolor;
+        border-right: 4px solid transparent;
+        border-left: 4px solid transparent;
+        transition: transform var(--duration-fast);
+      }
+    }
+
+    // Dropdown menu
+    &__menu {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      z-index: 1050;
+      min-width: 180px;
+      margin: var(--space-2xs) 0 0;
+      padding: var(--space-2xs) 0;
+      padding-left: 0;
+      border: var(--border-thin) solid var(--color-border-default);
+      border-left: 3px solid var(--cyber-cyan-500);
+      border-radius: var(--radius-sm);
+      background: var(--color-bg-secondary);
+      box-shadow:
+        0 10px 25px color-mix(in srgb, var(--cyber-void-900) 60%, transparent),
+        0 0 15px color-mix(in srgb, var(--cyber-cyan-500) 15%, transparent);
+      opacity: 0%;
+      visibility: hidden;
+      transform: translateY(-10px);
+      transition:
+        opacity var(--duration-fast),
+        visibility var(--duration-fast),
+        transform var(--duration-fast);
+
+      // Reset list styles completely
+      list-style: none;
+      list-style-type: none;
+
+      // Reset nested list items
+      > li {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        list-style-type: none;
+      }
+    }
+
+    // Menu item
+    &__item {
+      display: block;
+      width: 100%;
+      padding: var(--space-xs) var(--space-sm);
+      border: none;
+      font-family: var(--font-mono);
+      font-size: var(--text-sm);
+      text-align: left;
+      color: var(--color-text-secondary);
+      background: transparent;
+      transition:
+        color var(--duration-fast),
+        background-color var(--duration-fast);
+      cursor: pointer;
+
+      &:hover {
+        color: var(--cyber-cyan-500);
+        background: color-mix(in srgb, var(--cyber-cyan-500) 10%, transparent);
+      }
+
+      &:focus-visible {
+        color: var(--cyber-cyan-500);
+        background: color-mix(in srgb, var(--cyber-cyan-500) 15%, transparent);
+        outline: none;
+      }
+
+      &--active {
+        color: var(--cyber-cyan-500);
+
+        &::before {
+          content: "> ";
+        }
+      }
+
+      &--disabled {
+        opacity: 50%;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+    }
+
+    // Divider
+    &__divider {
+      height: 1px;
+      margin: var(--space-2xs) 0;
+      background: var(--color-border-default);
+    }
+
+    // Open state (JS toggle)
+    &--open {
+      .cyber-dropdown__trigger::after {
+        transform: rotate(180deg);
+      }
+
+      .cyber-dropdown__menu {
+        opacity: 100%;
+        visibility: visible;
+        transform: translateY(0);
+      }
+    }
+
+    // CSS-only mode: opens on focus, closes when clicking outside
+    &--css-only:focus-within {
+      .cyber-dropdown__trigger::after {
+        transform: rotate(180deg);
+      }
+
+      .cyber-dropdown__menu {
+        opacity: 100%;
+        visibility: visible;
+        transform: translateY(0);
+      }
+    }
+
+    // Right-aligned variant
+    &--right .cyber-dropdown__menu {
+      right: 0;
+      left: auto;
+      border-right: 3px solid var(--cyber-cyan-500);
+      border-left: var(--border-thin) solid var(--color-border-default);
+    }
+
+    &--right.cyber-dropdown--magenta .cyber-dropdown__menu {
+      border-right-color: var(--cyber-magenta-500);
+    }
+
+    // Up direction variant
+    &--up .cyber-dropdown__menu {
+      top: auto;
+      bottom: 100%;
+      margin-top: 0;
+      margin-bottom: var(--space-2xs);
+      transform: translateY(10px);
+    }
+
+    &--up.cyber-dropdown--open .cyber-dropdown__menu,
+    &--up.cyber-dropdown--css-only:focus-within .cyber-dropdown__menu {
+      transform: translateY(0);
+    }
+
+    // Color variants
+    &--magenta {
+      .cyber-dropdown__menu {
+        box-shadow:
+          0 10px 25px color-mix(in srgb, var(--cyber-void-900) 60%, transparent),
+          0 0 15px color-mix(in srgb, var(--cyber-magenta-500) 15%, transparent);
+        border-left-color: var(--cyber-magenta-500);
+      }
+
+      .cyber-dropdown__item:hover,
+      .cyber-dropdown__item:focus-visible {
+        color: var(--cyber-magenta-500);
+        background: color-mix(in srgb, var(--cyber-magenta-500) 10%, transparent);
+      }
+
+      .cyber-dropdown__item--active {
+        color: var(--cyber-magenta-500);
+      }
+    }
+  }
+}

package/src/scss/components/_index.scss

@@ -0,0 +1,19 @@
+// ============================================================
+// Components Index
+// Forward all component modules
+// ============================================================
+
+@forward "buttons";
+@forward "cards";
+@forward "inputs";
+@forward "progress";
+@forward "badges";
+@forward "alerts";
+@forward "tables";
+@forward "nav";
+@forward "tabs";
+@forward "modal";
+@forward "dropdown";
+@forward "terminal";
+@forward "spinner";
+@forward "skeleton";