@codecademy/gamut-styles 17.9.1-alpha.2ea313.0 → 17.9.1-alpha.3e8b72.0

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "17.9.1-alpha.2ea313.0",
+  "version": "17.9.1-alpha.3e8b72.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
-    "@codecademy/variance": "0.24.1-alpha.2ea313.0",
+    "@codecademy/variance": "0.24.1-alpha.3e8b72.0",
     "@emotion/is-prop-valid": "^1.1.0",
     "polished": "^4.1.2"
   },
@@ -34,5 +34,5 @@
   "scripts": {
     "build": "nx build @codecademy/gamut-styles"
   },
-  "gitHead": "00defd5b4502540be2284c18a8d5476485be7974"
+  "gitHead": "3eab6a6745552c0c03fb049875d22255f5a34a13"
 }

package/dist/AssetProvider.d.ts

@@ -1,2 +0,0 @@
-export declare const createFontLinks: () => import("react/jsx-runtime").JSX.Element[];
-export declare const AssetProvider: () => import("react/jsx-runtime").JSX.Element;

package/dist/AssetProvider.js

@@ -1,20 +0,0 @@
-import { webFonts } from './remoteAssets/fonts';
-
-/*
- * Only preload woff2 fonts, since woff1 are only included as fallbacks.
- */
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-export const createFontLinks = () => webFonts.filter(f => f.extensions.includes('woff2')).map(({
-  filePath
-}) => /*#__PURE__*/_jsx("link", {
-  as: "font",
-  crossOrigin: "anonymous",
-  href: `${filePath}.woff2`,
-  rel: "preload",
-  type: "font/woff2"
-}, filePath));
-export const AssetProvider = () => {
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: createFontLinks()
-  });
-};

package/dist/Background.d.ts

@@ -1,6 +0,0 @@
-import { ComponentProps } from 'react';
-import { ColorMode, Colors } from './ColorMode';
-export interface BackgroundProps extends Omit<ComponentProps<typeof ColorMode>, 'mode' | 'alwaysSetVariables' | 'bg'> {
-    bg: Colors;
-}
-export declare const Background: import("react").ForwardRefExoticComponent<Omit<BackgroundProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Background.js

@@ -1,66 +0,0 @@
-import { getContrast } from 'polished';
-import { forwardRef, useCallback, useMemo } from 'react';
-import { ColorMode, useColorModes } from './ColorMode';
-import { jsx as _jsx } from "react/jsx-runtime";
-const isColorAlias = (mode, color) => {
-  return Object.keys(mode).includes(color);
-};
-export const Background = /*#__PURE__*/forwardRef(({
-  bg,
-  ...rest
-}, ref) => {
-  const [active, activeColors, modes, getColorValue] = useColorModes();
-
-  /** If a color alias was used then look up the true color key from the active mode */
-  const trueColor = useMemo(() => {
-    if (isColorAlias(activeColors, bg)) {
-      return activeColors[bg];
-    }
-    return bg;
-  }, [bg, activeColors]);
-  const getTextContrast = useCallback(foreground => {
-    return getContrast(getColorValue(foreground), getColorValue(trueColor));
-  }, [trueColor, getColorValue]);
-
-  /**
-   * This compares the contrast of the selected background color
-   * and each color modes body text and returns the mode that has
-   * the highest contrast standard. This is not perfect as it is
-   * probable that certain color modes will never be reachable if
-   * there are more than 2 color modes.
-   *
-   * This does not guarantee a level of A/AA/AA compliance.
-   */
-
-  const accessibleMode = useMemo(() => {
-    const {
-      [active]: activeMode,
-      ...otherModes
-    } = modes;
-    const possibleModes = Object.entries(otherModes);
-
-    /**
-     * Reduce all remaining modes to the mode key with the highest contrast
-     * value.
-     *
-     * TODO: Add a tiebreaker.  This could possibly have other dimensions as
-     * it will likely fail to return a mode outside of the lightest and
-     * darkest versions.
-     */
-    const [highestContrastMode] = possibleModes.reduce(([prevMode, prevContrast], [mode, {
-      text
-    }]) => {
-      const contrast = getTextContrast(text);
-
-      // Keep the higher contrast mode.
-      return contrast > prevContrast ? [mode, contrast] : [prevMode, prevContrast];
-    }, [active, getTextContrast(activeMode.text)]);
-    return highestContrastMode;
-  }, [modes, active, getTextContrast]);
-  return /*#__PURE__*/_jsx(ColorMode, {
-    ...rest,
-    bg: bg,
-    mode: accessibleMode,
-    ref: ref
-  });
-});