@cloudscape-design/components-themeable 3.0.0

package/internal/scss/tiles/styles.scss

@@ -0,0 +1,106 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use 'sass:map';
+@use 'sass:math';
+
+@use '../internal/styles/tokens' as awsui;
+@use '../internal/styles' as styles;
+@use '../column-layout/styles.scss' as mixins;
+
+$gutter: awsui.$space-grid-gutter;
+
+.root {
+  @include styles.styles-reset;
+  @include styles.text-wrapping;
+  display: block;
+}
+
+@mixin make-column($nColumns) {
+  $nColumns: math.div(12, $nColumns);
+  $p: math.percentage(math.div(1, $nColumns));
+  flex: 0 0;
+  // IE11 ignores calc functions in flex shorthand declarations
+  // https://github.com/philipwalton/flexbugs#flexbug-8
+  flex-basis: calc(#{$p} - #{$gutter});
+  max-width: calc(#{$p} - #{$gutter});
+}
+
+.tile-container {
+  box-sizing: border-box;
+  border: styles.$control-border-width solid awsui.$color-border-input-default;
+  border-radius: styles.$control-border-radius;
+  padding: awsui.$space-xs awsui.$space-scaled-m;
+  display: flex;
+  flex-direction: column;
+
+  &.has-metadata {
+    padding-bottom: awsui.$space-s;
+  }
+
+  &.selected {
+    border: styles.$control-border-width solid awsui.$color-border-item-selected;
+    background: awsui.$color-background-item-selected;
+  }
+
+  &.disabled {
+    border: styles.$control-border-width solid awsui.$color-border-tiles-disabled;
+    background: awsui.$color-background-tiles-disabled;
+  }
+
+  @include styles.with-motion {
+    transition: border-color awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick,
+      background-color awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick;
+  }
+}
+
+.columns {
+  display: flex;
+  flex-wrap: wrap;
+  margin: calc(#{$gutter} / -2);
+  @each $i, $columns-setting in mixins.$column-breakpoint-spans {
+    &.column-#{$i} {
+      & > .tile-container {
+        margin: calc(#{$gutter} / 2);
+        box-sizing: border-box;
+        @include make-column(12);
+        &.breakpoint-xs {
+          @include make-column(map.get($columns-setting, 'xs'));
+        }
+        &.breakpoint-xxs {
+          @include make-column(map.get($columns-setting, 'xxs'));
+        }
+      }
+    }
+  }
+}
+
+.control {
+  flex-grow: 1;
+  margin-bottom: awsui.$space-s;
+
+  &.no-image {
+    margin-bottom: 0;
+  }
+}
+
+.image {
+  text-align: center;
+  flex: none; // needed to have IE11 calculate the height of this region correctly
+
+  // This manipulates a (optionally) passed img element for the image attribute of
+  // an item. We do not have control over the img element.
+  // stylelint-disable-next-line selector-max-type
+  & > img {
+    max-width: 100%;
+  }
+
+  &.disabled {
+    // stylelint-disable-next-line selector-max-type
+    & > img {
+      opacity: 0.3;
+    }
+  }
+}

package/internal/scss/time-input/styles.scss

@@ -0,0 +1,8 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.root {
+  /* used in test-utils */
+}

package/internal/scss/toggle/styles.scss

@@ -0,0 +1,72 @@
+/*
+ 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 awsui;
+@use '../internal/hooks/focus-visible' as focus-visible;
+
+$toggle-width: 2.4 * styles.$base-size;
+$toggle-height: 1.6 * styles.$base-size;
+$handle-size: 1.2 * styles.$base-size;
+$handle-offset: 0.2 * styles.$base-size;
+$shadow-color: rgba(0, 0, 0, 0.25);
+
+.root {
+  @include styles.styles-reset;
+  display: flex;
+}
+
+.input {
+  @include focus-visible.when-visible {
+    /* stylelint-disable-next-line selector-max-type, @cloudscape-design/no-implicit-descendant */
+    & + div {
+      @include styles.focus-highlight(2px);
+    }
+  }
+}
+
+.toggle-control {
+  @include styles.make-control-size($toggle-height, $toggle-width);
+  background: awsui.$color-background-toggle-default;
+  border-radius: 0.8 * styles.$base-size;
+  &-checked {
+    background: awsui.$color-background-control-checked;
+  }
+  &-disabled {
+    background: awsui.$color-background-control-disabled;
+    &.toggle-control-checked {
+      background: awsui.$color-background-toggle-checked-disabled;
+    }
+  }
+}
+
+.toggle-handle {
+  position: absolute;
+
+  border-radius: 0.6 * styles.$base-size;
+  background: awsui.$color-foreground-control-default;
+  box-shadow: 1px 1px $shadow-color;
+  width: $handle-size;
+  height: $handle-size;
+  top: $handle-offset;
+  left: $handle-offset;
+
+  &-checked {
+    transform: translateX(0.8 * styles.$base-size);
+  }
+
+  &-disabled {
+    background: awsui.$color-foreground-control-disabled;
+    box-shadow: none;
+  }
+
+  @include styles.with-motion {
+    // Exception: The toggle state transition does not follow the motion guidelines
+    // for the "State transition (quick)" group and is therefore not using
+    // standard variables from that group.
+    transition: transform awsui.$motion-duration-fast awsui.$motion-easing-ease-out-quart,
+      background-color awsui.$motion-duration-fast awsui.$motion-easing-ease-out-quart;
+  }
+}

package/internal/scss/token-group/constants.scss

@@ -0,0 +1,11 @@
+/*
+ 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 awsui;
+
+$token-background: awsui.$color-background-item-selected;
+
+$token-border-color: awsui.$color-border-item-selected;

package/internal/scss/token-group/styles.scss

@@ -0,0 +1,102 @@
+/*
+ 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 awsui;
+@use '../internal/hooks/focus-visible' as focus-visible;
+@use './constants' as constants;
+
+.root {
+  @include styles.styles-reset;
+
+  &.has-items {
+    padding-top: awsui.$space-xs;
+  }
+}
+
+.token {
+  border: awsui.$border-field-width solid constants.$token-border-color;
+  padding: styles.$control-padding-vertical awsui.$space-xxs styles.$control-padding-vertical
+    styles.$control-padding-horizontal;
+  display: flex;
+  align-items: flex-start;
+  background: constants.$token-background;
+  border-radius: awsui.$border-field-radius;
+  color: awsui.$color-text-body-default;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.dismiss-button {
+  margin: -1px -1px 0 awsui.$space-xxs;
+  border: 1px solid transparent;
+  padding: 0 awsui.$space-xxs;
+  color: awsui.$color-text-button-inline-icon-default;
+  background-color: transparent;
+
+  @include focus-visible.when-visible {
+    @include styles.focus-highlight(0px);
+  }
+
+  &:focus {
+    outline: none;
+    text-decoration: none;
+  }
+
+  &:hover {
+    cursor: pointer;
+    color: awsui.$color-text-button-inline-icon-hover;
+  }
+}
+
+.token-disabled {
+  border-color: awsui.$color-border-control-disabled;
+  background-color: awsui.$color-background-container-content;
+  color: awsui.$color-text-disabled;
+  pointer-events: none;
+
+  > .dismiss-button {
+    color: awsui.$color-text-button-inline-icon-disabled;
+
+    &:hover {
+      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+      cursor: initial;
+      color: awsui.$color-text-button-inline-icon-disabled;
+    }
+  }
+}
+
+.toggle {
+  @include styles.styles-reset;
+  @include styles.link-default;
+
+  display: flex;
+  align-items: center;
+  background-color: transparent;
+  border: styles.$control-border-width solid transparent;
+
+  margin-top: awsui.$space-scaled-xs;
+  padding: 0;
+
+  // Icon svg has one pixel around it. We need to shift the button one
+  // pixel to the left to vertically align it with the input field
+  margin-left: -1px;
+
+  &:active,
+  &:focus,
+  &:hover {
+    text-decoration: none;
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    text-decoration-color: transparent;
+  }
+
+  @include focus-visible.when-visible {
+    @include styles.form-focus-element(awsui.$border-control-focus-ring-radius-default);
+  }
+
+  > .description {
+    margin-left: awsui.$space-xxs;
+  }
+}

package/internal/scss/top-navigation/1.0-beta/styles.scss

@@ -0,0 +1,229 @@
+/*
+ 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 awsui;
+@use '../../internal/hooks/focus-visible' as focus-visible;
+
+.top-navigation {
+  @include styles.styles-reset;
+  background: awsui.$color-background-container-content;
+
+  > .padding-box {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    height: calc(#{awsui.$space-xxxl} + #{awsui.$space-scaled-m});
+    padding: 0 0 0 awsui.$space-l;
+  }
+
+  &.medium > .padding-box,
+  &.narrow > .padding-box {
+    height: calc(#{awsui.$space-xxxl} + #{awsui.$space-scaled-xs});
+  }
+
+  &.narrow > .padding-box {
+    height: awsui.$space-xxxl;
+    padding: 0 0 0 awsui.$space-xs;
+  }
+}
+
+.hidden {
+  @include styles.awsui-util-hide;
+  visibility: hidden;
+  width: 9000px;
+}
+
+// Ensures that tabbable child elements are hidden to a11y software.
+// ":not(#\9)" manually added because we want to override the default
+// visibility set by styles-reset, and "*" has a specificity of 0.
+/* stylelint-disable-next-line selector-combinator-disallowed-list, selector-max-universal */
+.hidden *:not(#\9) {
+  visibility: hidden;
+}
+
+.identity {
+  > .identity-link {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: awsui.$color-text-top-navigation-title;
+
+    &:hover {
+      color: awsui.$color-text-accent;
+    }
+    @include focus-visible.when-visible {
+      @include styles.link-focus;
+    }
+  }
+
+  &.no-logo {
+    // Prevent responsiveness from completely hiding the title.
+    min-width: 100px;
+  }
+}
+
+.logo {
+  display: block;
+  max-height: awsui.$space-xxl;
+  margin-left: awsui.$space-s;
+  width: auto;
+
+  // Setting an arbitrary min-width here discourages browser from lazy rendering
+  min-width: 10px;
+
+  &.narrow {
+    max-height: awsui.$space-xl;
+  }
+}
+
+.title {
+  @include styles.font-heading-m;
+  margin-left: awsui.$space-s;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .no-logo > .identity-link > & {
+    font-weight: styles.$font-weight-bold;
+  }
+}
+
+.inputs {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.search {
+  width: 100%;
+  max-width: 340px;
+  padding-left: awsui.$space-xxxl;
+
+  &-expanded {
+    max-width: none;
+    padding-left: awsui.$space-s;
+  }
+}
+
+.utilities {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: row;
+  align-items: stretch;
+  padding-left: awsui.$space-m;
+
+  // Expand height of utilies fully so that the dropdown is anchored directly underneath it.
+  height: 100%;
+
+  .medium > .padding-box > &,
+  .narrow > .padding-box > & {
+    padding-left: 0;
+  }
+}
+
+.utility-wrapper {
+  display: flex;
+  position: relative;
+  flex-shrink: 0;
+  align-items: center;
+
+  &::after {
+    display: block;
+    position: absolute;
+    content: '';
+
+    width: 1px;
+    right: 0;
+    top: awsui.$space-s;
+    bottom: awsui.$space-s;
+
+    background: awsui.$color-border-divider-default;
+  }
+
+  &.utility-wrapper-last:not(.utility-type-button-primary-button) {
+    padding-right: 0;
+
+    &::after {
+      display: none;
+    }
+  }
+
+  .medium > .padding-box > .utilities > &::after,
+  .narrow > .padding-box > .utilities > &::after {
+    top: awsui.$space-xs;
+    bottom: awsui.$space-xs;
+  }
+}
+
+.utility-wrapper-last {
+  // Add appropriate space to the right for the last utility
+  margin-right: awsui.$space-s;
+
+  &.utility-type-menu-dropdown {
+    // Remove the margin in case of a dropdown, because it's added as padding to the trigger.
+    // This makes sure that the dropdown trigger (and therefore the dropdown itself)
+    // will expand completely to the right edge of the top nav.
+    margin-right: 0;
+  }
+
+  // Adjust spacing in the smaller variant
+  .narrow > .padding-box > .utilities > & {
+    margin-right: 0;
+
+    &.utility-type-button-primary-button {
+      padding-right: awsui.$space-l;
+    }
+  }
+}
+
+.utility-type-menu-dropdown {
+  padding: 0 awsui.$space-s;
+  align-items: stretch;
+}
+
+.utility-type-button-link,
+.utility-type-button-primary-button {
+  padding: 0 awsui.$space-m;
+}
+
+.utility-type-button-primary-button {
+  // Hide dividers around primary buttons.
+  left: -1px;
+  border-left: 1px solid awsui.$color-background-container-content;
+  &::after {
+    display: none;
+  }
+}
+
+.utility-link-icon {
+  margin-right: awsui.$space-xxs;
+}
+
+.utility-button-external-icon {
+  display: inline-block;
+}
+
+.trigger {
+  /*used in test-utils*/
+}
+
+.rotate-up {
+  transform: rotate(-180deg);
+  @include styles.with-motion {
+    transition: transform awsui.$motion-duration-rotate-180 awsui.$motion-easing-rotate-180;
+  }
+}
+
+.rotate-down {
+  transform: rotate(0deg);
+  @include styles.with-motion {
+    transition: transform awsui.$motion-duration-rotate-180 awsui.$motion-easing-rotate-180;
+  }
+}

package/internal/scss/top-navigation/motion.scss

@@ -0,0 +1,13 @@
+/*
+ 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;
+
+.icon {
+  @include styles.with-motion {
+    transition: transform tokens.$motion-duration-rotate-90 tokens.$motion-easing-rotate-90;
+  }
+}