⚠️ Add flag design for content warning (#120)

* ⚠️ Add flag design for content warning

* Fix build error

* Lol fix build error

* Added terms

assets/css/abstracts/_mixins.scss

@@ -2,6 +2,10 @@
   content: '🚨';
 }
 
+@mixin icon__warning() {
+  content: '⚠️';
+}
+
 @mixin icon__alt() {
   content: '👍';
 }

assets/css/abstracts/_variables.scss

@@ -3,6 +3,10 @@ $secondary-color: hsl(120, 100%, 25%);
 
 $dark-red: hsl(0, 100%, 32.2%);
 $pink: hsl(349.5, 100%, 87.6%);
+$dark-green: hsl(120, 100%, 15%);
+$yellow: hsl(50, 100%, 50%);
+$dark-yellow: hsl(50, 100%, 20%);
+$pale-yellow: hsl(50, 100%, 86%);
 $black: hsl(0, 0%, 13%);
 $white: hsl(0, 0%, 100%);
 
@@ -13,4 +17,4 @@ $light-grey: hsl(0, 0%, 93.3%); // for backgrounds only
 $browser-context: 16;
 
 $lt-background-color: $pink;
-
+$lt-background-color-warning: $pale-yellow;

assets/css/components/_flag.scss

@@ -1,5 +1,5 @@
 .flag__red {
-  background-color: rgb(255, 192, 203);
+  background-color:$lt-background-color;
   border-radius: 1rem;
   display: inline-block;
   font-size: 0.9rem;
@@ -13,3 +13,19 @@
     @include icon__embed();
   }
 }
+
+.flag__yellow {
+  background-color: $lt-background-color-warning;
+  border-radius: 1rem;
+  display: inline-block;
+  font-size: 0.9rem;
+  font-weight: bold;
+  margin: 0.5rem 0.75rem 0.25rem 0;
+  padding: 0.45rem 0.65rem;
+  text-transform: lowercase;
+
+  &:before {
+    @include icon__warning();
+    @include icon__embed();
+  }
+}

assets/css/components/_word.scss

@@ -74,7 +74,7 @@
     text-transform: uppercase;
 
     &--avoid {
-      --word-signal-color: #a40000;
+      --word-signal-color: $dark-red;
 
       &:before {
         @include icon__avoid();
@@ -83,7 +83,7 @@
     }
 
     &--better {
-      --word-signal-color: green;
+      --word-signal-color: $dark-green;
 
       &:before {
         @include icon__alt();
@@ -97,5 +97,12 @@
         @include icon__hanging();
       }
     }
+    &--warning {
+      --word-signal-color: $dark-yellow;
+      &:before {
+        @include icon__warning();
+        @include icon__hanging();
+      }
+    }
   }
 }

assets/css/structures/_definition-content.scss

@@ -81,7 +81,7 @@
     text-transform: uppercase;
 
     &--avoid {
-      --word-signal-color: #a40000;
+      --word-signal-color: $dark-red;
 
       &:before {
         @include icon__avoid();
@@ -90,7 +90,7 @@
     }
 
     &--better {
-      --word-signal-color: green;
+      --word-signal-color: $dark-green;
 
       &:before {
         @include icon__alt();
@@ -104,6 +104,15 @@
         @include icon__hanging();
       }
     }
+
+    &--warning {
+      --word-signal-color: $dark-yellow;
+
+      &:before {
+        @include icon__warning();
+        @include icon__hanging();
+      }
+    }
   }
 }