@sproutsocial/racine 11.2.2-beta.1 → 11.2.2-beta.2
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.
- package/__flow__/Box/index.stories.js +1 -1
- package/__flow__/Stack/index.js +1 -1
- package/__flow__/ThemeProvider/index.js +2 -2
- package/__flow__/index.js +2 -1
- package/__flow__/systemProps/typography.js +1 -1
- package/__flow__/themes/{racine → baseTheme}/dark/_themed.scss +1 -1
- package/__flow__/themes/{racine → baseTheme}/dark/dataviz-palette.js +0 -0
- package/__flow__/themes/{racine → baseTheme}/dark/decorative-palettes.js +0 -0
- package/__flow__/themes/{racine → baseTheme}/dark/theme.js +0 -0
- package/__flow__/themes/{racine → baseTheme}/index.js +0 -0
- package/__flow__/themes/{racine → baseTheme}/light/_themed.scss +1 -1
- package/__flow__/themes/{racine → baseTheme}/light/dataviz-palette.js +0 -0
- package/__flow__/themes/{racine → baseTheme}/light/decorative-palettes.js +0 -0
- package/__flow__/themes/{racine → baseTheme}/light/literal-colors.js +0 -0
- package/__flow__/themes/{racine → baseTheme}/light/theme.js +0 -0
- package/__flow__/types/theme.colors.flow.js +2 -2
- package/__flow__/types/theme.flow.js +2 -2
- package/__flow__/utils/mixins.js +1 -1
- package/__flow__/utils/responsiveProps/index.js +1 -1
- package/commonjs/ThemeProvider/index.js +1 -1
- package/commonjs/index.js +9 -8
- package/commonjs/themes/{racine → baseTheme}/dark/dataviz-palette.js +0 -0
- package/commonjs/themes/{racine → baseTheme}/dark/decorative-palettes.js +0 -0
- package/commonjs/themes/{racine → baseTheme}/dark/theme.js +0 -0
- package/commonjs/themes/{racine → baseTheme}/index.js +0 -0
- package/commonjs/themes/{racine → baseTheme}/light/dataviz-palette.js +0 -0
- package/commonjs/themes/{racine → baseTheme}/light/decorative-palettes.js +0 -0
- package/commonjs/themes/{racine → baseTheme}/light/literal-colors.js +0 -0
- package/commonjs/themes/{racine → baseTheme}/light/theme.js +0 -0
- package/commonjs/types/theme.colors.flow.js +2 -2
- package/commonjs/types/theme.flow.js +1 -1
- package/commonjs/utils/mixins.js +3 -3
- package/commonjs/utils/responsiveProps/index.js +1 -1
- package/dist/themes/{racine → baseTheme}/dark/_themed.scss +1 -1
- package/dist/themes/{racine → baseTheme}/dark/dark.scss +0 -0
- package/dist/themes/{racine → baseTheme}/light/_themed.scss +1 -1
- package/dist/themes/{racine → baseTheme}/light/light.scss +0 -0
- package/lib/ThemeProvider/index.js +1 -1
- package/lib/index.js +2 -1
- package/lib/themes/{racine → baseTheme}/dark/dataviz-palette.js +0 -0
- package/lib/themes/{racine → baseTheme}/dark/decorative-palettes.js +0 -0
- package/lib/themes/{racine → baseTheme}/dark/theme.js +0 -0
- package/lib/themes/{racine → baseTheme}/index.js +0 -0
- package/lib/themes/{racine → baseTheme}/light/dataviz-palette.js +0 -0
- package/lib/themes/{racine → baseTheme}/light/decorative-palettes.js +0 -0
- package/lib/themes/{racine → baseTheme}/light/literal-colors.js +0 -0
- package/lib/themes/{racine → baseTheme}/light/theme.js +0 -0
- package/lib/types/theme.colors.flow.js +2 -2
- package/lib/types/theme.flow.js +1 -1
- package/lib/utils/mixins.js +1 -1
- package/lib/utils/responsiveProps/index.js +1 -1
- package/package.json +1 -1
|
@@ -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/
|
|
6
|
+
import theme from "../themes/baseTheme/light/theme";
|
|
7
7
|
|
|
8
8
|
export default {
|
|
9
9
|
title: "Box",
|
package/__flow__/Stack/index.js
CHANGED
|
@@ -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/
|
|
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/
|
|
4
|
+
import theme from "../themes/baseTheme/light/theme";
|
|
5
5
|
|
|
6
|
-
import typeof { default as TypeTheme } from "../themes/
|
|
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,8 @@ 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
|
|
7
|
+
export { default as racineLightTheme } from "./themes/baseTheme/light/theme";
|
|
8
|
+
export { default as racineDarkTheme } from "./themes/baseTheme/dark/theme";
|
|
8
9
|
export { default as Icon } from "./Icon";
|
|
9
10
|
// DEPRECATED: Alert has been renamed to Banner
|
|
10
11
|
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/
|
|
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/
|
|
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
|
|
File without changes
|
|
File without changes
|
|
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/
|
|
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.
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// @flow strict-local
|
|
2
2
|
|
|
3
|
-
import literalColors from "../themes/
|
|
4
|
-
import { datavizPalette } from "../themes/
|
|
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/
|
|
13
|
+
} from "../themes/baseTheme/light/theme";
|
|
14
14
|
import type { TypeColors } from "./theme.colors.flow.js";
|
|
15
|
-
import type { TypeFontFamilyString } from "../themes/
|
|
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;
|
package/__flow__/utils/mixins.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// @flow strict-local
|
|
2
2
|
import { css } from "styled-components";
|
|
3
|
-
import { racineLightTheme } from "../themes/
|
|
3
|
+
import { racineLightTheme } from "../themes/baseTheme";
|
|
4
4
|
import { transparentize } from "polished";
|
|
5
5
|
|
|
6
6
|
export const svgToDataURL = (svgStr: string) => {
|
|
@@ -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/
|
|
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
|
@@ -8,6 +8,8 @@ var _exportNames = {
|
|
|
8
8
|
useSelect: true,
|
|
9
9
|
useMultiselect: true,
|
|
10
10
|
useTextContent: true,
|
|
11
|
+
racineLightTheme: true,
|
|
12
|
+
racineDarkTheme: true,
|
|
11
13
|
Icon: true,
|
|
12
14
|
Alert: true,
|
|
13
15
|
Banner: true,
|
|
@@ -68,7 +70,7 @@ var _exportNames = {
|
|
|
68
70
|
DateRangePicker: true,
|
|
69
71
|
VisuallyHidden: true
|
|
70
72
|
};
|
|
71
|
-
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;
|
|
73
|
+
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.racineDarkTheme = exports.racineLightTheme = exports.useTextContent = exports.useMultiselect = exports.useSelect = exports.disabled = exports.focusRing = exports.visuallyHidden = void 0;
|
|
72
74
|
|
|
73
75
|
var _systemProps = require("./systemProps");
|
|
74
76
|
|
|
@@ -91,14 +93,13 @@ exports.useSelect = _hooks.useSelect;
|
|
|
91
93
|
exports.useMultiselect = _hooks.useMultiselect;
|
|
92
94
|
exports.useTextContent = _hooks.useTextContent;
|
|
93
95
|
|
|
94
|
-
var
|
|
96
|
+
var _theme = _interopRequireDefault(require("./themes/baseTheme/light/theme"));
|
|
95
97
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
});
|
|
98
|
+
exports.racineLightTheme = _theme.default;
|
|
99
|
+
|
|
100
|
+
var _theme2 = _interopRequireDefault(require("./themes/baseTheme/dark/theme"));
|
|
101
|
+
|
|
102
|
+
exports.racineDarkTheme = _theme2.default;
|
|
102
103
|
|
|
103
104
|
var _Icon = _interopRequireDefault(require("./Icon"));
|
|
104
105
|
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _literalColors = _interopRequireDefault(require("../themes/
|
|
3
|
+
var _literalColors = _interopRequireDefault(require("../themes/baseTheme/light/literal-colors"));
|
|
4
4
|
|
|
5
|
-
var _datavizPalette = require("../themes/
|
|
5
|
+
var _datavizPalette = require("../themes/baseTheme/light/dataviz-palette");
|
|
6
6
|
|
|
7
7
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
package/commonjs/utils/mixins.js
CHANGED
|
@@ -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
|
|
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;}"],
|
|
22
|
+
var focusRing = (0, _styledComponents.css)(["box-shadow:0 0 0 1px ", ",0 0px 0px 4px ", ";outline:none;&::-moz-focus-inner{border:0;}"], _baseTheme.racineLightTheme.colors.button.primary.background.base, (0, _polished.transparentize)(0.7, _baseTheme.racineLightTheme.colors.button.primary.background.base));
|
|
23
23
|
exports.focusRing = focusRing;
|
|
24
|
-
var pill = (0, _styledComponents.css)(["min-width:", ";min-height:", ";padding:", " ", ";border-radius:", ";"],
|
|
24
|
+
var pill = (0, _styledComponents.css)(["min-width:", ";min-height:", ";padding:", " ", ";border-radius:", ";"], _baseTheme.racineLightTheme.space[600], _baseTheme.racineLightTheme.space[600], _baseTheme.racineLightTheme.space[300], _baseTheme.racineLightTheme.space[350], _baseTheme.racineLightTheme.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/
|
|
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/
|
|
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/
|
|
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.
|
|
File without changes
|
|
@@ -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/
|
|
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,8 @@
|
|
|
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
|
|
4
|
+
export { default as racineLightTheme } from "./themes/baseTheme/light/theme";
|
|
5
|
+
export { default as racineDarkTheme } from "./themes/baseTheme/dark/theme";
|
|
5
6
|
export { default as Icon } from "./Icon"; // DEPRECATED: Alert has been renamed to Banner
|
|
6
7
|
|
|
7
8
|
export { default as Alert } from "./Banner";
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import literalColors from "../themes/
|
|
2
|
-
import { datavizPalette } from "../themes/
|
|
1
|
+
import literalColors from "../themes/baseTheme/light/literal-colors";
|
|
2
|
+
import { datavizPalette } from "../themes/baseTheme/light/dataviz-palette";
|
package/lib/types/theme.flow.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from "../themes/
|
|
1
|
+
import { breakpoints, typography, fontWeights, radii, borders, borderWidths, shadows, space, easing, duration } from "../themes/baseTheme/light/theme";
|
package/lib/utils/mixins.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { css } from "styled-components";
|
|
2
|
-
import { racineLightTheme } from "../themes/
|
|
2
|
+
import { racineLightTheme } 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");
|