cybercore-css 0.2.0

package/src/scss/utilities/_flex.scss

@@ -0,0 +1,95 @@
+// ============================================================
+// Flexbox Utilities
+// ============================================================
+
+@layer utilities {
+  // Direction
+  .cyber-flex-col {
+    flex-direction: column;
+  }
+
+  .cyber-flex-row {
+    flex-direction: row;
+  }
+
+  // Wrap
+  .cyber-flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .cyber-flex-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  // Align Items
+  .cyber-items-start {
+    align-items: flex-start;
+  }
+
+  .cyber-items-center {
+    align-items: center;
+  }
+
+  .cyber-items-end {
+    align-items: flex-end;
+  }
+
+  .cyber-items-stretch {
+    align-items: stretch;
+  }
+
+  // Justify Content
+  .cyber-justify-start {
+    justify-content: flex-start;
+  }
+
+  .cyber-justify-center {
+    justify-content: center;
+  }
+
+  .cyber-justify-end {
+    justify-content: flex-end;
+  }
+
+  .cyber-justify-between {
+    justify-content: space-between;
+  }
+
+  .cyber-justify-around {
+    justify-content: space-around;
+  }
+
+  // Gap
+  .cyber-gap-xs {
+    gap: var(--space-xs);
+  }
+
+  .cyber-gap-sm {
+    gap: var(--space-sm);
+  }
+
+  .cyber-gap-md {
+    gap: var(--space-md);
+  }
+
+  .cyber-gap-lg {
+    gap: var(--space-lg);
+  }
+
+  .cyber-gap-xl {
+    gap: var(--space-xl);
+  }
+
+  // Flex grow/shrink
+  .cyber-flex-1 {
+    flex: 1 1 0%;
+  }
+
+  .cyber-flex-auto {
+    flex: 1 1 auto;
+  }
+
+  .cyber-flex-none {
+    flex: none;
+  }
+}

package/src/scss/utilities/_grid.scss

