carbon-react 94.4.0 → 94.6.1

package/lib/style/design-tokens/carbon-global-tokens-provider/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _carbonGlobalTokensProvider.default;
+  }
+});
+
+var _carbonGlobalTokensProvider = _interopRequireDefault(require("./carbon-global-tokens-provider.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/style/design-tokens/carbon-scoped-story-provider/carbon-scoped-tokens-provider.component.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _generateCssVariables = _interopRequireDefault(require("../generate-css-variables.util"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ *
+ * Converts theme properties to css variables form and set them locally for
+ * given scope
+ *
+ */
+const CarbonScopedTokensProvider = _styledComponents.default.div`
+  margin: 0;
+  padding: 0;
+  width: auto;
+  display: inline;
+  ${({
+  theme
+}) => (0, _generateCssVariables.default)(theme)}
+`;
+var _default = CarbonScopedTokensProvider;
+exports.default = _default;

package/lib/style/design-tokens/carbon-scoped-story-provider/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _carbonScopedTokensProvider.default;
+  }
+});
+
+var _carbonScopedTokensProvider = _interopRequireDefault(require("./carbon-scoped-tokens-provider.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/style/design-tokens/debug-theme.util.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _common = _interopRequireDefault(require("@sage/design-tokens/js/base/common"));
+
+var _mint = _interopRequireDefault(require("../themes/mint"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ *
+ * Generates debug theme by mapping theme properties, so that components or
+ * their parts, that are using old theme properties would be easier to spot.
+ *
+ * This is temporary utility and will no longer be needed after all components
+ * will be migrated to design tokens.
+ *
+ */
+const debugTheme = themeProperties => Object.fromEntries(Object.entries(themeProperties).map(([key, value]) => {
+  if (typeof value === "string" && (value.startsWith("#") || value.startsWith("rgb") || value.startsWith("rgba") || value.startsWith("hsl") || value.startsWith("hsla"))) {
+    return [key, `rgba(255, 20, 147, .2)`];
+  }
+
+  if (typeof value === "string" && value.endsWith("px")) {
+    return [key, "10px"];
+  }
+
+  if (typeof value === "string" && value.endsWith("%")) {
+    return [key, "10%"];
+  }
+
+  if (typeof value === "number") {
+    return [key, 10];
+  }
+
+  if (typeof value === "object") {
+    return [key, debugTheme(value)];
+  }
+
+  return [key, ""];
+}));
+
+var _default = { ...debugTheme(_mint.default),
+  ..._common.default,
+  name: "sage-debug"
+};
+exports.default = _default;

package/lib/style/design-tokens/generate-css-variables.util.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ *
+ * Converts theme properties to the string in form of css variable definitions.
+ * Then this string can be used as variable definitions in global or local
+ * scope, which allows for achieving compatibility when using design tokens in
+ * form of CSS variables along with styled-components ThemeProvider.
+ *
+ */
+var _default = theme => Object.entries(theme).map(([key, value]) => `--${key}: ${value};`).join("\r\n");
+
+exports.default = _default;