zenkit-css 1.0.0

package/scss/components/_badges.scss

@@ -0,0 +1,266 @@
+// ========================================
+// ZenKit - Badges
+// ========================================
+
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+// ----------------------------------------
+// Base Badge
+// ----------------------------------------
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25em 0.5em;
+  font-size: 0.75em;
+  font-weight: $font-weight-medium;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: var(--radius);
+}
+
+// ----------------------------------------
+// Badge Variants
+// ----------------------------------------
+.badge-primary {
+  color: var(--white);
+  background-color: var(--primary);
+}
+
+.badge-secondary {
+  color: var(--white);
+  background-color: var(--gray-500);
+}
+
+.badge-success {
+  color: var(--white);
+  background-color: var(--success);
+}
+
+.badge-danger {
+  color: var(--white);
+  background-color: var(--danger);
+}
+
+.badge-warning {
+  color: var(--gray-900);
+  background-color: var(--warning);
+}
+
+.badge-info {
+  color: var(--white);
+  background-color: var(--info);
+}
+
+.badge-dark {
+  color: var(--white);
+  background-color: var(--gray-800);
+}
+
+.badge-light {
+  color: var(--gray-800);
+  background-color: var(--gray-100);
+}
+
+// ----------------------------------------
+// Soft/Light Badge Variants
+// ----------------------------------------
+.badge-soft-primary {
+  color: var(--primary-700);
+  background-color: var(--primary-100);
+}
+
+.badge-soft-success {
+  color: $success-dark;
+  background-color: var(--success-light);
+}
+
+.badge-soft-danger {
+  color: $danger-dark;
+  background-color: var(--danger-light);
+}
+
+.badge-soft-warning {
+  color: $warning-dark;
+  background-color: var(--warning-light);
+}
+
+.badge-soft-info {
+  color: $info-dark;
+  background-color: var(--info-light);
+}
+
+// ----------------------------------------
+// Outline Badges
+// ----------------------------------------
+.badge-outline-primary {
+  color: var(--primary);
+  background-color: transparent;
+  border: $border-width solid var(--primary);
+}
+
+.badge-outline-secondary {
+  color: var(--gray-600);
+  background-color: transparent;
+  border: $border-width solid var(--gray-400);
+}
+
+.badge-outline-success {
+  color: var(--success);
+  background-color: transparent;
+  border: $border-width solid var(--success);
+}
+
+.badge-outline-danger {
+  color: var(--danger);
+  background-color: transparent;
+  border: $border-width solid var(--danger);
+}
+
+.badge-outline-warning {
+  color: var(--warning);
+  background-color: transparent;
+  border: $border-width solid var(--warning);
+}
+
+.badge-outline-info {
+  color: var(--info);
+  background-color: transparent;
+  border: $border-width solid var(--info);
+}
+
+// ----------------------------------------
+// Badge Sizes
+// ----------------------------------------
+.badge-sm {
+  padding: 0.15em 0.375em;
+  font-size: 0.65em;
+}
+
+.badge-lg {
+  padding: 0.35em 0.65em;
+  font-size: 0.85em;
+}
+
+// ----------------------------------------
+// Pill Badge
+// ----------------------------------------
+.badge-pill {
+  border-radius: var(--radius-full);
+  padding-left: 0.65em;
+  padding-right: 0.65em;
+}
+
+// ----------------------------------------
+// Badge with Icon
+// ----------------------------------------
+.badge-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25em;
+
+  svg {
+    width: 0.875em;
+    height: 0.875em;
+  }
+}
+
+// ----------------------------------------
+// Badge with Dot
+// ----------------------------------------
+.badge-dot {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375em;
+  padding: 0;
+  background-color: transparent;
+  font-weight: $font-weight-normal;
+  font-size: inherit;
+  color: var(--text);
+
+  &::before {
+    content: "";
+    display: inline-block;
+    width: 0.5em;
+    height: 0.5em;
+    border-radius: 50%;
+    background-color: var(--gray-400);
+  }
+
+  &.badge-dot-primary::before { background-color: var(--primary); }
+  &.badge-dot-success::before { background-color: var(--success); }
+  &.badge-dot-danger::before { background-color: var(--danger); }
+  &.badge-dot-warning::before { background-color: var(--warning); }
+  &.badge-dot-info::before { background-color: var(--info); }
+}
+
+// ----------------------------------------
+// Notification Badge (Position)
+// ----------------------------------------
+.badge-notification {
+  position: absolute;
+  top: -0.25rem;
+  right: -0.25rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.625rem;
+  border-radius: var(--radius-full);
+}
+
+// Empty notification dot
+.badge-notification-dot {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 0.625rem;
+  height: 0.625rem;
+  padding: 0;
+  border-radius: 50%;
+  border: 2px solid var(--bg);
+}
+
+// ----------------------------------------
+// Tag (Removable Badge)
+// ----------------------------------------
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25em;
+  padding: 0.25em 0.5em;
+  font-size: var(--text-sm);
+  font-weight: $font-weight-normal;
+  color: var(--text);
+  background-color: var(--bg-muted);
+  border-radius: var(--radius);
+}
+
+.tag-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  margin-left: 0.125em;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: color var(--transition-fast) ease-in-out,
+              background-color var(--transition-fast) ease-in-out;
+
+  &:hover {
+    color: var(--danger);
+    background-color: var(--danger-light);
+  }
+
+  svg {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+}

