sapo-components-ui-rn 1.0.21 → 1.0.23

package/dist/styles/themes/tokens.d.ts

@@ -247,6 +247,13 @@ export declare const tokens: {
                         textWarningPressed: string;
                         selectBackgroundDisabled: string;
                         selectIconDisabled: string;
+                        borderCriticalInverseDefault: string;
+                        borderCriticalInverseHover: string;
+                        borderCriticalInversePressed: string;
+                        borderErrorInverseDefault: string;
+                        borderPrimaryFocused: string;
+                        borderWarningInverseDefault: string;
+                        borderSuccessInverseDefault: string;
                     };
                 };
                 light: {
@@ -381,6 +388,13 @@ export declare const tokens: {
                         textWarningPressed: string;
                         selectBackgroundDisabled: string;
                         selectIconDisabled: string;
+                        borderCriticalInverseDefault: string;
+                        borderCriticalInverseHover: string;
+                        borderCriticalInversePressed: string;
+                        borderErrorInverseDefault: string;
+                        borderPrimaryFocused: string;
+                        borderWarningInverseDefault: string;
+                        borderSuccessInverseDefault: string;
                     };
                 };
             };
@@ -646,6 +660,13 @@ export declare const ThemeColors: {
             textWarningPressed: string;
             selectBackgroundDisabled: string;
             selectIconDisabled: string;
+            borderCriticalInverseDefault: string;
+            borderCriticalInverseHover: string;
+            borderCriticalInversePressed: string;
+            borderErrorInverseDefault: string;
+            borderPrimaryFocused: string;
+            borderWarningInverseDefault: string;
+            borderSuccessInverseDefault: string;
         };
     };
     light: {
@@ -780,6 +801,13 @@ export declare const ThemeColors: {
             textWarningPressed: string;
             selectBackgroundDisabled: string;
             selectIconDisabled: string;
+            borderCriticalInverseDefault: string;
+            borderCriticalInverseHover: string;
+            borderCriticalInversePressed: string;
+            borderErrorInverseDefault: string;
+            borderPrimaryFocused: string;
+            borderWarningInverseDefault: string;
+            borderSuccessInverseDefault: string;
         };
     };
 };

package/dist/types.d.ts

