@indico-data/design-system 2.17.2 → 2.18.0

package/src/legacy/components/inputs/NoInputDatePicker/NoInputDatePicker.scss

@@ -0,0 +1,441 @@
+.rdp {
+  --rdp-cell-size: 40px;
+  --rdp-accent-color: #6833d0;
+  --rdp-background-color: #ffffff;
+  --rdp-accent-color-dark: #3003e1;
+  --rdp-background-color-dark: #180270;
+  --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */
+  --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */
+
+  margin: 1em;
+}
+
+/* Hide elements for devices that are not screen readers */
+.rdp-vhidden {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  position: absolute !important;
+  top: 0;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  border: 0 !important;
+}
+
+/* Buttons */
+.rdp-button_reset {
+  appearance: none;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  cursor: default;
+  color: inherit;
+  background: none;
+  font: inherit;
+
+  -moz-appearance: none;
+  -webkit-appearance: none;
+}
+
+.rdp-button_reset:focus-visible {
+  /* Make sure to reset outline only when :focus-visible is supported */
+  outline: none;
+}
+
+.rdp-button {
+  border: 2px solid transparent;
+}
+
+.rdp-button[disabled]:not(.rdp-day_selected) {
+  opacity: 0.25;
+}
+
+.rdp-button:not([disabled]) {
+  cursor: pointer;
+}
+
+.rdp-button:focus-visible:not([disabled]) {
+  color: inherit;
+  background-color: var(--rdp-background-color);
+  border: var(--rdp-outline);
+}
+
+.rdp-months {
+  display: flex;
+}
+
+.rdp-month {
+  margin: 0 1em;
+}
+
+.rdp-month:first-child {
+  margin-left: 0;
+}
+
+.rdp-month:last-child {
+  margin-right: 0;
+}
+
+.rdp-table {
+  margin: 0;
+  max-width: calc(var(--rdp-cell-size) * 7);
+  border-collapse: collapse;
+}
+
+.rdp-with_weeknumber .rdp-table {
+  max-width: calc(var(--rdp-cell-size) * 8);
+  border-collapse: collapse;
+}
+
+.rdp-caption {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0;
+  text-align: left;
+}
+
+.rdp-multiple_months .rdp-caption {
+  position: relative;
+  display: block;
+  text-align: center;
+}
+
+.rdp-caption_dropdowns {
+  position: relative;
+  display: inline-flex;
+}
+
+.rdp-caption_label {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  padding: 0 0.25em;
+  white-space: nowrap;
+  color: currentColor;
+  border: 0;
+  border: 2px solid transparent;
+  font-family: inherit;
+  font-size: 140%;
+  font-weight: bold;
+}
+
+.rdp-nav {
+  white-space: nowrap;
+}
+
+.rdp-multiple_months .rdp-caption_start .rdp-nav {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+
+.rdp-multiple_months .rdp-caption_end .rdp-nav {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+}
+
+.rdp-nav_button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rdp-cell-size);
+  height: var(--rdp-cell-size);
+  padding: 0.25em;
+  border-radius: 100%;
+}
+
+/* ---------- */
+/* Dropdowns  */
+/* ---------- */
+
+.rdp-dropdown_year,
+.rdp-dropdown_month {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.rdp-dropdown {
+  appearance: none;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: inherit;
+  opacity: 0;
+  border: none;
+  background-color: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.rdp-dropdown[disabled] {
+  opacity: unset;
+  color: unset;
+}
+
+.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {
+  background-color: var(--rdp-background-color);
+  border: var(--rdp-outline);
+  border-radius: 6px;
+}
+
+.rdp-dropdown_icon {
+  margin: 0 0 0 5px;
+}
+
+.rdp-head {
+  border: 0;
+}
+
+.rdp-head_row,
+.rdp-row {
+  height: 100%;
+}
+
+.rdp-head_cell {
+  vertical-align: middle;
+  font-size: 0.75em;
+  font-weight: 700;
+  text-align: center;
+  height: 100%;
+  height: var(--rdp-cell-size);
+  padding: 0;
+}
+
+.rdp-tbody {
+  border: 0;
+}
+
+.rdp-tfoot {
+  margin: 0.5em;
+}
+
+.rdp-cell {
+  width: var(--rdp-cell-size);
+  height: 100%;
+  height: var(--rdp-cell-size);
+  padding: 0;
+  text-align: center;
+}
+
+.rdp-weeknumber {
+  font-size: 0.75em;
+}
+
+.rdp-weeknumber,
+.rdp-day {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--rdp-cell-size);
+  max-width: var(--rdp-cell-size);
+  height: var(--rdp-cell-size);
+  margin: 0;
+  border: 2px solid transparent;
+  border-radius: 100%;
+}
+
+.rdp-day_today:not(.rdp-day_outside) {
+  font-weight: bold;
+}
+
+.rdp-day_selected,
+.rdp-day_selected:focus-visible,
+.rdp-day_selected:hover {
+  color: white;
+  opacity: 1;
+  background-color: var(--rdp-accent-color);
+}
+
+.rdp-day_outside {
+  opacity: 0.5;
+}
+
+.rdp-day_selected:focus-visible {
+  /* Since the background is the same use again the outline */
+  outline: var(--rdp-outline);
+  outline-offset: 2px;
+  z-index: 1;
+}
+
+.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.rdp[dir='rtl'] .rdp-day_range_start:not(.rdp-day_range_end) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.rdp[dir='rtl'] .rdp-day_range_end:not(.rdp-day_range_start) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.rdp-day_range_end.rdp-day_range_start {
+  border-radius: 100%;
+}
+
+.rdp-day_range_middle {
+  border-radius: 0;
+}
+
+/*# sourceMappingURL=style.css.map */
+
+/******************************
+  *   Indico Custom Styling For Insights
+  *******************************/
+.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {
+  background-color: #976cec;
+}
+.rdp-button,
+.rdp-day {
+  box-shadow: none;
+  color: #000000;
+  &:hover {
+    background-color: #6833d0;
+    color: white;
+  }
+}
+
+.rdp-head_cell,
+.rdp-cell {
+  border: none;
+}
+
+.DayPickerInput-Overlay {
+  border-radius: 4px;
+  z-index: 999;
+  .rdp {
+    background: white;
+    z-index: 999;
+    border: solid 1px #000000;
+    border-radius: 4px;
+    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.4);
+  }
+}
+
+.rdp-caption_label {
+  font-weight: 400;
+  font-size: 14px;
+  color: #000000;
+}
+
+.rdp-day_today {
+  background-color: #dbd5e6;
+  color: #ffffff;
+  font-weight: 400;
+}
+
+.rdp-button_reset {
+  &.rdp-button {
+    &.rdp-day {
+      &.rdp-day_selected {
+        background-color: #6833d0;
+        color: white;
+
+        &:focus {
+          color: white;
+        }
+        &:active {
+          color: white;
+        }
+      }
+    }
+  }
+}
+
+.rdp-head_cell {
+  color: #6833d0;
+  font-weight: 400;
+}
+
+.date__picker__trigger {
+  color: #000000;
+  cursor: pointer;
+}
+
+.custom__caption {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 5px 15px 5px;
+
+  .custom__caption__text {
+    font-size: 14px;
+    color: #000000;
+    margin: 0;
+  }
+
+  .custom__caption__action__button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    box-shadow: none;
+    padding: 0 5px 0 5px;
+
+    border-radius: 60px;
+    color: #6833d0;
+    height: 20px;
+    width: 20px;
+
+    &:hover {
+      background-color: #6833d0;
+      color: #ffffff;
+      border-radius: 20px;
+
+      .rdp-nav_icon {
+        color: #ffffff;
+      }
+    }
+
+    .rdp-nav_icon {
+      color: #6833d0;
+    }
+  }
+}
+
+.visually-hidden,
+.visually-hidden-focusable:not(:focus):not(:focus-within) {
+  border: 0 !important;
+  clip: rect(0, 0, 0, 0) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  white-space: nowrap !important;
+  width: 1px !important;
+}
+
+.visually-hidden:not(caption),
+.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
+  position: absolute !important;
+}

