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

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

@@ -1,174 +0,0 @@
-/* Tabs organize similar content together into individual sections in the same page.
-  The following component styles (non v4 classes) are specifically for horizontal tab styling
-
-  Custom Props:
-
-    --pull-inline (default is none) - Pull a tab containers' boundaries to the left and right by an amount (to go full width in a grid for example).
-
-  Class Names:
-
-    __horizontal-tabs - Establishes a container for the tabs
-    __tab-item - Styles a tab item in its default, hover and focus states
-    __tab-item-[xxs | xs | sm | md] sizes available for tab items. By default tab-item-sm styling is applied to tab item
-    __tab-item-selected - Styles tab item in selected state
-
-  Example Usages:
-
-    Given <div class="TabBar">
-            <button class="TabBar-item>...</button>
-            <button class="TabBar-item>...</button>
-          </div>
-
-    div.TabBar          -> horizontal-tabs
-    button.TabBar-item  -> tab-item tab-item-xs
-*/
-
-.__horizontal-tabs {
-  @apply relative flex gap-4 overflow-x-auto overflow-y-hidden whitespace-nowrap rounded-t-[--CIG-radius] border-b border-gray-200 bg-white px-6;
-}
-
-.__tab-item {
-  @apply relative inline-block cursor-pointer px-1.5 py-4 text-sm font-medium capitalize text-gray-500 focus-visible:ring-offset-4 focus:[&_a]:ring-offset-0 [&::after:not(:empty)]:btu-badge-sm hover:bg-gray-100 hover:text-gray-700 focus:ring-0 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary-600 focus-visible:ring-offset-primary-100 more-contrast:focus-visible:ring-4 [&::after:not(:empty)]:text-center [&_a]:text-inherit [&_a]:no-underline focus:[&_a]:rounded-none focus:[&_a]:ring-0;
-}
-
-.__tab-item-selected {
-  @apply text-gray-700 before:absolute before:inset-0 before:top-[unset] before:h-[2px] before:bg-gradient-to-tr before:from-primary-500 before:via-primary-700 before:to-primary-900;
-}
-
-.__tab-item-md {
-  @apply py-4 text-md [&::after:not(:empty)]:btu-badge-md;
-}
-
-.__tab-item-sm {
-  @apply py-4 text-sm [&::after:not(:empty)]:btu-badge-sm;
-}
-
-.__tab-item-xs {
-  @apply py-3 text-sm [&::after:not(:empty)]:btu-badge-sm;
-}
-
-.__tab-item-xxs {
-  @apply py-2 text-sm [&::after:not(:empty)]:btu-badge-sm;
-}
-
-/* Boost specificity of TabBar style to override native style of ul/ol elements. */
-:is(div, ol, ul).TabBar {
-  --pull-inline: ;
-  @apply [margin-inline:calc(-1_*_var(--pull-inline,_0px))];
-}
-
-/* Styling v4 horizontal tabs using v5 components */
-.TabBar:not(.is-menuOnly) {
-  @apply __horizontal-tabs;
-}
-
-.TabBar-item {
-  @apply __tab-item;
-
-  &.is-selected,
-  &.selected,
-  &.state-selected {
-    @apply __tab-item-selected;
-  }
-}
-
-.TabBar-item:where(.is-error) {
-  @apply flex items-center gap-2 after:justify-center after:bg-error-600 after:text-white after:[--tw-content:'!'];
-
-  &.is-selected,
-  &.selected,
-  &.state-selected {
-    @apply after:btu-badge-error;
-  }
-}
-
-.tabs-wrapper {
-  @apply contents;
-}
-
-.TabBar-item:has(.Badge) {
-  @apply flex items-center gap-2 hover:mix-blend-multiply;
-
-  .Badge {
-    @apply btu-badge-primary btu-badge-sm;
-  }
-}
-
-/* Menu Tab container styling using v5 components */
-.TabBar.is-menuOnly {
-  --tabbar-height: calc(var(--gap-m) * 2 + var(--Text-height));
-  @apply rounded-t-[--CIG-radius] border-b border-gray-200 bg-white px-4 py-2;
-}
-
-.TabBar-menu {
-  @apply flex items-center gap-2;
-}
-
-.TabBar-selected-text {
-  @apply text-md font-semibold capitalize text-gray-900;
-}
-
-.TabBar-menuToggle {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray after:btu-icon after:btu-icon-chevron-down;
-
-  &.is-active {
-    @apply btu-button-pressed after:btu-icon-chevron-up;
-  }
-}
-
-.TabBar-menuList {
-  @apply Dropdown;
-}
-
-.TabBar-menuItem {
-  @apply Dropdown-item;
-
-  &.is-selected {
-    @apply Dropdown-item-selected;
-  }
-}
-
-.TabBar.is-open .TabBar-menuList {
-  @apply Dropdown-is-open;
-}
-
-.TabBar.is-menuError {
-  .TabBar-selected-text {
-    @apply flex items-center gap-2 after:min-w-[1.375rem] after:rounded-2xl after:bg-error-600 after:px-2 after:py-0.5 after:text-center after:text-xs after:text-white after:[--tw-content:'!'];
-  }
-
-  .TabBar-menuItem.is-error {
-    @apply flex before:order-2 before:ml-auto before:min-w-[1.375rem] before:rounded-2xl before:bg-error-600 before:px-2 before:py-0.5 before:text-center before:text-xs before:text-white before:[--tw-content:'!'];
-  }
-
-  .TabBar-menuItem.is-selected.is-error {
-    @apply gap-2 after:order-3 after:ml-0;
-  }
-}
-
-/* dashboard tab select tab bar items custom styles */
-.TabBar-item a {
-  @apply -mx-1.5 -mb-4 -mt-1.5 block px-1 pb-4 pt-1.5;
-}
-
-.TabBar-item.is-error a {
-  --tabitem-padding-right: calc(
-    theme(gap.2) + theme(iconSize.md) + theme(padding[1.5])
-  );
-  @apply -mr-[--tabitem-padding-right] pr-[--tabitem-padding-right];
-}
-
-/* Account for different structure of dashboard tabs */
-.DashboardTabSelect {
-  .TabBar-item {
-    @apply -mt-2;
-  }
-
-  .TabBar-item > a {
-    @apply __tab-item;
-  }
-
-  .TabBar-item.selected > a {
-    @apply __tab-item-selected;
-  }
-}

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

