diff --git a/packages/amount/src/__snapshots__/component.test.tsx.snap b/packages/amount/src/__snapshots__/component.test.tsx.snap
index 30476e0751..adbb2f4d9e 100644
--- a/packages/amount/src/__snapshots__/component.test.tsx.snap
+++ b/packages/amount/src/__snapshots__/component.test.tsx.snap
@@ -3,12 +3,12 @@
exports[`Amount should match snapshots for base and Pure components 1`] = `
1
@@ -28,24 +28,24 @@ exports[`Amount should match snapshots for base and Pure components 1`] = `
exports[`Amount should not render plus sign when showPlus and value <= 0 1`] = `
0
−1
@@ -69,12 +69,12 @@ exports[`Amount should not render plus sign when showPlus and value <= 0 1`] = `
exports[`Amount should render plus sign when showPlus and value > 0 1`] = `
+
1
@@ -92,12 +92,12 @@ exports[`Amount should render plus sign when showPlus and value > 0 1`] = `
exports[`Amount should render rightAddons 1`] = `
1
diff --git a/packages/amount/src/component.tsx b/packages/amount/src/component.tsx
index 74836ff88d..bc0add455f 100644
--- a/packages/amount/src/component.tsx
+++ b/packages/amount/src/component.tsx
@@ -14,8 +14,8 @@ export const Amount: React.FC = ({
minority,
currency,
view = 'default',
- bold = 'major',
- transparentMinor = true,
+ bold,
+ transparentMinor,
rightAddons,
showPlus = false,
className,
@@ -28,11 +28,14 @@ export const Amount: React.FC = ({
view,
});
+ const defaultStyles = bold === undefined && transparentMinor === undefined;
+
return (
@@ -42,6 +45,7 @@ export const Amount: React.FC = ({
className={cn(styles.minorPartAndCurrency, {
[styles.transparentMinor]: transparentMinor,
[styles.normalMinor]: bold === 'major',
+ [styles.defaultMinor]: defaultStyles,
})}
>
{minorPart && AMOUNT_MAJOR_MINOR_PARTS_SEPARATOR}
diff --git a/packages/amount/src/index.module.css b/packages/amount/src/index.module.css
index 67d517ed57..da4978fa1e 100644
--- a/packages/amount/src/index.module.css
+++ b/packages/amount/src/index.module.css
@@ -1,5 +1,11 @@
@import '../../themes/src/default.css';
+:root {
+ --amount-major-part-font-weight: bold;
+ --amount-minor-part-font-weight: normal;
+ --amount-minor-part-opacity: 0.6;
+}
+
.component {
white-space: nowrap;
}
@@ -19,3 +25,12 @@
.normalMinor {
font-weight: normal;
}
+
+.default {
+ font-weight: var(--amount-major-part-font-weight);
+}
+
+.defaultMinor {
+ opacity: var(--amount-minor-part-opacity);
+ font-weight: var(--amount-minor-part-font-weight);
+}
diff --git a/packages/themes/src/mixins/click.css b/packages/themes/src/mixins/click.css
index 730781785e..89d3d0897c 100644
--- a/packages/themes/src/mixins/click.css
+++ b/packages/themes/src/mixins/click.css
@@ -1,3 +1,4 @@
+@import './amount/click.css';
@import './form-control/click.css';
@import './input/click.css';
@import './button/click.css';
@@ -49,4 +50,5 @@
@mixin dropzone-click;
@mixin code-input-click;
@mixin bottom-sheet-click;
+ @mixin amount-click;
}