@@ -13,14 +13,13 @@ export type Fonts = {
 };
 type Mode = "adaptive" | "exact";
 export type ThemeColors = {
-    primary?: string;
-    background?: string;
-    card?: string;
-    text?: string;
-    border?: string;
-    gray?: string;
-    backgroundLight?: string;
-    elevation?: MD3ElevationColors;
+    primary: string;
+    background: string;
+    card: string;
+    text: string;
+    border: string;
+    gray: string;
+    backgroundLight: string;
     backgroundPrimary: string;
     backgroundSecondary: string;
     borderBrandDefault: string;
@@ -30,19 +29,19 @@ export type ThemeColors = {
     borderCriticalInverseDefault: string;
     borderCriticalInverseHover: string;
     borderCriticalInversePressed: string;
-    borderErrorInverseDefault: string;
-    borderPrimaryFocused: string;
-    borderWarningInverseDefault: string;
-    borderSuccessInverseDefault: string;
     borderErrorDefault: string;
+    borderErrorInverseDefault: string;
     borderInfoDefault: string;
     borderPrimaryDefault: string;
     borderPrimaryDisabled: string;
     borderPrimaryHovered: string;
     borderPrimaryInverseDefault: string;
     borderPrimaryPressed: string;
+    borderPrimaryFocused: string;
     borderSuccessDefault: string;
+    borderSuccessInverseDefault: string;
     borderWarningDefault: string;
+    borderWarningInverseDefault: string;
     iconBrandDefault: string;
     iconCriticalDefault: string;
     iconErrorDefault: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sapo-components-ui-rn",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "description": "React Native UI Components Library",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/styles/themes/DarkTheme.tsx

@@ -14,14 +14,13 @@ export const DarkTheme: AppTheme = {
   mode: "adaptive",
   version: 3,
   colors: {
-    elevation: {
-      level0: "transparent",
-      level1: "rgb(37, 35, 42)",
-      level2: "rgb(44, 40, 49)",
-      level3: "rgb(49, 44, 56)",
-      level4: "rgb(51, 46, 58)",
-      level5: "rgb(52, 49, 63)",
-    },
+    primary: blue.BLUE100,
+    background: white.WHITE100,
+    card: ink.INK100,
+    text: ink.INK100,
+    border: ink.INK40,
+    gray: ink.INK60,
+    backgroundLight: ink.INK10,
     //new theme colors
     backgroundPrimary: ink.INK5,
     backgroundSecondary: white.WHITE100,

package/src/styles/themes/LightTheme.tsx

@@ -13,14 +13,13 @@ export const LightTheme: AppTheme = {
   roundness: 8,
   version: 3,
   colors: {
-    elevation: {
-      level0: "transparent",
-      level1: "rgb(247, 243, 249)",
-      level2: "rgb(243, 237, 246)",
-      level3: "rgb(238, 232, 244)",
-      level4: "rgb(236, 230, 243)",
-      level5: "rgb(233, 227, 241)",
-    },
+    primary: blue.BLUE100,
+    background: white.WHITE100,
+    card: ink.INK100,
+    text: ink.INK100,
+    border: ink.INK40,
+    gray: ink.INK60,
+    backgroundLight: ink.INK10,
     //new theme colors
     backgroundPrimary: ink.INK5,
     backgroundSecondary: white.WHITE100,

package/src/styles/themes/tokens.tsx

@@ -13,12 +13,12 @@ const ref = {
     dark: {
       colors: {
         primary: blue.BLUE100,
-        background: ink.INK100,
-        card: white.WHITE100,
-        text: white.WHITE100,
-        border: ink.INK10,
+        background: white.WHITE100,
+        card: ink.INK100,
+        text: ink.INK100,
+        border: ink.INK40,
         gray: ink.INK60,
-        backgroundLight: ink.INK80,
+        backgroundLight: ink.INK10,
         //new theme colors
         backgroundPrimary: ink.INK5,
         backgroundSecondary: white.WHITE100,
@@ -32,7 +32,7 @@ const ref = {
         borderPrimaryDisabled: ink.INK10,
         borderPrimaryHovered: ink.INK20,
         borderPrimaryInverseDefault: blue.BLUE100,
-        borderPrimaryPressed: blue.BLUE100,
+        borderPrimaryPressed: ink.INK20,
         borderSuccessDefault: green.GREEN100,
         borderWarningDefault: yellow.YELLOW100,
         iconBrandDefault: blue.BLUE100,
@@ -77,14 +77,14 @@ const ref = {
         surfaceInfoInversePressed: blue.BLUE40,
         surfaceInfoPressed: blue.BLUE120,
         surfacePrimaryDefault: white.WHITE100,
-        surfacePrimaryDisabled: ink.INK10,
+        surfacePrimaryDisabled: ink.INK5,
         surfacePrimaryHover: ink.INK5,
         surfacePrimaryInverseDefault: ink.INK80,
         surfacePrimaryInverseHover: ink.INK60,
         surfacePrimaryInversePressed: ink.INK40,
         surfacePrimaryPressed: ink.INK10,
         surfaceSecondaryDefault: ink.INK5,
-        surfaceSecondaryDisabled: ink.INK10,
+        surfaceSecondaryDisabled: ink.INK5,
         surfaceSecondaryHover: ink.INK10,
         surfaceSecondaryPressed: ink.INK20,
         surfaceSuccessDefault: green.GREEN100,
@@ -143,6 +143,13 @@ const ref = {
         textWarningPressed: yellow.YELLOW_STATUS,
         selectBackgroundDisabled: white.WHITE40,
         selectIconDisabled: white.WHITE40,
+        borderCriticalInverseDefault: red.RED40,
+        borderCriticalInverseHover: red.RED20,
+        borderCriticalInversePressed: red.RED60,
+        borderErrorInverseDefault: red.RED40,
+        borderPrimaryFocused: blue.BLUE100,
+        borderWarningInverseDefault: yellow.YELLOW40,
+        borderSuccessInverseDefault: green.GREEN40,
       },
     },
     light: {
@@ -167,7 +174,7 @@ const ref = {
         borderPrimaryDisabled: ink.INK10,
         borderPrimaryHovered: ink.INK20,
         borderPrimaryInverseDefault: blue.BLUE100,
-        borderPrimaryPressed: blue.BLUE100,
+        borderPrimaryPressed: ink.INK20,
         borderSuccessDefault: green.GREEN100,
         borderWarningDefault: yellow.YELLOW100,
         iconBrandDefault: blue.BLUE100,
@@ -278,6 +285,13 @@ const ref = {
         textWarningPressed: yellow.YELLOW_STATUS,
         selectBackgroundDisabled: white.WHITE40,
         selectIconDisabled: white.WHITE40,
+        borderCriticalInverseDefault: red.RED40,
+        borderCriticalInverseHover: red.RED20,
+        borderCriticalInversePressed: red.RED60,
+        borderErrorInverseDefault: red.RED40,
+        borderPrimaryFocused: blue.BLUE100,
+        borderWarningInverseDefault: yellow.YELLOW40,
+        borderSuccessInverseDefault: green.GREEN40,
       },
     },
   },

package/src/types.ts

@@ -29,17 +29,16 @@ export type Fonts = {
 type Mode = "adaptive" | "exact";
 
 export type ThemeColors = {
-  primary?:string;
-  background?:string;
-  card?:string;
-  text?:string;
-  border?:string;
-  gray?:string;
-  backgroundLight?:string;
-  elevation?: MD3ElevationColors;
-  //background
+  primary: string;
+  background: string;
+  card: string;
+  text: string;
+  border: string;
+  gray: string;
+  backgroundLight: string;
   backgroundPrimary: string;
   backgroundSecondary: string;
+
   borderBrandDefault: string;
   borderCriticalDefault: string;
   borderCriticalHover: string;
@@ -47,19 +46,20 @@ export type ThemeColors = {
   borderCriticalInverseDefault: string;
   borderCriticalInverseHover: string;
   borderCriticalInversePressed: string;
-  borderErrorInverseDefault: string;
-  borderPrimaryFocused: string;
-  borderWarningInverseDefault: string;
-  borderSuccessInverseDefault: string;
   borderErrorDefault: string;
+  borderErrorInverseDefault: string;
   borderInfoDefault: string;
   borderPrimaryDefault: string;
   borderPrimaryDisabled: string;
   borderPrimaryHovered: string;
   borderPrimaryInverseDefault: string;
   borderPrimaryPressed: string;
+  borderPrimaryFocused: string;
   borderSuccessDefault: string;
+  borderSuccessInverseDefault: string;
   borderWarningDefault: string;
+  borderWarningInverseDefault: string;
+
   iconBrandDefault: string;
   iconCriticalDefault: string;
   iconErrorDefault: string;
@@ -73,6 +73,7 @@ export type ThemeColors = {
   iconPrimaryPressed: string;
   iconSuccessDefault: string;
   iconWarningDefault: string;
+
   surfaceBrandDefault: string;
   surfaceBrandDisabled: string;
   surfaceBrandHover: string;
@@ -80,6 +81,7 @@ export type ThemeColors = {
   surfaceBrandInverseHover: string;
   surfaceBrandInversePressed: string;
   surfaceBrandPressed: string;
+
   surfaceCriticalDefault: string;
   surfaceCriticalDisabled: string;
   surfaceCriticalHover: string;
@@ -87,6 +89,7 @@ export type ThemeColors = {
   surfaceCriticalInverseHover: string;
   surfaceCriticalInversePressed: string;
   surfaceCriticalPressed: string;
+
   surfaceErrorDefault: string;
   surfaceErrorDisabled: string;
   surfaceErrorHover: string;
@@ -94,6 +97,7 @@ export type ThemeColors = {
   surfaceErrorInverseHover: string;
   surfaceErrorInversePressed: string;
   surfaceErrorPressed: string;
+
   surfaceInfoDefault: string;
   surfaceInfoDisabled: string;
   surfaceInfoHover: string;
@@ -101,6 +105,7 @@ export type ThemeColors = {
   surfaceInfoInverseHover: string;
   surfaceInfoInversePressed: string;
   surfaceInfoPressed: string;
+
   surfacePrimaryDefault: string;
   surfacePrimaryDisabled: string;
   surfacePrimaryHover: string;
@@ -108,10 +113,12 @@ export type ThemeColors = {
   surfacePrimaryInverseHover: string;
   surfacePrimaryInversePressed: string;
   surfacePrimaryPressed: string;
+
   surfaceSecondaryDefault: string;
   surfaceSecondaryDisabled: string;
   surfaceSecondaryHover: string;
   surfaceSecondaryPressed: string;
+
   surfaceSuccessDefault: string;
   surfaceSuccessDisabled: string;
   surfaceSuccessHover: string;
@@ -119,6 +126,7 @@ export type ThemeColors = {
   surfaceSuccessInverseHover: string;
   surfaceSuccessInversePressed: string;
   surfaceSuccessPressed: string;
+
   surfaceWarningDefault: string;
   surfaceWarningDisabled: string;
   surfaceWarningHover: string;
@@ -126,6 +134,7 @@ export type ThemeColors = {
   surfaceWarningInverseHover: string;
   surfaceWarningInversePressed: string;
   surfaceWarningPressed: string;
+
   textDefault: string;
   textDisabled: string;
   textPlaceholder: string;
@@ -166,6 +175,7 @@ export type ThemeColors = {
   textWarningDisabled: string;
   textWarningHovered: string;
   textWarningPressed: string;
+
   selectBackgroundDisabled: string;
   selectIconDisabled: string;
 };