@@ -1,40 +0,0 @@
-.TC {
-  @apply __tc-bar-sm;
-}
-
-.__tc-bar-xs {
-  @apply [--tc-bar-h:45px];
-}
-
-.__tc-bar-sm {
-  @apply [--tc-bar-h:53px];
-}
-
-.Tab {
-  @apply w-full;
-}
-
-.TC > .TC-unselected {
-  @apply hidden;
-}
-
-.TC-panel {
-  @apply p-[--Widget-padding];
-}
-
-.TC-panel-heading {
-  @apply flex h-11 items-center gap-2 bg-gray-100 p-2 text-sm font-semibold text-gray-900;
-}
-
-/* CIG should be full bleed when directly inside TC-panel. */
-.TC-panel,
-.TC-panel > form,
-.TC-panel > form > .fixedScrollable {
-  > .CIG {
-    @apply -m-[--Widget-padding] mb-0;
-  }
-
-  > .ActionBar {
-    @apply -mx-[--Widget-padding] my-0 p-[--Widget-padding];
-  }
-}

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

@@ -1,107 +0,0 @@
-/** table & table container styles **/
-table {
-  @apply w-full overflow-x-auto;
-}
-
-/** table header row & table header cells styling **/
-thead > tr {
-  @apply border-b border-b-gray-200;
-}
-
-th:has(input[type='checkbox']:only-child) {
-  @apply w-[68px];
-}
-
-th,
-thead td {
-  @apply text-nowrap bg-gray-50 px-6 py-3 text-start text-xs font-medium text-gray-500 hover:text-gray-700;
-}
-
-/** table data row & data cell styling **/
-tbody > tr {
-  @apply border-b border-b-gray-200 bg-white hover:bg-gray-100;
-
-  &:has(td input[type='checkbox']:checked) {
-    @apply bg-gray-50;
-  }
-}
-
-td {
-  @apply px-6 py-4 text-sm font-normal text-gray-500;
-
-  &.date,
-  &.time {
-    @apply whitespace-nowrap;
-  }
-
-  > a {
-    @apply Link overflow-hidden text-sm text-gray-700 no-underline [word-break:break-word] hover:text-gray-900 hover:underline focus:text-gray-700;
-
-    &.is-active {
-      @apply text-gray-700 underline;
-    }
-
-    /* Prevents italic glyphs from being clipped by overflow:hidden + line-clamp */
-    > em {
-      @apply me-[0.25em];
-    }
-  }
-
-  &.LinkTable-main > a,
-  &.LinkList-main > a {
-    @apply line-clamp-2;
-  }
-
-  button.ContentSummary-info {
-    @apply flex-shrink-0;
-  }
-
-  /* For use cases where info button is a child of the link
-  (ex. unpublished drafts dashboard widget , hierarchy view in search results) */
-  .ContentSummary-link:has(.ContentSummary-info) {
-    @apply inline-flex items-center gap-2;
-  }
-
-  a.ContentSummary-link > button.ContentSummary-info {
-    @apply block;
-  }
-}
-
-/** For tables that need horizontal scrolling (ex: Dashboard widgets) **/
-.__table-wrapper {
-  @apply overflow-x-auto @container;
-
-  table {
-    --col-width-sm: calc(theme(screens.xs) - theme(padding.14));
-    --col-width-md: calc(theme(screens.sm) - theme(padding.12));
-    --col-width-lg: calc(theme(screens.md) - theme(padding.12));
-
-    @apply w-max min-w-full;
-  }
-  td {
-    @apply max-w-[--col-width-sm] @[768px]:max-w-[--col-width-md] @[1200px]:max-w-[--col-width-lg];
-  }
-}
-
-.__static-table {
-  @apply w-full text font-normal text-gray-900;
-
-  > tbody > tr {
-    @apply last:border-b-0 hover:bg-inherit;
-
-    > th,
-    > td {
-      @apply break-words align-text-top text-gray-900;
-    }
-
-    > th {
-      @apply w-40 bg-gray-100 py-4 font-semibold;
-    }
-
-    > td {
-      ol > li {
-        @apply mt-4 first:mt-0;
-      }
-    }
-  }
-}

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

