@situaction/traquiste-mobile 1.0.0-next.2

package/src/index.ts

@@ -0,0 +1,23 @@
+// Public API — re-export all components, types, and utilities from this file
+
+// Theme
+export { ThemeProvider, useTheme } from './context/ThemeContext'
+export { lightTokens } from './theme/tokens/light'
+export { darkTokens } from './theme/tokens/dark'
+export type {
+  ColorMode,
+  ColorSchemeTokens,
+  ColorTheme,
+  BackgroundTokens,
+  TextTokens,
+  BorderTokens,
+  ShadowTokens,
+  StatusTokens,
+  ButtonTokens,
+  InteractiveVariantTokens,
+  InteractiveStateTokens,
+} from './theme/type'
+
+// Components
+export { Button } from './components/Button'
+export type { ButtonProps, ButtonVariant, ButtonSize, ButtonContent } from './components/Button'

package/src/theme/index.ts

@@ -0,0 +1,20 @@
+// Provider + hook
+export { ThemeProvider, useTheme } from '../context/ThemeContext';
+
+// Base tokens (useful for consumer apps building their own theme)
+export { lightTokens } from './tokens/light';
+export { darkTokens } from './tokens/dark';
+
+// Types
+export type {
+  ColorTheme,
+  ColorSchemeTokens,
+  BackgroundTokens,
+  TextTokens,
+  BorderTokens,
+  ShadowTokens,
+  StatusTokens,
+  ButtonTokens,
+  InteractiveVariantTokens,
+  InteractiveStateTokens,
+} from './type';

package/src/theme/tokens/dark.ts

@@ -0,0 +1,160 @@
+/**
+ * Base dark tokens.
+ * These are the default dark values — themes override what they need.
+ * Tim: add new component tokens at the bottom when creating a new component.
+ */
+
+import type { ColorSchemeTokens } from '../type';
+
+export const darkTokens: ColorSchemeTokens = {
+  // -------------------------------------------------------------------------
+  // Globals
+  // -------------------------------------------------------------------------
+
+  background: {
+    primary: '#28242e',
+    secondary: '#2f2b37',
+    tertiary: '#3e3f4e',
+    overlay: '#0f0f0f99',
+    menu: '#2f2b37',
+  },
+
+  text: {
+    primary: '#ffffff',
+    secondary: '#d7d7e0',
+    tertiary: '#8b8da5',
+    disabled: '#ffffff4d',
+    onColor: '#ffffff',
+  },
+
+  border: {
+    default: '#ffffff33',
+    strong: '#ffffff4d',
+    disabled: '#ffffff1a',
+    window: '#ffffff33',
+  },
+
+  shadow: {
+    minimal: '#0f0f0f1a',
+    lowest: '#0f0f0f33',
+  },
+
+  // -------------------------------------------------------------------------
+  // Status
+  // -------------------------------------------------------------------------
+
+  error: {
+    default: '#ff6464',
+    light: '#4b0404',
+    dark: '#ff9d9d',
+  },
+
+  success: {
+    default: '#45c85a',
+    light: '#092a10',
+    dark: '#91e49e',
+  },
+
+  warning: {
+    default: '#eeb721',
+    light: '#3f1c09',
+    dark: '#f4cf50',
+  },
+
+  info: {
+    default: '#d7d7e0',
+    light: '#3e3f4e',
+    dark: '#f7f7f8',
+  },
+
+  // -------------------------------------------------------------------------
+  // Button
+  // -------------------------------------------------------------------------
+
+  button: {
+    primary: {
+      default: {
+        background: '#ffffff',
+        text: '#28242e',
+        icon: '#28242e',
+        border: 'transparent',
+      },
+      pressed: {
+        background: '#d1d1d1',
+        text: '#28242e',
+        icon: '#28242e',
+        border: 'transparent',
+      },
+      disabled: {
+        background: '#ffffff1a',
+        text: '#ffffff4d',
+        icon: '#ffffff4d',
+        border: 'transparent',
+      },
+    },
+    tertiary: {
+      default: {
+        background: 'transparent',
+        text: '#ffffff',
+        icon: '#ffffff',
+        border: '#ffffff33',
+      },
+      pressed: {
+        background: '#ffffff1a',
+        text: '#ffffff',
+        icon: '#ffffff',
+        border: '#ffffff33',
+      },
+      disabled: {
+        background: '#ffffff0d',
+        text: '#ffffff4d',
+        icon: '#ffffff4d',
+        border: '#ffffff1a',
+      },
+    },
+    ghost: {
+      default: {
+        background: 'transparent',
+        text: '#ffffff',
+        icon: '#ffffff',
+        border: 'transparent',
+      },
+      pressed: {
+        background: '#ffffff1a',
+        text: '#ffffff',
+        icon: '#ffffff',
+        border: 'transparent',
+      },
+      disabled: {
+        background: 'transparent',
+        text: '#ffffff4d',
+        icon: '#ffffff4d',
+        border: 'transparent',
+      },
+    },
+    destructive: {
+      default: {
+        background: '#ff4747',
+        text: '#ffffff',
+        icon: '#ffffff',
+        border: 'transparent',
+      },
+      pressed: {
+        background: '#c80d0d',
+        text: '#ffffff',
+        icon: '#ffffff',
+        border: 'transparent',
+      },
+      disabled: {
+        background: '#ffffff0d',
+        text: '#ffffff4d',
+        icon: '#ffffff4d',
+        border: 'transparent',
+      },
+    },
+  },
+
+  // -------------------------------------------------------------------------
+  // Add new component tokens below
+  // -------------------------------------------------------------------------
+};

