cybercore-css 0.2.0

package/src/scss/utilities/_sizing.scss

@@ -0,0 +1,229 @@
+// ============================================================
+// Sizing Utilities
+// Width, height, min/max dimensions
+// ============================================================
+
+@layer utilities {
+  // --------------------------------------------------------
+  // Width
+  // --------------------------------------------------------
+
+  .cyber-w-auto {
+    width: auto;
+  }
+
+  .cyber-w-full {
+    width: 100%;
+  }
+
+  .cyber-w-screen {
+    width: 100vw;
+  }
+
+  .cyber-w-min {
+    width: min-content;
+  }
+
+  .cyber-w-max {
+    width: max-content;
+  }
+
+  .cyber-w-fit {
+    width: fit-content;
+  }
+
+  // Fractional widths
+  .cyber-w-half {
+    width: 50%;
+  }
+
+  .cyber-w-third {
+    width: 33.3333%;
+  }
+
+  .cyber-w-two-thirds {
+    width: 66.6667%;
+  }
+
+  .cyber-w-quarter {
+    width: 25%;
+  }
+
+  .cyber-w-three-quarters {
+    width: 75%;
+  }
+
+  // Fixed widths
+  .cyber-w-xs {
+    width: 20rem;
+  }
+
+  .cyber-w-sm {
+    width: 24rem;
+  }
+
+  .cyber-w-md {
+    width: 28rem;
+  }
+
+  .cyber-w-lg {
+    width: 32rem;
+  }
+
+  .cyber-w-xl {
+    width: 36rem;
+  }
+
+  // --------------------------------------------------------
+  // Max Width
+  // --------------------------------------------------------
+
+  .cyber-max-w-none {
+    max-width: none;
+  }
+
+  .cyber-max-w-full {
+    max-width: 100%;
+  }
+
+  .cyber-max-w-screen {
+    max-width: 100vw;
+  }
+
+  .cyber-max-w-xs {
+    max-width: 20rem;
+  }
+
+  .cyber-max-w-sm {
+    max-width: 24rem;
+  }
+
+  .cyber-max-w-md {
+    max-width: 28rem;
+  }
+
+  .cyber-max-w-lg {
+    max-width: 32rem;
+  }
+
+  .cyber-max-w-xl {
+    max-width: 36rem;
+  }
+
+  .cyber-max-w-2xl {
+    max-width: 42rem;
+  }
+
+  .cyber-max-w-3xl {
+    max-width: 48rem;
+  }
+
+  .cyber-max-w-4xl {
+    max-width: 56rem;
+  }
+
+  .cyber-max-w-5xl {
+    max-width: 64rem;
+  }
+
+  .cyber-max-w-6xl {
+    max-width: 72rem;
+  }
+
+  .cyber-max-w-7xl {
+    max-width: 80rem;
+  }
+
+  // --------------------------------------------------------
+  // Min Width
+  // --------------------------------------------------------
+
+  .cyber-min-w-0 {
+    min-width: 0;
+  }
+
+  .cyber-min-w-full {
+    min-width: 100%;
+  }
+
+  .cyber-min-w-min {
+    min-width: min-content;
+  }
+
+  .cyber-min-w-max {
+    min-width: max-content;
+  }
+
+  // --------------------------------------------------------
+  // Height
+  // --------------------------------------------------------
+
+  .cyber-h-auto {
+    height: auto;
+  }
+
+  .cyber-h-full {
+    height: 100%;
+  }
+
+  .cyber-h-screen {
+    height: 100vh;
+  }
+
+  .cyber-h-min {
+    height: min-content;
+  }
+
+  .cyber-h-max {
+    height: max-content;
+  }
+
+  .cyber-h-fit {
+    height: fit-content;
+  }
+
+  // Fractional heights
+  .cyber-h-half {
+    height: 50%;
+  }
+
+  .cyber-h-third {
+    height: 33.3333%;
+  }
+
+  .cyber-h-two-thirds {
+    height: 66.6667%;
+  }
+
+  // --------------------------------------------------------
+  // Min Height
+  // --------------------------------------------------------
+
+  .cyber-min-h-0 {
+    min-height: 0;
+  }
+
+  .cyber-min-h-full {
+    min-height: 100%;
+  }
+
+  .cyber-min-h-screen {
+    min-height: 100vh;
+  }
+
+  // --------------------------------------------------------
+  // Max Height
+  // --------------------------------------------------------
+
+  .cyber-max-h-full {
+    max-height: 100%;
+  }
+
+  .cyber-max-h-screen {
+    max-height: 100vh;
+  }
+
+  .cyber-max-h-none {
+    max-height: none;
+  }
+}

