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

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

@@ -1,383 +0,0 @@
-/**
- * This file declares all the v4 variables and styles (that
- * can be used as public API) using tailwind utilities
- * configured in v5 to maintain backwards compatability.
-*/
-:root {
-  --borderWidth-thin: theme(borderWidth.DEFAULT);
-  --borderWidth-thick: theme(borderWidth.4);
-  --fontFamily-monospace: 'Noto Mono', monospace;
-  --fontFamily-sansSerif: 'Noto Sans', sans-serif;
-  --fontFamily-serif: 'Noto Serif', serif;
-  --fontSize-xs: theme(fontSize.xs[0]);
-  --fontSize-s: theme(fontSize.sm[0]);
-  --fontSize-m: theme(fontSize.md[0]);
-  --fontSize-l: theme(fontSize.lg[0]);
-  --fontSize-xl: theme(fontSize.xl[0]);
-  --fontSize-xxl: 1.875rem;
-  --gap-xs: theme(spacing.1);
-  --gap-s: theme(spacing.2);
-  --gap-m: theme(spacing.3);
-  --gap-l: theme(spacing.4);
-  --gap-xl: theme(spacing.7);
-  --iconSize-xs: theme(iconSize.xs);
-  --iconSize-s: theme(iconSize.sm);
-  --iconSize-m: theme(iconSize.md);
-  --iconSize-l: theme(iconSize.lg);
-  --iconSize-xl: theme(iconSize.xl);
-  --lineHeight-xs: theme(fontSize.xs[1]);
-  --lineHeight-s: theme(fontSize.sm[1]);
-  --lineHeight-m: theme(fontSize.md[1]);
-  --lineHeight-l: theme(fontSize.lg[1]);
-  --lineHeight-xl: theme(fontSize.xl[1]);
-  --lineHeight-xxl: 2.75rem;
-  --shadow-1: theme(boxShadow.xs);
-  --shadow-2: theme(boxShadow.sm);
-  --shadow-3: theme(boxShadow.md);
-  --shadow-4: theme(boxShadow.lg);
-  --time-xs: theme(transitionDuration.150);
-  --time-s: theme(transitionDuration.200);
-  --time-m: theme(transitionDuration.300);
-  --time-l: theme(transitionDuration.500);
-  --time-xl: theme(transitionDuration.1000);
-
-  /* Cubic: https://easings.net/ */
-  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
-  --ease-outBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-
-  --Icon-size: var(--iconSize-l);
-
-  --Input-borderColor: theme(colors.gray.300);
-  --Input-focusBackground: unset;
-  --Input-focusColor: theme(colors.primary.600);
-  --Input-placeholderColor: theme(colors.gray.500);
-
-  --Link-color: theme(colors.primary.600);
-  --Link-hoverColor: theme(colors.primary.800);
-  --Link-decoration: underline;
-
-  --RPB-size: var(--gap-xl);
-
-  --Text-height: theme(fontSize.md.1);
-
-  /* v4 theme colors mapped to v5 theme */
-  --color-red1: theme(colors.error.50);
-  --color-red2: theme(colors.error.200);
-  --color-red3: theme(colors.error.300);
-  --color-red4: theme(colors.error.400);
-  --color-red5: theme(colors.error.500);
-  --color-red6: theme(colors.error.500);
-  --color-red7: theme(colors.error.800);
-  --color-orange1: theme(colors.warning.50);
-  --color-orange2: theme(colors.warning.200);
-  --color-orange3: theme(colors.warning.300);
-  --color-orange4: theme(colors.warning.400);
-  --color-orange5: theme(colors.warning.500);
-  --color-orange6: theme(colors.warning.500);
-  --color-orange7: theme(colors.warning.800);
-  --color-dominant1: theme(colors.primary.50);
-  --color-dominant2: theme(colors.primary.200);
-  --color-dominant3: theme(colors.primary.300);
-  --color-dominant4: theme(colors.primary.400);
-  --color-dominant5: theme(colors.primary.500);
-  --color-dominant6: theme(colors.primary.500);
-  --color-dominant7: theme(colors.primary.800);
-  --color-blue1: theme(colors.primary.50);
-  --color-blue2: theme(colors.primary.200);
-  --color-blue3: theme(colors.primary.300);
-  --color-blue4: theme(colors.primary.400);
-  --color-blue5: theme(colors.primary.500);
-  --color-blue6: theme(colors.primary.500);
-  --color-blue7: theme(colors.primary.800);
-  --color-yellow1: theme(colors.warning.50);
-  --color-yellow2: theme(colors.warning.200);
-  --color-yellow3: theme(colors.warning.300);
-  --color-yellow4: theme(colors.warning.400);
-  --color-yellow5: theme(colors.warning.500);
-  --color-yellow6: theme(colors.warning.500);
-  --color-yellow7: theme(colors.warning.800);
-  --color-purple1: theme(colors.purple.50);
-  --color-purple2: theme(colors.purple.200);
-  --color-purple3: theme(colors.purple.300);
-  --color-purple4: theme(colors.purple.400);
-  --color-purple5: theme(colors.purple.500);
-  --color-purple6: theme(colors.purple.500);
-  --color-purple7: theme(colors.purple.800);
-  --color-green1: theme(colors.success.50);
-  --color-green2: theme(colors.success.200);
-  --color-green3: theme(colors.success.300);
-  --color-green4: theme(colors.success.400);
-  --color-green5: theme(colors.success.500);
-  --color-green6: theme(colors.success.500);
-  --color-green7: theme(colors.success.800);
-  --color-gray1: theme(colors.gray.50);
-  --color-gray2: theme(colors.gray.200);
-  --color-gray3: theme(colors.gray.300);
-  --color-gray4: theme(colors.gray.400);
-  --color-gray5: theme(colors.gray.500);
-  --color-gray6: theme(colors.gray.200);
-  --color-gray7: theme(colors.gray.800);
-}
-
-.Text.is-xs {
-  --Text-height: theme(fontSize.xs.1);
-
-  @apply text-xs;
-}
-
-.Text.is-s {
-  --Text-height: theme(fontSize.sm.1);
-
-  @apply text-sm;
-}
-
-.Text.is-m {
-  --Text-height: theme(fontSize.md.1);
-
-  @apply text-md;
-}
-
-.Text.is-l {
-  --Text-height: theme(fontSize.lg.1);
-
-  @apply text-lg;
-}
-
-.Text.is-xl {
-  --Text-height: theme(fontSize.xl.1);
-
-  @apply text-xl;
-}
-
-.Text.is-xxl {
-  --Text-height: var(--lineHeight-xxl);
-
-  font-size: var(--fontSize-xxl);
-  line-height: var(--lineHeight-xxl);
-}
-
-/* v4 Icon styles */
-.Icon {
-  @apply btu-icon rotate-[var(--Icon-transform)];
-}
-
-.Icon.is-s {
-  @apply btu-icon-sm;
-}
-
-.Icon.is-m {
-  @apply btu-icon-md;
-}
-
-.Icon.is-l {
-  @apply btu-icon-lg;
-}
-
-.Icon.is-xl {
-  @apply btu-icon-xl;
-}
-
-[data-icon-mode='rotate90'] {
-  --Icon-transform: rotate(90deg);
-}
-
-[data-icon-mode='rotate180'] {
-  --Icon-transform: rotate(180deg);
-}
-
-[data-icon-mode='rotate270'] {
-  --Icon-transform: rotate(270deg);
-}
-
-/* v4 Button & IconButton styles */
-.Button {
-  @apply btu-button;
-  .is-submitting &.is-clicked {
-    @apply pointer-events-none;
-
-    &:not(.Link) {
-      @apply btu-button-disabled before:btu-loader before:block before:size-[1.2rem];
-    }
-  }
-}
-
-.Button.is-dominant {
-  @apply btu-button-primary;
-}
-
-.Button.is-green {
-  @apply btu-button-success;
-}
-
-.Button.is-yellow {
-  @apply btu-button-warning;
-}
-
-.IconButton {
-  @apply btu-button btu-button-text-hidden btu-button-gray before:btu-icon;
-}
-
-.IconButton.is-focus {
-  @apply btu-button-pressed;
-}
-
-.IconButton.no-Fill {
-  @apply btu-button-fill-none;
-}
-
-.IconButton.is-pin {
-  --IconButton-name: 'push_pin';
-
-  @apply btu-button-gray;
-}
-
-/* This class is used to style "off" or default states with a color gray and not for disabled states as the name
-suggests. Example use case "pin" icon button in live blog posts */
-.IconButton.is-disabled {
-  @apply btu-button-gray;
-}
-
-.IconButton.is-red {
-  @apply btu-button-error;
-}
-
-.IconButton.is-black,
-.IconButton.is-white {
-  @apply btu-button-gray;
-}
-
-.Label:is(.is-green) {
-  @apply btu-badge-success;
-}
-
-.Label:is(.is-orange, .is-yellow) {
-  @apply btu-badge-warning;
-}
-
-.Label:is(.is-red) {
-  @apply btu-badge-error;
-}
-
-/* v4 Link styles */
-.Link:where(
-    .is-dominant,
-    .is-white,
-    .is-black,
-    .is-red,
-    .is-orange,
-    .is-yellow,
-    .is-green,
-    .is-gray,
-    .is-purple
-  ) {
-  /* By default --Link-decoration is underline except for these cases */
-  --Link-decoration: none;
-}
-
-.Link.is-dominant {
-  --Link-color: theme(colors.primary.600);
-  --Link-hoverColor: theme(colors.primary.800);
-
-  @apply text-primary-600 hover:text-primary-800;
-}
-
-.Link.is-blue {
-  --Link-color: theme(colors.primary.600);
-  --Link-hoverColor: theme(colors.primary.800);
-
-  @apply text-primary-600 hover:text-primary-800;
-}
-
-.Link.is-white {
-  --Link-color: theme(colors.white.DEFAULT);
-  --Link-hoverColor: theme(colors.white.DEFAULT);
-
-  @apply text-white hover:text-white;
-}
-
-.Link.is-black {
-  --Link-color: theme(colors.black.DEFAULT);
-  --Link-hoverColor: theme(colors.black.DEFAULT);
-
-  @apply text-black hover:text-black;
-}
-
-.Link.is-red {
-  --Link-color: theme(colors.error.700);
-  --Link-hoverColor: theme(colors.error.800);
-
-  @apply text-error-700 hover:text-error-800;
-}
-
-.Link.is-orange {
-  --Link-color: theme(colors.warning.500);
-  --Link-hoverColor: theme(colors.warning.600);
-
-  @apply text-warning-500 hover:text-warning-600;
-}
-
-.Link.is-yellow {
-  --Link-color: theme(colors.warning.700);
-  --Link-hoverColor: theme(colors.warning.700);
-
-  @apply text-warning-700;
-}
-
-.Link.is-green {
-  --Link-color: theme(colors.success.600);
-  --Link-hoverColor: theme(colors.success.800);
-
-  @apply text-success-600 hover:text-success-800;
-}
-
-.Link.is-gray {
-  --Link-color: theme(colors.gray.700);
-  --Link-hoverColor: theme(colors.gray.900);
-
-  @apply text-gray-700 hover:text-gray-900;
-}
-
-.Link.is-purple {
-  --Link-color: theme(colors.purple.600);
-  --Link-hoverColor: theme(colors.purple.800);
-
-  @apply text-purple-600 hover:text-purple-800;
-}
-
-.Link.is-active {
-  text-decoration: var(--Link-hoverDecoration, underline);
-  @apply text-[var(--Link-hoverColor)];
-}
-
-.Checkbox.is-toggle {
-  @apply Checkbox-toggle;
-}
-
-/*
-  The fallback icon when we don't have a mapping to Lucide.
-  This is the case where a project needs to intervene.
-*/
-[data-icon-name],
-[data-icon] {
-  &::before {
-    @apply [--tw-content:var(--compat-icon)];
-  }
-}
-
-/* ClosableWindow.less compat */
-.ButtonForClosableWindow {
-  @apply cursor-pointer;
-}
-
-/* ScheduledEvents widget compat */
-.scheduledEvents-controls {
-  .icon-action-search {
-    @apply before:btu-icon-calendar-search;
-  }
-}
-
-/* v4 things which shouldn't appear in v5 */
-.v4-only {
-  @apply hidden;
-}

