@idealyst/theme 1.0.99 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +2 -2
  2. package/src/darkTheme.ts +57 -0
  3. package/src/lightTheme.ts +57 -0
  4. package/src/theme/size.ts +26 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idealyst/theme",
3
- "version": "1.0.99",
3
+ "version": "1.1.0",
4
4
  "description": "Theming system for Idealyst Framework",
5
5
  "readme": "README.md",
6
6
  "main": "src/index.ts",
@@ -58,4 +58,4 @@
58
58
  "react-native",
59
59
  "cross-platform"
60
60
  ]
61
- }
61
+ }
package/src/darkTheme.ts CHANGED
@@ -824,6 +824,63 @@ export const darkTheme: Theme = {
824
824
  padding: 32,
825
825
  spacing: 32,
826
826
  }
827
+ },
828
+ typography: {
829
+ h1: {
830
+ fontSize: 32,
831
+ lineHeight: 40,
832
+ fontWeight: '700',
833
+ },
834
+ h2: {
835
+ fontSize: 28,
836
+ lineHeight: 36,
837
+ fontWeight: '700',
838
+ },
839
+ h3: {
840
+ fontSize: 24,
841
+ lineHeight: 32,
842
+ fontWeight: '600',
843
+ },
844
+ h4: {
845
+ fontSize: 20,
846
+ lineHeight: 28,
847
+ fontWeight: '600',
848
+ },
849
+ h5: {
850
+ fontSize: 18,
851
+ lineHeight: 26,
852
+ fontWeight: '600',
853
+ },
854
+ h6: {
855
+ fontSize: 16,
856
+ lineHeight: 24,
857
+ fontWeight: '600',
858
+ },
859
+ subtitle1: {
860
+ fontSize: 16,
861
+ lineHeight: 24,
862
+ fontWeight: '500',
863
+ },
864
+ subtitle2: {
865
+ fontSize: 14,
866
+ lineHeight: 20,
867
+ fontWeight: '500',
868
+ },
869
+ body1: {
870
+ fontSize: 16,
871
+ lineHeight: 24,
872
+ fontWeight: '400',
873
+ },
874
+ body2: {
875
+ fontSize: 14,
876
+ lineHeight: 20,
877
+ fontWeight: '400',
878
+ },
879
+ caption: {
880
+ fontSize: 12,
881
+ lineHeight: 16,
882
+ fontWeight: '400',
883
+ },
827
884
  }
828
885
  },
829
886
  } as Theme
package/src/lightTheme.ts CHANGED
@@ -808,6 +808,63 @@ export const lightTheme: Theme = {
808
808
  padding: 32,
809
809
  spacing: 32,
810
810
  }
811
+ },
812
+ typography: {
813
+ h1: {
814
+ fontSize: 32,
815
+ lineHeight: 40,
816
+ fontWeight: '700',
817
+ },
818
+ h2: {
819
+ fontSize: 28,
820
+ lineHeight: 36,
821
+ fontWeight: '700',
822
+ },
823
+ h3: {
824
+ fontSize: 24,
825
+ lineHeight: 32,
826
+ fontWeight: '600',
827
+ },
828
+ h4: {
829
+ fontSize: 20,
830
+ lineHeight: 28,
831
+ fontWeight: '600',
832
+ },
833
+ h5: {
834
+ fontSize: 18,
835
+ lineHeight: 26,
836
+ fontWeight: '600',
837
+ },
838
+ h6: {
839
+ fontSize: 16,
840
+ lineHeight: 24,
841
+ fontWeight: '600',
842
+ },
843
+ subtitle1: {
844
+ fontSize: 16,
845
+ lineHeight: 24,
846
+ fontWeight: '500',
847
+ },
848
+ subtitle2: {
849
+ fontSize: 14,
850
+ lineHeight: 20,
851
+ fontWeight: '500',
852
+ },
853
+ body1: {
854
+ fontSize: 16,
855
+ lineHeight: 24,
856
+ fontWeight: '400',
857
+ },
858
+ body2: {
859
+ fontSize: 14,
860
+ lineHeight: 20,
861
+ fontWeight: '400',
862
+ },
863
+ caption: {
864
+ fontSize: 12,
865
+ lineHeight: 16,
866
+ fontWeight: '400',
867
+ },
811
868
  }
812
869
  }
813
870
  } as Theme
package/src/theme/size.ts CHANGED
@@ -1,6 +1,31 @@
1
1
  export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
2
2
  export type SizeValue = number | string
3
3
 
4
+ /**
5
+ * Typography variants for semantic text styling
6
+ */
7
+ export type Typography =
8
+ | 'h1'
9
+ | 'h2'
10
+ | 'h3'
11
+ | 'h4'
12
+ | 'h5'
13
+ | 'h6'
14
+ | 'subtitle1'
15
+ | 'subtitle2'
16
+ | 'body1'
17
+ | 'body2'
18
+ | 'caption'
19
+
20
+ /**
21
+ * Typography style values
22
+ */
23
+ export type TypographyValue = {
24
+ fontSize: SizeValue;
25
+ lineHeight: SizeValue;
26
+ fontWeight: '300' | '400' | '500' | '600' | '700';
27
+ }
28
+
4
29
  // Size alone is not very useful, as sizes are contextual based on the component
5
30
  export type AllComponentSizes = {
6
31
  button: Record<Size, ButtonSizeValue>;
@@ -25,6 +50,7 @@ export type AllComponentSizes = {
25
50
  table: Record<Size, TableSizeValue>;
26
51
  tooltip: Record<Size, TooltipSizeValue>;
27
52
  view: Record<Size, ViewSizeValue>;
53
+ typography: Record<Typography, TypographyValue>;
28
54
  }
29
55
 
30
56