flipper-ui 0.34.6 → 0.34.7

package/theme/colors.d.ts

@@ -1,60 +1,65 @@
-import type { Priority, Feedback, Criticality, Graphically } from './presets';
 declare const _default: {
+    red: Record<number, string>;
+    pink: Record<number, string>;
+    lightPink: Record<number, string>;
+    purple: Record<number, string>;
+    indigo: Record<number, string>;
+    darkBlue: Record<number, string>;
+    blue: Record<number, string>;
+    lightBlue: Record<number, string>;
+    lightTeal: Record<number, string>;
+    teal: Record<number, string>;
+    green: Record<number, string>;
+    lightGreen: Record<number, string>;
+    amber: Record<number, string>;
+    orange: Record<number, string>;
+    deepOrange: Record<number, string>;
+    brown: Record<number, string>;
+    lightBrown: Record<number, string>;
+    gray: Record<number, string>;
+    neutral: Record<number, string>;
+    action: {
+        cancel: string;
+        confirm: string;
+    };
     primary: {
+        light: string;
         main: string;
         dark: string;
-        light: string;
-        contrast: string;
     };
     secondary: {
+        light: string;
         main: string;
         dark: string;
-        light: string;
-        contrast: string;
     };
-    app: {
-        border: string;
-        background: {
-            main: string;
-            lighter: string;
+    criticality: {
+        low: string;
+        medium: string;
+        high: string;
+    };
+    priority: {
+        main: {
+            neutral: string;
+            minimal: string;
+            low: string;
+            medium: string;
+            high: string;
+            critical: string;
         };
-        text: {
-            main: string;
-            light: string;
-            disabled: string;
+        light: {
+            neutral: string;
+            minimal: string;
+            low: string;
+            medium: string;
+            high: string;
+            critical: string;
         };
     };
-    priority: Record<Priority, {
-        main: string;
-        light: string;
-    }>;
-    feedback: Record<Feedback, string>;
-    graphic: Record<Graphically, {
-        main: string;
-        light: string;
-    }>;
-    criticality: Record<Criticality, string>;
-    neutral: {
-        black: string;
-        white: string;
-        transparent: string;
-    };
-    grays: {
-        g0: string;
-        g1: string;
-        g2: string;
-        g3: string;
-        g4: string;
-        g5: string;
-        g6: string;
-        g7: string;
-        g8: string;
-        g9: string;
-    };
-    action: {
-        confirm: string;
-        cancel: string;
-        neutral: string;
+    feedback: {
+        danger: string;
+        warning: string;
+        success: string;
+        info: string;
     };
 };
 export default _default;

package/theme/colors.js

@@ -4,140 +4,294 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var red = {
+  50: '#FFCDD2',
+  100: '#FCAEB2',
+  200: '#F88F93',
+  300: '#F57173',
+  400: '#F15253',
+  500: '#EE3334',
+  600: '#EA1414',
+  700: '#D00A0A',
+  800: '#B50000',
+  900: '#99000F'
+};
+var pink = {
+  50: '#FADADB',
+  100: '#F5B4B8',
+  200: '#EF8F94',
+  300: '#EA6970',
+  400: '#EF5F6C',
+  500: '#F55469',
+  600: '#FA4A65',
+  700: '#FF4062',
+  800: '#FC1A40',
+  900: '#C60034'
+};
+var lightPink = {
+  50: '#FFD0C1',
+  100: '#F2A29A',
+  200: '#E57373',
+  300: '#F26A69',
+  400: '#FF605E',
+  500: '#F55756',
+  600: '#EA4D4D',
+  700: '#DD4C4A',
+  800: '#CF4A46',
+  900: '#C24943'
+};
+var purple = {
+  50: '#F3E5F5',
+  100: '#D7C6E0',
+  200: '#C9ABD0',
+  300: '#BC91C0',
+  400: '#AE76B0',
+  500: '#A05BA0',
+  600: '#7B4299',
+  700: '#623A84',
+  800: '#6B1D80',
+  900: '#74007C'
+};
+var indigo = {
+  50: '#E0E4FF',
+  100: '#C1CDF3',
+  200: '#84A0DB',
+  300: '#6589CF',
+  400: '#6581CE',
+  500: '#667CCD',
+  600: '#6674CC',
+  700: '#4D59B2',
+  800: '#333E98',
+  900: '#1A237E'
+};
+var darkBlue = {
+  50: '#E8EAF6',
+  100: '#858FA4',
+  200: '#647188',
+  300: '#43536D',
+  400: '#2C3E5B',
+  500: '#213352',
+  600: '#152849',
+  700: '#132442',
+  800: '#10203A',
+  900: '#0E1C33'
+};
+var blue = {
+  50: '#DAF2FD',
+  100: '#AEE5F9',
+  200: '#82D9F6',
+  300: '#56CCF2',
+  400: '#49B3F0',
+  500: '#3C99EF',
+  600: '#2F80ED',
+  700: '#276BF0',
+  800: '#1840F6',
+  900: '#0815FC'
+};
+var lightBlue = {
+  50: '#E0F5FE',
+  100: '#A3E0FB',
+  200: '#66CBF9',
+  300: '#29B6F6',
+  400: '#039BE5',
+  500: '#0288D1',
+  600: '#0277BD',
+  700: '#01579B',
+  800: '#004A7C',
+  900: '#043658'
+};
+var lightTeal = {
+  50: '#E7F3F5',
+  100: '#CFE7EA',
+  200: '#B7DCE0',
+  300: '#9FD0D5',
+  400: '#87C4CB',
+  500: '#79B1BC',
+  600: '#6B9FAC',
+  700: '#568395',
+  800: '#487086',
+  900: '#3E6073'
+};
+var teal = {
+  50: '#E0F2F1',
+  100: '#B2DFDB',
+  200: '#80CBC4',
+  300: '#67C1B8',
+  400: '#4DB6AC',
+  500: '#26A69A',
+  600: '#009688',
+  700: '#00897B',
+  800: '#00695C',
+  900: '#004D40'
+};
+var green = {
+  50: '#CEE5D8',
+  100: '#9FCFA7',
+  200: '#6FB975',
+  300: '#40A344',
+  400: '#289939',
+  500: '#108F2D',
+  600: '#118D16',
+  700: '#0F7F14',
+  800: '#0D7011',
+  900: '#0B620F'
+};
+var lightGreen = {
+  50: '#E9F4DD',
+  100: '#C3E997',
+  200: '#AED581',
+  300: '#9DCC66',
+  400: '#8BC34A',
+  500: '#7DAE43',
+  600: '#6E983D',
+  700: '#608336',
+  800: '#487429',
+  900: '#33691E'
+};
+var amber = {
+  50: '#FFF7D5',
+  100: '#FFF7B3',
+  200: '#F1C555',
+  300: '#EEC33E',
+  400: '#EAC128',
+  500: '#E7BF11',
+  600: '#FFAD00',
+  700: '#E89600',
+  800: '#D17E00',
+  900: '#985D04'
+};
+var orange = {
+  50: '#FFE1B4',
+  100: '#F8D88F',
+  200: '#FCC970',
+  300: '#FFB950',
+  400: '#FFAF38',
+  500: '#FFA41C',
+  600: '#FF9900',
+  700: '#F37500',
+  800: '#E65100',
+  900: '#FF4500'
+};
+var deepOrange = {
+  50: '#FFCCBC',
+  100: '#F5874F',
+  200: '#EF7943',
+  300: '#E96C38',
+  400: '#E45E2C',
+  500: '#DE5121',
+  600: '#D84315',
+  700: '#D03F12',
+  800: '#C73A0F',
+  900: '#BF360C'
+};
+var lightBrown = {
+  50: '#F7DED6',
+  100: '#ECAD98',
+  200: '#FE9275',
+  300: '#E97551',
+  400: '#ED6C45',
+  500: '#D95E38',
+  600: '#C5502C',
+  700: '#B2411F',
+  800: '#9E3313',
+  900: '#8A2506'
+};
+var brown = {
+  50: '#DAC7BB',
+  100: '#CCB2A1',
+  200: '#BD9C87',
+  300: '#AF876D',
+  400: '#A07252',
+  500: '#925C38',
+  600: '#83471E',
+  700: '#6C3C20',
+  800: '#553221',
+  900: '#3E2723'
+};
+var gray = {
+  50: '#FAFAFA',
+  100: '#F5F5F5',
+  200: '#EEEEEE',
+  300: '#E0E0E0',
+  400: '#BDBDBD',
+  500: '#9E9E9E',
+  600: '#757575',
+  700: '#616161',
+  800: '#424242',
+  900: '#212121'
+};
 var neutral = {
-  black: '#000000',
-  white: '#FFFFFF',
-  transparent: 'rgba(0, 0, 0, 0)'
+  50: '#FFFFFF',
+  100: '#F6F7FF',
+  200: '#000000'
+};
+var action = {
+  cancel: deepOrange[600],
+  confirm: green[600]
 };
 var primary = {
-  main: '#152849',
-  dark: '#0E1C33',
-  light: '#43536D',
-  contrast: neutral.white
+  light: darkBlue[300],
+  main: darkBlue[600],
+  dark: darkBlue[900]
 };
 var secondary = {
-  main: '#118D16',
-  dark: '#0B620F',
-  light: '#40A344',
-  contrast: neutral.white
+  light: green[300],
+  main: green[600],
+  dark: green[900]
 };
-var feedback = {
-  danger: '#D84315',
-  warning: '#FFA000',
-  success: '#0E9043',
-  info: '#2F80ED'
-};
-var action = {
-  confirm: '#118D16',
-  cancel: '#D84315',
-  neutral: primary.main
-};
-var grays = {
-  g0: '#212121',
-  g1: '#424242',
-  g2: '#616161',
-  g3: '#757575',
-  g4: '#9e9e9e',
-  g5: '#bdbdbd',
-  g6: '#e0e0e0',
-  g7: '#eeeeee',
-  g8: '#f5f5f5',
-  g9: '#fafafa'
-};
-var graphic = {
-  pink: {
-    main: '#D467A8',
-    light: '#F4D9E9'
-  },
-  purple: {
-    main: '#7B4299',
-    light: '#D7C6E0'
-  },
-  brown: {
-    main: '#83471E',
-    light: '#DAC7BB'
-  },
-  red: {
-    main: '#D84315',
-    light: '#FFCDBE'
-  },
-  orange: {
-    main: '#FF9900',
-    light: '#FFE1B4'
-  },
-  yellow: {
-    main: '#E7BF11',
-    light: '#FFF7D5'
-  },
-  lightgreen: {
-    main: '#8BC34A',
-    light: '#E9F4DD'
-  },
-  green: {
-    main: '#0A7B3E',
-    light: '#CEE5D8'
-  },
-  blue: {
-    main: '#56CCF2',
-    light: '#DAF2FD'
-  },
-  gray: {
-    main: grays.g5,
-    light: grays.g8
-  }
+var criticality = {
+  low: lightGreen[400],
+  medium: amber[500],
+  high: orange[600]
 };
 var priority = {
-  critical: {
-    main: '#D84315',
-    light: '#FFCDBE'
-  },
-  high: {
-    main: '#FF9900',
-    light: '#FFE1B4'
+  main: {
+    neutral: gray[400],
+    minimal: blue[300],
+    low: lightGreen[400],
+    medium: amber[500],
+    high: orange[600],
+    critical: deepOrange[600]
   },
-  medium: {
-    main: '#E7BF11',
-    light: '#FFF7D5'
-  },
-  low: {
-    main: '#8BC34A',
-    light: '#E9F4DD'
-  },
-  minimal: {
-    main: '#56CCF2',
-    light: '#DAF2FD'
-  },
-  neutral: {
-    main: grays.g5,
-    light: grays.g8
+  light: {
+    neutral: gray[100],
+    minimal: blue[50],
+    low: lightGreen[50],
+    medium: amber[50],
+    high: orange[50],
+    critical: deepOrange[50]
   }
 };
-var criticality = {
-  high: '#FF9900',
-  medium: '#E7BF11',
-  low: '#8BC34A'
-};
-var app = {
-  border: grays.g6,
-  background: {
-    main: '#F6F7FF',
-    lighter: grays.g8
-  },
-  text: {
-    main: grays.g0,
-    light: grays.g3,
-    disabled: grays.g6
-  }
+var feedback = {
+  danger: deepOrange[600],
+  warning: orange[600],
+  success: green[400],
+  info: blue[600]
 };
 var _default = exports["default"] = {
+  red: red,
+  pink: pink,
+  lightPink: lightPink,
+  purple: purple,
+  indigo: indigo,
+  darkBlue: darkBlue,
+  blue: blue,
+  lightBlue: lightBlue,
+  lightTeal: lightTeal,
+  teal: teal,
+  green: green,
+  lightGreen: lightGreen,
+  amber: amber,
+  orange: orange,
+  deepOrange: deepOrange,
+  brown: brown,
+  lightBrown: lightBrown,
+  gray: gray,
+  neutral: neutral,
+  action: action,
   primary: primary,
   secondary: secondary,
-  app: app,
-  priority: priority,
-  feedback: feedback,
-  graphic: graphic,
   criticality: criticality,
-  neutral: neutral,
-  grays: grays,
-  action: action
+  priority: priority,
+  feedback: feedback
 };

package/theme/index.d.ts

@@ -1,3 +1,2 @@
 export * from './theme';
-export * from './presets';
 export { default as ThemeProviderFlipper } from './ThemeProvider';

package/theme/index.js

@@ -25,16 +25,4 @@ Object.keys(_theme).forEach(function (key) {
     }
   });
 });
-var _presets = require("./presets");
-Object.keys(_presets).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _presets[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _presets[key];
-    }
-  });
-});
 var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));

