cybercore-css 0.2.0

package/src/scss/utilities/_backgrounds.scss

@@ -0,0 +1,201 @@
+// ============================================================
+// Background Utilities
+// Background colors, gradients, and properties
+// ============================================================
+
+@layer utilities {
+  // --------------------------------------------------------
+  // Background Colors
+  // --------------------------------------------------------
+
+  .cyber-bg-transparent {
+    background-color: transparent;
+  }
+
+  .cyber-bg-current {
+    background-color: currentcolor;
+  }
+
+  // Themed backgrounds
+  .cyber-bg-primary {
+    background-color: var(--color-bg-primary);
+  }
+
+  .cyber-bg-secondary {
+    background-color: var(--color-bg-secondary);
+  }
+
+  .cyber-bg-tertiary {
+    background-color: var(--color-bg-tertiary);
+  }
+
+  .cyber-bg-elevated {
+    background-color: var(--color-bg-elevated);
+  }
+
+  // Accent backgrounds
+  .cyber-bg-cyan {
+    background-color: var(--cyber-cyan-500);
+  }
+
+  .cyber-bg-cyan-subtle {
+    background-color: color-mix(in srgb, var(--cyber-cyan-500) 15%, transparent);
+  }
+
+  .cyber-bg-magenta {
+    background-color: var(--cyber-magenta-500);
+  }
+
+  .cyber-bg-magenta-subtle {
+    background-color: color-mix(in srgb, var(--cyber-magenta-500) 15%, transparent);
+  }
+
+  .cyber-bg-yellow {
+    background-color: var(--cyber-yellow-500);
+  }
+
+  .cyber-bg-yellow-subtle {
+    background-color: color-mix(in srgb, var(--cyber-yellow-500) 15%, transparent);
+  }
+
+  .cyber-bg-green {
+    background-color: var(--cyber-green-500);
+  }
+
+  .cyber-bg-green-subtle {
+    background-color: color-mix(in srgb, var(--cyber-green-500) 15%, transparent);
+  }
+
+  // Void scale
+  .cyber-bg-void-900 {
+    background-color: var(--cyber-void-900);
+  }
+
+  .cyber-bg-void-800 {
+    background-color: var(--cyber-void-800);
+  }
+
+  .cyber-bg-void-700 {
+    background-color: var(--cyber-void-700);
+  }
+
+  // --------------------------------------------------------
+  // Background Gradients
+  // --------------------------------------------------------
+
+  .cyber-bg-gradient-cyan {
+    background: linear-gradient(135deg, var(--cyber-cyan-700) 0%, var(--cyber-cyan-500) 100%);
+  }
+
+  .cyber-bg-gradient-magenta {
+    background: linear-gradient(135deg, var(--cyber-magenta-700) 0%, var(--cyber-magenta-500) 100%);
+  }
+
+  .cyber-bg-gradient-yellow {
+    background: linear-gradient(135deg, var(--cyber-yellow-700) 0%, var(--cyber-yellow-500) 100%);
+  }
+
+  .cyber-bg-gradient-green {
+    background: linear-gradient(135deg, var(--cyber-green-700) 0%, var(--cyber-green-500) 100%);
+  }
+
+  .cyber-bg-gradient-cyber {
+    background: linear-gradient(135deg, var(--cyber-cyan-500) 0%, var(--cyber-magenta-500) 100%);
+  }
+
+  // --------------------------------------------------------
+  // Background Size
+  // --------------------------------------------------------
+
+  .cyber-bg-auto {
+    background-size: auto;
+  }
+
+  .cyber-bg-cover {
+    background-size: cover;
+  }
+
+  .cyber-bg-contain {
+    background-size: contain;
+  }
+
+  // --------------------------------------------------------
+  // Background Position
+  // --------------------------------------------------------
+
+  .cyber-bg-center {
+    background-position: center;
+  }
+
+  .cyber-bg-top {
+    background-position: top;
+  }
+
+  .cyber-bg-bottom {
+    background-position: bottom;
+  }
+
+  .cyber-bg-left {
+    background-position: left;
+  }
+
+  .cyber-bg-right {
+    background-position: right;
+  }
+
+  // --------------------------------------------------------
+  // Background Repeat
+  // --------------------------------------------------------
+
+  .cyber-bg-repeat {
+    background-repeat: repeat;
+  }
+
+  .cyber-bg-no-repeat {
+    background-repeat: no-repeat;
+  }
+
+  .cyber-bg-repeat-x {
+    background-repeat: repeat-x;
+  }
+
+  .cyber-bg-repeat-y {
+    background-repeat: repeat-y;
+  }
+
+  // --------------------------------------------------------
+  // Background Attachment
+  // --------------------------------------------------------
+
+  .cyber-bg-fixed {
+    background-attachment: fixed;
+  }
+
+  .cyber-bg-local {
+    background-attachment: local;
+  }
+
+  .cyber-bg-scroll {
+    background-attachment: scroll;
+  }
+
+  // --------------------------------------------------------
+  // Background Clip
+  // --------------------------------------------------------
+
+  .cyber-bg-clip-border {
+    background-clip: border-box;
+  }
+
+  .cyber-bg-clip-padding {
+    background-clip: padding-box;
+  }
+
+  .cyber-bg-clip-content {
+    background-clip: content-box;
+  }
+
+  .cyber-bg-clip-text {
+    background-clip: text;
+  }
+}

