diff --git a/addons/rose/app/styles/rose/_typography.scss b/addons/rose/app/styles/rose/_typography.scss index 985141d54..40c452aed 100644 --- a/addons/rose/app/styles/rose/_typography.scss +++ b/addons/rose/app/styles/rose/_typography.scss @@ -16,8 +16,20 @@ body { // and link list panel font-family: typography.$family-primary; - // these 3 are used across the app + // this is used across the app line-height: typography.line-height(m); +} + +// This is use to set the color and background color +// of the body and/or the ember application depending +// on where the ember application is mounted +// When running the tests, the ember application +// is mounted on a div element with the class 'ember-application' +// When running the app, the ember application +// is mounted on the body element +body, +.ember-application { + // these are used across the app color: var(--stark); background-color: var(--subtle); } diff --git a/ui/admin/config/environment.js b/ui/admin/config/environment.js index 209cc4684..61ae72f4d 100644 --- a/ui/admin/config/environment.js +++ b/ui/admin/config/environment.js @@ -15,6 +15,7 @@ const { const APP_NAME = process.env.APP_NAME || 'Boundary'; const API_HOST = process.env.API_HOST || ''; const ENABLE_A11Y_AUDIT = process.env.ENABLE_A11Y_AUDIT || false; +const COLOR_THEME = process.env.COLOR_THEME ?? 'light'; const clone = (obj) => v8.deserialize(v8.serialize(obj)); @@ -171,6 +172,7 @@ module.exports = function (environment) { }); ENV.ENABLE_A11Y_AUDIT = ENABLE_A11Y_AUDIT; + ENV.COLOR_THEME = COLOR_THEME; } if (environment === 'test') { @@ -192,6 +194,7 @@ module.exports = function (environment) { ENV.enableConfirmService = false; ENV.ENABLE_A11Y_AUDIT = ENABLE_A11Y_AUDIT; + ENV.COLOR_THEME = COLOR_THEME; } if (environment === 'production') { diff --git a/ui/admin/tests/test-helper.js b/ui/admin/tests/test-helper.js index c1fc1e66a..309dce557 100644 --- a/ui/admin/tests/test-helper.js +++ b/ui/admin/tests/test-helper.js @@ -35,18 +35,23 @@ setupGlobalA11yHooks(() => true, { setupQUnitA11yAuditToggle(QUnit); +const runOnly = + config.COLOR_THEME === 'dark' + ? 'color-contrast' + : { + type: 'tag', + values: [ + 'wcag2a', + 'wcag2aa', + 'wcag21a', + 'wcag21aa', + 'wcag22aa', + 'best-practice', + ], + }; + setRunOptions({ - runOnly: { - type: 'tag', - values: [ - 'wcag2a', - 'wcag2aa', - 'wcag21a', - 'wcag21aa', - 'wcag22aa', - 'best-practice', - ], - }, + runOnly, include: [['#ember-testing-container']], exclude: [['.flight-sprite-container']], }); diff --git a/ui/desktop/config/environment.js b/ui/desktop/config/environment.js index 8c989503e..fce1ed8fa 100644 --- a/ui/desktop/config/environment.js +++ b/ui/desktop/config/environment.js @@ -8,6 +8,7 @@ const APP_NAME = process.env.APP_NAME || 'Boundary'; const locationType = process.env.EMBER_CLI_ELECTRON ? 'hash' : 'history'; const ENABLE_A11Y_AUDIT = process.env.ENABLE_A11Y_AUDIT || false; +const COLOR_THEME = process.env.COLOR_THEME ?? 'light'; module.exports = function (environment) { const ENV = { @@ -83,6 +84,7 @@ module.exports = function (environment) { : true; ENV.ENABLE_A11Y_AUDIT = ENABLE_A11Y_AUDIT; + ENV.COLOR_THEME = COLOR_THEME; } if (environment === 'test') { @@ -111,6 +113,7 @@ module.exports = function (environment) { }; ENV.ENABLE_A11Y_AUDIT = ENABLE_A11Y_AUDIT; + ENV.COLOR_THEME = COLOR_THEME; } if (environment === 'production') { diff --git a/ui/desktop/tests/test-helper.js b/ui/desktop/tests/test-helper.js index e5d4e9632..dff6da20d 100644 --- a/ui/desktop/tests/test-helper.js +++ b/ui/desktop/tests/test-helper.js @@ -35,18 +35,23 @@ setupGlobalA11yHooks(() => true, { setupQUnitA11yAuditToggle(QUnit); +const runOnly = + config.COLOR_THEME === 'dark' + ? 'color-contrast' + : { + type: 'tag', + values: [ + 'wcag2a', + 'wcag2aa', + 'wcag21a', + 'wcag21aa', + 'wcag22aa', + 'best-practice', + ], + }; + setRunOptions({ - runOnly: { - type: 'tag', - values: [ - 'wcag2a', - 'wcag2aa', - 'wcag21a', - 'wcag21aa', - 'wcag22aa', - 'best-practice', - ], - }, + runOnly, include: [['#ember-testing-container']], exclude: [['.flight-sprite-container']], });