package/src/legacy/tool-ui/src/ComponentStatesMixin.ts

@@ -1,27 +0,0 @@
-import { LitElement } from 'lit'
-
-export interface DefaultComponentStates {
-  'btu-error': string
-  'btu-loading': string
-  'btu-expanded': string
-}
-
-interface ComponentStates extends DefaultComponentStates {
-  'btu-copy-to-clipboard-copied': string
-}
-
-export declare class ComponentStatesMixinInterface {
-  internals: ElementInternals
-  states: Set<keyof ComponentStates>
-}
-
-export const ComponentStatesMixin = <T extends Constructor<LitElement>>(
-  superclass: T,
-) => {
-  class ComponentStatesMixinClass extends superclass {
-    internals = this.attachInternals()
-    states = this.internals.states
-  }
-  return ComponentStatesMixinClass as Constructor<ComponentStatesMixinInterface> &
-    T
-}

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

@@ -1,19 +0,0 @@
-.ContentColors-displaySelect {
-  @apply mt-6;
-}
-
-.ContentColors {
-  @apply pb-6;
-}
-
-.ContentColors-colors {
-  @apply mt-4 grid grid-cols-[1fr,_3fr] gap-4;
-
-  .ContentColors-colorCodeColumn {
-    @apply overflow-hidden rounded-lg text-center text-xs font-medium;
-  }
-
-  .ContentColors-proportionalColumn {
-    @apply overflow-hidden rounded-lg;
-  }
-}