@eccenca/gui-elements 24.4.1-featurepreparefinalnextcmem6943.2 → 25.0.0-rc.0

package/src/cmem/react-flow/configuration/_colors-workflow.scss

@@ -1,16 +1,16 @@
 .#{$eccgui}-configuration--colors__react-flow-workflow {
     --#{$eccgui}-project-node: #{eccgui-color-var("layout", "magenta", 700)};
-    --#{$eccgui}-project-node-bright: #{eccgui-color-var("layout", "magenta", 100)};
-    --#{$eccgui}-dataset-node: #{eccgui-color-var("layout", "cyan", 900)};
-    --#{$eccgui}-dataset-node-bright: #{eccgui-color-var("layout", "cyan", 100)};
-    --#{$eccgui}-linking-node: #{eccgui-color-var("layout", "teal", 900)};
-    --#{$eccgui}-linking-node-bright: #{eccgui-color-var("layout", "teal", 100)};
-    --#{$eccgui}-transform-node: #{eccgui-color-var("layout", "pink", 700)};
-    --#{$eccgui}-transform-node-bright: #{eccgui-color-var("layout", "pink", 100)};
+    --#{$eccgui}-project-node-bright: #{eccgui-color-var("layout", "magenta", 300)};
+    --#{$eccgui}-dataset-node: #{eccgui-color-var("layout", "petrol", 700)};
+    --#{$eccgui}-dataset-node-bright: #{eccgui-color-var("layout", "petrol", 300)};
+    --#{$eccgui}-linking-node: #{eccgui-color-var("layout", "cyan", 700)};
+    --#{$eccgui}-linking-node-bright: #{eccgui-color-var("layout", "cyan", 300)};
+    --#{$eccgui}-transform-node: #{eccgui-color-var("layout", "teal", 700)};
+    --#{$eccgui}-transform-node-bright: #{eccgui-color-var("layout", "teal", 300)};
     --#{$eccgui}-task-node: #{eccgui-color-var("layout", "lime", 700)};
-    --#{$eccgui}-task-node-bright: #{eccgui-color-var("layout", "lime", 100)};
+    --#{$eccgui}-task-node-bright: #{eccgui-color-var("layout", "lime", 300)};
     --#{$eccgui}-workflow-node: #{eccgui-color-var("layout", "purple", 700)};
-    --#{$eccgui}-workflow-node-bright: #{eccgui-color-var("layout", "purple", 100)};
-    --#{$eccgui}-replaceableInput: #{eccgui-color-var("layout", "amber", 700)};
-    --#{$eccgui}-replaceableInput-bright: #{eccgui-color-var("layout", "amber", 100)};
+    --#{$eccgui}-workflow-node-bright: #{eccgui-color-var("layout", "purple", 300)};
+    --#{$eccgui}-replaceable-input: #{eccgui-color-var("layout", "amber", 700)};
+    --#{$eccgui}-replaceable-input-bright: #{eccgui-color-var("layout", "amber", 300)};
 }

package/src/common/scss/_color-functions.scss

