Skip to content

Commit

Permalink
docs: fix font docs (#2849)
Browse files Browse the repository at this point in the history
  • Loading branch information
@langz
langz authored Nov 8, 2023
1 parent 0a5127f commit 13beec9
Show file tree
Hide file tree
Showing 8 changed files with 108 additions and 70 deletions.
12 changes: 6 additions & 6 deletions ...es/dnb-design-system-portal/src/docs/quickguide-designer/naming-conventions.mdx
View file
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
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
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
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

0 comments on commit 13beec9

Please sign in to comment.