@dryanovski/react-native-components 1.0.3 → 1.0.6

package/lib/module/themes/colors.js

@@ -0,0 +1,122 @@
+"use strict";
+
+export const colors = {
+  // ----- BRAND COLORS -----
+  primary: {
+    50: '#F0F7FF',
+    100: '#D9E9FF',
+    200: '#B3D3FF',
+    300: '#8DBDFF',
+    400: '#66A7FF',
+    500: '#3F91FF',
+    // main brand color
+    600: '#2376E6',
+    700: '#1658B3',
+    800: '#0A3A80',
+    900: '#001D4D'
+  },
+  secondary: {
+    50: '#F5F5FF',
+    100: '#E6E4FF',
+    200: '#C8C4FF',
+    300: '#AAA3FF',
+    400: '#8C82FF',
+    500: '#6E61FF',
+    // accent / complementary
+    600: '#554ACC',
+    700: '#3D3499',
+    800: '#251E66',
+    900: '#100A33'
+  },
+  // ----- STATUS COLORS -----
+  success: {
+    50: '#EBFDF3',
+    100: '#C8F9DF',
+    200: '#A3F3C6',
+    300: '#7DEDAE',
+    400: '#57E796',
+    500: '#32D880',
+    // success default
+    600: '#28B56A',
+    700: '#1E9254',
+    800: '#146F3E',
+    900: '#0A4C28'
+  },
+  warning: {
+    50: '#FFFAEA',
+    100: '#FFF2C2',
+    200: '#FFE08A',
+    300: '#FFCE52',
+    400: '#FFBC1A',
+    500: '#F5A000',
+    // warning default
+    600: '#CC8300',
+    700: '#A36600',
+    800: '#7A4A00',
+    900: '#523000'
+  },
+  danger: {
+    50: '#FFF5F5',
+    100: '#FFE0E0',
+    200: '#FFB8B8',
+    300: '#FF8A8A',
+    400: '#FF5C5C',
+    500: '#FF2E2E',
+    // danger default
+    600: '#CC2323',
+    700: '#991A1A',
+    800: '#661212',
+    900: '#330909'
+  },
+  error: {
+    50: '#FFF4F2',
+    100: '#FFE3DE',
+    200: '#FFC0B8',
+    300: '#FF9A8E',
+    400: '#FF6B5C',
+    500: '#F04438',
+    // common red error
+    600: '#D92D20',
+    700: '#B42318',
+    800: '#912018',
+    900: '#7A271A'
+  },
+  // ----- DISABLED -----
+  disabled: {
+    bg: '#E5E7EB',
+    text: '#9CA3AF',
+    border: '#D1D5DB'
+  },
+  // ----- NEUTRALS -----
+  gray: {
+    50: '#F9FAFB',
+    100: '#F3F4F6',
+    200: '#E5E7EB',
+    300: '#D1D5DB',
+    400: '#9CA3AF',
+    500: '#6B7280',
+    600: '#4B5563',
+    700: '#374151',
+    800: '#1F2937',
+    900: '#111827'
+  },
+  // ----- BACKGROUND -----
+  background: {
+    primary: '#FFFFFF',
+    secondary: '#F7F7F8',
+    tertiary: '#EFEFF1',
+    disabled: '#E5E7EB'
+  },
+  // ----- TEXT -----
+  text: {
+    primary: '#111827',
+    secondary: '#4B5563',
+    muted: '#6B7280',
+    inverted: '#FFFFFF'
+  },
+  // ----- BLACK & WHITE -----
+  white: '#FFFFFF',
+  black: '#000000',
+  transparent: 'transparent'
+};
+//# sourceMappingURL=colors.js.map

