@mekari/pixel3-progress 0.0.16-dev.0 → 0.0.17-dev.0

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.
Files changed (17) hide show
  1. package/dist/{chunk-JAEHJFZL.mjs → chunk-HNKQHQH6.mjs} +41 -4
  2. package/dist/{chunk-XJ3CNKOI.mjs → chunk-XXR76U32.mjs} +2 -2
  3. package/dist/index.js +42 -5
  4. package/dist/index.mjs +2 -2
  5. package/dist/metafile-cjs.json +1 -1
  6. package/dist/metafile-esm.json +1 -1
  7. package/dist/modules/progress.props.d.mts +2 -2
  8. package/dist/modules/progress.props.d.ts +2 -2
  9. package/dist/modules/progress.props.js +2 -2
  10. package/dist/modules/progress.props.mjs +1 -1
  11. package/dist/modules/progress.type.d.mts +3 -1
  12. package/dist/modules/progress.type.d.ts +3 -1
  13. package/dist/progress.d.mts +7 -7
  14. package/dist/progress.d.ts +7 -7
  15. package/dist/progress.js +42 -5
  16. package/dist/progress.mjs +2 -2
  17. package/package.json +5 -5
package/dist/{chunk-JAEHJFZL.mjs → chunk-HNKQHQH6.mjs} RENAMED
@@ -1,23 +1,59 @@
1
1
  import {
2
2
  __name,
3
3
  progressProps
4
- } from "./chunk-XJ3CNKOI.mjs";
4
+ } from "./chunk-XXR76U32.mjs";
5
5
 
6
6
  // src/progress.tsx
7
7
  import { createVNode as _createVNode } from "vue";
8
8
  import { defineComponent, computed } from "vue";
9
9
  import { progressSlotRecipe } from "@mekari/pixel3-styled-system/recipes";
10
10
  import { token } from "@mekari/pixel3-styled-system/tokens";
