forked from carbon-design-system/carbon
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(themes): add themes package (carbon-design-system#239)
* refactor(colors): move tokens out of colors package * feat(themes): add themes package * docs: run doctoc and update colors guide * chore: run sync * chore(project): update offline mirror * chore(project): add scss to gitignore in themes
- Loading branch information
Showing
26 changed files
with
5,783 additions
and
122 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,4 +6,4 @@ | |
| */ | ||
|
|
||
| export * from './colors'; | ||
| export * from './tokens'; | ||
| export * from './rgb'; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| /** | ||
| * Copyright IBM Corp. 2018, 2018 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| /** | ||
| * Parse a given hexcode string into an rgba statement with the given opacity | ||
| * @param {string} hexcode | ||
| * @param {number} opacity | ||
| * @return {string} | ||
| */ | ||
| export function rgba(hexcode, opacity) { | ||
| const values = [ | ||
| hexcode.substring(1, 3), | ||
| hexcode.substring(3, 5), | ||
| hexcode.substring(5, 7), | ||
| ].map(string => parseInt(string, 16)); | ||
| return `rgba(${values[0]}, ${values[1]}, ${values[2]}, ${opacity})`; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| scss |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| # @carbon/themes | ||
|
|
||
| > Themes for applying color in the Carbon Design System | ||
| ## Getting started | ||
|
|
||
| To install `@carbon/themes` in your project, you will need to run the | ||
| following command using [npm](https://www.npmjs.com/): | ||
|
|
||
| ```bash | ||
| npm install -S @carbon/themes | ||
| ``` | ||
|
|
||
| If you prefer [Yarn](https://yarnpkg.com/en/), use the following | ||
| command instead: | ||
|
|
||
| ```bash | ||
| yarn add @carbon/themes | ||
| ``` | ||
|
|
||
| ## 🙌 Contributing | ||
|
|
||
| We're always looking for contributors to help us fix bugs, build new | ||
| features, or help us improve the project documentation. If you're | ||
| interested, definitely check out our [Contributing Guide](/.github/CONTRIBUTING.md) | ||
| ! 👀 | ||
|
|
||
| ## 📝 License | ||
|
|
||
| Licensed under the [Apache 2.0 License](/LICENSE). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| yarn-offline-mirror false |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Preview</title> | ||
| <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono" rel="stylesheet"> | ||
| <link rel="stylesheet" href="./styles.scss"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link href="./styles.scss" rel="stylesheet"> | ||
| <style> | ||
| *, | ||
| *::before, | ||
| *::after { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
|
|
||
| body, code { | ||
| font-family: 'IBM Plex Mono', monospace; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
| <script src="./index.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| /** | ||
| * Copyright IBM Corp. 2018, 2018 | ||
| * | ||
| * This source code is licensed under the Apache-2.0 license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import * as colors from '@carbon/colors'; | ||
| import { themes } from '@carbon/themes'; | ||
|
|
||
| const mountNode = document.getElementById('root'); | ||
| function render(element) { | ||
| ReactDOM.render(element, mountNode); | ||
| } | ||
|
|
||
| const colorNameLookup = Object.keys(colors).reduce( | ||
| (acc, color) => ({ | ||
| ...acc, | ||
| [colors[color]]: color, | ||
| }), | ||
| {} | ||
| ); | ||
| const tokens = Object.keys(themes[Object.keys(themes)[0]]); | ||
|
|
||
| function App() { | ||
| return ( | ||
| <React.Fragment> | ||
| <h1>Preview</h1> | ||
| <section> | ||
| <h2>Themes</h2> | ||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th>Token</th> | ||
| {Object.keys(themes).map(theme => ( | ||
| <th key={theme}>{theme} theme</th> | ||
| ))} | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {tokens.map(token => ( | ||
| <tr key={token}> | ||
| <td> | ||
| <pre> | ||
| <code>{token}</code> | ||
| </pre> | ||
| </td> | ||
| {Object.keys(themes).map(theme => { | ||
| const color = themes[theme][token]; | ||
| return ( | ||
| <td key={theme}> | ||
| <div style={{ display: 'flex', alignItems: 'center' }}> | ||
| <div | ||
| style={{ | ||
| width: 50, | ||
| height: 50, | ||
| background: color, | ||
| outline: '1px solid #8a3ffc', | ||
| marginRight: '1rem', | ||
| }} | ||
| /> | ||
| {colorNameLookup[color] || color} | ||
| </div> | ||
| </td> | ||
| ); | ||
| })} | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </section> | ||
| </React.Fragment> | ||
| ); | ||
| } | ||
|
|
||
| render(<App />); |
Oops, something went wrong.