package/lib/module/themes/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["colors","primary","secondary","success","warning","danger","error","disabled","bg","text","border","gray","background","tertiary","muted","inverted","white","black","transparent"],"sourceRoot":"../../../src","sources":["themes/colors.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/themes/light.js

@@ -1,23 +1,33 @@
 "use strict";
 
+import { colors } from "./colors.js";
+import { radii } from "./radius.js";
+import { sizes } from "./size.js";
+import { spacing } from "./spacing.js";
+import { typography } from "./typography.js";
 export const LightTheme = {
+  color: colors,
+  size: sizes,
+  spacing: spacing,
+  typography: typography,
+  radius: radii,
   components: {
     card: {
-      border_radius: 8,
-      padding: 16,
-      shadow_color: '#000',
+      border_radius: radii.md,
+      padding: spacing.lg,
+      shadow_color: colors.black,
       shadow_offset: {
         width: 0,
         height: 2
       },
       shadow_opacity: 0.1,
-      shadow_radius: 4,
+      shadow_radius: radii.sm,
       elevation: 3
     },
     surface: {
-      default_background_color: '#fff',
-      secondary_background_color: '#f0f0f0',
-      transparent_background_color: 'transparent'
+      default_background_color: colors.primary[50],
+      secondary_background_color: colors.primary[100],
+      transparent_background_color: colors.transparent
     }
   }
 };

package/lib/module/themes/light.js.map

@@ -1 +1 @@
-{"version":3,"names":["LightTheme","components","card","border_radius","padding","shadow_color","shadow_offset","width","height","shadow_opacity","shadow_radius","elevation","surface","default_background_color","secondary_background_color","transparent_background_color"],"sourceRoot":"../../../src","sources":["themes/light.ts"],"mappings":";;AAEA,OAAO,MAAMA,UAA2B,GAAG;EACzCC,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,aAAa,EAAE,CAAC;MAChBC,OAAO,EAAE,EAAE;MACXC,YAAY,EAAE,MAAM;MACpBC,aAAa,EAAE;QAAEC,KAAK,EAAE,CAAC;QAAEC,MAAM,EAAE;MAAE,CAAC;MACtCC,cAAc,EAAE,GAAG;MACnBC,aAAa,EAAE,CAAC;MAChBC,SAAS,EAAE;IACb,CAAC;IACDC,OAAO,EAAE;MACPC,wBAAwB,EAAE,MAAM;MAChCC,0BAA0B,EAAE,SAAS;MACrCC,4BAA4B,EAAE;IAChC;EACF;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["colors","radii","sizes","spacing","typography","LightTheme","color","size","radius","components","card","border_radius","md","padding","lg","shadow_color","black","shadow_offset","width","height","shadow_opacity","shadow_radius","sm","elevation","surface","default_background_color","primary","secondary_background_color","transparent_background_color","transparent"],"sourceRoot":"../../../src","sources":["themes/light.ts"],"mappings":";;AAAA,SAASA,MAAM,QAAQ,aAAU;AACjC,SAASC,KAAK,QAAQ,aAAU;AAChC,SAASC,KAAK,QAAQ,WAAQ;AAC9B,SAASC,OAAO,QAAQ,cAAW;AAEnC,SAASC,UAAU,QAAQ,iBAAc;AAEzC,OAAO,MAAMC,UAA2B,GAAG;EACzCC,KAAK,EAAEN,MAAM;EACbO,IAAI,EAAEL,KAAK;EACXC,OAAO,EAAEA,OAAO;EAChBC,UAAU,EAAEA,UAAU;EACtBI,MAAM,EAAEP,KAAK;EACbQ,UAAU,EAAE;IACVC,IAAI,EAAE;MACJC,aAAa,EAAEV,KAAK,CAACW,EAAE;MACvBC,OAAO,EAAEV,OAAO,CAACW,EAAE;MACnBC,YAAY,EAAEf,MAAM,CAACgB,KAAK;MAC1BC,aAAa,EAAE;QAAEC,KAAK,EAAE,CAAC;QAAEC,MAAM,EAAE;MAAE,CAAC;MACtCC,cAAc,EAAE,GAAG;MACnBC,aAAa,EAAEpB,KAAK,CAACqB,EAAE;MACvBC,SAAS,EAAE;IACb,CAAC;IACDC,OAAO,EAAE;MACPC,wBAAwB,EAAEzB,MAAM,CAAC0B,OAAO,CAAC,EAAE,CAAC;MAC5CC,0BAA0B,EAAE3B,MAAM,CAAC0B,OAAO,CAAC,GAAG,CAAC;MAC/CE,4BAA4B,EAAE5B,MAAM,CAAC6B;IACvC;EACF;AACF,CAAC","ignoreList":[]}

package/lib/module/themes/radius.js

@@ -0,0 +1,11 @@
+"use strict";
+
+export const radii = {
+  none: 0,
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  full: 9999
+};
+//# sourceMappingURL=radius.js.map

package/lib/module/themes/radius.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["radii","none","sm","md","lg","xl","full"],"sourceRoot":"../../../src","sources":["themes/radius.ts"],"mappings":";;AAAA,OAAO,MAAMA,KAAK,GAAG;EACnBC,IAAI,EAAE,CAAC;EACPC,EAAE,EAAE,CAAC;EACLC,EAAE,EAAE,CAAC;EACLC,EAAE,EAAE,EAAE;EACNC,EAAE,EAAE,EAAE;EACNC,IAAI,EAAE;AACR,CAAU","ignoreList":[]}

package/lib/module/themes/size.js

@@ -0,0 +1,11 @@
+"use strict";
+
+export const sizes = {
+  'xs': 16,
+  'sm': 24,
+  'md': 32,
+  'lg': 48,
+  'xl': 64,
+  '2xl': 96
+};
+//# sourceMappingURL=size.js.map

package/lib/module/themes/size.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sizes"],"sourceRoot":"../../../src","sources":["themes/size.ts"],"mappings":";;AAAA,OAAO,MAAMA,KAAK,GAAG;EACnB,IAAI,EAAE,EAAE;EACR,IAAI,EAAE,EAAE;EACR,IAAI,EAAE,EAAE;EACR,IAAI,EAAE,EAAE;EACR,IAAI,EAAE,EAAE;EACR,KAAK,EAAE;AACT,CAAU","ignoreList":[]}

package/lib/module/themes/spacing.js

@@ -0,0 +1,13 @@
+"use strict";
+
+export const spacing = {
+  'none': 0,
+  'xs': 4,
+  'sm': 8,
+  'md': 12,
+  'lg': 16,
+  'xl': 24,
+  '2xl': 32,
+  '3xl': 40
+};
+//# sourceMappingURL=spacing.js.map

package/lib/module/themes/spacing.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["spacing"],"sourceRoot":"../../../src","sources":["themes/spacing.ts"],"mappings":";;AAAA,OAAO,MAAMA,OAAO,GAAG;EACrB,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,IAAI,EAAE,CAAC;EACP,IAAI,EAAE,EAAE;EACR,IAAI,EAAE,EAAE;EACR,IAAI,EAAE,EAAE;EACR,KAAK,EAAE,EAAE;EACT,KAAK,EAAE;AACT,CAAU","ignoreList":[]}

