@vitality-ds/components 4.9.4 → 4.10.0

package/dist/Typography/constants/colors.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AVAILABLE_COLOR_VARIANTS = void 0;
+// eslint-disable-next-line import/prefer-default-export
+var AVAILABLE_COLOR_VARIANTS = exports.AVAILABLE_COLOR_VARIANTS = ["inherit", "hiContrast", "primary", "lowContrast", "disabled", "accent", "info", "moderate", "critical", "warning", "success"];

package/dist/Typography/hooks/useTypographyColors.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+var _colors = require("../constants/colors");
+var _logic = require("../logic");
+var useTypographyColors = function useTypographyColors(colorString) {
+  var result = (0, _react.useMemo)(function () {
+    return (0, _logic.isColorVariantValue)(colorString, _colors.AVAILABLE_COLOR_VARIANTS);
+  }, [colorString, _colors.AVAILABLE_COLOR_VARIANTS]);
+  return result;
+};
+var _default = exports["default"] = useTypographyColors;

package/dist/Typography/hooks/useTypographyElementFromTagProp.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _react = require("react");
-var _constants = require("../constants");
+var _variants = require("../constants/variants");
 var _logic = require("../logic");
 var useTypographyElementFromTagProp = function useTypographyElementFromTagProp(htmlTag, variant) {
   var renderedComponent = (0, _react.useMemo)(function () {
-    return (0, _logic.getHtmlElementFromHtmlTagProp)(_constants.DEFAULT_VARIANT_ELEMENTS, htmlTag, variant);
+    return (0, _logic.getHtmlElementFromHtmlTagProp)(_variants.DEFAULT_VARIANT_ELEMENTS, htmlTag, variant);
   }, [htmlTag, variant]);
   return renderedComponent;
 };

package/dist/Typography/index.js

@@ -8,6 +8,7 @@ exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _useTypographyColors = _interopRequireDefault(require("./hooks/useTypographyColors"));
 var _useTypographyElementFromTagProp = _interopRequireDefault(require("./hooks/useTypographyElementFromTagProp"));
 var _styled = require("./styled");
 var _excluded = ["className", "style", "as", "css", "htmlTag", "variant", "color", "textAlign"];
@@ -24,11 +25,11 @@ function Typography(_ref) {
     textAlign = _ref.textAlign,
     rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var renderedComponent = (0, _useTypographyElementFromTagProp["default"])(htmlTag, variant);
+  var colorProps = (0, _useTypographyColors["default"])(color);
   return /*#__PURE__*/_react["default"].createElement(_styled.BaseTypography, (0, _extends2["default"])({}, rest, {
     as: renderedComponent,
-    color: color,
     variant: variant,
     textAlign: textAlign
-  }));
+  }, colorProps));
 }
 var _default = exports["default"] = Typography;

package/dist/Typography/logic.js

@@ -3,9 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getHtmlElementFromHtmlTagProp = void 0;
+exports.isColorVariantValue = exports.getHtmlElementFromHtmlTagProp = void 0;
 // eslint-disable-next-line import/prefer-default-export
 var getHtmlElementFromHtmlTagProp = exports.getHtmlElementFromHtmlTagProp = function getHtmlElementFromHtmlTagProp(options, htmlTag, variant) {
   var variantKey = variant;
   return htmlTag || options[variantKey];
+};
+var isVariantValue = function isVariantValue(value, availableVariants) {
+  return availableVariants.includes(value);
+};
+var isColorVariantValue = exports.isColorVariantValue = function isColorVariantValue(value, availableVariants) {
+  if (isVariantValue(value, availableVariants)) {
+    return {
+      color: value
+    };
+  }
+  return {
+    css: {
+      color: value
+    }
+  };
 };

package/dist/Typography/logic.spec.js

@@ -1,14 +1,29 @@
 "use strict";
 
