diff --git a/eslint.config.mjs b/eslint.config.mjs index 0d9423aa5b..cee6693b0b 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -210,7 +210,24 @@ export default tsEslint.config( }, }, { - files: ['src/test-utils/dom/**/*.ts'], + // Demo pages are sourced from an external repo and follow different lint standards. + // Relax rules that conflict with that codebase. + files: ['pages/demos/**'], + rules: { + '@typescript-eslint/no-unused-vars': 'off', + 'react/no-unescaped-entities': 'off', + 'no-constant-binary-expression': 'off', + 'no-warning-comments': 'off', + 'header/header': 'off', + 'unicorn/filename-case': 'off', + '@cloudscape-design/build-tools/react-server-components-directive': 'off', + 'simple-import-sort/imports': 'off', + }, + }, + { + files: [ + 'src/test-utils/dom/**/*.ts', + ], rules: { '@cloudscape-design/build-tools/ban-files': [ 'error', diff --git a/one-theme-tokens.json b/one-theme-tokens.json new file mode 100644 index 0000000000..34c7e4c679 --- /dev/null +++ b/one-theme-tokens.json @@ -0,0 +1,3018 @@ +{ + "tokens": { + "colorBackgroundNotificationSeverityCritical": { + "light": "#870303", + "dark": "#d63f38" + }, + "colorBackgroundNotificationSeverityHigh": { + "light": "#ce3311", + "dark": "#fe6e73" + }, + "colorBackgroundNotificationSeverityMedium": { + "light": "#f89256", + "dark": "#f89256" + }, + "colorBackgroundNotificationSeverityLow": { + "light": "#f2cd54", + "dark": "#f2cd54" + }, + "colorBackgroundNotificationSeverityNeutral": { + "light": "#656871", + "dark": "#656871" + }, + "colorTextNotificationSeverityCritical": { + "light": "#f9f9fa", + "dark": "#000000" + }, + "colorTextNotificationSeverityHigh": { + "light": "#f9f9fa", + "dark": "#0f141a" + }, + "colorTextNotificationSeverityMedium": { + "light": "#0f141a", + "dark": "#0f141a" + }, + "colorTextNotificationSeverityLow": { + "light": "#0f141a", + "dark": "#0f141a" + }, + "colorTextNotificationSeverityNeutral": { + "light": "#f9f9fa", + "dark": "#f9f9fa" + }, + "colorBorderBadgeSeverityCritical": { + "light": "transparent", + "dark": "transparent" + }, + "colorBorderBadgeSeverityHigh": { + "light": "transparent", + "dark": "transparent" + }, + "colorBorderBadgeSeverityMedium": { + "light": "transparent", + "dark": "transparent" + }, + "colorBorderBadgeSeverityLow": { + "light": "transparent", + "dark": "transparent" + }, + "colorBorderBadgeSeverityNeutral": { + "light": "transparent", + "dark": "transparent" + }, + "colorTextBadgeSeverityCritical": { + "light": "#f9f9fa", + "dark": "#000000" + }, + "colorTextBadgeSeverityHigh": { + "light": "#f9f9fa", + "dark": "#0f141a" + }, + "colorTextBadgeSeverityMedium": { + "light": "#0f141a", + "dark": "#0f141a" + }, + "colorTextBadgeSeverityLow": { + "light": "#0f141a", + "dark": "#0f141a" + }, + "colorTextBadgeSeverityNeutral": { + "light": "#f9f9fa", + "dark": "#f9f9fa" + }, + "colorBackgroundBadgeIcon": { + "light": "#db0000", + "dark": "#ff7a7a" + }, + "colorBackgroundButtonLinkActive": { + "light": "#ededed", + "dark": "#1e1e1e" + }, + "colorBackgroundButtonLinkDefault": { + "light": "transparent", + "dark": "transparent" + }, + "colorBackgroundButtonLinkDisabled": { + "light": "transparent", + "dark": "transparent" + }, + "colorBackgroundButtonLinkHover": { + "light": "#f8f8f8", + "dark": "#242424" + }, + "colorBackgroundButtonNormalActive": { + "light": "#f5f5f5", + "dark": "#1e1e1e" + }, + "colorBackgroundButtonNormalDefault": { + "light": "#f9f9f9", + "dark": "#1e1e1e" + }, + "colorBackgroundButtonNormalDisabled": { + "light": "#ffffff", + "dark": "#151515" + }, + "colorBackgroundButtonNormalHover": { + "light": "#f8f8f8", + "dark": "#242424" + }, + "colorBackgroundToggleButtonNormalPressed": { + "light": "#ffffff", + "dark": "#1e1e1e" + }, + "colorBackgroundToggleButtonNormalDefault": { + "light": "#f9f9f9", + "dark": "#1e1e1e" + }, + "colorBackgroundButtonPrimaryActive": { + "light": "#242424", + "dark": "#e1e1e1" + }, + "colorBackgroundButtonPrimaryDefault": { + "light": "#242424", + "dark": "#e1e1e1" + }, + "colorBackgroundButtonPrimaryDisabled": { + "light": "#b7b7b7", + "dark": "#3b3b3b" + }, + "colorBackgroundButtonPrimaryHover": { + "light": "#3b3b3b", + "dark": "#f5f5f5" + }, + "colorBackgroundCellShaded": { + "light": "#f8f8f8", + "dark": "#1a1a1a" + }, + "colorBackgroundCard": { + "light": "#ffffff", + "dark": "#151515" + }, + "colorBackgroundContainerContent": { + "light": "#ffffff", + "dark": "#151515" + }, + "colorBackgroundContainerHeader": { + "light": "#ffffff", + "dark": "#151515" + }, + "colorBackgroundControlChecked": { + "light": "#295eff", + "dark": "#5c7fff" + }, + "colorBackgroundControlDefault": { + "light": "#ffffff", + "dark": "#1e1e1e" + }, + "colorBackgroundControlDisabled": { + "light": "#dedee3", + "dark": "#333843" + }, + "colorBackgroundDropdownItemDefault": { + "light": "#ffffff", + "dark": "#242424" + }, + "colorBackgroundDropdownItemFilterMatch": { + "light": "#f5f5f5", + "dark": "#080808" + }, + "colorBackgroundDropdownItemHover": { + "light": "#f5f5f5", + "dark": "#1a1a1a" + }, + "colorBackgroundDropdownItemSelected": { + "light": "#f8f8f8", + "dark": "#080808" + }, + "colorBackgroundHomeHeader": { + "light": "#0f141a", + "dark": "#0f141a" + }, + "colorBackgroundInputDefault": { + "light": "#ffffff", + "dark": "#151515" + }, + "colorBackgroundInputDisabled": { + "light": "#ededed", + "dark": "#242424" + }, + "colorBackgroundItemSelected": { + "light": "#f8f8f8", + "dark": "#080808" + }, + "colorBackgroundLayoutMain": { + "light": "#fcfcfc", + "dark": "#151515" + }, + "colorBackgroundLayoutToolbar": { + "light": "#ffffff", + "dark": "#151515" + }, + "colorBackgroundLayoutToggleActive": { + "light": "#424650", + "dark": "#424650" + }, + "colorBackgroundLayoutToggleDefault": { + "light": "#424650", + "dark": "#424650" + }, + "colorBackgroundLayoutToggleHover": { + "light": "#656871", + "dark": "#656871" + }, + "colorBackgroundLayoutToggleSelectedActive": { + "light": "#dbe4ff", + "dark": "#000833" + }, + "colorBackgroundLayoutToggleSelectedDefault": { + "light": "#dbe4ff", + "dark": "#5c7fff20" + }, + "colorBackgroundLayoutToggleSelectedHover": { + "light": "#c2d1ff", + "dark": "#5c7fff40" + }, + "colorBackgroundNotificationBlue": { + "light": "#006ce0", + "dark": "#001475" + }, + "colorBackgroundNotificationGreen": { + "light": "#00802f", + "dark": "#003311" + }, + "colorBackgroundNotificationGrey": { + "light": "#424650", + "dark": "#656871" + }, + "colorBackgroundNotificationRed": { + "light": "#db0000", + "dark": "#520000" + }, + "colorBackgroundNotificationYellow": { + "light": "#ffe347", + "dark": "#573a00" + }, + "colorBackgroundPopover": { + "light": "#ffffff", + "dark": "#1b232d" + }, + "colorBackgroundProgressBarValueDefault": { + "light": "#295eff", + "dark": "#5c7fff" + }, + "colorBackgroundProgressBarDefault": { + "light": "#ebebf0", + "dark": "#333843" + }, + "colorBackgroundSegmentActive": { + "light": "#242424", + "dark": "#e1e1e1" + }, + "colorBackgroundSegmentDefault": { + "light": "transparent", + "dark": "transparent" + }, + "colorBackgroundSegmentDisabled": { + "light": "#ffffff", + "dark": "#151515" + }, + "colorBackgroundSegmentHover": { + "light": "#f8f8f8", + "dark": "#242424" + }, + "colorBackgroundSegmentWrapper": { + "light": "#ffffff", + "dark": "#151515" + }, + "colorBackgroundSliderRangeDefault": { + "light": "#295eff", + "dark": "#5c7fff" + }, + "colorBackgroundSliderRangeActive": { + "light": "#004a9e", + "dark": "#75cfff" + }, + "colorBackgroundSliderHandleDefault": { + "light": "#295eff", + "dark": "#5c7fff" + }, + "colorBackgroundSliderHandleActive": { + "light": "#004a9e", + "dark": "#75cfff" + }, + "colorBackgroundSliderTrackDefault": { + "light": "#8c8c94", + "dark": "#656871" + }, + "colorBackgroundStatusError": { + "light": "#fff5f5", + "dark": "#1f0000" + }, + "colorBackgroundStatusInfo": { + "light": "#f0fbff", + "dark": "#001129" + }, + "colorBackgroundDialog": { + "light": "#f0fbff", + "dark": "#001129" + }, + "colorBackgroundStatusSuccess": { + "light": "#effff1", + "dark": "#001401" + }, + "colorBackgroundStatusWarning": { + "light": "#fffef0", + "dark": "#191100" + }, + "colorBackgroundToggleCheckedDisabled": { + "light": "#b8e7ff", + "dark": "#002b66" + }, + "colorBackgroundToggleDefault": { + "light": "#424650", + "dark": "#8c8c94" + }, + "colorBackgroundStatusIndicatorError": { + "light": "#fff5f5", + "dark": "#ff7a7a20" + }, + "colorBackgroundStatusIndicatorWarning": { + "light": "#fffef0", + "dark": "#fbd33220" + }, + "colorBackgroundStatusIndicatorSuccess": { + "light": "#effff1", + "dark": "#2bb53420" + }, + "colorBackgroundStatusIndicatorInfo": { + "light": "#f5f7ff", + "dark": "#5c7fff20" + }, + "colorBackgroundStatusIndicatorNeutral": { + "light": "#ededed", + "dark": "#242424" + }, + "colorBackgroundChatBubbleOutgoing": { + "light": "transparent", + "dark": "transparent" + }, + "colorBackgroundChatBubbleIncoming": { + "light": "#f6f6f9", + "dark": "#0f141a" + }, + "colorTextChatBubbleOutgoing": { + "light": "#151515", + "dark": "#c9c9c9" + }, + "colorTextChatBubbleIncoming": { + "light": "#151515", + "dark": "#c9c9c9" + }, + "colorBorderButtonLinkDisabled": { + "light": "transparent", + "dark": "transparent" + }, + "colorBorderButtonNormalActive": { + "light": "#b7b7b7", + "dark": "#909090" + }, + "colorBorderButtonNormalDefault": { + "light": "#909090", + "dark": "#6b6b6b" + }, + "colorBorderToggleButtonNormalPressed": { + "light": "#295eff", + "dark": "#5c7fff" + }, + "colorBorderButtonNormalDisabled": { + "light": "#b7b7b7", + "dark": "#3b3b3b" + }, + "colorTextButtonNormalDisabled": { + "light": "#a9a9a9", + "dark": "#6b6b6b" + }, + "colorBorderButtonNormalHover": { + "light": "#808080", + "dark": "#909090" + }, + "colorTextButtonIconDisabled": { + "light": "#8c8c94", + "dark": "#8c8c94" + }, + "colorBorderButtonPrimaryActive": { + "light": "#242424", + "dark": "#e1e1e1" + }, + "colorBorderButtonPrimaryDefault": { + "light": "#242424", + "dark": "#e1e1e1" + }, + "colorBorderButtonPrimaryDisabled": { + "light": "#b7b7b7", + "dark": "#3b3b3b" + }, + "colorBorderButtonPrimaryHover": { + "light": "#3b3b3b", + "dark": "#f5f5f5" + }, + "colorTextButtonPrimaryDisabled": { + "light": "#f9f9f9", + "dark": "#151515" + }, + "colorItemSelected": { + "light": "#006ce0", + "dark": "#42b4ff" + }, + "colorBorderCard": { + "light": "#e1e1e1", + "dark": "#2d2d2d" + }, + "colorBorderContainerTop": { + "light": "transparent", + "dark": "transparent" + }, + "colorBorderControlDefault": { + "light": "#909090", + "dark": "#6b6b6b" + }, + "colorBorderDividerDefault": { + "light": "#e1e1e1", + "dark": "#2d2d2d" + }, + "colorBorderDividerSecondary": { + "light": "#f5f5f5", + "dark": "#242424" + }, + "colorBorderDropdownContainer": { + "light": "#b4b4bb", + "dark": "#656871" + }, + "colorBorderDropdownItemHover": { + "light": "#8c8c94", + "dark": "#656871" + }, + "colorBorderInputDefault": { + "light": "#909090", + "dark": "#6b6b6b" + }, + "colorBorderInputFocused": { + "light": "#006ce0", + "dark": "#42b4ff" + }, + "colorBorderItemFocused": { + "light": "#295eff", + "dark": "#5c7fff" + }, + "colorBorderDropdownItemFocused": { + "light": "#424650", + "dark": "#dedee3" + }, + "colorBorderItemSelected": { + "light": "#295eff", + "dark": "#5c7fff" + }, + "colorBorderLayout": { + "light": "#e1e1e1", + "dark": "#2d2d2d" + }, + "colorBorderPopover": { + "light": "#b4b4bb", + "dark": "#656871" + }, + "colorBorderSegmentActive": { + "light": "#424650", + "dark": "#dedee3" + }, + "colorBorderSegmentDefault": { + "light": "#424650", + "dark": "#dedee3" + }, + "colorBorderSegmentDisabled": { + "light": "#424650", + "dark": "#dedee3" + }, + "colorBorderSegmentHover": { + "light": "#424650", + "dark": "#dedee3" + }, + "colorBorderStatusError": { + "light": "#db0000", + "dark": "#ff7a7a" + }, + "colorBorderStatusInfo": { + "light": "#006ce0", + "dark": "#42b4ff" + }, + "colorBorderStatusSuccess": { + "light": "#00802f", + "dark": "#2bb534" + }, + "colorBorderStatusWarning": { + "light": "#855900", + "dark": "#fbd332" + }, + "colorBorderDialog": { + "light": "#006ce0", + "dark": "#42b4ff" + }, + "colorForegroundControlDefault": { + "light": "#ffffff", + "dark": "#0f141a" + }, + "colorForegroundControlDisabled": { + "light": "#ffffff", + "dark": "#161d26" + }, + "colorForegroundControlReadOnly": { + "light": "#656871", + "dark": "#a4a4ad" + }, + "colorTextAccent": { + "light": "#295eff", + "dark": "#5c7fff" + }, + "colorTextBodyDefault": { + "light": "#151515", + "dark": "#c9c9c9" + }, + "colorTextBodySecondary": { + "light": "#6b6b6b", + "dark": "#a9a9a9" + }, + "colorTextBreadcrumbCurrent": { + "light": "#6b6b6b", + "dark": "#909090" + }, + "colorTextBreadcrumbIcon": { + "light": "#8c8c94", + "dark": "#656871" + }, + "colorTextButtonInlineIconDefault": { + "light": "#151515", + "dark": "#c9c9c9" + }, + "colorTextButtonInlineIconDisabled": { + "light": "#b4b4bb", + "dark": "#656871" + }, + "colorTextButtonInlineIconHover": { + "light": "#494949", + "dark": "#f5f5f5" + }, + "colorTextButtonNormalActive": { + "light": "#1e1e1e", + "dark": "#c9c9c9" + }, + "colorTextToggleButtonNormalPressed": { + "light": "#1a1a1a", + "dark": "#ffffff" + }, + "colorTextButtonNormalDefault": { + "light": "#3b3b3b", + "dark": "#c9c9c9" + }, + "colorTextButtonNormalHover": { + "light": "#1e1e1e", + "dark": "#ededed" + }, + "colorTextLinkButtonNormalDefault": { + "light": "#3b3b3b", + "dark": "#c9c9c9" + }, + "colorTextLinkButtonNormalHover": { + "light": "#1e1e1e", + "dark": "#ededed" + }, + "colorTextLinkButtonNormalActive": { + "light": "#1e1e1e", + "dark": "#c9c9c9" + }, + "colorTextButtonLinkActive": { + "light": "#3b3b3b", + "dark": "#e1e1e1" + }, + "colorTextButtonLinkDefault": { + "light": "#3b3b3b", + "dark": "#c9c9c9" + }, + "colorTextButtonLinkDisabled": { + "light": "#909090", + "dark": "#494949" + }, + "colorTextButtonLinkHover": { + "light": "#3b3b3b", + "dark": "#ededed" + }, + "colorTextButtonPrimaryActive": { + "light": "#fcfcfc", + "dark": "#151515" + }, + "colorTextButtonPrimaryDefault": { + "light": "#f9f9f9", + "dark": "#151515" + }, + "colorTextButtonPrimaryHover": { + "light": "#fcfcfc", + "dark": "#151515" + }, + "colorTextCalendarDateSelected": { + "light": "#ffffff", + "dark": "#1e1e1e" + }, + "colorTextCounter": { + "light": "#656871", + "dark": "#a4a4ad" + }, + "colorTextDropdownItemDefault": { + "light": "#0f141a", + "dark": "#dedee3" + }, + "colorTextDropdownItemDisabled": { + "light": "#b4b4bb", + "dark": "#656871" + }, + "colorTextDropdownItemFilterMatch": { + "light": "#295eff", + "dark": "#5c7fff" + }, + "colorTextDropdownItemHighlighted": { + "light": "#0f141a", + "dark": "#ebebf0" + }, + "colorTextDropdownItemSecondary": { + "light": "#6b6b6b", + "dark": "#909090" + }, + "colorTextEmpty": { + "light": "#656871", + "dark": "#dedee3" + }, + "colorBorderExpandableSectionDefault": { + "light": "#e1e1e1", + "dark": "#2d2d2d" + }, + "colorTextFormDefault": { + "light": "#0f141a", + "dark": "#dedee3" + }, + "colorTextFormLabel": { + "light": "#6b6b6b", + "dark": "#e1e1e1" + }, + "colorTextFormSecondary": { + "light": "#6b6b6b", + "dark": "#909090" + }, + "colorTextGroupLabel": { + "light": "#424650", + "dark": "#c6c6cd" + }, + "colorTextHeadingDefault": { + "light": "#0f141a", + "dark": "#ebebf0" + }, + "colorTextHeadingSecondary": { + "light": "#424650", + "dark": "#a4a4ad" + }, + "colorTextHomeHeaderDefault": { + "light": "#ebebf0", + "dark": "#ebebf0" + }, + "colorTextHomeHeaderSecondary": { + "light": "#c6c6cd", + "dark": "#c6c6cd" + }, + "colorTextIconSubtle": { + "light": "#656871", + "dark": "#b4b4bb" + }, + "colorTextInputDisabled": { + "light": "#b4b4bb", + "dark": "#656871" + }, + "colorTextInputPlaceholder": { + "light": "#656871", + "dark": "#a4a4ad" + }, + "colorTextInteractiveActive": { + "light": "#0f141a", + "dark": "#f9f9fa" + }, + "colorTextInteractiveDefault": { + "light": "#424650", + "dark": "#dedee3" + }, + "colorTextInteractiveDisabled": { + "light": "#b4b4bb", + "dark": "#656871" + }, + "colorTextInteractiveHover": { + "light": "#0f141a", + "dark": "#f9f9fa" + }, + "colorTextToggleButtonIconPressed": { + "light": "#0f141a", + "dark": "#f9f9fa" + }, + "colorTextInteractiveInvertedDefault": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorTextInteractiveInvertedHover": { + "light": "#f9f9fa", + "dark": "#f9f9fa" + }, + "colorTextLabel": { + "light": "#6b6b6b", + "dark": "#909090" + }, + "colorTextKeyValuePairsValue": { + "light": "#151515", + "dark": "#c9c9c9" + }, + "colorTextLayoutToggle": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorTextLayoutToggleActive": { + "light": "#ffffff", + "dark": "#161d26" + }, + "colorTextLayoutToggleHover": { + "light": "#006ce0", + "dark": "#42b4ff" + }, + "colorTextLayoutToggleSelected": { + "light": "#295eff", + "dark": "#94afff" + }, + "colorTextLinkDefault": { + "light": "#151515", + "dark": "#c9c9c9" + }, + "colorTextLinkHover": { + "light": "#494949", + "dark": "#f5f5f5" + }, + "colorTextLinkDecorationDefault": { + "light": "#494949", + "dark": "#6b6b6b" + }, + "colorTextLinkDecorationHover": { + "light": "currentColor", + "dark": "currentColor" + }, + "colorTextLinkSecondaryDefault": { + "light": "#6b6b6b", + "dark": "#a9a9a9" + }, + "colorTextLinkSecondaryHover": { + "light": "#494949", + "dark": "#f5f5f5" + }, + "colorTextLinkInfoDefault": { + "light": "#295eff", + "dark": "#7598ff" + }, + "colorTextLinkInfoHover": { + "light": "#0033cc", + "dark": "#94afff" + }, + "colorTextNotificationDefault": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorTextSegmentActive": { + "light": "#ffffff", + "dark": "#0f141a" + }, + "colorTextSegmentDefault": { + "light": "#424650", + "dark": "#dedee3" + }, + "colorTextSegmentHover": { + "light": "#1e1e1e", + "dark": "#ededed" + }, + "colorTextStatusError": { + "light": "#db0000", + "dark": "#ff9e9e" + }, + "colorTextStatusInactive": { + "light": "#494949", + "dark": "#a9a9a9" + }, + "colorTextStatusInfo": { + "light": "#295eff", + "dark": "#94afff" + }, + "colorTextStatusSuccess": { + "light": "#00802f", + "dark": "#aeffa8" + }, + "colorTextStatusWarning": { + "light": "#9e6900", + "dark": "#ffed4d" + }, + "colorTextTopNavigationTitle": { + "light": "#0f141a", + "dark": "#f9f9fa" + }, + "colorDropzoneBackgroundDefault": { + "light": "#ffffff", + "dark": "#161d26" + }, + "colorDropzoneBackgroundHover": { + "light": "#f0fbff", + "dark": "#001129" + }, + "colorDropzoneTextDefault": { + "light": "#424650", + "dark": "#c6c6cd" + }, + "colorDropzoneTextHover": { + "light": "#424650", + "dark": "#c6c6cd" + }, + "colorDropzoneBorderDefault": { + "light": "#8c8c94", + "dark": "#656871" + }, + "colorDropzoneBorderHover": { + "light": "#002b66", + "dark": "#75cfff" + }, + "colorTreeViewConnectorLine": { + "light": "#8c8c94", + "dark": "#dedee3" + }, + "colorBackgroundActionCardDefault": { + "light": "#ffffff", + "dark": "#161d26" + }, + "colorBackgroundActionCardHover": { + "light": "#f0fbff", + "dark": "#1b232d" + }, + "colorBackgroundActionCardActive": { + "light": "#d1f1ff", + "dark": "#333843" + }, + "colorBorderActionCardDefault": { + "light": "#006ce0", + "dark": "#42b4ff" + }, + "colorBorderActionCardHover": { + "light": "#002b66", + "dark": "#75cfff" + }, + "colorBorderActionCardActive": { + "light": "#002b66", + "dark": "#75cfff" + }, + "colorBorderActionCardDisabled": { + "light": "#b4b4bb", + "dark": "#656871" + }, + "colorBackgroundActionCardDisabled": { + "light": "#ffffff", + "dark": "#161d26" + }, + "colorTextActionCardDisabled": { + "light": "#8c8c94", + "dark": "#8c8c94" + }, + "colorBorderBadge": { + "light": "transparent", + "dark": "transparent" + }, + "colorBorderBadgeGrey": { + "light": "transparent", + "dark": "transparent" + }, + "colorBorderBadgeGreen": { + "light": "transparent", + "dark": "transparent" + }, + "colorBorderBadgeBlue": { + "light": "transparent", + "dark": "transparent" + }, + "colorBorderBadgeRed": { + "light": "transparent", + "dark": "transparent" + }, + "colorTextBadgeGrey": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorTextBadgeGreen": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorTextBadgeBlue": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorTextBadgeRed": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "fontDecorationStyleLink": "solid", + "fontDecorationThicknessLink": "1px", + "fontDecorationThicknessLinkDisplayL": "2px", + "fontSizeExpandableHeading": "16px", + "fontFamilyBase": "'Ember Modern Text UI', 'Amazon Ember', Roboto, Arial, sans-serif", + "fontFamilyDisplay": "'Ember Modern Text UI', 'Amazon Ember', Roboto, Arial, sans-serif", + "fontFamilyHeading": "'Ember Modern Text UI', 'Amazon Ember', Roboto, Arial, sans-serif", + "fontFamilyMonospace": "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace", + "fontSizeBodyM": "14px", + "fontSizeBodyS": "12px", + "fontSizeDisplayL": "42px", + "fontSizeFormLabel": "14px", + "fontSizeHeadingL": "20px", + "fontSizeHeadingM": "18px", + "fontSizeHeadingS": "16px", + "fontSizeHeadingXl": "24px", + "fontSizeHeadingXs": "14px", + "fontSizeKeyValuePairsLabel": "14px", + "fontSizeTabs": "14px", + "fontWeightAlertHeader": "500", + "fontWeightBold": "500", + "fontWeightBreadcrumbCurrent": "400", + "fontWeightButton": "500", + "fontWeightDisplayL": "500", + "fontWeightFlashbarHeader": "500", + "fontWeightFormLabel": "500", + "fontWeightHeadingL": "500", + "fontWeightHeadingM": "500", + "fontWeightHeadingS": "500", + "fontWeightHeadingXl": "500", + "fontWeightHeadingXs": "500", + "fontWeightHeavy": "700", + "fontWeightKeyValuePairsLabel": "500", + "fontWeightLighter": "300", + "fontWeightNormal": "400", + "fontWeightTabs": "500", + "fontWeightTabsDisabled": "700", + "letterSpacingDisplayL": "-0.03em", + "letterSpacingHeadingL": "-0.015em", + "letterSpacingHeadingM": "-0.010em", + "letterSpacingHeadingS": "-0.005em", + "letterSpacingHeadingXl": "-0.02em", + "letterSpacingHeadingXs": "normal", + "lineHeightBodyM": "20px", + "lineHeightBodyS": "16px", + "lineHeightDisplayL": "48px", + "lineHeightFormLabel": "20px", + "lineHeightHeadingL": "24px", + "lineHeightHeadingM": "22px", + "lineHeightHeadingS": "20px", + "lineHeightHeadingXl": "30px", + "lineHeightHeadingXs": "20px", + "lineHeightKeyValuePairsLabel": "20px", + "lineHeightTabs": "20px", + "borderRadiusActionCardDefault": "4px", + "borderRadiusActionCardEmbedded": "8px", + "borderRadiusAlert": "2px", + "borderRadiusBadge": "16px", + "borderRadiusButton": "2px", + "borderRadiusCalendarDayFocusRing": "3px", + "borderRadiusCardDefault": "4px", + "borderRadiusCardEmbedded": "8px", + "borderRadiusContainer": "4px", + "borderRadiusControlCircularFocusRing": "4px", + "borderRadiusControlDefaultFocusRing": "4px", + "borderRadiusDropdown": "2px", + "borderRadiusDropzone": "4px", + "borderRadiusFlashbar": "2px", + "borderRadiusInput": "2px", + "borderRadiusItem": "2px", + "borderRadiusPopover": "4px", + "borderRadiusStatusIndicator": "2px", + "borderRadiusTabsFocusRing": "4px", + "borderRadiusTiles": "2px", + "borderRadiusToken": "2px", + "borderRadiusTutorialPanelItem": "4px", + "borderWidthActionCardActive": "1px", + "borderWidthActionCardDefault": "1px", + "borderWidthActionCardDisabled": "1px", + "borderWidthActionCardHover": "1px", + "borderWidthAlert": "0px", + "borderWidthAlertBlockEnd": "0px", + "borderWidthAlertBlockStart": "0px", + "borderWidthAlertInlineEnd": "0px", + "borderWidthAlertInlineStart": "2px", + "borderWidthButton": "1px", + "borderWidthCard": "1px", + "borderWidthCardSelected": "1px", + "borderWidthDropdown": "2px", + "borderWidthField": "1px", + "borderWidthIconBig": "2px", + "borderWidthIconLarge": "2.5px", + "borderWidthIconMedium": "1.75px", + "borderWidthIconNormal": "1.5px", + "borderWidthIconSmall": "1.5px", + "borderWidthIconXSmall": "1.5px", + "borderWidthItemSelected": "1px", + "borderWidthBadge": "0px", + "borderWidthPopover": "2px", + "borderWidthToken": "1px", + "sizeVerticalInput": { + "comfortable": "30px", + "compact": "26px" + }, + "spaceAlertVertical": { + "comfortable": "6px", + "compact": "6px" + }, + "spaceButtonHorizontal": { + "comfortable": "12px", + "compact": "12px" + }, + "spaceButtonVertical": { + "comfortable": "4px", + "compact": "2px" + }, + "spaceTokenVertical": { + "comfortable": "1px", + "compact": "1px" + }, + "spaceFieldVertical": { + "comfortable": "4px", + "compact": "2px" + }, + "spaceCardHorizontalDefault": { + "comfortable": "20px", + "compact": "20px" + }, + "spaceCardHorizontalEmbedded": { + "comfortable": "12px", + "compact": "10px" + }, + "spaceCardVerticalDefault": { + "comfortable": "16px", + "compact": "12px" + }, + "spaceCardVerticalEmbedded": { + "comfortable": "10px", + "compact": "8px" + }, + "spaceTabsVertical": { + "comfortable": "2px", + "compact": "2px" + }, + "spaceActionCardHorizontalDefault": { + "comfortable": "20px", + "compact": "20px" + }, + "spaceActionCardHorizontalEmbedded": { + "comfortable": "12px", + "compact": "10px" + }, + "spaceActionCardVerticalDefault": { + "comfortable": "16px", + "compact": "12px" + }, + "spaceActionCardVerticalEmbedded": { + "comfortable": "10px", + "compact": "8px" + }, + "spaceStatusIndicatorPaddingHorizontal": { + "comfortable": "4px", + "compact": "4px" + }, + "shadowCard": { + "light": "none", + "dark": "none" + } + }, + "contexts": { + "compact-table": { + "tokens": { + "sizeVerticalInput": { + "comfortable": "28px", + "compact": "28px" + }, + "spaceAlertVertical": { + "comfortable": "4px", + "compact": "4px" + }, + "spaceButtonHorizontal": { + "comfortable": "16px", + "compact": "16px" + }, + "spaceButtonVertical": { + "comfortable": "2px", + "compact": "2px" + }, + "spaceTokenVertical": { + "comfortable": "2px", + "compact": "2px" + }, + "spaceFieldVertical": { + "comfortable": "5px", + "compact": "3px" + }, + "spaceCardVerticalDefault": { + "comfortable": "12px", + "compact": "12px" + }, + "spaceActionCardVerticalDefault": { + "comfortable": "12px", + "compact": "12px" + }, + "spaceStatusIndicatorPaddingHorizontal": { + "comfortable": "0px", + "compact": "0px" + } + } + }, + "top-navigation": { + "tokens": { + "colorBackgroundBadgeIcon": { + "light": "#ff7a7a", + "dark": "#ff7a7a" + }, + "colorBackgroundButtonLinkActive": { + "light": "#1e1e1e", + "dark": "#1e1e1e" + }, + "colorBackgroundButtonLinkHover": { + "light": "#242424", + "dark": "#242424" + }, + "colorBackgroundButtonNormalActive": { + "light": "#1e1e1e", + "dark": "#1e1e1e" + }, + "colorBackgroundButtonNormalDefault": { + "light": "#1e1e1e", + "dark": "#1e1e1e" + }, + "colorBackgroundButtonNormalDisabled": { + "light": "#151515", + "dark": "#151515" + }, + "colorBackgroundButtonNormalHover": { + "light": "#242424", + "dark": "#242424" + }, + "colorBackgroundToggleButtonNormalPressed": { + "light": "#1e1e1e", + "dark": "#1e1e1e" + }, + "colorBackgroundToggleButtonNormalDefault": { + "light": "#1e1e1e", + "dark": "#1e1e1e" + }, + "colorBackgroundButtonPrimaryActive": { + "light": "#e1e1e1", + "dark": "#e1e1e1" + }, + "colorBackgroundButtonPrimaryDefault": { + "light": "#e1e1e1", + "dark": "#e1e1e1" + }, + "colorBackgroundButtonPrimaryDisabled": { + "light": "#3b3b3b", + "dark": "#3b3b3b" + }, + "colorBackgroundButtonPrimaryHover": { + "light": "#f5f5f5", + "dark": "#f5f5f5" + }, + "colorBackgroundCellShaded": { + "light": "#1a1a1a", + "dark": "#1a1a1a" + }, + "colorBackgroundCard": { + "light": "#151515", + "dark": "#151515" + }, + "colorBackgroundContainerContent": { + "light": "#151515", + "dark": "#151515" + }, + "colorBackgroundContainerHeader": { + "light": "#151515", + "dark": "#151515" + }, + "colorBackgroundControlChecked": { + "light": "#5c7fff", + "dark": "#5c7fff" + }, + "colorBackgroundControlDefault": { + "light": "#1e1e1e", + "dark": "#1e1e1e" + }, + "colorBackgroundControlDisabled": { + "light": "#333843", + "dark": "#333843" + }, + "colorBackgroundDropdownItemDefault": { + "light": "#242424", + "dark": "#242424" + }, + "colorBackgroundDropdownItemFilterMatch": { + "light": "#080808", + "dark": "#080808" + }, + "colorBackgroundDropdownItemHover": { + "light": "#3b3b3b", + "dark": "#3b3b3b" + }, + "colorBackgroundDropdownItemSelected": { + "light": "#080808", + "dark": "#080808" + }, + "colorBackgroundInputDefault": { + "light": "#151515", + "dark": "#151515" + }, + "colorBackgroundInputDisabled": { + "light": "#242424", + "dark": "#242424" + }, + "colorBackgroundItemSelected": { + "light": "#080808", + "dark": "#080808" + }, + "colorBackgroundLayoutMain": { + "light": "#151515", + "dark": "#151515" + }, + "colorBackgroundLayoutToolbar": { + "light": "#151515", + "dark": "#151515" + }, + "colorBackgroundLayoutToggleSelectedActive": { + "light": "#000833", + "dark": "#000833" + }, + "colorBackgroundLayoutToggleSelectedDefault": { + "light": "#5c7fff20", + "dark": "#5c7fff20" + }, + "colorBackgroundLayoutToggleSelectedHover": { + "light": "#5c7fff40", + "dark": "#5c7fff40" + }, + "colorBackgroundNotificationBlue": { + "light": "#001475", + "dark": "#001475" + }, + "colorBackgroundNotificationGreen": { + "light": "#003311", + "dark": "#003311" + }, + "colorBackgroundNotificationGrey": { + "light": "#656871", + "dark": "#656871" + }, + "colorBackgroundNotificationRed": { + "light": "#520000", + "dark": "#520000" + }, + "colorBackgroundNotificationYellow": { + "light": "#573a00", + "dark": "#573a00" + }, + "colorBackgroundPopover": { + "light": "#242424", + "dark": "#242424" + }, + "colorBackgroundProgressBarValueDefault": { + "light": "#5c7fff", + "dark": "#5c7fff" + }, + "colorBackgroundProgressBarDefault": { + "light": "#333843", + "dark": "#333843" + }, + "colorBackgroundSegmentActive": { + "light": "#e1e1e1", + "dark": "#e1e1e1" + }, + "colorBackgroundSegmentDisabled": { + "light": "#151515", + "dark": "#151515" + }, + "colorBackgroundSegmentHover": { + "light": "#242424", + "dark": "#242424" + }, + "colorBackgroundSegmentWrapper": { + "light": "#151515", + "dark": "#151515" + }, + "colorBackgroundSliderRangeDefault": { + "light": "#5c7fff", + "dark": "#5c7fff" + }, + "colorBackgroundSliderRangeActive": { + "light": "#75cfff", + "dark": "#75cfff" + }, + "colorBackgroundSliderHandleDefault": { + "light": "#5c7fff", + "dark": "#5c7fff" + }, + "colorBackgroundSliderHandleActive": { + "light": "#75cfff", + "dark": "#75cfff" + }, + "colorBackgroundSliderTrackDefault": { + "light": "#656871", + "dark": "#656871" + }, + "colorBackgroundStatusError": { + "light": "#1f0000", + "dark": "#1f0000" + }, + "colorBackgroundStatusInfo": { + "light": "#001129", + "dark": "#001129" + }, + "colorBackgroundDialog": { + "light": "#001129", + "dark": "#001129" + }, + "colorBackgroundStatusSuccess": { + "light": "#001401", + "dark": "#001401" + }, + "colorBackgroundStatusWarning": { + "light": "#191100", + "dark": "#191100" + }, + "colorBackgroundToggleCheckedDisabled": { + "light": "#002b66", + "dark": "#002b66" + }, + "colorBackgroundToggleDefault": { + "light": "#8c8c94", + "dark": "#8c8c94" + }, + "colorBackgroundStatusIndicatorError": { + "light": "#ff7a7a20", + "dark": "#ff7a7a20" + }, + "colorBackgroundStatusIndicatorWarning": { + "light": "#fbd33220", + "dark": "#fbd33220" + }, + "colorBackgroundStatusIndicatorSuccess": { + "light": "#2bb53420", + "dark": "#2bb53420" + }, + "colorBackgroundStatusIndicatorInfo": { + "light": "#5c7fff20", + "dark": "#5c7fff20" + }, + "colorBackgroundStatusIndicatorNeutral": { + "light": "#242424", + "dark": "#242424" + }, + "colorBackgroundChatBubbleIncoming": { + "light": "#0f141a", + "dark": "#0f141a" + }, + "colorTextChatBubbleOutgoing": { + "light": "#c9c9c9", + "dark": "#c9c9c9" + }, + "colorTextChatBubbleIncoming": { + "light": "#c9c9c9", + "dark": "#c9c9c9" + }, + "colorBorderButtonNormalActive": { + "light": "#909090", + "dark": "#909090" + }, + "colorBorderButtonNormalDefault": { + "light": "#6b6b6b", + "dark": "#6b6b6b" + }, + "colorBorderToggleButtonNormalPressed": { + "light": "#5c7fff", + "dark": "#5c7fff" + }, + "colorBorderButtonNormalDisabled": { + "light": "#3b3b3b", + "dark": "#3b3b3b" + }, + "colorTextButtonNormalDisabled": { + "light": "#6b6b6b", + "dark": "#6b6b6b" + }, + "colorBorderButtonNormalHover": { + "light": "#909090", + "dark": "#909090" + }, + "colorBorderButtonPrimaryActive": { + "light": "#e1e1e1", + "dark": "#e1e1e1" + }, + "colorBorderButtonPrimaryDefault": { + "light": "#e1e1e1", + "dark": "#e1e1e1" + }, + "colorBorderButtonPrimaryDisabled": { + "light": "#3b3b3b", + "dark": "#3b3b3b" + }, + "colorBorderButtonPrimaryHover": { + "light": "#f5f5f5", + "dark": "#f5f5f5" + }, + "colorTextButtonPrimaryDisabled": { + "light": "#151515", + "dark": "#151515" + }, + "colorItemSelected": { + "light": "#7598ff", + "dark": "#7598ff" + }, + "colorBorderCard": { + "light": "#2d2d2d", + "dark": "#2d2d2d" + }, + "colorBorderControlDefault": { + "light": "#6b6b6b", + "dark": "#6b6b6b" + }, + "colorBorderDividerDefault": { + "light": "#2d2d2d", + "dark": "#2d2d2d" + }, + "colorBorderDividerSecondary": { + "light": "#242424", + "dark": "#242424" + }, + "colorBorderDropdownContainer": { + "light": "#656871", + "dark": "#656871" + }, + "colorBorderDropdownItemHover": { + "light": "#656871", + "dark": "#656871" + }, + "colorBorderInputDefault": { + "light": "#6b6b6b", + "dark": "#6b6b6b" + }, + "colorBorderInputFocused": { + "light": "#5c7fff", + "dark": "#5c7fff" + }, + "colorBorderItemFocused": { + "light": "#5c7fff", + "dark": "#5c7fff" + }, + "colorBorderDropdownItemFocused": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorBorderItemSelected": { + "light": "#5c7fff", + "dark": "#5c7fff" + }, + "colorBorderLayout": { + "light": "#2d2d2d", + "dark": "#2d2d2d" + }, + "colorBorderPopover": { + "light": "#656871", + "dark": "#656871" + }, + "colorBorderSegmentActive": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorBorderSegmentDefault": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorBorderSegmentDisabled": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorBorderSegmentHover": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorBorderStatusError": { + "light": "#ff7a7a", + "dark": "#ff7a7a" + }, + "colorBorderStatusInfo": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorBorderStatusSuccess": { + "light": "#2bb534", + "dark": "#2bb534" + }, + "colorBorderStatusWarning": { + "light": "#fbd332", + "dark": "#fbd332" + }, + "colorBorderDialog": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorForegroundControlDefault": { + "light": "#0f141a", + "dark": "#0f141a" + }, + "colorForegroundControlDisabled": { + "light": "#161d26", + "dark": "#161d26" + }, + "colorForegroundControlReadOnly": { + "light": "#a4a4ad", + "dark": "#a4a4ad" + }, + "colorTextAccent": { + "light": "#5c7fff", + "dark": "#5c7fff" + }, + "colorTextBodyDefault": { + "light": "#c9c9c9", + "dark": "#c9c9c9" + }, + "colorTextBodySecondary": { + "light": "#a9a9a9", + "dark": "#a9a9a9" + }, + "colorTextBreadcrumbCurrent": { + "light": "#909090", + "dark": "#909090" + }, + "colorTextBreadcrumbIcon": { + "light": "#656871", + "dark": "#656871" + }, + "colorTextButtonInlineIconDefault": { + "light": "#7598ff", + "dark": "#7598ff" + }, + "colorTextButtonInlineIconDisabled": { + "light": "#656871", + "dark": "#656871" + }, + "colorTextButtonInlineIconHover": { + "light": "#94afff", + "dark": "#94afff" + }, + "colorTextButtonNormalActive": { + "light": "#c9c9c9", + "dark": "#c9c9c9" + }, + "colorTextToggleButtonNormalPressed": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorTextButtonNormalDefault": { + "light": "#c9c9c9", + "dark": "#c9c9c9" + }, + "colorTextButtonNormalHover": { + "light": "#ededed", + "dark": "#ededed" + }, + "colorTextLinkButtonNormalDefault": { + "light": "#c9c9c9", + "dark": "#c9c9c9" + }, + "colorTextLinkButtonNormalHover": { + "light": "#ededed", + "dark": "#ededed" + }, + "colorTextLinkButtonNormalActive": { + "light": "#c9c9c9", + "dark": "#c9c9c9" + }, + "colorTextButtonLinkActive": { + "light": "#e1e1e1", + "dark": "#e1e1e1" + }, + "colorTextButtonLinkDefault": { + "light": "#c9c9c9", + "dark": "#c9c9c9" + }, + "colorTextButtonLinkDisabled": { + "light": "#494949", + "dark": "#494949" + }, + "colorTextButtonLinkHover": { + "light": "#ededed", + "dark": "#ededed" + }, + "colorTextButtonPrimaryActive": { + "light": "#151515", + "dark": "#151515" + }, + "colorTextButtonPrimaryDefault": { + "light": "#151515", + "dark": "#151515" + }, + "colorTextButtonPrimaryHover": { + "light": "#151515", + "dark": "#151515" + }, + "colorTextCalendarDateSelected": { + "light": "#1e1e1e", + "dark": "#1e1e1e" + }, + "colorTextCounter": { + "light": "#a4a4ad", + "dark": "#a4a4ad" + }, + "colorTextDropdownItemDefault": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorTextDropdownItemDisabled": { + "light": "#656871", + "dark": "#656871" + }, + "colorTextDropdownItemFilterMatch": { + "light": "#5c7fff", + "dark": "#5c7fff" + }, + "colorTextDropdownItemHighlighted": { + "light": "#ebebf0", + "dark": "#ebebf0" + }, + "colorTextDropdownItemSecondary": { + "light": "#909090", + "dark": "#909090" + }, + "colorTextEmpty": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorBorderExpandableSectionDefault": { + "light": "#2d2d2d", + "dark": "#2d2d2d" + }, + "colorTextFormDefault": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorTextFormLabel": { + "light": "#e1e1e1", + "dark": "#e1e1e1" + }, + "colorTextFormSecondary": { + "light": "#909090", + "dark": "#909090" + }, + "colorTextGroupLabel": { + "light": "#c6c6cd", + "dark": "#c6c6cd" + }, + "colorTextHeadingDefault": { + "light": "#ebebf0", + "dark": "#ebebf0" + }, + "colorTextHeadingSecondary": { + "light": "#a4a4ad", + "dark": "#a4a4ad" + }, + "colorTextIconSubtle": { + "light": "#b4b4bb", + "dark": "#b4b4bb" + }, + "colorTextInputDisabled": { + "light": "#656871", + "dark": "#656871" + }, + "colorTextInputPlaceholder": { + "light": "#a4a4ad", + "dark": "#a4a4ad" + }, + "colorTextInteractiveActive": { + "light": "#f9f9fa", + "dark": "#f9f9fa" + }, + "colorTextInteractiveDefault": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorTextInteractiveDisabled": { + "light": "#656871", + "dark": "#656871" + }, + "colorTextInteractiveHover": { + "light": "#f9f9fa", + "dark": "#f9f9fa" + }, + "colorTextToggleButtonIconPressed": { + "light": "#f9f9fa", + "dark": "#f9f9fa" + }, + "colorTextLabel": { + "light": "#909090", + "dark": "#909090" + }, + "colorTextKeyValuePairsValue": { + "light": "#c9c9c9", + "dark": "#c9c9c9" + }, + "colorTextLayoutToggleActive": { + "light": "#161d26", + "dark": "#161d26" + }, + "colorTextLayoutToggleHover": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorTextLayoutToggleSelected": { + "light": "#94afff", + "dark": "#94afff" + }, + "colorTextLinkDefault": { + "light": "#c9c9c9", + "dark": "#c9c9c9" + }, + "colorTextLinkHover": { + "light": "#f5f5f5", + "dark": "#f5f5f5" + }, + "colorTextLinkDecorationDefault": { + "light": "#6b6b6b", + "dark": "#6b6b6b" + }, + "colorTextLinkSecondaryDefault": { + "light": "#a9a9a9", + "dark": "#a9a9a9" + }, + "colorTextLinkSecondaryHover": { + "light": "#f5f5f5", + "dark": "#f5f5f5" + }, + "colorTextLinkInfoDefault": { + "light": "#7598ff", + "dark": "#7598ff" + }, + "colorTextLinkInfoHover": { + "light": "#94afff", + "dark": "#94afff" + }, + "colorTextSegmentActive": { + "light": "#0f141a", + "dark": "#0f141a" + }, + "colorTextSegmentDefault": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorTextSegmentHover": { + "light": "#ededed", + "dark": "#ededed" + }, + "colorTextStatusError": { + "light": "#ff9e9e", + "dark": "#ff9e9e" + }, + "colorTextStatusInactive": { + "light": "#a9a9a9", + "dark": "#a9a9a9" + }, + "colorTextStatusInfo": { + "light": "#94afff", + "dark": "#94afff" + }, + "colorTextStatusSuccess": { + "light": "#aeffa8", + "dark": "#aeffa8" + }, + "colorTextStatusWarning": { + "light": "#ffed4d", + "dark": "#ffed4d" + }, + "colorTextTopNavigationTitle": { + "light": "#f9f9fa", + "dark": "#f9f9fa" + }, + "colorDropzoneBackgroundDefault": { + "light": "#161d26", + "dark": "#161d26" + }, + "colorDropzoneBackgroundHover": { + "light": "#001129", + "dark": "#001129" + }, + "colorDropzoneTextDefault": { + "light": "#c6c6cd", + "dark": "#c6c6cd" + }, + "colorDropzoneTextHover": { + "light": "#c6c6cd", + "dark": "#c6c6cd" + }, + "colorDropzoneBorderDefault": { + "light": "#656871", + "dark": "#656871" + }, + "colorDropzoneBorderHover": { + "light": "#75cfff", + "dark": "#75cfff" + }, + "colorTreeViewConnectorLine": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorBackgroundActionCardDefault": { + "light": "#161d26", + "dark": "#161d26" + }, + "colorBackgroundActionCardHover": { + "light": "#1b232d", + "dark": "#1b232d" + }, + "colorBackgroundActionCardActive": { + "light": "#333843", + "dark": "#333843" + }, + "colorBorderActionCardDefault": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorBorderActionCardHover": { + "light": "#75cfff", + "dark": "#75cfff" + }, + "colorBorderActionCardActive": { + "light": "#75cfff", + "dark": "#75cfff" + }, + "colorBorderActionCardDisabled": { + "light": "#656871", + "dark": "#656871" + }, + "colorBackgroundActionCardDisabled": { + "light": "#161d26", + "dark": "#161d26" + } + } + }, + "header": { + "tokens": { + "colorBackgroundButtonNormalActive": { + "light": "#1a1a1a", + "dark": "#1a1a1a" + }, + "colorBackgroundButtonNormalHover": { + "light": "#242424", + "dark": "#242424" + }, + "colorBackgroundButtonPrimaryActive": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorBackgroundButtonPrimaryDefault": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorBackgroundButtonPrimaryHover": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorBackgroundSegmentHover": { + "light": "#242424", + "dark": "#242424" + }, + "colorBorderButtonNormalActive": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorBorderButtonNormalDefault": { + "light": "#e1e1e1", + "dark": "#e1e1e1" + }, + "colorBorderButtonNormalHover": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorBorderButtonPrimaryActive": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorBorderButtonPrimaryDefault": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorBorderButtonPrimaryHover": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorTextButtonInlineIconDefault": { + "light": "#c9c9c9", + "dark": "#c9c9c9" + }, + "colorTextButtonNormalActive": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorTextButtonNormalDefault": { + "light": "#e1e1e1", + "dark": "#e1e1e1" + }, + "colorTextButtonNormalHover": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorTextLinkButtonNormalDefault": { + "light": "#e1e1e1", + "dark": "#e1e1e1" + }, + "colorTextLinkButtonNormalHover": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorTextLinkButtonNormalActive": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorTextButtonPrimaryActive": { + "light": "#1a1a1a", + "dark": "#1a1a1a" + }, + "colorTextButtonPrimaryDefault": { + "light": "#1a1a1a", + "dark": "#1a1a1a" + }, + "colorTextButtonPrimaryHover": { + "light": "#1a1a1a", + "dark": "#1a1a1a" + }, + "colorTextLinkDefault": { + "light": "#c9c9c9", + "dark": "#c9c9c9" + }, + "colorTextSegmentHover": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + } + } + }, + "flashbar": { + "tokens": { + "colorBackgroundButtonNormalActive": { + "light": "rgba(0, 7, 22, 0.2)", + "dark": "rgba(0, 7, 22, 0.2)" + }, + "colorBackgroundButtonNormalDefault": { + "light": "transparent", + "dark": "transparent" + }, + "colorBackgroundButtonNormalHover": { + "light": "rgba(0, 7, 22, 0.15)", + "dark": "rgba(0, 7, 22, 0.15)" + }, + "colorBackgroundToggleButtonNormalDefault": { + "light": "transparent", + "dark": "transparent" + }, + "colorBackgroundProgressBarValueDefault": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorBackgroundProgressBarDefault": { + "light": "rgba(255, 255, 255, 0.25)", + "dark": "rgba(255, 255, 255, 0.25)" + }, + "colorBackgroundSegmentHover": { + "light": "rgba(0, 7, 22, 0.15)", + "dark": "rgba(0, 7, 22, 0.15)" + }, + "colorTextChatBubbleOutgoing": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorTextChatBubbleIncoming": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorBorderButtonNormalActive": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorBorderButtonNormalDefault": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorBorderButtonNormalHover": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorBorderCard": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorBorderDividerDefault": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorBorderItemFocused": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorTextBodyDefault": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorTextBodySecondary": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorTextButtonInlineIconDefault": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorTextButtonInlineIconHover": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorTextButtonNormalActive": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorTextButtonNormalDefault": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorTextButtonNormalHover": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorTextLinkButtonNormalDefault": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorTextLinkButtonNormalHover": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorTextLinkButtonNormalActive": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorBorderExpandableSectionDefault": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorTextHeadingSecondary": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorTextLabel": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorTextLinkDefault": { + "light": "#f9f9f9", + "dark": "#f9f9f9" + }, + "colorTextLinkHover": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorTextLinkSecondaryHover": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorTextSegmentHover": { + "light": "#ffffff", + "dark": "#ffffff" + } + } + }, + "flashbar-warning": { + "tokens": { + "colorBackgroundButtonNormalActive": { + "light": "rgba(0, 7, 22, 0.1)", + "dark": "rgba(255, 255, 255, 0.1)" + }, + "colorBackgroundButtonNormalDefault": { + "light": "transparent", + "dark": "transparent" + }, + "colorBackgroundButtonNormalHover": { + "light": "rgba(0, 7, 22, 0.08)", + "dark": "rgba(255, 255, 255, 0.06)" + }, + "colorBackgroundToggleButtonNormalDefault": { + "light": "transparent", + "dark": "transparent" + }, + "colorBackgroundSegmentHover": { + "light": "rgba(0, 7, 22, 0.08)", + "dark": "rgba(255, 255, 255, 0.06)" + }, + "colorBorderButtonNormalActive": { + "light": "#242424", + "dark": "#ffffff" + }, + "colorBorderButtonNormalDefault": { + "light": "#242424", + "dark": "#ffffff" + }, + "colorBorderButtonNormalHover": { + "light": "#242424", + "dark": "#ffffff" + }, + "colorBorderCard": { + "light": "#1a1a1a", + "dark": "#1a1a1a" + }, + "colorBorderDividerDefault": { + "light": "#1a1a1a", + "dark": "#1a1a1a" + }, + "colorTextButtonNormalActive": { + "light": "#1a1a1a", + "dark": "#ffffff" + }, + "colorTextButtonNormalDefault": { + "light": "#1a1a1a", + "dark": "#ffffff" + }, + "colorTextButtonNormalHover": { + "light": "#1a1a1a", + "dark": "#ffffff" + }, + "colorTextLinkButtonNormalDefault": { + "light": "#1a1a1a", + "dark": "#ffffff" + }, + "colorTextLinkButtonNormalHover": { + "light": "#1a1a1a", + "dark": "#ffffff" + }, + "colorTextLinkButtonNormalActive": { + "light": "#1a1a1a", + "dark": "#ffffff" + }, + "colorBorderExpandableSectionDefault": { + "light": "#1a1a1a", + "dark": "#1a1a1a" + }, + "colorTextInteractiveInvertedDefault": { + "light": "#1a1a1a", + "dark": "#ffffff" + }, + "colorTextNotificationDefault": { + "light": "#1a1a1a", + "dark": "#ffffff" + }, + "colorTextSegmentHover": { + "light": "#1a1a1a", + "dark": "#ffffff" + }, + "colorTextBadgeGrey": { + "light": "#1a1a1a", + "dark": "#ffffff" + }, + "colorTextBadgeGreen": { + "light": "#1a1a1a", + "dark": "#ffffff" + }, + "colorTextBadgeBlue": { + "light": "#1a1a1a", + "dark": "#ffffff" + }, + "colorTextBadgeRed": { + "light": "#1a1a1a", + "dark": "#ffffff" + } + } + }, + "alert": { + "tokens": { + "colorBackgroundButtonNormalDefault": { + "light": "transparent", + "dark": "transparent" + }, + "colorBackgroundToggleButtonNormalDefault": { + "light": "transparent", + "dark": "transparent" + }, + "colorBackgroundStatusError": { + "light": "#fff5f5", + "dark": "#ff7a7a10" + }, + "colorBackgroundStatusInfo": { + "light": "#f0fbff", + "dark": "#161a2d" + }, + "colorBackgroundDialog": { + "light": "#f0fbff", + "dark": "#161a2d" + }, + "colorBackgroundStatusSuccess": { + "light": "#effff1", + "dark": "#2bb53410" + }, + "colorBackgroundStatusWarning": { + "light": "#fffef0", + "dark": "#fbd33210" + }, + "colorBorderCard": { + "light": "#c9c9c9", + "dark": "#6b6b6b" + }, + "colorBorderDividerDefault": { + "light": "#c9c9c9", + "dark": "#6b6b6b" + }, + "colorBorderStatusInfo": { + "light": "#006ce0", + "dark": "#5c7fff" + }, + "colorBorderDialog": { + "light": "#006ce0", + "dark": "#5c7fff" + }, + "colorBorderExpandableSectionDefault": { + "light": "#c9c9c9", + "dark": "#6b6b6b" + }, + "colorTextStatusInfo": { + "light": "#006ce0", + "dark": "#5c7fff" + }, + "colorTextStatusSuccess": { + "light": "#00802f", + "dark": "#2bb534" + } + } + }, + "alert-header": { + "tokens": { + "colorBackgroundBadgeIcon": { + "light": "#ff7a7a", + "dark": "#ff7a7a" + }, + "colorBackgroundButtonLinkActive": { + "light": "#333843", + "dark": "#333843" + }, + "colorBackgroundButtonLinkHover": { + "light": "#1b232d", + "dark": "#1b232d" + }, + "colorBackgroundButtonNormalActive": { + "light": "rgba(255, 255, 255, 0.15)", + "dark": "rgba(255, 255, 255, 0.15)" + }, + "colorBackgroundButtonNormalDefault": { + "light": "transparent", + "dark": "transparent" + }, + "colorBackgroundButtonNormalDisabled": { + "light": "#161d26", + "dark": "#161d26" + }, + "colorBackgroundButtonNormalHover": { + "light": "rgba(255, 255, 255, 0.1)", + "dark": "rgba(255, 255, 255, 0.1)" + }, + "colorBackgroundToggleButtonNormalPressed": { + "light": "#333843", + "dark": "#333843" + }, + "colorBackgroundToggleButtonNormalDefault": { + "light": "transparent", + "dark": "transparent" + }, + "colorBackgroundButtonPrimaryActive": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorBackgroundButtonPrimaryDefault": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorBackgroundButtonPrimaryDisabled": { + "light": "#232b37", + "dark": "#232b37" + }, + "colorBackgroundButtonPrimaryHover": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorBackgroundCellShaded": { + "light": "#1b232d", + "dark": "#1b232d" + }, + "colorBackgroundCard": { + "light": "#161d26", + "dark": "#161d26" + }, + "colorBackgroundContainerContent": { + "light": "#161d26", + "dark": "#161d26" + }, + "colorBackgroundContainerHeader": { + "light": "#161d26", + "dark": "#161d26" + }, + "colorBackgroundControlChecked": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorBackgroundControlDefault": { + "light": "#161d26", + "dark": "#161d26" + }, + "colorBackgroundControlDisabled": { + "light": "#333843", + "dark": "#333843" + }, + "colorBackgroundDropdownItemDefault": { + "light": "#1b232d", + "dark": "#1b232d" + }, + "colorBackgroundDropdownItemFilterMatch": { + "light": "#333843", + "dark": "#333843" + }, + "colorBackgroundDropdownItemHover": { + "light": "#131920", + "dark": "#131920" + }, + "colorBackgroundDropdownItemSelected": { + "light": "#001129", + "dark": "#001129" + }, + "colorBackgroundInputDefault": { + "light": "#161d26", + "dark": "#161d26" + }, + "colorBackgroundInputDisabled": { + "light": "#1b232d", + "dark": "#1b232d" + }, + "colorBackgroundItemSelected": { + "light": "#001129", + "dark": "#001129" + }, + "colorBackgroundLayoutMain": { + "light": "#161d26", + "dark": "#161d26" + }, + "colorBackgroundLayoutToolbar": { + "light": "#161d26", + "dark": "#161d26" + }, + "colorBackgroundLayoutToggleSelectedActive": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorBackgroundLayoutToggleSelectedDefault": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorBackgroundLayoutToggleSelectedHover": { + "light": "#75cfff", + "dark": "#75cfff" + }, + "colorBackgroundNotificationBlue": { + "light": "#006ce0", + "dark": "#006ce0" + }, + "colorBackgroundNotificationGreen": { + "light": "#00802f", + "dark": "#00802f" + }, + "colorBackgroundNotificationGrey": { + "light": "#656871", + "dark": "#656871" + }, + "colorBackgroundNotificationRed": { + "light": "#db0000", + "dark": "#db0000" + }, + "colorBackgroundNotificationYellow": { + "light": "#ffe347", + "dark": "#ffe347" + }, + "colorBackgroundPopover": { + "light": "#1b232d", + "dark": "#1b232d" + }, + "colorBackgroundProgressBarValueDefault": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorBackgroundProgressBarDefault": { + "light": "#333843", + "dark": "#333843" + }, + "colorBackgroundSegmentActive": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorBackgroundSegmentDisabled": { + "light": "#161d26", + "dark": "#161d26" + }, + "colorBackgroundSegmentHover": { + "light": "rgba(255, 255, 255, 0.1)", + "dark": "rgba(255, 255, 255, 0.1)" + }, + "colorBackgroundSegmentWrapper": { + "light": "#161d26", + "dark": "#161d26" + }, + "colorBackgroundSliderRangeDefault": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorBackgroundSliderRangeActive": { + "light": "#75cfff", + "dark": "#75cfff" + }, + "colorBackgroundSliderHandleDefault": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorBackgroundSliderHandleActive": { + "light": "#75cfff", + "dark": "#75cfff" + }, + "colorBackgroundSliderTrackDefault": { + "light": "#656871", + "dark": "#656871" + }, + "colorBackgroundStatusError": { + "light": "#1f0000", + "dark": "#1f0000" + }, + "colorBackgroundStatusInfo": { + "light": "#001129", + "dark": "#001129" + }, + "colorBackgroundDialog": { + "light": "#001129", + "dark": "#001129" + }, + "colorBackgroundStatusSuccess": { + "light": "#001401", + "dark": "#001401" + }, + "colorBackgroundStatusWarning": { + "light": "#191100", + "dark": "#191100" + }, + "colorBackgroundToggleCheckedDisabled": { + "light": "#002b66", + "dark": "#002b66" + }, + "colorBackgroundToggleDefault": { + "light": "#8c8c94", + "dark": "#8c8c94" + }, + "colorBackgroundStatusIndicatorError": { + "light": "transparent", + "dark": "transparent" + }, + "colorBackgroundStatusIndicatorWarning": { + "light": "transparent", + "dark": "transparent" + }, + "colorBackgroundStatusIndicatorSuccess": { + "light": "transparent", + "dark": "transparent" + }, + "colorBackgroundStatusIndicatorInfo": { + "light": "transparent", + "dark": "transparent" + }, + "colorBackgroundStatusIndicatorNeutral": { + "light": "transparent", + "dark": "transparent" + }, + "colorBackgroundChatBubbleIncoming": { + "light": "#0f141a", + "dark": "#0f141a" + }, + "colorTextChatBubbleOutgoing": { + "light": "#c6c6cd", + "dark": "#c6c6cd" + }, + "colorTextChatBubbleIncoming": { + "light": "#c6c6cd", + "dark": "#c6c6cd" + }, + "colorBorderButtonNormalActive": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorBorderButtonNormalDefault": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorBorderToggleButtonNormalPressed": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorBorderButtonNormalDisabled": { + "light": "#656871", + "dark": "#656871" + }, + "colorTextButtonNormalDisabled": { + "light": "#8c8c94", + "dark": "#8c8c94" + }, + "colorBorderButtonNormalHover": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorBorderButtonPrimaryActive": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorBorderButtonPrimaryDefault": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorBorderButtonPrimaryDisabled": { + "light": "#232b37", + "dark": "#232b37" + }, + "colorBorderButtonPrimaryHover": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorTextButtonPrimaryDisabled": { + "light": "#8c8c94", + "dark": "#8c8c94" + }, + "colorItemSelected": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorBorderCard": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorBorderControlDefault": { + "light": "#8c8c94", + "dark": "#8c8c94" + }, + "colorBorderDividerDefault": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorBorderDividerSecondary": { + "light": "#232b37", + "dark": "#232b37" + }, + "colorBorderDropdownContainer": { + "light": "#656871", + "dark": "#656871" + }, + "colorBorderDropdownItemHover": { + "light": "#656871", + "dark": "#656871" + }, + "colorBorderInputDefault": { + "light": "#656871", + "dark": "#656871" + }, + "colorBorderInputFocused": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorBorderItemFocused": { + "light": "#f9f9fa", + "dark": "#f9f9fa" + }, + "colorBorderDropdownItemFocused": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorBorderItemSelected": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorBorderLayout": { + "light": "#424650", + "dark": "#424650" + }, + "colorBorderPopover": { + "light": "#656871", + "dark": "#656871" + }, + "colorBorderSegmentActive": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorBorderSegmentDefault": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorBorderSegmentDisabled": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorBorderSegmentHover": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorBorderStatusError": { + "light": "#ff7a7a", + "dark": "#ff7a7a" + }, + "colorBorderStatusInfo": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorBorderStatusSuccess": { + "light": "#2bb534", + "dark": "#2bb534" + }, + "colorBorderStatusWarning": { + "light": "#fbd332", + "dark": "#fbd332" + }, + "colorBorderDialog": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorForegroundControlDefault": { + "light": "#0f141a", + "dark": "#0f141a" + }, + "colorForegroundControlDisabled": { + "light": "#161d26", + "dark": "#161d26" + }, + "colorForegroundControlReadOnly": { + "light": "#a4a4ad", + "dark": "#a4a4ad" + }, + "colorTextAccent": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorTextBodyDefault": { + "light": "#c6c6cd", + "dark": "#c6c6cd" + }, + "colorTextBodySecondary": { + "light": "#c6c6cd", + "dark": "#c6c6cd" + }, + "colorTextBreadcrumbCurrent": { + "light": "#8c8c94", + "dark": "#8c8c94" + }, + "colorTextBreadcrumbIcon": { + "light": "#656871", + "dark": "#656871" + }, + "colorTextButtonInlineIconDefault": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorTextButtonInlineIconDisabled": { + "light": "#656871", + "dark": "#656871" + }, + "colorTextButtonInlineIconHover": { + "light": "#75cfff", + "dark": "#75cfff" + }, + "colorTextButtonNormalActive": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorTextToggleButtonNormalPressed": { + "light": "#75cfff", + "dark": "#75cfff" + }, + "colorTextButtonNormalDefault": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorTextButtonNormalHover": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorTextLinkButtonNormalDefault": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorTextLinkButtonNormalHover": { + "light": "#75cfff", + "dark": "#75cfff" + }, + "colorTextLinkButtonNormalActive": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorTextButtonLinkActive": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorTextButtonLinkDefault": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorTextButtonLinkDisabled": { + "light": "#656871", + "dark": "#656871" + }, + "colorTextButtonLinkHover": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorTextButtonPrimaryActive": { + "light": "#0f141a", + "dark": "#0f141a" + }, + "colorTextButtonPrimaryDefault": { + "light": "#0f141a", + "dark": "#0f141a" + }, + "colorTextButtonPrimaryHover": { + "light": "#0f141a", + "dark": "#0f141a" + }, + "colorTextCalendarDateSelected": { + "light": "#161d26", + "dark": "#161d26" + }, + "colorTextCounter": { + "light": "#a4a4ad", + "dark": "#a4a4ad" + }, + "colorTextDropdownItemDefault": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorTextDropdownItemDisabled": { + "light": "#656871", + "dark": "#656871" + }, + "colorTextDropdownItemFilterMatch": { + "light": "#75cfff", + "dark": "#75cfff" + }, + "colorTextDropdownItemHighlighted": { + "light": "#ebebf0", + "dark": "#ebebf0" + }, + "colorTextDropdownItemSecondary": { + "light": "#a4a4ad", + "dark": "#a4a4ad" + }, + "colorTextEmpty": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorBorderExpandableSectionDefault": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorTextFormDefault": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorTextFormLabel": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorTextFormSecondary": { + "light": "#a4a4ad", + "dark": "#a4a4ad" + }, + "colorTextGroupLabel": { + "light": "#c6c6cd", + "dark": "#c6c6cd" + }, + "colorTextHeadingDefault": { + "light": "#ebebf0", + "dark": "#ebebf0" + }, + "colorTextHeadingSecondary": { + "light": "#a4a4ad", + "dark": "#a4a4ad" + }, + "colorTextIconSubtle": { + "light": "#b4b4bb", + "dark": "#b4b4bb" + }, + "colorTextInputDisabled": { + "light": "#656871", + "dark": "#656871" + }, + "colorTextInputPlaceholder": { + "light": "#a4a4ad", + "dark": "#a4a4ad" + }, + "colorTextInteractiveActive": { + "light": "#f9f9fa", + "dark": "#f9f9fa" + }, + "colorTextInteractiveDefault": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorTextInteractiveDisabled": { + "light": "#656871", + "dark": "#656871" + }, + "colorTextInteractiveHover": { + "light": "#f9f9fa", + "dark": "#f9f9fa" + }, + "colorTextToggleButtonIconPressed": { + "light": "#f9f9fa", + "dark": "#f9f9fa" + }, + "colorTextLabel": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorTextKeyValuePairsValue": { + "light": "#c6c6cd", + "dark": "#c6c6cd" + }, + "colorTextLayoutToggleActive": { + "light": "#161d26", + "dark": "#161d26" + }, + "colorTextLayoutToggleHover": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorTextLayoutToggleSelected": { + "light": "#0f141a", + "dark": "#0f141a" + }, + "colorTextLinkDefault": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorTextLinkHover": { + "light": "#75cfff", + "dark": "#75cfff" + }, + "colorTextLinkDecorationDefault": { + "light": "currentColor", + "dark": "currentColor" + }, + "colorTextLinkSecondaryDefault": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorTextLinkSecondaryHover": { + "light": "#75cfff", + "dark": "#75cfff" + }, + "colorTextLinkInfoDefault": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorTextLinkInfoHover": { + "light": "#75cfff", + "dark": "#75cfff" + }, + "colorTextNotificationDefault": { + "light": "#f9f9fa", + "dark": "#f9f9fa" + }, + "colorTextSegmentActive": { + "light": "#0f141a", + "dark": "#0f141a" + }, + "colorTextSegmentDefault": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorTextSegmentHover": { + "light": "#ffffff", + "dark": "#ffffff" + }, + "colorTextStatusError": { + "light": "#ff7a7a", + "dark": "#ff7a7a" + }, + "colorTextStatusInactive": { + "light": "#a4a4ad", + "dark": "#a4a4ad" + }, + "colorTextStatusInfo": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorTextStatusSuccess": { + "light": "#2bb534", + "dark": "#2bb534" + }, + "colorTextStatusWarning": { + "light": "#fbd332", + "dark": "#fbd332" + }, + "colorTextTopNavigationTitle": { + "light": "#f9f9fa", + "dark": "#f9f9fa" + }, + "colorDropzoneBackgroundDefault": { + "light": "#161d26", + "dark": "#161d26" + }, + "colorDropzoneBackgroundHover": { + "light": "#001129", + "dark": "#001129" + }, + "colorDropzoneTextDefault": { + "light": "#c6c6cd", + "dark": "#c6c6cd" + }, + "colorDropzoneTextHover": { + "light": "#c6c6cd", + "dark": "#c6c6cd" + }, + "colorDropzoneBorderDefault": { + "light": "#656871", + "dark": "#656871" + }, + "colorDropzoneBorderHover": { + "light": "#75cfff", + "dark": "#75cfff" + }, + "colorTreeViewConnectorLine": { + "light": "#dedee3", + "dark": "#dedee3" + }, + "colorBackgroundActionCardDefault": { + "light": "#161d26", + "dark": "#161d26" + }, + "colorBackgroundActionCardHover": { + "light": "#1b232d", + "dark": "#1b232d" + }, + "colorBackgroundActionCardActive": { + "light": "#333843", + "dark": "#333843" + }, + "colorBorderActionCardDefault": { + "light": "#42b4ff", + "dark": "#42b4ff" + }, + "colorBorderActionCardHover": { + "light": "#75cfff", + "dark": "#75cfff" + }, + "colorBorderActionCardActive": { + "light": "#75cfff", + "dark": "#75cfff" + }, + "colorBorderActionCardDisabled": { + "light": "#656871", + "dark": "#656871" + }, + "colorBackgroundActionCardDisabled": { + "light": "#161d26", + "dark": "#161d26" + }, + "colorTextBadgeGrey": { + "light": "#f9f9fa", + "dark": "#f9f9fa" + }, + "colorTextBadgeGreen": { + "light": "#f9f9fa", + "dark": "#f9f9fa" + }, + "colorTextBadgeBlue": { + "light": "#f9f9fa", + "dark": "#f9f9fa" + }, + "colorTextBadgeRed": { + "light": "#f9f9fa", + "dark": "#f9f9fa" + } + } + }, + "app-layout-toolbar": { + "tokens": { + "colorBackgroundLayoutMain": { + "light": "#fcfcfc", + "dark": "#080808" + } + } + } + } +} diff --git a/package-lock.json b/package-lock.json index 1783e1dcd3..4e5ffb502b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,6 +32,8 @@ "@babel/plugin-syntax-typescript": "^7.23.3", "@cloudscape-design/browser-test-tools": "^3.0.0", "@cloudscape-design/build-tools": "github:cloudscape-design/build-tools#main", + "@cloudscape-design/chat-components": "^1.0.138", + "@cloudscape-design/code-view": "^3.0.141", "@cloudscape-design/documenter": "^1.0.0", "@cloudscape-design/global-styles": "^1.0.0", "@cloudscape-design/jest-preset": "^2.0.0", @@ -5774,6 +5776,16 @@ "version": "1.42.0", "license": "BSD-3-Clause" }, + "node_modules/ace-code": { + "version": "1.44.0", + "resolved": "https://registry.npmjs.org/ace-code/-/ace-code-1.44.0.tgz", + "integrity": "sha512-6hmMdpJ7DTB4xGSPfZcINgwL2v5/0u6Oh5GXbcH7KZqjWkVADxSbA1IMoWmk/WvgHAsbaYmZoWh7DS2zCfVbeQ==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">= 0.6.0" + } + }, "node_modules/acorn": { "version": "8.15.0", "dev": true, diff --git a/package.json b/package.json index fda995324a..e972a7e392 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "start:integ": "cross-env NODE_ENV=development webpack serve --config pages/webpack.config.integ.cjs", "start:react18": "npm-run-all --parallel start:watch start:react18:dev", "start:react18:dev": "cross-env NODE_ENV=development REACT_VERSION=18 webpack serve --config pages/webpack.config.cjs", - "postinstall": "prepare-package-lock", + "postinstall": "node ./scripts/install-peer-dependency.js component-toolkit:main && prepare-package-lock", "prepare": "husky" }, "dependencies": { @@ -55,6 +55,8 @@ "@babel/plugin-syntax-typescript": "^7.23.3", "@cloudscape-design/browser-test-tools": "^3.0.0", "@cloudscape-design/build-tools": "github:cloudscape-design/build-tools#main", + "@cloudscape-design/chat-components": "^1.0.138", + "@cloudscape-design/code-view": "^3.0.141", "@cloudscape-design/documenter": "^1.0.0", "@cloudscape-design/global-styles": "^1.0.0", "@cloudscape-design/jest-preset": "^2.0.0", diff --git a/pages/.stylelintrc b/pages/.stylelintrc index db0d52672c..bebee217ee 100644 --- a/pages/.stylelintrc +++ b/pages/.stylelintrc @@ -12,6 +12,21 @@ "property-disallowed-list": ["border", "border-radius", "border-style", "margin", "padding"], "csstools/use-logical": "always" } + }, + { + "files": [ + "./demos/**/*.scss" + ], + "rules": { + "property-disallowed-list": null, + "csstools/use-logical": null, + "selector-max-type": null, + "selector-max-universal": null, + "@cloudscape-design/no-implicit-descendant": null, + "no-descending-specificity": null, + "scss/operator-no-unspaced": null, + "@cloudscape-design/license-headers": null + } } ], "plugins": [ diff --git a/pages/demos/cards.page.tsx b/pages/demos/cards.page.tsx new file mode 100644 index 0000000000..7c7aa3ba8a --- /dev/null +++ b/pages/demos/cards.page.tsx @@ -0,0 +1,9 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import { App } from './pages/cards/root'; + +export default function Page() { + return ; +} diff --git a/pages/demos/chat.page.tsx b/pages/demos/chat.page.tsx new file mode 100644 index 0000000000..82e2a878f0 --- /dev/null +++ b/pages/demos/chat.page.tsx @@ -0,0 +1,9 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import Chat from './pages/chat/chat'; + +export default function Page() { + return ; +} diff --git a/pages/demos/common/THEMING.md b/pages/demos/common/THEMING.md new file mode 100644 index 0000000000..891b2024ab --- /dev/null +++ b/pages/demos/common/THEMING.md @@ -0,0 +1,80 @@ +# Cloudscape Runtime Theming Implementation + +This project implements Cloudscape's runtime theming capability to customize the visual appearance of components. + +## Files + +- `theme-core.ts` - Theme definition with custom design tokens +- `apply-theme.ts` - Utility function to apply the theme (optional helper) + +## Theme Structure + +The theme is defined in `theme-core.ts` and follows Cloudscape's theming API: + +```typescript +export const themeCoreConfig = { + tokens: { + // Global token overrides for light and dark modes + colorBorderButtonNormalDefault: { + light: '#232f3e', + dark: '#e9ebed', + }, + // ... more tokens + }, + contexts: { + // Context-specific overrides + header: { + tokens: { + // Tokens specific to header context + }, + }, + 'app-layout-toolbar': { + // Tokens for app layout toolbar + }, + flashbar: { + // Tokens for flashbar notifications + }, + }, +}; +``` + +## Usage + +The theme is applied in each demo page's `index.tsx` file before rendering: + +```typescript +import { applyTheme } from '@cloudscape-design/components/theming'; +import { themeCoreConfig } from '../../common/theme-core'; + +applyTheme({ theme: themeCoreConfig }); + +createRoot(document.getElementById('app')!).render(); +``` + +## Customization + +To customize the theme: + +1. Edit `src/common/theme-core.ts` +2. Modify token values for light/dark modes +3. Add or remove context-specific overrides +4. Changes will apply to all demo pages + +## Available Contexts + +- `header` - Dark header area (high contrast header variant) +- `top-navigation` - Top navigation component +- `app-layout-toolbar` - App layout toolbar area +- `flashbar` - Flashbar notifications +- `alert` - Alert components + +## Token Categories + +- **Color tokens** - Can have light/dark mode values +- **Border radius tokens** - Applied globally (e.g., `borderRadiusButton`) +- **Typography tokens** - Font families applied globally + +## Resources + +- [Cloudscape Theming Documentation](https://cloudscape.design/foundation/visual-foundation/theming/) +- [Design Tokens Reference](https://cloudscape.design/foundation/visual-foundation/design-tokens/) diff --git a/pages/demos/common/adjust-body-padding.ts b/pages/demos/common/adjust-body-padding.ts new file mode 100644 index 0000000000..a0f058f242 --- /dev/null +++ b/pages/demos/common/adjust-body-padding.ts @@ -0,0 +1,13 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +export function adjustBodyPadding() { + const header = document.querySelector('#h'); + if (!header) { + throw new Error('Header were not found'); + } + const { height: headerHeight } = header.getBoundingClientRect(); + document.documentElement.style.scrollPaddingTop = `${headerHeight}px`; +} + +window.addEventListener('DOMContentLoaded', adjustBodyPadding); +window.addEventListener('resize', adjustBodyPadding); diff --git a/pages/demos/common/apply-mode.ts b/pages/demos/common/apply-mode.ts new file mode 100644 index 0000000000..b42b7bd154 --- /dev/null +++ b/pages/demos/common/apply-mode.ts @@ -0,0 +1,43 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +import { applyDensity, applyMode, Density, disableMotion, Mode } from '@cloudscape-design/global-styles'; + +import * as localStorage from './local-storage'; + +import '@cloudscape-design/global-styles/index.css'; +import './custom-font.css'; + +(window as any).disableMotionForTests = disableMotion; + +// always `true` in this design +export const isVisualRefresh = true; + +// Initialize density +export let currentDensity: Density = localStorage.load('Awsui-Density-Preference') ?? Density.Comfortable; +applyDensity(currentDensity); + +export function updateDensity(density: string) { + applyDensity(density as Density); + localStorage.save('Awsui-Density-Preference', density); + currentDensity = density as Density; +} + +// Initialize mode +export let currentMode: Mode = localStorage.load('Awsui-Mode-Preference') ?? Mode.Light; +applyMode(currentMode); + +export function updateMode(mode: string) { + applyMode(mode as Mode); + localStorage.save('Awsui-Mode-Preference', mode); + currentMode = mode as Mode; +} + +// Initialize direction +export let currentDirection: string = localStorage.load('Awsui-Direction-Preference') ?? 'ltr'; +document.documentElement.dir = currentDirection; + +export function updateDirection(direction: string) { + document.documentElement.dir = direction; + localStorage.save('Awsui-Direction-Preference', direction); + currentDirection = direction; +} diff --git a/pages/demos/common/apply-theme.ts b/pages/demos/common/apply-theme.ts new file mode 100644 index 0000000000..581450da19 --- /dev/null +++ b/pages/demos/common/apply-theme.ts @@ -0,0 +1,13 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +// Theming stripped out — not needed for exploration purposes + +export function applyCustomTheme(_customConfig?: Record): void {} +export function resetToDefaults(): void {} +export function useThemeComparison() { + return { + applyDirectionA: () => {}, + applyDirectionB: () => {}, + resetToDefault: () => {}, + }; +} diff --git a/pages/demos/common/aws-region-utils.ts b/pages/demos/common/aws-region-utils.ts new file mode 100644 index 0000000000..a1a0669f8b --- /dev/null +++ b/pages/demos/common/aws-region-utils.ts @@ -0,0 +1,104 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +export interface Region { + name: string; + code: string; +} + +export const regionsByLocation = { + 'United States': [ + { + name: 'N. Virginia', + code: 'us-east-1', + }, + { + name: 'Ohio', + code: 'us-east-2', + }, + { + name: 'N. California', + code: 'us-west-1', + }, + { + name: 'Oregon', + code: 'us-west-2', + }, + ], + 'Asia Pacific': [ + { + name: 'Mumbai', + code: 'ap-south-1', + }, + { + name: 'Osaka', + code: 'ap-northeast-3', + }, + { + name: 'Seoul', + code: 'ap-northeast-2', + }, + { + name: 'Singapore', + code: 'ap-southeast-1', + }, + { + name: 'Sydney', + code: 'ap-southeast-2', + }, + { + name: 'Tokyo', + code: 'ap-northeast-1', + }, + ], + Canada: [ + { + name: 'Central', + code: 'ca-central-1', + }, + ], + Europe: [ + { + name: 'Frankfurt', + code: 'eu-central-1', + }, + { + name: 'Ireland', + code: 'eu-west-1', + }, + { + name: 'London', + code: 'eu-west-2', + }, + { + name: 'Paris', + code: 'eu-west-3', + }, + { + name: 'Stockholm', + code: 'eu-north-1', + }, + ], + 'Middle East': [ + { + name: 'Bahrain', + code: 'me-south-1', + }, + { + name: 'UAE', + code: 'me-central-1', + }, + ], + 'South America': [ + { + name: 'São Paulo', + code: 'sa-east-1', + }, + ], +}; + +export function formatReadOnlyRegion(regionCode: Region['code']) { + const region = Object.values(regionsByLocation) + .flat() + .filter((region: Region) => region.code === regionCode)[0]; + return region ? `${region.name} (${region.code})` : regionCode; +} diff --git a/pages/demos/common/breadcrumbs.ts b/pages/demos/common/breadcrumbs.ts new file mode 100644 index 0000000000..929c36aabe --- /dev/null +++ b/pages/demos/common/breadcrumbs.ts @@ -0,0 +1,60 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +export const resourcesBreadcrumbs = [ + { + text: 'Service', + href: '#', + }, + { + text: 'Distributions', + href: '#', + }, +]; + +export const resourceDetailBreadcrumbs = [ + ...resourcesBreadcrumbs, + { + text: 'SLCCSMWOHOFUY0', + href: '#', + }, +]; + +export const resourceManageTagsBreadcrumbs = [ + ...resourceDetailBreadcrumbs, + { + text: 'Manage tags', + href: '#', + }, +]; + +export const resourceEditBreadcrumbs = [ + ...resourceDetailBreadcrumbs, + { + text: 'Edit', + href: '#', + }, +]; + +export const resourceCreateBreadcrumbs = [ + ...resourcesBreadcrumbs, + { + text: 'Create distribution', + href: '#', + }, +]; + +export const readFromS3Breadcrumbs = [ + ...resourceDetailBreadcrumbs, + { + text: 'Run simulation', + href: '#', + }, +]; + +export const writeToS3Breadcrumbs = [ + ...resourceDetailBreadcrumbs, + { + text: 'Create simulation', + href: '#', + }, +]; diff --git a/pages/demos/common/column-definitions-helper.ts b/pages/demos/common/column-definitions-helper.ts new file mode 100644 index 0000000000..cd92100d0d --- /dev/null +++ b/pages/demos/common/column-definitions-helper.ts @@ -0,0 +1,28 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +import { TableProps } from '@cloudscape-design/components/table'; + +export function addToColumnDefinitions>( + columnDefinitions: TableProps.ColumnDefinition[], + propertyName: K, + columns: Partial>[] = [] +) { + return columnDefinitions.map(colDef => { + const column = columns.find(col => col.id === colDef.id); + return { + ...colDef, + [propertyName]: (column && column[propertyName]) || colDef[propertyName], + }; + }); +} + +export function mapWithColumnDefinitionIds>( + columnDefinitions: TableProps.ColumnDefinition[], + propertyName: K, + items: TableProps.ColumnDefinition[K][] +) { + return columnDefinitions.map(({ id }, i) => ({ + id, + [propertyName]: items[i], + })); +} diff --git a/pages/demos/common/custom-font.css b/pages/demos/common/custom-font.css new file mode 100644 index 0000000000..8bdbbe85a2 --- /dev/null +++ b/pages/demos/common/custom-font.css @@ -0,0 +1,26 @@ +/* + Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. + SPDX-License-Identifier: Apache-2.0 +*/ +/* Noto Sans variable webfont declarations */ +@font-face { + font-family: 'Noto Sans'; + src: url('./fonts/NotoSans-VariableFont_wdth,wght.ttf') format('truetype-variations'); + font-weight: 100 900; + font-stretch: 62.5% 100%; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'Noto Sans'; + src: url('./fonts/NotoSans-Italic-VariableFont_wdth,wght.ttf') format('truetype-variations'); + font-weight: 100 900; + font-stretch: 62.5% 100%; + font-style: italic; + font-display: swap; +} + +/* Default font-stretch for Noto Sans */ +:root { + font-stretch: 96%; +} diff --git a/pages/demos/common/fonts/AmazonEmberDisplay_Bd.ttf b/pages/demos/common/fonts/AmazonEmberDisplay_Bd.ttf new file mode 100644 index 0000000000..18d2fec4ee Binary files /dev/null and b/pages/demos/common/fonts/AmazonEmberDisplay_Bd.ttf differ diff --git a/pages/demos/common/fonts/AmazonEmberDisplay_BdIt.ttf b/pages/demos/common/fonts/AmazonEmberDisplay_BdIt.ttf new file mode 100644 index 0000000000..b9758e17a8 Binary files /dev/null and b/pages/demos/common/fonts/AmazonEmberDisplay_BdIt.ttf differ diff --git a/pages/demos/common/fonts/AmazonEmberDisplay_Md.ttf b/pages/demos/common/fonts/AmazonEmberDisplay_Md.ttf new file mode 100644 index 0000000000..6855325401 Binary files /dev/null and b/pages/demos/common/fonts/AmazonEmberDisplay_Md.ttf differ diff --git a/pages/demos/common/fonts/AmazonEmberDisplay_MdIt.ttf b/pages/demos/common/fonts/AmazonEmberDisplay_MdIt.ttf new file mode 100644 index 0000000000..f93be27842 Binary files /dev/null and b/pages/demos/common/fonts/AmazonEmberDisplay_MdIt.ttf differ diff --git a/pages/demos/common/fonts/AmazonEmberDisplay_Rg.ttf b/pages/demos/common/fonts/AmazonEmberDisplay_Rg.ttf new file mode 100644 index 0000000000..b5b38fe0de Binary files /dev/null and b/pages/demos/common/fonts/AmazonEmberDisplay_Rg.ttf differ diff --git a/pages/demos/common/fonts/AmazonEmberDisplay_RgIt.ttf b/pages/demos/common/fonts/AmazonEmberDisplay_RgIt.ttf new file mode 100644 index 0000000000..0e01f86b7e Binary files /dev/null and b/pages/demos/common/fonts/AmazonEmberDisplay_RgIt.ttf differ diff --git a/pages/demos/common/fonts/NotoSans-Bold.ttf b/pages/demos/common/fonts/NotoSans-Bold.ttf new file mode 100644 index 0000000000..07f0d257e3 Binary files /dev/null and b/pages/demos/common/fonts/NotoSans-Bold.ttf differ diff --git a/pages/demos/common/fonts/NotoSans-Italic-VariableFont_wdth,wght.ttf b/pages/demos/common/fonts/NotoSans-Italic-VariableFont_wdth,wght.ttf new file mode 100644 index 0000000000..6245ba014b Binary files /dev/null and b/pages/demos/common/fonts/NotoSans-Italic-VariableFont_wdth,wght.ttf differ diff --git a/pages/demos/common/fonts/NotoSans-Italic.ttf b/pages/demos/common/fonts/NotoSans-Italic.ttf new file mode 100644 index 0000000000..d9b9e148c8 Binary files /dev/null and b/pages/demos/common/fonts/NotoSans-Italic.ttf differ diff --git a/pages/demos/common/fonts/NotoSans-Medium.ttf b/pages/demos/common/fonts/NotoSans-Medium.ttf new file mode 100644 index 0000000000..a44124bb36 Binary files /dev/null and b/pages/demos/common/fonts/NotoSans-Medium.ttf differ diff --git a/pages/demos/common/fonts/NotoSans-MediumItalic.ttf b/pages/demos/common/fonts/NotoSans-MediumItalic.ttf new file mode 100644 index 0000000000..467af1b3a5 Binary files /dev/null and b/pages/demos/common/fonts/NotoSans-MediumItalic.ttf differ diff --git a/pages/demos/common/fonts/NotoSans-Regular.ttf b/pages/demos/common/fonts/NotoSans-Regular.ttf new file mode 100644 index 0000000000..4bac02f2f4 Binary files /dev/null and b/pages/demos/common/fonts/NotoSans-Regular.ttf differ diff --git a/pages/demos/common/fonts/NotoSans-VariableFont_wdth,wght.ttf b/pages/demos/common/fonts/NotoSans-VariableFont_wdth,wght.ttf new file mode 100644 index 0000000000..9530d84d56 Binary files /dev/null and b/pages/demos/common/fonts/NotoSans-VariableFont_wdth,wght.ttf differ diff --git a/pages/demos/common/image-example-1.png b/pages/demos/common/image-example-1.png new file mode 100644 index 0000000000..353289e333 Binary files /dev/null and b/pages/demos/common/image-example-1.png differ diff --git a/pages/demos/common/image-example-2.png b/pages/demos/common/image-example-2.png new file mode 100644 index 0000000000..9c0dbc8287 Binary files /dev/null and b/pages/demos/common/image-example-2.png differ diff --git a/pages/demos/common/image-example-3.png b/pages/demos/common/image-example-3.png new file mode 100644 index 0000000000..5720f567b9 Binary files /dev/null and b/pages/demos/common/image-example-3.png differ diff --git a/pages/demos/common/local-storage.ts b/pages/demos/common/local-storage.ts new file mode 100644 index 0000000000..d02a5b75a2 --- /dev/null +++ b/pages/demos/common/local-storage.ts @@ -0,0 +1,41 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +declare global { + interface Window { + AwsUiConsent: { + getConsentCookie: () => { functional?: boolean }; + }; + } +} + +const hasConsent = () => { + if (typeof window.AwsUiConsent === 'undefined') { + return false; + } + + const cookieConsent = window.AwsUiConsent.getConsentCookie(); + return cookieConsent?.functional ?? false; +}; + +export const save = (key: string, value: unknown) => { + if (hasConsent()) { + localStorage.setItem(key, JSON.stringify(value)); + } +}; + +export const remove = (key: string) => localStorage.removeItem(key); + +export const load = (key: string): T | undefined => { + const value = localStorage.getItem(key); + try { + if (!value) { + return undefined; + } + return JSON.parse(value) as T; + } catch (e) { + console.warn( + `⚠️ The ${key} value that is stored in localStorage is incorrect. Try to remove the value ${key} from localStorage and reload the page` + ); + return undefined; + } +}; diff --git a/pages/demos/common/logo.svg b/pages/demos/common/logo.svg new file mode 100644 index 0000000000..eae2fb04e1 --- /dev/null +++ b/pages/demos/common/logo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/pages/demos/common/mount.tsx b/pages/demos/common/mount.tsx new file mode 100644 index 0000000000..f38768f6e3 --- /dev/null +++ b/pages/demos/common/mount.tsx @@ -0,0 +1,13 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +// react-dom/client not available in React 16 — using legacy ReactDOM.render +import React from 'react'; +import ReactDOM from 'react-dom'; + +export function mount(element: React.ReactElement, container: HTMLElement): void { + ReactDOM.render(element, container); +} + +export function unmount(container: HTMLElement): void { + ReactDOM.unmountComponentAtNode(container); +} diff --git a/pages/demos/common/parse-property-filter.ts b/pages/demos/common/parse-property-filter.ts new file mode 100644 index 0000000000..131522dabe --- /dev/null +++ b/pages/demos/common/parse-property-filter.ts @@ -0,0 +1,26 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +// zod replaced with a lightweight JSON parse + type cast (zod not available in this environment) +import { PropertyFilterQuery } from '@cloudscape-design/collection-hooks'; + +export const parsePropertyFilterQuery = (stringifiedPropertyFilter: string): PropertyFilterQuery => { + const defaultQuery: PropertyFilterQuery = { operation: 'and', tokens: [] }; + + if (!stringifiedPropertyFilter) { + return defaultQuery; + } + try { + const json = JSON.parse(stringifiedPropertyFilter); + if ( + json && + typeof json === 'object' && + Array.isArray(json.tokens) && + (json.operation === 'and' || json.operation === 'or') + ) { + return json as PropertyFilterQuery; + } + return defaultQuery; + } catch { + return defaultQuery; + } +}; diff --git a/pages/demos/common/property-filter-operators.ts b/pages/demos/common/property-filter-operators.ts new file mode 100644 index 0000000000..f5d1483001 --- /dev/null +++ b/pages/demos/common/property-filter-operators.ts @@ -0,0 +1,10 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +export const stringOperators = [':', '!:', '=', '!=', '^', '!^']; + +export const enumOperators = [ + { operator: '=', tokenType: 'enum' }, + { operator: '!=', tokenType: 'enum' }, + ':', + '!:', +] as const; diff --git a/pages/demos/common/property-filter-type-guards.ts b/pages/demos/common/property-filter-type-guards.ts new file mode 100644 index 0000000000..163a5b0dd6 --- /dev/null +++ b/pages/demos/common/property-filter-type-guards.ts @@ -0,0 +1,17 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +import { PropertyFilterProps } from '@cloudscape-design/components/property-filter'; + +export function isTokenGroup( + tokenOrGroup: PropertyFilterProps.Token | PropertyFilterProps.TokenGroup +): tokenOrGroup is PropertyFilterProps.TokenGroup { + const key: keyof PropertyFilterProps.TokenGroup = 'operation'; + return key in tokenOrGroup; +} + +export function isToken( + tokenOrGroup: PropertyFilterProps.Token | PropertyFilterProps.TokenGroup +): tokenOrGroup is PropertyFilterProps.Token { + const key: keyof PropertyFilterProps.Token = 'operator'; + return key in tokenOrGroup; +} diff --git a/pages/demos/common/s3-resource-selector/mock-data.ts b/pages/demos/common/s3-resource-selector/mock-data.ts new file mode 100644 index 0000000000..99c90bb5d5 --- /dev/null +++ b/pages/demos/common/s3-resource-selector/mock-data.ts @@ -0,0 +1,787 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +import { formatReadOnlyRegion } from '../aws-region-utils'; + +export type S3ErrorType = 'success' | 'error' | 'warning' | 'info'; + +export interface S3Error { + type: S3ErrorType; + content: string; + header?: string; +} + +export interface S3Resource { + Key?: string; + VersionId?: string; + IsFolder?: boolean; + LastModified?: string; + Name?: string; + CreationDate?: string; + Size?: number; + Region?: string; + __error?: S3Error; + __region?: string; + __versions?: S3Resource[]; + __folders?: S3Resource[]; + __objects?: S3Resource[]; +} + +export const amazonS3Data: S3Resource[] = [ + { + Name: 'bucket-enim', + CreationDate: 'May 02, 2019, 21:03:21 (UTC+02:00)', + __region: formatReadOnlyRegion('me-south-1'), + __folders: [], + __objects: [ + { + Key: 'neutrino-8ms.sim', + LastModified: 'January 16, 2020, 08:31:37 (UTC+01:00)', + Size: 37920746064365, + IsFolder: false, + __versions: [ + { + VersionId: 'a58deb0e-c9c1-4636-90e9-d63161ec95b8', + LastModified: 'June 27, 2019, 08:35:46 (UTC+02:00)', + Size: 73435821489602, + }, + { + VersionId: '0143a158-9c66-41f0-9111-31fa86db04c0', + LastModified: 'July 03, 2019, 11:55:42 (UTC+02:00)', + Size: 89834263902093, + }, + ], + }, + { + Key: 'neutrino-7ms.sim', + LastModified: 'July 27, 2019, 00:15:08 (UTC+02:00)', + Size: 52174744931208, + IsFolder: false, + __versions: [ + { + VersionId: '07be0720-44e9-4782-bb5b-a42a922bc900', + LastModified: 'June 13, 2019, 16:31:06 (UTC+02:00)', + Size: 66667698917012, + }, + { + VersionId: '3b94af6c-e7e7-4f10-b191-ad561c1a8ed9', + LastModified: 'May 28, 2019, 10:37:48 (UTC+02:00)', + Size: 109156784411653, + }, + { + VersionId: 'd0632c33-bb49-43cd-9c56-4369fba6704e', + LastModified: 'February 03, 2020, 21:49:36 (UTC+01:00)', + Size: 68883654768899, + }, + ], + }, + { + Key: 'quarks-3h.sim', + LastModified: 'January 06, 2020, 07:03:51 (UTC+01:00)', + Size: 105933574826161, + IsFolder: false, + __versions: [ + { + VersionId: '9217a7e9-ac01-4a5f-93d2-32e6cc4ea1f8', + LastModified: 'April 30, 2019, 01:49:01 (UTC+02:00)', + Size: 46528196001797, + }, + { + VersionId: '03cd823b-065c-4fa5-af2d-eda7909978ca', + LastModified: 'August 03, 2019, 10:31:39 (UTC+02:00)', + Size: 86297690115515, + }, + { + VersionId: 'eb1c4dc5-d832-4003-a936-8e33530d46f0', + LastModified: 'July 05, 2019, 13:18:17 (UTC+02:00)', + Size: 60075512470480, + }, + ], + }, + ], + }, + { + Name: 'bucket-ex', + CreationDate: 'September 07, 2019, 17:24:10 (UTC+02:00)', + __region: formatReadOnlyRegion('ca-central-1'), + __folders: [ + { + Key: 'simulation-nano-2019', + IsFolder: true, + __objects: [ + { + Key: 'quarks-8ms.sim', + LastModified: 'July 19, 2019, 03:59:07 (UTC+02:00)', + Size: 19939311060117, + IsFolder: false, + __versions: [ + { + VersionId: '5a089d13-f87a-45f3-8d7b-1117865b0aa0', + LastModified: 'February 19, 2020, 15:37:19 (UTC+01:00)', + Size: 94746267790554, + }, + ], + }, + ], + }, + ], + __objects: [], + }, + { + Name: 'bucket-qui', + CreationDate: 'February 06, 2020, 19:53:08 (UTC+01:00)', + __region: formatReadOnlyRegion('us-east-2'), + __folders: [ + { + Key: 'simulation-micro-2020', + IsFolder: true, + __objects: [ + { + Key: 'universe-5ms.sim', + LastModified: 'August 03, 2019, 00:16:17 (UTC+02:00)', + Size: 90011556476108, + IsFolder: false, + __versions: [ + { + VersionId: '64766fa1-5add-4a97-a8b5-c41f1f815ce4', + LastModified: 'June 18, 2019, 04:27:46 (UTC+02:00)', + Size: 20556208373429, + }, + { + VersionId: '762c4e1b-1f27-4596-b39d-e3b0effc96d1', + LastModified: 'May 24, 2019, 00:00:15 (UTC+02:00)', + Size: 95989434446720, + }, + ], + }, + { + Key: 'neutrino-6ns.sim', + LastModified: 'February 13, 2020, 08:20:34 (UTC+01:00)', + Size: 78630822188422, + IsFolder: false, + __versions: [ + { + VersionId: 'e4fb9005-9694-47f3-9fdf-b59f1a472193', + LastModified: 'January 22, 2020, 15:00:05 (UTC+01:00)', + Size: 8996181899790, + }, + { + VersionId: '34bbc574-9a26-4442-b537-805862c334d2', + LastModified: 'September 14, 2019, 23:40:33 (UTC+02:00)', + Size: 41235829117335, + }, + ], + __error: { + type: 'warning', + header: 'Object versions were not retrieved', + content: + 'You might not have permissions to retrieve object versions. Contact your account administrator. If no version ID is specified, the most recent version of the object is used.', + }, + }, + ], + }, + { + Key: 'simulation-macro-2018', + IsFolder: true, + __objects: [ + { + Key: 'collision-3ms.sim', + LastModified: 'May 09, 2019, 00:34:13 (UTC+02:00)', + Size: 26142214013937, + IsFolder: false, + __versions: [ + { + VersionId: 'c3030b2a-82d0-46d0-92a0-4d5769004bd3', + LastModified: 'February 02, 2020, 04:43:04 (UTC+01:00)', + Size: 18678967047565, + }, + { + VersionId: '65882de2-b096-4db7-99cf-33517f4523c9', + LastModified: 'February 06, 2020, 06:29:59 (UTC+01:00)', + Size: 2855180158320, + }, + ], + }, + { + Key: 'particle-3ns.sim', + LastModified: 'January 26, 2020, 04:32:00 (UTC+01:00)', + Size: 47778118171289, + IsFolder: false, + __versions: [ + { + VersionId: 'd49b5f7d-5c00-4a68-8e2c-9d99725d0041', + LastModified: 'February 26, 2020, 13:39:51 (UTC+01:00)', + Size: 72290590842305, + }, + ], + }, + ], + }, + ], + __objects: [ + { + Key: 'galaxy-7s.sim', + LastModified: 'September 22, 2019, 06:26:54 (UTC+02:00)', + Size: 6308938201246, + IsFolder: false, + __versions: [ + { + VersionId: '256e42c1-69fc-4bbd-918d-bd91d24bf914', + LastModified: 'July 09, 2019, 04:29:47 (UTC+02:00)', + Size: 41098527276714, + }, + ], + }, + { + Key: 'black-hole-9h.sim', + LastModified: 'August 27, 2019, 02:41:44 (UTC+02:00)', + Size: 10634751861734, + IsFolder: false, + __versions: [ + { + VersionId: '683e5f24-fec0-4f75-bde5-590d5400fd48', + LastModified: 'August 28, 2019, 13:29:03 (UTC+02:00)', + Size: 30369384279742, + }, + ], + __error: { + type: 'warning', + header: 'Object versions were not retrieved', + content: + 'You might not have permissions to retrieve object versions. Contact your account administrator. If no version ID is specified, the most recent version of the object is used.', + }, + }, + { + Key: 'neutrino-3h.sim', + LastModified: 'October 03, 2019, 22:07:50 (UTC+02:00)', + Size: 103565543291848, + IsFolder: false, + __versions: [ + { + VersionId: 'de9ff369-3794-49a3-84ef-e60e4d72c84f', + LastModified: 'November 24, 2019, 22:56:50 (UTC+01:00)', + Size: 5825470398596, + }, + { + VersionId: '799345ac-0d07-4ad7-8dc8-e5d3bbc04d94', + LastModified: 'February 20, 2020, 03:14:34 (UTC+01:00)', + Size: 21962938052707, + }, + ], + }, + { + Key: 'collision-9h.sim', + LastModified: 'December 26, 2019, 20:22:14 (UTC+01:00)', + Size: 52109667471797, + IsFolder: false, + __versions: [ + { + VersionId: '2219502a-dd02-4130-bc7e-ea497a2207b4', + LastModified: 'November 23, 2019, 17:57:05 (UTC+01:00)', + Size: 69041957033697, + }, + { + VersionId: '49c6aa4c-fadc-4fb6-a926-474b3546b67c', + LastModified: 'April 05, 2019, 17:46:34 (UTC+02:00)', + Size: 2822516626484, + }, + { + VersionId: '0f4db3ee-3774-4558-a358-797f2aa7b0dc', + LastModified: 'October 07, 2019, 13:18:01 (UTC+02:00)', + Size: 23417942110251, + }, + ], + }, + ], + }, + { + Name: 'bucket-officia', + CreationDate: 'August 28, 2019, 01:56:08 (UTC+02:00)', + __region: formatReadOnlyRegion('ca-central-1'), + __folders: [], + __objects: [ + { + Key: 'particle-1ns.sim', + LastModified: 'June 16, 2019, 00:43:28 (UTC+02:00)', + Size: 10829014115157, + IsFolder: false, + __versions: [ + { + VersionId: 'b61170ef-702e-46f2-b37f-f61d587b6165', + LastModified: 'October 31, 2019, 22:00:46 (UTC+01:00)', + Size: 64668978309605, + }, + ], + __error: { + type: 'warning', + header: 'Object versions were not retrieved', + content: + 'You might not have permissions to retrieve object versions. Contact your account administrator. If no version ID is specified, the most recent version of the object is used.', + }, + }, + { + Key: 'particle-6h.sim', + LastModified: 'September 28, 2019, 02:18:52 (UTC+02:00)', + Size: 94614592401063, + IsFolder: false, + __versions: [ + { + VersionId: 'd90913ca-1980-4939-bd8e-c0781b5eee38', + LastModified: 'September 14, 2019, 06:56:25 (UTC+02:00)', + Size: 85676438589901, + }, + ], + }, + { + Key: 'wave-function-4ns.sim', + LastModified: 'May 30, 2019, 08:04:33 (UTC+02:00)', + Size: 34812060078660, + IsFolder: false, + __versions: [ + { + VersionId: '4e5ba8cb-fbf7-4b16-b983-5e1b8ef753f7', + LastModified: 'October 28, 2019, 06:51:49 (UTC+01:00)', + Size: 54315002078159, + }, + ], + __error: { + type: 'warning', + header: 'Object versions were not retrieved', + content: + 'You might not have permissions to retrieve object versions. Contact your account administrator. If no version ID is specified, the most recent version of the object is used.', + }, + }, + ], + }, + { + Name: 'bucket-sunt', + CreationDate: 'April 27, 2019, 21:43:48 (UTC+02:00)', + __region: formatReadOnlyRegion('ca-central-1'), + __folders: [ + { + Key: 'simulation-micro-2020', + IsFolder: true, + __objects: [ + { + Key: 'quarks-6h.sim', + LastModified: 'November 18, 2019, 10:46:29 (UTC+01:00)', + Size: 106359271956497, + IsFolder: false, + __versions: [ + { + VersionId: 'f1c027d3-4715-4e25-86bf-48ec8824a914', + LastModified: 'February 07, 2020, 02:49:03 (UTC+01:00)', + Size: 39554506575775, + }, + { + VersionId: '9e26c00f-f1a5-423b-b700-25db0eec1790', + LastModified: 'November 25, 2019, 04:43:14 (UTC+01:00)', + Size: 84434803342481, + }, + ], + }, + { + Key: 'galaxy-3ns.sim', + LastModified: 'May 23, 2019, 00:53:38 (UTC+02:00)', + Size: 70986901548844, + IsFolder: false, + __versions: [ + { + VersionId: 'c4c7b2fa-a7ed-4f85-a5ee-8d9bdc35bf50', + LastModified: 'September 07, 2019, 14:37:54 (UTC+02:00)', + Size: 51792527139512, + }, + { + VersionId: 'c54fe983-88a0-477b-94fc-3f6b0c989ece', + LastModified: 'December 23, 2019, 08:02:46 (UTC+01:00)', + Size: 100133529814935, + }, + { + VersionId: '9324110b-df4f-4554-9411-f93b7bb0205f', + LastModified: 'January 15, 2020, 05:31:14 (UTC+01:00)', + Size: 46554585862931, + }, + ], + }, + { + Key: 'proton-9ms.sim', + LastModified: 'September 23, 2019, 12:10:34 (UTC+02:00)', + Size: 108282301250860, + IsFolder: false, + __versions: [ + { + VersionId: 'c57acd0c-cc6c-47d1-9de2-41e2298c72be', + LastModified: 'May 13, 2019, 22:14:40 (UTC+02:00)', + Size: 80122783667995, + }, + { + VersionId: 'a6df4373-1f4d-49d0-afd8-020ed90e91a2', + LastModified: 'April 06, 2019, 12:03:06 (UTC+02:00)', + Size: 25188698091128, + }, + ], + }, + { + Key: 'universe-4ns.sim', + LastModified: 'November 28, 2019, 15:50:44 (UTC+01:00)', + Size: 76504142446230, + IsFolder: false, + __versions: [ + { + VersionId: '4b83a878-2188-4ca3-acd0-46a05d883cec', + LastModified: 'July 19, 2019, 22:59:21 (UTC+02:00)', + Size: 15103208117551, + }, + { + VersionId: '0f723d37-c389-4cb0-b79f-e1f019f6c022', + LastModified: 'September 07, 2019, 18:58:14 (UTC+02:00)', + Size: 86319635397237, + }, + { + VersionId: '12fba0eb-a319-4f8b-9599-2046d7fd2e4c', + LastModified: 'May 24, 2019, 03:10:49 (UTC+02:00)', + Size: 39502808503195, + }, + ], + __error: { + type: 'warning', + header: 'Object versions were not retrieved', + content: + 'You might not have permissions to retrieve object versions. Contact your account administrator. If no version ID is specified, the most recent version of the object is used.', + }, + }, + { + Key: 'quarks-8s.sim', + LastModified: 'October 26, 2019, 15:13:14 (UTC+02:00)', + Size: 93225230902384, + IsFolder: false, + __versions: [ + { + VersionId: 'c8187dd9-3cc5-4223-a1b2-2f16bd79f9f0', + LastModified: 'April 15, 2019, 18:55:05 (UTC+02:00)', + Size: 99875918538659, + }, + ], + }, + { + Key: 'electron-4ms.sim', + LastModified: 'February 21, 2020, 13:51:47 (UTC+01:00)', + Size: 21040657606167, + IsFolder: false, + __versions: [ + { + VersionId: 'e3a13d94-ea2d-44d9-a7b2-5c7d76afba64', + LastModified: 'February 02, 2020, 01:04:32 (UTC+01:00)', + Size: 76861688060038, + }, + ], + }, + ], + }, + { + Key: 'simulation-earth-2017', + IsFolder: true, + __objects: [ + { + Key: 'planet-7h.sim', + LastModified: 'September 09, 2019, 12:29:46 (UTC+02:00)', + Size: 59078463273866, + IsFolder: false, + __versions: [ + { + VersionId: 'e811222b-16c9-434b-b0ae-7a31b8573e27', + LastModified: 'June 14, 2019, 01:09:03 (UTC+02:00)', + Size: 102409007876807, + }, + { + VersionId: '93eb8f09-feef-46c9-8804-9aae1dc99059', + LastModified: 'July 02, 2019, 05:05:51 (UTC+02:00)', + Size: 57767169670664, + }, + ], + __error: { + type: 'warning', + header: 'Object versions were not retrieved', + content: + 'You might not have permissions to retrieve object versions. Contact your account administrator. If no version ID is specified, the most recent version of the object is used.', + }, + }, + { + Key: 'electron-4s.sim', + LastModified: 'May 01, 2019, 18:00:39 (UTC+02:00)', + Size: 32661570516706, + IsFolder: false, + __versions: [ + { + VersionId: '83c431f4-058f-423a-82c6-91ac1e71b095', + LastModified: 'September 10, 2019, 14:11:58 (UTC+02:00)', + Size: 43752364458694, + }, + { + VersionId: '7d827c3d-b8cd-40a0-977e-a41a1a32693d', + LastModified: 'June 01, 2019, 08:25:36 (UTC+02:00)', + Size: 19349202804892, + }, + { + VersionId: '4cd67a3f-7c4e-4548-b2be-920e0d43c7ce', + LastModified: 'May 27, 2019, 19:09:29 (UTC+02:00)', + Size: 91897348630517, + }, + ], + }, + { + Key: 'universe-8ms.sim', + LastModified: 'December 28, 2019, 22:07:30 (UTC+01:00)', + Size: 106162635791268, + IsFolder: false, + __versions: [ + { + VersionId: '4ab60e02-6b0f-4439-a543-c33f0c0dedb8', + LastModified: 'December 06, 2019, 12:00:27 (UTC+01:00)', + Size: 63268847079353, + }, + { + VersionId: '47236b20-63c7-4454-b771-d206db2dc4dd', + LastModified: 'February 01, 2020, 16:02:17 (UTC+01:00)', + Size: 31160155834069, + }, + { + VersionId: '80ff9b1d-6ca4-4360-b381-829bbe70bf68', + LastModified: 'October 23, 2019, 23:01:07 (UTC+02:00)', + Size: 20034922977201, + }, + ], + __error: { + type: 'warning', + header: 'Object versions were not retrieved', + content: + 'You might not have permissions to retrieve object versions. Contact your account administrator. If no version ID is specified, the most recent version of the object is used.', + }, + }, + ], + }, + { + Key: 'simulation-micro-2017', + IsFolder: true, + __objects: [ + { + Key: 'wave-function-4s.sim', + LastModified: 'September 20, 2019, 08:25:42 (UTC+02:00)', + Size: 4635095260666, + IsFolder: false, + __versions: [ + { + VersionId: '370c7ded-762e-481c-8158-6041d556cb79', + LastModified: 'April 09, 2019, 15:10:52 (UTC+02:00)', + Size: 77800301868954, + }, + { + VersionId: '07308409-c9bb-43e5-bf00-94b82ddb39cf', + LastModified: 'March 21, 2020, 14:14:59 (UTC+01:00)', + Size: 39993963705939, + }, + { + VersionId: '4e97a35b-9793-49e4-be31-5eb8bc4e51ec', + LastModified: 'May 27, 2019, 05:58:51 (UTC+02:00)', + Size: 8105428507553, + }, + ], + __error: { + type: 'warning', + header: 'Object versions were not retrieved', + content: + 'You might not have permissions to retrieve object versions. Contact your account administrator. If no version ID is specified, the most recent version of the object is used.', + }, + }, + { + Key: 'collision-2ns.sim', + LastModified: 'November 02, 2019, 04:45:55 (UTC+01:00)', + Size: 97994481320612, + IsFolder: false, + __versions: [ + { + VersionId: '260f4d5f-5ab9-47e3-a7c4-9e84333476fa', + LastModified: 'December 31, 2019, 19:06:34 (UTC+01:00)', + Size: 37689275136622, + }, + ], + }, + { + Key: 'quarks-9s.sim', + LastModified: 'March 30, 2019, 19:22:12 (UTC+01:00)', + Size: 85647494511064, + IsFolder: false, + __versions: [ + { + VersionId: '6a51fe83-c08c-445b-9f29-6adf048bdaa2', + LastModified: 'January 15, 2020, 22:56:02 (UTC+01:00)', + Size: 30781616068019, + }, + ], + }, + { + Key: 'quarks-6ns.sim', + LastModified: 'August 16, 2019, 07:59:32 (UTC+02:00)', + Size: 52765301613036, + IsFolder: false, + __versions: [ + { + VersionId: '501ab6dd-189d-4735-99fd-363f3aeb180e', + LastModified: 'January 15, 2020, 07:14:24 (UTC+01:00)', + Size: 95634361641682, + }, + { + VersionId: 'f0ad7796-8179-468b-ad33-bd0e8a2cd65f', + LastModified: 'May 26, 2019, 18:38:37 (UTC+02:00)', + Size: 69215336625306, + }, + ], + }, + ], + }, + ], + __objects: [ + { + Key: 'galaxy-5ms.sim', + LastModified: 'May 05, 2019, 12:13:50 (UTC+02:00)', + Size: 38047378251541, + IsFolder: false, + __versions: [ + { + VersionId: 'd27bf6aa-1474-4c45-829f-2e35514b8d14', + LastModified: 'November 10, 2019, 03:25:21 (UTC+01:00)', + Size: 13258208343015, + }, + { + VersionId: 'df069dff-1850-4f45-ae88-5302e2b52f0d', + LastModified: 'October 15, 2019, 20:43:37 (UTC+02:00)', + Size: 95859176772021, + }, + ], + __error: { + type: 'warning', + header: 'Object versions were not retrieved', + content: + 'You might not have permissions to retrieve object versions. Contact your account administrator. If no version ID is specified, the most recent version of the object is used.', + }, + }, + { + Key: 'electron-8ms.sim', + LastModified: 'June 21, 2019, 02:09:14 (UTC+02:00)', + Size: 89360510446416, + IsFolder: false, + __versions: [ + { + VersionId: 'b49d5c24-fde0-440a-83f6-66bd12fef1dc', + LastModified: 'March 12, 2020, 01:40:00 (UTC+01:00)', + Size: 51834954407082, + }, + { + VersionId: 'ce3f70e5-a9ac-4a3f-b8ea-8413c919dcf6', + LastModified: 'August 05, 2019, 12:31:32 (UTC+02:00)', + Size: 40834130158910, + }, + { + VersionId: '8411a60c-68dd-4654-a0fe-228130bfe8c9', + LastModified: 'November 08, 2019, 17:58:08 (UTC+01:00)', + Size: 1809958398426, + }, + ], + }, + ], + }, + { + Name: 'bucket-et', + CreationDate: 'May 06, 2019, 21:59:30 (UTC+02:00)', + __region: formatReadOnlyRegion('us-east-2'), + __folders: [], + __objects: [ + { + Key: 'proton-2s.sim', + LastModified: 'November 13, 2019, 12:08:29 (UTC+01:00)', + Size: 37182367396013, + IsFolder: false, + __versions: [ + { + VersionId: '779e2995-b0d6-413e-994d-1d433bfbbc53', + LastModified: 'October 28, 2019, 22:58:18 (UTC+01:00)', + Size: 16335174262801, + }, + { + VersionId: 'da80349e-3491-4613-a639-3baa8bf53dfe', + LastModified: 'September 29, 2019, 03:34:14 (UTC+02:00)', + Size: 87535838805693, + }, + ], + }, + { + Key: 'black-hole-2ms.sim', + LastModified: 'June 20, 2019, 16:47:27 (UTC+02:00)', + Size: 42601316313128, + IsFolder: false, + __versions: [ + { + VersionId: '2d090a95-88d7-4dc6-8763-e94851fd1073', + LastModified: 'July 28, 2019, 05:35:51 (UTC+02:00)', + Size: 13713137607672, + }, + ], + }, + { + Key: 'black-hole-2h.sim', + LastModified: 'February 11, 2020, 02:57:53 (UTC+01:00)', + Size: 7133938953874, + IsFolder: false, + __versions: [ + { + VersionId: '034e9a82-6816-40c6-a43a-a74a92e22b45', + LastModified: 'June 23, 2019, 03:48:48 (UTC+02:00)', + Size: 32064198673433, + }, + ], + __error: { + type: 'warning', + header: 'Object versions were not retrieved', + content: + 'You might not have permissions to retrieve object versions. Contact your account administrator. If no version ID is specified, the most recent version of the object is used.', + }, + }, + { + Key: 'planet-2ns.sim', + LastModified: 'January 13, 2020, 05:04:08 (UTC+01:00)', + Size: 55560768156458, + IsFolder: false, + __versions: [ + { + VersionId: '32425748-90c2-4b3f-9594-381525d49c5d', + LastModified: 'June 21, 2019, 12:47:54 (UTC+02:00)', + Size: 54042968807744, + }, + { + VersionId: '786e16c4-279c-44f7-9b45-c5c68fa6a1b3', + LastModified: 'April 12, 2019, 13:05:03 (UTC+02:00)', + Size: 21411431351739, + }, + ], + }, + { + Key: 'proton-2ms.sim', + LastModified: 'September 09, 2019, 06:06:40 (UTC+02:00)', + Size: 46813371522926, + IsFolder: false, + __versions: [ + { + VersionId: '56b02bd7-5ffe-4f29-a8ee-fea8779f2ff0', + LastModified: 'December 26, 2019, 05:59:39 (UTC+01:00)', + Size: 59437872996459, + }, + ], + __error: { + type: 'warning', + header: 'Object versions were not retrieved', + content: + 'You might not have permissions to retrieve object versions. Contact your account administrator. If no version ID is specified, the most recent version of the object is used.', + }, + }, + ], + }, +]; diff --git a/pages/demos/common/s3-resource-selector/mock-request.ts b/pages/demos/common/s3-resource-selector/mock-request.ts new file mode 100644 index 0000000000..9f2d7130b8 --- /dev/null +++ b/pages/demos/common/s3-resource-selector/mock-request.ts @@ -0,0 +1,86 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +import { S3ResourceSelectorProps } from '@cloudscape-design/components/s3-resource-selector'; + +import { amazonS3Data, S3Error, S3ErrorType, S3Resource } from './mock-data'; + +type ResourceType = 'buckets' | 'objects' | 'versions'; +type ChildResourceKeys = '__objects' | '__versions' | '__folders'; + +export class S3FetchError extends Error { + constructor(error: S3Error) { + super(error.content); + this.type = error.type; + this.header = error.header; + } + + type: S3ErrorType; + header: string | undefined; +} + +amazonS3Data.map(bucket => { + bucket.__objects = [...(bucket.__folders ?? []), ...(bucket.__objects ?? [])]; +}); +const randomDelay = (min = 500) => ~~(Math.random() * 500) + min; + +const findItem = (items: S3Resource[], name: string, itemsType: S3ResourceSelectorProps.SelectableItems) => { + const item = items.filter(item => item.Name === name || item.Key === name)[0]; + if (!item) { + throw `"${name}" ${itemsType.substring(0, itemsType.length - 1)} doesn't exist`; + } + return item; +}; + +const getItemsType = (item: S3Resource): ResourceType => { + return Object.keys(item) + .filter(key => key === '__objects' || key === '__versions')[0] + .replace('__', '') as ResourceType; +}; + +export const getItems = (bucket?: string, path?: string): Promise => { + const entities: string[] = []; + if (bucket) { + entities.push(bucket); + } + if (path && path.length > 0) { + entities.push(...path.split('/')); + } + + let items: S3Resource[] = amazonS3Data; + let itemsType: ResourceType = 'buckets'; + let item: S3Resource; + + for (const entity of entities) { + try { + item = findItem(items, entity, itemsType); + } catch (e) { + throw new S3FetchError({ + content: `Resource "s3://${bucket}/${path}" cannot be found: ${e}`, + type: 'error', + }); + } + itemsType = getItemsType(item); + if (item.__error) { + const error = new S3FetchError(item.__error); + error.type = item.__error.type; + error.header = item.__error.header; + throw error; + } + items = item[('__' + itemsType) as ChildResourceKeys] ?? []; + } + + return new Promise(resolve => { + setTimeout(() => { + resolve(items); + }, randomDelay()); + }); +}; + +export const requestAsyncRegions = (item: S3Resource): Promise => { + return new Promise(resolve => { + setTimeout(() => { + item.Region = item.__region; + resolve(); + }, randomDelay(1000)); + }); +}; diff --git a/pages/demos/common/theme-cw.ts b/pages/demos/common/theme-cw.ts new file mode 100644 index 0000000000..60b06c328b --- /dev/null +++ b/pages/demos/common/theme-cw.ts @@ -0,0 +1,853 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 + +// ============================================================================ +// Theme for new CW +// ============================================================================ + +export function generateThemeConfigCW( + customAccentColor?: { light: string; dark: string }, + customAccentSubtleHover?: { light: string; dark: string } +) { + const headingFontWeight = '700'; + + const colorSelectedAccentSubtleHover = { light: '#EBEBF0', dark: '#131920' }; + + // Toned down text color + const colorTextBodyDefault = { light: '#0f141a', dark: '#CCCCD1' }; + + return { + tokens: { + fontFamilyBase: "'Amazon Ember', 'Helvetica Neue', Roboto, Arial, sans-serif", + colorTextBodyDefault: colorTextBodyDefault, + + // ======================================================================== + // BUTTONS - Normal + // ======================================================================== + colorBorderButtonNormalDefault: { light: '#424650', dark: '#656871' }, + colorBorderButtonNormalHover: { light: '#424650', dark: '#656871' }, + colorBorderButtonNormalActive: { light: '#424650', dark: '#656871' }, + + colorBackgroundButtonNormalDefault: { light: '#FFFFFF', dark: '#333843' }, + colorBackgroundButtonNormalHover: { light: '#F6F6F9', dark: '#424650' }, + colorBackgroundButtonNormalActive: { light: '#EBEBF0', dark: '#333843' }, + + colorTextButtonNormalDefault: { light: '#333843', dark: '#DEDEE3' }, + colorTextButtonNormalHover: { light: '#333843', dark: '#DEDEE3' }, + colorTextButtonNormalActive: { light: '#333843', dark: '#DEDEE3' }, + + colorBackgroundSegmentDefault: { light: 'transparent', dark: 'transparent' }, + + // ======================================================================== + // BUTTONS - Primary + // ======================================================================== + colorBackgroundButtonPrimaryDefault: { light: '#ff9900', dark: '#ff9900' }, + colorBackgroundButtonPrimaryHover: { light: '#fa6f00', dark: '#fa6f00' }, + colorBackgroundButtonPrimaryActive: { light: '#ff9900', dark: '#ff9900' }, + + colorTextButtonPrimaryDefault: '#0f141a', + colorTextButtonPrimaryHover: '#0f141a', + colorTextButtonPrimaryActive: '#0f141a', + + // ======================================================================== + // BUTTONS - Link + // ======================================================================== + colorBackgroundButtonLinkHover: { light: '#F6F6F9', dark: '#333843' }, + colorBackgroundButtonLinkActive: colorSelectedAccentSubtleHover, + + colorTextLinkButtonNormalDefault: { light: '#006CE0', dark: '#42B4FF' }, + + // ======================================================================== + // BUTTONS - Toggle + // ======================================================================== + colorBackgroundToggleButtonNormalPressed: { light: '#D1F1FF', dark: '#333843' }, + colorBorderToggleButtonNormalPressed: { light: '#006CE0', dark: '#42B4FF' }, + colorTextToggleButtonNormalPressed: { light: '#002A66', dark: '#75CFFF' }, + + // ======================================================================== + // CONTROLS - Checkboxes, Radio, Toggle + // ======================================================================== + colorBackgroundControlChecked: { light: '#006CE0', dark: '#42B4FF' }, + //colorBackgroundToggleCheckedDisabled: colorSelectedAccentDisabled, + + // ======================================================================== + // LINKS & TEXT + // ======================================================================== + colorTextLinkDefault: colorTextBodyDefault, + colorTextLinkHover: { light: '#424650', dark: '#FFFFFF' }, + colorTextLinkSecondaryDefault: { light: '#006CE0', dark: '#42B4FF' }, + colorTextLinkSecondaryHover: { light: '#002A66', dark: '#75CFFF' }, + colorTextLinkInfoDefault: { light: '#006CE0', dark: '#42B4FF' }, + colorTextLinkInfoHover: { light: '#002A66', dark: '#75CFFF' }, + colorTextAccent: { light: '#006CE0', dark: '#42B4FF' }, + + // ======================================================================== + // SELECTION & FOCUS + // ======================================================================== + colorBorderItemFocused: { light: '#006CE0', dark: '#42B4FF' }, + colorBorderItemSelected: { light: '#006CE0', dark: '#42B4FF' }, + colorBackgroundItemSelected: { light: '#F0FBFF', dark: '#001129' }, + colorBackgroundLayoutToggleSelectedDefault: { light: '#006CE0', dark: '#42B4FF' }, + + // ======================================================================== + // SEGMENTS & TABS + // ======================================================================== + colorBackgroundSegmentActive: { light: '#1b232d', dark: '#F9F9FB' }, + + // ======================================================================== + // SLIDER + // ======================================================================== + colorBackgroundSliderRangeDefault: { light: '#006CE0', dark: '#42B4FF' }, + colorBackgroundSliderHandleDefault: { light: '#006CE0', dark: '#42B4FF' }, + + // ======================================================================== + // PROGRESS BAR + // ======================================================================== + colorBackgroundProgressBarValueDefault: { light: '#006CE0', dark: '#42B4FF' }, + + // ======================================================================== + // NOTIFICATIONS + // ======================================================================== + colorTextNotificationDefault: { light: '#ffffff', dark: '#ffffff' }, + + // ======================================================================== + // STATUS + // ======================================================================== + colorTextStatusInfo: { light: '#006CE0', dark: '#42B4FF' }, + + colorTextDropdownItemFilterMatch: { light: '#006CE0', dark: '#42B4FF' }, + colorBackgroundDropdownItemFilterMatch: { light: '#F3F3F7', dark: '#06080A' }, + + // ======================================================================== + // TYPOGRAPHY - Headings + // ======================================================================== + colorTextBreadcrumbCurrent: { light: '#656871', dark: '#8c8c94' }, + + // H1 + fontSizeHeadingXl: '20px', + lineHeightHeadingXl: '28px', + fontWeightHeadingXl: headingFontWeight, + + // H2 + fontSizeHeadingL: '18px', + lineHeightHeadingL: '22px', + fontWeightHeadingL: headingFontWeight, + //letterSpacingHeadingL: '20px', + + // H3 + fontSizeHeadingM: '16px', + lineHeightHeadingM: '20px', + fontWeightHeadingM: headingFontWeight, + + // H4 + fontSizeHeadingS: '14px', + lineHeightHeadingS: '18px', + fontWeightHeadingS: headingFontWeight, + + // H5 + fontSizeHeadingXs: '12px', + lineHeightHeadingXs: '16px', + fontWeightHeadingXs: headingFontWeight, + + // ======================================================================== + // TYPOGRAPHY - Other + // ======================================================================== + fontWeightButton: headingFontWeight, + + // ======================================================================== + // BORDERS - Width + // ======================================================================== + borderWidthButton: '1px', + borderWidthToken: '1px', + borderWidthAlert: '0px', + borderItemWidth: '1px', + borderWidthAlertInlineStart: '2px', + borderWidthItemSelected: '1px', + borderWidthCardSelected: '1px', + + // ======================================================================== + // BORDERS - Radius + // ======================================================================== + borderRadiusAlert: '2px', + borderRadiusBadge: '16px', + borderRadiusButton: '8px', + borderRadiusContainer: '12px', + borderRadiusDropdown: '8px', + borderRadiusDropzone: '8px', + borderRadiusFlashbar: '4px', + borderRadiusItem: '8px', + borderRadiusInput: '8px', + borderRadiusPopover: '8px', + borderRadiusTabsFocusRing: '10px', + borderRadiusToken: '8px', + borderRadiusTutorialPanelItem: '4px', + + // ======================================================================== + // SPACE + // ======================================================================== + spaceAlertVertical: '4px', + spaceButtonHorizontal: '12px', + spaceTabsVertical: '0px', + spaceTokenVertical: '2px', + spaceFieldVertical: { comfortable: '4px', compact: '2px' }, + sizeVerticalInput: { comfortable: '30px', compact: '26px' }, + + // ======================================================================== + // ICONS - Stroke Width + // ======================================================================== + borderWidthIconSmall: '1.5px', + borderWidthIconNormal: '1.5px', + borderWidthIconMedium: '1.75px', + borderWidthIconBig: '2px', + borderWidthIconLarge: '2.5px', + }, + + referenceTokens: { + color: { + primary: { + //seed: '#1b232d', + }, + }, + }, + + contexts: { + header: { + tokens: { + // ======================================================================== + // BUTTONS - Normal + // ======================================================================== + colorBorderButtonNormalDefault: '#f3f3f7', + colorBorderButtonNormalHover: '#F9F9FB', + colorBorderButtonNormalActive: '#F9F9FB', + + colorBackgroundButtonNormalHover: '#1B232D', + colorBackgroundButtonNormalActive: '#131920', + + colorTextButtonNormalDefault: '#f3f3f7', + colorTextButtonNormalHover: '#F9F9FB', + colorTextButtonNormalActive: '#F9F9FB', + + // ======================================================================== + // BUTTONS - Primary + // ======================================================================== + colorBackgroundButtonPrimaryDefault: '#F9F9FB', + colorBackgroundButtonPrimaryHover: '#FFFFFF', + colorBackgroundButtonPrimaryActive: '#F9F9FB', + + colorTextButtonPrimaryDefault: '#131920', + colorTextButtonPrimaryHover: '#131920', + colorTextButtonPrimaryActive: '#131920', + + //colorTextLinkDefault: { light: '#0f141a', dark: '#CCCCD1' }, + colorTextLinkDefault: '#CCCCD1', + }, + }, + flashbar: { + tokens: { + // Custom flashbar colors + //colorBackgroundNotificationGreen: colorSuccess, + //colorBackgroundNotificationBlue: { light: '#0033cc', dark: '#0033cc' }, + colorTextNotificationDefault: { light: '#ffffff', dark: '#ffffff' }, + }, + }, + alert: { + tokens: { + colorBackgroundStatusInfo: { light: '#f6f6f9', dark: '#232b37' }, + colorBackgroundStatusWarning: { light: '#f6f6f9', dark: '#232b37' }, + colorBackgroundStatusError: { light: '#f6f6f9', dark: '#232b37' }, + colorBackgroundStatusSuccess: { light: '#f6f6f9', dark: '#232b37' }, + colorTextLinkDefault: colorTextBodyDefault, + // colorTextStatusInfo: { light: '#0033CC', dark: '#7598FF' }, + // colorBorderStatusInfo: { light: '#0033CC', dark: '#7598FF' }, + }, + }, + }, + }; +} + +// ============================================================================ +// Theme for new Core default +// ============================================================================ + +export function generateThemeConfigCoreDefault(customAccentColor?: { light: string; dark: string }) { + // Primary accent colors + const colorSelectedAccent = { light: '#1b232d', dark: '#F9F9FB' }; + const colorSelectedAccentSubtleHover = { light: '#EBEBF0', dark: '#131920' }; + + // Secondary accent colors (darker/more saturated variant) + const colorSelectedAccentSecondary = { light: '#1b232d', dark: '#F9F9FB' }; + + // Neutral colors + const colorNeutralDefault = { light: '#1b232d', dark: '#f3f3f7' }; + const colorNeutralInverse = { light: '#ffffff', dark: '#131920' }; + //const colorNeutralBackground = { light: '#F6F6F9', dark: '#333843' }; + + // Toned down text color + const colorTextBodyDefault = { light: '#0f141a', dark: '#CCCCD1' }; + //const colorTextBodyDefault = { light: '#1B232D', dark: '#c6c6cd' }; + //const colorTextBodySecondary = { light: '#656871', dark: '#B4B4BB' }; + + // Status colors + const colorSuccess = { light: '#008559', dark: '#008559' }; + + return { + tokens: { + fontFamilyBase: "'Noto Sans', 'Helvetica Neue', Roboto, Arial, sans-serif", + colorTextBodyDefault: colorTextBodyDefault, + + // ======================================================================== + // BUTTONS - Normal + // ======================================================================== + colorBorderButtonNormalDefault: colorNeutralDefault, + colorBorderButtonNormalHover: colorSelectedAccent, + colorBorderButtonNormalActive: colorSelectedAccentSecondary, + colorBackgroundButtonNormalDefault: { light: '#FFFFFF', dark: '#161d26' }, + colorBackgroundButtonNormalHover: { light: '#F6F6F9', dark: '#424650' }, + colorBackgroundButtonNormalActive: colorSelectedAccentSubtleHover, + colorTextButtonNormalDefault: colorNeutralDefault, + colorTextButtonNormalHover: colorSelectedAccent, + colorTextButtonNormalActive: colorSelectedAccentSecondary, + + // ======================================================================== + // BUTTONS - Primary + // ======================================================================== + colorBackgroundButtonPrimaryDefault: colorSelectedAccentSecondary, + colorBackgroundButtonPrimaryHover: { light: '#06080A', dark: '#FFFFFF' }, + colorBackgroundButtonPrimaryActive: colorSelectedAccentSecondary, + colorTextButtonPrimaryDefault: colorNeutralInverse, + colorTextButtonPrimaryHover: colorNeutralInverse, + colorTextButtonPrimaryActive: colorNeutralInverse, + + // ======================================================================== + // BUTTONS - Link + // ======================================================================== + colorBackgroundButtonLinkDefault: { light: '#f6f6f9', dark: '#232b37' }, + colorBackgroundButtonLinkHover: { light: '#ebebf0', dark: '#424650' }, + colorBackgroundButtonLinkActive: colorSelectedAccentSubtleHover, + colorTextLinkButtonNormalDefault: colorSelectedAccent, + + // ======================================================================== + // BUTTONS - Toggle + // ======================================================================== + colorBackgroundToggleButtonNormalPressed: colorSelectedAccentSubtleHover, + colorBorderToggleButtonNormalPressed: colorSelectedAccent, + colorTextToggleButtonNormalPressed: colorSelectedAccent, + + // ======================================================================== + // CONTROLS - Checkboxes, Radio, Toggle + // ======================================================================== + colorBackgroundControlChecked: colorSelectedAccent, + //colorBackgroundToggleCheckedDisabled: colorSelectedAccentDisabled, + + // ======================================================================== + // LINKS & TEXT + // ======================================================================== + colorTextLinkDefault: colorTextBodyDefault, + colorTextLinkHover: { light: '#424650', dark: '#FFFFFF' }, + colorTextLinkSecondaryDefault: { light: '#295eff', dark: '#7598ff' }, + colorTextLinkSecondaryHover: { light: '#0033CC', dark: '#94AFFF' }, + colorTextLinkInfoDefault: { light: '#295eff', dark: '#7598ff' }, + colorTextLinkInfoHover: { light: '#0033CC', dark: '#94AFFF' }, + colorTextAccent: colorSelectedAccent, + + // ======================================================================== + // SELECTION & FOCUS + // ======================================================================== + colorBorderItemFocused: colorSelectedAccent, + colorBorderItemSelected: colorSelectedAccent, + colorBackgroundItemSelected: { light: '#F6F6F9', dark: '#0F141A' }, + colorBackgroundLayoutToggleSelectedDefault: colorSelectedAccent, + + // ======================================================================== + // SEGMENTS & TABS + // ======================================================================== + colorBackgroundSegmentActive: colorSelectedAccent, + + // ======================================================================== + // SLIDER + // ======================================================================== + colorBackgroundSliderRangeDefault: colorSelectedAccent, + colorBackgroundSliderHandleDefault: colorSelectedAccent, + + // ======================================================================== + // PROGRESS BAR + // ======================================================================== + colorBackgroundProgressBarValueDefault: colorSelectedAccent, + + // ======================================================================== + // NOTIFICATIONS + // ======================================================================== + colorBackgroundNotificationGreen: colorSuccess, + colorBackgroundNotificationBlue: { light: '#0033CC', dark: '#0033CC' }, + colorTextNotificationDefault: { light: '#ffffff', dark: '#ffffff' }, + + // ======================================================================== + // STATUS + // ======================================================================== + colorTextStatusInfo: { light: '#0033CC', dark: '#7598FF' }, + colorTextStatusSuccess: { light: '#006B48', dark: '#00BD6B' }, // Fix ACR a11y issues + colorTextDropdownItemFilterMatch: colorSelectedAccent, + colorBackgroundDropdownItemFilterMatch: { light: '#F3F3F7', dark: '#06080A' }, + + // ======================================================================== + // TYPOGRAPHY - Headings + // ======================================================================== + colorTextBreadcrumbCurrent: { light: '#656871', dark: '#8c8c94' }, + + // H1 + fontSizeHeadingXl: '24px', + lineHeightHeadingXl: '30px', + fontWeightHeadingXl: '600', + + // H2 + fontSizeHeadingL: '20px', + lineHeightHeadingL: '24px', + fontWeightHeadingL: '600', + + // H3 + fontSizeHeadingM: '18px', + lineHeightHeadingM: '22px', + fontWeightHeadingM: '600', + + // H4 + fontSizeHeadingS: '16px', + lineHeightHeadingS: '20px', + fontWeightHeadingS: '600', + + // H5 + fontSizeHeadingXs: '14px', + lineHeightHeadingXs: '20px', + fontWeightHeadingXs: '600', + + // ======================================================================== + // TYPOGRAPHY - Other + // ======================================================================== + fontWeightButton: '600', + fontWeightTabs: '600', + fontSizeTabs: '16px', + + // ======================================================================== + // SPACE + // ======================================================================== + spaceAlertVertical: '4px', + spaceButtonHorizontal: '12px', + spaceTabsVertical: '2px', + spaceTokenVertical: '2px', + spaceFieldVertical: { comfortable: '4px', compact: '2px' }, + sizeVerticalInput: { comfortable: '30px', compact: '26px' }, + + // ======================================================================== + // BORDERS - Width + // ======================================================================== + borderWidthButton: '1px', + borderWidthToken: '1px', + borderWidthAlert: '0px', + borderItemWidth: '1px', + borderWidthAlertInlineStart: '2px', + borderWidthItemSelected: '1px', + borderWidthCardSelected: '1px', + + // ======================================================================== + // BORDERS - Radius + // ======================================================================== + borderRadiusAlert: '2px', + borderRadiusBadge: '16px', + borderRadiusButton: '8px', + borderRadiusContainer: '12px', + borderRadiusDropdown: '8px', + borderRadiusDropzone: '8px', + borderRadiusFlashbar: '4px', + borderRadiusItem: '8px', + borderRadiusInput: '8px', + borderRadiusPopover: '8px', + borderRadiusTabsFocusRing: '10px', + borderRadiusToken: '8px', + borderRadiusTutorialPanelItem: '4px', + + // ======================================================================== + // ICONS - Stroke Width + // ======================================================================== + borderWidthIconSmall: '1.5px', + borderWidthIconNormal: '1.5px', + borderWidthIconMedium: '1.75px', + borderWidthIconBig: '2px', + borderWidthIconLarge: '2.5px', + }, + + referenceTokens: { + color: { + primary: { + seed: '#1b232d', + }, + }, + }, + + contexts: { + 'top-navigation': { + tokens: { + colorBackgroundContainerContent: { light: '#ffffff', dark: '#161d26' }, + colorBorderDividerDefault: { light: '#c6c6cd', dark: '#424650' }, + colorTextTopNavigationTitle: colorNeutralDefault, + // Interactive elements + colorTextInteractiveDefault: colorNeutralDefault, + colorTextInteractiveHover: colorSelectedAccent, + colorTextInteractiveActive: { light: '#06080A', dark: '#F6F6F9' }, + colorTextAccent: { light: '#06080A', dark: '#F6F6F9' }, + colorTextDropdownItemDefault: { light: '#06080A', dark: '#F6F6F9' }, + colorTextDropdownItemHighlighted: { light: '#06080A', dark: '#F6F6F9' }, + colorTextDropdown: { light: '#06080A', dark: '#F6F6F9' }, + colorTextGroupLabel: { light: '#424650', dark: '#c6c6cd' }, + colorBackgroundDropdownItemDefault: { light: '#FFFFFF', dark: '#1b232d' }, + colorBackgroundDropdownItemHover: { light: '#f3f3f7', dark: '#131920' }, + colorBorderDropdownContainer: { light: '#b4b4bb', dark: '#656871' }, + // Select component tokens + colorTextBodyDefault: { light: '#06080A', dark: '#F6F6F9' }, + colorBackgroundInputDefault: { light: '#ffffff', dark: '#1b232d' }, + colorBorderInputDefault: { light: '#b4b4bb', dark: '#656871' }, + colorTextInputDefault: { light: '#06080A', dark: '#F6F6F9' }, + colorTextInputPlaceholder: { light: '#656871', dark: '#8c8c94' }, + colorBorderDropdownItemDefault: { light: '#e8e8e8', dark: '#424650' }, + colorTextDropdownItemSecondary: { light: '#424650', dark: '#c6c6cd' }, + colorItemSelected: { light: '#06080A', dark: '#F6F6F9' }, + colorBackgroundDropdownItemSelected: { light: '#F6F6F9', dark: '#06080A' }, + colorBorderItemSelected: { light: '#06080A', dark: '#F6F6F9' }, + colorTextButtonInlineIconDefault: { light: '#1b232d', dark: '#F9F9FB' }, + colorTextButtonInlineIconHover: { light: '#1b232d', dark: '#F9F9FB' }, + colorTextHeadingDefault: { light: '#06080A', dark: '#F6F6F9' }, // Fix ACR a11y issues + colorBorderDropdownItemFocused: { light: '#424650', dark: '#dedee3' }, // Fix ACR a11y issues + colorBorderDropdownItemHover: { light: '#8c8c94', dark: '#656871' }, // Fix ACR a11y issues + colorBorderItemFocused: { light: '#1b232dff', dark: '#f9f9fbff' }, // Fix ACR a11y issues + colorBackgroundBadgeIcon: { light: '#db0000', dark: '#ff7a7a' }, // Fix ACR a11y issues + }, + }, + header: { + tokens: { + // ======================================================================== + // BUTTONS - Normal + // ======================================================================== + colorBorderButtonNormalDefault: '#f3f3f7', + colorBorderButtonNormalHover: '#F9F9FB', + colorBorderButtonNormalActive: '#F9F9FB', + colorBackgroundButtonNormalHover: '#1B232D', + colorBackgroundButtonNormalActive: '#131920', + colorTextButtonNormalDefault: '#f3f3f7', + colorTextButtonNormalHover: '#F9F9FB', + colorTextButtonNormalActive: '#F9F9FB', + // ======================================================================== + // BUTTONS - Primary + // ======================================================================== + colorBackgroundButtonPrimaryDefault: '#F9F9FB', + colorBackgroundButtonPrimaryHover: '#FFFFFF', + colorBackgroundButtonPrimaryActive: '#F9F9FB', + colorTextButtonPrimaryDefault: '#131920', + colorTextButtonPrimaryHover: '#131920', + colorTextButtonPrimaryActive: '#131920', + colorTextLinkDefault: '#CCCCD1', + }, + }, + flashbar: { + tokens: { + // Custom flashbar colors + colorBackgroundNotificationGreen: colorSuccess, + colorBackgroundNotificationBlue: { light: '#0033cc', dark: '#0033cc' }, + colorTextNotificationDefault: { light: '#ffffff', dark: '#ffffff' }, + }, + }, + alert: { + tokens: { + colorBackgroundStatusInfo: { light: '#f6f6f9', dark: '#232b37' }, + colorBackgroundStatusWarning: { light: '#f6f6f9', dark: '#232b37' }, + colorBackgroundStatusError: { light: '#f6f6f9', dark: '#232b37' }, + colorBackgroundStatusSuccess: { light: '#f6f6f9', dark: '#232b37' }, + colorTextStatusInfo: { light: '#0033CC', dark: '#7598FF' }, + colorBorderStatusInfo: { light: '#0033CC', dark: '#7598FF' }, + colorTextStatusSuccess: { light: '#006B48', dark: '#00BD6B' }, // Fix ACR a11y issues + colorBorderStatusSuccess: { light: '#006B48', dark: '#00BD6B' }, + }, + }, + }, + }; +} + +// ============================================================================ +// Theme for current Console +// ============================================================================ + +export function generateThemeConfigConsole() { + return { + tokens: { + fontFamilyBase: "var(--font-amazon-ember, 'Amazon Ember', sans-serif)", + + // ======================================================================== + // BUTTONS - Normal + // ======================================================================== + colorBorderButtonNormalDefault: { light: '#006CE0', dark: '#42B4FF' }, + colorBorderButtonNormalHover: { light: '#002A66', dark: '#75CFFF' }, + colorBorderButtonNormalActive: { light: '#002A66', dark: '#75CFFF' }, + + colorBackgroundButtonNormalDefault: { light: '#FFFFFF', dark: '#161d26' }, + colorBackgroundButtonNormalHover: { light: '#F0FBFF', dark: '#1B232D' }, + colorBackgroundButtonNormalActive: { light: '#D1F1FF', dark: '#333843' }, + + colorTextButtonNormalDefault: { light: '#006CE0', dark: '#42B4FF' }, + colorTextButtonNormalHover: { light: '#002A66', dark: '#75CFFF' }, + colorTextButtonNormalActive: { light: '#002A66', dark: '#75CFFF' }, + + colorBackgroundSegmentDefault: { light: 'transparent', dark: 'transparent' }, + + // ======================================================================== + // BUTTONS - Primary + // ======================================================================== + colorBackgroundButtonPrimaryDefault: { light: '#FF9900', dark: '#FFB347' }, + colorBackgroundButtonPrimaryHover: { light: '#FA6F00', dark: '#FFC870' }, + colorBackgroundButtonPrimaryActive: { light: '#FA6F00', dark: '#FFC870' }, + + colorTextButtonPrimaryDefault: { light: '#0F141A', dark: '#0F141A' }, + colorTextButtonPrimaryHover: { light: '#0F141A', dark: '#0F141A' }, + colorTextButtonPrimaryActive: { light: '#0F141A', dark: '#0F141A' }, + + // ======================================================================== + // BUTTONS - Link + // ======================================================================== + colorBackgroundButtonLinkHover: { light: '#F0FBFF', dark: '#1B232D' }, + colorBackgroundButtonLinkActive: { light: '#D1F1FF', dark: '#333843' }, + + colorTextLinkButtonNormalDefault: { light: '#006CE0', dark: '#42B4FF' }, + + // ======================================================================== + // BUTTONS - Toggle + // ======================================================================== + colorBackgroundToggleButtonNormalPressed: { light: '#D1F1FF', dark: '#333843' }, + colorBorderToggleButtonNormalPressed: { light: '#006CE0', dark: '#42B4FF' }, + colorTextToggleButtonNormalPressed: { light: '#002A66', dark: '#75CFFF' }, + + // ======================================================================== + // CONTROLS - Checkboxes, Radio, Toggle + // ======================================================================== + colorBackgroundControlChecked: { light: '#006CE0', dark: '#42B4FF' }, + //colorBackgroundToggleCheckedDisabled: { light: '#B8E7FF', dark: '#002A66' }, + + // ======================================================================== + // LINKS & TEXT + // ======================================================================== + colorTextLinkDefault: { light: '#006CE0', dark: '#42B4FF' }, + colorTextLinkHover: { light: '#002A66', dark: '#75CFFF' }, + colorTextAccent: { light: '#006CE0', dark: '#42B4FF' }, + + // ======================================================================== + // SELECTION & FOCUS + // ======================================================================== + colorBorderItemFocused: { light: '#006CE0', dark: '#42B4FF' }, + colorBorderItemSelected: { light: '#006CE0', dark: '#42B4FF' }, + colorBackgroundItemSelected: { light: '#F0FBFF', dark: '#001129' }, + colorBackgroundLayoutToggleSelectedDefault: { light: '#006CE0', dark: '#42B4FF' }, + + // ======================================================================== + // SEGMENTS & TABS + // ======================================================================== + colorBackgroundSegmentActive: { light: '#006CE0', dark: '#42B4FF' }, + + // ======================================================================== + // SLIDER + // ======================================================================== + colorBackgroundSliderRangeDefault: { light: '#006CE0', dark: '#42B4FF' }, + colorBackgroundSliderHandleDefault: { light: '#006CE0', dark: '#42B4FF' }, + //colorBackgroundSliderRangeActive: { light: '#004A9E', dark: '#75CFFF' }, + //colorBackgroundSliderHandleActive: { light: '#004A9E', dark: '#75CFFF' }, + + // ======================================================================== + // PROGRESS BAR + // ======================================================================== + colorBackgroundProgressBarValueDefault: { light: '#006CE0', dark: '#42B4FF' }, + + // ======================================================================== + // NOTIFICATIONS + // ======================================================================== + colorBackgroundNotificationGreen: { light: '#00802F', dark: '#2BB534' }, + colorBackgroundNotificationBlue: { light: '#006CE0', dark: '#42B4FF' }, + + // ======================================================================== + // STATUS + // ======================================================================== + colorTextStatusInfo: { light: '#006CE0', dark: '#42B4FF' }, + // colorTextStatusWarning: { light: '#855900', dark: '#FFE347' }, + // colorTextStatusError: { light: '#DB0000', dark: '#FF7A7A' }, + + colorTextBreadcrumbCurrent: { light: '#656871', dark: '#8c8c94' }, + + // ======================================================================== + // TYPOGRAPHY - Headings + // ======================================================================== + // Display Large + // fontSizeDisplayL: '42px', + // lineHeightDisplayL: '48px', + fontWeightDisplayL: '700', + + // H1 + fontSizeHeadingXl: '24px', + lineHeightHeadingXl: '30px', + fontWeightHeadingXl: '700', + + // H2 + fontSizeHeadingL: '20px', + lineHeightHeadingL: '24px', + fontWeightHeadingL: '700', + //letterSpacingHeadingL: '-0.015em', + + // H3 + fontSizeHeadingM: '18px', + lineHeightHeadingM: '22px', + fontWeightHeadingM: '700', + + // H4 + fontSizeHeadingS: '16px', + lineHeightHeadingS: '20px', + fontWeightHeadingS: '700', + + // H5 + fontSizeHeadingXs: '14px', + lineHeightHeadingXs: '18px', + fontWeightHeadingXs: '700', + + // ======================================================================== + // TYPOGRAPHY - Other + // ======================================================================== + fontWeightButton: '700', + + // ======================================================================== + // BORDERS - Width + // ======================================================================== + borderWidthButton: '2px', + borderWidthToken: '2px', + borderWidthAlert: '2px', + borderItemWidth: '2px', + borderWidthItemSelected: '2px', + borderWidthCardSelected: '2px', + + // ======================================================================== + // SPACE + // ======================================================================== + spaceAlertVertical: '12px', + spaceButtonHorizontal: '20px', + spaceTabsVertical: '4px', + spaceTokenVertical: { comfortable: '4px', compact: '2px' }, + spaceFieldVertical: { comfortable: '5px', compact: '3px' }, + + // ======================================================================== + // BORDERS - Radius + // ======================================================================== + borderRadiusAlert: '12px', + borderRadiusBadge: '4px', + borderRadiusButton: '20px', + borderRadiusContainer: '16px', + borderRadiusDropdown: '8px', + borderRadiusDropzone: '12px', + borderRadiusFlashbar: '12px', + borderRadiusItem: '8px', + borderRadiusInput: '8px', + borderRadiusPopover: '8px', + borderRadiusTabsFocusRing: '20px', + borderRadiusToken: '8px', + borderRadiusTutorialPanelItem: '8px', + + // ======================================================================== + // ICONS - Stroke Width + // ======================================================================== + borderWidthIconSmall: '2px', + borderWidthIconNormal: '2px', + borderWidthIconMedium: '2px', + borderWidthIconBig: '3px', + borderWidthIconLarge: '4px', + }, + + contexts: { + 'top-navigation': { + tokens: { + //colorBackgroundContainerContent: { light: '#161D26', dark: '#161D26' }, + }, + }, + header: { + tokens: { + colorBorderButtonNormalDefault: '#42B4FF', + colorBorderButtonNormalHover: '#75CFFF', + colorBorderButtonNormalActive: '#75CFFF', + + colorBackgroundButtonNormalHover: '#1B232D', + colorBackgroundButtonNormalActive: '#333843', + + colorTextButtonNormalDefault: '#42B4FF', + colorTextButtonNormalHover: '#75CFFF', + colorTextButtonNormalActive: '#75CFFF', + + // ======================================================================== + // BUTTONS - Primary + // ======================================================================== + colorBackgroundButtonPrimaryDefault: '#FFB347', + colorBackgroundButtonPrimaryHover: '#FFC870', + colorBackgroundButtonPrimaryActive: '#FFC870', + + colorTextButtonPrimaryDefault: '#0F141A', + colorTextButtonPrimaryHover: '#0F141A', + colorTextButtonPrimaryActive: '#0F141A', + }, + }, + flashbar: { + tokens: { + // Custom flashbar colors + //colorBackgroundNotificationBlue: { light: '#0033cc', dark: '#0033cc' }, + }, + }, + alert: { + tokens: { + colorBackgroundStatusInfo: { light: '#F0FBFF', dark: '#001129' }, + colorBackgroundStatusWarning: { light: '#FFFEF0', dark: '#191100' }, + colorBackgroundStatusError: { light: '#FFF5F5', dark: '#1F0000' }, + colorBackgroundStatusSuccess: { light: '#EFFFF1', dark: '#001401' }, + colorTextStatusInfo: { light: '#006CE0', dark: '#42B4FF' }, + //colorBorderStatusInfo: { light: '#006CE0', dark: '#42B4FF' }, + }, + }, + }, + }; +} + +export const themeCoreConfig = generateThemeConfigCW(); + +export const colorTextLinkSecondOption = { light: '#295EFF', dark: '#7598FF' }; + +// ============================================================================ +// Theme Comparison Utilities +// ============================================================================ + +/** + * Utility for comparing different theme design directions. + * Ensures complete theme isolation by resetting before each application. + */ +export function createThemeComparison() { + return { + /** + * Apply Design Direction A with optional custom accent color + */ + applyDirectionA: (customAccentColor?: { light: string; dark: string }) => { + const themeA = generateThemeConfigCW(customAccentColor); + // applyCustomTheme handles reset automatically + return themeA; + }, + + /** + * Apply Design Direction B + */ + applyDirectionB: () => { + const themeB = generateThemeConfigConsole(); + // applyCustomTheme handles reset automatically + return themeB; + }, + + /** + * Get theme config without applying (for inspection/comparison) + */ + getThemeConfig: (direction: 'A' | 'B', customAccentColor?: { light: string; dark: string }) => { + return direction === 'A' ? generateThemeConfigCW(customAccentColor) : generateThemeConfigConsole(); + }, + }; +} diff --git a/pages/demos/common/use-query-params.ts b/pages/demos/common/use-query-params.ts new file mode 100644 index 0000000000..ccc7e6984b --- /dev/null +++ b/pages/demos/common/use-query-params.ts @@ -0,0 +1,44 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +import { useEffect, useState } from 'react'; + +export const useQueryParams = () => { + const [queryParams, setParams] = useState(Object.fromEntries(new URLSearchParams(window.location.search))); + + const getQueryParam = (param: string) => { + return queryParams[param]; + }; + + const setQueryParam = (param: string, value: string | null) => { + setParams(currentParams => { + const queryParams = { ...currentParams }; + if (value === null || value === '') { + delete queryParams[param]; + } else { + queryParams[param] = value; + } + + const searchParams = new URLSearchParams(queryParams); + const newURL = searchParams.toString() ? `${window.location.pathname}?${searchParams}` : window.location.pathname; + + window.history.pushState('', '', newURL); + + return queryParams; + }); + }; + + useEffect(() => { + const handlePopState = () => { + setParams(Object.fromEntries(new URLSearchParams(window.location.search))); + }; + + window.addEventListener('popstate', handlePopState); + return () => window.removeEventListener('popstate', handlePopState); + }, []); + + return { + getQueryParam, + setQueryParam, + queryParams, + }; +}; diff --git a/pages/demos/components-overview.page.tsx b/pages/demos/components-overview.page.tsx new file mode 100644 index 0000000000..6237c0786e --- /dev/null +++ b/pages/demos/components-overview.page.tsx @@ -0,0 +1,84 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import { BreadcrumbGroup, Header, SpaceBetween } from '@cloudscape-design/components'; + +import { Notifications } from './pages/commons'; +import { CustomAppLayout } from './pages/commons/common-components'; +import ButtonsInputsDropdowns from './pages/components-overview/buttons-inputs-dropdowns'; +import Charts from './pages/components-overview/charts'; +import Chat from './pages/components-overview/chat'; +import FormControls from './pages/components-overview/form-controls'; +import Images from './pages/components-overview/images'; +import KvpForm from './pages/components-overview/kvp-form'; +import NavigationComponents from './pages/components-overview/navigation-components'; +import OverlaysAndPatterns from './pages/components-overview/overlays-and-patterns'; +import StatusComponents from './pages/components-overview/status-components'; +import TableAndCards from './pages/components-overview/table-and-cards'; +import Typography from './pages/components-overview/typography'; + +import './styles/base.scss'; + +export default function Page() { + return ( + + } + notifications={} + content={ + +
+ Components overview page +
+
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + } + /> + ); +} diff --git a/pages/demos/dashboard.page.tsx b/pages/demos/dashboard.page.tsx new file mode 100644 index 0000000000..9595c500b4 --- /dev/null +++ b/pages/demos/dashboard.page.tsx @@ -0,0 +1,9 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import { App } from './pages/dashboard/app'; + +export default function Page() { + return ; +} diff --git a/pages/demos/delete-one-click.page.tsx b/pages/demos/delete-one-click.page.tsx new file mode 100644 index 0000000000..75f81d73f7 --- /dev/null +++ b/pages/demos/delete-one-click.page.tsx @@ -0,0 +1,9 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import { App } from './pages/delete-one-click/app'; + +export default function Page() { + return ; +} diff --git a/pages/demos/delete-with-additional-confirmation.page.tsx b/pages/demos/delete-with-additional-confirmation.page.tsx new file mode 100644 index 0000000000..b89c42594e --- /dev/null +++ b/pages/demos/delete-with-additional-confirmation.page.tsx @@ -0,0 +1,9 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import { App } from './pages/delete-with-additional-confirmation/app'; + +export default function Page() { + return ; +} diff --git a/pages/demos/details-hub.page.tsx b/pages/demos/details-hub.page.tsx new file mode 100644 index 0000000000..9ad3d041d7 --- /dev/null +++ b/pages/demos/details-hub.page.tsx @@ -0,0 +1,9 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import { App } from './pages/details-hub/app'; + +export default function Page() { + return ; +} diff --git a/pages/demos/details-tabs.page.tsx b/pages/demos/details-tabs.page.tsx new file mode 100644 index 0000000000..7e5604e025 --- /dev/null +++ b/pages/demos/details-tabs.page.tsx @@ -0,0 +1,9 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import { App } from './pages/details-tabs/app'; + +export default function Page() { + return ; +} diff --git a/pages/demos/details.page.tsx b/pages/demos/details.page.tsx new file mode 100644 index 0000000000..2be1bc3ed5 --- /dev/null +++ b/pages/demos/details.page.tsx @@ -0,0 +1,9 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import { App } from './pages/details/app'; + +export default function Page() { + return ; +} diff --git a/pages/demos/edit.page.tsx b/pages/demos/edit.page.tsx new file mode 100644 index 0000000000..346306cb03 --- /dev/null +++ b/pages/demos/edit.page.tsx @@ -0,0 +1,9 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import { App } from './pages/edit/app'; + +export default function Page() { + return ; +} diff --git a/pages/demos/fake-server/content-origins.ts b/pages/demos/fake-server/content-origins.ts new file mode 100644 index 0000000000..c5a5c74ad2 --- /dev/null +++ b/pages/demos/fake-server/content-origins.ts @@ -0,0 +1,22 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +import { ContentOriginsResource } from '../resources/types'; +import fakeDelay from './utils/fake-delay'; +import fetchJson from './utils/fetch-json'; +import paginate from './utils/paginate'; + +export async function fetchContentOrigins({ + filteringText, + currentPageIndex, +}: { + filteringText: string; + currentPageIndex: number; +}) { + const [items] = await Promise.all([ + fetchJson('./resources/content-origins.json'), + fakeDelay(), + ]); + const filteredItems = filteringText ? items.filter(item => item.label.indexOf(filteringText) > -1) : items; + const { paginatedItems, hasNextPage } = paginate(filteredItems, currentPageIndex); + return { origins: paginatedItems, hasNextPage }; +} diff --git a/pages/demos/fake-server/distributions.ts b/pages/demos/fake-server/distributions.ts new file mode 100644 index 0000000000..c79258e92b --- /dev/null +++ b/pages/demos/fake-server/distributions.ts @@ -0,0 +1,272 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +import { PropertyFilterProps } from '@cloudscape-design/components/property-filter'; + +import { isToken, isTokenGroup } from '../common/property-filter-type-guards'; +import { Distribution } from './types'; +import fetchJson from './utils/fetch-json'; + +// removes the readonly as we are trying to mask the Property Filter props +type Mutable = { + -readonly [P in keyof T]: T[P]; +}; + +type FilteringOptions = NonNullable>; +type FilteringProperties = Mutable; + +type TokenGroup = PropertyFilterProps.TokenGroup; +type Token = PropertyFilterProps.Token; +interface FetchDistributionOptions { + currentPageIndex: number; + filteringOperation: 'and' | 'or'; + filteringText: string; + filteringTokens: { + operator: string; + value: string; + propertyKey: string; + operation?: 'and' | 'or'; + tokens: Token[]; + }[]; + pageSize: number; + sortingColumn: string; + sortingDescending: boolean; + filteringPropertyKey?: string; + filteringOptions: FilteringOptions; +} + +let items: Distribution[] = []; +let filteringProperties: FilteringProperties = []; + +function createComparator(options: FetchDistributionOptions) { + const qualifier = options.sortingDescending ? -1 : 1; + const field = options.sortingColumn as keyof Distribution; + return (a: Distribution, b: Distribution) => (a[field] > b[field] ? qualifier : -qualifier); +} + +const getComparatorForOperator = (operator: string) => (a: string, b: string) => { + switch (operator) { + case '=': + // eslint-disable-next-line eqeqeq + return a == b; + case '!=': + // eslint-disable-next-line eqeqeq + return a != b; + case ':': + return (a + '').toLowerCase().indexOf((b + '').toLowerCase()) > -1; + case '!:': + return (a + '').toLowerCase().indexOf((b + '').toLowerCase()) === -1; + case '^': + return (a + '').toLowerCase().startsWith((b + '').toLowerCase()); + case '!^': + return !(a + '').toLowerCase().startsWith((b + '').toLowerCase()); + } + return false; +}; + +function filterItemsByProperty(options: FetchDistributionOptions) { + const operationFn = (operation: 'and' | 'or') => { + switch (operation) { + case 'or': + return (value1: T, value2: T) => value1 || value2; + case 'and': + default: + return (value1: T, value2: T) => value1 && value2; + } + }; + + const match = ( + propertyKey: string, + searchText: string, + item: Distribution, + compareFn: (tag: string, searchText: string) => boolean + ) => { + // specific tag + if (propertyKey.startsWith('tag-indicator__')) { + const tagKey = propertyKey.split('__')[1]; + + if (item.tags[tagKey]) { + return item.tags[tagKey].some((tag: string) => compareFn(tag, searchText)); + } + + return false; + } + + return compareFn(item[propertyKey as keyof Distribution] as string, searchText); + }; + + const filteringFunction = function (item: Distribution, tokens: Token[], operation: 'and' | 'or') { + function filterWithToken( + include: boolean, + opFn: (a: boolean, b: boolean) => void, + tokenOrGroup: Token | TokenGroup + ): boolean { + if (isTokenGroup(tokenOrGroup)) { + const nextOpFn = operationFn(tokenOrGroup.operation!); + return tokenOrGroup.tokens.reduce( + (include: boolean, token: Token | TokenGroup) => filterWithToken(include, nextOpFn, token), + operation === 'and' + ); + } + if (isToken(tokenOrGroup)) { + const comparator = getComparatorForOperator(tokenOrGroup.operator); + const searchableProps = tokenOrGroup.propertyKey ? [tokenOrGroup.propertyKey] : Object.keys(item); + return searchableProps.some(propertyKey => { + const matched = match(propertyKey, tokenOrGroup.value, item, comparator); + return opFn(include, matched); + }); + } + throw new Error('Invariant violation: unexpected token shape.'); + } + const opFn = operationFn(operation); + return tokens.reduce((include, token) => filterWithToken(include, opFn, token), operation === 'and'); + }; + + return items.filter(item => filteringFunction(item, options.filteringTokens, options.filteringOperation)); +} + +function filterItemsByText({ filteringText, filteringOptions }: FetchDistributionOptions) { + return items.filter(item => { + for (const prop in item) { + if (typeof item[prop as keyof Distribution] !== 'string') { + // we search only in string properties; + continue; + } + + const matchesText = + item[prop as keyof Distribution] && + (item[prop as keyof Distribution] as string).toLowerCase().indexOf(filteringText.toLowerCase()) !== -1; + let matchesProp = false; + + if (filteringOptions) { + matchesProp = + Object.prototype.hasOwnProperty.call(item, prop) && + prop.toLowerCase().indexOf(filteringText.toLowerCase()) !== -1; + } + + if (matchesText || matchesProp) { + return true; + } + } + return false; + }); +} + +function filterItems(options: FetchDistributionOptions) { + return options.filteringTokens ? filterItemsByProperty(options) : filterItemsByText(options); +} + +interface PrepareResponseReturnType { + filteringProperties: FilteringProperties; + items: Distribution[]; + filteringOptions: FilteringOptions; + pagesCount: number; + currentPageIndex: number; +} + +function prepareResponse(options: FetchDistributionOptions): PrepareResponseReturnType { + const output: { + filteringProperties: FilteringProperties; + items: Distribution[]; + filteringOptions: FilteringOptions; + pagesCount: number; + currentPageIndex: number; + } = { + currentPageIndex: 0, + items: [], + pagesCount: 0, + filteringProperties, + filteringOptions: [], + }; + const shouldFilter = + (options.filteringText && !options.filteringTokens) || (options.filteringTokens && options.filteringTokens.length); + + output.items = shouldFilter ? filterItems(options) : items.slice(); + + if (filteringProperties) { + const filteringOptions: FilteringOptions = []; + const filteredPropertyKeys = options.filteringPropertyKey + ? [options.filteringPropertyKey] + : filteringProperties.map(property => property.key); + // an object used as a set to ensure uniqueness of the generated filtering options + const addedFilteringOptions: Record = {}; + // TODO: will fix in a follow up CR + + const addFilteringOption = (propertyKey: string, value: any) => { + const id = propertyKey + '#' + value; + if (!addedFilteringOptions[id]) { + filteringOptions.push({ propertyKey, value }); + } + addedFilteringOptions[id] = true; + }; + items.forEach(item => { + filteredPropertyKeys.forEach(propertyKey => { + if (propertyKey.startsWith('tag-indicator__')) { + const tagKey = propertyKey.split('__')[1]; + if (item.tags[tagKey]) { + item.tags[tagKey].forEach((tagValue: string) => { + addFilteringOption(propertyKey, tagValue); + }); + } + } else { + addFilteringOption(propertyKey, item[propertyKey as keyof Distribution]); + } + }); + }); + + output.filteringOptions = filteringOptions; + } else { + output.filteringOptions = []; + } + + if (options.sortingColumn) { + output.items.sort(createComparator(options)); + } + + if (options.pageSize && options.currentPageIndex) { + const pageSize = options.pageSize; + const currentItems = output.items; + let currentPageIndex = options.currentPageIndex; + if ((currentPageIndex - 1) * pageSize >= currentItems.length) { + currentPageIndex = 1; + } + + output.pagesCount = Math.ceil(currentItems.length / pageSize); + output.currentPageIndex = currentPageIndex; + output.items = currentItems.slice((currentPageIndex - 1) * pageSize, currentPageIndex * pageSize); + } else { + output.pagesCount = 1; + output.currentPageIndex = 1; + } + + return output; +} + +export function fetchDistributionFilteringOptions( + options: FetchDistributionOptions, + callback: (data: PrepareResponseReturnType) => void +) { + fetchJson>( + './resources/distributionsFilteringProperties.json' + ).then(response => { + filteringProperties = response; + setTimeout(() => callback(prepareResponse(options)), 500); + }); +} + +export function fetchDistributions( + options: FetchDistributionOptions, + callback: (data: PrepareResponseReturnType) => void +) { + if (items.length === 0) { + fetchJson('./resources/distributions.json').then(response => { + items = response; + if (options.filteringOptions) { + fetchDistributionFilteringOptions(options, callback); + } else { + setTimeout(() => callback(prepareResponse(options)), 500); + } + }); + } else { + setTimeout(() => callback(prepareResponse(options)), 500); + } +} diff --git a/pages/demos/fake-server/index.ts b/pages/demos/fake-server/index.ts new file mode 100644 index 0000000000..7546cd5129 --- /dev/null +++ b/pages/demos/fake-server/index.ts @@ -0,0 +1,5 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +export { fetchDistributions, fetchDistributionFilteringOptions } from './distributions'; +export { fetchContentOrigins } from './content-origins'; +export { GetResources, GetTagKeys, GetTagValues } from './tags'; diff --git a/pages/demos/fake-server/tags.ts b/pages/demos/fake-server/tags.ts new file mode 100644 index 0000000000..47a9d1dbb8 --- /dev/null +++ b/pages/demos/fake-server/tags.ts @@ -0,0 +1,37 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +import { TagsResource } from '../resources/types'; +import fakeDelay from './utils/fake-delay'; +import fetchJson from './utils/fetch-json'; + +// Mimic AWS SDK API method to return a similar shape to be used by the component +// @see https://docs.aws.amazon.com/resourcegroupstagging/latest/APIReference/API_GetResources.html +export async function GetResources() { + const [{ resourceTags }] = await Promise.all([fetchJson('./resources/tags.json'), fakeDelay()]); + return { + ResourceTagMappingList: [ + { + Tags: resourceTags, + }, + ], + }; +} + +// @see https://docs.aws.amazon.com/resourcegroupstagging/latest/APIReference/API_GetTagValues.html +export async function GetTagValues(key: keyof TagsResource['valueMap']) { + if (!key) { + return Promise.reject(); + } + const [{ valueMap }] = await Promise.all([fetchJson('./resources/tags.json'), fakeDelay()]); + return { + TagValues: valueMap[key] || [], + }; +} + +// @see https://docs.aws.amazon.com/resourcegroupstagging/latest/APIReference/API_GetTagKeys.html +export async function GetTagKeys() { + const [{ valueMap }] = await Promise.all([fetchJson('./resources/tags.json'), fakeDelay()]); + return { + TagKeys: Object.keys(valueMap), + }; +} diff --git a/pages/demos/fake-server/types.ts b/pages/demos/fake-server/types.ts new file mode 100644 index 0000000000..e88c2e3d41 --- /dev/null +++ b/pages/demos/fake-server/types.ts @@ -0,0 +1,89 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +import { PropertyFilterOption, PropertyFilterProperty, PropertyFilterQuery } from '@cloudscape-design/collection-hooks'; + +import { fetchContentOrigins } from './content-origins'; +import { GetResources, GetTagKeys, GetTagValues } from './tags'; + +// Types for distribution.json and content-origins.json mocks +export interface Distribution { + id: string; + deliveryMethod: string; + domainName: string; + origin: string; + state: string; + priceClass: string; + logging: string; + sslCertificate: string; + tags: { + [key: string]: string[]; + }; + date: Date; +} + +export interface ContentOrigin { + value: string; + label: string; +} + +/** + * Combining all the fake server types here instead + * of creating types per utility and this also will + * make types automatic (if we changed the params or return type.) + * + * If you added new fake server utility, add it here + * and add it to the window.FakeServer object + */ + +type FetchContentOriginsParams = Parameters[0]; +type FetchContentOriginsReturn = ReturnType; + +type GetResourcesReturn = ReturnType; + +type GetTagKeysReturn = ReturnType; + +type GetTagValuesReturn = ReturnType; + +export interface FetchDistributionsParams { + filteringText?: string; + filteringTokens?: PropertyFilterQuery['tokens'] | PropertyFilterQuery['tokenGroups']; + filteringOperation?: PropertyFilterQuery['operation']; + pageSize?: number; + currentPageIndex?: number; + sortingDescending?: boolean; + sortingColumn?: string; +} + +export interface FetchDistributionsResponse { + items: Distribution[]; + pagesCount: number; + currentPageIndex: number; +} + +export interface FetchDistributionFilteringOptionsParams { + filteringText: string; + filteringPropertyKey?: string; +} + +export interface FetchDistributionFilteringOptionsResponse { + filteringOptions: PropertyFilterOption[]; + filteringProperties: PropertyFilterProperty[]; +} +declare global { + interface Window { + FakeServer: { + fetchContentOrigins: (params: FetchContentOriginsParams) => FetchContentOriginsReturn; + GetResources: () => GetResourcesReturn; + GetTagKeys: () => GetTagKeysReturn; + GetTagValues: (params: string) => GetTagValuesReturn; + fetchDistributions: ( + params: FetchDistributionsParams, + callback: (response: FetchDistributionsResponse) => void + ) => void; + fetchDistributionFilteringOptions: ( + params: FetchDistributionFilteringOptionsParams, + callback: (response: FetchDistributionFilteringOptionsResponse) => void + ) => void; + }; + } +} diff --git a/pages/demos/fake-server/utils/fake-delay.ts b/pages/demos/fake-server/utils/fake-delay.ts new file mode 100644 index 0000000000..1bf2fe4d10 --- /dev/null +++ b/pages/demos/fake-server/utils/fake-delay.ts @@ -0,0 +1,7 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +export const DEFAULT_DEMO_DELAY = 500; + +export default function fakeDelay(ms = DEFAULT_DEMO_DELAY) { + return new Promise(resolve => setTimeout(resolve, ms)); +} diff --git a/pages/demos/fake-server/utils/fetch-json.ts b/pages/demos/fake-server/utils/fetch-json.ts new file mode 100644 index 0000000000..6ddda5455e --- /dev/null +++ b/pages/demos/fake-server/utils/fetch-json.ts @@ -0,0 +1,10 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +export default async function fetchJson(options: RequestInfo | URL): Promise { + const response = await fetch(options); + if (!response.ok) { + throw new Error(`Response error: ${response.status}`); + } else { + return response.json() as Promise; + } +} diff --git a/pages/demos/fake-server/utils/paginate.ts b/pages/demos/fake-server/utils/paginate.ts new file mode 100644 index 0000000000..28f159d0f8 --- /dev/null +++ b/pages/demos/fake-server/utils/paginate.ts @@ -0,0 +1,9 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +export default function paginate(items: T[], pageNumber: number, pageSize = 10) { + const totalPages = Math.ceil(items.length / pageSize); + return { + paginatedItems: items.slice((pageNumber - 1) * pageSize, pageNumber * pageSize), + hasNextPage: pageNumber < totalPages, + }; +} diff --git a/pages/demos/form.page.tsx b/pages/demos/form.page.tsx new file mode 100644 index 0000000000..e807be1247 --- /dev/null +++ b/pages/demos/form.page.tsx @@ -0,0 +1,9 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import { App } from './pages/form/app'; + +export default function Page() { + return ; +} diff --git a/pages/demos/globals.d.ts b/pages/demos/globals.d.ts new file mode 100644 index 0000000000..e13de84b1f --- /dev/null +++ b/pages/demos/globals.d.ts @@ -0,0 +1,4 @@ +declare module '*.jpg' { + const src: string; + export default src; +} diff --git a/pages/demos/i18n-strings/cards.ts b/pages/demos/i18n-strings/cards.ts new file mode 100644 index 0000000000..2b7f2e1d4a --- /dev/null +++ b/pages/demos/i18n-strings/cards.ts @@ -0,0 +1,21 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +import { CardsProps } from '@cloudscape-design/components/cards'; + +import { Distribution } from '../fake-server/types'; + +export const distributionCardsAriaLabels: CardsProps.AriaLabels = { + itemSelectionLabel: (data, row) => `select ${row.id}`, + selectionGroupLabel: 'Distribution selection', + cardsLabel: 'Cards', +}; + +export const renderDistributionCardsAriaLive: CardsProps['renderAriaLive'] = ({ + firstIndex, + lastIndex, + totalItemsCount, +}) => { + return totalItemsCount !== undefined + ? `Displaying items ${firstIndex} to ${lastIndex} of ${totalItemsCount}` + : `Displaying items ${firstIndex} to ${lastIndex}`; +}; diff --git a/pages/demos/i18n-strings/header.ts b/pages/demos/i18n-strings/header.ts new file mode 100644 index 0000000000..1d789045df --- /dev/null +++ b/pages/demos/i18n-strings/header.ts @@ -0,0 +1,12 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +export const getHeaderCounterText = ( + items: ReadonlyArray, + selectedItems: ReadonlyArray | undefined +) => { + return selectedItems && selectedItems?.length > 0 ? `(${selectedItems.length}/${items.length})` : `(${items.length})`; +}; + +export const getHeaderCounterServerSideText = (totalCount: number, selectedCount: number | undefined) => { + return selectedCount && selectedCount > 0 ? `(${selectedCount}/${totalCount}+)` : `(${totalCount}+)`; +}; diff --git a/pages/demos/i18n-strings/index.ts b/pages/demos/i18n-strings/index.ts new file mode 100644 index 0000000000..619f7bdf0a --- /dev/null +++ b/pages/demos/i18n-strings/index.ts @@ -0,0 +1,8 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +export * from './header'; +export * from './pagination'; +export * from './property-filter'; +export * from './table'; +export * from './text-filter'; +export * from './cards'; diff --git a/pages/demos/i18n-strings/pagination.ts b/pages/demos/i18n-strings/pagination.ts new file mode 100644 index 0000000000..7e0ffd9c0a --- /dev/null +++ b/pages/demos/i18n-strings/pagination.ts @@ -0,0 +1,9 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +import { TableProps } from '@cloudscape-design/components/table'; + +export const renderAriaLive: TableProps['renderAriaLive'] = ({ firstIndex, lastIndex, totalItemsCount }) => { + return totalItemsCount !== undefined + ? `Displaying items ${firstIndex} to ${lastIndex} of ${totalItemsCount}` + : `Displaying items ${firstIndex} to ${lastIndex}`; +}; diff --git a/pages/demos/i18n-strings/property-filter.ts b/pages/demos/i18n-strings/property-filter.ts new file mode 100644 index 0000000000..d77e886947 --- /dev/null +++ b/pages/demos/i18n-strings/property-filter.ts @@ -0,0 +1,8 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +import { PropertyFilterProps } from '@cloudscape-design/components/property-filter'; + +export const propertyFilterI18nStrings: PropertyFilterProps.I18nStrings = { + filteringAriaLabel: 'Find distributions', + filteringPlaceholder: 'Find distributions', +}; diff --git a/pages/demos/i18n-strings/table.ts b/pages/demos/i18n-strings/table.ts new file mode 100644 index 0000000000..211a3b0d4b --- /dev/null +++ b/pages/demos/i18n-strings/table.ts @@ -0,0 +1,35 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +import { TableProps } from '@cloudscape-design/components/table'; + +export const baseTableAriaLabels: TableProps.AriaLabels = { + allItemsSelectionLabel: () => 'select all', +}; + +const baseEditableLabels: TableProps.AriaLabels<{ id: string }> = { + activateEditLabel: (column, item) => `Edit ${item.id} ${column.header}`, + cancelEditLabel: column => `Cancel editing ${column.header}`, + submitEditLabel: column => `Submit edit ${column.header}`, +}; + +export const distributionTableAriaLabels: TableProps.AriaLabels<{ id: string }> = { + ...baseTableAriaLabels, + itemSelectionLabel: (data, row) => `select ${row.id}`, + selectionGroupLabel: 'Distribution selection', +}; + +export const distributionEditableTableAriaLabels: TableProps.AriaLabels<{ id: string }> = { + ...distributionTableAriaLabels, + ...baseEditableLabels, +}; + +export function createTableSortLabelFn( + column: TableProps.ColumnDefinition +): TableProps.ColumnDefinition['ariaLabel'] { + if (!column.sortingField && !column.sortingComparator && !column.ariaLabel) { + return; + } + return ({ sorted, descending }) => { + return `${column.header}, ${sorted ? `sorted ${descending ? 'descending' : 'ascending'}` : 'not sorted'}.`; + }; +} diff --git a/pages/demos/i18n-strings/tag-editor.ts b/pages/demos/i18n-strings/tag-editor.ts new file mode 100644 index 0000000000..45038ed940 --- /dev/null +++ b/pages/demos/i18n-strings/tag-editor.ts @@ -0,0 +1,7 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +import { TagEditorProps } from '@cloudscape-design/components/tag-editor'; + +export const tagEditorI18nStrings: TagEditorProps.I18nStrings = { + tagLimit: availableTags => `You can add up to ${availableTags} more tag${availableTags > 1 ? 's' : ''}.`, +}; diff --git a/pages/demos/i18n-strings/text-filter.ts b/pages/demos/i18n-strings/text-filter.ts new file mode 100644 index 0000000000..44c1360dfe --- /dev/null +++ b/pages/demos/i18n-strings/text-filter.ts @@ -0,0 +1,9 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +export const getTextFilterCounterServerSideText = (items: unknown[] = [], pagesCount: number, pageSize: number) => { + const count = pagesCount > 1 ? `${pageSize * (pagesCount - 1)}+` : items.length + ''; + return count === '1' ? `1 match` : `${count} matches`; +}; + +export const getTextFilterCounterText = (count: number | undefined = 0) => + `${count} ${count === 1 ? 'match' : 'matches'}`; diff --git a/pages/demos/manage-tags.page.tsx b/pages/demos/manage-tags.page.tsx new file mode 100644 index 0000000000..0ec6fc68b1 --- /dev/null +++ b/pages/demos/manage-tags.page.tsx @@ -0,0 +1,9 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import { App } from './pages/manage-tags/root'; + +export default function Page() { + return ; +} diff --git a/pages/demos/pages/cards/cards-config.tsx b/pages/demos/pages/cards/cards-config.tsx new file mode 100644 index 0000000000..f5369f45c0 --- /dev/null +++ b/pages/demos/pages/cards/cards-config.tsx @@ -0,0 +1,85 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +import React from 'react'; + +import { CardsProps } from '@cloudscape-design/components/cards'; +import { CollectionPreferencesProps } from '@cloudscape-design/components/collection-preferences'; +import Link from '@cloudscape-design/components/link'; +import StatusIndicator from '@cloudscape-design/components/status-indicator'; + +import { Distribution } from '../../fake-server/types'; + +export const CARD_DEFINITIONS: CardsProps.CardDefinition = { + header: item => ( +
+ + {item.id} + +
+ ), + sections: [ + { + id: 'domainName', + header: 'Domain name', + content: item => item.domainName, + }, + { + id: 'deliveryMethod', + header: 'Delivery method', + content: item => item.deliveryMethod, + }, + { + id: 'sslCertificate', + header: 'SSL certificate', + content: item => item.sslCertificate, + }, + { + id: 'priceClass', + header: 'Price class', + content: item => item.priceClass, + }, + { + id: 'logging', + header: 'Logging', + content: item => item.logging, + }, + { + id: 'origin', + header: 'Origin', + content: item => item.origin, + }, + { + id: 'state', + header: 'State', + content: item => ( + {item.state} + ), + }, + ], +}; + +export const VISIBLE_CONTENT_OPTIONS: CollectionPreferencesProps.VisibleContentPreference['options'] = [ + { + label: 'Main distribution properties', + options: [ + { id: 'domainName', label: 'Domain name' }, + { id: 'deliveryMethod', label: 'Delivery method' }, + { id: 'sslCertificate', label: 'SSL certificate' }, + { id: 'priceClass', label: 'Price class' }, + { id: 'logging', label: 'Logging' }, + { id: 'origin', label: 'Origin' }, + { id: 'state', label: 'State' }, + ], + }, +]; + +export const PAGE_SIZE_OPTIONS: CollectionPreferencesProps.PageSizeOption[] = [ + { value: 10, label: '10 Distributions' }, + { value: 30, label: '30 Distributions' }, + { value: 50, label: '50 Distributions' }, +]; + +export const DEFAULT_PREFERENCES: CollectionPreferencesProps.Preferences = { + pageSize: 30, + visibleContent: ['domainName', 'deliveryMethod', 'state'], +}; diff --git a/pages/demos/pages/cards/common-components.tsx b/pages/demos/pages/cards/common-components.tsx new file mode 100644 index 0000000000..55db14143f --- /dev/null +++ b/pages/demos/pages/cards/common-components.tsx @@ -0,0 +1,37 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +import React from 'react'; + +import BreadcrumbGroup from '@cloudscape-design/components/breadcrumb-group'; +import HelpPanel from '@cloudscape-design/components/help-panel'; + +import { resourcesBreadcrumbs } from '../../common/breadcrumbs'; +import { ExternalLinkGroup } from '../commons'; + +export const Breadcrumbs = () => ( + +); + +const toolsFooter = ( + +); +export const ToolsContent = () => ( + Distributions}> +

