Merge pull request #11 from pikinier20/scaladoc/typography-and-color-tokens-implementation

typography and color tokens implementation

Author: fanixus96

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

@@ -0,0 +1,168 @@
+:root {
+  /* Light Mode */
+
+  /* text */
+  --text-primary: var(--grey12);
+  --text-secondary: var(--grey11);
+  --text-text-tertiary: var(--grey9);
+  --text-text-inverted: var(--grey1);
+
+  /* icon */
+  --icon-default: var(--grey11);
+
+  /* border */
+  --border-default: var(--grey5);
+  --border-background-color: var(--grey1);
+
+  /* background */
+  --background-default: var(--grey1);
+  --background-neutral: var(--grey2);
+
+  /* action */
+  --action-primary-content-default: var(--grey11);
+  --action-primary-content-hover: var(--grey12);
+  --action-primary-content-active: var(--grey12);
+  --action-primary-content-selected: var(--grey12);
+
+  --action-primary-background-default-ghost: transparent;
+  --action-primary-background-default-solid: var(--grey2);
+  --action-primary-background-hover: var(--grey3);
+  --action-primary-background-active: var(--grey3);
+  --action-primary-background-selected: var(--grey4);
+
+  --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);
+
+  --code-syntax-highlighting-comment: var(--grey11);
+  --code-syntax-highlighting-quote: var(--grey11);
+  --code-syntax-highlighting-line-number: var(--grey8);
+  --code-syntax-highlighting-title: var(--mint11);
+  --code-syntax-highlighting-keyword: var(--indigo11);
+  --code-syntax-highlighting-code-fg: var(--grey12);
+  --code-syntax-highlighting-literal: var(--crimson11);
+  --code-syntax-highlighting-type: var(--grass9);
+  --code-syntax-highlighting-subst: var(--yellow11);
+  --code-syntax-highlighting-meta: var(--yellow11);
+  --code-syntax-highlighting-string: var(--lime9);
+  --code-syntax-highlighting-deletion: var(--purple9);
+  --code-syntax-highlighting-variable: var(--purple9);
+
+  --code-method-highlighting-type: var(--purple9);
+  --code-method-highlighting-type-link: var(--sky11);
+  --code-method-highlighting-code-fg: var(--grey12);
+  --code-method-highlighting-link-sig-fig: var(--sky11);
+  --code-method-highlighting-keyword: var(--crimson11);
+
+  /* api child */
+  --api-child-package-background: var(--yellow11);
+  --api-child-class-background: var(--mint11);
+  --api-child-object-background: var(--indigo11);
+  --api-child-trait-background: var(--sky11);
+  --api-child-val-background: var(--lime11);
+  --api-child-def-background: var(--lime11);
+  --api-child-static-doc-background: var(--grey11);
+  --api-child-given-background: var(--purple11);
+  --api-child-method-background: var(--indigo11);
+  --api-child-enum-background: var(--orange11);
+  --api-child-type-background: var(--crimson11);
+}
+
+:root {
+  /* Dark Mode */
+
+  /* text */
+  --text-primary: var(--grey12);
+  --text-secondary: var(--grey11);
+  --text-text-tertiary: var(--grey9);
+  --text-text-inverted: var(--grey1);
+
+  /* icon */
+  --icon-default: var(--grey11);
+
+  /* border */
+  --border-default: var(--grey6);
+  --border-background-color: var(--grey1);
+
+  /* background */
+  --background-default: var(--grey1);
+  --background-neutral: var(--grey3);
+
+  /* action */
+  --action-primary-content-default: var(--grey11);
+  --action-primary-content-hover: var(--grey12);
+  --action-primary-content-active: var(--grey12);
+  --action-primary-content-selected: var(--grey12);
+
+  --action-primary-background-default-ghost: transparent;
+  --action-primary-background-default-solid: var(--grey3);
+  --action-primary-background-hover: var(--grey4);
+  --action-primary-background-active: var(--grey4);
+  --action-primary-background-selected: var(--grey5);
+  --action-primary-border-default: var(--grey6);
+
+  /* code */
+  --code-props-content: var(--red11);
+  --code-props-background: var(--red3);
+
+  --code-syntax-highlighting-comment: var(--grey11);
+  --code-syntax-highlighting-quote: var(--grey11);
+  --code-syntax-highlighting-line-number: var(--grey8);
+  --code-syntax-highlighting-title: var(--mint11);
+  --code-syntax-highlighting-keyword: var(--indigo11);
+  --code-syntax-highlighting-code-fg: var(--grey12);
+  --code-syntax-highlighting-literal: var(--crimson11);
+  --code-syntax-highlighting-type: var(--grass9);
+  --code-syntax-highlighting-subst: var(--yellow11);
+  --code-syntax-highlighting-meta: var(--yellow11);
+  --code-syntax-highlighting-string: var(--lime9);
+  --code-syntax-highlighting-deletion: var(--purple9);
+  --code-syntax-highlighting-variable: var(--purple9);
+
+  --code-method-highlighting-type: var(--purple9);
+  --code-method-highlighting-type-link: var(--sky11);
+  --code-method-highlighting-code-fg: var(--grey12);
+  --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-background: var(--yellow11);
+  --api-child-class-background: var(--mint11);
+  --api-child-object-background: var(--indigo11);
+  --api-child-trait-background: var(--sky11);
+  --api-child-val-background: var(--lime11);
+  --api-child-def-background: var(--lime11);
+  --api-child-static-doc-background: var(--grey11);
+  --api-child-given-background: var(--purple11);
+  --api-child-method-background: var(--indigo11);
+  --api-child-enum-background: var(--orange11);
+  --api-child-type-background: var(--crimson11);
+}

scaladoc/resources/dotty_res/styles/typography.css

@@ -0,0 +1,83 @@
+.h700 {
+  font-size: 52px;
+  line-height: 64px;
+  font-weight: 500;
+}
+
+.h600 {
+  font-size: 40px;
+  line-height: 56px;
+  font-weight: 700;
+}
+
+.h500 {
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 500;
+}
+
+.h400 {
+  font-size: 24px;
+  line-height: 32px;
+  font-weight: 500;
+}
+
+.h300 {
+  font-size: 20px;
+  line-height: 24px;
+  font-weight: 700;
+}
+
+.h200 {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+}
+
+.h100 {
+  font-size: 13px;
+  line-height: 16px;
+  font-weight: 500;
+}
+
+.h50 {
+  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;
+}