@sproutsocial/racine 11.2.0 → 11.2.2-beta.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 11.2.2
+
+### Patch Changes
+
+- 9cc377e: Created extended theme directory
+
+## 11.2.1
+
+### Patch Changes
+
+- 6968733: adds deprecation messaging to typeProps to be displayed on seeds page
+
 ## 11.2.0
 
 ### Minor Changes

package/__flow__/Badge/index.js

@@ -8,6 +8,7 @@ type TypeProps = {
   children?: React.Node,
   /** DEPRECATED: Use children instead of text */
   text: React.Node,
+  /** Size default is deprecated in favor of small and large */
   size?: "small" | "large" | "default",
   badgeColor?:
     | "green"

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/light/theme";
+import theme from "../themes/racine/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/light/theme";
+import type { TypeSpaceLiterals } from "../themes/racine/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/light/theme";
+import theme from "../themes/racine/light/theme";
 
-import typeof { default as TypeTheme } from "../themes/light/theme";
+import typeof { default as TypeTheme } from "../themes/racine/light/theme";
 
 type TypeProps = $ReadOnly<{|
   theme?: TypeTheme,

package/__flow__/index.js

@@ -4,8 +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 { default as theme } from "./themes/light/theme";
-export { default as darkTheme } from "./themes/dark/theme";
+export * from "./themes/racine";
 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/light/theme";
+import typeof { fontWeights as TypeofFontWeights } from "../themes/racine/light/theme";
 import type {
   StyledSystemStyleFn,
   TypeResponsiveBaseSystemProp,

package/__flow__/themes/extendedThemes/README.md

@@ -0,0 +1,6 @@
+## Extended Theme Directory
+
+This directory serves as a shared environment for all extended themes. Each unique theme should have its own folder and theme.js file.
+`src/themes/extendedThemes/customTheme/theme.js`
+
+Check out our documentation for [How to extend the theme](https://seeds.sproutsocial.com/components/theme#extending-the-theme) on Seeds.

package/__flow__/themes/{dark → racine/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/dark/dark.scss";
+@import "../../../dist/themes/racine/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/{dark → racine/dark}/theme.js

@@ -15,7 +15,7 @@ import {
 } from "./decorative-palettes";
 import { transparentize } from "polished";
 
-import interact from "../utils/interact";
+import interact from "../../utils/interact";
 
 const MODE = "dark";
 

package/__flow__/themes/racine/index.js

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

package/__flow__/themes/{light → racine/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/light/light.scss";
+@import "../../../dist/themes/racine/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__/themes/{light → racine/light}/theme.js

@@ -20,7 +20,7 @@ import MOTION from "@sproutsocial/seeds-motion";
 import BORDER from "@sproutsocial/seeds-border";
 import { transparentize } from "polished";
 
-import interact from "../utils/interact";
+import interact from "../../utils/interact";
 
 export const breakpoints = ["900px", "1200px", "1500px", "1800px"];
 

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

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

package/__flow__/types/theme.flow.js

@@ -10,9 +10,9 @@ import {
   space,
   easing,
   duration,
-} from "../themes/light/theme";
+} from "../themes/racine/light/theme";
 import type { TypeColors } from "./theme.colors.flow.js";
-import type { TypeFontFamilyString } from "../themes/light/theme";
+import type { TypeFontFamilyString } from "../themes/racine/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 theme from "../themes/light/theme";
+import { racineLightTheme } from "../themes/racine";
 import { transparentize } from "polished";
 
 export const svgToDataURL = (svgStr: string) => {
@@ -26,9 +26,13 @@ export const visuallyHidden = css`
 `;
 
 export const focusRing = css`
-  box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},
+  box-shadow: 0 0 0 1px
+      ${racineLightTheme.colors.button.primary.background.base},
     0 0px 0px 4px
-      ${transparentize(0.7, theme.colors.button.primary.background.base)};
+      ${transparentize(
+        0.7,
+        racineLightTheme.colors.button.primary.background.base
+      )};
   outline: none;
 
   &::-moz-focus-inner {
@@ -37,10 +41,10 @@ export const focusRing = css`
 `;
 
 export const pill = css`
-  min-width: ${theme.space[600]};
-  min-height: ${theme.space[600]};
-  padding: ${theme.space[300]} ${theme.space[350]};
-  border-radius: ${theme.radii.pill};
+  min-width: ${racineLightTheme.space[600]};
+  min-height: ${racineLightTheme.space[600]};
+  padding: ${racineLightTheme.space[300]} ${racineLightTheme.space[350]};
+  border-radius: ${racineLightTheme.radii.pill};
 `;
 
 export const disabled = css`

package/__flow__/utils/responsiveProps/index.js

@@ -1,5 +1,5 @@
 // @flow
-import theme from "../../themes/light/theme";
+import theme from "../../themes/racine/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/light/theme"));
+var _theme = _interopRequireDefault(require("../themes/racine/light/theme"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/commonjs/index.js

@@ -8,8 +8,6 @@ var _exportNames = {
   useSelect: true,
   useMultiselect: true,
   useTextContent: true,
-  theme: true,
-  darkTheme: true,
   Icon: true,
   Alert: true,
   Banner: true,
@@ -70,7 +68,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.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;
 
 var _systemProps = require("./systemProps");
 
@@ -93,13 +91,14 @@ exports.useSelect = _hooks.useSelect;
 exports.useMultiselect = _hooks.useMultiselect;
 exports.useTextContent = _hooks.useTextContent;
 
-var _theme = _interopRequireDefault(require("./themes/light/theme"));
+var _racine = require("./themes/racine");
 
-exports.theme = _theme.default;
-
-var _theme2 = _interopRequireDefault(require("./themes/dark/theme"));
-
-exports.darkTheme = _theme2.default;
+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];
+});
 
 var _Icon = _interopRequireDefault(require("./Icon"));
 

package/commonjs/themes/{dark → racine/dark}/theme.js

@@ -15,7 +15,7 @@ var _decorativePalettes = require("./decorative-palettes");
 
 var _polished = require("polished");
 
-var _interact = _interopRequireDefault(require("../utils/interact"));
+var _interact = _interopRequireDefault(require("../../utils/interact"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/commonjs/themes/racine/index.js

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

package/commonjs/themes/{light → racine/light}/theme.js

@@ -25,7 +25,7 @@ var _seedsBorder = _interopRequireDefault(require("@sproutsocial/seeds-border"))
 
 var _polished = require("polished");
 
-var _interact = _interopRequireDefault(require("../utils/interact"));
+var _interact = _interopRequireDefault(require("../../utils/interact"));
 
 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/light/literal-colors"));
+var _literalColors = _interopRequireDefault(require("../themes/racine/light/literal-colors"));
 
-var _datavizPalette = require("../themes/light/dataviz-palette");
+var _datavizPalette = require("../themes/racine/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/light/theme");
+var _theme = require("../themes/racine/light/theme");

package/commonjs/utils/mixins.js

@@ -5,12 +5,10 @@ exports.disabled = exports.pill = exports.focusRing = exports.visuallyHidden = e
 
 var _styledComponents = require("styled-components");
 
-var _theme = _interopRequireDefault(require("../themes/light/theme"));
+var _racine = require("../themes/racine");
 
 var _polished = require("polished");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var svgToDataURL = function svgToDataURL(svgStr) {
   var encoded = encodeURIComponent(svgStr).replace(/'/g, "%27").replace(/"/g, "%22");
   var header = "data:image/svg+xml,";
@@ -21,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;}"], _theme.default.colors.button.primary.background.base, (0, _polished.transparentize)(0.7, _theme.default.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;}"], _racine.racineLightTheme.colors.button.primary.background.base, (0, _polished.transparentize)(0.7, _racine.racineLightTheme.colors.button.primary.background.base));
 exports.focusRing = focusRing;
-var pill = (0, _styledComponents.css)(["min-width:", ";min-height:", ";padding:", " ", ";border-radius:", ";"], _theme.default.space[600], _theme.default.space[600], _theme.default.space[300], _theme.default.space[350], _theme.default.radii.pill);
+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);
 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/light/theme"));
+var _theme = _interopRequireDefault(require("../../themes/racine/light/theme"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 

package/dist/themes/{dark → racine/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/dark/dark.scss";
+@import "../../../dist/themes/racine/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/{light → racine/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/light/light.scss";
+@import "../../../dist/themes/racine/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/light/theme";
+import theme from "../themes/racine/light/theme";
 
 var ThemeProvider = function ThemeProvider(props) {
   return /*#__PURE__*/React.createElement(BaseThemeProvider, _extends({}, props, {

package/lib/index.js

@@ -1,8 +1,7 @@
 export * from "./systemProps";
 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 * from "./themes/racine";
 export { default as Icon } from "./Icon"; // DEPRECATED: Alert has been renamed to Banner
 
 export { default as Alert } from "./Banner";

package/lib/themes/{dark → racine/dark}/theme.js

@@ -6,7 +6,7 @@ import lightTheme from "../light/theme";
 import { datavizPalette } from "./dataviz-palette";
 import { green, blue, purple, yellow, orange, red, neutral } from "./decorative-palettes";
 import { transparentize } from "polished";
-import interact from "../utils/interact";
+import interact from "../../utils/interact";
 var MODE = "dark";
 export var shadows = {
   low: DEPTH.ELEVATION_LEVEL_100 + " " + COLORS.COLOR_NEUTRAL_1100 + "FF",

package/lib/themes/racine/index.js

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

package/lib/themes/{light → racine/light}/theme.js

@@ -11,7 +11,7 @@ import DEPTH from "@sproutsocial/seeds-depth";
 import MOTION from "@sproutsocial/seeds-motion";
 import BORDER from "@sproutsocial/seeds-border";
 import { transparentize } from "polished";
-import interact from "../utils/interact";
+import interact from "../../utils/interact";
 export var breakpoints = ["900px", "1200px", "1500px", "1800px"];
 var MODE = "light"; // If you are making changes to the colors in the theme file tag the Design Systems team on your PR! Thank you!!
 

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

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

package/lib/types/theme.flow.js

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

package/lib/utils/mixins.js

@@ -1,5 +1,5 @@
 import { css } from "styled-components";
-import theme from "../themes/light/theme";
+import { racineLightTheme } from "../themes/racine";
 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;}"], theme.colors.button.primary.background.base, transparentize(0.7, theme.colors.button.primary.background.base));
-export var pill = css(["min-width:", ";min-height:", ";padding:", " ", ";border-radius:", ";"], theme.space[600], theme.space[600], theme.space[300], theme.space[350], theme.radii.pill);
+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 disabled = css(["opacity:0.4;pointer-events:none;"]);

package/lib/utils/responsiveProps/index.js

@@ -1,4 +1,4 @@
-import theme from "../../themes/light/theme";
+import theme from "../../themes/racine/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.0",
+  "version": "11.2.2-beta.0",
   "license": "MIT",
   "files": [
     "__flow__",