feat(button): new component specs #821

badejayayesubabu · 2021-01-08T10:23:31Z

Description

<hx-button> : Implementing color palette styles

What are the relevant story cards/tickets? Any additional PRs or other references?

Jira: SURF-2152

Before you request a review for this PR:

For UI changes, did you manually test in recent versions of modern browsers (Chrome, Firefox, and Safari)?
For UI changes, did you manually test in IE11 and legacy Edge?
Did you add component tests for any new code?
Did you run the component unit tests via yarn test to ensure all tests passed?
Did you include a screenshot of the component tests?
If you changed/added functionality, did you update the demo page and documentation?
If needed, did you add or modify the demo test page to test the changed/added functionality?
Did you assign reviewers?
In Jira, have you linked to this PR on the ticket(s)?

netlify · 2021-01-08T10:23:35Z

Deploy preview for helix-ui ready!

Built with commit 368013d

https://deploy-preview-821--helix-ui.netlify.app

src/scss/components/button/mixins/_hxButton.scss

100stacks · 2021-01-11T22:41:16Z

src/scss/components/button/mixins/_hxButton.scss

@@ -107,15 +107,15 @@
 }

 @mixin hxButton-active--primary {
-  background-color: $cyan-700;
+  background-color: $cyan-900;


Please update to the new v2.0 color variables:

helix-ui/src/scss/_vars.scss

Lines 1 to 118 in eb547a4

// ============================= //

// ===== COLOR PALETTE 2.0 ===== //

// ============================= //

// ========================== //

// ===== PRIMARY COLORS ===== //

// ========================== //

// Blue - Primary

$blue-100: #e5f2fb;

$blue-300: #6ca3e1;

$blue-500: #367ed4;

$blue-700: #0051b7;

$blue-900: #003482;

// Purple - Primary

$purple-100: #f9e4f8;

$purple-300: #ad3da5;

$purple-500: #95098a;

$purple-700: #7d0572;

$purple-900: #64005a;

// Teal - Primary

$teal-100: #9defeb;

$teal-300: #34cecc;

$teal-500: #00bebc;

$teal-700: #00aab0;

$teal-900: #006e8d;

// ====================== //

// ===== GRAY SCALE ===== //

// ====================== //

$gray-0: #ffffff;

$gray-25: #fafafa;

$gray-50: #f5f5f5;

$gray-100: #eeeeee;

$gray-200: #e7e7e7;

$gray-300: #e0e0e0;

$gray-400: #d8d8d8;

$gray-500: #bdbdbd;

$gray-600: #9e9e9e;

$gray-700: #757575;

$gray-750: #6b6b6b;

$gray-800: #616161;

$gray-900: #424242;

$gray-950: #333333;

$gray-975: #212121;

$gray-1000: #000000;

// ========================= //

// ===== STATUS COLORS ===== //

// ========================= //

// Blue - Status

$blue-status-100: #e6eefd;

$blue-status-500: #296cdc;

$blue-status-900: #0b377f;

// Green - Status

$green-status-100: #f5fef9;

$green-status-500: #008b38;

$green-status-900: #00461c;

// 1.0 vars with 2.0 color palette values

$green-100: #f5fef9;

$green-500: #008b38;

$green-900: #00461c;

// Yellow - Status

$yellow-status-100: #ffe7b3;

$yellow-status-500: #ffc749;

$yellow-status-900: #b37c00;

// 1.0 vars with 2.0 color palette values

$yellow-100: #ffe7b3;

$yellow-500: #ffc749;

$yellow-900: #b37c00;

// Red - Status

$red-status-100: #fddcdc;

$red-status-500: #d6251f;

$red-status-900: #760300;

// 1.0 vars with 2.0 color palette values

$red-100: #fddcdc;

$red-500: #d6251f;

$red-900: #760300;

// ========================== //

// ===== ACCENT COLORS ===== //

// ========================== //

// Orange - Accent

$orange-accent-100: #ffe9cc;

$orange-accent-500: #fa9000;

$orange-accent-900: #ce7700;

// 1.0 vars with 2.0 color palette values

$orange-100: #ffe9cc;

$orange-500: #fa9000;

$orange-700: #dd6105; // 1.0 color var

$orange-900: #ce7700;

// Pink - Accent

$pink-accent-100: #fceff4;

$pink-accent-500: #db2b75;

$pink-accent-900: #960e48;

// Purple - Accent

$purple-accent-100: #f9e4f8;

$purple-accent-500: #95098a;

$purple-accent-900: #64005a;

// Cyan - Accent

$cyan-accent-100: #f6fafc;

$cyan-accent-500: #437d9a;

$cyan-accent-900: #1c3948;

Changes have been done, Please review

100stacks · 2021-01-11T22:41:30Z

src/scss/components/button/mixins/_hxButton.scss

@@ -124,7 +124,7 @@
 }

 @mixin hxButton-hover--primary {
-  background-color: $cyan-500;
+  background-color: $cyan-700;


Please update to the new v2.0 color variables:

helix-ui/src/scss/_vars.scss

Lines 1 to 118 in eb547a4

// ============================= //

// ===== COLOR PALETTE 2.0 ===== //

// ============================= //

// ========================== //

// ===== PRIMARY COLORS ===== //

// ========================== //

// Blue - Primary

$blue-100: #e5f2fb;

$blue-300: #6ca3e1;

$blue-500: #367ed4;

$blue-700: #0051b7;

$blue-900: #003482;

// Purple - Primary

$purple-100: #f9e4f8;

$purple-300: #ad3da5;

$purple-500: #95098a;

$purple-700: #7d0572;

$purple-900: #64005a;

// Teal - Primary

$teal-100: #9defeb;

$teal-300: #34cecc;

$teal-500: #00bebc;

$teal-700: #00aab0;

$teal-900: #006e8d;

// ====================== //

// ===== GRAY SCALE ===== //

// ====================== //

$gray-0: #ffffff;

$gray-25: #fafafa;

$gray-50: #f5f5f5;

$gray-100: #eeeeee;

$gray-200: #e7e7e7;

$gray-300: #e0e0e0;

$gray-400: #d8d8d8;

$gray-500: #bdbdbd;

$gray-600: #9e9e9e;

$gray-700: #757575;

$gray-750: #6b6b6b;

$gray-800: #616161;

$gray-900: #424242;

$gray-950: #333333;

$gray-975: #212121;

$gray-1000: #000000;

// ========================= //

// ===== STATUS COLORS ===== //

// ========================= //

// Blue - Status

$blue-status-100: #e6eefd;

$blue-status-500: #296cdc;

$blue-status-900: #0b377f;

// Green - Status

$green-status-100: #f5fef9;

$green-status-500: #008b38;

$green-status-900: #00461c;

// 1.0 vars with 2.0 color palette values

$green-100: #f5fef9;

$green-500: #008b38;

$green-900: #00461c;

// Yellow - Status

$yellow-status-100: #ffe7b3;

$yellow-status-500: #ffc749;

$yellow-status-900: #b37c00;

// 1.0 vars with 2.0 color palette values

$yellow-100: #ffe7b3;

$yellow-500: #ffc749;

$yellow-900: #b37c00;

// Red - Status

$red-status-100: #fddcdc;

$red-status-500: #d6251f;

$red-status-900: #760300;

// 1.0 vars with 2.0 color palette values

$red-100: #fddcdc;

$red-500: #d6251f;

$red-900: #760300;

// ========================== //

// ===== ACCENT COLORS ===== //

// ========================== //

// Orange - Accent

$orange-accent-100: #ffe9cc;

$orange-accent-500: #fa9000;

$orange-accent-900: #ce7700;

// 1.0 vars with 2.0 color palette values

$orange-100: #ffe9cc;

$orange-500: #fa9000;

$orange-700: #dd6105; // 1.0 color var

$orange-900: #ce7700;

// Pink - Accent

$pink-accent-100: #fceff4;

$pink-accent-500: #db2b75;

$pink-accent-900: #960e48;

// Purple - Accent

$purple-accent-100: #f9e4f8;

$purple-accent-500: #95098a;

$purple-accent-900: #64005a;

// Cyan - Accent

$cyan-accent-100: #f6fafc;

$cyan-accent-500: #437d9a;

$cyan-accent-900: #1c3948;

Changes have been done, Please review

100stacks · 2021-01-11T22:41:37Z

src/scss/components/button/mixins/_hxButton.scss

@@ -155,23 +155,23 @@
 }

 @mixin hxButton-active--secondary {
-  background-color: $cyan-700;
+  background-color: $cyan-900;


Please update to the new v2.0 color variables:

helix-ui/src/scss/_vars.scss

Lines 1 to 118 in eb547a4

// ============================= //

// ===== COLOR PALETTE 2.0 ===== //

// ============================= //

// ========================== //

// ===== PRIMARY COLORS ===== //

// ========================== //

// Blue - Primary

$blue-100: #e5f2fb;

$blue-300: #6ca3e1;

$blue-500: #367ed4;

$blue-700: #0051b7;

$blue-900: #003482;

// Purple - Primary

$purple-100: #f9e4f8;

$purple-300: #ad3da5;

$purple-500: #95098a;

$purple-700: #7d0572;

$purple-900: #64005a;

// Teal - Primary

$teal-100: #9defeb;

$teal-300: #34cecc;

$teal-500: #00bebc;

$teal-700: #00aab0;

$teal-900: #006e8d;

// ====================== //

// ===== GRAY SCALE ===== //

// ====================== //

$gray-0: #ffffff;

$gray-25: #fafafa;

$gray-50: #f5f5f5;

$gray-100: #eeeeee;

$gray-200: #e7e7e7;

$gray-300: #e0e0e0;

$gray-400: #d8d8d8;

$gray-500: #bdbdbd;

$gray-600: #9e9e9e;

$gray-700: #757575;

$gray-750: #6b6b6b;

$gray-800: #616161;

$gray-900: #424242;

$gray-950: #333333;

$gray-975: #212121;

$gray-1000: #000000;

// ========================= //

// ===== STATUS COLORS ===== //

// ========================= //

// Blue - Status

$blue-status-100: #e6eefd;

$blue-status-500: #296cdc;

$blue-status-900: #0b377f;

// Green - Status

$green-status-100: #f5fef9;

$green-status-500: #008b38;

$green-status-900: #00461c;

// 1.0 vars with 2.0 color palette values

$green-100: #f5fef9;

$green-500: #008b38;

$green-900: #00461c;

// Yellow - Status

$yellow-status-100: #ffe7b3;

$yellow-status-500: #ffc749;

$yellow-status-900: #b37c00;

// 1.0 vars with 2.0 color palette values

$yellow-100: #ffe7b3;

$yellow-500: #ffc749;

$yellow-900: #b37c00;

// Red - Status

$red-status-100: #fddcdc;

$red-status-500: #d6251f;

$red-status-900: #760300;

// 1.0 vars with 2.0 color palette values

$red-100: #fddcdc;

$red-500: #d6251f;

$red-900: #760300;

// ========================== //

// ===== ACCENT COLORS ===== //

// ========================== //

// Orange - Accent

$orange-accent-100: #ffe9cc;

$orange-accent-500: #fa9000;

$orange-accent-900: #ce7700;

// 1.0 vars with 2.0 color palette values

$orange-100: #ffe9cc;

$orange-500: #fa9000;

$orange-700: #dd6105; // 1.0 color var

$orange-900: #ce7700;

// Pink - Accent

$pink-accent-100: #fceff4;

$pink-accent-500: #db2b75;

$pink-accent-900: #960e48;

// Purple - Accent

$purple-accent-100: #f9e4f8;

$purple-accent-500: #95098a;

$purple-accent-900: #64005a;

// Cyan - Accent

$cyan-accent-100: #f6fafc;

$cyan-accent-500: #437d9a;

$cyan-accent-900: #1c3948;

Changes have been done, Please review

100stacks · 2021-01-11T22:41:46Z

src/scss/components/button/mixins/_hxButton.scss

 }

 @mixin hxButton-focus--secondary {
  box-shadow: $focus-glow;
 }

 @mixin hxButton-hover--secondary {
-  background-color: $cyan-500;
+  background-color: $cyan-700;


Please update to the new v2.0 color variables:

helix-ui/src/scss/_vars.scss

Lines 1 to 118 in eb547a4

// ============================= //

// ===== COLOR PALETTE 2.0 ===== //

// ============================= //

// ========================== //

// ===== PRIMARY COLORS ===== //

// ========================== //

// Blue - Primary

$blue-100: #e5f2fb;

$blue-300: #6ca3e1;

$blue-500: #367ed4;

$blue-700: #0051b7;

$blue-900: #003482;

// Purple - Primary

$purple-100: #f9e4f8;

$purple-300: #ad3da5;

$purple-500: #95098a;

$purple-700: #7d0572;

$purple-900: #64005a;

// Teal - Primary

$teal-100: #9defeb;

$teal-300: #34cecc;

$teal-500: #00bebc;

$teal-700: #00aab0;

$teal-900: #006e8d;

// ====================== //

// ===== GRAY SCALE ===== //

// ====================== //

$gray-0: #ffffff;

$gray-25: #fafafa;

$gray-50: #f5f5f5;

$gray-100: #eeeeee;

$gray-200: #e7e7e7;

$gray-300: #e0e0e0;

$gray-400: #d8d8d8;

$gray-500: #bdbdbd;

$gray-600: #9e9e9e;

$gray-700: #757575;

$gray-750: #6b6b6b;

$gray-800: #616161;

$gray-900: #424242;

$gray-950: #333333;

$gray-975: #212121;

$gray-1000: #000000;

// ========================= //

// ===== STATUS COLORS ===== //

// ========================= //

// Blue - Status

$blue-status-100: #e6eefd;

$blue-status-500: #296cdc;

$blue-status-900: #0b377f;

// Green - Status

$green-status-100: #f5fef9;

$green-status-500: #008b38;

$green-status-900: #00461c;

// 1.0 vars with 2.0 color palette values

$green-100: #f5fef9;

$green-500: #008b38;

$green-900: #00461c;

// Yellow - Status

$yellow-status-100: #ffe7b3;

$yellow-status-500: #ffc749;

$yellow-status-900: #b37c00;

// 1.0 vars with 2.0 color palette values

$yellow-100: #ffe7b3;

$yellow-500: #ffc749;

$yellow-900: #b37c00;

// Red - Status

$red-status-100: #fddcdc;

$red-status-500: #d6251f;

$red-status-900: #760300;

// 1.0 vars with 2.0 color palette values

$red-100: #fddcdc;

$red-500: #d6251f;

$red-900: #760300;

// ========================== //

// ===== ACCENT COLORS ===== //

// ========================== //

// Orange - Accent

$orange-accent-100: #ffe9cc;

$orange-accent-500: #fa9000;

$orange-accent-900: #ce7700;

// 1.0 vars with 2.0 color palette values

$orange-100: #ffe9cc;

$orange-500: #fa9000;

$orange-700: #dd6105; // 1.0 color var

$orange-900: #ce7700;

// Pink - Accent

$pink-accent-100: #fceff4;

$pink-accent-500: #db2b75;

$pink-accent-900: #960e48;

// Purple - Accent

$purple-accent-100: #f9e4f8;

$purple-accent-500: #95098a;

$purple-accent-900: #64005a;

// Cyan - Accent

$cyan-accent-100: #f6fafc;

$cyan-accent-500: #437d9a;

$cyan-accent-900: #1c3948;

Changes have been done, Please review

100stacks · 2021-01-11T22:41:55Z

src/scss/components/button/mixins/_hxButton.scss

@@ -184,7 +184,7 @@
 @mixin hxButton--tertiary {
  background-color: transparent;
  border: 0;
-  color: $cyan-900;
+  color: $cyan-500;


Please update to the new v2.0 color variables:

helix-ui/src/scss/_vars.scss

Lines 1 to 118 in eb547a4

// ============================= //

// ===== COLOR PALETTE 2.0 ===== //

// ============================= //

// ========================== //

// ===== PRIMARY COLORS ===== //

// ========================== //

// Blue - Primary

$blue-100: #e5f2fb;

$blue-300: #6ca3e1;

$blue-500: #367ed4;

$blue-700: #0051b7;

$blue-900: #003482;

// Purple - Primary

$purple-100: #f9e4f8;

$purple-300: #ad3da5;

$purple-500: #95098a;

$purple-700: #7d0572;

$purple-900: #64005a;

// Teal - Primary

$teal-100: #9defeb;

$teal-300: #34cecc;

$teal-500: #00bebc;

$teal-700: #00aab0;

$teal-900: #006e8d;

// ====================== //

// ===== GRAY SCALE ===== //

// ====================== //

$gray-0: #ffffff;

$gray-25: #fafafa;

$gray-50: #f5f5f5;

$gray-100: #eeeeee;

$gray-200: #e7e7e7;

$gray-300: #e0e0e0;

$gray-400: #d8d8d8;

$gray-500: #bdbdbd;

$gray-600: #9e9e9e;

$gray-700: #757575;

$gray-750: #6b6b6b;

$gray-800: #616161;

$gray-900: #424242;

$gray-950: #333333;

$gray-975: #212121;

$gray-1000: #000000;

// ========================= //

// ===== STATUS COLORS ===== //

// ========================= //

// Blue - Status

$blue-status-100: #e6eefd;

$blue-status-500: #296cdc;

$blue-status-900: #0b377f;

// Green - Status

$green-status-100: #f5fef9;

$green-status-500: #008b38;

$green-status-900: #00461c;

// 1.0 vars with 2.0 color palette values

$green-100: #f5fef9;

$green-500: #008b38;

$green-900: #00461c;

// Yellow - Status

$yellow-status-100: #ffe7b3;

$yellow-status-500: #ffc749;

$yellow-status-900: #b37c00;

// 1.0 vars with 2.0 color palette values

$yellow-100: #ffe7b3;

$yellow-500: #ffc749;

$yellow-900: #b37c00;

// Red - Status

$red-status-100: #fddcdc;

$red-status-500: #d6251f;

$red-status-900: #760300;

// 1.0 vars with 2.0 color palette values

$red-100: #fddcdc;

$red-500: #d6251f;

$red-900: #760300;

// ========================== //

// ===== ACCENT COLORS ===== //

// ========================== //

// Orange - Accent

$orange-accent-100: #ffe9cc;

$orange-accent-500: #fa9000;

$orange-accent-900: #ce7700;

// 1.0 vars with 2.0 color palette values

$orange-100: #ffe9cc;

$orange-500: #fa9000;

$orange-700: #dd6105; // 1.0 color var

$orange-900: #ce7700;

// Pink - Accent

$pink-accent-100: #fceff4;

$pink-accent-500: #db2b75;

$pink-accent-900: #960e48;

// Purple - Accent

$purple-accent-100: #f9e4f8;

$purple-accent-500: #95098a;

$purple-accent-900: #64005a;

// Cyan - Accent

$cyan-accent-100: #f6fafc;

$cyan-accent-500: #437d9a;

$cyan-accent-900: #1c3948;

Changes have been done, Please review

100stacks · 2021-01-11T22:42:01Z

src/scss/components/button/mixins/_hxButton.scss

@@ -212,13 +212,13 @@
 @mixin hxButton-active--tertiary {
  background-color: transparent;
  border-color: transparent;
-  color: $cyan-700;
+  color: $cyan-900;


Please update to the new v2.0 color variables:

helix-ui/src/scss/_vars.scss

Lines 1 to 118 in eb547a4

// ============================= //

// ===== COLOR PALETTE 2.0 ===== //

// ============================= //

// ========================== //

// ===== PRIMARY COLORS ===== //

// ========================== //

// Blue - Primary

$blue-100: #e5f2fb;

$blue-300: #6ca3e1;

$blue-500: #367ed4;

$blue-700: #0051b7;

$blue-900: #003482;

// Purple - Primary

$purple-100: #f9e4f8;

$purple-300: #ad3da5;

$purple-500: #95098a;

$purple-700: #7d0572;

$purple-900: #64005a;

// Teal - Primary

$teal-100: #9defeb;

$teal-300: #34cecc;

$teal-500: #00bebc;

$teal-700: #00aab0;

$teal-900: #006e8d;

// ====================== //

// ===== GRAY SCALE ===== //

// ====================== //

$gray-0: #ffffff;

$gray-25: #fafafa;

$gray-50: #f5f5f5;

$gray-100: #eeeeee;

$gray-200: #e7e7e7;

$gray-300: #e0e0e0;

$gray-400: #d8d8d8;

$gray-500: #bdbdbd;

$gray-600: #9e9e9e;

$gray-700: #757575;

$gray-750: #6b6b6b;

$gray-800: #616161;

$gray-900: #424242;

$gray-950: #333333;

$gray-975: #212121;

$gray-1000: #000000;

// ========================= //

// ===== STATUS COLORS ===== //

// ========================= //

// Blue - Status

$blue-status-100: #e6eefd;

$blue-status-500: #296cdc;

$blue-status-900: #0b377f;

// Green - Status

$green-status-100: #f5fef9;

$green-status-500: #008b38;

$green-status-900: #00461c;

// 1.0 vars with 2.0 color palette values

$green-100: #f5fef9;

$green-500: #008b38;

$green-900: #00461c;

// Yellow - Status

$yellow-status-100: #ffe7b3;

$yellow-status-500: #ffc749;

$yellow-status-900: #b37c00;

// 1.0 vars with 2.0 color palette values

$yellow-100: #ffe7b3;

$yellow-500: #ffc749;

$yellow-900: #b37c00;

// Red - Status

$red-status-100: #fddcdc;

$red-status-500: #d6251f;

$red-status-900: #760300;

// 1.0 vars with 2.0 color palette values

$red-100: #fddcdc;

$red-500: #d6251f;

$red-900: #760300;

// ========================== //

// ===== ACCENT COLORS ===== //

// ========================== //

// Orange - Accent

$orange-accent-100: #ffe9cc;

$orange-accent-500: #fa9000;

$orange-accent-900: #ce7700;

// 1.0 vars with 2.0 color palette values

$orange-100: #ffe9cc;

$orange-500: #fa9000;

$orange-700: #dd6105; // 1.0 color var

$orange-900: #ce7700;

// Pink - Accent

$pink-accent-100: #fceff4;

$pink-accent-500: #db2b75;

$pink-accent-900: #960e48;

// Purple - Accent

$purple-accent-100: #f9e4f8;

$purple-accent-500: #95098a;

$purple-accent-900: #64005a;

// Cyan - Accent

$cyan-accent-100: #f6fafc;

$cyan-accent-500: #437d9a;

$cyan-accent-900: #1c3948;

Changes have been done, Please review

100stacks · 2021-01-11T22:42:08Z

src/scss/components/button/mixins/_hxButton.scss

@@ -228,5 +228,5 @@
 @mixin hxButton-hover--tertiary {
  background-color: transparent;
  border-color: transparent;
-  color: $cyan-500;
+  color: $cyan-700;


Please update to the new v2.0 color variables:

helix-ui/src/scss/_vars.scss

Lines 1 to 118 in eb547a4

// ============================= //

// ===== COLOR PALETTE 2.0 ===== //

// ============================= //

// ========================== //

// ===== PRIMARY COLORS ===== //

// ========================== //

// Blue - Primary

$blue-100: #e5f2fb;

$blue-300: #6ca3e1;

$blue-500: #367ed4;

$blue-700: #0051b7;

$blue-900: #003482;

// Purple - Primary

$purple-100: #f9e4f8;

$purple-300: #ad3da5;

$purple-500: #95098a;

$purple-700: #7d0572;

$purple-900: #64005a;

// Teal - Primary

$teal-100: #9defeb;

$teal-300: #34cecc;

$teal-500: #00bebc;

$teal-700: #00aab0;

$teal-900: #006e8d;

// ====================== //

// ===== GRAY SCALE ===== //

// ====================== //

$gray-0: #ffffff;

$gray-25: #fafafa;

$gray-50: #f5f5f5;

$gray-100: #eeeeee;

$gray-200: #e7e7e7;

$gray-300: #e0e0e0;

$gray-400: #d8d8d8;

$gray-500: #bdbdbd;

$gray-600: #9e9e9e;

$gray-700: #757575;

$gray-750: #6b6b6b;

$gray-800: #616161;

$gray-900: #424242;

$gray-950: #333333;

$gray-975: #212121;

$gray-1000: #000000;

// ========================= //

// ===== STATUS COLORS ===== //

// ========================= //

// Blue - Status

$blue-status-100: #e6eefd;

$blue-status-500: #296cdc;

$blue-status-900: #0b377f;

// Green - Status

$green-status-100: #f5fef9;

$green-status-500: #008b38;

$green-status-900: #00461c;

// 1.0 vars with 2.0 color palette values

$green-100: #f5fef9;

$green-500: #008b38;

$green-900: #00461c;

// Yellow - Status

$yellow-status-100: #ffe7b3;

$yellow-status-500: #ffc749;

$yellow-status-900: #b37c00;

// 1.0 vars with 2.0 color palette values

$yellow-100: #ffe7b3;

$yellow-500: #ffc749;

$yellow-900: #b37c00;

// Red - Status

$red-status-100: #fddcdc;

$red-status-500: #d6251f;

$red-status-900: #760300;

// 1.0 vars with 2.0 color palette values

$red-100: #fddcdc;

$red-500: #d6251f;

$red-900: #760300;

// ========================== //

// ===== ACCENT COLORS ===== //

// ========================== //

// Orange - Accent

$orange-accent-100: #ffe9cc;

$orange-accent-500: #fa9000;

$orange-accent-900: #ce7700;

// 1.0 vars with 2.0 color palette values

$orange-100: #ffe9cc;

$orange-500: #fa9000;

$orange-700: #dd6105; // 1.0 color var

$orange-900: #ce7700;

// Pink - Accent

$pink-accent-100: #fceff4;

$pink-accent-500: #db2b75;

$pink-accent-900: #960e48;

// Purple - Accent

$purple-accent-100: #f9e4f8;

$purple-accent-500: #95098a;

$purple-accent-900: #64005a;

// Cyan - Accent

$cyan-accent-100: #f6fafc;

$cyan-accent-500: #437d9a;

$cyan-accent-900: #1c3948;

Changes have been done, Please review

100stacks · 2021-01-11T22:43:32Z

src/scss/components/typography/_index.scss

+  font-size: 0.625rem;
  font-weight: 400;
-  line-height: 1.5rem;
+  line-height: 1;


We should make these changes specific to the Pill component.

Changes have been done, Please review

danielmdesigns

There is a darker blue border on the primary buttons. Please remove this border, there should be no border on primary buttons.

The secondary button should not have a fill on hover state. Should only be outlined. The color changes should be as follows:

Default: Blue-500
Hover: Blue-700
Pressed: Blue-900

100stacks · 2021-01-13T00:19:28Z

src/scss/components/pill/_index.scss

-  height: 1rem;
-  line-height: 1;


Please revert these changes. I'll add the patch to PR #822.

100stacks

@danielmdesigns, please review commit `368013d` updates to this PR #821:

https://deploy-preview-821--helix-ui.netlify.app/components/button

danielmdesigns

Buttons have been corrected and look good to me. Approved.

lalithkarikelli

DEV LGTM

100stacks

Dev LGTM

100stacks requested review from 100stacks, danielmdesigns and lalithkarikelli January 11, 2021 18:52

100stacks added the 🆕 New Component Specs Updated Component Specifications label Jan 11, 2021

100stacks added this to the HelixUI-v2.0.0 milestone Jan 11, 2021

100stacks requested changes Jan 11, 2021

View reviewed changes

100stacks added the PR: Comments Provided PR: Comments Provided label Jan 11, 2021

badejayayesubabu force-pushed the SURF-2152 branch 2 times, most recently from d0be969 to 768d354 Compare January 12, 2021 09:40

feat(button): new color palette specs

5bdaa8c

badejayayesubabu force-pushed the SURF-2152 branch from b076ce4 to 5bdaa8c Compare January 12, 2021 09:53

danielmdesigns suggested changes Jan 12, 2021

View reviewed changes

100stacks marked this pull request as ready for review January 12, 2021 22:03

100stacks added PR: Comments Provided PR: Comments Provided and removed PR: Comments Provided PR: Comments Provided labels Jan 12, 2021

100stacks requested changes Jan 13, 2021

View reviewed changes

feat(button): implement new component specs

368013d

100stacks removed the PR: Comments Provided PR: Comments Provided label Jan 14, 2021

100stacks reviewed Jan 14, 2021

View reviewed changes

danielmdesigns approved these changes Jan 15, 2021

View reviewed changes

lalithkarikelli approved these changes Jan 15, 2021

View reviewed changes

100stacks approved these changes Jan 15, 2021

View reviewed changes

100stacks changed the title ~~feat(button): new color palette specs~~ feat(button): new component specs Jan 15, 2021

100stacks merged commit 7fc23e4 into HelixDesignSystem:master Jan 15, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(button): new component specs #821

feat(button): new component specs #821

badejayayesubabu commented Jan 8, 2021 •

edited

Loading

netlify bot commented Jan 8, 2021 •

edited

Loading

100stacks Jan 11, 2021

badejayayesubabu Jan 12, 2021

100stacks Jan 11, 2021

badejayayesubabu Jan 12, 2021

100stacks Jan 11, 2021

badejayayesubabu Jan 12, 2021

100stacks Jan 11, 2021

badejayayesubabu Jan 12, 2021

100stacks Jan 11, 2021

badejayayesubabu Jan 12, 2021

100stacks Jan 11, 2021

badejayayesubabu Jan 12, 2021

100stacks Jan 11, 2021

badejayayesubabu Jan 12, 2021

100stacks Jan 11, 2021

badejayayesubabu Jan 12, 2021

danielmdesigns left a comment

100stacks Jan 13, 2021

100stacks left a comment

danielmdesigns left a comment

lalithkarikelli left a comment

100stacks left a comment

	// ============================= //
	// ===== COLOR PALETTE 2.0 ===== //
	// ============================= //

	// ========================== //
	// ===== PRIMARY COLORS ===== //
	// ========================== //

	// Blue - Primary
	$blue-100: #e5f2fb;
	$blue-300: #6ca3e1;
	$blue-500: #367ed4;
	$blue-700: #0051b7;
	$blue-900: #003482;

	// Purple - Primary
	$purple-100: #f9e4f8;
	$purple-300: #ad3da5;
	$purple-500: #95098a;
	$purple-700: #7d0572;
	$purple-900: #64005a;

	// Teal - Primary
	$teal-100: #9defeb;
	$teal-300: #34cecc;
	$teal-500: #00bebc;
	$teal-700: #00aab0;
	$teal-900: #006e8d;

	// ====================== //
	// ===== GRAY SCALE ===== //
	// ====================== //
	$gray-0: #ffffff;
	$gray-25: #fafafa;
	$gray-50: #f5f5f5;
	$gray-100: #eeeeee;
	$gray-200: #e7e7e7;
	$gray-300: #e0e0e0;
	$gray-400: #d8d8d8;
	$gray-500: #bdbdbd;
	$gray-600: #9e9e9e;
	$gray-700: #757575;
	$gray-750: #6b6b6b;
	$gray-800: #616161;
	$gray-900: #424242;
	$gray-950: #333333;
	$gray-975: #212121;
	$gray-1000: #000000;

	// ========================= //
	// ===== STATUS COLORS ===== //
	// ========================= //

	// Blue - Status
	$blue-status-100: #e6eefd;
	$blue-status-500: #296cdc;
	$blue-status-900: #0b377f;

	// Green - Status
	$green-status-100: #f5fef9;
	$green-status-500: #008b38;
	$green-status-900: #00461c;

	// 1.0 vars with 2.0 color palette values
	$green-100: #f5fef9;
	$green-500: #008b38;
	$green-900: #00461c;

	// Yellow - Status
	$yellow-status-100: #ffe7b3;
	$yellow-status-500: #ffc749;
	$yellow-status-900: #b37c00;

	// 1.0 vars with 2.0 color palette values
	$yellow-100: #ffe7b3;
	$yellow-500: #ffc749;
	$yellow-900: #b37c00;

	// Red - Status
	$red-status-100: #fddcdc;
	$red-status-500: #d6251f;
	$red-status-900: #760300;

	// 1.0 vars with 2.0 color palette values
	$red-100: #fddcdc;
	$red-500: #d6251f;
	$red-900: #760300;


	// ========================== //
	// ===== ACCENT COLORS ===== //
	// ========================== //

	// Orange - Accent
	$orange-accent-100: #ffe9cc;
	$orange-accent-500: #fa9000;
	$orange-accent-900: #ce7700;

	// 1.0 vars with 2.0 color palette values
	$orange-100: #ffe9cc;
	$orange-500: #fa9000;
	$orange-700: #dd6105; // 1.0 color var
	$orange-900: #ce7700;

	// Pink - Accent
	$pink-accent-100: #fceff4;
	$pink-accent-500: #db2b75;
	$pink-accent-900: #960e48;

	// Purple - Accent
	$purple-accent-100: #f9e4f8;
	$purple-accent-500: #95098a;
	$purple-accent-900: #64005a;

	// Cyan - Accent
	$cyan-accent-100: #f6fafc;
	$cyan-accent-500: #437d9a;
	$cyan-accent-900: #1c3948;

feat(button): new component specs #821

feat(button): new component specs #821

Conversation

badejayayesubabu commented Jan 8, 2021 • edited Loading

Description

What are the relevant story cards/tickets? Any additional PRs or other references?

Before you request a review for this PR:

netlify bot commented Jan 8, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

danielmdesigns left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Please revert these changes. I'll add the patch to PR #822.

100stacks left a comment

Choose a reason for hiding this comment

@danielmdesigns, please review commit 368013d updates to this PR #821:

danielmdesigns left a comment

Choose a reason for hiding this comment

lalithkarikelli left a comment

Choose a reason for hiding this comment

100stacks left a comment

Choose a reason for hiding this comment

badejayayesubabu commented Jan 8, 2021 •

edited

Loading

netlify bot commented Jan 8, 2021 •

edited

Loading

@danielmdesigns, please review commit `368013d` updates to this PR #821: