@dynatrace/strato-components 0.85.100 → 0.85.110
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/buttons/button/Button.css +17 -17
- package/buttons/button/Button.d.ts +1 -0
- package/buttons/button/Button.js +1 -0
- package/buttons/button/Button.sty.js +4 -4
- package/buttons/intent-button/IntentButton.js +4 -0
- package/content/progress/ProgressBar.css +73 -26
- package/content/progress/ProgressBar.d.ts +1 -1
- package/content/progress/ProgressBar.js +75 -63
- package/content/progress/ProgressBar.sty.d.ts +15 -20
- package/content/progress/ProgressBar.sty.js +9 -4
- package/content/progress/ProgressBarIcon.css +2 -2
- package/content/progress/ProgressBarIcon.js +1 -11
- package/content/progress/ProgressBarIcon.sty.js +2 -2
- package/content/progress/ProgressBarLabel.css +4 -4
- package/content/progress/ProgressBarLabel.js +1 -6
- package/content/progress/ProgressBarLabel.sty.js +1 -2
- package/content/progress/ProgressBarValue.css +5 -20
- package/content/progress/ProgressBarValue.js +2 -2
- package/content/progress/ProgressBarValue.sty.d.ts +0 -20
- package/content/progress/ProgressBarValue.sty.js +2 -1
- package/content/progress/ProgressCircle.css +51 -19
- package/content/progress/ProgressCircle.d.ts +1 -1
- package/content/progress/ProgressCircle.js +24 -15
- package/content/progress/ProgressCircle.sty.d.ts +41 -14
- package/content/progress/ProgressCircle.sty.js +7 -11
- package/content/progress/contexts/SharedProgressBarPropsContext.d.ts +0 -2
- package/content/progress/contexts/SharedProgressBarPropsContext.js +1 -2
- package/content/progress/hooks/useProgressBarPropsContext.js +0 -1
- package/content/skeleton/Skeleton.css +6 -6
- package/content/skeleton/Skeleton.sty.js +1 -1
- package/core/components/focus-scope/FocusScope.d.ts +2 -2
- package/core/index.d.ts +1 -1
- package/core/index.js +1 -1
- package/core/styles/focusRing.css +66 -66
- package/core/styles/focusRing.sty.js +2 -2
- package/core/styles/useFocusRing.d.ts +0 -1
- package/core/utils/colorUtils.css +60 -65
- package/core/utils/colorUtils.sty.d.ts +0 -5
- package/core/utils/colorUtils.sty.js +2 -2
- package/esm/buttons/button/Button.css +17 -17
- package/esm/buttons/button/Button.js +1 -0
- package/esm/buttons/button/Button.js.map +2 -2
- package/esm/buttons/button/Button.sty.js +4 -4
- package/esm/buttons/button/Button.sty.js.map +1 -1
- package/esm/buttons/intent-button/IntentButton.js +4 -0
- package/esm/buttons/intent-button/IntentButton.js.map +2 -2
- package/esm/content/progress/ProgressBar.css +73 -26
- package/esm/content/progress/ProgressBar.js +80 -64
- package/esm/content/progress/ProgressBar.js.map +2 -2
- package/esm/content/progress/ProgressBar.sty.js +9 -4
- package/esm/content/progress/ProgressBar.sty.js.map +2 -2
- package/esm/content/progress/ProgressBarIcon.css +2 -2
- package/esm/content/progress/ProgressBarIcon.js +1 -11
- package/esm/content/progress/ProgressBarIcon.js.map +2 -2
- package/esm/content/progress/ProgressBarIcon.sty.js +2 -2
- package/esm/content/progress/ProgressBarIcon.sty.js.map +1 -1
- package/esm/content/progress/ProgressBarLabel.css +4 -4
- package/esm/content/progress/ProgressBarLabel.js +1 -6
- package/esm/content/progress/ProgressBarLabel.js.map +2 -2
- package/esm/content/progress/ProgressBarLabel.sty.js +1 -2
- package/esm/content/progress/ProgressBarLabel.sty.js.map +2 -2
- package/esm/content/progress/ProgressBarValue.css +5 -20
- package/esm/content/progress/ProgressBarValue.js +2 -2
- package/esm/content/progress/ProgressBarValue.js.map +2 -2
- package/esm/content/progress/ProgressBarValue.sty.js +2 -1
- package/esm/content/progress/ProgressBarValue.sty.js.map +2 -2
- package/esm/content/progress/ProgressCircle.css +51 -19
- package/esm/content/progress/ProgressCircle.js +25 -17
- package/esm/content/progress/ProgressCircle.js.map +2 -2
- package/esm/content/progress/ProgressCircle.sty.js +7 -11
- package/esm/content/progress/ProgressCircle.sty.js.map +2 -2
- package/esm/content/progress/contexts/SharedProgressBarPropsContext.js +1 -2
- package/esm/content/progress/contexts/SharedProgressBarPropsContext.js.map +2 -2
- package/esm/content/progress/hooks/useProgressBarPropsContext.js +0 -1
- package/esm/content/progress/hooks/useProgressBarPropsContext.js.map +2 -2
- package/esm/content/skeleton/Skeleton.css +6 -6
- package/esm/content/skeleton/Skeleton.sty.js +1 -1
- package/esm/content/skeleton/Skeleton.sty.js.map +1 -1
- package/esm/core/components/focus-scope/FocusScope.js.map +1 -1
- package/esm/core/index.js +1 -1
- package/esm/core/index.js.map +2 -2
- package/esm/core/styles/focusRing.css +66 -66
- package/esm/core/styles/focusRing.sty.js +2 -2
- package/esm/core/styles/focusRing.sty.js.map +1 -1
- package/esm/core/styles/useFocusRing.js.map +2 -2
- package/esm/core/types/role-variant.js.map +2 -2
- package/esm/core/utils/colorUtils.css +60 -65
- package/esm/core/utils/colorUtils.sty.js +2 -2
- package/esm/core/utils/colorUtils.sty.js.map +2 -2
- package/esm/layouts/container/Container.css +4 -4
- package/esm/layouts/container/Container.js +22 -4
- package/esm/layouts/container/Container.js.map +2 -2
- package/esm/layouts/container/Container.sty.js +1 -1
- package/esm/layouts/container/Container.sty.js.map +1 -1
- package/esm/layouts/divider/Divider.css +6 -6
- package/esm/layouts/divider/Divider.sty.js +1 -1
- package/esm/layouts/divider/Divider.sty.js.map +1 -1
- package/esm/layouts/hooks/useBreakpoint.js +3 -0
- package/esm/layouts/hooks/useBreakpoint.js.map +2 -2
- package/esm/layouts/index.js +5 -1
- package/esm/layouts/index.js.map +2 -2
- package/esm/layouts/input-group/InputGroup.css +4 -4
- package/esm/layouts/input-group/InputGroup.sty.js +2 -2
- package/esm/layouts/input-group/InputGroup.sty.js.map +1 -1
- package/esm/layouts/surface/Surface.css +39 -39
- package/esm/layouts/surface/Surface.sty.js +2 -2
- package/esm/layouts/surface/Surface.sty.js.map +1 -1
- package/esm/layouts/surface/variables.sty.js +1 -1
- package/esm/layouts/surface/variables.sty.js.map +1 -1
- package/esm/styles/colorUtils.css +60 -65
- package/esm/styles/colorUtils.sty.js +2 -2
- package/esm/styles/colorUtils.sty.js.map +2 -2
- package/esm/styles/container.css +47 -47
- package/esm/styles/container.sty.js +2 -2
- package/esm/styles/container.sty.js.map +1 -1
- package/esm/styles/ellipsis.css +1 -1
- package/esm/styles/ellipsis.sty.js +1 -1
- package/esm/styles/ellipsis.sty.js.map +1 -1
- package/esm/styles/field.css +153 -153
- package/esm/styles/field.sty.js +2 -2
- package/esm/styles/field.sty.js.map +1 -1
- package/esm/styles/sprinkles.css +262 -262
- package/esm/styles/sprinkles.sty.js +1 -1
- package/esm/styles/sprinkles.sty.js.map +1 -1
- package/esm/styles/textStyle.css +8 -8
- package/esm/styles/textStyle.sty.js +1 -1
- package/esm/styles/textStyle.sty.js.map +1 -1
- package/esm/typography/block-quote/Blockquote.css +2 -2
- package/esm/typography/block-quote/Blockquote.sty.js +1 -1
- package/esm/typography/block-quote/Blockquote.sty.js.map +1 -1
- package/esm/typography/code/Code.css +1 -1
- package/esm/typography/code/Code.sty.js +1 -1
- package/esm/typography/code/Code.sty.js.map +1 -1
- package/esm/typography/emphasis/Emphasis.css +1 -1
- package/esm/typography/emphasis/Emphasis.sty.js +1 -1
- package/esm/typography/emphasis/Emphasis.sty.js.map +1 -1
- package/esm/typography/external-link/ExternalLink.css +6 -6
- package/esm/typography/external-link/ExternalLink.sty.js +1 -1
- package/esm/typography/external-link/ExternalLink.sty.js.map +1 -1
- package/esm/typography/heading/Heading.css +7 -7
- package/esm/typography/heading/Heading.sty.js +1 -1
- package/esm/typography/heading/Heading.sty.js.map +1 -1
- package/esm/typography/highlight/Highlight.css +1 -1
- package/esm/typography/highlight/Highlight.sty.js +1 -1
- package/esm/typography/highlight/Highlight.sty.js.map +1 -1
- package/esm/typography/link/Link.css +4 -4
- package/esm/typography/link/Link.sty.js +1 -1
- package/esm/typography/link/Link.sty.js.map +1 -1
- package/esm/typography/list/List.css +4 -4
- package/esm/typography/list/List.sty.js +2 -2
- package/esm/typography/list/List.sty.js.map +1 -1
- package/esm/typography/paragraph/Paragraph.css +3 -3
- package/esm/typography/paragraph/Paragraph.sty.js +1 -1
- package/esm/typography/paragraph/Paragraph.sty.js.map +1 -1
- package/esm/typography/strikethrough/Strikethrough.css +1 -1
- package/esm/typography/strikethrough/Strikethrough.sty.js +1 -1
- package/esm/typography/strikethrough/Strikethrough.sty.js.map +1 -1
- package/esm/typography/strong/Strong.css +1 -1
- package/esm/typography/strong/Strong.sty.js +1 -1
- package/esm/typography/strong/Strong.sty.js.map +1 -1
- package/esm/typography/text/Text.css +3 -3
- package/esm/typography/text/Text.sty.js +1 -1
- package/esm/typography/text/Text.sty.js.map +1 -1
- package/esm/typography/text-ellipsis/TextEllipsis.css +4 -4
- package/esm/typography/text-ellipsis/TextEllipsis.sty.js +1 -1
- package/esm/typography/text-ellipsis/TextEllipsis.sty.js.map +1 -1
- package/layouts/container/Container.css +4 -4
- package/layouts/container/Container.d.ts +20 -0
- package/layouts/container/Container.js +16 -3
- package/layouts/container/Container.sty.js +1 -1
- package/layouts/divider/Divider.css +6 -6
- package/layouts/divider/Divider.sty.js +1 -1
- package/layouts/hooks/useBreakpoint.js +3 -0
- package/layouts/index.d.ts +1 -1
- package/layouts/index.js +1 -0
- package/layouts/input-group/InputGroup.css +4 -4
- package/layouts/input-group/InputGroup.sty.js +2 -2
- package/layouts/surface/Surface.css +39 -39
- package/layouts/surface/Surface.sty.js +2 -2
- package/layouts/surface/variables.sty.js +1 -1
- package/package.json +1 -1
- package/styles/colorUtils.css +60 -65
- package/styles/colorUtils.sty.d.ts +0 -5
- package/styles/colorUtils.sty.js +2 -2
- package/styles/container.css +47 -47
- package/styles/container.sty.js +2 -2
- package/styles/ellipsis.css +1 -1
- package/styles/ellipsis.sty.js +1 -1
- package/styles/field.css +153 -153
- package/styles/field.sty.js +2 -2
- package/styles/sprinkles.css +262 -262
- package/styles/sprinkles.sty.js +1 -1
- package/styles/textStyle.css +8 -8
- package/styles/textStyle.sty.js +1 -1
- package/typography/block-quote/Blockquote.css +2 -2
- package/typography/block-quote/Blockquote.sty.js +1 -1
- package/typography/code/Code.css +1 -1
- package/typography/code/Code.sty.js +1 -1
- package/typography/emphasis/Emphasis.css +1 -1
- package/typography/emphasis/Emphasis.sty.js +1 -1
- package/typography/external-link/ExternalLink.css +6 -6
- package/typography/external-link/ExternalLink.sty.js +1 -1
- package/typography/heading/Heading.css +7 -7
- package/typography/heading/Heading.sty.js +1 -1
- package/typography/highlight/Highlight.css +1 -1
- package/typography/highlight/Highlight.sty.js +1 -1
- package/typography/link/Link.css +4 -4
- package/typography/link/Link.sty.js +1 -1
- package/typography/list/List.css +4 -4
- package/typography/list/List.sty.js +2 -2
- package/typography/paragraph/Paragraph.css +3 -3
- package/typography/paragraph/Paragraph.sty.js +1 -1
- package/typography/strikethrough/Strikethrough.css +1 -1
- package/typography/strikethrough/Strikethrough.sty.js +1 -1
- package/typography/strong/Strong.css +1 -1
- package/typography/strong/Strong.sty.js +1 -1
- package/typography/text/Text.css +3 -3
- package/typography/text/Text.sty.js +1 -1
- package/typography/text-ellipsis/TextEllipsis.css +4 -4
- package/typography/text-ellipsis/TextEllipsis.sty.js +1 -1
|
@@ -1,28 +1,13 @@
|
|
|
1
|
-
.
|
|
2
|
-
color: var(--
|
|
1
|
+
._1ri4i7o0-0-85-110 {
|
|
2
|
+
color: var(--_13n9uwh4-0-85-110);
|
|
3
3
|
}
|
|
4
|
-
._1ri4i7o2-0-85-
|
|
5
|
-
color: var(--dt-colors-text-neutral-subdued, #545587);
|
|
6
|
-
}
|
|
7
|
-
._1ri4i7o3-0-85-100 {
|
|
8
|
-
color: var(--dt-colors-text-neutral-subdued, #545587);
|
|
9
|
-
}
|
|
10
|
-
._1ri4i7o4-0-85-100 {
|
|
11
|
-
color: var(--dt-colors-text-neutral-subdued, #545587);
|
|
12
|
-
}
|
|
13
|
-
._1ri4i7o5-0-85-100 {
|
|
14
|
-
color: var(--dt-colors-text-neutral-subdued, #545587);
|
|
15
|
-
}
|
|
16
|
-
._1ri4i7o6-0-85-100 {
|
|
17
|
-
color: var(--dt-colors-text-neutral-subdued, #545587);
|
|
18
|
-
}
|
|
19
|
-
._1ri4i7o8-0-85-100 {
|
|
4
|
+
._1ri4i7o2-0-85-110 {
|
|
20
5
|
word-break: break-word;
|
|
21
6
|
}
|
|
22
|
-
.
|
|
7
|
+
._1ri4i7o4-0-85-110 {
|
|
23
8
|
word-break: break-word;
|
|
24
9
|
}
|
|
25
|
-
.
|
|
10
|
+
._1ri4i7o5-0-85-110 {
|
|
26
11
|
margin-left: auto;
|
|
27
12
|
align-self: center;
|
|
28
13
|
}
|
|
@@ -51,7 +51,7 @@ const ProgressBarValue = (0, import_react.forwardRef)((props, forwardedRef) => {
|
|
|
51
51
|
id: "3J6qHQEUwDxvZuIl",
|
|
52
52
|
description: "Default label for the progress-bar."
|
|
53
53
|
});
|
|
54
|
-
const {
|
|
54
|
+
const { density } = (0, import_useProgressBarPropsContext._useSharedProgressBarPropsContext)();
|
|
55
55
|
const childIsText = (0, import_is_string_children.isStringChildren)(children);
|
|
56
56
|
return /* @__PURE__ */ import_react.default.createElement(
|
|
57
57
|
"div",
|
|
@@ -60,7 +60,7 @@ const ProgressBarValue = (0, import_react.forwardRef)((props, forwardedRef) => {
|
|
|
60
60
|
ref: forwardedRef,
|
|
61
61
|
className: (0, import_clsx.default)(
|
|
62
62
|
consumerClassName,
|
|
63
|
-
(0, import_ProgressBarValue_css.progressBarValueCSS)({
|
|
63
|
+
(0, import_ProgressBarValue_css.progressBarValueCSS)({ size: density, childIsText }),
|
|
64
64
|
(0, import_textStyle_css.textStyleCSS)({ textStyle: "small" })
|
|
65
65
|
),
|
|
66
66
|
style: consumerStyle,
|
|
@@ -1,24 +1,4 @@
|
|
|
1
1
|
export declare const progressBarValueCSS: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
2
|
-
variant: {
|
|
3
|
-
onAccent: {
|
|
4
|
-
color: string;
|
|
5
|
-
};
|
|
6
|
-
primary: {
|
|
7
|
-
color: string;
|
|
8
|
-
};
|
|
9
|
-
success: {
|
|
10
|
-
color: string;
|
|
11
|
-
};
|
|
12
|
-
warning: {
|
|
13
|
-
color: string;
|
|
14
|
-
};
|
|
15
|
-
critical: {
|
|
16
|
-
color: string;
|
|
17
|
-
};
|
|
18
|
-
neutral: {
|
|
19
|
-
color: string;
|
|
20
|
-
};
|
|
21
|
-
};
|
|
22
2
|
size: {
|
|
23
3
|
condensed: {};
|
|
24
4
|
default: {
|
|
@@ -20,7 +20,8 @@ __export(ProgressBarValue_css_exports, {
|
|
|
20
20
|
progressBarValueCSS: () => progressBarValueCSS
|
|
21
21
|
});
|
|
22
22
|
module.exports = __toCommonJS(ProgressBarValue_css_exports);
|
|
23
|
+
var import_ProgressBar_css_ts_vanilla = require("./ProgressBar.css");
|
|
23
24
|
var import_ellipsis_css_ts_vanilla = require("../../styles/ellipsis.css");
|
|
24
25
|
var import_ProgressBarValue_css_ts_vanilla = require("./ProgressBarValue.css");
|
|
25
26
|
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
26
|
-
var progressBarValueCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ri4i7o0-0-85-
|
|
27
|
+
var progressBarValueCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1ri4i7o0-0-85-110", variantClassNames: { size: { condensed: "_1ri4i7o1-0-85-110", "default": "_1ri4i7o2-0-85-110" }, childIsText: { true: "_1ri4i7o3-0-85-110", false: "_1ri4i7o4-0-85-110" } }, defaultVariants: {}, compoundVariants: [[{ size: "condensed", childIsText: true }, "_1ri4i7o5-0-85-110 _oqqp1n0-0-85-110"]] });
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@keyframes
|
|
1
|
+
@keyframes _kvldjh3-0-85-110 {
|
|
2
2
|
0% {
|
|
3
3
|
transform: rotate(0deg);
|
|
4
4
|
}
|
|
@@ -6,47 +6,79 @@
|
|
|
6
6
|
transform: rotate(360deg);
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
|
-
.
|
|
9
|
+
._kvldjh4-0-85-110 {
|
|
10
10
|
display: inline-block;
|
|
11
|
-
color: var(--_17bwkb02-0-85-100);
|
|
12
11
|
}
|
|
13
|
-
.
|
|
12
|
+
._kvldjh5-0-85-110 {
|
|
14
13
|
display: block;
|
|
15
14
|
transform: rotate(-90deg);
|
|
16
15
|
}
|
|
17
|
-
.
|
|
18
|
-
stroke:
|
|
16
|
+
._kvldjh6-0-85-110 {
|
|
17
|
+
stroke: var(--_kvldjh2-0-85-110);
|
|
19
18
|
transform-origin: center;
|
|
20
19
|
}
|
|
21
|
-
.
|
|
20
|
+
._kvldjh7-0-85-110 {
|
|
22
21
|
stroke-dasharray: 90 360;
|
|
23
22
|
transform-origin: 50% 50%;
|
|
24
|
-
animation-name:
|
|
23
|
+
animation-name: _kvldjh3-0-85-110;
|
|
25
24
|
animation-duration: var(--dt-timings-slow-gentle, 800ms);
|
|
26
25
|
animation-timing-function: cubic-bezier(0.5, 0.15, 0.5, 0.8);
|
|
27
26
|
animation-iteration-count: infinite;
|
|
28
27
|
}
|
|
29
|
-
.
|
|
28
|
+
._kvldjh8-0-85-110 {
|
|
30
29
|
animation-duration: var(--dt-timings-fast-moderate, 200ms);
|
|
31
30
|
transition-property: stroke-dashoffset;
|
|
32
31
|
}
|
|
33
|
-
.
|
|
34
|
-
stroke: var(--
|
|
32
|
+
._kvldjh9-0-85-110 {
|
|
33
|
+
stroke: var(--_kvldjh1-0-85-110);
|
|
35
34
|
}
|
|
36
|
-
.
|
|
37
|
-
stroke: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
|
|
38
|
-
}
|
|
39
|
-
._kvldjhd-0-85-100 {
|
|
35
|
+
._kvldjha-0-85-110 {
|
|
40
36
|
display: flex;
|
|
41
37
|
flex-direction: column;
|
|
42
38
|
align-items: center;
|
|
39
|
+
color: var(--_kvldjh0-0-85-110);
|
|
43
40
|
}
|
|
44
|
-
.
|
|
41
|
+
._kvldjhb-0-85-110 {
|
|
45
42
|
gap: var(--dt-spacings-size-8, 8px);
|
|
46
43
|
}
|
|
47
|
-
.
|
|
44
|
+
._kvldjhc-0-85-110 {
|
|
48
45
|
gap: var(--dt-spacings-size-12, 12px);
|
|
49
46
|
}
|
|
50
|
-
.
|
|
51
|
-
|
|
47
|
+
._kvldjhd-0-85-110 {
|
|
48
|
+
--_kvldjh2-0-85-110: var(--dt-colors-border-critical-accent, #b80031);
|
|
49
|
+
}
|
|
50
|
+
._kvldjhe-0-85-110 {
|
|
51
|
+
--_kvldjh2-0-85-110: var(--dt-colors-border-neutral-accent, #545587);
|
|
52
|
+
}
|
|
53
|
+
._kvldjhf-0-85-110 {
|
|
54
|
+
--_kvldjh2-0-85-110: var(--dt-colors-border-primary-accent, #454cc9);
|
|
55
|
+
}
|
|
56
|
+
._kvldjhg-0-85-110 {
|
|
57
|
+
--_kvldjh2-0-85-110: var(--dt-colors-border-success-accent, #2c6360);
|
|
58
|
+
}
|
|
59
|
+
._kvldjhh-0-85-110 {
|
|
60
|
+
--_kvldjh2-0-85-110: var(--dt-colors-border-warning-accent, #805100);
|
|
61
|
+
}
|
|
62
|
+
._kvldjhi-0-85-110 {
|
|
63
|
+
--_kvldjh0-0-85-110: var(--dt-colors-text-neutral-default, #2b2a58);
|
|
64
|
+
--_kvldjh1-0-85-110: var(--dt-colors-border-neutral-default, #d2d3e1);
|
|
65
|
+
}
|
|
66
|
+
._kvldjhj-0-85-110 {
|
|
67
|
+
--_kvldjh0-0-85-110: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
|
|
68
|
+
--_kvldjh1-0-85-110: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
|
|
69
|
+
}
|
|
70
|
+
._kvldjhk-0-85-110 {
|
|
71
|
+
--_kvldjh2-0-85-110: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
|
|
72
|
+
}
|
|
73
|
+
._kvldjhl-0-85-110 {
|
|
74
|
+
--_kvldjh2-0-85-110: var(--dt-colors-border-success-on-accent-default, #f1f4f4);
|
|
75
|
+
}
|
|
76
|
+
._kvldjhm-0-85-110 {
|
|
77
|
+
--_kvldjh2-0-85-110: var(--dt-colors-border-warning-on-accent-default, #272025);
|
|
78
|
+
}
|
|
79
|
+
._kvldjhn-0-85-110 {
|
|
80
|
+
--_kvldjh2-0-85-110: var(--dt-colors-border-critical-on-accent-default, #f9f1f3);
|
|
81
|
+
}
|
|
82
|
+
._kvldjho-0-85-110 {
|
|
83
|
+
--_kvldjh2-0-85-110: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
|
|
52
84
|
}
|
|
@@ -39,7 +39,7 @@ export interface ProgressCircleProps extends WithChildren, DOMProps, AriaLabelin
|
|
|
39
39
|
variant?: RoleVariantType;
|
|
40
40
|
/**
|
|
41
41
|
* Controls the color of the progress.
|
|
42
|
-
* @defaultValue 'primary'
|
|
42
|
+
* @defaultValue 'primary' or a container's color.
|
|
43
43
|
*/
|
|
44
44
|
color?: 'neutral' | 'primary' | 'success' | 'warning' | 'critical';
|
|
45
45
|
/**
|
|
@@ -36,7 +36,7 @@ var import_useProgressAriaProps = require("./hooks/useProgressAriaProps.js");
|
|
|
36
36
|
var import_ProgressCircle_css = require("./ProgressCircle.sty.js");
|
|
37
37
|
var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
|
|
38
38
|
var import_useSafeForwardProps = require("../../core/hooks/useSafeForwardProps.js");
|
|
39
|
-
var
|
|
39
|
+
var import_Container = require("../../layouts/container/Container.js");
|
|
40
40
|
var import_container_css = require("../../styles/container.sty.js");
|
|
41
41
|
var import_textStyle_css = require("../../styles/textStyle.sty.js");
|
|
42
42
|
const progressCircleSizes = {
|
|
@@ -51,8 +51,8 @@ const ProgressCircle = (0, import_react.forwardRef)(
|
|
|
51
51
|
min = 0,
|
|
52
52
|
max = 100,
|
|
53
53
|
size = "large",
|
|
54
|
-
variant
|
|
55
|
-
color
|
|
54
|
+
variant,
|
|
55
|
+
color,
|
|
56
56
|
children,
|
|
57
57
|
id: propId,
|
|
58
58
|
"aria-valuetext": ariaValuetext,
|
|
@@ -69,6 +69,17 @@ const ProgressCircle = (0, import_react.forwardRef)(
|
|
|
69
69
|
max,
|
|
70
70
|
ariaValuetext
|
|
71
71
|
);
|
|
72
|
+
const containerColoring = (0, import_Container.useContainerColoring)();
|
|
73
|
+
const cascadedVariant = variant !== void 0 && variant === "onAccent" ? "accent" : containerColoring.variant;
|
|
74
|
+
const derivedVariant = cascadedVariant === "accent" ? "accent" : "default";
|
|
75
|
+
const fallbackColor = containerColoring.default ? "primary" : containerColoring.color;
|
|
76
|
+
let derivedColor = fallbackColor;
|
|
77
|
+
if (variant !== void 0 && variant !== "onAccent") {
|
|
78
|
+
derivedColor = variant;
|
|
79
|
+
}
|
|
80
|
+
if (color !== void 0) {
|
|
81
|
+
derivedColor = color;
|
|
82
|
+
}
|
|
72
83
|
const ariaLabelingProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(remainingProps);
|
|
73
84
|
const forwardProps = (0, import_useSafeForwardProps.useSafeForwardProps)(remainingProps, ariaLabelingProps);
|
|
74
85
|
const generatedId = (0, import_react.useId)();
|
|
@@ -99,10 +110,14 @@ const ProgressCircle = (0, import_react.forwardRef)(
|
|
|
99
110
|
className: (0, import_clsx.default)(
|
|
100
111
|
consumerClassName,
|
|
101
112
|
(0, import_container_css.containerColorsCSS)({
|
|
102
|
-
color:
|
|
103
|
-
variant:
|
|
113
|
+
color: derivedColor,
|
|
114
|
+
variant: derivedVariant
|
|
104
115
|
}),
|
|
105
|
-
(0, import_ProgressCircle_css.progressCircleContainerCSS)({
|
|
116
|
+
(0, import_ProgressCircle_css.progressCircleContainerCSS)({
|
|
117
|
+
size,
|
|
118
|
+
color: derivedColor,
|
|
119
|
+
variant: derivedVariant
|
|
120
|
+
})
|
|
106
121
|
),
|
|
107
122
|
style: consumerStyle,
|
|
108
123
|
...forwardProps
|
|
@@ -111,10 +126,7 @@ const ProgressCircle = (0, import_react.forwardRef)(
|
|
|
111
126
|
"span",
|
|
112
127
|
{
|
|
113
128
|
id,
|
|
114
|
-
className: (0, import_clsx.default)(
|
|
115
|
-
(0, import_colorUtils_css.colorUtilsCSS)({ color: variant || color, variant: "accent" }),
|
|
116
|
-
import_ProgressCircle_css.progressCircleRootCSS
|
|
117
|
-
),
|
|
129
|
+
className: (0, import_clsx.default)(import_ProgressCircle_css.progressCircleRootCSS),
|
|
118
130
|
style: {
|
|
119
131
|
height: `${progressCircleSizes[size]}px`,
|
|
120
132
|
width: `${progressCircleSizes[size]}px`
|
|
@@ -126,7 +138,7 @@ const ProgressCircle = (0, import_react.forwardRef)(
|
|
|
126
138
|
/* @__PURE__ */ import_react.default.createElement(
|
|
127
139
|
"svg",
|
|
128
140
|
{
|
|
129
|
-
className: import_ProgressCircle_css.
|
|
141
|
+
className: import_ProgressCircle_css.progressCircleSvgCss,
|
|
130
142
|
viewBox: `0 0 ${progressCircleSizes[size]} ${progressCircleSizes[size]}`,
|
|
131
143
|
width: "100%",
|
|
132
144
|
height: "100%"
|
|
@@ -135,9 +147,7 @@ const ProgressCircle = (0, import_react.forwardRef)(
|
|
|
135
147
|
"circle",
|
|
136
148
|
{
|
|
137
149
|
fill: "none",
|
|
138
|
-
className: (0, import_clsx.default)(
|
|
139
|
-
(0, import_ProgressCircle_css.progressCircleBackgroundCSS)({ variant: variant || color })
|
|
140
|
-
),
|
|
150
|
+
className: (0, import_clsx.default)(import_ProgressCircle_css.progressCircleBackgroundCSS),
|
|
141
151
|
cx: progressCircleSizes[size] / 2,
|
|
142
152
|
cy: progressCircleSizes[size] / 2,
|
|
143
153
|
r: (progressCircleSizes[size] - progressCircleThickness) / 2,
|
|
@@ -163,7 +173,6 @@ const ProgressCircle = (0, import_react.forwardRef)(
|
|
|
163
173
|
"label",
|
|
164
174
|
{
|
|
165
175
|
className: (0, import_clsx.default)(
|
|
166
|
-
import_ProgressCircle_css.progressCircleChildCSS,
|
|
167
176
|
(0, import_textStyle_css.textStyleCSS)({ textStyle: size === "small" ? "small" : "base" })
|
|
168
177
|
),
|
|
169
178
|
htmlFor: id
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const progressCircleRootCSS: string;
|
|
2
|
-
export declare const
|
|
2
|
+
export declare const progressCircleSvgCss: string;
|
|
3
3
|
export declare const progressCircleCSS: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
4
4
|
indeterminate: {
|
|
5
5
|
true: {
|
|
@@ -16,18 +16,7 @@ export declare const progressCircleCSS: import("@vanilla-extract/recipes").Runti
|
|
|
16
16
|
};
|
|
17
17
|
};
|
|
18
18
|
}>;
|
|
19
|
-
export declare const progressCircleBackgroundCSS:
|
|
20
|
-
variant: {
|
|
21
|
-
onAccent: {
|
|
22
|
-
stroke: string;
|
|
23
|
-
};
|
|
24
|
-
primary: {};
|
|
25
|
-
success: {};
|
|
26
|
-
warning: {};
|
|
27
|
-
critical: {};
|
|
28
|
-
neutral: {};
|
|
29
|
-
};
|
|
30
|
-
}>;
|
|
19
|
+
export declare const progressCircleBackgroundCSS: string;
|
|
31
20
|
export declare const progressCircleContainerCSS: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
32
21
|
size: {
|
|
33
22
|
small: {
|
|
@@ -37,5 +26,43 @@ export declare const progressCircleContainerCSS: import("@vanilla-extract/recipe
|
|
|
37
26
|
gap: string;
|
|
38
27
|
};
|
|
39
28
|
};
|
|
29
|
+
color: {
|
|
30
|
+
critical: {
|
|
31
|
+
vars: {
|
|
32
|
+
[x: string]: string;
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
neutral: {
|
|
36
|
+
vars: {
|
|
37
|
+
[x: string]: string;
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
primary: {
|
|
41
|
+
vars: {
|
|
42
|
+
[x: string]: string;
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
success: {
|
|
46
|
+
vars: {
|
|
47
|
+
[x: string]: string;
|
|
48
|
+
};
|
|
49
|
+
};
|
|
50
|
+
warning: {
|
|
51
|
+
vars: {
|
|
52
|
+
[x: string]: string;
|
|
53
|
+
};
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
variant: {
|
|
57
|
+
default: {
|
|
58
|
+
vars: {
|
|
59
|
+
[x: string]: string;
|
|
60
|
+
};
|
|
61
|
+
};
|
|
62
|
+
accent: {
|
|
63
|
+
vars: {
|
|
64
|
+
[x: string]: string;
|
|
65
|
+
};
|
|
66
|
+
};
|
|
67
|
+
};
|
|
40
68
|
}>;
|
|
41
|
-
export declare const progressCircleChildCSS: string;
|
|
@@ -17,21 +17,17 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
18
|
var ProgressCircle_css_exports = {};
|
|
19
19
|
__export(ProgressCircle_css_exports, {
|
|
20
|
-
ProgressCircleSVGCSS: () => ProgressCircleSVGCSS,
|
|
21
20
|
progressCircleBackgroundCSS: () => progressCircleBackgroundCSS,
|
|
22
21
|
progressCircleCSS: () => progressCircleCSS,
|
|
23
|
-
progressCircleChildCSS: () => progressCircleChildCSS,
|
|
24
22
|
progressCircleContainerCSS: () => progressCircleContainerCSS,
|
|
25
|
-
progressCircleRootCSS: () => progressCircleRootCSS
|
|
23
|
+
progressCircleRootCSS: () => progressCircleRootCSS,
|
|
24
|
+
progressCircleSvgCss: () => progressCircleSvgCss
|
|
26
25
|
});
|
|
27
26
|
module.exports = __toCommonJS(ProgressCircle_css_exports);
|
|
28
|
-
var import_colorUtils_css_ts_vanilla = require("../../styles/colorUtils.css");
|
|
29
|
-
var import_container_css_ts_vanilla = require("../../styles/container.css");
|
|
30
27
|
var import_ProgressCircle_css_ts_vanilla = require("./ProgressCircle.css");
|
|
31
28
|
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
32
|
-
var
|
|
33
|
-
var
|
|
34
|
-
var
|
|
35
|
-
var
|
|
36
|
-
var
|
|
37
|
-
var progressCircleRootCSS = "_kvldjh1-0-85-100";
|
|
29
|
+
var progressCircleBackgroundCSS = "_kvldjh9-0-85-110";
|
|
30
|
+
var progressCircleCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjh6-0-85-110", variantClassNames: { indeterminate: { true: "_kvldjh7-0-85-110", false: "_kvldjh8-0-85-110" } }, defaultVariants: {}, compoundVariants: [] });
|
|
31
|
+
var progressCircleContainerCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_kvldjha-0-85-110", variantClassNames: { size: { small: "_kvldjhb-0-85-110", large: "_kvldjhc-0-85-110" }, color: { critical: "_kvldjhd-0-85-110", neutral: "_kvldjhe-0-85-110", primary: "_kvldjhf-0-85-110", success: "_kvldjhg-0-85-110", warning: "_kvldjhh-0-85-110" }, variant: { "default": "_kvldjhi-0-85-110", accent: "_kvldjhj-0-85-110" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", variant: "accent" }, "_kvldjhk-0-85-110"], [{ color: "success", variant: "accent" }, "_kvldjhl-0-85-110"], [{ color: "warning", variant: "accent" }, "_kvldjhm-0-85-110"], [{ color: "critical", variant: "accent" }, "_kvldjhn-0-85-110"], [{ color: "neutral", variant: "accent" }, "_kvldjho-0-85-110"]] });
|
|
32
|
+
var progressCircleRootCSS = "_kvldjh4-0-85-110";
|
|
33
|
+
var progressCircleSvgCss = "_kvldjh5-0-85-110";
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { RoleVariantType } from '../../../core/types/role-variant.js';
|
|
3
2
|
export type SharedProgressBarProps = {
|
|
4
3
|
id: string;
|
|
5
|
-
variant: RoleVariantType;
|
|
6
4
|
density: 'default' | 'condensed';
|
|
7
5
|
};
|
|
8
6
|
/** Context provider for `ProgressBarProps` props meant to be provided to all its progressbar-related child nodes. */
|
|
@@ -33,6 +33,5 @@ module.exports = __toCommonJS(SharedProgressBarPropsContext_exports);
|
|
|
33
33
|
var import_react = __toESM(require("react"));
|
|
34
34
|
const SharedProgressBarPropsContext = import_react.default.createContext({
|
|
35
35
|
id: "",
|
|
36
|
-
density: "default"
|
|
37
|
-
variant: "neutral"
|
|
36
|
+
density: "default"
|
|
38
37
|
});
|
|
@@ -26,7 +26,6 @@ function _useSharedProgressBarPropsContext() {
|
|
|
26
26
|
const context = (0, import_react.useContext)(import_SharedProgressBarPropsContext.SharedProgressBarPropsContext);
|
|
27
27
|
return {
|
|
28
28
|
id: context.id,
|
|
29
|
-
variant: context.variant,
|
|
30
29
|
density: context.density
|
|
31
30
|
};
|
|
32
31
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@keyframes _1a1ozfd0-0-85-
|
|
1
|
+
@keyframes _1a1ozfd0-0-85-110 {
|
|
2
2
|
0% {
|
|
3
3
|
transform: translateX(-100%) scaleX(0);
|
|
4
4
|
}
|
|
@@ -6,12 +6,12 @@
|
|
|
6
6
|
transform: translateX(100%) scaleX(1.5);
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
|
-
._1a1ozfd1-0-85-
|
|
9
|
+
._1a1ozfd1-0-85-110 {
|
|
10
10
|
position: relative;
|
|
11
11
|
overflow: hidden;
|
|
12
12
|
background-color: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
|
|
13
13
|
}
|
|
14
|
-
._1a1ozfd1-0-85-
|
|
14
|
+
._1a1ozfd1-0-85-110:after {
|
|
15
15
|
content: "";
|
|
16
16
|
position: absolute;
|
|
17
17
|
top: 0;
|
|
@@ -21,13 +21,13 @@
|
|
|
21
21
|
background-color: var(--dt-colors-background-field-neutral-disabled, #dadbe780);
|
|
22
22
|
animation-iteration-count: infinite;
|
|
23
23
|
transform-origin: left center;
|
|
24
|
-
animation-name: _1a1ozfd0-0-85-
|
|
24
|
+
animation-name: _1a1ozfd0-0-85-110;
|
|
25
25
|
animation-duration: var(--dt-timings-slow-gentle, 800ms);
|
|
26
26
|
animation-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
|
|
27
27
|
}
|
|
28
|
-
._1a1ozfd2-0-85-
|
|
28
|
+
._1a1ozfd2-0-85-110 {
|
|
29
29
|
border-radius: var(--dt-borders-radius-container-subdued, 8px);
|
|
30
30
|
}
|
|
31
|
-
._1a1ozfd3-0-85-
|
|
31
|
+
._1a1ozfd3-0-85-110 {
|
|
32
32
|
border-radius: 9999px;
|
|
33
33
|
}
|
|
@@ -22,4 +22,4 @@ __export(Skeleton_css_exports, {
|
|
|
22
22
|
module.exports = __toCommonJS(Skeleton_css_exports);
|
|
23
23
|
var import_Skeleton_css_ts_vanilla = require("./Skeleton.css");
|
|
24
24
|
var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
|
|
25
|
-
var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd1-0-85-
|
|
25
|
+
var skeletonPlaceholderCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1a1ozfd1-0-85-110", variantClassNames: { variant: { "default": "_1a1ozfd2-0-85-110", rounded: "_1a1ozfd3-0-85-110" } }, defaultVariants: {}, compoundVariants: [] });
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import type { WithChildren } from '../../types/with-children.js';
|
|
3
3
|
/**
|
|
4
4
|
* Prop definition of the `FocusScope` component.
|
|
5
|
-
* @
|
|
5
|
+
* @public
|
|
6
6
|
*/
|
|
7
7
|
export interface FocusScopeProps extends WithChildren {
|
|
8
8
|
/**
|
|
@@ -21,7 +21,7 @@ export interface FocusScopeProps extends WithChildren {
|
|
|
21
21
|
* want to create a custom overlay, you can wrap the content of your overlay in the
|
|
22
22
|
* `FocusScope` to help you make the overlay accessible and handle focus
|
|
23
23
|
* appropriately.
|
|
24
|
-
* @
|
|
24
|
+
* @public
|
|
25
25
|
*/
|
|
26
26
|
export declare const FocusScope: {
|
|
27
27
|
(props: FocusScopeProps): React.JSX.Element;
|
package/core/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { AppRoot, type AppRootProps } from './components/app-root/AppRoot.js';
|
|
2
|
-
export { FocusScope
|
|
2
|
+
export { FocusScope, type FocusScopeProps, } from './components/focus-scope/FocusScope.js';
|
|
3
3
|
export { type FocusContextProps as _FocusContextProps } from './contexts/FocusContext.js';
|
|
4
4
|
export { useCurrentTheme } from './hooks/useCurrentTheme.js';
|
|
5
5
|
export { useFocusContext as _useFocusContext } from './hooks/useFocusContext.js';
|
package/core/index.js
CHANGED
|
@@ -18,8 +18,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
18
18
|
var core_exports = {};
|
|
19
19
|
__export(core_exports, {
|
|
20
20
|
AppRoot: () => import_AppRoot.AppRoot,
|
|
21
|
+
FocusScope: () => import_FocusScope.FocusScope,
|
|
21
22
|
_FocusProvider: () => import_FocusProvider.FocusProvider,
|
|
22
|
-
_FocusScope: () => import_FocusScope.FocusScope,
|
|
23
23
|
_attemptFocus: () => import_attempt_focus.attemptFocus,
|
|
24
24
|
_focusFirstDescendant: () => import_focus_first_descendant.focusFirstDescendant,
|
|
25
25
|
_getFirstFocusableChild: () => import_get_first_focusable_child.getFirstFocusableChild,
|