@sproutsocial/racine 11.2.2-beta.0 → 11.2.2-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/__flow__/Box/index.stories.js +1 -1
  2. package/__flow__/Stack/index.js +1 -1
  3. package/__flow__/ThemeProvider/index.js +2 -2
  4. package/__flow__/index.js +1 -1
  5. package/__flow__/systemProps/typography.js +1 -1
  6. package/__flow__/themes/{racine → baseTheme}/dark/_themed.scss +1 -1
  7. package/__flow__/themes/{racine → baseTheme}/dark/dataviz-palette.js +0 -0
  8. package/__flow__/themes/{racine → baseTheme}/dark/decorative-palettes.js +0 -0
  9. package/__flow__/themes/{racine → baseTheme}/dark/theme.js +0 -0
  10. package/__flow__/themes/baseTheme/index.js +2 -0
  11. package/__flow__/themes/{racine → baseTheme}/light/_themed.scss +1 -1
  12. package/__flow__/themes/{racine → baseTheme}/light/dataviz-palette.js +0 -0
  13. package/__flow__/themes/{racine → baseTheme}/light/decorative-palettes.js +0 -0
  14. package/__flow__/themes/{racine → baseTheme}/light/literal-colors.js +0 -0
  15. package/__flow__/themes/{racine → baseTheme}/light/theme.js +0 -0
  16. package/__flow__/types/theme.colors.flow.js +2 -2
  17. package/__flow__/types/theme.flow.js +2 -2
  18. package/__flow__/utils/mixins.js +7 -8
  19. package/__flow__/utils/responsiveProps/index.js +1 -1
  20. package/commonjs/ThemeProvider/index.js +1 -1
  21. package/commonjs/index.js +4 -4
  22. package/commonjs/themes/{racine → baseTheme}/dark/dataviz-palette.js +0 -0
  23. package/commonjs/themes/{racine → baseTheme}/dark/decorative-palettes.js +0 -0
  24. package/commonjs/themes/{racine → baseTheme}/dark/theme.js +0 -0
  25. package/commonjs/themes/{racine → baseTheme}/index.js +3 -3
  26. package/commonjs/themes/{racine → baseTheme}/light/dataviz-palette.js +0 -0
  27. package/commonjs/themes/{racine → baseTheme}/light/decorative-palettes.js +0 -0
  28. package/commonjs/themes/{racine → baseTheme}/light/literal-colors.js +0 -0
  29. package/commonjs/themes/{racine → baseTheme}/light/theme.js +0 -0
  30. package/commonjs/types/theme.colors.flow.js +2 -2
  31. package/commonjs/types/theme.flow.js +1 -1
  32. package/commonjs/utils/mixins.js +3 -3
  33. package/commonjs/utils/responsiveProps/index.js +1 -1
  34. package/dist/themes/{racine → baseTheme}/dark/_themed.scss +1 -1
  35. package/dist/themes/{racine → baseTheme}/dark/dark.scss +0 -0
  36. package/dist/themes/{racine → baseTheme}/light/_themed.scss +1 -1
  37. package/dist/themes/{racine → baseTheme}/light/light.scss +0 -0
  38. package/lib/ThemeProvider/index.js +1 -1
  39. package/lib/index.js +1 -1
  40. package/lib/themes/{racine → baseTheme}/dark/dataviz-palette.js +0 -0
  41. package/lib/themes/{racine → baseTheme}/dark/decorative-palettes.js +0 -0
  42. package/lib/themes/{racine → baseTheme}/dark/theme.js +0 -0
  43. package/lib/themes/baseTheme/index.js +2 -0
  44. package/lib/themes/{racine → baseTheme}/light/dataviz-palette.js +0 -0
  45. package/lib/themes/{racine → baseTheme}/light/decorative-palettes.js +0 -0
  46. package/lib/themes/{racine → baseTheme}/light/literal-colors.js +0 -0
  47. package/lib/themes/{racine → baseTheme}/light/theme.js +0 -0
  48. package/lib/types/theme.colors.flow.js +2 -2
  49. package/lib/types/theme.flow.js +1 -1
  50. package/lib/utils/mixins.js +3 -3
  51. package/lib/utils/responsiveProps/index.js +1 -1
  52. package/package.json +1 -1
  53. package/__flow__/themes/racine/index.js +0 -2
  54. package/lib/themes/racine/index.js +0 -2
@@ -3,7 +3,7 @@ import { css } from "styled-components";
3
3
  import { text } from "@storybook/addon-knobs";
4
4
  import Box from "./index";
5
5
  import useMeasure from "use-measure";
6
- import theme from "../themes/racine/light/theme";
6
+ import theme from "../themes/baseTheme/light/theme";
7
7
 
