cybercore-css 0.2.0

package/src/scss/components/_tabs.scss

@@ -0,0 +1,327 @@
+// ============================================================
+// Tabs Component
+// Tab navigation with active state glow
+// ============================================================
+
+// Local mixin for cyber scrollbar (avoids duplication)
+@mixin cyber-scrollbar {
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    height: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--color-bg-secondary);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    background: var(--cyber-chrome-600);
+  }
+}
+
+@layer components {
+  .cyber-tabs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2px;
+    padding: 2px;
+    background: var(--color-border-default);
+
+    // Tab list container (for semantic list usage)
+    &__list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 2px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    // Scrollable variant for mobile or constrained spaces
+    &--scrollable {
+      @include cyber-scrollbar;
+
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+
+      .cyber-tabs__list {
+        flex-wrap: nowrap;
+      }
+
+      .cyber-tab {
+        flex: none;
+        white-space: nowrap;
+      }
+    }
+
+    // Responsive: scroll on mobile by default
+    @media (width <= 768px) {
+      @include cyber-scrollbar;
+
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+
+      .cyber-tab {
+        flex: none;
+        white-space: nowrap;
+      }
+    }
+
+    // Tab panels container
+    &__panels {
+      padding: var(--space-md) 0;
+    }
+
+    // Individual panel
+    &__panel {
+      display: none;
+      animation: tab-fade-in var(--transition-base) ease-out;
+
+      &--active {
+        display: block;
+      }
+    }
+
+    // --------------------------------------------------------
+    // Variants
+    // --------------------------------------------------------
+
+    &--vertical {
+      flex-direction: column;
+      gap: var(--space-md);
+      padding: 0;
+      background: transparent;
+
+      .cyber-tabs__list {
+        flex-direction: column;
+        gap: 2px;
+        padding: 2px;
+        background: var(--color-border-default);
+      }
+
+      .cyber-tab {
+        flex: none;
+
+        &--active::after {
+          width: 3px;
+          height: 100%;
+          inset: 0 0 0 auto;
+        }
+      }
+
+      .cyber-tabs__panels {
+        flex: 1;
+        padding: 0;
+      }
+    }
+
+    &--pills {
+      gap: var(--space-xs);
+      padding: 0;
+      background: transparent;
+
+      .cyber-tabs__list {
+        gap: var(--space-xs);
+        background: transparent;
+      }
+
+      .cyber-tab {
+        flex: none;
+        border: var(--border-thin) solid var(--color-border-default);
+        clip-path: polygon(
+          0 0,
+          calc(100% - 8px) 0,
+          100% 8px,
+          100% 100%,
+          8px 100%,
+          0 calc(100% - 8px)
+        );
+
+        &--active {
+          border-color: var(--cyber-cyan-500);
+          background: color-mix(in srgb, var(--cyber-cyan-500) 20%, transparent);
+
+          &::after {
+            display: none;
+          }
+        }
+      }
+    }
+
+    &--fullwidth {
+      .cyber-tabs__list {
+        width: 100%;
+      }
+
+      .cyber-tab {
+        flex: 1 1 auto;
+        justify-content: center;
+        min-width: fit-content;
+      }
+
+      // On mobile, fullwidth tabs scroll instead of shrink
+      @media (width <= 768px) {
+        .cyber-tab {
+          flex: none;
+        }
+      }
+    }
+  }
+
+  // Individual tab
+  .cyber-tab {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    gap: var(--space-xs);
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-sm) var(--space-md);
+    border: none;
+    font-family: var(--font-display);
+    font-size: var(--text-sm);
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-decoration: none;
+    text-transform: uppercase;
+    white-space: nowrap;
+    color: var(--color-text-secondary);
+    background: var(--color-bg-secondary);
+    transition:
+      color var(--duration-fast),
+      background-color var(--duration-fast);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--color-text-primary);
+      background: var(--color-bg-tertiary);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--cyber-cyan-500);
+      outline-offset: -2px;
+    }
+
+    // Touch devices: prevent stuck hover states
+    @media (hover: none) {
+      &:hover {
+        color: var(--color-text-secondary);
+        background: var(--color-bg-secondary);
+      }
+
+      &:active {
+        color: var(--color-text-primary);
+        background: var(--color-bg-tertiary);
+      }
+
+      &--active:hover {
+        color: var(--cyber-cyan-500);
+        background: var(--color-bg-tertiary);
+      }
+    }
+
+    // Active state
+    &--active {
+      color: var(--cyber-cyan-500);
+      background: var(--color-bg-tertiary);
+
+      // Glow line under active tab
+      &::after {
+        content: "";
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        height: 3px;
+        background: var(--cyber-cyan-500);
+        box-shadow: 0 0 10px var(--cyber-cyan-500);
+      }
+    }
+
+    // Disabled state
+    &:disabled,
+    &--disabled {
+      opacity: 50%;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    // Icon support
+    svg,
+    &__icon {
+      flex-shrink: 0;
+      width: 1em;
+      height: 1em;
+    }
+
+    // Badge/count in tab
+    &__badge {
+      padding: 2px 6px;
+      border: var(--border-thin) solid var(--cyber-cyan-500);
+      font-family: var(--font-mono);
+      font-size: var(--text-xs);
+      color: var(--cyber-cyan-500);
+      background: color-mix(in srgb, var(--cyber-cyan-500) 20%, transparent);
+    }
+
+    // --------------------------------------------------------
+    // Color Variants
+    // --------------------------------------------------------
+
+    &--magenta {
+      &.cyber-tab--active {
+        color: var(--cyber-magenta-500);
+
+        &::after {
+          background: var(--cyber-magenta-500);
+          box-shadow: 0 0 10px var(--cyber-magenta-500);
+        }
+      }
+
+      .cyber-tab__badge {
+        border-color: var(--cyber-magenta-500);
+        color: var(--cyber-magenta-500);
+        background: color-mix(in srgb, var(--cyber-magenta-500) 20%, transparent);
+      }
+    }
+
+    &--yellow {
+      &.cyber-tab--active {
+        color: var(--cyber-yellow-500);
+
+        &::after {
+          background: var(--cyber-yellow-500);
+          box-shadow: 0 0 10px var(--cyber-yellow-500);
+        }
+      }
+    }
+
+    &--green {
+      &.cyber-tab--active {
+        color: var(--cyber-green-500);
+
+        &::after {
+          background: var(--cyber-green-500);
+          box-shadow: 0 0 10px var(--cyber-green-500);
+        }
+      }
+    }
+  }
+
+  // Tab panel fade animation
+  @keyframes tab-fade-in {
+    from {
+      opacity: 0%;
+      transform: translateY(4px);
+    }
+
+    to {
+      opacity: 100%;
+      transform: translateY(0);
+    }
+  }
+}

