@cloudscape-design/components-themeable 3.0.1359 → 3.0.1361

package/lib/__tests__/theming.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=theming.test.d.ts.map

package/lib/__tests__/theming.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theming.test.d.ts","sourceRoot":"","sources":["../../../src-themeable/__tests__/theming.test.ts"],"names":[],"mappings":""}

package/lib/__tests__/theming.test.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+const mapValues_js_1 = __importDefault(require("lodash/mapValues.js"));
+const preset = {
+    propertiesMap: {
+        borderRadiusButton: '--border-radius-button-aaaaaa',
+        colorBorderButtonNormalDefault: '--color-border-button-normal-default-bbbbbb',
+    },
+};
+jest.mock('@cloudscape-design/theming-build', () => ({
+    buildThemedComponents: jest.fn().mockResolvedValue(undefined),
+}));
+jest.mock('../internal/template/internal/generated/theming/index.cjs', () => ({
+    preset,
+}));
+const theming_build_1 = require("@cloudscape-design/theming-build");
+const theming_1 = require("../theming");
+describe('buildThemedComponents', () => {
+    test('does not pass website token versions by default', async () => {
+        const theme = {};
+        await (0, theming_1.buildThemedComponents)({ theme, outputDir: '/tmp/output', baseThemeId: 'visual-refresh' });
+        expect(theming_build_1.buildThemedComponents).toHaveBeenCalledWith(expect.objectContaining({
+            preset,
+        }));
+    });
+    test('passes stable website token versions when the feature flag is enabled', async () => {
+        const theme = {};
+        await (0, theming_1.buildThemedComponents)({
+            theme,
+            outputDir: '/tmp/output',
+            baseThemeId: 'visual-refresh',
+            ...{ __tokenHashSeed: 'website' },
+        });
+        expect(theming_build_1.buildThemedComponents).toHaveBeenCalledWith(expect.objectContaining({
+            preset: {
+                ...preset,
+                tokenVersions: (0, mapValues_js_1.default)(preset.propertiesMap, () => 'website'),
+            },
+        }));
+    });
+});
+//# sourceMappingURL=theming.test.js.map

package/lib/__tests__/theming.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theming.test.js","sourceRoot":"","sources":["../../../src-themeable/__tests__/theming.test.ts"],"names":[],"mappings":";;;;;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,uEAA4C;AAE5C,MAAM,MAAM,GAAG;IACb,aAAa,EAAE;QACb,kBAAkB,EAAE,+BAA+B;QACnD,8BAA8B,EAAE,6CAA6C;KAC9E;CACF,CAAC;AAEF,IAAI,CAAC,IAAI,CAAC,kCAAkC,EAAE,GAAG,EAAE,CAAC,CAAC;IACnD,qBAAqB,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,iBAAiB,CAAC,SAAS,CAAC;CAC9D,CAAC,CAAC,CAAC;AAEJ,IAAI,CAAC,IAAI,CAAC,2DAA2D,EAAE,GAAG,EAAE,CAAC,CAAC;IAC5E,MAAM;CACP,CAAC,CAAC,CAAC;AAEJ,oEAA6F;AAE7F,wCAAmD;AAEnD,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACrC,IAAI,CAAC,iDAAiD,EAAE,KAAK,IAAI,EAAE;QACjE,MAAM,KAAK,GAAG,EAAS,CAAC;QAExB,MAAM,IAAA,+BAAqB,EAAC,EAAE,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC,CAAC;QAEhG,MAAM,CAAC,qCAAgB,CAAC,CAAC,oBAAoB,CAC3C,MAAM,CAAC,gBAAgB,CAAC;YACtB,MAAM;SACP,CAAC,CACH,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,uEAAuE,EAAE,KAAK,IAAI,EAAE;QACvF,MAAM,KAAK,GAAG,EAAS,CAAC;QAExB,MAAM,IAAA,+BAAqB,EAAC;YAC1B,KAAK;YACL,SAAS,EAAE,aAAa;YACxB,WAAW,EAAE,gBAAgB;YAC7B,GAAG,EAAE,eAAe,EAAE,SAAS,EAAE;SAClC,CAAC,CAAC;QAEH,MAAM,CAAC,qCAAgB,CAAC,CAAC,oBAAoB,CAC3C,MAAM,CAAC,gBAAgB,CAAC;YACtB,MAAM,EAAE;gBACN,GAAG,MAAM;gBACT,aAAa,EAAE,IAAA,sBAAS,EAAC,MAAM,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC;aAChE;SACF,CAAC,CACH,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport mapValues from 'lodash/mapValues.js';\n\nconst preset = {\n  propertiesMap: {\n    borderRadiusButton: '--border-radius-button-aaaaaa',\n    colorBorderButtonNormalDefault: '--color-border-button-normal-default-bbbbbb',\n  },\n};\n\njest.mock('@cloudscape-design/theming-build', () => ({\n  buildThemedComponents: jest.fn().mockResolvedValue(undefined),\n}));\n\njest.mock('../internal/template/internal/generated/theming/index.cjs', () => ({\n  preset,\n}));\n\nimport { buildThemedComponents as themingCoreBuild } from '@cloudscape-design/theming-build';\n\nimport { buildThemedComponents } from '../theming';\n\ndescribe('buildThemedComponents', () => {\n  test('does not pass website token versions by default', async () => {\n    const theme = {} as any;\n\n    await buildThemedComponents({ theme, outputDir: '/tmp/output', baseThemeId: 'visual-refresh' });\n\n    expect(themingCoreBuild).toHaveBeenCalledWith(\n      expect.objectContaining({\n        preset,\n      })\n    );\n  });\n\n  test('passes stable website token versions when the feature flag is enabled', async () => {\n    const theme = {} as any;\n\n    await buildThemedComponents({\n      theme,\n      outputDir: '/tmp/output',\n      baseThemeId: 'visual-refresh',\n      ...{ __tokenHashSeed: 'website' },\n    });\n\n    expect(themingCoreBuild).toHaveBeenCalledWith(\n      expect.objectContaining({\n        preset: {\n          ...preset,\n          tokenVersions: mapValues(preset.propertiesMap, () => 'website'),\n        },\n      })\n    );\n  });\n});\n"]}

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "85f92b8bf579bc3df4c6ef264694dfcc765637aa"
+  "commit": "74e4f3d0f6f500eee81b14e4ae7488ca04d27798"
 }

package/lib/internal/scss/alert/styles.scss

@@ -31,7 +31,7 @@ $tokens: style-api.resolve($props, carrier);
 .alert {
   @include style-api.carriers($tokens);
   @include styles.styles-reset;
-  color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-alert-default});
+  color: style-api.value($tokens, color, awsui.$color-text-alert-default);
   position: relative;
   display: flex;
   flex-direction: row;
@@ -39,13 +39,13 @@ $tokens: style-api.resolve($props, carrier);
   border-block-end: awsui.$border-width-alert-block-end solid;
   border-inline-start: awsui.$border-width-alert-inline-start solid;
   border-inline-end: awsui.$border-width-alert-inline-end solid;
