add base font size node (#92)

* add base font size node * move correction factor to inputs * add changeset --------- Co-authored-by: SorsOps <[email protected]>
tokens-studio · Sep 29, 2023 · 3a38bfe · 3a38bfe
1 parent 483466e
commit 3a38bfe
Show file tree

Hide file tree

Showing 7 changed files with 135 additions and 2 deletions.
diff --git a/.changeset/loud-pillows-run.md b/.changeset/loud-pillows-run.md
@@ -0,0 +1,6 @@
+---
+"@tokens-studio/graph-editor": minor
+"@tokens-studio/graph-engine": minor
+---
+
+Adds a base font node based on german DIN 1450 and calculates the min required font size for readability
diff --git a/packages/graph-editor/src/components/flow/DropPanel/PanelItems.tsx b/packages/graph-editor/src/components/flow/DropPanel/PanelItems.tsx
@@ -411,6 +411,11 @@ export const items = {
       icon: <EyeNoneIcon />,
       text: 'Color Blindness',
     },
+    {
+      type: NodeTypes.BASE_FONT_SIZE,
+      icon: 'Aa',
+      text: 'Base Font Size',
+    },
   ],
   series: [
     {

diff --git a/packages/graph-editor/src/components/flow/nodes/accessibility/baseFontSizeNode.tsx b/packages/graph-editor/src/components/flow/nodes/accessibility/baseFontSizeNode.tsx
@@ -0,0 +1,58 @@
+// ui
+import { Stack, Text } from '@tokens-studio/ui';
+import { Handle, HandleContainer } from '../../../../components/flow/handles.tsx';
+import { WrapNode, useNode } from '../../wrapper/nodeV2.tsx';
+import { node } from '@tokens-studio/graph-engine/nodes/accessibility/baseFontSize.js';
+import PreviewNumber from '../../preview/number.tsx';
+import React from 'react';
+
+const BaseFontSizeNode = (props) => {
+    const { input, output, state, setState } = useNode();
+
+    return (
+        <Stack direction="row" gap={4}>
+            <HandleContainer type="target">
+                <Handle id="visualAcuity">
+                    <Text>Visual Acuity</Text>
+                    <PreviewNumber value={input.visualAcuity} />
+                </Handle>
+                <Handle id="lightingCondition">
+                    <Text>Lighting Condition</Text>
+                    <PreviewNumber value={input.lightingCondition} />
+                </Handle>
+                <Handle id="distance">
+                    <Text>Distance</Text>
+                    <PreviewNumber value={input.distance} />
+                </Handle>
+                <Handle id="xHeightRatio">
+                    <Text>X-Height Ratio</Text>
+                    <PreviewNumber value={input.xHeightRatio} />
+                </Handle>
+                <Handle id="ppi">
+                    <Text>PPI</Text>
+                    <PreviewNumber value={input.ppi} />
+                </Handle>
+                <Handle id="pixelDensity">
+                    <Text>Pixel Density</Text>
+                    <PreviewNumber value={input.pixelDensity} />
+                </Handle>
+                <Handle id="correctionFactor">
+                    <Text>Correction Factor</Text>
+                    <PreviewNumber value={input.correctionFactor} />
+                </Handle>
+            </HandleContainer>
+
+            <HandleContainer type="source">
+                <Handle id="output">
+                    <Text>Font Size:</Text>
+                    <PreviewNumber value={output?.fontSizePX} />
+                </Handle>
+            </HandleContainer>
+        </Stack>
+    );
+};
+
+export default WrapNode(BaseFontSizeNode, {
+    ...node,
+    title: 'Base Font Size',
+});
diff --git a/packages/graph-editor/src/components/flow/nodes/index.ts b/packages/graph-editor/src/components/flow/nodes/index.ts
@@ -66,10 +66,10 @@ import concat from './array/concat.tsx';
 import ExternalSetNode from './sets/ExternalSetNode.tsx';
 import selectToken from './sets/selectToken.tsx';
 import PolineNode from './color/polineNode.tsx';
+import baseFontSizeNode from './accessibility/baseFontSizeNode.tsx';
 import colorDistanceNode from './color/colorDistanceNode.tsx';
 import fluidNode from './math/fluidNode.tsx';
 
-
 const processTypes = (types: WrappedNodeDefinition[]) => {
   const nodeTypes = types.reduce((acc, type) => {
     acc[type.type] = type.component;
@@ -154,6 +154,7 @@ export const { nodeTypes, stateInitializer } = processTypes([
   concat,
   ExternalSetNode,
   PolineNode,
+  baseFontSizeNode,
   colorDistanceNode,
   fluidNode,
   selectToken

diff --git a/packages/graph-engine/src/nodes/accessibility/baseFontSize.ts b/packages/graph-engine/src/nodes/accessibility/baseFontSize.ts
@@ -0,0 +1,61 @@
+// node
+/**
+ * Calculates the base font size
+ *
+ * @packageDocumentation
+ */
+
+import { NodeDefinition, NodeTypes } from "../../types.js";
+
+const type = NodeTypes.BASE_FONT_SIZE;
+
+type Inputs = {
+    visualAcuity: number;
+    lightingCondition: number;
+    distance: number;
+    xHeightRatio: number;
+    ppi: number;
+    pixelDensity: number;
+    correctionFactor: number;
+};
+
+const defaults = {
+    correctionFactor: 13,
+    visualAcuity: 0.7,
+    lightingCondition: 0.85,
+    distance: 30,
+    xHeightRatio: 0.53,
+    ppi: 458,
+    pixelDensity: 3
+};
+
+const process = (input: Inputs, state) => {
+    const {
+        visualAcuity,
+        lightingCondition,
+        distance,
+        xHeightRatio,
+        ppi,
+        pixelDensity,
+        correctionFactor
+    } = input;
+
+    const visualCorrection = correctionFactor * (lightingCondition / visualAcuity);
+    const xHeightMM = Math.tan(visualCorrection * Math.PI / 21600) * (distance * 10) * 2;
+    const xHeightPX = (xHeightMM / 25.4) * (ppi / pixelDensity);
+    const fontSizePT = 2.83465 * xHeightMM * 1 / xHeightRatio;
+    const fontSizePX = 1 * xHeightPX / xHeightRatio;
+
+    return { fontSizePX };
+};
+
+export const mapOutput = (input, state, processed) => {
+    return processed;
+};
+
+export const node: NodeDefinition<Inputs> = {
+    type,
+    defaults,
+    process,
+    mapOutput
+};
diff --git a/packages/graph-engine/src/nodes/accessibility/index.ts b/packages/graph-engine/src/nodes/accessibility/index.ts
@@ -1,4 +1,5 @@
 import { node as colorBlindness } from "./colorBlindness.js";
 import { node as contrast } from "./contrast.js";
+import { node as baseFontSize } from "./baseFontSize.js";
 
-export const nodes = [contrast, colorBlindness];
+export const nodes = [contrast, colorBlindness, baseFontSize];
diff --git a/packages/graph-engine/src/types.ts b/packages/graph-engine/src/types.ts
@@ -155,4 +155,5 @@ export enum NodeTypes {
   //Accessibility
   CONTRAST = "studio.tokens.accessibility.contrast",
   COLOR_BLINDNESS = "studio.tokens.accessibility.colorBlindness",
+  BASE_FONT_SIZE = "studio.tokens.accessibility.baseFontSize",
 }