package/src/scss/components/_terminal.scss

@@ -0,0 +1,259 @@
+// ============================================================
+// Terminal Component
+// Terminal window with header bar, dots, and blinking cursor
+// ============================================================
+
+@layer components {
+  .cyber-terminal {
+    border: 1px solid var(--cyber-green-700);
+    overflow: hidden;
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    background: var(--color-bg-secondary);
+
+    // Header bar with dots and title
+    &__header {
+      display: flex;
+      gap: var(--space-xs);
+      align-items: center;
+      padding: var(--space-xs) var(--space-sm);
+      border-bottom: 1px solid var(--cyber-green-700);
+      background: var(--cyber-green-900);
+    }
+
+    // Traffic light dots
+    &__dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+
+      &--red {
+        background: var(--cyber-magenta-500);
+      }
+
+      &--yellow {
+        background: var(--cyber-yellow-500);
+      }
+
+      &--green {
+        background: var(--cyber-green-500);
+      }
+    }
+
+    // Window title (positioned to the right)
+    &__title {
+      margin-left: auto;
+      font-size: var(--text-xs);
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      color: var(--cyber-green-500);
+    }
+
+    // Terminal body with green-themed text
+    &__body {
+      padding: var(--space-md);
+      line-height: 1.8;
+      color: var(--cyber-green-400);
+    }
+
+    // Prompt styling with cyan color
+    &__prompt {
+      color: var(--cyber-cyan-500);
+    }
+
+    // Blinking cursor
+    &__cursor {
+      display: inline-block;
+      width: 8px;
+      height: 1.1em;
+      margin-left: 2px;
+      background: var(--cyber-green-500);
+      transform: translateY(0.1em);
+      animation: blink 1s step-end infinite;
+      vertical-align: middle;
+    }
+
+    // Terminal line
+    &__line {
+      display: flex;
+      gap: var(--space-xs);
+      line-height: 1.8;
+      white-space: pre-wrap;
+      word-break: break-word;
+
+      &--input {
+        color: var(--color-text-primary);
+      }
+
+      &--output {
+        color: var(--color-text-secondary);
+      }
+
+      &--error {
+        color: var(--cyber-magenta-500);
+      }
+
+      &--success {
+        color: var(--cyber-green-500);
+      }
+
+      &--warning {
+        color: var(--cyber-yellow-500);
+      }
+
+      &--info {
+        color: var(--cyber-cyan-500);
+      }
+    }
+
+    // Command text
+    &__command {
+      color: var(--color-text-primary);
+    }
+
+    // Input line (for interactive terminals)
+    &__input {
+      display: flex;
+      gap: var(--space-xs);
+      align-items: center;
+      padding: var(--space-sm);
+      border-top: 1px solid var(--cyber-green-700);
+      background: var(--color-bg-tertiary);
+    }
+
+    &__input-field {
+      flex: 1;
+      border: none;
+      font-family: inherit;
+      font-size: inherit;
+      color: var(--color-text-primary);
+      background: transparent;
+      caret-color: var(--cyber-cyan-500);
+      outline: none;
+
+      &::placeholder {
+        color: var(--color-text-muted);
+      }
+    }
+
+    // --------------------------------------------------------
+    // Syntax Highlighting
+    // --------------------------------------------------------
+
+    .syntax-keyword {
+      color: var(--cyber-magenta-500);
+    }
+
+    .syntax-string {
+      color: var(--cyber-green-500);
+    }
+
+    .syntax-number {
+      color: var(--cyber-yellow-500);
+    }
+
+    .syntax-comment {
+      font-style: italic;
+      color: var(--cyber-chrome-500);
+    }
+
+    .syntax-function {
+      color: var(--cyber-cyan-500);
+    }
+
+    .syntax-variable {
+      color: var(--cyber-chrome-200);
+    }
+
+    .syntax-operator {
+      color: var(--cyber-chrome-400);
+    }
+
+    // --------------------------------------------------------
+    // Size Variants
+    // --------------------------------------------------------
+
+    &--sm {
+      font-size: var(--text-xs);
+
+      .cyber-terminal__body {
+        min-height: 100px;
+        max-height: 250px;
+      }
+    }
+
+    &--lg {
+      font-size: var(--text-base);
+
+      .cyber-terminal__body {
+        min-height: 300px;
+        max-height: 700px;
+      }
+    }
+
+    &--fullheight {
+      .cyber-terminal__body {
+        max-height: none;
+      }
+    }
+
+    // --------------------------------------------------------
+    // Style Variants
+    // --------------------------------------------------------
+
+    &--no-header {
+      .cyber-terminal__header {
+        display: none;
+      }
+    }
+
+    &--rounded {
+      border-radius: var(--radius-lg);
+
+      .cyber-terminal__header {
+        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+      }
+    }
+
+    &--glow {
+      box-shadow:
+        0 0 20px color-mix(in srgb, var(--cyber-green-500) 20%, transparent),
+        inset 0 0 60px color-mix(in srgb, var(--cyber-green-500) 5%, transparent);
+    }
+  }
+
+  // Blink animation for cursor
+  @keyframes blink {
+    50% {
+      opacity: 0%;
+    }
+  }
+
+  // Typing animation helper
+  .cyber-terminal-typing {
+    border-right: 2px solid var(--cyber-cyan-500);
+    overflow: hidden;
+    white-space: nowrap;
+    animation:
+      typing 2s steps(30, end),
+      blink 1s step-end infinite;
+
+    @keyframes typing {
+      from {
+        width: 0;
+      }
+
+      to {
+        width: 100%;
+      }
+    }
+  }
+
+  // ASCII art container
+  .cyber-terminal-ascii {
+    line-height: 1.2;
+    white-space: pre;
+    color: var(--cyber-cyan-500);
+    text-shadow: 0 0 10px var(--cyber-cyan-500);
+  }
+}