package/src/scss/utilities/_borders.scss

@@ -0,0 +1,198 @@
+// ============================================================
+// Border Utilities
+// Border width, style, color, and radius
+// ============================================================
+
+@layer utilities {
+  // --------------------------------------------------------
+  // Border Width
+  // --------------------------------------------------------
+
+  .cyber-border-0 {
+    border-width: 0;
+  }
+
+  .cyber-border {
+    border-width: 1px;
+  }
+
+  .cyber-border-2 {
+    border-width: 2px;
+  }
+
+  .cyber-border-4 {
+    border-width: 4px;
+  }
+
+  // Directional borders
+  .cyber-border-t {
+    border-top-width: 1px;
+  }
+
+  .cyber-border-r {
+    border-right-width: 1px;
+  }
+
+  .cyber-border-b {
+    border-bottom-width: 1px;
+  }
+
+  .cyber-border-l {
+    border-left-width: 1px;
+  }
+
+  .cyber-border-t-0 {
+    border-top-width: 0;
+  }
+
+  .cyber-border-r-0 {
+    border-right-width: 0;
+  }
+
+  .cyber-border-b-0 {
+    border-bottom-width: 0;
+  }
+
+  .cyber-border-l-0 {
+    border-left-width: 0;
+  }
+
+  // --------------------------------------------------------
+  // Border Style
+  // --------------------------------------------------------
+
+  .cyber-border-solid {
+    border-style: solid;
+  }
+
+  .cyber-border-dashed {
+    border-style: dashed;
+  }
+
+  .cyber-border-dotted {
+    border-style: dotted;
+  }
+
+  .cyber-border-none {
+    border-style: none;
+  }
+
+  // --------------------------------------------------------
+  // Border Color
+  // --------------------------------------------------------
+
+  .cyber-border-default {
+    border-color: var(--color-border-default);
+  }
+
+  .cyber-border-subtle {
+    border-color: var(--color-border-subtle);
+  }
+
+  .cyber-border-cyan {
+    border-color: var(--cyber-cyan-500);
+  }
+
+  .cyber-border-magenta {
+    border-color: var(--cyber-magenta-500);
+  }
+
+  .cyber-border-yellow {
+    border-color: var(--cyber-yellow-500);
+  }
+
+  .cyber-border-green {
+    border-color: var(--cyber-green-500);
+  }
+
+  .cyber-border-transparent {
+    border-color: transparent;
+  }
+
+  // --------------------------------------------------------
+  // Border Radius
+  // --------------------------------------------------------
+
+  .cyber-rounded-none {
+    border-radius: 0;
+  }
+
+  .cyber-rounded-sm {
+    border-radius: var(--radius-sm);
+  }
+
+  .cyber-rounded {
+    border-radius: var(--radius-md);
+  }
+
+  .cyber-rounded-md {
+    border-radius: var(--radius-md);
+  }
+
+  .cyber-rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+
+  .cyber-rounded-xl {
+    border-radius: var(--radius-xl);
+  }
+
+  .cyber-rounded-full {
+    border-radius: 9999px;
+  }
+
+  // Directional radius
+  .cyber-rounded-t {
+    border-top-left-radius: var(--radius-md);
+    border-top-right-radius: var(--radius-md);
+  }
+
+  .cyber-rounded-r {
+    border-bottom-right-radius: var(--radius-md);
+    border-top-right-radius: var(--radius-md);
+  }
+
+  .cyber-rounded-b {
+    border-bottom-left-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
+  }
+
+  .cyber-rounded-l {
+    border-bottom-left-radius: var(--radius-md);
+    border-top-left-radius: var(--radius-md);
+  }
+
+  .cyber-rounded-t-none {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .cyber-rounded-b-none {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  // --------------------------------------------------------
+  // Ring (outline alternative)
+  // --------------------------------------------------------
+
+  .cyber-ring {
+    box-shadow: 0 0 0 2px var(--cyber-cyan-500);
+  }
+
+  .cyber-ring-magenta {
+    box-shadow: 0 0 0 2px var(--cyber-magenta-500);
+  }
+
+  .cyber-ring-yellow {
+    box-shadow: 0 0 0 2px var(--cyber-yellow-500);
+  }
+
+  .cyber-ring-green {
+    box-shadow: 0 0 0 2px var(--cyber-green-500);
+  }
+
+  .cyber-ring-0 {
+    box-shadow: none;
+  }
+}

package/src/scss/utilities/_display.scss

@@ -0,0 +1,33 @@
+// ============================================================
+// Display Utilities
+// ============================================================
+
+@layer utilities {
+  .cyber-hidden {
+    display: none;
+  }
+
+  .cyber-block {
+    display: block;
+  }
+
+  .cyber-inline {
+    display: inline;
+  }
+
+  .cyber-inline-block {
+    display: inline-block;
+  }
+
+  .cyber-flex {
+    display: flex;
+  }
+
+  .cyber-inline-flex {
+    display: inline-flex;
+  }
+
+  .cyber-grid {
+    display: grid;
+  }
+}

package/src/scss/utilities/_filters.scss

@@ -0,0 +1,279 @@
+// ============================================================
+// Filter Utilities
+// Blur, brightness, contrast, grayscale, etc.
+// ============================================================
+
+@layer utilities {
+  // --------------------------------------------------------
+  // Blur
+  // --------------------------------------------------------
+
+  .cyber-blur-none {
+    filter: blur(0);
+  }
+
+  .cyber-blur-sm {
+    filter: blur(4px);
+  }
+
+  .cyber-blur {
+    filter: blur(8px);
+  }
+
+  .cyber-blur-md {
+    filter: blur(12px);
+  }
+
+  .cyber-blur-lg {
+    filter: blur(16px);
+  }
+
+  .cyber-blur-xl {
+    filter: blur(24px);
+  }
+
+  .cyber-blur-2xl {
+    filter: blur(40px);
+  }
+
+  .cyber-blur-3xl {
+    filter: blur(64px);
+  }
+
+  // --------------------------------------------------------
+  // Brightness
+  // --------------------------------------------------------
+
+  .cyber-brightness-0 {
+    filter: brightness(0);
+  }
+
+  .cyber-brightness-50 {
+    filter: brightness(0.5);
+  }
+
+  .cyber-brightness-75 {
+    filter: brightness(0.75);
+  }
+
+  .cyber-brightness-90 {
+    filter: brightness(0.9);
+  }
+
+  .cyber-brightness-95 {
+    filter: brightness(0.95);
+  }
+
+  .cyber-brightness-100 {
+    filter: brightness(1);
+  }
+
+  .cyber-brightness-105 {
+    filter: brightness(1.05);
+  }
+
+  .cyber-brightness-110 {
+    filter: brightness(1.1);
+  }
+
+  .cyber-brightness-125 {
+    filter: brightness(1.25);
+  }
+
+  .cyber-brightness-150 {
+    filter: brightness(1.5);
+  }
+
+  .cyber-brightness-200 {
+    filter: brightness(2);
+  }
+
+  // --------------------------------------------------------
+  // Contrast
+  // --------------------------------------------------------
+
+  .cyber-contrast-0 {
+    filter: contrast(0);
+  }
+
+  .cyber-contrast-50 {
+    filter: contrast(0.5);
+  }
+
+  .cyber-contrast-75 {
+    filter: contrast(0.75);
+  }
+
+  .cyber-contrast-100 {
+    filter: contrast(1);
+  }
+
+  .cyber-contrast-125 {
+    filter: contrast(1.25);
+  }
+
+  .cyber-contrast-150 {
+    filter: contrast(1.5);
+  }
+
+  .cyber-contrast-200 {
+    filter: contrast(2);
+  }
+
+  // --------------------------------------------------------
+  // Grayscale
+  // --------------------------------------------------------
+
+  .cyber-grayscale-0 {
+    filter: grayscale(0);
+  }
+
+  .cyber-grayscale {
+    filter: grayscale(100%);
+  }
+
+  .cyber-grayscale-50 {
+    filter: grayscale(50%);
+  }
+
+  // --------------------------------------------------------
+  // Hue Rotate
+  // --------------------------------------------------------
+
+  .cyber-hue-rotate-0 {
+    filter: hue-rotate(0deg);
+  }
+
+  .cyber-hue-rotate-15 {
+    filter: hue-rotate(15deg);
+  }
+
+  .cyber-hue-rotate-30 {
+    filter: hue-rotate(30deg);
+  }
+
+  .cyber-hue-rotate-60 {
+    filter: hue-rotate(60deg);
+  }
+
+  .cyber-hue-rotate-90 {
+    filter: hue-rotate(90deg);
+  }
+
+  .cyber-hue-rotate-180 {
+    filter: hue-rotate(180deg);
+  }
+
+  .cyber--hue-rotate-15 {
+    filter: hue-rotate(-15deg);
+  }
+
+  .cyber--hue-rotate-30 {
+    filter: hue-rotate(-30deg);
+  }
+
+  .cyber--hue-rotate-60 {
+    filter: hue-rotate(-60deg);
+  }
+
+  .cyber--hue-rotate-90 {
+    filter: hue-rotate(-90deg);
+  }
+
+  // --------------------------------------------------------
+  // Invert
+  // --------------------------------------------------------
+
+  .cyber-invert-0 {
+    filter: invert(0);
+  }
+
+  .cyber-invert {
+    filter: invert(100%);
+  }
+
+  // --------------------------------------------------------
+  // Saturate
+  // --------------------------------------------------------
+
+  .cyber-saturate-0 {
+    filter: saturate(0);
+  }
+
+  .cyber-saturate-50 {
+    filter: saturate(0.5);
+  }
+
+  .cyber-saturate-100 {
+    filter: saturate(1);
+  }
+
+  .cyber-saturate-150 {
+    filter: saturate(1.5);
+  }
+
+  .cyber-saturate-200 {
+    filter: saturate(2);
+  }
+
+  // --------------------------------------------------------
+  // Sepia
+  // --------------------------------------------------------
+
+  .cyber-sepia-0 {
+    filter: sepia(0);
+  }
+
+  .cyber-sepia {
+    filter: sepia(100%);
+  }
+
+  // --------------------------------------------------------
+  // Drop Shadow
+  // --------------------------------------------------------
+
+  .cyber-drop-shadow-none {
+    filter: drop-shadow(0 0 0 transparent);
+  }
+
+  .cyber-drop-shadow-sm {
+    filter: drop-shadow(0 1px 1px rgb(0 0 0 / 5%));
+  }
+
+  .cyber-drop-shadow {
+    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 10%)) drop-shadow(0 1px 1px rgb(0 0 0 / 6%));
+  }
+
+  .cyber-drop-shadow-md {
+    filter: drop-shadow(0 4px 3px rgb(0 0 0 / 7%)) drop-shadow(0 2px 2px rgb(0 0 0 / 6%));
+  }
+
+  .cyber-drop-shadow-lg {
+    filter: drop-shadow(0 10px 8px rgb(0 0 0 / 4%)) drop-shadow(0 4px 3px rgb(0 0 0 / 10%));
+  }
+
+  .cyber-drop-shadow-xl {
+    filter: drop-shadow(0 20px 13px rgb(0 0 0 / 3%)) drop-shadow(0 8px 5px rgb(0 0 0 / 8%));
+  }
+
+  .cyber-drop-shadow-2xl {
+    filter: drop-shadow(0 25px 25px rgb(0 0 0 / 15%));
+  }
+
+  // Glow drop shadows
+  .cyber-drop-shadow-glow-cyan {
+    filter: drop-shadow(0 0 10px var(--cyber-cyan-500));
+  }
+
+  .cyber-drop-shadow-glow-magenta {
+    filter: drop-shadow(0 0 10px var(--cyber-magenta-500));
+  }
+
+  .cyber-drop-shadow-glow-yellow {
+    filter: drop-shadow(0 0 10px var(--cyber-yellow-500));
+  }
+
+  .cyber-drop-shadow-glow-green {
+    filter: drop-shadow(0 0 10px var(--cyber-green-500));
+  }
+}