zenkit-css 1.0.0

package/scss/abstracts/_mixins.scss

@@ -0,0 +1,272 @@
+// ========================================
+// ZenKit - Mixins
+// ========================================
+
+@use 'variables' as *;
+
+// ----------------------------------------
+// Breakpoint Mixins (Mobile First)
+// ----------------------------------------
+@mixin breakpoint-up($name) {
+  $min: map-get($breakpoints, $name);
+  @if $min and $min > 0 {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin breakpoint-down($name) {
+  $max: map-get($breakpoints, $name);
+  @if $max and $max > 0 {
+    @media (max-width: ($max - 0.02px)) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Shorthand mixins
+@mixin sm { @include breakpoint-up(sm) { @content; } }
+@mixin md { @include breakpoint-up(md) { @content; } }
+@mixin lg { @include breakpoint-up(lg) { @content; } }
+@mixin xl { @include breakpoint-up(xl) { @content; } }
+@mixin xxl { @include breakpoint-up(2xl) { @content; } }
+
+// ----------------------------------------
+// Flexbox Mixins
+// ----------------------------------------
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+@mixin flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+// ----------------------------------------
+// Grid Mixins
+// ----------------------------------------
+@mixin make-container {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: calc($grid-gutter / 2);
+  padding-left: calc($grid-gutter / 2);
+}
+
+@mixin make-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: calc($grid-gutter / -2);
+  margin-left: calc($grid-gutter / -2);
+}
+
+@mixin make-col($size, $columns: $grid-columns) {
+  flex: 0 0 percentage(calc($size / $columns));
+  max-width: percentage(calc($size / $columns));
+  padding-right: calc($grid-gutter / 2);
+  padding-left: calc($grid-gutter / 2);
+}
+
+// ----------------------------------------
+// Typography Mixins
+// ----------------------------------------
+@mixin text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin line-clamp($lines: 2) {
+  display: -webkit-box;
+  -webkit-line-clamp: $lines;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+// ----------------------------------------
+// Button Mixins
+// ----------------------------------------
+@mixin button-base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1.25rem;
+  font-family: inherit;
+  font-size: $font-size-base;
+  font-weight: $font-weight-medium;
+  line-height: $line-height-normal;
+  text-decoration: none;
+  border: $border-width solid transparent;
+  border-radius: $border-radius;
+  cursor: pointer;
+  transition: all $transition-base $transition-timing;
+
+  &:focus {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+@mixin button-solid($bg, $color: $white) {
+  background-color: $bg;
+  color: $color;
+  border-color: $bg;
+
+  &:hover:not(:disabled) {
+    filter: brightness(0.9);
+  }
+
+  &:active:not(:disabled) {
+    filter: brightness(0.8);
+  }
+}
+
+@mixin button-outline($color) {
+  background-color: transparent;
+  color: $color;
+  border-color: $color;
+
+  &:hover:not(:disabled) {
+    background-color: $color;
+    color: $white;
+  }
+}
+
+@mixin button-ghost($color) {
+  background-color: transparent;
+  color: $color;
+  border-color: transparent;
+
+  &:hover:not(:disabled) {
+    background-color: rgba($color, 0.1);
+  }
+}
+
+// ----------------------------------------
+// Form Mixins
+// ----------------------------------------
+@mixin form-control {
+  display: block;
+  width: 100%;
+  padding: 0.625rem 0.875rem;
+  font-family: inherit;
+  font-size: $font-size-base;
+  font-weight: $font-weight-normal;
+  line-height: $line-height-normal;
+  color: var(--text);
+  background-color: var(--bg);
+  border: $border-width solid var(--border);
+  border-radius: $border-radius;
+  transition: border-color $transition-base $transition-timing,
+              box-shadow $transition-base $transition-timing;
+
+  &::placeholder {
+    color: var(--text-muted);
+    opacity: 1;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba($primary, 0.15);
+  }
+
+  &:disabled {
+    background-color: var(--bg-muted);
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+}
+
+// ----------------------------------------
+// Card Mixins
+// ----------------------------------------
+@mixin card {
+  background-color: var(--bg-card);
+  border: $border-width solid var(--border);
+  border-radius: $border-radius-lg;
+  box-shadow: $shadow-sm;
+}
+
+// ----------------------------------------
+// Transition Mixins
+// ----------------------------------------
+@mixin transition($properties...) {
+  $result: ();
+  @each $property in $properties {
+    $result: append($result, $property $transition-base $transition-timing, comma);
+  }
+  transition: $result;
+}
+
+// ----------------------------------------
+// Accessibility Mixins
+// ----------------------------------------
+@mixin visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@mixin focus-ring {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+
+// ----------------------------------------
+// Clearfix
+// ----------------------------------------
+@mixin clearfix {
+  &::after {
+    display: block;
+    clear: both;
+    content: "";
+  }
+}
+
+// ----------------------------------------
+// Aspect Ratio (for older browser support)
+// ----------------------------------------
+@mixin aspect-ratio($width, $height) {
+  position: relative;
+
+  &::before {
+    display: block;
+    padding-top: percentage(calc($height / $width));
+    content: "";
+  }
+
+  > * {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}

package/scss/abstracts/_variables.scss

@@ -0,0 +1,216 @@
+// ========================================
+// ZenKit - Variables
+// ========================================
+
+// ----------------------------------------
+// Colors - Primary (Indigo)
+// ----------------------------------------
+$primary-50:  #EEF2FF;
+$primary-100: #E0E7FF;
+$primary-200: #C7D2FE;
+$primary-300: #A5B4FC;
+$primary-400: #818CF8;
+$primary-500: #6366F1;
+$primary-600: #4F46E5;
+$primary-700: #4338CA;
+$primary-800: #3730A3;
+$primary-900: #312E81;
+$primary-950: #1E1B4B;
+
+$primary: $primary-600;
+
+// ----------------------------------------
+// Colors - Neutral (Slate)
+// ----------------------------------------
+$gray-50:  #F8FAFC;
+$gray-100: #F1F5F9;
+$gray-200: #E2E8F0;
+$gray-300: #CBD5E1;
+$gray-400: #94A3B8;
+$gray-500: #64748B;
+$gray-600: #475569;
+$gray-700: #334155;
+$gray-800: #1E293B;
+$gray-900: #0F172A;
+$gray-950: #020617;
+
+// ----------------------------------------
+// Colors - Semantic
+// ----------------------------------------
+$success: #10B981;
+$success-light: #D1FAE5;
+$success-dark: #059669;
+
+$warning: #F59E0B;
+$warning-light: #FEF3C7;
+$warning-dark: #D97706;
+
+$danger: #EF4444;
+$danger-light: #FEE2E2;
+$danger-dark: #DC2626;
+
+$info: #06B6D4;
+$info-light: #CFFAFE;
+$info-dark: #0891B2;
+
+// ----------------------------------------
+// Colors - Additional
+// ----------------------------------------
+$white: #FFFFFF;
+$black: #000000;
+
+// Color Maps
+$colors: (
+  "primary": $primary,
+  "primary-50": $primary-50,
+  "primary-100": $primary-100,
+  "primary-200": $primary-200,
+  "primary-300": $primary-300,
+  "primary-400": $primary-400,
+  "primary-500": $primary-500,
+  "primary-600": $primary-600,
+  "primary-700": $primary-700,
+  "primary-800": $primary-800,
+  "primary-900": $primary-900,
+  "gray-50": $gray-50,
+  "gray-100": $gray-100,
+  "gray-200": $gray-200,
+  "gray-300": $gray-300,
+  "gray-400": $gray-400,
+  "gray-500": $gray-500,
+  "gray-600": $gray-600,
+  "gray-700": $gray-700,
+  "gray-800": $gray-800,
+  "gray-900": $gray-900,
+  "success": $success,
+  "warning": $warning,
+  "danger": $danger,
+  "info": $info,
+  "white": $white,
+  "black": $black
+);
+
+// ----------------------------------------
+// Typography
+// ----------------------------------------
+$font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+$font-family-mono: 'Fira Code', 'SF Mono', 'Consolas', 'Liberation Mono', Menlo, monospace;
+
+$font-size-xs: 0.75rem;    // 12px
+$font-size-sm: 0.875rem;   // 14px
+$font-size-base: 1rem;     // 16px
+$font-size-lg: 1.125rem;   // 18px
+$font-size-xl: 1.25rem;    // 20px
+$font-size-2xl: 1.5rem;    // 24px
+$font-size-3xl: 1.875rem;  // 30px
+$font-size-4xl: 2.25rem;   // 36px
+$font-size-5xl: 3rem;      // 48px
+
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semibold: 600;
+$font-weight-bold: 700;
+
+$line-height-none: 1;
+$line-height-tight: 1.25;
+$line-height-snug: 1.375;
+$line-height-normal: 1.5;
+$line-height-relaxed: 1.625;
+$line-height-loose: 2;
+
+// ----------------------------------------
+// Spacing
+// ----------------------------------------
+$spacer: 1rem;
+
+$spacers: (
+  0: 0,
+  1: 0.25rem,   // 4px
+  2: 0.5rem,    // 8px
+  3: 0.75rem,   // 12px
+  4: 1rem,      // 16px
+  5: 1.25rem,   // 20px
+  6: 1.5rem,    // 24px
+  8: 2rem,      // 32px
+  10: 2.5rem,   // 40px
+  12: 3rem,     // 48px
+  16: 4rem,     // 64px
+  20: 5rem,     // 80px
+  24: 6rem,     // 96px
+  auto: auto
+);
+
+// ----------------------------------------
+// Breakpoints (Mobile First)
+// ----------------------------------------
+$breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 1024px,
+  xl: 1280px,
+  2xl: 1536px
+);
+
+// ----------------------------------------
+// Container Max Widths
+// ----------------------------------------
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  2xl: 1320px
+);
+
+// ----------------------------------------
+// Grid
+// ----------------------------------------
+$grid-columns: 12;
+$grid-gutter: 1.5rem;
+
+// ----------------------------------------
+// Borders
+// ----------------------------------------
+$border-width: 1px;
+$border-color: $gray-200;
+
+$border-radius-sm: 0.25rem;   // 4px
+$border-radius: 0.375rem;     // 6px
+$border-radius-md: 0.5rem;    // 8px
+$border-radius-lg: 0.75rem;   // 12px
+$border-radius-xl: 1rem;      // 16px
+$border-radius-2xl: 1.5rem;   // 24px
+$border-radius-full: 9999px;
+
+// ----------------------------------------
+// Shadows
+// ----------------------------------------
+$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+$shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+
+// ----------------------------------------
+// Transitions
+// ----------------------------------------
+$transition-fast: 150ms;
+$transition-base: 200ms;
+$transition-slow: 300ms;
+$transition-timing: ease-in-out;
+
+// ----------------------------------------
+// Z-Index
+// ----------------------------------------
+$z-dropdown: 1000;
+$z-sticky: 1020;
+$z-fixed: 1030;
+$z-offcanvas-backdrop: 1040;
+$z-offcanvas: 1045;
+$z-modal-backdrop: 1050;
+$z-modal: 1055;
+$z-popover: 1060;
+$z-tooltip: 1070;
+$z-toast: 1080;

package/scss/base/_reset.scss

@@ -0,0 +1,130 @@
+// ========================================
+// ZenKit - Modern CSS Reset
+// Based on Josh Comeau's & Piccalilli's modern resets
+// ========================================
+
+// Box sizing rules
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+// Remove default margin and padding
+* {
+  margin: 0;
+  padding: 0;
+}
+
+// Prevent font size inflation
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+// Core body defaults
+body {
+  min-height: 100vh;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// Set core body defaults
+html,
+body {
+  height: 100%;
+}
+
+// Balance text wrapping on headings
+h1, h2, h3, h4, h5, h6 {
+  text-wrap: balance;
+  overflow-wrap: break-word;
+}
+
+// A elements that don't have a class get default styles
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+  color: currentColor;
+}
+
+// Make images easier to work with
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+// Inherit fonts for inputs and buttons
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+// Make sure textareas without a rows attribute are not tiny
+textarea:not([rows]) {
+  min-height: 10em;
+}
+
+// Anything that has been anchored to should have extra scroll margin
+:target {
+  scroll-margin-block: 5ex;
+}
+
+// Remove list styles on ul, ol elements with a list role
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+// Remove all animations, transitions and smooth scroll for people that prefer not to see them
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+// Remove default button styles
+button {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+// Remove fieldset styles
+fieldset {
+  border: none;
+  padding: 0;
+}
+
+// Remove legend padding
+legend {
+  padding: 0;
+}
+
+// Remove default table spacing
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+// Hidden attribute support
+[hidden] {
+  display: none !important;
+}