Remove outdated Foundations content (#4408)

Co-authored-by: Josh Wooding <12938082+joshwooding@users.noreply.github.com>

site/docs/components/country-symbol/examples.mdx

@@ -27,7 +27,7 @@ Import and use the sharp version of each country symbol individually using the `
 
 ## Size
 
-You can change the size of each country symbol using the `size` property which acts as a multiplier for the base size, as described in the [scale foundation](/salt/foundations/scale). The base size of the country symbol is based on the active density as described in the [size foundation](/salt/foundations/size).
+You can change the size of each country symbol using the `size` property which acts as a multiplier for the base size, as described in the [country symbol foundation](/salt/foundations/iconography/country-symbols). The base size of the country symbol is based on the active density as described in the [size foundation](/salt/foundations/size).
 
   </LivePreview>
   <LivePreview componentName="country-symbol" exampleName="AllCountrySymbols">

site/docs/components/icon/examples.mdx

@@ -19,7 +19,7 @@ package.
 <LivePreview componentName="icon" exampleName="IconSize">
 ## Icon size
 
-You can change the size of each icon using the `size` property, which acts as a multiplier for the base icon’s size, as described in the [scale foundation](/salt/foundations/scale). The base size of the icon depends on the active density as described in the [size foundation](/salt/foundations/size).
+You can change the size of each icon using the `size` property, which acts as a multiplier for the base icon’s size, as described in the [iconography foundation](/salt/foundations/iconography). The base size of the icon depends on the active density as described in the [size foundation](/salt/foundations/size).
 
 </LivePreview>
 <LivePreview componentName="icon" exampleName="IconTypes">

site/docs/components/status-indicator/examples.mdx

@@ -24,8 +24,7 @@ four severity levels that set a distinctive indicator and color.
 
 You can control the size of the Status Indicator with the `size` prop. This
 number will multiply the base size as described in the
-[scale](/salt/foundations/scale) and [size](/salt/foundations/size)
-foundations.
+[size foundation](/salt/foundations/size).
 
   </LivePreview>
   <LivePreview componentName="status-indicator" exampleName="Labelling">

site/docs/foundations/color.mdx

@@ -50,4 +50,19 @@ These are the categorical colors used for data visualization and other component
 
 <FoundationColorView group="categorical" />
 
+## Opacity
+
+Opacity refers to the degree of transparency or visibility of a design element. It allows for layering, creating depth and hierarchy, and can help provide visual interest to an interface.
+
+## Opacity scale
+
+| Token               | Opacity |
+| ------------------- | ------- |
+| `--salt-opacity-0`  | 0.00    |
+| `--salt-opacity-8`  | 0.08    |
+| `--salt-opacity-15` | 0.15    |
+| `--salt-opacity-25` | 0.25    |
+| `--salt-opacity-40` | 0.40    |
+| `--salt-opacity-70` | 0.70    |
+
 :fragment{src="./fragments/feedback.mdx"}

site/docs/foundations/density.mdx

@@ -14,7 +14,7 @@ There are four densities available to choose from:
 - High
 - Medium
 - Low
-- Touch.
+- Touch
 
 <Image
   src="/img/foundations/density-example.svg"
@@ -33,18 +33,12 @@ Medium density is the default solution for most use cases. It is ideal for most
 
 ## Low density (LD)
 
-Low density is optimized for data or content-light interfaces. It's ideal for marketing, communications, or onboarding experiences. In contrast to 'high density', low density is intended for infrequently used applications by inexperienced users.
+Low density is optimized for content-light interfaces. It's ideal for marketing, communications, or onboarding experiences. In contrast to 'high density', low density is intended for infrequently used applications by inexperienced users.
 
 ## Touch density (TD)
 
 Touch density scales components to their largest increment and is intended for mobile or tablet devices only.
 
-<ExampleContainer type="negative">
-
-Don't use touch density for anything other than mobile or tablet experiences. For simple interfaces use low density.
-
-</ExampleContainer>
-
 ## Mixing densities
 
 Density is intended to be used one density at a time, only changing when part of a [responsive layout](./responsiveness). When applying density:

site/docs/foundations/duration.mdx

@@ -24,7 +24,7 @@ There are four durations available to choose from: instant, perceptible, notable
 
 It's important to use the correct duration to ensure the user feels in control of the interface. The duration should reflect the importance of the element or information being animated. Responses that occur too quickly can distract or obstruct a workflow (e.g., tooltips should never appear instantly as a user moves the mouse pointer over the user interface (UI)). If responses occur too slowly, the application may appear unresponsive, resulting in unnecessary clicks or potential user error (e.g., a system action occurs, but a progress component isn't displayed quickly enough to communicate its state).
 
-## Instant (0–100ms)
+## Instant (0ms)
 
 An instant duration is an immediate response by the system to a user’s interaction within 0–100ms. The response should take no more than 100ms to complete. Interactions that can trigger an instant response include hovering over a button, clicking a radio button, typing into an editable field, or dragging an object. No feedback is required as the system response itself is the feedback.
 
@@ -35,15 +35,15 @@ An instant duration is an immediate response by the system to a user’s interac
 
 ## Perceptible (300ms)
 
-A perceptible duration is a short, but detectable delay between a user's action and the system's response. The user should be aware of the gap but retain the feeling of control. This implies a shared control between the user and the interface—the user expects the system to process the interaction they've enabled the system to do. However, the delay should feel acceptable and maintain the user’s attention and productivity. This aligns with the [Doherty Threshold](https://lawsofux.com/doherty-threshold/) principle, which dictates that user experience turns from painful to addictive after the system feedback time drops below 400ms. Tooltips and overlays are examples of perceptible delays.
+A perceptible duration is a short, but detectable delay between a user's action and the system's response.
 
 <Image
   src="/img/foundations/duration-perceptible.png"
   alt="Example of duration perceptible"
   className="saltSite-util-space-below-1x"
 />
 
-Perceptible duration is recommended for revealing secondary guidance or information to a user, but it doesn't warrant a permanent place within the interface. Content typically has a relatively high level of urgency, so users can quickly find solutions to their problems and avoid getting frustrated with the system.
+Perceptible duration is recommended for revealing secondary guidance or information to a user.
 
 ## Notable (1s)
 
@@ -59,10 +59,6 @@ A 1s delay is usually the maximum limit for experiencing an interaction as one c
 
 With a delay of 1s (`salt-duration-notable`) there's no need to provide visual feedback to the user; however, it can be used as a breakpoint. Once a delay has exceeded the 'notable' duration, it's useful to indicate to the user that the system is working on the problem, for example by displaying a progress indicator or loading state.
 
-### The time between notable and cut-off
-
-The time between `salt-duration-notable` and `salt-duration-cutoff` indicates that the system requires a longer time to process an action past a ‘notable’ duration, but with the reassurance that the action will be completed until the cut-off point. Like with notable duration, the user relies on the system to “work” on providing an outcome but may momentarily feel a loss of control as their workflow has been interrupted. Appropriate visual feedback should be displayed at this point to provide reassurance that the interface will continue processing an action as intended. It would remain present until cut-off.
-
 #### Recommended visual feedback:
 
 [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.
@@ -74,7 +70,7 @@ The time between `salt-duration-notable` and `salt-duration-cutoff` indicates th
 
 ## Cut-off (10s)
 
-The average person’s attention span has a limit of 10s. Beyond this time, users are likely to start mentally context-switching. `salt-duration-cutoff` is the point at which any attempt for a system to respond should finish, and a status message should be displayed.
+Cut-off, `salt-duration-cutoff`, is the point at which any attempt for a system to respond should finish, and a status message should be displayed.
 
 <Image
   src="/img/foundations/duration-cutoff.svg"
@@ -88,16 +84,8 @@ To prevent a frustrating or unproductive user experience, the time until a cut-o
 - Displaying general hints and tips for using the application.
 - If possible, allowing the user to continue using other parts of the UI while the content loads.
 
-#### By-passing the 10 second cut-off point:
-
-There may be a requirement for a system to continue loading an interaction for an indeterminate amount of time, past the cut-off point, due to a workflow dependency. A system may need to support a highly performant UI that concurrently updates a significant number of data points.
-
-If a duration exceeds the cut-off point, it's recommended to implement appropriate visual feedback that prevents the system from slowing down and provides enough visual affordance for the user to successfully navigate a busy UI environment.
-
-It is therefore acceptable to implement a duration of longer than 10 seconds, provided:
+#### Exceeding the 10 second cut-off point:
 
-- The outcome doesn’t require user input or response.
-- The user can switch their attention to alternative tasks in the duration time.
-- The interaction that has a longer duration time is independent of, and doesn’t affect time sensitivity of, parallel interactions.
+There may be a requirement for a system to continue loading an interaction for an indeterminate amount of time, past the cut-off point, due to a workflow dependency. A system may need to support a highly performant UI that concurrently updates a significant number of data points such as a trading platform.
 
 :fragment{src="./fragments/feedback.mdx"}

site/docs/foundations/index.mdx

@@ -67,16 +67,6 @@ Modes enable the color palette to change from light to dark, providing the flexi
     >
 A responsive layout makes dynamic changes to the appearance of a product in response to the size of the screen.
 
-  </OverviewCard>
-
-  <OverviewCard
-    icon={<Image src="/img/foundations/scale.svg" alt="scale"  />}            
-    title="Scale"
-    url="./scale"
-    keylineColor="green"
-    >
-Scale allows you to give components greater or lesser prominence within an interface through a multiplier of their default size.
-
   </OverviewCard>
 
    <OverviewCard

site/docs/foundations/modes.mdx

@@ -3,13 +3,11 @@ title: Modes
 layout: DetailTechnical
 sidebar:
   priority: 8
-data:
-  status: In progress
 ---
 
 Modes enable the color palette to change from light to dark, providing the flexibility to choose an option that best fits a preference or need. Choosing a suitable mode can improve accessibility, reduce eye strain in low-light conditions and increase reading speed.
 
-The following example demonstrates the two available modes. Each mode shares the same components and design tokens, with just colors changing depending on the chosen mood.
+The following example demonstrates the two available modes. Each mode shares the same components and design tokens, with just colors changing depending on the chosen mode.
 
 <Image
   src="/img/foundations/modes-light-dark.svg"
@@ -24,39 +22,4 @@ Light mode works well when users are likely to visit your application content se
 
 Consider applying a dark mode if you're designing an interface that will be used continuously for long periods. It may be easier on the eyes in certain environments, but it could increase eye strain when reading long text passages.
 
-## Backgrounds
-
-Each mode includes two background options: primary and secondary. The two backgrounds allow for color layering, which you can use to separate regions or blocks of content and help establish a visual hierarchy.
-
-<Image
-  src="/img/foundations/modes-background-options.svg"
-  alt="Example of primary and secondary backgrounds for each mode"
-/>
-
-| Token                                   | Figma                          | Light mode      | Dark mode        |
-| --------------------------------------- | ------------------------------ | --------------- | ---------------- |
-| `--salt-container-primary-background`   | Container/Primary/Background   | `color-white`   | `color-gray-800` |
-| `--salt-container-secondary-background` | Container/Secondary/Background | `color-gray-20` | `color-gray-600` |
-
-## 60-30-10 rule
-
-Aim to balance the use of color by following the 60-30-10 ration. This simple rule helps create a well-balanced design by adhering to the following guidelines:
-
-- **60% primary (or dominant) color**—the neutral primary background color, forming the base color of a design
-- **30% secondary color**—defines areas of focus, for instance, a summary panel, a set of high-level metrics, a toolbar or the navigation
-- **10% accent color**—draws the eyes to specific and important elements, such as a call-to-action, a prominent heading, image or data visualization.
-
-### Example
-
-<Image
-  src="/img/foundations/modes-60-30-10.svg"
-  alt="Example of primary and secondary backgrounds for each mode"
-/>
-
-| Annotation | Percentage | Usage                                    |
-| ---------- | ---------- | ---------------------------------------- |
-| 1          | 60%        | Primary background color                 |
-| 2          | 30%        | Highlighted region                       |
-| 3          | 10%        | Navigation accent bar and call-to-action |
-
 :fragment{src="./fragments/feedback.mdx"}