removing background from sprinkles

kadena-community · Nov 8, 2023 · a09cc56 · a09cc56
1 parent 3febd50
commit a09cc56
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 13 deletions.
diff --git a/packages/apps/docs/src/components/Layout/components/Footer/styles.css.ts b/packages/apps/docs/src/components/Layout/components/Footer/styles.css.ts
@@ -5,7 +5,7 @@ import { $$footerMenu, $$pageWidth } from '../../global.css';
 export const footerWrapperClass = style([
   sprinkles({
     position: 'relative',
-    background: '$gray90',
+    backgroundColor: '$gray90',
     marginTop: '$40',
   }),
   {

diff --git a/packages/apps/docs/src/components/Layout/components/Menu/menu.css.ts b/packages/apps/docs/src/components/Layout/components/Menu/menu.css.ts
@@ -7,7 +7,7 @@ export const menuClass = style([
     position: 'fixed',
     height: '100%',
     width: '100%',
-    background: '$background',
+    backgroundColor: '$background',
     overflow: 'hidden',
     top: '$17',
     bottom: 0,
@@ -31,7 +31,7 @@ export const menuClass = style([
         bottom: 'auto',
         height: `calc(100vh - ${vars.sizes.$18})`,
         transform: 'translateX(0)',
-        background: 'transparent',
+        backgroundColor: 'transparent',
         paddingBottom: vars.sizes.$40,
       },
     }),
@@ -76,7 +76,7 @@ export const menuBackClass = style([
     cursor: 'pointer',
   }),
   {
-    background: 'rgba(0,0,0,.5)',
+    backgroundColor: 'rgba(0,0,0,.5)',
     border: 0,
     opacity: 0,
     transform: 'translateX(-100%)',

diff --git a/packages/apps/docs/src/components/Layout/components/SideMenu/sideMenu.css.ts b/packages/apps/docs/src/components/Layout/components/SideMenu/sideMenu.css.ts
@@ -44,11 +44,9 @@ export const sideMenuTitleClass = style([
     marginY: '$4',
     textAlign: 'left',
     fontSize: '$sm',
+    backgroundColor: 'transparent',
+    border: 'none',
   }),
-  {
-    background: 'transparent',
-    border: '0',
-  },
 ]);
 
 export const sideMenuTitleButtonClass = style([

diff --git a/packages/apps/docs/src/components/Markdown/Code/style.css.ts b/packages/apps/docs/src/components/Markdown/Code/style.css.ts
@@ -164,7 +164,7 @@ export const codeTitle = style([
     display: 'none',
     alignItems: 'center',
     fontFamily: '$main',
-    background: '$blue70',
+    backgroundColor: '$blue70',
     color: '$white',
     fontWeight: '$bold',
     textTransform: 'capitalize',

diff --git a/packages/apps/tools/src/pages/transactions/cross-chain-transfer-tracker/styles.css.ts b/packages/apps/tools/src/pages/transactions/cross-chain-transfer-tracker/styles.css.ts
@@ -31,7 +31,7 @@ export const accountFormStyle = style([
     paddingTop: '$10',
     paddingRight: '$10',
     paddingLeft: '$10',
-    background: '$gray40',
+    backgroundColor: '$gray40',
   }),
   {
     alignSelf: 'stretch',
@@ -55,7 +55,7 @@ export const formHeaderStyle = style([
     paddingLeft: '$10',
     alignItems: 'flex-start',
     gap: '$2',
-    background: '$gray40',
+    backgroundColor: '$gray40',
   }),
   {
     alignSelf: 'stretch',

diff --git a/packages/libs/react-ui/src/components/TrackerCard/TrackerCard.css.ts b/packages/libs/react-ui/src/components/TrackerCard/TrackerCard.css.ts
@@ -82,7 +82,7 @@ export const CardContainer = style([
     borderRadius: '$sm',
     alignItems: 'flex-start',
     fontSize: '$sm',
-    background: {
+    backgroundColor: {
       lightMode: '$white',
       darkMode: '$gray100',
     },

diff --git a/packages/libs/react-ui/src/styles/sprinkles.css.ts b/packages/libs/react-ui/src/styles/sprinkles.css.ts
@@ -26,6 +26,7 @@ const systemProperties = defineProperties({
     wordBreak: ['normal', 'keep-all', 'break-word', 'break-all'],
     listStyleType: ['none'],
     objectFit: ['cover', 'contain'],
+    background: ['none'],
   },
 });
 
@@ -37,7 +38,6 @@ const colorProperties = defineProperties({
   defaultCondition: 'lightMode',
   properties: {
     color: { ...vars.colors, inherit: 'inherit' },
-    background: { ...vars.colors, none: 'none' },
     backgroundColor: { ...vars.colors, transparent: 'transparent' },
     borderColor: vars.colors,
   },