docs: update pages in design tokens (#4216)

* docs: update design tokens documentation for elevation, grid, shape, spacing, and typography

* Update apps/design-system-docs/docs/foundation/design-tokens/spacing.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update apps/design-system-docs/docs/foundation/design-tokens/grid.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update apps/design-system-docs/docs/foundation/design-tokens/spacing.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Fix formatting of keyboard shortcut in grid.md

* Update grid.md

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: emirgens

apps/design-system-docs/docs/foundation/design-tokens/elevation.md

@@ -4,97 +4,13 @@ Elevation is a visual effect that makes an element look like it's floating above
 
 ## Guidelines
 
-The elevation effect is made using shadows to help lift an element into focus --- it is a reference to the physical world. Elements may be stacked on top of each other but can’t pass through each other.
+The elevation effect is made using shadows to help lift an element into focus, it is a reference to the physical world. Elements may be stacked on top of each other but can’t pass through each other.
 
 ## Styles
 
 There are six elevation effects to choose between:  `None`,  `Raised`,  `Overlay`,  `Sticky`,  `Temporary nav` and `Above scrim`.
 
-None
-
-Fill
-
-rgba(255, 255, 255, 1.0)
-
-Shadow
-
-0.0px 0.0px 1.0px 0px rgba(0, 0, 0, 0.14)
-
-Add notes
-
-Raised
-
-Fill
-
-rgba(255, 255, 255, 1.0)
-
-Shadow
-
-0.0px 1.0px 5.0px 0px rgba(0, 0, 0, 0.2),0.0px 3.0px 4.0px 0px rgba(0, 0, 0, 0.12),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.14)
-
-Add notes
-
-Overlay
-
-Fill
-
-rgba(255, 255, 255, 1.0)
-
-Shadow
-
-0.0px 1.0px 10.0px 0px rgba(0, 0, 0, 0.2),0.0px 4.0px 5.0px 0px rgba(0, 0, 0, 0.12),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.14)
-
-Add notes
-
-Sticky
-
-Fill
-
-rgba(255, 255, 255, 1.0)
-
-Shadow
-
-0.0px 4.0px 5.0px 0px rgba(0, 0, 0, 0.2),0.0px 3.0px 14.0px 0px rgba(0, 0, 0, 0.12),0.0px 8.0px 10.0px 0px rgba(0, 0, 0, 0.14)
-
-Add notes
-
-Temporary Nav
-
-Fill
-
-rgba(255, 255, 255, 1.0)
-
-Shadow
-
-0.0px 7.0px 8.0px 0px rgba(0, 0, 0, 0.2),0.0px 5.0px 22.0px 0px rgba(0, 0, 0, 0.12),0.0px 12.0px 17.0px 0px rgba(0, 0, 0, 0.14)
-
-Add notes
-
-Above Scrim
-
-Fill
-
-rgba(255, 255, 255, 1.0)
-
-Shadow
-
-0.0px 11.0px 15.0px 0px rgba(0, 0, 0, 0.2),0.0px 9.0px 46.0px 0px rgba(0, 0, 0, 0.12),0.0px 24.0px 38.0px 0px rgba(0, 0, 0, 0.14)
-
-Add notes
-
-
-
-# Design
-
-When expanded use tab to review current page headings and press enter or space to navigate to the selected section
-
-DESIGN TOKENS
-
-# Elevation
-
-Elevation is a visual effect that makes an element look like it's floating above the surface (using the z-axis).
-
-## Figma
+## Implementation in Figma
 
 ### How to add
 

apps/design-system-docs/docs/foundation/design-tokens/grid.md

@@ -8,14 +8,14 @@ Screen size is determined by the device and the user's window size. The EDS grid
 
 ### Grid layouts
 
--   It is the responsibility of the designer to define a maximum width and choose the correct grid.
+-   It is the responsibility of the designer to define a maximum width and choose the correct grid
+-   It is up to the designer to make sure the design will scale correctly on all sizes.
+-   Start with a viewport that is the most common for the users, make sure to test that the content will fit at smaller and larger viewports
+-   It is the responsibility of the developers to implement the maximum width and use the grid as designed
 
--   It is up to the designer to make sure the design will scale correctly on all sizes. Start with a viewport that is the most common for the users. Make sure to test that the content will fit at smaller and larger viewports.
-    
--   It is the responsibility of the developers to implement the maximum width and use the grid as designed.
-    
-
-Tip: _Always remember to test designs and code by scaling the screen size or changing the orientation of the device._
+:::tip Tip
+Always remember to test designs and code by scaling the screen size or changing the orientation of the device.
+:::
 
 ### Grid influencers
 
@@ -28,71 +28,41 @@ When using a canvas navigation drawer or sidesheet, the content container could
 The columns used in the grid are **fluid** in width. There is not a defined width.
 
 -   `Grid/Large`
-    
     -   Use in content areas that are between 840px and larger.
-        
 -   `Grid/Medium`
-    
     -   Use in content areas that are 600--839px.
-        
 -   `Grid/Small`
-    
     -   Use in content areas that are 0--599px.
-        
 
 ### Grid margins
 
 Grid margins are the space at the outer edge of the grid against the frame's edge. Grid styles are available with and without margins. It is up to the designer to decide which works best for your interface.
 
 -   `Grid/Large`
-    
     -   Margins are set to 32px.
