rnnovaui 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rnnovaui",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "",
   "main": "src/index.js",
   "react-native": "src/index.js",

package/src/components/Button/UIButton.js

@@ -10,7 +10,7 @@ import {
 
 import { useUITheme } from "../../theme";
 
-const VARIANTS = {
+const BUTTON_VARIANTS = {
   solid: "solid",
   outline: "outline",
   ghost: "ghost",
@@ -19,65 +19,116 @@ const VARIANTS = {
   success: "success",
 };
 
-const SIZES = {
+const BUTTON_SIZES = {
   sm: "sm",
   md: "md",
   lg: "lg",
   xl: "xl",
 };
 
-function UIButtonComponent({
+const DEFAULT_COLORS = {
+  buttonPrimaryBackground: "#FF5A1F",
+
+  buttonPrimaryPressed: "#E94D17",
+
+  buttonPrimaryText: "#FFFFFF",
+
+  buttonOutlineBackground: "transparent",
+
+  buttonOutlineBorder: "#FF5A1F",
+
+  buttonOutlineText: "#FF5A1F",
+
+  buttonGhostBackground: "transparent",
+
+  buttonGhostText: "#FF5A1F",
+
+  buttonSoftBackground: "#FFF0EA",
+
+  buttonSoftText: "#FF5A1F",
+
+  buttonDangerBackground: "#DC2626",
+
+  buttonDangerPressed: "#B91C1C",
+
+  buttonDangerText: "#FFFFFF",
+
+  buttonSuccessBackground: "#16A34A",
+
+  buttonSuccessPressed: "#128238",
+
+  buttonSuccessText: "#FFFFFF",
+
+  buttonDisabledBackground: "#E5E5E5",
+
+  buttonDisabledText: "#A3A3A3",
+
+  buttonDisabledBorder: "#E5E5E5",
+
+  buttonRipple: "rgba(255,255,255,0.20)",
+};
+
+const UIButtonComponent = ({
   title,
+
   children,
 
   variant = "solid",
+
   size = "md",
 
   disabled = false,
+
   loading = false,
+
   fullWidth = false,
 
-  leftIcon,
-  rightIcon,
+  leftIcon = null,
+
+  rightIcon = null,
 
   onPress,
+
   onLongPress,
+
   onPressIn,
+
   onPressOut,
 
   style,
+
   contentStyle,
+
   textStyle,
 
   activeOpacity = 0.82,
 
   testID,
+
   accessibilityLabel,
+
   accessibilityHint,
 
   ...props
-}) {
-  const themeResult = useUITheme();
-
-  /*
-   * Support both possible provider shapes:
-   *
-   * themeResult.theme.colors
-   * themeResult.colors
-   */
-  const theme = themeResult?.theme || themeResult || {};
+}) => {
+  const { theme } = useUITheme();
 
-  const colors = theme.colors || {};
+  const colors = {
+    ...DEFAULT_COLORS,
+    ...(theme?.colors || {}),
+  };
 
-  const safeVariant = VARIANTS[variant] || VARIANTS.solid;
+  const safeVariant = BUTTON_VARIANTS[variant]
+    ? variant
+    : BUTTON_VARIANTS.solid;
 
-  const safeSize = SIZES[size] || SIZES.md;
+  const safeSize = BUTTON_SIZES[size] ? size : BUTTON_SIZES.md;
 
-  const buttonColors = getButtonColors(safeVariant, colors);
+  const isDisabled = disabled || loading;
 
-  const dimensions = getButtonDimensions(safeSize);
+  const variantStyle = getVariantStyle(safeVariant, colors, isDisabled);
 
-  const isDisabled = disabled || loading;
+  const sizeStyle = getSizeStyle(safeSize, theme);
 
   const handlePress = useCallback(
     (event) => {
@@ -85,7 +136,9 @@ function UIButtonComponent({
         return;
       }
 
-      onPress?.(event);
+      if (typeof onPress === "function") {
+        onPress(event);
+      }
     },
     [isDisabled, onPress],
   );
@@ -96,7 +149,9 @@ function UIButtonComponent({
         return;
       }
 
-      onLongPress?.(event);
+      if (typeof onLongPress === "function") {
+        onLongPress(event);
+      }
     },
     [isDisabled, onLongPress],
   );
@@ -107,7 +162,9 @@ function UIButtonComponent({
         return;
       }
 
-      onPressIn?.(event);
+      if (typeof onPressIn === "function") {
+        onPressIn(event);
+      }
     },
     [isDisabled, onPressIn],
   );
@@ -118,7 +175,9 @@ function UIButtonComponent({
         return;
       }
 
-      onPressOut?.(event);
+      if (typeof onPressOut === "function") {
+        onPressOut(event);
+      }
     },
     [isDisabled, onPressOut],
   );
@@ -141,197 +200,275 @@ function UIButtonComponent({
       accessibilityHint={accessibilityHint}
       accessibilityState={{
         disabled: isDisabled,
+
         busy: loading,
       }}
-      style={({ pressed }) => [
-        styles.button,
+      style={({ pressed }) => {
+        const backgroundColor = isDisabled
+          ? colors.buttonDisabledBackground
+          : pressed
+            ? variantStyle.pressedBackground
+            : variantStyle.backgroundColor;
 
-        {
-          height: dimensions.height,
+        const borderColor = isDisabled
+          ? colors.buttonDisabledBorder
+          : variantStyle.borderColor;
 
-          minHeight: dimensions.height,
+        const textColor = isDisabled
+          ? colors.buttonDisabledText
+          : variantStyle.textColor;
 
-          paddingHorizontal: dimensions.paddingHorizontal,
+        return [
+          styles.button,
 
-          borderRadius: dimensions.borderRadius,
+          {
+            height: sizeStyle.height,
 
-          backgroundColor: buttonColors.background,
+            minHeight: sizeStyle.height,
 
-          borderColor: buttonColors.border,
+            paddingHorizontal: sizeStyle.paddingHorizontal,
 
-          borderWidth: buttonColors.border ? 1 : 0,
+            borderRadius: sizeStyle.borderRadius,
 
-          width: fullWidth ? "100%" : undefined,
+            backgroundColor,
 
-          opacity: isDisabled ? 0.5 : pressed ? activeOpacity : 1,
-        },
+            borderColor,
 
-        style,
-      ]}
+            borderWidth: variantStyle.borderWidth,
+
+            width: fullWidth ? "100%" : undefined,
+
+            opacity: isDisabled ? 0.55 : 1,
+          },
+
+          style,
+        ];
+      }}
     >
       <View
         style={[
           styles.content,
 
           {
-            gap: dimensions.gap,
+            gap: sizeStyle.gap,
           },
 
           contentStyle,
         ]}
       >
         {loading ? (
-          <ActivityIndicator size="small" color={buttonColors.text} />
-        ) : leftIcon ? (
-          <View style={styles.icon}>{leftIcon}</View>
-        ) : null}
+          <ActivityIndicator size="small" color={variantStyle.textColor} />
+        ) : (
+          leftIcon && <View style={styles.icon}>{leftIcon}</View>
+        )}
 
         {hasChildren ? (
           <View style={styles.children}>{children}</View>
-        ) : title ? (
-          <Text
-            numberOfLines={1}
-            style={[
-              styles.text,
-
-              {
-                color: buttonColors.text,
-
-                fontSize: dimensions.fontSize,
-
-                lineHeight: dimensions.lineHeight,
-              },
-
-              textStyle,
-            ]}
-          >
-            {title}
-          </Text>
-        ) : null}
-
-        {!loading && rightIcon ? (
-          <View style={styles.icon}>{rightIcon}</View>
-        ) : null}
+        ) : (
+          title !== undefined &&
+          title !== null && (
+            <Text
+              numberOfLines={1}
+              style={[
+                styles.text,
+
+                {
+                  color: isDisabled
+                    ? colors.buttonDisabledText
+                    : variantStyle.textColor,
+
+                  fontSize: sizeStyle.fontSize,
+
+                  lineHeight: sizeStyle.lineHeight,
+                },
+
+                textStyle,
+              ]}
+            >
+              {title}
+            </Text>
+          )
+        )}
+
+        {!loading && rightIcon && <View style={styles.icon}>{rightIcon}</View>}
       </View>
     </Pressable>
   );
-}
-
-/**
- * IMPORTANT:
- *
- * Variant resolution is completely independent
- * from spacing/radius/typography.
- *
- * Therefore even if the theme is incomplete,
- * variants still work.
- */
-function getButtonColors(variant, colors) {
-  const primary = colors.primary || "#FF5A1F";
-
-  const primarySoft = colors.primarySoft || "#FFF0EA";
+};
 