@@ -0,0 +1,68 @@
+// ============================================================
+// Grid Utilities
+// ============================================================
+
+@layer utilities {
+  // Fixed column grids with responsive auto-fit
+  .cyber-grid--2 {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
+    gap: var(--space-md);
+
+    @media (width >= 640px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  .cyber-grid--3 {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
+    gap: var(--space-md);
+
+    @media (width >= 768px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  .cyber-grid--4 {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
+    gap: var(--space-md);
+
+    @media (width >= 1024px) {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+
+  // Auto-fit grids
+  .cyber-grid--auto-sm {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
+    gap: var(--space-md);
+  }
+
+  .cyber-grid--auto-md {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
+    gap: var(--space-md);
+  }
+
+  .cyber-grid--auto-lg {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
+    gap: var(--space-md);
+  }
+
+  // Grid span utilities
+  .cyber-col-span-2 {
+    grid-column: span 2;
+  }
+
+  .cyber-col-span-3 {
+    grid-column: span 3;
+  }
+
+  .cyber-col-span-full {
+    grid-column: 1 / -1;
+  }
+}

package/src/scss/utilities/_icons.scss

@@ -0,0 +1,152 @@
+// ============================================================
+// Icon Utilities
+// ============================================================
+
+@layer utilities {
+  // --------------------------------------------------------
+  // Keyframes
+  // --------------------------------------------------------
+
+  @keyframes cyber-icon-spin {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes cyber-icon-pulse {
+    0%,
+    100% {
+      opacity: 100%;
+      transform: scale(1);
+    }
+
+    50% {
+      opacity: 60%;
+      transform: scale(0.95);
+    }
+  }
+
+  @keyframes cyber-icon-glitch {
+    0%,
+    100% {
+      transform: translate(0);
+      filter: none;
+    }
+
+    10% {
+      transform: translate(-2px, 1px);
+      filter: drop-shadow(2px 0 var(--cyber-cyan-500)) drop-shadow(-2px 0 var(--cyber-magenta-500));
+    }
+
+    20% {
+      transform: translate(2px, -1px);
+      filter: drop-shadow(-1px 0 var(--cyber-cyan-500)) drop-shadow(1px 0 var(--cyber-magenta-500));
+    }
+
+    30% {
+      transform: translate(0);
+      filter: none;
+    }
+
+    70% {
+      transform: translate(1px, 1px);
+      filter: drop-shadow(-2px 0 var(--cyber-cyan-500)) drop-shadow(2px 0 var(--cyber-magenta-500));
+    }
+
+    80% {
+      transform: translate(-1px, -1px);
+      filter: drop-shadow(1px 0 var(--cyber-cyan-500)) drop-shadow(-1px 0 var(--cyber-magenta-500));
+    }
+
+    90% {
+      transform: translate(0);
+      filter: none;
+    }
+  }
+
+  // --------------------------------------------------------
+  // Size Classes
+  // --------------------------------------------------------
+
+  .cyber-icon--sm {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .cyber-icon--md {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .cyber-icon--lg {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .cyber-icon--xl {
+    width: 3rem;
+    height: 3rem;
+  }
+
+  // --------------------------------------------------------
+  // Color Classes
+  // --------------------------------------------------------
+
+  .cyber-icon--cyan {
+    color: var(--cyber-cyan-500);
+  }
+
+  .cyber-icon--magenta {
+    color: var(--cyber-magenta-500);
+  }
+
+  .cyber-icon--yellow {
+    color: var(--cyber-yellow-500);
+  }
+
+  .cyber-icon--green {
+    color: var(--cyber-green-500);
+  }
+
+  // --------------------------------------------------------
+  // Animation Classes
+  // --------------------------------------------------------
+
+  .cyber-icon--spin {
+    animation: cyber-icon-spin 1s linear infinite;
+  }
+
+  .cyber-icon--pulse {
+    animation: cyber-icon-pulse 2s ease-in-out infinite;
+  }
+
+  .cyber-icon--glitch {
+    animation: cyber-icon-glitch 3s infinite;
+  }
+
+  // --------------------------------------------------------
+  // Alignment Helpers
+  // --------------------------------------------------------
+
+  .cyber-icon--inline {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+  }
+
+  // --------------------------------------------------------
+  // Reduced Motion Support
+  // --------------------------------------------------------
+
+  @media (prefers-reduced-motion: reduce) {
+    .cyber-icon--spin,
+    .cyber-icon--pulse,
+    .cyber-icon--glitch {
+      animation: none;
+    }
+  }
+}

package/src/scss/utilities/_index.scss

@@ -0,0 +1,35 @@
+// ============================================================
+// Utilities - Forward all utility modules
+// ============================================================
+
+// Layout
+@forward "display";
+@forward "flex";
+@forward "grid";
+@forward "position";
+@forward "sizing";
+@forward "layout";
+
+// Spacing & Typography
+@forward "spacing";
+@forward "text";
+
+// Visual
+@forward "backgrounds";
+@forward "borders";
+@forward "shadows";
+@forward "filters";
+
+// Transforms & Transitions
+@forward "transforms";
+@forward "transitions";
+@forward "animation";
+
+// Interactivity
+@forward "interactivity";
+
+// Accessibility
+@forward "accessibility";
+
+// Icons
+@forward "icons";

package/src/scss/utilities/_interactivity.scss

@@ -0,0 +1,186 @@
+// ============================================================
+// Interactivity Utilities
+// Cursor, pointer-events, user-select, scroll behavior
+// ============================================================
+
+@layer utilities {
+  // --------------------------------------------------------
+  // Cursor
+  // --------------------------------------------------------
+
+  .cyber-cursor-auto {
+    cursor: auto;
+  }
+
+  .cyber-cursor-default {
+    cursor: default;
+  }
+
+  .cyber-cursor-pointer {
+    cursor: pointer;
+  }
+
+  .cyber-cursor-wait {
+    cursor: wait;
+  }
+
+  .cyber-cursor-text {
+    cursor: text;
+  }
+
+  .cyber-cursor-move {
+    cursor: move;
+  }
+
+  .cyber-cursor-help {
+    cursor: help;
+  }
+
+  .cyber-cursor-not-allowed {
+    cursor: not-allowed;
+  }
+
+  .cyber-cursor-none {
+    cursor: none;
+  }
+
+  .cyber-cursor-crosshair {
+    cursor: crosshair;
+  }
+
+  .cyber-cursor-grab {
+    cursor: grab;
+  }
+
+  .cyber-cursor-grabbing {
+    cursor: grabbing;
+  }
+
+  .cyber-cursor-zoom-in {
+    cursor: zoom-in;
+  }
+
+  .cyber-cursor-zoom-out {
+    cursor: zoom-out;
+  }
+
+  // --------------------------------------------------------
+  // Pointer Events
+  // --------------------------------------------------------
+
+  .cyber-pointer-events-none {
+    pointer-events: none;
+  }
+
+  .cyber-pointer-events-auto {
+    pointer-events: auto;
+  }
+
+  // --------------------------------------------------------
+  // User Select
+  // --------------------------------------------------------
+
+  .cyber-select-none {
+    user-select: none;
+  }
+
+  .cyber-select-text {
+    user-select: text;
+  }
+
+  .cyber-select-all {
+    user-select: all;
+  }
+
+  .cyber-select-auto {
+    user-select: auto;
+  }
+
+  // --------------------------------------------------------
+  // Touch Action
+  // --------------------------------------------------------
+
+  .cyber-touch-auto {
+    touch-action: auto;
+  }
+
+  .cyber-touch-none {
+    touch-action: none;
+  }
+
+  .cyber-touch-pan-x {
+    touch-action: pan-x;
+  }
+
+  .cyber-touch-pan-y {
+    touch-action: pan-y;
+  }
+
+  .cyber-touch-manipulation {
+    touch-action: manipulation;
+  }
+
+  // --------------------------------------------------------
+  // Scroll Behavior
+  // --------------------------------------------------------
+
+  .cyber-scroll-auto {
+    scroll-behavior: auto;
+  }
+
+  .cyber-scroll-smooth {
+    scroll-behavior: smooth;
+  }
+
+  // --------------------------------------------------------
+  // Scroll Snap
+  // --------------------------------------------------------
+
+  .cyber-snap-start {
+    scroll-snap-align: start;
+  }
+
+  .cyber-snap-end {
+    scroll-snap-align: end;
+  }
+
+  .cyber-snap-center {
+    scroll-snap-align: center;
+  }
+
+  .cyber-snap-none {
+    scroll-snap-type: none;
+  }
+
+  .cyber-snap-x {
+    scroll-snap-type: x mandatory;
+  }
+
+  .cyber-snap-y {
+    scroll-snap-type: y mandatory;
+  }
+
+  .cyber-snap-both {
+    scroll-snap-type: both mandatory;
+  }
+
+  // --------------------------------------------------------
+  // Resize
+  // --------------------------------------------------------
+
+  .cyber-resize-none {
+    resize: none;
+  }
+
+  .cyber-resize-y {
+    resize: vertical;
+  }
+
+  .cyber-resize-x {
+    resize: horizontal;
+  }
+
+  .cyber-resize {
+    resize: both;
+  }
+}