Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: fix font docs #2849

Merged
merged 2 commits into from
Nov 8, 2023
Merged

docs: fix font docs #2849

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4181f92
docs: fix font docs
langz Nov 6, 2023
fbca6b4
Add TypographyBox
tujoworker Nov 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions ...es/dnb-design-system-portal/src/docs/quickguide-designer/naming-conventions.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,19 +36,19 @@ The same can apply to components such as cards, form rows, etc. Responsive break

Eufemia for the web uses a simple naming system:

<div className="typography-box">Color name + percentage</div>
<TypographyBox>Color name + percentage</TypographyBox>

Depending on where the color will be used, its name formation will be different. For example, in Figma (and other design tools), the name is constructed thus:

The color name is written with spaces between words. The first word starts with capital. Some color names have a percentage sign denoting the tint value.

Example:

<div className="typography-box">Fire red 8%</div>
<TypographyBox>Fire red 8%</TypographyBox>

Whereas in CSS as a custom property this is written:

<div className="typography-box">--color-fire-red-8</div>
<TypographyBox>--color-fire-red-8</TypographyBox>

Colors have a naming convention across all platforms and formats. Please refer to the table in [colors section](/quickguide-designer/colors).

Expand All @@ -62,16 +62,16 @@ However, to maintain consistency, in Figma we name Pages and Frames (canvases) w

Example of a Figma Page name:

<div className="typography-box">04 Spacing & Common components</div>
<TypographyBox>04 Spacing & Common components</TypographyBox>

Example of a Figma Frame name:

<div className="typography-box">02 Spacing components - horizontal</div>
<TypographyBox>02 Spacing components - horizontal</TypographyBox>

Actual components are written with all small letters.

Example of a Figma component name:

<div className="typography-box">date picker</div>
<TypographyBox>date picker</TypographyBox>

