[framer] Support Framer color tokens for ThemeProvider (#19451)

mui · Feb 2, 2020 · 3639309 · 3639309
1 parent bb05780
commit 3639309
Show file tree

Hide file tree

Showing 7 changed files with 175 additions and 182 deletions.
diff --git a/framer/Material-UI.framerfx/code/ThemeProvider.tsx b/framer/Material-UI.framerfx/code/ThemeProvider.tsx
@@ -3,30 +3,50 @@ 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 = {
   paletteType: 'light',
   primary: '#3f51b5',
   secondary: '#f50057',
   error: '#f44336',
+  info: '#2196f3',
+  warning: '#ff9800',
+  success: '#4caf4f',
 };
 
 export const Theme: React.SFC<Props> = (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
@@ -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
@@ -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"
+  }
 }