fix: update font sizes and line heights + rename story component cate…

…gories (#210)
mittwald · Mar 7, 2024 · abbc424 · abbc424 · github-actions · Mar 7, 2024
1 parent 67bebdf
commit abbc424
Show file tree

Hide file tree

Showing 29 changed files with 46 additions and 36 deletions.
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -11,7 +11,6 @@
     "./Button": "./dist/Button.js",
     "./Checkbox": "./dist/Checkbox.js",
     "./Content": "./dist/Content.js",
-    "./LayoutCard": "./dist/LayoutCard.js",
     "./CopyToClipboardButton": "./dist/CopyToClipboardButton.js",
     "./FieldDescription": "./dist/FieldDescription.js",
     "./FieldError": "./dist/FieldError.js",
@@ -23,6 +22,7 @@
     "./InlineAlert": "./dist/InlineAlert.js",
     "./Label": "./dist/Label.js",
     "./LabeledValue": "./dist/LabeledValue.js",
+    "./LayoutCard": "./dist/LayoutCard.js",
     "./Link": "./dist/Link.js",
     "./Navigation": "./dist/Navigation.js",
     "./NumberField": "./dist/NumberField.js",

diff --git a/packages/components/src/components/Badge/Badge.module.scss b/packages/components/src/components/Badge/Badge.module.scss
@@ -4,7 +4,6 @@
   padding-block: var(--badge--padding-y);
   padding-inline: var(--badge--padding-x);
   height: var(--badge--height);
-  line-height: var(--size-rem--m);
   display: inline-grid;
   grid-template-areas: "icon content";
   grid-template-columns: auto 1fr;

diff --git a/packages/components/src/components/Button/Button.module.scss b/packages/components/src/components/Button/Button.module.scss
@@ -47,12 +47,12 @@
 }
 
 .size-s {
-  font-size: var(--button--font-size-small);
-  padding-block: var(--button--padding-small-squished-y);
-  padding-inline: var(--button--padding-small-squished-x);
+  font-size: var(--button--font-size-s);
+  padding-block: var(--button--padding-s-squished-y);
+  padding-inline: var(--button--padding-s-squished-x);
 
   &:has(.icon) {
-    padding: var(--button--padding-small);
+    padding: var(--button--padding-s);
   }
 }
 

