From 135752c7dc96c8168dfa1079b95593bb2e57e06a Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Tue, 10 Oct 2023 13:35:22 -0400 Subject: [PATCH 1/5] rebranded buttons --- packages/components/src/button/src/Button.css | 166 ++++++++++-------- .../components/src/button/src/ButtonGroup.css | 4 +- .../components/src/button/src/IconButton.tsx | 1 - .../components/src/button/src/TextButton.css | 55 ++---- packages/components/src/index.css | 3 +- .../styling/src/theming/sharegate-theme.css | 4 +- 6 files changed, 110 insertions(+), 123 deletions(-) diff --git a/packages/components/src/button/src/Button.css b/packages/components/src/button/src/Button.css index 7f2d8a4d4..60f16646c 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,177 @@ 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); + background-color: var(--hop-primary-surface-strong-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-active); + outline: 1px solid var(--hop-primary-border-active); + color: var(--hop-primary-text-active); } /* 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); + 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); + 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); + 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); + background-color: var(--hop-primary-surface-strong-active); + outline: 1px solid var(--hop-primary-border-active); + color: var(--hop-primary-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, +.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, +.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); + background-color: var(--hop-danger-surface-hover); +} + +/* NEGATIVE | FOCUS */ +.o-ui-button-negative:not([disabled]):not(.o-ui-button-loading):focus, +.o-ui-button-negative:not([disabled]).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 +258,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 +276,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 +293,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; } @@ -359,13 +381,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; } @@ -390,12 +412,12 @@ a.o-ui-button { .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/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.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/index.css b/packages/components/src/index.css index cd2eb526b..e3ff9ac2d 100644 --- a/packages/components/src/index.css +++ b/packages/components/src/index.css @@ -58,8 +58,9 @@ Sadly, we encountered CSS ordering issues when the components are bundled in our --o-ui-disabled-opacity: 0.4; /* FOCUS RING */ + /* are sm and lg needed? */ --o-ui-focus-ring-thickness-sm: 1px; - --o-ui-focus-ring-thickness-md: 3px; + --o-ui-focus-ring-thickness-md: 2px; --o-ui-focus-ring-thickness-lg: 5px; --o-ui-focus-ring-inset-sm: 0 0 0 var(--o-ui-focus-ring-thickness-sm) var(--o-ui-focus-ring-color-alias-default); diff --git a/packages/components/src/styling/src/theming/sharegate-theme.css b/packages/components/src/styling/src/theming/sharegate-theme.css index c05f06371..4e1f17dc4 100644 --- a/packages/components/src/styling/src/theming/sharegate-theme.css +++ b/packages/components/src/styling/src/theming/sharegate-theme.css @@ -236,7 +236,7 @@ --o-ui-text-alias-success: var(--o-ui-success-6); --o-ui-text-alias-static-white: var(--o-ui-white); --o-ui-text-alias-input-placeholder: var(--o-ui-neutral-4); - --o-ui-focus-ring-color-alias-default: rgba(31, 115, 183, .35); + --o-ui-focus-ring-color-alias-default: var(--hop-primary-border-focus); } .o-ui.o-ui-orbiter-dark { @@ -332,5 +332,5 @@ --o-ui-text-alias-success: var(--o-ui-success-5); --o-ui-text-alias-static-white: var(--o-ui-white); --o-ui-text-alias-input-placeholder: var(--o-ui-neutral-3); - --o-ui-focus-ring-color-alias-default: rgba(53, 144, 221, .35); + --o-ui-focus-ring-color-alias-default: var(--hop-primary-border-focus); } From 2b721cce24dc1c531be0713deb06a29fd9df841f Mon Sep 17 00:00:00 2001 From: Francis Thibault Date: Tue, 10 Oct 2023 14:25:03 -0400 Subject: [PATCH 2/5] added upsell variant / fix iconButton icon Size --- .../src/button/docs/Button.stories.mdx | 10 ++++++ packages/components/src/button/src/Button.css | 36 +++++++++++++++++++ .../components/src/button/src/IconButton.css | 25 +++++++++---- .../components/src/button/src/useButton.ts | 2 +- .../button/tests/chromatic/Button.chroma.jsx | 1 + .../tests/chromatic/ButtonAsLink.chroma.jsx | 2 ++ .../tests/chromatic/IconButton.chroma.jsx | 2 ++ .../chromatic/IconButtonAsLink.chroma.jsx | 2 ++ 8 files changed, 72 insertions(+), 8 deletions(-) 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 60f16646c..ddeafbfe7 100644 --- a/packages/components/src/button/src/Button.css +++ b/packages/components/src/button/src/Button.css @@ -138,6 +138,42 @@ a.o-ui-button { color: var(--hop-primary-text-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]):focus-visible, +.o-ui-button-upsell:not([disabled]).o-ui-button-focus { + background-color: var(--hop-upsell-surface-hover); +} + +/* UPSELL | ACTIVE */ +.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading):active, +.o-ui-button-upsell:not([disabled]).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); +} + +/* UPSELL | HOVER | ACTIVE */ +.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading):hover:active, +.o-ui-button-upsell:not([disabled]).o-ui-button-hover.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(--hop-neutral-border-strong); 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/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(