[a11y] re-enable and fix all failing plan tests (#7753)

* enable planning a11y tests

* Fix all a11y failing tests

* drive-by: missed clean

* test: attempt to fix parallelization

* split the test 3 ways

* lint

---------

Co-authored-by: Hill, John (ARC-TI)[KBR Wyle Services, LLC] <john.c.hill@nasa.gov>

.circleci/config.yml

@@ -8,8 +8,8 @@ executors:
       - image: mcr.microsoft.com/playwright:v1.44.0-focal
     environment:
       NODE_ENV: development # Needed to ensure 'dist' folder created and devDependencies installed
-      PERCY_POSTINSTALL_BROWSER: 'true' # Needed to store the percy browser in cache deps
+      PERCY_POSTINSTALL_BROWSER: "true" # Needed to store the percy browser in cache deps
-      PERCY_LOGLEVEL: 'debug' # Enable DEBUG level logging for Percy (Issue: https://github.com/nasa/openmct/issues/5742)
+      PERCY_LOGLEVEL: "debug" # Enable DEBUG level logging for Percy (Issue: https://github.com/nasa/openmct/issues/5742)
       PERCY_PARALLEL_TOTAL: 2
   ubuntu:
     machine:
@@ -17,7 +17,7 @@ executors:
       docker_layer_caching: true
 commands:
   build_and_install:
-    description: 'All steps used to build and install.'
+    description: "All steps used to build and install."
     parameters:
       node-version:
         type: string
@@ -27,7 +27,7 @@ commands:
           node-version: << parameters.node-version >>
       - node/install-packages
   generate_and_store_version_and_filesystem_artifacts:
-    description: 'Track important packages and files'
+    description: "Track important packages and files"
     steps:
       - run: |
           [[ $EUID -ne 0 ]] && (sudo mkdir -p /tmp/artifacts && sudo chmod 777 /tmp/artifacts) || (mkdir -p /tmp/artifacts && chmod 777 /tmp/artifacts)
@@ -38,7 +38,7 @@ commands:
       - store_artifacts:
           path: /tmp/artifacts/
   generate_e2e_code_cov_report:
-    description: 'Generate e2e code coverage artifacts and publish to codecov.io. Needed to that we can ignore the exit code status of the npm run test'
+    description: "Generate e2e code coverage artifacts and publish to codecov.io. Needed to that we can ignore the exit code status of the npm run test"
     parameters:
       suite:
         type: string
@@ -102,7 +102,7 @@ jobs:
           node-version: lts/hydrogen
       - when: #Only install chrome-beta when running the 'full' suite to save $$$
           condition:
-            equal: ['full', <<parameters.suite>>]
+            equal: ["full", <<parameters.suite>>]
           steps:
             - run: npx playwright install chrome-beta
       - run:
@@ -230,7 +230,7 @@ jobs:
     steps:
       - build_and_install:
           node-version: lts/iron
-      - run: npm run test:e2e:visual:<<parameters.suite>>
+      - run: SHARD="$((${CIRCLE_NODE_INDEX}+1))"; npm run test:e2e:visual:<<parameters.suite>> -- --shard=${SHARD}/${CIRCLE_NODE_TOTAL}
       - store_test_results:
           path: test-results/results.xml
       - store_artifacts:
@@ -282,7 +282,7 @@ workflows:
       - e2e-couchdb
     triggers:
       - schedule:
-          cron: '0 0 * * *'
+          cron: "0 0 * * *"
           filters:
             branches:
               only:

e2e/tests/visual-a11y/planning-gantt.visual.spec.js

@@ -24,91 +24,15 @@ import percySnapshot from '@percy/playwright';
 import fs from 'fs';
 
 import { createDomainObjectWithDefaults, createPlanFromJSON } from '../../appActions.js';
-import { test } from '../../avpFixtures.js';
+import { scanForA11yViolations, test } from '../../avpFixtures.js';
 import { VISUAL_FIXED_URL } from '../../constants.js';
-import {
+import { setBoundsToSpanAllActivities, setDraftStatusForPlan } from '../../helper/planningUtils.js';
-  createTimelistWithPlanAndSetActivityInProgress,
-  getFirstActivity,
-  setBoundsToSpanAllActivities,
-  setDraftStatusForPlan
-} from '../../helper/planningUtils.js';
-
-const examplePlanSmall1 = JSON.parse(
-  fs.readFileSync(new URL('../../test-data/examplePlans/ExamplePlan_Small1.json', import.meta.url))
-);
 
 const examplePlanSmall2 = JSON.parse(
   fs.readFileSync(new URL('../../test-data/examplePlans/ExamplePlan_Small2.json', import.meta.url))
 );
 
-test.describe('Visual - Timelist progress bar @clock', () => {
+test.describe('Visual - Gantt Chart @a11y', () => {
-  const firstActivity = getFirstActivity(examplePlanSmall1);
-
-  test.use({
-    clockOptions: {
-      now: firstActivity.end + 10000,
-      shouldAdvanceTime: true
-    }
-  });
-
-  test.beforeEach(async ({ page }) => {
-    await createTimelistWithPlanAndSetActivityInProgress(page, examplePlanSmall1);
-    await page.getByLabel('Click to collapse items').click();
-  });
-
-  test('progress pie is full', async ({ page, theme }) => {
-    // Progress pie is completely full and doesn't update if now is greater than the end time
-    await percySnapshot(page, `Time List with Activity in Progress (theme: ${theme})`);
-  });
-});
-
-test.describe('Visual - Planning', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(VISUAL_FIXED_URL, { waitUntil: 'domcontentloaded' });
-  });
-
-  test('Plan View', async ({ page, theme }) => {
-    const plan = await createPlanFromJSON(page, {
-      name: 'Plan Visual Test',
-      json: examplePlanSmall2
-    });
-    await setBoundsToSpanAllActivities(page, examplePlanSmall2, plan.url);
-    await percySnapshot(page, `Plan View (theme: ${theme})`);
-  });
-
-  test('Resize Plan View @2p', async ({ browser, theme }) => {
-    // need to set viewport to null to allow for resizing
-    const newContext = await browser.newContext({
-      viewport: null
-    });
-    const newPage = await newContext.newPage();
-
-    await newPage.goto(VISUAL_FIXED_URL, { waitUntil: 'domcontentloaded' });
-    const plan = await createPlanFromJSON(newPage, {
-      name: 'Plan Visual Test',
-      json: examplePlanSmall2
-    });
-
-    await setBoundsToSpanAllActivities(newPage, examplePlanSmall2, plan.url);
-    // resize the window
-    await newPage.setViewportSize({ width: 800, height: 600 });
-    await percySnapshot(newPage, `Plan View resized (theme: ${theme})`);
-  });
-
-  test('Plan View w/ draft status', async ({ page, theme }) => {
-    const plan = await createPlanFromJSON(page, {
-      name: 'Plan Visual Test (Draft)',
-      json: examplePlanSmall2
-    });
-    await page.goto(VISUAL_FIXED_URL, { waitUntil: 'domcontentloaded' });
-    await setDraftStatusForPlan(page, plan);
-
-    await setBoundsToSpanAllActivities(page, examplePlanSmall2, plan.url);
-    await percySnapshot(page, `Plan View w/ draft status (theme: ${theme})`);
-  });
-});
-
-test.describe('Visual - Gantt Chart', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(VISUAL_FIXED_URL, { waitUntil: 'domcontentloaded' });
   });
