@farm-investimentos/front-mfe-components 9.2.4 → 9.3.0

package/src/configurations/_theme-colors.scss

@@ -1,25 +1,79 @@
+$primary: (
+    base: #00CCA7,
+    lighten: #EBFFFB,
+    darken: #00B493,
+);
+
 $secondary: (
-    base: #00B493,
-    lighten: #ADFFF0,
-    darken: #006653,
+    base: #5C5C5C,
+    lighten: #F5F5F5,
+    darken: #1A3738,
 );
 
-$info: (
-    base: #5089DE,
-    lighten: #95e8ff,
-    darken: #003784
+$neutral: (
+    base: #EEEEEE,
+    lighten: #F5F5F5,
+    darken: #E0E0E0,
 );
 
 $error: (
-    base: #ea5455,
-    lighten: #ff706d,
-    darken: #6f0000
+    base: #F44336,
+    lighten: #FFEBEE,
+    darken: #B71C1C,
+);
+
+$warning: (
+    base: #FF9800,
+    lighten: #FFF3E0,
+    darken: #FF6D00,
+);
+
+$info: (
+    base: #2196F3,
+    lighten: #E3F2FD,
+    darken: #0D47A1,
+);
+
+$success: (
+    base: #4CAF50,
+    lighten: #E8F5E9,
+    darken: #1B5E20,
+);
+
+$extra-1: (
+    base: #8E24AA,
+    lighten: #E8F5E9,
+    darken: #4A148C,
+);
+
+$extra-2: (
+    base: #EC407A,
+    lighten: #FCE4EC,
+    darken: #880E4F,
 );
 
 $theme-colors: (
+    "primary": $primary,
     "secondary": $secondary,
+    "neutral": $neutral,
     "info": $info,
-    "error": $error
+    "error": $error,
+    "warning": $warning,
+    "success": $success,
+    "extra-1": $extra-1,
+    "extra-2": $extra-2
+);
+
+$text-colors: (
+    "primary": #1C1C1C,
+    "secondary": #757575,
+    "disabled": #BDBDBD
+);
+
+$stroke-colors: (
+    "base": #E0E0E0,
+    "disabled": #BDBDBD,
+    "divider": #E0E0E0
 );
 
 $theme-colors-list: map-keys($theme-colors);

package/src/examples/Colors.stories.js

@@ -1,4 +1,6 @@
 import baseThemeColors from '../configurations/_theme-colors-base.scss';
+import textThemeColors from '../configurations/_theme-colors-text.scss';
+import strokeThemeColors from '../configurations/_theme-colors-stroke.scss';
 import variationThemeColors from '../configurations/_theme-colors-variations.scss';
 import('./Colors.stories.scss');
 
@@ -12,6 +14,8 @@ export const NamesAndValues = () => ({
 			baseThemeColors: { ...baseThemeColors },
 			keys: Object.keys(baseThemeColors),
 			variationThemeColors: { ...variationThemeColors },
+			textThemeColors: { ...textThemeColors },
+			strokeThemeColors: { ...strokeThemeColors },
 		};
 	},
 	template: `<div class="palette-container">
@@ -19,10 +23,62 @@ export const NamesAndValues = () => ({
             v-for="key in keys"
             :key="key"
         >
-            <farm-heading :type="5">{{ key }}</farm-heading>
-            <span :style="{ backgroundColor: baseThemeColors[key] }">Base {{ baseThemeColors[key] }}</span>
-            <span :style="{ backgroundColor: variationThemeColors[key + '-lighten'] }">Lighten: {{ variationThemeColors[key + '-lighten'] }}</span>
-            <span :style="{ backgroundColor: variationThemeColors[key + '-darken'], color: 'white' }">Darken: {{ variationThemeColors[key + '-darken'] }}</span>
+			<farm-heading :type="5">{{ key }}</farm-heading>
+			<span :style="{ backgroundColor: baseThemeColors[key] }">Base <span>{{ baseThemeColors[key] }}</span></span>
+			<span :style="{ backgroundColor: variationThemeColors[key + '-lighten'] }">Lighten <span>{{ variationThemeColors[key + '-lighten'] }}</span></span>
+			<span :style="{ backgroundColor: variationThemeColors[key + '-darken'], color: 'white' }">Darken <span>{{ variationThemeColors[key + '-darken'] }}</span></span>
         </div>
+
+		<div>
+			<farm-heading :type="5">Text</farm-heading>
+			<span :style="{ color: textThemeColors['text-primary'] }">Primary <span>{{ textThemeColors['text-primary'] }}</span></span>
+			<span :style="{ color: textThemeColors['text-secondary'] }">Secondary <span>{{ textThemeColors['text-secondary'] }}</span></span>
+			<span :style="{ color: textThemeColors['text-disabled'] }">Disabled <span>{{ textThemeColors['text-disabled'] }}</span></span>
+        </div>
+		<div>
+			<farm-heading :type="5">Stroke</farm-heading>
+			<span :style="{ color: strokeThemeColors['stroke-base'] }">Base <span>{{ strokeThemeColors['stroke-base'] }}</span></span>
+			<span :style="{ color: strokeThemeColors['stroke-disabled'] }">Disabled <span>{{ strokeThemeColors['stroke-disabled'] }}</span></span>
+			<span :style="{ color: strokeThemeColors['stroke-divider'] }">Divider <span>{{ strokeThemeColors['stroke-divider'] }}</span></span>
+        </div>
+
+	</div>`,
+});
+
+export const CssVariables = () => ({
+	data() {
+		return {
+			baseThemeColors: { ...baseThemeColors },
+			keys: Object.keys(baseThemeColors),
+			variationThemeColors: { ...variationThemeColors },
+			textThemeColors: { ...textThemeColors },
+			strokeThemeColors: { ...strokeThemeColors },
+		};
+	},
+	template: `<div class="palette-container">
+        <div
+            v-for="key in keys"
+            :key="key"
+        >
+		<farm-heading :type="5">{{ key }}</farm-heading>
+			<span :style="{ backgroundColor: baseThemeColors[key] }">Base <span>--farm-{{ key }}-base</span></span>
+			<span :style="{ backgroundColor: variationThemeColors[key + '-lighten'] }">Lighten<span>--farm-{{ key }}-lighten</span></span>
+			<span :style="{ backgroundColor: variationThemeColors[key + '-darken'], color: 'white' }">Darken: <span>--farm-{{ key }}-darken</span></span>
+		</div>
+
+		<div>
+		<farm-heading :type="5">Text</farm-heading>
+			<span :style="{ color: textThemeColors['text-primary'] }">Primary <span>--farm-text-primary</span></span></span>
+			<span :style="{ color: textThemeColors['text-secondary'] }">Secondary <span>--farm-text-secondary</span></span>
+			<span :style="{ color: textThemeColors['text-disabled'] }">Disabled <span>--farm-text-disabled</span></span>
+		</div>
+
+		<div>
+			<farm-heading :type="5">Stroke</farm-heading>
+			<span :style="{ color: strokeThemeColors['stroke-base'] }">Base <span>--farm-stroke-base</span></span></span>
+			<span :style="{ color: strokeThemeColors['stroke-disabled'] }">Disabled <span>--farm-stroke-disabled</span></span>
+			<span :style="{ color: strokeThemeColors['stroke-divider'] }">Divider <span>--farm-stroke-divider</span></span>
+        </div>
+
 	</div>`,
 });

package/src/examples/Colors.stories.scss

@@ -1,15 +1,21 @@
 .palette-container {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
 
     >div {
         display: flex;
         flex-direction: column;
-        width: calc(25% - 32px);
-        margin: auto 16px;
+        width: calc(33.333% - 32px);
+        margin: auto 16px 32px;
+        font-size: 12px;
+
+        >span {
+            padding: 8px 12px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
 
-        span {
-            padding: 4px 8px;
         }
     }
 }

package/src/scss/cssVariablesGenerator.scss

@@ -0,0 +1,22 @@
+@import '../configurations/theme-colors';
+
+:root {
+
+    @each $name,
+    $color in $theme-colors {
+        #{"--farm-" + $name + "-base"}: themeColor($name, "base");
+        #{"--farm-" + $name + "-lighten"}: themeColor($name, "lighten");
+        #{"--farm-" + $name + "-darken"}: themeColor($name, "darken");
+    }
+
+    @each $name,
+    $color in $text-colors {
+        #{"--farm-text-" + $name}: $color;
+    }
+
+
+    @each $name,
+    $color in $stroke-colors {
+        #{"--farm-stroke-" + $name}: $color;
+    }
+}