@hyalo/angular 0.0.0-stage → 0.1.0

package/styles/parts/field.css

@@ -0,0 +1,36 @@
+/* Controls projected into hy-field. */
+.hy-input {
+  flex: 1;
+  min-inline-size: 0;
+  align-self: stretch;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--hy-ink);
+  font: inherit;
+}
+
+.hy-input::placeholder {
+  color: var(--hy-ink-3);
+  opacity: 1;
+}
+
+textarea.hy-input {
+  padding-block: var(--hy-space-2);
+  min-block-size: 5rem;
+  resize: vertical;
+  line-height: var(--hy-leading);
+}
+
+.hy-input:disabled {
+  cursor: not-allowed;
+}
+
+.hy-field__prefix,
+.hy-field__suffix {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  color: var(--hy-ink-3);
+}

package/styles/parts/glass.css

@@ -0,0 +1,137 @@
+/*
+ * The glass material. Any element with .hy-glass and data-material gets it,
+ * usually through the hyMaterial directive.
+ *
+ * Layers, from top to bottom: a pointer glow (driven by --hy-px / --hy-py
+ * from the tilt directive), a reflection gradient, and the fill itself.
+ *
+ * Materials and thicknesses only change custom properties, never the
+ * `background` itself. That keeps the fallbacks at the bottom, which do set
+ * it, in charge for every material.
+ */
+
+/* Registered so hover and tilt can fade the glow instead of switching it. */
+@property --hy-glow {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+
+.hy-glass {
+  --_fill-top: var(--hy-glass-fill-top);
+  --_fill-bottom: var(--hy-glass-fill-bottom);
+  --_tint: var(--hy-glass-tint);
+  --_fill: linear-gradient(
+    160deg,
+    rgb(var(--_tint) / var(--_fill-top)),
+    rgb(var(--_tint) / var(--_fill-bottom))
+  );
+  /* Thicker glass blurs more; clear glass blurs less. */
+  --_depth: 1;
+  --_clarity: 1;
+  --_blur: calc(var(--hy-glass-blur) * var(--_depth) * var(--_clarity));
+  --_shadow: var(--hy-glass-shadow);
+  /* The backdrop keeps changing, so secondary text gets more contrast. */
+  --hy-ink-2: var(--hy-ink-2-glass);
+  --hy-ink-3: var(--hy-ink-3-glass);
+  background:
+    radial-gradient(
+      circle at var(--hy-px, 50%) var(--hy-py, -30%),
+      rgb(var(--hy-glass-glow) / var(--hy-glow, 0)),
+      transparent 55%
+    ),
+    var(--hy-glass-reflection), var(--_fill);
+  backdrop-filter: blur(var(--_blur)) saturate(var(--hy-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--_blur)) saturate(var(--hy-glass-saturate));
+  border: 1px solid var(--hy-glass-border);
+  box-shadow: var(--hy-glass-edge), var(--_shadow);
+}
+
+/* Thickness: bigger surfaces read as heavier material. */
+.hy-glass[data-thickness='thin'] {
+  --_depth: 0.5;
+  --_shadow: var(--hy-glass-shadow-thin);
+}
+
+.hy-glass[data-thickness='thick'] {
+  --_depth: 1.6;
+  --_shadow: var(--hy-glass-shadow-thick);
+}
+
+.hy-glass[data-material='clear'] {
+  --_fill-top: calc(var(--hy-glass-fill-top) * 0.4);
+  --_fill-bottom: calc(var(--hy-glass-fill-bottom) * 0.3);
+  --_clarity: 0.4;
+}
+
+.hy-glass[data-material='tinted'] {
+  --_fill: linear-gradient(
+    160deg,
+    color-mix(in srgb, var(--hy-primary) 22%, transparent),
+    color-mix(in srgb, var(--hy-primary) 8%, transparent)
+  );
+}
+
+.hy-glass[data-material='solid'] {
+  --_fill: linear-gradient(var(--hy-surface-1), var(--hy-surface-1));
+  --hy-ink-2: inherit;
+  --hy-ink-3: inherit;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+/* No blur support, or the user asked for less transparency: go solid. */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .hy-glass {
+    background: var(--hy-surface-1);
+  }
+}
+
+@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+  .hy-glass {
+    background: var(--hy-surface-1);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    border-color: var(--hy-line-strong);
+  }
+}
+
+@media (forced-colors: active) {
+  .hy-glass {
+    border: 1px solid CanvasText;
+    background: Canvas;
+  }
+}
+
+/*
+ * Wrap the page content in .hy-glass-scope when glass overlays (popovers,
+ * menus, dialogs) open above glass content. Chrome redraws only a rectangle
+ * around a change, grown by each blur it touches. A hover inside a glass
+ * overlay can grow it across the edge of glass below, which is then redrawn
+ * in part and shows a brighter box.
+ *
+ * Any filter gives the content its own layer, so changes in an overlay never
+ * redraw it. It is also a backdrop root, so glass inside blurs only what is
+ * in the scope; painting the page background here keeps that identical.
+ * Like any filter, it is the containing block for fixed elements inside it.
+ */
+.hy-glass-scope {
+  filter: blur(0);
+  background: var(--hy-bg);
+}
+
+/* Overlay panels and backdrops from CDK. */
+.hy-backdrop {
+  background: var(--hy-scrim);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+
+/* Set by HyDialogRef while a dialog or drawer plays its exit animation. */
+.hy-backdrop[data-state='closing'] {
+  opacity: 0;
+}
+
+.hy-backdrop-transparent {
+  background: transparent;
+}

package/styles/parts/motion.css

@@ -0,0 +1,82 @@
+/* Styles for the interaction directives: reveal, tilt, magnetic, ripple. */
+
+[data-hy-reveal] {
+  transition:
+    opacity var(--hy-dur-scene) var(--hy-ease-out) var(--hy-reveal-delay, 0ms),
+    translate var(--hy-dur-scene) var(--hy-ease-out) var(--hy-reveal-delay, 0ms),
+    scale var(--hy-dur-scene) var(--hy-ease-out) var(--hy-reveal-delay, 0ms);
+}
+
+[data-hy-reveal='hidden'] {
+  opacity: 0;
+}
+
+[data-hy-reveal='hidden'][data-hy-reveal-from='up'] {
+  translate: 0 1.5rem;
+}
+
+[data-hy-reveal='hidden'][data-hy-reveal-from='scale'] {
+  scale: 0.96;
+}
+
+@media print {
+  [data-hy-reveal] {
+    opacity: 1 !important;
+    translate: none !important;
+    scale: none !important;
+  }
+}
+
+.hy-tilt {
+  transform: perspective(900px) rotateX(var(--hy-rx, 0deg)) rotateY(var(--hy-ry, 0deg));
+  transform-style: preserve-3d;
+  transition:
+    transform var(--hy-dur-settle) var(--hy-ease-out),
+    --hy-glow var(--hy-dur-settle) var(--hy-ease-out);
+}
+
+.hy-magnetic {
+  translate: var(--hy-mx, 0px) var(--hy-my, 0px);
+  transition: translate var(--hy-dur-settle) var(--hy-ease-out);
+}
+
+/* GSAP already smooths these values, so the CSS transition would lag. */
+.hy-tilt.hy-gsap {
+  transition: --hy-glow var(--hy-dur-settle) var(--hy-ease-out);
+}
+
+.hy-magnetic.hy-gsap {
+  transition: none;
+}
+
+.hy-ripple-host {
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+.hy-ripple {
+  position: absolute;
+  /* Pointer coordinates are physical, so the ripple is placed physically. */
+  top: calc(var(--hy-ripple-y) - var(--hy-ripple-size) / 2);
+  left: calc(var(--hy-ripple-x) - var(--hy-ripple-size) / 2); /* physical-ok */
+  inline-size: var(--hy-ripple-size);
+  block-size: var(--hy-ripple-size);
+  border-radius: 50%;
+  background: radial-gradient(closest-side, currentColor, transparent);
+  opacity: 0;
+  pointer-events: none;
+  z-index: -1;
+  animation: hy-ripple var(--hy-dur-scene) var(--hy-ease-out);
+}
+
+@keyframes hy-ripple {
+  from {
+    scale: 0;
+    opacity: 0.18;
+  }
+  to {
+    scale: 1;
+    opacity: 0;
+  }
+}

package/styles/parts/navbar.css

@@ -0,0 +1,55 @@
+/*
+ * Navbar slots. Links and brand are projected content, so their styles are
+ * global. The collapse rule uses the navbar's container query.
+ */
+.hy-navbar__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--hy-space-2);
+  color: var(--hy-ink);
+  font-weight: 650;
+  font-size: var(--hy-step-1);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.hy-navbar__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--hy-space-2);
+}
+
+.hy-navbar__links > a {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 2.25rem;
+  padding-inline: var(--hy-space-3);
+  border-radius: var(--hy-navbar-link-radius, var(--hy-radius-pill));
+  color: var(--hy-ink-2);
+  font-weight: 520;
+  text-decoration: none;
+  transition:
+    color var(--hy-dur-quick) var(--hy-ease-out),
+    background-color var(--hy-dur-quick) var(--hy-ease-out);
+}
+
+.hy-navbar__links > a:hover,
+.hy-navbar__links > a[aria-current] {
+  color: var(--hy-ink);
+  background-color: color-mix(in srgb, var(--hy-ink) 7%, transparent);
+}
+
+.hy-navbar__links > a:focus-visible {
+  outline: none;
+  box-shadow: var(--hy-focus-ring);
+}
+
+@container hy-navbar (max-width: 48rem) {
+  .hy-navbar__actions {
+    margin-inline-start: auto;
+  }
+
+  .hy-navbar__links > a {
+    min-block-size: 2.75rem;
+  }
+}

