@foblex/m-render 4.0.0 → 4.0.1

package/assets/styles/_table.scss

@@ -1,72 +1,63 @@
-.m-render {
-
+.m-render .doc-content {
   table {
     width: 100%;
+    margin: 2em 0;
+    border: 0;
     border-collapse: separate;
     border-spacing: 0;
-    font-size: 14px;
-    line-height: 1.6;
-    margin: 24px 0;
-    border: 1px solid var(--divider-color);
-    border-radius: var(--border-radius);
-    box-shadow: var(--shadow-1);
-
-    th,
-    td {
-      padding: 12px 16px;
-      text-align: left;
-      border-bottom: 1px solid var(--divider-color);
-      color: var(--primary-text);
-      background-clip: padding-box;
-    }
+    table-layout: auto;
+    font-size: 0.875em;
+    line-height: 1.7142857;
 
     th {
+      border: 0;
+      border-bottom: 1px solid var(--dark-divider-color);
+      padding-block: 8px;
+      padding-inline: 8px;
+      color: var(--primary-text);
       font-weight: 600;
-      background-color: var(--surface-glass-strong);
-    }
+      line-height: 20px;
+      text-align: start;
 
-    td {
-      background-color: var(--background-color);
-    }
+      &:first-child {
+        padding-inline-start: 0;
+      }
 
-    thead th:first-child {
-      border-top-left-radius: calc(var(--border-radius) - 1px);
+      &:last-child {
+        padding-inline-end: 0;
+      }
     }
 
-    thead th:last-child {
-      border-top-right-radius: calc(var(--border-radius) - 1px);
-    }
+    td {
+      border: 0;
+      border-bottom: 1px solid var(--divider-color);
+      padding-block: 10px;
+      padding-inline: 8px;
+      color: var(--primary-text);
+      background: none;
 
-    tbody tr:hover td {
-      background-color: var(--soft-background);
+      &:first-child {
+        padding-inline-start: 0;
+      }
+
+      &:last-child {
+        padding-inline-end: 0;
+      }
     }
 
     tbody tr:last-child td {
       border-bottom: 0;
     }
 
-    tbody tr:last-child td:first-child {
-      border-bottom-left-radius: calc(var(--border-radius) - 1px);
-    }
-
-    tbody tr:last-child td:last-child {
-      border-bottom-right-radius: calc(var(--border-radius) - 1px);
-    }
-
     code {
       font-family: var(--font-family-mono);
-      font-size: 0.875em;
+      font-size: var(--not-pre-code-font-size);
       background-color: var(--not-pre-code-background);
-      color: var(--not-pre-code-color);
-      padding: 0.2em 0.4em;
-      border-radius: var(--border-radius);
+      box-shadow: inset 0 0 0 1px var(--not-pre-code-border-color);
+      color: inherit;
+      padding: 1px 0.3rem;
+      border-radius: 0.25rem;
+      font-weight: 500;
     }
   }
-
-  table:not([class]) {
-    display: table;
-    width: 100%;
-    overflow-x: auto;
-    max-width: 100%;
-  }
 }

package/assets/styles/_variables.scss

@@ -62,9 +62,10 @@
   --soft-background: var(--gray-75);
   --surface-glass: rgba(255, 255, 255, 0.78);
   --surface-glass-strong: rgba(255, 255, 255, 0.92);
-  --page-background-image:
-    radial-gradient(circle at top center, rgba(13, 13, 13, 0.05) 0%, rgba(13, 13, 13, 0) 36%),
-    linear-gradient(180deg, rgba(13, 13, 13, 0.018) 0%, rgba(13, 13, 13, 0) 28%);
+  --page-background-color: #ffffff;
+  --page-header-background: #ffffff;
+  --page-navigation-background: #f9f9f9;
+  --page-shell-border-color: rgba(13, 13, 13, 0.08);
 
   --gray-1: var(--gray-150);
   --gray-2: var(--gray-100);
@@ -91,6 +92,13 @@
   --yellow-3: #be7a06;
   --yellow-soft: rgba(190, 122, 6, 0.12);
 
+  --blue-200: #66b5ff;
+  --blue-300: #339cff;
+  --blue-400: #0285ff;
+  --blue-500: #0169cc;
+  --blue-600: #004f99;
+  --blue-800: #013566;
+
   --red-1: #a53c3c;
   --red-2: #be4a4a;
   --red-3: #d25b5b;
@@ -131,9 +139,10 @@
   --soft-background: var(--gray-950);
   --surface-glass: rgba(13, 13, 13, 0.78);
   --surface-glass-strong: rgba(13, 13, 13, 0.92);
-  --page-background-image:
-    radial-gradient(circle at top center, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 36%),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.024) 0%, rgba(255, 255, 255, 0) 28%);
+  --page-background-color: #212121;
+  --page-header-background: #212121;
+  --page-navigation-background: #181818;
+  --page-shell-border-color: rgba(255, 255, 255, 0.08);
 
   --gray-1: var(--gray-800);
   --gray-2: var(--gray-900);
