npm - @aws-amplify/ui - Versions diffs - 3.8.1 → 3.9.0 - Mend

@aws-amplify/ui 3.8.1 → 3.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/dist/esm/helpers/authenticator/utils.js +1 -1
package/dist/esm/index.js +1 -1
package/dist/esm/machines/authenticator/index.js +1 -1
package/dist/esm/theme/defaultDarkModeOverride.js +1 -0
package/dist/esm/theme/tokens/colors.js +1 -1
package/dist/esm/theme/tokens/components/link.js +1 -1
package/dist/esm/theme/tokens/components/sliderField.js +1 -1
package/dist/esm/theme/tokens/components/switchField.js +1 -1
package/dist/index.js +2 -2
package/dist/styles.css +1014 -448
package/dist/theme.css +6 -7
package/dist/types/helpers/authenticator/utils.d.ts +3 -2
package/dist/types/theme/defaultDarkModeOverride.d.ts +6 -0
package/dist/types/theme/index.d.ts +1 -0
package/dist/types/theme/tokens/components/link.d.ts +1 -6
package/dist/types/theme/tokens/types/scales.d.ts +1 -0
package/dist/types/types/authenticator/stateMachine/authMachine.d.ts +2 -0
package/package.json +1 -1

package/dist/styles.css CHANGED Viewed

@@ -3,7 +3,7 @@
  */
 /**
  * Do not edit directly
- * Generated on Mon, 09 May 2022 17:14:39 GMT
+ * Generated on Tue, 17 May 2022 21:59:14 GMT
  */
 :root, [data-amplify-theme] {
   --amplify-transforms-slide-x-large: translateX(2em);
@@ -101,7 +101,7 @@
   --amplify-colors-neutral-100: hsl(210, 50%, 10%);
   --amplify-colors-neutral-90: hsl(210, 25%, 25%);
   --amplify-colors-neutral-80: hsl(210, 10%, 40%);
-  --amplify-colors-neutral-60: hsl(210, 6%, 70%);
+  --amplify-colors-neutral-60: hsl(210, 8%, 55%);
   --amplify-colors-neutral-40: hsl(210, 5%, 87%);
   --amplify-colors-neutral-20: hsl(210, 5%, 94%);
   --amplify-colors-neutral-10: hsl(210, 5%, 98%);
@@ -353,6 +353,7 @@
   --amplify-colors-background-error: var(--amplify-colors-red-20);
   --amplify-colors-background-warning: var(--amplify-colors-orange-20);
   --amplify-colors-background-info: var(--amplify-colors-blue-20);
+  --amplify-colors-background-quaternary: var(--amplify-colors-neutral-60);
   --amplify-colors-background-tertiary: var(--amplify-colors-neutral-20);
   --amplify-colors-background-secondary: var(--amplify-colors-neutral-10);
   --amplify-colors-background-primary: var(--amplify-colors-white);
@@ -506,8 +507,6 @@
   --amplify-components-loader-font-size: var(--amplify-font-sizes-xs);
   --amplify-components-loader-height: var(--amplify-font-sizes-medium);
   --amplify-components-loader-width: var(--amplify-font-sizes-medium);
-  --amplify-components-link-small-font-size: var(--amplify-font-sizes-small);
-  --amplify-components-link-large-font-size: var(--amplify-font-sizes-large);
   --amplify-components-heading-line-height: var(--amplify-line-heights-small);
   --amplify-components-heading-6-font-weight: 800;
   --amplify-components-heading-6-font-size: var(--amplify-font-sizes-medium);
@@ -667,8 +666,8 @@
   --amplify-components-table-header-border-color: var(--amplify-colors-border-tertiary);
   --amplify-components-table-row-striped-background-color: var(--amplify-colors-background-secondary);
   --amplify-components-table-row-hover-background-color: var(--amplify-colors-background-tertiary);
-  --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-brand-primary-60);
-  --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-tertiary);
+  --amplify-components-switchfield-track-checked-background-color: var(--amplify-colors-brand-primary-80);
+  --amplify-components-switchfield-track-background-color: var(--amplify-colors-background-quaternary);
   --amplify-components-switchfield-thumb-border-color: var(--amplify-colors-border-tertiary);
   --amplify-components-switchfield-thumb-background-color: var(--amplify-colors-background-primary);
   --amplify-components-sliderfield-thumb-hover-background-color: var(--amplify-colors-background-primary);
@@ -676,7 +675,7 @@
   --amplify-components-sliderfield-thumb-box-shadow: var(--amplify-shadows-small);
   --amplify-components-sliderfield-thumb-background-color: var(--amplify-colors-background-primary);
   --amplify-components-sliderfield-range-background-color: var(--amplify-colors-brand-primary-80);
-  --amplify-components-sliderfield-track-background-color: var(--amplify-colors-background-tertiary);
+  --amplify-components-sliderfield-track-background-color: var(--amplify-colors-background-quaternary);
   --amplify-components-select-option-background-color: var(--amplify-colors-background-primary);
   --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary);
   --amplify-components-rating-filled-color: var(--amplify-colors-brand-secondary-80);
@@ -914,18 +913,18 @@ select {
   display: block;
   overflow: auto;
 }