@@ -1,42 +0,0 @@
-.TableSizer {
-  @apply border-t py-3;
-
-  table {
-    @apply mx-auto mb-7 w-auto border-separate border-spacing-1 [counter-reset:table-row];
-
-    tr {
-      @apply [counter-increment:table-row];
-
-      &:has(td.active) {
-        &:not(:has(+ tr > td.active)) {
-          td.active:not(:has(+ td.active)) {
-            &::before {
-              @apply absolute bottom-3 left-1/2 right-1/2 flex items-center justify-center text-sm text-gray-500 [content:counter(table-row)_'x'_counter(table-column)];
-            }
-          }
-        }
-      }
-
-      &:first-child {
-        @apply [counter-reset:table-column];
-
-        td.active {
-          @apply [counter-increment:table-column];
-        }
-      }
-    }
-
-    td {
-      @apply size-6 rounded-lg border bg-white p-0;
-
-      /* Mobile viewports only show 10x10 grid */
-      &:nth-child(n + 11) {
-        @apply max-sm:hidden;
-      }
-
-      &.active {
-        @apply bg-primary-600;
-      }
-    }
-  }
-}

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

@@ -1,60 +0,0 @@
-/* Taxonomy search result styles */
-.Taxonomy {
-  @apply col-span-full grid size-full auto-cols-[minmax(auto,2fr)] grid-flow-col grid-cols-[minmax(262px,1fr)_minmax(262px,1fr)] gap-1 overflow-x-auto overflow-y-hidden px-2.5 [grid-row:2/4];
-
-  .watch-button {
-    @apply hidden;
-  }
-}
-
-.Taxonomy-column {
-  @apply max-h-full min-w-[262px] overflow-y-auto;
-
-  /* Hacky way to make sure that a single column will span full width */
-  .Taxonomy > & {
-    &:has(+ .searchResultTaxonomyChildren:empty) {
-      @apply col-span-2;
-    }
-  }
-
-  ul {
-    @apply mx-1.5 mb-4 overflow-hidden rounded-lg shadow-md before:block before:h-[42px] before:w-full before:bg-gray-100;
-  }
-
-  li {
-    @apply flex items-center bg-white px-4 before:me-2 before:ms-4 before:block before:h-7 before:w-px before:bg-gray-200 hover:bg-gray-100 [&:not(:last-child)]:border-b;
-
-    a:not(.Taxonomy-expand) {
-      @apply -order-1 flex-grow truncate py-3.5 text-sm font-medium text-gray-900 no-underline hover:underline;
-    }
-
-    &.is-selected {
-      @apply bg-primary-50;
-
-      .Taxonomy-expand {
-        @apply text-primary-800;
-      }
-    }
-
-    &:has(.Taxonomy-expand:hover) {
-      @apply bg-white;
-    }
-
-    &:not(:has(.Taxonomy-expand)) {
-      @apply after:btu-icon after:btu-icon-chevron-right rtl:after:btu-icon-chevron-left after:block after:p-1 after:text-gray-300;
-    }
-  }
-}
-
-.Taxonomy-children {
-  @apply contents;
-
-  /* Shows the user that the selected item has no loadable children */
-  :has(li.is-selected) + &.loaded:empty {
-    @apply block h-[42px] min-w-[262px] flex-1 rounded-lg bg-gray-100 shadow-md;
-  }
-}
-
-.Taxonomy-expand {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs bg-white before:btu-icon before:btu-icon-chevron-right touch-device:btu-button-sm rtl:before:btu-icon-chevron-left hover:bg-gray-200;
-}

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

