5.0: Border tokens (#40317)

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;

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);
+}

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;