+ View your current distributions and related information such as the associated domain names, delivery methods, SSL + certificates, and more. To drill down even further into the details, choose the name of an individual + distribution. +

+ +); diff --git a/pages/demos/pages/cards/root.tsx b/pages/demos/pages/cards/root.tsx new file mode 100644 index 0000000000..ded27f75a0 --- /dev/null +++ b/pages/demos/pages/cards/root.tsx @@ -0,0 +1,205 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +import React, { useEffect, useRef, useState } from 'react'; + +import { useCollection } from '@cloudscape-design/collection-hooks'; +import { AppLayoutProps } from '@cloudscape-design/components/app-layout'; +import Cards from '@cloudscape-design/components/cards'; +import CollectionPreferences from '@cloudscape-design/components/collection-preferences'; +import Flashbar, { FlashbarProps } from '@cloudscape-design/components/flashbar'; +import Pagination from '@cloudscape-design/components/pagination'; +import SplitPanel from '@cloudscape-design/components/split-panel'; +import TextFilter from '@cloudscape-design/components/text-filter'; + +import { Distribution } from '../../fake-server/types'; +import { + distributionCardsAriaLabels, + getHeaderCounterText, + getTextFilterCounterText, + renderDistributionCardsAriaLive, +} from '../../i18n-strings'; +import { FullPageHeader } from '../commons'; +import { + CustomAppLayout, + DemoTopNavigation, + GlobalSplitPanelContent, + Navigation, + TableEmptyState, + TableNoMatchState, + useGlobalSplitPanel, +} from '../commons/common-components'; +import DataProvider from '../commons/data-provider'; +import { useLocalStorage } from '../commons/use-local-storage'; +import { CARD_DEFINITIONS, DEFAULT_PREFERENCES, PAGE_SIZE_OPTIONS, VISIBLE_CONTENT_OPTIONS } from './cards-config'; +import { Breadcrumbs, ToolsContent } from './common-components'; + +import '../../styles/base.scss'; +import '../../styles/top-navigation.scss'; + +function StackedNotifications() { + const [items, setItems] = useState([ + { + type: 'success', + dismissible: true, + dismissLabel: 'Dismiss message', + content: 'This is a success flash message', + id: 'message_5', + onDismiss: () => setItems(items => items.filter(item => item.id !== 'message_5')), + }, + { + type: 'warning', + dismissible: true, + dismissLabel: 'Dismiss message', + content: 'This is a warning flash message', + id: 'message_4', + onDismiss: () => setItems(items => items.filter(item => item.id !== 'message_4')), + }, + { + type: 'error', + dismissible: true, + dismissLabel: 'Dismiss message', + header: 'Failed to update instance id-4890f893e', + content: 'This is a dismissible error message', + id: 'message_3', + onDismiss: () => setItems(items => items.filter(item => item.id !== 'message_3')), + }, + ]); + + return ( + + ); +} + +interface DetailsCardsProps { + loadHelpPanelContent: () => void; +} + +function DetailsCards({ loadHelpPanelContent }: DetailsCardsProps) { + const [loading, setLoading] = useState(true); + const [distributions, setDistributions] = useState([]); + const [preferences, setPreferences] = useLocalStorage('React-Cards-Preferences', DEFAULT_PREFERENCES); + const { items, actions, filteredItemsCount, collectionProps, filterProps, paginationProps } = useCollection( + distributions, + { + filtering: { + empty: , + noMatch: actions.setFiltering('')} />, + }, + pagination: { pageSize: preferences?.pageSize }, + selection: {}, + } + ); + + useEffect(() => { + new DataProvider().getDataWithDates('distributions').then(distributions => { + setDistributions(distributions); + setLoading(false); + }); + }, []); + + return ( + + } + filter={ + + } + pagination={} + preferences={ + setPreferences(detail)} + pageSizePreference={{ + title: 'Page size', + options: PAGE_SIZE_OPTIONS, + }} + visibleContentPreference={{ + title: 'Select visible columns', + options: VISIBLE_CONTENT_OPTIONS, + }} + /> + } + /> + ); +} + +export function App() { + const [toolsOpen, setToolsOpen] = useState(false); + const { splitPanelOpen, onSplitPanelToggle, splitPanelSize, onSplitPanelResize, splitPanelPreferences } = + useGlobalSplitPanel(); + const appLayout = useRef(null); + return ( + <> + + } + notifications={} + breadcrumbs={} + content={ + { + setToolsOpen(true); + appLayout.current?.focusToolsClose(); + }} + /> + } + contentType="cards" + tools={} + toolsOpen={toolsOpen} + onToolsChange={({ detail }) => setToolsOpen(detail.open)} + splitPanelOpen={splitPanelOpen} + onSplitPanelToggle={onSplitPanelToggle} + splitPanelSize={splitPanelSize} + onSplitPanelResize={onSplitPanelResize} + splitPanelPreferences={splitPanelPreferences} + splitPanel={ + + + + } + stickyNotifications={true} + /> + + ); +} diff --git a/pages/demos/pages/chat/additional-info/dialog.tsx b/pages/demos/pages/chat/additional-info/dialog.tsx new file mode 100644 index 0000000000..faaa38d937 --- /dev/null +++ b/pages/demos/pages/chat/additional-info/dialog.tsx @@ -0,0 +1,55 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +import React from 'react'; + +import Button from '@cloudscape-design/components/button'; + +import '../../../styles/dialog.scss'; + +const Dialog = React.forwardRef( + ( + { + children, + footer, + onDismiss, + ariaLabel, + }: { + children: React.ReactNode; + footer: React.ReactNode; + onDismiss: () => void; + ariaLabel: string; + }, + ref: React.Ref + ) => { + return ( +
+
+
+
+ +
{children}
+
+ +
{footer}
+
+ ); + } +); + +Dialog.displayName = 'Dialog'; + +export default Dialog; diff --git a/pages/demos/pages/chat/additional-info/feedback-dialog.tsx b/pages/demos/pages/chat/additional-info/feedback-dialog.tsx new file mode 100644 index 0000000000..933fc19b3d --- /dev/null +++ b/pages/demos/pages/chat/additional-info/feedback-dialog.tsx @@ -0,0 +1,125 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: MIT-0 +import React, { useEffect, useRef } from 'react'; + +import Box from '@cloudscape-design/components/box'; +import Button from '@cloudscape-design/components/button'; +import Checkbox from '@cloudscape-design/components/checkbox'; +import Form from '@cloudscape-design/components/form'; +import FormField from '@cloudscape-design/components/form-field'; +import SpaceBetween from '@cloudscape-design/components/space-between'; +import Textarea from '@cloudscape-design/components/textarea'; + +import Dialog from './dialog'; + +export default function FeedbackDialog({ onDismiss, onSubmit }: { onDismiss: () => void; onSubmit: () => void }) { + const [feedbackOptions, setFeedbackOptions] = React.useState({ + harmful: false, + incomplete: false, + inaccurate: false, + other: false, + }); + const [feedbackText, setFeedbackText] = React.useState(''); + const dialogRef = useRef(null); + const triggerRef = useRef(null); + + useEffect(() => { + // Store the element that had focus before dialog opened + triggerRef.current = document.activeElement as HTMLElement; + + // Focus the dialog container when it opens + dialogRef.current?.focus(); + + // Cleanup: Return focus to the trigger element when dialog closes + return () => { + triggerRef.current?.focus(); + }; + }, [dialogRef]); + + const selectOption = (option: string, checked: boolean) => + setFeedbackOptions({ ...feedbackOptions, [option]: checked }); + + const isFeedbackOptionSelected = Object.values(feedbackOptions).some(val => !!val); + const isSubmittable = isFeedbackOptionSelected || feedbackText.length > 0; + + const submitFeedback = () => { + if (!isSubmittable) { + return; + } + + onSubmit(); + }; + + return ( + + + + + + } + > +
+ Tell us more - optional + + } + > + + + + selectOption('harmful', detail.checked)} + > + Harmful + + selectOption('incomplete', detail.checked)} + > + Incomplete + + selectOption('inaccurate', detail.checked)} + > + Inaccurate + + selectOption('other', detail.checked)} + > + Other + + + + + +