Merge pull request #1220 from Infineon/1219-documentation-foundation-…

…update-text-und-images Documentation: foundation update text and images
Infineon · May 8, 2024 · 31cfcd5 · 31cfcd5
2 parents 20b07d6 + 99d7671
commit 31cfcd5
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 128 deletions.
diff --git a/packages/components/src/stories/foundations/BorderRadius.mdx b/packages/components/src/stories/foundations/BorderRadius.mdx
@@ -6,21 +6,19 @@ import { Meta } from '@storybook/addon-docs';
 <Meta title="Foundations/Border radius" />
 
 # Border radius 
-A fundamental aspect of our visual design. 
-It refers to the curvature applied to the corners of elements, such as buttons, cards, or containers. 
-It shapes the overall aesthetic and feel of our interfaces, influencing user perception and interaction.  
+A fundamental aspect of our visual design. It refers to the curvature applied to the corners of elements, such as buttons, cards, or containers. It shapes the overall aesthetic and feel of our interfaces, influencing user perception and interaction.  
 
 ## 1px Border radius 
-<img src={BorderRadius1px} alt="BorderRadius1px" /> 
+<img src={BorderRadius1px} alt="BorderRadius1px" width="50%"/> 
 We use a 1px border radius for all rectangular objects in our design system.
 This includes buttons, text inputs, checkboxes, radio buttons, and other rectangular elements. 
 A 1px border radius creates a slight curve at the corners of these elements, which softens their appearance and helps creating a more friendly and approachable design. 
 
-<img src={BorderRadius1px} alt="Border Radius 1px" />   
+<img src={BorderRadius1px} alt="Border Radius 1px" width="50%"/>   
 
 ## 9999px Border radius 
-<img src={BorderRadius9999px} alt="BorderRadius9999px" /> 
+<img src={BorderRadius9999px} alt="BorderRadius9999px" width="50%"/> 
 
 In addition to the 1px border radius, we use a 9999px border radius for certain components in our design system. 
 These components include chips, tags, toggles, and filter components. 
-This style creates a pill shape for these elements, which helps distinguish them from other rectangular elements on the page and makes them more visually appealing. 
+This style creates a pill shape for these elements, which helps distinguish them from other rectangular elements on the page and makes them more visually appealing. 
diff --git a/packages/components/src/stories/foundations/Color.mdx b/packages/components/src/stories/foundations/Color.mdx
@@ -44,97 +44,81 @@ We use the concept of tokens to apply color in a consistent, reusable, and scala
 
 | token | hex | example | 
 |---------------------------------------|---------------|-----------------------------------------------------------| 
-| <code>$ifxColorBaseBlack</code>       | #1D1D1D       | <img src={ColorBaseBlack} alt="Base Black" width="50%" />             | 
+| <code>$ifxColorBaseBlack</code> | #1D1D1D | <img src={ColorBaseBlack} alt="Base Black" width="50%" /> | 
 | <code>$ifxColorBaseWhite</code> | #FFFFFF | <img src={ColorBaseWhite} alt="Base White" width="50%" /> | 
-| <code>$ifxColorBaseTransparent</code> | transparent   | <img src={ColorBaseTransparent} alt="Base Transparent" width="50%" /> | 
+| <code>$ifxColorBaseTransparent</code> | transparent | <img src={ColorBaseTransparent} alt="Base Transparent" width="50%" /> | 
 | <code>$ifxColorEngineering100</code> | #F7F7F7 | <img src={ColorEngineering100} alt="Engineering 100" width="50%" /> | 
-| <code>$ifxColorEngineering200</code>  | #EEEDED       | <img src={ColorEngineering200} alt="Engineering 200" width="50%" /> | 
+| <code>$ifxColorEngineering200</code>  | #EEEDED | <img src={ColorEngineering200} alt="Engineering 200" width="50%" /> | 
 | <code>$ifxColorEngineering300</code> | #BFBBBB | <img src={ColorEngineering300} alt="Engineering 300" width="50%" /> | 
