feat(foundation): add heading and text css classes (#26)

Co-authored-by: Fabian Gaukler <[email protected]> Co-authored-by: Lukas Taake <[email protected]> Co-authored-by: Christoph Fricke <[email protected]>
holisticon · Aug 16, 2024 · 3f1ce66 · 3f1ce66
1 parent 46ec2a2
commit 3f1ce66
Show file tree

Hide file tree

Showing 15 changed files with 336 additions and 37 deletions.
diff --git a/.changeset/rotten-candles-cover.md b/.changeset/rotten-candles-cover.md
@@ -0,0 +1,11 @@
+---
+"@holisticon/atomic-playfulness-foundation": minor
+---
+
+Added typography tokens and classes for defining heading and texts.
+
+```html
+<h2 class="hap-h1">A heading text</h2>
+<p class="hap-text">Some content text</p>
+<span class="hap-text-small">A small hint</span>
+```
diff --git a/README.md b/README.md
@@ -1 +1,28 @@
-<h1 align="center">Atomic Playfulness</h1>
+# Atomic Playfulness
+
+Holisticon Atomic Playfulness (HAP), the design system built by and for
+applications built by Holisticon.
+
+This readme is intended for developers who want to contribute to or understand
+how this library is built. If you want to use it in your application, see the
+documentation in Storybook.
+
+## Install
+
+```shell
+npm install
+```
+
+## Storybook
+
+To run Storybook locally, run:
+
+```shell
+npm run build
+npm run dev -w @holisticon/atomic-playfulness-documentation
+```
+
+# License
+
+Atomic Playfulness is created for Holisticon AG and only intended to be used by
+Holisticon and its projects.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/documentation/.storybook/Typography.tsx b/packages/documentation/.storybook/Typography.tsx
@@ -0,0 +1,71 @@
+import React, { type FC, Fragment } from "react";
+
+import { withReset } from "@storybook/components";
+
+import type { Theme } from "@storybook/theming";
+import { styled } from "@storybook/theming";
+import { transparentize } from "polished";
+
+/*
+ * This component is copied from `@storybook/blocks` and slightly modified
+ * to accept CSS class names rather than only varying font sizes.
+ */
+
+const getBlockBackgroundStyle: (theme: Theme) => object = (theme: Theme) => ({
+  borderRadius: theme.appBorderRadius,
+  background: theme.background.content,
+  boxShadow:
+    theme["base"] === "light"
+      ? "rgba(0, 0, 0, 0.10) 0 1px 3px 0"
+      : "rgba(0, 0, 0, 0.20) 0 2px 5px 0",
+  border: `1px solid ${theme.appBorderColor}`,
+});
+const Label = styled.div(({ theme }) => ({
+  fontSize: `${theme.typography.size.s1}px`,
+  color:
+    theme["base"] === "light"
+      ? transparentize(0.4, theme.color.defaultText)
+      : transparentize(0.6, theme.color.defaultText),
+}));
+
+const Sample = styled.div({
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+});
+
+const Wrapper = styled.div(withReset, ({ theme }) => ({
+  ...getBlockBackgroundStyle(theme),
+  margin: "25px 0 40px",
+  padding: "30px 20px",
+  display: "grid",
+  gridTemplateColumns: "max-content auto",
+  gridGap: "1rem 2rem",
+  alignItems: "baseline",
+}));
+
+export interface TypesetProps {
+  sampleText?: string;
+  fontClasses: string[];
+}
+
+/**
+ * Convenient styleguide documentation showing examples of type with different sizes and weights and
+ * configurable sample text.
+ */
+export const Typography: FC<TypesetProps> = ({
+  sampleText,
+  fontClasses,
+  ...props
+}) => (
+  <Wrapper {...props} className="docblock-typeset sb-unstyled">
+    {fontClasses.map((className) => (
+      <Fragment key={className}>
+        <Label>.{className}</Label>
+        <Sample className={className}>
+          {sampleText || "Was he a beast if music could move him so?"}
+        </Sample>
+      </Fragment>
+    ))}
+  </Wrapper>
+);
diff --git a/packages/documentation/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts
@@ -1,4 +1,4 @@
-import "@holisticon/atomic-playfulness-foundation/tokens.css";
+import "@holisticon/atomic-playfulness-foundation/atomic-playfulness.css";
 import type { Preview } from "@storybook/web-components";
 import { holisticonTheme } from "./theme.js";
 

diff --git a/packages/documentation/src/design-tokens/color.mdx b/packages/documentation/src/design-tokens/color.mdx
@@ -3,7 +3,7 @@ import { ColorPalette, ColorItem } from "@storybook/blocks";
 # Color Tokens
 
 The following color tokens are available as CSS custom properties. In each
-palette, the `500` variant is considered a primary color. An exeption is
+palette, the `500` variant is considered a primary color. An exception is
 `forest-green-700`, which is also a primary color that is used as a text color.
 
 <ColorPalette>

diff --git a/packages/documentation/src/foundation/typography.mdx b/packages/documentation/src/foundation/typography.mdx
@@ -0,0 +1,32 @@
+import { Typography } from "../../.storybook/Typography";
+
+# Typography
+
+Atomic Playfulness uses the
+[ES Klarheit Kurrent](https://extraset.ch/typefaces/klarheit-kurrent/) and
+[ES Klarheit Grotesk](https://extraset.ch/typefaces/klarheit-grotesk/) from
+Extraset. They have been licensed for usage by Holisticon but must not be used
+by other parties unlicensed.
+
+Typography styles are provided noninvasive as CSS classes, so they don't
+interfere with 3rd Party libraries that might be used in addition to Atomic
+Playfulness.
+
+## Headings
+
+Headings use the ES Klarheit Kurrent. The following heading styles are provided:
+
+<Typography
+  sampleText="The quick brown fox jumps over the lazy dog"
+  fontClasses={["hap-h1", "hap-h2", "hap-h3", "hap-h4", "hap-h5", "hap-h6"]}
+></Typography>
+
+## Body Text
+
+For regular body text, ES Klarheit Grotesk is used. The following styles are
+provided:
+
+<Typography
+  sampleText="The quick brown fox jumps over the lazy dog"
+  fontClasses={["hap-text-large", "hap-text", "hap-text-small"]}
+></Typography>
diff --git a/packages/documentation/src/introduction/getting-started.mdx b/packages/documentation/src/introduction/getting-started.mdx
@@ -8,6 +8,15 @@ Welcome to the documetion of the Atomic Playfulness design system.
 npm i @holisticon/atomic-playfulness-foundation
 ```
 
+## Usage
+
+To get access to the Atomic Playfulness design tokens, fonts, and css-class
+elements, you can import its main CSS entrypoint in your application.
+
+```js
+import "@holisticon/atomic-playfulness-foundation/atomic-playfulness.css";
+```
+
 ## Other Resources
 
 - [Holisticon Brand Guidelines](https://app.pickit.com/#/brand/651e97545bd7827ee80caff0)

diff --git a/packages/foundation/atomic-playfulness.tokens.json b/packages/foundation/atomic-playfulness.tokens.json
@@ -15,22 +15,112 @@
     "xxxLarge": { "$value": "4rem" }
   },
   "font": {
+    "family": {
+      "$type": "fontFamily",
+
+      "kurrent": {
+        "$value": ["ES Klarheit Kurrent", "Helvetica", "Arial", "sans-serif"]
+      },
+      "grotesk": {
+        "$value": ["ES Klarheit Grotesk", "Helvetica", "Arial", "sans-serif"]
+      }
+    },
     "weight": {
       "$type": "fontWeight",
 
       "regular": { "$value": 400 },
       "medium": { "$value": 500 },
       "bold": { "$value": 700 }
-    },
-    "size": {
-      "$type": "dimension",
-
-      "small": { "$value": "0.875rem" },
-      "standard": { "$value": "1rem" },
-      "large": { "$value": "1.125rem" },
-      "xLarge": { "$value": "1.5rem" },
-      "xxLarge": { "$value": "2rem" },
-      "xxxLarge": { "$value": "2.5rem" }
+    }
+  },
+  "h1": {
+    "$type": "typography",
+    "$value": {
+      "fontFamily": "{font.family.kurrent}",
+      "fontSize": "2.5rem",
+      "fontWeight": "{font.weight.regular}",
+      "letterSpacing": "normal",
+      "lineHeight": 1.4
+    }
+  },
+  "h2": {
+    "$type": "typography",
+    "$value": {
+      "fontFamily": "{font.family.kurrent}",
+      "fontSize": "2rem",
+      "fontWeight": "{font.weight.regular}",
+      "letterSpacing": "normal",
+      "lineHeight": 1.4
+    }
+  },
+  "h3": {
+    "$type": "typography",
+    "$value": {
+      "fontFamily": "{font.family.kurrent}",
+      "fontSize": "1.625rem",
+      "fontWeight": "{font.weight.regular}",
+      "letterSpacing": "normal",
+      "lineHeight": 1.4
+    }
+  },
+  "h4": {
+    "$type": "typography",
+    "$value": {
+      "fontFamily": "{font.family.kurrent}",
+      "fontSize": "1.375rem",
+      "fontWeight": "{font.weight.medium}",
+      "letterSpacing": "normal",
+      "lineHeight": 1.4
+    }
+  },
+  "h5": {
+    "$type": "typography",
+    "$value": {
+      "fontFamily": "{font.family.kurrent}",
+      "fontSize": "1.25rem",
+      "fontWeight": "{font.weight.bold}",
+      "letterSpacing": "normal",
+      "lineHeight": 1.4
+    }
+  },
+  "h6": {
+    "$type": "typography",
+    "$value": {
+      "fontFamily": "{font.family.kurrent}",
+      "fontSize": "1.125rem",
+      "fontWeight": "{font.weight.bold}",
+      "letterSpacing": "normal",
+      "lineHeight": 1.4
+    }
+  },
+  "text-large": {
+    "$type": "typography",
+    "$value": {
+      "fontFamily": "{font.family.grotesk}",
+      "fontSize": "1.125rem",
+      "fontWeight": "{font.weight.regular}",
+      "letterSpacing": "normal",
+      "lineHeight": 1.4
+    }
+  },
+  "text": {
+    "$type": "typography",
+    "$value": {
+      "fontFamily": "{font.family.grotesk}",
+      "fontSize": "1rem",
+      "fontWeight": "{font.weight.regular}",
+      "letterSpacing": "normal",
+      "lineHeight": 1.4
+    }
+  },
+  "text-small": {
+    "$type": "typography",
+    "$value": {
+      "fontFamily": "{font.family.grotesk}",
+      "fontSize": "0.875rem",
+      "fontWeight": "{font.weight.regular}",
+      "letterSpacing": "normal",
+      "lineHeight": 1.4
     }
   },
   "color": {

diff --git a/packages/foundation/package.json b/packages/foundation/package.json
@@ -13,11 +13,7 @@
   ],
   "exports": {
     "./atomic-playfulness.tokens.json": "./atomic-playfulness.tokens.json",
-    "./tokens.css": "./dist/tokens.css",
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    }
+    "./atomic-playfulness.css": "./src/atomic-playfulness.css"
   },
   "scripts": {
     "build": "co build",
@@ -26,7 +22,6 @@
   },
   "devDependencies": {
     "@cobalt-ui/cli": "^1.11.2",
-    "@cobalt-ui/plugin-css": "^1.7.4",
-    "@cobalt-ui/plugin-js": "^1.4.4"
+    "@cobalt-ui/plugin-css": "^1.7.4"
   }
 }
diff --git a/packages/foundation/src/atomic-playfulness.css b/packages/foundation/src/atomic-playfulness.css
@@ -0,0 +1,3 @@
+@import "../dist/tokens.css";
+@import "./es-klarheit.css";
+@import "./elements/typography.css";