package/scss/components/_breadcrumb.scss

@@ -0,0 +1,102 @@
+// ========================================
+// ZenKit - Breadcrumb
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Breadcrumb Container
+// ----------------------------------------
+.breadcrumb {
+  --breadcrumb-padding-x: 0;
+  --breadcrumb-padding-y: 0;
+  --breadcrumb-margin-bottom: 1rem;
+  --breadcrumb-divider-color: var(--text-muted);
+  --breadcrumb-item-padding-x: 0.5rem;
+  --breadcrumb-item-active-color: var(--text-muted);
+
+  display: flex;
+  flex-wrap: wrap;
+  padding: var(--breadcrumb-padding-y) var(--breadcrumb-padding-x);
+  margin-bottom: var(--breadcrumb-margin-bottom);
+  font-size: var(--text-sm);
+  list-style: none;
+  background-color: transparent;
+  border-radius: var(--radius);
+}
+
+// ----------------------------------------
+// Breadcrumb Item
+// ----------------------------------------
+.breadcrumb-item {
+  + .breadcrumb-item {
+    padding-left: var(--breadcrumb-item-padding-x);
+
+    &::before {
+      float: left;
+      padding-right: var(--breadcrumb-item-padding-x);
+      color: var(--breadcrumb-divider-color);
+      content: var(--breadcrumb-divider, "/");
+    }
+  }
+
+  &.active {
+    color: var(--breadcrumb-item-active-color);
+  }
+
+  a {
+    color: var(--link);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--link-hover);
+      text-decoration: underline;
+    }
+  }
+}
+
+// ----------------------------------------
+// Breadcrumb Divider Variants
+// ----------------------------------------
+
+// Arrow divider
+.breadcrumb-arrow {
+  --breadcrumb-divider: "›";
+}
+
+// Chevron divider
+.breadcrumb-chevron {
+  --breadcrumb-divider: "»";
+}
+
+// Pipe divider
+.breadcrumb-pipe {
+  --breadcrumb-divider: "|";
+}
+
+// Dot divider
+.breadcrumb-dot {
+  --breadcrumb-divider: "•";
+}
+
+// ----------------------------------------
+// Breadcrumb with Background
+// ----------------------------------------
+.breadcrumb-bg {
+  --breadcrumb-padding-x: 1rem;
+  --breadcrumb-padding-y: 0.75rem;
+  background-color: var(--bg-muted);
+}
+
+// ----------------------------------------
+// Breadcrumb Sizes
+// ----------------------------------------
+.breadcrumb-sm {
+  font-size: var(--text-xs);
+  --breadcrumb-item-padding-x: 0.375rem;
+}
+
+.breadcrumb-lg {
+  font-size: var(--text-base);
+  --breadcrumb-item-padding-x: 0.625rem;
+}

package/scss/components/_buttons.scss