package/lib/module/themes/typography.js

@@ -0,0 +1,31 @@
+"use strict";
+
+export const typography = {
+  fonts: {
+    regular: 'System',
+    medium: 'System',
+    bold: 'System'
+  },
+  fontSizes: {
+    'xs': 12,
+    'sm': 14,
+    'md': 16,
+    'lg': 20,
+    'xl': 24,
+    '2xl': 32
+  },
+  lineHeights: {
+    'xs': 16,
+    'sm': 18,
+    'md': 20,
+    'lg': 28,
+    'xl': 32,
+    '2xl': 40
+  },
+  fontWeights: {
+    regular: '400',
+    medium: '500',
+    bold: '700'
+  }
+};
+//# sourceMappingURL=typography.js.map

package/lib/module/themes/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["typography","fonts","regular","medium","bold","fontSizes","lineHeights","fontWeights"],"sourceRoot":"../../../src","sources":["themes/typography.ts"],"mappings":";;AAAA,OAAO,MAAMA,UAAU,GAAG;EACxBC,KAAK,EAAE;IACLC,OAAO,EAAE,QAAQ;IACjBC,MAAM,EAAE,QAAQ;IAChBC,IAAI,EAAE;EACR,CAAC;EAEDC,SAAS,EAAE;IACT,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,EAAE;IACR,KAAK,EAAE;EACT,CAAC;EAEDC,WAAW,EAAE;IACX,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,EAAE;IACR,KAAK,EAAE;EACT,CAAC;EAEDC,WAAW,EAAE;IACXL,OAAO,EAAE,KAAc;IACvBC,MAAM,EAAE,KAAc;IACtBC,IAAI,EAAE;EACR;AACF,CAAU","ignoreList":[]}