-  const success = colors.success || "#16A34A";
+function getVariantStyle(variant, colors, disabled) {
+  if (disabled) {
+    return {
+      backgroundColor: colors.buttonDisabledBackground,
 
-  const danger = colors.danger || "#DC2626";
+      pressedBackground: colors.buttonDisabledBackground,
 
-  const text = colors.text || "#111111";
+      borderColor: colors.buttonDisabledBorder,
 
-  const onPrimary = colors.onPrimary || "#FFFFFF";
+      borderWidth: 1,
 
-  const border = colors.border || "#E5E5E5";
+      textColor: colors.buttonDisabledText,
+    };
+  }
 
   switch (variant) {
-    case VARIANTS.outline:
+    case BUTTON_VARIANTS.outline:
       return {
-        background: "transparent",
-        border: primary,
-        text: primary,
+        backgroundColor: colors.buttonOutlineBackground,
+
+        pressedBackground: colors.buttonSoftBackground,
+
+        borderColor: colors.buttonOutlineBorder,
+
+        borderWidth: 1,
+
+        textColor: colors.buttonOutlineText,
       };
 
-    case VARIANTS.ghost:
+    case BUTTON_VARIANTS.ghost:
       return {
-        background: "transparent",
-        border: null,
-        text: primary,
+        backgroundColor: colors.buttonGhostBackground,
+
+        pressedBackground: colors.buttonSoftBackground,
+
+        borderColor: colors.transparent,
+
+        borderWidth: 0,
+
+        textColor: colors.buttonGhostText,
       };
 
-    case VARIANTS.soft:
+    case BUTTON_VARIANTS.soft:
       return {
-        background: primarySoft,
-        border: null,
-        text: primary,
+        backgroundColor: colors.buttonSoftBackground,
+
+        pressedBackground: colors.primaryMuted || colors.buttonSoftBackground,
+
+        borderColor: colors.buttonSoftBackground,
+
+        borderWidth: 1,
+
+        textColor: colors.buttonSoftText,
       };
 
-    case VARIANTS.danger:
+    case BUTTON_VARIANTS.danger:
       return {
-        background: danger,
-        border: danger,
-        text: onPrimary,
+        backgroundColor: colors.buttonDangerBackground,
+
+        pressedBackground: colors.buttonDangerPressed,
+
+        borderColor: colors.buttonDangerBackground,
+
+        borderWidth: 1,
+
+        textColor: colors.buttonDangerText,
       };
 
-    case VARIANTS.success:
+    case BUTTON_VARIANTS.success:
       return {
-        background: success,
-        border: success,
-        text: onPrimary,
+        backgroundColor: colors.buttonSuccessBackground,
+
+        pressedBackground: colors.buttonSuccessPressed,
+
+        borderColor: colors.buttonSuccessBackground,
+
+        borderWidth: 1,
+
+        textColor: colors.buttonSuccessText,
       };
 
-    case VARIANTS.solid:
+    case BUTTON_VARIANTS.solid:
     default:
       return {
-        background: primary,
-        border: primary,
-        text: onPrimary,
+        backgroundColor: colors.buttonPrimaryBackground,
+
+        pressedBackground: colors.buttonPrimaryPressed,
+
+        borderColor: colors.buttonPrimaryBackground,
+
+        borderWidth: 1,
+
+        textColor: colors.buttonPrimaryText,
       };
   }
 }
 