@@ -1,40 +0,0 @@
-.TextInput {
-  @apply flex w-full resize-none items-center rounded-lg border border-solid border-gray-300 bg-white px-4 py-2 text-sm leading-4 text-gray-900 outline-none focus:ring-primary-100 placeholder:text-gray-500 hover:bg-gray-100 focus:border-solid focus:border-primary-600 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-400 disabled:placeholder:text-gray-400 more-contrast:placeholder:text-gray-500;
-}
-
-textarea,
-input:where(
-    [type='email'],
-    [type='number'],
-    [type='password'],
-    [type='search'],
-    [type='tel'],
-    [type='text'],
-    [type='url']
-  ) {
-  @apply TextInput;
-}
-
-btu-input {
-  @apply relative;
-}
-
-btu-input[type='password'] {
-  @apply inline-flex w-full items-center gap-4;
-
-  .ShowPassword-toggle {
-    @apply btu-button btu-button-text-hidden before:btu-icon before:btu-icon-eye;
-
-    &.off {
-      @apply before:btu-icon-eye-off;
-    }
-  }
-
-  input[type='password']::-ms-reveal {
-    @apply hidden;
-  }
-}
-
-#frameBody {
-  @apply pointer-events-none hidden;
-}

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

@@ -1,64 +0,0 @@
-/* Default light theme */
-:root {
-  @apply lightTheme;
-}
-
-/* User override: explicit dark mode via class */
-:root.is-dark {
-  @apply darkTheme;
-}
-
-/* User contrast overrides (highest priority) */
-/* User explicitly wants high contrast */
-:root.is-moreContrast.is-dark {
-  @apply darkTheme-highcontrast;
-}
-
-:root.is-moreContrast:not(.is-dark) {
-  @apply lightTheme-highcontrast;
-}
-
-/* User explicitly wants normal contrast (overrides OS high contrast) */
-:root.is-normalContrast.is-dark {
-  @apply darkTheme;
-}
-
-:root.is-normalContrast:not(.is-dark) {
-  @apply lightTheme;
-}
-
-/* OS-level dark mode (unless overridden by data-theme light) */
-@media screen and (prefers-color-scheme: dark) and (forced-colors: none) {
-  :root:not(.is-dark):not([data-theme*='"appearance":"light"']) {
-    @apply darkTheme;
-  }
-}
-
-/* OS-level high contrast (only applies when user hasn't set contrast preference) */
-@media screen and (prefers-contrast: more) and (forced-colors: none) {
-  /* Light theme + OS high contrast (no user contrast override) */
-  :root:not(.is-dark):not(.is-moreContrast):not(.is-normalContrast) {
-    @apply lightTheme-highcontrast;
-  }
-
-  /* Dark theme via class + OS high contrast (no user contrast override) */
-  :root.is-dark:not(.is-moreContrast):not(.is-normalContrast) {
-    @apply darkTheme-highcontrast;
-  }
-
-  /* OS dark mode + OS high contrast (no user overrides) */
-  @media screen and (prefers-color-scheme: dark) {
-    :root:not(.is-dark):not(.is-moreContrast):not(.is-normalContrast):not(
-        [data-theme*='"appearance":"light"']
-      ) {
-      @apply darkTheme-highcontrast;
-    }
-  }
-}
-
-/* High contrast borders - applies when high contrast is actually being used */
-*,
-:after,
-:before {
-  @apply more-contrast:border-gray-400 more-contrast:![--button-outline-color:theme(colors.gray.400)];
-}

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

