phosphor-ui 0.3.39-dev.0

package/dist/styles/fonts.css

@@ -0,0 +1,73 @@
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");
+
+@font-face {
+  font-family: "VCR OSD Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/vcr_osd_mono/VCR_OSD_MONO_1.001.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Bender";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("./fonts/bender/Bender-Light.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Bender";
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("./fonts/bender/Bender-LightItalic.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Bender";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/bender/Bender.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Bender";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("./fonts/bender/Bender-Italic.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Bender";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("./fonts/bender/Bender-Bold.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Bender";
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("./fonts/bender/Bender-BoldItalic.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Bender";
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("./fonts/bender/Bender-Black.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Bender";
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url("./fonts/bender/Bender-BlackItalic.woff") format("woff");
+}

package/dist/styles/global.css

@@ -0,0 +1,486 @@
+html,
+body {
+  background: var(--pho-color-background);
+  color: var(--pho-color-text);
+  font-family: var(--pho-font-body);
+  font-size: var(--pho-type-body-size);
+  line-height: var(--pho-line-prose);
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  cursor: var(--pho-cursor-default);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+a {
+  color: var(--pho-color-link);
+  text-shadow: none;
+}
+
+a:hover {
+  color: var(--pho-color-link-hover);
+}
+
+a,
+button,
+[role="button"],
+summary,
+select {
+  cursor: var(--pho-cursor-pointer);
+}
+
+input,
+textarea,
+[contenteditable="true"],
+[role="textbox"] {
+  cursor: var(--pho-cursor-text);
+}
+
+button:disabled,
+[aria-disabled="true"],
+select:disabled,
+input:disabled,
+textarea:disabled {
+  cursor: var(--pho-cursor-disabled);
+}
+
+code,
+pre,
+kbd,
+samp {
+  font-family: var(--pho-font-code);
+  background: var(--code-bg);
+  color: var(--code-var);
+}
+
+::selection {
+  background: var(--pho-color-selection-bg);
+  color: var(--pho-color-selection-text);
+  text-shadow: none;
+}
+
+/* ── unified phosphor scrollbar ──────────────────────────── */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--pho-scrollbar-thumb) var(--pho-scrollbar-track);
+}
+
+*::-webkit-scrollbar {
+  width: var(--pho-scrollbar-size);
+  height: var(--pho-scrollbar-size);
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--pho-scrollbar-track);
+  border-left: var(--scrollbar-track-border);
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--pho-scrollbar-thumb);
+  border: 1px solid var(--pho-scrollbar-track);
+  border-radius: 0;
+  box-shadow: inset 0 0 0 1px var(--scrollbar-thumb-edge);
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--pho-scrollbar-thumb-hover);
+  box-shadow:
+    inset 0 0 0 1px var(--pho-color-primary),
+    var(--scrollbar-glow);
+}
+
+*::-webkit-scrollbar-thumb:active {
+  background: var(--pho-scrollbar-thumb-active);
+  box-shadow: 0 0 8px var(--pho-color-primary);
+}
+
+*::-webkit-scrollbar-corner {
+  background: var(--pho-scrollbar-track);
+}
+
+.pho-page-enter {
+  animation: phoPageEnter 360ms ease-out backwards;
+}
+.pho-fade-up {
+  animation: phoFadeUp 420ms ease-out backwards;
+}
+.pho-stagger > * {
+  animation: phoFadeUp 480ms ease-out backwards;
+}
+.pho-stagger > *:nth-child(1) {
+  animation-delay: 40ms;
+}
+.pho-stagger > *:nth-child(2) {
+  animation-delay: 120ms;
+}
+.pho-stagger > *:nth-child(3) {
+  animation-delay: 200ms;
+}
+.pho-stagger > *:nth-child(4) {
+  animation-delay: 280ms;
+}
+.pho-stagger > *:nth-child(5) {
+  animation-delay: 360ms;
+}
+.pho-stagger > *:nth-child(6) {
+  animation-delay: 440ms;
+}
+.pho-stagger > *:nth-child(n + 7) {
+  animation-delay: 520ms;
+}
+
+.pho-flicker-in {
+  animation: phoFlickerIn 460ms steps(6) backwards;
+}
+.pho-blink::after {
+  content: "";
+  display: inline-block;
+  width: 0.58em;
+  height: 1em;
+  margin-left: var(--pho-caret-gap);
+  vertical-align: -0.12em;
+  background: var(--pho-color-primary);
+  box-shadow: var(--pho-caret-glow);
+  animation: phoBlink var(--pho-caret-blink-duration) step-end infinite;
+}
+
+.pho-phosphor-glow {
+  text-shadow: var(--pho-glow-primary);
+}
+
+.pho-phosphor-glow-soft {
+  text-shadow: var(--pho-glow-primary-soft);
+}
+
+.pho-crt,
+.pho-scanlines,
+.pho-noise,
+.pho-vignette {
+  position: relative;
+}
+
+.pho-crt::before,
+.pho-scanlines::before,
+.pho-crt::after,
+.pho-noise::before,
+.pho-vignette::after {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+}
+
+.pho-crt::before,
+.pho-scanlines::before {
+  z-index: var(--pho-z-fx-noise);
+  background:
+    linear-gradient(rgba(182, 255, 206, 0.045) 50%, rgba(1, 6, 4, 0.18) 50%),
+    linear-gradient(90deg, rgba(44, 255, 122, 0.035), rgba(98, 255, 154, 0.02), rgba(44, 255, 122, 0.035));
+  background-size: 100% var(--pho-scanline-size), 6px 100%;
+  mix-blend-mode: screen;
+  opacity: var(--pho-scanline-opacity);
+}
+
+.pho-terminal-focus:focus-visible {
+  outline: var(--pho-focus-ring);
+  outline-offset: var(--pho-focus-offset);
+  box-shadow: var(--pho-focus-glow);
+}
+
+.pho-crt::before {
+  animation: phosphorShellFlicker 5.6s steps(8) infinite;
+}
+
+.pho-crt::after,
+.pho-vignette::after {
+  z-index: var(--pho-z-fx-vignette);
+  background:
+    radial-gradient(circle at center, transparent 45%, rgba(1, 6, 4, 0.42) 100%),
+    linear-gradient(rgba(44, 255, 122, 0.08), transparent 18%, transparent 82%, rgba(44, 255, 122, 0.08));
+  box-shadow: inset 0 0 42px rgba(1, 6, 4, 0.74);
+}
+
+.pho-noise::before {
+  z-index: var(--pho-z-fx-noise);
+  opacity: 0.16;
+  background-image:
+    radial-gradient(circle at 18% 24%, rgba(182, 255, 206, 0.7) 0 1px, transparent 1.5px),
+    radial-gradient(circle at 78% 34%, rgba(44, 255, 122, 0.45) 0 1px, transparent 1.5px),
+    radial-gradient(circle at 42% 74%, rgba(98, 255, 154, 0.42) 0 1px, transparent 1.5px);
+  background-size: 31px 29px, 43px 41px, 67px 61px;
+  animation: phosphorNoiseShift 620ms steps(3) infinite;
+  mix-blend-mode: screen;
+}
+
+.pho-hsync {
+  animation: phosphorHsync 8s steps(1) infinite;
+}
+
+.pho-bootline {
+  animation: phosphorBootline 520ms steps(16) backwards;
+}
+
+.pho-led-pulse {
+  animation: phosphorLedPulse 1.4s steps(2) infinite;
+}
+
+.pho-hud-blink {
+  animation: phosphorHudBlink 1.1s steps(2) infinite;
+}
+
+.pho-hud-pulse {
+  animation: phosphorHudPulse 1.8s ease-in-out infinite;
+}
+
+.pho-geiger-tick {
+  animation: phosphorGeigerTick 2.6s steps(1) infinite;
+}
+
+@keyframes phoPageEnter {
+  0% {
+    opacity: 0;
+    transform: translateY(6px);
+    filter: blur(2px) brightness(1.6);
+  }
+  60% {
+    filter: blur(0) brightness(1.1);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+    filter: none;
+  }
+}
+@keyframes phoFadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes phoFlickerIn {
+  0% {
+    opacity: 0;
+  }
+  20% {
+    opacity: var(--pho-flicker-opacity-min);
+  }
+  40% {
+    opacity: 0.46;
+  }
+  60% {
+    opacity: 0.96;
+  }
+  80% {
+    opacity: 0.74;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes phoBlink {
+  0%,
+  54% {
+    opacity: 1;
+  }
+  55%,
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes phosphorBlink {
+  0%,
+  49% {
+    opacity: 1;
+  }
+  50%,
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes phosphorLedPulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+@keyframes phosphorHudBlink {
+  0%,
+  60% {
+    opacity: 1;
+  }
+  61%,
+  100% {
+    opacity: 0.18;
+  }
+}
+@keyframes phosphorHudPulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.45;
+    transform: scale(0.85);
+  }
+}
+@keyframes phosphorTapeRoll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+@keyframes phosphorNoiseShift {
+  0% {
+    transform: translate(0, 0);
+  }
+  20% {
+    transform: translate(-3px, 2px);
+  }
+  40% {
+    transform: translate(2px, -2px);
+  }
+  60% {
+    transform: translate(-2px, -1px);
+  }
+  80% {
+    transform: translate(1px, 3px);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+@keyframes phosphorGeigerTick {
+  0%,
+  70% {
+    opacity: 0;
+  }
+  71%,
+  72% {
+    opacity: 0.75;
+  }
+  73%,
+  81% {
+    opacity: 0;
+  }
+  82% {
+    opacity: 0.4;
+  }
+  83%,
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes phosphorHsync {
+  0%,
+  94%,
+  100% {
+    transform: translateX(0);
+  }
+  95% {
+    transform: translateX(-2px);
+    filter: blur(0.3px);
+  }
+  96% {
+    transform: translateX(2px);
+    filter: blur(0.4px);
+  }
+  97% {
+    transform: translateX(-1px);
+    filter: blur(0.15px);
+  }
+}
+@keyframes phosphorHeroBreathe {
+  0%,
+  100% {
+    opacity: 0.95;
+  }
+  50% {
+    opacity: 1;
+    text-shadow:
+      0 0 1px var(--pho-color-primary),
+      0 0 14px rgba(44, 255, 122, 0.85),
+      0 0 28px rgba(44, 255, 122, 0.4);
+  }
+}
+@keyframes phosphorHeroScan {
+  0% {
+    transform: translateY(-120%);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(820%);
+    opacity: 0;
+  }
+}
+@keyframes phosphorBootline {
+  from {
+    clip-path: inset(0 100% 0 0);
+    opacity: 0;
+  }
+  to {
+    clip-path: inset(0 0 0 0);
+    opacity: 1;
+  }
+}
+@keyframes phosphorShellFlicker {
+  0%,
+  100% {
+    opacity: 0.14;
+    transform: translateY(0);
+  }
+  44% {
+    opacity: 0.1;
+  }
+  48% {
+    opacity: 0.18;
+    transform: translateY(0.15px);
+  }
+  52% {
+    opacity: 0.2;
+  }
+  56% {
+    opacity: 0.12;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pho-page-enter,
+  .pho-fade-up,
+  .pho-stagger > *,
+  .pho-flicker-in,
+  .pho-blink::after,
+  .pho-crt::before,
+  .pho-noise::before,
+  .pho-hsync,
+  .pho-bootline,
+  .pho-led-pulse,
+  .pho-hud-blink,
+  .pho-hud-pulse,
+  .pho-geiger-tick {
+    animation: none !important;
+  }
+}

package/dist/styles/phosphor.css

@@ -0,0 +1,5 @@
+@import "./fonts.css";
+@import "./tokens.css";
+@import "./typography.css";
+@import "./global.css";
+@import "./components.css";