@@ -232,18 +241,35 @@
 :root {
   --navigation-panel-padding: 20px;
   --navigation-panel-width: clamp(236px, 24vw, 252px);
-  --navigation-panel-background: var(--surface-glass-strong);
+  --navigation-panel-background: var(--page-navigation-background);
 }
 
 :root {
-  --not-pre-code-background: var(--soft-background);
+  --not-pre-code-background: var(--alpha-04);
+  --not-pre-code-border-color: var(--alpha-08);
   --not-pre-code-font-size: 0.875em;
   --not-pre-code-color: var(--primary-text);
+  --doc-blockquote-bar-color: var(--alpha-15);
+  --doc-divider-color: var(--alpha-08);
+  --footer-navigation-border-color: var(--alpha-08);
+  --footer-navigation-button-border-color: var(--alpha-10);
+  --footer-navigation-button-hover-border-color: var(--alpha-15);
+}
+
+.dark {
+  --not-pre-code-background: var(--alpha-10);
+  --doc-blockquote-bar-color: var(--alpha-20);
+  --doc-divider-color: var(--alpha-20);
+  --footer-navigation-border-color: var(--alpha-20);
+  --footer-navigation-button-border-color: var(--alpha-20);
+  --footer-navigation-button-hover-border-color: var(--alpha-30);
 }
 
 :root {
-  --on-page-navigation-width: 236px;
+  --on-page-navigation-width: 212px;
+  --on-page-navigation-shift-desktop: 64px;
   --page-padding: 24px;
+  --docs-content-offset-desktop: 72px;
 }
 
 :root {
@@ -271,8 +297,19 @@
 }
 
 :root {
-  --f-badge-tip-color: var(--secondary-text);
-  --f-badge-tip-background: var(--soft-background);
+  --f-badge-height: 22px;
+  --f-badge-padding-x: 6px;
+  --f-badge-border-radius: 4px;
+  --f-badge-font-size: 14px;
+  --f-badge-font-weight: 600;
+  --f-badge-letter-spacing: 0;
+
+  --f-badge-compact-height: 20px;
+  --f-badge-compact-padding-x: 5px;
+  --f-badge-compact-font-size: 12px;
+
+  --f-badge-tip-color: var(--primary-text);
+  --f-badge-tip-background: var(--alpha-08);
 
   --f-badge-info-color: var(--primary-text);
   --f-badge-info-background: var(--primary-soft);
@@ -287,36 +324,71 @@
   --f-badge-success-background: var(--success-soft);
 }
 
