diff --git a/pages/action-card/style-v2.page.tsx b/pages/action-card/style-v2.page.tsx new file mode 100644 index 0000000000..3db47bb659 --- /dev/null +++ b/pages/action-card/style-v2.page.tsx @@ -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: , + classNames: className ? { root: className } : undefined, + }); + return ( + setDisabled(detail.checked)}> + Disable cards + + } + > + + + + + + + + ); +} diff --git a/pages/action-card/style-v2.scss b/pages/action-card/style-v2.scss new file mode 100644 index 0000000000..885ce8f59b --- /dev/null +++ b/pages/action-card/style-v2.scss @@ -0,0 +1,43 @@ +/* + 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}; + + @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 + ); +} diff --git a/pages/alert/style-v2.page.tsx b/pages/alert/style-v2.page.tsx new file mode 100644 index 0000000000..929f02fa18 --- /dev/null +++ b/pages/alert/style-v2.page.tsx @@ -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 ( + + setUseCustom(detail.checked)}> + Custom styling + + setDismissible(detail.checked)}> + Dismissible + + + } + > + + + + Retry} + /> + + ); +} diff --git a/pages/alert/style-v2.scss b/pages/alert/style-v2.scss new file mode 100644 index 0000000000..024723d06b --- /dev/null +++ b/pages/alert/style-v2.scss @@ -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); +} diff --git a/pages/app/themes/style-v2-palette.scss b/pages/app/themes/style-v2-palette.scss new file mode 100644 index 0000000000..6296eaaeb3 --- /dev/null +++ b/pages/app/themes/style-v2-palette.scss @@ -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; diff --git a/pages/autosuggest/style-v2.page.tsx b/pages/autosuggest/style-v2.page.tsx new file mode 100644 index 0000000000..9695720051 --- /dev/null +++ b/pages/autosuggest/style-v2.page.tsx @@ -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 ( + + setStyled(detail.checked)}> + styled + + setDisabled(detail.checked)}> + disabled + + setReadOnly(detail.checked)}> + readOnly + + setInvalid(detail.checked)}> + invalid + + + } + > + 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, + }} + /> + + ); +} diff --git a/pages/autosuggest/style-v2.scss b/pages/autosuggest/style-v2.scss new file mode 100644 index 0000000000..f95afd4ab3 --- /dev/null +++ b/pages/autosuggest/style-v2.scss @@ -0,0 +1,61 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../app/themes/style-v2-palette' as palette; + +/* stylelint-disable custom-property-pattern */ + +.styled-autosuggest { + --awsui-style-input-background: #{palette.$surface-alt}; + --awsui-style-input-background-focus: #{palette.$control-bg}; + --awsui-style-input-border-color: #{palette.$accent}; + --awsui-style-input-border-color-focus: #{palette.$accent-hover}; + --awsui-style-input-color: #{palette.$text}; + --awsui-style-input-placeholder-color: #{palette.$text-muted}; + --awsui-style-input-border-radius: 12px; + --awsui-style-input-border-width: 2px; + --awsui-style-autosuggest-dropdown-border-color: #{palette.$accent}; + --awsui-style-autosuggest-dropdown-border-radius: 12px; + --awsui-style-autosuggest-dropdown-border-width: 2px; + --awsui-style-autosuggest-option-background-hover: #{palette.$surface-alt}; + --awsui-style-autosuggest-option-background-selected: #{palette.$surface-alt}; + + &:hover { + --awsui-style-input-border-color: #{palette.$accent-hover}; + } +} + +.styled-autosuggest-invalid { + --awsui-style-input-background: #{palette.$error-surface}; + --awsui-style-input-border-color: #{palette.$error}; + --awsui-style-input-border-color-focus: #{palette.$error}; + --awsui-style-input-color: #{palette.$text}; + --awsui-style-input-border-radius: 12px; + --awsui-style-input-border-width: 2px; + --awsui-style-autosuggest-dropdown-border-color: #{palette.$error}; + --awsui-style-autosuggest-dropdown-border-radius: 12px; + --awsui-style-autosuggest-option-background-hover: #{palette.$error-surface}; + --awsui-style-autosuggest-option-background-selected: #{palette.$error-surface}; +} + +.option-compute { + --awsui-style-autosuggest-option-color: #{palette.$accent}; + + &[data-highlighted] { + --awsui-style-autosuggest-option-background-hover: #{palette.$accent}; + --awsui-style-autosuggest-option-color-highlighted: #{palette.$text-on-accent}; + --awsui-style-autosuggest-option-color: #{palette.$text-on-accent}; + } +} + +.option-storage { + --awsui-style-autosuggest-option-color: #{palette.$success}; + + &[data-highlighted] { + --awsui-style-autosuggest-option-background-hover: #{palette.$success}; + --awsui-style-autosuggest-option-color-highlighted: #{palette.$text-on-accent}; + --awsui-style-autosuggest-option-color: #{palette.$text-on-accent}; + } +} diff --git a/pages/badge/style-v2.page.tsx b/pages/badge/style-v2.page.tsx new file mode 100644 index 0000000000..ce463eb5ea --- /dev/null +++ b/pages/badge/style-v2.page.tsx @@ -0,0 +1,27 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import { Badge, SpaceBetween } from '~components'; + +import { SimplePage } from '../app/templates'; + +import styles from './style-v2.scss'; + +export default function StyleV2BadgePage() { + return ( + + + + Pill shape + + + Error + + + Outline + + + + ); +} diff --git a/pages/badge/style-v2.scss b/pages/badge/style-v2.scss new file mode 100644 index 0000000000..59905ba81d --- /dev/null +++ b/pages/badge/style-v2.scss @@ -0,0 +1,35 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../app/themes/style-v2-palette' as palette; + +.badge-pill { + --awsui-style-badge-background: #{palette.$accent}; + --awsui-style-badge-color: #{palette.$text-on-accent}; + --awsui-style-badge-border-color: transparent; + --awsui-style-badge-border-radius: 99px; + --awsui-style-badge-padding-block: 4px; + --awsui-style-badge-padding-inline: 12px; +} + +.badge-square { + --awsui-style-badge-background: #{palette.$error-surface}; + --awsui-style-badge-color: #{palette.$error}; + --awsui-style-badge-border-color: #{palette.$error}; + --awsui-style-badge-border-radius: 2px; + --awsui-style-badge-border-width: 2px; + --awsui-style-badge-padding-block: 2px; + --awsui-style-badge-padding-inline: 6px; +} + +.badge-outline { + --awsui-style-badge-background: transparent; + --awsui-style-badge-color: #{palette.$accent}; + --awsui-style-badge-border-color: #{palette.$accent}; + --awsui-style-badge-border-radius: 4px; + --awsui-style-badge-border-width: 2px; + --awsui-style-badge-padding-block: 3px; + --awsui-style-badge-padding-inline: 10px; +} diff --git a/pages/button-group/style-v2.page.tsx b/pages/button-group/style-v2.page.tsx new file mode 100644 index 0000000000..bdfefffbe0 --- /dev/null +++ b/pages/button-group/style-v2.page.tsx @@ -0,0 +1,81 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import React, { useState } from 'react'; + +import { ButtonGroup, ButtonGroupProps, Checkbox } from '~components'; + +import { SimplePage } from '../app/templates'; + +import styles from './style-v2.scss'; + +export default function ButtonGroupStyleV2Page() { + const [isFavorite, setFavorite] = useState(false); + const [disabled, setDisabled] = useState(false); + + const items: ButtonGroupProps.ItemOrGroup[] = [ + { + type: 'group', + text: 'Actions', + items: [ + { type: 'icon-button', id: 'copy', iconName: 'copy', text: 'Copy', disabled }, + { type: 'icon-button', id: 'edit', iconName: 'edit', text: 'Edit', disabled }, + { type: 'icon-button', id: 'delete', iconName: 'remove', text: 'Delete', disabled }, + ], + }, + { + type: 'group', + text: 'Toggle', + items: [ + { + type: 'icon-toggle-button', + id: 'favorite', + iconName: 'star', + pressedIconName: 'star-filled', + text: isFavorite ? 'Unfavorite' : 'Favorite', + pressed: isFavorite, + }, + ], + }, + { + type: 'menu-dropdown', + id: 'more', + text: 'More', + items: [ + { id: 'export', text: 'Export' }, + { id: 'share', text: 'Share' }, + ], + }, + ]; + + const handleClick = ({ detail }: { detail: { id: string; pressed?: boolean } }) => { + if (detail.id === 'favorite') { + setFavorite(detail.pressed ?? !isFavorite); + } + }; + + return ( + setDisabled(detail.checked)}> + Disable actions + + } + > + + + + ); +} diff --git a/pages/button-group/style-v2.scss b/pages/button-group/style-v2.scss new file mode 100644 index 0000000000..8b1e68223d --- /dev/null +++ b/pages/button-group/style-v2.scss @@ -0,0 +1,24 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../app/themes/style-v2-palette' as palette; + +.button-group-card { + --awsui-style-button-group-background: #{palette.$surface}; + --awsui-style-button-group-border-color: #{palette.$border}; + --awsui-style-button-group-border-radius: 12px; + --awsui-style-button-group-padding-block: 8px; + --awsui-style-button-group-padding-inline: 12px; + --awsui-style-button-group-inline-size: fit-content; +} + +.button-group-minimal { + --awsui-style-button-group-background: transparent; + --awsui-style-button-group-border-color: transparent; + --awsui-style-button-group-border-radius: 0; + --awsui-style-button-group-inline-size: fit-content; + --awsui-style-button-color-default: #{palette.$accent}; + --awsui-style-button-color-hover: #{palette.$accent-hover}; +} diff --git a/pages/button/style-v2.page.tsx b/pages/button/style-v2.page.tsx new file mode 100644 index 0000000000..d7baec72e5 --- /dev/null +++ b/pages/button/style-v2.page.tsx @@ -0,0 +1,84 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import React, { useState } from 'react'; + +import { Button, Checkbox, SpaceBetween } from '~components'; + +import { SimplePage } from '../app/templates'; + +import styles from './style-v2.scss'; + +export default function StyleV2ButtonPage() { + const [disabled, setDisabled] = useState(false); + const [loading, setLoading] = useState(false); + + return ( + + setDisabled(detail.checked)}> + disabled + + setLoading(detail.checked)}> + loading + + + } + > + + + + + + + + + + ); +} diff --git a/pages/button/style-v2.scss b/pages/button/style-v2.scss new file mode 100644 index 0000000000..d660c10fb4 --- /dev/null +++ b/pages/button/style-v2.scss @@ -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; + +/* stylelint-disable custom-property-pattern */ + +.button-danger { + --awsui-style-button-background-default: #{palette.$error}; + --awsui-style-button-background-hover: hsl(0, 65%, 40%); + --awsui-style-button-background-active: hsl(0, 65%, 30%); + --awsui-style-button-color-default: #{palette.$text-on-accent}; + --awsui-style-button-color-hover: #{palette.$text-on-accent}; + --awsui-style-button-color-active: #{palette.$text-on-accent}; + --awsui-style-button-border-color-default: #{palette.$error}; + --awsui-style-button-border-color-hover: hsl(0, 65%, 40%); + --awsui-style-button-border-color-active: hsl(0, 65%, 30%); + --awsui-style-button-border-radius: 8px; +} + +.button-icon-circle { + --awsui-style-button-background-default: #{palette.$surface-alt}; + --awsui-style-button-background-hover: #{palette.$accent}; + --awsui-style-button-background-active: #{palette.$accent-active}; + --awsui-style-button-color-default: #{palette.$text-muted}; + --awsui-style-button-color-hover: #{palette.$text-on-accent}; + --awsui-style-button-color-active: #{palette.$text-on-accent}; + --awsui-style-button-border-color-default: #{palette.$border}; + --awsui-style-button-border-color-hover: #{palette.$accent}; + --awsui-style-button-border-color-active: #{palette.$accent-active}; + --awsui-style-button-border-radius: 50%; + --awsui-style-button-icon-padding: 6px; +} + +.button-link-custom { + --awsui-style-button-color-default: #{palette.$success}; + --awsui-style-button-color-hover: hsl(145, 60%, 30%); + --awsui-style-button-color-active: hsl(145, 60%, 20%); + --awsui-style-button-border-color-default: transparent; + --awsui-style-button-border-color-hover: transparent; + --awsui-style-button-font-family: 'Arial', sans-serif; +} diff --git a/pages/checkbox/style-v2.page.tsx b/pages/checkbox/style-v2.page.tsx new file mode 100644 index 0000000000..2fe691905d --- /dev/null +++ b/pages/checkbox/style-v2.page.tsx @@ -0,0 +1,112 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React, { useState } from 'react'; +import clsx from 'clsx'; + +import { Checkbox, Container, Multiselect, MultiselectProps, SpaceBetween, Table } from '~components'; + +import { SimplePage } from '../app/templates'; +import * as tableProps from '../table/shared-configs'; + +import styles from './style-v2.scss'; + +export default function CheckboxStyleV2() { + const [disabled, setDisabled] = useState(false); + const [readOnly, setReadOnly] = useState(false); + const [checked1, setChecked1] = useState(false); + const [checked2, setChecked2] = useState(false); + const shared = { disabled, readOnly, classNames: { root: styles['styled-checkbox'] } }; + + const multiselectOptions: MultiselectProps.Options = [ + { value: '1', label: 'First option', disabled }, + { value: '2', label: 'Second option', disabled }, + { value: '3', label: 'Third option', disabled }, + ]; + + const tableItems = tableProps.createSimpleItems(3); + + return ( + + setDisabled(detail.checked)}> + disabled + + setReadOnly(detail.checked)}> + readonly + + + } + > +
+ + setChecked1(detail.checked)}> + Checkbox 1 + + setChecked2(detail.checked)}> + Checkbox 2 + + { + setChecked1(detail.checked); + setChecked2(detail.checked); + }} + > + Checkbox 1+2 + + + + { + switch (option.value) { + case '1': + return styles['styled-checkbox-one']; + case '2': + return styles['styled-checkbox-two']; + case '3': + return styles['styled-checkbox-three']; + default: + return undefined; + } + }, + }} + /> + + + disabled} + classNames={{ + selection: ({ item }) => { + switch (item?.text) { + case 'One': + return clsx(styles['styled-checkbox'], styles['styled-checkbox-one']); + case 'Two': + return clsx(styles['styled-checkbox'], styles['styled-checkbox-two']); + case 'Three': + return clsx(styles['styled-checkbox'], styles['styled-checkbox-three']); + default: + return styles['styled-checkbox']; + } + }, + }} + /> + + + + ); +} diff --git a/pages/checkbox/style-v2.scss b/pages/checkbox/style-v2.scss new file mode 100644 index 0000000000..103872c753 --- /dev/null +++ b/pages/checkbox/style-v2.scss @@ -0,0 +1,49 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@mixin checkbox-theme($accent, $accent-hover, $background) { + --awsui-style-checkbox-background: #{$background}; + --awsui-style-checkbox-background-checked: #{$accent}; + --awsui-style-checkbox-border-color: #{$accent}; + --awsui-style-checkbox-label-color: #{$accent}; + + &:hover, + &[data-highlighted] { + --awsui-style-checkbox-border-color: #{$accent-hover}; + --awsui-style-checkbox-background-checked: #{$accent-hover}; + --awsui-style-checkbox-label-color: #{$accent-hover}; + } +} + +.styled-checkbox { + @include checkbox-theme($accent: #ff5544, $accent-hover: #cc2200, $background: #ffee88); + --awsui-style-checkbox-background-disabled: #cccccc; + --awsui-style-checkbox-border-color-disabled: #cccccc; + --awsui-style-checkbox-border-width: 2px; + --awsui-style-checkbox-foreground: #ffffff; + --awsui-style-checkbox-foreground-disabled: #999999; + --awsui-style-checkbox-foreground-readonly: #777799; + --awsui-style-checkbox-stroke-width: 2; + --awsui-style-checkbox-label-color-disabled: #999999; + --awsui-style-checkbox-label-color-readonly: #777799; + --awsui-style-checkbox-label-spacing: 12px; + --awsui-style-checkbox-focus-ring-color: #ff5544; + --awsui-style-checkbox-focus-ring-border-radius: 4px; + --awsui-style-checkbox-focus-ring-border-width: 3px; + --awsui-style-checkbox-transition-duration: 200ms; + --awsui-style-checkbox-transition-easing: ease-in-out; +} + +.styled-checkbox-one { + @include checkbox-theme($accent: #33aa55, $accent-hover: #227733, $background: #ccffdd); +} + +.styled-checkbox-two { + @include checkbox-theme($accent: #4477dd, $accent-hover: #2255aa, $background: #ccdeff); +} + +.styled-checkbox-three { + @include checkbox-theme($accent: #9944cc, $accent-hover: #6b2299, $background: #eeccff); +} diff --git a/pages/container/style-custom.page.tsx b/pages/container/style-custom.page.tsx index ab05559b24..fd9ab18012 100644 --- a/pages/container/style-custom.page.tsx +++ b/pages/container/style-custom.page.tsx @@ -234,6 +234,31 @@ export default function CustomContainer() { {``} Plain text + + + + Outer container + + Inner container + + + ); diff --git a/pages/container/style-v2.page.tsx b/pages/container/style-v2.page.tsx new file mode 100644 index 0000000000..057c49f29d --- /dev/null +++ b/pages/container/style-v2.page.tsx @@ -0,0 +1,24 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import React from 'react'; + +import { Container } from '~components'; + +import { SimplePage } from '../app/templates'; + +import styles from './style-v2.scss'; + +export default function StyleV2ContainerPage() { + return ( + + + + + Content + + + + + ); +} diff --git a/pages/container/style-v2.scss b/pages/container/style-v2.scss new file mode 100644 index 0000000000..ed62ecd50e --- /dev/null +++ b/pages/container/style-v2.scss @@ -0,0 +1,17 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../app/themes/style-v2-palette' as palette; + +/* stylelint-disable custom-property-pattern */ + +.container-outer { + --awsui-style-container-border-radius: 8px; + --awsui-style-container-header-background: #{palette.$info-surface}; +} + +.container-inner { + --awsui-style-container-header-background: #{palette.$success-surface}; +} diff --git a/pages/date-picker/style-v2.page.tsx b/pages/date-picker/style-v2.page.tsx new file mode 100644 index 0000000000..436bf42ccd --- /dev/null +++ b/pages/date-picker/style-v2.page.tsx @@ -0,0 +1,47 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import React, { useState } from 'react'; + +import { Checkbox, DatePicker, SpaceBetween } from '~components'; + +import { SimplePage } from '../app/templates'; + +import styles from './style-v2.scss'; + +export default function DatePickerStyleV2Page() { + const [disabled, setDisabled] = useState(false); + const [readOnly, setReadOnly] = useState(false); + const [invalid, setInvalid] = useState(false); + const [value, setValue] = useState('2026-06-01'); + + return ( + + setDisabled(detail.checked)}> + disabled + + setReadOnly(detail.checked)}> + readOnly + + setInvalid(detail.checked)}> + invalid + + + } + > + setValue(detail.value)} + placeholder="YYYY/MM/DD" + disabled={disabled} + readOnly={readOnly} + invalid={invalid} + classNames={{ root: styles['styled-date-picker'] }} + /> + + ); +} diff --git a/pages/date-picker/style-v2.scss b/pages/date-picker/style-v2.scss new file mode 100644 index 0000000000..44e781e57a --- /dev/null +++ b/pages/date-picker/style-v2.scss @@ -0,0 +1,40 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../app/themes/style-v2-palette' as palette; + +$dp-accent: #{palette.$success}; +$dp-accent-hover: hsl(145, 60%, 30%); +$dp-surface: #{palette.$success-surface}; + +.styled-date-picker { + // Input + --awsui-style-input-background: #{$dp-surface}; + --awsui-style-input-background-focus: #{$dp-surface}; + --awsui-style-input-border-color: #{$dp-accent}; + --awsui-style-input-border-color-focus: #{$dp-accent-hover}; + --awsui-style-input-color: #{palette.$text}; + --awsui-style-input-placeholder-color: #{$dp-accent}; + --awsui-style-input-border-radius: 12px; + --awsui-style-input-border-width: 2px; + + // Calendar icon button + --awsui-style-button-color-default: #{$dp-accent}; + --awsui-style-button-color-hover: #{palette.$text-on-accent}; + --awsui-style-button-background-hover: #{$dp-accent}; + --awsui-style-button-background-active: #{$dp-accent-hover}; + --awsui-style-button-border-color-default: #{$dp-accent}; + --awsui-style-button-border-color-hover: #{$dp-accent-hover}; + --awsui-style-button-border-color-active: #{$dp-accent-hover}; + --awsui-style-button-border-radius: 50%; + --awsui-style-button-focus-ring-color: #{$dp-accent}; + + // Calendar dates + --awsui-style-calendar-selected-background: #{$dp-accent}; + --awsui-style-calendar-selected-color: #{palette.$text-on-accent}; + --awsui-style-calendar-hover-background: #{$dp-surface}; + --awsui-style-calendar-hover-border-color: #{$dp-accent}; + --awsui-style-calendar-current-background: #{$dp-surface}; +} diff --git a/pages/drawer/style-v2.page.tsx b/pages/drawer/style-v2.page.tsx new file mode 100644 index 0000000000..d1a9b19696 --- /dev/null +++ b/pages/drawer/style-v2.page.tsx @@ -0,0 +1,63 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React, { useState } from 'react'; + +import { Box, Button, Checkbox, Drawer, SpaceBetween } from '~components'; + +import { SimplePage } from '../app/templates'; + +import styles from './style-v2.scss'; + +export default function DrawerStyleV2Page() { + const [showStyled, setShowStyled] = useState(true); + return ( + setShowStyled(detail.checked)}> + Custom styling + + } + > +
+ {}} + footer={ + + + + + } + classNames={ + showStyled ? { root: styles['styled-drawer'], closeButton: styles['styled-close-action'] } : undefined + } + > + + + Instance i-0abc123 +
+ Type: t3.medium | Region: us-east-1 + + + Instance i-0def456 +
+ Type: m5.large | Region: eu-west-1 + + + Instance i-0ghi789 +
+ Type: c5.xlarge | Region: ap-south-1 + + + +
+ + ); +} diff --git a/pages/drawer/style-v2.scss b/pages/drawer/style-v2.scss new file mode 100644 index 0000000000..5ba847d5fb --- /dev/null +++ b/pages/drawer/style-v2.scss @@ -0,0 +1,18 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../app/themes/style-v2-palette' as palette; + +.styled-drawer { + // Content keeps the default background; only header and footer are tinted. + --awsui-style-drawer-header-background: #{palette.$info-surface}; + --awsui-style-drawer-footer-background: #{palette.$info-surface}; + --awsui-style-drawer-backdrop-background: hsl(120 120% 15% / 30%); +} + +.styled-close-action { + --awsui-style-button-color-default: #{palette.$accent}; + --awsui-style-button-focus-ring-color: #{palette.$accent}; +} diff --git a/pages/file-dropzone/style-v2.page.tsx b/pages/file-dropzone/style-v2.page.tsx new file mode 100644 index 0000000000..26da3a4d54 --- /dev/null +++ b/pages/file-dropzone/style-v2.page.tsx @@ -0,0 +1,20 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import React from 'react'; + +import { FileDropzone } from '~components'; + +import { SimplePage } from '../app/templates'; + +import styles from './style-v2.scss'; + +export default function FileDropzoneStyleV2Page() { + return ( + + undefined} classNames={{ root: styles['styled-dropzone'] }}> + Drop files here or click to browse + + + ); +} diff --git a/pages/file-dropzone/style-v2.scss b/pages/file-dropzone/style-v2.scss new file mode 100644 index 0000000000..d874d47a17 --- /dev/null +++ b/pages/file-dropzone/style-v2.scss @@ -0,0 +1,30 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../app/themes/style-v2-palette' as palette; + +.styled-dropzone { + --awsui-style-file-dropzone-background: #{palette.$surface}; + --awsui-style-file-dropzone-border-color: #{palette.$border-accent}; + --awsui-style-file-dropzone-border-style: dashed; + --awsui-style-file-dropzone-border-radius: 16px; + + &:hover { + --awsui-style-file-dropzone-background: #{palette.$surface-alt}; + --awsui-style-file-dropzone-border-color: #{palette.$accent-hover}; + } +} + +.styled-dropzone-alt { + --awsui-style-file-dropzone-background: #{palette.$info-surface}; + --awsui-style-file-dropzone-border-color: #{palette.$info}; + --awsui-style-file-dropzone-border-style: dashed; + --awsui-style-file-dropzone-border-radius: 8px; + + &:hover { + --awsui-style-file-dropzone-background: #{palette.$surface-alt}; + --awsui-style-file-dropzone-border-color: #{palette.$accent}; + } +} diff --git a/pages/flashbar/style-v2.page.tsx b/pages/flashbar/style-v2.page.tsx new file mode 100644 index 0000000000..e584cc45b9 --- /dev/null +++ b/pages/flashbar/style-v2.page.tsx @@ -0,0 +1,99 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React, { useState } from 'react'; + +import { Button, Checkbox, Flashbar, FlashbarProps, SpaceBetween } from '~components'; + +import { SimplePage } from '../app/templates'; + +import styles from './style-v2.scss'; + +const baseItems: FlashbarProps.MessageDefinition[] = [ + { + type: 'success', + header: 'Deployment complete', + content: 'All resources have been successfully deployed to production.', + dismissible: true, + id: 'success-1', + action: , + }, + { + type: 'error', + header: 'Build failed', + content: 'The pipeline encountered an error during the packaging stage.', + dismissible: true, + id: 'error-1', + action: , + }, + { + type: 'info', + header: 'Maintenance scheduled', + content: 'A maintenance window is scheduled for Saturday 2:00 AM UTC.', + dismissible: true, + id: 'info-1', + }, + { + type: 'warning', + header: 'Certificate expiring', + content: 'Your TLS certificate expires in 7 days. Renew to avoid service disruption.', + dismissible: true, + id: 'warning-1', + action: , + }, + { + type: 'in-progress', + header: 'Deployment in progress', + content: 'Deploying version 2.4.1 to production environment.', + loading: true, + dismissible: true, + id: 'in-progress-1', + }, +]; + +const itemClassNames: Record = { + success: styles['flash-success'], + error: styles['flash-error'], + info: styles['flash-info'], + warning: styles['flash-warning'], +}; + +export default function FlashbarStyleV2Page() { + const [stacked, setStacked] = useState(false); + const [useCustom, setUseCustom] = useState(true); + const [items, setItems] = useState(baseItems); + + return ( + + setUseCustom(detail.checked)}> + Custom styling + + setStacked(detail.checked)}> + Stacked + + + } + > + ({ + ...item, + onDismiss: () => setItems(prev => prev.filter(i => i.id !== item.id)), + }))} + stackItems={stacked} + i18nStrings={{ ariaLabel: 'Notifications' }} + classNames={ + useCustom + ? { + root: styles['styled-flashbar'], + item: ({ item }) => itemClassNames[item.type ?? 'info'], + dismissButton: () => styles.dismiss, + } + : undefined + } + /> + + ); +} diff --git a/pages/flashbar/style-v2.scss b/pages/flashbar/style-v2.scss new file mode 100644 index 0000000000..cff580a6a1 --- /dev/null +++ b/pages/flashbar/style-v2.scss @@ -0,0 +1,45 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../app/themes/style-v2-palette' as palette; + +// Base theme on the flashbar wrapper. Cascades to all items and to the +// peeking "stacked" cards (which are rendered without the per-item class). +.styled-flashbar { + --awsui-style-flashbar-background: #{palette.$surface-alt}; + --awsui-style-flashbar-color: #{palette.$text}; + --awsui-style-flashbar-border-radius: 12px; +} + +// Per-type item overrides for the flat / expanded view. +// Text always uses $text for guaranteed contrast in light and dark modes. +@mixin flash-theme($bg) { + --awsui-style-flashbar-background: #{$bg}; + --awsui-style-flashbar-color: #{palette.$text}; + --awsui-style-flashbar-border-radius: 12px; +} + +.flash-success { + @include flash-theme(palette.$success-surface); +} + +.flash-error { + @include flash-theme(palette.$error-surface); +} + +.flash-info { + @include flash-theme(palette.$info-surface); +} + +.flash-warning { + @include flash-theme(palette.$warning-surface); +} + +// Scoped to the dismiss button wrapper only — does not affect action buttons. +// $text keeps the icon readable on the tinted surfaces in both color modes. +.dismiss { + --awsui-style-button-color-default: #{palette.$text}; + --awsui-style-button-color-hover: #{palette.$error}; +} diff --git a/pages/input/style-v2.page.tsx b/pages/input/style-v2.page.tsx new file mode 100644 index 0000000000..6697cb614d --- /dev/null +++ b/pages/input/style-v2.page.tsx @@ -0,0 +1,50 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import React, { useState } from 'react'; + +import { Checkbox, Input, SpaceBetween } from '~components'; + +import { SimplePage } from '../app/templates'; + +import styles from './style-v2.scss'; + +export default function StyleV2InputPage() { + const [disabled, setDisabled] = useState(false); + const [readOnly, setReadOnly] = useState(false); + const [invalid, setInvalid] = useState(false); + const [warning, setWarning] = useState(false); + const [textValue, setTextValue] = useState('Hello world'); + return ( + + setDisabled(detail.checked)}> + disabled + + setReadOnly(detail.checked)}> + readOnly + + setInvalid(detail.checked)}> + invalid + + setWarning(detail.checked)}> + warning + + + } + > + setTextValue(detail.value)} + disabled={disabled} + readOnly={readOnly} + invalid={invalid} + warning={warning} + classNames={{ root: styles['styled-input'] }} + /> + + ); +} diff --git a/pages/input/style-v2.scss b/pages/input/style-v2.scss new file mode 100644 index 0000000000..cda5213b27 --- /dev/null +++ b/pages/input/style-v2.scss @@ -0,0 +1,21 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../app/themes/style-v2-palette' as palette; + +.styled-input { + --awsui-style-input-background: #{palette.$surface-alt}; + --awsui-style-input-background-focus: #{palette.$surface}; + --awsui-style-input-border-color: #{palette.$accent}; + --awsui-style-input-border-color-focus: #{palette.$accent-hover}; + --awsui-style-input-color: #{palette.$text}; + --awsui-style-input-placeholder-color: #{palette.$accent}; + --awsui-style-input-border-radius: 16px; + --awsui-style-input-border-width: 3px; + + &:hover { + --awsui-style-input-border-color: #{palette.$accent-hover}; + } +} diff --git a/pages/item-card/style-custom.page.tsx b/pages/item-card/style-custom.page.tsx index 8c3c3642cf..8c66658b96 100644 --- a/pages/item-card/style-custom.page.tsx +++ b/pages/item-card/style-custom.page.tsx @@ -2,7 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 import React from 'react'; -import { SpaceBetween } from '~components'; +import { Box, SpaceBetween } from '~components'; import ItemCard from '~components/item-card'; import { SimplePage } from '../app/templates'; @@ -151,6 +151,23 @@ export default function CustomCard() { > Card content + + + + Outer card + Inner card + + ); diff --git a/pages/item-card/style-v2.page.tsx b/pages/item-card/style-v2.page.tsx new file mode 100644 index 0000000000..6183e53cb1 --- /dev/null +++ b/pages/item-card/style-v2.page.tsx @@ -0,0 +1,31 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import React from 'react'; + +import { Box, ColumnLayout, ItemCard } from '~components'; + +import { SimplePage } from '../app/templates'; + +import styles from './style-v2.scss'; + +export default function StyleV2ItemCardPage() { + const cards = [ + { id: '1', header: 'Lambda Function', description: 'Serverless compute', cls: styles['card-one'] }, + { id: '2', header: 'DynamoDB Table', description: 'NoSQL database', cls: styles['card-two'] }, + { id: '3', header: 'S3 Bucket', description: 'Object storage', cls: styles['card-three'] }, + ]; + + return ( + + + {cards.map(card => ( + + {card.description} +
+ + ))} + + + ); +} diff --git a/pages/item-card/style-v2.scss b/pages/item-card/style-v2.scss new file mode 100644 index 0000000000..6867be10ef --- /dev/null +++ b/pages/item-card/style-v2.scss @@ -0,0 +1,40 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../app/themes/style-v2-palette' as palette; + +.image-placeholder { + block-size: 80px; + margin-block-start: 8px; + border-start-start-radius: 6px; + border-start-end-radius: 6px; + border-end-start-radius: 6px; + border-end-end-radius: 6px; + background: #{palette.$surface-alt}; +} + +@mixin item-card-theme($border, $border-hover, $bg, $bg-hover) { + --awsui-style-item-card-background-default: #{$bg}; + --awsui-style-item-card-border-color-default: #{$border}; + --awsui-style-item-card-border-radius: 12px; + --awsui-style-item-card-border-width-default: 2px; + + &:hover { + --awsui-style-item-card-border-color-default: #{$border-hover}; + --awsui-style-item-card-background-default: #{$bg-hover}; + } +} + +.card-one { + @include item-card-theme(palette.$accent, palette.$accent-hover, palette.$surface, palette.$surface-alt); +} + +.card-two { + @include item-card-theme(palette.$success, palette.$success, palette.$success-surface, palette.$surface-alt); +} + +.card-three { + @include item-card-theme(palette.$warning, palette.$warning, palette.$warning-surface, palette.$surface-alt); +} diff --git a/pages/link/style-v2.page.tsx b/pages/link/style-v2.page.tsx new file mode 100644 index 0000000000..3e2be38bf9 --- /dev/null +++ b/pages/link/style-v2.page.tsx @@ -0,0 +1,29 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import React from 'react'; + +import { Link } from '~components'; + +import { SimplePage } from '../app/templates'; + +import styles from './style-v2.scss'; + +export default function StyleV2LinkPage() { + return ( + + + Primary link + + + Secondary link + + + External link with icon + + + Info link + + + ); +} diff --git a/pages/link/style-v2.scss b/pages/link/style-v2.scss new file mode 100644 index 0000000000..4efbf426da --- /dev/null +++ b/pages/link/style-v2.scss @@ -0,0 +1,14 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../app/themes/style-v2-palette' as palette; + +.styled-link { + --awsui-style-link-color-default: #{palette.$accent}; + --awsui-style-link-color-hover: #{palette.$error}; + --awsui-style-link-color-active: #{palette.$accent-active}; + --awsui-style-link-font-weight: 700; + --awsui-style-link-text-decoration: underline; +} diff --git a/pages/modal/style-v2.page.tsx b/pages/modal/style-v2.page.tsx new file mode 100644 index 0000000000..532303b9fc --- /dev/null +++ b/pages/modal/style-v2.page.tsx @@ -0,0 +1,55 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React, { useState } from 'react'; + +import { Box, Button, Modal, SpaceBetween } from '~components'; + +import { SimplePage } from '../app/templates'; + +import styles from './style-v2.scss'; + +export default function ModalStyleV2Page() { + const [visible, setVisible] = useState(true); + return ( + + + + setVisible(false)} + header="Confirm action" + footer={ + + + + + + + } + classNames={{ root: styles['styled-modal'] }} + > + + Are you sure you want to proceed with this action? This will update the resource configuration. + + This action cannot be undone. + + + + + + ); +} diff --git a/pages/modal/style-v2.scss b/pages/modal/style-v2.scss new file mode 100644 index 0000000000..23d30b81d1 --- /dev/null +++ b/pages/modal/style-v2.scss @@ -0,0 +1,30 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../app/themes/style-v2-palette' as palette; + +.styled-modal { + --awsui-style-modal-header-background: #{palette.$info-surface}; + --awsui-style-modal-border-radius: 20px; + --awsui-style-modal-overlay-background: hsl(220 120% 15% / 75%); +} + +.styled-button-primary { + --awsui-style-button-background-default: #{palette.$accent}; + --awsui-style-button-background-hover: #{palette.$accent-hover}; + --awsui-style-button-background-active: #{palette.$accent-active}; + --awsui-style-button-color-default: #{palette.$text-on-accent}; + --awsui-style-button-color-hover: #{palette.$text-on-accent}; + --awsui-style-button-color-active: #{palette.$text-on-accent}; + --awsui-style-button-border-color-default: #{palette.$accent}; + --awsui-style-button-border-color-hover: #{palette.$accent-hover}; + --awsui-style-button-border-color-active: #{palette.$accent-active}; +} + +.styled-button-secondary { + --awsui-style-button-color-default: #{palette.$accent}; + --awsui-style-button-color-hover: #{palette.$accent-hover}; + --awsui-style-button-color-active: #{palette.$accent-active}; +} diff --git a/pages/progress-bar/style-v2.page.tsx b/pages/progress-bar/style-v2.page.tsx new file mode 100644 index 0000000000..bdaa3e2108 --- /dev/null +++ b/pages/progress-bar/style-v2.page.tsx @@ -0,0 +1,35 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import React from 'react'; + +import { ProgressBar } from '~components'; + +import { SimplePage } from '../app/templates'; + +import styles from './style-v2.scss'; + +export default function StyleV2ProgressBarPage() { + return ( + + + + + + ); +} diff --git a/pages/progress-bar/style-v2.scss b/pages/progress-bar/style-v2.scss new file mode 100644 index 0000000000..f36ade385c --- /dev/null +++ b/pages/progress-bar/style-v2.scss @@ -0,0 +1,27 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../app/themes/style-v2-palette' as palette; + +.progress-thick { + --awsui-style-progress-bar-track-color: #{palette.$surface-alt}; + --awsui-style-progress-bar-value-color: #{palette.$accent}; + --awsui-style-progress-bar-border-radius: 12px; + --awsui-style-progress-bar-height: 16px; +} + +.progress-thin { + --awsui-style-progress-bar-track-color: #{palette.$border}; + --awsui-style-progress-bar-value-color: #{palette.$success}; + --awsui-style-progress-bar-border-radius: 0; + --awsui-style-progress-bar-height: 4px; +} + +.progress-accent { + --awsui-style-progress-bar-track-color: #{palette.$error-surface}; + --awsui-style-progress-bar-value-color: #{palette.$error}; + --awsui-style-progress-bar-border-radius: 4px; + --awsui-style-progress-bar-height: 8px; +} diff --git a/pages/prompt-input/style-v2.page.tsx b/pages/prompt-input/style-v2.page.tsx new file mode 100644 index 0000000000..1d56d14fc7 --- /dev/null +++ b/pages/prompt-input/style-v2.page.tsx @@ -0,0 +1,69 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import React, { useState } from 'react'; + +import { ButtonGroup, Checkbox, FileTokenGroup, PromptInput, SpaceBetween } from '~components'; + +import { SimplePage } from '../app/templates'; +import { i18nStrings } from '../file-upload/shared'; + +import styles from './style-v2.scss'; + +export default function StyleV2PromptInputPage() { + const [value, setValue] = useState('Tell me about AWS Lambda cold starts'); + const [files, setFiles] = useState([]); + const [disabled, setDisabled] = useState(false); + const [invalid, setInvalid] = useState(false); + + return ( + + setDisabled(detail.checked)}> + disabled + + setInvalid(detail.checked)}> + invalid + + + } + > + setValue(detail.value)} + placeholder="Ask a question..." + actionButtonIconName="send" + actionButtonAriaLabel="Send" + disabled={disabled} + invalid={invalid} + minRows={2} + secondaryActions={ + detail.id === 'files' && setFiles(detail.files)} + items={[ + { type: 'icon-file-input', id: 'files', text: 'Upload files', multiple: true }, + { type: 'icon-button', id: 'mic', iconName: 'microphone', text: 'Voice input' }, + ]} + /> + } + secondaryContent={ + files.length > 0 ? ( + ({ file }))} + showFileThumbnail={true} + onDismiss={({ detail }) => setFiles(prev => prev.filter((_, i) => i !== detail.fileIndex))} + i18nStrings={i18nStrings} + alignment="horizontal" + /> + ) : undefined + } + /> + + ); +} diff --git a/pages/prompt-input/style-v2.scss b/pages/prompt-input/style-v2.scss new file mode 100644 index 0000000000..121802d059 --- /dev/null +++ b/pages/prompt-input/style-v2.scss @@ -0,0 +1,28 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../app/themes/style-v2-palette' as palette; + +.styled-prompt-input { + // Field + --awsui-style-prompt-input-background-default: #{palette.$surface-alt}; + --awsui-style-prompt-input-background-focus: #{palette.$surface}; + --awsui-style-prompt-input-border-color-default: #{palette.$accent}; + --awsui-style-prompt-input-border-color-focus: #{palette.$accent-hover}; + --awsui-style-prompt-input-color-default: #{palette.$text}; + --awsui-style-prompt-input-placeholder-color: #{palette.$accent}; + --awsui-style-prompt-input-border-radius: 16px; + --awsui-style-prompt-input-border-width: 3px; + + // Send button + secondary action buttons (cohesive accent theme) + --awsui-style-button-color-default: #{palette.$accent}; + --awsui-style-button-color-hover: #{palette.$text-on-accent}; + --awsui-style-button-background-hover: #{palette.$accent}; + --awsui-style-button-border-radius: 50%; + + &:hover { + --awsui-style-prompt-input-border-color-default: #{palette.$accent-hover}; + } +} diff --git a/pages/radio-group/style-v2.page.tsx b/pages/radio-group/style-v2.page.tsx new file mode 100644 index 0000000000..9ace09283b --- /dev/null +++ b/pages/radio-group/style-v2.page.tsx @@ -0,0 +1,58 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import React, { useState } from 'react'; + +import { Checkbox, Container, RadioGroup } from '~components'; + +import { SimplePage } from '../app/templates'; + +import styles from './style-v2.scss'; + +export default function StyleV2RadioGroupPage() { + const [value1, setValue1] = useState('option-1'); + const [value2, setValue2] = useState('small'); + const [readOnly, setReadOnly] = useState(false); + + return ( + setReadOnly(detail.checked)}> + readOnly + + } + > +
+ + setValue1(detail.value)} + readOnly={readOnly} + items={[ + { value: 'option-1', label: 'Standard', description: 'Best for most workloads' }, + { value: 'option-2', label: 'Performance', description: 'Optimized for high throughput' }, + { value: 'option-3', label: 'Economy', description: 'Cost-effective for dev/test' }, + { value: 'option-4', label: 'Legacy', description: 'Not recommended', disabled: true }, + ]} + classNames={{ root: styles['radio-accent'] }} + /> + + + setValue2(detail.value)} + readOnly={readOnly} + items={[ + { value: 'small', label: 'Small', description: '1 vCPU, 2 GB RAM' }, + { value: 'medium', label: 'Medium', description: '2 vCPU, 4 GB RAM' }, + { value: 'large', label: 'Large', description: '4 vCPU, 8 GB RAM' }, + ]} + classNames={{ root: styles['radio-success'] }} + /> + +
+ + ); +} diff --git a/pages/radio-group/style-v2.scss b/pages/radio-group/style-v2.scss new file mode 100644 index 0000000000..952f3dbfc6 --- /dev/null +++ b/pages/radio-group/style-v2.scss @@ -0,0 +1,29 @@ +/* + 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 radio-theme($accent, $accent-hover) { + --awsui-style-radio-background-checked: #{$accent}; + --awsui-style-radio-border-color-default: #{$accent}; + --awsui-style-radio-foreground-default: #{palette.$control-foreground}; + --awsui-style-radio-label-color: #{palette.$text}; + --awsui-style-radio-label-color-disabled: #{palette.$text-disabled}; + --awsui-style-radio-border-color-disabled: #{palette.$border-disabled}; + --awsui-style-radio-background-disabled: #{palette.$control-bg-disabled}; + --awsui-style-radio-transition-duration: #{palette.$transition-duration}; + + &:hover { + --awsui-style-radio-border-color-default: #{$accent-hover}; + } +} + +.radio-accent { + @include radio-theme($accent: palette.$accent, $accent-hover: palette.$accent-hover); +} + +.radio-success { + @include radio-theme($accent: palette.$success, $accent-hover: palette.$accent-hover); +} diff --git a/pages/segmented-control/style-v2.page.tsx b/pages/segmented-control/style-v2.page.tsx new file mode 100644 index 0000000000..bd3a2cdfa7 --- /dev/null +++ b/pages/segmented-control/style-v2.page.tsx @@ -0,0 +1,43 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import React, { useState } from 'react'; + +import { SegmentedControl, SpaceBetween } from '~components'; + +import { SimplePage } from '../app/templates'; + +import styles from './style-v2.scss'; + +export default function StyleV2SegmentedControlPage() { + const [selectedId, setSelectedId] = useState('seg-1'); + + return ( + + + setSelectedId(detail.selectedId)} + options={[ + { text: 'Overview', iconName: 'view-full', id: 'seg-1' }, + { text: 'Details', iconName: 'file', id: 'seg-2' }, + { text: 'Metrics', iconName: 'status-positive', id: 'seg-3' }, + { text: 'Disabled', iconName: 'lock-private', id: 'seg-4', disabled: true }, + ]} + classNames={{ root: styles['styled-segmented-control'] }} + /> + setSelectedId(detail.selectedId)} + options={[ + { text: 'Overview', iconName: 'view-full', id: 'seg-1' }, + { text: 'Details', iconName: 'file', id: 'seg-2' }, + { text: 'Metrics', iconName: 'status-positive', id: 'seg-3' }, + { text: 'Disabled', iconName: 'lock-private', id: 'seg-4', disabled: true }, + ]} + classNames={{ root: styles['square-segmented-control'] }} + /> + + + ); +} diff --git a/pages/segmented-control/style-v2.scss b/pages/segmented-control/style-v2.scss new file mode 100644 index 0000000000..6a4ae938aa --- /dev/null +++ b/pages/segmented-control/style-v2.scss @@ -0,0 +1,28 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../app/themes/style-v2-palette' as palette; + +/* stylelint-disable custom-property-pattern */ + +.styled-segmented-control { + --awsui-style-segmented-control-background-default: #{palette.$surface}; + --awsui-style-segmented-control-color-default: #{palette.$text-muted}; + --awsui-style-segmented-control-background-active: #{palette.$accent}; + --awsui-style-segmented-control-color-active: #{palette.$text-on-accent}; + --awsui-style-segmented-control-background-hover: #{palette.$surface-alt}; + --awsui-style-segmented-control-color-hover: #{palette.$accent}; + --awsui-style-segmented-control-border-radius: 999px; +} + +.square-segmented-control { + --awsui-style-segmented-control-background-default: #{palette.$surface}; + --awsui-style-segmented-control-color-default: #{palette.$text-muted}; + --awsui-style-segmented-control-background-active: #{palette.$success}; + --awsui-style-segmented-control-color-active: #{palette.$text-on-accent}; + --awsui-style-segmented-control-background-hover: #{palette.$success-surface}; + --awsui-style-segmented-control-color-hover: #{palette.$success}; + --awsui-style-segmented-control-border-radius: 0; +} diff --git a/pages/slider/style-v2.page.tsx b/pages/slider/style-v2.page.tsx new file mode 100644 index 0000000000..73eaf47c61 --- /dev/null +++ b/pages/slider/style-v2.page.tsx @@ -0,0 +1,87 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import React, { useState } from 'react'; + +import { Box, Checkbox, Container, Slider, SpaceBetween } from '~components'; + +import { SimplePage } from '../app/templates'; + +import styles from './style-v2.scss'; + +export default function StyleV2SliderPage() { + const [volume, setVolume] = useState(60); + const [quality, setQuality] = useState(80); + const [danger, setDanger] = useState(25); + const [stepped, setStepped] = useState(50); + const [disabled, setDisabled] = useState(false); + + return ( + setDisabled(detail.checked)}> + disabled + + } + > +
+ + + Volume: {volume}% + setVolume(detail.value)} + min={0} + max={100} + disabled={disabled} + classNames={{ root: styles['slider-success'] }} + /> + + + + + Quality: {quality}% + setQuality(detail.value)} + min={0} + max={100} + disabled={disabled} + classNames={{ root: styles['slider-accent'] }} + /> + + + + + Risk tolerance: {danger}% + setDanger(detail.value)} + min={0} + max={100} + disabled={disabled} + classNames={{ root: styles['slider-danger'] }} + /> + + + + + Value: {stepped} + setStepped(detail.value)} + min={0} + max={100} + step={10} + tickMarks={true} + referenceValues={[25, 75]} + disabled={disabled} + /> + + +
+ + ); +} diff --git a/pages/slider/style-v2.scss b/pages/slider/style-v2.scss new file mode 100644 index 0000000000..d0989460a4 --- /dev/null +++ b/pages/slider/style-v2.scss @@ -0,0 +1,36 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../app/themes/style-v2-palette' as palette; + +// $hover-color defaults to the base color, so hover matches the styled base +// color unless a variant explicitly overrides it. +@mixin slider-theme($color, $hover-color: $color) { + --awsui-style-slider-track-background-color: #{palette.$border}; + --awsui-style-slider-range-background-default: #{$color}; + --awsui-style-slider-range-background-active: #{$hover-color}; + --awsui-style-slider-handle-background-default: #{$color}; + --awsui-style-slider-handle-background-hover: #{$hover-color}; + --awsui-style-slider-handle-background-active: #{$hover-color}; + --awsui-style-slider-handle-border-radius: 999px; + + &:hover { + --awsui-style-slider-range-background-default: #{$hover-color}; + --awsui-style-slider-handle-background-default: #{$hover-color}; + } +} + +// Each variant overrides hover with a darker shade of its own hue. +.slider-success { + @include slider-theme($color: palette.$success, $hover-color: hsl(145, 60%, 30%)); +} + +.slider-accent { + @include slider-theme($color: palette.$accent, $hover-color: palette.$accent-hover); +} + +.slider-danger { + @include slider-theme($color: palette.$error, $hover-color: hsl(0, 65%, 40%)); +} diff --git a/pages/table/style-v2.page.tsx b/pages/table/style-v2.page.tsx new file mode 100644 index 0000000000..0bd95aef63 --- /dev/null +++ b/pages/table/style-v2.page.tsx @@ -0,0 +1,85 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import React, { useState } from 'react'; +import clsx from 'clsx'; + +import { Box, Table, TextFilter } from '~components'; +import { TableProps } from '~components/table'; + +import { SimplePage } from '../app/templates'; +import * as tableProps from '../table/shared-configs'; + +import styles from './style-v2.scss'; + +const items = tableProps.createSimpleItems(6); + +export default function TableStyleV2Page() { + const [sortingColumn, setSortingColumn] = useState | undefined>(undefined); + const [sortDescending, setSortDescending] = useState(false); + const [selectedItems, setSelectedItems] = useState([items[1], items[3]]); + const [filterText, setFilterText] = useState(''); + + const sortedItems = [...items] + .filter(i => !filterText || i.text.toLowerCase().includes(filterText.toLowerCase())) + .sort((a, b) => { + if (!sortingColumn) { + return 0; + } + const field = sortingColumn.sortingField as keyof tableProps.Item; + const cmp = String(a[field]).localeCompare(String(b[field])); + return sortDescending ? -cmp : cmp; + }); + + const columns: TableProps.ColumnDefinition[] = [ + { id: 'text', header: 'Text', cell: item => item.text, sortingField: 'text' }, + { id: 'number', header: 'Number', cell: item => item.number, sortingField: 'number' }, + ]; + + return ( + +
{ + if (!item) { + return styles['selection-header']; + } + switch (item.text) { + case 'One': + return clsx(styles['selection-base'], styles['selection-green']); + case 'Two': + return clsx(styles['selection-base'], styles['selection-blue']); + default: + return styles['selection-base']; + } + }, + }} + columnDefinitions={columns} + items={sortedItems} + empty={ + + No items to display + + } + sortingColumn={sortingColumn} + sortingDescending={sortDescending} + onSortingChange={({ detail }) => { + setSortingColumn(detail.sortingColumn); + setSortDescending(detail.isDescending ?? false); + }} + selectionType="multi" + selectedItems={selectedItems} + onSelectionChange={({ detail }) => setSelectedItems(detail.selectedItems)} + ariaLabels={tableProps.ariaLabels} + filter={ + setFilterText(detail.filteringText)} + classNames={{ root: styles['styled-filter'] }} + /> + } + /> + + ); +} diff --git a/pages/table/style-v2.scss b/pages/table/style-v2.scss new file mode 100644 index 0000000000..eddffa7149 --- /dev/null +++ b/pages/table/style-v2.scss @@ -0,0 +1,50 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../app/themes/style-v2-palette' as palette; + +.styled-table { + --awsui-style-table-header-background: #{palette.$accent}; + --awsui-style-table-header-color: #{palette.$text-on-accent}; + --awsui-style-table-sorting-icon-color: #{palette.$text-on-accent}; + --awsui-style-table-border-color: #{palette.$border-accent}; + --awsui-style-table-selected-background: #{palette.$info-surface}; + --awsui-style-table-selected-border-color: #{palette.$accent}; +} + +.selection-base { + --awsui-style-checkbox-background: #{palette.$control-bg}; + --awsui-style-checkbox-background-checked: #{palette.$accent}; + --awsui-style-checkbox-border-color: #{palette.$control-border}; + --awsui-style-checkbox-foreground: #{palette.$control-foreground}; + --awsui-style-checkbox-border-width: 2px; +} + +.selection-header { + --awsui-style-checkbox-background: #{palette.$surface}; + --awsui-style-checkbox-background-checked: #{palette.$text-on-accent}; + --awsui-style-checkbox-border-color: #{palette.$text-on-accent}; + --awsui-style-checkbox-foreground: #{palette.$accent}; +} + +.selection-green { + --awsui-style-checkbox-background-checked: #{palette.$success}; + --awsui-style-checkbox-border-color: #{palette.$success}; +} + +.selection-blue { + --awsui-style-checkbox-background-checked: #{palette.$info}; + --awsui-style-checkbox-border-color: #{palette.$info}; +} + +.styled-filter { + --awsui-style-input-border-color: #{palette.$border-accent}; + --awsui-style-input-border-color-focus: #{palette.$accent}; + --awsui-style-input-background: #{palette.$surface}; + + &:hover { + --awsui-style-input-border-color: #{palette.$accent-hover}; + } +} diff --git a/pages/tabs/style-v2.page.tsx b/pages/tabs/style-v2.page.tsx new file mode 100644 index 0000000000..662c23fe17 --- /dev/null +++ b/pages/tabs/style-v2.page.tsx @@ -0,0 +1,31 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import React, { useState } from 'react'; + +import { Tabs } from '~components'; + +import { SimplePage } from '../app/templates'; + +import styles from './style-v2.scss'; + +export default function TabsStyleV2Page() { + const [activeTabId, setActiveTabId] = useState('first'); + + return ( + + setActiveTabId(detail.activeTabId)} + tabs={[ + { id: 'first', label: 'Overview', content: 'Alternate color scheme for tabs.' }, + { id: 'second', label: 'Settings', content: 'Alternate settings view.' }, + { id: 'third', label: 'Analytics', content: 'Alternate analytics view.' }, + { id: 'disabled', label: 'Archived', content: '', disabled: true }, + ]} + /> + + ); +} diff --git a/pages/tabs/style-v2.scss b/pages/tabs/style-v2.scss new file mode 100644 index 0000000000..7c93acb3f2 --- /dev/null +++ b/pages/tabs/style-v2.scss @@ -0,0 +1,16 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../app/themes/style-v2-palette' as palette; + +.styled-tabs { + --awsui-style-tabs-color-default: #{palette.$success}; + --awsui-style-tabs-color-active: #{palette.$error}; + --awsui-style-tabs-color-hover: #{palette.$warning}; + --awsui-style-tabs-color-disabled: #{palette.$text-disabled}; + --awsui-style-tabs-active-indicator-color: #{palette.$error}; + // Header background for the "container" variant. + --awsui-style-container-header-background: #{palette.$success-surface}; +} diff --git a/pages/text-filter/style-v2.page.tsx b/pages/text-filter/style-v2.page.tsx new file mode 100644 index 0000000000..16c6c457ae --- /dev/null +++ b/pages/text-filter/style-v2.page.tsx @@ -0,0 +1,40 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import React, { useState } from 'react'; + +import { Checkbox, TextFilter } from '~components'; + +import { SimplePage } from '../app/templates'; + +import styles from './style-v2.scss'; + +export default function StyleV2TextFilterPage() { + const [filterText, setFilterText] = useState('instance'); + const [disabled, setDisabled] = useState(false); + + const matchCount = ['instance-1', 'instance-2', 'instance-3', 'my-server', 'database-primary'].filter(item => + item.includes(filterText.toLowerCase()) + ).length; + + return ( + setDisabled(detail.checked)}> + disabled + + } + > + setFilterText(detail.filteringText)} + filteringPlaceholder="Filter resources..." + countText={`${matchCount} match${matchCount !== 1 ? 'es' : ''}`} + disabled={disabled} + classNames={{ root: styles['styled-text-filter'] }} + /> + + ); +} diff --git a/pages/text-filter/style-v2.scss b/pages/text-filter/style-v2.scss new file mode 100644 index 0000000000..e0f98bfcc3 --- /dev/null +++ b/pages/text-filter/style-v2.scss @@ -0,0 +1,25 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ + +@use '../app/themes/style-v2-palette' as palette; + +.styled-text-filter { + --awsui-style-input-background: #{palette.$surface-alt}; + --awsui-style-input-background-focus: #{palette.$surface}; + --awsui-style-input-border-color: #{palette.$accent}; + --awsui-style-input-border-color-focus: #{palette.$accent-hover}; + --awsui-style-input-color: #{palette.$text}; + --awsui-style-input-placeholder-color: #{palette.$accent}; + --awsui-style-input-border-radius: 16px; + --awsui-style-input-border-width: 3px; + + // Clear (X) icon button + --awsui-style-button-color-default: #{palette.$accent}; + --awsui-style-button-color-hover: #{palette.$error}; + + &:hover { + --awsui-style-input-border-color: #{palette.$accent-hover}; + } +} diff --git a/pages/textarea/style-v2.page.tsx b/pages/textarea/style-v2.page.tsx new file mode 100644 index 0000000000..a2d5f0df63 --- /dev/null +++ b/pages/textarea/style-v2.page.tsx @@ -0,0 +1,47 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import React, { useState } from 'react'; + +import { Checkbox, SpaceBetween, Textarea } from '~components'; + +import { SimplePage } from '../app/templates'; + +import styles from './style-v2.scss'; + +export default function StyleV2TextareaPage() { + const [disabled, setDisabled] = useState(false); + const [invalid, setInvalid] = useState(false); + const [warning, setWarning] = useState(false); + const [content, setContent] = useState('This is styled textarea content.\nIt supports multiple lines of text.'); + + return ( + + setDisabled(detail.checked)}> + disabled + + setInvalid(detail.checked)}> + invalid + + setWarning(detail.checked)}> + warning + + + } + > +