@sproutsocial/racine 11.2.2-beta.1 → 11.2.2-beta.4

package/__flow__/Box/index.stories.js

@@ -3,7 +3,7 @@ import { css } from "styled-components";
 import { text } from "@storybook/addon-knobs";
 import Box from "./index";
 import useMeasure from "use-measure";
-import theme from "../themes/racine/light/theme";
+import theme from "../themes/baseTheme/light/theme";
 
 export default {
   title: "Box",

package/__flow__/Stack/index.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { Children } from "react";
 import Box from "../Box";
 import { normalizeResponsiveProp } from "../utils/responsiveProps";
-import type { TypeSpaceLiterals } from "../themes/racine/light/theme";
+import type { TypeSpaceLiterals } from "../themes/baseTheme/light/theme";
 import type { TypeResponsive } from "../types/system-props.flow";
 
 type TypeDirection = "vertical" | "horizontal";

package/__flow__/ThemeProvider/index.js

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

package/__flow__/index.js

@@ -4,7 +4,7 @@ export type { TypeTheme } from "./types/theme.flow";
 export * from "./systemProps";
 export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
 export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
-export * from "./themes/racine";
+export { baseLightTheme, baseDarkTheme } from "./themes/baseTheme";
 export { default as Icon } from "./Icon";
 // DEPRECATED: Alert has been renamed to Banner
 export { default as Alert } from "./Banner";

package/__flow__/systemProps/typography.js

@@ -11,7 +11,7 @@ import type {
   TextAlignProperty,
 } from "csstype";
 
-import typeof { fontWeights as TypeofFontWeights } from "../themes/racine/light/theme";
+import typeof { fontWeights as TypeofFontWeights } from "../themes/baseTheme/light/theme";
 import type {
   StyledSystemStyleFn,
   TypeResponsiveBaseSystemProp,

package/__flow__/themes/{racine → baseTheme}/dark/_themed.scss

@@ -3,7 +3,7 @@
 
 // SET-UP
 // This file is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
-@import "../../../../dist/themes/racine/dark/dark.scss";
+@import "../../../../dist/themes/baseTheme/dark/dark.scss";
 
 // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.

package/__flow__/themes/baseTheme/index.js

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

package/__flow__/themes/{racine → baseTheme}/light/_themed.scss

@@ -3,7 +3,7 @@
 
 // SET-UP
 // This file is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
-@import "../../../../dist/themes/racine/light/light.scss";
+@import "../../../../dist/themes/baseTheme/light/light.scss";
 
 // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.

package/__flow__/types/theme.colors.flow.js

@@ -1,7 +1,7 @@
 // @flow strict-local
 
-import literalColors from "../themes/racine/light/literal-colors";
-import { datavizPalette } from "../themes/racine/light/dataviz-palette";
+import literalColors from "../themes/baseTheme/light/literal-colors";
+import { datavizPalette } from "../themes/baseTheme/light/dataviz-palette";
 
 type TypeAppColors = {|
   app: {

package/__flow__/types/theme.flow.js

@@ -10,9 +10,9 @@ import {
   space,
   easing,
   duration,
-} from "../themes/racine/light/theme";
+} from "../themes/baseTheme/light/theme";
 import type { TypeColors } from "./theme.colors.flow.js";
-import type { TypeFontFamilyString } from "../themes/racine/light/theme";
+import type { TypeFontFamilyString } from "../themes/baseTheme/light/theme";
 
 export type TypeBreakpoint = typeof breakpoints;
 export type TypeTypography = typeof typography;

package/__flow__/utils/mixins.js

@@ -1,6 +1,6 @@
 // @flow strict-local
 import { css } from "styled-components";
-import { racineLightTheme } from "../themes/racine";
+import { baseLightTheme } from "../themes/baseTheme";
 import { transparentize } from "polished";
 
 export const svgToDataURL = (svgStr: string) => {
@@ -26,12 +26,11 @@ export const visuallyHidden = css`
 `;
 
 export const focusRing = css`
-  box-shadow: 0 0 0 1px
-      ${racineLightTheme.colors.button.primary.background.base},
+  box-shadow: 0 0 0 1px ${baseLightTheme.colors.button.primary.background.base},
     0 0px 0px 4px
       ${transparentize(
         0.7,
-        racineLightTheme.colors.button.primary.background.base
+        baseLightTheme.colors.button.primary.background.base
       )};
   outline: none;
 
@@ -41,10 +40,10 @@ export const focusRing = css`
 `;
 
 export const pill = css`
-  min-width: ${racineLightTheme.space[600]};
-  min-height: ${racineLightTheme.space[600]};
-  padding: ${racineLightTheme.space[300]} ${racineLightTheme.space[350]};
-  border-radius: ${racineLightTheme.radii.pill};
+  min-width: ${baseLightTheme.space[600]};
+  min-height: ${baseLightTheme.space[600]};
+  padding: ${baseLightTheme.space[300]} ${baseLightTheme.space[350]};
+  border-radius: ${baseLightTheme.radii.pill};
 `;
 
 export const disabled = css`

package/__flow__/utils/responsiveProps/index.js

@@ -1,5 +1,5 @@
 // @flow
-import theme from "../../themes/racine/light/theme";
+import theme from "../../themes/baseTheme/light/theme";
 
 import type { TypeResponsive } from "../../types/system-props.flow";
 

package/commonjs/ThemeProvider/index.js

@@ -7,7 +7,7 @@ var React = _interopRequireWildcard(require("react"));
 
 var _styledComponents = require("styled-components");
 
-var _theme = _interopRequireDefault(require("../themes/racine/light/theme"));
+var _theme = _interopRequireDefault(require("../themes/baseTheme/light/theme"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/commonjs/index.js

@@ -8,6 +8,8 @@ var _exportNames = {
   useSelect: true,
   useMultiselect: true,
   useTextContent: true,
+  baseLightTheme: true,
+  baseDarkTheme: true,
   Icon: true,
   Alert: true,
   Banner: true,
@@ -68,7 +70,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.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.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.baseDarkTheme = exports.baseLightTheme = exports.useTextContent = exports.useMultiselect = exports.useSelect = exports.disabled = exports.focusRing = exports.visuallyHidden = void 0;
 
 var _systemProps = require("./systemProps");
 
@@ -91,14 +93,10 @@ exports.useSelect = _hooks.useSelect;
 exports.useMultiselect = _hooks.useMultiselect;
 exports.useTextContent = _hooks.useTextContent;
 
-var _racine = require("./themes/racine");
+var _baseTheme = require("./themes/baseTheme");
 
-Object.keys(_racine).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _racine[key]) return;
-  exports[key] = _racine[key];
-});
+exports.baseLightTheme = _baseTheme.baseLightTheme;
+exports.baseDarkTheme = _baseTheme.baseDarkTheme;
 
 var _Icon = _interopRequireDefault(require("./Icon"));
 

package/commonjs/themes/{racine → baseTheme}/index.js

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

package/commonjs/types/theme.colors.flow.js

@@ -1,7 +1,7 @@
 "use strict";
 
-var _literalColors = _interopRequireDefault(require("../themes/racine/light/literal-colors"));
+var _literalColors = _interopRequireDefault(require("../themes/baseTheme/light/literal-colors"));
 
-var _datavizPalette = require("../themes/racine/light/dataviz-palette");
+var _datavizPalette = require("../themes/baseTheme/light/dataviz-palette");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/commonjs/types/theme.flow.js

@@ -1,3 +1,3 @@
 "use strict";
 
-var _theme = require("../themes/racine/light/theme");
+var _theme = require("../themes/baseTheme/light/theme");

package/commonjs/utils/mixins.js

@@ -5,7 +5,7 @@ exports.disabled = exports.pill = exports.focusRing = exports.visuallyHidden = e
 
 var _styledComponents = require("styled-components");
 
-var _racine = require("../themes/racine");
+var _baseTheme = require("../themes/baseTheme");
 
 var _polished = require("polished");
 
@@ -19,9 +19,9 @@ var svgToDataURL = function svgToDataURL(svgStr) {
 exports.svgToDataURL = svgToDataURL;
 var visuallyHidden = (0, _styledComponents.css)(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;"]);
 exports.visuallyHidden = visuallyHidden;
-var focusRing = (0, _styledComponents.css)(["box-shadow:0 0 0 1px ", ",0 0px 0px 4px ", ";outline:none;&::-moz-focus-inner{border:0;}"], _racine.racineLightTheme.colors.button.primary.background.base, (0, _polished.transparentize)(0.7, _racine.racineLightTheme.colors.button.primary.background.base));
+var focusRing = (0, _styledComponents.css)(["box-shadow:0 0 0 1px ", ",0 0px 0px 4px ", ";outline:none;&::-moz-focus-inner{border:0;}"], _baseTheme.baseLightTheme.colors.button.primary.background.base, (0, _polished.transparentize)(0.7, _baseTheme.baseLightTheme.colors.button.primary.background.base));
 exports.focusRing = focusRing;
-var pill = (0, _styledComponents.css)(["min-width:", ";min-height:", ";padding:", " ", ";border-radius:", ";"], _racine.racineLightTheme.space[600], _racine.racineLightTheme.space[600], _racine.racineLightTheme.space[300], _racine.racineLightTheme.space[350], _racine.racineLightTheme.radii.pill);
+var pill = (0, _styledComponents.css)(["min-width:", ";min-height:", ";padding:", " ", ";border-radius:", ";"], _baseTheme.baseLightTheme.space[600], _baseTheme.baseLightTheme.space[600], _baseTheme.baseLightTheme.space[300], _baseTheme.baseLightTheme.space[350], _baseTheme.baseLightTheme.radii.pill);
 exports.pill = pill;
 var disabled = (0, _styledComponents.css)(["opacity:0.4;pointer-events:none;"]);
 exports.disabled = disabled;

package/commonjs/utils/responsiveProps/index.js

@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports.normalizeResponsiveProp = void 0;
 
-var _theme = _interopRequireDefault(require("../../themes/racine/light/theme"));
+var _theme = _interopRequireDefault(require("../../themes/baseTheme/light/theme"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/dist/themes/{racine → baseTheme}/dark/_themed.scss

@@ -3,7 +3,7 @@
 
 // SET-UP
 // This file is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
-@import "../../../../dist/themes/racine/dark/dark.scss";
+@import "../../../../dist/themes/baseTheme/dark/dark.scss";
 
 // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.

package/dist/themes/{racine → baseTheme}/light/_themed.scss

@@ -3,7 +3,7 @@
 
 // SET-UP
 // This file is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
-@import "../../../../dist/themes/racine/light/light.scss";
+@import "../../../../dist/themes/baseTheme/light/light.scss";
 
 // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
 // so we need to map-get "default" to access it.

package/lib/ThemeProvider/index.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import * as React from "react";
 import { ThemeProvider as BaseThemeProvider } from "styled-components";
-import theme from "../themes/racine/light/theme";
+import theme from "../themes/baseTheme/light/theme";
 
 var ThemeProvider = function ThemeProvider(props) {
   return /*#__PURE__*/React.createElement(BaseThemeProvider, _extends({}, props, {

package/lib/index.js

@@ -1,7 +1,7 @@
 export * from "./systemProps";
 export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
 export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
-export * from "./themes/racine";
+export { baseLightTheme, baseDarkTheme } from "./themes/baseTheme";
 export { default as Icon } from "./Icon"; // DEPRECATED: Alert has been renamed to Banner
 
 export { default as Alert } from "./Banner";

package/lib/themes/baseTheme/index.js

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

package/lib/types/theme.colors.flow.js

@@ -1,2 +1,2 @@
-import literalColors from "../themes/racine/light/literal-colors";
-import { datavizPalette } from "../themes/racine/light/dataviz-palette";
+import literalColors from "../themes/baseTheme/light/literal-colors";
+import { datavizPalette } from "../themes/baseTheme/light/dataviz-palette";

package/lib/types/theme.flow.js

@@ -1 +1 @@
-import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from "../themes/racine/light/theme";
+import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from "../themes/baseTheme/light/theme";

package/lib/utils/mixins.js

@@ -1,5 +1,5 @@
 import { css } from "styled-components";
-import { racineLightTheme } from "../themes/racine";
+import { baseLightTheme } from "../themes/baseTheme";
 import { transparentize } from "polished";
 export var svgToDataURL = function svgToDataURL(svgStr) {
   var encoded = encodeURIComponent(svgStr).replace(/'/g, "%27").replace(/"/g, "%22");
@@ -8,6 +8,6 @@ export var svgToDataURL = function svgToDataURL(svgStr) {
   return dataUrl;
 };
 export var visuallyHidden = css(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;"]);
-export var focusRing = css(["box-shadow:0 0 0 1px ", ",0 0px 0px 4px ", ";outline:none;&::-moz-focus-inner{border:0;}"], racineLightTheme.colors.button.primary.background.base, transparentize(0.7, racineLightTheme.colors.button.primary.background.base));
-export var pill = css(["min-width:", ";min-height:", ";padding:", " ", ";border-radius:", ";"], racineLightTheme.space[600], racineLightTheme.space[600], racineLightTheme.space[300], racineLightTheme.space[350], racineLightTheme.radii.pill);
+export var focusRing = css(["box-shadow:0 0 0 1px ", ",0 0px 0px 4px ", ";outline:none;&::-moz-focus-inner{border:0;}"], baseLightTheme.colors.button.primary.background.base, transparentize(0.7, baseLightTheme.colors.button.primary.background.base));
+export var pill = css(["min-width:", ";min-height:", ";padding:", " ", ";border-radius:", ";"], baseLightTheme.space[600], baseLightTheme.space[600], baseLightTheme.space[300], baseLightTheme.space[350], baseLightTheme.radii.pill);
 export var disabled = css(["opacity:0.4;pointer-events:none;"]);

package/lib/utils/responsiveProps/index.js

@@ -1,4 +1,4 @@
-import theme from "../../themes/racine/light/theme";
+import theme from "../../themes/baseTheme/light/theme";
 var breakpoints = theme.breakpoints;
 var LENGTH = breakpoints.length + 1;
 export var normalizeResponsiveProp = function normalizeResponsiveProp(value) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "11.2.2-beta.1",
+  "version": "11.2.2-beta.4",
   "license": "MIT",
   "files": [
     "__flow__",

package/__flow__/themes/racine/index.js

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

package/lib/themes/racine/index.js

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