feat: style package for theming and styled components (#362)

* feat: style package for theming and styled components

* fix: addressing PR feedback on style package

* fix: we need badges

* fix: sideEffects false for better tree shaking

* fix: readme title nit

packages/superset-ui-style/README.md

@@ -0,0 +1,29 @@
+# `@superset-ui/style`
+
+[![Version](https://img.shields.io/npm/v/@superset-ui/style.svg?style=flat)](https://img.shields.io/npm/v/@superset-ui/style.svg?style=flat)
+[![David (path)](https://img.shields.io/david/apache-superset/superset-ui.svg?path=packages%2Fsuperset-ui-style&style=flat-square)](https://david-dm.org/apache-superset/superset-ui?path=packages/superset-ui-style)
+
+Provides a style object containing a variety of style parameters for theming Superset components with Emotion. See [SIP-37](https://github.com/apache/incubator-superset/issues/9123) for additional context. This will eventually allow for custom themes to override default Superset styles. These parameters (and the styled-components/emotion design pattern) will, over time, be used to whittle away at widely-scoped LESS styles, making it easier to build and (re)style Superset components.
+
+## Usage
+
+```
+import { ThemeProvider } from 'emotion-theming';
+import styled, { supersetTheme } from '@superset-ui/style';
+
+// use emotion api as normal, but the theme uses the correct types
+const MyHeader = styled.h1`
+  color: ${props => props.theme.colors.primary.base};
+  font-family: sans-serif;
+`
+
+class App extends React.Component {
+  render() {
+    return (
+      <ThemeProvider theme={supersetTheme}>
+        <MyHeader>Properly styled text!</MyHeader>
+      </ThemeProvider>
+    );
+  }
+}
+```

packages/superset-ui-style/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@superset-ui/style",
+  "version": "0.12.13",
+  "description": "Component styles for Superset",
+  "author": "Aaron Suddjian <aaron@preset.io>",
+  "homepage": "https://github.com/apache-superset/superset-ui#readme",
+  "license": "Apache-2.0",
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "sideEffects": false,
+  "files": [
+    "esm",
+    "lib"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/apache-superset/superset-ui.git"
+  },
+  "keywords": [
+    "superset"
+  ],
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "bugs": {
+    "url": "https://github.com/apache-superset/superset-ui/issues"
+  },
+  "dependencies": {
+    "@emotion/core": "^10.0.28",
+    "@emotion/styled": "^10.0.27"
+  }
+}

packages/superset-ui-style/src/index.ts

@@ -0,0 +1,44 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import styled, { CreateStyled } from '@emotion/styled';
+
+const defaultTheme = {
+  borderRadius: '4px',
+  colors: {
+    primary: {
+      base: '#20A7C9',
+    },
+    secondary: {
+      base: '#444E7C',
+      dark1: '#363E63',
+      dark2: '#282E4A',
+      dark3: '#1B1F31',
+      light1: '#8E94B0',
+      light2: '#B4B8CA',
+      light3: '#D9DBE4',
+      light4: '#ECEEF2',
+      light5: '#F5F5F8',
+    },
+  },
+  gridUnit: '4px',
+};
+
+export default styled as CreateStyled<typeof defaultTheme>;
+
+export const supersetTheme = defaultTheme;

packages/superset-ui-style/test/index.test.ts

@@ -0,0 +1,11 @@
+import styled, { supersetTheme } from '../src';
+
+describe('@superset-ui/style package', () => {
+  it('exports a theme', () => {
+    expect(typeof supersetTheme).toBe('object');
+  });
+
+  it('exports styled component templater', () => {
+    expect(typeof styled.div).toBe('function');
+  });
+});