@chipmobilesdk/rn-theme 0.2.1 → 1.0.0

package/src/vendor/mcu/palettes/tonal_palette.ts

@@ -0,0 +1,172 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Vendored from material-foundation/material-color-utilities v0.4.0
+// (commit dd62982dfdefdfc9232ce8d76e122fb1c6d188ae, typescript/). Modified:
+// relative import specifiers drop the `.js` suffix so Metro and Jest resolve them.
+import {Hct} from '../hct/hct';
+
+/**
+ *  A convenience class for retrieving colors that are constant in hue and
+ *  chroma, but vary in tone.
+ */
+export class TonalPalette {
+  private readonly cache = new Map<number, number>();
+
+  /**
+   * @param argb ARGB representation of a color
+   * @return Tones matching that color's hue and chroma.
+   */
+  static fromInt(argb: number): TonalPalette {
+    const hct = Hct.fromInt(argb);
+    return TonalPalette.fromHct(hct);
+  }
+
+  /**
+   * @param hct Hct
+   * @return Tones matching that color's hue and chroma.
+   */
+  static fromHct(hct: Hct) {
+    return new TonalPalette(hct.hue, hct.chroma, hct);
+  }
+
+  /**
+   * @param hue HCT hue
+   * @param chroma HCT chroma
+   * @return Tones matching hue and chroma.
+   */
+  static fromHueAndChroma(hue: number, chroma: number): TonalPalette {
+    const keyColor = new KeyColor(hue, chroma).create();
+    return new TonalPalette(hue, chroma, keyColor);
+  }
+
+  private constructor(
+      readonly hue: number, readonly chroma: number, readonly keyColor: Hct) {}
+
+  /**
+   * @param tone HCT tone, measured from 0 to 100.
+   * @return ARGB representation of a color with that tone.
+   */
+  tone(tone: number): number {
+    let argb = this.cache.get(tone);
+    if (argb === undefined) {
+      if (tone == 99 && Hct.isYellow(this.hue)) {
+        argb = this.averageArgb(this.tone(98), this.tone(100));
+      } else {
+        argb = Hct.from(this.hue, this.chroma, tone).toInt();
+      }
+      this.cache.set(tone, argb);
+    }
+    return argb;
+  }
+
+  /**
+   * @param tone HCT tone.
+   * @return HCT representation of a color with that tone.
+   */
+  getHct(tone: number): Hct {
+    return Hct.fromInt(this.tone(tone));
+  }
+
+  private averageArgb(argb1: number, argb2: number): number {
+    const red1 = (argb1 >>> 16) & 0xff;
+    const green1 = (argb1 >>> 8) & 0xff;
+    const blue1 = argb1 & 0xff;
+    const red2 = (argb2 >>> 16) & 0xff;
+    const green2 = (argb2 >>> 8) & 0xff;
+    const blue2 = argb2 & 0xff;
+    const red = Math.round((red1 + red2) / 2);
+    const green = Math.round((green1 + green2) / 2);
+    const blue = Math.round((blue1 + blue2) / 2);
+    return (255 << 24 | (red & 255) << 16 | (green & 255) << 8 |
+            (blue & 255)) >>>
+        0;
+  }
+}
+
+/**
+ * Key color is a color that represents the hue and chroma of a tonal palette
+ */
+class KeyColor {
+  // Cache that maps tone to max chroma to avoid duplicated HCT calculation.
+  private readonly chromaCache = new Map<number, number>();
+  private readonly maxChromaValue = 200.0;
+
+  constructor(readonly hue: number, readonly requestedChroma: number) {}
+
+  /**
+   * Creates a key color from a [hue] and a [chroma].
+   * The key color is the first tone, starting from T50, matching the given hue
+   * and chroma.
+   *
+   * @return Key color [Hct]
+   */
+  create(): Hct {
+    // Pivot around T50 because T50 has the most chroma available, on
+    // average. Thus it is most likely to have a direct answer.
+    const pivotTone = 50;
+    const toneStepSize = 1;
+    // Epsilon to accept values slightly higher than the requested chroma.
+    const epsilon = 0.01;
+
+    // Binary search to find the tone that can provide a chroma that is closest
+    // to the requested chroma.
+    let lowerTone = 0;
+    let upperTone = 100;
+    while (lowerTone < upperTone) {
+      const midTone = Math.floor((lowerTone + upperTone) / 2);
+      const isAscending =
+          this.maxChroma(midTone) < this.maxChroma(midTone + toneStepSize);
+      const sufficientChroma =
+          this.maxChroma(midTone) >= this.requestedChroma - epsilon;
+
+      if (sufficientChroma) {
+        // Either range [lowerTone, midTone] or [midTone, upperTone] has
+        // the answer, so search in the range that is closer the pivot tone.
+        if (Math.abs(lowerTone - pivotTone) < Math.abs(upperTone - pivotTone)) {
+          upperTone = midTone;
+        } else {
+          if (lowerTone === midTone) {
+            return Hct.from(this.hue, this.requestedChroma, lowerTone);
+          }
+          lowerTone = midTone;
+        }
+      } else {
+        // As there is no sufficient chroma in the midTone, follow the direction
+        // to the chroma peak.
+        if (isAscending) {
+          lowerTone = midTone + toneStepSize;
+        } else {
+          // Keep midTone for potential chroma peak.
+          upperTone = midTone;
+        }
+      }
+    }
+
+    return Hct.from(this.hue, this.requestedChroma, lowerTone);
+  }
+
+  // Find the maximum chroma for a given tone
+  private maxChroma(tone: number): number {
+    if (this.chromaCache.has(tone)) {
+      return this.chromaCache.get(tone)!;
+    }
+    const chroma = Hct.from(this.hue, this.maxChromaValue, tone).chroma;
+    this.chromaCache.set(tone, chroma);
+    return chroma;
+  }
+}

