@ultraviolet/icons 5.0.0-beta.1 → 5.0.0-beta.2

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 (5) hide show
  1. package/dist/components/Icon/constants.d.ts +4 -4
  2. package/dist/components/Icon/styles.css.cjs +12 -17
  3. package/dist/components/Icon/styles.css.d.ts +3 -6
  4. package/dist/components/Icon/styles.css.js +12 -17
  5. package/package.json +1 -1
package/dist/components/Icon/constants.d.ts CHANGED
@@ -7,9 +7,9 @@ export declare const SIZES: {
7
7
  readonly xxlarge: "700";
8
8
  };
9
9
  export declare const PROMINENCES: {
10
- default: string;
11
- strong: string;
12
- stronger: string;
13
- weak: string;
10
+ readonly default: "";
11
+ readonly strong: "strong";
12
+ readonly stronger: "stronger";
13
+ readonly weak: "weak";
14
14
  };
15
15
  export declare const SENTIMENTS: readonly ["primary", "secondary", "neutral", "success", "danger", "warning", "info"];
package/dist/components/Icon/styles.css.cjs CHANGED
@@ -16,10 +16,13 @@ function generateSizeStyle(size) {
16
16
  };
17
17
  }
18
18
  function getIconColor(prominence, sentiment, disabled) {
19
- const definedProminence = sentiment !== "neutral" && prominence === "stronger" || prominence === "weak" ? capitalize(constants.PROMINENCES.default) : capitalize(constants.PROMINENCES[prominence]);
20
- themes.theme.colors[sentiment];
21
- const iconToken = `icon${definedProminence}${""}`;
22
- return themes.theme.colors?.[sentiment]?.[iconToken] || sentiment;
19
+ if (!sentiment) {
20
+ return "currentColor";
21
+ }
22
+ const definedProminence = sentiment === "neutral" ? capitalize(constants.PROMINENCES[prominence]) : "";
23
+ const themeColor = themes.theme.colors[sentiment];
24
+ const iconToken = `icon${definedProminence}${disabled ? "Disabled" : ""}`;
25
+ return themeColor[iconToken];
23
26
  }
24
27
  const icon = recipes.recipe({
25
28
  base: {
@@ -35,25 +38,17 @@ const icon = recipes.recipe({
35
38
  },
36
39
  prominence: Object.fromEntries(Object.keys(constants.PROMINENCES).map((prominence) => [prominence, {}]))
37
40
  },
38
- compoundVariants: [...Object.keys(constants.PROMINENCES).flatMap((prominence) => constants.SENTIMENTS.map((sentiment) => ({
39
- variants: {
40
- sentiment,
41
- prominence,
42
- disabled: false
43
- },
44
- style: {
45
- fill: getIconColor(prominence, sentiment)
46
- }
47
- }))), ...Object.keys(constants.PROMINENCES).flatMap((prominence) => constants.SENTIMENTS.map((sentiment) => ({
41
+ compoundVariants: [true, false].flatMap((disabled) => Object.keys(constants.PROMINENCES).flatMap((prominence) => [...constants.SENTIMENTS, void 0].map((sentiment) => ({
42
+ // We need to add undefined to have the variant where sentiment is undefined
48
43
  variants: {
49
44
  sentiment,
50
45
  prominence,
51
- disabled: true
46
+ disabled
52
47
  },
53
48
  style: {
54
- fill: getIconColor(prominence, sentiment)
49
+ fill: getIconColor(prominence, sentiment, disabled)
55
50
  }
56
- })))],
51
+ })))),
57
52
  defaultVariants: {
58
53
  prominence: "default",
59
54
  disabled: false
package/dist/components/Icon/styles.css.d.ts CHANGED
@@ -1,7 +1,6 @@
1
+ import { PROMINENCES, SENTIMENTS } from './constants';
1
2
  export declare const icon: import("@vanilla-extract/recipes").RuntimeFn<{
2
- sentiment: {
3
- [k: string]: {};
4
- };
3
+ sentiment: Record<(typeof SENTIMENTS)[number], object>;
5
4
  size: {
6
5
  [k: string]: {
7
6
  height: `var(--${string})`;
@@ -14,7 +13,5 @@ export declare const icon: import("@vanilla-extract/recipes").RuntimeFn<{
14
13
  true: {};
15
14
  false: {};
16
15
  };
17
- prominence: {
18
- [k: string]: {};
19
- };
16
+ prominence: Record<keyof typeof PROMINENCES, object>;
20
17
  }>;
package/dist/components/Icon/styles.css.js CHANGED
@@ -14,10 +14,13 @@ function generateSizeStyle(size) {
14
14
  };
15
15
  }
16
16
  function getIconColor(prominence, sentiment, disabled) {
17
- const definedProminence = sentiment !== "neutral" && prominence === "stronger" || prominence === "weak" ? capitalize(PROMINENCES.default) : capitalize(PROMINENCES[prominence]);
18
- theme.colors[sentiment];
19
- const iconToken = `icon${definedProminence}${""}`;
20
- return theme.colors?.[sentiment]?.[iconToken] || sentiment;
17
+ if (!sentiment) {
18
+ return "currentColor";
19
+ }
20
+ const definedProminence = sentiment === "neutral" ? capitalize(PROMINENCES[prominence]) : "";
21
+ const themeColor = theme.colors[sentiment];
22
+ const iconToken = `icon${definedProminence}${disabled ? "Disabled" : ""}`;
23
+ return themeColor[iconToken];
21
24
  }
22
25
  const icon = recipe({
23
26
  base: {
@@ -33,25 +36,17 @@ const icon = recipe({
33
36
  },
34
37
  prominence: Object.fromEntries(Object.keys(PROMINENCES).map((prominence) => [prominence, {}]))
35
38
  },
36
- compoundVariants: [...Object.keys(PROMINENCES).flatMap((prominence) => SENTIMENTS.map((sentiment) => ({
37
- variants: {
38
- sentiment,
39
- prominence,
40
- disabled: false
41
- },
42
- style: {
43
- fill: getIconColor(prominence, sentiment)
44
- }
45
- }))), ...Object.keys(PROMINENCES).flatMap((prominence) => SENTIMENTS.map((sentiment) => ({
39
+ compoundVariants: [true, false].flatMap((disabled) => Object.keys(PROMINENCES).flatMap((prominence) => [...SENTIMENTS, void 0].map((sentiment) => ({
40
+ // We need to add undefined to have the variant where sentiment is undefined
46
41
  variants: {
47
42
  sentiment,
48
43
  prominence,
49
- disabled: true
44
+ disabled
50
45
  },
51
46
  style: {
52
- fill: getIconColor(prominence, sentiment)
47
+ fill: getIconColor(prominence, sentiment, disabled)
53
48
  }
54
- })))],
49
+ })))),
55
50
  defaultVariants: {
56
51
  prominence: "default",
57
52
  disabled: false
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ultraviolet/icons",
3
- "version": "5.0.0-beta.1",
3
+ "version": "5.0.0-beta.2",
4
4
  "description": "Ultraviolet Icons",
5
5
  "homepage": "https://github.com/scaleway/ultraviolet#readme",
6
6
  "repository": {