monorepo f-emoji-picker global styles updated

packages/flow-core/src/components/f-emoji-picker/_f-emoji-picker-variables.scss

@@ -0,0 +1,30 @@
+$sizes: (
+	"medium": 36px,
+	"small": 28px
+);
+
+$state-colors: (
+	"primary": var(--color-primary-default),
+	"success": var(--color-success-default),
+	"warning": var(--color-warning-default),
+	"danger": var(--color-danger-default)
+);
+
+$variants: (
+	"curved": 4px,
+	"round": 22px,
+	"block": 0px
+);
+
+$categories: (
+	"fill": (
+		"background": var(--color-input-default),
+		"hover": var(--color-input-default-hover),
+		"border": 1px solid var(--color-input-default)
+	),
+	"outline": (
+		"background": transparent,
+		"hover": var(--color-surface-default-hover),
+		"border": 1px solid var(--color-border-default)
+	)
+);

packages/flow-core/src/components/f-emoji-picker/f-emoji-picker-global.scss

@@ -0,0 +1,18 @@
+@import "./../../mixins/scss/mixins";
+@import "./f-emoji-picker-variables";
+
+f-emoji-picker {
+	display: flex;
+	flex: 1 0 auto;
+	&[disabled] {
+		@include disabled();
+	}
+	&[state="default"] {
+		@include input-color("default");
+	}
+	@each $state, $color in $state-colors {
+		&[state="#{$state}"] {
+			@include input-color($state);
+		}
+	}
+}

packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.scss

@@ -2,41 +2,11 @@
 
 // common mixins imported from this file
 @import "./../../mixins/scss/mixins";
+@import "./f-emoji-picker-variables";
 /**
 START : scss maps to hold repsective attribute values
 **/
 
-$sizes: (
-	"medium": 36px,
-	"small": 28px
-);
-
-$state-colors: (
-	"primary": var(--color-primary-default),
-	"success": var(--color-success-default),
-	"warning": var(--color-warning-default),
-	"danger": var(--color-danger-default)
-);
-
-$variants: (
-	"curved": 4px,
-	"round": 22px,
-	"block": 0px
-);
-
-$categories: (
-	"fill": (
-		"background": var(--color-input-default),
-		"hover": var(--color-input-default-hover),
-		"border": 1px solid var(--color-input-default)
-	),
-	"outline": (
-		"background": transparent,
-		"hover": var(--color-surface-default-hover),
-		"border": 1px solid var(--color-border-default)
-	)
-);
-
 :host {
 	.f-emoji-picker {
 		@include base();
@@ -128,22 +98,6 @@ $categories: (
 	}
 }
 
-f-emoji-picker {
-	display: flex;
-	flex: 1 0 auto;
-	&[disabled] {
-		@include disabled();
-	}
-	&[state="default"] {
-		@include input-color("default");
-	}
-	@each $state, $color in $state-colors {
-		&[state="#{$state}"] {
-			@include input-color($state);
-		}
-	}
-}
-
 em-emoji-picker {
 	--font-family: var(--flow-font);
 	--color-border: var(--color-input-default);

packages/flow-core/src/components/f-emoji-picker/f-emoji-picker.ts

@@ -1,6 +1,7 @@
 import { html, PropertyValueMap, unsafeCSS } from "lit";
 import { property, query, queryAssignedElements } from "lit/decorators.js";
 import eleStyle from "./f-emoji-picker.scss?inline";
+import globalStyle from "./f-emoji-picker-global.scss?inline";
 import { FRoot } from "../../mixins/components/f-root/f-root";
 import data, { Category, EmojiMartData } from "@emoji-mart/data";
 import { Picker } from "emoji-mart";
@@ -9,6 +10,8 @@ import { FText } from "../f-text/f-text";
 import { FIcon } from "../f-icon/f-icon";
 import { FPopover } from "../f-popover/f-popover";
 import { flowElement } from "./../../utils";
+import { injectCss } from "@cldcvr/flow-core-config";
+injectCss("f-emoji-picker", globalStyle);
 
 export type FEmojiPickerState = "primary" | "default" | "success" | "warning" | "danger";
 
@@ -60,6 +63,7 @@ export class FEmojiPicker extends FRoot {
 	 */
 	static styles = [
 		unsafeCSS(eleStyle),
+		unsafeCSS(globalStyle),
 		...FDiv.styles,
 		...FText.styles,
 		...FPopover.styles,