Feature: HighlightButton component added.

example/src/navigation/index.tsx

@@ -128,7 +128,6 @@ const RootNav = () => {
             isWorkWithAction: true,
             isWorkWithFlex1: true
         }}
-        customBackgroundColor="moon"
         isWorkWithSticky={true}
         glassEffect={5}
     >

src/components/highlightButton/index.tsx

@@ -0,0 +1,191 @@
+import {
+    type FC
+} from "react";
+import {
+    TouchableOpacity,
+    View
+} from "react-native";
+import type IHighlightButtonProps from "./type";
+import stylesheet, {
+    getHighlightButtonSize,
+    getHighlightButtonType,
+    useStyles
+} from "./stylesheet";
+import {
+    NCoreUIKitTheme
+} from "../../core/hooks";
+import type ITextProps from "../text/type";
+import Loading from "../loading";
+import Text from "../text";
+
+/**
+ * A generic button
+ * @param props {@link IHighlightButtonProps}
+ * @returns Element
+ */
+const HighlightButton: FC<IHighlightButtonProps> = ({
+    displayBehaviourWhileLoading = "disabled",
+    spreadBehaviour = "baseline",
+    isCustomPadding = false,
+    icon: IconComponentProp,
+    iconDirection = "left",
+    isDisabled = false,
+    customBorderColor,
+    customIconColor,
+    customTextColor,
+    glassEffect = 5,
+    size = "medium",
+    type = "glass",
+    renderLoading,
+    customColor,
+    customTheme,
+    titleStyle,
+    isLoading,
+    onPress,
+    title,
+    style,
+    ...props
+}) => {
+    const {
+        typography,
+        radiuses,
+        borders,
+        colors,
+        spaces
+    } = NCoreUIKitTheme.useContext(customTheme);
+
+    const currentSize = getHighlightButtonSize({
+        spaces,
+        size
+    });
+
+    const currentType = getHighlightButtonType({
+        type,
+    });
+
+    const {
+        container: containerDynamicStyle,
+        loading: loadingDynamicStyle,
+        overlay: overlayDynamicStyle,
+        title: titleDynamicStyle
+    } = useStyles({
+        displayBehaviourWhileLoading,
+        icon: IconComponentProp,
+        customBorderColor,
+        isCustomPadding,
+        spreadBehaviour,
+        iconDirection,
+        glassEffect,
+        currentType,
+        currentSize,
+        customColor,
+        isDisabled,
+        isLoading,
+        radiuses,
+        borders,
+        colors,
+        spaces,
+        title,
+        type
+    });
+
+    const titleProps: ITextProps = {
+        color: currentType.titleColor
+    };
+
+    const iconProps: NCoreUIKit.IconCallbackProps = {
+        size: Number(typography[currentSize.fontSize].fontSize),
+        color: currentType.iconColor
+    };
+
+    if (isDisabled || isLoading) {
+        const stateType = type === "danger" ? "error" : type === "glass" ? "neutral" : type;
+
+        titleProps.customColor = colors.system.state.content.disabled[stateType];
+        iconProps.customColor = colors.system.state.content.disabled[stateType];
+    }
+
+    const renderIcon = () => {
+        if(!isDisabled && !isLoading) {
+            if(customTextColor) {
+                const _customTextColor = customTextColor as keyof NCoreUIKit.ProjectColorPalette;
+                iconProps.customColor = colors.project[_customTextColor] ? colors.project[_customTextColor] : customTextColor;
+            }
+
+            if(customIconColor) {
+                const _customIconColor = customIconColor as keyof NCoreUIKit.ProjectColorPalette;
+                iconProps.customColor = colors.project[_customIconColor] ? colors.project[_customIconColor] : customIconColor;
+            }
+        }
+
+        if (isLoading) {
+            if(renderLoading) {
+                return renderLoading();
+            }
+
+            return <Loading
+                {...iconProps}
+                style={[
+                    loadingDynamicStyle
+                ]}
+            />;
+        }
+
+        if (!IconComponentProp) {
+            return null;
+        }
+
+        return <IconComponentProp {...iconProps} />;
+    };
+
+    const renderTitle = () => {
+        if (!title) {
+            return null;
+        }
+
+        if(!isDisabled && !isLoading) {
+            if(customTextColor) {
+                titleProps.customColor = customTextColor;
+            }
+        }
+
+        return <Text
+            variant={currentSize.fontSize}
+            style={[
+                titleStyle,
+                stylesheet.title,
+                titleDynamicStyle
+            ]}
+            {...titleProps}
+        >
+            {title}
+        </Text>;
+    };
+
+    const renderOverlay = () => {
+        return <View
+            style={[
+                stylesheet.loading,
+                stylesheet.overlay,
+                overlayDynamicStyle
+            ]}
+        />;
+    };
+
+    return <TouchableOpacity
+        {...props}
+        onPress={isDisabled || isLoading ? () => null : onPress}
+        disabled={isDisabled || isLoading}
+        style={[
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ]}
+    >
+        {renderIcon()}
+        {renderTitle()}
+
+        {renderOverlay()}
+    </TouchableOpacity>;
+};
+export default HighlightButton;