-        
 -   `Grid/Medium`
-    
     -   Margins are set to 24px.
-        
 -   `Grid/Small`
-    
     -   Margins are set to 16px.
-        
 
 ### Grid gutters
 
 Grid gutters are the space in between the columns of the grid.
 
 -   `Grid/Large`
-    
     -   Gutters are set to 16px.
-        
 -   `Grid/Medium`
-    
     -   Gutters are set to 16px.
-        
 -   `Grid/Small`
-    
     -   Gutters are set to 8px.
-        
-
--   Visit  for more details on on how to use the grid together with components.
-
-
-
-# Design
-
-When expanded use tab to review current page headings and press enter or space to navigate to the selected section
-
-DESIGN TOKENS
-
-# Grid
-
-A grid adapts to screen size and orientation to help keep layouts consistent.
 
-## Figma
+:::info More information
+Visit [grid patterns](../patterns.md#grid-system-and-spacing) for more details on how to use the grid together with components
+:::
 
-### How to add
+## Implementation in Figma
 
-1.  Click `A` or `F`on the keyboard to open the predefined list of frame sizes.
+1.  Click `A` or `F` on the keyboard to open the predefined list of frame sizes.
 
 2.  Locate the **Design** tab in the **Inspector Panel**.
 
@@ -102,4 +72,4 @@ A grid adapts to screen size and orientation to help keep layouts consistent.
 
 5.  Under the **Layout grid** section, open the **Style library** menu to view the grid styles.
 
-6.  Choose a style by clicking on the style needed. Only one grid can be applied at a time.
+6.  Choose a style by clicking on the style needed. Only one grid can be applied at a time.

apps/design-system-docs/docs/foundation/design-tokens/shape.md

@@ -10,82 +10,3 @@ To reflect the round corners of the Equinor logo, our shapes have a default roun
 
 There are many different shapes to choose between when you are building a component such as: `Button`, `Icon button`,  `Corners`,  `Straight`,  `Field`  and `Circle`.
 
-Button
-
-Add notes
-
-Button
-
-Add notes
-
-Circle
-
-Add notes
-
-Circle
-
-Add notes
-
-Corners
-
-Add notes
-
-Corners
-
-Add notes
-
-Icon Button
-
-Add notes
-
-Icon Button
-
-Add notes
-
-Rounded
-
-Add notes
-
-Rounded
-
-Add notes
-
-Straight
-
-Add notes
-
-Straight
-
-Add notes
-
-Toggle
-
-Add notes
-
-Toggle
-
-Add notes
-
-Toggle rounded border
-
-Add notes
-
-Toggle rounded border
-
-Add notes
-
-Toggle straight border
-
-Add notes
-
-Toggle straight border
-
-Add notes
-
-Caret
-
-Add notes
-
-Field
-
-Add notes

apps/design-system-docs/docs/foundation/design-tokens/spacing.md

@@ -8,24 +8,15 @@ Spacing is used to apply margin and padding across all platforms. The EDS has a
 
 The spacers `XX Small` and `X Small` are only to be used inside of components, while the spacers `Small` up to `XXX Large` can be used both within and between components.
 
--   Always make sure to follow the  by having 8px of spacing between each clickbound.
+:::info Guideline
+Always make sure to follow the guideline by having 8px of spacing between each clickbound.
+:::
 
+### Variants
 
 There are eight spacers to choose between: `XX Small`, `X Small`,  `Small`, `Medium`, `Large`, `X Large`, `XX Large` and `XXX Large`. The spacers `XX Small` and `X Small` are only to be used inside components, while the other spacers are to be used in layouts.
 
-
-
-# Usage
-
-When expanded use tab to review current page headings and press enter or space to navigate to the selected section
-
-DESIGN TOKENS
-
-# Spacing
-
-Every part of your interface should be intentional, this also includes spacing. While spacing is invisible, it gives air and readability to your interface.
-
-## Figma
+## Implementation in Figma
 
 ### How to add
 

apps/design-system-docs/docs/foundation/design-tokens/typography.md

@@ -6,7 +6,9 @@ Typography presents hierarchy and organises information as clearly and efficient
 
 The Equinor typeface is the primary typeface and is available in four weights: `light`, `regular`, `medium` and `bold` with accompanying italics. Please do not use `light` in digital interfaces except in special cases where the font size is over 48px.
 
-_Note: Typography is called text styles in Figma._
+:::info Note
+Typography is called text styles in Figma.
+:::
 
 ### Paragraph length
 
@@ -30,19 +32,7 @@ The style `Body short` is used for short sentences containing around four word
 
 There are other typography styles that are used internally within components.
 
-
-
-# Design
-
-When expanded use tab to review current page headings and press enter or space to navigate to the selected section
-
-DESIGN TOKENS
-
-# Typography
-
-Typography presents hierarchy and organises information as clearly and efficiently as possible.
-
-## Figma
+## Implementation in Figma
 
 ### How to add
 
@@ -54,14 +44,3 @@ Typography presents hierarchy and organises information as clearly and efficient
 
 4.  Choose a style by clicking on the style needed.
 
-
-
-# Code
-
-When expanded use tab to review current page headings and press enter or space to navigate to the selected section
-
-DESIGN TOKENS
-
-# Typography
-
-Typography presents hierarchy and organises information as clearly and efficiently as possible.