@celestia-island/hikari 0.4.4 → 0.4.5

package/src/components/HkBreadcrumb.scss

@@ -0,0 +1,624 @@
+// Use theme variables with namespace to avoid conflicts
+@use "./hikari-vars" as vars;
+
+// ------
+// Hikari Breadcrumb Component
+// Features: Glowing separators, smooth transitions, hover effects
+// ------
+
+// ------
+// Base Breadcrumb Styles
+// ------
+
+.hk-breadcrumb {
+  // Layout
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  // Reset
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  // Typography
+  font-family: vars.$hikari-font-family-sans;
+  font-size: vars.$hikari-font-size-sm;
+  line-height: 1.5;
+
+  // Gap
+  gap: 0.5rem;
+}
+
+// ------
+// Breadcrumb Item
+// ------
+
+.hk-breadcrumb-item {
+  // Layout
+  display: flex;
+  align-items: center;
+
+  // Spacing
+  margin: 0;
+
+  // Position
+  position: relative;
+
+  // Not the last item
+  &:not(:last-child) {
+    // Separator
+    .hk-breadcrumb-separator {
+      margin-left: 0.5rem;
+      color: var(--hi-color-text-secondary);
+      opacity: 0.5;
+      // DISABLED - migrated to JS animation
+
+      // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
+
+      // Glow effect on separator
+      filter: drop-shadow(0 0 4px var(--hi-primary));
+
+      svg {
+        width: 1rem;
+        height: 1rem;
+      }
+    }
+  }
+
+  // Last item (current page)
+  &:last-child {
+    .hk-breadcrumb-link {
+      color: var(--hi-color-text-primary);
+      font-weight: 500;
+      cursor: default;
+      pointer-events: none;
+
+      // Subtle glow on current item
+      text-shadow: 0 0 8px var(--hi-primary);
+    }
+  }
+}
+
+// ------
+// Breadcrumb Link
+// ------
+
+.hk-breadcrumb-link {
+  // Typography
+  color: var(--hi-color-text-secondary);
+  text-decoration: none;
+  white-space: nowrap;
+
+  // Cursor
+  cursor: pointer;
+
+  // Transitions
+  // DISABLED - migrated to JS animation
+
+  // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
+
+  // Padding
+  padding: 0.25rem 0.5rem;
+  margin: -0.25rem -0.5rem;
+  border-radius: vars.$hikari-radius-fui-sm;
+
+  // Display
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+
+  // Icon
+  .hk-breadcrumb-icon {
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    // DISABLED - migrated to JS animation
+
+    // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  // Hover state
+  &:hover {
+    color: var(--hi-color-text-primary);
+    background: var(--hi-primary);
+
+    .hk-breadcrumb-icon {
+      color: var(--hi-color-primary);
+      filter: drop-shadow(0 0 4px var(--hi-primary));
+    }
+
+    // Glow effect on text
+    text-shadow: 0 0 8px var(--hi-primary);
+  }
+
+  // Active/focus state
+  &:focus-visible {
+    outline: none;
+    background: var(--hi-primary);
+    box-shadow:
+      0 0 0 2px var(--hi-primary),
+      0 0 12px var(--hi-primary);
+  }
+
+  // Active state (for non-last items)
+  &.hk-breadcrumb-link-active {
+    color: var(--hi-color-text-primary);
+    font-weight: 500;
+  }
+}
+
+// ------
+// Breadcrumb Separator
+// ------
+
+.hk-breadcrumb-separator {
+  // Layout
+  display: inline-flex;
+  align-items: center;
+
+  // Typography
+  font-size: 0.875rem;
+
+  // Transitions
+  // DISABLED - migrated to JS animation
+
+  // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
+
+  // Custom separator glow
+  &.hk-breadcrumb-separator-glow {
+    color: var(--hi-color-primary);
+    opacity: 0.8;
+    filter: drop-shadow(0 0 6px var(--hi-primary));
+  }
+}
+
+// ------
+// Separator Variants
+// ------
+
+// Slash separator
+.hk-breadcrumb-separator-slash {
+  &::before {
+    content: '/';
+  }
+}
+
+// Arrow separator
+.hk-breadcrumb-separator-arrow {
+  &::before {
+    content: '›';
+    font-size: 1.1em;
+  }
+}
+
+// Double arrow separator
+.hk-breadcrumb-separator-double-arrow {
+  &::before {
+    content: '»';
+    font-size: 0.9em;
+  }
+}
+
+// Chevron separator (default with icon)
+.hk-breadcrumb-separator-chevron {
+  // Uses chevron-right icon
+}
+
+// Dot separator
+.hk-breadcrumb-separator-dot {
+  &::before {
+    content: '•';
+    font-size: 1.2em;
+  }
+}
+
+// ------
+// Breadcrumb Dropdown (for nested paths)
+// ------
+
+.hk-breadcrumb-dropdown {
+  // Layout
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  // Trigger
+  .hk-breadcrumb-dropdown-trigger {
+    // Layout
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+
+    // Arrow icon
+    .hk-breadcrumb-dropdown-arrow {
+      width: 0.75rem;
+      height: 0.75rem;
+      // DISABLED - migrated to JS animation
+
+      // transition: transform vars.$hikari-duration-fast vars.$hikari-ease-smooth;
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    // Open state
+    &.hk-breadcrumb-dropdown-open {
+      .hk-breadcrumb-dropdown-arrow {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  // Dropdown menu
+  .hk-breadcrumb-dropdown-menu {
+    // Layout
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    min-width: 200px;
+    z-index: 100;
+
+    // Appearance
+    border-radius: vars.$hikari-radius-fui-md;
+    border: 1px solid var(--hi-color-border);
+    background: var(--hi-surface);
+    backdrop-filter: blur(4px);
+    box-shadow:
+      0 8px 16px var(--hi-black-30, rgba(0, 0, 0, 0.3)),
+      0 0 0 1px var(--hi-white-5, rgba(255, 255, 255, 0.05)) inset;
+
+    // Padding
+    padding: 0.5rem;
+
+    // Transitions
+    // DISABLED - migrated to JS animation
+
+    // transition: all vars.$hikari-duration-normal vars.$hikari-ease-smooth;
+
+    // Animation
+    opacity: 0;
+    transform: translateY(-8px);
+    pointer-events: none;
+
+    // Open state
+    &.hk-breadcrumb-dropdown-menu-open {
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+    }
+
+    // Menu items
+    .hk-breadcrumb-dropdown-item {
+      // Layout
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+
+      // Spacing
+      padding: 0.5rem 0.75rem;
+      margin: 0.125rem 0;
+
+      // Typography
+      font-size: vars.$hikari-font-size-sm;
+      color: var(--hi-color-text-primary);
+      text-decoration: none;
+      white-space: nowrap;
+
+      // Appearance
+      border-radius: vars.$hikari-radius-fui-sm;
+
+      // Cursor
+      cursor: pointer;
+
+      // Transitions
+      // DISABLED - migrated to JS animation
+
+      // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
+
+      // Hover state
+      &:hover {
+        background: var(--hi-primary);
+        color: var(--hi-color-text-primary);
+        box-shadow:
+          0 0 12px var(--hi-primary),
+          inset 0 0 8px var(--hi-primary);
+      }
+    }
+  }
+}
+
+// ------
+// Icon Styles
+// ------
+
+.hk-breadcrumb-icon {
+  // Layout
+  display: inline-flex;
+  align-items: center;
+
+  // Size
+  width: 1rem;
+  height: 1rem;
+
+  // Color
+  color: var(--hi-color-text-secondary);
+
+  // Transitions
+  // DISABLED - migrated to JS animation
+
+  // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// ------
+// Size Variants
+// ------
+
+.hk-breadcrumb-sm {
+  font-size: 0.75rem;
+  gap: 0.375rem;
+
+  .hk-breadcrumb-link {
+    padding: 0.125rem 0.375rem;
+    margin: -0.125rem -0.375rem;
+
+    .hk-breadcrumb-icon {
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+  }
+
+  .hk-breadcrumb-separator {
+    margin-left: 0.375rem;
+    font-size: 0.75rem;
+
+    svg {
+      width: 0.875rem;
+      height: 0.875rem;
+    }
+  }
+}
+
+.hk-breadcrumb-md {
+  font-size: vars.$hikari-font-size-sm;
+  gap: 0.5rem;
+}
+
+.hk-breadcrumb-lg {
+  font-size: 1rem;
+  gap: 0.625rem;
+
+  .hk-breadcrumb-link {
+    padding: 0.375rem 0.625rem;
+    margin: -0.375rem -0.625rem;
+
+    .hk-breadcrumb-icon {
+      width: 1.125rem;
+      height: 1.125rem;
+    }
+  }
+
+  .hk-breadcrumb-separator {
+    margin-left: 0.625rem;
+    font-size: 1rem;
+
+    svg {
+      width: 1.125rem;
+      height: 1.125rem;
+    }
+  }
+}
+
+// ------
+// Theme Variants
+// ------
+
+// With background
+.hk-breadcrumb-background {
+  gap: 0;
+
+  .hk-breadcrumb-item {
+    background: var(--hi-card-bg);
+    padding: 0.375rem 0.75rem;
+    border-radius: vars.$hikari-radius-fui-sm;
+    // DISABLED - migrated to JS animation
+
+    // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
+
+    &:not(:last-child):hover {
+      background: var(--hi-primary);
+    }
+
+    &:last-child {
+      background: var(--hi-primary);
+      box-shadow:
+        0 0 12px var(--hi-primary),
+        inset 0 0 8px var(--hi-primary);
+    }
+  }
+}
+
+// Pill style
+.hk-breadcrumb-pill {
+  .hk-breadcrumb-item {
+    background: var(--hi-card-bg);
+    padding: 0.375rem 0.875rem;
+    border-radius: 999px;
+    border: 1px solid var(--hi-color-border);
+    // DISABLED - migrated to JS animation
+
+    // transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
+
+    &:not(:last-child) {
+      &:hover {
+        background: var(--hi-primary);
+        border-color: var(--hi-primary);
+      }
+    }
+
+    &:last-child {
+      background: linear-gradient(135deg, var(--hi-primary), var(--hi-primary));
+      border-color: var(--hi-primary);
+      box-shadow:
+        0 0 12px var(--hi-primary),
+        inset 0 0 8px var(--hi-primary);
+    }
+  }
+}
+
+// ------
+// Separator Animations
+// ------
+
+// Animated separator (pulsing glow)
+.hk-breadcrumb-separator-animated {
+  // DISABLED - migrated to JS animation
+
+  // animation: breadcrumb-separator-pulse 2s ease-in-out infinite;
+}
+
+// DISABLED - migrated to JS animation
+// @keyframes breadcrumb-separator-pulse {
+//   0%, 100% {
+//     opacity: 0.5;
+//     filter: drop-shadow(0 0 4px var(--hi-primary));
+//   }
+//   50% {
+//     opacity: 1;
+//     filter: drop-shadow(0 0 8px var(--hi-primary));
+//   }
+// }
+
+// ------
+// Collapsible Breadcrumb (for mobile)
+// ------
+
+.hk-breadcrumb-collapsible {
+  // Hide middle items on small screens
+  .hk-breadcrumb-item {
+    &:nth-child(n+2):nth-last-child(n+3) {
+      @media (max-width: 768px) {
+        display: none;
+      }
+    }
+
+    // Show ellipsis
+    &.hk-breadcrumb-ellipsis {
+      @media (max-width: 768px) {
+        display: flex;
+      }
+    }
+  }
+}
+
+// ------
+// Animations
+// ------
+
+// Fade-in animation
+.hk-breadcrumb-animate-in {
+  .hk-breadcrumb-item {
+    opacity: 0;
+    // DISABLED - migrated to JS animation
+
+    // animation: breadcrumb-fade-in vars.$hikari-duration-normal vars.$hikari-ease-smooth forwards;
+
+    @for $i from 1 through 10 {
+      &:nth-child(#{$i}) {
+        animation-delay: #{$i * 0.1s};
+      }
+    }
+  }
+}
+
+// DISABLED - migrated to JS animation
+// @keyframes breadcrumb-fade-in {
+//   from {
+//     opacity: 0;
+//     transform: translateY(-4px);
+//   }
+//   to {
+//     opacity: 1;
+//     transform: translateY(0);
+//   }
+// }
+
+// Slide-in animation
+.hk-breadcrumb-slide-in {
+  .hk-breadcrumb-item {
+    opacity: 0;
+    // DISABLED - migrated to JS animation
+
+    // animation: breadcrumb-slide-in vars.$hikari-duration-normal vars.$hikari-ease-smooth forwards;
+
+    @for $i from 1 through 10 {
+      &:nth-child(#{$i}) {
+        animation-delay: #{$i * 0.08s};
+      }
+    }
+  }
+}
+
+// DISABLED - migrated to JS animation
+// @keyframes breadcrumb-slide-in {
+//   from {
+//     opacity: 0;
+//     transform: translateX(-8px);
+//   }
+//   to {
+//     opacity: 1;
+//     transform: translateX(0);
+//   }
+// }
+
+// ------
+// Custom Colors
+// ------
+
+.hk-breadcrumb-primary {
+  .hk-breadcrumb-link {
+    &:hover {
+      color: var(--hi-color-primary);
+      text-shadow: 0 0 8px var(--hi-color-primary);
+    }
+  }
+}
+
+.hk-breadcrumb-success {
+  .hk-breadcrumb-link {
+    &:hover {
+      color: var(--hi-color-success);
+      text-shadow: 0 0 8px var(--hi-color-success);
+    }
+  }
+}
+
+.hk-breadcrumb-warning {
+  .hk-breadcrumb-link {
+    &:hover {
+      color: var(--hi-color-warning);
+      text-shadow: 0 0 8px var(--hi-color-warning);
+    }
+  }
+}
+
+.hk-breadcrumb-danger {
+  .hk-breadcrumb-link {
+    &:hover {
+      color: var(--hi-color-danger);
+      text-shadow: 0 0 8px var(--hi-color-danger);
+    }
+  }
+}

package/src/components/HkBreadcrumb.tsx

@@ -1,6 +1,6 @@
 import { computed, defineComponent, type PropType } from "vue";
 import { useI18n } from "../i18n/context";
-import "../../../components/src/styles/components/breadcrumb.scss";
+import "./HkBreadcrumb.scss";
 
 export default defineComponent({
   name: "HkBreadcrumb",

package/src/components/HkCard.scss

@@ -6,7 +6,7 @@
 .hk-card {
   display: block;
   overflow: hidden;
-  background: rgb(var(--color-surface) / var(--opacity-half));
+  background: color-mix(in srgb, rgb(var(--color-surface)) 70%, transparent);
   backdrop-filter: blur(var(--blur-md));
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-md);

package/src/components/HkCheckbox.tsx

@@ -1,5 +1,6 @@
-import { defineComponent, ref, type PropType } from "vue";
 import { Check } from "lucide-vue-next";
+import { defineComponent, ref, type PropType } from "vue";
+
 import "./HkCheckbox.scss";
 
 export default defineComponent({

package/src/components/HkCollapse.scss

@@ -0,0 +1,50 @@
+// Collapse component styles
+// Animated collapse/expand for tree nodes
+
+.hk-collapse {
+  display: flex;
+  flex-direction: column;
+}
+
+.hk-collapse-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.2s ease;
+
+  &:hover {
+    background: var(--hi-color-background-light, #f9fafb);
+  }
+
+  &:active {
+    background: var(--hi-color-primary-light, rgba(0, 160, 233, 0.1));
+  }
+}
+
+.hk-collapse-arrow {
+  display: inline-block;
+  transition: transform 0.2s ease;
+  color: var(--hi-color-text-secondary, #666666);
+  font-size: 16px;
+}
+
+.hk-collapse-header-content {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.hk-collapse-content {
+  overflow: hidden;
+  transition: max-height 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  opacity: 0;
+  max-height: 0;
+}
+
+.hk-collapse-content.hk-collapse-expanded {
+  opacity: 1;
+  max-height: none;
+}

package/src/components/HkCollapse.tsx

@@ -1,5 +1,5 @@
 import { computed, defineComponent, ref, watch, type PropType } from "vue";
-import "../../../components/src/styles/components/collapse.scss";
+import "./HkCollapse.scss";
 
 export default defineComponent({
   name: "HkCollapse",

package/src/components/HkColorSchemeDialog.scss

@@ -0,0 +1,16 @@
+.s-scheme-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-16, 1rem);
+}
+
+.s-scheme-mode-switch {
+  align-self: center;
+}
+
+.s-scheme-colors {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--space-10, 0.625rem);
+}