diff --git a/app/javascript/styles/mastodon/_mixins.scss b/app/javascript/styles/mastodon/_mixins.scss index c033c826773..d77fd2cae01 100644 --- a/app/javascript/styles/mastodon/_mixins.scss +++ b/app/javascript/styles/mastodon/_mixins.scss @@ -98,15 +98,27 @@ */ @mixin elevation-1 { - border: 1px solid var(--color-border-strong); + border: var(--border-w-md) solid var(--color-border-strong); box-shadow: 0 1px 0 var(--color-border-strong); } @mixin elevation-2 { - border: 1px solid var(--color-border-strong); + border: var(--border-w-md) solid var(--color-border-strong); box-shadow: 1px 2px 0 var(--color-border-strong); } +/** + * Focus styles + */ + +@mixin focus($offset: false) { + outline: var(--border-w-strong) solid var(--color-border-brand); + + @if $offset not false { + outline-offset: var(--border-w-strong); + } +} + /** * Search input styles */ @@ -119,7 +131,7 @@ background: var(--color-bg-secondary); color: var(--color-text-primary); border-radius: 4px; - border: 1px solid var(--color-border-primary); + border: var(--border-w-md) solid var(--color-border-primary); font-size: 17px; line-height: normal; margin: 0; diff --git a/app/javascript/styles/mastodon/tokens/_border.scss b/app/javascript/styles/mastodon/tokens/_border.scss new file mode 100644 index 00000000000..c5264a8e3bb --- /dev/null +++ b/app/javascript/styles/mastodon/tokens/_border.scss @@ -0,0 +1,11 @@ +@mixin border-widths { + --border-w-thin: 0.5px; + --border-w-normal: 1px; + --border-w-strong: 2px; +} + +@mixin borders { + --border-thin: var(--border-w-thin) solid var(--color-border-primary); + --border-normal: var(--border-w-normal) solid var(--color-border-primary); + --border-strong: var(--border-w-strong) solid var(--color-border-strong); +} diff --git a/app/javascript/styles/mastodon/tokens/index.scss b/app/javascript/styles/mastodon/tokens/index.scss index d0e283d27a7..3e00489410a 100644 --- a/app/javascript/styles/mastodon/tokens/index.scss +++ b/app/javascript/styles/mastodon/tokens/index.scss @@ -2,11 +2,14 @@ @use 'theme/dark'; @use 'theme/light'; @use 'theme/utils'; +@use 'border'; @use 'shape'; @use 'type'; html { @include base.palette; + @include border.border-widths; + @include border.borders; @include shape.space; @include shape.radius; @include type.font-size;