@hina-ui/vue 1.0.0

package/src/styles/semantic.css

@@ -0,0 +1,225 @@
+:root {
+  --hn-bg-canvas: var(--color-neutral-50);
+  --hn-surface: var(--color-neutral-0);
+  --hn-bg-subtle: var(--color-neutral-100);
+  --hn-bg-inset: var(--color-neutral-150);
+  --hn-bg-scrim: rgb(0 0 0 / 0.32);
+  --hn-bg-veil: color-mix(in srgb, var(--hn-surface) 70%, transparent);
+  --hn-blur-scrim: 8px;
+
+  --hn-fg-default: var(--color-neutral-900);
+  --hn-fg-max: var(--color-neutral-1000);
+  --hn-fg-muted: var(--color-neutral-600);
+  --hn-fg-subtle: var(--color-neutral-500);
+  --hn-fg-disabled: var(--color-neutral-400);
+
+  --hn-border: rgb(0 0 0 / 0.08);
+  --hn-border-strong: rgb(0 0 0 / 0.15);
+
+  --hn-accent: var(--color-brand-500);
+  --hn-accent-on: var(--color-neutral-950);
+  --hn-accent-text: var(--color-brand-700);
+  --hn-accent-soft: color-mix(in oklab, var(--color-brand-500) 12%, var(--hn-surface));
+  --hn-accent-border: color-mix(in oklab, var(--color-brand-500) 34%, transparent);
+
+  --hn-focus-ring: var(--color-brand-600);
+  --hn-focus-ring-width: 2px;
+  --hn-focus-ring-offset: 2px;
+
+  --hn-state-hover-opacity: 0.06;
+  --hn-state-press-opacity: 0.1;
+  --hn-state-selected-opacity: 0.14;
+  --hn-press-scale: 0.98;
+  --hn-press-scale-lg: 0.995;
+
+  --hn-neutral-solid: var(--color-neutral-900);
+  --hn-neutral-solid-on: var(--color-neutral-0);
+
+  --hn-success: #147438;
+  --hn-success-on: var(--color-neutral-0);
+  --hn-success-text: #15803d;
+  --hn-success-soft: color-mix(in oklab, var(--hn-success) 12%, var(--hn-surface));
+
+  --hn-warning: #f59e0b;
+  --hn-warning-on: var(--color-neutral-900);
+  --hn-warning-text: #b45309;
+  --hn-warning-soft: color-mix(in oklab, var(--hn-warning) 14%, var(--hn-surface));
+
+  --hn-danger: #dc2626;
+  --hn-danger-on: var(--color-neutral-0);
+  --hn-danger-text: #b91c1c;
+  --hn-danger-soft: color-mix(in oklab, var(--hn-danger) 12%, var(--hn-surface));
+
+  --hn-info: #0369a1;
+  --hn-info-on: var(--color-neutral-0);
+  --hn-info-text: #0369a1;
+  --hn-info-soft: color-mix(in oklab, var(--hn-info) 12%, var(--hn-surface));
+
+  --hn-expr-blue-text: #0e7fb8;
+  --hn-expr-purple-text: #7a3fd0;
+  --hn-expr-cyan-text: #0a7d7d;
+  --hn-expr-orange-text: #b45a26;
+  --hn-expr-coral-text: #c33d3d;
+  --hn-expr-yellow-text: #8a6a00;
+
+  --hn-shadow-sm:
+    0 1px 2px rgb(0 0 0 / 0.06), 0 2px 4px -1px rgb(0 0 0 / 0.04), 0 4px 8px -2px rgb(0 0 0 / 0.04);
+  --hn-shadow-md:
+    0 2px 4px rgb(0 0 0 / 0.05), 0 6px 12px -3px rgb(0 0 0 / 0.07),
+    0 16px 32px -12px rgb(0 0 0 / 0.09);
+  --hn-shadow-lg:
+    0 4px 8px rgb(0 0 0 / 0.05), 0 16px 32px -8px rgb(0 0 0 / 0.1),
+    0 40px 80px -24px rgb(0 0 0 / 0.16);
+
+  --hn-scroll-shadow: rgb(0 0 0 / 0.1);
+
+  --hn-z-overlay: 100;
+  --hn-z-toast: 110;
+}
+
+.dark {
+  --hn-bg-canvas: var(--color-neutral-950);
+  --hn-surface: var(--color-neutral-1000);
+  --hn-bg-subtle: #141414;
+  --hn-bg-inset: var(--color-neutral-800);
+  --hn-bg-scrim: rgb(0 0 0 / 0.6);
+
+  --hn-fg-default: var(--color-neutral-150);
+  --hn-fg-max: var(--color-neutral-0);
+  --hn-fg-muted: var(--color-neutral-400);
+  --hn-fg-subtle: var(--color-neutral-500);
+  --hn-fg-disabled: var(--color-neutral-600);
+
+  --hn-border: rgb(255 255 255 / 0.1);
+  --hn-border-strong: rgb(255 255 255 / 0.18);
+
+  --hn-accent: var(--color-brand-400);
+  --hn-accent-on: var(--color-neutral-1000);
+  --hn-accent-text: var(--color-brand-400);
+  --hn-accent-soft: color-mix(in oklab, var(--color-brand-400) 24%, var(--hn-surface));
+  --hn-accent-border: color-mix(in oklab, var(--color-brand-400) 30%, transparent);
+
+  --hn-focus-ring: var(--color-brand-400);
+
+  --hn-state-hover-opacity: 0.09;
+  --hn-state-press-opacity: 0.13;
+  --hn-state-selected-opacity: 0.2;
+
+  --hn-neutral-solid: var(--color-neutral-150);
+  --hn-neutral-solid-on: var(--color-neutral-950);
+
+  --hn-success: #22c55e;
+  --hn-success-on: var(--color-neutral-950);
+  --hn-success-text: #4ade80;
+  --hn-success-soft: color-mix(in oklab, var(--hn-success) 24%, var(--hn-surface));
+
+  --hn-warning: #f59e0b;
+  --hn-warning-on: var(--color-neutral-950);
+  --hn-warning-text: #fbbf24;
+  --hn-warning-soft: color-mix(in oklab, var(--hn-warning) 28%, var(--hn-surface));
+
+  --hn-danger: #f15050;
+  --hn-danger-on: var(--color-neutral-950);
+  --hn-danger-text: #f87171;
+  --hn-danger-soft: color-mix(in oklab, var(--hn-danger) 24%, var(--hn-surface));
+
+  --hn-info: #0ea5e9;
+  --hn-info-on: var(--color-neutral-950);
+  --hn-info-text: #38bdf8;
+  --hn-info-soft: color-mix(in oklab, var(--hn-info) 24%, var(--hn-surface));
+
+  --hn-expr-blue-text: #7dd3fc;
+  --hn-expr-purple-text: #c9a2ff;
+  --hn-expr-cyan-text: #4ee0e0;
+  --hn-expr-orange-text: #ffb896;
+  --hn-expr-coral-text: #ff9d9d;
+  --hn-expr-yellow-text: #ffd93d;
+
+  --hn-shadow-sm:
+    inset 0 1px 0 rgb(255 255 255 / 0.04), 0 1px 2px rgb(0 0 0 / 0.5),
+    0 2px 6px -2px rgb(0 0 0 / 0.4);
+  --hn-shadow-md:
+    inset 0 1px 0 rgb(255 255 255 / 0.05), 0 4px 8px rgb(0 0 0 / 0.45),
+    0 12px 24px -8px rgb(0 0 0 / 0.5);
+  --hn-shadow-lg:
+    inset 0 1px 0 rgb(255 255 255 / 0.06), 0 8px 16px rgb(0 0 0 / 0.5),
+    0 32px 64px -16px rgb(0 0 0 / 0.55);
+
+  --hn-scroll-shadow: rgb(0 0 0 / 0.5);
+}
+
+:root {
+  --hn-font-sans:
+    'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', ui-sans-serif, system-ui, sans-serif;
+  --hn-font-mono:
+    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Noto Sans SC', 'PingFang SC',
+    'Microsoft YaHei', monospace;
+
+  --hn-text-xs: 0.8125rem;
+  --hn-text-sm: 0.875rem;
+  --hn-text-base: 1rem;
+  --hn-text-md: 1.125rem;
+  --hn-text-lg: 1.25rem;
+  --hn-text-xl: 1.5rem;
+  --hn-text-2xl: 1.875rem;
+
+  --hn-leading-xs: 1.25rem;
+  --hn-leading-sm: 1.375rem;
+  --hn-leading-base: 1.5rem;
+  --hn-leading-md: 1.75rem;
+  --hn-leading-lg: 1.875rem;
+  --hn-leading-xl: 2.125rem;
+  --hn-leading-2xl: 2.5rem;
+
+  --hn-weight-normal: 400;
+  --hn-weight-medium: 500;
+  --hn-weight-semibold: 600;
+
+  --hn-tracking-tight: -0.01em;
+  --hn-tracking-normal: 0;
+  --hn-tracking-wide: 0.08em;
+
+  --hn-radius-xs: 4px;
+  --hn-radius-sm: 6px;
+  --hn-radius-md: 8px;
+  --hn-radius-lg: 8px;
+  --hn-radius-xl: 14px;
+  --hn-radius-full: 9999px;
+
+  --hn-duration-fast: 200ms;
+  --hn-duration-base: 300ms;
+  --hn-duration-slow: 450ms;
+  --hn-duration-exit: 200ms;
+
+  --hn-ease-enter: cubic-bezier(0, 0, 0.2, 1);
+  --hn-ease-enter-strong: cubic-bezier(0.05, 0.7, 0.1, 1);
+  --hn-ease-exit: cubic-bezier(0.4, 0, 1, 1);
+  --hn-ease-move: cubic-bezier(0.4, 0, 0.2, 1);
+  --hn-ease-press: cubic-bezier(0.3, 1.2, 0.6, 1);
+  --hn-ease-linear: linear;
+
+  --hn-travel-sm: 4px;
+  --hn-travel-md: 10px;
+  --hn-stagger: 24ms;
+  --hn-spin-duration: 700ms;
+  --hn-skeleton-duration: 2200ms;
+  --hn-ripple-in: 75ms;
+  --hn-ripple-out: 375ms;
+  --hn-pulse-duration: 1500ms;
+  --hn-progress-duration: 1800ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --hn-duration-fast: 1ms;
+    --hn-duration-base: 1ms;
+    --hn-duration-slow: 1ms;
+    --hn-duration-exit: 1ms;
+    --hn-travel-sm: 0px;
+    --hn-travel-md: 0px;
+    --hn-stagger: 0ms;
+    --hn-ease-press: linear;
+    --hn-ripple-in: 1ms;
+    --hn-ripple-out: 1ms;
+  }
+}