package/src/vendor/mcu/utils/color_utils.ts

@@ -0,0 +1,302 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Vendored from material-foundation/material-color-utilities v0.4.0
+// (commit dd62982dfdefdfc9232ce8d76e122fb1c6d188ae, typescript/). Modified:
+// relative import specifiers drop the `.js` suffix so Metro and Jest resolve them.
+// This file is automatically generated. Do not modify it.
+
+import * as mathUtils from './math_utils';
+
+/**
+ * Color science utilities.
+ *
+ * Utility methods for color science constants and color space
+ * conversions that aren't HCT or CAM16.
+ */
+
+const SRGB_TO_XYZ = [
+  [0.41233895, 0.35762064, 0.18051042],
+  [0.2126, 0.7152, 0.0722],
+  [0.01932141, 0.11916382, 0.95034478],
+];
+
+const XYZ_TO_SRGB = [
+  [
+    3.2413774792388685,
+    -1.5376652402851851,
+    -0.49885366846268053,
+  ],
+  [
+    -0.9691452513005321,
+    1.8758853451067872,
+    0.04156585616912061,
+  ],
+  [
+    0.05562093689691305,
+    -0.20395524564742123,
+    1.0571799111220335,
+  ],
+];
+
+const WHITE_POINT_D65 = [95.047, 100.0, 108.883];
+
+/**
+ * Converts a color from RGB components to ARGB format.
+ */
+export function argbFromRgb(red: number, green: number, blue: number): number {
+  return (255 << 24 | (red & 255) << 16 | (green & 255) << 8 | blue & 255) >>>
+      0;
+}
+
+/**
+ * Converts a color from linear RGB components to ARGB format.
+ */
+export function argbFromLinrgb(linrgb: number[]): number {
+  const r = delinearized(linrgb[0]);
+  const g = delinearized(linrgb[1]);
+  const b = delinearized(linrgb[2]);
+  return argbFromRgb(r, g, b);
+}
+
+/**
+ * Returns the alpha component of a color in ARGB format.
+ */
+export function alphaFromArgb(argb: number): number {
+  return argb >> 24 & 255;
+}
+
+/**
+ * Returns the red component of a color in ARGB format.
+ */
+export function redFromArgb(argb: number): number {
+  return argb >> 16 & 255;
+}
+
+/**
+ * Returns the green component of a color in ARGB format.
+ */
+export function greenFromArgb(argb: number): number {
+  return argb >> 8 & 255;
+}
+
+/**
+ * Returns the blue component of a color in ARGB format.
+ */
+export function blueFromArgb(argb: number): number {
+  return argb & 255;
+}
+
+/**
+ * Returns whether a color in ARGB format is opaque.
+ */
+export function isOpaque(argb: number): boolean {
+  return alphaFromArgb(argb) >= 255;
+}
+
+/**
+ * Converts a color from ARGB to XYZ.
+ */
+export function argbFromXyz(x: number, y: number, z: number): number {
+  const matrix = XYZ_TO_SRGB;
+  const linearR = matrix[0][0] * x + matrix[0][1] * y + matrix[0][2] * z;
+  const linearG = matrix[1][0] * x + matrix[1][1] * y + matrix[1][2] * z;
+  const linearB = matrix[2][0] * x + matrix[2][1] * y + matrix[2][2] * z;
+  const r = delinearized(linearR);
+  const g = delinearized(linearG);
+  const b = delinearized(linearB);
+  return argbFromRgb(r, g, b);
+}
+
+/**
+ * Converts a color from XYZ to ARGB.
+ */
+export function xyzFromArgb(argb: number): number[] {
+  const r = linearized(redFromArgb(argb));
+  const g = linearized(greenFromArgb(argb));
+  const b = linearized(blueFromArgb(argb));
+  return mathUtils.matrixMultiply([r, g, b], SRGB_TO_XYZ);
+}
+
+/**
+ * Converts a color represented in Lab color space into an ARGB
+ * integer.
+ */
+export function argbFromLab(l: number, a: number, b: number): number {
+  const whitePoint = WHITE_POINT_D65;
+  const fy = (l + 16.0) / 116.0;
+  const fx = a / 500.0 + fy;
+  const fz = fy - b / 200.0;
+  const xNormalized = labInvf(fx);
+  const yNormalized = labInvf(fy);
+  const zNormalized = labInvf(fz);
+  const x = xNormalized * whitePoint[0];
+  const y = yNormalized * whitePoint[1];
+  const z = zNormalized * whitePoint[2];
+  return argbFromXyz(x, y, z);
+}
+
+/**
+ * Converts a color from ARGB representation to L*a*b*
+ * representation.
+ *
+ * @param argb the ARGB representation of a color
+ * @return a Lab object representing the color
+ */
+export function labFromArgb(argb: number): number[] {
+  const linearR = linearized(redFromArgb(argb));
+  const linearG = linearized(greenFromArgb(argb));
+  const linearB = linearized(blueFromArgb(argb));
+  const matrix = SRGB_TO_XYZ;
+  const x =
+      matrix[0][0] * linearR + matrix[0][1] * linearG + matrix[0][2] * linearB;
+  const y =
+      matrix[1][0] * linearR + matrix[1][1] * linearG + matrix[1][2] * linearB;
+  const z =
+      matrix[2][0] * linearR + matrix[2][1] * linearG + matrix[2][2] * linearB;
+  const whitePoint = WHITE_POINT_D65;
+  const xNormalized = x / whitePoint[0];
+  const yNormalized = y / whitePoint[1];
+  const zNormalized = z / whitePoint[2];
+  const fx = labF(xNormalized);
+  const fy = labF(yNormalized);
+  const fz = labF(zNormalized);
+  const l = 116.0 * fy - 16;
+  const a = 500.0 * (fx - fy);
+  const b = 200.0 * (fy - fz);
+  return [l, a, b];
+}
+
+/**
+ * Converts an L* value to an ARGB representation.
+ *
+ * @param lstar L* in L*a*b*
+ * @return ARGB representation of grayscale color with lightness
+ * matching L*
+ */
+export function argbFromLstar(lstar: number): number {
+  const y = yFromLstar(lstar);
+  const component = delinearized(y);
+  return argbFromRgb(component, component, component);
+}
+
+/**
+ * Computes the L* value of a color in ARGB representation.
+ *
+ * @param argb ARGB representation of a color
+ * @return L*, from L*a*b*, coordinate of the color
+ */
+export function lstarFromArgb(argb: number): number {
+  const y = xyzFromArgb(argb)[1];
+  return 116.0 * labF(y / 100.0) - 16.0;
+}
+
+/**
+ * Converts an L* value to a Y value.
+ *
+ * L* in L*a*b* and Y in XYZ measure the same quantity, luminance.
+ *
+ * L* measures perceptual luminance, a linear scale. Y in XYZ
+ * measures relative luminance, a logarithmic scale.
+ *
+ * @param lstar L* in L*a*b*
+ * @return Y in XYZ
+ */
+export function yFromLstar(lstar: number): number {
+  return 100.0 * labInvf((lstar + 16.0) / 116.0);
+}
+
+/**
+ * Converts a Y value to an L* value.
+ *
+ * L* in L*a*b* and Y in XYZ measure the same quantity, luminance.
+ *
+ * L* measures perceptual luminance, a linear scale. Y in XYZ
+ * measures relative luminance, a logarithmic scale.
+ *
+ * @param y Y in XYZ
+ * @return L* in L*a*b*
+ */
+export function lstarFromY(y: number): number {
+  return labF(y / 100.0) * 116.0 - 16.0;
+}
+
+/**
+ * Linearizes an RGB component.
+ *
+ * @param rgbComponent 0 <= rgb_component <= 255, represents R/G/B
+ * channel
+ * @return 0.0 <= output <= 100.0, color channel converted to
+ * linear RGB space
+ */
+export function linearized(rgbComponent: number): number {
+  const normalized = rgbComponent / 255.0;
+  if (normalized <= 0.040449936) {
+    return normalized / 12.92 * 100.0;
+  } else {
+    return Math.pow((normalized + 0.055) / 1.055, 2.4) * 100.0;
+  }
+}
+
+/**
+ * Delinearizes an RGB component.
+ *
+ * @param rgbComponent 0.0 <= rgb_component <= 100.0, represents
+ * linear R/G/B channel
+ * @return 0 <= output <= 255, color channel converted to regular
+ * RGB space
+ */
+export function delinearized(rgbComponent: number): number {
+  const normalized = rgbComponent / 100.0;
+  let delinearized = 0.0;
+  if (normalized <= 0.0031308) {
+    delinearized = normalized * 12.92;
+  } else {
+    delinearized = 1.055 * Math.pow(normalized, 1.0 / 2.4) - 0.055;
+  }
+  return mathUtils.clampInt(0, 255, Math.round(delinearized * 255.0));
+}
+
+/**
+ * Returns the standard white point; white on a sunny day.
+ *
+ * @return The white point
+ */
+export function whitePointD65(): number[] {
+  return WHITE_POINT_D65;
+}
+
+function labF(t: number): number {
+  const e = 216.0 / 24389.0;
+  const kappa = 24389.0 / 27.0;
+  if (t > e) {
+    return Math.pow(t, 1.0 / 3.0);
+  } else {
+    return (kappa * t + 16) / 116;
+  }
+}
+
+function labInvf(ft: number): number {
+  const e = 216.0 / 24389.0;
+  const kappa = 24389.0 / 27.0;
+  const ft3 = ft * ft * ft;
+  if (ft3 > e) {
+    return ft3;
+  } else {
+    return (116 * ft - 16) / kappa;
+  }
+}

