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

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

@@ -1,42 +0,0 @@
-/* ---------------------------------------------------------------------- */
-/* --- This file should host styles which visually indicate           --- */
-/* --- incompatibilities between the markup and classes in v4         --- */
-/* --- as they appear in v5 mode. Use hotpink whenever possible to    --- */
-/* --- draw attention to the element which is incompatible.           --- */
-/* --- Try to keep this file brief and only use as a last resort.     --- */
-/* --- Where possible, extensions to the CMS should be remediated     --- */
-/* --- by updating their code to display properly in v5.              --- */
-/* ---------------------------------------------------------------------- */
-
-@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1');
-
-.Icon {
-  --Icon-fill: 'FILL' 1;
-
-  direction: ltr;
-  display: inline-block;
-  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
-  font-family: 'Material Symbols Outlined';
-  font-feature-settings: 'liga';
-  font-size: 20px;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-style: normal;
-  font-variation-settings: var(--Icon-fill);
-  font-weight: normal;
-  letter-spacing: normal;
-  line-height: 1;
-  position: relative;
-  text-rendering: optimizeLegibility;
-  text-transform: none;
-  vertical-align: top;
-  white-space: nowrap;
-  word-wrap: normal;
-
-  &::before {
-    color: hotpink;
-    content: attr(data-icon-name);
-    padding: 6px 100px 100px 6px;
-    position: absolute;
-  }
-}

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

@@ -1,26 +0,0 @@
-.InputRow,
-.InputRow > fieldset {
-  @apply mt-4 flex flex-wrap;
-
-  fieldset {
-    @apply mt-0;
-  }
-
-  > * {
-    @apply min-w-0 flex-auto;
-  }
-
-  > label {
-    @apply mb-2 w-full text-sm font-semibold text-gray-700;
-  }
-
-  > .ComboInput + ul {
-    > li {
-      @apply mt-3 flex;
-    }
-
-    > li input[type='checkbox'] {
-      @apply mr-2;
-    }
-  }
-}

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

@@ -1,33 +0,0 @@
-.Label {
-  @apply btu-badge-gray btu-badge-sm text-nowrap font-medium;
-
-  &.is-archived {
-    @apply btu-badge-error me-2;
-  }
-
-  &.is-draft {
-    @apply btu-badge-primary me-2;
-  }
-
-  &.is-revision {
-    @apply btu-badge-purple me-2;
-  }
-
-  &.is-scheduled {
-    @apply btu-badge-warning me-2;
-  }
-
-  &.is-workflow {
-    @apply btu-badge-gray me-2;
-  }
-
-  &[data-status-color] {
-    --foreground: oklch(
-      from var(--status-color) clamp(0.3, calc(l / 1.2), 0.5) c h
-    );
-    --background: oklch(
-      from var(--foreground) clamp(0.908, calc(l * 1.5), 0.98) c h
-    );
-    @apply me-2 btu-badge-foreground-[--foreground] btu-badge-background-[--background];
-  }
-}

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

@@ -1,13 +0,0 @@
-.LabeledCheckbox {
-  @apply inline-flex cursor-pointer items-center gap-2 text-sm font-medium leading-4 text-gray-700 [&:has(input:disabled)]:cursor-default [&:has(input:disabled)]:text-gray-300;
-}
-
-.DashboardWidget-filters {
-  .LabeledCheckbox {
-    @apply relative p-[0_var(--gap-s)];
-  }
-}
-
-label:has(input[type='checkbox']) {
-  @apply LabeledCheckbox;
-}

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

@@ -1,4 +0,0 @@
-a,
-button:where(.Link) {
-  @apply inline cursor-pointer border-none bg-transparent p-0 align-baseline font-medium text-primary-600 underline focus:ring-primary-100 focus:ring-offset-1 hover:text-primary-800 focus:rounded-[7px] focus:text-primary-600 focus:ring-offset-primary-600 disabled:pointer-events-none disabled:text-gray-700;
-}

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