-/**
- * Sizes intentionally use fixed fallback
- * values so the button cannot break when
- * theme.sizes is missing.
- */
-function getButtonDimensions(size) {
+function getSizeStyle(size, theme) {
+  const buttonSizes = theme?.sizes?.button || {};
+
+  const themeRadius = theme?.radius?.button;
+
+  const buttonRadius = typeof themeRadius === "number" ? themeRadius : 12;
+
+  const spacing = theme?.spacing || {};
+
+  const spacingSM = typeof spacing.sm === "number" ? spacing.sm : 8;
+
+  const spacingMD = typeof spacing.md === "number" ? spacing.md : 16;
+
+  const spacingLG = typeof spacing.lg === "number" ? spacing.lg : 20;
+
+  const spacingXL = typeof spacing.xl === "number" ? spacing.xl : 24;
+
   switch (size) {
-    case SIZES.sm:
+    case BUTTON_SIZES.sm:
       return {
-        height: 36,
-        paddingHorizontal: 14,
-        gap: 6,
-        borderRadius: 10,
+        height: buttonSizes.sm ?? 36,
+
+        paddingHorizontal: spacingMD,
+
+        gap: spacingSM,
+
+        borderRadius: buttonRadius,
+
         fontSize: 13,
+
         lineHeight: 18,
       };
 
-    case SIZES.lg:
+    case BUTTON_SIZES.lg:
       return {
-        height: 52,
-        paddingHorizontal: 22,
-        gap: 8,
-        borderRadius: 14,
+        height: buttonSizes.lg ?? 52,
+
+        paddingHorizontal: spacingLG,
+
+        gap: spacingSM,
+
+        borderRadius: buttonRadius,
+
         fontSize: 16,
+
         lineHeight: 22,
       };
 
-    case SIZES.xl:
+    case BUTTON_SIZES.xl:
       return {
-        height: 60,
-        paddingHorizontal: 26,
-        gap: 8,
-        borderRadius: 16,
+        height: buttonSizes.xl ?? 60,
+
+        paddingHorizontal: spacingXL,
+
+        gap: spacingSM,
+
+        borderRadius: buttonRadius,
+
         fontSize: 17,
+
         lineHeight: 24,
       };
 
-    case SIZES.md:
+    case BUTTON_SIZES.md:
     default:
       return {
-        height: 44,
-        paddingHorizontal: 18,
-        gap: 8,
-        borderRadius: 12,
+        height: buttonSizes.md ?? 44,
+
+        paddingHorizontal: spacingLG,
+
+        gap: spacingSM,
+
+        borderRadius: buttonRadius,
+
         fontSize: 14,
+
         lineHeight: 20,
       };
   }
@@ -340,34 +477,47 @@ function getButtonDimensions(size) {
 const styles = StyleSheet.create({
   button: {
     flexShrink: 0,
+
     alignItems: "center",
+
     justifyContent: "center",
+
     overflow: "hidden",
   },
 
   content: {
     flexDirection: "row",
+
     alignItems: "center",
+
     justifyContent: "center",
+
     flexShrink: 1,
   },
 
   children: {
     flexShrink: 1,
+
     alignItems: "center",
+
     justifyContent: "center",
   },
 
   icon: {
     alignItems: "center",
+
     justifyContent: "center",
+
     flexShrink: 0,
   },
 
   text: {
     flexShrink: 1,
+
     fontWeight: "600",
+
     textAlign: "center",
+
     includeFontPadding: false,
   },
 });
@@ -376,6 +526,4 @@ export const UIButton = memo(UIButtonComponent);
 
 UIButton.displayName = "UIButton";
 
-export const UIButtonVariants = VARIANTS;
-
-export const UIButtonSizes = SIZES;
+export { BUTTON_VARIANTS as UIButtonVariants, BUTTON_SIZES as UIButtonSizes };

package/src/theme/UIProvider.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo } from "react";
+import React, { createContext, useCallback, useContext, useMemo } from "react";
 
 import { useColorScheme } from "react-native";
 
@@ -21,45 +21,106 @@ import { breakpoints } from "./breakpoints";
 const UIContext = createContext(null);
 
 function createTheme(mode, overrides) {
-  const colors = mode === "dark" ? darkColors : lightColors;
+  const baseColors = mode === "dark" ? darkColors : lightColors;
 
   return {
     mode,
 
     colors: {
-      ...colors,
-      ...overrides?.colors,
+      ...baseColors,
+
+      ...(overrides?.colors || {}),
+    },
+
+    spacing: {
+      ...spacing,
+
+      ...(overrides?.spacing || {}),
     },
 
-    spacing,
-    radius,
-    typography,
-    sizes,
-    shadows,
-    animation,
-    breakpoints,
+    radius: {
+      ...radius,
+
+      ...(overrides?.radius || {}),
+    },
+
+    typography: {
+      ...typography,
+
+      ...(overrides?.typography || {}),
+    },
+
+    sizes: {
+      ...sizes,
+
+      ...(overrides?.sizes || {}),
+    },
+
+    shadows: {
+      ...shadows,
+
+      ...(overrides?.shadows || {}),
+    },
+
+    animation: {
+      ...animation,
+
+      ...(overrides?.animation || {}),
+    },
+
+    breakpoints: {
+      ...breakpoints,
+
+      ...(overrides?.breakpoints || {}),
+    },
   };
 }
 
-export function UIProvider({ children, mode = "system", onModeChange, theme }) {
+export function UIProvider({
+  children,
+
+  mode = "system",
+
+  onModeChange,
+
+  theme,
+}) {
   const systemScheme = useColorScheme();
 
   const resolvedMode =
-    mode === "system" ? (systemScheme === "dark" ? "dark" : "light") : mode;
-
-  const setMode = (nextMode) => {
-    if (nextMode !== "light" && nextMode !== "dark" && nextMode !== "system") {
-      return;
-    }
+    mode === "system"
+      ? systemScheme === "dark"
+        ? "dark"
+        : "light"
+      : mode === "dark"
+        ? "dark"
+        : "light";
+
+  const setMode = useCallback(
+    (nextMode) => {
+      if (
+        nextMode !== "light" &&
+        nextMode !== "dark" &&
+        nextMode !== "system"
+      ) {
+        return;
+      }
+
+      if (typeof onModeChange === "function") {
+        onModeChange(nextMode);
+      }
+    },
+    [onModeChange],
+  );
 
-    if (onModeChange) {
-      onModeChange(nextMode);
-    }
-  };
+  const resolvedTheme = useMemo(
+    () => createTheme(resolvedMode, theme),
+    [resolvedMode, theme],
+  );
 
   const contextValue = useMemo(
     () => ({
-      theme: createTheme(resolvedMode, theme),
+      theme: resolvedTheme,
 
       mode: resolvedMode,
 
@@ -67,7 +128,7 @@ export function UIProvider({ children, mode = "system", onModeChange, theme }) {
 
       setMode,
     }),
-    [resolvedMode, mode, theme, onModeChange],
+    [resolvedTheme, resolvedMode, mode, setMode],
   );
 
   return (

package/src/theme/colors.js

@@ -1,99 +1,405 @@
 export const lightColors = {
+  // --------------------------------------------------
+  // BASE
+  // --------------------------------------------------
+
   transparent: "transparent",
 
+  // --------------------------------------------------
+  // BRAND
+  // --------------------------------------------------
+
   primary: "#FF5A1F",
   primaryPressed: "#E94D17",
+  primaryHover: "#F4511E",
   primarySoft: "#FFF0EA",
+  primaryMuted: "#FFE1D5",
+
   onPrimary: "#FFFFFF",
 
+  // --------------------------------------------------
+  // SECONDARY
+  // --------------------------------------------------
+
   secondary: "#7CFF32",
+  secondaryPressed: "#68E51F",
   secondarySoft: "#F0FFE7",
+  secondaryMuted: "#DFFFCC",
+
   onSecondary: "#111111",
 
+  // --------------------------------------------------
+  // BACKGROUNDS
+  // --------------------------------------------------
+
   background: "#FFFFFF",
+
   surface: "#F8F8F8",
+
   surfaceSecondary: "#F1F1F1",
+
+  surfaceTertiary: "#EAEAEA",
+
   card: "#FFFFFF",
 
+  cardElevated: "#FFFFFF",
+
+  // --------------------------------------------------
+  // TEXT
+  // --------------------------------------------------
+
   text: "#111111",
+
   textSecondary: "#525252",
+
   textMuted: "#737373",
+
   textDisabled: "#A3A3A3",
+
   textInverse: "#FFFFFF",
 
+  // --------------------------------------------------
+  // BORDER
+  // --------------------------------------------------
+
   border: "#E5E5E5",
+
   borderStrong: "#D4D4D4",
+
+  borderSubtle: "#F0F0F0",
+
   divider: "#EEEEEE",
 
+  // --------------------------------------------------
+  // INPUT
+  // --------------------------------------------------
+
   input: "#F7F7F7",
+
   inputFocused: "#FFFFFF",
+
   inputDisabled: "#EEEEEE",
 
+  inputBorder: "#E1E1E1",
+
+  inputBorderFocused: "#FF5A1F",
+
+  // --------------------------------------------------
+  // SUCCESS
+  // --------------------------------------------------
+
   success: "#16A34A",
+
+  successPressed: "#128238",
+
   successSoft: "#EAF8EF",
 
+  successMuted: "#D1F2DC",
+
+  onSuccess: "#FFFFFF",
+
+  // --------------------------------------------------
+  // WARNING
+  // --------------------------------------------------
+
   warning: "#D97706",
+
+  warningPressed: "#B85F00",
+
   warningSoft: "#FFF7E6",
 
+  warningMuted: "#FDECC8",
+
+  onWarning: "#FFFFFF",
+
+  // --------------------------------------------------
+  // DANGER
+  // --------------------------------------------------
+
   danger: "#DC2626",
+
+  dangerPressed: "#B91C1C",
+
   dangerSoft: "#FDECEC",
 
+  dangerMuted: "#F8CACA",
+
+  onDanger: "#FFFFFF",
+
+  // --------------------------------------------------
+  // INFO
+  // --------------------------------------------------
+
   info: "#2563EB",
+
+  infoPressed: "#1D4ED8",
+
   infoSoft: "#EBF2FF",
 
-  overlay: "rgba(0,0,0,0.45)",
-  backdrop: "rgba(0,0,0,0.55)",
+  infoMuted: "#D9E6FF",
+
+  onInfo: "#FFFFFF",
+
+  // --------------------------------------------------
+  // OVERLAYS
+  // --------------------------------------------------
+
+  overlay: "rgba(0, 0, 0, 0.45)",
+
+  backdrop: "rgba(0, 0, 0, 0.55)",
+
+  // --------------------------------------------------
+  // SKELETON
+  // --------------------------------------------------
 
   skeleton: "#E5E5E5",
+
   skeletonHighlight: "#F5F5F5",
+
+  // --------------------------------------------------
+  // BUTTON
+  // --------------------------------------------------
+
+  buttonPrimaryBackground: "#FF5A1F",
+
+  buttonPrimaryPressed: "#E94D17",
+
+  buttonPrimaryText: "#FFFFFF",
+
+  buttonOutlineBackground: "transparent",
+
+  buttonOutlineBorder: "#FF5A1F",
+
+  buttonOutlineText: "#FF5A1F",
+
+  buttonGhostBackground: "transparent",
+
+  buttonGhostText: "#FF5A1F",
+
+  buttonSoftBackground: "#FFF0EA",
+
+  buttonSoftText: "#FF5A1F",
+
+  buttonDangerBackground: "#DC2626",
+
+  buttonDangerPressed: "#B91C1C",
+
+  buttonDangerText: "#FFFFFF",
+
+  buttonSuccessBackground: "#16A34A",
+
+  buttonSuccessPressed: "#128238",
+
+  buttonSuccessText: "#FFFFFF",
+
+  buttonDisabledBackground: "#E5E5E5",
+
+  buttonDisabledText: "#A3A3A3",
+
+  buttonDisabledBorder: "#E5E5E5",
+
+  buttonRipple: "rgba(255, 255, 255, 0.20)",
 };
 
 export const darkColors = {
+  // --------------------------------------------------
+  // BASE
+  // --------------------------------------------------
+
   transparent: "transparent",
 
+  // --------------------------------------------------
+  // BRAND
+  // --------------------------------------------------
+
   primary: "#FF7040",
   primaryPressed: "#FF5A1F",
+  primaryHover: "#FF8158",
   primarySoft: "#3A1C11",
+  primaryMuted: "#542719",
+
   onPrimary: "#FFFFFF",
 
+  // --------------------------------------------------
+  // SECONDARY
+  // --------------------------------------------------
+
   secondary: "#7CFF32",
+  secondaryPressed: "#68E51F",
   secondarySoft: "#1B3010",
+  secondaryMuted: "#29451B",
+
   onSecondary: "#111111",
 
+  // --------------------------------------------------
+  // BACKGROUNDS
+  // --------------------------------------------------
+
   background: "#0B0B0B",
+
   surface: "#151515",
+
   surfaceSecondary: "#1D1D1D",
+
+  surfaceTertiary: "#252525",
+
   card: "#181818",
 
+  cardElevated: "#202020",
+
+  // --------------------------------------------------
+  // TEXT
+  // --------------------------------------------------
+
   text: "#F5F5F5",
+
   textSecondary: "#D4D4D4",
+
   textMuted: "#A3A3A3",
+
   textDisabled: "#666666",
+
   textInverse: "#111111",
 
+  // --------------------------------------------------
+  // BORDER
+  // --------------------------------------------------
+
   border: "#292929",
+
   borderStrong: "#3A3A3A",
+
+  borderSubtle: "#202020",
+
   divider: "#252525",
 
+  // --------------------------------------------------
+  // INPUT
+  // --------------------------------------------------
+
   input: "#1C1C1C",
+
   inputFocused: "#202020",
+
   inputDisabled: "#242424",
 
+  inputBorder: "#303030",
+
+  inputBorderFocused: "#FF7040",
+
+  // --------------------------------------------------
+  // SUCCESS
+  // --------------------------------------------------
+
   success: "#4ADE80",
+
+  successPressed: "#22C55E",
+
   successSoft: "#12351F",
 
+  successMuted: "#1C4829",
+
+  onSuccess: "#071A0D",
+
+  // --------------------------------------------------
+  // WARNING
+  // --------------------------------------------------
+
   warning: "#FBBF24",
+
+  warningPressed: "#F59E0B",
+
   warningSoft: "#382B0B",
 
+  warningMuted: "#4A380F",
+
+  onWarning: "#111111",
+
+  // --------------------------------------------------
+  // DANGER
+  // --------------------------------------------------
+
   danger: "#F87171",
+
+  dangerPressed: "#EF4444",
+
   dangerSoft: "#3B1616",
 
+  dangerMuted: "#511E1E",
+
+  onDanger: "#FFFFFF",
+
+  // --------------------------------------------------
+  // INFO
+  // --------------------------------------------------
+
   info: "#60A5FA",
+
+  infoPressed: "#3B82F6",
+
   infoSoft: "#132A46",
 
-  overlay: "rgba(0,0,0,0.60)",
-  backdrop: "rgba(0,0,0,0.72)",
+  infoMuted: "#1C3554",
+
+  onInfo: "#FFFFFF",
+
+  // --------------------------------------------------
+  // OVERLAYS
+  // --------------------------------------------------
+
+  overlay: "rgba(0, 0, 0, 0.60)",
+
+  backdrop: "rgba(0, 0, 0, 0.72)",
+
+  // --------------------------------------------------
+  // SKELETON
+  // --------------------------------------------------
 
   skeleton: "#292929",
+
   skeletonHighlight: "#3A3A3A",
+
+  // --------------------------------------------------
+  // BUTTON
+  // --------------------------------------------------
+
+  buttonPrimaryBackground: "#FF7040",
+
+  buttonPrimaryPressed: "#FF5A1F",
+
+  buttonPrimaryText: "#FFFFFF",
+
+  buttonOutlineBackground: "transparent",
+
+  buttonOutlineBorder: "#FF7040",
+
+  buttonOutlineText: "#FF7040",
+
+  buttonGhostBackground: "transparent",
+
+  buttonGhostText: "#FF7040",
+
+  buttonSoftBackground: "#3A1C11",
+
+  buttonSoftText: "#FF7040",
+
+  buttonDangerBackground: "#F87171",
+
+  buttonDangerPressed: "#EF4444",
+
+  buttonDangerText: "#FFFFFF",
+
+  buttonSuccessBackground: "#4ADE80",
+
+  buttonSuccessPressed: "#22C55E",
+
+  buttonSuccessText: "#071A0D",
+
+  buttonDisabledBackground: "#292929",
+
+  buttonDisabledText: "#666666",
+
+  buttonDisabledBorder: "#292929",
+
+  buttonRipple: "rgba(255, 255, 255, 0.16)",
 };