package/src/vendor/mcu/utils/math_utils.ts

@@ -0,0 +1,148 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Vendored from material-foundation/material-color-utilities v0.4.0
+// (commit dd62982dfdefdfc9232ce8d76e122fb1c6d188ae, typescript/). Modified:
+// relative import specifiers drop the `.js` suffix so Metro and Jest resolve them.
+// This file is automatically generated. Do not modify it.
+
+/**
+ * Utility methods for mathematical operations.
+ */
+
+/**
+ * The signum function.
+ *
+ * @return 1 if num > 0, -1 if num < 0, and 0 if num = 0
+ */
+export function signum(num: number): number {
+  if (num < 0) {
+    return -1;
+  } else if (num === 0) {
+    return 0;
+  } else {
+    return 1;
+  }
+}
+
+/**
+ * The linear interpolation function.
+ *
+ * @return start if amount = 0 and stop if amount = 1
+ */
+export function lerp(start: number, stop: number, amount: number): number {
+  return (1.0 - amount) * start + amount * stop;
+}
+
+/**
+ * Clamps an integer between two integers.
+ *
+ * @return input when min <= input <= max, and either min or max
+ * otherwise.
+ */
+export function clampInt(min: number, max: number, input: number): number {
+  if (input < min) {
+    return min;
+  } else if (input > max) {
+    return max;
+  }
+
+  return input;
+}
+
+/**
+ * Clamps an integer between two floating-point numbers.
+ *
+ * @return input when min <= input <= max, and either min or max
+ * otherwise.
+ */
+export function clampDouble(min: number, max: number, input: number): number {
+  if (input < min) {
+    return min;
+  } else if (input > max) {
+    return max;
+  }
+
+  return input;
+}
+
+/**
+ * Sanitizes a degree measure as an integer.
+ *
+ * @return a degree measure between 0 (inclusive) and 360
+ * (exclusive).
+ */
+export function sanitizeDegreesInt(degrees: number): number {
+  degrees = degrees % 360;
+  if (degrees < 0) {
+    degrees = degrees + 360;
+  }
+  return degrees;
+}
+
+/**
+ * Sanitizes a degree measure as a floating-point number.
+ *
+ * @return a degree measure between 0.0 (inclusive) and 360.0
+ * (exclusive).
+ */
+export function sanitizeDegreesDouble(degrees: number): number {
+  degrees = degrees % 360.0;
+  if (degrees < 0) {
+    degrees = degrees + 360.0;
+  }
+  return degrees;
+}
+
+/**
+ * Sign of direction change needed to travel from one angle to
+ * another.
+ *
+ * For angles that are 180 degrees apart from each other, both
+ * directions have the same travel distance, so either direction is
+ * shortest. The value 1.0 is returned in this case.
+ *
+ * @param from The angle travel starts from, in degrees.
+ * @param to The angle travel ends at, in degrees.
+ * @return -1 if decreasing from leads to the shortest travel
+ * distance, 1 if increasing from leads to the shortest travel
+ * distance.
+ */
+export function rotationDirection(from: number, to: number): number {
+  const increasingDifference = sanitizeDegreesDouble(to - from);
+  return increasingDifference <= 180.0 ? 1.0 : -1.0;
+}
+
+/**
+ * Distance of two points on a circle, represented using degrees.
+ */
+export function differenceDegrees(a: number, b: number): number {
+  return 180.0 - Math.abs(Math.abs(a - b) - 180.0);
+}
+
+/**
+ * Multiplies a 1x3 row vector with a 3x3 matrix.
+ */
+export function matrixMultiply(row: number[], matrix: number[][]): number[] {
+  const a =
+      row[0] * matrix[0][0] + row[1] * matrix[0][1] + row[2] * matrix[0][2];
+  const b =
+      row[0] * matrix[1][0] + row[1] * matrix[1][1] + row[2] * matrix[1][2];
+  const c =
+      row[0] * matrix[2][0] + row[1] * matrix[2][1] + row[2] * matrix[2][2];
+  return [a, b, c];
+}

