@brightspot/ui 3.0.1-cms-ui-migration.3 → 3.0.1

package/src/legacy/tool-ui/src/AssociatedContentWidget.css

@@ -1,68 +0,0 @@
-.Widget.is-associatedContentWidget {
-  @apply m-4 overflow-clip rounded-lg border border-gray-200 shadow-md;
-}
-
-.AssociatedContent {
-  @apply @container/associated-content;
-}
-
-.AssociatedContent-carousel {
-  @apply mb-2 mt-6;
-
-  .LinkCarousel {
-    @apply pb-4;
-  }
-}
-
-/* When the carousel is present, the controls should display a divider line between and gap accordingly.  */
-.AssociatedContent-carousel + .AssociatedContent-controls {
-  @apply relative mt-2 pt-6 before:absolute before:left-[calc(theme(spacing.6)_*_-1)] before:top-0 before:h-[1px] before:w-[calc(2_*_theme(spacing.6)_+_100%)] before:bg-gray-200;
-}
-
-.AssociatedContent-controls {
-  /* At large enough breakpoints search, sorts, and refresh appear in the same row */
-  @apply mb-2 mt-6 grid grid-cols-[1fr_auto] items-center [grid-column-gap:theme(spacing.2)] [grid-row-gap:theme(spacing.4)] @[570px]:grid-cols-[1fr_auto_auto];
-}
-
-.AssociatedContent-controls .SearchInput {
-  @apply min-w-[25%] @[570px]:max-w-[30cqi];
-}
-
-.AssociatedContent-sorts {
-  @apply col-span-full @[570px]:[grid-column:2];
-}
-
-.AssociatedContent-filters,
-.AssociatedContent-sorts {
-  @apply flex items-center;
-}
-
-.AssociatedContent-filters {
-  @apply gap-2 overflow-auto overflow-y-hidden pb-4 [grid-column:1/-1] [grid-row:3] @[570px]:[grid-row:2];
-}
-
-.AssociatedContent-refresh {
-  @apply btu-button btu-button-text-hidden btu-button-outline btu-button-fill-none btu-button-gray btu-button-sm [grid-column:2] [grid-row:1] before:btu-icon before:btu-icon-refresh-cw @[570px]:[grid-column:3];
-}
-
-/* Don't show these elements in this context. */
-.AssociatedContent-results {
-  :is(
-      .SearchWidget-controlsToggle,
-      .SearchResult-fields,
-      .SearchResult-limit,
-      .SearchResult-sorts,
-      .SearchResult-actions-wrapper
-    ) {
-    @apply hidden;
-  }
-
-  .SearchResult-views {
-    --controls-opacity: 1;
-  }
-}
-
-/* SearchWidget's CSS grid shouldn't be used in this context */
-.Widget.is-associatedContentWidget .SearchWidget-result {
-  @apply [grid-area:unset] [grid-column:content-start/content-end];
-}

package/src/legacy/tool-ui/src/AutoExpand.css

@@ -1,33 +0,0 @@
-.AutoExpand {
-  --_grid-area: 1 / 1 / 2 / 2;
-
-  @apply grid w-full grid-cols-[100%];
-
-  &::before {
-    @apply TextInput invisible my-0 whitespace-pre-wrap break-words content-[attr(data-value)_'_'];
-  }
-
-  &::before,
-  > :where(.AutoExpand-shim, textarea, btu-textarea-input) {
-    grid-area: var(--_grid-area);
-  }
-
-  > :where(textarea, btu-textarea-input > textarea) {
-    @apply overflow-hidden;
-  }
-
-  /* Prevent the textarea from collapsing below one row when empty.
-     The min-block-size replicates the single-row height of .TextInput:
-     1lh (line height) + 1rem (py-2 top+bottom padding) + 2px (1px border top+bottom). */
-  > textarea,
-  > btu-textarea-input > textarea {
-    @apply my-0 h-full [field-sizing:content] [min-block-size:calc(1lh_+_1rem_+_2px)];
-  }
-
-  &.is-noShim {
-    &::before,
-    > .AutoExpand-shim {
-      @apply hidden;
-    }
-  }
-}

package/src/legacy/tool-ui/src/Avatar.css

