Merge pull request #123 from eecs485staff/callouts/neutral-default

[Callouts] Add neutral variant
eecs485staff · Apr 27, 2021 · f74e0d7 · f74e0d7
2 parents c0b107b + 0b9b546
commit f74e0d7
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 13 deletions.
diff --git a/_sass/spec/base.scss b/_sass/spec/base.scss
@@ -499,6 +499,12 @@ li.task-list-item .task-list-item-checkbox {
  */
 
 $CALLOUT_VARIANTS: (
+  'neutral': (
+    'bg': #f6f8fa,
+    'border': #e1e4e8,
+    'color': inherit,
+    'icon': '',
+  ),
   'info': (
     'bg': #dbedff,
     'border': rgba(4, 66, 137, 0.2),
@@ -529,27 +535,37 @@ $CALLOUT_VARIANTS: (
   ),
 );
 
+@mixin calloutVariantProps($variant, $props) {
+  background-color: var(
+    --primer-spec-callout-#{$variant}-bg-color,
+    map-get($props, 'bg')
+  );
+  border-color: var(
+    --primer-spec-callout-#{$variant}-border-color,
+    map-get($props, 'border')
+  );
+  color: var(
+    --primer-spec-callout-#{$variant}-text-color,
+    map-get($props, 'color')
+  );
+}
+
 .primer-spec-callout {
   position: relative;
   padding: 20px 16px;
   border-style: solid;
   border-width: 1px;
   border-radius: 6px;
 
+  // By default, use the neutral callout styles
+  @include calloutVariantProps(
+    'neutral',
+    map-get($CALLOUT_VARIANTS, 'neutral')
+  );
+
   @each $variant, $props in $CALLOUT_VARIANTS {
     &.#{$variant} {
-      background-color: var(
-        --primer-spec-callout-#{$variant}-bg-color,
-        map-get($props, 'bg')
-      );
-      border-color: var(
-        --primer-spec-callout-#{$variant}-border-color,
-        map-get($props, 'border')
-      );
-      color: var(
-        --primer-spec-callout-#{$variant}-text-color,
-        map-get($props, 'color')
-      );
+      @include calloutVariantProps($variant, $props);
     }
   }
 }

diff --git a/demo/callouts.md b/demo/callouts.md
@@ -34,15 +34,32 @@ int main() {
 </div>
 ```
 
-Primer Spec offers four variants of callouts:
+Primer Spec offers five variants of callouts:
 
+- `neutral`
 - `info`
 - `warning`
 - `danger`
 - `sucess`
 
 See below for examples of each of these callouts.
 
+### `neutral`
+
+<div class="primer-spec-callout" markdown="1">
+_**Pro tip:** Use this to create a simple note box. It's weaker than `info`, but offers stronger emphasis than main body text._
+</div>
+
+<details markdown="1">
+  <summary><code>neutral</code> source</summary>
+
+  ```markdown
+<div class="primer-spec-callout" markdown="1">
+  _**Pro tip:** Use this to create a simple note box. It's weaker than `info`, but offers stronger emphasis than main body text._
+</div>
+  ```
+</details>
+
 ### `info`
 
 <div class="primer-spec-callout info" markdown="1">

diff --git a/src_js/subthemes/Subtheme.ts b/src_js/subthemes/Subtheme.ts
@@ -44,6 +44,9 @@ export const SUBTHEME_VARS = [
   '--main-blockquote-text-border',
   '--main-header-border-bottom-color',
 
+  '--primer-spec-callout-neutral-bg-color',
+  '--primer-spec-callout-neutral-text-color',
+  '--primer-spec-callout-neutral-border-color',
   '--primer-spec-callout-info-bg-color',
   '--primer-spec-callout-info-text-color',
   '--primer-spec-callout-info-border-color',

diff --git a/src_js/subthemes/definitions/common_dark_theme_colors.ts b/src_js/subthemes/definitions/common_dark_theme_colors.ts
@@ -19,6 +19,9 @@ export default {
   '--main-blockquote-text-border': '#3b434b',
   '--main-header-border-bottom-color': BORDER_LINE_COLOR,
 
+  '--primer-spec-callout-neutral-bg-color': 'rgba(22, 27, 34, 0.8)',
+  '--primer-spec-callout-neutral-text-color': MAIN_TEXT_COLOR,
+  '--primer-spec-callout-neutral-border-color': 'rgb(48, 54, 61)',
   '--primer-spec-callout-info-bg-color': 'rgba(56, 139, 253, 0.1)',
   '--primer-spec-callout-info-text-color': '#79c0ff',
   '--primer-spec-callout-info-border-color': 'rgba(56, 139, 253, 0.4)',

diff --git a/src_js/subthemes/definitions/xcode_civic.theme.ts b/src_js/subthemes/definitions/xcode_civic.theme.ts
@@ -41,6 +41,7 @@ const xcode_dark_theme_vars: SubthemeDefinitionType = {
     '--tt-border-radius': '3px',
     '--main-header-border-bottom-color': BORDER_LINE_COLOR,
 
+    '--primer-spec-callout-neutral-text-color': 'black',
     '--primer-spec-callout-info-text-color': 'black',
     '--primer-spec-callout-warning-text-color': 'black',
     '--primer-spec-callout-danger-text-color': 'black',