@cloudscape-design/components-themeable 3.0.0

package/internal/scss/date-picker/styles.scss

@@ -0,0 +1,193 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../internal/styles/index' as styles;
+@use '../internal/styles/tokens' as awsui;
+@use '../internal/hooks/focus-visible' as focus-visible;
+@use '../internal/styles/typography/index' as typographyConstants;
+@use './motion';
+
+$calendar-header-color: awsui.$color-text-dropdown-item-default;
+$calendar-grid-border-color: awsui.$color-border-calendar-grid;
+$calendar-grid-day-color: awsui.$color-text-dropdown-item-default;
+$calendar-grid-day-name-color: awsui.$color-text-calendar-month;
+$calendar-grid-disabled-day-color: awsui.$color-text-dropdown-item-disabled;
+$calendar-grid-nonmonth-day-color: awsui.$color-text-dropdown-item-secondary;
+$calendar-grid-hover-background-color: awsui.$color-background-dropdown-item-hover;
+$calendar-grid-hover-border-color: awsui.$color-border-dropdown-item-hover;
+$calendar-grid-today-background-color: awsui.$color-background-calendar-today;
+$calendar-grid-selected-background-color: awsui.$color-background-dropdown-item-selected;
+$calendar-grid-selected-border-color: awsui.$color-border-dropdown-item-selected;
+$calendar-grid-border: 1px solid $calendar-grid-border-color;
+
+.root {
+  @include styles.styles-reset;
+}
+
+.date-picker-container {
+  position: relative;
+  max-width: 234px;
+}
+
+.date-picker-trigger {
+  display: flex;
+}
+
+.date-picker-input {
+  padding-right: awsui.$space-xs;
+  width: 100%;
+}
+
+.open-calendar-button {
+  /* used in test-utils */
+}
+
+.calendar {
+  display: block;
+  // IE11 does not calculate the height correctly when in nested flex containers (@see https://github.com/philipwalton/flexbugs#flexbug-3)
+  width: 234px;
+  overflow: auto;
+  &:focus {
+    outline: none;
+  }
+
+  &-inner {
+    margin: awsui.$space-xs;
+  }
+
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &-header-month {
+    @include styles.font-body-m;
+    font-weight: typographyConstants.$font-weight-bold;
+    color: $calendar-header-color;
+  }
+
+  &-next-month-btn {
+    /* used for identifying element */
+  }
+
+  &-prev-month-btn {
+    /* used for identifying element */
+  }
+
+  &-day-names {
+    display: flex;
+    justify-content: stretch;
+  }
+
+  &-day-name {
+    flex: 1 1 0%;
+    width: 0;
+    word-break: break-word;
+    text-align: center;
+    padding: awsui.$space-s 0 awsui.$space-xxs;
+    color: $calendar-grid-day-name-color;
+    @include styles.font-body-s;
+  }
+
+  &-dates {
+    border: $calendar-grid-border;
+  }
+  &-week {
+    display: flex;
+    justify-content: stretch;
+  }
+
+  &-day {
+    flex: 1 1 0%;
+    width: 0;
+    word-break: break-word;
+    text-align: center;
+    border-bottom: $calendar-grid-border;
+    border-right: $calendar-grid-border;
+    border-radius: awsui.$border-calendar-grid-radius;
+    padding: awsui.$space-xxs 0;
+    color: $calendar-grid-disabled-day-color;
+    position: relative;
+
+    &:last-child {
+      border-right: none;
+    }
+
+    &-in-last-week {
+      border-bottom: none;
+    }
+
+    &-focusable {
+      /* used for identifying element */
+    }
+
+    &-enabled {
+      cursor: pointer;
+      color: $calendar-grid-nonmonth-day-color;
+
+      &.calendar-day-current-month {
+        color: $calendar-grid-day-color;
+        &:hover {
+          color: awsui.$color-text-calendar-day-hover;
+          background-color: $calendar-grid-hover-background-color;
+          &:not(.calendar-day-selected) {
+            &::after {
+              border: awsui.$border-item-width solid $calendar-grid-hover-border-color;
+              border-radius: awsui.$border-calendar-grid-radius;
+            }
+          }
+        }
+      }
+    }
+
+    &-today {
+      background-color: $calendar-grid-today-background-color;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: -1px;
+      left: -1px;
+      bottom: -1px;
+      right: -1px;
+      background-color: transparent;
+    }
+    > .day-inner {
+      position: relative;
+      z-index: 1;
+    }
+
+    &:focus {
+      outline: none;
+      @include styles.focus-highlight(
+        awsui.$space-calendar-grid-focus-outline-gutter,
+        awsui.$border-calendar-grid-focus-ring-radius
+      );
+      &::before {
+        z-index: 2;
+      }
+    }
+
+    &-selected {
+      border-color: transparent;
+      position: relative;
+      &::after {
+        background-color: $calendar-grid-selected-background-color;
+        border: awsui.$border-item-width solid $calendar-grid-selected-border-color;
+        border-radius: awsui.$border-calendar-grid-radius;
+      }
+      > .day-inner {
+        color: awsui.$color-text-calendar-day-selected;
+        position: relative;
+      }
+    }
+  }
+  @include styles.styles-reset;
+  @include focus-visible.when-visible {
+    @include styles.container-focus();
+  }
+}