package/src/scss/utilities/_spacing.scss

@@ -0,0 +1,185 @@
+// ============================================================
+// Spacing Utilities
+// ============================================================
+
+@layer utilities {
+  // --------------------------------------------------------
+  // Margin
+  // --------------------------------------------------------
+
+  // All sides
+  .cyber-m-0 {
+    margin: 0;
+  }
+
+  .cyber-m-auto {
+    margin: auto;
+  }
+
+  .cyber-m-xs {
+    margin: var(--space-xs);
+  }
+
+  .cyber-m-sm {
+    margin: var(--space-sm);
+  }
+
+  .cyber-m-md {
+    margin: var(--space-md);
+  }
+
+  .cyber-m-lg {
+    margin: var(--space-lg);
+  }
+
+  // Horizontal (left + right)
+  .cyber-mx-auto {
+    margin-inline: auto;
+  }
+
+  .cyber-mx-sm {
+    margin-inline: var(--space-sm);
+  }
+
+  .cyber-mx-md {
+    margin-inline: var(--space-md);
+  }
+
+  .cyber-mx-lg {
+    margin-inline: var(--space-lg);
+  }
+
+  // Vertical (top + bottom)
+  .cyber-my-sm {
+    margin-block: var(--space-sm);
+  }
+
+  .cyber-my-md {
+    margin-block: var(--space-md);
+  }
+
+  .cyber-my-lg {
+    margin-block: var(--space-lg);
+  }
+
+  .cyber-my-xl {
+    margin-block: var(--space-xl);
+  }
+
+  // Top
+  .cyber-mt-0 {
+    margin-top: 0;
+  }
+
+  .cyber-mt-xs {
+    margin-top: var(--space-xs);
+  }
+
+  .cyber-mt-sm {
+    margin-top: var(--space-sm);
+  }
+
+  .cyber-mt-md {
+    margin-top: var(--space-md);
+  }
+
+  .cyber-mt-lg {
+    margin-top: var(--space-lg);
+  }
+
+  .cyber-mt-xl {
+    margin-top: var(--space-xl);
+  }
+
+  // Bottom
+  .cyber-mb-0 {
+    margin-bottom: 0;
+  }
+
+  .cyber-mb-xs {
+    margin-bottom: var(--space-xs);
+  }
+
+  .cyber-mb-sm {
+    margin-bottom: var(--space-sm);
+  }
+
+  .cyber-mb-md {
+    margin-bottom: var(--space-md);
+  }
+
+  .cyber-mb-lg {
+    margin-bottom: var(--space-lg);
+  }
+
+  .cyber-mb-xl {
+    margin-bottom: var(--space-xl);
+  }
+
+  // --------------------------------------------------------
+  // Padding
+  // --------------------------------------------------------
+
+  // All sides
+  .cyber-p-0 {
+    padding: 0;
+  }
+
+  .cyber-p-xs {
+    padding: var(--space-xs);
+  }
+
+  .cyber-p-sm {
+    padding: var(--space-sm);
+  }
+
+  .cyber-p-md {
+    padding: var(--space-md);
+  }
+
+  .cyber-p-lg {
+    padding: var(--space-lg);
+  }
+
+  .cyber-p-xl {
+    padding: var(--space-xl);
+  }
+
+  // Horizontal (left + right)
+  .cyber-px-0 {
+    padding-inline: 0;
+  }
+
+  .cyber-px-sm {
+    padding-inline: var(--space-sm);
+  }
+
+  .cyber-px-md {
+    padding-inline: var(--space-md);
+  }
+
+  .cyber-px-lg {
+    padding-inline: var(--space-lg);
+  }
+
+  // Vertical (top + bottom)
+  .cyber-py-0 {
+    padding-block: 0;
+  }
+
+  .cyber-py-sm {
+    padding-block: var(--space-sm);
+  }
+
+  .cyber-py-md {
+    padding-block: var(--space-md);
+  }
+
+  .cyber-py-lg {
+    padding-block: var(--space-lg);
+  }
+
+  .cyber-py-xl {
+    padding-block: var(--space-xl);
+  }
+}

