Use default font color

[eugeneoshepkov]

Typography should use default font color

Summary by CodeRabbit

• Style
  • Updated typography component font color styling.

[coderabbitai]

Walkthrough

This PR adds a patch release changeset for @embeddable.com/remarkable-ui with font color updates, adds a new gitignore entry for .specstory/, and applies a font color CSS variable to the Typography component.

Changes

Cohort / File(s)	Summary
Release metadata .changeset/thirty-baboons-tickle.md	Introduces patch version bump with "Font color" description
Git configuration .gitignore	Adds new ignore entry .specstory/.gitignore
Component styling src/remarkable-ui/shared/Typography/Typography.module.css	Adds color: var(--em-form-section-font-font-color) property to .typography class

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The PR description provided is just a single line ("Typography should use default font color") and does not follow the required template structure. The template specifies three required sections: "Why is this pull-request needed?", "Main changes", and "Test evidence." All three sections are completely missing from the description, leaving reviewers without context about the motivation, detailed changes, or testing information. While the brief description does relate to the change, it falls far short of the expected documentation requirements.	Please expand the PR description to follow the template structure. Add a "Why is this pull-request needed?" section explaining the motivation for this change, a "Main changes" section detailing the modifications made to the Typography component and related files, and a "Test evidence" section documenting how this change was tested and verified to work correctly.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title "Use default font color" directly aligns with the primary change in the PR, which adds a font color property to the Typography component by introducing color: var(--em-form-section-font-font-color) to the Typography.module.css file. The title is concise, specific, and clearly communicates the main intent without unnecessary noise. The changeset also confirms this is about font color styling.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/use-default-color

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

.changeset/thirty-baboons-tickle.md (1)

1-5: Changeset format looks good.

The file follows the standard changeset format and correctly documents a patch-level change. Consider expanding the description to briefly mention which components are affected (e.g., "Apply default font color CSS variable to Typography component") for better changelog clarity—optional but helpful for maintainability.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Cache: Disabled due to Reviews > Disable Cache setting

Knowledge base: Disabled due to data retention organization setting

📥 Commits

Reviewing files that changed from the base of the PR and between 0657ce9 and e25da72.

📒 Files selected for processing (3)

• .changeset/thirty-baboons-tickle.md (1 hunks)
• .gitignore (1 hunks)
• src/remarkable-ui/shared/Typography/Typography.module.css (1 hunks)

🔇 Additional comments (1)

.gitignore (1)

17-18: Clarify the scope of the .gitignore change.

The .specstory/.gitignore entry appears orthogonal to the PR objective of applying default font color to Typography. This looks like tooling-related configuration rather than part of the font color fix.

Is this change intentional to this PR, or should it be in a separate commit? If .specstory/ is generated output, consider ignoring the entire directory (e.g., .specstory/) rather than just its .gitignore file.

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Verify the CSS variable is properly defined and semantically appropriate.

The change applies --em-form-section-font-font-color to the general Typography component. The variable name suggests form-section-specific semantics—verify this is the correct token for general typography use across the product, not just form contexts.

Run the following to confirm the CSS variable is defined and check its usage:

---

🏁 Script executed:

#!/bin/bash
# Search for CSS variable definitions
rg -n "em-form-section-font-font-color" --type css

# Search for where this token is typically defined (design tokens, variables)
fd -e css -e scss -e json | xargs rg -l "design-tokens|css-variables|theme"

Length of output: 475

---

Add fallback value for the CSS variable to match other components.

Unlike InputField, Switch, and TextField components which use var(--em-form-section-font-font-color, #212129), Typography.module.css applies this variable without a fallback. If the custom property is not defined and no fallback value is provided, the property is treated as if it has value unset—meaning text won't render with the intended color.

Update line 4 to: color: var(--em-form-section-font-font-color, #212129);

🤖 Prompt for AI Agents

In src/remarkable-ui/shared/Typography/Typography.module.css around line 4, the
color uses the CSS variable without a fallback which can result in unset color
if the custom property is missing; update the declaration to include the same
fallback used by other components (use #212129) so replace the current value
with var(--em-form-section-font-font-color, #212129) to ensure a default color
is applied.

[mad-raccoon]

typography is a reusable component, it should not be attached to a form variable

[mad-raccoon]

The Typography component accepts className as prop - you can pass styles to it there via the FE or WebC

[eugeneoshepkov]

The Typography component accepts className as prop - you can pass styles to it there via the FE or WebC

This came from Erin, she mentioned that all remarkable-ui typography should use default color at least. Otherwise, we'll have to pass custom class name every time we use Typography. Ofc we can create a wrapper for it, but not sure if this is ideal approach and whether we have to do it once here as Erin suggested

[mad-raccoon]

The Typography component accepts className as prop - you can pass styles to it there via the FE or WebC

This came from Erin, she mentioned that all remarkable-ui typography should use default color at least. Otherwise, we'll have to pass custom class name every time we use Typography. Ofc we can create a wrapper for it, but not sure if this is ideal approach and whether we have to do it once here as Erin suggested

That makes sense - there should be a default css variable for this color then - using a form variable is incorrect

on another note, there will be components that RUI will not provide (because they are very specific to the business and not related to the library). for those cases, the application team will need to make usage of the RUI CSS TOKENS to style elements on your side