src/components/highlightButton/stylesheet.ts

@@ -0,0 +1,258 @@
+import {
+    type TextStyle,
+    type ViewStyle,
+    StyleSheet
+} from "react-native";
+import {
+    type HighlightButtonTypeConstantType,
+    type HighlightButtonSizeConstantType,
+    type HighlightButtonDynamicStyleType,
+    type HighlightButtonMeasuresKeys,
+    type HighlightButtonMeasures,
+    type HighlightButtonTypes,
+    type HighlightButtonSize,
+    type HighlightButtonType
+} from "./type";
+import type {
+    Mutable
+} from "../../types";
+import {
+    webStyle
+} from "../../utils";
+
+export const BUTTON_SIZES: Record<HighlightButtonSize, HighlightButtonMeasuresKeys> = {
+    small: {
+        paddingHorizontal: "spacingMd",
+        paddingVertical: "spacingXs",
+        fontSize: "labelSmallSize"
+    },
+    medium: {
+        paddingHorizontal: "spacingLg",
+        paddingVertical: "spacingSm",
+        fontSize: "labelMediumSize"
+    },
+    large: {
+        paddingHorizontal: "spacingXl",
+        paddingVertical: "spacingMd",
+        fontSize: "labelLargeSize"
+    }
+};
+
+export const BUTTON_TYPE_STYLES: Record<
+    HighlightButtonType,
+    {
+        borderColor: keyof NCoreUIKit.BorderContentColors;
+        titleColor: keyof NCoreUIKit.TextContentColors;
+        iconColor: keyof NCoreUIKit.IconContentColors;
+        containerColor: keyof NCoreUIKit.LowColors;
+    }
+> = {
+    glass: {
+        titleColor: "constrastHigh",
+        iconColor: "constrastHigh",
+        containerColor: "neutral",
+        borderColor: "subtle"
+    },
+    primary: {
+        containerColor: "primary",
+        borderColor: "emphasized",
+        titleColor: "emphasized",
+        iconColor: "emphasized"
+    },
+    danger: {
+        containerColor: "error",
+        borderColor: "danger",
+        titleColor: "danger",
+        iconColor: "danger"
+    },
+    success: {
+        containerColor: "success",
+        borderColor: "success",
+        titleColor: "success",
+        iconColor: "success"
+    },
+    warning: {
+        containerColor: "warning",
+        borderColor: "warning",
+        titleColor: "warning",
+        iconColor: "warning"
+    },
+    info: {
+        containerColor: "info",
+        borderColor: "info",
+        titleColor: "info",
+        iconColor: "info"
+    },
+    neutral: {
+        containerColor: "neutral",
+        borderColor: "subtle",
+        titleColor: "mid",
+        iconColor: "mid"
+    }
+};
+
+export const getHighlightButtonType = ({
+    type
+}: HighlightButtonTypeConstantType): HighlightButtonTypes => {
+    const currentType = BUTTON_TYPE_STYLES[type];
+
+    return currentType;
+};
+
+export const getHighlightButtonSize = ({
+    spaces,
+    size
+}: HighlightButtonSizeConstantType): HighlightButtonMeasures => {
+    const currentSize = BUTTON_SIZES[size];
+
+    return {
+        paddingHorizontal: spaces[currentSize.paddingHorizontal],
+        paddingVertical: spaces[currentSize.paddingVertical],
+        fontSize: currentSize.fontSize
+    };
+};
+
+const stylesheet = StyleSheet.create({
+    container: {
+        backgroundColor: "transparent",
+        borderColor: "transparent",
+        flexDirection: "row",
+        borderStyle: "solid",
+        alignItems: "center",
+        position: "relative",
+        display: "flex"
+    },
+    title: {
+        margin: "0",
+    },
+    loading: {},
+    overlay: {
+        position: "absolute",
+        display: "none",
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0
+    }
+});
+
+export const useStyles = ({
+    displayBehaviourWhileLoading,
+    customBorderColor,
+    spreadBehaviour,
+    isCustomPadding,
+    iconDirection,
+    glassEffect,
+    currentType,
+    currentSize,
+    customColor,
+    isDisabled,
+    isLoading,
+    radiuses,
+    borders,
+    colors,
+    spaces,
+    title,
+    icon,
+    type
+}: HighlightButtonDynamicStyleType) => {
+    const styleType = type === "danger" ? "error" : type === "glass" ? "neutral" : type;
+
+    const styles = {
+        container: {
+            backgroundColor: colors.system.low[currentType.containerColor],
+            borderColor: colors.content.border[currentType.borderColor],
+            paddingRight: currentSize.paddingHorizontal,
+            paddingBottom: currentSize.paddingVertical,
+            paddingLeft: currentSize.paddingHorizontal,
+            paddingTop: currentSize.paddingVertical,
+            borderRadius: radiuses.actions,
+            borderWidth: borders.line / 4,
+            ...webStyle({
+                boxShadow: `inset 0 0px 0.5px ${currentType.borderColor}, inset 0 -2px 6px ${currentType.borderColor}, 0 10px 30px ${currentType.borderColor}`,
+                WebkitBackdropFilter: `blur(${glassEffect}px) saturate(180%) brightness(1.1)`,
+                backdropFilter: `blur(${glassEffect}px) saturate(180%) brightness(1.1)`
+            })
+        } as Mutable<ViewStyle>,
+        title: {
+        } as Mutable<TextStyle>,
+        loading: {
+        } as Mutable<ViewStyle>,
+        overlay: {
+            borderRadius: radiuses.actions - 2
+        } as Mutable<ViewStyle>
+    };
+
+    if (isLoading) {
+        styles.title.marginLeft = spaces.spacingSm;
+
+        styles.overlay.display = "flex";
+
+        if (displayBehaviourWhileLoading === "disabled") {
+            styles.overlay.backgroundColor = colors.system.state.overlay.disabled[styleType];
+        }
+    }
+
+    if (isLoading && spreadBehaviour === "stretch") {
+        styles.title.marginLeft = spaces.spacingSm;
+        styles.title.margin = "initial";
+    }
+
+    if (icon && !isLoading) {
+        styles.title.marginLeft = spaces.spacingSm;
+        styles.title.margin = "initial";
+    }
+
+    if (spreadBehaviour === "baseline") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.width = "auto";
+    } else if (spreadBehaviour === "stretch") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.justifyContent = "center";
+        styles.container.flexShrink = 1;
+        styles.container.width = "100%";
+    }
+
+    if (isDisabled) {
+        styles.overlay.backgroundColor = colors.system.state.overlay.disabled[styleType];
+    }
+
+    if (icon && title) {
+        if (iconDirection === "left") {
+            styles.title.marginLeft = spaces.spacingSm;
+        } else {
+            styles.title.marginRight = spaces.spacingSm;
+        }
+    }
+
+    if(icon && !title) {
+        styles.container.paddingBottom = currentSize.paddingVertical;
+        styles.container.paddingRight = currentSize.paddingVertical;
+        styles.container.paddingLeft = currentSize.paddingVertical;
+        styles.container.paddingTop = currentSize.paddingVertical;
+    }
+
+    if(isCustomPadding) {
+        delete styles.container.paddingBottom;
+        delete styles.container.paddingRight;
+        delete styles.container.paddingLeft;
+        delete styles.container.paddingTop;
+    }
+
+    if(customColor) {
+        const _customContainerColor = customColor as keyof NCoreUIKit.ContainerContentColors;
+        const _customColor = customColor as keyof NCoreUIKit.ProjectColorPalette;
+
+        styles.container.backgroundColor = colors.project[_customColor] ? colors.project[_customColor] : colors.content.container[_customContainerColor] ? colors.content.container[_customContainerColor] : customColor;
+    }
+
+    if(customBorderColor) {
+        const _customContentBorderColor = customBorderColor as keyof NCoreUIKit.BorderContentColors;
+        const _customBorderColor = customBorderColor as keyof NCoreUIKit.ProjectColorPalette;
+
+        styles.container.borderColor = colors.project[_customBorderColor] ? colors.project[_customBorderColor] : colors.content.border[_customContentBorderColor] ? colors.content.border[_customContentBorderColor] : customBorderColor;
+    }
+
+    return styles;
+};
+export default stylesheet;

