cybercore-css 0.2.0

package/src/scss/core/_reset.scss

@@ -0,0 +1,26 @@
+// ============================================================
+// Minimal CSS Reset
+// ============================================================
+
+@layer reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  html {
+    font-size: 16px;
+    color-scheme: dark;
+    -webkit-font-smoothing: antialiased;
+    scroll-behavior: smooth;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html {
+      scroll-behavior: auto;
+    }
+  }
+}

package/src/scss/core/_typography.scss

@@ -0,0 +1,43 @@
+// ============================================================
+// Typography System
+// ============================================================
+
+@layer base {
+  // Headings
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-display);
+    font-weight: 700;
+    line-height: 1.1;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+  }
+
+  h1 {
+    font-size: var(--text-5xl);
+  }
+
+  h2 {
+    font-size: var(--text-4xl);
+  }
+
+  h3 {
+    font-size: var(--text-3xl);
+  }
+
+  h4 {
+    font-size: var(--text-2xl);
+  }
+
+  h5 {
+    font-size: var(--text-xl);
+  }
+
+  h6 {
+    font-size: var(--text-lg);
+  }
+}

package/src/scss/core/_variables.scss

@@ -0,0 +1,163 @@
+// ============================================================
+// Design Tokens - CSS Custom Properties
+// ============================================================
+
+@layer theme {
+  :root {
+    // --------------------------------------------------------
+    // Color System
+    // --------------------------------------------------------
+
+    // Primary Cyans (optimized: removed unused 100, 200, 800 shades)
+    --cyber-cyan-300: #87eaf2;
+    --cyber-cyan-400: #54d1db;
+    --cyber-cyan-500: #00f0ff;
+    --cyber-cyan-600: #00c4cc;
+    --cyber-cyan-700: #0097a7;
+    --cyber-cyan-900: #005d6a;
+
+    // Hot Magentas (optimized: removed unused 100-400, 600, 800, 900 shades)
+    --cyber-magenta-500: #ff2a6d;
+    --cyber-magenta-700: #b31248;
+
+    // Electric Yellows (optimized: removed unused 100-400, 600, 800, 900 shades)
+    --cyber-yellow-500: #fcee0a;
+    --cyber-yellow-700: #aca406;
+
+    // Toxic Greens (optimized: removed unused 100-300, 600, 800 shades)
+    --cyber-green-400: #43ff83;
+    --cyber-green-500: #05ffa1;
+    --cyber-green-700: #03a969;
+    --cyber-green-900: #015331;
+
+    // Void Blacks (optimized: removed unused 600 shade)
+    --cyber-void-100: #2a2d3a;
+    --cyber-void-200: #1f2230;
+    --cyber-void-300: #181a25;
+    --cyber-void-400: #12141d;
+    --cyber-void-500: #0d0e14;
+    --cyber-void-700: #07080c;
+    --cyber-void-800: #040508;
+    --cyber-void-900: #010204;
+
+    // Chrome Grays (optimized: removed unused 700-900 shades)
+    --cyber-chrome-100: #f0f1f5;
+    --cyber-chrome-200: #d1d4de;
+    --cyber-chrome-300: #b2b7c7;
+    --cyber-chrome-400: #939ab0;
+    --cyber-chrome-500: #747d99;
+    --cyber-chrome-600: #5c647a;
+
+    // --------------------------------------------------------
+    // Semantic Colors
+    // --------------------------------------------------------
+
+    --color-bg-primary: var(--cyber-void-500);
+    --color-bg-secondary: var(--cyber-void-400);
+    --color-bg-tertiary: var(--cyber-void-300);
+    --color-bg-elevated: var(--cyber-void-200);
+    --color-text-primary: var(--cyber-chrome-100);
+    --color-text-secondary: var(--cyber-chrome-300);
+    --color-text-muted: var(--cyber-chrome-500);
+    --color-border-default: var(--cyber-void-100);
+
+    // --------------------------------------------------------
+    // Glows
+    // --------------------------------------------------------
+
+    --glow-cyan:
+      0 0 20px var(--cyber-cyan-500),
+      0 0 40px color-mix(in srgb, var(--cyber-cyan-500) 50%, transparent),
+      0 0 80px color-mix(in srgb, var(--cyber-cyan-500) 25%, transparent);
+    --glow-magenta:
+      0 0 20px var(--cyber-magenta-500),
+      0 0 40px color-mix(in srgb, var(--cyber-magenta-500) 50%, transparent);
+    --glow-yellow:
+      0 0 20px var(--cyber-yellow-500),
+      0 0 40px color-mix(in srgb, var(--cyber-yellow-500) 50%, transparent);
+    --glow-green:
+      0 0 20px var(--cyber-green-500),
+      0 0 40px color-mix(in srgb, var(--cyber-green-500) 50%, transparent);
+    --glow-text-cyan:
+      0 0 10px var(--cyber-cyan-500),
+      0 0 20px color-mix(in srgb, var(--cyber-cyan-500) 60%, transparent);
+
+    // --------------------------------------------------------
+    // Typography
+    // --------------------------------------------------------
+
+    --font-display: "Rajdhani", "Orbitron", system-ui, sans-serif;
+    --font-body: "Exo 2", system-ui, sans-serif;
+    --font-mono: "JetBrains Mono", monospace;
+
+    // Type Scale
+    --text-xs: clamp(0.64rem, 0.59rem + 0.24vw, 0.75rem);
+    --text-sm: clamp(0.8rem, 0.74rem + 0.32vw, 0.94rem);
+    --text-base: clamp(1rem, 0.93rem + 0.37vw, 1.18rem);
+    --text-lg: clamp(1.25rem, 1.16rem + 0.47vw, 1.47rem);
+    --text-xl: clamp(1.56rem, 1.45rem + 0.59vw, 1.84rem);
+    --text-2xl: clamp(1.95rem, 1.81rem + 0.74vw, 2.3rem);
+    --text-3xl: clamp(2.44rem, 2.26rem + 0.92vw, 2.87rem);
+    --text-4xl: clamp(3.05rem, 2.83rem + 1.15vw, 3.58rem);
+    --text-5xl: clamp(3.81rem, 3.54rem + 1.44vw, 4.48rem);
+
+    // Letter Spacing
+    --tracking-wide: 0.05em;
+    --tracking-wider: 0.1em;
+
+    // --------------------------------------------------------
+    // Spacing
+    // --------------------------------------------------------
+
+    --space-3xs: clamp(0.25rem, 0.23rem + 0.09vw, 0.31rem);
+    --space-2xs: clamp(0.5rem, 0.46rem + 0.18vw, 0.63rem);
+    --space-xs: clamp(0.75rem, 0.7rem + 0.28vw, 0.94rem);
+    --space-sm: clamp(1rem, 0.93rem + 0.37vw, 1.25rem);
+    --space-md: clamp(1.5rem, 1.39rem + 0.56vw, 1.88rem);
+    --space-lg: clamp(2rem, 1.86rem + 0.74vw, 2.5rem);
+    --space-xl: clamp(3rem, 2.78rem + 1.11vw, 3.75rem);
+    --space-2xl: clamp(4rem, 3.71rem + 1.48vw, 5rem);
+    --space-3xl: clamp(6rem, 5.57rem + 2.22vw, 7.5rem);
+
+    // --------------------------------------------------------
+    // Borders
+    // --------------------------------------------------------
+
+    --radius-sm: 2px;
+    --radius-md: 4px;
+    --radius-lg: 8px;
+    --radius-full: 9999px;
+    --radius-cyber: 0 12px 0 12px;
+    --border-thin: 1px;
+    --border-medium: 2px;
+    --border-thick: 3px;
+
+    // --------------------------------------------------------
+    // Animation
+    // --------------------------------------------------------
+
+    --ease-cyber: cubic-bezier(0.77, 0, 0.175, 1);
+    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+    --duration-fast: 150ms;
+    --duration-normal: 300ms;
+    --duration-slow: 500ms;
+    --transition-fast: var(--duration-fast) ease;
+    --transition-base: var(--duration-normal) ease;
+    --transition-slow: var(--duration-slow) ease;
+
+    // --------------------------------------------------------
+    // Z-Index (optimized: removed unused --z-base, --z-raised, --z-overlay)
+    // --------------------------------------------------------
+
+    --z-sticky: 100;
+    --z-modal: 1000;
+
+    // --------------------------------------------------------
+    // Effects (optimized: removed unused --chromatic-offset)
+    // --------------------------------------------------------
+
+    --noise-opacity: 0.03;
+    --scanline-opacity: 0.04;
+  }
+}