package/internal/scss/date-range-picker/calendar/grids/day/styles.scss

@@ -0,0 +1,197 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../../../internal/styles/index' as styles;
+@use '../../../../internal/styles/tokens' as awsui;
+@use '../../../../internal/hooks/focus-visible' as focus-visible;
+
+$calendar-grid-border-color: awsui.$color-border-calendar-grid;
+
+$calendar-grid-day-color: awsui.$color-text-dropdown-item-default;
+$calendar-grid-disabled-day-color: awsui.$color-text-dropdown-item-disabled;
+
+$calendar-grid-hover-background-color: awsui.$color-background-dropdown-item-hover;
+$calendar-grid-hover-border-color: awsui.$color-border-dropdown-item-hover;
+
+$calendar-grid-today-background-color: awsui.$color-background-calendar-today;
+
+$calendar-grid-selected-background-color: awsui.$color-background-control-checked;
+$calendar-grid-selected-text-color: awsui.$color-background-control-default;
+$calendar-grid-selected-border-color: awsui.$color-background-control-checked;
+$calendar-grid-in-range-background-color: awsui.$color-background-dropdown-item-selected;
+
+$calendar-grid-selected-focused-box-shadow: 0 0 0 2px awsui.$color-border-calendar-grid-selected-focus-ring;
+
+$calendar-grid-border: 1px solid $calendar-grid-border-color;
+
+$calendar-grid-width: 234px;
+
+@mixin border-radius($horizontal, $vertical) {
+  &,
+  &::after {
+    border-#{$horizontal}-#{$vertical}-radius: awsui.$border-item-radius;
+  }
+}
+
+@mixin in-range-borders {
+  $sides: top, right, bottom, left;
+  @each $side in $sides {
+    &.in-range-border-#{$side}::after {
+      border-#{$side}: awsui.$border-item-width solid $calendar-grid-selected-border-color;
+    }
+  }
+}
+
+@mixin in-range-border-radius($horizontal, $vertical) {
+  &.in-range-border-#{$horizontal}.in-range-border-#{$vertical} {
+    @include border-radius($horizontal, $vertical);
+  }
+}
+
+.day {
+  flex: 1 1 0%;
+  width: 0;
+  word-break: break-word;
+  text-align: center;
+  border-bottom: $calendar-grid-border;
+  border-right: $calendar-grid-border;
+  padding: awsui.$space-xxs 0;
+  color: $calendar-grid-disabled-day-color;
+  position: relative;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    top: calc(-1 * #{awsui.$border-item-width});
+    left: -1px;
+    bottom: -1px;
+    right: calc(-1 * #{awsui.$border-item-width});
+    background-color: transparent;
+  }
+
+  > .day-inner {
+    position: relative;
+    z-index: 1;
+  }
+
+  @include focus-visible.when-visible {
+    z-index: 2;
+    @include styles.focus-highlight(
+      awsui.$space-calendar-grid-focus-outline-gutter,
+      awsui.$border-calendar-grid-focus-ring-radius
+    );
+  }
+}
+
+.in-first-row:not(.in-previous-month) {
+  border-top: $calendar-grid-border;
+}
+
+.in-previous-month:not(.last-day-of-month) {
+  border-right-color: transparent;
+}
+
+.in-next-month {
+  border-color: transparent;
+}
+
+.in-first-column {
+  border-left: 1px solid transparent;
+
+  &.in-current-month {
+    border-left: $calendar-grid-border;
+  }
+}
+
+.enabled {
+  cursor: pointer;
+
+  &.in-current-month {
+    color: $calendar-grid-day-color;
+    &:not(.in-range),
+    &.end-date.start-date,
+    &.no-range {
+      &,
+      &::after {
+        border-radius: awsui.$border-calendar-grid-radius;
+      }
+    }
+    &:hover {
+      color: awsui.$color-text-calendar-day-hover;
+      background-color: $calendar-grid-hover-background-color;
+      &:not(.selected) {
+        &::after {
+          border: awsui.$border-item-width solid $calendar-grid-hover-border-color;
+        }
+      }
+    }
+  }
+}
+
+.today:not(.in-range) {
+  background-color: $calendar-grid-today-background-color;
+  border-radius: awsui.$border-calendar-grid-radius;
+}
+
+.selected {
+  border-color: transparent;
+  position: relative;
+  z-index: 2;
+
+  @include focus-visible.when-visible {
+    @include styles.focus-highlight(
+      awsui.$space-calendar-grid-selected-focus-outline-gutter,
+      awsui.$border-calendar-grid-focus-ring-radius,
+      $calendar-grid-selected-focused-box-shadow
+    );
+    &::before {
+      z-index: 1;
+    }
+  }
+
+  &::after {
+    background-color: $calendar-grid-selected-background-color;
+    border: awsui.$border-item-width solid $calendar-grid-selected-border-color;
+    z-index: 0;
+  }
+
+  &.start-date,
+  &.range-start-date {
+    @include border-radius(top, left);
+    &.in-range-border-bottom {
+      @include border-radius(bottom, left);
+    }
+  }
+
+  &.end-date,
+  &.range-end-date {
+    @include border-radius(bottom, right);
+    &.in-range-border-top {
+      @include border-radius(top, right);
+    }
+  }
+
+  > .day-inner {
+    color: $calendar-grid-selected-text-color;
+    position: relative;
+    z-index: 2;
+  }
+}
+
+.in-range {
+  background-color: $calendar-grid-in-range-background-color;
+
+  @include in-range-borders;
+
+  @include in-range-border-radius(top, right);
+  @include in-range-border-radius(bottom, right);
+  @include in-range-border-radius(bottom, left);
+  @include in-range-border-radius(top, left);
+}

package/internal/scss/date-range-picker/motion.scss

@@ -0,0 +1,15 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../internal/styles/index' as styles;
+@use '../internal/styles/tokens' as awsui;
+
+.calendar {
+  @include styles.with-motion {
+    @include styles.animation-fade-in-0;
+    animation: awsui-motion-fade-in-0 awsui.$motion-duration-show-quick awsui.$motion-easing-show-quick;
+    animation-fill-mode: both;
+  }
+}

package/internal/scss/date-range-picker/relative-range/styles.scss

@@ -0,0 +1,55 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../internal/styles/index' as styles;
+@use '../../internal/styles/tokens' as awsui;
+@use '../../internal/styles/typography/index' as typographyConstants;
+
+.custom-range {
+  // This padding aligns the custom range selection with the radio labels
+  padding-left: calc(#{1.4 * styles.$base-size} + #{awsui.$space-xs});
+
+  display: flex;
+  width: 80%;
+}
+.custom-range--no-padding {
+  padding-left: 0;
+}
+
+.custom-range-form-controls {
+  display: flex;
+  width: 100%;
+
+  > .custom-range-duration,
+  > .custom-range-unit {
+    width: 50%;
+  }
+
+  > .custom-range-duration {
+    margin-right: awsui.$space-xs;
+  }
+
+  &.vertical {
+    flex-direction: column;
+
+    > .custom-range-duration,
+    > .custom-range-unit {
+      width: 100%;
+    }
+
+    > .custom-range-unit {
+      margin-top: awsui.$space-s;
+    }
+  }
+}
+
+.custom-range-duration-input,
+.custom-range-unit-select {
+  /* used in test-utils */
+}
+
+.relative-range-radio-group {
+  /* used in test-utils */
+}

package/internal/scss/date-range-picker/styles.scss

@@ -0,0 +1,226 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../internal/styles/index' as styles;
+@use '../internal/styles/tokens' as awsui;
+@use '../internal/hooks/focus-visible' as focus-visible;
+@use '../internal/styles/typography/index' as typographyConstants;
+@use './motion';
+
+$calendar-header-color: awsui.$color-text-body-default;
+$calendar-grid-day-name-color: awsui.$color-text-calendar-month;
+
+$calendar-grid-width: awsui.$size-calendar-grid-width;
+
+.root {
+  @include styles.styles-reset;
+  max-width: 32em;
+}
+
+.trigger-wrapper {
+  min-width: calc(#{$calendar-grid-width} + 2 * #{awsui.$space-l});
+}
+
+.trigger-flexbox {
+  display: flex;
+}
+
+.preferred-wordbreak {
+  display: inline-block;
+}
+
+.calendar {
+  display: block;
+  width: calc(2 * #{$calendar-grid-width} + #{awsui.$space-xs});
+
+  &.one-grid {
+    width: $calendar-grid-width;
+  }
+
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+  }
+
+  &-header-months-wrapper {
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex: 1;
+
+    pointer-events: none;
+  }
+
+  &-header-month {
+    @include styles.font-body-m;
+    font-weight: typographyConstants.$font-weight-bold;
+    color: $calendar-header-color;
+
+    display: flex;
+
+    pointer-events: auto;
+  }
+
+  &-next-month-btn {
+    /* used for identifying element */
+  }
+
+  &-prev-month-btn {
+    /* used for identifying element */
+  }
+
+  &-day-names {
+    display: flex;
+    justify-content: stretch;
+  }
+
+  &-day-name {
+    flex: 1 1 0%;
+    width: 0;
+    word-break: break-word;
+    text-align: center;
+    padding: awsui.$space-s 0 awsui.$space-xxs;
+    color: $calendar-grid-day-name-color;
+    @include styles.font-body-s;
+  }
+
+  &-week {
+    display: flex;
+    justify-content: stretch;
+  }
+}
+
+.first-grid,
+.second-grid {
+  /* used in test-utils */
+}
+
+.grid {
+  width: $calendar-grid-width;
+}
+
+.date-and-time-wrapper {
+  display: flex;
+  width: $calendar-grid-width;
+
+  &__date {
+    margin-right: awsui.$space-xs;
+  }
+
+  & > .date-and-time-wrapper__time,
+  & > .date-and-time-wrapper__date {
+    flex-grow: 1;
+  }
+}
+
+.date-and-time-constrainttext {
+  @include styles.form-control-description;
+}
+
+.footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  border-top: 1px solid #{awsui.$color-border-dropdown-item-default};
+  padding: 0 awsui.$space-l awsui.$space-s;
+
+  &.has-clear-button {
+    justify-content: space-between;
+  }
+
+  &.one-grid {
+    padding: 0 awsui.$space-xs awsui.$space-s;
+  }
+}
+
+.footer-button-wrapper {
+  padding-top: awsui.$space-s;
+}
+
+.icon-wrapper {
+  color: awsui.$color-text-interactive-default;
+  margin-right: awsui.$space-xs;
+}
+
+.label {
+  user-select: text;
+  cursor: default;
+}
+
+.label.label-enabled:hover > .trigger-flexbox > .icon-wrapper {
+  color: awsui.$color-text-interactive-hover;
+}
+
+.label-text {
+  @include styles.form-placeholder;
+}
+
+.mode-switch {
+  /* used in test-utils */
+}
+
+.dropdown {
+  // There needs to be an outer container because we set a fixed width on the
+  // actual dropdown and calendar grid, so the scrollbar would mess up the
+  // widths.
+  overflow: auto;
+
+  border-top: 1px solid #{awsui.$color-border-container-top};
+  border-bottom: 1px solid #{awsui.$color-border-container-top};
+  border-radius: awsui.$border-dropdown-radius;
+
+  &:focus {
+    outline: none;
+  }
+  @include focus-visible.when-visible {
+    @include styles.container-focus();
+  }
+}
+
+.dropdown-content {
+  user-select: text;
+  background-color: awsui.$color-background-container-content;
+  width: calc(2 * #{$calendar-grid-width} + #{awsui.$space-xs} + 2 * #{awsui.$space-l});
+
+  &.one-grid {
+    width: calc(#{$calendar-grid-width} + 2 * #{awsui.$space-l});
+  }
+}
+
+.start-date-input,
+.start-time-input,
+.end-date-input,
+.end-time-input {
+  /* used in test-utils */
+}
+
+.validation-section {
+  /* used in test-utils */
+}
+
+.validation-error {
+  /* used in test-utils */
+}
+
+.clear-button {
+  /* used in test-utils */
+}
+.apply-button {
+  /* used in test-utils */
+}
+.cancel-button {
+  /* used in test-utils */
+}
+.calendar-aria-live {
+  /* used in test-utils */
+}

package/internal/scss/expandable-section/motion.scss

@@ -0,0 +1,30 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../internal/styles' as styles;
+@use '../internal/styles/tokens' as tokens;
+
+.content {
+  &-enter {
+    @include styles.with-motion {
+      @include styles.animation-fade-in;
+      animation: awsui-motion-fade-in tokens.$motion-duration-show-paced tokens.$motion-easing-show-paced;
+    }
+  }
+}
+
+.trigger {
+  &-expanded {
+    @include styles.with-motion {
+      transition: border-bottom-color tokens.$motion-duration-show-paced tokens.$motion-easing-show-paced;
+    }
+  }
+}
+
+.icon {
+  @include styles.with-motion {
+    transition: transform tokens.$motion-duration-rotate-90 tokens.$motion-easing-rotate-90;
+  }
+}