Skip to content
This repository has been archived by the owner on Apr 13, 2022. It is now read-only.

Color factory #89

Merged
merged 1 commit into from
Jan 28, 2020
Merged

Color factory #89

merged 1 commit into from
Jan 28, 2020

Conversation

tmlayton
Copy link
Contributor

@tmlayton tmlayton commented Jan 15, 2020

Addresses #71

The PR is the first of a few to move the color factory from Polaris React to Polaris Tokens. Here is a high level diagram of the color system, including the color factory:

Screen Shot 2020-01-22 at 9 57 22 PM

Todo

  • Export color factory
  • Make role tokens available
  • Move HSLuv to dependency

@kaelig kaelig temporarily deployed to polaris-toke-color-syst-qge2if January 15, 2020 01:18 Inactive
@kaelig kaelig temporarily deployed to polaris-toke-color-syst-qge2if January 16, 2020 14:59 Inactive
@kaelig kaelig temporarily deployed to polaris-toke-color-syst-qge2if January 16, 2020 15:02 Inactive
@kaelig kaelig temporarily deployed to polaris-toke-color-syst-qge2if January 16, 2020 15:46 Inactive
@kaelig kaelig temporarily deployed to polaris-toke-color-syst-qge2if January 16, 2020 20:24 Inactive
@kaelig kaelig temporarily deployed to polaris-toke-color-syst-qge2if January 16, 2020 20:31 Inactive
@kaelig kaelig temporarily deployed to polaris-toke-color-syst-qge2if January 16, 2020 20:42 Inactive
@danrosenthal
Copy link
Contributor

Not sure why linting is failing in CI. It does not fail for me locally

@kaelig kaelig temporarily deployed to polaris-toke-color-syst-qge2if January 17, 2020 06:25 Inactive
@kaelig kaelig temporarily deployed to polaris-toke-color-syst-qge2if January 17, 2020 06:46 Inactive
formats/rails.yml.js Outdated Show resolved Hide resolved
@tmlayton
Copy link
Contributor Author

Random thought should we call these “variables” instead of “variants”?

@danrosenthal
Copy link
Contributor

Random thought should we call these “variables” instead of “variants”?

I don't feel like that change improves understanding when compared to "variants".

@kaelig kaelig temporarily deployed to polaris-toke-color-syst-qge2if January 17, 2020 22:57 Inactive
@tmlayton
Copy link
Contributor Author

Random thought should we call these “variables” instead of “variants”?

I don't feel like that change improves understanding when compared to "variants".

My thinking was these are actually variables as opposed to our current colors which are constants. The value varies depending on dark, light, or theme (for web). Variants also indicates a sibling relationship when this is more like a parent/child relationship. The role variables belong to their given role because they are derived from the role’s base color.

package.json Outdated Show resolved Hide resolved
@tmlayton tmlayton changed the base branch from master to next January 18, 2020 00:06
@tmlayton
Copy link
Contributor Author

Updated the base branch to next which is used to publish beta versions

@kaelig kaelig temporarily deployed to polaris-toke-color-syst-qge2if January 18, 2020 00:33 Inactive
formats/rails.yml.js Outdated Show resolved Hide resolved
@tmlayton tmlayton requested a review from BPScott January 25, 2020 00:43
@tmlayton
Copy link
Contributor Author

Okay I’m happy with where this is at for a first iteration and think it is ready for review. Additional features like adding in metadata, etc I'd like to leave for future beta releases.

As this stands, it should support both Polaris React and Polaris Rails.

@tmlayton tmlayton marked this pull request as ready for review January 25, 2020 00:45
.npmignore Show resolved Hide resolved
formats/tokens.js Outdated Show resolved Hide resolved
const {saturationAdjustmentFn, hueRotationFn} = require('../utils');

const base = {
surface: [
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I’d like to leave the scheme as-is for now, get a working beta released, then iterate on adding metadata which will be part of the generated files. Specifically the immediate plan for metadata is to add info that can be used to filter colors based on various dimensions.

gulpfile.js Outdated Show resolved Hide resolved
gulpfile.js Show resolved Hide resolved
@kaelig kaelig temporarily deployed to polaris-toke-color-syst-qge2if January 27, 2020 23:59 Inactive
@kaelig kaelig temporarily deployed to polaris-toke-color-syst-qge2if January 28, 2020 00:04 Inactive
dist/base.json Show resolved Hide resolved
Copy link
Contributor

@kaelig kaelig left a comment

Choose a reason for hiding this comment

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

I'm good with this great first step going out as a beta :shipit:

Thank you for bringing me in this process along the way!

A tiny bit of docs would be appreciated but they can come later.

color-factory.js Outdated Show resolved Hide resolved
formats/tokens.js Show resolved Hide resolved
formats/utils/color-factory/utils.js Show resolved Hide resolved
formats/utils/color-factory/utils.js Show resolved Hide resolved
Copy link
Member

@BPScott BPScott left a comment

Choose a reason for hiding this comment

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

Reviewed in person and all looking amazing!

Let's add a d.ts. file for the color-factory then get this merged, and then we can do follow-up stuff like getting TS integrated and pondering about that theo two step transform thing later.

color-factory.js Outdated Show resolved Hide resolved
formats/tokens.js Show resolved Hide resolved
formats/utils/color-factory/utils.js Outdated Show resolved Hide resolved
gulp
.src('tokens/themes/*.yml')
.pipe(
$.theo({
Copy link
Member

Choose a reason for hiding this comment

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

Useing theo to transform a theme into a palette, which is then passed into theo again feels a little odd to me. I wonder if we could do this with plain old JS, rather than having to register a theo transform.

That can be a problem for later though, no need to block this PR

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Leaving this comment unresolved for posterity and future PRs

Co-authored-by: Dan Rosenthal <dan.rosenthal@shopify.com>
@kaelig kaelig temporarily deployed to polaris-toke-color-syst-qge2if January 28, 2020 21:18 Inactive
@tmlayton tmlayton merged commit 6e1f864 into next Jan 28, 2020
@tmlayton tmlayton deleted the color-system/init branch January 28, 2020 21:19
danrosenthal added a commit that referenced this pull request Feb 20, 2020
  * Added surface disabled variant and updated other variant configs ([#101](#101))
  * Added TypeScript build for modern tokens, and shifted directory structures to differentiate between legacy and modern tokens ([#97](#97))
  * Updated variant names and descriptions ([#96](#96))
  * Added decorative icon variants ([#94](#94))
  * Built changes from previous release, and added textOnInteractive variant ([#93](#93))
  * Fixed an issue where legacy themes caused the color factory to throw ([#92](#92))
  * Update color variants for consistency with changes in Polaris React ([#91](#91))
  * Marked the config as optional and the colors as partial ([dd3d8fc](https://github.com/Shopify/polaris-tokens/commit/
  * Actually exporting the types would be helpful ([4998856](4998856))
  * Added the Color Factory. Long live the Color Factory! ([#89](#89))

Co-authored-by: Dan Rosenthal <dan.rosenthal@shopify.com>
Co-authored-by: Ben Scott <227292+BPScott@users.noreply.github.com>
Co-authored-by: Kyle Durand <kyle.durand@shopify.com>
Co-authored-by: Sara Hill <sara.hill@shopify.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants