@crystin001/theme-settings-lib 1.0.0

package/dist/theme.js

@@ -0,0 +1,447 @@
+"use strict";
+/**
+ * Theme system with theme families that have light and dark variants
+ * Each theme family has both a light and dark mode
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Fonts = exports.Colors = exports.Themes = void 0;
+const react_native_1 = require("react-native");
+exports.Themes = {
+    // System theme (uses device preference)
+    'system-light': {
+        text: '#11181C',
+        background: '#FFFFFF',
+        tint: '#0a7ea4',
+        icon: '#687076',
+        tabIconDefault: '#687076',
+        tabIconSelected: '#0a7ea4',
+        border: '#E1E4E8',
+        card: '#F6F8FA',
+        cardText: '#24292E',
+        button: '#0a7ea4',
+        buttonText: '#FFFFFF',
+        buttonSecondary: '#F1F3F5',
+        buttonSecondaryText: '#11181C',
+        input: '#FFFFFF',
+        inputText: '#11181C',
+        inputBorder: '#D1D5DB',
+        success: '#28A745',
+        warning: '#FFC107',
+        error: '#DC3545',
+        info: '#17A2B8',
+        primary: '#0a7ea4',
+        secondary: '#6C757D',
+        muted: '#6C757D',
+    },
+    'system-dark': {
+        text: '#ECEDEE',
+        background: '#151718',
+        tint: '#FFFFFF',
+        icon: '#9BA1A6',
+        tabIconDefault: '#9BA1A6',
+        tabIconSelected: '#FFFFFF',
+        border: '#30363D',
+        card: '#21262D',
+        cardText: '#ECEDEE',
+        button: '#238636',
+        buttonText: '#FFFFFF',
+        buttonSecondary: '#30363D',
+        buttonSecondaryText: '#ECEDEE',
+        input: '#21262D',
+        inputText: '#ECEDEE',
+        inputBorder: '#30363D',
+        success: '#3FB950',
+        warning: '#D29922',
+        error: '#F85149',
+        info: '#58A6FF',
+        primary: '#238636',
+        secondary: '#8B949E',
+        muted: '#8B949E',
+    },
+    // Neon Surf theme
+    'neon-surf-light': {
+        text: '#0A0E27',
+        background: '#E6F7FF',
+        tint: '#FF00FF',
+        icon: '#00F5FF',
+        tabIconDefault: '#00F5FF',
+        tabIconSelected: '#FF00FF',
+        border: '#00F5FF',
+        card: '#D4EDFF',
+        cardText: '#0A0E27',
+        button: '#FF00FF',
+        buttonText: '#1A0A3D',
+        buttonSecondary: '#D4EDFF',
+        buttonSecondaryText: '#0A0E27',
+        input: '#FFFFFF',
+        inputText: '#0A0E27',
+        inputBorder: '#00F5FF',
+        success: '#00FF88',
+        warning: '#FF8C00',
+        error: '#FF006E',
+        info: '#00F5FF',
+        primary: '#FF00FF',
+        secondary: '#FFD700',
+        muted: '#00A8CC',
+    },
+    'neon-surf-dark': {
+        text: '#FFFFFF',
+        background: '#0A0E27',
+        tint: '#FF00FF',
+        icon: '#00F5FF',
+        tabIconDefault: '#00F5FF',
+        tabIconSelected: '#FF00FF',
+        border: '#00F5FF',
+        card: '#1A1F3A',
+        cardText: '#FFFFFF',
+        button: '#FF00FF',
+        buttonText: '#1A0A3D',
+        buttonSecondary: '#1A1F3A',
+        buttonSecondaryText: '#FFD700',
+        input: '#1A1F3A',
+        inputText: '#FFFFFF',
+        inputBorder: '#00F5FF',
+        success: '#00FF88',
+        warning: '#FF8C00',
+        error: '#FF006E',
+        info: '#00F5FF',
+        primary: '#FF00FF',
+        secondary: '#FFD700',
+        muted: '#00A8CC',
+    },
+    // Pink & Purple theme
+    'pink-purple-light': {
+        text: '#2D1B3D',
+        background: '#F5E6FF',
+        tint: '#B84DCC',
+        icon: '#8B5FBF',
+        tabIconDefault: '#8B5FBF',
+        tabIconSelected: '#B84DCC',
+        border: '#D4A5E8',
+        card: '#E8D4F5',
+        cardText: '#2D1B3D',
+        button: '#B84DCC',
+        buttonText: '#FFFFFF',
+        buttonSecondary: '#E8D4F5',
+        buttonSecondaryText: '#2D1B3D',
+        input: '#FFFFFF',
+        inputText: '#2D1B3D',
+        inputBorder: '#D4A5E8',
+        success: '#C77DFF',
+        warning: '#FF6B9D',
+        error: '#E63946',
+        info: '#9D4EDD',
+        primary: '#B84DCC',
+        secondary: '#8B5FBF',
+        muted: '#A78BBF',
+    },
+    'pink-purple-dark': {
+        text: '#F5E6FF',
+        background: '#1A0F2E',
+        tint: '#D973F5',
+        icon: '#B84DCC',
+        tabIconDefault: '#B84DCC',
+        tabIconSelected: '#D973F5',
+        border: '#6B3D8B',
+        card: '#2D1B3D',
+        cardText: '#F5E6FF',
+        button: '#D973F5',
+        buttonText: '#1A0F2E',
+        buttonSecondary: '#2D1B3D',
+        buttonSecondaryText: '#F5E6FF',
+        input: '#2D1B3D',
+        inputText: '#F5E6FF',
+        inputBorder: '#6B3D8B',
+        success: '#E6A3FF',
+        warning: '#FF8BB3',
+        error: '#FF6B7A',
+        info: '#C77DFF',
+        primary: '#D973F5',
+        secondary: '#B84DCC',
+        muted: '#8B5FBF',
+    },
+    // Pastel theme
+    'pastel-light': {
+        text: '#4A5568',
+        background: '#FFF5F7',
+        tint: '#FFB3D9',
+        icon: '#A8A8A8',
+        tabIconDefault: '#A8A8A8',
+        tabIconSelected: '#FFB3D9',
+        border: '#FFE5F0',
+        card: '#FFF9FB',
+        cardText: '#4A5568',
+        button: '#FFB3D9',
+        buttonText: '#FFFFFF',
+        buttonSecondary: '#FFE5F0',
+        buttonSecondaryText: '#4A5568',
+        input: '#FFFFFF',
+        inputText: '#4A5568',
+        inputBorder: '#FFE5F0',
+        success: '#B5E5CF',
+        warning: '#FFE5B4',
+        error: '#FFB3BA',
+        info: '#B3D9FF',
+        primary: '#FFB3D9',
+        secondary: '#D4B3FF',
+        muted: '#C4C4C4',
+    },
+    'pastel-dark': {
+        text: '#E8E8E8',
+        background: '#2A1F2E',
+        tint: '#FFB3D9',
+        icon: '#B8B8B8',
+        tabIconDefault: '#B8B8B8',
+        tabIconSelected: '#FFB3D9',
+        border: '#4A3A4A',
+        card: '#3A2F3A',
+        cardText: '#E8E8E8',
+        button: '#FFB3D9',
+        buttonText: '#2A1F2E',
+        buttonSecondary: '#3A2F3A',
+        buttonSecondaryText: '#E8E8E8',
+        input: '#3A2F3A',
+        inputText: '#E8E8E8',
+        inputBorder: '#4A3A4A',
+        success: '#B5E5CF',
+        warning: '#FFE5B4',
+        error: '#FFB3BA',
+        info: '#B3D9FF',
+        primary: '#FFB3D9',
+        secondary: '#D4B3FF',
+        muted: '#A8A8A8',
+    },
+    // GitHub theme
+    'github-light': {
+        text: '#24292F',
+        background: '#FFFFFF',
+        tint: '#0969DA',
+        icon: '#656D76',
+        tabIconDefault: '#656D76',
+        tabIconSelected: '#0969DA',
+        border: '#D1D9E0',
+        card: '#F6F8FA',
+        cardText: '#24292F',
+        button: '#0969DA',
+        buttonText: '#FFFFFF',
+        buttonSecondary: '#F3F4F6',
+        buttonSecondaryText: '#24292F',
+        input: '#FFFFFF',
+        inputText: '#24292F',
+        inputBorder: '#D1D9E0',
+        success: '#1A7F37',
+        warning: '#9A6700',
+        error: '#CF222E',
+        info: '#0969DA',
+        primary: '#0969DA',
+        secondary: '#656D76',
+        muted: '#656D76',
+    },
+    'github-dark': {
+        text: '#E6EDF3',
+        background: '#0D1117',
+        tint: '#58A6FF',
+        icon: '#7D8590',
+        tabIconDefault: '#7D8590',
+        tabIconSelected: '#58A6FF',
+        border: '#30363D',
+        card: '#161B22',
+        cardText: '#E6EDF3',
+        button: '#238636',
+        buttonText: '#FFFFFF',
+        buttonSecondary: '#21262D',
+        buttonSecondaryText: '#E6EDF3',
+        input: '#161B22',
+        inputText: '#E6EDF3',
+        inputBorder: '#30363D',
+        success: '#3FB950',
+        warning: '#D29922',
+        error: '#F85149',
+        info: '#58A6FF',
+        primary: '#238636',
+        secondary: '#7D8590',
+        muted: '#7D8590',
+    },
+    // High Contrast theme
+    'high-contrast-light': {
+        text: '#000000',
+        background: '#FFFFFF',
+        tint: '#0000FF',
+        icon: '#000000',
+        tabIconDefault: '#000000',
+        tabIconSelected: '#0000FF',
+        border: '#000000',
+        card: '#F0F0F0',
+        cardText: '#000000',
+        button: '#0000FF',
+        buttonText: '#FFFFFF',
+        buttonSecondary: '#E0E0E0',
+        buttonSecondaryText: '#000000',
+        input: '#FFFFFF',
+        inputText: '#000000',
+        inputBorder: '#000000',
+        success: '#008000',
+        warning: '#FF8C00',
+        error: '#FF0000',
+        info: '#0000FF',
+        primary: '#0000FF',
+        secondary: '#000000',
+        muted: '#666666',
+    },
+    'high-contrast-dark': {
+        text: '#FFFFFF',
+        background: '#000000',
+        tint: '#FFFF00',
+        icon: '#FFFFFF',
+        tabIconDefault: '#FFFFFF',
+        tabIconSelected: '#FFFF00',
+        border: '#FFFFFF',
+        card: '#1A1A1A',
+        cardText: '#FFFFFF',
+        button: '#FFFF00',
+        buttonText: '#000000',
+        buttonSecondary: '#333333',
+        buttonSecondaryText: '#FFFFFF',
+        input: '#1A1A1A',
+        inputText: '#FFFFFF',
+        inputBorder: '#FFFFFF',
+        success: '#00FF00',
+        warning: '#FFFF00',
+        error: '#FF0000',
+        info: '#00FFFF',
+        primary: '#FFFF00',
+        secondary: '#FFFFFF',
+        muted: '#CCCCCC',
+    },
+    // Solarized theme
+    'solarized-light': {
+        text: '#586E75',
+        background: '#FDF6E3',
+        tint: '#268BD2',
+        icon: '#93A1A1',
+        tabIconDefault: '#93A1A1',
+        tabIconSelected: '#268BD2',
+        border: '#EEE8D5',
+        card: '#FEF9E7',
+        cardText: '#586E75',
+        button: '#268BD2',
+        buttonText: '#FDF6E3',
+        buttonSecondary: '#EEE8D5',
+        buttonSecondaryText: '#586E75',
+        input: '#FEF9E7',
+        inputText: '#586E75',
+        inputBorder: '#EEE8D5',
+        success: '#859900',
+        warning: '#B58900',
+        error: '#DC322F',
+        info: '#268BD2',
+        primary: '#268BD2',
+        secondary: '#93A1A1',
+        muted: '#93A1A1',
+    },
+    'solarized-dark': {
+        text: '#839496',
+        background: '#002B36',
+        tint: '#268BD2',
+        icon: '#657B83',
+        tabIconDefault: '#657B83',
+        tabIconSelected: '#268BD2',
+        border: '#073642',
+        card: '#073642',
+        cardText: '#839496',
+        button: '#268BD2',
+        buttonText: '#FDF6E3',
+        buttonSecondary: '#073642',
+        buttonSecondaryText: '#839496',
+        input: '#073642',
+        inputText: '#839496',
+        inputBorder: '#586E75',
+        success: '#859900',
+        warning: '#B58900',
+        error: '#DC322F',
+        info: '#268BD2',
+        primary: '#268BD2',
+        secondary: '#657B83',
+        muted: '#657B83',
+    },
+    // Dark Plus theme
+    'dark-plus-light': {
+        text: '#333333',
+        background: '#FFFFFF',
+        tint: '#007ACC',
+        icon: '#666666',
+        tabIconDefault: '#666666',
+        tabIconSelected: '#007ACC',
+        border: '#CCCCCC',
+        card: '#F5F5F5',
+        cardText: '#333333',
+        button: '#007ACC',
+        buttonText: '#FFFFFF',
+        buttonSecondary: '#E5E5E5',
+        buttonSecondaryText: '#333333',
+        input: '#FFFFFF',
+        inputText: '#333333',
+        inputBorder: '#CCCCCC',
+        success: '#89D185',
+        warning: '#CE9178',
+        error: '#F48771',
+        info: '#4EC9B0',
+        primary: '#007ACC',
+        secondary: '#666666',
+        muted: '#999999',
+    },
+    'dark-plus-dark': {
+        text: '#CCCCCC',
+        background: '#1E1E1E',
+        tint: '#007ACC',
+        icon: '#858585',
+        tabIconDefault: '#858585',
+        tabIconSelected: '#007ACC',
+        border: '#3E3E42',
+        card: '#252526',
+        cardText: '#CCCCCC',
+        button: '#007ACC',
+        buttonText: '#FFFFFF',
+        buttonSecondary: '#3E3E42',
+        buttonSecondaryText: '#CCCCCC',
+        input: '#252526',
+        inputText: '#CCCCCC',
+        inputBorder: '#3E3E42',
+        success: '#89D185',
+        warning: '#CE9178',
+        error: '#F48771',
+        info: '#4EC9B0',
+        primary: '#007ACC',
+        secondary: '#858585',
+        muted: '#858585',
+    },
+};
+// Legacy Colors export for backward compatibility
+exports.Colors = {
+    light: exports.Themes['system-light'],
+    dark: exports.Themes['system-dark'],
+};
+exports.Fonts = react_native_1.Platform.select({
+    ios: {
+        /** iOS `UIFontDescriptorSystemDesignDefault` */
+        sans: 'system-ui',
+        /** iOS `UIFontDescriptorSystemDesignSerif` */
+        serif: 'ui-serif',
+        /** iOS `UIFontDescriptorSystemDesignRounded` */
+        rounded: 'ui-rounded',
+        /** iOS `UIFontDescriptorSystemDesignMonospaced` */
+        mono: 'ui-monospace',
+    },
+    default: {
+        sans: 'normal',
+        serif: 'serif',
+        rounded: 'normal',
+        mono: 'monospace',
+    },
+    web: {
+        sans: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
+        serif: "Georgia, 'Times New Roman', serif",
+        rounded: "'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif",
+        mono: "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+    },
+});

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@crystin001/theme-settings-lib",
+  "version": "1.0.0",
+  "description": "Reusable theme and settings library for mobile apps",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "npm run build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "theme",
+    "settings",
+    "i18n",
+    "react-native",
+    "expo"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/trial-and-code/theme-settings-lib.git"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "i18next": "^23.11.5",
+    "react-i18next": "^15.1.1",
+    "expo-localization": "~17.0.0",
+    "@react-native-async-storage/async-storage": "~2.2.0",
+    "color": "^4.2.3"
+  },
+  "peerDependenciesMeta": {
+    "color": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/react": "^19.0.0",
+    "@types/color": "^3.0.0",
+    "color": "^4.2.3",
+    "react": "^18.0.0",
+    "react-native": "*",
+    "i18next": "^23.11.5",
+    "react-i18next": "^15.1.1",
+    "expo-localization": "~17.0.0",
+    "@react-native-async-storage/async-storage": "~2.2.0"
+  }
+}
+