@@ -86,6 +86,11 @@
  * Created to replace them easily for CSS custom properties.
  */
 @function eccgui-color-rgba($color, $alpha) {
+    @if meta.type-of($alpha) != "number" {
+        // in case it is for example a CSS custom property
+        @return eccgui-color-mix($color $alpha, transparent);
+    }
+
     @if $alpha > 0 {
         @return eccgui-color-mix($color 100% * $alpha, transparent);
     } @else {

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -494,6 +494,7 @@ export function SuggestField<T, UPDATE_VALUE>(props: SuggestFieldProps<T, UPDATE
             query={query}
             // This leads to odd compile errors without "as any"
             popoverProps={updatedContextOverlayProps as any}
+            popoverContentProps={{className: "nodrag"}}
             selectedItem={selectedItem}
             fill={fill}
             {...createNewItemProps}

package/src/components/Button/Button.stories.tsx

@@ -20,7 +20,7 @@ export default {
         },
         intent: {
             ...helpersArgTypes.exampleIntent,
-            options: ["UNDEFINED", "primary", "success", "warning", "danger"],
+            options: ["UNDEFINED", "primary", "accent", "success", "warning", "danger"],
         },
     },
 } as Meta<typeof Button>;
@@ -62,6 +62,8 @@ const TemplateSemantic: StoryFn<typeof Button> = (args) => (
         <Button {...args} affirmative text="Affirmative action" />
         <Spacing vertical />
         <Button {...args} disruptive text="Disruptive action" />
+        <Spacing vertical />
+        <Button {...args} elevated text="Elevated action" />
     </OverlaysProvider>
 );
 export const ButtonSemantics = TemplateSemantic.bind({});
@@ -74,6 +76,10 @@ const TemplateIntent: StoryFn<typeof Button> = (args) => (
         <Button {...args} text="Warning" intent="warning" />
         <Spacing vertical />
         <Button {...args} text="Danger" intent="danger" />
+        <Spacing vertical />
+        <Button {...args} text="Primary" intent="primary" />
+        <Spacing vertical />
+        <Button {...args} text="Accent" intent="accent" />
     </OverlaysProvider>
 );
 export const ButtonIntent = TemplateIntent.bind({});

package/src/components/Button/Button.tsx

@@ -17,19 +17,23 @@ import Tooltip, { TooltipProps } from "./../Tooltip/Tooltip";
 interface AdditionalButtonProps {
     /**
      * Always use this when the button triggers an affirmative action, e.g. confirm a process.
-     * The button is displayed with primary color scheme.
+     * The button is displayed with accent color intent.
      */
     affirmative?: boolean;
     /**
      * Always use this when the button triggers an disruptive action, e.g. delete or remove.
-     * The button is displayed with primary color scheme.
+     * The button is displayed with danger color intent.
      */
     disruptive?: boolean;
     /**
      * Use this when a button is important enough to highlight it in a set of other buttons.
-     * The button is displayed with primary color scheme.
+     * The button is displayed with accent color intent.
      */
     elevated?: boolean;
+    /**
+     * Intent state visualized by color.
+     */
+    intent?: BlueprintIntent | "accent";
     /**
      * Content displayed in a badge that is attached to the button.
      * By default it is displayed `{ size: "small", position: "top-right", maxLength: 2 }` and with the same intent state of the button.
@@ -49,18 +53,21 @@ interface AdditionalButtonProps {
      */
     tooltipProps?: Partial<Omit<TooltipProps, "content" | "children">>;
     /**
-     * If an URL is set then the button is included as HTML anchor element instead of a button form element.
+     * Icon displayed on button start.
      */
-    //href?: string;
     icon?: ValidIconName | JSX.Element;
+    /**
+     * Icon displayed on button end.
+     */
     rightIcon?: ValidIconName | JSX.Element;
-    //target?: string;
 }
 
-interface ExtendedButtonProps extends AdditionalButtonProps, Omit<BlueprintButtonProps, "icon" | "rightIcon"> {}
+interface ExtendedButtonProps
+    extends AdditionalButtonProps,
+        Omit<BlueprintButtonProps, "intent" | "icon" | "rightIcon"> {}
 interface ExtendedAnchorButtonProps
     extends AdditionalButtonProps,
-        Omit<BlueprintAnchorButtonProps, "icon" | "rightIcon"> {}
+        Omit<BlueprintAnchorButtonProps, "intent" | "icon" | "rightIcon"> {}
 
 export type ButtonProps = ExtendedButtonProps & ExtendedAnchorButtonProps;
 
@@ -86,7 +93,7 @@ export const Button = ({
     let intentByFunction;
     switch (true) {
         case affirmative || elevated:
-            intentByFunction = BlueprintIntent.PRIMARY;
+            intentByFunction = "accent";
             break;
         case disruptive:
             intentByFunction = BlueprintIntent.DANGER;

package/src/components/Button/button.scss

@@ -1,5 +1,6 @@
 @use "sass:color";
 @use "sass:map";
+@use "sass:list";
 
 $button-height: $pt-button-height;
 $button-border-width: 1px; // !default;
@@ -49,64 +50,125 @@ $dark-button-gradient: $button-gradient; // !default;
 // $button-outlined-border-disabled-intent-opacity: 0.2 !default;
 
 $button-intents: (
-    "primary": (
+    // default - hover - active
+    "primary":
+        (
+            eccgui-color-var("identity", "brand", "900"),
+            eccgui-color-mix(
+                eccgui-color-var("identity", "brand", "900"),
+                eccgui-color-var("identity", "text", "900") 10%
+            ),
+            eccgui-color-mix(
+                eccgui-color-var("identity", "brand", "900"),
+                eccgui-color-var("identity", "text", "900") 20%
+            )
+        ),
+    "accent": (
         eccgui-color-var("identity", "accent", "900"),
-        eccgui-color-var("identity", "accent", "700"),
-        eccgui-color-var("identity", "accent", "500"),
+        eccgui-color-mix(
+            eccgui-color-var("identity", "accent", "900"),
+            eccgui-color-var("identity", "text", "900") 10%
+        ),
+        eccgui-color-mix(eccgui-color-var("identity", "accent", "900"), eccgui-color-var("identity", "text", "900") 20%)
     ),
     "success": (
         eccgui-color-var("semantic", "success", "900"),
-        eccgui-color-var("semantic", "success", "700"),
-        eccgui-color-var("semantic", "success", "500"),
+        eccgui-color-mix(
+            eccgui-color-var("semantic", "success", "900"),
+            eccgui-color-var("identity", "text", "900") 10%
+        ),
+        eccgui-color-mix(
+            eccgui-color-var("semantic", "success", "900"),
+            eccgui-color-var("identity", "text", "900") 20%
+        )
     ),
     "warning": (
         eccgui-color-var("semantic", "warning", "900"),
-        eccgui-color-var("semantic", "warning", "700"),
-        eccgui-color-var("semantic", "warning", "500"),
+        eccgui-color-mix(
+            eccgui-color-var("semantic", "warning", "900"),
+            eccgui-color-var("identity", "text", "900") 10%
+        ),
+        eccgui-color-mix(
+            eccgui-color-var("semantic", "warning", "900"),
+            eccgui-color-var("identity", "text", "900") 20%
+        )
     ),
     "danger": (
         eccgui-color-var("semantic", "danger", "900"),
-        eccgui-color-var("semantic", "danger", "700"),
-        eccgui-color-var("semantic", "danger", "500"),
-    ),
+        eccgui-color-mix(
+            eccgui-color-var("semantic", "danger", "900"),
+            eccgui-color-var("identity", "text", "900") 10%
+        ),
+        eccgui-color-mix(eccgui-color-var("semantic", "danger", "900"), eccgui-color-var("identity", "text", "900") 20%)
+    )
 );
 
 @import "~@blueprintjs/core/src/components/button/button";
 
-.#{$ns}-button {
-    position: relative;
-
-    .#{$ns}-large {
-        min-height: mini-units(6);
-    }
-
-    // special case override: blueprint do not use configured colors here
-    &.#{$ns}-intent-warning {
-        @include pt-button-intent(map.get($button-intents, "warning")...);
+@mixin eccgui-enhance-blueprint-button-intent($intentvalue) {
+    &.#{$ns}-intent-#{$intentvalue} {
+        @include pt-button-intent(map.get($button-intents, $intentvalue)...);
 
         &:not(.#{$ns}-disabled).#{$ns}-icon > svg {
             fill: eccgui-color-rgba($white, 0.7);
         }
 
         &:not(.#{$ns}-disabled):not(.#{$ns}-minimal):not(.#{$ns}-outlined) {
-            @include pt-button-intent(map.get($button-intents, "warning")...);
+            @include pt-button-intent(map.get($button-intents, $intentvalue)...);
         }
 
         &.#{$ns}-minimal,
         &.#{$ns}-outlined {
-            color: $eccgui-color-warning-text;
+            color: list.nth(map.get($button-intents, $intentvalue), 1);
             background: none;
-            border-color: $eccgui-color-warning-text;
+            border-color: list.nth(map.get($button-intents, $intentvalue), 1);
             box-shadow: none;
 
             &:disabled,
             &.#{$ns}-disabled {
-                color: eccgui-color-rgba($eccgui-color-warning-text, 0.39);
+                color: eccgui-color-rgba(list.nth(map.get($button-intents, $intentvalue), 1), $eccgui-opacity-disabled);
+                border-color: eccgui-color-rgba(
+                    list.nth(map.get($button-intents, $intentvalue), 1),
+                    $eccgui-opacity-disabled
+                );
+            }
+
+            &:active:not(:disabled):not(.#{$ns}-disabled),
+            &.#{$ns}-active:not(:disabled):not(.#{$ns}-disabled) {
+                color: list.nth(map.get($button-intents, $intentvalue), 3);
+                background-color: eccgui-color-rgba(
+                    list.nth(map.get($button-intents, $intentvalue), 3),
+                    $eccgui-opacity-ghostly
+                );
+                border-color: list.nth(map.get($button-intents, $intentvalue), 3);
+            }
+
+            &:focus:not(:disabled):not(.#{$ns}-disabled),
+            &:hover:not(:disabled):not(.#{$ns}-disabled) {
+                color: list.nth(map.get($button-intents, $intentvalue), 2);
+                background-color: eccgui-color-rgba(
+                    list.nth(map.get($button-intents, $intentvalue), 2),
+                    0.5 * $eccgui-opacity-ghostly
+                );
+                border-color: list.nth(map.get($button-intents, $intentvalue), 2);
             }
         }
     }
 }
 
+.#{$ns}-button {
+    position: relative;
+
+    .#{$ns}-large {
+        min-height: mini-units(6);
+    }
+
+    // special case override: blueprint do not use configured colors here
+    @include eccgui-enhance-blueprint-button-intent("primary");
+    @include eccgui-enhance-blueprint-button-intent("accent");
+    @include eccgui-enhance-blueprint-button-intent("warning");
+}
+
 .#{$ns}-button-text {
     min-width: 0;
 }

