zenkit-css 1.0.0

package/scss/base/_root.scss

@@ -0,0 +1,194 @@
+// ========================================
+// ZenKit - CSS Custom Properties (Root)
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+:root {
+  // ----------------------------------------
+  // Colors - Primary
+  // ----------------------------------------
+  --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};
+  --primary-950: #{$primary-950};
+
+  // ----------------------------------------
+  // Colors - Gray
+  // ----------------------------------------
+  --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};
+  --gray-950: #{$gray-950};
+
+  // ----------------------------------------
+  // Colors - Semantic
+  // ----------------------------------------
+  --success: #{$success};
+  --success-light: #{$success-light};
+  --success-dark: #{$success-dark};
+
+  --warning: #{$warning};
+  --warning-light: #{$warning-light};
+  --warning-dark: #{$warning-dark};
+
+  --danger: #{$danger};
+  --danger-light: #{$danger-light};
+  --danger-dark: #{$danger-dark};
+
+  --info: #{$info};
+  --info-light: #{$info-light};
+  --info-dark: #{$info-dark};
+
+  --white: #{$white};
+  --black: #{$black};
+
+  // ----------------------------------------
+  // Theme Colors (Light Mode - Default)
+  // ----------------------------------------
+  --bg: #{$gray-50};
+  --bg-secondary: #{$white};
+  --bg-card: #{$white};
+  --bg-muted: #{$gray-100};
+
+  --text: #{$gray-900};
+  --text-secondary: #{$gray-700};
+  --text-muted: #{$gray-500};
+
+  --border: #{$gray-200};
+  --border-dark: #{$gray-300};
+
+  --link: #{$primary};
+  --link-hover: #{$primary-700};
+
+  // ----------------------------------------
+  // Typography
+  // ----------------------------------------
+  --font-sans: #{$font-family-sans};
+  --font-mono: #{$font-family-mono};
+
+  --text-xs: #{$font-size-xs};
+  --text-sm: #{$font-size-sm};
+  --text-base: #{$font-size-base};
+  --text-lg: #{$font-size-lg};
+  --text-xl: #{$font-size-xl};
+  --text-2xl: #{$font-size-2xl};
+  --text-3xl: #{$font-size-3xl};
+  --text-4xl: #{$font-size-4xl};
+  --text-5xl: #{$font-size-5xl};
+
+  // ----------------------------------------
+  // Spacing
+  // ----------------------------------------
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+  --space-12: 3rem;
+  --space-16: 4rem;
+  --space-20: 5rem;
+  --space-24: 6rem;
+
+  // ----------------------------------------
+  // Borders
+  // ----------------------------------------
+  --radius-sm: #{$border-radius-sm};
+  --radius: #{$border-radius};
+  --radius-md: #{$border-radius-md};
+  --radius-lg: #{$border-radius-lg};
+  --radius-xl: #{$border-radius-xl};
+  --radius-2xl: #{$border-radius-2xl};
+  --radius-full: #{$border-radius-full};
+
+  // ----------------------------------------
+  // Shadows
+  // ----------------------------------------
+  --shadow-sm: #{$shadow-sm};
+  --shadow: #{$shadow};
+  --shadow-md: #{$shadow-md};
+  --shadow-lg: #{$shadow-lg};
+  --shadow-xl: #{$shadow-xl};
+
+  // ----------------------------------------
+  // Transitions
+  // ----------------------------------------
+  --transition-fast: #{$transition-fast};
+  --transition-base: #{$transition-base};
+  --transition-slow: #{$transition-slow};
+
+  // ----------------------------------------
+  // Z-Index
+  // ----------------------------------------
+  --z-dropdown: #{$z-dropdown};
+  --z-sticky: #{$z-sticky};
+  --z-fixed: #{$z-fixed};
+  --z-modal-backdrop: #{$z-modal-backdrop};
+  --z-modal: #{$z-modal};
+  --z-tooltip: #{$z-tooltip};
+}
+
+// ----------------------------------------
+// Dark Mode
+// ----------------------------------------
+[data-theme="dark"] {
+  --bg: #{$gray-900};
+  --bg-secondary: #{$gray-800};
+  --bg-card: #{$gray-800};
+  --bg-muted: #{$gray-700};
+
+  --text: #{$gray-50};
+  --text-secondary: #{$gray-200};
+  --text-muted: #{$gray-400};
+
+  --border: #{$gray-700};
+  --border-dark: #{$gray-600};
+
+  --link: #{$primary-400};
+  --link-hover: #{$primary-300};
+
+  // Adjusted shadows for dark mode
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
+  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
+}
+
+// System preference based dark mode
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #{$gray-900};
+    --bg-secondary: #{$gray-800};
+    --bg-card: #{$gray-800};
+    --bg-muted: #{$gray-700};
+
+    --text: #{$gray-50};
+    --text-secondary: #{$gray-200};
+    --text-muted: #{$gray-400};
+
+    --border: #{$gray-700};
+    --border-dark: #{$gray-600};
+
+    --link: #{$primary-400};
+    --link-hover: #{$primary-300};
+  }
+}

