diff --git a/.storybook/styles/chromatic.css b/.storybook/styles/chromatic.css index c5fe03e5e..753d7bc17 100644 --- a/.storybook/styles/chromatic.css +++ b/.storybook/styles/chromatic.css @@ -5,5 +5,5 @@ *, *::before, *::after { - font-family: Arial; + font-family: Arial !important; } diff --git a/packages/components/src/button/docs/Button.stories.mdx b/packages/components/src/button/docs/Button.stories.mdx index 29c77d5ef..9e8051e8c 100644 --- a/packages/components/src/button/docs/Button.stories.mdx +++ b/packages/components/src/button/docs/Button.stories.mdx @@ -195,6 +195,16 @@ Tertiary buttons are used for actions that need to be there but that we don't wa +#### Upsell + + + + + + + + + #### Negative Negative buttons are used for actions that would result in a deletion or another non recoverable negative action. These are mostly useful in modals. diff --git a/packages/components/src/button/src/Button.css b/packages/components/src/button/src/Button.css index 7f2d8a4d4..bd0d993c1 100644 --- a/packages/components/src/button/src/Button.css +++ b/packages/components/src/button/src/Button.css @@ -1,5 +1,5 @@ .o-ui { - --o-ui-button-height-sm: var(--o-ui-sz-5); + --o-ui-button-height-sm: 2rem; --o-ui-button-height-md: var(--o-ui-sz-6); --o-ui-button-loading-spinner-background: rgba(256, 256, 256, 0.5); } @@ -10,16 +10,14 @@ background-color: transparent; background-image: none; cursor: pointer; - line-height: var(--o-ui-lh-1); - font-weight: 500; + line-height: 1; transition: all var(--o-ui-easing-duration-2) var(--o-ui-easing-productive); border: none; text-align: center; position: relative; width: max-content; - border-radius: var(--o-ui-br-2); + border-radius: var(--hop-shape-rounded-md); color: inherit; - font-family: inherit; font-size: 100%; } @@ -48,10 +46,10 @@ .o-ui-button:after { opacity: 0; content: ""; - top: 0; - left: 0; - right: 0; - bottom: 0; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; display: block; position: absolute; box-shadow: 0 0 0 var(--o-ui-focus-ring-thickness-md) var(--o-ui-focus-ring-color-alias-default); @@ -63,6 +61,8 @@ .o-ui-button-text { flex-grow: 1; line-height: 1; + font-family: var(--hop-body-sm-medium-font-family); + font-weight: var(--hop-body-sm-medium-font-weight); } /* ANCHOR */ @@ -78,159 +78,182 @@ a.o-ui-button { min-height: var(--o-ui-button-height-sm); } +.o-ui-button-sm .o-ui-button-text { + font-size: var(--hop-body-sm-medium-font-size); +} + .o-ui-button-md { min-height: var(--o-ui-button-height-md); } +.o-ui-button-md .o-ui-button-text { + font-size: var(--hop-body-md-medium-font-size); +} + /* PRIMARY */ .o-ui-button-primary { - color: var(--o-ui-text-alias-static-white); - background-color: var(--o-ui-bg-alias-accent); + background-color: var(--hop-primary-surface-strong); + color: var(--hop-primary-text-strong); } /* PRIMARY | HOVER */ .o-ui-button-primary:not([disabled]):not(.o-ui-button-loading):hover, .o-ui-button-primary:not([disabled]):not(.o-ui-button-loading).o-ui-button-hover { - background-color: var(--o-ui-bg-alias-accent-hover); -} - -/* PRIMARY | HOVER | ACTIVE */ -.o-ui-button-primary:not([disabled]):not(.o-ui-button-loading):hover:active, -.o-ui-button-primary:not([disabled]).o-ui-button-hover.o-ui-button-active { - background-color: var(--o-ui-bg-alias-accent-active); + background-color: var(--hop-primary-surface-strong-hover); } /* PRIMARY | FOCUS */ -.o-ui-button-primary:not([disabled]):focus-visible, -.o-ui-button-primary:not([disabled]).o-ui-button-focus { - background-color: var(--o-ui-bg-alias-accent); +.o-ui-button-primary:not([disabled]):not(.o-ui-button-loading):focus-visible, +.o-ui-button-primary:not([disabled]):not(.o-ui-button-loading).o-ui-button-focus { + background-color: var(--hop-primary-surface-hover); } /* PRIMARY | HOVER | FOCUS */ -.o-ui-button-primary:hover:focus-visible, -.o-ui-button-primary.o-ui-button-hover.o-ui-button-focus { - background-color: var(--o-ui-bg-alias-accent-hover); +.o-ui-button-primary:not([disabled]):not(.o-ui-button-loading):hover:focus-visible, +.o-ui-button-primary:not([disabled]):not(.o-ui-button-loading).o-ui-button-hover.o-ui-button-focus { + background-color: var(--hop-primary-surface-strong-hover); } -/* PRIMARY | ACTIVE | FOCUS */ -.o-ui-button-primary.o-ui-button-primary:not([disabled]):not(.o-ui-button-loading):active:focus-visible, -.o-ui-button-primary:not([disabled]).o-ui-button-active.o-ui-button-focus { - background-color: var(--o-ui-bg-alias-accent-active); +/* PRIMARY | ACTIVE */ +:not([disabled]):not(.o-ui-button-loading).o-ui-button-primary.o-ui-button-active { + background-color: var(--hop-primary-surface-strong-active); + outline: 1px solid var(--hop-primary-border-active); + color: var(--hop-primary-text-active); } -/* PRIMARY | ACTIVE */ -.o-ui-button-primary:not(.o-ui-button-loading):not([disabled]):active, -:not([disabled]).o-ui-button-primary.o-ui-button-active { - background-color: var(--o-ui-bg-alias-accent-active); +/* UPSELL */ +.o-ui-button-upsell { + background-color: var(--hop-upsell-surface); + color: var(--hop-upsell-text); +} + +/* UPSELL | HOVER */ +.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading):hover, +.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading).o-ui-button-hover { + background-color: var(--hop-upsell-surface-hover); + outline: 1px solid var(--hop-upsell-border-hover); + color: var(--hop-upsell-text-hover); +} + +/* UPSELL | FOCUS */ +.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading):focus-visible, +.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading).o-ui-button-focus { + background-color: var(--hop-upsell-surface-hover); +} + +/* UPSELL | ACTIVE */ +.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading).o-ui-button-active { + background-color: var(--hop-upsell-surface-active); + outline: 1px solid var(--hop-upsell-border-active); + color: var(--hop-upsell-text-active); } /* SECONDARY */ .o-ui-button-secondary { - border: 1px solid var(--o-ui-b-alias-mid-break); - color: var(--o-ui-text-alias-primary); + border: 1px solid var(--hop-neutral-border-strong); + color: var(--hop-neutral-text); } .o-ui-button-secondary:after { - top: -1px; - left: -1px; - right: -1px; - bottom: -1px; + top: -3px; + left: -3px; + right: -3px; + bottom: -3px; } /* SECONDARY | HOVER */ .o-ui-button-secondary:not([disabled]):not(.o-ui-button-loading):hover, .o-ui-button-secondary:not([disabled]):not(.o-ui-button-loading).o-ui-button-hover { - background-color: var(--o-ui-bg-alias-accent-transparent-hover); - color: var(--o-ui-text-alias-accent-hover); + background-color: var(--hop-neutral-surface-hover); + color: var(--hop-neutral-text-hover); +} + +/* SECONDARY | FOCUS */ +.o-ui-button-secondary:not([disabled]):not(.o-ui-button-loading):focus-visible, +.o-ui-button-secondary:not([disabled]):not(.o-ui-button-loading).o-ui-button-focus { + background-color: var(--hop-neutral-surface-hover); + color: var(--hop-neutral-text-hover); } /* SECONDARY | ACTIVE */ -.o-ui-button-secondary:not(.o-ui-button-loading):not([disabled]):active, -.o-ui-button-secondary:not(.o-ui-button-loading):not([disabled]):active:hover, .o-ui-button-secondary:not([disabled]):not(.o-ui-button-loading).o-ui-button-active { - background-color: var(--o-ui-bg-alias-accent-transparent-active); - border-color: var(--o-ui-b-alias-accent-active); - color: var(--o-ui-text-alias-accent-active); + background-color: var(--hop-neutral-surface-active); + border-color: var(--hop-neutral-surface-active); + color: var(--hop-neutral-text-active); } /* TERTIARY */ .o-ui-button-tertiary { - background-color: var(--o-ui-transparent); + background-color: transparent; border: 1px solid transparent; - color: var(--o-ui-text-alias-primary); + color: var(--hop-neutral-text-weak); } .o-ui-button-tertiary:not(.o-ui-button-inherit-style) .o-ui-button-start-icon, .o-ui-button-tertiary:not(.o-ui-button-inherit-style) .o-ui-button-end-icon { - color: var(--o-ui-icon-alias-accent); + color: var(--hop-neutral-icon-weak); } /* TERTIARY | FOCUS */ -.o-ui-button-tertiary:after { - top: calc(var(--o-ui-focus-ring-outset-inner-offset)); - left: calc(var(--o-ui-focus-ring-outset-inner-offset)); - right: calc(var(--o-ui-focus-ring-outset-inner-offset)); - bottom: calc(var(--o-ui-focus-ring-outset-inner-offset)); -} - .o-ui-button-tertiary:focus-visible:after, .o-ui-button-tertiary:not([disabled]).o-ui-button-focus:after { opacity: 1; + top: -3px; + left: -3px; + right: -3px; + bottom: -3px; } /* TERTIARY | HOVER */ .o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading):hover, .o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading).o-ui-button-hover { - background-color: var(--o-ui-bg-alias-accent-transparent-hover); - color: var(--o-ui-text-alias-accent-hover); + background-color: var(--hop-neutral-surface-hover); + color: var(--hop-neutral-text-weak-hover); } -.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading):hover .o-ui-button-start-icon, -.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading).o-ui-button-hover .o-ui-button-start-icon, -.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading):hover .o-ui-button-end-icon, -.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading).o-ui-button-hover .o-ui-button-end-icon { - color: var(--o-ui-icon-alias-accent-hover); +/* TERTIARY | FOCUS */ +.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading):focus-visible, +.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading).o-ui-button-focus { + background-color: var(--hop-neutral-surface-hover); + color: var(--hop-neutral-text-weak-hover); } /* TERTIARY | ACTIVE */ -.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading):active, -.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading):active:hover, .o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading).o-ui-button-active { - background-color: var(--o-ui-bg-alias-accent-transparent-active); - color: var(--o-ui-text-alias-accent-active); -} - -.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not(.o-ui-button-loading):active .o-ui-button-start-icon, -.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not(.o-ui-button-loading):active:hover .o-ui-button-start-icon, -.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading).o-ui-button-active .o-ui-button-start-icon, -.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not(.o-ui-button-loading):active .o-ui-button-end-icon, -.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not(.o-ui-button-loading):active:hover .o-ui-button-end-icon, -.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading).o-ui-button-active .o-ui-button-end-icon { - color: var(--o-ui-icon-alias-accent-active); + background-color: transparent; + color: var(--hop-neutral-text); } -.o-ui-dark .o-ui-button-tertiary:not(.o-ui-button-inherit-style):not(.o-ui-button-loading):active, -.o-ui-dark .o-ui-button-tertiary:not(.o-ui-button-inherit-style):not(.o-ui-button-loading):active:hover, -.o-ui-dark .o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading).o-ui-button-active { - border-color: var(--o-ui-b-alias-accent-active); +/* TERTIARY | DISABLED */ +.o-ui-button[disabled].o-ui-button-tertiary, +.o-ui-button-disabled.o-ui-button-tertiary { + background-color: transparent; + color: var(--hop-neutral-text-disabled); } /* NEGATIVE */ .o-ui-button-negative { - background-color: var(--o-ui-bg-alias-alert); - color: var(--o-ui-text-alias-static-white); + background-color: var(--hop-danger-surface-strong); + color: var(--hop-danger-text-strong); } /* NEGATIVE | HOVER */ .o-ui-button-negative:not([disabled]):not(.o-ui-button-loading):hover, -.o-ui-button-negative:not([disabled]).o-ui-button-hover { - background-color: var(--o-ui-bg-alias-alert-hover); +.o-ui-button-negative:not([disabled]):not(.o-ui-button-loading).o-ui-button-hover { + background-color: var(--hop-danger-surface-hover); +} + +/* NEGATIVE | FOCUS */ +.o-ui-button-negative:not([disabled]):not(.o-ui-button-loading):focus-visible, +.o-ui-button-negative:not([disabled]):not(.o-ui-button-loading).o-ui-button-focus { + background-color: var(--hop-danger-surface-hover); } /* NEGATIVE | ACTIVE */ -.o-ui-button-negative:not([disabled]):not(.o-ui-button-loading):active, .o-ui-button-negative:not([disabled]):not(.o-ui-button-loading).o-ui-button-active { - background-color: var(--o-ui-bg-alias-alert-active); + background-color: var(--hop-danger-surface-active); + outline: 1px solid var(--hop-danger-border-active); + color: var(--hop-danger-text-active); } /* FLUID */ @@ -240,7 +263,9 @@ a.o-ui-button { /* LOADING */ .o-ui-button-loading { - opacity: var(--o-ui-disabled-opacity); + background-color: var(--hop-neutral-surface-disabled); + color: var(--hop-neutral-text-disabled); + border-color: transparent; cursor: not-allowed; } @@ -256,7 +281,7 @@ a.o-ui-button { /* LOADING | SOLID */ .o-ui-button-loading.o-ui-button-solid:before { border: solid 2px var(--o-ui-button-loading-spinner-background); - border-top-color: var(--o-ui-white); + border-top-color: var(--hop-samoyed); } /* LOADING | SIZES */ @@ -273,7 +298,9 @@ a.o-ui-button { /* DISABLED */ .o-ui-button[disabled], .o-ui-button-disabled { - opacity: var(--o-ui-disabled-opacity); + background-color: var(--hop-neutral-surface-disabled); + color: var(--hop-neutral-text-disabled); + border-color: transparent; cursor: not-allowed; } @@ -300,8 +327,6 @@ a.o-ui-button { } /* TERTIARY | INHERIT | ACTIVE */ -.o-ui-button-tertiary:not(.o-ui-button-loading).o-ui-button-inherit-style:active, -.o-ui-button-tertiary:not(.o-ui-button-loading).o-ui-button-inherit-style:active:hover, .o-ui-button-tertiary:not([disabled]):not(.o-ui-button-loading).o-ui-button-active.o-ui-button-inherit-style { background-color: rgba(0, 0, 0, 0.15); color: inherit; @@ -321,27 +346,19 @@ a.o-ui-button { } /* INHERIT | SECONDARY | ACTIVE */ -.o-ui-button:active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary, .o-ui-button-active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary, -.o-ui-button:active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary.o-ui-button-basic, .o-ui-button-active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary.o-ui-button-basic, -.o-ui-button:active:hover:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary, .o-ui-button-active:hover:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary, -.o-ui-button:active:hover:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary.o-ui-button-basic, .o-ui-button-active:hover:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary.o-ui-button-basic { background-color: rgba(0, 0, 0, 0.15); color: inherit; border: 1px solid currentColor; } -.o-ui-button:active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary .o-ui-button-text, .o-ui-button-active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary .o-ui-button-text, -.o-ui-button:active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary .o-ui-button-end-icon, .o-ui-button-active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary .o-ui-button-end-icon, -.o-ui-button:active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary .o-ui-button-start-icon, .o-ui-button-active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary .o-ui-button-start-icon, -.o-ui-button-active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary .o-ui-button-counter, -.o-ui-button:active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary .o-ui-button-counter { +.o-ui-button-active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary .o-ui-button-counter { color: inherit; } @@ -359,13 +376,13 @@ a.o-ui-button { .o-ui-button-inherit-style.o-ui-button-primary .o-ui-button-start-icon, .o-ui-button-inherit-style.o-ui-button-primary .o-ui-button-end-icon { - fill: var(--o-ui-white); - color: var(--o-ui-white); + fill: var(--hop-samoyed); + color: var(--hop-samoyed); opacity: .9; } .o-ui-button-inherit-style.o-ui-button-primary .o-ui-button-text { - color: var(--o-ui-white); + color: var(--hop-samoyed); opacity: .9; } @@ -383,19 +400,18 @@ a.o-ui-button { opacity: 1; } -.o-ui-button:active:not([disabled]):not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-primary, .o-ui-button-active:not([disabled]):not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-primary { background-color: currentColor; } .o-ui-button-inherit-style.o-ui-button-loading.o-ui-button-primary::before { border-color: rgba(255, 255, 255, 0.1); - border-top-color: var(--o-ui-white); + border-top-color: var(--hop-samoyed); } /* INHERIT | PRIMARY | COUNTER */ .o-ui-button-inherit-style.o-ui-button-primary .o-ui-button-counter { - color: var(--o-ui-white) !important; + color: var(--hop-samoyed) !important; opacity: .9; } diff --git a/packages/components/src/button/src/Button.tsx b/packages/components/src/button/src/Button.tsx index 2370276a1..af6e90698 100644 --- a/packages/components/src/button/src/Button.tsx +++ b/packages/components/src/button/src/Button.tsx @@ -154,7 +154,6 @@ export function InnerButton(props: InnerButtonProps) { diff --git a/packages/components/src/button/src/ButtonGroup.css b/packages/components/src/button/src/ButtonGroup.css index 100925258..c70b55d79 100644 --- a/packages/components/src/button/src/ButtonGroup.css +++ b/packages/components/src/button/src/ButtonGroup.css @@ -4,6 +4,6 @@ } .o-ui-button-group-in-field { - margin-top: var(--o-ui-sp-1); - margin-bottom: var(--o-ui-sp-1); + margin-top: var(--hop-space-stack-xs); + margin-bottom: var(--hop-space-stack-xs); } diff --git a/packages/components/src/button/src/IconButton.css b/packages/components/src/button/src/IconButton.css index bd74f752d..7ad71fb3a 100644 --- a/packages/components/src/button/src/IconButton.css +++ b/packages/components/src/button/src/IconButton.css @@ -1,8 +1,8 @@ @import "./Button.css"; .o-ui { - --o-ui-icon-button-height-2xs: var(--o-ui-sz-3); - --o-ui-icon-button-height-xs: var(--o-ui-sz-4); + --o-ui-icon-button-height-2xs: 1.25rem; + --o-ui-icon-button-height-xs: 1.5rem; } /* ICON BUTTON */ @@ -17,21 +17,21 @@ /* SIZES */ .o-ui-icon-button.o-ui-button-2xs { min-height: var(--o-ui-icon-button-height-2xs); - min-width: var(--o-ui-sz-3); + min-width: 1.25rem; } .o-ui-icon-button.o-ui-button-xs { min-height: var(--o-ui-icon-button-height-xs); - min-width: var(--o-ui-sz-4); + min-width: 1.5rem; } /* SIZES */ .o-ui-icon-button.o-ui-button-sm { - min-width: var(--o-ui-sz-5); + min-width: 2rem; } .o-ui-icon-button.o-ui-button-md { - min-width: var(--o-ui-sz-6); + min-width: 2.5rem; } /* LOADING */ @@ -47,7 +47,7 @@ /* INHERIT */ .o-ui-button-inherit.o-ui-button-solid .o-ui-button-icon { - fill: var(--o-ui-white); + fill: var(--hop-samoyed); opacity: .9; } @@ -56,3 +56,14 @@ color: inherit; fill: currentColor; } + +/* ICON */ +.o-ui-button-sm.o-ui-icon-button .o-ui-button-icon { + width: 1.5rem; + height: 1.5rem; +} + +.o-ui-button-md.o-ui-icon-button .o-ui-button-icon { + width: 2rem; + height: 2rem; +} diff --git a/packages/components/src/button/src/IconButton.tsx b/packages/components/src/button/src/IconButton.tsx index 33d408d45..85dd1a6f1 100644 --- a/packages/components/src/button/src/IconButton.tsx +++ b/packages/components/src/button/src/IconButton.tsx @@ -130,7 +130,6 @@ export function InnerIconButton(props: InnerIconButtonProps) { diff --git a/packages/components/src/button/src/TextButton.css b/packages/components/src/button/src/TextButton.css index e06a8a69e..bbdc21cc7 100644 --- a/packages/components/src/button/src/TextButton.css +++ b/packages/components/src/button/src/TextButton.css @@ -1,12 +1,9 @@ @import "./Button.css"; .o-ui-text-button { - --o-ui-text-button-padding-sm: var(--o-ui-sp-3); - --o-ui-text-button-padding-md: var(--o-ui-sp-4); - --o-ui-text-button-with-icon-padding-sm: var(--o-ui-sp-2); - --o-ui-text-button-with-icon-padding-md: var(--o-ui-sp-3); - --o-ui-text-button-icon-size-sm: 1rem; - --o-ui-text-button-icon-size-md: 1.25rem; + --o-ui-text-button-padding: var(--hop-space-inset-md); + --o-ui-text-button-with-icon-padding: var(--hop-space-inset-sm); + --o-ui-text-button-icon-size: 1rem; display: flex; align-items: center; justify-content: center; @@ -23,52 +20,20 @@ margin-left: var(--o-ui-sp-1); } -.o-ui-button-fluid.o-ui-button-has-start-icon.o-ui-button-md .o-ui-button-text { - margin-left: calc(-1 * (var(--o-ui-text-button-with-icon-padding-md) + var(--o-ui-text-button-icon-size-md)) / 2); +.o-ui-button-fluid.o-ui-button-has-start-icon.o-ui-button .o-ui-button-text { + margin-left: calc(-1 * (var(--o-ui-text-button-with-icon-padding) + var(--o-ui-text-button-icon-size)) / 2); } -.o-ui-button-fluid.o-ui-button-has-end-icon.o-ui-button-md .o-ui-button-text { - margin-right: calc(-1 * (var(--o-ui-text-button-with-icon-padding-md) + var(--o-ui-text-button-icon-size-md)) / 2); +.o-ui-button-fluid.o-ui-button-has-end-icon.o-ui-button .o-ui-button-text { + margin-right: calc(-1 * (var(--o-ui-text-button-with-icon-padding) + var(--o-ui-text-button-icon-size)) / 2); } -.o-ui-button-fluid.o-ui-button-has-end-icon.o-ui-button-has-start-icon.o-ui-button-sm .o-ui-button-text, -.o-ui-button-fluid.o-ui-button-has-end-icon.o-ui-button-has-start-icon.o-ui-button-md .o-ui-button-text { +.o-ui-button-fluid.o-ui-button-has-end-icon.o-ui-button-has-start-icon.o-ui-button .o-ui-button-text { margin-left: 0; margin-right: 0; } -.o-ui-button-fluid.o-ui-button-has-start-icon.o-ui-button-sm .o-ui-button-text { - margin-left: calc(-1 * (var(--o-ui-text-button-with-icon-padding-sm) + var(--o-ui-text-button-icon-size-sm)) / 2); -} - -.o-ui-button-fluid.o-ui-button-has-end-icon.o-ui-button-sm .o-ui-button-text { - margin-right: calc(-1 * (var(--o-ui-text-button-with-icon-padding-sm) + var(--o-ui-text-button-icon-size-sm)) / 2); -} - /* SIZES */ -.o-ui-text-button.o-ui-button-sm { - padding: 0 var(--o-ui-text-button-padding-sm); -} - -.o-ui-text-button.o-ui-button-md { - padding: 0 var(--o-ui-text-button-padding-md); -} - -/* CONTENT | ICON | SIZES */ -/* LEFT */ -.o-ui-text-button.o-ui-button-has-start-icon.o-ui-button-sm { - padding-left: var(--o-ui-text-button-with-icon-padding-sm); -} - -.o-ui-text-button.o-ui-button-has-start-icon.o-ui-button-md { - padding-left: var(--o-ui-text-button-with-icon-padding-md); -} - -/* RIGHT */ -.o-ui-text-button.o-ui-button-has-end-icon.o-ui-button-sm { - padding-right: var(--o-ui-text-button-with-icon-padding-sm); -} - -.o-ui-text-button.o-ui-button-has-end-icon.o-ui-button-md { - padding-right: var(--o-ui-text-button-with-icon-padding-md); +.o-ui-text-button.o-ui-button { + padding: 0 var(--o-ui-text-button-padding); } diff --git a/packages/components/src/button/src/useButton.ts b/packages/components/src/button/src/useButton.ts index 0010d32b0..2b1eec594 100644 --- a/packages/components/src/button/src/useButton.ts +++ b/packages/components/src/button/src/useButton.ts @@ -3,7 +3,7 @@ import { HtmlButton } from "../../html"; import { InteractionProps, InternalProps, MergedRef, Size, cssModule, isNumber, mergeClasses, normalizeSize, useAutoFocus, useMergedRefs } from "../../shared"; import { useDisableClick } from "./useDisableClick"; -export type ButtonVariant = "primary" | "secondary" | "tertiary" | "negative"; +export type ButtonVariant = "primary" | "secondary" | "tertiary" | "negative" | "upsell"; export interface UseButtonProps extends Partial, InteractionProps { autoFocus?: boolean | number; diff --git a/packages/components/src/button/tests/chromatic/Button.chroma.jsx b/packages/components/src/button/tests/chromatic/Button.chroma.jsx index 5379678e8..f745ba5a3 100644 --- a/packages/components/src/button/tests/chromatic/Button.chroma.jsx +++ b/packages/components/src/button/tests/chromatic/Button.chroma.jsx @@ -22,6 +22,7 @@ createButtonTestSuite(