package/styles/parts/popover.css

@@ -0,0 +1,27 @@
+/* Tooltip and popover panels. Their enter and exit live in presence.css. */
+
+.hy-tooltip {
+  display: block;
+  max-inline-size: 18rem;
+  padding: var(--hy-space-1) var(--hy-space-3);
+  border-radius: var(--hy-tooltip-radius, var(--hy-radius-s));
+  background: var(--hy-tooltip-bg, color-mix(in srgb, var(--hy-ink) 92%, transparent));
+  color: var(--hy-tooltip-ink, var(--hy-bg));
+  font-size: var(--hy-step--1);
+  letter-spacing: var(--hy-tracking-small);
+  line-height: 1.4;
+  box-shadow: 0 6px 20px -8px rgb(0 0 0 / 0.4);
+}
+
+.hy-tooltip-pane {
+  z-index: var(--hy-z-tooltip);
+}
+
+.hy-popover {
+  min-inline-size: 12rem;
+  max-inline-size: min(22rem, 100vw - 1.5rem);
+  padding: var(--hy-popover-padding, var(--hy-space-4));
+  border-radius: var(--hy-popover-radius, var(--hy-radius-m));
+  color: var(--hy-ink);
+  outline: none;
+}

package/styles/parts/presence.css

@@ -0,0 +1,55 @@
+/*
+ * Tooltip, popover and select panels render in CDK overlays. They enter and
+ * leave through data-state (see HyPresence): `closed` and `closing` are the
+ * hidden pose, `open` the shown one. CDK sets transform-origin on each panel
+ * to the side that faces its trigger, so the scale grows out of the trigger.
+ *
+ * Transitions rather than keyframes, so a panel reopened mid-exit turns
+ * around from where it is. With reduced motion only the fade is left.
+ */
+:is(.hy-tooltip, .hy-popover, .hy-select__panel) {
+  transition:
+    opacity var(--hy-dur-enter) var(--hy-ease-out),
+    scale var(--hy-dur-enter) var(--hy-ease-out);
+}
+
+:is(.hy-tooltip, .hy-popover, .hy-select__panel):is([data-state='closed'], [data-state='closing']) {
+  opacity: 0;
+  scale: calc(1 - 0.06 * var(--hy-move));
+}
+
+:is(.hy-popover, .hy-select__panel) {
+  transition:
+    opacity var(--hy-dur-enter) var(--hy-ease-out),
+    scale var(--hy-dur-enter) var(--hy-ease-out),
+    backdrop-filter var(--hy-dur-enter) var(--hy-ease-out),
+    -webkit-backdrop-filter var(--hy-dur-enter) var(--hy-ease-out);
+}
+
+/* The glass materialises: the blur grows in with the panel. */
+:is(.hy-popover, .hy-select__panel):is([data-state='closed'], [data-state='closing']) {
+  backdrop-filter: blur(0) saturate(100%);
+  -webkit-backdrop-filter: blur(0) saturate(100%);
+}
+
+/*
+ * CDK can attach a panel before its overlay is rendered, so the closed pose
+ * set first is never seen. The starting style gives the open state a pose
+ * to transition from on its first frame.
+ */
+@starting-style {
+  :is(.hy-tooltip, .hy-popover, .hy-select__panel)[data-state='open'] {
+    opacity: 0;
+    scale: calc(1 - 0.06 * var(--hy-move));
+  }
+
+  :is(.hy-popover, .hy-select__panel)[data-state='open'] {
+    backdrop-filter: blur(0) saturate(100%);
+    -webkit-backdrop-filter: blur(0) saturate(100%);
+  }
+}
+
+:is(.hy-tooltip, .hy-popover, .hy-select__panel)[data-state='closing'] {
+  transition-duration: var(--hy-dur-exit);
+  transition-timing-function: var(--hy-ease-inout);
+}

