react-native-exp-fig 0.1.43 → 2.0.0

package/src/styles/global/interface.d.ts

@@ -1,146 +1,146 @@
-/*
- * IMPORTS
- */
-import React from "react";
-import { DimensionValue } from "react-native";
-import { theme } from "../theme/theme";
-
-export interface IGlobalCss {
-  /**
-   * A propriedade JSX que define um elemento ou componente filho.
-   */
-  children?: React.ReactNode;
-
-  /**
-   * TestID para testes automático e identificação
-   */
-  testID?: string;
-
-  /**
-   * A propriedade CSS abreviada border define a borda de um elemento. Ele define os valores de largura da borda, estilo da borda e cor da borda.
-   */
-  borderStyled?: {
-    borderStyle?: "solid" | "dotted" | "dashed";
-
-    borderRadius?: number | DimensionValue;
-    borderTopRightRadius?: number | DimensionValue;
-    borderTopLeftRadius?: number | DimensionValue;
-    borderBottomRightRadius?: number | DimensionValue;
-    borderBottomLeftRadius?: number | DimensionValue;
-
-    borderWidth?: number | DimensionValue;
-    borderLeftWidth?: number | DimensionValue;
-    borderRightWidth?: number | DimensionValue;
-    borderTopWidth?: number | DimensionValue;
-    borderBottomWidth?: number | DimensionValue;
-
-    borderColor?: string;
-    borderBottomColor?: string;
-    borderLeftColor?: string;
-    borderRightColor?: string;
-    borderTopColor?: string;
-  };
-
-  /**
-   * Propriedades que define a orientação do button que é usada para representar uma página. Na maioria das vezes, esse valores corresponde ao posicionamento alvo da página impressa, se aplicável.
-   */
-  flexStyle?: {
-    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
-    alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
-    flex?: string | number;
-    flexDirection?: "column" | "column-reverse" | "row" | "row-reverse";
-    flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
-    textAlign?: "auto" | "center" | "left" | "right" | "justify";
-    justifyContent?:
-      | "flex-start"
-      | "flex-end"
-      | "center"
-      | "space-between"
-      | "space-around"
-      | "space-evenly";
-  };
-
-  /**
-   * A propriedade margin do CSS define a área de margem nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: margin-top, margin-right (en-US), margin-bottom, e margin-left (en-US).
-   */
-  marginStyle?: {
-    margin?: number | DimensionValue;
-    marginLeft?: number | DimensionValue;
-    marginRight?: number | DimensionValue;
-    marginTop?: number | DimensionValue;
-    marginBottom?: number | DimensionValue;
-  };
-
-  /**
-   * A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (padding-top, padding-right, padding-bottom, padding-left).
-   */
-  paddingStyle?: {
-    padding?: number | DimensionValue;
-    paddingLeft?: number | DimensionValue;
-    paddingRight?: number | DimensionValue;
-    paddingTop?: number | DimensionValue;
-    paddingBottom?: number | DimensionValue;
-  };
-
-  /**
-   * A propriedade CSS height define a altura de um elemento. A altura de um elemento é a distância do topo da borda superior do elemento ao fundo da borda inferior.
-   */
-  height?: number | DimensionValue;
-
-  /**
-   * A propriedade CSS width define a largura de um elemento. A largura de um elemento é a distância do topo da borda esquerda do elemento ao fundo da borda direita.
-   */
-  width?: number | DimensionValue;
-
-  /**
-   * O fundo abreviado CSS Propriedade define todas as propriedades do estilo de fundo de uma só vez, como cor, imagem, origem e tamanho ou método de repetição. As propriedades dos componentes não definidas no fundo da declaração de valor da propriedade abreviada são definidas como seus valores padrão..
-   */
-  backgroundColor?: string;
-
-  /**
-   * Propriedade texto que sera renderizado pro usuário final
-   */
-  text?: string;
-
-  /**
-   * A propriedade CSS color define o valor da cor de primeiro plano do texto e das decorações de texto de um elemento e define o valor currentcolor. currentcolor pode ser usado como um valor indireto em outras propriedades e é o padrão para outras propriedades de cores, como border-color.
-   */
-  color?: {
-    colorSvg?: string;
-    colorText?: string;
-    colorTextBold?: string;
-    colorTextData?: string;
-  };
-
-  /**
-   * A propriedade abreviada CSS da fonte define todas as propriedades diferentes da fonte de um elemento. Alternativamente, ele define a fonte de um elemento como uma fonte do sistema.
-   */
-  fontStyle?: {
-    font?: string;
-    fontSize?: number;
-    fontWeight?: "100" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "bold";
-    fontFamily?: keyof typeof theme.fonts;
-    letterSpacing?: keyof typeof theme.letterSpacing;
-    lineHeight?: number;
-  };
-
-  /**
-   * A propriedade CSS opacity define o nível de opacidade de um elemento. O valor da opacidade varia de 0 (totalmente transparente) a 1 (totalmente opaco).
-   */
-  disabled?: boolean;
-
-  /**
-   * A propriedade  background do icon da cor.
-   */
-  backgroundColorIcon?: string;
-
-  /**
-   * props que indica o loading do button
-   */
-  isLoading?: boolean;
-}
-
-// /**
-//  * EXPORTS
-//  */
-// export { IGlobalCss };
+/*
+ * IMPORTS
+ */
+import React from "react";
+import { DimensionValue } from "react-native";
+import { theme } from "../theme/theme";
+
+export interface IGlobalCss {
+  /**
+   * A propriedade JSX que define um elemento ou componente filho.
+   */
+  children?: React.ReactNode;
+
+  /**
+   * TestID para testes automático e identificação
+   */
+  testID?: string;
+
+  /**
+   * A propriedade CSS abreviada border define a borda de um elemento. Ele define os valores de largura da borda, estilo da borda e cor da borda.
+   */
+  borderStyled?: {
+    borderStyle?: "solid" | "dotted" | "dashed";
+
+    borderRadius?: number | DimensionValue;
+    borderTopRightRadius?: number | DimensionValue;
+    borderTopLeftRadius?: number | DimensionValue;
+    borderBottomRightRadius?: number | DimensionValue;
+    borderBottomLeftRadius?: number | DimensionValue;
+
+    borderWidth?: number | DimensionValue;
+    borderLeftWidth?: number | DimensionValue;
+    borderRightWidth?: number | DimensionValue;
+    borderTopWidth?: number | DimensionValue;
+    borderBottomWidth?: number | DimensionValue;
+
+    borderColor?: string;
+    borderBottomColor?: string;
+    borderLeftColor?: string;
+    borderRightColor?: string;
+    borderTopColor?: string;
+  };
+
+  /**
+   * Propriedades que define a orientação do button que é usada para representar uma página. Na maioria das vezes, esse valores corresponde ao posicionamento alvo da página impressa, se aplicável.
+   */
+  flexStyle?: {
+    alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+    alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
+    flex?: string | number;
+    flexDirection?: "column" | "column-reverse" | "row" | "row-reverse";
+    flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
+    textAlign?: "auto" | "center" | "left" | "right" | "justify";
+    justifyContent?:
+      | "flex-start"
+      | "flex-end"
+      | "center"
+      | "space-between"
+      | "space-around"
+      | "space-evenly";
+  };
+
+  /**
+   * A propriedade margin do CSS define a área de margem nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: margin-top, margin-right (en-US), margin-bottom, e margin-left (en-US).
+   */
+  marginStyle?: {
+    margin?: number | DimensionValue;
+    marginLeft?: number | DimensionValue;
+    marginRight?: number | DimensionValue;
+    marginTop?: number | DimensionValue;
+    marginBottom?: number | DimensionValue;
+  };
+
+  /**
+   * A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (padding-top, padding-right, padding-bottom, padding-left).
+   */
+  paddingStyle?: {
+    padding?: number | DimensionValue;
+    paddingLeft?: number | DimensionValue;
+    paddingRight?: number | DimensionValue;
+    paddingTop?: number | DimensionValue;
+    paddingBottom?: number | DimensionValue;
+  };
+
+  /**
+   * A propriedade CSS height define a altura de um elemento. A altura de um elemento é a distância do topo da borda superior do elemento ao fundo da borda inferior.
+   */
+  height?: number | DimensionValue;
+
+  /**
+   * A propriedade CSS width define a largura de um elemento. A largura de um elemento é a distância do topo da borda esquerda do elemento ao fundo da borda direita.
+   */
+  width?: number | DimensionValue;
+
+  /**
+   * O fundo abreviado CSS Propriedade define todas as propriedades do estilo de fundo de uma só vez, como cor, imagem, origem e tamanho ou método de repetição. As propriedades dos componentes não definidas no fundo da declaração de valor da propriedade abreviada são definidas como seus valores padrão..
+   */
+  backgroundColor?: string;
+
+  /**
+   * Propriedade texto que sera renderizado pro usuário final
+   */
+  text?: string;
+
+  /**
+   * A propriedade CSS color define o valor da cor de primeiro plano do texto e das decorações de texto de um elemento e define o valor currentcolor. currentcolor pode ser usado como um valor indireto em outras propriedades e é o padrão para outras propriedades de cores, como border-color.
+   */
+  color?: {
+    colorSvg?: string;
+    colorText?: string;
+    colorTextBold?: string;
+    colorTextData?: string;
+  };
+
+  /**
+   * A propriedade abreviada CSS da fonte define todas as propriedades diferentes da fonte de um elemento. Alternativamente, ele define a fonte de um elemento como uma fonte do sistema.
+   */
+  fontStyle?: {
+    font?: string;
+    fontSize?: number;
+    fontWeight?: "100" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "bold";
+    fontFamily?: keyof typeof theme.fonts;
+    letterSpacing?: keyof typeof theme.letterSpacing;
+    lineHeight?: number;
+  };
+
+  /**
+   * A propriedade CSS opacity define o nível de opacidade de um elemento. O valor da opacidade varia de 0 (totalmente transparente) a 1 (totalmente opaco).
+   */
+  disabled?: boolean;
+
+  /**
+   * A propriedade  background do icon da cor.
+   */
+  backgroundColorIcon?: string;
+
+  /**
+   * props que indica o loading do button
+   */
+  isLoading?: boolean;
+}
+
+// /**
+//  * EXPORTS
+//  */
+// export { IGlobalCss };

package/src/styles/global/styles.ts

@@ -1,63 +1,63 @@
-// typing
-import { IGlobalCss } from "./interface";
-
-const stylesGlobal = (props: IGlobalCss) => ({
-  width: props.width,
-  height: props.height,
-  backgroundColor: props.backgroundColor,
-
-  // padding
-
-  padding: props.paddingStyle?.padding,
-  paddingTop: props.paddingStyle?.paddingTop,
-  paddingLeft: props.paddingStyle?.paddingLeft,
-  paddingRight: props.paddingStyle?.paddingRight,
-  paddingBottom: props.paddingStyle?.paddingBottom,
-
-  // margin
-  margin: props.marginStyle?.margin,
-  marginTop: props.marginStyle?.marginTop,
-  marginLeft: props.marginStyle?.marginLeft,
-  marginRight: props.marginStyle?.marginRight,
-  marginBottom: props.marginStyle?.marginBottom,
-
-  // border
-  borderStyle: props.borderStyled?.borderStyle,
-
-  borderRadius: props.borderStyled?.borderRadius,
-  borderTopRightRadius: props.borderStyled?.borderTopRightRadius,
-  borderTopLeftRadius: props.borderStyled?.borderTopLeftRadius,
-  borderBottomRightRadius: props.borderStyled?.borderBottomRightRadius,
-  borderBottomLeftRadius: props.borderStyled?.borderBottomLeftRadius,
-
-  borderWidth: props.borderStyled?.borderWidth,
-  borderLeftWidth: props.borderStyled?.borderLeftWidth,
-  borderRightWidth: props.borderStyled?.borderRightWidth,
-  borderTopWidth: props.borderStyled?.borderTopWidth,
-  borderBottomWidth: props.borderStyled?.borderBottomWidth,
-
-  borderColor: props.borderStyled?.borderColor,
-  borderBottomColor: props.borderStyled?.borderBottomColor,
-  borderLeftColor: props.borderStyled?.borderLeftColor,
-  borderRightColor: props.borderStyled?.borderLeftColor,
-  borderTopColor: props.borderStyled?.borderTopColor,
-
-  // flex
-  flex: props.flexStyle?.flex,
-  flexDirection: props.flexStyle?.flexDirection,
-  alignItems: props.flexStyle?.alignItems,
-  justifyContent: props.flexStyle?.justifyContent,
-  textAlign: props.flexStyle?.textAlign,
-
-  // fonts
-  fontFamily: props.fontStyle?.fontFamily,
-  fontSize: props.fontStyle?.fontSize,
-  fontWeight: props.fontStyle?.fontWeight,
-  lineHeight: props.fontStyle?.lineHeight,
-  letterSpacing: props.fontStyle?.letterSpacing,
-});
-
-/**
- * EXPORTS
- */
-export { stylesGlobal };
+// typing
+import { IGlobalCss } from "./interface";
+
+const stylesGlobal = (props: IGlobalCss) => ({
+  width: props.width,
+  height: props.height,
+  backgroundColor: props.backgroundColor,
+
+  // padding
+
+  padding: props.paddingStyle?.padding,
+  paddingTop: props.paddingStyle?.paddingTop,
+  paddingLeft: props.paddingStyle?.paddingLeft,
+  paddingRight: props.paddingStyle?.paddingRight,
+  paddingBottom: props.paddingStyle?.paddingBottom,
+
+  // margin
+  margin: props.marginStyle?.margin,
+  marginTop: props.marginStyle?.marginTop,
+  marginLeft: props.marginStyle?.marginLeft,
+  marginRight: props.marginStyle?.marginRight,
+  marginBottom: props.marginStyle?.marginBottom,
+
+  // border
+  borderStyle: props.borderStyled?.borderStyle,
+
+  borderRadius: props.borderStyled?.borderRadius,
+  borderTopRightRadius: props.borderStyled?.borderTopRightRadius,
+  borderTopLeftRadius: props.borderStyled?.borderTopLeftRadius,
+  borderBottomRightRadius: props.borderStyled?.borderBottomRightRadius,
+  borderBottomLeftRadius: props.borderStyled?.borderBottomLeftRadius,
+
+  borderWidth: props.borderStyled?.borderWidth,
+  borderLeftWidth: props.borderStyled?.borderLeftWidth,
+  borderRightWidth: props.borderStyled?.borderRightWidth,
+  borderTopWidth: props.borderStyled?.borderTopWidth,
+  borderBottomWidth: props.borderStyled?.borderBottomWidth,
+
+  borderColor: props.borderStyled?.borderColor,
+  borderBottomColor: props.borderStyled?.borderBottomColor,
+  borderLeftColor: props.borderStyled?.borderLeftColor,
+  borderRightColor: props.borderStyled?.borderLeftColor,
+  borderTopColor: props.borderStyled?.borderTopColor,
+
+  // flex
+  flex: props.flexStyle?.flex,
+  flexDirection: props.flexStyle?.flexDirection,
+  alignItems: props.flexStyle?.alignItems,
+  justifyContent: props.flexStyle?.justifyContent,
+  textAlign: props.flexStyle?.textAlign,
+
+  // fonts
+  fontFamily: props.fontStyle?.fontFamily,
+  fontSize: props.fontStyle?.fontSize,
+  fontWeight: props.fontStyle?.fontWeight,
+  lineHeight: props.fontStyle?.lineHeight,
+  letterSpacing: props.fontStyle?.letterSpacing,
+});
+
+/**
+ * EXPORTS
+ */
+export { stylesGlobal };

