Titles, body copy, icons, shadows, tooltips
@@ -231,7 +231,7 @@ Here's a quick overview of the colors available in Odyssey and some guidelines f
-
+
Green
@@ -250,6 +250,23 @@ Here's a quick overview of the colors available in Odyssey and some guidelines f
N/A
+
+
+
+
+
+ Green 600
+
+
+ #008055
+
+
+ Background color for success messaging
+
+
+ Headlines, body copy, fail states, buttons
+
+
diff --git a/packages/docs/base/elements.md b/packages/docs/base/elements.md
index 0c4c34e146..f1fe990cb5 100644
--- a/packages/docs/base/elements.md
+++ b/packages/docs/base/elements.md
@@ -97,7 +97,6 @@ Odyssey takes care to provide additional style to the following HTML elements by
## del
> The HTML `` element represents a range of text that has been deleted from a document. This can be used when rendering "track changes" or source code diff information, for example. The `` element can be used for the opposite purpose: to indicate text that has been added to the document. - MDN
-
### Accessibility
Many screen readers do not let users know of the presence of `del`. To fix this, you should consider using `data-a11y-start` and `data-a11y-end`, prepend and append assistive text to the contents of the tag. In the above example, there are additional spaces before and after the text, this is intentional. Not adding these spaces will cause the content within the tag to run into the text within the tag.
@@ -116,6 +115,68 @@ Many screen readers do not let users know of the presence of `del`. To fix this,
```
+## details
+> The HTML Details Element (``) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the `` element. [...] If the first child of the `` element is a ``, the contents of the `` element are used as the label for the disclosure widget. - MDN
+
+### IE11 support
+
+IE 11 incorrectly renders the `summary` element as "always open". Other than this behavior, it is safe for use.
+
+
+
+
+ What is Okta?
+
Okta is the foundation for secure connections between people and technology. It’s a service that gives employees, customers, and partners secure access to the tools they need to do their most important work.
+
+
+
+```html
+
+ What is Okta?
+
Okta is the foundation for secure connections between people and technology. It’s a service that gives employees, customers, and partners secure access to the tools they need to do their most important work.
+
+```
+
+
+## dl
+> The HTML `
` element represents a description list. The element encloses a list of groups of terms (specified using the `
` element) and descriptions (provided by `
` elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs). - MDN
+
+### Accessibility
+
+Screen readers announce `
` content differently - some may not indicate that the content is a list. To improve usability make sure each list item's content communicates its relationship to other list items.
+
+
+
+
Gentlemen of the Mushroom Kingdon
+
+
Mario
+
red hat, older twin brother, classic mustache
+
Luigi
+
green hat, younger twin brother, classic mustache
+
Wario
+
yellow hat, not a twin, kinked mustache
+
loves garlic
+
Waluigi
+
purple hat, not a twin, pointy mustache
+
+
+
+```html
+
Gentlemen of the Mushroom Kingdon
+
+
Mario
+
red hat, older twin brother, classic mustache
+
Luigi
+
green hat, younger twin brother, classic mustache
+
Wario
+
yellow hat, not a twin, kinked mustache
+
loves garlic
+
Waluigi
+
purple hat, not a twin, pointy mustache
+
+```
+
+
## em
> The HTML `` element marks text that has stress emphasis. The `` element can be nested, with each level of nesting indicating a greater degree of emphasis. - MDN
@@ -224,6 +285,29 @@ Many screen readers do not let users know of the presence of `ins`. To fix this,
```
+## pre
+> The HTML `
` element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional ("monospace") font. Whitespace inside this element is displayed as written. - MDN
+
+### Usage
+
+Since the `pre` tag preserves all whitespace, it's best to begin and end your content without linebreaks as below.
+
+
+
+```
+
+
## s
> The HTML `` element renders text with a strikethrough, or a line through it. Use the `` element to represent things that are no longer relevant or no longer accurate. However, `` is not appropriate when indicating document edits; for that, use the `` and `` elements, as appropriate. - MDN
@@ -302,6 +386,11 @@ You can also nest `strong`. Doing so will provide additional style.
```
+## summary
+> The HTML Disclosure Summary element (``) element specifies a summary, caption, or legend for a `` element's disclosure box. Clicking the `` element toggles the state of the parent `` element open and closed.
+
+See `details` for example.
+
## sup
> The HTML Superscript element (``) specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text. - MDN
diff --git a/packages/docs/base/iconography.md b/packages/docs/base/iconography.md
index 47eac493b7..e16521352f 100644
--- a/packages/docs/base/iconography.md
+++ b/packages/docs/base/iconography.md
@@ -17,6 +17,17 @@
+
+
+
+
+
+ Caution
+
+
+ To indicate a crucial decision
+
+
@@ -50,6 +61,17 @@
To support a user name
+
+
+
+
+
+ Copy
+
+
+ To copy text
+
+
@@ -96,7 +118,7 @@
-
+
Complete
@@ -105,6 +127,17 @@
To show a completed process
+
+
+
+
+
+ Error
+
+
+ To indicate an error
+
+
@@ -171,6 +204,17 @@
To subtract or remove
+
+
+
+
+
+ Filter
+
+
+ To filter results
+
+
diff --git a/packages/docs/components/link.md b/packages/docs/components/link.md
index 468f08695e..b679c9352c 100644
--- a/packages/docs/components/link.md
+++ b/packages/docs/components/link.md
@@ -4,23 +4,18 @@
Links are navigation elements displayed as text. A link can open another page or jump to a section of a page.
-## Types of links
-
-### Default
-
```html
- Link
+ If you need more info, view the spec on MDN.
```
-The :active state of a link does not have any unique styling, so it matches the :hover styling.
+## Specialty cases
### Mailto
@@ -47,7 +42,7 @@ Use an external link when:
Opening the link in the current tab would result in a significant loss of data or interruption of flow (e.g. while filling out a long form)
@@ -71,32 +66,16 @@ Odyssey has removed unique styling for `:visited` links. This is an intentional
Try to limit a link to at most 3 words
Choose link text that describes the destination (e.g. "Settings"), rather than generic text (e.g. "Click here" or a URL)
Avoid using a link <a> for actions; use a button <button> instead
-
Avoid underlining text for purely decorative purposes, as it will be mistaken for linked text
-### Styling
-
-By default, links embedded inside blocks of prose text are underlined, while links used inside navigational menus and nav bars do not require an underline and may be custom-styled.
-
-Link styling can also be adjusted for branding, theme, or contextual purposes. Examples include color, font size, or font weight. Be mindful of consistency with the system you are designing for.
-
### Accessibility
-Links should display a visible :focus state when users interact via keyboard.
+Links in Odyssey are not underlined, but do maintain a minimum 3:1 contrast ratio with our body text color and a 4.5:1 contrast ratio with our available background colors. If you deviate from these standards via overrides, please ensure that your links have a non-color indicator, e.g. an underline.
+
+Links should display a visible :focus state when users interact via keyboard. Odyssey preserves the default `:focus` state for each browser.
### Localization
When localizing links, avoid putting the text through a translator and applying the markup. Instead, consider the language's nuances and grammar to make the link and its surrounding messaging feel natural.
-## Further reading
-
-
-
:::
diff --git a/packages/docs/components/text-input.md b/packages/docs/components/text-input.md
index 984e1d2a63..9296ccea00 100644
--- a/packages/docs/components/text-input.md
+++ b/packages/docs/components/text-input.md
@@ -173,6 +173,77 @@ Note, when indicating a validation error, please use a `.ods-field--error` to in
## Additional types
+### Standalone Search
+
+> `` elements of type search are text fields designed for the user to enter search queries into. These are functionally identical to text inputs, but may be styled differently by the user agent. - MDN
+
+Odyssey's standalone search is styled to provide minimal UI while maintaining accessibility when searching outside of normal form contexts. Inputs with `type="search"` will render with the "Search" UI indicator as well as a visually hidden label.
+
+Unlike other inputs, we recommend using the `placeholder` attribute to indicate the scope of your search input. This text should match the hidden label.
+
+
+
+
+
+
+ ```html
+
+ ```
+
+
+We also provide a variant with an attached button for in-page searching or when placeholder text is undesirable. Please follow our Button guidelines when using these variants.
+
+
+
+
+
+
+ ```html
+
+ ```
+
+
+
+
+
+
+
+
+ ```html
+
+ ```
+
+
### Text area
> The HTML `