package/src/components/Chat/stories/ChatField.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { ChatField } from "../../../index";
+import { ChatField, ContextMenu, MenuItem } from "../../../index";
 
 export default {
     title: "Components/Chat/ChatField",
@@ -15,4 +15,9 @@ const TemplateFull: StoryFn<typeof ChatField> = (args) => <ChatField {...args} k
 export const Default = TemplateFull.bind({});
 Default.args = {
     onTextSubmit: (value) => alert(value),
+    rightElement: (
+        <ContextMenu>
+            <MenuItem text="Just a test" />
+        </ContextMenu>
+    ),
 };

package/src/components/Dialog/Modal.tsx

@@ -5,12 +5,13 @@ import {
     Overlay2Props as BlueprintOverlayProps,
 } from "@blueprintjs/core";
 
+import { preventReactFlowActionsClasses } from "../../cmem";
 import { utils } from "../../common";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../interfaces";
 
 import { Card } from "./../Card";
-import {preventReactFlowActionsClasses} from "../../cmem";
+import { ModalContext } from "./ModalContext";
 
 export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
     children: React.ReactNode | React.ReactNode[];
@@ -43,9 +44,17 @@ export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
      * If this option is used inflationary then this could harm the visibility of other overlays.
      */
     forceTopPosition?: boolean;
+    /**
+     * Modal ID that should be globally unique. If a ModalContext is provided this can be used to track opening/closing of this modal.
+     */
+    modalId?: string;
+    /**
+     * Prevents that pan and zooming actions of an existing react-flow instance are triggered while this Modal is open.
+     */
+    preventReactFlowEvents?: boolean;
 }
 