If in doubt, look at the main Eufemia file - [Eufemia - Web](https://www.figma.com/file/cdtwQD8IJ7pTeE45U148r1/Eufemia-Web?node-id=530%3A49).
30 changes: 15 additions & 15 deletions ...-design-system-portal/src/docs/quickguide-designer/typography/font-families.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { H2, H3 } from '@dnb/eufemia/src'
import { H3 } from '@dnb/eufemia/src'

<VisibilityByTheme hidden="sbanken">
## Font Families
Expand All @@ -7,51 +7,51 @@ The default font family for all web applications is the `DNB` font.

## DNB Regular

<div className="typography-box">
<TypographyBox>
<p className="dnb-p dnb-typo-regular">
Here is a paragraph with some nonsense lipsum text. Contrary to popular
belief, Lorem Ipsum passage, and going through the cites of the word in
classical literature, discovered the undoubtable source. Lorem Ipsum
comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
</p>
</div>
</TypographyBox>

## DNB Medium

<div className="typography-box">
<TypographyBox>
<p className="dnb-p dnb-typo-medium">
Here is a paragraph with some nonsense lipsum text. Contrary to popular
belief, Lorem Ipsum passage, and going through the cites of the word in
classical literature, discovered the undoubtable source. Lorem Ipsum
comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
</p>
</div>
</TypographyBox>

## DNB Bold

<div className="typography-box">
<TypographyBox>
<p className="dnb-p dnb-typo-bold">
Here is a paragraph with some nonsense lipsum text. Contrary to popular
belief, Lorem Ipsum passage, and going through the cites of the word in
classical literature, discovered the undoubtable source. Lorem Ipsum
comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
</p>
</div>
</TypographyBox>

## DNBMono Regular

<div className="typography-box">
<TypographyBox>
<p className="dnb-p dnb-typo-mono-regular">
Here is a paragraph with some nonsense lipsum text. Contrary to popular
belief, Lorem Ipsum passage, and going through the cites of the word in
classical literature, discovered the undoubtable source. Lorem Ipsum
comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
</p>
</div>
</TypographyBox>
</VisibilityByTheme>
<VisibilityByTheme visible="sbanken">
## Font Families
Expand All @@ -60,32 +60,32 @@ The default font family for all web applications is `Roboto`, however for headli

### Maison Neue

<div className="typography-box">
<TypographyBox>
<H3>This is a headline in Maison Neue</H3>
</div>
</TypographyBox>

### Roboto regular

<div className="typography-box">
<TypographyBox>
<p className="dnb-p dnb-typo-regular">
Here is a paragraph with some nonsense lipsum text. Contrary to popular
belief, Lorem Ipsum passage, and going through the cites of the word in
classical literature, discovered the undoubtable source. Lorem Ipsum
comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
</p>
</div>
</TypographyBox>

### Roboto bold

<div className="typography-box">
<TypographyBox>
<p className="dnb-p dnb-typo-bold">
Here is a paragraph with some nonsense lipsum text. Contrary to popular
belief, Lorem Ipsum passage, and going through the cites of the word in
classical literature, discovered the undoubtable source. Lorem Ipsum
comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
</p>
</div>
</TypographyBox>

</VisibilityByTheme>
12 changes: 6 additions & 6 deletions ...b-design-system-portal/src/docs/quickguide-designer/typography/font-weights.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,38 +7,38 @@ Achieved with HTML classes: `.dnb-typo-regular`, <VisibilityByTheme hidden="sban
**NB!** body text is automatically set to use **regular** weight so there is
no need to use a class.

<div className="typography-box">
<TypographyBox>
<p className="dnb-typo-regular">
Here is a paragraph with some nonsense lipsum text. Contrary to popular
belief, Lorem Ipsum passage, and going through the cites of the word in
classical literature, discovered the undoubtable source. Lorem Ipsum
comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
</p>
</div>
</TypographyBox>

<VisibilityByTheme hidden="sbanken">
### Body Medium

<div className="typography-box">
<TypographyBox>
<p className="dnb-typo-medium">
Here is a paragraph with some nonsense lipsum text. Contrary to popular
belief, Lorem Ipsum passage, and going through the cites of the word in
classical literature, discovered the undoubtable source. Lorem Ipsum
comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
</p>
</div>
</TypographyBox>
</VisibilityByTheme>

### Body Bold

<div className="typography-box">
<TypographyBox>
<p className="dnb-typo-bold">
Here is a paragraph with some nonsense lipsum text. Contrary to popular
belief, Lorem Ipsum passage, and going through the cites of the word in
classical literature, discovered the undoubtable source. Lorem Ipsum
comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC.
</p>
</div>
</TypographyBox>
24 changes: 12 additions & 12 deletions ...nb-design-system-portal/src/docs/quickguide-designer/typography/line-height.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,39 +12,39 @@ Because their line-height **is** evenly divisible by 8.

### Line height = 1rem (16px)

<div className="typography-box">
<TypographyBox>
<p className="dnb-p lh-16">
Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
Dico purto nullam sea an.
</p>
</div>
</TypographyBox>

### Line height = 1.5rem (24px)

<div className="typography-box">
<TypographyBox>
<p className="dnb-p lh-24">
Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
Dico purto nullam sea an.
</p>
</div>
</TypographyBox>

### Line height = 2rem (32px)

<div className="typography-box">
<TypographyBox>
<p className="dnb-p lh-32">
Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
Dico purto nullam sea an.
</p>
</div>
</TypographyBox>

### These break alternatively on/off the grid (line heights 0.75rem, 1.25rem and 1.75rem)

Expand All @@ -53,36 +53,36 @@ Try resizing the browser - you will see the 'off-grid' result.

### Line height = 0.75rem (12px)

<div className="typography-box">
<TypographyBox>
<p className="dnb-p lh-12">
Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
Dico purto nullam sea an.
</p>
</div>
</TypographyBox>

### Line height = 1.25rem (20px)

<div className="typography-box">
<TypographyBox>
<p className="dnb-p lh-20">
Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
Dico purto nullam sea an.
</p>
</div>
</TypographyBox>

### Line height = 1.75rem (28px)

<div className="typography-box">
<TypographyBox>
<p className="dnb-p lh-28">
Quem facilisi moderatius id eam, id tamquam albucius per. Vel quem
congue appareat cu, mei te eros convenire. Sea bonorum epicuri ea, ei
exerci tacimates pro, aliquam pertinacia eu vim. Vix ei stet ornatus.
Est mediocrem reprimique contentiones ei, mea ne primis intellegat.
Dico purto nullam sea an.
</p>
</div>
</TypographyBox>
Loading
Loading