package/src/styles/global/theme-provider.tsx

@@ -1,10 +1,10 @@
-import React, { createContext, useContext } from "react";
-import { theme } from "../theme/theme";
-
-const ThemeContext = createContext(theme);
-
-export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
-};
-
-export const useTheme = () => useContext(ThemeContext);
+import React, { createContext, useContext } from "react";
+import { theme } from "../theme/theme";
+
+const ThemeContext = createContext(theme);
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
+};
+
+export const useTheme = () => useContext(ThemeContext);

package/src/styles/theme/theme.ts

@@ -2,17 +2,6 @@
  * IMPORTS
  */
 
-const borderWidths = {
-  thin: 1,
-  thin_medium: 2,
-  thin_bold: 6,
-  thick: 4,
-  thick_medium: 8,
-  thick_bold: 12,
-  thick_large: 16,
-  hairline: 999,
-};
-
 const colors = {
   neutral: {
     25: "#FFFFFF",
@@ -21,6 +10,7 @@ const colors = {
     200: "#C6C6C6",
     300: "#F3F3F3",
     400: "#F4F5F6",
+    500: "#FFF1DC",
   },
   black: {
     10: "#000000",
@@ -29,23 +19,20 @@ const colors = {
     180: "#35302B",
   },
   blue: {
-    20: "#0088FF",
     25: "#1E1E1E",
     50: "#1EA7fD",
-    80: "#007BFF",
     100: "#051C3B",
     150: "#2E41F2",
     350: "#357FD6",
     375: "#056CF2",
-    400: "#2D3748",
-    400_50: "#2D374880",
+    525: "#2D3748",
     500: "#050022",
-    525: "#051C3B",
+    400: "#051C3B",
+    800: "#87CEFA",
   },
   red: {
     400: "#D23A1A",
     500: "#C54239",
-    600: "#B3261E",
     800: "#E72626",
     900: "#9F0000",
   },
@@ -64,8 +51,7 @@ const colors = {
     950: "#94a3b8",
   },
   green: {
-    100: "#20AD4880",
-    150: "#00B37E",
+    100: "#D4EDDA",
     200: "#25BA76",
     250: "#20AD48",
     400: "#49C63E",
@@ -77,10 +63,10 @@ const colors = {
     150: "#FFA41C",
   },
   yellow: {
+    120: "#FFE8C2", // laranja claro - levando em consideração opacidade de 20
     100: "#DFAE00",
     50: "#F0CA4B",
     75: "#F59E0B",
-    90: "#957C5F",
   },
 };
 
@@ -114,6 +100,7 @@ const fontSizes = {
 };
 
 const margins = {
+  fn: 2,
   "1xs": 6,
   "2xs": 10,
   xs: 12,
@@ -132,6 +119,7 @@ const margins = {
 };
 
 const paddings = {
+  "3xs": 6,
   "2xs": 10,
   xs: 12,
   sm: 14,
@@ -148,6 +136,18 @@ const paddings = {
   "9xl": 128,
 };
 
+const borderWidths = {
+  thin: 1,
+  thin_medium: 2,
+  thin_bold: 6,
+  thick: 4,
+  thick_medium: 8,
+  thick_bold: 12,
+  thick_large: 16,
+  hairline: 999,
+  "2xl": 24,
+};
+
 const shadows = {
   z1: "0px 1px 0px rgba(0, 0, 0, 0.3), 0px 1px 0px 1px rgba(0, 0, 0, 0.15)",
   z2: "0px 1px 2px rgba(0, 0, 0, 0.3)",
@@ -176,6 +176,7 @@ const lineHeight = {
   "8xl": 96,
   "9xl": 128,
 };
+
 /**
  * EXPORTSS
  */