Add primary button modifier (#2140)

Author: tylersticka

.changeset/clean-peas-suffer.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Added a new `primary` modifier for buttons when particular visual emphasis is desired.

src/components/button/button.scss

@@ -4,6 +4,14 @@
   @include button.default;
 }
 
+/**
+ * Modifier: Primary
+ */
+
+.c-button--primary {
+  @include button.primary;
+}
+
 /**
  * Modifier: Secondary
  */

src/components/button/button.stories.mdx

@@ -81,7 +81,7 @@ The `c-button` class may be applied to button and link elements. The button appe
 
 ## Styles
 
-Some buttons may not require as much emphasis as others. The `c-button--secondary` and `c-button--tertiary` modifiers reflect lesser importance with reduced contrast.
+The `c-button--primary` modifier may be used when a single call to action requires unique emphasis. The `c-button--secondary` and `c-button--tertiary` modifiers reflect lesser importance with reduced contrast.
 
 <Canvas>
   <Story

src/components/button/demo/styles.twig

@@ -1,5 +1,6 @@
 {% embed '@cloudfour/objects/button-group/button-group.twig' %}
   {% block content %}
+    {% include '@cloudfour/components/button/button.twig' with { label: 'Primary', class: 'c-button--primary' } %}
     {% include '@cloudfour/components/button/button.twig' with { label: 'Default' } %}
     {% include '@cloudfour/components/button/button.twig' with { label: 'Secondary', class: 'c-button--secondary' } %}
     {% include '@cloudfour/components/button/button.twig' with { label: 'Tertiary', class: 'c-button--tertiary' } %}

src/mixins/_button.scss

@@ -16,18 +16,26 @@
 
 @include theme.props {
   --theme-color-background-button-default: #{color.$brand-primary};
-  --theme-color-background-button-secondary: transparent;
+  --theme-color-background-button-primary: #{color.$base-purple};
+  --theme-color-background-button-secondary: var(--theme-color-background-base);
   --theme-color-border-button-default: #{color.$brand-primary-dark};
+  --theme-color-border-button-primary: #{color.$base-purple-dark};
   --theme-color-border-button-secondary: #{color.$brand-primary-light};
+  --theme-color-text-button-default: #{color.$text-light-emphasis};
+  --theme-color-text-button-primary: #{color.$text-light-emphasis};
   --theme-color-text-button-secondary: var(--theme-color-text-action);
   --theme-color-text-button-tertiary: var(--theme-color-text-action);
 }
 
 @include theme.props(dark) {
   --theme-color-background-button-default: #{color.$brand-primary-dark};
-  --theme-color-background-button-secondary: transparent;
+  --theme-color-background-button-primary: #{color.$base-white};
+  --theme-color-background-button-secondary: var(--theme-color-background-base);
   --theme-color-border-button-default: #{color.$brand-primary-darker};
-  --theme-color-border-button-secondary: #{color.$brand-primary-dark};
+  --theme-color-border-button-primary: #{color.$brand-primary-darker};
+  --theme-color-border-button-secondary: #{color.$brand-primary-darker};
+  --theme-color-text-button-default: #{color.$text-light-emphasis};
+  --theme-color-text-button-primary: #{color.$brand-primary};
   --theme-color-text-button-secondary: var(--theme-color-text-action);
   --theme-color-text-button-tertiary: var(--theme-color-text-action);
 }
@@ -57,6 +65,7 @@
   border-style: solid;
   border-width: size.$edge-control;
   color: color.$text-light-emphasis;
+  color: var(--theme-color-text-button-default);
   cursor: pointer; /* 2 */
   display: inline-flex;
   font: inherit; /* 3 */
@@ -143,6 +152,16 @@
   }
 }
 
+/**
+ * Modifier: Primary
+ */
+
+@mixin primary {
+  background-color: var(--theme-color-background-button-primary);
+  border-color: var(--theme-color-border-button-primary);
+  color: var(--theme-color-text-button-primary);
+}
+
 /**
  * Modifier: Secondary
  */