chore: Internal style api v2 for alert, badge, button

gulpfile.js

@@ -5,6 +5,7 @@ const { series, parallel, watch } = require('gulp');
 const {
   clean,
   docs,
+  styleDocs,
   generateEnvironment,
   generateIcons,
   generateIndexFile,
@@ -36,7 +37,7 @@ const quickBuild = series(
 exports.clean = clean;
 exports['quick-build'] = quickBuild;
 exports.i18n = generateI18nMessages;
-exports.build = series(quickBuild, parallel(buildPages, themeableSource, docs, sizeLimit, testDefinitions));
+exports.build = series(quickBuild, parallel(buildPages, themeableSource, docs, styleDocs, sizeLimit, testDefinitions));
 exports['build:test-definitions'] = testDefinitions;
 exports.test = series(unit, integ, a11y);
 exports['test:unit'] = unit;

pages/alert/style-api-v2.page.tsx

@@ -0,0 +1,32 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { Alert, Button, Icon, IconProvider } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-api-v2.scss';
+
+export default function () {
+  return (
+    <IconProvider icons={{ 'status-positive': <Icon name="gen-ai" size="inherit" /> }}>
+      <SimplePage title="Alert - Style API v2" screenshotArea={{}} i18n={{}}>
+        <Alert
+          type="success"
+          dismissible={true}
+          action={<Button {...{ classNames: { button: styles['alert-genai-action'] } }}>Generate again</Button>}
+          {...{
+            classNames: {
+              root: styles['alert-genai'],
+              icon: styles['alert-genai-icon'],
+              dismissButton: styles['alert-genai-dismiss'],
+            },
+          }}
+        >
+          Your changes are ready
+        </Alert>
+      </SimplePage>
+    </IconProvider>
+  );
+}

pages/alert/style-api-v2.scss

@@ -0,0 +1,49 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../style-api/palette' as palette;
+
+.alert-genai {
+  --awsui-style-background-color: #{palette.$genai-surface};
+  --awsui-style-color: #{palette.$genai-text};
+  --awsui-style-border-color: #{palette.$genai};
+  --awsui-style-border-radius: 4px;
+  --awsui-style-padding-block: 12px;
+  --awsui-style-padding-inline: 24px;
+  --awsui-style-focus-ring-color: #{palette.$genai};
+}
+
+.alert-genai-icon {
+  --awsui-style-color: #{palette.$genai};
+}
+
+.alert-genai-action {
+  --awsui-style-background-color: #{palette.$genai};
+  --awsui-style-color: #{palette.$text-on-accent};
+  --awsui-style-border-color: #{palette.$genai};
+  --awsui-style-border-radius: 4px;
+  --awsui-style-focus-ring-color: #{palette.$genai};
+
+  &:hover,
+  &:focus {
+    --awsui-style-background-color: #{palette.$genai-hover};
+    --awsui-style-border-color: #{palette.$genai-hover};
+  }
+
+  &:active {
+    --awsui-style-background-color: #{palette.$genai-active};
+    --awsui-style-border-color: #{palette.$genai-active};
+  }
+}
+
+.alert-genai-dismiss {
+  --awsui-style-color: #{palette.$genai-text};
+  --awsui-style-focus-ring-color: #{palette.$genai};
+
+  &:hover,
+  &:focus {
+    --awsui-style-color: #{palette.$genai};
+  }
+}

pages/badge/style-api-v2.page.tsx

@@ -0,0 +1,21 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+
+import { Badge, SpaceBetween } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-api-v2.scss';
+
+export default function () {
+  return (
+    <SimplePage title="Badge - Style API v2" screenshotArea={{}}>
+      <SpaceBetween size="m" direction="horizontal">
+        <Badge {...{ classNames: { root: clsx(styles.badge, styles['badge-info-pill']) } }}>Info pill</Badge>
+        <Badge {...{ classNames: { root: clsx(styles.badge, styles['badge-error-square']) } }}>Error square</Badge>
+      </SpaceBetween>
+    </SimplePage>
+  );
+}

pages/badge/style-api-v2.scss

@@ -0,0 +1,26 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../style-api/palette' as palette;
+
+.badge {
+  --awsui-style-border-color: transparent;
+  --awsui-style-border-radius: 4px;
+  --awsui-style-border-width: 3px;
+  --awsui-style-padding-block: 6px;
+  --awsui-style-padding-inline: 12px;
+}
+
+.badge-info-pill {
+  --awsui-style-background-color: #{palette.$accent};
+  --awsui-style-color: #{palette.$text-on-accent};
+  --awsui-style-border-radius: 77px;
+}
+
+.badge-error-square {
+  --awsui-style-background-color: #{palette.$error-surface};
+  --awsui-style-color: #{palette.$error};
+  --awsui-style-border-color: #{palette.$error};
+}

pages/button/style-api-v2.page.tsx

@@ -0,0 +1,104 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useContext } from 'react';
+import clsx from 'clsx';
+
+import { Button, Checkbox, KeyValuePairs, SpaceBetween } from '~components';
+
+import AppContext, { AppContextType } from '../app/app-context';
+import { SimplePage } from '../app/templates';
+
+import styles from './style-api-v2.scss';
+
+type PageContext = React.Context<
+  AppContextType<{
+    loading?: boolean;
+    disabled?: boolean;
+    disabledReason?: boolean;
+  }>
+>;
+
+export default function () {
+  const {
+    urlParams: { loading = false, disabled = false, disabledReason = false },
+    setUrlParams,
+  } = useContext(AppContext as PageContext);
+  const shared = { loading, disabled, disabledReason: disabledReason ? 'Disabled reason' : undefined };
+  const disabledStyle = disabled || loading ? styles.disabled : undefined;
+  return (
+    <SimplePage
+      title="Button - Style API v2"
+      screenshotArea={{}}
+      settings={
+        <SpaceBetween size="xs" direction="horizontal">
+          <Checkbox checked={loading} onChange={({ detail }) => setUrlParams({ loading: detail.checked })}>
+            loading
+          </Checkbox>
+          <Checkbox checked={disabled} onChange={({ detail }) => setUrlParams({ disabled: detail.checked })}>
+            disabled
+          </Checkbox>
+          <Checkbox
+            checked={disabledReason}
+            onChange={({ detail }) => setUrlParams({ disabledReason: detail.checked })}
+          >
+            disabled reason
+          </Checkbox>
+        </SpaceBetween>
+      }
+    >
+      <KeyValuePairs
+        items={[
+          {
+            type: 'pair',
+            label: 'Danger button',
+            value: (
+              <Button
+                iconName="remove"
+                {...shared}
+                {...{ classNames: { button: clsx(styles['button-danger'], disabledStyle) } }}
+              >
+                Delete resource
+              </Button>
+            ),
+          },
+          {
+            type: 'pair',
+            label: 'Circle button',
+            value: (
+              <Button
+                variant="icon"
+                iconName="copy"
+                ariaLabel="Copy"
+                {...shared}
+                {...{ classNames: { button: clsx(styles['button-circle'], disabledStyle) } }}
+              />
+            ),
+          },
+          {
+            type: 'pair',
+            label: 'Ghost button',
+            value: (
+              <Button
+                iconName="settings"
+                {...shared}
+                {...{ classNames: { button: clsx(styles['button-ghost'], disabledStyle) } }}
+              >
+                Settings
+              </Button>
+            ),
+          },
+          {
+            type: 'pair',
+            label: 'Link button',
+            value: (
+              <Button variant="link" href="#" external={true} {...{ classNames: { anchor: styles['button-ghost'] } }}>
+                Preferences
+              </Button>
+            ),
+          },
+        ]}
+      />
+    </SimplePage>
+  );
+}

pages/button/style-api-v2.scss

@@ -0,0 +1,81 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../style-api/palette' as palette;
+
+.button-danger {
+  --awsui-style-background-color: #{palette.$error};
+  --awsui-style-color: #{palette.$text-on-accent};
+  --awsui-style-border-color: #{palette.$error};
+  --awsui-style-border-radius: 4px;
+  --awsui-style-padding-inline: 24px;
+  --awsui-style-padding-block: 10px;
+
+  &:hover,
+  &:focus {
+    --awsui-style-background-color: #{palette.$error-hover};
+    --awsui-style-color: #{palette.$text-on-accent};
+    --awsui-style-border-color: #{palette.$error-hover};
+    --awsui-style-focus-ring-color: #{palette.$error-hover};
+  }
+
+  &:active {
+    --awsui-style-background-color: #{palette.$error-active};
+    --awsui-style-color: #{palette.$text-on-accent};
+    --awsui-style-border-color: #{palette.$error-active};
+  }
+}
+
+.button-circle {
+  --awsui-style-background-color: #{palette.$subtle};
+  --awsui-style-color: #{palette.$text};
+  --awsui-style-border-color: #{palette.$subtle};
+  --awsui-style-border-radius: 50%;
+  --awsui-style-padding-inline: 10px;
+  --awsui-style-padding-block: 8px;
+  --awsui-style-focus-ring-color: #{palette.$accent};
+  --awsui-style-focus-ring-radius: 50%;
+  --awsui-style-focus-ring-gutter-block: 5px;
+  --awsui-style-focus-ring-gutter-inline: 5px;
+
+  &:hover,
+  &:focus {
+    --awsui-style-background-color: #{palette.$subtle-hover};
+    --awsui-style-color: #{palette.$text};
+    --awsui-style-border-color: #{palette.$subtle-hover};
+  }
+
+  &:active {
+    --awsui-style-background-color: #{palette.$subtle-active};
+    --awsui-style-color: #{palette.$text};
+    --awsui-style-border-color: #{palette.$subtle-active};
+  }
+}
+
+.button-ghost {
+  --awsui-style-padding-inline: 12px;
+  --awsui-style-padding-block: 4px;
+  --awsui-style-border-radius: 4px;
+  --awsui-style-color: #{palette.$accent};
+  --awsui-style-border-color: transparent;
+  --awsui-style-focus-ring-color: #{palette.$accent};
+
+  &:hover,
+  &:focus {
+    --awsui-style-background-color: #{palette.$surface};
+    --awsui-style-border-color: #{palette.$surface};
+  }
+
+  &:active {
+    --awsui-style-background-color: #{palette.$surface-alt};
+    --awsui-style-border-color: #{palette.$surface-alt};
+  }
+}
+
+.disabled.disabled {
+  --awsui-style-background-color: #{palette.$control-bg-disabled};
+  --awsui-style-color: #{palette.$control-fg-disabled};
+  --awsui-style-border-color: #{palette.$control-bg-disabled};
+}

pages/style-api/palette.scss

@@ -0,0 +1,55 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+// Brand accent
+$accent: light-dark(hsl(330, 75%, 42%), hsl(330, 75%, 68%));
+$accent-hover: light-dark(hsl(330, 75%, 34%), hsl(330, 75%, 78%));
+$accent-active: light-dark(hsl(330, 75%, 26%), hsl(330, 75%, 88%));
+
+// Surfaces
+$surface: light-dark(hsl(220, 30%, 97%), hsl(220, 30%, 15%));
+$surface-alt: light-dark(hsl(220, 30%, 93%), hsl(220, 30%, 20%));
+$subtle: light-dark(hsl(220, 25%, 90%), hsl(220, 25%, 24%));
+$subtle-hover: light-dark(hsl(220, 25%, 84%), hsl(220, 25%, 30%));
+$subtle-active: light-dark(hsl(220, 25%, 78%), hsl(220, 25%, 36%));
+
+// Text
+$text: light-dark(hsl(220, 30%, 15%), hsl(220, 30%, 95%));
+$text-muted: light-dark(hsl(220, 10%, 45%), hsl(220, 10%, 65%));
+$text-disabled: light-dark(hsl(220, 5%, 65%), hsl(220, 5%, 40%));
+$text-on-accent: light-dark(hsl(0, 0%, 100%), hsl(220, 30%, 10%));
+
+// Borders
+$border: light-dark(hsl(220, 20%, 80%), hsl(220, 20%, 35%));
+$border-accent: light-dark(hsl(330, 75%, 42%), hsl(330, 75%, 68%));
+$border-disabled: light-dark(hsl(220, 5%, 85%), hsl(220, 5%, 30%));
+
+// Status colors
+$success: light-dark(hsl(145, 60%, 40%), hsl(145, 60%, 65%));
+$success-surface: light-dark(hsl(145, 40%, 95%), hsl(145, 40%, 15%));
+$error: light-dark(hsl(0, 65%, 50%), hsl(0, 65%, 70%));
+$error-surface: light-dark(hsl(0, 50%, 95%), hsl(0, 50%, 15%));
+$error-hover: light-dark(hsl(0, 65%, 42%), hsl(0, 65%, 78%));
+$error-active: light-dark(hsl(0, 65%, 34%), hsl(0, 65%, 86%));
+$warning: light-dark(hsl(35, 80%, 45%), hsl(35, 80%, 65%));
+$warning-surface: light-dark(hsl(35, 60%, 95%), hsl(35, 60%, 15%));
+$info: light-dark(hsl(200, 70%, 45%), hsl(200, 70%, 65%));
+$info-surface: light-dark(hsl(200, 50%, 95%), hsl(200, 50%, 15%));
+
+// Gen-AI accent (violet) — a distinct brand hue for gen-ai surfaces.
+$genai: light-dark(hsl(265, 70%, 52%), hsl(265, 85%, 76%));
+$genai-hover: light-dark(hsl(265, 70%, 44%), hsl(265, 85%, 84%));
+$genai-active: light-dark(hsl(265, 70%, 36%), hsl(265, 85%, 90%));
+$genai-surface: light-dark(hsl(265, 100%, 97%), hsl(265, 45%, 16%));
+$genai-text: light-dark(hsl(265, 55%, 32%), hsl(265, 70%, 90%));
+
+// Controls
+$control-bg: light-dark(hsl(0, 0%, 100%), hsl(220, 20%, 20%));
+$control-bg-checked: light-dark(hsl(330, 75%, 42%), hsl(330, 75%, 68%));
+$control-bg-disabled: light-dark(hsl(220, 5%, 92%), hsl(220, 5%, 25%));
+$control-border: light-dark(hsl(220, 20%, 70%), hsl(220, 20%, 45%));
+$control-border-checked: light-dark(hsl(330, 75%, 42%), hsl(330, 75%, 68%));
+$control-fg: light-dark(hsl(0, 0%, 100%), hsl(220, 30%, 10%));
+$control-fg-disabled: light-dark(hsl(220, 5%, 70%), hsl(220, 5%, 40%));