styled-svelte - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

package.json

 {
   "name": "styled-svelte",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Svelte styled components package",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -472,5 +472,5 @@ # styled-svelte
 
-// Access theme from Props and assign Types on styled
+// Object Styles, access theme from Props and assign Types on styled
 const Button = styled<ThemePallete>('button', (props) => ({
-  color: props.theme[props.theme.mode].colors.primary, // props.theme work with ThemeProvider only
+  color: props.theme[props.theme.mode].colors.primary,
   border: 'none',
@@ -491,6 +491,14 @@ outline: 'none',
 
-// OR Access theme from Props and assign Types on props and destructuring
-const Button = styled('button', ({ theme }: Props<ThemePallete>) => ({
-  //
-}));
+// Css Styles, access theme from Props and assign Types on props
+const Button = styled.button`
+  color: ${(props:Props<ThemePallete>) => props.theme[props.theme.mode].colors.primary};
+  border: none;
+  outline: none;
+  padding: 10px 20px;
+  cursor: pointer;
+  backgroundColor: ${(props:Props<ThemePallete>) => props.theme[props.theme.mode].backgroundColors.light};
+  &:hover {
+    backgroundColor: ${(props:Props<ThemePallete>) => props.theme[props.theme.mode].backgroundColors.lighter};
+  }
+}`;
 
@@ -514,2 +522,4 @@ // OR useTheme() API
 
+Remark: `props.theme` work with `ThemeProvider` only
+
 #### Toggle Dark Mode
@@ -516,0 +526,0 @@

No alert changes

Improved metrics

Total package byte prevSize

152095

0.25%

Number of lines in readme file

614

1.66%

No dependency changes