@hitachivantara/uikit-react-core 5.58.0 → 5.58.1

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.
@@ -37,11 +37,11 @@ const { staticClasses, useClasses } = classes.createClasses("HvButton", {
37
37
  disabled: {
38
38
  cursor: "not-allowed",
39
39
  color: uikitStyles.theme.colors.secondary_60,
40
- borderColor: "transparent",
41
- backgroundColor: "transparent",
40
+ borderColor: uikitStyles.theme.colors.atmo3,
41
+ backgroundColor: uikitStyles.theme.colors.atmo3,
42
42
  "&:hover, &:focus-visible": {
43
- backgroundColor: "transparent",
44
- borderColor: "transparent"
43
+ backgroundColor: uikitStyles.theme.colors.atmo3,
44
+ borderColor: uikitStyles.theme.colors.atmo3
45
45
  }
46
46
  },
47
47
  icon: {
@@ -52,10 +52,26 @@ const { staticClasses, useClasses } = classes.createClasses("HvButton", {
52
52
  margin: -1
53
53
  }
54
54
  },
55
- subtle: { backgroundColor: "transparent" },
55
+ subtle: {
56
+ backgroundColor: "transparent",
57
+ "&$disabled": {
58
+ backgroundColor: "transparent",
59
+ "&:hover, &:focus-visible": {
60
+ backgroundColor: "transparent"
61
+ }
62
+ }
63
+ },
56
64
  ghost: {
57
65
  borderColor: "transparent",
58
- backgroundColor: "transparent"
66
+ backgroundColor: "transparent",
67
+ "&$disabled": {
68
+ borderColor: "transparent",
69
+ backgroundColor: "transparent",
70
+ "&:hover, &:focus-visible": {
71
+ borderColor: "transparent",
72
+ backgroundColor: "transparent"
73
+ }
74
+ }
59
75
  },
60
76
  semantic: {
61
77
  color: uikitStyles.theme.colors.base_dark,
@@ -1 +1 @@
1
- {"version":3,"file":"Button.styles.cjs","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\nimport { HvButtonRadius, HvButtonSize } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n textTransform: \"none\",\n cursor: \"pointer\",\n whiteSpace: \"nowrap\",\n\n // Background color common for almost all variants\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n\n // Default button - no size specified\n fontFamily: theme.fontFamily.body,\n ...theme.typography.label,\n height: \"32px\",\n border: \"1px solid currentcolor\",\n borderRadius: theme.radii.base,\n padding: theme.spacing(0, \"sm\"),\n },\n startIcon: {\n marginLeft: `calc(-1 * ${theme.space.xs})`,\n },\n endIcon: {\n marginRight: `calc(-1 * ${theme.space.xs})`,\n },\n focusVisible: {},\n disabled: {\n cursor: \"not-allowed\",\n color: theme.colors.secondary_60,\n borderColor: \"transparent\",\n backgroundColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n },\n },\n icon: {\n margin: 0,\n padding: 0,\n height: \"fit-content\",\n \"& > *\": {\n margin: -1,\n },\n },\n subtle: { backgroundColor: \"transparent\" },\n ghost: {\n borderColor: \"transparent\",\n backgroundColor: \"transparent\",\n },\n semantic: {\n color: theme.colors.base_dark,\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n backgroundColor: \"rgba(251, 252, 252, 0.3)\",\n },\n \"&$disabled\": {\n backgroundColor: \"rgba(251, 252, 252, 0.1)\",\n },\n },\n\n // TODO - remove in v6\n primary: {},\n primarySubtle: {},\n primaryGhost: {},\n secondarySubtle: {},\n secondaryGhost: {},\n\n // Deprecated (DS3)\n secondary: {},\n});\n\nexport const getColoringStyle = (color: string, type?: string) => {\n if (type)\n return {\n color: theme.colors[color !== \"warning\" ? color : `${color}_140`],\n };\n\n const bg = theme.colors[color !== \"warning\" ? color : `${color}_120`];\n const hoverBg =\n theme.colors[color !== \"warning\" ? `${color}_80` : `${color}_140`];\n return {\n color: theme.colors.atmo1,\n backgroundColor: bg,\n borderColor: bg,\n \"&:hover, &:focus-visible\": {\n backgroundColor: hoverBg,\n borderColor: hoverBg,\n },\n };\n};\n\nexport const getRadiusStyles = (radius: HvButtonRadius): CSSInterpolation => ({\n borderRadius: theme.radii[radius],\n});\n\n// TODO - remove xs and xl in v6 since they are not DS spec\nconst sizes = {\n xs: { height: \"24px\", space: \"sm\", typography: \"captionLabel\" },\n sm: { height: \"24px\", space: \"sm\", typography: \"captionLabel\" },\n md: { height: \"32px\", space: \"sm\", typography: \"label\" },\n lg: { height: \"48px\", space: \"md\", typography: \"label\" },\n xl: { height: \"48px\", space: \"md\", typography: \"label\" },\n};\n\nexport const getSizeStyles = (size: HvButtonSize): CSSInterpolation => {\n const { height, space, typography } = sizes[size];\n const { color, ...typoProps } = theme.typography[typography];\n return {\n height,\n padding: theme.spacing(0, space),\n ...typoProps,\n };\n};\n\nexport const getIconSizeStyles = (size: HvButtonSize): CSSInterpolation => {\n const { height } = sizes[size];\n return {\n height,\n width: height,\n };\n};\n\nexport const getOverrideColors = (): CSSInterpolation => ({\n \"& svg .color0\": {\n fill: \"currentcolor\",\n },\n});\n"],"names":["createClasses","theme","outlineStyles"],"mappings":"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"}
1
+ {"version":3,"file":"Button.styles.cjs","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\nimport { HvButtonRadius, HvButtonSize } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n textTransform: \"none\",\n cursor: \"pointer\",\n whiteSpace: \"nowrap\",\n\n // Background color common for almost all variants\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n\n // Default button - no size specified\n fontFamily: theme.fontFamily.body,\n ...theme.typography.label,\n height: \"32px\",\n border: \"1px solid currentcolor\",\n borderRadius: theme.radii.base,\n padding: theme.spacing(0, \"sm\"),\n },\n startIcon: {\n marginLeft: `calc(-1 * ${theme.space.xs})`,\n },\n endIcon: {\n marginRight: `calc(-1 * ${theme.space.xs})`,\n },\n focusVisible: {},\n disabled: {\n cursor: \"not-allowed\",\n color: theme.colors.secondary_60,\n borderColor: theme.colors.atmo3,\n backgroundColor: theme.colors.atmo3,\n \"&:hover, &:focus-visible\": {\n backgroundColor: theme.colors.atmo3,\n borderColor: theme.colors.atmo3,\n },\n },\n icon: {\n margin: 0,\n padding: 0,\n height: \"fit-content\",\n \"& > *\": {\n margin: -1,\n },\n },\n subtle: {\n backgroundColor: \"transparent\",\n \"&$disabled\": {\n backgroundColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n backgroundColor: \"transparent\",\n },\n },\n },\n ghost: {\n borderColor: \"transparent\",\n backgroundColor: \"transparent\",\n \"&$disabled\": {\n borderColor: \"transparent\",\n backgroundColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n borderColor: \"transparent\",\n backgroundColor: \"transparent\",\n },\n },\n },\n semantic: {\n color: theme.colors.base_dark,\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n backgroundColor: \"rgba(251, 252, 252, 0.3)\",\n },\n \"&$disabled\": {\n backgroundColor: \"rgba(251, 252, 252, 0.1)\",\n },\n },\n\n // TODO - remove in v6\n primary: {},\n primarySubtle: {},\n primaryGhost: {},\n secondarySubtle: {},\n secondaryGhost: {},\n\n // Deprecated (DS3)\n secondary: {},\n});\n\nexport const getColoringStyle = (color: string, type?: string) => {\n if (type)\n return {\n color: theme.colors[color !== \"warning\" ? color : `${color}_140`],\n };\n\n const bg = theme.colors[color !== \"warning\" ? color : `${color}_120`];\n const hoverBg =\n theme.colors[color !== \"warning\" ? `${color}_80` : `${color}_140`];\n return {\n color: theme.colors.atmo1,\n backgroundColor: bg,\n borderColor: bg,\n \"&:hover, &:focus-visible\": {\n backgroundColor: hoverBg,\n borderColor: hoverBg,\n },\n };\n};\n\nexport const getRadiusStyles = (radius: HvButtonRadius): CSSInterpolation => ({\n borderRadius: theme.radii[radius],\n});\n\n// TODO - remove xs and xl in v6 since they are not DS spec\nconst sizes = {\n xs: { height: \"24px\", space: \"sm\", typography: \"captionLabel\" },\n sm: { height: \"24px\", space: \"sm\", typography: \"captionLabel\" },\n md: { height: \"32px\", space: \"sm\", typography: \"label\" },\n lg: { height: \"48px\", space: \"md\", typography: \"label\" },\n xl: { height: \"48px\", space: \"md\", typography: \"label\" },\n};\n\nexport const getSizeStyles = (size: HvButtonSize): CSSInterpolation => {\n const { height, space, typography } = sizes[size];\n const { color, ...typoProps } = theme.typography[typography];\n return {\n height,\n padding: theme.spacing(0, space),\n ...typoProps,\n };\n};\n\nexport const getIconSizeStyles = (size: HvButtonSize): CSSInterpolation => {\n const { height } = sizes[size];\n return {\n height,\n width: height,\n };\n};\n\nexport const getOverrideColors = (): CSSInterpolation => ({\n \"& svg .color0\": {\n fill: \"currentcolor\",\n },\n});\n"],"names":["createClasses","theme","outlineStyles"],"mappings":"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"}
@@ -35,11 +35,11 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
35
35
  disabled: {
36
36
  cursor: "not-allowed",
37
37
  color: theme.colors.secondary_60,
38
- borderColor: "transparent",
39
- backgroundColor: "transparent",
38
+ borderColor: theme.colors.atmo3,
39
+ backgroundColor: theme.colors.atmo3,
40
40
  "&:hover, &:focus-visible": {
41
- backgroundColor: "transparent",
42
- borderColor: "transparent"
41
+ backgroundColor: theme.colors.atmo3,
42
+ borderColor: theme.colors.atmo3
43
43
  }
44
44
  },
45
45
  icon: {
@@ -50,10 +50,26 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
50
50
  margin: -1
51
51
  }
52
52
  },
53
- subtle: { backgroundColor: "transparent" },
53
+ subtle: {
54
+ backgroundColor: "transparent",
55
+ "&$disabled": {
56
+ backgroundColor: "transparent",
57
+ "&:hover, &:focus-visible": {
58
+ backgroundColor: "transparent"
59
+ }
60
+ }
61
+ },
54
62
  ghost: {
55
63
  borderColor: "transparent",
56
- backgroundColor: "transparent"
64
+ backgroundColor: "transparent",
65
+ "&$disabled": {
66
+ borderColor: "transparent",
67
+ backgroundColor: "transparent",
68
+ "&:hover, &:focus-visible": {
69
+ borderColor: "transparent",
70
+ backgroundColor: "transparent"
71
+ }
72
+ }
57
73
  },
58
74
  semantic: {
59
75
  color: theme.colors.base_dark,
@@ -1 +1 @@
1
- {"version":3,"file":"Button.styles.js","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\nimport { HvButtonRadius, HvButtonSize } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n textTransform: \"none\",\n cursor: \"pointer\",\n whiteSpace: \"nowrap\",\n\n // Background color common for almost all variants\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n\n // Default button - no size specified\n fontFamily: theme.fontFamily.body,\n ...theme.typography.label,\n height: \"32px\",\n border: \"1px solid currentcolor\",\n borderRadius: theme.radii.base,\n padding: theme.spacing(0, \"sm\"),\n },\n startIcon: {\n marginLeft: `calc(-1 * ${theme.space.xs})`,\n },\n endIcon: {\n marginRight: `calc(-1 * ${theme.space.xs})`,\n },\n focusVisible: {},\n disabled: {\n cursor: \"not-allowed\",\n color: theme.colors.secondary_60,\n borderColor: \"transparent\",\n backgroundColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n },\n },\n icon: {\n margin: 0,\n padding: 0,\n height: \"fit-content\",\n \"& > *\": {\n margin: -1,\n },\n },\n subtle: { backgroundColor: \"transparent\" },\n ghost: {\n borderColor: \"transparent\",\n backgroundColor: \"transparent\",\n },\n semantic: {\n color: theme.colors.base_dark,\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n backgroundColor: \"rgba(251, 252, 252, 0.3)\",\n },\n \"&$disabled\": {\n backgroundColor: \"rgba(251, 252, 252, 0.1)\",\n },\n },\n\n // TODO - remove in v6\n primary: {},\n primarySubtle: {},\n primaryGhost: {},\n secondarySubtle: {},\n secondaryGhost: {},\n\n // Deprecated (DS3)\n secondary: {},\n});\n\nexport const getColoringStyle = (color: string, type?: string) => {\n if (type)\n return {\n color: theme.colors[color !== \"warning\" ? color : `${color}_140`],\n };\n\n const bg = theme.colors[color !== \"warning\" ? color : `${color}_120`];\n const hoverBg =\n theme.colors[color !== \"warning\" ? `${color}_80` : `${color}_140`];\n return {\n color: theme.colors.atmo1,\n backgroundColor: bg,\n borderColor: bg,\n \"&:hover, &:focus-visible\": {\n backgroundColor: hoverBg,\n borderColor: hoverBg,\n },\n };\n};\n\nexport const getRadiusStyles = (radius: HvButtonRadius): CSSInterpolation => ({\n borderRadius: theme.radii[radius],\n});\n\n// TODO - remove xs and xl in v6 since they are not DS spec\nconst sizes = {\n xs: { height: \"24px\", space: \"sm\", typography: \"captionLabel\" },\n sm: { height: \"24px\", space: \"sm\", typography: \"captionLabel\" },\n md: { height: \"32px\", space: \"sm\", typography: \"label\" },\n lg: { height: \"48px\", space: \"md\", typography: \"label\" },\n xl: { height: \"48px\", space: \"md\", typography: \"label\" },\n};\n\nexport const getSizeStyles = (size: HvButtonSize): CSSInterpolation => {\n const { height, space, typography } = sizes[size];\n const { color, ...typoProps } = theme.typography[typography];\n return {\n height,\n padding: theme.spacing(0, space),\n ...typoProps,\n };\n};\n\nexport const getIconSizeStyles = (size: HvButtonSize): CSSInterpolation => {\n const { height } = sizes[size];\n return {\n height,\n width: height,\n };\n};\n\nexport const getOverrideColors = (): CSSInterpolation => ({\n \"& svg .color0\": {\n fill: \"currentcolor\",\n },\n});\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Button.styles.js","sources":["../../../src/Button/Button.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\nimport { HvButtonRadius, HvButtonSize } from \"./types\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvButton\", {\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n textTransform: \"none\",\n cursor: \"pointer\",\n whiteSpace: \"nowrap\",\n\n // Background color common for almost all variants\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n \"&:focus-visible\": {\n ...outlineStyles,\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n\n // Default button - no size specified\n fontFamily: theme.fontFamily.body,\n ...theme.typography.label,\n height: \"32px\",\n border: \"1px solid currentcolor\",\n borderRadius: theme.radii.base,\n padding: theme.spacing(0, \"sm\"),\n },\n startIcon: {\n marginLeft: `calc(-1 * ${theme.space.xs})`,\n },\n endIcon: {\n marginRight: `calc(-1 * ${theme.space.xs})`,\n },\n focusVisible: {},\n disabled: {\n cursor: \"not-allowed\",\n color: theme.colors.secondary_60,\n borderColor: theme.colors.atmo3,\n backgroundColor: theme.colors.atmo3,\n \"&:hover, &:focus-visible\": {\n backgroundColor: theme.colors.atmo3,\n borderColor: theme.colors.atmo3,\n },\n },\n icon: {\n margin: 0,\n padding: 0,\n height: \"fit-content\",\n \"& > *\": {\n margin: -1,\n },\n },\n subtle: {\n backgroundColor: \"transparent\",\n \"&$disabled\": {\n backgroundColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n backgroundColor: \"transparent\",\n },\n },\n },\n ghost: {\n borderColor: \"transparent\",\n backgroundColor: \"transparent\",\n \"&$disabled\": {\n borderColor: \"transparent\",\n backgroundColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n borderColor: \"transparent\",\n backgroundColor: \"transparent\",\n },\n },\n },\n semantic: {\n color: theme.colors.base_dark,\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n \"&:hover, &:focus-visible\": {\n backgroundColor: \"rgba(251, 252, 252, 0.3)\",\n },\n \"&$disabled\": {\n backgroundColor: \"rgba(251, 252, 252, 0.1)\",\n },\n },\n\n // TODO - remove in v6\n primary: {},\n primarySubtle: {},\n primaryGhost: {},\n secondarySubtle: {},\n secondaryGhost: {},\n\n // Deprecated (DS3)\n secondary: {},\n});\n\nexport const getColoringStyle = (color: string, type?: string) => {\n if (type)\n return {\n color: theme.colors[color !== \"warning\" ? color : `${color}_140`],\n };\n\n const bg = theme.colors[color !== \"warning\" ? color : `${color}_120`];\n const hoverBg =\n theme.colors[color !== \"warning\" ? `${color}_80` : `${color}_140`];\n return {\n color: theme.colors.atmo1,\n backgroundColor: bg,\n borderColor: bg,\n \"&:hover, &:focus-visible\": {\n backgroundColor: hoverBg,\n borderColor: hoverBg,\n },\n };\n};\n\nexport const getRadiusStyles = (radius: HvButtonRadius): CSSInterpolation => ({\n borderRadius: theme.radii[radius],\n});\n\n// TODO - remove xs and xl in v6 since they are not DS spec\nconst sizes = {\n xs: { height: \"24px\", space: \"sm\", typography: \"captionLabel\" },\n sm: { height: \"24px\", space: \"sm\", typography: \"captionLabel\" },\n md: { height: \"32px\", space: \"sm\", typography: \"label\" },\n lg: { height: \"48px\", space: \"md\", typography: \"label\" },\n xl: { height: \"48px\", space: \"md\", typography: \"label\" },\n};\n\nexport const getSizeStyles = (size: HvButtonSize): CSSInterpolation => {\n const { height, space, typography } = sizes[size];\n const { color, ...typoProps } = theme.typography[typography];\n return {\n height,\n padding: theme.spacing(0, space),\n ...typoProps,\n };\n};\n\nexport const getIconSizeStyles = (size: HvButtonSize): CSSInterpolation => {\n const { height } = sizes[size];\n return {\n height,\n width: height,\n };\n};\n\nexport const getOverrideColors = (): CSSInterpolation => ({\n \"& svg .color0\": {\n fill: \"currentcolor\",\n },\n});\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hitachivantara/uikit-react-core",
3
- "version": "5.58.0",
3
+ "version": "5.58.1",
4
4
  "private": false,
5
5
  "author": "Hitachi Vantara UI Kit Team",
6
6
  "description": "Core React components for the NEXT Design System.",
@@ -33,7 +33,7 @@
33
33
  "@emotion/css": "^11.11.2",
34
34
  "@emotion/serialize": "^1.1.2",
35
35
  "@emotion/utils": "^1.2.1",
36
- "@hitachivantara/uikit-react-icons": "^5.8.7",
36
+ "@hitachivantara/uikit-react-icons": "^5.9.0",
37
37
  "@hitachivantara/uikit-react-shared": "^5.1.32",
38
38
  "@hitachivantara/uikit-styles": "^5.23.0",
39
39
  "@internationalized/date": "^3.2.0",
@@ -62,7 +62,7 @@
62
62
  "access": "public",
63
63
  "directory": "package"
64
64
  },
65
- "gitHead": "070f46b3d2785d65f62d45ee263506aa102ffdab",
65
+ "gitHead": "8730994c50c5d4554af1d56170a8cfa624a56dcf",
66
66
  "main": "dist/cjs/index.cjs",
67
67
  "exports": {
68
68
  ".": {