package/theme/theme.d.ts

@@ -1,67 +1,69 @@
-import colors from './colors';
 export declare const theme: {
     colors: {
+        red: Record<number, string>;
+        pink: Record<number, string>;
+        lightPink: Record<number, string>;
+        purple: Record<number, string>;
+        indigo: Record<number, string>;
+        darkBlue: Record<number, string>;
+        blue: Record<number, string>;
+        lightBlue: Record<number, string>;
+        lightTeal: Record<number, string>;
+        teal: Record<number, string>;
+        green: Record<number, string>;
+        lightGreen: Record<number, string>;
+        amber: Record<number, string>;
+        orange: Record<number, string>;
+        deepOrange: Record<number, string>;
+        brown: Record<number, string>;
+        lightBrown: Record<number, string>;
+        gray: Record<number, string>;
+        neutral: Record<number, string>;
+        action: {
+            cancel: string;
+            confirm: string;
+        };
         primary: {
+            light: string;
             main: string;
             dark: string;
-            light: string;
-            contrast: string;
         };
         secondary: {
+            light: string;
             main: string;
             dark: string;
-            light: string;
-            contrast: string;
         };
-        app: {
-            border: string;
-            background: {
-                main: string;
-                lighter: string;
+        criticality: {
+            low: string;
+            medium: string;
+            high: string;
+        };
+        priority: {
+            main: {
+                neutral: string;
+                minimal: string;
+                low: string;
+                medium: string;
+                high: string;
+                critical: string;
             };
-            text: {
-                main: string;
-                light: string;
-                disabled: string;
+            light: {
+                neutral: string;
+                minimal: string;
+                low: string;
+                medium: string;
+                high: string;
+                critical: string;
             };
         };
-        priority: Record<import("./presets").Priority, {
-            main: string;
-            light: string;
-        }>;
-        feedback: Record<import("./presets").Feedback, string>;
-        graphic: Record<import("./presets").Graphically, {
-            main: string;
-            light: string;
-        }>;
-        criticality: Record<import("./presets").Criticality, string>;
-        neutral: {
-            black: string;
-            white: string;
-            transparent: string;
-        };
-        grays: {
-            g0: string;
-            g1: string;
-            g2: string;
-            g3: string;
-            g4: string;
-            g5: string;
-            g6: string;
-            g7: string;
-            g8: string;
-            g9: string;
-        };
-        action: {
-            confirm: string;
-            cancel: string;
-            neutral: string;
+        feedback: {
+            danger: string;
+            warning: string;
+            success: string;
+            info: string;
         };
     };
 };
-/**
- * Options to createMuiTheme
- * */
 export declare const muiThemeOptions: {
     palette: {
         primary: {
@@ -81,16 +83,3 @@ export declare const muiThemeOptions: {
         };
     };
 };
-/**
- * Raw colors
- * */
-export type Colors = typeof colors;
-export interface Theme {
-    theme: {
-        colors: Colors;
-    };
-}
-/**
- * Util interface to extend (Props + Theme)
- * */
-export type WithTheme<Props extends object> = Props & Theme;