-var _constants = require("./constants");
+var _colors = require("./constants/colors");
+var _variants = require("./constants/variants");
 var _logic = require("./logic");
 describe("getHtmlElementFromHtmlTagProp", function () {
   it("should return the htmlTag tag if it is provided to the function", function () {
-    var tag = (0, _logic.getHtmlElementFromHtmlTagProp)(_constants.DEFAULT_VARIANT_ELEMENTS, "p", "pageTitle");
+    var tag = (0, _logic.getHtmlElementFromHtmlTagProp)(_variants.DEFAULT_VARIANT_ELEMENTS, "p", "pageTitle");
     expect(tag).toEqual("p");
   });
   it("should return the default tag if it is provided to the htmlTag parameter", function () {
-    var tag = (0, _logic.getHtmlElementFromHtmlTagProp)(_constants.DEFAULT_VARIANT_ELEMENTS, null, "pageTitle");
-    expect(tag).toEqual(_constants.DEFAULT_VARIANT_ELEMENTS.pageTitle);
+    var tag = (0, _logic.getHtmlElementFromHtmlTagProp)(_variants.DEFAULT_VARIANT_ELEMENTS, null, "pageTitle");
+    expect(tag).toEqual(_variants.DEFAULT_VARIANT_ELEMENTS.pageTitle);
+  });
+  it("should return the color prop and variant when passed a valid color variant", function () {
+    var colorProp = (0, _logic.isColorVariantValue)("hiContrast", _colors.AVAILABLE_COLOR_VARIANTS);
+    expect(colorProp).toEqual({
+      color: "hiContrast"
+    });
+  });
+  it("should return the css prop and color value when passed a value from the getColorScaleValueByUseCase() function", function () {
+    var colorProp = (0, _logic.isColorVariantValue)("$colors$warning9", _colors.AVAILABLE_COLOR_VARIANTS);
+    expect(colorProp).toEqual({
+      css: {
+        color: "$colors$warning9"
+      }
+    });
   });
 });

package/dist/Typography/styles/BaseTypography.styles.js

@@ -10,7 +10,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _icons = require("@vitality-ds/icons");
 var _system = require("@vitality-ds/system");