-| <code>$ifxColorEngineering400</code>  | #8D8786       | <img src={ColorEngineering400} alt="Engineering 400" width="50%" /> | 
+| <code>$ifxColorEngineering400</code>  | #8D8786 | <img src={ColorEngineering400} alt="Engineering 400" width="50%" /> | 
 | <code>$ifxColorEngineering500</code> | #575352 | <img src={ColorEngineering500} alt="Engineering 500" width="50%" /> | 
-| <code>$ifxColorEngineering600</code>  | #3C3A39       | <img src={ColorEngineering600} alt="Engineering 600" width="50%" /> | 
+| <code>$ifxColorEngineering600</code>  | #3C3A39 | <img src={ColorEngineering600} alt="Engineering 600" width="50%" /> | 
 | <code>$ifxColorOcean100</code> | #0A8276 | <img src={ColorOcean100} alt="Ocean 100" width="50%" /> | 
-| <code>$ifxColorOcean200</code>        | #B8DEDA       | <img src={ColorOcean200} alt="Ocean 200" width="50%" /> | 
+| <code>$ifxColorOcean200</code> | #B8DEDA | <img src={ColorOcean200} alt="Ocean 200" width="50%" /> | 
 | <code>$ifxColorOcean300</code> | #6CB4AD | <img src={ColorOcean300} alt="Ocean 300" width="50%" /> | 
-| <code>$ifxColorOcean400</code>        | #3B9B91       | <img src={ColorOcean400} alt="Ocean 400" width="50%" /> | 
+| <code>$ifxColorOcean400</code> | #3B9B91 | <img src={ColorOcean400} alt="Ocean 400" width="50%" /> | 
 | <code>$ifxColorOcean500</code> | #0A8276 | <img src={ColorOcean500} alt="Ocean 500" width="50%" /> | 
-| <code>$ifxColorOcean600</code>        | #08665C       | <img src={ColorOcean600} alt="Ocean 600" width="50%" /> | 
-| <code>$ifxColorOcean700</code> | #06534B | <img src={ColorOcean700} alt="Ocean 700" width="50%" /> | | <code>$ifxColorRed500</code>          | #CD002F       | <img src={ColorRed500} alt="Red 500" width="50%" /> | 
+| <code>$ifxColorOcean600</code> | #08665C | <img src={ColorOcean600} alt="Ocean 600" width="50%" /> | 
+| <code>$ifxColorOcean700</code> | #06534B | <img src={ColorOcean700} alt="Ocean 700" width="50%" /> | 
+| <code>$ifxColorRed500</code> | #CD002F | <img src={ColorRed500} alt="Red 500" width="50%" /> | 
 | <code>$ifxColorRed600</code> | #BF0023 | <img src={ColorRed600} alt="Red 600" width="50%" /> |
-| <code>$ifxColorRed700</code>          | #900021       | <img src={ColorRed700} alt="Red 700" width="50%" /> | 
+| <code>$ifxColorRed700</code> | #900021 | <img src={ColorRed700} alt="Red 700" width="50%" /> | 
 | <code>$ifxColorOrange500</code> | #E16B25 | <img src={ColorOrange500} alt="Orange 500" width="50%" /> | 
-| <code>$ifxColorGreen500</code>        | #4CA460       | <img src={ColorGreen500} alt="Green 500" width="50%" /> | 
+| <code>$ifxColorGreen500</code> | #4CA460 | <img src={ColorGreen500} alt="Green 500" width="50%" /> | 
 | <code>$ifxColorLawn400</code> | #B9D257 | <img src={ColorLawn400} alt="Lawn 400" width="50%" /> | 
-| <code>$ifxColorLawn500</code>         | #9BBA43       | <img src={ColorLawn500} alt="Lawn 500" width="50%" /> | 
+| <code>$ifxColorLawn500</code> | #9BBA43 | <img src={ColorLawn500} alt="Lawn 500" width="50%" /> | 
 | <code>$ifxColorLawn700</code> | #3C6C0F | <img src={ColorLawn700} alt="Lawn 700" width="50%" /> | 