package/src/theme/tokens/light.ts

@@ -0,0 +1,166 @@
+/**
+ * Base light tokens.
+ * These are the default light values — themes override what they need.
+ * Tim: add new component tokens at the bottom when creating a new component.
+ */
+
+import type { ColorSchemeTokens } from '../type';
+
+export const lightTokens: ColorSchemeTokens = {
+  // -------------------------------------------------------------------------
+  // Globals
+  // -------------------------------------------------------------------------
+
+  background: {
+    primary: '#ffffff',
+    secondary: '#f8f6f0',
+    tertiary: '#e8e4da',
+    overlay: '#0f0f0f80',
+    menu: '#f8f6f0',
+  },
+
+  text: {
+    primary: '#28242e',
+    secondary: '#47475d',
+    tertiary: '#6d6f8a',
+    disabled: '#0f0f0f99',
+    onColor: '#ffffff',
+  },
+
+  border: {
+    default: '#afafad80',
+    strong: '#afafadcc',
+    disabled: '#0f0f0f1a',
+    window: '#afafad80',
+  },
+
+  shadow: {
+    minimal: '#0f0f0f0d',
+    lowest: '#0f0f0f1a',
+  },
+
+  // -------------------------------------------------------------------------
+  // Status
+  // -------------------------------------------------------------------------
+
+  error: {
+    default: '#ff4747',
+    light: '#fff1f1',
+    dark: '#c80d0d',
+  },
+
+  success: {
+    default: '#33b449',
+    light: '#f1fcf3',
+    dark: '#20752f',
+  },
+
+  warning: {
+    default: '#de9f14',
+    light: '#fdfae9',
+    dark: '#99570f',
+  },
+
+  info: {
+    default: '#28242e',
+    light: '#f7f7f8',
+    dark: '#1a1720',
+  },
+
+  // -------------------------------------------------------------------------
+  // Button
+  // -------------------------------------------------------------------------
+
+  button: {
+    primary: {
+      default: {
+        background: '#28242e',
+        text: '#ffffff',
+        icon: '#ffffff',
+        border: 'transparent',
+      },
+      pressed: {
+        background: '#3e3f4e',
+        text: '#ffffff',
+        icon: '#ffffff',
+        border: 'transparent',
+      },
+      disabled: {
+        background: '#0f0f0f0d',
+        text: '#0f0f0f99',
+        icon: '#0f0f0f99',
+        border: 'transparent',
+      },
+    },
+    tertiary: {
+      default: {
+        background: 'transparent',
+        text: '#28242e',
+        icon: '#28242e',
+        border: '#afafad80',
+      },
+      pressed: {
+        background: '#d1c3a066',
+        text: '#28242e',
+        icon: '#28242e',
+        border: '#afafad80',
+      },
+      disabled: {
+        background: '#0f0f0f0d',
+        text: '#0f0f0f99',
+        icon: '#0f0f0f99',
+        border: '#0f0f0f1a',
+      },
+    },
+    ghost: {
+      default: {
+        background: 'transparent',
+        text: '#28242e',
+        icon: '#28242e',
+        border: 'transparent',
+      },
+      pressed: {
+        background: '#d1c3a066',
+        text: '#28242e',
+        icon: '#28242e',
+        border: 'transparent',
+      },
+      disabled: {
+        background: 'transparent',
+        text: '#0f0f0f66',
+        icon: '#0f0f0f66',
+        border: 'transparent',
+      },
+    },
+    destructive: {
+      default: {
+        background: '#ff4747',
+        text: '#ffffff',
+        icon: '#ffffff',
+        border: 'transparent',
+      },
+      pressed: {
+        background: '#c80d0d',
+        text: '#ffffff',
+        icon: '#ffffff',
+        border: 'transparent',
+      },
+      disabled: {
+        background: '#0f0f0f0d',
+        text: '#0f0f0f99',
+        icon: '#0f0f0f99',
+        border: 'transparent',
+      },
+    },
+  },
+
+  // -------------------------------------------------------------------------
+  // Add new component tokens below
+  // Example:
+  // checkbox: {
+  //   default: { background: '...', border: '...', icon: '...' },
+  //   checked: { background: '...', border: '...', icon: '...' },
+  //   disabled: { background: '...', border: '...', icon: '...' },
+  // },
+  // -------------------------------------------------------------------------
+};

