refactor(#194): made some changes on the font stylings

Author: sametcodes

lib/@dsvgui/components/article/index.tsx

@@ -32,7 +32,7 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
   const titleWidth =
     Math.max(
       ...articles.map((article) =>
-        getTextWidth(article.meta.title, { fontSize: 16, fontWeight: 700 })
+        getTextWidth(article.meta.title, { fontSize: 16, fontWeight: 500 })
       ),
       400
     ) + 20;
@@ -52,9 +52,9 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
 
           const title = wrapText(
             article.meta.title,
-            { maxLineWidth: titleWidth, fontSize: 16, fontWeight: 700 },
+            { maxLineWidth: titleWidth, fontSize: 16, fontWeight: 500 },
             (line: string, index: number) => (
-              <Text x={0} y={index * 25} option={{ size: 16, weight: 700 }}>
+              <Text x={0} y={index * 25} option={{ size: 16, weight: 500 }}>
                 {line}
               </Text>
             )
@@ -85,8 +85,9 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
                     (line: string, index) => (
                       <Text
                         x={0}
-                        y={20 + title.length + index * 13}
+                        y={17 + title.length + index * 13}
                         option={{ size: 12, weight: 500 }}
+                        className="subtitle"
                       >
                         {line}
                       </Text>

lib/@dsvgui/components/barstats/index.tsx

@@ -86,6 +86,7 @@ export const BarStats: React.FC<IBarStats> = ({
                           size: 14,
                           weight: 500,
                         }}
+                        className="subtitle"
                       >
                         {`${item.name} %${(
                           (item.value / totalValue) *

lib/@dsvgui/components/flock/index.tsx

@@ -35,7 +35,7 @@ export const Flock: React.FC<IFlock> = ({
   };
 
   const titleWidth = title
-    ? getTextWidth(title.trim(), { fontSize: titleFontSize, fontWeight: 700 })
+    ? getTextWidth(title.trim(), { fontSize: titleFontSize, fontWeight: 500 })
     : 0;
   const subtitleWidth = subtitle
     ? getTextWidth(subtitle.trim(), {

lib/@dsvgui/components/metrics/index.tsx

@@ -55,7 +55,7 @@ export const Metrics: React.FC<IMetrics> = ({ data, icon: Icon }) => {
               <Text x={xText} y={10} option="subtitle">
                 {item.title}
               </Text>
-              <Text x={xText} y={33.51} option={{ size: 22, weight: 700 }}>
+              <Text x={xText} y={33.51} option={{ size: 22, weight: 500 }}>
                 {item.value.toString()}
               </Text>
               {index !== 0 && (

lib/@dsvgui/document/branding.tsx

@@ -7,7 +7,13 @@ type IBranding = {
 
 export const Branding: React.FC<IBranding> = ({ x, y }) => {
   return (
-    <Text x={x} y={y} option={{ size: 8, weight: 500 }}>
+    <Text
+      x={x}
+      y={y}
+      option={{ size: 8, weight: 500 }}
+      id="dsvguibranding"
+      className="text"
+    >
       readme.rocks
     </Text>
   );

lib/@dsvgui/document/style.tsx

@@ -3,8 +3,8 @@ export const Style: React.FC = () => {
     <defs>
       <style>{`
             .websafe{ font-family: Tahoma, Verdana, sans-serif }
-            .text{ fill: #32373e;}
-            .text.subtitle{ fill: #5c5c5c; }
+            .text{ fill: #22272e;}
+            .text.subtitle{ fill: #6c6c6c; }
 
             .dsvgui-container{ fill: #fbfbfb; }
             stop[offset='0']{ stop-color: #fbfbfb; }

lib/@dsvgui/document/text.tsx

@@ -14,12 +14,14 @@ type IText = {
   option: IFontType | IFontOptions;
   children: string | number | undefined;
   as?: "path" | "text";
+  className?: string;
+  id?: string;
 };
 
 const onHandFonts = {
   title: {
     size: 22,
-    weight: 700,
+    weight: 500,
   },
   subtitle: {
     size: 16,
@@ -33,6 +35,8 @@ export const Text: React.FC<IText> = ({
   option,
   children,
   as = "text",
+  className = " ",
+  id,
 }) => {
   if (!children) return <></>;
   const defaultFontFamily = defaultFont;
@@ -47,18 +51,19 @@ export const Text: React.FC<IText> = ({
   if (typeof x === "function")
     x = x(openTypeFont.getAdvanceWidth(children.toString(), font.size));
 
-  const classNames = ["text"];
+  const classNames = ["text", className];
   if (typeof option === "string") classNames.push(option);
 
   if (as === "path") {
     const path = openTypeFont.getPath(children.toString(), x, y, font.size);
     const pathSVG = path.toPathData(1);
 
-    return <path className={classNames.join(" ")} d={pathSVG} />;
+    return <path id={id} className={classNames.join(" ")} d={pathSVG} />;
   } else {
     classNames.push("websafe");
     return (
       <text
+        id={id}
         x={x}
         y={y}
         className={classNames.join(" ")}