flipper-ui 0.30.7 → 0.30.9

package/theme/colors.d.ts

@@ -0,0 +1,60 @@
+import { Priority, Feedback, Criticality, Graphically } from './presets';
+declare const _default: {
+    primary: {
+        main: string;
+        dark: string;
+        light: string;
+        contrast: string;
+    };
+    secondary: {
+        main: string;
+        dark: string;
+        light: string;
+        contrast: string;
+    };
+    app: {
+        border: string;
+        background: {
+            main: string;
+            lighter: string;
+        };
+        text: {
+            main: string;
+            light: string;
+            disabled: 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;
+    };
+};
+export default _default;

package/theme/colors.js

@@ -0,0 +1,143 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var neutral = {
+  black: '#000000',
+  white: '#FFFFFF',
+  transparent: 'rgba(0, 0, 0, 0)'
+};
+var primary = {
+  main: '#152849',
+  dark: '#0E1C33',
+  light: '#43536D',
+  contrast: neutral.white
+};
+var secondary = {
+  main: '#118D16',
+  dark: '#0B620F',
+  light: '#40A344',
+  contrast: neutral.white
+};
+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 priority = {
+  critical: {
+    main: '#D84315',
+    light: '#FFCDBE'
+  },
+  high: {
+    main: '#FF9900',
+    light: '#FFE1B4'
+  },
+  medium: {
+    main: '#E7BF11',
+    light: '#FFF7D5'
+  },
+  low: {
+    main: '#8BC34A',
+    light: '#E9F4DD'
+  },
+  minimal: {
+    main: '#56CCF2',
+    light: '#DAF2FD'
+  },
+  neutral: {
+    main: grays.g5,
+    light: grays.g8
+  }
+};
+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 _default = exports["default"] = {
+  primary: primary,
+  secondary: secondary,
+  app: app,
+  priority: priority,
+  feedback: feedback,
+  graphic: graphic,
+  criticality: criticality,
+  neutral: neutral,
+  grays: grays,
+  action: action
+};

package/theme/index.d.ts

@@ -0,0 +1,2 @@
+export * from './theme';
+export * from './presets';

package/theme/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _theme = require("./theme");
+Object.keys(_theme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _theme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _theme[key];
+    }
+  });
+});
+var _presets = require("./presets");
+Object.keys(_presets).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _presets[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _presets[key];
+    }
+  });
+});

package/theme/presets.d.ts

@@ -0,0 +1,31 @@
+export declare enum Feedback {
+    danger = "danger",
+    warning = "warning",
+    success = "success",
+    info = "info"
+}
+export declare enum Priority {
+    critical = "critical",
+    high = "high",
+    medium = "medium",
+    low = "low",
+    minimal = "minimal",
+    neutral = "neutral"
+}
+export declare enum Criticality {
+    high = "high",
+    medium = "medium",
+    low = "low"
+}
+export declare enum Graphically {
+    pink = "pink",
+    purple = "purple",
+    brown = "brown",
+    red = "red",
+    orange = "orange",
+    yellow = "yellow",
+    lightgreen = "lightgreen",
+    green = "green",
+    blue = "blue",
+    gray = "gray"
+}

package/theme/presets.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Priority = exports.Graphically = exports.Feedback = exports.Criticality = void 0;
+var Feedback = exports.Feedback = /*#__PURE__*/function (Feedback) {
+  Feedback["danger"] = "danger";
+  Feedback["warning"] = "warning";
+  Feedback["success"] = "success";
+  Feedback["info"] = "info";
+  return Feedback;
+}({});
+var Priority = exports.Priority = /*#__PURE__*/function (Priority) {
+  Priority["critical"] = "critical";
+  Priority["high"] = "high";
+  Priority["medium"] = "medium";
+  Priority["low"] = "low";
+  Priority["minimal"] = "minimal";
+  Priority["neutral"] = "neutral";
+  return Priority;
+}({});
+var Criticality = exports.Criticality = /*#__PURE__*/function (Criticality) {
+  Criticality["high"] = "high";
+  Criticality["medium"] = "medium";
+  Criticality["low"] = "low";
+  return Criticality;
+}({});
+var Graphically = exports.Graphically = /*#__PURE__*/function (Graphically) {
+  Graphically["pink"] = "pink";
+  Graphically["purple"] = "purple";
+  Graphically["brown"] = "brown";
+  Graphically["red"] = "red";
+  Graphically["orange"] = "orange";
+  Graphically["yellow"] = "yellow";
+  Graphically["lightgreen"] = "lightgreen";
+  Graphically["green"] = "green";
+  Graphically["blue"] = "blue";
+  Graphically["gray"] = "gray";
+  return Graphically;
+}({});

