From 46526a8a0bcbc46e9f7b34de5f6370beb0687034 Mon Sep 17 00:00:00 2001 From: Tim Layton Date: Tue, 14 Jan 2020 17:07:36 -0800 Subject: [PATCH] add color factory Co-authored-by: Dan Rosenthal --- .npmignore | 2 + color-factory.d.ts | 24 + color-factory.js | 3 + dist/base.dark.android.xml | 93 +++ dist/base.dark.ios.json | 777 +++++++++++++++++++ dist/base.dark.json | 92 +++ dist/base.json | 12 + dist/base.light.android.xml | 93 +++ dist/base.light.ios.json | 772 ++++++++++++++++++ dist/base.light.json | 92 +++ formats/tokens.js | 28 + formats/utils/color-factory/color-factory.js | 40 + formats/utils/color-factory/configs/base.js | 737 ++++++++++++++++++ formats/utils/color-factory/utils.js | 51 ++ gulpfile.js | 79 +- package.json | 3 + tests/color-factory.test.js | 25 + tests/package.json.test.js | 6 +- tokens/themes/base.yml | 24 + yarn.lock | 117 +-- 20 files changed, 2960 insertions(+), 110 deletions(-) create mode 100644 color-factory.d.ts create mode 100644 color-factory.js create mode 100644 dist/base.dark.android.xml create mode 100644 dist/base.dark.ios.json create mode 100644 dist/base.dark.json create mode 100644 dist/base.json create mode 100644 dist/base.light.android.xml create mode 100644 dist/base.light.ios.json create mode 100644 dist/base.light.json create mode 100644 formats/tokens.js create mode 100644 formats/utils/color-factory/color-factory.js create mode 100644 formats/utils/color-factory/configs/base.js create mode 100644 formats/utils/color-factory/utils.js create mode 100644 tests/color-factory.test.js create mode 100644 tokens/themes/base.yml diff --git a/.npmignore b/.npmignore index 718f1145..a26a0db5 100644 --- a/.npmignore +++ b/.npmignore @@ -5,4 +5,6 @@ !README.md !package.json !yarn.lock +!formats/utils/color-factory/**/* +!color-factory.js dist/colors.ase.json diff --git a/color-factory.d.ts b/color-factory.d.ts new file mode 100644 index 00000000..7213d8e1 --- /dev/null +++ b/color-factory.d.ts @@ -0,0 +1,24 @@ +type Scheme = 'light' | 'dark'; +type Lambda = (value: number) => number; + +interface HslaSetting { + hue?: number | Lambda; + saturation?: number | Lambda; + lightness?: number | Lambda; + alpha?: number; +} + +interface Variant { + name: string; + description?: string; + light: HslaSetting; + dark: HslaSetting; +} + +type Config = Record; + +export declare function colorFactory( + theme: Record, + scheme: Scheme, + config: Config, +): Record; diff --git a/color-factory.js b/color-factory.js new file mode 100644 index 00000000..af7f0f1c --- /dev/null +++ b/color-factory.js @@ -0,0 +1,3 @@ +const {colorFactory} = require('./formats/utils/color-factory/color-factory'); + +module.exports = {colorFactory}; diff --git a/dist/base.dark.android.xml b/dist/base.dark.android.xml new file mode 100644 index 00000000..90e8a871 --- /dev/null +++ b/dist/base.dark.android.xml @@ -0,0 +1,93 @@ + + + #ffcd290c + #ffbb250a + #ffe32f0e + #fffa3511 + #ff36a3ff + #ff2662b6 + #ff67afff + #ff88bcff + #ff2e73d4 + #ff008060 + #ff005640 + #ff009671 + #ff00a47c + #ff333537 + #ff202223 + #ff54575b + #ff606467 + #80000000 + #ff0b0c0d + #ff505356 + #ffe32f0e + #ff831704 + #ff44474a + #ff449da7 + #ff505356 + #ff676b6f + #ff505356 + #ff494c4e + #ff008766 + #ff997000 + #fffd726a + #fffeaca8 + #fffd8a84 + #fffd9f9b + #ffc23356 + #ffffffff + #ff167c79 + #ffffffff + #ff8e6609 + #ffffffff + #ff007c5a + #ffffffff + #ffce5814 + #ffffffff + #ff2662b6 + #33b9b9b9 + #ffa6acb2 + #ffe1e3e5 + #ffa6acb2 + #ffda2d0d + #ff54575a + #ff2c6c73 + #fffff8f7 + #ffffffff + #ffe6fff4 + #ff787d81 + #ff005e46 + #ff684b00 + #80212121 + #ff0c1210 + #ff28302c + #ff36403b + #0d171818 + #26ffffff + #ff202123 + #ff450701 + #ff450701 + #ff441714 + #ff6b1003 + #ff006971 + #ff123539 + #ff2f3133 + #ff3e4043 + #ff020e23 + #ff071d3d + #ff0d2b56 + #ff1a1c1d + #ff005e46 + #ff1c352c + #ff997000 + #ff4d3b1d + #ffe3e5e7 + #ffe9807a + #ff6f7377 + #ffa2effa + #ffffffff + #ffffffff + #ff999fa4 + #ff58ad8e + #ffca9500 + \ No newline at end of file diff --git a/dist/base.dark.ios.json b/dist/base.dark.ios.json new file mode 100644 index 00000000..f1ff5a62 --- /dev/null +++ b/dist/base.dark.ios.json @@ -0,0 +1,777 @@ +[ + { + "name": "background", + "rgba": { + "r": 0.043137254901960784, + "g": 0.047058823529411764, + "b": 0.050980392156862744, + "a": 1 + }, + "hex": "#0b0c0dff" + }, + { + "name": "surface", + "rgba": { + "r": 0.12549019607843137, + "g": 0.12941176470588237, + "b": 0.13725490196078433, + "a": 1 + }, + "hex": "#202123ff" + }, + { + "name": "surfaceSubdued", + "rgba": { + "r": 0.10196078431372549, + "g": 0.10980392156862745, + "b": 0.11372549019607843, + "a": 1 + }, + "hex": "#1a1c1dff" + }, + { + "name": "surfaceHovered", + "rgba": { + "r": 0.1843137254901961, + "g": 0.19215686274509805, + "b": 0.2, + "a": 1 + }, + "hex": "#2f3133ff" + }, + { + "name": "surfacePressed", + "rgba": { + "r": 0.24313725490196078, + "g": 0.25098039215686274, + "b": 0.2627450980392157, + "a": 1 + }, + "hex": "#3e4043ff" + }, + { + "name": "backdrop", + "rgba": {"r": 0, "g": 0, "b": 0, "a": 0.5}, + "hex": "#00000080" + }, + { + "name": "overlay", + "rgba": { + "r": 0.12941176470588237, + "g": 0.12941176470588237, + "b": 0.12941176470588237, + "a": 0.5 + }, + "hex": "#21212180" + }, + { + "name": "shadowFromAmbientLight", + "rgba": { + "r": 0.09019607843137255, + "g": 0.09411764705882353, + "b": 0.09411764705882353, + "a": 0.05 + }, + "hex": "#1718180d" + }, + { + "name": "shadowFromDirectLight", + "rgba": {"r": 1, "g": 1, "b": 1, "a": 0.15}, + "hex": "#ffffff26" + }, + { + "name": "hintFromDirectLight", + "rgba": { + "r": 0.7254901960784313, + "g": 0.7254901960784313, + "b": 0.7254901960784313, + "a": 0.2 + }, + "hex": "#b9b9b933" + }, + { + "name": "border", + "rgba": { + "r": 0.3137254901960784, + "g": 0.3254901960784314, + "b": 0.33725490196078434, + "a": 1 + }, + "hex": "#505356ff" + }, + { + "name": "borderDisabled", + "rgba": { + "r": 0.26666666666666666, + "g": 0.2784313725490196, + "b": 0.2901960784313726, + "a": 1 + }, + "hex": "#44474aff" + }, + { + "name": "borderSubdued", + "rgba": { + "r": 0.28627450980392155, + "g": 0.2980392156862745, + "b": 0.3058823529411765, + "a": 1 + }, + "hex": "#494c4eff" + }, + { + "name": "icon", + "rgba": { + "r": 0.6509803921568628, + "g": 0.6745098039215687, + "b": 0.6980392156862745, + "a": 1 + }, + "hex": "#a6acb2ff" + }, + { + "name": "iconActionHovered", + "rgba": { + "r": 0.8823529411764706, + "g": 0.8901960784313725, + "b": 0.8980392156862745, + "a": 1 + }, + "hex": "#e1e3e5ff" + }, + { + "name": "iconActionPressed", + "rgba": { + "r": 0.6509803921568628, + "g": 0.6745098039215687, + "b": 0.6980392156862745, + "a": 1 + }, + "hex": "#a6acb2ff" + }, + { + "name": "iconDisabled", + "rgba": { + "r": 0.32941176470588235, + "g": 0.3411764705882353, + "b": 0.35294117647058826, + "a": 1 + }, + "hex": "#54575aff" + }, + { + "name": "iconSubdued", + "rgba": { + "r": 0.47058823529411764, + "g": 0.49019607843137253, + "b": 0.5058823529411764, + "a": 1 + }, + "hex": "#787d81ff" + }, + { + "name": "text", + "rgba": { + "r": 0.8901960784313725, + "g": 0.8980392156862745, + "b": 0.9058823529411765, + "a": 1 + }, + "hex": "#e3e5e7ff" + }, + { + "name": "textDisabled", + "rgba": { + "r": 0.43529411764705883, + "g": 0.45098039215686275, + "b": 0.4666666666666667, + "a": 1 + }, + "hex": "#6f7377ff" + }, + { + "name": "textSubdued", + "rgba": { + "r": 0.6, + "g": 0.6235294117647059, + "b": 0.6431372549019608, + "a": 1 + }, + "hex": "#999fa4ff" + }, + { + "name": "actionInteractive", + "rgba": {"r": 0.21176470588235294, "g": 0.6392156862745098, "b": 1, "a": 1}, + "hex": "#36a3ffff" + }, + { + "name": "actionInteractiveDisabled", + "rgba": { + "r": 0.14901960784313725, + "g": 0.3843137254901961, + "b": 0.7137254901960784, + "a": 1 + }, + "hex": "#2662b6ff" + }, + { + "name": "actionInteractiveHovered", + "rgba": {"r": 0.403921568627451, "g": 0.6862745098039216, "b": 1, "a": 1}, + "hex": "#67afffff" + }, + { + "name": "actionInteractiveSubdued", + "rgba": { + "r": 0.1803921568627451, + "g": 0.45098039215686275, + "b": 0.8313725490196079, + "a": 1 + }, + "hex": "#2e73d4ff" + }, + { + "name": "actionInteractivePressed", + "rgba": {"r": 0.5333333333333333, "g": 0.7372549019607844, "b": 1, "a": 1}, + "hex": "#88bcffff" + }, + { + "name": "focused", + "rgba": { + "r": 0.14901960784313725, + "g": 0.3843137254901961, + "b": 0.7137254901960784, + "a": 1 + }, + "hex": "#2662b6ff" + }, + { + "name": "surfaceSelected", + "rgba": { + "r": 0.00784313725490196, + "g": 0.054901960784313725, + "b": 0.13725490196078433, + "a": 1 + }, + "hex": "#020e23ff" + }, + { + "name": "surfaceSelectedHovered", + "rgba": { + "r": 0.027450980392156862, + "g": 0.11372549019607843, + "b": 0.23921568627450981, + "a": 1 + }, + "hex": "#071d3dff" + }, + { + "name": "surfaceSelectedPressed", + "rgba": { + "r": 0.050980392156862744, + "g": 0.16862745098039217, + "b": 0.33725490196078434, + "a": 1 + }, + "hex": "#0d2b56ff" + }, + { + "name": "iconOnInteractive", + "rgba": {"r": 1, "g": 1, "b": 1, "a": 1}, + "hex": "#ffffffff" + }, + { + "name": "actionSecondary", + "rgba": { + "r": 0.2, + "g": 0.20784313725490197, + "b": 0.21568627450980393, + "a": 1 + }, + "hex": "#333537ff" + }, + { + "name": "actionSecondaryDisabled", + "rgba": { + "r": 0.12549019607843137, + "g": 0.13333333333333333, + "b": 0.13725490196078433, + "a": 1 + }, + "hex": "#202223ff" + }, + { + "name": "actionSecondaryHovered", + "rgba": { + "r": 0.32941176470588235, + "g": 0.3411764705882353, + "b": 0.3568627450980392, + "a": 1 + }, + "hex": "#54575bff" + }, + { + "name": "actionSecondaryPressed", + "rgba": { + "r": 0.3764705882352941, + "g": 0.39215686274509803, + "b": 0.403921568627451, + "a": 1 + }, + "hex": "#606467ff" + }, + { + "name": "borderSecondary", + "rgba": { + "r": 0.3137254901960784, + "g": 0.3254901960784314, + "b": 0.33725490196078434, + "a": 1 + }, + "hex": "#505356ff" + }, + { + "name": "borderSecondaryHovered", + "rgba": { + "r": 0.3137254901960784, + "g": 0.3254901960784314, + "b": 0.33725490196078434, + "a": 1 + }, + "hex": "#505356ff" + }, + { + "name": "borderSecondaryDisabled", + "rgba": { + "r": 0.403921568627451, + "g": 0.4196078431372549, + "b": 0.43529411764705883, + "a": 1 + }, + "hex": "#676b6fff" + }, + { + "name": "actionPrimary", + "rgba": {"r": 0, "g": 0.5019607843137255, "b": 0.3764705882352941, "a": 1}, + "hex": "#008060ff" + }, + { + "name": "actionPrimaryDisabled", + "rgba": { + "r": 0, + "g": 0.33725490196078434, + "b": 0.25098039215686274, + "a": 1 + }, + "hex": "#005640ff" + }, + { + "name": "actionPrimaryHovered", + "rgba": {"r": 0, "g": 0.5882352941176471, "b": 0.44313725490196076, "a": 1}, + "hex": "#009671ff" + }, + { + "name": "actionPrimaryPressed", + "rgba": {"r": 0, "g": 0.6431372549019608, "b": 0.48627450980392156, "a": 1}, + "hex": "#00a47cff" + }, + { + "name": "iconOnPrimary", + "rgba": {"r": 0.9019607843137255, "g": 1, "b": 0.9568627450980393, "a": 1}, + "hex": "#e6fff4ff" + }, + { + "name": "textOnPrimary", + "rgba": {"r": 1, "g": 1, "b": 1, "a": 1}, + "hex": "#ffffffff" + }, + { + "name": "primarySelected", + "rgba": { + "r": 0.047058823529411764, + "g": 0.07058823529411765, + "b": 0.06274509803921569, + "a": 1 + }, + "hex": "#0c1210ff" + }, + { + "name": "primarySelectedHovered", + "rgba": { + "r": 0.1568627450980392, + "g": 0.18823529411764706, + "b": 0.17254901960784313, + "a": 1 + }, + "hex": "#28302cff" + }, + { + "name": "primarySelectedPressed", + "rgba": { + "r": 0.21176470588235294, + "g": 0.25098039215686274, + "b": 0.23137254901960785, + "a": 1 + }, + "hex": "#36403bff" + }, + { + "name": "borderCritical", + "rgba": { + "r": 0.8901960784313725, + "g": 0.1843137254901961, + "b": 0.054901960784313725, + "a": 1 + }, + "hex": "#e32f0eff" + }, + { + "name": "borderCriticalDisabled", + "rgba": { + "r": 0.5137254901960784, + "g": 0.09019607843137255, + "b": 0.01568627450980392, + "a": 1 + }, + "hex": "#831704ff" + }, + { + "name": "iconCritical", + "rgba": { + "r": 0.8549019607843137, + "g": 0.17647058823529413, + "b": 0.050980392156862744, + "a": 1 + }, + "hex": "#da2d0dff" + }, + { + "name": "surfaceCritical", + "rgba": { + "r": 0.27058823529411763, + "g": 0.027450980392156862, + "b": 0.00392156862745098, + "a": 1 + }, + "hex": "#450701ff" + }, + { + "name": "surfaceCriticalSubdued", + "rgba": { + "r": 0.27058823529411763, + "g": 0.027450980392156862, + "b": 0.00392156862745098, + "a": 1 + }, + "hex": "#450701ff" + }, + { + "name": "surfaceCriticalSubduedHovered", + "rgba": { + "r": 0.26666666666666666, + "g": 0.09019607843137255, + "b": 0.0784313725490196, + "a": 1 + }, + "hex": "#441714ff" + }, + { + "name": "surfaceCriticalSubduedPressed", + "rgba": { + "r": 0.4196078431372549, + "g": 0.06274509803921569, + "b": 0.011764705882352941, + "a": 1 + }, + "hex": "#6b1003ff" + }, + { + "name": "textCritical", + "rgba": { + "r": 0.9137254901960784, + "g": 0.5019607843137255, + "b": 0.47843137254901963, + "a": 1 + }, + "hex": "#e9807aff" + }, + { + "name": "actionCritical", + "rgba": { + "r": 0.803921568627451, + "g": 0.1607843137254902, + "b": 0.047058823529411764, + "a": 1 + }, + "hex": "#cd290cff" + }, + { + "name": "actionCriticalDisabled", + "rgba": { + "r": 0.7333333333333333, + "g": 0.1450980392156863, + "b": 0.0392156862745098, + "a": 1 + }, + "hex": "#bb250aff" + }, + { + "name": "actionCriticalHovered", + "rgba": { + "r": 0.8901960784313725, + "g": 0.1843137254901961, + "b": 0.054901960784313725, + "a": 1 + }, + "hex": "#e32f0eff" + }, + { + "name": "actionCriticalPressed", + "rgba": { + "r": 0.9803921568627451, + "g": 0.20784313725490197, + "b": 0.06666666666666667, + "a": 1 + }, + "hex": "#fa3511ff" + }, + { + "name": "iconOnCritical", + "rgba": {"r": 1, "g": 0.9725490196078431, "b": 0.9686274509803922, "a": 1}, + "hex": "#fff8f7ff" + }, + { + "name": "textOnCritical", + "rgba": {"r": 1, "g": 1, "b": 1, "a": 1}, + "hex": "#ffffffff" + }, + { + "name": "criticalLink", + "rgba": { + "r": 0.9921568627450981, + "g": 0.4470588235294118, + "b": 0.41568627450980394, + "a": 1 + }, + "hex": "#fd726aff" + }, + { + "name": "criticalLinkDisabled", + "rgba": { + "r": 0.996078431372549, + "g": 0.6745098039215687, + "b": 0.6588235294117647, + "a": 1 + }, + "hex": "#feaca8ff" + }, + { + "name": "criticalLinkHovered", + "rgba": { + "r": 0.9921568627450981, + "g": 0.5411764705882353, + "b": 0.5176470588235295, + "a": 1 + }, + "hex": "#fd8a84ff" + }, + { + "name": "criticalLinkPressed", + "rgba": { + "r": 0.9921568627450981, + "g": 0.6235294117647059, + "b": 0.6078431372549019, + "a": 1 + }, + "hex": "#fd9f9bff" + }, + { + "name": "borderWarning", + "rgba": {"r": 0.6, "g": 0.4392156862745098, "b": 0, "a": 1}, + "hex": "#997000ff" + }, + { + "name": "iconWarning", + "rgba": { + "r": 0.40784313725490196, + "g": 0.29411764705882354, + "b": 0, + "a": 1 + }, + "hex": "#684b00ff" + }, + { + "name": "surfaceWarning", + "rgba": {"r": 0.6, "g": 0.4392156862745098, "b": 0, "a": 1}, + "hex": "#997000ff" + }, + { + "name": "surfaceWarningSubdued", + "rgba": { + "r": 0.30196078431372547, + "g": 0.23137254901960785, + "b": 0.11372549019607843, + "a": 1 + }, + "hex": "#4d3b1dff" + }, + { + "name": "textWarning", + "rgba": {"r": 0.792156862745098, "g": 0.5843137254901961, "b": 0, "a": 1}, + "hex": "#ca9500ff" + }, + { + "name": "borderHighlight", + "rgba": { + "r": 0.26666666666666666, + "g": 0.615686274509804, + "b": 0.6549019607843137, + "a": 1 + }, + "hex": "#449da7ff" + }, + { + "name": "iconHighlight", + "rgba": { + "r": 0.17254901960784313, + "g": 0.4235294117647059, + "b": 0.45098039215686275, + "a": 1 + }, + "hex": "#2c6c73ff" + }, + { + "name": "surfaceHighlight", + "rgba": {"r": 0, "g": 0.4117647058823529, "b": 0.44313725490196076, "a": 1}, + "hex": "#006971ff" + }, + { + "name": "surfaceHighlightSubdued", + "rgba": { + "r": 0.07058823529411765, + "g": 0.20784313725490197, + "b": 0.2235294117647059, + "a": 1 + }, + "hex": "#123539ff" + }, + { + "name": "textHighlight", + "rgba": { + "r": 0.6352941176470588, + "g": 0.9372549019607843, + "b": 0.9803921568627451, + "a": 1 + }, + "hex": "#a2effaff" + }, + { + "name": "borderSuccess", + "rgba": {"r": 0, "g": 0.5294117647058824, "b": 0.4, "a": 1}, + "hex": "#008766ff" + }, + { + "name": "iconSuccess", + "rgba": {"r": 0, "g": 0.3686274509803922, "b": 0.27450980392156865, "a": 1}, + "hex": "#005e46ff" + }, + { + "name": "surfaceSuccess", + "rgba": {"r": 0, "g": 0.3686274509803922, "b": 0.27450980392156865, "a": 1}, + "hex": "#005e46ff" + }, + { + "name": "surfaceSuccessSubdued", + "rgba": { + "r": 0.10980392156862745, + "g": 0.20784313725490197, + "b": 0.17254901960784313, + "a": 1 + }, + "hex": "#1c352cff" + }, + { + "name": "textSuccess", + "rgba": { + "r": 0.34509803921568627, + "g": 0.6784313725490196, + "b": 0.5568627450980392, + "a": 1 + }, + "hex": "#58ad8eff" + }, + { + "name": "decorativeOneSurface", + "rgba": { + "r": 0.5568627450980392, + "g": 0.4, + "b": 0.03529411764705882, + "a": 1 + }, + "hex": "#8e6609ff" + }, + { + "name": "decorativeOneText", + "rgba": {"r": 1, "g": 1, "b": 1, "a": 1}, + "hex": "#ffffffff" + }, + { + "name": "decorativeTwoSurface", + "rgba": { + "r": 0.807843137254902, + "g": 0.34509803921568627, + "b": 0.0784313725490196, + "a": 1 + }, + "hex": "#ce5814ff" + }, + { + "name": "decorativeTwoText", + "rgba": {"r": 1, "g": 1, "b": 1, "a": 1}, + "hex": "#ffffffff" + }, + { + "name": "decorativeThreeSurface", + "rgba": { + "r": 0, + "g": 0.48627450980392156, + "b": 0.35294117647058826, + "a": 1 + }, + "hex": "#007c5aff" + }, + { + "name": "decorativeThreeText", + "rgba": {"r": 1, "g": 1, "b": 1, "a": 1}, + "hex": "#ffffffff" + }, + { + "name": "decorativeFourSurface", + "rgba": { + "r": 0.08627450980392157, + "g": 0.48627450980392156, + "b": 0.4745098039215686, + "a": 1 + }, + "hex": "#167c79ff" + }, + { + "name": "decorativeFourText", + "rgba": {"r": 1, "g": 1, "b": 1, "a": 1}, + "hex": "#ffffffff" + }, + { + "name": "decorativeFiveSurface", + "rgba": { + "r": 0.7607843137254902, + "g": 0.2, + "b": 0.33725490196078434, + "a": 1 + }, + "hex": "#c23356ff" + }, + { + "name": "decorativeFiveText", + "rgba": {"r": 1, "g": 1, "b": 1, "a": 1}, + "hex": "#ffffffff" + } +] diff --git a/dist/base.dark.json b/dist/base.dark.json new file mode 100644 index 00000000..15ebc2d5 --- /dev/null +++ b/dist/base.dark.json @@ -0,0 +1,92 @@ +{ + "background": "rgb(11, 12, 13)", + "surface": "rgb(32, 33, 35)", + "surfaceSubdued": "rgb(26, 28, 29)", + "surfaceHovered": "rgb(47, 49, 51)", + "surfacePressed": "rgb(62, 64, 67)", + "backdrop": "rgba(0, 0, 0, 0.5)", + "overlay": "rgba(33, 33, 33, 0.5)", + "shadowFromAmbientLight": "rgba(23, 24, 24, 0.05)", + "shadowFromDirectLight": "rgba(255, 255, 255, 0.15)", + "hintFromDirectLight": "rgba(185, 185, 185, 0.2)", + "border": "rgb(80, 83, 86)", + "borderDisabled": "rgb(68, 71, 74)", + "borderSubdued": "rgb(73, 76, 78)", + "icon": "rgb(166, 172, 178)", + "iconActionHovered": "rgb(225, 227, 229)", + "iconActionPressed": "rgb(166, 172, 178)", + "iconDisabled": "rgb(84, 87, 90)", + "iconSubdued": "rgb(120, 125, 129)", + "text": "rgb(227, 229, 231)", + "textDisabled": "rgb(111, 115, 119)", + "textSubdued": "rgb(153, 159, 164)", + "actionInteractive": "rgb(54, 163, 255)", + "actionInteractiveDisabled": "rgb(38, 98, 182)", + "actionInteractiveHovered": "rgb(103, 175, 255)", + "actionInteractiveSubdued": "rgb(46, 115, 212)", + "actionInteractivePressed": "rgb(136, 188, 255)", + "focused": "rgb(38, 98, 182)", + "surfaceSelected": "rgb(2, 14, 35)", + "surfaceSelectedHovered": "rgb(7, 29, 61)", + "surfaceSelectedPressed": "rgb(13, 43, 86)", + "iconOnInteractive": "rgb(255, 255, 255)", + "actionSecondary": "rgb(51, 53, 55)", + "actionSecondaryDisabled": "rgb(32, 34, 35)", + "actionSecondaryHovered": "rgb(84, 87, 91)", + "actionSecondaryPressed": "rgb(96, 100, 103)", + "borderSecondary": "rgb(80, 83, 86)", + "borderSecondaryHovered": "rgb(80, 83, 86)", + "borderSecondaryDisabled": "rgb(103, 107, 111)", + "actionPrimary": "rgb(0, 128, 96)", + "actionPrimaryDisabled": "rgb(0, 86, 64)", + "actionPrimaryHovered": "rgb(0, 150, 113)", + "actionPrimaryPressed": "rgb(0, 164, 124)", + "iconOnPrimary": "rgb(230, 255, 244)", + "textOnPrimary": "rgb(255, 255, 255)", + "primarySelected": "rgb(12, 18, 16)", + "primarySelectedHovered": "rgb(40, 48, 44)", + "primarySelectedPressed": "rgb(54, 64, 59)", + "borderCritical": "rgb(227, 47, 14)", + "borderCriticalDisabled": "rgb(131, 23, 4)", + "iconCritical": "rgb(218, 45, 13)", + "surfaceCritical": "rgb(69, 7, 1)", + "surfaceCriticalSubdued": "rgb(69, 7, 1)", + "surfaceCriticalSubduedHovered": "rgb(68, 23, 20)", + "surfaceCriticalSubduedPressed": "rgb(107, 16, 3)", + "textCritical": "rgb(233, 128, 122)", + "actionCritical": "rgb(205, 41, 12)", + "actionCriticalDisabled": "rgb(187, 37, 10)", + "actionCriticalHovered": "rgb(227, 47, 14)", + "actionCriticalPressed": "rgb(250, 53, 17)", + "iconOnCritical": "rgb(255, 248, 247)", + "textOnCritical": "rgb(255, 255, 255)", + "criticalLink": "rgb(253, 114, 106)", + "criticalLinkDisabled": "rgb(254, 172, 168)", + "criticalLinkHovered": "rgb(253, 138, 132)", + "criticalLinkPressed": "rgb(253, 159, 155)", + "borderWarning": "rgb(153, 112, 0)", + "iconWarning": "rgb(104, 75, 0)", + "surfaceWarning": "rgb(153, 112, 0)", + "surfaceWarningSubdued": "rgb(77, 59, 29)", + "textWarning": "rgb(202, 149, 0)", + "borderHighlight": "rgb(68, 157, 167)", + "iconHighlight": "rgb(44, 108, 115)", + "surfaceHighlight": "rgb(0, 105, 113)", + "surfaceHighlightSubdued": "rgb(18, 53, 57)", + "textHighlight": "rgb(162, 239, 250)", + "borderSuccess": "rgb(0, 135, 102)", + "iconSuccess": "rgb(0, 94, 70)", + "surfaceSuccess": "rgb(0, 94, 70)", + "surfaceSuccessSubdued": "rgb(28, 53, 44)", + "textSuccess": "rgb(88, 173, 142)", + "decorativeOneSurface": "rgb(142, 102, 9)", + "decorativeOneText": "rgb(255, 255, 255)", + "decorativeTwoSurface": "rgb(206, 88, 20)", + "decorativeTwoText": "rgb(255, 255, 255)", + "decorativeThreeSurface": "rgb(0, 124, 90)", + "decorativeThreeText": "rgb(255, 255, 255)", + "decorativeFourSurface": "rgb(22, 124, 121)", + "decorativeFourText": "rgb(255, 255, 255)", + "decorativeFiveSurface": "rgb(194, 51, 86)", + "decorativeFiveText": "rgb(255, 255, 255)" +} diff --git a/dist/base.json b/dist/base.json new file mode 100644 index 00000000..6f0ee65a --- /dev/null +++ b/dist/base.json @@ -0,0 +1,12 @@ +{ + "surface": "#111213", + "onSurface": "#111213", + "interactive": "#2e72d2", + "secondary": "#111213", + "primary": "#008060", + "critical": "#d82c0d", + "warning": "#ffc453", + "highlight": "#5bcdda", + "success": "#008060", + "decorative": "#ffc96b" +} diff --git a/dist/base.light.android.xml b/dist/base.light.android.xml new file mode 100644 index 00000000..8fee9406 --- /dev/null +++ b/dist/base.light.android.xml @@ -0,0 +1,93 @@ + + + #ffd82c0d + #fffd5040 + #ffc1260a + #ffac2108 + #ff2e72d2 + #ff498af2 + #ff2156a1 + #ff1a4889 + #ff3178dc + #ff008060 + #ff005640 + #ff007255 + #ff00644b + #ffeaebec + #ffedeeef + #ffe1e3e5 + #ffd8dadd + #80000000 + #fffafafa + #ffb4b9be + #ffe32f0e + #fffebcb9 + #fff0f1f2 + #ff449da7 + #ffb4b9be + #ffd2d5d8 + #ff999ea4 + #ffd2d5d8 + #ff008766 + #fff1b300 + #ffdc2d0e + #fffd938d + #ffcd290c + #ff670f03 + #fffdc9d0 + #ff4f0e1f + #ff91e0d6 + #ff002d2d + #ffffc96b + #ff3d2800 + #ff90e3b3 + #ff002f19 + #ffffc4b0 + #ff490b1c + #ff498af2 + #26000000 + #ff5c5f62 + #ff1a1c1d + #ff44474a + #ffec310f + #ffbabec3 + #ff4197a1 + #fffff8f7 + #ffffffff + #ffe6fff4 + #ff8c9196 + #ff004432 + #ffcd9800 + #80ffffff + #ffe2f5ed + #ffb3d0c3 + #ffa2bcb0 + #0d171818 + #26000000 + #ffffffff + #fffffafa + #fffff8f7 + #fffff0f0 + #fffed3d1 + #ff8ee0eb + #fff4fdfe + #fff3f4f4 + #ffe1e3e5 + #fff0f3fe + #ffd6dffc + #ffbbcbf9 + #fffafafa + #ff89e5c2 + #fff7fefb + #ffffcb74 + #fffff2e2 + #ff202223 + #ffd72c0d + #ff90959a + #ff081f21 + #ffffffff + #ffffffff + #ff6d7175 + #ff008060 + #ff916a00 + \ No newline at end of file diff --git a/dist/base.light.ios.json b/dist/base.light.ios.json new file mode 100644 index 00000000..cd8944eb --- /dev/null +++ b/dist/base.light.ios.json @@ -0,0 +1,772 @@ +[ + { + "name": "background", + "rgba": { + "r": 0.9803921568627451, + "g": 0.9803921568627451, + "b": 0.9803921568627451, + "a": 1 + }, + "hex": "#fafafaff" + }, + { + "name": "surface", + "rgba": {"r": 1, "g": 1, "b": 1, "a": 1}, + "hex": "#ffffffff" + }, + { + "name": "surfaceSubdued", + "rgba": { + "r": 0.9803921568627451, + "g": 0.9803921568627451, + "b": 0.9803921568627451, + "a": 1 + }, + "hex": "#fafafaff" + }, + { + "name": "surfaceHovered", + "rgba": { + "r": 0.9529411764705882, + "g": 0.9568627450980393, + "b": 0.9568627450980393, + "a": 1 + }, + "hex": "#f3f4f4ff" + }, + { + "name": "surfacePressed", + "rgba": { + "r": 0.8823529411764706, + "g": 0.8901960784313725, + "b": 0.8980392156862745, + "a": 1 + }, + "hex": "#e1e3e5ff" + }, + { + "name": "backdrop", + "rgba": {"r": 0, "g": 0, "b": 0, "a": 0.5}, + "hex": "#00000080" + }, + { + "name": "overlay", + "rgba": {"r": 1, "g": 1, "b": 1, "a": 0.5}, + "hex": "#ffffff80" + }, + { + "name": "shadowFromAmbientLight", + "rgba": { + "r": 0.09019607843137255, + "g": 0.09411764705882353, + "b": 0.09411764705882353, + "a": 0.05 + }, + "hex": "#1718180d" + }, + { + "name": "shadowFromDirectLight", + "rgba": {"r": 0, "g": 0, "b": 0, "a": 0.15}, + "hex": "#00000026" + }, + { + "name": "hintFromDirectLight", + "rgba": {"r": 0, "g": 0, "b": 0, "a": 0.15}, + "hex": "#00000026" + }, + { + "name": "border", + "rgba": { + "r": 0.7058823529411765, + "g": 0.7254901960784313, + "b": 0.7450980392156863, + "a": 1 + }, + "hex": "#b4b9beff" + }, + { + "name": "borderDisabled", + "rgba": { + "r": 0.9411764705882353, + "g": 0.9450980392156862, + "b": 0.9490196078431372, + "a": 1 + }, + "hex": "#f0f1f2ff" + }, + { + "name": "borderSubdued", + "rgba": { + "r": 0.8235294117647058, + "g": 0.8352941176470589, + "b": 0.8470588235294118, + "a": 1 + }, + "hex": "#d2d5d8ff" + }, + { + "name": "icon", + "rgba": { + "r": 0.3607843137254902, + "g": 0.37254901960784315, + "b": 0.3843137254901961, + "a": 1 + }, + "hex": "#5c5f62ff" + }, + { + "name": "iconActionHovered", + "rgba": { + "r": 0.10196078431372549, + "g": 0.10980392156862745, + "b": 0.11372549019607843, + "a": 1 + }, + "hex": "#1a1c1dff" + }, + { + "name": "iconActionPressed", + "rgba": { + "r": 0.26666666666666666, + "g": 0.2784313725490196, + "b": 0.2901960784313726, + "a": 1 + }, + "hex": "#44474aff" + }, + { + "name": "iconDisabled", + "rgba": { + "r": 0.7294117647058823, + "g": 0.7450980392156863, + "b": 0.7647058823529411, + "a": 1 + }, + "hex": "#babec3ff" + }, + { + "name": "iconSubdued", + "rgba": { + "r": 0.5490196078431373, + "g": 0.5686274509803921, + "b": 0.5882352941176471, + "a": 1 + }, + "hex": "#8c9196ff" + }, + { + "name": "text", + "rgba": { + "r": 0.12549019607843137, + "g": 0.13333333333333333, + "b": 0.13725490196078433, + "a": 1 + }, + "hex": "#202223ff" + }, + { + "name": "textDisabled", + "rgba": { + "r": 0.5647058823529412, + "g": 0.5843137254901961, + "b": 0.6039215686274509, + "a": 1 + }, + "hex": "#90959aff" + }, + { + "name": "textSubdued", + "rgba": { + "r": 0.42745098039215684, + "g": 0.44313725490196076, + "b": 0.4588235294117647, + "a": 1 + }, + "hex": "#6d7175ff" + }, + { + "name": "actionInteractive", + "rgba": { + "r": 0.1803921568627451, + "g": 0.4470588235294118, + "b": 0.8235294117647058, + "a": 1 + }, + "hex": "#2e72d2ff" + }, + { + "name": "actionInteractiveDisabled", + "rgba": { + "r": 0.28627450980392155, + "g": 0.5411764705882353, + "b": 0.9490196078431372, + "a": 1 + }, + "hex": "#498af2ff" + }, + { + "name": "actionInteractiveHovered", + "rgba": { + "r": 0.12941176470588237, + "g": 0.33725490196078434, + "b": 0.6313725490196078, + "a": 1 + }, + "hex": "#2156a1ff" + }, + { + "name": "actionInteractiveSubdued", + "rgba": { + "r": 0.19215686274509805, + "g": 0.47058823529411764, + "b": 0.8627450980392157, + "a": 1 + }, + "hex": "#3178dcff" + }, + { + "name": "actionInteractivePressed", + "rgba": { + "r": 0.10196078431372549, + "g": 0.2823529411764706, + "b": 0.5372549019607843, + "a": 1 + }, + "hex": "#1a4889ff" + }, + { + "name": "focused", + "rgba": { + "r": 0.28627450980392155, + "g": 0.5411764705882353, + "b": 0.9490196078431372, + "a": 1 + }, + "hex": "#498af2ff" + }, + { + "name": "surfaceSelected", + "rgba": { + "r": 0.9411764705882353, + "g": 0.9529411764705882, + "b": 0.996078431372549, + "a": 1 + }, + "hex": "#f0f3feff" + }, + { + "name": "surfaceSelectedHovered", + "rgba": { + "r": 0.8392156862745098, + "g": 0.8745098039215686, + "b": 0.9882352941176471, + "a": 1 + }, + "hex": "#d6dffcff" + }, + { + "name": "surfaceSelectedPressed", + "rgba": { + "r": 0.7333333333333333, + "g": 0.796078431372549, + "b": 0.9764705882352941, + "a": 1 + }, + "hex": "#bbcbf9ff" + }, + { + "name": "iconOnInteractive", + "rgba": {"r": 1, "g": 1, "b": 1, "a": 1}, + "hex": "#ffffffff" + }, + { + "name": "actionSecondary", + "rgba": { + "r": 0.9176470588235294, + "g": 0.9215686274509803, + "b": 0.9254901960784314, + "a": 1 + }, + "hex": "#eaebecff" + }, + { + "name": "actionSecondaryDisabled", + "rgba": { + "r": 0.9294117647058824, + "g": 0.9333333333333333, + "b": 0.9372549019607843, + "a": 1 + }, + "hex": "#edeeefff" + }, + { + "name": "actionSecondaryHovered", + "rgba": { + "r": 0.8823529411764706, + "g": 0.8901960784313725, + "b": 0.8980392156862745, + "a": 1 + }, + "hex": "#e1e3e5ff" + }, + { + "name": "actionSecondaryPressed", + "rgba": { + "r": 0.8470588235294118, + "g": 0.8549019607843137, + "b": 0.8666666666666667, + "a": 1 + }, + "hex": "#d8daddff" + }, + { + "name": "borderSecondary", + "rgba": { + "r": 0.7058823529411765, + "g": 0.7254901960784313, + "b": 0.7450980392156863, + "a": 1 + }, + "hex": "#b4b9beff" + }, + { + "name": "borderSecondaryHovered", + "rgba": { + "r": 0.6, + "g": 0.6196078431372549, + "b": 0.6431372549019608, + "a": 1 + }, + "hex": "#999ea4ff" + }, + { + "name": "borderSecondaryDisabled", + "rgba": { + "r": 0.8235294117647058, + "g": 0.8352941176470589, + "b": 0.8470588235294118, + "a": 1 + }, + "hex": "#d2d5d8ff" + }, + { + "name": "actionPrimary", + "rgba": {"r": 0, "g": 0.5019607843137255, "b": 0.3764705882352941, "a": 1}, + "hex": "#008060ff" + }, + { + "name": "actionPrimaryDisabled", + "rgba": { + "r": 0, + "g": 0.33725490196078434, + "b": 0.25098039215686274, + "a": 1 + }, + "hex": "#005640ff" + }, + { + "name": "actionPrimaryHovered", + "rgba": {"r": 0, "g": 0.4470588235294118, "b": 0.3333333333333333, "a": 1}, + "hex": "#007255ff" + }, + { + "name": "actionPrimaryPressed", + "rgba": { + "r": 0, + "g": 0.39215686274509803, + "b": 0.29411764705882354, + "a": 1 + }, + "hex": "#00644bff" + }, + { + "name": "iconOnPrimary", + "rgba": {"r": 0.9019607843137255, "g": 1, "b": 0.9568627450980393, "a": 1}, + "hex": "#e6fff4ff" + }, + { + "name": "textOnPrimary", + "rgba": {"r": 1, "g": 1, "b": 1, "a": 1}, + "hex": "#ffffffff" + }, + { + "name": "primarySelected", + "rgba": { + "r": 0.8862745098039215, + "g": 0.9607843137254902, + "b": 0.9294117647058824, + "a": 1 + }, + "hex": "#e2f5edff" + }, + { + "name": "primarySelectedHovered", + "rgba": { + "r": 0.7019607843137254, + "g": 0.8156862745098039, + "b": 0.7647058823529411, + "a": 1 + }, + "hex": "#b3d0c3ff" + }, + { + "name": "primarySelectedPressed", + "rgba": { + "r": 0.6352941176470588, + "g": 0.7372549019607844, + "b": 0.6901960784313725, + "a": 1 + }, + "hex": "#a2bcb0ff" + }, + { + "name": "borderCritical", + "rgba": { + "r": 0.8901960784313725, + "g": 0.1843137254901961, + "b": 0.054901960784313725, + "a": 1 + }, + "hex": "#e32f0eff" + }, + { + "name": "borderCriticalDisabled", + "rgba": { + "r": 0.996078431372549, + "g": 0.7372549019607844, + "b": 0.7254901960784313, + "a": 1 + }, + "hex": "#febcb9ff" + }, + { + "name": "iconCritical", + "rgba": { + "r": 0.9254901960784314, + "g": 0.19215686274509805, + "b": 0.058823529411764705, + "a": 1 + }, + "hex": "#ec310fff" + }, + { + "name": "surfaceCritical", + "rgba": {"r": 1, "g": 0.9803921568627451, "b": 0.9803921568627451, "a": 1}, + "hex": "#fffafaff" + }, + { + "name": "surfaceCriticalSubdued", + "rgba": {"r": 1, "g": 0.9725490196078431, "b": 0.9686274509803922, "a": 1}, + "hex": "#fff8f7ff" + }, + { + "name": "surfaceCriticalSubduedHovered", + "rgba": {"r": 1, "g": 0.9411764705882353, "b": 0.9411764705882353, "a": 1}, + "hex": "#fff0f0ff" + }, + { + "name": "surfaceCriticalSubduedPressed", + "rgba": { + "r": 0.996078431372549, + "g": 0.8274509803921568, + "b": 0.8196078431372549, + "a": 1 + }, + "hex": "#fed3d1ff" + }, + { + "name": "textCritical", + "rgba": { + "r": 0.8431372549019608, + "g": 0.17254901960784313, + "b": 0.050980392156862744, + "a": 1 + }, + "hex": "#d72c0dff" + }, + { + "name": "actionCritical", + "rgba": { + "r": 0.8470588235294118, + "g": 0.17254901960784313, + "b": 0.050980392156862744, + "a": 1 + }, + "hex": "#d82c0dff" + }, + { + "name": "actionCriticalDisabled", + "rgba": { + "r": 0.9921568627450981, + "g": 0.3137254901960784, + "b": 0.25098039215686274, + "a": 1 + }, + "hex": "#fd5040ff" + }, + { + "name": "actionCriticalHovered", + "rgba": { + "r": 0.7568627450980392, + "g": 0.14901960784313725, + "b": 0.0392156862745098, + "a": 1 + }, + "hex": "#c1260aff" + }, + { + "name": "actionCriticalPressed", + "rgba": { + "r": 0.6745098039215687, + "g": 0.12941176470588237, + "b": 0.03137254901960784, + "a": 1 + }, + "hex": "#ac2108ff" + }, + { + "name": "iconOnCritical", + "rgba": {"r": 1, "g": 0.9725490196078431, "b": 0.9686274509803922, "a": 1}, + "hex": "#fff8f7ff" + }, + { + "name": "textOnCritical", + "rgba": {"r": 1, "g": 1, "b": 1, "a": 1}, + "hex": "#ffffffff" + }, + { + "name": "criticalLink", + "rgba": { + "r": 0.8627450980392157, + "g": 0.17647058823529413, + "b": 0.054901960784313725, + "a": 1 + }, + "hex": "#dc2d0eff" + }, + { + "name": "criticalLinkDisabled", + "rgba": { + "r": 0.9921568627450981, + "g": 0.5764705882352941, + "b": 0.5529411764705883, + "a": 1 + }, + "hex": "#fd938dff" + }, + { + "name": "criticalLinkHovered", + "rgba": { + "r": 0.803921568627451, + "g": 0.1607843137254902, + "b": 0.047058823529411764, + "a": 1 + }, + "hex": "#cd290cff" + }, + { + "name": "criticalLinkPressed", + "rgba": { + "r": 0.403921568627451, + "g": 0.058823529411764705, + "b": 0.011764705882352941, + "a": 1 + }, + "hex": "#670f03ff" + }, + { + "name": "borderWarning", + "rgba": {"r": 0.9450980392156862, "g": 0.7019607843137254, "b": 0, "a": 1}, + "hex": "#f1b300ff" + }, + { + "name": "iconWarning", + "rgba": {"r": 0.803921568627451, "g": 0.596078431372549, "b": 0, "a": 1}, + "hex": "#cd9800ff" + }, + { + "name": "surfaceWarning", + "rgba": {"r": 1, "g": 0.796078431372549, "b": 0.4549019607843137, "a": 1}, + "hex": "#ffcb74ff" + }, + { + "name": "surfaceWarningSubdued", + "rgba": {"r": 1, "g": 0.9490196078431372, "b": 0.8862745098039215, "a": 1}, + "hex": "#fff2e2ff" + }, + { + "name": "textWarning", + "rgba": {"r": 0.5686274509803921, "g": 0.41568627450980394, "b": 0, "a": 1}, + "hex": "#916a00ff" + }, + { + "name": "borderHighlight", + "rgba": { + "r": 0.26666666666666666, + "g": 0.615686274509804, + "b": 0.6549019607843137, + "a": 1 + }, + "hex": "#449da7ff" + }, + { + "name": "iconHighlight", + "rgba": { + "r": 0.2549019607843137, + "g": 0.592156862745098, + "b": 0.6313725490196078, + "a": 1 + }, + "hex": "#4197a1ff" + }, + { + "name": "surfaceHighlight", + "rgba": { + "r": 0.5568627450980392, + "g": 0.8784313725490196, + "b": 0.9215686274509803, + "a": 1 + }, + "hex": "#8ee0ebff" + }, + { + "name": "surfaceHighlightSubdued", + "rgba": { + "r": 0.9568627450980393, + "g": 0.9921568627450981, + "b": 0.996078431372549, + "a": 1 + }, + "hex": "#f4fdfeff" + }, + { + "name": "textHighlight", + "rgba": { + "r": 0.03137254901960784, + "g": 0.12156862745098039, + "b": 0.12941176470588237, + "a": 1 + }, + "hex": "#081f21ff" + }, + { + "name": "borderSuccess", + "rgba": {"r": 0, "g": 0.5294117647058824, "b": 0.4, "a": 1}, + "hex": "#008766ff" + }, + { + "name": "iconSuccess", + "rgba": { + "r": 0, + "g": 0.26666666666666666, + "b": 0.19607843137254902, + "a": 1 + }, + "hex": "#004432ff" + }, + { + "name": "surfaceSuccess", + "rgba": { + "r": 0.5372549019607843, + "g": 0.8980392156862745, + "b": 0.7607843137254902, + "a": 1 + }, + "hex": "#89e5c2ff" + }, + { + "name": "surfaceSuccessSubdued", + "rgba": { + "r": 0.9686274509803922, + "g": 0.996078431372549, + "b": 0.984313725490196, + "a": 1 + }, + "hex": "#f7fefbff" + }, + { + "name": "textSuccess", + "rgba": {"r": 0, "g": 0.5019607843137255, "b": 0.3764705882352941, "a": 1}, + "hex": "#008060ff" + }, + { + "name": "decorativeOneSurface", + "rgba": {"r": 1, "g": 0.788235294117647, "b": 0.4196078431372549, "a": 1}, + "hex": "#ffc96bff" + }, + { + "name": "decorativeOneText", + "rgba": {"r": 0.23921568627450981, "g": 0.1568627450980392, "b": 0, "a": 1}, + "hex": "#3d2800ff" + }, + { + "name": "decorativeTwoSurface", + "rgba": {"r": 1, "g": 0.7686274509803922, "b": 0.6901960784313725, "a": 1}, + "hex": "#ffc4b0ff" + }, + { + "name": "decorativeTwoText", + "rgba": { + "r": 0.28627450980392155, + "g": 0.043137254901960784, + "b": 0.10980392156862745, + "a": 1 + }, + "hex": "#490b1cff" + }, + { + "name": "decorativeThreeSurface", + "rgba": { + "r": 0.5647058823529412, + "g": 0.8901960784313725, + "b": 0.7019607843137254, + "a": 1 + }, + "hex": "#90e3b3ff" + }, + { + "name": "decorativeThreeText", + "rgba": {"r": 0, "g": 0.1843137254901961, "b": 0.09803921568627451, "a": 1}, + "hex": "#002f19ff" + }, + { + "name": "decorativeFourSurface", + "rgba": { + "r": 0.5686274509803921, + "g": 0.8784313725490196, + "b": 0.8392156862745098, + "a": 1 + }, + "hex": "#91e0d6ff" + }, + { + "name": "decorativeFourText", + "rgba": { + "r": 0, + "g": 0.17647058823529413, + "b": 0.17647058823529413, + "a": 1 + }, + "hex": "#002d2dff" + }, + { + "name": "decorativeFiveSurface", + "rgba": { + "r": 0.9921568627450981, + "g": 0.788235294117647, + "b": 0.8156862745098039, + "a": 1 + }, + "hex": "#fdc9d0ff" + }, + { + "name": "decorativeFiveText", + "rgba": { + "r": 0.30980392156862746, + "g": 0.054901960784313725, + "b": 0.12156862745098039, + "a": 1 + }, + "hex": "#4f0e1fff" + } +] diff --git a/dist/base.light.json b/dist/base.light.json new file mode 100644 index 00000000..aa0e3016 --- /dev/null +++ b/dist/base.light.json @@ -0,0 +1,92 @@ +{ + "background": "rgb(250, 250, 250)", + "surface": "rgb(255, 255, 255)", + "surfaceSubdued": "rgb(250, 250, 250)", + "surfaceHovered": "rgb(243, 244, 244)", + "surfacePressed": "rgb(225, 227, 229)", + "backdrop": "rgba(0, 0, 0, 0.5)", + "overlay": "rgba(255, 255, 255, 0.5)", + "shadowFromAmbientLight": "rgba(23, 24, 24, 0.05)", + "shadowFromDirectLight": "rgba(0, 0, 0, 0.15)", + "hintFromDirectLight": "rgba(0, 0, 0, 0.15)", + "border": "rgb(180, 185, 190)", + "borderDisabled": "rgb(240, 241, 242)", + "borderSubdued": "rgb(210, 213, 216)", + "icon": "rgb(92, 95, 98)", + "iconActionHovered": "rgb(26, 28, 29)", + "iconActionPressed": "rgb(68, 71, 74)", + "iconDisabled": "rgb(186, 190, 195)", + "iconSubdued": "rgb(140, 145, 150)", + "text": "rgb(32, 34, 35)", + "textDisabled": "rgb(144, 149, 154)", + "textSubdued": "rgb(109, 113, 117)", + "actionInteractive": "rgb(46, 114, 210)", + "actionInteractiveDisabled": "rgb(73, 138, 242)", + "actionInteractiveHovered": "rgb(33, 86, 161)", + "actionInteractiveSubdued": "rgb(49, 120, 220)", + "actionInteractivePressed": "rgb(26, 72, 137)", + "focused": "rgb(73, 138, 242)", + "surfaceSelected": "rgb(240, 243, 254)", + "surfaceSelectedHovered": "rgb(214, 223, 252)", + "surfaceSelectedPressed": "rgb(187, 203, 249)", + "iconOnInteractive": "rgb(255, 255, 255)", + "actionSecondary": "rgb(234, 235, 236)", + "actionSecondaryDisabled": "rgb(237, 238, 239)", + "actionSecondaryHovered": "rgb(225, 227, 229)", + "actionSecondaryPressed": "rgb(216, 218, 221)", + "borderSecondary": "rgb(180, 185, 190)", + "borderSecondaryHovered": "rgb(153, 158, 164)", + "borderSecondaryDisabled": "rgb(210, 213, 216)", + "actionPrimary": "rgb(0, 128, 96)", + "actionPrimaryDisabled": "rgb(0, 86, 64)", + "actionPrimaryHovered": "rgb(0, 114, 85)", + "actionPrimaryPressed": "rgb(0, 100, 75)", + "iconOnPrimary": "rgb(230, 255, 244)", + "textOnPrimary": "rgb(255, 255, 255)", + "primarySelected": "rgb(226, 245, 237)", + "primarySelectedHovered": "rgb(179, 208, 195)", + "primarySelectedPressed": "rgb(162, 188, 176)", + "borderCritical": "rgb(227, 47, 14)", + "borderCriticalDisabled": "rgb(254, 188, 185)", + "iconCritical": "rgb(236, 49, 15)", + "surfaceCritical": "rgb(255, 250, 250)", + "surfaceCriticalSubdued": "rgb(255, 248, 247)", + "surfaceCriticalSubduedHovered": "rgb(255, 240, 240)", + "surfaceCriticalSubduedPressed": "rgb(254, 211, 209)", + "textCritical": "rgb(215, 44, 13)", + "actionCritical": "rgb(216, 44, 13)", + "actionCriticalDisabled": "rgb(253, 80, 64)", + "actionCriticalHovered": "rgb(193, 38, 10)", + "actionCriticalPressed": "rgb(172, 33, 8)", + "iconOnCritical": "rgb(255, 248, 247)", + "textOnCritical": "rgb(255, 255, 255)", + "criticalLink": "rgb(220, 45, 14)", + "criticalLinkDisabled": "rgb(253, 147, 141)", + "criticalLinkHovered": "rgb(205, 41, 12)", + "criticalLinkPressed": "rgb(103, 15, 3)", + "borderWarning": "rgb(241, 179, 0)", + "iconWarning": "rgb(205, 152, 0)", + "surfaceWarning": "rgb(255, 203, 116)", + "surfaceWarningSubdued": "rgb(255, 242, 226)", + "textWarning": "rgb(145, 106, 0)", + "borderHighlight": "rgb(68, 157, 167)", + "iconHighlight": "rgb(65, 151, 161)", + "surfaceHighlight": "rgb(142, 224, 235)", + "surfaceHighlightSubdued": "rgb(244, 253, 254)", + "textHighlight": "rgb(8, 31, 33)", + "borderSuccess": "rgb(0, 135, 102)", + "iconSuccess": "rgb(0, 68, 50)", + "surfaceSuccess": "rgb(137, 229, 194)", + "surfaceSuccessSubdued": "rgb(247, 254, 251)", + "textSuccess": "rgb(0, 128, 96)", + "decorativeOneSurface": "rgb(255, 201, 107)", + "decorativeOneText": "rgb(61, 40, 0)", + "decorativeTwoSurface": "rgb(255, 196, 176)", + "decorativeTwoText": "rgb(73, 11, 28)", + "decorativeThreeSurface": "rgb(144, 227, 179)", + "decorativeThreeText": "rgb(0, 47, 25)", + "decorativeFourSurface": "rgb(145, 224, 214)", + "decorativeFourText": "rgb(0, 45, 45)", + "decorativeFiveSurface": "rgb(253, 201, 208)", + "decorativeFiveText": "rgb(79, 14, 31)" +} diff --git a/formats/tokens.js b/formats/tokens.js new file mode 100644 index 00000000..003855ad --- /dev/null +++ b/formats/tokens.js @@ -0,0 +1,28 @@ +const path = require('path'); +const fs = require('fs'); + +const {colorFactory} = require('./utils/color-factory/color-factory'); +const {tokensToJson} = require('./utils/color-factory/utils'); + +function tokenify(scheme) { + return (result) => { + const configFile = path.basename(result.toJS().meta.file, '.yml'); + const config = `${__dirname}/utils/color-factory/configs/${configFile}`; + let configArg; + + if (fs.existsSync(`${config}.js`)) { + configArg = require(`./utils/color-factory/configs/${configFile}`); + } + + const theme = tokensToJson(result); + const palette = colorFactory(theme, scheme, configArg); + + const yml = Object.entries(palette).reduce((accumulator, [key, value]) => { + return `${accumulator} - name: ${key}\n value: '${value}'\n`; + }, ''); + + return `props:\n${yml}global:\n type: color\n category: background-color\n`; + }; +} + +module.exports = {tokenify}; diff --git a/formats/utils/color-factory/color-factory.js b/formats/utils/color-factory/color-factory.js new file mode 100644 index 00000000..897ea879 --- /dev/null +++ b/formats/utils/color-factory/color-factory.js @@ -0,0 +1,40 @@ +const {hexToHsluv, hsluvToRgb} = require('hsluv'); + +const baseConfig = require('./configs/base'); + +function colorFactory(theme, scheme, config = baseConfig) { + return Object.assign( + {}, + ...Object.entries(theme).map(([role, hex]) => { + const base = hexToHsluv(hex); + const variants = config[role] || []; + return { + ...variants.reduce((accumulator, {name, ...settings}) => { + const { + hue = base[0], + saturation = base[1], + lightness = base[2], + alpha = 1, + } = settings[scheme]; + + const resolve = (value, baseToResolve) => { + return typeof value === 'number' ? value : value(baseToResolve); + }; + + const [red, green, blue] = hsluvToRgb([ + resolve(hue, base[0]), + resolve(saturation, base[1]), + resolve(lightness, base[2]), + ]).map((channel) => Math.round(channel * 255)); + + return { + ...accumulator, + [name]: `rgba(${red}, ${green}, ${blue}, ${alpha})`, + }; + }, {}), + }; + }), + ); +} + +module.exports = {colorFactory}; diff --git a/formats/utils/color-factory/configs/base.js b/formats/utils/color-factory/configs/base.js new file mode 100644 index 00000000..2301d79b --- /dev/null +++ b/formats/utils/color-factory/configs/base.js @@ -0,0 +1,737 @@ +const {saturationAdjustmentFn, hueRotationFn} = require('../utils'); + +const base = { + surface: [ + { + name: 'background', + description: + 'For use as a background color, in components such as Page and Frame backgrounds.', + light: {lightness: 98.3}, + dark: {lightness: 3.3}, + }, + { + name: 'surface', + description: + 'For use as a background color, in components such as Card, Modal, and Popover.', + light: {lightness: 100}, + dark: {lightness: 12.7}, + }, + { + name: 'surfaceSubdued', + description: + 'For use as a subdued background color, in components such as Card, Modal, and Popover.', + light: {lightness: 98.3}, + dark: {lightness: 10}, + }, + { + name: 'surfaceHovered', + description: + 'For use as a surface color on interactive elements such as resource list items and action list items when in a hovered state.', + light: {lightness: 96}, + dark: {lightness: 20}, + }, + { + name: 'surfacePressed', + description: + 'For use as a surface color on interactive elements such as resource list items and action list items when in a pressed state.', + light: {lightness: 90}, + dark: {lightness: 27}, + }, + { + name: 'backdrop', + description: + 'For use as the background color of the backdrop component for navigation and modal. This color has an alpha of `0.5`.', + light: { + hue: 0, + saturation: 0, + lightness: 0, + alpha: 0.5, + }, + dark: { + hue: 0, + saturation: 0, + lightness: 0, + alpha: 0.5, + }, + }, + { + name: 'overlay', + description: + 'For use as the background color of elements which lay on top of surfaces to obscure their contents. This color has an alpha of `0.5`.', + light: { + hue: 0, + saturation: 0, + lightness: 100, + alpha: 0.5, + }, + dark: { + hue: 0, + saturation: 0, + lightness: 12.7, + alpha: 0.5, + }, + }, + { + name: 'shadowFromAmbientLight', + description: + 'For use in building shadows for popovers, cards, and modals. This color has an alpha of `0.05`.', + light: { + hue: 180, + saturation: 5, + lightness: 8, + alpha: 0.05, + }, + dark: { + hue: 180, + saturation: 5, + lightness: 8, + alpha: 0.05, + }, + }, + { + name: 'shadowFromDirectLight', + description: + 'For use in building shadows for popovers, cards, and modals. This color has an alpha of `0.15`.', + light: { + hue: 0, + saturation: 0, + lightness: 0, + alpha: 0.15, + }, + dark: { + hue: 0, + saturation: 0, + lightness: 100, + alpha: 0.15, + }, + }, + { + name: 'hintFromDirectLight', + description: 'For use in building shadows scrollables.', + light: { + hue: 0, + saturation: 0, + lightness: 0, + alpha: 0.15, + }, + dark: { + hue: 0, + saturation: 0, + lightness: 75, + alpha: 0.2, + }, + }, + ], + onSurface: [ + { + name: 'border', + description: 'For use as a border (border or interactive outline).', + light: {lightness: 75}, + dark: {lightness: 35}, + }, + { + name: 'borderDisabled', + description: 'For use as a an interactive outline on disabled elements.', + light: {lightness: 95}, + dark: {lightness: 30}, + }, + { + name: 'borderSubdued', + description: + 'For use as a subdued border (border or interactive outline).', + light: {lightness: 85}, + dark: {lightness: 32}, + }, + { + name: 'icon', + description: 'For use as the fill color of secondary icons.', + light: {lightness: 40.1}, + dark: {lightness: 70.1}, + }, + { + name: 'iconActionHovered', + description: 'For use as the fill color of hovered secondary icons.', + light: {lightness: 10}, + dark: {lightness: 90}, + }, + { + name: 'iconActionPressed', + description: 'For use as the fill color of hovered secondary icons.', + light: {lightness: 30}, + dark: {lightness: 70}, + }, + { + name: 'iconDisabled', + description: 'For use as the fill color of disabled secondary icons.', + light: {lightness: 76.9}, + dark: {lightness: 36.8}, + }, + { + name: 'iconSubdued', + description: 'For use as the fill color of subdued secondary icons.', + light: {lightness: 59.8}, + dark: {lightness: 52.1}, + }, + { + name: 'text', + description: 'For use as a secondary text color.', + light: {lightness: 13.1}, + dark: {lightness: 90.8}, + }, + { + name: 'textDisabled', + description: 'For use as a disabled secondary text color.', + light: {lightness: 61.3}, + dark: {lightness: 48.2}, + }, + { + name: 'textSubdued', + description: 'For use as a subdued secondary text color.', + light: {lightness: 47.4}, + dark: {lightness: 65.1}, + }, + ], + interactive: [ + { + name: 'actionInteractive', + description: 'Used for links and plain buttons.', + light: {lightness: 48.6}, + dark: { + lightness: 65, + saturation: saturationAdjustmentFn(11.2), + hue: hueRotationFn(-7.1), + }, + }, + { + name: 'actionInteractiveDisabled', + description: 'Used for disabled links and plain buttons.', + light: {lightness: 58}, + dark: { + lightness: 42, + }, + }, + { + name: 'actionInteractiveHovered', + description: 'Used for hovered links and plain buttons.', + light: {lightness: 37}, + dark: { + lightness: 70, + saturation: saturationAdjustmentFn(11.2), + hue: hueRotationFn(-7.1), + }, + }, + { + name: 'actionInteractiveSubdued', + description: 'Used for subdued links and plain buttons.', + light: {lightness: 51}, + dark: {lightness: 49}, + }, + { + name: 'actionInteractivePressed', + description: 'Used for pressed links and plain buttons.', + light: {lightness: 31}, + dark: { + lightness: 75, + saturation: saturationAdjustmentFn(11.2), + hue: hueRotationFn(-7.1), + }, + }, + { + name: 'focused', + description: 'For use in the focus ring on interactive elements.', + light: {lightness: 58}, + dark: {lightness: 42}, + }, + { + name: 'surfaceSelected', + description: + 'For use as a surface color in selected interactive elements, in components such as option list and resource list.', + light: {lightness: 96}, + dark: {lightness: 4}, + }, + { + name: 'surfaceSelectedHovered', + description: + 'For use as a surface color in selected interactive elements that are hovered, in components such as option list and resource list.', + light: {lightness: 89}, + dark: {lightness: 11}, + }, + { + name: 'surfaceSelectedPressed', + description: + 'For use as a surface color in selected interactive elements that are pressed, in components such as option list and resource list.', + light: {lightness: 82}, + dark: {lightness: 18}, + }, + { + name: 'iconOnInteractive', + description: 'For use as a fill color for icons on interactive elements.', + light: {lightness: 100}, + dark: {lightness: 100}, + }, + ], + secondary: [ + { + name: 'actionSecondary', + description: + 'Used for secondary buttons and tertiary buttons, as well as in form elements as a background color and pontentially other secondary surfaces.', + light: {lightness: 93}, + dark: {lightness: 22}, + }, + { + name: 'actionSecondaryDisabled', + description: 'Used as a disabled state for secondary buttons', + light: {lightness: 94}, + dark: {lightness: 13}, + }, + { + name: 'actionSecondaryHovered', + description: 'Used as a hovered state for secondary buttons', + light: {lightness: 90}, + dark: {lightness: 37}, + }, + { + name: 'actionSecondaryPressed', + description: 'Used as a pressed state for secondary buttons', + light: {lightness: 87}, + dark: {lightness: 42}, + }, + { + name: 'borderSecondary', + description: 'Used for borders on form elements', + light: {lightness: 75}, + dark: {lightness: 35}, + }, + { + name: 'borderSecondaryHovered', + description: 'Used for borders on hovered form elements', + light: {lightness: 65}, + dark: {lightness: 35}, + }, + { + name: 'borderSecondaryDisabled', + description: 'Used for disabled borders on form elements', + light: {lightness: 85}, + dark: {lightness: 45}, + }, + ], + primary: [ + { + name: 'actionPrimary', + description: + 'Used as the background color for primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.', + light: {lightness: 47.3}, + dark: {lightness: 47.3}, + }, + { + name: 'actionPrimaryDisabled', + description: + 'Used as the background color for disabled primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.', + light: {lightness: 32}, + dark: {lightness: 32}, + }, + { + name: 'actionPrimaryHovered', + description: + 'Used as the background color for hovered primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.', + light: {lightness: 42.3}, + dark: {lightness: 55}, + }, + { + name: 'actionPrimaryPressed', + description: + 'Used as the background color for pressed primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.', + light: {lightness: 37.3}, + dark: {lightness: 60}, + }, + { + name: 'iconOnPrimary', + description: + 'For use as a fill color for icons on primary actions. Not for use in icons on navigation and tabs.', + light: {lightness: 98}, + dark: {lightness: 98}, + }, + { + name: 'textOnPrimary', + description: + 'For use as a text color on primary actions. Not for use in text on navigation and tabs.', + light: {lightness: 100}, + dark: {lightness: 100}, + }, + { + name: 'primarySelected', + description: + 'Used as a surface color to indicate selected interactive states in navigation and tabs.', + light: {lightness: 95, saturation: 30}, + dark: {lightness: 5, saturation: 30}, + }, + { + name: 'primarySelectedHovered', + description: + 'Used as a surface color to indicate selected interactive states that are hovered in navigation and tabs.', + light: {lightness: 81, saturation: 22}, + dark: {lightness: 19, saturation: 22}, + }, + { + name: 'primarySelectedPressed', + description: + 'Used as a surface color to indicate selected interactive states that are pressed in navigation and tabs.', + light: {lightness: 74, saturation: 22}, + dark: {lightness: 26, saturation: 22}, + }, + ], + critical: [ + { + name: 'borderCritical', + description: + 'For use as a border on critical components such as banners, and as an outline on interactive elements in an error state.', + light: {lightness: 50}, + dark: {lightness: 50}, + }, + { + name: 'borderCriticalDisabled', + description: + 'For use as a disabled border on critical components such as banners, and as an outline on interactive elements in an error state.', + light: {lightness: 82}, + dark: {lightness: 28}, + }, + { + name: 'iconCritical', + description: 'For use as an icon fill color on top of critical elements.', + light: {lightness: 52}, + dark: {lightness: 48}, + }, + { + name: 'surfaceCritical', + description: + 'For use as a surface color on critical elements including badges.', + light: {lightness: 98.6}, + dark: {lightness: 12}, + }, + { + name: 'surfaceCriticalSubdued', + description: + 'For use as a subdued surface color on critical elements including banners.', + light: {lightness: 98}, + dark: {lightness: 12}, + }, + { + name: 'surfaceCriticalSubduedHovered', + description: + 'For use as a surface color on critical interactive elements including action list items in a hovered state.', + light: {lightness: 96}, + dark: {lightness: 15, saturation: 60}, + }, + { + name: 'surfaceCriticalSubduedPressed', + description: + 'For use as a surface color on critical interactive elements including action list items in a pressed state.', + light: {lightness: 88}, + dark: {lightness: 22}, + }, + { + name: 'textCritical', + description: + 'For use as a text color in inert critical elements such as exception list. Not for use as a text color on banners and badges.', + light: {lightness: 47.3}, + dark: {lightness: 65, saturation: 70}, + }, + { + name: 'actionCritical', + description: + 'For use as the background color for destructive buttons, and as the background color for error toast messages.', + light: {lightness: 47.5}, + dark: {lightness: 45}, + }, + { + name: 'actionCriticalDisabled', + description: + 'For use as the background color for disabled destructive buttons, and as the background color for error toast messages.', + light: {lightness: 59}, + dark: {lightness: 41}, + }, + { + name: 'actionCriticalHovered', + description: + 'For use as the background color for hovered destructive buttons, and as the background color for error toast messages.', + light: {lightness: 42.5}, + dark: {lightness: 50}, + }, + { + name: 'actionCriticalPressed', + description: + 'For use as the background color for pressed destructive buttons, and as the background color for error toast messages.', + light: {lightness: 37.5}, + dark: {lightness: 55}, + }, + { + name: 'iconOnCritical', + description: 'For use as a fill color for icons on critical actions.', + light: {lightness: 98}, + dark: {lightness: 98}, + }, + { + name: 'textOnCritical', + description: 'For use as a text color on critical actions.', + light: {lightness: 100}, + dark: {lightness: 100}, + }, + { + name: 'criticalLink', + description: + 'For use as a text color in destructive plain buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges.', + light: {lightness: 48.5}, + dark: {lightness: 65}, + }, + { + name: 'criticalLinkDisabled', + description: + 'For use as a text color in disabled destructive plain buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges.', + light: {lightness: 72}, + dark: {lightness: 78}, + }, + { + name: 'criticalLinkHovered', + description: + 'For use as a text color in hovered destructive plain buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges.', + light: {lightness: 45}, + dark: {lightness: 70}, + }, + { + name: 'criticalLinkPressed', + description: + 'For use as a text color in pressed destructive plain buttons, as well as a text color on destructive action list items. Not for use on critical banners and badges.', + light: {lightness: 21}, + dark: {lightness: 75}, + }, + ], + warning: [ + { + name: 'borderWarning', + description: 'For use as a border on warning components such as banners.', + light: {lightness: 76.6}, + dark: {lightness: 50}, + }, + { + name: 'iconWarning', + description: 'For use as an icon fill color on top of warning elements.', + light: {lightness: 66}, + dark: {lightness: 34}, + }, + { + name: 'surfaceWarning', + description: + 'For use as a surface color on warning elements including badges.', + light: {lightness: 84.5}, + dark: {lightness: 50}, + }, + { + name: 'surfaceWarningSubdued', + description: + 'For use as a subdued surface color on warning elements including banners.', + light: {lightness: 96}, + dark: {lightness: 26, saturation: 71}, + }, + { + name: 'textWarning', + description: + 'For use as a text color in inert critical elements such as exception list. Not for use as a text color on banners and badges.', + light: {lightness: 47.4}, + dark: {lightness: 64.9}, + }, + ], + highlight: [ + { + name: 'borderHighlight', + description: + 'For use as a border on informational components such as banners.', + light: {lightness: 60}, + dark: {lightness: 60}, + }, + { + name: 'iconHighlight', + description: + 'For use as an icon fill color on top of informational elements.', + light: {lightness: 58}, + dark: {lightness: 42}, + }, + { + name: 'surfaceHighlight', + description: + 'For use as a surface color on information elements including badges.', + light: {lightness: 84.5, saturation: 60}, + dark: {lightness: 40, saturation: 100}, + }, + { + name: 'surfaceHighlightSubdued', + description: + 'For use as a surface color on information elements including banners.', + light: {lightness: 98.6}, + dark: {lightness: 20}, + }, + { + name: 'textHighlight', + description: + 'For use as a text color in inert informational elements. Not for use as a text color on banners and badges.', + light: {lightness: 10}, + dark: {lightness: 90}, + }, + ], + success: [ + { + name: 'borderSuccess', + description: 'For use as a border on success components such as banners.', + light: {lightness: 50}, + dark: {lightness: 50}, + }, + { + name: 'iconSuccess', + description: 'For use as an icon fill color on top of success elements.', + light: {lightness: 25}, + dark: {lightness: 35}, + }, + { + name: 'surfaceSuccess', + description: + 'For use as a surface color on success elements including badges.', + light: {lightness: 84.5, saturation: 60}, + dark: {lightness: 35}, + }, + { + name: 'surfaceSuccessSubdued', + description: + 'For use as a surface color on information elements including banners.', + light: {lightness: 99, saturation: 60}, + dark: {lightness: 20, saturation: 60}, + }, + { + name: 'textSuccess', + description: + 'For use as a text color in inert success elements. Not for use as a text color on banners and badges.', + light: {lightness: 47.3}, + dark: {lightness: 65, saturation: 70}, + }, + ], + decorative: [ + { + name: 'decorativeOneSurface', + description: 'For use as a decorative surface color.', + light: { + lightness: 84, + }, + dark: { + hue: hueRotationFn(-2.5), + saturation: saturationAdjustmentFn(-2), + lightness: 46, + }, + }, + { + name: 'decorativeOneText', + description: + 'For use as a decorative text color that is applied on a decorative surface.', + light: { + hue: hueRotationFn(-4.5), + lightness: 18, + }, + dark: {lightness: 100}, + }, + { + name: 'decorativeTwoSurface', + description: 'For use as a decorative surface color.', + light: { + hue: hueRotationFn(-26.5), + lightness: 84, + }, + dark: { + hue: hueRotationFn(-32.5), + saturation: saturationAdjustmentFn(-4), + lightness: 52, + }, + }, + { + name: 'decorativeTwoText', + description: + 'For use as a decorative text color that is applied on a decorative surface.', + light: { + hue: hueRotationFn(305.5), + saturation: saturationAdjustmentFn(-20), + lightness: 14, + }, + dark: {lightness: 100}, + }, + { + name: 'decorativeThreeSurface', + description: 'For use as a decorative surface color.', + light: { + hue: hueRotationFn(87.5), + saturation: saturationAdjustmentFn(-46), + lightness: 84, + }, + dark: { + hue: hueRotationFn(97.5), + lightness: 46, + }, + }, + { + name: 'decorativeThreeText', + description: + 'For use as a decorative text color that is applied on a decorative surface.', + light: { + hue: hueRotationFn(87.5), + lightness: 16, + }, + dark: {lightness: 100}, + }, + { + name: 'decorativeFourSurface', + description: 'For use as a decorative surface color.', + light: { + hue: hueRotationFn(123.5), + saturation: saturationAdjustmentFn(-44), + lightness: 84, + }, + dark: { + hue: hueRotationFn(131.5), + saturation: saturationAdjustmentFn(-5), + lightness: 47, + }, + }, + { + name: 'decorativeFourText', + description: + 'For use as a decorative text color that is applied on a decorative surface.', + light: { + hue: hueRotationFn(133.5), + lightness: 16, + }, + dark: {lightness: 100}, + }, + { + name: 'decorativeFiveSurface', + description: 'For use as a decorative surface color.', + light: { + hue: hueRotationFn(-53.4), + saturation: saturationAdjustmentFn(-5.4), + lightness: 85.6, + }, + dark: { + hue: hueRotationFn(306.5), + saturation: saturationAdjustmentFn(-23), + lightness: 45, + }, + }, + { + name: 'decorativeFiveText', + description: + 'For use as a decorative text color that is applied on a decorative surface.', + light: { + hue: hueRotationFn(306.5), + saturation: saturationAdjustmentFn(-22), + lightness: 16, + }, + dark: {lightness: 100}, + }, + ], +}; + +module.exports = base; diff --git a/formats/utils/color-factory/utils.js b/formats/utils/color-factory/utils.js new file mode 100644 index 00000000..c6b3e4fc --- /dev/null +++ b/formats/utils/color-factory/utils.js @@ -0,0 +1,51 @@ +function hueRotationFn(rotation) { + return (hue) => (360 + hue + rotation) % 360; +} + +function saturationAdjustmentFn(adjustment) { + return (saturation) => Math.min(Math.max(saturation + adjustment, 0), 100); +} + +function tokensToJson(data) { + return data.toJS().props.reduce( + (accumulator, prop) => ({ + ...accumulator, + [prop.name]: prop.originalValue, + }), + {}, + ); +} + +function mergeConfigs(base, extended) { + return Object.entries(base).reduce((accumulator, [role, variants]) => { + const extendedVariants = extended[role]; + const mergedVariants = variants; + + if (extendedVariants != null) { + extendedVariants.forEach((variant) => { + const {name} = variant; + const indexToReplace = mergedVariants.findIndex( + (baseVariant) => baseVariant.name === name, + ); + + if (indexToReplace === -1) { + mergedVariants.push(variant); + } else { + mergedVariants.splice(indexToReplace, 1, variant); + } + }); + } + + return { + ...accumulator, + [role]: mergedVariants, + }; + }, {}); +} + +module.exports = { + tokensToJson, + hueRotationFn, + saturationAdjustmentFn, + mergeConfigs, +}; diff --git a/gulpfile.js b/gulpfile.js index 767f8c7d..6a69a66f 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -75,6 +75,70 @@ const removePrefix = (gulpRenameOptions) => { return gulpRenameOptions; }; +const {tokenify} = require('./formats/tokens'); + +theo.registerTransform('theme', ['color/hex']); +theo.registerFormat('light.yml', tokenify('light')); +theo.registerFormat('dark.yml', tokenify('dark')); + +const colorSchemes = [ + {transformType: 'raw', formatType: 'light.yml'}, + {transformType: 'raw', formatType: 'dark.yml'}, +]; + +const colorSystemFormats = [ + {transformType: 'web/js', formatType: 'json'}, + {transformType: 'android', formatType: 'android.xml'}, + {transformType: 'ios', formatType: 'ios.json'}, +]; + +gulp.task('themes', (done) => { + gulp + .src('tokens/themes/*.yml') + .pipe($.rename(addPrefix)) + .pipe( + $.theo({ + transform: {type: 'theme'}, + format: {type: 'json'}, + }), + ) + .pipe($.rename(removePrefix)) + .on('error', (err) => { + throw new Error(err); + }) + .pipe(gulp.dest('dist')); + done(); +}); + +gulp.task('palettes', (done) => { + colorSchemes.map( + ({transformType: schemeTransform, formatType: schemeFormat}) => + colorSystemFormats.map(({transformType, formatType}) => + gulp + .src('tokens/themes/*.yml') + .pipe( + $.theo({ + transform: {type: schemeTransform}, + format: {type: schemeFormat}, + }), + ) + .pipe($.rename(addPrefix)) + .pipe( + $.theo({ + transform: {type: transformType}, + format: {type: formatType}, + }), + ) + .pipe($.rename(removePrefix)) + .on('error', (err) => { + throw new Error(err); + }) + .pipe(gulp.dest('dist')), + ), + ); + done(); +}); + gulp.task('web-formats', (done) => { webFormats.map(({transformType, formatType}) => gulp @@ -234,13 +298,15 @@ function reload(done) { function watch() { gulp.watch( - ['tokens/*.yml'], + ['tokens/*.yml', 'tokens/themes/*.yml'], gulp.series([ 'web-formats', 'typings', 'spacing-formats', 'color-formats', 'docs', + 'themes', + 'palettes', ]), ); gulp.watch('docs/**/*.scss', gulp.series('docs:styles')); @@ -251,7 +317,14 @@ function watch() { gulp.task( 'watch', gulp.series( - ['web-formats', 'spacing-formats', 'color-formats', 'docs'], + [ + 'web-formats', + 'spacing-formats', + 'color-formats', + 'docs', + 'themes', + 'palettes', + ], gulp.series(serve, watch), ), ); @@ -264,5 +337,7 @@ gulp.task( 'color-filters', 'spacing-formats', 'color-formats', + 'themes', + 'palettes', ]), ); diff --git a/package.json b/package.json index 2f206ef1..d8343527 100644 --- a/package.json +++ b/package.json @@ -77,5 +77,8 @@ "theo": "8.1.4", "tinycolor2": "^1.4.1", "xml": "^1.0.1" + }, + "dependencies": { + "hsluv": "^0.1.0" } } diff --git a/tests/color-factory.test.js b/tests/color-factory.test.js new file mode 100644 index 00000000..262830e7 --- /dev/null +++ b/tests/color-factory.test.js @@ -0,0 +1,25 @@ +const {colorFactory} = require('../formats/utils/color-factory/color-factory'); + +describe('colorFactory()', () => { + const colors = { + surface: '#111213', + onSurface: '#111213', + interactive: '#2E72D2', + secondary: '#111213', + primary: '#008060', + critical: '#D82C0D', + warning: '#FFC453', + highlight: '#5BCDDA', + success: '#008060', + decorative: '#FFC96B', + }; + + it('outputs variants', () => { + const variants = colorFactory(colors, 'light'); + expect(Object.keys(variants)).toContain('text'); + }); + + it.todo('creates variants based on a theme'); + + it.todo('creates variants based on a custom config'); +}); diff --git a/tests/package.json.test.js b/tests/package.json.test.js index 5e1f2201..2538c912 100644 --- a/tests/package.json.test.js +++ b/tests/package.json.test.js @@ -1,5 +1,7 @@ describe('package.json', () => { - it('doesn’t have any dependencies', () => { - expect(require('../package.json').dependencies).toBeUndefined(); + it('has one dependency', () => { + expect(Object.keys(require('../package.json').dependencies)).toHaveLength( + 1, + ); }); }); diff --git a/tokens/themes/base.yml b/tokens/themes/base.yml new file mode 100644 index 00000000..a143f14f --- /dev/null +++ b/tokens/themes/base.yml @@ -0,0 +1,24 @@ +props: + - name: surface + value: '#111213' + - name: onSurface + value: '#111213' + - name: interactive + value: '#2E72D2' + - name: secondary + value: '#111213' + - name: primary + value: '#008060' + - name: critical + value: '#D82C0D' + - name: warning + value: '#FFC453' + - name: highlight + value: '#5BCDDA' + - name: success + value: '#008060' + - name: decorative + value: '#FFC96B' +global: + type: color + category: background-color diff --git a/yarn.lock b/yarn.lock index 8f881cf2..97c9aa27 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5221,11 +5221,6 @@ detect-file@^1.0.0: resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7" integrity sha1-8NZtA2cqglyxtzvbP+YjEMjlUrc= -detect-libc@^1.0.2: - version "1.0.3" - resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b" - integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups= - detect-newline@2.X, detect-newline@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2" @@ -6933,13 +6928,6 @@ fs-extra@^7.0.1: jsonfile "^4.0.0" universalify "^0.1.0" -fs-minipass@^1.2.5: - version "1.2.7" - resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7" - integrity sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA== - dependencies: - minipass "^2.6.0" - fs-mkdirp-stream@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs-mkdirp-stream/-/fs-mkdirp-stream-1.0.0.tgz#0b7815fc3201c6a69e14db98ce098c16935259eb" @@ -8044,6 +8032,11 @@ hsla-regex@^1.0.0: resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38" integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg= +hsluv@^0.1.0: + version "0.1.0" + resolved "https://registry.yarnpkg.com/hsluv/-/hsluv-0.1.0.tgz#29f40d49642bd56dd0c192122abcc723bb5c2d6c" + integrity sha512-ERcanKLAszD2XN3Vh5r5Szkrv9q0oSTudmP0rkiKAGM/3NMc9FLmMZBB7TSqTaXJfSDBOreYTfjezCOYbRKqlw== + html-comment-regex@^1.1.0: version "1.1.2" resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7" @@ -8190,7 +8183,7 @@ https-browserify@^1.0.0: resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73" integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM= -iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13: +iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@~0.4.13: version "0.4.24" resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b" integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA== @@ -8238,13 +8231,6 @@ ignore-by-default@^1.0.1: resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09" integrity sha1-SMptcvbGo68Aqa1K5odr44ieKwk= -ignore-walk@^3.0.1: - version "3.0.3" - resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37" - integrity sha512-m7o6xuOaT1aqheYHKf8W6J5pYH85ZI9w077erOzLje3JsB1gkafkAhHHY19dqjulgIZHFm32Cp5uNZgcQqdJKw== - dependencies: - minimatch "^3.0.4" - ignore@^3.3.5: version "3.3.10" resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043" @@ -10865,21 +10851,6 @@ minimist@~0.0.1: resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf" integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8= -minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0: - version "2.9.0" - resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6" - integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg== - dependencies: - safe-buffer "^5.1.2" - yallist "^3.0.0" - -minizlib@^1.2.1: - version "1.3.3" - resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d" - integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q== - dependencies: - minipass "^2.9.0" - mississippi@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022" @@ -11032,15 +11003,6 @@ natural-compare@^1.4.0: resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc= -needle@^2.2.1: - version "2.4.0" - resolved "https://registry.yarnpkg.com/needle/-/needle-2.4.0.tgz#6833e74975c444642590e15a750288c5f939b57c" - integrity sha512-4Hnwzr3mi5L97hMYeNl8wRW/Onhy4nUKR/lVemJ8gJedxxUyBLm9kkrDColJvoSfwi0jCNhD+xCdOtiGDQiRZg== - dependencies: - debug "^3.2.6" - iconv-lite "^0.4.4" - sax "^1.2.4" - negotiator@0.6.2: version "0.6.2" resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb" @@ -11164,22 +11126,6 @@ node-object-hash@^1.4.1: resolved "https://registry.yarnpkg.com/node-object-hash/-/node-object-hash-1.4.2.tgz#385833d85b229902b75826224f6077be969a9e94" integrity sha512-UdS4swXs85fCGWWf6t6DMGgpN/vnlKeSGEQ7hJcrs7PBFoxoKLmibc3QRb7fwiYsjdL7PX8iI/TMSlZ90dgHhQ== -node-pre-gyp@*: - version "0.14.0" - resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83" - integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA== - dependencies: - detect-libc "^1.0.2" - mkdirp "^0.5.1" - needle "^2.2.1" - nopt "^4.0.1" - npm-packlist "^1.1.6" - npmlog "^4.0.2" - rc "^1.2.7" - rimraf "^2.6.1" - semver "^5.3.0" - tar "^4.4.2" - node-releases@^1.0.0-alpha.11, node-releases@^1.1.44: version "1.1.45" resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.45.tgz#4cf7e9175d71b1317f15ffd68ce63bce1d53e9f2" @@ -11245,14 +11191,6 @@ nodemon@^2.0.2: dependencies: abbrev "1" -nopt@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d" - integrity sha1-0NRoWv1UFRk8jHUFYC0NF81kR00= - dependencies: - abbrev "1" - osenv "^0.1.4" - nopt@~1.0.10: version "1.0.10" resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee" @@ -11313,13 +11251,6 @@ now-and-later@^2.0.0: dependencies: once "^1.3.2" -npm-bundled@^1.0.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.1.tgz#1edd570865a94cdb1bc8220775e29466c9fb234b" - integrity sha512-gqkfgGePhTpAEgUsGEgcq1rqPXA+tv/aVBlgEzfXwA1yiUJF7xtEt3CtVwOjNYQOVknDk0F20w58Fnm3EtG0fA== - dependencies: - npm-normalize-package-bin "^1.0.1" - npm-conf@^1.1.0: version "1.1.3" resolved "https://registry.yarnpkg.com/npm-conf/-/npm-conf-1.1.3.tgz#256cc47bd0e218c259c4e9550bf413bc2192aff9" @@ -11328,19 +11259,6 @@ npm-conf@^1.1.0: config-chain "^1.1.11" pify "^3.0.0" -npm-normalize-package-bin@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz#6e79a41f23fd235c0623218228da7d9c23b8f6e2" - integrity sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA== - -npm-packlist@^1.1.6: - version "1.4.7" - resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.7.tgz#9e954365a06b80b18111ea900945af4f88ed4848" - integrity sha512-vAj7dIkp5NhieaGZxBJB8fF4R0078rqsmhJcAfXZ6O7JJhjhPK96n5Ry1oZcfLXgfun0GWTZPOxaEyqv8GBykQ== - dependencies: - ignore-walk "^3.0.1" - npm-bundled "^1.0.1" - npm-run-all@^4.1.5: version "4.1.5" resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.5.tgz#04476202a15ee0e2e214080861bff12a51d98fba" @@ -11363,7 +11281,7 @@ npm-run-path@^2.0.0: dependencies: path-key "^2.0.0" -"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.2: +"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0: version "4.1.2" resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b" integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg== @@ -11729,7 +11647,7 @@ os-tmpdir@^1.0.0, os-tmpdir@~1.0.2: resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274" integrity sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ= -osenv@0, osenv@^0.1.4: +osenv@0: version "0.1.5" resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410" integrity sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g== @@ -13068,7 +12986,7 @@ raw-body@^2.3.2: iconv-lite "0.4.24" unpipe "1.0.0" -rc@^1.0.1, rc@^1.1.2, rc@^1.1.6, rc@^1.2.7: +rc@^1.0.1, rc@^1.1.2, rc@^1.1.6: version "1.2.8" resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed" integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw== @@ -13829,7 +13747,7 @@ rgba-regex@^1.0.0: resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3" integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM= -rimraf@2, rimraf@^2.2.6, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.3: +rimraf@2, rimraf@^2.2.6, rimraf@^2.5.4, rimraf@^2.6.3: version "2.7.1" resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec" integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w== @@ -15331,19 +15249,6 @@ tar@^2.0.0: fstream "^1.0.12" inherits "2" -tar@^4.4.2: - version "4.4.13" - resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525" - integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA== - dependencies: - chownr "^1.1.1" - fs-minipass "^1.2.5" - minipass "^2.8.6" - minizlib "^1.2.1" - mkdirp "^0.5.0" - safe-buffer "^5.1.2" - yallist "^3.0.3" - temp-dir@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-1.0.0.tgz#0a7c0ea26d3a39afa7e0ebea9c1fc0bc4daa011d" @@ -16943,7 +16848,7 @@ yallist@^2.1.2: resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52" integrity sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI= -yallist@^3.0.0, yallist@^3.0.2, yallist@^3.0.3: +yallist@^3.0.2: version "3.1.1" resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd" integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==