Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: introduce style package #1

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions packages/style/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
# `style`

> TODO: description
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
> TODO: description
> 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

```
const style = require('style');

// TODO: DEMONSTRATE API
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can put together a little sample code for this if you want. Could poach an example from Tai's PR (using the package import, of course) , and add a link to the Emotion docs.

```
7 changes: 7 additions & 0 deletions packages/style/__tests__/style.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
'use strict';

const style = require('..');

describe('style', () => {
it('needs tests');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmmm... not sure what tests to add here... checking for the existence of styles (in case of accidental deletion) seems a little arbitrary. Really it seems like the components themselves should test for styles. Any thoughts on what's applicable here?

});
29 changes: 29 additions & 0 deletions packages/style/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"name": "style",
"version": "0.12.13",
"description": "Component styles for Superset",
"author": "Aaron Suddjian <[email protected]>",
"homepage": "https://github.com/apache-superset/superset-ui#readme",
"license": "Apache-2.0",
"main": "lib/index.js",
"files": [
"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"
}
}
44 changes: 44 additions & 0 deletions packages/style/src/index.ts
Original file line number Diff line number Diff line change
@@ -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;
Loading