[~] Fix url color in styled-component

denvash · Sep 28, 2019 · 64adb1c · 64adb1c
1 parent f2e79c5
commit 64adb1c
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 22 deletions.
diff --git a/demo/statelessfunctionalreact.js b/demo/statelessfunctionalreact.js
@@ -1,3 +1,15 @@
+const GlobalStyle = createGlobalStyle`
+  @font-face {
+    font-family: 'Calibre';
+    src: url(${fontFamilies.CalibreLightWOFF2}) format('woff2'),
+    url(${fontFamilies.CalibreLightWOFF}) format('woff'),
+    url(${fontFamilies.CalibreLightTTF}) format('truetype');
+    font-weight: 300;
+    font-style: normal;
+    font-display: auto;
+  }
+`;
+
 const StyledIcon = styled(Icon)`
   svg {
     height: calc(${({ dimension }) => dimension || '24px'} + 3vw);
@@ -6,33 +18,37 @@ const StyledIcon = styled(Icon)`
 `;
 
 // I use this syntax when my component fits on one line
-const ListItem = props => <li className="list-item">{props.item.name}</li>
+const ListItem = props => <li className="list-item">{props.item.name}</li>;
 
 // I use this when my component has no logic outside JSX
 const List = ({ items }) => (
-  <ul className="list">{items.map(item => <ListItem item={item} />)}</ul>
-)
+  <ul className="list">
+    {items.map(item => (
+      <ListItem item={item} />
+    ))}
+  </ul>
+);
 
 // I use this when the component needs logic outside JSX.
 const Body = props => {
-  let items = transformItems(props.rawItems)
+  let items = transformItems(props.rawItems);
   return (
     <div>
       <h1>{props.header}</h1>
       <List items={items} />
     </div>
-  )
-}
+  );
+};
 
 // This is equivalent to the last example
 function Page(props, context) {
   return (
     <div>
       <Body header="My List" rawItems={props.rawItems} />
     </div>
-  )
+  );
 }
 // propTypes and contextTypes are supported
 Page.propTypes = {
   rawItems: React.PropTypes.array.isRequired
-}
+};
diff --git a/themes/summer-time-vscode-theme.json b/themes/summer-time-vscode-theme.json
@@ -1199,25 +1199,21 @@
       }
     },
     {
-      "scope": "text.html.markdown",
-      "settings": {
-        "foreground": "#f0f0f0"
-      }
-    },
-    {
-      "scope": "text.html.derivative",
-      "settings": {
-        "foreground": "#f0f0f0"
-      }
-    },
-    {
-      "scope": "markup.bold",
+      "scope": [
+        "markup.bold",
+        "meta.var.expr.js",
+        "text.html.derivative",
+        "meta.function.calc.css"
+      ],
       "settings": {
         "foreground": "#ECF6FF"
       }
     },
     {
-      "scope": "string.other.link",
+      "scope": [
+        "string.other.link",
+        "meta.property-list.scss"
+      ],
       "settings": {
         "foreground": "#A8F79A"
       }