From aed82effe7a443c5f4f834d6d392f99057ca1f37 Mon Sep 17 00:00:00 2001 From: Jason Basuil Date: Mon, 27 Nov 2023 09:42:18 -0800 Subject: [PATCH 1/5] import synthesis-palette into colors.scss --- scss/colors.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/scss/colors.scss b/scss/colors.scss index dc6a69f4..1e0f86d2 100644 --- a/scss/colors.scss +++ b/scss/colors.scss @@ -2,3 +2,4 @@ @import './colors/inputs'; @import './colors/mod_rainbow'; @import './colors/palette'; +@import './colors/synthesis-palette'; From 7244f3640f11ed1e0db3da8660e19905d94374b4 Mon Sep 17 00:00:00 2001 From: Jason Basuil Date: Mon, 27 Nov 2023 10:20:13 -0800 Subject: [PATCH 2/5] add synthesis btn-primary and btn-outline-primary --- scss/buttons.scss | 75 ++++++++++++++++++++++++++++++ scss/colors/synthesis-palette.scss | 1 + src/Button/Button.scss | 12 +++++ 3 files changed, 88 insertions(+) diff --git a/scss/buttons.scss b/scss/buttons.scss index 0b739e24..fb641452 100644 --- a/scss/buttons.scss +++ b/scss/buttons.scss @@ -18,6 +18,8 @@ } } +$synthesis-primary: $synth-primary-cta-blue; + $primary: $ux-emerald-600; $danger: $ux-red; $warning: $ux-yellow-400; @@ -74,6 +76,42 @@ $warning: $ux-yellow-400; } } +@mixin synthesis-btn-primary { + $btn-primary-background: $synthesis-primary; + $btn-primary-border: $synthesis-primary; + $btn-primary-color: $ux-white; + + $btn-primary-hover-background: $synth-dark-background-selected-blue; + $btn-primary-hover-border: $synth-dark-background-selected-blue; + $btn-primary-hover-color: $ux-white; + + $btn-primary-active-background: $synth-dark-background-pressed-blue; + $btn-primary-active-border: $synth-dark-background-pressed-blue; + $btn-primary-active-color: $ux-white; + + @include button-variant( + $btn-primary-background, + $btn-primary-border, + $btn-primary-color, + + $btn-primary-hover-background, + $btn-primary-hover-border, + $btn-primary-hover-color, + + $btn-primary-active-background, + $btn-primary-active-border, + $btn-primary-active-color, + ); + + &:focus-visible { + @include btn-focus-outline; + } + + &:active, &:focus { + @include btn-remove-bootstrap-focus-outline; + } +} + @mixin btn-outline-primary { $btn-outline-primary-color: $primary; $btn-outline-primary-color-hover: $ux-white; @@ -111,6 +149,43 @@ $warning: $ux-yellow-400; } } +@mixin synthesis-btn-outline-primary { + $btn-outline-primary-color: $synthesis-primary; + $btn-outline-primary-color-hover: $ux-white; + + $btn-outline-primary-hover-background: $synth-dark-background-selected-blue; + $btn-outline-primary-hover-border: $synth-dark-background-selected-blue; + $btn-outline-primary-hover-color: $ux-white; + + $btn-outline-primary-border: $synthesis-primary; + + $btn-outline-primary-active-background: $synth-dark-background-pressed-blue; + $btn-outline-primary-active-border-color: $synth-dark-background-pressed-blue; + + @include button-outline-variant( + $btn-outline-primary-color, + $btn-outline-primary-color-hover, + + $btn-outline-primary-hover-background, + $btn-outline-primary-hover-border, + $btn-outline-primary-hover-color, + ); + border-color: $btn-outline-primary-border; + + &:active { + background-color: $btn-outline-primary-active-background; + border-color: $btn-outline-primary-active-border-color; + } + + &:focus-visible { + @include btn-focus-outline; + } + + &:active, &:focus { + @include btn-remove-bootstrap-focus-outline; + } +} + @mixin btn-danger { $btn-danger-background: $danger; $btn-danger-border: $danger; diff --git a/scss/colors/synthesis-palette.scss b/scss/colors/synthesis-palette.scss index 4db5b2ab..4ccc3b6d 100644 --- a/scss/colors/synthesis-palette.scss +++ b/scss/colors/synthesis-palette.scss @@ -23,6 +23,7 @@ $synth-unselected-neutral: #5b5b5b; // main schema - visual hierarchy $synth-accent-green: #158d71; $synth-dark-background-selected-blue: #162c4e; +$synth-dark-background-pressed-blue: #010812; $synth-hover-state: #eef9f6; $synth-indicator-stroke-green: #91cabb; $synth-navbar-blue: #010812; diff --git a/src/Button/Button.scss b/src/Button/Button.scss index 41bc9185..776edd38 100644 --- a/src/Button/Button.scss +++ b/src/Button/Button.scss @@ -1,5 +1,17 @@ @import '../../scss/theme'; +.Synthesized { + .Button { + &.btn-primary { + @include synthesis-btn-primary; + } + + &.btn-outline-primary { + @include synthesis-btn-outline-primary; + } + } +} + .Button { @include synth-font-type-30--bold; From f7bff7665665a2c651a5ad4dc8471004cf5008fa Mon Sep 17 00:00:00 2001 From: Jason Basuil Date: Mon, 27 Nov 2023 10:37:10 -0800 Subject: [PATCH 3/5] use primary button in Modal stories for warning and danger variants --- src/Modal/Modal.stories.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Modal/Modal.stories.jsx b/src/Modal/Modal.stories.jsx index b948618d..613a34e8 100644 --- a/src/Modal/Modal.stories.jsx +++ b/src/Modal/Modal.stories.jsx @@ -166,7 +166,7 @@ export const WarningModal = () => ( dismissButtonText="Cancel" onRequestClose={handleRequestClose} > - + ); @@ -191,7 +191,7 @@ export const DangerModal = () => ( dismissButtonText="Cancel" onRequestClose={handleRequestClose} > - + ); From 8bcb39bf4a13161863546a57654069613f982b00 Mon Sep 17 00:00:00 2001 From: Jason Basuil Date: Mon, 27 Nov 2023 11:01:32 -0800 Subject: [PATCH 4/5] add Synthesized DropdownToggle --- src/Dropdown/DropdownToggle.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/Dropdown/DropdownToggle.scss b/src/Dropdown/DropdownToggle.scss index ec5de245..9acca050 100644 --- a/src/Dropdown/DropdownToggle.scss +++ b/src/Dropdown/DropdownToggle.scss @@ -4,6 +4,18 @@ $primary: $ux-emerald-600; $danger: $ux-red; $warning: $ux-yellow-400; +.Synthesized { + .DropdownToggle { + &.btn-primary { + @include synthesis-btn-primary; + } + + &.btn-outline-primary { + @include synthesis-btn-outline-primary; + } + } +} + .DropdownToggle { @include synth-font-type-30--bold; From e0775fdbbe2ef440e0c2b85bee05c80b6e593c8d Mon Sep 17 00:00:00 2001 From: Jason Basuil Date: Mon, 27 Nov 2023 11:07:30 -0800 Subject: [PATCH 5/5] snapshots --- spec/__snapshots__/Storyshots.test.js.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/spec/__snapshots__/Storyshots.test.js.snap b/spec/__snapshots__/Storyshots.test.js.snap index ccc08235..a6de1057 100644 --- a/spec/__snapshots__/Storyshots.test.js.snap +++ b/spec/__snapshots__/Storyshots.test.js.snap @@ -9880,7 +9880,7 @@ exports[`Storyshots Components/Modal Danger Modal 1`] = ` Cancel