diff --git a/addons/rose/addon/styles/rose/_typography.scss b/addons/rose/addon/styles/rose/_typography.scss index c5fda86e4..9839ab8b1 100644 --- a/addons/rose/addon/styles/rose/_typography.scss +++ b/addons/rose/addon/styles/rose/_typography.scss @@ -17,7 +17,8 @@ body { } input, -textarea { +textarea, +button { font-family: typography.$family-primary; } diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss index c1fe56f7d..f8161a2c6 100644 --- a/addons/rose/addon/styles/rose/components/_index.scss +++ b/addons/rose/addon/styles/rose/components/_index.scss @@ -19,4 +19,3 @@ @import 'link-button'; @import 'badge'; @import 'toolbar'; -@import 'loading-button'; diff --git a/addons/rose/addon/styles/rose/components/_loading-button.scss b/addons/rose/addon/styles/rose/components/_loading-button.scss deleted file mode 100644 index 767a641a1..000000000 --- a/addons/rose/addon/styles/rose/components/_loading-button.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use '../variables/sizing'; - -.rose-loading-button { - color: var(--stark); - vertical-align: middle; - margin: auto ($size-xs + $size-xxxs) auto auto; - &.is-loading { - color: var(--ui-gray-starker-1); - } -} diff --git a/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss b/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss index 6dd565290..a2cd92775 100644 --- a/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss +++ b/addons/rose/addon/styles/rose/components/toolbar/_toolbar.scss @@ -1,5 +1,6 @@ @use '../../variables/sizing'; @use '../../variables/media'; +@use '../../utilities/type'; $xxs: sizing.rems(xxs); // 4 $xxxxs: sizing.rems(xxxxs); // 1 @@ -7,12 +8,20 @@ $xxxxs: sizing.rems(xxxxs); // 1 .rose-toolbar { background-color: var(--ui-gray-subtler-6); padding: $xxs + $xxxxs; - button { - display: inline-block; - font-weight: normal; - vertical-align: middle; - } - .rose-form { + + // inside a toolbar, forms are always full-width + .rose-form, + .rose-form:not(.full-width) { display: flex; + width: auto; + } + + .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); } }