From 363930914b53a8e2a13a10d8d41a017aaf18f9b4 Mon Sep 17 00:00:00 2001 From: Iain Kettles Date: Sun, 2 Feb 2020 10:38:21 +0100 Subject: [PATCH] [framer] Support Framer color tokens for ThemeProvider (#19451) --- .../code/ThemeProvider.tsx | 40 +++- .../code/utils/parseColor.ts | 18 ++ framer/Material-UI.framerfx/package.json | 60 +++--- framer/Material-UI.framerfx/yarn.lock | 178 +++++++++--------- framer/scripts/additionalProps.js | 12 -- framer/scripts/framerConfig.js | 10 - framer/scripts/templates/theme_provider.txt | 39 ---- 7 files changed, 175 insertions(+), 182 deletions(-) create mode 100644 framer/Material-UI.framerfx/code/utils/parseColor.ts delete mode 100644 framer/scripts/templates/theme_provider.txt diff --git a/framer/Material-UI.framerfx/code/ThemeProvider.tsx b/framer/Material-UI.framerfx/code/ThemeProvider.tsx index 75be9bd42904bf..4f30acd28f45d6 100644 --- a/framer/Material-UI.framerfx/code/ThemeProvider.tsx +++ b/framer/Material-UI.framerfx/code/ThemeProvider.tsx @@ -3,12 +3,16 @@ import { addPropertyControls, ControlType } from 'framer'; // tslint:disable-next-line: ban-ts-ignore // @ts-ignore import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import { parseColor } from './utils/parseColor'; interface Props { paletteType?: 'dark' | 'light'; primary?: string; secondary?: string; error?: string; + info?: string; + warning?: string; + success?: string; } const defaultProps: Props = { @@ -16,17 +20,33 @@ const defaultProps: Props = { primary: '#3f51b5', secondary: '#f50057', error: '#f44336', + info: '#2196f3', + warning: '#ff9800', + success: '#4caf4f', }; export const Theme: React.SFC = (props: Props) => { - const { children, error, paletteType, primary, secondary, ...other } = props; + const { + children, + error, + paletteType, + primary, + secondary, + info, + warning, + success, + ...other + } = props; const theme = createMuiTheme({ palette: { type: paletteType, - primary: { main: primary }, - secondary: { main: secondary }, - error: { main: error }, + primary: { main: parseColor(primary) }, + secondary: { main: parseColor(secondary) }, + error: { main: parseColor(error) }, + info: { main: parseColor(info) }, + warning: { main: parseColor(warning) }, + success: { main: parseColor(success) }, }, }); @@ -57,4 +77,16 @@ addPropertyControls(Theme, { type: ControlType.Color, title: 'Error', }, + info: { + type: ControlType.Color, + title: 'Info', + }, + warning: { + type: ControlType.Color, + title: 'Warning', + }, + success: { + type: ControlType.Color, + title: 'Success', + }, }); diff --git a/framer/Material-UI.framerfx/code/utils/parseColor.ts b/framer/Material-UI.framerfx/code/utils/parseColor.ts new file mode 100644 index 00000000000000..509c795f068138 --- /dev/null +++ b/framer/Material-UI.framerfx/code/utils/parseColor.ts @@ -0,0 +1,18 @@ +const colorTokenRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/; + +/** + * Checks if the color string is a Framer Shared Color token and extracts + * the underlying color or returns the original string. + * + * @param {string} color - A Framer Shared Color Token/regular CSS color + * @return {string} A valid HTML color string + * + * @example + * console.log(parseColor('var(--token-73eaaa94-88d1-416e-9e22-e09837612534, rgb(0, 0, 0))')); // rgb(0, 0, 0) + * + */ +export function parseColor(color: string): string { + const colorToken = color.match(colorTokenRegex); + + return colorToken ? colorToken[2] : color; +} diff --git a/framer/Material-UI.framerfx/package.json b/framer/Material-UI.framerfx/package.json index 2bd2a0b955156d..ef977e7f800451 100644 --- a/framer/Material-UI.framerfx/package.json +++ b/framer/Material-UI.framerfx/package.json @@ -1,32 +1,32 @@ { - "name": "@framer/material-ui.material-ui", - "author": "Material-UI Team", - "description": "Material-UI Framer components", - "version": "1.0.0", - "main": "dist/index.js", - "license": "MIT", - "homepage": "http://material-ui.com/", - "repository": { - "type": "git", - "url": "https://github.com/mui-org/material-ui.git" - }, - "bugs": { - "url": "https://github.com/mui-org/material-ui/issues" - }, - "devDependencies": { - "@types/react": "^16.8" - }, - "dependencies": { - "@material-ui/core": "^4.5.0", - "@material-ui/icons": "^4.4.0", - "naming-style": "^1.0.0" - }, - "peerDependencies": { - "framer": "^1.0.0", - "react": "^16.8.0" - }, - "framer": { - "displayName": "Material-UI", - "id": "ee255265-d0d6-4999-a685-9461c1248b6a" - } + "name": "@framer/material-ui.material-ui", + "author": "Material-UI Team", + "description": "Material-UI Framer components", + "version": "1.0.0", + "main": "dist/index.js", + "license": "MIT", + "homepage": "http://material-ui.com/", + "repository": { + "type": "git", + "url": "https://github.com/mui-org/material-ui.git" + }, + "bugs": { + "url": "https://github.com/mui-org/material-ui/issues" + }, + "devDependencies": { + "@types/react": "^16.8" + }, + "dependencies": { + "@material-ui/core": "^4.9.0", + "@material-ui/icons": "^4.5.1", + "naming-style": "^1.0.0" + }, + "peerDependencies": { + "framer": "^1.0.0", + "react": "^16.8.0" + }, + "framer": { + "displayName": "Material-UI", + "id": "ee255265-d0d6-4999-a685-9461c1248b6a" + } } diff --git a/framer/Material-UI.framerfx/yarn.lock b/framer/Material-UI.framerfx/yarn.lock index e5aaf443634165..f12fea40f001d7 100644 --- a/framer/Material-UI.framerfx/yarn.lock +++ b/framer/Material-UI.framerfx/yarn.lock @@ -9,21 +9,21 @@ dependencies: regenerator-runtime "^0.13.2" -"@emotion/hash@^0.7.1": - version "0.7.3" - resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.3.tgz#a166882c81c0c6040975dd30df24fae8549bd96f" - integrity sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw== - -"@material-ui/core@^4.5.0": - version "4.6.0" - resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.6.0.tgz#098a61d2af1778433d2d9a76de95be5f6aa87922" - integrity sha512-nzD0oO3R2dcX/+hmi5FUFSddMKySK76Ryuno3J/iOotbKvzXwbf9szzhL8KPNmsj+vizVNfkEfhzOuuCHRBKKQ== +"@emotion/hash@^0.7.4": + version "0.7.4" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.4.tgz#f14932887422c9056b15a8d222a9074a7dfa2831" + integrity sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A== + +"@material-ui/core@^4.9.0": + version "4.9.0" + resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.9.0.tgz#96ca3281ee06216d44fd4d0e306dbe0429eb2ebe" + integrity sha512-zrrr8mPU5DDBYaVil4uJYauW41PjSn5otn7cqGsmWOY0t90fypr9nNgM7rRJaPz2AP6oRSDx1kBQt2igf5uelg== dependencies: "@babel/runtime" "^7.4.4" - "@material-ui/styles" "^4.6.0" - "@material-ui/system" "^4.5.2" - "@material-ui/types" "^4.1.1" - "@material-ui/utils" "^4.5.2" + "@material-ui/styles" "^4.9.0" + "@material-ui/system" "^4.7.1" + "@material-ui/types" "^5.0.0" + "@material-ui/utils" "^4.7.1" "@types/react-transition-group" "^4.2.0" clsx "^1.0.2" convert-css-length "^2.0.1" @@ -31,61 +31,60 @@ normalize-scroll-left "^0.2.0" popper.js "^1.14.1" prop-types "^15.7.2" + react-is "^16.8.0" react-transition-group "^4.3.0" -"@material-ui/icons@^4.4.0": +"@material-ui/icons@^4.5.1": version "4.5.1" resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.5.1.tgz#6963bad139e938702ece85ca43067688018f04f8" integrity sha512-YZ/BgJbXX4a0gOuKWb30mBaHaoXRqPanlePam83JQPZ/y4kl+3aW0Wv9tlR70hB5EGAkEJGW5m4ktJwMgxQAeA== dependencies: "@babel/runtime" "^7.4.4" -"@material-ui/styles@^4.6.0": - version "4.6.0" - resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.6.0.tgz#15679fab6dcbe0cc2416f01a22966f3ea26607c5" - integrity sha512-lqqh4UEMdIYcU1Yth4pQyMTah02uAkg3NOT3MirN9FUexdL8pNA6zCHigEgDSfwmvnXyxHhxTkphfy0DRfnt9w== +"@material-ui/styles@^4.9.0": + version "4.9.0" + resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.9.0.tgz#10c31859f6868cfa9d3adf6b6c3e32c9d676bc76" + integrity sha512-nJHum4RqYBPWsjL/9JET8Z02FZ9gSizlg/7LWVFpIthNzpK6OQ5OSRR4T4x9/p+wK3t1qNn3b1uI4XpnZaPxOA== dependencies: "@babel/runtime" "^7.4.4" - "@emotion/hash" "^0.7.1" - "@material-ui/types" "^4.1.1" - "@material-ui/utils" "^4.5.2" + "@emotion/hash" "^0.7.4" + "@material-ui/types" "^5.0.0" + "@material-ui/utils" "^4.7.1" clsx "^1.0.2" csstype "^2.5.2" hoist-non-react-statics "^3.2.1" - jss "^10.0.0" - jss-plugin-camel-case "^10.0.0" - jss-plugin-default-unit "^10.0.0" - jss-plugin-global "^10.0.0" - jss-plugin-nested "^10.0.0" - jss-plugin-props-sort "^10.0.0" - jss-plugin-rule-value-function "^10.0.0" - jss-plugin-vendor-prefixer "^10.0.0" + jss "^10.0.3" + jss-plugin-camel-case "^10.0.3" + jss-plugin-default-unit "^10.0.3" + jss-plugin-global "^10.0.3" + jss-plugin-nested "^10.0.3" + jss-plugin-props-sort "^10.0.3" + jss-plugin-rule-value-function "^10.0.3" + jss-plugin-vendor-prefixer "^10.0.3" prop-types "^15.7.2" -"@material-ui/system@^4.5.2": - version "4.5.2" - resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.5.2.tgz#7143bd8422a3f33f435c23f378136254004bbd60" - integrity sha512-h9RWvdM9XKlHHqwiuhyvWdobptQkHli+m2jJFs7i1AI/hmGsIc4reDmS7fInhETgt/Txx7uiAIznfRNIIVHmQw== +"@material-ui/system@^4.7.1": + version "4.7.1" + resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.7.1.tgz#d928dacc0eeae6bea569ff3ee079f409efb3517d" + integrity sha512-zH02p+FOimXLSKOW/OT2laYkl9bB3dD1AvnZqsHYoseUaq0aVrpbl2BGjQi+vJ5lg8w73uYlt9zOWzb3+1UdMQ== dependencies: "@babel/runtime" "^7.4.4" - "@material-ui/utils" "^4.5.2" + "@material-ui/utils" "^4.7.1" prop-types "^15.7.2" -"@material-ui/types@^4.1.1": - version "4.1.1" - resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-4.1.1.tgz#b65e002d926089970a3271213a3ad7a21b17f02b" - integrity sha512-AN+GZNXytX9yxGi0JOfxHrRTbhFybjUJ05rnsBVjcB+16e466Z0Xe5IxawuOayVZgTBNDxmPKo5j4V6OnMtaSQ== - dependencies: - "@types/react" "*" +"@material-ui/types@^5.0.0": + version "5.0.0" + resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.0.0.tgz#26d6259dc6b39f4c2e1e9aceff7a11e031941741" + integrity sha512-UeH2BuKkwDndtMSS0qgx1kCzSMw+ydtj0xx/XbFtxNSTlXydKwzs5gVW5ZKsFlAkwoOOQ9TIsyoCC8hq18tOwg== -"@material-ui/utils@^4.5.2": - version "4.5.2" - resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.5.2.tgz#4c2fb531d357cf0da8cece53b588dff9b0bde934" - integrity sha512-zhbNfHd1gLa8At6RPDG7uMZubHxbY+LtM6IkSfeWi6Lo4Ax80l62YaN1QmUpO1IvGCkn/j62tQX3yObiQZrJsQ== +"@material-ui/utils@^4.7.1": + version "4.7.1" + resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.7.1.tgz#dc16c7f0d2cd02fbcdd5cfe601fd6863ae3cc652" + integrity sha512-+ux0SlLdlehvzCk2zdQ3KiS3/ylWvuo/JwAGhvb8dFVvwR21K28z0PU9OQW2PGogrMEdvX3miEI5tGxTwwWiwQ== dependencies: "@babel/runtime" "^7.4.4" prop-types "^15.7.2" - react-is "^16.8.6" + react-is "^16.8.0" "@types/prop-types@*": version "15.7.0" @@ -117,7 +116,7 @@ convert-css-length@^2.0.1: resolved "https://registry.yarnpkg.com/convert-css-length/-/convert-css-length-2.0.1.tgz#90a76bde5bfd24d72881a5b45d02249b2c1d257c" integrity sha512-iGpbcvhLPRKUbBc0Quxx7w/bV14AC3ItuBEGMahA5WTYqB8lq9jH0kTXFheCBASsYnqeMFZhiTruNxr1N59Axg== -css-vendor@^2.0.6: +css-vendor@^2.0.7: version "2.0.7" resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.7.tgz#4e6d53d953c187981576d6a542acc9fb57174bda" integrity sha512-VS9Rjt79+p7M0WkPqcAza4Yq1ZHrsHrwf7hPL/bjQB+c1lwmAI+1FXxYTYt818D/50fFVflw0XKleiBN5RITkg== @@ -158,69 +157,69 @@ is-in-browser@^1.0.2, is-in-browser@^1.1.3: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" -jss-plugin-camel-case@^10.0.0: - version "10.0.0" - resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.0.tgz#d601bae2e8e2041cc526add289dcd7062db0a248" - integrity sha512-yALDL00+pPR4FJh+k07A8FeDvfoPPuXU48HLy63enAubcVd3DnS+2rgqPXglHDGixIDVkCSXecl/l5GAMjzIbA== +jss-plugin-camel-case@^10.0.3: + version "10.0.4" + resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.0.4.tgz#3dedecec1e5bba0bf6141c2c05e2ab11ea4b468d" + integrity sha512-+wnqxJsyfUnOn0LxVg3GgZBSjfBCrjxwx7LFxwVTUih0ceGaXKZoieheNOaTo5EM4w8bt1nbb8XonpQCj67C6A== dependencies: "@babel/runtime" "^7.3.1" hyphenate-style-name "^1.0.3" - jss "10.0.0" + jss "10.0.4" -jss-plugin-default-unit@^10.0.0: - version "10.0.0" - resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.0.tgz#601caf5f576fc0c66986fbe8a9aa37307a3a3ea3" - integrity sha512-sURozIOdCtGg9ap18erQ+ijndAfEGtTaetxfU3H4qwC18Bi+fdvjlY/ahKbuu0ASs7R/+WKCP7UaRZOjUDMcdQ== +jss-plugin-default-unit@^10.0.3: + version "10.0.4" + resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.0.4.tgz#df03885de20f20a1fc1c21bdb7c62e865ee400d9" + integrity sha512-T0mhL/Ogp/quvod/jAHEqKvptLDxq7Cj3a+7zRuqK8HxUYkftptN89wJElZC3rshhNKiogkEYhCWenpJdFvTBg== dependencies: "@babel/runtime" "^7.3.1" - jss "10.0.0" + jss "10.0.4" -jss-plugin-global@^10.0.0: - version "10.0.0" - resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.0.0.tgz#0fed1b6461e0d57d6e394f877529009bc1cb3cb6" - integrity sha512-80ofWKSQUo62bxLtRoTNe0kFPtHgUbAJeOeR36WEGgWIBEsXLyXOnD5KNnjPqG4heuEkz9eSLccjYST50JnI7Q== +jss-plugin-global@^10.0.3: + version "10.0.4" + resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.0.4.tgz#412245b56133cc88bec654a70d82d5922619f4c5" + integrity sha512-N8n9/GHENZce+sqE4UYiZiJtI+t+erT/BypHOrNYAfIoNEj7OYsOEKfIo2P0GpLB3QyDAYf5eo9XNdZ8veEkUA== dependencies: "@babel/runtime" "^7.3.1" - jss "10.0.0" + jss "10.0.4" -jss-plugin-nested@^10.0.0: - version "10.0.0" - resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.0.0.tgz#d37ecc013c3b0d0e4acc2b48f6b62da6ae53948b" - integrity sha512-waxxwl/po1hN3azTyixKnr8ReEqUv5WK7WsO+5AWB0bFndML5Yqnt8ARZ90HEg8/P6WlqE/AB2413TkCRZE8bA== +jss-plugin-nested@^10.0.3: + version "10.0.4" + resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.0.4.tgz#4d15ad13995fb6e4125618006473a096d2475d75" + integrity sha512-QM21BKVt8LDeoRfowvAMh/s+/89VYrreIIE6ch4pvw0oAXDWw1iorUPlqLZ7uCO3UL0uFtQhJq3QMLN6Lr1v0A== dependencies: "@babel/runtime" "^7.3.1" - jss "10.0.0" + jss "10.0.4" tiny-warning "^1.0.2" -jss-plugin-props-sort@^10.0.0: - version "10.0.0" - resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.0.tgz#38a13407384c2a4a7c026659488350669b953b18" - integrity sha512-41mf22CImjwNdtOG3r+cdC8+RhwNm616sjHx5YlqTwtSJLyLFinbQC/a4PIFk8xqf1qpFH1kEAIw+yx9HaqZ3g== +jss-plugin-props-sort@^10.0.3: + version "10.0.4" + resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.0.4.tgz#43c880ff8dfcf858f809f663ece5e65a1d945b5a" + integrity sha512-WoETdOCjGskuin/OMt2uEdDPLZF3vfQuHXF+XUHGJrq0BAapoyGQDcv37SeReDlkRAbVXkEZPsIMvYrgHSHFiA== dependencies: "@babel/runtime" "^7.3.1" - jss "10.0.0" + jss "10.0.4" -jss-plugin-rule-value-function@^10.0.0: - version "10.0.0" - resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.0.tgz#3ec1b781b7c86080136dbef6c36e91f20244b72e" - integrity sha512-Jw+BZ8JIw1f12V0SERqGlBT1JEPWax3vuZpMym54NAXpPb7R1LYHiCTIlaJUyqvIfEy3kiHMtgI+r2whGgRIxQ== +jss-plugin-rule-value-function@^10.0.3: + version "10.0.4" + resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.0.4.tgz#2f4cf4a86ad3eba875bb48cb9f4a7ed35cb354e7" + integrity sha512-0hrzOSWRF5ABJGaHrlnHbYZjU877Ofzfh2id3uLtBvemGQLHI+ldoL8/+6iPSRa7M8z8Ngfg2vfYhKjUA5gA0g== dependencies: "@babel/runtime" "^7.3.1" - jss "10.0.0" + jss "10.0.4" -jss-plugin-vendor-prefixer@^10.0.0: - version "10.0.0" - resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.0.tgz#400280535b0f483a9c78105afe4eee61b70018eb" - integrity sha512-qslqvL0MUbWuzXJWdUxpj6mdNUX8jr4FFTo3aZnAT65nmzWL7g8oTr9ZxmTXXgdp7ANhS1QWE7036/Q2isFBpw== +jss-plugin-vendor-prefixer@^10.0.3: + version "10.0.4" + resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.0.4.tgz#1626ef612a4541cff17cf96815e1740155214ed2" + integrity sha512-4JgEbcrdeMda1qvxTm1CnxFJAWVV++VLpP46HNTrfH7VhVlvUpihnUNs2gAlKuRT/XSBuiWeLAkrTqF4NVrPig== dependencies: "@babel/runtime" "^7.3.1" - css-vendor "^2.0.6" - jss "10.0.0" + css-vendor "^2.0.7" + jss "10.0.4" -jss@10.0.0, jss@^10.0.0: - version "10.0.0" - resolved "https://registry.yarnpkg.com/jss/-/jss-10.0.0.tgz#998d5026c02accae15708de83bd6ba57bac977d2" - integrity sha512-TPpDFsiBjuERiL+dFDq8QCdiF9oDasPcNqCKLGCo/qED3fNYOQ8PX2lZhknyTiAt3tZrfOFbb0lbQ9lTjPZxsQ== +jss@10.0.4, jss@^10.0.3: + version "10.0.4" + resolved "https://registry.yarnpkg.com/jss/-/jss-10.0.4.tgz#46ebdde1c40c9a079d64f3334cb88ae28fd90bfd" + integrity sha512-GqHmeDK83qbqMAVjxyPfN1qJVTKZne533a9bdCrllZukUM8npG/k+JumEPI86IIB5ifaZAHG2HAsUziyxOiooQ== dependencies: "@babel/runtime" "^7.3.1" csstype "^2.6.5" @@ -260,11 +259,16 @@ prop-types@^15.6.2, prop-types@^15.7.2: object-assign "^4.1.1" react-is "^16.8.1" -react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6: +react-is@^16.7.0, react-is@^16.8.1: version "16.11.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.11.0.tgz#b85dfecd48ad1ce469ff558a882ca8e8313928fa" integrity sha512-gbBVYR2p8mnriqAwWx9LbuUrShnAuSCNnuPGyc7GJrMVQtPDAh8iLpv7FRuMPFb56KkaVZIYSz1PrjI9q0QPCw== +react-is@^16.8.0: + version "16.12.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c" + integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q== + react-transition-group@^4.3.0: version "4.3.0" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683" diff --git a/framer/scripts/additionalProps.js b/framer/scripts/additionalProps.js index d1325af26e6e20..badea2c6238186 100644 --- a/framer/scripts/additionalProps.js +++ b/framer/scripts/additionalProps.js @@ -117,10 +117,6 @@ const additionalProps = component => { }, defaultValue: { value: "'Filled'" }, }, - error: { - type: { name: 'color' }, - defaultValue: { value: componentSettings[component].propValues.error }, - }, fullWidth: { type: { name: 'boolean' }, description: 'TextField - fullWidth', @@ -208,10 +204,6 @@ const additionalProps = component => { description: 'Theme palette type', defaultValue: { value: "'light'" }, }, - primary: { - type: { name: 'color' }, - defaultValue: { value: componentSettings[component].propValues.primary }, - }, primaryAction: { type: { name: 'enum', @@ -246,10 +238,6 @@ const additionalProps = component => { }, defaultValue: { value: componentSettings[component].propValues.progressValue }, }, - secondary: { - type: { name: 'color' }, - defaultValue: { value: componentSettings[component].propValues.secondary }, - }, secondaryAction: { type: { name: 'enum', diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js index cd6a0d625b5110..f3b7f8c2faa682 100644 --- a/framer/scripts/framerConfig.js +++ b/framer/scripts/framerConfig.js @@ -191,16 +191,6 @@ export const componentSettings = { }, template: 'self_closing.txt', }, - ThemeProvider: { - ignoredProps: ['theme'], - propValues: { - paletteType: 'light', - primary: "'#3f51b5'", - secondary: "'#f50057'", - error: "'#f44336'", - }, - template: 'theme_provider.txt', - }, Paper: { ignoredProps: [], propValues: { diff --git a/framer/scripts/templates/theme_provider.txt b/framer/scripts/templates/theme_provider.txt deleted file mode 100644 index cc545f2d8e0c24..00000000000000 --- a/framer/scripts/templates/theme_provider.txt +++ /dev/null @@ -1,39 +0,0 @@ -{{=« »=}} -import * as React from 'react'; -import { addPropertyControls, ControlType } from 'framer'; -// tslint:disable-next-line: ban-ts-ignore -// @ts-ignore -import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; - -interface Props { -«& tsInterface» -} - -const defaultProps: Props = { -«& defaultProps» -}; - -export const Theme: React.SFC = (props: Props) => { - const { children, error, paletteType, primary, secondary, ...other } = props; - - const theme = createMuiTheme({ - palette: { - type: paletteType, - primary: { main: primary }, - secondary: { main: secondary }, - error: { main: error }, - }, - }); - - return ( - - {children} - - ); -} - -Theme.defaultProps = defaultProps; - -addPropertyControls(Theme, { -«& propertyControls» -});