Create text stories

ts/mediaEditor/util/color.ts

@@ -5,29 +5,33 @@ function getRatio(min: number, max: number, value: number) {
   return (value - min) / (max - min);
 }
 
+const MAX_BLACK = 7;
+const MIN_WHITE = 95;
+
 function getHSLValues(percentage: number): [number, number, number] {
-  if (percentage <= 10) {
-    return [0, 0, 1 - getRatio(0, 10, percentage)];
+  if (percentage <= MAX_BLACK) {
+    return [0, 0.5, 0.5 * getRatio(0, MAX_BLACK, percentage)];
   }
 
-  if (percentage < 20) {
-    return [0, 0.5, 0.5 * getRatio(10, 20, percentage)];
+  if (percentage >= MIN_WHITE) {
+    return [0, 0, Math.min(1, 0.5 + getRatio(MIN_WHITE, 100, percentage))];
   }
 
-  const ratio = getRatio(20, 100, percentage);
+  const ratio = getRatio(MAX_BLACK, MIN_WHITE, percentage);
 
-  return [360 * ratio, 1, 0.5];
-}
-
-export function getHSL(percentage: number): string {
-  const [h, s, l] = getHSLValues(percentage);
-  return `hsl(${h}, ${s * 100}%, ${l * 100}%)`;
+  return [338 * ratio, 1, 0.5];
 }
 
 // https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative
-export function getRGBA(percentage: number, alpha = 1): string {
-  const [h, s, l] = getHSLValues(percentage);
-
+function hslToRGB(
+  h: number,
+  s: number,
+  l: number
+): {
+  r: number;
+  g: number;
+  b: number;
+} {
   const a = s * Math.min(l, 1 - l);
 
   function f(n: number): number {
@@ -35,13 +39,31 @@ export function getRGBA(percentage: number, alpha = 1): string {
     return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
   }
 
-  const rgbValue = [
-    Math.round(255 * f(0)),
-    Math.round(255 * f(8)),
-    Math.round(255 * f(4)),
-  ]
-    .map(String)
-    .join(',');
+  return {
+    r: Math.round(255 * f(0)),
+    g: Math.round(255 * f(8)),
+    b: Math.round(255 * f(4)),
+  };
+}
+
+export function getHSL(percentage: number): string {
+  const [h, s, l] = getHSLValues(percentage);
+  return `hsl(${h}, ${s * 100}%, ${l * 100}%)`;
+}
+
+export function getRGBANumber(percentage: number): number {
+  const [h, s, l] = getHSLValues(percentage);
+  const { r, g, b } = hslToRGB(h, s, l);
+
+  // eslint-disable-next-line no-bitwise
+  return 0x100000000 + ((255 << 24) | ((255 & r) << 16) | ((255 & g) << 8) | b);
+}
+
+export function getRGBA(percentage: number, alpha = 1): string {
+  const [h, s, l] = getHSLValues(percentage);
+  const { r, g, b } = hslToRGB(h, s, l);
+
+  const rgbValue = [r, g, b].map(String).join(',');
 
   return `rgba(${rgbValue},${alpha})`;
 }

ts/mediaEditor/util/getTextStyleAttributes.ts

@@ -26,13 +26,13 @@ export function getTextStyleAttributes(
       return { fill: color, strokeWidth: 0, textBackgroundColor: '' };
     case TextStyle.Highlight:
       return {
-        fill: hueSliderValue <= 5 ? '#000' : '#fff',
+        fill: hueSliderValue >= 95 ? '#000' : '#fff',
         strokeWidth: 0,
         textBackgroundColor: color,
       };
     case TextStyle.Outline:
       return {
-        fill: hueSliderValue <= 5 ? '#000' : '#fff',
+        fill: hueSliderValue >= 95 ? '#000' : '#fff',
         stroke: color,
         strokeWidth: 2,
         textBackgroundColor: '',