docs(site): fix /public links

vtex · Oct 22, 2024 · 427b80a · 427b80a
1 parent 4c488d8
commit 427b80a
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 31 deletions.
diff --git a/packages/docs/pages/components/table/figma-usage.mdx b/packages/docs/pages/components/table/figma-usage.mdx
@@ -9,15 +9,15 @@ The component is simple in construction and less complex to use. We provide the
 - Select the instance, click on the more options menu, and then choose Detach instance.
 
 import { Callout } from 'nextra/components'
- 
+
 <Callout type="warning" emoji="💡">
   Make sure to use the smaller components, such as Columns and Cells, and keep them linked. This way, we ensure consistency across Admin tables.
 </Callout>
 
 ## 2. Define the Table Header
 
 import { Steps } from 'nextra/components'
- 
+
 <Steps>
 ### Adjust the Header props
 
@@ -31,10 +31,10 @@ import { Steps } from 'nextra/components'
   The columns for those props should maintain their original width. When configuring column resizing, these should always be fixed.
 </Callout>
 
-![Table Header Props](public/assets/table-figma-header.webp)
- 
+![Table Header Props](/assets/table-figma-header.webp)
+
 ### Define the number of columns
- 
+
 - Detach the component.
 - Hide or delete unnecessary columns, or add more columns.
 - Configure the resizing in the most suitable way for responsiveness.
@@ -53,7 +53,7 @@ import { Steps } from 'nextra/components'
 | `contextual help`           |   Defines if there's a Contextual Help besides the column label.               |
 | `label` |   Edits the column label.            |
 
-![Table Columns Props](public/assets/table-figma-columns.webp)
+![Table Columns Props](/assets/table-figma-columns.webp)
 
 ### Create a local component
 
@@ -75,7 +75,7 @@ After creating a local header component, replace it in the Table that is already
 
 Expandable variants include a placeholder for content. Create a local component with your content and then replace the placeholder, respecting the paddings already applied. Currently, any content can be included within an expanding row, even another table.
 
-![Table Rows Props](public/assets/table-figma-rows.webp)
+![Table Rows Props](/assets/table-figma-rows.webp)
 
 ### Define the number of columns
 
@@ -126,7 +126,7 @@ The minimum height of the row always respects the minimum height of the cells, a
 
 The Table component already includes a layer called Rows with auto layout. Replace the rows components that already exist in the Table for your local row component. Delete or add the necessary rows.
 
-![Add Rows](public/assets/table-figma-addrows.webp)
+![Add Rows](/assets/table-figma-addrows.webp)
 
 ### Create a local component
 

diff --git a/packages/docs/pages/foundations/color/best-practices.mdx b/packages/docs/pages/foundations/color/best-practices.mdx
@@ -16,19 +16,19 @@ All token names start with a basic classification that usually reflects the CSS
 
 ### Hue
 
-![Primitive Color Hue](public/assets/color-hue.webp)
+![Primitive Color Hue](/assets/color-hue.webp)
 
 Hue is the property that references the color family (such as red, blue, yellow, green, etc). There are nine color hues included in Shoreline besides gray. As explained in the rationale, this large breadth of color hues is intended to allow experimentation. Five hues (gray, blue, red, yellow, green) are already used by semantic tokens and, therefore, have a meaning attached, but the others (orange, teal, purple, pink, cyan) can be used freely.
 
 ### Tone
 
-![Primitive Color Tone](public/assets/color-tone.webp)
+![Primitive Color Tone](/assets/color-tone.webp)
 
 Tone refers to the luminosity of the color in a range that goes from lightest (1) to darkest (13). The only exception is white, which is $color-gray-0. When choosing a color tone, consider that not all combinations work since, for accessibility reasons, there must be enough contrast between the foreground and background.
 
 ## Semantic Colors
 
-![Semantic Color Table](public/assets/color-semantic-table.webp)
+![Semantic Color Table](/assets/color-semantic-table.webp)
 _The naming convention for semantic color tokens is very scalable. It allows for more tokens than currently exist since only tokens that have common use cases are created._
 
 The rationale explains that semantic tokens help design components with consistent visuals and behaviors. Color hues carry meaning and improve usability if applied consistently. That's why it's always better to use a semantic token if there's one that applies. Understanding their naming convention is the best way to become more proficient in applying them.
@@ -37,7 +37,7 @@ When reading the name of a semantic color token (`$fg`, `$bg`, `$border`), consi
 
 ### Type
 
