From 4532786cd1b67ea0cfcc100e982a4ac690959f5d Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu@chibicode.com>
Date: Thu, 24 Oct 2019 23:36:35 -0700
Subject: [PATCH] Update 15

---
 scripts/lib/initialExpressionContainers.ts |   3 +-
 src/components/ConditionalBorder.tsx       |  18 +-
 src/components/VariableExpressionBox.tsx   |  15 +-
 src/components/VariableShadeContext.tsx    |   1 +
 src/contents/15.en.tsx                     |  36 +-
 src/contents/15.jp.tsx                     |  84 +++-
 src/lib/runners/olqy.json                  | 461 +++++++++++----------
 src/lib/theme/zIndices.ts                  |  10 +-
 8 files changed, 361 insertions(+), 267 deletions(-)

diff --git a/scripts/lib/initialExpressionContainers.ts b/scripts/lib/initialExpressionContainers.ts
index 44a2522d2..2256b6da8 100644
--- a/scripts/lib/initialExpressionContainers.ts
+++ b/scripts/lib/initialExpressionContainers.ts
@@ -2260,7 +2260,8 @@ export const bgid = initializeExpressionContainer([
         }
       }
     }
-  }
+  },
+  { name: 'blankNumber', highlighted: true }
 ])
 
 export const jypn = initializeExpressionContainer([
diff --git a/src/components/ConditionalBorder.tsx b/src/components/ConditionalBorder.tsx
index b017ac90a..21e2b8b46 100644
--- a/src/components/ConditionalBorder.tsx
+++ b/src/components/ConditionalBorder.tsx
@@ -75,9 +75,11 @@ const ConditionalBorder = ({
     falseCase: falseCaseColor,
     condition: conditionColor
   }[type]
-  const { shadeNonNumbers, shadeNonHighlightedFunc } = useContext(
-    VariableShadeContext
-  )
+  const {
+    shadeNonNumbers,
+    shadeNonHighlightedFunc,
+    shadeNonFactorial
+  } = useContext(VariableShadeContext)
   return (
     <>
       {shaded && <Shade />}
@@ -90,7 +92,11 @@ const ConditionalBorder = ({
             left: 0.3em;
             display: inline-flex;
             font-size: ${fontSize(variableSizeOverrides || variableSize)};
-            opacity: ${shadeNonNumbers || shadeNonHighlightedFunc ? 0.7 : 1};
+            opacity: ${shadeNonNumbers ||
+            shadeNonHighlightedFunc ||
+            shadeNonFactorial
+              ? 0.7
+              : 1};
           `}
         >
           {type === 'trueCase' && (
@@ -119,7 +125,9 @@ const ConditionalBorder = ({
           border-top: 2px solid ${colors('indigo300')};
         `}
       >
-        {(shadeNonNumbers || shadeNonHighlightedFunc) && <Shade />}
+        {(shadeNonNumbers || shadeNonHighlightedFunc || shadeNonFactorial) && (
+          <Shade />
+        )}
       </span>
     </>
   )
diff --git a/src/components/VariableExpressionBox.tsx b/src/components/VariableExpressionBox.tsx
index 18ad857c3..4e34e27f0 100644
--- a/src/components/VariableExpressionBox.tsx
+++ b/src/components/VariableExpressionBox.tsx
@@ -404,9 +404,11 @@ const VariableExpressionBox = ({ expression }: VariableExpressionBoxProps) => {
   const { hidePriorities, variableSize } = useContext(ExpressionRunnerContext)
   const { conditionalState } = useContext(ConditionalContext)
   const { binaryState } = useContext(BinaryContext)
-  const { shadeNonNumbers, shadeNonHighlightedFunc } = useContext(
-    VariableShadeContext
-  )
+  const {
+    shadeNonNumbers,
+    shadeNonHighlightedFunc,
+    shadeNonFactorial
+  } = useContext(VariableShadeContext)
 
   return (
     <>
@@ -416,7 +418,12 @@ const VariableExpressionBox = ({ expression }: VariableExpressionBoxProps) => {
           expression.name !== 'B')) ||
         (shadeNonHighlightedFunc &&
           (expression.shorthandFunc === undefined ||
-            expression.highlightType !== 'initialHighlighted'))) && (
+            expression.highlightType !== 'initialHighlighted')) ||
+        (shadeNonFactorial &&
+          expression.shorthandNumber !== 3 &&
+          expression.shorthandNumber !== 4 &&
+          expression.shorthandNumber !== 5 &&
+          expression.name !== 'blankNumber')) && (
         <span
           css={css`
             display: block;
diff --git a/src/components/VariableShadeContext.tsx b/src/components/VariableShadeContext.tsx
index feb10d849..a8cf245e9 100644
--- a/src/components/VariableShadeContext.tsx
+++ b/src/components/VariableShadeContext.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 export interface VariableShadeContextProps {
   shadeNonNumbers?: true
   shadeNonHighlightedFunc?: true
+  shadeNonFactorial?: true
 }
 
 export const variableShadeContextDefault: VariableShadeContextProps = {}
diff --git a/src/contents/15.en.tsx b/src/contents/15.en.tsx
index ee4180e0d..154789e88 100644
--- a/src/contents/15.en.tsx
+++ b/src/contents/15.en.tsx
@@ -14,6 +14,7 @@ import Emoji from 'src/components/Emoji'
 import EmojiSeparator from 'src/components/EmojiSeparator'
 import EmojiForLetter from 'src/components/EmojiForLetter'
 import EmojiNumber from 'src/components/EmojiNumber'
+import VariableShadeContext from 'src/components/VariableShadeContext'
 import ExpressionRunnerSeparator from 'src/components/ExpressionRunnerSeparator'
 import CustomEmoji from 'src/components/CustomEmoji'
 import TwoColGrid from 'src/components/TwoColGrid'
@@ -1156,17 +1157,28 @@ export default () => (
                         }
                       />
                       <P>
-                        先ほどの弁当箱の上の部分に <EmojiNumber number={3} />{' '}
-                        を追加してみたぞ。
+                        これを計算するには、
+                        <HighlightBold>
+                          先ほどの弁当箱の上の{' '}
+                          <CustomEmoji type="blankNumber" /> の部分を{' '}
+                          <EmojiNumber number={3} /> にして実行すればいい
+                        </HighlightBold>
+                        んだ。
                       </P>
                     </>
                   )
                 }
               ]}
             />
-            <R.Zlfx>
-              上の部分に <EmojiNumber number={3} /> を追加
-            </R.Zlfx>
+            <VariableShadeContext.Provider value={{ shadeNonFactorial: true }}>
+              <R.Kmgw>
+                <CustomEmoji type="blankNumber" /> の部分を…
+              </R.Kmgw>
+              <ExpressionRunnerSeparator />
+              <R.Zlfx>
+                <EmojiNumber number={3} /> に変えて実行すればいい
+              </R.Zlfx>
+            </VariableShadeContext.Provider>
             <BubbleQuotes
               quotes={[
                 {
@@ -1260,7 +1272,7 @@ export default () => (
               ]}
             />
             <R.Zlfx>
-              上の部分に <EmojiNumber number={3} /> を追加
+              上の部分を <EmojiNumber number={3} /> に
               <br />
               して
               <H args={{ name: 'run' }} /> すると…
@@ -1314,17 +1326,19 @@ export default () => (
                         }
                       />
                       <P>
-                        先ほどの弁当箱の上の部分に <EmojiNumber number={4} />{' '}
-                        を追加してみたぞ。
+                        先ほどの弁当箱の上の部分を <EmojiNumber number={4} />{' '}
+                        にしてみたぞ。
                       </P>
                     </>
                   )
                 }
               ]}
             />
-            <R.Txxw>
-              上の部分に <EmojiNumber number={4} /> を追加
-            </R.Txxw>
+            <VariableShadeContext.Provider value={{ shadeNonFactorial: true }}>
+              <R.Txxw>
+                上の部分を <EmojiNumber number={4} /> に
+              </R.Txxw>
+            </VariableShadeContext.Provider>
             <BubbleQuotes
               quotes={[
                 {
diff --git a/src/contents/15.jp.tsx b/src/contents/15.jp.tsx
index 9627a4cbd..33b924f23 100644
--- a/src/contents/15.jp.tsx
+++ b/src/contents/15.jp.tsx
@@ -8,6 +8,7 @@ import {
   UlLi
 } from 'src/components/ContentTags'
 import H from 'src/components/H'
+import VariableShadeContext from 'src/components/VariableShadeContext'
 import BubbleQuotes from 'src/components/BubbleQuotes'
 import Emoji from 'src/components/Emoji'
 import EmojiSeparator from 'src/components/EmojiSeparator'
@@ -183,12 +184,47 @@ export default () => (
                     </>
                   )
                 },
+                {
+                  type: 'thinking',
+                  children: (
+                    <>
+                      <P>分かった。では、</P>
+                      <Ul>
+                        <UlLi>
+                          <Highlight>
+                            <CustomEmoji type="blankNumberPurple" /> に{' '}
+                            <EmojiNumber number={2} /> を、
+                          </Highlight>
+                        </UlLi>
+                        <UlLi>
+                          <Highlight>
+                            <CustomEmoji type="blankNumberPink" /> に{' '}
+                            <EmojiNumber number={3} /> を当てはめてみよう。
+                          </Highlight>
+                        </UlLi>
+                      </Ul>
+                    </>
+                  )
+                }
+              ]}
+            />
+            <R.Jwsj>
+              <CustomEmoji type="blankNumberPurple" /> と{' '}
+              <CustomEmoji type="blankNumberPink" /> に…
+            </R.Jwsj>
+            <ExpressionRunnerSeparator />
+            <R.Mlnt>
+              <EmojiNumber number={2} /> と <EmojiNumber number={3} />{' '}
+              を当てはめてみる
+            </R.Mlnt>
+            <BubbleQuotes
+              quotes={[
                 {
                   type: 'thinking',
                   children: (
                     <>
                       <P>
-                        分かった。じゃあ、こちらの{' '}
+                        では、こちらの{' '}
                         <HighlightBold>
                           <EmojiNumber number={2} /> に変換できる弁当箱
                         </HighlightBold>
@@ -219,20 +255,13 @@ export default () => (
                           }}
                         />
                       </R.Dmrz>
-                      <P>
-                        <CustomEmoji type="blankNumberPurple" /> と{' '}
-                        <CustomEmoji type="blankNumberPink" />{' '}
-                        の部分に入れてみよう。
-                      </P>
+                      <P>それぞれ使ってみよう！</P>
                     </>
                   )
                 }
               ]}
             />
-            <R.Hvfb>
-              <CustomEmoji type="blankNumberPurple" /> と{' '}
-              <CustomEmoji type="blankNumberPink" /> の部分に…
-            </R.Hvfb>
+            <R.Mlnt></R.Mlnt>
             <ExpressionRunnerSeparator />
             <R.Tpyg>
               <EmojiNumber number={2} /> と <EmojiNumber number={3} />{' '}
@@ -1133,17 +1162,28 @@ export default () => (
                         }
                       />
                       <P>
-                        先ほどの弁当箱の上の部分に <EmojiNumber number={3} />{' '}
-                        を追加してみたぞ。
+                        これを計算するには、
+                        <HighlightBold>
+                          先ほどの弁当箱の上の{' '}
+                          <CustomEmoji type="blankNumber" /> の部分を{' '}
+                          <EmojiNumber number={3} /> にして実行すればいい
+                        </HighlightBold>
+                        んだ。
                       </P>
                     </>
                   )
                 }
               ]}
             />
-            <R.Zlfx>
-              上の部分に <EmojiNumber number={3} /> を追加
-            </R.Zlfx>
+            <VariableShadeContext.Provider value={{ shadeNonFactorial: true }}>
+              <R.Kmgw>
+                <CustomEmoji type="blankNumber" /> の部分を…
+              </R.Kmgw>
+              <ExpressionRunnerSeparator />
+              <R.Zlfx>
+                <EmojiNumber number={3} /> に変えて実行すればいい
+              </R.Zlfx>
+            </VariableShadeContext.Provider>
             <BubbleQuotes
               quotes={[
                 {
@@ -1237,7 +1277,7 @@ export default () => (
               ]}
             />
             <R.Zlfx>
-              上の部分に <EmojiNumber number={3} /> を追加
+              上の部分を <EmojiNumber number={3} /> に
               <br />
               して
               <H args={{ name: 'run' }} /> すると…
@@ -1291,17 +1331,19 @@ export default () => (
                         }
                       />
                       <P>
-                        先ほどの弁当箱の上の部分に <EmojiNumber number={4} />{' '}
-                        を追加してみたぞ。
+                        先ほどの弁当箱の上の部分を <EmojiNumber number={4} />{' '}
+                        にしてみたぞ。
                       </P>
                     </>
                   )
                 }
               ]}
             />
-            <R.Txxw>
-              上の部分に <EmojiNumber number={4} /> を追加
-            </R.Txxw>
+            <VariableShadeContext.Provider value={{ shadeNonFactorial: true }}>
+              <R.Txxw>
+                上の部分を <EmojiNumber number={4} /> に
+              </R.Txxw>
+            </VariableShadeContext.Provider>
             <BubbleQuotes
               quotes={[
                 {
diff --git a/src/lib/runners/olqy.json b/src/lib/runners/olqy.json
index 7358d02f8..f6df81394 100644
--- a/src/lib/runners/olqy.json
+++ b/src/lib/runners/olqy.json
@@ -3,232 +3,267 @@
     {
       "expression": {
         "arg": {
+          "name": "blankNumber",
+          "highlightType": "initialHighlighted",
+          "topLeftBadgeType": "none",
+          "bottomRightBadgeType": "none",
+          "type": "variable",
+          "argPriorityAgg": [
+            2
+          ],
+          "funcPriorityAgg": [],
+          "emphasizePriority": false,
+          "bound": true,
+          "maxNestedFunctionDepth": 0
+        },
+        "func": {
           "arg": {
-            "name": "a",
-            "highlightType": "initialHighlighted",
-            "topLeftBadgeType": "none",
-            "bottomRightBadgeType": "none",
-            "type": "variable",
-            "argPriorityAgg": [
-              1
-            ],
-            "funcPriorityAgg": [],
-            "emphasizePriority": false,
-            "bound": false,
-            "maxNestedFunctionDepth": 0
-          },
-          "body": {
             "arg": {
-              "name": "f",
+              "name": "a",
               "highlightType": "initialHighlighted",
               "topLeftBadgeType": "none",
               "bottomRightBadgeType": "none",
               "type": "variable",
-              "argPriorityAgg": [],
+              "argPriorityAgg": [
+                1
+              ],
               "funcPriorityAgg": [],
               "emphasizePriority": false,
               "bound": false,
               "maxNestedFunctionDepth": 0
             },
             "body": {
-              "type": "conditional",
-              "state": "default",
-              "checkType": "isZero",
-              "condition": {
-                "arg": {
-                  "name": "f",
-                  "highlightType": "default",
-                  "topLeftBadgeType": "none",
-                  "bottomRightBadgeType": "none",
-                  "type": "variable",
-                  "argPriorityAgg": [
-                    1
-                  ],
-                  "funcPriorityAgg": [],
-                  "emphasizePriority": false,
-                  "bound": true,
+              "arg": {
+                "name": "f",
+                "highlightType": "initialHighlighted",
+                "topLeftBadgeType": "none",
+                "bottomRightBadgeType": "none",
+                "type": "variable",
+                "argPriorityAgg": [],
+                "funcPriorityAgg": [],
+                "emphasizePriority": false,
+                "bound": false,
+                "maxNestedFunctionDepth": 0
+              },
+              "body": {
+                "type": "conditional",
+                "state": "default",
+                "checkType": "isZero",
+                "condition": {
+                  "arg": {
+                    "name": "f",
+                    "highlightType": "default",
+                    "topLeftBadgeType": "none",
+                    "bottomRightBadgeType": "none",
+                    "type": "variable",
+                    "argPriorityAgg": [
+                      1
+                    ],
+                    "funcPriorityAgg": [],
+                    "emphasizePriority": false,
+                    "bound": true,
+                    "maxNestedFunctionDepth": 0
+                  },
+                  "func": {
+                    "name": "shorthandFunc",
+                    "highlightType": "default",
+                    "topLeftBadgeType": "none",
+                    "bottomRightBadgeType": "none",
+                    "type": "variable",
+                    "argPriorityAgg": [],
+                    "funcPriorityAgg": [
+                      1
+                    ],
+                    "emphasizePriority": false,
+                    "bound": true,
+                    "shorthandFunc": "pred",
+                    "maxNestedFunctionDepth": 0
+                  },
+                  "state": "default",
+                  "type": "call",
+                  "priority": 1,
                   "maxNestedFunctionDepth": 0
                 },
-                "func": {
-                  "name": "shorthandFunc",
+                "trueCase": {
+                  "name": "shorthandNumber",
                   "highlightType": "default",
                   "topLeftBadgeType": "none",
                   "bottomRightBadgeType": "none",
                   "type": "variable",
                   "argPriorityAgg": [],
                   "funcPriorityAgg": [
-                    1
+                    2
                   ],
                   "emphasizePriority": false,
                   "bound": true,
-                  "shorthandFunc": "pred",
+                  "shorthandNumber": 1,
                   "maxNestedFunctionDepth": 0
                 },
-                "state": "default",
-                "type": "call",
-                "priority": 1,
-                "maxNestedFunctionDepth": 0
-              },
-              "trueCase": {
-                "name": "shorthandNumber",
-                "highlightType": "default",
-                "topLeftBadgeType": "none",
-                "bottomRightBadgeType": "none",
-                "type": "variable",
-                "argPriorityAgg": [],
-                "funcPriorityAgg": [
-                  2
-                ],
-                "emphasizePriority": false,
-                "bound": true,
-                "shorthandNumber": 1,
-                "maxNestedFunctionDepth": 0
-              },
-              "falseCase": {
-                "type": "binary",
-                "binaryType": "multiply",
-                "first": {
-                  "arg": {
+                "falseCase": {
+                  "type": "binary",
+                  "binaryType": "multiply",
+                  "first": {
                     "arg": {
-                      "name": "f",
-                      "highlightType": "default",
-                      "topLeftBadgeType": "none",
-                      "bottomRightBadgeType": "none",
-                      "type": "variable",
-                      "argPriorityAgg": [
-                        2,
-                        5,
-                        3,
-                        4
-                      ],
-                      "funcPriorityAgg": [],
-                      "emphasizePriority": false,
-                      "bound": true,
+                      "arg": {
+                        "name": "f",
+                        "highlightType": "default",
+                        "topLeftBadgeType": "none",
+                        "bottomRightBadgeType": "none",
+                        "type": "variable",
+                        "argPriorityAgg": [
+                          2,
+                          5,
+                          3,
+                          4
+                        ],
+                        "funcPriorityAgg": [],
+                        "emphasizePriority": false,
+                        "bound": true,
+                        "maxNestedFunctionDepth": 0
+                      },
+                      "func": {
+                        "name": "shorthandFunc",
+                        "highlightType": "default",
+                        "topLeftBadgeType": "none",
+                        "bottomRightBadgeType": "none",
+                        "type": "variable",
+                        "argPriorityAgg": [],
+                        "funcPriorityAgg": [
+                          4
+                        ],
+                        "emphasizePriority": false,
+                        "bound": true,
+                        "shorthandFunc": "pred",
+                        "maxNestedFunctionDepth": 0
+                      },
+                      "state": "default",
+                      "type": "call",
+                      "priority": 4,
                       "maxNestedFunctionDepth": 0
                     },
                     "func": {
-                      "name": "shorthandFunc",
+                      "name": "a",
                       "highlightType": "default",
                       "topLeftBadgeType": "none",
                       "bottomRightBadgeType": "none",
                       "type": "variable",
                       "argPriorityAgg": [],
                       "funcPriorityAgg": [
-                        4
+                        3
                       ],
                       "emphasizePriority": false,
                       "bound": true,
-                      "shorthandFunc": "pred",
                       "maxNestedFunctionDepth": 0
                     },
                     "state": "default",
                     "type": "call",
-                    "priority": 4,
+                    "priority": 3,
                     "maxNestedFunctionDepth": 0
                   },
-                  "func": {
-                    "name": "a",
+                  "second": {
+                    "name": "f",
                     "highlightType": "default",
                     "topLeftBadgeType": "none",
                     "bottomRightBadgeType": "none",
                     "type": "variable",
                     "argPriorityAgg": [],
                     "funcPriorityAgg": [
-                      3
+                      5
                     ],
                     "emphasizePriority": false,
                     "bound": true,
                     "maxNestedFunctionDepth": 0
                   },
                   "state": "default",
-                  "type": "call",
-                  "priority": 3,
+                  "priority": 5,
                   "maxNestedFunctionDepth": 0
                 },
-                "second": {
-                  "name": "f",
-                  "highlightType": "default",
-                  "topLeftBadgeType": "none",
-                  "bottomRightBadgeType": "none",
-                  "type": "variable",
-                  "argPriorityAgg": [],
-                  "funcPriorityAgg": [
-                    5
-                  ],
-                  "emphasizePriority": false,
-                  "bound": true,
-                  "maxNestedFunctionDepth": 0
-                },
-                "state": "default",
-                "priority": 5,
+                "priority": 2,
                 "maxNestedFunctionDepth": 0
               },
-              "priority": 2,
-              "maxNestedFunctionDepth": 0
+              "type": "function",
+              "maxNestedFunctionDepth": 1
             },
             "type": "function",
-            "maxNestedFunctionDepth": 1
+            "maxNestedFunctionDepth": 2
           },
-          "type": "function",
-          "maxNestedFunctionDepth": 2
-        },
-        "func": {
-          "arg": {
-            "name": "a",
-            "highlightType": "initialHighlighted",
-            "topLeftBadgeType": "none",
-            "bottomRightBadgeType": "none",
-            "type": "variable",
-            "argPriorityAgg": [],
-            "funcPriorityAgg": [
-              1
-            ],
-            "emphasizePriority": false,
-            "bound": false,
-            "maxNestedFunctionDepth": 0
-          },
-          "body": {
+          "func": {
             "arg": {
+              "name": "a",
+              "highlightType": "initialHighlighted",
+              "topLeftBadgeType": "none",
+              "bottomRightBadgeType": "none",
+              "type": "variable",
+              "argPriorityAgg": [],
+              "funcPriorityAgg": [
+                1,
+                2
+              ],
+              "emphasizePriority": false,
+              "bound": false,
+              "maxNestedFunctionDepth": 0
+            },
+            "body": {
               "arg": {
-                "name": "b",
-                "highlightType": "initialHighlighted",
-                "topLeftBadgeType": "none",
-                "bottomRightBadgeType": "none",
-                "type": "variable",
-                "argPriorityAgg": [
-                  1
-                ],
-                "funcPriorityAgg": [],
-                "emphasizePriority": false,
-                "bound": false,
-                "maxNestedFunctionDepth": 0
-              },
-              "body": {
                 "arg": {
+                  "name": "b",
+                  "highlightType": "initialHighlighted",
+                  "topLeftBadgeType": "none",
+                  "bottomRightBadgeType": "none",
+                  "type": "variable",
+                  "argPriorityAgg": [
+                    1
+                  ],
+                  "funcPriorityAgg": [],
+                  "emphasizePriority": false,
+                  "bound": false,
+                  "maxNestedFunctionDepth": 0
+                },
+                "body": {
                   "arg": {
-                    "name": "b",
-                    "highlightType": "initialHighlighted",
-                    "topLeftBadgeType": "none",
-                    "bottomRightBadgeType": "none",
-                    "type": "variable",
-                    "argPriorityAgg": [
-                      1,
-                      2
-                    ],
-                    "funcPriorityAgg": [],
-                    "emphasizePriority": false,
-                    "bound": true,
+                    "arg": {
+                      "name": "b",
+                      "highlightType": "initialHighlighted",
+                      "topLeftBadgeType": "none",
+                      "bottomRightBadgeType": "none",
+                      "type": "variable",
+                      "argPriorityAgg": [
+                        1,
+                        2
+                      ],
+                      "funcPriorityAgg": [],
+                      "emphasizePriority": false,
+                      "bound": true,
+                      "maxNestedFunctionDepth": 0
+                    },
+                    "func": {
+                      "name": "b",
+                      "highlightType": "initialHighlighted",
+                      "topLeftBadgeType": "none",
+                      "bottomRightBadgeType": "none",
+                      "type": "variable",
+                      "argPriorityAgg": [],
+                      "funcPriorityAgg": [
+                        2
+                      ],
+                      "emphasizePriority": false,
+                      "bound": true,
+                      "maxNestedFunctionDepth": 0
+                    },
+                    "state": "default",
+                    "type": "call",
+                    "priority": 2,
                     "maxNestedFunctionDepth": 0
                   },
                   "func": {
-                    "name": "b",
+                    "name": "a",
                     "highlightType": "initialHighlighted",
                     "topLeftBadgeType": "none",
                     "bottomRightBadgeType": "none",
                     "type": "variable",
                     "argPriorityAgg": [],
                     "funcPriorityAgg": [
-                      2
+                      1
                     ],
                     "emphasizePriority": false,
                     "bound": true,
@@ -236,11 +271,15 @@
                   },
                   "state": "default",
                   "type": "call",
-                  "priority": 2,
+                  "priority": 1,
                   "maxNestedFunctionDepth": 0
                 },
-                "func": {
-                  "name": "a",
+                "type": "function",
+                "maxNestedFunctionDepth": 1
+              },
+              "func": {
+                "arg": {
+                  "name": "b",
                   "highlightType": "initialHighlighted",
                   "topLeftBadgeType": "none",
                   "bottomRightBadgeType": "none",
@@ -250,58 +289,54 @@
                     1
                   ],
                   "emphasizePriority": false,
-                  "bound": true,
+                  "bound": false,
                   "maxNestedFunctionDepth": 0
                 },
-                "state": "default",
-                "type": "call",
-                "priority": 1,
-                "maxNestedFunctionDepth": 0
-              },
-              "type": "function",
-              "maxNestedFunctionDepth": 1
-            },
-            "func": {
-              "arg": {
-                "name": "b",
-                "highlightType": "initialHighlighted",
-                "topLeftBadgeType": "none",
-                "bottomRightBadgeType": "none",
-                "type": "variable",
-                "argPriorityAgg": [],
-                "funcPriorityAgg": [
-                  1
-                ],
-                "emphasizePriority": false,
-                "bound": false,
-                "maxNestedFunctionDepth": 0
-              },
-              "body": {
-                "arg": {
+                "body": {
                   "arg": {
-                    "name": "b",
-                    "highlightType": "initialHighlighted",
-                    "topLeftBadgeType": "none",
-                    "bottomRightBadgeType": "none",
-                    "type": "variable",
-                    "argPriorityAgg": [
-                      1,
-                      2
-                    ],
-                    "funcPriorityAgg": [],
-                    "emphasizePriority": false,
-                    "bound": true,
+                    "arg": {
+                      "name": "b",
+                      "highlightType": "initialHighlighted",
+                      "topLeftBadgeType": "none",
+                      "bottomRightBadgeType": "none",
+                      "type": "variable",
+                      "argPriorityAgg": [
+                        1,
+                        2
+                      ],
+                      "funcPriorityAgg": [],
+                      "emphasizePriority": false,
+                      "bound": true,
+                      "maxNestedFunctionDepth": 0
+                    },
+                    "func": {
+                      "name": "b",
+                      "highlightType": "initialHighlighted",
+                      "topLeftBadgeType": "none",
+                      "bottomRightBadgeType": "none",
+                      "type": "variable",
+                      "argPriorityAgg": [],
+                      "funcPriorityAgg": [
+                        2
+                      ],
+                      "emphasizePriority": false,
+                      "bound": true,
+                      "maxNestedFunctionDepth": 0
+                    },
+                    "state": "default",
+                    "type": "call",
+                    "priority": 2,
                     "maxNestedFunctionDepth": 0
                   },
                   "func": {
-                    "name": "b",
+                    "name": "a",
                     "highlightType": "initialHighlighted",
                     "topLeftBadgeType": "none",
                     "bottomRightBadgeType": "none",
                     "type": "variable",
                     "argPriorityAgg": [],
                     "funcPriorityAgg": [
-                      2
+                      1
                     ],
                     "emphasizePriority": false,
                     "bound": true,
@@ -309,45 +344,31 @@
                   },
                   "state": "default",
                   "type": "call",
-                  "priority": 2,
+                  "priority": 1,
                   "maxNestedFunctionDepth": 0
                 },
-                "func": {
-                  "name": "a",
-                  "highlightType": "initialHighlighted",
-                  "topLeftBadgeType": "none",
-                  "bottomRightBadgeType": "none",
-                  "type": "variable",
-                  "argPriorityAgg": [],
-                  "funcPriorityAgg": [
-                    1
-                  ],
-                  "emphasizePriority": false,
-                  "bound": true,
-                  "maxNestedFunctionDepth": 0
-                },
-                "state": "default",
-                "type": "call",
-                "priority": 1,
-                "maxNestedFunctionDepth": 0
+                "type": "function",
+                "maxNestedFunctionDepth": 1
               },
-              "type": "function",
+              "state": "default",
+              "type": "call",
+              "priority": 1,
               "maxNestedFunctionDepth": 1
             },
-            "state": "default",
-            "type": "call",
-            "priority": 1,
-            "maxNestedFunctionDepth": 1
+            "type": "function",
+            "maxNestedFunctionDepth": 2
           },
-          "type": "function",
+          "state": "default",
+          "type": "call",
+          "priority": 1,
           "maxNestedFunctionDepth": 2
         },
         "state": "default",
         "type": "call",
-        "priority": 1,
+        "priority": 2,
         "maxNestedFunctionDepth": 2
       },
-      "numLeafNodes": 13,
+      "numLeafNodes": 14,
       "containerState": "ready",
       "previouslyChangedExpressionState": "default"
     }
diff --git a/src/lib/theme/zIndices.ts b/src/lib/theme/zIndices.ts
index 3b76ef40d..ea7977e3c 100644
--- a/src/lib/theme/zIndices.ts
+++ b/src/lib/theme/zIndices.ts
@@ -1,12 +1,12 @@
 export const allZIndices = {
-  variableShade: 99,
   border: 100,
-  conditionalBorder: 101,
   multiplySign: 101,
   expressionPriorityNumber: 101,
-  borderToplevel: 102,
-  badge: 102,
-  conditionalBorderShade: 103,
+  variableShade: 102,
+  conditionalBorder: 103,
+  badge: 104,
+  borderToplevel: 105,
+  conditionalBorderShade: 106,
   modal: 1000
 }