carbon-react 131.1.0 → 132.0.0
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/esm/__spec_helper__/test-utils.d.ts +1 -2
- package/esm/__spec_helper__/test-utils.js +1 -3
- package/esm/components/carbon-provider/carbon-provider.component.d.ts +1 -1
- package/esm/components/carbon-provider/carbon-provider.component.js +2 -2
- package/esm/style/design-tokens/debug-theme.util.js +2 -2
- package/esm/style/themes/index.d.ts +1 -4
- package/esm/style/themes/index.js +2 -5
- package/esm/style/themes/sage/index.d.ts +2 -1
- package/esm/style/themes/sage/index.js +9 -2
- package/esm/style/utils/color.js +1 -1
- package/lib/__spec_helper__/test-utils.d.ts +1 -2
- package/lib/__spec_helper__/test-utils.js +1 -3
- package/lib/components/carbon-provider/carbon-provider.component.d.ts +1 -1
- package/lib/components/carbon-provider/carbon-provider.component.js +1 -1
- package/lib/style/design-tokens/debug-theme.util.js +2 -2
- package/lib/style/themes/index.d.ts +1 -4
- package/lib/style/themes/index.js +1 -17
- package/lib/style/themes/sage/index.d.ts +2 -1
- package/lib/style/themes/sage/index.js +9 -2
- package/lib/style/utils/color.js +1 -1
- package/package.json +1 -1
- package/esm/style/themes/aegean/aegean-theme.config.d.ts +0 -4
- package/esm/style/themes/aegean/aegean-theme.config.js +0 -29
- package/esm/style/themes/aegean/index.d.ts +0 -2
- package/esm/style/themes/aegean/index.js +0 -3
- package/esm/style/themes/medium/index.d.ts +0 -2
- package/esm/style/themes/medium/index.js +0 -8
- package/esm/style/themes/mint/index.d.ts +0 -2
- package/esm/style/themes/mint/index.js +0 -3
- package/esm/style/themes/mint/mint-theme.config.d.ts +0 -4
- package/esm/style/themes/mint/mint-theme.config.js +0 -29
- package/esm/style/themes/small/index.d.ts +0 -2
- package/esm/style/themes/small/index.js +0 -8
- package/lib/style/themes/aegean/aegean-theme.config.d.ts +0 -4
- package/lib/style/themes/aegean/aegean-theme.config.js +0 -36
- package/lib/style/themes/aegean/index.d.ts +0 -2
- package/lib/style/themes/aegean/index.js +0 -10
- package/lib/style/themes/aegean/package.json +0 -6
- package/lib/style/themes/medium/index.d.ts +0 -2
- package/lib/style/themes/medium/index.js +0 -14
- package/lib/style/themes/medium/package.json +0 -6
- package/lib/style/themes/mint/index.d.ts +0 -2
- package/lib/style/themes/mint/index.js +0 -10
- package/lib/style/themes/mint/mint-theme.config.d.ts +0 -4
- package/lib/style/themes/mint/mint-theme.config.js +0 -36
- package/lib/style/themes/mint/package.json +0 -6
- package/lib/style/themes/small/index.d.ts +0 -2
- package/lib/style/themes/small/index.js +0 -14
- package/lib/style/themes/small/package.json +0 -6
|
@@ -23,7 +23,6 @@ declare const assertHoverTraversal: ({ num, nonSelectables, }: {
|
|
|
23
23
|
num: number;
|
|
24
24
|
nonSelectables?: number[] | undefined;
|
|
25
25
|
}) => (wrapper: ReactWrapper) => void;
|
|
26
|
-
declare const carbonThemesJestTable: (string | Partial<import("../style/themes").ThemeObject> | undefined)[][];
|
|
27
26
|
declare const marginProps: readonly [readonly ["m", "margin"], readonly ["ml", "marginLeft"], readonly ["mr", "marginRight"], readonly ["mt", "marginTop"], readonly ["mb", "marginBottom"], readonly ["mx", "marginLeft"], readonly ["mx", "marginRight"], readonly ["my", "marginTop"], readonly ["my", "marginBottom"]];
|
|
28
27
|
declare type MarginProps = {
|
|
29
28
|
[K in typeof marginProps[number][0]]?: string | number;
|
|
@@ -49,4 +48,4 @@ declare const testStyledSystemGrid: (component: (gridProperties?: GridProps) =>
|
|
|
49
48
|
declare const testStyledSystemBackground: (component: (backgroundProperties?: BackgroundProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
|
|
50
49
|
declare const testStyledSystemPosition: (component: (positionProperties?: PositionProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
|
|
51
50
|
declare const expectConsoleOutput: (message: string, type?: "warn" | "error") => () => void;
|
|
52
|
-
export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate,
|
|
51
|
+
export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemHeight, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemGrid, testStyledSystemBackground, testStyledSystemPosition, expectConsoleOutput, };
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
import { mount } from "enzyme";
|
|
5
5
|
import { sprintf } from "sprintf-js";
|
|
6
6
|
import { space } from "../style/themes/base/base-theme.config";
|
|
7
|
-
import { carbonThemeList } from "../style/themes";
|
|
8
7
|
import { mockMatchMedia } from "./mock-match-media";
|
|
9
8
|
const isUpper = char => char.toUpperCase() === char;
|
|
10
9
|
const humpToDash = (acc, char) => `${acc}${isUpper(char) ? `-${char.toLowerCase()}` : char}`;
|
|
@@ -80,7 +79,6 @@ const assertCorrectTraversal = method => expect => ({
|
|
|
80
79
|
};
|
|
81
80
|
const assertKeyboardTraversal = assertCorrectTraversal(() => keyboard.pressArrowDown)(expect);
|
|
82
81
|
const assertHoverTraversal = assertCorrectTraversal(wrapper => hoverList(wrapper))(expect);
|
|
83
|
-
const carbonThemesJestTable = carbonThemeList.map(theme => [theme.name, theme]);
|
|
84
82
|
const marginProps = [["m", "margin"], ["ml", "marginLeft"], ["mr", "marginRight"], ["mt", "marginTop"], ["mb", "marginBottom"], ["mx", "marginLeft"], ["mx", "marginRight"], ["my", "marginTop"], ["my", "marginBottom"]];
|
|
85
83
|
const paddingProps = [["p", "padding"], ["pl", "paddingLeft"], ["pr", "paddingRight"], ["pt", "paddingTop"], ["pb", "paddingBottom"], ["px", "paddingLeft"], ["px", "paddingRight"], ["py", "paddingTop"], ["py", "paddingBottom"]];
|
|
86
84
|
const colorProps = [["color", "color", "#CCCCCC"], ["bg", "background-color", "#FFFFFF"], ["opacity", "opacity", "0.5"]];
|
|
@@ -357,4 +355,4 @@ const expectConsoleOutput = (message, type = "error") => {
|
|
|
357
355
|
global.console[type] = consoleType;
|
|
358
356
|
};
|
|
359
357
|
};
|
|
360
|
-
export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate,
|
|
358
|
+
export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemHeight, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemGrid, testStyledSystemBackground, testStyledSystemPosition, expectConsoleOutput };
|
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
import type { ThemeObject } from "../../style/themes";
|
|
3
3
|
export interface CarbonProviderProps {
|
|
4
4
|
children: React.ReactNode;
|
|
5
|
-
/** Theme which specifies styles to apply to all child components. Set to `
|
|
5
|
+
/** Theme which specifies styles to apply to all child components. Set to `sageTheme` by default. */
|
|
6
6
|
theme?: Partial<ThemeObject>;
|
|
7
7
|
/** Feature flag for opting in to the latest validation designs for components that support it.
|
|
8
8
|
*
|
|
@@ -2,12 +2,12 @@ import React, { createContext, useContext } from "react";
|
|
|
2
2
|
import PropTypes from "prop-types";
|
|
3
3
|
import { ThemeProvider } from "styled-components";
|
|
4
4
|
import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider";
|
|
5
|
-
import {
|
|
5
|
+
import { sageTheme } from "../../style/themes";
|
|
6
6
|
import { TopModalContextProvider } from "./top-modal-context";
|
|
7
7
|
export const NewValidationContext = /*#__PURE__*/createContext({});
|
|
8
8
|
export const CarbonProvider = ({
|
|
9
9
|
children,
|
|
10
|
-
theme =
|
|
10
|
+
theme = sageTheme,
|
|
11
11
|
validationRedesignOptIn = false,
|
|
12
12
|
roundedCornersOptOut = false,
|
|
13
13
|
focusRedesignOptOut = false
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import tokens from "@sage/design-tokens/js/base/common";
|
|
2
|
-
import
|
|
2
|
+
import sage from "../themes/sage";
|
|
3
3
|
/**
|
|
4
4
|
*
|
|
5
5
|
* Generates debug theme by mapping theme properties, so that components or
|
|
@@ -29,7 +29,7 @@ const debugTheme = themeProperties => Object.fromEntries(Object.entries(themePro
|
|
|
29
29
|
return [key, ""];
|
|
30
30
|
}));
|
|
31
31
|
export default {
|
|
32
|
-
...debugTheme(
|
|
32
|
+
...debugTheme(sage),
|
|
33
33
|
compatibility: {
|
|
34
34
|
...tokens
|
|
35
35
|
},
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import sageTheme from "./sage";
|
|
2
|
-
|
|
3
|
-
import aegeanTheme from "./aegean";
|
|
4
|
-
export { sageTheme, mintTheme, aegeanTheme };
|
|
2
|
+
export { sageTheme };
|
|
5
3
|
export { default as baseTheme } from "./base";
|
|
6
4
|
export { default as noTheme } from "./none";
|
|
7
5
|
export type { ThemeObject } from "./base";
|
|
8
|
-
export declare const carbonThemeList: Partial<import("./base").ThemeObject>[];
|
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
import sageTheme from "./sage";
|
|
2
|
-
|
|
3
|
-
import aegeanTheme from "./aegean";
|
|
4
|
-
export { sageTheme, mintTheme, aegeanTheme };
|
|
2
|
+
export { sageTheme };
|
|
5
3
|
export { default as baseTheme } from "./base";
|
|
6
|
-
export { default as noTheme } from "./none";
|
|
7
|
-
export const carbonThemeList = [mintTheme, aegeanTheme, sageTheme];
|
|
4
|
+
export { default as noTheme } from "./none";
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { BasePalette } from "../base/base-theme.config";
|
|
1
2
|
declare const _default: {
|
|
2
3
|
compatibility: {
|
|
3
4
|
metaName: string;
|
|
@@ -510,7 +511,7 @@ declare const _default: {
|
|
|
510
511
|
opacity800: string;
|
|
511
512
|
};
|
|
512
513
|
name: string;
|
|
513
|
-
palette?:
|
|
514
|
+
palette?: BasePalette | undefined;
|
|
514
515
|
spacing?: number | undefined;
|
|
515
516
|
space?: string[] | undefined;
|
|
516
517
|
colors?: Partial<import("../base/base-theme.config").Colors> | undefined;
|
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
import tokens from "@sage/design-tokens/js/base/common";
|
|
2
|
-
import
|
|
2
|
+
import { mergeWithBase } from "../base";
|
|
3
3
|
export default {
|
|
4
|
-
...
|
|
4
|
+
...mergeWithBase(palette => ({
|
|
5
|
+
colors: {
|
|
6
|
+
primary: palette.productGreenShade(23.5),
|
|
7
|
+
secondary: palette.productGreenShade(41),
|
|
8
|
+
tertiary: palette.productGreenShade(61),
|
|
9
|
+
loadingBarBackground: palette.productGreenTint(70)
|
|
10
|
+
}
|
|
11
|
+
})),
|
|
5
12
|
compatibility: {
|
|
6
13
|
...tokens
|
|
7
14
|
},
|
package/esm/style/utils/color.js
CHANGED
|
@@ -13,7 +13,7 @@ import tokens from "@sage/design-tokens/js/base/common";
|
|
|
13
13
|
* We could use a proxy to make those calls directly on the theme however styled-components expects the theme to be a
|
|
14
14
|
* plain object and does not allow us to merge a theme from a ThemeProvider with a theme defined as a defaultProp if
|
|
15
15
|
* both of those have a Proxy.
|
|
16
|
-
* e.g. when the
|
|
16
|
+
* e.g. when the none theme in the ThemeProvider is merged with the base theme in the defaultProps
|
|
17
17
|
*
|
|
18
18
|
* The purpose of this function is to intercept any palette colors, we only want styled-system to deal with CSS strings
|
|
19
19
|
* and theme.colors.
|
|
@@ -23,7 +23,6 @@ declare const assertHoverTraversal: ({ num, nonSelectables, }: {
|
|
|
23
23
|
num: number;
|
|
24
24
|
nonSelectables?: number[] | undefined;
|
|
25
25
|
}) => (wrapper: ReactWrapper) => void;
|
|
26
|
-
declare const carbonThemesJestTable: (string | Partial<import("../style/themes").ThemeObject> | undefined)[][];
|
|
27
26
|
declare const marginProps: readonly [readonly ["m", "margin"], readonly ["ml", "marginLeft"], readonly ["mr", "marginRight"], readonly ["mt", "marginTop"], readonly ["mb", "marginBottom"], readonly ["mx", "marginLeft"], readonly ["mx", "marginRight"], readonly ["my", "marginTop"], readonly ["my", "marginBottom"]];
|
|
28
27
|
declare type MarginProps = {
|
|
29
28
|
[K in typeof marginProps[number][0]]?: string | number;
|
|
@@ -49,4 +48,4 @@ declare const testStyledSystemGrid: (component: (gridProperties?: GridProps) =>
|
|
|
49
48
|
declare const testStyledSystemBackground: (component: (backgroundProperties?: BackgroundProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
|
|
50
49
|
declare const testStyledSystemPosition: (component: (positionProperties?: PositionProps) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
|
|
51
50
|
declare const expectConsoleOutput: (message: string, type?: "warn" | "error") => () => void;
|
|
52
|
-
export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate,
|
|
51
|
+
export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemHeight, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemGrid, testStyledSystemBackground, testStyledSystemPosition, expectConsoleOutput, };
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.makeArrayKeys = exports.listFrom = exports.keyboard = exports.hoverList = exports.getDefaultValue = exports.expectConsoleOutput = exports.click = exports.childrenFrom = exports.
|
|
6
|
+
exports.makeArrayKeys = exports.listFrom = exports.keyboard = exports.hoverList = exports.getDefaultValue = exports.expectConsoleOutput = exports.click = exports.childrenFrom = exports.assertStyleMatch = exports.assertKeyboardTraversal = exports.assertHoverTraversal = void 0;
|
|
7
7
|
Object.defineProperty(exports, "mockMatchMedia", {
|
|
8
8
|
enumerable: true,
|
|
9
9
|
get: function () {
|
|
@@ -14,7 +14,6 @@ exports.toCSSCase = exports.testStyledSystemWidth = exports.testStyledSystemSpac
|
|
|
14
14
|
var _enzyme = require("enzyme");
|
|
15
15
|
var _sprintfJs = require("sprintf-js");
|
|
16
16
|
var _baseTheme = require("../style/themes/base/base-theme.config");
|
|
17
|
-
var _themes = require("../style/themes");
|
|
18
17
|
var _mockMatchMedia = require("./mock-match-media");
|
|
19
18
|
/* eslint-disable jest/no-conditional-expect */
|
|
20
19
|
/* eslint-disable jest/no-identical-title */
|
|
@@ -101,7 +100,6 @@ const assertCorrectTraversal = method => expect => ({
|
|
|
101
100
|
};
|
|
102
101
|
const assertKeyboardTraversal = exports.assertKeyboardTraversal = assertCorrectTraversal(() => keyboard.pressArrowDown)(expect);
|
|
103
102
|
const assertHoverTraversal = exports.assertHoverTraversal = assertCorrectTraversal(wrapper => hoverList(wrapper))(expect);
|
|
104
|
-
const carbonThemesJestTable = exports.carbonThemesJestTable = _themes.carbonThemeList.map(theme => [theme.name, theme]);
|
|
105
103
|
const marginProps = [["m", "margin"], ["ml", "marginLeft"], ["mr", "marginRight"], ["mt", "marginTop"], ["mb", "marginBottom"], ["mx", "marginLeft"], ["mx", "marginRight"], ["my", "marginTop"], ["my", "marginBottom"]];
|
|
106
104
|
const paddingProps = [["p", "padding"], ["pl", "paddingLeft"], ["pr", "paddingRight"], ["pt", "paddingTop"], ["pb", "paddingBottom"], ["px", "paddingLeft"], ["px", "paddingRight"], ["py", "paddingTop"], ["py", "paddingBottom"]];
|
|
107
105
|
const colorProps = [["color", "color", "#CCCCCC"], ["bg", "background-color", "#FFFFFF"], ["opacity", "opacity", "0.5"]];
|
|
@@ -2,7 +2,7 @@ import React from "react";
|
|
|
2
2
|
import type { ThemeObject } from "../../style/themes";
|
|
3
3
|
export interface CarbonProviderProps {
|
|
4
4
|
children: React.ReactNode;
|
|
5
|
-
/** Theme which specifies styles to apply to all child components. Set to `
|
|
5
|
+
/** Theme which specifies styles to apply to all child components. Set to `sageTheme` by default. */
|
|
6
6
|
theme?: Partial<ThemeObject>;
|
|
7
7
|
/** Feature flag for opting in to the latest validation designs for components that support it.
|
|
8
8
|
*
|
|
@@ -16,7 +16,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
16
16
|
const NewValidationContext = exports.NewValidationContext = /*#__PURE__*/(0, _react.createContext)({});
|
|
17
17
|
const CarbonProvider = ({
|
|
18
18
|
children,
|
|
19
|
-
theme = _themes.
|
|
19
|
+
theme = _themes.sageTheme,
|
|
20
20
|
validationRedesignOptIn = false,
|
|
21
21
|
roundedCornersOptOut = false,
|
|
22
22
|
focusRedesignOptOut = false
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _common = _interopRequireDefault(require("@sage/design-tokens/js/base/common"));
|
|
8
|
-
var
|
|
8
|
+
var _sage = _interopRequireDefault(require("../themes/sage"));
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
10
|
/**
|
|
11
11
|
*
|
|
@@ -36,7 +36,7 @@ const debugTheme = themeProperties => Object.fromEntries(Object.entries(themePro
|
|
|
36
36
|
return [key, ""];
|
|
37
37
|
}));
|
|
38
38
|
var _default = exports.default = {
|
|
39
|
-
...debugTheme(
|
|
39
|
+
...debugTheme(_sage.default),
|
|
40
40
|
compatibility: {
|
|
41
41
|
..._common.default
|
|
42
42
|
},
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import sageTheme from "./sage";
|
|
2
|
-
|
|
3
|
-
import aegeanTheme from "./aegean";
|
|
4
|
-
export { sageTheme, mintTheme, aegeanTheme };
|
|
2
|
+
export { sageTheme };
|
|
5
3
|
export { default as baseTheme } from "./base";
|
|
6
4
|
export { default as noTheme } from "./none";
|
|
7
5
|
export type { ThemeObject } from "./base";
|
|
8
|
-
export declare const carbonThemeList: Partial<import("./base").ThemeObject>[];
|
|
@@ -3,25 +3,12 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
Object.defineProperty(exports, "aegeanTheme", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function () {
|
|
9
|
-
return _aegean.default;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
6
|
Object.defineProperty(exports, "baseTheme", {
|
|
13
7
|
enumerable: true,
|
|
14
8
|
get: function () {
|
|
15
9
|
return _base.default;
|
|
16
10
|
}
|
|
17
11
|
});
|
|
18
|
-
exports.carbonThemeList = void 0;
|
|
19
|
-
Object.defineProperty(exports, "mintTheme", {
|
|
20
|
-
enumerable: true,
|
|
21
|
-
get: function () {
|
|
22
|
-
return _mint.default;
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
12
|
Object.defineProperty(exports, "noTheme", {
|
|
26
13
|
enumerable: true,
|
|
27
14
|
get: function () {
|
|
@@ -35,9 +22,6 @@ Object.defineProperty(exports, "sageTheme", {
|
|
|
35
22
|
}
|
|
36
23
|
});
|
|
37
24
|
var _sage = _interopRequireDefault(require("./sage"));
|
|
38
|
-
var _mint = _interopRequireDefault(require("./mint"));
|
|
39
|
-
var _aegean = _interopRequireDefault(require("./aegean"));
|
|
40
25
|
var _base = _interopRequireDefault(require("./base"));
|
|
41
26
|
var _none = _interopRequireDefault(require("./none"));
|
|
42
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
43
|
-
const carbonThemeList = exports.carbonThemeList = [_mint.default, _aegean.default, _sage.default];
|
|
27
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { BasePalette } from "../base/base-theme.config";
|
|
1
2
|
declare const _default: {
|
|
2
3
|
compatibility: {
|
|
3
4
|
metaName: string;
|
|
@@ -510,7 +511,7 @@ declare const _default: {
|
|
|
510
511
|
opacity800: string;
|
|
511
512
|
};
|
|
512
513
|
name: string;
|
|
513
|
-
palette?:
|
|
514
|
+
palette?: BasePalette | undefined;
|
|
514
515
|
spacing?: number | undefined;
|
|
515
516
|
space?: string[] | undefined;
|
|
516
517
|
colors?: Partial<import("../base/base-theme.config").Colors> | undefined;
|
|
@@ -5,10 +5,17 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _common = _interopRequireDefault(require("@sage/design-tokens/js/base/common"));
|
|
8
|
-
var
|
|
8
|
+
var _base = require("../base");
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
10
|
var _default = exports.default = {
|
|
11
|
-
...
|
|
11
|
+
...(0, _base.mergeWithBase)(palette => ({
|
|
12
|
+
colors: {
|
|
13
|
+
primary: palette.productGreenShade(23.5),
|
|
14
|
+
secondary: palette.productGreenShade(41),
|
|
15
|
+
tertiary: palette.productGreenShade(61),
|
|
16
|
+
loadingBarBackground: palette.productGreenTint(70)
|
|
17
|
+
}
|
|
18
|
+
})),
|
|
12
19
|
compatibility: {
|
|
13
20
|
..._common.default
|
|
14
21
|
},
|
package/lib/style/utils/color.js
CHANGED
|
@@ -21,7 +21,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
21
21
|
* We could use a proxy to make those calls directly on the theme however styled-components expects the theme to be a
|
|
22
22
|
* plain object and does not allow us to merge a theme from a ThemeProvider with a theme defined as a defaultProp if
|
|
23
23
|
* both of those have a Proxy.
|
|
24
|
-
* e.g. when the
|
|
24
|
+
* e.g. when the none theme in the ThemeProvider is merged with the base theme in the defaultProps
|
|
25
25
|
*
|
|
26
26
|
* The purpose of this function is to intercept any palette colors, we only want styled-system to deal with CSS strings
|
|
27
27
|
* and theme.colors.
|
package/package.json
CHANGED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
export default (palette => {
|
|
2
|
-
return {
|
|
3
|
-
name: "aegean",
|
|
4
|
-
colors: {
|
|
5
|
-
primary: palette.productBlueShade(3),
|
|
6
|
-
secondary: palette.productBlueShade(23),
|
|
7
|
-
tertiary: palette.productBlueShade(43),
|
|
8
|
-
loadingBarBackground: palette.productBlueTint(70)
|
|
9
|
-
},
|
|
10
|
-
get compatibility() {
|
|
11
|
-
return {
|
|
12
|
-
colorsActionMajor150: this?.colors?.loadingBarBackground,
|
|
13
|
-
colorsActionMajor500: this?.colors?.primary,
|
|
14
|
-
colorsActionMajor600: this?.colors?.secondary,
|
|
15
|
-
colorsActionMajor700: this?.colors?.tertiary,
|
|
16
|
-
colorsComponentsMenuAutumnStandard600: this?.colors?.primary,
|
|
17
|
-
colorsComponentsMenuSpringChild600: this?.colors?.primary,
|
|
18
|
-
colorsComponentsMenuAutumnChild600: this?.colors?.primary,
|
|
19
|
-
colorsComponentsMenuSummerChild600: this?.colors?.primary,
|
|
20
|
-
colorsComponentsMenuWinterChild600: this?.colors?.primary,
|
|
21
|
-
colorsComponentsMenuSpringChildAlt600: this?.colors?.primary,
|
|
22
|
-
colorsComponentsMenuAutumnChildAlt600: this?.colors?.primary,
|
|
23
|
-
colorsComponentsMenuWinterChildAlt600: this?.colors?.primary,
|
|
24
|
-
colorsComponentsMenuSummerChildAlt600: this?.colors?.primary,
|
|
25
|
-
colorsBaseTheme: this?.colors?.primary
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
});
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/* eslint-disable no-console */
|
|
2
|
-
import { aegeanTheme } from "..";
|
|
3
|
-
export default (() => {
|
|
4
|
-
console.warn(`"Medium Theme" has been renamed to "Aegean".
|
|
5
|
-
All references to that theme should be updated to:
|
|
6
|
-
import { aegeanTheme } from "carbon-react/lib/style/themes"`);
|
|
7
|
-
return aegeanTheme;
|
|
8
|
-
})();
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
export default (palette => {
|
|
2
|
-
return {
|
|
3
|
-
name: "mint",
|
|
4
|
-
colors: {
|
|
5
|
-
primary: palette.productGreenShade(23.5),
|
|
6
|
-
secondary: palette.productGreenShade(41),
|
|
7
|
-
tertiary: palette.productGreenShade(61),
|
|
8
|
-
loadingBarBackground: palette.productGreenTint(70)
|
|
9
|
-
},
|
|
10
|
-
get compatibility() {
|
|
11
|
-
return {
|
|
12
|
-
colorsActionMajor150: this?.colors?.loadingBarBackground,
|
|
13
|
-
colorsActionMajor500: this?.colors?.primary,
|
|
14
|
-
colorsActionMajor600: this?.colors?.secondary,
|
|
15
|
-
colorsActionMajor700: this?.colors?.tertiary,
|
|
16
|
-
colorsComponentsMenuAutumnStandard600: this?.colors?.primary,
|
|
17
|
-
colorsComponentsMenuSpringChild600: this?.colors?.primary,
|
|
18
|
-
colorsComponentsMenuAutumnChild600: this?.colors?.primary,
|
|
19
|
-
colorsComponentsMenuSummerChild600: this?.colors?.primary,
|
|
20
|
-
colorsComponentsMenuWinterChild600: this?.colors?.primary,
|
|
21
|
-
colorsComponentsMenuSpringChildAlt600: this?.colors?.primary,
|
|
22
|
-
colorsComponentsMenuAutumnChildAlt600: this?.colors?.primary,
|
|
23
|
-
colorsComponentsMenuWinterChildAlt600: this?.colors?.primary,
|
|
24
|
-
colorsComponentsMenuSummerChildAlt600: this?.colors?.primary,
|
|
25
|
-
colorsBaseTheme: this?.colors?.primary
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
});
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/* eslint-disable no-console */
|
|
2
|
-
import { mintTheme } from "..";
|
|
3
|
-
export default (() => {
|
|
4
|
-
console.warn(`"Small Theme" has been renamed to "Mint".
|
|
5
|
-
All references to that theme should be updated to:
|
|
6
|
-
import { mintTheme } from 'carbon-react/lib/style/themes'`);
|
|
7
|
-
return mintTheme;
|
|
8
|
-
})();
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _default = palette => {
|
|
8
|
-
return {
|
|
9
|
-
name: "aegean",
|
|
10
|
-
colors: {
|
|
11
|
-
primary: palette.productBlueShade(3),
|
|
12
|
-
secondary: palette.productBlueShade(23),
|
|
13
|
-
tertiary: palette.productBlueShade(43),
|
|
14
|
-
loadingBarBackground: palette.productBlueTint(70)
|
|
15
|
-
},
|
|
16
|
-
get compatibility() {
|
|
17
|
-
return {
|
|
18
|
-
colorsActionMajor150: this?.colors?.loadingBarBackground,
|
|
19
|
-
colorsActionMajor500: this?.colors?.primary,
|
|
20
|
-
colorsActionMajor600: this?.colors?.secondary,
|
|
21
|
-
colorsActionMajor700: this?.colors?.tertiary,
|
|
22
|
-
colorsComponentsMenuAutumnStandard600: this?.colors?.primary,
|
|
23
|
-
colorsComponentsMenuSpringChild600: this?.colors?.primary,
|
|
24
|
-
colorsComponentsMenuAutumnChild600: this?.colors?.primary,
|
|
25
|
-
colorsComponentsMenuSummerChild600: this?.colors?.primary,
|
|
26
|
-
colorsComponentsMenuWinterChild600: this?.colors?.primary,
|
|
27
|
-
colorsComponentsMenuSpringChildAlt600: this?.colors?.primary,
|
|
28
|
-
colorsComponentsMenuAutumnChildAlt600: this?.colors?.primary,
|
|
29
|
-
colorsComponentsMenuWinterChildAlt600: this?.colors?.primary,
|
|
30
|
-
colorsComponentsMenuSummerChildAlt600: this?.colors?.primary,
|
|
31
|
-
colorsBaseTheme: this?.colors?.primary
|
|
32
|
-
};
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
};
|
|
36
|
-
exports.default = _default;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _aegeanTheme = _interopRequireDefault(require("./aegean-theme.config"));
|
|
8
|
-
var _base = require("../base");
|
|
9
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
-
var _default = exports.default = (0, _base.mergeWithBase)(_aegeanTheme.default);
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _ = require("..");
|
|
8
|
-
/* eslint-disable no-console */
|
|
9
|
-
var _default = exports.default = (() => {
|
|
10
|
-
console.warn(`"Medium Theme" has been renamed to "Aegean".
|
|
11
|
-
All references to that theme should be updated to:
|
|
12
|
-
import { aegeanTheme } from "carbon-react/lib/style/themes"`);
|
|
13
|
-
return _.aegeanTheme;
|
|
14
|
-
})();
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _mintTheme = _interopRequireDefault(require("./mint-theme.config"));
|
|
8
|
-
var _base = require("../base");
|
|
9
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
-
var _default = exports.default = (0, _base.mergeWithBase)(_mintTheme.default);
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _default = palette => {
|
|
8
|
-
return {
|
|
9
|
-
name: "mint",
|
|
10
|
-
colors: {
|
|
11
|
-
primary: palette.productGreenShade(23.5),
|
|
12
|
-
secondary: palette.productGreenShade(41),
|
|
13
|
-
tertiary: palette.productGreenShade(61),
|
|
14
|
-
loadingBarBackground: palette.productGreenTint(70)
|
|
15
|
-
},
|
|
16
|
-
get compatibility() {
|
|
17
|
-
return {
|
|
18
|
-
colorsActionMajor150: this?.colors?.loadingBarBackground,
|
|
19
|
-
colorsActionMajor500: this?.colors?.primary,
|
|
20
|
-
colorsActionMajor600: this?.colors?.secondary,
|
|
21
|
-
colorsActionMajor700: this?.colors?.tertiary,
|
|
22
|
-
colorsComponentsMenuAutumnStandard600: this?.colors?.primary,
|
|
23
|
-
colorsComponentsMenuSpringChild600: this?.colors?.primary,
|
|
24
|
-
colorsComponentsMenuAutumnChild600: this?.colors?.primary,
|
|
25
|
-
colorsComponentsMenuSummerChild600: this?.colors?.primary,
|
|
26
|
-
colorsComponentsMenuWinterChild600: this?.colors?.primary,
|
|
27
|
-
colorsComponentsMenuSpringChildAlt600: this?.colors?.primary,
|
|
28
|
-
colorsComponentsMenuAutumnChildAlt600: this?.colors?.primary,
|
|
29
|
-
colorsComponentsMenuWinterChildAlt600: this?.colors?.primary,
|
|
30
|
-
colorsComponentsMenuSummerChildAlt600: this?.colors?.primary,
|
|
31
|
-
colorsBaseTheme: this?.colors?.primary
|
|
32
|
-
};
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
};
|
|
36
|
-
exports.default = _default;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _ = require("..");
|
|
8
|
-
/* eslint-disable no-console */
|
|
9
|
-
var _default = exports.default = (() => {
|
|
10
|
-
console.warn(`"Small Theme" has been renamed to "Mint".
|
|
11
|
-
All references to that theme should be updated to:
|
|
12
|
-
import { mintTheme } from 'carbon-react/lib/style/themes'`);
|
|
13
|
-
return _.mintTheme;
|
|
14
|
-
})();
|