Skip to content

Commit

Permalink
Fix broken site links under foundations (#3995)
Browse files Browse the repository at this point in the history
  • Loading branch information
origami-z authored Aug 16, 2024
1 parent 3045c38 commit 15ff922
Show file tree
Hide file tree
Showing 8 changed files with 17 additions and 17 deletions.
8 changes: 4 additions & 4 deletions site/docs/foundations/density.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: Density
layout: DetailTechnical
---

Density relates to the amount of content that can fit on a screen based on the [size](size) and [spacing](spacing) of components.
Density relates to the amount of content that can fit on a screen based on the [size](./size) and [spacing](./spacing) of components.

When creating a product using the design system, choose a base density as a starting point. All components, spacing, and typographic elements will align and remain proportionate regardless of the density you choose.

Expand Down Expand Up @@ -45,13 +45,13 @@ Don't use touch density for anything other than mobile or tablet experiences. Fo

## Mixing densities

Density is intended to be used one density at a time, only changing when part of a [responsive layout](/salt/foundations/responsiveness). When applying density:
Density is intended to be used one density at a time, only changing when part of a [responsive layout](./responsiveness). When applying density:

- Pick a density and be consistent with it across your application
- Alternatively, set density to align to breakpoints and define which density to use per breakpoint
- If the use case requires it, mix densities, but do it sparingly in order to provide greater emphasis to a single component or small group of components, such as log-in fields.

The [Responsiveness](/salt/foundations/responsiveness) foundation includes guidance on recommended breakpoints for each density.
The [Responsiveness](./responsiveness) foundation includes guidance on recommended breakpoints for each density.

Before mixing densities, consider other ways to establish hierarchy or emphasise certain elements, such as:

Expand All @@ -62,6 +62,6 @@ Before mixing densities, consider other ways to establish hierarchy or emphasise

If you still need to mix densities, do it sparingly. Although possible, the components within the system are not designed to be mixed. This does not mean they can't be mixed, but they are designed around a specific scaling system that ensures components of the same density align. The components are not designed to 'fit' together across densities.

Mixing the density of components sparingly can help to create emphasis without visual disruption. However, if overused, there may be issues with component alignment and use of [spacing tokens](spacing).
Mixing the density of components sparingly can help to create emphasis without visual disruption. However, if overused, there may be issues with component alignment and use of [spacing tokens](./spacing).

:fragment{src="./fragments/feedback.mdx"}
2 changes: 1 addition & 1 deletion site/docs/foundations/division.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Negative space is the area between design elements. It can also be the space wit

Negative space should be the first option when dividing regions, blocks of content or elements within a design. It's an elegant visual divider that helps break up an interface without creating visual clutter.

You can find further guidance in the [Spacing foundation](/salt/foundations/spacing).
You can find further guidance in the [Spacing foundation](./spacing).

<Image
src="/img/foundations/division-negativespace.svg"
Expand Down
2 changes: 1 addition & 1 deletion site/docs/foundations/duration.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ The time between `salt-duration-notable` and `salt-duration-cutoff` indicates th

#### Recommended visual feedback:

[Spinner](https://storybook.saltdesignsystem.com/?path=/story/documentation-core-spinner--docs) is a visual representation of a process that is taking an indeterminate amount of time to complete. A spinner can be displayed at any point between `salt-duration-notable` and `salt-duration-cutoff`, but should not be displayed any sooner, as the assumption should be that the user's actions will have completed before it's necessary to show a loading state.
[Spinner](../components/spinner) is a visual representation of a process that is taking an indeterminate amount of time to complete. A spinner can be displayed at any point between `salt-duration-notable` and `salt-duration-cutoff`, but should not be displayed any sooner, as the assumption should be that the user's actions will have completed before it's necessary to show a loading state.

<Image
src="/img/foundations/duration-timebetween.svg"
Expand Down
2 changes: 1 addition & 1 deletion site/docs/foundations/responsiveness.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ A responsive layout is made up of a set of consistently proportioned columns, se

Basic layout grids are included in the design system to provide a starting point for designing any user interface.

The gutters and margins are set using `--salt-spacing-300` across all densities. The number of columns and their widths vary depending on the density and breakpoint set. Find all you need to know about densities on the [Density foundation](/salt/foundations/density)
The gutters and margins are set using `--salt-spacing-300` across all densities. The number of columns and their widths vary depending on the density and breakpoint set. Find all you need to know about densities on the [Density foundation](./density)

| Token | High density (px) | Medium | Low | Touch |
| -------------------- | ----------------- | ------ | --- | ----- |
Expand Down
4 changes: 2 additions & 2 deletions site/docs/foundations/scale.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ layout: DetailTechnical

Scale allows you to give components greater or lesser prominence within an interface through a multiplier of their default size.

Scale works hand-in-hand with [density](density) to allow the prominence of components such as Avatar and Country Symbol to be changed within a layout.
Scale works hand-in-hand with [density](./density) to allow the prominence of components such as Avatar and Country Symbol to be changed within a layout.

This is achieved by applying a multiplier to the component. By default, scale is set to x1, applying x2 will double the size of the component, x3 will triple the size, etc. Scale can be used in conjunction with a size-token, as the following examples and tables show.

## Scale and size

The [Size](size) foundation establishes standard dimensions across the system. This ensures components maintain a consistent spatial relationship to the elements around them.
The [Size](./size) foundation establishes standard dimensions across the system. This ensures components maintain a consistent spatial relationship to the elements around them.

### Scaling size-base

Expand Down
10 changes: 5 additions & 5 deletions site/docs/foundations/size.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Size refers to the restricted dimensions provided within the design system, such

## Base

`salt-size-base` is the fixed default height for base components in each [density](/salt/foundations/density) within the design system. It ensures the consistent alignment of components in horizontal layouts, as well as the vertical alignments of the text values within them. This means the text within each component sits on the same baseline.
`salt-size-base` is the fixed default height for base components in each [density](./density) within the design system. It ensures the consistent alignment of components in horizontal layouts, as well as the vertical alignments of the text values within them. This means the text within each component sits on the same baseline.

<ImageSwitcher
images={[
Expand All @@ -31,7 +31,7 @@ Size refers to the restricted dimensions provided within the design system, such

### Nesting size-base

Using size-base, in conjunction with a [spacing token](/salt/foundations/spacing) above and below, creates a consistent height for components that can nest a `--salt-size-base` component within them. This provides further standardized heights across the design system.
Using size-base, in conjunction with a [spacing token](./spacing) above and below, creates a consistent height for components that can nest a `--salt-size-base` component within them. This provides further standardized heights across the design system.

The following example shows how components can use `--salt-size-base` and `--salt-spacing-50` (top and bottom) to define the height of a component or stackable element, such as a Data Grid row. The height allows a size-base component to be contained within it, but it is not dependent on the component to force the height.

Expand All @@ -45,7 +45,7 @@ The following example shows how components can use `--salt-size-base` and `--sal

## Selectable

`--salt-size-selectable` is used to set the dimensions of selectable components, including [Radio Button](https://storybook.saltdesignsystem.com/?path=/docs/documentation-core-radio-button--docs), [Checkbox](https://storybook.saltdesignsystem.com/?path=/docs/documentation-core-checkbox--docs), and Switch.
`--salt-size-selectable` is used to set the dimensions of selectable components, including [Radio Button](../components/radio-button), [Checkbox](../components/checkbox), and Switch.

<ImageSwitcher
images={[
Expand All @@ -59,11 +59,11 @@ The following example shows how components can use `--salt-size-base` and `--sal

`--salt-size-icon` controls the size of all icons throughout the design system. Icons are designed to be displayed no smaller than 12px x 12px; therefore this is set as a minimum measurement within the token's values. The result of this restriction can be seen in the Size tokens table. Following the ramp, HD should be 10px. However, the minimum size fixes it at 12px.

The size of an icon can be changed within a density using the [Scale](/salt/foundations/scale) Foundation. For HD, the scale is based on the expected value rather than the minimum. This means an HD icon starts at 12px. When scaled up (x2 its default size) it will be 20px rather than 24px, at x3 its default it will be 30px, etc.
The size of an icon can be changed within a density using the [Scale](./scale) Foundation. For HD, the scale is based on the expected value rather than the minimum. This means an HD icon starts at 12px. When scaled up (x2 its default size) it will be 20px rather than 24px, at x3 its default it will be 30px, etc.

The Scale Foundation provides an example of `--salt-size-icon` scaling, including specific values for each density.

You can find out more about icons and how to use them in the [Iconography](/salt/foundations/iconography) Foundation.
You can find out more about icons and how to use them in the [Iconography](./iconography) Foundation.

<ImageSwitcher
images={[
Expand Down
4 changes: 2 additions & 2 deletions site/docs/foundations/spacing.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ layout: DetailTechnical

The organization of space is a key aspect of design. Spatial tokens help align layouts and create consistent visual rhythm.

The spacing system is structured around a base unit (`--salt-spacing-100`) for each [density](/salt/foundations/density). This token determines the scale used across the design system.
The spacing system is structured around a base unit (`--salt-spacing-100`) for each [density](./density). This token determines the scale used across the design system.

Every space token within the system is a multiple of `--salt-spacing-100`. The numerical suffix indicates the percentage of the base unit each token represents. The scale is proportional across all densities.

Expand Down Expand Up @@ -126,6 +126,6 @@ For spacing purposes, separators are considered to be a type of content and ther

Only use separators if the content cannot be effectively divided in another way. Too many repeating lines can overload a design and create unnecessary visual noise.

The [Division](/salt/foundations/division) Foundation provides further guidance on the use of separators and their alternatives.
The [Division](./division) Foundation provides further guidance on the use of separators and their alternatives.

:fragment{src="./fragments/feedback.mdx"}
2 changes: 1 addition & 1 deletion site/docs/foundations/typography.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ WCAG 2.0 requires that the contrast ratio between text and background is at leas

## Line height

As with most aspects of the design system, type conforms to [density](density). Each style grows proportionately to align with the elements. Line height and the spaces between blocks also adhere to density.
As with most aspects of the design system, type conforms to [density](./density). Each style grows proportionately to align with the elements. Line height and the spaces between blocks also adhere to density.

Line height controls the space between baselines within a text. The height of a line of text is proportional to the text size.

Expand Down

0 comments on commit 15ff922

Please sign in to comment.