From 4083efda6230c1d8a5086a576839f8f5d30ecdfb Mon Sep 17 00:00:00 2001 From: Maximus Date: Fri, 12 Aug 2022 13:32:33 +0300 Subject: [PATCH 1/2] fixed #23 changed blue color variants --- src/index.css | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/index.css b/src/index.css index 34ea437..5364fa1 100644 --- a/src/index.css +++ b/src/index.css @@ -78,16 +78,16 @@ --color-serv-800: 9 11 16; --color-serv-900: 6 7 10; /* ---------------------------------- Blue ---------------------------------- */ - --color-blue-50: 240 247 254; - --color-blue-100: 221 237 254; - --color-blue-200: 182 216 252; - --color-blue-300: 137 192 250; - --color-blue-400: 74 158 247; - --color-blue-500: 9 109 217; - --color-blue-600: 8 99 196; - --color-blue-700: 7 87 171; - --color-blue-800: 6 69 137; - --color-blue-900: 4 49 98; + --color-blue-50: 230 247 255; + --color-blue-100: 186 231 255; + --color-blue-200: 145 213 255; + --color-blue-300: 89 192 255; + --color-blue-400: 64 169 255; + --color-blue-500: 24 144 255; + --color-blue-600: 9 109 217; + --color-blue-700: 0 80 179; + --color-blue-800: 0 58 140; + --color-blue-900: 0 39 102; /* ---------------------------------- Gray ---------------------------------- */ --color-gray-50: 250 250 250; --color-gray-75: 240 240 240; From a17af4002fd054749841d55f8bd2f53dabb030ce Mon Sep 17 00:00:00 2001 From: Maximus Date: Fri, 12 Aug 2022 17:00:15 +0300 Subject: [PATCH 2/2] closed issue #72 add ability to custom styles for button --- src/components/Button/Button.tsx | 31 ++++++++++++++++++++----------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index e5fd5fa..7928c33 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -22,6 +22,7 @@ type ButtonExtentions = { /* Component props */ /* -------------------------------------------------------------------------- */ type ButtonProps = { + defaultStyle?: boolean; emphasis?: StyleType | undefined; //Choose one of three variants of button. By default it will be "high" disabled?: boolean; } & Omit, "">; @@ -30,6 +31,7 @@ type ButtonProps = { /* Component implementation */ /* -------------------------------------------------------------------------- */ export const Button: React.FC & ButtonExtentions = ({ + defaultStyle = true, emphasis = "high", disabled = false, className, @@ -62,17 +64,24 @@ export const Button: React.FC & ButtonExtentions = ({ }, { // Define high emphasis - [`${btnEmphasis.EnableHigh}`]: !disabled && emphasis === "high", - [`${btnEmphasis.DisabledHigh}`]: disabled && emphasis === "high", - [`${btnEmphasis.GeneralHigh}`]: emphasis === "high", - // Dbtnefine medium emphasis - [`${btnEmphasis.EnabledMedium}`]: !disabled && emphasis === "medium", - [`${btnEmphasis.DisabledMedium}`]: disabled && emphasis === "medium", - [`${btnEmphasis.GeneralMedium}`]: emphasis === "medium", - // Dbtnefine low emphasis - [`${btnEmphasis.EnabledLow}`]: !disabled && emphasis === "low", - [`${btnEmphasis.DisabledLow}`]: disabled && emphasis === "low", - [`${btnEmphasis.GenerealLow}`]: emphasis === "low", + [`${btnEmphasis.EnableHigh}`]: + defaultStyle && !disabled && emphasis === "high", + [`${btnEmphasis.DisabledHigh}`]: + defaultStyle && disabled && emphasis === "high", + [`${btnEmphasis.GeneralHigh}`]: defaultStyle && emphasis === "high", + // Define medium emphasis + [`${btnEmphasis.EnabledMedium}`]: + defaultStyle && !disabled && emphasis === "medium", + [`${btnEmphasis.DisabledMedium}`]: + defaultStyle && disabled && emphasis === "medium", + [`${btnEmphasis.GeneralMedium}`]: + defaultStyle && emphasis === "medium", + // Define low emphasis + [`${btnEmphasis.EnabledLow}`]: + defaultStyle && !disabled && emphasis === "low", + [`${btnEmphasis.DisabledLow}`]: + defaultStyle && disabled && emphasis === "low", + [`${btnEmphasis.GenerealLow}`]: defaultStyle && emphasis === "low", }, className, ])}