-export type ModalSize = "tiny" | "small" | "regular" | "large" | "xlarge" | "fullscreen"
+export type ModalSize = "tiny" | "small" | "regular" | "large" | "xlarge" | "fullscreen";
 
 /**
  * Displays contents on top of other elements, used to create dialogs.
@@ -68,8 +77,24 @@ export const Modal = ({
     onOpening,
     "data-test-id": dataTestId,
     "data-testid": dataTestid,
+    modalId,
+    preventReactFlowEvents = true,
     ...otherProps
 }: ModalProps) => {
+    const modalContext = React.useContext(ModalContext)
+    const uniqueModalId = React.useRef<string>(modalId ?? Date.now().toString(36) + Math.random().toString(36).substring(2))
+
+    React.useEffect(() => {
+        return () => {
+            // Make sure to always remove flag when modal is removed
+            modalContext.setModalOpen(uniqueModalId.current, false)
+        }
+    }, [])
+
+    React.useEffect(() => {
+        modalContext.setModalOpen(uniqueModalId.current, otherProps.isOpen)
+    }, [otherProps.isOpen])
+
     const backdropProps: React.HTMLProps<HTMLDivElement> | undefined =
         !canOutsideClickClose && canEscapeKeyClose
             ? {
@@ -117,7 +142,7 @@ export const Modal = ({
         <BlueprintOverlay
             {...otherProps}
             backdropProps={backdropProps}
-            className={`${overlayClassName} ${preventReactFlowActionsClasses}`}
+            className={`${overlayClassName} ${preventReactFlowEvents ? preventReactFlowActionsClasses : ""}`}
             backdropClassName={`${eccgui}-dialog__backdrop`}
             canOutsideClickClose={canOutsideClickClose}
             canEscapeKeyClose={canEscapeKeyClose}

package/src/components/Dialog/ModalContext.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+export interface ModalContextProps {
+    /** Set that a specific modal is currently being open (or closed) */
+    setModalOpen: (modalId: string, isOpen: boolean) => void;
+
+    /** The currently opened modals ordered by when they have been opened. Oldest coming first. */
+    openModalStack: string[] | undefined;
+}
+
+/** Can be provided in the application to react to modal related changes. */
+export const ModalContext = React.createContext<ModalContextProps>({
+    setModalOpen: () => {},
+    openModalStack: [],
+});
+
+/** Default implementation for modal context props.
+ * Tracks open modals in a stack representation.
+ **/
+export const useModalContext = (): ModalContextProps => {
+    // A stack of modal IDs. These should reflect a stacked opening of modals on top of each other.
+    const [openModalStack, setOpenModalStack] = React.useState<string[]>([]);
+
+    const setModalOpen = React.useCallback((modalId: string, isOpen: boolean) => {
+        setOpenModalStack((old) => {
+            if (isOpen) {
+                return [...old, modalId];
+            } else {
+                const idx = old.findIndex((id) => modalId === id);
+                switch (idx) {
+                    case -1:
+                        // Trying to close modal that has not been registered as open!
+                        return old;
+                    case old.length - 1:
+                        return old.slice(0, idx);
+                    default:
+                        // Modal in between is closed. Consider all modals after it also as closed.
+                        return old.slice(0, idx);
+                }
+            }
+        });
+    }, []);
+
+    return {
+        openModalStack: openModalStack.length ? [...openModalStack] : undefined,
+        setModalOpen,
+    };
+};