package/lib/typescript/src/themes/colors.d.ts

@@ -0,0 +1,108 @@
+export declare const colors: {
+    readonly primary: {
+        readonly 50: "#F0F7FF";
+        readonly 100: "#D9E9FF";
+        readonly 200: "#B3D3FF";
+        readonly 300: "#8DBDFF";
+        readonly 400: "#66A7FF";
+        readonly 500: "#3F91FF";
+        readonly 600: "#2376E6";
+        readonly 700: "#1658B3";
+        readonly 800: "#0A3A80";
+        readonly 900: "#001D4D";
+    };
+    readonly secondary: {
+        readonly 50: "#F5F5FF";
+        readonly 100: "#E6E4FF";
+        readonly 200: "#C8C4FF";
+        readonly 300: "#AAA3FF";
+        readonly 400: "#8C82FF";
+        readonly 500: "#6E61FF";
+        readonly 600: "#554ACC";
+        readonly 700: "#3D3499";
+        readonly 800: "#251E66";
+        readonly 900: "#100A33";
+    };
+    readonly success: {
+        readonly 50: "#EBFDF3";
+        readonly 100: "#C8F9DF";
+        readonly 200: "#A3F3C6";
+        readonly 300: "#7DEDAE";
+        readonly 400: "#57E796";
+        readonly 500: "#32D880";
+        readonly 600: "#28B56A";
+        readonly 700: "#1E9254";
+        readonly 800: "#146F3E";
+        readonly 900: "#0A4C28";
+    };
+    readonly warning: {
+        readonly 50: "#FFFAEA";
+        readonly 100: "#FFF2C2";
+        readonly 200: "#FFE08A";
+        readonly 300: "#FFCE52";
+        readonly 400: "#FFBC1A";
+        readonly 500: "#F5A000";
+        readonly 600: "#CC8300";
+        readonly 700: "#A36600";
+        readonly 800: "#7A4A00";
+        readonly 900: "#523000";
+    };
+    readonly danger: {
+        readonly 50: "#FFF5F5";
+        readonly 100: "#FFE0E0";
+        readonly 200: "#FFB8B8";
+        readonly 300: "#FF8A8A";
+        readonly 400: "#FF5C5C";
+        readonly 500: "#FF2E2E";
+        readonly 600: "#CC2323";
+        readonly 700: "#991A1A";
+        readonly 800: "#661212";
+        readonly 900: "#330909";
+    };
+    readonly error: {
+        readonly 50: "#FFF4F2";
+        readonly 100: "#FFE3DE";
+        readonly 200: "#FFC0B8";
+        readonly 300: "#FF9A8E";
+        readonly 400: "#FF6B5C";
+        readonly 500: "#F04438";
+        readonly 600: "#D92D20";
+        readonly 700: "#B42318";
+        readonly 800: "#912018";
+        readonly 900: "#7A271A";
+    };
+    readonly disabled: {
+        readonly bg: "#E5E7EB";
+        readonly text: "#9CA3AF";
+        readonly border: "#D1D5DB";
+    };
+    readonly gray: {
+        readonly 50: "#F9FAFB";
+        readonly 100: "#F3F4F6";
+        readonly 200: "#E5E7EB";
+        readonly 300: "#D1D5DB";
+        readonly 400: "#9CA3AF";
+        readonly 500: "#6B7280";
+        readonly 600: "#4B5563";
+        readonly 700: "#374151";
+        readonly 800: "#1F2937";
+        readonly 900: "#111827";
+    };
+    readonly background: {
+        readonly primary: "#FFFFFF";
+        readonly secondary: "#F7F7F8";
+        readonly tertiary: "#EFEFF1";
+        readonly disabled: "#E5E7EB";
+    };
+    readonly text: {
+        readonly primary: "#111827";
+        readonly secondary: "#4B5563";
+        readonly muted: "#6B7280";
+        readonly inverted: "#FFFFFF";
+    };
+    readonly white: "#FFFFFF";
+    readonly black: "#000000";
+    readonly transparent: "transparent";
+};
+export type ColorToken = typeof colors;
+//# sourceMappingURL=colors.d.ts.map

