diff --git a/src/base.css b/src/base.css index 8176372e..f37dba6f 100644 --- a/src/base.css +++ b/src/base.css @@ -120,6 +120,19 @@ font-size: 21px; line-height: inherit; } + + p:has(ruby), + li:has(> ruby) { + padding: 0.5rem 0; + } + + ruby { + font-size: 1.3rem; + } + + rt { + font-size: 0.9rem; + } } @tailwind components; diff --git a/src/typography/typography.stories.tsx b/src/typography/typography.stories.tsx new file mode 100644 index 00000000..775b1a01 --- /dev/null +++ b/src/typography/typography.stories.tsx @@ -0,0 +1,11 @@ +import React from "react"; +import { Typography } from "./typography"; + +const story = { + title: "Design System/Typography", + component: Typography, +}; + +export const TypographySystem = (): JSX.Element => ; + +export default story; diff --git a/src/typography/typography.tsx b/src/typography/typography.tsx new file mode 100644 index 00000000..92f802dc --- /dev/null +++ b/src/typography/typography.tsx @@ -0,0 +1,120 @@ +import React from "react"; + +export const Typography = (): JSX.Element => { + return ( +
+
+
Headings
+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+
+ +
+ +
+
Paragraph
+

+ This is a paragraph of text. It demonstrates the default styling + applied to paragraph elements by the base stylesheet. Lorem ipsum + dolor sit amet, consectetur adipiscing elit. +

+
+ +
+ +
+
Links
+

+ This is a paragraph with{" "} + a link in it. +

+
+ +
+ +
+
Text Formatting
+

+ This text is bold and this is also bold. +

+
+ +
+ +
+
Lists
+

Unordered List

+
    +
  • First item
    • +
  • Second item
    • +
  • Third item
    • +
+ +

Ordered List

+
    +
  1. First item
    2. +
  2. Second item
    3. +
  3. Third item
    4. +
+
+ +
+ +
+
Blockquote
+
+ This is a blockquote. It is used to highlight quoted text or important + information. +
+
+ +
+ +
+
Legend
+
+ Form Section +

Content within a fieldset with a legend element.

+
+
+ +
+ +
+
Ruby Annotation
+

+ Chinese text with pinyin annotations:{" "} + + 汉字hàn zì + + 。 +

+

Ruby in Lists

+
    +
  • + + 中国zhōng guó + + : China +
    • +
  • + + 学习xué xí + + : Study +
    • +
  • + + 老师lǎo shī + + : Teacher +
    • +
+
+
+ ); +};