@orfium/ictinus 4.11.0 → 4.12.0

package/dist/theme/palette.d.ts

@@ -44,6 +44,7 @@ export declare type Palette = {
 export declare type formFieldStyles = 'filled' | 'outlined' | 'elevated';
 /**
  * this function picks either white or black color based on the background that is passed
- * swatches are calculated based on accessibility by the design team and splited to those two colors
+ * swatches are calculated based on accessibility by getAATextColor function and splited to those two colors
  **/
 export declare const pickTextColorFromSwatches: (color: typeof flatColors[number], shade: typeof colorShades[number]) => string;
+export declare const getAATextColor: (color: string) => string;

package/dist/theme/palette.js

@@ -1,7 +1,9 @@
 "use strict";
 
 exports.__esModule = true;
-exports.pickTextColorFromSwatches = exports.mainTypes = exports.colorShades = exports.paleColors = exports.flatColors = exports.BASE_SHADE = exports.neutralColors = void 0;
+exports.getAATextColor = exports.pickTextColorFromSwatches = exports.mainTypes = exports.colorShades = exports.paleColors = exports.flatColors = exports.BASE_SHADE = exports.neutralColors = void 0;
+
+var _polished = require("polished");
 
 var _index = require("./index");
 
@@ -48,31 +50,21 @@ exports.mainTypes = mainTypes;
 
 /**
  * this function picks either white or black color based on the background that is passed
- * swatches are calculated based on accessibility by the design team and splited to those two colors
+ * swatches are calculated based on accessibility by getAATextColor function and splited to those two colors
  **/
 var pickTextColorFromSwatches = function pickTextColorFromSwatches(color, shade) {
-  var colors950To750 = ['greyScale', 'darkGrey', 'lightGrey', 'red', 'magenta', 'purple', 'darkBlue', 'blue', 'lightBlue', 'teal', 'green', 'yellow', 'orange', 'darkOrange', 'neutralBlack'];
-  var colorsForWhiteText = {
-    950: colors950To750,
-    900: colors950To750,
-    850: colors950To750,
-    800: colors950To750,
-    750: colors950To750,
-    700: ['greyScale', 'darkGrey', 'lightGrey', 'red', 'magenta', 'purple', 'darkBlue', 'blue', 'lightBlue', 'green', 'orange', 'darkOrange'],
-    650: ['greyScale', 'darkGrey', 'lightGrey', 'red', 'magenta', 'purple', 'darkBlue', 'blue', 'green', 'orange', 'darkOrange'],
-    600: ['greyScale', 'darkGrey', 'red', 'magenta', 'purple', 'darkBlue', 'blue', 'darkOrange'],
-    550: ['greyScale', 'darkGrey', 'red', 'magenta', 'purple', 'darkBlue', 'blue', 'darkOrange'],
-    500: ['darkGrey', 'magenta', 'purple', 'darkBlue', 'blue', 'darkOrange'],
-    450: ['darkGrey', 'purple', 'darkBlue', 'blue', 'darkOrange'],
-    400: ['darkGrey', 'darkOrange'],
-    350: ['darkGrey', 'darkOrange']
-  };
-  var pickedShade = colorsForWhiteText[shade];
-  var pickedColor = pickedShade && (pickedShade == null ? void 0 : pickedShade.find(function (item) {
-    return item === color;
-  })) || color === 'neutralBlack';
   var palette = (0, _utils.enhancePaletteWithShades)(_palette.lightPaletteConfig);
-  return pickedColor ? '#fff' : (0, _index.getColor)(palette)('darkGrey', 850);
+  var hexColorCode = (0, _index.getColor)(palette)(color, shade);
+  return getAATextColor(hexColorCode);
+};
+
+exports.pickTextColorFromSwatches = pickTextColorFromSwatches;
+
+var getAATextColor = function getAATextColor(color) {
+  var palette = (0, _utils.enhancePaletteWithShades)(_palette.lightPaletteConfig);
+  var white = palette.white;
+  var black = palette.black;
+  return (0, _polished.getContrast)(color, black) > (0, _polished.getContrast)(color, white) ? black : white;
 };
 
-exports.pickTextColorFromSwatches = pickTextColorFromSwatches;
+exports.getAATextColor = getAATextColor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "4.11.0",
+  "version": "4.12.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",