@@ -1,31 +0,0 @@
-.avatar {
-  @apply ring-primary-100 grid size-[--avatar-size] place-content-center items-center rounded-full bg-[var(--avatar-bg-color)] text-center font-medium uppercase text-white [--avatar-bg-color:oklch(var(--btu-theme-purple-600))] hover:bg-[oklch(from_var(--avatar-bg-color)_calc(l_*_0.8)_c_h)] @avatar-xs/avatar:text-xs @avatar-xs:font-bold @avatar-sm/avatar:text-sm @avatar-md/avatar:text-md @avatar-lg/avatar:text-md @avatar-xl/avatar:text-lg @avatar-xxl/avatar:text-xl;
-
-  img {
-    @apply aspect-square size-full rounded-full object-cover;
-  }
-
-  /* Stack all the children. If an avatar isn't provided the user's initials will show through. */
-  > *,
-  &::before {
-    grid-area: 1 / 1;
-  }
-}
-
-.ToolUserAvatar-container {
-  /*
-    Avatar size:
-    Defined in the tailwind.config.
-    To change the size in some other context you can do it like:
-    --avatar-size: theme('avatar.size.xs')
-  */
-  @apply relative size-[--avatar-size] flex-nowrap @container/avatar [--avatar-size:theme('avatar.size.sm')] md:[--avatar-size:theme('avatar.size.md')];
-}
-
-.ToolUserAvatar-name {
-  @apply hidden truncate;
-}
-
-.ToolUserAvatar {
-  @apply avatar shrink-0;
-}

package/src/legacy/tool-ui/src/BackgroundTasks.css

@@ -1,29 +0,0 @@
-.BackgroundTasks {
-  @apply relative mx-4 my-6 overflow-clip rounded-lg border border-gray-300 bg-gray-50 shadow-lg;
-
-  .TaskDisplay {
-    @apply flex justify-between px-6 py-3 ![grid-column:fullbleed-start/fullbleed-end];
-  }
-
-  .TaskDisplay h2 {
-    @apply btu-heading-5 content-center;
-  }
-
-  .TaskDisplay form {
-    @apply flex gap-2;
-  }
-
-  .TaskDisplay button {
-    @apply btu-button btu-button-outline btu-button-gray btu-button-sm bg-white before:btu-icon;
-
-    &:where([value='PauseAll']) {
-      @apply before:btu-icon-circle-pause;
-    }
-    &:where([value='ResumeAll']) {
-      @apply before:btu-icon-circle-play;
-    }
-    &:where([value='StopAll']) {
-      @apply before:btu-icon-circle-stop;
-    }
-  }
-}

package/src/legacy/tool-ui/src/Base.css

@@ -1,80 +0,0 @@
-@font-face {
-  font-family: 'Noto Sans';
-  font-style: normal;
-  font-weight: 400 600;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/notosans/v38/o-0bIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjc5a7du3mhPy0.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;
-}
-
-html {
-  @apply h-full scroll-smooth leading-4 antialiased [view-transition-name:none];
-}
-
-html[data-preview-overlay='true'] {
-  @apply fixed size-full overflow-hidden bg-transparent bg-none;
-}
-
-.screen-reader-only {
-  @apply !sr-only;
-}
-
-/* Adds a glow effect to the focused region target */
-.is-focusRegionTarget {
-  @apply !ring-offset-1 outline-none !ring-4 !ring-primary-300 !ring-offset-primary-700 transition-[box-shadow] duration-500;
-}
-
-/* Smoothly transitions out of the glow effect above */
-.was-focusRegionTarget {
-  @apply transition-[box-shadow] duration-500 ease-out;
-}
-
-[hidden],
-.hide {
-  @apply !hidden;
-}
-
-@supports (interpolate-size: allow-keywords) {
-  :root {
-    interpolate-size: allow-keywords;
-  }
-}
-
-/* Hide native selects to reduce the amount of repainting and visual changes while custom ComboInput is rendered. */
-select {
-  @apply min-h-[38px] w-auto min-w-[25cqw] appearance-none opacity-0;
-}
-
-/* Hide frames which are in a loaded state but empty... weird... this should probably be part of frame styles proper. */
-.frame.loaded:empty {
-  @apply !hidden;
-}
-
-/* Hides Theme until we decide what to do with it. */
-.themeColorContainer {
-  @apply !hidden;
-}
-
-/*
-  For a11y, we need to ensure that the font size is not too small on smaller screens
-  otherwise some browsers will auto-zoom when the input is focused.
-*/
-input,
-select,
-textarea,
-.ComboInput-label,
-.ComboInput-option {
-  @apply max-md:!text-[1rem]; /* assumes 16px base font size */
-}
-
-form {
-  &.is-submitting {
-    button.is-clicked {
-      @apply btu-button-disabled before:btu-loader before:block before:size-[1.2rem];
-    }
-  }
-}

package/src/legacy/tool-ui/src/Board.css