package/src/theme/type.ts

@@ -0,0 +1,122 @@
+/**
+ * Color theme contract for Traq[UI]ste Mobile.
+ * Every theme must implement this interface.
+ * Add a new section here when Tim creates a new component.
+ */
+
+// ---------------------------------------------------------------------------
+// Color mode
+// ---------------------------------------------------------------------------
+
+export type ColorMode = 'light' | 'dark';
+
+// ---------------------------------------------------------------------------
+// Shared primitives
+// ---------------------------------------------------------------------------
+
+export interface InteractiveStateTokens {
+  /** Container background */
+  background: string;
+  /** Label / text color */
+  text: string;
+  /** Icon tint */
+  icon: string;
+  /** Border — use 'transparent' when no border */
+  border: string;
+}
+
+export interface InteractiveVariantTokens {
+  default: InteractiveStateTokens;
+  pressed: InteractiveStateTokens;
+  disabled: InteractiveStateTokens;
+}
+
+export interface StatusTokens {
+  /** Primary status color */
+  default: string;
+  /** Light tint — backgrounds */
+  light: string;
+  /** Dark variant — text on light bg */
+  dark: string;
+}
+
+// ---------------------------------------------------------------------------
+// Global tokens
+// ---------------------------------------------------------------------------
+
+export interface BackgroundTokens {
+  primary: string;
+  secondary: string;
+  tertiary: string;
+  overlay: string;
+  menu: string;
+}
+
+export interface TextTokens {
+  primary: string;
+  secondary: string;
+  tertiary: string;
+  disabled: string;
+  onColor: string;
+}
+
+export interface BorderTokens {
+  default: string;
+  strong: string;
+  disabled: string;
+  window: string;
+}
+
+export interface ShadowTokens {
+  minimal: string;
+  lowest: string;
+}
+
+// ---------------------------------------------------------------------------
+// Component tokens
+// Add a new interface below when Tim creates a new component
+// ---------------------------------------------------------------------------
+
+export interface ButtonTokens {
+  primary: InteractiveVariantTokens;
+  tertiary: InteractiveVariantTokens;
+  ghost: InteractiveVariantTokens;
+  destructive: InteractiveVariantTokens;
+}
+
+// export interface CheckboxTokens { ... }  ← next component goes here
+// export interface InputTokens { ... }
+// export interface TagTokens { ... }
+
+// ---------------------------------------------------------------------------
+// Full scheme (light or dark)
+// ---------------------------------------------------------------------------
+
+export interface ColorSchemeTokens {
+  // globals
+  background: BackgroundTokens;
+  text: TextTokens;
+  border: BorderTokens;
+  shadow: ShadowTokens;
+
+  // status
+  error: StatusTokens;
+  success: StatusTokens;
+  warning: StatusTokens;
+  info: StatusTokens;
+
+  // components — add new ones here when Tim creates them
+  button: ButtonTokens;
+  // checkbox: CheckboxTokens;
+  // input: InputTokens;
+  // tag: TagTokens;
+}
+
+// ---------------------------------------------------------------------------
+// Theme (light + dark)
+// ---------------------------------------------------------------------------
+
+export interface ColorTheme {
+  light: ColorSchemeTokens;
+  dark: ColorSchemeTokens;
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+// @generated by expo-module-scripts
+{
+  "extends": "expo-module-scripts/tsconfig.base",
+  "compilerOptions": {
+    "outDir": "./build"
+  },
+  "include": ["./src"],
+  "exclude": ["**/__mocks__/*", "**/__tests__/*", "**/__rsc_tests__/*"]
+}