-var _constants = require("../constants");
+var _variants = require("../constants/variants");
 var _helpers = require("./helpers");
 var text = _system.colorUseCases.text;
 var overflowSharedStyles = {
@@ -145,7 +145,7 @@ var _default = exports["default"] = (0, _system.css)((0, _defineProperty2["defau
     2: (0, _helpers.getMaxLines)(2, "$body"),
     3: (0, _helpers.getMaxLines)(3, "$body")
   }
-}), "compoundVariants", (0, _toConsumableArray2["default"])((0, _helpers.getMaxLinesVariants)(_constants.AVAILABLE_MAX_LINES, _constants.AVAILABLE_VARIANTS))), "ul, ol", {
+}), "compoundVariants", (0, _toConsumableArray2["default"])((0, _helpers.getMaxLinesVariants)(_variants.AVAILABLE_MAX_LINES, _variants.AVAILABLE_VARIANTS))), "ul, ol", {
   listStylePosition: "inside",
   paddingInlineStart: 0,
   marginBlock: "inherit"

package/dist/components/src/Typography/constants/colors.d.ts

@@ -0,0 +1,2 @@
+import { AvailableColorVariants } from "../types";
+export declare const AVAILABLE_COLOR_VARIANTS: AvailableColorVariants[];

package/dist/components/src/Typography/hooks/useTypographyColors.d.ts

@@ -0,0 +1,18 @@
+import { ColorType } from "../types";
+declare const useTypographyColors: (colorString: ColorType) => {
+    color: "primary" | "accent" | "success" | "info" | "warning" | "critical" | "hiContrast" | "lowContrast" | "disabled" | "inherit" | "moderate" | ({
+        "@bp1"?: "primary" | "accent" | "success" | "info" | "warning" | "critical" | "hiContrast" | "lowContrast" | "disabled" | "inherit" | "moderate";
+        "@bp2"?: "primary" | "accent" | "success" | "info" | "warning" | "critical" | "hiContrast" | "lowContrast" | "disabled" | "inherit" | "moderate";
+        "@bp3"?: "primary" | "accent" | "success" | "info" | "warning" | "critical" | "hiContrast" | "lowContrast" | "disabled" | "inherit" | "moderate";
+        "@initial"?: "primary" | "accent" | "success" | "info" | "warning" | "critical" | "hiContrast" | "lowContrast" | "disabled" | "inherit" | "moderate";
+    } & {
+        [x: string]: "primary" | "accent" | "success" | "info" | "warning" | "critical" | "hiContrast" | "lowContrast" | "disabled" | "inherit" | "moderate";
+    });
+    css?: undefined;
+} | {
+    css: {
+        color: "$colors$blue2" | "$colors$cyan2" | "$colors$green2" | "$colors$grey2" | "$colors$greyA2" | "$colors$orange2" | "$colors$pink2" | "$colors$red2" | "$colors$violet2" | "$colors$yellow2" | "$colors$blue1" | "$colors$cyan1" | "$colors$green1" | "$colors$grey1" | "$colors$greyA1" | "$colors$orange1" | "$colors$pink1" | "$colors$red1" | "$colors$violet1" | "$colors$yellow1" | "$colors$blue7" | "$colors$cyan7" | "$colors$green7" | "$colors$grey7" | "$colors$greyA7" | "$colors$orange7" | "$colors$pink7" | "$colors$red7" | "$colors$violet7" | "$colors$yellow7" | "$colors$blue12" | "$colors$cyan12" | "$colors$green12" | "$colors$grey12" | "$colors$greyA12" | "$colors$orange12" | "$colors$pink12" | "$colors$red12" | "$colors$violet12" | "$colors$yellow12" | "$colors$blue3" | "$colors$cyan3" | "$colors$green3" | "$colors$grey3" | "$colors$greyA3" | "$colors$orange3" | "$colors$pink3" | "$colors$red3" | "$colors$violet3" | "$colors$yellow3" | "$colors$blue4" | "$colors$cyan4" | "$colors$green4" | "$colors$grey4" | "$colors$greyA4" | "$colors$orange4" | "$colors$pink4" | "$colors$red4" | "$colors$violet4" | "$colors$yellow4" | "$colors$blue5" | "$colors$cyan5" | "$colors$green5" | "$colors$grey5" | "$colors$greyA5" | "$colors$orange5" | "$colors$pink5" | "$colors$red5" | "$colors$violet5" | "$colors$yellow5" | "$colors$blue10" | "$colors$cyan10" | "$colors$green10" | "$colors$grey10" | "$colors$greyA10" | "$colors$orange10" | "$colors$pink10" | "$colors$red10" | "$colors$violet10" | "$colors$yellow10" | "$colors$blue9" | "$colors$cyan9" | "$colors$green9" | "$colors$grey9" | "$colors$greyA9" | "$colors$orange9" | "$colors$pink9" | "$colors$red9" | "$colors$violet9" | "$colors$yellow9" | "$colors$blue11" | "$colors$cyan11" | "$colors$green11" | "$colors$grey11" | "$colors$greyA11" | "$colors$orange11" | "$colors$pink11" | "$colors$red11" | "$colors$violet11" | "$colors$yellow11" | "$colors$blue6" | "$colors$cyan6" | "$colors$green6" | "$colors$grey6" | "$colors$greyA6" | "$colors$orange6" | "$colors$pink6" | "$colors$red6" | "$colors$violet6" | "$colors$yellow6" | "$colors$blue8" | "$colors$cyan8" | "$colors$green8" | "$colors$grey8" | "$colors$greyA8" | "$colors$orange8" | "$colors$pink8" | "$colors$red8" | "$colors$violet8" | "$colors$yellow8" | "$colors$blue13" | "$colors$cyan13" | "$colors$green13" | "$colors$grey13" | "$colors$greyA13" | "$colors$orange13" | "$colors$pink13" | "$colors$red13" | "$colors$violet13" | "$colors$yellow13" | "$colors$neutral2" | "$colors$neutralA2" | "$colors$primary2" | "$colors$accent2" | "$colors$success2" | "$colors$info2" | "$colors$warning2" | "$colors$critical2" | "$colors$brand2" | "$colors$neutral1" | "$colors$neutralA1" | "$colors$primary1" | "$colors$accent1" | "$colors$success1" | "$colors$info1" | "$colors$warning1" | "$colors$critical1" | "$colors$brand1" | "$colors$neutral7" | "$colors$neutralA7" | "$colors$primary7" | "$colors$accent7" | "$colors$success7" | "$colors$info7" | "$colors$warning7" | "$colors$critical7" | "$colors$brand7" | "$colors$neutral12" | "$colors$neutralA12" | "$colors$primary12" | "$colors$accent12" | "$colors$success12" | "$colors$info12" | "$colors$warning12" | "$colors$critical12" | "$colors$brand12" | "$colors$neutral3" | "$colors$neutralA3" | "$colors$primary3" | "$colors$accent3" | "$colors$success3" | "$colors$info3" | "$colors$warning3" | "$colors$critical3" | "$colors$brand3" | "$colors$neutral4" | "$colors$neutralA4" | "$colors$primary4" | "$colors$accent4" | "$colors$success4" | "$colors$info4" | "$colors$warning4" | "$colors$critical4" | "$colors$brand4" | "$colors$neutral5" | "$colors$neutralA5" | "$colors$primary5" | "$colors$accent5" | "$colors$success5" | "$colors$info5" | "$colors$warning5" | "$colors$critical5" | "$colors$brand5" | "$colors$neutral10" | "$colors$neutralA10" | "$colors$primary10" | "$colors$accent10" | "$colors$success10" | "$colors$info10" | "$colors$warning10" | "$colors$critical10" | "$colors$brand10" | "$colors$neutral9" | "$colors$neutralA9" | "$colors$primary9" | "$colors$accent9" | "$colors$success9" | "$colors$info9" | "$colors$warning9" | "$colors$critical9" | "$colors$brand9" | "$colors$neutral11" | "$colors$neutralA11" | "$colors$primary11" | "$colors$accent11" | "$colors$success11" | "$colors$info11" | "$colors$warning11" | "$colors$critical11" | "$colors$brand11" | "$colors$neutral6" | "$colors$neutralA6" | "$colors$primary6" | "$colors$accent6" | "$colors$success6" | "$colors$info6" | "$colors$warning6" | "$colors$critical6" | "$colors$brand6" | "$colors$neutral8" | "$colors$neutralA8" | "$colors$primary8" | "$colors$accent8" | "$colors$success8" | "$colors$info8" | "$colors$warning8" | "$colors$critical8" | "$colors$brand8" | "$colors$neutral13" | "$colors$neutralA13" | "$colors$primary13" | "$colors$accent13" | "$colors$success13" | "$colors$info13" | "$colors$warning13" | "$colors$critical13" | "$colors$brand13";
+    };
+    color?: undefined;
+};
+export default useTypographyColors;

package/dist/components/src/Typography/logic.d.ts

@@ -1,3 +1,19 @@
-import { DEFAULT_VARIANT_ELEMENTS } from "./constants";
-import { AllowedTypographyHTMLElements, TypographyVariantOptions } from "./types";
+import { DEFAULT_VARIANT_ELEMENTS } from "./constants/variants";
+import { AllowedTypographyHTMLElements, AvailableColorVariants, ColorType, TypographyVariantOptions } from "./types";
 export declare const getHtmlElementFromHtmlTagProp: (options: typeof DEFAULT_VARIANT_ELEMENTS, htmlTag: AllowedTypographyHTMLElements, variant: TypographyVariantOptions) => AllowedTypographyHTMLElements;
+export declare const isColorVariantValue: (value: ColorType, availableVariants: AvailableColorVariants[]) => {
+    color: "primary" | "accent" | "success" | "info" | "warning" | "critical" | "hiContrast" | "lowContrast" | "disabled" | "inherit" | "moderate" | ({
+        "@bp1"?: "primary" | "accent" | "success" | "info" | "warning" | "critical" | "hiContrast" | "lowContrast" | "disabled" | "inherit" | "moderate";
+        "@bp2"?: "primary" | "accent" | "success" | "info" | "warning" | "critical" | "hiContrast" | "lowContrast" | "disabled" | "inherit" | "moderate";
+        "@bp3"?: "primary" | "accent" | "success" | "info" | "warning" | "critical" | "hiContrast" | "lowContrast" | "disabled" | "inherit" | "moderate";
+        "@initial"?: "primary" | "accent" | "success" | "info" | "warning" | "critical" | "hiContrast" | "lowContrast" | "disabled" | "inherit" | "moderate";
+    } & {
+        [x: string]: "primary" | "accent" | "success" | "info" | "warning" | "critical" | "hiContrast" | "lowContrast" | "disabled" | "inherit" | "moderate";
+    });
+    css?: undefined;
+} | {
+    css: {
+        color: "$colors$blue2" | "$colors$cyan2" | "$colors$green2" | "$colors$grey2" | "$colors$greyA2" | "$colors$orange2" | "$colors$pink2" | "$colors$red2" | "$colors$violet2" | "$colors$yellow2" | "$colors$blue1" | "$colors$cyan1" | "$colors$green1" | "$colors$grey1" | "$colors$greyA1" | "$colors$orange1" | "$colors$pink1" | "$colors$red1" | "$colors$violet1" | "$colors$yellow1" | "$colors$blue7" | "$colors$cyan7" | "$colors$green7" | "$colors$grey7" | "$colors$greyA7" | "$colors$orange7" | "$colors$pink7" | "$colors$red7" | "$colors$violet7" | "$colors$yellow7" | "$colors$blue12" | "$colors$cyan12" | "$colors$green12" | "$colors$grey12" | "$colors$greyA12" | "$colors$orange12" | "$colors$pink12" | "$colors$red12" | "$colors$violet12" | "$colors$yellow12" | "$colors$blue3" | "$colors$cyan3" | "$colors$green3" | "$colors$grey3" | "$colors$greyA3" | "$colors$orange3" | "$colors$pink3" | "$colors$red3" | "$colors$violet3" | "$colors$yellow3" | "$colors$blue4" | "$colors$cyan4" | "$colors$green4" | "$colors$grey4" | "$colors$greyA4" | "$colors$orange4" | "$colors$pink4" | "$colors$red4" | "$colors$violet4" | "$colors$yellow4" | "$colors$blue5" | "$colors$cyan5" | "$colors$green5" | "$colors$grey5" | "$colors$greyA5" | "$colors$orange5" | "$colors$pink5" | "$colors$red5" | "$colors$violet5" | "$colors$yellow5" | "$colors$blue10" | "$colors$cyan10" | "$colors$green10" | "$colors$grey10" | "$colors$greyA10" | "$colors$orange10" | "$colors$pink10" | "$colors$red10" | "$colors$violet10" | "$colors$yellow10" | "$colors$blue9" | "$colors$cyan9" | "$colors$green9" | "$colors$grey9" | "$colors$greyA9" | "$colors$orange9" | "$colors$pink9" | "$colors$red9" | "$colors$violet9" | "$colors$yellow9" | "$colors$blue11" | "$colors$cyan11" | "$colors$green11" | "$colors$grey11" | "$colors$greyA11" | "$colors$orange11" | "$colors$pink11" | "$colors$red11" | "$colors$violet11" | "$colors$yellow11" | "$colors$blue6" | "$colors$cyan6" | "$colors$green6" | "$colors$grey6" | "$colors$greyA6" | "$colors$orange6" | "$colors$pink6" | "$colors$red6" | "$colors$violet6" | "$colors$yellow6" | "$colors$blue8" | "$colors$cyan8" | "$colors$green8" | "$colors$grey8" | "$colors$greyA8" | "$colors$orange8" | "$colors$pink8" | "$colors$red8" | "$colors$violet8" | "$colors$yellow8" | "$colors$blue13" | "$colors$cyan13" | "$colors$green13" | "$colors$grey13" | "$colors$greyA13" | "$colors$orange13" | "$colors$pink13" | "$colors$red13" | "$colors$violet13" | "$colors$yellow13" | "$colors$neutral2" | "$colors$neutralA2" | "$colors$primary2" | "$colors$accent2" | "$colors$success2" | "$colors$info2" | "$colors$warning2" | "$colors$critical2" | "$colors$brand2" | "$colors$neutral1" | "$colors$neutralA1" | "$colors$primary1" | "$colors$accent1" | "$colors$success1" | "$colors$info1" | "$colors$warning1" | "$colors$critical1" | "$colors$brand1" | "$colors$neutral7" | "$colors$neutralA7" | "$colors$primary7" | "$colors$accent7" | "$colors$success7" | "$colors$info7" | "$colors$warning7" | "$colors$critical7" | "$colors$brand7" | "$colors$neutral12" | "$colors$neutralA12" | "$colors$primary12" | "$colors$accent12" | "$colors$success12" | "$colors$info12" | "$colors$warning12" | "$colors$critical12" | "$colors$brand12" | "$colors$neutral3" | "$colors$neutralA3" | "$colors$primary3" | "$colors$accent3" | "$colors$success3" | "$colors$info3" | "$colors$warning3" | "$colors$critical3" | "$colors$brand3" | "$colors$neutral4" | "$colors$neutralA4" | "$colors$primary4" | "$colors$accent4" | "$colors$success4" | "$colors$info4" | "$colors$warning4" | "$colors$critical4" | "$colors$brand4" | "$colors$neutral5" | "$colors$neutralA5" | "$colors$primary5" | "$colors$accent5" | "$colors$success5" | "$colors$info5" | "$colors$warning5" | "$colors$critical5" | "$colors$brand5" | "$colors$neutral10" | "$colors$neutralA10" | "$colors$primary10" | "$colors$accent10" | "$colors$success10" | "$colors$info10" | "$colors$warning10" | "$colors$critical10" | "$colors$brand10" | "$colors$neutral9" | "$colors$neutralA9" | "$colors$primary9" | "$colors$accent9" | "$colors$success9" | "$colors$info9" | "$colors$warning9" | "$colors$critical9" | "$colors$brand9" | "$colors$neutral11" | "$colors$neutralA11" | "$colors$primary11" | "$colors$accent11" | "$colors$success11" | "$colors$info11" | "$colors$warning11" | "$colors$critical11" | "$colors$brand11" | "$colors$neutral6" | "$colors$neutralA6" | "$colors$primary6" | "$colors$accent6" | "$colors$success6" | "$colors$info6" | "$colors$warning6" | "$colors$critical6" | "$colors$brand6" | "$colors$neutral8" | "$colors$neutralA8" | "$colors$primary8" | "$colors$accent8" | "$colors$success8" | "$colors$info8" | "$colors$warning8" | "$colors$critical8" | "$colors$brand8" | "$colors$neutral13" | "$colors$neutralA13" | "$colors$primary13" | "$colors$accent13" | "$colors$success13" | "$colors$info13" | "$colors$warning13" | "$colors$critical13" | "$colors$brand13";
+    };
+    color?: undefined;
+};

package/dist/components/src/Typography/styles/helpers.d.ts

@@ -1,5 +1,5 @@
 import { ScaleValue } from "@vitality-ds/system";
-import { AVAILABLE_VARIANTS } from "../constants";
+import { AVAILABLE_VARIANTS } from "../constants/variants";
 export declare const getVariantStyles: (key: ScaleValue<"fontSizes"> | "inherit") => {
     fontSize: "inherit" | "$display100" | "$display200" | "$display300" | "$display400" | "$display500" | "$display600" | "$display700" | "$display800" | "$display900" | "$body" | "$caption" | "$pageTitle" | "$sectionTitle" | "$sectionSubtitle" | "$button" | "$textInput";
     fontWeight: "inherit" | "$display100" | "$display200" | "$display300" | "$display400" | "$display500" | "$display600" | "$display700" | "$display800" | "$display900" | "$body" | "$caption" | "$pageTitle" | "$sectionTitle" | "$sectionSubtitle" | "$button" | "$textInput";

package/dist/components/src/Typography/types.d.ts

@@ -1,12 +1,19 @@
 /// <reference types="react" />
-import { ComponentProps, ExcludedProps, VariantProps } from "@vitality-ds/system";
+import { ComponentProps, ExcludedProps, ScaleValue, VariantProps } from "@vitality-ds/system";
 import type { valueof } from "../helpers/logic/type-helpers";
 import { BaseTypography } from "./styled";
 export declare type AllowedTypographyHTMLElements = keyof Pick<JSX.IntrinsicElements, "caption" | "small" | "span" | "div" | "p" | "h6" | "h5" | "h4" | "h3" | "h2" | "h1">;
-export declare type TypographyProps = ExcludedProps & ComponentProps<typeof BaseTypography> & {
+export declare type AvailableColorVariants = VariantProps<typeof BaseTypography>["color"];
+export declare type ColorScaleValues = `$colors${ScaleValue<"colors">}`;
+export declare type ColorType = ColorScaleValues | AvailableColorVariants;
+export declare type TypographyProps = ExcludedProps & Omit<ComponentProps<typeof BaseTypography>, "color"> & {
     /**
      * Override the rendered HTML element one of a predefined set of options
      */
     htmlTag?: AllowedTypographyHTMLElements;
+    /**
+     * Accepts any valid colour returned by getColorScaleValueByUseCase() or a pre-set list of legacy color names
+     */
+    color?: ColorType;
 };
 export declare type TypographyVariantOptions = valueof<Pick<VariantProps<typeof BaseTypography>, "variant">>;

package/dist/esm/Typography/constants/colors.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export var AVAILABLE_COLOR_VARIANTS = ["inherit", "hiContrast", "primary", "lowContrast", "disabled", "accent", "info", "moderate", "critical", "warning", "success"];

package/dist/esm/Typography/hooks/useTypographyColors.js

@@ -0,0 +1,10 @@
+import { useMemo } from "react";
+import { AVAILABLE_COLOR_VARIANTS } from "../constants/colors";
+import { isColorVariantValue } from "../logic";
+var useTypographyColors = function useTypographyColors(colorString) {
+  var result = useMemo(function () {
+    return isColorVariantValue(colorString, AVAILABLE_COLOR_VARIANTS);
+  }, [colorString, AVAILABLE_COLOR_VARIANTS]);
+  return result;
+};
+export default useTypographyColors;

package/dist/esm/Typography/hooks/useTypographyElementFromTagProp.js

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { DEFAULT_VARIANT_ELEMENTS } from "../constants";
+import { DEFAULT_VARIANT_ELEMENTS } from "../constants/variants";
 import { getHtmlElementFromHtmlTagProp } from "../logic";
 var useTypographyElementFromTagProp = function useTypographyElementFromTagProp(htmlTag, variant) {
   var renderedComponent = useMemo(function () {

package/dist/esm/Typography/index.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "style", "as", "css", "htmlTag", "variant", "color", "textAlign"];
 import React from "react";
+import useTypographyColors from "./hooks/useTypographyColors";
 import useTypographyElementFromTagProp from "./hooks/useTypographyElementFromTagProp";
 import { BaseTypography } from "./styled";
 function Typography(_ref) {
@@ -17,11 +18,11 @@ function Typography(_ref) {
     textAlign = _ref.textAlign,
     rest = _objectWithoutProperties(_ref, _excluded);
   var renderedComponent = useTypographyElementFromTagProp(htmlTag, variant);
+  var colorProps = useTypographyColors(color);
   return /*#__PURE__*/React.createElement(BaseTypography, _extends({}, rest, {
     as: renderedComponent,
-    color: color,
     variant: variant,
     textAlign: textAlign
-  }));
+  }, colorProps));
 }
 export default Typography;

package/dist/esm/Typography/logic.js

@@ -2,4 +2,19 @@
 export var getHtmlElementFromHtmlTagProp = function getHtmlElementFromHtmlTagProp(options, htmlTag, variant) {
   var variantKey = variant;
   return htmlTag || options[variantKey];
+};
+var isVariantValue = function isVariantValue(value, availableVariants) {
+  return availableVariants.includes(value);
+};
+export var isColorVariantValue = function isColorVariantValue(value, availableVariants) {
+  if (isVariantValue(value, availableVariants)) {
+    return {
+      color: value
+    };
+  }
+  return {
+    css: {
+      color: value
+    }
+  };
 };

package/dist/esm/Typography/logic.spec.js

@@ -1,5 +1,6 @@
-import { DEFAULT_VARIANT_ELEMENTS } from "./constants";
-import { getHtmlElementFromHtmlTagProp } from "./logic";
+import { AVAILABLE_COLOR_VARIANTS } from "./constants/colors";
+import { DEFAULT_VARIANT_ELEMENTS } from "./constants/variants";
+import { getHtmlElementFromHtmlTagProp, isColorVariantValue } from "./logic";
 describe("getHtmlElementFromHtmlTagProp", function () {
   it("should return the htmlTag tag if it is provided to the function", function () {
     var tag = getHtmlElementFromHtmlTagProp(DEFAULT_VARIANT_ELEMENTS, "p", "pageTitle");
@@ -9,4 +10,18 @@ describe("getHtmlElementFromHtmlTagProp", function () {
     var tag = getHtmlElementFromHtmlTagProp(DEFAULT_VARIANT_ELEMENTS, null, "pageTitle");
     expect(tag).toEqual(DEFAULT_VARIANT_ELEMENTS.pageTitle);
   });
+  it("should return the color prop and variant when passed a valid color variant", function () {
+    var colorProp = isColorVariantValue("hiContrast", AVAILABLE_COLOR_VARIANTS);
+    expect(colorProp).toEqual({
+      color: "hiContrast"
+    });
+  });
+  it("should return the css prop and color value when passed a value from the getColorScaleValueByUseCase() function", function () {
+    var colorProp = isColorVariantValue("$colors$warning9", AVAILABLE_COLOR_VARIANTS);
+    expect(colorProp).toEqual({
+      css: {
+        color: "$colors$warning9"
+      }
+    });
+  });
 });

package/dist/esm/Typography/styles/BaseTypography.styles.js

@@ -3,7 +3,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
 import { BaseIcon } from "@vitality-ds/icons";
 import { colorUseCases, css, getColorScaleValueByUseCase } from "@vitality-ds/system";
-import { AVAILABLE_MAX_LINES, AVAILABLE_VARIANTS } from "../constants";
+import { AVAILABLE_MAX_LINES, AVAILABLE_VARIANTS } from "../constants/variants";
 import { getMaxLines, getMaxLinesVariants, getVariantStyles } from "./helpers";
 var text = colorUseCases.text;
 var overflowSharedStyles = {