@sproutsocial/racine 11.2.3 → 11.2.5-sproutTheme-beta.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 11.2.5
+
+### Patch Changes
+
+- a73cdfb: remove weird characters from props descriptions
+
+## 11.2.4
+
+### Patch Changes
+
+- 206bd32: copy updates to the TypeProps comments that power Seeds prop tables
+
 ## 11.2.3
 
 ### Patch Changes

package/__flow__/Link/index.js

@@ -8,10 +8,11 @@ type TypeProps = {
   /** Optional prop to make the URL open in a new tab */
   external?: boolean,
   children: React.Node,
+  /** Setting this prop will cause the component to be rendered as a link */
   href?: string,
   /** Disables user action and applies a disabled style to the component */
   disabled?: boolean,
-  /** Setting this prop will cause the component to be rendered as a button instead of an anchor) */
+  /** Can be used in addition to an href but still renders as a link. Omitting href will render as button */
   onClick?: (e: SyntheticEvent<HTMLButtonElement>) => void,
   as?: $PropertyType<TypeStyledComponentsCommonProps, "as">,
   underline?: boolean,

package/__flow__/ThemeProvider/index.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { ThemeProvider as BaseThemeProvider } from "styled-components";
 import theme from "../themes/light/theme";
 
-import typeof { default as TypeTheme } from "../themes/light/theme";
+import type { TypeTheme } from "../types/theme.flow";
 
 type TypeProps = $ReadOnly<{|
   theme?: TypeTheme,

package/__flow__/index.js

@@ -6,6 +6,10 @@ export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
 export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
 export { default as theme } from "./themes/light/theme";
 export { default as darkTheme } from "./themes/dark/theme";
+export {
+  sproutLightTheme,
+  sproutDarkTheme,
+} from "./themes/extendedThemes/sproutTheme";
 export { default as Icon } from "./Icon";
 // DEPRECATED: Alert has been renamed to Banner
 export { default as Alert } from "./Banner";

package/__flow__/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -0,0 +1,44 @@
+// @flow strict-local
+import clone from "just-clone";
+import type { TypeTheme } from "../../../../types/theme.flow.js";
+
+const darkTheme = (theme: TypeTheme) => {
+  const sproutDarkTheme = clone(theme);
+
+  sproutDarkTheme.sprout = {
+    colors: {
+      navigation: {
+        main: {
+          background: {
+            base: theme.colors.neutral[1000],
+            gradient: theme.colors.neutral[1100],
+          },
+        },
+        secondary: {
+          background: {
+            base: theme.colors.neutral[900],
+          },
+        },
+        text: {
+          base: theme.colors.neutral[0],
+          hover: theme.colors.neutral[0],
+        },
+        icon: {
+          base: theme.colors.neutral[0],
+          hover: theme.colors.neutral[0],
+        },
+        item: {
+          background: {
+            base: theme.colors.neutral[1000],
+            hover: theme.colors.neutral[1100],
+            active: theme.colors.neutral[700],
+          },
+        },
+      },
+    },
+  };
+
+  return sproutDarkTheme;
+};
+
+export default darkTheme;

package/__flow__/themes/extendedThemes/sproutTheme/index.js

@@ -0,0 +1,2 @@
+export { default as sproutLightTheme } from "./light/theme";
+export { default as sproutDarkTheme } from "./dark/theme";

package/__flow__/themes/extendedThemes/sproutTheme/light/theme.js

@@ -0,0 +1,44 @@
+// @flow strict-local
+import clone from "just-clone";
+import type { TypeTheme } from "../../../../types/theme.flow.js";
+
+const lightTheme = (theme: TypeTheme) => {
+  const sproutLightTheme = clone(theme);
+
+  sproutLightTheme.sprout = {
+    colors: {
+      navigation: {
+        main: {
+          background: {
+            base: theme.colors.neutral[900],
+            gradient: theme.colors.neutral[1000],
+          },
+        },
+        secondary: {
+          background: {
+            base: theme.colors.neutral[800],
+          },
+        },
+        text: {
+          base: theme.colors.neutral[0],
+          hover: theme.colors.neutral[0],
+        },
+        icon: {
+          base: theme.colors.neutral[0],
+          hover: theme.colors.neutral[0],
+        },
+        item: {
+          background: {
+            base: theme.colors.neutral[800],
+            hover: theme.colors.neutral[1000],
+            active: theme.colors.neutral[700],
+          },
+        },
+      },
+    },
+  };
+
+  return sproutLightTheme;
+};
+
+export default lightTheme;

package/__flow__/types/theme.flow.js

@@ -14,6 +14,7 @@ import {
 import type { TypeColors } from "./theme.colors.flow.js";
 import type { TypeFontFamilyString } from "../themes/light/theme";
 
+export type TypeThemeMode = "light" | "dark";
 export type TypeBreakpoint = typeof breakpoints;
 export type TypeTypography = typeof typography;
 export type TypeFontWeight = typeof fontWeights;
@@ -28,6 +29,7 @@ export type TypeEasing = typeof easing;
 export type TypeDuration = typeof duration;
 
 export type TypeTheme = {
+  mode: TypeThemeMode,
   breakpoints: TypeBreakpoint,
   colors: TypeColor,
   typography: TypeTypography,

package/commonjs/index.js

@@ -61,6 +61,8 @@ var _exportNames = {
   Menu: true,
   Listbox: true,
   OverflowList: true,
+  sproutLightTheme: true,
+  sproutDarkTheme: true,
   toast: true,
   MenuButton: true,
   MenuButtonContext: true,
@@ -70,7 +72,7 @@ var _exportNames = {
   DateRangePicker: true,
   VisuallyHidden: true
 };
-exports.VisuallyHidden = exports.DateRangePicker = exports.SingleDatePicker = exports.ListboxButton = exports.MenuItemContainer = exports.MenuButtonContext = exports.MenuButton = exports.toast = exports.OverflowList = exports.Listbox = exports.Menu = exports.ToastContainer = exports.Skeleton = exports.Breadcrumb = exports.Avatar = exports.Stack = exports.Message = exports.Fieldset = exports.FormField = exports.EmptyState = exports.SegmentedControl = exports.Collapsible = exports.Numeral = exports.LoaderButton = exports.Drawer = exports.Tooltip = exports.ThemeProvider = exports.Popout = exports.Modal = exports.Tabs = exports.TokenInput = exports.Token = exports.Switch = exports.Link = exports.Button = exports.Select = exports.Input = exports.Label = exports.Box = exports.TableRowAccordion = exports.TableHeaderCell = exports.TableCell = exports.Table = exports.ChartLegend = exports.KeyboardKey = exports.Image = exports.Text = exports.Loader = exports.ToggleHint = exports.Textarea = exports.Radio = exports.Checkbox = exports.CharacterCounter = exports.Card = exports.Indicator = exports.Badge = exports.Banner = exports.Alert = exports.Icon = exports.darkTheme = exports.theme = exports.useTextContent = exports.useMultiselect = exports.useSelect = exports.disabled = exports.focusRing = exports.visuallyHidden = void 0;
+exports.VisuallyHidden = exports.DateRangePicker = exports.SingleDatePicker = exports.ListboxButton = exports.MenuItemContainer = exports.MenuButtonContext = exports.MenuButton = exports.toast = exports.sproutDarkTheme = exports.sproutLightTheme = exports.OverflowList = exports.Listbox = exports.Menu = exports.ToastContainer = exports.Skeleton = exports.Breadcrumb = exports.Avatar = exports.Stack = exports.Message = exports.Fieldset = exports.FormField = exports.EmptyState = exports.SegmentedControl = exports.Collapsible = exports.Numeral = exports.LoaderButton = exports.Drawer = exports.Tooltip = exports.ThemeProvider = exports.Popout = exports.Modal = exports.Tabs = exports.TokenInput = exports.Token = exports.Switch = exports.Link = exports.Button = exports.Select = exports.Input = exports.Label = exports.Box = exports.TableRowAccordion = exports.TableHeaderCell = exports.TableCell = exports.Table = exports.ChartLegend = exports.KeyboardKey = exports.Image = exports.Text = exports.Loader = exports.ToggleHint = exports.Textarea = exports.Radio = exports.Checkbox = exports.CharacterCounter = exports.Card = exports.Indicator = exports.Badge = exports.Banner = exports.Alert = exports.Icon = exports.darkTheme = exports.theme = exports.useTextContent = exports.useMultiselect = exports.useSelect = exports.disabled = exports.focusRing = exports.visuallyHidden = void 0;
 
 var _systemProps = require("./systemProps");
 
@@ -101,6 +103,11 @@ var _theme2 = _interopRequireDefault(require("./themes/dark/theme"));
 
 exports.darkTheme = _theme2.default;
 
+var _sproutTheme = require("./themes/extendedThemes/sproutTheme");
+
+exports.sproutLightTheme = _sproutTheme.sproutLightTheme;
+exports.sproutDarkTheme = _sproutTheme.sproutDarkTheme;
+
 var _Icon = _interopRequireDefault(require("./Icon"));
 
 exports.Icon = _Icon.default;

package/commonjs/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -0,0 +1,48 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _justClone = _interopRequireDefault(require("just-clone"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var darkTheme = function darkTheme(theme) {
+  var sproutDarkTheme = (0, _justClone.default)(theme);
+  sproutDarkTheme.sprout = {
+    colors: {
+      navigation: {
+        main: {
+          background: {
+            base: theme.colors.neutral[1000],
+            gradient: theme.colors.neutral[1100]
+          }
+        },
+        secondary: {
+          background: {
+            base: theme.colors.neutral[900]
+          }
+        },
+        text: {
+          base: theme.colors.neutral[0],
+          hover: theme.colors.neutral[0]
+        },
+        icon: {
+          base: theme.colors.neutral[0],
+          hover: theme.colors.neutral[0]
+        },
+        item: {
+          background: {
+            base: theme.colors.neutral[1000],
+            hover: theme.colors.neutral[1100],
+            active: theme.colors.neutral[700]
+          }
+        }
+      }
+    }
+  };
+  return sproutDarkTheme;
+};
+
+var _default = darkTheme;
+exports.default = _default;

package/commonjs/themes/extendedThemes/sproutTheme/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+exports.__esModule = true;
+exports.sproutDarkTheme = exports.sproutLightTheme = void 0;
+
+var _theme = _interopRequireDefault(require("./light/theme"));
+
+exports.sproutLightTheme = _theme.default;
+
+var _theme2 = _interopRequireDefault(require("./dark/theme"));
+
+exports.sproutDarkTheme = _theme2.default;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/commonjs/themes/extendedThemes/sproutTheme/light/theme.js

@@ -0,0 +1,48 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _justClone = _interopRequireDefault(require("just-clone"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var lightTheme = function lightTheme(theme) {
+  var sproutLightTheme = (0, _justClone.default)(theme);
+  sproutLightTheme.sprout = {
+    colors: {
+      navigation: {
+        main: {
+          background: {
+            base: theme.colors.neutral[900],
+            gradient: theme.colors.neutral[1000]
+          }
+        },
+        secondary: {
+          background: {
+            base: theme.colors.neutral[800]
+          }
+        },
+        text: {
+          base: theme.colors.neutral[0],
+          hover: theme.colors.neutral[0]
+        },
+        icon: {
+          base: theme.colors.neutral[0],
+          hover: theme.colors.neutral[0]
+        },
+        item: {
+          background: {
+            base: theme.colors.neutral[800],
+            hover: theme.colors.neutral[1000],
+            active: theme.colors.neutral[700]
+          }
+        }
+      }
+    }
+  };
+  return sproutLightTheme;
+};
+
+var _default = lightTheme;
+exports.default = _default;

package/lib/index.js

@@ -3,6 +3,7 @@ export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
 export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
 export { default as theme } from "./themes/light/theme";
 export { default as darkTheme } from "./themes/dark/theme";
+export { sproutLightTheme, sproutDarkTheme } from "./themes/extendedThemes/sproutTheme";
 export { default as Icon } from "./Icon"; // DEPRECATED: Alert has been renamed to Banner
 
 export { default as Alert } from "./Banner";

package/lib/themes/extendedThemes/sproutTheme/dark/theme.js

@@ -0,0 +1,40 @@
+import clone from "just-clone";
+
+var darkTheme = function darkTheme(theme) {
+  var sproutDarkTheme = clone(theme);
+  sproutDarkTheme.sprout = {
+    colors: {
+      navigation: {
+        main: {
+          background: {
+            base: theme.colors.neutral[1000],
+            gradient: theme.colors.neutral[1100]
+          }
+        },
+        secondary: {
+          background: {
+            base: theme.colors.neutral[900]
+          }
+        },
+        text: {
+          base: theme.colors.neutral[0],
+          hover: theme.colors.neutral[0]
+        },
+        icon: {
+          base: theme.colors.neutral[0],
+          hover: theme.colors.neutral[0]
+        },
+        item: {
+          background: {
+            base: theme.colors.neutral[1000],
+            hover: theme.colors.neutral[1100],
+            active: theme.colors.neutral[700]
+          }
+        }
+      }
+    }
+  };
+  return sproutDarkTheme;
+};
+
+export default darkTheme;

package/lib/themes/extendedThemes/sproutTheme/index.js

@@ -0,0 +1,2 @@
+export { default as sproutLightTheme } from "./light/theme";
+export { default as sproutDarkTheme } from "./dark/theme";

package/lib/themes/extendedThemes/sproutTheme/light/theme.js

@@ -0,0 +1,40 @@
+import clone from "just-clone";
+
+var lightTheme = function lightTheme(theme) {
+  var sproutLightTheme = clone(theme);
+  sproutLightTheme.sprout = {
+    colors: {
+      navigation: {
+        main: {
+          background: {
+            base: theme.colors.neutral[900],
+            gradient: theme.colors.neutral[1000]
+          }
+        },
+        secondary: {
+          background: {
+            base: theme.colors.neutral[800]
+          }
+        },
+        text: {
+          base: theme.colors.neutral[0],
+          hover: theme.colors.neutral[0]
+        },
+        icon: {
+          base: theme.colors.neutral[0],
+          hover: theme.colors.neutral[0]
+        },
+        item: {
+          background: {
+            base: theme.colors.neutral[800],
+            hover: theme.colors.neutral[1000],
+            active: theme.colors.neutral[700]
+          }
+        }
+      }
+    }
+  };
+  return sproutLightTheme;
+};
+
+export default lightTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "11.2.3",
+  "version": "11.2.5-sproutTheme-beta.0",
   "license": "MIT",
   "files": [
     "__flow__",
@@ -66,6 +66,7 @@
   "dependencies": {
     "@styled-system/theme-get": "^5.1.2",
     "classnames": "^2.2.6",
+    "just-clone": "^5.0.1",
     "lodash.curry": "^4.1.1",
     "lodash.uniqueid": "^4.0.1",
     "lru-memoize": "^1.1.0",

package/bin/buildNpm.js

@@ -1,58 +0,0 @@
-/**
- * This file handles the generation of an .npmrc with Jfrog credentials during the CI process.
- * It replicates the local configuration requirements of a developer running `yarn` on their machine
- * If run locally please do not commit your auth credentials
- */
-const fs = require("fs");
-const https = require("https");
-const { exit } = require("process");
-
-const { ARTIFACTORY_KEY, CI } = process.env;
-
-// Check if we're in CI context, otherwise skip the process
-if (!CI) {
-  exit();
-}
-
-const options = {
-  hostname: "sproutsocial.jfrog.io",
-  path: "/artifactory/api/npm/auth",
-  method: "GET",
-  headers: {
-    "X-JFrog-Art-Api": ARTIFACTORY_KEY,
-  },
-};
-
-const req = https.request(options, (res) => {
-  console.log(`statusCode: ${res.statusCode}`);
-
-  // Call our auth endpoint with environment credentials
-  res.on("data", (data) => {
-    // Writes out an .npmrc file with the response
-    fs.writeFile(".npmrc", data, (err) => {
-      if (err) console.log(err);
-      else {
-        console.log(".npmrc generated successfully!");
-      }
-    });
-
-    // Once the file is created we append the registry info
-    fs.appendFile(
-      ".npmrc",
-      "registry=https://sproutsocial.jfrog.io/artifactory/api/npm/npm_virtual",
-      function (err) {
-        if (err) throw err;
-        console.log("Registry Config Added!");
-      }
-    );
-
-    // Finally, we set permissions for the file so that netlify recognizes it
-    fs.chmodSync(".npmrc", "0600");
-  });
-});
-
-req.on("error", (error) => {
-  console.error(error);
-});
-
-req.end();