package/styles/parts/reset.css

@@ -0,0 +1,42 @@
+/* A small reset. It sits in the lowest layer so any app style wins over it. */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--hy-bg);
+  color: var(--hy-ink);
+  font-family: var(--hy-font-body);
+  font-size: var(--hy-step-0);
+  line-height: var(--hy-leading);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+:where(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--hy-font-display);
+  line-height: var(--hy-leading-tight);
+  text-wrap: balance;
+}
+
+:where(p) {
+  text-wrap: pretty;
+}
+
+:where(img, svg, video, canvas) {
+  display: block;
+  max-inline-size: 100%;
+}
+
+:where(button, input, select, textarea) {
+  font: inherit;
+  color: inherit;
+}
+
+:where(:focus-visible) {
+  outline: 2px solid var(--hy-primary);
+  outline-offset: 2px;
+}

package/styles/parts/select.css

@@ -0,0 +1,46 @@
+/* The select dropdown renders in a CDK overlay, outside the component. */
+.hy-select__panel {
+  /* The pane is a flex row sized to the trigger; fill it. */
+  flex: 1;
+  max-block-size: min(20rem, 60vh);
+  overflow-y: auto;
+  padding: var(--hy-space-1);
+  border-radius: var(--hy-select-panel-radius, var(--hy-radius-m));
+  outline: none;
+}
+
+.hy-select__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--hy-space-3);
+  min-block-size: 2.5rem;
+  padding-inline: var(--hy-space-3);
+  border-radius: var(--hy-select-option-radius, var(--hy-radius-s));
+  color: var(--hy-ink);
+  cursor: pointer;
+}
+
+.hy-select__option[data-active='true'] {
+  background: color-mix(in srgb, var(--hy-ink) 8%, transparent);
+  outline: 2px solid var(--hy-primary);
+  outline-offset: -2px;
+}
+
+.hy-select__option[aria-selected='true'] {
+  font-weight: 600;
+}
+
+.hy-select__check {
+  visibility: hidden;
+  color: var(--hy-primary);
+}
+
+.hy-select__option[aria-selected='true'] .hy-select__check {
+  visibility: visible;
+}
+
+.hy-select__option[aria-disabled='true'] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}