+.dark {
+  --f-badge-tip-background: var(--alpha-12);
+}
+
+:root {
+  --f-link-radius: 6px;
+  --f-link-font-weight: inherit;
+  --f-link-underline-offset: 0.1em;
+  --f-link-focus-color: var(--blue-500);
+  --f-link-primary-color: var(--blue-500);
+  --f-link-primary-hover-color: var(--blue-800);
+}
+
+.dark {
+  --f-link-focus-color: var(--blue-400);
+  --f-link-primary-color: var(--blue-300);
+  --f-link-primary-hover-color: var(--blue-400);
+}
+
 :root {
   --code-view-not-focused-opacity: 0.45;
-  --code-view-background: var(--surface-glass-strong);
-  --code-view-border-color: var(--divider-color);
-  --code-view-border-radius: calc(var(--border-radius) + 2px);
+  --code-view-background: var(--gray-25);
+  --code-view-border-color: var(--alpha-10);
+  --code-view-border-radius: 8px;
 
   --code-view-text-color: var(--primary-text);
-  --code-view-line-height: 1.7;
-  --code-view-font-size: 0.875em;
-
+  --code-view-line-height: 21px;
+  --code-view-font-size: 14px;
+  --code-view-padding-top: 14px;
+  --code-view-padding-right: 40px;
+  --code-view-padding-bottom: 14px;
+  --code-view-padding-left: 16px;
   --code-view-lang-color: var(--tertiary-text);
 
   --code-view-copy-button-background: var(--background-color);
   --code-view-copy-button-hover-background: var(--gray-0);
   --code-view-copy-button-border-color: var(--divider-color);
+
+  --code-syntax-1: #c0660d;
+  --code-syntax-2: #0169cc;
+  --code-syntax-3: #008635;
+  --code-syntax-4: #e04c91;
+  --code-syntax-5: #8046d9;
+  --code-syntax-comment: color-mix(in srgb, var(--code-view-text-color) 50%, transparent);
+  --code-syntax-muted: color-mix(in srgb, var(--code-view-text-color) 60%, transparent);
 }
 
 .dark {
+  --code-view-background: var(--gray-975);
+  --code-view-border-color: var(--alpha-12);
   --code-view-copy-button-hover-background: var(--gray-925);
+  --code-syntax-1: #ffe48c;
+  --code-syntax-2: #66b5ff;
+  --code-syntax-3: #40c977;
+  --code-syntax-5: #ad7bf9;
 }
 
 :root {
-  --code-group-tabs-background: var(--surface-glass-strong);
-  --code-group-border-radius: calc(var(--border-radius) + 2px);
-  --code-group-tabs-border-color: var(--gutter-color);
+  --code-group-tabs-background: var(--alpha-02);
+  --code-group-border-radius: var(--code-view-border-radius);
+  --code-group-tabs-border-color: var(--alpha-06);
 
   --code-group-tab-button-text-color: var(--secondary-text);
   --code-group-tab-button-active-text-color: var(--primary-text);
   --code-group-tab-button-active-border-color: var(--primary-text);
-  --code-group-line-height: 1.7;
   --code-group-tab-button-font-size: 14px;
 }
 
@@ -361,27 +433,24 @@
 }
 
 :root {
-  --checkbox-size: 16px;
-  --checkbox-border-radius: 6px;
+  --checkbox-size: 18px;
+  --checkbox-border-radius: 4px;
   --checkbox-text: var(--primary-text);
-
-  --checkbox-container-background: var(--default-3);
-
-  --checkbox-background: var(--neutral-inverse);
-  --checkbox-checked-background: var(--neutral-inverse);
-
-  --checkbox-checkmark-color: var(--secondary-text);
+  --checkbox-border-color: var(--alpha-20);
+  --checkbox-border-color-hover: var(--alpha-30);
+  --checkbox-background: transparent;
+  --checkbox-checked-background: var(--primary-text);
+  --checkbox-checkmark-color: var(--neutral-inverse);
 }
 
 :root {
   --radio-button-size: 16px;
   --radio-button-container-border-radius: 999px;
   --radio-button-text: var(--primary-text);
-  --radio-button-container-background: var(--default-3);
-
-  --radio-button-border-color: var(--tertiary-text);
-  --radio-button-background: var(--neutral-inverse);
-  --radio-button-checked-background: var(--neutral-inverse);
-
-  --radio-button-inner-circle-color: var(--secondary-text);
+  --radio-button-border-color: var(--alpha-20);
+  --radio-button-border-color-hover: var(--alpha-30);
+  --radio-button-background: transparent;
+  --radio-button-checked-background: var(--primary-text);
+  --radio-button-inner-circle-size: 6px;
+  --radio-button-inner-circle-color: var(--neutral-inverse);
 }

package/assets/styles/styles.scss

@@ -1,4 +1,5 @@
 @use "./variables";
+@use "./link";
 @use "./badge";
 @use "./alert";
 @use "./button";
@@ -16,7 +17,7 @@ html {
   line-height: 1.4;
   font-size: 16px;
   -webkit-text-size-adjust: 100%;
-  background-color: var(--background-color);
+  background-color: var(--page-background-color);
 
   &.dark {
     color-scheme: dark;
@@ -33,13 +34,11 @@ body {
   font-size: 16px;
   font-weight: 400;
   color: var(--primary-text);
-  background-color: var(--background-color);
+  background-color: var(--page-background-color);
   font-synthesis: style;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-image: var(--page-background-image);
-  background-attachment: fixed;
 }
 
 p {