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

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

@@ -1,68 +0,0 @@
-/* Hierarchy search result styles */
-.Hierarchy {
-  @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;
-  }
-}
-
-.Hierarchy-column {
-  @apply max-h-full min-w-[262px] overflow-y-auto;
-
-  /* Hacky way to make sure that a single column will span full width */
-  .Hierarchy > & {
-    &:has(+ .Hierarchy-children) {
-      @apply col-span-2;
-    }
-  }
-
-  a[data-mismatch-hierarchy-type] {
-    @apply pointer-events-none cursor-none opacity-30;
-  }
-
-  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(.Hierarchy-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;
-
-      .Hierarchy-expand {
-        @apply text-primary-800;
-      }
-    }
-
-    &:has(.Hierarchy-expand:hover) {
-      @apply bg-white;
-    }
-
-    &:not(:has(.Hierarchy-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;
-    }
-  }
-}
-
-.Hierarchy-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;
-  }
-}
-
-.Hierarchy-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;
-}
-
-.Hierarchy-moreElements {
-  @apply hidden;
-}

package/src/legacy/tool-ui/src/Icon/index.css

@@ -1,11 +0,0 @@
-btu-icon {
-  @apply aspect-square [inline-size:_var(--icon-size,_--size)];
-}
-
-btu-icon[fill='solid'] svg {
-  @apply size-[20px];
-}
-
-btu-icon[fill='gradient'] {
-  @apply btu-icon-gradient-primary [mask-image:var(--mask-url)] [mask-mode:alpha];
-}

package/src/legacy/tool-ui/src/Icon/index.ts