package/scss/base/_typography.scss

@@ -0,0 +1,271 @@
+// ========================================
+// ZenKit - Typography
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Base Typography
+// ----------------------------------------
+html {
+  font-size: 16px;
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  font-weight: $font-weight-normal;
+  line-height: $line-height-normal;
+  color: var(--text);
+  background-color: var(--bg);
+}
+
+// ----------------------------------------
+// Headings
+// ----------------------------------------
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  margin-bottom: 0.5em;
+  font-weight: $font-weight-bold;
+  line-height: $line-height-tight;
+  color: var(--text);
+}
+
+h1, .h1 {
+  font-size: var(--text-4xl);
+  letter-spacing: -0.025em;
+}
+
+h2, .h2 {
+  font-size: var(--text-3xl);
+  letter-spacing: -0.025em;
+}
+
+h3, .h3 {
+  font-size: var(--text-2xl);
+}
+
+h4, .h4 {
+  font-size: var(--text-xl);
+}
+
+h5, .h5 {
+  font-size: var(--text-lg);
+}
+
+h6, .h6 {
+  font-size: var(--text-base);
+}
+
+// ----------------------------------------
+// Paragraphs
+// ----------------------------------------
+p {
+  margin-bottom: 1rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// ----------------------------------------
+// Links
+// ----------------------------------------
+a {
+  color: var(--link);
+  text-decoration: none;
+  transition: color $transition-base $transition-timing;
+
+  &:hover {
+    color: var(--link-hover);
+    text-decoration: underline;
+  }
+
+  &:focus {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+  }
+}
+
+// ----------------------------------------
+// Text Utilities
+// ----------------------------------------
+.lead {
+  font-size: var(--text-xl);
+  font-weight: $font-weight-normal;
+  line-height: $line-height-relaxed;
+  color: var(--text-secondary);
+}
+
+.small, small {
+  font-size: var(--text-sm);
+}
+
+.tiny {
+  font-size: var(--text-xs);
+}
+
+// ----------------------------------------
+// Emphasis
+// ----------------------------------------
+strong, b {
+  font-weight: $font-weight-bold;
+}
+
+em, i {
+  font-style: italic;
+}
+
+mark {
+  padding: 0.125em 0.25em;
+  background-color: var(--warning-light);
+  border-radius: var(--radius-sm);
+}
+
+del, s {
+  text-decoration: line-through;
+}
+
+ins, u {
+  text-decoration: underline;
+}
+
+// ----------------------------------------
+// Code & Preformatted
+// ----------------------------------------
+code, kbd, samp, pre {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+}
+
+code {
+  padding: 0.125em 0.375em;
+  background-color: var(--bg-muted);
+  border-radius: var(--radius-sm);
+  color: var(--danger);
+}
+
+pre {
+  display: block;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  overflow-x: auto;
+  background-color: var(--bg-muted);
+  border-radius: var(--radius);
+
+  code {
+    padding: 0;
+    background-color: transparent;
+    color: inherit;
+    font-size: inherit;
+  }
+}
+
+kbd {
+  padding: 0.125em 0.375em;
+  background-color: var(--gray-800);
+  color: var(--white);
+  border-radius: var(--radius-sm);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+
+// ----------------------------------------
+// Blockquote
+// ----------------------------------------
+blockquote {
+  margin: 0 0 1rem;
+  padding: 1rem 1.5rem;
+  border-left: 4px solid var(--primary);
+  background-color: var(--bg-muted);
+  border-radius: 0 var(--radius) var(--radius) 0;
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  cite {
+    display: block;
+    margin-top: 0.5rem;
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+
+    &::before {
+      content: "— ";
+    }
+  }
+}
+
+// ----------------------------------------
+// Lists
+// ----------------------------------------
+ul, ol {
+  margin-bottom: 1rem;
+  padding-left: 1.5rem;
+}
+
+ul {
+  list-style-type: disc;
+}
+
+ol {
+  list-style-type: decimal;
+}
+
+li {
+  margin-bottom: 0.25rem;
+}
+
+ul ul, ol ol, ul ol, ol ul {
+  margin-top: 0.25rem;
+  margin-bottom: 0;
+}
+
+// Description lists
+dl {
+  margin-bottom: 1rem;
+}
+
+dt {
+  font-weight: $font-weight-semibold;
+}
+
+dd {
+  margin-left: 0;
+  margin-bottom: 0.5rem;
+}
+
+// ----------------------------------------
+// Horizontal Rule
+// ----------------------------------------
+hr {
+  margin: 2rem 0;
+  border: 0;
+  border-top: 1px solid var(--border);
+}
+
+// ----------------------------------------
+// Selection
+// ----------------------------------------
+::selection {
+  background-color: var(--primary);
+  color: var(--white);
+}
+
+// ----------------------------------------
+// Abbreviations
+// ----------------------------------------
+abbr[title] {
+  text-decoration: underline dotted;
+  cursor: help;
+  border-bottom: none;
+}
+
+// ----------------------------------------
+// Address
+// ----------------------------------------
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}

package/scss/components/_accordion.scss

@@ -0,0 +1,200 @@
+// ========================================
+// ZenKit - Accordion
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Accordion Container
+// ----------------------------------------
+.accordion {
+  --accordion-color: var(--text);
+  --accordion-bg: transparent;
+  --accordion-border-color: var(--border);
+  --accordion-border-width: #{$border-width};
+  --accordion-border-radius: var(--radius);
+  --accordion-inner-border-radius: calc(var(--radius) - #{$border-width});
+  --accordion-btn-padding-x: 1.25rem;
+  --accordion-btn-padding-y: 1rem;
+  --accordion-btn-color: var(--text);
+  --accordion-btn-bg: var(--bg-card);
+  --accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --accordion-btn-icon-width: 1.25rem;
+  --accordion-btn-icon-transform: rotate(-180deg);
+  --accordion-btn-icon-transition: transform 0.2s ease-in-out;
+  --accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234F46E5'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --accordion-btn-focus-box-shadow: 0 0 0 0.25rem #{rgba($primary, 0.25)};
+  --accordion-body-padding-x: 1.25rem;
+  --accordion-body-padding-y: 1rem;
+  --accordion-active-color: var(--primary);
+  --accordion-active-bg: #{rgba($primary, 0.05)};
+}
+
+// ----------------------------------------
+// Accordion Item
+// ----------------------------------------
+.accordion-item {
+  color: var(--accordion-color);
+  background-color: var(--accordion-bg);
+  border: var(--accordion-border-width) solid var(--accordion-border-color);
+
+  &:first-of-type {
+    border-top-left-radius: var(--accordion-border-radius);
+    border-top-right-radius: var(--accordion-border-radius);
+
+    > .accordion-header .accordion-button {
+      border-top-left-radius: var(--accordion-inner-border-radius);
+      border-top-right-radius: var(--accordion-inner-border-radius);
+    }
+  }
+
+  &:not(:first-of-type) {
+    border-top: 0;
+  }
+
+  &:last-of-type {
+    border-bottom-right-radius: var(--accordion-border-radius);
+    border-bottom-left-radius: var(--accordion-border-radius);
+
+    > .accordion-header .accordion-button.collapsed {
+      border-bottom-right-radius: var(--accordion-inner-border-radius);
+      border-bottom-left-radius: var(--accordion-inner-border-radius);
+    }
+
+    > .accordion-collapse {
+      border-bottom-right-radius: var(--accordion-border-radius);
+      border-bottom-left-radius: var(--accordion-border-radius);
+    }
+  }
+}
+
+// ----------------------------------------
+// Accordion Header
+// ----------------------------------------
+.accordion-header {
+  margin-bottom: 0;
+}
+
+// ----------------------------------------
+// Accordion Button
+// ----------------------------------------
+.accordion-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--accordion-btn-padding-y) var(--accordion-btn-padding-x);
+  font-size: var(--text-base);
+  color: var(--accordion-btn-color);
+  text-align: left;
+  background-color: var(--accordion-btn-bg);
+  border: 0;
+  border-radius: 0;
+  overflow-anchor: none;
+  transition: color $transition-fast ease-in-out,
+              background-color $transition-fast ease-in-out,
+              border-color $transition-fast ease-in-out,
+              box-shadow $transition-fast ease-in-out;
+
+  &:not(.collapsed) {
+    color: var(--accordion-active-color);
+    background-color: var(--accordion-active-bg);
+    box-shadow: inset 0 calc(-1 * var(--accordion-border-width)) 0 var(--accordion-border-color);
+
+    &::after {
+      background-image: var(--accordion-btn-active-icon);
+      transform: var(--accordion-btn-icon-transform);
+    }
+  }
+
+  &::after {
+    flex-shrink: 0;
+    width: var(--accordion-btn-icon-width);
+    height: var(--accordion-btn-icon-width);
+    margin-left: auto;
+    content: "";
+    background-image: var(--accordion-btn-icon);
+    background-repeat: no-repeat;
+    background-size: var(--accordion-btn-icon-width);
+    transition: var(--accordion-btn-icon-transition);
+  }
+
+  &:hover {
+    z-index: 2;
+  }
+
+  &:focus {
+    z-index: 3;
+    outline: 0;
+    box-shadow: var(--accordion-btn-focus-box-shadow);
+  }
+}
+
+// ----------------------------------------
+// Accordion Body
+// ----------------------------------------
+.accordion-body {
+  padding: var(--accordion-body-padding-y) var(--accordion-body-padding-x);
+}
+
+// ----------------------------------------
+// Accordion Collapse
+// ----------------------------------------
+.accordion-collapse {
+  border-top: 0;
+}
+
+// ----------------------------------------
+// Flush Accordion (No outer borders/rounded corners)
+// ----------------------------------------
+.accordion-flush {
+  > .accordion-item {
+    border-right: 0;
+    border-left: 0;
+    border-radius: 0;
+
+    &:first-child {
+      border-top: 0;
+    }
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    > .accordion-header .accordion-button {
+      border-radius: 0;
+
+      &.collapsed {
+        border-radius: 0;
+      }
+    }
+
+    > .accordion-collapse {
+      border-radius: 0;
+    }
+  }
+}
+
+// ----------------------------------------
+// Collapse Utility (for JS)
+// ----------------------------------------
+.collapse:not(.show) {
+  display: none;
+}
+
+.collapsing {
+  height: 0;
+  overflow: hidden;
+  transition: height $transition-base ease;
+}
+
+.collapse.show {
+  display: block;
+}
+
+// Horizontal collapsing
+.collapsing.collapse-horizontal {
+  width: 0;
+  height: auto;
+  transition: width $transition-base ease;
+}