11
+ import { usePixelTheme } from "@mekari/pixel3-utils";
11
12
  var MpProgress = defineComponent({
12
13
  name: "MpProgress",
13
14
  props: progressProps,
14
15
  setup(props) {
16
+ const {
17
+ isNextTheme
18
+ } = usePixelTheme();
15
19
  const classes = computed(() => {
16
20
  return progressSlotRecipe({
17
21
  size: props.size,
18
22
  variant: props.variant
19
23
  });
20
24
  });
25
+ const getColor = computed(() => {
26
+ const propColor = props.color || (isNextTheme.value ? "information" : "sky");
27
+ const colorMap = {
28
+ information: {
29
+ next: "background.brand.bold",
30
+ default: "sky.400"
31
+ },
32
+ positive: {
33
+ next: "background.success.bold",
34
+ default: "teal.400"
35
+ },
36
+ discovery: {
37
+ next: "background.highlight.bold",
38
+ default: "violet.400"
39
+ },
40
+ warning: {
41
+ next: "background.warning.bold",
42
+ default: "amber.400"
43
+ },
44
+ negative: {
45
+ next: "background.danger.bold",
46
+ default: "rose.400"
47
+ },
48
+ stone: {
49
+ next: "neutral.800",
50
+ default: "stone.400"
51
+ }
52
+ };
53
+ const colorConfig = colorMap[propColor];
54
+ const color = colorConfig ? isNextTheme.value ? colorConfig.next : colorConfig.default : `${propColor}.400`;
55
+ return token(`colors.${color}`);
56
+ });
21
57
  const progressValue = /* @__PURE__ */ __name((val) => {
22
58
  let value = Number(val);
23
59
  if (value < 0)
@@ -32,9 +68,10 @@ var MpProgress = defineComponent({
32
68
  return () => {
33
69
  const {
34
70
  value,
35
- color,
36
71
  background
37
72
  } = props;
73
+ const propBackground = token(`colors.${background}`) || background;
74
+ const defaultPropBackground = token(`colors.${isNextTheme.value ? "background.stage" : "white"}`);
38
75
  return _createVNode("div", {
39
76
  "class": classes.value.root,
40
77
  "data-pixel-component": "MpProgress",
@@ -43,8 +80,8 @@ var MpProgress = defineComponent({
43
80
  "aria-valuemin": "0",
44
81
  "aria-valuenow": value,
45
82
  "style": {
46
- "--mp-progress-color": token(`colors.${color}`) || color,
47
- "--mp-progress-bg-color": token(`colors.${background}`) || background,
83
+ "--mp-progress-color": getColor.value,
84
+ "--mp-progress-bg-color": propBackground || defaultPropBackground,
48
85
  "--mp-progress-width": progressValue(value)
49
86
  }
50
87
  }, [props.variant === "linear" && _createVNode("div", {
package/dist/{chunk-XJ3CNKOI.mjs → chunk-XXR76U32.mjs} RENAMED
@@ -13,11 +13,11 @@ var progressProps = {
13
13
  },
14
14
  color: {
15
15
  type: String,
16
- default: "sky.400"
16
+ default: "sky"
17
17
  },
18
18
  background: {
19
19
  type: String,
20
- default: "white"
20
+ default: ""
21
21
  },
22
22
  value: {
23
23
  type: String,
package/dist/index.js CHANGED
@@ -43,11 +43,11 @@ var progressProps = {
43
43
  },
44
44
  color: {
45
45
  type: String,
46
- default: "sky.400"
46
+ default: "sky"
47
47
  },
48
48
  background: {
49
49
  type: String,
50
- default: "white"
50
+ default: ""
51
51
  },
52
52
  value: {
53
53
  type: String,
@@ -56,16 +56,52 @@ var progressProps = {
56
56
  };
57
57
 
58
58
  // src/progress.tsx
59
+ var import_pixel3_utils = require("@mekari/pixel3-utils");
59
60
  var MpProgress = (0, import_vue2.defineComponent)({
60
61
  name: "MpProgress",
61
62
  props: progressProps,
62
63
  setup(props) {
64
+ const {
65
+ isNextTheme
66
+ } = (0, import_pixel3_utils.usePixelTheme)();
63
67
  const classes = (0, import_vue2.computed)(() => {
64
68
  return (0, import_recipes.progressSlotRecipe)({
65
69
  size: props.size,
66
70
  variant: props.variant
67
71
  });
68
72
  });
73
+ const getColor = (0, import_vue2.computed)(() => {
74
+ const propColor = props.color || (isNextTheme.value ? "information" : "sky");
75
+ const colorMap = {
76
+ information: {
77
+ next: "background.brand.bold",
78
+ default: "sky.400"
79
+ },
80
+ positive: {
81
+ next: "background.success.bold",
82
+ default: "teal.400"
83
+ },
84
+ discovery: {
85
+ next: "background.highlight.bold",
86
+ default: "violet.400"
87
+ },
88
+ warning: {
89
+ next: "background.warning.bold",
90
+ default: "amber.400"
91
+ },
92
+ negative: {
93
+ next: "background.danger.bold",
94
+ default: "rose.400"
95
+ },
96
+ stone: {
97
+ next: "neutral.800",
98
+ default: "stone.400"
99
+ }
100
+ };
101
+ const colorConfig = colorMap[propColor];
102
+ const color = colorConfig ? isNextTheme.value ? colorConfig.next : colorConfig.default : `${propColor}.400`;
103
+ return (0, import_tokens.token)(`colors.${color}`);
104
+ });
69
105
  const progressValue = /* @__PURE__ */ __name((val) => {
70
106
  let value = Number(val);
71
107
  if (value < 0)
@@ -80,9 +116,10 @@ var MpProgress = (0, import_vue2.defineComponent)({
80
116
  return () => {
81
117
  const {
82
118
  value,
83
- color,
84
119
  background
85
120
  } = props;
121
+ const propBackground = (0, import_tokens.token)(`colors.${background}`) || background;
122
+ const defaultPropBackground = (0, import_tokens.token)(`colors.${isNextTheme.value ? "background.stage" : "white"}`);
86
123
  return (0, import_vue.createVNode)("div", {
87
124
  "class": classes.value.root,
88
125
  "data-pixel-component": "MpProgress",
@@ -91,8 +128,8 @@ var MpProgress = (0, import_vue2.defineComponent)({
91
128
  "aria-valuemin": "0",
92
129
  "aria-valuenow": value,
93
130
  "style": {
94
- "--mp-progress-color": (0, import_tokens.token)(`colors.${color}`) || color,
95
- "--mp-progress-bg-color": (0, import_tokens.token)(`colors.${background}`) || background,
131
+ "--mp-progress-color": getColor.value,
132
+ "--mp-progress-bg-color": propBackground || defaultPropBackground,
96
133
  "--mp-progress-width": progressValue(value)
97
134
  }
98
135
  }, [props.variant === "linear" && (0, import_vue.createVNode)("div", {
package/dist/index.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  MpProgress
3
- } from "./chunk-JAEHJFZL.mjs";
4
- import "./chunk-XJ3CNKOI.mjs";
3
+ } from "./chunk-HNKQHQH6.mjs";
4
+ import "./chunk-XXR76U32.mjs";
5
5
  export {
6
6
  MpProgress
7
7
  };
package/dist/metafile-cjs.json CHANGED
@@ -1 +1 @@
1
- {"inputs":{"src/modules/progress.props.ts":{"bytes":800,"imports":[{"path":"../modules/progress.type","kind":"import-statement","external":true}],"format":"esm"},"src/progress.tsx":{"bytes":1956,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"src/modules/progress.props.ts","kind":"import-statement","original":"./modules/progress.props"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":125,"imports":[{"path":"src/progress.tsx","kind":"import-statement","original":"./progress"}],"format":"esm"},"src/modules/progress.type.ts":{"bytes":177,"imports":[],"format":"esm"}},"outputs":{"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":125},"src/progress.tsx":{"bytesInOutput":1813},"src/modules/progress.props.ts":{"bytesInOutput":301}},"bytes":3325},"dist/progress.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/progress.tsx","inputs":{"src/progress.tsx":{"bytesInOutput":1953},"src/modules/progress.props.ts":{"bytesInOutput":301}},"bytes":3323},"dist/modules/progress.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/progress.props.ts","inputs":{"src/modules/progress.props.ts":{"bytesInOutput":465}},"bytes":1405},"dist/modules/progress.type.js":{"imports":[],"exports":[],"entryPoint":"src/modules/progress.type.ts","inputs":{"src/modules/progress.type.ts":{"bytesInOutput":86}},"bytes":790}}}
1
+ {"inputs":{"src/modules/progress.props.ts":{"bytes":827,"imports":[{"path":"../modules/progress.type","kind":"import-statement","external":true}],"format":"esm"},"src/progress.tsx":{"bytes":3274,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"src/modules/progress.props.ts","kind":"import-statement","original":"./modules/progress.props"},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":125,"imports":[{"path":"src/progress.tsx","kind":"import-statement","original":"./progress"}],"format":"esm"},"src/modules/progress.type.ts":{"bytes":368,"imports":[],"format":"esm"}},"outputs":{"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":125},"src/progress.tsx":{"bytesInOutput":3107},"src/modules/progress.props.ts":{"bytesInOutput":292}},"bytes":4610},"dist/progress.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/progress.tsx","inputs":{"src/progress.tsx":{"bytesInOutput":3247},"src/modules/progress.props.ts":{"bytesInOutput":292}},"bytes":4608},"dist/modules/progress.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/progress.props.ts","inputs":{"src/modules/progress.props.ts":{"bytesInOutput":456}},"bytes":1396},"dist/modules/progress.type.js":{"imports":[],"exports":[],"entryPoint":"src/modules/progress.type.ts","inputs":{"src/modules/progress.type.ts":{"bytesInOutput":86}},"bytes":790}}}
package/dist/metafile-esm.json CHANGED
@@ -1 +1 @@
1
- {"inputs":{"src/modules/progress.props.ts":{"bytes":800,"imports":[{"path":"../modules/progress.type","kind":"import-statement","external":true}],"format":"esm"},"src/progress.tsx":{"bytes":1956,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"src/modules/progress.props.ts","kind":"import-statement","original":"./modules/progress.props"},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":125,"imports":[{"path":"src/progress.tsx","kind":"import-statement","original":"./progress"}],"format":"esm"},"src/modules/progress.type.ts":{"bytes":177,"imports":[],"format":"esm"}},"outputs":{"dist/index.mjs":{"imports":[{"path":"dist/chunk-JAEHJFZL.mjs","kind":"import-statement"},{"path":"dist/chunk-XJ3CNKOI.mjs","kind":"import-statement"}],"exports":["MpProgress"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":109},"dist/progress.mjs":{"imports":[{"path":"dist/chunk-JAEHJFZL.mjs","kind":"import-statement"},{"path":"dist/chunk-XJ3CNKOI.mjs","kind":"import-statement"}],"exports":["MpProgress"],"entryPoint":"src/progress.tsx","inputs":{},"bytes":109},"dist/chunk-JAEHJFZL.mjs":{"imports":[{"path":"dist/chunk-XJ3CNKOI.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true}],"exports":["MpProgress"],"inputs":{"src/progress.tsx":{"bytesInOutput":1692}},"bytes":1805},"dist/modules/progress.props.mjs":{"imports":[{"path":"dist/chunk-XJ3CNKOI.mjs","kind":"import-statement"}],"exports":["progressProps"],"entryPoint":"src/modules/progress.props.ts","inputs":{},"bytes":85},"dist/chunk-XJ3CNKOI.mjs":{"imports":[],"exports":["__name","progressProps"],"inputs":{"src/modules/progress.props.ts":{"bytesInOutput":301}},"bytes":503},"dist/modules/progress.type.mjs":{"imports":[],"exports":[],"entryPoint":"src/modules/progress.type.ts","inputs":{"src/modules/progress.type.ts":{"bytesInOutput":0}},"bytes":0}}}
1
+ {"inputs":{"src/modules/progress.props.ts":{"bytes":827,"imports":[{"path":"../modules/progress.type","kind":"import-statement","external":true}],"format":"esm"},"src/progress.tsx":{"bytes":3274,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"src/modules/progress.props.ts","kind":"import-statement","original":"./modules/progress.props"},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/index.ts":{"bytes":125,"imports":[{"path":"src/progress.tsx","kind":"import-statement","original":"./progress"}],"format":"esm"},"src/modules/progress.type.ts":{"bytes":368,"imports":[],"format":"esm"}},"outputs":{"dist/index.mjs":{"imports":[{"path":"dist/chunk-HNKQHQH6.mjs","kind":"import-statement"},{"path":"dist/chunk-XXR76U32.mjs","kind":"import-statement"}],"exports":["MpProgress"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":109},"dist/progress.mjs":{"imports":[{"path":"dist/chunk-HNKQHQH6.mjs","kind":"import-statement"},{"path":"dist/chunk-XXR76U32.mjs","kind":"import-statement"}],"exports":["MpProgress"],"entryPoint":"src/progress.tsx","inputs":{},"bytes":109},"dist/chunk-HNKQHQH6.mjs":{"imports":[{"path":"dist/chunk-XXR76U32.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/recipes","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/tokens","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"exports":["MpProgress"],"inputs":{"src/progress.tsx":{"bytesInOutput":2920}},"bytes":3033},"dist/modules/progress.props.mjs":{"imports":[{"path":"dist/chunk-XXR76U32.mjs","kind":"import-statement"}],"exports":["progressProps"],"entryPoint":"src/modules/progress.props.ts","inputs":{},"bytes":85},"dist/chunk-XXR76U32.mjs":{"imports":[],"exports":["__name","progressProps"],"inputs":{"src/modules/progress.props.ts":{"bytesInOutput":292}},"bytes":494},"dist/modules/progress.type.mjs":{"imports":[],"exports":[],"entryPoint":"src/modules/progress.type.ts","inputs":{"src/modules/progress.type.ts":{"bytesInOutput":0}},"bytes":0}}}
package/dist/modules/progress.props.d.mts CHANGED
@@ -13,11 +13,11 @@ declare const progressProps: {
13
13
  default: string;
14
14
  };
15
15
  color: {
16
- type: PropType<CombinedString | ColorToken>;
16
+ type: PropType<"sky" | "teal" | "violet" | "ember" | "rose" | "stone" | "information" | "positive" | "discovery" | "warning" | "negative">;
17
17
  default: string;
18
18
  };
19
19
  background: {
20
- type: PropType<CombinedString | ColorToken>;
20
+ type: PropType<ColorToken | CombinedString>;
21
21
  default: string;
22
22
  };
23
23
  value: {
package/dist/modules/progress.props.d.ts CHANGED
@@ -13,11 +13,11 @@ declare const progressProps: {
13
13
  default: string;
14
14
  };
15
15
  color: {
16
- type: PropType<CombinedString | ColorToken>;
16
+ type: PropType<"sky" | "teal" | "violet" | "ember" | "rose" | "stone" | "information" | "positive" | "discovery" | "warning" | "negative">;
17
17
  default: string;
18
18
  };
19
19
  background: {
20
- type: PropType<CombinedString | ColorToken>;
20
+ type: PropType<ColorToken | CombinedString>;
21
21
  default: string;
22
22
  };
23
23
  value: {
package/dist/modules/progress.props.js CHANGED
@@ -34,11 +34,11 @@ var progressProps = {
34
34
  },
35
35
  color: {
36
36
  type: String,
37
- default: "sky.400"
37
+ default: "sky"
38
38
  },
39
39
  background: {
40
40
  type: String,
41
- default: "white"
41
+ default: ""
42
42
  },
43
43
  value: {
44
44
  type: String,
package/dist/modules/progress.props.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  progressProps
3
- } from "../chunk-XJ3CNKOI.mjs";
3
+ } from "../chunk-XXR76U32.mjs";
4
4
  export {
5
5
  progressProps
6
6
  };
package/dist/modules/progress.type.d.mts CHANGED
@@ -1,4 +1,6 @@
1
1
  type ProgressVariant = 'linear' | 'circular';
2
2
  type ProgressSize = 'sm' | 'md';
3
+ type ProgressType = 'sky' | 'teal' | 'violet' | 'ember' | 'rose' | 'stone';
4
+ type NextProgressType = 'information' | 'positive' | 'discovery' | 'warning' | 'negative' | 'stone';
3
5
 
4
- export { ProgressSize, ProgressVariant };
6
+ export { NextProgressType, ProgressSize, ProgressType, ProgressVariant };
package/dist/modules/progress.type.d.ts CHANGED
@@ -1,4 +1,6 @@
1
1
  type ProgressVariant = 'linear' | 'circular';
2
2
  type ProgressSize = 'sm' | 'md';
3
+ type ProgressType = 'sky' | 'teal' | 'violet' | 'ember' | 'rose' | 'stone';
4
+ type NextProgressType = 'information' | 'positive' | 'discovery' | 'warning' | 'negative' | 'stone';
3
5
 
4
- export { ProgressSize, ProgressVariant };
6
+ export { NextProgressType, ProgressSize, ProgressType, ProgressVariant };
package/dist/progress.d.mts CHANGED
@@ -14,11 +14,11 @@ declare const MpProgress: vue.DefineComponent<{
14
14
  default: string;
15
15
  };
16
16
  color: {
17
- type: vue.PropType<_mekari_pixel3_utils.CombinedString | ColorToken>;
17
+ type: vue.PropType<"sky" | "teal" | "violet" | "ember" | "rose" | "stone" | "information" | "positive" | "discovery" | "warning" | "negative">;
18
18
  default: string;
19
19
  };
20
20
  background: {
21
- type: vue.PropType<_mekari_pixel3_utils.CombinedString | ColorToken>;
21
+ type: vue.PropType<ColorToken | _mekari_pixel3_utils.CombinedString>;
22
22
  default: string;
23
23
  };
24
24
  value: {
@@ -35,11 +35,11 @@ declare const MpProgress: vue.DefineComponent<{
35
35
  default: string;
36
36
  };
37
37
  color: {
38
- type: vue.PropType<_mekari_pixel3_utils.CombinedString | ColorToken>;
38
+ type: vue.PropType<"sky" | "teal" | "violet" | "ember" | "rose" | "stone" | "information" | "positive" | "discovery" | "warning" | "negative">;
39
39
  default: string;
40
40
  };
41
41
  background: {
42
- type: vue.PropType<_mekari_pixel3_utils.CombinedString | ColorToken>;
42
+ type: vue.PropType<ColorToken | _mekari_pixel3_utils.CombinedString>;
43
43
  default: string;
44
44
  };
45
45
  value: {
@@ -47,11 +47,11 @@ declare const MpProgress: vue.DefineComponent<{
47
47
  default: string;
48
48
  };
49
49
  }>>, {
50
- background: _mekari_pixel3_utils.CombinedString | ColorToken;
50
+ background: ColorToken | _mekari_pixel3_utils.CombinedString;
51
+ value: string;
51
52
  variant: ProgressVariant;
52
53
  size: ProgressSize;
53
- color: _mekari_pixel3_utils.CombinedString | ColorToken;
54
- value: string;
54
+ color: "sky" | "teal" | "violet" | "ember" | "rose" | "stone" | "information" | "positive" | "discovery" | "warning" | "negative";
55
55
  }, {}>;
56
56
 
57
57
  export { MpProgress };
package/dist/progress.d.ts CHANGED
@@ -14,11 +14,11 @@ declare const MpProgress: vue.DefineComponent<{
14
14
  default: string;
15
15
  };
16
16
  color: {
17
- type: vue.PropType<_mekari_pixel3_utils.CombinedString | ColorToken>;
17
+ type: vue.PropType<"sky" | "teal" | "violet" | "ember" | "rose" | "stone" | "information" | "positive" | "discovery" | "warning" | "negative">;
18
18
  default: string;
19
19
  };
20
20
  background: {
21
- type: vue.PropType<_mekari_pixel3_utils.CombinedString | ColorToken>;
21
+ type: vue.PropType<ColorToken | _mekari_pixel3_utils.CombinedString>;
22
22
  default: string;
23
23
  };
24
24
  value: {
@@ -35,11 +35,11 @@ declare const MpProgress: vue.DefineComponent<{
35
35
  default: string;
36
36
  };
37
37
  color: {
38
- type: vue.PropType<_mekari_pixel3_utils.CombinedString | ColorToken>;
38
+ type: vue.PropType<"sky" | "teal" | "violet" | "ember" | "rose" | "stone" | "information" | "positive" | "discovery" | "warning" | "negative">;
39
39
  default: string;
40
40
  };
41
41
  background: {
42
- type: vue.PropType<_mekari_pixel3_utils.CombinedString | ColorToken>;
42
+ type: vue.PropType<ColorToken | _mekari_pixel3_utils.CombinedString>;
43
43
  default: string;
44
44
  };
45
45
  value: {
@@ -47,11 +47,11 @@ declare const MpProgress: vue.DefineComponent<{
47
47
  default: string;
48
48
  };
49
49
  }>>, {
50
- background: _mekari_pixel3_utils.CombinedString | ColorToken;
50
+ background: ColorToken | _mekari_pixel3_utils.CombinedString;
51
+ value: string;
51
52
  variant: ProgressVariant;
52
53
  size: ProgressSize;
53
- color: _mekari_pixel3_utils.CombinedString | ColorToken;
54
- value: string;
54
+ color: "sky" | "teal" | "violet" | "ember" | "rose" | "stone" | "information" | "positive" | "discovery" | "warning" | "negative";
55
55
  }, {}>;
56
56
 
57
57
  export { MpProgress };
package/dist/progress.js CHANGED
@@ -41,11 +41,11 @@ var progressProps = {
41
41
  },
42
42
  color: {
43
43
  type: String,
44
- default: "sky.400"
44
+ default: "sky"
45
45
  },
46
46
  background: {
47
47
  type: String,
48
- default: "white"
48
+ default: ""
49
49
  },
50
50
  value: {
51
51
  type: String,
@@ -54,16 +54,52 @@ var progressProps = {
54
54
  };
55
55
 
56
56
  // src/progress.tsx
57
+ var import_pixel3_utils = require("@mekari/pixel3-utils");
57
58
  var MpProgress = (0, import_vue2.defineComponent)({
58
59
  name: "MpProgress",
59
60
  props: progressProps,
60
61
  setup(props) {
62
+ const {
63
+ isNextTheme
64
+ } = (0, import_pixel3_utils.usePixelTheme)();
61
65
  const classes = (0, import_vue2.computed)(() => {
62
66
  return (0, import_recipes.progressSlotRecipe)({
63
67
  size: props.size,
64
68
  variant: props.variant
65
69
  });
66
70
  });
71
+ const getColor = (0, import_vue2.computed)(() => {
72
+ const propColor = props.color || (isNextTheme.value ? "information" : "sky");
73
+ const colorMap = {
74
+ information: {
75
+ next: "background.brand.bold",
76
+ default: "sky.400"
77
+ },
78
+ positive: {
79
+ next: "background.success.bold",
80
+ default: "teal.400"
81
+ },
82
+ discovery: {
83
+ next: "background.highlight.bold",
84
+ default: "violet.400"
85
+ },
86
+ warning: {
87
+ next: "background.warning.bold",
88
+ default: "amber.400"
89
+ },
90
+ negative: {
91
+ next: "background.danger.bold",
92
+ default: "rose.400"
93
+ },
94
+ stone: {
95
+ next: "neutral.800",
96
+ default: "stone.400"
97
+ }
98
+ };
99
+ const colorConfig = colorMap[propColor];
100
+ const color = colorConfig ? isNextTheme.value ? colorConfig.next : colorConfig.default : `${propColor}.400`;
101
+ return (0, import_tokens.token)(`colors.${color}`);
102
+ });
67
103
  const progressValue = /* @__PURE__ */ __name((val) => {
68
104
  let value = Number(val);
69
105
  if (value < 0)
@@ -78,9 +114,10 @@ var MpProgress = (0, import_vue2.defineComponent)({
78
114
  return () => {
79
115
  const {
80
116
  value,
81
- color,
82
117
  background
83
118
  } = props;
119
+ const propBackground = (0, import_tokens.token)(`colors.${background}`) || background;
120
+ const defaultPropBackground = (0, import_tokens.token)(`colors.${isNextTheme.value ? "background.stage" : "white"}`);
84
121
  return (0, import_vue.createVNode)("div", {
85
122
  "class": classes.value.root,
86
123
  "data-pixel-component": "MpProgress",
@@ -89,8 +126,8 @@ var MpProgress = (0, import_vue2.defineComponent)({
89
126
  "aria-valuemin": "0",
90
127
  "aria-valuenow": value,
91
128
  "style": {
92
- "--mp-progress-color": (0, import_tokens.token)(`colors.${color}`) || color,
93
- "--mp-progress-bg-color": (0, import_tokens.token)(`colors.${background}`) || background,
129
+ "--mp-progress-color": getColor.value,
130
+ "--mp-progress-bg-color": propBackground || defaultPropBackground,
94
131
  "--mp-progress-width": progressValue(value)
95
132
  }
96
133
  }, [props.variant === "linear" && (0, import_vue.createVNode)("div", {
package/dist/progress.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  MpProgress
3
- } from "./chunk-JAEHJFZL.mjs";
4
- import "./chunk-XJ3CNKOI.mjs";
3
+ } from "./chunk-HNKQHQH6.mjs";
4
+ import "./chunk-XXR76U32.mjs";
5
5
  export {
6
6
  MpProgress
7
7
  };
package/package.json CHANGED
@@ -1,17 +1,17 @@
1
1
  {
2
2
  "name": "@mekari/pixel3-progress",
3
3
  "description": "Progress component for mekari pixel 3",
4
- "version": "0.0.16-dev.0",
4
+ "version": "0.0.17-dev.0",
5
5
  "main": "dist/index.js",
6
6
  "license": "MIT",
7
7
  "files": [
8
8
  "dist"
9
9
  ],
10
10
  "dependencies": {
11
- "@mekari/pixel3-icon": "0.0.16-dev.0",
12
- "@mekari/pixel3-spinner": "0.0.16-dev.0",
13
- "@mekari/pixel3-styled-system": "0.1.1",
14
- "@mekari/pixel3-utils": "0.0.6"
11
+ "@mekari/pixel3-icon": "0.0.17-dev.0",
12
+ "@mekari/pixel3-spinner": "0.0.17-dev.0",
13
+ "@mekari/pixel3-styled-system": "0.1.2-dev.0",
14
+ "@mekari/pixel3-utils": "0.0.7-dev.0"
15
15
  },
16
16
  "peerDependencies": {
17
17
  "vue": "^3.4.9"