diff --git a/packages/components/src/components/Button/stories/Default.stories.tsx b/packages/components/src/components/Button/stories/Default.stories.tsx
@@ -5,7 +5,7 @@ import { IconPlus } from "@/components/Icon/components/icons";
 import { action } from "@storybook/addon-actions";
 
 const meta: Meta<typeof Button> = {
-  title: "Buttons/Button",
+  title: "Actions/Button",
   component: Button,
   args: {
     onPress: action("onPress"),

diff --git a/packages/components/src/components/Button/stories/EdgeCases.stories.tsx b/packages/components/src/components/Button/stories/EdgeCases.stories.tsx
@@ -6,7 +6,7 @@ import defaultMeta from "./Default.stories";
 
 const meta: Meta<typeof Button> = {
   ...defaultMeta,
-  title: "Buttons/Button/Edge Cases",
+  title: "Actions/Button/Edge Cases",
 };
 export default meta;
 

diff --git a/packages/components/src/components/Button/stories/States.stories.tsx b/packages/components/src/components/Button/stories/States.stories.tsx
@@ -6,7 +6,7 @@ import React from "react";
 
 const meta: Meta<typeof Button> = {
   ...defaultMeta,
-  title: "Buttons/Button/States",
+  title: "Actions/Button/States",
 };
 export default meta;
 

diff --git a/packages/components/src/components/Button/stories/Variants.stories.tsx b/packages/components/src/components/Button/stories/Variants.stories.tsx
@@ -5,7 +5,7 @@ import React from "react";
 
 const meta: Meta<typeof Button> = {
   ...defaultMeta,
-  title: "Buttons/Button/Variants",
+  title: "Actions/Button/Variants",
 };
 
 export default meta;

diff --git a/packages/components/src/components/Checkbox/stories/Default.stories.tsx b/packages/components/src/components/Checkbox/stories/Default.stories.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import { action } from "@storybook/addon-actions";
 
 const meta: Meta<typeof Checkbox> = {
-  title: "Forms/Checkbox",
+  title: "Form Controls/Checkbox",
   component: Checkbox,
   args: {
     onChange: action("onChange"),

diff --git a/packages/components/src/components/Checkbox/stories/EdgeCases.stories.tsx b/packages/components/src/components/Checkbox/stories/EdgeCases.stories.tsx
@@ -5,7 +5,7 @@ import defaultMeta from "./Default.stories";
 import { dummyText } from "@/lib/dev/dummyText";
 
 const meta: Meta<typeof Checkbox> = {
-  title: "Forms/Checkbox/Edge Cases",
+  title: "Form Controls/Checkbox/Edge Cases",
   ...defaultMeta,
 };
 

diff --git a/packages/components/src/components/CopyToClipboardButton/stories/Default.stories.tsx b/packages/components/src/components/CopyToClipboardButton/stories/Default.stories.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { CopyToClipboardButton } from "../CopyToClipboardButton";
 
 const meta: Meta<typeof CopyToClipboardButton> = {
-  title: "Buttons/CopyToClipboardButton",
+  title: "Actions/CopyToClipboardButton",
   component: CopyToClipboardButton,
   render: (props) => <CopyToClipboardButton {...props} />,
   args: {

diff --git a/packages/components/src/components/Heading/Heading.module.scss b/packages/components/src/components/Heading/Heading.module.scss
@@ -15,3 +15,9 @@
 @include level(4);
 @include level(5);
 @include level(6);
+
+@media (max-width: 550px) {
+  h1 {
+    font-size: var(--heading--h1-font-size-mobile);
+  }
+}
diff --git a/packages/components/src/components/InlineAlert/InlineAlert.module.scss b/packages/components/src/components/InlineAlert/InlineAlert.module.scss
@@ -32,7 +32,6 @@
 
 .heading {
   grid-area: heading;
-  font-size: var(--inline-alert--heading-font-size);
 }
 
 .content {

diff --git a/packages/components/src/components/Label/Label.module.scss b/packages/components/src/components/Label/Label.module.scss
@@ -1,5 +1,5 @@
 .label {
-  color: var(--label--color);
+  color: var(--label--color--default);
   font-size: var(--label--font-size);
   font-weight: var(--label--font-weight);
 }
diff --git a/packages/components/src/components/Link/Link.module.scss b/packages/components/src/components/Link/Link.module.scss
@@ -1,5 +1,6 @@
 .link {
   font-size: var(--link--font-size);
+  line-height: var(--link--line-height);
   font-weight: var(--link--font-weight);
   transition-property: color;
   transition-duration: var(--transition--duration--default);

diff --git a/packages/components/src/components/NumberField/stories/Default.stories.tsx b/packages/components/src/components/NumberField/stories/Default.stories.tsx
@@ -7,7 +7,7 @@ import FieldDescription from "@/components/FieldDescription/FieldDescription";
 import { FieldError } from "@/components/FieldError";
 
 const meta: Meta<typeof NumberField> = {
-  title: "Forms/NumberField",
+  title: "Form Controls/NumberField",
   component: NumberField,
   render: (props) => (
     <NumberField onChange={action("onChange")} {...props}>

diff --git a/packages/components/src/components/NumberField/stories/EdgeCases.stories.tsx b/packages/components/src/components/NumberField/stories/EdgeCases.stories.tsx
@@ -5,7 +5,7 @@ import { Label } from "@/components/Label";
 import { action } from "@storybook/addon-actions";
 
 const meta: Meta<typeof NumberField> = {
-  title: "Forms/NumberField/Edge Cases",
+  title: "Form Controls/NumberField/Edge Cases",
   component: NumberField,
   render: (props) => (
     <NumberField onChange={action("onChange")} {...props}>

diff --git a/packages/components/src/components/RadioGroup/stories/Default.stories.tsx b/packages/components/src/components/RadioGroup/stories/Default.stories.tsx
@@ -9,7 +9,7 @@ import { action } from "@storybook/addon-actions";
 import { FieldError } from "@/components/FieldError";
 
 const meta: Meta<typeof RadioGroup> = {
-  title: "Forms/RadioGroup",
+  title: "Form Controls/RadioGroup",
   component: RadioGroup,
   args: {
     onChange: action("onChange"),

diff --git a/packages/components/src/components/RadioGroup/stories/EdgeCases.stories.tsx b/packages/components/src/components/RadioGroup/stories/EdgeCases.stories.tsx
@@ -8,7 +8,7 @@ import { dummyText } from "@/lib/dev/dummyText";
 import defaultMeta from "./Default.stories";
 
 const meta: Meta<typeof RadioGroup> = {
-  title: "Forms/RadioGroup/Edge Cases",
+  title: "Form Controls/RadioGroup/Edge Cases",
   ...defaultMeta,
 };
 

diff --git a/packages/components/src/components/Switch/stories/Default.stories.tsx b/packages/components/src/components/Switch/stories/Default.stories.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import { action } from "@storybook/addon-actions";
 
 const meta: Meta<typeof Switch> = {
-  title: "Forms/Switch",
+  title: "Form Controls/Switch",
   component: Switch,
   args: {
     onChange: action("onChange"),

diff --git a/packages/components/src/components/Switch/stories/EdgeCases.stories.tsx b/packages/components/src/components/Switch/stories/EdgeCases.stories.tsx
@@ -6,7 +6,7 @@ import defaultMeta from "./Default.stories";
 
 const meta: Meta<typeof Switch> = {
   ...defaultMeta,
-  title: "Forms/Switch/Edge Cases",
+  title: "Form Controls/Switch/Edge Cases",
 };
 
 export default meta;

diff --git a/packages/components/src/components/Switch/stories/Variants.stories.tsx b/packages/components/src/components/Switch/stories/Variants.stories.tsx
@@ -4,7 +4,7 @@ import defaultMeta from "./Default.stories";
 
 const meta: Meta<typeof Switch> = {
   ...defaultMeta,
-  title: "Forms/Switch/Variants",
+  title: "Form Controls/Switch/Variants",
   args: { defaultSelected: true },
 };
 

diff --git a/packages/components/src/components/TextArea/stories/Default.stories.tsx b/packages/components/src/components/TextArea/stories/Default.stories.tsx
@@ -7,7 +7,7 @@ import FieldDescription from "@/components/FieldDescription/FieldDescription";
 import { FieldError } from "@/components/FieldError";
 
 const meta: Meta<typeof TextArea> = {
-  title: "Forms/TextArea",
+  title: "Form Controls/TextArea",
   component: TextArea,
   render: (props) => (
     <TextArea onChange={action("onChange")} {...props}>

diff --git a/packages/components/src/components/TextField/stories/Default.stories.tsx b/packages/components/src/components/TextField/stories/Default.stories.tsx
@@ -9,7 +9,7 @@ import { Button } from "@/components/Button";
 import { FieldError } from "@/components/FieldError";
 
 const meta: Meta<typeof TextField> = {
-  title: "Forms/TextField",
+  title: "Form Controls/TextField",
   component: TextField,
   render: (props) => (
     <TextField onChange={action("onChange")} {...props}>

diff --git a/packages/components/vite.build.config.ts b/packages/components/vite.build.config.ts
@@ -19,7 +19,6 @@ export default defineConfig(
           Button: "./src/components/Button/index.ts",
           Checkbox: "./src/components/Checkbox/index.ts",
           Content: "./src/components/Content/index.ts",
-          LayoutCard: "./src/components/LayoutCard/index.ts",
           CopyToClipboardButton:
             "./src/components/CopyToClipboardButton/index.ts",
           FieldDescription: "./src/components/FieldDescription/index.ts",
@@ -32,6 +31,7 @@ export default defineConfig(
           InlineAlert: "./src/components/InlineAlert/index.ts",
           Label: "./src/components/Label/index.ts",
           LabeledValue: "./src/components/LabeledValue/index.ts",
+          LayoutCard: "./src/components/LayoutCard/index.ts",
           Link: "./src/components/Link/index.ts",
           Navigation: "./src/components/Navigation/index.ts",
           NumberField: "./src/components/NumberField/index.ts",

diff --git a/packages/design-tokens/src/components/button.yml b/packages/design-tokens/src/components/button.yml
@@ -21,13 +21,13 @@ button:
     value: "{danger.color.700}"
 
   # Small
-  padding-small:
+  padding-s:
     value: "{size-px.xs}"
-  padding-small-squished-x:
+  padding-s-squished-x:
     value: "{size-px.s}"
-  padding-small-squished-y:
+  padding-s-squished-y:
     value: "{size-px.xs}"
-  font-size-small:
+  font-size-s:
     value: "{font-size.s}"
 
   # Accent Solid

diff --git a/packages/design-tokens/src/components/heading.yml b/packages/design-tokens/src/components/heading.yml
@@ -5,10 +5,12 @@ heading:
     value: "{font-weight.bold}"
   h1-font-size:
     value: "{font-size.xxl}"
-  h2-font-size:
+  h1-font-size-mobile:
     value: "{font-size.xl}"
-  h3-font-size:
+  h2-font-size:
     value: "{font-size.l}"
+  h3-font-size:
+    value: "{font-size.m}"
   h4-font-size:
     value: "{font-size.m}"
   h5-font-size:

diff --git a/packages/design-tokens/src/components/label.yml b/packages/design-tokens/src/components/label.yml
@@ -4,4 +4,7 @@ label:
   font-weight:
     value: "{font-weight.bold}"
   color:
-    value: "{neutral.color.800}"
+    default:
+      value: "{neutral.color.800}"
+    disabled:
+      value: "{neutral.color.600}"
diff --git a/packages/design-tokens/src/components/link.yml b/packages/design-tokens/src/components/link.yml
@@ -1,6 +1,8 @@
 link:
   font-size:
     value: "{font-size.s}"
+  line-height:
+    value: "{line-height.m}"
   font-weight:
     value: "{font-weight.bold}"
   disabled-color:

diff --git a/packages/design-tokens/src/font.yml b/packages/design-tokens/src/font.yml
@@ -6,13 +6,11 @@ font-weight:
 line-height:
   default:
     value: 1.5
+  m:
+    value: "calc({font-size.m} * 1.5)"
 font-size:
   default:
     value: "{font-size.m}"
-  xxs:
-    value: 0.625rem
-  xs:
-    value: 0.75rem
   s:
     value: 0.875rem
   m:
St.^❔	Category	Percentage	Covered / Total
🟢	Statements	98.08%	102/104
🟢	Branches	93.55%	29/31
🟢	Functions	100%	27/27
🟢	Lines	98.06%	101/103