@cloudscape-design/components-themeable 3.0.759 → 3.0.760
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/alert/analytics-metadata/styles.scss +8 -0
- package/lib/internal/scss/progress-bar/styles.scss +5 -28
- package/lib/internal/scss/property-filter/analytics-metadata/styles.scss +9 -0
- package/lib/internal/template/alert/actions-wrapper/index.d.ts.map +1 -1
- package/lib/internal/template/alert/actions-wrapper/index.js +5 -1
- package/lib/internal/template/alert/actions-wrapper/index.js.map +1 -1
- package/lib/internal/template/alert/analytics-metadata/interfaces.d.ts +20 -0
- package/lib/internal/template/alert/analytics-metadata/interfaces.d.ts.map +1 -0
- package/lib/internal/template/alert/analytics-metadata/interfaces.js +4 -0
- package/lib/internal/template/alert/analytics-metadata/interfaces.js.map +1 -0
- package/lib/internal/template/alert/analytics-metadata/styles.css.js +6 -0
- package/lib/internal/template/alert/analytics-metadata/styles.scoped.css +7 -0
- package/lib/internal/template/alert/analytics-metadata/styles.selectors.js +7 -0
- package/lib/internal/template/alert/index.d.ts.map +1 -1
- package/lib/internal/template/alert/index.js +10 -1
- package/lib/internal/template/alert/index.js.map +1 -1
- package/lib/internal/template/alert/internal.d.ts.map +1 -1
- package/lib/internal/template/alert/internal.js +6 -2
- package/lib/internal/template/alert/internal.js.map +1 -1
- package/lib/internal/template/internal/base-component/styles.scoped.css +10 -6
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/environment.json +1 -1
- package/lib/internal/template/internal/generated/styles/tokens.d.ts +1 -0
- package/lib/internal/template/internal/generated/styles/tokens.js +3 -2
- package/lib/internal/template/internal/generated/theming/index.cjs +37 -6
- package/lib/internal/template/internal/generated/theming/index.js +37 -6
- package/lib/internal/template/popover/body.d.ts +2 -1
- package/lib/internal/template/popover/body.d.ts.map +1 -1
- package/lib/internal/template/popover/body.js +3 -2
- package/lib/internal/template/popover/body.js.map +1 -1
- package/lib/internal/template/popover/internal.d.ts +1 -0
- package/lib/internal/template/popover/internal.d.ts.map +1 -1
- package/lib/internal/template/popover/internal.js +2 -2
- package/lib/internal/template/popover/internal.js.map +1 -1
- package/lib/internal/template/progress-bar/styles.css.js +19 -19
- package/lib/internal/template/progress-bar/styles.scoped.css +35 -53
- package/lib/internal/template/progress-bar/styles.selectors.js +19 -19
- package/lib/internal/template/property-filter/analytics-metadata/interfaces.d.ts +47 -0
- package/lib/internal/template/property-filter/analytics-metadata/interfaces.d.ts.map +1 -0
- package/lib/internal/template/property-filter/analytics-metadata/interfaces.js +4 -0
- package/lib/internal/template/property-filter/analytics-metadata/interfaces.js.map +1 -0
- package/lib/internal/template/property-filter/analytics-metadata/styles.css.js +7 -0
- package/lib/internal/template/property-filter/analytics-metadata/styles.scoped.css +8 -0
- package/lib/internal/template/property-filter/analytics-metadata/styles.selectors.js +8 -0
- package/lib/internal/template/property-filter/filtering-token/index.d.ts +1 -1
- package/lib/internal/template/property-filter/filtering-token/index.d.ts.map +1 -1
- package/lib/internal/template/property-filter/filtering-token/index.js +16 -8
- package/lib/internal/template/property-filter/filtering-token/index.js.map +1 -1
- package/lib/internal/template/property-filter/index.d.ts.map +1 -1
- package/lib/internal/template/property-filter/index.js +11 -1
- package/lib/internal/template/property-filter/index.js.map +1 -1
- package/lib/internal/template/property-filter/internal.d.ts.map +1 -1
- package/lib/internal/template/property-filter/internal.js +11 -6
- package/lib/internal/template/property-filter/internal.js.map +1 -1
- package/lib/internal/template/property-filter/token-editor-inputs.js +2 -2
- package/lib/internal/template/property-filter/token-editor-inputs.js.map +1 -1
- package/lib/internal/template/property-filter/token-editor.d.ts.map +1 -1
- package/lib/internal/template/property-filter/token-editor.js +9 -2
- package/lib/internal/template/property-filter/token-editor.js.map +1 -1
- package/lib/internal/template/property-filter/token.d.ts.map +1 -1
- package/lib/internal/template/property-filter/token.js +13 -5
- package/lib/internal/template/property-filter/token.js.map +1 -1
- package/package.json +1 -1
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
|
|
38
38
|
.label {
|
|
39
39
|
&-flash {
|
|
40
|
-
color:
|
|
40
|
+
color: inherit;
|
|
41
41
|
font-weight: styles.$font-weight-bold;
|
|
42
42
|
}
|
|
43
43
|
&-key-value {
|
|
@@ -94,14 +94,11 @@ $background-color-in-flash: awsui.$color-background-progress-bar-layout-in-flash
|
|
|
94
94
|
$bar-color: awsui.$color-background-progress-bar-content-default;
|
|
95
95
|
$bar-color-in-flash: awsui.$color-background-progress-bar-content-in-flash;
|
|
96
96
|
|
|
97
|
-
// Current version of Edge has a known bug with CSS variables used in pseudo elements.
|
|
98
|
-
$bar-color-edge: #0073bb;
|
|
99
|
-
$bar-color-edge-in-flash: rgba(255, 255, 255, 0.7);
|
|
100
|
-
|
|
101
97
|
.progress {
|
|
102
98
|
inline-size: 100%;
|
|
103
99
|
margin-inline-end: awsui.$space-s;
|
|
104
100
|
min-inline-size: 0;
|
|
101
|
+
|
|
105
102
|
@include general-progress-background-style;
|
|
106
103
|
background-color: $background-color;
|
|
107
104
|
|
|
@@ -127,38 +124,18 @@ $bar-color-edge-in-flash: rgba(255, 255, 255, 0.7);
|
|
|
127
124
|
background-color: $bar-color;
|
|
128
125
|
}
|
|
129
126
|
|
|
130
|
-
&::-ms-fill {
|
|
131
|
-
@include general-progress-bar-style;
|
|
132
|
-
background-color: $bar-color-edge;
|
|
133
|
-
border-block: none;
|
|
134
|
-
border-inline: none;
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
&.complete::-ms-fill {
|
|
138
|
-
border-start-start-radius: 10px;
|
|
139
|
-
border-start-end-radius: 10px;
|
|
140
|
-
border-end-start-radius: 10px;
|
|
141
|
-
border-end-end-radius: 10px;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
127
|
&.progress-in-flash {
|
|
145
128
|
background-color: $background-color-in-flash;
|
|
129
|
+
&::-moz-progress-bar {
|
|
130
|
+
background-color: $bar-color-in-flash;
|
|
131
|
+
}
|
|
146
132
|
|
|
147
133
|
&::-webkit-progress-bar {
|
|
148
134
|
background-color: $background-color-in-flash;
|
|
149
135
|
}
|
|
150
|
-
|
|
151
136
|
&::-webkit-progress-value {
|
|
152
137
|
background-color: $bar-color-in-flash;
|
|
153
138
|
}
|
|
154
|
-
|
|
155
|
-
&::-moz-progress-bar {
|
|
156
|
-
background-color: $bar-color-in-flash;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
&::-ms-fill {
|
|
160
|
-
background-color: $bar-color-edge-in-flash;
|
|
161
|
-
}
|
|
162
139
|
}
|
|
163
140
|
}
|
|
164
141
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/alert/actions-wrapper/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/alert/actions-wrapper/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAuB,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AA2B5E,UAAU,mBAAmB;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,YAAY,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iBAAiB,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAC1C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,aAAa,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;CAC/C;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,eAAe,EACf,MAAM,EACN,iBAAiB,EACjB,UAAU,EACV,aAAa,GACd,EAAE,mBAAmB,sBAYrB"}
|
|
@@ -2,11 +2,15 @@
|
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
|
+
import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
|
|
5
6
|
import InternalButton from '../../button/internal';
|
|
6
7
|
import styles from './styles.css.js';
|
|
7
8
|
function createActionButton(testUtilClasses, action, buttonText, onButtonClick) {
|
|
8
9
|
if (!action && buttonText) {
|
|
9
|
-
action = (React.createElement(
|
|
10
|
+
action = (React.createElement("span", Object.assign({}, getAnalyticsMetadataAttribute({
|
|
11
|
+
action: 'buttonClick',
|
|
12
|
+
})),
|
|
13
|
+
React.createElement(InternalButton, { className: testUtilClasses.actionButton, onClick: onButtonClick, formAction: "none" }, buttonText)));
|
|
10
14
|
}
|
|
11
15
|
return action ? React.createElement("div", { className: testUtilClasses.actionSlot }, action) : null;
|
|
12
16
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/alert/actions-wrapper/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,cAAuC,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/alert/actions-wrapper/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,cAAuC,MAAM,uBAAuB,CAAC;AAG5E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,SAAS,kBAAkB,CACzB,eAAuD,EACvD,MAAuB,EACvB,UAA2B,EAC3B,aAA6C;IAE7C,IAAI,CAAC,MAAM,IAAI,UAAU,EAAE;QACzB,MAAM,GAAG,CACP,8CACM,6BAA6B,CAAC;YAChC,MAAM,EAAE,aAAa;SACiC,CAAC;YAEzD,oBAAC,cAAc,IAAC,SAAS,EAAE,eAAe,CAAC,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAC,MAAM,IAC/F,UAAU,CACI,CACZ,CACR,CAAC;KACH;IACD,OAAO,MAAM,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,eAAe,CAAC,UAAU,IAAG,MAAM,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;AACpF,CAAC;AAWD,MAAM,UAAU,cAAc,CAAC,EAC7B,SAAS,EACT,eAAe,EACf,MAAM,EACN,iBAAiB,EACjB,UAAU,EACV,aAAa,GACO;IACpB,MAAM,YAAY,GAAG,kBAAkB,CAAC,eAAe,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC;IAC5F,IAAI,CAAC,YAAY,IAAI,iBAAiB,CAAC,MAAM,KAAK,CAAC,EAAE;QACnD,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC;QACzC,YAAY;QACZ,iBAAiB,CACd,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalButton, { InternalButtonProps } from '../../button/internal';\nimport { GeneratedAnalyticsMetadataAlertButtonClick } from '../analytics-metadata/interfaces';\n\nimport styles from './styles.css.js';\n\nfunction createActionButton(\n testUtilClasses: ActionsWrapperProps['testUtilClasses'],\n action: React.ReactNode,\n buttonText: React.ReactNode,\n onButtonClick: InternalButtonProps['onClick']\n) {\n if (!action && buttonText) {\n action = (\n <span\n {...getAnalyticsMetadataAttribute({\n action: 'buttonClick',\n } as Partial<GeneratedAnalyticsMetadataAlertButtonClick>)}\n >\n <InternalButton className={testUtilClasses.actionButton} onClick={onButtonClick} formAction=\"none\">\n {buttonText}\n </InternalButton>\n </span>\n );\n }\n return action ? <div className={testUtilClasses.actionSlot}>{action}</div> : null;\n}\n\ninterface ActionsWrapperProps {\n className: string;\n testUtilClasses: { actionSlot: string; actionButton: string };\n action: React.ReactNode;\n discoveredActions: Array<React.ReactNode>;\n buttonText: React.ReactNode;\n onButtonClick: InternalButtonProps['onClick'];\n}\n\nexport function ActionsWrapper({\n className,\n testUtilClasses,\n action,\n discoveredActions,\n buttonText,\n onButtonClick,\n}: ActionsWrapperProps) {\n const actionButton = createActionButton(testUtilClasses, action, buttonText, onButtonClick);\n if (!actionButton && discoveredActions.length === 0) {\n return null;\n }\n\n return (\n <div className={clsx(styles.root, className)}>\n {actionButton}\n {discoveredActions}\n </div>\n );\n}\n"]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export interface GeneratedAnalyticsMetadataAlertDismiss {
|
|
2
|
+
action: 'dismiss';
|
|
3
|
+
detail: {
|
|
4
|
+
label: string;
|
|
5
|
+
};
|
|
6
|
+
}
|
|
7
|
+
export interface GeneratedAnalyticsMetadataAlertButtonClick {
|
|
8
|
+
action: 'buttonClick';
|
|
9
|
+
detail: {
|
|
10
|
+
label: string;
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
export interface GeneratedAnalyticsMetadataAlertComponent {
|
|
14
|
+
name: 'awsui.Alert';
|
|
15
|
+
label: string;
|
|
16
|
+
properties: {
|
|
17
|
+
type: string;
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
//# sourceMappingURL=interfaces.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/alert/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,sCAAsC;IACrD,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,MAAM,WAAW,0CAA0C;IACzD,MAAM,EAAE,aAAa,CAAC;IACtB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,MAAM,WAAW,wCAAwC;IACvD,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE;QACV,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;CACH"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/alert/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface GeneratedAnalyticsMetadataAlertDismiss {\n action: 'dismiss';\n detail: {\n label: string;\n };\n}\n\nexport interface GeneratedAnalyticsMetadataAlertButtonClick {\n action: 'buttonClick';\n detail: {\n label: string;\n };\n}\n\nexport interface GeneratedAnalyticsMetadataAlertComponent {\n name: 'awsui.Alert';\n label: string;\n properties: {\n type: string;\n };\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/alert/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/alert/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAWzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,mFA+EV,CAAC;AAGF,eAAe,KAAK,CAAC"}
|
|
@@ -2,6 +2,7 @@ import { __rest } from "tslib";
|
|
|
2
2
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
3
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
4
|
import React, { useEffect } from 'react';
|
|
5
|
+
import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
|
|
5
6
|
import { FunnelMetrics } from '../internal/analytics';
|
|
6
7
|
import { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
|
|
7
8
|
import { getNameFromSelector, getSubStepAllSelector } from '../internal/analytics/selectors';
|
|
@@ -9,6 +10,7 @@ import { getAnalyticsMetadataProps } from '../internal/base-component';
|
|
|
9
10
|
import useBaseComponent from '../internal/hooks/use-base-component';
|
|
10
11
|
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
11
12
|
import InternalAlert from './internal';
|
|
13
|
+
import analyticsSelectors from './analytics-metadata/styles.css.js';
|
|
12
14
|
const Alert = React.forwardRef((_a, ref) => {
|
|
13
15
|
var { type = 'info', visible = true } = _a, props = __rest(_a, ["type", "visible"]);
|
|
14
16
|
const analyticsMetadata = getAnalyticsMetadataProps(props);
|
|
@@ -58,7 +60,14 @@ const Alert = React.forwardRef((_a, ref) => {
|
|
|
58
60
|
}
|
|
59
61
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
60
62
|
}, [funnelInteractionId, visible, submissionAttempt, errorCount]);
|
|
61
|
-
|
|
63
|
+
const componentAnalyticsMetadata = {
|
|
64
|
+
name: 'awsui.Alert',
|
|
65
|
+
label: `.${analyticsSelectors.header}`,
|
|
66
|
+
properties: {
|
|
67
|
+
type,
|
|
68
|
+
},
|
|
69
|
+
};
|
|
70
|
+
return (React.createElement(InternalAlert, Object.assign({ type: type, visible: visible }, props, baseComponentProps, { ref: ref }, getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata }))));
|
|
62
71
|
});
|
|
63
72
|
applyDisplayName(Alert, 'Alert');
|
|
64
73
|
export default Alert;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/alert/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AACpG,OAAO,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAC7F,OAAO,EAAkC,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AACvG,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/alert/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect } from 'react';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getNameFromSelector, getSubStepAllSelector } from '../internal/analytics/selectors';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { GeneratedAnalyticsMetadataAlertComponent } from './analytics-metadata/interfaces';\nimport { AlertProps } from './interfaces';\nimport InternalAlert from './internal';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\n\nexport { AlertProps };\n\nconst Alert = React.forwardRef(\n ({ type = 'info', visible = true, ...props }: AlertProps, ref: React.Ref<AlertProps.Ref>) => {\n const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);\n const baseComponentProps = useBaseComponent<HTMLDivElement>(\n 'Alert',\n {\n props: { type, visible, dismissible: props.dismissible },\n },\n analyticsMetadata\n );\n\n const { funnelIdentifier, funnelInteractionId, funnelErrorContext, submissionAttempt, funnelState, errorCount } =\n useFunnel();\n const { stepNumber, stepNameSelector, stepIdentifier } = useFunnelStep();\n const { subStepSelector, subStepNameSelector, subStepIdentifier, subStepErrorContext } = useFunnelSubStep();\n\n useEffect(() => {\n if (funnelInteractionId && visible && type === 'error' && funnelState.current !== 'complete') {\n const stepName = getNameFromSelector(stepNameSelector);\n const subStepName = getNameFromSelector(subStepNameSelector);\n\n errorCount.current++;\n\n // We don't want to report an error if it is hidden, e.g. inside an Expandable Section.\n const errorIsVisible = (baseComponentProps.__internalRootRef.current?.getBoundingClientRect()?.width ?? 0) > 0;\n\n if (errorIsVisible) {\n if (subStepSelector) {\n FunnelMetrics.funnelSubStepError({\n funnelInteractionId,\n funnelIdentifier,\n stepIdentifier,\n subStepSelector,\n subStepName,\n subStepNameSelector,\n stepNumber,\n stepName,\n stepNameSelector,\n subStepAllSelector: getSubStepAllSelector(),\n subStepIdentifier,\n subStepErrorContext,\n });\n } else {\n FunnelMetrics.funnelError({\n funnelIdentifier,\n funnelInteractionId,\n funnelErrorContext,\n });\n }\n }\n\n return () => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n errorCount.current--;\n };\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [funnelInteractionId, visible, submissionAttempt, errorCount]);\n\n const componentAnalyticsMetadata: GeneratedAnalyticsMetadataAlertComponent = {\n name: 'awsui.Alert',\n label: `.${analyticsSelectors.header}`,\n properties: {\n type,\n },\n };\n\n return (\n <InternalAlert\n type={type}\n visible={visible}\n {...props}\n {...baseComponentProps}\n ref={ref}\n {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}\n />\n );\n }\n);\n\napplyDisplayName(Alert, 'Alert');\nexport default Alert;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/alert/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/alert/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAgBtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAQlF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAgB1C,QAAA,MAAM,aAAa;;qFA4GlB,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -3,6 +3,7 @@ import { __rest } from "tslib";
|
|
|
3
3
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
4
|
import React, { useRef } from 'react';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
|
+
import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
|
|
6
7
|
import { InternalButton } from '../button/internal';
|
|
7
8
|
import { useInternalI18n } from '../i18n/context';
|
|
8
9
|
import InternalIcon from '../icon/internal';
|
|
@@ -18,6 +19,7 @@ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
|
18
19
|
import { awsuiPluginsInternal } from '../internal/plugins/api';
|
|
19
20
|
import { createUseDiscoveredAction } from '../internal/plugins/helpers';
|
|
20
21
|
import { ActionsWrapper } from './actions-wrapper';
|
|
22
|
+
import analyticsSelectors from './analytics-metadata/styles.css.js';
|
|
21
23
|
import styles from './styles.css.js';
|
|
22
24
|
const typeToIcon = {
|
|
23
25
|
error: 'status-negative',
|
|
@@ -49,13 +51,15 @@ const InternalAlert = React.forwardRef((_a, ref) => {
|
|
|
49
51
|
React.createElement("div", { className: clsx(styles.icon, styles.text), role: "img", "aria-label": statusIconAriaLabel },
|
|
50
52
|
React.createElement(InternalIcon, { name: typeToIcon[type], size: size })),
|
|
51
53
|
React.createElement("div", { className: clsx(styles.message, styles.text) },
|
|
52
|
-
header && (React.createElement("div", { className: styles.header, ref: headerRef }, header)),
|
|
54
|
+
header && (React.createElement("div", { className: clsx(styles.header, analyticsSelectors.header), ref: headerRef }, header)),
|
|
53
55
|
React.createElement("div", { className: styles.content, ref: contentRef }, children))),
|
|
54
56
|
React.createElement(ActionsWrapper, { className: styles.action, testUtilClasses: {
|
|
55
57
|
actionSlot: styles['action-slot'],
|
|
56
58
|
actionButton: styles['action-button'],
|
|
57
59
|
}, action: action, discoveredActions: discoveredActions, buttonText: buttonText, onButtonClick: () => fireNonCancelableEvent(onButtonClick) }),
|
|
58
|
-
dismissible && (React.createElement("div", { className: styles.dismiss },
|
|
60
|
+
dismissible && (React.createElement("div", Object.assign({ className: styles.dismiss }, getAnalyticsMetadataAttribute({
|
|
61
|
+
action: 'dismiss',
|
|
62
|
+
})),
|
|
59
63
|
React.createElement(InternalButton, { className: styles['dismiss-button'], variant: "icon", iconName: "close", formAction: "none", ariaLabel: i18n('dismissAriaLabel', dismissAriaLabel), onClick: () => fireNonCancelableEvent(onDismiss) }))))))));
|
|
60
64
|
});
|
|
61
65
|
export default InternalAlert;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/alert/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,aAAa,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,yBAAyB,EAAE,MAAM,kDAAkD,CAAC;AAC7F,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAE9D,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAExE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/alert/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { InternalButton } from '../button/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport { DATA_ATTR_ANALYTICS_ALERT } from '../internal/analytics/selectors';\nimport { getBaseProps } from '../internal/base-component';\nimport VisualContext from '../internal/components/visual-context';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { awsuiPluginsInternal } from '../internal/plugins/api';\nimport { createUseDiscoveredAction } from '../internal/plugins/helpers';\nimport { SomeRequired } from '../internal/types';\nimport { ActionsWrapper } from './actions-wrapper';\nimport { GeneratedAnalyticsMetadataAlertDismiss } from './analytics-metadata/interfaces';\nimport { AlertProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nconst typeToIcon: Record<AlertProps.Type, IconProps['name']> = {\n error: 'status-negative',\n warning: 'status-warning',\n success: 'status-positive',\n info: 'status-info',\n};\n\ntype InternalAlertProps = SomeRequired<AlertProps, 'type'> & InternalBaseComponentProps<HTMLDivElement>;\n\nconst useDiscoveredAction = createUseDiscoveredAction(awsuiPluginsInternal.alert.onActionRegistered);\n\nconst InternalAlert = React.forwardRef(\n (\n {\n type,\n statusIconAriaLabel,\n visible = true,\n dismissible,\n dismissAriaLabel,\n children,\n header,\n buttonText,\n action,\n onDismiss,\n onButtonClick,\n __internalRootRef = null,\n ...rest\n }: InternalAlertProps,\n ref: React.Ref<AlertProps.Ref>\n ) => {\n const baseProps = getBaseProps(rest);\n const i18n = useInternalI18n('alert');\n\n const focusRef = useRef<HTMLDivElement>(null);\n useForwardFocus(ref, focusRef);\n\n const [breakpoint, breakpointRef] = useContainerBreakpoints(['xs']);\n const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);\n\n const isRefresh = useVisualRefresh();\n const size = isRefresh ? 'normal' : header && children ? 'big' : 'normal';\n\n const { discoveredActions, headerRef, contentRef } = useDiscoveredAction(type);\n\n const hasAction = Boolean(action || buttonText || discoveredActions.length);\n\n const analyticsAttributes = {\n [DATA_ATTR_ANALYTICS_ALERT]: type,\n };\n\n return (\n <div\n {...baseProps}\n {...analyticsAttributes}\n aria-hidden={!visible}\n className={clsx(styles.root, { [styles.hidden]: !visible }, baseProps.className)}\n ref={mergedRef}\n >\n <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n <VisualContext contextName=\"alert\">\n <div\n className={clsx(\n styles.alert,\n styles[`type-${type}`],\n styles[`icon-size-${size}`],\n hasAction && styles['with-action'],\n dismissible && styles['with-dismiss'],\n styles[`breakpoint-${breakpoint}`]\n )}\n >\n <div className={styles['alert-focus-wrapper']} tabIndex={-1} ref={focusRef}>\n <div className={clsx(styles.icon, styles.text)} role=\"img\" aria-label={statusIconAriaLabel}>\n <InternalIcon name={typeToIcon[type]} size={size} />\n </div>\n <div className={clsx(styles.message, styles.text)}>\n {header && (\n <div className={clsx(styles.header, analyticsSelectors.header)} ref={headerRef}>\n {header}\n </div>\n )}\n <div className={styles.content} ref={contentRef}>\n {children}\n </div>\n </div>\n </div>\n <ActionsWrapper\n className={styles.action}\n testUtilClasses={{\n actionSlot: styles['action-slot'],\n actionButton: styles['action-button'],\n }}\n action={action}\n discoveredActions={discoveredActions}\n buttonText={buttonText}\n onButtonClick={() => fireNonCancelableEvent(onButtonClick)}\n />\n {dismissible && (\n <div\n className={styles.dismiss}\n {...getAnalyticsMetadataAttribute({\n action: 'dismiss',\n } as Partial<GeneratedAnalyticsMetadataAlertDismiss>)}\n >\n <InternalButton\n className={styles['dismiss-button']}\n variant=\"icon\"\n iconName=\"close\"\n formAction=\"none\"\n ariaLabel={i18n('dismissAriaLabel', dismissAriaLabel)}\n onClick={() => fireNonCancelableEvent(onDismiss)}\n />\n </div>\n )}\n </div>\n </VisualContext>\n </LinkDefaultVariantContext.Provider>\n </div>\n );\n }\n);\n\nexport default InternalAlert;\n"]}
|
|
@@ -217,9 +217,9 @@
|
|
|
217
217
|
--color-background-notification-stack-bar-hover-lt97pm:#545b64;
|
|
218
218
|
--color-background-popover-7gvi00:#ffffff;
|
|
219
219
|
--color-background-progress-bar-content-default-6mb079:#0073bb;
|
|
220
|
-
--color-background-progress-bar-content-in-flash-
|
|
220
|
+
--color-background-progress-bar-content-in-flash-9g1w1y:rgba(255, 255, 255, 0.7);
|
|
221
221
|
--color-background-progress-bar-layout-default-d4fh0m:#eaeded;
|
|
222
|
-
--color-background-progress-bar-layout-in-flash-
|
|
222
|
+
--color-background-progress-bar-layout-in-flash-7lb4jj:rgba(255, 255, 255, 0.25);
|
|
223
223
|
--color-background-segment-active-vzk94k:#0073bb;
|
|
224
224
|
--color-background-segment-default-h5aj3c:#ffffff;
|
|
225
225
|
--color-background-segment-disabled-w1oq24:#ffffff;
|
|
@@ -851,7 +851,7 @@
|
|
|
851
851
|
--color-background-notification-grey-hf7l1x:#687078;
|
|
852
852
|
--color-background-popover-7gvi00:#21252c;
|
|
853
853
|
--color-background-progress-bar-content-default-6mb079:#00a1c9;
|
|
854
|
-
--color-background-progress-bar-content-in-flash-
|
|
854
|
+
--color-background-progress-bar-content-in-flash-9g1w1y:#fafafa;
|
|
855
855
|
--color-background-progress-bar-layout-default-d4fh0m:#414750;
|
|
856
856
|
--color-background-segment-active-vzk94k:#00a1c9;
|
|
857
857
|
--color-background-segment-default-h5aj3c:#2a2e33;
|
|
@@ -1163,7 +1163,7 @@
|
|
|
1163
1163
|
--color-background-notification-grey-hf7l1x:#687078;
|
|
1164
1164
|
--color-background-popover-7gvi00:#21252c;
|
|
1165
1165
|
--color-background-progress-bar-content-default-6mb079:#00a1c9;
|
|
1166
|
-
--color-background-progress-bar-content-in-flash-
|
|
1166
|
+
--color-background-progress-bar-content-in-flash-9g1w1y:#fafafa;
|
|
1167
1167
|
--color-background-progress-bar-layout-default-d4fh0m:#414750;
|
|
1168
1168
|
--color-background-segment-active-vzk94k:#00a1c9;
|
|
1169
1169
|
--color-background-segment-default-h5aj3c:#2a2e33;
|
|
@@ -1341,6 +1341,8 @@
|
|
|
1341
1341
|
}
|
|
1342
1342
|
|
|
1343
1343
|
.awsui-context-flashbar-warning:not(#\9) {
|
|
1344
|
+
--color-background-progress-bar-content-in-flash-9g1w1y:#16191f;
|
|
1345
|
+
--color-background-progress-bar-layout-in-flash-7lb4jj:rgba(0, 0, 0, 0.1);
|
|
1344
1346
|
--color-border-calendar-grid-2ab4m1:#16191f;
|
|
1345
1347
|
--color-border-calendar-grid-selected-focus-ring-hhlvy8:#16191f;
|
|
1346
1348
|
--color-border-container-divider-gl15p9:#16191f;
|
|
@@ -1477,7 +1479,7 @@
|
|
|
1477
1479
|
--color-background-notification-stack-bar-active-pfly17:#232f3e;
|
|
1478
1480
|
--color-background-notification-stack-bar-hover-lt97pm:#414d5c;
|
|
1479
1481
|
--color-background-progress-bar-content-default-6mb079:#0972d3;
|
|
1480
|
-
--color-background-progress-bar-content-in-flash-
|
|
1482
|
+
--color-background-progress-bar-content-in-flash-9g1w1y:#ffffff;
|
|
1481
1483
|
--color-background-progress-bar-layout-default-d4fh0m:#e9ebed;
|
|
1482
1484
|
--color-background-segment-active-vzk94k:#0972d3;
|
|
1483
1485
|
--color-background-slider-handle-default-nidjhe:#0972d3;
|
|
@@ -2113,7 +2115,7 @@
|
|
|
2113
2115
|
--color-background-notification-grey-hf7l1x:#5f6b7a;
|
|
2114
2116
|
--color-background-popover-7gvi00:#192534;
|
|
2115
2117
|
--color-background-progress-bar-content-default-6mb079:#539fe5;
|
|
2116
|
-
--color-background-progress-bar-content-in-flash-
|
|
2118
|
+
--color-background-progress-bar-content-in-flash-9g1w1y:#ffffff;
|
|
2117
2119
|
--color-background-progress-bar-layout-default-d4fh0m:#354150;
|
|
2118
2120
|
--color-background-segment-active-vzk94k:#539fe5;
|
|
2119
2121
|
--color-background-segment-default-h5aj3c:#0f1b2a;
|
|
@@ -2981,6 +2983,7 @@
|
|
|
2981
2983
|
--color-background-button-normal-hover-yqjern:rgba(0, 7, 22, 0.05);
|
|
2982
2984
|
--color-background-button-primary-default-f3veih:#414d5c;
|
|
2983
2985
|
--color-background-button-primary-hover-79i9hj:#000716;
|
|
2986
|
+
--color-background-progress-bar-content-in-flash-9g1w1y:#000716;
|
|
2984
2987
|
--color-background-segment-default-h5aj3c:transparent;
|
|
2985
2988
|
--color-background-segment-hover-9sxn8u:transparent;
|
|
2986
2989
|
--color-border-button-normal-active-mn8z2y:#000716;
|
|
@@ -3020,6 +3023,7 @@
|
|
|
3020
3023
|
--color-background-button-normal-hover-yqjern:rgba(0, 7, 22, 0.05);
|
|
3021
3024
|
--color-background-button-primary-default-f3veih:#414d5c;
|
|
3022
3025
|
--color-background-button-primary-hover-79i9hj:#000716;
|
|
3026
|
+
--color-background-progress-bar-content-in-flash-9g1w1y:#000716;
|
|
3023
3027
|
--color-background-segment-default-h5aj3c:transparent;
|
|
3024
3028
|
--color-background-segment-hover-9sxn8u:transparent;
|
|
3025
3029
|
--color-border-button-normal-active-mn8z2y:#000716;
|
|
@@ -206,6 +206,7 @@ export const colorChartsPaletteCategorical47: string;
|
|
|
206
206
|
export const colorChartsPaletteCategorical48: string;
|
|
207
207
|
export const colorChartsPaletteCategorical49: string;
|
|
208
208
|
export const colorChartsPaletteCategorical50: string;
|
|
209
|
+
export const colorGreyOpaque10: string;
|
|
209
210
|
export const colorGreyOpaque25: string;
|
|
210
211
|
export const colorGreyOpaque40: string;
|
|
211
212
|
export const colorGreyOpaque50: string;
|
|
@@ -206,6 +206,7 @@ export var colorChartsPaletteCategorical47 = "var(--color-charts-palette-categor
|
|
|
206
206
|
export var colorChartsPaletteCategorical48 = "var(--color-charts-palette-categorical-48-tptw1p, #014b44)";
|
|
207
207
|
export var colorChartsPaletteCategorical49 = "var(--color-charts-palette-categorical-49-6lrkes, #431d84)";
|
|
208
208
|
export var colorChartsPaletteCategorical50 = "var(--color-charts-palette-categorical-50-mqbaxr, #732c02)";
|
|
209
|
+
export var colorGreyOpaque10 = "var(--color-grey-opaque-10-xipm4s, rgba(0, 0, 0, 0.1))";
|
|
209
210
|
export var colorGreyOpaque25 = "var(--color-grey-opaque-25-igqnxy, rgba(255, 255, 255, 0.25))";
|
|
210
211
|
export var colorGreyOpaque40 = "var(--color-grey-opaque-40-wxjof3, rgba(0, 0, 0, 0.4))";
|
|
211
212
|
export var colorGreyOpaque50 = "var(--color-grey-opaque-50-akurqr, rgba(0, 0, 0, 0.5))";
|
|
@@ -270,9 +271,9 @@ export var colorBackgroundNotificationStackBarActive = "var(--color-background-n
|
|
|
270
271
|
export var colorBackgroundNotificationStackBarHover = "var(--color-background-notification-stack-bar-hover-905myr, #414d5c)";
|
|
271
272
|
export var colorBackgroundPopover = "var(--color-background-popover-szburm, #ffffff)";
|
|
272
273
|
export var colorBackgroundProgressBarContentDefault = "var(--color-background-progress-bar-content-default-yvwdkl, #0972d3)";
|
|
273
|
-
export var colorBackgroundProgressBarContentInFlash = "var(--color-background-progress-bar-content-in-flash-
|
|
274
|
+
export var colorBackgroundProgressBarContentInFlash = "var(--color-background-progress-bar-content-in-flash-qj6j8l, #ffffff)";
|
|
274
275
|
export var colorBackgroundProgressBarLayoutDefault = "var(--color-background-progress-bar-layout-default-ktc0zl, #e9ebed)";
|
|
275
|
-
export var colorBackgroundProgressBarLayoutInFlash = "var(--color-background-progress-bar-layout-in-flash-
|
|
276
|
+
export var colorBackgroundProgressBarLayoutInFlash = "var(--color-background-progress-bar-layout-in-flash-d3q12s, rgba(255, 255, 255, 0.25))";
|
|
276
277
|
export var colorBackgroundSegmentActive = "var(--color-background-segment-active-366806, #0972d3)";
|
|
277
278
|
export var colorBackgroundSegmentDefault = "var(--color-background-segment-default-3arros, #ffffff)";
|
|
278
279
|
export var colorBackgroundSegmentDisabled = "var(--color-background-segment-disabled-o4y9v5, #ffffff)";
|
|
@@ -709,6 +709,10 @@ module.exports.preset = {
|
|
|
709
709
|
"light": "{colorChartsOrange1000}",
|
|
710
710
|
"dark": "{colorChartsOrange1000}"
|
|
711
711
|
},
|
|
712
|
+
"colorGreyOpaque10": {
|
|
713
|
+
"light": "rgba(0, 0, 0, 0.1)",
|
|
714
|
+
"dark": "rgba(0, 0, 0, 0.1)"
|
|
715
|
+
},
|
|
712
716
|
"colorGreyOpaque25": {
|
|
713
717
|
"light": "rgba(255, 255, 255, 0.25)",
|
|
714
718
|
"dark": "rgba(255, 255, 255, 0.25)"
|
|
@@ -2923,6 +2927,10 @@ module.exports.preset = {
|
|
|
2923
2927
|
"id": "top-navigation",
|
|
2924
2928
|
"selector": ".awsui-context-top-navigation",
|
|
2925
2929
|
"tokens": {
|
|
2930
|
+
"colorGreyOpaque10": {
|
|
2931
|
+
"light": "rgba(0, 0, 0, 0.1)",
|
|
2932
|
+
"dark": "rgba(0, 0, 0, 0.1)"
|
|
2933
|
+
},
|
|
2926
2934
|
"colorGreyOpaque25": {
|
|
2927
2935
|
"light": "rgba(255, 255, 255, 0.25)",
|
|
2928
2936
|
"dark": "rgba(255, 255, 255, 0.25)"
|
|
@@ -4057,6 +4065,10 @@ module.exports.preset = {
|
|
|
4057
4065
|
"light": "0px 4px 8px 1px rgba(0, 7, 22, 0.5)",
|
|
4058
4066
|
"dark": "0px 4px 8px 1px rgba(0, 7, 22, 0.5)"
|
|
4059
4067
|
},
|
|
4068
|
+
"colorGreyOpaque10": {
|
|
4069
|
+
"light": "rgba(0, 0, 0, 0.1)",
|
|
4070
|
+
"dark": "rgba(0, 0, 0, 0.1)"
|
|
4071
|
+
},
|
|
4060
4072
|
"colorGreyOpaque25": {
|
|
4061
4073
|
"light": "rgba(255, 255, 255, 0.25)",
|
|
4062
4074
|
"dark": "rgba(255, 255, 255, 0.25)"
|
|
@@ -5123,6 +5135,10 @@ module.exports.preset = {
|
|
|
5123
5135
|
"id": "flashbar",
|
|
5124
5136
|
"selector": ".awsui-context-flashbar",
|
|
5125
5137
|
"tokens": {
|
|
5138
|
+
"colorGreyOpaque10": {
|
|
5139
|
+
"light": "rgba(0, 0, 0, 0.1)",
|
|
5140
|
+
"dark": "rgba(0, 0, 0, 0.1)"
|
|
5141
|
+
},
|
|
5126
5142
|
"colorGreyOpaque25": {
|
|
5127
5143
|
"light": "rgba(255, 255, 255, 0.25)",
|
|
5128
5144
|
"dark": "rgba(255, 255, 255, 0.25)"
|
|
@@ -6189,6 +6205,10 @@ module.exports.preset = {
|
|
|
6189
6205
|
"id": "flashbar-warning",
|
|
6190
6206
|
"selector": ".awsui-context-flashbar-warning",
|
|
6191
6207
|
"tokens": {
|
|
6208
|
+
"colorGreyOpaque10": {
|
|
6209
|
+
"light": "rgba(0, 0, 0, 0.1)",
|
|
6210
|
+
"dark": "rgba(0, 0, 0, 0.1)"
|
|
6211
|
+
},
|
|
6192
6212
|
"colorGreyOpaque25": {
|
|
6193
6213
|
"light": "rgba(255, 255, 255, 0.25)",
|
|
6194
6214
|
"dark": "rgba(255, 255, 255, 0.25)"
|
|
@@ -6446,16 +6466,16 @@ module.exports.preset = {
|
|
|
6446
6466
|
"dark": "{colorBlue500}"
|
|
6447
6467
|
},
|
|
6448
6468
|
"colorBackgroundProgressBarContentInFlash": {
|
|
6449
|
-
"light": "{
|
|
6450
|
-
"dark": "{
|
|
6469
|
+
"light": "{colorGrey900}",
|
|
6470
|
+
"dark": "{colorGrey900}"
|
|
6451
6471
|
},
|
|
6452
6472
|
"colorBackgroundProgressBarLayoutDefault": {
|
|
6453
6473
|
"light": "{colorGrey200}",
|
|
6454
6474
|
"dark": "{colorGrey650}"
|
|
6455
6475
|
},
|
|
6456
6476
|
"colorBackgroundProgressBarLayoutInFlash": {
|
|
6457
|
-
"light": "{
|
|
6458
|
-
"dark": "{
|
|
6477
|
+
"light": "{colorGreyOpaque10}",
|
|
6478
|
+
"dark": "{colorGreyOpaque10}"
|
|
6459
6479
|
},
|
|
6460
6480
|
"colorBackgroundSegmentActive": {
|
|
6461
6481
|
"light": "{colorBlue600}",
|
|
@@ -7255,6 +7275,10 @@ module.exports.preset = {
|
|
|
7255
7275
|
"id": "alert",
|
|
7256
7276
|
"selector": ".awsui-context-alert",
|
|
7257
7277
|
"tokens": {
|
|
7278
|
+
"colorGreyOpaque10": {
|
|
7279
|
+
"light": "rgba(0, 0, 0, 0.1)",
|
|
7280
|
+
"dark": "rgba(0, 0, 0, 0.1)"
|
|
7281
|
+
},
|
|
7258
7282
|
"colorGreyOpaque25": {
|
|
7259
7283
|
"light": "rgba(255, 255, 255, 0.25)",
|
|
7260
7284
|
"dark": "rgba(255, 255, 255, 0.25)"
|
|
@@ -8323,6 +8347,10 @@ module.exports.preset = {
|
|
|
8323
8347
|
"id": "alert-header",
|
|
8324
8348
|
"selector": ".awsui-context-content-header .awsui-context-alert",
|
|
8325
8349
|
"tokens": {
|
|
8350
|
+
"colorGreyOpaque10": {
|
|
8351
|
+
"light": "rgba(0, 0, 0, 0.1)",
|
|
8352
|
+
"dark": "rgba(0, 0, 0, 0.1)"
|
|
8353
|
+
},
|
|
8326
8354
|
"colorGreyOpaque25": {
|
|
8327
8355
|
"light": "rgba(255, 255, 255, 0.25)",
|
|
8328
8356
|
"dark": "rgba(255, 255, 255, 0.25)"
|
|
@@ -9541,6 +9569,7 @@ module.exports.preset = {
|
|
|
9541
9569
|
"colorChartsPaletteCategorical48": "color",
|
|
9542
9570
|
"colorChartsPaletteCategorical49": "color",
|
|
9543
9571
|
"colorChartsPaletteCategorical50": "color",
|
|
9572
|
+
"colorGreyOpaque10": "color",
|
|
9544
9573
|
"colorGreyOpaque25": "color",
|
|
9545
9574
|
"colorGreyOpaque40": "color",
|
|
9546
9575
|
"colorGreyOpaque50": "color",
|
|
@@ -10774,6 +10803,7 @@ module.exports.preset = {
|
|
|
10774
10803
|
"colorChartsPaletteCategorical48": "color-charts-palette-categorical-48",
|
|
10775
10804
|
"colorChartsPaletteCategorical49": "color-charts-palette-categorical-49",
|
|
10776
10805
|
"colorChartsPaletteCategorical50": "color-charts-palette-categorical-50",
|
|
10806
|
+
"colorGreyOpaque10": "color-grey-opaque-10",
|
|
10777
10807
|
"colorGreyOpaque25": "color-grey-opaque-25",
|
|
10778
10808
|
"colorGreyOpaque40": "color-grey-opaque-40",
|
|
10779
10809
|
"colorGreyOpaque50": "color-grey-opaque-50",
|
|
@@ -11500,6 +11530,7 @@ module.exports.preset = {
|
|
|
11500
11530
|
"colorChartsPaletteCategorical48": "--color-charts-palette-categorical-48-tptw1p",
|
|
11501
11531
|
"colorChartsPaletteCategorical49": "--color-charts-palette-categorical-49-6lrkes",
|
|
11502
11532
|
"colorChartsPaletteCategorical50": "--color-charts-palette-categorical-50-mqbaxr",
|
|
11533
|
+
"colorGreyOpaque10": "--color-grey-opaque-10-xipm4s",
|
|
11503
11534
|
"colorGreyOpaque25": "--color-grey-opaque-25-igqnxy",
|
|
11504
11535
|
"colorGreyOpaque40": "--color-grey-opaque-40-wxjof3",
|
|
11505
11536
|
"colorGreyOpaque50": "--color-grey-opaque-50-akurqr",
|
|
@@ -11564,9 +11595,9 @@ module.exports.preset = {
|
|
|
11564
11595
|
"colorBackgroundNotificationStackBarHover": "--color-background-notification-stack-bar-hover-905myr",
|
|
11565
11596
|
"colorBackgroundPopover": "--color-background-popover-szburm",
|
|
11566
11597
|
"colorBackgroundProgressBarContentDefault": "--color-background-progress-bar-content-default-yvwdkl",
|
|
11567
|
-
"colorBackgroundProgressBarContentInFlash": "--color-background-progress-bar-content-in-flash-
|
|
11598
|
+
"colorBackgroundProgressBarContentInFlash": "--color-background-progress-bar-content-in-flash-qj6j8l",
|
|
11568
11599
|
"colorBackgroundProgressBarLayoutDefault": "--color-background-progress-bar-layout-default-ktc0zl",
|
|
11569
|
-
"colorBackgroundProgressBarLayoutInFlash": "--color-background-progress-bar-layout-in-flash-
|
|
11600
|
+
"colorBackgroundProgressBarLayoutInFlash": "--color-background-progress-bar-layout-in-flash-d3q12s",
|
|
11570
11601
|
"colorBackgroundSegmentActive": "--color-background-segment-active-366806",
|
|
11571
11602
|
"colorBackgroundSegmentDefault": "--color-background-segment-default-3arros",
|
|
11572
11603
|
"colorBackgroundSegmentDisabled": "--color-background-segment-disabled-o4y9v5",
|