package/lib/typescript/src/themes/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../src/themes/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0HT,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,OAAO,MAAM,CAAC"}

package/lib/typescript/src/themes/light.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"light.d.ts","sourceRoot":"","sources":["../../../../src/themes/light.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,UAAU,EAAE,eAiBxB,CAAC"}
+{"version":3,"file":"light.d.ts","sourceRoot":"","sources":["../../../../src/themes/light.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG/C,eAAO,MAAM,UAAU,EAAE,eAsBxB,CAAC"}

package/lib/typescript/src/themes/radius.d.ts

@@ -0,0 +1,10 @@
+export declare const radii: {
+    readonly none: 0;
+    readonly sm: 4;
+    readonly md: 8;
+    readonly lg: 12;
+    readonly xl: 16;
+    readonly full: 9999;
+};
+export type RadiusToken = keyof typeof radii;
+//# sourceMappingURL=radius.d.ts.map

package/lib/typescript/src/themes/radius.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radius.d.ts","sourceRoot":"","sources":["../../../../src/themes/radius.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK;;;;;;;CAOR,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,KAAK,CAAC"}

package/lib/typescript/src/themes/size.d.ts

@@ -0,0 +1,10 @@
+export declare const sizes: {
+    readonly xs: 16;
+    readonly sm: 24;
+    readonly md: 32;
+    readonly lg: 48;
+    readonly xl: 64;
+    readonly '2xl': 96;
+};
+export type SizeToken = keyof typeof sizes;
+//# sourceMappingURL=size.d.ts.map

package/lib/typescript/src/themes/size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.d.ts","sourceRoot":"","sources":["../../../../src/themes/size.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK;;;;;;;CAOR,CAAC;AAEX,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,KAAK,CAAC"}

package/lib/typescript/src/themes/spacing.d.ts

@@ -0,0 +1,12 @@
+export declare const spacing: {
+    readonly none: 0;
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 12;
+    readonly lg: 16;
+    readonly xl: 24;
+    readonly '2xl': 32;
+    readonly '3xl': 40;
+};
+export type SpacingToken = keyof typeof spacing;
+//# sourceMappingURL=spacing.d.ts.map

package/lib/typescript/src/themes/spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../../../src/themes/spacing.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;CASV,CAAC;AAEX,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,OAAO,CAAC"}

package/lib/typescript/src/themes/types.d.ts

@@ -1,6 +1,16 @@
 import type { CardStyleVariables } from '../components/Card/styles';
 import type { SurfaceStyleVariables } from '../components/Surface/styles';
+import type { colors } from './colors';
+import type { radii } from './radius';
+import type { sizes } from './size';
+import type { spacing } from './spacing';
+import type { typography } from './typography';
 export type ThemeDefinition = {
+    color: typeof colors;
+    size: typeof sizes;
+    spacing: typeof spacing;
+    typography: typeof typography;
+    radius: typeof radii;
     components: {
         card: CardStyleVariables;
         surface: SurfaceStyleVariables;

package/lib/typescript/src/themes/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/themes/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAE1E,MAAM,MAAM,eAAe,GAAG;IAC5B,UAAU,EAAE;QACV,IAAI,EAAE,kBAAkB,CAAC;QACzB,OAAO,EAAE,qBAAqB,CAAC;KAChC,CAAC;CACH,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/themes/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,OAAO,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,KAAK,CAAC;IACnB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,UAAU,EAAE,OAAO,UAAU,CAAC;IAC9B,MAAM,EAAE,OAAO,KAAK,CAAC;IACrB,UAAU,EAAE;QACV,IAAI,EAAE,kBAAkB,CAAC;QACzB,OAAO,EAAE,qBAAqB,CAAC;KAChC,CAAC;CACH,CAAC"}

package/lib/typescript/src/themes/typography.d.ts

@@ -0,0 +1,30 @@
+export declare const typography: {
+    readonly fonts: {
+        readonly regular: "System";
+        readonly medium: "System";
+        readonly bold: "System";
+    };
+    readonly fontSizes: {
+        readonly xs: 12;
+        readonly sm: 14;
+        readonly md: 16;
+        readonly lg: 20;
+        readonly xl: 24;
+        readonly '2xl': 32;
+    };
+    readonly lineHeights: {
+        readonly xs: 16;
+        readonly sm: 18;
+        readonly md: 20;
+        readonly lg: 28;
+        readonly xl: 32;
+        readonly '2xl': 40;
+    };
+    readonly fontWeights: {
+        readonly regular: "400";
+        readonly medium: "500";
+        readonly bold: "700";
+    };
+};
+export type TypographyToken = typeof typography;
+//# sourceMappingURL=typography.d.ts.map

package/lib/typescript/src/themes/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../src/themes/typography.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8Bb,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,OAAO,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryanovski/react-native-components",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "description": "Collection of reusable React Native components for building mobile applications.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -61,13 +61,12 @@
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "react": ">=19.0.0",
-    "react-native": ">=0.81.0",
-    "react-native-reanimated": "~4.1.1",
+    "react": ">=19",
+    "react-native": ">=0.81.5",
+    "react-native-reanimated": ">=4",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": ">=4",
-    "react-native-svg": "^15.12.1",
-    "react-native-worklets": "0.5.1"
+    "react-native-svg": "^15.12.1"
   },
   "prettier": {
     "quoteProps": "consistent",

package/src/themes/colors.ts

@@ -0,0 +1,125 @@
+export const colors = {
+  // ----- BRAND COLORS -----
+  primary: {
+    50: '#F0F7FF',
+    100: '#D9E9FF',
+    200: '#B3D3FF',
+    300: '#8DBDFF',
+    400: '#66A7FF',
+    500: '#3F91FF', // main brand color
+    600: '#2376E6',
+    700: '#1658B3',
+    800: '#0A3A80',
+    900: '#001D4D',
+  },
+
+  secondary: {
+    50: '#F5F5FF',
+    100: '#E6E4FF',
+    200: '#C8C4FF',
+    300: '#AAA3FF',
+    400: '#8C82FF',
+    500: '#6E61FF', // accent / complementary
+    600: '#554ACC',
+    700: '#3D3499',
+    800: '#251E66',
+    900: '#100A33',
+  },
+
+  // ----- STATUS COLORS -----
+  success: {
+    50: '#EBFDF3',
+    100: '#C8F9DF',
+    200: '#A3F3C6',
+    300: '#7DEDAE',
+    400: '#57E796',
+    500: '#32D880', // success default
+    600: '#28B56A',
+    700: '#1E9254',
+    800: '#146F3E',
+    900: '#0A4C28',
+  },
+
+  warning: {
+    50: '#FFFAEA',
+    100: '#FFF2C2',
+    200: '#FFE08A',
+    300: '#FFCE52',
+    400: '#FFBC1A',
+    500: '#F5A000', // warning default
+    600: '#CC8300',
+    700: '#A36600',
+    800: '#7A4A00',
+    900: '#523000',
+  },
+
+  danger: {
+    50: '#FFF5F5',
+    100: '#FFE0E0',
+    200: '#FFB8B8',
+    300: '#FF8A8A',
+    400: '#FF5C5C',
+    500: '#FF2E2E', // danger default
+    600: '#CC2323',
+    700: '#991A1A',
+    800: '#661212',
+    900: '#330909',
+  },
+
+  error: {
+    50: '#FFF4F2',
+    100: '#FFE3DE',
+    200: '#FFC0B8',
+    300: '#FF9A8E',
+    400: '#FF6B5C',
+    500: '#F04438', // common red error
+    600: '#D92D20',
+    700: '#B42318',
+    800: '#912018',
+    900: '#7A271A',
+  },
+
+  // ----- DISABLED -----
+  disabled: {
+    bg: '#E5E7EB',
+    text: '#9CA3AF',
+    border: '#D1D5DB',
+  },
+
+  // ----- NEUTRALS -----
+  gray: {
+    50: '#F9FAFB',
+    100: '#F3F4F6',
+    200: '#E5E7EB',
+    300: '#D1D5DB',
+    400: '#9CA3AF',
+    500: '#6B7280',
+    600: '#4B5563',
+    700: '#374151',
+    800: '#1F2937',
+    900: '#111827',
+  },
+
+  // ----- BACKGROUND -----
+  background: {
+    primary: '#FFFFFF',
+    secondary: '#F7F7F8',
+    tertiary: '#EFEFF1',
+    disabled: '#E5E7EB',
+  },
+
+  // ----- TEXT -----
+  text: {
+    primary: '#111827',
+    secondary: '#4B5563',
+    muted: '#6B7280',
+    inverted: '#FFFFFF',
+  },
+
+  // ----- BLACK & WHITE -----
+  white: '#FFFFFF',
+  black: '#000000',
+  transparent: 'transparent',
+} as const;
+
+export type ColorToken = typeof colors;

package/src/themes/light.ts

@@ -1,20 +1,30 @@
+import { colors } from './colors';
+import { radii } from './radius';
+import { sizes } from './size';
+import { spacing } from './spacing';
 import type { ThemeDefinition } from './types';
+import { typography } from './typography';
 
 export const LightTheme: ThemeDefinition = {
+  color: colors,
+  size: sizes,
+  spacing: spacing,
+  typography: typography,
+  radius: radii,
   components: {
     card: {
-      border_radius: 8,
-      padding: 16,
-      shadow_color: '#000',
+      border_radius: radii.md,
+      padding: spacing.lg,
+      shadow_color: colors.black,
       shadow_offset: { width: 0, height: 2 },
       shadow_opacity: 0.1,
-      shadow_radius: 4,
+      shadow_radius: radii.sm,
       elevation: 3,
     },
     surface: {
-      default_background_color: '#fff',
-      secondary_background_color: '#f0f0f0',
-      transparent_background_color: 'transparent',
+      default_background_color: colors.primary[50],
+      secondary_background_color: colors.primary[100],
+      transparent_background_color: colors.transparent,
     },
   },
 };

package/src/themes/radius.ts

@@ -0,0 +1,10 @@
+export const radii = {
+  none: 0,
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  full: 9999,
+} as const;
+
+export type RadiusToken = keyof typeof radii;

package/src/themes/size.ts

@@ -0,0 +1,10 @@
+export const sizes = {
+  'xs': 16,
+  'sm': 24,
+  'md': 32,
+  'lg': 48,
+  'xl': 64,
+  '2xl': 96,
+} as const;
+
+export type SizeToken = keyof typeof sizes;

package/src/themes/spacing.ts

@@ -0,0 +1,12 @@
+export const spacing = {
+  'none': 0,
+  'xs': 4,
+  'sm': 8,
+  'md': 12,
+  'lg': 16,
+  'xl': 24,
+  '2xl': 32,
+  '3xl': 40,
+} as const;
+
+export type SpacingToken = keyof typeof spacing;

package/src/themes/types.ts

@@ -1,7 +1,17 @@
 import type { CardStyleVariables } from '../components/Card/styles';
 import type { SurfaceStyleVariables } from '../components/Surface/styles';
+import type { colors } from './colors';
+import type { radii } from './radius';
+import type { sizes } from './size';
+import type { spacing } from './spacing';
+import type { typography } from './typography';
 
 export type ThemeDefinition = {
+  color: typeof colors;
+  size: typeof sizes;
+  spacing: typeof spacing;
+  typography: typeof typography;
+  radius: typeof radii;
   components: {
     card: CardStyleVariables;
     surface: SurfaceStyleVariables;

package/src/themes/typography.ts

@@ -0,0 +1,33 @@
+export const typography = {
+  fonts: {
+    regular: 'System',
+    medium: 'System',
+    bold: 'System',
+  },
+
+  fontSizes: {
+    'xs': 12,
+    'sm': 14,
+    'md': 16,
+    'lg': 20,
+    'xl': 24,
+    '2xl': 32,
+  },
+
+  lineHeights: {
+    'xs': 16,
+    'sm': 18,
+    'md': 20,
+    'lg': 28,
+    'xl': 32,
+    '2xl': 40,
+  },
+
+  fontWeights: {
+    regular: '400' as const,
+    medium: '500' as const,
+    bold: '700' as const,
+  },
+} as const;
+
+export type TypographyToken = typeof typography;