cloudscape-design · pan-kot · Jun 1, 2026
@@ -0,0 +1,39 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+
+import { ActionCard, Checkbox, ColumnLayout, Icon, IconProps } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function ActionCardStyleV2Page() {
+  const [disabled, setDisabled] = useState(false);
+  const props = (header: string, description: string, iconName: IconProps.Name, className: string) => ({
+    header,
+    description,
+    disabled,
+    icon: <Icon name={iconName} />,
+    classNames: className ? { root: className } : undefined,
+  });
+  return (
+    <SimplePage
+      title="ActionCard with Style API v2"
+      screenshotArea={{}}
+      settings={
+        <Checkbox checked={disabled} onChange={({ detail }) => setDisabled(detail.checked)}>
+          Disable cards
+        </Checkbox>
+      }
+    >
+      <ColumnLayout columns={2}>
+        <ActionCard {...props('Settings', 'Configure preferences', 'settings', '')} />
+        <ActionCard {...props('Run Tests', 'Execute test suite', 'status-positive', styles['card-accent'])} />
+        <ActionCard {...props('Deploy Service', 'Push changes to production', 'upload', styles['card-success'])} />
+        <ActionCard {...props('Review Logs', 'Inspect application logs', 'status-warning', styles['card-warning'])} />
+      </ColumnLayout>
+    </SimplePage>
+  );
+}
@@ -0,0 +1,44 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+@mixin card-theme($border, $border-hover, $bg, $bg-hover, $icon-color: null) {
+  --awsui-style-action-card-background: #{$bg};
+  --awsui-style-action-card-background-hover: #{$bg-hover};
+  --awsui-style-action-card-border-color: #{$border};
+  --awsui-style-action-card-border-color-hover: #{$border-hover};
+  --awsui-style-action-card-border-radius: 12px;
+  --awsui-style-action-card-icon-color-disabled: #{palette.$text-disabled};
+  --awsui-style-transition-duration: 200ms;
+
+  @if $icon-color {
+    --awsui-style-action-card-icon-color: #{$icon-color};
+  }
+}
+
+.card-accent {
+  @include card-theme(palette.$border-accent, palette.$accent-hover, palette.$surface, palette.$surface-alt);
+}
+
+.card-success {
+  @include card-theme(
+    palette.$success,
+    palette.$success,
+    palette.$success-surface,
+    palette.$surface-alt,
+    palette.$success
+  );
+}
+
+.card-warning {
+  @include card-theme(
+    palette.$warning,
+    palette.$warning,
+    palette.$warning-surface,
+    palette.$surface-alt,
+    palette.$warning
+  );
+}
@@ -0,0 +1,82 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import { Alert, AlertProps, Button, Checkbox, SpaceBetween } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function AlertStyleV2Page() {
+  const [useCustom, setUseCustom] = useState(true);
+  const [dismissible, setDismissible] = useState(true);
+  const props = (
+    type: AlertProps.Type,
+    header: string,
+    children: string,
+    className: string,
+    dismissClassName: string
+  ) => ({
+    type,
+    header,
+    children,
+    dismissible,
+    classNames: useCustom ? { root: className, dismissButton: dismissClassName } : undefined,
+  });
+  return (
+    <SimplePage
+      title="Alert with Style API v2"
+      screenshotArea={{}}
+      i18n={{}}
+      settings={
+        <SpaceBetween size="xs">
+          <Checkbox checked={useCustom} onChange={({ detail }) => setUseCustom(detail.checked)}>
+            Custom styling
+          </Checkbox>
+          <Checkbox checked={dismissible} onChange={({ detail }) => setDismissible(detail.checked)}>
+            Dismissible
+          </Checkbox>
+        </SpaceBetween>
+      }
+    >
+      <Alert
+        {...props(
+          'info',
+          'Information',
+          'Your instance is running in the us-east-1 region.',
+          styles['custom-alert'],
+          styles['custom-dismiss']
+        )}
+      />
+      <Alert
+        {...props(
+          'success',
+          'Deployment successful',
+          'All 3 stacks have been deployed without errors.',
+          styles['custom-alert-success'],
+          styles['custom-dismiss-success']
+        )}
+      />
+      <Alert
+        {...props(
+          'warning',
+          'Approaching limit',
+          'You have used 85% of your allocated storage.',
+          styles['custom-alert-warning'],
+          styles['custom-dismiss-warning']
+        )}
+      />
+      <Alert
+        {...props(
+          'error',
+          'Connection failed',
+          'Unable to reach the database endpoint. Check your security group rules.',
+          styles['custom-alert-error'],
+          styles['custom-dismiss-error']
+        )}
+        action={<Button>Retry</Button>}
+      />
+    </SimplePage>
+  );
+}
@@ -0,0 +1,53 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../app/themes/style-v2-palette' as palette;
+
+@mixin alert-theme($bg, $border, $icon) {
+  --awsui-style-alert-background: #{$bg};
+  --awsui-style-alert-border-color: #{$border};
+  --awsui-style-alert-border-width: 4px;
+  --awsui-style-alert-border-radius: 8px;
+  --awsui-style-alert-color: #{palette.$text};
+  --awsui-style-alert-icon-color: #{$icon};
+}
+
+@mixin dismiss-theme($color) {
+  --awsui-style-button-color-default: #{$color};
+  --awsui-style-button-color-hover: #{$color};
+  --awsui-style-button-color-active: #{palette.$accent-active};
+}
+
+.custom-alert {
+  @include alert-theme(palette.$info-surface, palette.$info, palette.$info);
+}
+
+.custom-dismiss {
+  @include dismiss-theme(palette.$info);
+}
+
+.custom-alert-success {
+  @include alert-theme(palette.$success-surface, palette.$success, palette.$success);
+}
+
+.custom-dismiss-success {
+  @include dismiss-theme(palette.$success);
+}
+
+.custom-alert-warning {
+  @include alert-theme(palette.$warning-surface, palette.$warning, palette.$warning);
+}
+
+.custom-dismiss-warning {
+  @include dismiss-theme(palette.$warning);
+}
+
+.custom-alert-error {
+  @include alert-theme(palette.$error-surface, palette.$error, palette.$error);
+}
+
+.custom-dismiss-error {
+  @include dismiss-theme(palette.$error);
+}
@@ -0,0 +1,56 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+// Shared color palette for style API v2 demos.
+// Uses light-dark() for accessible contrast in both color schemes.
+// Light mode: dark text on light backgrounds. Dark mode: light text on dark backgrounds.
+
+// 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%));
+
+// 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%));
+$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%));
+
+// 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-foreground: light-dark(hsl(0, 0%, 100%), hsl(220, 30%, 10%));
+$control-foreground-disabled: light-dark(hsl(220, 5%, 70%), hsl(220, 5%, 40%));
+
+// Focus ring
+$focus-ring: light-dark(hsl(330, 90%, 50%), hsl(330, 90%, 70%));
+$focus-ring-radius: 4px;
+$focus-ring-width: 2px;
+
+// Transition
+$transition-duration: 150ms;
+$transition-easing: ease-in-out;
@@ -0,0 +1,72 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+
+import { Autosuggest, Checkbox, SpaceBetween } from '~components';
+
+import { SimplePage } from '../app/templates';
+
+import styles from './style-v2.scss';
+
+export default function StyleV2AutosuggestPage() {
+  const [value, setValue] = useState('');
+  const [styled, setStyled] = useState(true);
+  const [disabled, setDisabled] = useState(false);
+  const [readOnly, setReadOnly] = useState(false);
+  const [invalid, setInvalid] = useState(false);
+
+  const computeValues = ['EC2', 'Lambda', 'ECS'];
+
+  const groupedOptions = [
+    {
+      label: 'Compute',
+      options: [{ value: 'EC2' }, { value: 'Lambda' }, { value: 'ECS' }],
+    },
+    {
+      label: 'Storage',
+      options: [{ value: 'S3' }, { value: 'EBS' }, { value: 'EFS', disabled: true }],
+    },
+  ];
+
+  return (
+    <SimplePage
+      title="Autosuggest with Style API v2"
+      screenshotArea={{}}
+      settings={
+        <SpaceBetween size="xs">
+          <Checkbox checked={styled} onChange={({ detail }) => setStyled(detail.checked)}>
+            styled
+          </Checkbox>
+          <Checkbox checked={disabled} onChange={({ detail }) => setDisabled(detail.checked)}>
+            disabled
+          </Checkbox>
+          <Checkbox checked={readOnly} onChange={({ detail }) => setReadOnly(detail.checked)}>
+            readOnly
+          </Checkbox>
+          <Checkbox checked={invalid} onChange={({ detail }) => setInvalid(detail.checked)}>
+            invalid
+          </Checkbox>
+        </SpaceBetween>
+      }
+    >
+      <Autosuggest
+        value={value}
+        onChange={({ detail }) => setValue(detail.value)}
+        placeholder="Search services..."
+        enteredTextLabel={v => `Use: ${v}`}
+        options={groupedOptions}
+        disabled={disabled}
+        readOnly={readOnly}
+        invalid={invalid}
+        classNames={{
+          root: styled ? (invalid ? styles['styled-autosuggest-invalid'] : styles['styled-autosuggest']) : undefined,
+          options: styled
+            ? ({ option }) =>
+                computeValues.includes(option.value!) ? styles['option-compute'] : styles['option-storage']
+            : undefined,
+        }}
+      />
+    </SimplePage>
+  );
+}