-![Semantic Color Type](public/assets/color-type.webp)
+![Semantic Color Type](/assets/color-type.webp)
 
 All token names start with a basic classification that usually reflects the CSS property to which the values apply. Color tokens, in particular, have so many applications that they are divided into three primary categories.
 
@@ -47,7 +47,7 @@ All token names start with a basic classification that usually reflects the CSS
 
 ### Surface
 
-![Semantic Color Surface](public/assets/color-surface.webp)
+![Semantic Color Surface](/assets/color-surface.webp)
 
 Semantic color tokens (`$fg`, `$bg`, `$border`) are then divided based on the meaning they imply. Elements should adopt a single surface (and modifier, when applicable) to communicate semantics and aid usability.
 
@@ -62,7 +62,7 @@ Semantic color tokens (`$fg`, `$bg`, `$border`) are then divided based on the me
 
 ### Modifier
 
-![Semantic Color Modifier](public/assets/color-modifier.webp)
+![Semantic Color Modifier](/assets/color-modifier.webp)
 
 Surfaces have medium prominence by default, sometimes needing to be softened or intensified. Therefore, alternatives are offered.
 
@@ -72,7 +72,7 @@ Surfaces have medium prominence by default, sometimes needing to be softened or
 
 ### State
 
-![Semantic Color State](public/assets/color-state.webp)
+![Semantic Color State](/assets/color-state.webp)
 
 Tokens used in interactive elements, such as buttons or form fields, need to react to user actions, and this feedback usually relies on color. It’s worth noting that the default state is omitted from the token name.
 