@@ -1,160 +0,0 @@
-.SearchResult:has(.is-muuri) {
-  --column-gap-x: 8px; /* the horizontal space between each board column */
-
-  @apply grid-rows-[var(--search-controls-h)_minmax(0px,1fr)] after:content-none;
-}
-
-.SearchResult-board {
-  @apply relative h-full select-none opacity-100 transition-opacity duration-[2400ms];
-  @starting-style {
-    opacity: 0;
-  }
-}
-
-.SearchResult-board-column {
-  --BoardColumn-minWidth: 270px;
-  --BoardColumn-maxWidth: 400px;
-  --BoardColumn-calcWidth: clamp(
-    var(--BoardColumn-minWidth),
-    calc(100% / var(--columnCount)),
-    var(--BoardColumn-maxWidth)
-  );
-
-  @apply absolute left-0 top-0 z-[1] flex min-h-full w-[--BoardColumn-calcWidth];
-}
-
-.SearchResult-board-columnContent {
-  @apply flex w-full flex-col gap-2;
-}
-
-/* Overrides standard search styles, establishes grid layout */
-.SearchResult-items.is-muuri .SearchResult-boardContainer {
-  @apply relative left-[calc(1rem_-_var(--column-gap-x))] h-full w-[calc(100%_-_var(--column-gap-x))] overflow-x-auto overscroll-x-contain [grid-area:results];
-
-  .moreCards-button,
-  .moreColumns-button {
-    @apply hidden;
-  }
-
-  > .Message {
-    @apply me-4 ms-1.5;
-  }
-}
-
-h2.BoardView-title {
-  @apply relative me-2.5 ms-1.5 flex h-12 items-center rounded-lg bg-gray-100 px-4 text-sm font-semibold capitalize text-gray-900 after:ms-[0.5ch] after:[content:'('_attr(data-count)_')'];
-}
-
-.BoardView-listContainer {
-  @apply relative grow overflow-y-auto;
-}
-
-.BoardView-list {
-  @apply absolute min-h-full w-[calc(100%_-_(2_*_var(--column-gap-x)))];
-}
-
-.BoardView-card {
-  @apply absolute z-10 mx-1.5 mb-2 min-w-full list-none rounded-lg bg-white shadow-sm hover:cursor-grab hover:bg-gray-100;
-}
-
-/* When releasing a dragged card, this style helps smooth out the transition-in
-  of the the newly added card to the DOM, before the Muuri grid positions it. */
-.BoardView-card.muuri-item {
-  @apply opacity-100 transition-opacity duration-500;
-  @starting-style {
-    opacity: 0;
-  }
-}
-
-.BoardView-card .ContentSummary-row:has(~ .ContentSummary-row) {
-  @apply mb-2;
-}
-
-/* If the row has viewers displayed, add a margin */
-.BoardView-card [data-rtc-edit-field-update-viewers]:not(:empty) {
-  @apply mt-2;
-}
-
-.BoardView-card .ContentSummary-row {
-  @apply mb-0 flex-wrap;
-
-  .ContentSummary-subtitle {
-    @apply min-w-full max-w-full basis-full text-xs font-medium text-gray-500;
-  }
-
-  .ContentSummary-link {
-    @apply flex-1 text-sm font-medium text-gray-900;
-  }
-
-  .ContentSummary-link > a {
-    @apply hyphens-auto text-inherit no-underline hover:text-gray-900 hover:underline;
-  }
-
-  .ContentSummary-description {
-    @apply text-xs font-medium text-gray-900;
-  }
-}
-
-/* These seem like empty placeholders? Hiding for now. */
-.BoardView-card .SearchResult-summary {
-  @apply hidden;
-}
-
-.BoardView-card .ContentSummary-content {
-  @apply overflow-clip p-4;
-}
-
-.BoardView-card.is-saving {
-  @apply pointer-events-none grid place-items-center before:btu-loader before:absolute before:size-[--Loader-size];
-}
-
-.BoardView-card.is-saving .ContentSummary-content {
-  @apply !opacity-50;
-}
-
-/* The dragging styles. */
-.SearchResult-dragContainer {
-  @apply fixed left-0 top-0 z-[var(--BoardContainer-zIndex,_10000)];
-}
-
-.BoardView-card.muuri-item-dragging {
-  @apply z-[12] cursor-grabbing border border-primary-500 shadow-xl;
-}
-
-.BoardView-card.muuri-item-releasing {
-  @apply z-[11];
-}
-
-.BoardView-card.muuri-item-hidden {
-  @apply z-[8];
-}
-
-.BoardView-card.muuri-item-placeholder {
-  @apply z-[9] m-0 border border-dashed border-primary-500 bg-primary-25;
-}
-
-.BoardView-card.muuri-item-placeholder > * {
-  @apply hidden;
-}
-
-.SearchResult-board-fields {
-  @apply ms-1 flex gap-2 self-center;
-}
-
-.SearchResult-board-fields .SearchResult-sorts {
-  @apply m-0;
-}
-
-.SearchResult-board-fields .SearchResult-fields {
-  @apply order-last mx-0;
-}
-
-/* TODO: Once Message CSS is complete, revisit this style. Hopefully we can remove it;  */
-.SearchResult-board-errors {
-  @apply fixed bottom-0 right-0 z-[100] max-h-[50%] max-w-[--BoardColumn-minWidth] overflow-auto;
-}
-
-/* TODO: Once Message CSS is complete, revisit this style. Hopefully we can remove it;  */
-.SearchResult-board-errors-close {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs absolute right-2 top-2 z-[100] bg-transparent before:btu-icon before:btu-icon-x touch-device:btu-button-sm;
-}