package/src/components/Dialog/index.ts

@@ -1,3 +1,4 @@
 export * from "./Modal";
 export * from "./SimpleDialog";
 export * from "./AlertDialog";
+export * from "./ModalContext";

package/src/components/Dialog/stories/Modal.stories.tsx

@@ -1,11 +1,20 @@
 import React from "react";
-import { OverlaysProvider } from "@blueprintjs/core";
+import { Classes, OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 import { fn } from "@storybook/test";
 
 import { SimpleCard } from "../../Card/stories/Card.stories";
 
-import { Card, Modal } from "./../../../../index";
+import {
+    Button,
+    Card,
+    CardContent,
+    Modal,
+    ModalContext,
+    ModalSize,
+    Spacing,
+    useModalContext,
+} from "./../../../../index";
 
 export default {
     title: "Components/Dialog/Modal",
@@ -33,3 +42,135 @@ Default.args = {
     onOpening: fn(),
     onClosing: fn(),
 };
+
+const ContextTemplate = ({ children }: React.HTMLAttributes<HTMLDivElement>) => {
+    const { setModalOpen, openModalStack } = useModalContext();
+
+    return (
+        <OverlaysProvider>
+            <div style={{ height: "70vh", position: "relative" }} id={"modalPortal"}>
+                <ModalContext.Provider value={{ setModalOpen, openModalStack }}>{children}</ModalContext.Provider>
+            </div>
+        </OverlaysProvider>
+    );
+};
+
+const ModalContent = ({ children }: React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <Card style={{ height: "100%" }}>
+            <CardContent>{children}</CardContent>
+        </Card>
+    );
+};
+
+/** Component for nested modals. */
+const ExampleModal = ({
+    id,
+    size,
+    children,
+}: {
+    id?: string;
+    size: ModalSize;
+    children?: React.HTMLAttributes<HTMLDivElement>["children"];
+}) => {
+    const [isOpen, setIsOpen] = React.useState(true);
+    const [portalElement, setPortalElement] = React.useState<HTMLElement | undefined>();
+
+    React.useEffect(() => {
+        setPortalElement(document.getElementById("modalPortal")!);
+    }, []);
+
+    return (
+        <Modal
+            modalId={id}
+            size={size}
+            isOpen={isOpen}
+            usePortal={true}
+            portalContainer={portalElement}
+            hasBackdrop={true}
+            onOpened={() => {
+                // workaround, Blueprint attach a class to body tht prevents scrolling, probably it is attached to the wrong portal
+                document.body.classList.remove(Classes.OVERLAY_OPEN);
+            }}
+        >
+            <ModalContent>
+                Modal with constant modal ID "{id}".
+                <Spacing />
+                <TrackingContent />
+                <Spacing />
+                {children}
+                <Spacing />
+                <Button key={"close"} onClick={() => setIsOpen(false)}>
+                    Close
+                </Button>
+            </ModalContent>
+        </Modal>
+    );
+};
+
+const InnerModal = () => {
+    return <ExampleModal id="innerModal" size="small" />;
+};
+
+const MiddleModal = () => {
+    return (
+        <ExampleModal id="middleModal" size="regular">
+            <InnerModal />
+        </ExampleModal>
+    );
+};
+
+/** Shows the current stack of open modals. */
+const TrackingContent = () => {
+    const modalContext = React.useContext(ModalContext);
+
+    return (
+        <ul>
+            {(modalContext.openModalStack ?? []).map((modalId, idx) => (
+                <li key={modalId}>
+                    {idx + 1}. {modalId}
+                </li>
+            ))}
+        </ul>
+    );
+};
+
+/**
+ * `ModalContext` can be used as provider to track a stack of modals.
+ *
+ * ```(Javascript)
+ * const ContextTemplate = () => {
+ *     const { setModalOpen, openModalStack } = useModalContext();
+ *     return (
+ *         <ModalContext.Provider value={{ setModalOpen, openModalStack }}>
+ *             <SimpleDialog size="large" isOpen>
+ *                 <OtherModal />
+ *             </SimpleDialog>
+ *         </ModalContext.Provider>
+ *     );
+ * };
+ *
+ * const OtherModal = () => {
+ *     const modalContext = React.useContext(ModalContext);
+ *     return (
+ *         <SimpleDialog size="small">
+ *            <ul>
+ *                {(modalContext.openModalStack ?? []).map((modalId, idx) => (
+ *                    <li key={modalId}>
+ *                        {idx + 1}. {modalId}
+ *                    </li>
+ *                ))}
+ *            </ul>
+ *         </SimpleDialog>
+ *     );
+ * };
+ * ```
+ */
+export const NestedModalWithContext = ContextTemplate.bind({});
+NestedModalWithContext.args = {
+    children: [
+        <ExampleModal id="rootModal" size="large">
+            <MiddleModal />
+        </ExampleModal>,
+    ],
+};

package/src/components/Icon/canonicalIconNames.tsx

@@ -171,10 +171,14 @@ const canonicalIcons = {
     "state-warning": icons.WarningAltFilled,
 
     "toggler-caret": icons.CaretSort,
+    "toggler-carettop": icons.CaretUp,
     "toggler-caretright": icons.CaretRight,
     "toggler-caretdown": icons.CaretDown,
+    "toggler-caretleft": icons.CaretLeft,
     "toggler-maximize": icons.Maximize,
     "toggler-minimize": icons.Minimize,
+    "toggler-micon": icons.Microphone,
+    "toggler-micoff": icons.MicrophoneOff,
     "toggler-moveleft": icons.ChevronLeft,
     "toggler-moveright": icons.ChevronRight,
     "toggler-list": icons.List,

package/src/components/Icon/icon.scss

@@ -1,6 +1,12 @@
 .#{$eccgui}-icon {
     vertical-align: text-bottom;
 
+    &.#{$eccgui}-intent--primary {
+        color: $eccgui-color-primary;
+    }
+    &.#{$eccgui}-intent--accent {
+        color: $eccgui-color-accent;
+    }
     &.#{$eccgui}-intent--info {
         color: $eccgui-color-info-text;
     }