src/components/highlightButton/type.ts

@@ -0,0 +1,100 @@
+import type {
+    ReactNode
+} from "react";
+import {
+    type ButtonProps,
+    type ViewStyle,
+    type StyleProp,
+    type TextStyle
+} from "react-native";
+import {
+    type NCoreUIKitIcon
+} from "../../types";
+
+export type HighlightButtonDynamicStyleType = {
+    displayBehaviourWhileLoading?: HighlightButtonDisplayBehaviourWhileLoading;
+    customBorderColor?: keyof NCoreUIKit.ProjectColorPalette | (string & {});
+    customColor?: keyof NCoreUIKit.ProjectColorPalette | (string & {});
+    spreadBehaviour?: HighlightButtonSpreadBehaviour;
+    radiuses: NCoreUIKit.ActivePalette["radiuses"];
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    colors: NCoreUIKit.ActivePalette["colors"];
+    currentSize: HighlightButtonMeasures;
+    currentType: HighlightButtonTypes;
+    iconDirection?: "left" | "right";
+    borders: NCoreUIKit.Borders;
+    isCustomPadding?: boolean;
+    type: HighlightButtonType;
+    icon?: NCoreUIKitIcon;
+    glassEffect?: number;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    title?: string;
+};
+
+export type HighlightButtonMeasuresKeys = {
+    paddingHorizontal: keyof NCoreUIKit.Spaces;
+    paddingVertical: keyof NCoreUIKit.Spaces;
+    fontSize: keyof NCoreUIKit.Typography;
+};
+
+export type HighlightButtonTypes = {
+    borderColor: keyof NCoreUIKit.BorderContentColors;
+    titleColor: keyof NCoreUIKit.TextContentColors;
+    iconColor: keyof NCoreUIKit.IconContentColors;
+    containerColor: keyof NCoreUIKit.LowColors;
+};
+
+export type HighlightButtonMeasures = {
+    fontSize: keyof NCoreUIKit.Typography;
+    paddingHorizontal: number;
+    paddingVertical: number;
+};
+
+export type HighlightButtonTypeConstantType = {
+    type: HighlightButtonType;
+};
+
+export type HighlightButtonSizeConstantType = {
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    size: HighlightButtonSize;
+};
+
+export type HighlightButtonType = "glass" | "primary" | "danger" | "warning" | "neutral" | "success" | "info";
+
+export type HighlightButtonDisplayBehaviourWhileLoading = "none" | "disabled";
+
+export type HighlightButtonSpreadBehaviour = "baseline" | "stretch" | "free";
+
+export type HighlightButtonSize = "small" | "medium" | "large";
+
+interface IHighlightButtonProps extends Omit<ButtonProps, "title" | "disabled"> {
+    displayBehaviourWhileLoading?: HighlightButtonDisplayBehaviourWhileLoading;
+    customBorderColor?: keyof NCoreUIKit.ProjectColorPalette | (string & {});
+    customIconColor?: keyof NCoreUIKit.ProjectColorPalette | (string & {});
+    customTextColor?: keyof NCoreUIKit.ProjectColorPalette | (string & {});
+    customColor?: keyof NCoreUIKit.ProjectColorPalette | (string & {});
+    titleStyle?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
+    customTheme?: {
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
+    };
+    style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    spreadBehaviour?: HighlightButtonSpreadBehaviour;
+    iconDirection?: "left" | "right";
+    renderLoading?: () => ReactNode;
+    size?: HighlightButtonSize;
+    type?: HighlightButtonType;
+    isCustomPadding?: boolean;
+    icon?: NCoreUIKitIcon;
+    glassEffect?: number;
+    isDisabled?: boolean;
+    onPress: () => void;
+    isLoading?: boolean;
+    title?: string;
+}
+export type {
+    IHighlightButtonProps as default
+};

