diff --git a/addons/rose/addon/styles/addon.scss b/addons/rose/addon/styles/addon.scss index b7c296e7d..d9496c886 100644 --- a/addons/rose/addon/styles/addon.scss +++ b/addons/rose/addon/styles/addon.scss @@ -3,6 +3,6 @@ * SPDX-License-Identifier: BUSL-1.1 */ -@import '@hashicorp/design-system-components.css'; +@import '@hashicorp/design-system-components'; @import 'hds/themes/dark-mode'; @import 'hds/overrides'; diff --git a/addons/rose/index.js b/addons/rose/index.js index 940d07259..e1b4f1afb 100644 --- a/addons/rose/index.js +++ b/addons/rose/index.js @@ -13,14 +13,13 @@ module.exports = { name: require('./package').name, included(app) { this._super.included.apply(this, arguments); - app.import( - 'node_modules/@hashicorp/design-system-components/dist/styles/@hashicorp/design-system-components.css', - ); + app.import('node_modules/codemirror/lib/codemirror.css'); app.import('node_modules/codemirror/theme/monokai.css'); app.import('node_modules/codemirror/addon/lint/lint.css'); app.import('node_modules/jsonlint/lib/jsonlint.js'); + this.includeHDSStyles(app); this.includeFlightIcons(app); this.includePublic(app); this.setupSVGO(app); @@ -37,6 +36,29 @@ module.exports = { .contentFor(type, config); }, + /** + * Finds the HDS styles folder and includes it into the running + * application's `sassOptions.includePaths`. + */ + includeHDSStyles(app) { + const tokensPath = + '../../node_modules/@hashicorp/design-system-tokens/dist/products/css'; + const hdsPath = + '../../node_modules/@hashicorp/design-system-components/dist/styles'; + const iconsPath = + '../../node_modules/@hashicorp/ember-flight-icons/dist/styles'; + + // Setup default sassOptions on the running application + app.options.sassOptions = app.options.sassOptions || {}; + app.options.sassOptions.includePaths = + app.options.sassOptions.includePaths || []; + + // Include the addon styles + app.options.sassOptions.includePaths.push(tokensPath); + app.options.sassOptions.includePaths.push(hdsPath); + app.options.sassOptions.includePaths.push(iconsPath); + }, + /** * Finds the structure-icons folder and includes it into the * ember-inline-svg addon.