package/src/scss/utilities/_text.scss

@@ -0,0 +1,177 @@
+// ============================================================
+// Text Utilities
+// ============================================================
+
+@layer utilities {
+  // --------------------------------------------------------
+  // Text Alignment
+  // --------------------------------------------------------
+
+  .cyber-text-left {
+    text-align: left;
+  }
+
+  .cyber-text-center {
+    text-align: center;
+  }
+
+  .cyber-text-right {
+    text-align: right;
+  }
+
+  // --------------------------------------------------------
+  // Text Colors
+  // --------------------------------------------------------
+
+  .cyber-text-primary {
+    color: var(--color-text-primary);
+  }
+
+  .cyber-text-secondary {
+    color: var(--color-text-secondary);
+  }
+
+  .cyber-text-muted {
+    color: var(--color-text-muted);
+  }
+
+  .cyber-text-cyan {
+    color: var(--cyber-cyan-500);
+  }
+
+  .cyber-text-magenta {
+    color: var(--cyber-magenta-500);
+  }
+
+  .cyber-text-yellow {
+    color: var(--cyber-yellow-500);
+  }
+
+  .cyber-text-green {
+    color: var(--cyber-green-500);
+  }
+
+  // --------------------------------------------------------
+  // Text with Glow
+  // --------------------------------------------------------
+
+  // Base glow (cyan)
+  .cyber-text-glow {
+    color: var(--cyber-cyan-500);
+    text-shadow: var(--glow-text-cyan);
+
+    // BEM modifiers
+    &--magenta {
+      color: var(--cyber-magenta-500);
+      text-shadow: var(--glow-text-magenta);
+    }
+
+    &--yellow {
+      color: var(--cyber-yellow-500);
+      text-shadow: var(--glow-text-yellow);
+    }
+
+    &--green {
+      color: var(--cyber-green-500);
+      text-shadow: var(--glow-text-green);
+    }
+  }
+
+  // Alternative flat naming (keep for backwards compatibility)
+  .cyber-text-glow-cyan {
+    color: var(--cyber-cyan-500);
+    text-shadow: var(--glow-text-cyan);
+  }
+
+  .cyber-text-glow-magenta {
+    color: var(--cyber-magenta-500);
+    text-shadow: var(--glow-text-magenta);
+  }
+
+  .cyber-text-glow-yellow {
+    color: var(--cyber-yellow-500);
+    text-shadow: var(--glow-text-yellow);
+  }
+
+  .cyber-text-glow-green {
+    color: var(--cyber-green-500);
+    text-shadow: var(--glow-text-green);
+  }
+
+  // --------------------------------------------------------
+  // Font Weights
+  // --------------------------------------------------------
+
+  .cyber-font-normal {
+    font-weight: 400;
+  }
+
+  .cyber-font-medium {
+    font-weight: 500;
+  }
+
+  .cyber-font-semibold {
+    font-weight: 600;
+  }
+
+  .cyber-font-bold {
+    font-weight: 700;
+  }
+
+  // --------------------------------------------------------
+  // Font Families
+  // --------------------------------------------------------
+
+  .cyber-font-display {
+    font-family: var(--font-display);
+  }
+
+  .cyber-font-body {
+    font-family: var(--font-body);
+  }
+
+  .cyber-font-mono {
+    font-family: var(--font-mono);
+  }
+
+  // --------------------------------------------------------
+  // Text Transform
+  // --------------------------------------------------------
+
+  .cyber-uppercase {
+    letter-spacing: var(--tracking-wider);
+    text-transform: uppercase;
+  }
+
+  .cyber-lowercase {
+    text-transform: lowercase;
+  }
+
+  .cyber-capitalize {
+    text-transform: capitalize;
+  }
+
+  // --------------------------------------------------------
+  // Text Overflow
+  // --------------------------------------------------------
+
+  .cyber-truncate {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .cyber-line-clamp-2 {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
+  .cyber-line-clamp-3 {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+}