mirror of
https://github.com/nasa/openmct.git
synced 2024-12-18 20:57:53 +00:00
chore: re-enable a11y checks in visual suite (#7747)
* re-enable main test * Enable tests and fix some failing ones * revert accidental changes * test(a11y): on failure, take a screenshot to disk * test(visual): wait for the snapshot indicator to stop flashing * Fix all failing tests * test: disable a11y checks for planning suite * lint:fix * fix pathing issues * build: increase visual-a11y parallelism from 2 to 4 * test: darkmatter theme a11y checks + snapshots-- ACTIVATE! * test: fix file name and path * fix(#7317): scott bell prophecy * jk no credit for u * chore: disable parallelism until we figure out what's going on * chore: set parallelism to 2 in hopes it fixes percy --------- Co-authored-by: Hill, John (ARC-TI)[KBR Wyle Services, LLC] <john.c.hill@nasa.gov> Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
This commit is contained in:
Rukmini Bose (Ruki)
GitHub
parent
34b4091204
commit
a5770817cc
@ -34,7 +34,7 @@
|
||||
*/
|
||||
|
||||
import AxeBuilder from '@axe-core/playwright';
|
||||
import fs from 'fs';
|
||||
import fs from 'fs/promises';
|
||||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
@ -87,6 +87,27 @@ const extendedTest = test.extend({
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Writes the accessibility report to the specified path.
|
||||
*
|
||||
* @param {string} reportPath - The path to write the report to.
|
||||
* @param {Object} accessibilityScanResults - The results of the accessibility scan.
|
||||
* @returns {Promise<Object>} The accessibility scan results.
|
||||
* @throws Will throw an error if writing the report fails.
|
||||
*/
|
||||
async function writeAccessibilityReport(reportPath, accessibilityScanResults) {
|
||||
try {
|
||||
await fs.mkdir(path.dirname(reportPath), { recursive: true });
|
||||
const data = JSON.stringify(accessibilityScanResults, null, 2);
|
||||
await fs.writeFile(reportPath, data);
|
||||
console.log(`Accessibility report with violations saved successfully as ${reportPath}`);
|
||||
return accessibilityScanResults;
|
||||
} catch (err) {
|
||||
console.error(`Error writing the accessibility report to file ${reportPath}:`, err);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Scans for accessibility violations on a page and writes a report to disk if violations are found.
|
||||
* Automatically asserts that no violations should be present.
|
||||
@ -104,25 +125,29 @@ export async function scanForA11yViolations(page, testCaseName, options = {}) {
|
||||
const accessibilityScanResults = await builder.analyze();
|
||||
|
||||
// Assert that no violations should be present
|
||||
expect(
|
||||
accessibilityScanResults.violations,
|
||||
`Accessibility violations found in test case: ${testCaseName}`
|
||||
).toEqual([]);
|
||||
expect
|
||||
.soft(
|
||||
accessibilityScanResults.violations,
|
||||
`Accessibility violations found in test case: ${testCaseName}`
|
||||
)
|
||||
.toEqual([]);
|
||||
|
||||
// Check if there are any violations
|
||||
if (accessibilityScanResults.violations.length > 0) {
|
||||
let reportName = options.reportName || testCaseName;
|
||||
let sanitizedReportName = reportName.replace(/\//g, '_');
|
||||
const reportPath = path.join(TEST_RESULTS_DIR, `${sanitizedReportName}.json`);
|
||||
const reportName = options.reportName || testCaseName;
|
||||
const sanitizedReportName = reportName.replace(/\//g, '_');
|
||||
const reportPath = path.join(
|
||||
TEST_RESULTS_DIR,
|
||||
'a11y-json-reports',
|
||||
`${sanitizedReportName}.json`
|
||||
);
|
||||
|
||||
try {
|
||||
if (!fs.existsSync(TEST_RESULTS_DIR)) {
|
||||
fs.mkdirSync(TEST_RESULTS_DIR);
|
||||
}
|
||||
await page.screenshot({
|
||||
path: path.join(TEST_RESULTS_DIR, 'a11y-screenshots', `${sanitizedReportName}.png`)
|
||||
});
|
||||
|
||||
fs.writeFileSync(reportPath, JSON.stringify(accessibilityScanResults, null, 2));
|
||||
console.log(`Accessibility report with violations saved successfully as ${reportPath}`);
|
||||
return accessibilityScanResults;
|
||||
return await writeAccessibilityReport(reportPath, accessibilityScanResults);
|
||||
} catch (err) {
|
||||
console.error(`Error writing the accessibility report to file ${reportPath}:`, err);
|
||||
throw err;
|
||||
|
||||
29
e2e/helper/useDarkmatterTheme.js
Normal file
29
e2e/helper/useDarkmatterTheme.js
Normal file
@ -0,0 +1,29 @@
|
||||
/*****************************************************************************
|
||||
* 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.
|
||||
*****************************************************************************/
|
||||
|
||||
// This should be used to install the Darkmatter theme for Open MCT.
|
||||
// e.g.
|
||||
// await page.addInitScript({ path: path.join(__dirname, 'useDarkmatterTheme.js') });
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const openmct = window.openmct;
|
||||
openmct.install(openmct.plugins.DarkmatterTheme());
|
||||
});
|
||||
@ -41,7 +41,7 @@ const config = {
|
||||
name: 'darkmatter-theme', //Runs the same visual tests but with darkmatter-theme
|
||||
use: {
|
||||
browserName: 'chromium',
|
||||
theme: 'darkmatter-theme'
|
||||
theme: 'darkmatter'
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
@ -127,6 +127,11 @@ const extendedTest = test.extend({
|
||||
await page.addInitScript({
|
||||
path: fileURLToPath(new URL('./helper/useSnowTheme.js', import.meta.url))
|
||||
});
|
||||
} else if (theme === 'darkmatter') {
|
||||
//inject darkmatter theme
|
||||
await page.addInitScript({
|
||||
path: fileURLToPath(new URL('./helper/useDarkmatterTheme.js', import.meta.url))
|
||||
});
|
||||
}
|
||||
|
||||
// Attach info about the currently running test and its project.
|
||||
|
||||
@ -20,15 +20,14 @@
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
import { test } from '../../avpFixtures.js';
|
||||
import { scanForA11yViolations, test } from '../../avpFixtures.js';
|
||||
import { VISUAL_FIXED_URL } from '../../constants.js';
|
||||
|
||||
test.describe('a11y - Default', () => {
|
||||
test.describe('a11y - Default @a11y', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto(VISUAL_FIXED_URL, { waitUntil: 'domcontentloaded' });
|
||||
});
|
||||
test('main view', async ({ page }, testInfo) => {
|
||||
//Skipping for https://github.com/nasa/openmct/issues/7421
|
||||
//await scanForA11yViolations(page, testInfo.title);
|
||||
await scanForA11yViolations(page, testInfo.title);
|
||||
});
|
||||
});
|
||||
|
||||
@ -27,7 +27,7 @@ Tests the branding associated with the default deployment. At least the about mo
|
||||
import percySnapshot from '@percy/playwright';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
import { expect, test } from '../../../avpFixtures.js';
|
||||
import { expect, scanForA11yViolations, test } from '../../../avpFixtures.js';
|
||||
import { VISUAL_FIXED_URL } from '../../../constants.js';
|
||||
|
||||
//Declare the component scope of the visual test for Percy
|
||||
@ -69,14 +69,26 @@ test.describe('Visual - Header @a11y', () => {
|
||||
});
|
||||
|
||||
test('show snapshot button', async ({ page, theme }) => {
|
||||
test.slow(true, 'We have to wait for the snapshot indicator to stop flashing');
|
||||
await page.getByLabel('Open the Notebook Snapshot Menu').click();
|
||||
|
||||
await page.getByRole('menuitem', { name: 'Save to Notebook Snapshots' }).click();
|
||||
|
||||
await expect(page.getByLabel('Show Snapshots')).toBeVisible();
|
||||
|
||||
/**
|
||||
* We have to wait for the snapshot indicator to stop flashing. This happens
|
||||
* for a really long time (15 seconds 😳).
|
||||
* TODO: Either reduce the length of the animation, convert this to a
|
||||
* Playwright snapshot test (and disable animations), or augment the `waitForAnimations`
|
||||
* fixture to adjust the timeout.
|
||||
*/
|
||||
await expect(page.locator('.has-new-snapshot')).not.toBeAttached({
|
||||
timeout: 30 * 1000
|
||||
});
|
||||
await percySnapshot(page, `Notebook Snapshot Show button (theme: '${theme}')`, {
|
||||
scope: header
|
||||
});
|
||||
await expect(page.getByLabel('Show Snapshots')).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
@ -99,7 +111,6 @@ test.describe('Mission Header @a11y', () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
// Skipping for https://github.com/nasa/openmct/issues/7421
|
||||
// test.afterEach(async ({ page }, testInfo) => {
|
||||
// await scanForA11yViolations(page, testInfo.title);
|
||||
// });
|
||||
test.afterEach(async ({ page }, testInfo) => {
|
||||
await scanForA11yViolations(page, testInfo.title);
|
||||
});
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
|
||||
import percySnapshot from '@percy/playwright';
|
||||
|
||||
import { test } from '../../../avpFixtures.js';
|
||||
import { scanForA11yViolations, test } from '../../../avpFixtures.js';
|
||||
import { MISSION_TIME, VISUAL_FIXED_URL } from '../../../constants.js';
|
||||
|
||||
//Declare the scope of the visual test
|
||||
@ -55,7 +55,6 @@ test.describe('Visual - Inspector @ally @clock', () => {
|
||||
});
|
||||
});
|
||||
});
|
||||
// Skipping for https://github.com/nasa/openmct/issues/7421
|
||||
// test.afterEach(async ({ page }, testInfo) => {
|
||||
// await scanForA11yViolations(page, testInfo.title);
|
||||
// });
|
||||
test.afterEach(async ({ page }, testInfo) => {
|
||||
await scanForA11yViolations(page, testInfo.title);
|
||||
});
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
import percySnapshot from '@percy/playwright';
|
||||
|
||||
import { createDomainObjectWithDefaults, expandTreePaneItemByName } from '../../appActions.js';
|
||||
import { expect, test } from '../../avpFixtures.js';
|
||||
import { expect, scanForA11yViolations, test } from '../../avpFixtures.js';
|
||||
import { VISUAL_FIXED_URL } from '../../constants.js';
|
||||
import { enterTextEntry, startAndAddRestrictedNotebookObject } from '../../helper/notebookUtils.js';
|
||||
|
||||
@ -163,8 +163,7 @@ test.describe('Visual - Notebook @a11y', () => {
|
||||
// Take a snapshot
|
||||
await percySnapshot(page, `Notebook Selected Entry Text Area Active (theme: '${theme}')`);
|
||||
});
|
||||
// Skipping for https://github.com/nasa/openmct/issues/7421
|
||||
// test.afterEach(async ({ page }, testInfo) => {
|
||||
// await scanForA11yViolations(page, testInfo.title);
|
||||
// });
|
||||
test.afterEach(async ({ page }, testInfo) => {
|
||||
await scanForA11yViolations(page, testInfo.title);
|
||||
});
|
||||
});
|
||||
|
||||
@ -178,8 +178,8 @@ test.describe('Visual - Gantt Chart', () => {
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
// Skipping for https://github.com/nasa/openmct/issues/7421
|
||||
// FIXME: https://github.com/nasa/openmct/issues/7421
|
||||
// Currently has contrast failures
|
||||
// test.afterEach(async ({ page }, testInfo) => {
|
||||
// await scanForA11yViolations(page, testInfo.title);
|
||||
// });
|
||||
|
||||
@ -181,3 +181,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-tag-applier__add-btn.c-icon-button.c-icon-button--major.icon-plus {
|
||||
color: $colorKey !important;
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
// Fonts
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap'); // Header font, Roboto Condensed. This is an alternative to the DIN Alt font, which is not available on Google Fonts.
|
||||
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap'); // Body Font, Exo
|
||||
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&family=Roboto+Condensed&display=swap');// Temporary numeric font, Chakra Petch (need to import local font instead).
|
||||
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&family=Roboto+Condensed&display=swap'); // Temporary numeric font, Chakra Petch (need to import local font instead).
|
||||
$heroFont: 'Teko', sans-serif;
|
||||
$headerFont: 'Cabin Condensed', sans-serif;
|
||||
$bodyFont: 'Exo', sans-serif;
|
||||
@ -45,7 +45,7 @@ $numericFont: 'Chakra Petch', sans-serif;
|
||||
font-size: $size;
|
||||
}
|
||||
|
||||
@mixin numericFont($size: 1em){
|
||||
@mixin numericFont($size: 1em) {
|
||||
font-family: $numericFont;
|
||||
font-size: $size;
|
||||
}
|
||||
@ -70,16 +70,17 @@ $numericFont: 'Chakra Petch', sans-serif;
|
||||
}
|
||||
|
||||
@mixin themedButton($c: $colorBtnBg) {
|
||||
background: radial-gradient(rgba($c, 1) , rgba($c, .7));
|
||||
background: radial-gradient(rgba($c, 1), rgba($c, 0.7));
|
||||
box-shadow: rgba(black, 0.5) 0 0.5px 2px;
|
||||
}
|
||||
|
||||
@mixin telemetryView(){
|
||||
@mixin telemetryView() {
|
||||
border: 1px solid $colorBodyFg;
|
||||
border-radius: $controlCr;
|
||||
}
|
||||
|
||||
@mixin browseFrameBorder() { // Used on main object container to add highlighted corners to non-hidden frames.
|
||||
@mixin browseFrameBorder() {
|
||||
// Used on main object container to add highlighted corners to non-hidden frames.
|
||||
border-image: radial-gradient(circle, #575757, #6c6c6c, #818181, #979797, #aeaeae);
|
||||
border-style: solid;
|
||||
padding: 10px;
|
||||
@ -93,7 +94,7 @@ $numericFont: 'Chakra Petch', sans-serif;
|
||||
linear-gradient(to bottom, $browseFrameCornerColor, transparent $browseFrameCornerWidth) 100% 0,
|
||||
linear-gradient(to top, $browseFrameCornerColor, transparent $browseFrameCornerWidth) 0 100%,
|
||||
linear-gradient(to top, $browseFrameCornerColor, transparent $browseFrameCornerWidth) 100% 100%,
|
||||
rgb(0, 0, 0, .4);
|
||||
rgb(0, 0, 0, 0.4);
|
||||
|
||||
background-repeat: no-repeat;
|
||||
background-size: 35px 35px;
|
||||
@ -101,10 +102,9 @@ $numericFont: 'Chakra Petch', sans-serif;
|
||||
box-shadow: 0px 0px 20px 2px rgb(140 140 140 / 20%);
|
||||
}
|
||||
|
||||
|
||||
// Functions
|
||||
@function buttonBg($c: $colorBtnBg) {
|
||||
@return radial-gradient(rgba($colorBodyBg, 1) , rgba($colorBodyBg, .6));
|
||||
@return radial-gradient(rgba($colorBodyBg, 1), rgba($colorBodyBg, 0.6));
|
||||
}
|
||||
|
||||
@function pullForward($val, $amt) {
|
||||
@ -124,26 +124,28 @@ $shdwBtns: rgba(black, 0.2) 0 1px 2px;
|
||||
$shdwBtnsOverlay: rgba(black, 0.5) 0 1px 5px;
|
||||
|
||||
// Base colors
|
||||
$colorBodyBg: #17171B;
|
||||
$colorBodyBg: #17171b;
|
||||
$colorBodyBgSubtle: pullForward($colorBodyBg, 5%);
|
||||
$colorBodyBgSubtleHov: pullForward($colorBodyBg, 10%);
|
||||
$colorBodyFg: #aaaaaa;
|
||||
$colorBodyFgSubtle: #9c9c9c;
|
||||
$colorBodyFgEm: #fff;
|
||||
$colorGenBg: #222;
|
||||
$colorHeadBg: rgba($colorBodyBg, .5);
|
||||
$colorHeadBg: rgba($colorBodyBg, 0.5);
|
||||
$colorHeadFg: $colorBodyFg;
|
||||
$colorKey: #1C67E3;
|
||||
$colorKey: #1c67e3;
|
||||
$colorKeyBg: #015fca;
|
||||
$colorKeyFg: #fff; // Darker version of colorKey for use in major buttons
|
||||
$colorKeyHov: lighten($colorKey, 10%);
|
||||
$colorKeyBgHov: lighten($colorKeyBg, 10%);
|
||||
$colorKeyFilter: invert(36%) sepia(10%) saturate(2512%) hue-rotate(170deg) brightness(100%) contrast(200%);
|
||||
$colorKeyFilter: invert(36%) sepia(10%) saturate(2512%) hue-rotate(170deg) brightness(100%)
|
||||
contrast(200%);
|
||||
$colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%)
|
||||
contrast(100%);
|
||||
$colorKeySelectedBg: $colorKey;
|
||||
$uiColor: #0093ff; // Resize bars, splitter bars, etc.
|
||||
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
|
||||
$colorInteriorBorderNotebook: rgba($colorBodyFg, 0.5);
|
||||
$colorA: #ccc;
|
||||
$colorAHov: #fff;
|
||||
$filterHov: brightness(1.3) contrast(1.5); // Tree, location items
|
||||
@ -173,11 +175,14 @@ $sideBarHeaderFg: rgba($colorBodyFg, 0.7);
|
||||
$colorStatusFg: #888;
|
||||
$colorStatusDefault: #ccc;
|
||||
$colorStatusInfo: #60ba7b;
|
||||
$colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%) contrast(92%);
|
||||
$colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%)
|
||||
contrast(92%);
|
||||
$colorStatusAlert: #ffb66c;
|
||||
$colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324deg) brightness(107%) contrast(101%);
|
||||
$colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324deg) brightness(107%)
|
||||
contrast(101%);
|
||||
$colorStatusError: #da0004;
|
||||
$colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%) contrast(115%);
|
||||
$colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%)
|
||||
contrast(115%);
|
||||
$colorStatusBtnBg: #666; // Where is this used?
|
||||
$colorStatusPartialBg: #3f5e8b;
|
||||
$colorStatusCompleteBg: #457638;
|
||||
@ -235,7 +240,7 @@ $timeConductorActivePanBg: #226074;
|
||||
|
||||
// Browse
|
||||
$browseFrameColor: pullForward($colorBodyBg, 10%);
|
||||
$browseFrameBorder: 1px solid rgb(89, 89, 89, .4); // Frames in Disp and Flex Layouts when frame is showing
|
||||
$browseFrameBorder: 1px solid rgb(89, 89, 89, 0.4); // Frames in Disp and Flex Layouts when frame is showing
|
||||
$browseSelectableShdwHov: rgba($colorBodyFg, 0.3) 0 0 3px;
|
||||
$browseSelectedBorder: 1px solid rgba($colorBodyFg, 0.4);
|
||||
$filterItemHoverFg: brightness(1.2) contrast(1.1);
|
||||
@ -252,7 +257,10 @@ $browseFrameCornerColor: $colorKey 4px; //Color used for the corners of frames
|
||||
$editUIColor: $uiColor; // Base color
|
||||
$editUIColorBg: $editUIColor;
|
||||
$editUIColorFg: #fff;
|
||||
$editUIColorHov: pullForward(saturate($uiColor, 10%), 10%); // Hover color when $editUIColor is applied as a base color
|
||||
$editUIColorHov: pullForward(
|
||||
saturate($uiColor, 10%),
|
||||
10%
|
||||
); // Hover color when $editUIColor is applied as a base color
|
||||
$editUIBaseColor: #344b8d; // Base color, toolbar bg
|
||||
$editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
|
||||
$editUIBaseColorFg: #ffffff; // Toolbar button icon colors, etc.
|
||||
@ -271,7 +279,10 @@ $editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make h
|
||||
$editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
|
||||
$editFrameSelectedShdw: rgba(black, 0.4) 0 1px 5px 1px;
|
||||
$editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
|
||||
$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%); // Grippy lines, container size text
|
||||
$editFrameMovebarColorFg: pullForward(
|
||||
$editFrameMovebarColorBg,
|
||||
20%
|
||||
); // Grippy lines, container size text
|
||||
$editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
|
||||
$editFrameHovMovebarColorFg: pullForward($editFrameMovebarColorFg, 10%);
|
||||
$editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); // Selected style
|
||||
@ -376,13 +387,13 @@ $colorInspectorBg: pullForward($colorBodyBg, 5%);
|
||||
$colorInspectorFg: $colorBodyFg;
|
||||
$colorInspectorPropName: $colorBodyFg;
|
||||
$colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
|
||||
$colorInspectorSectionHeaderBg: rgba($colorBodyBg, .75);
|
||||
$colorInspectorSectionHeaderBg: rgba($colorBodyBg, 0.75);
|
||||
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
|
||||
|
||||
// Tabs
|
||||
$colorTabBg: $colorBodyBg;
|
||||
$colorTabFg: $colorBodyFgEm;
|
||||
$colorTabCurrentBg: rgba($colorKey, .71);
|
||||
$colorTabCurrentBg: rgba($colorKey, 0.71);
|
||||
$colorTabCurrentFg: $colorBodyFgEm;
|
||||
$colorTabsBaseline: $colorBodyBg;
|
||||
|
||||
@ -413,7 +424,7 @@ $colorLimitYellowIc: #fdc707;
|
||||
$colorLimitOrangeBg: #b36b00;
|
||||
$colorLimitOrangeFg: #ffe0b2;
|
||||
$colorLimitOrangeIc: #ff9900;
|
||||
$colorLimitRedBg: #B60109;
|
||||
$colorLimitRedBg: #b60109;
|
||||
$colorLimitRedFg: #ffa489;
|
||||
$colorLimitRedIc: #ff4222;
|
||||
$colorLimitPurpleBg: #891bb3;
|
||||
@ -424,7 +435,7 @@ $colorLimitCyanFg: #d3faff;
|
||||
$colorLimitCyanIc: #6bedff;
|
||||
|
||||
// Events
|
||||
$colorEventPurpleFg: #aB8fff;
|
||||
$colorEventPurpleFg: #ab8fff;
|
||||
$colorEventRedFg: #ff9999;
|
||||
$colorEventOrangeFg: #ff8800;
|
||||
$colorEventYellowFg: #ffdb63;
|
||||
@ -475,17 +486,17 @@ $colorPlotLimitLineBg: rgba($colorBodyBg, 0.2);
|
||||
|
||||
// Gauges
|
||||
$colorGaugeBase: $colorKeyBg;
|
||||
$colorGaugeBg: rgba($colorGaugeBase, .35); // Gauge radial area background, meter background
|
||||
$colorGaugeBg: rgba($colorGaugeBase, 0.35); // Gauge radial area background, meter background
|
||||
$colorGaugeValue: $colorKeyBg; // Gauge value graphic (radial sweep, bar) color
|
||||
$colorGaugeTextValue: #fff; // Radial gauge text value
|
||||
$colorGaugeMeterTextValue: #fff; // Meter text value, overlaid on value bar
|
||||
$colorGaugeRange: $colorBodyFg; // Range text color
|
||||
$colorGaugeLimitHigh: rgba($colorLimitRedBg, .5);
|
||||
$colorGaugeLimitHigh: rgba($colorLimitRedBg, 0.5);
|
||||
$colorGaugeLimitLow: $colorGaugeLimitHigh;
|
||||
$colorGaugeNeedle: $colorGaugeBase; // Color of needle in a needle gauge.
|
||||
$transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions
|
||||
$marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges
|
||||
$gaugeMeterValueShadow: rgba(255, 255, 255, .5);
|
||||
$gaugeMeterValueShadow: rgba(255, 255, 255, 0.5);
|
||||
// TODO: This is some code regarding how we can make Gauges include a border or glow. We may need to revisit this.
|
||||
// padding: 5%;
|
||||
// background: radial-gradient(circle, transparent 0%, transparent 65%, rgba(255, 255, 255,0.4) 64%, rgba(255,255,255,0) 70%)
|
||||
|
||||
@ -66,8 +66,10 @@ $numericFont: $heroFont;
|
||||
box-shadow: rgba(black, 0.5) 0 0.5px 2px;
|
||||
}
|
||||
|
||||
@mixin telemetryView(){}
|
||||
@mixin browseFrameBorder() {}
|
||||
@mixin telemetryView() {
|
||||
}
|
||||
@mixin browseFrameBorder() {
|
||||
}
|
||||
|
||||
// Functions
|
||||
@function buttonBg($c: $colorBtnBg) {
|
||||
@ -100,17 +102,20 @@ $colorBodyFgEm: #fff;
|
||||
$colorGenBg: #222;
|
||||
$colorHeadBg: #000;
|
||||
$colorHeadFg: $colorBodyFg;
|
||||
$colorKey: #009fd4;
|
||||
$colorKey: #03ace4;
|
||||
$colorKeyBg: #007fad; // Darker version of colorKey for use in major buttons
|
||||
$colorKeyFg: #fff;
|
||||
$colorKeyHov: lighten($colorKey, 10%);
|
||||
$colorKeyBgHov: lighten($colorKeyBg, 10%);
|
||||
$colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%);
|
||||
$colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
|
||||
$colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%)
|
||||
contrast(101%);
|
||||
$colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%)
|
||||
contrast(100%);
|
||||
$colorKeySelectedBg: $colorKeyBg;
|
||||
$colorKeySubtle: pushBack($colorKey, 10%);
|
||||
$uiColor: #0093ff; // Resize bars, splitter bars, etc.
|
||||
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
|
||||
$colorInteriorBorderNotebook: rgba($colorBodyFg, 0.2);
|
||||
$colorA: #ccc;
|
||||
$colorAHov: #fff;
|
||||
$filterHov: brightness(1.3) contrast(1.5); // Tree, location items
|
||||
@ -140,11 +145,14 @@ $sideBarHeaderFg: rgba($colorBodyFg, 0.7);
|
||||
$colorStatusFg: #888;
|
||||
$colorStatusDefault: #ccc;
|
||||
$colorStatusInfo: #60ba7b;
|
||||
$colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%) contrast(92%);
|
||||
$colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%)
|
||||
contrast(92%);
|
||||
$colorStatusAlert: #ffb66c;
|
||||
$colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324deg) brightness(107%) contrast(101%);
|
||||
$colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324deg) brightness(107%)
|
||||
contrast(101%);
|
||||
$colorStatusError: #da0004;
|
||||
$colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%) contrast(115%);
|
||||
$colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%)
|
||||
contrast(115%);
|
||||
$colorStatusBtnBg: #666; // Where is this used?
|
||||
$colorStatusPartialBg: #3f5e8b;
|
||||
$colorStatusCompleteBg: #457638;
|
||||
@ -218,7 +226,10 @@ $borderMissing: 1px dashed $colorAlert !important;
|
||||
$editUIColor: $uiColor; // Base color
|
||||
$editUIColorBg: $editUIColor;
|
||||
$editUIColorFg: #fff;
|
||||
$editUIColorHov: pullForward(saturate($uiColor, 10%), 10%); // Hover color when $editUIColor is applied as a base color
|
||||
$editUIColorHov: pullForward(
|
||||
saturate($uiColor, 10%),
|
||||
10%
|
||||
); // Hover color when $editUIColor is applied as a base color
|
||||
$editUIBaseColor: #344b8d; // Base color, toolbar bg
|
||||
$editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
|
||||
$editUIBaseColorFg: #ffffff; // Toolbar button icon colors, etc.
|
||||
@ -237,7 +248,10 @@ $editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make h
|
||||
$editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
|
||||
$editFrameSelectedShdw: rgba(black, 0.4) 0 1px 5px 1px;
|
||||
$editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
|
||||
$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%); // Grippy lines, container size text
|
||||
$editFrameMovebarColorFg: pullForward(
|
||||
$editFrameMovebarColorBg,
|
||||
20%
|
||||
); // Grippy lines, container size text
|
||||
$editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
|
||||
$editFrameHovMovebarColorFg: pullForward($editFrameMovebarColorFg, 10%);
|
||||
$editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); // Selected style
|
||||
@ -390,7 +404,7 @@ $colorLimitCyanFg: #d3faff;
|
||||
$colorLimitCyanIc: #6bedff;
|
||||
|
||||
// Events
|
||||
$colorEventPurpleFg: #aB8fff;
|
||||
$colorEventPurpleFg: #ab8fff;
|
||||
$colorEventRedFg: #ff9999;
|
||||
$colorEventOrangeFg: #ff8800;
|
||||
$colorEventYellowFg: #ffdb63;
|
||||
|
||||
@ -66,8 +66,10 @@ $numericFont: $heroFont;
|
||||
box-shadow: rgba(black, 0.5) 0 0.5px 2px;
|
||||
}
|
||||
|
||||
@mixin telemetryView(){}
|
||||
@mixin browseFrameBorder() {}
|
||||
@mixin telemetryView() {
|
||||
}
|
||||
@mixin browseFrameBorder() {
|
||||
}
|
||||
|
||||
/**************************************************** OVERRIDES */
|
||||
.c-frame {
|
||||
@ -121,12 +123,15 @@ $colorKeyBg: #007fad; // Darker version of colorKey for use in major buttons
|
||||
$colorKeyFg: #fff;
|
||||
$colorKeyHov: #26d8ff;
|
||||
$colorKeyBgHov: lighten($colorKeyBg, 10%);
|
||||
$colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%) contrast(101%);
|
||||
$colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%) contrast(100%);
|
||||
$colorKeyFilter: invert(36%) sepia(76%) saturate(2514%) hue-rotate(170deg) brightness(99%)
|
||||
contrast(101%);
|
||||
$colorKeyFilterHov: invert(63%) sepia(88%) saturate(3029%) hue-rotate(154deg) brightness(101%)
|
||||
contrast(100%);
|
||||
$colorKeySelectedBg: $colorKey;
|
||||
$colorKeySubtle: pushBack($colorKey, 10%);
|
||||
$uiColor: #0093ff; // Resize bars, splitter bars, etc.
|
||||
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
|
||||
$colorInteriorBorderNotebook: rgba($colorBodyFg, 0.5);
|
||||
$colorA: #ccc;
|
||||
$colorAHov: #fff;
|
||||
$filterHov: brightness(1.3) contrast(1.5); // Tree, location items
|
||||
@ -156,11 +161,14 @@ $sideBarHeaderFg: rgba($colorBodyFg, 0.7);
|
||||
$colorStatusFg: #999;
|
||||
$colorStatusDefault: #ccc;
|
||||
$colorStatusInfo: #60ba7b;
|
||||
$colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%) contrast(92%);
|
||||
$colorStatusInfoFilter: invert(58%) sepia(44%) saturate(405%) hue-rotate(85deg) brightness(102%)
|
||||
contrast(92%);
|
||||
$colorStatusAlert: #ffb66c;
|
||||
$colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324deg) brightness(107%) contrast(101%);
|
||||
$colorStatusAlertFilter: invert(78%) sepia(26%) saturate(1160%) hue-rotate(324deg) brightness(107%)
|
||||
contrast(101%);
|
||||
$colorStatusError: #da0004;
|
||||
$colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%) contrast(115%);
|
||||
$colorStatusErrorFilter: invert(10%) sepia(96%) saturate(4360%) hue-rotate(351deg) brightness(111%)
|
||||
contrast(115%);
|
||||
$colorStatusBtnBg: #666; // Where is this used?
|
||||
$colorStatusPartialBg: #3f5e8b;
|
||||
$colorStatusCompleteBg: #457638;
|
||||
@ -234,7 +242,10 @@ $borderMissing: 1px dashed $colorAlert !important;
|
||||
$editUIColor: $uiColor; // Base color
|
||||
$editUIColorBg: $editUIColor;
|
||||
$editUIColorFg: #fff;
|
||||
$editUIColorHov: pullForward(saturate($uiColor, 10%), 10%); // Hover color when $editUIColor is applied as a base color
|
||||
$editUIColorHov: pullForward(
|
||||
saturate($uiColor, 10%),
|
||||
10%
|
||||
); // Hover color when $editUIColor is applied as a base color
|
||||
$editUIBaseColor: #344b8d; // Base color, toolbar bg
|
||||
$editUIBaseColorHov: pullForward($editUIBaseColor, 20%);
|
||||
$editUIBaseColorFg: #ffffff; // Toolbar button icon colors, etc.
|
||||
@ -253,7 +264,10 @@ $editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make h
|
||||
$editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
|
||||
$editFrameSelectedShdw: rgba(black, 0.4) 0 1px 5px 1px;
|
||||
$editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
|
||||
$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%); // Grippy lines, container size text
|
||||
$editFrameMovebarColorFg: pullForward(
|
||||
$editFrameMovebarColorBg,
|
||||
20%
|
||||
); // Grippy lines, container size text
|
||||
$editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
|
||||
$editFrameHovMovebarColorFg: pullForward($editFrameMovebarColorFg, 10%);
|
||||
$editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); // Selected style
|
||||
@ -406,7 +420,7 @@ $colorLimitCyanFg: #d3faff;
|
||||
$colorLimitCyanIc: #6bedff;
|
||||
|
||||
// Events
|
||||
$colorEventPurpleFg: #aB8fff;
|
||||
$colorEventPurpleFg: #ab8fff;
|
||||
$colorEventRedFg: #ff9999;
|
||||
$colorEventOrangeFg: #ff8800;
|
||||
$colorEventYellowFg: #ffdb63;
|
||||
|
||||
@ -65,8 +65,10 @@ $numericFont: $heroFont;
|
||||
background: $c;
|
||||
}
|
||||
|
||||
@mixin telemetryView(){}
|
||||
@mixin browseFrameBorder() {}
|
||||
@mixin telemetryView() {
|
||||
}
|
||||
@mixin browseFrameBorder() {
|
||||
}
|
||||
|
||||
// Functions
|
||||
@function buttonBg($c: $colorBtnBg) {
|
||||
@ -104,12 +106,15 @@ $colorKeyBg: #007fad; // Darker version of colorKey for use in major buttons
|
||||
$colorKeyFg: #fff;
|
||||
$colorKeyHov: lighten($colorKey, 10%); //#00c0f6;
|
||||
$colorKeyBgHov: lighten($colorKeyBg, 10%);
|
||||
$colorKeyFilter: invert(37%) sepia(100%) saturate(686%) hue-rotate(157deg) brightness(102%) contrast(102%);
|
||||
$colorKeyFilterHov: invert(69%) sepia(87%) saturate(3243%) hue-rotate(151deg) brightness(97%) contrast(102%);
|
||||
$colorKeyFilter: invert(37%) sepia(100%) saturate(686%) hue-rotate(157deg) brightness(102%)
|
||||
contrast(102%);
|
||||
$colorKeyFilterHov: invert(69%) sepia(87%) saturate(3243%) hue-rotate(151deg) brightness(97%)
|
||||
contrast(102%);
|
||||
$colorKeySelectedBg: $colorKey;
|
||||
$colorKeySubtle: pushBack($colorKey, 20%);
|
||||
$uiColor: #289fec; // Resize bars, splitter bars, etc.
|
||||
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
|
||||
$colorInteriorBorderNotebook: rgba($colorBodyFg, 0.5);
|
||||
$colorA: $colorBodyFg;
|
||||
$colorAHov: $colorKey;
|
||||
$filterHov: hue-rotate(-10deg) brightness(0.8) contrast(2); // Tree, location items
|
||||
@ -139,11 +144,14 @@ $sideBarHeaderFg: rgba($colorBodyFg, 0.7);
|
||||
$colorStatusFg: #999;
|
||||
$colorStatusDefault: #ccc;
|
||||
$colorStatusInfo: #60ba7b;
|
||||
$colorStatusInfoFilter: invert(64%) sepia(42%) saturate(416%) hue-rotate(85deg) brightness(93%) contrast(93%);
|
||||
$colorStatusInfoFilter: invert(64%) sepia(42%) saturate(416%) hue-rotate(85deg) brightness(93%)
|
||||
contrast(93%);
|
||||
$colorStatusAlert: #ff8a0d;
|
||||
$colorStatusAlertFilter: invert(89%) sepia(26%) saturate(5035%) hue-rotate(316deg) brightness(114%) contrast(107%);
|
||||
$colorStatusAlertFilter: invert(89%) sepia(26%) saturate(5035%) hue-rotate(316deg) brightness(114%)
|
||||
contrast(107%);
|
||||
$colorStatusError: #da0004;
|
||||
$colorStatusErrorFilter: invert(8%) sepia(96%) saturate(4511%) hue-rotate(352deg) brightness(136%) contrast(114%);
|
||||
$colorStatusErrorFilter: invert(8%) sepia(96%) saturate(4511%) hue-rotate(352deg) brightness(136%)
|
||||
contrast(114%);
|
||||
$colorStatusBtnBg: #666; // Where is this used?
|
||||
$colorStatusPartialBg: #c9d6ff;
|
||||
$colorStatusCompleteBg: #a4e4b4;
|
||||
@ -217,7 +225,10 @@ $borderMissing: 1px dashed $colorAlert !important;
|
||||
$editUIColor: $uiColor; // Base color
|
||||
$editUIColorBg: $editUIColor;
|
||||
$editUIColorFg: #fff;
|
||||
$editUIColorHov: pullForward(saturate($uiColor, 10%),20%); // Hover color when $editUIColor is applied as a base color
|
||||
$editUIColorHov: pullForward(
|
||||
saturate($uiColor, 10%),
|
||||
20%
|
||||
); // Hover color when $editUIColor is applied as a base color
|
||||
$editUIBaseColor: #cae1ff; // Base color, toolbar bg
|
||||
$editUIBaseColorHov: pushBack($editUIBaseColor, 20%);
|
||||
$editUIBaseColorFg: #4c4c4c; // Toolbar button icon colors, etc.
|
||||
@ -236,7 +247,10 @@ $editFrameColorHandleBg: $colorBodyBg; // Resize handle 'offset' color to make h
|
||||
$editFrameColorHandleFg: $editFrameColorSelected; // Resize handle main color
|
||||
$editFrameSelectedShdw: rgba(black, 0.5) 0 1px 5px 2px;
|
||||
$editFrameMovebarColorBg: $editFrameColor; // Movebar bg color
|
||||
$editFrameMovebarColorFg: pullForward($editFrameMovebarColorBg, 20%); // Grippy lines, container size text
|
||||
$editFrameMovebarColorFg: pullForward(
|
||||
$editFrameMovebarColorBg,
|
||||
20%
|
||||
); // Grippy lines, container size text
|
||||
$editFrameHovMovebarColorBg: pullForward($editFrameMovebarColorBg, 10%); // Hover style
|
||||
$editFrameHovMovebarColorFg: pullForward($editFrameMovebarColorFg, 10%);
|
||||
$editFrameSelectedMovebarColorBg: pullForward($editFrameMovebarColorBg, 15%); // Selected style
|
||||
|
||||
@ -312,12 +312,17 @@
|
||||
$impStr: !important;
|
||||
}
|
||||
|
||||
background-image: linear-gradient(45deg, $color 25%, transparent 25%),
|
||||
background-image:
|
||||
linear-gradient(45deg, $color 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, $color 75%),
|
||||
linear-gradient(45deg, transparent 75%, $color 75%),
|
||||
linear-gradient(45deg, $color 25%, transparent 25%) $impStr;
|
||||
background-size: $size $size;
|
||||
background-position: 0 0, 0 0, -1 * $bgPos -1 * $bgPos, $bgPos $bgPos;
|
||||
background-position:
|
||||
0 0,
|
||||
0 0,
|
||||
-1 * $bgPos -1 * $bgPos,
|
||||
$bgPos $bgPos;
|
||||
}
|
||||
|
||||
@mixin disabled() {
|
||||
@ -350,7 +355,9 @@
|
||||
@mixin dropDownArrowBg() {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3e%3cpath fill='%23#{svgColorFromHex($colorSelectArw)}' d='M5 5l5-5H0z'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
background-position: right 0.4em top 80%, 0 0;
|
||||
background-position:
|
||||
right 0.4em top 80%,
|
||||
0 0;
|
||||
}
|
||||
|
||||
@mixin noColor() {
|
||||
@ -613,24 +620,24 @@
|
||||
}
|
||||
|
||||
@mixin cButton() {
|
||||
@include cControl();
|
||||
@include cControlHov();
|
||||
@include themedButton();
|
||||
@include cButtonLayout();
|
||||
border-radius: $controlCr;
|
||||
color: $colorBtnFg;
|
||||
cursor: pointer;
|
||||
@include cControl();
|
||||
@include cControlHov();
|
||||
@include themedButton();
|
||||
@include cButtonLayout();
|
||||
border-radius: $controlCr;
|
||||
color: $colorBtnFg;
|
||||
cursor: pointer;
|
||||
|
||||
&[class*="--major"],
|
||||
&[class*='is-active']{
|
||||
background: $colorBtnMajorBg !important;
|
||||
color: $colorBtnMajorFg !important;
|
||||
}
|
||||
&[class*='--major'],
|
||||
&[class*='is-active'] {
|
||||
background: $colorBtnMajorBg !important;
|
||||
color: $colorBtnMajorFg !important;
|
||||
}
|
||||
|
||||
&[class*='--caution'] {
|
||||
background: $colorBtnCautionBg !important;
|
||||
color: $colorBtnCautionFg !important;
|
||||
}
|
||||
&[class*='--caution'] {
|
||||
background: $colorBtnCautionBg !important;
|
||||
color: $colorBtnCautionFg !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin cClickIcon() {
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -47,7 +47,7 @@
|
||||
// Make <a> in label look like buttons
|
||||
@include transition(background-color);
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba($colorIndicatorMenuFg, 0.5);
|
||||
border: 1px solid rgba($colorIndicatorMenuFg, 0.8);
|
||||
border-radius: $controlCr;
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user