@workday/canvas-kit-react 11.0.0-alpha.726-next.0 → 11.0.0-alpha.760-next.0

package/icon/lib/AppletIcon.tsx

@@ -2,9 +2,14 @@ import * as React from 'react';
 import {colors, BrandingColor, CanvasColor} from '@workday/canvas-kit-react/tokens';
 import {CanvasAppletIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
-import {Icon, IconProps} from './Icon';
+import {Svg, SvgProps, svgStencil} from './Svg';
 import {createComponent} from '@workday/canvas-kit-react/common';
+import {handleCsProp, createStencil, px2rem, cssVar} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
 
+/**
+ * @deprecated Interface `AppletIconStyles` will be removed in a future version. All props will be moved inside `AppletIconProps`.
+ */
 export interface AppletIconStyles {
   /**
    * The icon color hue. Must use a member of the `AppletIcon.Colors` static enum.
@@ -13,6 +18,9 @@ export interface AppletIconStyles {
   color?: BrandingColor;
 }
 
+/**
+ * @deprecated `appletIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `appletIconStencil` instead.
+ */
 export const appletIconStyles = ({
   color = BrandingColor.Blueberry,
 }: AppletIconStyles): CSSObject => {
@@ -55,7 +63,7 @@ export const appletIconStyles = ({
   };
 };
 
-export interface AppletIconProps extends AppletIconStyles, Pick<IconProps, 'shouldMirror'> {
+export interface AppletIconProps extends AppletIconStyles, Pick<SvgProps, 'shouldMirror' | 'cs'> {
   /**
    * The icon to display from `@workday/canvas-applet-icons-web`.
    */
@@ -67,23 +75,56 @@ export interface AppletIconProps extends AppletIconStyles, Pick<IconProps, 'shou
   size?: number;
 }
 
+export const appletIconStencil = createStencil({
+  extends: svgStencil,
+  vars: {
+    color200: '',
+    color300: '',
+    color400: '',
+    color500: '',
+  },
+  base: ({color200, color300, color400, color500, size}) => ({
+    [size]: px2rem(92),
+    '& .color-100': {
+      fill: base.frenchVanilla100,
+    },
+    '& .color-200': {
+      fill: cssVar(color200, base.blueberry200),
+    },
+    '& .color-300': {
+      fill: cssVar(color300, base.blueberry300),
+    },
+    '& .color-400': {
+      fill: cssVar(color400, base.blueberry400),
+    },
+    '& .color-400-alpha-20': {
+      fill: cssVar(color400, base.blueberry400),
+    },
+    '& .color-500': {
+      fill: cssVar(color500, base.blueberry400),
+    },
+  }),
+});
+
 export const AppletIcon = createComponent('span')({
   displayName: 'AppletIcon',
-  Component: (
-    {size = 92, icon, color, shouldMirror, ...elemProps}: AppletIconProps,
-    ref,
-    Element
-  ) => {
+  Component: ({size, icon, color, ...elemProps}: AppletIconProps, ref, Element) => {
+    const colors = color && {
+      color200: base[`${color}200` as const],
+      color300: base[`${color}300` as const],
+      color400: base[`${color}400` as const],
+      color500: base[`${color}500` as const],
+    };
+
     return (
-      <Icon
+      <Svg
         src={icon}
         type={CanvasIconTypes.Applet}
-        styles={appletIconStyles({color})}
         as={Element}
-        size={size}
         ref={ref}
-        shouldMirror={shouldMirror}
-        {...elemProps}
+        {...handleCsProp(elemProps, [
+          appletIconStencil({...colors, size: size ? px2rem(size) : undefined}),
+        ])}
       />
     );
   },

package/icon/lib/Graphic.tsx

@@ -3,16 +3,22 @@ import {CanvasGraphic, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
 import {Svg, SvgProps} from './Svg';
 import {createComponent} from '@workday/canvas-kit-react/common';
+import {createStencil, createVars, cssVar, handleCsProp, px2rem} from '@workday/canvas-kit-styling';
 
+/**
+ * @deprecated Interface `GraphicStyles` will be removed in a future version. `grow` prop will be moved inside `GraphicProps`.
+ */
 export interface GraphicStyles {
   /**
    * The width of the Graphic in `px`. The Graphic's `width` takes precedence over its `height` in order to preserve its proportions.
    * @default width of graphic
+   * @deprecated Use `cs` to set width, `cs={{"& svg": {width: '1rem'}}}`
    */
   width?: number | string;
   /**
    * The height of the Graphic in `px`. If the Graphic's `height` is set, its `width` will be set to `100%`.
    * @default height of graphic
+   * @deprecated Use `cs` to set height, `cs={{"& svg": {height: '1rem'}}}`
    */
   height?: number | string;
   /**
@@ -22,13 +28,16 @@ export interface GraphicStyles {
   grow?: boolean;
 }
 
-export interface GraphicProps extends GraphicStyles, Pick<SvgProps, 'shouldMirror'> {
+export interface GraphicProps extends GraphicStyles, Pick<SvgProps, 'shouldMirror' | 'cs'> {
   /**
    * The graphic to display from `@workday/canvas-graphics-web`.
    */
   src: CanvasGraphic;
 }
 
+/**
+ * @deprecated `graphicStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `graphicStencil` instead.
+ */
 export const graphicStyles = ({width, height, grow}: GraphicStyles): CSSObject => {
   if (grow) {
     return {
@@ -59,22 +68,46 @@ export const graphicStyles = ({width, height, grow}: GraphicStyles): CSSObject =
   return {};
 };
 
+/**
+ * @deprecated Part of supporting deprecated `height` and `width` props
+ */
+const graphicVars = createVars('height', 'width');
+
+export const graphicStencil = createStencil({
+  base: {
+    '& svg': {
+      width: cssVar(graphicVars.width, '100%'),
+      height: cssVar(graphicVars.height, '100%'),
+    },
+  },
+  modifiers: {
+    grow: {
+      true: {
+        width: '100%',
+        '& svg': {
+          width: '100%',
+          height: '100%',
+        },
+      },
+    },
+  },
+});
+
 export const Graphic = createComponent('span')({
   displayName: 'Graphic',
-  Component: (
-    {grow = false, src, width, height, shouldMirror, ...elemProps}: GraphicProps,
-    ref,
-    Element
-  ) => {
+  Component: ({grow, width, height, ...elemProps}: GraphicProps, ref, Element) => {
     return (
       <Svg
-        src={src}
-        styles={graphicStyles({width, height, grow})}
         type={CanvasIconTypes.Graphic}
         as={Element}
         ref={ref}
-        shouldMirror={shouldMirror}
-        {...elemProps}
+        {...handleCsProp(elemProps, [
+          graphicStencil({grow}),
+          {
+            [graphicVars.height]: typeof height === 'number' ? px2rem(height) : height,
+            [graphicVars.width]: typeof width === 'number' ? px2rem(width) : width,
+          },
+        ])}
       />
     );
   },

package/icon/lib/Svg.tsx

@@ -1,13 +1,13 @@
-import {CSSObject} from '@emotion/styled';
 import * as React from 'react';
 import {CanvasIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {validateIconType} from './utils';
-import {createComponent, styled, StyledType} from '@workday/canvas-kit-react/common';
-import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {BoxProps, mergeStyles} from '@workday/canvas-kit-react/layout';
+import {createStencil} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
 
 export interface SvgProps extends BoxProps {
   src: CanvasIcon;
-  styles?: CSSObject;
   type: CanvasIconTypes;
   /**
    * If set to `true`, transform the SVG's x-axis to mirror the graphic
@@ -16,22 +16,40 @@ export interface SvgProps extends BoxProps {
   shouldMirror?: boolean;
 }
 
-const StyledIconSpan = styled(Box.as('span'))<
-  StyledType & Pick<SvgProps, 'shouldMirror' | 'styles'>
->(
-  {
+export const svgStencil = createStencil({
+  vars: {
+    /** set width and height of svg element */
+    size: '',
+  },
+  base: ({size}) => ({
+    boxSizing: 'border-box',
     display: 'inline-block',
-    '> svg': {display: 'block'},
+    '> svg': {
+      display: 'block',
+      width: size,
+      height: size,
+    },
+  }),
+  modifiers: {
+    shouldMirror: {
+      true: {
+        transform: 'scaleX(-1)',
+      },
+    },
   },
-  ({shouldMirror, styles}) => ({
-    ...styles,
-    transform: shouldMirror ? 'scaleX(-1)' : undefined,
-  })
-);
+});
+
+/** @deprecated */
+export const transformColorNameToToken = (color?: string) => {
+  if (color && color in base) {
+    return base[color as keyof typeof base];
+  }
+  return color;
+};
 
 export const Svg = createComponent('span')({
   displayName: 'Svg',
-  Component: ({src, type, ...elemProps}: SvgProps, ref, Element) => {
+  Component: ({shouldMirror, src, type, ...elemProps}: SvgProps, ref, Element) => {
     try {
       validateIconType(src, type);
     } catch (e) {
@@ -40,11 +58,10 @@ export const Svg = createComponent('span')({
     }
 
     return (
-      <StyledIconSpan
-        as={Element}
-        dangerouslySetInnerHTML={{__html: src.svg}}
-        {...elemProps}
+      <Element
         ref={ref}
+        dangerouslySetInnerHTML={{__html: src.svg}}
+        {...mergeStyles(elemProps, svgStencil({shouldMirror}))}
       />
     );
   },

package/icon/lib/SystemIcon.tsx

@@ -2,52 +2,81 @@ import * as React from 'react';
 import {iconColors} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
-import {Icon, IconProps} from './Icon';
 import {createComponent, getColor} from '@workday/canvas-kit-react/common';
-import {SystemPropValues} from '@workday/canvas-kit-react/layout';
+import {cssVar, createStencil, handleCsProp, px2rem, createVars} from '@workday/canvas-kit-styling';
+import {base} from '@workday/canvas-tokens-web';
+import {Svg, SvgProps, svgStencil, transformColorNameToToken} from './Svg';
 
+/**
+ * @deprecated Interface `SystemIconStyles` will be removed in a future version. `accent`, `color`, background props will be moved inside `GraphicProps`.
+ */
 export interface SystemIconStyles {
   /**
    * The accent color of the SystemIcon. This overrides `color`.
    */
-  accent?: SystemPropValues['color'];
+  accent?: string;
   /**
    * The accent color of the SystemIcon on hover. This overrides `colorHover`.
+   * @deprecated `accentHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+   * ```tsx
+   * '&:hover': {
+   *   [systemIconStencil.vars.accent]: desiredAccentHoverColor
+   * }
+   * ```
    */
-  accentHover?: SystemPropValues['color'];
+  accentHover?: string;
   /**
    * The background color of the SystemIcon.
    * @default transparent
    */
-  background?: SystemPropValues['color'];
+  background?: string;
   /**
    * The background color of the SystemIcon on hover.
    * @default transparent
+   * @deprecated `backgroundHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+   * ```tsx
+   * '&:hover': {
+   *   [systemIconStencil.vars.background]: desiredBackgroundHoverColor
+   * }
+   * ```
    */
-  backgroundHover?: SystemPropValues['color'];
+  backgroundHover?: string;
   /**
-   * The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overriden by `accent` and `fill`.
-   * @default iconColors.standard
+   * The color of the SystemIcon. This defines `accent` and `fill`. `color` may be overwritten by `accent` and `fill`.
+   * @default base.licorice200
    */
-  color?: SystemPropValues['color'];
+  color?: string;
   /**
-   * The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overriden by `accentHover` and `fillHover`.
-   * @default iconColors.hover
+   * The hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overwritten by `accentHover` and `fillHover`.
+   * @default base.licorice200
+   * @deprecated `colorHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+   * ```tsx
+   * '&:hover': {
+   *   [systemIconStencil.vars.color]: desiredColorHoverColor
+   * }
+   * ```
    */
-  colorHover?: SystemPropValues['color'];
+  colorHover?: string;
   /**
    * The fill color of the SystemIcon. This overrides `color`.
+   * @deprecated `fill` is deprecated and will be removed in a future version. Please use `color` and specify `accent` color if you want `accent` to be different from `color`.
    */
-  fill?: SystemPropValues['color'];
+  fill?: string;
   /**
    * The fill color of the SystemIcon on hover. This overrides `colorHover`.
+   * @deprecated `fillHover` is deprecated and will be removed in a future version. Please use the following instead in your style overrides:
+   * ```tsx
+   * '&:hover': {
+   *   [systemIconStencil.vars.fill]: desiredFillHoverColor
+   * }
+   * ```
    */
-  fillHover?: SystemPropValues['color'];
+  fillHover?: string;
 }
 
 export interface SystemIconProps
   extends SystemIconStyles,
-    Omit<IconProps, 'src' | 'fill' | 'type'> {
+    Omit<SvgProps, 'src' | 'type' | 'fill' | 'background' | 'color'> {
   /**
    * The icon to display from `@workday/canvas-system-icons-web`.
    */
@@ -55,9 +84,18 @@ export interface SystemIconProps
   /**
    * The size of the SystemIcon in `px`.
    */
-  size?: number | string | undefined;
+  size?: number | string;
 }
 
+/**
+ * @deprecated This style utility function is deprecated and will be removed in a future version. We'll track usage over time to prevent unnecessary burden on upgrading. Most of the time, this function is used in conjunction with styling `SystemIcon`. There are a few ways to override the colors used in `SystemIcon`.
+ * - Pass props directly to the `SystemIcon` component: `<SystemIcon color={color} {...etc} />
+ * - Style overrides using the `systemIconStencil`:
+ *   ```tsx
+ *   // styling container
+ *
+ *   ```
+ */
 export const systemIconStyles = ({
   accent,
   accentHover,
@@ -88,47 +126,104 @@ export const systemIconStyles = ({
   },
 });
 
+/**
+ * @deprecated These variables are being used for backward compatibility with existing hover props. Please use the following instead:
+ * ```tsx
+ * '&:hover': {
+ *   [systemIconStencil.vars.color]: desiredHoverColor
+ * }
+ * ```
+ */
+const deprecatedSystemIconVars = createVars(
+  'colorHover',
+  'fillHover',
+  'accentHover',
+  'backgroundHover'
+);
+
+export const systemIconStencil = createStencil({
+  extends: svgStencil,
+  vars: {
+    /**
+     * This will set the icon's color (both `.wd-icon-fill` and `.wd-icon-accent` SVG layers). Most
+     * of the time, this is the only color you need to change. Icons also have an accent layer. If you
+     * wish to change the accent layer independently, also set the `accentColor` variable
+     */
+    color: '',
+    accentColor: '',
+    backgroundColor: 'transparent',
+  },
+  base: ({accentColor, backgroundColor, color}) => ({
+    '& .wd-icon-fill': {
+      fill: cssVar(color, base.licorice200),
+    },
+    '& .wd-icon-accent, & .wd-icon-accent2': {
+      fill: cssVar(accentColor, cssVar(color, base.licorice200)),
+    },
+    '& .wd-icon-background': {
+      fill: backgroundColor,
+    },
+    // will be removed eventually
+    '&:where(:hover, .hover) .wd-icon-fill': {
+      fill: cssVar(
+        deprecatedSystemIconVars.fillHover,
+        cssVar(deprecatedSystemIconVars.colorHover, cssVar(color, base.licorice200))
+      ),
+    },
+    '&:where(:hover, .hover) .wd-icon-accent, & .wd-icon-accent2': {
+      fill: cssVar(
+        deprecatedSystemIconVars.accentHover,
+        cssVar(
+          deprecatedSystemIconVars.colorHover,
+          cssVar(accentColor, cssVar(color, base.licorice200))
+        )
+      ),
+    },
+    '&:where(:hover, .hover) .wd-icon-background': {
+      fill: cssVar(deprecatedSystemIconVars.backgroundHover, backgroundColor),
+    },
+  }),
+});
+
 export const SystemIcon = createComponent('span')({
   displayName: 'SystemIcon',
   Component: (
     {
-      background = 'transparent',
-      backgroundHover = 'transparent',
-      color = iconColors.standard,
-      colorHover = iconColors.hover,
+      size,
+      background,
+      backgroundHover,
+      color,
+      colorHover,
       icon,
       accent,
       accentHover,
       fill,
       fillHover,
-      size,
-      shouldMirror,
       ...elemProps
     }: SystemIconProps,
     ref,
     Element
   ) => {
-    const style = systemIconStyles({
-      accent,
-      accentHover,
-      background,
-      backgroundHover,
-      color,
-      colorHover,
-      fill,
-      fillHover,
-    });
-
     return (
-      <Icon
+      <Svg
+        as={Element}
         src={icon}
         type={CanvasIconTypes.System}
-        size={size}
-        as={Element}
-        shouldMirror={shouldMirror}
         ref={ref}
-        styles={style}
-        {...elemProps}
+        {...handleCsProp(elemProps, [
+          systemIconStencil({
+            size: typeof size === 'number' ? px2rem(size) : size,
+            color: transformColorNameToToken(fill || color),
+            accentColor: transformColorNameToToken(accent || color),
+            backgroundColor: transformColorNameToToken(background),
+          }),
+          {
+            [deprecatedSystemIconVars.colorHover]: colorHover && cssVar(colorHover),
+            [deprecatedSystemIconVars.fillHover]: fillHover && cssVar(fillHover),
+            [deprecatedSystemIconVars.accentHover]: accentHover && cssVar(accentHover),
+            [deprecatedSystemIconVars.backgroundHover]: backgroundHover && cssVar(backgroundHover),
+          },
+        ])}
       />
     );
   },

package/icon/lib/SystemIconCircle.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import styled from '@emotion/styled';
-import isPropValid from '@emotion/is-prop-valid';
-import {colors, borderRadius} from '@workday/canvas-kit-react/tokens';
-import {SystemIcon, SystemIconProps} from './SystemIcon';
+import {colors} from '@workday/canvas-kit-react/tokens';
+import {SystemIcon, SystemIconProps, systemIconStencil} from './SystemIcon';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {createComponent, getColor, pickForegroundColor} from '@workday/canvas-kit-react/common';
-import {SystemPropValues} from '@workday/canvas-kit-react/layout';
+import {createComponent, pickForegroundColor} from '@workday/canvas-kit-react/common';
+import {calc, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
+import {base, system} from '@workday/canvas-tokens-web';
+import {transformColorNameToToken} from './Svg';
 
 export enum SystemIconCircleSize {
   xs = 16,
@@ -19,9 +19,9 @@ export enum SystemIconCircleSize {
 export interface SystemIconCircleProps extends Pick<SystemIconProps, 'shouldMirror'> {
   /**
    * The background color of the SystemIconCircle from `@workday/canvas-colors-web`.
-   * @default colors.soap300
+   * @default base.soap300
    */
-  background?: SystemPropValues['color'];
+  background?: string;
   /**
    * The icon to display from `@workday/canvas-accent-icons-web`.
    */
@@ -33,60 +33,55 @@ export interface SystemIconCircleProps extends Pick<SystemIconProps, 'shouldMirr
   size?: SystemIconCircleSize | number;
 }
 
-const Container = styled('div', {
-  shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
-})<Pick<SystemIconCircleProps, 'background' | 'size'>>(
-  {
+const systemIconCircleStencil = createStencil({
+  vars: {
+    containerSize: '',
+    backgroundColor: '',
+    iconColor: '',
+  },
+  base: ({backgroundColor, containerSize, iconColor}) => ({
+    background: cssVar(backgroundColor, base.soap200),
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    padding: 0,
-    border: 0,
-    borderRadius: borderRadius.circle,
+    padding: system.space.zero,
+    border: 'none',
+    borderRadius: system.shape.round,
     boxSizing: 'border-box',
     overflow: 'hidden',
+    width: cssVar(containerSize, system.space.x10),
+    height: cssVar(containerSize, system.space.x10),
+    [systemIconStencil.vars.size]: calc.multiply(cssVar(containerSize, system.space.x10), 0.625),
+    [systemIconStencil.vars.color]: iconColor,
     '& img': {
       width: '100%',
       height: '100%',
     },
-  },
-  ({background}) => ({
-    background: getColor(background),
   }),
-  ({size}) => ({
-    width: size,
-    height: size,
-  })
-);
+});
 
 export const SystemIconCircle = createComponent('span')({
   displayName: 'SystemIconCircle',
-  Component: (
-    {
-      background = colors.soap200,
-      size = SystemIconCircleSize.l,
-      icon,
+  Component: ({background, size, icon, shouldMirror}: SystemIconCircleProps, ref, Element) => {
+    // `pickForegroundColor` hasn't support to use css variables to generate foregroundColor
+    const backgroundFallback =
+      background && !background.startsWith('--') ? background : colors.soap200;
+    const iconColor = pickForegroundColor(
+      backgroundFallback,
+      'rgba(0,0,0,0.65)',
+      colors.frenchVanilla100
+    );
 
-      shouldMirror,
-      ...elemProps
-    }: SystemIconCircleProps,
-    ref,
-    Element
-  ) => {
-    const iconColor = pickForegroundColor(background, 'rgba(0,0,0,0.65)', colors.frenchVanilla100);
-    const iconSize = size * 0.625;
     return (
-      <Container background={background} size={size} {...elemProps}>
-        <SystemIcon
-          icon={icon}
-          color={iconColor}
-          colorHover={iconColor}
-          as={Element}
-          size={iconSize}
-          ref={ref}
-          shouldMirror={shouldMirror}
-        />
-      </Container>
+      <div
+        {...systemIconCircleStencil({
+          containerSize: typeof size === 'number' ? px2rem(size) : size,
+          backgroundColor: transformColorNameToToken(background),
+          iconColor,
+        })}
+      >
+        <SystemIcon as={Element} ref={ref} icon={icon} shouldMirror={shouldMirror} />
+      </div>
     );
   },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "11.0.0-alpha.726-next.0",
+  "version": "11.0.0-alpha.760-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,10 +49,10 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.726-next.0",
-    "@workday/canvas-kit-styling": "^11.0.0-alpha.726-next.0",
+    "@workday/canvas-kit-popup-stack": "^11.0.0-alpha.760-next.0",
+    "@workday/canvas-kit-styling": "^11.0.0-alpha.760-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/canvas-tokens-web": "^1.0.2",
+    "@workday/canvas-tokens-web": "^1.3.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
     "csstype": "^3.0.2",
@@ -67,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "92313a01b7703822a67e7c7f7aff5460237f8ce7"
+  "gitHead": "567f7f389a35212b6f58050c9e0bf5f9834589c8"
 }