@hina-ui/vue 1.0.0

package/src/styles/interaction.css

@@ -0,0 +1,294 @@
+@utility hn-interactive {
+  cursor: pointer;
+  will-change: transform;
+  transition:
+    color var(--hn-duration-fast) var(--hn-ease-enter),
+    background-color var(--hn-duration-fast) var(--hn-ease-enter),
+    border-color var(--hn-duration-fast) var(--hn-ease-enter),
+    outline-color var(--hn-duration-fast) var(--hn-ease-enter),
+    box-shadow var(--hn-duration-fast) var(--hn-ease-enter),
+    opacity var(--hn-duration-fast) var(--hn-ease-enter),
+    transform var(--hn-duration-fast) var(--hn-ease-press);
+
+  &:focus-visible {
+    outline: var(--hn-focus-ring-width) solid var(--hn-focus-ring);
+    outline-offset: var(--hn-focus-ring-offset);
+  }
+
+  &:active:not(:disabled):not([data-disabled]) {
+    transform: scale(var(--hn-press-scale));
+    transition-timing-function: var(--hn-ease-move);
+  }
+
+  &:disabled,
+  &[data-disabled] {
+    cursor: not-allowed;
+    transform: none;
+  }
+}
+
+@utility hn-state-layer {
+  position: relative;
+  isolation: isolate;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-radius: inherit;
+    background-color: var(--hn-state-color, currentColor);
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      opacity var(--hn-duration-fast) var(--hn-ease-enter),
+      background-color 0s var(--hn-ease-linear) var(--hn-duration-fast);
+  }
+
+  @media (hover: hover) {
+    &:hover:not(:disabled):not([data-disabled])::after,
+    :where([data-hn-state-group]:hover) &:not(:disabled):not([data-disabled])::after {
+      opacity: var(--hn-state-hover-opacity);
+    }
+
+    &[data-hn-highlight-only]:hover:not([data-highlighted])::after {
+      opacity: 0;
+    }
+  }
+
+  &:active:not(:disabled):not([data-disabled]):not(:has(.hn-ripple))::after,
+  :where([data-hn-state-group]:active)
+    &:not(:disabled):not([data-disabled]):not(:has(.hn-ripple))::after {
+    opacity: var(--hn-state-press-opacity);
+  }
+
+  &[data-highlighted]:not([data-disabled])::after {
+    opacity: var(--hn-state-hover-opacity);
+  }
+
+  &[aria-haspopup][data-state='open']::after,
+  &[aria-haspopup][data-state='open']:hover:not(:disabled):not([data-disabled])::after {
+    opacity: var(--hn-state-press-opacity);
+  }
+
+  &[data-state='checked']:not([data-disabled])::after,
+  &[data-state='selected']:not([data-disabled])::after,
+  &[aria-selected='true']:not([data-disabled])::after,
+  &[aria-pressed='true']:not([data-disabled])::after {
+    --hn-state-color: var(--hn-state-selected-color, var(--hn-accent));
+    opacity: var(--hn-state-selected-opacity);
+    transition:
+      opacity var(--hn-duration-fast) var(--hn-ease-enter),
+      background-color 0s var(--hn-ease-linear) 0s;
+  }
+
+  &[data-highlighted][data-state='checked']:not([data-disabled])::after,
+  &[data-highlighted][data-state='selected']:not([data-disabled])::after,
+  &[data-highlighted][aria-selected='true']:not([data-disabled])::after,
+  &[data-highlighted][aria-pressed='true']:not([data-disabled])::after {
+    opacity: calc(var(--hn-state-selected-opacity) + var(--hn-state-hover-opacity));
+  }
+
+  @media (hover: hover) {
+    &[data-state='checked']:hover:not(:disabled):not([data-disabled])::after,
+    &[data-state='selected']:hover:not(:disabled):not([data-disabled])::after,
+    &[aria-selected='true']:hover:not(:disabled):not([data-disabled])::after,
+    &[aria-pressed='true']:hover:not(:disabled):not([data-disabled])::after,
+    :where([data-hn-state-group]:hover)
+      &[data-state='checked']:not(:disabled):not([data-disabled])::after,
+    :where([data-hn-state-group]:hover)
+      &[data-state='selected']:not(:disabled):not([data-disabled])::after,
+    :where([data-hn-state-group]:hover)
+      &[aria-selected='true']:not(:disabled):not([data-disabled])::after,
+    :where([data-hn-state-group]:hover)
+      &[aria-pressed='true']:not(:disabled):not([data-disabled])::after {
+      opacity: calc(var(--hn-state-selected-opacity) + var(--hn-state-hover-opacity));
+    }
+  }
+
+  &[data-state='checked']:active:not(:disabled):not([data-disabled]):not(:has(.hn-ripple))::after,
+  &[data-state='selected']:active:not(:disabled):not([data-disabled]):not(:has(.hn-ripple))::after,
+  &[aria-selected='true']:active:not(:disabled):not([data-disabled]):not(:has(.hn-ripple))::after,
+  &[aria-pressed='true']:active:not(:disabled):not([data-disabled]):not(:has(.hn-ripple))::after {
+    opacity: calc(var(--hn-state-selected-opacity) + var(--hn-state-press-opacity));
+  }
+}
+
+@utility hn-field {
+  background-color: var(--hn-field-bg, var(--hn-surface));
+  outline: none;
+  box-shadow:
+    0 0 0 var(--hn-field-ring-w, 0px) var(--hn-field-ring-color, var(--hn-accent)),
+    var(--hn-field-shadow, 0 0 rgba(0, 0, 0, 0));
+  transition:
+    color var(--hn-duration-fast) var(--hn-ease-enter),
+    background-color var(--hn-duration-fast) var(--hn-ease-enter),
+    border-color var(--hn-duration-fast) var(--hn-ease-enter),
+    box-shadow var(--hn-duration-fast) var(--hn-ease-enter),
+    opacity var(--hn-duration-fast) var(--hn-ease-enter);
+
+  @media (hover: hover) {
+    &:hover:not(:disabled):not(:has(:disabled)):not(
+        :has(:is(input, textarea, [data-hn-segment]):focus-visible)
+      ):not([data-invalid]) {
+      background-color: color-mix(
+        in oklab,
+        var(--hn-field-bg, var(--hn-surface)) calc(100% - var(--hn-state-hover-opacity) * 100%),
+        var(--hn-fg-default)
+      );
+    }
+
+    &[data-invalid]:hover:not(:disabled):not(:has(:disabled)):not(
+        :has(:is(input, textarea, [data-hn-segment]):focus-visible)
+      ) {
+      background-color: color-mix(
+        in oklab,
+        color-mix(
+            in oklab,
+            var(--hn-field-bg, var(--hn-surface)) calc(100% - var(--hn-state-hover-opacity) * 100%),
+            var(--hn-danger)
+          )
+          calc(100% - var(--hn-state-hover-opacity) * 100%),
+        var(--hn-fg-default)
+      );
+    }
+  }
+
+  &:focus-visible,
+  &:has(:is(input, textarea, [data-hn-segment]):focus-visible) {
+    --hn-field-ring-w: 2px;
+  }
+
+  &[data-invalid] {
+    --hn-field-ring-color: var(--hn-danger);
+    border-color: var(--hn-danger);
+    background-color: color-mix(
+      in oklab,
+      var(--hn-field-bg, var(--hn-surface)) calc(100% - var(--hn-state-hover-opacity) * 100%),
+      var(--hn-danger)
+    );
+  }
+
+  &[data-invalid]:focus-visible,
+  &[data-invalid]:has(:is(input, textarea, [data-hn-segment]):focus-visible) {
+    --hn-field-ring-w: 1px;
+  }
+}
+
+@utility hn-link {
+  color: var(--hn-link-color, var(--hn-fg-default));
+  transition:
+    color var(--hn-duration-fast) var(--hn-ease-enter),
+    text-decoration-color var(--hn-duration-fast) var(--hn-ease-enter),
+    outline-color var(--hn-duration-fast) var(--hn-ease-enter);
+
+  &:focus-visible {
+    outline: var(--hn-focus-ring-width) solid var(--hn-focus-ring);
+    outline-offset: var(--hn-focus-ring-offset);
+  }
+
+  &[data-underline] {
+    text-decoration-line: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.2em;
+    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
+  }
+
+  @media (hover: hover) {
+    &[data-underline]:hover:not(:disabled):not([data-disabled]) {
+      text-decoration-color: currentColor;
+    }
+
+    &:hover:not(:disabled):not([data-disabled]) {
+      color: color-mix(in oklab, var(--hn-link-color, var(--hn-fg-default)) 75%, var(--hn-fg-max));
+    }
+  }
+
+  &:active:not(:disabled):not([data-disabled]) {
+    color: color-mix(in oklab, var(--hn-link-color, var(--hn-fg-default)) 60%, var(--hn-fg-max));
+  }
+}
+
+@utility hn-ripple {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  overflow: hidden;
+  pointer-events: none;
+
+  @media (forced-colors: active) {
+    display: none;
+  }
+}
+
+@utility hn-ripple-surface {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    background: radial-gradient(
+      closest-side,
+      var(--hn-ripple-color, var(--hn-state-color, currentColor)) max(100% - 70px, 65%),
+      transparent 100%
+    );
+    transform-origin: center center;
+    transition: opacity var(--hn-ripple-out) var(--hn-ease-move);
+  }
+
+  &[data-pressed]::after {
+    opacity: var(--hn-state-press-opacity);
+    transition-duration: var(--hn-ripple-in);
+  }
+}
+
+@utility hn-press-lg {
+  --hn-press-scale: var(--hn-press-scale-lg);
+}
+
+@utility hn-press-none {
+  --hn-press-scale: 1;
+}
+
+@utility hn-focus-ring {
+  &:focus-visible {
+    outline: var(--hn-focus-ring-width) solid var(--hn-focus-ring);
+    outline-offset: var(--hn-focus-ring-offset);
+  }
+}
+
+@utility hn-skeleton {
+  background-color: var(--hn-bg-subtle);
+  border-radius: var(--hn-radius-md);
+  color: transparent;
+  cursor: default;
+  pointer-events: none;
+  user-select: none;
+  animation: hn-skeleton var(--hn-skeleton-duration) var(--hn-ease-move) infinite;
+
+  & * {
+    visibility: hidden;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+
+@utility hn-scrollbar-safe {
+  margin-inline-end: var(--scrollbar-width, 0px);
+}
+
+@utility hn-scrollbar-safe-center {
+  translate: calc(var(--scrollbar-width, 0px) / -2) 0;
+
+  &:dir(rtl) {
+    translate: calc(var(--scrollbar-width, 0px) / 2) 0;
+  }
+}

package/src/styles/mappings.css

@@ -0,0 +1,104 @@
+@theme inline {
+  --color-canvas: var(--hn-bg-canvas);
+  --color-surface: var(--hn-surface);
+  --color-subtle: var(--hn-bg-subtle);
+  --color-inset: var(--hn-bg-inset);
+  --color-scrim: var(--hn-bg-scrim);
+  --color-veil: var(--hn-bg-veil);
+
+  --color-fg: var(--hn-fg-default);
+  --color-muted: var(--hn-fg-muted);
+  --color-faint: var(--hn-fg-subtle);
+  --color-disabled: var(--hn-fg-disabled);
+
+  --color-line: var(--hn-border);
+  --color-line-strong: var(--hn-border-strong);
+
+  --color-accent: var(--hn-accent);
+  --color-accent-on: var(--hn-accent-on);
+  --color-accent-text: var(--hn-accent-text);
+  --color-accent-soft: var(--hn-accent-soft);
+  --color-neutral-solid: var(--hn-neutral-solid);
+  --color-neutral-solid-on: var(--hn-neutral-solid-on);
+  --color-success: var(--hn-success);
+  --color-success-on: var(--hn-success-on);
+  --color-warning: var(--hn-warning);
+  --color-warning-on: var(--hn-warning-on);
+  --color-danger: var(--hn-danger);
+  --color-danger-on: var(--hn-danger-on);
+  --color-info: var(--hn-info);
+  --color-info-on: var(--hn-info-on);
+
+  --color-success-soft: var(--hn-success-soft);
+  --color-success-text: var(--hn-success-text);
+  --color-warning-soft: var(--hn-warning-soft);
+  --color-warning-text: var(--hn-warning-text);
+  --color-danger-soft: var(--hn-danger-soft);
+  --color-danger-text: var(--hn-danger-text);
+  --color-info-soft: var(--hn-info-soft);
+  --color-info-text: var(--hn-info-text);
+
+  --font-sans: var(--hn-font-sans);
+  --font-mono: var(--hn-font-mono);
+
+  --text-xs: var(--hn-text-xs);
+  --text-xs--line-height: var(--hn-leading-xs);
+  --text-sm: var(--hn-text-sm);
+  --text-sm--line-height: var(--hn-leading-sm);
+  --text-base: var(--hn-text-base);
+  --text-base--line-height: var(--hn-leading-base);
+  --text-md: var(--hn-text-md);
+  --text-md--line-height: var(--hn-leading-md);
+  --text-lg: var(--hn-text-lg);
+  --text-lg--line-height: var(--hn-leading-lg);
+  --text-xl: var(--hn-text-xl);
+  --text-xl--line-height: var(--hn-leading-xl);
+  --text-2xl: var(--hn-text-2xl);
+  --text-2xl--line-height: var(--hn-leading-2xl);
+
+  --leading-xs: var(--hn-leading-xs);
+  --leading-sm: var(--hn-leading-sm);
+  --leading-base: var(--hn-leading-base);
+  --leading-md: var(--hn-leading-md);
+  --leading-lg: var(--hn-leading-lg);
+  --leading-xl: var(--hn-leading-xl);
+  --leading-2xl: var(--hn-leading-2xl);
+
+  --font-weight-normal: var(--hn-weight-normal);
+  --font-weight-medium: var(--hn-weight-medium);
+  --font-weight-semibold: var(--hn-weight-semibold);
+
+  --tracking-tight: var(--hn-tracking-tight);
+  --tracking-normal: var(--hn-tracking-normal);
+  --tracking-wide: var(--hn-tracking-wide);
+
+  --radius-xs: var(--hn-radius-xs);
+  --radius-sm: var(--hn-radius-sm);
+  --radius-md: var(--hn-radius-md);
+  --radius-lg: var(--hn-radius-lg);
+  --radius-xl: var(--hn-radius-xl);
+
+  --shadow-sm: var(--hn-shadow-sm);
+  --shadow-md: var(--hn-shadow-md);
+  --shadow-lg: var(--hn-shadow-lg);
+
+  --ease-enter: var(--hn-ease-enter);
+  --ease-enter-strong: var(--hn-ease-enter-strong);
+  --ease-exit: var(--hn-ease-exit);
+  --ease-move: var(--hn-ease-move);
+  --ease-press: var(--hn-ease-press);
+}
+
+@custom-variant data-open (&[data-state='open']);
+@custom-variant data-closed (&[data-state='closed']);
+@custom-variant data-active (&[data-state='active']);
+@custom-variant data-checked (&[data-state='checked']);
+@custom-variant data-selected (&[data-state='selected']);
+@custom-variant data-highlighted (&[data-highlighted]);
+@custom-variant data-disabled (&[data-disabled]);
+@custom-variant data-loading (&[data-loading]);
+@custom-variant data-invalid (&[data-invalid]);
+@custom-variant data-side-top (&[data-side='top']);
+@custom-variant data-side-bottom (&[data-side='bottom']);
+@custom-variant data-side-left (&[data-side='left']);
+@custom-variant data-side-right (&[data-side='right']);