package/styles/parts/themes.css

@@ -0,0 +1,105 @@
+/*
+ * Dark theme ("obsidian"). Set data-hy-theme="dark" on <html> to force it,
+ * data-hy-theme="light" to opt out, or leave it unset to follow the OS.
+ * The same values are repeated for both selectors because CSS has no mixins.
+ */
+:root {
+  color-scheme: light;
+}
+
+:root[data-hy-theme='dark'],
+.hy-theme-dark {
+  color-scheme: dark;
+  --hy-bg: #0a0c11;
+  --hy-surface-1: #13161d;
+  --hy-surface-2: #1a1e26;
+  --hy-surface-3: #222731;
+  --hy-surface-4: #2c323e;
+  --hy-ink: #eef1f6;
+  --hy-ink-2: #b9c2ce;
+  --hy-ink-3: #8f99a8;
+  --hy-ink-2-glass: #cdd4de;
+  --hy-ink-3-glass: #a7b1be;
+  --hy-line: rgb(238 241 246 / 0.12);
+  --hy-line-strong: rgb(238 241 246 / 0.26);
+  --hy-primary: #8e9cff;
+  --hy-primary-hover: #a5b0ff;
+  --hy-primary-ink: #0a0c11;
+  --hy-primary-wash: rgb(142 156 255 / 0.16);
+  --hy-success: #4fd1a5;
+  --hy-success-wash: rgb(79 209 165 / 0.14);
+  --hy-warning: #f2b45a;
+  --hy-warning-wash: rgb(242 180 90 / 0.14);
+  --hy-danger: #ff7a70;
+  --hy-danger-ink: #0a0c11;
+  --hy-danger-wash: rgb(255 122 112 / 0.15);
+  --hy-scrim: rgb(0 0 0 / 0.55);
+  --hy-glass-tint: 255 255 255;
+  --hy-glass-fill-top: 0.12;
+  --hy-glass-fill-bottom: 0.06;
+  --hy-glass-edge: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 0 0 1px rgb(255 255 255 / 0.07);
+  --hy-glass-border: rgb(255 255 255 / 0.08);
+  --hy-glass-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px -16px rgb(0 0 0 / 0.6);
+  --hy-glass-shadow-thin: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 16px -8px rgb(0 0 0 / 0.5);
+  --hy-glass-shadow-thick: 0 2px 4px rgb(0 0 0 / 0.3), 0 28px 72px -20px rgb(0 0 0 / 0.7);
+  --hy-glass-reflection: linear-gradient(
+    to bottom,
+    rgb(255 255 255 / 0.08),
+    rgb(255 255 255 / 0) 40%
+  );
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-hy-theme='light']) {
+    color-scheme: dark;
+    --hy-bg: #0a0c11;
+    --hy-surface-1: #13161d;
+    --hy-surface-2: #1a1e26;
+    --hy-surface-3: #222731;
+    --hy-surface-4: #2c323e;
+    --hy-ink: #eef1f6;
+    --hy-ink-2: #b9c2ce;
+    --hy-ink-3: #8f99a8;
+    --hy-ink-2-glass: #cdd4de;
+    --hy-ink-3-glass: #a7b1be;
+    --hy-line: rgb(238 241 246 / 0.12);
+    --hy-line-strong: rgb(238 241 246 / 0.26);
+    --hy-primary: #8e9cff;
+    --hy-primary-hover: #a5b0ff;
+    --hy-primary-ink: #0a0c11;
+    --hy-primary-wash: rgb(142 156 255 / 0.16);
+    --hy-success: #4fd1a5;
+    --hy-success-wash: rgb(79 209 165 / 0.14);
+    --hy-warning: #f2b45a;
+    --hy-warning-wash: rgb(242 180 90 / 0.14);
+    --hy-danger: #ff7a70;
+    --hy-danger-ink: #0a0c11;
+    --hy-danger-wash: rgb(255 122 112 / 0.15);
+    --hy-scrim: rgb(0 0 0 / 0.55);
+    --hy-glass-tint: 255 255 255;
+    --hy-glass-fill-top: 0.12;
+    --hy-glass-fill-bottom: 0.06;
+    --hy-glass-edge: inset 0 1px 0 rgb(255 255 255 / 0.16), inset 0 0 0 1px rgb(255 255 255 / 0.07);
+    --hy-glass-border: rgb(255 255 255 / 0.08);
+    --hy-glass-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 16px 40px -16px rgb(0 0 0 / 0.6);
+    --hy-glass-shadow-thin: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 16px -8px rgb(0 0 0 / 0.5);
+    --hy-glass-shadow-thick: 0 2px 4px rgb(0 0 0 / 0.3), 0 28px 72px -20px rgb(0 0 0 / 0.7);
+    --hy-glass-reflection: linear-gradient(
+      to bottom,
+      rgb(255 255 255 / 0.08),
+      rgb(255 255 255 / 0) 40%
+    );
+  }
+}
+
+/*
+ * Higher contrast: stronger lines, no see-through surfaces. The selector has
+ * the same weight as the dark theme selectors above, so it wins in both themes.
+ */
+@media (prefers-contrast: more) {
+  :root:is([data-hy-theme], :not([data-hy-theme])),
+  .hy-theme-dark {
+    --hy-line: var(--hy-line-strong);
+    --hy-ink-3: var(--hy-ink-2);
+  }
+}