@@ -1,69 +0,0 @@
-import { LitElement, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { ComponentStatesMixin } from '../ComponentStatesMixin'
-import { EventEmitterMixin } from '../EventEmitterMixin'
-import { getIcon } from '../LucideDynamicLoader'
-import { addMask } from '../util/svg'
-import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
-
-import './index.css'
-
-@customElement('btu-icon')
-export default class Icon extends ComponentStatesMixin(
-  EventEmitterMixin(LitElement),
-) {
-  static get tagName() {
-    return 'BTU-ICON'
-  }
-
-  @property({ type: Number })
-  public size = 20
-
-  @property({ type: String, reflect: true })
-  public fill = 'solid'
-
-  @property({ type: String })
-  public symbol = 'circle-dashed'
-
-  private _getScaledSize() {
-    const defaultSize = 24 // Lucide default size
-    return this.size / defaultSize
-  }
-
-  async connectedCallback() {
-    super.connectedCallback()
-  }
-
-  async disconnectedCallback() {
-    super.disconnectedCallback()
-  }
-
-  createRenderRoot() {
-    return this
-  }
-
-  render() {
-    const data = getIcon(
-      window.BRIGHTSPOT.icons?.materialToLucide?.[this.symbol] || this.symbol,
-      this,
-    )
-
-    if (this.fill === 'gradient') {
-      const scale = this._getScaledSize()
-      this.style.setProperty('transform', `scale(${scale})`)
-      this.style.setProperty('--mask-url', `url(#${this.symbol})`)
-    }
-
-    return html`${unsafeSVG(
-      this.fill === 'gradient'
-        ? addMask(data?.svg || '', this.symbol)
-        : data?.svg || '',
-    )}`
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'btu-icon': Icon
-  }
-}

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

@@ -1,522 +0,0 @@
-/* Customizing default cropper ui styles for image editor in v5 */
-.ImageEditor {
-  .cropper-drag-box {
-    @apply bg-white-light;
-  }
-
-  .cropper-modal {
-    @apply bg-transparent;
-  }
-
-  .cropper-center {
-    --cropper-center-bg: light-dark(
-      theme(colors.primary.600),
-      theme(colors.primary.200)
-    );
-    @apply opacity-100 before:size-3.5 before:rounded-full before:bg-white-light before:shadow-border after:-left-px after:top-[2px] after:size-2.5 after:rounded-full after:bg-[--cropper-center-bg];
-  }
-
-  .cropper-line {
-    @apply hidden;
-  }
-
-  .cropper-face {
-    @apply bg-white-light opacity-30 mix-blend-overlay;
-  }
-
-  .cropper-view-box {
-    @apply opacity-50 outline outline-1 outline-white-light;
-  }
-
-  .cropper-dashed {
-    @apply border border-white-light opacity-100;
-  }
-
-  .cropper-dashed.dashed-v {
-    @apply border-y-0;
-  }
-
-  .cropper-dashed.dashed-h {
-    @apply border-x-0;
-  }
-
-  .cropper-bg {
-    @apply bg-gray-50 bg-none;
-  }
-
-  .cropper-point {
-    @apply bg-white-light opacity-100;
-
-    &.point-se {
-      @apply before:bg-white-light;
-    }
-  }
-
-  /* Animation for when hotspot is added */
-  @keyframes isAdded {
-    from {
-      --hotspot-bg: light-dark(
-        theme(colors.primary.50),
-        theme(colors.primary.800)
-      );
-      --hotspot-border: light-dark(
-        theme(colors.primary.600),
-        theme(colors.primary.200)
-      );
-    }
-
-    to {
-      --hotspot-bg: theme(colors.white.light);
-      --hotspot-border: light-dark(
-        theme(colors.gray.200),
-        theme(colors.gray.600)
-      );
-    }
-  }
-}
-
-/* Image preview */
-.is-imagePreview {
-  --icon-button-w: 37px;
-
-  @apply relative grid max-w-[calc(360px-theme(spacing.8))] items-center overflow-hidden [grid-template-areas:'preview_preview_preview''groups_open_edit''message_message_message'] [grid-template-columns:calc(100%-var(--icon-button-w)*2)_auto_auto] before:relative before:h-full before:rounded-t-lg before:border before:border-b-0 before:border-gray-300 before:[grid-area:preview];
-}
-
-.ImageEditor-editToggle,
-.ImageEditor-open {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs ml-1 mr-[5px] overflow-visible before:btu-icon touch-device:btu-button-sm after:absolute after:-bottom-1 after:-left-1 after:-right-[5px] after:-top-1 after:border after:border-l-0 after:border-gray-300;
-}
-
-.ImageEditor-open {
-  @apply relative [grid-area:open] before:btu-icon-pencil-ruler after:border-r-gray-200;
-}
-
-.ImageEditor-editToggle {
-  @apply [grid-area:edit] before:btu-icon-ellipsis after:rounded-br-lg;
-}
-
-.ImageEditor-editTools {
-  @apply Dropdown;
-
-  &.is-open {
-    @apply Dropdown-is-open;
-
-    [role='menuitem'] {
-      @apply Dropdown-item;
-    }
-  }
-}
-
-.ImageEditor-preview {
-  @apply relative mx-px mt-px overflow-hidden rounded-t-lg bg-gray-50 [grid-area:preview];
-  img,
-  canvas {
-    --gray-1: light-dark(theme(colors.gray.200), theme(colors.gray.600));
-    --gray-2: light-dark(theme(colors.gray.300), theme(colors.gray.500));
-    @apply m-auto block max-h-[60vh] max-w-full bg-[light-dark(theme(colors.gray.50),_theme(colors.gray.800))] bg-[linear-gradient(45deg,var(--gray-2)_25%,transparent_25%,transparent_75%,var(--gray-2)_75%,var(--gray-2)),linear-gradient(-45deg,var(--gray-2)_25%,transparent_25%,transparent_75%,var(--gray-1)_75%,var(--gray-2))] bg-[length:10px_10px];
-  }
-
-  &.is-hidden img {
-    @apply hidden;
-  }
-}
-
-.ImageEditor-preview-loader {
-  @apply absolute left-0 top-0 z-[1] hidden size-full rounded-t-lg bg-gray-50/40 after:btu-loader after:absolute after:left-[calc(50%_-_var(--loader-size)_/_2)] after:top-[calc(50%_-_var(--loader-size)_/_2)] after:z-[2] after:size-[--loader-size];
-}
-
-.is-imageEditorLoading .ImageEditor-preview-loader {
-  @apply block;
-}
-
-.is-imageEditorReady .ImageEditor-preview-loader {
-  @apply hidden after:content-none;
-}
-
-/* Focus UI & controls */
-.ImageEditor-focusToggle {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs relative my-1 ml-[5px] mr-1 overflow-visible before:btu-icon before:btu-icon-focus touch-device:btu-button-sm after:absolute after:-bottom-1 after:-left-[5px] after:-right-1 after:-top-1 after:box-border after:rounded-bl-lg after:border after:border-r-0 after:border-gray-300;
-}
-
-/* size groups dropdown */
-.ImageEditor-groups {
-  @apply flex items-center [grid-area:groups];
-
-  .ComboInput {
-    @apply pointer-events-none relative !inline-flex h-9 min-w-[auto] rounded-none border-x-gray-200 focus:z-10 focus:border-x-primary-600 focus-visible:z-10 aria-expanded:z-10 aria-expanded:border-x-primary-600;
-
-    > .ComboInput-label,
-    > .ComboInput-icon {
-      @apply invisible;
-    }
-
-    .CIG & {
-      @apply w-[calc(100%_-_var(--icon-button-w))];
-    }
-  }
-}
-
-.ImageEditor-groups.is-focus-active {
-  .ComboInput {
-    @apply pointer-events-auto;
-
-    > .ComboInput-label,
-    > .ComboInput-icon {
-      @apply visible;
-    }
-  }
-
-  .ImageEditor-focusToggle {
-    @apply btu-button-pressed;
-  }
-}
-
-.ImageEditor-focus-container {
-  @apply cursor-pointer;
-}
-
-.ImageEditor-preview-border {
-  @apply absolute inset-0 rounded-t-lg border border-black-light opacity-40 mix-blend-hard-light;
-}
-
-/* Hide focus controls & helper text when focus toggle is off */
-.is-imagePreview:not(:has(.ImageEditor-groups.is-focus-active)) {
-  .ImageEditor-focus-container {
-    @apply pointer-events-none hidden;
-  }
-  .ImageEditor-focus-point,
-  .ImageEditor-implicitMessage,
-  .ImageEditor-focusMessage,
-  .ImageEditor-preview-border {
-    @apply hidden;
-  }
-}
-
-/* setting focus point helper text */
-.ImageEditor-focusMessage {
-  @apply mt-1.5 text-sm text-gray-500 [grid-area:message];
-}
-
-/* Focus message styling for reference field */
-.CIG-small:has(> .ContentSelector-search ~ .ImageEditor-container)
-  .ImageEditor-container
-  .ImageEditor-focusMessage {
-  @apply mt-0 border-t p-1.5;
-}
-
-.ImageEditor-implicitMessage {
-  @apply absolute left-1/2 top-2 z-[3] -translate-x-1/2 bg-gray-900 px-3 py-2 text-sm text-white;
-}
-
-.ImageEditor-implicitMessage.is-hidden {
-  @apply hidden;
-}
-
-.ImageEditor-focus-point {
-  --focus-point-color: light-dark(
-    theme(colors.primary.600),
-    theme(colors.primary.200)
-  );
-
-  @apply absolute z-[3] size-3.5 rounded-full bg-[radial-gradient(var(--focus-point-color),var(--focus-point-color)_5px,white_5px,white_7px)] [grid-area:preview];
-
-  &.is-implicit {
-    --focus-point-color: light-dark(
-      theme(colors.gray.700),
-      theme(colors.gray.100)
-    );
-  }
-
-  &.is-hidden:not(.is-implicit) {
-    @apply hidden;
-  }
-}
-
-/* Image Editor popup layout */
-.ImageEditor {
-  --margin: 68px;
-  @apply fixed inset-[--margin] z-[1000] grid origin-bottom scale-y-0 rounded-lg bg-white opacity-0 [grid-template-areas:'title_title''aside_editor''actions_editor'] [grid-template-columns:280px_auto] [grid-template-rows:auto_1fr_auto] [transition:opacity_theme(transitionDuration.500)_theme(transitionTimingFunction.in),transform_theme(transitionDuration.500)_theme(transitionTimingFunction.out)];
-
-  > * {
-    @apply z-[1];
-  }
-
-  .is-imageEditorOpen & {
-    @apply transform-none opacity-100 shadow-lg before:absolute before:-inset-[--margin] before:z-0 before:bg-gray-300/70 before:backdrop-blur;
-  }
-
-  .ActionBar {
-    @apply gap-2 rounded-bl-lg border-r [grid-area:actions];
-
-    .ImageEditor-resetButton {
-      @apply btu-button-fill-none !btu-button-error -order-1 me-auto btu-button-container-none before:btu-icon before:btu-icon-rotate-ccw;
-    }
-  }
-}
-
-.ImageEditor-main {
-  @apply relative overflow-x-auto rounded-br-lg [grid-area:editor];
-
-  img {
-    @apply block max-h-full max-w-full;
-  }
-}
-
-.ImageEditor-focus-container,
-.ImageEditor-hotspot-container,
-.ImageEditor-editableArea {
-  @apply absolute left-0 top-0 size-full;
-
-  &.is-hidden {
-    @apply hidden;
-  }
-}
-
-.ImageEditor-title {
-  @apply btu-heading-5 rounded-t-lg border-b bg-white px-6 py-3.5 text-gray-900 [grid-area:title];
-}
-
-.ImageEditor-aside {
-  @apply overflow-y-auto border-r bg-white [grid-area:aside];
-  .TC-unselected {
-    @apply hidden;
-  }
-
-  .TabBar {
-    @apply my-0 px-4;
-    > .TabBar-item {
-      @apply __tab-item-xs;
-    }
-  }
-}
-
-/* Image adjustments & filters UI */
-.ImageEditor-edit {
-  @apply px-4;
-  > h2,
-  > table {
-    @apply hidden;
-  }
-
-  > .CIG-row {
-    @apply py-4;
-  }
-
-  .CIG-label {
-    @apply text-sm font-semibold text-gray-700;
-
-    &:has(input[type='range']) {
-      @apply w-full justify-between;
-    }
-  }
-
-  .CIG-small {
-    @apply mt-2 text-sm text-gray-700;
-  }
-}
-
-.ImageEditor-editGroup {
-  input[type='checkbox'] {
-    @apply rounded-full after:btu-icon checked:after:btu-icon-dot after:btu-icon-xl checked:after:scale-[1];
-  }
-
-  input[type='range'] {
-    @apply appearance-none [--webkit-appearance:none];
-
-    &::-webkit-slider-container {
-      @apply h-2 [background:linear-gradient(to_right,transparent,transparent_50%,theme(colors.gray.300)_50%,theme(colors.gray.300)_calc(50%_+_1px),transparent_calc(50%_+_1px),transparent)];
-    }
-
-    &::-webkit-slider-runnable-track {
-      @apply h-px w-full cursor-pointer bg-gray-300;
-    }
-    &::-moz-range-track {
-      @apply h-px w-full cursor-pointer bg-gray-300;
-    }
-
-    &::-webkit-slider-thumb {
-      @apply -mt-[6.5px] size-3.5 rounded-full [-webkit-appearance:none] [background:radial-gradient(theme(colors.white.DEFAULT),theme(colors.white.DEFAULT)_5px,theme(colors.gray.700)_5px,theme(colors.gray.700)_7px)];
-    }
-    &::-moz-range-thumb {
-      @apply -mt-[6.5px] size-3.5 rounded-full [background:radial-gradient(theme(colors.white.DEFAULT),theme(colors.white.DEFAULT)_5px,theme(colors.gray.700)_5px,theme(colors.gray.700)_7px)];
-    }
-  }
-}
-
-/* Image editor crops tab */
-.ImageEditor-sizes {
-  > table {
-    @apply hidden;
-  }
-
-  > .Message {
-    @apply rounded-none border-r-0 border-t-0;
-  }
-}
-
-.ImageEditor-sizeSelectors {
-  @apply grid gap-2 p-4;
-}
-
-.ImageEditor-size {
-  @apply relative flex w-full animate-slide-fade-scroll cursor-pointer flex-wrap rounded-lg border border-gray-300 bg-white shadow-sm [animation-range:entry_10%_contain_10dvh] [animation-timeline:--image-size-scroll] [view-timeline-name:--image-size-scroll];
-
-  &.imageEditor-sizeSelected {
-    @apply border-primary-500 bg-primary-50;
-  }
-
-  &:hover {
-    @apply bg-gray-100;
-  }
-
-  &.ImageEditor-sizeModified {
-    .ImageEditor-sizeDescription .is-inherit {
-      @apply hidden;
-    }
-
-    .ImageEditor-sizeDescription .is-override {
-      @apply block;
-    }
-  }
-}
-
-.ImageEditor-sizePreview {
-  @apply order-1 flex h-[168px] w-full items-center justify-center overflow-hidden rounded-t-lg bg-gray-50;
-
-  canvas,
-  img {
-    @apply max-h-full max-w-full;
-  }
-}
-
-.ImageEditor-sizeContainer {
-  @apply order-2 flex w-full gap-2 border-t px-4 py-3;
-
-  &:has(+ .ImageEditor-sizeDescription:not(:empty)) {
-    @apply pb-0;
-  }
-}
-
-.ImageEditor-sizeLabel {
-  @apply w-[calc(100%-theme(iconSize.md)-theme(spacing.4))] grow self-center text-sm font-medium capitalize text-gray-900;
-  br {
-    @apply hidden;
-  }
-
-  > *:not(:last-child) {
-    @apply after:[--tw-content:',_'];
-  }
-}
-
-.ImageEditor-sizeDescription {
-  @apply order-2 basis-full px-4 pb-4 text-xs capitalize text-gray-500 empty:hidden;
-  .is-inherit {
-    @apply block;
-  }
-
-  .is-override {
-    @apply hidden;
-  }
-}
-
-.ImageEditor-renditionResetButton {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs pointer-events-none invisible before:btu-icon before:btu-icon-rotate-ccw touch-device:btu-button-sm;
-
-  &.is-visible {
-    @apply pointer-events-auto visible;
-  }
-}
-
-.ImageEditor-rotate-left,
-.ImageEditor-rotate-right,
-.ImageEditor-flip-h,
-.ImageEditor-flip-v {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon;
-}
-
-.ImageEditor-rotate-left {
-  @apply before:btu-icon-rotate-ccw;
-}
-
-.ImageEditor-rotate-right {
-  @apply before:btu-icon-rotate-cw;
-}
-
-.ImageEditor-flip-h {
-  @apply before:btu-icon-flip-horizontal-2;
-}
-
-.ImageEditor-flip-v {
-  @apply before:btu-icon-flip-vertical-2;
-}
-
-/* Hotspots UI */
-.ImageEditor-hotspotableArea {
-  @apply relative;
-}
-
-.ImageEditor-hotspotableArea.is-dragging
-  .ImageEditor-hotspot.is-draggable:not(.is-dragging) {
-  @apply opacity-30;
-}
-
-.ImageEditor-hotspots {
-  @apply p-4;
-  /* Hide the Transient hotspot region option since it isn't used. */
-  .ComboInput-option[data-value^='Transient'],
-  /* Hide the hotspot item's x/y inputs since those values will come from dragging hotspot overlays. */
-  .CIG-row[data-name$='/cms.image.x'],
-  .CIG-row[data-name$='/cms.image.y'] {
-    @apply hidden;
-  }
-}
-
-.ImageEditor-hotspot {
-  --hotspot-bg: theme(colors.white.light);
-  --hotspot-border: light-dark(theme(colors.gray.200), theme(colors.gray.600));
-
-  @apply absolute z-[1] flex size-9 items-center justify-center rounded-full border border-[--hotspot-border] bg-[--hotspot-bg] text-sm font-semibold text-black-light opacity-100 shadow-lg [transition:opacity_theme(transitionDuration.500)_ease];
-}
-
-.ImageEditor-hotspot.is-hidden {
-  @apply opacity-0;
-}
-
-.ImageEditor-hotspot.is-hovered {
-  --hotspot-bg: light-dark(theme(colors.gray.100), theme(colors.gray.700));
-}
-
-.ImageEditor-hotspot.is-removing {
-  --hotspot-bg: light-dark(theme(colors.error.25), theme(colors.error.900));
-  @apply pointer-events-none text-error-400 line-through;
-}
-
-.ImageEditor-hotspot.is-added {
-  --bg-from: light-dark(theme(colors.primary.50), theme(colors.primary.800));
-  --border-from: light-dark(
-    theme(colors.primary.600),
-    theme(colors.primary.200)
-  );
-
-  --bg-to: theme(colors.white.light);
-  --border-to: light-dark(theme(colors.gray.200), theme(colors.gray.600));
-  @apply animate-hotspot-added;
-}
-
-.ImageEditor-hotspot.is-dragging {
-  --hotspot-bg: light-dark(theme(colors.primary.50), theme(colors.primary.800));
-  --hotspot-border: light-dark(
-    theme(colors.primary.600),
-    theme(colors.primary.200)
-  );
-}
-
-.ImageEditor-hotspot.is-moving {
-  --hotspot-bg: light-dark(theme(colors.gray.100), theme(colors.gray.700));
-  @apply opacity-75;
-}
-
-/* When displayed within a dialog, just use the dialog's backdrop and margin. */
-dialog:modal .ImageEditor {
-  @apply [--margin:0];
-}

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

@@ -1,11 +0,0 @@
-.RecognitionResultsLink {
-  @apply py-4 text-sm;
-}
-
-.RecognitionResultsErrors {
-  @apply [&:not(:empty)]:pt-4;
-}
-
-.Widget[name='imageRecognitionResults'] .CIG {
-  @apply !flex;
-}