@justin_evo/evo-ui 1.1.0 → 1.2.1

package/src/css/commandpalette.module.scss

@@ -1,211 +1,211 @@
-@use 'base/variables' as *;
-@use 'base/color' as *;
-
-.overlay {
-  position: fixed;
-  inset: 0;
-  background: $color-backdrop;
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-  z-index: 9999;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding-top: 14vh;
-  animation: overlayIn $transition-fast forwards;
-}
-
-@keyframes overlayIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.palette {
-  background: $color-surface-elevated;
-  border: 1px solid $color-border;
-  border-radius: $radius-lg;
-  width: min(580px, calc(100vw - 2rem));
-  max-height: 68vh;
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 32px 64px rgb(0 0 0 / 0.30);
-  overflow: hidden;
-  animation: paletteIn $transition-fast forwards;
-}
-
-@keyframes paletteIn {
-  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
-  to   { opacity: 1; transform: translateY(0)    scale(1); }
-}
-
-// --- Search row ---
-
-.searchRow {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  padding: 0.875rem 1rem;
-  border-bottom: 1px solid $color-border;
-}
-
-.searchIconWrap {
-  display: flex;
-  align-items: center;
-  color: $color-text-muted;
-  flex-shrink: 0;
-}
-
-.searchInput {
-  flex: 1;
-  background: none;
-  border: none;
-  outline: none;
-  font-family: $font-sans;
-  font-size: $text-base;
-  color: $color-text-primary;
-  caret-color: $evo-primary-color;
-
-  &::placeholder {
-    color: $color-text-muted;
-  }
-}
-
-.escBadge {
-  font-size: $text-xs;
-  padding: 0.125rem 0.4rem;
-  background: $color-surface-sunken;
-  border: 1px solid $color-border;
-  border-radius: $radius-sm;
-  color: $color-text-muted;
-  font-family: $font-sans;
-  flex-shrink: 0;
-}
-
-// --- Results area ---
-
-.results {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0.375rem 0.5rem;
-
-  &::-webkit-scrollbar {
-    width: 4px;
-  }
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: $color-border;
-    border-radius: 4px;
-  }
-}
-
-.empty {
-  padding: 2.5rem 1rem;
-  text-align: center;
-  font-size: $text-sm;
-  color: $color-text-muted;
-}
-
-.group {
-  margin-bottom: 0.25rem;
-}
-
-.groupLabel {
-  font-size: $text-xs;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: $color-text-muted;
-  padding: 0.375rem 0.625rem 0.25rem;
-}
-
-.resultItem {
-  display: flex;
-  align-items: center;
-  gap: 0.625rem;
-  width: 100%;
-  padding: 0.5625rem 0.75rem;
-  border: none;
-  border-radius: $radius-sm;
-  background: transparent;
-  cursor: pointer;
-  font-family: $font-sans;
-  transition: background-color $transition-fast;
-
-  &.resultActive {
-    background: $color-surface-hover;
-  }
-}
-
-.resultIcon {
-  display: flex;
-  align-items: center;
-  color: $color-text-secondary;
-  flex-shrink: 0;
-  width: 1.25rem;
-  height: 1.25rem;
-  font-size: 1.1rem;
-}
-
-.resultLabel {
-  font-size: $text-sm;
-  font-weight: 500;
-  color: $color-text-primary;
-  flex: 1;
-  text-align: left;
-}
-
-.resultDesc {
-  font-size: $text-xs;
-  color: $color-text-muted;
-  flex-shrink: 0;
-}
-
-.resultShortcut {
-  display: flex;
-  gap: 0.2rem;
-  flex-shrink: 0;
-
-  kbd {
-    font-size: $text-xs;
-    padding: 0.125rem 0.375rem;
-    background: $color-surface-sunken;
-    border: 1px solid $color-border;
-    border-radius: $radius-sm;
-    color: $color-text-muted;
-    font-family: $font-sans;
-  }
-}
-
-// --- Footer ---
-
-.footer {
-  display: flex;
-  align-items: center;
-  gap: 1.25rem;
-  padding: 0.5rem 1rem;
-  border-top: 1px solid $color-border;
-  font-size: $text-xs;
-  color: $color-text-muted;
-
-  span {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-  }
-
-  kbd {
-    padding: 0.1rem 0.35rem;
-    background: $color-surface-sunken;
-    border: 1px solid $color-border;
-    border-radius: $radius-sm;
-    font-family: $font-sans;
-    font-size: $text-xs;
-    color: $color-text-muted;
-  }
-}
-
-.footerRight {
-  margin-left: auto;
-}
+@use 'base/variables' as *;
+@use 'base/color' as *;
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: $color-backdrop;
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  z-index: 9999;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 14vh;
+  animation: overlayIn $transition-fast forwards;
+}
+
+@keyframes overlayIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.palette {
+  background: $color-surface-elevated;
+  border: 1px solid $color-border;
+  border-radius: $radius-lg;
+  width: min(580px, calc(100vw - 2rem));
+  max-height: 68vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 32px 64px rgb(0 0 0 / 0.30);
+  overflow: hidden;
+  animation: paletteIn $transition-fast forwards;
+}
+
+@keyframes paletteIn {
+  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0)    scale(1); }
+}
+
+// --- Search row ---
+
+.searchRow {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.875rem 1rem;
+  border-bottom: 1px solid $color-border;
+}
+
+.searchIconWrap {
+  display: flex;
+  align-items: center;
+  color: $color-text-muted;
+  flex-shrink: 0;
+}
+
+.searchInput {
+  flex: 1;
+  background: none;
+  border: none;
+  outline: none;
+  font-family: $font-sans;
+  font-size: $text-base;
+  color: $color-text-primary;
+  caret-color: $evo-primary-color;
+
+  &::placeholder {
+    color: $color-text-muted;
+  }
+}
+
+.escBadge {
+  font-size: $text-xs;
+  padding: 0.125rem 0.4rem;
+  background: $color-surface-sunken;
+  border: 1px solid $color-border;
+  border-radius: $radius-sm;
+  color: $color-text-muted;
+  font-family: $font-sans;
+  flex-shrink: 0;
+}
+
+// --- Results area ---
+
+.results {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.375rem 0.5rem;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: $color-border;
+    border-radius: 4px;
+  }
+}
+
+.empty {
+  padding: 2.5rem 1rem;
+  text-align: center;
+  font-size: $text-sm;
+  color: $color-text-muted;
+}
+
+.group {
+  margin-bottom: 0.25rem;
+}
+
+.groupLabel {
+  font-size: $text-xs;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: $color-text-muted;
+  padding: 0.375rem 0.625rem 0.25rem;
+}
+
+.resultItem {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.5625rem 0.75rem;
+  border: none;
+  border-radius: $radius-sm;
+  background: transparent;
+  cursor: pointer;
+  font-family: $font-sans;
+  transition: background-color $transition-fast;
+
+  &.resultActive {
+    background: $color-surface-hover;
+  }
+}
+
+.resultIcon {
+  display: flex;
+  align-items: center;
+  color: $color-text-secondary;
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  font-size: 1.1rem;
+}
+
+.resultLabel {
+  font-size: $text-sm;
+  font-weight: 500;
+  color: $color-text-primary;
+  flex: 1;
+  text-align: left;
+}
+
+.resultDesc {
+  font-size: $text-xs;
+  color: $color-text-muted;
+  flex-shrink: 0;
+}
+
+.resultShortcut {
+  display: flex;
+  gap: 0.2rem;
+  flex-shrink: 0;
+
+  kbd {
+    font-size: $text-xs;
+    padding: 0.125rem 0.375rem;
+    background: $color-surface-sunken;
+    border: 1px solid $color-border;
+    border-radius: $radius-sm;
+    color: $color-text-muted;
+    font-family: $font-sans;
+  }
+}
+
+// --- Footer ---
+
+.footer {
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+  padding: 0.5rem 1rem;
+  border-top: 1px solid $color-border;
+  font-size: $text-xs;
+  color: $color-text-muted;
+
+  span {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  kbd {
+    padding: 0.1rem 0.35rem;
+    background: $color-surface-sunken;
+    border: 1px solid $color-border;
+    border-radius: $radius-sm;
+    font-family: $font-sans;
+    font-size: $text-xs;
+    color: $color-text-muted;
+  }
+}
+
+.footerRight {
+  margin-left: auto;
+}

package/src/css/container.module.scss

@@ -1,18 +1,18 @@
-@use 'base/variables' as *;
-
-.container {
-  width: 100%;
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.centered {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.sm  { max-width: 640px; }
-.md  { max-width: 768px; }
-.lg  { max-width: 1024px; }
-.xl  { max-width: 1280px; }
-.full { max-width: 100%; }
+@use 'base/variables' as *;
+
+.container {
+  width: 100%;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.centered {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.sm  { max-width: 640px; }
+.md  { max-width: 768px; }
+.lg  { max-width: 1024px; }
+.xl  { max-width: 1280px; }
+.full { max-width: 100%; }

package/src/css/divider.module.scss

@@ -1,41 +1,41 @@
-@use 'base/variables' as *;
-@use 'base/color' as *;
-
-.divider {
-  border: none;
-  flex-shrink: 0;
-}
-
-.horizontal {
-  height: 1px;
-  width: 100%;
-  background-color: $color-border;
-  display: block;
-}
-
-.vertical {
-  width: 1px;
-  align-self: stretch;
-  background-color: $color-border;
-  display: inline-block;
-}
-
-.labeled {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  width: 100%;
-}
-
-.line {
-  flex: 1;
-  height: 1px;
-  background-color: $color-border;
-}
-
-.labelText {
-  font-size: $text-sm;
-  color: $color-text-muted;
-  white-space: nowrap;
-  font-family: $font-sans;
-}
+@use 'base/variables' as *;
+@use 'base/color' as *;
+
+.divider {
+  border: none;
+  flex-shrink: 0;
+}
+
+.horizontal {
+  height: 1px;
+  width: 100%;
+  background-color: $color-border;
+  display: block;
+}
+
+.vertical {
+  width: 1px;
+  align-self: stretch;
+  background-color: $color-border;
+  display: inline-block;
+}
+
+.labeled {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+}
+
+.line {
+  flex: 1;
+  height: 1px;
+  background-color: $color-border;
+}
+
+.labelText {
+  font-size: $text-sm;
+  color: $color-text-muted;
+  white-space: nowrap;
+  font-family: $font-sans;
+}