-.amplify-scrollview[data-orientation=horizontal] {
+.amplify-scrollview--horizontal {
   overflow-x: scroll;
   overflow-y: initial;
 }
-.amplify-scrollview[data-orientation=vertical] {
+.amplify-scrollview--vertical {
   overflow-x: initial;
   overflow-y: scroll;
 }
 .amplify-text {
-  color: var(--amplify-components-text-color);
   display: block;
+  color: var(--amplify-components-text-color);
 }
 b.amplify-text,
 em.amplify-text,
@@ -935,67 +934,67 @@ strong.amplify-text {
   display: inline;
 }
-.amplify-text[data-truncate=true] {
+.amplify-text--truncated {
   display: inline-block;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.amplify-text[data-variation=primary] {
+.amplify-text--primary {
   color: var(--amplify-components-text-primary-color);
 }
-.amplify-text[data-variation=secondary] {
+.amplify-text--secondary {
   color: var(--amplify-components-text-secondary-color);
 }
-.amplify-text[data-variation=tertiary] {
+.amplify-text--tertiary {
   color: var(--amplify-components-text-tertiary-color);
 }
-.amplify-text[data-variation=error] {
+.amplify-text--error {
   color: var(--amplify-components-text-error-color);
 }
-.amplify-text[data-variation=info] {
+.amplify-text--info {
   color: var(--amplify-components-text-info-color);
 }
-.amplify-text[data-variation=success] {
+.amplify-text--success {
   color: var(--amplify-components-text-success-color);
 }
-.amplify-text[data-variation=warning] {
+.amplify-text--warning {
   color: var(--amplify-components-text-warning-color);
 }
 .amplify-badge {
-  color: var(--amplify-components-badge-color);
   background-color: var(--amplify-components-badge-background-color);
   border-radius: var(--amplify-components-badge-border-radius);
+  color: var(--amplify-components-badge-color);
   display: inline-flex;
   font-size: var(--amplify-components-badge-font-size);
   font-weight: var(--amplify-components-badge-font-weight);
+  line-height: var(--amplify-components-badge-line-height);
   padding: var(--amplify-components-badge-padding-vertical) var(--amplify-components-badge-padding-horizontal);
   text-align: var(--amplify-components-badge-text-align);
-  line-height: var(--amplify-components-badge-line-height);
 }
-.amplify-badge[data-variation=info] {
+.amplify-badge--info {
   color: var(--amplify-components-badge-info-color);
   background-color: var(--amplify-components-badge-info-background-color);
 }
-.amplify-badge[data-variation=error] {
+.amplify-badge--error {
   color: var(--amplify-components-badge-error-color);
   background-color: var(--amplify-components-badge-error-background-color);
 }
-.amplify-badge[data-variation=warning] {
+.amplify-badge--warning {
   color: var(--amplify-components-badge-warning-color);
   background-color: var(--amplify-components-badge-warning-background-color);
 }
-.amplify-badge[data-variation=success] {
+.amplify-badge--success {
   color: var(--amplify-components-badge-success-color);
   background-color: var(--amplify-components-badge-success-background-color);
 }
-.amplify-badge[data-size=small] {
+.amplify-badge--small {
   font-size: var(--amplify-components-badge-small-font-size);
   padding: var(--amplify-components-badge-small-padding-vertical) var(--amplify-components-badge-small-padding-horizontal);
 }
-.amplify-badge[data-size=large] {
+.amplify-badge--large {
   font-size: var(--amplify-components-badge-large-font-size);
   padding: var(--amplify-components-badge-large-padding-vertical) var(--amplify-components-badge-large-padding-horizontal);
 }
@@ -1004,19 +1003,18 @@ strong.amplify-text {
  * Button base styles
  */
 .amplify-button {
-  display: inline-flex;
-  justify-content: center;
   align-items: center;
-  border-radius: var(--amplify-components-button-border-radius);
-  box-sizing: border-box;
-  font-weight: var(--amplify-components-button-font-weight);
-  transition: all var(--amplify-components-button-transition-duration);
-  border-width: var(--amplify-components-button-border-width);
-  border-style: var(--amplify-components-button-border-style);
   border-color: var(--amplify-components-button-border-color);
   border-radius: var(--amplify-components-button-border-radius);
+  border-style: var(--amplify-components-button-border-style);
+  border-width: var(--amplify-components-button-border-width);
+  box-sizing: border-box;
   color: var(--amplify-components-button-color);
+  cursor: pointer;
+  display: inline-flex;
   font-size: var(--amplify-components-button-font-size);
+  font-weight: var(--amplify-components-button-font-weight);
+  justify-content: center;
   line-height: var(--amplify-components-button-line-height);
   -webkit-padding-before: var(--amplify-components-button-padding-block-start);
           padding-block-start: var(--amplify-components-button-padding-block-start);
@@ -1026,11 +1024,31 @@ strong.amplify-text {
           padding-inline-start: var(--amplify-components-button-padding-inline-start);
   -webkit-padding-end: var(--amplify-components-button-padding-inline-end);
           padding-inline-end: var(--amplify-components-button-padding-inline-end);
+  transition: all var(--amplify-components-button-transition-duration);
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  cursor: pointer;
+  --amplify-internal-button-disabled-color: var(
+    --amplify-components-button-disabled-color
+  );
+  --amplify-internal-button-disabled-background-color: var(
+    --amplify-components-button-disabled-background-color
+  );
+  --amplify-internal-button-disabled-border-color: var(
+    --amplify-components-button-disabled-border-color
+  );
+  --amplify-internal-button-disabled-text-decoration: initial;
+  --amplify-internal-button-loading-background-color: var(
+    --amplify-components-button-loading-background-color
+  );
+  --amplify-internal-button-loading-border-color: var(
+    --amplify-components-button-loading-border-color
+  );
+  --amplify-internal-button-loading-color: var(
+    --amplify-components-button-loading-color
+  );
+  --amplify-internal-button-loading-text-decoration: initial;
 }
 .amplify-button:hover {
   background-color: var(--amplify-components-button-hover-background-color);
@@ -1048,107 +1066,112 @@ strong.amplify-text {
   border-color: var(--amplify-components-button-active-border-color);
   color: var(--amplify-components-button-active-color);
 }
-.amplify-button[disabled] {
-  background-color: var(--amplify-components-button-disabled-background-color);
-  border-color: var(--amplify-components-button-disabled-border-color);
-  color: var(--amplify-components-button-disabled-color);
-  cursor: not-allowed;
-}
-.amplify-button[data-loading=true] {
-  background-color: var(--amplify-components-button-loading-background-color);
-  border-color: var(--amplify-components-button-loading-border-color);
-  color: var(--amplify-components-button-loading-color);
-}
-.amplify-button[data-fullwidth=true] {
+.amplify-button--fullwidth {
   width: 100%;
 }
-.amplify-button[data-variation=menu] {
+.amplify-button--menu {
   border-width: var(--amplify-components-button-menu-border-width);
   background-color: var(--amplify-components-button-menu-background-color);
   justify-content: var(--amplify-components-button-menu-justify-content);
+  --amplify-internal-button-disabled-color: var(
+    --amplify-components-button-menu-disabled-color
+  );
 }
-.amplify-button[data-variation=menu]:hover {
+.amplify-button--menu:hover {
   color: var(--amplify-components-button-menu-hover-color);
   background-color: var(--amplify-components-button-menu-hover-background-color);
 }
-.amplify-button[data-variation=menu]:focus {
+.amplify-button--menu:focus {
   box-shadow: none;
   color: var(--amplify-components-button-menu-focus-color);
   background-color: var(--amplify-components-button-menu-focus-background-color);
 }
-.amplify-button[data-variation=menu]:active {
+.amplify-button--menu:active {
   color: var(--amplify-components-button-menu-active-color);
   background-color: var(--amplify-components-button-menu-active-background-color);
 }
-.amplify-button[data-variation=menu][disabled] {
-  color: var(--amplify-components-button-menu-disabled-color);
-}
-.amplify-button[data-variation=primary] {
+.amplify-button--primary {
   border-width: var(--amplify-components-button-primary-border-width);
   background-color: var(--amplify-components-button-primary-background-color);
   border-color: var(--amplify-components-button-primary-border-color);
   color: var(--amplify-components-button-primary-color);
-}
-.amplify-button[data-variation=primary]:hover {
+  --amplify-internal-button-disabled-border-color: var(
+    --amplify-components-button-primary-disabled-border-color
+  );
+  --amplify-internal-button-disabled-background-color: var(
+    --amplify-components-button-primary-disabled-background-color
+  );
+  --amplify-internal-button-disabled-color: var(
+    --amplify-components-button-primary-disabled-color
+  );
+  --amplify-internal-button-loading-background-color: var(
+    --amplify-components-button-primary-loading-background-color
+  );
+  --amplify-internal-button-loading-border-color: var(
+    --amplify-components-button-primary-loading-border-color
+  );
+  --amplify-internal-button-loading-color: var(
+    --amplify-components-button-primary-loading-color
+  );
+}
+.amplify-button--primary:hover {
   background-color: var(--amplify-components-button-primary-hover-background-color);
   border-color: var(--amplify-components-button-primary-hover-border-color);
   color: var(--amplify-components-button-primary-hover-color);
 }
-.amplify-button[data-variation=primary]:focus {
+.amplify-button--primary:focus {
   background-color: var(--amplify-components-button-primary-focus-background-color);
   border-color: var(--amplify-components-button-primary-focus-border-color);
   color: var(--amplify-components-button-primary-focus-color);
   box-shadow: var(--amplify-components-button-primary-focus-box-shadow);
 }
-.amplify-button[data-variation=primary]:active {
+.amplify-button--primary:active {
   background-color: var(--amplify-components-button-primary-active-background-color);
   border-color: var(--amplify-components-button-primary-active-border-color);
   color: var(--amplify-components-button-primary-active-color);
 }
-.amplify-button[data-variation=primary][disabled] {
-  background-color: var(--amplify-components-button-primary-disabled-background-color);
-  border-color: var(--amplify-components-button-primary-disabled-border-color);
-  color: var(--amplify-components-button-primary-disabled-color);
-}
-.amplify-button[data-variation=primary][data-loading=true] {
-  background-color: var(--amplify-components-button-primary-loading-background-color);
-  border-color: var(--amplify-components-button-primary-loading-border-color);
-  color: var(--amplify-components-button-primary-loading-color);
-}
-.amplify-button[data-variation=link] {
+.amplify-button--link {
   border-width: var(--amplify-components-button-link-border-width);
   background-color: var(--amplify-components-button-link-background-color);
   color: var(--amplify-components-button-link-color);
-}
-.amplify-button[data-variation=link]:hover {
+  --amplify-internal-button-disabled-text-decoration: none;
+  --amplify-internal-button-disabled-border-color: var(
+    --amplify-components-button-link-disabled-border-color
+  );
+  --amplify-internal-button-disabled-background-color: var(
+    --amplify-components-button-link-disabled-background-color
+  );
+  --amplify-internal-button-disabled-color: var(
+    --amplify-components-button-link-disabled-color
+  );
+  --amplify-internal-button-loading-background-color: var(
+    --amplify-components-button-link-loading-background-color
+  );
+  --amplify-internal-button-loading-border-color: var(
+    --amplify-components-button-link-loading-border-color
+  );
+  --amplify-internal-button-loading-color: var(
+    --amplify-components-button-link-loading-color
+  );
+  --amplify-internal-button-loading-text-decoration: none;
+}
+.amplify-button--link:hover {
   background-color: var(--amplify-components-button-link-hover-background-color);
   border-color: var(--amplify-components-button-link-hover-border-color);
   color: var(--amplify-components-button-link-hover-color);
 }
-.amplify-button[data-variation=link]:focus {
+.amplify-button--link:focus {
   background-color: var(--amplify-components-button-link-focus-background-color);
   border-color: var(--amplify-components-button-link-focus-border-color);
   color: var(--amplify-components-button-link-focus-color);
   box-shadow: var(--amplify-components-button-link-focus-box-shadow);
 }
-.amplify-button[data-variation=link]:active {
+.amplify-button--link:active {
   background-color: var(--amplify-components-button-link-active-background-color);
   border-color: var(--amplify-components-button-link-active-border-color);
   color: var(--amplify-components-button-link-active-color);
 }
-.amplify-button[data-variation=link][disabled] {
-  background-color: var(--amplify-components-button-link-disabled-background-color);
-  border-color: var(--amplify-components-button-link-disabled-border-color);
-  color: var(--amplify-components-button-link-disabled-color);
-  text-decoration: none;
-}
-.amplify-button[data-variation=link][data-loading=true] {
-  background-color: var(--amplify-components-button-link-loading-background-color);
-  border-color: var(--amplify-components-button-link-loading-border-color);
-  color: var(--amplify-components-button-link-loading-color);
-  text-decoration: none;
-}
-.amplify-button[data-size=small] {
+.amplify-button--small {
   font-size: var(--amplify-components-button-small-font-size);
   -webkit-padding-before: var(--amplify-components-button-small-padding-block-start);
           padding-block-start: var(--amplify-components-button-small-padding-block-start);
@@ -1159,7 +1182,7 @@ strong.amplify-text {
   -webkit-padding-end: var(--amplify-components-button-small-padding-inline-end);
           padding-inline-end: var(--amplify-components-button-small-padding-inline-end);
 }
-.amplify-button[data-size=large] {
+.amplify-button--large {
   font-size: var(--amplify-components-button-large-font-size);
   -webkit-padding-before: var(--amplify-components-button-large-padding-block-start);
           padding-block-start: var(--amplify-components-button-large-padding-block-start);
@@ -1170,7 +1193,63 @@ strong.amplify-text {
   -webkit-padding-end: var(--amplify-components-button-large-padding-inline-end);
           padding-inline-end: var(--amplify-components-button-large-padding-inline-end);
 }
+.amplify-button--disabled {
+  background-color: var(--amplify-internal-button-disabled-background-color);
+  border-color: var(--amplify-internal-button-disabled-border-color);
+  color: var(--amplify-internal-button-disabled-color);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+  cursor: not-allowed;
+}
+.amplify-button--disabled:hover {
+  background-color: var(--amplify-internal-button-disabled-background-color);
+  border-color: var(--amplify-internal-button-disabled-border-color);
+  color: var(--amplify-internal-button-disabled-color);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+}
+.amplify-button--disabled :focus {
+  background-color: var(--amplify-internal-button-disabled-background-color);
+  border-color: var(--amplify-internal-button-disabled-border-color);
+  color: var(--amplify-internal-button-disabled-color);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+}
+.amplify-button--disabled:active {
+  background-color: var(--amplify-internal-button-disabled-background-color);
+  border-color: var(--amplify-internal-button-disabled-border-color);
+  color: var(--amplify-internal-button-disabled-color);
+  -webkit-text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+          text-decoration: var(--amplify-internal-button-disabled-text-decoration);
+}
+.amplify-button--loading {
+  background-color: var(--amplify-internal-button-loading-background-color);
+  border-color: var(--amplify-internal-button-loading-border-color);
+  color: var(--amplify-components-button-loading-color);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+          text-decoration: var(--amplify-internal-button-loading-text-decoration);
+}
+.amplify-button--loading:hover {
+  background-color: var(--amplify-internal-button-loading-background-color);
+  border-color: var(--amplify-internal-button-loading-border-color);
+  color: var(--amplify-components-button-loading-color);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+          text-decoration: var(--amplify-internal-button-loading-text-decoration);
+}
+.amplify-button--loading:focus {
+  background-color: var(--amplify-internal-button-loading-background-color);
+  border-color: var(--amplify-internal-button-loading-border-color);
+  color: var(--amplify-components-button-loading-color);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+          text-decoration: var(--amplify-internal-button-loading-text-decoration);
+}
+.amplify-button--loading:active {
+  background-color: var(--amplify-internal-button-loading-background-color);
+  border-color: var(--amplify-internal-button-loading-border-color);
+  color: var(--amplify-components-button-loading-color);
+  -webkit-text-decoration: var(--amplify-internal-button-loading-text-decoration);
+          text-decoration: var(--amplify-internal-button-loading-text-decoration);
+}
 .amplify-button__loader-wrapper {
   align-items: var(--amplify-components-button-loader-wrapper-align-items);
   gap: var(--amplify-components-button-loader-wrapper-gap);
@@ -1198,32 +1277,32 @@ strong.amplify-text {
   display: block;
 }
-h1.amplify-heading {
+.amplify-heading--1 {
   font-size: var(--amplify-components-heading-1-font-size);
   font-weight: var(--amplify-components-heading-1-font-weight);
 }
-h2.amplify-heading {
+.amplify-heading--2 {
   font-size: var(--amplify-components-heading-2-font-size);
   font-weight: var(--amplify-components-heading-2-font-weight);
 }
-h3.amplify-heading {
+.amplify-heading--3 {
   font-size: var(--amplify-components-heading-3-font-size);
   font-weight: var(--amplify-components-heading-3-font-weight);
 }
-h4.amplify-heading {
+.amplify-heading--4 {
   font-size: var(--amplify-components-heading-4-font-size);
   font-weight: var(--amplify-components-heading-4-font-weight);
 }
-h5.amplify-heading {
+.amplify-heading--5 {
   font-size: var(--amplify-components-heading-5-font-size);
   font-weight: var(--amplify-components-heading-5-font-weight);
 }
-h6.amplify-heading {
+.amplify-heading--6 {
   font-size: var(--amplify-components-heading-6-font-size);
   font-weight: var(--amplify-components-heading-6-font-weight);
 }
@@ -1243,6 +1322,172 @@ h6.amplify-heading {
   width: var(--amplify-components-icon-height);
 }
+.amplify-input {
+  box-sizing: border-box;
+  color: var(--amplify-components-fieldcontrol-color);
+  font-size: var(--amplify-components-fieldcontrol-font-size);
+  line-height: var(--amplify-components-fieldcontrol-line-height);
+  -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
+          padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
+  -webkit-padding-after: var(--amplify-components-fieldcontrol-padding-block-end);
+          padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
+  -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
+          padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
+  -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+          padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+  transition: all var(--amplify-components-fieldcontrol-transition-duration);
+  width: 100%;
+  border-color: var(--amplify-components-fieldcontrol-border-color);
+  border-radius: var(--amplify-components-fieldcontrol-border-radius);
+  border-style: var(--amplify-components-fieldcontrol-border-style);
+  border-width: var(--amplify-components-fieldcontrol-border-width);
+  outline-color: var(--amplify-components-fieldcontrol-outline-color);
+  outline-style: var(--amplify-components-fieldcontrol-outline-style);
+  outline-width: var(--amplify-components-fieldcontrol-outline-width);
+  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
+}
+.amplify-input:focus {
+  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
+  box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
+}
+.amplify-input--small {
+  font-size: var(--amplify-components-fieldcontrol-small-font-size);
+  -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
+          padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
+  -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
+          padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
+  -webkit-padding-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
+          padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
+  -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
+          padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
+}
+.amplify-input--large {
+  font-size: var(--amplify-components-fieldcontrol-large-font-size);
+  -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
+          padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
+  -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
+          padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
+  -webkit-padding-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
+          padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
+  -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
+          padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
+}
+.amplify-input--error {
+  border-color: var(--amplify-components-fieldcontrol-error-border-color);
+}
+.amplify-input--error:focus {
+  border-color: var(--amplify-components-fieldcontrol-error-border-color);
+  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
+}
+.amplify-input[disabled] {
+  color: var(--amplify-components-fieldcontrol-disabled-color);
+  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
+  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
+  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
+}
+.amplify-input--quiet {
+  -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
+          border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
+  -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
+          border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
+  -webkit-border-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
+          border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
+  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
+}
+.amplify-input--quiet:focus {
+  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-focus-border-block-end-color);
+  box-shadow: var(--amplify-components-fieldcontrol-quiet-focus-box-shadow);
+}
+.amplify-input--quiet[aria-invalid=true] {
+  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
+}
+.amplify-input--quiet[aria-invalid=true]:focus {
+  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
+}
+.amplify-textarea {
+  box-sizing: border-box;
+  color: var(--amplify-components-fieldcontrol-color);
+  font-size: var(--amplify-components-fieldcontrol-font-size);
+  line-height: var(--amplify-components-fieldcontrol-line-height);
+  -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
+          padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
+  -webkit-padding-after: var(--amplify-components-fieldcontrol-padding-block-end);
+          padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
+  -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
+          padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
+  -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+          padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+  transition: all var(--amplify-components-fieldcontrol-transition-duration);
+  width: 100%;
+  border-color: var(--amplify-components-fieldcontrol-border-color);
+  border-radius: var(--amplify-components-fieldcontrol-border-radius);
+  border-style: var(--amplify-components-fieldcontrol-border-style);
+  border-width: var(--amplify-components-fieldcontrol-border-width);
+  outline-color: var(--amplify-components-fieldcontrol-outline-color);
+  outline-style: var(--amplify-components-fieldcontrol-outline-style);
+  outline-width: var(--amplify-components-fieldcontrol-outline-width);
+  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
+}
+.amplify-textarea:focus {
+  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
+  box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
+}
+.amplify-textarea--small {
+  font-size: var(--amplify-components-fieldcontrol-small-font-size);
+  -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
+          padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
+  -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
+          padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
+  -webkit-padding-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
+          padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
+  -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
+          padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
+}
+.amplify-textarea--large {
+  font-size: var(--amplify-components-fieldcontrol-large-font-size);
+  -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
+          padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
+  -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
+          padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
+  -webkit-padding-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
+          padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
+  -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
+          padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
+}
+.amplify-textarea--error {
+  border-color: var(--amplify-components-fieldcontrol-error-border-color);
+}
+.amplify-textarea--error:focus {
+  border-color: var(--amplify-components-fieldcontrol-error-border-color);
+  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
+}
+.amplify-textarea[disabled] {
+  color: var(--amplify-components-fieldcontrol-disabled-color);
+  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
+  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
+  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
+}
+.amplify-textarea--quiet {
+  -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
+          border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
+  -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
+          border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
+  -webkit-border-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
+          border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
+  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
+}
+.amplify-textarea--quiet:focus {
+  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-focus-border-block-end-color);
+  box-shadow: var(--amplify-components-fieldcontrol-quiet-focus-box-shadow);
+}
+.amplify-textarea--quiet[aria-invalid=true] {
+  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
+}
+.amplify-textarea--quiet[aria-invalid=true]:focus {
+  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
+}
 .amplify-image {
   height: var(--amplify-components-image-height);
   max-width: var(--amplify-components-image-max-width);
@@ -1278,12 +1523,6 @@ h6.amplify-heading {
   -webkit-text-decoration: var(--amplify-components-link-hover-text-decoration);
           text-decoration: var(--amplify-components-link-hover-text-decoration);
 }
-.amplify-link[data-size=small] {
-  font-size: var(--amplify-components-link-small-font-size);
-}
-.amplify-link[data-size=large] {
-  font-size: var(--amplify-components-link-large-font-size);
-}
 .amplify-loader {
   width: var(--amplify-components-loader-width);
@@ -1291,6 +1530,12 @@ h6.amplify-heading {
   font-size: var(--amplify-components-loader-font-size);
   fill: none;
   stroke: var(--amplify-components-loader-stroke-empty);
+  --amplify-internal-loader-linear-font-size: var(
+    --amplify-components-loader-linear-font-size
+  );
+  --amplify-internal-loader-linear-stroke-width: var(
+    --amplify-components-loader-linear-stroke-width
+  );
 }
 .amplify-loader circle:last-of-type {
   transform-origin: center center;
@@ -1313,16 +1558,6 @@ h6.amplify-heading {
     stroke-dashoffset: 50%;
   }
 }
-.amplify-loader[data-size=small] {
-  width: var(--amplify-components-loader-small-width);
-  height: var(--amplify-components-loader-small-height);
-  font-size: var(--amplify-components-loader-small-font-size);
-}
-.amplify-loader[data-size=large] {
-  width: var(--amplify-components-loader-large-width);
-  height: var(--amplify-components-loader-large-height);
-  font-size: var(--amplify-components-loader-large-font-size);
-}
 .amplify-loader line:last-of-type {
   stroke: var(--amplify-components-loader-linear-stroke-filled);
   stroke-dasharray: 50% 200%;
@@ -1342,21 +1577,35 @@ h6.amplify-heading {
     stroke-dashoffset: -50%;
   }
 }
-.amplify-loader[data-variation=linear] {
+.amplify-loader--small {
+  width: var(--amplify-components-loader-small-width);
+  height: var(--amplify-components-loader-small-height);
+  font-size: var(--amplify-components-loader-small-font-size);
+  --amplify-internal-loader-linear-stroke-width: var(
+    --amplify-components-loader-linear-small-stroke-width
+  );
+  --amplify-internal-loader-linear-font-size: var(
+    --amplify-components-loader-linear-small-font-size
+  );
+}
+.amplify-loader--large {
+  width: var(--amplify-components-loader-large-width);
+  height: var(--amplify-components-loader-large-height);
+  font-size: var(--amplify-components-loader-large-font-size);
+  --amplify-internal-loader-linear-stroke-width: var(
+    --amplify-components-loader-linear-large-stroke-width
+  );
+  --amplify-internal-loader-linear-font-size: var(
+    --amplify-components-loader-linear-large-font-size
+  );
+}
+.amplify-loader--linear {
   width: var(--amplify-components-loader-linear-width);
   min-width: var(--amplify-components-loader-linear-min-width);
-  font-size: var(--amplify-components-loader-linear-font-size);
   stroke: var(--amplify-components-loader-linear-stroke-empty);
-  stroke-width: var(--amplify-components-loader-linear-stroke-width);
   stroke-linecap: var(--amplify-components-loader-linear-stroke-linecap);
-}
-.amplify-loader[data-variation=linear][data-size=small] {
-  font-size: var(--amplify-components-loader-linear-small-font-size);
-  stroke-width: var(--amplify-components-loader-linear-small-stroke-width);
-}
-.amplify-loader[data-variation=linear][data-size=large] {
-  font-size: var(--amplify-components-loader-linear-large-font-size);
-  stroke-width: var(--amplify-components-loader-linear-large-stroke-width);
+  stroke-width: var(--amplify-internal-loader-linear-stroke-width);
+  font-size: var(--amplify-internal-loader-linear-font-size);
 }
 .amplify-loader--determinate circle:last-of-type {
   -webkit-animation: none;
@@ -1431,10 +1680,10 @@ h6.amplify-heading {
   width: 100%;
   display: block;
 }
-.amplify-placeholder[data-size=small] {
+.amplify-placeholder--small {
   height: var(--amplify-components-placeholder-small-height);
 }
-.amplify-placeholder[data-size=large] {
+.amplify-placeholder--large {
   height: var(--amplify-components-placeholder-large-height);
 }
@@ -1492,24 +1741,24 @@ h6.amplify-heading {
 .amplify-alert {
   align-items: var(--amplify-components-alert-align-items);
-  justify-content: var(--amplify-components-alert-justify-content);
   background-color: var(--amplify-components-alert-background-color);
+  justify-content: var(--amplify-components-alert-justify-content);
   padding-block: var(--amplify-components-alert-padding-block);
   padding-inline: var(--amplify-components-alert-padding-inline);
 }
-.amplify-alert[data-variation=info] {
+.amplify-alert--info {
   color: var(--amplify-components-alert-info-color);
   background-color: var(--amplify-components-alert-info-background-color);
 }
-.amplify-alert[data-variation=error] {
+.amplify-alert--error {
   color: var(--amplify-components-alert-error-color);
   background-color: var(--amplify-components-alert-error-background-color);
 }
-.amplify-alert[data-variation=warning] {
+.amplify-alert--warning {
   color: var(--amplify-components-alert-warning-color);
   background-color: var(--amplify-components-alert-warning-background-color);
 }
-.amplify-alert[data-variation=success] {
+.amplify-alert--success {
   color: var(--amplify-components-alert-success-color);
   background-color: var(--amplify-components-alert-success-background-color);
 }
@@ -1529,7 +1778,7 @@ h6.amplify-heading {
   display: block;
 }
-.amplify-button.amplify-alert__dismiss {
+.amplify-alert__dismiss {
   color: inherit;
 }
@@ -1606,7 +1855,7 @@ h6.amplify-heading {
   display: block;
   padding: var(--amplify-components-card-padding);
 }
-.amplify-card[data-variation=outlined] {
+.amplify-card--outlined {
   background-color: var(--amplify-components-card-outlined-background-color);
   border-radius: var(--amplify-components-card-outlined-border-radius);
   border-width: var(--amplify-components-card-outlined-border-width);
@@ -1614,7 +1863,7 @@ h6.amplify-heading {
   border-color: var(--amplify-components-card-outlined-border-color);
   box-shadow: var(--amplify-components-card-outlined-box-shadow);
 }
-.amplify-card[data-variation=elevated] {
+.amplify-card--elevated {
   background-color: var(--amplify-components-card-elevated-background-color);
   border-radius: var(--amplify-components-card-elevated-border-radius);
   border-width: var(--amplify-components-card-elevated-border-width);
@@ -1639,10 +1888,10 @@ h6.amplify-heading {
 .amplify-checkbox {
   cursor: var(--amplify-components-checkbox-cursor);
   align-items: var(--amplify-components-checkbox-align-items);
-  gap: inherit;
   flex-direction: row-reverse;
+  gap: inherit;
 }
-.amplify-checkbox[data-disabled=true] {
+.amplify-checkbox--disabled {
   cursor: var(--amplify-components-checkbox-disabled-cursor);
 }
@@ -1651,6 +1900,12 @@ h6.amplify-heading {
   align-items: var(--amplify-components-checkbox-button-align-items);
   justify-content: var(--amplify-components-checkbox-button-justify-content);
   color: var(--amplify-components-checkbox-button-color);
+  --amplify-internal-checkbox_button-focused-before-border-color: var(
+    --amplify-components-checkbox-button-focus-border-color
+  );
+  --amplify-internal-checkbox_button-focused-before-box-shadow: var(
+    --amplify-components-checkbox-button-focus-box-shadow
+  );
 }
 .amplify-checkbox__button::before {
   content: "";
@@ -1664,22 +1919,26 @@ h6.amplify-heading {
   border-style: var(--amplify-components-checkbox-button-before-border-style);
   border-color: var(--amplify-components-checkbox-button-before-border-color);
 }
-.amplify-checkbox__button[data-focus=true]::before {
+.amplify-checkbox__button--focused::before {
   outline-color: var(--amplify-components-checkbox-button-focus-outline-color);
   outline-style: var(--amplify-components-checkbox-button-focus-outline-style);
   outline-width: var(--amplify-components-checkbox-button-focus-outline-width);
   outline-offset: var(--amplify-components-checkbox-button-focus-outline-offset);
-  border-color: var(--amplify-components-checkbox-button-focus-border-color);
-  box-shadow: var(--amplify-components-checkbox-button-focus-box-shadow);
-}
-.amplify-checkbox__button[data-error=true]::before {
+  border-color: var(--amplify-internal-checkbox_button-focused-before-border-color);
+  box-shadow: var(--amplify-internal-checkbox_button-focused-before-box-shadow);
+}
+.amplify-checkbox__button--error {
+  --amplify-internal-checkbox_button-focused-before-border-color: var(
+    --amplify-components-checkbox-button-error-focus-border-color
+  );
+  --amplify-internal-checkbox_button-focused-before-box-shadow: var(
+    --amplify-components-checkbox-button-error-focus-box-shadow
+  );
+}
+.amplify-checkbox__button--error::before {
   border-color: var(--amplify-components-checkbox-button-error-border-color);
 }
-.amplify-checkbox__button[data-error=true][data-focus=true]::before {
-  border-color: var(--amplify-components-checkbox-button-error-focus-border-color);
-  box-shadow: var(--amplify-components-checkbox-button-error-focus-box-shadow);
-}
-.amplify-checkbox__button[data-disabled=true]::before {
+.amplify-checkbox__button--disabled::before {
   border-color: var(--amplify-components-checkbox-button-disabled-border-color);
 }
@@ -1691,13 +1950,19 @@ h6.amplify-heading {
   transition-property: var(--amplify-components-checkbox-icon-transition-property);
   transition-duration: var(--amplify-components-checkbox-icon-transition-duration);
   transition-timing-function: var(--amplify-components-checkbox-icon-transition-timing-function);
+  --amplify-internal-checkbox-icon-disabled-background-color: var(
+    --amplify-components-checkbox-icon-background-color
+  );
 }
-.amplify-checkbox__icon[data-checked=true] {
+.amplify-checkbox__icon--checked {
   opacity: var(--amplify-components-checkbox-icon-checked-opacity);
   transform: var(--amplify-components-checkbox-icon-checked-transform);
+  --amplify-internal-checkbox-icon-disabled-background-color: var(
+    --amplify-components-checkbox-icon-checked-disabled-background-color
+  );
 }
-.amplify-checkbox__icon[data-checked=true][data-disabled=true] {
-  background-color: var(--amplify-components-checkbox-icon-checked-disabled-background-color);
+.amplify-checkbox__icon--disabled {
+  background-color: var(--amplify-internal-checkbox-icon-disabled-background-color);
 }
 .amplify-checkbox__label[data-disabled=true] {
@@ -1722,27 +1987,28 @@ h6.amplify-heading {
   opacity: var(--amplify-components-divider-opacity);
   padding: 0;
   display: block;
+  --amplify-internal-divider-size: var(
+    --amplify-components-divider-border-width
+  );
   position: relative;
   text-align: center;
 }
-.amplify-divider[aria-orientation=horizontal] {
-  width: 100%;
-  border-bottom-width: var(--amplify-components-divider-border-width);
-}
-.amplify-divider[aria-orientation=horizontal][data-size=small] {
-  border-bottom-width: var(--amplify-components-divider-small-border-width);
+.amplify-divider--small {
+  --amplify-internal-divider-size: var(
+    --amplify-components-divider-small-border-width
+  );
 }
-.amplify-divider[aria-orientation=horizontal][data-size=large] {
-  border-bottom-width: var(--amplify-components-divider-large-border-width);
+.amplify-divider--large {
+  --amplify-internal-divider-size: var(
+    --amplify-components-divider-large-border-width
+  );
 }
-.amplify-divider[aria-orientation=vertical] {
-  border-left-width: var(--amplify-components-divider-border-width);
-}
-.amplify-divider[aria-orientation=vertical][data-size=small] {
-  border-left-width: var(--amplify-components-divider-small-border-width);
+.amplify-divider--horizontal {
+  width: 100%;
+  border-bottom-width: var(--amplify-internal-divider-size);
 }
-.amplify-divider[aria-orientation=vertical][data-size=large] {
-  border-left-width: var(--amplify-components-divider-large-border-width);
+.amplify-divider--vertical {
+  border-left-width: var(--amplify-internal-divider-size);
 }
 .amplify-divider--label {
   display: flex;
@@ -1900,98 +2166,15 @@ h6.amplify-heading {
     height: 0;
   }
 }
-.amplify-select, .amplify-input, .amplify-textarea {
-  box-sizing: border-box;
-  color: var(--amplify-components-fieldcontrol-color);
-  font-size: var(--amplify-components-fieldcontrol-font-size);
-  line-height: var(--amplify-components-fieldcontrol-line-height);
-  -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
-          padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
-  -webkit-padding-after: var(--amplify-components-fieldcontrol-padding-block-end);
-          padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
-  -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
-          padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-end);
-          padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
-  transition: all var(--amplify-components-fieldcontrol-transition-duration);
-  width: 100%;
-  border-color: var(--amplify-components-fieldcontrol-border-color);
-  border-radius: var(--amplify-components-fieldcontrol-border-radius);
-  border-style: var(--amplify-components-fieldcontrol-border-style);
-  border-width: var(--amplify-components-fieldcontrol-border-width);
-  outline-color: var(--amplify-components-fieldcontrol-outline-color);
-  outline-style: var(--amplify-components-fieldcontrol-outline-style);
-  outline-width: var(--amplify-components-fieldcontrol-outline-width);
-  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
-}
-.amplify-select:focus, .amplify-input:focus, .amplify-textarea:focus {
-  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
-  box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
-}
-[data-size=small].amplify-select, [data-size=small].amplify-input, [data-size=small].amplify-textarea {
-  font-size: var(--amplify-components-fieldcontrol-small-font-size);
-  -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
-          padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
-  -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
-          padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
-  -webkit-padding-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
-          padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
-          padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
-}
-[data-size=large].amplify-select, [data-size=large].amplify-input, [data-size=large].amplify-textarea {
-  font-size: var(--amplify-components-fieldcontrol-large-font-size);
-  -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
-          padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
-  -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
-          padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
-  -webkit-padding-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
-          padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
-  -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
-          padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
-}
-[aria-invalid=true].amplify-select, [aria-invalid=true].amplify-input, [aria-invalid=true].amplify-textarea {
-  border-color: var(--amplify-components-fieldcontrol-error-border-color);
-}
-[aria-invalid=true].amplify-select:focus, [aria-invalid=true].amplify-input:focus, [aria-invalid=true].amplify-textarea:focus {
-  border-color: var(--amplify-components-fieldcontrol-error-border-color);
-  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
-}
-[disabled].amplify-select, [disabled].amplify-input, [disabled].amplify-textarea {
-  color: var(--amplify-components-fieldcontrol-disabled-color);
-  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
-  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
-  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
-}
-[data-variation=quiet].amplify-select, [data-variation=quiet].amplify-input, [data-variation=quiet].amplify-textarea {
-  -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
-          border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
-  -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
-          border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
-  -webkit-border-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
-          border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
-  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
-}
-[data-variation=quiet].amplify-select:focus, [data-variation=quiet].amplify-input:focus, [data-variation=quiet].amplify-textarea:focus {
-  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-focus-border-block-end-color);
-  box-shadow: var(--amplify-components-fieldcontrol-quiet-focus-box-shadow);
-}
-[data-variation=quiet][aria-invalid=true].amplify-select, [data-variation=quiet][aria-invalid=true].amplify-input, [data-variation=quiet][aria-invalid=true].amplify-textarea {
-  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
-}
-[data-variation=quiet][aria-invalid=true].amplify-select:focus, [data-variation=quiet][aria-invalid=true].amplify-input:focus, [data-variation=quiet][aria-invalid=true].amplify-textarea:focus {
-  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
-}
 .amplify-field {
   font-size: var(--amplify-components-field-font-size);
   gap: var(--amplify-components-field-gap);
 }
-.amplify-field[data-size=small] {
+.amplify-field--small {
   font-size: var(--amplify-components-field-small-font-size);
   gap: var(--amplify-components-field-small-gap);
 }
-.amplify-field[data-size=large] {
+.amplify-field--large {
   font-size: var(--amplify-components-field-large-font-size);
   gap: var(--amplify-components-field-large-gap);
 }
@@ -2000,23 +2183,23 @@ h6.amplify-heading {
   color: var(--amplify-components-field-label-color);
 }
-.amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
+.amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start--quiet .amplify-field-group__control, .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
   border-start-start-radius: 0;
   border-end-start-radius: 0;
 }
 @supports not (border-start-start-radius: 0) {
-  .amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
+  .amplify-field-group__outer-end .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control, .amplify-field-group__outer-start .amplify-select__wrapper:not(:first-child) .amplify-select:not(:first-child), .amplify-field-group__outer-start--quiet .amplify-field-group__control, .amplify-field-group__outer-start .amplify-field-group__control:not(:first-child), .amplify-field-group :not(:first-child) .amplify-input {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
 }
-.amplify-field-group__outer-end .amplify-select__wrapper:not(:last-child) .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control:not(:last-child), .amplify-field-group__outer-start .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-start .amplify-field-group__control, .amplify-field-group :not(:last-child) .amplify-input {
+.amplify-field-group__outer-end .amplify-select__wrapper:not(:last-child) .amplify-select, .amplify-field-group__outer-end--quiet .amplify-field-group__control, .amplify-field-group__outer-end .amplify-field-group__control:not(:last-child), .amplify-field-group__outer-start .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-start .amplify-field-group__control, .amplify-field-group :not(:last-child) .amplify-input {
   border-end-end-radius: 0;
   border-start-end-radius: 0;
 }
 @supports not (border-end-end-radius: 0) {
-  .amplify-field-group__outer-end .amplify-select__wrapper:not(:last-child) .amplify-select, .amplify-field-group__outer-end .amplify-field-group__control:not(:last-child), .amplify-field-group__outer-start .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-start .amplify-field-group__control, .amplify-field-group :not(:last-child) .amplify-input {
+  .amplify-field-group__outer-end .amplify-select__wrapper:not(:last-child) .amplify-select, .amplify-field-group__outer-end--quiet .amplify-field-group__control, .amplify-field-group__outer-end .amplify-field-group__control:not(:last-child), .amplify-field-group__outer-start .amplify-select__wrapper .amplify-select, .amplify-field-group__outer-start .amplify-field-group__control, .amplify-field-group :not(:last-child) .amplify-input {
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
   }
@@ -2025,10 +2208,10 @@ h6.amplify-heading {
 .amplify-field-group {
   gap: var(--amplify-components-fieldgroup-gap);
 }
-.amplify-field-group[data-orientation=horizontal] {
+.amplify-field-group--horizontal {
   flex-direction: row;
 }
-.amplify-field-group[data-orientation=vertical] {
+.amplify-field-group--vertical {
   flex-direction: column;
   align-items: var(--amplify-components-fieldgroup-vertical-align-items);
 }
@@ -2046,19 +2229,25 @@ h6.amplify-heading {
  * Outer field group components
  */
 .amplify-field-group__outer-start .amplify-field-group__control:not(:focus) {
-  -webkit-border-end: none;
-          border-inline-end: none;
+  border-inline-end-color: transparent;
 }
 .amplify-field-group__outer-start .amplify-field-group__control:focus {
   z-index: 1;
 }
+.amplify-field-group__outer-start--quiet .amplify-field-group__control:not(:focus) {
+  border-block-start-color: transparent;
+  border-inline-start-color: transparent;
+}
 .amplify-field-group__outer-end .amplify-field-group__control:not(:focus) {
-  -webkit-border-start: none;
-          border-inline-start: none;
+  border-inline-start-color: transparent;
 }
 .amplify-field-group__outer-end .amplify-field-group__control:focus {
   z-index: 1;
 }
+.amplify-field-group__outer-end--quiet .amplify-field-group__control:not(:focus) {
+  border-block-start-color: transparent;
+  border-inline-end-color: transparent;
+}
 /**
  * Inner field group components
  */
@@ -2066,7 +2255,7 @@ h6.amplify-heading {
   position: relative;
   width: 100%;
 }
-.amplify-field-group__field-wrapper[data-orientation=vertical] {
+.amplify-field-group__field-wrapper--vertical {
   width: -webkit-fit-content;
   width: -moz-fit-content;
   width: fit-content;
@@ -2148,7 +2337,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 .amplify-menu-content__item {
-  min-height: var(--amplify-components-menu-item-min-width);
+  min-height: var(--amplify-components-menu-item-min-height);
   -webkit-padding-start: var(--amplify-components-menu-item-padding-inline-start);
           padding-inline-start: var(--amplify-components-menu-item-padding-inline-start);
   -webkit-padding-end: var(--amplify-components-menu-item-padding-inline-end);
@@ -2181,7 +2370,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   }
 }
-.amplify-pagination__item-current, .amplify-pagination__item-button[data-variation=link] {
+.amplify-pagination__item-current, .amplify-pagination__item-button {
   height: var(--amplify-components-pagination-item-shared-height);
   min-width: var(--amplify-components-pagination-item-shared-min-width);
   border-radius: var(--amplify-components-pagination-item-shared-border-radius);
@@ -2194,8 +2383,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   margin-left: var(--amplify-components-pagination-item-container-margin-left);
   margin-right: var(--amplify-components-pagination-item-container-margin-right);
 }
-.amplify-pagination__item-button[data-variation=link] {
+.amplify-pagination__item-button {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2208,16 +2396,15 @@ html[dir=rtl] .amplify-field-group__inner-start {
   transition-property: var(--amplify-components-pagination-button-transition-property);
   transition-duration: var(--amplify-components-pagination-button-transition-duration);
 }
-.amplify-pagination__item-button[data-variation=link]:hover {
+.amplify-pagination__item-button:hover {
   text-decoration: none;
   color: var(--amplify-components-pagination-button-hover-color);
   background-color: var(--amplify-components-pagination-button-hover-background-color);
 }
-.amplify-pagination__item-button[data-variation=link][disabled] {
+.amplify-pagination__item-button--disabled {
   color: var(--amplify-components-pagination-button-disabled-color);
   pointer-events: none;
 }
 .amplify-pagination__item-current {
   align-items: var(--amplify-components-pagination-current-align-items);
   justify-content: var(--amplify-components-pagination-current-justify-content);
@@ -2225,7 +2412,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
   font-size: var(--amplify-components-pagination-current-font-size);
   background-color: var(--amplify-components-pagination-current-background-color);
 }
 .amplify-pagination__item-ellipsis {
   align-items: var(--amplify-components-pagination-ellipsis-align-items);
   justify-content: var(--amplify-components-pagination-ellipsis-justify-content);
@@ -2246,19 +2432,19 @@ html[dir=rtl] .amplify-field-group__inner-start {
   font-size: var(--amplify-components-rating-default-size);
   line-height: var(--amplify-components-rating-default-size);
 }
-.amplify-rating[data-size=small] {
+.amplify-rating .amplify-icon {
+  font-size: unset;
+  line-height: unset;
+  height: 1em;
+}
+.amplify-rating--small {
   font-size: var(--amplify-components-rating-small-size);
   line-height: var(--amplify-components-rating-small-size);
 }
-.amplify-rating[data-size=large] {
+.amplify-rating--large {
   font-size: var(--amplify-components-rating-large-size);
   line-height: var(--amplify-components-rating-large-size);
 }
-.amplify-rating .amplify-icon {
-  font-size: unset;
-  line-height: unset;
-  height: 1em;
-}
 .amplify-rating-filled {
   fill: currentColor;
@@ -2300,16 +2486,13 @@ html[dir=rtl] .amplify-field-group__inner-start {
   gap: inherit;
   flex-direction: row-reverse;
 }
-.amplify-radio[data-disabled=true] {
+.amplify-radio--disabled {
   cursor: var(--amplify-components-radio-disabled-cursor);
 }
 .amplify-radio__button {
   align-items: var(--amplify-components-radio-button-align-items);
   justify-content: var(--amplify-components-radio-button-justify-content);
-  width: var(--amplify-components-radio-button-width);
-  height: var(--amplify-components-radio-button-height);
   padding: var(--amplify-components-radio-button-padding);
   box-sizing: var(--amplify-components-radio-button-box-sizing);
   border-width: var(--amplify-components-radio-button-border-width);
@@ -2320,6 +2503,8 @@ html[dir=rtl] .amplify-field-group__inner-start {
   background-color: var(--amplify-components-radio-button-background-color);
   transition-property: var(--amplify-components-radio-button-transition-property);
   transition-duration: var(--amplify-components-radio-button-transition-duration);
+  width: var(--amplify-components-radio-button-width);
+  height: var(--amplify-components-radio-button-height);
   outline-color: var(--amplify-components-radio-button-outline-color);
   outline-style: var(--amplify-components-radio-button-outline-style);
   outline-width: var(--amplify-components-radio-button-outline-width);
@@ -2334,11 +2519,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
   background-color: currentColor;
   border-radius: 50%;
 }
-.amplify-radio__button[data-size=small] {
+.amplify-radio__button--small {
   width: var(--amplify-components-radio-button-small-width);
   height: var(--amplify-components-radio-button-small-height);
 }
-.amplify-radio__button[data-size=large] {
+.amplify-radio__button--large {
   width: var(--amplify-components-radio-button-large-width);
   height: var(--amplify-components-radio-button-large-height);
 }
@@ -2401,11 +2586,91 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 .amplify-select {
+  box-sizing: border-box;
+  color: var(--amplify-components-fieldcontrol-color);
+  font-size: var(--amplify-components-fieldcontrol-font-size);
+  line-height: var(--amplify-components-fieldcontrol-line-height);
+  -webkit-padding-before: var(--amplify-components-fieldcontrol-padding-block-start);
+          padding-block-start: var(--amplify-components-fieldcontrol-padding-block-start);
+  -webkit-padding-after: var(--amplify-components-fieldcontrol-padding-block-end);
+          padding-block-end: var(--amplify-components-fieldcontrol-padding-block-end);
+  -webkit-padding-start: var(--amplify-components-fieldcontrol-padding-inline-start);
+          padding-inline-start: var(--amplify-components-fieldcontrol-padding-inline-start);
+  -webkit-padding-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+          padding-inline-end: var(--amplify-components-fieldcontrol-padding-inline-end);
+  transition: all var(--amplify-components-fieldcontrol-transition-duration);
+  width: 100%;
+  border-color: var(--amplify-components-fieldcontrol-border-color);
+  border-radius: var(--amplify-components-fieldcontrol-border-radius);
+  border-style: var(--amplify-components-fieldcontrol-border-style);
+  border-width: var(--amplify-components-fieldcontrol-border-width);
+  outline-color: var(--amplify-components-fieldcontrol-outline-color);
+  outline-style: var(--amplify-components-fieldcontrol-outline-style);
+  outline-width: var(--amplify-components-fieldcontrol-outline-width);
+  outline-offset: var(--amplify-components-fieldcontrol-outline-offset);
+  min-width: var(--amplify-components-select-min-width);
   -webkit-padding-end: var(--amplify-components-select-padding-inline-end);
           padding-inline-end: var(--amplify-components-select-padding-inline-end);
-  min-width: var(--amplify-components-select-min-width);
   white-space: var(--amplify-components-select-white-space);
 }
+.amplify-select:focus {
+  border-color: var(--amplify-components-fieldcontrol-focus-border-color);
+  box-shadow: var(--amplify-components-fieldcontrol-focus-box-shadow);
+}
+.amplify-select--small {
+  font-size: var(--amplify-components-fieldcontrol-small-font-size);
+  -webkit-padding-before: var(--amplify-components-fieldcontrol-small-padding-block-start);
+          padding-block-start: var(--amplify-components-fieldcontrol-small-padding-block-start);
+  -webkit-padding-after: var(--amplify-components-fieldcontrol-small-padding-block-end);
+          padding-block-end: var(--amplify-components-fieldcontrol-small-padding-block-end);
+  -webkit-padding-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
+          padding-inline-start: var(--amplify-components-fieldcontrol-small-padding-inline-start);
+  -webkit-padding-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
+          padding-inline-end: var(--amplify-components-fieldcontrol-small-padding-inline-end);
+}
+.amplify-select--large {
+  font-size: var(--amplify-components-fieldcontrol-large-font-size);
+  -webkit-padding-before: var(--amplify-components-fieldcontrol-large-padding-block-start);
+          padding-block-start: var(--amplify-components-fieldcontrol-large-padding-block-start);
+  -webkit-padding-after: var(--amplify-components-fieldcontrol-large-padding-block-end);
+          padding-block-end: var(--amplify-components-fieldcontrol-large-padding-block-end);
+  -webkit-padding-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
+          padding-inline-start: var(--amplify-components-fieldcontrol-large-padding-inline-start);
+  -webkit-padding-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
+          padding-inline-end: var(--amplify-components-fieldcontrol-large-padding-inline-end);
+}
+.amplify-select--error {
+  border-color: var(--amplify-components-fieldcontrol-error-border-color);
+}
+.amplify-select--error:focus {
+  border-color: var(--amplify-components-fieldcontrol-error-border-color);
+  box-shadow: var(--amplify-components-fieldcontrol-error-focus-box-shadow);
+}
+.amplify-select[disabled] {
+  color: var(--amplify-components-fieldcontrol-disabled-color);
+  cursor: var(--amplify-components-fieldcontrol-disabled-cursor);
+  border-color: var(--amplify-components-fieldcontrol-disabled-border-color);
+  background-color: var(--amplify-components-fieldcontrol-disabled-background-color);
+}
+.amplify-select--quiet {
+  -webkit-border-before: var(--amplify-components-fieldcontrol-quiet-border-block-start);
+          border-block-start: var(--amplify-components-fieldcontrol-quiet-border-block-start);
+  -webkit-border-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
+          border-inline-start: var(--amplify-components-fieldcontrol-quiet-border-inline-start);
+  -webkit-border-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
+          border-inline-end: var(--amplify-components-fieldcontrol-quiet-border-inline-end);
+  border-radius: var(--amplify-components-fieldcontrol-quiet-border-radius);
+}
+.amplify-select--quiet:focus {
+  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-focus-border-block-end-color);
+  box-shadow: var(--amplify-components-fieldcontrol-quiet-focus-box-shadow);
+}
+.amplify-select--quiet[aria-invalid=true] {
+  border-block-end-color: var(--amplify-components-fieldcontrol-quiet-error-border-block-end-color);
+}
+.amplify-select--quiet[aria-invalid=true]:focus {
+  box-shadow: var(--amplify-components-fieldcontrol-quiet-error-focus-box-shadow);
+}
 @-moz-document url-prefix() {
   .amplify-select option {
     background-color: var(--amplify-components-select-option-background-color);
@@ -2414,10 +2679,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-select option {
   color: initial;
 }
-.amplify-select[data-size=small] {
+.amplify-select--small {
   min-width: var(--amplify-components-select-small-min-width);
 }
-.amplify-select[data-size=large] {
+.amplify-select--large {
   min-width: var(--amplify-components-select-large-min-width);
 }
@@ -2435,38 +2700,48 @@ html[dir=rtl] .amplify-field-group__inner-start {
 }
 .amplify-sliderfield__root {
-  position: relative;
-  display: flex;
   align-items: center;
+  box-sizing: content-box;
+  display: flex;
+  padding-block: var(--amplify-components-sliderfield-padding-block);
+  position: relative;
+  touch-action: none;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  touch-action: none;
-  box-sizing: content-box;
-  padding-block: var(--amplify-components-sliderfield-padding-block);
+  --amplify-internal-sliderfield-root-height: var(
+    --amplify-components-sliderfield-thumb-height
+  );
+  --amplify-internal-sliderfield-root-width: var(
+    --amplify-components-sliderfield-thumb-height
+  );
 }
 .amplify-sliderfield__root[data-disabled] {
   cursor: not-allowed;
 }
-.amplify-sliderfield__root[data-orientation=horizontal] {
-  height: var(--amplify-components-sliderfield-thumb-height);
+.amplify-sliderfield__root--horizontal {
+  height: var(--amplify-internal-sliderfield-root-height);
 }
-.amplify-sliderfield__root[data-orientation=vertical] {
+.amplify-sliderfield__root--vertical {
   flex-direction: column;
-  width: var(--amplify-components-sliderfield-thumb-width);
+  width: var(--amplify-internal-sliderfield-root-width);
 }
-[data-size=large] .amplify-sliderfield__root[data-orientation=horizontal] {
-  height: var(--amplify-components-sliderfield-large-thumb-height);
+.amplify-sliderfield__root--large {
+  --amplify-internal-sliderfield-root-height: var(
+    --amplify-components-sliderfield-large-thumb-height
+  );
+  --amplify-internal-sliderfield-root-width: var(
+    --amplify-components-sliderfield-large-thumb-height
+  );
 }
-[data-size=large] .amplify-sliderfield__root[data-orientation=vertical] {
-  width: var(--amplify-components-sliderfield-large-thumb-height);
-}
-[data-size=small] .amplify-sliderfield__root[data-orientation=horizontal] {
-  height: var(--amplify-components-sliderfield-small-thumb-height);
-}
-[data-size=small] .amplify-sliderfield__root[data-orientation=vertical] {
-  width: var(--amplify-components-sliderfield-small-thumb-height);
+.amplify-sliderfield__root--small {
+  --amplify-internal-sliderfield-root-height: var(
+    --amplify-components-sliderfield-small-thumb-height
+  );
+  --amplify-internal-sliderfield-root-width: var(
+    --amplify-components-sliderfield-small-thumb-height
+  );
 }
 .amplify-sliderfield__track {
@@ -2474,26 +2749,42 @@ html[dir=rtl] .amplify-field-group__inner-start {
   flex-grow: 1;
   border-radius: var(--amplify-components-sliderfield-track-border-radius);
   background-color: var(--amplify-components-sliderfield-track-background-color);
-}
-.amplify-sliderfield__track[data-orientation=horizontal] {
-  height: var(--amplify-components-sliderfield-track-height);
-  min-width: var(--amplify-components-sliderfield-track-min-width);
-}
-.amplify-sliderfield__track[data-orientation=vertical] {
-  width: var(--amplify-components-sliderfield-track-height);
-  min-height: var(--amplify-components-sliderfield-track-min-width);
-}
-[data-size=large] .amplify-sliderfield__track[data-orientation=vertical] {
-  width: var(--amplify-components-sliderfield-large-track-height);
-}
-[data-size=large] .amplify-sliderfield__track[data-orientation=horizontal] {
-  height: var(--amplify-components-sliderfield-large-track-height);
-}
-[data-size=small] .amplify-sliderfield__track[data-orientation=vertical] {
-  width: var(--amplify-components-sliderfield-small-track-height);
-}
-[data-size=small] .amplify-sliderfield__track[data-orientation=horizontal] {
-  height: var(--amplify-components-sliderfield-small-track-height);
+  --amplify-internal-sliderfield-track-height: var(
+    --amplify-components-sliderfield-track-height
+  );
+  --amplify-internal-sliderfield-track-min-width: var(
+    --amplify-components-sliderfield-track-min-width
+  );
+  --amplify-internal-sliderfield-track-width: var(
+    --amplify-components-sliderfield-track-height
+  );
+  --amplify-internal-sliderfield-track-min-height: var(
+    --amplify-components-sliderfield-track-min-width
+  );
+}
+.amplify-sliderfield__track--horizontal {
+  height: var(--amplify-internal-sliderfield-track-height);
+  min-width: var(--amplify-internal-sliderfield-track-min-width);
+}
+.amplify-sliderfield__track--vertical {
+  width: var(--amplify-internal-sliderfield-track-width);
+  min-height: var(--amplify-internal-sliderfield-track-min-height);
+}
+.amplify-sliderfield__track--large {
+  --amplify-internal-sliderfield-track-height: var(
+    --amplify-components-sliderfield-large-track-height
+  );
+  --amplify-internal-sliderfield-track-width: var(
+    --amplify-components-sliderfield-large-track-height
+  );
+}
+.amplify-sliderfield__track--small {
+  --amplify-internal-sliderfield-track-height: var(
+    --amplify-components-sliderfield-small-track-height
+  );
+  --amplify-internal-sliderfield-track-width: var(
+    --amplify-components-sliderfield-small-track-height
+  );
 }
 .amplify-sliderfield__range {
@@ -2504,10 +2795,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-sliderfield__range[data-disabled] {
   background-color: var(--amplify-components-sliderfield-range-disabled-background-color);
 }
-.amplify-sliderfield__range[data-orientation=horizontal] {
+.amplify-sliderfield__range--horizontal {
   height: 100%;
 }
-.amplify-sliderfield__range[data-orientation=vertical] {
+.amplify-sliderfield__range--vertical {
   width: 100%;
 }
@@ -2534,11 +2825,11 @@ html[dir=rtl] .amplify-field-group__inner-start {
   border-color: var(--amplify-components-sliderfield-thumb-disabled-border-color);
   box-shadow: var(--amplify-components-sliderfield-thumb-disabled-box-shadow);
 }
-[data-size=large] .amplify-sliderfield__thumb {
+.amplify-sliderfield__thumb--large {
   width: var(--amplify-components-sliderfield-large-thumb-width);
   height: var(--amplify-components-sliderfield-large-thumb-height);
 }
-[data-size=small] .amplify-sliderfield__thumb {
+.amplify-sliderfield__thumb--small {
   width: var(--amplify-components-sliderfield-small-thumb-width);
   height: var(--amplify-components-sliderfield-small-thumb-height);
 }
@@ -2551,7 +2842,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   -webkit-border-end: none;
           border-inline-end: none;
 }
-[data-variation=quiet] .amplify-stepperfield__button--decrease {
+.amplify-stepperfield__button--decrease--quiet {
   border-width: 0 0 var(--amplify-components-button-border-width) 0;
   border-radius: 0;
 }
@@ -2560,7 +2851,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
   -webkit-border-start: none;
           border-inline-start: none;
 }
-[data-variation=quiet] .amplify-stepperfield__button--increase {
+.amplify-stepperfield__button--increase--quiet {
   border-width: 0 0 var(--amplify-components-button-border-width) 0;
   border-radius: 0;
 }
@@ -2583,10 +2874,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-switchfield {
   display: inline-block;
 }
-.amplify-switchfield[data-size=small] {
+.amplify-switchfield--small {
   font-size: var(--amplify-components-switchfield-small-font-size);
 }
-.amplify-switchfield[data-size=large] {
+.amplify-switchfield--large {
   font-size: var(--amplify-components-switchfield-large-font-size);
 }
@@ -2594,16 +2885,16 @@ html[dir=rtl] .amplify-field-group__inner-start {
   display: inline-flex;
   align-items: center;
 }
-.amplify-switch__wrapper[data-label-position=start] {
+.amplify-switch__wrapper--start {
   flex-direction: row;
 }
-.amplify-switch__wrapper[data-label-position=end] {
+.amplify-switch__wrapper--end {
   flex-direction: row-reverse;
 }
-.amplify-switch__wrapper[data-label-position=top] {
+.amplify-switch__wrapper--top {
   flex-direction: column;
 }
-.amplify-switch__wrapper[data-label-position=bottom] {
+.amplify-switch__wrapper--bottom {
   flex-direction: column-reverse;
 }
@@ -2618,14 +2909,14 @@ html[dir=rtl] .amplify-field-group__inner-start {
   transition-duration: var(--amplify-components-switchfield-track-transition-duration);
   background-color: var(--amplify-components-switchfield-track-background-color);
 }
-.amplify-switch-track[data-checked=true] {
+.amplify-switch-track--checked {
   background-color: var(--amplify-components-switchfield-track-checked-background-color);
 }
-.amplify-switch-track[data-disabled=true] {
+.amplify-switch-track--disabled {
   opacity: var(--amplify-components-switchfield-disabled-opacity);
   cursor: not-allowed;
 }
-.amplify-switch-track[data-focused=true] {
+.amplify-switch-track--focused {
   box-shadow: var(--amplify-components-switchfield-focused-shadow);
 }
@@ -2638,10 +2929,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
   border-color: var(--amplify-components-switchfield-thumb-border-color);
   overflow-wrap: break-word;
 }
-.amplify-switch-thumb[data-checked=true] {
+.amplify-switch-thumb--checked {
   transform: var(--amplify-components-switchfield-thumb-checked-transform);
 }
-.amplify-switch-thumb[data-disabled=true] {
+.amplify-switch-thumb--disabled {
   cursor: not-allowed;
 }
@@ -2657,63 +2948,138 @@ html[dir=rtl] .amplify-field-group__inner-start {
   border-collapse: var(--amplify-components-table-border-collapse);
   display: var(--amplify-components-table-display);
   width: var(--amplify-components-table-width);
+  --amplify-internal-table-caption-font-size: var(
+    --amplify-components-table-caption-font-size
+  );
+  --amplify-internal-table-th-font-size: var(
+    --amplify-components-table-header-font-size
+  );
+  --amplify-internal-table-th-padding: var(
+    --amplify-components-table-header-padding
+  );
+  --amplify-internal-table-td-font-size: var(
+    --amplify-components-table-data-font-size
+  );
+  --amplify-internal-table-td-padding: var(
+    --amplify-components-table-data-padding
+  );
+  --amplify-internal-table-td-border-width: var(
+      --amplify-components-table-data-border-width
+    )
+    0px var(--amplify-components-table-data-border-width) 0px;
+  --amplify-internal-table-th-border-width: var(
+      --amplify-components-table-header-border-width
+    )
+    0px var(--amplify-components-table-header-border-width) 0px;
   /**
    * Data attribute stylings
    */
 }
-.amplify-table .amplify-table__caption {
+.amplify-table--small {
+  --amplify-internal-table-caption-font-size: var(
+    --amplify-components-table-caption-small-font-size
+  );
+  --amplify-internal-table-th-font-size: var(
+    --amplify-components-table-header-small-font-size
+  );
+  --amplify-internal-table-th-padding: var(
+    --amplify-components-table-header-small-padding
+  );
+  --amplify-internal-table-td-font-size: var(
+    --amplify-components-table-data-small-font-size
+  );
+  --amplify-internal-table-td-padding: var(
+    --amplify-components-table-data-small-padding
+  );
+}
+.amplify-table--large {
+  --amplify-internal-table-caption-font-size: var(
+    --amplify-components-table-caption-large-font-size
+  );
+  --amplify-internal-table-th-font-size: var(
+    --amplify-components-table-header-large-font-size
+  );
+  --amplify-internal-table-th-padding: var(
+    --amplify-components-table-header-large-padding
+  );
+  --amplify-internal-table-td-font-size: var(
+    --amplify-components-table-data-large-font-size
+  );
+  --amplify-internal-table-td-padding: var(
+    --amplify-components-table-data-large-padding
+  );
+}
+.amplify-table--bordered {
+  --amplify-internal-table-td-border-width: var(
+      --amplify-components-table-data-border-width
+    )
+    var(--amplify-components-table-data-border-width)
+    var(--amplify-components-table-data-border-width)
+    var(--amplify-components-table-data-border-width);
+  --amplify-internal-table-th-border-width: var(
+      --amplify-components-table-header-border-width
+    )
+    var(--amplify-components-table-header-border-width)
+    var(--amplify-components-table-header-border-width)
+    var(--amplify-components-table-header-border-width);
+}
+.amplify-table__caption {
   caption-side: var(--amplify-components-table-caption-caption-side);
   color: var(--amplify-components-table-caption-color);
   display: var(--amplify-components-table-caption-display);
-  font-size: var(--amplify-components-table-caption-font-size);
+  font-size: var(--amplify-internal-table-caption-font-size);
   text-align: var(--amplify-components-table-caption-text-align);
   word-break: var(--amplify-components-table-caption-word-break);
 }
-.amplify-table .amplify-table__head {
+.amplify-table__head {
   display: var(--amplify-components-table-head-display);
   vertical-align: var(--amplify-components-table-head-vertical-align);
 }
-.amplify-table .amplify-table__body {
+.amplify-table__body {
   display: var(--amplify-components-table-body-display);
   vertical-align: var(--amplify-components-table-body-vertical-align);
 }
-.amplify-table .amplify-table__foot {
+.amplify-table__foot {
   display: var(--amplify-components-table-foot-display);
   vertical-align: var(--amplify-components-table-foot-vertical-align);
 }
-.amplify-table .amplify-table__row {
+.amplify-table__row {
   display: var(--amplify-components-table-row-display);
   vertical-align: var(--amplify-components-table-row-vertical-align);
 }
-.amplify-table .amplify-table__th {
+.amplify-table__th {
   border-color: var(--amplify-components-table-header-border-color);
   border-style: var(--amplify-components-table-header-border-style);
-  border-width: var(--amplify-components-table-header-border-width);
+  border-width: var(--amplify-internal-table-th-border-width);
   color: var(--amplify-components-table-header-color);
   display: var(--amplify-components-table-header-display);
-  font-size: var(--amplify-components-table-header-font-size);
+  font-size: var(--amplify-internal-table-th-font-size);
   font-weight: var(--amplify-components-table-header-font-weight);
-  padding: var(--amplify-components-table-header-padding);
+  padding: var(--amplify-internal-table-th-padding);
   vertical-align: var(--amplify-components-table-header-vertical-align);
 }
-.amplify-table .amplify-table__td {
+.amplify-table__th:first-child {
+  border-left-width: var(--amplify-components-table-header-border-width);
+}
+.amplify-table__th:last-child {
+  border-right-width: var(--amplify-components-table-header-border-width);
+}
+.amplify-table__td {
   border-color: var(--amplify-components-table-data-border-color);
   border-style: var(--amplify-components-table-data-border-style);
-  border-width: var(--amplify-components-table-data-border-width);
+  border-width: var(--amplify-internal-table-td-border-width);
   color: var(--amplify-components-table-data-color);
   display: var(--amplify-components-table-data-display);
-  font-size: var(--amplify-components-table-data-font-size);
+  font-size: var(--amplify-internal-table-td-font-size);
   font-weight: var(--amplify-components-table-data-font-weight);
-  padding: var(--amplify-components-table-data-padding);
+  padding: var(--amplify-internal-table-td-padding);
   vertical-align: var(--amplify-components-table-data-vertical-align);
 }
-.amplify-table:not([data-variation=bordered]) .amplify-table__td:not(:first-child),
-.amplify-table:not([data-variation=bordered]) .amplify-table__th:not(:first-child) {
-  border-left: none;
+.amplify-table__td:first-child {
+  border-left-width: var(--amplify-components-table-data-border-width);
 }
-.amplify-table:not([data-variation=bordered]) .amplify-table__td:not(:last-child),
-.amplify-table:not([data-variation=bordered]) .amplify-table__th:not(:last-child) {
-  border-right: none;
+.amplify-table__td:last-child {
+  border-right-width: var(--amplify-components-table-data-border-width);
 }
 .amplify-table[data-variation=striped] .amplify-table__row:not(.amplify-table__head *):nth-child(odd) {
   background-color: var(--amplify-components-table-row-striped-background-color);
@@ -2721,28 +3087,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
 .amplify-table[data-highlightonhover=true] .amplify-table__row:not(.amplify-table__head *):hover {
   background-color: var(--amplify-components-table-row-hover-background-color);
 }
-.amplify-table[data-size=small] .amplify-table__caption {
-  font-size: var(--amplify-components-table-caption-small-font-size);
-}
-.amplify-table[data-size=small] .amplify-table__th {
-  font-size: var(--amplify-components-table-header-small-font-size);
-  padding: var(--amplify-components-table-header-small-padding);
-}
-.amplify-table[data-size=small] .amplify-table__td {
-  font-size: var(--amplify-components-table-data-small-font-size);
-  padding: var(--amplify-components-table-data-small-padding);
-}
-.amplify-table[data-size=large] .amplify-table__caption {
-  font-size: var(--amplify-components-table-caption-large-font-size);
-}
-.amplify-table[data-size=large] .amplify-table__th {
-  font-size: var(--amplify-components-table-header-large-font-size);
-  padding: var(--amplify-components-table-header-large-padding);
-}
-.amplify-table[data-size=large] .amplify-table__td {
-  font-size: var(--amplify-components-table-data-large-font-size);
-  padding: var(--amplify-components-table-data-large-padding);
-}
 .amplify-tabs {
   background-color: var(--amplify-components-tabs-background-color);
@@ -2814,84 +3158,306 @@ html[dir=rtl] .amplify-field-group__inner-start {
   flex-direction: column;
 }
-.amplify-togglebutton[data-variation=primary], .amplify-togglebutton:hover, .amplify-togglebutton {
-  border-color: var(--amplify-components-togglebutton-border-color);
-  color: var(--amplify-components-togglebutton-color);
+.amplify-togglebutton {
+  background-color: var(--amplify-internal-togglebutton-background-color);
+  border-color: var(--amplify-internal-togglebutton-border-color);
+  color: var(--amplify-internal-togglebutton-color);
+  --amplify-internal-togglebutton-background-color: initial;
+  --amplify-internal-togglebutton-border-color: var(
+    --amplify-components-togglebutton-border-color
+  );
+  --amplify-internal-togglebutton-color: var(
+    --amplify-components-togglebutton-color
+  );
+  --amplify-internal-togglebutton-hover-background-color: var(
+    --amplify-components-togglebutton-hover-background-color
+  );
+  --amplify-internal-togglebutton-focus-background-color: var(
+    --amplify-internal-togglebutton-background-color
+  );
+  --amplify-internal-togglebutton-focus-border-color: var(
+    --amplify-components-togglebutton-focus-border-color
+  );
+  --amplify-internal-togglebutton-focus-color: var(
+    --amplify-components-togglebutton-focus-color
+  );
+  --amplify-internal-togglebutton-active-background-color: var(
+    --amplify-components-togglebutton-active-background-color
+  );
+  --amplify-internal-togglebutton-disabled-background-color: var(
+    --amplify-components-togglebutton-disabled-background-color
+  );
+  --amplify-internal-togglebutton-disabled-border-color: var(
+    --amplify-components-togglebutton-disabled-border-color
+  );
+  --amplify-internal-togglebutton-disabled-color: var(
+    --amplify-components-togglebutton-disabled-color
+  );
 }
 .amplify-togglebutton:hover {
-  background-color: var(--amplify-components-togglebutton-hover-background-color);
+  background-color: var(--amplify-internal-togglebutton-hover-background-color);
+  border-color: var(--amplify-internal-togglebutton-border-color);
+  color: var(--amplify-internal-togglebutton-color);
+  --amplify-internal-togglebutton-focus-background-color: var(
+    --amplify-internal-togglebutton-hover-background-color
+  );
 }
 .amplify-togglebutton:focus {
-  border-color: var(--amplify-components-togglebutton-focus-border-color);
-  color: var(--amplify-components-togglebutton-focus-color);
+  background-color: var(--amplify-internal-togglebutton-focus-background-color);
+  border-color: var(--amplify-internal-togglebutton-focus-border-color);
+  color: var(--amplify-internal-togglebutton-focus-color);
 }
 .amplify-togglebutton:active {
-  background-color: var(--amplify-components-togglebutton-active-background-color);
+  background-color: var(--amplify-internal-togglebutton-active-background-color);
 }
 .amplify-togglebutton:disabled {
-  background-color: var(--amplify-components-togglebutton-disabled-background-color);
-  border-color: var(--amplify-components-togglebutton-disabled-border-color);
-  color: var(--amplify-components-togglebutton-disabled-color);
-}
-.amplify-togglebutton[aria-pressed=true] {
-  background-color: var(--amplify-components-togglebutton-pressed-background-color);
-  color: var(--amplify-components-togglebutton-pressed-color);
-}
-.amplify-togglebutton[aria-pressed=true]:hover:not(:disabled) {
-  background-color: var(--amplify-components-togglebutton-pressed-hover-background-color);
-}
-.amplify-togglebutton[data-variation=primary] {
-  background-color: var(--amplify-components-togglebutton-primary-background-color);
+  background-color: var(--amplify-internal-togglebutton-disabled-background-color);
+  border-color: var(--amplify-internal-togglebutton-disabled-border-color);
+  color: var(--amplify-internal-togglebutton-disabled-color);
+}
+.amplify-togglebutton--pressed {
+  --amplify-internal-togglebutton-background-color: var(
+    --amplify-components-togglebutton-pressed-background-color
+  );
+  --amplify-internal-togglebutton-color: var(
+    --amplify-components-togglebutton-pressed-color
+  );
+}
+.amplify-togglebutton--pressed:hover:not(:disabled) {
+  --amplify-internal-togglebutton-hover-background-color: var(
+    --amplify-components-togglebutton-pressed-hover-background-color
+  );
+}
+.amplify-togglebutton--pressed:disabled {
+  --amplify-internal-togglebutton-disabled-background-color: var(
+    --amplify-components-togglebutton-pressed-background-color
+  );
+  --amplify-internal-togglebutton-disabled-color: var(
+    --amplify-components-togglebutton-pressed-color
+  );
+}
+.amplify-togglebutton--primary {
+  --amplify-internal-togglebutton-primary-background-color: var(
+    --amplify-components-togglebutton-primary-background-color
+  );
+  --amplify-internal-togglebutton-background-color: var(
+    --amplify-internal-togglebutton-primary-background-color
+  );
+  --amplify-internal-togglebutton-primary-border-color: var(
+    --amplify-components-togglebutton-border-color
+  );
+  --amplify-internal-togglebutton-border-color: var(
+    --amplify-internal-togglebutton-primary-border-color
+  );
+  --amplify-internal-togglebutton-primary-color: var(
+    --amplify-components-togglebutton-color
+  );
+  --amplify-internal-togglebutton-color: var(
+    --amplify-internal-togglebutton-primary-color
+  );
   border-width: var(--amplify-components-togglebutton-primary-border-width);
-}
-.amplify-togglebutton[data-variation=primary]:focus {
-  background-color: var(--amplify-components-togglebutton-primary-focus-background-color);
-  border-color: var(--amplify-components-togglebutton-primary-focus-border-color);
-  color: var(--amplify-components-togglebutton-primary-focus-color);
+  --amplify-internal-togglebutton-hover-background-color: var(
+    --amplify-components-togglebutton-primary-background-color
+  );
+  --amplify-internal-togglebutton-focus-border-color: var(
+    --amplify-components-togglebutton-border-color
+  );
+  --amplify-internal-togglebutton-focus-color: var(
+    --amplify-components-togglebutton-color
+  );
+  --amplify-internal-togglebutton-active-background-color: var(
+    --amplify-components-togglebutton-primary-background-color
+  );
+  --amplify-internal-togglebutton-disabled-background-color: var(
+    --amplify-components-togglebutton-primary-background-color
+  );
+  --amplify-internal-togglebutton-disabled-border-color: var(
+    --amplify-components-togglebutton-border-color
+  );
+  --amplify-internal-togglebutton-disabled-color: var(
+    --amplify-components-togglebutton-color
+  );
+  --amplify-internal-togglebutton-primary-focus-background-color: var(
+    --amplify-components-togglebutton-primary-focus-background-color
+  );
+  --amplify-internal-togglebutton-primary-focus-border-color: var(
+    --amplify-components-togglebutton-primary-focus-border-color
+  );
+  --amplify-internal-togglebutton-primary-focus-color: var(
+    --amplify-components-togglebutton-primary-focus-color
+  );
+  --amplify-internal-togglebutton-primary-hover-background-color: var(
+    --amplify-components-togglebutton-primary-hover-background-color
+  );
+  --amplify-internal-togglebutton-primary-hover-border-color: var(
+    --amplify-internal-togglebutton-primary-border-color
+  );
+  --amplify-internal-togglebutton-primary-hover-color: var(
+    --amplify-components-togglebutton-primary-hover-color
+  );
+  --amplify-internal-togglebutton-primary-disabled-background-color: var(
+    --amplify-components-togglebutton-primary-disabled-background-color
+  );
+  --amplify-internal-togglebutton-primary-disabled-border-color: var(
+    --amplify-internal-togglebutton-primary-border-color
+  );
+  --amplify-internal-togglebutton-primary-disabled-color: var(
+    --amplify-components-togglebutton-primary-disabled-color
+  );
+}
+.amplify-togglebutton--primary:focus {
+  --amplify-internal-togglebutton-focus-background-color: var(
+    --amplify-internal-togglebutton-primary-focus-background-color
+  );
+  --amplify-internal-togglebutton-focus-border-color: var(
+    --amplify-internal-togglebutton-primary-focus-border-color
+  );
+  --amplify-internal-togglebutton-focus-color: var(
+    --amplify-internal-togglebutton-primary-focus-color
+  );
   box-shadow: var(--amplify-components-togglebutton-primary-focus-box-shadow);
-}
-.amplify-togglebutton[data-variation=primary]:hover {
-  background-color: var(--amplify-components-togglebutton-primary-hover-background-color);
-  color: var(--amplify-components-togglebutton-primary-hover-color);
-}
-.amplify-togglebutton[data-variation=primary]:disabled {
-  background-color: var(--amplify-components-togglebutton-primary-disabled-background-color);
-  color: var(--amplify-components-togglebutton-primary-disabled-color);
-}
-.amplify-togglebutton[data-variation=primary][aria-pressed=true] {
-  background-color: var(--amplify-components-togglebutton-primary-pressed-background-color);
-  border-color: var(--amplify-components-togglebutton-primary-pressed-border-color);
-  color: var(--amplify-components-togglebutton-primary-pressed-color);
-}
-.amplify-togglebutton[data-variation=primary][aria-pressed=true]:focus {
-  border-color: var(--amplify-components-togglebutton-primary-pressed-focus-border-color);
-  background-color: var(--amplify-components-togglebutton-primary-pressed-focus-background-color);
-}
-.amplify-togglebutton[data-variation=primary][aria-pressed=true]:hover:not(:disabled) {
-  border-color: var(--amplify-components-togglebutton-primary-pressed-hover-border-color);
-  background-color: var(--amplify-components-togglebutton-primary-pressed-hover-background-color);
-}
-.amplify-togglebutton[data-variation=link] {
-  color: var(--amplify-components-togglebutton-link-color);
-}
-.amplify-togglebutton[data-variation=link]:hover {
-  background-color: var(--amplify-components-togglebutton-link-hover-background-color);
-  color: var(--amplify-components-togglebutton-link-hover-color);
-}
-.amplify-togglebutton[data-variation=link]:focus {
-  background-color: var(--amplify-components-togglebutton-link-focus-background-color);
-  color: var(--amplify-components-togglebutton-link-focus-color);
-}
-.amplify-togglebutton[data-variation=link]:disabled {
-  color: var(--amplify-components-togglebutton-link-disabled-color);
-}
-.amplify-togglebutton[data-variation=link][aria-pressed=true] {
-  background-color: var(--amplify-components-togglebutton-link-pressed-background-color);
-  color: var(--amplify-components-togglebutton-link-pressed-color);
-}
-.amplify-togglebutton[data-variation=link][aria-pressed=true]:hover {
-  background-color: var(--amplify-components-togglebutton-link-pressed-hover-background-color);
+  --amplify-internal-togglebutton-primary-hover-border-color: var(
+    --amplify-internal-togglebutton-primary-focus-border-color
+  );
+}
+.amplify-togglebutton--primary:hover {
+  background-color: var(--amplify-internal-togglebutton-primary-hover-background-color);
+  border-color: var(--amplify-internal-togglebutton-primary-hover-border-color);
+  color: var(--amplify-internal-togglebutton-primary-hover-color);
+  --amplify-internal-togglebutton-focus-background-color: var(
+    --amplify-internal-togglebutton-primary-hover-background-color
+  );
+}
+.amplify-togglebutton--primary:disabled {
+  --amplify-internal-togglebutton-disabled-background-color: var(
+    --amplify-internal-togglebutton-primary-disabled-background-color
+  );
+  --amplify-internal-togglebutton-disabled-border-color: var(
+    --amplify-internal-togglebutton-primary-disabled-border-color
+  );
+  --amplify-internal-togglebutton-disabled-color: var(
+    --amplify-internal-togglebutton-primary-disabled-color
+  );
+}
+.amplify-togglebutton--pressed {
+  --amplify-internal-togglebutton-primary-background-color: var(
+    --amplify-components-togglebutton-primary-pressed-background-color
+  );
+  --amplify-internal-togglebutton-primary-border-color: var(
+    --amplify-components-togglebutton-primary-pressed-border-color
+  );
+  --amplify-internal-togglebutton-primary-color: var(
+    --amplify-components-togglebutton-primary-pressed-color
+  );
+}
+.amplify-togglebutton--pressed:focus {
+  --amplify-internal-togglebutton-primary-focus-background-color: var(
+    --amplify-components-togglebutton-primary-pressed-focus-background-color
+  );
+  --amplify-internal-togglebutton-primary-focus-border-color: var(
+    --amplify-components-togglebutton-primary-pressed-focus-border-color
+  );
+}
+.amplify-togglebutton--pressed:hover:not(:disabled) {
+  --amplify-internal-togglebutton-primary-hover-background-color: var(
+    --amplify-components-togglebutton-primary-pressed-hover-background-color
+  );
+  --amplify-internal-togglebutton-primary-hover-border-color: var(
+    --amplify-components-togglebutton-primary-pressed-hover-border-color
+  );
+  --amplify-internal-togglebutton-primary-focus-background-color: var(
+    --amplify-components-togglebutton-primary-pressed-hover-background-color
+  );
+}
+.amplify-togglebutton--pressed:focus {
+  --amplify-internal-togglebutton-primary-focus-color: var(
+    --amplify-components-togglebutton-primary-pressed-color
+  );
+}
+.amplify-togglebutton--pressed:hover {
+  --amplify-internal-togglebutton-primary-hover-background-color: var(
+    --amplify-components-togglebutton-primary-hover-background-color
+  );
+  --amplify-internal-togglebutton-primary-hover-border-color: var(
+    --amplify-internal-togglebutton-primary-border-color
+  );
+  --amplify-internal-togglebutton-primary-hover-color: var(
+    --amplify-components-togglebutton-primary-pressed-color
+  );
+}
+.amplify-togglebutton--pressed:disabled {
+  --amplify-internal-togglebutton-primary-disabled-background-color: var(
+    --amplify-components-togglebutton-primary-pressed-background-color
+  );
+  --amplify-internal-togglebutton-primary-disabled-border-color: var(
+    --amplify-components-togglebutton-primary-pressed-border-color
+  );
+  --amplify-internal-togglebutton-primary-disabled-color: var(
+    --amplify-components-togglebutton-primary-pressed-color
+  );
+}
+.amplify-togglebutton--link {
+  --amplify-internal-togglebutton-link-background-color: var(
+    --amplify-components-togglebutton-background-color
+  );
+  --amplify-internal-togglebutton-link-color: var(
+    --amplify-components-togglebutton-link-color
+  );
+  background-color: var(--amplify-internal-togglebutton-link-background-color);
+  color: var(--amplify-internal-togglebutton-link-color);
+  --amplify-internal-togglebutton-link-hover-background-color: var(
+    --amplify-components-togglebutton-link-hover-background-color
+  );
+  --amplify-internal-togglebutton-link-hover-color: var(
+    --amplify-components-togglebutton-link-hover-color
+  );
+}
+.amplify-togglebutton--link:hover {
+  background-color: var(--amplify-internal-togglebutton-link-hover-background-color);
+  color: var(--amplify-internal-togglebutton-link-hover-color);
+}
+.amplify-togglebutton--link:focus {
+  --amplify-internal-togglebutton-link-focus-background-color: var(
+    --amplify-components-togglebutton-link-focus-background-color
+  );
+  --amplify-internal-togglebutton-link-focus-color: var(
+    --amplify-components-togglebutton-link-focus-color
+  );
+  --amplify-internal-togglebutton-focus-background-color: var(
+    --amplify-internal-togglebutton-link-focus-background-color
+  );
+  --amplify-internal-togglebutton-focus-color: var(
+    --amplify-internal-togglebutton-link-focus-color
+  );
+}
+.amplify-togglebutton--link:disabled {
+  --amplify-internal-togglebutton-disabled-color: var(
+    --amplify-components-togglebutton-link-disabled-color
+  );
+}
+.amplify-togglebutton--pressed {
+  --amplify-internal-togglebutton-link-color: var(
+    --amplify-components-togglebutton-link-pressed-color
+  );
+  --amplify-internal-togglebutton-link-background-color: var(
+    --amplify-components-togglebutton-link-pressed-background-color
+  );
+}
+.amplify-togglebutton--pressed:hover {
+  --amplify-internal-togglebutton-link-hover-background-color: var(
+    --amplify-components-togglebutton-link-pressed-hover-background-color
+  );
+  --amplify-internal-togglebutton-link-hover-color: var(
+    --amplify-components-togglebutton-link-pressed-color
+  );
+}
+.amplify-togglebutton--pressed:focus {
+  --amplify-internal-togglebutton-link-focus-background-color: var(
+    --amplify-components-togglebutton-link-pressed-background-color
+  );
+  --amplify-internal-togglebutton-link-focus-color: var(
+    --amplify-components-togglebutton-link-pressed-color
+  );
 }
 .amplify-togglebuttongroup {