@@ -1,93 +0,0 @@
-/* Styleguide */
-.ThemeBundleEditor-stage {
-  @apply fixed bottom-0 left-[var(--pageNav-w)] right-0 top-[--page-header-h] z-[100] translate-y-full flex-col border-s border-t bg-white transition-transform duration-300;
-
-  /* Styleguide and its toggle button are hidden at small breakpoints */
-  @apply hidden lg:flex;
-
-  &.is-open {
-    @apply translate-y-0;
-  }
-}
-
-/* "Open styleguide" button */
-.ThemeBundleEditor-top {
-  @apply hidden pt-6 lg:block;
-}
-.ThemeBundleEditor-toggle {
-  @apply hidden lg:btu-button lg:btu-button-gray lg:btu-button-md;
-}
-
-/* Frame that holds the styleguide itself */
-.ThemeBundleEditor-stage-main {
-  @apply size-full;
-
-  iframe {
-    @apply flex size-full;
-  }
-}
-
-/* The buttons that appear above the stylgeuide frame */
-.ThemeBundleEditor-stage-top {
-  @apply flex w-full items-center justify-between bg-white px-4 py-3;
-
-  > a {
-    @apply btu-button btu-button-fill-none btu-button-gray before:btu-icon;
-  }
-
-  .ThemeBundleEditor-close {
-    @apply before:btu-icon-chevron-left rtl:before:btu-icon-chevron-right;
-  }
-
-  .ThemeBundleEditor-openNewTab {
-    @apply before:btu-icon-external-link;
-  }
-}
-
-/* Carryover from v4 */
-.Styleguide .Page.is-inIframe {
-  @apply h-full;
-}
-
-/* Styles related to theme bundle edit form */
-.Page.has-theme-styleguide {
-  .ContentEdit-left {
-    @apply grid grid-cols-subgrid;
-
-    &:has(.Tab[data-tab='Styleguide']:not(.TC-unselected)) {
-      @apply grid-rows-subgrid;
-    }
-  }
-
-  .ContentEdit-main {
-    &:has(.Tab[data-tab='Styleguide']:not(.TC-unselected)) {
-      @apply grid-rows-subgrid;
-    }
-  }
-
-  .CIG {
-    @apply content-start;
-  }
-
-  .Tab[data-tab='Styleguide']:not(.TC-unselected) {
-    --tab-bar-h: calc(theme(lineHeight.4) + theme(padding.6) + 1px);
-
-    @apply -mx-6 flex h-[calc(100%_-_var(--tab-bar-h))] w-[calc(100%_+_2_*_theme(spacing.6))] flex-col overflow-clip;
-
-    > .StyleguideFrame {
-      @apply w-full flex-shrink-0 flex-grow;
-    }
-
-    > .Message {
-      @apply flex-none;
-
-      > a {
-        @apply -order-1;
-      }
-
-      .Message-icon {
-        @apply before:btu-icon-external-link;
-      }
-    }
-  }
-}

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