@@ -1,77 +0,0 @@
-.LinkCarousel {
-  /* Magic margin to horizontally align the first group if items with the same gap
-    other dashboard widgets have from the edge of the container.
-    The 'ch' value should be equal to the amount of whitespace chars used in the
-    btu-scrollshadow. */
-  --offset-inline: 0px;
-  @apply btu-scrollshadow-50 relative -me-6 flex w-full gap-3 @container/LinkCarousel supports-[animation-timeline:--scroll-timeline]:[--offset-inline:calc((0.5rem_+_3ch)_*_-1)];
-}
-
-.LinkCarousel-title {
-  @apply text-sm;
-}
-
-.LinkCarousel-group {
-  @apply first:ms-[--offset-inline];
-
-  > h3 {
-    @apply hidden;
-  }
-
-  > ul {
-    @apply flex h-full gap-3;
-  }
-}
-
-/* Empty groups are rendered, so we must hide them. */
-.LinkCarousel-group:has(> ul:empty) {
-  @apply hidden;
-}
-
-.LinkCarousel:has(.p-commonContent-favorites .pageThumbnails:empty)
-  .p-commonContent-new {
-  @apply ms-[--offset-inline];
-}
-
-.LinkCarousel-item {
-  --content-icon-size: 3rem;
-  @apply relative flex w-[29cqi] min-w-[9rem] cursor-pointer flex-col gap-2 overflow-hidden rounded-lg border border-gray-300 bg-white p-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-100 [@container_LinkCarousel_(width_>_650px)]:w-[14rem];
-
-  > a {
-    @apply line-clamp-3 pe-6 font-semibold text-gray-900 no-underline hover:text-gray-900;
-  }
-}
-
-.LinkCarousel-item-favorite {
-  @apply absolute right-2 top-2 flex size-7 items-center justify-center before:size-5 touch-device:p-2;
-
-  &:not(.is-unstarred) {
-    @apply before:block before:bg-gradient-to-tr before:from-primary-500 before:via-primary-700 before:to-primary-900 before:[clip-path:theme(shape.starFilled)];
-  }
-
-  &.is-unstarred {
-    @apply opacity-0 before:btu-icon before:btu-icon-star before:[--Icon-size:theme(size.5)] touch-device:opacity-100;
-  }
-}
-
-.LinkCarousel-item:focus-within .LinkCarousel-item-favorite.is-unstarred,
-.LinkCarousel-item:hover .LinkCarousel-item-favorite.is-unstarred {
-  @apply opacity-100;
-}
-
-.LinkCarousel-item.is-image {
-  @apply after:btu-icon-via-mask before:size-[--content-icon-size] before:justify-start before:rounded-lg before:bg-primary-50 before:p-3 before:align-top before:[--tw-content:""] after:absolute after:btu-icon-gradient-primary after:btu-icon-lg after:[transform:translate(theme(size.3),theme(size.3))] hover:before:bg-gray-50 dark:before:!bg-gray-100 dark:hover:before:!bg-gray-50;
-
-  > a {
-    @apply line-clamp-1 pe-0;
-  }
-}
-
-.LinkCarousel-item.is-image:not([data-icon-name]) {
-  @apply after:btu-icon-via-mask-zap;
-}
-
-/* Legacy. */
-.p-commonContent-new > form {
-  @apply hidden;
-}

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