-| <code>$ifxColorBerry400</code>        | #BE3283       | <img src={ColorBerry400} alt="Berry 400" width="50%" /> | 
+| <code>$ifxColorBerry400</code> | #BE3283 | <img src={ColorBerry400} alt="Berry 400" width="50%" /> | 
 | <code>$ifxColorBerry500</code> | #9C216E | <img src={ColorBerry500} alt="Berry 500" width="50%" /> | 
-| <code>$ifxColorSun400</code>          | #FF9737       | <img src={ColorSun400} alt="Sun 400" width="50%" /> | 
+| <code>$ifxColorSun400</code> | #FF9737 | <img src={ColorSun400} alt="Sun 400" width="50%" /> | 
 | <code>$ifxColorSun500</code> | #F97414 | <img src={ColorSun500} alt="Sun 500" width="50%" /> | 
-| <code>$ifxColorSand400</code>         | #FBE273       | <img src={ColorSand400} alt="Sand 400" width="50%" /> | 
+| <code>$ifxColorSand400</code> | #FBE273 | <img src={ColorSand400} alt="Sand 400" width="50%" /> | 
 | <code>$ifxColorSand500</code> | #FCD442 | <img src={ColorSand500} alt="Sand 500" width="50%" /> | 
-| <code>$ifxColorOverlayDark</code>     | #1D1D1D (20%) | <img src={ColorOverlayDark} alt="Overlay Dark" width="50%" /> | 
+| <code>$ifxColorOverlayDark</code> | #1D1D1D (20%) | <img src={ColorOverlayDark} alt="Overlay Dark" width="50%" /> | 
 | <code>$ifxColorOverlayLight</code> | #FFFFFF (20%) | <img src={ColorOverlayLight} alt="Overlay Light" width="50%" /> |
 
 ## Using tokens
 
 ### Background colors
-
 Our overall look should be light and bright. To achieve that we use:
 
 `$ifxColorBaseWhite`: This is our main background color.
-
 `$ifxColorEngineering-100`: If it is necessary to apply more section-structure. Especially for dashboard designs.
-
 `$ifxColorOcean-500`: This option is only recommended for marketing websites by highlighting messages/sections.
 
 ### Typography 
-
 - For default text we use `$ifxColorBaseBlack` as main color. On brand or dark colored backgrounds we recommend to use `$ifxColorBaseWhite`. 
-
 - For headlines you can use either `$ifxColorBaseBlack` or `$ifxColorOcean500`. For the homepage in the hero section we recommend to use `$ifxColorOcean500` as title/h1. 
-
 - For interactive texts like inline-links use `$ifxColorOcean500`.
 
 ### Components 
-
 We use a set of engineering color variations to build the core fibres of many layouts and components. This core fibres can be: 
 
 - An engineering outline to shape the form of a toggle, text field etc. 
-
 - An engineering divider structuring content 
-
 - Engineering backgrounds/borders for tables, rows and columns
 
 ### Interactions 
-
 We use our brand colors to highlight interactive elements and their interaction states. 
 
 `$ifxColorOcean500`: Default state 
-
 `$ifxColorOcean600`: Hover state 
-
 `$ifxColorOcean700`: Pressed state 
-
 `$ifxColorEngineering300`: Disabled state 
 
 ### Signal information 
-
 As in many user interfaces we also use signal colors to convey information quickly and effectively to the user.  
 
 `$ifxColorGreen500`: Used to indicate a successful action. 
-
 `$ifxColorOrange500`: To indicate a warning message. 
-
 `$ifxColorRed500`: To indicate an error message. The two shades `$ifxColorRed600` and `$ifxColorRed700` are used for destructive button states. 
 
 ### Interactive infographics 