package/src/scss/core/_base.scss

@@ -0,0 +1,25 @@
+// ============================================================
+// Base Element Styles
+// ============================================================
+
+@layer base {
+  body {
+    min-height: 100dvh;
+    overflow-x: hidden;
+    font-family: var(--font-body);
+    font-size: var(--text-base);
+    line-height: 1.6;
+    color: var(--color-text-primary);
+    background-color: var(--color-bg-primary);
+  }
+
+  code {
+    padding: 0.125em 0.375em;
+    border: 1px solid var(--color-border-default);
+    border-radius: var(--radius-sm);
+    font-family: var(--font-mono);
+    font-size: 0.9em;
+    color: var(--cyber-cyan-400);
+    background: var(--color-bg-tertiary);
+  }
+}

package/src/scss/core/_index.scss

@@ -0,0 +1,6 @@
+// Core module index - import all core styles
+@forward "layers";
+@forward "variables";
+@forward "reset";
+@forward "base";
+@forward "typography";

package/src/scss/core/_layers.scss

@@ -0,0 +1,5 @@
+// ============================================================
+// CSS Layers - Cascade control
+// ============================================================
+
+@layer reset, base, theme, components, utilities;

package/src/scss/core/_mixins.scss

@@ -0,0 +1,96 @@
+// ============================================================
+// Shared Mixins - Performance Optimized
+// ============================================================
+
+// --------------------------------------------------------
+// Color Variant Mixin
+// Reduces duplication across components using color variants
+// --------------------------------------------------------
+
+@mixin color-variant($property: --accent-color, $glow-property: null) {
+  &--magenta {
+    #{$property}: var(--cyber-magenta-500);
+
+    @if $glow-property {
+      #{$glow-property}: var(--glow-magenta);
+    }
+  }
+
+  &--yellow {
+    #{$property}: var(--cyber-yellow-500);
+
+    @if $glow-property {
+      #{$glow-property}: var(--glow-yellow);
+    }
+  }
+
+  &--green {
+    #{$property}: var(--cyber-green-500);
+
+    @if $glow-property {
+      #{$glow-property}: var(--glow-green);
+    }
+  }
+}
+
+// --------------------------------------------------------
+// Cyber Scrollbar Mixin
+// Consistent scrollbar styling across components
+// --------------------------------------------------------
+
+@mixin cyber-scrollbar($height: 4px) {
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    height: $height;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--color-bg-secondary);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+    background: var(--cyber-chrome-600);
+  }
+}
+
+// --------------------------------------------------------
+// Transition Properties Mixin
+// Avoid "transition: all" for better performance
+// --------------------------------------------------------
+
+@mixin transition-colors($duration: var(--duration-fast)) {
+  transition:
+    color $duration,
+    background-color $duration,
+    border-color $duration,
+    box-shadow $duration;
+}
+
+@mixin transition-interactive($duration: var(--duration-fast), $easing: ease) {
+  transition:
+    color $duration $easing,
+    background-color $duration $easing,
+    border-color $duration $easing,
+    box-shadow $duration $easing,
+    opacity $duration $easing;
+}
+
+// --------------------------------------------------------
+// Reduced Motion Mixin
+// Consistent accessibility support
+// --------------------------------------------------------
+
+@mixin reduced-motion {
+  @media (prefers-reduced-motion: reduce) {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+@mixin reduced-motion-content {
+  @media (prefers-reduced-motion: reduce) {
+    @content;
+  }
+}