@@ -1,53 +0,0 @@
-.LinkList {
-  tr.contentIcon {
-    @apply flex items-center;
-
-    .LinkList-main {
-      @apply max-w-none flex-1 items-center py-4 before:btu-icon [&:not([data-icon-name])]:before:btu-icon-circle-dashed before:max-w-min before:justify-start before:rounded-[0.25rem] before:bg-gray-100 before:p-2 before:align-top before:text-gray-700 before:btu-icon-md hover:before:mix-blend-multiply;
-    }
-  }
-
-  td {
-    @apply align-top;
-  }
-
-  td.LinkList-main {
-    @apply inline-flex items-center gap-3;
-
-    .ContentSummary-info {
-      @apply top-0 m-0;
-    }
-
-    .Label {
-      @apply me-2;
-    }
-  }
-
-  .LinkList-image {
-    @apply order-first !ms-0;
-  }
-
-  .LinkList-image.is-icon {
-    @apply grid place-content-center items-center justify-items-center pe-3 before:btu-icon before:z-10 before:btu-icon-md before:[grid-area:1/1] after:size-[36px] after:rounded-full after:border-[6px] after:p-[14px] after:[grid-area:1/1];
-  }
-
-  .LinkList-image.is-icon[data-icon-name] {
-    @apply !text-gray-700 after:border-gray-50 after:bg-gray-100 dark:!text-black-dark dark:after:bg-gray-300;
-  }
-
-  .LinkList-image.is-icon[data-icon-name='success'] {
-    @apply !text-success-700 after:border-success-50 after:bg-success-100 dark:after:bg-success-200;
-  }
-
-  .LinkList-image.is-icon[data-icon-name='warning'] {
-    @apply !text-warning-700 after:border-warning-50 after:bg-warning-100 dark:after:bg-warning-200;
-  }
-
-  .LinkList-image.is-icon[data-icon-name='error'] {
-    @apply !text-error-600 after:border-error-50 after:bg-error-100 dark:after:bg-error-200;
-  }
-}
-
-.LinkList-wrapper {
-  @apply __table-wrapper overscroll-x-contain;
-}

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

@@ -1,105 +0,0 @@
-.LinkTable {
-  /* Table layout specific customization */
-  td {
-    @apply align-top;
-  }
-
-  td.LinkTable-main {
-    @apply inline-flex items-center gap-2;
-  }
-
-  &.SearchResult-table th {
-    @apply bg-gray-100 text-gray-900;
-  }
-
-  /* Search Result summary styling */
-  td.LinkTable-main:has(.SearchResult-summary:not(:empty)) {
-    @apply grid grid-cols-[minmax(auto,_max-content)_theme(size.7)] [row-gap:0];
-  }
-
-  td.LinkTable-main .SearchResult-summary:not(:empty) {
-    @apply col-span-full;
-  }
-
-  /* List items */
-  > li {
-    --link-h-max: calc(theme(lineHeight.4) * 2 + theme(spacing.4));
-    --link-h-min: calc(theme(lineHeight.4) + theme(spacing.2));
-
-    @apply flex max-h-[--link-h-max] min-h-[--link-h-min] items-center rounded-lg;
-  }
-
-  > li.Message {
-    @apply max-h-none;
-  }
-
-  > li:has(> *:hover) {
-    @apply bg-gray-100;
-  }
-
-  &:not(.CollectionList) {
-    > li:has(> a:focus-visible) {
-      @apply ring-primary-100 ring-offset-1 z-[1] ring-4 ring-offset-primary-600 [&_a]:ring-offset-0 [&_a]:ring-0;
-    }
-
-    > li:has(> a.is-focusRegionTarget) {
-      @apply ring-offset-1 ring-4 ring-primary-300 ring-offset-primary-700 transition-[box-shadow] duration-500 [&_a]:!ring-offset-0 [&_a]:!ring-0;
-    }
-
-    > li:has(> a.was-focusRegionTarget) {
-      @apply transition-[box-shadow] duration-500 ease-out;
-    }
-  }
-
-  > li > .LinkTable-noLinkText,
-  > li > a {
-    @apply my-2 line-clamp-2 w-full overflow-hidden text-ellipsis text-wrap break-words px-2 text-sm text-gray-700 no-underline;
-
-    /* Prevents italic glyphs from being clipped by overflow:hidden + line-clamp */
-    > em {
-      @apply me-[0.25em];
-    }
-  }
-
-  li.selected > a {
-    @apply text-primary-800 more-contrast:text-white;
-  }
-}
-
-/* Compact mode for narrow containers (element width < 500px, toggled via
-   ResizeObserver in v4/LinkTable.js). Converts table rows into stacked card
-   layout: label reordered to top, title full-width, metadata below. */
-.LinkTable.is-compact {
-  > thead {
-    @apply hidden;
-  }
-
-  > tbody > tr {
-    @apply flex flex-wrap px-6 py-4;
-
-    > .LinkTable-label {
-      @apply -order-1 p-0;
-    }
-
-    > .LinkTable-main {
-      @apply w-full p-0 [overflow-wrap:anywhere];
-    }
-
-    > td:not(.LinkTable-main, .LinkTable-label) {
-      @apply flex items-center p-0 text-xs text-gray-500;
-
-      &:empty {
-        @apply hidden;
-      }
-    }
-
-    > td:not(.LinkTable-main, .LinkTable-label)
-      ~ td:not(.LinkTable-main, .LinkTable-label)::before {
-      @apply mx-1 inline-block size-0.5 rounded-full bg-gray-500 content-[''];
-    }
-  }
-}
-
-.LinkTable.is-scrollable {
-  @apply __table-wrapper overscroll-x-contain;
-}

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