package/src/types/style.ts

@@ -1,26 +0,0 @@
-import type { BrandColors } from './brand';
-import type { ThemeColors } from './colors';
-import type { RadiusTokens, ShadowTokens, SpacingTokens, ZIndexTokens } from './tokens';
-import type { Typography, TypographyConfig } from './typography';
-
-export type DeepPartial<T> = {
-	[K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
-};
-
-export interface StyleTheme {
-	color: ThemeColors;
-	typography: Typography;
-	spacing: SpacingTokens;
-	radius: RadiusTokens;
-	shadow: ShadowTokens;
-	zIndex: ZIndexTokens;
-}
-
-export interface StyleConfig {
-	brandColors: BrandColors;
-	typographyConfig?: TypographyConfig;
-	overrides?: {
-		light?: DeepPartial<StyleTheme>;
-		dark?: DeepPartial<StyleTheme>;
-	};
-}

package/src/unistyles/types.ts

@@ -1,24 +0,0 @@
-import 'react-native-unistyles';
-import type { StyleTheme } from '../types';
-
-/**
- * Use this interface for module augmentation in your host application
- * so that react-native-unistyles is aware of the theme token shapes.
- *
- * Example (src/unistyles/setup.ts):
- * ```ts
- * import type { UnistylesThemeFromBrand } from '@chipmobilesdk/rn-theme';
- *
- * declare module 'react-native-unistyles' {
- *   export interface UnistylesThemes extends UnistylesThemeFromBrand {}
- * }
- * ```
- */
-export interface UnistylesThemeFromBrand {
-	light: StyleTheme;
-	dark: StyleTheme;
-}
-
-declare module 'react-native-unistyles' {
-	export interface UnistylesThemes extends UnistylesThemeFromBrand { }
-}