package/src/styles/spoiler.css

@@ -0,0 +1,65 @@
+@property --hn-iris-len {
+  syntax: '<percentage>';
+  inherits: false;
+  initial-value: 100%;
+}
+
+@property --hn-iris-r {
+  syntax: '<length> | <percentage>';
+  inherits: false;
+  initial-value: 16px;
+}
+
+@utility hn-spoiler {
+  border-radius: var(--hn-radius-xs);
+  padding-inline: 0.125em;
+
+  &[data-hidden] {
+    cursor: pointer;
+    user-select: none;
+  }
+}
+
+@utility hn-spoiler-inner {
+  mask: radial-gradient(
+      circle farthest-corner at var(--hn-iris-x, 50%) var(--hn-iris-y, 50%),
+      black var(--hn-iris-len),
+      transparent calc(var(--hn-iris-len) + var(--hn-iris-r))
+    )
+    no-repeat center;
+  transition:
+    --hn-iris-len var(--hn-duration-base) var(--hn-ease-enter),
+    opacity var(--hn-duration-base) var(--hn-ease-enter),
+    filter var(--hn-duration-base) var(--hn-ease-enter);
+
+  [data-hidden] > & {
+    --hn-iris-len: 0%;
+    --hn-iris-r: 0px;
+    opacity: 0;
+    filter: blur(1px);
+    transition:
+      --hn-iris-len var(--hn-duration-base) var(--hn-ease-enter),
+      opacity var(--hn-duration-base) var(--hn-ease-enter),
+      filter var(--hn-duration-base) var(--hn-ease-enter);
+  }
+}
+
+@utility hn-spoiler-fb {
+  border-radius: var(--hn-radius-xs);
+  padding-inline: 0.125em;
+  transition: background-color var(--hn-duration-fast) var(--hn-ease-enter);
+
+  & > * {
+    transition: filter var(--hn-duration-base) var(--hn-ease-enter);
+  }
+
+  &[data-hidden] {
+    background-color: var(--hn-bg-subtle);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  &[data-hidden] > * {
+    filter: blur(0.35em);
+  }
+}

package/src/styles/tokens.css

@@ -0,0 +1,14 @@
+@import 'overlayscrollbars/overlayscrollbars.css';
+@import './palette.css';
+@import './semantic.css';
+@import './density.css';
+@import './mappings.css';
+@import './motion.css';
+@import './interaction.css';
+@import './typography.css';
+@import './spoiler.css';
+@import './scroll.css';
+@import './base.css';
+
+@source '../components/**/*.vue';
+@source '../components/**/*.variants.ts';

package/src/styles/typography.css

@@ -0,0 +1,259 @@
+@utility tabular {
+  font-variant-numeric: tabular-nums;
+}
+
+@utility tracking-heading {
+  letter-spacing: var(--hn-tracking-tight);
+}
+
+@utility hn-code {
+  font-family: var(--hn-font-mono);
+  font-size: 0.875em;
+  background-color: var(--hn-bg-inset);
+  border-radius: var(--hn-radius-sm);
+  padding: 0.125em 0.375em;
+}
+
+@utility hn-list {
+  padding-inline-start: 1.5em;
+  list-style: disc;
+
+  &:is(ol) {
+    list-style: decimal;
+  }
+
+  & > li + li {
+    margin-block-start: 0.375em;
+  }
+
+  & > li::marker {
+    color: var(--hn-fg-subtle);
+  }
+}
+
+@utility hn-dl {
+  & > dt {
+    font-weight: var(--hn-weight-medium);
+  }
+
+  & > dt:not(:first-child) {
+    margin-block-start: 0.75em;
+  }
+
+  & > dd {
+    margin-inline-start: 0;
+    margin-block-start: 0.25em;
+  }
+}
+
+@utility hn-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: var(--hn-text-sm);
+  line-height: var(--hn-leading-sm);
+  font-variant-numeric: tabular-nums;
+
+  & th {
+    color: var(--hn-fg-muted);
+    font-weight: var(--hn-weight-medium);
+    text-align: start;
+  }
+
+  & th,
+  & td {
+    border-block-end: 1px solid var(--hn-border);
+    padding: 0.5em 0.75em;
+  }
+
+  & caption {
+    caption-side: top;
+    color: var(--hn-fg-muted);
+    text-align: start;
+    padding: 0.75em 0.75em 0.5em;
+  }
+}
+
+@utility hn-pre {
+  font-family: var(--hn-font-mono);
+  background-color: var(--hn-bg-inset);
+  border-radius: var(--hn-radius-lg);
+  padding: 1em 1.25em;
+
+  &:focus-visible,
+  &:has(> [data-overlayscrollbars-initialize]:focus-visible) {
+    outline: var(--hn-focus-ring-width) solid var(--hn-focus-ring);
+    outline-offset: var(--hn-focus-ring-offset);
+  }
+
+  & code {
+    font-family: var(--hn-font-mono);
+    font-size: var(--hn-text-sm);
+    background-color: transparent;
+    border-radius: 0;
+    padding: 0;
+  }
+
+  & code span[style] {
+    color: var(--shiki-light, inherit);
+  }
+
+  .dark & code span[style] {
+    color: var(--shiki-dark, inherit);
+  }
+}
+
+@utility hn-mark {
+  background-color: var(--hn-warning-soft);
+  color: inherit;
+  border-radius: var(--hn-radius-xs);
+  padding-inline: 0.125em;
+}
+
+@utility hn-blockquote {
+  border-inline-start: 2px solid var(--hn-border-strong);
+  padding-inline-start: 1em;
+  color: var(--hn-fg-muted);
+}
+
+@utility hn-kbd {
+  font-family: var(--hn-font-mono);
+  font-size: 0.8125em;
+  background-color: var(--hn-surface);
+  border: 1px solid var(--hn-border);
+  border-block-end-width: 2px;
+  border-radius: var(--hn-radius-sm);
+  padding: 0.0625em 0.375em;
+}
+
+@utility hn-prose {
+  color: var(--hn-fg-default);
+  line-height: 1.7;
+  overflow-wrap: break-word;
+
+  & > :first-child {
+    margin-block-start: 0;
+  }
+
+  & > :last-child {
+    margin-block-end: 0;
+  }
+
+  & p,
+  & ul,
+  & ol,
+  & dl,
+  & blockquote,
+  & pre,
+  & table,
+  & figure {
+    margin-block: 0.75em 0;
+  }
+
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6 {
+    color: var(--hn-fg-default);
+    font-weight: var(--hn-weight-semibold);
+    margin-block: 1.6em 0.6em;
+  }
+
+  & h1 {
+    font-size: var(--hn-text-2xl);
+    line-height: var(--hn-leading-2xl);
+    letter-spacing: var(--hn-tracking-tight);
+  }
+
+  & h2 {
+    font-size: var(--hn-text-xl);
+    line-height: var(--hn-leading-xl);
+    letter-spacing: var(--hn-tracking-tight);
+  }
+
+  & h3 {
+    font-size: var(--hn-text-lg);
+    line-height: var(--hn-leading-lg);
+  }
+
+  & h4 {
+    font-size: var(--hn-text-md);
+    line-height: var(--hn-leading-md);
+  }
+
+  & h5,
+  & h6 {
+    font-size: var(--hn-text-base);
+    line-height: var(--hn-leading-base);
+  }
+
+  & a {
+    color: var(--hn-accent-text);
+    text-decoration-line: underline;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 0.2em;
+    text-decoration-color: color-mix(in oklab, var(--hn-accent-text) 40%, transparent);
+    transition:
+      color var(--hn-duration-fast) var(--hn-ease-enter),
+      text-decoration-color var(--hn-duration-fast) var(--hn-ease-enter);
+  }
+
+  @media (hover: hover) {
+    & a:hover {
+      color: color-mix(in oklab, var(--hn-accent-text) 75%, var(--hn-fg-max));
+      text-decoration-color: currentColor;
+    }
+  }
+
+  & strong {
+    font-weight: var(--hn-weight-semibold);
+  }
+
+  & ul,
+  & ol {
+    @apply hn-list;
+  }
+
+  & dl {
+    @apply hn-dl;
+  }
+
+  & blockquote {
+    @apply hn-blockquote;
+  }
+
+  & code {
+    @apply hn-code;
+  }
+
+  & pre {
+    @apply hn-pre;
+    overflow-x: auto;
+  }
+
+  & hr {
+    border: 0;
+    border-block-start: 1px solid var(--hn-border);
+    margin-block: 2em;
+  }
+
+  & table {
+    @apply hn-table;
+  }
+
+  & img,
+  & video {
+    max-inline-size: 100%;
+    border-radius: var(--hn-radius-lg);
+  }
+
+  & mark {
+    @apply hn-mark;
+  }
+
+  & kbd {
+    @apply hn-kbd;
+  }
+}