src/components/index.ts

@@ -182,6 +182,10 @@ export {
     default as MainHeader
 } from "./mainHeader";
 
+export {
+    default as HighlightButton
+} from "./highlightButton";
+
 export type {
     EnterMarkdownTypes,
     CodeMarkdownTypes,

src/index.tsx

@@ -17,6 +17,7 @@ export {
 
 export {
     NotificationIndicator,
+    HighlightButton,
     PaletteSwitcher,
     MarkdownViewer,
     DateTimePicker,

src/types/index.ts

@@ -169,6 +169,11 @@ declare global {
 
         type DefaultPalette = typeof defaultThemeJSON.palettes[0];
 
+        type DefaultLowColors = typeof defaultThemeJSON.palettes[0]["themes"]["dark"]["system"]["low"];
+
+        interface LowColors extends DefaultLowColors {
+        }
+
         type ProjectData = DefaultPalette["themes"]["dark"]["project"];
         type DefaultProjectColors = ProjectData;
 

src/variants/themes/default.json

@@ -410,14 +410,19 @@
                             "content": "rgba(255,255,255,0.24)"
                         },
                         "low": {
-                            "error": "rgba(255,187,177,0.32)",
-                            "warning": "rgba(255,223,102,0.32)",
-                            "success": "rgba(179,250,188,0.32)",
-                            "info": "rgba(167,230,255,0.32)"
+                            "primary": "rgba(0,107,92,0.33)",
+                            "error": "rgba(255,187,177,0.33)",
+                            "warning": "rgba(255,223,102,0.33)",
+                            "success": "rgba(179,250,188,0.33)",
+                            "neutral": "rgba(196,199,198,0.33)",
+                            "info": "rgba(167,230,255,0.33)"
                         }
                     },
                     "content": {
                         "text": {
+                            "constrastHigh": "rgba(0,0,0,1)",
+                            "constrastMid": "rgba(15,13,14,0.64)",
+                            "constrastLow": "rgba(31,29,30,0.32)",
                             "high": "rgba(224,226,225,1)",
                             "mid": "rgba(255,255,255,0.64)",
                             "low": "rgba(255,255,255,0.32)",
@@ -444,6 +449,9 @@
                             "success": "rgba(179,250,188,1)",
                             "warning": "rgba(255,223,102,1)",
                             "info": "rgba(167,230,255,1)",
+                            "constrastHigh": "rgba(31,29,30,1)",
+                            "constrastMid": "rgba(0,0,0,0.64)",
+                            "constrastLow": "rgba(0,0,0,0.32)",
                             "low": "rgba(255,255,255,0.32)",
                             "mid": "rgba(255,255,255,0.64)",
                             "high": "rgba(224,226,225,1)",
@@ -602,14 +610,19 @@
                             "content": "rgba(0,0,0,0.24)"
                         },
                         "low": {
-                            "error": "rgba(186,16,16,0.32)",
-                            "warning": "rgba(176,108,0,0.32)",
-                            "success": "rgba(74,128,82,0.32)",
-                            "info": "rgba(37,123,167,0.32)"
+                            "primary": "rgba(101,250,222,0.33)",
+                            "error": "rgba(186,16,16,0.33)",
+                            "warning": "rgba(176,108,0,0.33)",
+                            "success": "rgba(74,128,82,0.33)",
+                            "neutral": "rgba(91,95,94,0.33)",
+                            "info": "rgba(37,123,167,0.33)"
                         }
                     },
                     "content": {
                         "text": {
+                            "constrastHigh": "rgba(255,255,255,1)",
+                            "constrastMid": "rgba(250,250,250,0.64)",
+                            "constrastLow": "rgba(245,245,245,0.32)",
                             "high": "rgba(25,28,27,1)",
                             "mid": "rgba(0,0,0,0.64)",
                             "low": "rgba(0,0,0,0.32)",
@@ -636,6 +649,9 @@
                             "success": "rgba(74,128,82,1)",
                             "warning": "rgba(176,108,0,1)",
                             "info": "rgba(37,123,167,1)",
+                            "constrastHigh": "rgba(230,227,228,1)",
+                            "constrastMid": "rgba(255,255,255,0.64)",
+                            "constrastLow": "rgba(255,255,255,0.32)",
                             "low": "rgba(0,0,0,0.32)",
                             "mid": "rgba(0,0,0,0.64)",
                             "high": "rgba(25,28,27,1)",
@@ -787,14 +803,19 @@
                         },
                         "disabled": { "content": "rgba(255,255,255,0.24)" },
                         "low": {
-                            "error": "rgba(255,160,160,0.32)",
-                            "warning": "rgba(255,220,140,0.32)",
-                            "success": "rgba(170,255,190,0.32)",
-                            "info": "rgba(170,230,255,0.32)"
+                            "primary": "rgba(140,110,255,0.33)",
+                            "error": "rgba(255,160,160,0.33)",
+                            "warning": "rgba(255,220,140,0.33)",
+                            "success": "rgba(170,255,190,0.33)",
+                            "neutral": "rgba(200,200,200,0.33)",
+                            "info": "rgba(170,230,255,0.33)"
                         }
                     },
                     "content": {
                         "text": {
+                            "constrastHigh": "rgba(0,0,0,1)",
+                            "constrastMid": "rgba(12,12,7,0.64)",
+                            "constrastLow": "rgba(25,25,15,0.32)",
                             "high": "rgba(230,230,240,1)",
                             "mid": "rgba(255,255,255,0.64)",
                             "low": "rgba(255,255,255,0.32)",
@@ -821,6 +842,9 @@
                             "success": "rgba(170,255,190,1)",
                             "warning": "rgba(255,220,140,1)",
                             "info": "rgba(170,230,255,1)",
+                            "constrastHigh": "rgba(25,25,15,1)",
+                            "constrastMid": "rgba(0,0,0,0.64)",
+                            "constrastLow": "rgba(0,0,0,0.32)",
                             "low": "rgba(255,255,255,0.32)",
                             "mid": "rgba(255,255,255,0.64)",
                             "high": "rgba(230,230,240,1)",
@@ -967,14 +991,19 @@
                         },
                         "disabled": { "content": "rgba(0,0,0,0.24)" },
                         "low": {
-                            "error": "rgba(140,0,20,0.32)",
-                            "warning": "rgba(120,80,0,0.32)",
-                            "success": "rgba(40,90,60,0.32)",
-                            "info": "rgba(30,90,140,0.32)"
+                            "primary": "rgba(140,110,255,0.33)",
+                            "error": "rgba(255,160,160,0.33)",
+                            "warning": "rgba(255,220,140,0.33)",
+                            "success": "rgba(170,255,190,0.33)",
+                            "neutral": "rgba(120,120,140,0.33)",
+                            "info": "rgba(170,230,255,0.33)"
                         }
                     },
                     "content": {
                         "text": {
+                            "constrastHigh": "rgba(255,255,255,1)",
+                            "constrastMid": "rgba(246,246,241,0.64)",
+                            "constrastLow": "rgba(237,237,227,0.32)",
                             "high": "rgba(18,18,28,1)",
                             "mid": "rgba(0,0,0,0.64)",
                             "low": "rgba(0,0,0,0.32)",
@@ -1001,6 +1030,9 @@
                             "success": "rgba(40,90,60,1)",
                             "warning": "rgba(120,80,0,1)",
                             "info": "rgba(30,90,140,1)",
+                            "constrastHigh": "rgba(237,237,227,1)",
+                            "constrastMid": "rgba(255,255,255,0.64)",
+                            "constrastLow": "rgba(255,255,255,0.32)",
                             "low": "rgba(0,0,0,0.32)",
                             "mid": "rgba(0,0,0,0.64)",
                             "high": "rgba(18,18,28,1)",
@@ -1152,14 +1184,19 @@
                         },
                         "disabled": { "content": "rgba(255,255,255,0.24)" },
                         "low": {
-                            "error": "rgba(255,140,140,0.32)",
-                            "warning": "rgba(255,200,120,0.32)",
-                            "success": "rgba(120,255,170,0.32)",
-                            "info": "rgba(120,200,255,0.32)"
+                            "primary": "rgba(255,60,60,0.33)",
+                            "error": "rgba(255,140,140,0.33)",
+                            "warning": "rgba(255,200,120,0.33)",
+                            "success": "rgba(120,255,170,0.33)",
+                            "neutral": "rgba(200,200,200,0.33)",
+                            "info": "rgba(120,200,255,0.33)"
                         }
                     },
                     "content": {
                         "text": {
+                            "constrastHigh": "rgba(0,0,0,1)",
+                            "constrastMid": "rgba(9,6,6,0.64)",
+                            "constrastLow": "rgba(18,12,12,0.32)",
                             "high": "rgba(255,240,240,1)",
                             "mid": "rgba(255,255,255,0.64)",
                             "low": "rgba(255,255,255,0.32)",
@@ -1186,6 +1223,9 @@
                             "success": "rgba(120,255,170,1)",
                             "warning": "rgba(255,200,120,1)",
                             "info": "rgba(120,200,255,1)",
+                            "constrastHigh": "rgba(18,12,12,1)",
+                            "constrastMid": "rgba(0,0,0,0.64)",
+                            "constrastLow": "rgba(0,0,0,0.32)",
                             "low": "rgba(255,255,255,0.32)",
                             "mid": "rgba(255,255,255,0.64)",
                             "high": "rgba(255,240,240,1)",
@@ -1332,14 +1372,19 @@
                         },
                         "disabled": { "content": "rgba(0,0,0,0.24)" },
                         "low": {
-                            "error": "rgba(140,0,20,0.32)",
-                            "warning": "rgba(120,80,0,0.32)",
-                            "success": "rgba(40,90,60,0.32)",
-                            "info": "rgba(30,90,140,0.32)"
+                            "primary": "rgba(255,60,60,0.33)",
+                            "error": "rgba(255,140,140,0.33)",
+                            "warning": "rgba(255,200,120,0.33)",
+                            "success": "rgba(120,255,170,0.33)",
+                            "neutral": "rgba(140,120,120,0.33)",
+                            "info": "rgba(120,200,255,0.33)"
                         }
                     },
                     "content": {
                         "text": {
+                            "constrastHigh": "rgba(255,255,255,1)",
+                            "constrastMid": "rgba(246,249,249,0.64)",
+                            "constrastLow": "rgba(237,243,243,0.32)",
                             "high": "rgba(18,12,12,1)",
                             "mid": "rgba(0,0,0,0.64)",
                             "low": "rgba(0,0,0,0.32)",
@@ -1366,6 +1411,9 @@
                             "success": "rgba(40,90,60,1)",
                             "warning": "rgba(120,80,0,1)",
                             "info": "rgba(30,90,140,1)",
+                            "constrastHigh": "rgba(237,243,243,1)",
+                            "constrastMid": "rgba(255,255,255,0.64)",
+                            "constrastLow": "rgba(255,255,255,0.32)",
                             "low": "rgba(0,0,0,0.32)",
                             "mid": "rgba(0,0,0,0.64)",
                             "high": "rgba(18,12,12,1)",