package/theme/theme.d.ts

@@ -0,0 +1,96 @@
+import colors from './colors';
+export declare const theme: {
+    colors: {
+        primary: {
+            main: string;
+            dark: string;
+            light: string;
+            contrast: string;
+        };
+        secondary: {
+            main: string;
+            dark: string;
+            light: string;
+            contrast: string;
+        };
+        app: {
+            border: string;
+            background: {
+                main: string;
+                lighter: string;
+            };
+            text: {
+                main: string;
+                light: string;
+                disabled: 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;
+        };
+    };
+};
+/**
+ * Options to createMuiTheme
+ * */
+export declare const muiThemeOptions: {
+    palette: {
+        primary: {
+            main: string;
+        };
+        secondary: {
+            main: string;
+        };
+        error: {
+            main: string;
+        };
+        background: {
+            default: string;
+        };
+        text: {
+            primary: string;
+        };
+    };
+};
+/**
+ * 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;

package/theme/theme.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.theme = exports.muiThemeOptions = void 0;
+var _colors = _interopRequireDefault(require("./colors"));
+var theme = exports.theme = {
+  colors: _colors["default"]
+};
+
+/**
+ * Options to createMuiTheme
+ * */
+var muiThemeOptions = exports.muiThemeOptions = {
+  palette: {
+    primary: {
+      main: _colors["default"].primary.main
+    },
+    secondary: {
+      main: _colors["default"].secondary.main
+    },
+    error: {
+      main: _colors["default"].feedback.danger
+    },
+    background: {
+      "default": _colors["default"].app.background.main
+    },
+    text: {
+      primary: _colors["default"].app.text.main
+    }
+  }
+};
+
+/**
+ * Raw colors
+ * */
+
+/**
+ * Util interface to extend (Props + Theme)
+ * */

package/colors.d.ts

@@ -1,27 +0,0 @@
-export declare const primary: {
-    dark: string;
-    light: string;
-    normal: string;
-};
-export declare const background: {
-    dark: string;
-    light: string;
-    normal: string;
-};
-export declare const silver: {
-    medium: string;
-    light: string;
-};
-export declare const white = "#FFFFFF";
-export declare const black = "#000000";
-export declare const transparent = "#FFFFFF00";
-export declare const text = "#424242";
-export declare const error: {
-    dark: string;
-    light: string;
-    normal: string;
-};
-export declare const warning = "#FFC107";
-export declare const success = "#4CAF50";
-export declare const DARK = "rgba(189,189,189,0)";
-export declare const GREY = "rgba(189,189,189,1)";

package/colors.js

@@ -1,35 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.white = exports.warning = exports.transparent = exports.text = exports.success = exports.silver = exports.primary = exports.error = exports.black = exports.background = exports.GREY = exports.DARK = void 0;
-var primary = exports.primary = {
-  dark: '#00695C',
-  light: '#B2DFDB',
-  normal: '#009688'
-};
-var background = exports.background = {
-  dark: '#BDBDBD',
-  light: '#EEEEEE',
-  normal: '#E5E5E5'
-};
-var silver = exports.silver = {
-  medium: '#666666',
-  light: '#D3D3D3'
-};
-var white = exports.white = '#FFFFFF';
-var black = exports.black = '#000000';
-var transparent = exports.transparent = '#FFFFFF00';
-var text = exports.text = '#424242';
-var error = exports.error = {
-  dark: '#B71C1C',
-  light: '#F44336',
-  normal: '#D32F2F'
-};
-var warning = exports.warning = '#FFC107';
-var success = exports.success = '#4CAF50';
-
-// Table gradient hover colors with opacity
-var DARK = exports.DARK = 'rgba(189,189,189,0)';
-var GREY = exports.GREY = 'rgba(189,189,189,1)';