diff --git a/packages/docs/pages/foundations/elevation/best-practices.mdx b/packages/docs/pages/foundations/elevation/best-practices.mdx
@@ -10,7 +10,7 @@ Elevation tokens are divided in three types:
 
 As explained in the [rationale](https://shoreline.vtex.com/foundations/elevation/rationale), this is a web standard used in the focus state of interactive elements for users that prefer or require keyboard navigation.
 
-![Focus Ring](public/assets/focus-ring.png)
+![Focus Ring](/assets/focus-ring.png)
 
 | Token                  | Usage                                                                                                          |
 | :--------------------- | :------------------------------------------------------------------------------------------------------------- |
@@ -22,7 +22,7 @@ As explained in the [rationale](https://shoreline.vtex.com/foundations/elevation
 
 As mentioned in the [rationale](https://shoreline.vtex.com/foundations/elevation/rationale), use these tokens to indicate that an element is over another and there is content hidden below it.
 
-![Shadow](public/assets/shadow.png)
+![Shadow](/assets/shadow.png)
 
 | Token       | Usage                    |
 | :---------- | :----------------------- |
@@ -33,7 +33,7 @@ As mentioned in the [rationale](https://shoreline.vtex.com/foundations/elevation
 
 This CSS property controls the stacking order of elements on a page, measured along a z-axis. An element with a higher z-index value appears in front of another with a lower z-index value. Elements in the Admin should be stacked as described below.
 
-![Z-index](public/assets/z-index.png)
+![Z-index](/assets/z-index.png)
 
 | Token   | Usage                     |
 | :------ | :------------------------ |

diff --git a/packages/docs/pages/foundations/icons/best-practices.mdx b/packages/docs/pages/foundations/icons/best-practices.mdx
@@ -8,14 +8,14 @@ In Shoreline, they are identified by the prefix `Icon` and their naming conventi
 
 ### Weight
 
-![Icons weight](public/assets/icons-weight.webp)
+![Icons weight](/assets/icons-weight.webp)
 
 - **Outline:** Default weight (1.5px stroke, light weight in Phosphor) used in interactive elements (Button, Search, Sidebar sections).
 - **Fill:** Used in non-interactive elements (Alerts, Toasts), for informative purposes.
 
 ### Size
 
-![Icons size](public/assets/icons-size.webp)
+![Icons size](/assets/icons-size.webp)
 
 - **Normal:** Default size (20px) used in most scenarios (Button, Alert, Toast, Sidebar sections).
 - **Small:** In-line appropriate size (16px) used for affordance purposes (caret in a Menu or Filter, arrow for external links).

diff --git a/packages/docs/pages/foundations/radius/best-practices.mdx b/packages/docs/pages/foundations/radius/best-practices.mdx
@@ -2,7 +2,7 @@
 
 Radius tokens are identified by the prefix `$radius`, followed by numeric suffixes in a crescent order. The only exception is the most curved value which the suffix is `full`.
 
-![Radius](public/assets/radius.png)
+![Radius](/assets/radius.png)
 
 ## Usage
 

diff --git a/packages/docs/pages/foundations/spacing/best-practices.mdx b/packages/docs/pages/foundations/spacing/best-practices.mdx
@@ -13,7 +13,7 @@ Spacing can be applied horizontally or vertically in any CSS property that recei
 - Spacing can also define the relationships between groups of elements. For example, the space between form sections should have a higher value than the space between the form section title and a field.
 - Elements with more spacing around them are usually perceived as having a higher relevance on the interface, for example, the spacing around an error state of a Collection.
 
-![Space relationships](public/assets/space-relationships.png)
+![Space relationships](/assets/space-relationships.png)
 _Spacing within a Checkbox group and between form sections._
 
 ### Visual rhythm
@@ -22,26 +22,26 @@ _Spacing within a Checkbox group and between form sections._
 - The rhythm can be more predictable when elements within a screen have the same level of importance, such as in a Table.
 - The rhythm can also help organize elements that may have different levels of importance, such as in a dashboard.
 
-![Space visual rhythm](public/assets/space-visualrhythm.png)
+![Space visual rhythm](/assets/space-visualrhythm.png)
 _Spacing between elements with the same level of importance._
 
 ### Visual weight
 
 - The spacing scale can be applied horizontally or vertically. Depending on the visual weight of the element, sometimes using the same value on both axes doesn't result in a balanced composition. In these scenarios, it's necessary to optically adjust the spacing.
 - Observe if the components have a well-defined background (marked by a fill or stroke) or not. For example, the spacing value between `primary` and `secondary` Buttons should be larger than the spacing value between two `tertiary` Buttons.
 
-![Space visual weight](public/assets/space-visualweight1.png)
+![Space visual weight](/assets/space-visualweight1.png)
 _Different spacing between components with and without a well-defined background._
 
-![Space visual weight](public/assets/space-visualweight2.png)
+![Space visual weight](/assets/space-visualweight2.png)
 _Optical adjustment with the horizontal padding larger than the vertical padding._
 
 ### Density
 
 - Tighter spacing, more dense: increases the level of scannability for large sets of data, such as in a Table.
 - Looser spacing, less dense: increases the level of hierarchy or helps define groups within an interface, such as Form sections.
 
-![Space density](public/assets/space-density.png)
+![Space density](/assets/space-density.png)
 _Tighter and looser spacing._
 
 ### Examples

diff --git a/packages/docs/pages/foundations/typography/best-practices.mdx b/packages/docs/pages/foundations/typography/best-practices.mdx
@@ -10,7 +10,7 @@ The Figma library only includes the semantic typography tokens, and their usage
 
 ## Display
 
-![Display](public/assets/display.png)
+![Display](/assets/display.png)
 
 These tokens represent titles (page, section, subsections) or highlight the most relevant numbers in a dashboard. Use them sparingly to maintain a clear hierarchy, high information density (display texts require more space around them) and avoid a visually-heavy interface.
 
@@ -23,31 +23,31 @@ These tokens represent titles (page, section, subsections) or highlight the most
 
 ## Body
 
-![Body](public/assets/body.png)
+![Body](/assets/body.png)
 
 | Token        | Usage                                                                                                                                                                        |
 | :----------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `$text-body` | Used in almost all non-interactive or descriptive content (paragraphs, descriptions, field values, labels). Pair with a Display token, `$text-emphasis`, or `$text-caption`. |
 
 ## Action
 
-![Action](public/assets/action.png)
+![Action](/assets/action.png)
 
 | Token          | Usage                                                                                                                                      |
 | :------------- | :----------------------------------------------------------------------------------------------------------------------------------------- |
 | `$text-action` | Used in the most relevant actions, such as Buttons, and in cells that identify rows that are clickable in a Table. Pair with `$text-body`. |
 
 ## Emphasis
 
-![Emphasis](public/assets/emphasis.png)
+![Emphasis](/assets/emphasis.png)
 
 | Token            | Usage                                                                                                                                                                                                                                                      |
 | :--------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `$text-emphasis` | Token with a heavier weight than `$text-body`. Use sparingly in content that is non-interactive or descriptive (Alert message, column name in a Table) or in actions that are less relevant than Buttons (Filters and Menu items). Pair with `$text-body`. |
 
 ## Caption
 
-![Caption](public/assets/caption.png)
+![Caption](/assets/caption.png)
 
 These tokens are used in content that is non-interactive, short and less important in a page (otherwise use `$text-body`). Use them sparingly so they don't harm readability. They can be paired with `$text-body`.