8
8
  export default {
9
9
  title: "Box",
@@ -3,7 +3,7 @@ import * as React from "react";
3
3
  import { Children } from "react";
4
4
  import Box from "../Box";
5
5
  import { normalizeResponsiveProp } from "../utils/responsiveProps";
6
- import type { TypeSpaceLiterals } from "../themes/racine/light/theme";
6
+ import type { TypeSpaceLiterals } from "../themes/baseTheme/light/theme";
7
7
  import type { TypeResponsive } from "../types/system-props.flow";
8
8
 
9
9
  type TypeDirection = "vertical" | "horizontal";
@@ -1,9 +1,9 @@
1
1
  // @flow strict-local
2
2
  import * as React from "react";
3
3
  import { ThemeProvider as BaseThemeProvider } from "styled-components";
4
- import theme from "../themes/racine/light/theme";
4
+ import theme from "../themes/baseTheme/light/theme";
5
5
 
6
- import typeof { default as TypeTheme } from "../themes/racine/light/theme";
6
+ import typeof { default as TypeTheme } from "../themes/baseTheme/light/theme";
7
7
 
8
8
  type TypeProps = $ReadOnly<{|
9
9
  theme?: TypeTheme,
package/__flow__/index.js CHANGED
@@ -4,7 +4,7 @@ export type { TypeTheme } from "./types/theme.flow";
4
4
  export * from "./systemProps";
5
5
  export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
6
6
  export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
7
- export * from "./themes/racine";
7
+ export * from "./themes/baseTheme";
8
8
  export { default as Icon } from "./Icon";
9
9
  // DEPRECATED: Alert has been renamed to Banner
10
10
  export { default as Alert } from "./Banner";
@@ -11,7 +11,7 @@ import type {
11
11
  TextAlignProperty,
12
12
  } from "csstype";
13
13
 
14
- import typeof { fontWeights as TypeofFontWeights } from "../themes/racine/light/theme";
14
+ import typeof { fontWeights as TypeofFontWeights } from "../themes/baseTheme/light/theme";
15
15
  import type {
16
16
  StyledSystemStyleFn,
17
17
  TypeResponsiveBaseSystemProp,
@@ -3,7 +3,7 @@
3
3
 
4
4
  // SET-UP
5
5
  // This file is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
6
- @import "../../../dist/themes/racine/dark/dark.scss";
6
+ @import "../../../../dist/themes/baseTheme/dark/dark.scss";
7
7
 
8
8
  // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
9
9
  // so we need to map-get "default" to access it.
@@ -0,0 +1,2 @@
1
+ export { default as baseLightTheme } from "./light/theme";
2
+ export { default as baseDarkTheme } from "./dark/theme";
@@ -3,7 +3,7 @@
3
3
 
4
4
  // SET-UP
5
5
  // This file is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
6
- @import "../../../dist/themes/racine/light/light.scss";
6
+ @import "../../../../dist/themes/baseTheme/light/light.scss";
7
7
 
8
8
  // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
9
9
  // so we need to map-get "default" to access it.
@@ -1,7 +1,7 @@
1
1
  // @flow strict-local
2
2
 
3
- import literalColors from "../themes/racine/light/literal-colors";
4
- import { datavizPalette } from "../themes/racine/light/dataviz-palette";
3
+ import literalColors from "../themes/baseTheme/light/literal-colors";
4
+ import { datavizPalette } from "../themes/baseTheme/light/dataviz-palette";
5
5
 
6
6
  type TypeAppColors = {|
7
7
  app: {
@@ -10,9 +10,9 @@ import {
10
10
  space,
11
11
  easing,
12
12
  duration,
13
- } from "../themes/racine/light/theme";
13
+ } from "../themes/baseTheme/light/theme";
14
14
  import type { TypeColors } from "./theme.colors.flow.js";
15
- import type { TypeFontFamilyString } from "../themes/racine/light/theme";
15
+ import type { TypeFontFamilyString } from "../themes/baseTheme/light/theme";
16
16
 
17
17
  export type TypeBreakpoint = typeof breakpoints;
18
18
  export type TypeTypography = typeof typography;
@@ -1,6 +1,6 @@
1
1
  // @flow strict-local
2
2
  import { css } from "styled-components";
3
- import { racineLightTheme } from "../themes/racine";
3
+ import { baseLightTheme } from "../themes/baseTheme";
4
4
  import { transparentize } from "polished";
5
5
 
6
6
  export const svgToDataURL = (svgStr: string) => {
@@ -26,12 +26,11 @@ export const visuallyHidden = css`
26
26
  `;
27
27
 
28
28
  export const focusRing = css`
29
- box-shadow: 0 0 0 1px
30
- ${racineLightTheme.colors.button.primary.background.base},
29
+ box-shadow: 0 0 0 1px ${baseLightTheme.colors.button.primary.background.base},
31
30
  0 0px 0px 4px
32
31
  ${transparentize(
33
32
  0.7,
34
- racineLightTheme.colors.button.primary.background.base
33
+ baseLightTheme.colors.button.primary.background.base
35
34
  )};
36
35
  outline: none;
37
36
 
@@ -41,10 +40,10 @@ export const focusRing = css`
41
40
  `;
42
41
 
43
42
  export const pill = css`
44
- min-width: ${racineLightTheme.space[600]};
45
- min-height: ${racineLightTheme.space[600]};
46
- padding: ${racineLightTheme.space[300]} ${racineLightTheme.space[350]};
47
- border-radius: ${racineLightTheme.radii.pill};
43
+ min-width: ${baseLightTheme.space[600]};
44
+ min-height: ${baseLightTheme.space[600]};
45
+ padding: ${baseLightTheme.space[300]} ${baseLightTheme.space[350]};
46
+ border-radius: ${baseLightTheme.radii.pill};
48
47
  `;
49
48
 
50
49
  export const disabled = css`
@@ -1,5 +1,5 @@
1
1
  // @flow
2
- import theme from "../../themes/racine/light/theme";
2
+ import theme from "../../themes/baseTheme/light/theme";
3
3
 
4
4
  import type { TypeResponsive } from "../../types/system-props.flow";
5
5
 
@@ -7,7 +7,7 @@ var React = _interopRequireWildcard(require("react"));
7
7
 
8
8
  var _styledComponents = require("styled-components");
9
9
 
10
- var _theme = _interopRequireDefault(require("../themes/racine/light/theme"));
10
+ var _theme = _interopRequireDefault(require("../themes/baseTheme/light/theme"));
11
11
 
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
13
 
package/commonjs/index.js CHANGED
@@ -91,13 +91,13 @@ exports.useSelect = _hooks.useSelect;
91
91
  exports.useMultiselect = _hooks.useMultiselect;
92
92
  exports.useTextContent = _hooks.useTextContent;
93
93
 
94
- var _racine = require("./themes/racine");
94
+ var _baseTheme = require("./themes/baseTheme");
95
95
 
96
- Object.keys(_racine).forEach(function (key) {
96
+ Object.keys(_baseTheme).forEach(function (key) {
97
97
  if (key === "default" || key === "__esModule") return;
98
98
  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
99
- if (key in exports && exports[key] === _racine[key]) return;
100
- exports[key] = _racine[key];
99
+ if (key in exports && exports[key] === _baseTheme[key]) return;
100
+ exports[key] = _baseTheme[key];
101
101
  });
102
102
 
103
103
  var _Icon = _interopRequireDefault(require("./Icon"));
@@ -1,14 +1,14 @@
1
1
  "use strict";
2
2
 
3
3
  exports.__esModule = true;
4
- exports.racineDarkTheme = exports.racineLightTheme = void 0;
4
+ exports.baseDarkTheme = exports.baseLightTheme = void 0;
5
5
 
6
6
  var _theme = _interopRequireDefault(require("./light/theme"));
7
7
 
8
- exports.racineLightTheme = _theme.default;
8
+ exports.baseLightTheme = _theme.default;
9
9
 
10
10
  var _theme2 = _interopRequireDefault(require("./dark/theme"));
11
11
 
12
- exports.racineDarkTheme = _theme2.default;
12
+ exports.baseDarkTheme = _theme2.default;
13
13
 
14
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
 
3
- var _literalColors = _interopRequireDefault(require("../themes/racine/light/literal-colors"));
3
+ var _literalColors = _interopRequireDefault(require("../themes/baseTheme/light/literal-colors"));
4
4
 
5
- var _datavizPalette = require("../themes/racine/light/dataviz-palette");
5
+ var _datavizPalette = require("../themes/baseTheme/light/dataviz-palette");
6
6
 
7
7
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -1,3 +1,3 @@
1
1
  "use strict";
2
2
 
3
- var _theme = require("../themes/racine/light/theme");
3
+ var _theme = require("../themes/baseTheme/light/theme");
@@ -5,7 +5,7 @@ exports.disabled = exports.pill = exports.focusRing = exports.visuallyHidden = e
5
5
 
6
6
  var _styledComponents = require("styled-components");
7
7
 
8
- var _racine = require("../themes/racine");
8
+ var _baseTheme = require("../themes/baseTheme");
9
9
 
10
10
  var _polished = require("polished");
11
11
 
@@ -19,9 +19,9 @@ var svgToDataURL = function svgToDataURL(svgStr) {
19
19
  exports.svgToDataURL = svgToDataURL;
20
20
  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;"]);
21
21
  exports.visuallyHidden = visuallyHidden;
22
- 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));
22
+ 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));
23
23
  exports.focusRing = focusRing;
24
- 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);
24
+ 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);
25
25
  exports.pill = pill;
26
26
  var disabled = (0, _styledComponents.css)(["opacity:0.4;pointer-events:none;"]);
27
27
  exports.disabled = disabled;
@@ -3,7 +3,7 @@
3
3
  exports.__esModule = true;
4
4
  exports.normalizeResponsiveProp = void 0;
5
5
 
6
- var _theme = _interopRequireDefault(require("../../themes/racine/light/theme"));
6
+ var _theme = _interopRequireDefault(require("../../themes/baseTheme/light/theme"));
7
7
 
8
8
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
9
9
 
@@ -3,7 +3,7 @@
3
3
 
4
4
  // SET-UP
5
5
  // This file is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
6
- @import "../../../dist/themes/racine/dark/dark.scss";
6
+ @import "../../../../dist/themes/baseTheme/dark/dark.scss";
7
7
 
8
8
  // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
9
9
  // so we need to map-get "default" to access it.
File without changes
@@ -3,7 +3,7 @@
3
3
 
4
4
  // SET-UP
5
5
  // This file is auto-generated based on the JS theme file, ensuring our SCSS theme variables stay in sync.
6
- @import "../../../dist/themes/racine/light/light.scss";
6
+ @import "../../../../dist/themes/baseTheme/light/light.scss";
7
7
 
8
8
  // In the JS theme file, the theme object is exported as "default" (i.e., using "export default"),
9
9
  // so we need to map-get "default" to access it.
@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
2
2
 
3
3
  import * as React from "react";
4
4
  import { ThemeProvider as BaseThemeProvider } from "styled-components";
5
- import theme from "../themes/racine/light/theme";
5
+ import theme from "../themes/baseTheme/light/theme";
6
6
 
7
7
  var ThemeProvider = function ThemeProvider(props) {
8
8
  return /*#__PURE__*/React.createElement(BaseThemeProvider, _extends({}, props, {
package/lib/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  export * from "./systemProps";
2
2
  export { visuallyHidden, focusRing, disabled } from "./utils/mixins";
3
3
  export { useSelect, useMultiselect, useTextContent } from "./utils/hooks";
4
- export * from "./themes/racine";
4
+ export * from "./themes/baseTheme";
5
5
  export { default as Icon } from "./Icon"; // DEPRECATED: Alert has been renamed to Banner
6
6
 
7
7
  export { default as Alert } from "./Banner";
File without changes
@@ -0,0 +1,2 @@
1
+ export { default as baseLightTheme } from "./light/theme";
2
+ export { default as baseDarkTheme } from "./dark/theme";
File without changes
@@ -1,2 +1,2 @@
1
- import literalColors from "../themes/racine/light/literal-colors";
2
- import { datavizPalette } from "../themes/racine/light/dataviz-palette";
1
+ import literalColors from "../themes/baseTheme/light/literal-colors";
2
+ import { datavizPalette } from "../themes/baseTheme/light/dataviz-palette";
@@ -1 +1 @@
1
- import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from "../themes/racine/light/theme";
1
+ import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from "../themes/baseTheme/light/theme";
@@ -1,5 +1,5 @@
1
1
  import { css } from "styled-components";
2
- import { racineLightTheme } from "../themes/racine";
2
+ import { baseLightTheme } from "../themes/baseTheme";
3
3
  import { transparentize } from "polished";
4
4
  export var svgToDataURL = function svgToDataURL(svgStr) {
5
5
  var encoded = encodeURIComponent(svgStr).replace(/'/g, "%27").replace(/"/g, "%22");
@@ -8,6 +8,6 @@ export var svgToDataURL = function svgToDataURL(svgStr) {
8
8
  return dataUrl;
9
9
  };
10
10
  export var visuallyHidden = css(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;"]);
11
- 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));
12
- 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);
11
+ 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));
12
+ 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);
13
13
  export var disabled = css(["opacity:0.4;pointer-events:none;"]);
@@ -1,4 +1,4 @@
1
- import theme from "../../themes/racine/light/theme";
1
+ import theme from "../../themes/baseTheme/light/theme";
2
2
  var breakpoints = theme.breakpoints;
3
3
  var LENGTH = breakpoints.length + 1;
4
4
  export var normalizeResponsiveProp = function normalizeResponsiveProp(value) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sproutsocial/racine",
3
- "version": "11.2.2-beta.0",
3
+ "version": "11.2.2-beta.3",
4
4
  "license": "MIT",
5
5
  "files": [
6
6
  "__flow__",
@@ -1,2 +0,0 @@
1
- export { default as racineLightTheme } from "./light/theme";
2
- export { default as racineDarkTheme } from "./dark/theme";
@@ -1,2 +0,0 @@
1
- export { default as racineLightTheme } from "./light/theme";
2
- export { default as racineDarkTheme } from "./dark/theme";