Adding to Paragraph secondary color

src/components/layout/Paragraph/index.js

@@ -9,8 +9,8 @@ type Props = {
   align?: 'right' | 'center' | 'left',
   noMargin?: boolean,
   weight?: 'light' | 'regular' | 'bolder' | 'bold',
-  size?: 'sm' | 'md' | 'lg' | 'xl',
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl',
-  color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary' | 'warning',
+  color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary' | 'secondary' | 'warning',
   transform?: 'capitalize' | 'lowercase' | 'uppercase',
   children: React$Node,
   dot?: boolean,

src/components/layout/Paragraph/index.scss

@@ -22,10 +22,15 @@
 .warning {
   color: $warning;
 }
+
 .primary {
   color: $fontColor;
 }
 
+.secondary {
+  color: $secondary;
+}
+
 .white {
   color: white;
 }
@@ -74,6 +79,10 @@
   font-size: $extraLargeFontSize;
 }
 
+.xxl {
+  font-size: $xxlFontSize;
+}
+
 .light {
   font-weight: $lightFont;
 }