@@ -1,27 +0,0 @@
-.ListManager-edit {
-  @apply inline-block;
-}
-
-.ListManager-widget {
-  @apply absolute -top-10 left-16 z-10 flex flex-col overflow-clip rounded-2xl border border-gray-100 bg-white shadow-lg;
-
-  .Widget-title {
-    @apply static !pe-[60px] text-sm;
-  }
-
-  .Widget-close {
-    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm absolute right-4 top-1.5 z-10 before:btu-icon before:btu-icon-x;
-  }
-
-  .Widget-container {
-    @apply flex flex-col gap-4 px-4 pb-3 pt-4;
-  }
-
-  .Widget-controls {
-    @apply relative flex-row-reverse gap-3 border-0 !pe-1 pt-3 before:absolute before:-left-4 before:-right-4 before:top-0 before:h-px before:bg-gray-200;
-
-    button {
-      @apply btu-button btu-button-gray btu-button-md whitespace-nowrap first:btu-button-primary;
-    }
-  }
-}

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

@@ -1,290 +0,0 @@
-.objectId-edit-heading {
-  @apply btu-button btu-button-fill-none btu-button-primary block truncate rounded-none border-b border-solid border-b-primary-200 bg-primary-25 p-4 text-sm font-normal [grid-area:back] focus-visible:ring-primary-100 before:btu-icon before:btu-icon-arrow-left before:me-2 focus:rounded-none focus-visible:ring-4 focus-visible:ring-inset;
-}
-
-.Grid:has(.LiveBlogGrid),
-.Grid:has(.LiveBlogGrid) .Grid-nav,
-.LiveBlogPostListNav,
-.LiveBlogGrid,
-.LiveBlogGrid .Frame-relative {
-  @apply contents;
-}
-
-.LiveBlogPostList {
-  @apply overflow-auto border-r bg-white [grid-area:list];
-}
-
-.LiveBlogPostList-open {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray absolute top-[calc(var(--page-broadcast-h)+var(--page-broadcastAlert-h)_+_52px_+_theme(spacing.2))] z-[1] before:btu-icon before:btu-icon-chevron-left md:hidden;
-}
-
-.LiveBlogGrid:not(.is-visible) .LiveBlogPostList-open {
-  @apply max-md:hidden;
-}
-
-.LiveBlogPostList-button {
-  @apply btu-button btu-button-outline btu-button-fill-none btu-button-gray my-4;
-}
-
-.LiveBlogPostList-titleBar {
-  @apply sticky top-0 z-[1] flex items-center gap-2 border-b bg-white px-4 py-2;
-}
-
-.LiveBlogPostList-title {
-  @apply btu-heading-5 grow;
-}
-
-.LiveBlogPostList-controls {
-  @apply contents;
-}
-
-.LiveBlogPostList-controls
-  :where(li:first-child > a:not(.LiveBlogPostListNav-refresh)) {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-plus;
-}
-
-.LiveBlogPostList-controls > li > a.is-selected {
-  @apply md:btu-button-pressed;
-}
-
-.LiveBlogPostListNav-refresh {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-rotate-ccw;
-}
-
-/* filters widget */
-.LiveBlogPostList-filters.Widget {
-  --top: calc(
-    theme(spacing.8) + theme(iconSize.md) + theme(borderWidth.DEFAULT)
-  );
-  @apply sticky top-[--top] z-[1] bg-white;
-}
-
-.LiveBlogPostList-filters.Widget.is-collapsible {
-  @apply border-b py-2;
-
-  .Widget-title {
-    @apply border-b-0 py-1 text-sm;
-  }
-
-  .Widget-controls {
-    @apply bg-transparent;
-  }
-
-  .Widget-controls > .Widget-collapse {
-    @apply btu-button-xs touch-device:btu-button-sm;
-  }
-
-  > form.LiveBlogPostList-filters-search {
-    @apply py-4 [row-gap:0];
-  }
-
-  > form:not(.LiveBlogPostList-filters-search) {
-    @apply flex flex-col gap-4 pb-2;
-  }
-}
-
-.LiveBlogPostList-filters.Widget:not(.is-collapsed) {
-  .Widget-title {
-    @apply bg-primary-50 text-primary-800;
-  }
-
-  .Widget-controls > .Widget-collapse {
-    @apply btu-button-primary;
-  }
-}
-
-/* list of existing live blog posts
-   Customizes table & LinkList default styles for this specific use case */
-.LiveBlogPostList > table.LinkList {
-  tr.is-buttoned {
-    --bg-color: light-dark(theme(colors.white.light), theme(colors.white.dark));
-    @apply grid grid-cols-[theme(avatar.size.sm)_min-content_auto_theme(size.9)] px-4 py-3 @container/item;
-  }
-
-  tr > *:not(:first-child) {
-    @apply ms-0;
-  }
-
-  td {
-    @apply p-0;
-  }
-
-  .LinkList-main {
-    @apply col-span-3 col-start-1 row-start-1 mb-[5px] me-2;
-  }
-
-  .LinkList-main > a {
-    @apply line-clamp-2 overflow-hidden [word-break:break-word];
-  }
-
-  /* Live Blog posts is the only the use case that uses this class in LinkList */
-  .LinkList-button {
-    @apply col-start-4 row-start-1;
-  }
-
-  .LinkList-button > a {
-    @apply btu-button-fill-none btu-button-gray bg-white no-underline before:btu-icon before:btu-icon-pin hover:bg-gray-200 focus:bg-white;
-  }
-
-  .LinkList-image {
-    --avatar-size: theme(avatar.size.sm);
-    @apply col-start-1 row-span-2 row-start-2;
-  }
-
-  td.date-time {
-    @apply col-span-2 row-start-2 ms-[8px] text-xs;
-  }
-
-  td:has(.LinkList-icon) {
-    @apply overflow-hidden overflow-ellipsis text-nowrap text-xs;
-  }
-
-  td:nth-child(5) {
-    @apply col-start-2 row-start-3 ms-2 max-w-[calc(100cqw-104px)];
-  }
-
-  td:nth-child(5):has(+ td) {
-    @apply after:btu-icon after:btu-icon-dot;
-  }
-
-  td:nth-child(6) {
-    @apply col-start-3 row-start-3 me-2;
-  }
-
-  td:nth-child(n + 7) {
-    @apply hidden;
-  }
-
-  /* pinned posts */
-  tr.is-pin:not(.is-selected) {
-    @apply border-b-warning-500 bg-warning-50;
-  }
-
-  tr.is-pin:not(.is-selected) .LinkList-button > a {
-    @apply btu-button-pressed bg-primary-50 hover:bg-primary-50;
-  }
-
-  /* new blog post */
-  tr.is-new-content {
-    --bg-from: theme(colors.success.50);
-    --border-from: theme(colors.success.500);
-    --bg-to: var(--bg-color);
-    --border-to: theme(colors.gray.200);
-
-    @apply animate-list-item-added border-success-500 bg-success-50 hover:[--bg-to:theme(colors.gray.100)];
-  }
-
-  /* selected item in live blog post list */
-  tr.is-selected {
-    --bg-color: theme(colors.primary.50);
-    @apply bg-primary-50;
-  }
-
-  tr.is-selected .LinkList-main > a {
-    @apply text-primary-800;
-  }
-}
-
-.LiveBlogGrid .ContentEdit-main > .TC .TabBar > .TabBar-item {
-  @apply __tab-item-sm;
-}
-
-/* hides auto expand textarea that shows up outside of content edit form when a post is published */
-.LiveBlogGrid > .frame.is-asideHidden > .AutoExpand {
-  @apply hidden;
-}
-
-.Page.has-liveBlog-postList {
-  @container (min-width: 900px) {
-    :is(.Page-content, .Popup-content):has(.ContentEdit) {
-      /* LiveBlog Post grid doesn't allow resizing since the post list column is present. */
-      .ContentEdit-resizeWrapper {
-        @apply pointer-events-none;
-      }
-
-      /* Base calculation for content form width */
-      --contentForm-w-base: calc(100cqw - var(--right-toolbar-w));
-
-      /* States */
-      &:is(
-          .is-previewing,
-          :has(
-              .ContentEdit-toolbar
-                button:not([data-right-tab='manage_search']).is-active
-            )
-        ),
-      &.is-previewing:has(
-          .ContentEdit-toolbar
-            button:not([data-right-tab='manage_search']).is-active
-        ),
-      &.is-previewing:not(
-          :has(
-              .ContentEdit-toolbar
-                button:not([data-right-tab='manage_search']).is-active
-            )
-        ) {
-        --contentForm-w: 1fr;
-        @apply md:grid-cols-[var(--postlist-w)_var(--contentForm-w)_1fr_var(--right-toolbar-w)];
-      }
-
-      /* Neither preview nor widget - disable resize and reset form width */
-      &:not(.is-previewing):not(
-          :has(
-              .ContentEdit-toolbar
-                button:not([data-right-tab='manage_search']).is-active
-            )
-        ) {
-        --contentForm-resized-w: unset;
-        .ContentEdit-resizeWrapper {
-          @apply pointer-events-none;
-        }
-      }
-
-      /* Widget only */
-      &:not(.is-previewing):has(
-          .ContentEdit-toolbar
-            button:not([data-right-tab='manage_search']).is-active
-        ) {
-        @apply md:grid-cols-[var(--postlist-w)_var(--contentForm-w)_0px_var(--right-toolbar-w)];
-      }
-    }
-  }
-}
-
-.Page.has-liveBlog-postList {
-  .Page-main {
-    --postlist-w: clamp(300px, 360px, 35cqw);
-
-    :is(.Page-content, .Popup-content) {
-      /* Preview column only */
-      &.is-previewing {
-        --contentForm-resized-w: unset; /* override user's resized width at this container size */
-        @apply md:!grid-cols-[var(--postlist-w)_var(--contentForm-w)_1fr_var(--right-toolbar-w)];
-      }
-
-      /* Neither preview or widget columns are displayed */
-      &:not(.is-previewing):not(
-          :has(
-              .ContentEdit-toolbar
-                button:not([data-right-tab='manage_search']).is-active
-            )
-        ),
-      &:not(.is-previewing):has(
-          .ContentEdit-toolbar
-            button:not([data-right-tab='manage_search']).is-active
-        ) {
-        --contentForm-resized-w: unset; /* override user's resized width at this container size */
-        @apply md:!grid-cols-[var(--postlist-w)_var(--contentForm-w)_0px_var(--right-toolbar-w)];
-      }
-
-      /* Both preview and widget columns */
-      &.is-previewing:has(
-          .ContentEdit-toolbar
-            button:not([data-right-tab='manage_search']).is-active
-        ) {
-        --contentForm-resized-w: unset; /* override user's resized width at this container size */
-        @apply md:grid-cols-[var(--postlist-w)_var(--contentForm-w)_1fr_var(--right-toolbar-w)];
-      }
-    }
-  }
-}