-  border-start-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-alert});
-  border-start-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-alert});
-  border-end-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-alert});
-  border-end-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-alert});
-  padding-block: var(#{style-api.read($tokens, padding-block)}, #{awsui.$space-alert-vertical});
-  padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-alert-horizontal});
-  background-color: var(#{style-api.read($tokens, background-color)}, #{awsui.$color-background-container-content});
+  border-start-start-radius: style-api.value($tokens, border-radius, awsui.$border-radius-alert);
+  border-start-end-radius: style-api.value($tokens, border-radius, awsui.$border-radius-alert);
+  border-end-start-radius: style-api.value($tokens, border-radius, awsui.$border-radius-alert);
+  border-end-end-radius: style-api.value($tokens, border-radius, awsui.$border-radius-alert);
+  padding-block: style-api.value($tokens, padding-block, awsui.$space-alert-vertical);
+  padding-inline: style-api.value($tokens, padding-inline, awsui.$space-alert-horizontal);
+  background-color: style-api.value($tokens, background-color, awsui.$color-background-container-content);
 }
 
 .alert-wrapper {
@@ -173,11 +173,12 @@ $_text-colors: (
 
 @each $type in map.keys($_text-colors) {
   .type-#{$type} {
-    border-color: var(#{style-api.read($tokens, border-color)}, #{map.get($_border-colors, $type)});
-    background-color: var(#{style-api.read($tokens, background-color)}, #{map.get($_background-colors, $type)});
+    border-color: style-api.value($tokens, border-color, map.get($_border-colors, $type));
+    background-color: style-api.value($tokens, background-color, map.get($_background-colors, $type));
     > .alert-wrapper > .alert-focus-wrapper > .icon {
-      color: var(
-        #{style-api.read($icon-tokens, color)},
+      color: style-api.value(
+        $icon-tokens,
+        color,
         var(#{custom-props.$alertIconColor}, #{map.get($_text-colors, $type)})
       );
     }

package/lib/internal/scss/badge/styles.scss

@@ -17,83 +17,72 @@ $tokens: style-api.resolve(style-api.combine(style-api.$surface, (padding-block,
   @include styles.font-body-s;
   line-height: awsui.$line-height-body-m;
   display: inline-block;
-  border-start-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-badge});
-  border-start-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-badge});
-  border-end-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-badge});
-  border-end-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-badge});
+  border-start-start-radius: style-api.value($tokens, border-radius, awsui.$border-radius-badge);
+  border-start-end-radius: style-api.value($tokens, border-radius, awsui.$border-radius-badge);
+  border-end-start-radius: style-api.value($tokens, border-radius, awsui.$border-radius-badge);
+  border-end-end-radius: style-api.value($tokens, border-radius, awsui.$border-radius-badge);
   border-block-style: solid;
   border-inline-style: solid;
-  border-width: var(#{style-api.read($tokens, border-width)}, #{awsui.$border-width-badge});
-  padding-block: var(#{style-api.read($tokens, padding-block)}, 0);
-  padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-xs});
-  color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-notification-default});
+  border-width: style-api.value($tokens, border-width, awsui.$border-width-badge);
+  padding-block: style-api.value($tokens, padding-block, 0);
+  padding-inline: style-api.value($tokens, padding-inline, awsui.$space-xs);
+  color: style-api.value($tokens, color, awsui.$color-text-notification-default);
 
   &.badge-color-grey {
-    background-color: var(#{style-api.read($tokens, background-color)}, #{awsui.$color-background-badge-grey});
-    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-grey});
-    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-grey});
+    background-color: style-api.value($tokens, background-color, awsui.$color-background-badge-grey);
+    border-color: style-api.value($tokens, border-color, awsui.$color-border-badge-grey);
+    color: style-api.value($tokens, color, awsui.$color-text-badge-grey);
   }
 
   &.badge-color-green {
-    background-color: var(#{style-api.read($tokens, background-color)}, #{awsui.$color-background-badge-green});
-    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-green});
-    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-green});
+    background-color: style-api.value($tokens, background-color, awsui.$color-background-badge-green);
+    border-color: style-api.value($tokens, border-color, awsui.$color-border-badge-green);
+    color: style-api.value($tokens, color, awsui.$color-text-badge-green);
   }
 
   &.badge-color-blue {
-    background-color: var(#{style-api.read($tokens, background-color)}, #{awsui.$color-background-badge-blue});
-    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-blue});
-    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-blue});
+    background-color: style-api.value($tokens, background-color, awsui.$color-background-badge-blue);
+    border-color: style-api.value($tokens, border-color, awsui.$color-border-badge-blue);
+    color: style-api.value($tokens, color, awsui.$color-text-badge-blue);
   }
 
   &.badge-color-red {
-    background-color: var(#{style-api.read($tokens, background-color)}, #{awsui.$color-background-badge-red});
-    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-red});
-    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-red});
+    background-color: style-api.value($tokens, background-color, awsui.$color-background-badge-red);
+    border-color: style-api.value($tokens, border-color, awsui.$color-border-badge-red);
+    color: style-api.value($tokens, color, awsui.$color-text-badge-red);
   }
 
   &.badge-color-severity-critical {
-    background-color: var(
-      #{style-api.read($tokens, background-color)},
-      #{awsui.$color-background-notification-severity-critical}
+    background-color: style-api.value(
+      $tokens,
+      background-color,
+      awsui.$color-background-notification-severity-critical
     );
-    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-severity-critical});
-    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-severity-critical});
+    border-color: style-api.value($tokens, border-color, awsui.$color-border-badge-severity-critical);
+    color: style-api.value($tokens, color, awsui.$color-text-badge-severity-critical);
   }
 
   &.badge-color-severity-high {
-    background-color: var(
-      #{style-api.read($tokens, background-color)},
-      #{awsui.$color-background-notification-severity-high}
-    );
-    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-severity-high});
-    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-severity-high});
+    background-color: style-api.value($tokens, background-color, awsui.$color-background-notification-severity-high);
+    border-color: style-api.value($tokens, border-color, awsui.$color-border-badge-severity-high);
+    color: style-api.value($tokens, color, awsui.$color-text-badge-severity-high);
   }
 
   &.badge-color-severity-medium {
-    background-color: var(
-      #{style-api.read($tokens, background-color)},
-      #{awsui.$color-background-notification-severity-medium}
-    );
-    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-severity-medium});
-    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-severity-medium});
+    background-color: style-api.value($tokens, background-color, awsui.$color-background-notification-severity-medium);
+    border-color: style-api.value($tokens, border-color, awsui.$color-border-badge-severity-medium);
+    color: style-api.value($tokens, color, awsui.$color-text-badge-severity-medium);
   }
 
   &.badge-color-severity-low {
-    background-color: var(
-      #{style-api.read($tokens, background-color)},
-      #{awsui.$color-background-notification-severity-low}
-    );
-    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-severity-low});
-    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-severity-low});
+    background-color: style-api.value($tokens, background-color, awsui.$color-background-notification-severity-low);
+    border-color: style-api.value($tokens, border-color, awsui.$color-border-badge-severity-low);
+    color: style-api.value($tokens, color, awsui.$color-text-badge-severity-low);
   }
 
   &.badge-color-severity-neutral {
-    background-color: var(
-      #{style-api.read($tokens, background-color)},
-      #{awsui.$color-background-notification-severity-neutral}
-    );
-    border-color: var(#{style-api.read($tokens, border-color)}, #{awsui.$color-border-badge-severity-neutral});
-    color: var(#{style-api.read($tokens, color)}, #{awsui.$color-text-badge-severity-neutral});
+    background-color: style-api.value($tokens, background-color, awsui.$color-background-notification-severity-neutral);
+    border-color: style-api.value($tokens, border-color, awsui.$color-border-badge-severity-neutral);
+    color: style-api.value($tokens, color, awsui.$color-text-badge-severity-neutral);
   }
 }

package/lib/internal/scss/button/styles.scss

@@ -18,78 +18,78 @@ $tokens: style-api.resolve($props, carrier);
 @include style-api.docs('root', $tokens);
 
 @mixin adjust-for-variant($variant) {
-  background: var(
-    #{style-api.read($tokens, background-color)},
+  background: style-api.value(
+    $tokens,
+    background-color,
     var(#{custom-props.$styleBackgroundDefault}, map.get($variant, 'default-background'))
   );
-  color: var(
-    #{style-api.read($tokens, color)},
-    var(#{custom-props.$styleColorDefault}, map.get($variant, 'default-color'))
-  );
-  border-color: var(
-    #{style-api.read($tokens, border-color)},
+  color: style-api.value($tokens, color, var(#{custom-props.$styleColorDefault}, map.get($variant, 'default-color')));
+  border-color: style-api.value(
+    $tokens,
+    border-color,
     var(#{custom-props.$styleBorderColorDefault}, #{map.get($variant, 'default-border-color')})
   );
-  box-shadow: var(#{style-api.read($tokens, box-shadow)}, var(#{custom-props.$styleBoxShadowDefault}));
+  box-shadow: style-api.value($tokens, box-shadow, var(#{custom-props.$styleBoxShadowDefault}));
   @if map.get($variant, 'border-width') {
-    border-block-width: var(#{style-api.read($tokens, border-width)}, #{map.get($variant, 'border-width')});
-    border-inline-width: var(#{style-api.read($tokens, border-width)}, #{map.get($variant, 'border-width')});
+    border-block-width: style-api.value($tokens, border-width, map.get($variant, 'border-width'));
+    border-inline-width: style-api.value($tokens, border-width, map.get($variant, 'border-width'));
   }
   position: relative;
   text-decoration: none;
   @if map.get($variant, 'padding') {
-    padding-block: var(#{style-api.read($tokens, padding-block)}, #{map.get($variant, 'padding')});
-    padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{map.get($variant, 'padding')});
+    padding-block: style-api.value($tokens, padding-block, map.get($variant, 'padding'));
+    padding-inline: style-api.value($tokens, padding-inline, map.get($variant, 'padding'));
   }
   font-weight: map.get($variant, 'font-weight');
 
   &:hover {
-    background: var(
-      #{style-api.read($tokens, background-color)},
+    background: style-api.value(
+      $tokens,
+      background-color,
       var(#{custom-props.$styleBackgroundHover}, map.get($variant, 'hover-background'))
     );
-    border-color: var(
-      #{style-api.read($tokens, border-color)},
+    border-color: style-api.value(
+      $tokens,
+      border-color,
       var(#{custom-props.$styleBorderColorHover}, map.get($variant, 'hover-border-color'))
     );
-    color: var(
-      #{style-api.read($tokens, color)},
-      var(#{custom-props.$styleColorHover}, map.get($variant, 'hover-color'))
-    );
-    box-shadow: var(#{style-api.read($tokens, box-shadow)}, var(#{custom-props.$styleBoxShadowHover}));
+    color: style-api.value($tokens, color, var(#{custom-props.$styleColorHover}, map.get($variant, 'hover-color')));
+    box-shadow: style-api.value($tokens, box-shadow, var(#{custom-props.$styleBoxShadowHover}));
     text-decoration: none;
   }
 
   &:active {
-    background: var(
-      #{style-api.read($tokens, background-color)},
+    background: style-api.value(
+      $tokens,
+      background-color,
       var(#{custom-props.$styleBackgroundActive}, map.get($variant, 'active-background'))
     );
-    border-color: var(
-      #{style-api.read($tokens, border-color)},
+    border-color: style-api.value(
+      $tokens,
+      border-color,
       var(#{custom-props.$styleBorderColorActive}, map.get($variant, 'active-border-color'))
     );
-    color: var(
-      #{style-api.read($tokens, color)},
-      var(#{custom-props.$styleColorActive}, map.get($variant, 'active-color'))
-    );
-    box-shadow: var(#{style-api.read($tokens, box-shadow)}, var(#{custom-props.$styleBoxShadowActive}));
+    color: style-api.value($tokens, color, var(#{custom-props.$styleColorActive}, map.get($variant, 'active-color')));
+    box-shadow: style-api.value($tokens, box-shadow, var(#{custom-props.$styleBoxShadowActive}));
   }
 
   &.disabled {
-    background: var(
-      #{style-api.read($tokens, background-color)},
+    background: style-api.value(
+      $tokens,
+      background-color,
       var(#{custom-props.$styleBackgroundDisabled}, map.get($variant, 'disabled-background'))
     );
-    border-color: var(
-      #{style-api.read($tokens, border-color)},
+    border-color: style-api.value(
+      $tokens,
+      border-color,
       var(#{custom-props.$styleBorderColorDisabled}, map.get($variant, 'disabled-border-color'))
     );
-    color: var(
-      #{style-api.read($tokens, color)},
+    color: style-api.value(
+      $tokens,
+      color,
       var(#{custom-props.$styleColorDisabled}, map.get($variant, 'disabled-color'))
     );
-    box-shadow: var(#{style-api.read($tokens, box-shadow)}, var(#{custom-props.$styleBoxShadowDisabled}));
+    box-shadow: style-api.value($tokens, box-shadow, var(#{custom-props.$styleBoxShadowDisabled}));
     text-decoration: none;
     cursor: auto;
   }
@@ -105,14 +105,14 @@ $tokens: style-api.resolve($props, carrier);
   @include styles.text-wrapping;
   @include styles.font-button;
   letter-spacing: awsui.$font-button-letter-spacing;
-  border-start-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-button});
-  border-start-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-button});
-  border-end-start-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-button});
-  border-end-end-radius: var(#{style-api.read($tokens, border-radius)}, #{awsui.$border-radius-button});
-  border-block: var(#{style-api.read($tokens, border-width)}, #{awsui.$border-width-button}) solid;
-  border-inline: var(#{style-api.read($tokens, border-width)}, #{awsui.$border-width-button}) solid;
-  padding-block: var(#{style-api.read($tokens, padding-block)}, #{awsui.$space-button-vertical});
-  padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-button-horizontal});
+  border-start-start-radius: style-api.value($tokens, border-radius, awsui.$border-radius-button);
+  border-start-end-radius: style-api.value($tokens, border-radius, awsui.$border-radius-button);
+  border-end-start-radius: style-api.value($tokens, border-radius, awsui.$border-radius-button);
+  border-end-end-radius: style-api.value($tokens, border-radius, awsui.$border-radius-button);
+  border-block: style-api.value($tokens, border-width, awsui.$border-width-button) solid;
+  border-inline: style-api.value($tokens, border-width, awsui.$border-width-button) solid;
+  padding-block: style-api.value($tokens, padding-block, awsui.$space-button-vertical);
+  padding-inline: style-api.value($tokens, padding-inline, awsui.$space-button-horizontal);
   display: inline-block; // for <a> as a button
   text-decoration: none;
   cursor: pointer;
@@ -158,8 +158,8 @@ $tokens: style-api.resolve($props, carrier);
   }
 
   &.button-no-text {
-    padding-inline-start: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-button-icon-only-horizontal});
-    padding-inline-end: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-button-icon-only-horizontal});
+    padding-inline-start: style-api.value($tokens, padding-inline, awsui.$space-button-icon-only-horizontal);
+    padding-inline-end: style-api.value($tokens, padding-inline, awsui.$space-button-icon-only-horizontal);
   }
 
   &.button-no-wrap {
@@ -177,12 +177,12 @@ $tokens: style-api.resolve($props, carrier);
   &.variant-flashbar-icon {
     // Icon has vertical padding, but no horizontal, we need to conpensate this
     // in order to have equal height and width
-    padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-xxs});
+    padding-inline: style-api.value($tokens, padding-inline, awsui.$space-xxs);
   }
 
   &.variant-modal-dismiss {
-    padding-block: var(#{style-api.read($tokens, padding-block)}, #{awsui.$space-button-modal-dismiss-vertical});
-    padding-inline: var(#{style-api.read($tokens, padding-inline)}, #{awsui.$space-xxs});
+    padding-block: style-api.value($tokens, padding-block, awsui.$space-button-modal-dismiss-vertical);
+    padding-inline: style-api.value($tokens, padding-inline, awsui.$space-xxs);
     margin-inline-end: calc(-1 * #{awsui.$space-xxs});
   }
 

package/lib/internal/scss/cards/styles.scss

@@ -7,12 +7,16 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
+@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 .root {
   @include styles.styles-reset();
 }
 
 .header {
+  &:not(.header-variant-full-page) {
+    #{custom-props.$inlineLabelBackgroundColor}: awsui.$color-background-container-header;
+  }
   &-variant-full-page.header-refresh {
     padding-block-start: 0;
     padding-inline-start: 0;

package/lib/internal/scss/container/styles.scss

@@ -6,6 +6,7 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
 @use './shared' as shared;
+@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 .root {
   @include styles.styles-reset;
@@ -25,6 +26,7 @@
     &-default,
     &-stacked {
       background-color: awsui.$color-background-container-content;
+      #{custom-props.$inlineLabelBackgroundColor}: awsui.$color-background-container-content;
       // Border and shadows are applied with ::before and ::after elements (respectively)
       @include styles.container-style;
     }

package/lib/internal/scss/icon/hover-motion.scss

@@ -608,10 +608,10 @@ $icon-hover-motion: (
       property: stroke-dashoffset,
       base: (
         stroke-dasharray: 30,
-        stroke-dashoffset: 0,
+        stroke-dashoffset: 60px,
       ),
       to: (
-        stroke-dashoffset: -4px,
+        stroke-dashoffset: 56px,
       ),
     ),
     (
@@ -639,10 +639,10 @@ $icon-hover-motion: (
       property: stroke-dashoffset,
       base: (
         stroke-dasharray: 30,
-        stroke-dashoffset: 0,
+        stroke-dashoffset: 60px,
       ),
       to: (
-        stroke-dashoffset: -4px,
+        stroke-dashoffset: 56px,
       ),
     ),
     (
@@ -1382,10 +1382,10 @@ $icon-hover-motion: (
       property: stroke-dashoffset,
       base: (
         stroke-dasharray: 32 2,
-        stroke-dashoffset: 0,
+        stroke-dashoffset: 34px,
       ),
       to: (
-        stroke-dashoffset: -2px,
+        stroke-dashoffset: 32px,
       ),
     ),
     (
@@ -1739,11 +1739,11 @@ $icon-hover-motion: (
       0%,
       100% {
         stroke-dasharray: 7.4;
-        stroke-dashoffset: 0;
+        stroke-dashoffset: 14.8px;
       }
       50% {
         stroke-dasharray: 6, 7.4;
-        stroke-dashoffset: -0.7px;
+        stroke-dashoffset: 12.7px;
       }
     }
 
@@ -1751,11 +1751,11 @@ $icon-hover-motion: (
       0%,
       100% {
         stroke-dasharray: 7.4;
-        stroke-dashoffset: 0;
+        stroke-dashoffset: 14.8px;
       }
       50% {
         stroke-dasharray: 6, 7.4;
-        stroke-dashoffset: -0.7px;
+        stroke-dashoffset: 12.7px;
       }
     }
 
@@ -1847,11 +1847,11 @@ $icon-hover-motion: (
       40%,
       80%,
       100% {
-        stroke-dashoffset: 0;
+        stroke-dashoffset: 4px;
       }
       20%,
       60% {
-        stroke-dashoffset: -0.049px;
+        stroke-dashoffset: 3.951px;
       }
     }
 
@@ -2198,6 +2198,18 @@ $_spec-keys: (part, animation, to, base, origin, duration, easing, delay, iterat
       {
         @error 'The $icon-hover-motion spec for `#{$name}` sets motion but is missing `duration` or `easing`.';
       }
+
+      // Safari mishandles negative dash offsets. This check validates no negative offsets exist.
+      // Instead of negative offsets, shift the offset up by one period to keep it positive.
+      @each $state in (base, to) {
+        $values: map.get($spec, $state) or ();
+        $offset: map.get($values, stroke-dashoffset);
+        @if meta.type-of($offset) == 'number' and $offset < 0 {
+          @error 'The $icon-hover-motion spec for `#{$name}` sets a negative `stroke-dashoffset`, ' +
+            'which Safari mishandles. Add one full dash period (the sum of the `stroke-dasharray` ' +
+            'values) to keep it positive — the rendering is identical.';
+        }
+      }
     }
   }
 }

package/lib/internal/scss/input/styles.scss

@@ -238,6 +238,10 @@
 
 .inline-label {
   @include forms.inline-label;
+
+  &-disabled {
+    @include forms.inline-label-disabled;
+  }
 }
 
 .input-adorned-container {