@@ -178,8 +102,7 @@ test.describe('Visual - Gantt Chart', () => {
     );
   });
 });
-// FIXME: https://github.com/nasa/openmct/issues/7421
+
-// Currently has contrast failures
+test.afterEach(async ({ page }, testInfo) => {
-// test.afterEach(async ({ page }, testInfo) => {
+  await scanForA11yViolations(page, testInfo.title);
-//   await scanForA11yViolations(page, testInfo.title);
+});
-// });

e2e/tests/visual-a11y/planning-timelist.visual.spec.js

@@ -0,0 +1,59 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is 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.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import percySnapshot from '@percy/playwright';
+import fs from 'fs';
+
+import { scanForA11yViolations, test } from '../../avpFixtures.js';
+import {
+  createTimelistWithPlanAndSetActivityInProgress,
+  getFirstActivity
+} from '../../helper/planningUtils.js';
+
+const examplePlanSmall1 = JSON.parse(
+  fs.readFileSync(new URL('../../test-data/examplePlans/ExamplePlan_Small1.json', import.meta.url))
+);
+
+test.describe('Visual - Timelist progress bar @clock @a11y', () => {
+  const firstActivity = getFirstActivity(examplePlanSmall1);
+
+  test.use({
+    clockOptions: {
+      now: firstActivity.end + 10000,
+      shouldAdvanceTime: true
+    }
+  });
+
+  test.beforeEach(async ({ page }) => {
+    await createTimelistWithPlanAndSetActivityInProgress(page, examplePlanSmall1);
+    await page.getByLabel('Click to collapse items').click();
+  });
+
+  test('progress pie is full', async ({ page, theme }) => {
+    // Progress pie is completely full and doesn't update if now is greater than the end time
+    await percySnapshot(page, `Time List with Activity in Progress (theme: ${theme})`);
+  });
+});
+
+test.afterEach(async ({ page }, testInfo) => {
+  await scanForA11yViolations(page, testInfo.title);
+});

