From 29e49bd01716c6831be5b8ff1c3da1bc6e69384f Mon Sep 17 00:00:00 2001 From: Dan Rosenthal Date: Wed, 19 Feb 2020 14:54:03 -0500 Subject: [PATCH] TS and new structures (#97) Co-authored-by: Ben Scott <227292+BPScott@users.noreply.github.com> Co-authored-by: Tim Layton --- .circleci/config.yml | 1 + .eslintignore | 4 + .gitignore | 2 + .npmignore | 5 +- .prettierignore | 4 + .vscode/settings.json | 13 + color-factory.d.ts | 24 - color-factory.js | 3 - dist/base.dark.android.xml | 97 --- dist/base.dark.ios.json | 797 ------------------ dist/base.dark.json | 96 --- dist/base.json | 12 - dist/base.light.android.xml | 97 --- dist/base.light.ios.json | 797 ------------------ dist/base.light.json | 96 --- docs/index.css | 5 +- docs/index.css.map | 2 +- formats/tokens.js | 8 +- gulpfile.js | 13 +- package.json | 32 +- polaris_tokens.gemspec | 2 +- sewing-kit.config.ts | 11 + shipit.yml | 1 + .../color-factory.test.ts | 9 +- .../color-factory.js => src/color-factory.ts | 17 +- .../configs/base.js => src/configs/base.ts | 7 +- src/index.ts | 1 + src/types.ts | 17 + .../color-factory/utils.js => src/utils.ts | 26 +- ...olors.test.js.snap => colors.test.ts.snap} | 0 ...ion.test.js.snap => duration.test.ts.snap} | 0 tests/{colors.test.js => colors.test.ts} | 18 +- tests/{duration.test.js => duration.test.ts} | 22 +- tests/package.json.test.js | 10 - tsconfig.build.json | 5 + tsconfig.json | 10 + yarn.lock | 17 + 37 files changed, 181 insertions(+), 2100 deletions(-) create mode 100644 .eslintignore delete mode 100644 color-factory.d.ts delete mode 100644 color-factory.js delete mode 100644 dist/base.dark.android.xml delete mode 100644 dist/base.dark.ios.json delete mode 100644 dist/base.dark.json delete mode 100644 dist/base.json delete mode 100644 dist/base.light.android.xml delete mode 100644 dist/base.light.ios.json delete mode 100644 dist/base.light.json create mode 100644 sewing-kit.config.ts rename tests/color-factory.test.js => src/color-factory.test.ts (74%) rename formats/utils/color-factory/color-factory.js => src/color-factory.ts (72%) rename formats/utils/color-factory/configs/base.js => src/configs/base.ts (99%) create mode 100644 src/index.ts create mode 100644 src/types.ts rename formats/utils/color-factory/utils.js => src/utils.ts (61%) rename tests/__snapshots__/{colors.test.js.snap => colors.test.ts.snap} (100%) rename tests/__snapshots__/{duration.test.js.snap => duration.test.ts.snap} (100%) rename tests/{colors.test.js => colors.test.ts} (75%) rename tests/{duration.test.js => duration.test.ts} (78%) delete mode 100644 tests/package.json.test.js create mode 100644 tsconfig.build.json create mode 100644 tsconfig.json diff --git a/.circleci/config.yml b/.circleci/config.yml index 9aabb9a8..bc10353c 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -18,6 +18,7 @@ jobs: key: v2-npm-deps-{{ arch }}-{{ checksum "yarn.lock" }} paths: - node_modules + - run: yarn run type-check - run: yarn run build-ci - run: yarn run test - run: yarn run lint diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000..31544016 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,4 @@ +node_modules +/dist +/dist-modern +/tmp diff --git a/.gitignore b/.gitignore index 7d228b2c..bf4d2b1b 100644 --- a/.gitignore +++ b/.gitignore @@ -15,3 +15,5 @@ node_modules # sewing-kit temporary folder tmp + +dist-modern diff --git a/.npmignore b/.npmignore index 78ac1421..774b063f 100644 --- a/.npmignore +++ b/.npmignore @@ -1,11 +1,8 @@ **/* !dist/**/* +!dist-modern/**/* !index.js !LICENSE.md !README.md !package.json -!yarn.lock -!formats/utils/color-factory/**/* -!color-factory.js -!color-factory.d.ts dist/colors.ase.json diff --git a/.prettierignore b/.prettierignore index ec6d3cdd..be3ca290 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1 +1,5 @@ +node_modules package.json +/.dev +/dist-modern +/tmp diff --git a/.vscode/settings.json b/.vscode/settings.json index 1ec65dfa..cf827981 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -5,5 +5,18 @@ "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true + }, + "files.exclude": { + "**/.DS_Store": true, + "**/.git": true, + "**/node_modules": true, + ".{bundle,dev,shadowenv.d}": true, + "{tmp,dist-modern}/": true + }, + "search.exclude": { + "**/.DS_Store": true, + "**/.git": true, + "**/node_modules": true, + "{tmp,dist-modern}/": true } } diff --git a/color-factory.d.ts b/color-factory.d.ts deleted file mode 100644 index f71482cc..00000000 --- a/color-factory.d.ts +++ /dev/null @@ -1,24 +0,0 @@ -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: Partial>, - scheme: Scheme, - config?: Config, -): Record; diff --git a/color-factory.js b/color-factory.js deleted file mode 100644 index af7f0f1c..00000000 --- a/color-factory.js +++ /dev/null @@ -1,3 +0,0 @@ -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 deleted file mode 100644 index 58b9e26b..00000000 --- a/dist/base.dark.android.xml +++ /dev/null @@ -1,97 +0,0 @@ - - - #ffcd290c - #ffbb250a - #ffe32f0e - #fffa3511 - #ff008060 - #ff005640 - #ff009671 - #ff00a47c - #ff333537 - #ff202223 - #ff54575b - #ff606467 - #80000000 - #ff0b0c0d - #ff505356 - #ffe32f0e - #ff831704 - #ff449da7 - #ff505356 - #ff676b6f - #ff505356 - #ff494c4e - #ff008766 - #ff997000 - #fff4b7bf - #ffc23356 - #ffffffff - #ff00ddda - #ff167c79 - #ffffffff - #ffffba43 - #ff8e6609 - #ffffffff - #ff00e38d - #ff007c5a - #ffffffff - #fff5b6c0 - #ffce5814 - #ffffffff - #ff2662b6 - #33b9b9b9 - #ffa6acb2 - #ffda2d0d - #ff54575a - #ff2c6c73 - #ffe1e3e5 - #fffff8f7 - #ffffffff - #ffe6fff4 - #ffa6acb2 - #ff787d81 - #ff005e46 - #ff684b00 - #ff36a3ff - #fffd726a - #fffeaca8 - #fffd8a84 - #fffd9f9b - #ff2662b6 - #ff67afff - #ff88bcff - #80212121 - #0d171818 - #26ffffff - #ff202123 - #ff450701 - #ff450701 - #ff441714 - #ff6b1003 - #ff006971 - #ff123539 - #ff2f3133 - #ff3e4043 - #ff0c1210 - #ff28302c - #ff36403b - #ff020e23 - #ff071d3d - #ff0d2b56 - #ff1a1c1d - #ff005e46 - #ff1c352c - #ff997000 - #ff4d3b1d - #ffe3e5e7 - #ffe9807a - #ff6f7377 - #ffa2effa - #ffffffff - #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 deleted file mode 100644 index e7e782b7..00000000 --- a/dist/base.dark.ios.json +++ /dev/null @@ -1,797 +0,0 @@ -[ - { - "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": "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": "iconHovered", - "rgba": { - "r": 0.8823529411764706, - "g": 0.8901960784313725, - "b": 0.8980392156862745, - "a": 1 - }, - "hex": "#e1e3e5ff" - }, - { - "name": "iconPressed", - "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": "interactive", - "rgba": {"r": 0.21176470588235294, "g": 0.6392156862745098, "b": 1, "a": 1}, - "hex": "#36a3ffff" - }, - { - "name": "interactiveDisabled", - "rgba": { - "r": 0.14901960784313725, - "g": 0.3843137254901961, - "b": 0.7137254901960784, - "a": 1 - }, - "hex": "#2662b6ff" - }, - { - "name": "interactiveHovered", - "rgba": {"r": 0.403921568627451, "g": 0.6862745098039216, "b": 1, "a": 1}, - "hex": "#67afffff" - }, - { - "name": "interactivePressed", - "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": "textOnInteractive", - "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": "surfacePrimarySelected", - "rgba": { - "r": 0.047058823529411764, - "g": 0.07058823529411765, - "b": 0.06274509803921569, - "a": 1 - }, - "hex": "#0c1210ff" - }, - { - "name": "surfacePrimarySelectedHovered", - "rgba": { - "r": 0.1568627450980392, - "g": 0.18823529411764706, - "b": 0.17254901960784313, - "a": 1 - }, - "hex": "#28302cff" - }, - { - "name": "surfacePrimarySelectedPressed", - "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": "interactiveCritical", - "rgba": { - "r": 0.9921568627450981, - "g": 0.4470588235294118, - "b": 0.41568627450980394, - "a": 1 - }, - "hex": "#fd726aff" - }, - { - "name": "interactiveCriticalDisabled", - "rgba": { - "r": 0.996078431372549, - "g": 0.6745098039215687, - "b": 0.6588235294117647, - "a": 1 - }, - "hex": "#feaca8ff" - }, - { - "name": "interactiveCriticalHovered", - "rgba": { - "r": 0.9921568627450981, - "g": 0.5411764705882353, - "b": 0.5176470588235295, - "a": 1 - }, - "hex": "#fd8a84ff" - }, - { - "name": "interactiveCriticalPressed", - "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": "decorativeOneIcon", - "rgba": {"r": 1, "g": 0.7294117647058823, "b": 0.2627450980392157, "a": 1}, - "hex": "#ffba43ff" - }, - { - "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": "decorativeTwoIcon", - "rgba": { - "r": 0.9607843137254902, - "g": 0.7137254901960784, - "b": 0.7529411764705882, - "a": 1 - }, - "hex": "#f5b6c0ff" - }, - { - "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": "decorativeThreeIcon", - "rgba": {"r": 0, "g": 0.8901960784313725, "b": 0.5529411764705883, "a": 1}, - "hex": "#00e38dff" - }, - { - "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": "decorativeFourIcon", - "rgba": {"r": 0, "g": 0.8666666666666667, "b": 0.8549019607843137, "a": 1}, - "hex": "#00dddaff" - }, - { - "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": "decorativeFiveIcon", - "rgba": { - "r": 0.9568627450980393, - "g": 0.7176470588235294, - "b": 0.7490196078431373, - "a": 1 - }, - "hex": "#f4b7bfff" - }, - { - "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 deleted file mode 100644 index 00e716b3..00000000 --- a/dist/base.dark.json +++ /dev/null @@ -1,96 +0,0 @@ -{ - "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)", - "borderSubdued": "rgb(73, 76, 78)", - "icon": "rgb(166, 172, 178)", - "iconHovered": "rgb(225, 227, 229)", - "iconPressed": "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)", - "interactive": "rgb(54, 163, 255)", - "interactiveDisabled": "rgb(38, 98, 182)", - "interactiveHovered": "rgb(103, 175, 255)", - "interactivePressed": "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)", - "textOnInteractive": "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)", - "surfacePrimarySelected": "rgb(12, 18, 16)", - "surfacePrimarySelectedHovered": "rgb(40, 48, 44)", - "surfacePrimarySelectedPressed": "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)", - "interactiveCritical": "rgb(253, 114, 106)", - "interactiveCriticalDisabled": "rgb(254, 172, 168)", - "interactiveCriticalHovered": "rgb(253, 138, 132)", - "interactiveCriticalPressed": "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)", - "decorativeOneIcon": "rgb(255, 186, 67)", - "decorativeOneSurface": "rgb(142, 102, 9)", - "decorativeOneText": "rgb(255, 255, 255)", - "decorativeTwoIcon": "rgb(245, 182, 192)", - "decorativeTwoSurface": "rgb(206, 88, 20)", - "decorativeTwoText": "rgb(255, 255, 255)", - "decorativeThreeIcon": "rgb(0, 227, 141)", - "decorativeThreeSurface": "rgb(0, 124, 90)", - "decorativeThreeText": "rgb(255, 255, 255)", - "decorativeFourIcon": "rgb(0, 221, 218)", - "decorativeFourSurface": "rgb(22, 124, 121)", - "decorativeFourText": "rgb(255, 255, 255)", - "decorativeFiveIcon": "rgb(244, 183, 191)", - "decorativeFiveSurface": "rgb(194, 51, 86)", - "decorativeFiveText": "rgb(255, 255, 255)" -} diff --git a/dist/base.json b/dist/base.json deleted file mode 100644 index 6f0ee65a..00000000 --- a/dist/base.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "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 deleted file mode 100644 index b209e561..00000000 --- a/dist/base.light.android.xml +++ /dev/null @@ -1,97 +0,0 @@ - - - #ffd82c0d - #fffd5040 - #ffc1260a - #ffac2108 - #ff008060 - #ff005640 - #ff007255 - #ff00644b - #ffeaebec - #ffedeeef - #ffe1e3e5 - #ffd8dadd - #80000000 - #fffafafa - #ffb4b9be - #ffe32f0e - #fffebcb9 - #ff449da7 - #ffb4b9be - #ffd2d5d8 - #ff999ea4 - #ffd2d5d8 - #ff008766 - #fff1b300 - #ffae2b4c - #fffdc9d0 - #ff4f0e1f - #ff006a68 - #ff91e0d6 - #ff002d2d - #ff7e5700 - #ffffc96b - #ff3d2800 - #ff006d41 - #ff90e3b3 - #ff002f19 - #ffaf294e - #ffffc4b0 - #ff490b1c - #ff498af2 - #26000000 - #ff5c5f62 - #ffec310f - #ffbabec3 - #ff4197a1 - #ff1a1c1d - #fffff8f7 - #ffffffff - #ffe6fff4 - #ff44474a - #ff8c9196 - #ff004432 - #ffcd9800 - #ff2e72d2 - #ffdc2d0e - #fffd938d - #ffcd290c - #ff670f03 - #ff498af2 - #ff2156a1 - #ff1a4889 - #80ffffff - #0d171818 - #26000000 - #ffffffff - #fffffafa - #fffff8f7 - #fffff0f0 - #fffed3d1 - #ff8ee0eb - #fff4fdfe - #fff3f4f4 - #ffe1e3e5 - #ffe2f5ed - #ffb3d0c3 - #ffa2bcb0 - #fff0f3fe - #ffd6dffc - #ffbbcbf9 - #fffafafa - #ff89e5c2 - #fff7fefb - #ffffcb74 - #fffff2e2 - #ff202223 - #ffd72c0d - #ff90959a - #ff081f21 - #ffffffff - #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 deleted file mode 100644 index 24f13711..00000000 --- a/dist/base.light.ios.json +++ /dev/null @@ -1,797 +0,0 @@ -[ - { - "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": "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": "iconHovered", - "rgba": { - "r": 0.10196078431372549, - "g": 0.10980392156862745, - "b": 0.11372549019607843, - "a": 1 - }, - "hex": "#1a1c1dff" - }, - { - "name": "iconPressed", - "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": "interactive", - "rgba": { - "r": 0.1803921568627451, - "g": 0.4470588235294118, - "b": 0.8235294117647058, - "a": 1 - }, - "hex": "#2e72d2ff" - }, - { - "name": "interactiveDisabled", - "rgba": { - "r": 0.28627450980392155, - "g": 0.5411764705882353, - "b": 0.9490196078431372, - "a": 1 - }, - "hex": "#498af2ff" - }, - { - "name": "interactiveHovered", - "rgba": { - "r": 0.12941176470588237, - "g": 0.33725490196078434, - "b": 0.6313725490196078, - "a": 1 - }, - "hex": "#2156a1ff" - }, - { - "name": "interactivePressed", - "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": "textOnInteractive", - "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": "surfacePrimarySelected", - "rgba": { - "r": 0.8862745098039215, - "g": 0.9607843137254902, - "b": 0.9294117647058824, - "a": 1 - }, - "hex": "#e2f5edff" - }, - { - "name": "surfacePrimarySelectedHovered", - "rgba": { - "r": 0.7019607843137254, - "g": 0.8156862745098039, - "b": 0.7647058823529411, - "a": 1 - }, - "hex": "#b3d0c3ff" - }, - { - "name": "surfacePrimarySelectedPressed", - "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": "interactiveCritical", - "rgba": { - "r": 0.8627450980392157, - "g": 0.17647058823529413, - "b": 0.054901960784313725, - "a": 1 - }, - "hex": "#dc2d0eff" - }, - { - "name": "interactiveCriticalDisabled", - "rgba": { - "r": 0.9921568627450981, - "g": 0.5764705882352941, - "b": 0.5529411764705883, - "a": 1 - }, - "hex": "#fd938dff" - }, - { - "name": "interactiveCriticalHovered", - "rgba": { - "r": 0.803921568627451, - "g": 0.1607843137254902, - "b": 0.047058823529411764, - "a": 1 - }, - "hex": "#cd290cff" - }, - { - "name": "interactiveCriticalPressed", - "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": "decorativeOneIcon", - "rgba": {"r": 0.49411764705882355, "g": 0.3411764705882353, "b": 0, "a": 1}, - "hex": "#7e5700ff" - }, - { - "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": "decorativeTwoIcon", - "rgba": { - "r": 0.6862745098039216, - "g": 0.1607843137254902, - "b": 0.3058823529411765, - "a": 1 - }, - "hex": "#af294eff" - }, - { - "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": "decorativeThreeIcon", - "rgba": {"r": 0, "g": 0.42745098039215684, "b": 0.2549019607843137, "a": 1}, - "hex": "#006d41ff" - }, - { - "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": "decorativeFourIcon", - "rgba": { - "r": 0, - "g": 0.41568627450980394, - "b": 0.40784313725490196, - "a": 1 - }, - "hex": "#006a68ff" - }, - { - "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": "decorativeFiveIcon", - "rgba": { - "r": 0.6823529411764706, - "g": 0.16862745098039217, - "b": 0.2980392156862745, - "a": 1 - }, - "hex": "#ae2b4cff" - }, - { - "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 deleted file mode 100644 index 4295696d..00000000 --- a/dist/base.light.json +++ /dev/null @@ -1,96 +0,0 @@ -{ - "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)", - "borderSubdued": "rgb(210, 213, 216)", - "icon": "rgb(92, 95, 98)", - "iconHovered": "rgb(26, 28, 29)", - "iconPressed": "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)", - "interactive": "rgb(46, 114, 210)", - "interactiveDisabled": "rgb(73, 138, 242)", - "interactiveHovered": "rgb(33, 86, 161)", - "interactivePressed": "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)", - "textOnInteractive": "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)", - "surfacePrimarySelected": "rgb(226, 245, 237)", - "surfacePrimarySelectedHovered": "rgb(179, 208, 195)", - "surfacePrimarySelectedPressed": "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)", - "interactiveCritical": "rgb(220, 45, 14)", - "interactiveCriticalDisabled": "rgb(253, 147, 141)", - "interactiveCriticalHovered": "rgb(205, 41, 12)", - "interactiveCriticalPressed": "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)", - "decorativeOneIcon": "rgb(126, 87, 0)", - "decorativeOneSurface": "rgb(255, 201, 107)", - "decorativeOneText": "rgb(61, 40, 0)", - "decorativeTwoIcon": "rgb(175, 41, 78)", - "decorativeTwoSurface": "rgb(255, 196, 176)", - "decorativeTwoText": "rgb(73, 11, 28)", - "decorativeThreeIcon": "rgb(0, 109, 65)", - "decorativeThreeSurface": "rgb(144, 227, 179)", - "decorativeThreeText": "rgb(0, 47, 25)", - "decorativeFourIcon": "rgb(0, 106, 104)", - "decorativeFourSurface": "rgb(145, 224, 214)", - "decorativeFourText": "rgb(0, 45, 45)", - "decorativeFiveIcon": "rgb(174, 43, 76)", - "decorativeFiveSurface": "rgb(253, 201, 208)", - "decorativeFiveText": "rgb(79, 14, 31)" -} diff --git a/docs/index.css b/docs/index.css index 9af87b64..2ebbd1ed 100644 --- a/docs/index.css +++ b/docs/index.css @@ -6,8 +6,7 @@ body { text-transform: initial; letter-spacing: initial; color: #212b36; - font-family: -apple-system, BlinkMacSystemFont, 'San Francisco', Roboto, - 'Segoe UI', 'Helvetica Neue', sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", sans-serif; } @media (min-width: 40em) { @@ -121,7 +120,7 @@ thead th:first-child { } code { - font-family: Monaco, Consolas, 'Lucida Console', monospace; + font-family: Monaco, Consolas, "Lucida Console", monospace; } .metric-box, diff --git a/docs/index.css.map b/docs/index.css.map index 09337256..fcd0f0c7 100644 --- a/docs/index.css.map +++ b/docs/index.css.map @@ -1 +1 @@ -{"version":3,"file":"index.css","sources":["polaris-index.scss","../dist/index.scss"],"sourcesContent":["// stylelint-disable property-no-vendor-prefix, selector-max-type, selector-class-pattern\n\n@import '../dist/index';\n\nhtml,\nbody {\n font-size: 1.5rem;\n font-weight: 400;\n line-height: 2rem;\n text-transform: initial;\n letter-spacing: initial;\n color: $color-ink;\n font-family: $font-stack-base;\n}\n\n@media (min-width: 40em) {\n html,\n body {\n font-size: 1.4rem;\n }\n}\n\nhtml {\n position: relative;\n box-sizing: border-box;\n font-size: 62.5%;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n -webkit-text-size-adjust: 100%;\n -ms-text-size-adjust: 100%;\n text-size-adjust: 100%;\n text-rendering: optimizeLegibility;\n}\n\nbody {\n min-height: 100%;\n margin: 0;\n padding: 0;\n background-color: $color-sky-light;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np {\n margin: 0;\n font-size: 1em;\n font-weight: 400;\n}\n\n.banner,\n.contentinfo {\n background: $color-sky-light;\n}\n\n.banner {\n padding: 1em 0;\n}\n\n.container {\n margin: 0 auto;\n padding: $spacing-base $spacing-extra-loose;\n max-width: 128rem;\n}\n\n.container--shadow {\n background: $color-white;\n border-radius: 6px;\n box-shadow: 0 1.2rem 3.6rem rgba(0, 0, 0, 0.2);\n margin-bottom: $spacing-extra-loose * 2;\n}\n\nh1 {\n margin: 0;\n font-size: 3rem;\n font-weight: 400;\n line-height: 2;\n padding-left: $spacing-loose;\n}\n\nsection + section {\n margin-top: $spacing-extra-loose * 2;\n}\n\ntable {\n table-layout: fixed;\n border-collapse: separate;\n border-spacing: 1rem;\n width: 100%;\n}\n\nth,\ntd {\n padding: 0 1rem;\n vertical-align: baseline;\n word-break: break-word;\n hyphens: auto;\n}\n\nth {\n font-weight: 400;\n text-align: left;\n}\n\nthead th {\n border-bottom: 1px solid $color-indigo-lighter;\n padding-top: 1rem;\n padding-bottom: 0.5rem;\n color: $color-ink-lighter;\n}\n\nthead th:first-child {\n font-size: 2rem;\n color: inherit;\n}\n\ncode {\n font-family: $font-stack-monospace;\n}\n\n.metric-box,\n.radius-box {\n display: inline-block;\n vertical-align: middle;\n background: $color-sky;\n}\n\n.radius-box {\n width: 100%;\n height: 3rem;\n}\n\n.radius-box.borderRadiusCircle {\n width: 3rem;\n}\n\n.line-height-example {\n border-bottom: 1px solid $color-sky;\n background-image: linear-gradient($color-sky 1px, transparent 1px);\n background-size: 100% 1rem;\n}\n","\n$color-purple-text: rgb(80, 73, 90);\n$color-purple-darker: rgb(35, 0, 81);\n$color-purple-dark: rgb(80, 36, 143);\n$color-purple: rgb(156, 106, 222);\n$color-purple-light: rgb(227, 208, 255);\n$color-purple-lighter: rgb(246, 240, 253);\n$color-indigo-text: rgb(62, 65, 85);\n$color-indigo-darker: rgb(0, 6, 57);\n$color-indigo-dark: rgb(32, 46, 120);\n$color-indigo: rgb(92, 106, 196);\n$color-indigo-light: rgb(179, 188, 245);\n$color-indigo-lighter: rgb(244, 245, 250);\n$color-blue-text: rgb(62, 78, 87);\n$color-blue-darker: rgb(0, 20, 41);\n$color-blue-dark: rgb(8, 78, 138);\n$color-blue: rgb(0, 111, 187);\n$color-blue-light: rgb(180, 225, 250);\n$color-blue-lighter: rgb(235, 245, 250);\n$color-teal-text: rgb(64, 83, 82);\n$color-teal-darker: rgb(0, 49, 53);\n$color-teal-dark: rgb(0, 132, 142);\n$color-teal: rgb(71, 193, 191);\n$color-teal-light: rgb(183, 236, 236);\n$color-teal-lighter: rgb(224, 245, 245);\n$color-green-text: rgb(65, 79, 62);\n$color-green-darker: rgb(23, 54, 48);\n$color-green-dark: rgb(16, 128, 67);\n$color-green: rgb(80, 184, 60);\n$color-green-light: rgb(187, 229, 179);\n$color-green-lighter: rgb(227, 241, 223);\n$color-yellow-text: rgb(89, 81, 48);\n$color-yellow-darker: rgb(87, 59, 0);\n$color-yellow-dark: rgb(138, 97, 22);\n$color-yellow: rgb(238, 194, 0);\n$color-yellow-light: rgb(255, 234, 138);\n$color-yellow-lighter: rgb(252, 241, 205);\n$color-orange-text: rgb(89, 68, 48);\n$color-orange-darker: rgb(74, 21, 4);\n$color-orange-dark: rgb(192, 87, 23);\n$color-orange: rgb(244, 147, 66);\n$color-orange-light: rgb(255, 197, 139);\n$color-orange-lighter: rgb(252, 235, 219);\n$color-red-text: rgb(88, 60, 53);\n$color-red-darker: rgb(51, 1, 1);\n$color-red-dark: rgb(191, 7, 17);\n$color-red: rgb(222, 54, 24);\n$color-red-light: rgb(254, 173, 154);\n$color-red-lighter: rgb(251, 234, 229);\n$color-ink: rgb(33, 43, 54);\n$color-ink-light: rgb(69, 79, 91);\n$color-ink-lighter: rgb(99, 115, 129);\n$color-ink-lightest: rgb(145, 158, 171);\n$color-sky-dark: rgb(196, 205, 213);\n$color-sky: rgb(223, 227, 232);\n$color-sky-light: rgb(244, 246, 248);\n$color-sky-lighter: rgb(249, 250, 251);\n$color-black: rgb(0, 0, 0);\n$color-white: rgb(255, 255, 255);\n$duration-none: 0;\n$duration-fast: 100ms;\n$duration-base: 200ms;\n$duration-slow: 300ms;\n$duration-slower: 400ms;\n$duration-slowest: 500ms;\n$spacing-none: 0;\n$spacing-extra-tight: 4px;\n$spacing-tight: 8px;\n$spacing-base-tight: 12px;\n$spacing-base: 16px;\n$spacing-loose: 20px;\n$spacing-extra-loose: 32px;\n$font-stack-base: -apple-system, BlinkMacSystemFont, 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', sans-serif;\n$font-stack-monospace: Monaco, Consolas, 'Lucida Console', monospace;\n"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"index.css","sources":["polaris-index.scss","../dist/index.scss"],"sourcesContent":["// stylelint-disable property-no-vendor-prefix, selector-max-type, selector-class-pattern\n\n@import '../dist/index';\n\nhtml,\nbody {\n font-size: 1.5rem;\n font-weight: 400;\n line-height: 2rem;\n text-transform: initial;\n letter-spacing: initial;\n color: $color-ink;\n font-family: $font-stack-base;\n}\n\n@media (min-width: 40em) {\n html,\n body {\n font-size: 1.4rem;\n }\n}\n\nhtml {\n position: relative;\n box-sizing: border-box;\n font-size: 62.5%;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n -webkit-text-size-adjust: 100%;\n -ms-text-size-adjust: 100%;\n text-size-adjust: 100%;\n text-rendering: optimizeLegibility;\n}\n\nbody {\n min-height: 100%;\n margin: 0;\n padding: 0;\n background-color: $color-sky-light;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np {\n margin: 0;\n font-size: 1em;\n font-weight: 400;\n}\n\n.banner,\n.contentinfo {\n background: $color-sky-light;\n}\n\n.banner {\n padding: 1em 0;\n}\n\n.container {\n margin: 0 auto;\n padding: $spacing-base $spacing-extra-loose;\n max-width: 128rem;\n}\n\n.container--shadow {\n background: $color-white;\n border-radius: 6px;\n box-shadow: 0 1.2rem 3.6rem rgba(0, 0, 0, 0.2);\n margin-bottom: $spacing-extra-loose * 2;\n}\n\nh1 {\n margin: 0;\n font-size: 3rem;\n font-weight: 400;\n line-height: 2;\n padding-left: $spacing-loose;\n}\n\nsection + section {\n margin-top: $spacing-extra-loose * 2;\n}\n\ntable {\n table-layout: fixed;\n border-collapse: separate;\n border-spacing: 1rem;\n width: 100%;\n}\n\nth,\ntd {\n padding: 0 1rem;\n vertical-align: baseline;\n word-break: break-word;\n hyphens: auto;\n}\n\nth {\n font-weight: 400;\n text-align: left;\n}\n\nthead th {\n border-bottom: 1px solid $color-indigo-lighter;\n padding-top: 1rem;\n padding-bottom: 0.5rem;\n color: $color-ink-lighter;\n}\n\nthead th:first-child {\n font-size: 2rem;\n color: inherit;\n}\n\ncode {\n font-family: $font-stack-monospace;\n}\n\n.metric-box,\n.radius-box {\n display: inline-block;\n vertical-align: middle;\n background: $color-sky;\n}\n\n.radius-box {\n width: 100%;\n height: 3rem;\n}\n\n.radius-box.borderRadiusCircle {\n width: 3rem;\n}\n\n.line-height-example {\n border-bottom: 1px solid $color-sky;\n background-image: linear-gradient($color-sky 1px, transparent 1px);\n background-size: 100% 1rem;\n}\n","$color-purple-text: rgb(80, 73, 90);\n$color-purple-darker: rgb(35, 0, 81);\n$color-purple-dark: rgb(80, 36, 143);\n$color-purple: rgb(156, 106, 222);\n$color-purple-light: rgb(227, 208, 255);\n$color-purple-lighter: rgb(246, 240, 253);\n$color-indigo-text: rgb(62, 65, 85);\n$color-indigo-darker: rgb(0, 6, 57);\n$color-indigo-dark: rgb(32, 46, 120);\n$color-indigo: rgb(92, 106, 196);\n$color-indigo-light: rgb(179, 188, 245);\n$color-indigo-lighter: rgb(244, 245, 250);\n$color-blue-text: rgb(62, 78, 87);\n$color-blue-darker: rgb(0, 20, 41);\n$color-blue-dark: rgb(8, 78, 138);\n$color-blue: rgb(0, 111, 187);\n$color-blue-light: rgb(180, 225, 250);\n$color-blue-lighter: rgb(235, 245, 250);\n$color-teal-text: rgb(64, 83, 82);\n$color-teal-darker: rgb(0, 49, 53);\n$color-teal-dark: rgb(0, 132, 142);\n$color-teal: rgb(71, 193, 191);\n$color-teal-light: rgb(183, 236, 236);\n$color-teal-lighter: rgb(224, 245, 245);\n$color-green-text: rgb(65, 79, 62);\n$color-green-darker: rgb(23, 54, 48);\n$color-green-dark: rgb(16, 128, 67);\n$color-green: rgb(80, 184, 60);\n$color-green-light: rgb(187, 229, 179);\n$color-green-lighter: rgb(227, 241, 223);\n$color-yellow-text: rgb(89, 81, 48);\n$color-yellow-darker: rgb(87, 59, 0);\n$color-yellow-dark: rgb(138, 97, 22);\n$color-yellow: rgb(238, 194, 0);\n$color-yellow-light: rgb(255, 234, 138);\n$color-yellow-lighter: rgb(252, 241, 205);\n$color-orange-text: rgb(89, 68, 48);\n$color-orange-darker: rgb(74, 21, 4);\n$color-orange-dark: rgb(192, 87, 23);\n$color-orange: rgb(244, 147, 66);\n$color-orange-light: rgb(255, 197, 139);\n$color-orange-lighter: rgb(252, 235, 219);\n$color-red-text: rgb(88, 60, 53);\n$color-red-darker: rgb(51, 1, 1);\n$color-red-dark: rgb(191, 7, 17);\n$color-red: rgb(222, 54, 24);\n$color-red-light: rgb(254, 173, 154);\n$color-red-lighter: rgb(251, 234, 229);\n$color-ink: rgb(33, 43, 54);\n$color-ink-light: rgb(69, 79, 91);\n$color-ink-lighter: rgb(99, 115, 129);\n$color-ink-lightest: rgb(145, 158, 171);\n$color-sky-dark: rgb(196, 205, 213);\n$color-sky: rgb(223, 227, 232);\n$color-sky-light: rgb(244, 246, 248);\n$color-sky-lighter: rgb(249, 250, 251);\n$color-black: rgb(0, 0, 0);\n$color-white: rgb(255, 255, 255);\n$duration-none: 0;\n$duration-fast: 100ms;\n$duration-base: 200ms;\n$duration-slow: 300ms;\n$duration-slower: 400ms;\n$duration-slowest: 500ms;\n$spacing-none: 0;\n$spacing-extra-tight: 4px;\n$spacing-tight: 8px;\n$spacing-base-tight: 12px;\n$spacing-base: 16px;\n$spacing-loose: 20px;\n$spacing-extra-loose: 32px;\n$font-stack-base: -apple-system, BlinkMacSystemFont, 'San Francisco', Roboto,\n 'Segoe UI', 'Helvetica Neue', sans-serif;\n$font-stack-monospace: Monaco, Consolas, 'Lucida Console', monospace;\n"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/formats/tokens.js b/formats/tokens.js index 003855ad..f1a006f7 100644 --- a/formats/tokens.js +++ b/formats/tokens.js @@ -1,17 +1,17 @@ const path = require('path'); const fs = require('fs'); -const {colorFactory} = require('./utils/color-factory/color-factory'); -const {tokensToJson} = require('./utils/color-factory/utils'); +const {colorFactory} = require('../dist-modern/color-factory.js'); +const {tokensToJson} = require('../dist-modern/utils'); function tokenify(scheme) { return (result) => { const configFile = path.basename(result.toJS().meta.file, '.yml'); - const config = `${__dirname}/utils/color-factory/configs/${configFile}`; + const config = `${__dirname}/../dist-modern/configs/${configFile}`; let configArg; if (fs.existsSync(`${config}.js`)) { - configArg = require(`./utils/color-factory/configs/${configFile}`); + configArg = require(`../dist-modern/configs/${configFile}`).config; } const theme = tokensToJson(result); diff --git a/gulpfile.js b/gulpfile.js index 6a69a66f..2f10b3f3 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -106,7 +106,7 @@ gulp.task('themes', (done) => { .on('error', (err) => { throw new Error(err); }) - .pipe(gulp.dest('dist')); + .pipe(gulp.dest('dist-modern/theme')); done(); }); @@ -133,7 +133,7 @@ gulp.task('palettes', (done) => { .on('error', (err) => { throw new Error(err); }) - .pipe(gulp.dest('dist')), + .pipe(gulp.dest('dist-modern/palette')), ), ); done(); @@ -250,6 +250,7 @@ gulp.task('docs:styles', (done) => { $.sass .sync({ precision: 10, + outputStyle: 'expanded', }) .on('error', $.sass.logError), ) @@ -330,14 +331,16 @@ gulp.task( ); gulp.task( - 'default', + 'build-legacy', gulp.series([ 'web-formats', 'typings', 'color-filters', 'spacing-formats', 'color-formats', - 'themes', - 'palettes', ]), ); + +gulp.task('build-modern', gulp.series(['themes', 'palettes'])); + +gulp.task('default', gulp.series(['build-modern', 'build-legacy'])); diff --git a/package.json b/package.json index 3e6f5622..00c04466 100644 --- a/package.json +++ b/package.json @@ -7,16 +7,22 @@ "scripts": { "test": "sewing-kit test", "test-watch": "nodemon --exec 'yarn run build && yarn run test --no-watch' --watch ./tokens --watch ./formats --watch ./gulpfile.js --watch ./scripts --ext js,ts,json,yml", - "clean": "rimraf ./dist", + "clean": "rimraf ./dist-modern ./dist", "prebuild": "yarn run clean", - "build": "npm-run-all build:**", - "build-ci": "npm-run-all build:* build:*:*", - "build:gulp": "gulp", - "build:docs": "gulp docs", - "build:format": "prettier ./{dist,docs}/*.{js,json,css,scss,sketchpalette} --write", - "build:colors:ase": "node ./scripts/ase-encode.js", - "build:colors:clr:exclude-from-ci": "ase2clr ./dist/colors.ase ./dist/colors.clr", - "build:colors:rename-palettes:exclude-from-ci": "renamer --find colors --replace Polaris ./dist/colors.{ase,clr,sketchpalette}", + "build": "npm-run-all build-modern build-legacy build-docs", + "build-ci": "npm-run-all build-modern build-legacy-ci build-docs", + "build-legacy": "npm-run-all build-legacy:**", + "build-legacy-ci": "npm-run-all build-legacy:* build-legacy:*:*", + "build-legacy:gulp": "gulp build-legacy", + "build-legacy:format": "prettier ./dist/*.{js,json,css,scss,sketchpalette} --write", + "build-legacy:colors:ase": "node ./scripts/ase-encode.js", + "build-legacy:colors:clr:exclude-from-ci": "ase2clr ./dist/colors.ase ./dist/colors.clr", + "build-legacy:colors:rename-palettes:exclude-from-ci": "renamer --find colors --replace Polaris ./dist/colors.{ase,clr,sketchpalette}", + "build-modern": "npm-run-all build-modern:ts build-modern:gulp", + "build-modern:ts": "tsc -p tsconfig.build.json", + "build-modern:gulp": "gulp build-modern", + "build-docs": "gulp docs", + "type-check": "sewing-kit type-check", "lint": "sewing-kit lint", "watch": "gulp watch", "heroku-postbuild": "yarn run build-ci", @@ -41,7 +47,7 @@ }, "eslintConfig": { "extends": [ - "plugin:shopify/esnext", + "plugin:shopify/typescript", "plugin:shopify/node", "plugin:shopify/jest", "plugin:shopify/prettier" @@ -55,6 +61,8 @@ "homepage": "https://github.com/Shopify/polaris-tokens#readme", "devDependencies": { "@shopify/sewing-kit": "^0.116.0", + "@types/lodash": "^4.14.149", + "@types/theo": "^8.1.3", "ase-util": "^1.0.3", "ase-utils": "^0.1.1", "browser-sync": "^2.26.7", @@ -76,9 +84,11 @@ "rimraf": "^3.0.0", "theo": "8.1.4", "tinycolor2": "^1.4.1", + "typescript": "^3.7.5", "xml": "^1.0.1" }, "dependencies": { - "hsluv": "^0.1.0" + "hsluv": "^0.1.0", + "tslib": "^1.10.0" } } diff --git a/polaris_tokens.gemspec b/polaris_tokens.gemspec index 0ab7237d..0cb16000 100644 --- a/polaris_tokens.gemspec +++ b/polaris_tokens.gemspec @@ -16,7 +16,7 @@ Gem::Specification.new do |s| s.summary = 'Design Tokens for the Polaris Design System' s.description = 'Design Tokens for the Polaris Design System' s.files = Dir[ - "{dist,lib}/**/*", + "{dist,dist-modern/palette,dist-modern/theme,lib}/**/*", 'README.md', 'LICENSE.md', 'package.json', diff --git a/sewing-kit.config.ts b/sewing-kit.config.ts new file mode 100644 index 00000000..9cc65c77 --- /dev/null +++ b/sewing-kit.config.ts @@ -0,0 +1,11 @@ +import {ConfigurationCallback} from '@shopify/sewing-kit'; + +const sewingKitConfig: ConfigurationCallback = () => { + return { + name: 'polaris-tokens', + library: true, + plugins: [], + }; +}; + +export default sewingKitConfig; diff --git a/shipit.yml b/shipit.yml index ba5bd489..e2e30287 100644 --- a/shipit.yml +++ b/shipit.yml @@ -4,6 +4,7 @@ dependencies: - bundle install deploy: pre: + - yarn run build-modern - bundle exec rake build # Use auto-dist-tag to still allow publishing beta, alpha, and rc versions - npx auto-dist-tag --write diff --git a/tests/color-factory.test.js b/src/color-factory.test.ts similarity index 74% rename from tests/color-factory.test.js rename to src/color-factory.test.ts index c5dea7e9..eb164293 100644 --- a/tests/color-factory.test.js +++ b/src/color-factory.test.ts @@ -1,4 +1,4 @@ -const {colorFactory} = require('../formats/utils/color-factory/color-factory'); +import {colorFactory} from './color-factory'; describe('colorFactory()', () => { const colors = { @@ -28,7 +28,12 @@ describe('colorFactory()', () => { it('does not throw when given a non-standard shape', () => { expect(() => { colorFactory( - {topBar: {background: '#eeeeee'}, surface: '#ffffff'}, + { + // Silly casting needed to stop typescript helpfully pointing out that + // this is invalid as topBar should be a string, not an object + topBar: ({background: '#eeeeee'} as unknown) as string, + surface: '#ffffff', + }, 'light', ); }).not.toThrow(); diff --git a/formats/utils/color-factory/color-factory.js b/src/color-factory.ts similarity index 72% rename from formats/utils/color-factory/color-factory.js rename to src/color-factory.ts index db4e5880..ffbb5889 100644 --- a/formats/utils/color-factory/color-factory.js +++ b/src/color-factory.ts @@ -1,8 +1,15 @@ -const {hexToHsluv, hsluvToRgb} = require('hsluv'); +import {hexToHsluv, hsluvToRgb} from 'hsluv'; -const baseConfig = require('./configs/base'); +import {config as baseConfig} from './configs/base'; +import {Lambda} from './types'; -function colorFactory(theme, scheme, config = baseConfig) { +type Scheme = 'light' | 'dark'; + +export function colorFactory( + theme: Partial>, + scheme: Scheme, + config = baseConfig, +) { return Object.assign( {}, ...Object.entries(theme).map(([role, hex]) => { @@ -21,7 +28,7 @@ function colorFactory(theme, scheme, config = baseConfig) { alpha = 1, } = settings[scheme]; - const resolve = (value, baseToResolve) => { + const resolve = (value: number | Lambda, baseToResolve: number) => { return typeof value === 'number' ? value : value(baseToResolve); }; @@ -40,5 +47,3 @@ function colorFactory(theme, scheme, config = baseConfig) { }), ); } - -module.exports = {colorFactory}; diff --git a/formats/utils/color-factory/configs/base.js b/src/configs/base.ts similarity index 99% rename from formats/utils/color-factory/configs/base.js rename to src/configs/base.ts index 68e41f65..1524fa41 100644 --- a/formats/utils/color-factory/configs/base.js +++ b/src/configs/base.ts @@ -1,6 +1,7 @@ -const {saturationAdjustmentFn, hueRotationFn} = require('../utils'); +import {saturationAdjustmentFn, hueRotationFn} from '../utils'; +import {Config} from '../types'; -const base = { +export const config: Config = { surface: [ { name: 'background', @@ -803,5 +804,3 @@ const base = { }, ], }; - -module.exports = base; diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 00000000..47cd276b --- /dev/null +++ b/src/index.ts @@ -0,0 +1 @@ +export {colorFactory} from './color-factory'; diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 00000000..bf8e5a12 --- /dev/null +++ b/src/types.ts @@ -0,0 +1,17 @@ +export type Lambda = (value: number) => number; + +interface HslaSetting { + hue?: number | Lambda; + saturation?: number | Lambda; + lightness?: number | Lambda; + alpha?: number; +} + +export interface Variant { + name: string; + description?: string; + light: HslaSetting; + dark: HslaSetting; +} + +export type Config = Record; diff --git a/formats/utils/color-factory/utils.js b/src/utils.ts similarity index 61% rename from formats/utils/color-factory/utils.js rename to src/utils.ts index c6b3e4fc..277c0271 100644 --- a/formats/utils/color-factory/utils.js +++ b/src/utils.ts @@ -1,14 +1,19 @@ -function hueRotationFn(rotation) { - return (hue) => (360 + hue + rotation) % 360; +import {ImmutableStyleMap} from 'theo'; + +import {Config} from './types'; + +export function hueRotationFn(rotation: number) { + return (hue: number) => (360 + hue + rotation) % 360; } -function saturationAdjustmentFn(adjustment) { - return (saturation) => Math.min(Math.max(saturation + adjustment, 0), 100); +export function saturationAdjustmentFn(adjustment: number) { + return (saturation: number) => + Math.min(Math.max(saturation + adjustment, 0), 100); } -function tokensToJson(data) { +export function tokensToJson(data: ImmutableStyleMap) { return data.toJS().props.reduce( - (accumulator, prop) => ({ + (accumulator: any, prop: any) => ({ ...accumulator, [prop.name]: prop.originalValue, }), @@ -16,7 +21,7 @@ function tokensToJson(data) { ); } -function mergeConfigs(base, extended) { +export function mergeConfigs(base: Config, extended: Config) { return Object.entries(base).reduce((accumulator, [role, variants]) => { const extendedVariants = extended[role]; const mergedVariants = variants; @@ -42,10 +47,3 @@ function mergeConfigs(base, extended) { }; }, {}); } - -module.exports = { - tokensToJson, - hueRotationFn, - saturationAdjustmentFn, - mergeConfigs, -}; diff --git a/tests/__snapshots__/colors.test.js.snap b/tests/__snapshots__/colors.test.ts.snap similarity index 100% rename from tests/__snapshots__/colors.test.js.snap rename to tests/__snapshots__/colors.test.ts.snap diff --git a/tests/__snapshots__/duration.test.js.snap b/tests/__snapshots__/duration.test.ts.snap similarity index 100% rename from tests/__snapshots__/duration.test.js.snap rename to tests/__snapshots__/duration.test.ts.snap diff --git a/tests/colors.test.js b/tests/colors.test.ts similarity index 75% rename from tests/colors.test.js rename to tests/colors.test.ts index b11a048e..a550779d 100644 --- a/tests/colors.test.js +++ b/tests/colors.test.ts @@ -1,13 +1,15 @@ /* eslint-disable shopify/jest/no-snapshots */ -const fs = require('fs'); -const path = require('path'); +import fs from 'fs'; +import path from 'path'; -const _ = require('lodash'); +import lodash from 'lodash'; +/* eslint-disable @typescript-eslint/no-var-requires */ const colorsJSON = require('../dist/colors.json'); const colorsAseJSON = require('../dist/colors.ase.json'); const colorsRawJSON = require('../dist/colors.raw.json'); +/* eslint-enable @typescript-eslint/no-var-requires */ const colorFiles = [ 'colors.android.xml', @@ -35,7 +37,8 @@ describe('Compare files snapshots', () => { describe('JSON object representation', () => { it('renders similar JSON objects', () => { expect( - _(colorsJSON) + lodash + .chain(colorsJSON) .toPairs() .sortBy(0) .fromPairs() @@ -46,13 +49,14 @@ describe('JSON object representation', () => { it('renders similar ASE JSON objects', () => { expect(colorsAseJSON.version).toBe('1.0'); expect(colorsAseJSON.groups).toHaveLength(0); - expect(_(colorsAseJSON.colors).sortBy('name')).toMatchSnapshot(); + expect(lodash.sortBy(colorsAseJSON.colors, 'name')).toMatchSnapshot(); }); it('renders similar RAW JSON objects', () => { // Aliases expect( - _(colorsRawJSON.aliases) + lodash + .chain(colorsRawJSON.aliases) .toPairs() .sortBy(0) .fromPairs() @@ -60,6 +64,6 @@ describe('JSON object representation', () => { ).toMatchSnapshot(); // Props - expect(_(colorsRawJSON.props).sortBy('name')).toMatchSnapshot(); + expect(lodash.sortBy(colorsRawJSON.props, 'name')).toMatchSnapshot(); }); }); diff --git a/tests/duration.test.js b/tests/duration.test.ts similarity index 78% rename from tests/duration.test.js rename to tests/duration.test.ts index 7b51b1bc..0b113422 100644 --- a/tests/duration.test.js +++ b/tests/duration.test.ts @@ -1,12 +1,14 @@ /* eslint-disable shopify/jest/no-snapshots */ -const fs = require('fs'); -const path = require('path'); +import fs from 'fs'; +import path from 'path'; -const _ = require('lodash'); +import lodash from 'lodash'; +/* eslint-disable @typescript-eslint/no-var-requires */ const durationJSON = require('../dist/duration.json'); const durationRawJSON = require('../dist/duration.raw.json'); +/* eslint-enable @typescript-eslint/no-var-requires */ const durationFiles = [ 'duration.map.scss', @@ -34,7 +36,8 @@ describe('Compare files snapshots', () => { describe('JSON object representation', () => { it('renders similar JSON objects', () => { expect( - _(durationJSON) + lodash + .chain(durationJSON) .toPairs() .sortBy(0) .fromPairs() @@ -43,16 +46,17 @@ describe('JSON object representation', () => { }); it('outputs integers in JSON', () => { - const everyValueIsInteger = Object.values(durationJSON).every((value) => - Number.isInteger(value), - ); + const everyValueIsInteger = Object.values( + durationJSON, + ).every((value: any) => Number.isInteger(value)); expect(everyValueIsInteger).toBe(true); }); it('renders similar RAW JSON objects', () => { // Aliases expect( - _(durationRawJSON.aliases) + lodash + .chain(durationRawJSON.aliases) .toPairs() .sortBy(0) .fromPairs() @@ -60,7 +64,7 @@ describe('JSON object representation', () => { ).toMatchSnapshot(); // Props - expect(_(durationRawJSON.props).sortBy('name')).toMatchSnapshot(); + expect(lodash.sortBy(durationRawJSON.props, 'name')).toMatchSnapshot(); }); it('outputs `none` value as integer', () => { diff --git a/tests/package.json.test.js b/tests/package.json.test.js deleted file mode 100644 index 43bde098..00000000 --- a/tests/package.json.test.js +++ /dev/null @@ -1,10 +0,0 @@ -describe('package.json', () => { - it('has one dependency', () => { - expect(Object.keys(require('../package.json').dependencies)).toHaveLength( - 1, - ); - }); - it('has “beta” in the version (delete test before merging to master)', () => { - expect(require('../package.json').version).toContain('beta'); - }); -}); diff --git a/tsconfig.build.json b/tsconfig.build.json new file mode 100644 index 00000000..2a4d6d3f --- /dev/null +++ b/tsconfig.build.json @@ -0,0 +1,5 @@ +{ + "extends": "./tsconfig.json", + "include": ["./src"], + "exclude": ["./src/**/*.test.ts"] +} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 00000000..13a48372 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,10 @@ +{ + "extends": "@shopify/typescript-configs/library", + "compilerOptions": { + "outDir": "./dist-modern", + "module": "commonjs", + "declarationMap": false, + "importHelpers": true + }, + "include": ["./src", "./tests"] +} diff --git a/yarn.lock b/yarn.lock index 97c9aa27..1804f80e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1585,6 +1585,11 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339" integrity sha512-8+KAKzEvSUdeo+kmqnKrqgeE+LcA0tjYWFY7RPProVYwnqDjukzO+3b6dLD56rYX5TdWejnEOLJYOIeh4CXKuA== +"@types/lodash@^4.14.149": + version "4.14.149" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.149.tgz#1342d63d948c6062838fbf961012f74d4e638440" + integrity sha512-ijGqzZt/b7BfzcK9vTrS6MFljQRPn5BFWOx8oE0GYxribu6uV+aA9zZuXI1zc/etK9E8nrgdoF2+LgUw7+9tJQ== + "@types/minimatch@*": version "3.0.3" resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d" @@ -1627,6 +1632,13 @@ resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370" integrity sha512-78AdXtlhpCHT0K3EytMpn4JNxaf5tbqbLcbIRoQIHzpTIyjpxLQKRoxU55ujBXAtg3Nl2h/XWvfDa9dsMOd0pQ== +"@types/theo@^8.1.3": + version "8.1.3" + resolved "https://registry.yarnpkg.com/@types/theo/-/theo-8.1.3.tgz#91915c34f4114fe0f8d3f8ffaf9263beefa64557" + integrity sha512-/TnoJulCbxdIO4C79H2Fdvx+UK+oBEUCXp3KlffthDMHYhwGsWyPD5rogWEIopGShYfOfk3gYqItArS4v4htdg== + dependencies: + immutable "3.8.2" + "@types/uglify-js@*": version "3.0.4" resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.0.4.tgz#96beae23df6f561862a830b4288a49e86baac082" @@ -15750,6 +15762,11 @@ typeof-article@^0.1.1: dependencies: kind-of "^3.1.0" +typescript@^3.7.5: + version "3.7.5" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.5.tgz#0692e21f65fd4108b9330238aac11dd2e177a1ae" + integrity sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw== + typical@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/typical/-/typical-4.0.0.tgz#cbeaff3b9d7ae1e2bbfaf5a4e6f11eccfde94fc4"