[framer] Support Framer color tokens for ThemeProvider

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',
+ },
 });

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;
+}

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"
+ }
 }