diff --git a/addons/rose/.eslintrc.js b/addons/rose/.eslintrc.js index 53cdaf91f..ecdee2162 100644 --- a/addons/rose/.eslintrc.js +++ b/addons/rose/.eslintrc.js @@ -32,6 +32,7 @@ module.exports = { { files: [ '.eslintrc.js', + '.stylelintrc.js', '.prettierrc.js', '.template-lintrc.js', 'ember-cli-build.js', diff --git a/addons/rose/.sasslintrc b/addons/rose/.sasslintrc deleted file mode 100644 index 84f041b0b..000000000 --- a/addons/rose/.sasslintrc +++ /dev/null @@ -1,7 +0,0 @@ -files: - include: 'app/**/*.scss' -rules: - leading-zero: 0 - mixins-before-declarations: 0 - nesting-depth: 0 - placeholder-in-extend: 0 diff --git a/addons/rose/.stylelintrc.js b/addons/rose/.stylelintrc.js new file mode 100644 index 000000000..5f7ef4db4 --- /dev/null +++ b/addons/rose/.stylelintrc.js @@ -0,0 +1,19 @@ +'use strict'; + +module.exports = { + extends: ['stylelint-config-standard-scss', 'stylelint-config-prettier-scss'], + rules: { + // This could be fixed in the future if we don't want to use the legacy format + 'color-function-notation': 'legacy', + + // We oftentimes want to have long form properties for readability + 'declaration-block-no-redundant-longhand-properties': null, + + // This is just a personal preference unless the quotes are needed + // to escape special characters + 'function-url-quotes': null, + + // This is often limited by the DOM and we want to order our declarations by our own standard + 'no-descending-specificity': null, + }, +}; diff --git a/addons/rose/app/styles/rose/_reset.scss b/addons/rose/app/styles/rose/_reset.scss index 3fa9143f0..6a253454a 100644 --- a/addons/rose/app/styles/rose/_reset.scss +++ b/addons/rose/app/styles/rose/_reset.scss @@ -87,7 +87,6 @@ video { margin: 0; padding: 0; border: 0; - font-size: 100%; font: inherit; vertical-align: baseline; } @@ -123,16 +122,16 @@ q { } blockquote { - &:before, - &:after { + &::before, + &::after { content: ''; content: none; } } q { - &:before, - &:after { + &::before, + &::after { content: ''; content: none; } diff --git a/addons/rose/app/styles/rose/_typography.scss b/addons/rose/app/styles/rose/_typography.scss index 9839ab8b1..f60a710a7 100644 --- a/addons/rose/app/styles/rose/_typography.scss +++ b/addons/rose/app/styles/rose/_typography.scss @@ -8,6 +8,7 @@ html { body { font-family: typography.$family-primary; + // This is the only time we'll explicitly use pixels. All other sizes are // expressed in rem units. font-size: typography.$base-font-size * 1px; @@ -30,6 +31,7 @@ code { h1, .h1 { @include type-mixins.type(h1, bold); + margin-top: sizing.rems(m); margin-bottom: sizing.rems(xs); } @@ -37,6 +39,7 @@ h1, h2, .h2 { @include type-mixins.type(h2, bold); + margin-top: sizing.rems(m); margin-bottom: sizing.rems(xs); } @@ -44,6 +47,7 @@ h2, h3, .h3 { @include type-mixins.type(h3, bold); + margin-top: sizing.rems(m); margin-bottom: sizing.rems(xs); } diff --git a/addons/rose/app/styles/rose/components/_badge.scss b/addons/rose/app/styles/rose/components/_badge.scss index cb3e8b7a8..d1c66c9b8 100644 --- a/addons/rose/app/styles/rose/components/_badge.scss +++ b/addons/rose/app/styles/rose/components/_badge.scss @@ -3,6 +3,7 @@ .rose-badge { @include type.type(s, semibold); + padding: sizing.rems(xxxs) sizing.rems(xxs); border-radius: sizing.rems(xxxs); border-width: sizing.rems(xxxxs); diff --git a/addons/rose/app/styles/rose/components/_button.scss b/addons/rose/app/styles/rose/components/_button.scss index a195dd275..635e7cb4f 100644 --- a/addons/rose/app/styles/rose/components/_button.scss +++ b/addons/rose/app/styles/rose/components/_button.scss @@ -123,6 +123,7 @@ $size-xxxxs: sizing.rems(xxxxs); // 1 .rose-button-inline-link-action { @include typography.type(m, semibold); + color: var(--info); border: 0; background: none; @@ -131,16 +132,17 @@ $size-xxxxs: sizing.rems(xxxxs); // 1 display: inline; &:not(:disabled) { + &:disabled { + cursor: not-allowed; + opacity: var(--opacity-1); + } + &:hover { text-decoration: underline; } + &:active { color: var(--info-starker-1); } } - - &:disabled { - cursor: not-allowed; - opacity: var(--opacity-1); - } } diff --git a/addons/rose/app/styles/rose/components/_frame.scss b/addons/rose/app/styles/rose/components/_frame.scss index e75d127cd..026fd1dc5 100644 --- a/addons/rose/app/styles/rose/components/_frame.scss +++ b/addons/rose/app/styles/rose/components/_frame.scss @@ -11,36 +11,36 @@ $xxxs: sizing.rems(xxxs); // 2 $xxxxs: sizing.rems(xxxxs); // 1 .rose-frame { - --headerColor: var(--ui-gray-starker-3); - --headerIconColor: var(--headerColor); - --headerBackgroundColor: var(--ui-gray-subtler-5); - --headerBorderColor: var(--ui-gray-subtler-3); + --header-color: var(--ui-gray-starker-3); + --header-icon-color: var(--header-color); + --header-background-color: var(--ui-gray-subtler-5); + --header-border-color: var(--ui-gray-subtler-3); @include type.type(s); + border: $xxxxs solid var(--ui-gray-subtler-3); border-radius: $xxxs; - //margin: $m; box-shadow: 0 $xxs $xxs rgba(var(--stark-components), var(--opacity-4)); background-color: var(--background-color); .rose-frame-header { padding: ($xs + $xxxs) $l; min-height: $l; - color: var(--headerColor); - background-color: var(--headerBackgroundColor); - border-bottom: $xxxxs solid var(--headerBorderColor); + color: var(--header-color); + background-color: var(--header-background-color); + border-bottom: $xxxxs solid var(--header-border-color); border-top-left-radius: $xxxs; border-top-right-radius: $xxxs; } .rose-frame-body { - $bodyPadding: $l; + $body-padding: $l; - padding: $bodyPadding; + padding: $body-padding; > .rose-separator { - margin-left: -$bodyPadding; - margin-right: -$bodyPadding; + margin-left: -$body-padding; + margin-right: -$body-padding; } } } diff --git a/addons/rose/app/styles/rose/components/_message.scss b/addons/rose/app/styles/rose/components/_message.scss index 858ea5c0b..b3b7f6da3 100644 --- a/addons/rose/app/styles/rose/components/_message.scss +++ b/addons/rose/app/styles/rose/components/_message.scss @@ -4,10 +4,11 @@ .rose-message { --message-color: var(--ui-gray-starker-1); + display: flex; flex-direction: column; color: var(--message-color); - width: sizing.rems(l) * 15; //16 rems/320 px + width: sizing.rems(l) * 15; // 16 rems/320 px margin-bottom: sizing.rems(l); @media (max-width: media.width(small)) { @@ -17,6 +18,7 @@ // Icons always need tweaking .rose-icon { --size: #{sizing.rems(m)}; + > svg { vertical-align: text-bottom; } @@ -33,18 +35,21 @@ .rose-icon { // targeting 40px --size: #{sizing.rems(xl) + sizing.rems(xxs)}; + grid-area: icon; margin-right: sizing.rems(s); } .rose-message-title { @include type.type(l, semibold); + grid-area: title; margin: 0; } .rose-message-subtitle { @include type.type(s, normal); + grid-area: subtitle; margin: 0; } @@ -63,9 +68,9 @@ .rose-message-link { @include type.type(s, semibold); + grid-area: left-link; color: var(--action); - text-decoration: none; & + .rose-message-link { diff --git a/addons/rose/app/styles/rose/components/_notification.scss b/addons/rose/app/styles/rose/components/_notification.scss index d48f8b96f..d0ceb027f 100644 --- a/addons/rose/app/styles/rose/components/_notification.scss +++ b/addons/rose/app/styles/rose/components/_notification.scss @@ -19,14 +19,17 @@ .rose-notification-icon { position: relative; top: $xxxxs; + color: var(--icon-color); } .rose-notification-header { + color: var(--header-color); @include type.type(m, semibold); } .rose-notification-body { @include type.type(s); + // hack alert, because the icons are still hard to work with margin-left: sizing.rems(m) + $xxs; overflow-wrap: break-word; @@ -34,13 +37,12 @@ .rose-notification-dismiss { position: absolute; - color: currentColor; + color: currentcolor; background-color: transparent; border-radius: $xxxs; border: 0; padding: 0; cursor: pointer; - top: sizing.rems(s); right: sizing.rems(s); @@ -75,14 +77,6 @@ border-color: var(--border-color); background-color: var(--background-color); - .rose-notification-icon { - color: var(--icon-color); - } - - .rose-notification-header { - color: var(--header-color); - } - &.is-error { --icon-color: var(--failure); --header-color: var(--failure); diff --git a/addons/rose/app/styles/rose/components/card/_link.scss b/addons/rose/app/styles/rose/components/card/_link.scss index c4530d3e8..1395d8178 100644 --- a/addons/rose/app/styles/rose/components/card/_link.scss +++ b/addons/rose/app/styles/rose/components/card/_link.scss @@ -8,7 +8,6 @@ $xxxs: sizing.rems(xxxs); // 2 .rose-card-link { --background-color-light: transparent; --background-color-dark: var(--ui-gray-subtler-6); - --background-color: var(--background-color-light); .ember-application.rose-theme-light & { @@ -24,6 +23,7 @@ $xxxs: sizing.rems(xxxs); // 2 } @include type.type(s); + border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2); border-radius: sizing.rems(xxxs); color: var(--ui-gray); @@ -39,19 +39,26 @@ $xxxs: sizing.rems(xxxs); // 2 margin: 0; padding: 0; height: 100%; + // TODO: Figure out better method of defining card dimensions - min-height: sizing.rems(m) * 8; //6 rems - width: sizing.rems(m) * 16; //12 rems + min-height: sizing.rems(m) * 8; // 6 rems + width: sizing.rems(m) * 16; // 12 rems } &:hover { $s: sizing.rems(s); // 12 $xs: sizing.rems(xs); // 8 $xxs: sizing.rems(xxs); // 4 + border-color: var(--ui-gray); background-color: var(--ui-gray-subtler-5); box-shadow: 0 $xs $s rgba(var(--stark-components), var(--opacity-3)), 0 $xxs $xxs rgba(var(--stark-components), var(--opacity-4)); + + .rose-card-link-description, + .rose-card-link-footer-id { + color: var(--stark); + } } &:active { @@ -72,18 +79,17 @@ $xxxs: sizing.rems(xxxs); // 2 .rose-card-link-header { padding-top: sizing.rems(m); } + .rose-card-link-footer { margin-top: sizing.rems(xs) + sizing.rems(xxs); padding-top: sizing.rems(xs) * 2; padding-bottom: sizing.rems(xs) * 2; - } - - .rose-card-link-footer { border-top: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2); } .rose-card-link-title { @include type.type(m, semibold); + display: flex; color: var(--stark); margin: 0; @@ -119,6 +125,7 @@ $xxxs: sizing.rems(xxxs); // 2 .rose-card-link-footer-id { @include type.type(xs); + color: var(--ui-gray); margin: 0; @@ -129,13 +136,6 @@ $xxxs: sizing.rems(xxxs); // 2 } } - &:hover { - .rose-card-link-description, - .rose-card-link-footer-id { - color: var(--stark); - } - } - // .rose-card-link-description { // margin: auto 0 0; // color: var(--ui-gray); diff --git a/addons/rose/app/styles/rose/components/code-editor/_index.scss b/addons/rose/app/styles/rose/components/code-editor/_index.scss index 2c6fb86b9..c282e5bcd 100644 --- a/addons/rose/app/styles/rose/components/code-editor/_index.scss +++ b/addons/rose/app/styles/rose/components/code-editor/_index.scss @@ -1,3 +1,4 @@ +/* stylelint-disable selector-class-pattern */ @use '../../variables/sizing'; // Codemirror overrides @@ -9,7 +10,7 @@ max-width: 100%; display: flex; flex: 1; - font-family: ui-monospace, 'Menlo', monospace; + font-family: ui-monospace, Menlo, monospace; } .rose-autosize { @@ -23,7 +24,7 @@ } .CodeMirror-sizer { - border-right-width: 0px !important; + border-right-width: 0 !important; } // Toolbar diff --git a/addons/rose/app/styles/rose/components/dialog/_cover.scss b/addons/rose/app/styles/rose/components/dialog/_cover.scss index c41fed32b..e1e052583 100644 --- a/addons/rose/app/styles/rose/components/dialog/_cover.scss +++ b/addons/rose/app/styles/rose/components/dialog/_cover.scss @@ -23,6 +23,7 @@ max-width: 650px; } } + // overlay .rose-dialog-cover-modal-overlay { content: ' '; diff --git a/addons/rose/app/styles/rose/components/dialog/_dialog.scss b/addons/rose/app/styles/rose/components/dialog/_dialog.scss index be87d0b07..bac49ec92 100644 --- a/addons/rose/app/styles/rose/components/dialog/_dialog.scss +++ b/addons/rose/app/styles/rose/components/dialog/_dialog.scss @@ -10,35 +10,35 @@ $xxxs: sizing.rems(xxxs); // 2 $xxxxs: sizing.rems(xxxxs); // 1 .rose-dialog { - --headerColor: var(--ui-gray-starker-3); - --headerIconColor: var(--headerColor); - --headerBackgroundColor: var(--ui-gray-subtler-5); - --headerBorderColor: var(--ui-gray-subtler-2); + --header-color: var(--ui-gray-starker-3); + --header-icon-color: var(--header-color); + --header-background-color: var(--ui-gray-subtler-5); + --header-border-color: var(--ui-gray-subtler-2); border-radius: $xxxs; background-color: var(--subtle); box-shadow: 0 $xs $s rgba(var(--stark-components), var(--opacity-2)), - 0 $xxs $xxs rgba(var(--stark-components), var(--opacity-3)); + 0 $xxs $xxs rgba(var(--stark-components), var(--opacity-3)); &.rose-dialog-success { - --headerColor: var(--success-starker-1); - --headerIconColor: var(--success); - --headerBackgroundColor: var(--success-subtler-2); - --headerBorderColor: var(--success); + --header-color: var(--success-starker-1); + --header-icon-color: var(--success); + --header-background-color: var(--success-subtler-2); + --header-border-color: var(--success); } &.rose-dialog-warning { - --headerColor: var(--warning-starker-1); - --headerIconColor: var(--warning); - --headerBackgroundColor: var(--warning-subtler-2); - --headerBorderColor: var(--warning); + --header-color: var(--warning-starker-1); + --header-icon-color: var(--warning); + --header-background-color: var(--warning-subtler-2); + --header-border-color: var(--warning); } &.rose-dialog-error { - --headerColor: var(--failure-starker-1); - --headerIconColor: var(--failure); - --headerBackgroundColor: var(--failure-subtler-2); - --headerBorderColor: var(--failure); + --header-color: var(--failure-starker-1); + --header-icon-color: var(--failure); + --header-background-color: var(--failure-subtler-2); + --header-border-color: var(--failure); } .rose-dialog-header { @@ -46,14 +46,14 @@ $xxxxs: sizing.rems(xxxxs); // 1 align-items: center; padding: ($xs + $xxxs) $m; min-height: sizing.rems(l); - color: var(--headerColor); - background-color: var(--headerBackgroundColor); - border: $xxxxs solid var(--headerBorderColor); + color: var(--header-color); + background-color: var(--header-background-color); + border: $xxxxs solid var(--header-border-color); border-top-left-radius: $xxxs; border-top-right-radius: $xxxs; .rose-icon { - color: var(--headerIconColor); + color: var(--header-icon-color); margin-right: $xxs + $xxxs; svg { @@ -65,10 +65,11 @@ $xxxxs: sizing.rems(xxxxs); // 1 .rose-dialog-heading { @include type.type(m, semibold); + flex-grow: 1; margin: 0; padding: 0; - color: currentColor; + color: currentcolor; } .rose-dialog-dismiss { @@ -82,7 +83,7 @@ $xxxxs: sizing.rems(xxxxs); // 1 width: sizing.rems(l); &:hover { - border-color: currentColor; + border-color: currentcolor; } .rose-icon { @@ -113,18 +114,13 @@ $xxxxs: sizing.rems(xxxxs); // 1 margin-bottom: 0; } } -} -.rose-dialog { &.modal { display: flex; flex-direction: column; - position: fixed; - left: calc(50% - 300px); top: 5%; - max-height: 85%; max-width: 80vw; width: 650px; @@ -138,6 +134,7 @@ $xxxxs: sizing.rems(xxxxs); // 1 } } } + // overlay .rose-dialog-modal-overlay { content: ' '; diff --git a/addons/rose/app/styles/rose/components/dropdown/_button.scss b/addons/rose/app/styles/rose/components/dropdown/_button.scss index 0c561b22d..1492008a1 100644 --- a/addons/rose/app/styles/rose/components/dropdown/_button.scss +++ b/addons/rose/app/styles/rose/components/dropdown/_button.scss @@ -4,6 +4,7 @@ .rose-dropdown-button { @include type.type(s); + display: block; box-sizing: border-box; width: 100%; @@ -12,11 +13,14 @@ padding: 0 sizing.rems(s); text-decoration: none; text-align: left; + $line-height: math.div(36, 14); + line-height: $line-height; --background-color: transparent; --color: var(--stark); + color: var(--color); background-color: var(--background-color); diff --git a/addons/rose/app/styles/rose/components/dropdown/_dropdown.scss b/addons/rose/app/styles/rose/components/dropdown/_dropdown.scss index 62a8f3d36..245a24374 100644 --- a/addons/rose/app/styles/rose/components/dropdown/_dropdown.scss +++ b/addons/rose/app/styles/rose/components/dropdown/_dropdown.scss @@ -4,13 +4,12 @@ $xs: sizing.rems(xs); // 8 $xxs: sizing.rems(xxs); // 4 $chevron: url("data:image/svg+xml;utf-8,"); -$chevronWhite: url("data:image/svg+xml;utf-8,"); -$chevronGrey: url("data:image/svg+xml;utf-8,"); +$chevron-white: url("data:image/svg+xml;utf-8,"); +$chevron-grey: url("data:image/svg+xml;utf-8,"); .rose-dropdown { --background-image-light: #{$chevron}; - --background-image-dark: #{$chevronWhite}; - + --background-image-dark: #{$chevron-white}; --background-image: var(--background-image-light); .ember-application.rose-theme-light & { @@ -31,10 +30,13 @@ $chevronGrey: url("data:image/svg+xml;utf-8,"); } @@ -128,7 +128,7 @@ color: var(--failure); .rose-form-checkbox-field { - &:not(:disabled):not(:focus) { + &:not(:disabled, :focus) { ~ .rose-form-checkbox-label { &::before { border-color: var(--failure); diff --git a/addons/rose/app/styles/rose/components/form/_fieldset.scss b/addons/rose/app/styles/rose/components/form/_fieldset.scss index 404737cf4..62cc3bc4b 100644 --- a/addons/rose/app/styles/rose/components/form/_fieldset.scss +++ b/addons/rose/app/styles/rose/components/form/_fieldset.scss @@ -15,6 +15,7 @@ .rose-form-fieldset-description { margin: sizing.rems(xxs) 0; @include type.type(xs); + color: var(--ui-gray); } } diff --git a/addons/rose/app/styles/rose/components/form/_helper-text.scss b/addons/rose/app/styles/rose/components/form/_helper-text.scss index cca0ccda0..4de7caee2 100644 --- a/addons/rose/app/styles/rose/components/form/_helper-text.scss +++ b/addons/rose/app/styles/rose/components/form/_helper-text.scss @@ -3,6 +3,7 @@ .rose-form-helper-text { @include type.type(xs); + display: block; color: var(--ui-gray); margin-bottom: sizing.rems(xxs); diff --git a/addons/rose/app/styles/rose/components/form/_input.scss b/addons/rose/app/styles/rose/components/form/_input.scss index 889c933ef..a5c053253 100644 --- a/addons/rose/app/styles/rose/components/form/_input.scss +++ b/addons/rose/app/styles/rose/components/form/_input.scss @@ -7,11 +7,13 @@ .rose-input-wrapper { position: relative; + .rose-icon { position: absolute; left: 10px; top: 10px; } + .rose-icon + .rose-form-input-field { padding-left: 30px; } @@ -19,6 +21,7 @@ .rose-form-input-field { @include type.type(m); + display: inline-block; box-sizing: border-box; width: 100%; @@ -28,7 +31,7 @@ background-color: var(--subtle); border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2); border-radius: sizing.rems(xxxs); - box-shadow: inset 0px 3px 1px rgba(var(--stark-components), var(--opacity-4)); + box-shadow: inset 0 3px 1px rgba(var(--stark-components), var(--opacity-4)); &::placeholder { color: var(--ui-gray-subtler-1); @@ -36,10 +39,10 @@ &.error { color: var(--failure); - border-color: currentColor; + border-color: currentcolor; } - &:not(:disabled):not([readonly]) { + &:not(:disabled, [readonly]) { &:hover { border-color: var(--ui-gray); } diff --git a/addons/rose/app/styles/rose/components/form/_label.scss b/addons/rose/app/styles/rose/components/form/_label.scss index d473e43cc..6109a26a3 100644 --- a/addons/rose/app/styles/rose/components/form/_label.scss +++ b/addons/rose/app/styles/rose/components/form/_label.scss @@ -3,6 +3,7 @@ .rose-form-label { @include type.type(s, semibold); + display: block; margin-bottom: sizing.rems(xxs); diff --git a/addons/rose/app/styles/rose/components/form/_radio-card.scss b/addons/rose/app/styles/rose/components/form/_radio-card.scss index 26a8bc77d..0c61fb51d 100644 --- a/addons/rose/app/styles/rose/components/form/_radio-card.scss +++ b/addons/rose/app/styles/rose/components/form/_radio-card.scss @@ -2,11 +2,11 @@ @use '../../utilities/type'; @use '../../variables/typography'; -$size-xxl: sizing.rems(xxl); //48 -$size-xl: sizing.rems(xl); //36 +$size-xxl: sizing.rems(xxl); // 48 +$size-xl: sizing.rems(xl); // 36 $size-l: sizing.rems(l); // 24 $size-m: sizing.rems(m); // 16 -$size-s: sizing.rems(s); //12 +$size-s: sizing.rems(s); // 12 $size-xs: sizing.rems(xs); // 8 $size-xxs: sizing.rems(xxs); // 4 $size-xxxs: sizing.rems(xxxs); // 2 @@ -32,9 +32,9 @@ $radio-svg: ( ); .rose-form-radio-card { - $cardWideWidth: $size-m * 10; - $cardTileWidth: $size-m * 7.25; - $borderWidth: $size-xxxs * 2; + $card-wide-width: $size-m * 10; + $card-tile-width: $size-m * 7.25; + $border-width: $size-xxxs * 2; &.wide { width: ($size-m) * 20; @@ -45,18 +45,22 @@ $radio-svg: ( .rose-icon { --size: #{$size-xl}; + padding: $size-xxxs; } + .rose-form-radio-label { display: flex; flex-direction: column; align-items: center; height: $size-m * 9; + &::after { - left: $cardTileWidth - $borderWidth; + left: $card-tile-width - $border-width; } } } + position: relative; display: inline-flex; align-items: center; @@ -73,8 +77,10 @@ $radio-svg: ( border-bottom-left-radius: $size-xxxs; border-bottom-right-radius: $size-xxxs; } + .rose-form-radio-label { @include type.type(s, bold); + width: ($size-m) * 23; height: 100%; display: block; @@ -86,15 +92,17 @@ $radio-svg: ( border-radius: $size-xxs; padding: $size-s $size-m ($size-xl + $size-m); box-sizing: border-box; + .rose-form-helper-text { @include type.type(xs, normal); + padding-top: $size-xs; } &::after { position: absolute; bottom: $size-xxs + $size-xxxxs; - right: $cardWideWidth - $borderWidth; + right: $card-wide-width - $border-width; display: block; width: $size-m; height: $size-m; @@ -105,6 +113,7 @@ $radio-svg: ( background-image: url($data-svg-prefix + map-get($radio-svg, 'default')); } } + .rose-form-radio-field { position: absolute; z-index: 1; @@ -122,11 +131,13 @@ $radio-svg: ( } } } + &:hover { ~ .rose-form-radio-label { border: $size-xxxxs solid var(--ui-gray); } } + &:checked { ~ .rose-form-radio-label { &::after { @@ -135,18 +146,22 @@ $radio-svg: ( 'checked' )); } + .radio-card-overlay { background-color: var(--action-subtler-1h); + .ember-application.rose-theme-light & { background-color: var(--action-subtler-1h); } @media (prefers-color-scheme: dark) { background-color: var(--action-subtler-1); } + .ember-application.rose-theme-dark & { background-color: var(--action-subtler-1); } } + border: $size-xxxxs solid var(--info-subtler-1); } } @@ -157,6 +172,7 @@ $radio-svg: ( border: $size-xxxxs solid var(--ui-border-subtler-1); background-color: var(--ui-gray-subtler-6); color: var(--ui-gray-starker-1); + &::after { background-image: url($data-svg-prefix + map-get( $radio-svg, @@ -180,8 +196,28 @@ $radio-svg: ( &.error { .rose-form-radio-field { - &:not(:disabled):not(:focus) { - &:not(:disabled):not(:focus) { + &:not(:disabled, :focus) { + ~ .rose-form-radio-label { + color: var(--ui-gray); + border: $size-xxxxs solid var(--failure); + + .radio-card-overlay { + background-color: var(--failure-subtler-2); + } + + .rose-form-helper-text.error { + color: var(--ui-gray); + } + + &::after { + background-image: url($data-svg-prefix + map-get( + $radio-svg, + 'error' + )); + } + } + + &:checked { ~ .rose-form-radio-label { color: var(--ui-gray); border: $size-xxxxs solid var(--failure); @@ -189,32 +225,14 @@ $radio-svg: ( .radio-card-overlay { background-color: var(--failure-subtler-2); } - .rose-form-helper-text.error { - color: var(--ui-gray); - } + &::after { background-image: url($data-svg-prefix + map-get( $radio-svg, - 'error' + 'error-checked' )); } } - - &:checked { - ~ .rose-form-radio-label { - color: var(--ui-gray); - border: $size-xxxxs solid var(--failure); - .radio-card-overlay { - background-color: var(--failure-subtler-2); - } - &::after { - background-image: url($data-svg-prefix + map-get( - $radio-svg, - 'error-checked' - )); - } - } - } } } } diff --git a/addons/rose/app/styles/rose/components/form/_radio.scss b/addons/rose/app/styles/rose/components/form/_radio.scss index 32be9a8c5..007510982 100644 --- a/addons/rose/app/styles/rose/components/form/_radio.scss +++ b/addons/rose/app/styles/rose/components/form/_radio.scss @@ -20,16 +20,18 @@ $radio-svg: ( 'error-checked': "", ); - $data-svg-prefix: 'data:image/svg+xml;utf-8,'; + .rose-form-radio { &.inline { display: inline-block; + .rose-form-radio-label { margin-right: sizing.rems(s); } } @include type.type(m); + position: relative; margin-bottom: sizing.rems(xs); color: var(--ui-gray); @@ -37,6 +39,7 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,'; .rose-form-radio-label { display: flex; align-items: center; + .rose-form-helper-text { font-weight: normal; margin-left: sizing.rems(xxs); @@ -44,7 +47,8 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,'; } @include type.type(s, semibold); - color: currentColor; + + color: currentcolor; padding-left: sizing.rems(l); padding-top: sizing.rems(xxxs); @@ -149,7 +153,7 @@ $data-svg-prefix: 'data:image/svg+xml;utf-8,'; color: var(--failure); .rose-form-radio-field { - &:not(:disabled):not(:focus) { + &:not(:disabled, :focus) { ~ .rose-form-radio-label { &::after { background-image: url($data-svg-prefix + map-get( diff --git a/addons/rose/app/styles/rose/components/form/_select.scss b/addons/rose/app/styles/rose/components/form/_select.scss index 4e1902da0..c86845ab1 100644 --- a/addons/rose/app/styles/rose/components/form/_select.scss +++ b/addons/rose/app/styles/rose/components/form/_select.scss @@ -7,8 +7,7 @@ .rose-form-select-field { @include type.type(m); - -webkit-appearance: none; - -moz-appearance: none; + appearance: none; vertical-align: middle; display: inline-block; @@ -27,7 +26,13 @@ &.error { color: var(--failure); - border-color: currentColor; + border-color: currentcolor; + } + + &:disabled { + cursor: not-allowed; + color: var(--ui-gray-subtler-1); + background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%205.83L15.17%209l1.41-1.41L12%203%207.41%207.59%208.83%209%2012%205.83zm0%2012.34L8.83%2015l-1.41%201.41L12%2021l4.59-4.59L15.17%2015%2012%2018.17z%22%20fill%3D%22%238E96A3%22%2F%3E%3C%2Fsvg%3E'); } &:not(:disabled) { @@ -43,10 +48,4 @@ box-shadow: none; } } - - &:disabled { - cursor: not-allowed; - color: var(--ui-gray-subtler-1); - background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%205.83L15.17%209l1.41-1.41L12%203%207.41%207.59%208.83%209%2012%205.83zm0%2012.34L8.83%2015l-1.41%201.41L12%2021l4.59-4.59L15.17%2015%2012%2018.17z%22%20fill%3D%22%238E96A3%22%2F%3E%3C%2Fsvg%3E'); - } } diff --git a/addons/rose/app/styles/rose/components/form/errors/_message.scss b/addons/rose/app/styles/rose/components/form/errors/_message.scss index 09bf0b317..95f65f1d6 100644 --- a/addons/rose/app/styles/rose/components/form/errors/_message.scss +++ b/addons/rose/app/styles/rose/components/form/errors/_message.scss @@ -3,6 +3,7 @@ .rose-form-error-message { @include type.type(xs); + color: var(--failure); margin-bottom: sizing.rems(xs); } diff --git a/addons/rose/app/styles/rose/components/header/_brand.scss b/addons/rose/app/styles/rose/components/header/_brand.scss index 48de3e6b7..985d656c4 100644 --- a/addons/rose/app/styles/rose/components/header/_brand.scss +++ b/addons/rose/app/styles/rose/components/header/_brand.scss @@ -11,13 +11,12 @@ margin: 10px; svg { - //$logoSize: sizing.rems(xl) * 3; display: block; - //width: $logoSize; } .rose-header-brand-text { @include type.type(m, normal); + margin: 0; margin-left: sizing.rems(s); white-space: nowrap; diff --git a/addons/rose/app/styles/rose/components/header/_dropdown.scss b/addons/rose/app/styles/rose/components/header/_dropdown.scss index fb92cd6fa..8e60bb505 100644 --- a/addons/rose/app/styles/rose/components/header/_dropdown.scss +++ b/addons/rose/app/styles/rose/components/header/_dropdown.scss @@ -12,21 +12,18 @@ $chevron: "data:image/svg+xml;utf-8, svg { vertical-align: top; diff --git a/addons/rose/app/styles/rose/components/header/_index.scss b/addons/rose/app/styles/rose/components/header/_index.scss index d9c969c60..aa146a9d1 100644 --- a/addons/rose/app/styles/rose/components/header/_index.scss +++ b/addons/rose/app/styles/rose/components/header/_index.scss @@ -11,7 +11,6 @@ .rose-header { --box-shadow-light: none; --box-shadow-dark: inset 0 -#{sizing.rems(xxxxs)} 0 var(--ui-border-subtler-1); - --box-shadow: var(--box-shadow-light); .ember-application.rose-theme-light & { diff --git a/addons/rose/app/styles/rose/components/header/_link.scss b/addons/rose/app/styles/rose/components/header/_link.scss index 6a6bb0da9..460e80d3a 100644 --- a/addons/rose/app/styles/rose/components/header/_link.scss +++ b/addons/rose/app/styles/rose/components/header/_link.scss @@ -6,10 +6,10 @@ @include type.type(s, semibold); // target line height is 16, which is not a standard line height - $lineHeight: math.div(16, 14); - line-height: $lineHeight; - text-decoration: none; + $line-height: math.div(16, 14); + line-height: $line-height; + text-decoration: none; color: var(--white); opacity: 0.75; diff --git a/addons/rose/app/styles/rose/components/layout/_sidebar.scss b/addons/rose/app/styles/rose/components/layout/_sidebar.scss index 5a4ca2ff7..d82255a6b 100644 --- a/addons/rose/app/styles/rose/components/layout/_sidebar.scss +++ b/addons/rose/app/styles/rose/components/layout/_sidebar.scss @@ -3,6 +3,7 @@ .rose-layout-sidebar { --sidebar-width: #{sizing.rems(m) * 16}; + flex-grow: 1; display: grid; grid-template-columns: repeat(auto-fit, var(--sidebar-width)) repeat( @@ -19,6 +20,7 @@ background-color: #{color(ui-gray, 950)}; border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1); } + .rose-layout-sidebar-body { grid-area: content; } diff --git a/addons/rose/app/styles/rose/components/list/_key-value.scss b/addons/rose/app/styles/rose/components/list/_key-value.scss index 1ceb5f75d..144686677 100644 --- a/addons/rose/app/styles/rose/components/list/_key-value.scss +++ b/addons/rose/app/styles/rose/components/list/_key-value.scss @@ -11,8 +11,10 @@ display: flex; border-bottom: 1px solid var(--ui-gray-subtler-3); @include type.type(s); - $lineHeight: math.div(36, 14); - line-height: $lineHeight; + + $line-height: math.div(36, 14); + + line-height: $line-height; padding: math.div(sizing.rems(s), 2) 0; .rose-list-key-value-item-cell { diff --git a/addons/rose/app/styles/rose/components/nav/_breadcrumbs.scss b/addons/rose/app/styles/rose/components/nav/_breadcrumbs.scss index f87fb9ae7..3b762f19f 100644 --- a/addons/rose/app/styles/rose/components/nav/_breadcrumbs.scss +++ b/addons/rose/app/styles/rose/components/nav/_breadcrumbs.scss @@ -3,16 +3,23 @@ .rose-nav-breadcrumbs { @include type.type(s, normal); + display: flex; flex-wrap: wrap; .rose-nav-link { --color: var(--ui-gray); + color: var(--color); text-decoration: none; cursor: pointer; display: inline-flex; + &::after { + content: '\002F'; // "/" + margin: 0 sizing.rems(xs); + } + &:hover { --color: var(--action); @@ -21,11 +28,6 @@ } } - &::after { - content: '\002F'; // "/" - margin: 0 sizing.rems(xs); - } - &:last-child::after { content: ''; } diff --git a/addons/rose/app/styles/rose/components/nav/_sidebar.scss b/addons/rose/app/styles/rose/components/nav/_sidebar.scss index 08e76b9be..4a827ba1c 100644 --- a/addons/rose/app/styles/rose/components/nav/_sidebar.scss +++ b/addons/rose/app/styles/rose/components/nav/_sidebar.scss @@ -3,11 +3,11 @@ @use 'sass:math'; .rose-nav-sidebar { - $threePX: sizing.rems(xxxs) + sizing.rems(xxxxs); - $yPadding: sizing.rems(xs); + $three-px: sizing.rems(xxxs) + sizing.rems(xxxxs); + $y-padding: sizing.rems(xs); - padding-top: $yPadding; - padding-bottom: $yPadding; + padding-top: $y-padding; + padding-bottom: $y-padding; border-bottom: sizing.rems(xxxxs) solid #{color(ui-gray, 700)}; &:last-child { @@ -17,32 +17,37 @@ // TODO revisit the title .rose-nav-title { @include type.type(xs, semibold); + display: none; color: #{color(ui-gray, 400)}; text-transform: uppercase; - $lineHeight: math.div(20, 12); - line-height: $lineHeight; + + $line-height: math.div(20, 12); + + line-height: $line-height; padding: 0 sizing.rems(m); - margin-bottom: $threePX; + margin-bottom: $three-px; border-bottom: sizing.rems(xxxxs) solid #{color(ui-gray, 700)}; } .rose-nav-link { @include type.type(s); + display: block; color: var(--white); - $lineHeight: math.div(36, 14); - line-height: $lineHeight; + + $line-height: math.div(36, 14); + + line-height: $line-height; text-decoration: none; padding: 0 sizing.rems(m); - border-right: $threePX solid transparent; + border-right: $three-px solid transparent; .rose-icon { opacity: 0.65; } &:hover { - //text-decoration: underline; color: var(--white); background-color: #{color(ui-gray, 800)}; } diff --git a/addons/rose/app/styles/rose/components/nav/_tabs.scss b/addons/rose/app/styles/rose/components/nav/_tabs.scss index 19f112bd1..68b3359ac 100644 --- a/addons/rose/app/styles/rose/components/nav/_tabs.scss +++ b/addons/rose/app/styles/rose/components/nav/_tabs.scss @@ -13,6 +13,7 @@ --box-shadow-color: transparent; @include type.type(s, semibold); + display: inline-block; color: var(--color); background-color: var(--background); @@ -28,7 +29,7 @@ &:active, &.active { --color: var(--action); - --box-shadow-color: currentColor; + --box-shadow-color: currentcolor; &:hover { --color: var(--action-starker-1); diff --git a/addons/rose/app/styles/rose/components/page-header/_title.scss b/addons/rose/app/styles/rose/components/page-header/_title.scss index 32fdb890d..5dfcd2225 100644 --- a/addons/rose/app/styles/rose/components/page-header/_title.scss +++ b/addons/rose/app/styles/rose/components/page-header/_title.scss @@ -15,16 +15,15 @@ svg { width: sizing.rems(l); - width: sizing.rems(l); } } .rose-header-dropdown { .rose-header-dropdown-trigger-text { @include typography.type(h1, bold); + margin-top: sizing.rems(xs); margin-bottom: sizing.rems(xs); - margin-right: sizing.rems(xs); } diff --git a/addons/rose/app/styles/rose/components/table/_table.scss b/addons/rose/app/styles/rose/components/table/_table.scss index 9e49c0db2..40e5ae838 100644 --- a/addons/rose/app/styles/rose/components/table/_table.scss +++ b/addons/rose/app/styles/rose/components/table/_table.scss @@ -4,6 +4,7 @@ .rose-table { @include type.type(s, normal); + width: 100%; .rose-table-row { @@ -36,6 +37,7 @@ &.align-right { text-align: right; } + &.align-center { text-align: center; } @@ -77,20 +79,26 @@ .rose-table-cell, .rose-table-header-cell { @include type.type(s); - $lineHeight: math.div(36, 14); - line-height: $lineHeight; + + $line-height: math.div(36, 14); + + line-height: $line-height; padding: sizing.rems(xxs) + sizing.rems(xxxxs) sizing.rems(s); &:first-child { padding-left: 0; } } + .rose-table-header { border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3); + .rose-table-header-cell { - $lineHeight: math.div(16, 14); - line-height: $lineHeight; + $line-height: math.div(16, 14); + + line-height: $line-height; padding: sizing.rems(xs) sizing.rems(s); + &:first-child { padding-left: 0; } diff --git a/addons/rose/app/styles/rose/components/toolbar/_info.scss b/addons/rose/app/styles/rose/components/toolbar/_info.scss index 7565bdd86..3d9c5de54 100644 --- a/addons/rose/app/styles/rose/components/toolbar/_info.scss +++ b/addons/rose/app/styles/rose/components/toolbar/_info.scss @@ -5,13 +5,16 @@ .rose-toolbar { .rose-toolbar-info { @include type.type(button); + color: var(--ui-gray); position: relative; display: inline-block; vertical-align: middle; white-space: nowrap; overflow: hidden; - $yPadding: sizing.rems(xxs) + sizing.rems(xxxs); - padding: $yPadding sizing.rems(m) $yPadding sizing.rems(l); + + $y-padding: sizing.rems(xxs) + sizing.rems(xxxs); + + padding: $y-padding sizing.rems(m) $y-padding sizing.rems(l); } } diff --git a/addons/rose/app/styles/rose/components/toolbar/_toolbar.scss b/addons/rose/app/styles/rose/components/toolbar/_toolbar.scss index 20a2424e6..fc75cd1fc 100644 --- a/addons/rose/app/styles/rose/components/toolbar/_toolbar.scss +++ b/addons/rose/app/styles/rose/components/toolbar/_toolbar.scss @@ -29,10 +29,13 @@ $xxxxs: sizing.rems(xxxxs); // 1 .rose-button-inline-link-action { @include type.type(button, semibold); + color: var(--stark); display: inline-block; vertical-align: middle; - $yPadding: sizing.rems(xxs) + sizing.rems(xxxs); - padding: $yPadding sizing.rems(m); + + $y-padding: sizing.rems(xxs) + sizing.rems(xxxs); + + padding: $y-padding sizing.rems(m); } } diff --git a/addons/rose/app/styles/rose/utilities/_button.scss b/addons/rose/app/styles/rose/utilities/_button.scss index f708bee45..73657d155 100644 --- a/addons/rose/app/styles/rose/utilities/_button.scss +++ b/addons/rose/app/styles/rose/utilities/_button.scss @@ -4,6 +4,7 @@ @mixin button { @include typography.type(button, semibold); + display: inline-block; margin-bottom: sizing.rems(l); margin-right: sizing.rems(xs); @@ -30,6 +31,7 @@ &.has-icon-only { padding-right: sizing.rems(s); padding-left: sizing.rems(s); + .rose-button-body { position: absolute; top: -1000px; @@ -44,6 +46,7 @@ @mixin button-style($name, $default, $hover: &, $active: &, $disabled: &) { .rose-button-#{$name} { @include button; + border-color: map.get($default, border-color); color: map.get($default, color); background-color: map.get($default, background-color); diff --git a/addons/rose/app/styles/rose/variables/_typography.scss b/addons/rose/app/styles/rose/variables/_typography.scss index 5ed66a097..525ba99df 100644 --- a/addons/rose/app/styles/rose/variables/_typography.scss +++ b/addons/rose/app/styles/rose/variables/_typography.scss @@ -6,11 +6,10 @@ * SASS variables defining typography. */ -$family-primary: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', +$family-primary: system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - -$family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, +$family-monospace: 'SFMono-Regular', consolas, 'Liberation Mono', menlo, courier, monospace; // Available font weights by name diff --git a/addons/rose/app/styles/rose/variables/color/_css.scss b/addons/rose/app/styles/rose/variables/color/_css.scss index ccafb6886..c8937dbb7 100644 --- a/addons/rose/app/styles/rose/variables/color/_css.scss +++ b/addons/rose/app/styles/rose/variables/color/_css.scss @@ -1,3 +1,5 @@ +@use "sass:color"; + /** * CSS custom properties defining colors. These are the color variables that * should be consumed throughout these stylesheets (rather than SCSS vars). @@ -34,36 +36,29 @@ --info: #{color(blue)}; --info-starker-1: #{color(blue, 700)}; --info-starker-2: #{color(blue, 800)}; - --alert-subtler-2: #{color(orange, 010)}; --alert-subtler-1: #{color(orange, 100)}; --alert: #{color(orange)}; --alert-starker-1: #{color(orange, 800)}; - --warning-subtler-2: #{color(yellow, 010)}; --warning-subtler-1: #{color(yellow, 100)}; --warning: #{color(yellow)}; --warning-starker-1: #{color(yellow, 800)}; - --failure-subtler-2: #{color(red, 010)}; --failure-subtler-1: #{color(red, 100)}; --failure: #{color(red)}; --failure-starker-1: #{color(red, 800)}; - --success-subtler-2: #{color(green, 010)}; --success-subtler-1: #{color(green, 100)}; --success: #{color(green)}; --success-starker-1: #{color(green, 800)}; - --action-subtler-2: #{color(blue, 010)}; --action-subtler-1h: #{color(blue, 050)}; --action-subtler-1: #{color(blue, 100)}; --action: #{color(blue)}; --action-starker-1: #{color(blue, 700)}; - --ui-border-subtler-1: #{color(ui-gray, 200)}; --ui-border: #{color(ui-gray, 300)}; - --ui-gray-subtler-6: #{color(ui-gray, 010)}; --ui-gray-subtler-5: #{color(ui-gray, 050)}; --ui-gray-subtler-4: #{color(ui-gray, 100)}; @@ -75,7 +70,6 @@ --ui-gray-starker-2: #{color(ui-gray, 700)}; --ui-gray-starker-3: #{color(ui-gray, 800)}; --ui-gray-starker-4: #{color(ui-gray, 900)}; - --ui-header-subtler: #{color(ui-cool-gray, 700)}; } @@ -93,36 +87,29 @@ --info: #{color(blue)}; --info-starker-1: #{color(blue, 300)}; --info-starker-2: #{color(blue, 200)}; - --alert-subtler-2: #{color(orange, 900)}; --alert-subtler-1: #{color(orange, 800)}; --alert: #{color(orange)}; --alert-starker-1: #{color(orange, 200)}; - --warning-subtler-2: #{color(yellow, 900)}; --warning-subtler-1: #{color(yellow, 800)}; --warning: #{color(yellow)}; --warning-starker-1: #{color(yellow, 200)}; - --failure-subtler-2: #{color(red, 900)}; --failure-subtler-1: #{color(red, 800)}; --failure: #{color(red, 300)}; --failure-starker-1: #{color(red, 200)}; - --success-subtler-2: #{color(green, 900)}; --success-subtler-1: #{color(green, 800)}; --success: #{color(green, 700)}; --success-starker-1: #{color(green, 400)}; - - --action-subtler-2: #{darken(color(blue, 900), 10%)}; - --action-subtler-1h: #{darken(color(blue, 900), 5%)}; + --action-subtler-2: #{color.adjust(color(blue, 900), $lightness: -10%)}; + --action-subtler-1h: #{color.adjust(color(blue, 900), $lightness: -5%)}; --action-subtler-1: #{color(blue, 800)}; --action: #{color(blue, 400)}; --action-starker-1: #{color(blue, 200)}; - --ui-border-subtler-1: #{color(ui-gray, 800)}; --ui-border: #{color(ui-gray, 700)}; - --ui-gray-subtler-6: #{color(ui-gray, 950)}; --ui-gray-subtler-5: #{color(ui-gray, 900)}; --ui-gray-subtler-4: #{color(ui-gray, 800)}; @@ -134,7 +121,6 @@ --ui-gray-starker-2: #{color(ui-gray, 100)}; --ui-gray-starker-3: #{color(ui-gray, 050)}; --ui-gray-starker-4: #{color(ui-gray, 010)}; - --ui-header-subtler: #{color(ui-cool-gray, 100)}; color-scheme: dark; diff --git a/addons/rose/app/styles/rose/variables/color/_sass.scss b/addons/rose/app/styles/rose/variables/color/_sass.scss index c92827357..6cabb3f7b 100644 --- a/addons/rose/app/styles/rose/variables/color/_sass.scss +++ b/addons/rose/app/styles/rose/variables/color/_sass.scss @@ -11,7 +11,7 @@ $colors: ( ui-cool-gray: #7c8797, ui-gray: #6f7682, purple: #5c4ee5, - cyan: #00bbff, + cyan: #0bf, teal: #25ba81, green: #2eb039, yellow: #fac402, @@ -21,7 +21,6 @@ $colors: ( black: rgb(0, 0, 0), white: rgb(255, 255, 255), ) !default; - $color-values: ( white: ( 500: map.get($colors, white), diff --git a/addons/rose/package.json b/addons/rose/package.json index 1e7ecfb50..ed3ef239c 100644 --- a/addons/rose/package.json +++ b/addons/rose/package.json @@ -16,7 +16,8 @@ "lint:hbs:fix": "ember-template-lint . --fix", "lint:js": "eslint .", "lint:js:fix": "eslint . --fix", - "lint:sass": "echo 'Rose SASS linting is disabled. Please install stylelint.'", + "lint:sass": "stylelint 'app/styles/**/*.scss'", + "lint:sass:fix": "stylelint 'app/styles/**/*.scss' --fix", "format": "npm-run-all format:*", "format:hbs": "prettier --write '{addon,tests}/**/*.hbs'", "format:js": "prettier --write '{addon,app,config,stories,tests}/**/*.js' *.js", @@ -97,12 +98,16 @@ "jest": "^27.4.7", "loader.js": "^4.7.0", "npm-run-all": "^4.1.5", + "postcss": "^8.4.18", "prettier": "^2.7.1", "qunit": "^2.17.2", "qunit-dom": "^2.0.0", "react": "^16", "react-dom": "^16", "react-syntax-highlighter": "^15.5.0", + "stylelint": "^14.14.0", + "stylelint-config-prettier-scss": "^0.0.1", + "stylelint-config-standard-scss": "^6.0.0", "webpack": "^5.59.1" }, "engines": { @@ -117,6 +122,7 @@ "lint-staged": { "*.js": "eslint --fix", "*.hbs": "ember-template-lint --fix", + "*.scss": "stylelint --fix", "*.{js,scss,mdx,yaml}": "prettier --write" } } diff --git a/yarn.lock b/yarn.lock index eb1118868..d2d680380 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3444,6 +3444,11 @@ dependencies: chalk "^4.0.0" +"@csstools/selector-specificity@^2.0.2": + version "2.0.2" + resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36" + integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg== + "@discoveryjs/json-ext@^0.5.3": version "0.5.5" resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.5.tgz#9283c9ce5b289a3c4f61c12757469e59377f81f3" @@ -10453,6 +10458,11 @@ color-support@^1.1.2, color-support@^1.1.3: resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2" integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg== +colord@^2.9.3: + version "2.9.3" + resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43" + integrity sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw== + colorette@^1.2.1: version "1.3.0" resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.3.0.tgz#ff45d2f0edb244069d3b772adeb04fed38d0a0af" @@ -10869,6 +10879,17 @@ cosmiconfig@^7.0.0: path-type "^4.0.0" yaml "^1.10.0" +cosmiconfig@^7.0.1: + version "7.0.1" + resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d" + integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ== + dependencies: + "@types/parse-json" "^4.0.0" + import-fresh "^3.2.1" + parse-json "^5.0.0" + path-type "^4.0.0" + yaml "^1.10.0" + cp-file@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/cp-file/-/cp-file-7.0.0.tgz#b9454cfd07fe3b974ab9ea0e5f29655791a9b8cd" @@ -11017,6 +11038,11 @@ crypto-random-string@^2.0.0: resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5" integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA== +css-functions-list@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.1.0.tgz#cf5b09f835ad91a00e5959bcfc627cd498e1321b" + integrity sha512-/9lCvYZaUbBGvYUgYGFJ4dcYiyqdhSjG7IPVluoV8A1ILjkF7ilmhp1OGUz8n+nmBcu0RNrQAzgD8B6FJbrt2w== + css-loader@^3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.6.0.tgz#2e4b2c7e6e2d27f8c8f28f61bffcd2e6c91ef645" @@ -14344,6 +14370,17 @@ fast-glob@^3.2.11, fast-glob@^3.2.7: merge2 "^1.3.0" micromatch "^4.0.4" +fast-glob@^3.2.12, fast-glob@^3.2.9: + version "3.2.12" + resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80" + integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w== + dependencies: + "@nodelib/fs.stat" "^2.0.2" + "@nodelib/fs.walk" "^1.2.3" + glob-parent "^5.1.2" + merge2 "^1.3.0" + micromatch "^4.0.4" + fast-json-stable-stringify@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633" @@ -14399,6 +14436,11 @@ fastest-levenshtein@^1.0.12: resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz#9990f7d3a88cc5a9ffd1f1745745251700d497e2" integrity sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow== +fastest-levenshtein@^1.0.16: + version "1.0.16" + resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5" + integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg== + fastq@^1.6.0: version "1.11.1" resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.11.1.tgz#5d8175aae17db61947f8b162cfc7f63264d22807" @@ -15604,6 +15646,18 @@ globby@^11.0.2, globby@^11.0.3: merge2 "^1.3.0" slash "^3.0.0" +globby@^11.1.0: + version "11.1.0" + resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b" + integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g== + dependencies: + array-union "^2.1.0" + dir-glob "^3.0.1" + fast-glob "^3.2.9" + ignore "^5.2.0" + merge2 "^1.4.1" + slash "^3.0.0" + globby@^13.1.2: version "13.1.2" resolved "https://registry.yarnpkg.com/globby/-/globby-13.1.2.tgz#29047105582427ab6eca4f905200667b056da515" @@ -16085,6 +16139,11 @@ html-tags@^3.1.0: resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140" integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg== +html-tags@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.2.0.tgz#dbb3518d20b726524e4dd43de397eb0a95726961" + integrity sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg== + html-void-elements@^1.0.0: version "1.0.5" resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-1.0.5.tgz#ce9159494e86d95e45795b166c2021c2cfca4483" @@ -17046,6 +17105,11 @@ is-plain-object@^2.0.4: dependencies: isobject "^3.0.1" +is-plain-object@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344" + integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q== + is-potential-custom-element-name@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5" @@ -18217,6 +18281,11 @@ known-css-properties@^0.21.0: resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.21.0.tgz#15fbd0bbb83447f3ce09d8af247ed47c68ede80d" integrity sha512-sZLUnTqimCkvkgRS+kbPlYW5o8q5w1cu+uIisKpEWkj31I8mx8kNG162DwRav8Zirkva6N5uoFsm9kzK4mUXjw== +known-css-properties@^0.25.0: + version "0.25.0" + resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.25.0.tgz#6ebc4d4b412f602e5cfbeb4086bd544e34c0a776" + integrity sha512-b0/9J1O9Jcyik1GC6KC42hJ41jKwdO/Mq8Mdo5sYN+IuRTXs2YFHZC3kZSx6ueusqa95x3wLYe/ytKjbAfGixA== + known-css-properties@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.3.0.tgz#a3d135bbfc60ee8c6eacf2f7e7e6f2d4755e49a4" @@ -21812,6 +21881,11 @@ postcss-safe-parser@^4.0.2: dependencies: postcss "^7.0.26" +postcss-safe-parser@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz#bb4c29894171a94bc5c996b9a30317ef402adaa1" + integrity sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ== + postcss-sass@^0.4.4: version "0.4.4" resolved "https://registry.yarnpkg.com/postcss-sass/-/postcss-sass-0.4.4.tgz#91f0f3447b45ce373227a98b61f8d8f0785285a3" @@ -21827,6 +21901,11 @@ postcss-scss@^2.1.1: dependencies: postcss "^7.0.6" +postcss-scss@^4.0.2: + version "4.0.5" + resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-4.0.5.tgz#8ee33c1dda8d9d4753b565ec79014803dc6edabf" + integrity sha512-F7xpB6TrXyqUh3GKdyB4Gkp3QL3DDW1+uI+gxx/oJnUt/qXI4trj5OGlp9rOKdoABGULuqtqeG+3HEVQk4DjmA== + postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.5: version "6.0.6" resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz#2c5bba8174ac2f6981ab631a42ab0ee54af332ea" @@ -21835,7 +21914,7 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2, postcss-selector cssesc "^3.0.0" util-deprecate "^1.0.2" -postcss-selector-parser@^6.0.4: +postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.6: version "6.0.10" resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d" integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w== @@ -21861,6 +21940,11 @@ postcss-value-parser@^4.1.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb" integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ== +postcss-value-parser@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" + integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== + postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.31, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6: version "7.0.36" resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.36.tgz#056f8cffa939662a8f5905950c07d5285644dfcb" @@ -21879,6 +21963,15 @@ postcss@^8.2.15: picocolors "^1.0.0" source-map-js "^1.0.2" +postcss@^8.4.17, postcss@^8.4.18: + version "8.4.18" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.18.tgz#6d50046ea7d3d66a85e0e782074e7203bc7fbca2" + integrity sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA== + dependencies: + nanoid "^3.3.4" + picocolors "^1.0.0" + source-map-js "^1.0.2" + prelude-ls@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" @@ -24912,11 +25005,32 @@ styled_string@0.0.1: resolved "https://registry.yarnpkg.com/styled_string/-/styled_string-0.0.1.tgz#d22782bd81295459bc4f1df18c4bad8e94dd124a" integrity sha1-0ieCvYEpVFm8Tx3xjEutjpTdEko= -stylelint-config-prettier@^9.0.3: +stylelint-config-prettier-scss@^0.0.1: + version "0.0.1" + resolved "https://registry.yarnpkg.com/stylelint-config-prettier-scss/-/stylelint-config-prettier-scss-0.0.1.tgz#22feaa28c6ca07e74be34c8506219fa4e2c34886" + integrity sha512-lBAYG9xYOh2LeWEPC/64xeUxwOTnQ8nDyBijQoWoJb10/bMGrUwnokpt8jegGck2Vbtxh6XGwH63z5qBcVHreQ== + dependencies: + stylelint-config-prettier ">=9.0.3" + +stylelint-config-prettier@>=9.0.3, stylelint-config-prettier@^9.0.3: version "9.0.3" resolved "https://registry.yarnpkg.com/stylelint-config-prettier/-/stylelint-config-prettier-9.0.3.tgz#0dccebeff359dcc393c9229184408b08964d561c" integrity sha512-5n9gUDp/n5tTMCq1GLqSpA30w2sqWITSSEiAWQlpxkKGAUbjcemQ0nbkRvRUa0B1LgD3+hCvdL7B1eTxy1QHJg== +stylelint-config-recommended-scss@^8.0.0: + version "8.0.0" + resolved "https://registry.yarnpkg.com/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-8.0.0.tgz#1c1e93e619fe2275d4c1067928d92e0614f7d64f" + integrity sha512-BxjxEzRaZoQb7Iinc3p92GS6zRdRAkIuEu2ZFLTxJK2e1AIcCb5B5MXY9KOXdGTnYFZ+KKx6R4Fv9zU6CtMYPQ== + dependencies: + postcss-scss "^4.0.2" + stylelint-config-recommended "^9.0.0" + stylelint-scss "^4.0.0" + +stylelint-config-recommended@^9.0.0: + version "9.0.0" + resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-9.0.0.tgz#1c9e07536a8cd875405f8ecef7314916d94e7e40" + integrity sha512-9YQSrJq4NvvRuTbzDsWX3rrFOzOlYBmZP+o513BJN/yfEmGSr0AxdvrWs0P/ilSpVV/wisamAHu5XSk8Rcf4CQ== + stylelint-config-sass-guidelines@^8.0.0: version "8.0.0" resolved "https://registry.yarnpkg.com/stylelint-config-sass-guidelines/-/stylelint-config-sass-guidelines-8.0.0.tgz#e92279aa052a04e822dd096d7c46c8e37d4b3406" @@ -24925,6 +25039,21 @@ stylelint-config-sass-guidelines@^8.0.0: stylelint-order "^4.0.0" stylelint-scss "^3.18.0" +stylelint-config-standard-scss@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/stylelint-config-standard-scss/-/stylelint-config-standard-scss-6.0.0.tgz#9d451fdfd6caf1d914510a236457ec27e6675deb" + integrity sha512-aAWcQgiqsXg6Jyhq/Q/HPbVB7PHf4v/wdyFSDun/qlL/SPxtEcVeGMvJLzRVRaNf3tp3D93QP6N9QKwJa1L0Kw== + dependencies: + stylelint-config-recommended-scss "^8.0.0" + stylelint-config-standard "^29.0.0" + +stylelint-config-standard@^29.0.0: + version "29.0.0" + resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-29.0.0.tgz#4cc0e0f05512a39bb8b8e97853247d3a95d66fa2" + integrity sha512-uy8tZLbfq6ZrXy4JKu3W+7lYLgRQBxYTUUB88vPgQ+ZzAxdrvcaSUW9hOMNLYBnwH+9Kkj19M2DHdZ4gKwI7tg== + dependencies: + stylelint-config-recommended "^9.0.0" + stylelint-order@^4.0.0: version "4.1.0" resolved "https://registry.yarnpkg.com/stylelint-order/-/stylelint-order-4.1.0.tgz#692d05b7d0c235ac66fcf5ea1d9e5f08a76747f6" @@ -24945,6 +25074,17 @@ stylelint-scss@^3.18.0: postcss-selector-parser "^6.0.2" postcss-value-parser "^4.1.0" +stylelint-scss@^4.0.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/stylelint-scss/-/stylelint-scss-4.3.0.tgz#638800faf823db11fff60d537c81051fe74c90fa" + integrity sha512-GvSaKCA3tipzZHoz+nNO7S02ZqOsdBzMiCx9poSmLlb3tdJlGddEX/8QzCOD8O7GQan9bjsvLMsO5xiw6IhhIQ== + dependencies: + lodash "^4.17.21" + postcss-media-query-parser "^0.2.3" + postcss-resolve-nested-selector "^0.1.1" + postcss-selector-parser "^6.0.6" + postcss-value-parser "^4.1.0" + stylelint@^13.13.1: version "13.13.1" resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.13.1.tgz#fca9c9f5de7990ab26a00f167b8978f083a18f3c" @@ -24999,6 +25139,50 @@ stylelint@^13.13.1: v8-compile-cache "^2.3.0" write-file-atomic "^3.0.3" +stylelint@^14.14.0: + version "14.14.0" + resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.14.0.tgz#1acb52497c9a921f23f9c4014d4e0ee6eba768d0" + integrity sha512-yUI+4xXfPHVnueYddSQ/e1GuEA/2wVhWQbGj16AmWLtQJtn28lVxfS4b0CsWyVRPgd3Auzi0NXOthIEUhtQmmA== + dependencies: + "@csstools/selector-specificity" "^2.0.2" + balanced-match "^2.0.0" + colord "^2.9.3" + cosmiconfig "^7.0.1" + css-functions-list "^3.1.0" + debug "^4.3.4" + fast-glob "^3.2.12" + fastest-levenshtein "^1.0.16" + file-entry-cache "^6.0.1" + global-modules "^2.0.0" + globby "^11.1.0" + globjoin "^0.1.4" + html-tags "^3.2.0" + ignore "^5.2.0" + import-lazy "^4.0.0" + imurmurhash "^0.1.4" + is-plain-object "^5.0.0" + known-css-properties "^0.25.0" + mathml-tag-names "^2.1.3" + meow "^9.0.0" + micromatch "^4.0.5" + normalize-path "^3.0.0" + picocolors "^1.0.0" + postcss "^8.4.17" + postcss-media-query-parser "^0.2.3" + postcss-resolve-nested-selector "^0.1.1" + postcss-safe-parser "^6.0.0" + postcss-selector-parser "^6.0.10" + postcss-value-parser "^4.2.0" + resolve-from "^5.0.0" + string-width "^4.2.3" + strip-ansi "^6.0.1" + style-search "^0.1.0" + supports-hyperlinks "^2.3.0" + svg-tags "^1.0.0" + table "^6.8.0" + v8-compile-cache "^2.3.0" + write-file-atomic "^4.0.2" + sudo-prompt@^9.1.1: version "9.2.1" resolved "https://registry.yarnpkg.com/sudo-prompt/-/sudo-prompt-9.2.1.tgz#77efb84309c9ca489527a4e749f287e6bdd52afd" @@ -25066,6 +25250,14 @@ supports-hyperlinks@^2.0.0: has-flag "^4.0.0" supports-color "^7.0.0" +supports-hyperlinks@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz#3943544347c1ff90b15effb03fc14ae45ec10624" + integrity sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA== + dependencies: + has-flag "^4.0.0" + supports-color "^7.0.0" + supports-preserve-symlinks-flag@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" @@ -25172,6 +25364,17 @@ table@^6.0.9, table@^6.6.0: string-width "^4.2.0" strip-ansi "^6.0.0" +table@^6.8.0: + version "6.8.1" + resolved "https://registry.yarnpkg.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf" + integrity sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA== + dependencies: + ajv "^8.0.1" + lodash.truncate "^4.4.2" + slice-ansi "^4.0.0" + string-width "^4.2.3" + strip-ansi "^6.0.1" + tap-parser@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/tap-parser/-/tap-parser-7.0.0.tgz#54db35302fda2c2ccc21954ad3be22b2cba42721" @@ -26922,6 +27125,14 @@ write-file-atomic@^3.0.0, write-file-atomic@^3.0.3: signal-exit "^3.0.2" typedarray-to-buffer "^3.1.5" +write-file-atomic@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-4.0.2.tgz#a9df01ae5b77858a027fd2e80768ee433555fcfd" + integrity sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg== + dependencies: + imurmurhash "^0.1.4" + signal-exit "^3.0.7" + write@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/write/-/write-0.2.1.tgz#5fc03828e264cea3fe91455476f7a3c566cb0757"