package/src/scss/cybercore.scss

@@ -0,0 +1,46 @@
+// ============================================================
+// CYBERCORE CSS Framework
+// A pure CSS cyberpunk design system
+// ============================================================
+
+// Layer order for cascade control
+@use "core/layers";
+
+// Core system (required)
+@use "core/variables";
+@use "core/reset";
+@use "core/base";
+@use "core/typography";
+
+// Components (modular - import what you need)
+@use "components/buttons";
+@use "components/cards";
+@use "components/inputs";
+@use "components/progress";
+@use "components/badges";
+@use "components/alerts";
+@use "components/tables";
+@use "components/nav";
+@use "components/tabs";
+@use "components/modal";
+@use "components/dropdown";
+@use "components/terminal";
+@use "components/spinner";
+@use "components/skeleton";
+
+// Effects (modular - import what you need)
+@use "effects/noise";
+@use "effects/scanlines";
+@use "effects/glitch";
+@use "effects/neon-border";
+@use "effects/datastream";
+
+// Utilities
+@use "utilities/display";
+@use "utilities/flex";
+@use "utilities/grid";
+@use "utilities/spacing";
+@use "utilities/text";
+@use "utilities/accessibility";
+@use "utilities/animation";
+@use "utilities/icons";

package/src/scss/effects/_datastream.scss

