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

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;
+    }
+}