e2e/tests/visual-a11y/planning-view.visual.spec.js

@@ -0,0 +1,113 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is 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.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import percySnapshot from '@percy/playwright';
+import fs from 'fs';
+
+import { createPlanFromJSON } from '../../appActions.js';
+import { scanForA11yViolations, test } from '../../avpFixtures.js';
+import { VISUAL_FIXED_URL } from '../../constants.js';
+import {
+  createTimelistWithPlanAndSetActivityInProgress,
+  getFirstActivity,
+  setBoundsToSpanAllActivities,
+  setDraftStatusForPlan
+} from '../../helper/planningUtils.js';
+
+const examplePlanSmall1 = JSON.parse(
+  fs.readFileSync(new URL('../../test-data/examplePlans/ExamplePlan_Small1.json', import.meta.url))
+);
+
+const examplePlanSmall2 = JSON.parse(
+  fs.readFileSync(new URL('../../test-data/examplePlans/ExamplePlan_Small2.json', import.meta.url))
+);
+
+test.describe('Visual - Timelist progress bar @clock @a11y', () => {
+  const firstActivity = getFirstActivity(examplePlanSmall1);
+
+  test.use({
+    clockOptions: {
+      now: firstActivity.end + 10000,
+      shouldAdvanceTime: true
+    }
+  });
+
+  test.beforeEach(async ({ page }) => {
+    await createTimelistWithPlanAndSetActivityInProgress(page, examplePlanSmall1);
+    await page.getByLabel('Click to collapse items').click();
+  });
+
+  test('progress pie is full', async ({ page, theme }) => {
+    // Progress pie is completely full and doesn't update if now is greater than the end time
+    await percySnapshot(page, `Time List with Activity in Progress (theme: ${theme})`);
+  });
+});
+
+test.describe('Visual - Plan View @a11y', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(VISUAL_FIXED_URL, { waitUntil: 'domcontentloaded' });
+  });
+
+  test('Plan View', async ({ page, theme }) => {
+    const plan = await createPlanFromJSON(page, {
+      name: 'Plan Visual Test',
+      json: examplePlanSmall2
+    });
+    await setBoundsToSpanAllActivities(page, examplePlanSmall2, plan.url);
+    await percySnapshot(page, `Plan View (theme: ${theme})`);
+  });
+
+  test('Resize Plan View @2p', async ({ browser, theme }) => {
+    // need to set viewport to null to allow for resizing
+    const newContext = await browser.newContext({
+      viewport: null
+    });
+    const newPage = await newContext.newPage();
+
+    await newPage.goto(VISUAL_FIXED_URL, { waitUntil: 'domcontentloaded' });
+    const plan = await createPlanFromJSON(newPage, {
+      name: 'Plan Visual Test',
+      json: examplePlanSmall2
+    });
+
+    await setBoundsToSpanAllActivities(newPage, examplePlanSmall2, plan.url);
+    // resize the window
+    await newPage.setViewportSize({ width: 800, height: 600 });
+    await percySnapshot(newPage, `Plan View resized (theme: ${theme})`);
+  });
+
+  test('Plan View w/ draft status', async ({ page, theme }) => {
+    const plan = await createPlanFromJSON(page, {
+      name: 'Plan Visual Test (Draft)',
+      json: examplePlanSmall2
+    });
+    await page.goto(VISUAL_FIXED_URL, { waitUntil: 'domcontentloaded' });
+    await setDraftStatusForPlan(page, plan);
+
+    await setBoundsToSpanAllActivities(page, examplePlanSmall2, plan.url);
+    await percySnapshot(page, `Plan View w/ draft status (theme: ${theme})`);
+  });
+});
+
+test.afterEach(async ({ page }, testInfo) => {
+  await scanForA11yViolations(page, testInfo.title);
+});

