fix: use token for font size

Author: logonoff

workspaces/core/scss/components/_buttons.scss

@@ -79,7 +79,9 @@
   vertical-align: middle;
 
   .#{$shale}icon {
-    font-size: 0.75em;
-    padding-left: 0.25em;
+    font-size: var(--#{$shale}font-1);
+    padding: 0.1rem;
+    display: inline-block;
+    vertical-align: text-bottom;
   }
 }

workspaces/core/scss/components/_caption-button.scss

@@ -26,7 +26,7 @@
     display: inline-block;
     fill: var(--#{$shale}header-text);
     filter: var(--#{$shale}filter-shadow-moderate);
-    font-size: 1rem;
+    font-size: var(--#{$shale}font-1);
     font-weight: bold;
     opacity: 0.75;
     outline-color: var(--#{$shale}accent-400);

workspaces/core/scss/components/_header.scss

@@ -33,7 +33,7 @@
     & .#{$shale}header-title {
       align-items: center;
       flex-grow: 1;
-      font-size: 1rem;
+      font-size: var(--#{$shale}font-0);
     }
 
     & .#{$shale}caption-menu {

workspaces/core/scss/components/_link.scss

@@ -9,7 +9,7 @@
 
   .#{$shale}icon {
     fill: var(--#{$shale}link-colour);
-    font-size: 0.75em;
+    font-size: var(--#{$shale}font-0);
     padding-left: 0.25em;
   }
 

workspaces/core/scss/components/_tab-skip.scss

@@ -21,7 +21,7 @@
     border: 3px solid var(--#{$shale}button-border-active);
     box-shadow: var(--#{$shale}shadow-puffy);
     color: var(--#{$shale}code-text-colour, var(--#{$shale}text-colour));
-    font-size: 1rem;
+    font-size: var(--#{$shale}font-1);
     height: auto;
     left: 1rem;
     margin: 1rem 0.5rem;

workspaces/react/src/components/Button.tsx

@@ -20,6 +20,15 @@ export interface BaseButtonProps {
  * <Button variant="primary">Click Me</Button>;
  * ```
  *
+ * @example With icon
+ *
+ * ```tsx
+ * <Button state="active">
+ *   <Icon icon="download" />
+ *   Download
+ * </Button>;
+ * ```
+ *
  * @alpha
  */
 export const Button: PolymorphicComponent<"button", BaseButtonProps> = ({