@@ -0,0 +1,43 @@
+// ============================================================
+// Datastream Effect - Animated vertical data flow
+// ============================================================
+
+@layer components {
+  .cyber-datastream {
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      z-index: 1;
+      border-radius: inherit;
+      background: linear-gradient(
+        180deg,
+        transparent 0%,
+        color-mix(in srgb, var(--cyber-cyan-500) 30%, transparent) 50%,
+        transparent 100%
+      );
+      background-size: 100% 200%;
+      animation: datastream 3s linear infinite;
+      pointer-events: none;
+      inset: 0;
+    }
+  }
+
+  @keyframes datastream {
+    0% {
+      background-position: 0% 0%;
+    }
+
+    100% {
+      background-position: 0% 200%;
+    }
+  }
+
+  // Respect reduced motion preference
+  @media (prefers-reduced-motion: reduce) {
+    .cyber-datastream::before {
+      animation: none;
+    }
+  }
+}

package/src/scss/effects/_glitch.scss

@@ -0,0 +1,389 @@
+// ============================================================
+// Glitch Effect - Chromatic aberration and distortion
+// ============================================================
+
+@layer components {
+  // Glitch Heading - Text with animated chromatic aberration
+  .cyber-heading {
+    position: relative;
+    display: inline-block;
+    color: var(--cyber-cyan-500);
+    text-shadow:
+      0 0 10px var(--cyber-cyan-500),
+      0 0 20px color-mix(in srgb, var(--cyber-cyan-500) 60%, transparent);
+
+    &::before,
+    &::after {
+      content: attr(data-text);
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 80%;
+      will-change: transform, clip-path;
+    }
+
+    &::before {
+      z-index: -1;
+      color: var(--cyber-magenta-500);
+      animation: glitch-1 8s infinite linear alternate-reverse;
+    }
+
+    &::after {
+      z-index: -1;
+      color: var(--cyber-cyan-300);
+      animation: glitch-2 6s infinite linear alternate;
+    }
+  }
+
+  @keyframes glitch-1 {
+    0%,
+    100% {
+      transform: translate(-2px, 0);
+      clip-path: inset(0 0 95% 0);
+    }
+
+    10% {
+      transform: translate(2px, 0);
+      clip-path: inset(30% 0 40% 0);
+    }
+
+    20% {
+      transform: translate(-1px, 0);
+      clip-path: inset(70% 0 10% 0);
+    }
+
+    30% {
+      transform: translate(1px, 0);
+      clip-path: inset(10% 0 60% 0);
+    }
+
+    40% {
+      transform: translate(-2px, 0);
+      clip-path: inset(80% 0 5% 0);
+    }
+
+    50% {
+      transform: translate(2px, 0);
+      clip-path: inset(20% 0 55% 0);
+    }
+
+    60% {
+      transform: translate(-1px, 0);
+      clip-path: inset(50% 0 30% 0);
+    }
+
+    70% {
+      transform: translate(1px, 0);
+      clip-path: inset(5% 0 85% 0);
+    }
+
+    80% {
+      transform: translate(-2px, 0);
+      clip-path: inset(45% 0 35% 0);
+    }
+
+    90% {
+      transform: translate(2px, 0);
+      clip-path: inset(85% 0 5% 0);
+    }
+  }
+
+  @keyframes glitch-2 {
+    0%,
+    100% {
+      transform: translate(2px, 0);
+      clip-path: inset(95% 0 0 0);
+    }
+
+    10% {
+      transform: translate(-2px, 0);
+      clip-path: inset(40% 0 30% 0);
+    }
+
+    20% {
+      transform: translate(1px, 0);
+      clip-path: inset(10% 0 70% 0);
+    }
+
+    30% {
+      transform: translate(-1px, 0);
+      clip-path: inset(60% 0 10% 0);
+    }
+
+    40% {
+      transform: translate(2px, 0);
+      clip-path: inset(5% 0 80% 0);
+    }
+
+    50% {
+      transform: translate(-2px, 0);
+      clip-path: inset(55% 0 20% 0);
+    }
+
+    60% {
+      transform: translate(1px, 0);
+      clip-path: inset(30% 0 50% 0);
+    }
+
+    70% {
+      transform: translate(-1px, 0);
+      clip-path: inset(85% 0 5% 0);
+    }
+
+    80% {
+      transform: translate(2px, 0);
+      clip-path: inset(35% 0 45% 0);
+    }
+
+    90% {
+      transform: translate(-2px, 0);
+      clip-path: inset(5% 0 85% 0);
+    }
+  }
+
+  // Respect reduced motion preference for cyber-heading
+  @media (prefers-reduced-motion: reduce) {
+    .cyber-heading {
+      &::before,
+      &::after {
+        opacity: 0%;
+        transform: none;
+        animation: none;
+        clip-path: none;
+      }
+    }
+  }
+
+  .cyber-glitch {
+    --glitch-color-1: var(--cyber-cyan-500, #00f0ff);
+    --glitch-color-2: var(--cyber-magenta-500, #ff2a6d);
+    --glitch-offset: 2px;
+    --glitch-duration: 3s;
+
+    position: relative;
+
+    // Chromatic aberration layers
+    &::before,
+    &::after {
+      content: attr(data-text);
+      position: absolute;
+      overflow: hidden;
+      color: inherit;
+      background: inherit;
+      pointer-events: none;
+      inset: 0;
+      will-change: transform, clip-path;
+    }
+
+    // Cyan channel offset
+    &::before {
+      color: var(--glitch-color-1);
+      animation: cyber-glitch-1 var(--glitch-duration) infinite linear alternate-reverse;
+      clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
+      mix-blend-mode: screen;
+    }
+
+    // Magenta channel offset
+    &::after {
+      color: var(--glitch-color-2);
+      animation: cyber-glitch-2 var(--glitch-duration) infinite linear alternate-reverse;
+      clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
+      mix-blend-mode: screen;
+    }
+
+    // Intense glitch variant
+    &--intense {
+      --glitch-offset: 4px;
+      --glitch-duration: 1.5s;
+
+      &::before {
+        animation: cyber-glitch-intense-1 var(--glitch-duration) infinite;
+      }
+
+      &::after {
+        animation: cyber-glitch-intense-2 var(--glitch-duration) infinite;
+      }
+    }
+
+    // Hover-only glitch
+    &--hover {
+      &::before,
+      &::after {
+        opacity: 0%;
+        animation: none;
+      }
+
+      &:hover::before,
+      &:hover::after {
+        opacity: 100%;
+      }
+
+      &:hover::before {
+        animation: cyber-glitch-1 0.3s infinite linear alternate-reverse;
+      }
+
+      &:hover::after {
+        animation: cyber-glitch-2 0.3s infinite linear alternate-reverse;
+      }
+    }
+
+    // Subtle glitch for continuous use
+    &--subtle {
+      --glitch-offset: 1px;
+
+      &::before,
+      &::after {
+        opacity: 70%;
+      }
+    }
+  }
+
+  // Standard glitch animations
+  @keyframes cyber-glitch-1 {
+    0%,
+    100% {
+      transform: translate(0);
+      clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
+    }
+
+    20% {
+      transform: translate(calc(var(--glitch-offset) * -1), 0);
+      clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);
+    }
+
+    40% {
+      transform: translate(var(--glitch-offset), 0);
+      clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
+    }
+
+    60% {
+      transform: translate(calc(var(--glitch-offset) * -0.5), 0);
+      clip-path: polygon(0 35%, 100% 35%, 100% 50%, 0 50%);
+    }
+
+    80% {
+      transform: translate(var(--glitch-offset), 0);
+      clip-path: polygon(0 0, 100% 0, 100% 10%, 0 10%);
+    }
+  }
+
+  @keyframes cyber-glitch-2 {
+    0%,
+    100% {
+      transform: translate(0);
+      clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
+    }
+
+    20% {
+      transform: translate(var(--glitch-offset), 0);
+      clip-path: polygon(0 70%, 100% 70%, 100% 85%, 0 85%);
+    }
+
+    40% {
+      transform: translate(calc(var(--glitch-offset) * -1), 0);
+      clip-path: polygon(0 80%, 100% 80%, 100% 95%, 0 95%);
+    }
+
+    60% {
+      transform: translate(calc(var(--glitch-offset) * 0.5), 0);
+      clip-path: polygon(0 60%, 100% 60%, 100% 75%, 0 75%);
+    }
+
+    80% {
+      transform: translate(calc(var(--glitch-offset) * -1), 0);
+      clip-path: polygon(0 90%, 100% 90%, 100% 100%, 0 100%);
+    }
+  }
+
+  // Intense glitch with more aggressive distortion
+  @keyframes cyber-glitch-intense-1 {
+    0% {
+      transform: translate(0);
+      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    }
+
+    5% {
+      transform: translate(var(--glitch-offset), calc(var(--glitch-offset) * -1));
+      clip-path: polygon(0 5%, 100% 5%, 100% 10%, 0 10%);
+    }
+
+    10% {
+      transform: translate(calc(var(--glitch-offset) * -2), 0);
+      clip-path: polygon(0 20%, 100% 20%, 100% 25%, 0 25%);
+    }
+
+    15% {
+      transform: translate(0);
+      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    }
+
+    50% {
+      transform: translate(calc(var(--glitch-offset) * -1), var(--glitch-offset));
+      clip-path: polygon(0 40%, 100% 40%, 100% 50%, 0 50%);
+    }
+
+    55% {
+      transform: translate(var(--glitch-offset), 0);
+      clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);
+    }
+
+    60%,
+    100% {
+      transform: translate(0);
+      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    }
+  }
+
+  @keyframes cyber-glitch-intense-2 {
+    0% {
+      transform: translate(0);
+      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    }
+
+    7% {
+      transform: translate(calc(var(--glitch-offset) * -1), var(--glitch-offset));
+      clip-path: polygon(0 75%, 100% 75%, 100% 80%, 0 80%);
+    }
+
+    12% {
+      transform: translate(var(--glitch-offset), 0);
+      clip-path: polygon(0 85%, 100% 85%, 100% 95%, 0 95%);
+    }
+
+    17% {
+      transform: translate(0);
+      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    }
+
+    45% {
+      transform: translate(var(--glitch-offset), calc(var(--glitch-offset) * -1));
+      clip-path: polygon(0 30%, 100% 30%, 100% 35%, 0 35%);
+    }
+
+    52% {
+      transform: translate(calc(var(--glitch-offset) * -2), 0);
+      clip-path: polygon(0 15%, 100% 15%, 100% 25%, 0 25%);
+    }
+
+    58%,
+    100% {
+      transform: translate(0);
+      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+    }
+  }
+
+  // Respect reduced motion preference
+  @media (prefers-reduced-motion: reduce) {
+    .cyber-glitch {
+      &::before,
+      &::after {
+        opacity: 0%;
+        transform: none;
+        animation: none;
+        clip-path: none;
+      }
+    }
+  }
+}