app-studio 0.1.13 → 0.1.14

package/dist/app-studio.cjs.development.js

@@ -10,6 +10,24 @@ var Color = _interopDefault(require('color-convert'));
 var styled = _interopDefault(require('styled-components'));
 var unitlessKeys = _interopDefault(require('@emotion/unitless'));
 
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
 function _inheritsLoose(subClass, superClass) {
   subClass.prototype = Object.create(superClass.prototype);
   subClass.prototype.constructor = subClass;
@@ -36,29 +54,29 @@ function _taggedTemplateLiteralLoose(strings, raw) {
 }
 
 var palette = {
-  whiteAlpha: {
+  white: {
     50: 'rgba(255, 255, 255, 0.04)',
-    100: 'rgba(255, 255, 255, 0.06)',
-    200: 'rgba(255, 255, 255, 0.08)',
-    300: 'rgba(255, 255, 255, 0.16)',
-    400: 'rgba(255, 255, 255, 0.24)',
-    500: 'rgba(255, 255, 255, 0.36)',
-    600: 'rgba(255, 255, 255, 0.48)',
-    700: 'rgba(255, 255, 255, 0.64)',
-    800: 'rgba(255, 255, 255, 0.80)',
-    900: 'rgba(255, 255, 255, 0.92)'
-  },
-  blackAlpha: {
+    100: 'rgba(255, 255, 255, 0.08)',
+    200: 'rgba(255, 255, 255, 0.16)',
+    300: 'rgba(255, 255, 255, 0.24)',
+    400: 'rgba(255, 255, 255, 0.36)',
+    500: 'rgba(255, 255, 255, 0.48)',
+    600: 'rgba(255, 255, 255, 0.64)',
+    700: 'rgba(255, 255, 255, 0.80)',
+    800: 'rgba(255, 255, 255, 0.92)',
+    900: 'rgba(255, 255, 255, 1)'
+  },
+  black: {
     50: 'rgba(0, 0, 0, 0.04)',
-    100: 'rgba(0, 0, 0, 0.06)',
-    200: 'rgba(0, 0, 0, 0.08)',
-    300: 'rgba(0, 0, 0, 0.16)',
-    400: 'rgba(0, 0, 0, 0.24)',
-    500: 'rgba(0, 0, 0, 0.36)',
-    600: 'rgba(0, 0, 0, 0.48)',
-    700: 'rgba(0, 0, 0, 0.64)',
-    800: 'rgba(0, 0, 0, 0.80)',
-    900: 'rgba(0, 0, 0, 0.92)'
+    100: 'rgba(0, 0, 0, 0.08)',
+    200: 'rgba(0, 0, 0, 0.16)',
+    300: 'rgba(0, 0, 0, 0.24)',
+    400: 'rgba(0, 0, 0, 0.36)',
+    500: 'rgba(0, 0, 0, 0.48)',
+    600: 'rgba(0, 0, 0, 0.64)',
+    700: 'rgba(0, 0, 0, 0.80)',
+    800: 'rgba(0, 0, 0, 0.92)',
+    900: 'rgba(0, 0, 0, 1)'
   },
   rose: {
     50: '#fff1f2',
@@ -338,58 +356,107 @@ var palette = {
   }
 };
 
+var defaultThemeMain = {
+  primary: 'black',
+  secondary: 'blue',
+  success: 'green.500',
+  error: 'red.500',
+  warning: 'orange.500',
+  disabled: 'gray.500',
+  loading: 'dark.500'
+};
 var defaultColors = {
   white: '#FFFFFF',
   black: '#000000',
-  lightGrey: 'rgba(224, 224, 224, 1)',
-  midGrey: 'rgba(158, 158, 158, 1)',
-  darkBlueGrey: 'rgba(47, 72, 88, 1)',
-  subGrey: 'rgba(66, 66, 66, 1)',
-  fieldColor: 'rgba(250, 250, 250, 1)',
-  textDisabled: 'rgba(115, 115, 115, 1)',
-  primary: 'rgba(249, 115, 22, 1)',
-  secondary: 'rgba(8, 145, 178, 1)',
-  success: 'rgba(34, 197, 94, 1)',
-  error: 'rgba(239, 68, 68, 1)',
-  warning: ' rgba(233, 176, 19, 1)',
-  disabled: 'rgba(158, 158, 158, 0.38)',
-  loading: 'rgba(158, 158, 158, 1)'
+  red: '#FF0000',
+  green: '#00FF00',
+  blue: '#0000FF',
+  yellow: '#FFFF00',
+  cyan: '#00FFFF',
+  magenta: '#FF00FF',
+  grey: '#808080',
+  orange: '#FFA500',
+  brown: '#A52A2A',
+  purple: '#800080',
+  pink: '#FFC0CB',
+  lime: '#00FF00',
+  teal: '#008080',
+  navy: '#000080',
+  olive: '#808000',
+  maroon: '#800000',
+  gold: '#FFD700',
+  silver: '#C0C0C0',
+  indigo: '#4B0082',
+  violet: '#EE82EE',
+  beige: '#F5F5DC',
+  turquoise: '#40E0D0',
+  coral: '#FF7F50',
+  chocolate: '#D2691E',
+  skyBlue: '#87CEEB',
+  plum: '#DDA0DD',
+  darkGreen: '#006400',
+  salmon: '#FA8072'
 };
 var ThemeContext = /*#__PURE__*/React.createContext({
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
   getColor: function getColor(name) {
     return name;
   },
-  colors: defaultColors,
-  palette: palette
+  colors: {
+    main: defaultColors,
+    palette: palette
+  },
+  theme: {
+    main: defaultThemeMain,
+    components: {}
+  }
 });
 var useTheme = function useTheme() {
   return React.useContext(ThemeContext);
 };
 var ThemeProvider = function ThemeProvider(_ref) {
-  var _ref$palette = _ref.palette,
-      palette$1 = _ref$palette === void 0 ? palette : _ref$palette,
+  var _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? {
+    main: defaultThemeMain,
+    components: {}
+  } : _ref$theme,
       _ref$colors = _ref.colors,
-      colors = _ref$colors === void 0 ? defaultColors : _ref$colors,
+      colors = _ref$colors === void 0 ? {
+    main: defaultColors,
+    palette: palette
+  } : _ref$colors,
       children = _ref.children;
 
   var getColor = function getColor(name) {
-    // console.log('getColor', name);
     if (name === 'transparent') return name;
 
     try {
-      if (name.indexOf('.') !== -1) {
-        var keys = name.split('.');
+      // Si le nom commence par "theme.", nous recherchons dans les couleurs du thème
+      if (name.startsWith('theme.')) {
+        var keys = name.split('.').slice(1)[0];
+
+        if (keys[1] !== undefined && typeof theme.components[keys[0]] == 'object' && theme.components[keys[0]][keys[1]] !== undefined) {
+          return getColor(theme.components[keys[0]][keys[1]]);
+        }
+
+        if (theme.main[keys[0]] && theme.main[keys[0]] !== undefined) {
+          return getColor(theme.main[keys[0]]);
+        }
+      } // Si le nom commence par "color.", nous recherchons dans la palette
+      else if (name.startsWith('color.')) {
+        var _keys = name.split('.').slice(1); // Retirer le préfixe "color."
+
 
-        if (palette$1 && palette$1[keys[0]][keys[1]] !== undefined) {
-          return palette$1[keys[0]][keys[1]];
+        if (colors.palette && colors.palette[_keys[0]][_keys[1]] !== undefined) {
+          return colors.palette[_keys[0]][_keys[1]];
         }
 
-        if (palette$1[keys[0]][parseInt(keys[1])] !== undefined) {
-          return palette$1[keys[0]][parseInt(keys[1])];
+        if (colors.palette && colors.palette[_keys[0]][parseInt(_keys[1])] !== undefined) {
+          return colors.palette[_keys[0]][parseInt(_keys[1])];
+        }
+
+        if (colors.main && colors.main[_keys[0]] !== undefined) {
+          return colors.main[_keys[0]];
         }
-      } else if (colors && colors[name] !== undefined) {
-        return colors[name];
       }
     } catch (e) {
       console.log('Color ' + name + ' not found');
@@ -401,8 +468,14 @@ var ThemeProvider = function ThemeProvider(_ref) {
   return React__default.createElement(ThemeContext.Provider, {
     value: {
       getColor: getColor,
-      colors: colors,
-      palette: palette$1
+      theme: {
+        main: _extends({}, defaultThemeMain, theme.main),
+        components: _extends({}, theme.components)
+      },
+      colors: {
+        main: _extends({}, defaultColors, colors.main),
+        palette: _extends({}, palette, colors.palette)
+      }
     }
   }, children);
 };