@terrafirmagreg-team/ui 0.0.0-stage → 1.2.0

package/styles.css

@@ -0,0 +1,430 @@
+@import 'flag-icons/css/flag-icons.min.css';
+@import '@xyflow/react/dist/style.css';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --ease-expo: cubic-bezier(0.22, 1, 0.36, 1);
+  --text-3xs: 0.5625rem;
+  --text-2xs: 0.625rem;
+  --text-nav-title: 0.9375rem;
+
+  --color-background: hsl(0, 0%, 96%);
+  --color-foreground: hsl(0, 0%, 3.9%);
+  --color-card: hsl(0, 0%, 94.7%);
+  --color-card-foreground: hsl(0, 0%, 3.9%);
+  --color-popover: hsl(0, 0%, 98%);
+  --color-popover-foreground: hsl(0, 0%, 15.1%);
+  --color-primary: hsl(0, 0%, 9%);
+  --color-primary-foreground: hsl(0, 0%, 98%);
+  --color-secondary: hsl(0, 0%, 93.1%);
+  --color-secondary-foreground: hsl(0, 0%, 9%);
+  --color-muted: hsl(0, 0%, 96.1%);
+  --color-muted-foreground: hsl(0, 0%, 45.1%);
+  --color-accent: hsla(0, 0%, 82%, 50%);
+  --color-accent-foreground: hsl(0, 0%, 9%);
+  --color-destructive: oklch(63.7% 0.237 25.331);
+  --color-destructive-foreground: hsl(0, 0%, 98%);
+  --color-border: hsla(0, 0%, 80%, 50%);
+  --color-input: hsla(0, 0%, 80%, 50%);
+  --color-ring: hsl(0, 0%, 63.9%);
+  --color-overlay: hsla(0, 0%, 0%, 0.2);
+
+  --color-sidebar: hsl(0, 0%, 94.7%);
+  --color-sidebar-foreground: hsl(0, 0%, 3.9%);
+  --color-sidebar-primary: hsl(0, 0%, 9%);
+  --color-sidebar-primary-foreground: hsl(0, 0%, 98%);
+  --color-sidebar-accent: hsla(0, 0%, 82%, 50%);
+  --color-sidebar-accent-foreground: hsl(0, 0%, 9%);
+  --color-sidebar-border: hsla(0, 0%, 80%, 50%);
+  --color-sidebar-ring: hsl(0, 0%, 63.9%);
+
+  --color-info: oklch(62.3% 0.214 259.815);
+  --color-warning: oklch(76.9% 0.188 70.08);
+  --color-error: oklch(63.7% 0.237 25.331);
+  --color-success: oklch(72.3% 0.219 149.579);
+  --color-idea: oklch(70.5% 0.209 60.849);
+  --color-diff-remove: rgba(200, 10, 100, 0.12);
+  --color-diff-remove-symbol: rgb(230, 10, 100);
+  --color-diff-add: rgba(14, 180, 100, 0.1);
+  --color-diff-add-symbol: rgb(10, 200, 100);
+
+  --color-chart-1: oklch(0.646 0.222 41.116);
+  --color-chart-2: oklch(0.6 0.118 184.704);
+  --color-chart-3: oklch(0.398 0.07 227.392);
+  --color-chart-4: oklch(0.828 0.189 84.429);
+  --color-chart-5: oklch(0.769 0.188 70.08);
+
+  --color-float: hsl(0, 0%, 98%);
+}
+
+.dark {
+  --color-background: hsl(0, 0%, 7.04%);
+  --color-foreground: hsl(0, 0%, 92%);
+  --color-card: hsl(0, 0%, 9.8%);
+  --color-card-foreground: hsl(0, 0%, 98%);
+  --color-popover: hsl(0, 0%, 11.6%);
+  --color-popover-foreground: hsl(0, 0%, 86.9%);
+  --color-primary: hsl(0, 0%, 98%);
+  --color-primary-foreground: hsl(0, 0%, 9%);
+  --color-secondary: hsl(0, 0%, 12.9%);
+  --color-secondary-foreground: hsl(0, 0%, 92%);
+  --color-muted: hsl(0, 0%, 12.9%);
+  --color-muted-foreground: hsla(0, 0%, 70%, 0.8);
+  --color-accent: hsla(0, 0%, 40.9%, 30%);
+  --color-accent-foreground: hsl(0, 0%, 90%);
+  --color-destructive: oklch(63.7% 0.237 25.331);
+  --color-destructive-foreground: hsl(0, 0%, 9%);
+  --color-border: hsla(0, 0%, 40%, 20%);
+  --color-input: hsla(0, 0%, 40%, 20%);
+  --color-ring: hsl(0, 0%, 54.9%);
+
+  --color-sidebar: hsl(0, 0%, 9.8%);
+  --color-sidebar-foreground: hsl(0, 0%, 98%);
+  --color-sidebar-primary: hsl(0, 0%, 98%);
+  --color-sidebar-primary-foreground: hsl(0, 0%, 9%);
+  --color-sidebar-accent: hsla(0, 0%, 40.9%, 30%);
+  --color-sidebar-accent-foreground: hsl(0, 0%, 90%);
+  --color-sidebar-border: hsla(0, 0%, 40%, 20%);
+  --color-sidebar-ring: hsl(0, 0%, 54.9%);
+
+  --color-chart-1: oklch(0.488 0.243 264.376);
+  --color-chart-2: oklch(0.696 0.17 162.48);
+  --color-chart-3: oklch(0.769 0.188 70.08);
+  --color-chart-4: oklch(0.627 0.265 303.9);
+  --color-chart-5: oklch(0.645 0.246 16.439);
+
+  --color-float: hsl(0, 0%, 11.6%);
+}
+
+:root {
+  --spotlight-under-bg-color: color-mix(
+    in srgb,
+    var(--color-primary) 10%,
+    transparent
+  );
+}
+
+html {
+  scrollbar-gutter: stable;
+}
+
+html:has(.viewport-shell) {
+  scrollbar-gutter: auto;
+}
+
+[data-slot='command-list'] {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) transparent;
+}
+[data-slot='command-list']::-webkit-scrollbar {
+  width: 10px;
+}
+[data-slot='command-list']::-webkit-scrollbar-thumb {
+  border: 3px solid transparent;
+  border-radius: 9999px;
+  background: var(--color-border) padding-box;
+}
+
+html > body[data-scroll-locked] {
+  margin-right: 0px !important;
+  --removed-body-scroll-bar-size: 0px !important;
+}
+
+[data-slot='float-bar'] > :not(:first-child) {
+  position: relative;
+}
+[data-slot='float-bar'] > :not(:first-child)::before {
+  content: '';
+  position: absolute;
+  inset-inline-start: 0;
+  top: 50%;
+  translate: 0 -50%;
+  height: 45%;
+  width: 1px;
+  background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
+}
+
+.marquee {
+  -webkit-mask-image: linear-gradient(
+    to right,
+    black calc(100% - 12px),
+    transparent
+  );
+  mask-image: linear-gradient(
+    to right,
+    black calc(100% - 12px),
+    transparent
+  );
+}
+
+.marquee-run > .marquee-inner {
+  animation: marquee var(--marquee-duration, 2s) ease-in-out 0.5s
+    infinite alternate;
+}
+
+@keyframes marquee {
+  to {
+    transform: translateX(var(--marquee-x, 0px));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .marquee-run > .marquee-inner {
+    animation: none;
+  }
+}
+
+[data-slot='tooltip-content'] {
+  max-width: max(16rem, 50vw);
+  background-color: var(--color-popover);
+  color: var(--color-popover-foreground);
+  border-radius: 0.5rem;
+  box-shadow:
+    0 0 0 1px color-mix(in oklab, var(--color-foreground) 10%, transparent),
+    0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
+}
+
+[data-slot='tooltip-content'] > .rotate-45 {
+  background-color: var(--color-popover);
+  fill: var(--color-popover);
+}
+
+*:has(> [data-slot='tooltip-content']) {
+  pointer-events: none;
+}
+
+.viewer-surface {
+  background: var(--color-background);
+}
+
+.viewer-surface:fullscreen {
+  width: 100% !important;
+}
+
+.viewer-surface:fullscreen > .viewer-scene {
+  height: 100% !important;
+}
+
+.viewer-scene {
+  background-color: var(--color-background);
+}
+
+.viewer-scene.viewer-dots {
+  background-image: radial-gradient(
+    circle,
+    color-mix(in oklab, var(--color-muted-foreground) 30%, transparent) 1px,
+    transparent 1px
+  );
+  background-size: 16px 16px;
+}
+
+.viewer-surface canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  touch-action: none;
+}
+
+:fullscreen {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  background: var(--color-background);
+}
+
+:fullscreen .viewer-scene {
+  height: 100%;
+}
+
+.viewer-fallback-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  background: var(--color-background);
+}
+
+.viewer-fallback-fullscreen .viewer-scene {
+  height: 100%;
+}
+
+.chevron-edge__stroke {
+  fill: none;
+  vector-effect: non-scaling-stroke;
+  stroke-width: 2.25;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+
+.chevron-edge__base {
+  stroke-width: 1.75;
+  stroke: color-mix(
+    in oklab,
+    var(--color-foreground) 44%,
+    var(--color-muted-foreground)
+  );
+}
+
+.chevron-edge--outgoing .chevron-edge__base {
+  stroke: color-mix(in oklab, #00c8c8 40%, transparent);
+}
+
+.chevron-edge--incoming .chevron-edge__base {
+  stroke: color-mix(in oklab, #c8c800 40%, transparent);
+}
+
+.chevron-edge__stroke--main {
+  stroke: color-mix(
+    in oklab,
+    var(--color-foreground) 38%,
+    var(--color-muted-foreground)
+  );
+}
+
+.chevron-edge__tick {
+  offset-rotate: auto;
+  offset-distance: var(--chevron-o);
+}
+
+.chevron-edge--incoming .chevron-edge__tick:not(:last-child),
+.chevron-edge--outgoing .chevron-edge__tick:not(:last-child) {
+  animation: chevron-flow 0.5s linear infinite;
+}
+
+@keyframes chevron-flow {
+  to {
+    offset-distance: calc(var(--chevron-o) + 10px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chevron-edge__tick {
+    animation: none;
+  }
+
+  .chevron-edge__stroke--main {
+    opacity: 0.55;
+  }
+}
+
+.chevron-edge--outgoing .chevron-edge__stroke--main {
+  stroke: #00c8c8;
+}
+
+.chevron-edge--incoming .chevron-edge__stroke--main {
+  stroke: #c8c800;
+}
+
+.chevron-edge--dim {
+  opacity: 0.3;
+}
+
+.chevron-edge__label {
+  position: absolute;
+  pointer-events: all;
+  z-index: 10;
+}
+
+[data-slot='left-sidebar'] ul,
+[data-slot='left-sidebar'] li {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+:root {
+  --z-overlay: 1100;
+}
+
+@utility z-overlay {
+  z-index: var(--z-overlay);
+}
+
+@utility scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border) transparent;
+
+  &::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: var(--color-border);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-corner {
+    display: none;
+  }
+}
+
+@utility no-scrollbar {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility scrollbar-none {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility scroll-fade-x {
+  mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
+}
+
+@utility scroll-fade-b {
+  mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent);
+}
+
+@layer base {
+  a[href],
+  button,
+  summary,
+  select,
+  label[for],
+  label:has(> input[type='checkbox'], > input[type='radio']),
+  [role='button'],
+  [role='link'],
+  [role='tab'],
+  [role='menuitem'],
+  [role='option'],
+  [role='switch'],
+  input[type='checkbox'],
+  input[type='radio'],
+  input[type='file'],
+  input[type='submit'],
+  input[type='button'],
+  input[type='reset'],
+  input[type='range'],
+  input[type='color'] {
+    cursor: pointer;
+  }
+
+  :disabled,
+  [aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.