package/src/legacy/components/inputs/NoInputDatePicker/NoInputDatePicker.tsx

@@ -14,8 +14,6 @@ import { usePopper } from 'react-popper';
 import { IconName, IconSizes, PermafrostComponent } from '@/types';
 import { Icon } from '@/components';
 
-import { StyledNoInputDatePicker } from './NoInputDatePicker.styles';
-
 type Props = PermafrostComponent & {
   ariaLabel?: string;
   disableBeforeDate?: Date;
@@ -163,8 +161,9 @@ export const NoInputDatePicker = (props: Props) => {
       onChange(range);
     }
   };
+
   return (
-    <StyledNoInputDatePicker
+    <div
       className={className}
       aria-label={ariaLabel || 'date select'}
       aria-describedby={`picker-label--${id}`}
@@ -241,6 +240,6 @@ export const NoInputDatePicker = (props: Props) => {
           </div>
         </FocusTrap>
       )}
-    </StyledNoInputDatePicker>
+    </div>
   );
 };

package/src/legacy/components/modals/ModalBase/ModalBase.tsx

@@ -10,7 +10,6 @@ export type ModalBaseProps = PermafrostComponent & {
   children: React.ReactNode | React.ReactNode[];
   clickToDismiss?(): void;
   describedBy?: string;
-  /** a selector representing the desired parent; defaults to `#root` */
   node?: string;
   open: boolean;
   preventEscDismiss?: boolean;
@@ -51,6 +50,10 @@ export function ModalBase(props: ModalBaseProps) {
     ariaProps['describedby'] = describedBy;
   }
 
+  // Try to render modal within the theme-root, otherwise attach to the root
+  const parentSelector = () =>
+    document.getElementById('theme-root') || document.getElementById('root');
+
   return (
     <StyledModalBase
       ariaHideApp={false}
@@ -62,6 +65,7 @@ export function ModalBase(props: ModalBaseProps) {
       isOpen={open}
       node={node}
       onRequestClose={clickToDismiss}
+      parentSelector={parentSelector}
       shouldCloseOnEsc={!preventEscDismiss}
       shouldReturnFocusAfterClose={!preventReturnFocus}
       maxWidth={maxWidth}

package/src/styles/globals.scss

@@ -0,0 +1,11 @@
+// Common Variables
+:root,
+:root [data-theme='light'],
+:root [data-theme='dark'] {
+  --pf-form-input-border-color: var(--pf-gray-color-700);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'] {
+  --pf-form-input-border-color: var(--pf-primary-color-200);
+}

package/src/styles/index.scss

@@ -1,6 +1,6 @@
 // Variables
 @import 'variables/index.scss';
-
+@import './globals.scss';
 // Components
 @import '../components/button/styles/Button.scss';
 @import '../components/icons/styles/Icon.scss';
@@ -16,7 +16,7 @@
 @import '../components/forms/toggle/styles/Toggle.scss';
 @import '../components/skeleton/styles/Skeleton.scss';
 @import '../components/card/styles/Card.scss';
-
+@import '../legacy/components/inputs/NoInputDatePicker/NoInputDatePicker.scss';
 @import 'typography';
 @import 'colors';
 @import 'borders';

package/src/styles/variables/themes/dark.scss

@@ -7,10 +7,11 @@
   --pf-primary-color-300: #3b455e;
   --pf-primary-color-400: #323a4d;
   --pf-primary-color-500: #262c3a;
-  --pf-primary-color-600: #1f2431;
-  --pf-primary-color-700: #1c2632;
+  --pf-primary-color-600: #182432;
+  --pf-primary-color-700: #101a26;
   --pf-primary-color-800: #1b202c;
   --pf-primary-color-900: #141b24;
+  --pf-primary-color-1000: #271153;
 
   // Secondary Color
   --pf-secondary-color: #0070f5;
@@ -19,11 +20,11 @@
   --pf-secondary-color-200: #b3d4fc;
   --pf-secondary-color-300: #7ab5fa;
   --pf-secondary-color-400: #4797f5;
-  --pf-secondary-color-500: #0070f5;
-  --pf-secondary-color-600: #0067e1;
-  --pf-secondary-color-700: #005ac4;
-  --pf-secondary-color-800: #004eac;
-  --pf-secondary-color-900: #004393;
+  --pf-secondary-color-500: #2482f5;
+  --pf-secondary-color-600: #2070d1;
+  --pf-secondary-color-700: #178ee0;
+  --pf-secondary-color-800: #3d5a7d;
+  --pf-secondary-color-900: #0b2647;
 
   // Gray Color
   --pf-gray-color: #bfc1c3;

package/src/styles/variables/themes/light.scss

@@ -12,6 +12,7 @@
   --pf-primary-color-700: #5329a6;
   --pf-primary-color-800: #492492;
   --pf-primary-color-900: #3e1f7d;
+  --pf-primary-color-1000: #271153;
 
   // Secondary Color
   --pf-secondary-color: #0070f5;

package/lib/src/legacy/components/inputs/NoInputDatePicker/NoInputDatePicker.styles.d.ts

@@ -1 +0,0 @@
-export declare const StyledNoInputDatePicker: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;