Create Sticker Component. Add new font family (special elite). Improve SolidBoxShadow mixin logic

recipes/public/index.html

@@ -25,6 +25,7 @@
     <title>Recipes</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lekton">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Special+Elite&display=swap">
     <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
   </head>

recipes/src/components/Sticker/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import './styles.scss';
+
+const Sticker: React.FunctionComponent<{}> = (props) => (
+  <div className='cbk-sticker'>
+    {
+      props.children
+    }
+  </div>
+);
+
+export default Sticker

recipes/src/components/Sticker/styles.scss

@@ -0,0 +1,11 @@
+@import 'styles/_variables.scss';
+
+.cbk-sticker {
+  display: inline-block;
+  background-color: $black;
+  color: $white;
+  font-family: $font-family-special;
+  @include solidBoxShadow($pink);
+  padding: $spacing-small/2;
+  letter-spacing: $letter-spacing-enhanced;
+}

recipes/src/styles/_fonts.scss

@@ -2,6 +2,7 @@ $font-family-text: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxy
 "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 sans-serif;
 $font-family-display: 'Lekton', sans-serif;
+$font-family-special: 'Special Elite', cursive;
 
 $font-weight-light: 300;
 $font-weight-regular: 400;

recipes/src/styles/_ui.scss

@@ -64,7 +64,7 @@ $phone: "(max-width: 839px)";
   }
 }
 
-@mixin solidBoxShadow() {
+@mixin solidBoxShadow($color: #000) {
   border: 1px solid #000;
-  box-shadow: 3px 3px 0 0 #000;
+  box-shadow: 3px 3px 0 0 $color;
 }