some fixes

Author: yceballost

.storybook/preview.tsx

@@ -44,7 +44,6 @@ const getSkin = (searchParams: URLSearchParams) => {
         BLAU_SKIN,
         TU_SKIN,
         ESIMFLAG_SKIN,
-        UNBRANDED_SKIN,
     ].find((skin) => skin === qsSkin);
 };
 
@@ -134,7 +133,7 @@ const MisticaThemeProvider = ({
                 <ThemeContextProvider theme={getTheme(skin as string, platform, colorScheme)}>
                     <OverscrollColorProvider>
                         {skin === VIVO_NEW_SKIN && <style>{`body {font-family: "Vivo Type"}`}</style>}
-                        {(skin === TELEFONICA_SKIN || skin === TU_SKIN) && (
+                        {(skin === TELEFONICA_SKIN || skin === TU_SKIN || skin === UNBRANDED_SKIN) && (
                             <style>{`body {font-family: "Telefonica Sans"}`}</style>
                         )}
                         {(skin === MOVISTAR_SKIN ||

playroom/frame-component.tsx

@@ -21,6 +21,7 @@ import {
     ESIMFLAG_SKIN,
     VIVO_SKIN,
     BLAU_SKIN,
+    UNBRANDED_SKIN,
 } from '../src';
 import {Movistar_New as defaultThemeConfig} from './themes';
 
@@ -90,7 +91,7 @@ const App = ({children, skinName}: {children: React.ReactNode; skinName: string}
         body {background: ${skinVars.colors.background}}
 
         ${skinName === VIVO_NEW_SKIN ? 'body {font-family: "Vivo Type"}' : ''}
-        ${skinName === TELEFONICA_SKIN || skinName === TU_SKIN ? 'body {font-family: "Telefonica Sans"}' : ''}
+        ${skinName === TELEFONICA_SKIN || skinName === TU_SKIN || skinName === UNBRANDED_SKIN ? 'body {font-family: "Telefonica Sans"}' : ''}
         ${
             skinName === MOVISTAR_SKIN ||
             skinName === O2_SKIN ||

playroom/themes.tsx

@@ -16,10 +16,12 @@ export const O2_New: ThemeConfig = {...themes.O2_New, ...common};
 export const Telefonica: ThemeConfig = {...themes.Telefonica, ...common};
 export const Blau: ThemeConfig = {...themes.Blau, ...common};
 export const Esimflag: ThemeConfig = {...themes.Esimflag, ...common};
+export const Unbranded: ThemeConfig = {...themes.Unbranded, ...common};
 
 export const Movistar_New_iOS: ThemeConfig = {...Movistar_New, platformOverrides: {platform: 'ios'}};
 export const Vivo_New_iOS: ThemeConfig = {...Vivo_New, platformOverrides: {platform: 'ios'}};
 export const O2_New_iOS: ThemeConfig = {...O2_New, platformOverrides: {platform: 'ios'}};
 export const Telefonica_iOS: ThemeConfig = {...Telefonica, platformOverrides: {platform: 'ios'}};
 export const Blau_iOS: ThemeConfig = {...Blau, platformOverrides: {platform: 'ios'}};
 export const Esimflag_iOS: ThemeConfig = {...Esimflag, platformOverrides: {platform: 'ios'}};
+export const Unbranded_iOS: ThemeConfig = {...Unbranded, platformOverrides: {platform: 'ios'}};

src/skins/unbranded.tsx

@@ -325,11 +325,11 @@ export const getUnbrandedSkin: GetKnownSkin = () => {
             cardFooterOverlay: applyAlpha(palette.black, 0.7),
         },
         darkModeColors: {
-            background: palette.neutral900,
-            backgroundAlternative: palette.neutral900,
-            backgroundBrand: palette.neutral900,
-            backgroundNegative: palette.neutral900,
-            backgroundBrandSecondary: palette.neutral900,
+            background: palette.black,
+            backgroundAlternative: palette.black,
+            backgroundBrand: palette.black,
+            backgroundNegative: palette.black,
+            backgroundBrandSecondary: palette.black,
             backgroundContainer: palette.neutral850,
             backgroundContainerError: palette.neutral850,
             backgroundContainerHover: applyAlpha(palette.white, 0.05),
@@ -346,10 +346,10 @@ export const getUnbrandedSkin: GetKnownSkin = () => {
             backgroundSkeletonInverse: palette.neutral800,
             backgroundSkeletonNegative: palette.neutral800,
             backgroundSkeletonBrand: palette.neutral800,
-            backgroundBrandTop: palette.neutral900,
-            backgroundBrandBottom: palette.neutral900,
+            backgroundBrandTop: palette.black,
+            backgroundBrandBottom: palette.black,
             appBarBackground: palette.neutral850,
-            navigationBarBackground: palette.neutral900,
+            navigationBarBackground: palette.black,
             backgroundDropZoneHover: applyAlpha(palette.white, 0.05),
             backgroundDropZoneDragover: applyAlpha(palette.white, 0.08),
             backgroundDropZoneBrandHover: applyAlpha(palette.white, 0.03),
@@ -614,16 +614,16 @@ export const getUnbrandedSkin: GetKnownSkin = () => {
             avatar: '50%',
             bar: '999px',
             button: '32px',
-            checkbox: '4px',
-            container: '24px',
+            checkbox: '2px',
+            container: '16px',
             indicator: '24px',
             chip: '24px',
-            tag: '10px',
-            input: '16px',
-            legacyDisplay: '24px',
-            popup: '16px',
-            sheet: '24px',
-            mediaSmall: '12px',
+            tag: '24px',
+            input: '12px',
+            legacyDisplay: '16px',
+            popup: '8px',
+            sheet: '16px',
+            mediaSmall: '8px',
         },
         textPresets: {
             button: {weight: 'medium'},