@brightspot/ui 3.0.1-cms-ui-migration.0 → 3.0.1-cms-ui-migration.1

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

@@ -0,0 +1,383 @@
+/**
+ * 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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,19 @@
+.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;
+  }
+}