package.json

@@ -96,7 +96,7 @@
     "webpack-merge": "5.10.0"
   },
   "scripts": {
-    "clean": "rm -rf ./dist ./node_modules ./coverage ./html-test-results ./test-results ./.nyc_output",
+    "clean": "rm -rf ./dist ./node_modules ./coverage ./html-test-results ./e2e/test-results ./.nyc_output ./e2e/.nyc_output",
     "start": "npx webpack serve --config ./.webpack/webpack.dev.mjs",
     "start:prod": "npx webpack serve --config ./.webpack/webpack.prod.mjs",
     "start:coverage": "npx webpack serve --config ./.webpack/webpack.coverage.mjs",

src/plugins/timelist/timelist.scss

@@ -20,240 +20,240 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 .c-timelist {
-    & .nowMarker.hasCurrent {
+  & .nowMarker.hasCurrent {
-        height: 2px;
+    height: 2px;
-        position: absolute;
+    position: absolute;
-        z-index: 10;
+    z-index: 10;
-        background: cyan;
+    background: cyan;
-        width: 100%;
+    width: 100%;
+  }
+
+  .c-list-item {
+    /* Compact Time Lists; is a <tr> element */
+
+    @mixin sSelected($bgColor, $fgColor) {
+      &[s-selected] {
+        background: $bgColor !important;
+        border: 1px solid $colorSelectedFg !important;
+        color: $fgColor !important;
+      }
     }
 
-    .c-list-item {
+    td {
-        /* Compact Time Lists; is a <tr> element */
+      $p: $interiorMarginSm;
-
+      padding-top: $p;
-        @mixin sSelected($bgColor, $fgColor) {
+      padding-bottom: $p;
-            &[s-selected] {
-                background: $bgColor !important;
-                border: 1px solid $colorSelectedFg !important;
-                color: $fgColor !important;
-            }
-        }
-
-        td {
-            $p: $interiorMarginSm;
-            padding-top: $p;
-            padding-bottom: $p;
-        }
-
-        &.--is-past {
-            @include sSelected(transparent, $colorPastFgEm);
-        }
-
-        &.--is-current {
-            @include sSelected($colorCurrentBg, $colorCurrentFgEm);
-            background-color: $colorCurrentBg;
-            border-top: 1px solid $colorCurrentBorder !important;
-            color: $colorCurrentFgEm;
-        }
-
-        &.--is-future {
-            @include sSelected($colorFutureBg, $colorFutureFgEm);
-            background-color: $colorFutureBg;
-            border-top-color: $colorFutureBorder !important;
-            color: $colorFutureFgEm;
-        }
-
-        &.--is-in-progress {
-            @include sSelected($colorInProgressBg, $colorInProgressFgEm);
-            background-color: $colorInProgressBg;
-        }
-
-        &__value {
-            &.--duration {
-                width: 5%;
-            }
-        }
     }
+
+    &.--is-past {
+      @include sSelected(transparent, $colorPastFgEm);
+    }
+
+    &.--is-current {
+      @include sSelected($colorCurrentBg, $colorCurrentFgEm);
+      background-color: $colorCurrentBg;
+      border-top: 1px solid $colorCurrentBorder !important;
+      color: $colorCurrentFgEm;
+    }
+
+    &.--is-future {
+      @include sSelected($colorFutureBg, $colorFutureFgEm);
+      background-color: $colorFutureBg;
+      border-top-color: $colorFutureBorder !important;
+      color: $colorFutureFgEm;
+    }
+
+    &.--is-in-progress {
+      @include sSelected($colorInProgressBg, $colorInProgressFgEm);
+      background-color: $colorInProgressBg;
+    }
+
+    &__value {
+      &.--duration {
+        width: 5%;
+      }
+    }
+  }
 }
 
 /**************************************************** LARGE TIME LIST */
 @mixin styleTliEm($colorEm) {
-    // Styles emphasized elements within c-tli.
+  // Styles emphasized elements within c-tli.
-    .c-tli {
+  .c-tli {
-        &__duration,
+    &__duration,
-        &__title,
+    &__title,
-        &__time-hero-time {
+    &__time-hero-time {
-            color: $colorEm;
+      color: $colorEm;
-        }
     }
+  }
 }
 @mixin showTliGraphic($wGraphic) {
-    .c-tli__graphic {
+  .c-tli__graphic {
-        &__#{$wGraphic} {
+    &__#{$wGraphic} {
-            display: block;
+      display: block;
-        }
     }
+  }
 }
 
 .c-timelist--large {
-    $textSm: 0.8em;
+  $textSm: 0.8em;
-    $textLg: 1.3em;
+  $textLg: 1.3em;
 
-    margin-right: $interiorMargin; // fend off from scrollbar
+  margin-right: $interiorMargin; // fend off from scrollbar
 
-    > * + * {
+  > * + * {
-        margin-top: $interiorMarginSm;
+    margin-top: $interiorMarginSm;
+  }
+
+  .c-tli {
+    // TODO: add styles for various activity statuses
+    $baseBg: $colorPastBg;
+    $baseFg: $colorPastFg;
+    $baseFgEm: $colorPastFgEm;
+
+    background: $baseBg;
+    color: $baseFg;
+    border-radius: $basicCr;
+    display: grid;
+    padding: $interiorMargin;
+    grid-template-columns: min-content 3fr 40px 1fr;
+    grid-column-gap: $interiorMargin;
+
+    &[s-selected] {
+      box-shadow: inset rgba($colorSelectedFg, 0.8) 0 0 0 1px;
+      color: $colorSelectedFg !important;
+
+      @include styleTliEm($colorSelectedFg);
     }
 
-    .c-tli {
+    @include styleTliEm($baseFgEm);
-        // TODO: add styles for various activity statuses
-        $baseBg: $colorPastBg;
-        $baseFg: $colorPastFg;
-        $baseFgEm: $colorPastFgEm;
 
-        background: $baseBg;
+    &__activity-color {
-        color: $baseFg;
+      align-items: start;
-        border-radius: $basicCr;
+      display: flex;
-        display: grid;
+      padding-top: 1px;
-        padding: $interiorMargin;
+    }
-        grid-template-columns: min-content 3fr 40px 1fr;
-        grid-column-gap: $interiorMargin;
 
-        &[s-selected] {
+    &__activity-color-swatch {
-            box-shadow: inset rgba($colorSelectedFg, 0.8) 0 0 0 1px;
+      $d: 16px;
-            color: $colorSelectedFg !important;
+      border-radius: 50%;
+      box-shadow: rgba(black, 0.3) 0 0 2px 1px;
+      width: $d;
+      height: $d;
+    }
 
-            @include styleTliEm($colorSelectedFg);
+    &__title-and-bounds {
+      > * + * {
+        margin-top: $interiorMargin;
+      }
+    }
+
+    &__bounds {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+
+      > * {
+        margin-right: $interiorMargin;
+        white-space: nowrap;
+      }
+
+      &.--has-duration {
+        .c-tli__start-time {
+          display: flex;
+          align-items: start;
+
+          &:after {
+            content: $glyph-icon-play;
+            font-family: symbolsfont;
+            font-size: 0.7em;
+            display: block;
+            margin-left: $interiorMargin;
+            margin-top: 2px;
+          }
         }
+      }
+    }
 
-        @include styleTliEm($baseFgEm);
+    &__title {
+      font-size: $textLg;
+    }
 
-        &__activity-color {
+    &__time-hero {
-            align-items: start;
+      display: flex;
-            display: flex;
+      align-items: center;
-            padding-top: 1px;
+      justify-content: end;
+    }
+
+    &__time-hero-context-and-time {
+      align-items: center;
+      flex-wrap: wrap;
+      display: flex;
+      justify-content: end;
+      text-align: right;
+
+      > * + * {
+        margin-left: $interiorMargin;
+      }
+    }
+
+    &__time-hero-context {
+      font-size: $textSm;
+      text-transform: uppercase;
+    }
+
+    &__time-hero-time {
+      display: flex;
+      align-items: center;
+      font-size: $textLg;
+      white-space: nowrap;
+
+      &:before {
+        display: block;
+        font-family: symbolsfont;
+        font-size: 0.7em;
+        margin-right: 3px;
+      }
+
+      &.--is-countdown {
+        &:before {
+          content: $glyph-icon-minus;
         }
+      }
 
-        &__activity-color-swatch {
+      &.--is-countup {
-            $d: 16px;
+        &:before {
-            border-radius: 50%;
+          content: $glyph-icon-plus;
-            box-shadow: rgba(black, 0.3) 0 0 2px 1px;
-            width: $d;
-            height: $d;
         }
+      }
+    }
 
-        &__title-and-bounds {
+    &__graphic {
-            > * + * {
+      display: flex;
-                margin-top: $interiorMargin;
+      fill: $baseFg;
-            }
+      align-items: center;
+
+      svg {
+        > * {
+          display: none;
         }
+      }
+    }
 
-        &__bounds {
+    &.--is-current {
-            display: flex;
+      background-color: $colorCurrentBg;
-            flex-wrap: wrap;
+      color: $colorCurrentFg;
-            align-items: center;
+      @include styleTliEm($colorCurrentFgEm);
+    }
 
-            > * {
+    &.--is-future {
-                margin-right: $interiorMargin;
+      background-color: $colorFutureBg;
-                white-space: nowrap;
+      color: $colorFutureFg;
-            }
+      @include styleTliEm($colorFutureFgEm);
+    }
 
-            &.--has-duration {
+    /************************************ ACTIVITY STATE STYLES */
-                .c-tli__start-time {
+    /*
-                    display: flex;
-                    align-items: start;
-
-                    &:after {
-                        content: $glyph-icon-play;
-                        font-family: symbolsfont;
-                        font-size: 0.7em;
-                        display: block;
-                        margin-left: $interiorMargin;
-                        margin-top: 2px;
-                    }
-                }
-            }
-        }
-
-        &__title {
-            font-size: $textLg;
-        }
-
-        &__time-hero {
-            display: flex;
-            align-items: center;
-            justify-content: end;
-        }
-
-        &__time-hero-context-and-time {
-            align-items: center;
-            flex-wrap: wrap;
-            display: flex;
-            justify-content: end;
-            text-align: right;
-
-            > * + * {
-                margin-left: $interiorMargin;
-            }
-        }
-
-        &__time-hero-context {
-            font-size: $textSm;
-            text-transform: uppercase;
-        }
-
-        &__time-hero-time {
-            display: flex;
-            align-items: center;
-            font-size: $textLg;
-            white-space: nowrap;
-
-            &:before {
-                display: block;
-                font-family: symbolsfont;
-                font-size: 0.7em;
-                margin-right: 3px;
-            }
-
-            &.--is-countdown {
-                &:before {
-                    content: $glyph-icon-minus;
-                }
-            }
-
-            &.--is-countup {
-                &:before {
-                    content: $glyph-icon-plus;
-                }
-            }
-        }
-
-        &__graphic {
-            display: flex;
-            fill: $baseFg;
-            align-items: center;
-
-            svg {
-                > * {
-                    display: none;
-                }
-            }
-        }
-
-        &.--is-current {
-            background-color: $colorCurrentBg;
-            color: $colorCurrentFg;
-            @include styleTliEm($colorCurrentFgEm);
-        }
-
-        &.--is-future {
-            background-color: $colorFutureBg;
-            color: $colorFutureFg;
-            @include styleTliEm($colorFutureFgEm);
-        }
-
-        /************************************ ACTIVITY STATE STYLES */
-        /*
         - 'In Progress' : itemState.inProgress
         - 'Running Long' : itemState.inProgress && now > end datetime
         - 'Overdue' : itemState.notStarted && now > start datetime
@@ -263,85 +263,83 @@
         - 'Ends' : itemState.inProgress && now > start datetime && now < end datetime
         - 'Completed', 'Aborted', 'Skipped' : itemState.<that state>
         */
-        &.--is-not-started {
+    &.--is-not-started {
-
-        }
-
-        &.--is-in-progress {
-            @include showTliGraphic('pie');
-            background-color: $colorInProgressBg;
-            color: $colorInProgressFg;
-        }
-
-        &.--is-running-long {
-            @include showTliGraphic('alert-triangle');
-            background-color: $colorInProgressBg;
-            color: $colorInProgressFg;
-        }
-
-        &.--is-overdue,
-        &.--is-incomplete {
-            @include showTliGraphic('alert-triangle');
-
-        }
-
-        &.--is-completed {
-            @include showTliGraphic('check');
-        }
-
-        &.--is-aborted {
-            @include showTliGraphic('circle-slash');
-        }
-
-        &.--is-skipped {
-            @include showTliGraphic('skipped');
-        }
-
-        &__check {
-            // Overrides?
-        }
-
-        &__alert-triangle {
-            // Overrides?
-        }
-
-        &__circle-slash {
-            // Overrides?
-        }
     }
+
+    &.--is-in-progress {
+      @include showTliGraphic('pie');
+      background-color: $colorInProgressBg;
+      color: $colorInProgressFg;
+    }
+
+    &.--is-running-long {
+      @include showTliGraphic('alert-triangle');
+      background-color: $colorInProgressBg;
+      color: $colorInProgressFg;
+    }
+
+    &.--is-overdue,
+    &.--is-incomplete {
+      @include showTliGraphic('alert-triangle');
+    }
+
+    &.--is-completed {
+      @include showTliGraphic('check');
+    }
+
+    &.--is-aborted {
+      @include showTliGraphic('circle-slash');
+    }
+
+    &.--is-skipped {
+      @include showTliGraphic('skipped');
+    }
+
+    &__check {
+      // Overrides?
+    }
+
+    &__alert-triangle {
+      // Overrides?
+    }
+
+    &__circle-slash {
+      // Overrides?
+    }
+  }
 }
 
 .c-svg-progress {
-    &__bg {
+  &__bg {
-        fill: rgba(black, 0.2);
+    fill: rgba(black, 0.2);
-    }
+  }
 
-    &__ticks {
+  &__ticks {
-        fill: none;
+    fill: none;
-        stroke: $colorInProgressFg;
+    stroke: $colorInProgressFg;
-        stroke-width: 6;
+    stroke-width: 6;
-    }
+  }
 
-    &__progress {
+  &__progress {
-        fill: $colorInProgressFgEm;
+    fill: $colorInProgressFgEm;
-        transform: translateX(50%) translateY(50%);
+    transform: translateX(50%) translateY(50%);
-    }
+  }
 
-    &__sweep-hand {
+  &__sweep-hand {
-        animation-name: sweep-hand;
+    animation-name: sweep-hand;
-        animation-duration: 10s;
+    animation-duration: 10s;
-        animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
-        animation-timing-function: steps(12);
+    animation-timing-function: steps(12);
-        fill: $colorInProgressFg;
+    fill: $colorInProgressFg;
-        transform-origin: center;
+    transform-origin: center;
-    }
+  }
 }
 
 @keyframes sweep-hand {
-    0% {
+  0% {
-        transform: rotate(0deg);
+    transform: rotate(0deg);
-    }
+  }
-    100% {
+  100% {
-        transform: rotate(360deg);
+    transform: rotate(360deg);
-    }
+  }
 }

src/styles/_constants-espresso.scss

@@ -130,7 +130,7 @@ $bodySize: 100%;
 
 // Object labels
 $objectLabelTypeIconOpacity: 0.8; //JOHN
-$objectLabelNameColorFg: lighten($colorBodyFg, 10%);
+$objectLabelNameColorFg: lighten($colorBodyFg, 20%);
 
 // Layout
 $shellMainPad: 4px 0;
@@ -168,7 +168,7 @@ $colorDiagnostic: #a4b442;
 $colorDiagnosticFg: #39461a;
 $colorCommand: #3693bd;
 $colorCommandFg: #fff;
-$colorInfo: #2294a2;
+$colorInfo: #198290;
 $colorInfoFg: #fff;
 $colorOk: #33cc33;
 $colorOkFg: #fff;
@@ -471,7 +471,7 @@ $colorPastBg: #444;
 $colorPastFg: pushBack($colorBodyFg, 10%);
 $colorPastFgEm: $colorBodyFg;
 $colorCurrentBg: #666;
-$colorCurrentFg: $colorBodyFg;
+$colorCurrentFg: pullForward($colorBodyFg, 10%);
 $colorCurrentFgEm: $colorBodyFgEm;
 $colorCurrentBorder: $colorBodyBg;
 $colorFutureBg: $colorPastBg;