diff --git a/docs/migrationGuide.adoc b/docs/migrationGuide.adoc index 00980883739..9d3247a2107 100644 --- a/docs/migrationGuide.adoc +++ b/docs/migrationGuide.adoc @@ -15,7 +15,18 @@ We've removed the following files, that we already deprecated within the previou - `@db-ui/core/sources/css/enterprise/db-ui-core-rollup.scss` - `@db-ui/core/sources/css/enterprise/db-ui-core-webpack.scss` -=== progress +=== `button` + +- The `large` size has been removed; it became obsolete mainly due to our `tonality` introduction +- And renamed `regular` size to `medium` +- Made some changes regarding the variants: + - `Brand primary` becomes the regular `Primary` button + - `Primary` becomes `Secondary Inverted` + - `Secondary Outline` becomes `Secondary` + - `Secondary Solid` becomes `Tertiary` + - `Tertiary Plain` becomes `Ghost` + +=== `progress` We've remove the deprecated previous HTML implementation of the label by an `output` element and replaced it by an actual `label` element. Necessary changes: diff --git a/source/_patterns/00-base/_init.demonstration.scss b/source/_patterns/00-base/_init.demonstration.scss index eec6ec47318..d8815b9e923 100644 --- a/source/_patterns/00-base/_init.demonstration.scss +++ b/source/_patterns/00-base/_init.demonstration.scss @@ -1,3 +1,12 @@ +@use "@db-ui/base/build/scss/variables" as *; + body.styleguide { display: initial; } + +.sg-wrapper-dark-background { + background-color: $db-colors-secondary-enabled; + + margin: -1rem -0.5rem; + padding: 1rem 0.5rem; +} diff --git a/source/_patterns/01-elements/buttons/01-button-brand-primary.hbs b/source/_patterns/01-elements/buttons/01-button-brand-primary.hbs deleted file mode 100644 index 22018211be0..00000000000 --- a/source/_patterns/01-elements/buttons/01-button-brand-primary.hbs +++ /dev/null @@ -1,17 +0,0 @@ -{{!-- TODO: let's not use those modifier classes, but inherit their meaning via CSS correctly and introduce sample classes for the styleguide --}} -

- {{> elements-button variant='brand-primary' value='Brand Primary' icon='add'}} - {{> elements-button variant='brand-primary' value='Brand Primary' disabled='true' icon='add' }} -

-

- {{> elements-button variant='brand-primary' value='Brand Primary with right icon' icon-after='add'}} - {{> elements-button variant='brand-primary' value='Brand Primary with right icon(disabled)' disabled='true' icon-after='add' }} -

-

- {{> elements-button variant='brand-primary' value='Brand Primary without icon' }} - {{> elements-button variant='brand-primary' value='Brand Primary without icon (disabled)' disabled='true' }} -

-

- {{> elements-button variant='brand-primary' title='Check' value='Brand Primary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} - {{> elements-button variant='brand-primary' title='Check' value='Brand Primary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} -

diff --git a/source/_patterns/01-elements/buttons/03-button-primary.hbs b/source/_patterns/01-elements/buttons/01-button-primary.hbs similarity index 53% rename from source/_patterns/01-elements/buttons/03-button-primary.hbs rename to source/_patterns/01-elements/buttons/01-button-primary.hbs index d15fd12326b..688461f8d92 100644 --- a/source/_patterns/01-elements/buttons/03-button-primary.hbs +++ b/source/_patterns/01-elements/buttons/01-button-primary.hbs @@ -1,16 +1,16 @@ +{{!-- TODO: let's not use those modifier classes, but inherit their meaning via CSS correctly and introduce sample classes for the styleguide --}}

- {{> elements-button variant='primary' value='Primary' icon='add' }} - {{> elements-button variant='primary' value='Primary (disabled)' disabled='true' icon='add' }} + {{> elements-button variant='primary' value='Primary' }} + {{> elements-button variant='primary' value='Primary (disabled)' disabled='true' }}

- {{> elements-button variant='primary' value='Primary with icon' icon-after='add'}} - {{> elements-button variant='primary' value='Primary with icon (disabled)' disabled='true' icon-after='add' }} -

-

- {{> elements-button variant='primary' value='Primary without icon' }} - {{> elements-button variant='primary' value='Primary without icon (disabled)' disabled='true' }} + {{> elements-button variant='primary' value='Primary' icon='add'}} + {{> elements-button variant='primary' value='Primary' disabled='true' icon='add' }}

{{> elements-button variant='primary' title='Check' value='Primary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} {{> elements-button variant='primary' title='Check' value='Primary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }}

+

+ {{> elements-button variant='primary' title='Check' value='loading' state='loading' }} +

diff --git a/source/_patterns/01-elements/buttons/02-button-secondary.hbs b/source/_patterns/01-elements/buttons/02-button-secondary.hbs new file mode 100644 index 00000000000..807d1198fc7 --- /dev/null +++ b/source/_patterns/01-elements/buttons/02-button-secondary.hbs @@ -0,0 +1,21 @@ +

+ {{> elements-button variant='secondary' value='Secondary' }} + {{> elements-button variant='secondary' value='Secondary (disabled)' disabled='true' }} +

+

+ {{> elements-button variant='secondary' value='Secondary' icon='add' }} + {{> elements-button variant='secondary' value='Secondary (disabled)' disabled='true' icon='add' }} +

+

+ {{> elements-button variant='secondary' title='Check' value='Secondary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} + {{> elements-button variant='secondary' title='Check' value='Secondary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} +

+

+ {{> elements-button variant='secondary' title='Check' value='loading' state='loading' }} +

+ + +

+ {{> elements-button variant='secondary' value='Secondary' }} + {{> elements-button variant='secondary' value='Secondary (disabled)' disabled='true' }} +

diff --git a/source/_patterns/01-elements/buttons/04-button-secondary-outline.hbs b/source/_patterns/01-elements/buttons/04-button-secondary-outline.hbs deleted file mode 100644 index 9cdd61403f7..00000000000 --- a/source/_patterns/01-elements/buttons/04-button-secondary-outline.hbs +++ /dev/null @@ -1,16 +0,0 @@ -

- {{> elements-button variant='secondary-outline' value='Secondary Outline' icon='add' }} - {{> elements-button variant='secondary-outline' value='Secondary Outline (disabled)' disabled='true' icon='add' }} -

-

- {{> elements-button variant='secondary-outline' value='Secondary Outline with right icon' icon-after='add'}} - {{> elements-button variant='secondary-outline' value='Secondary Outline with right icon (disabled)' disabled='true' icon-after='add' }} -

-

- {{> elements-button variant='secondary-outline' value='Secondary Outline without left icon' }} - {{> elements-button variant='secondary-outline' value='Secondary Outline without left icon (disabled)' disabled='true' }} -

-

- {{> elements-button variant='secondary-outline' title='Check' value='Secondary Outline displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} - {{> elements-button variant='secondary-outline' title='Check' value='Secondary Outline displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} -

diff --git a/source/_patterns/01-elements/buttons/05-button-secondary-solid.hbs b/source/_patterns/01-elements/buttons/05-button-secondary-solid.hbs deleted file mode 100644 index 1b46d5832e1..00000000000 --- a/source/_patterns/01-elements/buttons/05-button-secondary-solid.hbs +++ /dev/null @@ -1,16 +0,0 @@ -

- {{> elements-button variant='secondary-solid' value='Secondary' icon='add' }} - {{> elements-button variant='secondary-solid' value='Secondary (disabled)' disabled='true' icon='add' }} -

-

- {{> elements-button variant='secondary-solid' value='Secondary Solid with right icon' icon-after='add'}} - {{> elements-button variant='secondary-solid' value='Secondary Solid with right icon (disabled)' disabled='true' icon-after='add' }} -

-

- {{> elements-button variant='secondary-solid' value='Secondary Solid without icon' }} - {{> elements-button variant='secondary-solid' value='Secondary Solid without icon (disabled)' disabled='true' }} -

-

- {{> elements-button variant='secondary-solid' title='Check' value='Secondary Solid displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} - {{> elements-button variant='secondary-solid' title='Check' value='Secondary Solid displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} -

diff --git a/source/_patterns/01-elements/buttons/05-button-tertiary.hbs b/source/_patterns/01-elements/buttons/05-button-tertiary.hbs new file mode 100644 index 00000000000..e0b4c82521e --- /dev/null +++ b/source/_patterns/01-elements/buttons/05-button-tertiary.hbs @@ -0,0 +1,20 @@ +

+ {{> elements-button variant='tertiary' value='Tertiary' }} + {{> elements-button variant='tertiary' value='Tertiary (disabled)' disabled='true' }} +

+

+ {{> elements-button variant='tertiary' value='Tertiary' icon='add' }} + {{> elements-button variant='tertiary' value='Tertiary (disabled)' disabled='true' icon='add' }} +

+

+ {{> elements-button variant='tertiary' title='Check' value='Tertiary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} + {{> elements-button variant='tertiary' title='Check' value='Tertiary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} +

+

+ {{> elements-button variant='tertiary' title='Check' value='loading' state='loading' }} +

+ +

+ {{> elements-button variant='tertiary' value='Tertiary' }} + {{> elements-button variant='tertiary' value='Tertiary (disabled)' disabled='true' }} +

diff --git a/source/_patterns/01-elements/buttons/06-button-ghost.hbs b/source/_patterns/01-elements/buttons/06-button-ghost.hbs new file mode 100644 index 00000000000..ec2259ffbbe --- /dev/null +++ b/source/_patterns/01-elements/buttons/06-button-ghost.hbs @@ -0,0 +1,20 @@ +

+ {{> elements-button variant='ghost' value='Ghost' }} + {{> elements-button variant='ghost' value='Ghost (disabled)' disabled='true' }} +

+

+ {{> elements-button variant='ghost' value='Ghost' }} + {{> elements-button variant='ghost' value='Ghost' disabled='true' }} +

+

+ {{> elements-button variant='ghost' title='Check' value='Ghost displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} + {{> elements-button variant='ghost' title='Check' value='Ghost displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} +

+

+ {{> elements-button variant='ghost' title='Check' value='loading' state='loading' }} +

+ +

+ {{> elements-button variant='ghost' value='Ghost' }} + {{> elements-button variant='ghost' value='Ghost (disabled)' disabled='true' }} +

diff --git a/source/_patterns/01-elements/buttons/06-button-tertiary-plain.hbs b/source/_patterns/01-elements/buttons/06-button-tertiary-plain.hbs deleted file mode 100644 index 2a23210d1a3..00000000000 --- a/source/_patterns/01-elements/buttons/06-button-tertiary-plain.hbs +++ /dev/null @@ -1,16 +0,0 @@ -

- {{> elements-button variant='tertiary-plain' value='Tertiary Plain' }} - {{> elements-button variant='tertiary-plain' value='Tertiary Plain' disabled='true' }} -

-

- {{> elements-button variant='tertiary-plain' value='Tertiary Plain with right icon' icon-after='add'}} - {{> elements-button variant='tertiary-plain' value='Tertiary Plain with right icon(disabled)' disabled='true' icon-after='add' }} -

-

- {{> elements-button variant='tertiary-plain' value='Tertiary Plain without left icon' }} - {{> elements-button variant='tertiary-plain' value='Tertiary Plain without left icon (disabled)' disabled='true' }} -

-

- {{> elements-button variant='tertiary-plain' title='Check' value='Tertiary Plain displaying only the icon' icon='done' styleModifier='is-icon-text-replace' }} - {{> elements-button variant='tertiary-plain' title='Check' value='Tertiary Plain displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' }} -

diff --git a/source/_patterns/01-elements/buttons/09-button-sizes.hbs b/source/_patterns/01-elements/buttons/09-button-sizes.hbs index ff6f0d5ec37..be51337ed53 100644 --- a/source/_patterns/01-elements/buttons/09-button-sizes.hbs +++ b/source/_patterns/01-elements/buttons/09-button-sizes.hbs @@ -2,19 +2,15 @@

{{ label }}

- {{> elements-button variant='brand-primary' value='Brand Primary' icon='add' size=size }} - {{> elements-button variant='brand-primary' value='Brand Primary (disabled)' disabled='true' icon='add' size=size }} + {{> elements-button variant='primary' value='Primary' size=size }} + {{> elements-button variant='primary' value='Primary (disabled)' disabled='true' size=size }}

- {{> elements-button variant='brand-primary' value='Brand Primary with right icon' icon-after='add' size=size }} - {{> elements-button variant='brand-primary' value='Brand Primary with right icon(disabled)' disabled='true' icon-after='add' size=size }} + {{> elements-button variant='primary' value='Primary' icon='add' size=size }} + {{> elements-button variant='primary' value='Primary (disabled)' disabled='true' icon='add' size=size }}

- {{> elements-button variant='brand-primary' value='Brand Primary without icon' size=size }} - {{> elements-button variant='brand-primary' value='Brand Primary without icon (disabled)' disabled='true' size=size }} -

-

- {{> elements-button variant='brand-primary' title='Done' value='Brand Primary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' size=size }} - {{> elements-button variant='brand-primary' title='Done' value='Brand Primary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' size=size }} + {{> elements-button variant='primary' title='Done' value='Primary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' size=size }} + {{> elements-button variant='primary' title='Done' value='Primary displaying only the icon' disabled='true' icon='done' styleModifier='is-icon-text-replace' size=size }}

{{/each }} diff --git a/source/_patterns/01-elements/buttons/09-button-sizes.json b/source/_patterns/01-elements/buttons/09-button-sizes.json index c6cf94a0701..9dc9042ddae 100644 --- a/source/_patterns/01-elements/buttons/09-button-sizes.json +++ b/source/_patterns/01-elements/buttons/09-button-sizes.json @@ -5,12 +5,8 @@ "label": "Small" }, { - "size": "regular", - "label": "Regular (default, data-size attribute is optional)" - }, - { - "size": "large", - "label": "Large" + "size": "medium", + "label": "Medium (default, data-size attribute is optional)" } ] } diff --git a/source/_patterns/01-elements/buttons/10-button-width.hbs b/source/_patterns/01-elements/buttons/10-button-width.hbs new file mode 100644 index 00000000000..c5b2f30510c --- /dev/null +++ b/source/_patterns/01-elements/buttons/10-button-width.hbs @@ -0,0 +1,13 @@ +{{#each width }} + +

{{ label }}

+

+ {{> elements-button variant='primary' value='Primary' width=width }} +

+

+ {{> elements-button variant='primary' value='Primary' icon='add' width=width }} +

+

+ {{> elements-button variant='primary' title='Done' value='Primary displaying only the icon' icon='done' styleModifier='is-icon-text-replace' width=width }} +

+{{/each }} diff --git a/source/_patterns/01-elements/buttons/10-button-width.json b/source/_patterns/01-elements/buttons/10-button-width.json new file mode 100644 index 00000000000..0fed2f689fa --- /dev/null +++ b/source/_patterns/01-elements/buttons/10-button-width.json @@ -0,0 +1,8 @@ +{ + "width": [ + { + "width": "full", + "label": "FullWidth" + } + ] +} diff --git a/source/_patterns/01-elements/buttons/10-button-width.md b/source/_patterns/01-elements/buttons/10-button-width.md new file mode 100644 index 00000000000..fbeff47c9f8 --- /dev/null +++ b/source/_patterns/01-elements/buttons/10-button-width.md @@ -0,0 +1,3 @@ +--- +title: Button width +--- diff --git a/source/_patterns/01-elements/buttons/_button.demonstration.scss b/source/_patterns/01-elements/buttons/_button.demonstration.scss new file mode 100644 index 00000000000..aa5d216c900 --- /dev/null +++ b/source/_patterns/01-elements/buttons/_button.demonstration.scss @@ -0,0 +1,9 @@ +/* stylelint-disable selector-max-id */ +#elements-button-width { + .pl-js-pattern-example { + p { + /* stylelint-enable selector-max-id */ + width: 300px; + } + } +} diff --git a/source/_patterns/01-elements/buttons/_button.variables.scss b/source/_patterns/01-elements/buttons/_button.variables.scss deleted file mode 100644 index b150f01aca5..00000000000 --- a/source/_patterns/01-elements/buttons/_button.variables.scss +++ /dev/null @@ -1,35 +0,0 @@ -@use "@db-ui/base/build/scss/variables" as *; -@use "@db-ui/base/build/scss/helpers/functions" as *; -@use "@db-ui/base/build/scss/icon/icons.helpers" as *; - -$button---color: #fff !default; - -$button---minHeight: to-rem( - $pxValue: 44 -) !default; - -// Background colors -$button-brand-primary--backgroundColor: $db-colors-primary-enabled !default; -// TODO: We need to replace this by its correct color variable -$button-brand-primary-hover-backgroundColor: #db0016; - -$button-primary--backgroundColor: $db-colors-secondary-enabled !default; -// TODO: We need to replace this by its correct color variable -$button-primary-hover-backgroundColor: #2f3541; - -// TODO: We need to replace this by its correct color variable -$button-secondarySolid--backgroundColor: #d7dce1 !default; -// TODO: We need to replace this by its correct color variable -$button-secondarySolid-hover-backgroundColor: #cdd4da !default; -// TODO: We need to replace this by its correct color variable -$button-secondarySolid-active-backgroundColor: #c5ccd3 !default; - -$button-secondaryOutline-hover-backgroundColor: rgba( - $db-colors-secondary-enabled, - 0.03 -) !default; - -$button-secondaryOutline-active-backgroundColor: rgba( - $db-colors-secondary-enabled, - 0.06 -) !default; diff --git a/source/_patterns/01-elements/buttons/_buttons.md b/source/_patterns/01-elements/buttons/_buttons.md index 89cced3a1c1..4a5f5a99540 100644 --- a/source/_patterns/01-elements/buttons/_buttons.md +++ b/source/_patterns/01-elements/buttons/_buttons.md @@ -9,7 +9,7 @@ state: complete #### SCSS (recommended) -Extend one of the variant placeholders: `%variant-primary`, `%variant-secondary` or `%variant-tertiary` +Extend one of the variant placeholders: `%variant-primary`, `%variant-secondary`, `%variant-tertiary` or `%variant-ghost` #### HTML attribute @@ -19,11 +19,21 @@ You could set the different button variants via the `data-variant` attribute. #### SCSS (recommended) -Extend one of the size SCSS placeholders in case that you don't want the default (regular): `%size-Small` or `%size-Large` +Extend the size SCSS placeholder in case that you don't want the default (medium): `%size-Small` #### HTML attribute -You could set the different button sizes via the `data-size` attribute, the default is "regular" and in that case is optional. +You could set the different button sizes via the `data-size` attribute, the default is "medium" and in that case is optional. + +### Width + +#### SCSS (recommended) + +Extend the width placeholders in case that you don't want the default (content-length sized): `%width-full` + +#### HTML attribute + +You could differentiate the button width via the `data-width` attribute, choose value "full" for a button taking the whole containers width; the default is "auto" and in that case is optional. ## Usability diff --git a/source/_patterns/01-elements/buttons/button.hbs b/source/_patterns/01-elements/buttons/button.hbs index 5bcaebd7be6..20b6cbd412b 100644 --- a/source/_patterns/01-elements/buttons/button.hbs +++ b/source/_patterns/01-elements/buttons/button.hbs @@ -1,11 +1,14 @@ diff --git a/source/_patterns/01-elements/buttons/button.json b/source/_patterns/01-elements/buttons/button.json index 06a4771b8e7..235f64956d8 100644 --- a/source/_patterns/01-elements/buttons/button.json +++ b/source/_patterns/01-elements/buttons/button.json @@ -1,5 +1,5 @@ { - "variant": "brand-primary", + "variant": "primary", "title": "Done", - "value": "Red 500" + "value": "Button" } diff --git a/source/_patterns/01-elements/buttons/button.scss b/source/_patterns/01-elements/buttons/button.scss index fa1cef97768..4d686301239 100644 --- a/source/_patterns/01-elements/buttons/button.scss +++ b/source/_patterns/01-elements/buttons/button.scss @@ -1,173 +1,118 @@ @charset "utf-8"; @use "@db-ui/base/build/scss/variables" as *; +@use "@db-ui/base/build/scss/variables.global" as *; @use "@db-ui/base/build/scss/helpers/functions" as *; +@use "@db-ui/base/build/scss/color-placeholder" as *; @use "@db-ui/base/build/scss/icon/icons.helpers" as *; -@import "button.variables"; .elm-button { - // Centering the content vertically and horizontally - align-items: center; + // Including a loading indicator + --loadingIndicator---color: currentColor; + + $icon-size: var(--db-icon-size, 20); + align-items: center; // Centering the content vertically and horizontally + border: 1px solid transparent; border-radius: 4px; display: inline-flex; - font-size: to-rem($pxValue: 16); + + font-weight: 700; justify-content: center; - min-height: $button---minHeight; - padding: to-rem($pxValue: 8) to-rem($pxValue: 16); + min-height: $db-sizing-md; + padding: $db-spacing-fixed-xs $db-spacing-fixed-md; + + text-align: center; + + // Changing background-color on hover should be animated by a transition + transition: background-color + var(--db-transition-color, #{$db-transition-color}); &[data-icon], &[data-icon-before] { - padding-left: to-rem($pxValue: 14); + padding-left: $db-spacing-fixed-xs; + + &::before { + --icon-font-family: var(--db-base-icon-font-family); + --icon-font-size: var(--db-base-icon-font-size); + } } &[data-icon-after] { - padding-right: to-rem($pxValue: 14); + padding-right: $db-spacing-fixed-xs; + + &::after { + --icon-font-family: var(--db-base-icon-font-family); + --icon-font-size: var(--db-base-icon-font-size); + } } // Square icon only buttons &.is-icon-text-replace { - width: $button---minHeight; - } - - /*&:focus { - border-color: #fff; - }*/ - /* &:active { - filter: brightness(75%); - }*/ - - &%variant-brand-primary, - &%variant-primary { - color: $button---color; + padding: 0; + width: $db-sizing-md; } - &%variant-brand-primary, - &%variant-primary { - font-weight: 700; + &:not([data-variant]), + &[data-variant="primary"] { + @extend %db-bg-primary-ia; } - &%variant-brand-primary { - background-color: $button-brand-primary--backgroundColor; + &%variant-secondary { + background-color: $db-colors-neutral-bg-transparent-full-enabled; + border: solid 1px + var(--db-current-color, $db-colors-neutral-on-bg-enabled); + color: var(--db-current-color, $db-colors-neutral-on-bg-enabled); &:not(:disabled) { &:hover { - // TODO: This could probably get simplified later on e.g. via CSS variables - background-color: $button-brand-primary-hover-backgroundColor; + background-color: $db-colors-neutral-bg-transparent-full-hover; } - } - &:active { - background-color: #cc0013; // TODO: replace by correct color variable - } - } - - &%variant-primary { - background-color: $button-primary--backgroundColor; - - &:not(:disabled) { - &:hover { - // TODO: This could probably get simplified later on e.g. via CSS variables - background-color: $button-primary-hover-backgroundColor; + &:active { + background-color: $db-colors-neutral-bg-transparent-full-pressed; } } - - &:active { - background-color: #363c4a; - } } - &%variant-secondaryOutline { - // TODO: This might get replaced by another effect - backdrop-filter: blur(4px); - background-color: transparent; - border-color: $db-colors-secondary-enabled; - color: $db-colors-secondary-enabled; + &%variant-tertiary { + background-color: $db-colors-neutral-bg-transparent-semi-enabled; + color: var(--db-current-color, $db-colors-neutral-on-bg-enabled); &:not(:disabled) { &:hover { - // TODO: This could probably get simplified later on e.g. via CSS variables - background-color: $button-secondaryOutline-hover-backgroundColor; + background-color: $db-colors-neutral-bg-transparent-semi-hover; } - } - - &:disabled { - background-color: transparent; - color: $db-colors-secondary-enabled; - } - - &:active { - background-color: $button-secondaryOutline-active-backgroundColor; - } - } - - &%variant-secondarySolid { - background-color: $button-secondarySolid--backgroundColor; - color: $db-colors-secondary-enabled; - &:not(:disabled) { - &:hover { - // TODO: This could probably get simplified later on e.g. via CSS variables - background-color: $button-secondarySolid-hover-backgroundColor; + &:active { + background-color: $db-colors-neutral-bg-transparent-semi-pressed; } } - - &:active { - background-color: $button-secondarySolid-active-backgroundColor; - } } - &%variant-tertiaryPlain { - background-color: transparent; // shame.css - border: 2px solid transparent; - color: $db-colors-secondary-enabled; + &%variant-ghost { + background-color: $db-colors-neutral-bg-transparent-full-enabled; + color: var(--db-current-color, $db-colors-neutral-on-bg-enabled); &:not(:disabled) { &:hover { - // TODO: This could probably get simplified later on e.g. via CSS variables - background-color: $button-secondaryOutline-hover-backgroundColor; + background-color: $db-colors-neutral-bg-transparent-full-hover; } - } - - &:disabled { - background-color: transparent; // shame.css - } - &:active { - background-color: $button-secondaryOutline-active-backgroundColor; + &:active { + background-color: $db-colors-neutral-bg-transparent-full-pressed; + } } } // Sizes - &%size-Small { - min-height: to-rem($pxValue: 36); - - &:not(.is-icon-text-replace) { - font-size: to-rem($pxValue: 14); - } - &[data-icon], - &[data-icon-before] { - @include icon-meta(20); - } - - &[data-icon-after] { - @include icon-meta($size: 20, $position: "after"); - } - // Square icon only buttons - &.is-icon-text-replace { - width: to-rem($pxValue: 36); - } - } - - &%size-Large { - min-height: to-rem($pxValue: 52); + &%size-Small { + min-height: $db-sizing-sm; + padding: $db-spacing-fixed-3xs $db-spacing-fixed-sm; - &:not(.is-icon-text-replace) { - font-size: to-rem($pxValue: 20); - } // Square icon only buttons &.is-icon-text-replace { - width: to-rem($pxValue: 52); + width: $db-sizing-sm; } } @@ -175,35 +120,43 @@ @extend %size-Small; } - &[data-size="large"] { - @extend %size-Large; + // Width + &%width-full { + width: 100%; + } + + &[data-width="full"] { + @extend %width-full; } // Providing the variants as HTML attributes as well - &[data-variant="brand-primary"] { - @extend %variant-brand-primary; + + &[data-variant="secondary"] { + @extend %variant-secondary; } - &[data-variant="primary"] { - @extend %variant-primary; + &[data-variant="tertiary"] { + @extend %variant-tertiary; } - &[data-variant="secondary-outline"] { - @extend %variant-secondaryOutline; + &[data-variant="ghost"] { + @extend %variant-ghost; } - &[data-variant="secondary-solid"] { - @extend %variant-secondarySolid; + &:disabled { + opacity: 0.25; } - &[data-variant="tertiary-plain"] { - @extend %variant-tertiaryPlain; + // States (currently only "loading") + &[data-state="loading"] { + @include is-icon-text-replace(); + + &::before { + content: ""; + } } - &:disabled { - // TODO: We need to replace this by its correct color variable - background-color: #d7dce1; - color: $db-colors-secondary-enabled; - opacity: 0.5; + &[data-state="loading"] { + font-size: 0; } } diff --git a/source/_patterns/01-elements/loading-indicator/loading-indicator.hbs b/source/_patterns/01-elements/loading-indicator/loading-indicator.hbs index 4005a090d1c..0caa1b88ec6 100644 --- a/source/_patterns/01-elements/loading-indicator/loading-indicator.hbs +++ b/source/_patterns/01-elements/loading-indicator/loading-indicator.hbs @@ -1,10 +1,10 @@ - {{aria-description}} + {{aria-description}} {{> elements-button variant="secondary" value='Secondary' }} - {{> elements-button variant="brand-primary" value='Primary' }} + {{> elements-button variant="primary" value='Primary' }} diff --git a/source/css/db-ui-core.general.scss b/source/css/db-ui-core.general.scss index a9ed2c47461..9dd69b934bf 100644 --- a/source/css/db-ui-core.general.scss +++ b/source/css/db-ui-core.general.scss @@ -5,4 +5,3 @@ @import "@csstools/normalize.css/normalize"; @import "db-ui-core.variables"; @import "../_patterns/00-base/init"; -@import "fonts.general"; diff --git a/source/css/enterprise/db-ui-core.demonstration.scss b/source/css/enterprise/db-ui-core.demonstration.scss index 6e508a0cf56..555668cceaa 100644 --- a/source/css/enterprise/db-ui-core.demonstration.scss +++ b/source/css/enterprise/db-ui-core.demonstration.scss @@ -10,6 +10,7 @@ @import "../../_patterns/00-base/icons/icons.demonstration"; +@import "../../_patterns/01-elements/buttons/button.demonstration"; @import "../../_patterns/01-elements/checkbox/enterprise/checkbox.demonstration"; @import "../../_patterns/01-elements/progress/enterprise/progress.demonstration"; @import "../../_patterns/01-elements/input/input.demonstration"; diff --git a/source/css/pattern-scaffolding-project-specific.scss b/source/css/pattern-scaffolding-project-specific.scss index c2b0886d91c..129f77f17e7 100644 --- a/source/css/pattern-scaffolding-project-specific.scss +++ b/source/css/pattern-scaffolding-project-specific.scss @@ -10,6 +10,10 @@ body, font-family: $db-font-family-sans; } +.db-bg-success-light-ia { + @extend %db-bg-success-light; +} + // pl-header { // font-size: to-rem($pxValue: 15.49191); // }