@@ -1,74 +0,0 @@
-.TimedContentPlayerNote {
-  @apply relative max-w-[350px];
-}
-
-/* Preview with thumbnail */
-.TimedContentPlayerNote-thumbnail-link {
-  @apply relative inline-block overflow-hidden rounded-lg border border-solid border-gray-300 before:btu-icon before:btu-icon-play before:absolute before:left-1/2 before:top-1/2 before:rounded-full before:border before:border-gray-300 before:bg-white before:p-3 before:text-gray-700 before:[transform:translate(-50%,-50%)];
-}
-
-/* Preview with no thumbnail */
-.TimedContentPlayerNote-thumbnail-noimage {
-  @apply block h-[250px] w-[350px] bg-black;
-}
-
-/* Player (hidden until user clicks on preview) */
-.TimedContentPlayerNote-player,
-.TimedContentPlayerNote-player-control {
-  @apply hidden;
-}
-
-.inputContainer-TimedContentPlayerNote-player-visible
-  .TimedContentPlayerNote-player-control {
-  @apply [display:inherit];
-}
-
-.TimedContentPlayerNote-player-frame {
-  @apply flex h-[250px] w-[350px] max-w-full items-center justify-center overflow-hidden rounded-lg border border-gray-300 bg-gray-50;
-}
-
-.TimedContentPlayerNote-player-frame .frame {
-  @apply flex-grow;
-}
-
-.TimedContentPlayerNote-player-close {
-  @apply btu-button btu-button-text-hidden btu-button-outline btu-button-fill-none btu-button-gray btu-button-xs absolute -top-[34px] right-0 cursor-pointer before:btu-icon before:btu-icon-x;
-}
-
-.CIG-note:has(.TimedContentPlayerNote) {
-  @apply pointer-events-auto order-[0] w-full;
-}
-
-/* IframeToolPlayerServlet */
-.TimedContentIframeToolPlayer iframe {
-  @apply size-full;
-}
-
-/* Companion Content */
-.ContentEdit-left:has(.TimedContent-companions) {
-  @apply @container/content-left;
-}
-
-.TimedContent-companions:has(.CIG-note .TimedContentPlayerNote) {
-  @apply block gap-x-10 [grid-template-areas:"label_label"_"companions_note"] [grid-template-columns:1fr_auto] @content-left-md/content-left:grid;
-
-  &.TC-unselected {
-    @apply hidden;
-  }
-
-  > .CIG-label {
-    @apply [grid-area:label];
-  }
-
-  > .CIG-note {
-    @apply mb-12 [grid-area:note] @content-left-md/content-left:mb-0;
-  }
-
-  > .CIG-large {
-    @apply [grid-area:companions];
-  }
-}
-
-.TimedCompanionSelector-controls {
-  @apply gap-2;
-}