@umodeapporg/ui 0.0.0-canary.ca10e69

package/src/assets/styles/base.css

@@ -0,0 +1,585 @@
+@import './theme.css';
+
+/* Self-hosted on purpose: served from the host's own origin, the fonts survive networks,
+   DNS filters and extensions that block the Google Fonts domains. Without the icon face
+   every MaterialSymbol renders its ligature name as plain text. */
+@font-face {
+  font-family: 'Material Symbols Outlined';
+  font-style: normal;
+  font-weight: 100 700;
+  font-display: block;
+  src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
+    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../fonts/inter-latin.woff2') format('woff2');
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Virgil, the hand-drawn face Excalidraw writes with by default (SIL OFL 1.1, see LICENSE-Virgil.txt).
+   Only the flow annotations use it. */
+@font-face {
+  font-family: 'Virgil';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('../fonts/virgil.woff2') format('woff2');
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Fluid interface density. Tailwind utilities are rem-based, so scaling the root
+   font-size scales typography, spacing, control heights and icons together as one
+   system. Full size (1rem = the user's default, 16px) on viewports >= 1368px (the
+   `desktop` breakpoint), so fullscreen notebooks stay pixel-identical; shrinks
+   linearly below that down to 94% at <= 1152px (compact windows, split screens).
+   The rem-based clamp keeps user font-size preferences and browser zoom working,
+   and breakpoints stay px-based so layout switches do not feed back into this
+   scale. */
+html {
+  font-size: clamp(0.94rem, 0.62rem + 0.4444vw, 1rem);
+  background-color: rgb(var(--color-canvas));
+}
+
+body {
+  background-color: rgb(var(--color-canvas));
+  color: rgb(var(--color-foreground));
+}
+
+/* ---------------------------------------------------------------------------
+   Theme switch.
+
+   The swap itself is instant: every colour resolves from a CSS variable, so one
+   attribute write repaints the whole UI already correct.
+
+   This class exists because instant was NOT instant. Around 350 components carry
+   their own `transition-colors`, so on a theme change each of them animated on its
+   own clock (140ms here, 200ms there, 280ms on a collapse) while untransitioned
+   elements changed at once. The page arrived in waves and the borders landed last.
+   Cancelling those transitions for the duration of the swap is what makes it read
+   as ONE change.
+
+   Measured on a 5.4k-node page carrying the app's real transition classes:
+     instant, components still transitioning ...... 406ms of blocked main thread
+     instant + this suppression ...................  49ms
+     one uniform transition on `*` ................ 627ms
+     tokens typed with @property and morphed ......  13fps, main thread starved
+
+   The last two are why there is no animation here. Any smooth transition between
+   two full-page themes is either a BLEND of both (illegible at the midpoint: dark
+   text on light mixed with light text on dark is grey on grey) or a repaint of
+   every element on every frame. Neither is acceptable, so the swap is atomic and
+   the only motion left is the toggle's own knob.
+   --------------------------------------------------------------------------- */
+.theme-switching,
+.theme-switching *,
+.theme-switching *::before,
+.theme-switching *::after {
+  transition: none !important;
+}
+
+/* ---------------------------------------------------------------------------
+   Motion.
+
+   One vocabulary so a dropdown, a drawer and a card hover do not each invent a
+   duration. Entering uses a decelerating curve (arrives and settles), leaving
+   uses an accelerating one (gets out of the way). Everything animates only
+   `opacity` and `transform`, which the compositor handles without layout.
+
+   Durations are deliberately short: this is a work tool, and animation that
+   delays a click is a tax, not a delight.
+   --------------------------------------------------------------------------- */
+@keyframes surface-in {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -0.375rem, 0) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+@keyframes scrim-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Floating surfaces that Material Tailwind mounts on open. Targeting the roles
+   rather than the components means a new menu inherits the motion for free. */
+[role='menu'],
+[role='tooltip'],
+[data-popover='true'],
+.glass,
+.glass-elevated {
+  animation: surface-in 160ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.glass-scrim {
+  animation: scrim-in 160ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* The interaction contract for anything clickable: colour and elevation move on
+   the same clock, so hover feels like one system instead of per-component taste. */
+.interactive {
+  transition-property: background-color, border-color, color, box-shadow, opacity, transform;
+  transition-duration: 140ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.interactive:active {
+  transform: scale(0.985);
+}
+
+/* Reduced motion: movement goes, feedback stays. Opacity-only transitions are
+   kept because removing them entirely makes state changes feel broken, and a
+   crossfade is not the motion this setting protects against. */
+@media (prefers-reduced-motion: reduce) {
+  [role='menu'],
+  [role='tooltip'],
+  [data-popover='true'],
+  .glass,
+  .glass-elevated,
+  .glass-scrim {
+    animation-name: scrim-in;
+    animation-duration: 100ms;
+  }
+
+  .interactive:active {
+    transform: none;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   Forced theme islands.
+
+   `data-theme` re-declares the whole token set, so any subtree can pin itself to a
+   theme. This is how print previews stay truthful: what the user sees on screen is
+   what comes out of the printer, regardless of the app theme or of the skin on it.
+   --------------------------------------------------------------------------- */
+:where([data-theme='light'], [data-theme='dark']) {
+  background-color: rgb(var(--color-canvas));
+  color: rgb(var(--color-foreground));
+}
+
+@media print {
+  :root {
+    color-scheme: light;
+  }
+}
+
+/* ---------------------------------------------------------------------------
+   Focus visibility (WCAG 2.4.7 / 1.4.11).
+
+   One ring for the whole app, driven by the `ring` token, so it has 3:1 against
+   both canvas and surface in either theme. `:focus-visible` (not `:focus`) keeps
+   it off mouse clicks. Components that draw their own ring opt out by setting
+   `outline: none` plus their own `focus-visible:` classes.
+   --------------------------------------------------------------------------- */
+:focus-visible {
+  outline: 2px solid rgb(var(--color-ring));
+  outline-offset: 2px;
+}
+
+/* The MT primitives ship `focus:outline-none`, which would swallow the ring above;
+   these re-assert it for keyboard users only. */
+button:focus-visible,
+a:focus-visible,
+[role='button']:focus-visible,
+[tabindex]:focus-visible {
+  outline: 2px solid rgb(var(--color-ring));
+  outline-offset: 2px;
+}
+
+/* Editable text fields always match :focus-visible in Chromium, and this block sits
+   after the utilities layer, so their `outline-none` class loses the cascade. They
+   draw their own focus chrome (RichTextEditor border/ring, or the host's
+   focus-within ring around the bare variant), so the global rectangle would double
+   the indicator and ignore the rounded container. */
+[contenteditable]:focus-visible {
+  outline: none;
+}
+
+::-webkit-scrollbar {
+  width: 7px;
+  height: 7px;
+}
+
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgb(var(--color-border-strong) / 0.55);
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgb(var(--color-border-strong) / 0.8);
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: 'Inter', sans-serif;
+}
+
+input:focus {
+  box-shadow: none !important;
+}
+
+/* Chrome paints its own autofill background, which ignores every theme token. The
+   giant inset shadow is the only way to repaint it, and it has to follow the theme
+   or autofilled fields turn into white blocks in dark mode. */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 1000px rgb(var(--color-surface)) inset !important;
+  box-shadow: 0 0 0 1000px rgb(var(--color-surface)) inset !important;
+  -webkit-text-fill-color: rgb(var(--color-foreground)) !important;
+  caret-color: rgb(var(--color-foreground));
+  transition: background-color 5000s ease-in-out 0s !important;
+}
+
+/* @tailwindcss/forms paints every form control from `colors.gray.500` and `colors.blue.600`,
+   and withMT replaced those with the Material palette. The result is a white fill, a 2.6:1
+   border and a blue focus ring frozen into the base layer of every input, select and
+   textarea, so a control that does not name its own background renders white in dark mode.
+   The selectors below mirror the plugin's at the same specificity, so a utility class still
+   wins and only the frozen colors change.
+
+   The control names its own `field` tokens rather than borrowing `surface` + `border-strong`,
+   because the two themes identify a control differently. In LIGHT nothing changed: a white
+   field with a 3.28:1 outline. In DARK the control is a FILLED field with a soft rim, which
+   is the trade recorded below. */
+input:where(
+  [type='text'],
+  :not([type]),
+  [type='email'],
+  [type='url'],
+  [type='password'],
+  [type='number'],
+  [type='date'],
+  [type='datetime-local'],
+  [type='month'],
+  [type='search'],
+  [type='tel'],
+  [type='time'],
+  [type='week']
+),
+select,
+textarea {
+  background-color: rgb(var(--color-field));
+  border-color: rgb(var(--color-field-border));
+}
+
+input:where(
+    [type='text'],
+    :not([type]),
+    [type='email'],
+    [type='url'],
+    [type='password'],
+    [type='number'],
+    [type='date'],
+    [type='datetime-local'],
+    [type='month'],
+    [type='search'],
+    [type='tel'],
+    [type='time'],
+    [type='week']
+  ):focus,
+select:focus,
+textarea:focus {
+  border-color: rgb(var(--color-ring));
+  --tw-ring-color: rgb(var(--color-ring));
+}
+
+/* Checkbox and radio keep `border-strong`: they are tiny, they have no fill to be
+   identified by, and their whole shape IS the outline. */
+input:where([type='checkbox'], [type='radio']) {
+  color: rgb(var(--color-primary));
+  background-color: rgb(var(--color-field));
+  border-color: rgb(var(--color-border-strong));
+}
+
+input:where([type='checkbox'], [type='radio']):focus {
+  --tw-ring-color: rgb(var(--color-ring));
+}
+
+::placeholder {
+  color: rgb(var(--color-foreground-faint));
+  opacity: 1;
+}
+
+/* The plugin's own `input::placeholder` outranks the bare `::placeholder` above. */
+input::placeholder,
+textarea::placeholder {
+  color: rgb(var(--color-foreground-faint));
+  opacity: 1;
+}
+
+/* ---------------------------------------------------------------------------
+   Text selection.
+
+   The band is an OPAQUE token, not the brand colour at low alpha. Alpha over a
+   dark canvas is what made the selection invisible: `primary / 0.24` composited
+   to 1.21:1 against the page in the dark theme, so a selected paragraph looked
+   identical to an unselected one. Opaque values land at 2.07:1 (light) and
+   2.16:1 (dark) against every surface, with the ink above 6:1 on the band.
+
+   Both channels are tokens, so a `data-theme` island (the print preview) selects
+   with its own theme instead of the app's.
+   --------------------------------------------------------------------------- */
+::selection {
+  background-color: rgb(var(--color-selection));
+  color: rgb(var(--color-selection-fg));
+}
+
+/* ---------------------------------------------------------------------------
+   Disabled and read-only.
+
+   Two different facts, and they must not share a visual: disabled means "you
+   cannot use this", read-only means "this is real content you may read and copy
+   but not edit". Neither had any rule here, so a disabled field kept the enabled
+   fill and a read-only field was indistinguishable from an editable one.
+
+   The ink is `foreground-faint`, which is the token's documented job (the 3:1
+   non-textual tier), NOT an opacity. Opacity multiplies against the backdrop:
+   the same icon at `opacity-40` measures 1.82:1 in light and 2.03:1 in dark,
+   while the token holds 4.06:1 / 4.19:1. The fill drops to `muted-active` and
+   the border to `border-emphasis` so the control keeps its shape and still reads
+   as switched off.
+   --------------------------------------------------------------------------- */
+input:where(:disabled),
+select:where(:disabled),
+textarea:where(:disabled) {
+  background-color: rgb(var(--color-field-disabled));
+  border-color: rgb(var(--color-border-emphasis));
+  color: rgb(var(--color-foreground-subtle));
+  cursor: not-allowed;
+}
+
+input:where(:disabled)::placeholder,
+textarea:where(:disabled)::placeholder {
+  color: rgb(var(--color-foreground-faint));
+}
+
+input:where([type='checkbox'], [type='radio']):where(:disabled) {
+  background-color: rgb(var(--color-field-disabled));
+  border-color: rgb(var(--color-border-emphasis));
+  color: rgb(var(--color-foreground-faint));
+  cursor: not-allowed;
+}
+
+/* There is deliberately NO `[readonly]` rule here. In this codebase the attribute
+   does not mean "locked content": four of its six uses are combobox triggers
+   (`ControlledSelect`, `DatePicker`, `DateRangePicker`), where it only blocks
+   typing. Styling it as a distinct state would repaint every select in the app. */
+
+button:disabled,
+[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+/* The full face definition lives here (the dashboard used to split it with outlined.css):
+   without the font-family + liga settings the icons render as their ligature TEXT. */
+.material-symbols {
+  user-select: none;
+  font-family:
+    'Material Symbols Outlined',
+    'Material Icons',
+    system-ui,
+    -apple-system,
+    sans-serif;
+  font-weight: normal;
+  font-style: normal;
+  font-size: 1.5rem;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  font-feature-settings: 'liga';
+}
+
+/* Apart from the rule above and with no specificity, because this file comes after the Tailwind
+   layers: on the same footing, `display` here beat `hidden` and every responsive display class a
+   host put on a symbol. The face stays where it is, or preflight would reset it on a <button>. */
+:where(.material-symbols) {
+  display: inline-block;
+}
+
+/* Set by `watchIconFont` while the icon face is not usable: the glyph box keeps its size,
+   and the ligature name never shows up as text in the layout. */
+:root[data-icon-font='loading'] .material-symbols,
+:root[data-icon-font='unavailable'] .material-symbols {
+  width: 1em;
+  overflow: hidden;
+  color: transparent !important;
+}
+
+:root[data-icon-font='loading'] .rt-file::before,
+:root[data-icon-font='unavailable'] .rt-file::before {
+  content: none;
+}
+
+.wf-loading,
+.wf-materialicons-n4-inactive {
+  .material-icons {
+    display: none;
+  }
+}
+
+textarea:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.Toastify__toast-container {
+  width: min(40rem, calc(100vw - 2rem)) !important;
+  z-index: 2147483647 !important;
+}
+
+[role='tooltip'] {
+  z-index: 9999 !important;
+  cursor: help !important;
+}
+
+[role='menu'] {
+  overflow: hidden !important;
+}
+
+.inter-font {
+  font-family: 'Inter', sans-serif !important;
+}
+
+.zIndexMax {
+  z-index: 9999 !important;
+}
+
+/* Rich text authored in RichTextEditor. Colour is stored as a role, never as a literal value,
+   so the same message stays legible after a theme switch. Both the editor and every surface
+   that renders the sanitized body share these rules. */
+.rt-color-brand {
+  color: rgb(var(--color-primary-emphasis));
+}
+
+.rt-color-secondary {
+  color: rgb(var(--color-secondary-emphasis));
+}
+
+.rt-color-accent {
+  color: rgb(var(--color-accent-emphasis));
+}
+
+.rt-color-success {
+  color: rgb(var(--color-success-emphasis));
+}
+
+.rt-color-warning {
+  color: rgb(var(--color-warning-emphasis));
+}
+
+.rt-color-danger {
+  color: rgb(var(--color-danger-emphasis));
+}
+
+.rt-color-info {
+  color: rgb(var(--color-info-emphasis));
+}
+
+.rt-color-muted {
+  color: rgb(var(--color-foreground-muted));
+}
+
+.rt-image-link {
+  display: inline-block;
+  max-width: 100%;
+  line-height: 0;
+  text-decoration: none;
+}
+
+/* An image written into the body shows itself: a name-only chip hides what was attached.
+   The cap keeps a full-resolution photo from taking over the field it was written into. */
+.rt-image {
+  display: inline-block;
+  max-width: 100%;
+  max-height: 16rem;
+  width: auto;
+  height: auto;
+  border: 1px solid rgb(var(--color-border));
+  border-radius: 0.5rem;
+  background-color: rgb(var(--color-muted));
+  cursor: zoom-in;
+  object-fit: contain;
+}
+
+.rt-file {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  max-width: 100%;
+  padding: 0.125rem 0.5rem 0.125rem 0.375rem;
+  border: 1px solid rgb(var(--color-border));
+  border-radius: 0.5rem;
+  background-color: rgb(var(--color-muted));
+  color: rgb(var(--color-foreground-muted));
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  text-decoration: none;
+  vertical-align: baseline;
+}
+
+.rt-file:hover {
+  background-color: rgb(var(--color-muted-hover));
+  color: rgb(var(--color-foreground));
+}
+
+.rt-file::before {
+  content: 'attach_file';
+  font-family: 'Material Symbols Outlined', 'Material Icons', sans-serif;
+  font-size: 1rem;
+  line-height: 1;
+  font-weight: normal;
+  letter-spacing: normal;
+  -webkit-font-feature-settings: 'liga';
+  font-feature-settings: 'liga';
+}

package/src/assets/styles/index.css

@@ -0,0 +1 @@
+@import './base.css';