-
-Sometimes it needs more colors to visualize complex infographics for example on dashboard user interfaces. In these cases we recommend to use these colors: 
-
+Sometimes it needs more colors to visualize complex infographics for example on dashboard user interfaces. In these cases we recommend to use these colors:
 `$ifxColorOcean100`, `$ifxColorOcean200`, `$ifxColorOcean300`, `$ifxColorOcean400` `$ifxColorBerry400`, `$ifxColorBerry500` `$ifxColorLawn400`, `$ifxColorLawn500`, `$ifxColorLawn600` `$ifxColorSun400`, `$ifxColorSun500` `$ifxColorSand400`, `$ifxColorSand500` 
 
-Preferred color should be `$ifxColorOcean100`, `$ifxColorOcean200`, `$ifxColorOcean300`, `$ifxColorOcean400` for example for a 4-clustered pie chart. It is important to note that these colors are not intended for use in user interface components such as buttons, text, and background colors. 
+Preferred color should be:
+`$ifxColorOcean100`, `$ifxColorOcean200`, `$ifxColorOcean300`, `$ifxColorOcean400` for example for a 4-clustered pie chart. It is important to note that these colors are not intended for use in user interface components such as buttons, text, and background colors. 
 
 ## Accessibility 
 

diff --git a/packages/components/src/stories/foundations/Grid.mdx b/packages/components/src/stories/foundations/Grid.mdx
@@ -53,4 +53,6 @@ The Full-Width Grid is designed for content that spans the full width of the scr
 | m    | 1024 px    | 1024 px               | none                | 12      | 16 px   | 
 | l    | 1200 px    | 1200 px               | none                | 12      | 24 px   |   
 
