@impulse-ui-native/theme 1.0.0

package/src/types/tokens.types.ts

@@ -0,0 +1,125 @@
+import { DimensionValue } from "react-native";
+
+export type SpaceSizesKeys =
+  | "none"
+  | "auto"
+  | "xxs"
+  | "xs"
+  | "mxs"
+  | "sm"
+  | "msm"
+  | "md"
+  | "lg"
+  | "xl"
+  | "xxl";
+export type Space = Record<SpaceSizesKeys, DimensionValue>;
+
+export type FontSizesKeys =
+  | "xxs"
+  | "xs"
+  | "xsm"
+  | "sm"
+  | "md"
+  | "lg"
+  | "xl"
+  | "xxl"
+  | "xxxl"
+  | "huge"
+  | "massive";
+export type FontSizes = Record<FontSizesKeys, number>;
+
+export type LineHeightKeys = "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export type LineHeights = Record<LineHeightKeys, string>;
+
+export type FontWeightKey =
+  | "thin"
+  | "extraLight"
+  | "light"
+  | "regular"
+  | "medium"
+  | "semiBold"
+  | "bold"
+  | "extraBold"
+  | "black";
+export type FontWeights = Record<
+  FontWeightKey,
+  "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"
+>;
+
+export type LetterSpacingKey =
+  | "tightest"
+  | "tighter"
+  | "tight"
+  | "normal"
+  | "wide"
+  | "wider"
+  | "widest"
+  | "ultraWide";
+export type LetterSpacings = Record<LetterSpacingKey, number>;
+
+export type BorderSizeKey = "sm" | "md" | "lg" | "xl" | "xxl";
+export type BorderSizes = Record<BorderSizeKey, number>;
+
+export type RadiusKey = "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl" | "round";
+export type Radii = Record<RadiusKey, number>;
+
+export type RadiusDrawnKey =
+  | "drawn1"
+  | "drawn2"
+  | "drawn3"
+  | "drawn4"
+  | "drawn5"
+  | "drawn6";
+export type RadiiDrawn = Record<RadiusDrawnKey, string>;
+
+export type RadiusBlobKey = "blob1" | "blob2" | "blob3" | "blob4" | "blob5";
+export type RadiiBlob = Record<RadiusBlobKey, string>;
+
+export type RadiusConditionalKey =
+  | "conditional1"
+  | "conditional2"
+  | "conditional3"
+  | "conditional4"
+  | "conditional5"
+  | "conditional6";
+export type RadiiConditional = Record<RadiusConditionalKey, string>;
+
+export type NeutralColorKey =
+  | "0"
+  | "1"
+  | "2"
+  | "3"
+  | "4"
+  | "5"
+  | "6"
+  | "7"
+  | "8"
+  | "9"
+  | "10"
+  | "11"
+  | "12"
+  | "13";
+
+export type NeutralColors = Record<NeutralColorKey, string>;
+
+export type FontFamilyKey =
+  | "thin"
+  | "thinItalic"
+  | "extraLight"
+  | "extraLightItalic"
+  | "light"
+  | "lightItalic"
+  | "regular"
+  | "italic"
+  | "medium"
+  | "mediumItalic"
+  | "semiBold"
+  | "semiBoldItalic"
+  | "bold"
+  | "boldItalic"
+  | "extraBold"
+  | "extraBoldItalic"
+  | "black"
+  | "blackItalic";
+
+export type FontFamilyMap = Record<FontFamilyKey, string>;

package/src/types/typography.types.ts

@@ -0,0 +1,42 @@
+import { TextStyle } from 'react-native';
+
+export type TypographyProps = {
+  fontSize?: TextStyle['fontSize'];
+  fontFamily?: TextStyle['fontFamily'];
+  fontWeight?: TextStyle['fontWeight'];
+  fontStyle?: TextStyle['fontStyle'];
+  letterSpacing?: TextStyle['letterSpacing'];
+  lineHeight?: TextStyle['lineHeight'];
+  textAlign?: TextStyle['textAlign'];
+  textDecorationLine?: TextStyle['textDecorationLine'];
+  textDecorationStyle?: TextStyle['textDecorationStyle'];
+  textDecorationColor?: TextStyle['textDecorationColor'];
+  textTransform?: TextStyle['textTransform'];
+  includeFontPadding?: TextStyle['includeFontPadding']; // Android only
+  textAlignVertical?: TextStyle['textAlignVertical']; // Android only
+  writingDirection?: TextStyle['writingDirection'];
+};
+
+export type TypographyPresetKey =
+  | 'Master'
+  | 'DisplayLarge'
+  | 'DisplayMedium'
+  | 'DisplaySmall'
+  | 'Title1'
+  | 'Title2'
+  | 'Title3'
+  | 'Title4'
+  | 'Title5'
+  | 'Title6'
+  | 'Subtitle1'
+  | 'Subtitle2'
+  | 'BodyLarge'
+  | 'Body'
+  | 'BodySmall'
+  | 'Caption'
+  | 'Label'
+  | 'Overline'
+  | 'Helper'
+  | 'Code'
+  | 'Quote'
+  | 'Eyebrow';

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './style.utils';

package/src/utils/style.utils.ts

@@ -0,0 +1,31 @@
+import { StylePropsSet } from '../constants';
+import { StylePropKey, StyleProps } from '../types';
+
+const isStylePropKey = (k: string): k is StylePropKey =>
+  StylePropsSet.has(k as StylePropKey);
+
+export const extractStyleProps = <Props extends object>(
+  props: Props
+): StyleProps => {
+  const style: StyleProps = {};
+  
+  for (const k in props) {
+    if (isStylePropKey(k) && props[k] !== undefined) {
+      style[k] = props[k] as any;
+    }
+  }
+  
+  return style;
+};
+
+export const createStyleKey = <Props extends object>(props: Props) => {
+  let key = '';
+
+  for (const k in props) {
+    if (isStylePropKey(k)) {
+      key += String(props[k as keyof Props]);
+    }
+  }
+  
+  return key;
+};