@justin_evo/evo-ui 1.1.0 → 1.2.1

package/src/css/card.module.scss

@@ -1,217 +1,217 @@
-@use './base/variables' as *;
-
-// ============================================================
-// EvoCard
-// ------------------------------------------------------------
-// Three orthogonal axes:
-//   1. variant     — elevated / outlined / ghost
-//   2. orientation — vertical / horizontal / responsive
-//   3. interactive — adds hover / focus / press states for
-//                    when the root is a <button> or <a>
-//
-// All colours / shadows come from semantic tokens so the same
-// rules render correctly under data-theme="light" and "dark".
-// ============================================================
-
-.root {
-  display: flex;
-  flex-direction: column;
-  background-color: $color-surface-elevated;
-  color: $color-text-primary;
-  border: 1px solid transparent;
-  border-radius: $evo-border-radius-lg;
-  overflow: hidden;
-  text-align: left;
-  text-decoration: none;
-  font-family: inherit;
-  transition:
-    box-shadow $transition-fast,
-    transform $transition-fast,
-    border-color $transition-fast,
-    background-color $transition-fast;
-}
-
-// ----- Variants ---------------------------------------------
-
-.elevated {
-  background-color: $color-surface-elevated;
-  box-shadow: $shadow-md;
-}
-
-.outlined {
-  background-color: $color-surface;
-  border-color: $color-border;
-  box-shadow: none;
-}
-
-.ghost {
-  background-color: transparent;
-  border-color: transparent;
-  box-shadow: none;
-}
-
-// ----- Orientation ------------------------------------------
-//
-// Horizontal layouts use CSS grid: a fixed-ish media column on
-// the left and content stacked on the right. `:has(> .media)`
-// gates the two-column grid so cards without a media slot stay
-// single-column even in horizontal/responsive mode.
-
-.orient-vertical {
-  flex-direction: column;
-}
-
-.orient-horizontal {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-
-  &:has(> .media) {
-    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
-  }
-
-  > .media {
-    grid-row: 1 / -1;
-    grid-column: 1;
-  }
-
-  > :not(.media) {
-    grid-column: -2;
-  }
-}
-
-.orient-responsive {
-  flex-direction: column;
-
-  @media (min-width: 768px) {
-    display: grid;
-    flex-direction: initial;
-    grid-template-columns: minmax(0, 1fr);
-
-    &:has(> .media) {
-      grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
-    }
-
-    > .media {
-      grid-row: 1 / -1;
-      grid-column: 1;
-    }
-
-    > :not(.media) {
-      grid-column: -2;
-    }
-  }
-}
-
-// ----- Interactive (real <button> / <a>) --------------------
-
-.interactive {
-  cursor: pointer;
-  user-select: none;
-  appearance: none;
-  width: 100%;
-  font: inherit;
-  -webkit-tap-highlight-color: transparent;
-  touch-action: manipulation;
-  // a11y: cards used as buttons can be short — guarantee a 44px
-  // touch target so they stay tappable on mobile.
-  min-height: 2.75rem;
-
-  &:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: $shadow-lg;
-  }
-
-  &.outlined:hover:not(:disabled) {
-    border-color: $color-border-strong;
-  }
-
-  &.ghost:hover:not(:disabled) {
-    background-color: $color-surface-hover;
-  }
-
-  &:active:not(:disabled) {
-    transform: translateY(0);
-    box-shadow: $shadow-sm;
-  }
-
-  &:focus-visible {
-    outline: 2px solid $evo-primary-focus;
-    outline-offset: 2px;
-  }
-
-  &:disabled,
-  &[aria-disabled='true'] {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-}
-
-// ----- Slots ------------------------------------------------
-
-.media {
-  display: block;
-  overflow: hidden;
-  background-color: $color-surface-sunken;
-}
-
-.mediaImg {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.header {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding: 1rem 1.25rem 0.5rem;
-}
-
-.body {
-  flex: 1 1 auto;
-  min-width: 0;
-  padding: 0.5rem 1.25rem 1rem;
-}
-
-.footer {
-  padding: 0.75rem 1.25rem;
-  border-top: 1px solid $color-border-subtle;
-}
-
-// When the card has only a body (no header/footer), pad the body
-// like a full block so content doesn't look cramped.
-.root > .body:only-child {
-  padding: 1.25rem;
-}
-
-// ----- Typography -------------------------------------------
-
-.title {
-  margin: 0;
-  font-size: $text-lg;
-  font-weight: 700;
-  line-height: 1.3;
-  color: $color-text-primary;
-}
-
-.description {
-  margin: 0;
-  font-size: $text-sm;
-  line-height: 1.55;
-  color: $color-text-secondary;
-}
-
-// ----- Motion preferences -----------------------------------
-
-@media (prefers-reduced-motion: reduce) {
-  .root,
-  .interactive {
-    transition: none;
-
-    &:hover:not(:disabled) {
-      transform: none;
-    }
-  }
-}
+@use './base/variables' as *;
+
+// ============================================================
+// EvoCard
+// ------------------------------------------------------------
+// Three orthogonal axes:
+//   1. variant     — elevated / outlined / ghost
+//   2. orientation — vertical / horizontal / responsive
+//   3. interactive — adds hover / focus / press states for
+//                    when the root is a <button> or <a>
+//
+// All colours / shadows come from semantic tokens so the same
+// rules render correctly under data-theme="light" and "dark".
+// ============================================================
+
+.root {
+  display: flex;
+  flex-direction: column;
+  background-color: $color-surface-elevated;
+  color: $color-text-primary;
+  border: 1px solid transparent;
+  border-radius: $evo-border-radius-lg;
+  overflow: hidden;
+  text-align: left;
+  text-decoration: none;
+  font-family: inherit;
+  transition:
+    box-shadow $transition-fast,
+    transform $transition-fast,
+    border-color $transition-fast,
+    background-color $transition-fast;
+}
+
+// ----- Variants ---------------------------------------------
+
+.elevated {
+  background-color: $color-surface-elevated;
+  box-shadow: $shadow-md;
+}
+
+.outlined {
+  background-color: $color-surface;
+  border-color: $color-border;
+  box-shadow: none;
+}
+
+.ghost {
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+
+// ----- Orientation ------------------------------------------
+//
+// Horizontal layouts use CSS grid: a fixed-ish media column on
+// the left and content stacked on the right. `:has(> .media)`
+// gates the two-column grid so cards without a media slot stay
+// single-column even in horizontal/responsive mode.
+
+.orient-vertical {
+  flex-direction: column;
+}
+
+.orient-horizontal {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+
+  &:has(> .media) {
+    grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
+  }
+
+  > .media {
+    grid-row: 1 / -1;
+    grid-column: 1;
+  }
+
+  > :not(.media) {
+    grid-column: -2;
+  }
+}
+
+.orient-responsive {
+  flex-direction: column;
+
+  @media (min-width: 768px) {
+    display: grid;
+    flex-direction: initial;
+    grid-template-columns: minmax(0, 1fr);
+
+    &:has(> .media) {
+      grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
+    }
+
+    > .media {
+      grid-row: 1 / -1;
+      grid-column: 1;
+    }
+
+    > :not(.media) {
+      grid-column: -2;
+    }
+  }
+}
+
+// ----- Interactive (real <button> / <a>) --------------------
+
+.interactive {
+  cursor: pointer;
+  user-select: none;
+  appearance: none;
+  width: 100%;
+  font: inherit;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  // a11y: cards used as buttons can be short — guarantee a 44px
+  // touch target so they stay tappable on mobile.
+  min-height: 2.75rem;
+
+  &:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: $shadow-lg;
+  }
+
+  &.outlined:hover:not(:disabled) {
+    border-color: $color-border-strong;
+  }
+
+  &.ghost:hover:not(:disabled) {
+    background-color: $color-surface-hover;
+  }
+
+  &:active:not(:disabled) {
+    transform: translateY(0);
+    box-shadow: $shadow-sm;
+  }
+
+  &:focus-visible {
+    outline: 2px solid $evo-primary-focus;
+    outline-offset: 2px;
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+// ----- Slots ------------------------------------------------
+
+.media {
+  display: block;
+  overflow: hidden;
+  background-color: $color-surface-sunken;
+}
+
+.mediaImg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 1rem 1.25rem 0.5rem;
+}
+
+.body {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0.5rem 1.25rem 1rem;
+}
+
+.footer {
+  padding: 0.75rem 1.25rem;
+  border-top: 1px solid $color-border-subtle;
+}
+
+// When the card has only a body (no header/footer), pad the body
+// like a full block so content doesn't look cramped.
+.root > .body:only-child {
+  padding: 1.25rem;
+}
+
+// ----- Typography -------------------------------------------
+
+.title {
+  margin: 0;
+  font-size: $text-lg;
+  font-weight: 700;
+  line-height: 1.3;
+  color: $color-text-primary;
+}
+
+.description {
+  margin: 0;
+  font-size: $text-sm;
+  line-height: 1.55;
+  color: $color-text-secondary;
+}
+
+// ----- Motion preferences -----------------------------------
+
+@media (prefers-reduced-motion: reduce) {
+  .root,
+  .interactive {
+    transition: none;
+
+    &:hover:not(:disabled) {
+      transform: none;
+    }
+  }
+}

package/src/css/checkbox.module.scss

@@ -1,120 +1,123 @@
-@use 'base/variables' as *;
-@use 'base/color' as *;
-
-.group {
-  border: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.groupLabel {
-  font-size: $text-sm;
-  font-weight: 600;
-  color: $color-text-primary;
-  margin-bottom: 0.125rem;
-  font-family: $font-sans;
-}
-
-.checkbox {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-
-  &.disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-}
-
-.input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-
-  &:checked + .label .checkmark {
-    background-color: $evo-primary-color;
-    border-color: $evo-primary-color;
-
-    &::after {
-      opacity: 1;
-      transform: rotate(45deg) scale(1);
-    }
-  }
-
-  &:indeterminate + .label .checkmark {
-    background-color: $evo-primary-color;
-    border-color: $evo-primary-color;
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) !important;
-      width: 8px;
-      height: 2px;
-      background: $evo-primary-fg;
-      border: none;
-      opacity: 1;
-    }
-  }
-
-  &:focus-visible + .label .checkmark {
-    outline: 2px solid $evo-primary-focus;
-    outline-offset: 2px;
-  }
-}
-
-.label {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  font-family: $font-sans;
-}
-
-.checkmark {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
-  border: 2px solid $color-border;
-  border-radius: $radius-sm;
-  background: $color-surface;
-  transition: background-color $transition-fast, border-color $transition-fast;
-  flex-shrink: 0;
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0px;
-    left: 3px;
-    width: 5px;
-    height: 8px;
-    border: 2px solid $evo-primary-fg;
-    border-top: none;
-    border-left: none;
-    opacity: 0;
-    transform: rotate(45deg) scale(0.5);
-    transition: opacity $transition-fast, transform $transition-fast;
-  }
-}
-
-.labelText {
-  font-size: $text-sm;
-  color: $color-text-primary;
-}
-
-.helperText {
-  font-size: $text-xs;
-  color: $color-text-muted;
-  padding-left: 1.5rem;
-  margin: 0;
-}
+@use 'base/variables' as *;
+@use 'base/color' as *;
+
+.group {
+  border: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.groupLabel {
+  font-size: $text-sm;
+  font-weight: 600;
+  color: $color-text-primary;
+  margin-bottom: 0.125rem;
+  font-family: $font-sans;
+}
+
+.checkbox {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+.input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+
+  &:checked + .label .checkmark {
+    background-color: $evo-primary-color;
+    border-color: $evo-primary-color;
+
+    &::after {
+      opacity: 1;
+      transform: translate(-50%, -60%) rotate(45deg) scale(1);
+    }
+  }
+
+  &:indeterminate + .label .checkmark {
+    background-color: $evo-primary-color;
+    border-color: $evo-primary-color;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) !important;
+      width: 8px;
+      height: 2px;
+      background: $evo-primary-fg;
+      border: none;
+      opacity: 1;
+    }
+  }
+
+  &:focus-visible + .label .checkmark {
+    outline: 2px solid $evo-primary-focus;
+    outline-offset: 2px;
+  }
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-family: $font-sans;
+}
+
+.checkmark {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid $color-border;
+  border-radius: $radius-sm;
+  background: $color-surface;
+  transition: background-color $transition-fast, border-color $transition-fast;
+  flex-shrink: 0;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 5px;
+    height: 9px;
+    border: 2px solid $evo-primary-fg;
+    border-top: none;
+    border-left: none;
+    opacity: 0;
+    // Centered via translate (parent's flex-centering can't reach an absolute
+    // child). -60% Y nudges the rotated "L" optically into the middle. The
+    // centering translate is folded into both states so the scale stays put.
+    transform: translate(-50%, -60%) rotate(45deg) scale(0.5);
+    transition: opacity $transition-fast, transform $transition-fast;
+  }
+}
+
+.labelText {
+  font-size: $text-sm;
+  color: $color-text-primary;
+}
+
+.helperText {
+  font-size: $text-xs;
+  color: $color-text-muted;
+  padding-left: 1.5rem;
+  margin: 0;
+}