@@ -0,0 +1,340 @@
+// ========================================
+// ZenKit - Buttons
+// ========================================
+
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+// ----------------------------------------
+// Base Button
+// ----------------------------------------
+.btn {
+  @include button-base;
+}
+
+// ----------------------------------------
+// Solid Buttons
+// ----------------------------------------
+.btn-primary {
+  @include button-base;
+  @include button-solid($primary);
+}
+
+.btn-secondary {
+  @include button-base;
+  @include button-solid($gray-600);
+}
+
+.btn-success {
+  @include button-base;
+  @include button-solid($success);
+}
+
+.btn-danger {
+  @include button-base;
+  @include button-solid($danger);
+}
+
+.btn-warning {
+  @include button-base;
+  @include button-solid($warning, $gray-900);
+}
+
+.btn-info {
+  @include button-base;
+  @include button-solid($info);
+}
+
+.btn-dark {
+  @include button-base;
+  @include button-solid($gray-900);
+}
+
+.btn-light {
+  @include button-base;
+  @include button-solid($gray-100, $gray-900);
+}
+
+// ----------------------------------------
+// Outline Buttons
+// ----------------------------------------
+.btn-outline-primary {
+  @include button-base;
+  @include button-outline($primary);
+}
+
+.btn-outline-secondary {
+  @include button-base;
+  @include button-outline($gray-600);
+}
+
+.btn-outline-success {
+  @include button-base;
+  @include button-outline($success);
+}
+
+.btn-outline-danger {
+  @include button-base;
+  @include button-outline($danger);
+}
+
+.btn-outline-warning {
+  @include button-base;
+  @include button-outline($warning);
+}
+
+.btn-outline-info {
+  @include button-base;
+  @include button-outline($info);
+}
+
+.btn-outline-dark {
+  @include button-base;
+  @include button-outline($gray-900);
+}
+
+.btn-outline-light {
+  @include button-base;
+  @include button-outline($gray-300);
+}
+
+// ----------------------------------------
+// Ghost Buttons
+// ----------------------------------------
+.btn-ghost {
+  @include button-base;
+  @include button-ghost($primary);
+}
+
+.btn-ghost-secondary {
+  @include button-base;
+  @include button-ghost($gray-600);
+}
+
+.btn-ghost-danger {
+  @include button-base;
+  @include button-ghost($danger);
+}
+
+// ----------------------------------------
+// Link Button
+// ----------------------------------------
+.btn-link {
+  @include button-base;
+  background-color: transparent;
+  color: var(--link);
+  border-color: transparent;
+  text-decoration: underline;
+
+  &:hover:not(:disabled) {
+    color: var(--link-hover);
+    text-decoration: none;
+  }
+}
+
+// ----------------------------------------
+// Button Sizes
+// ----------------------------------------
+.btn-xs {
+  padding: 0.25rem 0.5rem;
+  font-size: var(--text-xs);
+  border-radius: var(--radius-sm);
+}
+
+.btn-sm {
+  padding: 0.375rem 0.875rem;
+  font-size: var(--text-sm);
+}
+
+.btn-lg {
+  padding: 0.875rem 1.75rem;
+  font-size: var(--text-lg);
+}
+
+.btn-xl {
+  padding: 1rem 2rem;
+  font-size: var(--text-xl);
+  border-radius: var(--radius-lg);
+}
+
+// ----------------------------------------
+// Full Width Button
+// ----------------------------------------
+.btn-block {
+  display: flex;
+  width: 100%;
+}
+
+// ----------------------------------------
+// Icon Button
+// ----------------------------------------
+.btn-icon {
+  @include button-base;
+  padding: 0.625rem;
+  aspect-ratio: 1;
+
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+}
+
+.btn-icon-sm {
+  padding: 0.375rem;
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
+.btn-icon-lg {
+  padding: 0.875rem;
+
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+}
+
+// ----------------------------------------
+// Rounded Buttons
+// ----------------------------------------
+.btn-rounded {
+  border-radius: var(--radius-full);
+}
+
+// ----------------------------------------
+// Button with Icon
+// ----------------------------------------
+.btn-with-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+  }
+}
+
+// ----------------------------------------
+// Button Group
+// ----------------------------------------
+.btn-group {
+  display: inline-flex;
+
+  > .btn {
+    border-radius: 0;
+
+    &:first-child {
+      border-top-left-radius: var(--radius);
+      border-bottom-left-radius: var(--radius);
+    }
+
+    &:last-child {
+      border-top-right-radius: var(--radius);
+      border-bottom-right-radius: var(--radius);
+    }
+
+    &:not(:last-child) {
+      border-right: 1px solid rgba(255, 255, 255, 0.2);
+    }
+  }
+}
+
+.btn-group-vertical {
+  display: inline-flex;
+  flex-direction: column;
+
+  > .btn {
+    border-radius: 0;
+
+    &:first-child {
+      border-top-left-radius: var(--radius);
+      border-top-right-radius: var(--radius);
+    }
+
+    &:last-child {
+      border-bottom-left-radius: var(--radius);
+      border-bottom-right-radius: var(--radius);
+    }
+
+    &:not(:last-child) {
+      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    }
+  }
+}
+
+// ----------------------------------------
+// Loading State
+// ----------------------------------------
+.btn-loading {
+  position: relative;
+  color: transparent !important;
+  pointer-events: none;
+
+  &::after {
+    content: "";
+    position: absolute;
+    width: 1rem;
+    height: 1rem;
+    top: 50%;
+    left: 50%;
+    margin-left: -0.5rem;
+    margin-top: -0.5rem;
+    border: 2px solid currentColor;
+    border-radius: 50%;
+    border-right-color: transparent;
+    animation: btn-spin 0.75s linear infinite;
+  }
+}
+
+@keyframes btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// ----------------------------------------
+// Button Toolbar
+// ----------------------------------------
+.btn-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 0.5rem;
+
+  .input-group {
+    width: auto;
+  }
+}
+
+// ----------------------------------------
+// Split Button
+// ----------------------------------------
+.btn-group > .btn-group:not(:first-child),
+.btn-group > .btn:not(:first-child) {
+  margin-left: calc(-1 * #{$border-width});
+}
+
+// Dropdown toggle split
+.dropdown-toggle-split {
+  padding-right: 0.5625rem;
+  padding-left: 0.5625rem;
+
+  &::after {
+    margin-left: 0;
+  }
+}
+
+.btn-sm + .dropdown-toggle-split {
+  padding-right: 0.375rem;
+  padding-left: 0.375rem;
+}
+
+.btn-lg + .dropdown-toggle-split {
+  padding-right: 0.75rem;
+  padding-left: 0.75rem;
+}