update typography and color tokens

Author: Filip Łukasik

scaladoc/resources/dotty_res/styles/color-tokens.css

@@ -5,6 +5,7 @@
   --text-primary: var(--grey12);
   --text-secondary: var(--grey11);
   --text-text-tertiary: var(--grey9);
+  --text-text-inverted: var(--grey1);
 
   /* icon */
   --icon-default: var(--grey11);
@@ -31,6 +32,19 @@
 
   --action-primary-border-default: var(--grey5);
 
+  /* semantic */
+  --semantic-content-grey: var(--grey11);
+  --semantic-content-sky: var(--sky11);
+  --semantic-content-grass: var(--grass11);
+  --semantic-content-yellow: var(--yellow11);
+  --semantic-content-red: var(--red11);
+
+  --semantic-background-grey: var(--grey3);
+  --semantic-background-sky: var(--sky3);
+  --semantic-background-grass: var(--grass3);
+  --semantic-background-yellow: var(--yellow3);
+  --semantic-background-red: var(--red3);
+
   /* code */
   --code-props-content: var(--red11);
   --code-props-background: var(--red3);
@@ -56,37 +70,16 @@
   --code-method-highlighting-keyword: var(--crimson11);
 
   /* api child */
-  --api-child-package-content: var(--yellow1);
   --api-child-package-background: var(--yellow11);
-
-  --api-child-class-content: var(--mint1);
   --api-child-class-background: var(--mint11);
-
-  --api-child-object-content: var(--indigo1);
   --api-child-object-background: var(--indigo11);
-
-  --api-child-trait-content: var(--sky1);
   --api-child-trait-background: var(--sky11);
-
-  --api-child-val-content: var(--lime1);
   --api-child-val-background: var(--lime11);
-
-  --api-child-def-content: var(--lime1);
   --api-child-def-background: var(--lime11);
-
-  --api-child-static-doc-content: var(--grey1);
   --api-child-static-doc-background: var(--grey11);
-
-  --api-child-given-content: var(--purple1);
   --api-child-given-background: var(--purple11);
-
-  --api-child-method-content: var(--indigo1);
   --api-child-method-background: var(--indigo11);
-
-  --api-child-enum-content: var(--orange1);
   --api-child-enum-background: var(--orange11);
-
-  --api-child-type-content: var(--crimson1);
   --api-child-type-background: var(--crimson11);
 }
 
@@ -97,6 +90,7 @@
   --text-primary: var(--grey12);
   --text-secondary: var(--grey11);
   --text-text-tertiary: var(--grey9);
+  --text-text-inverted: var(--grey1);
 
   /* icon */
   --icon-default: var(--grey11);
@@ -146,37 +140,29 @@
   --code-method-highlighting-link-sig-fig: var(--sky11);
   --code-method-highlighting-keyword: var(--crimson11);
 
+    /* semantic */
+    --semantic-content-grey: var(--grey11);
+    --semantic-content-sky: var(--sky11);
+    --semantic-content-grass: var(--grass11);
+    --semantic-content-yellow: var(--yellow11);
+    --semantic-content-red: var(--red11);
+
+    --semantic-background-grey: var(--grey4);
+    --semantic-background-sky: var(--sky4);
+    --semantic-background-grass: var(--grass4);
+    --semantic-background-yellow: var(--yellow4);
+    --semantic-background-red: var(--red4);
+
   /* api child */
-  --api-child-package-content: var(--yellow1);
   --api-child-package-background: var(--yellow11);
-
-  --api-child-class-content: var(--mint1);
   --api-child-class-background: var(--mint11);
-
-  --api-child-object-content: var(--indigo1);
   --api-child-object-background: var(--indigo11);
-
-  --api-child-trait-content: var(--sky1);
   --api-child-trait-background: var(--sky11);
-
-  --api-child-val-content: var(--lime1);
   --api-child-val-background: var(--lime11);
-
-  --api-child-def-content: var(--lime1);
   --api-child-def-background: var(--lime11);
-
-  --api-child-static-doc-content: var(--grey1);
   --api-child-static-doc-background: var(--grey11);
-
-  --api-child-given-content: var(--purple1);
   --api-child-given-background: var(--purple11);
-
-  --api-child-method-content: var(--indigo1);
   --api-child-method-background: var(--indigo11);
-
-  --api-child-enum-content: var(--orange1);
   --api-child-enum-background: var(--orange11);
-
-  --api-child-type-content: var(--crimson1);
   --api-child-type-background: var(--crimson11);
 }

scaladoc/resources/dotty_res/styles/typography.css

@@ -1,47 +1,83 @@
 h700 {
-  font-size: 52;
-  line-height: 64;
+  font-size: 52px;
+  line-height: 64px;
   font-weight: 500;
 }
 
 h600 {
-  font-size: 40;
-  line-height: 56;
+  font-size: 40px;
+  line-height: 56px;
   font-weight: 700;
 }
 
 h500 {
-  font-size: 32;
-  line-height: 40;
-  font-weight: medium;
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 500;
 }
 
 h400 {
-  font-size: 24;
-  line-height: 32;
+  font-size: 24px;
+  line-height: 32px;
   font-weight: 500;
 }
 
 h300 {
-  font-size: 20;
-  line-height: 24;
+  font-size: 20px;
+  line-height: 24px;
   font-weight: 700;
 }
 
 h200 {
-  font-size: 16;
-  line-height: 24;
+  font-size: 16px;
+  line-height: 24px;
   font-weight: 500;
 }
 
 h100 {
-  font-size: 13;
-  line-height: 16;
+  font-size: 13px;
+  line-height: 16px;
   font-weight: 500;
 }
 
 h50 {
-  font-size: 9;
-  line-height: 12;
+  font-size: 9px;
+  line-height: 12px;
   font-weight: 600;
 }
+
+.body-large {
+  font-size: 20px;
+  line-height: 24px;
+  font-weight: 400;
+}
+
+.body-medium {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+}
+
+.body-small {
+  font-size: 13px;
+  line-height: 16px;
+  font-weight: 400;
+}
+
+.mono-medium {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+}
+
+.mono-small-inline {
+  font-size: 13px;
+  line-height: 16px;
+  font-weight: 400;
+}
+
+.mono-small-block {
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 400;
+}