-*** Check out the Figma Grid templates: **[Grid](https://www.figma.com/file/ndenZq9IIVHmCjTWS0MUGi/%23NewWeb---Components-%26-Modules?type=design&node-id=16-316&mode=design)** ***
+***
+Check out the Figma Grid templates: **[Grid](https://www.figma.com/file/ndenZq9IIVHmCjTWS0MUGi/%23NewWeb---Components-%26-Modules?type=design&node-id=16-316&mode=design)**
+***
diff --git a/packages/components/src/stories/foundations/Iconography.mdx b/packages/components/src/stories/foundations/Iconography.mdx
@@ -14,30 +14,28 @@ import { Meta } from '@storybook/addon-docs';
 <Meta title="Foundations/Iconography" />
 
 # Iconography 
-Icons play a crucial role in our design system, providing visual representation and enhancing user experiences. 
-We primarily utilize the Nucleo icon library for our icons, ensuring consistency and a wide range of options.  
+Icons play a crucial role in our design system, providing visual representation and enhancing user experiences. We primarily utilize the Nucleo icon library for our icons, ensuring consistency and a wide range of options.  
 
 
 ## Usage  
 
 ### When to use 
-
 - Icons can be used alongside text to aid navigation and improve usability. They can represent different sections, categories, or actions, making it easier for users to identify and interact with them. 
-- If you want to communicate actions, such as saving, deleting, editing, or sharing. 
-By utilizing recognizable icons, users can quickly understand the purpose or functionality associated with a specific action.  
+- If you want to communicate actions, such as saving, deleting, editing, or sharing. By utilizing recognizable icons, users can quickly understand the purpose or functionality associated with a specific action.  
 
 ### When not to use 
 - If an icon's meaning is unclear or open to interpretation, it is best to use descriptive text instead. Clarity and understanding should always take precedence over aesthetic considerations. 
 - Avoid overcrowding interfaces with too many icons, as this can lead to visual clutter and confusion. Strive for a balanced composition that maintains a clean and intuitive design.  
 
-## Size 
-To ensure consistency and alignment, we utilize a 4px grid size for our icons. 
-This grid aligns with the overall design system and facilitates seamless integration into our interfaces. We have established four fixed icon sizes: 12×12px, 16×16px, and 24×24px. 
-Choose the appropriate size based on the context and surrounding elements. > Icons within our DDS components come with the right icon size out of the box!  
+## Size
+To ensure consistency and alignment, we utilize a 4px grid size for our icons. This grid aligns with the overall design system and facilitates seamless integration into our interfaces. We have established four fixed icon sizes: 12×12px, 16×16px, and 24×24px. 
+Choose the appropriate size based on the context and surrounding elements.
+> Icons within our DDS components come with the right icon size out of the box!  
 
 <img src={IconSizes} alt="Icon Sizes" />  
 
-## Structure All our icon sizes include the icon itself and the surrounding area. 
+## Structure
+All our icon sizes include the icon itself and the surrounding area. 
 
 <img src={IconStructure} alt="Icon Structure" width="50%"/> 
 
@@ -51,7 +49,7 @@ The DDS provides two different kinds of icons: outlined and filled.
 
 ### Size alignment 
 Try to pair specific typographic styles with corresponding icon sizes. 
-The body-03 and body-04 typographic style is well-suited for 16px icons, while larger typography, such as the heading-04, works best with 24px icons. 
+The `$ifxBodyBody03` and `$ifxBodyBody04` typographic style is well-suited for 16px icons, while larger typography, such as the `$ifxHeadingHeading04`, works best with 24px icons. 
 
 <img src={IconSizeAlignment} alt="Icon Size Alignment" width="50%" />  
 
@@ -68,17 +66,20 @@ Icons should be aligned with the text color they accompany. Ensure that icons ad
 ## Color  
 
 ### Dark font color 
-The black font color is the default color for icons. We use this color in most cases on `base-white` or `Cengineering-100` backgrounds. 
+The `$ifxColorBaseBlack` font color is the default color for icons. We use this color in most cases on `$ifxColorBaseWhite` or `$ifxColorEngineering100` backgrounds. 
 
 <img src={IconTextColorDark} alt="Icon Text Color Dark" width="50%" />  
 
 ### White font color 
-We use the `base-white` color on dark backgrounds. 
+We use the `$ifxColorBaseWhite` color on dark backgrounds. 
 
 <img src={IconTextColorWhite} alt="Icon Text Color White" width="50%" />  
 
 ### Brand font color
-We use our brand color `ocean-500` to highlight the content or actions connected with the icon. Use it on white or `engineering-100` backgrounds. 
+We use our brand color `$ifxColorOcean500` to highlight the content or actions connected with the icon. Use it on white or `$ifxColorEngineering100` backgrounds. 
 
-<img src={IconTextColorBrand} alt="Icon Text Color Brand" width="50%" />   
-*** Check out the Figma Icon Library: **[Icon Library](https://www.figma.com/file/yWwaLoqsWLWygDxXfvdym9/Infineon-DDS-%7C-Icons?type=design&node-id=6%3A6&mode=design&t=Zc0icFhkq4Jv0xSn-1)** ***
+<img src={IconTextColorBrand} alt="Icon Text Color Brand" width="50%" />
+
+***
+Check out the Figma Icon Library: **[Icon Library](https://www.figma.com/file/yWwaLoqsWLWygDxXfvdym9/Infineon-DDS-%7C-Icons?type=design&node-id=6%3A6&mode=design&t=Zc0icFhkq4Jv0xSn-1)**
+***
diff --git a/packages/components/src/stories/foundations/Logo.mdx b/packages/components/src/stories/foundations/Logo.mdx
@@ -10,7 +10,6 @@ The Logo serves as a visual representation of our brand identity. It is availabl
 ## Variants  
 
 ### International
-
 Our default logo variant.  
 <img src={LogoDefault} alt="Logo Default"/> 
 
@@ -19,4 +18,7 @@ The logo variant has two versions: portrait and landscape.
 These versions are specifically designed to suit different layouts and orientations while maintaining consistency and clarity.  
 
 <img src={LogoChinese} alt="Logo Chinese"/>   
-*** Check out the Figma component: **[Logo](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=134-0&mode=design)** ***
+
+***
+Check out the Figma component: **[Logo](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=134-0&mode=design)**
+***